まちぽのコラム記事をAMP HTML にしてモバイル表示を高速化してみた

Googleが発表したモバイルサイト向けサイト向けの最適化して、高速表示を可能にするAMP(Accelerated Mobile Pages) HTML。2016年2月25日からGoogleがAMP対応されたウェブページを検索結果への表示を開始したことから、一部のWeb業界の人たちが、にわかにざわつき始めています。AMPは記事やニュース系のWebページと相性がよいということで、静岡のローカルニュースサイト「まちぽ」で配信しているコラム記事をAMP対応してみました。

2月25日の出来事

2月25日の夕方くらいから、僕のSNSのフィードに「モバイルサイトが爆速になる」というキーワードが飛び込んでくるようになりました。「とにかく速い」「一瞬で表示される、ヤバイ」という言葉が踊っています。半信半疑で対応しているページを開いてみると、驚愕の速さでページが開きます。ページローディングの時間など皆無です。言葉通りとにかく速い。Webでお仕事をしている自分としては、こんな美味しそうなモノに食いつかない理由はありません。
決めました。対応するしかないでしょう。

その次の朝、同僚（通称：支部長）が「AMPってヤバイっすね。やりましょうよ」と言ってきました。僕はその１時間前にYoutubeに公開されていたAMPのチュートリアル動画を見終わっていました。

AMPとは

すでにいろいろなページでAMPについて解説されていますが、おさらいすると、GoogleとTwitterが協同で立ち上げた「Accelerated Mobile Pages Project」が提供している、モバイル端末向けのWebページを最適化するフレームワークです。

Web開発者は、AMP HTMLの仕様に則り、HTMLをマークアップします。基本AMP HTMLは、従来のWeb技術をベースにしているため特に難しいことはありません。ただ、基本JavaScriptが禁止なので、jQueryをビュンビュンしているページをAMP対応するには、考えを改める必要があります。

また、「imgタグ」を「amp-imgタグ」という独自のタグを置き換える必要があります。そして、amp-imgには、width属性とheight属性が必須となります。

img-responsiveな画像サイズなんか知らないよ的なページをAMP対応するには、考えを改める必要があります。

JavaScriptのロードがサイト表示の遅延に原因になることと、ページのレンダリング開始時に表示領域のサイズが計算されていることがWebページの表示速度を上げることになるので、理にかなった仕様と言えるでしょう。

また、AMP対応ページの速度をさらに加速するため、「AMP CDN」というWebページのキャッシュを保持するシステムが用意されています。2月25日にGoogleが対応開始したのは、こちらのことで、Googleの検索結果に表示されたAMP対応ページは、GoogleのAMP CDNから配信されます。
TwitterにもAMP CDNが用意されているようで、Twitterのタイムラインに表示されるWebページはTwitter のAMP CDNから配信されるようになります。

個人的には htmlタグに稲妻 (絵文字!）を書くのがカッコいいと思う。突っ込みどころではあるけれど。

まちぽとは

AMPの説明はこれ位にして、まちぽのコラムをAMP対応する話を続けます。「まちぽ」とは、僕の所属する静岡の出版社であるしずおかオンラインが提供する静岡の地域情報を集めて配信する仕組みです。

メディアを選ばない地域情報配信プラットフォームを構築することを目的に、単なるWebサイトにとどまらず、地域情報を他のWebサイトやアプリ、Apple Watchにだって情報を提供します。

注）ここでいうメディアとは、雑誌などの紙媒体、Web媒体、スマートホン、ウェアラブル端末といった媒体のことを指しています。

まちぽのコンセプト。地域のお店や自治体などもイベント情報をまちぽに登録でき、登録されたデータはWeb API経由で様々なメディアに配信可能。

そのまちぽの中で、まちぽ編集部が街へ出て取材してまとめた記事を配信するまちぽコラムがあります。
今回はこのまちぽコラムをAMP対応しました。

まちぽコラムを作る仕組み

まちぽは、WordPressといった既成のCMSを使ってコラムの記事を作るのではなく、独自開発したCMSを使って作成されています。このCMSの機能は弊社のPaperWebという出版用の記事データをWeb記事に変換するシステムのサブセットとして存在しています。この機能自体、まだ名前がついていないので、Web記事メーカー(仮）としておきます。

記事を「見出し」「本文」「画像」といった構成要素ごとに入力するのが特徴。動画や地図の埋め込みも可能。構成要素はドラッグ＆ドロップで簡単に並べ替え可能。

この記事自体もWeb記事メーカー(仮）を使って書いているわけですが、なぜ、Web記事メーカー(仮）がWordPressに代表されるWYSIWYG的なエディタではなく、このように一見入力が面倒くさそうな仕組みで入力形式をとっているかというと、メディアを選ばない地域情報配信プラットフォームを構築するために、Web記事というコンテンツの構成要素（タイトル、キャッチ、文章等のコンテキスト）をキチンとデータ化して再利用する機会を増やそうという目論見からです。

Web記事メーカー(仮）で入力されたデータは以下のようなデータ形式で保存されます。

データベースに登録されているこの記事のデータ。HTMLを保存するのではなく、記事の構成要素をKey-Value形式で保存している。

このように保存された記事データを指定されたHTML形式に書き出すことで、Webページが生成されます。

基本的にWeb記事メーカー(仮）から出力されるHTMLは、極力装飾のない素のHTMLであるため、配信先のWebサイト側で適宜CSSを適用して、そのサイトのテイストにあったWebページが作られます。

このWeb記事メーカー(仮）で作られた記事は、弊社が提供するwomoネットの編集部コラムをはじめ、womoアプリ(iPhone版、Android版）、静岡のフリーWi-Fiのポータルサイト「ShizuPass」の観光記事、静岡の防災をわかりやすくコラムで配信する「助かる！ジブン防災静岡」などに配信されています。

さあ、AMP対応だ

前置きが長くなりましたが、AMP対応です。勘のよい方であればもうお気づきだと思いますが、上の図で示した通り、まちぽの記事はKey-Value形式で登録されています。

記事の最初は「見出し１」で「2月25日の出来事」です。その次は本文で「2月25日の夕方くらいから、僕のSNSのフィードに「モバイルサイトが爆速になる」というキーワードが飛び込んでくるようになりました。・・・」で始まる文章です。といった具合に記事の構成要素を読み出すことができるわけです。

したがって、Web記事メーカー(仮）にAMP HTML出力機能をつけるだけで、AMP対応のWeb記事が作成可能となりました。

若干苦労した点は、amp-imgタグにはwidth属性とheight属性が必須だという点くらいでしょうか。Web記事メーカー(仮）では記事を構成する画像の縦横のサイズを保存していませんでした。そのため、AMP HTML出力の際に、都度、イメージ画像を取得して、縦横サイズを求めてwidth属性とheight属性を書き出す処理を追加しました。

正しいAMP HTMLかを確認

AMP HTMLがはき出せたので、実際にWebサーバーからコラムのページを表示させます。

ページが作成されたら２点確認を行います。そのページが正しいAMP HTML形式かどうかのテストとHTMLの構造が正しいかのチェックです。

ValidなAMP HTMLかのテストは、Google Chromeで確認します。
AMP対応ページのURLに#development=1をつけてアクセスします。そして、Chromeのデベロッパーコンソールにエラーがないかどうかを確認します。

実際には、いくつかエラーが出ました。
amp-imgタグに、alt属性がない、HTMLにインラインのstyle属性を設定しているなどはエラーとなります。

また、Schema.org を定義するJSON-LDが、body内にあるとエラーになりました。JSON-LDはhead内になければいけません。

記事の内容を検索エンジンに正しく伝えるために、書かれている記事のメタデータをSchema.orgの仕様に従って記述します。本当はコードスニペットしたいところだけど、JavaScriptが使えないため画像を貼っています。

Google Chromeのデベロッパーコンソールでの確認結果。AMP validation successful.と表示できればOKです。

また、GoogleのStructured Data Testing Toolでデータ構造が正しいかをチェックします。

JSON-LDで記述したSchema.orgが正しいかをチェックします。くどいようだけど、htmlのあとの稲妻がカッコいいです。

Structured Data Testing Toolでエラーになった点はロゴ画像のサイズでした。このロゴ画像は、AMP対応の記事として、Googleの検索結果に表示されたときに記事の発信元として表示されるもののようです。ロゴ画像のサイズは600x60でなければいけません。

また、今回は、AMP非対応のまちぽのコラム記事のWebページはそのまま残しておいて、AMP対応のWebページを別に作ることにしました。

その場合は、元記事（AMP非対応ページ）のヘッダに以下のmetaタグを挿入します。
＜link rel="amphtml" href="AMP対応ページのURL" /＞

そして、AMP対応記事のページのヘッダには元記事はこちらだよ、という意味で、
＜link rel="canonical" href="AMP対応ページのURL" /＞

このように書きます。こうすることで、あとはGoogleさんがよしなにしてくれると思います。

まとめ

というわけで、あなたがAMP対応ページのGoogleの検索結果からリンクを辿ってこの記事を読んでいるのであれば、このページがAMP対応ページです。もし、そうでなければ、この記事のAMPページは、こちらになります。

GoogleのAMP CDNから配信されればかなり爆速でページが表示されますが、そうでなくても、これまでのモバイルのWebページと比べかなり速く表示されることを経験できると思います。

また、これまで配信したまちぽのコラムのAMP対応ページは、こちらになります。静岡のいろいろな記事が読めますので、静岡の魅力を知っていただけたら何よりです。