---
title: "はじめに"
url: https://docs.catalyst.zoho.com/ja/tutorials/dialer-mobile-app/flutter/introduction/
description: "Catalyst Advanced I/O Functions、DataStore、およびTwilioのVoice APIとの統合を使用して、Flutterでダイヤラーアプリケーションを構築し、営業チームと顧客間のアウトバウンド通話接続を確立します。"
last_updated: 2026-11-03T07:48:52Z
service: All Services
type: tutorial
related_links:
  - name: "プロジェクトディレクトリ構造"
    url: /ja/cli/v1/project-directory-structure/introduction/
  - name: "Android SDK"
    url: /ja/sdk/android/v2/overview/
  - name: "iOS SDK"
    url: /ja/sdk/ios/v2/overview/
  - name: "Flutter SDK"
    url: /ja/sdk/flutter/v2/overview/
  - name: "Twilio"
    url: https://www.twilio.com/
---

# Dialer Mobile App

### はじめに

このチュートリアルでは、[Twillio](https://www.twilio.com/en-us)と統合することで、Catalystでシンプルな Android および iOS ダイヤラーアプリケーションを構築します。両プラットフォームのアプリケーションは、[Catalyst Flutter SDK](https://docs.catalyst.zoho.com/ja/sdk/flutter/v2/overview/)を使用して[Flutterフレームワーク](https://flutter.dev/)上で構築されます。ダイヤラーアプリケーションを使用すると、営業チームと顧客間のアウトバウンド音声通話接続を開始できます。

Flutterは、Googleが開発したDartプログラミング言語をベースとしたオープンソースフレームワークで、ネイティブコンパイルされたクロスプラットフォームアプリケーションの開発に使用されます。[Catalyst Flutter SDK](https://docs.catalyst.zoho.com/ja/sdk/flutter/v2/overview/)には、AndroidおよびiOS環境の両方に対応した、さまざまなCatalystサービスおよびコンポーネント用のツールが含まれています。

[Twillio](https://www.twilio.com/en-us)は、音声、ビデオ、メッセージング、ライブストリーミング、メールなどを通じて、意味のある迅速な接続を確立するための豊富なREST APIを提供するクラウドコミュニケーションプラットフォームです。Twilioプラットフォームは、テキスト読み上げダイヤルメッセージのパーソナライズされたカスタマイズ、通話録音、会議通話、通話転送、トラッキングなど、さまざまな機能を提供しています。このチュートリアルでは、Twilioの[Programmable Voice API](https://www.twilio.com/voice)を使用して、仮想電話番号を介して2つの電話番号間のアウトバウンド通話を設定します。

> **Note**: このアプリケーションには有料のTwilioアカウントが必要です。TwilioのAPIとの統合は無料版では利用できません。Twilio電話番号（仮想番号）は、Twilioアカウントにサインアップする際に、Twilioコンソールからお住まいの国の設定に基づいて購入できます。

モバイルアプリケーションは以下のように表示されます：

**Android**

![android-working-app](https://catalyst-docs-development.zohostratus.in/images/tutorials/dialer-app/flutter/android-working-app.webp)

**iOS**

![ios-working-app](https://catalyst-docs-development.zohostratus.in/images/tutorials/dialer-app/flutter/ios-working-app.webp)

ダイヤラーアプリケーションには、以下の基本的なCatalystコンポーネントとそれらが提供する機能が含まれています：

1. [**Catalyst Serverless**](https://docs.catalyst.zoho.com/ja/serverless/getting-started/introduction/):
    - **[Advanced I/O Function](https://docs.catalyst.zoho.com/ja/serverless/help/functions/advanced-io)**: Advanced I/O functionは**Node.js**プログラミング環境でコーディングされています。TwilioのProgrammable Voice APIと統合してアウトバウンド通話を開始し、通話ログを記録するバックエンドロジックが含まれています。

2. [**Catalyst CloudScale**](https://docs.catalyst.zoho.com/ja/cloud-scale/getting-started/introduction/):

    - **[Data Store](https://docs.catalyst.zoho.com/ja/cloud-scale/help/data-store/introduction)**: 電話番号、通話が開始された国、通話のタイムスタンプ、通話ステータスなど、発信した通話に関する情報を保存します。
    - **[ZCQL](https://docs.catalyst.zoho.com/ja/cloud-scale/help/zcql/introduction)**: Data Storeにクエリを実行し、通話完了後に通話ログを取得して、Webクライアントに表示します。

アプリケーションをCatalyst Flutter SDKで構築するには、CatalystでAndroidおよびiOSの両方のアプリを設定する必要があります。これには、Catalystにアプリを登録して、両方のCatalyst固有のプロパティファイルを取得し、それぞれのコードモジュールに含めることが含まれます。

このアプリケーションの構築とテストには、Catalyst WebコンソールとCatalystコマンドラインインターフェース（CLI）、およびAndroidとiOSの両方に必要なモバイルIDEとシミュレーターを使用します。このチュートリアルでは、Advanced I/O functionに含めるコードと、AndroidおよびiOSアプリ用のFlutterコードを提供しています。提供されたコードをコピーし、指示に従って適切なファイルに貼り付けるだけです。

### アプリケーションアーキテクチャ

ダイヤラーアプリケーションのアーキテクチャを以下に示します：

1. アプリケーションは、営業チームの連絡先番号と顧客の電話番号などのユーザー入力を受け付けます。

2. ユーザーが入力した電話番号がバリデーションされます。バリデーションが成功すると、番号はCatalystのData StoreのCallLogsテーブルに保存され、TwilioのVoice APIにリクエストが送信されます。

3. Twilio APIを呼び出すと、アウトバウンド通話が開始され、Twilio番号から営業チームの連絡先番号にルーティングされます。

4. この時点で、ダイヤラーアプリケーションは通話中にユーザーに提示するアクションを指定するために、Voice APIにTwilMLインストラクションを送信します。このアプリケーションでは、REST APIに音声指示を返すURLを設定しています。

5. TwilioのVoice Response functionには、通話アクションをお好みに合わせてカスタマイズできる事前設定されたverbがあります。ここでは、[dial()](https://www.twilio.com/docs/voice/twiml/dial)および[say()](https://www.twilio.com/docs/voice/twiml/say) verbを使用して、アカウントのTwilio番号から営業番号にダイヤルし、通話が転送される際に発信者にメッセージを提示します。

6. 通話が正常に完了すると、通話時間、通話ステータス、通話先の国、通話のタイムスタンプなどの通話詳細がテーブルに更新されます。通話は、いずれかの当事者が切断した場合、またはTwilioのシグナルがビジーの場合に終了します。

7. ユーザーはダイヤラーアプリケーションで通話ログを確認することもできます。ログはData Storeにクエリを実行して取得されます。

![dialer-arch-dia](https://catalyst-docs-development.zohostratus.in/images/tutorials/dialer-app/dialer-arch-dia.webp)

ダイヤラーアプリケーションは、顧客へのアウトバウンド音声通話コミュニケーションを迅速に開始するためのソリューションとして機能します。