データを保存できるAirtableとStorylineを連携させてAlexaスキルで情報を保存する方法

airtableとstorylineでalexaスキルを作る

現在コーディング不要のアレクサスキル開発ツールはいくつもありstorylineもそのひとつ。どれも『Googleスプレッドシートを使って予め書き込んだおいたデータを読み込んでユーザーに返す』という外部サービスと連携させたスキルを作ることが可能です。

ただ、それだけではちょっとつまらないですよね。

そこで今回は「Airtable」というサービスをStorylineと連携させてユーザーがAlexaに発話した内容をスプレッドシートに保存することができるダイナミックなスキルを作っていきます!

事前に必要な準備

  • StorylineアカウントがすでにAmazon Developerアカウントと連携したこと
  • テストする時、実際のEcho端末がおすすめ

利用するウェブサービスは以下のサイトになります。

AirtableAirtable.com)- APIが豊富な「スプレッドシートxデータベース」のようなハイブリッドなサービスで、新しいビジネスを早くローンチしたい場合は簡単にデプロイすることができるサービス。アカウントは約10日間の無料版あり。

ZapierZapier.com)- アプリとアプリを連携したり、作業を自動化に設定できるサービス。当記事の場合、ZapierがStorylineとAirtableを結合する「のり」みたいな役割で使います。アカウントは約10日間の無料版あり。

StorylinegetStoryline.com)- コーディング無し、Alexaスキルをドラグ&ドロップ形で簡単に開発できるウェブサービス。Custom Skillは無料。

今回はいくつかのサービスを行き来するので少し長くなります。なのでゆっくり見て頂けると幸いです!

Airtableのセットアップ

まず始めに、「Airtable」の設定を行います。これをすることで、ユーザーが発したセリフをデータベースに保存することが可能に。先程も言いましたが、AirtableはGoogleスプレッドシートにデータベース機能がついたようなサービスです。

では、始めましょう!まずは、Airtableアカウントを作って、簡単なデータベースを作成していきます。

airtableとstorylineでalexaスキルを作る

ページ真ん中の「Get Started」または「Sign up」をクリック

airtableとstorylineでalexaスキルを作る

次は、メールアドレスで登録またはGoogleアカウントで、どちらかを選んでサインインします。Googleアカウントを事前に持っている方はGoogleの方が早いです。

airtableとstorylineでalexaスキルを作る

サインインできたら、ワークスペースのダッシュボードになります。下の「Add a workspace」をクリック。

airtableとstorylineでalexaスキルを作る

Workspace2が出てくるので、矢印をクリックしてメニューから「Rename workspace」をクリックしてワークスペース名を編集することができます。ここでは、「Smartio1」と入力しました。

airtableとstorylineでalexaスキルを作る

次は、「+」をクリックし、「Start from scratch」を選んで新規データベースを作ります。

airtableとstorylineでalexaスキルを作る

データベースの名前を自由に編集することができます。ここでは、「Demo1」と入力しました。

airtableとstorylineでalexaスキルを作る

すると、Demo1のデータベースが作成されます。クリックしてデータベースに入りましょう。

airtableとstorylineでalexaスキルを作る

よくあるExcelや、Googleスプレッドシートのようなワークシートがでてきます。

airtableとstorylineでalexaスキルを作る

Table 1の矢印を押してメニューから「Rename table」を選択しワークシート名を編集。名前は何でも良いですがここでは、「SayThisOnLoad」を入力します。

airtableとstorylineでalexaスキルを作る

次に、スプレッドシートの一番左の「Name」コラムを編集。矢印を押してメニューを開き「Rename field」を選択します。

airtableとstorylineでalexaスキルを作る

ここでは分かりやすいように「AlexaUserID」と入力し、「Save」をクリックします。

airtableとstorylineでalexaスキルを作る

次に、最初から入っている2つのコラムが違うデータタイプなので削除しましょう。矢印を押してメニューから「Delete field」をクリックすると削除できます。

airtableとstorylineでalexaスキルを作る

「+」を押して、新しいコラムを追加します。先程と同じように矢印を押してメニューを開き「Rename field」をクリックして「AlexaSayThis」と入力します。名前はあくまで分かりやすくしているだけなので別の名前でも問題ありません!

以上で、ひとまずAirtable側での設定は完了です。次にStorylineでスキルの枠組みを作成していきましょう。

Storylineで開発環境のセットアップ

次は、Storylineでスキルの枠組みを作成していきます。getstoryline.comへアクセスしましょう。

airtableとstorylineでalexaスキルを作る

ログインして「Create Skill」をクリックし、「New Custom Skill」を選んで新規スキルを作ります。(Storylineアカウント作成方法と制作方法はこちらStoryline制作マニュアル~登録・スキル制作基礎編~を参考にしてください)

airtableとstorylineでalexaスキルを作る

スキル名のところに好きな呼び出し名を入力してください。ここでは例として「デモスキル」と入力しました。必ずメニューから「Japanese」を選んでください。、「No Template」のままにして「Get Started」をクリックします。

airtableとstorylineでalexaスキルを作る

すると、Storyline開発画面になり、4つのブロックができます。

airtableとstorylineでalexaスキルを作る

最初から入っている「Welcome」「Help」「No」「Stop」ブロックの内容を日本語に変更して、上画像のようになれば一旦スキルの枠組みは完了です。次にAirtableとStorylineを繋げるために「Zapier」の設定を行います!

ZapierでAPIのセットアップ

AirtableとStorylineの基本的な設定が完了しました。次に、StorylineとAirtableを結合する「のり」のような役割を持つZapierを使ってサービスを結合します!

airtableとstorylineでalexaスキルを作る

次は、zapier.comへアクセスして、アカウント作成をしましょう。Airtableと同じく、メールアドレスまたはGoogleアカウントのどちらかでアカウントが作れます。ではログインしてみましょう。

airtableとstorylineでalexaスキルを作る

ログイン後、このダッシュボード画面がでてきます。これから、先程のStorylineスキルをAirtableデータベースに接続するため、Zapierのapp(アプリ)を使用します。

airtableとstorylineでalexaスキルを作る

左側の「Search for an app」をクリックし、「webhook」と入力します。(webhookというものは、基本的に“トリガー”というもので考えたら大丈夫です。例えば、A側でトリガーが発生したら、B側でアクションが行うという仕組みです。)

入力途中で、「Webhooks by Zapier」がでてくるはずなので、それをクリックします。そして「Make a Zap!」をクリック

airtableとstorylineでalexaスキルを作る

すると、トリガーの設定画面になります。

airtableとstorylineでalexaスキルを作る

左上の「Name your zap」をクリックして、トリガーの名前を編集しましょう。ここでは「Alexa On Load」と入力して設定していきます。そして、「Catch Hook」を選択して、「Save + Continue」をクリックしてください。

airtableとstorylineでalexaスキルを作る

次は、この画面がでてきますが「Continue」をクリックして先へ進みましょう。

airtableとstorylineでalexaスキルを作る

次の画面に、先程作成したwebhookのURLがでてきます。このURLを使うのでコピーしておきましょう!続いては、Storylineに戻ります。

airtableとstorylineでalexaスキルを作る

Storylineの開発画面にもどり、Welcome Blockをクリックします。「・・・」アイコンを押し、「Integration」をクリックしてください。(Integrationとは、基本APIとの意味です。サービスAがサービスBとやり取りをする時に、どんな情報をBに送信するかの設定です。)

airtableとstorylineでalexaスキルを作る

次に、ユーザーがスキルを開く時に、ユーザーのAmazon IDが自動的にAirtableデータベースに保存されるところの設定をします。各箇所に、以下のことをしてください。

  • Enter name of integration step → 「OnLoad Event
  • Request URL → POSTを選んで、先程ZapierのURLを入力
  • Enter HTTP header → 「{}」を入力
  • Body → 「{“AmazonUserID”:”{{amazonUserId}}”}」を入力
airtableとstorylineでalexaスキルを作る

後でEcho端末でテストするため、現在作成したスキルをAmazon Developerアカウントにアップロードします。Storylineの開発画面の右上の「Upload to Alexa」をクリックしてください。

airtableとstorylineでalexaスキルを作る

Zapierにもどります。ここでは、StorylineとZapierの間の送信をテストします。「Ok, I did this」をクリックすると、Zapierが通信を待つ状態になるので、お持ちのEcho端末に向けて、「アレクサ、デモスキルを開いて」と話かけてください。(デモスキルへようこそ!との返事がくるはずです!)

User: アレクサ、デモスキルを開いて

Alexa: デモスキルへようこそ!

以上のやり取りが合った時点で、

airtableとstorylineでalexaスキルを作る

このように使用したユーザーのAmazon IDが表示されます。

airtableとstorylineでalexaスキルを作る

次は、Zapierが取得したAmazon IDをどう処理するのかを設定しましょう。今回はAmazon IDをAirtableのシートに記録していきます。左側の「Add a step」をクリックして、「Action/Search」を選択します。

airtableとstorylineでalexaスキルを作る

すると、またアプリの選択がでてきます。「airtable」を入力して、「Airtable」をクリックしてください。

airtableとstorylineでalexaスキルを作る

ここでは、「Find Record」を選択し、「Save + Continue」をクリックします。 (Find Recordは、ユーザーIDがデータベースに入ってくる時に、全て既存のIDと比べた結果、新規IDかどうかの判断を行い、そして処理の方法を決めることができる機能です。)

airtableとstorylineでalexaスキルを作る

次は、Airtableアカウントに接続します。「Save + Continue」をクリックします。

airtableとstorylineでalexaスキルを作る

BaseのSearchをクリックし、繋げたいデータベースを選択しましょう。ここの場合は、先程作成した「Demo1」を選択します。

airtableとstorylineでalexaスキルを作る

次は、TableのSearchのところをクリックし、繋げたいワークシートを選択。「SayThisOnLoad」をクリックしてください。

airtableとstorylineでalexaスキルを作る

Search by FieldのSearchのところをクリックし、保存したいコラムの場所を選択します。ここの場合は、「AlexaUserID」をクリックします。

airtableとstorylineでalexaスキルを作る

次は、ユーザーIDが既存のものなのか、新規のものなのか判断したいので、Search ValueのSearchのところをクリックし、「Amazon User ID amzn1.ask.account.A…」をクリックします。

airtableとstorylineでalexaスキルを作る

すると、緑色の枠でユーザーIDがでてきます。「Create Airtable Record if it doesn’t exist yet?」にチェックを入れて、AlexaUserIDのSearchのところをクリックし、「Amazon User ID amzn1.ask.account.A…」をクリックします。

airtableとstorylineでalexaスキルを作る

ここでは、新規ユーザーと判断された場合にAlexaが発話する文章を入れることができます。AlexaSayThisに、「新規ユーザーですね。あなたの名前を登録します。お名前は何ですか?」のような文章を今回入れてみました。

airtableとstorylineでalexaスキルを作る

そして「Fetch & Continue」をクリックします。

airtableとstorylineでalexaスキルを作る

Zapierが自動的にAirtableとやり取りするので、データベースへの保存に問題がなければ、緑色の「Test Successful!」がでてきます!「Finish」をクリック!

airtableとstorylineでalexaスキルを作る

最後に、ページ中央にある「YOUR ZAP IS」のスイッチをONにして完了です!

実際にAmazon IDは保存されるのかテストをしてみた

airtableとstorylineでalexaスキルを作る

Airtableのスプレッドシートにもどります。現状は、全て空白です。では、今もう一度Echo端末に向けて、「アレクサ、デモスキルを開いて」と話かけてみましょう!!!

User: アレクサ、デモスキルを開いて

Alexa: デモスキルへようこそ!

airtableとstorylineでalexaスキルを作る

ジャーン!AlexaUserIDのコラムに、ユーザーのアカウント情報がちゃんとデータベースに保存されたことがみれました!

今回やってみて分かった事、今後可能なこと

・Google Sheetsより、Airtableの方がセルの設定と使用が便利かつ簡単
・実際にユーザーがEchoに発話した内容をデータベースに保存可能
・Zapierは便利なAPIで、Storyline(フロントエンド)がAirtable(バックエンド)との繋がりに重要な一部
・Amazon User IDだけではなく、ユーザー発話で保存した内容を後でスキル内に引き返すことができたら面白いスキルになる
・セルにただの文字だけでなく、音声ファイルのURLを入れて、音声を再生させることもできる

エンジニアまた非エンジニアのみなさん、ぜひ上記の基本知識を利用して、ユーザー情報を保存できるよう、よりダイナミックなAlexaスキルを作っていきましょう!

注目今1番オススメする記事

ランキング一覧

スマートスピーカーを使った1番オススメしたい方法

スマートスピーカー比較

あなたにぴったりのスマートスピーカーが分かる!欲しくなる!

Smartio-store

Searchスマートスピーカーで出来ること・設定方法を検索




家電おすすめ記事