TECH BLOG

Nuxt.jsプロジェクトの作成から動作確認までの手順

2020-03-15

# はじめに Nuxt.jsでプロジェクトを作成し、最初の動作確認としてテストサーバーを起動してブラウザで表示するところまでの手順を解説します。 # 前提 - macOS - Node.js 13.11.0 - npm/npx 6.13.7 - Nuxt.js 2.11.0 - VS Code 1.42.1 # Nuxt.jsプロジェクト作成それでは、さっそくNuxt.jsプロジェクトを作成していきます。プロジェクトディレクトリなどで以下のコマンド [...]

Vue.js+Nuxt.js+Firebaseでサンプルアプリを作ってみた話

2020-03-16

# はじめに Vue.jsベースのWebフレームワーク、Nuxt.jsでサンプルアプリを作ってみました。 <a href="https://whitia.firebaseapp.com/" target="_blank"> <img data-src="https://i.imgur.com/ZuANXQ3.png" class="lazyload effect-fade"> みんなの方程式</a> # 機能の紹介 ## 詳細 <img data-src=" [...]

【脱・jQuery】jQueryで書いたAjaxをJavaScriptのFetch APIで書き直してみた

2020-03-08

# はじめにこれまでJavaScriptの処理を書くときはjQueryを使っていました。昔のJavaScriptはブラウザ互換性問題などがありとてもゴタゴタしていたので、jQueryを知ってからはその便利さに頼りっきりになっていました。しかし、最近は主要ブラウザでの互換性問題はほとんど解消され、jQueryを使うメリットが薄れてきています。むしろ、jQueryを導入する手間だったり、導入してからもバージョン管理したりとデメリットのほうが目立ってくるようになりました。 [...]

開発環境（ローカルストレージ）と本番環境（Amazon S3）にトリミング＋リサイズした画像を保存する方法

2020-03-07

# はじめに以前、以下の記事を書きました。 - [開発環境と本番環境で画像のアップロード先を分岐する方法 \- AUTOVICE](https://www.autovice.jp/articles/68) - [ローカルやAmazon S3にアップロードした画像をビューで表示する方法 \- AUTOVICE](https://www.autovice.jp/articles/70) 今回はこれらの記事の発展形として、「オリジナル画像」と「トリミング＋リサイズした画像 [...]

Laravel Mixの仕組みをわかりやすく解説：CSSをSASS/SCSSで記述する方法

2020-03-06

# はじめに Laravel Mixの仕組みをわかりやすく解説します。Laravel Mixを使ってアセットコンパイルを行うことで、SASS/SCSSでCSSを記述できるようになります。 # Laravel Mixの仕組みまずはじめに、LaravelのCSSがどういう風にアセットコンパイルされるのかを説明します。 ## CSSファイル HTMLから参照されるCSSファイルは`public/css/app.css`です。作成したばかりのLaravelプロジェクトには [...]

【Laravel 6.x】Laravelプロジェクトの名称を変更する方法

2020-03-04

PHP
Laravel

# はじめにあまりないケースではありますが、一度作成したLaravelプロジェクトの名称を変更する方法を解説します。ここで言うLaravelプロジェクトの名称とは、以下のコマンドの`Sample`のことを指します。 ```terminal $ composer create-project --prefer-dist laravel/laravel Sample ``` # 変更方法 ## Laravel 5.9以前ターミナルで以下のコマンドを実行します [...]

ローカルやAmazon S3にアップロードした画像をビューで表示する方法

2020-03-04

# はじめにこの記事では、以下の方針でアップロードした画像をビューで表示する方法を解説しています。 - 開発環境：ローカル（storage/app/public/） - 本番環境：Amazon S3 画像のアップロード方法と削除方法については以下の記事を参照してください。 [開発環境と本番環境で画像のアップロード先を分岐する方法 \- AUTOVICE](https://www.autovice.jp/articles/68) # アップロード画像の [...]

【Laravel】Amazon S3へのアップロードが「403 Access Denied」で失敗する原因と対処方法

2020-03-04

# はじめに LaravelでAmazon S3へ画像アップロードする処理を実装し、いざアップロードしようとしたところ、以下のエラーが出て失敗しました。 ``` Error executing "PutObject" on "https://minna-no-houteishiki.s3.ap-northeast-1.amazonaws.com/r1oJ01mYWVeol0m7jUTji7uef5lyG7MATNOqzl1A.png"; AWS HTTP error: Cl [...]

開発環境と本番環境で画像のアップロード先を分岐する方法

2020-03-04

# はじめにこの記事では、以下の方針で画像のアップロード先を分岐する方法について解説しています。 - 開発環境：ローカル（storage/app/public/） - 本番環境：Amazon S3 # 事前準備 AWSに未登録の場合は以下を参考にして登録してください。 [AWS アカウント作成の流れ \| AWS](https://aws.amazon.com/jp/register-flow/) IAM/S3が未作成の場合は以下を参考にして作成してくださ [...]

独自ポリシーの導入手順と注意点（ハマリポイント）を解説

2020-03-04

PHP
Laravel

# はじめにユーザーと記事を関連付けておいて、編集や削除は記事の作成者のみ許可したいときにはポリシーを作成します。今回はポリシーの導入手順と注意点（ハマリポイント）を解説します。 # 導入手順 ## ポリシー作成ターミナルで以下のコマンドを実行します。 ```terminal $ php artisan make:policy ArticlePolicy Policy created successfully. ``` 作成された`app/Pol [...]