AMP HTMLを自動生成するプラグインを作った。HexoでAMPを導入する|おちゃカメラ。

HexoブログからAMP HTMLを生成してくれるプラグイン「hexo-generator-amp」を作ってみました。今回はそれについて触れたいと思います。

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

何ができるの？

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

そもそも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さんのブログにもこのプラグインを使っていただいてます。

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

Google AMP 1 | geniustanley

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

hexo-generator-amp

github
tea3/hexo-generator-amp

npm
hexo-generator-amp - npm

hexo-generator-ampの導入方法

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

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

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

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

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

bash

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

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

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

head.ejs

...
<% 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参考にしてください。

2. オプションの設定

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

_config.yml

# 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

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

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

bash

1 2	$ hexo clean $ hexo server

4. AMPの記述をチェック

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

AMP HTML検証機能

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

_config.yml

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

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

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

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

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

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

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

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のデバッグは完了です。

5. デプロイ

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

bash

1
2
3

$ hexo clean
$ hexo generate
$ hexo deploy -g

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

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があれば、画像を見つけて構造化テータ用の画像として利用します。高さと幅の値(widthとheight)については、プラグインが自動で取得してくれます。

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

詳細なオプション設定

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

_config.yml

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

generator_amp:

  # 1. Google Adsenseの設定
  substituteGoogle_adsense:                     #(※省略可) google adsenseに関するオプション。記事中の広告を以下のオプションで置換します。
    data_ad_client: ca-pub-123456789876543      #(※省略可) アドセンスのdata-ad-client
    data_ad_slot: 0123456789                    #(※省略可) アドセンスのdata-ad-slot
    layout: responsive                          #(※省略可) アドセンスのレイアウト。詳細は右記URLを参照。https://support.google.com/adsense/answer/7183212?hl=ja
    width: 300                                  #(※省略可) アドセンスの幅。推奨値：300
    height: 250                                 #(※省略可) アドセンスの高さ。推奨値：250
    # data_ad_slot_matched: 54678901234         #(※省略可) アドセンス関連コンテンツのdata-ad-slot。詳細は右記URLを参照。https://support.google.com/adsense/answer/6111336?hl=ja
    # layout_matched: fixed-height              #(※省略可) 関連コンテンツのレイアウト。推奨値：fixed-height
    # # width_matched: 300                      #(※省略可) アドセンスの幅。推奨値：無効(コメントアウト)
    # height_matched: 1221                      #(※省略可) アドセンスの高さ。推奨値：1221
  
  # 2. テンプレートの設定
  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                                 #代替画像の高さ
  placeholderImg:                               #(※省略可) 画像読み込み中に表示されるプレースホルダー画像のパス
    path: sample/sample-placeholder.png
  cssFilePath: sample-amp.css                   #(※省略可) AMP HTMLに埋め込むcssファイルのファイルパス。css以外にStylusやSassも指定可能 (templateDirオプションに指定したディレクトリからの相対パス。サイズはAMPの仕様により、50000Byte以下が必須)
  templateFilePath: sample-amp.ejs              #(※省略可) AMPのテンプレートとして使うejsファイルやpugファイル (templateDirオプションに指定したディレクトリからの相対パス)
  generateAmpPath: :year/:month/:day/:title/amp/  #(※省略可) AMP HTMLを生成する場所を変更したい時に指定します。記述方法はPermalinksと同じです。
  # theme:                                       #(※省略可) サンプルテンプレートの設定
  #    menu:                                     #(※省略可) サンプルテンプレートで使うメニューの設定
  #      diary: /categories/diary/               #(※省略可) (メニュー欄の例)日記のパス
  #      archives: /archives                     #(※省略可) (メニュー欄の例)アーカイブのパス
  #    facebook_app_id: 1234567890               #(※省略可) facebookのシェアボタンで使用するApp ID
  #    facebook_admins: 1234567890               #(※省略可) facebookのシェアボタンで使用するAdmin ID
  #    share_button:                             #(※省略可) シェアボタンを有効にする設定
  #      twitter: true                           #(※省略可) Twitterシェアボタンを有効にする
  #      facebook: true                          #(※省略可) Facebookシェアボタンを有効にする
  #      google: true                            #(※省略可) Goolge+シェアボタンを有効にする
  #      hatena: true                            #(※省略可) Hatenaシェアボタンを有効にする
  #      tumblr: true                            #(※省略可) Tumblrシェアボタンを有効にする
  #    category_posts: true                      #(※省略可) カテゴリー最新投稿一覧を表示する
  #    category_posts_detailed: true             #(※省略可) より詳細に分類されたカテゴリーと一致する投稿一覧を表示する
  #    latests: true                             #(※省略可) 最新投稿一覧を表示する
  #    list_limts: 5                             #(※省略可) 上記オプションの投稿一覧の表示数 (デフォルトは5件の表示)
  #    authorLink:                               #(※省略可) プロフィールで表示されるソーシャルアカウントのリンク設定
  #      mail_url: https://your-mail-form/       #(※省略可) メールフォームのURL
  #      twitter_id: xxx                         #(※省略可) twitterのアカウントID
  #      facebook_id: xxx                        #(※省略可) facebookのアカウントID
  #      instagram_id: xxx                       #(※省略可) instagramのアカウントID
  #      github_id: xxxx                         #(※省略可) githubのアカウントID
  
  # 3. Google アナリティクスの設定
  google_analytics: UA-123456789-1              #(※省略可) google アナリティクスのトラッキングID
  
  # 4. HTML圧縮の設定
  html_minifier:                                #(※省略可) HTMLの圧縮を有効にする。圧縮オプションはgithubのkangax/html-minifierを参照
  
  # 5. 警告ログとAMP HTMLの検証ログの表示設定
  warningLog: true                              #(※省略可) コンソールでAMP HTML検証結果や警告を表示するか否か？
  
  # 6. キャッシュの設定
  cache: hexo-generator-amp-cached.json         #(※省略可) AMP HTML生成の高速化。キャッシュを使用するか否か？指定すると、編集したmarkdownの記事のみAML HTMLを再生成する。それ以外の古い記事はここで指定したキャッシュデータから読み出す。
  # onlyForDeploy: false                        #(※省略可，v1.0.3以降で廃止) ローカルサーバー時にAMP HTML生成を省略するか否か？
  
  # 7. AMP HTMLの自動検証設定
  validateAMP: true                             #(※省略可) AMP HTMLの記述の妥当性を自動検証するか否か？
 

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