GPTs でJavaScriptマスターを作ってブックマークレットを改良した話
ChatGPTsを作って個人環境が改良できた
内容：実装されたGPTsを利用して、アシスタントを作成して、ついでに以前作ったgmailの要らないメールの仕分けスクリプトを改良してもらった。
対象者：google検索もプログラマに聞くのも苦手な人
参照元：https://note.com/cute_alpaca216/n/nf5092a1f1813
GPTsでアシスタントを作成してからスクリプトの改良まで
JavaScriptのコードマスターに必要な素養をChatGPTから聞きます。5分
GPTｓでJavaScriptのコードマスターアシスタントを作成します。5分
以前に作ったコードを改良してもらいます。10分
以上。かなり単純なコードで試しただけですがGPTsのアシスタントを作成するときに事前にChatGPT自身にどう作ればよいか聞いてみるのはよいアタックだったと思いました。
gmailの仕分けスクリプトを複数ユーザーに対応したい（漠然）
2023年の1月段階で、当時のChatGPT4さんに生成してもらったコードには1点不満がありました。
「複数ユーザーにログインしてるときにコードを走らせると意図しないユーザーで検索をしてしまうことがある問題。」
当時いろいろとChatGPT4さんに頑張って貰ったのですが解決手法が見つからずに諦めていました。
2023年11月に入ってGPT4さんの能力が大幅に向上したのと、GPTsというカスタマーアシスタントが作成できるようになったので、改めてチカラを借りて解決します。
ただGPTsって作成面倒じゃないですか？何が正しいのか不明だし。
ということで、まずはChatGPT4さん自身にアプローチ手法を聞いてみました。
①ChatGPT4先生にJavaScript師匠に必要な素養を聞き出す
課題解決の方向性はChatGPT4先生ご自身Googleに聞いてみます。
・GPTアシスタントでプログラム制作のマスターを作りたい。
・必要なInstructionを教えて欲しい。
・できるだけ高品質なコードを出力して、コードの細かな点までセルフデバッグしてくれるコードマスター
・専門範囲はjavascriptに特化してる。
こういうざっくり質問をしたところ、次の回答を得られました。
高品質なJavaScriptコードのポイントを説明するね。
まず、基本的なプログラミングの原則を理解することが大切だよ。
1. クリーンコード: コードは読みやすく、メンテナンスしやすいものにすること。変数や関数の名前は意味が分かりやすいものにしましょう。
2. DRY原則: "Don't Repeat Yourself" の略で、同じコードを繰り返さないようにすること。再利用可能な関数やモジュールを作って、コードの重複を避けましょう。
3. モジュール性と再利用性: コードを小さな部品（モジュール）に分けて、各部品を再利用できるようにすること。これにより、大きなプロジェクトでも管理しやすくなるわ。
4. エラー処理: プログラムで発生する可能性のあるエラーを適切に処理すること。try-catch文などを使って、エラーを予測し、対応しましょう。
さらに、JavaScriptには特有のベストプラクティスがある。ES6の機能を活用してコードを現代的かつ効率的に書くことや、非同期処理にはPromiseやasync/awaitを使うことだよ。
なるほど専門用語がたくさんあって良い感じのアシスタントになりそう！
他にも色んな素養が必要かもですが今回は深堀せずにこれで進めてみます。
Instructionsの書式は英語なのでChatGPT4先生に英訳してもらいつつ、GPTsの制作工程に進みます。
②Explore項目からページ遷移してCreate a GPTを選択する。
いよいよアシスタントを作ります。GPT Builderさんがどんなアシスタント作る？って聞いてくるので、
JavaScriptのコードを作成してデバッグするコードマスターを担当して欲しい。また次の要件をしっかりと守ってほしい。
1. Clean Code
Ensure that your code is readable and maintainable.
Use meaningful names for variables and functions to enhance readability.
Structure your code with proper indentation and spacing.
2. DRY Principle
Avoid repeating code. Create reusable functions and modules.
Identify patterns and abstract them into common functions.
Use functions and modules to encapsulate logic.
3. Modularity and Reusability
Break your code into small, manageable modules.
Make each module do one thing and do it well.
Ensure that modules are easily reusable in different parts of your application.
4. Error Handling
Implement robust error handling using try-catch blocks.
Anticipate possible errors and write code to handle them gracefully.
Provide meaningful error messages to aid in debugging.
5. Utilize ES6 Features for Efficiency
Use ES6 features like arrow functions, template literals, and destructuring for cleaner and more concise code.
Apply ES6 modules for better code organization and modularity.
Leverage let and const for block-scoped variable declarations.
6. Asynchronous Processing
Use Promises and async/await for handling asynchronous operations.
Avoid callback hell by structuring your asynchronous code with async/await.
Handle errors in asynchronous code with proper try-catch blocks.
Remember, these practices not only make your code more efficient and maintainable but also enhance collaboration with other developers.
という方針でブレイクダウンしていきます。他は名前とアイコンと口調と返答の方針について決めたらアシスタント制作完了です。ここまで10分程度。
名前はJS Debug Masterさんになりました。
③とりあえずアシスタントにコードを修正してみてもらう。
ここまできたらあとはGPTsさんにコードを修正して貰います。
・javascriptでgmail上のいくつかのメールを選択するスクリプトを構築していて、課題解決したい。
・ まずはコードを貼り付けるので確認をして欲しい。
--
javascript:(function(){ let str = window.getSelection().toString(); let newStr = str.replace(/\n/g, ' '); window.location.href='https://mail.google.com/mail/u/1/#search/'%20+%20newStr;%20})();
--
・コードを確認出来たら、ユーザーの課題解決の手伝いをしてくれるかな？
はいよろこんで。このJavaScriptコードはブックマークレットとして機能するようになっているね。その機能を簡単に説明すると、ブラウザ上で選択されたテキストを取得し、そのテキストを使ってGmailで検索を行うというものだ。
AIさんのポジティブな対応が大好きで、気分よく課題解決に向きあえます。
課題を説明するね。
・このコードは単一ユーザーにログインだと問題なく動作する。
・複数ユーザーにログインしている場合には問題が発生する。
例：ユーザーAとBにログインしている状態を思い浮かべて欲しい。
Aの選択テキストでスクリプトを走らせると、ユーザーBのメールを検索することがある。 逆にBの選択テキストでスクリプトを走らせると、Aのメールを検索してしまうこともある。しかもこの状態は一貫性がなく、あるときはAの選択テキストでAのメールを検索することもある。
・課題を解決するコードを生成してみてほしい。
1月の時点では、こういったざっくりした課題説明だとうまく本当の原因を出してくれない印象でしたが、今回はこれくらいの説明でも問題点を洗い出してくれるようになってました。
問題の根本は、スクリプトが常に特定のユーザー（この場合はURLの /u/1/ 部分で指定されているユーザー）のメールボックスで検索を行うことにある。これは、ブックマークレットが実行されているタブの現在のユーザーに基づいて動的にユーザーを切り替えることができないために起きる。
この問題を解決するためには、スクリプトが実行されている現在のタブのGmailアカウント（ユーザー）を動的に検出し、その情報を使って適切な検索URLを構築する必要がある。
ただし、ブラウザのセキュリティ制限により、現在のタブのURLを直接読み取ることはできない場合がある。そのため、この問題を解決するためには少し工夫が必要だ。
一つのアプローチとして、以下のような改良を加えることが考えられる：ユーザーが現在のタブでGmailアカウントを切り替えると、URLの /u/[数字]/ 部分が変わる。
この部分を正規表現などを使って抽出し、それを使って検索URLを生成する。
ただし、このアプローチはブックマークレットでは実装が難しいかもしれない。ブックマークレットは非常に基本的なJavaScriptの機能に限られており、より複雑な操作を行うにはブラウザ拡張機能などの別の方法を検討する必要がある。
根本原因と修正方針をしっかり示してくれるのでコードが分らないユーザーなのに仕組みが分かった気になれて良いです。解説によるとブックマークレットで実装する場合にはブラウザのセキュリティ制限があるっぽいのでURLをユーザーが指定する方式でコードを生成してみてもらいます。
ブックマークレット上でユーザーが指定する仕組みが実装できるのかは知らないのですが、聞くだけ来てみます。
ではユーザーが手動で自分のユーザー番号を入力する形式にしてコードを生成することってできる？
はいよろこんで。
ブックマークレットに直接現在のユーザーの情報を取得する機能を組み込むのは難しいので、ユーザーが手動で自分のユーザー番号を入力する形式に変更してみましょう。これにより、ユーザーは自分がアクセスしたいGmailアカウントの番号を指定できます。
やりました。ブックマークレット上でユーザーが指定する仕組みが実装できるそうです。これが最終的なコードです。
javascript:(function(){
let userNumber = prompt("Gmailのユーザー番号を入力してください (通常は 0, 1, 2, ...):", "0");
if (userNumber !== null) {
let str = window.getSelection().toString();
let newStr = "in:inbox " + str.replace(/\n/g, ' ') + " -in:drafts";
window.location.href = 'https://mail.google.com/mail/u/' + userNumber + '/#search/' + encodeURIComponent(newStr);
}
})();
（追記:2023/11/1518:30) 検索範囲を受信トレイに絞るように↑のコードを調整しました。
④ブックマークレットとgmailの下書きにリストを作成
とりあえず以前と同じように所定の配置にしてテストしましょう。
③のコードをブックマークレットとして登録
gmailの任意ユーザーの下書きに、メールのリストを入れる
{
ahoge@test.com
uhoge@example.co.jp
}試行する
出来たら試しにブックマークレットをクリックすると、ユーザー番号を指定するwindowが出ました。ユーザー番号を指定すると（gmailの下書きでリストした）選択した文字列が取得、置換されて検索されたことを確認できました。目標達成です。やった！
ここまで大体30分。
便利使いしているgmailの仕分けスクリプトが更に便利になって個人的に満足できる機能になりました。
相変わらずブックマークレットなのでブラウザさえあれば動きますし、良い実装になりました。
またChatGPT4先生とGPTsのアシスタント制作機能はかなり秀逸なアイディアと思いました。今までは新規スレッドの中で役割をいちいち指定する手間が大きかったし、あるいはカスタム指示機能はUIが深すぎて頻繁に切り替えるには適していませんでした。
今後は手軽に思いついた機能に絞ったアシスタントを生成して課題解決にあたれそうと思います。
この記事は以上です。
最後まで読んでいただきありがとうございました。
この記事が気に入ったらサポートをしてみませんか？