メインコンテンツへスキップ

はじめに

  • このガイドは、top.gg で承認済みの Bot があり、プロジェクトに Node.js または Python を使用していることを前提としています。
  • 次に、Square Cloud のアカウントを作成する必要があります。これは サインアップページ から行えます。メールアドレスを使ってアカウントを作成できます。
  • 最後に、アカウントに有効な有料プランが必要です。プランの一覧を確認し、ニーズに合ったものを こちら から購入できます。

環境のセットアップ

  1. はじめる前に、システムに Node.js と npm がインストールされていることを確認してください。まだお持ちでない場合は、Node.js 公式サイト からダウンロードできます。
  2. 次のコマンドで新しい Node.js プロジェクトを開始します。
Terminal
npm init -y
このコマンドは、現在のディレクトリに package.json ファイルを作成します。
  1. 必要なライブラリをインストールします。
Terminal
npm install @top-gg/sdk express

プロジェクトのセットアップ

1. Webhook 認証情報を取得する:
  • こちら から Top.gg のプロフィールにアクセスします。
  • 投票の通知を受け取りたい Bot の「edit」をクリックします。
  • 「GENERAL」の下で「webhook」オプションを選択します。
  • 「Authorization」に webhook 認証情報を設定します。この例では「myappsquare」を使用しました。
2. Webhook リスナーを実装する: 以下のセクションでは、Javascript と Python の両方のコード例を示します。
top.gg のドキュメントで提供されている例(こちら)を、いくつか変更して使用します。
index.js
// Import libraries
const Topgg = require("@top-gg/sdk");
const express = require("express");

// Create Express app and Top.gg webhook instances
const app = express();
const webhook = new Topgg.Webhook("YOUR_AUTHORIZATION_TOKEN");

// Define route for '/topgg' endpoint (POST requests)
app.post("/topgg", webhook.listener((vote) => {
  // Log vote received message with user ID
  console.log(`Vote received successfully! User ID: ${vote.user}`);
}));

// Start server on port 80 (default HTTP)
app.listen(80);

squarecloud 設定ファイルの作成

詳しく学ぶ: Square Cloud の設定ファイルの作り方。

squarecloud.app ファイルは、アプリケーションを設定するために使用される設定ファイルです。名前、説明、バージョン、メインファイルなどを定義するために使用されます。

Square Cloud へのアプリケーションのアップロード

すべての手順を終えたら、設定ファイルを含むアプリケーションのファイルを .zip ファイルにまとめます。 アプリケーションが Node.js プロジェクトの場合は、Node.js に関する記事をご覧ください。 アプリケーションが Python プロジェクトの場合は、Python に関する記事をご覧ください。
Square Cloud Dashboard にアクセスして、プロジェクトの ファイルをアップロードします。
Square Cloud へのアプリケーションのアップロード

テストの開始

すべて正しく行えていれば、設定ファイルで定義したサブドメインを使ってサイトにアクセスしてみてください。「mysite」と定義した場合、アクセスするには mysite.squareweb.app になります。アクセスして「Cannot GET /」または「Method Not Allowed」だけが表示されれば、問題ありません。 次に、認証情報を定義した前のページに戻る必要があります。Webhook URL のフィールドに、投票を受け取るルートを含むサイトの URL を入力してください。
  • app.post("/topgg", webhook.listener((vote) => {...}) で作成した JavaScript コードの場合、投票を受け取るルートは「/topgg」です。したがって、Web サイトが「mysite.squareweb.app」であれば、Webhook URL として「mysite.squareweb.app/topgg」を入力してください。
  • @app.route("/topgg", methods=["POST"]) で作成した Python コードの場合も、投票を受け取るルートは「/topgg」です。したがって、Webhook URL も同じく「mysite.squareweb.app/topgg」になります。
Top.gg webhook URL 設定の例
最後に、「Send Test」ボタンをクリックします。その後、ターミナルを確認してください。すべてうまくいけば、console.log または print で定義したメッセージがターミナルに表示されるはずです。
Top.gg webhook 送信テストの例
これで、すべて正しく設定されていれば、Bot が top.gg で投票を受け取ったときに通知を送信する webhook の準備が整います。

トラブルシューティング

カスタムドメイン

デフォルトの URL mysite.squareweb.app の代わりにカスタムドメイン(例: mysite.com)を使用するには、Standard プラン以上が必要です。サブドメインは設定ファイルの SUBDOMAIN フィールドで定義します。

最小 RAM 要件

シンプルなウェブサイト/API の場合は最小 512MB RAMです。フレームワーク(Next.JS、React、Vue、Angular など)を使用するサイトでは、常に最低 1GB RAMを推奨します。より大規模なアプリケーションでは、メモリ不足でアプリケーションがクラッシュするのを防ぐため、より多くの RAM を割り当ててください。

このサイトが見つかりませんでした。

サブドメイン/ドメインSUBDOMAIN フィールドまたはカスタムドメイン設定で構成されている内容と一致しているか確認してください。サイトをアップロードしたばかりの場合は、Square が初回アクセスを有効化するまで最大 60 秒お待ちください。

サイトの応答に時間がかかりすぎました…

アプリケーションでポート 80ホスト 0.0.0.0 を正しく設定しているか確認してください。Square の強制環境変数である .env ファイルの PORTHOST を使用することを推奨します。

お問い合わせ

技術的な問題が解決しない場合は、専門のサポートチームがお手伝いします。お問い合わせいただければ、どのような問題でも喜んで解決をサポートいたします。