技術構成

シンプルで運用しやすいアーキテクチャ

フロントエンド

HTML CSS JavaScript LINE LIFF SDK

LINE アプリ内でネイティブに近いUI体験を提供。LIFF SDK でユーザー認証・プロフィール取得を実現。

バックエンド

Google Apps Script Spreadsheet

GASの doGet/doPost でREST風APIを構築。データはGoogleスプレッドシートに格納。サーバー管理不要。

通知

LINE Messaging API GAS MailApp

2チャネル通知で確実にリーチ。LINEプッシュ通知 + メール通知をGASトリガーで自動実行。

クイック実装ガイド

4ステップで予約管理システムを構築

1

LIFF アプリの準備

LINE Developers Console でプロバイダーを作成し、LIFF アプリを追加。Endpoint URL を設定して LIFF ID を取得します。

await liff.init({ liffId: 'YOUR_LIFF_ID' }); if (!liff.isLoggedIn()) { liff.login(); return; } const profile = await liff.getProfile();
2

GAS バックエンドの構築

doGet / doPost でAPI エンドポイントを作成。パラメータ action でルーティングします。

function doGet(e) { const action = e.parameter.action; if (action === 'list') { return jsonResponse(getSchedules()); } return HtmlService.createHtmlOutputFromFile('index'); } function jsonResponse(data) { return ContentService .createTextOutput(JSON.stringify(data)) .setMimeType(ContentService.MimeType.JSON); }
3

2チャネル通知の設定

LINE Messaging API でプッシュ通知、GAS MailApp でメール通知を送信。GASトリガーで自動実行。

// LINE プッシュ通知 function sendLineNotification(userId, message) { UrlFetchApp.fetch('https://api.line.me/v2/bot/message/push', { method: 'post', headers: { 'Authorization': 'Bearer ' + LINE_ACCESS_TOKEN, 'Content-Type': 'application/json' }, payload: JSON.stringify({ to: userId, messages: [{ type: 'text', text: message }] }) }); } // メール通知 MailApp.sendEmail({ to: email, subject: '【LiffCal】リマインド', body: `${date} ${time} に予定があります。` });
4

デプロイ

clasp で GAS にプッシュし、ウェブアプリとしてデプロイ。LIFF の Endpoint URL を更新して完了。

# clasp でプッシュ clasp push --force # ウェブアプリとしてデプロイ clasp deploy --description "v0.1.0"

開発Tips & ハマりポイント

LIFF x GAS 開発で知っておくべきこと

1

LIFF SDK の初期化タイミング

問題: DOMContentLoaded 前に liff.init() を呼ぶとエラー
解決: addEventListener で確実にDOM読み込み後に実行。LINE外ブラウザではフォールバックUIを表示。
2

LINE外ブラウザでの動作

問題: LINE外(通常ブラウザ)で開くとLIFF APIが使えない
解決: liff.isInClient() で分岐し、ブラウザアクセス時はランディングページを表示。
3

GAS の実行時間制限

問題: 6分(通常)/ 30分(Workspace)の制限
解決: 大量通知はバッチ処理 + トリガーで分割実行。小〜中規模なら無料枠で十分。
4

GAS の無料枠

制限: トリガー実行 90分/日、メール送信 100通/日
結論: 小〜中規模の予約管理(月数百件程度)なら余裕で運用可能。
5

LIFF のサイズモード

問題: Full / Tall / Compact で表示領域が変わる
解決: レスポンシブデザインを基本に、LIFF size に応じたUI調整を行う。

技術発信

LiffCal の最新情報・技術記事をチェック

関連ハッシュタグ

#LINELIFF #GoogleAppsScript #個人開発 #GAS #サーバーレス #LINE #予約管理 #LiffCal