スマホで使う・共有する

一般公開しています。下のボタンからそのまま使えます。同じURLをほかの人に送って共有できます。
ZIPのダウンロードやパソコンでの設定は、利用には必要ありません。
公開・編集を引き継ぐ場合の資料
# KANGOO COLOR STUDIO の共有・配布

## おすすめ：一般のWebサイトとして公開

本体はHTML・CSS・JavaScriptと画像だけで動く静的Webアプリです。利用者はChromeなどのブラウザでURLを開くだけで使えます。ChatGPTのAPIキー、利用者のOpenAIアカウント、専用アプリや拡張機能はアプリ本体には不要です。

現在のサイトは一般公開です。スマホでURLを開くだけで使えます。ほかの人に紹介するときも同じURLを送ってください。利用のためにZIPをダウンロードしたり、パソコンで設定したりする必要はありません。

共有URL：https://kangoo-colour-studio.kororu-16ban-kumasan.chatgpt.site

以下のZIP・公開先の説明は、将来ほかのサーバーへ移す場合や、制作担当者へ引き継ぐ場合の資料です。現在の利用には不要です。

| 配布形式 | 利用方法 | このアプリとの相性 |
| --- | --- | --- |
| HTTPSのWebサイト＋任意の独自ドメイン | Chrome・SafariなどでURLを開く | 推奨。スマホ・iPad・PCで同じ版を使えて更新も一箇所 |
| ZIPファイル | 公開担当者がサーバーへ配置、またはローカルサーバーで確認 | 制作・引き継ぎ用。一般利用者に毎回ZIPを展開してもらう運用には不向き |
| PWA（ホーム画面から起動できるWebアプリ） | 対応ブラウザからホーム画面に追加 | オフライン利用やアプリ風起動が必要になった場合の追加候補。今回の版には未実装 |

## 具体的な公開先：Cloudflare Pages

Cloudflare PagesのDirect Uploadは、完成済みの静的ファイルをアップロードしてWebサイトを公開する機能です。このアプリにはビルド作業が不要なので、展開したフォルダーを公開できます。アプリのAPIを新たに契約する必要はありません。公開用アカウントの作成や、独自ドメインを使う場合の取得・DNS設定は別途必要です。

1. このページの「公開・編集用HTML ZIP」をダウンロードして展開します。
2. 展開直後の階層に index.html、style.css、app.js、paint-gpu.js、assets フォルダーがあることを確認します。
3. Cloudflare PagesでDirect Uploadのプロジェクトを作り、そのフォルダーをアップロードします。公開されたPagesのURLをChromeで開いて確認します。
4. 独自ドメインを使う場合は、PagesのCustom domainsで所有するドメインを追加し、案内されたDNS設定を行います。ドメインは公開先が決まってから設定します。

更新時は同じプロジェクトへ最新版をアップロードします。独自ドメインを使えば、配布するURLを変えずに更新できます。公開前にChromeと実際に使うiPadで、色・グレード・用品切り替えと背景写真を確認してください。

## 他の公開先

既存の会社ホームページのサブフォルダーや、GitHub Pages等の静的ホスティングにも配置できます。画像・スクリプトは相対URLで読み込む構成です。会社ホームページへ組み込む場合は、そのサイトのコンテンツセキュリティポリシーがWeb Workerと画像読み込みを許可しているか確認します。Web Workerが使えない場合も代替処理があります。

HTMLだけをダブルクリックするfile://方式は、ブラウザの画像・Worker制約があるため推奨しません。手元で確認する場合はZIPを展開した場所で `python -m http.server 8000` を実行し、Chromeで `http://localhost:8000` を開きます。

## APIとデータの扱い

- 色変更と用品合成はブラウザ内で実行し、画像生成APIを毎回呼び出す構成ではありません。
- 背景に選ぶ写真は端末内で処理し、アプリからサーバーへアップロードしません。
- RGB／HEXの調整は colors.js、用品の構成は options.js を編集します。
- WebGL対応端末ではGPUで2D画像の色を処理します。非対応時はWorker、さらに通常のCanvas処理へ切り替えます。

## 公式資料（2026-09-29確認）

- Cloudflare Pages Direct Upload: https://developers.cloudflare.com/pages/get-started/direct-upload/
- Cloudflare Pages 独自ドメイン: https://developers.cloudflare.com/pages/configuration/custom-domains/
- GitHub Pages（HTML・CSS・JavaScriptの静的ホスティング）: https://docs.github.com/en/pages/getting-started-with-github-pages/what-is-github-pages
- GitHub Pages 独自ドメイン: https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/about-custom-domains-and-github-pages