2020.11.16

【備忘録】WordPress（ContactForm7）でkintoneに画像を保存する方法

Web制作

こんにちは、MaromaroのTakaです。
今回はWordPressの無料フォームプラグインの
ContactForm7とkintone連携時に画像をkintoneに保存する方法を記事にしました。

使用するプラグインは下記です。
・Contact Form 7
・Form data to kintone

はじめに

通常、「Form data to kintone」を使用すれば、
簡単にフォームへの入力データをkintoneに送信することが可能ですが、
画像データ等は仕様上そのままレコードに送っても保存することが出来ません。

基本的な仕様として、画像データをkintoneにアップロードし、
返り値として返ってきたファイルキーをkintoneに送信しレコードに登録する形となります。

やり方

まず、連携にあたり操作するファイルは2ファイルとなり、
まずWordPressディレクトリ内
plugins/contact-form-7/includes/function.php
※テーマフォルダのfunction.phpではないので注意してください。

そして新たに、使用するテーマフォルダのルートに
新しくファイルを一つ作成します。
今回名前は「cf7-to-kintone.php」とします。

function.php

function.phpの最終行に以下を追記します。

add_action( 'form_data_to_kintone_saved', 'add_contact_data');
function add_contact_data($res = array(),$body = array()) {
    if ( $submission = WPCF7_Submission::get_instance() ){
        $posted_data = $submission-&gt;uploaded_files();
    }
    require get_template_directory() . '/cf7-to-kintone.php';
return $res;
}

add_actionのform_data_to_kintone_savedが肝になっており、
kintone連携時に発火する形となっております。

$posted_data = $submission->uploaded_files();

↑でアップロードするファイルのデータをkintone保存時に取得します。

cf7-to-kintone.php

以下を記載したファイルを作成します。

<?php


function PostAplData($posted_data,$res,$body) {
    $api_token = kintoneのAPIトークン;
    $sub_domain = kintoneのサブドメイン;;
    $app_id = kintoneアプリのID;
    $record_id = $res['body']//保存先のレコードIDがとれます;
    $record_id = json_decode($record_id,true);//jsonになっているのでデコードしてください
    $file= $posted_data['specification']//function.phpの$posted_dataからpostされたファイルの情報が取れます;
    $fileName = basename($file);
    $filePath = pathinfo($file);
    $filePath = $filePath["dirname"];
    $curl = curl_init();
    curl_setopt_array($curl, array(
    CURLOPT_URL => "https://$sub_domain.cybozu.com/k/v1/file.json",
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST => "POST",
    CURLOPT_POSTFIELDS => "------WebKitFormBoundary7MA4YWxkTrZu0gW\r\n".
    "Content-Disposition: form-data; name=\"file\"; filename=\"$fileName\"\r\n".
    "Content-Type: text/plain"."\r\n\r\n".
    file_get_contents($file) . "\r\n" .
    "------WebKitFormBoundary7MA4YWxkTrZu0gW--",
    CURLOPT_HTTPHEADER => array(
    "X-Cybozu-API-Token: $api_token",
    "content-type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW"
    ),
    ));
    $response = curl_exec($curl);//ここでファイルキーを取得します
    curl_close($curl);
    $url = "https://$sub_domain.cybozu.com/k/v1/record.json";
    $headers = [
      "X-Cybozu-API-Token: $api_token",
      'Content-Type: application/json'
    ];
    $body = [
      'app' => $app_id,
      'id' => $record_id['id'],
      'record' => [
        '電気明細' => [
          'value' => [json_decode($response)]
        ]
      ]
    ];
    // JSONに変換
    $json = json_encode($body);
    // 初期化
    $curl = curl_init($url);
    curl_setopt($curl, CURLOPT_CUSTOMREQUEST, 'PUT');
    curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($curl, CURLOPT_POSTFIELDS, $json);
    //feedbackにrevision:2とecho されるので対策で下のオプション追加
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    $response = curl_exec($curl);
    curl_close($curl);
    return true;
}
PostAplData($posted_data,$res,$body);
?>

無駄な部分はあるかもしれませんが、
上記となります。

↑二つのファイルでフォーム送信時に当該レコードに
画像登録がされます。

少し応用すれば他のデータもレコードに送信可能です。（$body=のrecord部分に追記するだけです）

以上となります。

Web制作