アークウェブのブログ

2016年7月22日

Movable Type用のAMP化（モバイルでの高速表示）対応プラグインを開発中

投稿者 中野

• Tweet
• 

アークウェブでは、Googleなどが推進する AMP（Accelerated Mobile Pages Project） にMovable Typeで構築したサイトの記事ページなどを対応させるAMP化プラグインを開発中です（ほとんどできていて、最終テスト中です）。

AMPとは何か

AMP（Accelerated Mobile Pages Project） は、GoogleやTwitterが共同で進めている、モバイル端末でウェブページを高速表示するためのプロジェクトです。

AMPに対応したページ（現在のところ記事コンテンツのみ）は、Googleの検索結果にカルーセル形式で表示されるメリットもあります。日本でも朝日新聞、毎日新聞、マイナビニュースなどがいち早く対応を始めています。

Movable Type用AMP化プラグインの仕様

以下のような仕様で、MT用AMP化プラグインを開発中です。仕様は暫定的な部分もあり、変更や追加などもあるかもしれません。
また、AMPの規格自体がどんどん進化中ですので、必要に応じてキャッチアップしていく予定です。

• MTの投稿内容（MTEntryBody / MTEntryMore, MTPageBody / MTPageMore, カスタムフィールド値）内のAMP対応を行う
• AMPページ出力用のテンプレート内で指定すると、その中身について置換した結果を出力する

指定：

<EntryBody amp="1">

置換結果：

entryBody(Page)
entryMore
カスタムフィールドの出力
変数の出力 (mt:Var name="hoge")

• HTMLタグ内にあるインラインCSSの記述を削除する

• amp-img : タグを見つけたらに変更し、属性値も適宜変更する
  • インラインCSS「style="xxx"」: 記述を削除する
  • width, height属性: 記述の有無をチェックし、両方ある場合は記述を残す
    サイズ表記がないか、片方しかない場合: src=で指定された画像ファイルからサイズを取得し、「width="xxx", height="xxx"」を追記する
  • class="xxx": そのまま記述を残す
  • alt属性, title属性: そのまま記述を残す

• amp-youtube ：<iframe... で始まる通常のコードを <amp-youtube... で始まるコードに変更する

通常のコード：

<iframe 
    width="420" height="315" 
    src="https://www.youtube.com/embed/bC0qzb5Rmrs" frameborder="0" allowfullscreen>
</iframe>

AMP化後のコード：

<amp-youtube
    data-videoid="mGENRKrdoGY" 
    layout="responsive" 
    width="480" height="270"></amp-youtube>

参考資料

• Create Your AMP HTML Page - Accelerated Mobile Pages Project
• 【書きかけ】AMP のドキュメント超訳ノート(ampproject.org) - Qiita

カテゴリー: CMS(コンテンツマネジメント・システム) , CMS・MovableType , アークウェブ , スマートフォン

タグ：

« 前の記事：Zen Cart 1.6 開発の最新状況（Zen-Cart公式サイトから）
» 次の記事：Movable Typeのサイト構築・運用に役立つプラグイン10選（投稿支援編）