自分だけの管理画面を作った話（パスワード保護＋データ確認）
ツール工房.ai のツールを増やしていく中で、「自分だけが確認できる管理画面」が欲しくなりました。
きっかけは単純で、ネット上の小さなメモ帳にどんなデータが入っているか、外から確認する手段が何もなかったことです。
たとえば○×トラッカーの記録データは、ネット上の小さなメモ帳に保存しています。でも、それが正しく入っているか・壊れていないかを確認しようとすると、Cloudflare の公式管理画面まで行って、専用の画面を開いて、延々とスクロールして探して……という手順が必要でした。毎回そこまでやるのが面倒で、「ブラウザで非公開の確認ページにアクセスしたら手元のデータが見られる自分専用のページ」が欲しいと思いました。
自分だけが入れる仕組みをどう作るか
最初に考えたのが「どうやって自分だけアクセスできるようにするか」でした。
ちゃんとしたログイン機能を作ろうとすると、アカウント管理だのパスワードの安全な保存だの、話がどんどん複雑になります。でもツール工房の管理画面は「自分だけが使う、完全に個人用のページ」です。そこまで凝った仕組みは必要ありません。
最初に決めたのは、合言葉（パスワード）を画面で入力させて確認する方法にすることでした。正解なら中に入れる、間違いなら弾く、というシンプルな仕組みです。
ここで一つだけ気をつけたのは、パスワードを表側のコードに書き込まないことです。ブラウザ側だけで判定する作りにすると、HTML や JavaScript の中身を見るだけで合言葉が読まれてしまいます。サーバー側、つまり Cloudflare 側のリクエスト処理の中でパスワードを確認し、認証前のリクエストは中身を返さない構成にしています。
なお、もう少しちゃんと守りたい場合は、Cloudflare Access のようなサービスを管理画面の前段に置く方法もあります。許可したメールアドレスだけ通す、ワンタイムPINや Google ログインを使う、といった形にすると、単純な合言葉方式より管理しやすくなります。
管理画面の中に置いたもの
管理画面の中身は、主に2つです。
ひとつ目は、ネット上の小さなメモ帳の中身一覧。
サイト宛のリクエストフォーム（「比較してほしい商品」など）への投稿内容や、ホテル検索の連続アクセスを数えるためのデータなど、ツールが使っているデータが一覧で確認できます。Cloudflare の公式管理画面まで行かなくても、自分専用の管理用URLを開くだけで「今どんなデータが入っているか」がざっと把握できるようになりました。
ふたつ目は、リクエストの削除や整理。
たとえばリクエストフォーム（wishlist）から届いた依頼を、対応済みのものから順に消していく、といった軽い運用作業もこの画面から行えます。
もう一つ、ゆくゆく付け足したいと思っているのがおかしなアクセスの確認です。大量のリクエストを連続で送りつけてくるような動きがあれば、その痕跡を管理画面でざっと見られると安心です。今は Cloudflare 側のログを直接見ているので、いずれ管理画面に組み込めればもう一段ラクになりそうだなと考えています。
先に整理したのは、「どのデータを一覧で見たいか」という要件でした。大きな機能を作るというより、自分が毎日見るものを一か所にまとめる、という発想で組み立てています。
忘れていた「検索エンジンへの指示」
管理画面ができたあと、実装後に見落としやすかったことが一つあります。
それは「管理用ページを、検索エンジンに登録されないようにしておく」ことです。
検索エンジンは、ウェブサイトの中をくまなく巡回してページ内容を登録しようとします。管理ページも放っておくと巡回対象になってしまう可能性があります。
ここで一つ大事な前提があります。robots.txt はクローラーへの巡回方針を伝える仕組みであって、アクセス制御や秘密保持の仕組みではありません。管理画面を守る本体は、前述のパスワード認証や Cloudflare Access のようなアクセス制御であり、robots.txt はあくまで補助的な役割です。
私のサイトでは robots.txt にも /admin を「来てほしくないところ」として書いていますが、これは「クローラーに対する意思表示」であって、URLを隠す効果は期待していません。本気で隠したいページがあるなら robots.txt には頼らず、認証や Cloudflare Access に任せるのが筋だと思います。
そのうえで、ページ自体に <meta name="robots" content="noindex"> を入れる、認証で守られているからクローラーが中身を読めずインデックスに乗りにくい、といった対策を組み合わせています。
専門用語はあとから少しずつ覚えました。当初は「robots.txt と認証はどう違うの？」という状態でしたが、こういう小さなやりとりを積み重ねながら、ふんわりとした理解が増えていく感じがしています。
作ってみて分かった便利さ
実際に管理画面を作ると、思った以上に日常的に使うようになりました。
「あのデータ、ちゃんと保存されてるかな」という確認が、スマホからでも管理用URLを開くだけでできます。Cloudflare の公式管理画面まで行く手間が省けた分、細かいチェックの頻度が自然と上がりました。
完璧な管理システムとは言えないし、仕組みを全部説明できるかと聞かれると正直難しいです。でも「自分がよく困っていたこと」が一つ解消された、それで十分だと思っています。
「管理画面」という大げさな名前の割に
「管理画面を作る」と聞くと、なんだか大規模な開発のように聞こえます。でも実際やったことは、「よく確認するものを一か所で見られるようにしたい」という、地味な便利さの追求でした。
何が不便かを先に整理したことで、必要な画面構成が決まりました。私がやったのは、機能をゼロから設計したというより、「何を一か所で見たいか」を言葉にしたことだけです。
しばらく経ったころ、「ちゃんとした管理画面があるサービスって、こういう積み重ねで作られているんだろうな」と感じるようになりました。大きな機能より、自分が毎日ちょっとだけ不便に感じていたことを一つずつ解消していく、その繰り返しが今の工房の形になっています。
← 他の制作記を見る ｜ トップ ｜ お問い合わせ