はじめに
現在、お試しさせてもらっている「Skywork」にはまっています。
前回、これはすごいな！と思った 定期タスク+ポッドキャスト の組み合わせで「自分専用AIニュース配信をしてもらう」仕組みを作ってみました。
実はこれ今でも続けています。
もしお時間あれば面白いのでぜひ聞いてみてください！
今日のAIニュース(ポッドキャスト)
AIニュースを聴くことで間接的に知見が増え仕事の幅も広がります。ただし本来は、エンジニアとしてもっと開発に関する直接的なことにも取り組んでみたいと思っていました。
そこで今回は、Skyworkを使ってVibe Coding（バイブコーディング）でアプリを作ってみたいと思います！
Vibe Coding の一文定義
要件をがちがちに決めず、対話しながら“雰囲気”で仕様を固めつつ最短で可視化に到達する進め方。プロトタイピングや要件探索に向くが、再現性と検証は別工程で担保する前提。
完成したアプリ
まずは、Skywork に作ってもらった『日本出入国者数マップ』（2020年限定）がこちらです。試行錯誤がありましたが、デバッグ込みで2～3時間ほどで完成しました。
↓↓ 実際に操作できます ↓↓
お詫び
今回は表やグラフの表示までの簡易検証のみで、データやコードなどの精査まではしていません。おかしなところがあっても見逃してやってください。（そもそも利用するデータが限定的です）
アプリケーション仕様
e-Stat（政府統計の総合窓口）のデータを使用した、都道府県別出入国者数のインタラクティブ可視化アプリです。
【技術スタック】
- Python 3.8+
- Streamlit：Webアプリケーションフレームワーク
- Plotly：インタラクティブな地図可視化
- Pandas：データ処理・分析
- NumPy：数値計算
※詳細は以下のGitHubにおいています。
作成手順
今回のアプリ作成の流れを簡単にまとめました。実は今回、完全に無計画で何を作るか決めずに始めています。Skyworkと対話形式で、できることを聞きながら進めました。
1. 開発言語を決める
まずは「どんな言語で何を作るか？」です。（そこから！？という感じですが...そこからでした（笑））
私はメイン開発が「C#」なので迷ったのですが、公開も簡単にできる 「Python+Streamlit」 でいくことにしました。技術選定などについても、Skyworkと相談しながら決めています。
2. どんなアプリを作るかを決める
仕事に関連する画像処理系も考えたのですが、データを扱ったアプリの方が広く流用できそうだと考えて、無料で使えるデータをSkyworkに提案してもらいました。
Skyworkの回答
e-Stat が気になったので、どんなことができるか聞いてみました。
Skyworkの回答
e-Stat は使ったことがなく、面白そうです。これに決めました！
3. データを取得する方法を確認する
e-Stat APIを利用するには申請が必要か、時間がかかるのか確認しました。
Skyworkの回答
少し情報が違いましたが、e-Statは「登録→API機能（アプリケーションID発行）」で即座に発行されました。自力で確認したので少しの時間を要しましたが、無事にアプリケーションIDを取得できました。（詳細は割愛）
4. いざ開発です！
開発に入ります。事前にGitHubのファイル構成をSkyworkに決めてもらっています。
Skyworkの回答
4.1 セキュリティ対策はOK
e-Statのアプリケーション認証情報（API-ID）の管理について、Streamlitのシークレット機能を紹介してくれました。
Skyworkの回答
4.2 全ファイルが生成される
Skyworkはプロジェクトの全ファイルを生成してくれます。
（Skywork内で保管され、ダウンロード可能）
Readmeも書いてもらいました。
4.3 しかし...動きません
Streamlitで表示してみます！
エラーが発生しましたが、エラー画像やStreamlitのログを添付したりして解決してくれました。
Pythonのバージョンに問題があったり...
Skyworkの回答
文字コードに問題があったり...
Skyworkの回答
一度だけ、正常に処理は終了しているのにエラーになることがありました。
この解決はなかなかできなかったので、直接コードを確認してこちらからヒントを与えました。
それは“正しく成功しているのに、メッセージだけをエラーとして表示してしまっている”パターンです。e-Stat の RESULT.ERROR_MSG は、成功時でも「正常に終了しました。」と返ってきます。エラー判定は STATUS が "0" かどうかだけで行ってください。
Skyworkの回答
すぐに修正してくれてOKになりました。
この辺の単純ミスは、コードを見ればすぐわかるところなのですが、新人さんだったりコードを一切確認せずに開発したい場合などには逆に時間ロスしてしまうかもしれません..
プロンプトの工夫や、Skyworkのコーディング能力の向上が必要になりそうかなと感じたとろこでした。
4.4 無事完成！
複数のエラーに直面しましたが、その度にSkyworkが粘り強く対応してくれました。エラーメッセージを共有すると、原因をすぐに特定してくれて、修正案を提示してくれる。このサイクルが本当に早い。無事にアプリが動作するようになりました。
初めてのe-Stat API、完全に無計画なスタートでしたが、2～3時間でここまで完成したのは驚きです。Skyworkがいなかったら、少なくとも倍以上の時間はかかっていたと思います。
今回消費したクレジット
このアプリ作成にあたって消費したクレジットです。
アプリ仕様の相談からデータソースの選定まで、様々なことを相談していたので、正直ともっとクレジットを消費するかと思っていました。
参考までに、登録後1ヶ月間は毎日500クレジットが付与されるので、6日分貯めておけば無料で試せるということですね。かなりお手軽です！
Skyworkでvibe codingした感想
私が普段、開発でメインに使っているAIはClaudです。補助的にChatGPTを使用しています。すでに自分用に磨き上げているので、完全な比較は難しいかもしれませんが...
Skyworkの最大の強みは、プロジェクト全体を一貫して管理できる点だと感じました。Claudeは単発の相談には最高ですが、複数ファイルにまたがるプロジェクトをゼロから構築する場合、ファイル間の整合性を手動で管理する必要があります。
一方、Skyworkはプロジェクト内のすべてのファイルを把握していて、修正が必要な箇所を自動的に連鎖させてくれます。さらに、ClaudeやChatGPTは修正個所を部分的に抜き出して提示することが多いのですが、Skyworkは一部の変更でもファイル単位で完全に出力してくれるため、更新ミスも減らせます。
まだまだ、使い慣れないツールでの開発でしたが、短時間でe-Stat API、マップなど利用できたので純粋に面白かったです。
まとめ
Skyworkといえば、文書・スライド・音声などに強力という認識が強いかもしれません。しかし、コーディング領域でも想像以上に活躍できるツールだなと実感しました。
特に「複数ファイルから構成される小～中規模アプリの迅速な開発」という場面では、今後は強力な選択肢になってくるかもしれません。
多少のコーディングミスの課題はありましたが、今後のアップデートにも期待しつつ..プロトタイピングから検証段階までを素早く進めたい場合、有効なツールとなりそうな予感もしています。
デモ & ソースコード
- デモ（Streamlit）: 日本出入国者数マップ
- ソースコード（GitHub）: japan-population-animation-map