ホーム » ビジネスブログ » AMP »

Movable Type用AMPページ化 支援プラグイン「AmpConvert」をリリースしました

2016年11月22日

Movable Type用AMPページ化 支援プラグイン「AmpConvert」をリリースしました

投稿者 八木

概要

Movable TypeでのAMP対応ページ生成を支援するプラグインです。
テンプレート内のブロックタグで囲まれた中身について、

  • img タグを amp-img に変換し、さらに画像サイズ属性が不足してたら付加する
  • YouTube埋め込みコードを amp-youtube タグに変換する
  • 余分なインラインCSSの記述を除去する

といった変換を行います。

動作

次の変換が行われます。

1. インライン style の除去

<mt:AmpConvert>～</mt:AmpConvert> 内の 全てのインラインCSSの記述「style="XXX"」が削除されます。

2. img → amp-imgへ変換

全ての <img>タグが、<amp-img> タグに置き換わります。

amp-imgのwidth,height自動設定
元のimgタグに width または height 属性が記述されていない場合に、画像のサイズを取得して、amp-img に自動設定します(パラメータの指定でオフにできます)。

なんらかの理由で画像が取得できなかった場合は、width,heightの自動設定は行われず、
MTログにログを残します。

3. YouTubeの埋め込みコード を amp-youtube に変換

iframe タグのうち、srcが「https://www.youtube.com/embed/～」のものが変換対象となります。

タグ <iframe>〜</iframe> が <amp-youtube>〜</amp-youtube>に変換され、パラメータについては次のルールで変換されます。

  • data-videoid
    • https://www.youtube.com/embed/XXXX の「XXXX」がdata-videoidに設定される
    • layout: 「responsive」が設定されます
    • src: 削除されます
    • frameborder: 削除されます
    • allowfullscreen: 削除されます

元のYouTube埋め込みコード

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

↓
amp-youtube 変換後

<amp-youtube
    data-videoid="RDDxlJld2AxSo" 
    layout="responsive" 
	width="560"
	height="315"
</amp-youtube>

動作条件

  • Movable Type 6
  • Movable Type 7
  • Movable Type 8
  • MTクラウド対応
  • 必要モジュール:
    AmpConvertの利用には、HTML::Parserモジュールが必要です。
    HTML::Parserがインストールされていない環境の場合は、再構築時にエラーを出力します。

ダウンロード

インストール

zipを解凍して [AmpConvert] フォルダーごと、MT設置ディレクトリー /plugins にアップロードします。

使い方

ampページを出力するアーカイブテンプレートを追加し、
変換したい範囲を、～ブロックタグで囲みます。

MTAmpConvertタグのオプション


<mt:AmpConvert fix_img_size="1" base_url="http://example.com">
 　　　　　<mt:EntryBody> など変換対象
</mt:AmpConvert>
パラメーター: fix_img_size (画像サイズ属性自動設定機能のオン/オフ)

amp-img タグの width, height 属性の自動設定の実行を制御するパラメーターです。

  • fix_img_size="0": width,heightを自動設定しない
  • fix_img_size="1": width,heightを自動設定する
  • デフォルト(無指定時)は width,heightを自動設定します。
パラメーター: base_url ()

前述の fix_img_size パラメーターとセットで使います。
width,height を自動設定する場合、imgのsrc属性で指定された画像をダウンロードしてサイズ取得を行います。
しかし src属性が相対パスで書かれていると画像の取得ができません。
これを解決するために、base_urlパラメーターを設定することができます。
imgのsrcが相対パスである場合、base_url + imgのsrcで画像を取得しに行きます。

<mt:AmpConvert fix_img_size="1" base_url="http://example.com"></mt:AmpConvert>
  • 元のコードが <img src="/image/abc.jpg">の場合
    • 相対パスなのでbase_urlが頭に付加され、http://example.com/image/abc.jpgの画像を取得します。
  • 元のコードが<img src="http://foo.jp/aaa/bbb.gif">の場合
    • 絶対パスなのでbase_urlは使わず、http://foo.jp/aaa/bbb.gifの画像を取得する

画像が取得できなかった場合
* width,heightの自動設定は行なわれません。
* MTログにログを残します。

amp-youtubeを使う場合

amp-youtubeを使う時には、
<head>内に次のスクリプトを記述する必要があります。
通常はAMP用のアーカイブテンプレートに追記してください。

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

サンプルテンプレート: 記事アーカイブ(AMP)

<!doctype html> 
<html amp lang="ja"> 
  <head>
    <meta charset="utf-8">
    <title><$mt:EntryTitle$></title>
    <link rel="canonical" href="<$mt:CanonicalURL current_mapping="0"$>" /> 
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    
    <noscript></noscript> 
    
     
  </head>
  <body>
    <h1><$mt:EntryTitle$></h1>
    <mt:AmpConvert>
    	<$mt:EntryBody$>
    	<$mt:EntryMore$>
    </mt:AmpConvert>
  </body>
</html>

link rel="amphtml", "canonical"で元ページとAMPページを相互関連付けする

通常ページとAMPページ同士を関連づけして、お互いを参照しあえるようにします。

通常ページ(non-AMP page)に付与:

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

AMP pageに付与:


<link rel="canonical" href="https://www.example.com/url/to/full/document.html">

AMPページ単独の場合:
AMPページ単独の場合は自分自身を指すようになっていればOKです。

<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">

今後の対応予定など

本プラグインのｖ1.0では本文内で多用される機能に絞って実装しています。
AMP Projectにはこの他のampタグや、Extended components（外部ampタグ？）がたくさんあり、今現在も発展途中です。

Accelerated Mobile Pages Project

今後、必要に応じて対応する機能を増やしていこうと考えています。個別のカスタマイズニーズなどはご相談ください。

投稿者 八木 : 2016年11月22日 11:04

カテゴリー: AMP , CMS・MovableType , スマートフォン

タグ：

« 前の記事：NGO・NPOのウェブとソーシャルメディア活用：2017年に向けたアドバイス
» 次の記事：メインカテゴリーが同じ記事間で「前の記事 / 次の記事」ナビを作れるMT用プラグイン「MTEntryPrevNext2」

Movable Type用高機能メールフォーム生成プラグイン A-Formの詳細へ
Movable Type用会員限定サイトプラグイン A-Memberの詳細へ
Movable Type用予約サイト構築プラグイン A-Reserveの詳細へ
ARK-Web×CSR(企業の社会的責任)

アークウェブの本

Zen Cartによるオンラインショップ構築・運用テクニック―オープンソース徹底活用

Zen Cartによるオンラインショップ構築・運用テクニック―オープンソース徹底活用

内容充実のZen Cart公式本（v1.3対応）がついに発表です。アークウェブのスタッフをはじめZen-Cart.JPの中心メンバーが共著で執筆しました。続きを読む

Movable Type プロフェッショナル・スタイル

Movable Type プロフェッショナル・スタイル

ビジネスサイト構築におけるCMSとしてのMTの活用方法について、豪華執筆陣による実践的MT本です。八木が共著で執筆しました。続きを読む

Web屋の本

Web屋の本

Web 2.0時代の企業サイトの構築・運用などの戦略を考える「Web屋の本」 (技術評論社)を、中野・安藤が執筆しました。続きを読む

新着はてブ

Loading

アーカイブ

応援しています

  • キッズ・セーバー
  • ソロモン・リリーフ ─ソロモン諸島を応援する有志による、震災復興支援プロジェクト─

    （終了しました）

RSS配信

 

サービスおよびソリューション一覧

サービス
Zen Cartソリューション
Movable Typeソリューション
その他ソリューション
アークウェブのCSR(企業の社会的責任)

最新情報・投稿をチェック

このページのトップに戻る

Photo by A is for Angie

Powered by Movable Type Pro 6.3.8