縦読み漫画をビュワーで公開する方法_Cloudflare R2

こんにちは、hopemi（ポペミ）です。

今回は Cloudflare R2 を使ってscrolltoonのプロジェクトを公開し、ビュワーで再生する方法を紹介します。

GitHub と違い、Cloudflare R2 は大容量ストレージを備えているのが特徴です。

「GitHub の25MB制限では足りない…」という方にピッタリです。

---

目次

• 1. Cloudflare R2とは？
• 2. アカウント登録と準備
• 3. バケットを作成してファイルをアップロード
• 4. 公開リンクを取得してビュワーに貼る
• 5. 覚えておきたいこと

---

1. Cloudflare R2とは？

Cloudflare R2（アールツー）は、オブジェクトストレージと呼ばれるクラウド保管庫です。

• ストレージ大容量（10GBまでは無料枠）→100MBのプロジェクトが約100本まで無料です🎉
• 1ファイル300MBまでアップロード可能（方法によっては5GBまで可能）
• 転送量も無料（外部からのダウンロード）→ScrollToonは外部からのダウンロードに該当するので無料なのはめちゃすごい👍
• クラスA操作（状態を変更する） → 有料（100万リクエストあたり $4.50）
  例：ファイルのアップロード、削除、コピー、リネーム など
• クラスB操作（読み取り系） → 有料（100万リクエストあたり $0.36）
  例：ファイル一覧を取得、オブジェクト情報を確認 など

---

2. アカウント登録と準備

まずは Cloudflare ダッシュボード にアクセスし、無料アカウントを作成します。

• メールアドレスとパスワードで登録
• 無料プランを選択

Googleアカウントがあると登録も簡単です♪

※クレジット情報を入力する必要があります。無料枠を変えると自動で請求されます。

---

3. バケットを作成してファイルをアップロード

R2 では「バケット」というフォルダを作ります。例：scrolltoon-projects

これで公開設定をONにできました。

CORS設定を開いて以下の用に入力しておきましょう。

[
{
"AllowedOrigins": [
"https://scrolltoon.toonplanet.online"
],
"AllowedMethods": [
"GET"
]
}
]

👉ビュワーのドメインだけを許可する CORS を設定しておけば、他サイトからの勝手な読み込みを防ぎつつ安全に配信できます。

---

4. 公開リンクを取得してビュワーに貼る

ScrollToon 専用の ビュワーリンク作成ツール を開きます。

共有リンク欄に先ほどの urlを貼り付け、「リンクを作成」ボタンをクリック！

このリンクを読者にシェアすれば、誰でもビュワーで再生できます。

---

5. 覚えておきたいこと

Q1.GitHubとどちらがいいの？

A1.無料枠を超えると自動課金【超過料金が発生（例：ストレージ $0.015/GB/月）変動する可能性あり】されますが、無料枠：10GB ストレージ / 転送無料とscrolltoonには十分な内容です。

ただ、登録時にクレカ情報を入力するので、まず試したいと言う方はGitHubの方が参入しやすいかもしれません。

また、世界中でキャッシュすることもでき、大量アクセスに対応できます。ただし、これには独自ドメインとの連携が必要です。

GitHub の容量制限や、Dropbox のアクセス制限に悩んでいる方は、Cloudflare R2 を使うとかなり快適に作品を公開できますよ。

---

まとめ

Cloudflare R2 を使えば、大容量プロジェクトも公開が可能になります。
特にファン向けや有料公開を考えている方には最適です。

以下の記事も要チェックです！

【視聴者向け】ビュワーの使い方

【クリエイター向け】ビュワーの使い方いろいろ〜プロジェクト作成から読み込みまで〜

縦読み漫画をビュワーで公開する方法_GitHub編

縦読み漫画をビュワーで公開する方法_独自ドメイン編

---

🎉 毎月８日は Scrolltoon 全機能お試しデー！

画像読み込み・ポインター制御・スクロール＆レイヤーアニメーション・プロジェクト保存まで…
すべての機能を無料で体験できます。

今のうちにブックマークして、８日をお楽しみに！✨

🌍 toonplanet では、縦スクロール漫画をあらゆる角度からサポートしています。 無料素材配布からアプリ開発まで、あなたの創作を支える仕組みを発信中です。