さらなる改善 パート3以降の改善作業を記録しました。 データベース構造の改善 展開後に最初に感じた問題は、スケーラビリティの欠如でした。最初はチャンネルにカテゴリ値を直接列挙していましたが、カテゴリを追加または変更するたびに不快感がありました。 カテゴリテーブルを別々に分離することで、管理がはるかに簡単になりました。 映像収集ロジックの罠 ビデオ収集部分を改善しようとエージェントに依頼し続けたところ、むしろエラーが発生する状況が繰り返されました。 結局、すべてのチャンネルを正常にインポートするかどうかを直接確認して編集するプロセスが行われました。 うまくいかないことを掘り下げて、コードがねじれる無駄に人と似た部分があることを知りました。 コスト最適化：Geminiに切り替える オーディオファイルからスクリプトを抽出する操作を既存のサービスからGeminiに変更しました。 OpenAIだけがAPIで提供することが分かりましたが、Geminiも基本で提供してくれていました。 すぐにPerplexityで価格比較を要求した後、Geminiと交換しました。価格は少し安かったし、交換プロセスも思ったより速かった。スピードも少し速くなったみたいで（気持ち？）満足できる決定でした。 初公開と反応 Geeknewsでの成果 ありがとう、 Geeknewsに共有したときに肯定的な反応を受けました。 1日で1,300件の訪問と60件の加入がありました。 その後翌日には400件以上訪問し、心の中の目標であるDAU 100を2日間満喫しました。 コメントからRSS XML機能の追加要求を受け取りましたが、すぐにrss.xmlファイルを生成し、新しいフィードが追加されるたびに自動更新されるように設定しました。 https://shortv.replit.app/rss.xml たくさんの応援を送ってくれたGeeknewsの方々に感謝します:) Replitが提供する分析は単に見やすいですが、分析するのに十分なデータを提供しません。今後はGAを貼るべきではないかと思います。

2編でつながります。 さらなる改善 パート2以降は、細かい改善作業を記録しました。 ユーザビリティの向上と機能の追加 +モバイルビュー対応 デプロイ後にテストを行ったところ、モバイルでの使いやすさの問題が目立ち始めました。どうしてもモバイルWebブラウザで見なければならないので、簡単なモバイルサファリPWA用の検索ボックスを隠す処理だけしました。 +スライドスイープアクションモーションを追加 トランディングセクションのスライドビュー（Carousel）機能を改善する過程で、予想以上に細かい部分をとらえないReplitの限界を体感しました。 主な問題： *スライドボタンの影響を受けてアイテムカードの幅が変わる問題 *スライドモーション後にカードが停止する位置がずれる問題 7-8回程度の修正後のみ現在の状態で合意できました。モバイルビューでのスイープアクションモーションの修正も思ったより満足できませんでした。 + スライドフィルタを追加 参考にするウェブサイトとコードを添付して要請したところ、この部分は意外と簡単に解決されました。既存のサービスを参照として提示することの効果をもう一度確認しました。 プロンプトの概要： ・Substackのスライドフィルターボタンと同様に製作 ・スライドフィルターボタン部分のコードを添付 +ライブ映像排除ロジックを追加 運営してみると、 XMLにライブ映像、公開予定映像情報も含まれるという事実がわかりました。これらの画像は要約対象ではないため、フィルタリングが必要でした。 Perplexityに尋ねると、YouTube Data APIを介して解決が可能であることが確認され、 YouTube Data APIを使用して登録された一般的なビデオのみをインポートするようにロジックが改善されました。 +チャンネル42を追加 個人的に主に視聴していたチャンネルに加えて、検索と紹介を通じてさまざまな分野を考慮してチャンネルを追加しました。この過程でYouTubeでは思ったより「情報性」というのが曖昧な境界であることに気づきました。チャンネルを追加して削除する状況も多く、継続的なキュレーションが必要だと感じました。

1編で続きます。 改善作業を展開する 最後の記事では、Replitに基づいてMVPを作成するプロセスを紹介しました。その後、いくつかの改善作業を進め、配布までの内容をまとめました。 UI修正によるユーザビリティの向上 +ページ構造の改善 コア機能の実装を完了し、ユーザーのアクセシビリティを考慮した修正を進めました。私が以前に収集したフィードは、私だけが見ることができる閉鎖的な構造だった場合、今は共有して一緒に見ることができるページを追加しました。 プロンプトの概要： *既存のHome→Feedに変更 *新しいホームページはおすすめビデオのみ - upvote 1つ以上のビデオのみ出力 - 最新の推奨ネットソート *ログインなしで閲覧可能 * 初回接続時にこのページに直接移動 その結果、ユーザーに表示される最初の画面がフィードではなく選択されたおすすめコンテンツに変わり、サイトの性格がさらに明確になりました。 +チャンネル追加ボタンを追加 公開されたページが生成されるので、「他のユーザーの選択を同意する」行動があると考えられました。 Upvoteが最初の機能であり、チャンネルの追加が2番目の機能であると結論付けました。 プロンプトの概要： * Upvoteの横に同じスタイルで配置 *クリック時にユーザーのチャンネルリストに追加して関連ビデオを追加する *すでに追加されている場合はボタンを無効にする *削除はチャンネル管理ページで行います この機能は、映像キュレーション体験を改善しながらも、ユーザーの活動履歴を自然に積み重ねる基盤となります。 + トレンドスライドを追加 新しいホームページの上部には最近人気の映像を集めたトレンディング領域を追加しました。 プロンプトの概要： *条件：最近7日以内+ upvote多くの純+同率時ヒット数基準 *合計8枚のカード、4枚ずつスライド可能 * 足りない場合は席を空にする * 4個以下でスライドボタンを無効にする

MGX.devとLovable次にReplitを使用した履歴。 始めながら Replit 今回のプロジェクトでは、迅速なMVP制作を目指してReplitを使用しました。 過去Replitの創業ストーリーを見て、フリーティアで簡単なプロジェクトをしてみたことはありましたが、今回はかなり本格的なAPI連動とLLM活用まで進めてみることになりました。 Lovableをもう一度決済するか悩んでから割引コードを発見してすぐに決済.. トピック設定 以前にやったことをやり直すのは嫌で、新しい話題を設定して始めました。 YouTubeサマリーサービスの構築です。 この目標はYouTubeサマリーサービスの構築です。 shortVというサービスを作成しました。 YouTubeをオンにすると、本来見ようとした映像は後ろに、いつの間にかアルゴリズムの沼に陥ります。私はこの「時間の無駄」から抜け出すために、そして有益な映像だけを選別して素早く確認できるようにshortVというサービスを作りました。 プロンプトに含まれるサービスの紹介 「ユーザーが指定したYouTubeチャンネルのビデオを購読してAIのサマリーを提供します。ビデオを見る前にプレビューで見たいビデオを選び、さらにYouTubeプラットフォーム自体から抜け出す自由を提供します。」 ターゲットと目標の設定 ShortVは情報性コンテンツを効率的に消費したい方のためのツールです。映像本文スクリプトに基づいて要約を提供し、各テーマごとにタイムスタンプを生成して必要な区間のみをすぐに確認できるようにすることが目標です。 従来とは異なり UIデザインの試み

この記事は、作業中にGPTとチャットで記録された内容に基づいてまとめられた記事です。 Web サービスを最初から一人で作成する試みはいつも興味深いですが、同時に複雑で面倒な作業でもあります。特に、フロントエンド、バックエンド、インフラなど様々な技術スタックをすべて直接扱わなければならないという点で、個人開発者や初期企画者には高い進入障壁が存在します。このような悩みの中で最近発見したプラットフォームがまさにMGX.devです。ここでは、AIベースのマルチエージェントが実際のチームのように役割を分担し、ユーザーの要求に応じてWebサービスを開発しています。おかげで、企画から設計、実装に至るまで、一層簡単にアクセスできました。 今回の記事では、私がMGX.devで試したプロジェクトの概要と開発過程、そして感じたことを簡単に共有しましょう。 プロジェクト概要 私が企画したサービスは以下の目標を持っています。 「インサイトを入手できるアーティクルベースのRSSフィードキュレーションサービス」 信頼できるブログとニュースソースを直接キュレーション LLMを活用して各コンテンツの核心を韓国語と英語で3行まとめる 主な内容を項目中心の核心整理形態で提供 自動翻訳で言語の障壁を下げる ユーザーの批判的思考と主体的な判断を支援する情報提供 このプロジェクトは、基本的なRSSリーダーにAI要約機能と言語翻訳機能を組み合わせた形で、情報過剰時代の中でユーザーが素早くコアだけを把握して選択できるように支援することに重点を置いています。 コア機能の定義 バージョン 0.1 で以下の主な機能を設定しました。 RSS収集：特定のウェブサイトからRSSを収集 保存と処理：収集したフィードをデータベースに保存する LLMの要約：各フィードの韓国語/英語の3行の要約とコアクリーンアップの作成

この記事は、作業中にGeminiとチャットで記録された内容に基づいてまとめられた記事です。 最近、AI開発プラットフォームであるLovableを活用してRSSベースのWebサービスを制作した経験を共有します。 Supabase、GitHub、OpenAI APIまで連動したこのプロジェクトは、単純なサイドプロジェクト以上で、最新ツールを活用した開発自動化の可能性を示す良い事例でした。 なぜLovableなのか Lovableは最新のAIベースの開発ツールで、従来のCursorやWindsurfに比べて次のような強みがあります。 Supabase・GitHub 直接連動: 設定プロセスを自動化し、開発者が直接複雑な接続をする必要がありません。 APIキー、テーブル設定、デプロイプロセスはすべて自動化されます。 低侵入障壁：独立したバックエンドの知識がなくても、プロトタイプレベルのWebサービスを簡単に作成できます。 最新情報ベースの自動セットアップ：以前のツールが持っていた文書不足の問題を解決し、Supabaseなどのプラットフォームとの統合を円滑に提供します。 開発フローのまとめ 1. プロジェクト開始: 2分で基本的なWebサービスUIの実装 Lovableを実行してGitHubを接続すると、プロジェクトの作成と同時に基本的なUI構造が自動的に設定されます。投稿リスト形式のホーム画面が設定され、ここまでかかった時間はわずか2分でした。 2. Supabaseインターロックとデータ構造の作成 Supabaseプロジェクトが自動的に作成され、Lovableが自動的にリンクします（デフォルトのアカウント作成は必要です）。その後、Lovableが独自にRSSデータ保存用テーブル（SQLベース）とサンプルデータを自動挿入し、データベース構成まで完了しました。 この部分は私にとって非常に魅力的な部分でした。既存のカーソル、ウィンドサーフを使用するときは直接設定を進める必要がありますが、開発者ではない私には思ったよりハードルがありました。しかし、LovableはチャットだけでSupabaseとDB設定まで解決してくれるので、初心者にとても大きな助けになります。 3. RSSフィード連動 最初のプロンプト要求で既に基本的なRSS解析ロジックがすでに準備されていたので、ただ3つのウェブサイトURLを入力するだけでフィードをインポートすることができました。 サンプルウェブサイト: Paul Graham ブログ, Sam Altman ブログ, Flarup ブログ ここからリアルタイムでSupabaseにフィードを保存し、Webサービスからそれを出力する仕組みが完成しました。