FRL 自由研究ラボ

自作アプリ紹介 — APP 03

仮想サーバーパネル

— 50あまりの自作アプリを、1枚の画面で動かして見守る —

自作のアプリが増えるほど、どれを起動して、どれが止まっているのかが分からなくなります。それを1枚の画面にまとめて、探す・動かす・見守るができるようにした、自分専用の仮想サーバーパネルです。 この記事では、7つの分類と絞り込み、AI の使用量の見える化、選んだファイルだけの記録、外出先からの再起動、そして画面を守る3つの確認を紹介します。

この記事を読むとできること

  • 自作のアプリが数十個に増えても迷わないための、一覧・分類・絞り込みの工夫が分かります
  • うっかり全部を記録してしまわないための「2段階」の作り方が分かります
  • 外出先からも使う画面を、どんな確認で守るのかが分かります

想定している使い方

家の Mac の中で、このパネルを常に動かしておきます。ブラウザ(Safari や Brave など、Web ページを見るためのアプリ)で開いて使い、外出先の MacBook や iPhone からも同じ画面を開きます。 この記事の説明は Mac を前提にしています。コードは載せていません。作り方の考え方は、最後の「関連する項目」からたどれます。

  1. 仮想サーバーパネルとは何か(3つの言葉と、マンションのたとえ)
  2. 起動と、ログの置き場所
  3. 7つの分類と、絞り込み
  4. Claude Code の使用量を見張る
  5. 記録は、選んだファイルだけ
  6. 外出先からの再起動と、持ち歩き
  7. 画面を守る3つの確認
  8. 使ってみて変わったこと
  9. 関連する項目

読む目安:約13分 ・ 自作アプリ紹介 APP 03 ・ 図5枚 ・ 実際の画面3枚

仮想サーバーパネルとは何か ―― なぜ1枚の画面にまとめたのか

仮想サーバーパネルは、Mac の中で動く自作の小さなサーバー(アプリ)を、1枚の画面で一覧し、起動し、状態を見守るための、自分専用の操作盤です。

名前を3つの言葉に分けて読む

「仮想サーバーパネル」は長い名前ですが、サーバー・仮想・パネルの3つの言葉に分けると、意味が見えてきます。

つなげると、仮想サーバーパネルは、Mac の中の小さなサーバーたちを、1枚の操作盤で動かして見守る画面です。

サーバー 頼まれた仕事を受け付けて、答えを返すプログラム たとえると:注文を受けて品物を渡す、お店の店員さん + 仮想 専用の機械を用意せず、Mac の中のソフトとして動かすこと たとえると:大きな建物を借りず、自分の家の一室でお店を開く + パネル スイッチとランプが並んだ操作盤 たとえると:ボタンで動かし、ランプで様子を見る、管理人室の盤 = 仮想サーバーパネル Mac の中の小さなサーバーを、1枚の操作盤で動かして見守る画面

図の見方:上から、サーバー、仮想、パネルの3つの言葉を、それぞれの意味とたとえ話で並べています。3つを足し合わせたものが、いちばん下の濃い箱、つまり「仮想サーバーパネル」です。

ここでいう「仮想」について:インターネット上で借りる「仮想サーバー」(会社の大きな機械の一部を借りて、自分専用のサーバーとして使うもの)とは別物です。 この記事の仮想サーバーは、借りるものではなく、手元の Mac の中のソフトとして動かすものです。

マンションにたとえると

全体の形は、マンションにたとえると分かりやすくなります。Mac 1台がマンション一棟、各部屋で開いているお店が小さなサーバー(アプリ)、 管理人室にある操作盤が仮想サーバーパネルです。お客さんにあたるブラウザは、「このお店を開いてください」と頼みに来ます。 管理人は、操作盤で、どのお店を開けるか、閉めるか、いま開いているかを見て回ります。

お客さん = ブラウザ(Safari など) 「このお店を開いて」と頼む Mac 1台 = マンション一棟 仮想サーバーパネル = 管理人室の操作盤(探す・動かす・見守る) 起動・停止・様子を見る 動画の管理 お店 = 小さなサーバー 家計のメモ お店 = 小さなサーバー クイズ お店 = 小さなサーバー お店ごとに別の部屋番号(ポート番号)があり、管理人室の操作盤から、どの部屋が開いているかを一度に見られます。

図の見方:いちばん外の点線の枠が Mac 1台、つまりマンション一棟です。上のお客さん(ブラウザ)が、お店を開いてほしいと頼みます。枠の中では、濃い箱の「仮想サーバーパネル」が管理人室の操作盤で、下の3つのお店(小さなサーバー)へ、起動や停止の指示を出し、様子を見ています。 図のお店の名前は、例です。

AI にコードを書いてもらって、自分専用のアプリを作り続けてきました。システムの点検、メモの整理、動画の管理、お金の記録、学習、ゲームなど、いまでは画面に載せているものだけで 50 あまりあります。 ひとつひとつは小さなサーバーで、それぞれが別の番号(部屋番号にあたるポート番号)で動いています。

数が少ないうちは、ターミナル(文字で命令を打ち込むためのアプリ)で1つずつ起動すれば足りました。けれども数十個になると、どれが動いていて、どれが止まっているのか、あのアプリは何番だったのか、が追いきれなくなります。 ログ(動いた記録)を見たいときも、どこにあるのかを探すところから始まります。

そこで、全部のアプリの入口を、1枚の画面に集めることにしました。このパネルも、AI にコードを書いてもらって作り、使いながら直しています。

✕ アプリごとにバラバラに扱うと 自作アプリ 50あまり ターミナルを開いて、1つずつ 起動・停止・ログの確認 数が増えるほど、 どれが動いているか 追いきれない ○ 1枚の画面に集めると 自作アプリ 50あまり 仮想サーバーパネル 探す・動かす・見守る 迷わず、全部に 手が届く アプリを増やすたびに、管理の手間も増えてしまう。その手間を、1か所で受け止める道具です。

図の見方:上の段は、アプリごとにターミナルを開いて扱っていたころです。数が増えるほど、どれが動いているのかを追いきれなくなります。 下の段は、全部のアプリを1枚の画面に集めた今の形です。探す・動かす・見守るが、その画面の中で済みます。

起動と、ログの置き場所

パネルは、Mac にログインしたときに自動で起動します。起こしているのは launchd(Mac に最初から入っていて、アプリを自動で起動し、落ちたら起こし直す仕組み)です。 パネルが動き出すと、常に動かしておくアプリを、まとめて起動します。一覧の「起動」ボタンで、1つずつ起動することもできます。

工夫したのは、各アプリの出力を、アプリごとのログのファイルへ向けていることです。 これをしないと、パネルを最初に起動したターミナルの画面を閉じた瞬間に、アプリが文字を書き出す先が無効になります。アプリは文字を書こうとして失敗し、画面を開くと500エラー(サーバーの中で失敗したという知らせ)が出ます。 出力の行き先を普通のファイルにしておけば、画面を閉じても影響しません。

この仕組みの副産物として、アプリごとの記録が自然に残ります。調べものが必要になったときは、そのアプリのログを開けば、動いていたときの様子を読めます。

Mac にログインする launchd が、パネルを自動で起動し、落ちたら起こし直す 仮想サーバーパネル 常に動かすアプリを、まとめて起動する 各アプリ(それぞれ別の番号で動く) 出力を、アプリごとのログのファイルへ書き出す ターミナルを閉じても、アプリの書き込み先は無効にならない

図の見方:上から順に、Mac へのログイン → パネルの起動 → 各アプリの起動、の流れです。いちばん下のアプリは、画面ではなくファイルへ出力を書くので、ターミナルを閉じても止まりません。

7つの分類と、絞り込み

アプリが40個を超えたころ、1枚の長い表では探せなくなりました。そこで、何をする道具かで、次の7つに分けて並べています。

分類は、アプリの一覧とは別の小さな表に書いてあります。どの分類にも入れ忘れたアプリは、画面から消えずに「未分類」に出ます。見つけたら、その表に書き足します。

上にある絞り込みの欄に文字を入れると、一覧がその場で絞られます。絞った結果がちょうど1件のときは、Enter キーを押すだけで、そのアプリが新しいタブで開きます。 日本語を入力しているときの、変換を決めるための Enter では開かないようにしてあります。

絞り込みの文字と、閉じた分類は、ブラウザの中の小さな保存場所に覚えます。次に開いたときも、前の続きから探せます。絞り込み中は、閉じていた分類も開いて、隠れた所に当たったものを見落とさないようにしています。

仮想サーバーパネルのアプリ一覧。上に絞り込み欄に「メモ」と入れた状態があり、その言葉に当たったアプリだけが、用途ごとの箱(Obsidian・メモ、くらし・お金)に分かれて残っている。各行にフォルダ名、内容、種別、ポート、操作のボタンが並ぶ
実際の画面(アプリの名前・番号はすべて架空のサンプルです。スマホでは横にスクロールできます):絞り込み欄に「メモ」と入れると、当たったアプリだけが、用途ごとの箱に分かれて残ります。

Claude Code の使用量を見張る

アプリの多くは、Claude Code(Mac で動く AI エージェント)に書いてもらったものです。使える量には枠があるので、パネルの上に5時間ごとの枠と、1週間の枠の使用率を出しています。 それぞれ、どれだけ使ったかの色分けと、次にリセットされるまでの「あと○時間○分」が見えます。

Claude Code の使用量の画面。5時間ごとの枠と、1週間の枠について、残りの割合の棒、次にリセットされる時刻と、あと何時間何分かが出ている
実際の画面(数字はサンプルです):5時間ごとの枠と、1週間の枠。残りの量の棒と、次のリセットまでの時間が並びます。

リセットの時刻を過ぎた数字は、もう当たっていません。取り直せていない数字を残りの量のように見せないよう、「リセット済み」「取り直せていません」と、そのまま表示します。

使用量を知らせてくれる API(アプリどうしがやりとりするための窓口)は、1時間に呼べる回数がとても少なく、超えると約1時間、使えなくなります。 AI への作業を順番に実行するタスクキュー(別の自作アプリ)とパネルが、それぞれ別々に呼ぶと、あっという間に枠を使い切ってしまいます。

そこで、呼ぶ入口を1つの共通の部品にしました。結果は15分のあいだ共有して使い回し、使えなくなっている間は、無理に呼ばずに待ちます。 ログインの期限が切れているときも、呼ぶ前に気づいて、画面に「ログインをやり直してください」と出します。止まっている理由が、画面のどこにも出ない状態を作らないためです。

記録は、選んだファイルだけ

作ったアプリのコードは、git(変更の履歴を残す仕組み)で記録して、GitHub(その履歴を置いておく Web 上の保管場所)にも送っています。 パネルには、いまの状態としてまだ記録していない変更の件数と、まだ送っていない記録の数が、いつも出ています。 git では、この「変更を履歴として記録する操作」をコミットと呼び、画面のボタンや文言にもその名前で出てきます。

記録のボタンは、2段階です。最初に押したときは、何も記録しません。変更のあったファイルの一覧を出すだけです。 その中から、記録したいファイルにチェックを付けて、もう一度押すと、チェックしたファイルだけを記録して送ります。画面から来たファイル名は、いまの変更の一覧にあるものだけを受け付けます。

記録のボタンを最初に押した画面。何も記録せず、変更のあったファイル3つの一覧が出て、それぞれにチェックの欄がある。「コミットするファイルを選んでください(既定では何も足しません)」と知らせている
実際の画面(ファイル名はすべて架空のサンプルです):最初に押したときは何も記録せず、変更のあったファイルの一覧だけが出ます。置いたままの一時ファイルは、チェックを外したままにできます。

以前は、変更を全部まとめて記録する書き方でした。けれども、置いたままにしていた一時的なファイルや、合言葉を書いたファイルまで、そのまま GitHub に載せてしまいます。 いちど載せると、履歴に残るので、あとで消しても止められません。だから、既定では何も足さず、人が選んだものだけを足す形に変えました。

外出先からの再起動と、持ち歩き

アプリは家の Mac で動いています。外出先の MacBook や iPhone からも使えるように、Tailscale(自分の機器だけをつなぐ、仮想の専用ネットワーク)を通して、同じ画面を開けるようにしています。 各アプリは、もともと localhost(自分の Mac 自身を指す名前)でしか開けない形で動かしていて、外へ出す役目は Tailscale に任せています。

外出先で、サーバーの調子が悪くなったときのために、パネルの「再起動・電源まわり」に「いま再起動する」ボタンがあります。 押すと、全部のサーバーが、まとめて起動し直されます。外出先の MacBook や iPhone からも押せます。

再起動の最中は、パネル自身も一度止まります。画面は、パネルが戻ってきたのを見張って、自動で読み込み直します。3分待っても戻らなければ、確かめる場所を画面に出します。 AI に頼んだ作業を実行している最中は、「本当に再起動しますか」と、もう一度確認します。作業を途中で落としてしまわないためです。

画面を守る3つの確認

このパネルには、再起動や記録のように、押すと実際に動くボタンがあります。外出先からも開く形にしているので、どんな頼まれ方をしても、次の3つを必ず確かめるようにしました。 確認する入口は、すべての頼みごとが通る1か所です。

① 呼び名を確かめる

この画面を開くときの名前が、自分の Mac を指す名前(localhost)と、自分の機器の名前だけかを見ます。 知らない名前で来たものは、断ります。悪意のあるサイトが、自分の Mac を指す偽の名前を使って、この画面に入り込む手口(DNS リバインディング)を防ぐためです。

② 押された場所を確かめる

実際に動く操作は、このパネル自身の画面から来たものだけを受け付けます。ほかのサイトからはもちろん、同じ Mac にある別の自作アプリの画面から来たものも、断ります。 断ったときは、理由だけを記録に残します。受け取った情報の中身までは書きません。

③ 別のページに埋め込ませない

ほかのページが、この画面を透明に重ねて、ボタンの位置で本人にクリックさせる手口(クリックジャッキング)があります。②の確認だけでは防げないので、画面を別のページの中に入れること自体を禁止しています。

画面や、ボタンの頼みごとが届く ① 呼び名 自分の Mac か、自分の機器の名前だけを通す ② 押された場所 動く操作は、パネル自身の画面から来たものだけ ③ 埋め込み ほかのページの中に、この画面を入れさせない 3つとも通ったものだけが実行される。どれかで止まれば、理由だけ記録して断る

図の見方:上から順に、頼みごとが届く → 呼び名 → 押された場所 → 埋め込み、の3つの関門です。どれか1つでも通らなければ、そこで止まって、先の操作には進みません。

使ってみて変わったこと

アプリが50あまりに増えても、探す・開く・調子を見るが、1枚の画面で済むようになりました。外出先の iPhone からも、再起動を含めて同じ操作ができるので、調子が悪くなっても、家に戻るまで待たずに済みます。 AI に頼んだ作業を順番に実行させる仕組みも、この上に乗せています。

このやり方が向いているのは、自作のアプリや小さな道具が、10個、20個と増えてきた人です。数が増えて管理が負担になってから作るより、増え始めた早い時期に、一覧と起動と記録の入口だけでも1つにしておくほうが、あとが楽になります。

ただし、1枚の画面に集めるということは、ボタン1つで大きなことが起きるということでもあります。記録のボタンは、必ず下見の中身を自分の目で1回読んでから、2回目を押してください。 外から開く画面にしたときは、別の機器から1度開いてみて、開けるはずのものが開き、開けないはずのものが開けないことも、あわせて確かめると安心です。