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'…