LoginSignup
5
5

More than 1 year has passed since last update.

TwilioのIPメッセージングをBluemixで実装

Last updated at Posted at 2016-01-25

2023年5月1日を持ちまして、株式会社KDDIウェブコミュニケーションズのTwilioリセール事業が終了したため、本記事に記載されている内容は正確ではないことを予めご了承ください。

昨年5月のSIGNALイベントで発表されたTwilio IPメッセージングサービスが、オープンβ状態となっているので、公開されているデモプログラムをBluemixで実装してみました。
同じようにAWS LambdaとS3で実装した記事もありますので、よろしければそちらもどうぞ。
TwilioのIPメッセージングをAWS lambdaとs3で実装
ちなみに、Bluemixで実装する作業は、AWSに実装するよりも恐ろしく簡単です(本来は記事も要らないくらい)。

IPメッセージングとは、チャットを実現するサービスで、REST APIももちろん、すでにJavaScript、iOS、AndroidのSDKもリリースされています(Andoridだけはドキュメントが未整備)。
IPメッセージング
サンプルプログラムも準備されていますので、今回はそちらをBluemixで実装する手順を記載します。

準備

IPメッセージングを利用するには、以下の情報が必要です。それぞれ手順に従って事前に取得しておいてください。

twilioアカウント

Twilioのアカウントを持っていない方は、まずはこちらの記事を参考にアカウントを取得してください。
Twilioアカウントの新規作成

IPメッセージング Service SID

Twilioのアカウントが取得できたら、以下の手順に従いIPメッセージングのサービスを生成してください。

  1. 以下のURLにアクセスします(要ログイン)。
      https://jp.twilio.com/user/account/ip-messaging/services
  2. 「IPメッセージングサービスを作成する」のボタンを押します。
  3. フレンドリーネームに「ipmlambda」と入力して「作成」ボタンを押します。
  4. IPメッセージングサービスが生成されますので、「Service SID」に表示されている文字列を記録しておきます。

Twilio API Key

以下の手順でAPIキーを生成します。

  1. 以下のURLにアクセスします(要ログイン)。
      https://jp.twilio.com/user/account/ip-messaging/dev-tools/api-keys
  2. 「APIキーを作成する」のボタンを押します。
  3. フレンドリーネームに「IP Messaging」と入力して「Create API Key」ボタンを押します。
  4. API KeyのSidとSecretが表示されるので、どちらも記録しておきます。特に、API Secretについては、後から表示させることができないので、忘れずに必ず記録しておいてください。

Bluemixのアカウント

今回はBluemix上に実装するので、以下の記事を参考に予めアカウントを取得しておきます。
IBM Bluemixフリートライアルアカウント作成手順
なお、Bluemixの地域については、どこを使っても大丈夫ですが、今回は「米国南部」で実装したいと思います。

コードの取得

githubからサンプルプログラムをダウンロードします。今回はNode.jsのサンプルを使います。

sh
$ cd 作業ディレクトリ
$ git clone https://github.com/TwilioDevEd/ipm-quickstart-node
$ cd ipm-quickstart-node

.env.exampleファイルの名前を変更します。

sh
$ mv .env.example .env

.envファイルをテキストエディタで開き、それぞれの行を先ほど取得した情報に書き換えます。

.env
TWILIO_ACCOUNT_SID=TwilioのアカウントSID
TWILIO_API_KEY=SKから始まるTwilioのAPI KEY(SID)
TWILIO_API_SECRET=TwilioのAPI KEY(Secret)
TWILIO_IPM_SERVICE_SID=ISから始まるIPメッセージングのサービスSID

package.jsonをテキストエディタで開き、7行目に"start": "node index", を追加します。
※最後のカンマを忘れずに。

package.json
6:  "scripts": {
7:    "start": "node index", ←この行を追加
8:    "test": "echo \"Error: no test specified\" && exit 1"
9:  },

必要なライブラリをダウンロードします。
Nodeの環境がない方は、ここと次のローカル環境のテストは飛ばしても構いません。

sh
$ npm install

ローカル環境でテスト

以下のコマンドを入力すると、ローカル環境でテストができます。

sh
$ npm start
結果

> ipm-quickstart-node@1.0.0 start /Users/katsumi/Documents/workspace/bluemix/ipm-quickstart-node
> node index

Express server running on *:3000

このように表示されたら成功です。
コマンドはそのままにしておき、ブラウザで、http://localhost:3000 にアクセスしてみます。
スクリーンショット 2016-01-25 15.35.53.png

このような画面が表示さればOKです。
say anythingと書かれたところにカーソルがあるので、何か文字をいれてみて、正しく入力できることを確認します。同時に複数のブラウザを立ち上げてテストすることで、メッセージのやり取りも確認できます。
もしこのような画面にならない場合は、先ほど書き換えた.envファイルの内容が間違っている可能性があります。

Bluemixへの実装

地域の確認

まずは、右上のアカウントアイコンをクリックし、地域が米国南部になっていることを確認します。
スクリーンショット 2016-01-25 15.43.54.png
もしなっていない場合は、地域のプルダウンから「米国南部」を選択しておいてください。

Cloud Foundryアプリの新規作成

画面中央にある「Cloud Foundryアプリ」の「アプリの作成」をクリックします。
「どのような種類のアプリを作成しますか?」と聞かれるので、「WEB」を選びます。
スクリーンショット 2016-01-25 15.51.16.png

「どのように開始しますか?」と聞かれるので、「SDK for Node.js」を選択します。
スクリーンショット 2016-01-25 15.53.08.png
「続行」ボタンを押します。

アプリの名前を決めます。全世界でユニークなるような名前にする必要がありますので、気をつけてください。
スクリーンショット 2016-01-25 15.54.15.png
名前を決めたら「完了」ボタンを押します。

アプリケーションの構築が自動的に行われ、しばらくするとアプリケーションが動作し始めます。
スクリーンショット 2016-01-25 15.57.07.png
もし、Bluemixのコマンドラインインターフェース(CF)を準備していない方は、画面の指示に従って予めCFの準備をしておいてください。なお、スターターコードは今回は不要です。

コードのデプロイ

以下の手順に従って、コマンドラインからデプロイを行います。作業は先程ダウンロードしたサンプルプログラムのフォルダ内で行います。
ローカル環境でテストをしていた方は、CTRL+Cでプログラムを終了させておきます。

先ほどアプリが起動したBluemixの画面上にCloud Foundryコマンドラインインターフェースを使用したデプロイ方法が記載されていますので、「IBM Bluemixに接続します」の部分(cf apiコマンド)から順に実行してみてください。
最後にブラウザでアクセスするURLも載っていると思うので、そちらをブラウザで開き、ローカル環境でテストした状態と同じように、チャットができることを確認します。

まとめ

Bluemixは優れたPaaSサービスなので、今回のようにローカル環境などですでに動作しているアプリケーションを、非常に簡単に実装することができました。
ただし、アプリを実行し続けると課金されるので、テストが終わったらアプリは停止しておきましょう。
ちなみに、AWSのLambdaとS3を使う場合は、アクセスが発生したときだけ課金対象となるので、Bluemixで実装するよりも低コストで運用が可能です。

今回はIPメッセージングのしくみやコードの内容には一切触れていませんが、そのうち詳しい解説記事を書こうと思います。

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5