2日間でLINEの主要4つのAPIを使ってみた。[実装編]

はじめに

今回の記事は、2daysハッカソンでLINEの主要APIの機能(Messaging API, CEK, LINE Beacon, LINE Pay)を実装したので、その話をします。 多分自分一人ではこの昨日全て実装することはできませんでした。チームのみんなで一致団結して、することで2daysのハッカソン期間中に十分な睡眠戻りながら、4つの機能を実装することができました。

アイディア部門を書いたので、今回はエンジニア視点から意識した部分を書いてみたいです。

メンバー構成

メンバー的には、自分・会社の同期・現地で意気投合したエンジニアさんの3人チームで参加しました。役割的には次のような感じです。

自分 : Messaging API, PM, CEK, Pay 同期 : Messaging API, CEK エンジニアさん : Messaging API, Beacon

制作物

「鎌倉観光を荷物なしでシュシュっといけるbot」を作成しました。 大きく分けると次の3つの機能です。

  1. 名所に近づくとBeaconに反応してClovaが観光案内をしてくれる機能
  2. 駅に近づくと帰りの時間をアナウンスしてくれる機能
  3. お土産屋さんに近づくとお土産の一覧を教えてくれて、LINE Payで決済でき、お届けしてくれる機能

実際にしたこと

実際に実施したことは以下の2つが大きいです。 - ファイル分割によるタスク分割 - ペアプロによる結合テスト 実際に作業したリポジトリはこちらです(4geru/line-boot-award-tokyo)。

ファイル分割によるタスク分割

具体的には以下のようにファイルを分割しました。 - それぞれのAPI - clova.js - beacon.js - server.js(サーバー・botを司る) - line-pay.js - それぞれのメッセージに合わせたjsファイルの作成 - intro.js(観光地紹介のカルーセル) - items.js(お土産紹介のカルーセル) - message_object.js(その他のメッセージのテンプレート)

ペアプロによる結合テスト

結合部分は二人で、ペアプロを行い修正していきました。 修正した箇所では、ファイル分割・リファクタリングも同時に行い、可読性・汎用性の高いコードに修正しました。

詰まったポイント

アイディア編にも書いた通り「Beacon → リッチメニュー → LINE Pay → 購入・決済 」までのフローの部分が苦労しました。 この部分では、beacon, bot, flex message, line payあたりの技術を詰め込んでいます。

次にしたいこと

ハッカソンで作ったコードなので、予選を通った場合さらにリファクタリングをし、本戦までに、実際に鎌倉旅行をしてみます。 また、様々なAPIを利用したので、テンプレートエンジン化してみたいと思います。

2日間でLINEの主要4つのAPIを使ってみた。[アイディア編]

はじめに

今回の記事は、2daysハッカソンでLINEの主要APIの機能(Messaging API, CEK, LINE Beacon, LINE Pay)を実装したので、その話をします。 多分自分一人ではこの昨日全て実装することはできませんでした。チームのみんなで一致団結して、することで2daysのハッカソン期間中に十分な睡眠戻りながら、4つの機能を実装することができました。

メンバー構成

メンバー的には、自分・会社の同期・現地で意気投合したエンジニアさんの3人チームで参加しました。役割的には次のような感じです。

自分 : Messaging API, PM, CEK, Pay 同期 : Messaging API, CEK エンジニアさん : Messaging API, Beacon

制作物

「鎌倉観光を荷物なしでシュシュっといけるbot」を作成しました。 大きく分けると次の3つの機能です。

  1. 名所に近づくとBeaconに反応してClovaが観光案内をしてくれる機能
  2. 駅に近づくと帰りの時間をアナウンスしてくれる機能
  3. お土産屋さんに近づくとお土産の一覧を教えてくれて、LINE Payで決済でき、お届けしてくれる機能

今回のアイディアのキモ

今回のアイディアで一番大事だった部分は、3. お土産屋さんに近づくとお土産の一覧を教えてくれて、LINE Payで決済でき、お届けしてくれる機能 かなと思っています。ここの部分でいうと、どれだけUXをあげるか!という部分を重きに置いて考えました。 Beacon → リッチメニュー → LINE Pay → 購入・決済 の流れをいかに自然に、ユーザーにとってストレスを与えないような形で決済まで持っていくかアイディアを詰めこみました。

制作するためにしたこと

最終的なプロダクトとして完成させるためには一つのサーバー・一つのbotとして動かす必要があります。

そのために自分たちのチームで行ったことは2つあります。

  1. なるべく大きなファイルではなく小さなファイルに分割し、問題をわかりやすくする。
  2. ディスプレイを運営の方からお借りし、PMとペアプロを行い統合作業を行う。

感想

初めて、自分のアイディアでハッカソンをしてみるという経験でした。自分のアイディアはうーむという感じで、毎回なんだかなーという思いが強かったのですが、今回は会場の方々からも「いいね!」と言われたアイディアなので非常に嬉しかったです。 以前にMessaging API x Beaconで街を探検するbotハッカソンで作ったのですが、SONY Ear Duoの 我ながらお土産をLINE Payで決済してお届けする機能というアイディアはなかなかよかったと思いました。

鎌倉市のことをこんなに考えてみたことは初めてでした。 自分はまだ鎌倉に行ったことがないので、ぜひ観光してみたいなーと思いました。 他の自治体さんでも導入ができそうなので、実際に連携して導入テストとかしてみたら面白そうだなーと軽く思ったりしました。

CEK縛りでハッカソンにでてみて感じたこと

はじめに

こんにちは 4geru です。09/01にサポーターズさんで開催されたLINE Bot&Clovaハッカソンに参加してきたのでまとめてみました。

はじめにCEKとは「Clova Extensions Kit」の略で2018年の7月にリリースされたClovaのAPIです。自分もちゃっかりリリースの4日後にRubyで軽くCEKの記事を書います。(参考 : 海の日なのでClovaでどうぶつスキルを作ってみた)

記事を書いてみたのですが、あまり理解できていかなったのですが、今回本格的にやるぞという思いで、CEK API縛りでハッカソンにでてみました。感想をKPT的にサクッと書きたいと思います。

CEKについて

でできること

文(intent)と類義語(slot)を登録できる

CEKでは文と類義語を登録することができます。intentとslotについては @imajoさんの記事に詳しく書かれています。(参考 : [入門]Clovaスキル(CEK)は作りながら覚えて行く(前提知識編))

mp3を返すことができる

音声データ以外にもmp3を返すことができます。mp3を利用することにより、効果音を流すことが可能になり、プロダクトとしての質が格段に上がります。 LINE Botで言う所のスタンプ(sticky) を返してくれるbotのような感じです。

また、setSimpleSpeechではなくsetSpeechListを利用することにより、複数のボイスを返すことができます。サンプルのように、クイズbotの例だと正解の音を流して正解のアナウンスを流すことも可能です。

responseHelper.setSpeechList([
    {
      "type": "URL",
      "lang": "" ,
      "value": "https://e71ea8e2.ngrok.io/correct.mp3"
    }, {
      lang: 'ja',
      type: 'PlainText',
      value: '正解です。おめでとうございます!!',
    }
]);

できないこと

元の音声入力情報が取れない

プライバシーの観点から音声の生データ及びテキストデータを入力として受け取ることができません。

発音が悪いと受け取ってくれない

自分はあまり発音がいい方ではないので、トリガーアクションを取るのが難しかったです。チームメイトの声はスムーズに受け取ってくれていた。しかし、これから学習データが集まるに連れてスムーズな応答ができるようになっていくと思います。

参考にした資料たち

参考にした資料

ハッカソンに参加してみて感想

やってみてよかったこと[Keep]

スマートスピーカーの開発をすることができた。

もともと作りたかったClovaスキルのMVP(Most Value Product)を完成させることができた。ことが非常に良かった。

ハッカソンに参加していたこともあり、LINEの方にすぐに質問をすることができたので、疑問が疑問のままではなく、発散でき、解決できたことも今回のハッカソンに参加して良かったことだと思います。

mp3をシュシュっと流せた

ngrokを繋いで、/public いかに音声ファイルを置くことで、mp3で手元にあればどのような音楽でも流すことが可能です。

悪かったところ[Problem]

全くの知識不足で参加したところが一番大きかったです。知識不足については、次の通りです。

ビルドとコードの違いがわからなかった

@stachibanaさんのスライドでは、ビルドのスライドの次に完成したコードが記述されています。その点ビルドで何をビルドして、コードで何を記述するべきなのかがわからず困惑しました。

まとめてみると「ビルド=intent/slotの言葉の定義」「コード=intent/slotを受け取ってから返すまでの処理」のような感じです。

skillのコードに慣れていなかった

冒頭でもあったのですが、setSimpleSpeechsetSpeechListの違い。 userIdの取得の方法/intent,slotの取り方/slotが取れなかった場合どうなるのか などなどハッカソン中に色々と戸惑う部分が多かったです。

あらかじめにコードを読む or 勉強会に参加すると格段に理解が上がってハッカソンでもスムーズにコーディングできると思います。

レスポンスが遅かった

会場にも寄ると思うのですが、通信のスピードが少しあるのかもしれません。LINEの時はスピードが早かったです。そのため、@stachibanaさんのハンズオンでは、herokuを使って動作させています。

次直すところ[Try]

動画を事前に録画する

動画を撮影するポイントは、2ポイントあります。

1つ目は、会場でデモするときに正常に動作しているかが重要になってきています。 発表中に100%動くのであれば問題はありませんが、100%動く自信がない&時間に余裕があれば、動画の撮影をオススメします。

もう一つは今回のLINE BOOT Awardでは、写真or動画の撮影が必須になっています。 ハッカソンでは動いていたけど後日動かすと動かない。メンバーが忙しくて集まれない等の事案が発生してしまいます。そのため、会場でなるべく動画に残して置くと良いと思います。

まとめ/感想

ハッカソンに参加して賞は取れない...悔しいという思いはあります。 しかし、自分が面白い!作ってみたい!!と思ったアイディアを一人ではなくチームとして短時間に形にすることは非常に楽しいです。また、ハッカソンで使った記述から学ぶことは非常にたくさんあります。

また、他のハッカソンにも参加するので、是非その際はお声がけください。 この記事を読んで見て面白いと思った方は周りのメンバーを誘って or 一人でも参加してみて下さい。