ブログからAMP HTMLを自動生成するプラグインを作った
WordpressからHexoにブログを移行して、数ヶ月が経ちました。Hexoはnode.jsの静的ジェネレーターです。静的ジェネレーターは他言語のJekyll、Hugo、Middleman、Octopress、Gatsbyも有名です。Hexoのお陰で快適にブログが書けるようになり、ブログが手軽なものになりました。
さて本題ですが、HexoブログからAMP HTMLを生成してくれるプラグイン「hexo-generator-amp」を作ってみました。
何ができるの?
このプラグインは投稿記事(markdownファイル)ごとに、新たなAMP HTMLを自動生成してくれます。まずは以下の例をご覧ください。
AMPページと通常のHTMLページ
当サイトでは、以下のようにAMP HTMLを用意しています。実例として参考にご覧ください。
- 通常のウェブページ : markdownの記法まとめ
- AMP HTML版のウェブページ : markdownの記法まとめ(AMP HTML)
目次
そもそもAMP HTMLとは何か?
AMP(Accelerated Mobile Pages) HTMLとは、モバイル端末で高速に表示するためのページです。
仕様で定められた軽量なウェブページ(=AMP HTML)を用意しておくと、専用のサーバーからキャッシュして配信してくれます。
通常のウェブページでは、配信元のWebサーバーへアクセスするのですが、AMPの場合は予めキャッシュされたページを配信してくれます。これによって表示が短時間で済みます。AMPの詳しい内容は以下をご覧ください。
冒頭でも触れましたが、今回はブログで採用しているHexoでAMP HTMLを生成できるプラグインを作りました。嬉しいことに、Spotifyのエンジニアである、José Manuel Pérezさんのブログにもこのプラグインを使っていただいてます。
その他、以下のサイトでもご紹介いただきました。
Pull Requestやissueも歓迎しておりますので、煮るなり焼くなりご自由にお使いください。
hexo-generator-amp
hexo-generator-ampの導入方法
それでは、HexoでAMPページを生成できる「hexo-generator-amp」の導入方法をまとめてみたいと思います。流れは以下のステップで行います。
- プラグインのインストール
- headタグにAMP HTMLのパスを指定
- オプションの設定
- ローカルサーバーで確認
- デプロイ
- AMPの記述をチェックする
それでは順番に見ていきましょう。
1. プラグインのインストール
すでに前述しましたが、他のプラグインと同様にnpmからインストールしてください。
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
となっていますので、その絶対パスを追記していきます。
1 | ... |
例えば、hexoのデフォルトテーマであるhexo-theme-landscapeではthemes/landscape/layout/_partial/head.ejs
に上記の内容を追加します。
3. オプションの設定
hexo-generator-ampを使うにあたり、以下のようなオプションを追加していきます。./_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が表示されます。
1 | $ hexo clean |
AMPページと通常のHTMLページ
当サイトでは、以下のようにAMP HTMLを用意しています。実例として参考にご覧ください。
- 通常のウェブページ : /p/hexo-markdown-notation/
- AMP HTML版のウェブページ : /p/hexo-markdown-notation/amp/
5. AMPの記述をチェック
hexo-generator-ampでは、AMP HTMLが生成された直後に、記述が正しいのかを自動検証することができます。
AMP HTML検証機能
AMP HTMLの記述の妥当性を自動チェックするには./_config.yml
を開き、以下のようにオプションvalidateAMP
を追記します。値はtrue
にしてください。
1 | # validateAMPを有効にすると、AMP HTMLに関する検証が行われます。 generator_amp: validateAMP: true # AMP HTMLの検証を行いたい時は、trueにします #(その他のオプションは省略) |
validateAMP
をtrue
に変更すると自動検証が行われます。また、AMP HTMLの記述に問題があれば以下のようなエラーメッセージが表示されます。
表示されたエラーを元に、AMP HTMLを修正していきましょう。
(余談)エラーはブラウザでも確認できる
ブラウザからも同じように、AMP HTMLの記述が正しいか確認することができます。
ブラウザから確認したい場合にはChrome DevToolsを開き、localhost:4000/パーマリンク/amp/#development=1
にアクセスします。
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でデプロイしていきます。
1 | $ hexo clean |
ブログをデプロイした後でAMP HTMLが正常にクロールされているかGoogle Search Consoleで確認をしましょう。
問題がなければ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が生成可能となっていますが、より詳細にカスタマイズしたい場合には以下を指定して下さい。
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で定められている仕様に沿って構造化データを用意することになります。
しかし当プラグインでは、オプションで記述した内容や投稿記事のコンテンツを元に、自動で構造化データが作成されます。ここで注意点があるのですが、画像の扱いについては以下の内容に注意して下さい。
決まりごとは沢山ありますが、特に注意すべき点はロゴ画像やアイキャッチのサイズです。以下のように画像の幅と高さに制約があります。
画像は幅696px以上と定められている
ロゴ画像のガイドラインでは、ロゴ画像は幅600px以下、高さ60px以下と定められている
最後に
という事で、今回はHexoからAMP HTMLを生成するプラグインについてご紹介しました。もし興味のある方がいらっしゃいましたら使ってみてください。それでは!