LINEのLIFFからアクセスするモバイルオーダーデモアプリケーションです。
- LINEのトークからLIFF(Web画面)を開き、商品選択 → カート → 注文確定 → 完了 まで体験できるデモ
- 決済なし、デモ用途
- 管理者はWeb管理画面で注文一覧/ステータス更新ができ、更新に応じてLINE通知を送信
- Ruby 3.3
- Rails 7.2
- PostgreSQL 16
- Hotwire (Turbo + Stimulus)
- Tailwind CSS
- Docker Compose (開発環境)
cp .env.example .env.envファイルを編集して必要な値を設定:
# LIFF設定
LIFF_ID=your_liff_id_here
# LINE Messaging API
LINE_CHANNEL_ACCESS_TOKEN=your_channel_access_token_here
# 管理画面Basic認証
ADMIN_USER=admin
ADMIN_PASSWORD=password
# 本番用 (Render)
# DATABASE_URL=postgres://user:password@host:5432/dbname
# RAILS_MASTER_KEY=your_master_key_here
# Cloudinary (本番用画像ストレージ)
# CLOUDINARY_URL=cloudinary://API_KEY:API_SECRET@CLOUD_NAME
# コンテナをビルドして起動
docker compose up -d
# データベースの作成とマイグレーション
docker compose exec web rails db:create db:migrate db:seed
# ログの確認
docker compose logs -f web- LIFF画面: http://localhost:3000/liff
- 管理画面: http://localhost:3000/admin (Basic認証: admin/password)
- LINE Developers にアクセス
- プロバイダーを選択（または新規作成）
- 新しいLINEログインチャネルを作成
- LIFFタブでLIFFアプリを追加:
- エンドポイントURL:
https://your-app-url.com/liff - スコープ:
profile - ボットリンク機能: 任意
- エンドポイントURL:
- 発行されたLIFF IDを
.envのLIFF_IDに設定
- Messaging APIチャネルを作成
- チャネルアクセストークンを発行
.envのLINE_CHANNEL_ACCESS_TOKENに設定
| パス | 説明 |
|---|---|
/liff |
商品一覧 |
/liff/cart |
カート |
/liff/checkout |
注文確認 |
/liff/orders/:id/complete |
注文完了 |
| パス | 説明 |
|---|---|
/admin |
注文一覧 |
/admin/orders/:id |
注文詳細・ステータス更新 |
/admin/products |
商品一覧 |
/admin/products/new |
商品追加 |
/admin/products/:id/edit |
商品編集 |
| 変数名 | 説明 | 必須 |
|---|---|---|
DATABASE_URL |
PostgreSQL接続URL | Yes (本番) |
RAILS_MASTER_KEY |
Rails credentials key | Yes (本番) |
ADMIN_USER |
管理画面Basic認証ユーザー | Yes |
ADMIN_PASSWORD |
管理画面Basic認証パスワード | Yes |
LIFF_ID |
LIFFアプリID | Yes |
LINE_CHANNEL_ACCESS_TOKEN |
LINE Messaging APIトークン | Yes (通知機能) |
CLOUDINARY_URL |
Cloudinary接続URL | Yes (本番) |
本番環境では商品画像の保存にCloudinaryを使用します。
- Cloudinary にアクセス
- 無料アカウントを作成（月25GBまで無料）
- ダッシュボードにアクセス
ダッシュボードの「API Environment variable」からCLOUDINARY_URLをコピー:
CLOUDINARY_URL=cloudinary://API_KEY:API_SECRET@CLOUD_NAME
本番環境（Render等）にCLOUDINARY_URL環境変数を設定します。
- 開発環境: ローカルディスク（Active Storage local）を使用
- 本番環境: Cloudinaryを使用（
config/environments/production.rbで設定済み） - 画像形式: PNG, JPEG, WebP対応
- 最大サイズ: 5MB
- LINEアプリでLIFF URLを開く（または開発時は直接ブラウザでアクセス）
- 商品一覧から商品をカートに追加
- カートで数量を調整
- チェックアウトで注文を確定
- 完了画面で注文番号を確認
/adminにアクセス（Basic認証）- 注文一覧でステータスや日付でフィルター
- 注文詳細でステータスを更新
readyステータスに更新するとLINE通知が送信される
# コンテナ起動
docker compose up -d
# コンテナ停止
docker compose down
# Railsコンソール
docker compose exec web rails c
# マイグレーション実行
docker compose exec web rails db:migrate
# シード投入
docker compose exec web rails db:seed
# ログ確認
docker compose logs -f webLIFFはHTTPSが必須のため、ローカル開発ではngrokを使用してトンネリングします。
# macOS (Homebrew)
brew install ngrok
# または公式サイトからダウンロード
# https://ngrok.com/download# ngrokにサインアップ後、認証トークンを設定
ngrok config add-authtoken YOUR_AUTH_TOKEN# ターミナル1: アプリを起動
docker compose up -d
# ターミナル2: ngrokでトンネル作成
ngrok http 3000ngrokが起動すると以下のようなURLが表示されます:
Forwarding https://xxxx-xxx-xxx.ngrok-free.app -> http://localhost:3000
- LINE Developers Console にアクセス
- 対象のLIFFアプリを選択
- エンドポイントURLを
https://xxxx-xxx-xxx.ngrok-free.app/liffに変更 - 保存
LINEアプリで以下のURLを開きます:
https://liff.line.me/{LIFF_ID}
- ngrokの無料プランではURLが起動ごとに変わるため、毎回LINE DevelopersでエンドポイントURLの更新が必要です
- ngrok有料プランでは固定ドメインが利用可能です
- ngrok経由のアクセスでは初回に「Visit Site」ボタンが表示される場合があります
# RSpecテストを実行
docker compose exec -e RAILS_ENV=test web bundle exec rspec- Web Service を作成
- Docker runtime を選択
- 環境変数を設定
- Neonでデータベースを作成し、
DATABASE_URLを設定
- Build Command: (Dockerfileで自動)
- Start Command:
./bin/rails server
これはデモ用の注文です。実際の提供/決済はありません。
- 本アプリケーションはデモ・学習目的です
- 実際の決済処理は含まれていません
- 個人情報（住所・電話番号等）は収集しません
- 注文データは永続化されますが、本番運用を想定していません
MIT