この記事を書いてる人: 
tea

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

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

何ができるの?

このプラグインは投稿記事(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. headタグにAMP HTMLのパスを指定
  2. オプションの設定
  3. ローカルサーバーで確認
  4. デプロイ
  5. 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
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参考にしてください。

2. オプションの設定

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

_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 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
 AMPページと通常のHTMLページ

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

4. AMPの記述をチェック

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

AMP HTML検証機能

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

_config.yml
1
2
3
4
# 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のデバッグは完了です。

5. デプロイ

いつも通り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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
# 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: (例)記事の転載を禁止します #(※省略可) コンテンツに関する注意書き等々

詳細なオプションに関しては以上となります。また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を生成するプラグインについてご紹介しました。もし興味のある方がいらっしゃいましたら使ってみてください。それでは!