> ## Documentation Index
> Fetch the complete documentation index at: https://docs.squarecloud.app/llms.txt
> Use this file to discover all available pages before exploring further.
# Square Cloud で Top.gg Webhook を設定する
> Square Cloud で Top.gg webhook を設定するための詳細ガイド。
## はじめに
* このガイドは、[top.gg](https://top.gg/) で承認済みの Bot があり、プロジェクトに Node.js または Python を使用していることを前提としています。
* 次に、Square Cloud のアカウントを作成する必要があります。これは [サインアップページ](https://squarecloud.app/signup) から行えます。メールアドレスを使ってアカウントを作成できます。
* 最後に、アカウントに有効な有料プランが必要です。プランの一覧を確認し、ニーズに合ったものを [こちら](https://squarecloud.app/ja/pricing) から購入できます。
## 環境のセットアップ
1. はじめる前に、システムに Node.js と npm がインストールされていることを確認してください。まだお持ちでない場合は、[Node.js 公式サイト](https://nodejs.org/) からダウンロードできます。
2. 次のコマンドで新しい Node.js プロジェクトを開始します。
```bash Terminal theme={null}
npm init -y
```
このコマンドは、現在のディレクトリに package.json ファイルを作成します。
2. 必要なライブラリをインストールします。
```bash Terminal theme={null}
npm install @top-gg/sdk express
```
1. システムに Python と Pip（Python のパッケージマネージャー）がインストールされていることを確認してください。まだの場合は、[Python 公式サイト](https://www.python.org/) と [Pip 公式サイト](https://pypi.org/) からダウンロードできます。
2. pip を使って `flask` と `waitress` ライブラリをインストールします。
```bash theme={null}
pip install flask
pip install waitress
```
## プロジェクトのセットアップ
**1. Webhook 認証情報を取得する:**
* [こちら](https://top.gg/user/me) から Top.gg のプロフィールにアクセスします。
* 投票の通知を受け取りたい Bot の「edit」をクリックします。
* 「GENERAL」の下で「webhook」オプションを選択します。
* 「Authorization」に webhook 認証情報を設定します。この例では「myappsquare」を使用しました。
**2. Webhook リスナーを実装する:**
以下のセクションでは、Javascript と Python の両方のコード例を示します。
top.gg のドキュメントで提供されている例（[こちら](https://docs.top.gg/docs/Libraries/javascript)）を、いくつか変更して使用します。
```javascript index.js theme={null}
// 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);
```
Python の場合は、次のコードを使用できます。
```python app.py theme={null}
# Import the necessary libraries
import logging
import json
from waitress import serve
from flask import Flask, request, abort
# Create an instance of the Flask app
app = Flask(__name__)
# Define your authorization token
AUTH_TOKEN = 'YOUR_AUTHORIZATION'
# Define a route for the '/topgg' endpoint that accepts POST requests
@app.route("/topgg", methods=["POST"])
def hook():
# Check the authorization header
auth = request.headers.get('Authorization')
if auth != AUTH_TOKEN:
logging.error('Access denied')
abort(401) # Unauthorized
# Convert the request data from bytes to a JSON dictionary
data = json.loads(request.data)
# Print the ID of the user who voted
print(f'Vote received successfully! User ID: {data["user"]}')
# Return a response with the string "Data received" and status 200 to indicate that the request was processed successfully
return "Data received"
# Check if this script is being run directly and not imported as a module
if __name__ == "__main__":
# Set the log message format to exclude the log level
logging.basicConfig(format='%(message)s', level=logging.INFO)
# Serve our Flask app on port 80 and listen on all network interfaces
serve(app, host="0.0.0.0", port=80)
```
## squarecloud 設定ファイルの作成
squarecloud.app ファイルは、アプリケーションを設定するために使用される設定ファイルです。名前、説明、バージョン、メインファイルなどを定義するために使用されます。
## Square Cloud へのアプリケーションのアップロード
すべての手順を終えたら、設定ファイルを含むアプリケーションのファイルを `.zip` ファイルにまとめます。
アプリケーションが Node.js プロジェクトの場合は、[Node.js](/ja/articles/getting-started-with-nodejs) に関する記事をご覧ください。
アプリケーションが Python プロジェクトの場合は、[Python](/ja/articles/getting-started-with-python) に関する記事をご覧ください。
[Square Cloud
Dashboard](https://squarecloud.app/ja/dashboard/new) にアクセスして、プロジェクトの
ファイルをアップロードします。
まず、お使いの環境に CLI がインストールされている必要があります。まだ
お持ちでない場合は、ターミナルで次のコマンドを実行してください。
```
npm install -g @squarecloud/cli
```
すでにお持ちの場合は、更新することをおすすめします。そのためには、ターミナルで次のコマンドを実行してください。
```bash theme={null}
squarecloud update
```
```bash theme={null}
curl -fsSL https://cli.squarecloud.app/install | bash
```
次に、認証を行い他の CLI コマンドを使用するために、[こちら](https://squarecloud.app/ja/account) で
「Request API Key」をクリックして認証キーを取得します。認証キーを取得したら、
次のコマンドを実行してください。
```bash theme={null}
squarecloud auth login
```
最後に、CLI を使ってアプリケーションを Square Cloud にデプロイするには、zip ファイルのパスを渡して次のコマンドを実行する必要があります。
```bash theme={null}
squarecloud upload zip
```
## テストの開始
すべて正しく行えていれば、設定ファイルで定義したサブドメインを使ってサイトにアクセスしてみてください。「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」になります。
最後に、「Send Test」ボタンをクリックします。その後、ターミナルを確認してください。すべてうまくいけば、`console.log` または `print` で定義したメッセージがターミナルに表示されるはずです。
これで、すべて正しく設定されていれば、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` ファイルの **PORT** と **HOST** を使用することを推奨します。
## お問い合わせ
**技術的な問題**が解決しない場合は、**専門のサポートチーム**がお手伝いします。[**お問い合わせ**](https://squarecloud.app/ja/support)いただければ、どのような問題でも喜んで解決をサポートいたします。