Onsen UI Master-Detail テンプレート

前回、Onsen UI Master-Detail テンプレートを少しかじって終わりました。そして今回までの宿題として、このアプリをメールアプリに見立てて、タイトル（title）や説明(desc)を日本語にし、できればサムネイルに顔写真を出してみるという課題を与えました。たとえば次のような感じです。

まず、日本語にするにはlist.htmlを修正します。class="item-title"のspanタグに差出人氏名を、class="item-label"のspanタグに経過時間を、そしてclass="item-desc"のpタグにメール本文を書きます。さらに、サムネイルを表示するには顔写真のファイルを用意し、それをimagesフォルダを作ってその中に入れ、class="item-thum"のdivタグ内にimgタグを挿入して写真を出します。このとき、写真の横サイズは50pxに設定しておきます。これだけです。HTMLファイルは次のようになります。

    <ons-page id="list-page">
      <ons-toolbar>
        <div class="center">Master Details</div>
      </ons-toolbar>

      <ons-list>
        <ons-list-item modifier="chevron" class="item">
          <ons-row>
            <ons-col width="60px"> 
              <div class="item-thum">
                <img src="images/arimoto.jpg" class="item-thum-photo" width="50px"></img>  
              </div>
            </ons-col>
            <ons-col>
              <header>
                <span class="item-title">在本　璃奈</span>
                <span class="item-label">3day ago</span>
              </header>
              <p class="item-desc">
                お仕事お疲れ様です。本社営業部の在本です。
                先日(4月30日)の出張の際には、さまざまなお心遣いをいただき、
                誠にありがとうございました。
                深くお礼申し上げます。
                </p>
            </ons-col>
          </ons-row>                          
        </ons-list-item>

        <ons-list-item modifier="chevron" class="item">
          <ons-row>
            <ons-col width="60px"> 
              <div class="item-thum">
                <img src="images/inukai.jpg" class="item-thum-photo" width="50px"></img>  
              </div>
            </ons-col>
            <ons-col>
              <header>
                <span class="item-title">犬飼　佑汰</span>
                <span class="item-label">4h</span>
              </header>
              <p class="item-desc">
                ご多忙中にもかかわらず、
                工場・店舗視察にご同行くださったことを、
                心より感謝しております。
                おかげさまで右往左往することなく、
                仕事に邁進することができました。
                今回いただいたアドバイスを生かし、
                しっかりと精進していきたいと存じます。
                今後ともよろしくご指導のほどお願い申し上げます。
              </p>
            </ons-col>
          </ons-row>                          
        </ons-list-item>

        <ons-list-item modifier="chevron" class="item">
          <ons-row>
            <ons-col width="60px"> 
              <div class="item-thum">
                <img src="images/usui.jpg" class="item-thum-photo" width="50px"></img>  
              </div>
            </ons-col>
            <ons-col>
              <header>
                <span class="item-title">臼井　彰生</span>
                <span class="item-label">6h</span>
              </header>
              <p class="item-desc">
                  お疲れ様です。臼井彰生です。
                    先日お借りしました資料、5月31日にお返しに伺います。
                    お陰様で、大変参考になるデータが多くあり、仕事の上で有意義に生かすことが
                    できました。ご好意に感謝しております。
                    まずは御礼かたがたご連絡まで。
              </p>
            </ons-col>
          </ons-row>                          
        </ons-list-item>

        <ons-list-item modifier="chevron" class="item">
          <ons-row>
            <ons-col width="60px"> 
              <div class="item-thum">
                <img src="images/nakamura.jpg" class="item-thum-photo" width="50px"></img>  
              </div>
            </ons-col>
            <ons-col>
              <header>
                <span class="item-title">中村　綾斗</span>
                <span class="item-label">2m</span>
              </header>
              <p class="item-desc">
                お疲れ様です。営業部の中村です。
                昨日は、ご馳走になりましてありがとうございました。
                また、課長からたくさんの話を伺うことができ、とても勉強になりました。
                正直なところ、今抱えている仕事が行き詰まっていまして、
                課長にご相談したいと思ってはいましたが、なかなか言い出せずにおりました。
              </p>
            </ons-col>
          </ons-row>                          
        </ons-list-item>

        <ons-list-item modifier="chevron" class="item">
          <ons-row>
            <ons-col width="60px"> 
              <div class="item-thum">
                <img src="images/shimizu.jpg" class="item-thum-photo" width="50px"></img>  
              </div>
            </ons-col>
            <ons-col>
              <header>
                <span class="item-title">清水　伸平</span>
                <span class="item-label">5day ago</span>
              </header>
              <p class="item-desc">
                いつもお世話になっております。
                清水伸平です。
                昨日、ご紹介いただいた弁護士の竹田先生にお会いし、お話を伺ってきました。
                先ほど、東京に戻ってきたところです。
              </p>
            </ons-col>
          </ons-row>                          
        </ons-list-item>

        <ons-list-item modifier="chevron" class="item">
          <ons-row>
            <ons-col width="60px"> 
              <div class="item-thum">
                <img src="images/tanaka.jpg" class="item-thum-photo" width="50px"></img>  
              </div>
            </ons-col>
            <ons-col>
              <header>
                <span class="item-title">田中　昌昭</span>
                <span class="item-label">1week ago</span>
              </header>
              <p class="item-desc">
                いつもお世話になっております。
                株式会社川崎システムズ　ヘルプデスクです。
                平素は弊社のサービスをご利用いただきまして、誠にありがとうございます。
                6月1日より、レセコンORCAにスマホでアクセスできる
                アプリmyORCAの販売を開始いたしますのでご案内いたします。                  
              </p>
            </ons-col>
          </ons-row>                          
        </ons-list-item>

      </ons-list>
    </ons-page>

とても長いですね。もっと簡略化したいところです。また、このHTMLではメールの数は6件と固定ですが、実用的なものにしようとすればメールの数がいくらあっても表示できるようにしたいところです。そこで、javascriptを使って任意の件数のメールを表示できるようにしてみましょう。そのために、まずメールデータを独立させます。メールデータを次のようにjavascriptオブジェクト形式で表現します。

var listData = [
 {
  "title": "在本　璃奈",
  "label": "3day ago",
  "desc": "お仕事お疲れ様です。本社営業部の在本です。先日(4月30日)の出張の際には、さまざまなお心遣いをいただき、誠にありがとうございました。深くお礼申し上げます。",
  "photo": "images/arimoto.jpg"
 },
 {
  "title": "犬飼　佑汰",
  "label": "4h",
  "desc": "ご多忙中にもかかわらず、工場・店舗視察にご同行くださったことを、心より感謝しております。おかげさまで右往左往することなく、仕事に邁進することができました。今回いただいたアドバイスを生かし、しっかりと精進していきたいと存じます。今後ともよろしくご指導のほどお願い申し上げます。",
  "photo": "images/inukai.jpg"
 },
 {
  "title": "臼井　彰生",
  "label": "6h",
  "desc": "お疲れ様です。臼井彰生です。  先日お借りしました資料、5月31日にお返しに伺います。  お陰様で、大変参考になるデータが多くあり、仕事の上で有意義に生かすことが  できました。ご好意に感謝しております。  まずは御礼かたがたご連絡まで。",
  "photo": "images/usui.jpg"
 },
 {
  "title": "中村　綾斗",
  "label": "2m",
  "desc": "お疲れ様です。営業部の中村です。昨日は、ご馳走になりましてありがとうございました。また、課長からたくさんの話を伺うことができ、とても勉強になりました。正直なところ、今抱えている仕事が行き詰まっていまして、課長にご相談したいと思ってはいましたが、なかなか言い出せずにおりました。",
  "photo": "images/nakamura.jpg"
 },
 {
  "title": "清水　伸平",
  "label": "5day ago",
  "desc": "いつもお世話になっております。清水伸平です。昨日、ご紹介いただいた弁護士の竹田先生にお会いし、お話を伺ってきました。先ほど、東京に戻ってきたところです。",
  "photo": "images/shimizu.jpg"
 },
 {
  "title": "田中　昌昭",
  "label": "1week ago",
  "desc": "いつもお世話になっております。株式会社川崎システムズ　ヘルプデスクです。平素は弊社のサービスをご利用いただきまして、誠にありがとうございます。6月1日より、レセコンORCAにスマホでアクセスできるアプリmyORCAの販売を開始いたしますのでご案内いたします。",
  "photo": "images/tanaka.jpg"
 }
];

javascriptオブジェクト形式と言うのは、(属性:属性値)のペアを必要なだけ{と}で囲んだものです。上の例では、title, label, desc, photoという4つの属性があり、それが6人分配列として定義されています（配列は[と]でカンマ区切りの要素を羅列します）。このようにすると、例えばdataList[0].titleの値は"在本　璃奈"となります。これを使ってlist.html内のons-listタグの中身を作成する処理が次のようになります。この処理はapp.jsのlist-pageが表示されるタイミングで実行されるようにしてあります。

(function(){
  'use strict';

  var currentItem = {};

  $(document).on('pageinit', '#detail-page', function() {
    $('.item-title', this).text(currentItem.title);
    $('.item-desc', this).text(currentItem.desc);
    $('.item-label', this).text(currentItem.label);
    $('.item-thum-photo', this).attr('src', currentItem.photo);
    $('.add-note-action-item', this).click(function () {
        alert('dummy message');
    });
  });

  $(document).on('pageinit', '#list-page', function() {
    var html = '';
    $.each(listData, function(i, item) {
        html += '';
        html += '';
        html += ' ';
        html += '
';
        html += ''; 
        html += '
';
        html += '';
        html += '';
        html += '
';
        html += '' + item.title + '';
        html += '' + item.label + '';
        html += '
';
        html += '
' + item.desc + '
';
        html += '';
        html += ' ';                        
        html += '';
      }
    );
    $("#item-list").html(html);
    var content = $("#item-list").get(0);
    ons.compile(content);

    $('.item', this).on('click', function() {
      currentItem = {
        title : $('.item-title', this).text(),
        desc : $('.item-desc', this).text(),
        label : $('.item-label', this).text(),
        photo : $('.item-thum-photo', this).attr('src')
      };

      app.navi.pushPage('detail.html');
    });
  });

})();

いよいよ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テンプレートまでやりました。次回までの課題として、表示内容を次のように変えてみることになりました。

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

「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>

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

早いもので新年度になってから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環境が一層整ったと言えるんじゃないかな。

今年最後のゼミ

今日は，今年最後のゼミです．前回に続いてゲームの作成です．前回は赤いボールを追加しました．まだ，他のボールとぶつかっても跳ね返りません．今日は，３つのボールの間で

1. ぶつかったことを検出する
2. ぶつかったときに跳ね返らせる

の２つを実現させます．ぶつかったことを検出するには関数collisionをコピーして，

• バスケットボールと赤いボール
• サッカーボールと赤いボール

の衝突を検出できるようにします．次に，ぶつかったときの反射です．たとえば，バスケットボールと赤いボールがぶつかったとき，それらが反射する関数をreflect関数をコピーして作成します．同様に，サッカーボールと赤いボールがぶつかったときにはそれらが反射する関数を関数reflectをコピーして作成します．
このようにして，まずは，３つのボールがぶつかったときの動きをプログラムします． それができたら，次は，得点です．バスケットボールが赤いボールにぶつかったら得点を１点減点します．最後に，ゲームオーバ―時にそれまで獲得した得点をゲームの延長時間として使うかどうかを選ばせます．延長回数には上限を設けたほうが良いかもしれません．
また，Ajaxを使って次の機能を加えます．

• 獲得した得点をデータベースに書き込んだり読み込んで画面に表示したりする機能
• データベースのテーブルには，チーム，プレイヤー，得点を書き込む
• チーム別やプレイヤー別に得点順に得点を表示する

こうした機能を付加してチームを作って対戦する．

http://hustler307.softether.net/~mtanaka/game/bounce_ball_game4.php

ゲームを作ろう！

ここのところずっとゲーム作りをしている．最初はPHPの勉強をしていたが，せっかくだからということで，javascriptを用いて動きのあるホームページを作っていた．それが高じてとうとうゲームまで発展してしまった．こうして作ったゲームがこれ．

http://hustler307.softether.net/~mtanaka/game/bounce_ball_game3.php

なかなか良くできている．
そこで，このゲームを更に発展させて次のような機能をつけたい．

1. コート中に障害物を作り，それにぶつかったら減点する
2. ゲームオーバ―時，スコア（衝突回数）をゲーム延長時間として利用できるようにする．ただし，その時点で終了すればそのスコアがそのまま得点として与えられる
3. 複数のプレイヤーでチームを作ってチーム間で得点を競うオンラインゲームにする

1については，障害物がボールのように動いているとなお面白いかもしれない．あるいは，障害物ではなく第3のボールにしても良いかもしれない．つまり，サッカーボールにぶつかれば得点がもらえ，第3のボールにぶつかると逆に減点するといったゲームにする．
2は，ゲームオーバ―時の得点よりもさらに得点を稼ぐためのオプションで，延長するかしないかはプレイヤーの自由．ただし，延長した場合，第3のボールにぶつかると減点されるので，ゲームオーバ―時の得点よりも下がる危険性がある．
また，延長回数は上限を設けたほうが良い．延長時間をその時点での得点にするか，それとも一定の時間（たとえば30秒位）にするかは検討の余地あり．
3についてはデータベースを作ってPHPのプログラムでチーム，プレイヤー，得点を書き込むようにする．そして，チームごとに得点を集計して順位を決める．この場合，同一のプレイヤーが複数回のゲームをした場合，どうするかについて検討する必要がある．そのまま加算するか，最後のプレーのみ加算するかなど．
こうしてできあがったゲームを3月の入学前事前学習で使ったらどうだろう．3年生が作ったゲームということで興味を持ってもらえるかもしれない．