ワードプレスで大量のデータでテーブルを作る際の技術メモ

2017年7月21日パソコンに関すること

先日公開した「VALU・VA発行者一覧」を作成するにあたり、想像以上に苦労したので、技術メモを残すことにしました。実は作ろうと決めてから、10日以上も経ってからのやっとやっとの完成だったんです（＾＾；オリジナルのMicrosoftAccessで作った表やCSVファイル自体は7/10の段階ですでに完成していました。けれど、これをサイト上で公開するのだけで10日もかかってしまいました。

初めは単純に持っているデータをHTMLの形式に合うように出力したものをFooTableというプラグインで表示しようとしたのですが、重すぎて表示できなかったです。それもそのはず、13列×10,000行で、全部で13万ものデータがあるんですよね（＾＾；

次にきちっとデータベースになっているものを使おうと思い、TablePressというプラグインを使いました。けれど、これを使っても表示できるまでに30秒～60秒くらいかかってしまう状態でした。あまり細部までプラグインのコードを見たワケではないですが、どうやらこれもMySQLに直接データを保存するワケではなさそうでした（$wpdbを使っているところが1か所しかなかった）。また、一度すべてのレコードを取得してから、javascriptで表示を制御するという仕様だったため、初めに13万データすべてを読み込んでいたことも時間がかかった原因となっています。

最終的に、しっかりとデータベース上にテーブルを構築してから、Ajaxでのリクエストを受け付けられる独自のPHPファイルを作成することにしました。さらにAjaxも独自のjsファイルを作り、ショートコードで呼び出せるようにしたHTMLテーブルからjsファイルを読み込むという、なんとも手間のかかる方法を取ることにしました（＾＾；

と、ここまで書くとFooTableやTablePressは使えないプラグインっぽいですが、全然そんなことはなく、使い勝手の良い素晴らしいプラグインでした。ただし、今回はなにしろデータが多すぎるんですよね……（＾＾；おそらく、これらのプラグインで扱うのに適したデータ量は1万くらいのところだと思われます。（10列×1,000行くらいのイメージですかね。）

まとめると下の感じです。

方法	データ量	備考
FooTable 詳細サイト	10,000くらい	もとがエクセルファイルとかだと直接貼り付けてTableタグのclassにクラス名を追加するだけで使える。
TablePress 詳細サイト	10,000くらい	ダッシュボート上でデータの編集が可能。インポートした後、ワードプレスのダッシュボード上でデータを書き換えたりしたい場合はこれ。
ajax読込詳細下記	沢山	読み込むデータの量を調整できるため、表示したいデータのみをつどつど読み込む形になる。表示内容を変更するたびに再読み込みとなるため、データが少ない時にはつどつどの読み込み時間がウザイ。そしてなにより、作る手間がかかる。

今回採用した方法の概要

今回採用した方法の使用は下記の通りです。自分のつまずいたポイントについても書いておきます。

ワードプレスのデータベース（MySQL）に直接テーブルを作成
javascript（jQueryを使用）でGETリクエストを作成する
「$に注意」「live関数必須」
ajax通信でGETリクエストを送る。返信を表示。
PHPでGETを元にクエリ作成を作成
「PHPに準備されている関数を使うのではなく、ワードプレスに準備されている関数を使う」
クエリの結果からテーブル作成
HTMLの内容とjavascriptを読み込むコードは「Post Snippets」というプラグインで管理し、ショートコードで呼び出す。

データベースに直接テーブルを作成

まずはワードプレスのデータベースに新しく専用のテーブルを追加します。普段からphpMyAdminを使っている方はそれを使用すれば良いと思います。ただし、契約しているサーバーのサイトからしか行けず、使い勝手もあまりよくないです。phpMyAdminになじみがない方や細かくいろいろ設定したい方は「ARI Adminer」というプラグインを入れると良いです。凄く使いやすいので。「セキュリティ的にどうなの？」って部分はあるので、開発が終了したら削除してしまえば良いと思います。（使い方などについてはこちらのサイトの説明が分かりやすいです　⇒　http://netaone.com/wp/ari-adminer/）

GETリクエストを作成

javascriptの変数に「http://sample.com/sample.php?a=x&b=y&……」って感じの文字列を作って送ると、sample.php側では、$_GET[“a”]でｘという値、$_GET[“b”]でyという値を取得することができます。

テーブルのタイトル行をクリックした時や「検索」をクリックしたときようのイベントハンドラが必要なワケですが、ここで２つの注意点があります。

ｊQueryは「$」をつかわず「jQuery」を使う

例えば、「$(“#search”).click(」というような場合には、「jQuery(“#searcj”).click(」と書きます。これはワードプレスのプラグインの状況によりコンフリクトが発生する可能性があるためです。

可変部分のイベントハンドラはlive関数を使う

通常のイベントハンドラは「jQuery(“#search”).click(function(){」と書くと思いますが、PHPから取得した値によって可変となる部分については、「jQuery(“#search”).live(‘click’,function () {」と書きます。詳細は良く知らないんですが、こう書かないと動きません。

Ajax通信

下記の通り。

jQuery.ajax({

tupe : “GET”,

url : ここに作成したGETリクエストの文字列,

dataType : ‘text’,

timeout : 15000,

success : function(table){

jQuery(“#表示箇所のID”).html(table);

error : function(){

エラー処理

}

});

GETを元にクエリ作成

今までにもPHPからMySQLへクエリを発行する処理はしたことがあったんですが、ワードプレスの場合は勝手がちょっと違いました。ワードプレスではデータベースの中身へ直接アクセスするためのwpdbという便利なオブジェクトが準備されています。

まず、これを使うために「wp-load.php」を読み込みます。「require_once( dirname( __FILE__ ) . ‘/wp-load.php’ );」のような形となります。これ以後コネクションなどを作らなくてもwpdbを使うだけでデータベースの操作が可能となります。

次に「prepareメソッド」で、クエリを作成します。このメソッドはPHPの「sprintf関数」と「mysql_real_escape_string関数」を一緒にしたような便利なメソッドです。

最後に取得したデータを取り出す時は、「get_varメソッド（1つの値のみ）」「get_resultsメソッド（1行の値を配列で）」を使用します。

まとめると下記のような感じとなります。

require_once( dirname( __FILE__ ) . ‘/wp-load.php’ );

$query = $wpdb->prepare(“SELECT COUNT(*) FROM テーブル名 WHERE ID = %s;, $_GET[“id”])”;

$record_count = $wpdb->get_var($query);

$query = $wpdb->prepare(“SELECT * FROM テーブル名 WHERE ID = %s;, $_GET[“id”])”

$results = $wpdb->get_results($query);

クエリの結果からテーブル作成

これには注意点は特になくせっせとHTMLタグを組み立てていき、echoするだけです。

「Post Snippets」でショートコードに

「Post Snippets」はショートコードを作成するプラグインです。これを使って、好きなところに表示できるようにします。スタイルタグでCSSも作り、javascriptを読み込むscriptタグも作り、これらを全部一緒にまとめてショートコードの何入れておくと、作ったテーブルを同じレイアウトでどこへでも貼れるようになるので、大変便利です。（「Post Snippets」についてはこちらのサイトが詳しいです　⇒　http://netaone.com/wp/post-snippets/）

SNSでフォローする

ワードプレスで大量のデータでテーブルを作る際の技術メモ