  サインイン | 登録

  1. ホーム
  2. 
  3. プログラミング
  4. 
  5. Ruby on Rails
  6. 

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

2020/07/11 更新 2020/07/22
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' でAMPページはapp/views/amp/layouts/application.amp.erbのレイアウトを使うことを指示します。



AMPビューページの作成


コントローラーによって指示されたAMPビューページです。



ここに色々とコンテンツを詰め込みます。



レイアウトページの作成




application.amp.erbで利用できるJavascirpt とカスタムCSSを指定します。ここで、CSSは75kb以下のサイズと決められています。

例では

  • amp-form AMP ドキュメントの入力フィールドを送信するためのフォーム(<form>)を作成。
  • amp-carousel スライダーもしくはカローセルが必要であればこれを使います。
  • amp-iframe iframeを使うため。ですが、ドキュメントの上部付近には表示できないという制約があります。
  • amp-youtube、amp-instagram、amp-twitterそれぞれ、YouTube、インスタグラム、ツイッターのコンテンツをページに貼り込むのに使います。
  • amp-analytics グーグルアナリティクスをAMPページでも使えるようにします。
  • amp-ad AMP対応の広告を表示するコンテナに必要です。



最後に


ここで示したのは一般的なステップです。gemを使ってバクを直しているより、よっぽど近道になると思います。

一つ注意点ですが、AMPではCSSのサイズに制約があるので、123ishではAMPページ用に必要最低限のCSSファイルを用意しました。ですが、AMPページで使っているフォーマットはモバイルページと同じものです。

AMPページが正しく作られているかどうかもチェッすることが出来るので、公開する前に確認することをお勧めします。

123ishでは、AMPページと非AMPページのモバイルでの検索経由ユーザー流入を比べると、AMPページの方が3倍から6倍くらい多いです。






#ruby-on-rails, #Rails, #Accelerated-Mobile-Page, #amp, #SEO, #123ish
スコアー: 1.07
 コメント
 1 いいね
0
  信用しますか?  
0

    


NFT 123ish 3次元ゴールドコインアートコレクション




人気のコメント
最初にコメントする

ボード


サインインしてコメントを投稿する


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

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

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

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

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

知っているとお得な情報について書ける方を募集しています!

初心者から経験者まで向け・SEOを考えた記事の書き方・1 タイトルを練り上げる

アスリートの現役中からできる副業は「ライター」

大籠のキリシタン〜東北のキリシタン殉教の地「大籠」、千松兄弟とは

大籠のキリシタン殉教と千松兄弟に託されたメッセージ

ぎっくり腰には、早めの非ステロイド性抗炎症薬の服用が回復に良いのでしょうか?

東北の隠れキリシタンの里大籠を、地元自治会作製の「キリシタン殉教とたたら製鉄の里大籠散策マップ」により紹介

グランド・ナレーティブ 大いなる物語 アメリカは何処に行くのだろうか?

政治的独立と信教の自由

地元観光地図よる生月のキリシタン巡礼地

【Webライティング・コンテンツ作製のコンペティション】第一回123ish杯 123ishでの投稿記事のコンペティション 🥇1位4万円 🥈2位2万円 🥉3位1万円

Upworkでの支払い、返金に関するトラブルはどう対応できるか?

プログラマーは簡単な英語の読み書きで、Upworkのフリーランスとしてより稼げるようになる

生月に永遠に刻まれたキリシタン信仰の壮絶なドラマ

信徒発見と信教の自由

データサイエンティスト・データサイエンス職よりデータエンジニアでの転職の方が手堅い?未経験者がデータエンジニアになる方法を教えます。

アメリカでの日系老人介護施設費用

未経験からデータサイエンティストとして転職を成功させる方法。データサイエンスでの華やかな道と手堅く成功させる道を教えます

有名ブログのUbersuggestによる月間オーガニックトラフィックでのランキングと分析

プライバシー設定を変更しました

記事は保存されました(投稿はされていません)

サインインして続行する

国: 日本 (jp)
  • United States (us)
  • 日本 (jp)
  • Indonesia (id)
  • India (in)
利用規約 | プライバシーポリシー | 私達に関して
よくある質問 | お問い合わせ
 
© 2025 123ish