ブログリニューアルのお知らせ
アナウンスが遅くなりましたが、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に大幅アップ。(計測するたびにコロコロ変わるので恣意的な比較ではありますが)


記事表示
実は本当に速くなったのは初期描画ではありません。トップページから記事ページへの遷移です。秒数の計測は行っていませんが。 ポイントは2つ。メインコンテンツ以外を再描画せずに引き継いでいること、記事ページ表示の際にデータを取りに行っていないことです。 Firebaseはドキュメント(記事にまつわる全てのデータ)単位でしかデータを取得できないので、逆に言えばトップページを表示している段階で本文のデータは全て手元にある。 ということは、詳細ページに移動するときはそのデータを使えば良いのです。Firestoreと通信もしていません。原始的なオフラインキャッシュ。だから爆速。 別に取りに行ってもそこまで時間がかかるわけでもないのですが、それでも異次元の速さになってます。 ヘッダーやサイドバーは共通だし、CSSなどのデザインも共通だから本来メインコンテンツだけ書き換えれば良いというのは割と当たり前の話で、WordPressでもそれを実現する方法はありますが、無限にバグが生まれてしまうので現実的ではありませんでした。 Vue.jsやReact.jsというのは「そういうのを人間が管理するのは無理だからいい感じにパフォーマンス最適化してあげるよ」という技術です。それを利用したくて今回のNuxt移行をしたのですから、パフォーマンスは上がっています。PWA対応
以前からPWA対応はしていたはずなのですが、上のLighthouseで非対応判定されている通り、不完全なものでした。 その点、Nuxt.jsにはPWA Moduleというちょっとした設定だけで勝手に対応してくれる素晴らしいライブラリがあるので、これを使って完璧な対応となりました。 そして言うまでもなく、毎回ゼロから読み込んでいた旧サイトはPWAの恩恵をほぼ受けられていなかったので、ようやく正式にPWA対応できたと言えるでしょう。廃止した機能
自動ツイート
こちらは何かやり方考えるかもしれませんが、一旦廃止しました。WordPressからの更新と実際の更新にズレが生じてしまうので。ツイート自体もインプレッション見る限りだいたいの記事は2~3アクセス程度の流入しかないし、意図しないところでバズっても百害あって一利なしなので。 ちゃんと流入を狙いたい記事だけ手動でツイートします。そうでない記事も読みたいという奇特な方はブクマとかホーム画面に追加とかしてください。コメント投稿
全面的に廃止しましたー。ちゃんと励みになるコメントとか頂くこともたまにはあったので、なくしてしまって良いものか迷いましたが、技術的に難しい部分もあったので一旦諦めました。 これまでに頂いたコメントは一応表示させているので、そのうち復活させるかもしれませんが、まあ普通に精神的に辛くなることの方が多かったので優先度は低めです。すみません。今後の予定
今後やっていきたいこととしては、- プッシュ通知対応 脱WordPressを進める(前後リンク・検索・いいね・コメント)