2025/03/04 LINEミニアプリ Tech Meetup #1 クラスメソッド株式会社 リテールアプリ共創部 Takagaki Ryuhei クイック⼊⼒で実現するシームレスな会 員登録

⾃⼰紹介 2 ● 2019年 4⽉ ⼤阪⼤学⼊学 ○ 外国語学部中国語専攻 ● 2022~2024年3⽉ アパレル系⾃社開発企業（イン ターン） ○ toC向けLIFFアプリ ○ 社内アプリ開発 ● 2024年4⽉ クラスメソッド株式会社⼊社 ○ LINEミニアプリ運⽤保守‧追加開発 ● 実績 ○ LINE API Expert ● 部署 ○ クラスメソッド株式会社 ○ リテールアプリ共創部 ○ 24新卒 ● 名前（ニックネーム） ○ Takagaki Ryuhei ○ X:るおん（@ruonp24） ● 担当業務 ○ LINEミニアプリ ○ フロントエンド（React/Next.js） ○ バックエンド（Node.js/Lambda） ○ サーバレス構築（AWS CDK）

こんな体験ありませんか？ 3 ● お店のレジにおいてアプリの会員登録で⼈を待たせてしまった ● ECサイトで限定商品を買おうと思ったが会員登録に時間がかかって買えな かった。

地味にめんどくさい... 4 ● 名前 ● メールアドレス ● 電話番号 ● 郵便番号 ● 住所 ● ⽣年⽉⽇ ● etc

会員登録でユーザー離脱しがち ⼀般的なアプリ ユーザー認知 → アプリ導⼊ → 会員登録 → アイテム購⼊ 5 LINEミニアプリの場合 ユーザー認知 → アプリ導⼊ → 会員登録 → アイテム購⼊ 壁① 壁② 壁① 「インストール不要」が売りの⼀つであるLINEミニアプ リ 依然としてミニアプリ内の会員登録には課題あり

クイック⼊⼒で解決できます！ 6 クイック⼊⼒とは、必要なプロフィール情報が⾃動で⼊⼒される機能です。ユーザーが アカウントセンターで設定した共通プロフィールの情報が、LINEミニアプリで簡単に 利⽤できます。 出典 ：https://guide.line.me/ja /services/quick-fill.html

アカウントセンターとは？ 7 出典 ：https://guide.line.me/ja /services/quick-fill.html

会員登録が⾼速に 8 ⼀般的なアプリ ユーザー認知 → アプリ導⼊ → 会員登録 → アイテム購⼊ LINEミニアプリの場合 ユーザー認知 → アプリ導⼊ → 会員登録→ アイテム購⼊ 壁① 壁② 直ぐにアプリ使⽤が可能に クイック⼊⼒

家族で楽しめる廉価な娯楽を提供する店舗を運営する 株式会社テイツー様 にご協力 いただきました。（https://www.tay2.co.jp/） 同社は書籍、家庭用テレビゲーム、トレーディングカード、ホビー、スマートフォン、CD、 DVD、衣類等の販売および買取を行っており、LINEミニアプリの会員証を用いて幅広い 顧客層の需要に応えています。 株式会社テイツー様の「ふるいち」にてクイック⼊⼒実装を担当 9

「ふるいち」でのクイック⼊⼒ 10

準備 11 注意：クイック⼊⼒は、現在LINEヤフー社からご案内している特定の法 ⼈ユーザーのみがご利⽤いただける機能です。 1. 利⽤申請 クイック⼊⼒の利⽤申請 2. 使⽤したいScopeの設定と審査

セットアップ（React） 12 3. LIFFプラグインインストール（npm） 4. LIFFプラグイン有効化

開発 ①：liff.$commonProfile.get() 13 ● モーダルを表⽰し、アカウントセンターからプロフィール を取得 使⽤⽅法： 取得したい値を配列で指定することで取得可能。 戻り値： Partial型のPromiseオブジェクト

注意点：liff.$commonProfile.get()はLIFFブラウザ内のみ使⽤可能 14 ● LIFFブラウザ以外でAPIが呼ばれた場合 new Error("liff.$commonProfile API is available only in LIFF browser."); → ローカル環境をLINE上で開く必要あり。 → ngrokを使⽤してローカル環境をhttps化 DevelopersIO ローカルで開発しているLIFFアプリを実際のLINEアプリ内で動作確認する方 法

開発 ②：liff.$commonProfile.fill() 15 ● プロフィールの値を⾃動⼊⼒してくれる `data-liff-autocomplete `属性を渡すことでそのフォームに対して該当プロ フィール値を⾃動⼊⼒

16 注意点：クイック⼊⼒から取得できる値とフォームの値の差異 16 必ずしもクイック⼊⼒でアカウントセンターから取得できる値が⾃前のフォー ムのデータの形式と⼀致するとは限りません。 そのため、取得したプロフィールの値をフォームの形式に変換するヘルパー関 数的なものを⽤意してあげる必要があります。 性別（sex-enum） クイック⼊⼒： 0: 男性, 1: ⼥性, 2: その他, 3: NO_ANSWER       ↓ 「ふるいち」ミニアプリのフォーム： "male": 男性, "female": ⼥性, "other": その他

開発 ③：liff.$commonProfile.getDummy() 17 ● liff.$commonProfile.get()メソッドのダミーデータ 第⼆引数に使⽤したいダミーデータの番号を指定するだけでダミーデー タを取得可能。

これらのメソッドを組み合わせて実装 18 ● liff.$commonProfile.get() ● liliff.$commonProfile.fill() ● liff.$commonProfile.getDummy() モーダルは⾃動で出現するようになって いるので、⾃前で作る必要なし。⼯数少 なく開発可能！ 詳しくは以下ブログをご参照ください DevelopersIO 【LINEミニアプリ】クイック入力機能で会員登録がもっと簡単になりました！

難しかったこと 19 ● 公式ドキュメントや技術記事などの情報がない中の開発 ○ まだ世に出ていない技術のため、⾃分で⼿探りしていきながら開発す る必要あり。 ● モーダルの挙動とプロフィールの値取得タイミングの把握 ○ PromiseオブジェクトがResolveされるタイミング。 ○ 押す場所によって取得できる値が異なること ● クイック⼊⼒独⾃の開発⼿法 ○ LIFFブラウザ内でないと本機能を使⽤できない点 ○ ⾃前フォームの値に変換する必要がある点 ● テイツー社様、LINEヤフー社様、弊社（クラスメソッド）の3社で連携を とりながら開発を進める必要があった点 ○ 2024/7⽉頃からの先⾏開発〜1⽉のリリースと⻑期間

クイック⼊⼒導⼊前後を計測してみた 20 ⼊⼒項⽬ ● 姓 ● 名 ● セイ（カタカナ） ● メイ（カタカナ） ● 性別 ● ⽣年⽉⽇ ● 郵便番号 ● 都道府県 ● 市区町村 ● 町名番地 ● ビルマンション名（任 意） ● パスワード ⼿打ち⼊⼒の場合：1分24秒 クイック⼊⼒の場合：16秒 🎉 1分8秒の時短 🎉

クイック⼊⼒がもたらすLINEミニアプリへの影響 21 LINEミニアプリの強みである⼿軽さという価値が向上 LINEミニアプリ ユーザー認知 → アプリ導⼊ → 会員登録→ アイテム購⼊ シームレスで⾼速なアプリ使⽤が可能

まとめ 22 ● ユーザーにとって会員登録はめんどくさい作業 ● アプリにとってのユーザー離脱の障壁 ● LINEミニアプリのクイック⼊⼒ならシームレスな会員登録体験を 提供可能 ● `liff.$commonProfile.get()`メソッド `liff.$commonProfile.fill()`メソッドの⼆つだけで簡単に実装可 能！ ● 会員登録にかかる時間が1分以上短縮され、LINEミニアプリの⼿

● LINEみんなの使い方ガイド,「共通プロフィールを設定してクイック入力を利用する」, https://guide.line.me/ja/services/quick-fill.html ● LINE Developers, 「クイック入力の概要」, https://developers.line.biz/ja/docs/partner-docs/quick-fill/overview/#common-profile-scope ● LINE Developers, 「法⼈ユーザー向けオプションAPIリファレンス - クイック⼊ ⼒」,https://developers.line.biz/ja/reference/partner-docs/#quick-fill 参考資料 23

No content