実践編①：ChatGPTを使ったチャットアプリ開発

前回の導入編では、AIを活用したスマホアプリ開発の全体像を紹介しました。
今回はその第一歩として、ChatGPT APIを活用したシンプルなチャットアプリ開発を実践してみましょう。

スマホで動く「AIアシスタントアプリ」を自分の手で作れるようになると、
学習効率化、情報検索、アイデア生成など、日常的に役立つアプリをすぐに作れるようになります。

1. 開発の全体フロー
2. ChatGPT APIの基本構造
3. Flutterでの実装例
4. 改良ポイント
5. まとめ

1. 開発の全体フロー

ChatGPTを使ったチャットアプリは、以下の流れで構築できます。

開発環境の選択
- iOSならSwift、AndroidならKotlin、両対応なら Flutter や React Native
OpenAI APIの利用準備
- APIキーを取得（OpenAI公式サイト）
基本UIの作成
- 入力欄（ユーザーの質問）
- 出力欄（AIの回答表示）
API通信の実装
- ユーザーの入力をAPIに送信し、返答を受け取って表示
会話履歴管理の追加（任意）
- 過去の会話を保持して文脈を理解させる

2. ChatGPT APIの基本構造

ChatGPT APIを呼び出すときの基本リクエストは以下のようになります。

POST https://api.openai.com/v1/chat/completions
Headers:
  Authorization: Bearer YOUR_API_KEY
  Content-Type: application/json

Body:
{
  "model": "gpt-4o-mini",
  "messages": [
    {"role": "system", "content": "You are a helpful assistant."},
    {"role": "user", "content": "こんにちは！自己紹介して。"}
  ]
}

レスポンスとして、AIからの返答テキストが返ってきます。
スマホアプリでは、この処理をコードで実装し、UIに反映させます。

3. Flutterでの実装例

ここでは、クロスプラットフォームで使える**Flutter（Dart）**を例にします。

① パッケージ準備

http パッケージを利用してAPIと通信します。

dependencies:
  flutter:
    sdk: flutter
  http: ^1.0.0

② API呼び出し関数

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<String> getChatGPTResponse(String message) async {
  const apiKey = "YOUR_API_KEY";
  const url = "https://api.openai.com/v1/chat/completions";

  final response = await http.post(
    Uri.parse(url),
    headers: {
      "Content-Type": "application/json",
      "Authorization": "Bearer $apiKey",
    },
    body: json.encode({
      "model": "gpt-4o-mini",
      "messages": [
        {"role": "system", "content": "You are a helpful assistant."},
        {"role": "user", "content": message}
      ]
    }),
  );

  if (response.statusCode == 200) {
    final data = json.decode(response.body);
    return data["choices"][0]["message"]["content"];
  } else {
    throw Exception("API呼び出しに失敗しました: ${response.body}");
  }
}

③ UI部分（シンプルなチャット画面）

import 'package:flutter/material.dart';

class ChatPage extends StatefulWidget {
  @override
  _ChatPageState createState() => _ChatPageState();
}

class _ChatPageState extends State<ChatPage> {
  final TextEditingController _controller = TextEditingController();
  String _response = "";

  void _sendMessage() async {
    final userMessage = _controller.text;
    final reply = await getChatGPTResponse(userMessage);
    setState(() {
      _response = reply;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("ChatGPTチャットアプリ")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(controller: _controller),
            SizedBox(height: 10),
            ElevatedButton(onPressed: _sendMessage, child: Text("送信")),
            SizedBox(height: 20),
            Text("AIの返答: $_response"),
          ],
        ),
      ),
    );
  }
}