telegram-mini-app
TON 統合による Telegram Mini Apps の構築
8 億人以上のユーザーに向けて Telegram 内で動作するネイティブ感覚の Web アプリケーションを作成。Telegram エコシステムから離れることなく、TON ブロックチェーン、決済、バイラルメカニクスを統合できます。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「telegram-mini-app」を使用しています。 ユーザー挨拶付きの基本 Telegram Mini App をセットアップ
期待される結果:
Telegram SDK を読み込み、initDataUnsafe.user を使用してユーザーのファーストネームを表示し、Telegram テーマカラーで設定されたメインボタンを備えた HTML ページ
「telegram-mini-app」を使用しています。 既存 Mini App に TON ウォレット接続を追加
期待される結果:
アプリをラップする TonConnectUIProvider、ヘッダーの TonConnectButton コンポーネント、アプリメタデータを含む manifest.json、接続後にアクセス可能なウォレットアドレス
セキュリティ監査
安全Static analyzer flagged 41 patterns that are all false positives. The skill file (SKILL.md) is documentation-only markdown containing code examples. Backticks are markdown code fences, not shell execution. URLs are official Telegram SDK links or documentation placeholders. No executable code or security risks present.
品質スコア
作れるもの
Web3 ゲーミング Mini App
TON ウォレット統合、NFT 報酬、Telegram シェアで広がるバイラル referral メカニクスを備えた play-to-earn ゲームを構築。
E コマースストアフロント
Telegram Stars 決済、注文追跡、Telegram インターフェース内でのシームレスなチェックアウトを備えたショッピング可能 Mini App を作成。
コミュニティエンゲージメントツール
チャンネルエンゲージメントを向上させるためのデイリー報酬、ストリーク、リーダーボード、実績バッジを備えたゲーミフィケータッドロイヤルティアプリを開発。
これらのプロンプトを試す
適切な viewport 設定、Telegram Web App SDK 初期化、initDataUnsafe からのユーザーデータ抽出を備えた Telegram Mini App HTML テンプレートを作成。
ユーザーデータ、クエリ ID、expand、close、ready などのコアメソッドを適切な TypeScript 型で公開する Telegram Web App 統合用 React フックを構築。
UI プロバイダーラッパー、接続ボタンコンポーネント、マニフェストファイル設定を含む React Mini App 向け TON Connect ウォレット統合を実装。
tonConnectUI を使用して TON 取引を送信し、nanoton 変換を処理し、トランザクション有効期間ウィンドウを設定する決済ボタンコンポーネントを作成。
ベストプラクティス
- ユーザーIDを信頼する前に、バックエンドでTelegramのHMAC検証を使用してinitDataを必ず検証する
- シームレスなネイティブ感覚のため、themeParams CSS 変数を使用して Telegram テーマに合わせる
- タッチターゲットを最小 44px でモバイルファースト設計し、実際のデバイスでテストする
回避
- Telegram テーマパラメーターを無視して、ぎこちない視覚的遷移を引き起こす
- Telegram 使用の 95% がモバイルであるにもかかわらずデスクトップ向けに設計する
- ローディング状態をスキップして、ユーザーにアプリが壊れていると思わせる