本システム 操作マニュアル
目次
導入

導入の準備（オプション機能）

このページの内容

  1. まず、どれを準備するか決める
  2. 準備の控え（いっしょに、控えシートに書いておく）
  3. A. 運営者への通知（Chatwork）
  4. B. 専用リンク（短い登録リンク）
  5. C. Google カレンダー連携（任意。自己責任で運用できる方のみ）
  6. 準備のチェック

本編「準備編」（LINE と Cloudflare の準備）のあとで、使いたい機能だけ、先にここで準備しておきます。 設定の途中で、「これを登録してください」と手を止めずに済みます。使わない機能は、準備しなくて構いません。

まず、どれを準備するか決める#

機能 準備 必要？ 準備にかかる時間の目安
運営者への通知（Chatwork） Chatwork の通知用アカウントと API トークン、ルームID おすすめ（申込やメッセージに、すぐ気づけます） 20分
専用リンク（短い登録リンク） ドメインと、Cloudflare Pages、DNS の CNAME 任意（Instagram などに、短くきれいなリンクを貼りたい人） 30分〜（反映待ちを含む）
Google カレンダー連携 Google Cloud の設定（OAuth クライアント） 任意（自分で設定・運用できる人だけ） 40分

迷ったら、Chatwork だけ準備して、あとは必要になってから足すのが、おすすめです。

準備の控え（いっしょに、控えシートに書いておく）#

項目 例 取り扱い
Chatwork の API トークン （長い文字列） 秘密。 ほかの人に見せない・メモやチャットに貼らない
Chatwork のルームID 123456789 数字だけ
Google のクライアント ID （…apps.googleusercontent.com） 秘密ではないが、控えておく
Google のクライアント シークレット （長い文字列） 秘密
専用リンクのドメイン go.example.com

A. 運営者への通知（Chatwork）#

友だちからのメッセージや、フォームの申込を、Chatwork でお知らせします。

A-1　通知用の Chatwork アカウントを作る#

A-2　API トークンを発行する#

  1. 通知用アカウントで、Chatwork にログインする。
  2. 「サービス連携」→「API トークン」で、トークンを発行する。
  3. トークンは、他人に見せたり、メモやチャットに貼ったりしないでください。

A-3　システムの秘密情報として設定する（ターミナルで1回）#

harness-v2/apps/worker で、次を実行します。トークンの入力を求められたら、貼り付けます。

npx wrangler secret put CHATWORK_API_TOKEN

A-4　通知を受けるルームに、通知用アカウントを追加する#

通知を受けたい Chatwork のルームを開き、通知用アカウントをメンバーに追加します（受け入れの承認が必要な場合があります）。

A-5　管理画面で設定する#

「設定」→「受信通知」で、「Chatwork に通知する」にチェック → ルームID（ルームのアドレスの #!rid のあとの数字）を入力 → 「テスト送信」→ 届いたら、「設定」で保存。

つまずいたとき#

画面の表示 対処
「API トークンが、まだ設定されていません」 A-3 が未実施です。
「API トークンが正しくありません」 貼り間違いです。もう一度、発行して設定してください。
「そのルームに送れません」 通知用アカウントが、ルームのメンバーにいません（A-4）。

B. 専用リンク（短い登録リンク）#

https://go.example.com/ig のような短いリンクを使えるようにします。Instagram・X・Facebook など、場所ごとに、いくつでも作れます。

B-1　用意するもの#

B-2　転送専用の Pages を用意する#

システムといっしょに配られる「転送専用の小さな Pages」を、自分の Cloudflare に反映します（導入時に、担当者が行います）。中身は、「/合言葉 を、システムの /r/合言葉 に転送する」だけです。

B-3　Cloudflare でドメインを登録する（先に）#

Cloudflare →「Workers & Pages」→ 転送用のプロジェクト →「Custom domains」→「Set up a domain」で、go.example.com を入力します。

必ず、この登録を先に行ってください。 先に DNS の CNAME を作ると、522 エラーになります。

B-4　DNS に CNAME を追加する#

ホスト名 種別 内容
go.example.com CNAME （Cloudflare の画面に出た、〜.pages.dev）

Cloudflare の画面で、状態が「Active」になれば完了です。

B-5　管理画面で設定する#

「データ管理」→「登録経路」→「専用リンクのドメイン」に、https://go.example.com を入れて保存します。以降、「コピー」で、短いリンクがコピーされます。

B-6　実機で確認する#

スマホと、Instagram・X のアプリ内ブラウザで、リンクを押し、LINE の友だち追加の画面まで進むか確認します。

C. Google カレンダー連携（任意。自己責任で運用できる方のみ）#

個別相談フォームで、Google カレンダーに予定が入っている時間を、申込画面に出さないようにします。見るだけの連携で、予定の作成・変更・削除は、できません。

この連携は、必須ではありません。ご自身で設定・運用できる方だけが、自己責任でお使いください。 連携しなくても、個別相談フォームは、これまでどおり使えます。

  • 「確認前のアプリ」として運用します（Google の審査は受けません）。ログイン時に、警告画面が出ます。
  • 連携が切れることがあります（許可の取り消し、パスワード変更、長期間の未使用など）。切れると、Chatwork に通知が届きます（A で設定している場合）。
  • 連携が切れている間は、予定のある時間にも枠が出たり、枠がすべて隠れたりします。二重予約を確実に避けたい場合は、フォームで「Google に接続できないとき」に「枠をすべて隠す」を選んでください。
  • 二重予約などの不都合は、利用者ご自身の責任となります。
  • 料金：Google Cloud の登録と、Google Calendar API の通常の利用は、無料です（請求先の登録は、不要です。「無料トライアル」や「請求先アカウントの追加」の案内が出ても、押さないでください）。

C-1　Google Cloud のプロジェクトを作る#

  1. https://console.cloud.google.com/ に、連携したい Google アカウントでログインする。
  2. プロジェクトを新しく作る（名前は、「LINE予約連携」など）。

C-2　Google Calendar API をオンにする#

「APIとサービス」→「ライブラリ」→「Google Calendar API」→「有効にする」。

C-3　Google Auth Platform（同意画面）を設定する#

左メニューの「Google Auth Platform」を開きます（「APIとサービス」→「OAuth 同意画面」からも入れます）。

  1. 初めてなら「始める」→ アプリ名・サポートメール・対象（外部）・連絡先メールを入力して作成する。
  2. 左メニューの「ブランディング」で、次の4つを入力して保存する（公開に必要です）。
    • アプリ名、ユーザーサポートメール
    • アプリのホームページ URL（自分が持っているサイトの URL。何でも構いません）
    • プライバシーポリシーの URL（プライバシーポリシーを載せたページの URL）
    • 承認済みドメイン（上の URL のドメイン部分）
  3. 左メニューの「データアクセス」→「スコープを追加または削除」。一覧にない場合は、「スコープを手動で追加」に、次の2行を貼り付けて、更新する。
    https://www.googleapis.com/auth/calendar.freebusy
https://www.googleapis.com/auth/calendar.calendarlist.readonly
    （どちらも、「見る」だけの権限です。この2つだけにしてください。）
  4. 左メニューの「対象」→「アプリを公開」で、「本番環境」にする。「テスト中」のままだと、7日ごとに連携が切れます。

プライバシーポリシーのページがない場合は、ブログや note に、数行のページを作れば足ります（例：「この連携は、空き時間の確認だけに使い、予定の内容は取得・保存しません」）。

C-4　OAuth クライアントを作る#

  1. 「Google Auth Platform」→「クライアント」→「クライアントを作成」。
  2. アプリケーションの種類：ウェブ アプリケーション。
  3. 「承認済みのリダイレクト URI」に、次を追加する（〜.workers.dev の部分は、自分のシステムの URL に置き換える）。
    https://（自分のシステムのURL）/api/booking/google-calendar/oauth/callback
  4. 作成すると、クライアント ID とシークレットが表示される。控える（シークレットは、秘密）。

C-5　システムの秘密情報として設定する（ターミナルで2回）#

harness-v2/apps/worker で、次を実行します。聞かれたら、それぞれ貼り付けます。

npx wrangler secret put GOOGLE_OAUTH_CLIENT_ID

npx wrangler secret put GOOGLE_OAUTH_CLIENT_SECRET

C-6　管理画面で連携する#

  1. 「設定」→「Google カレンダー連携」→「Google でログイン」。権限を許可する（警告が出たら、「詳細」→「（アプリ名）に移動」）。
  2. 個別相談フォームの「予約枠自動化設定」タブで、「Google カレンダーの予定がある時間は、枠に出さない」をオンにして、参照するカレンダーを選ぶ。

注意（運用するとき）#

つまずいたとき#

症状 原因と対処
「アプリを公開」が押せない 「ブランディング」の入力（ホームページ URL・プライバシーポリシー URL など）が、足りません。
ログインで redirect_uri_mismatch リダイレクト URI が、一字でも違います。
7日ほどで連携が切れる 「対象」の公開ステータスが、「テスト中」のままです。
管理画面に「Google の準備ができていません」 C-5 が未実施です。

準備のチェック#

← 導入の準備（LINE と Cloudflare）導入のしかた →