はじめに Webサイトのデザインを彩るひとつの要素にフォントの種類があります。Google Fontsの登場により、様々なフォントが手軽に導入できるようになりました。しかし、世の中にはGoogle Fontsが提供するフォント以外にもたくさんのフリーフォントが存在します。 本記事では、ダウンロードしたフリーフォ ...

事象 昔作ったRailsアプリを久しぶりに修正しデプロイしようとしたところ、以下のエラーが出力されました。 ```bash 実行コマンド Running $HOME/.rbenv/bin/rbenv exec bundle exec rake assets:precompile エラー内容 error @rai ...

はじめに Rails 6からWebpackerが正式採用されました。Rails 5ではオプションで追加することができたWebpackerですが、Rails 6からは普通にアプリを作成するだけでWebpackerがインストールされ、必要な設定もすべて行われるのですぐにWebpackerを使い始められるようになりま ...

はじめに webpacker-dev-server実行中に、突然以下のエラーが出力されました。 [hardsource:3154a74b] Could not freeze ./app/webpack/packs/application.js: Cannot read property 'hash' of u ...

はじめに Rails6で標準導入されたWebpacker管理下の構成を整えたので記事にします。Webpackerで管理対象としているのは以下の3つです。 JavaScript CSS 画像 あくまで自分なりにわかりやすい構成に整えたという話ですので、ベストプラクティスを提案するとか言った大それたものではないこと ...

はじめに Rails6から標準導入されたWebpackerで画像を管理し、その中のアイコン画像をFavicon（タブやお気に入りに表示されるアイコン）に設定する方法を解説します。 Favicon設定方法 画像の用意 まずはFaviconに設定する画像を用意します。今回はフリーで使用できるアイコンを使うことにしま ...

はじめに Rails6から標準導入されたWebpackerは、JavaScriptやCSSだけでなく画像ファイルの管理も行えます。 今回はWebpackerで画像ファイルを管理し、CSSやビューから参照する方法を解説します。 画像ファイルの配置場所 Webpackerで画像ファイルを管理するには、Webpack ...

はじめに Rails6から標準導入されたWebpacker（Webpack for Rails）でCSSを管理しているRailsアプリのCSSが、ローカル開発環境では反映されていたのに、デプロイ先のHerokuでは反映されないという事象がありました。 対処 app/views/layouts/applicati ...

はじめに 本記事では、Rails 6.0から導入された「Webpacker」を使ってjQueryとBootstrapを管理する方法を説明します。 WebpackerでjQueryとBootstrapを管理 Railsアプリの作成 以下のコマンドを実行して、新しいRailsアプリを作成します。コマンド引数に_6. ...