はじめに
今回は、前回に引き続きRubyでアプリケーション開発する流れを確認していきたいと思います。
メッセージングアプリの作成を通して、基本的な機能を構築していきます。
前回まででパッケージのインストール等環境構築を実施しました。
本記事では、アセットパイプラインの仕様に従って、アプリケーション内で使用する画像を配置するところをサクッと進めていきます。
流れ
以下のような流れで実施していきます。
後半の機能実装については、順次検討して進めていきます。
まずは、どんなWebアプリケーションにもある基本的な機能の実装から進めていきます。
- 環境構築
- パッケージのインストール
- Homebrew
- rbenv
- ruby
- bundler
- yarn
- rails
- PostgreSQL
- プロジェクトの作成
- Railsアプリケーションの作成
- データベースの作成
- サーバー起動と稼働確認
- アセットパイプラインと画像の配置[⭐️本記事の内容]
- 画像を取得
- 画像を指定のディレクトリに保存
- 設定ファイルを更新
- パッケージのインストール
- トップページの作成
- 認証機能の実装
- etc…
画像を取得
これから作成していくページで使用する画像を取得していきます。
CanvaやAdobe系のソフトで作成してもよいですが、今回は著作権フリーの画像をしようしていきたいと思います。
以下のサイトから使用させていただきました。
以下のサイトなどもおすすめです。
Free to Use Clip Art Images & Vector Illustrations | ManyPixels
商用可・フリーイラスト素材|ソコスト (soco-st.com)
メッセージングアプリなので、以下の2種類の画像を取得します。
- 人物アイコンに使用する画像
- トップページに使用できそうな画像
好みのものをダウンロードしておきましょう。
画像を指定のディレクトリに保存
ダウンロードした以下の画像はそれぞれ任意の画像参照ソフトでサイズ変更して合計3枚分用意しておきます。
- 人物アイコンに使用する画像
- 128×128
- 520×520
- トップページに使用できそうな画像
- 2400×1600
用意できたら以下のパスに保存しておきます。
/yourproject/app/assets/images/
アセットパイプラインとは?Rails6における画像配置の考え方
アセットパイプラインは以下ドキュメントに記載の通り、画像ファイルの読み込みを高速化するために、アセットを連結してリクエスト回数を減らす機能です。
アセットパイプラインの第一の機能はアセットを連結することです。これにより、ブラウザがWebページをレンダリングするためのリクエスト数を減らすことができます。Webブラウザが同時に処理できるリクエスト数には限りがあるため、同時リクエスト数を減らすことができればその分読み込みが高速になります。
https://railsguides.jp/v6.0/asset_pipeline.html#主要な機能
これに伴い、前述のパスに画像ファイルを保存することとなります。
以下の章が参考になります。
https://railsguides.jp/v6.0/asset_pipeline.html#アセットパイプラインの使用方法
rails6から上記のパスにwebアプリケーションで使用する画像を保存することができるようになっています。ただし、従来のpublicやjavascriptにも保存しても問題ないです。用途に応じて配置場所を検討しつつ進めていきます。
以前のRailsでは、すべてのアセットは
public
ディレクトリの下のimages
、javascripts
、stylesheets
などのサブフォルダに置かれました。アセットパイプライン導入後は、app/assets
ディレクトリがアセットの置き場所として推奨されています。このディレクトリに置かれたファイルはSprocketsミドルウェアによってサポートされます。アセットは引き続き
public
ディレクトリ以下に置くことも可能です。
設定ファイルを更新
画像ファイルの参照設定を行っている/yourproject/config/webpacker.yml
を以下選択箇所のように修正します。
💡 本記事では、webpacker標準搭載のRails6を使用しています。Rails7ではwebpackerの開発は終了しており実質的に非推奨である点に注意してください。
移行方法はhttps://railsguides.jp/webpacker.html#参考資料(日本語)
まとめ
今回は短いですが、画像配置についてサクッと進めてみました。引き続き頑張ります!
コメント