Telegram Mini App — ステップバイステップガイド

これは何ですか？#

Telegram Mini Appは、顧客がTelegram内で直接レストランのデジタルメニューを開くことを可能にします。アプリをインストールしたり、ブラウザに移動する必要はありません。メニューはTelegramのネイティブな部分として表示され、ユーザーのテーマに合わせて調整され、「戻る」ボタンやジェスチャーをサポートします。

利点#

• 📱 Telegram内 — 顧客はブラウザに切り替える必要がありません
• 🎨 ネイティブな外観 — 色、フォント、テーマがTelegramに合わせて調整されます
• 🔗 ディープリンク — 特定のレストランのメニューへの直接リンク
• 🌍 自動言語設定 — 言語はユーザーのTelegram設定から取得されます
• 🍪 クッキーなし — クッキーバナーはTelegram内で表示されません

クイックスタート#

ステップ1 — ボットを作成する#

Telegramで@BotFatherを開き、以下を送信します：

/newbot

1. ボット名を入力します（例：Cenaly Menu Bot）
2. ユーザー名を入力します（例：MeniMenuBot）— Botで終わる必要があります
3. 取得したBot Tokenを保存します（形式：123456789:ABCdefGHI...）

Bot Tokenは何のために必要ですか？#

Bot Tokenは、Telegram Bot APIを介してボットをプログラムで管理するための秘密鍵です。Mini Appの基本設定（ステップ2–4）には必要ありません — すべてBotFatherを通じて行われます。しかし、以下の場合には必要になります：

• 顧客にメッセージを送信する — 注文状況の通知、プロモーション、ウェルカムメッセージ
• インラインボタンを追加する — ボットのメッセージに（例：「📋 メニューを開く」ボタン — 下記参照）
• 注文を受け付けるTelegramボットを作成する — ボットは注文を受け取り、処理できます
• Webhookを設定する — ボタンのクリックやユーザーのコマンドなどのイベントをTelegramから受け取る
• CRMやPOSシステムと統合する — ボットを通じて注文を自動処理

ステップ2 — Mini Appを作成する#

BotFatherに以下のコマンドを送信します：

/newapp

1. リストからボットを選択します
2. Title — アプリの名前（例：Cenaly）
3. Description — 説明（例：デジタルレストランメニュー）
4. Photo — 640×640 pxの画像をアップロードします（アプリアイコン）
5. GIF — アニメーション（任意）。スキップするには/emptyを送信
6. Web App URL — クライアントアプリのアドレスを指定します：

https://cenaly.com

7. Short Name — リンク用の短い名前（例：menu）

これで、以下の形式の作業リンクが表示されます：

https://t.me/YourBot/menu

ステップ3 — ボットチャットに「メニュー」ボタンを追加する#

BotFatherに以下を送信します：

/setmenubutton

1. ボットを選択します
2. URLを送信します：

https://cenaly.com

3. ボタンのテキストを入力します（例：Open Menuまたは📋 メニュー）

これで、ボットとのチャットを開くと、画面下部にアプリを開くボタンが表示されます。

ステップ4 — ドメインを許可する#

BotFatherに以下を送信します：

/setdomain

ボットを選択し、ドメインを指定します：

cenaly.com

これにより、Telegram Web Appがあなたのドメインとそのすべてのサブドメイン（例：locationid.cenaly.com）で動作することが許可されます。

Deep Links — 特定のレストランへのリンク#

Telegramは、開く際にアプリに渡されるstartappパラメータをサポートしています。特定のレストランへのリンクにはこれを使用します：

例#

あなたのレストランのLOCATION_IDがlnc2w74zの場合：

https://t.me/YourBot/menu?startapp=lnc2w74z
https://t.me/YourBot/menu?startapp=lnc2w74z__ru
https://t.me/YourBot/menu?startapp=lnc2w74z__en

ボットからのインラインボタン#

ボットが顧客にメッセージを送信する場合、メニューを開くインラインボタンを追加できます：

バリアント1 — Web Appボタン（すぐに開く）#

{
  "inline_keyboard": [[{
    "text": "📋 メニューを開く",
    "web_app": {
      "url": "https://LOCATION_ID.cenaly.com/ru"
    }
  }]]
}

バリアント2 — Deep Linkボタン#

{
  "inline_keyboard": [[{
    "text": "📋 メニューを開く",
    "url": "https://t.me/YourBot/menu?startapp=LOCATION_ID__ru"
  }]]
}

自動的に動作する機能#

Telegram内に接続すると、自動的に以下が有効になります：

レストラン用QRコード#

https://lnc2w74z.cenaly.com形式の既存のQRコードは、通常通りブラウザを通じて動作し続けます。

Telegramとの追加統合のために、テーブルにボットへのリンクを含む2つ目のQRコードを配置できます：

https://t.me/YourBot/menu?startapp=lnc2w74z

動作確認#

1. 携帯電話でリンクhttps://t.me/YourBot/menuを開きます
2. Startを押します（初めてボットを開く場合）
3. チャットの下部パネルで**📋 メニュー**ボタンを押します
4. アプリが開き、メニューが読み込まれることを確認します
5. ディープリンクを開いてみてください：https://t.me/YourBot/menu?startapp=LOCATION_ID

よくある問題#

役立つリンク#

• Telegram Mini Appsドキュメント
• BotFather
• Telegram Bot API — Web Appボタン