WordPressのフォームに入力された情報をもとに、backlogの課題を作成したい

こんにちは、GMOアドマーケティングのkayです。
フロントエンドエンジニアをしています。

表題にある開発について、ChatGPTと喧嘩しながらもなんとか実装したので備忘録として残しておきたいと思います。

やりたいこと

WordPressで作ったサイトのフォームに入力された情報をもとに、backlogの課題を自動的に作成する。

ことによって業務効率化を図る。

用意するもの

WordPress（編集するのはfunction.php）
フォーム用のプラグイン：MW WP Form
backlogアカウント

つまずいた箇所

詳細を解説する前に、特にここで引っかかった！という場所書いておきます。
ここでつまずいていたせいで体感2年ぐらいかけて実装したので、皆さんはつまずかないようにお気をつけください…

★ functionの名前は固有のものにしよう
　ほかにもフォームがいくつかあり、同様の指定をしていたので混在してしまっていた。そりゃそうだ

★ $マークが必要なところ、要らないところのコピペミスに気をつけよう
　$hoge　{$hoge}　(‘hoge’)　など、同じ変数が違う型で出てくるので、コピペする際は気をつけましょう。

★ 課題の登録者
　登録者IDを指す「createdUserId」というパラメータもありますが、functions.phpでは指定できない。
　→ 「APIキーを取得したユーザー」が登録者となります。

★ 課題の必須項目
　最後に悩んだのがここ。
　プロジェクトごとに、課題を立てるときの必須項目を決められるんですが、この必須項目が足りてないと課題を作ってくれません。世知辛。

つまずいた箇所② ：ChatGPTに質問するとき

★ コードをまるっとコピペして添削してもらいたいとき
　「どこが間違ってるかわからない！！！」と投げやりモードになってしまったわたし。
　コードをそのままコピペして「これのどこが間違ってるか教えて」と怠惰な質問をしたところ、

英語で返事が返ってきてしまいました。

色々と試してみたところ、
　・こういうコードがあるんだ
　・「コード」
　・どこが間違ってるか教えてほしい
の順番（日本語でコードを挟む）で質問を投げかけると、日本語で返してくれました。

★ 情報が古いことがある
　無料版のChatGPTを使っているので仕方ないのですが、たまに古い情報をくれます。

　ここでもらった回答の「現在のバージョン」も古く（項目が見つからず）、URLはリンク切れしていました。
　アップデートが頻繁に行われるサービスだと参考にならない場合もあるかもしれません。

実装したコード詳細：フォーム

MW WP Formを使い、フォームを作成します。中身はこんな感じになると思います。
※MW WP Form を使ったフォームの作成方法はもっと詳しい記事探してみて！たぶんあります

<div class="form">
  <dl>
    <dt>
      <label for="last_name">姓</label>
    </dt>
    <dd>[mwform_text name="last_name" id="last_name" placeholder="山田"]</dd>
    <dt>
      <label for="first_name">名</label>
    </dt>
    <dd>
      [mwform_text name="first_name" id="first_name" placeholder="太郎"]
    </dd>
    <dt>
      <label for="fage">年齢</label>
    </dt>
    <dd>
      [mwform_text name="age" id="age" placeholder="20"]
    </dd>
    <dt>
      <label for="telephone">電話番号</label>
    </dt>
    <dd>
      [mwform_text name="telephone" id="telephone" placeholder="03-1234-5678"]
    </dd>
    <dt>
      <label for="favorite_food">好きな食べもの</label>
    </dt>
    <dd>
      [mwform_text name="favorite_food" id="favorite_food" placeholder="ラーメン"]
    </dd>

  <div class="form_btn">
    <p>[mwform_backButton value="戻る"]</p>
    <p>[mwform_submitButton name="mwform_submitButton-xxx" confirm_value="確認ページへ" submit_value="送信"]</p>
  </div>
</div>

<dl>

<dt>

</dt>

<dd>[mwform_text name="last_name" id="last_name" placeholder="山田"]</dd>

<dt>

</dt>

<dd>

[mwform_text name="first_name" id="first_name" placeholder="太郎"]

</dd>

<dt>

</dt>

<dd>

[mwform_text name="age" id="age" placeholder="20"]

</dd>

<dt>

</dt>

<dd>

[mwform_text name="telephone" id="telephone" placeholder="03-1234-5678"]

</dd>

<dt>

<label for="favorite_food">好きな食べもの</label>

</dt>

<dd>

[mwform_text name="favorite_food" id="favorite_food" placeholder="ラーメン"]

</dd>

<p>[mwform_backButton value="戻る"]</p>

<p>[mwform_submitButton name="mwform_submitButton-xxx" confirm_value="確認ページへ" submit_value="送信"]</p>

</div>

このフォームをサイト上で見ると、こんな感じになります。

実装したコード詳細：functions.php

今回の主な課題は、functions.phpと仲良くなることです。

実装したコードを細かく解説しますので、そんなことより結論を！！という方は飛ばしてくださいね。

① API送信＆送信完了へのリダイレクトfunction宣言

function add_backlog_task(

1	function add_backlog_task(

⚠️ここの名前は固有にする

② フォームに入力する項目をそれぞれ定義する

  $last_name,
  $first_name,
  $age,
  $telephone,
  $favorite_food
) {

$last_name,

$first_name,

$age,

$telephone,

$favorite_food

) {

※MW WP Formに指定しているnameを定義します

③ backlogのURL定義

  $host = 'hogehoge.backlog.jp';

1	$host = 'hogehoge.backlog.jp';

④ APIキー定義

  $apiKey = 'kokoniAPIkeygahairuyososhitehontouhamottonagaiyo';

1	$apiKey = 'kokoniAPIkeygahairuyososhitehontouhamottonagaiyo';

backlogログイン > 個人設定 > API から発行できます。
⚠️このとき、「課題作成者にしたいアカウント」でAPIキーを作成すること。

APIキー作り方参考：
APIの設定 – Backlog ヘルプセンター

⑤ 作成する課題の本文

  $descriptionMsg = '';
  $descriptionMsg .= <<<EOM

  【姓】{$last_name}
  【名】{$first_name}
  【年齢】{$age}
  【電話番号】{$telephone}
  【好きな食べもの】{$favorite_food}

  EOM;

$descriptionMsg = '';

$descriptionMsg .= <<<EOM

【姓】{$last_name}

【名】{$first_name}

【年齢】{$age}

【電話番号】{$telephone}

【好きな食べもの】{$favorite_food}

EOM;

※ちなみに、下記のようにして名前をまとめたり、

  【名前】{$last_name}{$first_name}

1	【名前】{$last_name}{$first_name}

※単位をつけたりもできます。

  【年齢】{$age}歳

1	【年齢】{$age}歳

⑥ 登録する課題の詳細

  $params = array(

    'projectId' => 0123456789, //<span style="font-weight: bold; font-family: sans-serif;">プロジェクトID</span>

    'summary' => '【フォームからの問い合わせ】' . $last_name . $first_name . '様', //課題の件名

    'issueTypeId' => 0123456789, //種別ID

    'priorityId' => 3, //優先度 ※2：高 3：中 4：低

    'assigneeId' => 0123456789, //担当者ID

    'description' => $descriptionMsg, //さっき⑤で指定した本文

  );

$params = array(

'projectId' => 0123456789, //<span style="font-weight: bold; font-family: sans-serif;">プロジェクトID</span>

'summary' => '【フォームからの問い合わせ】' . $last_name . $first_name . '様', //課題の件名

'issueTypeId' => 0123456789, //種別ID

'priorityId' => 3, //優先度 ※2：高 3：中 4：低

'assigneeId' => 0123456789, //担当者ID

'description' => $descriptionMsg, //さっき⑤で指定した本文

);

※ 他にも指定できるパラメータはこちら
課題情報の更新 | Backlog Developer API | Nulab

⑦ フォームとbacklogをAPI連携する

  $headers = array('Content-Type:application/x-www-form-urlencoded');
  $context = array(
    'http' => array(
    'method' => 'POST',
    'header' => $headers,
    'ignore_errors' => true
    )
  );

  $url = 'https://' . $host . '/api/v2/issues?apiKey=' . $apiKey . '&' . http_build_query($params, '', '&');
  $response = file_get_contents($url, false, stream_context_create($context));

$headers = array('Content-Type:application/x-www-form-urlencoded');

$context = array(

'http' => array(

'method' => 'POST',

'header' => $headers,

'ignore_errors' => true

)

);

$url = 'https://' . $host . '/api/v2/issues?apiKey=' . $apiKey . '&' . http_build_query($params, '', '&');

$response = file_get_contents($url, false, stream_context_create($context));

※ここの処理いまいちわからなかったので、ChatGPTに解説してもらいました。

入力された情報をパラメータに乗せて渡すことで、API連携ができる、ということみたい。教えてくれてありがと。

⑧ 完了ページへのリダイレクト処理を行う

  wp_redirect('/contact/form/complete/');
  exit;
}

wp_redirect('/contact/form/complete/');

exit;

}

⑨ フォーム送信完了後、メールを送るfunction

function form_after_send($Data)
{

1 2	function form_after_send($Data) {

⑩ MW WP FormのID

  if ($Data->get_form_key() === 'mw-wp-form-xxxx') {

1	if ($Data->get_form_key() === 'mw-wp-form-xxxx') {

⑪ フォームの中身を変数「$Data」に格納

    $last_name = $Data->get('last_name');
    $first_name = $Data->get('first_name');
    $age = $Data->get('age');
    $telephone = $Data->get('telephone');
    $favorite_food = $Data->get('favorite_food');

$last_name = $Data->get('last_name');

$first_name = $Data->get('first_name');

$age = $Data->get('age');

$telephone = $Data->get('telephone');

$favorite_food = $Data->get('favorite_food');

⑫ ①のデータを呼び出す

    add_backlog_task(
      $last_name
      $first_name,
      $age,
      $telephone,
      $favorite_food
    );
    exit;
  }
}

add_backlog_task(

$last_name

$first_name,

$age,

$telephone,

$favorite_food

);

exit;

}

⑬ ↑で指定した固有のfunction「form_after_send」と、フォームのID「xxxx」を呼び出す

add_action('mwform_after_send_mw-wp-form-xxxx', 'form_after_send');

1	add_action('mwform_after_send_mw-wp-form-xxxx', 'form_after_send');

すべて設定できたら、フォームが送信されたときに自動でbacklogの課題を作ってくれます！

実装したコードまとめ

function add_backlog_task(
  $last_name,
  $first_name,
  $age,
  $telephone,
  $favorite_food
) {
  $host = 'hogehoge.backlog.jp';
  $apiKey = 'kokoniAPIkeygahairuyososhitehontouhamottonagaiyo';
  $descriptionMsg = '';
  $descriptionMsg .= <<<EOM

  【姓】{$last_name}
  【名】{$first_name}
  【年齢】{$age}
  【電話番号】{$telephone}
  【好きな食べもの】{$favorite_food}

  EOM;

  $params = array(
    'projectId' => 0123456789,
    'summary' => '【フォームからの問い合わせ】' . $last_name . $first_name . '様',
    'issueTypeId' => 0123456789,
    'priorityId' => 3,
    'assigneeId' => 0123456789,
    'description' => $descriptionMsg,
  );
  $headers = array('Content-Type:application/x-www-form-urlencoded');
  $context = array(
    'http' => array(
      'method' => 'POST',
      'header' => $headers,
      'ignore_errors' => true
    )
  );

  $url = 'https://' . $host . '/api/v2/issues?apiKey=' . $apiKey . '&' . http_build_query($params, '', '&');
  $response = file_get_contents($url, false, stream_context_create($context));
  wp_redirect('/contact/form/complete/');
  exit;
}

function form_after_send($Data)
{
  if ($Data->get_form_key() === 'mw-wp-form-xxxx') {
    $last_name = $Data->get('last_name');
    $first_name = $Data->get('first_name');
    $age = $Data->get('age');
    $telephone = $Data->get('telephone');
    $favorite_food = $Data->get('favorite_food');

    add_backlog_task(
      $last_name
      $first_name,
      $age,
      $telephone,
      $favorite_food
    );
    exit;
  }
}

add_action('mwform_after_send_mw-wp-form-xxxx', 'form_after_send');

function add_backlog_task(

$last_name,

$first_name,

$age,

$telephone,

$favorite_food

) {

$host = 'hogehoge.backlog.jp';

$apiKey = 'kokoniAPIkeygahairuyososhitehontouhamottonagaiyo';

$descriptionMsg = '';

$descriptionMsg .= <<<EOM

【姓】{$last_name}

【名】{$first_name}

【年齢】{$age}

【電話番号】{$telephone}

【好きな食べもの】{$favorite_food}

EOM;

$params = array(

'projectId' => 0123456789,

'summary' => '【フォームからの問い合わせ】' . $last_name . $first_name . '様',

'issueTypeId' => 0123456789,

'priorityId' => 3,

'assigneeId' => 0123456789,

'description' => $descriptionMsg,

);

$headers = array('Content-Type:application/x-www-form-urlencoded');

$context = array(

'http' => array(

'method' => 'POST',

'header' => $headers,

'ignore_errors' => true

)

);

$url = 'https://' . $host . '/api/v2/issues?apiKey=' . $apiKey . '&' . http_build_query($params, '', '&');

$response = file_get_contents($url, false, stream_context_create($context));

wp_redirect('/contact/form/complete/');

exit;

}

function form_after_send($Data)

{

if ($Data->get_form_key() === 'mw-wp-form-xxxx') {

$last_name = $Data->get('last_name');

$first_name = $Data->get('first_name');

$age = $Data->get('age');

$telephone = $Data->get('telephone');

$favorite_food = $Data->get('favorite_food');

add_backlog_task(

$last_name

$first_name,

$age,

$telephone,

$favorite_food

);

exit;

}

add_action('mwform_after_send_mw-wp-form-xxxx', 'form_after_send');

おかげで仲良くなれました。

まとめ

ググったらわかるやろ！と思いながら、今回やりたかったことをまとめている記事がなかったので、この機会にまとめられてよかったです。

最後に、「どうしても距離が縮まらない」をどうぞ。

さいごまでお読みいただきありがとうございました！

kay

やりたいこと

用意するもの

つまずいた箇所

つまずいた箇所② ：ChatGPTに質問するとき

実装したコード詳細：フォーム

実装したコード詳細：functions.php

実装したコードまとめ

まとめ

おすすめ

Railsのタグ機能でN+1問題解消

Professional Scrum Master ⅠとⅡに合格しました

background-imageを活用して、アップする画像を1個で済ませたい