LINE Clova のスキル開発ハンズオンに enebular を使った話

めちゃめちゃ遅れてしまいました :bow: 
この記事は[enebular Advent Calendar 2018](https://qiita.com/advent-calendar/2018/enebular) 10日目の記事です（すみませんすみませんすみません）。

当初は、本テーマと同様の Clova のスキル開発ネタ（体重管理スキル & FIrebase & LINE LIFF）で書こうと思っていたのですが、flow の読み込みに失敗したり、Firebase との接続ができなかったりといろいろつまづいたので、急遽 [enebular developer Meetup Vol.6](https://enebular.connpass.com/event/106731/) で登壇させていただいた内容をもう少し詳しく説明させていただくことにしました。

※ ちなみに、つまづいていた部分は enebular editor だと上手くいくかも？とお告げがあったので、そちらも改めて Qiita にまとめようと思います。

## ハンズオンの内容

11月上旬あたりに、中学生以上（大人も含む）を対象とした、LINE Clova のスキル開発教室を開きました。
1回一時間 × 3ターム行い、各タームごとに基本参加者は異なります（楽しんでもらえたようで、1回目に参加してくれた子が3回目にも参加してくれました）。

テーマは『LINE Clova と自由に会話をしてみよう』というもので、ゴールは

- VUI （Voice User Interface）の理解
- LINE Clova スキルの開発体験

としました。
なお、PC は持ち込み必須です。

## なぜ enebular を選んだか

一時間の開催で諸々の説明と開発をするには、さすがに時間が短すぎまずよね。
また、参加者はプログラミング経験がなくても楽しんでもらえるものにしたかったので、開発環境の構築時間を省きたかった（本筋ではないし）、しかし、コード書いてる感もそれなりに出したかった…というなんともワガママな要望にも答えてくれるツールとして、 enebular はとても適していました。

## 作るもの

まずは全員で以下のような星座おみくじスキルを作ります。

![スクリーンショット 2018-12-25 19.11.53.png](https://qiita-image-store.s3.amazonaws.com/0/92359/3e3189e9-7433-1ab6-a442-c16444a59eed.png)


（星座おみくじって、昔喫茶店やラーメン屋さんにありましたよね…最近あんまり見ないけど…今では岩手県滝沢市の工場でしか生産されていないんですよ…）



## flow

実際の enebular の flow になります。

発話（スキルの起動）による Payload を分析・加工をして、ユーザーへ返却するものです。
詳細は [flow を公開](https://enebular.com/discover/flow/ba41e88e-f999-461a-beb5-59f3313fe705)しておりますので、自由にいじってみてください。

![スクリーンショット 2018-12-25 19.15.56.png](https://qiita-image-store.s3.amazonaws.com/0/92359/568177db-bfb6-db17-95d5-8efe998c3047.png)




## ハンズオンの流れ

### 1. 動作確認

すでに上記の flow を fork したアカウントを渡し、実際に Clova で動くようにしてあるので、実際にスキルを起動させてみます。すると、どう頑張っても Clova は「かにざは大吉です」としか返してくれません。

### 2. flow に沿って流れを確認

動くことを確認して、ちょっと `違和感`を感じる部分があったので、そこを直していきます。
順番に辿っていくと、 `星座判定`が正常に終了したあとの template の中身が固定で「かにざは大吉です」となっています。
<img width="754" alt="スクリーンショット 2018-12-25 19.28.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/92359/b2d97cfc-05cc-6eab-f39e-71f512547e89.png">

### 3. 正しく動作させるために修正を加える

問題が分かったので、次は動的にユーザーが発した星座によって、Clova が喋る内容を変えてみます。
コード書いてる感をどう与えるか、でだいぶ悩んだのですが、それっぽい文字列を入力してもらう手段をまずは試してみました。

```javascript
 {{payload.request.intent.slots.SeizaSlot.value}}は、大吉です
```

…これはちょっとイケてなかったです :cry:

ともあれ、これで再度 Deploy をすると、「みずがめざは…」「ふたござは…」と、発話内容を変えることができました :sparkles:

次に気になるのは、大吉しか出ない部分ですね。
これでは面白くないので、ランダムに結果を変えてみます。

どのブロック（ノード）を使うかイメージしてもらいたかったので、まずはランダムに結果を変えす部分だけの動作確認をします。
実は、公開している flow には下図のようなおみくじだけを返す flow も作成しています。

<img width="821" alt="スクリーンショット 2018-12-25 19.39.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/92359/f860a288-45d1-3d05-a18c-905af3bfefad.png">


早速、青いブロックの左側にあるボタンを何回か押して見ると、ランダムで以下のような結果が返ることが分かります。

<img width="469" alt="スクリーンショット 2018-12-25 19.40.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/92359/e43aad72-d7ea-03a0-1a33-149dd974e902.png">

中身はシンプルな JS で、 `msg.omikuji`に、ランダムな結果が入ってくるようになっています。

```javascript
var omikuji = ["大吉", "吉", "中吉", "小吉", "末吉", "凶", "大凶"]
var r = Math.floor(Math.random() * 100) % 7;
msg.omikuji = omikuji[r];
return msg;
```



動作確認はできたので、あとは該当のブロックを `星座判定` と`セリフ`の間に入れ、セリフの中身を少し変えてあげれば、スキルの完成です。

<img width="881" alt="スクリーンショット 2018-12-25 19.45.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/92359/b479a0f4-438e-373b-a8aa-f561d14854d3.png">


```javascript
{{payload.request.intent.slots.SeizaSlot.value}}は、{{omikuji}}です
```



## enebular の 👍 なところ

### 1. 動作の流れが読み取りやすい

ビジュアルプログラミングの中でも enebular は、ノードを明確に線で繋いだり、分岐の数によって出力の数が変わったり、ノードの用途が分からないときは `情報` タブを開けば大抵日本語で書かれていたり、と、視覚的に理解しやすいため、ハンズオンをスムーズに進めることができました。

### 2. 開発があっという間

今回作成した flow は、30分ほどで作成することが出来ました。使い方に慣れれば、早く作成することができると思います。Webhook の作成などはベースは変わらないので、１つ flow を作っておけば色々使えそうです。

実際、ハンズオンで早く作業が終わった子に急遽 LINE Bot のハンズオンを行い、ベースをそのまま利用することであっさりと Clova スキルと Bot を時間内に作成することが出来ました。

### 3. Fork が便利

他の方が作成した Flow を簡単に Project に取り込んだり、ノードの様々なテクニックを知ることが出来たり、今回のように、１つベースとなる flow を作成して公開することで、ハンズオンの資料として簡単に配布したりなど、enebular を使い始めて間もない私にとって、とても救われた機能でした。



## まとめ

enebular は、プログラミング体験やプロトタイプ制作、IoT や Firebase との連携など、ちょっと開発したいときにうってつけのツールだと感じました。また、最近発表された enebular editor やコミュニティの活発さからも、さらなる enebular ブームがうかがえます。

なにか不具合があれば、優しい中の人がキャッチアップしてくれるので、どんどん FB していったら良いんじゃないでしょうか
（僕もちゃんと記事書きます :bow: ）