index.html
XML-Ajaxを用いた患者情報取得アプリをもとにしてORCAクライアントを作成します。 最初にindex.htmlですが，これまでのものとほとんど変わりません。 変更点は，スタイルシートに電話番号を表示するための".item-phone"を加えたことです(32行目)。<!DOCTYPE HTML>
<!-- ORCA Client Ver 0.1 (XMLデータ版) -->
<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 *; 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 src="js/app.js"></script>
<script>
ons.bootstrap()
ons.ready(function(){
});
</script>
<style>
.item, .detail-item {
padding: 10px;
line-height: 1;
}
.item-thum {
background-color: #ccc;
width: 50px;
height: 50px;
border-radius: 4px;
}
.item-id, .detail-item-id {
font-size: 15px;
font-weight: 500;
}
.item-name, .item-birthdate, .item-address, .detail-item-dept, .detail-item-diseaseName, .item-phone {
font-size: 14px;
color: #666;
line-height: 1.3;
margin: 4px 0 0 0;
padding: 0 30px 0 0;
}
.item-gender {
font-size: 12px;
color: #999;
float: right;
}
</style>
</head>
<body>
<ons-navigator page="list.html" var="app.navi"></ons-navigator>
</body>
</html>
list.html
次に，患者一覧用のHTMLファイルであるlist.htmlですが，これもこれまでと同じで変わりありません。 ただし，ツールバーに"ORCA Client Ver 0.1"と表示するようにしました(3行目)。<ons-page id="list-page">
<ons-toolbar>
<div class="center">ORCA Client Ver 0.1</div>
</ons-toolbar>
<ons-list id="item-list">
</ons-list>
</ons-page>
次に，患者の受診一覧用のHTMLファイルであるdetail.htmlですが，ツールバーに"患者情報"と表示するとともに(8行目)，
住所"address"の下に電話番号"phone"を追加しました(27行目)。
detail.html
<!--
<ons-template id="detail.html">
-->
<ons-page id="detail-page">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">患者情報</div>
</ons-toolbar>
<ons-list modifier="inset" style="margin-top: 10px">
<ons-list-item class="item">
<ons-row>
<ons-col width="60px">
<div class="item-thum">
<img src="" class="item-thum-photo" width="50px"></img>
</div>
</ons-col>
<ons-col>
<header>
<span class="item-id">id</span>
<span class="item-gender">gender</span>
</header>
<p class="item-name">name</p>
<p class="item-birthdate">birthdate</p>
<p class="item-address">address</p>
<p class="item-phone">phone</p>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="chevron" id="add-note-action" class="add-note-action-item">
<ons-icon icon="ion-chatboxes" fixed-width="true" style="color: #ccc"></ons-icon>
Add a note
</ons-list-item>
</ons-list>
<ons-list id="detail-item-list" style="margin-top: 10px">
</ons-list>
<br>
</ons-page>
<!--
</ons-template>
-->
app.js
次に，javascriptのプログラムを集めたapp.jsです。 プログラムの流れ自体は大きく変わりません。 大きな違いはAjaxで取得するデータがORCAのフォーマットになった点です。 取得するデータは患者情報（患者番号一覧:patientlst1v2.xml），病名（患者病名情報：diseasegetv2.xml），そして患者基本情報（patientgetv2.xml）です。
まず，初期画面ではこれまでと同じようにlist画面で患者一覧を表示します。 ここで使うのが患者情報（患者番号一覧:patientlst1v2.xml）です。 ただし，ORCAの患者情報（患者番号一覧:patientlst1v2.xml）には住所が含まれていないのでそれは表示できません。
次に，一覧から患者がタップされたら患者基本情報と病名一覧をdetail画面で表示します。 これまでは，ここで受診一覧を出力していましたが，ORCAにはそれに該当するAPIが見当たらなかったのでここでは病名（患者病名情報：diseasegetv2.xml）を取得して病名一覧を出力しています。 また，これまで上部に出力する患者基本情報は患者一覧に表示していた項目をそのまま出力していましたが，前述したようにORCAの患者一覧には住所がないので， 患者基本情報（patientgetv2.xml）を取得して，そこから住所を出力することにします。 そのため，患者基本情報（patientgetv2.xml）取得関数getPatientDataを新たに追加するとともに(123～142行目)，詳細画面のpageinitイベントハンドラでこの関数を呼び出します(26行目)。
患者基本情報（patientgetv2.xml）には住所以外にも電話番号，禁忌，感染情報，コメントなど様々な情報が格納されているので必要なものを出力します。 この例では電話番号を出力しています(35行目)。
var GENDER = {'1':'male', '2':'female'};
(function(){
'use strict';
var currentItem = {};
var patientList = null;
var diseaseData = null;
var patientData = null;
$(document).on('pageinit', '#detail-page', function() {
getDiseaseData(currentItem.id);
var html = '';
$(diseaseData).find('Disease_Information_child').each(function(){
html += '<ons-list-item class="detail-item">';
html += '<header>';
html += '<span class="detail-item-date">' + $(this).find('Disease_StartDate').text() + '</span>';
html += '</header>';
html += '<p class="detail-item-diseaseName">' + $(this).find('Disease_Name').text() + '</p>';
html += '</ons-list-item>';
});
$("#detail-item-list").html(html);
var content = $("#detail-item-list").get(0);
ons.compile(content);
getPatientData(currentItem.id);
var homeAddress = patientData.find('Home_Address_Information');
var address = homeAddress.find('WholeAddress1').text();
var phone = homeAddress.find('PhoneNumber1').text();
$('.item-id', this).text(currentItem.id);
$('.item-gender', this).text(currentItem.gender);
$('.item-name', this).text(currentItem.name);
$('.item-birthdate', this).text(currentItem.birthdate);
$('.item-address', this).text(address);
$('.item-phone', this).text(phone);
$('.add-note-action-item', this).click(function () {
alert('dummy message');
});
});
$(document).on('pageinit', '#list-page', function() {
getPatientList();
var html = '';
$(patientList).find('Patient_Information_child').each(function(){
html += '<ons-list-item modifier="chevron" class="item">';
html += '<ons-row>';
html += '<ons-col width="60px"> ';
html += '<div class="item-thum">';
html += '</div>';
html += '</ons-col>';
html += '<ons-col>';
html += '<header>';
html += '<span class="item-id">' + $(this).find('Patient_ID').text() + '</span>';
html += '<span class="item-gender">' + GENDER[$(this).find('Sex').text()] + '</span>';
html += '</header>';
html += '<p class="item-name">' + $(this).find('WholeName').text() + '</p>';
html += '<p class="item-birthdate">' + $(this).find('BirthDate').text() + '</p>';
html += '</ons-col>';
html += '</ons-row> ';
html += '</ons-list-item>';
}
);
$("#item-list").html(html);
var content = $("#item-list").get(0);
ons.compile(content);
$('.item', this).on('click', function() {
currentItem = {
id : $('.item-id', this).text(),
gender : $('.item-gender', this).text(),
name : $('.item-name', this).text(),
birthdate : $('.item-birthdate', this).text(),
address : $('.item-address', this).text()
};
app.navi.pushPage('detail.html');
});
});
function getPatientList() {
var url = 'http://hustler307.softether.net/~mtanaka/api01rv2/patientlst1v2.xml';
patientList = null;
$.ajax({
type: 'GET',
url: url,
async: false,
cache: false,
dataType: "xml"
}).done(function(xml, status, error){
if (status == 'success') {
patientList = $(xml).find('Patient_Information');
} else {
alert('文書データ取得失敗');
}
}).fail(function(xhr, status, error){
var message = "xhr.status = " + xhr.status + ", xhr.statusText = " + xhr.statusText + ", status = " + status + ", error = " + error;
alert('サーバから応答がありません: ' + message);
});
}
function getDiseaseData(patientId) {
var url = 'http://hustler307.softether.net/~mtanaka/api01rv2/diseasegetv2.xml';
diseaseData = null;
$.ajax({
type: 'GET',
url: url,
async: false,
cache: false,
dataType: "xml"
}).done(function(xml, status, error){
if (status == 'success') {
diseaseData = $(xml).find('Disease_Information');
} else {
alert('文書データ取得失敗');
}
}).fail(function(xhr, status, error){
var message = "xhr.status = " + xhr.status + ", xhr.statusText = " + xhr.statusText + ", status = " + status + ", error = " + error;
alert('サーバから応答がありません: ' + message);
});
}
function getPatientData(patientId) {
var url = 'http://hustler307.softether.net/~mtanaka/api01rv2/patientgetv2.xml';
patientData = null;
$.ajax({
type: 'GET',
url: url,
async: false,
cache: false,
dataType: "xml"
}).done(function(xml, status, error){
if (status == 'success') {
patientData = $(xml).find('Patient_Information');
} else {
alert('文書データ取得失敗');
}
}).fail(function(xhr, status, error){
var message = "xhr.status = " + xhr.status + ", xhr.statusText = " + xhr.statusText + ", status = " + status + ", error = " + error;
alert('サーバから応答がありません: ' + message);
});
}
})();
患者一覧XMLデータ
Ajaxで取得する患者情報（患者番号一覧:patientlst1v2.xml）のXMLデータです。 このデータは次のURLで取得します。http://hustler307.softether.net/~mtanaka/api01rv2/patientlst1v2.xml
<?xml version="1.0" encoding="UTF-8"?> <xmlio2> <patientlst1res type="record"> <Information_Date type="string">2016-09-24</Information_Date> <Information_Time type="string">17:09:28</Information_Time> <Api_Result type="string">00</Api_Result> <Api_Result_Message type="string">処理終了</Api_Result_Message> <Reskey type="string">Patient Info</Reskey> <Target_Patient_Count type="string">0007</Target_Patient_Count> <Patient_Information type="array"> <Patient_Information_child type="record"> <Patient_ID type="string">00002</Patient_ID> <WholeName type="string">倉敷 梅子</WholeName> <WholeName_inKana type="string">クラシキ ウメコ</WholeName_inKana> <BirthDate type="string">1972-07-11</BirthDate> <Sex type="string">2</Sex> <CreateDate type="string">2016-06-05</CreateDate> <UpdateDate type="string">2016-06-05</UpdateDate> <TestPatient_Flag type="string">0</TestPatient_Flag> </Patient_Information_child> <Patient_Information_child type="record"> <Patient_ID type="string">00003</Patient_ID> <WholeName type="string">川崎 次郎</WholeName> <WholeName_inKana type="string">カワサキ ジロウ</WholeName_inKana> <BirthDate type="string">1995-12-01</BirthDate> <Sex type="string">1</Sex> <CreateDate type="string">2016-06-16</CreateDate> <UpdateDate type="string">2016-06-16</UpdateDate> <TestPatient_Flag type="string">0</TestPatient_Flag> </Patient_Information_child> <Patient_Information_child type="record"> <Patient_ID type="string">00007</Patient_ID> <WholeName type="string">犬飼 佑太</WholeName> <WholeName_inKana type="string">イヌカイ ユウタ</WholeName_inKana> <BirthDate type="string">1994-06-25</BirthDate> <Sex type="string">1</Sex> <CreateDate type="string">2016-06-22</CreateDate> <UpdateDate type="string">2016-06-22</UpdateDate> <TestPatient_Flag type="string">0</TestPatient_Flag> </Patient_Information_child> <Patient_Information_child type="record"> <Patient_ID type="string">00006</Patient_ID> <WholeName type="string">在本 璃奈</WholeName> <WholeName_inKana type="string">アリモト リナ</WholeName_inKana> <BirthDate type="string">2016-01-06</BirthDate> <Sex type="string">2</Sex> <CreateDate type="string">2016-06-22</CreateDate> <UpdateDate type="string">2016-06-22</UpdateDate> <TestPatient_Flag type="string">0</TestPatient_Flag> </Patient_Information_child> <Patient_Information_child type="record"> <Patient_ID type="string">00005</Patient_ID> <WholeName type="string">臼井 彰生</WholeName> <WholeName_inKana type="string">ウスイ アキオ</WholeName_inKana> <BirthDate type="string">1994-09-22</BirthDate> <Sex type="string">1</Sex> <CreateDate type="string">2016-06-22</CreateDate> <UpdateDate type="string">2016-06-22</UpdateDate> <TestPatient_Flag type="string">0</TestPatient_Flag> </Patient_Information_child> <Patient_Information_child type="record"> <Patient_ID type="string">00004</Patient_ID> <WholeName type="string">中村 綾斗</WholeName> <WholeName_inKana type="string">ナカムラ アヤト</WholeName_inKana> <BirthDate type="string">1994-10-24</BirthDate> <Sex type="string">1</Sex> <CreateDate type="string">2016-06-22</CreateDate> <UpdateDate type="string">2016-06-22</UpdateDate> <TestPatient_Flag type="string">0</TestPatient_Flag> </Patient_Information_child> <Patient_Information_child type="record"> <Patient_ID type="string">00001</Patient_ID> <WholeName type="string">川崎 太郎</WholeName> <WholeName_inKana type="string">カワサキ タロウ</WholeName_inKana> <BirthDate type="string">1958-07-06</BirthDate> <Sex type="string">1</Sex> <CreateDate type="string">2016-06-05</CreateDate> <UpdateDate type="string">2016-09-24</UpdateDate> <TestPatient_Flag type="string">0</TestPatient_Flag> </Patient_Information_child> </Patient_Information> </patientlst1res> </xmlio2>
患者病名XMLデータ
続いて，病名（患者病名情報：diseasegetv2.xml）のXMLデータです。 このデータは、以下のURLで取得します。http://hustler307.softether.net/~mtanaka/api01rv2/diseasegetv2.xml
<?xml version="1.0" encoding="UTF-8"?>
<xmlio2>
<disease_infores type="record">
<Information_Date type="string">2016-09-24</Information_Date>
<Information_Time type="string">17:14:18</Information_Time>
<Api_Result type="string">00</Api_Result>
<Api_Result_Message type="string">処理終了</Api_Result_Message>
<Reskey type="string">Medical Info</Reskey>
<Disease_Infores type="record">
<Patient_ID type="string">00001</Patient_ID>
<WholeName type="string">川崎 太郎</WholeName>
<WholeName_inKana type="string">カワサキ タロウ</WholeName_inKana>
<BirthDate type="string">1958-07-06</BirthDate>
<Sex type="string">1</Sex>
</Disease_Infores>
<Base_Date type="string">2016-09</Base_Date>
<Disease_Information type="array">
<Disease_Information_child type="record">
<Department_Code type="string">01</Department_Code>
<Disease_Name type="string">慢性気管支炎</Disease_Name>
<Disease_Single type="array">
<Disease_Single_child type="record">
<Disease_Single_Code type="string">4919002</Disease_Single_Code>
<Disease_Single_Name type="string">慢性気管支炎</Disease_Single_Name>
</Disease_Single_child>
</Disease_Single>
<Disease_StartDate type="string">2016-06-11</Disease_StartDate>
<Disease_Class type="string">05</Disease_Class>
<Insurance_Disease type="string">False</Insurance_Disease>
</Disease_Information_child>
<Disease_Information_child type="record">
<Department_Code type="string">01</Department_Code>
<Disease_Name type="string">うつ病</Disease_Name>
<Disease_Single type="array">
<Disease_Single_child type="record">
<Disease_Single_Code type="string">2961003</Disease_Single_Code>
<Disease_Single_Name type="string">うつ病</Disease_Single_Name>
</Disease_Single_child>
</Disease_Single>
<Disease_StartDate type="string">2016-06-11</Disease_StartDate>
<Insurance_Disease type="string">False</Insurance_Disease>
</Disease_Information_child>
<Disease_Information_child type="record">
<Department_Code type="string">01</Department_Code>
<Disease_Name type="string">乳癌</Disease_Name>
<Disease_Single type="array">
<Disease_Single_child type="record">
<Disease_Single_Code type="string">1749008</Disease_Single_Code>
<Disease_Single_Name type="string">乳癌</Disease_Single_Name>
</Disease_Single_child>
</Disease_Single>
<Disease_StartDate type="string">2016-06-16</Disease_StartDate>
<Disease_Class type="string">05</Disease_Class>
<Insurance_Disease type="string">False</Insurance_Disease>
</Disease_Information_child>
</Disease_Information>
</disease_infores>
</xmlio2>
患者基本情報XMLデータ
最後に患者基本情報（patientgetv2.xml）のXMLデータです。 このデータは、以下のURLで取得します。http://hustler307.softether.net/~mtanaka/api01rv2/patientgetv2.xml
<?xml version="1.0" encoding="UTF-8"?>
<xmlio2>
<patientinfores type="record">
<Information_Date type="string">2016-09-24</Information_Date>
<Information_Time type="string">17:12:21</Information_Time>
<Api_Result type="string">00</Api_Result>
<Api_Result_Message type="string">処理終了</Api_Result_Message>
<Reskey type="string">Patient Info</Reskey>
<Patient_Information type="record">
<Patient_ID type="string">00001</Patient_ID>
<WholeName type="string">川崎 太郎</WholeName>
<WholeName_inKana type="string">カワサキ タロウ</WholeName_inKana>
<BirthDate type="string">1958-07-06</BirthDate>
<Sex type="string">1</Sex>
<HouseHolder_WholeName type="string">川崎 太郎</HouseHolder_WholeName>
<Relationship type="string">本人</Relationship>
<Home_Address_Information type="record">
<Address_ZipCode type="string">7010114</Address_ZipCode>
<WholeAddress1 type="string">岡山県倉敷市松島</WholeAddress1>
<PhoneNumber1 type="string">086-462-1234</PhoneNumber1>
<PhoneNumber2 type="string">086-462-1111</PhoneNumber2>
</Home_Address_Information>
<Contraindication1 type="string">ワーファリン</Contraindication1>
<Contraindication2 type="string">ステロイド</Contraindication2>
<Allergy1 type="string">アナフィラキシー</Allergy1>
<Allergy2 type="string">蕎麦</Allergy2>
<Infection1 type="string">ＨＢ</Infection1>
<Infection2 type="string">Ｗａ</Infection2>
<Comment1 type="string">往診時血圧測定</Comment1>
<Comment2 type="string">訪問看護ステーション週2回</Comment2>
<Community_Cid_Agree type="string">False</Community_Cid_Agree>
<FirstVisit_Date type="string">2016-06-11</FirstVisit_Date>
<LastVisit_Date type="string">2016-09-24</LastVisit_Date>
<HealthInsurance_Information type="array">
<HealthInsurance_Information_child type="record">
<Insurance_Combination_Number type="string">0001</Insurance_Combination_Number>
<InsuranceCombination_Rate_Admission type="string">0.30</InsuranceCombination_Rate_Admission>
<InsuranceCombination_Rate_Outpatient type="string">0.30</InsuranceCombination_Rate_Outpatient>
<InsuranceProvider_Class type="string">060</InsuranceProvider_Class>
<InsuranceProvider_Number type="string">330019</InsuranceProvider_Number>
<InsuranceProvider_WholeName type="string">国保</InsuranceProvider_WholeName>
<HealthInsuredPerson_Symbol type="string">あいう</HealthInsuredPerson_Symbol>
<HealthInsuredPerson_Number type="string">１２３４５６</HealthInsuredPerson_Number>
<HealthInsuredPerson_Assistance type="string">3</HealthInsuredPerson_Assistance>
<HealthInsuredPerson_Assistance_Name type="string">３割</HealthInsuredPerson_Assistance_Name>
<RelationToInsuredPerson type="string">1</RelationToInsuredPerson>
<HealthInsuredPerson_WholeName type="string">川崎 太郎</HealthInsuredPerson_WholeName>
<Certificate_StartDate type="string">2016-06-05</Certificate_StartDate>
<Certificate_ExpiredDate type="string">9999-12-31</Certificate_ExpiredDate>
<Insurance_CheckDate type="string">2016-06-05</Insurance_CheckDate>
</HealthInsurance_Information_child>
</HealthInsurance_Information>
</Patient_Information>
</patientinfores>
</xmlio2>
0 件のコメント:
コメントを投稿