シェア:
){kind=small}
エリック・ジャンニーニはNexmoでiOS開発者のアドボケイトを務めていた。彼はObjective-CとSwiftの両方、特に後者に情熱を持っている。エリックは、iOSのあれこれ、アプリのハッキング、SDKの構築、あるいは迅速なプロトタイピングについてよくブログを書いている。彼はまた、カンファレンスやミートアップ、その他の様々なイベントで、iOSデベロッパーや他の強力なSwiftタイプと会っている。
Nexmo In App Messagingで会話型UIを構築する
所要時間：1 分
このチュートリアルでは、AppleがWWDC 2017で発表した新機能「セーフエリアレイアウト」についてレビューします。レビューの後、セーフエリアレイアウトを使った基本的な会話型ユーザーインターフェースをレイアウトし、Nexmo In-App Messagingで会話機能を追加します！
セーフエリアレイアウトとは？iOS 7でAppleは topLayoutGuideと bottomLayoutGuideを UIViewController のプロパティとして導入し、ステータス、ナビゲーション、タブなどの UIKit バーに指定された領域に最外縁が触れるレイアウトを柔軟にできるようにしました。しかしAppleは、これらのガイドを非推奨とし、セーフエリアレイアウトガイドと呼ばれる置き換えを行いました。 WWDC 2017セッション412「Interface Builderにおける自動レイアウトテクニック.以下に視覚的な内訳を示す：
Auto Layout Guides
基本的な違いは、2つの長方形から1つの長方形になることだ。が上の長方形の下辺を指していたのに対し topLayoutGuideが上の矩形の下辺を参照していたのに対し bottomLayoutGuideが下の矩形の上辺を参照していたのに対し、新しい Safe Area はこれらの矩形で囲まれた領域です（つまり、単純化された縮小）。これは些細な違いですが、Auto Layoutが制約をビューにマッピングする方法に大きな変化をもたらします。UIKit のバーのどちらかがなくなると、それに応じて Safe Area Layout も調整されます。
では、基本的な会話インターフェースを作ってみよう。
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.
デプロイメント・ターゲットをiOS 11以上に設定した.xcodeprojを作成しよう。.xcodeprojの中で .xcodeprojプログラムの中で ViewController.Swift.
私たちの基本的な会話のユーザー・インターフェースは 本当に基本的なものなので ViewController.Swiftの中に2つのアウトレットと1つのアクションの機能を追加しましょう。アクションは UIButton.残りはアウトレットになります。
コントローラがセットアップされたので、対応するUI要素に目を向けてみよう。 textView, UITextFieldそして UIButton.
から ViewController.Swiftから Main.storyboardに切り替える。のインスタンスをドラッグしてコントロールしよう。 textViewのインスタンスを ViewController.Swiftのシーンにドラッグしましょう。
注:もしあなたが、文書のアウトラインにあるべき制約の簡単な内訳を知りたいのであれば、このセクションの一番下までスクロールしてください。
テキストビューの最上部からセーフエリアの最上部まで、定数をゼロにしてコントロールドラッグする。テキストビューの末尾スペースからセーフエリアの末尾スペースまで、定数をゼロとしてコントロールドラッグする。テキストビューの先頭スペースからセーフエリアの先頭スペースまで、ゼロを定数としてコントロールドラッグする。
テキストビューの下にあるコンテンツビューの右下隅に、UIButtonのインスタンスをコントロールドラッグする。コントロールは、ボタンからセーフエリアレイアウトの末尾のスペースまでドラッグします。コントロールは、ボタンからセーフエリア・レイアウトの一番下までドラッグします。これらの制約の定数を15に固定します。
UITextFieldのインスタンスをテキストビューの下にあるコンテンツビューの左下隅にコントロールドラッグする。コントロールは、テキストフィールドからセーフエリアレイアウトの先頭スペースまでドラッグします。テキスト・フィールドからセーフエリア・レイアウトの一番下までコントロール・ドラッグする。これらの制約の定数を15に固定します。
注:オプションとして、インスタンスからビューへドキュメント・アウトラインをシフト・クリックすることで、これら2組の制約を同時に設定することができます。
テキストフィールドからボタンまでコントロールドラッグする。水平方向の間隔と最後のベースラインをクリックします。これら2つのインスタンスが水平方向のスペーシングを競い合うという致命的な警告を解決するには、テキストフィールドよりも高い、例えば251のようなコンテンツ抱き合わせ優先度をボタンに選択します。従って、ボタンとテキストの間のスペースやボタンのサイズは全く変化することなく、テキストフィールドの水平方向のスペーシングはデバイスサイズのスクリーンサイズに対応して変動することになります。
最後に、コントロール・ドラッグでテキスト・ビューの下部からテキスト・フィールドの上部までドラッグし、垂直方向の間隔を15で一定にする。
以下は、文書のアウトラインにあるべき制約の簡単な内訳である：
Safe Layout Guide Constraints
セーフエリアレイアウトで基本的な会話インターフェースを構築した後、Nexmo In-App Messagingで会話機能を実装します。
Nexmoアプリ内メッセージングは現在開発者プレビュー中です。モバイルアプリケーションやウェブアプリケーションでブランド化されたチャット体験を作成するために、このテクノロジーをいち早くご利用ください。
コンタクトセンターやオンラインマーケットプレイスなどの環境で、ユーザーのコミュニケーションチャネルを拡張できます。Nexmo In-App Messagingを使用すれば、これらのメッセージング体験や、その他コンセプトのあるメッセージング体験を簡単に構築し、直感的で使い慣れたメッセージング・インターフェースをユーザーに提供することができます。
Nexmo In-App Messagingには以下が含まれます：
クロスプラットフォームSDK:iOS、Android、JavaScriptのSDKを統合し、どのデバイスでもシームレスにチャットができます。
機能豊富なチャット:タイピングインジケーターや、メッセージの送信、配信、既読のタイミングを表示するエクスペリエンスを構築します。
オフライン同期:内蔵のキャッシュ機能により、デバイスがオフラインになるとメッセージが保存され、デバイスがオンラインに戻ると送受信されます。
Nexmo In-App Messagingをお試しください。 Nexmoアカウントに登録する.サインアップ後、iOS SDKを.xcodeprojに統合することができます。
Nexmoの会話作成プロセスの詳細については、iOSのクイックスタートに記載されています。 に記載されています。.簡単な内訳は以下の通りです：
$ nexmo app:create "Conversation iOS App" http://example.com/answer http://example.com/event --type=rtc --keyfile=private.key
> Application created: aaaaaaaa-bbbb-cccc-dddd-0123456789ab
アプリケーションIDに注意してください。これは後で YOUR_APP_IDと呼ぶことにする。
$ nexmo conversation:create display_name="Nexmo Chat"
> Conversation created: CON-aaaaaaaa-bbbb-cccc-dddd-0123456789ab
会話IDに注意してください。これは後で YOUR_CONVERSATION_IDと呼ぶことにする。
$ nexmo user:create name="jamie"
> User created: USR-aaaaaaaa-bbbb-cccc-dddd-0123456789ab
ユーザーIDに注意してください。これを後で YOUR_USER_IDと呼ぶことにする。
$ nexmo member:add YOUR_CONVERSATION_ID action=join channel='{"type":"app"}' user_id=YOUR_USER_ID
$ USER_JWT="$(nexmo jwt:generate ./private.key sub=jamie exp=$(($(date +%s)+86400)) acl='{"paths": {"/v1/sessions/**": {}, "/v1/users/**": {}, "/v1/conversations/**": {}}}' application_id=YOUR_APP_ID)"
$ echo USER_JWT
生成されたJWTに注目してください。これを後で USER_JWTと呼ぶことにする。
ターミナルでプロジェクトのルート・ディレクトリに移動する。実行する： pod init.PodFileという名前のファイルを開きます。それに従って仕様を設定する：
platform :ios, '9.0'
source "https://github.com/Nexmo/PodSpec.git"
source 'git@github.com:CocoaPods/Specs.git'
target 'QuickStartOne' do
# Comment the next line if you're not using Swift and don't want to use dynamic frameworks
use_frameworks!
pod "NexmoConversation", :git => "https://github.com/nexmo/conversation-ios-sdk.git"
end
Cocoapodが追加されたので、先ほどのビューをコントローラに接続してみましょう。UIButtonのインスタンスからアクションへの接続を作成し、テキストビューとテキストフィールドのインスタンスをそれぞれのアウトレットに接続するようにします。
で ViewController.Swiftでユーザーをログインさせよう。 USER_JWTでログインしてみよう。
override func viewDidLoad() {
super.viewDidLoad()
let client: ConversationClient = {
ConversationClient.configuration = Configuration(with: .info)
return ConversationClient.instance
}()
client.login(with: USER_JWT).subscribe()
}
メッセージを送信するには、単に send()を呼び出すだけだ； send()を呼び出すだけです。
// sendBtn for sending text
@IBAction func sendBtn(_ sender: Any) {
do {
// send method
try conversation?.send(textField.text!)
} catch let error {
print(error)
}
}
では viewDidLoad()に、送信ボタンを押したときに生成されるTextEventsのような新しいイベントを処理するハンドラを追加したいと思います。次のようにすればいい：
// a handler for updating the textView with TextEvents
conversation?.events.newEventReceived.addHandler { event in
guard let event = event as? TextEvent, event.isCurrentlyBeingSent == false else { return }
guard let text = event.text else { return }
self.textView.insertText(" (text) n")
}
Nexmo In-App Messaging iOS SDKをプロジェクトに統合すると、In-App Messagingのインスタンスがセーフエリアレイアウトに表示されます。 TextEventのインスタンスがセーフエリアレイアウトに表示されるはずです。iPhoneまたはiOSシミュレータで試してみてください！完成品はこのようになります：
iPhone X
このチュートリアルでは、AppleがWWDC 2017で発表した新機能「Safe Area Layout」をレビューしました。それをレビューした後、全く新しいセーフエリアレイアウトを使って基本的な会話型ユーザーインターフェースをレイアウトしました。このレイアウトで、Nexmo In-App Messagingによる会話機能を追加しました。出来上がり！
アクティブなSwift開発者、またはSwiftを使い始めたばかりの方は、Nexmo開発者コミュニティに参加することをお勧めします。Nexmo GitHubでホストされているプロジェクトをチェックしたり、Twitterでフォローしてください。 NexmoDev.
開発者支援チームと交流したり、コードリポジトリをチェックしたりすることを歓迎します。iOS用Nexmo In-App Messagingの使い方のチュートリアルをもっとご覧になりたい方は、以下のチュートリアルをご覧ください。 クイックスタート.