はじめての道具箱 — 探す・並べる画面
— 操作と映像を、別々の画面に任せる —
動画の一覧とボタンは操作する画面に、映像は別に開いた窓の見る画面に置きます。役割を分けると、一覧も映像も場所を取り合わず、どちらも使いやすくなります。この記事では、その分け方と、分けたときに起きやすいつまずきを、はじめての人向けに説明します。
この記事を読むとできること
想定している使い方
ブラウザで開くチャット型の AI（Gemini や ChatGPT など）にコードを書いてもらい、 それを自分の Mac に保存して動かす使い方です。この記事の操作や画面の説明は、すべて Mac を前提にしています。
読む目安：約10分 ・ 道具箱の項目 C5（探す・並べる画面）・ 図4枚
操作する画面は、一覧やボタンを置いて人が手を動かす場所です。見る画面は、映像などの結果を大きく見せるだけの場所です。この2つを別々の窓（ウィンドウ。画面の上に開く四角い枠）に分けると、どちらも使いやすくなります。
動画の一覧を表にして、行の再生ボタンを押すと動画が見られる道具を考えます。再生する映像を、同じ画面の中に出すと、表と映像が場所を取り合います。映像を大きくすると表が隠れて、次に見たい動画を探せません。表を広く見せると、映像が小さくなって見づらくなります。
そこで、画面を2つの役に分けます。いつも開いておき、表とリモコンのボタンを置く操作する画面と、映像だけを出す見る画面です。見る画面は、別の窓として開きます。ブラウザ（Safari や Brave など、Web を見るアプリ）は、窓を新しく開くことができます。
AI に「動画を再生する機能をつけて」とだけ頼むと、映像をどこに出すかは AI の判断になります。分けたいなら、「どちらの画面に何を置くか」を、頼む側が先に言葉にして伝えます。見る画面は別のモニターへ動かすこともできます。
図の見方：上の段は、1つの画面に一覧もボタンも映像も入れた場合で、場所の取り合いになります。下の段は、操作する画面と見る画面に役割を分けた場合で、矢印は「操作する画面から見る画面へ指示を出す」向きを表します。
操作する画面に置くのは、動画の一覧の表、前の動画・次の動画へ移るボタン、10秒・30秒・60秒ずつ進める（戻す）ボタン、再生と一時停止のボタンです。ボタンを集めた部分を、テレビのリモコンにたとえて「リモコン」と呼びます。さらに、いま何番目を再生しているかの目印も、この画面に置きます。
見る画面には、映像だけを置きます。ボタンや表を置かないので、窓いっぱいに映像を出せます。そして、2つの画面は行き来します。操作する画面からは「10秒進めて」「一時停止して」という指示が届き、見る画面からは、押された矢印キーや「再生が終わった」という知らせが操作する画面へ戻ります。
筆者の体験メモ
筆者の動画の管理道具は、動画の一覧の画面（ここでいう操作する画面）を「司令塔」と呼び、映像は別の窓（見る画面）に出す作りです。司令塔とは、全体に指示を出す役、という意味の呼び名です。操作する画面には、前へ・次へ、10秒・30秒・60秒ずつ戻す／進める、再生と一時停止のボタンが並んでいます。再生中の動画の行は青く色が付いて目立つようになり（ハイライト）、表がその行まで自動で動きます。筆者は、放送局や監視カメラのモニター室のように、作業画面を邪魔せずに動画を確かめられるようにしたかったと書き残していて、狙いは「操作の手間を減らすこと」でした。
「30秒進む」ボタンを押したときの流れを追います。押したのは操作する画面です。操作する画面は、開いている見る画面の映像に向かって、「30秒進めて」と直接伝えます。すると映像が30秒進みます。見る画面は、映像を出して、言われたとおりに動くだけです。
逆向きの流れもあります。映像の再生が終わると、見る画面が操作する画面に「終わった」と知らせます。操作する画面は、次の動画に切り替え、一覧の中で色の付く行も次の行に動かします。「いま何番目か」を覚えているのは操作する画面なので、行の色も「3 / 10」の番号も、操作する画面が更新します。
この方式の弱点は、操作する画面が見る画面を「開いたままのもの」として頼っていることです。見る画面の窓を閉じると、指示を伝える相手がいなくなります。後ろの「よくあるつまずき」の表の1つ目が、この状態です。
画面を分けると、見る画面を2台目のモニターへ動かせるようになります。1台目のモニターには操作する画面を残し、2台目のモニターには映像だけを大きく出します。作業の画面は邪魔されません。
ただし、ブラウザの安全のための決まりで、Web ページ自身が窓を別のモニターへ動かすことは、基本的にできません。そこで、Mac の中で動く裏方（ブラウザの代わりに Mac の操作を引き受けるプログラム。サーバーといいます）に頼み、AppleScript（Mac の操作を自動で行わせる仕組み）で窓の位置を動かす方法があります。ブラウザだけではできないことを、Mac の中の裏方に頼むという点は、C1「ブラウザだけではファイルを書き換えられない理由」と同じ考え方です。
映像を何本も同時に並べる場合も、見る画面を1つ開いて区切るだけです。操作する画面と見る画面が1つずつという形は変わりません。
起きていることから探してください。
| 起きていること | 原因 | どうするか |
|---|---|---|
| リモコンの「30秒進む」や「再生と一時停止」を押しても、何も起きない | 指示を伝える相手の見る画面を閉じてしまった（操作する画面は、開いている見る画面にだけ指示を出せる） | 一覧から再生ボタンを押して、見る画面を開き直します。リモコンで開き直せる道具もありますが、再生ボタンから開き直すのがいちばん確実です |
| 再生ボタンを押しても、見る画面が開かない | ブラウザが、勝手に開く小さな窓（ポップアップ）を止めている（窓を続けて開くと止められやすい） | Safari なら、メニューバーの「Safari」→「設定」→「ウェブサイト」→「ポップアップウインドウ」を開き、一覧にある今のページを「許可」にします。あわせて、ボタンを押した直後に窓を開く作りにしてもらいます。ブラウザは、人が押した直後に開く窓なら許し、勝手に開く窓は止めるためです |
| 見る画面が、思ったモニターに出てこない（画面の外に出ることもある） | ブラウザだけでは、窓を別のモニターへ動かせない | 手でつかんで動かします（ドラッグ）。自動で動かしたいなら、「裏方（サーバー）に頼む作りにして」と伝えます |
| 見る画面を触っている間は、矢印キーで操作できない | キーを受け取るのは、いま触っている窓。見る画面には、キーを操作する画面へ渡す仕組みが無かった | 「見る画面で押したキーも、操作する画面に渡して」と頼みます |
| 一覧のどれを再生しているのか分からなくなる | 操作する画面に、いま何番目かの目印を置いていない | 「再生中の行に色を付けて、その行まで一覧を動かして」と伝えます |
※ この道具箱は対話型コーディング（ブラウザの画面でチャットの AI と文章をやりとりして、コードを書いてもらうやり方）の前提です。 チャットの AI はあなたの Mac を見られないので、頼むのは「コードを書いて」、困ったら出た文字を貼って伝えます。 コツは、「どちらの画面に何を置くか」を、言葉にして先に伝えることです。 下の文は、そのまま写すためのものではなく、言い方の見本です。
① 画面を2つに分けたいとき
「動画の一覧がある画面を『操作する画面』にして。映像は、別のウィンドウを『見る画面』として開き、そこに映像だけを出して。操作する画面には、前へ・次へ・10秒戻す／進める・再生と一時停止のボタンを置いて。コードを書いて」
② いま何を再生しているかを分かるようにしたいとき
「再生中の動画の行に色を付けて、一覧がその行まで自動で動くようにして。画面のどこかに『3 / 10』のように何番目かも出して。コードを書いて」
③ 見る画面を触っていても操作したいとき
「見る画面を触っているときも、矢印キーで前後の動画へ移ったり、秒数を送ったりできるようにして。映像が終わったら、自動で次の動画に移って。コードを書いて」
うまくいかないとき
「リモコンのボタンを押しても、映像が動かない。見る画面は開いたまま。画面に出ているエラーの文字は：（ここに貼る）。原因を教えて、直して」
AI に書いてもらった道具を、自分の Mac で開いた状態から始めます。試し用の動画を3本ほど一覧に入れます（入れ方は道具の作りで違うので、AI に「動画を追加する場所を教えて」と聞きます）。次の3つを順に試せば確かめられます。「30秒 ▶」などのボタン名も AI の作り次第なので、自分の道具のボタンに読み替えてください。
見る画面を開いたまま、リモコンを押す。一覧から1本目を再生し、リモコンの「30秒 ▶」を押します。見る画面の映像が30秒進めば、操作する画面から見る画面への指示は届いています。続けて「次へ」を押し、2本目に切り替わるか、一覧の色の行が動くかを見ます。
見る画面を閉じて、リモコンを押す。見る画面の窓を閉じてから「30秒 ▶」を押します。何も起きなければ、指示を伝える相手がいない状態なので、原因は「閉じたこと」です。画面にその理由が出る作りになっているかも見ます。何も出ないまま黙っているなら、「窓が閉じているときは、そう表示して」と頼み直します。
端と、キー操作と、最後まで再生を見る。1本目では「前へ」が、最後の1本では「次へ」が押せなくなるか確かめます。見る画面をクリックして触った状態で、矢印キーを押し、動画が進むかも見ます。最後に、短い動画を最後まで再生して、自動で次の動画に移り、一覧の色の行も動くかを確かめます。