WordPressの投稿フォームのデータをkintoneに登録する

# はじめに

WordPressで作ったWebサイトのフォームデータを、何らかのデータベースに登録したいと言うことが時々あります。

今回、ローカルにDockerでWordPressの環境を作り、プラグインに ContactForm7 を使ったお問い合わせフォームから、kintoneにレコードを登録してみました。

# WordPress環境構築

Dockerを使ってWordPress環境を構築します。

Dockerのインストールは下記を参照してください。

* https://www.docker.com/
* https://docs.docker.com/compose/wordpress/

Dockerをインストールして、docker-compose.yml に設定をJSONで記述するだけです。

今回のdocker-compose.ymlを置いておきます。

```docker-compose.yml
version: '3.3'

services:
   db:
     image: mysql:5.7
     volumes:
       - db_data:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: somewordpress
       MYSQL_DATABASE: wordpress
       MYSQL_USER: wordpress
       MYSQL_PASSWORD: wordpress
     container_name: db-container
   wordpress:
     depends_on:
       - db
     image: wordpress:latest
     ports:
       - "8000:80"
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: wordpress
       WORDPRESS_DB_PASSWORD: wordpress
       WORDPRESS_DB_NAME: wordpress
     volumes:
       - ./html:/var/www/html
       - ./vendor:/var/www/vendor
     container_name: wp-container
volumes:
    db_data: {}
```


# Composer のセットアップ

2019年9月14日(土)のPHPの勉強会「[Shizuoka.php](https://shizuokaphp.connpass.com/)」で[Composer](https://getcomposer.org/)の存在を知りました。
RubyのgemやNodeのnpmと同じ、ライブラリの依存関係を管理してくれるライブラリです。

セットアップは下記参照

* https://getcomposer.org/doc/00-intro.md

docker-compseしたディレクトリにセットアップすると、vendorディレクトリ以下にライブラリがインストールされます。
Dockerでvendorディレクトリをマウントしてください。

# PHP dotenv のセットアップ

Rubyのdotenv のPHPバージョン。kintoneのAPIトークンなどを外部の設定ファイルから読み込む様にします。

セットアップは下記参照

* https://github.com/vlucas/phpdotenv

# Contact Form 7 プラグイン セットアップ

WordPressのお問い合わせフォームプラグイン

セットアップは下記参照

* https://ja.wordpress.org/plugins/contact-form-7/

# kintone アプリ作成

WordPressのお問い合わせフォームのデータを登録するアプリを作成します。

<img width="878" alt="スクリーンショット 2019-09-16 20.04.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/7c6fe27a-6a95-ef4b-40f1-6c289e2d6c10.png">


# WordPressのフォームデータをkintoneアプリに登録する

Contact Form 7 の wpcf7_before_send_mail アクションフックを利用してフォームデータを取得して、
wp_remote_post 関数でkintoneにデータを登録します。

詳細は下記を参照

* https://contactform7.com/ja/2018/01/31/contact-form-7-50/
* https://contactform7.com/ja/2014/07/02/contact-form-7-39-beta/
* https://codex.wordpress.org/Function_Reference/wp_remote_post

functions.php にアクションフックを登録します。

```php

function add_cf7_form_data($wpcf7) {
    $submission = WPCF7_Submission::get_instance();
    if ( $submission ) {
		$posted_data = $submission->get_posted_data();
	}
	require get_template_directory() . '/inc/cf7-to-kintone.php';
    return $wpcf7;
}
add_action( 'wpcf7_before_send_mail', 'add_cf7_form_data');
```

アクションフックで取得したフォームデータを wp_remote_post 関数でkintoneに登録します。

```php

<?php
require_once '../vendor/autoload.php';
$dotenv = Dotenv\Dotenv::create(__DIR__);
$dotenv->load();

function wpform_to_kintone($form_data) {
	$url = 'https://'. getenv('SUB_DOMAIN') . '.cybozu.com/k/v1/record.json';
	$request = array(
        "app" => getenv('APP_ID'),
        "record" => array(
            "お名前" => array("value" => $form_data['your-name']),
            "メールアドレス" => array("value" => $form_data['your-email']),
            "題名" => array("value" => $form_data['your-subject']),
            "本文" => array("value" => $form_data['your-message']),
        )
    );
	$args = array(
		'method' => 'POST',
		'headers' => array(
			'X-Cybozu-API-Token' => getenv('API_TOKEN'),
			'Content-Type' => 'application/json'
		),
		'body' => json_encode( $request )	
	);
	$response = wp_remote_post( $url, $args);
	if ( is_wp_error( $response ) ) {
	    $error_message = $response->get_error_message();
            error_log("Error: " . $error_message . "\n", 3, 'wp-to-kintone.log');
	 } else {
            error_log("Success: " . $response['body'] . "\n", 3, 'wp-to-kintone.log');
	    return $response;
	 }
}
$res = wpform_to_kintone($posted_data);
```

# 参考サイト

下記のリンクを参考にさせていただきました。

* [kintoneとWordPressの連携ネタ三題噺](https://qiita.com/akvabit/items/a3272a346a42c5f441e2)
* [WordPress で Kintone の API へアクセスする](https://qiita.com/miya0001/items/f5a2059576a8e94084a4)