[開発進捗7]WordPressでグリッド(handsontable)を使う

ブログ

[開発進捗1]決算短信XBRLをデータベース化する
[開発進捗2]XBRLファイルを決算データ化する
[開発進捗3]XBRLファイルをBeautifulSoupで解析する
[開発進捗4]決算短信XBRLから決算情報を抽出する
[開発進捗5]XseverのSSH接続,FTP接続,Python実行,MySQL接続
[開発進捗6]WordPressで自作テーブルを使う方法

四半期決算を分析するアプリをWordPressで作るの開発進捗の七回目です。
前回は自作テーブルを作成し、固定ページの中で検索結果を表示する機能をプラグイン化して作成しました。
見た目が完全にただのテキストでしたので、これをグリッド表示にするのが次のステップです。

追記:本稿で照会しているhandsontableですが、現在最新版は商用利用時、有償版の提供のみとなっています。
その為、本アプリケーションも現在はhandsontableは利用していません。以下参照。
[開発進捗8]PHPでレスポンシブで動的なテーブルを作る

WordPressにおけるグリッドについて

WordPressの投稿はExcelからのコピペで良い感じにグリッド表記にしてくれる機能があります。
また、プラグインを探すとグリッドに関する機能はかなりたくさん出てきます。
しかし、これら機能やプラグインについては固定したデータ(内容、行数、列数)を表現する機能しかありません。当然ですが・・・。

WordPressプラグインのグリッドはアプリケーションでは使えない

今回やりたいのはSQLの検索結果を表示するグリッドです。
SELECT文を渡したら結果をグリッド表示してくれるようなプラグインを探したのですが、そんなものは残念ながら存在しませんでした。

handsontableをWordPressで使う

毎回かなり強引なのですが、プラグインで実現する方法は早々に諦めて、フリーのグリッドライブラリを使うことにしました。
いくつか候補はあったのですが、なんとなく人気のありそうなhandsontableを使う事にしました。
もうここまでくると「このアプリケーションはWordPress上で動いています」というのがかなり嘘なんですが、そこは気にしないことにします。

handsontableとは

Javascript用のグリッドライブラリです。
Excelのような見た目、操作性のグリッドが表現できます。
有料版もあるのですが、フリーでもかなり多機能です。
以下から落とせます。
Handsontable
なんか解り難いですが、「Use with pure JavaScript」より、「Download ZIP」で落とせます。

ダウンロードしてファイル解凍するとかなりたくさんのファイルが詰め込まれています。
ただ使うだけなら必要なのは以下2つのファイルだけです。
handsontable-master/dist/handsontable.full.min.js
handsontable-master/dist/handsontable.full.min.css

handsontableをプラグインに組み込む

以下のようなディレクトリ構成で前回作ったプラグインにhandsontableのファイルを配置します。

ディレクトリ構成

前回はwpdb_test.phpのプラグインの中でSQLを実行して結果をただテキスト表示するだけでした。
このテキスト表示部分をhandsontableを使うように改修します。

サンプルソース

handsontableの使い方はQiitaとか漁ると私の何倍も優秀なエンジニアが沢山書いているのでそちらを参照してください。
ここでは超単純にwpdbの検索結果をhandsontableで表示する為にどうすれば良いかを目的とします。

<?php
/*
Plugin Name: WPDB test
Plugin URI: -
Description: -
Version: 1.1
Author: investor_yasu
Author URI:
License: ゴミですのでご自由にどうぞ
*/
// 検索結果を表示するだけ
function wpdb_test($content) {
global $wpdb;
if( is_page( 'wpdb_test' )) {
// Point1:スタイルシートとJavascriptを読み込みます。
wp_enqueue_style( 'plugin_handson_script_css', plugins_url('/wpdb_test/css/handsontable.full.min.css'));
wp_enqueue_script( 'plugin_handson_script_js', plugins_url('/wpdb_test/js/handsontable.full.min.js'));
if( $_POST['exec_bottom'] == '検索') {
$sql1 = $wpdb->prepare("SELECT
string1
, string2
FROM
$wpdb->tabletest
where
string1 = %s
or number1 >= %d", // 適当な検索条件 %sは文字を%dは数字を示す
$_POST['info1'], $_POST['info2']);
//検索実行。結果は配列で返される
$results1 = $wpdb->get_results($sql1);
if($wpdb->num_rows > 0) {
foreach ( $results1 as $result1 ) {
// 前回は結果をコロンで区切って表示しました
// $results_text = "<p>" . $result1->string1 . ":" . $result1->string2 . "</p>";
// Point2:今回はhandsontableを用いて表示
$columnName = array('文字列1','文字列2'); // 列名を定義
wp_enqueue_script( 'wpdb_test_js', plugins_url('/wpdb_test/js/wpdb_test.js')); // テーブル描画用jsの読み込み
wp_localize_script('wpdb_test_js', 'data1', $results1); // 検索結果変数のデータを渡す
wp_localize_script('wpdb_test_js', 'columnName1', $columnName); // 列名の変数のデータを渡す
}
} else {
$results_text = "<p>検索結果がありません。</p>";
}
}
?>
<form name="form1" method="post">
<h2>検索条件</h2>
<span>検索条件文字</span><input name="info1" size="10" value="<?php echo $_POST["info1"]?>"><br>
<span>検索条件数字</span><input type="number" name="info2" size="10" value="<?php echo $_POST["info2"]?>">
<br><input type="submit" name="exec_bottom" value="検索" class="exec_bottom"><br><br>
<?php echo $results_text?>
<div id="table1"></div>
</form>
<?php
}
else {
return $content;
}
}
add_filter('the_content', 'wpdb_test');

グリッドを表記するために以下のjavascript(上記コード中のwpdb_test.js)が必要です。

var container1 = document.getElementById('table1');
var hot1 = new Handsontable(container1, {
data: data1,
colHeaders: columnName1,
columnSorting: true,
sortIndicator: true,
readOnly: true,
currentRowClassName: 'currentRow',
currentColClassName: 'currentCol',
licenseKey:'non-commercial-and-evaluation' // Ver7.0以降はこの記述が無いとライセンスの警告がでます
});
view raw wpdb_test.js hosted with ❤ by GitHub

この様な感じでできました。

(注意)handsontable7.0以降からライセンスフリー版は非営利目的のみ許可になった模様

私がアプリケーションを開発していた当初はそんなことなかったのですが、現在はその様になっている模様です。
javascript文中にもコメントしましたが、

licenseKey:’non-commercial-and-evaluation’

この記述が非営利であることを記述しており、無いとライセンスキーに関する警告が発生します。
なお、Handsontable6.2.2以前のバージョンならライセンスフリー版を商用で利用しても問題ない模様です。
私はお金もないのでバージョンアップしない事にします。
いずれはhandsontableは辞めざるを得ないかもしれません。

開発を終了して

これで一通りの開発が終わりました。
拙いアプリですが、開発面、金融の知識面ともに良い勉強になりました。
また、開発を通して日本の金融業界のIT対応の遅さを感じました。
決算情報一つ取ってくるのにここまでの事をしないといけない点、なおかつそもそもXBRLを取得する所も金融庁管轄のEDINETではなく、有志が運用しているWebサイトを経由しなければまともにシステム化できません。(あとXBRLの仕様はやっぱりキツいと思います)
更に決算だけでなく株価に関してもそうです。
本アプリケーションに株価データを表示する機能も追加しようと思ったのですがちょっと厳しかったです。(いつかやるかもしれませんが。)
pandasという非常に便利なPythonパッケージで簡単に株価データを取得する事は出来るのですが、実はこれも裏ではどこかの有志で行っているWebサイトをパースして値を取得しているだけです。
決算も株価も開示情報ですので、金融庁でも証券会社でも、今時APIでデータ取得できるような仕組みをどこも作っていないというのは残念でした。
有償ならあったかとは思いますが、日本の金融の発展の為に是非とも無償で提供して欲しいところですね。
長々と愚痴の様になってしまいましたが、次はこのアプリケーションを使って結果を出さなければなりません。
正直言うと今のところ全然駄目なのですが、これからも諦めずに学習と実践を続けます。

コメント

タイトルとURLをコピーしました