AI 駆動フロントエンド（Web アプリ、ネイティブモバイルアプリ）開発ツール等最新アップデート
1.1K Views
September 15, 24
スライド概要
https://aid.connpass.com/event/327682/
AI駆動開発(AI-Driven Development) 勉強会（第3回）
FPT ジャパン エグゼクティブエバンジェリスト 独立行政法人 国立印刷局 デジタル統括アドバイザー兼最高情報セキュリティアドバイザー Microsoft で13年間、テクニカルエバンジェリストとして .NET、C#、Visual Studio、Windows、iOS、Android、Microsoft Azure 等の開発者向け技術啓発活動 (DevRel) 。Dell、Accenture、Elastic、VMware 等での DevRel 後、2024年11月1日より現職で DevRel 活動を開始。NVIDIA との戦略的協業 AI GPU クラウド、Azure/AWS/GC 上の AI ＆データ関連サービスのマーケティング、プリセールス、教育、関連新規サービス開発。元内閣官房 IT 総合戦略室 政府 CIO 補佐官（兼務）、元デジタル庁 ソリューションアーキテクト（兼務）。
関連スライド
各ページのテキスト
AI 駆動フロントエンド（Web アプリ、ネイティブモバイルアプリ） 開発ツール等最新アップデート Shotaro Suzuki Principal Enterprise Architect VMware by Broadcom 2024/09/11
鈴⽊ 章太郎 X (Twitter) : @shosuz Principal Enterprise Architect VMware by Broadcom Microsoft で13年間、テクニカルエバンジェリストとして .NET、 Visual Studio、Windows、iOS、Android、Microsoft Azure 等の 開発者向け技術啓発活動を実施。その後、Dell、Accenture、 Elastic での開発者向け技術啓発活動等を経て現職。 モダン アプリケーション開発、マルチクラウド対応、アーキテクチャ策定 等を中⼼に、開発者向けに 最新技術啓発活動中。 2019年4⽉〜2021年8⽉、内閣官房 IT 総合戦略室 政府 CIO 補佐官、2021年9⽉〜2024年3⽉、 デジタル庁 プロジェク トマネージャーユニット ソリューションアーキテクトを兼務。 https://www.docswell.com/user/shosuz
元⽊さんの分類 https://x.com/ai_syacho/status/1829727270841532426
§ v0 by vercel § GPT Engineer § Uizard § Locofy.ai § Figma § .NET Smart Component
統合エンターテインメント アプリ画⾯の例 • • • • メイン画⾯ コミュニティ イベント 賭け事 • • 検索画⾯ AI アシスト ベッティング結果 推奨コンテンツ • ビデオ再⽣ ファンとの絆を深めるデジタル体験 ファンとの絆を深める • ファンのコミュニティ 選⼿とファンはチャットルームなどでつながることができる 好きな競⾺場（競⾺場、競艇場、競輪場、オートレース場） • • • トップページ • • • 登録画⾯ • パーソナライズ
React Native ➕ バックエンド API 全体のアーキテクチャ例 基盤レベルでのアジャイル開発/ 運⽤ ユーザー認証 マイクロサービス イベント管理 マイクロサービス AI 検索 マイクロサービス 基盤レベルの開発/ 運⽤⾃動化 開発⾼速化と運⽤省⼒化 及びガバナンスを提供するアプリ基盤 (アプリ基盤がCI/CDを提供) React Native カスタマイズ可能な基盤組み込みのサプライチェーン (スマホ上で実⾏) コミット 取得 テスト ビルド 脆弱性検査 構成定義 コミット デプロイ AKS (Kubernetes) on Azure
v0 by vercel https://v0.dev/ • • • ⾼速プロトタイピング: • 迅速なプロトタイピングと開発 を⽀援するプラットフォームで、 ユーザーがアイデアをすぐに 形にするためのツールやテンプ レートを提供 簡易なインターフェース: • コーディングの知識が少ない ユーザーでも利⽤できる シンプルで直感的なインター フェースが特徴 API 統合のサポート: • 様々な API やサードパーティ ツールとの統合を容易に⾏う ことができ、効率的な開発が 可能
GPT Engineer https://github.com/gpt-engineer-org/gpt-engineer • • • OpenAI の GPT （Generative Pre-trained Transformer）テクノロジーを 使⽤して AI モデルを作成し、 微調整する開発者を⽀援する ために設計されたツール ユーザーが提供するプロンプトに 基づいて、コード、ドキュメント、 インフラストラクチャを⽣成すること で、開発プロセスの⼀部を⾃動化 AI 駆動型アプリケーションを迅速 に構築し、さまざまなモデルアーキ テクチャを試すのに特に役⽴つ
Uizard https://uizard.io/ • Uizard は2018年に設⽴された デンマークの企業 • AI を使ったアプリデザインツール • プロのデザイナーでなくても、 プログラミングができなくても、 簡単に UI が作れる • • • • • • • • • • • • 基本機能 Magic (AI を使った機能) Scan Wireframe Sketch Wireframe Mode Scan Screenshot Smart Themes Attention Heatmap Text Assistant 保存ファイル形式は、SVG, PNG, JPEG, PDF の4種類 無料トライアル、有料プラン 年間プラン︓$160 Angular 対応 → new
Uizard でプロトタイピングしイメージをエクスポートする https://uizard.io/ • Magic（テキストプロンプトによる ⾃動⽣成） • 実画⾯イメージの取り込み • ⼿書き画⾯イメージの取り込み • その他の⽅法により画⾯遷移等 設定可能（ムービーなど） • SVG 等で画⾯毎にエクスポート
ネイティブモバイルアプリのモックを実装する Uizard で Magic のプロンプトを⼯夫して試⾏錯誤し SVG の画像をエクスポートする
Locofy.ai https://www.locofy.ai/ • Figma で作成した UI デザイン から React 等 のコードを⾃動 ⽣成するサービス • デザインと開発の間のギャップが 埋まり、効率的な開発が可能に • デザインの構造を読み取り、適切 なコンポーネントを⾃動⽣成 • ⼿動でコンポーネントを作成する ⼿間が省け、効率的な開発が 可能 • 最近、有償版スタート
Locofy.ai プラグイン for Figma Locofy.ai Figma プラグインを使ってソースコードを⽣成できる（ここから Locofy.ai Studio を起動）
Locofy.ai Builder - 1 Uizard、Figma、VSCode、Locofi.ai の連携により React Native / Typescript のソースコードを⽣成する
Locofy.ai Builder - 2 Uizard、Figma、VSCode、Locofi.ai Uizard、Figma、VSCode、Locofi.aiの連携により の連携によりReact ReactNative Native/ /Typescript Typescriptのソースコードを⽣成する のソースコードを⽣成する
Visual Studio Code で⽣成された Project を開く Uizard、Figma、VSCode、Locofi.ai の連携により React Native / Typescript のソースコードを⽣成する
Figma 新機能 (Thanks to 徳永くん @y_toku from Figma) デザインツールのFigma、6つの⽣成 AI 機能を追加する 「Figma AI」 を発表 https://atmarkit.itmedia.co.jp/ait/articles/2407/17/news067.html Figma が AI でさらに進化︕Web 制作はもはや完全⾃動化⽬前︖ 「Config APAC 2024」現地レポ https://webtan.impress.co.jp/e/2024/07/29/47425 • ビジュアル検索、AIを活⽤したアセット検索 • ⽂章の翻訳、要約、リライト • リアルなキャッチコピーと画像を⽣成 • 1クリックでプロトタイプを作成 • レイヤー名の⾃動変更 • テキストからデザインを⾃動⽣成 ※ https://www.figma.com/community/file/1375505114072192161/figma-ai-beta
Motiff https://motiff.com/ • • AI 版 Figma ? Figma の機能の90％を含みながら、定価は Figma の2割程度
.NET Smart Components https://devblogs.microsoft.com/dotnet/introducing-dotnet-smart-components/ • AI 搭載 UI コンポーネントのセット • UX を再設計したり、機械学習や プロンプトエンジニアリング調査、 開発に何週間も費やす必要なし • 既存の.NET アプリ UI にドロップして すばやく簡単に追加できる • ユーザーの⽣産性を⾼める、事前に 構築済みエンドツーエンド AI 機能 https://www.docswell.com/s/shosuz/ZM1MXG-2024-04-27-154837
Smart ComboBox https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-combobox.md • コンボボックスは、ユーザーが値を⼊⼒し、オートコンプリートのドロップダウンから事前定義された値を選択できる UI ⼊⼒要素 • 従来のコンボボックスは、部分⽂字列の完全⼀致に基づいてのみ値を提案。 • スマートコンボボックスは、セマンティックマッチ（つまり、最も密接に関連する意味を持つオプション）を提案する ことにより、これをアップグレード • これは、探している事前定義された⽂字列を正確に知らない/覚えていないユーザーにとって、より便利
Smart Paste https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-paste.md • ユーザーのクリップボードのデータを使ってフォームに⾃動的に⼊⼒するインテリジェントなアプリ機能 • Web アプリの既存のフォームに使⽤できる
Smart TextArea https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md • 従来の TextArea を AI でアップグレードしたもの • 設定とユーザーが現在⼊⼒している内容に基づき、⽂章全体への⾃動補完候補を提供
DevRel/Japan Conference 2024 https://devrel.tokyo/japan-2024/ https://devrel.tokyo/japan-2024/sessions/93e9c618-c375-4050-8bdd-17f4e5a5e06d/ • 場所 : DoCoMo R&D OPEN LAB ODAIBA • ⽇時 : 2024年9⽉14⽇ 10〜20時
この続きは…XP 祭り 2024で︕(9/28 オンライン） https://confengine.com/conferences/xp2024/proposal/20496/ai-web 最新 AI 駆動フロントエンド開発ツールを使って Web アプリ、ネイティブモバイルアプリを開発してみよう
Appendix
Figma for VSCode https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension エディタを離れることなく、デザインファイルの確認、 デザイナーとの共同作業、変更の追跡、実装のスピードアップ可能 • Figma ファイルを VSCode 内で 開いて編集をすることができる拡張 機能 • この拡張機能を使⽤して、Figma ファイルからコードを⽣成することは できない • ただし、Figma ファイルから CSS スタイルをエクスポートして、React コンポーネントに適⽤できる • また、Figma ファイルからデザインの アイデアを得て、⼿動で React の コンポーネントを作成できる
OpenAI バックエンドの構成
•
•
https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/configure-openai-backend.md
SmartComponents.Inference.OpenAI のパッケージをインストール
Program.cs で AddSmartComponents の呼び出しを次のように更新
builder.Services.AddSmartComponents()
.WithInferenceBackend<OpenAIInferenceBackend>();
•
API キーを構成するには appsettings.Development.json の最上位に次のようなブロックを追加
"SmartComponents": {
"ApiKey": "your key here",
"DeploymentName": "gpt-3.5-turbo",
// Required for Azure OpenAI only. If you're using OpenAI, remove the following line.
"Endpoint": "https://YOUR_ACCOUNT.openai.azure.com/"
}
•
Azure OpenAI の場合
•
•
•
•
Azure OpenAI Service をデプロイ
ApiKey、DeploymentName と使⽤するモデル (例、gpt-3.5-turbo、gpt-4など) に値を設定
Endpoint に値を設定
OpenAI の場合
•
•
ApiKey、DeploymentName と使⽤するモデル (例、gpt-3.5-turbo、gpt-4など) に値を設定
Endpoint 構成の⾏は完全に削除
Blazor スマートコンポーネントの使⽤開始 https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/getting-started-blazor.md 1. 新しい Blazor プロジェクト作成または既 存のプロジェクト (.NET 6 以降) を使⽤ 3. SmartComponents をアプリケーション に登録 dotnet new blazor Program.cs //Add services to container builder.Services.AddSmartComponents(); 2. SmartComponents.AspNetCore パッケージインストール dotnet add package --prerelease SmartComponents.AspNetCore WebAssembly プロジェクトがある場合 SmartComponents.AspNetCore.Components の NuGet パッケージをインストール 4. OpenAI バックエンドを構成 (必要な場合) 5. ページにコンポーネントを追加 ・ SmartPaste ・ SmartTextArea ・ SmartComboBox 注: スマート コンポーネントは、どのレンダリング モード (静的 SSR、サーバー、WebAssembly など) でも同様に機能するところ、ASP.NET Core サーバーが必要であるため、静的ファイル サーバーでホストされている Blazor WebAssembly スタンドアロン アプリを使⽤することはできない。これは純粋に、API キーを安全に保持するサーバーが必要なため。
MVC / Razor Pages のスマート コンポーネントの使⽤開始 https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/getting-started-mvc-razor-pages.md 1. 新しい ASP.NET Core Web アプリ プロ ジェクトを作成するか、既存のプロジェクト (.NET 6 以降) を使⽤ dotnet new mvc または dotnet new razor 2. SmartComponents.AspNetCore パッケージインストール dotnet add package --prerelease SmartComponents.AspNetCore WebAssembly プロジェクトがある場合 SmartComponents.AspNetCore.Components の NuGet パッケージをインストール 3. SmartComponents をアプリケーション に登録 1.Program.cs //Add services to container builder.Services.AddSmartComponents(); 2. ViewImports.cshtml (Pages フォルダー内) @addTagHelper *, SmartComponents.AspNetCore 4. OpenAI バックエンドを構成 (必要な場合) 5. ページにコンポーネントを追加 ・ SmartPaste ・ SmartTextArea ・ SmartComboBox