Skip to content

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

ChatGPTでブックマークレットが一瞬で作れる件 CODE
CODE
この記事は約5分で読めます。

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

ChatGPTとは

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

Just a moment...

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

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

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

ブックマークレットで以下の条件を使って、条件にあったテキストの個数を出力する。
条件にあったテキストはブラウザ上でCSSを使って赤文字に変更するようにする。
var str=['猫','犬',' ','1','2','3','4','5','6','7','8','9','0','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','①','②','③','④','⑤','⑥','⑦','⑧','⑨','⑩','⑪','⑫','⑬','⑭','⑮','⑯','⑰','⑱','⑲','⑳'];

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

JavaScript
javascript:(function(){
var
str=['猫','犬',' ','1','2','3','4','5','6','7','8','9','0','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','①','②','③','④','⑤','⑥','⑦','⑧','⑨','⑩','⑪','⑫','⑬','⑭','⑮','⑯','⑰','⑱','⑲','⑳'];
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’にする。
もう一度実行でdocument.designMode=’off’にする。
JavaScript
javascript:(function(){
  if(document.designMode == 'on'){
    document.designMode = 'off';
    alert('編集モードを終了しました');
  }else{
    document.designMode = 'on';
    alert('編集モードを開始しました');
  }
})()

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

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

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

ブックマークバーを右クリックすると「ページを追加」とでます(Chromeの場合)

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

URLにスクリプトをコピペする。

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

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

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

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

お仕事・当サイトへ興味を持っていただいた方お問い合わせはこちらから

ma-san(鈴木正行)
テクニカルディレクター / Webデザイナー

「ma-san web design」の管理者。東京都・千葉県・宮城県仙台市を中心に企業のWebデザイン/マーケティング/IT戦略のプランニングからWebサイト構築・運用をしています。
Webアクセシビリティ」を中心に、「変わりゆくWebと共にサービス・サイトを改善していくこと」を重視します。
当サイトではお仕事のご相談からナレッジシェアを中心に活動していきます。

PR
シェアする
ma-sanをフォローする
ma-san blog