ググっても、なかなか出てこなかったので、メモ代わりに共有。
はじめに
AIの進化はすさまじく、ChatGPTが登場してからというもの、プログラミングもAIが補助してくれるような時代になってきました。私もプログラミングの際にAIを使用しており、局所的に頭が良いな～と思う場面もあります。一方で私の環境では、バグだらけのプログラムを書くことも多々あり（プロンプトが悪いのか？）、大変困っています。
そんな中、最近では日本語プログラミング言語「なでしこ」でプログラムを作成しています。AIを使ってなでしこのコードを書かせた事例はあったものの、なでしこから、AIのAPIに対してリクエストを送る例は、ざっと検索したところ出てこなかった為、今回、コードを作ってみました。
APIの取得
今回はChatGPTを対象にコードを書いていきます。その前に、ChatGPTのAPIを利用するため、APIキーを取得する必要があります。APIキーを取得する方法は、以下の記事が詳しいです。
なでしこによるプログラミング
以下のコードをなでしこ3簡易エディタなど、なでしこを実行できる環境にコピペしましょう。その後、変数《APIキー》に先ほど取得したAPIキーを代入しましょう。
また、変数《本文》にChatGPTに質問したいことを代入しましょう。（下記のサンプルプログラムはプログラム内に直打ちしていますが、テキストエリア作成 などと組み合わせると、良いのではないかと思います）
《URL》=「https://api.openai.com/v1/responses」
《APIキー》=「sk-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX」
《本文》=「近畿地方に窓ガラスは何枚ありますか？フェルミ推定を用いて考えてください。」
《ヘッダー》は空辞書
《ヘッダー》@「Content-Type」に「application/json」を代入
《ヘッダー》@「Authorization」に「Bearer {《APIキー》}」を代入
《メッセージ》は空辞書
《メッセージ》@「type」に「input_text」を代入
《メッセージ》@「text」に《本文》を代入
《メッセージ配列》は空配列
《メッセージ配列》に《メッセージ》を配列追加
《インプット》は空辞書
《インプット》@「role」に「user」を代入
《インプット》@「content」に《メッセージ配列》を代入
《インプット配列》は空配列
《インプット配列》に《インプット》を配列追加
《ボディ》は空辞書
《ボディ》@「model」に「gpt-4.1」を代入
《ボディ》@「input」に《インプット配列》を代入
《ボディ》をJSONエンコードして《ボディ》に代入
《オプション》は空辞書
《オプション》@「method」に「POST」を代入
《オプション》@「headers」に《ヘッダー》を代入
《オプション》@「body」に《ボディ》を代入
《オプション》にAJAXオプション設定
《URL》からHTTP取得して、JSONデコードして《回答データ》に代入
《回答データ》@「output」@0@「content」@0@「text」を《回答》に代入
《回答》を改行で区切って反復
「｛対象｝」を表示
ここまで
適当に検索すると https://api.openai.com/v1/chat/completions に対してリクエストを送るサンプルプログラムがどっさり出てきますが、最近は、 https://api.openai.com/v1/responses に対してリクエストを送るのが良いみたいです。
さらに発展させた例
例えば、以下のようなコードを実行すると、図のようなチャットボットを実装することが出来ます。ここではsystem roleにChatGPTに対する指示を入力しています。より発展的にするならば、このサイトのサイトマップや概要等を参照の上、回答するように指示しても良いかと思います。
↑なでしこ3簡易エディタで実行した様子
《枠》=「div」のDOM部品作成
《枠》に{
「display」:「flex」,
「flex-direction」:「column」,
「position」:「fixed」,
「right」:0,
「bottom」:0,
「高さ」:「500px」,
「幅」:「300px」,
「背景色」:白色,
「ボーダー」:「1px black solid」
}をDOMスタイル一括設定
《枠》にDOM親要素設定
《会話》=「div」のDOM部品作成
《会話》に{「flex」:1, 「overflow」:「auto」｝をDOMスタイル一括設定
《入力欄》=「div」のDOM部品作成
《入力欄》の「text-align」に「center」をDOMスタイル設定
《入力欄》にDOM親要素設定
《エディタ》=空のエディタ作成
《エディタ》の「幅」に「200px」をDOMスタイル設定
「送信」のボタン作成して、それをクリックした時には
《URL》=「https://api.openai.com/v1/responses」
《APIキー》=「sk-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX」
《本文》=《エディタ》からテキスト取得
《エディタ》に「」をテキスト設定
「#ccc」で《本文》の会話文作成処理
《ヘッダー》は空辞書
《ヘッダー》@「Content-Type」に「application/json」を代入
《ヘッダー》@「Authorization」に「Bearer {《APIキー》}」を代入
《メッセージ》は空辞書
《メッセージ》@「type」に「input_text」を代入
《メッセージ》@「text」に《本文》を代入
《メッセージ配列》は空配列
《メッセージ配列》に《メッセージ》を配列追加
《システムプロンプト》は空辞書
《システムプロンプト》@「type」に「input_text」を代入
《システムプロンプト》@「text」に「あなたはあるサイトのお助けチャットボットです。ユーザーからの質問に150字以内で回答してください。」を代入
《システムプロンプト配列》は空配列
《システムプロンプト配列》に《システムプロンプト》を配列追加
《ユーザロール》は空辞書
《ユーザロール》@「role」に「user」を代入
《ユーザロール》@「content」に《メッセージ配列》を代入
《システムロール》は空辞書
《システムロール》@「role」に「system」を代入
《システムロール》@「content」に《システムプロンプト配列》を代入
《インプット配列》は空配列
《インプット配列》に《ユーザロール》を配列追加
《インプット配列》に《システムロール》を配列追加
《ボディ》は空辞書
《ボディ》@「model」に「gpt-4.1」を代入
《ボディ》@「input」に《インプット配列》を代入
《ボディ》をJSONエンコードして《ボディ》に代入
《オプション》は空辞書
《オプション》@「method」に「POST」を代入
《オプション》@「headers」に《ヘッダー》を代入
《オプション》@「body」に《ボディ》を代入
《オプション》にAJAXオプション設定
《URL》からHTTP取得して、JSONデコードして《回答データ》に代入
《回答データ》@「output」@0@「content」@0@「text」を《回答》に代入
《回答》=《回答》の改行を「<br>」に置き換え
「#84ffb6」で《回答》の会話文作成処理
ここまで
●(《色》で《文章》の)会話文作成処理とは
《会話》にDOM親要素設定
《自身のメッセージ》=「div」のDOM部品作成
《自身のメッセージ》に《文章》をテキスト設定
《自身のメッセージ》に{
「背景色」:《色》,
「margin」:「5px」,
「border-radius」:「5px」
}をDOMスタイル一括設定
ここまで
おわりに
このプログラムを使うと、例えば自身が管理するWebサイトなどに訪れたユーザ用の、高度なチャットボットを作成することが出来ます。以下のページを参考に、なでしこをWebページに埋め込んで使用すると面白いかと思われます。
ただしAPIキーをクライアントのプログラムに直打ちしているので、ローカル環境や認証が掛けてあり、仲間内しか見られないようなサーバに設置するのが良いでしょう。もしくは、cnakoやphpnakoに移植して、APIキーをサーバ側で管理できるようにすると良いでしょう。
間違ってもGitHub Pages等の公開サーバにAPIキーを書いたファイルをアップしないようにしましょう。
以上。