AMP HTMLを生成し、自動で検証できる機能をブログに追加しました。今回はその機能について簡単に解説します。

現在はWordpressを辞めて静的サイトで運営していますが、サーバー維持費が掛からず運営が簡単になりました。

目次

現在のブログ環境について

現在はHexoを利用してブログを構築しています。

Hexoは、node.jsで出来た静的サイトジェネレーターです。静的サイトジェネレーターは様々なものが存在していて、JekyllHugoMiddlemanOctopressGatsbyも有名です。

詳しい内容はこちらをご覧ください。

実録。WordpressからHexoにブログ移行して分かったメリット・デメリット

スポンサーリンク

Hexoプラグインは自作するしかなかった

Hexoのお陰で快適にブログが書けるようになり、ブログが手軽なものになりました。しかし、Hexoだけに限らず静的サイトジェネレータは、プラグインが充実していないことが大きな欠点です。

そこで、ワードプレスからhexoへ移行して1年で多くのプラグインや代替案を考えてきました。

今回はその中の一つであるhexo-generator-ampに、大幅なアップデートを加えたのでご紹介したいと思います。

hexo-generator-ampは記事ページ(./index.html)とは別にAMP HTML(./amp/index.html)を自動で作成してくれるプラグインです。生成されるAMP HTMLはGoogle AMP Projectの仕様に沿った形式で出力されます。

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

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

AMP HTMLが自動検証できる

今回のアップデートでは、AMP HTMLの有効性を自動で検証する機能(オート・バリデーション・チェック)を追加しました。

AMP HTMLを生成した直後にAMP HTMLの記述が正しいのかをプラグインが自動で確認し、問題があればコンソールで知らせてくれるというものです。手間の掛からないAMP HTML導入と品質維持に活用ください。

一般的な投稿記事であれば、プラグインがAMP HTMLの仕様に沿ったデータを作成してくれますが、万が一AMP HTMLの記述に問題が見つかったときには次のようなエラーメッセージを表示します。

自動検証により見つかったAMP検証エラーの例:iframeタグが混じってる
自動検証により見つかったAMP検証エラーの例:iframeタグが混じってる ©

通常の方法ですと、ChromeやAMP Validatorエクステンションを使って、以下のように1頁ずつ確認していくことになります。また、gulpをお使いの方はgulp-amphtml-validatorタスクを走らせて一括チェックするという事もできます。

Chromeでも同様のエラーメッセージを確認しデバッグが可能
Chromeでも同様のエラーメッセージを確認しデバッグが可能 ©

しかしプラグインの場合は、全てのAMP HTMLページが一括自動で検証されていくのが特徴です。機会がありましたらhexo-generator-ampをお使いください^^

完全にポジショントークとなってしまいますが、これからの時代は、ブログを立ち上げる際にWordpress(ワードプレス)を敢えて使うのは、もはや時代遅れであり、愚かな選択と言われてしまうところまで来てると思います。もしこれからブログを立ち上げる方は、是非とも新たしい手法に目を向けて頂きたいと思います。それでは快適なブログライフを^^

スポンサーリンク
 記事を書いてる人
gravatar
tea (てぃー)

自然風景や人物の写真撮影を行っています。その他は音楽や映像・メダカの鑑賞も好きです。ブログでは気になったことをメモ代わりにまとめていますので気軽にご覧ください(^^)

 お問い合わせ

 撮影のお問い合わせ

 ポートフォリオ

 著者・運営者について

 記事名とURLをコピーする

AMP HTMLを生成して自動で検証できる機能をブログに追加しました https://photo-tea.com/p/17/hexo-amphtml-validation/

 関連する記事
 作例掲載