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