はじめての道具箱 — 探す・並べる画面
— 見るだけの画面と、直せる画面の分かれ目 —
一覧を見られる画面を作ったら、次は「画面のボタンでファイル名も直したい」と思うものです。ところが、ブラウザの画面だけでは、Mac の中のファイルの名前を変えられません。この記事では、その理由と、見るだけで足りる場合と直せる形にする場合の分け方を、はじめての人向けに説明します。
この記事を読むとできること
想定している使い方
ブラウザで開くチャット型の AI（Gemini や ChatGPT など）にコードを書いてもらい、 それを自分の Mac に保存して動かす使い方です。この記事の操作や画面の説明は、すべて Mac を前提にしています。
読む目安：約12分 ・ 道具箱の項目 C1（探す・並べる画面）・ 図4枚
静的な HTML とは、中身があらかじめ書き込まれた1枚のページ（ファイル）のことです。ブラウザはそれを開いて表示するだけで、Mac の中のほかのファイルには手を出しません。「動かない」という意味ではなく、「開いた時点で中身が決まっている」という意味です。
動画などのファイルを一覧で見られる画面を AI に作ってもらうと、最初は、一覧を書き込んだ1枚の HTML ファイルで返ってくることがあります。ダブルクリックするとブラウザで開き、キーワードでの絞り込みや並べ替えもできるので、見るだけならとても便利です。
すると次に、「この画面のボタンから、ファイル名も直せたら」と思います。ところが、ボタンを付けても、実物の名前は変わりません。ブラウザは、開いたページが勝手に Mac の中のファイルを書き換えたり消したりできないように作られているからです。知らないサイトを開いただけで、写真が消されたら困ります。
実物のファイルに手を出せるのは、Mac の中で動く裏方役のプログラム（Python など。プログラムを書く言葉の1つ）です。画面は「この名前に変えて」と頼む役、実際に変えるのは裏方、と分担すると、画面のボタンから直せる道具になります。この裏方が、いつでも頼みを受けられるように待っている形を、別の項目（A4）では「店」と呼んでいます。
図の見方：上の段は、静的な HTML の画面で「名前を変える」ボタンを押した場合で、ブラウザが断るので実物は変わりません。下の段は、裏方（店）を挟んだ場合で、画面は頼むだけ、実物を変えるのは店です。
静的な HTML の画面でも、書き込まれた一覧を見る、キーワードや分類で絞り込む、並べ替える、暗い配色に切り替える、といったことはできます。これらは JavaScript（画面の上での動きを受け持つ言葉）が、ブラウザの中で、書き込まれたデータを組み替えているだけだからです。
できないのは、画面の外にあるものを変えることです。実物のファイルの名前を変える、消す、移す、直した内容を Mac のファイルとして保存する、のどれも届きません。直したように見えても、開き直すと元に戻ります。もう1つ注意したいのは、一覧が「作った時点の写真」だということです。そのあとフォルダの中身が変わっても、一覧を作り直すまで、画面には入ってきません。
名前を変える流れは、①画面のボタンを押すと、新しい名前を添えて店に頼む、②店（Python）が頼みを受け取る、③店が実物の名前を実際に変える、④結果が画面へ戻って表示が新しくなる、の順です。店は Mac の中で動いているので、実物に手が届きます。
店を挟むと変わることは3つあります。1つめは、実物が本当に変わるので、画面を開き直しても結果が残ることです。2つめは、一覧を店がフォルダから読んで出す形にすれば、いつも今の中身が見えることです。3つめは、店が頼みを受け取ってから実行するので、実行する前に確かめる処理を入れられることです。その代わり、店が動いていないと画面が開けません（店の動かし方は A4 にあります）。
動画の管理道具が実例です。最初は、外付けドライブの動画を Python が読み、ファイル名に書いた分類ごとに折りたたんで本数も出す、1枚の HTML の一覧ページでした。見る・探すには足りましたが、画面から名前を直すことはできませんでした。そこで、Python で店を立てる形（宛先は localhost:8001。Mac の中だけで通じる宛先で、A4 で説明しています）に作り替え、画面の「編集」ボタンから分類や題名を直したり、「削除」ボタンから動画をごみ箱へ送ったりできるようにしました。
選ぶときの問いは1つだけです。「画面から、Mac の中のファイルを変えたいか」です。
変えたくない、つまり見る・探す・絞る・並べ替えるだけなら、静的な HTML で足ります。店を動かす手間も、店が止まって開けなくなる心配もありません。
変えたい、つまり名前の変更・削除・移動・保存がしたいなら、裏方（店）が要ります。その代わり、店を動かしておく手間が増え、実物を書き換える道具になるので、試すときは練習用のコピーを使います。最初は見るだけで作り、直したくなったら店つきに作り替えてもらう進め方でも構いません。
補足：一部のブラウザには、使う人がフォルダを選んで許可すれば、画面からそのフォルダの中身を書き換えられる機能もあります。ただし、使えるブラウザが限られ、許可の操作も要るので、確実に動く「店つき」の形のほうが迷いません。
起きていることから探してください。
| 起きていること | 原因 | どうするか |
|---|---|---|
| 画面の「名前を変える」ボタンを押しても、何も起きない。またはエラーが出る | ファイルをダブルクリックして開いた静的な HTML には、頼みを受け取る店が無い | 「AI への伝え方」の②で、店つきの形に作り直してもらいます |
| 画面では名前が変わったのに、Finder（Mac でファイルを見るアプリ）で見ると変わっていない。画面を開き直すと元に戻る | 画面の中の表示だけを書き換えていて、実物には頼みが届いていない | 「AI への伝え方」の②で、実物の名前を変える処理を店に頼みます。確かめ方の2で実物を見ます |
| フォルダにファイルを足した（名前を変えた）のに、一覧に出てこない | 一覧は作った時点の写真で、そのあとの変化は、作り直すまで入らない | 「AI への伝え方」の③で、開くたびに店がフォルダを読み直す形にしてもらいます |
| 「このサイトにアクセスできません」などと出て、画面が開かない（文面はブラウザで少し違う） | 店を起動していない、または止まっている | ターミナル（文字で命令を打ち込むアプリ。「アプリケーション」→「ユーティリティ」の中にあります）で、店を動かし直します。やり方は A4 にあります |
| AI が「ブラウザの許可機能で書き換える」コードを返してきて、使っているブラウザで動かない | その機能は、使えるブラウザが限られ、フォルダを選んで許可する操作も要る | 「Python で店を立てる形で」と指定して、作り直してもらいます |
※ この道具箱は対話型コーディング（ブラウザの画面でチャットの AI と文章をやりとりして、コードを書いてもらうやり方）の前提です。 チャットの AI はあなたの Mac を見られないので、頼むのは「コードを書いて」、困ったら出た文字を貼って伝えます。 コツは、「見るだけ」か「直せる」かを先に伝えることです。直したいときは、「Python で店を立てる形で」と指定します。 下の文は、そのまま写すためのものではなく、言い方の見本です。
① 見るだけの一覧を作りたいとき
「外付けドライブの動画フォルダを読んで、ファイル名と分類の一覧を、1枚の HTML ファイルにして。見る・絞り込む・並べ替えるだけにして、名前の変更や削除のボタンは付けない。ダブルクリックだけで開けるようにして。コードを書いて」
② 画面から名前を変えたいとき
「今の一覧に、ファイル名を変えるボタンを付けたい。ブラウザだけでは実物の名前を変えられないと聞いたので、Python で店（サーバー）を立てて、ボタンを押すと店が実物の名前を変える形に作り直して。名前を変える前に、同じ名前のファイルがすでにないか確かめて。店の起動のしかたも、手順で教えて。コードを書いて」
③ 一覧が古いままのとき
「一覧が作った時点のままで、フォルダの今の中身と合わない。画面を開くたびに、店がフォルダを読み直して一覧を出す形にして」
うまくいかないとき
「編集ボタンを押しても何も起きない。画面は、ファイルをダブルクリックして開いている。ブラウザのコンソール（ページのエラーが表示される欄）に出た赤い文字は：（ここに貼る）」
※ ②のように実物を書き換える道具は、試すときに大事なファイルで動かさず、練習用のコピーで試します。名前を変える前の対応表を残して、元に戻せるようにしてもらうと安心です（作り方は B2 にあります）。
画面のボタンが実物に届いているかは、画面を開き直すことと、実物を見ることで分かります。練習用のコピーのファイルで試してください。
画面を開き直す。名前を直したあと、ブラウザで画面を読み込み直します（⌘ と R を同時に押します）。直した名前のまま残っていれば、画面の外まで届いています。元の名前に戻るなら、画面の中の表示だけを変えていて、実物には届いていません。
実物を見る。名前を変えたファイルのあるフォルダを Finder で開き、実際に名前が変わっているか確かめます。ここが決め手です。画面の名前と Finder の名前が同じなら、店を通って実物が書き換わっています。
店を止めて試す。店を動かしているターミナルで、control と C を同時に押して店を止め、画面で名前を変えるボタンを押します。エラーが出る、または反応しなければ、そのボタンは店に頼む作りになっています。試し終わったら、店を動かし直します。