自分だけのクイズを作成しよう - Quipha
個人開発
個人開発
作ってみよう
作ってみよう
プログラミング
プログラミング
Laravel
Laravel
スポンサーリンク

【ChatGPT API連携】WordPressプラグインを作ろう

【ChatGPT API連携】WordPressプラグインを作ろう AI

当サイトではアフィリエイト広告を利用しています。

実装

ChatGPTチェック画面の作成

画面

ChatGPTにチェックしてもらう画面を作成します。

WordPress プラグイン開発 ChatGPTチェック画面の作成

以下のファイルを作成します。

\wp-gpt-support
└─\pages\page_check.php

HTMLを以下のようにコーディングします。

<?php

if (!defined('ABSPATH')) exit;

/**
 * ページ: チェック画面
 */
function page_wp_gpt_support_check()
{
    // 指示文
    $direction = '以下の文章に、誤字・脱字があれば教えて';
?>
    <div class="wrap">
        <h1>WP GPT Support</h1>

        <form action="#" method="post" id="form_gpt_support">

            <?php wp_nonce_field('wp_gpt_support_check', 'wp_gpt_support_check_nonce'); ?>

            <table class="form-table">

                <tr valign="top">
                    <th scope="row"><label for="">記事ID</label></th>
                    <td><input type="number" name="post_id" value="" /></td>
                </tr>

                <tr valign="top">
                    <th scope="row">指示文</th>
                    <td><textarea name="direction" rows="5" cols="50"><?php echo esc_textarea($direction); ?></textarea></td>
                </tr>
            </table>

            <input type="submit" id="gpt_support_submit" class="button-primary" value="GPTチェック" />

        </form>

        <table class='gpt-table'>
            <thead>
                <tr>
                    <th>記事</th>
                    <th>ChatGPT</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td id="post_contents"></td>
                    <td id="gpt_message"></td>
                </tr>
            </tbody>
        </table>

    </div>
<?php
}

wp_nonce_fieldについては、CSRFの対策のために記述しています。
Tableタグについては、ChatGPTの回答結果を表示するために用意しました。

JavaScript

ChatGPTのAPIを呼び出し応答が返るまでの時間がかかりますので、ボタンをクリックした後は非同期通信にします。

以下のファイルを作成します。

\wp-gpt-support
└─\js\js_check.php

以下のようにコーディングします。

<?php

if (!defined('ABSPATH')) exit;

/**
 * JS: チェック画面
 */
add_action(
    'admin_footer-gpt-support_page_wp_gpt_support_check',
    function () {
?>
    <script>
        jQuery(document).ready(function($) {

            $('#form_gpt_support').submit(function(event) {

                event.preventDefault();

                const postData = this;

                $('#post_contents').text('');
                $('#gpt_message').text('');

                // 非同期で処理を呼び出し
                const fd = new FormData(postData);
                fd.append('action', 'wp_gpt_support_check');

                $.ajax({
                    type: "POST",
                    url: "<?php echo admin_url('admin-ajax.php'); ?>",
                    dataType: 'json',
                    data: fd,
                    processData: false,
                    contentType: false,
                }).done(function(data, textStatus, jqXHR) {

                    // 結果を反映
                    $('#post_contents').text(data['post_contents']);
                    $('#gpt_message').text(data['gpt_message']);

                }).fail(function(data, status, error) {

                    alert(error);
                });

                return false;
            });

        });
    </script>
<?php
    }
);

以下の関数と引数を指定することにより、特定の画面にのみJavaScriptを埋め込むことができます。

add_action(
    'admin_footer-gpt-support_page_wp_gpt_support_check',

この引数については、メニューの追加処理で確認することができます。

    // チェック画面
    $menu = add_submenu_page(
        'wp_gpt_support',
        'チェック',
        'チェック',
        'manage_options',
        'wp_gpt_support_check',
        'page_wp_gpt_support_check'
    );
    echo $menu;

「admin_footer-上記で表示された値」のように指定すると、特定の画面にJavaScriptの処理を埋め込むことができます。

スポンサーリンク

非同期通信処理

JavaScriptでは、Ajaxを利用して非同期通信を行う処理にしました。
次に、呼び出されるサーバーサイドの処理を実装します。
JavaScriptでは以下のようにActionを指定しました。

fd.append('action', 'wp_gpt_support_check');

以下のファイルを作成します。

\wp-gpt-support
└─\ajax\gpt_support_check.php

指定したActionに対する処理を作成します。
処理の先頭では、権限とCSRFに対するチェックを行っています。

<?php

if (!defined('ABSPATH')) exit;

/**
 * Ajax: ChatGPT チェック
 */
add_action('wp_ajax_wp_gpt_support_check', 'ajax_wp_gpt_support_check');
function ajax_wp_gpt_support_check()
{

    // 権限
    if (!current_user_can('manage_options')) {
        return;
    }

    // CSRF
    check_ajax_referer('wp_gpt_support_check', 'wp_gpt_support_check_nonce');

    $post_id = $_POST['post_id'];
    $direction = $_POST['direction'];

    // 記事取得
    $page = get_post($post_id);
    $contents = strip_tags($page->post_content);
    $contents = preg_replace('/(\n)+/us', '$1', $contents);

    if (empty($contents)) {
        echo wp_json_encode([
            'post_contents' =>  'コンテンツがありません',
        ]);
        wp_die();
    }

    try {
        // ChatGPTに問い合わせ

        $gpt_role = 'あなたはブログの編集者です。';
        $to_send = $direction . '\n\n' . $contents;

        $response = chat_gpt($gpt_role, $to_send);

        if (isset($response->error)) {
            echo wp_json_encode([
                'post_contents' => $contents,
                'gpt_message' => $response->error->message
            ]);
            die();
        }

        $message = $response->choices[0]->message->content;

        echo wp_json_encode([
            'post_contents' => $contents,
            'gpt_message' => $message,
        ]);

        die();
    } catch (Exception $e) {
        echo wp_json_encode([
            'post_contents' => $contents,
            'gpt_message' => $e->getMessage()
        ]);
        die();
    }
}

記事IDを受け取り、記事本文を取得します。
記事本文と指示文をChatGPTに問い合わせする処理をコーディングしています。

ChatGPTに対しての役割、指示文を指定できます。
役割($gpt_role)については、適宜変更してください。

次に、ChatGPTを呼び出すための関数を作成します。
直接APIを呼び出します。


/**
 * ChatGPT API
 */
function chat_gpt($system, $user)
{
    // ChatGPT APIのエンドポイントURL
    $url = "https://api.openai.com/v1/chat/completions";

    // APIキー
    $api_key = get_api_key();
    if (empty($api_key)) {
        throw new Exception('No API key');
    }

    // ヘッダー
    $headers = array(
        "Content-Type: application/json",
        "Authorization: Bearer $api_key"
    );

    // パラメータ
    $data = array(
        "model" => "gpt-3.5-turbo",
        "messages" => [
            [
                "role" => "system",
                "content" => $system
            ],
            [
                "role" => "user",
                "content" => $user
            ]
        ]
    );

    // cURLセッションの初期化
    $ch = curl_init();

    // cURLオプションの設定
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
    curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

    // タイムアウトを設定
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 120);
    curl_setopt($ch, CURLOPT_TIMEOUT, 120);

    // リクエストの送信
    $response = curl_exec($ch);

    // エラーを取得
    $error_no = curl_errno($ch);
    $errors = curl_error($ch);

    // cURLセッションの終了
    curl_close($ch);

    if ($error_no !== 0) {
        throw new Exception($errors);
    }

    return json_decode($response);
}

APIキーは、設定値から取得します。
絶対にハードコーディングは避けましょう。

CSS

チェック画面のCSSを適用します。
以下のファイルを作成します。

\wp-gpt-support
└─\css\styles.css

結果を表示するためのTableタグのスタイルを定義します。

table.gpt-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 20px;
}

.gpt-table th {
    padding: 10px;
    background: #d1d1d1;
    border: solid 1px #778ca3;
}

.gpt-table td {
    padding: 10px;
    background: #fff;
    border: solid 1px #778ca3;
    width: 50%;
    white-space: pre-wrap;
    vertical-align: top;
}

各処理の呼び出し

wp-gpt-support.phpに以下を追記します。

...

// チェック画面
require_once(plugin_dir_path(__FILE__) . 'pages/page_check.php');
require_once(plugin_dir_path(__FILE__) . 'js/js_check.php');
require_once(plugin_dir_path(__FILE__) . 'ajax/gpt_support_check.php');

// 設定画面
require_once(plugin_dir_path(__FILE__) . 'pages/page_settings.php');

/**
 * CSSの読み込み
 */
function wp_gpt_support_styles()
{
    wp_enqueue_style(
        'wp_gpt_support_styles',
        plugin_dir_url(__FILE__) . 'css/styles.css',
        array(),
        GPT_SUPPORT_VERSION
    );
}
add_action('admin_enqueue_scripts', 'wp_gpt_support_styles');

これで実装は完了です。動作確認をしましょう。

さらに実装

本記事では、最低限の実装を行いました。
ちなみに私はさらに以下の機能を実装しました。

  • GPT3.5のAPIを利用しますが、トークンに制限があります。
    記事をある程度の文字数で切って、それぞれChatGPTに問い合わせするようにしました。
  • 多言語対応
  • 投稿一覧にチェックリンクの追加

他サービス

他にもAIの便利なサービスがあります。

【オススメ】AIサービス
厳選したオススメのAIサービスを紹介します。
chigusa-web.com
2023/08/28

ChatPDFについては、以下の記事を参考にしてください。

ChatPDFを試してみた
ChatPDFを試してみました。PDFファイルを読み込ませ、ChatGPTのようにチャットすることができます。
chigusa-web.com
2023/09/01

AIにアプリを作ってもらえる、GPTAppです。

【ChatGPT】GPTAppでアプリを作成【AI】
ChatGPT APIを利用しているサービスである、GPTAppを試してみました。
chigusa-web.com
2023/08/31

WebChatGPTでWebの情報を回答してもらうことができます。

WebChatGPTでWebの情報を回答してもらおう
ChatGPTを拡張して使用できる、WebChatGPTを試してみました。
chigusa-web.com
2023/08/29

さいごに

今回はChatGPTのAPIを利用し、連携するWordPressのプラグインを開発しました。
ぜひ試してみてくださいね。

他にも私のブログで、AIについて解説している記事がありますのでご覧ください。

関連
ChatPDFを試してみた
ChatPDFを試してみた
ChatPDFを試してみました。PDFファイルを読み込ませ、ChatGPTのようにチャットすることができます。
【C#】ChatGPT APIを使って連携
【C#】ChatGPT APIを使って連携
C#でChatGPTのAPIを利用して実装します。
【iPhone】iOS版 ChatGPTを試す
【iPhone】iOS版 ChatGPTを試す
iOS版のChatGPTを使ってみました。
【ChatGPT】GPTAppでアプリを作成【AI】
【ChatGPT】GPTAppでアプリを作成【AI】
ChatGPT APIを利用しているサービスである、GPTAppを試してみました。
＼オススメ／
前へ
123
スポンサーリンク

コメント

タイトルとURLをコピーしました
  1. 実装
    1. ChatGPTチェック画面の作成
      1. 画面
      2. JavaScript
      3. 非同期通信処理
      4. CSS
    2. 各処理の呼び出し
  2. さらに実装
  3. 他サービス
  4. さいごに