周回遅れでAI駆動(Claude)に乗り出して、自社サービスを5年ぶりに全面リニューアルしたので、ついでに新規でサービス開発の開発をしようと4月から動き出し、1か月かけて色々調べながら新規サービス「KAMSK(カモシカ)」を公開しました。
開発のキッカケ
音楽制作を新しく始めた知人との会話で、YOUTUBEで音楽を公開したいがどうすればいいか？とゆう話になり、「MVよりも手軽に公開したい」との事で「リリックビデオ」を作ってみようと、Aftereffectなどをいじりましたが、なんせアプリが重い。色々手間が多い。
スマホで簡単編集！系のアプリも正直、目の悪い(老眼)が出てきてる自分にはツライ。
そして、このAI脆弱性攻撃時代に下手にアプリを入れたくない。
動画生成AIで字幕をつける系のサービスは、過剰な装飾で「そこまで求めてない」となり、CC（クローズドキャプション)字幕作成系サービスは、なんか古い。
「とりあえず歌詞を出せば良いなら、WEB作ったほうが早いんじゃね？」となり、それなら流行りのAI開発だ！と開発を始めました。
まずやった事
自分が動画制作として利用するのを前提として、最終的に何が欲しいのか、逆算しながら、簡単なモックからつくりました。
この初期開発は、「AI開発の勘所を感じて学ぼう」と、以下の考えもと、あえて面倒な方法を取っています。
- 簡単なプロンプトでどこまでAIが生成するのか
- 生成されたコードでどこまで実働するのか
- どこを失敗しやすいのか
- どうすれば要求を通しやすくなるか
最初の要求：「音楽に合わせて歌詞が出る」
「音声ファイルをドロップしたら、再生できてSpaceでタイムラインを記録してファイルとして保存したい」
「音楽に合わせて歌詞が出る」とゆうことは、Timestampの一覧が作りたいので、VanillaJS/HTML/CSSの簡単なモックをAIで生成し、出来上がったのがこちら。
うん。そうだね。言い訳としては、2026年4月中旬時点のClaudeで、Claude.mdもDesign.mdも自身が理解してない。
「ファイルをドロップして、タイムラインを記録し、ファイルにする」とゆう要件は満たしている。
そして、手元にDLしたファイルに、テキストエディタで歌詞テキストをコピペしたが、実際にどのタイミングで表示されるのか視覚的にみたいので、次の機能を作ってもらう。
「ローカルに存在する.strファイルを読み込んで、MP3を再生時のTimestampと一致する場合に表示して」
うん。まぁそうだよね。
この辺りで、要件をちゃんとまとめてからじゃないと駄目だなと気がついてはいるが、ここまで10分もかかってないので、そのまま続ける事にする。
実際にこのページで再生した所、Timestampと表示はずれ、コピペした歌詞が間違えていたりして、調整が必要になる。
テキストエディタで歌詞を入力するのは手間なので、Timestampの調整と歌詞をAPP上で入力するように要求する。
「Timestampを調整できるようにして。テキストはコピペはまとめてtextareaに追加したら、一行ごとに.strに追加して。.str毎回ドロップするのは面倒なのでLocalStorageにいれて」
生成されたのがこちら。
ここまで15分程度。
この時点で、タイムスタンプ(.str)の生成仕様としては以下が必要とわかる。
- 音声ファイルはDrop(orクリックで開く)機能
- .srtのimport/export機能
- .mp3と.strを元にフォントを描写
- テキストはtextareaに複数行をコピペ、もしくは手入力機能
- テキスト1行 = 1タイムスタンプ機能
- タイムスタンプをキーで登録機能
- タイムスタンプの修正機能
- LocalStorageにデータ保存機能
次に、表示にエフェクトをかけるために、先ほど生成している「歌詞の表示ページ」を元に、簡単なエフェクトを変更出来るページを生成。見栄えを良くするためにStyleを設定できるようにする。
「フェード・スライド・グリッジ・タイプライターなど、CSSでできそうなエフェクトをフォントに追加出来るようにする。フォントの選択やサイズ調整。カラーを任意で設定出来るようにする。」
撮影し忘れましたが、settingsにパラメータのUI群が入ってます。
この時点で、表示の仕様として以下が必要とわかる。
- エフェクトテンプレート一覧
- styleの調整
- 再生等のコントロールパネル
- 演奏・VJ動画に合成する時のクロマーキー設定
- 出力用の全画面表示
実際の楽曲と先に用意した動画と合成して、とりあえずのリリックビデオを作成できました。
ここまでのモック作成で30分程。
そこから、仕事で時間が取れないうちにAIが一気に活性化して、仕様やデザインを固めて最終的に1週間でこうなりました。
機能を一つにまとめてWEBアプリにする
やったこと：
- モックで気がついた要件定義を元に、ChatGTP images2.0にアプリデザインを作ってもらう
- 取捨選択して、デザインの枠だけ手作業でCSSを作る = Claudeが全然違うアプローチに寄るのを防ぐ
- 分離出来る機能と連携機能をわける
- メインの機能とoptional機能をまとめる
- 希望するUseCaseの動作方法を、ヘルプページとして作成し、沿ってE2Eテストを作ってもらう
- モックで作った機能を参考にするように指示 = 独自解釈しないようにする
- 免責系の文言を追加する
- ホスティングに上げる
機能自体は、モックで作った機能をブラッシュアップした形ですが、遠慮なく「こうしたい・ああしたい」を追加できるのが凄いですね。
次にやること
本来だと、リーガルチェックやセキュリティやら認証やらいっぱいあるでしょうが、このアプリはブラウザベースの半ローカルアプリなので、あまり気にすることがないです。
それより、苦手分野のマーケティングが必須のようなので、自分のできる限りでやってみますが、なんせ5年ぶりぐらいなので、浦島太郎にです。完全に手探り。
- OGP画像やいい感じの画像チャッピーに作ってもらう
- このページのような開発日記
- 実際利用して使用動画をYOUTUBEやtiktok
- Xで宣伝する
(他に、なにが主流なんですか。ヒントをください！AI様と聞いてみましたが、あまり有効な手段がわからなかった)
最後に
完全AI駆動と言いつつ、エラーはいっぱい吐くし、AI的に効率的だろうけどメモリに優しくない書き方したり、古臭いコード描くので直したり、人間が使うことを意識は出来ないなーと思ったり、仕様と違う方向に解釈したり（これは私の書き方が悪いので反省)、勝手にcommitしたりと、手はかかるがとりあえず欲しいモノを作るのには良い。
サーバーレス・ホスティングのみの開発は、より簡単なった事で、「専門アプリやAIでTOKENを消費するほどじゃないことはユーザーの手に委ねる」最近の言葉では「民主化」ってやつですか？
宣伝
とゆうことで、公開したWEBアプリ「KAMSK(カモシカ)」です。
AIで始めて利用して作ったゲーム
AI時代にもう不要だろうと感じますが、8年ぐらい前に作った「スライド用に画像を結合」するWEBアプリ（供養のつもりで)
また、自社で運営・開発６年目！リミートライブをよろしくお願いします。