LineBot.pro
チュートリアル

LIFFアプリ開発ガイド：LINE Front-end Frameworkアプリの構築

LIFF（LINE Front-end Framework）アプリを構築するための完全ガイド。ユーザー認証、プロフィールアクセス、メッセージング機能を備えたLINE内でシームレスに動作するWebアプリケーションを作成します。

LineBot.pro Team16 分で読めます
LIFFアプリ開発ガイド：LINE Front-end Frameworkアプリの構築

#LIFFとは？

LIFF（LINE Front-end Framework）は、LINEアプリ内で実行されるWebアプリケーションを構築するためのプラットフォームです。LIFFアプリは標準的なWeb技術を使用しながら、ネイティブアプリのような体験を提供します。

#主な機能

  • シームレスな認証：ログインフォームなしでユーザーのLINEプロフィールにアクセス
  • メッセージ送信：アプリから直接チャットにメッセージを送信
  • シェアターゲットピッカー：ユーザーが友達やグループにコンテンツをシェア
  • QRコードスキャナー：バーコード/QRスキャン機能内蔵
  • ネイティブ感：LINE内でのフルスクリーン体験

#ユースケース

ユースケース例メリット
Eコマース商品カタログ、チェックアウトアプリダウンロード不要
予約レストラン予約、アポイントメントLINE経由で素早くアクセス
メンバーシップポイントカード、ポイントシステム自動認証
フォームアンケート、登録リッチUX、事前入力データ
ゲームミニゲーム、クイズバイラルシェア機能

LINEアプリ開発サービスの詳細をご覧ください。

#プロジェクトセットアップ

#ステップ1：LINE ConsoleでLIFFアプリを作成

  1. LINE Developersコンソールにアクセス
  2. プロバイダーとチャネルを選択
  3. LIFFタブに移動
  4. 「LIFFアプリを追加」をクリック
  5. 設定：
    • LIFFアプリ名：アプリ名
    • サイズ：Full、Tall、またはCompact
    • エンドポイントURL：アプリのURL（HTTPSが必要）
    • スコープ：profile、openid、chat_message.write

#ステップ2：React/Next.jsプロジェクトをセットアップ

bash
npx create-next-app@latest my-liff-app --typescript
cd my-liff-app
npm install @line/liff

#ステップ3：LIFF SDKを初期化

LIFFユーティリティファイルを作成：

typescript
// lib/liff.ts
import liff from '@line/liff';

const LIFF_ID = process.env.NEXT_PUBLIC_LIFF_ID!;

export async function initLiff() {
  try {
    await liff.init({ liffId: LIFF_ID });
    console.log('LIFF initialized successfully');
    return true;
  } catch (error) {
    console.error('LIFF initialization failed:', error);
    return false;
  }
}

export { liff };

#ユーザー認証

#ユーザープロフィールの取得

tsx
// components/UserProfile.tsx
'use client';

import { useLiff } from './LiffProvider';
import Image from 'next/image';

export function UserProfile() {
  const { isReady, isLoggedIn, profile, login, logout } = useLiff();

  if (!isReady) {
    return <div>読み込み中...</div>;
  }

  if (!isLoggedIn) {
    return (
      <button onClick={login} className="btn-primary">
        LINEでログイン
      </button>
    );
  }

  return (
    <div className="flex items-center gap-4">
      {profile?.pictureUrl && (
        <Image
          src={profile.pictureUrl}
          alt={profile.displayName}
          width={48}
          height={48}
          className="rounded-full"
        />
      )}
      <div>
        <p className="font-semibold">{profile?.displayName}</p>
        <button onClick={logout} className="text-sm text-gray-500">
          ログアウト
        </button>
      </div>
    </div>
  );
}

#メッセージング統合

#メッセージの送信

typescript
// 現在のチャットにメッセージを送信
async function sendMessage(text: string) {
  if (!liff.isInClient()) {
    alert('この機能はLINE内でのみ動作します');
    return;
  }

  await liff.sendMessages([
    {
      type: 'text',
      text: text
    }
  ]);
}

#シェアターゲットピッカー

ユーザーが友達やグループにコンテンツをシェア：

typescript
async function shareToFriends() {
  if (!liff.isApiAvailable('shareTargetPicker')) {
    alert('シェア機能は利用できません');
    return;
  }

  const result = await liff.shareTargetPicker([
    {
      type: 'flex',
      altText: 'この商品をチェック！',
      contents: {
        type: 'bubble',
        body: {
          type: 'box',
          layout: 'vertical',
          contents: [
            { type: 'text', text: '素晴らしい商品', weight: 'bold' },
            { type: 'text', text: '¥999', color: '#06C755' }
          ]
        }
      }
    }
  ]);

  if (result) {
    console.log('シェア成功');
  }
}

#ベストプラクティス

#1. 外部ブラウザの処理

LIFFアプリは外部ブラウザでも開けます。適切に処理：

typescript
function App() {
  const { isReady, isInClient, isLoggedIn, login } = useLiff();

  if (!isReady) return <LoadingScreen />;

  // LINE内でなくログインしていない場合、ログインボタンを表示
  if (!isInClient && !isLoggedIn) {
    return (
      <div className="text-center p-8">
        <h1>ようこそ！</h1>
        <p>続行するにはLINEでログインしてください</p>
        <button onClick={login} className="btn-primary">
          LINEでログイン
        </button>
      </div>
    );
  }

  return <MainApp />;
}

#デプロイメント

#Vercelにデプロイ

bash
npm install -g vercel
vercel --prod

#テストチェックリスト

  • LINEアプリ（iOSとAndroid）でテスト
  • 外部ブラウザでテスト
  • ログイン/ログアウトフローをテスト
  • メッセージ送信をテスト（該当する場合）
  • シェアターゲットピッカーをテスト（該当する場合）
  • 異なる画面サイズでテスト

#結論

LIFFはWebアプリとLINEの強力な統合を可能にします。重要なポイント：

  • アプリライフサイクルの早い段階でLIFFを初期化
  • クライアント内と外部ブラウザの両方のシナリオを処理
  • バイラル機能にシェアターゲットピッカーを使用
  • バックエンドで常にアクセストークンを検証
  • 実際のデバイスで徹底的にテスト

LIFFアプリを構築する準備はできましたか？

LineBot.proを試す テンプレートとツールで迅速なLIFF開発。事前構築済みのコンポーネントでLINEミニアプリをより速く構築。

関連リソース：

関連サービス

line app development
line development
line automation
LineBot.pro

LINEビジネスを自動化する準備はできましたか？

LineBot.proでLINEコミュニケーションの自動化を今すぐ始めましょう。

無料トライアルを開始料金を見る