iPad用カルテメーカー

なんとか入力ができる状態まで作りました。
音声、説明はありませんがご覧ください。

マニュアル追加

月遅れのレセプトの発行方法を操作マニュアルブログに追加しました。
簡単操作ガイド　月遅れのレセプト処理

テンプレート入力

やたら久しぶりの更新です。

いろいろとありましたが、やっと本格的に開発できる環境が整ってきました。

開発の重点は完全にiPadになっています。

iPadでの電子カルテはどうあるべきか？

試行錯誤が続いていますが、基本的な路線は固まりつつあります。

中核となるのは「テンプレート入力」です。

こんな感じの画面で入力します。

とりあえず今日はスクリーンショットだけ、もう少し実装が進んだら動画をご紹介します。

基本が完成

前回の更新からだいぶ日が経ってしまいました(^^;

さぼってるわけじゃなく、意外と手間取ってしまったからです。

前回では試験的に動作を試してみましたが、それを基本に本格的な実装を行いました。

まあ、いつもの事なんですが、結局、まったく新しく最初から全面的に書き直すことになってしまったわけです。

で、できたのがこれです。

見た目は、ほとんど変わっていませんw

でも、中身は全く違います。
全面的にAjaxにしましたので、URLはホームのまま変わりません。
画面の遷移はスライド式で変化します。

ダイアログやPopOverもオリジナルアプリケーションに似せて、独自に背景や枠、CSSを作成して実装してみました。

画像表示部分もHTML5のCanvas要素で独自に実装しました。
以前は、img要素で実装していたのですが、今後の簡単なお絵描き機能や、輝度、コントラスト調整のような機能の追加を見越して変更しました。

そして、なんと言っても最大の変更は、フレームワークの確立です。
webアプリの場合、HTML文書、CSS、JavaScriptそして4Dのサーバーサイドのメソッドが複雑に絡み合うので、適当に作るとすぐにカオスと化してしまいます。

それを避けるために、一定のルールを決めて、あるパターンに沿った形式で開発を進めます。これがフレームワークです。

これで下準備が完了しましたので、これからガシガシ書いていきますね！

iPadらしい動作

iPadアプリは画面が切り替わる時にスライドしてきたり、ダイアログがにゅるって出てきたりします。

これは操作に対する反応を視覚的に提供するようにという有名なヒューマンインターフェースガイドラインに沿った演出です。

もちろん、これは操作を受け付けた事を明確にするという役目と、実は、時間がかかる処理をなんとなく待ったという感じがしないようにする結構重要（？）な役目があります。

実際、このちょっとしたアニメーションを加えると、とたんにiPadらしい感じになります。

カルテメーカーにも試してみました。

こんな感じです。

こういった演出効果は、ネイティブなアプリ（iPhone SDKを使ったアプリ）では、ほんの数行を加えるだけで簡単に実現できます。

ですが、これがwebアプリとなると少々トリッキーな工夫が必要になります。

といってもアニメ効果自体は、safariのベースとなってるMacのwebkitの拡張機能で簡単に実現できます。

iPad、iPhoneのブラウザのsafariでは、標準のブラウザにはない様々な機能拡張がされていて、このアニメーション効果（transition）もそのひとつです。

Appleがフラッシュはいらいんと言ってるのは、この拡張機能を使うとフラッシュと同等かそれ以上のアニメーション効果を簡単にかつ軽量に実装できるからかもしれません。

この効果はページに表示されているほとんどのオブジェクトを移動、回転、消したり、それも３D空間上で操作できます。そう、あのカードをめくる様な動作を２、３行のコマンドで実現できます。

ところが、肝心のページが切り替わる時（ページ遷移）時のアニメとなると、これが難しい。

次のページがスライドインしてくる場合、今のページはスライドアウトできますが、この時点では次のページはまだ読み込まれていないので、隣り合って次のページがスライドインできません。

そう、一旦スライドアウトして空白のページが表示されてから、次のページがスライドインしてくるんですね。

通常のページ遷移では、これを回避することはできません。

では動画のように、次のページが隣り合わせでスライドさせるにはどうしたらいいでしょう。

あらかじめ次のページを用意しておけばいいんですが、こういったアプリの場合、操作の結果で次のページがインタラクティブに変化しますし、用意しなければいけないページは膨大ですから実際には無理です。

で、そこで活躍するのがAjaxです。

Ajaxのもっとも基本となるのは、画面遷移を伴わないでサーバーからデータを受け取れることです。
というか、これがすべてです。

たったひとつの「XMLHttpRequest」とうクラスのが追加されただけで、webアプリはまったく違った次元のものになりました。これが今のクラウド技術の中核をなすものです。

この機能を使って、次の画面に移動する時はHttpRequestで次のページのHTML文書を読み込んで、今のページに組み込みます。これをダイナミックHTMLといって、組み込むだけで画面が変化します。

こうして次のページを用意しておいてからスライドのアニメーションをおこなうと、ちゃんとページが続いてスライドしてくるというわけです。

あとは、古い画面データを捨てて、新しい画面の初期化など細々した処理を完了して遷移完了です。

さて、このAjaxによるページ移動ですが、もう一つ、嬉しい事があります。

それは、ブラウザの戻る、進むボタンを無効化できることです。

ページの遷移がないということはブラウザのURLも変化しません。
URLが変化しないので、移動ボタンも実質的に機能しません。

こうすることでブラウザの動作をサーバーで完全に掌握することができるようになります。

専門的にいうとコンテキストの維持が簡単になるんですね。

最近はこのようなサイトも多くなってきています。

ブラウザを注意深く見てると画面が変化してもまったくURLが変わらないサイトがありますが、このようなサイトがAjaxで動作しているサイトです。

カルテメーカーfor iPadも、このAjaxをバリバリに使ったものになります。

ここまで出来た

かなり作り込みました。

もう少しがんばれば、とりあえず入力作業に使えそうです。

あけおめ！iPadでカルテ入力！！！

明けましておめでとうございます！！

今年の年末年始はカルテメーカーに集中しています。

で、やっと処置入力機能ができました！！！

まぁ、まだ入力できるってことを実証したっていう段階で、まだまだ実用に使うのは無理ですが。。。(^-^;

でも、見通しはつきましたので、後はひたすらコードを書くだけでなんとかなりそうです。

とりあえずのバージョンを今月中旬頃にはリリースしたいと意気込んでいます。

乞うご期待。

BGMはPerfumeでビタミンドロップでした。

部位コントロール完成！

部位入力コントロールがやっと完成しました。

指先で操作するというのは、マウスよりはるかに直感的で気持ちがいいです。

部位入力コントロール

ちょっと、撮影に失敗して向きが違っていますが(^^;

一番の難関部分の部位入力部分を作っています。

よくあるボタンを並べただけのインターフェースならすぐできるのですが、そこはやはりカルテメーカーとしてのこだわりがないと面白くないので、まったく新しいコントロールを作っています。

iPadならではのタッチ感を活かしつつ、従来のカルテメーカーの部位コントロールを再現する方向性が作っていますが、自分で思ってたよりしっくりしたものができてきました。

ところで、今回の対応で、本格的にjavascriptを勉強していますが、私は大きな誤解をしていました。

初期の頃のjavascriptは本当にスクリプトというか、ちょっとした小さな動作を記述するだけのものだったので、その当時のままの印象だったのです。

ところが、今回改めて勉強してみると、これが大きな間違い。

いつのまにか素晴らしいオブジェクト指向の言語に変わっていました。

HTMLをDOMとして扱うこともできるし、すごい言語に進化していました。

さらに嬉しいことにXcodeが対応しているので、これをエディタに使うと、語句の補完もできるし、ラベルの参照やオートインデント、キーワードの色分け、カッコの対応チェックなど、至れり尽くせりの機能を使うこともできて作業効率も抜群です。

ちなみにXcodeでは、同様の機能をhtmlやcssにも使えるので、一括してプロジェクトとして管理することもできます。

いやー、それにしても、webアプリケーションの開発がMacでこんなに充実しているとは知りませんでした。

ちなみに、もう一つの開発環境、Dashcodeも試してみましたが、実はこちらの方がwebアプリケーション開発の専用環境なんです。

こちらは、本格的なjavascriptベースの統合開発環境で、iPhone用のwebアプリも昔のハイパーカード感覚で作れるし、javascriptの本格的なデバッガも附属しているので、プログラムの検証も簡単です。

しかしながら、最大の問題点は、ソースコードが普通のファイルじゃなく、プロジェクトの中の隠しファイルになってしまい、実機でテストするにはいちいちプロジェクトをビルドして最終的なファイルを外部に作らなければいけないのです。

この点、Xcodeのプロジェクトは登録しているファイルはファインダで見える普通のファイルですので、ただ保存するだけでファイルが更新されるので、すぐに実機で検証できます。

iPadを開発の対象とした場合、イベント類がmac本体のsafariでは検証できないiPad独自のものばかりなのでDashcodeのような形式は残念ながら利用できませんでした。

デバッガは魅力あるんだけどなぁ。

その代わり、Safariを開発モードにするとjavascriptのエラー報告のモニタができるので、こちらを活用してデバッグをしています。

それにしてもMacはweb開発環境が整ってるなぁ。ほんとに。

Eye-Fiカードを使ってみました。

知り合いの先生からEye-Fiカードを借りてきました。

ちょっと設定に手こずりましたが無事完了。

撮影すると自動的にPCに転送されるのはちょっと不思議な感じです。

PCに転送されれば、そのままiPadで表示できます。

実際の動作を撮影しましたので、ご覧ください。

転送に少々時間がかかっていますが、院内の無線LAN環境があまり良くないからかもしれません。

でも、ケーブルを繋いだりメモリーカードを差し替えたりする手間を考えればまったく問題にならない時間です。

私自身は口腔内写真はほとんど撮影しないのですが、これだけ手軽だと導入してもいいかなって思いました。