ニコニコ動画風に(すべてAIの)コメントが流れてくるWEBアプリ

他人にキーを知られないようにするため、GASプロジェクトのスクリプトプロパティに保存して必要に応じて呼び出すことにする（ハードコーディングは避けた）

メイン処理

中央に動画を表示し、時間を空けて表示内容を画像で取得、コメント指示のプロンプトと合わせてGeminiに送信する

video要素の内容を取得する専用にcanvasを追加し、画像変換させる

画面取得処理のループを別に設定することで、リクエスト時だけでなく直近数十秒分の画像を送り、コメント内容が重複しすぎないようにした

リクエスト毎のモデルは数種類からランダムで選択、急激なレート制限（応答不可状態）を避ける

API処理のタイミングでコメント内容にどうしてもタイムラグが生じてしまうので、あらかじめ再生している少し先のフレーム画像を送信することでズレを少なくした

（これにより、毎再生開始時に10秒ほど待ち時間が発生…）

コメント表示

Geminiからコメントが返って来次第、内容をspan要素に書いて画面上を流す

1秒あたりに動く距離からコメント位置(Y座標)が重なってしまう時間を逆算し、重なっていれば下へ避けさせる

応答で複数コメントを返させて、それぞれに指定されたスタイルを適応し分散表示している

※コメントについて

「＜　＞」で囲ってあるコメントはシステムメッセージ（Geminiの応答とは別）

簡単なエラー表示などを行う

※Gemini APIについて

エラー発生時に、コメントに**＜エラーコード:モデル名＞**が表示される

以下のような状態の場合は再読み込みをおすすめします

・再生操作をして15秒以上経っても再生が開始されない

・コメントが動かない

tag:GAS,生成AI