最初の投稿

こんにちは〜

雑文章置き場として新しくサイトを生やしました。 基本的には日記と、それ以外にも雑な文章が置けて、写真をペタペタ貼りたいみたいな気持ちです。

技術の話

せっかくサイトを作ったのと、技術的におもしろい取り組みをいくつかしたので、その話もしておきます。 まずサイトを作ったフレームワークですが、Astroです。 静的サイトに落ち、プレーンな(Reactのようなフレームワークではない)JavaScriptができるので、そんなに重くもないだろうという目算です。

写真は結構頑張っていて、このサイトを管理しているGitHubリポジトリのmainにpushされると、GitHub ActionsがGoogle Photosのアルバムを取得し、特定のアルバム名のアルバムに入った画像を、一括でCloudflare R2にアップロードします。 この際に、Google Photosからダウンロードしたサイズの大きいPNGファイルをwebpに非可逆圧縮して小さいサイズの画像を作成して、一緒にCloudflare R2にアップロードします。 サイト内でプレビューされる画像は、すべてこのサイズの小さいwebp画像です。 画像をクリックすれば、元の画像もみられます(誤タップ防止のため、確認メッセージが出ます)。

GoogleのログインはOAuth2を利用する必要があり、ブラウザでのログインが必要です。 ですが、OAuth2でのログイン時に指定を行うことで、refresh tokenが利用できるようになります。 これを利用すれば、ブラウザのログインができなくても、access tokenが取得できるという寸法です。

最初は画像の表示に使ってるコンポーネントに細工を仕組み、レンダー時にこれらの処理が走るようにしていましたが、アルバムから取得する形式の方が公開する画像の制御が楽なこと、開発時や手元のビルドでも毎回R2のバケットの一覧取得は走るため、デプロイ中にまとめて処理することにしました。