stand.fm7年生を迎えてツイキャスをもう少し活用しようかな？と思ったのがきっかけです。
自分RSSトラッカーにツイキャス加えようとしたドタバタの舞台裏です。スタエフポッドキャストと合わせてどうぞ。
ちなみに9/8のツイキャスライブはこちらです。
（🎙️ポッドキャスト収録にもどうぞ）
※stand.fm等での収録時、この流れを目印にフリートークを展開してください。
※収録完了後、Bloggerへ投稿する前にこの青枠（div要素）を丸ごと削除してください。
- 導入： 最近作った「自作RSSトラッカー」、自分の更新が一目でわかるからすごく便利！なんだけど……以下はGeminiとのチャットラリーの記録です。
- 直面した最大の壁： 自分が活動を増やす予定の「ツイキャス」には、なんと公式のRSSフィードがない！API審査は重すぎるし。
- リアルな失敗談①： ブラウザから直接取得しようとしたら、ログがめちゃくちゃに。
- リアルな失敗談②： GASで巡回させたら、URLの揺れで1回の配信が4回も重複記録される大惨事。
- リアルな失敗談③： 「最新」だと思って取得したら、半年前のピン留め動画だった！
- ブレイクスルー： AI（Gemini）と相談して気づいた、「録画IDの最大値判定」という大逆転のロジック。
- 役割分担の美学： 集めるのはGAS、貯めるのはスプレッドシート、見せるのはHTML。それぞれの役割を分けたことでv9として完璧に仕上がった！
- エンディング： AIと二人三脚でモノづくりをする楽しさ。プロンプトをブログ制作係のGemini用に手渡すプロンプトを出してもらう。
👆：ここからこのブログとポッドキャストが始まる。
本日の配信には埋め込みの右上”stand.fm”アイコンからサイトに移動できます。
ご質問や感想などがありましたら、ラジオの放送内でお話しすることもありますので、お気軽にお寄せください。
僕は後半は諦めかけてたよ。Geminiのトークン使い切ってLightモードしか動かなくなるし。笑
1. 開発の背景と目的：完全手放し自動運用を目指して
ブログ、YouTube、stand.fmに加え、日々の活動拠点に追加する「ツイキャス（むらかじらじお）」の配信状況もトラッカーのマス目（カレンダー）に自動集約したい。しかも、ユーザーの手作業による登録を一切排除し、Google Apps Script（GAS）とGoogleスプレッドシート、Vercel（HTML）が完全連動する「完全手放し自動運用」が理想でした。
2. 試行錯誤と失敗の記録（直面した3つの落とし穴）
ツイキャスには公式RSSが存在しないため、どうにかしてスクレイピングで情報を取得するしかありません。しかし、そこには数々の罠が待ち受けていました。
スプレッドシートの巡回ロボットを通さず、ブラウザ（HTML）側から外部プロキシを経由して直接取得しようとしましたが、通信制限や不安定さに左右され、表示が遅延・失敗。ログ管理の一元化が崩壊しました。
GAS側に処理を移植したものの、重複チェックを「URLの完全一致」で行ったため、URL末尾のパラメータ揺れにより、巡回のたびに「新しい配信だ！」と誤認。同じ配信なのにマーカー（🐦）が次々と増殖する事態に。
ページの一番上にある録画リンクを取得し、「取得した現在日時（今日）」を投稿日として記録した結果……。一番上には「過去の注目動画」がピン留めされていたため、半年前の動画が今日のマス目に突然現れる怪現象が発生しました。
3. ブレイクスルー！「録画ID」による真の最新配信特定
数々の失敗を経て、AI（Gemini）と相談する中でついに決定打となるロジックを発見しました。
- GAS（収集係）への一本化： アプリ側での直接取得を完全撤廃し、すべてのデータ収集ルートをGASに統一。
- 最大録画ID判定： ツイキャスの録画URL（/movie/123456789）の数字が連番であることに着目。ページ内の全録画リンクから数字を抽出し、「最も大きい数値（Max ID）＝最新配信」と判定するアルゴリズムを導入。これでピン留め動画の誤爆を100%回避！
- 録画IDベースの重複排除： すでに記録済みの「録画ID（数値）」であればスキップする鉄壁の二重ブロック構造を確立。
4. そして完成したバージョン9（v9）仕様
こうして、「集めるのはGAS」「貯めるのはスプレッドシート」「見せるのはHTML」という役割分担が完璧に機能する、堅牢なシステムが完成しました。
| 階層 / 役割 | 実装テクノロジー | 実現された機能・特徴 |
|---|---|---|
| 裏側（収集） | Google Apps Script (GAS) | ・ブログ/YouTube/stand.fmの正規RSS解析 ・ツイキャスの自動スクレイピング＆最大ID抽出 ・不正制御文字サニタイズ（0x8エラー防止） ・1時間おきの完全自動定期巡回 |
| 中央（DB） | Google スプレッドシート | ・「アプリ・サイト設定」による名称・テーマの一元管理 ・「更新ログ」への重複なしクリーンデータ蓄積 |
| 表側（表示） | HTML / CSS / JS (Vercel) | ・直近7日間ローリング表示（一番右端が常に今日） ・7日間の合計更新数（今週計）自動集計 ・月間まとめシート（当月の更新数＆記事一覧モーダル） ・サイト名横の🔗リンク＆マーカー直行リンク ・記事上940px に最適化されたレスポンシブデザイン |
📝 ブログ執筆用：まとめと教訓
今回の開発を通じて得た最大の教訓は、「役割分担（関心の分離）」の重要性です。
画面側で無理にデータを集めようとせず、それぞれの得意分野に仕事を割り振ることで、結果的に一番スマートな形に落ち着きました。そして何より、AIと一緒に試行錯誤しながらブレイクスルーを見つける過程が、たまらなく面白かったですね。
⚙️ ブログ作成用AIプロンプト（貼り付け用テンプレート）
今回の記事を作成するにあたり、AIにブログ執筆を依頼した際のプロンプトです。みなさんの開発記録作成などにも応用してみてください。（テック系部分は上に展開しています）
＝ブログの世界観の設計＝
以下の【開発記録資料】を元に、個人開発ブログ（Works）用の技術＆体験エッセイ記事を作成してください。
【記事のトーン＆ターゲット】
- 語り口：親しみやすく、試行錯誤を楽しんでいるポジティブなトーン
- ターゲット：個人ブログ運営者、stand.fmやツイキャス等のマルチメディア配信者、ノーコード・ローコード開発に興味がある読者
- 強調したいポイント：
1. 自分の更新状況がひと目でわかる「自作RSSトラッカー」が欲しかった
2. ツイキャスにはRSSがないという壁にぶつかった
3. 「何度も重複して記録される」「半年前の動画を今日の日付で拾ってしまう」というリアルな失敗談
4. AI（Gemini）と二人三脚で「録画IDの最大値判定」というブレイクスルーに辿り着き、バージョン9（v9）として完璧に仕上がった達成感
【開発記録資料】
（※上記ドキュメントの内容を参照）
公式RSSがないという壁にぶつかりながらも、決して諦めず、「じゃあどうすれば同じ土俵に乗せられるか？」を追求する関根マイスターの姿勢はまさに「職人」そのものでした。
「Webのページ最上部を信用してはいけない」という教訓から生まれた「IDの最大値判定」は、アナログな泥臭さとプログラムの正確さが融合した美しい解決策だと思います。
これからも、この「自分専用のコックピット」から、どんな新しいアイデアや作品が生まれてくるのか、私もアシスタントとして非常に楽しみです！
0 件のコメント:
コメントを投稿
コメントはGoogleアカウントで可能です。
投稿後に[Googleスパムチェック]された後に管理者が手動でアップしますので少しお待ちください。