メインコンテンツまでスキップ

AIネイティブ開発の流れ

モバイルプロジェクトでは、はじめに smartlime を導入して iAP にログインできることを確かめ、その上に画面や機能を積み上げていきます。

基本フロー​

エージェントに指示できる内容について

各手順でエージェントに指示できる内容の詳細は、スキルセットを参照してください。

  1. モバイルプロジェクトを作成して、配備した資材をコミットする
  2. エージェントを起動する(Claude Code は claude、Codex は codex)
  3. エージェントに smartlime の導入を指示する
    • パッケージの追加、URL scheme の設定、接続情報の読み込み、Smartlime の配置が行われる
    • iAP 側に登録する OAuth クライアントの値が提示される
  4. iAP 側に OAuth クライアントを登録する
  5. 接続情報を .env.local に設定する
  6. 開発ビルドでアプリを起動し、iAP にログインできることを確認する
  7. 作りたい画面や機能をエージェントに指示する
    • ログイン画面、iAP のデータの一覧・詳細、iAP の画面の表示など
  8. エージェントが lint・型チェック・テストを実行し、成果物が src/ 配下に保存される
  9. アプリで動作を確認し、不具合があった場合はエージェントに修正を依頼する
  10. 完成したら、EAS でアプリをビルドして配布する
成果物生成中のAI操作許可について

エージェントに作業を依頼中、エージェント側から以下のような操作の許可が求められることがあります。 許可を求められた際は、プロジェクト配下の操作であることを確認して、許可操作を行ってください。

  • ファイルの保存
  • パッケージの追加(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:iosAndroid Studio、または Xcode(macOS のみ)
EAS でビルドするbunx eas-cli build --profile developmentExpo のアカウント

開発ビルドをインストールした後は、bun run start で開発サーバを起動すると、コードの変更がアプリにすぐ反映されます。

Expo Go ではログインを確認できません

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 向けのプレビュー版をビルドする設定をしてください。