WordPressとChatGPT APIで共感型カウンセリング・チャットボットを作成する
近年、AIチャットアプリが大きな注目を集めています。AIを活用したチャットアプリは、ユーザーの自由な質問に適切な回答を提供することができます。そこで本記事では、WordPress上でAIチャットアプリを作成する方法を紹介します。
本記事では、「AI Power」プラグインを使用し、ノーコードでチャットアプリを作成する手順を解説します。このプラグインは、ChatGPT APIを利用しており、カウンセラーの性格を持たせることで、悩めるユーザーに寄り添う応答が可能です。
また、作成したチャットアプリを多くのユーザーに使ってもらえるように、WordPressを無料のサーバーで公開する方法も解説します。これにより、ユーザーの悩みに寄り添うチャットアプリを簡単に構築し、多くの人々に役立てることができるでしょう。
本記事では、Mac画面のスクリーンショットを使って解説を進めます。なお、Windows開発環境では、ボタンの配置などが違う場合がありますが、適宜読み替えて作業を進めてください。もし、作業がわからないなどお困りごとがありましたら、末尾のコメント欄から気軽にご相談ください。可能な限りサポートさせていただきます。
記事概要
本記事では、WordPress上でAIチャットアプリを作成する方法を3つの部分に分けて解説します。
第1部では、ローカル環境にWordPress開発環境を構築する手順を紹介します。MAMPのインストールから始まり、WordPressファイルのダウンロード、MySQLデータベースの設定、WordPressのインストールまでを説明します。また、PWA用のプラグインと引越し用のプラグインをインストールする方法も取り上げます。
第2部では、ChatGPT APIを利用してAIチャットアプリを作成する手順を解説します。OpenAIアカウントの作成、APIキーの作成、使用状況の確認といった準備作業から、AI Powerプラグインを使ってChatGPTと連携する方法、プラグインの設定、デバッグまでを説明します。
第3部では、無料のサーバー（XREA Free）を使ってAIチャットアプリを一般公開する手順を紹介します。XREAアカウントの作成からWordPressのインストールまで、全行程をスクリーンショット付きで詳しく説明します。また、ローカル環境からデータをエクスポートし、XREA FreeサーバーのWordPressへインポートする方法も取り上げます。最後に、実機デバッグを行い、AIチャットアプリが正常に動作することを確認します。
本記事を通して、読者はWordPressとChatGPT APIを活用し、ノーコードでAIチャットアプリを作成する方法を学ぶことができます。また、ローカル環境から無料サーバーへの移行手順も理解できるでしょう。この記事が、AIチャットアプリ作成に興味がある方の一助となれば幸いです。
記事をご覧いただき、ありがとうございます。noteで7つ目の有料記事を公開できました。公開記念として10部限定で、100円で販売します。興味のある方はお早めにご購入ください。
第1部 WordPress ローカル開発環境の構築
第1部では、AIチャットアプリを開発するためのローカル環境を構築する手順を説明します。WordPressは、ローカル開発環境でページ、テーマ、プラグインなどをテストして、テスト完了後に、外部の公開サーバにアップロードする形で開発されることが一般的です。
パソコンにWordPressのローカル開発環境を構築する方法はいくつかありますが、本記事ではMAMPというアプリケーションを利用して、WordPressの開発環境を一気に構築する方法を解説します。
MAMPとは
MAMPは、Mac、Apache、MySQL、PHPの頭文字を取ったもので、これらのソフトウェアを一括でインストールできる便利なパッケージです。MAMPを使えば、複雑な設定をすることなく、簡単にWordPressの開発環境を構築することができます。
MAMPのインストール
MAMPのインストールは、公式サイトからインストーラーをダウンロードして開始します。公式サイトのURLは次のとおりです。
MAMPの公式サイトのダウンロードページが開きました。お使いのOSに合わせて、インストーラーをダウンロードしてください。インストーラーをダウンロードしたら、インストーラーをダブルクリックして起動します。インストール画面では、特に設定を変更する必要はなく、「続ける」あるいは「Next」ボタンをクリックすることで、インストールを完了させることができます。
Windows版のインストール中に、「.Net Core Framework」が必要であるという通知が出たときは、「OK」をクリックして、インストールしてください。
以上で、MAMPのインストールが完了しました。次のセクションでは、MAMPを起動して、MAMPの初期設定を行います。そして、WordPressをインストールするために必要なデータベース（MySQL）の設定まで行います。
MAMPの初期設定と データベースの設定
MAMPの初期設定を行うことで、WordPress側で設定を変えずにインストールが可能になります。インストールしたMAMPを起動します。
MAMPが起動したら、初期設定を変更します。左上の「Preference（または、MAMP > Preference」から設定画面を開きます。
設定画面が開いたら、Portsタブで、ポート設定を行います。「80 & 3306」ボタンをクリックして、Apacheのポートを「80」、MySQLのポートを「3306」に変更します。これらのポート番号はWordPressのデフォルトのポート番号であり、WordPressをブラウザで開くことができるようになります。「OK」ボタンで確定して、MAMPのホーム画面に戻ります。右上の「Start」ボタンで、MAMPを起動します。
MAMPが起動すると、ブラウザにMAMPのWelcome画面が表示されます。次の作業は、WordPress用のデータベースを作成することです。MySQLセクションの「phpMyAdmin」リンクをクリックします。phpMyAdminは、ブラウザからMySQLデータベースを操作するアプリケーションです。
phpMyAdminが開きました。「新規作成」リンクから、WordPress用のデータベースを作成します。
データベースの作成画面が開きます。データベースの名前は任意で決定できます。ここでは、「counselor_bot」としました。この名前は、WordPressをインストールするときに使うので、記憶しておいてください。「作成」ボタンで確定して、データベースを作成します。
以上で、MAMPによるWordPress開発環境の構築が完了しました。次は、WordPressをローカル開発環境にインストールする方法を解説します。初めに、WordPress公式サイトから、WordPressをダウンロードします。
WordPressプログラムファイルのダウンロード
WordPressは、オープンソースのCMS（コンテンツ管理システム）であり、Webサイトを簡単に構築・管理することができます。WordPressは、PHPで書かれたプログラムファイルと、データを格納するためのMySQLデータベースで構成されています。
WordPressを使ってWebサイトを構築するには、これらのプログラムファイルをWebサーバー上に配置する必要があります。WordPressは無料で利用できるオープンソースソフトウェアであるため、プログラムファイル一式を公式サイトからダウンロードすることができます。ダウンロードページのURLは次のとおりです。
WordPress日本語サイトのダウンロードページが開きました。最新版（記事執筆時点では6.5.2バージョン）をダウンロードします。ダウンロードしたファイルはzip形式で圧縮されているため、ダブルクリックで解凍します。すると、「wordpress」という名前のフォルダーが生成されますが、このフォルダーにすべてのプログラムファイルが含まれています。
以上で、WordPressのプログラムファイルが準備できました。次は、MAMPを使って、これらのファイルをブラウザで開けるようにします。
WordPressプログラムファイルを配置する
ダウンロードしたプログラムファイルをブラウザに表示できるように、決められたフォルダーに配置します。OSによって、決められたファルダーは変わります。「wordpress」フォルダーをコピーして、次に示すフォルダーにペーストします。
/Applications/MAMP/htdocs/（Macの場合）
C:\MAMP\htdocs\（Windowsの場合）
図9は、WordPressプログラムファイルのフォルダー構成を示しています（Macの場合）。以上で、プログラムファイルの配置は完了です。次に示すURLをブラウザのアドレスバーに入力して、WordPressのインストールを開始します。
WordPressのインストールプロセス
ブラウザでWordPressを開くことができました。「さあ、始めましょう！」からインストールを開始します。
データベース設定画面が開きます。データベース名は先ほど作成したデータベース名を入力してください。ユーザー名「root」、パスワード「root」を入力します。このユーザーは、MySQLのルートユーザーで、MySQlのすべての操作が可能です。「送信」ボタンで、データベースの設定が正しいか、MySQLに問い合わせをします。
画面が切り替わり、「インストール実行」ボタンが表示されたら、データベースとWordPressは通信可能な状態になります。ボタンをクリックして、データベースとの接続を確定させます。
データベース接続が完了すると、サイト設定画面が表示されます。サイトのタイトルを任意に決めてください。ここでは、「カウンセラーボット」としました。次に、ユーザー名、パスワード、メールアドレスを入力して、WordPressサイトの管理者を作成します。「WordPressをインストール」からインストールプロセスを進めます。
サイト設定が完了すると、成功通知画面が表示されます。「ログイン」ボタンからログインを開始します。先ほど作成した管理者アカウントで、ログインします。
WordPressのダッシュボードが表示されます。このダッシュボードですべての操作を行えます。サイドバーの更新セクションに通知が現れていたら、すべて更新しておきましょう。
更新が終わったら、プラグインを2つインストールします。プラグインセクションの「新規プラグインを追加」を選びます。
WordPressのプラグインインストール・有効化
プラグインの追加画面が表示されます。プラグインとは、WordPressに便利な機能を簡単に追加できるプログラムのことです。検索バーに「Super Progressive Web Apps」と入力して表示される同名のプラグインをインストールします。インストールが完了したら、有効化しておきます。このプラグインは、WordPressサイトをPWA化するものです。PWA化することで、ネイティブアプリのように、サイトをスマホにイントールできるようになります。次に、2つ目のプラグインをインストールします。
プラグイン追加画面で「All-in-One WP Migration」で検索します。表示される同名のプラグインをインストールして有効化します。このプラグインは、WordPressを簡単に別のサーバーに引っ越しできる機能を追加できます。第3部で、外部のサーバーに引越しをする際に使用します。以上で、すべての設定が完了しました。左上のサイト名のリンクから、WordPressサイトを開きます。
WordPressサイトを開く
WordPressサイトをブラウザで開きました（図18）。このサイトは、MAMPのローカルサーバーで配信されているサイトをブラウザで表示しています。
管理者ツールから、スマホ画面での表示を確認できます。Edgeブラウザの場合は、右上のメニュー（3つの点）から「その他のツール > 管理者ツール」を開きます。上部のツールバーでパソコンの表示とスマホの表示を切り替えられます。
以上で、WordPressのローカル開発環境を構築し、インストール後、ブラウザで表示させるところまで、作業を進めました。次の第2部では、WordPressとChatGPTを連携させて、カウンセラーチャットボット開発を開始します。
第2部 ChatGPT連携
第2部では、第1部で構築したWordPressのローカル開発環境に、ChatGPT APIを連携させて、カウンセラーチャットボットを開発する手順を解説します。
ChatGPTは、OpenAI社が提供する大規模言語モデルで、自然な会話を生成することができます。ChatGPT APIを利用することで、WordPressサイト上で、ユーザーとの対話型のチャットボットを構築することができます。
ChatGPTのAPIを利用するための準備として、OpenAIのアカウント作成とAPIキーの取得方法について説明します。その後、実際にAPIを使ってChatGPTとの通信を実装していきます。
OpenAIアカウントの作成
このセクションで初めに行うべき作業は、OpenAIのアカウントを作成することです。このアカウントを通じて、ChatGPTのAPIキーを取得し、WordPressと生成AIを連携させることができます。この連携により、WordPressにより複雑でリアルタイムなカウンセリング機能を付加することができるようになります。
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サービスの利用が一時停止されるため、予期せぬ料金超過を防ぐための安全策です。これらの金額は、予算に合わせて調整可能なため、状況に応じて制限額を変更することを検討してください。
ChatGPT APIの利用料金は、使用するモデルによって異なります。GPT3をベースにする「gpt-3.5-turbo」は、1000トークン当たり、0.0005ドル（約0.074円）です（Pricingページ）。トークンという単位は、文字の単語の中間を表し、日本語では、1文字で1～3トークン程度を消費します。安価だと思って使いすぎると、すぐに無料トライアルの5ドルは使い切ってしまいます。定期的に、Usageページで現在の使用状況を確認しましょう。
以上で、OpenAIのアカウントおよびAPIキーのセットアップが完了しました。次のステップとして、ローカル開発環境で、WordPressに「AI Power」プラグインをインストールして、ChatGPT連携機能を実装します。
AI Powerプラグイン
AI Powerは、WordPressサイト上でChatGPT APIを利用したチャットボット機能を簡単に追加できるプラグインです。このプラグインを使用することで、プログラミングの知識がなくても、ChatGPTの強力な自然言語処理機能を活用したチャットボットをサイトに組み込むことができます。
AI Powerプラグインの主な特徴は以下のとおりです。
AI Powerプラグインは、ショートコードを使ってチャットボットをサイトの任意の場所に表示できます。ページや投稿の編集画面で、ショートコードを入力するだけで、チャットボットが表示されます。
チャットボットの見た目は、プラグインの設定画面からカスタマイズできます。チャットボットのアイコン、色、サイズなどを自由に変更して、サイトのデザインに合わせることができます。
ユーザーとチャットボットとの会話ログを保存し、分析することができます。これにより、ユーザーのニーズや関心事を把握し、サイトやサービスの改善に役立てることができます。
AI Powerプラグインは、多言語に対応しています。プラグインの設定画面から、チャットボットの言語を選択できます。これにより、グローバルなユーザーにも対応できます。
それでは、AI PowerプラグインをWordPressにインストールし、設定する手順を見ていきましょう。
AI Power プラグインのインストールと有効化
WordPressの管理画面にログインし、サイドバーの「プラグイン」→「新規プラグインを追加」と進みます。検索バーに「AI Power」と入力し、プラグインを検索します。同名のプラグインが検索結果に表示されるので、「今すぐインストール」をクリックし、プラグインをインストールします。
インストールが完了したら、「有効化」をクリックして、プラグインを有効化します。次は、AI Powerプラグインを設定して、WordPressサイトにチャットウインドウを表示させます。
AI Power プラグイン（Widget）の設定
AI Power プラグイン（Widget）は、Webサイトにウィジェットアイコンを配置します。そのアイコンをクリックすると、チャットウインドウが開き、ChatGPTとの会話を始めることができます。
AI Power プラグイン（Widget）の設定を始めましょう。
サイドバー「AI Power」から、プラグインの設定を開始します。初めて、AI Powerを開いたときは、「Opt in」の設定画面が表示されています。重要なアップデートやセキュリティー通知を受け取りたいときは、「許可して続ける」ボタンをクリックしてください。なお、「スキップ」を選んでも、問題なく設定を進めることが可能です。
AI PowerのWelcomeページが開きます。AI Powerプラグインは、多くのAI機能を搭載していますが、今回はChatGPTを使ったチャットボット機能のみ扱います。左上の「Add ChatGPT to my Website」を選びます。
次は、ChatGPT APIを使用するために、OpenAI API Keyを入力して、「Validate」ボタンをクリックしますAPI Keyが有効であれば、「Your API Key is valid!」の通知が表示されるので、「Next」をクリックして、設定を進めます。
次は、テンプレートを選択する画面が表示されます。ここでChatGPTへのシステムプロンプト（回答の質や前提条件を指示として与える）を入力するのですが、日本語の指示文を入力すると、動作チェックで返答が戻ってこなかったので、このまま「Next」で進めてください。（システムプロンプトは、動作チェック後に定義します。）
次は、チャットボットの見え方を選択する画面が表示されます。Shortcodeはページの中にチャットボットウィンドウを埋め込みます。Widgetはページにウィジェットボタンを表示して、チャットボットウィンドウをモーダルウィンドウとして開きます。ここでは、Widgetを選んで、「Next」で次に進みます。（Shortcodeの設定方法は、後のセクションで解説します。）
次は、Widgetの設定を行います。「Whole website」を選んで、すべてのページにウィジェットボタンを表示される設定を選びます。ウィジェットボタンは、画面の左下か右下に表示できます。ここでは初期値である「Bottom Left」を選んで、「Save」ボタンで確定します。
これで、AI Powerによるチャットボットが使えるようになりました。動作チェックをしてみましょう。ダッシュボードの左上のホームアイコンをクリックして、WordPressサイトを開きます。
AI Powerを動作チェックするために、左下のウィジェットボタンからチャットウインドウを開いてください、入力フィールドに英語で質問「Hello. How are you?」などと入力してエンターで確定します。ChatGPTからのメッセージが表示されたら、AI Powerが正しく動作していることが確認できます。これで、動作チェックは完了です。
次は、AI Powerをカスタマイズして、カウンセラーとして日本語で回答できるようにします。
AI Powerプラグイン（Widget）のカスタマイズ
このセクションでは、AI Powerプラグイン（Widget）のカスタマイズを行います。AI Powerの素晴らしい点の一つは、無料で広い範囲のカスタマイズを行えることです。初めに、システムプロンプトを設定して、ChatGPTにカウンセラーの性格を持たせます。ダッシュボードに戻り、サイドバー「AI Power > ChatGPT」から「Widget > Settings」を選びます。
システムプロンプトは、Instructionセクションの入力フィールドに直接入力可能です（テンプレートは使用しません）。次に、システムプロンプトの例を示しますので、これを読者で修正して、図30の赤枠部分に貼り付けてください。入力後、「Save」で設定変更を確定します。
あなたはスクールカウンセラーです。 生徒からの相談を受けています。 生徒の話を受容と共感を持って聞くことが大切です。 生徒との会話は一方通行ではなく、生徒の話に対して適切な質問を投げかけることで、 生徒が自分の問題に気づくように導いてください。 会話は概ね5ターン以内で終了するように、まとめて下さい。 また、生徒の話が「ありがとう」や「さようなら」で終わった時は、 生徒が納得したか確認して、生徒がこの話題を終了するように促してください。 あなたの回答は日本語で100文字以内にしてください。
次は、チャットウインドウの見え方をカスタマイズします。英語表記の部分をすべて日本語に変更します。AI Power設定の「Widget > Interface」を選びます。
チャットウインドウの英語表記部分を日本語化します。次に、日本語化の例を示しますので、各項目を変更して、「Save」で確定します。
AI Name - カウンセラー
User Name - あなた
Response Wait Message - 考え中…
Placeholder - メッセージを入力
Welcome Message - こんにちは。カウンセラーボットです。なんでも気軽に相談してください。
以上で、AI Powerプラグイン（Widget）のカスタマイズを完了しました。カスタマイズが反映されているか、動作チェックを行いましょう。ダッシュボードの左上のホームアイコンからWordPressサイトを開きます。
WordPressサイトが開いたら、左下のウィジェットボタンからチャットウインドウを開きます。日本語でカウンセラーにメッセージを送ってみましょう。共感的カウンセラーの役割を持ったChatGPTからのメッセージを受信することができるはずです。チャットウインドウの英語表記もすべて日本語化されています。以上で、AI Powerプラグイン（Widget）のカスタマイズは完了です。
次は、スマホでの表示を確認します。Edgeブラウザの場合は、右上のメニューアイコン（3つの点）から、「その他のツール > 開発者ツール」を選びます。
右サイドに開発者ツールが開かれます。上部ツールバーのデバイスアイコンから、スマホ表示を選んでください。スマホ表示でも、チャットボットは正しく動作しますが、チャットウィンドウが狭いため、ユーザーの操作性が低下する可能性があります。この問題を解決するために、次は、AI Powerプラグイン（Shortcode）の設定を行い、ページにチャットウィンドウを埋め込む方法を解説します。これにより、スマホ表示でもユーザーがチャットボットを快適に利用できるようになります。
AI Powerプラグイン（Shortcode）の設定
このセクションでは、AI Powerプラグイン（Shortcode）のカスタマイズを行います。Shortcodeを使うと、チャットウインドウをページに埋め込むことができるため、全画面でチャットボットを使うことができるようになります。ダッシュボードに戻り、サイドバー「AI Power > ChatGPT」から「Shortcode > Settings」を選びます。
ここから先は
¥ 100 （数量限定：残り 9 / 10）
この記事が気に入ったらサポートをしてみませんか？