あっという間に目まぐるしく二週間が過ぎ

あっという間に二週間が過ぎてしまいました この間、TAVIにかかりきりかと言えば、そうでもなく しかしながら激しいTAVIに各地で付き合いました

その中で、先週は島原ライブで四例治療し、その中の一例はかなり高難度のCTOでしたが、それもうまくやり、昨日は函館で非常に難度の高いCTO二例を我ながら信じられないような強い意志の力と、これまでの知識、積み上げてきたテクニックを総動員してやり遂げました 集まっておられた韓国の先生方 (第11回 日韓友好TRIセミナー)もすごく満足されました TRIの可能性の限界への挑戦でした でも疲れきりました CTOの一例目で渾身の力を使いましたので、CTOの二例目の時には左手の指や足底の筋が痙攣(つる)していました この二週間で何例のTAVIとCTO三例を含めたPCIを行ってきたのでしょうか

その一方で鎌倉ライブのHome Page programmingにとりかかりました 暫く javascript/sql/jQuery/phpなどと何ヶ月も付き合ってきませんでしたので、自分の知識と感覚を取り戻すのに時間がかかっています 実はこの数週間、「深層学習」の勉強を Kindle本でやっていたのです 偏微分や行列計算などこれまで避けてきたことにも再挑戦しています そんなこんなであっという間に時間が流れていったのです あ~~~~ こんなことではいけない いけない

この土日相当に悩んだぞ

この土日は、久しぶりにプログラミング・モードに入りました 日本循環器学会で配布されていたプログラム閲覧用Appに触発されたのです

昨年の鎌倉ライブHomePageは PHP/JavaScript/jQuery/CSS/html/MySQLを組み合わせて何とか付け焼き刃で作りました

それなりに使えるものであり、未だ HomePageは残してあります

しかし、これは本当に付け焼き刃なので、もう少しきちんとしたものを作りたい、そのためには Laravelを勉強しよう!!と思ったのですが、既に挫折しました とにかく PHP以外に学んだり、覚えたり、あるいは流儀に馴染んだり、そのようなことが多すぎます もう僕の脳みそは新たなものを取り入れる余地があまりありませんので、これは辛いのです

そこで、考え方を方向転換しました 「折角使えるようになっているPHP/JavaScript/jQuery/CSS/html/MySQLなのだから、そのまま推し進めよう」と思ったのです そして「余力が出れば Laravelなりを学べば良い」と思ったのです

それで、昨年のプログラムを見直しました こんな風体にしたかったのです

デモスクリーン

もちろん、下の大きなアイコンは navigatorであり、このアイコン集はどのページにも出現し、スクロールしても消えません このようなものを作りたいのです

これには、Bootstrapの navibar/dropdownコンポーネントを用いればそんなに難しくなくできる、ということは自分で分かっていました そして実装したのですが、どうしても

こんな風にDropdownしたいんだ!!!!

こんな風に(dropdownする)動かないのです いや、動いたり動かなかったり、と厄介なバグです

そしてついに原因をつかみました jQuery Libraryが version3.xであると動かないのですが、1.xや 2.xであれば動作したのです これには驚きました ちなみに 3.xでも動いていた時には次のようなコードを書いていたからです

<script src="http://code.jquery.com/jquery.js"></script>
<script>
	if ( !window.jQuery ) {
		document.write( '<script src="js/jquery3-1-0.js"><\/script>' );
	}
</script>

つまりこれであれば、on-lineであれば、CDNを読みにいっていますが、この読んだ先には、jQuery 1.xがあったからなのです

うーん時間潰しました

目標としていた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があり、それがぶつかっていないかどうかもすぐに判明できる、というものにしてあるのです このデータ構造を創造するのには随分と頭を回転させました 知力の勝負ですね

JavascriptからPHPに変数を渡すには?

羽田から福岡に飛ぶ飛行機の前後で「如何にして Javascriptから PHPに変数を渡すことができるか?」について考察しました

この逆は簡単にできますし、実際の Web programmingの場面でも時々使用します しかし、それとは逆方向となるとこれが難しいのです というよりも少なくとも汎用的にはこれは不可能です

その理由というのは、Javascriptは Server側で動作する node.jsのような javascriptを別とすれば、基本的には Browser上で動作する クライアント側の言語および環境なのです

これに対して PHPは完全に Server側で動作する言語なのです ですから、基本的にはクライアンとらサーバーへのデータ伝達形式である、POSTやGETあるいはCookieを用いねば情報伝達ができません それは securityの観点からも当然のことなのです

たとえば、Javascript側で <div id=”some”></div>のようにして このidに対してdocument.wirte()を用いて書き込む、それをPHP側で読み取ることは無理をすれば可能でしょう しかし、それとしても PHPを動作させねばなりません

これらの理由で Javascript -> PHPは不可能なのです

ついに実現しました

本日は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もそのまま継続され、思うどおりの動作をするようになりました

ついに本番ページに実装

これまでの積み重ねを経て、各種テストを行いました そして ついに RAP and BEATのトップページに登録症例数のグラフ表示を実装できました

動画で表示するようにし、自施設に関しては、赤グラフで表示するようにしました もちろん、ログインが誰により行われ、その人が所属する施設が自施設となります ここで問題だったのは、$_SESSION変数を如何にして Javascriptライブラリである D3.jsに変数として渡すか? でしたが これに関しては少し調べて簡単にできることが分かりました

ここに記載されていたように json_encodeを用いて jsonオブジェクトとして渡すのだそうです これは securityが深く関係しているようです 実際の javascript codeはかくも簡単です

// json_encodeを使用して$_SESSION変数を安全に javascript変数に変換する
    var hp_tbl_id = <?php echo json_encode($_SESSION['hp_tbl_id'], JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT); ?>;

この関数の第二引数はオプションであり、security上非常に重要だそうです

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

朝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時間 ほぼ解決しました これで大きな一歩を踏み出せたのです 実際のコードは次回にでも掲載しましょう 何れにしても僕の心は鎮まりました

React.js

今話題の Web Frontend開発用 Javascript libraryに React.jsというのがあります これは Facebookが Open sourceで開発しているもので、頻回に updateされています

Web開発の世界で話題になり始めてから未だ一年が経過していない、という非常に新しいものですが、劇的に Webの世界を変えていきそうな予感を皆感じているらしいのです

僕もそのおこぼれに預かろうとして勉強を開始しました しかし例によって非常に難しい 何しろ全くの別世界に来て、別の文化、別の言語で新しい世界で生活を始めるようなものなのです

勉強しようと思えば未だ満足な書籍も無く、またそもそも開発スピードが早くどんどんその言語構造も変化していますので、活字とするには無理があります そこで Webから勉強せねばなりませんが、その中心にあるのは Facebookが公開しているものです

これを読んで勉強すれば誰でも入っていける、のではありますが、何しろ英語ですし概念がなかなか難しくそんなに簡単ではありません とりあえず基本となる雛形の home pageとして挙げられているのは

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>React Tutorial</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/babel" src="scripts/example.js"></script>
    <script type="text/babel">
      // To get started with this tutorial running your own code, simply remove
      // the script tag loading scripts/example.js and start writing code here.
    </script>
  </body>
</html>

なのですが、ここで明らかなように、そのサンプルでは

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

として Internet上の CDNより肝心の react関連の js fileを読み込んでいます このようにすれば、無駄にファイルを読み込む必要が無く、運用する場合には良いのですが、自分のパソコンで開発する時にはインターネットに常時接続していなければ不可能です 僕はしばしば国際線飛行機の中でこの作業をしますので、ローカルに持っていなければ開発そのものができないのです この時にどうすれば良いか? そこで react.jsの名前空間定義を調べた結果 自分自身のプログを参考にしました

そして解決策は

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react-dom.js"></script>
    
<script>
if (!window.React) {
 document.write('<script src="../../build/react.js"><\/script>');
 document.write('<script src="../../build/react-dom.js"><\/script>');
 }
</script>

とこのようにすれば良いのです これは大発見です