LINE Bot「コンパスパンダ(ver0)」

4845 ワード
Firebase JavaScript leaflet linebot JavaScript テキストリンク

はじめに

数ヶ月前から黙々と開発していたLINE Bot「コンパスパンダ」が完成したのでまとめます。ソースコードや概要はこちらで公開しています。
概要や使い方に関する説明はリンク先のドキュメントにて記述しています。この記事では技術的なお話のみに絞ります。後、LTとかに使いたいのでスライド形式です。

システム図

システムの流れ

  1. 基本的にユーザーは赤矢印のようにLINE Botとのインタラクションのみでこのアプリを操作
  2. 位置情報の取得にはURLスキーム機能を用いて位置情報取得
  3. 呟きのテキストは専用フォームをLIFFで表示してそこから取得
  4. 取得した情報をLINE Botのサーバーを介してデータベースに保存
  5. 地図表示もLIFF上にてディスプレイ

利用技術(LINE Bot)

利用技術（Form）

利用技術（データベース）

利用技術（Map）

苦労したこと

位置情報と呟きの結びつけ

  • Messaging APIにはステート管理の機能がない
  • 無理やりステート管理をするには
    1. データベースから一々データを引っ張る
    2. Push通知を使う（BotBuilderが良さげ？）
    3. 何かしらの管理番号をトーク画面上に発行
  • 今回は取っ付きやすい「3」の方法を選択

タイムスタンプを発行(一意となる管理番号がわりに)

FirestoreのDocumentを１つにまとめた

  • Firestoreには呼び出し数に制限あり
    • CollectionsではなくDocumentの数をカウント
  • ネストを１つ深く
    • 取り出す時が少し面倒
{
  timestamp: {
    tweet : text,
    latitude: latitude,
    longitude:  longitude
  }
}

最後に

課題

  • UIが使いにくすぎる
    • 一度に位置と呟きを取得したい
  • 会話の応答と呟きのDBへの保存の処理を同じLINE Botのサーバで処理している
    • LIFFに任せるなど役割分担を整理したい
    • DB用のサーバを立ててAPI化させたい
  • 地図にテキストしか残せない
    • 写真とかにも対応させたい

さらにやりたいこと

  • 呟き内容のテキストを感情分析してポインターのアイコンに反映させる
  • LINE Thingsと連携したサービス

とり会えず今ところ作れたのは最低限動くもの。ここから面白いサービスを作って行きたい。