よく使うツールを1つの画面にまとめた話
ツール工房でいくつかツールを作っているうちに、少し困ったことが出てきました。
ホテル検索、スマホ料金比較、○×トラッカー、楽天最安値検索など、ツール自体は増えてきたのですが、毎回それぞれのURLを開くのが少し面倒だったのです。
ブックマークを探したり、ブラウザのタブがどんどん増えたりして、せっかく作ったのに使うまでの手間が気になるようになりました。
そこで、
「スマホのホーム画面みたいに、自分がよく使うツールを1つの画面にまとめられないかな」
と思って作ったのが、今回の日常ツールポータルです。
作りたかったもの
作りたかったのは、とてもシンプルです。
1つのページを開けば、そこから自分のツールをすぐ切り替えられる画面。
イメージとしては、左側にメニューがあって、右側に選んだツールが表示される形です。スマホでは、画面の下にアイコンを並べて、タップするだけでツールを切り替えられるようにしました。
自分の中では、
- スマホのホーム画面
- ChatGPTの左メニュー
- よく使うアプリのランチャー
のようなものを作りたい、という感覚でした。
「別のページを画面の中に表示する」仕組みを使った
ここで使ったのが、1つのページの中に別のページをまるごと表示できる仕組みです。
正直、最初からこの仕組みのことをよく分かっていたわけではありません。「こういう画面にしたい」と Claude Code に相談していく中で、「別のページを、今見ているページの中に枠として表示する方法がありますよ」と教えてもらった、というのが実態です。
たとえば、ホテル検索ツールはホテル検索ツールとして、別のURLで動いています。それを日常ツールポータルの中に枠として表示しておけば、ポータル画面からそのままホテル検索を使えます。
同じように、スマホ料金比較や○×トラッカーも、ポータルの中に表示できる。これなら、ツールごとに別のタブを開かなくても、1つの画面の中で切り替えられます。
便利だったところ
この仕組みを使って便利だったのは、すでに作ったツールをそのまま使えたことです。
ポータル用に、ホテル検索ツールや○×トラッカーを作り直す必要はありませんでした。それぞれのツールは今まで通り別々に動かしておいて、ポータル側ではそれを表示するだけ。
また、ツールを切り替えても、入力した内容が残りやすいのも便利でした。
たとえばホテル検索で条件を入力して結果を見たあと、別のツールに切り替えて、また戻ってきても、検索結果がそのまま残っている。毎日使う画面としては、これはかなり大事でした。
一番苦労したのは画面の高さの調整
作る前は、別ページを枠として埋め込むだけだから簡単だろう、と思っていました。
でも実際にやってみると、画面の高さの調整でかなり詰まりました。中に表示しているツールと、外側のポータル画面が別々に動いているため、うまく調整しないと スクロールが二重 になってしまいます。
外側の画面もスクロールする。 中のツールもスクロールする。 すると、自分がいまどっちを動かしているのか分からなくなります。
特にスマホでは、この違和感が目立ちました。
Claude Code にエラーや画面の状態を説明しながら、何度も調整してもらいました。
「画面いっぱいに表示したい」 「でも下が切れないようにしたい」 「スクロールが二重にならないようにしたい」
というように、やりたいことを日本語で伝えて、少しずつ直していった感じです。
ブラウザに止められる場面もあった
もう一つつまずいたのが、ブラウザに止められることでした。
別々のURLで動いているツールを、1つの画面の中に表示しようとすると、ブラウザ側で「このページの中に、別のページを表示してもいいのか」を確認するチェックが入ります。安全のための仕組みらしく、「許可されていない組み合わせ」だと、画面が真っ白になって何も表示されません。
正直、細かい仕組みはまだ完全には理解できていません。ただ、ブラウザのエラー画面を見ながら、Claude Code にそのまま貼り付けて、
「このエラーは何ですか」 「どこを直せばいいですか」
と聞いていくと、少しずつ原因が分かってきました。
最終的には、「このURLとこのURLは、同じ画面に表示してもいい」とちゃんと許可する設定を入れることで、ポータルの中に各ツールを表示できるようになりました。
※ 同じ仕組みを使う場合は、埋め込みを許可するURLを必要最小限に絞ることが大切です。個人情報や非公開データを扱うページを埋め込む場合は、認証・アクセス制限・CSP / frame-ancestors などの設定を確認してください。クリックジャッキングなどのリスクを避けるため、許可するドメインは自分が管理しているものに限定するのが基本です。
スマホでは少し割り切りも必要だった
スマホで使うと、パソコンとはまた違う問題が出ました。
指で画面をスワイプしたときに、ポータル全体が動くのか、中に表示しているツールが動くのか、少し分かりにくい場面がありました。
ここも何度か調整しましたが、完全に理想どおりにするのは難しそうでした。最終的には、
「毎日使ううえで大きなストレスがなければOK」
というところで公開することにしました。完璧に作ろうとすると、いつまでも公開できなくなります。自分用のツールなので、まずは使える形にすることを優先しました。
作ってみてよかったこと
完成してみると、思った以上によく使うようになりました。
1つの画面を開けば、自分のツールが全部並んでいる。それだけなのですが、使い勝手はかなり変わりました。
ホテル検索を開く。○×トラッカーを見る。楽天最安値検索を使う。スマホ料金比較を確認する。──こういう切り替えが、かなり楽になりました。
ツールは作るだけではなく、実際に自分が使いやすい場所に置くことも大事だと感じました。
プログラミングが分からなくても、形にはできた
今回も、細かいコードの意味を全部理解して作ったわけではありません。聞いたことのない言葉もたくさん出てきました。
ただ、
「こういう画面にしたい」 「ここが使いにくい」 「スマホだとこう動いてしまう」
ということを Claude Code に伝えることで、少しずつ形にしていけました。
プログラミングが分からなくても、自分が何に困っているか、どう使いたいかを言葉にできれば、AIと一緒にかなり進められるのだと思います。
ツールは、作っただけでは使わなくなってしまうことがあります。でも、すぐ開ける場所にまとめておくと、使う回数が増える。今回の日常ツールポータルは、自分で作ったツールをちゃんと使い続けるための、かなり大事な入口になりました。
← 他の制作記を見る ｜ トップ ｜ お問い合わせ