LoginSignup
4
5

More than 1 year has passed since last update.

@mobilebiz(高橋 克己)

Twilio Syncプログラミングサンプル

Last updated at Posted at 2018-11-04

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

はじめに

本記事は、Twilio Syncを使うプログラミングサンプルとなります。
複数のブラウザ（PC、スマホ等）で同期を取りながら、いずれかの端末の変更結果を他の端末にPushします。

スクリーンショット 2018-11-04 09.44.05.png

準備

  • Twilioアカウント（トライアルアカウントでも可能です）
  • ブラウザ（スマホ、PC）

Twilio Sync

  • Twilio Sync
  • 複数のデバイス間で情報を同期させるためのサービス
  • WebSocketやSocket.ioのようなリアルタイム通信プラットフォーム
  • Syncは、受け取ったデータをTwilio上に保存してから配信する
  • Sync上のデータは、明示的に削除しない限り消えない
  • 月10,000アクションまでは無料、それ以降は1000アクション単位で1.5円
  • Documents / Lists / Maps / Message Streams の4種類のデータを扱うことが可能
  • 各オブジェクトにはACLを設定することが可能

Documentsオブジェクト

  • 単一のJSON形式オブジェクト
  • 1データのサイズは最大16KB
  • 単純な値のPUB/SUBに向いている
  • 履歴を取るような使い方には向いていない
  • JavaScript SDKを使うと、Documentオブジェクトの生成、更新、購読、削除が可能
  • サーバーサイドのREST API経由でも管理可能
  • Documentsオブジェクトの利用例
  • コールセンターでオペレータの稼働確認などに利用

例：Documentsオブジェクトの生成

JavaScript
client.document('user_prefs').then(function(doc) {
  doc.set({
    foregroundColor: "#ffff00",
    backgroundColor: "#ff0000"
  });
});

すでに、user_prefsオブジェクトが存在する場合は、そのオブジェクトが上書きされます。

例：Documentsオブジェクトの更新

JavaScript
client.document('user_prefs').then(function(doc) {
  doc.update({foregroundColor: "#ff0000"});
});

user_prefsに、別のKey/Value（例えば、backgroundColor）があった場合、その値は更新されません。

例:Documentsオブジェクトの読み込み

JavaScript
client.document('user_prefs').then(function(doc) {
  console.log(doc.value);
});

例:Documentsオブジェクトの更新を購読する

JavaScript
syncClient.document("user_prefs").then(function(doc) {
  doc.on("updated",function(data) {
    console.log(data);
  });
});

例:Documentsオブジェクトの削除

JavaScript
syncClient.document("user_prefs").then(function(doc) {
  doc.removeDocument().then(function() {
    console.log('Document removed.');
  });
});

ハンズオン

Documentsオブジェクトを使ったデバイス同期

シナリオ

SyncのDocumentsオブジェクトを利用して、複数ブラウザで同期を行うサイトを作成してみます。
SyncのJavaScript Clientを利用します。

手順1. Syncサービスの作成と、API KeyとAPI Tokenの発行

まずは、新しいSyncサービスを作成し、API KeyとAPI Tokenを発行します。

  • 管理コンソールのスライドメニューから、DEVELOPER TOOLSの中のSyncを選択します。

上級編Syncサービス.png

  • Syncメニューの中からServicesを選択します。

上級編SyncService (1).png

  • 赤い**+**アイコンを押して、新しいSyncサービスを作成します。
  • **新規Sync Servceに名前をつけます。**ダイアログが表示されるので、名前欄に「SyncBrowser」と入力し、Createボタンを押します。
スクリーンショット 2018-07-15 09.12.30.png
  • SERVICE SID（ISから始まる文字列）をメモ帳に保存しておきます。
  • Syncメニューの**< Back**をクリックして、Syncサービスの一覧画面に戻ります。
  • Syncメニューのツールを選択し、APIキーの一覧が表示されるのを確認します。
  • Create API Keyボタンを押すか、**+**アイコンを押して、新しいAPI Keyを作成します。
  • 名前欄に「SyncBrowser」と入力し、キータイプは「Standard」を選択します。
スクリーンショット 2018-07-15 09.19.07.png
  • APIキーを作成するボタンを押します。
  • 表示されるSID（SKから始まる文字列）と、SECRETに表示されている文字列の両方をメモ帳に保存します。
  • **完了しました!**のチェックボックスにチェックを入れて、終了ボタンを押します。

上級編SyncApiKey.png

手順2. アクセストークン発行用Functionの作成

Syncを利用するためには、先程作成したAPIキーを使って、アクセストークンを動的に生成する必要があります。
今回は、Functionsを使って、Syncサービスのアクセストークンを生成してみましょう。

  • 管理コンソールから、Runtime > Functions > Configureを選択します。
  • Environmental Variablesの赤い**+**ボタンを３回押して、KEY/VALUE欄を３つ追加します。
  • それぞれのKEY/VALUEを以下のように設定します。
KEY VALUE
SYNC_SERVICE_SID ISから始まるSyncサービスのSID
TWILIO_API_KEY SKから始まるAPIキー
TWILIO_API_SECRET APIキーとセットで設定されたSECRET
  • Saveボタンを押して設定を保存します。
  • RuntimeメニューのFunctions > Manageを選択します。
  • 赤い**+**アイコンをクリックして、新しいFunctionを生成します。
  • テンプレートの一覧からBlankを選択して、Createボタンを押します。
  • FUNCTION NAMEに「SyncToken」と入力し、PATHには、「/sync-token」と入力します。
スクリーンショット 2018-07-15 10.25.07.png
  • ACCESS CONTROLのチェックは外しておきます。
  • CODE欄に書かれているコードを以下のコードに置き換えます。
Node.js
exports.handler = function(context, event, callback) {
    const ACCOUNT_SID = context.ACCOUNT_SID;
    const SERVICE_SID = context.SYNC_SERVICE_SID;
    const API_KEY = context.TWILIO_API_KEY;
    const API_SECRET = context.TWILIO_API_SECRET;
    const IDENTITY = context.DOMAIN_NAME;
    const AccessToken = Twilio.jwt.AccessToken;
    const SyncGrant = AccessToken.SyncGrant;

    const syncGrant = new SyncGrant({
        serviceSid: SERVICE_SID
    });

    const accessToken = new AccessToken(
        ACCOUNT_SID,
        API_KEY,
        API_SECRET
    );

    accessToken.addGrant(syncGrant);
    accessToken.identity = IDENTITY;
    callback(null, {
        token: accessToken.toJwt()
    });
};
  • Saveボタンを押して、デプロイされるのを待ちます。
  • デプロイが完了したら、PATH欄のURLをコピーして、別のブラウザタブで実行してみます。
  • JSON形式の長い文字列が表示されたら、トークンの生成は成功です。

手順3. HTMLファイルのアップロード

では次に、ブラウザに表示するHTMLファイルを準備します。

  • 以下のURLからZIPファイルをダウンロードします。
  • https://sapphire-donkey-2666.twil.io/assets/SyncBrowser.zip
  • ダウンロードしたZIPファイルを解凍し、２つのファイルがあることを確認します。
  • index.html
  • index.js
  • 管理コンソールのRuntime > Assetsを選択します。
  • **+**アイコンを押して、index.htmlを選択します。MAKE PRIVATEのチェックは外しておきます。
スクリーンショット 2018-07-15 11.15.41.png
  • Uploadボタンを押して、アップロードを完了します（デプロイが完了するまで待ちます）。
  • 同様に、index.jsもアップロードします。
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sync Browser</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery読み込み -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- BootstrapのJS読み込み -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
    <script src="https://media.twiliocdn.com/sdk/js/sync/releases/0.8.4/twilio-sync.min.js"></script>
    <script src="./index.js?version=1.04"></script>
  </head>
  <body>
    <h3>押されたボタンの状況を同期します</h3>
    <button id="btn1" type="button" class="btn btn-primary">ボタン1</button>
    <button id="btn2" type="button" class="btn btn-warning">ボタン2</button>
    <button id="btn3" type="button" class="btn btn-danger">ボタン3</button>
    <p>
        <div  id="result"></div>
    </p>
  </body>
</html>
index.js
let syncDoc, syncClient;

$(function() {
    
    // Twilio Sync Tokenの取得
    $.getJSON('../sync-token', function (tokenResponse) {
        // Sync Clientの初期化
        syncClient = new Twilio.Sync.Client(tokenResponse.token, { logLevel: 'info' });
        console.log(tokenResponse.token);

        syncClient.document('SyncBrowser')
        .then(function(doc) {
            // グローバル変数に格納
            syncDoc = doc;

            // Syncからメッセージが届いた場合のイベント
            syncDoc.on('updated', event => {
                text = event.value.text;
                console.log(`Sync updated. ${text}`);
                // 画面を更新
                $('#result').html(text);
            });
        })
        .catch(function(error) {
            console.log(error);
        });

        // Token Expire対策
        syncClient.on('tokenAboutToExpire', () => {
            $.getJSON('../sync-token', function (tokenResponse) {
                syncClient.updateToken(tokenResponse.token);
                console.log('Sync token updated.');
            });
        });
    });

    $('#btn1').on('click', function() {
        setSyncDoc("ボタン１が押されました");
    });
    $('#btn2').on('click', function() {
        setSyncDoc("ボタン２が押されました");
    });
    $('#btn3').on('click', function() {
        setSyncDoc("ボタン３が押されました");
    });

    function setSyncDoc(text) {
        const value = {
            text: text,
        };
        syncDoc.set(value);
        console.log('Sync publish.');
    };
});

<重要> index.jsのように、Assetsに格納されたコンテンツ（今回の場合は、index.html）から参照されるコンテンツだけを更新してAssetsにアップロードし直しても、キャッシュが効いてしまうので新しいコンテンツが反映されません。そのため、今回の例のように、呼び出すコンテンツに「?ver=1.xx」のようにバージョンを振るなどして、index.htmlとindex.jsの両方をアップロードするとキャッシュされないようになります。

手順5. テスト

  • 管理コンソールのAssestの一覧画面から、アップロードしたindex.htmlのURLをコピーします。
  • 新しいブラウザタブを開き、今のURLを実行します。
  • ボタンを押すと、メッセージが表示されることを確認します。
  • さらに複数のタブで上記URLを開き、どれかの画面でボタンを押すと、他のタブにも反映されることを確認します。
4
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
Sign upLogin
4
5