この記事は concrete5 Japan Advent Calendar 2016 の６日目の記事です。５日目は mizuno.fumito さんの concrete5をウェブサービスのベースとして活用する です。
コンクリートファイブジャパン 菱川です。
今日は、concrete5 で構築したサイトで、Google が推進する Accelerated Mobile Pages (AMP) に対応させる方法をご紹介します。
Accelerated Mobile Pages (AMP) とは？
AMP とは、静的なコンテンツを高速に表示するための、Google が推進している技術です。AMP HTML、AMP JS、Google AMP Cache の３つの要素から成り立っています。
AMP HTML
AMP HTML とは、通常の HTML を Google が独自に拡張した HTML のフォーマットです。使えるタグが通常の HTML より制限されており、スタイルシートやJavaScriptの使用に特に厳しい制限があります。逆にいうと、スタイルシートがJavaScriptがWebページの表示を遅くする要因なので、あえて排除されているということです。また、amp-img タグなど、独自の HTML タグもたくさんあります。
AMP JS
Google の Web ページ表示高速化のノウハウが詰まった JavaScript ライブラリです。
Google AMP Cache
Google は、正しい AMP ページが見つかれば、それを Google のサーバーにキャッシュし、concrete5 の代わりにユーザーにコンテンツを配信してくれます。そのため、非力で遅いサーバーを使っていても、AMP ページだけは、Google が代わりに高速に配信してくれるというわけです。この、コンテンツさえ渡してくれればあとは Google 様がよしなにやっておきますよ、という姿勢については、もやもやはあります、個人的には…。
導入方法
concrete5 で AMP 対応は、難しくありません。
私が開発した、こちらのアドオンをインストールしていただくだけです。
ただし、現在はまだベータ版として GitHub でのみ配布しています。concrete5 のマーケットプレイスには登録していません。自己責任でお使いください。また、バージョン8には対応していません。
インストール
上記リンク先の GitHub のページから、Clone or Download ボタンをクリックし、ZIP アーカイブをダウンロードしてください。Zipを解凍したフォルダの中身を、packages/amp/ ディレクトリの中にアップロードします。そして、管理画面から AMP アドオンをインストールしてください。
設定
管理画面内の AMP ページにアクセスしてください。AMP に対応させるページタイプを選択します。AMP とは、既存のページの HTML に変更を加えるものではなく、既存のページの別バージョンを用意するイメージです。AMP は使用できる HTML タグも通常の HTML とは別で、厳しい制限があります。そのため、複雑なレイアウトのあるページには向きません。ブログ記事など、シンプルな記事系コンテンツが向いています。
Google Analytics のプロパティIDが設定できるようになっていますので、トラッキングを行いたい方は入力してください。concrete5 のトラッキングコード画面で保存したコードは出力されません。AMP では、script タグが使用できないためです。
デザインカスタマイズ
packages/amp/themes/amp/ ディレクトリに格納されているテーマが、AMP 専用にチューンされたテーマです。こちらを application/themes/amp/ ディレクトリにコピーしていただくことで、好きなデザインにカスタマイズしていくことが可能です。
通用のテーマと最も異なるのは、
$a = new Area('Main');
ではなく
$a = new \Concrete\Package\Amp\Area\AmpArea('Main');
と書くことです。
このAMP専用のエリアは、AMPに対応できないブロックを除き、さらに記事ブロックをAMP専用にチューンして出力します。
また、
ではなく
markFooterAssetPosition(); ?>
と記載します。
AMP パッケージの今後について
このアドオンは、現在はまだベータ版です。エラーは出ないようにできましたが、AMP にはまだまだ様々な独自タグがあり、全てに対応できていません。また、AMP に表示できるブロックも、現在は記事ブロック、画像ブロック、YouTubeブロック、動画ブロックの４つです。
このアドオンについての機能要望は、GitHub の issue でお知らせください。また、案件で使おうと思っているという方でお困りごとがあれば、有償にはなりますが個別対応もさせていただきますので、お問い合わせください。
現時点ではとりあえずニュース記事がAMP対応できればいいというクライアントでも、先進的な方だなと思いますが、今後 Google はさらに力を入れてくると思われます。AMP の様々な機能に対応したいという案件も出てくるでしょう。concrete5 の AMP 対応に貢献したいという方は、ぜひプルリクエストも送っていただけると嬉しいです。
それでは、良いクリスマスを。第７日は Masahiko Kawai さんの[concrete5] 5.7で外部フォームを作ったので、いろいろまとめてみましたです。合わせてどうぞ。
