はじめに

今年の8月に正式リリースしましたTwilio Studioに作成したフローをインポート、エクスポートできる機能が12/12に加わりましたのでご紹介します。

Twilio Studioのハンズオンを開催した時、よくお客様から作成したフローを自分のアカウントへ移行したいというリクエストをいただいていたのですが、今まではそのリクエストに応えることができませんでした。
しかし、この機能が加わったことで、自分の環境へフロー情報をインポートするだけでフローが移行され、使うことができます。

まずは、エクスポート機能の利用方法から

既に作成したフローのEditorページを開きます。
「Trigger」ウィジェットをクリックすると右の項目覧に「FLOW CONFIGURATION」が表示されます。下へスクロールし「Show Flow JSON」をクリックするとJSON形式でフローの情報がポップアップページとして表示されます。
そのポップアップページの下に「Copy Flow Definition」というボタンがあるので、それをクリックし情報をコピーします。

以上でフローのエクスポートは完了です！

次にインポート機能の利用方法です

移行先のStudioダッシュボード上で新しいフローを作成します。
フローを新たに作成する時に、名前を記入した後ポップアップ画面に表示されるテンプレートメニューの一番下に掲載されている「Import from JSON」を選択し、以下の画像のように青チェックが入っていることを確認したら「Next」をクリックします。
次に「New Flow」ページが表示されるので、｛｝を削除します。
先程のエクスポートの手順でコピーしたJSONをペーストして「Next」をクリックします。

フローが移行されていることを確認したら完了です。

この機能のメリット

この機能を利用することで、フローの共有やアカウントを超えた移行が可能になります。
JSONを直接編集したり生成して利用することもできます。
また、フロー自体のバックアップを取ることが可能になります。

ただ、外部に共有する時に注意することがあります。
この機能を使用することで、簡単にフローを共有することは可能ですが、中には共有したくない情報も含まれるので、共有方法に関しては注意が必要です。

共有時の注意点

「flow_url」の情報は削除しておきましょう。

JSONに含まれる「flow_url」には、Account SIDが含まれております。Account SIDはTwilioアプリを使用する時に必要となるユニークIDです。
パブリックに公開することはおすすめできないため、ダブルクオーテーション内のurl情報は削除します。
「flow_url」は以下の例のように空欄の状態で共有しても、インポート時にTwilio側で新たに生成されるので大丈夫です。

{
  "description": "A New Flow",
  "states": [
    {
      "type": "InitialState",
      "name": "Trigger",
      "properties": {
        "offset": {
          "x": -1270,
          "y": 131
        },  
      "_flow_url": "※これはコメントです※　↓の「flo_url」のようにあらかじめurlを削除しましょう。"
      "flow_url": ""
      },
        "transitions": [

電話番号などの個人情報はダミー情報と入れ替えておきましょう。

「from」や「to」などフローを実行する上で必要となる項目は空欄の状態でインポートし、保存しても、再度開く時にエラーが発生してしまうので、以下の例のようにダミー情報を入れておくと便利です。

        "body": "{{widgets.gather_1.SpeechResult}} をお送りします。",
        "_from": "※これはコメントです※　↓のようにダミー情報と入れ替えましょう。",
        "from": "+81000000000",
        "to":  "+81000000000",
        "media_url": null,
        "service": "{{trigger.message.InstanceSid}}",
        "channel": "{{trigger.message.ChannelSid}}",
        "attributes": null

試してみよう

今回の記事のために簡単なフローを用意しましたので、是非お試しください。

フローの仕組みは以下の通りです。

フローに紐付けている050番号へ架電すると自動応答機能が起動し、お客様の好きなTwilioプロダクトを聞きます。
その後Twilioの音声認識機能側で取得した音声データをテキスト化した「SpeechResult」をSMSで送信します。

前提

アップグレード済みのTwilioアカウントを持っている必要がございます。
- トライアルアカウントサインアップ手順はこちら
- アップグレード手順はこちら
国内用050番号とUS番号をご自身のアカウント上で取得済みの必要がございます。

フロー情報

下記JSONをインポートしてご利用ください。

インポートする際に変更が必要な項目は以下の２点です。
・　"from": "+81000000000",　→　取得したUS番号を設定します。
・　"to": "+81000000000",　→　SMS送信宛先の番号を設定します。

{
  "description": "A New Flow",
  "states": [
    {
      "type": "InitialState",
      "name": "Trigger",
      "properties": {
        "offset": {
          "x": -280,
          "y": -180
        },
        "flow_url": ""
      },
      "transitions": [
        {
          "event": "incomingMessage",
          "conditions": [],
          "next": null,
          "uuid": "8ee7df71-4003-4cbf-8379-431a101a3b54"
        },
        {
          "event": "incomingCall",
          "conditions": [],
          "next": "FF5cc952a446719756d59c627e56e1e221",
          "uuid": "0f9469ab-ab0b-403f-ac82-6fb3ec67fc56"
        },
        {
          "event": "incomingRequest",
          "conditions": [],
          "next": null,
          "uuid": "9ca0ba1a-ca09-49d8-9bc2-f3bc8f576103"
        }
      ],
      "sid": "FFe34a18ef52140adff6a817e0940ec0e5"
    },
    {
      "type": "Gather",
      "name": "gather_1",
      "properties": {
        "offset": {
          "x": -430,
          "y": 20
        },
        "timeout": 30,
        "finish_on_key": "",
        "stop_gather": true,
        "number_of_digits": null,
        "save_response_as": null,
        "say": "お電話ありがとうございます。\nお客様のお好きなトゥイリオプロダクトを教えてください。\nちなみに僕の好きなプロダクトは、やっぱりボイスかな。",
        "play": null,
        "voice": "Polly.Takumi",
        "language": "ja-JP",
        "loop": 1,
        "hints": null,
        "gather_language": "ja-JP"
      },
      "transitions": [
        {
          "event": "keypress",
          "conditions": [],
          "next": null,
          "uuid": "da2a06e5-4a81-478a-8d9a-cd357532465c"
        },
        {
          "event": "speech",
          "conditions": [],
          "next": "FF156b06c663b9cdf0d5998bbd61d00401",
          "uuid": "ec9a8091-533c-4b8a-950d-c377c6e16e72"
        },
        {
          "event": "timeout",
          "conditions": [],
          "next": "FF5cc952a446719756d59c627e56e1e221",
          "uuid": "acff26d9-81e2-495d-9c5d-a76fac09a740"
        }
      ],
      "sid": "FF5cc952a446719756d59c627e56e1e221"
    },
    {
      "type": "Message",
      "name": "send_message_2",
      "properties": {
        "offset": {
          "x": -80,
          "y": 260
        },
        "body": "ありがとうございました。お客様の好きなプロダクトは、{{widgets.gather_1.SpeechResult}}ですね。",
        "from": "+81000000000",
        "to": "+81000000000",
        "media_url": null,
        "service": "{{trigger.message.InstanceSid}}",
        "channel": "{{trigger.message.ChannelSid}}",
        "attributes": null
      },
      "transitions": [
        {
          "event": "sent",
          "conditions": [],
          "next": null,
          "uuid": "181580ee-59d4-4089-a4d3-9aae540649fb"
        },
        {
          "event": "failed",
          "conditions": [],
          "next": null,
          "uuid": "36096a17-2415-425f-80bb-b55d4e7f4f0d"
        }
      ],
      "sid": "FF156b06c663b9cdf0d5998bbd61d00401"
    }
  ]
}

最後に

Studioはドラッグ&ドロップでフローを構築できます。
自動応答や転送など基本的な機能だけでなく、音声認識やHTTP Request機能など、より高度な使い方が可能です。

また、今回の機能の他にもグローバル変数を利用することが可能になりました。
「Set Variables」ウィジェットを利用することで、フローの中でグローバル変数を生成して、他のウィジェットから参照したり更新することができるようになります。

Twilio Studioにインポート、エクスポート機能が加わりました。