プログラミング

ChatGPT で名言アプリを作成

最終更新： 28/02/2025
1 分の読み

Node.js を使用して、ChatGPT を活用したアプリケーション「ألهمني（Alhamni）」を作成する方法について、以下の内容で完全かつ包括的な記事を書きます。

はじめに

近年、AI（人工知能）の進化は目覚ましく、その中でも OpenAI が提供する ChatGPT は、多くの開発者にとって強力なツールとなっています。この記事では、Node.js を使用して、「ألهمني（Alhamni）」というアプリケーションを開発する方法について説明します。このアプリケーションは、ユーザーに対して有益なテキストメッセージ、アドバイス、名言などを提供することを目的としています。

関連記事

「ألهمني」は、ユーザーがボタンを押すことで、AI が提供するテキストメッセージをランダムで表示するシンプルな構成にすることができます。このアプリケーションは、ChatGPT API を活用して、テキストコンテンツを生成します。

以下では、Node.js 環境の設定から、アプリケーションの実装までのステップを順を追って説明します。

必要なツール

アプリケーションを開発するために必要なツールは以下の通りです。

  • Node.js：サーバーサイドの JavaScript 実行環境
  • npm（Node Package Manager）：Node.js のパッケージ管理ツール
  • Express：Node.js の Web アプリケーションフレームワーク
  • OpenAI API キー：ChatGPT を利用するために必要な API キー
  • HTML と CSS：フロントエンドのインターフェースを作成するため

ステップ 1: Node.js 環境の設定

最初に、Node.js と npm をインストールします。公式サイトからダウンロードできます。

  1. Node.js ダウンロードページ から最新版をインストールします。
  2. インストール後、コマンドラインで以下を実行して、Node.js と npm が正しくインストールされたことを確認します。
bash
node -v
npm -v

これで、Node.js と npm が正常にインストールされていることが確認できるはずです。

ステップ 2: プロジェクトのセットアップ

次に、新しいプロジェクトを作成します。

  1. 任意のディレクトリで以下のコマンドを実行して、新しいディレクトリを作成します。
bash
mkdir alhamni-app
cd alhamni-app
  1. npm を使ってプロジェクトを初期化します。
bash
npm init -y

これで package.json ファイルが作成されます。

ステップ 3: 必要なパッケージのインストール

アプリケーションに必要なパッケージをインストールします。今回は、express と openai の2つのパッケージを使用します。

bash
npm install express openai

これにより、Node.js で Web サーバーを立てるための express と、OpenAI の API を利用するための openai パッケージがインストールされます。

ステップ 4: OpenAI API キーの取得

ChatGPT を使用するためには、OpenAI の API キーが必要です。以下の手順で取得できます。

  1. OpenAI の公式サイト にアクセスし、アカウントを作成します。
  2. API キーを取得するために、「API」セクションにアクセスし、新しいキーを発行します。

取得した API キーは後でコード内で使用するため、メモしておいてください。

ステップ 5: サーバーの設定

次に、express を使用してサーバーをセットアップし、API からテキストメッセージを取得するルートを作成します。

server.js という名前でファイルを作成し、以下の内容を記述します。

javascript
const express = require('express');
const { OpenAI } = require('openai');
const app = express();
const port = 3000;

// OpenAI APIキーの設定
const openai = new OpenAI({
  apiKey: 'YOUR_API_KEY_HERE', // ここに OpenAI API キーを入力
});

// ミドルウェア
app.use(express.static('public'));

// APIエンドポイント: ランダムな名言を取得
app.get('/get-quote', async (req, res) => {
  try {
    const completion = await openai.chat.completions.create({
      model: 'gpt-3.5-turbo',
      messages: [{ role: 'system', content: 'あなたは有益なアドバイスを提供するアシスタントです。' }],
    });
    const quote = completion.choices[0].message.content;
    res.json({ quote });
  } catch (error) {
    console.error(error);
    res.status(500).send('エラーが発生しました');
  }
});

// サーバーの起動
app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

上記のコードでは、/get-quote というエンドポイントを作成しています。このエンドポイントにアクセスすると、ChatGPT を使って生成した名言を返します。

ステップ 6: フロントエンドの作成

次に、シンプルなフロントエンドを作成します。public フォルダを作成し、その中に index.html を作成します。

index.html の内容は以下のようになります。

html
html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ألهمنيtitle>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin-top: 50px;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }
    .quote {
      margin-top: 20px;
      font-size: 20px;
      font-weight: bold;
    }
  style>
head>
<body>
  <h1>ألهمنيh1>
  <button onclick="getQuote()">新しい名言を表示button>
  <div class="quote" id="quote">div>

  <script>
    async function getQuote() {
      const response = await fetch('/get-quote');
      const data = await response.json();
      document.getElementById('quote').textContent = data.quote;
    }
  script>
body>
html>

この HTML ページでは、ボタンをクリックすると ChatGPT が返す名言が表示されます。

ステップ 7: サーバーの起動

すべての設定が完了したら、以下のコマンドでサーバーを起動します。

bash
node server.js

これで、ブラウザで http://localhost:3000 にアクセスすることができ、ボタンをクリックするとランダムな名言が表示されます。

まとめ

この記事では、Node.js と Express を使って「ألهمني」というアプリケーションを開発しました。このアプリケーションは、ChatGPT を利用してユーザーに有益なアドバイスや名言を提供します。さらに、シンプルなフロントエンドを作成し、ボタンをクリックすることでランダムな名言が表示される仕組みを作成しました。

このようなアプリケーションは、ユーザーにインスピレーションを与えるための有力なツールとなり、AI を使って有益なコンテンツを提供する方法を学ぶ良い機会となるでしょう。

最終更新： 28/02/2025
1 分の読み
Back to top button