AMP対応してみた

  • 投稿日:
  • by ダブリン市民
  • カテゴリ:
  • ハッシュタグ:

MT6はスマホで見てもそれなりに表示されるので、あまり必要性は感じないのですが、Google推奨のAMP（Accelerated Mobile Pages）ページを吐かせるようにしてみました。

既に多くの先達が成果を公開されてますので、新たに何か付け加えるようなものはありません。
まず ARK-Webさんの『MovableType用AMPページ生成支援プラグイン「AmpConvert」』をインストールします。
さらにモビデビさんの『Movable TypeにおけるAMP(Accelerated Mobile Pages)への基本的な対応方法』のテンプレートを使わせて頂きました。

amp01.jpg

「アーカイブテンプレート」に「記事アーカイブ」を新規作成し、前述のテンプレートをコピペします。　これを「記事（AMP）」という名前で保存しました。

amp04.jpg

変更したのは、

１．BlogタイトルをH1要素にして、記事タイトルにH2要素へ変更
２．7行目の元記事へのリンク（「mt:EntryID」を「mt:CanonicalURL」へ）
３．twitterなど、使わないamp要素はコメントアウト
４．<style amp-custom> の中のCSS設定で、header.title-barの背景色に「background:#000033;」を指定
５．「pre{overflow:auto;white-space:pre-wrap;word-wrap: break-word;background-color:#dcdddd;}」を追加
６．フォントサイズを本文14px、記事タイトル21pxに変更
７．マージン、パディングを調整

などです。　後から変更しようとすると全ての記事で更新が必要になるので、デザインが固まるまでは再構築しない方がいいでしょう。

amp02.jpg

「アーカイブパス」ですが、元記事と同じ場所に「ファイル名.amp.拡張子」で出力したかったので、『アーカイブマッピングで利用するアーカイブファイル名の定義 : Movable Type ドキュメント』を参考に「%y/%m/%-F.amp%x」としました。

MovableTypeのブログにAMP対応のテンプレートを作成してみた - QWERTY.WORK

記事の横のチェックボックスにはチェックを入れないこと。このチェックボックスはデフォルトのアーカイブマッピングを指定するものなので、ここにチェックを入れると、PC用のページのリンクが全部/ampにあるページのURLになってしまいます。

実はやってしまって狼狽しました。

amp03.jpg

元記事の「記事」テンプレートにAMPページへのリンクを追加します（24行目）。　リンクは以下のようにしました。

<link rel="amphtml" href="/archives/<$mt:EntryDate format="%Y/%m/"$><$mt:EntryBasename separator="-"$>.amp.html" />

あとは記事を更新して、本当に出来ているか検証ですが、

MTのAMP対応をした - 眠すぎ日記

慣れてきたらGoogle Chromeでコンソールを開き、確認したいページのURLに「#development=1」をつけて確認するのが楽。AMPページのアーカイブが「通常の記事名.amp.html」のような単純なものであれば下記のブックマークレットが使える。

この方法が便利でした。
出力された AMPページ⚡はこちら。

困るのはMTで画像を挿入したときに自動で imgタグに付く「style=""」がエラーになることです。　インラインstyleは「AmpConvert」プラグインが削除してくれるハズなのですが、記述が空だと削除してくれないのかも？
仕方ないので、MTの「検索/置換」で「style=""」を削除してしまいました。

あと Access Counterプラグインが挿入する scriptタグもエラーになります。
これについては、「AccessCounter.pl」の「_add_tracking_tag」サブルーチンの中の

    my $text  = $args{content};
    $$text    =~ s!</body>!$track\n</body>!i;
 
    return 1;
}

を、

    my $text  = $args{content};
    if ($$text !~ /<html amp lang="ja">/i) {
        $$text    =~ s!</body>!$track\n</body>!i;
    }
 
    return 1;
}

という感じに変更して、AMPページにはアクセスカウンター用スクリプトを追加しないようにしました。

amp06.jpg

検証画面で確認するとき、「Toggle device toolbar」をオンにすると、スマホでの見え方を確認できます。
自分の Galaxy A8の場合は、iPhone6とほぼ同じ見え方でした。
ただ 「<mt:AmpConvert fix_img_size="1" base_url="https://blog.still-laughin.com" responsive_width_threshold="100">」としているのに、画像が「layout="responsive"」になりません。
CSSで「max-width:100%;height:auto;」を指定しても、幅は変化するものの高さが追従しません。　なんでだろ？

苦肉の策として、「AmpConvert」プラグインと regex_replaceモディファイアを併用して、

<mt:SetVarBlock name="regex1a">/<img(.*)? \/>/g</mt:SetVarBlock>
<mt:SetVarBlock name="regex1b"><amp-img layout="responsive"\1 /></mt:SetVarBlock>
<mt:SetVarBlock name="regex2a">/<iframe(.*)?><\/iframe>/g</mt:SetVarBlock>
<mt:SetVarBlock name="regex2b"><amp-iframe layout="responsive" sandbox="allow-scripts allow-popups allow-same-origin allow-top-navigation"\1></amp-iframe></mt:SetVarBlock>
<mt:AmpConvert fix_img_size="1" base_url="https://blog.still-laughin.com" responsive_width_threshold="100">
<$mt:EntryBody regex_replace="$regex1a","$regex1b" regex_replace="$regex2a","$regex2b"$>
<$mt:EntryMore regex_replace="$regex1a","$regex1b" regex_replace="$regex2a","$regex2b"$>
</mt:AmpConvert>

というようにしました。　
img要素とiframe要素の置換だけなら regex_replaceで問題ないのですが、「余分なインラインCSSの記述を除去する」のに「AmpConvert」プラグインを使ってます。
regex_replaceによる置換に関しては、『AMP （Accelerated Mobile Pages） HTML を出力するようにしてみたけど面倒くさかった話 | WWW WATCH』を参考にさせて頂きました。

amp05.jpg

記事アーカイブを再構築すると6時間以上も掛かりました。　ファイル数が倍になるので仕方ないですね。

モバイル閲覧に最適化するAMP（Accelerated Mobile Pages）HTMLに対応する方法（前編） - のまのしわざ

AMP対応したファイルを配置したら、Google Search Consoleで
　
・クロール＞Fetch as Google
　
でクロールを手動リクエスト。
　
その後、
　
・検索での見え方＞Accelerated Mobile Pages
　
で見つかったかどうかを確認します。

Google Search Consoleは前に使ったことがありますが、最近は全く...
Search Consoleを使うにはサイトの所有権確認が必要なのですが、ValueDomainの場合 TXTレコードでは登録できなくて、CNAMEレコードで登録できました。
その場合でも、ホスト名のところはドメイン名（ウチでいえば.still-laughin.com）を除いて記入しないとエラーになります。