AI 駆動フロントエンド（Web アプリ、ネイティブモバイルアプリ）開発ツール等最新アップデート

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://www.docswell.com/user/shosuz

元⽊さんの分類 https://x.com/ai_syacho/status/1829727270841532426

• 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 やサードパーティ ツールとの統合を容易に⾏う ことができ、効率的な開発が 可能

• https://v0.dev/

GPT Engineer https://github.com/gpt-engineer-org/gpt-engineer • • • OpenAI の GPT （Generative Pre-trained Transformer）テクノロジーを 使⽤して AI モデルを作成し、 微調整する開発者を⽀援する ために設計されたツール ユーザーが提供するプロンプトに 基づいて、コード、ドキュメント、 インフラストラクチャを⽣成すること で、開発プロセスの⼀部を⾃動化 AI 駆動型アプリケーションを迅速 に構築し、さまざまなモデルアーキ テクチャを試すのに特に役⽴つ

• https://github.com/gpt-engineer-org/gpt-engineer

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

• https://uizard.io/

Uizard でプロトタイピングしイメージをエクスポートする https://uizard.io/ • Magic（テキストプロンプトによる ⾃動⽣成） • 実画⾯イメージの取り込み • ⼿書き画⾯イメージの取り込み • その他の⽅法により画⾯遷移等 設定可能（ムービーなど） • SVG 等で画⾯毎にエクスポート

• https://uizard.io/

ネイティブモバイルアプリのモックを実装する Uizard で Magic のプロンプトを⼯夫して試⾏錯誤し SVG の画像をエクスポートする

Locofy.ai https://www.locofy.ai/ • Figma で作成した UI デザイン から React 等 のコードを⾃動 ⽣成するサービス • デザインと開発の間のギャップが 埋まり、効率的な開発が可能に • デザインの構造を読み取り、適切 なコンポーネントを⾃動⽣成 • ⼿動でコンポーネントを作成する ⼿間が省け、効率的な開発が 可能 • 最近、有償版スタート

• https://www.locofy.ai/

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

• https://atmarkit.itmedia.co.jp/ait/articles/2407/17/news067.html
• https://webtan.impress.co.jp/e/2024/07/29/47425
• https://www.figma.com/community/file/1375505114072192161/figma-ai-beta

Motiff https://motiff.com/ • • AI 版 Figma ? Figma の機能の90％を含みながら、定価は Figma の2割程度

• https://motiff.com/

.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

• https://devblogs.microsoft.com/dotnet/introducing-dotnet-smart-components/
• 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 ⼊⼒要素 • 従来のコンボボックスは、部分⽂字列の完全⼀致に基づいてのみ値を提案。 • スマートコンボボックスは、セマンティックマッチ（つまり、最も密接に関連する意味を持つオプション）を提案する ことにより、これをアップグレード • これは、探している事前定義された⽂字列を正確に知らない/覚えていないユーザーにとって、より便利

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-combobox.md

Smart Paste https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-paste.md • ユーザーのクリップボードのデータを使ってフォームに⾃動的に⼊⼒するインテリジェントなアプリ機能 • Web アプリの既存のフォームに使⽤できる

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-paste.md

Smart TextArea https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md • 従来の TextArea を AI でアップグレードしたもの • 設定とユーザーが現在⼊⼒している内容に基づき、⽂章全体への⾃動補完候補を提供

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md

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時

• https://devrel.tokyo/japan-2024/
• https://devrel.tokyo/japan-2024/sessions/93e9c618-c375-4050-8bdd-17f4e5a5e06d/

この続きは…XP 祭り 2024で︕(9/28 オンライン） https://confengine.com/conferences/xp2024/proposal/20496/ai-web 最新 AI 駆動フロントエンド開発ツールを使って Web アプリ、ネイティブモバイルアプリを開発してみよう

• https://confengine.com/conferences/xp2024/proposal/20496/ai-web

Appendix

Figma for VSCode https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension エディタを離れることなく、デザインファイルの確認、 デザイナーとの共同作業、変更の追跡、実装のスピードアップ可能 • Figma ファイルを VSCode 内で 開いて編集をすることができる拡張 機能 • この拡張機能を使⽤して、Figma ファイルからコードを⽣成することは できない • ただし、Figma ファイルから CSS スタイルをエクスポートして、React コンポーネントに適⽤できる • また、Figma ファイルからデザインの アイデアを得て、⼿動で React の コンポーネントを作成できる

• https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension

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 構成の⾏は完全に削除

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/configure-openai-backend.md

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 キーを安全に保持するサーバーが必要なため。

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/getting-started-blazor.md

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

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/getting-started-mvc-razor-pages.md