自作アプリ紹介 — APP 03
— 50あまりの自作アプリを、1枚の画面で動かして見守る —
自作のアプリが増えるほど、どれを起動して、どれが止まっているのかが分からなくなります。それを1枚の画面にまとめて、探す・動かす・見守るができるようにした、自分専用の仮想サーバーパネルです。 この記事では、7つの分類と絞り込み、AI の使用量の見える化、選んだファイルだけの記録、外出先からの再起動、そして画面を守る3つの確認を紹介します。
この記事を読むとできること
想定している使い方
家の Mac の中で、このパネルを常に動かしておきます。ブラウザ(Safari や Brave など、Web ページを見るためのアプリ)で開いて使い、外出先の MacBook や iPhone からも同じ画面を開きます。 この記事の説明は Mac を前提にしています。コードは載せていません。作り方の考え方は、最後の「関連する項目」からたどれます。
読む目安:約13分 ・ 自作アプリ紹介 APP 03 ・ 図5枚 ・ 実際の画面3枚
仮想サーバーパネルは、Mac の中で動く自作の小さなサーバー(アプリ)を、1枚の画面で一覧し、起動し、状態を見守るための、自分専用の操作盤です。
「仮想サーバーパネル」は長い名前ですが、サーバー・仮想・パネルの3つの言葉に分けると、意味が見えてきます。
つなげると、仮想サーバーパネルは、Mac の中の小さなサーバーたちを、1枚の操作盤で動かして見守る画面です。
図の見方:上から、サーバー、仮想、パネルの3つの言葉を、それぞれの意味とたとえ話で並べています。3つを足し合わせたものが、いちばん下の濃い箱、つまり「仮想サーバーパネル」です。
ここでいう「仮想」について:インターネット上で借りる「仮想サーバー」(会社の大きな機械の一部を借りて、自分専用のサーバーとして使うもの)とは別物です。 この記事の仮想サーバーは、借りるものではなく、手元の Mac の中のソフトとして動かすものです。
全体の形は、マンションにたとえると分かりやすくなります。Mac 1台がマンション一棟、各部屋で開いているお店が小さなサーバー(アプリ)、 管理人室にある操作盤が仮想サーバーパネルです。お客さんにあたるブラウザは、「このお店を開いてください」と頼みに来ます。 管理人は、操作盤で、どのお店を開けるか、閉めるか、いま開いているかを見て回ります。
図の見方:いちばん外の点線の枠が Mac 1台、つまりマンション一棟です。上のお客さん(ブラウザ)が、お店を開いてほしいと頼みます。枠の中では、濃い箱の「仮想サーバーパネル」が管理人室の操作盤で、下の3つのお店(小さなサーバー)へ、起動や停止の指示を出し、様子を見ています。 図のお店の名前は、例です。
AI にコードを書いてもらって、自分専用のアプリを作り続けてきました。システムの点検、メモの整理、動画の管理、お金の記録、学習、ゲームなど、いまでは画面に載せているものだけで 50 あまりあります。 ひとつひとつは小さなサーバーで、それぞれが別の番号(部屋番号にあたるポート番号)で動いています。
数が少ないうちは、ターミナル(文字で命令を打ち込むためのアプリ)で1つずつ起動すれば足りました。けれども数十個になると、どれが動いていて、どれが止まっているのか、あのアプリは何番だったのか、が追いきれなくなります。 ログ(動いた記録)を見たいときも、どこにあるのかを探すところから始まります。
そこで、全部のアプリの入口を、1枚の画面に集めることにしました。このパネルも、AI にコードを書いてもらって作り、使いながら直しています。
図の見方:上の段は、アプリごとにターミナルを開いて扱っていたころです。数が増えるほど、どれが動いているのかを追いきれなくなります。 下の段は、全部のアプリを1枚の画面に集めた今の形です。探す・動かす・見守るが、その画面の中で済みます。
パネルは、Mac にログインしたときに自動で起動します。起こしているのは launchd(Mac に最初から入っていて、アプリを自動で起動し、落ちたら起こし直す仕組み)です。 パネルが動き出すと、常に動かしておくアプリを、まとめて起動します。一覧の「起動」ボタンで、1つずつ起動することもできます。
工夫したのは、各アプリの出力を、アプリごとのログのファイルへ向けていることです。 これをしないと、パネルを最初に起動したターミナルの画面を閉じた瞬間に、アプリが文字を書き出す先が無効になります。アプリは文字を書こうとして失敗し、画面を開くと500エラー(サーバーの中で失敗したという知らせ)が出ます。 出力の行き先を普通のファイルにしておけば、画面を閉じても影響しません。
この仕組みの副産物として、アプリごとの記録が自然に残ります。調べものが必要になったときは、そのアプリのログを開けば、動いていたときの様子を読めます。
図の見方:上から順に、Mac へのログイン → パネルの起動 → 各アプリの起動、の流れです。いちばん下のアプリは、画面ではなくファイルへ出力を書くので、ターミナルを閉じても止まりません。
アプリが40個を超えたころ、1枚の長い表では探せなくなりました。そこで、何をする道具かで、次の7つに分けて並べています。
分類は、アプリの一覧とは別の小さな表に書いてあります。どの分類にも入れ忘れたアプリは、画面から消えずに「未分類」に出ます。見つけたら、その表に書き足します。
上にある絞り込みの欄に文字を入れると、一覧がその場で絞られます。絞った結果がちょうど1件のときは、Enter キーを押すだけで、そのアプリが新しいタブで開きます。 日本語を入力しているときの、変換を決めるための Enter では開かないようにしてあります。
絞り込みの文字と、閉じた分類は、ブラウザの中の小さな保存場所に覚えます。次に開いたときも、前の続きから探せます。絞り込み中は、閉じていた分類も開いて、隠れた所に当たったものを見落とさないようにしています。
アプリの多くは、Claude Code(Mac で動く AI エージェント)に書いてもらったものです。使える量には枠があるので、パネルの上に5時間ごとの枠と、1週間の枠の使用率を出しています。 それぞれ、どれだけ使ったかの色分けと、次にリセットされるまでの「あと○時間○分」が見えます。
リセットの時刻を過ぎた数字は、もう当たっていません。取り直せていない数字を残りの量のように見せないよう、「リセット済み」「取り直せていません」と、そのまま表示します。
使用量を知らせてくれる API(アプリどうしがやりとりするための窓口)は、1時間に呼べる回数がとても少なく、超えると約1時間、使えなくなります。 AI への作業を順番に実行するタスクキュー(別の自作アプリ)とパネルが、それぞれ別々に呼ぶと、あっという間に枠を使い切ってしまいます。
そこで、呼ぶ入口を1つの共通の部品にしました。結果は15分のあいだ共有して使い回し、使えなくなっている間は、無理に呼ばずに待ちます。 ログインの期限が切れているときも、呼ぶ前に気づいて、画面に「ログインをやり直してください」と出します。止まっている理由が、画面のどこにも出ない状態を作らないためです。
作ったアプリのコードは、git(変更の履歴を残す仕組み)で記録して、GitHub(その履歴を置いておく Web 上の保管場所)にも送っています。 パネルには、いまの状態としてまだ記録していない変更の件数と、まだ送っていない記録の数が、いつも出ています。 git では、この「変更を履歴として記録する操作」をコミットと呼び、画面のボタンや文言にもその名前で出てきます。
記録のボタンは、2段階です。最初に押したときは、何も記録しません。変更のあったファイルの一覧を出すだけです。 その中から、記録したいファイルにチェックを付けて、もう一度押すと、チェックしたファイルだけを記録して送ります。画面から来たファイル名は、いまの変更の一覧にあるものだけを受け付けます。
以前は、変更を全部まとめて記録する書き方でした。けれども、置いたままにしていた一時的なファイルや、合言葉を書いたファイルまで、そのまま GitHub に載せてしまいます。 いちど載せると、履歴に残るので、あとで消しても止められません。だから、既定では何も足さず、人が選んだものだけを足す形に変えました。
アプリは家の Mac で動いています。外出先の MacBook や iPhone からも使えるように、Tailscale(自分の機器だけをつなぐ、仮想の専用ネットワーク)を通して、同じ画面を開けるようにしています。 各アプリは、もともと localhost(自分の Mac 自身を指す名前)でしか開けない形で動かしていて、外へ出す役目は Tailscale に任せています。
外出先で、サーバーの調子が悪くなったときのために、パネルの「再起動・電源まわり」に「いま再起動する」ボタンがあります。 押すと、全部のサーバーが、まとめて起動し直されます。外出先の MacBook や iPhone からも押せます。
再起動の最中は、パネル自身も一度止まります。画面は、パネルが戻ってきたのを見張って、自動で読み込み直します。3分待っても戻らなければ、確かめる場所を画面に出します。 AI に頼んだ作業を実行している最中は、「本当に再起動しますか」と、もう一度確認します。作業を途中で落としてしまわないためです。
このパネルには、再起動や記録のように、押すと実際に動くボタンがあります。外出先からも開く形にしているので、どんな頼まれ方をしても、次の3つを必ず確かめるようにしました。 確認する入口は、すべての頼みごとが通る1か所です。
この画面を開くときの名前が、自分の Mac を指す名前(localhost)と、自分の機器の名前だけかを見ます。 知らない名前で来たものは、断ります。悪意のあるサイトが、自分の Mac を指す偽の名前を使って、この画面に入り込む手口(DNS リバインディング)を防ぐためです。
実際に動く操作は、このパネル自身の画面から来たものだけを受け付けます。ほかのサイトからはもちろん、同じ Mac にある別の自作アプリの画面から来たものも、断ります。 断ったときは、理由だけを記録に残します。受け取った情報の中身までは書きません。
ほかのページが、この画面を透明に重ねて、ボタンの位置で本人にクリックさせる手口(クリックジャッキング)があります。②の確認だけでは防げないので、画面を別のページの中に入れること自体を禁止しています。
図の見方:上から順に、頼みごとが届く → 呼び名 → 押された場所 → 埋め込み、の3つの関門です。どれか1つでも通らなければ、そこで止まって、先の操作には進みません。
アプリが50あまりに増えても、探す・開く・調子を見るが、1枚の画面で済むようになりました。外出先の iPhone からも、再起動を含めて同じ操作ができるので、調子が悪くなっても、家に戻るまで待たずに済みます。 AI に頼んだ作業を順番に実行させる仕組みも、この上に乗せています。
このやり方が向いているのは、自作のアプリや小さな道具が、10個、20個と増えてきた人です。数が増えて管理が負担になってから作るより、増え始めた早い時期に、一覧と起動と記録の入口だけでも1つにしておくほうが、あとが楽になります。
ただし、1枚の画面に集めるということは、ボタン1つで大きなことが起きるということでもあります。記録のボタンは、必ず下見の中身を自分の目で1回読んでから、2回目を押してください。 外から開く画面にしたときは、別の機器から1度開いてみて、開けるはずのものが開き、開けないはずのものが開けないことも、あわせて確かめると安心です。