Rails5.2 + Docker環境にVue.js (Webpacker) を導入する

rails docker vuejs

既存のRails + Docker環境にVue.jsを導入しましたので、その手順をメモしておきます。Rails 5.1からはwebpackerを使用することで、Vue.jsやReactなどのモダンなJSフレームワークを組み込むことができるようになりましたので、そちらを使っていきます。

Dockerfileとdocker-compose.ymlの設定

Rubyコンテナを立ち上げる際に必要となるライブラリ(build-essential, libpq-dev, yarn, Node.js)をインストールします。

Dockerfile

続いてdocker-compose.ymlです。

docker-compose.yml

コンテナの起動

webpackerの導入

Gemfile に以下を追加し、bundle します。

Gemfile

これでrails webpackerコマンドが使えるようになりました。

これで以下のWebPack関連ファイルが生成されました。
・.babelrc (babel設定ファイル)
・.postcssrc.yml (PostCSS設定ファイル)
・app/javascript/packs/application.js (エントリーポイントファイル)
・bin/webpack (webpackのビルドスクリプト)
・bin/webpack-dev-server (ビルドサーバーの起動スクリプト)
・config/webpack/development.js (開発環境設定ファイル)
・config/webpack/environment.js (共通環境設定ファイル)
・config/webpack/production.js (プロダクション環境設定ファイル)
・config/webpack/test.js (テスト環境設定ファイル)
・config/webpacker.yml (webpacker設定ファイル)

Vue.jsの導入

このコマンドでは以下のVue.js関連のファイルが生成されました。
・app/javascript/app.vue (Vueコンポーネントファイル)
・app/javascript/packs/hello_vue.js (エントリーポイントファイル)
・config/webpack/loaders/vue.js (Vue.jsの環境設定ファイル)

Vue.jsファイルのビルド

それでは、Vue.js関連のコンポーネントをJavascriptにコンパイルするため、bin/webpackコマンド実行しビルドします。

ここで「Module build failed: Error: Loading PostCSS Plugin failed: Cannot find module ‘postcss-preset-env’」のエラーが出た場合の対象法はこちら。

viewに次の記述をすると、app/javascript/pack以下にあるhello_vueファイルが呼び出されます!

そして railsを起動して、”Hello Vue”が表示されたら成功です!

webpack-dev-server

ただ、今のままだとVue.js用のJSを変更するたびに、毎回bin/webpackを実行してコンパイルしなければいけません。ですので、JSを変更したらすぐに変更が反映されるように、devサーバーを設定しておきます。
まず、ルートディレクトリにProcfile.devというファイルを以下のように作成します。

Procfile.dev

次に、binディレクトリの下にserverという名前のファイルを以下のように作成します。

bin/server

また、serverではforemanを使うので、Gemfileに追加します。foremanはProcfile を読み込み、複数のプロセスを管理できるツールで、rails serverとwebpack-dev-serverを一度に起動できます。

Gemfile

config/environments/development.rbに以下を追加します。

config/environments/development.rb

それらに合わせてdocker-compose.ymlを修正します。

docker-compose.yml

これでjavascriptの変更が、即座にブラウザに反映されるようになりました!

以上です!

【Vue.js】ディレクティブをいろいろ使ってみる

Vue.jsのディレクティブ(Directive)を学習を兼ねて jsfiddle でいろいろと使ってみました!よろしければ、動作させてみてください!

v-model

インプットデータをバインディングするディレクティブです。入力ボックスのデータをリアルタイムで同期できます。

次はtextareaで複数行入力する場合です。

checkboxの場合です。

SVGのデータバインディング

circleタグにおいて、中心からの半径を定義してる「r」の値を、DOM操作をしています。スライダーを動かすと”radius”の値と同期してcircleが変化します。

v-on

v-onディレクティブでは、DOMイベントを受け取ります。次の例ではクリックイベントでメソッドが呼ばれて、アラートが出ます。
v-on:clickは@clickに省略できます。

v-for, v-if

v-on:changeで _set_animal メソッドを呼んで、一つ目のセレクトに対して、二つ目のセレクトメニューの中身が変わります。v-forでは配列のインデックスを取得して、v-if=”selected_types.length > 0″のところで条件分岐しています。

v-transition

v-transitionディレクティブは、v-ifやv-showと組み合わせて状態を変化させます。vue.jsのトランジションには「enter」と「leave」の2つのフェーズが有り、DOM追加時にv-enter、削除時にv-leaveのトランジションクラスが付与されます。

次の例で使用されているv-enter-activeとv-leave-activeは、トランジション全体となり、追加される時のフェーズはv-enterからv-enter-to、削除される時はv-leaveからv-leave-toのトランジションクラスが付与されます。
同じ要素をvi-ifでグループ化する場合、keyを分ける必要があります。

参考にさせていただいたのはこちらの書籍です。


基礎から学ぶ Vue.js

【Rails5】ページタイトルをヘルパーメソッドで設定する

Ruby on Railsでページタイトルの設定を行う方法です。ページタイトルはブラウザの上にでてくるタブに表示される⬇︎こちらですね。

動作環境

ヘルパーメソッドの作成

次のようにApplicationHelperに全ページ共通のpage_titleヘルパーを作成します。

app/helpers/application_helper.rb

レイアウトファイルのtitleタグを設定したヘルパーメソッドに書き換えます。

app/views/layouts/application.html.erb

これでこのレイアウトを使うビューは同じページタイトルになります。

ページごとにタイトルの値を設定する

ページごとに設定する場合は、それぞれのビューに次のように設定します。

app/views/users/edit.html.erb

次は動的なタイトルの設定をする場合です。

app/views/articles/show.html.erb

これでページタイトルをページごとに設定できたかと思います!

参考までにその他の方法としては、RailsTutorialyieldを使う方法など紹介されていますのでご参考までに。

以上です!ご覧いただきありがとうございました!!

【Atom】閉じタグを自動挿入のパッケージ「autoclose-html」

atom autoclose html demo gif

GitHub製のエディタである「Atom」を使い出したけど、閉じタグを自動で挿入して欲しい。そんな時は、開始タグの>を入力すると閉じタグも入れてくれるパッケージの「autoclose-html」をインストールしましょう!

インストール方法

Atomを開いて、環境設定に進みます。

atom autoclose html settion

左のメニューの「Install」をクリックして、「autoclose-html」を検索 => でてきた該当のパッケージの「Install」ボタンを押せば完了!

atom autoclose html install

セッティング

autoclose-htmlはデフォルトで、ブロック要素の閉じタグは改行、インライン要素はインラインになりますが、それらに限らず指定できます。例えば、pタグはブロック要素だけれども、閉じタグはインラインにしたい場合、セッティングのForce Inlineに追加すれば、OKです。ちなみにデフォルトでは「title, h1, h2, h3, h4, h5, h6」が含まれています。

atom autoclose html foce_inline

その他、セッティングでは閉じタグを付与しない設定などもできるようになっています。

ただ、私の環境では設定後、閉じタグが2重にでてきたりと、不具合がありましたが、Atomを再起動させると不具合はなくなりました。

以上です!
ご覧いただき、ありがとうございました!😊

bin/webpack-dev-serverコマンドで「Cannot destructure property `compile` of ‘undefined’ or ‘null’」となる対処

Rails + Docker + Vue.jsの環境構築を行なっている時に、bin/webpack-dev-serverコマンドを実行すると、「TypeError: Cannot destructure property compile of ‘undefined’ or ‘null’.」とエラーが出たのでその対処です。

実行環境はこちらです

エラー内容

解決方法

こちらのissuesにあがっていました。https://github.com/rails/webpacker/issues/1303
webpack-dev-serverのバージョンをダウングレードすればよいとのことで、yarn upgrade webpack-dev-server@^2.11.1を実行してみました。

再度、行うと…

これで無事、実行できました!!

Rails 5.2 + docker + webpackerでVue.jsの導入時に「Error: Loading PostCSS Plugin failed: Cannot find module ‘postcss-preset-env’」が起きた時の対処

Rails + Docker + Vue.jsの環境構築を行なう際に、JSのコンパイルにbin/webpackを実行するとエラーが出て、手が止まってしまったので、その対処についてです。

環境はこちらです

エラー内容

bin/webpackコマンドを入力すると、「Module build failed: Error: Loading PostCSS Plugin failed: Cannot find module ‘postcss-preset-env’」と出ました。

解決方法

yarn add で postcss-preset-env というプラグインを入れてやれとのことです。ちなみに、Yarnとは Facebook、Google、Exponent、Tildeによって開発されたJavaScriptパッケージマネージャーです。

yarn add
https://yarnpkg.com/en/docs/cli/add
PostCSS Preset Env
https://github.com/csstools/postcss-preset-env

これでコマンドが通るようになりました。

やったね!!😊

Rails5.1.6 を 5.2.0 へアップデートする

Rails5.2の新機能

ざっくりとですが、Rails 5.2の新機能のポイントをまとめてみました。リリースノートはこちら

Active Storage
Active Storageはファイルアップロードの新機能で、Amazon S3、Google Cloud Storage、Microsoft Azure Storage等のクラウドストレージへのアップロードが標準で利用でき、ダイレクトアップロード、ミラーリング機能によって複数のクラウドストレージのあいだでファイルを同期することもできます。

Redis Cache Store
config.cache_store = :redis_cache_storeとすることで、Redisをキャッシュとして使えるようになります。

HTTP/2 Early Hints
Early Hintsは、Webサーバーにリクエストが完了する前にヘッダで必要なJavaScriptやスタイルシート(assets)のURLを伝えることができ、より高速なページの表示を可能にします。

Bootsnap
Railsアプリケーションの起動時間を短縮するライブラリです。ドキュメントによると起動時間が半分程度になるとのことです。

Content Security Policy
Webブラウザに対してどのページからならリソースをダウンロードして良いかを設定することで、セキュリティを管理するHTTPの仕様です。これによってクロスサイトスクリプティング(XSS)といった脆弱性からWebサイトを守ることができます。

Credentials
これまで、複数存在していたRailsアプリケーション内の機密情報(config/secrets.ymlや、SECRET_BASE_KEY)を1つのファイル(config/credentials.yml.enc)内に暗号化して格納できるようになりました。

Railsアップデート

事前にRubyのバージョンを2.5以上にする必要があります。

Gemfile

アップデートコマンドを実行。

上書き確認が表示されます。
以下を参考に、Y で上書き、 n でスキップ、 d で事前の差分確認などで進めてください。

私の場合の、上書き確認されたファイルと新規作成されたファイルなど載せておきます。

gem ‘bootsnap’の追加

config/boot.rbにrequire ‘bootsnap/setup’と追加されたように、Rails 5.2から bootsnap を利用して起動するようになりました。

Gemfile

Active Storageの設定

ここからはActive Storageを導入する場合です。アップデートコマンドでconfig/environmentsにはconfig.active_storage.service = :localと追加されています。

Gemfile

config/application.rb に以下を追加して rails active_storage:install を実行します。

config/application.rb

すると、次のマイグレーションファイルが作られます。見てみると、active_storage_blobsとactive_storage_attachmentsという2つのテーブルが生成されています。Blobはファイル名、ファイルの種類、バイト数、誤り検出符号などのメタデータを保持し、Attachmentは、BlobオブジェクトとActive Recordオブジェクトを紐付けるための中間テーブルです。

これでアップデート完了しました!

【Rails5】Select2で複数選択可能なセレクトボックスを作る

rails multi select2 jquery

jQueryのselect2を導入することで複数選択可能な、セレクトボックスを簡単に実装することができます。また、セレクトボックス内の検索も可能なので、項目が多い場合は便利です。今回はrailsのライブラリとして、gem “select2-rails”がありましたので、導入いたします。

Select2 for rails asset pipeline
https://github.com/argerim/select2-rails

環境はこちらです

select2-railsのインストール

app/assets/javascripts/application.js

app/assets/stylesheets/application.scss

モデルにサンプルデータを定義

本記事のサンプルデータはintegerのprefecture_codeをenumで用意しています。

app/models/user.rb

ビューでセレクトボックスの作成

本記事ではsimple_formを使ってセレクトボックスを作成しています。

app/views/users/_form.html.erb

jqueryは以下の記述だけで検索可能なセレクトボックスができます。

app/assets/javascripts/select2.js

また、multiple: trueを指定することで複数選択可能になります。

app/views/users/_form.html.erb

オプションの設定

オプションはこちらを参考に設定することができます。

app/assets/javascripts/select2.js

ブートストラップ テーマを利用する場合

bootstrapを使用している場合はテーマを使うことができます。

app/assets/stylesheets/application.scss

app/assets/javascripts/select2.js

以上です!ご覧いただき、ありがとうございました!!

【Rails】ログに「Cannot render console from Allowed networks」と出力される対処法

環境

Ruby on Railsの開発環境で、DockerかVagrantを使っていて、”Cannot render console from 172.20.0.1! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255″ 「このIPアドレスではレンダリングできない」と言われたら。

対処方法としては、Webコンソールの設定で172.20.0.1ネットワークをホワイトリストに登録する必要があります。config/environments/development.rbにconfig.web_console.whitelisted_ips = ‘172.20.0.1’を追加します。(IPアドレスは自身のログに書いてあるIPアドレスを記述)

config/environments/development.rb

これで出力されなくなりました!

【Rails】Deviseユーザーをフォローする機能を作成する

rails follow ajax devise

RailsTutorialを参考に、DeviseユーザーでTwitterライクなフォロー機能を作りました。Deviseのルーティングやメソッドなどを使っています。

環境はこちらです

Relationshipモデルの作成

複合キーインデックスは、follower_idとfollowed_idの組み合わせを必ずユニークにし、あるユーザーが同じユーザーを2回以上フォローすることを防いでいます。

UserとRelationshipの関連付け

app/models/relationship.rb

仮想的にUserモデルを2つに分けるためにactive_relationshipsとpassive_relatoinshipsというふうに別名をつけています。following, followersはそれぞれsourceから名前を上書きしています。followingによる関連付けを使ってfollow、unfollow、following?メソッドを作成します。ここではUserは2つとなるのでselfではなくother_userを使います。

app/models/user.rb

ルーティング

本記事ではdevise_scopeでルーティングを設定しましたが、showページの代わりとしてprofileを作っています。そして、フォローユーザー一覧のfollowingと、フォロワー一覧のfollowersを設定します。また、relationshipsリソースを追加して、リレーションシップの作成(create)、削除(destroy)をできるようにします。

config/routes.rb

必要なテンプレートの作成

フォロワーの統計情報を表示するパーシャルの作成です。idのfollowingとfollowersはのちにajaxリクエストに使うものです。

app/views/devise/shared/_stats.html.erb

次の記述では上記の統計情報の表示と、follow/unfollowのボタンを表示させるものですが、ログインしているユーザーのみにとしています。

app/views/devise/registrations/profile.html.erb

次のパーシャルでfollowとunfollowのパーシャルに分岐しています。

app/views/devise/shared/_follow_form.html.erb

followボタンとunfollowボタンとなるパーシャルは、それぞれremote:trueでajaxリクエストします。

app/views/devise/shared/_follow.html.erb

app/views/devise/shared/_unfollow.html.erb

followingアクションとfollowersアクション

次の2つのアクションをshow_followページ一つで読み込むようにしています。

app/controllers/users/registrations_controller.rb

app/views/devise/registrations/show_follow.html.erb

RelationshipsコントローラでAjaxリクエストに対応

app/controllers/relationships_controller.rb

これらのアクションが呼び出すjs.erbファイルを作成します。

app/views/relationships/create.js.erb

app/views/relationships/destroy.js.erb

以上で完成です!最後までご覧いただきありがとうございました!もし、間違っている点などありましたらご指摘いただけると幸いです。

【Rails】gem ‘friendly_id’を使ってユーザーがURLをカスタムできるようにする

friendly_idとは

Github
https://github.com/norman/friendly_id

下の画像のように、通常railsでのルーティングは/users/:idのようなURLとなりますが、:idの部分をユーザーが自身で指定した文字列にできるようにすると、よりフレンドリーなURLになるということで、gem ‘friendly_id’を使って作ってみたいと思います。
rails friendly_id before
こんな感じになります。⬇︎この方がユーザーが自身のページを紹介しやすいですね!
rails friendly_id after
“profile”の部分を除いて、twitterやgithubのアカウントページように、ドメイン直下で localhost:3000/taroyamada とする方法も載せております。

導入する

動作環境はこちらです

既存の:nameカラムを使ったら、そのままURLにできるっていう考えもあると思いますが、私の場合、nameはひらがなや漢字を入れるユーザーも想定しているので、それを英数字のみに制約をつけるっていうものどうかと思ったので、別カラムを作って、URLを変えたいユーザーだけ変えられるようにしてみました。ということで、gemをbundleして、マイグレーションファイルを生成します。

マイグレーション

add_index は検索速度を上げるためにと、 unique => true は一意性を保つために追加いたします。

モデル

対象となるモデルにFriendlyIdを読み込ませ、URLに表示させたい値を指定します。

app/models/user.rb

バリデーションはこのようにしてみましたが参考までに。正規表現は半角英数字と@とハイフンとアンダーバーのみを許可しています。記号のみは不可です。

コントローラー

対象コントローラーのアクション内を以下のように変更します。

app/controllers/users/registrations_controller.rb

ストロングパラメータの設定も忘れずにしておきます。

これで localhost:3000/profile/taroyamada でアクセス可能になりましたし、 従来通り localhost:3000/profile/12 でもアクセスはできます。

ドメイン直下のURL

好みによりますが、ドメイン直下にURLを設定する場合のルーティングです。deviseを使っている筆者の場合のルーティングです。

config/routes.rb

gemを使わない実装方法

gemを使わずにto_paramメソッドを使って、実現する場合は、こちらの記事も参考になるかと思います。
https://remonote.jp/rails-to-param-url-user-name

以上です。ご覧いただきありがとうございました!

【Rails】rails_autolinkとsimple_formatを合わせて使う

Ruby on Railsで次のような記述で文字列を表示させるときに、文字列中のURLにリンクを貼りたい時がありました。

そんな時 gem ‘rails_autolink’を使えばすぐに解決しました。

$ bundle して、次のように記述します。 target: ‘_blank’はお好みで。

けれど、テキストは文字列中に改行してそのまま表示させたいから、simple_formatを使いたい、、、

でもどうしても、両方使いたい、、、これで実現できました!

これで ails_autolink と simple_format を同時に使うことができました!
備忘録ではありますが、誰かの参考になれば幸いです。☺️

【Rails5】Enumを’enum_help’を使ってi18n対応する

Rails 4.1からActiveRecordでenumが扱えるようになったので、Gemを追加することなく、enumが使えるようになっています。enum型あるいは列挙型は、カラムの値が固定値の場合に、値を文字列として扱うことができるので、効率よくデータを格納したり検索できるようになります。今回はinteger型と、boolean型を列挙型にして、enum_helpというGemを利用して多言語対応していきます。さらにsimple_formと合わせることで、viewsを簡素化することができます。

EnumHelp
https://github.com/zmbacker/enum_help
SimpleForm
https://github.com/plataformatec/simple_form

環境はこちらです

準備

必要なgemはこちらです。

$ bundle します。

simple_form を使う場合は次のコマンドでインストールします。

列挙型にする対象のカラムを生成します。

カラムにデフォルト値を入れておきます。

db/migrate/20xxxxxxxxx_add_age_to_users.rb

$ rails db:migrate します。

モデル

integer値とboolean値にそれぞれ、文字列を指定します。age_privateとしているのは、privateのみだと、他のメソッドでも使う可能性があるので、多重定義でエラーにならないためにユニークなメソッド名にしています。名前は重複しないように注意が必要です。

app/models/user.rb

ロケール

localファイルにenums以下を記述します。

config/locales/ja.yml

ビュー

simple_formを使っている場合のviewsはこのようになります。ちなみにinclude_blankはセレクトメニューの先頭に文字を入れることができます。

_form.html.erb

viewsで値を受け取る時は_i18nを付与します。

show.html.erb

コンソールで確認

コンソールで見ると文字列として格納されているのが確認できます。

これで可読性も向上しますし、文字列なので検索しやすくなります。
今回は以上です!ご覧いただき、ありがとうございました!!☺️

【Rails】Deviseでプロフィール用のeditページを作成する

rails devise profile update

Ruby on RailsのDeviseではデフォルトでregistrations#editがありますが、こちらはemailやpasswordをeditするようにして、その他のnameなどはregistrations#profile_editを追加して、別ページでeditするように実装しました。

環境はこちらです

ルーティング

devise_scope に profile_edit と profile_update を追加します。

config/routes.rb

コントローラー

忘れずaccount_update_paramsをセットします。

app/controllers/users/registrations_controller.rb

ビュー

app/views/devise/registrations/my_page.html.erb

app/views/devise/registrations/profile_edit.html.erb

以上です!😊

【CSS】inputのフォーカス時の青い光を消す

実行環境

これのことです!⬇︎ フォームにもれなくついてくる青いヤツ!消したくても原因はborderでもないしshadowでもないし、一体何者なんだとずっと思っていました!

rails bootstrap input focus css

正体ははoutlineでした!以下の通りに指定すると青い光は消えて、borderをくっきり上書きすることができました。
outlineのリファレンスはこちらです。
http://www.htmq.com/style/outline.shtml

rails bootstrap input focus css

また、事前にbackground-colorを少し暗くしておくことで、フォーカスした時にinputフィールドが明るくなった感じがしますね!

また、上記のデモでは適用していませんが、フォーカス時のplaceholderのcolorを変える場合はこちらです。

この青いヤツから解放された時は、すがすがしい開放感に浸れました!
以上です。ご覧いただき、ありがとうございました😁

【Rails】Bootstrap + FontAwesome でモーダルウィンドウを作る

rails modale bootstrap font-awesome

Railsでは link_to メソッドの引数に data: {confirm: ‘メッセージ’ } と指定するだけで、簡単に確認ダイアログを表示する仕組みが用意されていますが、さらにbootstrapのdata-confirm modalを使うことで使い勝手の良いモーダルウィンドウを作ることができます。
背景のオーバーレイをクリックすると、モーダルウィンドウを閉じれるのもうれしいです。あとは好みによりますが、本記事ではfont-awesomeも設置しています。

Data-Confirm Modal
https://github.com/ifad/data-confirm-modal
FontAwesome
https://fontawesome.com/

環境はこちらです

準備

必要なgemはこちらです。bootstrap3を使っていますが、bootstrap4でも大丈夫です。

Gemfile

app/assets/javascripts/application.js

app/assets/stylesheets/application.css.scss

Views

viewはこのままでも、モーダルウィンドウは適用されています。

オプションの設定

あとはドキュメントにもあるようにオプションを設定していきます。本記事ではfont-awesomeも設置して、スタイルシートで調整しています。

スタイルシート

今回追加したスタイルシートを載せておきます。シンプルにするためにtitle部分をdisplay:noneにしています。

以上です!参考になれば幸いです!ご覧いただきありがとうございました!!😊

【Rails5】アップロードした画像を即時プレビューする

rails upload preview jquery

Deviseのregistrations#editで画像をアップロードするの続きです。前回、carrierwaveを使ってUserのavatar画像をアップロードしました。今回はこのアップロードの際に、すぐにプレビューできるようにjQueryを追加しました。rails5ではturbolinksの挙動が変わったので$(document).on ‘turbolinks:load’としないとイベントが発火しないので注意が必要です。

元のフォーム

前回からのフォームです。current_userはサインインしているユーザーを取得するdeviseのヘルパーメソッドです。avatar_cacheはバリデーション時などに画像を保持するためで、remove_avatarは画像を削除する時のためのパラメーターです。既存の画像がない場合はno_avatar.pngという画像をあてています。

app/views/devise/registrations/edit.html.erb

フォームを修正する

次に必要な記述を追加していきます。avatar_img_prevでプレビューを表示します。通常はhiddenです。avatar_present_imgは現在の画像です。post_imgがイベントが発火のフックになります。

app/views/devise/registrations/edit.html.erb

jQuery

Rails5ではここでTurbolinksをロードしてからのイベントです。ファイル選択をフックに、#avatar_img_prevのhiddenと.avatar_present_imgを取り除いてデータ取得を実行しています。
読み込みが完了したらFileReader.onloadイベントが発火して、readAsDataURLでファイルを読み込んでいます。

以上です!ご覧いただきありがとうございました!!☺️もっと良い方法があれば教えていただけると幸いです!

【Rails5】Deviseのregistrations#editで画像をアップロードする

rails avatar upload devise

Deviseのインストールが済んでいて、registrations#editでユーザーの画像をアップロードしたいという時の流れです。アップローダーのライブラリはcarrierwaveを使っています。

環境はこちらです

準備

必要なgemはこちらです。

Gemfile

$ bundle install します。

DeviseはUserモデルだとして、そこにavatarカラムを追加します。

$ rails db:migrat します。

アップローダー

avatarのアップローダーを生成します。

アップローダーの内容は適宜変更してください。

app/uploaders/avatar_uploader.rb

モデルとアップローダーを紐づける

使用するモデルに次の一行を追記して、モデルとの紐づけをおこないます。

app/models/user.rb

ストロングパラメーターの追加

account_update_paramsにavatar, avatar_cache, remove_avatarを追加します。avatar_cacheはバリデーション時などに画像を保持するためで、remove_avatarは画像を削除する時のためのパラメーターです。

app/controllers/users/registrations_controller.rb

Views

user/registrations#editへのリンクを貼っておきます。

‘current_user’はサインインしているユーザーを取得するdeviseのヘルパーメソッドです。既存の画像がない場合は’no_avatar.png’という画像をあてています。

app/views/devise/registrations/edit.html.erb

CSS

アバター画像を正円にするために’border-radius’を50%にしています。画像の縦横比を保ちつつ中央にトリミングする方法は色々あるかと思いますが、’object-fit’プロパティーを使えば一行で済みます。

リダイレクト先

Deviseのアカウント情報を更新した後のリダイレクト先はデフォルトではroot_pathになっているかと思いますが、指定するには after_update_path_forを使います。

app/controllers/users/registrations_controller.rb

今回は以上です!続編では、アップロードした画像をすぐにプレビューできるようにjQueryを追加したいと思います!😊
アップロードした画像を即時プレビューする

【Rails】Flashメッセージに「閉じるボタン」をつける

Flashメッセージはブラウザをリロードすれば消えますが、メッセージ横に×ボタンを設置してクリックしたらcloseできるようにしました。
アラートはBootstrap3のalert-infoとalert-dangerを使用して、若干cssを追加しています。

rails alert info

rails alert danger

レイアウトにアラートを設置する

レイアウト毎に共通して同じアラートを使う場合ですが、レイアウトのヘッダーの下部にアラートのパーシャルを読み込むようにしました。

app/views/layouts/application.html.erb

テンプレートの方は次の通りです。noticeかalertかで分岐しています。×ボタンはHTML-特殊文字を使用しています。

app/views/layouts/_alert.html.erb

スタイルシート

一応、今回加えたcssも載せておきます。

簡単ですが以上です!ご覧いただきありがとうございました!!😀

【Rails5】Devise-i18nで日本語化する

Deviseの日本語化の手順をまとめました。

デフォルトのロケールを設定

デフォルトのlocaleは暗黙的に:enになっているかと思いますので、”config.i18n.default_locale = :ja”を以下のあたりに記述します。

config/application.rb

必要なgemを記載

Gemfile

“$ bundle install”します。

Deviseの日本語化

次のコマンドで日本語翻訳ファイルを生成します。

生成されたファイルにエラーメッセージを追加しています。和訳の内容は適宜変更してください!

config/locales/devise.views.ja.yml

あとは”$ rails s” でアプリを再起動して、完了です!!
ご覧いただき、ありがとうございました!😃