WordPressの問い合わせ内容をLINE WORKSで確認したい

WordPressに問い合わせフォームを追加できるプラグインContactForm7はメールを送ることがメインとなりますが複数人で確認している場合、進捗はどうなっているのか分からないので問い合わせ内容をLINE WORKSのトークルームに送ることでトークルーム内で進捗管理もできるようになります。

そこで他サイトを参考に実装してみたこととつまづいた箇所などを記録しておきます。

目次

1.LINE WORKSのアカウントを作成

既にLINE WORKSを使用していて最高管理者または副管理者の管理者権限を持っている場合は、2.BOTの登録に進んでください。

LINE WORKSのウェブサイトにアクセスして右上の「今すぐはじめる」をクリック。

1.管理者としてはじめるをクリックして、いくつかの項目を入力してアカウントを開設します。

2.BOTを登録

  1. LINE WORKS Developers にアクセスして、「Console」ボタンをクリック
  2. Developer Consoleに入って、Botをクリック
  3. 登録ボタンをクリック
  4. 各項目を入力して保存ボタンをクリック
  5. Botが登録される
  6. Bot一覧に登録したBotが準備中となる
2−1.LINE WORKS Developers にアクセスして、「Console」ボタンをクリック
2−2.Developer Consoleに入って、Botをクリック
2−3.登録ボタンをクリック
2−4.各項目を入力して保存ボタンをクリック
2−5.Botが登録されました
2−6.登録されたBotが一覧に出ていて「準備中」になっています

3.BOTのサービス登録

  1. LINE WORKS Admin」にアクセスして、左のメニューからサービスをクリック
  2. サービスメニューから「bot」をクリック
  3. 右側の「Bot追加」ボタンをクリック
  4. 2-6で作成したBotにチェックを入れて追加ボタンをクリック
  5. Botが追加されたらOKボタンをクリック
  6. 追加されたBotは非公開(鍵がかかっている)になっているので公開にするためBotをクリック
  7. 修正ボタンをクリック
  8. トグルスイッチをオンにして保存ボタンをクリック
  9. 鍵マークが無くなり公開になった。7桁のBot Noは後ほど使用します
  10. LINE WORKS トーク画面のサービス通知に「Botリストが追加されました」と出るので「Botを利用」をクリック
  11. 作成したBot名でトークルームが作成されるので利用開始をクリック
  12. トークルームが利用開始となる(このトークルームは実際には使用しない)
  13. LINE WORKS Developers に戻って登録したBotがサービス中になっているのを確認する
3−1.「LINE WORKS Admin」にアクセスして、左のメニューからサービスをクリック
3−2.サービスメニューから「bot」をクリック
3−3.右側の「Bot追加」ボタンをクリック
3−4.2−6で作成したBotにチェックを入れて追加ボタンをクリック
3−5.Botが追加されたらOKボタンをクリック
3−6.追加されたBotは非公開(鍵がかかっている)になっているので公開にするためBotをクリック
3−7.修正ボタンをクリック
3−8.トグルスイッチをオンにして保存ボタンをクリック

3−9.鍵マークが無くなり公開になった。7桁のBot Noは後ほど使用します。
3−10.LINE WORKS トーク画面のサービス通知に「Botリストが追加されました」と出るので「Botを利用」をクリック
3−11.作成したBot名でトークルームが作成されるので利用開始をクリック
3−12.トークルームが利用開始となる(このトークルームは実際には使用しない)
3−13.LINE WORKS Developers に戻って登録したBotがサービス中になっているのを確認する

4.「API」を作成

  1. LINE WORKS Developers Console の「API」をクリックして、「アプリの新規追加」をクリック
  2. アプリ名を入力して「同意して利用する」ボタンをクリック
  3. OAuth Scopesの管理ボタンをクリック
  4. board.read」と「Bot」にチェックを入れて保存ボタンをクリック
  5. OAuth Scopesに「board.read」と「Bot」が表示されているのを確認して保存ボタンをクリック
  6. Service Accountの発行ボタンをクリック
  7. Service Accountを発行しますか?と出たらOKボタンをクリック
  8. 発行されましたと出たらOKボタンをクリック
  9. Service Accountが発行されたのを確認してから、Private Keyの「発行/再発行」ボタンをクリック
  10. OKボタンをクリックするとprivate_(数字).keyをダウンロードされます
  11. LINE WORKS トーク画面のサービス通知に「下記のアプリにService Accountが発行されました」と出る
4−1.LINE WORKS Developers Console の「API」をクリックして、「アプリの新規追加」をクリック
4−2.アプリ名を入力して「同意して利用する」ボタンをクリック
4−3.OAuth Scopesの管理ボタンをクリック
4−4.「board.read」と「Bot」にチェックを入れて保存ボタンをクリック
4−5.OAuth Scopesに「board.read」と「Bot」が表示されているのを確認して保存ボタンをクリック
4−6.Service Accountの発行ボタンをクリック
4−7.Service Accountを発行しますか?と出たらOKボタンをクリック
4−8.発行されましたと出たらOKボタンをクリック
4−9.Service Accountが発行されたのを確認してから、Private Keyの「発行/再発行」ボタンをクリック
4−10.OKボタンをクリックするとprivate_(数字).keyをダウンロードされます
4−11.LINE WORKS トーク画面のサービス通知に「下記のアプリにService Accountが発行されました」と出ます

5.LINE WORKSのトークルームへの招待

  1. 3−12で利用開始したトークルームの右上にある「︙」ボタン(ケバブメニュー)から招待するをクリック
  2. 招待するメンバーにチェックを入れて招待するボタンをクリック
  3. 新しいトークルームが作成される
5−1.3−12で利用開始したトークルームの右上にある「︙」ボタン(ケバブメニュー)から招待するをクリック
5−2.招待するメンバーにチェックを入れて招待するボタンをクリック
5−3.新しいトークルームが作成される

6.ディレクトリ構造

phpプログラムをインストールするディレクトリ構造は下記を想定していますので必要に応じて変更してください。

home_url		#wordpressをインストールしたディレクトリ
┗━wp-lineworks
┣━lineworks.php #LineWoksのトークルームに飛ばすプログラム本体
┣━vendor #Guzzle Httpライブラリ
┗━jwt #JWT(Json Web Token)格納用ディレクトリ
┗━src #JWTのライブラリ本体

7.Guzzle Http の設置

PHP用のHTTPクライアントであるGuzzle Httpを設置します。

当サイトの下記の記事を参考にしていただいて6.ディレクトリ構造のvendorディレクトリにコピーしてください。

8.JWTライブラリの設置

JWTとは、Json Web Tokenの略称でジョットと読むそうで、JSON形式のデータをURLセーフな方法で送信するための技術(ライブラリ)でこちらをGitHubからダウンロードします。

  1. Code をクリック
  2. Download ZIP をクリック
  3. php-jwt-main.zip がダウンロード
  4. php-jwt-main.zip ファイルを解凍
  5. srcディレクトリを丸々、6.ディレクトリ構造のsrcディレクトリにコピー
  6. 完了

9.プラグラム本体

lineworks.phpは下記コードをコピーして作成してください。

<?php

require_once 'jwt/src/BeforeValidException.php';
require_once 'jwt/src/ExpiredException.php';
require_once 'jwt/src/SignatureInvalidException.php';
require_once 'jwt/src/JWT.php';
use \Firebase\JWT\JWT;

require_once 'vendor/autoload.php';
use GuzzleHttp\Client;

//ここから
$key = "Private Keyファイルの内容を入れる";
$ClientID = "「Client ID」を入れる";
$secret = "「Client Secret」を入れる";
$ServiceAccount = "「Service Account」を入れる";
$botno = '「Bot No.」を入れる';
$cahnnelID = "「チャンネルID」を入れる";
//ここまでの値を編集してください

function get_jwt(){
	
	global $key,$ClientID,$ServiceAccount;
	
	$header = '{"alg":"RS256","typ":"JWT"}';
	$header = base64_encode($header);
	$header = str_replace(array('+','/','='), array('-','_',''), $header);
	
	$body = ['iss'=>"$ClientID",
	'sub'=>"$ServiceAccount",
	'iat'=>time(),
	'exp'=>time()+1800
	];
	$body = json_encode($body);
	$body = base64_encode($body);
	$body = str_replace(array('+', '/', '='), array('-', '_', ''), $body);
	
	$data = $header.".".$body;
	
	openssl_sign($data, $signature, $key, OPENSSL_ALGO_SHA256);
	
	$signature = base64_encode($signature);
	$signature = str_replace(array('+', '/', '='), array('-', '_', ''), $signature);
	
	$jwt =  $header . "." . $body . "." . $signature;
	
	return $jwt;
}


function get_form_mes(){
	$submission = WPCF7_Submission::get_instance();
	if($submission) {
		$fm7 = $submission->get_posted_data();
		$mes = "氏名\n" . $fm7['your-name'] . "\n\n";
		$mes .= "メールアドレス\n" . $fm7['your-email'] . "\n\n";
		$mes .= "題名\n" . $fm7['your-subject'] . "\n\n";
		$mes .= "メッセージ本文\n" . $fm7['your-message'] . "\n\n";
	}
	return $mes;
}


function getAccessToken($jwttoken){
	
	global $ClientID,$secret;
	
	$url = "https://auth.worksmobile.com/oauth2/v2.0/token";
	$options = [
	'form_params' => [
	"grant_type" => urlencode("urn:ietf:params:oauth:grant-type:jwt-bearer"),
	"assertion" => $jwttoken,
	"client_id" => $ClientID,
	"client_secret" => $secret,
	"scope" => "bot"
	],
	'headers' => [
	'Content-Type' => 'application/x-www-form-urlencoded'
	]
	];
	$client = new Client();
	$response = $client->request("POST", $url, $options);
	$status = (string) $response->getStatusCode();
	$body = $response->getBody();
	$json = json_decode($body, true);
	
	return $json["access_token"];
}


function send_message(){
	
	global $botno,$cahnnelID;
	
	$message = get_form_mes();
	
	$jwt = get_jwt();
	
	$token_now = getAccessToken($jwt);
	
	$url = "https://www.worksapis.com/v1.0/bots/$botno/channels/$cahnnelID/messages";
	$options = [
	'json' => [
	"content" => [
	"type" => "text",
	"text" => $message
	]
	],
	'headers' => [
	'Content-Type' => 'application/json',
	'Authorization' => "Bearer $token_now"
	]
	];
	$client = new Client();
	$response = $client->request("POST", $url, $options);
	
}

?>

13行目から18行目の6項目の値を下記を参考に編集してください。

  1. 4−10でダウンロードしたPrivate Keyファイルの内容(テキストエディターなどで開いて)をすべてコピーして13行目$keyの””内に貼り付ける。
  2. LINE WORKS Developers Console で作成したアプリを開いて、「Client ID」のコピーボタンをクリック後、14行目$CliendIDの””内に貼り付ける。
  3. 同じく「Client Secret」のコピーボタンをクリック後、15行目$Secretの””内に貼り付ける。
  4. 同じく「Service Account」のコピーボタンをクリック後、16行目$ServiceAccountの””内に貼り付ける。
  5. 2−6で作成したBotの数字7桁のIDをコピー後、17行目$botnoの”内に貼り付ける。
  6. 5−3で作成したトークルームの右上にある「︙」ボタン(ケバブメニュー)からチャンネルIDをクリック
  7. チャンネルIDのウィンドウが出てくるのでチャンネルIDボタンをクリック後、18行目$cahnnelIDの””内に貼り付ける。
9−1.4−10でダウンロードしたPrivate Keyファイルの内容(テキストエディターなどで開いて)をすべてコピーして13行目$keyの””内に入れる。
9−2.LINE WORKS Developers Console で作成したアプリを開いて、「Client ID」のコピーボタンをクリック後、14行目$CliendIDの””内に貼り付ける。
9−3.同じく「Client Secret」のコピーボタンをクリック後、15行目$Secretの””内に貼り付ける。
9−4.同じく「Service Account」のコピーボタンをクリック後、16行目$ServiceAccountの””内に貼り付ける。
9−5.2−6で作成したBotの数字7桁のIDをコピー後、17行目$botnoの”内に貼り付ける。
9−6.5−3で作成したトークルームの右上にある「︙」ボタン(ケバブメニュー)からチャンネルIDをクリック
9−7.チャンネルIDのウィンドウが出てくるのでチャンネルIDボタンをクリック後、18行目$cahnnelIDの””内に貼り付ける。

10.FTPでファイルをアップロードする

6.ディレクトリ構造の状態のままFTPソフトなどでサーバーにファイルをアップロードする。

11.WordPressと連携するためfunctions.phpを編集する

WordPressで使用しているテーマのテーマファイルエディターにある「functions.php」に下記の2行をコピーして貼り付ける。

1行目は9で作成したプログラムを読み込む記述で、2行目はContact Form 7のお問い合わせフォームで送信が成功したらLINE WORKSのトークルームへメッセージを送信する記述です。

require home_url() . '/wp-lineworks/lineworks.php';
add_action('wpcf7_mail_sent', 'send_message');

12.お問い合わせフォームから送信してみる

Contact Form 7のお問い合わせフォームから送信してみてトークルームに書き込まれたら成功です。

12.Contact Form 7のお問い合わせフォームから送信してみるとトークルームに書き込まれました。

13.つまずいた箇所

11.WordPressと連携するためfunctions.phpを編集が一番つまずきました。

  • 2行のコードを入れる場所が悪いとWordPress自体動かなくなった。
  • 1行目のプログラム読み込み行のディレクトリ指定の仕方(参考にしたサイトの構成と変更したので)
  • 子テーマを作成時にfunction.phpとしてしまっていたので(本当は”s”を入れてfunctions.php)入力した2行のコードが全く動かなく(アクションフックが動かなく)めちゃくちゃ調べまくって苦労した。

対策として親テーマを編集する場合はfunctions.phpをローカルにバックアップしておいた方が良いかと思います。(動かなくなった時にFTPソフトでアップロード出来るように)

子テーマを作成する時、ファイル名を間違えないように。(functions.phpには”s”を入れるのを忘れずに)

6.のディレクトリ構造を変更する時は、1行目の記述変更を忘れずに。

14.参考にさせていただいたサイト

下記サイトの記事を参考にさせていただきました。ありがとうございます。

ワードプレス、ContactForm7の内容を、LineWorksに。API2.0版

おまけ

最近ウイスキー沼にはまっている管理人ですが、モンキーショルダーはフルーティーな香りですごく飲みやすく美味しい。

美味しすぎるもったいないから1日1杯のハイボールで我慢して楽しんでいます。

Previous post ACCESSのフロントエンドファイルを起動時に自動更新するPowerShellスクリプト

コメントを残す