AIネイティブ開発の流れ
モバイルプロジェクトでは、はじめに smartlime を導入して iAP にログインできることを確かめ、その上に画面や機能を積み上げていきます。
基本フロー
各手順でエージェントに指示できる内容の詳細は、スキルセットを参照してください。
- モバイルプロジェクトを作成して、配備した資材をコミットする
- エージェントを起動する(Claude Code は
claude、Codex はcodex) - エージェントに smartlime の導入を指示する
- パッケージの追加、URL scheme の設定、接続情報の読み込み、
Smartlimeの配置が行われる - iAP 側に登録する OAuth クライアントの値が提示される
- パッケージの追加、URL scheme の設定、接続情報の読み込み、
- iAP 側に OAuth クライアントを登録する
- 接続情報を
.env.localに設定する - 開発ビルドでアプリを起動し、iAP にログインできることを確認する
- 作りたい画面や機能をエージェントに指示する
- ログイン画面、iAP のデータの一覧・詳細、iAP の画面の表示など
- エージェントが lint・型チェック・テストを実行し、成果物が
src/配下に保存される - アプリで動作を確認し、不具合があった場合はエージェントに修正を依頼する
- 完成したら、EAS でアプリをビルドして配布する
エージェントに作業を依頼中、エージェント側から以下のような操作の許可が求められることがあります。 許可を求められた際は、プロジェクト配下の操作であることを確認して、許可操作を行ってください。
- ファイルの保存
- パッケージの追加(
npx expo install) - lint・型チェック・テストの実行
1 回の依頼で多くの画面を作らせるより、画面や機能ごとに依頼し、動作を確認してから次に進むほうが手戻りが少なくなります。 iAP のプロジェクトと共通の工夫は、AIネイティブ開発の流れ の 精度を上げるために を参照してください。
smartlime の導入
エージェントに次のように依頼します。
smartlime を導入して、iAP にログインできるようにしてください。
アプリの URL scheme は com.example.myapp にしてください。
URL scheme は、iAP のログイン画面からアプリに戻るためのアドレス(リダイレクト URI)に使われます。他のアプリと重ならない名前を指定してください。
OAuth クライアントの登録
iAP にアプリを OAuth クライアントとして登録します。smartlime の導入後にエージェントが提示する値を使ってください。主な値は次のとおりです。
| 項目 | 値 |
|---|---|
| クライアント ID / クライアントシークレット | 任意の値。アプリの接続情報と同じ値にする |
認可種別(authorized-grant-type) | authorization_code |
リダイレクト URI(redirect-uri) | <URL scheme>://redirect(例: com.example.myapp://redirect) |
PKCE(code-challenge) | S256 |
| スコープ | アプリが使うスコープ(例: smacolow, menu, im-workflow-rest, immaster, notice-history, notice-mobile-device) |
OAuth クライアントは、iAP のユーザモジュールの設定ファイル(oauth-client-details-config)で登録します。iAP のプロジェクトを Accel CLI で作成している場合は、そちらのエージェントに次のように依頼すると、設定ファイルを生成できます。
モバイルアプリ用の OAuth クライアントを登録してください。
認可種別は authorization_code、リダイレクト URI は com.example.myapp://redirect、
code-challenge は S256、スコープは smacolow, menu, im-workflow-rest, immaster, notice-history, notice-mobile-device です。
接続情報の設定
iAP の URL と OAuth クライアントの情報は、ソースコードに直接書かず、プロジェクトのルートの .env.local に書きます。.env.local は create-expo が設定した .gitignore によって Git の管理対象外になっています。
EXPO_PUBLIC_IAP_BASE_URL=https://iap.example.com/imart
EXPO_PUBLIC_IAP_CLIENT_ID=<クライアント ID>
EXPO_PUBLIC_IAP_CLIENT_SECRET=<クライアントシークレット>
EXPO_PUBLIC_IAP_BASE_URLは iAP のコンテキストパスまで指定し、末尾に/を付けません。- 変数名は、smartlime の導入時にエージェントが作成した設定に合わせてください。
- EAS でビルドする場合は、同じ名前の変数を EAS の環境変数に登録します。
EXPO_PUBLIC_ で始まる値は、アプリに埋め込まれます。配布したアプリからクライアントシークレットを取り出せる前提で、OAuth クライアントに許可するスコープを必要最小限にしてください。
開発ビルドでログインを確認する
iAP へのログインは、開発ビルド(development build)で確認します。開発ビルドは、開発用の機能を含んだアプリ本体で、次のどちらかの方法で作成します。
| 方法 | コマンド | 必要なもの |
|---|---|---|
| ローカルでビルドする | npx expo run:android / npx expo run:ios | Android Studio、または Xcode(macOS のみ) |
| EAS でビルドする | bunx eas-cli build --profile development | Expo のアカウント |
開発ビルドをインストールした後は、bun run start で開発サーバを起動すると、コードの変更がアプリにすぐ反映されます。
Expo Go(ストアで配布されている Expo の確認用アプリ)では、リダイレクト URI が開発機のアドレスを含むものに変わるため、iAP に登録したリダイレクト URI と一致せず、ログインできません。
ログインできない場合は、次の点を確認してください。
| 症状 | 確認すること |
|---|---|
iAP のログイン後にアプリに戻らない、redirect_uri の不一致エラーになる | iAP に登録したリダイレクト URI と、アプリの URL scheme が一致しているか。Expo Go で試していないか |
| iAP のログイン画面は開くが、ログイン後にエラーになる | iAP に登録したスコープ・code-challenge・クライアントシークレットが、アプリの設定と一致しているか |
| API の呼び出しがエラーになる | iAP にモバイルアプリケーション連携(jp.co.intra_mart.im_smacolow)モジュールが導入されているか |
ビルドと配布
アプリのビルド、署名、ストアへの提出、アップデートの配信は、EAS を使ってクラウドで行えます。手順はエージェントに依頼するか、EAS のドキュメント を参照してください。
EAS で Android 向けのプレビュー版をビルドする設定をしてください。