TIPTO クリエイター向け
使い方トップへ戻る

大まかな流れ

TIPTOでは、投げ銭ウィジェットを誰でも利用できるようにCloudflareを活用します。
そのため投げ銭ウィジェットの設置には、Cloudflareのアカウントが必要です。

Cloudflareとは？
WebサイトやWebサービス向けの機能を提供しているサービスです。
TIPTOでは、設定ファイルや画像・動画を保存する「R2」と、 TIPTO用のプログラムを動かす「Workers」を利用します。
TIPTOで通常利用する範囲であれば、Cloudflareの無料枠から利用できます。
  1. 初回だけ、CloudflareにTIPTO用のR2とWorkerを用意
  2. ジェネレーターで好きなようにTIPTOをカスタマイズして設定内容を出力
  3. ジェネレーターで出力したZIPの中身をR2へアップロードする
  4. 同じくジェネレーターで出力した埋め込みコードをブログやWebサイトへ貼り付ける
R2：TIPTOの設定ファイルや画像・動画を保存するストレージサーバー
バケット：R2の中に作るフォルダのようなもの
Worker：Cloudflareのサーバー上でTIPTO用のプログラムを動かすもの
① Cloudflareの準備
STEP 1R2バケットを作成する

まずCloudflareで、TIPTO専用のストレージとしてR2を準備し、その中に「バケット」を1つ作ります。

  1. Cloudflareアカウントがない場合は 作成し、 ログインします。
  2. R2を開きます。
    1-2_R2を開きます。
  3. TIPTO用のR2バケットを1つ作成します。好きなバケット名を決めて入力してください。 入力したバケット名は、後の設定で必要になるため、必ずメモなどに控えてください。
    1-3_TIPTO用のR2バケットを1つ作成します。(1)
    1-3_TIPTO用のR2バケットを1つ作成します。(2)
  4. バケット作成後の画面に表示される自分のCloudflareアカウントIDも控えてください。
    1-5_自分のCloudflareアカウントID（アカウントを識別する番号）を確認し、控えます。.png
STEP 2TIPTO用Workerを作成する

投げ銭処理に必要なプログラムをCloudflareのWorkerに設置します。 以下をデスクトップなどにダウンロードして、手順に沿って設置してください。

tipto-creator-worker.js をダウンロード
  1. Cloudflareで新しいWorkerを作成します。　※「アプリケーションを作成する」を押したあとは、「Hello Worldを開始する」を選んでください。
    2-1_Cloudflareで新しいWorkerを作成します。（1）
    2-1_Cloudflareで新しいWorkerを作成します。（2）
  2. Worker名を jpyc-tip-sign にしてデプロイします。
    2-2_Worker名を jpyc-tip-sign にします。.png
  3. コードエディターを開きます。
    2-3_コードエディターを開きます。.png
  4. ダウンロードした tipto-creator-worker.js をメモ帳などで開き、 コード全体をコピーします。 Cloudflareのコードエディターに最初から入っているコードをすべて削除し、 コピーしたコードを貼り付けます。 貼り付けたら、右上の「デプロイ」を押します。
    2-4.ダウンロードした tipto-creator-worker.js を開き、コード全体をコードエディターの worker.js へ貼り付けます。貼り付けたら、右上の「デプロイ」を押します。
STEP 3WorkerとR2を接続する

作成したWorkerと、先ほどのR2ストレージを接続（バインディング）します。

  1. jpyc-tip-sign の「設定」を開きます。
    3-1_jpyc-tip-sign の設定を開きます。（1）
    3-1_jpyc-tip-sign の設定を開きます。（2）
  2. 「バインディング」の「バインディングを追加」に入り、一覧から「R2 バケット」を選んで、右下の「バインディングを追加」を押します。
    3-2_「バインディング」の「バインディングを追加」に入り、一覧から「R2 バケット」を選んで、右下の「バインディングを追加」を押します。（1）
    3-2_「バインディング」の「バインディングを追加」に入り、一覧から「R2 バケット」を選んで、右下の「バインディングを追加」を押します。（2）
  3. 変数名に CREATOR_R2 と入力して、「R2 バケット」から、先ほど作成したTIPTO用のバケットを選びます。右下の「デプロイ」を押します。
    3-3_変数名に CREATOR_R2 と入力して、「R2 バケット」から、先ほど作成したTIPTO用のバケットを選びます。
CREATOR_R2 という名前は変更しないでください。変更するとTIPTOが正常に動かなくなります。
STEP 4R2の接続情報をWorkerへ登録する

TIPTOではR2バケットを一般公開せず、必要な画像や動画だけを一時的なURLで表示します。 そのため、R2へ接続するためのAPIトークンと接続情報をWorkerへ登録します。

R2のAPIトークンを作成する

  1. Cloudflareの「R2 オブジェクトストレージ」を開きます。
    CloudflareのR2オブジェクトストレージを開く画面
  2. 「APIトークンを管理」に入り、「Account API トークンを作成する」を押します。
    R2のAPIトークン管理を開く画面
    Account APIトークンを作成する画面
  3. トークン名を入力します。名前は自由ですが、 TIPTO R2 Token などTIPTO用だと分かる名前がおすすめです。 入力後、下の設定項目は以下のようにしてください。
    • アクセス許可：「オブジェクト読み取り専用」
    • バケットの指定：「特定のバケットにのみ適用」を選び、TIPTO用のR2バケットを指定
    • TTL：「無期限」のまま
    • クライアントIPアドレスフィルタリング：設定しない
    R2 APIトークンの名前とアクセス許可を設定する画面
  4. 設定内容を確認してAPIトークンを作成します。
    R2 APIトークンを作成する画面
  5. 表示された アクセスキーID と シークレットアクセスキー を確認します。 この2つは後から必要になるため、必ずコピーして安全な場所へ保存してください。
    アクセスキーIDとシークレットアクセスキーを確認する画面
アクセスキーIDとシークレットアクセスキー は再表示できないため、 画面を閉じる前に保存してください。 シークレットアクセスキーは他人に見せたり、Webサイトへ掲載したりしないでください。
「トークンの値」と「エンドポイント」はTIPTOの設定では使用しません。

Workerへ4つの接続情報を登録する

「Workers & Pages」の jpyc-tip-sign を開き、 「設定」→「ランタイム変数とシークレット」→「変数を追加する」から、 下の4つのキー名と、これまでの手順で控えた値を登録します。

WorkerへR2の接続情報を登録する（3）
WorkerへR2の接続情報を登録する（4）
WorkerへR2の接続情報を登録する（5）
  • R2_ACCOUNT_ID： STEP 1で控えたCloudflareアカウントID （シークレット：OFF）
  • R2_BUCKET_NAME： STEP 1で作成して控えたR2バケット名 （シークレット：OFF）
  • R2_ACCESS_KEY_ID： このSTEP 4のAPIトークン作成時に控えたアクセスキーID （シークレット：ON）
  • R2_SECRET_ACCESS_KEY： このSTEP 4のAPIトークン作成時に控えたシークレットアクセスキー （シークレット：ON）
R2_ACCESS_KEY_ID と R2_SECRET_ACCESS_KEY は「シークレット」をONにしてください。 R2_ACCOUNT_ID と R2_BUCKET_NAME はOFFのままで構いません。

「環境を選択」は「プロダクション」だけを選択し、 「プレビュー」は選択しません。 4つとも登録したら「変数を4個追加してデプロイ」を押します。

STEP 5Workerの動作を確認する

最後に、作成した jpyc-tip-sign が正常に動いているか確認します。

  1. Workerの「概要」を開き、発行されているWebアドレスを確認します。
  2. そのアドレスの末尾に /version を付けてブラウザで開きます。
例：https://jpyc-tip-sign.example-name.workers.dev/version

"service": "TIPTO Creator Worker" とバージョン番号が表示されれば、 Cloudflare側の準備は完了です。

② TIPTOを設置する

Cloudflare側の準備が終わったら、 TIPTOジェネレーターでウィジェットを作成します。 まず画面の各エリアで何ができるかを確認し、そのあと設置までの流れに沿って進めます。

ジェネレーター画面の見方

ジェネレータートップ画面
① 保存データ読込・リセット
  • 保存データ読込：以前作成したTIPTOを編集するときに使います。ダウンロード済みのZIPを解凍し、widget-config.json と assets が入っているフォルダを選ぶと、設定内容と素材を読み込めます。
  • リセット：現在ジェネレーターに入力されている内容を初期状態へ戻します。
初めてTIPTOを作る場合は、保存データを読み込まず、そのまま②の基本設定から始めてください。
② 基本設定

埋め込みコードの出力に必要な項目です。設置前にすべて設定してください。

  • ウィジェット名：このTIPTOの設定一式を管理するための名前です。設定一式をダウンロードするときのZIPファイル名にも使われます。
  • 最低受付金額：1回の投げ銭で受け付ける最低金額を設定します。
  • 受取人名：投げ銭の確認画面に表示する受取人の名前です。
  • 受取アドレス：JPYCを受け取るウォレットアドレスです。入力したアドレスへ投げ銭が送られるため、間違いがないか必ず確認してください。
  • workers.devサブドメイン：Cloudflareで作成したCreator Workerの .workers.dev より前の部分を入力します。
例：test-creator.workers.dev の場合、入力するのは test-creator だけです。
③ カスタマイズ項目

TIPTOの見た目や、投げ銭の各場面で表示する内容を自由に変更できます。

  • 投げ銭開始ボタン：Webページに表示するTIPTOの開始ボタンの文字や色、角丸などを設定します。
  • キャラ配置：画像や動画を表示する位置や大きさを設定します。
  • ウィジェットデザイン：ウィジェット全体の背景、文字、枠などの見た目を調整します。
  • 投げ銭前：金額選択や送金前確認の場面に表示する画像・動画、メッセージなどを設定します。
  • 送金中：送金処理中に表示する画像・動画、メッセージなどを設定します。
  • 投げ銭完了：送金が完了したあとに表示する画像・動画、メッセージなどを設定します。
  • 金額ボタン：投げ銭時に選択できる金額ボタンの内容や見た目を設定します。
  • 次へ・送金するボタン：次の画面へ進むボタンや送金実行ボタンの見た目を設定します。
  • 戻る・キャンセルボタン：前の画面へ戻るボタンやキャンセル用ボタンの見た目を設定します。
画像や動画を選択すると、⑤の「設定一式DL」で assets フォルダへまとめて保存されます。
④ プレビュー

設定した内容をリアルタイムに確認する場所です。

  • 投げ銭ボタン：Webページ上に表示する開始ボタンを確認します。
  • 投げ銭前：金額選択や送金前確認の画面を確認します。
  • 送金中：送金処理中の表示を確認します。
  • 投げ銭完了：送金完了後の表示を確認します。
  • 背景確認：ウィジェットを実際のWebページ上に重ねたときの見え方を確認します。
  • スマホ表示に切替：スマートフォン向けの表示幅で確認できます。
⑤ 出力

完成した設定を保存し、Webページへ設置するためのコードを作成する場所です。

埋め込み方式

  • 標準の投げ銭ボタンを使う：TIPTOが用意するボタンをそのままWebページへ表示します。
  • 自分で作ったボタンを使う：すでにWebページにあるボタンからTIPTOを開きたい場合に使います。

設定情報とZIP

  • 設定情報出力：現在の設定内容をテキストで表示します。
  • 設定一式DL：ウィジェット名.zip をダウンロードします。ZIPには widget-config.json と、使用している画像・動画などを入れた assets フォルダが含まれます。
  • コピー：表示されている設定情報をクリップボードへコピーします。

埋め込みコード

  • 埋め込みコード出力：ブログやWebサイトに貼り付けるTIPTOのコードを作成します。
  • コピー：出力された埋め込みコードをクリップボードへコピーします。

設定したTIPTOを設置する

TIPTOの設置方法は、標準ボタンを使う方法と、 自分で作ったボタンを使う方法の2種類があります。 利用したい方法を選び、順番に設定してください。

標準ボタンを使う

TIPTOが用意した投げ銭ボタンを、そのままブログやWebサイトに表示する方法です。

  1. 設定一式をダウンロード

    ジェネレーターで設定が完成したら、 ⑤「出力」の「設定一式DL」を押します。 ウィジェット名.zip がダウンロードされます。

  2. ZIPを解凍してR2へアップロード

    ダウンロードしたZIPを解凍します。 中にある widget-config.json と assets フォルダを、 ①「Cloudflareの準備」のSTEP 1で作成した R2バケットの直下（最上位）にアップロードしてください。

  3. 標準ボタンの埋め込みコードを出力

    ジェネレーターの⑤「出力」で 「標準の投げ銭ボタンを使う」を選択し、 「埋め込みコード出力」を押します。

  4. Webページへ貼り付ける

    出力された埋め込みコードをコピーし、 ブログやWebサイトのHTMLを入力できる場所へ貼り付けます。 これでTIPTOの投げ銭ボタンが表示されます。

自作ボタンを使う

自分で用意したボタンを押したときに、 TIPTOのウィジェットを開く方法です。

  1. 設定一式をダウンロード

    ジェネレーターで設定が完成したら、 ⑤「出力」の「設定一式DL」を押します。 ウィジェット名.zip がダウンロードされます。

  2. ZIPを解凍してR2へアップロード

    ZIPを解凍し、 widget-config.json と assets フォルダを、 ①「Cloudflareの準備」のSTEP 1で作成した R2バケットの直下（最上位）にアップロードしてください。

  3. Webページ側のボタンを準備

    TIPTOを開くためのボタンをWebページに用意します。 既存のボタンを使うこともできます。 対象のボタンにはIDまたはクラス名を指定してください。

    例：ボタンのIDが tip-button の場合は #tip-button、 クラス名が tip-button の場合は .tip-button で指定できます。
  4. 自作ボタンの埋め込みコードを出力

    ジェネレーターの⑤「出力」で 「自分で作ったボタンを使う」を選択します。 CSSセレクター欄に、先ほど指定した ボタンのIDまたはクラス名を入力し、 「埋め込みコード出力」を押してください。

  5. Webページへ貼り付ける

    出力された埋め込みコードをコピーし、 ボタンを設置したWebページのHTMLへ貼り付けます。 自作ボタンを押すとTIPTOが開くようになります。

設置後は実際のページを開き、TIPTOのボタンからウィジェットを開いて、 金額・受取人名・画像や動画などが設定どおりに表示されるか確認してください。

③ Cloudflareの料金

TIPTOで使用するCloudflareは無料枠が広いため、 通常の利用ではもちろん、一時的にアクセスが増えた場合でも、 概ね無料プランの範囲で利用できます。

無料枠の目安

Workers

  • ウィジェットの読込：約50,000回/日
  • ウィジェットの表示：約33,000回/日
  • 投げ銭の実行：約20,000回/日

R2

  • 設定ファイル・画像・動画の保存容量：10GBまで
  • 保存したファイルの読込：月10,000,000回まで
  • ファイルの追加・更新：月1,000,000回まで
Workersの回数は、Cloudflareの無料枠をTIPTOでの利用に換算したおおよその目安です。 実際の利用回数はアクセス状況などによって変わります。

無料枠を超えた場合

Workersは無料プランの上限に達すると利用が制限され、 自動的に有料プランへ切り替わることはありません。 R2は無料枠を超えた利用分が課金対象になります。