事の始まり

どうも会社に職場見学の中学生が来るらしい...
その中学生はIT分野に興味があるとのこと...
そんなこんなで、普段の業務の説明をしてほしいとのこと...

業務の説明しても僕が中学生なら飽きると思うし、多分ときめくことが少ないと思ってしまい「プログラミングを簡単にしてみましょう」という提案を気軽にしてしまったのが事の始まりです。

ただ、その中学生たちがどこまでのスキルがあってコードを書いたことがあるかすらの情報もありません。
過去の経験からして、アウトプットしたいプロダクトが明確じゃないと正直つまらない
(私は、参考書とかのサンプルコードをなぞると眠くなる人で、逆引き的に参考書を使いつつ理解を深めるような進め方をする人です。)

こんな目標を設定

そんな背景から下記のような目標を満たせるツールを作ってみる事にしました。

アラートとかコンソールログに出る結果ではない、面白みのある結果の出し方(出来るだけ記憶に残したかった)
プログラミングを知らなくても、順次、分岐、反復のような各言語共通の基礎を簡単に理解できること

上記目標を実現するために自身が持っているスキルの中で下記の技術を合わせることにしました。

面白みのある結果の出し方 → Alexaに喋らせよう！
各言語共通の基礎を簡単に理解できる → ビジュアルプログラミングで対応しよう！

アウトプット部分がAlexaなのは、普段の業務の中でAlexaスキルを開発していることもありますがスマートスピーカーの返答内容を自分の手で作れたということは割と記憶に残る体験になるかなという思いもあります。(本当のデジタルネイティブ世代と生きてきた時代背景が違うので、「別に普通だね！」で終わる可能性もあります。)
ビジュアルプログラミングとしたのは、スキルセットがわからないため一切コードを書いたことがない子が1人でもいた場合、コーディング体験することが苦痛となってしまいプログラミングへの興味が薄れてしまわないようにという観点からです。

ビジュアルプログラミングとは

ご存知の方も多いかとは思いますが、ビジュアルプログラミングとは文字ではなく視覚的に分かりやすいオブジェクトをブロック遊びのように組み合わせてコーディングをするプログラミング言語です。小・中学生向けのプログラミング教室などで「Scratch」を使った事例などもあるため昔よりも認知度は高くなっていると思います。
あくまでもプログラミングの知識を習得するキッカケとすることが趣旨なので、ビジュアルプログラミングで実際のサービスを作るということはまずないです。

Google Blockly

Googleが2012年6月に公開されたビジュアルプログラミングエディタ。
あくまでもBlocklyはビジュアルプログラミングエディタであって、ビジュアルプログラミング言語ではないのでその点は注意。
ドラックアンドドロップで、ブロックを組み立てるように任意のプログラミング言語のコーディングが可能。
現在は下記のプログラミング言語に対応している模様。

JavaScript
Python
PHP
Lua
Dart

過去にはAndroid、iOSも対応していたようですが、2019年4月時点では非推奨となっています。
今回は、Alexa向けスキルのメソッドを組み立てたいのでJavaScriptを用います。

Blockly-AlexaTalk

早速ですが、今回作ったものです。

Github - Blockly-AlexaTalk

今回は時間の都合で、関数の概念を教えることは難しいことから順次、反復、分岐の3要素に絞り込みました。
プログラムの基礎となる3要素を通し、効率よくAlexaの応答内容を組み立てる内容を前提としています。
上記の例だと最終的にAlexaは「1足す1は、2です」と発話する結果を生成しています。

Installation

Node.js ASK CLIのセットアップ

Node.jsおよび、ASK CLIのセットアップが必要になります。
また、Alexaのスキルとして稼働させるためにAWSのアカウントの取得、Amazon Developerアカウントの取得も必要です。
ASK CLIのセットアップに関しては下記を参照してください。

ASK CLI クイックスタート

依存モジュールのインストール

プロジェクト本体は上記のGitのリポジトリからクローンしてください。

$ cd hoge/hoge
$ git clone https://github.com/MasamiYamate/Blockly-AlexaTalk.git

クローン後、プロジェクトのディレクトリにてnpm installを実行し依存モジュールをインストールします。

$ cd Blockly-AlexaTalk-master/
$ npm install

How to use

起動方法

普通にnodeを実行するだけです。

$ node index.js

以後、http://localhost:3000 にアクセスするとBlocklyのエディタ画面が開きます。

Blockの組み立て方

エディタ画面左側にToolBoxが表示され、その中にいくつかのカテゴリ、組み立てに必要するブロックが表示されます。
その中から必要なブロックをドラックアンドドロップで右側のワークスペースエリア(白いキャンバス部分)に移動させ、プログラムを組み立てていきます。

Blocky-AlexaTalkだけの注意点

必ず最後のブロックは、発話ブロックで終わるようにして発話ブロックには、文字列を渡してください。
なぜかというと生成しているメソッドは、発話する文字列を組み立て戻り値で戻す前提になっているためです。
戻り値として発話内容がないと、AlexaのLaunchRequestで発話させる内容がないことになりErrorHandlerが実行されます。

Lambdaへのアップロード

ページ下部にあるLambdaへアップロードをクリックすると自動的にASK CLIのask deployが実行されます。
スキルが生成されていない場合でも、自動的にスキルの生成まで行われます。

デモムービー

おわりに

ソースを見ていただくとわかると思いますが、かなりの突貫工事の荒技なので綺麗とは言えないです。
何かご指摘や改善すべき点などありましたらコメントいただけますと幸いです。
最後までお読みいただきありがとうございました。

ビジュアルプログラミングエディタ「Google Blockly」で、Alexaの応答内容を作る