個人開発で 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代、高齢者が多いのが特徴 ○ 口頭で予約するため予約の内容を忘れやすい ○ スマホは持っているが使い慣れていない ● 大きな課題は “高齢者🧓が離脱せず利用できるか ”

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

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

“自分にとって初めてのこと ” を記録するメモアプリ FTFTをLIFF+MessagingAPIで作成 機能 1. “自分にとって初めてのこと”（FTFT）を書く 2. 過去のFTFTをカレンダー見れる 3. 継続できてなければ定期的にリマインド 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で自分専用のメモアプリ

“自分にとって初めてのこと ” を記録するメモアプリ FTFTをLIFF+MessagingAPIで作成 機能 1. “自分にとって初めてのこと”（FTFT）を書く 2. 過去のFTFTをカレンダー見れる 3. 継続できてなければ定期的にリマインド 4. ランダムに過去のFTFTをピックアップして紹介 5. ショートカット機能 6. FTFTのシェア機能 📘事例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の技術の一種 ○ ● だいたいのブラウザで対応してる ● safariから分離された別のアプリとして扱われる 📘事例3. LIFF+MessagingAPIで自分専用のメモアプリ

“自分にとって初めてのこと ” を記録するメモアプリ FTFTをLIFF+MessagingAPIで作成 機能 1. “自分にとって初めてのこと”（FTFT）を書く 2. 過去のFTFTをカレンダー見れる 3. 継続できてなければ定期的にリマインド 4. ランダムに過去のFTFTをピックアップして紹介 5. ショートカット機能 6. FTFTのシェア機能 📘事例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や他の友達に簡単にメッセージを送ることが可能 📚まとめ