iOSアプリのカスタム通話ボタンで電話をかける

このチュートリアルでは、カスタムUIコンポーネントを使用してiOSアプリケーション内で簡単に呼び出しを行う方法を説明します、 NXMCallButton.

名前が示すように NXMCallButtonボタンが押されると、Nexmo Client SDKを使って着信先が呼び出されます。着信先は、ボタンの設定によって、アプリ内ユーザーまたはPSTN番号のいずれかになります。

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

This tutorial also uses a virtual phone number. To purchase one, go to Numbers > Buy Numbers and search for one that meets your needs.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

前提条件

• A Vonage API（旧Nexmo）アプリケーション

• 少なくとも ユーザVonage APIsアプリケーションで 有効なJWT

• A ウェブフックのための Voice API

このチュートリアルでは、プロジェクトの名前は MyAppプロジェクトは ~/Documents/MyApp.Xcodeによって生成された空の Single View Appテンプレートから始めます。

Xcode 11 のためのメモ：新しいプロジェクトのオプションを選択するときは、必ず Storyboardフィールドの User Interfaceフィールドの値を選択してください：

始めよう！

Nexmo Client SDKのインストール

プロジェクトでCocoaPodsを開始する

以下のコマンドを実行して、プロジェクトのCocoaPodsを開始する必要があります：

cd ~/Documents/MyApp
pod init

という名前のファイルが作成されたことに注目してほしい。 Podfileという名前のファイルが作成されていることに注目してほしい。

Nexmo Client SDKポッドの追加

Nexmo Client SDKポッドを追加するには、Xcodeを使用して新しく作成した Podfileを開き、プロジェクトのターゲットに NexmoClientをプロジェクトターゲットに追加します：

target 'MyApp' do
  use_frameworks!
  pod 'NexmoClient'
end

すべてのXcodeインスタンスを閉じ、ターミナルで以下を実行してCocoaPodsの依存関係を更新する：

pod update

今後は、新しく作成した MyApp.xcworkspaceファイルではなく MyApp.xcprojectファイルではなく、新しく作成された

必要な権限を追加する

通話ボタンは通話を実行するため、マイク使用許可を必ず有効にしてください。通話ボタンが押されると、音声録音へのアクセスを要求するパーミッションリクエストがユーザーに提示されます。このパーミッションリクエストは、すでにボタンによって実装されています。

さらに、なぜマイクの許可が必要なのかを明記する必要があります。Xcodeを開き Info.plist.右クリックして 行の追加オプションを選択し、行のキーとして NSMicrophoneUsageDescriptionを行のキーとして挿入します。行の値には、アプリがマイクにアクセスしたい理由を表す文字列を指定します（例："Audio Calls"）。

さあ、ここからが本番だ！ボタンをUIに追加しましょう。

カスタムUIコンポーネントの追加と設定

カスタムUIButtonの追加

プロジェクト内に NXMCallButton.swiftという名前の新しい空の Swift ファイルをプロジェクト内に作成し、以下の GitHub Gist の内容をコピーします： https://raw.githubusercontent.com/nexmo-community/client-sdk-call-button/master/NXMCallButton.swift

これで NXMCallButtonコンポーネントをユーザーインターフェースに追加するには、ストーリーボードを使うか、プログラムでボタンを追加するかの2つの方法があります。

方法1：ストーリーボードを使う

1. オープン Main.storyboard.

2. オブジェクト・ライブラリーから Buttonオブジェクトを選び、それをインターフェイスに追加する：

   

3. UIButtonのカスタム・クラスを次のように変更する。 NXMCallButton:

   

4. ボタンの検査可能なパラメータを設定する：

• Nexmo Tokenは有効な 有効なJWTトークンでなければなりません。

• Calleeには、PSTN電話番号か、ボタンが押されたときに呼び出されるアプリ内のユーザーのユーザー名を指定します。

注 Nexmo Tokenと Calleeパラメータを動的に変更したい場合は、次のセクションの手順に従ってください。

方法2：プログラムで通話ボタンを追加する

呼び出しボタンをプログラムで追加すると、以下のようなプロパティを変更できます。 calleeと nexmoTokenなどのプロパティを動的に変更できます。必要な宛先を呼び出すだけでなく、ボタンが押されたときのアクションを追加することもできます。

ビュー・コントローラーにプログラムでボタンを追加するには、以下の手順を実行する必要があります：

1. の新しいインスタンスを作成する。 NXMCallButton.

2. の値を設定する。 titleと calleeプロパティに値を設定する。

3. Nexmoクライアントのインスタンスを認証するには login(withAuthToken:)メソッドを使用して NXMClient.shared.

4. オプションで、背景色や制約の設定など、UIの追加設定を行うこともできます。として NXMCallButtonを継承しているので UIButtonを継承しているため UIButtonのすべてのプロパティを使用できます。

5. 例えば、ボタンが押されたときに別のビューへのセグエをトリガーするなどです。

6. ビューに通話ボタンを追加します。

以下は UIViewController:

import UIKit
import NexmoClient
class ViewController: UIViewController {
	override func viewDidLoad() {
	  super.viewDidLoad()
		
	  // new instance of NXMCallButton
	  let callButton = NXMCallButton()
	  
	  // set values for the button's title and callee
	  callButton.setTitle("Call", for: .normal)
	  callButton.callee = "15555551234" // Phone Number or username
	  
	  // Authentication
	  NexmoClient.shared.login(withAuthToken: "YOUR_JWT_TOKEN")
	  
	  // Optional UI Setup
	  callButton.backgroundColor = .lightGray
	  
	  // A target which performs a call when the button is pressed is already added
	  // callButton.addTarget(self, action: #selector(callButtonAction), for: .touchUpInside)
	  // Add button to UI
	  callButton.translatesAutoresizingMaskIntoConstraints = false
	  self.view.addSubview(callButton)
		
	  // Add your desired layout constrains, for example:
	  NSLayoutConstraint.activate([
	            callButton.leadingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.leadingAnchor),
	            callButton.trailingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.trailingAnchor),
	            callButton.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor,constant: -30),
	            callButton.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor),
	            ])
	}
	@objc func callButtonAction(sender: UIButton!) {
	  print("Button tapped")
	}
}

通話開始後に完了ハンドラを実行することも可能である。ユーザーに通話が開始されたことを示すメッセージを表示するか、別の画面を表示することは、良いプラクティスである。

let myCallCompletionHandler = { (error: Error?, call: NXMCall?) in
	if (error != nil) {
		// Handle error
	} else {
		// Handle success
		// For example: switch to a different view presenting a call session
	}
}
callButton.callCompletionHandler = myCallCompletionHandler

概要

このチュートリアルでは、カスタム NXMCallButtonコンポーネントを使用してアプリに呼び出しを統合するプロセスについて説明しました。一行もコードを書かずにインターフェイスビルダーを使う方法と、プログラムで動的に変更したり設定したりする方法です。

目の前でマジックが起こるのを見たい場合は、通話相手を電話番号に設定し、アプリを実行してダイヤルボタンをクリックします。通話を有効にするには、アンサーウェブフックが必要です。 このチュートリアルをご覧ください。

さらに読む

• Nexmo SDKとツール

• GitHub上のNXMCallButton.swift

• Nexmo Client SDKを使用したアプリ内メッセージング