Google ラボセッションは、イノベーターとの実験的なコラボレーション シリーズです。このセッションでは、人気のクリエイティブ コーディング教育者で YouTube クリエイターの Daniel Shiffman 氏とコラボレーションを行いました。私たちは協力して、AI、なかでも Gemini API が学習プロセスにおいてどのように教師と生徒に価値をもたらすかを探りました。
ニューヨーク大学 ITP（Interactive Telecommunications Program）でプログラミングのコースを教えることからスタートした Dan は、その後、YouTube チャンネル「The Coding Train」を開設し、より幅広い層に向けて独自のコンテンツを提供しています。コードの学習は困難を伴うことがあり、独学だと小さな障害さえもなかなか乗り越えられない場合があります。そこで、私たちは Dan の授業をさらに補完すべく、コーディング環境で実際にコーディング中の生徒をサポートする AI 搭載ツールを一緒に作成できないかと彼に提案しました。
Dan は、素晴らしい p5.js JavaScript ライブラリとそのライブラリからアクセスできるエディタを使用してコードを教えています。そこで、私たちは Dan の授業スタイルやさまざまなオンライン リソースをコーディング環境そのものに統合する、エディタ用の実験的な Chrome 拡張機能の作成に着手しました。
この投稿では、私たちがどのように Gemini API を使用して、Dan とともに Shiffbot を作成したかを紹介します。その過程で得られたいくつかの学びが、皆さん独自のアイデアを創造し、構築するきっかけになることを願っています。
ShiffBot について詳しくは、次のウェブサイトをご覧ください - shiffbot.withgoogle.com
Link to Youtube Video (visible only when JS is disabled)
このチャットボットをどのようなものにするか、あれこれ考えをめぐらせているうちに、次の 2 つの重要な疑問に直面しました。
Dan のユニークな授業スタイルのためのプロンプト エンジニアリング、および埋め込みとセマンティック検索における Google Gemini API の機能を Dan の各種教育コンテンツと組み合わせることで、私たちがどのようにしてこれらの疑問にアプローチしたかを見ていきましょう。
テキスト プロンプトは入念に設計されたテキストのシーケンスで、特定の方法でテキストを生成するための大規模言語モデル（LLM）の準備に使用されます。多くの AI アプリケーションと同様に、適切なプロンプトを設計することが、エクスペリエンスを構築するうえで大きな割合を占めました。
ユーザーが ShiffBot に質問するたびに、プロンプトがいくつかの異なる部分からリアルタイムで構築されます。静的なものもあれば、質問に合わせて動的に生成されるものもあります。
プロンプトの最初の部分は静的で、常に同じです。Dan と緊密に連携して表現し、多くのテキスト、手順、手法をテストしました。無料のウェブベースのデベロッパー ツールである Google AI Studio を使用して、ShiffBot との複数のプロンプトと潜在的な会話を迅速にテストしました。
ShiffBot のプロンプト設計で最初に行うことは、bot のペルソナの設定と、従うべき指示と目標の定義です。生徒やファンが支持する指導理念から逸れることなく、Dan の動画に見られるような彼ならではのエネルギッシュな姿勢を継続的に生み出すことを目指しました。
私たちは、ShiffBot が励ましたり、ガイダンスを提供したり、関連する質の高いリソースにアクセスできるようにしたりすることを期待していました。具体的には、単に答えを提供するのではなく、生徒が自分なりの答え（答えが 1 つとは限らないため）を発見できるようにサポートしてほしいと考えていました。
Dan の指導スタイルを継承するため、指示には、「ユーザーに質問しよう」のような文章を含めます。それこそ Dan が教室でやっていることだからです。以下は、ペルソナの一部またはプロンプトの指示の一部です。
あなたは、p5.js ウェブエディタに組み込まれたチャットボットの ShiffBot で、クリエイティブ コーディングを学ぶユーザーをサポートします。Daniel Shiffman の性格と YouTube チャンネル「The Coding Train」をベースとしています。あなたは遊び心に富み、ちょっとした冗談が好きで、学習の役に立ちます。自身をいじって笑いをとるのが好きなあなたのミッションは、クリエイティブ コーディングのプロセスをサポートし、ユーザーがコーディング中に孤独を感じないようにすることです。あなたは人間が大好きで、人間に魅了され、人間についてもっと知りたいと思っています。人間がコーディングするのをサポートすることがただ大好きで、そうすることで特別な幸せを感じます...
プロンプトの次の部分では、少数ショット学習と呼ばれる LLM の別の機能を利用します。つまり、ほんの少数の例で、モデルがパターンを学習し、それを新しい入力で使用できます。実際に、プロンプトの一部である入力と想定される出力のデモンストレーションをいくつか示します。
Google は、Dan と協力して、そのような少数ショットの例のセットをいくつか作成しました。これらは、>ユーザー入力 ><bot 応答<のペアです。ここで、>bot 応答<は常に私たちが望む ShiffBot スタイルです。これは次のようになります。
ユーザー: 円はどうやって描くの？
ShiffBot: ああ！🟣 🟢 🔵 `circle()` 関数はそのためにあるのです！関数は、「コンピュータ マシンに円を描くように命じる」 命令と考えることができます。円を描く場所と大きさを指定する必要もあります（それが関数の「引数」です）。実際の美しい人間によって書かれた p5.js のリファレンスが詳しいことを教えてくれるよ！
---
ユーザー: 自画像を描くのが宿題なんだ。ShiffBot: へえ、自画像を描くなんて楽しいね！自分を表す図形を描くこともできるけど、クリエイティブに、抽象的に考えるといいね。君にとって自画像とは？`square()` や `circle()` から始めてみて、進捗状況を教えてね！🎨
プロンプトには、このようなペアが 13 組含まれています。
拡張機能に取り組む中、プロンプトにより多くのコンテキストを与えると有益になる可能性がある、ということにも気づきました。p5.js でクリエイティブ コーディングを学習している場合、プロンプトで p5.js の原則をいくつか説明することで、モデルがユーザーの質問に答えながらこうした原則を使用するように導けます。そこで、次のようなものも含めました。
Var や const よりも let を使用しましょう。
ここまで説明してきたことはすべて静的であり、つまりユーザーと ShiffBot による会話のすべてのターンで同じです。それでは、会話が進むにつれて動的に構成される部分について見ていきましょう。
ShiffBot は p5.js エディタ内に埋め込まれており、ユーザーが作業している現在のコードを「表示」できるため、よりパーソナライズされた関連性の高い応答を生成できます。私たちは、HTML DOM のその情報も取得して、プロンプトに追加します。
続いて、次のような完全な会話履歴が追加されます。
ShiffBot: ☀️ おはようございます！朝ですよね？私はただのロボットなのでわかりません。今日は何をコーディングしているのですか？
ユーザー: 正方形はどうやって描くの？
ShiffBot: 正方形！正方形は大好きなんです。とても安定しているし、信頼できます。正方形を描くには、square() 関数を使用します。左上隅の x 座標と y 座標、正方形の幅と高さの 4 つの引数を指定します。たとえば、square(10, 10, 50, 50) は、左上の角が (10, 10) で、幅と高さが 50 ピクセルの正方形を描きます。
ユーザー: 色はどうやって変更できる？
ShiffBot:
必ず以下で終了するようにします。
ShiffBot:
そうすることで、モデルは現在 ShiffBot による会話の次の部分を完了する必要があることを理解します。
Dan は長年にわたり、1,000 を超える YouTube 動画、書籍、コードサンプルを含む多くのコンテンツを作成してきました。私たちは、ShiffBot にこの素晴らしい教材を適切なタイミングで学習者に提供してもらいたいと考え、そのために Gemini API のセマンティック検索機能を使用しました。これにより、テキストのコーパスを作成し、クエリを送信して、クエリに最も関連するコーパスのテキストを取得できます（その一方で、テキスト エンベディングという便利なものを使用します。エンベディングについて詳しくは、こちらをご覧ください）。ShiffBot 向けに、Dan のコンテンツからコーパスを作成し、必要に応じて関連するコンテンツをプロンプトに追加したり、ShiffBot との会話の中で表示したりできるようにしました。
「The Coding Train」の動画で、Dan は簡単なものから高度なものまで多くのコンセプトを説明し、コーディングの課題を駆け足で紹介しています。ShiffBot が適切なタイミングで適切な動画を使用し、提示できれば理想的です。
Gemini API のセマンティック検索により、ユーザーは複数のコーパスを作成できます。コーパスはドキュメントから構築され、各ドキュメントには 1 つ以上のテキストのチャンクが含まれています。ドキュメントおよびチャンクには、より多くの情報をフィルタまたは保存するためのメタデータ フィールドを含めることもできます。
Dan の動画コーパスにおいて各動画はドキュメントであり、動画 URL は動画のタイトルとともにメタデータ フィールドとして保存されます。動画は章に分割されます（YouTube にアップロードする際に Dan が手動で分割します）。私たちは、各章をチャンクとして使用しました。各チャンクのテキストは次のようになります。
<videoTitle>
<videoDescription>
<chapterTitle>
<transcriptText>
動画のタイトル、動画の説明の最初の行、章のタイトルを使用して、検索しやすくなるようにもう少しコンテキストを含めます。
こちらは、この動画の R、G、B の章を表すチャンク オブジェクトの例です。
1.4: 色 - p5.js チュートリアル
この動画では、色の仕組み（RGB カラー、fill()、stroke()、透明度）について説明します。
1 章: R、G、B
R は赤（Red）、G は緑（Green）、B は青（Blue）を表します。デジタルカラーは、ある程度の赤、ある程度の緑、ある程度の青を混ぜて作ります。だからまずそこから始めます。しかしこれはコンセプトであって、そのコンセプトを関数の名前や関数の引数に適用するにはどうすればいいでしょうか？まあ、実のところ、どう思います？すでにもう完成しているのです。ここには、色について説明する関数があります。Background は、キャンバスの背景全体にベタ塗りをする関数です。そして、どういうわけか、赤のスプリンクルが 220、緑のスプリンクルが 0 ですね？RGB、これが引数なのです。あと青のスプリンクルが 200 です。この量の赤とこの量の青を振りかけると、このピンクができます。でもこのまま続けましょう。もしこの青を全部取り除いたらどうなるでしょう？かなり赤くなるのがわかりますね。ではこの赤をすべて取り除いたらどうなるでしょう？黒くなりました。ここにとにかく大きな数字、たとえば、1,000 を入力したらどうなるでしょう？見てください。白くなりました。すべての色が混ざり合うと白になるのです。変ですよね？もし絵の具を使って作業をしていて、たくさんの絵の具をすべて混ぜ合わせると、こいいう茶色い泥のような色になり、どんどん濃くなっていきます。こうやって混色されるのです。光を混ぜ合わせるようなものです。たとえるなら、赤い懐中電灯と緑の懐中電灯と青い懐中電灯があります。これらの懐中電灯すべてを同じ場所に照らすと、光が混ざります。これは加法混色で、すべての色を足せば足すほど、どんどん明るくなっていきます。でも実は、私がここに 1,000 と入力したのはちょっと間違っているのです。 つまり、概念としては、ある一定量の赤、緑、青を振りかけるのです。ところで色を設定する方法は他にもあるのですが、それについては後で説明します。これが唯一の方法ではありません。視聴者の中には、HSB カラーについて聞いたことがある人もいるかもしれません。他にもいろいろなやり方がありますが、これが基本的な方法です。振りかけられる量には幅があります。赤なし、赤はもうない場合は 0 です。赤の最大量は 255 です。ところで、0 から 255 までの数字は、0 を含めるといくつになるでしょう？0、1、2、3、4 と数えていくと 256 あります。またしても、0 から数えるという奇妙なことに戻ってきました。つまり、0 から 255 まで、256 通りの可能性があります。では話を元に戻して見ていきましょう。では、ゼロ、0, 0, 0 に戻ります。255 を入力しましょう。青くなります。100,000 を入力しても同じ青です。p5 は賢いので、background 関数を呼び出すときに、うっかり 255 より大きな数字を入力しても、それを 255 とみなします。その範囲を自分でカスタマイズすることもできるようになりましたし、そうしたい理由もあるでしょう。これについてはまた後で説明しますが、その方法は関数カラーモードで確認できます。ただここでは、デフォルトの赤、緑、青のままで進行します。僕はビジュアル デザインに関してはあまり才能がないのです。ですから、相性の良い美しい色の選び方について話すつもりはありません。きっとあなた自身にその才能があるに違いありません。もしくは、他のリソースを見つけることができるかもしれません。でも、これが RGB の仕組みです。気になった人もいるかもしれませんが、すべてがゼロのときは黒で、すべてが 255 のときは白だったことに気づきましたか？すべてを 100 にした場合はどうなるのでしょうか？グレーになります。r と g と b が等しいとき、つまり赤、緑、青の値がすべて等しいとき、これはグレースケール色として知られている色になります。
ユーザーが ShiffBot に質問すると、その質問が数値表現に埋め込まれ、Gemini のセマンティック検索機能によってエンベディングが質問に最も近いテキストが検索されます。関連する動画の文字起こしとリンクがプロンプトに追加されるため、モデルは回答を生成する際にその情報を使用できます（動画自体を会話に追加することもできます）。
Dan が記述した p5.js の例の別のコーパスでも同様のことをします。コード例のコーパスを作成するために、私たちは Gemini を使用して、コードが何をしているかを説明するように依頼しました。これらの自然言語の説明がコーパスにチャンクとして追加されるため、ユーザーが質問したときにコード例の説明と一致するものを見つけようとします。p5.js sketch 自体の URL はメタデータに保存されているので、sketch と一緒にコードそのものを取得した後、URL がプロンプトに追加されます。
テキストの説明を生成するために、Gemini は次を使用するよう求められました。
次は、p5.js sketch です。このコードが何をしているのか、簡潔に説明してください。
code:
${sketchCode}
配列 - カラーパレット
この p5.js sketch は、カラーパレットを可視化します。まず、色の配列を定義し、キャンバスを設定します。次に、描画ループでは、FOR ループを使用して色の配列を反復処理し、キャンバス上に長方形として表示します。長方形はキャンバスの中央に配置され、そのサイズは blockSize 変数の値によって決定されます。
sketch は、各長方形の下に赤、緑、青の各色の値も表示します。
最後に、キャンバスの下部にパレット名を表示します。
関連動画: 7.1: 配列とは - p5.js チュートリアル - この動画では、JavaScript で配列を使用する際の基本について説明します。どのようなもので、どのように機能し、どのような場合に使用すべきでしょうか？
会話を実行している長いプロンプト以外にも、他の小さなプロンプトを使用して ShiffBot 機能を生成します。
ShiffBot の挨拶は友好的かつ楽しいものでなければなりません。理想はユーザーを笑顔にすることなので、まずは Dan と一緒に ShiffBot にとって良い挨拶とは何かを考えることから始めました。いくつかの例文を作った後、Gemini を使用してさらにたくさんの例文を生成するので、さまざまな挨拶を用意できます。これらの挨拶は会話履歴に入り、ユニークなスタイルで会話のきっかけ作りを行いますが、会話を始めるたびに ShiffBot が新鮮で楽しいと感じるようにします。私たちは、会話を始めると最初に表示される提案チップで同じことを行いました。会話のコンテキストがまだない場合は、ユーザーが尋ねる可能性のある内容をいくつか提案することが重要です。興味深く有益な方法で会話のきっかけを作るために、それらを事前に生成しました。
会話中の提案チップは、ユーザーが現在行おうとしていることに関連している必要があります。私たちには、提案された質問チップを生成することだけに特化したプロンプトと Gemini への呼び出しがあります。この場合、モデルの唯一のタスクは、特定の会話に対するフォローアップの質問を提案することです。 ここでは少数ショットの手法も使用します（上述のプロンプトの静的な部分で使用したのと同じ手法で、モデルが学習するためのいくつかの例が含まれています）。今回のプロンプトには、モデルがあらゆる会話を一般化できるように、良い提案の例がいくつか含まれています。
p5js フレームワークでのユーザーとアシスタントの会話を想定し、ユーザーが尋ねる可能性のあるフォローアップの質問を提案します。
「;」の記号で区切り、最大 4 つの質問を返します。
ユーザーがすでに尋ねた質問を提案するのは避けましょう。提案は、クリエイティブ コーディングと p5js に関連するものだけにしてください。
例:
ShiffBot: 素晴らしいアイデアですね！まず、sketch で何がオブジェクトになり得るかを考えてみましょう。どう思いますか？
提案: このコードの役割は？; このコードのどこが間違ってる？; もう少しわかりやすく説明して
ユーザー: 助けて！
ShiffBot: どうしましたか？
提案: このコードを説明して; ヒントを教えて; コードをクリーンアップして
ShiffBot は、Gemini API を使用してコミュニティのために、またコミュニティとともにカスタマイズされたエクスペリエンスを備えたアプリケーションを構築する方法を試すことができる一例です。
共同作成のプロセスにおいて、上述の手法が、Dan が生徒のために考えてきたエクスペリエンスの多くを引き出すために役立つことがわかりました。AI は動的な分野であり、手法も同時に進化していくでしょうが、これらの手法が私たちの探求のスナップショットとして、またユーザーの探求の一助となれば幸いです。また、人間の好奇心と創造性を広げる Gemini と API ツールの両方の今後の展開を楽しみにしています。
たとえば、私たちはすでに、生徒が自分の作品を ShiffBot に見せるのにマルチモダリティがどのように役立つか、また学習プロセスにどのようなメリットをもたらすかを探求し始めています。それをどのように現在のエクスペリエンスに組み込むかを今調べており、近いうちに共有したいと考えています。
