プログラミング ワンポイント~サーバーとクライアントってなに?~

サーバーとクライアントの関係

ウェブアプリケーションを作成、実装しようとしたときに、理解に困るのが「サーバー」と「クライアント」だと思われます。「サーバー」と「クライアント」という言葉はよく聞くけど実装しているときにどんな関係があるのか?
これを目に見えるように解剖したいと思います。

サーバーってなに?

大まかな話
サーバーとは、早い話が「常駐アプリケーション」のことです。常駐(画面に見えなくても裏側で動いている)アプリケーションなので、目に見えないアプリケーションです。

それに対して、目に見えるアプリケーションがクライアントになります。

サーバーの役目

ウェブアプリケーションでのサーバーは、まさに「この人がいないとはじまらない。」というほど大事な部分を担っています。

通常、ウェブアプリケーションを使用するときは携帯や、PCで特定のURLにアクセスして利用します。

具体的な例として、以下のような手順で操作を行った場合。これは自分の作成したページにアクセスするときを例にして、サーバークライアントの関係を説明するものです。

  1. Chrome(ブラウザ)で"https://zenryokuservice.com"にアクセスします。
  2. アクセスしたURLは、サーバーが起動しているIPアドレスの参照を示します。
  3. サーバーはリクエストを受けてレスポンスを返します。

この時にやり取りする情報(メッセージ)をHTTPメッセージと呼びます。

  1. クライアントからサーバーへのメッセージをリクエストと呼ぶ。
  2. リクエストに対してサーバーがクライアントに向けて送るメッセージをレスポンスと呼ぶ。

レンタルサーバーへアクセスした場合なので、あまり実感がわかないと思います。

次は、自分のPC上にサーバーを立ち上げて、ブラウザからサーバー(ローカルサーバー)にアクセスするケースで説明します。

HTMLからサーバーへ(PHPの時)

  • ・PHPはサーバーサイドプログラムです。
  • ・クライアントサイトプログラムはHTML(+Javascript)です。

PHPで画面遷移をするケース

XAMPPなどのツールを使用してローカルサーバーを起動してからPHPを起動する場合で説明します。
具体的に以下のコードを使用して画面遷移をするとします。

<HTML>

<!DOCTYPE html>
<html>
<head>
<title>001.html</title>
<meta charset="utf-8">
</head>
<body>

<p>↓GETメソッドで送る</p>
<form action="Server.php" method="get">
名前を入力:<input type="text" name="yourname">
<input type="submit" value="送信">
</form>

<p>↓POSTメソッドで送る<p>
<form action="Server.php" method="post">
名前を入力:<input type="text" name="yourname">
<input type="submit" value="送信">
</form>

</body>
</html>

ことの期にポイントになるのは以下の部分です。具体的に「action="Server.php"」と「method="post"」と書いてあるところです。

<POSTリクエストを送信する>

<form action="Server.php" method="post">

画面遷移を行うときには、POSTリクエストを送信して、何かしらの処理を行った後に画面を表示します。

つまり

  1. Server.php」にPOSTリクエストを送信
  2. Server.php」が処理を行った結果HTMLをレスポンスでクライアント(ブラウザ)に返す
  3. ブラウザ(Chromeなど)でサーバーから受け取ったHTMLを表示する

という流れがあります。

上の処理を全部書くと下のようになります。※ HTMLは省略します。

<?php
   // クライアントからの送信Form(リクエスト)を受け取る
   $yourName = $_POST['yourname'];
?>
<!DOCTYPE html>
<html>
<head>
<title>Server.php</title>
<meta charset="utf-8">
</head>
<body>

あなたの名前は:<?php echo $yourName; ?>

</body>
</html>

PHPファイルなのにHTMLも一緒に書いています。ここが混乱するポイントです。あくまでもPHPはサーバーサイドスクリプトなので、サーバーサイドで動きます。つまり、ブラウザ上では動かないのです。

では、なんでブラウザで表示する事ができるのか?

これは、PHPがHTMLを出力しているからです

上のコードを見てみましょう。

<?php ... ?>

で囲まれている部分がPHPスクリプトです。このPHPの処理は「print」や「echo」などの関数を使用して文字列を出力しないとブラウザ側で値を確認する事ができません。

なので、Server.phpを表示すると下のコードの部分のみがブラウザで表示されます。

あなたの名前は:<?php echo $yourName; ?>

全体的な処理フロー

くどいようですが、全体的にリクエスト~レスポンスを受け取るまでの流れを見てみます。

前提

  1. XAMPPを使用して起動するPHPアプリケーションを考える
  2. WebサーバーはApache, DBサーバーはMySQLを使用している

XAMPPはWebサーバーとMySQL(DB)がセットになっているパッケージです。

ドキュメントルートとは

XAMPPを起動したときに、Apacheの行にあるConfigをクリックすると設定ファイル(httpd.conf)を開けるので
ドキュメントルートの指定を確認、変更する。

「Document Root」と記述している行でドキュメントルートを指定している。
XAMPPの場合はhtdocsがデフォルト(初期状態)でドキュメントルートに設定されている。

このドキュメントルートに、index.htmlファイルがあったとします。

URL localhost/index.htmlでこのファイルにアクセスする事ができます。

フォルダ構成としては、「C:Apps\XAMMP\htdocs」となっているとします。
httpd.confには、下のような記述があるはずです。

#
# DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.
#
DocumentRoot "C:/Apps/XAMPP/htdocs"
<Directory "C:/Apps/XAMPP/htdocs">

XAMPPをインストールするときにAppsフォルダの下を指定したのでこの様になりました。

DocumentRootのまとめ

  1. サーバーは目に見えない裏側で動くアプリケーション
  2. クライアントは目に見える表側で動くアプリケーション
  3. クライアント側はブラウザで表示
  4. サーバー側は、コマンドプロンプトなどで状態などを表示できる
  5. サーバーを起動するとドキュメントルートが「localhost」で表示するファイルを配置するディレクトリになる
    ⇒DocumentRootは「localhost直下」になる。

PHPファイルの見た場合

PHPファイルにはややこしいことに以下のプログラムが同居しています。

  • サーバーサイドプログラム(PHP)
  • クライアントサイドプログラム(HTML, JS)

具体的には下のようなものです。

<?php
    if (!empty($_SERVER['HTTPS']) && ('on' == $_SERVER['HTTPS'])) {
        $uri = 'https://';
    } else {
        $uri = 'http://';
    }
    $uri .= $_SERVER['HTTP_HOST'];
    header('Location: '.$uri.'/dashboard/');
    exit;
?>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  <title>PGBox Top Page</title>
  </head>
  <body ng-app= "pgBoxAG" class="bg-light"  ng-controller="pgboxCtrl">
  あなたがアクセスしたURLは<?php print $url; ?>です。
  </body>
</html>

細かい話をすると、以下のようになります。

  1. サーバー側でPHPの処理が走る
  2. PHPがHTMLを出力
  3. 出力したHTMLをPC側で受信
  4. ブラウザで表示

WordPressを使った場合

多くの人が利用しているWordPress、略して「WP」と記載します。

PHP + MySQLで動くCMSで、ウェブサーバーに配置、ブラウザからインストール入力を行うことで使用することが可能になります。

ディレクトリ構成としては、ドキュメントルート直下にインストールすることが多いようです。
インストール先XAMPP/htdocs/WordPress

この様にWPをインストールした場合、ローカルであれば「localhost」でブラウザからアクセスすればWPを開くことができます。

逆に「XAMPP/htdocs/web/WordPress」とした場合はどうでしょうか?

そうです。「localhost/web/」とアクセスしたときにWPを開くことができます。

これは、ドキュメントルートはWP用ではなく、HTML+JS+PHPでの実装をしたかったのでこの様にWPを一階層下げました。

作成したものとしては、以下のようなものがあります。
・サイトマップ
・基本情報技術者試験問題
・楽天APIでの、商品読み込みと表示

PHP Brackets ~XAMP + PHPでウェブサーバー~

イントロダクション

Bracketsを使用してPHPのウェブ開発のローカル環境を構築しようと考えました。

インストール

  1. softnicのサイトからダウンロードできます。

  2. MAMPのサイトからMACとWindowsを選択してダウンロードできます。PROはインストール時にチェックボックスにチェックを入れることでインストールできるようです。が自分のWindowsではうまく動かなかったので、XAMPPに変更しました。

  3. XAMPPのインストールサイトからインストーラーをダウンロードします。

Brackets

インストールするときにCドライブでないとうまく動かないようです。あとは、インストーラーがMSIファイルなので、ダブルクリック一発でOK

XAMPPでウェブサーバー

MAMPのインストールは出来たけど、MySQLがちゃんと起動しないので、あきらめてXAMPPを入れることにしました。失敗の内容として下の記事を残しておきます。

上にもありますが、こちらのページからインストーラーをダウンロードできます。

起動確認

XAMPPのコントロールパネルを起動します。

Apache(ウェブサーバー) とMySQL(DBサーバー)を起動し手問題のないことを確認します。

<ウェブサーバーの確認>
ブラウザで「localhost」にアクセスしてください。

<DBの確認>
上のページから「phpMyAdmin」というメニューがあるのでそれをクリックしてください。

XAMPPのインストール後

レンタルサーバーにPHPなどのファイルをアップロードしている人は、ZIPファイルの形でそれらの資源をダウンロードできると思います。
そして、ダウンロードした資源をドキュメントルートに展開します。
ドキュメントルートは、XAMPPの場合「XAMPPインストールフォルダ/htdocs/」になります。
WordPressなどを使用している人の場合も、同様です。
そして、ダウンロードしたZIPファイルをドキュメントルートに展開します。

次に、ドキュメントルートの場所を確認、もしくは変更する場合は下のファイルを修正します。

xampp\apache\conf\httpd.conf

上記の

"D:/Apps/XAMPP/htdocs"

の部分を確認、修正します。

ちなみに、自分はドキュメントルートをもう一つ下の

web

フォルダに変更したいので次のように修正しました。

"D:/Apps/XAMPP/htdocs/web"

そんなわけで、MySQLが参照しているドライブの設定では動きませんでした。

出力されたエラーは以下のようなものです。

Can't change dir to 'c:\xampp\mysql\data\

なので、本来参照するべきディレクトリにあるmy.iniファイルを修正しました。
ファイルのディレクトリは

D:\Apps\XAMPP\mysql\data

です。

そしたらうまく起動できました。おそらくMAMPの場合も同様です。

次のエラー

Using unique option prefix 'key_buffer' is error-prone and can break in the future. Please use the full name 'key_buffer_size' instead

こんなエラーが出ました。

なのでこちらのページを参照して修正しました。

<解決法>
xampp/mysql/bin/my.iniを修正

(35行目、168行目、174行目)
「key_buffer」を「key_buffer_size」にする。

ちなみに、DBのユーザー名とパスワードの変更方法は、こちらのページを参考にしました。
実行したSQLは下のものです。

ALTER USER 'user-name'@'localhost' IDENTIFIED BY 'NEW_USER_PASSWORD';
FLUSH PRIVILEGES;

注意点としては、ユーザー名(user-name)とホスト名(localhost)にシングルクォーテーションがついているところです。エラーが出ます。

ユーザーの権限などのチェック

レンタルサーバーではDBのユーザーなどの設定が行われているが、ローカルではそう行きません。
なので、DBを起動して「phpMyAdmin」を起動して権限などを設定しましょう。

WordPressのインストール

実際には、WPのファイルなでゃそろっているのですが、設定部分が面倒なので、インストールからやり直してしまおうという考えです。

あとは、実行後にレンタルサーバーから出力したXMLをインポートすれば、環境構築完了です。

手順1

WordPressのフォルダ直下にある「wp-config.php」を名前変更し「_wp-config.php」にする。

そうして、ブラウザでアクセスすると下のように初期設定画面が見れます。


WindowsにMAMPをインストールして使用しようとしたときに記載したものです。こちらの記事は失敗していますが、どのような失敗だったのかを記載しました。

最終的には、MySQLの設定がうまくいかなかったというところです。

失敗 MAMPでウェブサーバー(for Windows)

ワードプレスを使用してレンタルサーバーを運用しているので、
テスト環境として、自分のPC上にレンタルサーバーと同じような環境を構築しようと考えました。

MAC版の記事はこちらに記載しています。

インストーラーのダウンロード

インストール

  1. ダウンロードしたファイルを起動します。次へをクリック

  2. プロ(有償)は使用しないのでチェックを外します。次へをクリック

  3. ライセンス条項に同意します。

  4. インストール先を指定します。

  5. そのまま次へをクリック

  6. 同様に次へをクリック

  7. インストールのボタンが見えるのでそれをクリック

※インストール時にエラーが出ることがありましたが、これはダウンロードの失敗のようなので、Try ageinで再度行えば解消できるようです。しかし、それでもダメな場合は、インストーラを再度ダウンロードしてやり直してみてください。

サーバーの設定

  1. MAMPを起動すると下のような画面が見れますので、環境設定を選択します。

  2. そしてドキュメントルート、サーバーを起動したときにURLでアクセスできるディレクトリのルートです。
    具体的には、localhost:8080でアクセスしたときにindex.phpが開けると思いますが、このファイルが置いてあるディレクトリのことです。
    このドキュメントルートを指定します。

    指定したときの例

  1. サーバーが起動するようです。※Nginxを使用するときは設定する項目が多くなるので、起動しませんでした。

  2. サーバーが起動したら、ブラウザで、localhost:80にアクセスしてみましょう
    MAMP12

もしも不具合があったら

再インストールをしてみるのが、有効な手段らしいです。⇒まだ確認できていません。

Brackets

IDEとしてこのアプリを使用します。どうやらAtomと同様にテキストエディタらしいので、コードを書いてあとはコマンドで。。。

というのをイメージしていたのですが、拡張機能(Extention)があるようなので、それを使用する方向で。。。

このアイコンをクリックします。拡張機能ボタンのようです。

そして、下のような画面が開きます。Elipseのマーケットプレイスに似ています。

つまり、検索してインストールが可能ということです。

WordPress ワンポイント ~画像ファイルがアップロードできない、パーミッション~

行った操作

WordPressを使用して、ファイルのアップロードができなくなりました。

レンタルサーバーのパスワードを変更したためです。

アップロードできない

この現象に対する対処方法は、以下の通りです。

  1. レンタルサーバーのファイルパーミッション(権限)を変更する。
  2. 再度、ファイルをアップロードする。

懸念点

ファイルパーミッションを変更するのはよいが、何に変更するか?
パスワードを変更した後にファイルパーミッションを確認したところ「707」になっていました。変わったのかどうかもわかりませんでしたが、ここのサイトを参考にしたところ、パーミッションは下のように「755」で行けました。

上記の図は、覚えてもよいかもしれません。

でわでわ。。。

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を持つタグの下に配置するようにしていますのでヘッダーメニューの下に来ました。

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

でわでわ。。。



WordPress プラグイン作成 〜$wpdbでのSELECT〜

今回は、WordPress($wpdb)でのDBからデータの取得を行います。

通常は、DBへのコネクションを取得してから、SQLの実行などを行うのですが、ワードプレスで用意しているグローバル変数$wpdbを使用すると、コネクションを取得した状態で実装を行うことができます。

$wpdbとは?

前回の記事にも記載していますが、まぁBugFix(バグ退治)なので細かいところは記載しませんでした。

$wpdbは便利クラス

早い話が、DBへのコネクションをすでに持っているDBアクセス用のクラス(オブジェクト)です。

これを使用するのにはわけがあります。

$wpdbを使用しない場合

  1. 使用しているDBがMySQLなのでmysqlのDBコネクションを取得するためにユーザー名とパスワードをセットしてコネクションを取得します。
  2. そして取得したオブジェクトからSQLを発行します。
  3. 取得したデータを実装します。

$wpdbを使用する場合

上記の手順1が要らなくなります。

実装サンプル

データの件数を取得する場合

global $wpdb;
$dataCount = $wpdb->get_var('SELECT count(question_id) FROM QUESTIONARY');

データを取得する場合

$result = $wpdb->get_results('SELECT * FROM QUESTIONARY', ARRAY_A);

取得するときにどの型で取得するか?をARRAY_Aで指定しています。
この場合は連想配列になります。

つまり、テーブルのカラム名をキーにして対象のデータを取得できます。

例えば、学級テーブルがあり、カラムは出席番号と名前だったとします。

select ※ from 学級

とSQLを実行したら、取得するデータは$result["出席番号"]の様に取得できます。

あとは、どんなテーブルを作って、どの様なデータを扱うか?を決めてしまえば、簡単なアプリが作れそうです。

でわでわ。。。


関連ページ

  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 プラグイン作成〜アンケート作成プラグインを作る〜


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); ...

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

でわでわ。。。



XMLHttpRequestエラー〜JSONが送信できない〜

下のようなエラーが出ました。

Uncaught DOMException: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED.
    at outputForm (http://localhost:8888/wp/wp-admin/admin.php?page=test-plugin:322:9)
    at HTMLButtonElement.onclick (http://localhost:8888/wp/wp-admin/admin.php?page=test-plugin:191:147)
 

実装しているコードは下のようなコードです。

// 作成したフォームを出力する
function outputForm() {
    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 = [];
    for (let i = 0; i < inputs.length; i++) {
        ansArray.push(inputs[i].innerText);
    }
    // 送信するデータ(リクエストパラメータ)
    let data = createSendData(question, ansArray);
    // DBへデータの登録(汎用的に作成したメソッドなので後ろの引数は全てnullにしている)
    // 下のメソッドは次のように書いても良い(JSの場合) => createXHR("POST", stateChangeMethod);
    let xhr = createXHR(stateChangeMethod, null, null);
    // JSONで送信する
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.open("POST", '');
    xhr.send(data);

}

function createSendData(question, ansArray) {
    let obj = {};
    obj.question = question;
    for (let i = 0; i < ansArray.length; i++) {
        obj["ans" + i] = ansArray[i];
    }
    return obj;
}

/*
 * XMLHttpRequest生成のメソッド
 * @param stateChangeMethod レスポンスを取得する時の処理
 * @param btnId 謳歌したときに起動するボタンのID
 * @param clickMethod ボタンのクリック時の処理
 */
function createXHR(stateChangeMethod, btnId, clickMethod) {
    xhr = new XMLHttpRequest();
    if (btnId != null && typeof btnId == "undefined") {
        document.getElementById(btnId).addEventListener('click', clickMethod);
    }
    xhr.onreadystatechange = stateChangeMethod;
    return xhr;
}

エラーメッセージから「XMLHttpRequestをOPENしてからコンテントタイプなどを指定してね!」と言っているので
そのようにします。

    // JSONで送信する
    xhr.open("POST", '');
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(data);

そしたら解決しました(笑)