自分でオリジナルのブックマークレットを作る手順を解説します。いまはChatGPTやClaudeなどの生成AIにコードを書いてもらうのが最も手軽な方法なので、エラーが起きにくいプロンプトの書き方から、javascript:プレフィックスの仕組み、自分でゼロから書く場合の手順、動かないときによくある原因まで、まとめて解説します。
ブックマークレットの基本的な仕組みはブックマークレットとは？作り方・使い方からおすすめ活用例まで完全ガイドで解説しています。
ブックマークレットの基本構造
ブックマークレットは、次のような形が基本形です。
javascript:(function(){ /* ここに処理を書く */ })();なぜ即時関数（function(){ }();）で囲むのか
処理をそのまま並べるのではなく (function(){ ... })(); という「即時関数」で囲むのには理由があります。ブックマークレットで使った変数がそのままページ上に残ってしまうと、同じブックマークレットをもう一度クリックしたときに「変数がすでに定義されています」というエラーで動かなくなることがあります。処理全体を関数の中に閉じ込めることで、変数がページ本体に影響を与えなくなり、何度クリックしても安定して動くようになります。
AIに作ってもらう方法（プロンプト例つき）
いまはゼロから自分でコードを書かなくても、ChatGPTやClaude、Geminiといった生成AIに頼めば数十秒でブックマークレットを作ってもらえます。ただし、投げ方によっては「1行のURLとして貼り付けても動かないコード」が返ってくることがあるため、出力形式まで指定したプロンプトを使うのがポイントです。流れは次の4ステップです。
- ブックマークレットを作成するためのプロンプトを書く
- AIにプロンプトを送る
- 出てきたコードをブックマークのURL欄に登録して試す
- バグがあればその旨をAIに伝えて再度試す
1. プロンプトを書く
「やりたいこと」に加えて、「1行のURLとして出力する」「//の1行コメントを使わない」「Markdownの```を付けない」といった出力形式の条件を明記するのがコツです。これを省略すると、AIが複数行のコードや説明用の//コメント、コードブロックの```付きで返してきて、そのままではURL欄に貼り付けても動かないことがあります。
ブラウザのブックマークレットを作ってください。
【やりたいこと】
（ここに実現したい処理を具体的に書く。例：このページで選択した文字列をGoogle検索する）
【出力の条件】
・javascript: から始まる1行のURLとして出力してください（改行を含めないでください）
・処理全体を (function(){ ... })(); で囲んでください
・コード中に // を使った1行コメントは入れないでください。1行のURLとして扱われるため、// より後ろがすべて無効になってしまいます。コメントが必要な場合は /* ... */ の形式にしてください
・コードの前後に ``` などのMarkdown記法を付けず、URL欄にそのまま貼り付ければ動く状態で出力してください
・コードの後に、簡単な説明を別途書いてください「やりたいこと」の部分を書き換えれば、どんな処理を頼むときにも使い回せます。
2. AIにプロンプトを送る
ChatGPT・Claude・Geminiなど、普段使っている生成AIのチャット画面に貼り付けて送信します。特定のAIでなければ動かないという話ではないので、使い慣れているものでかまいません。
3. 出てきたコードをブックマークのURL欄に登録して試す
返ってきたコードをコピーし、ブラウザ・デバイスごとの登録方法に沿ってブックマークのURL欄に貼り付けて実行します。
4. バグがあればその旨をAIに伝えて再度試す
実行してエラーになったり期待通りに動かなかったりした場合は、その症状をそのままAIに伝えて修正してもらいます。パソコンならF12キーで開発者ツールを開き、「コンソール」タブに赤字で表示されるエラーメッセージをそのままコピーして伝えると、より正確に直してもらえます。
さっきのブックマークレットを実行したら、開発者ツールのコンソールに
「Uncaught SyntaxError: Unexpected token ')'」というエラーが出ました。
修正したコードを、同じ出力条件（1行のURL、//コメントなし、```なし）で出してください。自分でゼロから書く場合の手順
AIに頼らず、仕組みを理解しながら自分の手で書きたい場合は、次の手順で進めます。
- やりたい処理を、まずは普通のJavaScriptとして改行やインデントありで書く
- 書いたコード全体を
(function(){ ... })();で囲む - 改行を取り除いて1行にまとめる（テキストエディタの「改行を検索して空白に置換」機能を使うと手早くできる）
- 先頭に
javascript:を付けて、ブックマークのURL欄に登録する
例として、現在のページのURLをクリップボードにコピーする処理は次のようになります。
javascript:(function(){navigator.clipboard.writeText(location.href);alert('URLをコピーしました');})();文字数の目安と注意点
「ブックマークレットには文字数制限がある」とよく言われますが、制限の厳しさはブラウザによって大きく異なります。古いInternet Explorerでは2,000文字程度で制限にかかっていましたが、現在主に使われているChrome・Edge・Firefoxでは、数千〜数万文字程度のコードでも通常は問題なく動作します。
とはいえ、長いコードは管理やデバッグがしづらくなります。外部ライブラリをまるごと埋め込むような使い方は避け、本当に必要な処理だけに絞り込むのが実用的です。
動かないときによくある原因
- コード内に
//の1行コメントが残っている：ブックマークレットは最終的に1行のURLとして扱われるため、//より後ろの文字がすべて無効（コメントアウト）になってしまいます。コメントは登録前に削除するか、/* コメント */の形式に置き換えてください。 - 引用符（
'と"）の対応が崩れている：ブラウザの編集画面によっては、貼り付けたコードの一部が意図せず書き換わることがあります。登録後にURL欄の内容を見直しましょう。 - 変数名がページ側の変数と衝突している：前述の即時関数で囲む書き方をしていれば、基本的にこの問題は避けられます。
サンプルコード集
まずはシンプルな例から。今見ているページのタイトルを表示するブックマークレットです。
javascript:(function(){alert(document.title);})();ページ内で選択している文字列をアラートで確認したいときは、次のように書けます。
javascript:(function(){var t=window.getSelection().toString();alert(t||'テキストが選択されていません');})();各ブラウザ・デバイスへの登録
作ったコードを実際に登録する手順は、ブラウザ・デバイスによって細かく異なります。
もっと手軽に使いたい方へ
自分で作らなくても、すでに用意されている便利なブックマークレットをそのまま使う方法もあります。
まとめ
いまはAIに「1行のURLで、//コメントなしで出力して」と条件付きで頼むのが一番手軽な作り方です。自分で書く場合の基本も「即時関数で処理を囲み、改行を取り除いて1行にまとめ、javascript:を付けて登録する」という同じ考え方です。どちらの場合も、動かないときはまず//コメントの消し忘れを疑ってみてください。
