C.2 サンプルコードの説明

index.html

IMAPSアプリのエントリーポイントとなるindex.htmlでは、HTMLの<div>タグを使用して複数の画面をタブ化して表示しています。

また、以下のように使用するJavaScriptをインクルードします。

<script type="text/javascript" charset="utf-8" src="js/cordova.js "></script>
<script type="text/javascript" src="js/imaps.js "></script>

IMAPSアプリが起動されIMAPSエージェントが提供しているAPIが利用可能になると、"deviceready"イベントが通知されます。以下の例では、"deviceready"イベントを受け取った後に、APIを利用してユーザーIDを取得しています。

画面操作、日時取得操作などはbase.jsにJavaScriptを記述して実現しています。署名操作はHTML5のCanvasを利用しています。

document.addEventListener("deviceready", function(){
    imaps.auth.getUserID (function(userid){
        document.getElementById(NameT).value = userid;
    }, function(error){});
}, false);

以下の処理は写真操作を行っています。写真操作はIMAPSが提供しているcamera APIを利用しています。

function capturePhoto(){
    navigator.camera.getPicture(function(imageData){
        showPicture.src = "data:image/png;base64," + imageData;
        dataf = "data:image/png;base64," + imageData;
    },
    function(message){
        alert('エラーが発生しました: ' + message);
    }, { quality: 50, destinationType: 0 });
}

以下の処理はIMAPSが提供しているSLS APIを利用してデータを暗号化してスマートデバイスに格納しています。この例では、格納成功時にアクションが必要ないため、実行後に行う処理の記述はありません。

データの暗号化と格納

function setStrage(key, value){
    imaps.sls.setItem(function(result){}, errorHandler, key, value);
}

List作成
スマートデバイスに格納した情報の一覧を取得しています。SLS APIにより格納されているデータの数を取得し、その数だけforループでkeyを取得し、getItemで情報の取得を行っています。
ios向けのアプリ作成の場合、正しく動作しない場合があります。
回避方法については、「付録H トラブルシューティング」を参照してください。
なお、提供されているサンプルアプリは、回避方法の実装を行っています。
```
imaps.sls.length(function(slength) {
    for(var i=0; i < slength; i++){
        imaps.sls.key(function(skey) {
            imaps.sls.getItem(function(value) {
                var obj = JSON.parse(value);
                list.innerHTML += "<li><input ～;
            }, errorHandler, skey);
        }, errorHandler, i);
    }
}, errorHandler);
```

格納しているデータを参照します。JSON形式で格納したデータを取得し、展開後に画面表示を行っています。

imaps.sls.getItem(function(value) {
    var obj = JSON.parse(value);
    document.getElementById(Date1_L).innerHTML = obj.date1;
    document.getElementById(Name1_L).innerHTML = obj.name1;
    :
    document.getElementById(Message_L).innerHTML = obj.message;
    document.getElementById(NameT_L).innerHTML = obj.nameT;
}, errorHandler, key);

データ削除

function delStrage(key){
    imaps.sls.removeItem(function(result){}, errorHandler, key);
}

サーバー登録

修理依頼書アプリでは、「サーバーに登録」ボタンが押されると、サーバと通信してデータをアップロードします。アップロード処理はAjaxを利用しています。

function dataUp(){
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.open( 'POST', serverName);
xmlHttpRequest.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
・・・
xmlHttpRequest.send(paramsdata);
xmlHttpRequest.onreadystatechange = function(){・・・

style.css

CSSを利用して画面の色やレイアウトなどのスタイル情報を記述しています。

アイコンの作成

「2.4.8 アイコンの作成(任意)」を参照してください。

パラメーターファイルの作成

im-appdef.xmlを作成します。

<?xml version="1.0" encoding="utf-8"?>
<imaps-application>
    <name>修理依頼書</name>
    <version>1.0</version>
    <apiset>2.0</apiset>
    <description>修理依頼書</description>
    <icon>icon.png</icon>
    <toolbar-setting>
        <forward>visible</forward>
    </toolbar-setting>
</imaps-application>

参照

詳細は「付録A IMAPSエージェントアプリケーションのパラメーターファイル」を参照してください。

アーカイブ

「2.5.1 アーカイブ」を参照してください。