目標としていた9月1日に何とか間に合いました

鎌倉ライブデモンストレーションのHome Pageの全面改訂を8月の10日頃から行ってきました ある程度公開するのを9月1日と目標設定していたのですが、何とか間に合いました

http://kamakuralive.net/

大きなバグはとれていると思います このページの特徴は、SQL databaseに色々なデータを別の保護されたページにより登録すれば、それが自動的にこのページで更新されていく、ということです

鎌倉ライブデモンストレーションの詳細については未だ確定できない部分も多く、かといって全く分からないままで放置しておくことも良くないので、このような構造にしたのです

僕にとってこれは長年のライブデモンストレーション生活の中での最適解の一つなのですが、それをどのように実現していけば良いのか、それを解決できるだけのスキルも知力も以前の僕にはありませんでした しかし、今は違います これをやり遂げるだけの能力を習得したのです 嬉しいな

これもTAVIがすんなりと治療できるから可能なのです ありがとう SAPIEN3

洗練化するデータ構造

鎌倉ライブデモンストレーションの公式Web Site構築中です こっそりと現在の姿お見せすると

http://kamakuralive.net/23rd/db_read/come_session_all_read.php

となるのですが、もちろん公式には未だ公開していません

このページの特徴は、参加して頂く方のデータを別のページでdatabaseに登録し、そこから読みだしているのです 従ってそのページにアクセスする方々は、常時データを更新することができ、それが瞬時に反映される、ということなのです さらに、データ構造を工夫してあり、たとえば ◯◯さんがどの時間帯に dutyがあり、それがぶつかっていないかどうかもすぐに判明できる、というものにしてあるのです このデータ構造を創造するのには随分と頭を回転させました 知力の勝負ですね

ついに実現しました

本日はCVIT九州沖縄地方会でのサテライトに呼ばれています ここ10年間近く毎年この夏には呼んで頂いています まあ年の功でしょうか?

でも同じ会において毎年呼んで頂いて毎年何らかの話をする、というのは結構辛いものがあるのですよ 毎年何かしら新しい視点を提言させねばならないのです

という訳で暫くしたらば羽田空港から福岡に飛びます

この二日間悩んでしたプログラムが解決しました Ajax通信を用いてページ遷移無く、列名ボタンに応じてクリックする度に、自動的に並び替える、という良くあるインターフェースの実現なのです

久しぶりに jQueryを用いた Ajax通信プログラムを書いたので、昔のことは完璧に忘れており、調べなおしたり大変でした しかし、苦労は報われる、まるでここ数日間の日本選手による金メダル獲得のようです

結局何が悪かったか ことは簡単でした 動的に<Table><th></th><tr><td>・・・</td></tr></table>を生成しているのですが、この中で当然のことながらボタンも生成します しかし、どうしてもそのボタンをクリックしても、click eventが発生していないのです

これには随分と苦しみました jQueryの APIである .live()は既に廃棄されているようであり、現在では .on()に取って代わったとのことです それで .on()を用いて動的生成後にevent handlerをつけてみたりしたのですがどうしてもうまく行きません

ふと気が付き、これまでは

$data.= '<form action="***.php" method="post">';
$data.='<td>';
$data.='<button type="button" name="**">Name</button>';
$data.='</td></form>';

としていたのを

$data.='<td>';
$data.= '<form action="***.php" method="post">';
$data.='<button type="button" name="**">Name</button>';
$data.='</form>';
$data.='</td>';

のようにしたのです 要するに <form></form>要素を <td></td>要素の中に入れたのです 今までこんなこと関係ないだろうと思っていたのですが、それが大間違いでした こうすることにより無事 event handlerもそのまま継続され、思うどおりの動作をするようになりました

大分と理解が進んできたぞーっ

朝6:00AM前に起床し、新古賀病院にPCIで訪問するまでの そうですね実質 1.5時間ぐらい懸案のプログラミングに挑みました

必要要件としては

  1. サーバー側のデータベースから施設あたり登録症例数を取得する
  2. 取得したデータを JSON(JavaScript Object Notation)形式でクライアントに ajax通信する
  3. クライアント側では ajax通信により JSON形式データを取得する
  4. 取得した JSON形式データを加工する
  5. それをグラフとして出力する

というものです まずは1.ですね ここは MySQL database serverに対して SQL文で問い合わせを行います 具体的には

 	try {
    // MySQLサーバへ接続
   	$pdo = new PDO("mysql:host=$db_host;dbname=$db_name;charset=utf8", $db_user, $db_password);
	} catch(PDOException $e){
    	    die($e->getMessage());
	}
	$sql = "SELECT `hp_tbl_id` as `ID`, COUNT(*) as `ENROLL` FROM `pt_tbls` GROUP BY `hp_tbl_id`;";
	$stmt = $pdo->query($sql);
	$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);	

これは、SELECT `hp_tbl_id` as `ID`, COUNT(*) as `ENROLL` FROM `pt_tbls` GROUP BY `hp_tbl_id`; という SQL文により、MySQLに対して、`hp_tbl_id`毎にカウントした数を数えさせているのです

そして、その結果は、$rowsという配列オブジェクトに格納されます しかし、ここでのプログラミング言語は PHPですので、これを JSON形式に変換しないと、その後のデータ処理ができませんので

$json = json_encode($rows);
	
header('Content-type: application/json; charset=UTF-8');
	
echo($json);
exit;

によって、$rowsという php配列オブジェクトを JSONに変換しています そして、 echo($json); という文により、JSON形式のオブジェクトがクライアントに対して通信されているのです ここまでを行うプログラムはサーバー側のものであり、言語は PHPを用いています このプログラム・ファイルを get_each_h_enroll.php としました

次に、これを取得する方のプログラムですが、これはクライアント側のものであり、あくまでも htmlで書かれています ここではファイル名を each_hp_enroll.htmlとしました

ここでのキモは、d3.jsにより JSONデータ取得の ajax通信です それが

d3.json("get_each_hp_enroll.php", function(dataSet){
	var dataE = [];
	for (var key in dataSet) {
		dataE.push(dataSet[key].ENROLL);
	}

というものなのですが、d3.jsで定義されたJSON読み込み関数に従って、get_each_hp_enroll.phpより Ajax通信で渡された JSONデータを dataSetというオブジェクトに読み込みました

そして、それの中からデータとして使用する部分 – ここでは登録症例数 == ENROLLを配列 dataEに入れ込んでいます

後は、このdataEをもちいてグラフを描くだけですが、ここでは d3.jsの強力なデータ描画機能を用いるのです そのために、描画部分も d3という名前空間の中に閉じ込められています 従って さっきの部分も含めると

d3.json("get_each_hp_enroll.php", function(dataSet){
	var dataE = [];
	for (var key in dataSet) {
		dataE.push(dataSet[key].ENROLL);
	}
	
	d3.select("#myGraph")
		.selectAll("rect")
		.data(dataE)
		.enter()
		.append("rect")
		.attr("class", "bar")
		.attr("width", function(d, i) {
			return d;
		})
		.attr("height", 20)
		.attr("x", 0)
		.attr("y", function(d, i) {
			return i*25;
		})
});

ということになります

これを実行する = ブラウザで each_hp_enroll.htmlを開く と、以下のグラフが描画されます

DBから読み取り描かれたグラフ
DBから読み取り描かれたグラフ

これて見栄えは良くありませんが、とりあえずきちんと意図通りに作動するグラフが、SQL, HTML, Javascript, D3.jsを用いて描くことができました

ちなみに、一番重要な基幹技術は SVGなのです SVGというのは Scalable Vector Graphicsの頭文字ですが、その言葉通りに、 scaleできる == サイズを自由に変えることができる ベクトル化された描画 というものであり、HTML5の最新の技術なのです これが今使用されているブラウザで用いることができるようになり世界が変わったのですよっ

その話はまたね

心を鎮め清らかに

心が荒れるのは良くない それでも人間が未熟だから どうしても他者との関係の中で心が荒れる そんな時に人は色々な手段を使って心を鎮めるものです それが、宗教の領域にまで高められれば、座禅という型をとる場合もあるでしょう あるいは一心不乱に神に祈ることもあるでしょう あるいは五家荘の神楽のように神に捧げて一心不乱に踊る場合もあるでしょう

人それぞれ その人にあった方法で心を鎮めれば良いのです またその方法は一人にとって一つである必要は無く、色々な局面で色々な方法を適用すれば良いのです

などと言う前書きが長かったですが、今回僕はその方法として、「この際、理解不十分な部分を習得しよう」と思い立ったのです

実は RAP and BEATという国際共同多施設無作為化医師主導型臨床試験を運営しています 総登録症例数は 1,900例という規模のものです これはインターネット Web Siteを通じて無作為化および症例登録が行われるのですが、そのプログラム全体を僕一人で作成し、そして運用・改良しているのです

既に1,800例以上が登録され、もうすぐ閉じるのですが、大きなトラブルも無く運用されてきています もちろん securityには気をつけ、適宜データベースを backupしながら運用しているのです

前々から思っていて実現できていなかった interfaceとして、「ログインすれば、各施設毎の登録症例数一覧がグラフ表示される」という課題があります

どうすれば良いかは最初から分かっているのです

  1. クライアントがloginする
  2. クライアントの所属する病院IDをサーバーに投げる
  3. DB (database)を検索し、その病院IDおよび全参加病院ID毎の登録症例数をSQLで問い合わせる
  4. サーバーはDB問い合わせ結果をクライアントに投げる
  5. クライアントはそのデータ(Object)を解析し、グラフにする

ということです 3に関しては簡単です SQLさえ知っていれば簡単に一瞬で問い合わせ可能です 問題は4なのです ここではクライアントの画面が遷移しないように、ajax通信をせねばなりません その時には、通常 JSONというデータ形式を使うのが最近の流行りなのです

そして5ではグラフに描くのですが、ここでは javascript librariesを使用しますが、最近の流行りは D3.jsという libraryを用いるのです 問題はもう一方の Javascript librariesの雄である jQueryのようにふんだんに資料が転がっている訳ではないのです

問題点ははっきりしました 当初の課題は「D3.jsを用いて Ajax通信を如何に行うか?」という問題に帰着されたのです あるいは「D3.jsを用いて JSONをどのように扱うか?」と言い換えても良いです

そして苦闘24時間 ほぼ解決しました これで大きな一歩を踏み出せたのです 実際のコードは次回にでも掲載しましょう 何れにしても僕の心は鎮まりました

はまったあー

今 もう勉強中 それは、PHPの中でも非常に奥深い関数である、file_get_contents()についてなのです 正直この関数は security領域の境界をさまよう関数であるからでしょうか、インターネットの世界にも情報が非常に少ないのです

これまで Ajaxを用いて画面の書き換えを画面遷移せずに行う方法は存在しない、そのように誤解していましたが、この関数を用いればそんな魔法のようなことが可能となるのです

通常ブラウザでインターネットのあるページを見ている時、我々はリンクとか、ボタンとか押して次の画面に移ります ところが、この次の画面に移る = 画面遷移 する時には、ほとんどの場合 当然のことながら画面全体が書き換わります これは慣れれば当然のこととやり過ごしますし、まあ本のページをめくる、と思えば至極当然のことでしょう

しかし、そのことに満足しなのであれば、「何でいちいち画面全体書き換えるんだよ? 必要部分のみ書き換えればよいだろう?」という疑問に目覚めます

疑問、というのは人間が進歩する重大な動機の一つです これにより人間は次のステップに進むことができるのです

例えば想像して下さい、Ajaxの存在を広く世に知らしめた Google Map これは皆とても日頃お世話になっていますよね、このサービースが公開されるまで、インターネット上の地図ソフトでは、画面から外れたすぐ隣りの場所に移動するためにも、画面全体を書き換えていました ところが、Google Mapではスムーズに地図が移動していくのです 不思議と思いませんか?

この技術は Ajax (Asynchronous Javascript And Xml)という深い技術を用いて成し遂げれているのです ちなみに、Ajaxを使いやすくするために これまた広く普及したのが、jQueryというメタ言語です 実は僕もこの Ajax/jQueryを用いて色々なプログラムを書いていますので、理解はしています しかし、正直プログラムのデバグが非常に困難なのです これはやったことが無い人には分からないと思います 何しろ異次元を行ったり来たりするような感覚なのです

前置きはさておき、この Ajaxを用いねばならない、と誤解していたことが、何と file_get_contents()という関数を用いて行うことができるのです そして、そのテスト・プログラムを書いていてはまったのです それは 以下の2つの文の違いになかなか気づかなかった、ということです 皆様方も挑戦して下さい

 

プログラム A

	$context = stream_context_create(
		array(
			'http' => array(
				'method' => 'POST',
				'header' => implode(
					'\r\n',
					array(
						'Content-Type: application/x-www-form-urlencoded'
					)
				),
				'content' => http_build_query(
					array(
						'name' => $name,
						'msg' => $msg,
					)
				)
			)
		)
	); 

 

プログラム B

	$context = stream_context_create(
		array(
			'http' => array(
				'method' => 'POST',
				'header' => implode(
					'\r\n',
					array(
						'Content-Type: application/x-www-f0rm-urlencoded'
					)
				),
				'content' => http_build_query(
					array(
						'name' => $name,
						'msg' => $msg,
					)
				)
			)
		)
	); 

Aでは動作するのに、Bでは動作しないのです 「え、一体何が違うの?」 新幹線新横浜駅まで移動中のタクシーの中、ずっと悩みました そして、あと1分で新横浜駅到着、パソコン閉じねば、という時点で 「それはね oと0が間違っている」というご指摘を頂きました そうなのです o (=小文字のアルファベット オー)と 0 (=数字のゼロ)を間違って typingしていたのです

これで解決しました 実際の本体テスト・プログラムの掲載は帰りの新幹線の中でも行います とても良く file_get_contents()関数を理解できるものを掲載しますよ 乞うご期待

ということで、今朝は直接自宅から新横浜経由 – 名古屋駅 そして、名鉄特急に乗り換えて 岐阜県の可児市に出かけ、可児スレンダー・ライブデモンストレーションに参加します ライブ治療の後、お薬の講演があり、その後そのまま鎌倉に戻ります というのも、明日はまたまた朝から久しぶりのモスクワ入りだからです それにしても、file_get_contents()関数を少し理解したのがとても嬉しいですね 新しいステージに登った気分なのです

何とも不思議な

日本を10月18日金曜日の0:30AMに羽田より出発し、バンコク経由で、デリーで更に乗り継いで、昨日10月18日金曜日の14:00にアーマダバード空港に降り立ちました 暑い 一年ぶりのアーマダバードということになります

とっても疲れていて、最近の度重なる出張で体はゾンビのようになっていました その中で意識だけが鮮明で、頭脳は高速回転していました しかしながら流石にこのままだと大変なことになる、という予感がしましたので、15:30頃より、寝ました 夕食の19:30にも一度起きたけど、そのまままた寝ました 次に覚せいしたのは 0:00AM頃ですが、また寝ました 最終的に起床したのが、10月19日土曜日の 5:00AMでした いやあ すごく寝ましたねー こんなに長い時間眠りをとったのは何年ぶりでしょうか いや10年ではきかないですね

本日から慢性完全閉塞二例、分岐部二例を含むライブデモンストレーションをTRICO 2013で行わねばなりません 今朝朝食の時に、色々な先生が世界中から参加されているので驚きました 全力を尽くし、恥をかかないようにせねばなりませんが、なんにせよ患者さんに対して良くすることが最大の目標です 残念ながら慢性完全閉塞用ガイドワイヤーがあまり揃っていないような事前情報です その中でやれるだけやるしか仕方ありませんね ここで喚いたりしても、何も事態は変わらないのですから・・・

それにしても不思議なエラーを潰すのに格闘してきました それは、飛行機の中で既に格闘してきたのです 未だに解決していませんが、エラーをバイパスする方法をとりました エラーというのは Ajax通信に関わるエラーであり、しかも、Safari, Chrome, Firefoxとブラウザを試した中で、Firefoxでのみ確認されるものなのです

Firefoxは僕の知る限り一番html標準に近いブラウザだと思うのですが、そのブラウザで走らないと話になりませんので、エラーを回避する道を選びました それにしても Ajax通信のエラー原因特定は本当に難しいですね

再び Ajaxに挑戦

ある臨床試験サイト構築中です その中で、登録症例一覧を出力し、その症例に飛ばす、というインターフェースが必要と感じました

それ自体は簡単なことですが、問題はいわゆるページングです ページングの問題は、ある程度大きなデータを扱うサイトを構築する時には何時も突き当たる難問です CakePHPなどのフレームワークを使用すれば、フレームワークに内在した機能で、簡単に作成できますが、PHPを用いてゼロから構築するとなるとそのような訳には行きません

想像してみて下さい 300件登録されたデータを一枚のページに出力するのは簡単ですが、通信の時間がかかるのと、もっと問題は、探しにくく閲覧しにくい、ということなのです 従って、優しいインターフェースとしては、たとえば、10ページ目20症例分を出力する、というようにページを選択できるようにするのです

もちろん、これをHTML + PHP + MySQLのみで実現するのは難しくありませんが、問題は、ページ切り替えの度に、ページ遷移が起こるので、通信トラフィックが増加するだけでなく、ユーザーから見れば、画面全体が書きなおされるので不愉快です

そこで出てくるのが Ajax (Asynchronous Javascript and XML)という技術です これまでにも何回か紹介していますが、この技術を使います

苦労の末、思い通りのインターフェースが構築できました

重大な security hole発見

第二回湘南TRIマニアック・カンファランス開催に向けて、on-line登録システムを構築してきました といっても、2週間程度の作業でした いよいよそれを昨日公開したのですが、清水先生からのご指摘により重大な security holeの存在に気づきました

今朝早く起きてその原因を探り既に修正しました やはり一人で作業ばかりしていると、なかなか気づかないものです それが人間なのでしょうか しかし、何とかならないかなあ もちろん既にある CakePHPとかZend Frameworkなどを使用すれば多くの問題は解決するのでしょうが、いまさらそれらの Frameworkの規約を勉強するのがめんどうです

だから、一時やりかけた CakePHPも今はすっかりご無沙汰で、ひたすら Javascript/jQuery/PHP/MySQLでプログラムをさらで書いています しかも、クラスなど使用せず、思いっきり古いスタイルのプログラミングに徹しているのです

C++で思い切りクラスを使ってプログラミングするのとは全く対極にある世界です

Ajax

Ajaxを用いて NAUSICA AMI試験の監査ツールを実装しました。Ajaxの仕組みなんてすっかり忘れていたのですが、プログラム書いている内にすぐに回復しました。やはりAjaxを用いると従来の Webページからは信じられないような画面の書き換えが行われ、プログラムを書いた甲斐があります。

その骨子は三つのパートです

  1. 主要画面
    1. ここではデータベースから受け取ったデータを cssを用いて見てくれを整えて出力する
    2. さらに、データを受信するためのボタンをつける
  2. データを受け取る Javascript (Ajax)
    1. ここがAjaxの根幹です
    2. ブラウザの Document Object Model (DOM)を用いてダイナミックに画面を書き換えます
  3. 裏で動くデータ加工プログラム
    1. データベース MySQLに対して SQLを発行してデータを得ます
    2. それを一定の形に加工します
    3. 加工の仕方としては、 JSONや HTMLを用いるのが一般的ですが、 TEXTでも良いのです 今回は HTMLを用いました

    忘れないようにおいおいプログラムを書き記します