ブログからAMP HTMLを自動生成するプラグインを作った

WordpressからHexoにブログを移行して、数ヶ月が経ちました。Hexoはnode.jsの静的ジェネレーターです。静的ジェネレーターは他言語のJekyllHugoMiddlemanOctopressGatsbyも有名です。Hexoのお陰で快適にブログが書けるようになり、ブログが手軽なものになりました。

さて本題ですが、HexoブログからAMP HTMLを生成してくれるプラグイン「hexo-generator-amp」を作ってみました。

何ができるの?

このプラグインは投稿記事(markdownファイル)ごとに、新たなAMP HTMLを自動生成してくれます。まずは以下の例をご覧ください。

AMPページと通常のHTMLページ

当サイトでは、以下のようにAMP HTMLを用意しています。実例として参考にご覧ください。

hexo2amp

目次

そもそもAMP HTMLとは何か?

AMP(Accelerated Mobile Pages) HTMLとは、モバイル端末で高速に表示するためのページです。

仕様で定められた軽量なウェブページ(=AMP HTML)を用意しておくと、専用のサーバーからキャッシュして配信してくれます。

通常のウェブページでは、配信元のWebサーバーへアクセスするのですが、AMPの場合は予めキャッシュされたページを配信してくれます。これによって表示が短時間で済みます。AMPの詳しい内容は以下をご覧ください。

当ブログ
Google AMP(Accelerated Mobile Pages)HTMLについて

冒頭でも触れましたが、今回はブログで採用しているHexoでAMP HTMLを生成できるプラグインを作りました。嬉しいことに、Spotifyのエンジニアである、José Manuel Pérezさんのブログにもこのプラグインを使っていただいてます。

その他、以下のサイトでもご紹介いただきました。

Pull Requestやissueも歓迎しておりますので、煮るなり焼くなりご自由にお使いください。

hexo-generator-ampの導入方法

それでは、HexoでAMPページを生成できる「hexo-generator-amp」の導入方法をまとめてみたいと思います。流れは以下のステップで行います。

  1. プラグインのインストール
  2. headタグにAMP HTMLのパスを指定
  3. オプションの設定
  4. ローカルサーバーで確認
  5. デプロイ
  6. AMPの記述をチェックする

それでは順番に見ていきましょう。

1. プラグインのインストール

すでに前述しましたが、他のプラグインと同様にnpmからインストールしてください。

bash
1
$ npm install hexo-generator-amp --save

2. headタグにAMP HTMLのパスを指定

次に、headタグを生成するテンプレート(例えば./themes/(your-theme)/layout/head.ejs)にAMP HTMLのファイルパスを追記していきます。プラグインからAMP HTMLが生成されるパスは./amp/index.htmlとなっていますので、その絶対パスを追記していきます。

head.ejs
1
2
3
4
5
...
<% if (is_post() && config.generator_amp){ %>
<link rel="amphtml" href="<%= config.url %>/<%= page.path %>/amp/index.html">
<% } %>
...

例えば、hexoのデフォルトテーマであるhexo-theme-landscapeではthemes/landscape/layout/_partial/head.ejsに上記の内容を追加します。

EJS以外のテンプレートでパスを記述するには?

jadeテンプレートをお使いの方はissue #13を。swigをお使いの方はissue #14参考にしてください。

3. オプションの設定

hexo-generator-ampを使うにあたり、以下のようなオプションを追加していきます。./_config.ymlを開き、以下のようなオプションを入力してください。

_config.yml
1
# The following settings is the quick start options.
# hexo-generator-ampで最低限必要なオプションです
# 以下をそのまま追記すると、プラグインが動作します
generator_amp:
  templateDir: amp-template
  assetDistDir: amp-dist
  logo:
    path: sample-logo.png
    width: 600
    height: 60
  substituteTitleImage: 
    path: sample-substituteTitleImage.png
    width: 1024
    height: 800
  warningLog: false

4. ローカルサーバーで確認

ローカルサーバーで記事のAMP HTMLが生成されるか確認してください。ブラウザからlocalhost:4000/パーマリンク/amp/にアクセスするとAMP版HTMLが表示されます。

bash
1
2
$ hexo clean
$ hexo server
AMPページと通常のHTMLページ

当サイトでは、以下のようにAMP HTMLを用意しています。実例として参考にご覧ください。

5. AMPの記述をチェック

hexo-generator-ampでは、AMP HTMLが生成された直後に、記述が正しいのかを自動検証することができます。

AMP HTML検証機能

AMP HTMLの記述の妥当性を自動チェックするには./_config.ymlを開き、以下のようにオプションvalidateAMPを追記します。値はtrueにしてください。

_config.yml
1
# validateAMPを有効にすると、AMP HTMLに関する検証が行われます。
generator_amp:
  validateAMP: true   # AMP HTMLの検証を行いたい時は、trueにします
  #(その他のオプションは省略)

validateAMPtrueに変更すると自動検証が行われます。また、AMP HTMLの記述に問題があれば以下のようなエラーメッセージが表示されます。

検証エラー例:AMP HTMLにiframeタグが混じっている。その他2頁がエラー
検証エラー例:AMP HTMLにiframeタグが混じっている。その他2頁がエラー ©

表示されたエラーを元に、AMP HTMLを修正していきましょう。

(余談)エラーはブラウザでも確認できる

ブラウザからも同じように、AMP HTMLの記述が正しいか確認することができます。

ブラウザから確認したい場合にはChrome DevToolsを開き、localhost:4000/パーマリンク/amp/#development=1にアクセスします。

Chromeでも同様のエラーメッセージを確認し、デバッグできる
Chromeでも同様のエラーメッセージを確認し、デバッグできる ©

AMP HTMLの検証手段は他にもいくつかありますので、好みの方法を選ぶ事ができます。詳しくは以下をご覧ください。

当ブログ
Google AMP HTMLが正しく記述されたかチェックする方法

その他の警告表示

その他、以下の問題に該当する場合には、警告も表示されます。

警告表示がされる場合

hexo-generator-ampでは、以下の場合に警告メッセージが表示されます。

  • オプションが正しく設定されていない場合
  • imgタグにwidthとheightの指定が無い
  • 記事内の1つ目の画像の幅が696px以上ではない
  • サイトのロゴ画像の幅が600px以下、且つ高さが60px以下ではない

これらの警告はAMP HTMLの仕様を満たすために用意されています。警告表示を一旦非表示にしたい場合はwarningLogオプションをfalseにするか、記事のmarkdownファイルや_config.ymlを修正してください。

修正後、AMP HTMLのエラーが表示されなくなれば、AMP HTMLのデバッグは完了です。

6. デプロイ

いつも通りHexoでデプロイしていきます。

bash
1
2
3
$ hexo clean
$ hexo generate
$ hexo deploy -g

ブログをデプロイした後でAMP HTMLが正常にクロールされているかGoogle Search Consoleで確認をしましょう。

Google search consoleでAMP HTMLのクロール状況が分かる
Google search consoleでAMP HTMLのクロール状況が分かる ©

問題がなければAMP HTMLが徐々にインデックスされていきます。

注意点と詳細

前述ではhexo-generator-ampの簡単な導入方法をご説明しました。

続いて注意点と詳細な使い方について解説したいと思います。まずは、hexo-generator-ampを使うにあたり、幾つか注意点がありますので以下をご覧ください。

記事中の画像の扱い

AMP HTMLのheadタグ内には構造化データと呼ばれるものを含める約束になっています。構造化データの詳しい情報については、当ブログの下記記事をご覧ください。

当ブログ
Google AMP(Accelerated Mobile Pages)HTMLについて
「構造化データについて」を参照してください。

構造化データには、AMPカルーセルという情報に画像のURLや幅、高さを含める事ができるようになっています。プラグインでは投稿記事のmarkdownファイルにimgがあれば、画像を見つけて構造化テータ用の画像として利用します。高さと幅の値(widthheight)については、プラグインが自動で取得してくれます。

また投稿記事に1つ以上の画像が存在しない場合にはオプション./_config.ymlで設定したsubstituteTitleImageの情報が構造化データ用の画像として代わりに使用されます。

詳細なオプション設定

hexo-generator-ampで設定できる詳細なオプションについての説明です。前述の簡単なオプション指定だけでもAMP HTMLが生成可能となっていますが、より詳細にカスタマイズしたい場合には以下を指定して下さい。

_config.yml
1
# Advanced Settings of hexo-amp-generator
# hexo-generator-ampの詳細オプション

generator_amp:

  substituteGoogle_adsense:                     #(※省略可) google adsenseに関するオプション
    data_ad_client: ca-pub-123456789876543      #(※省略可)
    data_ad_slot: 0123456789                    #(※省略可)
    width: 336                                  #(※省略可)
    height: 280                                 #(※省略可)
    
  templateDir: amp-template                     #AMP HTMLを生成に利用するテンプレートが格納されるディレクトリ(hexoプロジェクトからの相対パス)
  assetDistDir: amp-dist                        #AMP HTMLが使用する各アセットのディレクトリ (公開ディレクトリpublicからの相対パス)
  
  logo:                                         #ロゴに関するオプション
    path: sample-logo.png                       #schema.orgに含めるロゴ画像のパス (assetDistDirオプションに指定したディレクトリからの相対パス)
    width: 600                                  #schema.orgに含めるロゴ画像の幅  (AMPカルーセルで定めるschema.orgの仕様により600px以下が必須)
    height: 60                                  #schema.orgに含めるロゴ画像の高さ (AMPカルーセルで定めるschema.orgの仕様により60px以下が必須)
  logo_topImage:                                #(省略可)サイトのロゴに関するオプション
    path: sample/sample-yoursite-logo.png       #(※省略可) サイトのロゴ画像のパス (assetDistDirオプションに指定したディレクトリからの相対パス)
    width: 1024                                 #(※省略可) サイトのロゴ画像の幅
    height: 400                                 #(※省略可) サイトのロゴ画像の高さ
    
  substituteTitleImage:                         #代替画像に関するオプション。記事に画像が無い場合、ここで指定した画像が代わりに使用される
    path: sample-substituteTitleImage.png       #代替アイキャッチ画像のパス (assetDistDirオプションに指定したディレクトリからの相対パス)
    width: 1024                                 #代替画像の幅 (AMPカルーセルが定めるschema.orgの仕様により696px以上が必須)
    height: 800                                 #代替画像の高さ
    
  google_analytics: UA-123456789-1              #(※省略可) google アナリティクスのトラッキングID
  cssFilePath: sample-amp.css                   #(※省略可) AMP HTMLに埋め込むcssファイルのファイルパス (templateDirオプションに指定したディレクトリからの相対パス。サイズはAMPの仕様により、50000Byte以下が必須)
  templateFilePath: sample-amp.ejs              #(※省略可) AMPのテンプレートとして使うejsファイル (templateDirオプションに指定したディレクトリからの相対パス)
  generateAmpPath: :year/:month/:day/:title/amp/#(※省略可) AMP HTMLを生成する場所を変更したい時に指定します。記述方法はPermalinksと同じです。
  html_minifier:                                #(※省略可) HTMLの圧縮を有効にする。圧縮オプションはgithubのkangax/html-minifierを参照
  warningLog: true                              #(※省略可) コンソールでAMP HTML検証結果や警告を表示するか否か?
  validateAMP: true                             #(※省略可) AMP HTMLの記述の妥当性を自動検証するか否か?
  cache: hexo-generator-amp-cached.json         #(※省略可) AMP HTML生成の高速化。キャッシュを使用するか否か?指定すると、編集したmarkdownの記事のみAML HTMLを再生成する。それ以外の古い記事はここで指定したキャッシュデータから読み出す。
  # onlyForDeploy: false                        #(※省略可,v1.0.3以降で廃止) ローカルサーバー時にAMP HTML生成を省略するか否か?


# authorに関する拡張情報(任意)
authorDetail:                                   #(※省略可)
  authorReading: よみ仮名                         #(※省略可) 著者の読み仮名など
  avatar:                                       #(※省略可)
    path: sample-avator.png                     #(※省略可) 筆者アイコンのファイルパス (assetDistDirオプションに指定したディレクトリからの相対パス)
    width: 1024                                 #(※省略可) 筆者アイコンの幅
    height: 1024                                #(※省略可) 筆者アイコンの高さ
  description: 筆者の説明                          #(※省略可) 著者の説明
copyright_message: (例)記事の転載を禁止します         #(※省略可) コンテンツに関する注意書き等々

詳細なオプションに関しては以上となります。またAMP HTMLでは、画像等に関するいくつかの仕様がありますので、以下に注意してください。

AMPカルーセルで定めれた画像サイズの制約

googleの検索結果として表示されるAMP HTMLページをAMPカルーセルと呼びます。AMPカルーセルの元なるデータはschema.org/BlogPostingで定められている仕様に沿って構造化データを用意することになります。

しかし当プラグインでは、オプションで記述した内容や投稿記事のコンテンツを元に、自動で構造化データが作成されます。ここで注意点があるのですが、画像の扱いについては以下の内容に注意して下さい。

決まりごとは沢山ありますが、特に注意すべき点はロゴ画像やアイキャッチのサイズです。以下のように画像の幅と高さに制約があります。

  • Markup specification

    画像は幅696px以上と定められている

  • Logo Guidelines

    ロゴ画像のガイドラインでは、ロゴ画像は幅600px以下、高さ60px以下と定められている

スタイルシートのサイズ制約

google AMPのHTMLに含めることができるスタイルシートのサイズは50,000バイト以下と定められています。

最後に

という事で、今回はHexoからAMP HTMLを生成するプラグインについてご紹介しました。もし興味のある方がいらっしゃいましたら使ってみてください。それでは!

Ads
Ads