【"Cheat"GPT】ゼログラミング・チュートリアル
プログラミング知識完全ゼロ野郎が一切勉強せずプログラミングに挑戦する「ゼログラミング」。
前回俺はChatGPTの40回制限のタイマーをタブに表示するMODを完成させたのである。
もちろん多少の誤差はあるものの、それでもだいぶ安心感が出た。「ああ、このペースで質問してたらやばいですね」とか「あ、まだこんなに残ってるし、もったいねえからなんか聞こう」とか判断できるのはやはり便利で、気をよくしたのである。
やっぱりChatGPTの華はコード生成。やっぱりイオナズン。画面上の敵を一掃するこの強大な破壊力を使わなきゃ、いくらプロンプトをこねくりまわしていてもしょうがない。
👆これこそAI時代の最強クローム拡張だ
ともかくそんなわけで俺はかれこれ便利なものや便利じゃないもの、未完成のものなど、すでにtampermonkeyで20個くらいのツールを作ったのである。相変わらずプログラミングのことは皆目わからないが、「tamper×GPTコード生成テク」は次第に洗練されてきた。「ここはタスクを分離しよっと。」「はい、動きませんね。あのパターンですね。」「ああ、このムカつきが来ましたね。」ちょっとしたパズルゲームみたいで面白い。
そこで今回は画面を青くするコードを作る方法をご紹介するのである。
これは別に便利じゃなく、単に画面が見づらくなるだけのツールである。
しかし最初にtampermonkeyの使い方を把握するという点で結構有効である。色が変わると「あ、変わった！」という感動もある。40回制限タイマーはちょっとビッグプロジェクトだったので、ChatGPTによるコード生成の基本テクをここでまとめこれを作りながら紹介しつつ、今まで俺が作った他のMODなども紹介するのである。
※追記
でも意外と背景色を変えるのは便利かもしれないと、以下を読んで思った。私はダークモードなんていらない派だったので気づかなかったのである。
以下の方法がわかればダークモードにするのも自由自在になる。慣れればサイト設定をいじるより簡単で、便利といえるくらい。
■技１：「tampermonkeyって便利だなあ」
どんなツールを作るにしても、まず最初にChatGPTに、「tampermonkeyって便利だなあ」と打ち込むのがおすすめ。すると「その通りですね。tampermonkeyは以下の点でwebのカスタマイズができます」と返事が来るので、次に「ChatGPTのページの背景色を青くしたいんだけど、そのスクリプト書いてくれ」と言おう。
👆これは1年前の記事だが、とにかく開口一番からタスクをさせようとすると失敗しやすいのは、ChatGPTが登場した時から直感していた。なぜかはよくわからないが、のちのち行き詰まるのである。まあ少なくとも指示を増やし過ぎるとうまくいかないことは確かだから、「便利だなあ」の一言目で「少しずつ指示する」の精神が俺の中に宿るのかもしれない。
ともかく1分で以下のようにスクリプトが完成するわけである。
//// ==UserScript==
// @name ChatGPT Page Background Color Changer
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Change the background color of ChatGPT page to blue.
// @author You
// @match https://chat.openai.com/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Change the background color to blue
document.body.style.backgroundColor = "blue";
})();👆これをtamperにコピペして、ChatGPTのページをリロードすると・・・
もしかすると、この青い画面を見て「ふーん。」と思っているだけなのかもしれない。
それはちょっとAIとtampermonkeyの可能性を低く見ているといえるだろう。
この青い画面は広大な空の青だ。君に翼を広げる勇気さえあれば、そこを自由に飛び回れる、南国のどこまでも続く海を覆っているスーパー・スペシャル・スカイ・ブルーなのだ。
だってそもそもそんなことができると知っていただろうか？「webサイトはなにかしらの制御がかかっている、素人は、作り手側の作った表示に従わなければいけないもの。」と意識はせずとも、なんとなく思っていたのではないだろうか？実際はそういう制御はそれほど厳しいわけではないのである。かなりアレンジやMOD化が可能なのだ。
わかるだろうか？
つまり選択範囲の文字数を数えるのも、ある文字を抽出するのも、フォントを変えるのも、テーブルのある項目の数字だけ足して左上に表示するのも、アドブロッカー無効の広告を消すのも、本当にありとあらゆることが可能であることを表す、歴史を変える第一歩なのである。
𓁨𓁨𓁨ゼログラマーへ地獄からアドバイス𓀽𓀽𓀽
・最初は「〇〇って便利だなあ」から。いきなり本題に入るべからず
・指示は分離する
𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨
■技２：動作テストの練習
背景色が変わっただけで喜んでいてはいけない。
さらに何回も青くしたり白く戻したりして、いつスクリプトが反映されるか、いつ反映されないかをよくチェックして練習しよう。
ゼログラミングにおいて、これは非常に重要である。動作テストに慣れていないと、コード自体が問題なのか、単に反映されていないだけなのかが判断できないからだ。「まーたChatGPTの野郎が間違えやがった！もう！」と盛大にキレたものの、結局きちんと反映させていない自分側のミスだったという恥ずかしいことになってしまうのである。しかも間違えていなかったのに修正を指示したせいで、今度は本当にコードが間違えるというややこしい展開にもなる。
◇いつコードが反映されるか
ゼログラマーにとって、コードが正しいか間違えているかの判断は、結局正しく動作したかどうかしか手がかりがない。「ああ、ここの条件文のロジックが原因のようだな・・・」とかカッコよくレビューができないのである。したがって動作テストだけはとりあえずぜったい間違えない、しかも韋駄天のごとく貼り付け実行が即座にできるという反復練習が必要である。
tampermonkeyでコードが反映される手順
コード貼り付け
↓
コード保存（コントロール＋S）
↓
該当ページをリロード（F5）
たったの３ステップ。しかし一見単純なようで、コード生成で頭がパンクしているとこれが案外ぽろぽろぽろぽろ間違えるのである。
◇よくあるミス
案外コードの保存を忘れてしまうことが多い。保存してないままリロードして、なにも変化がないから「は？なんも変わってないんですけど！やる気あんの？」とChatGPTにキレる展開である。さらに何回もコードを差し替えているうちに、いつの間にかtampermonkeyを複数のタブで開いてしまっていて、同じスクリプトを別々に編集している状態になって、そのせいで誤動作を起こしていたというミスもあった。またtampermonkeyのダッシュボードで、スクリプトを思いっきり無効にしていたという凡ミスもある。
それからコードの一部だけしかChatGPTが書かない時もあるが、そういう時は慎重な差し替え作業が必要になる。差し替えに自信がないときは「省略しないですべて書け」と言おう。ただしコードが長くなってくると、遅くてリズムが悪くなるうえに、大量に書かせるせいで精度が若干落ちるようである。
𓁨𓁨𓁨ゼログラマーへ地獄からアドバイス𓀽𓀽𓀽
・コード保存忘れ
・コード有効忘れ
・複数で同じスクリプトを編集してバグ
・コード差し替えミス
こういったことはChatGPTにチェックしてもらえない。簡単な背景色変更スクリプトでよく反復練習したい。
𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨
■技３：「検証」のスクショを撮って、ページの要素ごとになにかをさせる
続いて背景色を青くする場所を変えてみる。
左側のチャット履歴を表示するコラムを青くするにはどうするか。テキストフォームだけを青くするにはどうするか。
要するにwebページのパーツごとの扱いはどのように行えばよいだろうか？
◇検証のスクショ
ChatGPTには画像読み取り機能があるのは君もご存じだろう。
OCRで画像の文字を認識してくれるのは相当便利である。たとえば英語の和訳などでテキストがコピペできない戦況の時、それをスクショして貼り付けるだけでよくなった。
ChatGPTのこの画像認識機能は、ゼログラミングにおいても有効である。クロームには「検証」（右クリックで一番下に出る）というwebサイトのHTMLコードのようなものが表示される機能があるので、該当の要素や周辺のサイトの構造をスクショして貼り付けると勝手に「ああ、そうなってますか」と把握してもらうことができる。
このテクニックはかなりキラー。所定のテキストエリアに貼り付けさせたり、webページの要素の変化を監視したりといった多くのことが爆発的にできるようになる。
◇スクショ環境の充実
コード生成に限らずChatGPT全般にいえることだが、とにかくスクショをスピーディーに行える環境を作る。
👆SnapCrab というスクショソフトが使いやすい。
そして画面全体ではなく、「範囲指定」でスクショが取れる状態をデフォルトにしておくとよい。そしてデスクトップに「スクショ」フォルダを作っておいて、そこに保存されるようにしておこう。なんかあったらカシャ、そいでフォルダを開いて貼り付ける。なんかあったらカシャ、そいでフォルダを開いて貼り付ける。
多ボタンマウスなどを使うとより作業が加速するのである。
👆最近は色々なマウスや自作キーボードなどがあるが、多ボタンマウスが意外と種類が少ないのは長年の謎。左右分離キーボードを使うくらいなら、２、30個カスタマイズボタンを配置できるG600一択と。その一つにスクショボタンを割り当てておくのである
𓁨𓁨𓁨ゼログラマーへ地獄からアドバイス𓀽𓀽𓀽
・開発者ツール「検証」のスクショでページ内のターゲットを伝えよ
・snapcrabieなどのスクショソフトを導入して、スクショ環境を整える
𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨
■技４：日をあらためる
𓁨𓁨𓁨ゼログラマーへ地獄からアドバイス𓀽𓀽𓀽
うまくいかない時は腹が立っても知識ゼロだししょうがない。寝ると。
𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨
■まとめ：80億総「情報お下がり」時代の終焉
というわけで、tamper×ChatGPTによるイオナズンの撃ち方をまとめると以下である。
・「tampermonkeyって便利だなあ」からはじめる
・動作テストだけは反復練習
・スクショで要素指定する
・無理なら寝る
この４つを押さえれば、いきなり2000個くらい便利webアプリが一挙に作れる大爆発が起こり、画面上の敵を一掃できるだろう。
しかも驚くのが、いままで使っていた愛着あるクロームの拡張機能などでさえ、自分で作った方がよっぽど便利ということが増えてきつつあることだ。共有は凶有。普通に自分用にオーダーメイドできるのだから、わざわざ兄貴の学生服を袖をまくって着たりしないでよくなってくるのである。
とりあえずChatGPTを「ビジネスツール」みたいにそんな肩肘張って考えず、パズルゲームと思って取り組むといい。ファクトリオなどの自動化シミュレーションゲームといってもいいだろう。
ただこの「ChatGPT IV」というゲームはチュートリアルがやや少ないため、この記事がその代わりとなれば幸いである。
𓁨𓁨𓁨ゼログラマーへ地獄からアドバイス𓀽𓀽𓀽
ゼログラミングはなにせまったく知らない分野で、己の知力とChatGPTの知力の限界まで使うことになるわけで、プログラミングに限らずあらゆるジャンルで、自然とChatGPTがどこまでできるかといった「勘」も養われる。コード生成は動くか動かないかのどちらかだけが勝負、すげえ回答もすげえ糞な回答もむき出しのまま出力精度を毎回毎回眼前に突き付けられているうちに、自然とAIの得意不得意が見えてくるのだ。
𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨
というわけで、次は「背景色を変えたら次になにしようかなあ」である。
いざwebツールを作ろうと思っても、ゼログラマーであるとそもそもプログラムで何ができるかがわからないのだから、なにも思い浮かばないかもしれない。その発想力を鍛えるには、さまざまなタスクを「定式化できるか」といった視点でとらえるのである。
つまりイオナズンの撃ち方がわかったところで、次回は「いつ、どこでイオナズンを使うか」という着眼点についてである。