個人開発でLINE連携！ハマりポイント3選

個人開発でLINEを連携した時にハマったこと３つご紹介します🙌

Transcript

1. 個人開発で LINE連携！ ハマりポイント 3選
2. 目次 1. 自己紹介 4. ハマりポイント3選 2. アプリ紹介 5. まとめ 3. LINE連携した理由
3. 自己紹介
4. 名前: 齊藤夢実 仕事: WEBエンジニア 趣味: ガチャガチャ・シール帳作り 自己紹介
5. アプリ紹介
6. シール探しを楽しくするアプリ シールを発売している店舗をAIが予測し、最適な経路の提案と スケジューリングをしてくれる Tsugi no Tokimeki
7. LINE連携箇所 -認証と通知- ・LINE公式アカウントを友だち追加して、LINEログインで連携する ・LINE Messaging APIを使って、公式LINEアカウントから各ユーザーのLINEに、シール の目撃情報などを通知する
8. LINE連携した理由
9. LINE連携した理由 ・自分自身がWeb開発が多く、モバイルアプリより慣れ親しんだ技術→Next.js ・ターゲットが女性・子どもでLINEを使い慣れている層 ・Webアプリでユーザーの投稿を通知したい→LINE Messaging API
10. ハマりポイント3選
11. LIFFとSafariのボトムナビとSafe Area
12. LIFFブラウザとSafariブラウザでSafe Areaの挙動が異なり Safariに合わせるとLIFFブラウザのボトムの下部に隙間が空いてしまう LIFFとSafariのボトムナビとSafe Area 問題
13. 原因 ブラウザ関係なく、100svhで指定していた viewport safe area safe area iOSは問題なし LIFFとSafariのボトムナビとSafe Area
14. 原因 LIFFは空白ができてしまう viewport safe area safe area LIFFとSafariのボトムナビとSafe Area
15. 解決 LIFF環境かどうかを検出して is-liffクラスをつけ、SafariとLIFFブラウザで異な るCSSをつけた LIFFとSafariのボトムナビとSafe Area
16. 解決 Safari→100svh viewport safe area safe area LIFF→100dvh viewport dvh は 「現在利用可能なviewportの高さに動的に追従する」 LIFFとSafariのボトムナビとSafe Area
17. まとめ LIFFとSafariのボトムナビとSafe Area 単位 値 動作 svh 最小のviewportの高さ(固定値) ツールバーが表示されている時の高さで固定 dvh 現在のviewportの高さ(動的) ツールバーの表示/非表示に応じてリアルタイムで変化 lvh 最大のviewportの高さ(固定値) ツールバーが非表示の時の高さで固定
18. 大変だったこと LIFFブラウザは、ローカルがないので 修正したら毎回マージしてLINEを開いて確かめないといけなかった そもそもWebアプリなので、ボトムナビをつける例があまりなく 参考になる記事がなかった LIFFとSafariのボトムナビとSafe Area
19. 公式LINEへの遷移がうまくいかない
20. 公式LINEへの遷移がうまくいかない 問題 １回目はLINEに飛んだ後にシステムエラー もう一度飛んだら問題なく公式ライン追加できる 1回 目 2回 目 システムエラー
21. 公式LINEへの遷移がうまくいかない 原因 LIFF URL を開くと liff.init()を実行するので挙動が不安定になり、1回目はシステ ムエラーになるが2回目はキャッシュが効いて開くようになっていた
22. 公式LINEへの遷移がうまくいかない 解決 LIFF URL（https://liff.line.me/xxx）を直接開いていたのをlin.eeに修正 https://liff.line.me/xxx→LIFFアプリ(LIFF URL は LIFF環境内でしか開けない) https://lin.ee/xxx→公式LINEアカウント
23. 公式LINEへの遷移がうまくいかない 大変だったこと ユーザー1人につき一回しか起きない現象なので、原因特定に時間がかかった
24. LIFF復帰時に情報が保存されない
25. LIFF復帰時に情報が保存されない 問題 既存ユーザーがLINE認証から復帰した際、LINE連携されていなかった 入力した情報が保存されていない
26. LIFF復帰時に情報が保存されない 原因 Firestoreに情報を保存 Firestoreに保存した情報と lineUserIdが連携しない タイムアウトでlineUserIdが保存されておらず、そのままhomeに遷移していた
27. LIFF復帰時に情報が保存されない 解決 タイムアウトしても情報だけ保存し、後からLINE連携できるようにした
28. まとめ
29. まとめ 今回は、Webアプリで通知をしたくLINE連携を行いましたが、 LIFFブラウザと他のブラウザで挙動が変わることや 修正するたびにマージして確かめないといけないことなどが分かりました 初めてのLINEを使ったアプリ開発でしたが、一度作ると独自の仕様などが分か り、次の開発はもっとスムーズにできると思いました。
30. ご清聴ありがとうございました