# はじめに
Nuxt.jsプロジェクトにBootstrap-Vueを追加する手順を解説します。
Nuxt.jsプロジェクトの作成手順は以下の記事を参照してください。
[Nuxt\.jsプロジェクトの作成から動作確認までの手順 \- AUTOVICE](https://www.autovice.jp/articles/76)
なお、Nuxt.jsプロジェクト作成時にUIフレームワークにBootstrap-Vueを選択している場合は以下の手順は必要ありません。以下の [...]
# はじめに
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ベースの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=" [...]
# はじめに
これまでJavaScriptの処理を書くときはjQueryを使っていました。昔のJavaScriptはブラウザ互換性問題などがありとてもゴタゴタしていたので、jQueryを知ってからはその便利さに頼りっきりになっていました。
しかし、最近は主要ブラウザでの互換性問題はほとんど解消され、jQueryを使うメリットが薄れてきています。むしろ、jQueryを導入する手間だったり、導入してからもバージョン管理したりとデメリットのほうが目立ってくるようになりました。
[...]
# はじめに
以前、以下の記事を書きました。
- [開発環境と本番環境で画像のアップロード先を分岐する方法 \- AUTOVICE](https://www.autovice.jp/articles/68)
- [ローカルやAmazon S3にアップロードした画像をビューで表示する方法 \- AUTOVICE](https://www.autovice.jp/articles/70)
今回はこれらの記事の発展形として、「オリジナル画像」と「トリミング+リサイズした画像 [...]
# はじめに
Laravel Mixの仕組みをわかりやすく解説します。Laravel Mixを使ってアセットコンパイルを行うことで、SASS/SCSSでCSSを記述できるようになります。
# Laravel Mixの仕組み
まずはじめに、LaravelのCSSがどういう風にアセットコンパイルされるのかを説明します。
## CSSファイル
HTMLから参照されるCSSファイルは`public/css/app.css`です。作成したばかりのLaravelプロジェクトには [...]
# はじめに
あまりないケースではありますが、一度作成したLaravelプロジェクトの名称を変更する方法を解説します。ここで言うLaravelプロジェクトの名称とは、以下のコマンドの`Sample`のことを指します。
```terminal
$ composer create-project --prefer-dist laravel/laravel Sample
```
# 変更方法
## Laravel 5.9以前
ターミナルで以下のコマンドを実行します [...]
# はじめに
この記事では、以下の方針でアップロードした画像をビューで表示する方法を解説しています。
- 開発環境:ローカル(storage/app/public/)
- 本番環境:Amazon S3
画像のアップロード方法と削除方法については以下の記事を参照してください。
[開発環境と本番環境で画像のアップロード先を分岐する方法 \- AUTOVICE](https://www.autovice.jp/articles/68)
# アップロード画像の [...]
# はじめに
LaravelでAmazon S3へ画像アップロードする処理を実装し、いざアップロードしようとしたところ、以下のエラーが出て失敗しました。
```
Error executing "PutObject" on "https://minna-no-houteishiki.s3.ap-northeast-1.amazonaws.com/r1oJ01mYWVeol0m7jUTji7uef5lyG7MATNOqzl1A.png"; AWS HTTP error: Cl [...]
# はじめに
この記事では、以下の方針で画像のアップロード先を分岐する方法について解説しています。
- 開発環境:ローカル(storage/app/public/)
- 本番環境:Amazon S3
# 事前準備
AWSに未登録の場合は以下を参考にして登録してください。
[AWS アカウント作成の流れ \| AWS](https://aws.amazon.com/jp/register-flow/)
IAM/S3が未作成の場合は以下を参考にして作成してくださ [...]