--- title: "Flutterクライアントの設定" url: https://docs.catalyst.zoho.com/ja/tutorials/dialer-mobile-app/flutter/configure-client/ description: "Catalyst Advanced I/O Functions、DataStore、およびTwilioのVoice APIとの統合を使用して、Flutterでダイヤラーアプリケーションを構築し、営業チームと顧客間のアウトバウンド通話接続を確立します。" last_updated: 2026-08-17T12:16:04Z service: All Services type: tutorial related_links: - name: "クライアントディレクトリ構造" url: /ja/cli/v1/project-directory-structure/introduction --- # Flutterクライアントの設定 ダイヤラーアプリケーションのFlutterコード一式を提供します。Flutterコードは[こちら](https://learn.zoho.com/scroll/downloadFile.do?soid=671864332&fileId=5569550000021783853&articleId=5569550000012907037)からダウンロードできます。 コードディレクトリは以下のようになります： ![code-bundle](https://catalyst-docs-development.zohostratus.in/images/tutorials/dialer-app/flutter/code-bundle.webp) > **Note:** このコードzipには、AndroidおよびiOSアプリケーションの両方に必要なソースコードが含まれています。 提供されたコードでは、`lib/main.dart`ファイルにFlutter SDKがすでにインポートされています。SDKのインポートの詳細な手順は、このヘルプページで確認できます。 SDKのインポート後、`ZCatalystApp.init()`メソッドを使用してmain()関数でSDKを初期化しています。SDKの初期化手順については、このヘルプページを参照してください。 > **Note:** 提供されたコードには`build.gradle`ファイルが含まれているため、アプリケーションを手動で再ビルドする必要はありません。 次に、Android StudioとXcodeでアプリケーションの設定と実行に進みます。 Android Studioでプロジェクトを設定するには、以下の手順に従ってください： 1. **File → Open**をクリックして、ダウンロードしたコードフォルダを開きます。 ![file-open](https://catalyst-docs-development.zohostratus.in/images/tutorials/dialer-app/flutter/file-open.webp) 2. **View → Tool Windows → Terminal**に移動します。 ターミナルで以下のコマンドを実行して、Flutterアプリケーションに必要な依存関係をインストールします。 ```sh flutter pub get ``` ![pub-get](https://catalyst-docs-development.zohostratus.in/images/tutorials/dialer-app/flutter/pub-get.webp) 3. Androidアプリモジュールのassetsディレクトリ（**/assets**）に移動し、[このステップ](https://docs.catalyst.zoho.com/ja/tutorials/dialer-mobile-app/flutter/register-app)でCatalystコンソールからダウンロードしたAndroid設定ファイルを追加します。 ![add-config](https://catalyst-docs-development.zohostratus.in/images/tutorials/dialer-app/flutter/add-config.webp) 次に、Android Studioの`catalyst_paramters.env`ファイルで、`/makeCall`と`/getLogs`の両方のルートに対してCatalyst functionのURLを設定する必要があります。 Catalyst functionのURLを取得するには、**Serverless → Functions**に移動し、**dialer function**をクリックします。 ![function-page](https://catalyst-docs-development.zohostratus.in/images/tutorials/dialer-app/flutter/function-page.webp) 以下のスクリーンショットに示すように呼び出しURLをコピーし、`catalyst_paramters.env`ファイルに貼り付けます。 ![invocation-url](https://catalyst-docs-development.zohostratus.in/images/tutorials/dialer-app/flutter/invocation-url.webp) 例： **CALL_INITIATION_URL** = https://catalystdialerapp-781316834.development.catalystserverless.com/server/dialer/makeCall **CALL_LOGS_URL** = https://catalystdialerapp-781316834.development.catalystserverless.com/server/dialer/getLogs XcodeでiOSプロジェクトを設定するには、以下の手順に従ってください： 1. **File → Open**をクリックして、先ほど展開したコードzipからiOSフォルダとandroidフォルダ以外のすべてのファイルを開きます。 ![open-xcode](https://catalyst-docs-development.zohostratus.in/images/tutorials/dialer-app/flutter/open-xcode.webp) 2. **Runner**を右クリックします。**Add Files to Runner**を選択し、[このステップ](https://docs.catalyst.zoho.com/ja/tutorials/dialer-mobile-app/flutter/register-app)でダウンロードしたiOS設定ファイルを追加します。 ![add-ios-config](https://catalyst-docs-development.zohostratus.in/images/tutorials/dialer-app/flutter/add-ios-config.webp)