ブログカードの更新

このブログはBloggerというGoogleのサービスを利用しています。このサービスはなにか特定の情報を狙ったサービスではないので私のようにテーマを持たずに記事を載せることには便利なのですが割と機能は乏しいです。欲しい機能がなければ便利なサービスに乗り換えるというのが一般的な考え方でしょうが、エンジニアなので欲しい機能がなければ自前で作るという方向で行きます。

記事内で自分の掲載した他の記事に対してリンクを作るとリンク先の記事が紹介されるそういう機能が欲しい。ないなら作るという精神でできたのがブログカード機能です。

旧ブログカード

このカードには1枚目の画像とタイトルと本文という3つの要素があります。

処理としては

1. 自分の記事をクロールして自サイト内へのリンクを探す
2. リンク先内の記事から画像とタイトルと本文を抽出
3. カード風に描画する

この手順で処理されています。

Bloggerの設定

ブラウザで処理することから言語はJavascriptで記述されています。Bloggerは自前のスクリプトを実行できる枠を用意してくれています。問題は処理を記述したスクリプトの公開場所です。当然のことながらWebサーバが必要なのですが、GoogleのSiteサービスはここまで柔軟な提供はできない。

旧構成

そこでAzureの Azure Web App Service を利用してスクリプトを提供します。

問題点は費用を抑えるためにアプリケーションが普段はスタンバイ状態になっていることです。スクリプトはカードが必要ない記事でも読み込まれるのですが、Azure側がスタンバイ状態になっているとアプリケーションが起動するまでの時間が必要で読み込み開始までタイムラグが生じてしまう点です。

長らく気にしながらも放置していたのですが、ちょっと時間ができたこととAzureのサービスも増えたので構成を見直すことにしました。

新構成

要のスクリプト提供はAzure Static Web Appを利用します。これは最近のFEとBEが分離したWebアプリケーションの構成に合わせてあり、FE部分はAzure Front Doorを自動的に利用できます。これにより高速にスクリプトの取得が可能になります。

BE部分はAzure Functionが担当します。Azure Static Web AppはAzure Front DoorとAzure FunctionがセットになっていてAzure DevOpsやGitHubからの直接デプロイで構築します。これで要は満たすのですが、せっかくなので機能アップすることにします。

Azure Functionでサムネイル画像を生成してAzure Blob Storageに保存します。これによりブログカード用の小サイズ画像の読み込みが可能になります。

さらに記事をAzure AIで要約します。旧構成では本文を抽出して先頭部分だけを表示させていたのですが、これにより全文からの要約を表示することが可能になります。
これらの生成情報はAzure CosmosDBに保存しておき、2回目以降のアクセスはAzure CosmosDBから結果を受け取るだけにします。

新ブログカード

新構成になってできたブログカードがこちらになります。

画像はサムネイルように圧縮しているので比較すると粗さがわかりますが今までも小さく表示していたので粗さがわかるのは比較したときくらいかな。本文が要約されている点がとてもわかり易くなっていますね。

新構成は色々と駆動にお金がかかるのですが、要約部分だけは事前に金額が読みにくいです。いくつかの記事の要約をしてみたところGPT4.1モデルで3~4円かかっていました。Azure AIの課金は入出力のトークン数とモデルの種類で決まります。入出力のトークンはプロンプトに依存するのでGPT4.1を最新のGPT5.2モデルに変更しても1記事あたり3~4円というのは変わらなさそうです。後日問題がないことを確認してモデルの変更もやってみようかと思います。