ホーム »

ビジネスブログ

2016年7月22日

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

投稿者 中野

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

AMPとは何か

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

ampproject.org

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>

参考資料

 

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

2016年7月14日

Zen Cart 1.6 開発の最新状況(Zen-Cart公式サイトから)

Zen Cartの主要コントリビューターであるDrByte氏から、Zen Cart 1.5.5のリリ...

投稿者 中野

2016年7月 1日

サイト最適化に使えるツール / コンテンツ担当の時間の使い方 / メルマガ購読者数を増やすには(NGOやNPOのウェブ活用情報)

NGOやNPO向けのウェブ活用情報が豊富な英語圏の記事を読み漁り、これは役立つかも! と思うものを紹...

投稿者 中野

2016年6月27日

構築事例:NPO法人パレスチナ子どものキャンペーン様のウェブサイトリニューアル

特定非営利活動法人(認定NPO法人)パレスチナ子どものキャンペーン様のウェブサイトのリニューアルをお...

投稿者 中野

2016年6月 8日

著名NGO格付けサイトがランキング基準を変更 / NGOのCMS調査 / "info"でメルマガ送るな(NGO・NPOのウェブ活用情報)

さまざまな社会的課題を解決するノンプロフィット団体(NGO/NPO)や活動者の、ウェブサイト活用の参...

投稿者 中野

2016年6月 3日

「3分でわかる!A-Form」ムービーができました

中野です。 Movable Type用の高機能フォーム作成プラグイン「A-Form」を動画で紹介する...

投稿者 中野

2016年6月 1日

MTDDC Meetup TOHOKU 2016(Movable Type×東北)が開催されます

中野です。 MTDDC Meetup(多数のサイトで利用されているCMS「Movable Type」...

投稿者 中野

2016年5月13日

Zen Cart バグ:1.5.0~1.5.5で管理者権限を不正に変更できる不具合対応ファイル(admin_account.php)提供

Zen Cart.comで「管理者権限を不正に変更できてしまう不具合」に対応したファイル(admin...

投稿者 中野

2016年4月25日

A-Form 3 PC/Mobileの動作に必要な「ケータイキット(アイデアマンズ社製)」のセキュリティバージョンアップが提供されています

弊社のMovable Type用プラグイン「A-Form 3 PC/Mobile」では、フィーチャー...

投稿者 中野

 

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配信

 

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


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


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

Photo by A is for Angie

Powered by Movable Type Pro 6.0.1