- 更新日: 2017年2月8日
- Rails
RailsでAMPに対応するgemをリリースしました
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
画像付き英語辞書 Imagict | 英単語をイメージで暗記作った動機
AMP 対応はけっこう面倒くさいです。とはいえ、その作業手順は割りとアプリケーションで共通している部分も多いので、なんとか gem 化したいなと。既存の Rails アプリケーションで、少しでも AMP 対応が楽になれば良いな〜と思い立ったのが作った動機となります。
詳しい設定や使い方は、README をご参照お願いします。以降、簡単な説明です。
インストール
まずはインストール。
Gemfile
|
1 |
gem 'rails_amp' |
|
1 2 3 |
$ bundle install |
|
1 2 3 4 5 6 |
$ rails generate rails_amp:install insert config/initializers/mime_types.rb create config/rails_amp.yml create app/views/layouts/rails_amp_application.amp.erb |
上記3ステップが生成されます。
config/initializers/mime_types.rb
|
1 |
Mime::Type.register_alias 'text/html', RailsAmp.default_format |
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
|
1 2 |
targets: users: index show |
デフォルトでは、上記の通り 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
|
1 |
<%= rails_amp_amphtml_link_tag %> |
このヘルパーで…
|
1 |
<link rel="amphtml" href="http://example.com/users.amp" /> |
のようなコードが出力され、http://example.com/users に対する AMP ページの URL を知らせる役割を果たします。
app/views/layouts/rails_amp_application.amp.erb
生成された AMP ページ用のレイアウトファイルをカスタマイズする。JSON-LD と schema.org による構造化データの指定や、AMP 用のスタイルシート編集などです。
使い方
AMP ページにアクセスするには、以下のような URL でアクセスします。
|
1 2 3 4 |
http://example.com/users.amp http://example.com/users.amp?sort=name |
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 用でスイッチさせる例。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<% if amp_renderable? %> <!-- For amp --> <amp-twitter width=486 height=657 layout="responsive" data-tweetid="*****" data-cards="hidden"> <blockquote placeholder class="twitter-tweet" data-lang="en">*****</blockquote> </amp-twitter> <% else %> <!-- For normal html --> <blockquote class="twitter-tweet" data-lang="ja">*****</blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> <% end %> |
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 などフィードバックもお待ちしております！テストコードがまだ十分じゃなかったり運用実績が全然ない状態なので、テストコード追加やバグ報告などお助け頂けると大変助かります。
- Rails の関連記事
- RailsでMySQLパーティショニングのマイグレーション
- Rails ActiveRecordでdatetime型カラムのGROUP BY集計にタイムゾーンを考慮する
- RailsプラグインGemの作成方法、RSpecテストまで含めたrails pluginの作り方
- Railsでrequest.urlとrequest.original_urlの違い
- Railsでwheneverによるcronバッチ処理
- Google AnalyticsのRails Turbolinks対応
- Railsアプリにソーシャル・シェアボタンを簡単設置
- Rails監視ツール用にErrbitをHerokuで運用
- Facebook APIバージョンのアップグレード手順(Rails OmniAuth)
- window.NREUMがHTMLヘッダー部に自動挿入されるのはNew Relic用
Leave Your Message!