普段LINEボットを作るときに使うあれこれ【LINEにまつわる個人開発のTIPS共有】
LINE Developer CommunityはLINE APIに関連する最新情報や開発Tipsを共有するコミュニティです。
2022年5月に行われたLINE DC Monthly LT #2 - 【LINE と 個人開発のTips共有会】では、個人でLINE APIを活用した開発事例が発表されました。この記事ではLINE API Expertのようかんさんの登壇を紹介します。
自己紹介
ようかんと申します。今、大学休学して、いろんなところでエンジニアリングをオンラインでやったり、最近だと走るのが好きで、福岡マラソンにエントリーしたりしています。最近、講演もよくやってます。遊牧民やってるということで、先週は東北に行って明日、岡山で、来月は東京にいるので、もし近くにおられる方いたら一緒にご飯とか行きましょう。今日はLINEと個人開発のTIPS共有会ということで、何か自分の持ってる個人開発のTIPSを共有できればなと思っていろいろ持ってきました。
LINEBotをカップラーメンより早く作って試すベストプラクティス
結構新しいLINE API触ることが多いんですけど、LINE BotとかリッチメニューとかLIFFとかも色々ある中でさくっと試したい時があります。プロダクトでもないし、趣味開発でも何でもないけど、とりあえず試してみたい時に色々悩むんですよね。どういう構成で作るかみたいな。そこに技術的な勉強を含むのであればいいんですけど、LINE APIを試したいだけならオススメだよっていう構成があるのでいろいろ持ってきました。
LINE Botの肝心な部分に関しては、僕が昔にGASで書いたスクリプトがあるんですけど、2分30秒とかで、LINEのオウム返しBotが作れたりするんですよね。最初はややこしかったりするんですけど、もう慣れちゃえば3分とかカップラーメン作るより早くLINE Bot作れちゃうので参考にしてもらえたらいいかなと思って持ってきました。環境構築は、Google ChromeとLINEのアカウントとGoogleのアカウントさえ持っていれば、誰でもすぐ作れるので、結構学校とかでLINE Botを教える時にもこの方法を使うことがあります。
GASでdoPostのログを表示させる方法
GASでLINE Bot作る時にdoPostっていう関数使うんですけど、これ使うとLINE BotのログがGASのところに表示されないって仕様があるんですよね。その時はGCPのプロジェクトとGASのプロジェクトを連携させてあげることで、しっかりログも入ってくれるので、そういう問題も解決しています。
リッチメニューがアップデートで便利に
次にリッチメニューなんですけど、Botの下の方に出てくるメニューですね、先月こんなのお話ししました。リッチメニューの表示を動的に変えたら面白いんじゃないかということで、GoogleFormで解答した値を動的にグラフを生成して数10秒後にはLINE Botのリッチメニューのデザインが変わるの作って発表してました。
で、今月、新しいリッチメニューの機能が追加されたんですね。どういうものかっていうと、リッチメニューのボイスメッセージを送るってボタンを押したりとかすると、ボイスメッセージの画面が出てきたりだとか。「リッチメニュー自体を開くボタン」「リッチメニュー自体を閉じるボタン」とかいうAPIが増えたりだとか、あとテキストメッセージを送るって押すとBotテンプレートのメッセージを最初に入れた状態でキーボードを開くことができるようになったんですね。プレースホルダーって今適当に入れてるんですけどここも自分の好きな辺に入れられるのでフォームに解答するのをLIFFを面倒くさいなって時はわりとこういうのを使ったりとかすると便利なんじゃないかなと思ってます。ちょっとこのUI今、MACのタブっぽくしてるんですけど、この赤ボタンを押してもリッチメニューが閉じれるような仕組みになってます。このログがポストバックが反応してるのが出てるって感じですね。試してみたらいいかなと思います
リッチメニューを作るときにオススメのサイトや機能
デザインをリッチメニューで作ってアップロードしてって結構面倒くさいんですよ。そこで僕が今最近やってるのがGoogleのスライドにリッチメニューを書いてプログラムを走らせて、LINE Botに設定するみたいなのを最近やってて、それのスクリプトをこないだ公開したので、見てもらえるとリッチメニューを作るのが楽になったりするかなと思います。
リッチメニューを作る時の最強のエディター
他にも最強のエディターがあるよってことで、友達が作ってるリッチメニューのエディター紹介します。これ便利で設定もGUIでできてJSONオブジェクトのリンターもちゃんと走って、不正なファイルだよって言ってくれたりとか、あのポジションをこんな風に自分の手で範囲を指定して登録できて、全部できちゃうみたいなやつがあるんですよね。最近の新機能にも今回も対応してあるのですごい便利です。
ngrokを便利に使うスクリプト
LINEBotをローカルでJSで作る時って、ローカルのサーバーをNode.jsで立てて、それをトンネリングして。LINEとローカル開発するみたいな方法がよくあるんですね。その時にngrokっていうものを使ってやるんですけど、ngrokってノードのプログラムを更新するたびにngrok起ち上げなければいけなかったり、連続で8時間以上使う時って再起動しないといけないとかで、毎回ngrokの再起動しないといけないことが多いんですよね。その時にngrokってWebhook URLが、コロコロ変わるんですよ。それが結構面倒くさいよねっていうことでngrokを立ち上げた時に、もうそのままLINEのWebhook設定を自動的にやってくれるってスクリプトをのびすけさんが作られてます。LINE APIの中にWebhookの設定をシェル叩いてやるっていう方法があるんで、使うといつも煩わしい作業が楽になったりするんじゃないかなと思って持ってきました。
Create LIFF APPはとてもオススメ
で、最近ちょっと気になってるAPIとしては、このLIFFの設定ですね、LIFFのトークン作ったりだとか、新しいLIFFアプリ作ったりとかするのも全部このAPIでできるっていうのがあって、管理画面をわざわざ開かなくてもターミナルから新しいLIFFとか新しいBotを作ることができるようになってるのがすごいです。LIFFアプリを新しく作りたいってなるとかなり面倒くさいですよね。簡単とはいえ面倒くさいって話があって、最近ちょうどLINEさんがcreate-liff-appっていうコマンドを出してくれました。これを使うことで、Next.jsのTSJS、NuxtのTSJS、ReactのTSJS。SvelteのTSJS、Vanilla.JSのTSJS、VueのTSJSっていう感じで、全部もほぼ網羅してくれてるテンプレートみたいなものがあるので、簡単に使うだけでも、LIFFのアプリ作れたりするんじゃないかなと思います。ちょっと右下に自慢なんですけど、ちゃっかりLINEさんのリポジトリにコントリビュートデビューしましたっていうのもあります。
LINEの中の人がこのLINEDCのイベントに来てくださってさっきのコマンドとかいろいろ紹介をするってイベントがあったんですけど、これが参考になる内容だったので、LIFFの最新のキャッチアップがされたい方は、この動画見るといいかなと思います。
GASとGCPのNLPサービスでOCRしてScrapboxに名刺を管理するLINEBotを作ってみた
Bot説明だけだとおもんないなと思ったので、最近自分が作ったものを持ってきました。LINEBotに名刺の画像を送ると、自動的にOCRしてくれて、Scrapboxに転載してくれます。全部OCRがかかってて、本文があるのと、タイトルに入る文章はNLPの自然言語処理を使って、どれが一番タイトルにふさわしいか取ってきて並べることをやってみました。構成こんな感じになってて、GASはメインになりつつCloudVisionとNatural Language API、GCPが出してるNLP系のサービスにかけて、Gyazoで画像アップロードして、Scrapboxにインポートするみたいな感じで作りました。名刺とか最近結構もらう機会が増えたんですけど、なかなか頭の中に記憶できないし保存、管理するのも結構大変なんで、全部バックアップしてOCRかけてまとめられたら面白いなと思って作ったんですけど結構個人的には気に入った開発になりました。
ということで、今日のお話を聞いてくださったらわかるかもしれないんですけど。LINE APIについてめちゃめちゃしゃべる人なので、ツイッターフォローしてもらえたりとかするとキャッチアップできるかなと思います。もうすぐLINE APIの総復習シリーズっていうイベントが始まります。ここのLINE公式アカウント編っていうところで僕相談させてもらうんですけど、実はLINE APIといいながら、LINE APIを一切使わない、コードを書かないイベント内容になっていて。LINE Developer Consoleの中で何ができるのかとか、最近増えた。分析とかどこまで何ができるんだみたいなところをかなり深掘りする内容をやろうと思っています。これはエンジニアさんだけじゃなくて、普通にLINEのマーケティングをやられてる方とかにも、かなり有用な情報になるんじゃないかなと思っているので興味ある方がいられたらぜひ参加してください。「普段LINEボットを作るときに使うあれこれ」ということでLINEAPIを使って何か僕が共有できそうな事例とかツールとかをご紹介する回でした。ありがとうございました。
Discussion