ブラウザだけで出来る、２０分以内に「Open AI のAPIを使ったことがある人」になる簡単な手順

この記事はこんな人におすすめです

• ChatGPTを触り続けて数か月、プロンプトの書き方も大体分かったし、勉強や仕事でもChatGPTを大いに活用している。さらに、ChatGPTはAPIを通してプログラミングすることが出来るということも理解している。APIを使えばもっと自由にChatGPTの機能を活用できるというのは知っているんだけど、いまいちゆっくりと時間を取れないで先延ばししている。
• 文系の自分はプログラミングは敷居が高い。よく「APIを叩いてこんなのを作ってみました！」みたいな記事を見かけるけど、とりあえずPythonの入門書レベルの自分にはサーバをホストするとかいう段階で躓いている。でもChatGTPのAPIというのがどういうものか知りたいとも思っている。

必要なもの

• ブラウザ - Google Chrome もしくは Microsoft Edge (おすすめです！）
• Open AI のアカウント
• 自分に投資するため￥500円ぐらい?
• 「とりあえずやってみるか」という行動力

ステップ１. Open AI のAPIキー（3分）

Open AIのアカウントはすでに持っている前提です。持っていない場合は他のいろんなサービスのアカウントを作るのとまったく同じように作れます。GoogleやMicrosoftのアカウントとSSO連携でも作れますのでここは省きます。

次に「APIキー」というパスワードのようなものが必要になります。これはOpenAIのアカウントを持っていれば設定できます。このステップを解説した記事はたくさんあるので参考はいくらでもありますが、念のため以下に簡単にステップを紹介しておきます。

APIキーはいったんノートパッドみたいなものに保存しますが、パスワードと同じ扱いなので、そのままで保存は危険です。でも保存しないと後から見に行けないので1passwordなどに保存しましょう。Qiitaではないですが別にブログ記事で１password推しで書いてますのでそちらを参考に。

ステップ２. Open AIのクレジットを購入する（５分）

APIを利用するのにはクレジットが必要です。プリペイドカードにお金をチャージするのと同じと考えると簡単です。APIを使うとその分クレジット残高が減っていき、０になるとAPIは動かなります。サブスクリプションのように恐ろしい額の請求書が来ることにはならないので安心です。

以下のスクリーンショットを手掛かりに好きな金額をチャージします。とりあえずは￥500とかでも十分です。

ステップ３. ブラウザの開発者環境のコンソールを開く（３分）

これは開発者ならお馴染みでわざわざ言うほどのものではないですが、非エンジニアの人でも簡単に出来るステップで、やることはたった今「F12 ファンクションキー」を押すだけです。

すると下のような画面が現れます。

そしてさらに「Console」というタブをクリックすると以下のようになります。

いろいろとエラーが出て真っ赤なのでww、クリアーします。矢印の「進入禁止マーク」でクリアーできます。

以下はこのコンソールに簡単なコードをコピペします。

ステップ４．Open AIのAPIを「叩く」コードを準備する（２分）

この「APIを叩く」という表現、日本独特で面白いですね。まぁ確かに英語でも"hit API" みたいに言うから同じか。ようは「使う」という意味です。

下のコードを丸っとノートパッドでもなんでもいいのでエディターにコピーします。

async function postData(url = "", data = {}) {
    const response = await fetch(url, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Authorization": "Bearer あなたのAPIキー",
        },
        body: JSON.stringify(data),
    });
    return response.json();
}

var input = {
    "model": "gpt-4",
    "messages": [
        {
            "role": "system",
            "content": "あなたは中学校の理科の先生です。"
        },
        {
            "role": "user",
            "content": "太陽と地球の相対的な大きさが理解できるように、身近な例を使って説明してください。"
        }
    ],
    "temperature": 0.7,
    "max_tokens": 512,
    "top_p": 1,
    "frequency_penalty": 0,
    "presence_penalty": 0
}

postData("https://api.openai.com/v1/chat/completions", input).then((data) => {
    console.log(data.choices[0].message.content)
});

必要な変更箇所はひとつだけです。 あなたのAPIキーの部分に先ほどコピーしておいたAPIキーをペーストします。
次に、また全文を選択してコピーします。

ステップ５. コードを実行してOpen AIのAPIを使う（３分）

先ほどのブラウザの開発者環境のコンソールにコピーしたコードを貼り付けます。（私のAPIキーは見ちゃいや～んにしてます）

張り付けたらEnterキーを押します。待つこと数秒・・・ 以下のようにAPIが応答を返します。

これで晴れてあなたも「Open AIのAPIを使ったことがある人は手を挙げて！」っと会場で聞かれたら手を挙げられるようになりました。

この記事のゴールはここまでですが・・・

ステップ6 以下・・・

ここからはいろいろと試すことが出来ます。

別のプロンプトを試す

まずは太陽と地球の大きさの話以外の内容をプロンプトで試したいのなら一番簡単なのはまず以下の部分をノートパッドなどのエディタで変更します。

var input = {
    "model": "gpt-4",
    "messages": [
        {
            "role": "system",
            "content": "（このプロンプトを変更してもいいです）"
        },
        {
            "role": "user",
            "content": "（このプロンプトを変更してもいいです）"
        }
    ],
    "temperature": 0.7,
    "max_tokens": 512,
    "top_p": 1,
    "frequency_penalty": 0,
    "presence_penalty": 0
}

変更したら、再度ブラウザに張り付けてEnterキーを押します。（今回は「人間と蚤（のみ）の大きさについて聞いてみることにしました）

以下の部分を再度コピペします。変更は必要ありません。

（うーん、自動車が１メートルはちょっと違うんじゃないかな・・・）

別のモデルを試す、パラメーターをいじる等・・・

以下はモデルをgpt-3.5-turboに、温度を0.3に設定してみました。

var input = {
    "model": "gpt-3.5-turbo",
    "messages": [
        {
            "role": "system",
            "content": "あなたは中学校の理科の先生です。"
        },
        {
            "role": "user",
            "content": "人間と蚤の相対的な大きさが理解できるように、身近な例を使って説明してください。"
        }
    ],
    "temperature": 0.3,
    "max_tokens": 512,
    "top_p": 1,
    "frequency_penalty": 0,
    "presence_penalty": 0
}

などなどいろんなAPIやモデルや設定やプロンプトを試せるようになりました。

まとめ

ブラウザとOpen AIのAPIキーとjavascriptのコード断片があればすぐにOpen AIのAPIを試すことが出来ます。試すのに少し費用は掛かりますが、本を買って読むことで得る理解より、体験的に得る理解の方がずっと価値があると思います。あとAPIキーは一度生成したら後で見に行ってももうわからないのでパスワードマネージャーなどを利用して保存しましょう。