個人開発でLIFFとMessagingAPIを使ってわかった5つのこと

個人開発で LIFFとMessaging APIを使ってわかった5 つのこと morimorikochan

名前 morimorikochan 所属　クラスメソッド株式会社　　　リテールアプリ共創部　　　マッハチーム🚀 趣味 Switchのゲーム X @marooon88 一言
東京＆LINEで初登壇...!! 緊張ｼﾃﾏｽ自己紹介

対象者 📜セッション概要伝えたいこと話すこと趣味で作ったLINEに関するアプリ3事例と関連TIPSを紹介・LIFF・MessagingAPIを使い始めた人・LIFF・MessagingAPIをどういう場面で使うかわからない人・Flex Messageを使ったことがない人 1.
LIFFアプリは高齢者でも迷わず使いやすい 2. MessagingAPIを組み合わせることで通知を確実に情報を届けることができる 3. ショートカット機能はLIFFアプリでも実現できる 4. Flex Messageでメッセージをオシャレに 5. LINE URLスキームを使ってシェア機能を簡単に

メッセージを送ると SOUL'd OUTの歌詞の一節を返す LINEのボットをMessagingAPIで作成 • 2018年ぐらいに開発した • TwitterでSOUL'd OUTのボットを運用していた
◦ そこで告知してフォロワーの方に使ってもらった ◦ 今見ても14人友達がいた • 裏側はLambdaでPythonを動作させてたはず...? ◦ 朧げ... 📕事例1. LINE Messaging APIでボット作成

📗事例2. LIFF+MessagingAPIで宿泊予約アプリ背景 • 身内から作ってほしいと言われたのでボランティアで作った • 今までは電話・FAXでの予約のみだったが繁忙期だと管理が大変らしい • 利用者は主に40~80代、高齢者が多いのが特徴 ◦
口頭で予約するため予約の内容を忘れやすい ◦ スマホは持っているが使い慣れていない • 大きな課題は “高齢者🧓が離脱せず利用できるか ”

口頭で予約するため予約の内容を忘れやすい ◦ スマホは持っているが使い慣れていない • 大きな課題は “高齢者🧓が離脱せず利用できるか ” 🧓「LINEだったらみんな使ってる」

口頭で予約するため予約の内容を忘れやすい ◦ スマホは持っているが使い慣れていない • 大きな課題は “高齢者🧓が離脱せず利用できるか ” 🧓「LINEだったらみんな使ってる」 LIFFで解決するのでは 🤨

📗事例2. LIFF+MessagingAPIで宿泊予約アプリ LIFF+MessagingAPIで宿泊予約のアプリを作成機能 1. 公式アカウントのリッチメニューからLIFF アプリにアクセス 2. 予約申込の入力
3. 完了後、公式アカウントから申し込み受付の連絡（MessagingAPI） 4. 宿泊施設側で確認後、公式アカウントから予約確定の連絡（MessagingAPI）（LINEログインしているので次回以降の入力が省略される）

半年ほど運用した結果 • 電話・FAXが100% → LIFF経由の予約がおよそ半数 • 利用者の声 ◦ 「使い方がわかりやすい」 ◦
「予約内容を忘れた時に電話で問い合わせなくていいから楽ちん」 • 感想 ◦ 想定したよりも利用者数が多い🎉 📗事例2. LIFF+MessagingAPIで宿泊予約アプリ

📗事例2. LIFF+MessagingAPIで宿泊予約アプリ ※友だち追加オプションとは、「ユーザーがアプリにログインするときに、LINE公式アカウントを友だち追加するオプションを表示するように設定でき」る機能です https://developers.line.biz/ja/docs/line-l ogin/link-a-bot/ 🚨友だち追加されていないとMessagingAPIでメッセージを送信できない LIFFとMessagingAPIを組み合わせる場合、スムーズに利用してもらうためには
友だち追加オプションに注意が必要

📗事例2. LIFF+MessagingAPIで宿泊予約アプリ bot_promptを “aggressive” に設定することをお勧めします。 • “normal” だと押し忘れて友だち追加されないことが多い
• “aggressive”に設定し、あらかじめ「アプリ使用時には友だち追加しておいてくださいね」と告知しておいたのでうまく友だち追加を誘導できた 🚨友だち追加されていないとMessagingAPIでメッセージを送信できない LIFFとMessagingAPIを組み合わせる場合、スムーズに利用してもらうためには友だち追加オプションに注意が必要

学んだこと • LIFFアプリだと高齢者でも迷うことなく使ってもらいやすい ◦ 高齢者が普段慣れている LINEアプリから起動できるのは大きなメリット • MessagingAPIを組み合わせることで確実に情報を届けることができる ◦ 運営側への予約問い合わせの電話を減らすことができる
◦ メールに比べて読んでもらいやすい 📗事例2. LIFF+MessagingAPIで宿泊予約アプリ

📘事例3. LIFF+MessagingAPIで自分専用のメモアプリ背景 • 生活が単調になりがち ◦ 😣「年齢を重ねるたびに生活にハリがなくなってる気が...」 ◦ 😣「あれからもう1年経ったんか..はやいな...」 •
“自分にとって初めてのこと” を意識してどんどん経験できるようにしたい

“自分にとって初めてのこと ” を記録するメモアプリ FTFTをLIFF+MessagingAPIで作成機能 1. “自分にとって初めてのこと”（FTFT）を書く 2. 過去のFTFTをカレンダー見れる 3.
継続できてなければ定期的にリマインド 4. ランダムに過去のFTFTをピックアップして紹介 5. ショートカット機能 6. FTFTのシェア機能 📘事例3. LIFF+MessagingAPIで自分専用のメモアプリ

継続できてなければ定期的にリマインド 4. ランダムに過去の FTFTをピックアップして紹介 5. ショートカット機能 6. FTFTのシェア機能 📘事例3. LIFF+MessagingAPIで自分専用のメモアプリ

Flex Messageで通知をオシャレに • メール通知やSMS通知だと文面をリッチにしにくい（できない） • MessagingAPIでは送信メッセージのフォーマットに ”Flex Message” が用意されており、リッチなUIで簡単にメッセージが送れる
◦ JSONでUIを構築する ◦ “Flex Message Simulator” を使いGUIでJSONを簡単に組み立てることが可能 📘事例3. LIFF+MessagingAPIで自分専用のメモアプリ Flex Messageを使ったFTFTピックアップ機能通常のメッセージを使ったリマインド機能

“Flex Message Simulator” 📘事例3. LIFF+MessagingAPIで自分専用のメモアプリ

ショートカット機能このサービスの開発中にちょうどLINEから “ユーザー端末のホーム画面にLINEミニアプリへショートカットを追加する”機能がリリース https://developers.line.biz/ja/docs/line-mini-app/develop/a dd-to-home-screen/ • 残念ながらLIFFでは利用できない󰢄 • 日常的に利用したいので、なんとかしてこの機能を使い
たい... 📘事例3. LIFF+MessagingAPIで自分専用のメモアプリ

このサービスの開発中にちょうどLINEから “ユーザー端末のホーム画面にLINEミニアプリへショートカットを追加する”機能がリリースされた https://developers.line.biz/ja/docs/line-mini-app/develop/a dd-to-home-screen/ • LIFFでは利用できない󰢄 • けど日常的に利用したいアプリなのでなんとかしてこの機能を使いたい...
🤨事例3. LIFF+MessagingAPIで自分専用のメモアプリごにょごにょして作りました（iOSで）

こんな感じ → 📘事例3. LIFF+MessagingAPIで自分専用のメモアプリ

📘事例3. LIFF+MessagingAPIで自分専用のメモアプリ ❓認証情報どうやって保持・利用している ❓ • LIFFのアクセストークンは短命なので利用できない ◦ アクセストークンの有効期限は、発行後 12時間です。 •
LIFFログイン直後にLIFFのアクセストークンを自前サーバーのお手製アクセストークンに引き換え、FEで保持 • 「ショートカットを作成」ボタンが押されると ◦ 1.URLのクエリパラメータにお手製アクセストークンを付与 ◦ 2.ユーザーにこのURLを「ホーム画面に追加」するよう指示 • ショートカットがタップされると、クエリパラメータに付与されているアクセストークンを展開して利用

📘事例3. LIFF+MessagingAPIで自分専用のメモアプリ ❓認証情報どうやって保持・利用している ❓ • LIFFのアクセストークンは短命なので利用できない ◦ アクセストークンの有効期限は、発行後 12時間です。 •
LIFFログイン直後にLIFFのアクセストークンを自前サーバーのお手製アクセストークンに引き換え、FEで保持 • 「ショートカットを作成」ボタンが押されると ◦ 1.URLのクエリパラメータにお手製アクセストークンを付与 ◦ 2.ユーザーにこのURLを「ホーム画面に追加」するよう指示 • ショートカットがタップされると、クエリパラメータに付与されているアクセストークンを展開して利用 🚨この実装はセキュリティリスクがあるので絶対に参考にしないでください。自己責任です。

❓どうやってネイティブアプリみたいな見た目にしてる ❓ • 普通は、safariのヘッダーやフッターが表示されてネイティブアプリっぽいUIにならない • ウェブアプリマニフェストを利用している ◦ PWAの技術の一種 ◦
<link rel="manifest" href="/site.webmanifest"> • だいたいのブラウザで対応してる • safariから分離された別のアプリとして扱われる 📘事例3. LIFF+MessagingAPIで自分専用のメモアプリ

FTFTのシェア機能 • X(Twitter)によくあるシェアボタン ◦ 押すとXの投稿画面が表示されてワンクリックで投稿できるやつ • 実はLINEにも同様の機能がLINE URLスキームに用意されている •
https://line.me/R/share?text={text_message} • LINE VOOMや他の友達に簡単にメッセージを送ることが可能 📘事例3. LIFF+MessagingAPIで自分専用のメモアプリ

1. LIFFアプリだと高齢者でも迷うことなく使ってもらいやすい a. 高齢者が普段慣れている LINEアプリから起動できるのは大きなメリット 2. MessagingAPIを組み合わせることで確実に情報を届けることができる a. 運営側への予約問い合わせの電話を減らすことができる b.
メールに比べて読んでもらいやすい 3. ショートカット機能はLIFFでも実現できる a. セキュリティリスクに十分注意する必要がある b. ウェブアプリマニフェストを使ってネイティブアプリのような UIに 4. Flex Messageでメッセージをオシャレに a. リッチなUIをJSONで指定できる b. “Flex Message Simulator” を使いGUIでJSONを簡単組み立て 5. LINE URLスキームを使ってシェア機能を簡単に a. LINE VOOMや他の友達に簡単にメッセージを送ることが可能 📚まとめ

個人開発でLIFFとMessagingAPIを使ってわかった5つのこと

個人開発でLIFFとMessagingAPIを使ってわかった5つのこと

morimorikochan

More Decks by morimorikochan

Other Decks in Technology

Featured

Transcript