https://takeyamasaaki.hatenablog.com/entry/2024/12/15/135147

前回は ChatGPT にブックマークレットの動作を解説させました。いよいよ今回はブックマークレットを作ってみましょう！面倒な手順の操作を繰り返し行うことがあれば、それをブックマークレットで置き換えられたら楽になりますよね。
「そんなこと言ったって JavaScript のプログラミングなんて難しそうでムリ…」
と思うかもしれませんが、大丈夫です！ChatGPT を使えば、プログラミングの知識はほとんどなくても作れます。むしろいくつか作っていくうちに少しずつプログラミングについての理解が進むことと思います。

では、ChatGPT を活用してブックマークレットを作成していきましょう。ChatGPT の無料版を使用した例です。まず、基本的なことを確認します。今回の ChatGPT とのやり取り全体は ↓ こちらから見ることができます。

ChatGPT - ブックマークレットの作成方法

🙋🏻‍♂️ユーザー

ブックマークレットを作りたいんだけど、基本的なことを教えて

🤖ChatGPT

ブックマークレットは、JavaScriptコードを含む小さなスクリプトで、ウェブブラウザのブックマークとして…

といろいろ説明してくれます。その中にこんな注意点がありました。

🤖ChatGPT

すべて1行で書く必要があります（改行すると動作しない場合があります）。

どういうことでしょうか。さらに聞いてみます。

🙋🏻‍♂️ユーザー

1行にまとめるとは？

🤖ChatGPT

ブックマークレットを実行する際に、JavaScriptコードはブラウザのアドレスバーやブックマークの「URL」欄に直接書き込まれるため、コード全体が1行にまとまっていないと正しく動作しないことがほとんどです。

ということで、説明に続けて複数行のコードを1行にまとめる例を提示してくれました。
では、いよいよ作ってもらいましょう。

🙋🏻‍♂️ユーザー

選択したテキストをウィキペディアで検索するブックマークレットを作って

🤖ChatGPT

選択したテキストをウィキペディアで検索するブックマークレットは以下のように作成できます。
javascript:(function() {
    var selectedText = window.getSelection().toString().trim();
（略）

実際にはあと8行コードが続きますが省略しました。さらに詳しい説明も付けてくれます。しかし、複数行のコードで出力されているので、1行にしてもらいます。

🙋🏻‍♂️ユーザー

1行にまとめて

🤖ChatGPT

以下が、選択したテキストをウィキペディアで検索するブックマークレットを1行にまとめたバージョンです：
javascript:(function(){var t=window.getSelection().toString().trim();if(!t){alert('テキストが選択されていません。');return;}window.open('https://ja.wikipedia.org/wiki/'+encodeURIComponent(t),'_blank');})();
ポイント
- 変数名を短く (t など)。
- 改行や余分な空白をすべて削除。
- 機能はそのまま維持。

このコードをブックマークに登録して利用してください！

ということで前々回に書いた手順で登録したところ、無事に動きました！
今回はうまく動きましたが、動かないときはどうしたらいいか、聞いてみました。

🙋🏻‍♂️ユーザー

今回はうまく動いたけど、作ってもらったブックマークレットがうまく動かなかった場合はどうすればいい？

🤖ChatGPT

ブックマークレットがうまく動かない場合、以下の手順を試して原因を特定し、修正できます。

1. デバッグ方法

1.1 ブラウザのコンソールでコードを実行

ブラウザの開発者ツールを開く（F12 または Ctrl + Shift + I / Cmd + Opt + I）。（以下略）

なんかていねいに説明してくれましたが、難しそうな言葉がたくさん出てきました。

🙋🏻‍♂️ユーザー

もうちょっと簡単に教えて

🤖ChatGPT

ブックマークレットがうまく動かなかったときは、以下の3ステップで確認してみましょう：

1. コンソールで試す
1. ブラウザの開発者ツールを開く
- Windows/Linux: F12 または Ctrl + Shift + I
- Mac: Cmd + Opt + I
2. 「コンソール」タブに移動。
3. ブックマークレットの中身をコピーして貼り付け、Enterキーを押して実行。

エラーがあれば、メッセージが出て原因がわかります。

（中略）

もし何をやっても動かない場合は、「どんな動作を期待していたか」と「どこでエラーが出たか」を教えてもらえれば、さらにサポートできます！

どうやらブラウザのコンソールを開くことは必要なようです。説明を手がかりに「ブックマークレット　デバッグ　コンソール」でググってみたところ、こちらのページを見つけました。参考にしてみてください。

qooga.jb-jk.net

さあ、どんなブックマークレットを作りましょうか！ぜひ試してみてください。

この記事はここまでです。有料部分はありません。
もし有益と感じられたなら ↓ から「投げ銭」お願いします。

この続きはcodocで購入