LINEのアプリ開発といえば「LIFF（LINE Front-end Framework）」が真っ先に挙がりますが、LIFFを使わなくても十分にリッチなLINEアプリを構築できます。本記事では、LIFFに依存しないLINEアプリ開発の手法を体系的に解説します。LIFFのデメリットに悩んでいる開発者や、よりシンプルな構成を求めている方に向けた実践的なガイドです。

テックジム東京本校では、情報科目の受験対策指導やAI駆動開発コースもご用意しております。

1. LIFFを使わない開発を検討すべき理由

LIFFの課題と制約

LIFFはLINEアプリ内にWebViewを表示する強力な仕組みですが、以下のようなデメリットも存在します。

課題	詳細
LINEアプリ依存	LINEアプリが起動していないと動作しない
デバッグが困難	LINEブラウザ固有の挙動でバグが再現しにくい
UXの制限	WebViewのヘッダーが固定されUIの自由度が低い
バージョン管理コスト	LINE SDKのアップデートへの追従が必要
モバイル限定になりやすい	PCブラウザからのアクセスに別途対応が必要

LIFFが必須になるのは「LINEユーザー情報をフロントエンドで取得しながらWebUIを表示したい」ケースに限られます。それ以外のユースケースでは、LIFFなしの構成がよりシンプルで保守しやすい選択肢です。

---

2. LINEアプリ開発の全体像と選択肢

LIFFを使わずにLINEと連携するための主な手段は以下の4つです。

┌────────────────────────────────────────────────┐
│              LINE Platform                     │
│                                                │
│  ① Messaging API  ②LINE Login  ③LINE Pay  ④通知 │
└───────────┬────────────────────────────────────┘
            │ Webhook / OAuth2 / API呼び出し
            ▼
     あなたのバックエンドサーバー
            │
            ▼
     あなたのWebアプリ / モバイルアプリ

1. Messaging API：メッセージの送受信、ボット構築
2. LINE Login（OAuth 2.0）：ユーザー認証・プロフィール取得
3. LINE Pay API：決済機能の組み込み
4. LINE通知メッセージ：マーケティング・通知配信

---

3. LINE Messaging APIでチャットボットを構築する

Messaging APIでできること

• テキスト・画像・動画・音声メッセージの送受信
• ユーザーへのプッシュ通知（Push Message）
• グループ・トークルームへの投稿
• クイックリプライ・ボタンテンプレートの表示
• Flex Messageによるリッチなカードレイアウト

基本的なアーキテクチャ

LINEユーザー
    │  メッセージ送信
    ▼
LINE Platform
    │  Webhookイベント (HTTP POST)
    ▼
あなたのWebhookサーバー（Node.js / Python / Go 等）
    │  Reply Message API呼び出し
    ▼
LINE Platform → LINEユーザーへ返信

チャネルアクセストークンの取得

1. LINE Developers Console にアクセス
2. プロバイダーを作成 → 「Messaging API」チャネルを作成
3. 「チャネルアクセストークン」を発行（長期トークンを推奨）

---

4. LINE Loginを単体で使ってWebアプリに認証を組み込む

LIFFを使わなくても、OAuth 2.0ベースのLINE Loginだけで以下が実現できます。

• LINEアカウントでのWebサイトへのログイン
• ユーザーIDの取得（subクレーム）
• 表示名・プロフィール画像の取得
• メールアドレスの取得（オプション権限）

認証フロー（Authorization Code Flow）

①ユーザーが「LINEでログイン」ボタンをクリック
    │
②あなたのサーバー → LINE認証エンドポイントへリダイレクト
    │  https://access.line.me/oauth2/v2.1/authorize
    │
③ユーザーがLINEアプリ or ブラウザで認証を許可
    │
④LINEがコールバックURL（redirect_uri）へ認証コードを返す
    │
⑤あなたのサーバーがコードをアクセストークンに交換
    │  POST https://api.line.me/oauth2/v2.1/token
    │
⑥プロフィールAPIでユーザー情報を取得
   GET https://api.line.me/v2/profile

実装例（Python / FastAPI）

from fastapi import FastAPI
from fastapi.responses import RedirectResponse
import httpx, os

app = FastAPI()

LINE_CLIENT_ID = os.environ["LINE_CLIENT_ID"]
LINE_CLIENT_SECRET = os.environ["LINE_CLIENT_SECRET"]
REDIRECT_URI = "https://yourapp.example.com/callback"

@app.get("/login")
def login():
    params = (
        f"response_type=code"
        f"&client_id={LINE_CLIENT_ID}"
        f"&redirect_uri={REDIRECT_URI}"
        f"&scope=profile%20openid"
        f"&state=random_state_value"
    )
    return RedirectResponse(f"https://access.line.me/oauth2/v2.1/authorize?{params}")

@app.get("/callback")
async def callback(code: str, state: str):
    async with httpx.AsyncClient() as client:
        # アクセストークンの取得
        token_res = await client.post(
            "https://api.line.me/oauth2/v2.1/token",
            data={
                "grant_type": "authorization_code",
                "code": code,
                "redirect_uri": REDIRECT_URI,
                "client_id": LINE_CLIENT_ID,
                "client_secret": LINE_CLIENT_SECRET,
            },
        )
        token = token_res.json()
        access_token = token["access_token"]

        # プロフィールの取得
        profile_res = await client.get(
            "https://api.line.me/v2/profile",
            headers={"Authorization": f"Bearer {access_token}"},
        )
        return profile_res.json()

ポイント：LIFFなしでも userId・displayName・pictureUrl が取得でき、自社DBとの紐付けが可能です。

---

5. Webhook＋外部Webサイトで完結するアーキテクチャ

「LINEからURLを送ってWebサイトに誘導する」パターンはLIFFなしで完全に成立します。

典型的なユースケース

• ECサイトの注文確認：注文後にLINEでURLを通知 → 通常のブラウザで開く
• 予約システム：予約リンクをLINEで送信 → 外部フォームで手続き
• 会員登録フロー：LINE Loginで認証 → 自社サービスにセッションを作成

シンプルな通知ボットの構成例

注文完了イベント（EC backend）
    │
    ▼
Push Message API呼び出し
POST https://api.line.me/v2/bot/message/push

Body:
{
  "to": "<userId>",
  "messages": [{
    "type": "text",
    "text": "ご注文ありがとうございます！\n詳細はこちら👇\nhttps://yourshop.example.com/orders/123"
  }]
}

この方法はLINEアプリを起動しているかどうかに関係なく、ユーザーのLINEに通知を届けられます。

---

6. Flex MessageとリッチメニューでUIを強化する

LIFFなしでもメッセージのUI表現は十分にリッチにできます。

Flex Messageとは

Flex Messageは、LINEのチャット画面内でカード型・バブル型のレイアウトを表示できるメッセージ形式です。ボタン・画像・テキストを自由に組み合わせられます。

{
  "type": "flex",
  "altText": "注文確認",
  "contents": {
    "type": "bubble",
    "hero": {
      "type": "image",
      "url": "https://example.com/item.jpg",
      "size": "full"
    },
    "body": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        { "type": "text", "text": "商品名", "weight": "bold", "size": "xl" },
        { "type": "text", "text": "¥3,000", "color": "#ff5551" }
      ]
    },
    "footer": {
      "type": "box",
      "layout": "vertical",
      "contents": [{
        "type": "button",
        "action": {
          "type": "uri",
          "label": "詳細を見る",
          "uri": "https://yourshop.example.com/item/1"
        }
      }]
    }
  }
}

Flex Message Simulator でビジュアルを確認しながら設計できます。

リッチメニューの活用

リッチメニューはLINEのトーク画面下部に常駐するカスタムメニューで、タップ操作でWebサイトへの遷移やメッセージ送信が行えます。LIFFなしの構成でも非常に有効です。

アクション種別	説明
uri	外部URL（通常のWebサイト）を開く
message	特定のテキストをチャットに送信
postback	バックエンドにイベントを送信
datetimepicker	日付・時間の選択UIを表示

---

7. LINE Payを組み込む方法

LINE PayはLIFFなしでも利用できます。決済画面はLINE Payが提供するホスト型のUIを使うため、独自のWebViewは不要です。

基本的な決済フロー

①あなたのサーバーが LINE Pay Request API を呼び出す
    POST https://api-pay.line.me/v3/payments/request

②LINE Payが返す paymentUrl をユーザーのブラウザに表示
  （LINEアプリが起動してLINE Payの決済画面が表示される）

③ユーザーが決済を承認

④LINE PayがコールバックURL（confirmUrl）にリダイレクト

⑤あなたのサーバーが Confirm API を呼び出して決済を確定
    POST https://api-pay.line.me/v3/payments/{transactionId}/confirm

---

8. 実装サンプル：Node.jsでWebhookサーバーを立てる

以下は、LIFFなしでMessaging APIのWebhookを受け取り、オウム返しするシンプルなサーバーの実装例です。

必要なパッケージ

npm install @line/bot-sdk express

サーバー実装（server.js）

const express = require('express');
const line = require('@line/bot-sdk');

const config = {
  channelAccessToken: process.env.LINE_CHANNEL_ACCESS_TOKEN,
  channelSecret: process.env.LINE_CHANNEL_SECRET,
};

const client = new line.messagingApi.MessagingApiClient({
  channelAccessToken: config.channelAccessToken,
});

const app = express();

// Webhookエンドポイント（署名検証あり）
app.post('/webhook', line.middleware(config), (req, res) => {
  Promise.all(req.body.events.map(handleEvent))
    .then(() => res.status(200).end())
    .catch((err) => {
      console.error(err);
      res.status(500).end();
    });
});

async function handleEvent(event) {
  // テキストメッセージのみ処理
  if (event.type !== 'message' || event.message.type !== 'text') {
    return;
  }

  const replyText = `受け取りました：${event.message.text}`;

  return client.replyMessage({
    replyToken: event.replyToken,
    messages: [{ type: 'text', text: replyText }],
  });
}

app.listen(3000, () => console.log('Webhook server running on port 3000'));

ローカル開発での動作確認

LINEのWebhookはHTTPS必須のため、ローカル開発には ngrok を使うのが定番です。

# ngrokでローカルサーバーを公開
ngrok http 3000

# 出力されたURL（例: https://xxxx.ngrok.io/webhook）を
# LINE Developersコンソールの「Webhook URL」に設定する

---

9. LIFFあり・なしの比較まとめ

機能・観点	LIFFあり	LIFFなし
LINEユーザー情報の取得（フロントエンド）	✅ 容易	LINE Login（OAuth）で対応可
WebUI表示	LINEのWebView内	通常のブラウザ（自由度高い）
デバッグのしやすさ	△ LINEブラウザ固有の挙動あり	✅ 通常のブラウザでデバッグ可
PC対応	△ 要追加対応	✅ そのままブラウザで動作
SDK依存	LINE SDK必須	不要（素のHTTP/OAuth）
チャットボット構築	Messaging APIと併用	✅ Messaging APIのみで完結
実装の複雑さ	やや複雑	✅ シンプル
向いているユースケース	購入フォーム・会員証など	ボット・通知・外部サイト連携

---

10. よくある質問（FAQ）

Q. LIFFなしでユーザーのLINE IDは取得できますか？

はい。LINE Login（OAuth 2.0） を使えば、LIFFなしでもユーザーの userId（LINE固有のID）を取得できます。バックエンド経由でトークンを検証する安全な実装が可能です。

Q. スマートフォンのLINEアプリを開かずに通知を送れますか？

はい。Push Message API を使えば、LINEアプリが起動していなくてもバックグラウンド通知をユーザーに届けられます（ユーザーが友だち追加している前提）。

Q. LIFFなしでLINEミニアプリは作れますか？

LINEミニアプリ（旧称：LINEアプリ）は現在LIFFを基盤としているため、ミニアプリとして公開する場合はLIFFが必要です。一方、外部Webサービスとの連携や通知ボットであればLIFFなしで完全に構築できます。

Q. 開発コストはLIFFありとなしでどちらが低いですか？

多くのケースでLIFFなしの方がコストは低くなります。通常のWebフレームワーク（Next.js・FastAPI等）をそのまま使え、LINE固有のSDKを学ぶ必要がないためです。

---

まとめ

LIFFはLINEアプリ内のWebView表示に特化した強力な仕組みですが、すべてのLINE連携でLIFFが必要なわけではありません。

• チャットボットや通知機能には Messaging API で十分
• ユーザー認証には LINE Login（OAuth 2.0） を直接利用
• リッチなUIは Flex Message・リッチメニュー で実現
• 決済は LINE Pay API でLIFFなしに対応可能

LIFFを省くことで、デバッグのしやすさ・PCブラウザ対応・実装のシンプルさといったメリットを得られます。用途に応じてLIFFあり・なしを使い分けることが、質の高いLINEアプリ開発への近道です。

---

参考リンク

• LINE Developers 公式ドキュメント
• Messaging API リファレンス
• LINE Login ドキュメント
• Flex Message Simulator
• LINE Pay API ドキュメント

■ゼロから始めるClaudeCode講座のご案内

テックジム東京本校では「ClaudeCode」の体験講座を開催。
「その日のうちに動かす」 をゴールに、環境構築から実践まで。
毎週土曜日15時。参加は無料です。対面・ハンズオンだから初心者でも安心。

ゼロから始めるClaude Code講座【東京本校・リアル開催】

■らくらくPython塾 – 読むだけでマスター

共通テスト「情報I」対策解説講座

共通テスト「情報I」対策解説講座｜2026年度試験に挑戦

実践で学ぶPython速習講座

実践で学ぶPython速習講座「初心者を1時間で卒業せよ!!」【テックジム東京本校】

■テックジム東京本校

格安のプログラミングスクールといえば「テックジム」。
講義動画なし、教科書なし。「進捗管理とコーチング」で効率学習。
対面型でより早くスキル獲得、月額2万円のプログラミングスクールです。
情報科目の受験対策指導やAI駆動開発コースもご用意しております。

テックジム東京本校｜「情報」科目受験生歓迎