Voiceflow Updates: Code Blockから外部のライブラリを呼び出すことができるようになりました！

Voiceflowの新機能の続きです。

ノンコードで使えるVoiceflowですが、コードも書くことができます。それがCustom Code Blockです。

f:id:kun432:20200815034939p:plain

今回、Custom Code Blockに外部のライブラリを読み込む機能が追加されましたので、ご紹介します。

Custom Code Blockとは？

以前にAPLを使う場合にディスプレイ有無を判定するためにCode Blockを使うやり方をご紹介しました。

ここでAPL対応かどうかをチェックします。以下のコードを入力します。

if (voiceflow.capabilities && ('Alexa.Presentation.APL' in voiceflow.capabilities)) {
hasDisplay = 1;
} else {
hasDisplay = 0;
}

voiceflow.capabilitiesというのは、Voiceflowが持っているビルトインの変数というかオブジェクトです。この中に、今使っているデバイスがどういう機能をサポートしているかの情報が入ってます。APL対応機種、すなわち、画面付きデバイスの場合は Alexa.Presentation.APL というオブジェクトが入ってくるのでこれがあるかどうかをチェックするというわけですね。API対応していれば 1 、非対応であれば 0がhasDisplayに入ります。

こんな感じで、JavaScript (ES6) で書けて、Voiceflowの変数などにもアクセスができるようになっています。なので、ちょっとしたパースとかフィルタ的な処理なんかの際にはとても便利なのです。

ただし、これまでは外部のライブラリを使うことができませんでしたので、

外部のJSファイルやnpmパッケージ等が使えないので、標準的なJavaScriptで書くしかない
各スキルごとに保存されるので使い回しができない。コピペするしかない。

というところが不便だったのですが、なんとこれができるようになりました！実際に見てみましょう！

サンプルスキル

サンプルとして、外部にホストされているAPL判定を行うスクリプトを参照してチェックするデモです。

f:id:kun432:20200815040802p:plain

まず、APL判定を行うスクリプトをモジュールにしてアクセスできるところに置きます。今回はgistを使いました。

f:id:kun432:20200815041934p:plain

コードはこんな感じです。hasDisplayというメソッドでAPL判定結果を返します。

で、このファイルに参照するためのURLが必要です。gistの場合はそのままのURLではアクセスできないので、ファイルの右側にある"Raw"をクリックします。

f:id:kun432:20200815042408p:plain

ファイルの内容が表示されていますね。このとき表示されているURLをコピーします。

f:id:kun432:20200815042335p:plain

ではVoiceflowの方です。最初のCode Blockは以下のようなコードになっています。

f:id:kun432:20200815042739p:plain

const vfutils = requireFromUrl('https://gist.githubusercontent.com/kun432/d8560997d4b1d001b09bbe7cf1bc5c52/raw/294f5bf4ac749c4ecdb7b2f38fbc06a329e0ec26/vf-utils.js');
hasDisplay = vfutils.hasDisplay(voiceflow);

外部のライブラリを読み込む場合はrequireFromUrlを使います。さきほどgistに用意したjsファイルをURLから読み込んで、vfutilsというオブジェクトに入れます。 vfutilsオブジェクトのhasDisplayメソッドにビルトイン変数であるvoiceflowを渡すと、ディスプレイ対応なら1、非対応なら0が返ってくるので、これをvoiceflow側の変数hasDisplayに入れます。

このときhasDisplay変数はvoiceflow側で事前に作成しておく必要があるので注意してください。

f:id:kun432:20200815043222p:plain

あとは、Condition Blockを使ってhasDisplay変数をチェックして、画面付きデバイスならAPLで画面を表示、そうでない場合はカードを送信するという形ですね。

f:id:kun432:20200815043607p:plain

実際に確認してみるとこうなります。

画面付きの場合。Echo Showを使いました。

f:id:kun432:20200815043957j:plain

画面なしの場合。Alexaアプリを使いました。

f:id:kun432:20200815044108p:plain

別のスキルでも使いたい場合は上記の2行をCode Blockに書くだけですし、jsファイル側を編集すれば一括で新しい処理を追加したりできるのでとてもよいです！

サンプルその２

moment.jsを使ってみました。CDNであるjsdelivr.netのものを使います。

f:id:kun432:20200815055416p:plain

コードはこんな感じです。よくある時間差を計算させるやつですね。moment.jsだと非常にシンプルにかけます。

const moment = requireFromUrl('https://cdn.jsdelivr.net/npm/moment');

const now = moment().add(9,'h');
const nenmatsu = moment('2021-1-1 00:00:00').add(9,'h');
now_formatted = now.format("YYYY-MM-DD HH:mm");
diff = nenmatsu.diff(now, 'days', false);

9時間足してるのはタイムゾーンを"Asia/Tokyo"にするためですね。moment-timezone使えればかんたんなのですが、moment-timezoneは読み込めませんでした。パッケージの構成等によっては必ずしも使えるというわけではないようです。

テストしてみましょう。

f:id:kun432:20200815055509p:plain