A Day in the Life

このウェブサイトの実装 2022年12月版

以前このウェブサイトの実装 2020年版を書いてからしばらくたって、そろそろまたサイトに手を入れようかなと思っている(思っているだけでやらないかもしれない)ので、現状を書いてみる。

コア部分

この部分は2020年版と殆ど変わっておらず、markdown で書いたファイルを Dropbox で同期し、変更を検知したビルドサーバが Next.js で静的HTMLを作り Firebase Hosting にデプロイしている。

関連エントリー

「日記以外」の記事は、関連エントリーをページ下部に表示している。多分この記事でも表示されているはず。やり方は静的サイトジェネレータ向けに類似ドキュメントを出力する cli を作ったにある通りで、文章のTF-IDFを計算してコサイン類似度で類似記事を出すCLIを作り、それを通して Next.js からその情報を読んで build 時に組み込んでいるだけというベタな仕組み。

「日記以外」の記事は結構ちゃんと関連エントリーを表示できているが、日記では一つの話題を扱うというより、とりとめのないことをたくさん書いているので、全て一つの文章として扱ってTF-IDFの出現単語ベースで類似度を求めると相性が良くなくあまり良くない精度のため使っていない。

似てる画像がある記事

記事に写真がある場合、その写真と似ている写真を含む記事を個別記事下部に表示している。自分でこのナビゲーションは多用している、お気に入りの機能。

後述の画像アップロード時にメタデータ抽出を行っていて、その時に同時に画像特徴量を抽出(今はEfficientNetB0を使っている)してる。そのデータを使いコサイン類似度を求め、類似画像を抽出しているだけというこれまたベタな仕組み。類似画像検索の記事でやっていることとほとんど同じ。

当時は画像特徴量をよくわかってなかった(今もきちんと解っているとは全くもっていい難いが、当時よりは詳しくなったであろう)ので、とりあえず高性能かつ小さなモデルのEfficientNetB0を使った感じ。今ならどんな類似画像になると嬉しいかを考慮してモデル選びをするであろう。

類似画像記事

同じ日付の日記

Web日記システムの古くからある機能。過去の同じ日にどんな事があったのかを振り返れ、「記事」ではなく「日記」を書く場合、とても良いナビゲーションになる。コンテンツが貯まれば貯まるほど嬉しい感じ。

同じ日付日記

画像アップロード

2020年版の時ははてなフォトライフを画像アップロード先として使っていたが、はてなフォトライフの有料アップロードオプションが無くなることもあって、GCSをストレージとして使うように変更した。

GCSの特定バケットに画像ファイルを上げると、JPEG→WEBPへの変換、よく使うサイズへのリサイズ、メタデータの抽出を Cloud Function で行っていて、前述の画像特徴量抽出もここで行っている。

また「GCSの特定バケットに画像ファイルを上げる」というのが一見するとめんどくさそうだけど、GCS のバケットを windows のファイルシステムとしてマウントに書いてある方法で Windows のローカルファイルシステムとしてマウントしているので、Lightroom で写真現像して保存するだけで、シュッとサイトで使う様々な画像が作られるので便利である。

GCS上にすべてのファイルがあるので、手元に写真持ってきてなんかやりたい、というときなんかも gsutil -m rsync ... でシュッと持ってこれるので、画像関連の何かを手元でやりたいときににも便利。重い腰を挙げて仕組みを作ってよかった。

費用

大してアクセスがないサイトなので、Webサーバホスティングに使っている Firebase Hosting と画像ホスティングに使っている GCS、Cloud Function であわせて月に税込み49円(2022年11月実績)であった。

実際はビルドサーバ(他にもなんでもやってるVPSで動かしている)のコストがあるので、もうちょっとかかっているのだろうけど。


今後の実装方向ついて

今は静的ビルドで、データはファイルシステムベース(markdownのテキストとメタデータのJSON)で行っている。流石にこの方法では効率が悪くなってきたので、GraphQLなりその他RDBなり、情報に参照を貼りつつ構築できるデータベースが欲しくなってきたお年頃。ただ必須でもないのでどうするかなぁ。

また、機械学習的な要素で言うと、動的に算出できるともっといろいろなことができる(例えば自前の検索とか)ので、この辺もどうしていこうかなーと思っている。

機械学習関連に引き続き興味がある昨今なので、このWebサイトにもその辺の実験と組み合わせていろいろなことをやっていきたいお気持ちがあるので、それに適した技術選定・アーキテクチャを選んでいくのであろう。

記事の一覧 >

関連するかもエントリー

このウェブサイトの実装 2020年版
r7kamura さんや kzys さん に倣って、このウェブサイトの実装を紹介してみる。ホスティングGoogle Firebase Hosting を使って静的ファイルを配信してる。一部動的な実装に関しては、Cloud Functions for Firebase を使っている...
r7kamura さんや kzys さん に倣って、このウェブサイトの実装を紹介してみる。ホスティングGoogle Firebase Hos...
Filesystem as a service としての Dropbox と静的サイト・Google Photos の代替として考える
Dropbox は古くはローカルファイルシステムの同期から始まり、ファイル共有機能、Dropbox Paper を使ったドキュメント共有・管理、Dropbox Passwords といった 1passwords 的なものまで、様々なソリューションを提供している。ファイルシステムは...
Dropbox は古くはローカルファイルシステムの同期から始まり、ファイル共有機能、Dropbox Paper を使ったドキュメント共有・管...