いいやつの作りかた

はじめに

こんにちは、おうちフジロッカーです。YouTube のフジロックの配信で巻き戻し再放送見てたところ、誤操作でリロードして即配信終了となりました。ダーティー・プロジェクターズ途中だったのに。はい。

さて巷には、不定期的にブログを作る習性を持つ者が一定数おられるかと思いますが、私もその一人です。
今までにも WordPress、tumblr のカスタム、Jekyll、Gatsby など、お試しレベルから実運用に至るまで、様々なテンションでブログを扱ってまいりました。プログラミングを介さないものも含むともっとあると思います。なぜだかはわかりません。
皆様がご覧になられているこれもその一つである、理由もなくただ産み落とされた新しいブログです。今回はその作りかたを記事にします。

構成

このブログは markdown ファイルを Web サーバーでパースして HTML をレンダリングするという仕組みが基礎となって出来ています。前述した Jekyll、Hugo や Hexo などを使っても実現できると思いますが今回は自分のブログが作りたかっただけなので、自分だけが良ければそれで良いというつもりでイチから手書きすることにしました。

バックエンド

Cloud Functions for Firebase + Firebase Hosting を使っています。
ホスティングをどうするか考えた際に、もともと Node.js + Express で書き始めていたのもあり、ホスティング・サービスも一元で扱える Firebase を選びました。
そうそう、Cloud Functions for Firebase はもともと Node.js を扱ってはいたのですが対応バージョンが古く、現行の新しいバージョンに対応している新しい処理記法が使えませんでした。それが以前の記事でも書きましたが、数日前に新バージョンに対応したというのも後押しになりました。最新というわけではないのですけれどね。

Firebase Hosting は CircleCI と連携し、ビルド後に自動でデプロイされるようにしています。

テンプレートエンジンは mustache を使っています。一時期 EJS だったり、Nunjucks 見たり（結局 webper という webp の画像コンバーターで使いました）、あんまりこだわりはない部分ですね。

フロントエンド

フロントエンドはスタイルシートで意匠を作る以外ほぼ何もすることがなさそうな気がしてたので AMP にしました。インデックスページと記事ページの行き来の想定しかない Web サイトにおいて、発生する UX の懸念というのは「表示が速いか遅いか」だけであろうという雑なデザイン思考です。
画像を amp-img というコンポーネントを使わないと AMP として認定されないので markdown パーサーライブラリを拡張して、markdown から <amp-img> にパースさせるようにしています。ちなみに、画像の最適化には Jimp という Node.js のライブラリを使っています。
また、ノリで amp-install-serviceworker というコンポーネントを使って PWA 化もしています。PWAMP ですね。AMP as PWA ですね。
他には一応 amp-social-share というコンポーネントでソーシャル・シェア・ボタンの設置をしています。今後は外部サービスの embed 表示のコンポーネントを使ってみようかなという気分でいます。

有効な AMP ページですドヤ画像

AMP テスト結果

そんなわけで、Web パフォーマンスにはそれなりには気を遣っているつもりでおりまして、PRPL Pattern というのにも一応目配せしていたりもします。Push、Render、Pre-cache、Lazy-load の頭文字を取ったというものですが、当ブログでの対応と合わせて見ていきます。

Push / Render

これは Critical Rendering Path (ページの初期描画みたいな) の最適化するぞということのようで、外部 CSS のインライン化 ( <style></style> ) や HTTP/2 の Push 配信や、必要リソース取得の最適化・優先度付けなどが代表的なものとして挙げられますね。
当ブログではスタイルのインライン化は AMP のルールで、HTTP/2 対応は Firebase Hosting により、リソース取得最適化は Google Fonts (しかない) を Resource Hints で実現しています。

Pre-cache

Service Worker で記事リソースの先読みをしています。当ブログではハマりどころが多かったです。Workbox でハマり、Cloud Functions / Hosting での静的リソースのパス付けにハマり（これは Node.js か)。。

Lazy-load

画像だけ対応しています。しかも <amp-img> なので勝手に。markdown は対応していません。検討課題でしょうか。

その他

hrfmmymt/iiyatsu
あとはコードフォーマットに prettier 使ったり、textlint で文書校正したりしてます。他なんかやったら随時。

おわりに

特にフロントエンド側はそんな書くことないだろうと思って書き進めてみたら疲れました。同時に、検討課題もまだまだあるのが見えてきました。
最後に Lighthouse のドヤスクショでお別れしましょう。さようなら。

Lighthouse ドヤ画像

∎