pirika logo

化学系プログラミング > 比較的新しい化学系プログラミング > HTML5手習

元記事2011年ごろ

iBooks Authorの使い方 2012.1.22

iBooks AuthorはMacやiOS用の電子書籍を作るソフトです。
中身自体はHTML5で書籍を作っているようなものですし、書籍作成が興味あるのでは無く、JavaScriptのプログラムを書籍の中で動かすのに興味があるので、ここで扱いました。

HTML5+CSS+JavaScriptで化学 2011年

DashCodeは現在ではもう動きません。

マックを使っている開発者ならDashCodeという開発環境は当然ご存知でしょう。
画面の上にパーツを配置して、ボタンが押されたときの動作をJAVAScriptで書いてあげれば、簡単にiPodなどで動くプログラムを書くことができます。

以前のバージョンではMacでウイジットとして動かすか、iPodにメールに添付して送り込んで走らせるかしかなかったのですが、最新のものはHTML5に準拠しているらしく、Safari(Mobile Safari)やChromeなどのブラウザーでもちゃんと動きます。
(正確に言えば、DashCodeで使っていたCanvasなどの拡張html機能がHTML5で正式にサポートされたので、どのマシンでも動くようになったと言うべきか。)


そうなってくれるとありがたいもので、今までにつくってきたプログラムが、HTML5をサポートしているブラウザー上で問題なく動くようになります。

しかも、アップル・ストアーのうるさい認証などはいりません。
(もちろん、アップルストアーで売ることもできますが。)

ただし、JAVAScriptはソースコードが丸見えなので、売り物のプログラムをWebで公開するするのはおすすめはしません。

しばらく使ってみたところ、自分のように化学がメインな場合には、やりたいことはこれで十分できるという結論に達しました。

これを使うとどんなことができるか、紹介していこうと思います。
Poseidon Miniを作って実際にHPに置いてMobile Safariでの動作をチェックしてみてびっくり。
DashCodeではSafariとMobile Safariの両方のWebアプリケーションが開発できます。画面は大きさにあわせなくてはなりませんが、JAVAScriptの部分は同じことも多いです。別々のプログラムを作ってHPにそのまま置いて、Mobile Safariでアクセスしたら、自動的にMobile用のWebアプリケーションに飛びました。すごいなー。

最も簡単なプログラムはテキストフィールドとボタンだけのプログラムでしょう。

JOBACK法を使って、沸点、臨界定数、生成熱、Gibbs熱、融解熱、蒸発潜熱を計算するプログラムを作ってみます。
こうしたプログラムの場合、テキストフィールドの数が非常に多くなり、MacやiPadで使う分にはいいのですが、iPhoneなどでは使いにくくなります。

そうした場合にはDashCodeのプロジェクトを2つ作り、iPhone用はユーティリティーを選択して、計算結果はiボタンを押したときに表示するように書くと良いでしょう。

また、テキストフィールドをいくつも置くのは無理なので、Pop-Upメニューを利用するように書いてみました

IE以外のブラウザーで試してみてください。

ポリマーのシーケンスを解析するソフトもプルダウンメニューとテキストフィールド、ボタンだけで動かすことができます。

DashCodeを使ってWebアプリを開発する方法を解説したので興味のある方は参考にしてください。

各パーツの使い方はDashCodeを使っていれば、コード・ヒントがしっかりしているのですぐに使いこなせるでしょう。

DashCodeが使えそうなので, PirikaのTCPE、物性推算のプログラムを書き直してみました。

まず最初のプログラムは、CANVAS上に2次元分子をお絵描きするプログラムです。
キャンバス上でマウスを押しドラッグ(押したまま位置をずらす)し、マウスを放すと選んだ原子の分子の線分を描きます。マウスをクリックした位置に原子があれば、そこから始めます。

NN-BP-1

キャンバス上でのマウスの位置の収得と線の描画、文字の描画方法を理解できれば簡単にこんなプログラムを書く事ができます。(2011.3.21)

数値計算上の注意はこちらを参照してください。

DashCodeには、Dual Program(SafariとMobile Safari両方のプログラムを作る事)の機能がついています。

非常に便利で、GUIを別設計にすれば、計算ルーチンは共用できますし、大きなキャンバスから、Mobile用のキャンバスにCopy/Pasteもできます。

しかしプログラムによっては完全に分けて作る方が便利な事があります。
特に、キャンバスに直接描画を行うには、マウスと指ではプログラムが違うので、共用化できるまでは大変でした。
マウスコントロールと指でのタッチコントロール以外の部分は共通なので、すぐに作成できそうなものですが、iPhoneなどは縦横を変えて使ったり、二本指で画面を広げたり、狭めたりできるので対応する部分のプログラムには時間がかかりました。

それでも、これができれば、機器の対象がすごく広がるでしょう。

FireFoxに搭載されたHTML5はSafariやChromeのものよりも厳格なようです。
Div要素の値に直接アクセスしようとするとエラーになります。

とにかくこれで、IEがサポート外なのはしょうがないが、それ以外のブラウザーでは動くようになりました。

ついにDrawTouchが完成しました(2011.3.25)。

ところが残念なことに自分の持っているiPod Touchは一番初期型(iOS3.1にしか上がらない)なので動きません! 実機でテストしてからでないと世に出せないでしょうね。だれかiOSの4.0以上を持っている友人で人柱を探さなくては。

タッチ・イベントの実装をこちらの記事にまとめました。(2011.4.19)

3次元を扱うプログラムは、擬似3次元描画の記事にまとめておきました。

それができるようになると分子模型を描くプログラムも作れます。

pirikaで人気のJAVA版ラジカル反応の遷移状態データベースを、HTML5で書きなおしてみました。
遷移状態の虚の振動を見ることができます。

この機能を実装するにはHTML5でアニメーションのやり方を知る必要があります。さらにAjaxを使ってサーバー上の振動データを読み込む必要があります。そのやり方をまとめておきます

2011.12.30

DashCodeはHTMLファイルの他にJAVAScriptのコードを吐き出してくれます。ところがこのHTMLのファイル、下のようなものですが、これをDreamWeaverというホームページ作成ソフトを使っているときにえらい目にあいました。(DreamWeaverも今では使えなくなってしまったのでどうでもいいですが。)

<base href="safari/">
<script id="DC_baseScript">if(navigator.userAgent.indexOf('AppleWebKit/') == -1) document.write('<base href="' + location.protocol + '//' + location.host + location.pathname.replace(/\/[^\/]*$/, '/safari/') + '"/>')</script>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" type="text/css" href="../Parts/Transitions.css">
<script type="text/javascript" src="Parts/parts.js" charset="utf-8"></script>

DreamWeaverはサイト管理を自動的に行なってくれます。

階層を変えたりすると、自動的にリンクを書き換えてくれ、普通に使う分にはとても便利なのですが、このDashCodeのhrefも動かした際に全部書き換えてしまいます。当然動かなくなります。気を付けなくてはいけません。

古い記述(▶︎をクリックして開く)

自分はこれまでに、BASIC, C, C++, JAVA, C#, JavaScriptでプログラムを組んできました。

他の分野は余り興味が無いので化学系のプロググラムだけですけど。

化学系でプログラムを書く場合には、分子軌道計算などはゴリゴリ計算するだけなので、CでもFortranでも余り変わらないでしょう。

科学計算用のNumerical recipes Cなどの本を買ってくれば数値計算はすぐに出来るようになるでしょう。

それ以外の例えば単位換算のプログラムなどであればテキストフィールドとプルダウンメニューなどが使えれば事足りるし、ひな形は貨幣の換算プログラムなどがいくらでもころがっているので参照すればすぐに作れるようになるでしょう。

化学系のプログラムに特有なのは2次元、3次元の分子構造の描画と結果をグラフ表示するあたりでしょうか。
これについては余り良い参考書が無くて、今までずいぶん苦労しました。

どの言語でもいいから一度ちゃんと書けば、後は他の言語に書きなおすのはそんなに苦労ではないと思います。
ここ10年(2011年当時)その中心となってきた言語はJAVAですが、iOSではJAVAがサポートされませんでした。

そこで2011年春に一念発起してHTML5を勉強して、JAVAのプログラムを書きなおし始めました。

その忘備録としてまとめておきます。なにぶん化学は専門でもプログラムは趣味なので正しくない記載があるかもしれません。
記載した内容に対して一切の責任は負いません。自己責任で読んで欲ください。

DashCodeでプログラミング

もう、DashCodeは動かないので、意味のないページです。 非常に優れた開発環境であったのに、残念な事です。


Copyright pirika.com since 1999-
Mail: yamahiroXpirika.com (Xを@に置き換えてください) メールの件名は[pirika]で始めてください。