現在コーディング不要のアレクサスキル開発ツールはいくつもありstorylineもそのひとつ。どれも『Googleスプレッドシートを使って予め書き込んだおいたデータを読み込んでユーザーに返す』という外部サービスと連携させたスキルを作ることが可能です。
ただ、それだけではちょっとつまらないですよね。
そこで今回は「Airtable」というサービスをStorylineと連携させてユーザーがAlexaに発話した内容をスプレッドシートに保存することができるダイナミックなスキルを作っていきます！
事前に必要な準備
- StorylineアカウントがすでにAmazon Developerアカウントと連携したこと
- テストする時、実際のEcho端末がおすすめ
利用するウェブサービスは以下のサイトになります。
Airtable（Airtable.com）－ APIが豊富な「スプレッドシートｘデータベース」のようなハイブリッドなサービスで、新しいビジネスを早くローンチしたい場合は簡単にデプロイすることができるサービス。アカウントは約１０日間の無料版あり。
Zapier（Zapier.com）－ アプリとアプリを連携したり、作業を自動化に設定できるサービス。当記事の場合、ZapierがStorylineとAirtableを結合する「のり」みたいな役割で使います。アカウントは約１０日間の無料版あり。
Storyline（getStoryline.com）－ コーディング無し、Alexaスキルをドラグ＆ドロップ形で簡単に開発できるウェブサービス。Custom Skillは無料。
今回はいくつかのサービスを行き来するので少し長くなります。なのでゆっくり見て頂けると幸いです！
Airtableのセットアップ
まず始めに、「Airtable」の設定を行います。これをすることで、ユーザーが発したセリフをデータベースに保存することが可能に。先程も言いましたが、AirtableはGoogleスプレッドシートにデータベース機能がついたようなサービスです。
では、始めましょう！まずは、Airtableアカウントを作って、簡単なデータベースを作成していきます。
- LINK
ページ真ん中の「Get Started」または「Sign up」をクリック
次は、メールアドレスで登録またはGoogleアカウントで、どちらかを選んでサインインします。Googleアカウントを事前に持っている方はGoogleの方が早いです。
サインインできたら、ワークスペースのダッシュボードになります。下の「Add a workspace」をクリック。
Workspace2が出てくるので、矢印をクリックしてメニューから「Rename workspace」をクリックしてワークスペース名を編集することができます。ここでは、「Smartio1」と入力しました。
次は、「＋」をクリックし、「Start from scratch」を選んで新規データベースを作ります。
データベースの名前を自由に編集することができます。ここでは、「Demo1」と入力しました。
すると、Demo1のデータベースが作成されます。クリックしてデータベースに入りましょう。
よくあるExcelや、Googleスプレッドシートのようなワークシートがでてきます。
Table 1の矢印を押してメニューから「Rename table」を選択しワークシート名を編集。名前は何でも良いですがここでは、「SayThisOnLoad」を入力します。
次に、スプレッドシートの一番左の「Name」コラムを編集。矢印を押してメニューを開き「Rename field」を選択します。
ここでは分かりやすいように「AlexaUserID」と入力し、「Save」をクリックします。
次に、最初から入っている２つのコラムが違うデータタイプなので削除しましょう。矢印を押してメニューから「Delete field」をクリックすると削除できます。
「＋」を押して、新しいコラムを追加します。先程と同じように矢印を押してメニューを開き「Rename field」をクリックして「AlexaSayThis」と入力します。名前はあくまで分かりやすくしているだけなので別の名前でも問題ありません！
以上で、ひとまずAirtable側での設定は完了です。次にStorylineでスキルの枠組みを作成していきましょう。
Storylineで開発環境のセットアップ
次は、Storylineでスキルの枠組みを作成していきます。getstoryline.comへアクセスしましょう。
ログインして「Create Skill」をクリックし、「New Custom Skill」を選んで新規スキルを作ります。（Storylineアカウント作成方法と制作方法はこちらStoryline制作マニュアル～登録・スキル制作基礎編～を参考にしてください）
スキル名のところに好きな呼び出し名を入力してください。ここでは例として「デモスキル」と入力しました。必ずメニューから「Japanese」を選んでください。、「No Template」のままにして「Get Started」をクリックします。
すると、Storyline開発画面になり、４つのブロックができます。
最初から入っている「Welcome」「Help」「No」「Stop」ブロックの内容を日本語に変更して、上画像のようになれば一旦スキルの枠組みは完了です。次にAirtableとStorylineを繋げるために「Zapier」の設定を行います！
ZapierでAPIのセットアップ
AirtableとStorylineの基本的な設定が完了しました。次に、StorylineとAirtableを結合する「のり」のような役割を持つZapierを使ってサービスを結合します！
次は、zapier.comへアクセスして、アカウント作成をしましょう。Airtableと同じく、メールアドレスまたはGoogleアカウントのどちらかでアカウントが作れます。ではログインしてみましょう。
ログイン後、このダッシュボード画面がでてきます。これから、先程のStorylineスキルをAirtableデータベースに接続するため、Zapierのapp（アプリ）を使用します。
左側の「Search for an app」をクリックし、「webhook」と入力します。（webhookというものは、基本的に“トリガー”というもので考えたら大丈夫です。例えば、A側でトリガーが発生したら、B側でアクションが行うという仕組みです。）
入力途中で、「Webhooks by Zapier」がでてくるはずなので、それをクリックします。そして「Make a Zap!」をクリック
すると、トリガーの設定画面になります。
左上の「Name your zap」をクリックして、トリガーの名前を編集しましょう。ここでは「Alexa On Load」と入力して設定していきます。そして、「Catch Hook」を選択して、「Save + Continue」をクリックしてください。
次は、この画面がでてきますが「Continue」をクリックして先へ進みましょう。
次の画面に、先程作成したwebhookのURLがでてきます。このURLを使うのでコピーしておきましょう！続いては、Storylineに戻ります。
Storylineの開発画面にもどり、Welcome Blockをクリックします。「・・・」アイコンを押し、「Integration」をクリックしてください。（Integrationとは、基本APIとの意味です。サービスAがサービスBとやり取りをする時に、どんな情報をBに送信するかの設定です。）
次に、ユーザーがスキルを開く時に、ユーザーのAmazon IDが自動的にAirtableデータベースに保存されるところの設定をします。各箇所に、以下のことをしてください。
- Enter name of integration step → 「OnLoad Event」
- Request URL → POSTを選んで、先程ZapierのURLを入力
- Enter HTTP header → 「{}」を入力
- Body → 「{“AmazonUserID”:”{{amazonUserId}}”}」を入力
後でEcho端末でテストするため、現在作成したスキルをAmazon Developerアカウントにアップロードします。Storylineの開発画面の右上の「Upload to Alexa」をクリックしてください。
Zapierにもどります。ここでは、StorylineとZapierの間の送信をテストします。「Ok, I did this」をクリックすると、Zapierが通信を待つ状態になるので、お持ちのEcho端末に向けて、「アレクサ、デモスキルを開いて」と話かけてください。（デモスキルへようこそ！との返事がくるはずです！）
User: アレクサ、デモスキルを開いて
Alexa: デモスキルへようこそ！
以上のやり取りが合った時点で、
このように使用したユーザーのAmazon IDが表示されます。
次は、Zapierが取得したAmazon IDをどう処理するのかを設定しましょう。今回はAmazon IDをAirtableのシートに記録していきます。左側の「Add a step」をクリックして、「Action/Search」を選択します。
すると、またアプリの選択がでてきます。「airtable」を入力して、「Airtable」をクリックしてください。
ここでは、「Find Record」を選択し、「Save + Continue」をクリックします。 （Find Recordは、ユーザーIDがデータベースに入ってくる時に、全て既存のIDと比べた結果、新規IDかどうかの判断を行い、そして処理の方法を決めることができる機能です。）
次は、Airtableアカウントに接続します。「Save + Continue」をクリックします。
BaseのSearchをクリックし、繋げたいデータベースを選択しましょう。ここの場合は、先程作成した「Demo1」を選択します。
次は、TableのSearchのところをクリックし、繋げたいワークシートを選択。「SayThisOnLoad」をクリックしてください。
Search by FieldのSearchのところをクリックし、保存したいコラムの場所を選択します。ここの場合は、「AlexaUserID」をクリックします。
次は、ユーザーIDが既存のものなのか、新規のものなのか判断したいので、Search ValueのSearchのところをクリックし、「Amazon User ID amzn1.ask.account.A…」をクリックします。
すると、緑色の枠でユーザーIDがでてきます。「Create Airtable Record if it doesn’t exist yet?」にチェックを入れて、AlexaUserIDのSearchのところをクリックし、「Amazon User ID amzn1.ask.account.A…」をクリックします。
ここでは、新規ユーザーと判断された場合にAlexaが発話する文章を入れることができます。AlexaSayThisに、「新規ユーザーですね。あなたの名前を登録します。お名前は何ですか？」のような文章を今回入れてみました。
そして「Fetch & Continue」をクリックします。
Zapierが自動的にAirtableとやり取りするので、データベースへの保存に問題がなければ、緑色の「Test Successful!」がでてきます！「Finish」をクリック！
最後に、ページ中央にある「YOUR ZAP IS」のスイッチをONにして完了です！
実際にAmazon IDは保存されるのかテストをしてみた
Airtableのスプレッドシートにもどります。現状は、全て空白です。では、今もう一度Echo端末に向けて、「アレクサ、デモスキルを開いて」と話かけてみましょう！！！
User: アレクサ、デモスキルを開いて
Alexa: デモスキルへようこそ！
ジャーン！AlexaUserIDのコラムに、ユーザーのアカウント情報がちゃんとデータベースに保存されたことがみれました！
今回やってみて分かった事、今後可能なこと
・Google Sheetsより、Airtableの方がセルの設定と使用が便利かつ簡単
・実際にユーザーがEchoに発話した内容をデータベースに保存可能
・Zapierは便利なAPIで、Storyline（フロントエンド）がAirtable（バックエンド）との繋がりに重要な一部
・Amazon User IDだけではなく、ユーザー発話で保存した内容を後でスキル内に引き返すことができたら面白いスキルになる
・セルにただの文字だけでなく、音声ファイルのURLを入れて、音声を再生させることもできる
エンジニアまた非エンジニアのみなさん、ぜひ上記の基本知識を利用して、ユーザー情報を保存できるよう、よりダイナミックなAlexaスキルを作っていきましょう！
