Slender Clubライブ一例目終了

昨日は湘南鎌倉総合病院から品川プランスホテルで開催されている Slender Club Tokyo in 2018へのライブ症例中継の日です

これまで僕自身はこの病院からもたくさんのライブを全世界に向けて飛ばしてきましたので、特に緊張することも慌てることもありません そういう意味では、よく議論になっているライブ中継の欠点、つまり — 術者やスタッフが緊張してしまい、普段の実力を出せなくなり、その結果、患者さんに不利益となる — ということからは僕自身そしてコメディカルも含めたスタッフは無縁です

逆にこのようなライブでは会場におられるたくさんの全世界の expertsの貴重な意見を真摯に聞ける、その結果 より良い治療を行える可能性が高まる、そのような利点が際立ってきます

まあそんなこんなで自分の割当分の患者さんは無事成功裏に二例治療することができました 特に一例目の方は非常に危険が予想される患者さんであり、あまり調子に乗って(つまりライブという環境の中で他の人の行け、行けという意見に押されて)攻めすぎると危険な事態に陥る、そのようなことが僕の誰よりも多くPCIをしてきた人生の経験から感じていました 結果は、押しすぎずある妥協点で終了し、手技は成功し、治療の目的は達成し、かつ無事に終了しました

ここいら辺のPCIというかどんな治療にも共通するであろう真実をどれぐらいの人々、特に若い先生方に理解して頂けるは? 言葉では伝えにくいものがありますね もうかれこれ 30年ぐらい前になりますが、そう昭和の終わりに、日本のとても偉い方が腹部臓器の悪性腫瘍となられ、某国立有名大学の外科の教授が根治手術をされたのですが、明らかにその手術は限界を越えたものだったと思います もちろん僕は腹部外科手術に詳しくありませんので、間違っていたらばすみません 何れにしてもその方は手術を契機に亡くなられました そんなことをどうしても思い出します

さてさてそんなことを考えながら本日は朝から昼のdutyまで懸案のプログラミングにとりかかっています 昨日来「あれ? 何で?」ということがあり、その疑問にすっかり取り憑かれ、どうすればこの疑問を解消できるか? そんなことに悩みながら座長をしたりしていたのです

結果的に解決しました これまであまり深く考えずに慣習に則ってやってきたからこんな事態に直面したのですね 反省です こんなことはこれまで jQueryを使い始めてから、ですから 10年ぐらい前から何回も何回も知っている筈のことだったのです 分かりやすくプログラムで書きますね

<!doctype html>
<html>
  <head>
    <title>TEST PROGRAM</title>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
  </head> 
<body> 
<form action="http://www.kamakuraheart.org/wordpress/" method="post"> 
<button type="submit" id="btn">ブログに飛ぶ</button> 
</form> 
<script> 
$('#btn').on('click', function() { 
    if (!confirm('本当にブログに飛びますか?')) { 
        return false; 
    } else { 
        location.href='http://www.kamakuraheart.org/wordpress/'; 
    } 
}); 
</script>
</body> 
</html>

これは勿論動作します しかし、次のプログラムは動作しません

<!doctype html>
<html>
  <head>
    <title>TEST PROGRAM</title>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script> 
$('#btn').on('click', function() { 
    if (!confirm('本当にブログに飛びますか?')) { 
        return false; 
    } else { 
        location.href='http://www.kamakuraheart.org/wordpress/'; 
    } 
}); 
</script>
  </head> 
<body> 
<form action="http://www.kamakuraheart.org/wordpress/" method="post"> 
<button type="submit" id="btn">ブログに飛ぶ</button> 
</form> 

</body> 
</html>

何故でしょうか <script></script>の位置に注目して下さい jQueryが対象としているオブジェクトは ‘#btn’ですが、それは DOMでは <button></button>の中で id = ‘btn’として指示されているものです

つまり、この作動しないプログラムでは、jQueryが id = ‘btn’というオブジェクトを探しに行っても、未だ DOMの中に読み込まれていないので、jQueryは分からないのです もちろんhtmlも上から順番に読み込まれます

では次のプログラムはどうでしょうか?

<!doctype html>
<html>
  <head>
    <title>TEST PROGRAM</title>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script> 
jQuery(document).ready(function() {
  $('#btn').on('click', function() { 
      if (!confirm('本当にブログに飛びますか?')) { 
          return false; 
      } else { 
          location.href='http://www.kamakuraheart.org/wordpress/'; 
      } 
  });
}); 
</script>
  </head> 
<body> 
<form action="http://www.kamakuraheart.org/wordpress/" method="post"> 
<button type="submit" id="btn">ブログに飛ぶ</button> 
</form> 

</body> 
</html>

これはきちんと作動します 何が変わったのでしょうか? jQueryによるプログラム(スクリプト)全体が jQuery(document).ready(function() {})で括られていますね これが意味するところは、htmlのプログラム全体が読み込まれて DOM解析が終了するまで jQueryに待ちなさい、ということを指示しているのです

実はこんなこと jQueryを使うに際しては当たり前のことです ですから、いちいち jQuery(document).ready(function() {})でくくるのは面倒なので </body>タグの直前に jQueryスクリプトを書くように推奨されているのです こんなことすっかり忘れてしまい、これまで慣習で</body>タグの直前に jQueryスクリプトを書いてきたのですが、それを<head></head>に書いた所、プログラムが動作しなくなり、とても焦ったのです 全く何やっているのだか 解決に数時間を要しました こんなことだから時間がいくらあっても足りませんね

こんな馬鹿なことで1週間潰した

さて、今から本格的にプログラム書こうと思っているのが、2019年に学会長を行うように指示されといるとある学会があるのですが、そのいわゆる学会プログラムやその他諸々を handlingするソフトの開発なのです 当然のことながら Smart Phone/Tablet/PCの全てに対応するように “Responsive Web Design”で開発するのです DBは慣れている MySQLを使用し、言語もこれも慣れている PHPを使用します

こんものいちなり書けないのでテスト・プログラムを作成し、local web serverでテスト繰り返すのですが全く作動しないのです

「えーーっ、なんでぇーーー こんな筈は無いはずだあ」と一週間悩んだのです 少しずつ修正しながらテストするのですが全く僕の意図を無視して動作しないのです

まあこんな感じです

// ここれはフロントエンドで SQLに探索語を渡す Ajax通信のルーチン
    $( document ).ready( function () {
      $( "#search_results" ).slideUp();
      $( "#search_term" ).keyup( function ( e ) {
        e.preventDefault();
        ajax_search();
      } );

      function ajax_search() {
        $( "#search_results" ).show();
        var search_val = $( "#search_term" ).val();
        $.post( "dr_role_find_backend.php", {
          search_term: search_val
        }, function ( data ) {
          if ( data.length > 0 ) {
            $( "#search_results" ).html( data );
          }
        } );
      }
    } );

 

そして受け取る方は、PHPとMySQLです

 session_start();
 session_regenerate_id(true);
 require_once('../utilities/config.php');
 require_once('../utilities/lib.php');	
 charSetUTF8();
 //接続
	try {
   // MySQLサーバへ接続
  	$pdo = new PDO("mysql:host=$db_host;dbname=$db_name_sessions;charset=utf8", $db_user, $db_password);
 // 注意: 不要なspaceを挿入すると' $db_host'のようにみなされ、エラーとなる
 } catch(PDOException $e){
   		die($e-&gt;getMessage());
 }

 $hp_name = strip_tags(trimBothEndSpace(mb_substr($_POST['search_term'], 0, 100)));	// 前後のspaceなど削除し、文字数を100文字に制限する
 $hp_name = strtoupper(mb_convert_kana($hp_name, 'ashK'));		// 半角英字大文字に変換する

 $stmt = $pdo-&gt;prepare("SELECT * FROM `hp_tbls` WHERE `hp_name` LIKE :hp_name ORDER BY `hp_name` ASC;");
 $stmt-&gt;bindValue(":hp_name", '%'.$hp_name.'%', PDO::PARAM_STR);
 $flag = $stmt-&gt;execute();
 $rows = $stmt-&gt;fetchAll(PDO::FETCH_ASSOC);
 
 if (!$flag) {
   		$infor = $stmt-&gt;errorInfo();
     exit($infor[2]);
 }

 

これで、検索語として病院名の一部を入力すれば、DBより検索してくれる筈なのです

しかし、しかし動作しない 本当にこの解決に一週間かかり、先程やっと解決しました

色々な問題があったのです まずは

trimBothEndSpace(mb_substr($_POST['search_term'], 0, 100))

という関数ですが、(1) mb_substrの引数を何時の間にか消去してました つぎに(2) trimBothEndSpaceという関数ですが、これは自作関数なのですが、それをlib.phpに作成してあり(ある筈)、それを読み込んで使用するのですが、何と lib.phpの中にこの関数を書いていなかったのです

この2つのバグのために、phpそのものが走らず結果的に echoで途中経過を出そうと思っても出せない そんな事態に陥っていたのです 本当に大変なバグ退治でした これも Ajax通信によるプログラムだからのことです 本当に非同期通信というのは難しいです これが解決してうまく動作しているデモ画面です

うまく Ajax通信が動作しているところ

Distal Radial Approach (DRA) vs Conventional Radial Approach (CRA)

さて、そろそろこの秘密のテクニックについて公表する時が来ました 何れにしてもライブでは皆の眼に触れることになるのでこれ以上秘密にしていても仕方ありません

DRAに関しては最近僕が推進している三文字略語ですが、未だ主流とはなっていません しかし、臨床試験を企画していますのでそれで主流となるでしょう dTRAとかも使われていますし、PPA (Princeps Pollicis Artery) Approachとか、も使われています これに対して通常の橈骨動脈アプローチについては、区別するために、僕は三文字略語として Conventionalを用いたいと思っています

さて、何故今 DRAが注目されるのでしょうか? 未だに経大腿動脈的冠動脈インターベンション (TFI: Trans Femoral Intervention)にこだわっている頭の固い先生方はここでは相手にはしませんが、経橈骨動脈的冠動脈インターベンション (TRI: Trans Radial Intervention)の優れた点は世界中で明らかになっています しかし、その最大の欠点は術後の橈骨動脈閉塞 (RAO: Radial Artery Occlusion)です これはTRIが生まれた時から悩ましき問題として注目されていました 既に論文にもなっている僕が仕掛けた大規模医師主導型臨床試験である RAP and BEAT trialでもこの点が Primary Endpointとされました

さて、DRAにおいては穿刺部位が何しろ CRAよりも末梢であるため、原理的にRAOが起こる可能性は低いと考えられます しかし、問題は何しろ新しい方法なのでデータがありません 想像のみで医療はできません そこで、僕はこの問題を解決するために無作為臨床試験を規格しているのです これに参加して頂ける施設と医師を求めています もちろん医師主導型臨床試験ですので、基本的にはボランティアとしての参加です 真実を知りたい、という知的意欲の下で参加して頂きたいのです

徐々にその全貌を明らかにしていきたいと思います 例によって、症例登録は Webで行います お金が無いとか色々ありますので、例によって僕が自分の知識を駆使して、html5 + css3 + Javascript + jQuery + Ajax + SQL + PHPでその全てのプログラムを書きます というよりも、既に成功裏に終了した RAP and BEAT試験のプログラムを改変するのです これが、僕が次に考えている大きな仕事です

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

さて、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の間を交互に切り替わりうまく実現できました