すっきり解決

臨床試験参加許諾画面として、最近良くみかけるもので、色々と書いてある文章をスクロールとして最後まで見ると初めてボタンが出て、「承諾します」というのをクリックできるようになる、そのようなインターフェースを実装したくて、この二日間調べました

そして、jQueryのある種のプラグイン(mCustomScrollbar)を用いれば比較的簡単に実装できそうだ、ということが分かりました

そこで、テストを繰り返したのですが、未だに何故か分からないのですが、デモでは動作するのに、そのソースをそのままコピーしても動作しない、という訳の訳らないエラーに悩みました

朝の 2:00AMに覚醒してそんなことをして悩んでいましたが、こんな時にはGoogle博士の出番です

それで、検索かけましたところ、頼みの綱の StackOverFlowでヒットしたのです、この人達も悩んでいましたが、何とか解決したのです さらに初めて StackOverFlowに投稿しました

それは次のようなコードを書くのです

$(function(){
		var csObj = new Object();
		//csObj.horizontalScroll=true;
		csObj.setWidth=700;
		csObj.setHeight=300;
		csObj.verticalScroll=true;
		csObj.axis="xy";
		csObj.advanced={autoExpandHorizontalScroll:true};
		csObj.scrollButtons = {
			enable:true,
			scrollType:"pixels",
			scrollAmount:300
		};
		csObj.callbacks = {onTotalScroll:finishFunc};
		//csObj.theme="dark";
	
		$("#content_1").mCustomScrollbar(csObj);
	});

ここでキモとなるのが、公式サイトをいくら見ても非常に発見しにくい propertyである advanceとそのさらにプロパティである、autoExpandHorizontalScrollをセットすることなのです

これをしないと、動作しません さらに、axisもセットせねばならないのです

ちなみに上記を記述すると、縦横にscroll barが出ると共に、scroll buttonも出現し、それをクリックすると 300 pixelsずつスクロールします

これですっきり解決ということにしたいと思います

jQueryが動作しない — 解決!!

すっきりしました その後色々と試みました CDNによりインターネット上のコード配布サービスを用いればきちんと動作するのに、ローカルにダウロードしてリンクすると動作しないのです

こんな馬鹿なことはありません 色々やりましたが、ふと「これってひょっとして Unixの permissionの問題では?」と思ったのです

ご存知のように、OSXの本体は Unixなのです そこでは Windowsよりも厳格なアクセス権限がそれぞれのファイルに設定されているのです そこで、

 

$ls -l

として permissionを調べると案の定実行権限が設定されていなかったのです そこで実行権限を設定したところ、見事に解決しました

日々勉強ですね

何と こんなことで時間を 30分も使ってしまった

今 Web programmingをしているのですが、毎回新たなページをプログラミングするたびに新たな技術に挑戦しています

その中で、とっくに制覇した技術を適用したのですが、何とそれが動かずその原因究明に30分も使ってしまいました

<script>
jQuery(function() {
	$("#join").click(function() {
		location.href = "join/join00.php";
	});
});
</script> 

こんな簡単なコードを挿入したのですが、何と動かないのです
もちろん、<header></header>でjQuery本体を読み込んでいるのです
どうしても原因が分かりませんでした
しかし、「もしや?」と思い、試みました それは
<script src=”jquery-1.10.2.min.js”></script>
と読み込んでみたので、そうしたらば何と動いたのです!!
実は最新の 1.x系である jquery-1.11.2.min.jsを読み込んでいたのですが、それでは動かないのです これってどういうことでしょう
だって、先のjQueryコードというのは結構基本的なものであり、こんなのが動かないのでは使い道がありませんよね
ちなみに、2.x系の最新である jquery-2.1.3.min.jsを読み込んでみたのですが、これも動きませんでした
ちょっと信じられない事態です 年末ぎりぎりにこんな難問に突き当たりました

次から次と

Webの進化は激しく、僕のような素人が追跡していくのはとても大変です 昔のように、Webと言えば、htmlだけであったのはもう石器時代の話であり、その後、cssや DOMという考えが出てきてすぐにjavascriptそして、それから派生というか発展させた Frameworkが様々出現、もちろん Server側ではこの間に凄まじいスピードで進化しているようです

その中で僕がかろうじてついてきたのは、html5, css3.0, javascript, jQuery, Twitter Bootstrap, php, rubyぐらいでしょうか そして、現在は Ruby on Railsの勉強開始、さらに、angularJSを開始しようか? と思っているところです

そして、さっきふと「bootstrap + angularJS」の組み合わせはどんなことになるのか? と疑問に思い調べていると何と今まで知らなかった言葉 “Yeoman”というのが出てきました

これは何と、これらの各種 Frameworkのインストールを簡単にするツールのようです とても便利そうなのですが、下手に手を出すと火傷しそうなので、自分のスキルが十分になるまではこのまま手をつけずにいることにしましょう

しかし、早い とっても早い 次から次とテクノロジーが進化していくのですね

不思議不思議訳がわからん – Unixtimeなどなど

今 Global Clinical Trialを走らせていますが、そのe-CRFは僕自身で一人でゼロからプログラムを書きました サーバー側は PHP + SQL (MySQL)で書き、クライアント側は HTML + CSS + Javascript (jQuery)を用いて書いています

PHPの Frameworkは一切使用せず native codeで書いています

その作成段階で、世界中からアクセスされるとすれば、それぞれの現地時刻と、統一時刻(例えば グリニッジ標準時など)をどうするか? という問題に一人悩みました インターネットの世界では Unixtimeという秒数が標準時刻となっているのですが、それで行った場合に、各国のクライアント側ではどうなるのか? あるいはローカル時刻を入力した時に、サーバー側ではどのようになるのか? 一体全体時差は吸収されるのか否か? そのような疑問に突き当たりました

そして、色々と試してみると、どうやらこの変換は自動的に行われるようである、と分かりました 逆に言えばわざわざ Javascriptを用いて クライアント側のローカル時刻を求めて、それを計算により変換する、などというややこしい操作は必要無い、ということになりました

この過程でどうしても訳が分からなくなり、大分と悩みました

やったぞ

昨日は送別会・歓送会がありました 7月から当科の陣容から 2名が少くなり、大変です まあそれなりに態勢を整えねばなりませんね

さて、最近数日の懸案であった Bootstrapの js codeについてようやく理解できるようになってきました

これは、Twitterが開発し、公開しているものであり、近年話題の Flat Interfaceに対応すると共に、ディバイスに対して自動的に大きさや並びを変化させるものです

これまで、cssを用いただけのものは実際に Webに uploadもしてきたのですが、javascriptをふんだんに使っているものは理解していませんでした やはりこれまで知らなかった世界に入れるのは嬉しいですね

はまったあー

今 もう勉強中 それは、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()関数を少し理解したのがとても嬉しいですね 新しいステージに登った気分なのです

だめだだめだ 睡眠不足

昨日は早朝から霞ヶ関に出かけました まあ公用と言って良いでしょう まずは霞ヶ関ビル地下の喫茶店で1時間余り打ち合わせ 英語での打ち合わせなので疲れますよね

それからいよいよ本番でした とても良い方々ばかりで色々と救われます

それが済んでから鎌倉にとんぼ返りして、 13:45には病院到着 そして、そのまま外来診療に入りました

そもそも午前中外来診療する筈でしたが、その公用の予定時刻がなかなか確定しませんでしたので、外来診療予定はクローズせずにおいたのですが、結局午前に確定した段階で、診療時刻を移動しました もちろん患者さんにその都度連絡せねばならず、クラークの人たちに負担をかけることになりました

外来診療終了してから、経皮的冠動脈インターベンションです

疲れきってしまいましたので、早々に帰宅し、早めに寝ました

しかししかしなのです 韓国の先生からの電子メール受領

「日韓友好TRIセミナー・Slender Club Japanの受付サイトに入ったが、最終登録リンクが切れている」そのような内容でした

そうだこのサイトは、ぶっつけで作成したので、バグとりもなにもしていなかった それからバグとりしたのですが、何しろもう忘れているので、自分自身が catch upするのに時間がかかり、結局、2:30AMにまたまた起きてバグとり なかなかバグが潰せず苦労しましたが、何とか 5:00AM過ぎに潰れました そして ServerにUploardすると共に、SQL dumpをとり、それをメールに貼り付け、メールを送られてきた Lee先生に「大丈夫 バグはとれました」とメールしました

さて、これから寝るか と思うも、そんな時間は無い 無い 無い 無い

あーん結局今日も寝不足のまま出勤ですね

明日は朝出発で岐阜県の可児市に出かけ、可児のスレンダーライブデモンストレーションに参加します 1例治療することになり、また会の終了後、講演です

そうだそうだ水曜日は朝札幌東徳洲会病院心臓センターに出かけ、外来診療してからとんぼ返り、そして夜は横浜で講演会だったのです 何だか一日二日前の出来事もどんどん記憶の彼方に押しやっていっています そうしないともうむちゃくちゃになってしまいそうですよ

でも今日のバグとりは楽しかったですね 頭脳を相当に使います HTML, CSS, JavaScript, jQuery, SQL, PHPという6種類の言語を駆使して作り上げている総勢 5,000行ぐらいのサイトです 大きくはないけども securty checkなど結構頭を使います

day or date

さてさて 英語で分からないことがありました それは dayと dateの違いです

Javascriptでプログラムを書いている時に、訳の分からないバグに悩まされました それは現在の日付を求める、という良くあるプログラムなのです もちろんそんなのは調べればいくらでもすぐに出てきます 典型的には

var TODAY = new Date();
var YEAR = TODAY.getYear();
var MONTH = TODAY.getMonth();
var DAY = TODAY.getDate();

alert(YEAR+'/'+MONTH+'/'+DAY);

問題はこの四行目なのでした ここではきちんと getDate( )という関数を用いていますが、似たものとして getDay( )という関数も存在します これは「曜日」を戻す関数なのです まあ「曜日」と言っても、曜日配列のゼロから始まるインデックスなのですが・・・

ちなみに、英語では

「今日は何日?」というのは

“What the date (is today)?”

「今日は何曜日?」というのは

“What  day (is today)?”

なのでした

CDNの振り分け

jQueryを始めとして インターネット・プログラミングで使用されるライブラリは、更新がとても早く、ソースコードに取り込んでいると、ライブラリ更新になかなか間に合いません そこで発達したのが CDN = Content Delivery Networkという便利なサービスです

有名なものは Googleが公開しているものであり、例えば jQueryに関しては

//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js において公開されています

これをプログラムで取り込むのですが、問題はローカルでインターネット接続無く、例えば飛行機の中で開発している時に、この部分でエラーとなってしまうことです。ですから通常はローカルにも同じコピー、もちろんこれはリンクでなくおいておき、そちらから読み込むのですが、これをuploadした時に、全部リンクに書き換えねばなりません こんなこと「人間のすることではない!」と、プログラムで自動的にやらねばなりません

まず行ったのは javascriptでやることです

<script type="text/javascript" id='jquery'></script>
<script type="text/javascript">
  var jsrc = '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js';
  if (location.host == 'localhost') {
    jsrc = 'JavaScript/jquery-1.10.2.js';
  }
  document.getElementByID('jquery').setAttribute('src', jsrc)  ;
</script>

ところがこれではうまく行かないのです このようにクライアント・サイドで行うとどうやらスクリプト読み込みのタイミングが影響しているのでしょうか? 何れにしてもこの方法では壁にぶち当たりましたので、サーバー・サイドですることにしました もちろんPHPです

 

<?php
	$jquery = '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js';
	if  ($_SERVER['HTTP_HOST'] == 'localhost') {
		$jquery = 'JavaScript/jquery-1.10.2.js';
	}
	echo '<script type="text/javascript" src= '.$jquery.'></script>';
?>

これはきちんと動作しました とりあえずはこれですることにします。