RailsでAMPに対応するgemをリリースしました

スポンサーリンク
【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください!
画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

Rails で AMP(Accelerated Mobile Pages) に対応するための、Rails プラグイン gem を作成して公開しました。設定や使い方は、GitHub の README に詳しく書いています。サポート対象の Rails バージョンは、4.1, 4.2, 5.0 です。

rails_amp | RubyGems.org | your community gem host
takafumir/rails_amp: RailsAmp is a Ruby on Rails plugin for AMP(Accelerated Mobile Pages).

AMP についての詳細、ドキュメント等は以下。

Accelerated Mobile Pages Project

スポンサーリンク

作った動機

AMP 対応はけっこう面倒くさいです。とはいえ、その作業手順は割りとアプリケーションで共通している部分も多いので、なんとか gem 化したいなと。既存の Rails アプリケーションで、少しでも AMP 対応が楽になれば良いな〜と思い立ったのが作った動機となります。

詳しい設定や使い方は、README をご参照お願いします。以降、簡単な説明です。

インストール

まずはインストール。

Gemfile

上記3ステップが生成されます。

config/initializers/mime_types.rb

AMP 用の format(フォーマット)を、Mime::Type として Rails に認識させるためのコードが追記されます。

config/rails_amp.yml

AMP を有効にさせるコントローラー/アクションを指定したり、Google アナリティクス利用等のための設定ファイルです。

app/views/layouts/rails_amp_application.amp.erb

AMP ページの共通レイアウト用ファイルです。

設定

生成された config/rails_amp.yml に設定を書きます。

config/rails_amp.yml

デフォルトでは、上記の通り users#index(UsersController の index アクション), users#show(UsersController の show アクション)で、AMP を有効にさせる設定となっています。AMP を有効にしたいコントローラー/アクションを、targets: に指定する。その他の設定については README を参照して下さい。

準備

既存のレイアウト(app/views/layouts/application.html.erb など)の head 部に、amphtml リンクタグを出力するヘルパーを追記します。

app/views/layouts/application.html.erb

このヘルパーで…

のようなコードが出力され、http://example.com/users に対する AMP ページの URL を知らせる役割を果たします。

app/views/layouts/rails_amp_application.amp.erb

生成された AMP ページ用のレイアウトファイルをカスタマイズする。JSON-LD と schema.org による構造化データの指定や、AMP 用のスタイルシート編集などです。

使い方

AMP ページにアクセスするには、以下のような URL でアクセスします。

AMP ページ専用のビューを作成しない場合、amp フォーマットへのアクセス時に、既存 html フォーマット用のビューが使用されます。ここでの例 http://example.com/users.amp へのアクセスでは、app/views/users/index.html.erb のビューが amp フォーマット用に使用されます。app/views/users/index.amp.erb のように AMP 専用のビューを作成したらそっちが使われる。

また、Rails のヘルパー image_tag を使って画像を出力している場合は、amp フォーマットでは image_tag は自動的に amp-img タグを出力します。html フォーマットでは、通常通りに img タグが出力される。

それと、ビューでは amp_renderable? というヘルパーを使えます。既存のビューに、以下のような条件分岐コードを書くためのヘルパーです。Twitter の埋め込みツイートを表示するコードを、amp 用と html 用でスイッチさせる例。

AMP の動作チェック

1. Google Chrome ブラウザを起動
2. デベロッパーツールを立ち上げる
3. コンソールタブを選択
4. http://localhost:3000/users.amp#development=1 のように、URLの後ろに’#development=1’を追加してAMPページにアクセス

これでコンソールに「AMP validation successful.」と表示されたら、妥当な AMP です。エラーが表示された場合は、エラーメッセージに従って、既存の html ビューを amp_renderable? ヘルパーを使うなどして修正するか、もしくは AMP 専用のビューを作成して対応します。

開発時には、この Google Chrome のデベロッパーツールと’#development=1’のURLアクセスで動作確認しつつ、個別ビューの対応を行っていくわけですが、ここが一番労力を要する工程です…。

その他の AMP 動作チェックツール。

構造化データ テストツール
AMP テスト – Google Search Console

以上、RailsAmp の gem 公開告知と簡単な使い方の説明でした。Issues や Pull requests などフィードバックもお待ちしております!テストコードがまだ十分じゃなかったり運用実績が全然ない状態なので、テストコード追加やバグ報告などお助け頂けると大変助かります。

スポンサーリンク
パーフェクト Ruby on Rails は、最近読んだ Rails 本の中では一番役に立った本です。Chef や Capistrano など Rails と共によく使用される技術にも触れてあります。Ruby on Rails 4 アプリケーションプログラミングは、入門的な内容で Rails の機能全体を網羅されています。
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!