【発表資料付き】Bubble×LINE API連携してみた

本日は、こちらのイベントで登壇発表させていただきました。

NoCode × APIの可能性 / 3コミュニティ合同企画

NoCode × APIの可能性 / 3コミュニティ合同企画 (2020/08/02 19:30〜)

LINE APIの使い道

対象とするアプリは、僕が作った飲食テイクアウトサービス「たのんちゃ」です。
現状、メールアドレスで会員登録し、店舗さん自身が情報を登録・編集します。

また、LINE公式アカウントを作成し、以下機能を搭載しています。
・サイトへのリンク表示
・Google Formでの簡易的な店舗登録
・QRコード表示（拡散用）
・ヘルプページのリンク

今回はLINE APIを活用し、下記機能を追加し、更に便利なサービスにしようとしています。
・LINEログイン
・飲食店からユーザーへのメッセージ送信（注文完了、調理完了の通知）

LINEにこだわる理由

LINEは2020年3月時点で、アクティブユーザー数が驚異の8400万人！
日本人口の約67%です。
（参照：2020年12月期第1四半期決算補足説明資料 LINE株式会社）

https://d.line-scdn.net/stf/linecorp/ja/ir/all/FY20Q1_earning_releases_JP.pdf

他のSNSは以下の数字です。
次いで多いTwitterと比べても、ほぼダブルスコアとなっています。
Instagram 3,300万人（2019年3月時点）
FaceBook 2,600万人（2019年7月時点）
Twitter 4,500万人（2018年10月時点）

これだけ多くのユーザーが慣れ親しんでいるプラットフォームを利用すれば
ある程度のUXを担保することができ
初期段階のサービスでも使ってもらいやすくなります。

【参考サイト】

LINEの利用者・普及率は？ 他SNSユーザー数や人口と比べた | Web担当者Forum

LINEログイン・Messaging APIの実装

実装は、以前のnoteを参照してください。​

【Bubble×LINE】アプリからLINEを送れるようにしました
https://note.com/apopopo/n/n0c86c26de52b

【Bubble×LINE】LINEログインの実装に成功！！どハマりポイントまとめ
https://note.com/apopopo/n/nd39bc4583fad

完成品

LINEログインとMessaging APIを活用して、以下のようなものが完成しました。
今後たのんちゃにも実装しようと思います。

LINEログインとMessaging APIを組み合わせて作成しました。

ログインによって、IDや名前などのユーザー情報を取得します。

その情報を使って、注文一覧を作成。
注文を承認したら、注文とメッセージを選択すると
お店からユーザーへ「ピザの注文を受け付けました」というLINEを送れます。 pic.twitter.com/hPokPlC9IH

— あぽと@NoCodeエンジニア (@apopotoapoto) August 2, 2020

発表資料

https://docs.google.com/presentation/d/1t63kQ5t0pwZ-

イベントまとめ

今回のイベントではAPI接続事例について、次々発表がありました。

APIを使いこなすとノーコードツールの拡張性が高まり、とても便利です！
反面、やや難易度が高く、非エンジニアの方には難しく感じると思います。（APIドキュメントを読むために、多少のコード知識・英語力が必要）

そんな非エンジニアでも簡単に拡張するには
Bubble用に開発されたプラグイン、そしてiframeが有用です。
特にiframeは、今回のイベントでより可能性を感じました。

iframeはHTMLのコードを書くことで、アプリ内にそのサービスを埋め込む仕組みです。
一見難しそうですが、そのコードはサービス側で生成されたものをコピペするだけの場合が多いです。

例えばAirTableの綺麗な一覧表示やAI応答Bot
ビデオ通話の埋め込みも、iframeで実装できます。

APIと比べても制約はありますが
ノーコード的な考え方をするならば、それで目的が果たせるならばそれでいいと思います。

API, iframe, プラグインは、どんなものが存在するか知っておき、組み合わせることで大きな武器になると思っています。
今後も、どんなものがあるか調査を続けます。