第４回 タブはある。でも、画面が切り替わらない

5月12日、私はChatGPTにこう返していた。

オンライン版PhotoBattleの開発中。次の機能を作る前に、まずブラウザーで動きを確かめよう、という話になったところだった。

ところが、その確認に使う画面が使いにくい。

機能が動くか確かめるために、先に、確かめやすい画面を作らなければならない。写真大会の開発は、いったん確認の入口へ戻ることになった。

会場のサーバーをなくしたかった

ここで少し、オンライン版を考えた背景に話を戻したい。

元祖PhotoBattleでは、MacBook Proを会場のサーバーとして使っていた。参加者の端末などをつなぎ、写真大会を動かす中心役だった。

会場にサーバーを用意しなくても、大会ができるようにしたい。

そこで考えたのが、ネットにつながる保存機器、NASを利用する仕組みだった。参加者も司会側も、それぞれの端末からインターネット経由でアクセスする。会場のWi-Fiに頼らず、Google TV対応のプロジェクターなどで写真を映せれば、大会を開けるのではないか。

なくしたかったのは、会場でサーバーを用意する手間だった。それぞれの端末がネットにつながれば使える。そんな構想を考えていた。

会場の仕組みを変えようとしていた私が、開発中には、まず目の前の画面を直してほしいと頼んでいた。

改善しました さて使えるか

5月12日の話に戻る。

UIは、画面の配置や操作の仕方のこと。今回、直す対象になったのは、司会用の管理画面と、参加チームが使う画面だった。

私は日本語化も頼んだ。表示が日本語になっていないことも、使いにくさの一つだった。

相談相手のChatGPTが、プログラムを改修するCodexへ渡す指示をまとめる。修正の報告が返ってきたら、私が使い勝手を確かめる。この往復で作っていた。

やがて、画面を改善したという報告が届いた。プログラムのチェックは通ったという。ただし、実際のブラウザーでクリックしての確認は、まだしていなかった。

それを受けた私の返答は、こうだった。

改善の報告と、使う側の感想が、きれいにすれ違っている。

さらに、こう続けた。

「使いにくさMAX」。なかなか強い言葉だが、私には比較する相手があった。これまで使ってきたPhotoBattleの操作画面だ。

そこで私は、使ってきた画面を参考にしてほしいと伝えた。オンライン版を作る話の中で、以前のPhotoBattleが見本になる。

タブの顔をした目次

翌5月13日、私は以前のPhotoBattleを参照用に用意するので、UI改善の指示文を作ってほしいと頼んでいる。

言葉だけで使いやすくしてほしいと伝えるより、見本を渡す。前に作ったアプリが、次のアプリへの注文書にもなる。

その後、以前の画面を参考に整理し、日本語化したという報告が届いた。ここでも、実際のブラウザーでの操作確認は残っていた。

そして、私が出したのが、この注文だった。

タブは、押すと表示する内容が切り替わる見出しのようなものだ。使いたい画面を選べば、その内容だけが見える。ほかの用事まで、一度に相手にしなくて済む。

ところが、このときのタブは、私に言わせると「目次みたいな扱い」だった。見出しは付いた。でも、中身は縦に長く続いている。

本に目次があるのはありがたい。ただ、今回はページを切り替えてほしいのであって、長い巻物に目次を付けてほしいわけではなかった。

タブはある。なのに、まだ巻物である。

「縦に死ぬほど長いだけ」。直してほしいところは、ここにある。見出しの形ではなく、押したときの動きだ。

選んだ部分だけを表示する。選んでいない部分は隠す。別のタブを押したら、そちらへ切り替える。

普段なら何げなく使っている仕組みを、ここでは一つずつ説明する必要があった。タブという名前だけでは、欲しい動きまでそろわない。

そして、この長い注文の最後には「でも、ましにはなってる」も付いている。

まだ全然だめ。でも、ましにはなっている。

まったく変わっていないわけではない。そのうえで、次に直してほしいところを伝えていた。

巻物をやめて 次へ

この指摘を受け、ChatGPTは、見出しを付けるだけでなく、表示する部分そのものを切り替えるよう、修正指示をまとめ直した。

その後のCodexの報告には、司会用とチーム用の両画面で、タブを切り替えると、ほかの部分が非表示になることを、ブラウザーで確認したとあった。

最初の、プログラムのチェックが通ったという報告から、少なくともタブの動きをブラウザーで確かめた、という報告には進んだ。

ただ、大会の準備から写真を選ぶところまで、一通りの操作を人手ですべて確認したわけではない。タブが切り替わることと、大会全体を問題なく進められることの間には、まだ確認するものが残っている。

5月13日の私の評価も、完成宣言には遠かった。

「いまは動いてる感じ」。試合開始や、データをまとめて消すオールリセットなど、画面に足りない機能も挙げている。

全部できたとは言わず、足りないものを残したまま、この段階で私は次へ進むことにした。

会場にサーバーを持ち込まずに使いたい。そこから始まった構想は、この二日間、日本語にしてほしい、前の画面を参考にしてほしい、タブを押したら本当に切り替えてほしい、という注文になっていた。

大きな仕組みを作っていても、使う側が頼むのは、こんなに身近なことだったりする。

まだまだだけれど、ましにはなっている。

そして、作るものは残っている。

アイキャッチ画像について

AI生成の概念イラスト。タブがあっても長い画面のまま、という場面を表現しています。実際の人物や当時のUIの再現ではありません。

📖 AI開発物語｜これまでの記事

第1回　AIに「作ってみて」と頼んだ。写真大会づくりの始まり

第2回 AIと作った写真大会 ただし入口は手入力

第３回 写真が足りないのに、画面はグリーン