社内ポータル

プロジェクト概要

2 min read

PJ-LINEPortfolio — LINE公式アカウント構築プロジェクト

概要

LINE公式アカウントの構築サービスをアピールするためのポートフォリオサイト開発と、実案件（墨染矯正歯科クリニック）のLINE公式アカウントをMessaging APIで構築。

プロジェクト構成

line-portfolio/
├── index.html         # ポートフォリオサイト
├── main.js            # ポートフォリオ メインJS
├── style.css          # ポートフォリオ CSS
├── data/
│   └── industries.js  # 9業種のPOCデータ
├── scripts/
│   ├── setup_richmenu_v4.js   # リッチメニュー作成（現行デザイン）
│   ├── webhook_server.js      # Webhookサーバー（自動応答+ステップ配信）
│   ├── start_tunnel.js        # ngrokトンネル起動
│   ├── setup_richmenu.js      # v1（初期版）
│   ├── setup_richmenu_v2.js   # v2（白ベース版）
│   └── setup_richmenu_v3.js   # v3（ベクターアイコン版）
├── .env               # API認証情報（CHANNEL_ID, SECRET, TOKEN）
├── line_bot.db        # SQLite友だちDB
├── richmenu_image_v4.png # 現行リッチメニュー画像
└── tools/
    └── ngrok.exe

成果物

1. ポートフォリオサイト（Vite）

  • 9業種のLINE公式アカウントPOCをショーケース
  • ダークモード + グラスモーフィズムデザイン
  • LINEのUIを再現したスマホモックアップ
  • npm run dev → http://localhost:5173/

2. 墨染矯正歯科クリニック LINE公式アカウント

  • アカウントID: @262thlqi
  • リッチメニュー: 6分割（初診予約/矯正メニュー/小児矯正/治療費/アクセス/電話）
  • 自動応答: 5キーワード（予約/料金/アクセス/矯正/子ども）
  • ステップ配信: 7日間5ステップ自動配信
  • Webhook: localtunnel経由 → https://kyoto-ortho-line.loca.lt/webhook

起動方法

# ポートフォリオサイト
cd "c:\ai_work\quartz-site\obsidian valut\line-portfolio"
npm run dev
 
# LINE Bot（Webhookサーバー）
node scripts/webhook_server.js
 
# トンネル（別ターミナル）
lt --port 3000 --subdomain kyoto-ortho-line

参考情報

グラフビュー