Web開発者向けのStudioセットアップ

Studioのダウンロードを入手する

Studioを利用できるアカウントでMaxisnapにサインインしてから、次の操作を行います：

• Windowsの場合：Maxisnapで「設定 → アカウント → Maxisnap Studio セットアップウィザード」を開き、「はじめましょう」、続いて「ダッシュボードをダウンロード」をクリックします。MaxisnapがStudioのZIPファイルを「ダウンロード」フォルダーに保存し、そのフォルダーを開きます。
• Macの場合：Maxisnapで「Settings → Welcome & Help → Studio Setup Guide」を開き、「Get Started」、続いて「Download Dashboard」をクリックします。MaxisnapがStudioのZIPファイルを「ダウンロード」フォルダーに保存します。

ZIPファイルを展開します。Windowsでは、右クリックして「すべて展開」を選びます。Macでは、ダブルクリックします。

Maxisnap-Studio-v<version>/
  Maxisnap Studio - Start Here.html   guided setup (branding + every route)
  snaps/                              PHP edition: upload this folder to a web host
  cloudflare/                         Cloudflare Workers edition (Worker + R2 + D1)
    deploy/cli.mjs                    deploys it through the Cloudflare API (Node 20+)
  docs/Developer guide.html           architecture, upload API, security, updates
  docs/Cloudflare setup - technical brief.html
  AGENTS.md                           instructions for AI coding assistants

完全版の「Developer guide」では、アーキテクチャ、アップロードAPI、キーとロール、セキュリティモデル、トラブルシューティングを扱っています。ダウンロード内のdocs/Developer guide.htmlです。

PHPエディション：アップロードしてセットアップを完了する

1. snapsフォルダーを、隠しファイルの.htaccessも含めてWebルートにアップロードし、結果がpublic_html/snaps/index.phpになるようにします。Start Hereページで作成したブランド入りのsnaps.zipも同じ方法で使えます。その場で展開し、snaps/snapsのように入れ子にしないでください。
2. https://yourcompany.com/snaps/ を一度開きます。セットアップページがPHPとフォルダーの権限をチェックし、40文字の管理者キーを提案します。キーは16文字以上である必要があります。キーをコピーして、「Create my dashboard」をクリックします。
3. nginxでは、snaps/.htaccessにあるルーティングと拒否のルールを再現してください。uploads、data、brandingは非公開にしておきます。

セットアップページがyour-settings.phpを書き出します。このファイルは、更新しても保持されます：

'dashboard_key' => '…',          // the Admin key; the setup page writes it
'base_url'      => 'https://yourcompany.com/snaps',  // the address setup was opened at; fix it here if share links come out wrong
'max_upload_mb' => 500,          // your host's PHP limits still apply

Cloudflareエディション：ターミナルからデプロイする

同梱のCLIは、最初にアカウントを読み取り、作成するものと手を付けないものの実行計画を表示し、すでに使われている名前は受け付けません。デプロイが途中で止まった場合は、同じコマンドをもう一度実行すれば、何も二重に作成することなく続きから再開されます。

cd cloudflare
# Option 1: the bundled CLI (Node 20+; plan first, then --yes). PowerShell:
$env:CLOUDFLARE_API_TOKEN = "<token: Account Settings Read; Workers Scripts, R2 and D1 Edit;
                              for --zone/--hostname also Zone Read, DNS Read, Workers Routes Read>"
node deploy/cli.mjs whoami
node deploy/cli.mjs plan --account <account id> --name snaps
#   no workers.dev name on the account yet? The plan asks you to "Choose your free
#   workers.dev name": add --subdomain <your-company> to both commands (account-wide).
#   A subdomain of your domain as well: add --zone <zone id> --hostname snaps.example.com
node deploy/cli.mjs deploy --account <account id> --name snaps --yes
#   prints the Studio address and the Admin key once, and writes deployment.json here

# Option 2: plain Wrangler (create the bucket and database, set their ids in wrangler.jsonc)
npm install
npx wrangler r2 bucket create maxisnap-studio-media
npx wrangler d1 create maxisnap-studio
npx wrangler secret put ADMIN_KEY
npm run sync
npx wrangler deploy

デプロイでは、Studioのアドレスと管理者キーが一度だけ表示され、実行したフォルダーにdeployment.jsonが書き出されます。このファイルは保管しておいてください。updateとremoveで使われます。

動作を確認する

curl.exe -s -H "X-Dashboard-Key: <Admin key>" https://<studio address>/api/health.php
# {"ok":true,"app":"Maxisnap Studio","version":"…"}   the Cloudflare edition adds "edition":"cloudflare"

そのあと、ブラウザーでStudioのアドレスを開き、管理者キーでサインインします。401はキーが間違っていること、404はアドレスまたはフォルダーが間違っていることを意味します。

Maxisnapを接続する

• Windows版Maxisnap：「設定 → アカウント → Maxisnap Studio セットアップウィザード」を開き、「はじめましょう」をクリックします。ステップ4の「Maxisnap を接続」まで、「次へ」をクリックして進みます。Studioのアドレスとキーを貼り付け、「接続をテスト」、「次へ」の順にクリックして、最後のページで「完了して保存」をクリックします。セットアップで表示された管理者キーを使えます。ダッシュボードの「People & access」にあるアップロードコードも使えます。
• Mac版Maxisnap：「Settings → Welcome & Help → Studio Setup Guide」を開き、「I already have a dashboard」を選びます。Studioのアドレスとキーを貼り付け、「Test Connection」、「Next」、「Finish & Save」の順にクリックします。

アップロードAPIを知る

• Maxisnapのアプリは、X-Dashboard-Keyヘッダーを付けてapi/upload.phpにアップロードします。画像（PNG、JPG、GIF、WebP）と動画（MP4、WebM、MOV）を受け付けます。
• Windows版MaxisnapとMac版Maxisnapは、CloudflareのStudioに各アップロードを1回のリクエストで送信します。受け付けるのは、ファイルあたり25 MBまでです。
• Cloudflareエディションには、大きなファイル向けの分割アップロードAPIもあります。「Developer guide」で説明されています：api/upload/start、part、complete。
• 共有ページとそのメディアファイルには、次のパスが使われます。それ以外のパスはすべて内部用です：/<slug> /<slug>.<ext>

あとから更新または削除する

PHP：snaps/How to update.txtに記載されたファイルだけを置き換え、そのあとホストとCDNのキャッシュを消去します。キャプチャ、メンバー、ブランド設定、各種設定はそのまま残ります。

Cloudflare：新しいパッケージのcloudflareフォルダーに古いdeployment.jsonをコピーしてから、そのフォルダーで次のコマンドを実行します。

# Update: from a newer package's cloudflare folder, with the old deployment.json copied in
node deploy/cli.mjs update --record deployment.json --yes
# New Admin key (shown once):
node deploy/cli.mjs update --record deployment.json --yes --new-admin-key
# Remove the custom domain and the Worker; the bucket and database (the captures) stay
node deploy/cli.mjs remove --record deployment.json --yes
# Also delete every capture: cannot be undone
node deploy/cli.mjs remove --record deployment.json --yes --delete-data

Cloudflare技術資料を読む：すべてのリソース、権限、API呼び出し。