0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

LIFF → LINEミニアプリへの移行が難しいと勘違いしてた一昔前の自分に捧げるBlog

Last updated at Posted at 2025-11-26

先日、LIFFからLINE Mini Appへの移行を完了しました。結論から言うと、想像を遥かに超えて簡単だったので、同じように躊躇している人の背中を押すために書きます。

どうして移行?

  • LIFFは新規作成が終了している:LINEは公式にLIFFからMini Appへの移行を推奨しています(公式ドキュメント

  • LIFFの操作性に課題があった:操作中に誰かからのメッセージを開いてしまうと、LIFFの画面が閉じてしまい最初からやり直し...地味にストレスだった
    ミニアプリだと、クロームのTabのように、これまでの編集が保存されてるので、再開できる。
    Screenshot_2025-11-27-10-55-09-96_94c3c0214f41e8559bec03caf75c21c7.jpg

  • 認証済みMini Appのメリットが魅力的すぎる:特にホーム画面へのアイコン追加は喉から手が出るほど欲しかった機能(Mini App独自機能

どうして難しいと思ってた?

正直、移行はめちゃくちゃハードルが高いと思い込んでいました。

  • 公式の移行ガイドを待っていた:2025年末頃に「移行の具体的なステップを公表する」的なアナウンスを見て、それが出るまでできないと勝手に解釈していた。

スクリーンショット 2025-11-26 18.02.11.png

(画像はこちらより引用)

  • デザインの自由度が低いと勘違い:どこかのブログでMini Appはデザインの幅がすごく限られてる的なニュアンスを読んで不安になってた

でも、全然そんなことなかった。

きっかけは、Mini Appのオフラインイベントで出会ったLIFF開発者の方との会話。「逆に何がそんなに難しいのですか?」の一言で腰を上げたら、びっくりするほどあっさり移行できました。

方法

驚くほどシンプル。

  1. LINE Developers ConsoleでMini Appチャネルを新規作成
  2. 作成されたLIFF IDをフロントエンドで使用
  3. LIFFにはない認証簡略化のため、getProfileで認証エラーが発生 → 修正コードを追加
    詳しくはこちら
  4. エンドポイントURLを設定

これだけ。 既存のLIFFアプリのコードはほぼそのまま動きました。

不安だったけど、問題なかった点

認証フローがそのまま使えた

私のシステムでは、LIFFとSupabaseを組み合わせたログインレス認証を実装しています。これは2次リダイレクトを前提としたLIFF特化型の認証フローなので、Mini App移行で壊れたら詰むところでした。

結果:何も問題なし。 フローはLIFFとまったく同じでした。

openExternalBrowser = trueが動く

おすすめ商品を楽天などにリダイレクトする機能があり、openExternalBrowser = trueでユーザーのログイン情報を活かしたかった。Mini Appだとできないと思ってたけど、最近対応されたらしく普通に動いた。
スクリーンショット 2025-11-26 18.07.40.png
(画像はこちらより引用)

沼った点

環境の分け方

LIFFでは本番・ステージング・開発で環境が分かれないため、異なるプロバイダーにLIFFを3つ作って運用していました。Mini Appへの移行時に同じ構成を取れるのか不安でした。

今のところの結論(まだ試行錯誤中):

  • 移行中は全プロバイダーでMini Appの開発バージョンを使用
  • 審査時にprodプロバイダーだけ、審査用・本番用のフロントエンドURLをデプロイして登録

これで、開発中は認証済みアプリと同等の振る舞いで開発できました。

getProfileができない問題

これが一番ハマった。ユーザーのLINEプロフィール取得で「権限がない」エラーが出続けました。

原因:Mini Appでは認証簡略化により、初回の認証画面がガッツリ出なくなった代わりに、デフォルトではopenidスコープしか付与されない。getProfileにはユーザーに追加の許可を求める画面を出す必要がありました。

liff.getProfile()をフロントで呼べばユーザーに許可を求める画面が出るらしいのですが、私の実装ではセキュリティのためaccessTokenをバックエンドに送ってサーバーサイドでgetProfileする構造にしていたので、クライアントで許可画面が出ずにエラーに。

解決方法:バックエンドにトークンを送る前に、クライアントサイドで以下を実行:

liff.permission.query("profile").then((permissionStatus) => {
  if (permissionStatus.state === "prompt") {
    liff.permission.requestAll();
  }
});

これで許可画面が表示されるようになり、解決しました。

まとめ

移行、めっちゃ簡単だった。

過去の自分に言いたい:「公式ガイドなんか待たなくていいから、今すぐやれ」

同じように躊躇している方、ぜひ一歩踏み出してみてください。思ってるより全然簡単ですよ。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?