Power Apps 新機能「Code Apps」でReactアプリ開発！環境構築からデプロイまで完全ガイド（Azure OpenAI連携付）

Power Appsで新しく「Code Apps」というWebアプリを作れる機能がプレビューになったので、実際にアプリを作ってみた。

Code Apps（プレビュー）
事前準備
構築
1. サンプルアプリを起動する
2. Azure OpenAI（AOAI）とのチャットアプリを作ってみる。
アプリをPower Platformにアップロード
関連記事

Code Apps（プレビュー）

Code Appsは、Reactなどのコードで作成したフルコードのWebアプリをPower Platform上にホストし、Power Platformの認証・コネクタ・管理機能と統合して配布できる新しいアプリ形態。

Power Apps Component FrameworkがPower Appsのキャンバスやモデル駆動上で動く部品を作るのに対し、Code AppsはWebアプリそのものを構築できる。

公式はこちら

Power Apps code apps (Preview) documentation - Power Apps

Provides access to highlighted areas within the Power Apps code apps (Preview) documentation

今回はこのCode Appsを作り、Power Apps上で動くWebアプリを作ってみた。

事前準備

事前準備は以下の3つ。

Power Platform CLIの最新バージョンをインストール
アプリをアップロードする環境でCode Appsを有効にする
アプリをアップロードする環境のGUIDをメモ

アプリをアップロードする環境でCode Appsを有効にする

続いてPower Platform側でCode Appsを有効にする。

Power Platform管理センターから、該当の環境の[設定]を押し、

[機能]から、

[Power Apps コードアプリ]を有効にして、保存。

アプリをアップロードする環境のGUIDをメモ

最後にアプリをアップロードする環境のGUIDをメモする。

以上で事前準備は完了。

構築

サンプルアプリを起動する

最初に公式リファレンスの手順で、Microsoftが用意してくれているサンプルアプリをローカルで起動してみる。

まずはGitHubからサンプルプロジェクトをcloneする。 ※URLは記事執筆時点のものです。

git clone https://github.com/microsoft/PowerAppsCodeApps.git

続いて必要なパッケージをnpm installでインストール。

pac authコマンドでアップロードする環境への認証プロファイルを作成。ここで事前準備でメモした環境のGUIDを使用。

pac auth create --environment 【環境GUID】

以下のメッセージが出れば成功。

続いてpac code initで初期化。「Hello World」の部分はアプリ名を設定する。

pac code init --displayName '【アプリ名】'

そしたら、以下のコマンドでローカル起動。

npm run dev | pac code run

無事起動したら、localhostの3000にアクセスすると、

Webアプリが動く！

Code Appsの魅力は、Fluent UI (React) がそのまま使えること。
こうやって FluentProvider で囲むだけで、Power Apps標準のデザインテーマが適用されるから、見た目の違和感がゼロに。
// Fluent UIを活用したモダンなUI構造

return (
  <FluentProvider theme={webLightTheme}>
    <div className={styles.root}>
      <div className={styles.twoColumn}>
        {/* チャットエリアと設定エリアの2カラム構成 */}
        <Card className={styles.chatCard}>
           {/* ...チャット表示部分... */}
        </Card>
      </div>
    </div>
  </FluentProvider>
);

Azure OpenAI（AOAI）とのチャットアプリを作ってみる。

せっかくなので、サンプルアプリを改造し、チャットアプリを作ってみる。

プロジェクトの中のApp.tsxを編集し、保存。
※コードはこちら。テストは一切していません。

再度アプリを立ち上げると、こんな感じでAzure OpenAIと会話できるWebアプリが起動。SSEにも対応させたので、キャンバスではできなかったこんな感じの会話も可能。

// Azure OpenAI API呼び出しとServer-Sent Events (SSE) の処理
async function send() {
  // ... (省略) ...
  try {
    const res = await fetch(apiUrl, {
        /* ... AOAIへのリクエスト設定 ... */ 
    });

    // レスポンスをストリームで読み取る
    const reader = res.body.getReader();
    while (true) {
      const { value, done } = await reader.read();
      if (done) break;
      // ここで逐次テキストをデコードしてStateを更新
      const text = new TextDecoder().decode(value);
      // ... (パース処理) ...
    }
  } catch (e) {
    // ... 
  }
}