「統合ツールパネル・ジェネレーター」は、お気に入りのブックマークレットや自作のJavaScriptコードを、たった一つのポップアップパネルにまとめてくれる高機能なウェブツールです。 「ブックマークバーが大量のスクリプトで溢れかえっている」「サイトごとに使うツールを整理したい」…そんな悩みを、このジェネレーターが解決します。シンプルなブックマークレットから、高度な自動実行スクリプトまで、あなたのニーズに合わせて柔軟に作成できます。
多彩な生成モード: 手軽なブックマークレット形式はもちろん、特定のサイトで自動的に起動する高機能なUserScript形式も、このジェネレーター単体で直接作成可能です。(※UserScriptの利用にはTampermonkeyなどのブラウザ拡張機能が必要です)
柔軟な階層構造: パネル内のボタンは、親子関係を持つ「展開/収納」タイプと、クリックで中身が切り替わる「フォルダ」タイプの2種類の階層で分かりやすく整理できます。
パネル内高速検索: 生成されたパネルには検索ボックスが標準搭載されます。入力するたびに、全ての階層からボタンやフォルダを瞬時に探し出し、結果を一覧表示します。ひらがな・カタカナ、大文字・小文字を区別しない柔軟な検索で、目的の機能へすぐにアクセスできます。
詳細なパネル設定:
表示位置: パネルを画面の「上から/下から」「左から/右から」を基準に、ピクセル単位で自由に配置できます。
自動フォルダ展開: 特定のURLでパネルを開いた際に、指定したフォルダを自動で展開した状態にするルールを設定できます。
GitHub連携によるスクリプト更新: ボタン名とGitHub上のJSファイルURLを紐づけておくことで、ボタン一つでスクリプトの内容を最新版に更新できます。複数のスクリプトも一括で更新でき、管理が飛躍的に楽になります。
既存コードの簡単編集: 作成済みのパネルのコードを貼り付ければ、いつでもボタンの追加やスクリプトの修正、パネル設定の変更が可能です。
GitHubインポート: GitHub上のJSファイルのURLを読み込んで、直接編集を開始することもできます。(補足: GitHub上のファイルページを開いた際に、ブラウザのアドレスバーに表示されるURLをそのまま使用できます)
作成したツールパネルは、文字数制限がなく高機能なUserScriptとして活用するのがおすすめです。
GitHubでの管理と自動更新
作成したUserScriptをGitHubで管理すれば、一箇所でコードを修正するだけで、利用しているすべてのブラウザでスクリプトを自動更新させることができます。
UserScriptの生成: このジェネレーターの「UserScript生成モード」でスクリプトを作成します。
GitHubへアップロード: 生成された.jsファイルを、ご自身の公開GitHubリポジトリにアップロードします。
ヒント: ファイル名を 〇〇.user.js のように .user を含めると、Tampermonkeyなどの管理ツールが認識しやすくなります。
Raw URLの取得: アップロードしたファイルのページで「Raw」ボタンを押し、表示されたURL(https://raw.githubusercontent.com/...で始まるもの)をコピーします。
更新用URLの設定: ジェネレーターのUserScript設定内にある「更新する際のURL」の欄に、コピーしたRaw URLを@downloadURLと@updateURLの両方に貼り付けます。
最終版の生成とインストール: 更新用URLを設定した状態で再度UserScriptを生成し、そのコードをTampermonkeyにインストールします。
これで設定は完了です。以降は、GitHub上のファイルを更新するだけで、Tampermonkeyが自動で変更を検知し、スクリプトを更新してくれます。
スマートフォンでもっと活用
UserScriptはPCだけでなく、対応するブラウザ拡張機能を使えばスマートフォンでも利用できます。(例: AndroidのKiwi BrowserやFirefox + Tampermonkey) WebページのPC版表示と組み合わせることで、スマホでもPCと同じツールパネルを使えるようになり、作業効率が飛躍的に向上します。
Galaxyユーザー向けの高度な連携
お使いのスマートフォンがGalaxyの場合、Good Lockの「One Hand Operation+」というアプリと連携させると非常に便利です。UserScriptに設定したキーボードトリガーを、One Hand Operation+のキーボードショートカット機能からジェスチャーに割り当てることで、画面の端からスワイプするだけでツールパネルを一瞬で呼び出すことが可能になります。当サイトでパネルの表示位置も細かく調整できます。デフォルトでは上からと左からが選択された状態で表示されますが、スマホで表示する場合は、下からと右から(左利きの人は左から)に変更してください。片手操作でもパネルが手の届きやすい位置に表示され、パネルの下端が右下(あるいは左下)に設定されることで、パネルの下端が見切れずに表示されます。
このツールには3つのモードがあります。タブをクリックして切り替えることができます。
1. 生成モード
新しいツールパネルをゼロから作成するモードです。
生成モードの選択:
JavaScript生成モード: 従来のブックマークレットを作成します。ブックマークバーに表示される名前を入力してください。
UserScript生成モード: Tampermonkeyなどで利用する高機能なUserScriptを作成します。スクリプト名や起動条件などを細かく設定できます。
ルールの設定(任意):
自動フォルダ展開ルール: 特定のWebページでパネルを開いた際に、指定のフォルダを自動で開くルールを設定します。
ボタン・GitHub URL紐づけルール: ボタン名とGitHubのURLを紐づけ、[更新]ボタンでいつでも最新のスクリプトを読み込めるようにします。
ボタンの追加と編集:
ボタン名 / 階層: パネルに表示されるボタンの名前を入力します。
実行するJavaScript: ボタンをクリックしたときに動かすコードを貼り付けます。
操作: 各ボタンには詳細な説明がツールチップとして設定されています。カーソルを合わせることで機能を確認できます。
下階層: クリックすると、すぐ下位に新しい行が追加され、親子関係(展開/収納タイプ)が作られます。
フォルダ化: ボタンを、クリックで階層移動する「フォルダ」に設定します。フォルダ化されたアイテムはJavaScriptを実行できません。
その他、「同階層」でアイテムを追加したり、「↑」「↓」で順番を入れ替えたりできます。
生成 → テスト → 登録:
[生成] ボタンをクリックするとコードが完成します。
[JSテスト] ボタンを押すと、ページを離れることなくその場でコードの動作確認ができます。エラーが出ないか、意図通りに動くかを気軽に試せます。
動作に問題がなければ、ブックマークレットの場合は表示されたリンクをブックマークバーにドラッグ&ドロップ、UserScriptの場合はコードをコピーしてTampermonkeyに新規登録してください。
2. 編集モード
過去に作成したツールパネルを修正・拡張するモードです。
コード入力: 編集したいブックマークレットやUserScriptのコードをテキストエリアに貼り付けます。GitHubのURLから直接インポートすることも可能です。
編集開始: [編集開始] ボタンを押すと、コードが解析され、下の表にボタン構成や各種設定が展開されます。
内容の編集: 「生成モード」と同じ要領で、ボタンやスクリプト、パネルの表示位置や各種ルール(自動フォルダ展開、GitHub紐づけ)などを自由に変更します。
UserScript設定: 読み込んだコードがUserScriptの場合、トリガーとなるサイトURLや起動方法などの詳細設定フォームも表示され、こちらも編集可能です。
再生成: 編集が終わったら [再生成] ボタンをクリックします。更新されたコードが下に表示されるので、再度ブックマークに登録し直すか、UserScriptを上書き保存してください。もちろん、再生成後も [JSテスト] ボタンで動作確認が可能です。
3. 1ボタン編集モード
パネル全体の構成は変えず、特定のボタン1つのスクリプトだけを素早く修正したい場合に便利なモードです。
コード入力: 編集したいブックマークレット等のコードを貼り付けます。
ボタン名入力: 修正したいボタンの名前を一字一句正確に入力します。
編集開始: [編集開始] ボタンを押すと、該当ボタンのJavaScriptだけが表示されます。
スクリプト編集: テキストエリア内のスクリプトを自由に修正します。パネル全体の情報(表示位置や自動フォルダ展開、GitHub紐づけルールなど)もこのモードで編集・保持されます。
再生成: [再生成] ボタンを押すと、変更が反映された完全なコードが生成されます。
制作者:ガジェオタ