自作アプリ紹介 — APP 06
— AI に作ってもらい、画面を見ながら自分で直す —
ホームページは、AI に頼めば、ざっくりした形がすぐできます。けれども「この言葉だけ変えたい」「この箱を下へ動かしたい」という細かい直しは、そのたびに頼むのも、コードを開いて探すのも大変です。そこで、見えている画面の上で直接直すための、自分専用のアプリを作りました。この記事では、その作りと、ページを壊さないための工夫を紹介します。
この記事を読むとできること
想定している使い方
Mac の中で小さなアプリを動かしておき、ブラウザ（Safari や Brave など、Web ページを見るためのアプリ）で開いて使います。この記事の説明は、すべて Mac を前提にしています。コードは載せていません。作ったページを公開する方法は、次の記事（APP 07）で説明します。
読む目安：約8分 ・ 自作アプリ紹介 APP 06 ・ 図3枚
サイト簡易エディタは、AI が作ったホームページを、コードを開かずに、画面の上で文字を書き換えたり、ブロック（見出しや段落など、ページを作る1まとまり）を並べ替えたりして手直しするための、自分専用のアプリです。
ホームページ（Web サイト）は、ふつうページごとに1つのファイルでできています。ファイルの中身は HTML（ページの文字や並び方を、決まった書き方で書いた文章）です。このサイトも、1ページが1つの HTML ファイルです。
AI に「こんなホームページを作って」と頼むと、全体の形はすぐにできあがります。ところが、できたあとの細かい直しが、意外と手間です。言い回しを変える、並び順を入れ替える、余白を詰める。そのたびに AI に頼んで待つか、自分でコード（HTML の中身）を開いて場所を探し、書き換えるしかありません。書き間違えれば、ページが崩れます。
そこで、見えている画面のまま、クリックして直すアプリを作りました。AI には大きな作り直しを、自分には細かい手直しを、と役割を分けています。
図の見方：上の段は、ホームページを直すたびにコードを開く場合です。直したい所を探して書き換えるので、書き間違えるとページが崩れます。下の段は、見えている画面の上でクリックして直す場合です。コードを見ずに済むので、崩さずに直せます。
このアプリは、Mac の中でサーバー（頼まれた仕事を受け付けて返すプログラム）として動き、ブラウザで開いて使います。ページの一覧と、ページの見た目が画面に並び、見た目の上でクリックして直します。
直した結果は、元の HTML ファイルに保存されます。ここが、このアプリのいちばんの工夫です。画面に見えている状態を、そのままファイルへ書き戻す作り方もありますが、それでは元のファイルの整え方や、あとで読み返すためのメモ書きが消えてしまいます。さらに、ブラウザが表示のときに自動で足した部品（見た目を整えるための要素）まで保存されてしまい、次に AI がそのファイルを読んだときに、混乱の元になります。
そこで、編集した箇所の文字だけを、元のファイルの中のその場所へ書き換える方式にしました。そのために、画面に見えている部分が、元のファイルのどこにあたるのかを、あらかじめ地図のように持っています。
図の見方：上から順に、画面で直す、元のファイルの場所を探す、その箇所だけを書き換える、の3段です。いちばん下の点線の箱は、あえて採らなかった方法で、画面の状態を丸ごと書き戻すやり方です。
文字をクリックすると、その段落ごと編集できます。以前は、太字やリンクで区切られた短い切れ端ごとにしか直せず、文の途中で改行が入ったように見えて使いにくいものでした。いまは段落をまとめて直し、保存のときに、元の場所へそれぞれ書き戻します。
日本語を打つときは、変換を確かめて Enter を押します。このとき、打った文字がまるごと消える不具合を一度出しました。段落の前後の空白に文字が入り込み、それを「おかしな変更」と見なして取り消していたのが原因です。いまは、カーソルを近くの文字の中へ寄せ、外へ入った文字は近くの正しい位置へ移します。
一方で、太字やリンクの中身を全部消す操作は、止めています。中身の無い印だけが残って、ファイルが壊れるためです。消したいときは、その部品ごと消します。
ページは、見出し、段落、箱などの「ブロック」が積み重なってできています。ブロックを選ぶと、次の操作ができます。
消す前に、まず「非表示」にして様子を見ることもできます。非表示にするボタンは「隠す」で、押したあとは「表示する」に変わるので、もう一度押せば見える状態に戻ります。「削除」は押すと確認の画面が出て、消したあとも、画面の「元に戻す」ボタンで戻せます。
図の見方：上から順に、並べ替える前、操作、並べ替えたあとです。ブロックの名前は例です。
ホームページは、公開すれば誰かが見るものです。直し方を間違えても、すぐに戻せることを先に考えました。
ファイルを書き換える直前に、元のファイルを控えとして別の場所へ退避します。画面の「元に戻す」で1つ前へ戻せるほか、履歴の中から、好きな時点の控えを選んで復元することもできます。
編集できるのは、サイトのフォルダ（ホームページのファイルをまとめて入れた Mac 上のフォルダ）の中のページだけです。ほかのフォルダやファイルは、頼まれても断ります。画面から来た頼みごとが、関係のない場所を書き換えないようにするためです。
保存は、いきなり元のファイルに書かず、別のファイルに書き終えてから、まるごと差し替えます。書いている途中で Mac が止まっても、元のファイルは無事なまま残ります。
画面を開いたあとに、AI などがそのファイルを書き換えていたら、上書きせずに止めます。自分の古い画面が、新しい変更を消してしまわないようにするためです。止まったときは、画面の「↻ 読み直す」ボタンで読み直してから、もう一度直します。
いちばん変わったのは、細かい直しのたびに、AI の返事を待ったり、コードを開いて探したりしなくて済むようになったことです。言葉を1つ直す、箱を1つ動かす、といった作業が、見ながらその場でできます。
一方で、AI に頼むほうがよい直しもあります。ページの大きな作り直しや、新しいページ作りは、AI に任せます。手直しの道具は、あくまで仕上げのためです。
このやり方が向いているのは、自分のホームページを、細かく整え続けたい人です。ただし、直したあとは、保存した結果を、ブラウザで自分の目で1回確かめてください。画面で見えたとおりに保存されたかどうかは、見て確かめるのがいちばん確実です。作ったページを世の中に公開する手順は、次の記事で説明します。