JavaScriptなどプログラミングに関する投稿をしています。コメントを残す開発環境でアプリケーションを動作させるときなど、ある程度まとまったデータがデータベースにあると便利です。そこで簡単に多種多様なダミーデータをデータベースに投入できるgemライブラリの”faker”がありますので、その基本的な使い方の紹介です。fakerは日本語対応もできますが、ふりがな(及びフリガナ)には対応していないので、その場合は同様のライブラリのgimeiで対応可能です。しますメソッドの確認こちらから使用したいメソッドを確認できます。数回入力してみると、ランダムにダミーデータを取得できました。"Pistachio"seeds.rbの編集それではseeds.rbを編集して、ダミーデータをUserテーブルに投入します。integerやboolean対応のダミーデータもありますので使用してみます。コマンドを実行すると、データが投入されます。db:seedviewで確認すると次の通りになりました。以上です!!日本語のふりがな(及びフリガナ)に対応した、同様のライブラリ”gimei”の記事はこちらです。Railsでdb/seeds.rbに初期データを投入する際に、画像ファイルも入れたい時のやり方です。CarrierWaveを使っていて、アップローダーと該当のモデルが紐付いていれば、簡単にできます。画像を配置するディレクトリはdb/fixtures配下としてみました。seeds.rb書き方は画像ファイルのパスをopenしてそれを渡せばOKです。1件づつ画像データを入れる場合です。open("#{Rails.root}/db/fixtures/img3.jpg"))次は、1度で複数のデータを投入する場合です。1.upto(5)として1から5までの番号を振ります。genarateコマンドはとても便利ですが、不要なファイルまで生成される場合がありますので、config/application.rbのconfig.generatorsで生成されるファイルを設定しておきましょう!、という記事です。controllerをした場合の結果です。コントローラ名はeventsで、アクションにshowとしてみます。app/assets/stylesheets/events.scssすると、丁寧にコントローラやアクションに加えて、ルートや、ビューファイルなどを生成してくれてありがたいのですが、HelperやJSやCSSファイルはいらないかな、、あとで削除しちゃうだろうなって思ってしまいます。generateコマンドで生成されるファイル一覧ちなみに、デフォルトでgenerateコマンド実行時に生成されるファイルの一覧は以下の通りです。コマンドコントローラビューモデルマイグレーションアセットルートテストヘルパーscaffoldscaffold_controllercontrollermodelmigrationconfig.generatorsの設定そこで、config.generatorsで生成されるファイルを設定します。fixtureはfactory_botで設定しています。falseでOKです。Docker環境にVue.jsを導入しましたので、その手順をメモしておきます。5.1からはwebpackerを使用することで、Vue.jsやReactなどのモダンなJSフレームワークを組み込むことができるようになりましたので、そちらを使っていきます。Node.js)をインストールします。$APP_HOME続いてdocker-compose.ymlです。webpackerコマンドが使えるようになりました。webpacker:installこれで以下のWebPack関連ファイルが生成されました。webpacker:install:vueこのコマンドでは以下の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コマンド実行しビルドします。‘postcss-preset-env’」のエラーが出た場合の対象法はこちら。upwebpack-dev-serverただ、今のままだとVue.js用のJSを変更するたびに、毎回bin/webpackを実行してコンパイルしなければいけません。JSを変更したらすぐに変更が反映されるように、devサーバーを設定しておきます。ルートディレクトリにProcfile.devというファイルを以下のように作成します。./bin/webpack-dev-server次に、binディレクトリの下にserverという名前のファイルを以下のように作成します。Procfile.devまた、serverではforemanを使うので、Gemfileに追加します。serverとwebpack-dev-serverを一度に起動できます。'foreman'endconfig/environments/development.rbに以下を追加します。"http://localhost:8080"それらに合わせてdocker-compose.ymlを修正します。Railsでページタイトルの設定を行う方法です。ページタイトルはブラウザの上にでてくるタブに表示される⬇︎こちらですね。次のようにApplicationHelperに全ページ共通のpage_titleヘルパーを作成します。@page_titletitleendendレイアウトファイルのtitleタグを設定したヘルパーメソッドに書き換えます。%></body></html>これでこのレイアウトを使うビューは同じページタイトルになります。ページごとにタイトルの値を設定するページごとに設定する場合は、それぞれのビューに次のように設定します。%>次は動的なタイトルの設定をする場合です。%>これでページタイトルをページごとに設定できたかと思います!参考までにその他の方法としては、RailsTutorialでyieldを使う方法など紹介されていますのでご参考までに。‘null’.」とエラーが出たのでその対処です。bootstrap_node.js:612:3解決方法こちらのissuesにあがっていました。webpack-dev-server@^2.11.1を実行してみました。Vue.jsの環境構築を行なう際に、JSのコンパイルにbin/webpackを実行するとエラーが出て、手が止まってしまったので、その対処についてです。‘postcss-preset-env’」と出ました。いうプラグインを入れてやれとのことです。Facebook、Google、Exponent、Tildeによって開発されたJavaScriptパッケージマネージャーです。postcss-preset-envこれでコマンドが通るようになりました。5.2の新機能のポイントをまとめてみました。Storage等のクラウドストレージへのアップロードが標準で利用でき、ダイレクトアップロード、ミラーリング機能によって複数のクラウドストレージのあいだでファイルを同期することもできます。:redis_cache_storeとすることで、Redisをキャッシュとして使えるようになります。Hintsは、Webサーバーにリクエストが完了する前にヘッダで必要なJavaScriptやスタイルシート(assets)のURLを伝えることができ、より高速なページの表示を可能にします。BootsnapRailsアプリケーションの起動時間を短縮するライブラリです。ドキュメントによると起動時間が半分程度になるとのことです。PolicyWebブラウザに対してどのページからならリソースをダウンロードして良いかを設定することで、セキュリティを管理するHTTPの仕様です。これによってクロスサイトスクリプティング(XSS)といった脆弱性からWebサイトを守ることができます。Credentialsこれまで、複数存在していたRailsアプリケーション内の機密情報(config/secrets.ymlや、SECRET_BASE_KEY)を1つのファイル(config/credentials.yml.enc)内に暗号化して格納できるようになりました。Railsアップデート事前にRubyのバージョンを2.5以上にする必要があります。vendor/bundleアップデートコマンドを実行。app:update上書き確認が表示されます。事前の差分確認などで進めてください。help私の場合の、上書き確認されたファイルと新規作成されたファイルなど載せておきます。利用して起動するようになりました。Storageを導入する場合です。:localと追加されています。active_storage:installすると、次のマイグレーションファイルが作られます。見てみると、active_storage_blobsとactive_storage_attachmentsという2つのテーブルが生成されています。Recordオブジェクトを紐付けるための中間テーブルです。UI/UXjQueryのselect2を導入することで複数選択可能な、セレクトボックスを簡単に実装することができます。セレクトボックス内の検索も可能なので、項目が多い場合は便利です。“select2-rails”がありましたので、導入いたします。本記事のサンプルデータはintegerのprefecture_codeをenumで用意しています。本記事ではsimple_formを使ってセレクトボックスを作成しています。%>jqueryは以下の記述だけで検索可能なセレクトボックスができます。trueを指定することで複数選択可能になります。%>オプションの設定オプションはこちらを参考に設定することができます。テーマを利用する場合bootstrapを使用している場合はテーマを使うことができます。「このIPアドレスではレンダリングできない」と言われたら。127.0.0.0/127.255.255.255対処方法としては、Webコンソールの設定で172.20.0.1ネットワークをホワイトリストに登録する必要があります。‘172.20.0.1’を追加します。コメントを残すRailsTutorialを参考に、DeviseユーザーでTwitterライクなフォロー機能を作りました。Deviseのルーティングやメソッドなどを使っています。trueendend複合キーインデックスは、follower_idとfollowed_idの組み合わせを必ずユニークにし、あるユーザーが同じユーザーを2回以上フォローすることを防いでいます。trueend仮想的にUserモデルを2つに分けるためにactive_relationshipsとpassive_relatoinshipsというふうに別名をつけています。followersはそれぞれsourceから名前を上書きしています。followingによる関連付けを使ってfollow、unfollow、following?メソッドを作成します。ここではUserは2つとなるのでselfではなくother_userを使います。following?(other_user)following.include?(other_user)endendルーティング本記事ではdevise_scopeでルーティングを設定しましたが、showページの代わりとしてprofileを作っています。フォローユーザー一覧のfollowingと、フォロワー一覧のfollowersを設定します。relationshipsリソースを追加して、リレーションシップの作成(create)、削除(destroy)をできるようにします。:destroy]end必要なテンプレートの作成フォロワーの統計情報を表示するパーシャルの作成です。idのfollowingとfollowersはのちにajaxリクエストに使うものです。%></strong></a></div>次の記述では上記の統計情報の表示と、follow/unfollowのボタンを表示させるものですが、ログインしているユーザーのみにとしています。%></section>次のパーシャルでfollowとunfollowのパーシャルに分岐しています。%>followボタンとunfollowボタンとなるパーシャルは、それぞれremote:trueでajaxリクエストします。%>followingアクションとfollowersアクション次の2つのアクションをshow_followページ一つで読み込むようにしています。}format.jsendendendこれらのアクションが呼び出すjs.erbファイルを作成します。%>');以上で完成です!最後までご覧いただきありがとうございました!もし、間違っている点などありましたらご指摘いただけると幸いです。‘friendly_id’を使って作ってみたいと思います。こんな感じになります。する方法も載せております。5.2.4既存の:nameカラムを使ったら、そのままURLにできるっていう考えもあると思いますが、私の場合、nameはひらがなや漢字を入れるユーザーも想定しているので、それを英数字のみに制約をつけるっていうものどうかと思ったので、別カラムを作って、URLを変えたいユーザーだけ変えられるようにしてみました。いうことで、gemをbundleして、マイグレーションファイルを生成します。一意性を保つために追加いたします。db:migrateモデル対象となるモデルにFriendlyIdを読み込ませ、URLに表示させたい値を指定します。:friendly_urlendバリデーションはこのようにしてみましたが参考までに。正規表現は半角英数字と@とハイフンとアンダーバーのみを許可しています。対象コントローラーのアクション内を以下のように変更します。#こちらに変更ストロングパラメータの設定も忘れずにしておきます。ドメイン直下のURL好みによりますが、ドメイン直下にURLを設定する場合のルーティングです。deviseを使っている筆者の場合のルーティングです。'profile'endgemを使わない実装方法gemを使わずにto_paramメソッドを使って、実現する場合は、こちらの記事も参考になるかと思います。https://remonote.jp/rails-to-param-url-user-name以上です。Railsで次のような記述で文字列を表示させるときに、文字列中のURLにリンクを貼りたい時がありました。‘rails_autolink’を使えばすぐに解決しました。次のように記述します。‘_blank’はお好みで。同時に使うことができました!備忘録ではありますが、誰かの参考になれば幸いです。4.1からActiveRecordでenumが扱えるようになったので、Gemを追加することなく、enumが使えるようになっています。enum型あるいは列挙型は、カラムの値が固定値の場合に、値を文字列として扱うことができるので、効率よくデータを格納したり検索できるようになります。今回はinteger型と、boolean型を列挙型にして、enum_helpというGemを利用して多言語対応していきます。simple_formと合わせることで、viewsを簡素化することができます。必要なgemはこちらです。使う場合は次のコマンドでインストールします。simple_form:install列挙型にする対象のカラムを生成します。age:integerカラムにデフォルト値を入れておきます。モデルinteger値とboolean値にそれぞれ、文字列を指定します。age_privateとしているのは、privateのみだと、他のメソッドでも使う可能性があるので、多重定義でエラーにならないためにユニークなメソッド名にしています。名前は重複しないように注意が必要です。}endロケールlocalファイルにenums以下を記述します。受け取らないビューsimple_formを使っている場合のviewsはこのようになります。ちなみにinclude_blankはセレクトメニューの先頭に文字を入れることができます。%>viewsで値を受け取る時は_i18nを付与します。%>コンソールで確認コンソールで見ると文字列として格納されているのが確認できます。"not_receive"これで可読性も向上しますし、文字列なので検索しやすくなります。RailsのDeviseではデフォルトでregistrations#editがありますが、こちらはemailやpasswordをeditするようにして、その他のnameなどはregistrations#profile_editを追加して、別ページでeditするように実装しました。忘れずaccount_update_paramsをセットします。フォームにもれなくついてくる青いヤツ!消したくても原因はborderでもないしshadowでもないし、一体何者なんだとずっと思っていました!正体ははoutlineでした!以下の通りに指定すると青い光は消えて、borderをくっきり上書きすることができました。outlineのリファレンスはこちらです。#ffffff;}また、事前にbackground-colorを少し暗くしておくことで、フォーカスした時にinputフィールドが明るくなった感じがしますね!また、上記のデモでは適用していませんが、フォーカス時のplaceholderのcolorを変える場合はこちらです。#c5c5c5;}この青いヤツから解放された時は、すがすがしい開放感に浸れました!以上です。modalを使うことで使い勝手の良いモーダルウィンドウを作ることができます。背景のオーバーレイをクリックすると、モーダルウィンドウを閉じれるのもうれしいです。あとは好みによりますが、本記事ではfont-awesomeも設置しています。必要なgemはこちらです。bootstrap3を使っていますが、bootstrap4でも大丈夫です。"bootstrap";Viewsviewはこのままでも、モーダルウィンドウは適用されています。%>オプションの設定あとはドキュメントにもあるようにオプションを設定していきます。本記事ではfont-awesomeも設置して、スタイルシートで調整しています。%>スタイルシート今回追加したスタイルシートを載せておきます。シンプルにするためにtitle部分をdisplay:noneにしています。コメントを残すDeviseのregistrations#editで画像をアップロードするの続きです。前回、carrierwaveを使ってUserのavatar画像をアップロードしました。今回はこのアップロードの際に、すぐにプレビューできるようにjQueryを追加しました。‘turbolinks:load’としないとイベントが発火しないので注意が必要です。元のフォーム前回からのフォームです。current_userはサインインしているユーザーを取得するdeviseのヘルパーメソッドです。avatar_cacheはバリデーション時などに画像を保持するためで、remove_avatarは画像を削除する時のためのパラメーターです。既存の画像がない場合はno_avatar.pngという画像をあてています。%></div>フォームを修正する次に必要な記述を追加していきます。avatar_img_prevでプレビューを表示します。通常はhiddenです。avatar_present_imgは現在の画像です。post_imgがイベントが発火のフックになります。--></div>jQueryRails5ではここでTurbolinksをロードしてからのイベントです。ファイル選択をフックに、#avatar_img_prevのhiddenと.avatar_present_imgを取り除いてデータ取得を実行しています。読み込みが完了したらFileReader.onloadイベントが発火して、readAsDataURLでファイルを読み込んでいます。コメントを残すDeviseのインストールが済んでいて、registrations#editでユーザーの画像をアップロードしたいという時の流れです。アップローダーのライブラリはcarrierwaveを使っています。必要なgemはこちらです。DeviseはUserモデルだとして、そこにavatarカラムを追加します。アップローダーavatarのアップローダーを生成します。Avatarアップローダーの内容は適宜変更してください。SecureRandom.uuid)endendモデルとアップローダーを紐づける使用するモデルに次の一行を追記して、モデルとの紐づけをおこないます。remove_avatarを追加します。avatar_cacheはバリデーション時などに画像を保持するためで、remove_avatarは画像を削除する時のためのパラメーターです。:remove_avatar])endViewsuser/registrations#editへのリンクを貼っておきます。%>‘current_user’はサインインしているユーザーを取得するdeviseのヘルパーメソッドです。既存の画像がない場合は’no_avatar.png’という画像をあてています。%></div>CSSアバター画像を正円にするために’border-radius’を50%にしています。画像の縦横比を保ちつつ中央にトリミングする方法は色々あるかと思いますが、’object-fit’プロパティーを使えば一行で済みます。after_update_path_forを使います。