WordPress プラグイン作成 〜アンケート挿入〜

WordPressのプラグインを作成中です。ようやくアンケート挿入が出来上がって来たところです。

アンケート挿入

今回作成しているプラグインの大まかな処理は以下の通りです。

  1. プラグインを有効にした時、アンケートに必要なデータを保存するDB(テーブル)を作成する
  2. ダッシュボードで投稿に挿入するアンケートを作成する
  3. 作成したアンケートを記事が表示する時にDBから作成したアンケート情報を取得する
  4. 取得したアンケート情報をJSONでしHTMLに出力する(scriptタグ)
  5. プラグインから読み込んだJSで画面がロードされた時にJSONからランダムに表示するアンケート情報を取得する
  6. 取得した情報からアンケート入力フォームを作成する

サンプル

作成したデータ(CSV)は以下のようなものです。

question_id, question, answer1, answer2, answer3, answer4, answer5, html_class, html_style, click_count
15, あなたの性別はどちらですか?, 男, 女, , , , respond, , 0
16, あなたの年齢は?, 10才以下, 10代, 20代, 30代, 40以上, site-navigation, , 0
17, あなたの職業は?, 学生, フリーター, 自営業, 社員(非IT関連), 社員(IT関連), main, , 0
18, あなたの趣味は?, 音楽系, ゲーム系(将棋など), アウトドア系, スポーツ系, 学問系(文学や歴史など), reply-title, , 0
19, あなたはブロガーですか?, はい, いいえ, , , , primary, , 0, 
20, あなたは日本人ですか?(Are You Japanese?), はい(Yes), いいえ(No), , , , comments, , 0

これでとりあえずは、アンケートが表示できました。

まとめ

プラグインを有効にした時の処理(index.php)
キモになるのは下の部分です。

add_action('admin_menu', 'addCustomQuestionary' );
add_action('wp_enqueue_scripts', 'insertQuestionary' );
do_action( 'addCustomQuestionary' );

WordPressで使用できるアクションフックに以下のメソッドを登録します。

  1. addCustomQuestionary(ダッシュボードのメニュー)
  2. insertQuestionary(これはアンケート挿入する時)

そしてaddCustomQuestionaryを実行するように設定します。do_action( 'addCustomQuestionary' );

これで、ダッシュボードで作成したアンケート情報を投稿記事に挿入します。
ちょっと長くなりましたが、ここら辺で失礼いたします。

でわでわ。。。

    // HTML挿入用のJSを読み込む
    echo '';


WordPressプラグイン作成 〜HTML挿入まで完了〜

WordPressプラグインの作成中です。このプラグインを有効にしたときに、作成したアンケート(HTML)を投稿画面の指定した部分に挿入するのが目標です。

大まかに作成したものを画面のmainクラス(HTMLクラス)の下に配置したのが下のキャプチャーです。

はっきり言って使い物になりません。。。

しかし、作成したアンケートを挿入することができたのでとりあえずは一区切りです。ここまでのソースはgitに登録してあります。

HTML挿入

HTMLを挿入するのに実装したものは以下のものになります。

プラグイン.php
/*
Plugin Name: CustomQuestionaryPlugin
Plugin URI: (プラグインの説明と更新を示すページの URI)(未決定)aaa
Description: アンケートを作成、ブログ記事の中に埋め込むことができ、集計結果をダッシュボードで確認ができる。
Version: 1.0
Author: ZenryokuService
Author URI: https://zenryokuservice.com/
License: GPL2
*/
// 表示する内容
function helloCustomQuestionary() {
}

// アンケートを記事に挿入するスクリプト
function insertQuestionary() {

}

// ダッシュボードに追加するための関数(プラグイン有効時)
function addCustomQuestionary() {
    // ダッシュボードにこの表示が出るように追加する
    add_menu_page( 'Test Plugin', 'CustomQuestionary', 'manage_options' , 'test-plugin' , 'helloCustomQuestionary' );
    // 投稿記事にアンケートを表示するスクリプトをリンクする
    add_action( 'wp_enqueue_scripts', 'insertQuestionary' );
}
// プラグインをダッシュボードに表示する
add_action('admin_menu', 'addCustomQuestionary' );
// プラグイン用のJSを読み込むようにする
add_action('wp_enqueue_scripts', 'insertQuestionary' );
do_action( 'addCustomQuestionary' );
ダッシュボードに表示.php

これは普通のPHPファイルで、サーバーサイド処理をPHPで、クライアント側に表示するものをHTMLで実装します。

<?php サーバーサイド ?>
<h1>Custom Questionary Plugin</h1>
・
・
・
InsertQuery.php

これは、ダッシュボード画面からDBに作成したアンケート情報を登録するためのphpです。
JS側から、非同期リクエストを送信しそれを受けてDB登録処理を行います。

DeleteQuery.php

上と同様に、削除処理を行います。

表示位置に関して


上のように表示している部分は、アンケートのボタンと質問です。
いかんせんダッシュボードではBootStrapを使用していたのですが、WordPressにあるstyle.cssが使用されているので、上のような表示になります。部分的にスタイルを適用できると良いのですが。。。

表示位置を変えるにはHTMLクラスの指定を変えます。

初めはid="main"のタグの後ろ。。。つまりは、記事の一番下にアンケートを追加しました。
上の表示はDBに登録している”hrml_class"(スペルミス)のデータ部に対応するidを持つタグの下に配置するようにしていますのでヘッダーメニューの下に来ました。

アンケートの表示がイマイチですが、とりあえずはアンケート登録〜表示(挿入)までの実装ができました。

でわでわ。。。



php BugFix foreach 〜foreachに入らない〜

PHPでのforeach文に処理が入らないケースに関してつまづいたので記載します。

関連記事はこちら

どんなコードで動かないか?

ズバリ下のコードです。

get_results('SELECT * FROM QUESTIONARY', ARRAY_A);
    echo count($result);
    // ここから下はデータがある時のみ表示
    foreach($result as $key => $data) {
        echo '';
        echo '' . $data->question . '';
        echo '' . $data->answer1 . '';
        echo '' . $data->answer2 . '';
        echo '' . $data->answer3 . '';
        echo '' . $data->answer4 . '';
        echo '' . $data->answer5 . '';
        echo '';
    }
?>

$resultの中には配列が入っていることを確認しているのですが、いかんせん。。。動かない。。。

Fix(解決)

foreach文の中の処理が昨日していなかったようです。。。
echo "Hello";と処理を記載したところ問題なく処理が動きました。。。

つまり、$data->プロパティ名の呼び出し方が悪い。
$data['プロパティ名']の形で実装するのが正しいということでした。

修正結果

具体的には以下のようなコードです。

get_results('SELECT * FROM QUESTIONARY', ARRAY_A);
    // ここから下はデータがある時のみ表示
    foreach($result as $key => $data) {
        echo '';
        echo '' . $data['question'] . '';
        echo '' . $data['answer1'] . '';
        echo '' . $data['answer2'] . '';
        echo '' . $data['answer3'] . '';
        echo '' . $data['answer4'] . '';
        echo '' . $data['answer5'] . '';
        echo '';
    }
?>

でわでわ。。。


関連ページ

  1. WordPress プラグイン作成〜DBを使用する〜
  2. PHP PDO 〜MySQLにアクセスする〜
  3. PHP Ajax 〜DBに登録したデータを受信する〜
  4. Google Maps API PHP連携 〜マップ情報をDBに登録する〜
  5. PHP Image File 〜iPhoneやAndroidでの画像送受信の問題〜
  6. AngularJS Routing 〜PHPをWeb APIにする〜
  7. WordPress PHPカスタム〜根本的に見た目を変える〜
  8. WordPress PHPカスタム〜根本的に見た目を変える2〜
  9. Eclipse PHPプラグイン 〜ElipseでWordPress環境を構築〜
  10. WordPress テスト実装 〜heade-test.phpを表示〜
  11. AngularJS + PHP 〜WordPressと連携する〜
  12. AngularJS + PHP 〜AngularJSの実装〜
  13. AngularJS + PHP 〜AngularJSの実装2〜
  14. WordPress 処理解析 ~index.phpを眺める~
  15. WordPress Plugin NewStatPress ~アクセス解析プラグインAPIを使う~
  16. WordPress 処理解析 ~ログイン処理を調べる~
  17. WordPressカスタム〜アンケートボタンを追加する(設計)〜
  18. WordPressカスタム〜プラグインの作成〜
  19. WordPressカスタム〜ダッシュボードのプラグイン画面作成〜
  20. WordPressカスタム〜ダッシュボードのプラグイン画面作成2〜
  21. WordPressカスタム〜ダッシュボードのプラグイン画面作成3〜
  22. WordPress プラグイン作成〜アンケート作成プラグインを作る〜


WordPress $wpdb 使い方〜エラーの出力を行う〜

WordPressプラグインの作成中です。
そして、DBに作成したデータを登録する処理を作成しようとしています。

$wpdb

このオブジェクトを使用してやると、自力でDBコネクションとかトランザクションの管理をしなくて良いです。
そーゆーフレームワークがWordPressです。つまり、WordPressでDBアクセスオブジェクトを用意しているという事です。

そんなわけで、使い方です。

$wpdbの使い方

参考サイト:WordPress Codex(日本語)

ここのページによると、global $wpdbと宣言してから使用しましょうとあります。

しかし、プラグインで使用するときはイベントで起動するfunctionにて宣言する必要があります。
詳細はこちらのページに記載しました。

実装サンプル

リクエストの送信はJSで非同期に送信します。

// 作成したフォームを出力する
function outputForm() {
    if (isCreated == false) {
        alert("Please create form ");
    }
    let dom = document.getElementById("result");
    if (dom == null || typeof dom == 'undefined') {
        alert("Error");
        return;
    }
    let question = document.getElementById("question").innerText;
    let inputs = dom.getElementsByTagName("button");
    let ansArray = [];
    let htmlClass = document.getElementById("insertPos").value;
    let htmlStyle = "";
    for (let i = 0; i < inputs.length; i++) {
        ansArray.push(inputs[i].innerText);
    }
    // 送信するデータ(リクエストパラメータ)
    let data = createSendData(question, ansArray, htmlClass, htmlStyle);
    // DBへデータの登録(汎用的に作成したメソッドなので後ろの引数は全てnullにしている)
    // 下のメソッドは次のように書いても良い(JSの場合) => createXHR("POST", stateChangeMethod);
    let xhr = createXHR(stateChangeMethod, null, null);
    // JSONで送信する
    xhr.open("POST", '');
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(JSON.stringify(data));

}

そして、送信するJSONを作成するのに下のメソッドで作成しました。

function createSendData(question, ansArray, htmlClass, htmlStyle) {
    let obj = {};
    obj.question = question;
    for (let i = 0; i < ansArray.length; i++) {
        obj["ans" + i] = ansArray[i];
    }
    obj.hrml_class = htmlClass;
    // 未使用
    obj.html_style = "";
    return obj;
}

大まかにこのような実装です。

サーバーサイド

phpで実装しているものです。

// JSONリクエストを受け取る
$json = file_get_contents('php://input');
$data = json_decode($json);
// (プラグインフォルダにあるので)WordPressはすでに読み込まれている
$vals = json_decode($json, true);

// JSONプロパティの値を取得する

$insertSQL = "insert into questionary('question', 'answer1', 'answer2', 'answer3', 'answer4', 'answer5', 'hrml_class', 'html_style') values (";

$array = get_object_vars($data);
$keys = array('question', 'ans0', 'ans1', 'ans2', 'ans3', 'ans4', 'hrml_class', 'html_style');

for($count = 0; $count < 8; $count++) {
    if (array_key_exists($keys[$count], $array)) {
        $dd = $array[$keys[$count]];
    } else {
        $dd = "";
    }
    if ($dd != "") {
        $insertSQL .= "'" . $dd . "',";
    } else {
        $insertSQL .= "'',";
    }
}
// $insertSQL .= "'" . $vals['htmlClass'] . "','" . $vals['htmlStyle'] . "'";
$insertSQL = substr($insertSQL, 0, -1);
$insertSQL .= ");";

global $wpdb;

$wpdb->query($insertSQL);


wpdbではinsertとかselectなどSQLを組まなくても実行できるようにできていますが、自分はSQLでやったほうが楽だったのでSQLを使用しました。
したがって、使用するメソッドは「query」のみになりました(笑)
wpdbの関数リファレンス

早速エラー!

上のコードで、SQLを実行してもデータが登録できませんでした。
なので下のようなコードでエラーを出力します。
echo $wpdb->last_error;関数ではないので注意です。

そして出力されたエラーは「SQL間違っているよ」でした。
結局できたのは下のようなコードでした。

    // 宣言しないと落ちる
    global $wpdb;
    // テーブルを作成する(ヒアドキュメントはタブが入流ので)
$sql = <<<EOM
CREATE TABLE IF NOT EXISTS MYSQL.QUESTIONARY(
question_id int NOT NULL PRIMARY KEY AUTO_INCREMENT,
question varchar(60),
answer1 varchar(60),
answer2 varchar(60),
answer3 varchar(60),
answer4 varchar(60),
answer5 varchar(60),
hrml_class varchar(15),
html_style varchar(15),
click_count bigint NOT NULL DEFAULT 0);
EOM;
    $wpdb->query( $sql );
    // Footerの文言削除
    add_filter('admin_footer_text', '__return_empty_string');
    // 画面作成用のPHPファイルを読み込みます。
    require_once(plugin_dir_path( __FILE__ ) . '/manage.php');
}

ポイント

  1. 登録時にデータを投入しないカラム「click_count」に関して、CREATE TABLE時に「DEFAULT」を定義していないとエラーになる。
  2. PHPではエラーを意図的に出力する必要がある。

以上のところでした。


    // 宣言しないと落ちる
    global $wpdb;
    // テーブルを作成する(ヒアドキュメントはタブが入流ので)
$sql = <<<EOM
CREATE TABLE IF NOT EXISTS MYSQL.QUESTIONARY(
question_id int NOT NULL PRIMARY KEY AUTO_INCREMENT,
question varchar(60),
answer1 varchar(60),
answer2 varchar(60),
answer3 varchar(60),
answer4 varchar(60),
answer5 varchar(60),
hrml_class varchar(15),
html_style varchar(15),
click_count bigint NOT NULL DEFAULT 0);
EOM;
    $wpdb->query( $sql );
    // Footerの文言削除
    add_filter('admin_footer_text', '__return_empty_string');
    // 画面作成用のPHPファイルを読み込みます。
    require_once(plugin_dir_path( __FILE__ ) . '/manage.php');
    }

でわでわ。。。


関連ページ

  1. WordPress プラグイン作成〜DBを使用する〜
  2. PHP PDO 〜MySQLにアクセスする〜
  3. PHP Ajax 〜DBに登録したデータを受信する〜
  4. Google Maps API PHP連携 〜マップ情報をDBに登録する〜
  5. PHP Image File 〜iPhoneやAndroidでの画像送受信の問題〜
  6. AngularJS Routing 〜PHPをWeb APIにする〜
  7. WordPress PHPカスタム〜根本的に見た目を変える〜
  8. WordPress PHPカスタム〜根本的に見た目を変える2〜
  9. Eclipse PHPプラグイン 〜ElipseでWordPress環境を構築〜
  10. WordPress テスト実装 〜heade-test.phpを表示〜
  11. AngularJS + PHP 〜WordPressと連携する〜
  12. AngularJS + PHP 〜AngularJSの実装〜
  13. AngularJS + PHP 〜AngularJSの実装2〜
  14. WordPress 処理解析 ~index.phpを眺める~
  15. WordPress Plugin NewStatPress ~アクセス解析プラグインAPIを使う~
  16. WordPress 処理解析 ~ログイン処理を調べる~
  17. WordPressカスタム〜アンケートボタンを追加する(設計)〜
  18. WordPressカスタム〜プラグインの作成〜
  19. WordPressカスタム〜ダッシュボードのプラグイン画面作成〜
  20. WordPressカスタム〜ダッシュボードのプラグイン画面作成2〜
  21. WordPressカスタム〜ダッシュボードのプラグイン画面作成3〜
  22. WordPress プラグイン作成〜アンケート作成プラグインを作る〜

WordPress フッター削除

WordPressプラグインの作成中にフッターの表示部分「バージョンX.X.X」の部分が入力項目に被り。。。
早い話がじゃマナになったので削除することにしました。

調べてみると、以下のような方法があるようです。

  1. プラグインで削除
  2. 設定で削除(英語なので翻訳が必要)
  3. 自力で削除

そして、上のどれも自分のやりたいこととちょいと違ったのでそれを解決するのに少し強引な方法を使用しました。
下のように、「バージョン〜」と言う表示があるのですが、それが邪魔になるのは「項目追加」を行ったときなので。。。。

邪魔になるタイミングで対象になるDOM(エレメント)を削除しました。

// 質問の回答項目を追加
function addRow(button) {
    // WPフッターが邪魔なので削除する
    let delDom = document.getElementById("wpfooter");
    delDom.parentNode.removeChild(delDom); ...

上のようなコードで削除できました。仕様としてはイマイチなものです。。。

でわでわ。。。



WordPress Plugin作成 〜PHP版WebAPI XMLHttpRequest〜

XMLHttpRequest

いきなり、本題に入ります。WordPressプラグインを作成中ですが、今回の実装の肝になるものです。
ちなみにチュートリアルはこちらにありました。MDNのちゃんとしたドキュメントです。そして日本語です。

どーゆーこと?

アンケートの作成時に、作成したアンケートをDBに登録します。動きとしては下のような感じです。

しかし、この状態では出力したHTMLをアラートで表示するだけです。

ここで、DB登録を行うための処理を作成するのが今回の記事になります。

非同期通信処理

本記事の初めに記載した「XMLHttpRequest」を使用します。
これは、非同期通信の基本となるものです。
今までに紹介したAngularなどもXMLHttpRequesを使用しています。($httpオブジェクト)

XMLHttpRequestは、HTMLのFormタグで作成したボタン<form action="リクエストの送信先"/>のような、コードで送信する、同期通信に対して、非同期で処理を行います。

同期と非同期の違い

早い話が、リクエストに対してレスポンスがありますが、そのレスポンスを待つのが「同期処理」、対して待たないのが「非同期処理」となります。

具体的には、以下の通りです。

<同期通信>
HTMLのFormタグで送信したら、画面の全てを更新する形でHTMLファイルを再度読み込みます。

<非同期通信>
JSでリクエストを飛ばします、そして、飛ばしたリクエストが帰ってくるのを待たずに次の処理が走ります。

HTMLではなく、JSでリクエストを飛ばします、具体的には、GoogleMapでの地図表示が例としてあげられます。ドラッグ&ドロップでの地図の位置を移動したときに地図情報を非同期で通信してデータを取得して画面上に描画します。

<非同期通信の場合>
画面がすぐに描画されずに灰色になってたりするのは通信中と言うことです。

<同期通信>
データ通信が完了するまで画面が表示されません。

大まかにこんな感じです。
それでは実装に入りましょう。

JSで非同期通信

実装するのはXMLHttpRequestを使用した非同期通信処理になります。非同期通信処理になります。左のリンク先にリファレンスがあるのでそれを見てもらうのが良いのですが、読み慣れないと「意味がわからん。。。」となるので、補足をつけます。ここのページを参考にしました。やはりMDNです(笑)

ポイント

リクエストの送信方法

httpRequest.onreadystatechangeプロパティにメソッドを設定する
こちらの、プロパティを下のように使用します。

(function() { // ここから下は無名関数の内容です。
  var httpRequest; // XMLHttpRequestの変数
 // ajaxボタンをクリックするとmakeRequestが動くように設定 document.getElementById("ajaxButton").addEventListener('click', makeRequest);
// イベントリ砂に登録するメソッド
function makeRequest() {
    httpRequest = new XMLHttpRequest();

    if (!httpRequest) {
      alert('中断 :( XMLHTTP インスタンスを生成できませんでした');
      return false;
    }
    // 通信時のやりとり中に呼び出されるメソッドを定義する
    httpRequest.onreadystatechange = alertContents;
    // 通信する先の指定する(この場合は同じディレクトリにあるtest.htmlにGETリクエストを飛ばします。
    httpRequest.open('GET', 'test.html');
    httpRequest.send();
  }
  //通信時のやりとり中に動くメソッド
  function alertContents() {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
      } else {
        alert('リクエストに問題が発生しました');
      }
    }
  }
})();

大まかにこんな感じです。
そして、実装した(テストしていません)コードは下のようになります。ほぼパクりです(笑)

/*
 * XMLHttpRequest生成のメソッド
 * @param methdoName GET or POST
 * @param sendURL リクエストの送信先のURL
 * @param btnId 謳歌したときに起動するボタンのID
 * @param stateChangeMethod レスポンス
 */
function createXHR(methdName, sendURL, btnId, stateChangeMethod, clickMethod) {
    xhr = new XMLHttpRequest();
    document.getElementById(btnId).addEventListener('click', clickMethod);
    xhr.onreadystatechange = stateChangeMethod;
    xhr.open(methodName, sendURL);
    xhr.send();
}

これで汎用的に使用できるかと思います。

でわでわ。。。


関連ページ

  1. WordPress プラグイン作成〜DBを使用する〜
  2. PHP PDO 〜MySQLにアクセスする〜
  3. PHP Ajax 〜DBに登録したデータを受信する〜
  4. Google Maps API PHP連携 〜マップ情報をDBに登録する〜
  5. PHP Image File 〜iPhoneやAndroidでの画像送受信の問題〜
  6. AngularJS Routing 〜PHPをWeb APIにする〜
  7. WordPress PHPカスタム〜根本的に見た目を変える〜
  8. WordPress PHPカスタム〜根本的に見た目を変える2〜
  9. Eclipse PHPプラグイン 〜ElipseでWordPress環境を構築〜
  10. WordPress テスト実装 〜heade-test.phpを表示〜
  11. AngularJS + PHP 〜WordPressと連携する〜
  12. AngularJS + PHP 〜AngularJSの実装〜
  13. AngularJS + PHP 〜AngularJSの実装2〜
  14. WordPress 処理解析 ~index.phpを眺める~
  15. WordPress Plugin NewStatPress ~アクセス解析プラグインAPIを使う~
  16. WordPress 処理解析 ~ログイン処理を調べる~
  17. WordPressカスタム〜アンケートボタンを追加する(設計)〜
  18. WordPressカスタム〜プラグインの作成〜
  19. WordPressカスタム〜ダッシュボードのプラグイン画面作成〜
  20. WordPressカスタム〜ダッシュボードのプラグイン画面作成2〜
  21. WordPressカスタム〜ダッシュボードのプラグイン画面作成3〜
  22. WordPress プラグイン作成〜アンケート作成プラグインを作る〜


アンケート調査アプリ1〜WordPressプラグイン作成中〜

WordPressプラグイン作成中です。このプラグインは以下のようなものです。

アンケートプラグイン

自分自身もそうですが、記載した記事や自分のブログサイトのアクセス数、今後どんな記事を書いていこうとか。。。
読者の皆さんがどのようなもの(記事)を期待しているか?を知るための手段として作成しようと考えたのが今回の動機です。

アンケート実施方法

アンケート調査を行うためのアンケートForm(入力)作成と入力してもらったデータ集計を行うの作成中です。
現状としては、アンケートの質問Formを作成するところまでできている状況です。

アンケートの集計

アンケート調査を行なったらその結果をグラフなどにして分析、今後の方針を決めるための情報を導き出さないくては「アンケートの意味」がありません。

しかし、ここである問題が浮き彫りになりました。

「アンケートの集計はどうやるか?」

上記の通り集計方法として以下のようなものがあることはすぐに調べがついたのですが、如何せん。。。集計した結果をどのようにまとめるか?を考える必要があります。

アンケートプラグインの仕様

  1. アンケートはユーザーが作成し、投稿する記事の中にアンケートのINDEX番号順で閲覧者が見つけられるように挿入する
  2. アンケートは質問1つにつき回答が複数でボタン押下により回答する
  3. アンケートの回答ボタンをDBに登録し回答数をカウント・アップしていく
  4. 全てのアンケートがクリックされた回数をDBに登録する
  5. 回答された時の時間も登録する(24H)
  6. 回答ボタンが押された時のユーザーのロケール(日本とかイギリスとか)

実装方法

画面上に必要な情報を入力するFormを作成します。上記の仕様からすると必要な入力項目は以下の通りです。

  1. 質問
  2. 回答(複数)

そして、欲しい情報はなるべく多く欲しいので以下のものをプログラムで取得します。

  1. 回答した時の時間
  2. ロケール(日本とかアメリカとか)
  3. 画面サイズより使用しているデバイス(PCとか)

現状で思いつくのは以上になります。
これらの情報から顧客(読者)のニーズを分析するための情報を導き出す方法を考えます。

使えそうな方法は以下のものがわかっています。
クロス集計法これだけです。。。

次回は集計方法に関して調べたいと思います。

でわでわ。。。


関連ページ

  1. WordPress プラグイン作成〜DBを使用する〜
  2. PHP PDO 〜MySQLにアクセスする〜
  3. PHP Ajax 〜DBに登録したデータを受信する〜
  4. Google Maps API PHP連携 〜マップ情報をDBに登録する〜
  5. PHP Image File 〜iPhoneやAndroidでの画像送受信の問題〜
  6. AngularJS Routing 〜PHPをWeb APIにする〜
  7. WordPress PHPカスタム〜根本的に見た目を変える〜
  8. WordPress PHPカスタム〜根本的に見た目を変える2〜
  9. Eclipse PHPプラグイン 〜ElipseでWordPress環境を構築〜
  10. WordPress テスト実装 〜heade-test.phpを表示〜
  11. AngularJS + PHP 〜WordPressと連携する〜
  12. AngularJS + PHP 〜AngularJSの実装〜
  13. AngularJS + PHP 〜AngularJSの実装2〜
  14. WordPress 処理解析 ~index.phpを眺める~
  15. WordPress Plugin NewStatPress ~アクセス解析プラグインAPIを使う~
  16. WordPress 処理解析 ~ログイン処理を調べる~
  17. WordPressカスタム〜アンケートボタンを追加する(設計)〜
  18. WordPressカスタム〜プラグインの作成〜
  19. WordPressカスタム〜ダッシュボードのプラグイン画面作成〜
  20. WordPressカスタム〜ダッシュボードのプラグイン画面作成2〜
  21. WordPressカスタム〜ダッシュボードのプラグイン画面作成3〜
  22. WordPress プラグイン作成〜アンケート作成プラグインを作る〜


WordPress プラグイン作成〜ダッシュボードでフォーム登録する〜

前回はダッシュボードにフォームを作成するJSプログラムを作成しました。このフォームはアンケートの質問と回答を入力するためのフォームです、このフォームをDBに登録します。

フォームをDBに登録

以前作成したDB(テーブル)作成処理も関連してきます。プラグインを有効にした時にDB(テーブル)が存在しなければDB(テーブル)を作成するスクリプトを作成したので、今回はフォームを投稿の中に挿入することを考えながら実装します。

フォームの挿入

本来ならば、ここら辺の処理を全て「設計」してから実装するのが望ましいのですが、手探りでやっているので理想通りにはいきませんでいした。
フォーム挿入に関して、やり方は色々ありますが、今回は、以下のような手順でやろうと思います。

  1. プラグインを有効にした時にフォームを挿入するJSを生成(PHPで出力する)
  2. ダッシュボードで挿入するタグを指定
  3. 質問〜回答までの情報をDBに登録
  4. 投稿画面を開いた時にJSで、アンケートフォームを挿入する

上記のような手順で処理を行おうと思います。
作成中のコードはGitにアップしてあります。
index.php
manage.php

ダッシュボードの追加実装

DBに登録した情報を表示するためには、ダッシュボードで作成したアンケートを登録する必要があるのでアンケートの登録処理を実装しようと思います。
現状は、下のように作成したフォームHTMLをアラートで表示するだけになっています。

ちょっと余談ですが、プラグインを作成している時に「WordPressのご利用〜」とフッターメッセージが邪魔になるのでそれを削除したい場合はこちらのリンクによると下のようなコードを追加してやると削除できるようなのでそれを実装します。
add_filter('admin_footer_text', '__return_empty_string');

そして、作成したフォームは下のように表示できました。

ついでに、プラグインの有効時にBootStrapを使用したいのでBootSrapへの参照を追加しました。
echo '';
BootStrapのファイルはダウンロードしてきてドキュメントルートにフォルダを配置しているので上のようなパス(URI)を指定して参照を追加します。

さらに、作成したアンケートをどこに挿入するか?をWordPressで使用しているポジション(クラス名)を指定するように入力フィールドを追加しいました。

必要な入力フォームがあれば良いのです。。。(見た目のセンスは申し訳ない程度です)

次は、以下の点でどのように実装するか悩みました。

  1. 表示したフォームをDBに登録
  2. 必要な情報のみをDBに登録してPHP+JSでフォーム生成

そして、 2: PHP+JSで生成する方向に決めました。

というわけで、PHPでの登録処理を作成することにします。

でわでわ。。。


関連ページ

  1. WordPress プラグイン作成〜DBを使用する〜
  2. PHP PDO 〜MySQLにアクセスする〜
  3. PHP Ajax 〜DBに登録したデータを受信する〜
  4. Google Maps API PHP連携 〜マップ情報をDBに登録する〜
  5. PHP Image File 〜iPhoneやAndroidでの画像送受信の問題〜
  6. AngularJS Routing 〜PHPをWeb APIにする〜
  7. WordPress PHPカスタム〜根本的に見た目を変える〜
  8. WordPress PHPカスタム〜根本的に見た目を変える2〜
  9. Eclipse PHPプラグイン 〜ElipseでWordPress環境を構築〜
  10. WordPress テスト実装 〜heade-test.phpを表示〜
  11. AngularJS + PHP 〜WordPressと連携する〜
  12. AngularJS + PHP 〜AngularJSの実装〜
  13. AngularJS + PHP 〜AngularJSの実装2〜
  14. WordPress 処理解析 ~index.phpを眺める~
  15. WordPress Plugin NewStatPress ~アクセス解析プラグインAPIを使う~
  16. WordPress 処理解析 ~ログイン処理を調べる~
  17. WordPressカスタム〜アンケートボタンを追加する(設計)〜
  18. WordPressカスタム〜プラグインの作成〜
  19. WordPressカスタム〜ダッシュボードのプラグイン画面作成〜
  20. WordPressカスタム〜ダッシュボードのプラグイン画面作成2〜
  21. WordPressカスタム〜ダッシュボードのプラグイン画面作成3〜
  22. WordPress プラグイン作成〜アンケート作成プラグインを作る〜


WordPress プラグイン作成〜ダッシュボードにJSでフォームを作成する〜

WordPressプラグインを使用する時にはダッシュボードでプラグインの機能を使用するために必要な情報を入力、カスタムしたいものです。
なのでプラグインのユーザーが使いたい機能(今回はアンケート)を作成できるようにプラグインの実装を進めていきます。

ダッシュボードで入力フォーム

今回の作成する「アンケートブラグイン」はしようとして以下のようなものを考えています。

  1. アンケートするための質問1つにつき回答のボタンを複数個(ユーザーが作成)
  2. 作成したアンケート(複数)を記事の中にバラバラに挿入する
  3. ダッシュボードでアンケートの集計結果を表示する(まずはクリックの階数表示のみ)

上記のように考えています。
そして、ダッシュボードでは「アンケートの作成」を行いたいので下のようにアンケート作成フォームを用意します。

使用するための簡単な説明もつけました。のちにドキュメントをちゃんと作成しようと考えています。

フォームの作成には以下のようなJSプログラムで作成しようと考えています、というか作成しました。
プラグインのディレクトリ構成は下のような感じで、プラグインの実装を行なっております。

  1. index.php(ダッシュボードにメニューを作成)
  2. manage.php(ダッシュボードメニューより画面部分を開く)

    この時点でのmanage.phpはPHPファイルなのにPHPの実装を行なっていません(笑)。
    必要なのはHTMLとJSの部分なので。。。
    以下はmanage.phpのJS部分のコードです。

    // 作成したアンケートの入力フォームを生成
    function createForm() {
    if (isCreated) {
        return;
    }
    let question = document.getElementById("questionMessage").value;
    let table = document.getElementById("questionTable");
    let inputs = table.getElementsByTagName("input");
    
    let messageElement = document.createElement("p");
    messageElement.innerText = question;
    let dom = document.getElementById("result");
    dom.appendChild(messageElement);
    for(let i = 1; i < inputs.length; i++) {
        console.log(inputs[i].dataset.ans);
        let but = document.createElement("button");
        but.innerText = inputs[i].value;
        but.dataset.ans = inputs[i].dataset.ans
        dom.appendChild(but);
    };
    isCreated = true;
    }
    

// 作成したフォームを削除 function deleteForm() { document.getElementById("result").innerHTML = ""; isCreated = false; }

// 作成したフォームを出力する function outputForm() { let dom = document.getElementById("result"); if (dom == null || typeof dom == 'undefined') { alert("Error"); return; } alert(dom.innerHTML); }

そして、実行した結果は以下のような見た目です。

項目追加ボタンでInput Anwersを追加して最後に登録ボタンを押下しました。

登録処理はJSからリクエストをPHPへ送信し、そのデータをDBに登録します。
このような仕組みをAjaxといい非同期通信でリクエストをサーバーへ送信します。
そうすると、サーバーのレスポンスを待たないので画面の操作で何かの待ち時間が発生しません。

そして、同じような仕組みでレスポンスを受け取る時、これをWebAPIとよんだりします。
JSONでデータを取得するものです。天気予報などRESTfiulAPIと呼ばれているのもがそうです。

ここら辺で失礼いたします。

でわでわ。。。


関連ページ

  1. WordPress プラグイン作成〜DBを使用する〜
  2. PHP PDO 〜MySQLにアクセスする〜
  3. PHP Ajax 〜DBに登録したデータを受信する〜
  4. Google Maps API PHP連携 〜マップ情報をDBに登録する〜
  5. PHP Image File 〜iPhoneやAndroidでの画像送受信の問題〜
  6. AngularJS Routing 〜PHPをWeb APIにする〜
  7. WordPress PHPカスタム〜根本的に見た目を変える〜
  8. WordPress PHPカスタム〜根本的に見た目を変える2〜
  9. Eclipse PHPプラグイン 〜ElipseでWordPress環境を構築〜
  10. WordPress テスト実装 〜heade-test.phpを表示〜
  11. AngularJS + PHP 〜WordPressと連携する〜
  12. AngularJS + PHP 〜AngularJSの実装〜
  13. AngularJS + PHP 〜AngularJSの実装2〜
  14. WordPress 処理解析 ~index.phpを眺める~
  15. WordPress Plugin NewStatPress ~アクセス解析プラグインAPIを使う~
  16. WordPress 処理解析 ~ログイン処理を調べる~
  17. WordPressカスタム〜アンケートボタンを追加する(設計)〜
  18. WordPressカスタム〜プラグインの作成〜
  19. WordPressカスタム〜ダッシュボードのプラグイン画面作成〜
  20. WordPressカスタム〜ダッシュボードのプラグイン画面作成2〜
  21. WordPressカスタム〜ダッシュボードのプラグイン画面作成3〜
  22. WordPress プラグイン作成〜アンケート作成プラグインを作る〜


WordPress プラグイン作成〜DBを使用する〜

今回はWordPressプラグイン作成でDBを使用する場合の記事を記載します。

DBは何に使う?

はっきり言って、何にでも使用できます。例として以下のようなものが挙げられます。

  1. ユーザー管理、ログインを使用してユーザー専用ページ、機能などの実装に使用します。
  2. データの集計、今回作成しようとしている「アンケートプラグイン」でも使用します。クリックした時に対象になるデータをDBに登録、登録した情報を元にアンケートの集計を行います。
    3, WordPressのようなCMSの投稿記事の管理(表示)
  3. 独自調査のまとめなど。。。

挙げればきりがないので、ここら辺にしておきますが。こんな感じで使用できます。

プラグインで使用するには?

一応、プラグインの作成に関しては以下の記事を参照してください。
・ローカルサーバーを立てる
・ダッシュボードにプラグイン画面を追加する
・プラグインでダッシュボードにメニューを追加する
・プラグインでダッシュボードにメニューを追加する2
・プラグインでダッシュボードにメニューを追加する3

そして、DBの使用方法に関して設計をします。
最近発見したのですが、このファイルがなかなか設計しやすいと思いご紹介いたします。

上のようなものですが、子供用だと思って甘くみてはいけません。
作るものを考える時に初めに「結論(結果)」をイメージすると思いますが、以下のような手順で使用すれば、大人も十二分に使用できるツールだと思います。

  1. 「結論」を真ん中の酢ページに記載します。
  2. 「結論」のものを作成するのに必要な部品を両サイドに書き出します。当然線を引っ張るなどの手間を加えてやれば、それだけ直感的に理解できるものになると思います。
  3. そして、作業手順を適当な形で記載してやります。書き方はものによるのでなんとも言えません。。。

しかし、このような形でかかれた設計図は「直感的」で「シンプル」なものになるのでユースケースとしても使用することができると思います。

プラグインへのDB作成

今回は、わかりやすい方法で、自分がそのように使用するのですが。。。

プラグインを有効にした時に作成

上記のように、プラグインを有効にした時に必要になるDBを作成するようにしようと思います。
懸念点としては、プラグインを有効にした時に「毎回テーブル(DB)が作成されると困る」というところです。。。

とりあえずは、テーブルの設計をします。
使用したいデータを列挙します。例えばログイン機能であれば、ID、ユーザー名、パスワード。。。などです。今回は使用しませんが、「パスワード」はDBのデータが盗まれたりすると大変危険(情報漏洩)なのでパスワードの登録は暗号化を使用します。

テーブルの作成方法

そして、設計ができたら「プラグインを有効にした時に作成する」プログラムを作ります。
先ほど懸念していた「毎回テーブルが作成されるのでは?」という部分も解決できます。

SQLを使用する

DBサーバーの名前にもある通り「SQL」を使用してテーブルを作成します。
SQLはDB操作に使用するプログラミング言語です。有名なものとしてはMySQLもそうでるがORACLEもあります。

ますはテーブル作成

テーブルを作成するのには「Create Table文」を使用します。今回はWordPressを使用しているのでMySQLのドキュメントをリンクに貼り付けています。
書き方は決まっていて下のように書きます。ちなみにコメントは「#」と「--」が使用できるようです。

CREATE TABLE 
pet  -- 作成するテーブル名
(name VARCHAR(20), -- "name"というカラム名
owner VARCHAR(20), -- "owner"は20文字分
species VARCHAR(20),
sex CHAR(1),  -- 性別は一文字
birth DATE,  -- 誕生日は日付型のデータ
death DATE);

上のような文でテーブルを作成することができます。
そして、懸念点の解決方法としては以下のようにCreate Table文に「if not exists」をつけてやれば解決です。
MySQLのCreate Table文の文法
create table 自作テーブル if not exists
自分の作成したSQL(Create Table文)は下のようになりました。

create table if not exists questionary(
    question_id int not null PRIMARY KEY AUTO_INCREMENT,
    question varchar(60),
    answers varchar(60),
    hrml_class varchar(15),
    html_style varchar(15),
    click_count bigint);


これはローカルのDBサーバーに作成したので公開されていません。

ポイント

テーブルのキーになるカラム(question_id)はプライマリキーなのでこのテーブルでは必ず一意(テーブルの中では1つしか存在しない)なのでquestion_id=1というのは必ず1つになります。

そして、「AUTO_INCREMENT」をつけているのでデータが登録された時にバックエンドプログラムがquestion_idの値を追加してくれるというわけです。

まとめ

今回はアンケートプラグインで使用するDB(テーブル)を作成しました。使用したプログラミング言語は(SQL)というものです。
SQLはDB操作のためにいろんなことができます。メールの送信などもできます。
そんなわけでSQLが使えると色々と便利です。

でわでわ。。。


関連ページ

  1. WordPress プラグイン作成〜DBを使用する〜
  2. PHP PDO 〜MySQLにアクセスする〜
  3. PHP Ajax 〜DBに登録したデータを受信する〜
  4. Google Maps API PHP連携 〜マップ情報をDBに登録する〜
  5. PHP Image File 〜iPhoneやAndroidでの画像送受信の問題〜
  6. AngularJS Routing 〜PHPをWeb APIにする〜
  7. WordPress PHPカスタム〜根本的に見た目を変える〜
  8. WordPress PHPカスタム〜根本的に見た目を変える2〜
  9. Eclipse PHPプラグイン 〜ElipseでWordPress環境を構築〜
  10. WordPress テスト実装 〜heade-test.phpを表示〜
  11. AngularJS + PHP 〜WordPressと連携する〜
  12. AngularJS + PHP 〜AngularJSの実装〜
  13. AngularJS + PHP 〜AngularJSの実装2〜
  14. WordPress 処理解析 ~index.phpを眺める~
  15. WordPress Plugin NewStatPress ~アクセス解析プラグインAPIを使う~
  16. WordPress 処理解析 ~ログイン処理を調べる~
  17. WordPressカスタム〜アンケートボタンを追加する(設計)〜
  18. WordPressカスタム〜プラグインの作成〜
  19. WordPressカスタム〜ダッシュボードのプラグイン画面作成〜
  20. WordPressカスタム〜ダッシュボードのプラグイン画面作成2〜
  21. WordPressカスタム〜ダッシュボードのプラグイン画面作成3〜
  22. WordPress プラグイン作成〜アンケート作成プラグインを作る〜