ようやく解決

今 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>

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

今朝の新発見あるいは少しだけ発明

今朝、昨日のTAVI患者さんを診察している間に思いついたのです HomePageには様々な Javascript frameworkを呼び込みますが、これらの有名な Frameworkには CDN (Content Delivery Network)というのが設けられており、そこにアクセスすることにより、高速に安定して Framework codeを読み込むことができます

ですからこれを使用すべきなのですが、ローカルでの開発段階ではしばしばインターネットにアクセスできないので、ローカル側に Framework code fileを置いておく必要があります しかし、この場合、インターネット上で走っているのか、ローカルで走っているのかで場合分けする必要があります

これに対して僕は今まで、php programを書いて以下のようにしていました 例は jQueryを読み込む場合です

<?php
	if ($_SERVER['HTTP_HOST'] == 'localhost') {
		echo '<script src="../bootstrap/js/jquery-2.1.4.min.js"></script>';
	} else {
		echo '<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>';
	}
?>

もちろんこれで作動しますが、問題点の一つとしては、ファイルの拡張子をたとえば index.htmlでなく、index.phpにせねばならないのです(もちろんサーバー側の設定で .phpでなくとも良くなりますが・・・) 何れにしてもこれはサーバー側で動いているので、何だか避けたい気分です

そこで、クライアント側で動く Javascriptを同等のことを実現するにはどうするか? 色々調べた結果このようにしました

<script src = "https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
	if (!window.jQuery) {
		document.write('<script src="./bootstrap/jquery-2.1.4.min.js"><\/script>');
	}
</script>

ここでキーとなるのが、window.jQueryというものです その前の第一行で

https://code.jquery.com/jquery-2.1.4.min.js

より jQuery codeを CDNより読みこんでいますが、ローカルのままでありインターネットに接続していなければ、これは失敗に終わり、windowオブジェクトに jQueryという名前のオブジェクトは登録されていません

従ってこの場合、3行目の条件文は失敗しますので、その場合のみローカルから jQuery codeを読み込むのです

ちなみに、

./bootstrap/jquery-2.1.4.min.js

のようにディレクトリのトップを”./”で参照に持ってきています

これはとても便利です 一種の発明ですよね

あと一つ 大事なことですが、<script> </script>の閉じタグですが、/というのはhtmlの特殊文字の一つなので、エスケープする必要があります

さらに改善

鎌倉ライブデモンストレーション・ホームページをさらに改良しました iPhoneでも、iPadでも Macの Safariでも問題なく意図したように動作していることを確認しました

問題は Javascriptの名前空間だったようです jQueryを通常の Javascriptと共にプログラム書くと、jQueryは Javascriptの globalな名前空間から独立するのだと理解しました まあ当たり前のことですね 結局日米国旗が交互に作動するようなプログラムを jQueryで書きました 以下の通りです:

$(function() {
	"use strict";
	setInterval(on_off, 1000);
	setInterval(off_on, 1000);
	function on_off() {
		$(".jp").css("visibility", "visible");
		setTimeout(function() {
			$(".jp").css("visibility", "hidden");
		}, 500);
	}
	function off_on() {
		$(".us").css("visibility", "hidden");
		setTimeout(function() {
			$(".us").css("visibility", "visible");
		}, 500);
	
});

要するに、setInterval(***, 1000)により ***という関数を jQuery名前空間の中で 1000mSec毎に呼んでいます さらに、setTimeoutにより、500mSec毎に cssの visibility属性を書き換えているのです

この jQuery名前空間のプログラムは globalな Javascriptプログラム (これはこのページでキラキラ作動しているもの)とは独立して動作することになります

ちなみに、このキラキラ部分は、html5の cavas部分に書き込まれています

我ながら天才

いゃー 我ながら天才と思いました 何でそんなことできるの? いやいや昨日のPCIのことではありません 今朝から遭遇した iO/Safariにまつわる問題です

ことは大事 そのように分析しました でもめげません 困難が巨大であれば本能的に立ち向かいますねえ

そして解決しました プログラムを書き換えたのです 見てください 鎌倉ライブデモンストレーションのホームページを 是非とも PCで見るだけでなく iPAD, iPhone, Android

これらの端末で見て下さい 見事に動き、そして自在に端末に順応して自ら表現形式を変化させているのを見て下さい

この改良・問題解決をアイスコーヒーを飲む間にしてしまった自分の能力に驚いています 我ながら天才! そのように思いますよ

よし

さてさて iOSにまつわる問題点ということがわかったのです、あとはどう処理するか? なのです とりあえずは 同じように動きのあるものを創るのは時間がかかるので iOSや Safariならば静止画にしてしまうのです つまらないけど仕方ありませんよね

そこで色々探していると ありましたね 世の中には奇特な方が 感謝です このページを参考にやってみましょう

でももう飛行機の中なのでまたね

やったぞー と うーん

昨日は金沢循環器病院を舞台に特定非営利活動法人ティー・アール・アイ国際ネットワーク主催による第9回日中友好TRIセミナーを開催させて頂きました これも全て金沢循環器病院の方々の多大なるご協力のお蔭です

最近は日中間の色々な問題があり開催できるか微妙でしたが、無事開催することができ、中国からも先生方にご参加して頂けました

ライブデモンストレーション第一例目は僕の担当となりました これで四回目となりましたが、済生会西条病院の金子先生が助手をして下さり色々と助けて頂きました 本当に感謝感謝です

症例は右冠動脈の慢性完全閉塞でしたが、レトロで入り綺麗になりました

ここまでは「やったぞ」なのですが、昨夜色々とひらめきを感じていたのですが、鎌倉ライブデモンストレーションのホームページに動きをつけるため、Javascript/jQueryでプログラムを書いています

その中で日米の国旗を交互に動かそう、そのように思いついたのです そして、それを実現すべく今朝プログラムを書いたのです 普段テストはローカル環境で Firefoxで試すのですが、問題なく動きました

しかし、ふと気がついて iPad上の Operaで試すと全く動かないのです これは Operaが悪いのか? そう思い iPad上の Chrome/Safariで試しても動きません

さらに、MacBook上では Firefox/Chromeは問題なく高速に動作しましたが、Safariで動きません

さらに、Windows7上の Internet Explore11/Chrome/Firefoxでは問題なく作動します

ネットで色々と調べて原因が分かりません これは Safariの Javascript処理に問題があるのか? そのように思い iPadでテストしました やはり Safariでは動かないのですが、不思議なことに これまで動作していた Chromeでも動かないのです となるとこれは Browserの問題ではなく、iOSの問題のような気がしてきました

OSそのものにまつわることであれば、僕などが手出しできるものではありません うーん 困ったぞー

すっかり忘れて

まったくすっかり忘れてしまいました 何を? それは これまで作成・運用している Web Siteのことです

この背後では大掛かりなプログラムが走っています その多くは PHPと JavaScript/jQueryで書かれたものなのです そのプログラムのバグを潰そうとようやくとりかかったのですが、この間実に2ヶ月間が空いていたのです

その結果、プログラムのロジック把握ができにくくなっているのです これまでの変更履歴は Gitでトレースしているので何処をどう変更したか明らかであり、また何時でも戻すことができます しかし、肝腎の頭の中をついていかすには少し時間がかかりそうです あああ