ゼミの轍: 4月 2016

2016年4月27日水曜日

いよいよOnsen-UIへ

今日までの宿題だったMonacaカウンターにタイマー仕掛けでストップウォッチ機能を付けました。それがこれです。

このアプリは起動と同時に1秒ごとにカウントを表示していきます。プログラムは以下のようになります。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
    var timer_id;
    var count = 0;
    function increment() {
        count++;
        update();
    }
    function reset() {
        if (count > 0 && confirm('カウンターをリセットしますか?')) {
            count = 0;
            update();
        }
    }
    function update() {
        var str = '0000' + count;
        str = str.substring(str.length - 4, str.length);
        var digits = $('.counter-digit');
        for (var i = 0; i < str.length; i++) {
            digits.get(i).src = 'img/no_0' + str[i] + '.png'
        }
    }
    $(function() {
        $('.count-button').on("touchend", increment);
        $('.reset-button').on("touchend", reset);
        $('.counter').on("touchend", function(){
            if(timer_id >= 0) {
                clearInterval(timer_id);
                timer_id = -1;
            } else {
                timer_id = setInterval( function () {
                    increment();
                } , 1000 );
            };
            
        });
        update();
        timer_id = setInterval( function () {
            increment();
        } , 1000 );
    })
    </script>
</head>
<body>
<div class="counter">
    <img src="img/no_00.png" width="55" class="counter-digit">
    <img src="img/no_00.png" width="55" class="counter-digit">
    <img src="img/no_00.png" width="55" class="counter-digit">
    <img src="img/no_00.png" width="55" class="counter-digit">
</div>
<div class="reset-button-wrapper">
    <button class="reset-button"><img src="img/btn_reset_normal.png" width="64"></button>
</div>
<button class="count-button"><img src="img/btn_count_normal.png" width="127"></button>
</body>
</html>

また、今回からOnsen-UI（5章）を始めました。今日は 5-6 Onse UI Master-Detailテンプレートまでやりました。次回までの課題として、表示内容を次のように変えてみることになりました。

表示内容を日本語にする
項目タイトルは名前にする
項目説明はメール内容にする
できれば、左の四角の箱に写真を出す

2016年4月20日水曜日

「Monacaカウンター」アプリ

テキストP.70の 3-5 "jQueryで「Monacaカウンター」を作ろう"に従ってカウンターアプリを作成する。jQueryは既にインストールしているのでP.72の4からやる。③のimgフォルダへ入れる画像ファイルはWドライブの以下のフォルダにあるのでそれを利用する。

Wドライブ > 34_医療情報学科 > 田中ゼミ > Monaca > Monacaカウンター > img

なお、Wドライブへの接続方法については、右メニューのTipsに記載している内容に従って行う。

「今年は平成何年？」アプリ

Monacaを使ったスマホアプリの開発を勉強しています。前回、前々回とテキスト（公式ガイドブック）の第3章にある「今年は平成何年？」というアプリを作っています。そして、前回、次のような課題を出しました。

西暦（A.D.2016）の下に月日と時分秒を表示させる
できれば、時分秒は刻々と変化させる

つまり次のような画面になるように改良する課題です。

ソースコードは次のようになります。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
        var WEEK = ['日','月','火','水','木','金','土'];
        var timer_id;
        // ページの読み込みが終わったら実行する
        //document.addEventListener('DOMContentLoaded', function() {
        $(document).ready(function(){
            // 今の日付を得る
            var nowDate = new Date();
            // 西暦を得る
            var fullYear = nowDate.getFullYear();
            // 数値の西暦を文字列に変換して、そこから下2桁の文字列を得る
            var shortYear = String(fullYear).substr(2, 2);
            // 西暦の下2桁の文字列を数値に変換して、それに12を足す
            var heiseiYear = Number(shortYear) + 12;
            // 得られた数値をHTML に反映
            //document.getElementById('heisei-year').textContent = heiseiYear;
            $('#heisei-year').text(heiseiYear);
            //document.getElementById('year').textContent = fullYear;
            $('#year').text(fullYear);
            
            var month = nowDate.getMonth() + 1;
            var date = nowDate.getDate();
            var day = nowDate.getDay();
            $('#month').text(month);
            $('#date').text(date);
            $('#week').text(WEEK[day]);
            
            timer_id = setInterval( function () {
                showTime();
         } , 1000 );

        });
        
        function showTime() {
            var nowDate = new Date();
            var hours = nowDate.getHours();
            var minutes = nowDate.getMinutes();
            var seconds = nowDate.getSeconds();
            $('#hours').text(hours);
            $('#minutes').text(('0' + minutes).slice(-2));
            $('#seconds').text(('0' + seconds).slice(-2));
        }

        $(document).on('click', '#btn', function(eo){
            //alert(this.value);
            //alert($(this).val());
            if($(this).val() == 'STOP') {
                clearInterval(timer_id);
                $(this).val('START');
            } else {
                timer_id = setInterval( function () {
                    showTime();
                } , 1000 );
                $(this).val('STOP');
            };
        });
        
    </script>
</head>
<body>
 <div id="heisei">
  今年は平成<span id="heisei-year"></span>年です
 </div>
 <div id="ad">A.D. <span id="year"></span></div>
 <div id="md"><span id="month"></span>月<span id="date"></span>日(<span id="week"></span>)</div>
 <div id="time"><span id="hours"></span>:<span id="minutes"></span>:<span id="seconds"></span></div>
 <input id="btn" type="button" value="STOP">    
</body>
</html>

2016年4月19日火曜日

ゼミのテーマが決まりました！

早いもので新年度になってから3週間が過ぎました。その間、ブログの更新をサボっていましたが、ゼミの研究テーマが決まったので久しぶりに投稿します。ゼミのテーマは

在宅医療を支援するための電子カルテ連携スマホアプリの開発

です。

電子カルテとの連携だなんてなんだかカッコいいですけど、今のところ日本医師会が開発したORCAとの連携を考えています。
シナリオはこうです。
在宅医療をやっている医師がいて、診療所にはORCAを導入しているという設定です。ORCAにはWebAPIが組み込まれています。

http://www.orca.med.or.jp/receipt/tec/api/

このWebAPI、日レセAPIと言うらしいのですが、これを使うとスマホからORCAのデータを引っ張ってきたりデータを書き込んだりできるのです。そこで、Monacaでスマホアプリを作り、日レセAPIを使ってスマホをORCA端末にしようという構想です。
スマホでORCAサーバに接続できたらどんないいことがあるか？

訪問患者先で患者の基本情報が見える
処方内容を見たり入力もできる
その他、訪問先で行った処置など入力できる

ただし、ORCAはレセコンなのでどんな検査を行ったかは分かるけど、その検査結果は見ることができません。これについては次回への課題として、今回の研究ではORCAとの接続までをやろうという内容です。
また、昨年の先輩方が行った卒研（DICOMサーバの構築）と合わせれば、CTやMRIなどの医療画像をスマホで閲覧できるので、在宅医療を支えるICT環境が一層整ったと言えるんじゃないかな。