アナウンスが遅くなりましたが、2/14より、昨年10月末からちょくちょく匂わせていたブログのFirestore移行を正式に行いました。

　ブログのリニューアルとしては昨年4月以来。

　見た目はテーマカラー以外あまり変わっていないと思いますが、技術的には2016年8月にJUGEMからWordPressに引っ越した時に並ぶ、またはそれ以上のチャレンジングなものです。

　技術的な詳しい解説は、ブログで追って更新していきますが、とりあえず一般的なユーザー向けの説明を中心に書いていきます。

デザイン

テーマカラー・アイコン変更

　今回のリニューアルのメインはNuxt化、かつ前回のリニューアル時にBulmaフレームワークを使っていたので、正直デザインはほとんど変えることなく移行することが可能でした。

　（Bulma自体のバージョンが若干上がったのか影のつき方が変わっていますが…）

　ただ、デザインが全く変わらないのもリニューアルした感がない、というか、何がどうなったの？と言われるのも微妙なので、色を付けてみました。

　しばらく変えてみてしっくり来なかったらグレーに戻すかもしれません。

　元々2019年4月のリニューアル作業中に、とある事情で色を付ける気にすらならなくなってグレーにしたのですが、数年前はこういうグリーンを使っていたので、懐かしい方もいるかもしれません。

　ついでにアイコンも若干変えてみました。

無限スクロール

　これは意図的に行ったものというより、Firestoreにページング機能がないので仕方なくという側面が強いです。基本的に全てのURL構造をクローンしていますが、/page/2というページURLだけは対応できませんでした。

　もちろん、SNSと同じく今の主流は無限スクロールだろうという気持ちもありますし、PHPと違ってJavaScriptベースになったからこそ組み込みやすくなったことでもあります。

　ブラウザ上で「元に戻る」を行った場合に位置を記憶する処理に関しては、現在調整中です。とりあえずトップページはいい感じに動いているはず。

サイドバーとヘッダーメニューの統合

　プロフィール・カテゴリー・タグといったメニューを全てなくしました。

　冷静に考えて、ホームはすぐ隣のサイト名と被っているし、プロフィールもそんなに強調しなくて良いし……ということで全部サイドバーに移しました。

　その代わり、カテゴリーとタグはサイドバーに。使いやすくなったと思います。

　また、以前はスマートフォン版だとメニューボタンをヘッダーメニューで呼び出して、サイドバーメニューに相当するものはメインコンテンツ（記事一覧や記事本文）の下に表示されていましたが、無限スクロールとの両立もできないし、使い勝手も悪かったので、メニューに統合しました。

パフォーマンス

　大幅に改善しました！！

　これはWebに詳しくない方であっても、もう触っただけでわかる……と信じたい。

初期描画

　指標にしたのはPageSpeed Insightsのスコア。

　PC版は77から98に、スマホ版は52から83に大幅アップ。（計測するたびにコロコロ変わるので恣意的な比較ではありますが）

　もう少し詳しい結果の出るLighthouseのレポートで比べてみます。（スコアが若干変わっています）

　Speed Indexの圧倒的な改善が目立ちます。

　一番下の、経過時間に伴うコンテンツ表示の流れを見れば、何がどう良くなっているのかも何となくわかる……はず。

　具体的に何でこんなに速くなったかというと、サーバーがFirebase Hostingになった、jQueryなどWordPressならではの負債を全部捨てた、SSRではなく事前に静的サイト生成している、といった技術革新に加えて、見えている範囲の記事以外は描画しない、スマホ版ではメニューボタン押されるまでサイドバーを読み込んでいない、など、徹底的に高速化しました。

　本当はモバイル版も90点台まで上げてドヤ顔したかったのですがこれ以上上げるのも難しそうだし、自己満足の領域に入っていたので妥協しました。

　ちなみにIE11対応はしませんでした。Nuxtで勝手に対応できるかなと思っていたのですが、全然うまくいかなかったので、わざわざ時間かけてまで対応しなくていいなと。Windows 7のサポートも終わりましたしね。

記事表示

　実は本当に速くなったのは初期描画ではありません。トップページから記事ページへの遷移です。秒数の計測は行っていませんが。

　ポイントは2つ。メインコンテンツ以外を再描画せずに引き継いでいること、記事ページ表示の際にデータを取りに行っていないことです。

　Firebaseはドキュメント（記事にまつわる全てのデータ）単位でしかデータを取得できないので、逆に言えばトップページを表示している段階で本文のデータは全て手元にある。

　ということは、詳細ページに移動するときはそのデータを使えば良いのです。Firestoreと通信もしていません。原始的なオフラインキャッシュ。だから爆速。

　別に取りに行ってもそこまで時間がかかるわけでもないのですが、それでも異次元の速さになってます。

　ヘッダーやサイドバーは共通だし、CSSなどのデザインも共通だから本来メインコンテンツだけ書き換えれば良いというのは割と当たり前の話で、WordPressでもそれを実現する方法はありますが、無限にバグが生まれてしまうので現実的ではありませんでした。

　Vue.jsやReact.jsというのは「そういうのを人間が管理するのは無理だからいい感じにパフォーマンス最適化してあげるよ」という技術です。それを利用したくて今回のNuxt移行をしたのですから、パフォーマンスは上がっています。

PWA対応

　以前からPWA対応はしていたはずなのですが、上のLighthouseで非対応判定されている通り、不完全なものでした。

　その点、Nuxt.jsにはPWA Moduleというちょっとした設定だけで勝手に対応してくれる素晴らしいライブラリがあるので、これを使って完璧な対応となりました。

　そして言うまでもなく、毎回ゼロから読み込んでいた旧サイトはPWAの恩恵をほぼ受けられていなかったので、ようやく正式にPWA対応できたと言えるでしょう。

廃止した機能

自動ツイート

　こちらは何かやり方考えるかもしれませんが、一旦廃止しました。WordPressからの更新と実際の更新にズレが生じてしまうので。ツイート自体もインプレッション見る限りだいたいの記事は2~3アクセス程度の流入しかないし、意図しないところでバズっても百害あって一利なしなので。

　ちゃんと流入を狙いたい記事だけ手動でツイートします。そうでない記事も読みたいという奇特な方はブクマとかホーム画面に追加とかしてください。

コメント投稿

　全面的に廃止しましたー。ちゃんと励みになるコメントとか頂くこともたまにはあったので、なくしてしまって良いものか迷いましたが、技術的に難しい部分もあったので一旦諦めました。

　これまでに頂いたコメントは一応表示させているので、そのうち復活させるかもしれませんが、まあ普通に精神的に辛くなることの方が多かったので優先度は低めです。すみません。

今後の予定

　今後やっていきたいこととしては、

• プッシュ通知対応
• 脱WordPressを進める（前後リンク・検索・いいね・コメント）

　個人的にここ数年不満だった表示速度をようやく抜本的に改善できたので満足しています。速度は正義。

　とはいえブログのメインは記事なので、肝心のコンテンツの更新頻度も少しずつ戻していければと思っています。よろしくお願いします。