馬鹿なことをやっていた 今気づいたけど

さて、kamakuralive.netは鎌倉ライブの Home Pageですが、先日までサーバーの切り替えですったもんだしたのです しかし、このクラウド・ベースのサーバーになり速度は明らかに早くなり安定しています

ここのプログラムは何回も言いますが、全てゼロから僕自身が html, css, jQuery, javascript, php, sql (mysql)を用いてプログラムを書いてきたものです

基本的にデータ構造は、たった3つのテーブルを使用するのみです それは、それぞれ dr_tbl, session_tbl, role_tblと名付けていますが、論理的にはお互いにリンク付けられ、関係データベースを形成しています

そのように作ったつもりだったのですが、今日突然気づきました それは database sqlのデバグをしている段階だったのです 何と role_tblsが session_tblを指すべき indexを作っていなかったのです!!!

もちろん今からこれを作るのは簡単ですが、そうなるとそこに関係したプログラムのみならず、既に入力されているデータそのものも変更が必要となります 参りました

そんなことをすれば膨大な時間がかかりますので、とりあえずはこのままにすることに決めました ほとんど不都合は発生しませんが、役割の時間帯重複を sqlで検出することが困難なのです

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

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

ついに実現しました

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

ようやく解決

今 Ajax通信を用いたプログラム作成していま Ajaxは二つのページの間を渡り歩くため、理解するのが難しいのです

今作ろうとしているのは databaseより読み取った表形式データをソートし、それをページに表示するのですが、ページのhead部分をクリックすると逆向きにソートされる、というようなよくある表示なのです

ページそのものを書き換えるのであればそんなには難しくありませんが、ページ書き換えは Webの世界ではコストが大きいのですから、Ajax通信で DOMを書き換えるべきなのです

ただ単に書き換えるのであればまあできます しかし、クリックする毎に反対向きにソートするようなものは .toggle()とう jQuery関数がどうやってもうまく作動しないため、工夫が必要でした そしてこれが解決策です

$("#name").click(function() {
			if (this.value == 'ASC') {
				this.value = 'DES';
			} else {
				this.value = 'ASC';
			}
			$.post("doctors_list.php", {name: this.value}, function(data) {
					$("#dataarea").html(data);
				});
		});

これにより id=”name”のボタンがクリックするたびにそのvalueが ASCとDESの間を交互に切り替わりうまく実現できました

うーん これは困りますねえ

CDNというのをご存知でしょうか?  Content Delivery Networkの略だと思います これは、インターネットで皆が使用する可能性の高いライブラリなどを配信専用に最適化されたサーバーから素早く皆に供給するために色々な会社がサービスとして行っているものです 有名なものとしては、Javascriptのライブラリである jQueryを配信する CDNがありますし、Twitter bootstrapというものも無くてはならいなサービスです

これらのサービスを利用して皆がインターネットのサイトを構築しているのです

ところが本日北京で更新したサイトを uploadした後、アクセスすると、どうも jQueryが動いていない、という驚くべき現象に遭遇したのです 自分で書いたコードを見なおしてみるとどうやら 以下の部分が関係しているようです

<?php
	if ($_SERVER['HTTP_HOST'] == 'localhost') {
?>
		<link rel="stylesheet" type="text/css" href="twitter_bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="twitter_bootstrap/css/bootstrap-theme.min.css">
		<script src = "javascriptlib/jquery-1.10.2.min.js"></script>
		<script src="twitter_bootstrap/js/bootstrap.min.js"></script>
		<script src="d3/d3.min.js"></script>
<?php
	} else {
?>
        <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
		<script src = "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<?php
	}
?>

これは何をしているのか? と言えば、テスト用の local serverで作動させる時には、localのファイルを読みに行かせ、インターネットにつながっている時には、CDNを読みに行かせ作動を最適化させようという工夫なのです

ところが、どうも else以下の部分、つまりインターネット接続時に CDNを読みに行っていない、というか読み込めないようなのです この国では Googleが接続できないのは有名な話なのですが、どうやら

//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

で、CDNからの読み込みが弾かれているようなのです うーん困った問題です 従って、急遽ライブラリの読み込みを localから行うように変更しました まあ、それで作動はきちんとするのですが・・・

そして再び D3.jsを用いて登録症例数週毎推移をグラフとして表示する部分も uploadしました こんな風になるのです グラフをクリックしてね

graph.gif
graph.gif

心を鎮め清らかに

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

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

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

実は 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>

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