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プラグイン作成中〜

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

アンケートプラグイン

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

アンケート実施方法

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

アンケートの集計

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

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

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

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

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

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

実装方法

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

質問
回答(複数)

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

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

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

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

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

でわでわ。。。

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

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

フォームをDBに登録

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

フォームの挿入

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

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

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

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

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

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

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

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

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

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

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

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

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

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

でわでわ。。。

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

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

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

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

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

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

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

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

index.php(ダッシュボードにメニューを作成)

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と呼ばれているのもがそうです。

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

でわでわ。。。

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

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

DBは何に使う？

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

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

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

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

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

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

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

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

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

プラグインへの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)はプライマリキーなのでこのテーブルでは必ず一意(テーブルの中では１つしか存在しない)なのでquestion_id=1というのは必ず１つになります。

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

まとめ

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

でわでわ。。。

タグ: #WordPress

WordPress Plugin作成〜PHP版WebAPI XMLHttpRequest〜

XMLHttpRequest

どーゆーこと？

非同期通信処理

同期と非同期の違い

JSで非同期通信

ポイント

リクエストの送信方法

関連ページ

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

アンケートプラグイン

アンケート実施方法

アンケートの集計

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

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

実装方法

関連ページ

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

フォームをDBに登録

フォームの挿入

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

関連ページ

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

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

関連ページ

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

DBは何に使う？

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

プラグインへのDB作成

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

テーブルの作成方法

SQLを使用する

ますはテーブル作成

ポイント

まとめ

関連ページ