ソニー Creators' Cloudチームのハッカソン ～生成AIで加速するイノベーション～

Transcript

1. ソニー Creators' Cloudチームのハッカソン ～生成AIで加速するイノベーション～ ソニー株式会社 技術センター 商品設計第4部門 プラットフォーム2部 2026年1月28日 19:00～20:00
2. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～ 登壇者情報 緒方 哲治 技術センター 商品設計第4部門 プラットフォーム2部 サービス開発担当部長 2002年にソニー(株)に入社し、カメラ組み込みエンジニアとして一眼カメラや業務用カムコーダーのUI開発に 従事。中国販売会社への2年間の赴任を経験し、顧客・ユーザーに寄り添ったソフトウェア開発を推進した。 その後、モバイル事業において、プロの映像クリエイターに特化したスマートフォン向けのカメラアプリの開発を主 導。現在はサービス領域にも取り組み、Creators‘ Cloudのプロジェクトマネージャーを担当している他、開発 部門において生成AIによるソフトウェア開発を推進している。 村山 裕哉 技術センター 商品設計第4部門 プラットフォーム2部 2018年にソニー(株)に入社。ソフトウェア開発者として、放送局向けソリューション、社内新規事業への参画 を経て、現在はコンシューマーカメラと連携するクラウド基盤の開発に従事。AWSを利用した開発、特にサー バーレスを得意領域とする。スクラムマスターを担い、自分自身やチーム全体の段取りをより良くするために研 鑽を続けている。 平松 知樹 技術センター 商品設計第4部門 プラットフォーム2部 2020年にソニー(株)に入社し、ソフトウェア開発者として、クラウド基盤を活用したコンシューマーカメラの連携 システムや、ロボティクス領域の通信最適化に関わる開発に従事。現在は、リモートカメラ制御システムの開発 や、AI技術による次世代の撮影体験の実現に取り組んでいる。
3. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～ アジェンダ • Creators’ Cloud ご紹介 • ハッカソン開催概要 • 開催までの準備 • スターターキット開発 • ご案内
4. Creators’ Cloud
5. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～
6. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～ Creators’ Cloud Web ✓ クラウドストレージ(無償/有償) ✓ カメラから直接アップロード ✓ 他社クラウドサービスへの 自動転送 ✓ ユーザーコミュニティ(Discover) Creators’ App ✓ リモコン操作 ✓ カメラからの転送 ✓ クラウドへの転送 ✓ カメラのファームウェア更新 ✓ Creators’ Cloud Webの操作
7. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～ Creators’ Cloud Web ✓ クラウドストレージ(無償/有償) ✓ カメラから直接アップロード ✓ 他社クラウドサービスへの 自動転送 ✓ ユーザーコミュニティ(Discover) Creators’ App ✓ リモコン操作 ✓ カメラからの転送 ✓ クラウドへの転送 ✓ カメラのファームウェア更新 ✓ Creators’ Cloud Webの操作 ハッカソンの対象
8. ハッカソン 開催概要
9. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～ ハッカソン概要 • クラウドにアップロードされた写真や動画を使用したカメラサービスの開発 • Creators’ Cloudのキラーフィーチャーを生み出す • 生成AIによる開発スピードを体感し、即座にプロトタイプを仕上げる • 課を超えた人の繋がりを作る テーマ 目的
10. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～ ハッカソン概要 ハッカソン ハンズオン アイデアソン 事前準備 2025年4月～ 6/25(水) 2時間 7/4(金) 1時間 7/16(水) 3時間 +プレゼン・表彰 緒方・村山・平松を含む 委員7人で開催準備 • ルール整備 • タイムテーブル作成 • 会場・備品手配 • 参加者募集 • 開発環境準備 • スターターキット開発 約20人・4チームで アイデアソンを実施 →ハッカソン開始 • 生成AI活用 • ホワイトボードの AI機能活用 ハッカソン参加者に 環境構築のレクチャー • リポジトリアクセス • スターターキット起動 (コマンド実行・認証) • VS Code上の AI Agent利用方法 チーム単位でアイデアを元に 実際に動くプロトを開発 • 開発 • 発表資料・デモ準備 • チームごとの発表 • 表彰
11. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～ ハッカソン概要 ハッカソン ハンズオン アイデアソン 事前準備 2025年4月～ 6/25(水) 2時間 7/4(金) 1時間 7/16(水) 3時間 +プレゼン・表彰 緒方・村山・平松を含む 委員7人で開催準備 • ルール整備 • タイムテーブル作成 • 会場・備品手配 • 参加者募集 • 開発環境準備 • スターターキット開発 約20人・4チームで アイデアソンを実施 →ハッカソン開始 • 生成AI活用 • ホワイトボードの AI機能活用 ハッカソン参加者に 環境構築のレクチャー • リポジトリアクセス • スターターキット起動 (コマンド実行・認証) • VS Code上の AI Agent利用方法 チーム単位でアイデアを元に 実際に動くプロトを開発 • 開発 • 発表資料・デモ準備 • チームごとの発表 • 表彰 アイデアソン・ハッカソンの提案・プロトタイプのデモは本日の発表に含まれません 今後のサービスアップデートにご期待ください 本日のテーマ
12. ハッカソン 開催までの準備
13. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～ ハッカソン実施方針（技術的な部分） • ハッカソンを通して生成AIの利用を必須とすることで、 コーディングにおけるインパクトを体験してもらう • 社内で開発しているマイクロサービス群を利用できるようにし、 プロトタイピングの高機能化と省力化を両立する • 開発の土台となるシンプルなWebページ（スターターキット） を事前に提供し、参加者が生成AIを使って機能追加するという 開発スタイルを取り、生成AIコーディングの効率と精度を向上する
14. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～ 生成AIを利用するメリット • アイデアをすぐに形にできる、実装のスピード感 • かつ、実装レベルでの誤りの少なさ • 本質的な作業（ここでは、アイデアを具現化すること）に集中できる！！ ← こういう感じで、基本的な機能を持った シンプルなWebサイトであれば すぐに構築できる（詳細後述）
15. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～ マイクロサービスアーキテクチャ • 基本的かつ共通利用可能な機能をマイクロサービスとして開発 • Creators’ Cloudなどのサービスから、API経由で機能を利用 • 実装の共通化で車輪の再発明を防ぎ、開発を効率化 ユーザー 認証 ストレージ カメラ管理 Creators’ Cloud サービスの例 他サービス 新機能 マイクロサービスの例 使いたい機能（マイクロサービス） を選んで利用 API 仕様書
16. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～ Production環境 クラウド砂場環境 • クラウド上での開発において、Dev/Staging/Productionといった環境分けは必須 • マイクロサービスはクラウドの各環境にデプロイされる（一部サービスも） • 弊社では、上記とは別に、組織内の誰でも自由にお試しできるクラウド砂場環境を用意 • ハッカソンでは、砂場環境のマイクロサービスを使用 ユーザー 認証 ストレージ カメラ管理 Creators’ Cloud Sandbox環境 ユーザー 認証 ストレージ カメラ管理 ハッカソンで開発する 新機能Webページ （スターターキット拡張） リソースや権限を環境ごとに独立して管理 ※デプロイせずローカルマシンで実行
17. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～ 砂場環境の準備 1. 砂場環境の構築：社内で既に専用チームがあり、砂場環境は構築済み 2. 砂場環境のアップデート依頼：最新の本番環境相当にあわせたい 1. 砂場環境管理チームへの連絡：ハッカソンで使う旨と時期を伝達 2. 管理チームの担当者から、各マイクロサービスの担当チームに対し、 砂場環境のアップデートを依頼 砂場環境を既に利用できる状態だったため、 ハッカソン準備時にあたらしく環境を構築する手間が削減された
18. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～ その他の準備 • 主催側で行った準備 • チームごとのGitHubリポジトリ作成 • チームごとのCreators’ Cloudテストアカウント作成 • スターターキットinitial commit • 参加者にお願いした事前準備 • VS CodeやGit等のインストール • 社内GitHubアカウント登録 • 生成AIの利用申請 • リポジトリ確認 • テストアカウント確認 • 事前ハンズオン（任意参加） • 上記の事前準備や、後述するスターターキットの立ち上げ、生成AIによる機能拡張な ど、当日実施する内容を事前に説明
19. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～ 備えよ常に 事前準備をきちんと行ったことで、ハッカソン当日まで滞りなく進めることができました 次以降のスライドでは、ハッカソンでの開発の土台となるシンプルなWebページ 「スターターキット」について詳しく紹介します
20. ハッカソン スターターキット開発
21. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～ スターターキットの狙い 狙い：ハッカソン参加者がアイデア創出や機能開発に集中できる土台を準備する 作成したスターターキットの画面 事前に想定されたハッカソンの課題 ① 環境構築や共通部分の開発に時間がかかる → スターターキットと環境構築手順を事前配布 ② AI Agent による開発経験のない参加者もいる（後述） ③ AI Agent による共同開発が難しい（後述）
22. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～ スターターキットの概要 作成したWebアプリの動作 ② 画像一覧表示: クラウドストレージ内の画像をグリッド表示 ③ 画像詳細表示: 拡大表示と詳細情報（タイトル、作成日） ① 簡易サインイン機能: アクセストークンによる認証 参加者が自由に拡張して ハッカソン成果物を作成 開発構成・技術スタック • フロントエンド：Vite + React + TypeScript UIの構築 • パッケージ管理：npm 依存関係の管理と開発・ビルドスクリプト • クラウドストレージ：API 経由 クラウドストレージに保存された画像データの取得・表示 React コンポーネント クラウドストレージ (マイクロサービス) 画像取得 API呼び出し 画像＋画像情報 ・アクセストークンの入力画面(サインイン画面) ・取得画像のギャラリー表示 ストレージ
23. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～ 開発の流れ ① GitHub Copilot Agent への壁打ちで 「何を作るか」 を具体化 (10分程度) ② GitHub Copilot Agent への壁打ちで 「どう作るか」 の手順書を作成 (1時間程度) ③ 作成した手順書の内容を GitHub Copilot Agent で段階実行 (30分程度) スターターキットの開発：AI Agentによる開発 Agentで開発するためのプロンプト ハッカソンの開発開始を助けられるスターターキットを作りたい。・・・ 仕様やアーキテクチャを記載した README 空のプロジェクト READMEの仕様を元にAgentで開発するためのプロンプトを作成して。・・・ 仕様やアーキテクチャを記載した README プロンプトを読んでStep1から実行して。・・・ プロジェクトの完成品 Agentで開発するためのプロンプト スターターキット自体を仕様駆動開発のアプローチで開発
24. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～ 要件を伝える 仕様や設計をドキュメント化 レビューを行う 仕様を指針として実装する スターターキットの開発：AI Agentによる開発 スターターキット自体を仕様駆動開発のアプローチで開発 AI Agent 開発で有効とされる進め方 仕様駆動開発 (Spec-Driven Development)：期待動作を明文化してから作る AIの判断のブレを抑制できるため、品質・一貫性が比較的高くなる 仕様がドキュメントとして残るためチーム開発などに利用できる 仕様駆動開発を取り入れているツール例 • AWS Kiro (2025.7 プレビュー発表, 2025.11 一般提供)：仕様駆動開発を標準としたAI IDE • Spec Kit (2025.9 公開)：GitHub提供のOSS, 主要AIツール横断で使える仕様駆動開発ツールキット
25. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～ 開発の流れ ① GitHub Copilot Agent への壁打ちで 「何を作るか」 を具体化 (10分程度) ② GitHub Copilot Agent への壁打ちで 「どう作るか」 の手順書を作成 (1時間程度) ③ 作成した手順書の内容を GitHub Copilot Agent で段階実行 (30分程度) スターターキットの開発：AI Agentによる開発 Agentで開発するためのプロンプト ハッカソンの開発開始を助けられるスターターキットを作りたい。・・・ 仕様やアーキテクチャを記載した README 空のプロジェクト READMEの仕様を元にAgentで開発するためのプロンプトを作成して。・・・ 仕様やアーキテクチャを記載した README プロンプトを読んでStep1から実行して。・・・ プロジェクトの完成品 Agentで開発するためのプロンプト スターターキット自体を仕様駆動開発のアプローチで開発
26. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～ 開発の流れ ① GitHub Copilot Agent への壁打ちで 「何を作るか」 を具体化 (10分程度) ② GitHub Copilot Agent への壁打ちで 「どう作るか」 の手順書を作成 (1時間程度) ③ 作成した手順書の内容を GitHub Copilot Agent で段階実行 (30分程度) スターターキットの開発：AI Agentによる開発 Agentで開発するためのプロンプト ハッカソンの開発開始を助けられるスターターキットを作りたい。・・・ 仕様やアーキテクチャを記載した README 空のプロジェクト READMEの仕様を元にAgentで開発するためのプロンプトを作成して。・・・ 仕様やアーキテクチャを記載した README プロンプトを読んでStep1から実行して。・・・ プロジェクトの完成品 Agentで開発するためのプロンプト スターターキット自体を仕様駆動開発のアプローチで開発
27. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～ スターターキットの開発：作成した手順書 ② GitHub Copilot Agent への壁打ちで 「どう作るか」 の手順書を作成 (1時間程度) 手順書の概要 Step1: Vite プロジェクトの作成と起動 → Vite + React + TypeScript の環境構築と開発サーバー起動の自動化 Step2: 画面構成の実装 (次ページで実際のプロンプトを紹介) → 画像グリッド表示、モーダル詳細表示、認証UI構築の一括実装 Step3: API 連携・モック認証の実装 → クラウドストレージとの連携とアクセストークン認証の統合 Step4: コードとスタイルの整理・仕上げ → ESLint対応、CSSモジュール適用、UIレイアウト最適化 Agentで開発するためのプロンプト READMEの仕様を元にAgentで開発するためのプロンプトを作成して。・・・ 仕様やアーキテクチャを記載した README
28. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～ スターターキットの開発：作成した手順書 ② GitHub Copilot Agent への壁打ちで 「どう作るか」 の手順書を作成 (1時間程度) 手順書の概要 Step1: Vite プロジェクトの作成と起動 → Vite + React + TypeScript の環境構築と開発サーバー起動の自動化 Step2: 画面構成の実装 (次ページで実際のプロンプトを紹介) → 画像グリッド表示、モーダル詳細表示、認証UI構築の一括実装 Step3: API 連携・モック認証の実装 → クラウドストレージとの連携とアクセストークン認証の統合 Step4: コードとスタイルの整理・仕上げ → ESLint対応、CSSモジュール適用、UIレイアウト最適化 Agentで開発するためのプロンプト READMEの仕様を元にAgentで開発するためのプロンプトを作成して。・・・ 仕様やアーキテクチャを記載した README
29. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～ スターターキットの開発：作成した手順書 次に、アプリケーションの基本的な画面構成を実装します。まずはメイン画面のみを作成し、以下の要素を含めます： メイン画面にはモックデータを使用して写真一覧を表示し、ユーザーが写真をクリックすると、拡大表示と詳細情報が確認できるビューアーを表示します。 ヘッダーにサインインボタンを配置し、クリックするとダミーのサインインページに遷移するようにします。 #### ディレクトリ構成例 ```plaintext app/ ├── public/ # 静的ファイル配置ディレクトリ ├── src/ │ ├── api/ # API クライアントや通信処理 │ ├── assets/ # アイコンや画像などの静的アセット │ ├── components/ │ │ ├── auth/ # 認証関連のコンポーネント │ │ ├── gallery/ # 画像表示に関するコンポーネント │ │ └── ui/ # 共通 UI コンポーネント（ヘッダーなど） │ ├── pages/ # 各ページ（画面）のコンポーネント │ ├── types/ # 型定義 │ └── utils/ # 共通ユーティリティ関数 ├── App.tsx # アプリケーションのルートコンポーネント ├── main.tsx # エントリーポイント └── 各種設定ファイル # ESLint, TypeScript, Vite 等の設定 ``` #### 各ファイルの役割 - `./app/src/components/ui/Header.tsx` - ヘッダーコンポーネント - サインイン/サインアウトボタンを表示し、認証状態に応じて切り替え Step2: 画面構成の実装 実際のプロンプトの一部抜粋 ステップの概略 具体的なディレクトリ構成 具体的なファイルの役割 GitHub Copilot Agent により具体化した手順書を作成
30. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～ スターターキットの事前配布 手順書も同梱することで、 AI Agent での開発未経験者でも簡単に実行を試し、AI Agent 実行のイメージをつかめる 事前に想定されたハッカソンの課題 ① 環境構築や共通部分の開発に時間がかかる → 環境構築手順とスターターキットを事前配布 ② AI Agent による開発経験のない参加者もいる → スターターキットの作成の手順書を同梱 ③ AI Agent による共同開発が難しい（次ページ） [必須] 環境構築 (10分程度) 完成したコード 起動可能なコード (即時実行) [任意]手順書の実行 (30分程度) 事前作業：手順書を実行する場合（計40分程度） 事前作業：最短でスタートする場合（計10分程度） [必須] 環境構築 (10分程度) 当日：機能開発開始 ハ ン ズ オ ン 会 任意参加でスターターキットを使った開発 のハンズオン会をオンライン開催
31. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～ 共同開発を支える仕組み：Memory Bank の活用 事前に想定されたハッカソンの課題 ① 環境構築や共通部分の開発に時間がかかる → スターターキットと環境構築手順を事前配布 ② AI Agent による開発経験のない参加者もいる → スターターキットの作成の手順書を同梱 ③ AI Agent による共同開発が難しい → Memory Bank の活用による引継ぎの仕組み化 課題 AI Agent はセッション間でコンテキストを保持できない → メンバー毎に作業する場合にコンテキストを引き継いで実行したい 対策 Cline Memory Bank の導入 • VS Code で動作する AI Agent 「Cline」で使われる手法 • AI Agent の「記憶喪失」問題を解決するドキュメント手法 参考: Cline Memory Bank | https://docs.cline.bot/prompting/cline-memory-bank
32. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～ 共同開発を支える仕組み：Memory Bank の活用 Cline Memory Bank とは VS Code で動作する AI Agent 「Cline」で使われる手法 AI Agent はセッション間でメモリがリセットされるが、プロジェクト知識をファイルに永続化し毎回読み込むことでコンテキストを維持する 参考: Cline Memory Bank | https://docs.cline.bot/prompting/cline-memory-bank memory-bank/ ├─ projectbrief.md （プロジェクト概要） ├─ productContext.md （目的と問題） ├─ systemPatterns.md （アーキテクチャ） ├─ techContext.md （技術スタック） ├─ activeContext.md （現在の作業） └─ progress.md （進捗状況） プロジェクト知識を Markdown ファイルに構造化する AI Agent ツールのインストラクションに動作を指示することで利用する 主なルール • 開始時に全ファイル読込 • "update memory bank" で更新 ツール非依存で様々な AI Agent で利用可能 「Cline」で利用する → .clinerules に記載 「GitHub Copilot Agent」で利用する → copilot-instructions.md に記載
33. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～ 共同開発を支える仕組み：Memory Bank の活用 (補足) awesome-copilot 版 Memory Bank awesome-copilot とは GitHub 公式の Copilot のカスタマイズ集 agents / prompts / instructions / skills / collections などを提供 現在は awesome-copilot でも 拡張された Memory Bank のインストラクションが提供されているため、こちらも利用可能 参考: Awesome GitHub Copilot Customizations | https://github.com/github/awesome-copilot memory-bank/ ├─ projectbrief.md ├─ productContext.md ├─ systemPatterns.md ├─ techContext.md ├─ activeContext.md ├─ progress.md └─ tasks/ ★追加で拡張 ├─ _index.md └─ TASK001-xxx.md awesome-copilot 版 Memory Bank のファイル構成
34. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～ 共同開発を支える仕組み：Memory Bank の活用 スターターキットでの Cline Memory Bank の利用 スターターキット初期状態で更新を行った Cline Memory Bank を同梱して配布 Aさん：変更作業 → “ update memory bank ” → git commit & git push Bさん ：git pull → “ update memory bank ” → AI Agent がコンテキストを引き継ぎ → 継続開発 ハッカソンでの利用イメージ
35. ソニー Creators‘ Cloudチームのハッカソン ～生成AIで加速するイノベーション～ 各チームでの活用事例 観測された開発パターン パターンA：並列実行型 各メンバーが並列でプロンプトを打って AI Agent を実行し、より良い成果を残していく 引継ぎの回数が多くなる パターンB：モブプログラミング型 一人がプロンプトを入力し、チーム全員で成果物を見ながら進める チーム人数のメリットを活かしきれない可能性がある 次回以降に向けて パターンA：Memory Bank だけでなく、より効率的にコンテキストを共有する仕組みがあればさらに効果的な並列開発ができる パターンB：AI Agent によりそもそも人数が少なくても開発が可能になるため、チーム人数を減らしても良さそう パターンC：将来的にはマルチエージェントによる自動連携にも期待 パターンC：分業型 あらかじめ開発するものの担当を分け、それぞれが独立して開発して結合する 事前の設計や結合に多くの時間が必要
36. 質疑応答