近年、AIの急速な発展により、私たちの生活のあらゆる面でAIが活用されるようになってきました。特に、OpenAIが開発したChatGPTは、その驚くべき対話能力で世界中の注目を集めています。プログラミングに興味をお持ちの方なら、一度はChatGPTを使ってアプリを作ってみたいと思ったことがあるのではないでしょうか。

本記事では、SwiftとChatGPT APIを使って、共感型のカウンセリングアプリを作成する方法を紹介します。プログラミング初心者の方でも、ステップバイステップで丁寧に解説するので、安心して取り組んでいただけます。この記事を通して、ChatGPTの可能性を実感し、生成AIアプリ開発の第一歩を踏み出すことができるでしょう。

ChatGPTに興味を持っている読者の皆さまにとって、この記事は初めての生成AIアプリ開発の経験になるはずです。LINE風のユーザーインターフェースを持つカウンセリングアプリを通して、ChatGPTのAPIを活用する方法を学べます。さらに、iPhoneのTTS（テキスト読み上げ）機能を組み合わせることで、ユーザーに寄り添う温かみのあるアプリに仕上げます。

プログラミングに興味はあるものの、まだ一歩を踏み出せないでいる方も多いかもしれません。しかし、新しいことにチャレンジする勇気を持つことが、成長につながります。私たちは、一緒にこの素晴らしいアプリ開発の旅に出かけましょう。今こそ、その一歩を踏み出すときです。

本記事を読み進めていく中で、Swiftプログラミングの基礎からChatGPT APIの活用まで、幅広い知識を得ることができます。この経験は、今後のアプリ開発の土台になるでしょう。そして、自分の手でカウンセリングアプリを作り上げたときの達成感は、プログラミングの楽しさと可能性を実感する瞬間となるはずです。

これから作るアプリのイメージをこちらです。

記事概要

本記事は、プログラミング初心者向けに、SwiftとChatGPT APIを使った共感型カウンセリングアプリの作成方法を解説します。記事は3部構成になっており、各部で以下の内容を扱います。

第1部では、iPhoneアプリ開発の基礎を学びます。Xcodeの概要や新規プロジェクトの作成方法を説明した後、SwiftUIを使ったユーザーインターフェースの作成方法を解説します。また、シミュレーターを使ったコードのデバッグ方法も紹介します。

第2部では、ChatGPT APIとの連携方法を説明します。APIの概念を簡単に説明した後、OpenAIアカウントの作成とAPIキーの取得方法を解説します。次に、ChatGPTとの連携を管理するクラスと、実際の連携を実装する方法を示します。これにより、AIカウンセラーとしての機能を実現します。

第3部では、カウンセリング結果を読み上げる機能の実装方法を説明します。iOSのTTS（Text-to-Speech）機能を活用し、テキストを音声に変換して読み上げます。TTSを管理するクラスの作成方法と、レスポンスを読み上げる方法を解説します。

本記事を通して、プログラミング初心者の方でもSwiftとChatGPT APIを使ったiPhoneアプリ開発の一連の流れを理解することができます。共感型カウンセリングアプリの作成を通して、生成AIの活用方法やアプリ開発の基礎を学ぶことができるでしょう。

第1部　iPhoneアプリ開発を開始する

iPhoneアプリ開発の世界へようこそ！このセクションでは、Appleが提供する統合開発環境（IDE）であるXcodeを使って、iPhoneアプリ開発の第一歩を踏み出します。

プログラミング初心者の方にとって、新しいツールや概念の習得は大変そうに感じるかもしれません。しかし、心配はいりません。本記事では、Xcodeの基本的な使い方から、SwiftUIを使ったユーザーインターフェースの作成、シミュレーターでのデバッグまで、丁寧に解説していきます。

Xcodeについて

まずは、Xcodeの概要から始めましょう。Xcodeは、Appleが開発したiPhone、iPad、Mac、Apple Watch、Apple TVなどのアプリを作成するための強力なツールです。Xcodeには、コードの編集、デバッグ、GUIデザインツール、そしてアプリケーションのビルドや配布を行うための多様なツールが含まれています。

次に、Xcodeの基本的な使い方を説明します。

Xcodeを起動する

Xcodeを起動するには、まずMac上にインストールされていることを確認してください。インストールがまだの場合は、App Storeから無料でダウンロードしてインストールできます。本稿執筆時の最新バージョンである15.2を使って、以下の説明を続けます。インストール後、LaunchpadやApplicationsフォルダからXcodeアイコンをクリックすることで、アプリケーションを起動します。初回起動時には、いくつかの追加コンポーネントをインストールする必要があるため、指示に従ってセットアップを完了させてください。

Xcodeを使用してアプリの開発とデバッグを行うことは無料で可能です。これには実機でのテストも含まれます。ただし、アプリをApp Storeに公開する場合は、Apple Developer Programへの登録が必要となります。このプログラムの費用は年間99ドルです。本稿では、費用をかけずに行える開発プロセスに焦点を当てています。

次に、新規プロジェクトを作成し、開発を開始する方法を説明します。

新規プロジェクトの作成

Xcodeを起動すると、「Welcome to Xcode」ウインドウが表示されます。このウインドウでは、左エリアのボタンから「新規プロジェクトの作成」、「Gitレポジトリをクローンする」、または「既存のプロジェクトを開く」を選択できます。あるいは、右エリアに表示されたプロジェクトの一覧からプロジェクトを開くことができます。ここで、「Create new project...」を選んで、新規プロジェクトを作成します。（「File」メニューから「New」を選択し、「Project...」をクリックする方法もあります。）

「Choose a template for your new project」画面が表示されます。ここで、開発したいアプリケーションタイプに合わせてテンプレートを選択します。例えば、iOSアプリを開発する場合は、「iOS / App」を選択し、「Next」をクリックします。

プロジェクトの詳細設定画面が表示されます。プロジェクト名「CounselingApp」、チーム「None（または自分のチーム名）」、組織識別子「com.examle（または自分のドメインを逆にした文字列）」を入力します。また、UIの設計に使用するツールとして「SwiftUI」を選択し、「Language」でプログラミング言語「Swift」を選びます。以上で、詳細設定は終了です。「Next」をクリックしてください。

次に、プロジェクトファイルを保存する場所を選択するダイアログが表示されます。「Create」をクリックして新規プロジェクトを作成する前に、適切な保存場所を選んでください。著者はユーザーディレクトリ直下に「Xcode」フォルダーを作成し、そこにすべてのプロジェクトを保存しています。この方法は、ターミナルからのアクセスが容易であり、プロジェクト管理を簡単にするため、初心者にも推奨されます。

上記の手順に従って新規プロジェクトを作成すると、Xcodeのメイン画面が表示されます。画面の左側にはプロジェクトナビゲータが配置されており、これを通じてプロジェクト内のさまざまなファイルやフォルダにアクセスできます。左上の赤丸ボタンで開け閉めできます。

画面の中央部にはエディタエリアがあり、ここでソースコードの編集や閲覧を行います。

さらに、SwiftUIを使用している場合、エディタエリアの右には「Canvas」と呼ばれるプレビューエリアが表示されます。Canvasを利用することで、コードに対する変更がリアルタイムでどのようにUIに反映されるかを視覚的に確認できます。これにより、デザインとコードの間の即時フィードバックが可能となり、効率的なUI設計が実現します。Canvas上で表示されるモックアップを使用することで、アプリの見た目を素早く調整し、プロトタイピングを迅速に進めることができます。Canvasの左上のボタンで開け閉めできます。

また、右側にはユーティリティエリアがあり、選択したファイルの詳細設定やプロパティを編集できます。fig05では、ユーティリティーエリアは閉じられています。画面右上のボタンで開閉できますが、本記事の範囲では、ユーティリティーエリアは閉じたままで結構です。

画面上部のツールバーを使用すると、「プロジェクトのビルドや実行」が行え、「設定したターゲットデバイスやシミュレーター」でアプリをテストすることが可能です。このツールバーからは、デバッグオプションやアプリの実行停止、プロジェクトのクリーンなど、開発に必要なさまざまな操作を行うことができます。

これらの機能を駆使することで、Xcode内でのアプリ開発プロセスがスムーズに、かつ効率的に進行します。エディタ、Canvas、ナビゲータ、ユーティリティエリアの相互作用を理解し、活用することが、Xcodeでの開発を成功させる鍵となります。

以上で、Xcodeの説明と、新規プロジェクトの作成方法の解説を終わります。次は、SwiftUIを使った、プログラミングを開始します。

SwiftUI について

SwiftUIは、アプリの見た目と動作を作るためのツールです。これを使うと、あなたがアプリで実現したいUI（ユーザーインターフェース）をコードに書き込むだけで、アプリのボタンやテキスト、画像などが簡単に表示できます。従来の方法よりも、より直感的にアプリを作ることができます。

例えば、「画面に大きな赤いボタンを表示してほしい」という要望を、SwiftUIを使って簡単にコードに書くことができます。そして、そのコードを書くだけで、実際にそのようなボタンが画面に現れます。さらに、そのボタンがタップされたときに何をするかも、同じように簡単に指定できます。

この方法の良いところは、アプリを作る過程で画面上の変化をすぐに見ることができる点です。コードを少し変えたらどうなるか、すぐに確認できるので、試行錯誤しながら素早くアプリを作り上げることが可能です。また、iPhoneだけでなく、iPadやMacなど、Appleのさまざまなデバイスでうまく動くアプリを、一度の作業で作ることができます。

つまり、SwiftUIはあなたがアプリのデザインを簡単に「話す」ことができるツールであり、それをデバイスが「聞いて」理解し、アプリとして実現してくれるのです。

ユーザーインターフェースの作成：ContentView

このセクションでは、実践的なプログラミングを通じてSwiftUIの基礎を学んでいきます。多くのプログラミング初学者にとって、コードを一文字一文字タイピングすることは大切な学習過程です。しかし、本稿では、より効率的な学習と実践的な経験を提供するために、部分的にコードをコピー＆ペーストする方法を採用しています。このアプローチは、時間が限られている方々にも迅速に結果を見ていただくため、また、実際の開発プロセスにおいてもしばしば使われる手法です。

コードの各セクションには、番号付きのコメントを挿入して解説を加えています。これにより、コピペしたコードの各部分が何をしているのか、なぜそのように書かれているのかを詳しく理解することができます。この段階的な解説を通じて、SwiftUIでのユーザーインターフェース作成の基本を身につけ、自信を持って独自のアプリ開発に進むことができるようになります。

この方法で、SwiftUIの強力な機能と直感的なデザインを最大限に活用し、魅力的なユーザーインターフェースを迅速に作成するスキルを習得しましょう。具体的には、次の示すコードをコピーしてください。Xcodeのコードエディターに表示されているContentViewクラスに上書きでペーストしてください。ContentViewは、アプリが起動したときに初めて表示される画面を作成します。

struct ContentView: View {
    @State private var messages: [Message] = [] // （1）
    @State private var inputText: String = "" // （2）
    
    var body: some View {
        VStack { // （3）
            ScrollViewReader { proxy in // （4）
                ScrollView { // （5）
                    LazyVStack { // （6）
                        ForEach(messages, id: \.self) { message in // （7）
                            MessageView(message: message)
                        }
                    }
                    .onChange(of: messages.count) { // （8）
                        scrollToBottom(proxy: proxy)
                    }
                }
            }
            
            Spacer() // （9）
            
            HStack { // （10）
                TextEditor(text: $inputText) // （11）
                    .frame(height: 100)
                    .border(Color.gray, width: 1)
                
                Button(action: { // （12）
                    sendMessage()
                }) {
                    Text("送信")
                }
            }
            .padding()
        }
    }
    
    private func sendMessage() { // （13）
        if !inputText.isEmpty {
            messages.append(Message(text: inputText, isReceived: false))
            messages.append(Message(text: inputText, isReceived: true))
            inputText = ""
        }
    }
    
    private func scrollToBottom(proxy: ScrollViewProxy) { // （14）
        guard let lastMessage = messages.last else { return }
        withAnimation {
            proxy.scrollTo(lastMessage, anchor: .bottom)
        }
    }
}

このコードは、チャットアプリ（LINE風）のユーザーインターフェースを構築するための最小限のSwiftUIビューを定義しています。以下に、コードの各部分について詳しく解説します。

(1) のmessagesは、チャットメッセージを格納する配列です。@Stateは、ビューの状態を管理するためのプロパティラッパーです。これにより、messagesの値が変更されるとビューが自動的に更新されます。リストの要素であるMessageは、チャットメッセージを表すカスタム構造体です。エラーが表示されているはずですが、Massageは別のファイルで定義します。そのまま作業を進めて下さい。

(2) のinputTextは、ユーザーが入力中のテキストを格納する文字列です。@Stateプロパティラッパーを使用して、inputTextの値の変更を監視し、ビューを更新します。

(3) のVStackは、垂直方向にビューを積み重ねるコンテナビューです。SwiftUIで画面をデザインするときに、もっとも使われるコンテナビューの一つです。

(4) で、ScrollViewReaderコンテナにより、スクロール可能なビュー（ScrollViewなど）の内容にプログラムでアクセスするために使用されます。proxyパラメータを使用して、スクロール位置を制御できます。ここでは、メッセージたくさん表示されたときに、一番下にスクロールして最新のメッセージを表示するために使用しています。

(5) のScrollViewは、スクロール可能なビューを作成します。チャットメッセージのリストが長くなった場合に、スクロールして表示できるようにします。

(6) のLazyVStackは、垂直方向に配置されたビューのコレクションを作成します。"Lazy"とは遅延実行のことで、ビューが必要になる（つまり表示範囲になる）まで作成されないことを意味します。これにより、パフォーマンスが向上します。

(7) のForEachは、messages配列内の各メッセージに対して、MessageViewを作成します。idパラメータは、各メッセージを一意に識別するために使用されます。ここでは「id: \.self」により、コレクションの各要素そのものをIDとして使用します。ForEachでIDを指定する必要がある主な理由は、SwiftUIがビューの一意性を識別し、変更を追跡するために使用するためです。MassageViewは別のファイルで定義します。

(8) のonChangeモディファイアは、messages.count（messages配列の要素数）が変更されたときに呼び出されるメソッドです。新しいメッセージが追加されたときに、自動的にスクロールしてメッセージを表示します。

(9) のSpacerは、利用可能なスペースを埋めるために使用される空のビューです。これにより、チャット画面の下部に入力フィールドが配置されます。

(10) のHStack は、水平方向にビューを並べるコンテナビューです。入力フィールドと送信ボタンを横に並べています。

(11) のTextEditorは、ユーザーがメッセージを入力するためのテキストエディタです。 複数行の入力に対応しています。$inputTextは、inputText変数へのバインディングを表します。これにより、テキストエディタの内容がinputText変数と同期されます。

(12) のButtonは、 "送信"ボタンを表します。 ボタンがタップされると、sendMessageメソッドが呼び出されます。 Text("送信")により、ボタンのタイトルを

(13) のprivate func sendMessageは、ユーザーが入力したメッセージを送信するためのメソッドです。 メッセージが空でない場合、messages配列に新しいメッセージを追加します。そうすることで、messages配列の要素数が変わり、新しいメッセージがScrollViewに表示されます。最後に、inputTextをクリアします。

ここに、ChatGPTへの問い合わせ処理を実装する予定ですが、現段階では、同じメッセージが受信されるようにしてあります。

(14) のscrollToBottomは、最新のメッセージまでスクロールするためのメソッドです。 messages配列の最後の要素（最新のメッセージ）は、ScrollViewの一番下に表示されるため、.bottomまでスクロールします。withAnimationブロックを使用して、スクロールアニメーションを適用します。

以上で、ContentViewの改造は完了です。次に新しいファイルを作って、MessageViewを実装します。

ユーザーインターフェースの作成：MessageView

MessageViewを実装するために、新しいファイル（MessageView.swift）を作成して下さい。新しいファイルを作成するには、次の手順に従います。

fig06は、新しいファイルを作成する方法を示しています。Xcodeのプロジェクトナビゲーターで、ファイルを保存したい場所「CounselingAppフォルダー」を選択して、右クリックから「New File…」を選んでください。次に示すテンプレート選択画面が開きます。

ファイルテンプレートの選択画面が表示されます。ここでは、プログラミング言語Swiftを使用してビューを定義するための「iOS / SwiftUI View」テンプレートを選択しましょう。「Next」をクリックして、次の画面に移行します。

ファイル名を決定する画面が表示されます。Save asテキストフィールドに、「MessageView」と入力してください。Targetsのチェックボックスを✅にして、作成したファイルがビルドプロセスに含まれ、最終的なアプリケーションやフレームワークなどに組み込まれるようにします。最後、「Create」ボタンをクリックすると、新規ファイルが作成され、コードがXcodeのエディターエリアに表示されます。

以上で、新しいファイルの作成できました。このファイルの内容を以下に示すコードに書き直して下さい。

import SwiftUI

struct Message: Hashable { // （1）
    let text: String
    let isReceived: Bool
}

struct MessageView: View { // （2）
    let message: Message
    
    var body: some View {
        HStack {
            if message.isReceived { // （3）
                Text(message.text) // ここから（4）
                    .padding(10)
                    .background(Color.gray.opacity(0.2))
                    .cornerRadius(10)
                Spacer() // ここまで（4）
            } else {
                Spacer() // ここから（5）
                Text(message.text)
                    .padding(10)
                    .background(Color.blue.opacity(0.2))
                    .cornerRadius(10) // ここまで（5）
            }
        }
        .padding(.horizontal) // （6）
    }
}

#Preview {
    MessageView(message: Message(text: "Hello", isReceived: false))
}

このコードは、SwiftUIを使用してチャットアプリのメッセージビューを定義しています。以下に、コードの各部分について詳しく解説します。

(1) のMessageは、チャットメッセージを表す構造体です。Hashableプロトコルに準拠しています。これにより、Messageインスタンスを一意に識別でき、ForEachを使って「id: .self」により、繰り返し処理を行えるようになります。

textプロパティは、メッセージのテキスト内容を表します。isReceivedプロパティは、メッセージが受信されたメッセージ（true）か、送信されたメッセージ（false）かを示します。このBool値によりメッセージを右と左に振り分けて表示できるようになります。

(2) のMessageViewは、Messageインスタンスを受け取り、それを表示するためのビューを定義する構造体です。Viewプロトコルに準拠しており、bodyプロパティを実装しています。messageプロパティは、表示するメッセージインスタンスを保持します。

(3) の条件式により、message.isReceivedの値に基づいて、メッセージが受信されたか送信されたかを判断します。受信されたメッセージの場合は、次の(4)の部分が実行されます。送信されたメッセージの場合は、(5)の部分が実行されます。

(4) は、受信されたメッセージを表示します。Text(message.text)は、メッセージのテキスト内容を表示します。.padding(10)は、テキストの周囲に10ポイントのパディングを追加します。.background(Color.gray.opacity(0.2))は、テキストの背景色を透明度20%のグレーに設定します。.cornerRadius(10)は、背景の角を丸くします。Spacer()は、メッセージを左寄せにするために使用されます。

(5) は、送信されたメッセージを表示します。Spacer()は、メッセージを右寄せにするために使用されます。.background(Color.blue.opacity(0.2))は、テキストの背景色を透明度20%の青に設定します。

(6)で、padding(.horizontal)を使用して、メッセージビューの左右に余白を追加しています。

以上で、LINE風のチャットアプリのUIの実装が完了しました。下部の入力フィールドにテキストを入力してから「送信」ボタンをタップすると、同じメッセージが返却されるはずです。iPhoneシミュレーターでデバッグしてみましょう。

ユーザーインターフェースの作成：デバッグ

Xcodeのツールバーから実行したいデバイスを選択します。ここでは、最新のiPhoneである「iPhone 15 Pro」シミュレーターが選択されています。そして、赤丸で囲まれた▶︎ボタンで、シミュレーターを起動します。これにより、実際のデバイスを持っていなくても、アプリの挙動を詳細にテストできます。数秒から数十秒待つ（Macのマシーンパワーによる）と、次に示すシミュレーターがMacの画面上に表示されます。

iPhoneシミュレーターが起動したら、入力フィールドに好きなメッセージを入力してから「送信」ボタンをタップして下さい。メッセージが右と左に分かれて正しく表示されることを確認します。メッセージが多くなると、自動でスクロールして、最新メッセージが表示されることも確認しておきましょう。

次に、Xcodeの画面を示して、デバッグ情報の取得について説明を加えます。

デバッグ中のXcodeの画面です。右下のデバッグエリアに実行中のアプリの情報が表示されます。このエリアには、実行中のアプリからのログ出力や変数の状態、プログラムの実行に関する情報が表示されます。デバッグエリアは、プログラマがコードの動作を監視し、問題の診断を行うのに役立ちます。

左に示されるのが、「デバッグナビゲータ（Debug Navigator）」です。デバッグナビゲータでは、実行中のアプリのCPU使用率、メモリ使用量、ディスク活動、ネットワーク活動などのパフォーマンス指標を確認できます。これを使用して、アプリのパフォーマンスを監視し、最適化の必要性を判断できます。

これで、SwiftUIを使用したアプリ開発におけるデバッグの基礎についての説明を終えます。

次に私たちが取り組むミッションは、iPhoneアプリをChatGPTと連携させることです。具体的には、ユーザーからの質問に対して、カウンセラーのように回答を返すアプリを作成します。このプロジェクトを通じて、あなたはAPIの使用方法を学び、アプリ開発のさらなるステップに進むことができるようになります。

第2部　ChatGPTとのAPI連携

このセクションでは、私たちのiPhoneアプリがChatGPTと会話できるように、APIを介して二つを連携させる方法について学びます。しかし、まずAPIとは何か、そしてそれがどのように機能するのかについて簡単に説明しましょう。

APIとは？

APIは「Application Programming Interface」の略で、アプリケーション間で情報を交換するための架け橋のようなものです。簡単に言えば、APIはあるプログラムが別のプログラムに対して、「こんなことをしてほしい」とリクエストを送るための方法、またそのリクエストに応じて「こういう情報を返すよ」と応答を返す仕組みです。

例えば、天気予報アプリがあったとします。このアプリがユーザーの位置情報に基づいて最新の天気を表示するためには、外部の天気予報サービスからデータを取得する必要があります。ここでAPIが活躍します。アプリは、指定されたAPIを通じて天気予報サービスにリクエストを送り、サービスはそのリクエストに応じた天気情報をAPIを通じてアプリに返します。

APIを使用する主なメリットは以下の通りです。

1. 開発の効率化 　APIを利用することで、開発者は複雑な処理をAPIサーバー側に任せることができます。これにより、アプリケーション開発に専念でき、開発の効率化につながります。例えば、天気予報アプリを開発する際、天気データを取得するための複雑な処理をゼロから実装する必要はありません。天気予報APIを利用することで、簡単にデータを取得し、アプリに組み込むことができます。

2. 高度な機能の実現 　APIを活用することで、人工知能や機械学習などの高度な機能を簡単に実装できます。例えば、ChatGPT APIを利用すれば、自然言語処理や対話システムをアプリに組み込むことができます。顔認識APIを使えば、写真から顔を検出し、識別することができます。このように、専門的な知識や技術がなくても、APIを通して高度な機能を実現できます。

3. コストの削減 　APIを利用することで、開発コストを大幅に削減できます。APIサーバーは、多くの開発者に共通の機能を提供するため、個々の開発者がゼロから実装する必要がありません。APIを利用することで、開発時間が短縮され、人件費や資源のコストを抑えることができます。

4. スケーラビリティの向上 　APIを利用することで、アプリケーションのスケーラビリティを向上できます。APIサーバーは、多数のリクエストを処理するように設計されています。アプリケーションの利用者が増加しても、APIサーバーがリクエストを処理するため、アプリケーション自体のインフラを大規模に拡張する必要がありません。

5. 最新の技術へのアクセス 　APIを通して、最新の技術や機能にアクセスできます。API提供者は常に最新の技術を導入し、改善を行っています。開発者はAPIを利用することで、自動的に最新の技術を活用できます。これにより、アプリケーションの機能を常に最新の状態に保つことができます。

APIを活用することで、開発者は複雑な処理を簡単に実装でき、高度な機能を実現できます。また、開発コストの削減、スケーラビリティの向上、最新技術へのアクセスなど、多くのメリットがあります。APIを上手く活用することが、効率的で高品質なアプリケーション開発につながります。

APIの理解ができたところで、次は、ChatGPT APIを利用するために必須の作業である「OpenAIアカウントの作成」「APIキーの作成」について説明します。（もしChatGPT APIキーの取得がお済みの方は、「ChatGPT連携：ChatGPTService」のセクションまで進んで下さい）

OpenAIアカウントの作成

このセクションで初めに行うべき作業は、OpenAIのアカウントを作成することです。このアカウントを通じて、ChatGPTのAPIキーを取得し、iPhoneアプリと生成AIを連携させることができます。この連携により、iPhoneアプリにより複雑でリアルタイムなカウンセリング機能を付加することができるようになります。

OpenAIアカウントの作成は、2024年3月10日に行いました。以下の作業手順やスクリーンショットは変更する可能性がある点にご留意ください。次の、APIキー作成ページにアクセスします。

https://platform.openai.com/account/api-keys

APIキーを生成するため、まずはOpenAIのアカウントを作成することから始めます。アカウント作成ページで「Sign up」を選択し、メールアドレスとパスワードを入力して登録してください。このアカウントによって、OpenAIが提供するAPIを利用するための認証キーを受け取ることができます。

登録の次のステップとして、指定したメールアドレスにOpenAIから認証用のメールが送信されます。そのメール内のリンクをクリックし、メールアドレスの確認を行ってください。これは、セキュリティの一環として、アカウントの正当性を保証するためのものです。

メールでの認証が完了したら、必要な個人情報（名前、組織、生年月日）を入力します。そして、「Start verification」ボタンをクリックして、電話番号の認証も行ってください。これにより、OpenAIとの連携の信頼性が高まります。

以上の手続きを終えると、アカウントの設定が完了し、APIキーを生成する準備が整います。（無料トライアルの範囲なら、クレジットカードの登録は必要ありません。）

APIキーの作成

「Create new secret key」ボタンをクリックし、APIキーの生成を始めます。ポップアップされるモーダルウィンドウにある「Name」フィールドに、APIキーの名前を入力してください。後でキーを識別しやすいように、区別がつきやすい名称を選んでください。「Create secret key」ボタンをクリックすると、新しいAPIキーが生成され、そのキーは画面上に一度だけ表示されます。このキーは重要な認証情報であるため、他人に知られないように慎重に管理してください。表示されたキーは、次のセクションで、コードに入力する必要があるので、確実にコピーしておきましょう。これでAPIキーの作成プロセスは完了です。

ChatGPT APIのサービスは有料のため、使用状況を常に把握しておく必要があります。仮に、自分のAPIキーがなんらかの理由で流出し不正に利用されると、莫大な利用料金が請求されることにもなりかねません。そういった事故を防ぐためにも、使用状況の管理が重要になります。次は、使用状況の確認の方法を説明します。

使用状況の確認

左メニューの棒グラフのアイコンをクリックして、Usageページを開きます。このページで毎日の使用状況を確認できます。不正な使用が行われていないかを定期的にチェックしてください。画面右に、Credit Grantsとして、5.00ドルのクレジットがチャージされています。これは、フリートライアルとして使えるお金で、表示された期限（ここでは、2024年6月10日）まで使用することができます。5ドル以上の使用、または期限以降も使用するときは、クレジットカードを登録することになります。

次に、クレジットカードの登録と、使用制限について説明します。

右側のメニューから「Settings / Billing」を選択し、「Billing Settings」ページを開きます。ここでは、将来的にAPIの使用料が発生した場合の支払い方法を設定できます。「Payment methods」セクションを通じて、サービス利用料の支払いに使用するクレジットカード情報を登録してください。APIサービスの利用開始に先立って、支払い情報を登録することが推奨されます。クレジットカードを登録したら、必ず「Usage limits」セクションを開いて確認します。

「Usage limits」セクションでは、API利用における使用制限を設定することが可能です。デフォルト設定では、96ドルの使用に達した際に登録されたメールアドレスに通知が届きます。また、利用料が120ドルを超えるとAPIサービスの利用が一時停止されるため、予期せぬ料金超過を防ぐための安全策です。これらの金額は、予算に合わせて調整可能なため、状況に応じて制限額を変更することを検討してください。

以上で、OpenAIのアカウントおよびAPIキーのセットアップが完了しました。これで生成AIを組み込んだ音声アシスタントの開発に取りかかる準備が整いました。次に、API実装の設計を行います。

API実装の設計

開発者がAPIを利用したアプリケーションを構築する際には、APIとの通信をどのように行うかが重要なポイントになります。ここでは、APIエンドポイントへの問い合わせ、認証方法、リクエストの形式、およびAPIからのレスポンスの処理方法について説明します。

APIエンドポイントへの問い合わせ

APIエンドポイントは、APIが提供する特定の機能へアクセスするためのURLです。開発者は、このエンドポイントを使ってAPIにリクエストを送信し、必要なデータを取得または送信します。たとえば、ChatGPT APIにおいて、ユーザーの質問に対する回答を取得するためのAPIエンドポイントは、"https://api.openai.com/v1/chat/completions"になります。

認証方法

APIの利用には、正当な使用者であることを証明するための認証が必要になることがあります。ChatGPT APIにおいては、APIキーをリクエストのヘッダーに含めることで認証を行います。ヘッダーに含まれたキーにより、API提供者はリクエストが正当な使用者からのものであることを確認します。

APIリクエストの形式

APIへのリクエストは、決められた形式でデータを送信する必要があります。多くの場合、JSON形式でテキストデータを作成し、HTTPのPOSTメソッドを使用してエンドポイントへ送信します。JSONはJavaScript Object Notationの略で、軽量なデータ交換フォーマットです。例えば、ユーザーの質問を送るリクエストのJSONデータは以下のようになります。

{
     "model": "gpt-3.5-turbo",
     "messages": [{"role": "user", "content": "ここにユーザーの質問が入る。"}],
   }

APIレスポンスの処理

APIからのレスポンスも通常、JSON形式で返されます。レスポンスには、リクエストに対する結果が含まれています。開発者はこのレスポンスデータから必要な情報を抽出して、アプリケーションに表示するなどの処理を行います。例えば、レスポンスのJSONデータは以下のようになります。少し複雑な形をしていますが、choices配列の最初の要素を抜き出し、messageキー > contentキーから目的の回答を取得できます。

{
    "id": "chatcmpl-abc123",
    "object": "chat.completion",
    "created": 1677858242,
    "model": "gpt-3.5-turbo-0613",
    "usage": {
        "prompt_tokens": 13,
        "completion_tokens": 7,
        "total_tokens": 20
    },
    "choices": [
        {
            "message": {
                "role": "assistant",
                "content": "ここにChatGPTの回答が入る。"
            },
            "logprobs": null,
            "finish_reason": "stop",
            "index": 0
        }
    ]
}

APIを利用したアプリケーション開発では、エンドポイントへの正しい問い合わせ、適切な認証方法の使用、決められた形式でのリクエスト送信、そしてレスポンスの効果的な処理が重要になります。これらのステップを適切に実行することで、開発者はAPIの力を活用し、機能豊かなアプリケーションを構築することができます。

以上で、ChatGPT連携のための準備が整いました。次のステップとして、Xcodeに戻り、iPhoneアプリの開発を進めていきましょう。第1部と同じように、コードをコピペして、素早くサンプルアプリを完成させるアプローチで進めていきましょう。まず、新規ファイルの作成方法を図を示して詳しく説明します。

ChatGPT連携：ChatGPTService

ここから、ChatGPT連携機能を実装していきます。はじめに、Xcodeで新規ファイルを作成します。

ファイルのテンプレートは「iOS/Swift File」を選びます。このテンプレートは、Swift言語でコードを記述する際に最も基本となるファイル形式であり、iOSアプリ開発において頻繁に利用されます。

ファイルの名前は「ChatGPTService」です。このファイルに、ChatGPTの機能をまとめます。このように、別ファイルに機能を分けることで、プロジェクト全体の構造が理解しやすくなる、再利用しやすくなる、メンテナンスしやすくなるなどのメリットがあります。

ファイルの作成ができたら、次に示すコードをコピペして下さい。