文太のInstagram制作室 操作マニュアル

確認日：2026年10月8日。クラウド版の現在のプログラムに合わせたマニュアルです。

普段使う入口：https://bunta-instagram.pages.dev/

パソコンもiPhoneもこのURLを開き、同じ利用者のメールアドレス・パスワードでログインします。Windowsの黒い起動画面やPythonの起動は、クラウド版では必要ありません。

1. 最初に知っておくこと

このアプリは、投稿の準備と結果の記録をする制作ノートです。Instagramへの投稿、投稿結果の取得は手動です。アプリに保存するだけではInstagramに投稿されません。

「予約済み」はこのアプリ内の予定の印です。指定日時にInstagramへ自動投稿する機能はありません。

現在は投稿1件に写真1枚を登録できます。JPEG・PNG・WebP形式、1枚5MB以下です。HEICは対応していないためJPEGなどに変換して選びます。複数写真の投稿や動画をまとめて管理する機能はありません。

写真を選ぶとアプリ用のコピーが作られます。元の写真を携帯やパソコンから消す処理はありません。Instagram投稿用の元写真も手元に保管してください。

2. 写真と文章の登録からInstagram投稿まで

写真を用意 → アプリで投稿を追加 → 写真・文章を入力
→ 保存する → カレンダーで予定確認
→ Instagramで写真を選び、文章を貼り付けて投稿
→ アプリで「投稿済み」に変更 → 保存する

A. 投稿を準備する

1. アプリを開き、必要ならログインします。
2. 「＋ 投稿を追加」を押します。
3. 「投稿名」に、自分が分かりやすい名前を入力します。例：お散歩帰りの文太。この欄は必須です（120文字まで）。
4. 「アイデア・メモ」に、撮りたい場面や投稿のねらいを入力します（任意・5000文字まで）。
5. 「写真」のファイル選択で写真を1枚選び、プレビューで確認します。
6. 「キャプション」に、Instagramに載せる本文とハッシュタグを入力します（任意・10000文字まで）。アプリの文字数上限とInstagram側の上限は別です。投稿前にInstagramでも確認します。
7. 必要なら「投稿日・予定日」を選びます。状態を「予約済み」にする場合は日付が必須です。
8. 「状態」を選びます。準備の途中なら「アイデア」か「準備中」、予定が決まれば「予約済み」です。
9. 未投稿の実績は、初期値の0のままで構いません。
10. 「保存する」を押し、「投稿を保存しました。」と一覧の写真・文章を確認します。保存に失敗した場合は入力を控え、通信を確認します。

日付は1つの欄です。予定日と実際の投稿日を別々に保存する機能はありません。予定が変わったら編集し、投稿後は実際の投稿日に直します。

B. カレンダーを使う

「カレンダー」を押す → 「‹」「›」で月を移動 → 投稿名を押して編集します。「今月」で今の月へ戻ります。日付の数字を押すと、その日を設定した新しい投稿の入力画面になります。

カレンダーには状態を問わず、日付を入れた記録が表示されます。通知や自動投稿は行いません。

C. Instagramへ手動で投稿する

1. アプリの投稿カードの「編集する」を押します。
2. 「キャプション」の文章を選択してコピーします。iPhoneでは文章を長押しして選択範囲を調整し「コピー」を使います。専用のコピー・Instagram送信ボタンはありません。
3. アプリを「キャンセル」で閉じ、Instagramを開きます。
4. Instagram側の新規投稿操作で、端末に保管した同じ写真を選びます。iPhoneで投稿する場合は、その写真をiPhoneの写真ライブラリにも用意しておきます。
5. Instagramの本文欄にキャプションを貼り付け、写真・文章を確認して投稿します。Instagram側のボタン名はバージョンによって変わります。
6. 投稿成功をInstagramで確認してから、このアプリに戻ります。
7. 同じカードの「編集する」 → 「状態」を「投稿済み」 → 日付を実際の投稿日に変更 → 「保存する」を押します。

写真を端末へダウンロードする専用ボタンは現在のアプリにありません。 アプリで写真が共有されても、iPhoneの写真ライブラリへ自動保存はされません。元写真がパソコンだけにある場合は、元写真をiPhoneへコピーしてからInstagramで選びます。バックアップ用JSONはInstagramに写真として選ぶファイルではありません。

3. 投稿後の数値入力と分析

Instagramで実際の投稿結果を見る → アプリでその投稿を編集
→ 再生数・いいね数・保存数を入力 → 保存する
→ 「結果の分析」 → 指標を選んで投稿同士を比較

1. Instagramで、その投稿の結果を確認します。投稿種類・アカウントによって、確認できる指標や表示名は異なります。保存数などが表示されないときは、数値を推測して入力しません。
2. アプリの同じ投稿の「編集する」を押します。
3. 状態を「投稿済み」にし、実際の投稿日を確認します。
4. 「再生数」「いいね数」「保存数」に、確認できた値を0以上の整数で入力します。
5. 「保存する」を押します。
6. 「結果の分析」を押します。
7. 「指標」で「再生数」「いいね数」「保存数」を切り替えます。

グラフは「投稿済み」の記録だけを、投稿日順に並べた棒グラフです。棒の長さは、今の指標で最も大きい値を基準に表示します。下の表には3種類の数値が並びます。予定のままの投稿はグラフに出ません。

後日数値が増えたら、同じ投稿を編集して最新値を入れ、保存します。この保存はその投稿の以前の数値を置き換えます。毎日の増え方を保存する履歴機能、率の計算、AIによる分析はありません。

「未確認」と「本当に0」を区別する欄はなく、未入力も0として表示されます。確認できない指標は0のままにし、「アイデア・メモ」に「保存数は未確認」などと記録します。0を実績と判断する前にメモも確認してください。

投稿の比較は「投稿から同じ日数後に確認する」など、確認時点をそろえると判断しやすくなります。確認日を保存する専用欄もないので、必要ならメモに残します。

4. データの流れ図と保存場所

画面とデータは別の場所から届く

GitHub：アプリのプログラムを保管
   ↓ Cloudflareに設定したブランチの更新時に配信
Cloudflare Pages：画面・プログラム・公開接続情報を配る
   ↓                         ↓
Windowsのブラウザ          iPhoneのSafari
   ↓ ログイン・保存・読込      ↓ 同じアカウントでログイン・保存・読込
             Supabase
       ├ Auth：本人のログインを確認
       ├ Database：投稿名・メモ・文章・日付・状態・実績
       └ Storage：写真ファイル（非公開の保管場所）

ブラウザとは、ChromeやSafariのようにWebページを見るアプリです。クラウドとは、インターネット越しに使う保存・配信サービスです。

Database（データベース）は、記録を整理して保存する場所です。Storage（ストレージ）は写真ファイルの保管場所です。Auth（認証）は、本人のログインを確認する仕組みです。

「保存する」を押したとき

端末で入力・写真選択（まだ未保存）
→ 新しい写真をSupabase Storageへ送る
→ 投稿の文章・状態・日付・実績と写真の場所をDatabaseへ保存
→ 保存結果と写真を読み込み、端末の画面に表示
→ 別端末でページ更新 → 同じSupabaseから読む

写真を変更しなければ、既存の写真の場所を引き続き使います。写真だけ送信できて投稿の保存が失敗する場合もあります。「投稿を保存しました。」まで確認します。未保存の入力はページ更新や画面を閉じる操作で失われる場合があります。

文章・写真はCloudflareやGitHubへ投稿データとして保存されません。ブラウザは公開接続情報をCloudflareの「/api/config」から受け取り、記録や写真は直接Supabaseへ読み書きします。

公開接続キーは接続先を使うための公開情報で、パスワードではありません。保存場所側では、ログインと本人の記録だけに操作を許すRLS（行ごとのアクセス制限）を使っています。ログイン画面はURLを知る人が開けますが、写真の保管場所は非公開として作成されています。

ログイン状態はこのタブのsessionStorage（一時的なブラウザの保存領域）に保存します。ログアウトすると消えます。ブラウザやタブの復元方法によって再ログインが必要な場合があります。ログアウトはSupabaseへも送られるため、他端末のログインが切れた場合も同じアカウントで再ログインします。

5. コピー・共有・更新・上書きの使い分け

「コピー」はもう1つ同じものを作ること。「同期」は変更を反映して内容をそろえること。「上書き」は以前の内容を新しい内容に置き換えることです。

同じ投稿をPCとiPhoneで同時に編集しないでください。 別画面が先に保存した場合、古い記録からの保存・削除は更新日時を比較して拒否します。エラーが出たら入力をメモへコピー → 編集画面を閉じる → ページ更新 → 最新の投稿を開く → 必要な変更だけ入れ直して保存します。強制上書きボタンはありません。

Windows旧版「127.0.0.1:8000」とクラウド版は別々です。今後の入力先はクラウド版にそろえます。旧版やバックアップは消さず保管します。インターネット接続なしでクラウドへ保存する機能はありません。

6. 普段の利用とアプリ更新時だけの操作

普段の利用

アプリURLを開く → 必要ならログイン → 投稿を準備・保存
→ Instagramで手動投稿 → アプリに実績を記録
→ 分析を見る → 定期的にバックアップ

他端末の変更を見るときだけ、その画面を更新します。GitHub、Cloudflare、Supabaseの管理画面やSQL Editorは通常の投稿準備には使いません。WindowsのPython起動やZIPダウンロードも不要です。

アプリ更新時だけ

現在のデータをJSONバックアップ
→ 更新内容を作成・テスト → 差分を確認
→ Cloudflareが配信するブランチへ反映
→ Cloudflareの配信成功を確認
→ PC/iPhoneでページ更新 → データと機能を確認

差分は「どのプログラムがどう変わるか」の一覧です。配信（デプロイ）は、新しいプログラムをURLから使える状態にすることです。

現在案内して設定した配信元はGitHubの「feature/cloud-pages-supabase-v1-20261008」ブランチです。「main」へ保存するだけでは、現在の配信元ブランチにその変更は入りません。

Cloudflare設定はRoot directory＝cloud、Build output directory＝public、Framework preset＝None、Build command＝空欄です。接続設定名は「SUPABASE_URL」「SUPABASE_PUBLISHABLE_KEY」。値は管理画面で保管し、普段は変更しません。

画面・プログラムだけの更新では、Supabaseの記録を入れ替える必要はありません。保存項目などを変更する更新は、別途データベース変更の確認が必要です。初回作成用SQLを毎回実行する手順ではありません。

GitHubの別ブランチもCloudflareの設定次第でプレビュー配信される場合があります。確認用ブランチだから未公開とは限りません。更新時には配信対象を確認します。

7. バックアップの保存方法

JSON（ジェイソン）は、文章・数値・写真をプログラムが読み取れる形にまとめたファイルです。このアプリのバックアップには写真の実データが含まれ、期限付きリンクだけの保存ではありません。

Supabaseの現在の記録＋各投稿が参照する写真
→ 「バックアップを保存」 → 端末にJSONをダウンロード
→ 保存先を確認 → バックアップ用フォルダーへコピー
→ 別の保存先にもコピーして保管

1. 編集中なら先に「保存する」を押します。できれば別端末の編集も止め、保存対象が落ち着いた状態で行います。
2. アプリ下部の「バックアップを保存」を押します。
3. 「○件の記録と写真を書き出しました。」の表示を確認します。エラーが出た場合はバックアップ完了と判断しません。
4. ブラウザのダウンロード一覧かWindowsの「ダウンロード」フォルダーで「bunta-backup-年-月-日.json」を確認します。
5. 「文太バックアップ_2026-10-08」の最初の場所へコピーします。旧版の「data」フォルダー内へ入れる必要はありません。
6. 同じ日のファイルを複数保存したときは、時刻を追加するなどして別名で残します。中身は編集しません。
7. USBメモリーなど別の保存先にもコピーします。写真・文章を含むため、自分だけが使える場所に保管します。

普段は大事な投稿を追加・変更した後、アプリ更新前や削除前に保存すると安心です。自動・定期バックアップを実行する機能は今のプログラムにありません。

現在は旧版SQLite、旧版から書き出した「bunta-local-backup.json」、クラウドから書き出したJSONを保管しています。旧版のファイルは当時の内容です。その後のクラウドの変更は旧版へ戻りません。

このバックアップに含まれないもの：ログイン利用者・パスワード、管理画面の設定、プログラム本体、投稿が今は参照していない古い写真ファイル、内部の更新履歴です。JSONだけで新しいSupabaseプロジェクトの初期設定までは復元できません。

8. 復元・取り込みの具体的な方法と限界

今の機能は「足りない記録を追加する取り込み」

バックアップを取り込んでも、現在の一覧をバックアップ時点に丸ごと戻すことはできません。既存の記録を更新・削除しない作りです。

まず現在の内容をバックアップ → 取り込むファイルを選ぶ
→ ファイルを検査 → 内部の識別情報で既存記録を確認
→ 既存と同じ識別情報：省略
→ 未登録の識別情報：写真と投稿を新しく追加
→ 結果の件数・写真・文章を確認

取り込み手順

1. 既存の記録がある場合は先に「バックアップを保存」し、取り込み前の内容を残します。
2. アプリ下部の「バックアップを取り込む」を押します。
3. 「ファイルを選択」で、このアプリのバックアップJSONを選びます。100MB以下・投稿5000件以下に対応します。SQLiteを直接選ぶことはできません。
4. 「取り込む」を押し、終わるまで画面を閉じません。
5. 「完了：○件保存、○件省略。合計○件。」を確認します。「合計」は選んだバックアップ内の件数で、現在の一覧全体の件数ではありません。
6. 「閉じる」を押し、追加された投稿の写真・文章・日付・状態・実績を確認します。
7. 別端末のページを更新して、同じ内容を確認します。
8. 取り込み後のバックアップを改めて保存します。

途中で停止した場合は、保存・省略した件数が表示されます。同じファイルで再試行すると、取り込み済みの識別情報は省かれ、残りを追加できます。開始前の状態へ自動で巻き戻す機能はありません。

特に注意する3つのケース

重複判定は投稿名や写真の見た目ではなく、「source_key」という内部の識別情報で行います。

• Windowsから取り込んだ投稿は、元バックアップ由来の識別情報を保存しています。同じファイルの再取り込みは省かれます。ただし投稿を削除して識別情報がなくなった場合は追加できます。
• クラウドで直接作成した投稿には、作成時点ではその識別情報がありません。書き出すJSONで「cloud:投稿ID」という識別情報を作るため、元の投稿が残ったままそのJSONを初めて取り込むと、同じ内容の投稿が追加される場合があります。 その後、同じ識別情報の取り込み済み投稿が残っていれば省かれます。
• 一度取り込んだ投稿を後から編集しても、同じ識別情報の新しいバックアップは省かれます。新しい文章や数値へ更新する同期には使えません。
• 旧版SQLiteが変わった後の書き出しは別の識別情報になります。同じ投稿名でも追加される場合があります。

バックアップの確認目的で、普段の一覧へ試しに取り込むことは避けます。 完全復元の練習は、準備した別の保存先で確認する必要があります。既存の投稿を消して試す必要はありません。

旧Windows版のバックアップと書き出し（必要なときだけ）

旧版を停止 → 旧版の「data」フォルダーを日付付きフォルダーへコピー → バックアップ側の「data/bunta.sqlite3」を「cloud/tools/export-windows.bat」へドラッグ → 「bunta-local-backup.json」ができる → クラウド版で取り込みます。

書き出しはSQLiteを読み取り専用で開き、元ファイルを変更しません。同じ名前の出力ファイルがある場合は上書きせず停止します。先に既存JSONを別名で保管してください。今回の旧版取り込みは完了しているため、通常の利用で繰り返す操作ではありません。

旧版へ戻す必要がある場合はクラウドJSONをSQLiteに変換する機能がありません。旧版を停止し、現在のdataも別名で保管したうえで、旧版SQLiteバックアップのコピーを戻す方法を個別に確認します。クラウドの最新内容を旧版へ自動同期する手順ではありません。

9. 困ったとき

現在、写真の交換・投稿削除の後も、古い写真ファイルはSupabaseの非公開保管場所に残す作りです。通信失敗時の消失を避けるためですが、保存容量は使います。通常のJSONには現在参照中の写真しか入りません。古い写真の整理は普段の操作とは分けて確認します。

10. この説明で確認した範囲

GitHubの現在の配信元ブランチにあるプログラムを読み、手元の同じファイルと内容が一致することを確認しました。画面項目、保存・読込・ログイン、更新競合の防止、バックアップ・取り込み、グラフ計算、初期SQLのアクセス制限を確認しています。

Cloudflareの配信設定、Supabaseの利用者設定・初期SQL実行結果は、この会話で提示・確認された画面と操作結果に基づきます。今回、管理画面の現在値や実データを直接取得し直してはいません。ソースに記載された設定と、現在のサービス側の実設定は区別しています。

実際に確認済み：ログイン、写真付き保存、ページ更新後の保持、PC/iPhone共有、旧版1投稿・写真1枚の取り込み、写真・文章・投稿日一致、クラウドJSONのダウンロードと保管。

未確認：Instagramの実投稿後の本番数値入力、別環境への全件復元。コードの模擬環境でのグラフ・取り込み検証と、本番の実利用確認は別です。Instagramの画面仕様や各サービスの現在の無料枠は、このアプリのプログラムだけから断定しません。

確認元（プログラムのファイル名）：

• cloud/public/index.html：画面のボタン名・入力項目。
• cloud/public/app.js：カレンダー・グラフ・保存・取り込み画面・ダウンロード名。
• cloud/public/cloud-api.js：保存先・ログイン・写真・更新時刻の照合・JSONの内容・識別情報。
• cloud/supabase/001_initial.sql：本人のみのアクセス制限・非公開写真・データの保存項目。
• cloud/functions/api/config.js：公開接続情報の配信。
• cloud/tools/export_local.py：旧版SQLiteの読み取り専用書き出し。
• server.py：旧Windows版のSQLite保存。

このマニュアルはアプリのプログラム更新時にも、実際の機能に合わせて見直します。