LINE Dev Day2018に参加してきました

はじめに

はじめましての方もいると思うので、LINE API Expertのしげるです。 LINE Dev Dayに参加してきました。 LINE API Expertが集まるセッションがあったので、他のセッションとも合わせて軽くお話ししたいと思います。

参加したセッション

  • 10:40-11:40 Key Note: "Next LINE" LINEが創る新たな世界
  • 11:50-12:25 実演:LINE API新機能の総まとめ&新機能全部入りのchat botデモンストレーション
  • 12:25-13:05 [Expert Only]CTO Round TableAPI Expertの皆さんから直接質問を頂戴し、弊社CTOが答える
  • CafeにてLTを見ていました。
  • 15:00-15:35 フロントエンド開発によって進化するLINEの未来
  • 15:50-16:25 Efficient And Invincible Big Data Platform In LINE
  • 16:40-17:15 [Expert Only]Speakers(Nakajima,Jirawat,Takaku)を招いてSessionに関連する議論
  • 18:40- 懇親会

参加した中で興味を持ったLT/セッションについてまとめます。 また、Expert Onlyのセッションについてもまとめます。

実演:LINE API新機能の総まとめ&新機能全部入りのchat botデモンストレーション

このセッションでは主に福岡市さんと協力で進めている粗大ゴミ回収botを例に挙げ、今までリリースしてきた。Messaging API, LINE Pay, Beacon, LIFFなどの話を振り返りました。

自分の中でこのセッションの中で一番興味深かったのはLINEの人が考えるFlex MessageとTemplate Messageのボタンの考え方で、これからはPC/Mobileに対応しているFlex Messageを利用して行くべきだと言う話が面白かったです。

フロントエンド開発によって進化するLINEの未来

自分がもう一つ衝撃を受けたのはLINEはハイブリットアプリで、一部はフロントサイドの開発チームが開発してるという話でした。 具体的にはスタンプを販売しているLINE Shop。LINE マンガなど普段利用している部分で、驚きを隠せませんでした。 ひょこっと見たLT(LINEサービスの管理画面でUIを標準化するには?)で管理画面のフロントサイドの内製の話を聞いていたのですが、実際私たちの使うUIの部分もフロントの技術が利用されているのは驚きでした。

しかも、利用している技術は bootstrap と Vue すごいみじかな物を使っている!!親近感!!という感じでした。

Expert Onlyのセッション

平日に開催されていることもあり、Expertセッションへの参加者は海外からの招待メンバーが多かったです。特に台湾・タイ・インドネシアからのメンバーが多く全体では20名弱のメンバーが揃いました。ExpertセッションはCTOのイビンさんへ質問するセッションと登壇者へ質問するセッションの2つでした。短い時間の中でしたが、それぞれのメンバーが考えてきた質問で色々なお話しが聞けたので得るものが多かったです。

イビンさんとのセッションでは、主に各国のAPIの公開状況・法的な縛り・開発状況などがわかりました。LINE先進国としての日本はCEK、ドキュメントの量、コミュニティの大きさなど非常に恵まれており、他の国のメンバーを応援したくなりました。

Speakersセッションでは、Beaconについての話。LIFFのデバッグについての話。2019年にリリースされるAndroid/iOSSDKの話が挙がっていました。 LIFFのデバッグ方法については、スマホからでないとデバッグできないという問題が上がっていたのですが、「vConsoleというツールを使うとデバッグできるよ!」という話が上がっていたので、近日中に調べて、blogかqiitaにまとめます。 Android/iOSSDKの話は、2Fのポスターセッションで2019年にさらに色々な情報がSDKで扱えるから便利!!という話を聞いたけどBot/LIFFは置いていかれないのか?ということが議論されていました。プライバシー的な問題があるけど、考えておくね!という結論になったので、またBOT/LIFFの幅が広がるのではないかと楽しみにしています。

行ってみて感想

初めてLINEの大きなカンファレンスに参加しました。行ってみた感想は率直にすごい!ということです。 平日で来れる人は少ないはずなのに、どの会場も満員で、プラットフォームとしてのLINEが成功しているんだなーと感じました。 Dev Dayでは、LINEの開発者もLINEを利用している開発者も揃い学ぶ姿勢というのがこれからもLINEをさらに加速させて行く期待感を感じました。 また、各国のExpert達のこれからLINEを普及させて行くぞ!という熱意はぜひお手伝いしたいし、できることは協力したいと思いました。

自分もまだまだPushし足りない部分があると思うので、いろんなことを学んで発信していきたいと思いました。

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 一人でも参加してみて下さい。