LINEミニアプリに入門してみた！〜LINEアプリで動かすまでの手順まとめ〜
リテールアプリ共創部の末永です。
LINEのミニアプリ開発キャッチアップのために色々なページを読みながら手探りで進めたので、「とりあえず動くところまで」の手順を自分用のメモも兼ねてまとめました。
この記事のゴール
自分の LINE プロフィール（アイコン・名前）を表示するだけのミニアプリを作り、スマホの LINE アプリで実際に動かすところまでやります。
この記事でやらないこと
- サービスメッセージ、決済連携、シェア機能などのリッチな機能
- コードの詳細な解説
前提知識
LINEミニアプリとは
LINE アプリの中で動く ウェブアプリ です。ユーザーはアプリストアから何かをインストールする必要がなく、LINE 上でそのままサービスを利用できます。技術的にはただのウェブアプリ（HTML/CSS/JavaScript）に、LIFF SDK という LINE 連携用のライブラリを組み込んだものです。
LIFF とは
LINE が提供するウェブアプリ開発プラットフォームです。LIFF SDK を使うことで、ウェブアプリから LINE のユーザー情報取得やメッセージ送信などの機能を呼び出せます。もともとは独立したプラットフォームでしたが、現在は LINE ミニアプリに統合されています。
1. LINE Developers コンソールでプロバイダーを作成する
まず LINE Developers コンソール にログインします。
1-1. プロバイダーを作成する
プロバイダー とは、LINE プラットフォーム上でサービスを提供する個人や企業を表す概念です。チャネル（後述）はプロバイダーの下に紐づきます。
- ホーム画面の「新規プロバイダー作成」をクリック
- プロバイダー名を入力して「作成」をクリック
2. LINE ミニアプリのチャネルを作成する
チャネル とは、アプリと LINE プラットフォームを接続するための通信路です。LINE ミニアプリを作るには「LINE ミニアプリ」タイプのチャネルを作成します。
- 作成したプロバイダーをクリック
- 「チャネル設定」>「新規チャネル作成」>「LINE ミニアプリ」を選択
- 以下の項目を入力して作成
| 項目 | 説明 |
|---|---|
| チャネルの種類 | 「LINE ミニアプリ」になっていることを確認 |
| プロバイダー | 先ほど作成したプロバイダー |
| サービスを提供する地域 | 「日本」を選択 |
| チャネル名 | アプリの名前（「LINE」を含む名前は使えません） |
| チャネル説明 | アプリの説明 |
| メールアドレス | 更新通知を受け取るメールアドレス |
- 各規約に同意して「作成」をクリック
これで 未認証ミニアプリ として利用可能な状態になります。入門段階ではこの状態で十分です。
3. コンソールの設定を行う
チャネルが作成できたら、ウェブアプリを動かすための設定を行います。
3-1. LIFF ID を確認する
チャネルを作成すると、内部的に 開発用・審査用・本番用 の3つの内部チャネルが自動で作られ、それぞれに固有の LIFF ID が割り当てられます。
- チャネルの「ウェブアプリ設定」タブをクリック
- チャネルの「基本情報」セクションに、開発用・審査用・本番用それぞれの LIFF URL が表示されています。開発用の LIFF URL をメモしてください。
LIFF URL: https://miniapp.line.me/0000000000-XXXXXXXX
~~~~~~~~~~~~~~~~~~~~~~
↑ この部分が LIFF ID
LIFF ID は LIFF SDK の初期化時に使う識別子です。LIFF URL の
miniapp.line.me/以降の部分がそのまま LIFF ID です。秘密情報ではないので、コードに埋め込んでも問題ありません（LIFF URL 自体が公開情報のため）。
内部チャネルについて: 開発用はテスター限定、本番用は全ユーザーに公開されます。この記事では全て開発用を使います。
3-2. エンドポイント URL について理解する
同じ「ウェブアプリ設定」タブの開発用セクションに、エンドポイント URL という項目があります。
エンドポイント URL とは、ユーザーが LIFF URL をタップした後、LINE の認証を経てリダイレクトされる先の URL です。つまりウェブアプリの公開 URL を指します。HTTPS 必須です。
デフォルトでは https://developers.line.biz/assets/liff-default-dev.html が設定されています。デプロイ後にここを差し替えるので、今はそのままで OK です。
3-3. スコープを確認する
「ウェブアプリ設定」タブの基本情報セクションにある「Scope」を確認します。デフォルトで以下が有効になっています：
| スコープ | 用途 |
|---|---|
openid |
ユーザー ID の取得（基本） |
profile |
表示名・プロフィール画像の取得 |
スコープ とは、アプリがユーザーのどの情報にアクセスできるかの権限設定です。ユーザーがミニアプリを初めて開いたときに許可を求める画面に影響します。
3-4. テスターを確認する
開発用のミニアプリは、テスターとして登録されたユーザーしかアクセスできません。チャネルの「権限管理」タブ >「Tester」セクションで、自分の LINE アカウントが登録されていることを確認してください。チャネル作成者は登録済みのはずですが、もし無ければ追加してください。
4. ウェブアプリをセットアップする
ここからはコードを書いていきます。今回は React + TypeScript + Tailwind CSS + Vite の構成です。
4-1. リポジトリをクローンする
git clone https://github.com/suekou/line-miniapp-quickstart.git
cd line-miniapp-quickstart
ディレクトリ構成は以下のとおりです：
app/
├── index.html # エントリーポイント
├── src/
│ ├── main.tsx # React のマウント
│ ├── App.tsx # メインコンポーネント
│ ├── useLiff.ts # LIFF SDK 初期化のカスタムフック
│ ├── index.css # Tailwind CSS 読み込み
│ └── vite-env.d.ts # 環境変数の型定義
├── tsconfig.json
├── vite.config.ts
├── package.json
└── .env.example
LIFF SDK に関わるのは主に useLiff.ts（SDK の初期化）と App.tsx（プロフィール取得・表示）の2ファイルだけです。
4-2. 依存パッケージをインストールする
cd app
pnpm install
4-3. 環境変数を設定する
cp .env.example .env
.env を編集して、先ほどメモした LIFF ID を設定します：
VITE_LIFF_ID=2009784390-XXXXXXXX
4-4. LIFF SDK の基本
LIFF SDK を使うには、最初に liff.init() で初期化する必要があります。初期化時に LIFF ID を渡します。
await liff.init({ liffId: "2009784390-XXXXXXXX" });
初期化が完了すると、以下のような情報を取得できます：
// ユーザーのプロフィール（名前、アイコン等）
const profile = await liff.getProfile();
profile.displayName; // "太郎"
profile.pictureUrl; // "https://profile.line-scdn.net/..."
// 実行環境の情報
liff.getOS(); // "ios" | "android" | "web"
liff.getAppLanguage(); // "ja" | "en" | ...
liff.isInClient(); // LINE アプリ内で動いているか
今回のアプリではこれらを画面に表示しています。
5. Vercel にデプロイする
LINE ミニアプリは HTTPS でホストする必要があります。今回は Vercel を使います。
5-1. Vercel CLI をインストール・ログイン
pnpm install -g vercel
vercel login
5-2. デプロイする
vercel --prod
対話形式でいくつか質問されます：
| 質問 | 回答 |
|---|---|
| Set up and deploy “~"? | Y |
| Which scope should contain your project? | 自分のアカウントを選択 |
| Link to existing project? | N |
| What’s your project’s name? | 任意（例: line-mini-app-hello） |
| In which directory is your code located? | そのまま Enter（./） |
| Want to modify these settings? | N |
| Do you want to change additional project settings? | N |
デプロイが完了すると URL が表示されます：
https://line-mini-app-hello-xxxx.vercel.app
5-3. エンドポイント URL を更新する
LINE Developers コンソールに戻り、エンドポイント URL を Vercel の URL に差し替えます。
- チャネル >「ウェブアプリ設定」タブ
- 「開発用」のエンドポイント URL を Vercel の URL に変更
- 「更新」をクリック
エンドポイント URL とデプロイ先の URL が一致していないと、LINE の認証後に正しいページにリダイレクトされません（404 になります）。
6. スマホの LINE アプリで動かす
いよいよ実機確認です。
6-1. LIFF URL を LINE で開く
LINE Developers コンソールのウェブアプリ設定タブに表示されている LIFF URL をコピーし、スマホの LINE アプリ内でタップして開きます。
https://miniapp.line.me/2009784390-XXXXXXXX
タップすると、以下の流れで画面が遷移します：
- 「アクセス許可要求画面」が表示される
- プロフィール情報と内部識別子の取得許可を求める画面
- 「許可する」をタップ
- ミニアプリが表示されます
自分の LINE のプロフィール画像と名前が表示されていれば成功です!
トラブルシューティング
404 Not Found が表示される
LINE Developers コンソールのエンドポイント URL と Vercel のデプロイ先 URL が一致しているか確認してください。認証後のリダイレクト先がエンドポイント URL なので、ここがずれていると 404 になります。
「LIFF ID が設定されていません」と表示される
.env に VITE_LIFF_ID が設定されているか確認してください。
まとめ
LINE ミニアプリは「LINE の中で動くウェブアプリ」なので、特別なネイティブ開発の知識は不要です。React でも Vue でも、普段使っているフレームワークでそのまま作れます。
この記事が最初の一歩の参考になれば幸いです。では👋
