カテゴリー: ウェブサイト

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カスタム〜ダッシュボードのプラグイン画面作成２〜
  21. WordPressカスタム〜ダッシュボードのプラグイン画面作成3〜
  22. WordPress プラグイン作成〜アンケート作成プラグインを作る〜


WordPress Plugin作成 〜PHP版WebAPIを作る１〜

WordPressプラグインの作成でアンケートに答えてもらう時に使用する実装です。

実は、DBの設計が固まっていません、とりあえずは実装してWebAPI経由でデータを登録、表示を行い詳細を考えようと思っています。

WebAPIとは

本当は「インターネット経由で使用できるAPI(アプリケーション・プログラミング・インターフェース)」なのですが、「リクエストを飛ばしたらJSONで値が帰ってくる仕組み」のことをさすことが多いようです。

実装

ちなみに、実装するのは以下のような実装を考えています。

  1. ボタンを押下したら指定のURLにリクエストを送信
  2. 送信されたリクエストをPHPで受け取りDBを更新

シンプルに実装できると思います。

準備

WordPressでDB操作を行うときには以下のクラスを使用します。
$wpdbはWordPressを使用したらすでに宣言してあるグローバル変数です。
なので下のようなコードですぐに使用することができます。
今回は、そのままのSQLを使用したいのでこちらのページを参考にします。

$sql = <<<EOM
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);
EOM;

$wpdb->query( $sql );

そして、作成したテーブルは下のようなものです。

そして、このスクリプトを「プラグインを有効化したとき」実行するようにします。

上の絵で行くとindex.phpに下のような実装をしています。

// 表示する内容
function helloCustomQuestionary() {
    // BootStrapを読み込む設定を出力する
    echo '';
    // テーブルを作成する(ヒアドキュメントはタブが入流ので)
$sql = <<<EOM
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);
EOM;
//    $wpdb->query( $sql );
    // Footerの文言削除
    add_filter('admin_footer_text', '__return_empty_string');
    // 画面作成用のPHPファイルを読み込みます。
    require_once(plugin_dir_path( __FILE__ ) . '/manage.php');
}
// ダッシュボードに追加するための関数(プラグイン有効時)
function addCustomQuestionary() {
    // ダッシュボードにこの表示が出るように追加する
    //wp_add_dashboard_widget( 'my_dashboard_widget', 'Featured Dashboard Page', 'helloCustomQuestionary' );
    add_menu_page( 'Test Plugin', 'CustomQuestionary', 'manage_options' , 'test-plugin' , 'helloCustomQuestionary' );
    // テーブル作成SQLの実行
}
// 管理メニューを表示した時に
//add_action('wp_dashboard_setup', 'addCustomQuestionary');
add_action('admin_menu', 'addCustomQuestionary' );
do_action( 'addCustomQuestionary' );

そして、登録ボタンを押下したときに下のようなアラートを鳴らすことができました。

このURLに登録する情報をリクエストで飛ばします。そして、 DBに登録します。

でわでわ。。。


関連ページ

  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カスタム〜ダッシュボードのプラグイン画面作成２〜
  21. WordPressカスタム〜ダッシュボードのプラグイン画面作成3〜
  22. WordPress プラグイン作成〜アンケート作成プラグインを作る〜


WordPress Plugin作成 〜アンケート集計〜

アンケート集計方法を実現するための方法を考え実装に着手します。

アンケート集計

ここ最近は、WordPressプラグインの作成をいやっていて、機能としては下のようなものを考えています。

  1. ダッシュボードにて、アンケートを作成
  2. ブログに挿入
  3. 主計結果をダッシュボードに表示

現状の実装

今までの経緯はこちらのリンクに記載しました。

とりあえずは、作成している(2020-01-25)時点でのプラグインを起動した時の動作です。

現状での実装

・ユースケースについて

  1. WordPressプラグインをインストール
  2. プラグインを有効化
  3. ダッシュボードでアンケートを作成
  4. アンケートの挿入位置の指定(各アンケート)
  5. アンケートのDB登録 ※未実装

現状の悩みどころ

アンケートの挿入位置をWordPressの(HTML)クラス名(wrap, primary, entry-header ...)で指定します。大まかに真ん中らへんとか下の方とか。。。
これに関して、ダッシュボード上で確認する方法を実装していません。そして実装する気も。。。
というのは、使用するテンプレートなどにより挿入いちをコントロールできるように挿入位置を下のように「選択」 or 「指定」できるようになっています。

なので、下手に確認用の実装を入れない方が良いと思いました。。。

アンケート集計について

色々と調査、検討をしてみたところ以下のような方法が良いであろうと思いました。

  1. 各アンケート(質問)をDBに登録
  2. 各アンケートの回答数(ボタンのクリック数)を登録
  3. ボタンが押下された回数をDBに登録
  4. 各質問をクロス集計できるように設定を入力できるフォームを作成する

そしてこの「クロス集計する」ための設定入力が必要です。しかし。。。その実装のイメージが難しく。。。どのように実装するかわからない状態です。

ここはちょっと頭をひねる必要がります。。。

でわでわ。。。



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

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

アンケートプラグイン

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

アンケート実施方法

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

アンケートの集計

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

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

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

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

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

  1. アンケートはユーザーが作成し、投稿する記事の中にアンケートのINDEX番号順で閲覧者が見つけられるように挿入する
  2. アンケートは質問１つにつき回答が複数でボタン押下により回答する
  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カスタム〜ダッシュボードのプラグイン画面作成２〜
  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カスタム〜ダッシュボードのプラグイン画面作成２〜
  21. WordPressカスタム〜ダッシュボードのプラグイン画面作成3〜
  22. WordPress プラグイン作成〜アンケート作成プラグインを作る〜