Scratchとenebularを連携させようとしてみた過程と結果・・・

こちらは、enebular Advent Calendar の 9日目 "だったはず" の記事になります。
（当初、enebular のアドベントカレンダー用に書いたのに、それを利用するまでの過程ではまり、Scratch の話がメインになってしまいました・・・）

最終的に、本記事があまりに enebular 要素が少ないので、別記事を書いて、そちらをアドベントカレンダー用記事として差し替えました。
　⇒ enebular editor をMacで試してみる

そして、本記事は、Scratch Advent Calendar の記事として利用することにしました。
以下、Scratch と enebular を連携させようとして、試行錯誤した結果についてです。

enebular を初めて使ったときの話

まず、アドベントカレンダーのテーマになっている「enebular」を、初めて使ったときの話について触れたいと思います。

enebular を初めて使ったのは、LINE BOOT AWARDS 2018 の期間中に実施された「Clova × enebularハンズオン」に参加したときでした。
このイベントは、LINE社が提供するAIアシスタント「Clova」のスキル開発を行うハンズオンで、enebular を使ったノンプログラミングでの開発を行いました。

ハンズオンの内容が気になる方は、その時の流れなどが記載された記事がありますので、ご覧ください。
　LINE Clova Extensions Kitとenebularを連携して会話させてみよう | enebular blog

この時は、enebularのフローを取り込む仕組みを活用することで、短時間でClovaスキルを作ることができました。

取り込んだフローの確認。#linebootawards #clova_cek #enebular pic.twitter.com/ULhmjLnRvc

— you (@youtoy) 2018年8月23日

上記のフローで、Clovaスキルを起動したときに応答を返し、さらにユーザの呼びかけに答える仕組みが実装されています。

本日の成果です。
同時に反応して、両方とも話してくれます。#linebootawards #clova_cek #enebular pic.twitter.com/ujvjvnJLMX

— you (@youtoy) 2018年8月23日

Scratchについて

次に、enebularと連携させようとした「Scratch」について記載します。

最近、子どものためのプログラミング道場である「CoderDojo」に関わるようになり、ビジュアルプログラミングを行うことが可能な Scratch をよく利用するようになりました。
（過去、4〜5年ほど前に、子ども向けのプログラミングイベントのサポーターをした際などに、限定的な部分のみ覚えて、参加者の子ども達のサポートをしたことはあったのですが）

この Scratch は、子ども向けのプログラミングイベントなどで良く使われていていることもあり、目にされたことがある方もいらっしゃるのではないでしょうか。
また、最近では2020年のプログラミング教育必修化の流れで、さらに目にする機会が増えていると思います。

なお Scratch は、MITメディアラボのライフロングキンダーガーテングループのプロジェクトで、無償で提供されているものです。
詳細は、公式サイトの説明をご覧ください。

Scratchの拡張性

Scratchは子ども向けのプログラミングという文脈で登場することが多いですが、使ってみると奥が深く、大人でも楽しめたりします。
また、機能拡張を行う仕組みもあり（※利用環境の制限があったりもしますが）、
例えば、小型ドローンの「Tello」を制御する際のフロントエンドなどにも使えたりします。

宿泊中の仙台のホテルで、石巻で思うように動作させられてなかった、
「小型ドローンのTello ＋ ビジュアルプログラミングのScratch」
に再挑戦。

回転動作がプログラム通りに動かなかった件は、ウェイトをかければ大丈夫そう？ pic.twitter.com/2jNs3MZSRg

— you (@youtoy) 2018年7月15日

Scratchで組んだプログラムはこちら。
今の状態は、ウェイト1秒の後の、反時計回りの命令が動いてない感じです。 pic.twitter.com/HoprhVCgWH

— you (@youtoy) 2018年7月15日

現在β版の Scratch 3.0 では、複数の言語での音声合成や、言語の翻訳機能なども簡単に扱えるようになっていたりします。
さらに、個人的に最近はまっているマイコンボード 「micro:bit」 とも簡単に連携できるようになっていて、マイコンボード内蔵のセンサー・LED・ボタンスイッチなどを組み合わせられたりします。

今回やろうとしたこと

この「Scratch と enebular をつなげること」が1つのゴールでした。
それが実現できれば、Scratch で今よりさらに様々なもの・サービスと連携させられて楽しいのではないか、と考えたためです。

今回できたこと

先に結論を書くと、今回実現できた内容は
Scratch の実験的拡張機能をテストするためのプラットフォーム「ScratchX」の「IFTTT拡張」を利用して、Webhook によるやりとりをした、
というところまででした・・・。

調査や検証の仮定で、Scratch と外部オンラインサービスとをつなぐ部分で、思いのほか時間を要してしまったのが原因です。

試行錯誤の過程

Scratch と外部のオンラインサービスとの接続

Scratch は、いくつかのバージョン（1.4、2．0、現時点でβ版である3.0）や、オンライン版／オフライン版があります。
当初は、上記の小型ドローン Tello の話のときに利用した、Scratch 2．0 のオフライン版を利用しようとしましたが、どうやら、外部のオンラインサービスと直接やりとりができないことが分かり・・・。

ローカルに Node.js などを利用して、仲介役のサーバを用意すれば良さそうでしたが、何か他にやり方がないか、さらに調査をしました。
その中で、ふと、サービス間連携でよく利用される「IFTTT」 を活用できないだろうかと思い、『Scratch IFTTT』というキーワードで検索そして、下記の情報にたどり着きました。
　IFTTT · savaka2/scratch-extensions Wiki · GitHub

内容を見ていくと、どうやら Scratch の実験的拡張機能をテストするためのプラットフォーム ScratchX のIFTTT拡張のようでした。
このページに書かれた説明や、拡張のJavaScriptのソースを読みつつ、ページ内にあったデモへのリンクを触ってみたりして、とりあえずScratchからの情報送信が行えるかをテスト。

「ScratchX でキーが押されたことを検出して、IFTTT経由でスマホに通知を送る＋通知のメッセージ内にパラメータ3つの値を含める」ということが実現できました（出力側をスマホへの通知にしたのは、簡単に試したり確認したりできるためです）。
なお、ScratchX と IFTTT のそれぞれで行ったことは、主に以下の内容でした。
　IFTTT：
　　A-1）Webhookでリクエスト・パラメータを受け取ることができるよう設定（アプレットを作成1）
　　A-2）リクエストを受け取ったときに、スマホにパラメータを含んだメッセージを送るよう設定（アプレットを作成2）
　　A-3）Webhookでリクエストを送るときに必要になるキーの情報を確認
　ScratchX：
　　特定のキーが押されたことを検知したブロック、上記のA-3）の情報を設定するブロック、Webhookのリクエストを送るブロックをつなげる

IFTTTとenebularの接続

ひとまず、IFTTTで「スマホに通知を送る」と仮に設定した部分は、最終的には「enebularへリクエストを送る」という内容にしなければなりません。
そこで、そのやり方が書かれた下記の記事を検索して参照しました。
　Google Homeで家の照明制御をするときのログを見てみたいのでenebularで可視化 | enebular blog

上記の記事を参考に、enebular と IFTTT のそれぞれを、以下のようにします。
　enebular：
　　B-1）上記の記事の「IFTTTのenebularへ送るしくみ」を参考に、IFTTTからの値を受ける入り口を作成
　　B-2）上記のB-1）の出力を、とりあえずデバッグにつなぎ、デバッグウィンドウに表示するよう設定
　IFTTT：
　　C-1）Webhookでリクエスト・パラメータを受け取ることができるよう設定（アプレットを作成1）
　　C-2）上記B-1）のリクエストを受け取ったときに、Webhookでリクエスト・パラメータを送るよう設定（アプレットを作成2）
　　C-3）Webhookでリクエストを送るときに必要になるキーの情報を確認

これで試したところ、ScratchX で送ったパラメータの値が enebular のデバッグウィンドウに表示されるのが確認できました。

まとめ

今回、Scratch（ScratchX） と enebular の間でのやりとりを、IFTTT を使うことで実現できました。

本来は、さらにここから Scratch側の作り込みや、enebular の出力先をカスタマイズをしたかったのですが、ここまでで想定以上に時間がかかってしまったので、それはまた別の機会に。
（ひとまず書き終わって内容を振り返ると、ScratchX の拡張に手を入れて enebular に直接リクエストを送るようにすれば、それらの間のIFTTT が不要になる気がする・・・）

その後の追記

本記事での、あまりの enebular 要素が少なかったので、以下の内容を別記事で書きました。
　enebular editor をMacで試してみる