ChatGPTでブックマークレットが一瞬で作れる件

この記事はChatGPTにテンション上がっている著者が戦々恐々しながら試している記事です。Webデザイナーやコーダーに向けた記事になります。

ChatGPTとは

ChatGPTとは簡単に言ってしまえばチャット感覚でテキストを送ると具体的な形でアウトプットしてくれるサービスです。

Just a moment...

chat.openai.com

ここ最近ではエンジニア界隈に限らず話題になっています。AI業界恐るべしですね。

アウトプットをできる限り言語化するとしっかりコード化してくれる

以下、作成してほしいブックマークレットのためのテキストです。

ブックマークレットで以下の条件を使って、条件にあったテキストの個数を出力する。
条件にあったテキストはブラウザ上でCSSを使って赤文字に変更するようにする。
var str=['猫','犬','　','１','２','３','４','５','６','７','８','９','０','Ａ','Ｂ','Ｃ','Ｄ','Ｅ','Ｆ','Ｇ','Ｈ','Ｉ','Ｊ','Ｋ','Ｌ','Ｍ','Ｎ','Ｏ','Ｐ','Ｑ','Ｒ','Ｓ','Ｔ','Ｕ','Ｖ','Ｗ','Ｘ','Ｙ','Ｚ','①','②','③','④','⑤','⑥','⑦','⑧','⑨','⑩','⑪','⑫','⑬','⑭','⑮','⑯','⑰','⑱','⑲','⑳'];

以下がChatGPTからいただけたJavaScriptです。

javascript:(function(){
var
str=['猫','犬','　','１','２','３','４','５','６','７','８','９','０','Ａ','Ｂ','Ｃ','Ｄ','Ｅ','Ｆ','Ｇ','Ｈ','Ｉ','Ｊ','Ｋ','Ｌ','Ｍ','Ｎ','Ｏ','Ｐ','Ｑ','Ｒ','Ｓ','Ｔ','Ｕ','Ｖ','Ｗ','Ｘ','Ｙ','Ｚ','①','②','③','④','⑤','⑥','⑦','⑧','⑨','⑩','⑪','⑫','⑬','⑭','⑮','⑯','⑰','⑱','⑲','⑳'];
var input = document.body.innerHTML;
var count = 0;
str.forEach(function(s){
var regex = new RegExp(s, "g");
count += (input.match(regex) || []).length;
input = input.replace(regex, "<span style='color:red'>" + s + "</span>");
});
document.body.innerHTML = input;
alert(count + '個の条件に合ったテキストがあります');
})()

上記のブックマークレットを実行すると、文書の中で条件に合ったテキストが赤文字に変更され、その個数がアラートで表示されます。
ただし、このブックマークレットはdocument.body.innerHTMLを変更しますので、使用には注意が必要です。また、このブックマークレットは文書全体に対して反映されます。

めちゃくちゃいい感じにアウトプットしてくれています。また、注意書きまで出力されるので素晴らしいですね。

上記はブックマークレットを実行すると「条件にあった文字が何個あるか出力。更にブラウザ上で文字を赤色にする」というスクリプトを実行してくれます。

document.designModeの切り替えもブックマークレットでできるように生成してもらう

先日記事にしました「document.designMode」について、コンソールから実行するというのはひと手間かかります。気軽に実行したいなということでこちらもブックマークレット化するようにChatGPTにおねがいしてみました。

document.designMode='on'を使って手軽にブラウザの挙動確認をする猫

この記事はホームページ制作を学習し、作ってみたホームページの確認や動作確認などを行う際にどのような手法があるのか知りたいWebデザイナーやコーダー、エンジニア、ディレクターに向けた記事になります。以下、茶番も兼ねていますが御覧ください。...

ma-san.org

2023.01.24

ブックマークレットでdocument.designMode=’on’にする。
もう一度実行でdocument.designMode=’off’にする。

javascript:(function(){
  if(document.designMode == 'on'){
    document.designMode = 'off';
    alert('編集モードを終了しました');
  }else{
    document.designMode = 'on';
    alert('編集モードを開始しました');
  }
})()

上記をブックマークレット化したら問題なく使用できました。

ブックマークレットに登録する方法

パソコンのブラウザ、GoogleChromeに限定した説明になります。

ブックマークを登録するときに名前は実行する名前、URLにJavaScriptをコピペしてください。

あとは登録されたブックマークを選択することで実行されます。

まとめ：プログラマーの仕事が減るのではなく、より生産的になるという可能性

正直、ChatGPTを使ってみたときはひっくり返りましたがこれほど便利だとゼロベースから頑張ってコーディングするよりもたたき台を作ってもらって修正する、というほうが早い時代に突入してきましたね。

もっと便利に使えるように色々試してみようと思っています。