サインイン | 登録

Ruby on Rails

Railsアプリケーションでのjquery-ujsからrails-ujsへの移行の仕方

by Makio

Ruby on Rail 5.1.0よりrails-ujsはRails本体に取り込まれました。    Unobstructed JavaScriptを提供するライブラリーとしてのjquery-ujsの役割はrails-ujsと重複です。また、Ruby on Rail 5.1.0からjqueryへの依存関係もなくなりました。         なので今後のメインテナンス、拡張性を考えてjquery-ujsからrails-ujsへ移行することにしました。    この記事では、移行の仕方を経験を踏まえて紹介します。        移行するまえに必要なこと   様々なシナリオをチェックするインテグレーションテストがあること ユニットテスト 他のGemをアップデート      １．application.jsでjquery-ujs を rails-ujsに変更         ２．jQueryそのものを使い続けるかどうか決める   123ishでは当分の間jQueryは使い続けることにしました。というのも、使っているGeｍでjQueryに依存しているものもあり、今の時点では継続することにしまいした。ただ将来的には、jQueryを使うことはなくなるかも知れません。         ３．インテグレーションテストをアップデート  色々とテストそのものをアップデートする必要もあります。   trigger() とネイティブなJavascriptである click()に変更 原因不明ながらCapybaraのclick_linkがBootstrapのモデルで使えなくなったので、不本意ながらexecute_scriptを使う。 セレクタ−としてidを使うことを徹底する。例えばclick_link("element-id")のようにidベースでコンポーネントを選んだほうが安定する        ４．Sprocket からWebpackerへ移行している場合    require("@rails/ujs").start() を app/javascript/packs/application.js 先頭に入れる。これはCSRF セキュリティーエラーを起こさないために非常に重要です。          最後に  jquery-ujs から rails-ujsへの移行は比較的スムーズに行なえます。    とはいえ、この移行も影響が色々とあるので、インテ
スコア: 1.32

Railsサイトで、friendly_id gemを使って日本語のフレンドリーURLを表示させる方法

by Makio

URLに関連するキーワードを入れることは、有効なSEO手段として使われているます。        ここではRuby on Rails にて、friendly_id gemを使った、日本語でのURLを表示する方法を紹介します。Railsのデフォルトでは、IDによってモデルが表示されています。たとえば、Entryというモデルがあるとすると、  /entries/12345  のようなURLでEntryが表示されます。このEntryにtitleという属性があれば、Friendly_id を導入によって、このtitleを使ってEntryを表示させることが出来ます。例えば、  /entries/日本語でもOK    この123ishのサイトでもFriendly_id を導入しています。例えば、   https://www.123ish.com/jp/entries/1461-ヴァイオリンやヴィオラの試奏（試し弾き）で気をつけておきたい3つのポイント https://www.123ish.com/jp/entries/1316-イヤフォン越しではなく、日常に溢れる音を楽しもう！   などです。friendly_idをそのまま導入しても、日本語でのURLは表示されません。  def normalize_friendly_id(value)def should_generate_new_friendly_id?def create_slug        のファンクションをオーバーライドします。ここでフレンドリーURLとして　id-name　の形式を使います。また、特殊文字は　”-”　へ変換します。  日本語でのフレンドリーURL導入方法  ステップ１  # /Gemfile:gem 'friendly_id'        migrationファイルの作成      migrationの実行  > rails db:migrate      ステップ２　モデル、コントローラーファイルのコード          set_slug_with_idを定義して、after_commit で呼び出し、IDを使ったFriendly URLがEntryと同時に作成されます。  これ以降は普通に
スコア: 1.21

Ruby on RailsでAMPページを作る方法

by Makio

     Accelerated Mobile Page (AMP)はGoogleが主導する、モバイルサイトを構築するフレームワークです。123ishでは、導入後に検索経由でのユーザー数を有意に増やすことが出来ました。  AMPページと普通のモバイルページでは、コア指標であるLargest Contentful Paint (LCP)で圧倒的に差が出ます。  グーグルサーチコンソールの「拡張」欄に⚡マークのAMPもあります。  この「拡張」は英語だとEnhancementsで、強化、増強、向上の意味で使われていると思います。サイトSEOの強化、増強、向上に繋がる主要素だということですね。    でも、AMP導入は簡単ではありません。カスタムのjavascirptsが使えないしCSSは75kbまでと色々と制約があります。  123ishでは最初にrails_ampジャムを試しましたが、全く使えませんでした（このジャムは2017年から開発が止まっていますね・・・）。   ワードプレスでもプラグインを入れるだけではAMPページを上手く作れないあたり事情は似てると思います。  今回は、Railsの既存のモバイルページを、ジャムなど使わずにルールに従ってAMP化した方法を紹介します。      カスタムの MIMEタイプの指定  たった一行のコードですが、config/initializers/mime_types.rbにカスタムMIMEタイプを指定します。      ampをtext/htmlに対するカスタムフォーマットとして登録しています。これにより、ampの拡張子がつくページをコントローラで扱うことが出来るようになります。      コントローラーをampフォーマットに対応できるようにする  AMP化したいページのコントローラーが対応できるようにします。123ishのサイトだと記事の表示を行うページのコントローラーです。       format.amp はユーザーが.ampのページに訪れた時に作成するページを定義します。 render amp/samples/show.amp　で　app/views/amp/samples/show.amp.erb　をレンダリングすることを指示します。 layout: 'amp/layouts/application'…
スコア: 1.07

Ruby on Rails でDevise、ActiveModel::Otp、rqrcodeとグーグル認証システムによる二段階認証の実装の仕方

by Makio

ID、パスワードによるサインインだけでは非常に脆弱で、今はTwitter、Facebook等のSNS、グーグル、アマゾン、マイクロソフトのアカウントなどが二段階認証を取り入れれいます。  この記事ではRuby on Railsで作られたサイトに、Devise、ActiveModel::Otp 、rqrcode及びグーグル認証システムによって二段階認証を実装する仕方を、段階を追って解説します。  ユーザーにとって、グーグル認証システムはアンドロイドでもアイフォーンで利用可能ですし、テキストで携帯に送られるOTPによる二段階認証よりも実装しやすいと思います。      devise、active_model_opt、rqrcode gemをインストール  まずは必要なgemを追加します。          users_controller.rbのアップデート  ここでは devise gemによって作成されるusers_controller.rbに2つの機能を追加します。   二段階認証を有効化するページの対応。有効化ページにはrqrcode gemによって作られたQRコードを表示します。このQRコードをグーグル認証システムで読むことになります。def activate_2faがその実装です ユーザーが二段階認証コード、つまりワンタイムパスワード（OTP)を送った時に、有効化のプロセスの対応。def activate_2fa_updateがその実装         二段階認証有効化ページ       users_controller.rbにあるdef activate_2fa によって作られるQRコードを表示するためのページです。ユーザーが、このQRコードをグーグル認証システムで読み込んでワンタイムパスワード（OTP)を得られます。   html_safe on @svg
スコア: 1.06

Ruby on Railsのコードに潜むN+1クエリ問題をBullet gem で発見して、Railサイトのレスポンスを最適化

by Makio

サイトを運営していると、レスポンスを早くするにはどうすればいいかと常に考えますね。  サーバーの性能を上げたり、ネットワーク環境を良くしたりとハードウエアでの対応も重要ですが、実際に動いているコードの最適化が一番大切な所ですね。  123ishはRailsで出来ていますが、コードの最適化にBullet というジャムを使っています。    Rails の便利なオブジェクト関連性の定義によって、実は一つで済むようなSQL呼び出しが、関連するレコードをSQLから一つ一つ呼び出すという、とても時間のかかる実装に陥ってしまうことがあります。  一括読読み込みをすれば２回ですむSQL呼び出しが、そうでないと１１回もSQL呼び出しをすることになってしまうという簡単な例と共に、このN+１クエリ問題についてRailsガイドに詳しく載っています。  このN+１クエリ問題を見つけてくれる便利なジャムがBullet です。    また、何時でも一括読み込みをすれば良いのでもなく、むしろ要らない読み込みはメモリーの浪費と逆にレスポンスを遅くしてしまいます。  この無駄な一括読み込みもBullet によってレポートされます。つまりBullet によって   N+1クエリ問題の発見 無駄な一括読み込みの発見   が出来るのです。      Bulletジャムの導入方法   BulletジャムをGemfile に記述 新しい環境ファイル optimization.rbの設定 ジャムをoptimizationの時にのみ取り込み 実行   1. BulletジャムをGemfile に記述  2020年７月現在でバージョンは6.1.0でした。        2. 新し環境設定  Bulletを実行する環境を、optimizationとして普段使っているdevelopmentから分けます。development.rbをコピーしてobpimization.rbとしてconfig/environments に作り、以下のような設定を施します。         Bullet.enable = tureはBulletジャムを使って最適化を行うことを可能にします。 Bullet.alert = tureは問題点をjavascript のalertを使って表示することを可能とします。 Bullet.bullet_logger =…
スコア: 1.06

RailsアプリケーションでSporocketsからWebpackerへ移行する方法

by Makio

Rails6.0でWebpackerがデフォルトのJavascriptsのコンパイラーになりました。    Webpackerを使うことでWebpackが用意している様々な機能が使えるようになりますし、SplitChunksで簡単に最適化も行えます。  なので以前のRailsのバージョンを使ってアプリを構築している人は、SporocketsからWebpackerへの移行を考えていると思います。  でも肝心の移行方法は、Railsのオフシャルドキュメントでは軽く触れているだけで、十分ではありません。   英語では詳しい移行方法に触れたサイトはあるものの、このサイトを参照しても具体な手順は曖昧なところがあります。    そこで、具体的で簡潔なステップ・バイ・ステップでの移行方法の肝心なところを紹介します。              １．まずはwebpackerGemをGemfileに加えます        ここでsprockets gemは残しておきましょう。cssのコンパイルにまだ使いますし、残しておいてもお互いの干渉はありません。    ２．Webpackerのコンフィギュレーションを行います    Webpackerの公式ページに詳しいコンフィギュレーションがありますが、基本以下の4つのファイルの設定です、   /config/webpack/loader/custom_loader.js /config/webpack/loader/erb.js /config/webpack/production.js /config/webpack/development.js   まずjson-loaderとyaml-loaderの設定をcustom_loader.jsで行います。      次に .js.erbファイルが使えるようにrails-erb-loaderを読み込みます。これはRails自体に必要なのではないかな。。。    
スコア: 1.06