開発者ブログ
チュートリアル（基本編） » 11.HTML5APIの利用

11.HTML5APIの利用

Last modified by simdy on 2014/06/24, 16:16
チュートリアル目次

概要

本章では、開発時や実行時、HTML5のAPIをより使い易くするためのラッパー関数群の説明します。

Geolocation APIラッパー

Geolocation APIは位置情報の取得扱うためのAPIです。
hifiveでは、開発時に本機能を用いたテストを容易にするため、ダミー位置を返す機能を追加しています。
尚、インクルードするh5.jsはh5.dev.js版(開発支援機能あり)を使用してください。

html

<!doctype html>  
<html>  
<head>  
 <script src="jquery.js"></script>  
 <script src="ejs-1.0.h5mod.js"></script>  
 <script src="h5.dev.js"></script>  
</head>  
<body>  
</body>  
</html>  

現在位置に対するダミー座標の設定

h5.dev.api.geo.dummyPositionsに現在位置を取得する際のダミーの座標を設定することができます。

h5.dev.api.geo.dummyPositions = { coords: {latitude: 35.68505914147349,longitude: 139.76440876196284}};  
  
// ダミー座標としてパラメータに指定された座標を返す。  
h5.api.geo.getCurrentPosition().done(function(pos) {  
   var lat = pos.coords.latitude, lng = pos.coords.longitude;  
    console.log(lat +", "+ lng); // 35.68505914147349, 139.76440876196284  
});  

移動を想定する場合のダミー座標の設定

h5.dev.api.geo.watchIntervalTimeに値を返す間隔を設定し、
h5.dev.api.geo.dummyPositionsにダミー座標の配列を設定することで、
あるルートを移動しているかの様な、ダミー座標を返すことができます。

h5.dev.api.geo.watchIntervalTime = 1000;  
// 配列で、ダミー座標を設定する。  
h5.dev.api.geo.dummyPosition =  [{  
        latitude: 35.67920288784219,  
        longitude: 139.7650095767821  
    }, {  
        latitude: 35.68540771444479,  
        longitude: 139.7660395450439  
    }, {  
        latitude: 35.69802503048958,  
        longitude: 139.7729918308105  
    }];  
  
// 1000ms毎にh5.dev.api.geo.setDummyWatchPositionメソッドで設定したダミー座標を返す  
h5.api.geo.watchPosition().progress(function(pos) {  
   var lat = pos.coords.latitude, lng = pos.coords.longitude;  
    console.log(lat +", "+ lng);  
});

 

強制的なエラーの発生

強制的に、getCurrentPosition/watchPositionのエラーコールバックを実行する。

h5.dev.api.geo.isForceError = true;  
  
h5.api.geo.watchPosition().progress(function(pos) {  
  
}).fail((function(error) {  
   // 強制的にエラーコールバックが実行される  
});  

参照

ダミー座標の生成ツールを用いることで、容易にテスト用ダミー座標を取得することができます。

Web Storageラッパー

Web Storageはクライアントにkey-valueペアのデータを保存するための機能です。
キーに紐付けてデータを一時的に保存したり、データとして保存したい場合は、このAPIが適しています。
また、ローカルストレージAPIはIE(8以上)、Chrome、FireFox、Safari、Operaと、主要ブラウザすべてがサポートしています。
但し、
標準のWeb Strorage APIでは今現在では文字列しか保存することができません。
オブジェクトをJSON型に変換して格納することはできますが、
Date型やRegExp(正規表現)型などはその型を維持したまま保存して取り出すことができません。

hifiveのAPIを使うことで、型を保持したまま追加して取り出すことができます。 

  • setItem(key, value)で値の型判定を行い、型情報を付与した文字列をストレージに保存します。
    • h5.api.storage.local.setItem
    • h5.api.storage.session.setItem
  • getItem(key)でストレージに保存されている文字列から適切な型に変換して返します。
    • h5.api.storage.local.getItem
    • h5.api.storage.session.getItem
  • オブジェクトの中に格納されているオブジェクトも正しく変換します。

サンプルコード

h5.api.storage.local.setItem('key3', [10, 'AAA']);  
  
var item = h5.api.storage.local.getItem('key3'); // Array型のオブジェクトを取得できる  
console.log(item)  
console.log(item[1]); // AAA  

参照

Web SQL Databaseラッパー

  • Web SQL Databaseは、2010年11月18日に仕様策定は停止され事実上廃止となってしまいましたが、現在もChromeとSafariでは使用することができます。
  • 現在Web SQL Databaseにかわるローカルデータベースとして、Indexed Database の仕様を策定中です。
  • データ構造に基づいて、WHERE句などで条件を指定してクエリを行いたいデータを保存する場合は、このAPIが適しています。

hifiveのSQL Database APIはビルダーパターンのようになっており、データベースをオープン後SQL実行オブジェクトを生成します。
そのSQL実行オブジェクトに対してWHEREやORDERBYといった情報を設定後、execute()を呼び出しSQLを実行します。
結果はjQuery.DeferrdのPromiseオブジェクトによって返されます。

サンプルコード

// データベースをオープンする  
var db = h5.api.sqldb.open('db1', '1.0', 'db1', 1024*1024);  
// SQL実行オブジェクトを生成する  
var select = db.select('TABLE1', ['COLUMN1','COLUMN3']).where({'COLUMN2 !=': 'AAAA'});  
// Promiseオブジェクト  
var promise = select.execute(); // SQLを実行  
   
// 実行結果をPromiseオブジェクトから取得  
promise.done(function(resultset) {  
    // トランザクション完了  
}).fail(function(error) {  
    // トランザクションエラー  
}).progress(function(resultset, tx) {  
  // 同一トランザクションで続けてSQLを実行できる。  
   var del = db.del('TABLE1' tx);  
   del.where({COLUMN1: 'suzuki').execute().done(function(deleteCount) {  
       alert(deleteCount);
   });  
});  

単一テーブルに対するCRUD操作

SELECT

例: MEMBERテーブルから、AGEが20以上のレコードを取得する。

  • SQL Database APIをそのまま使用した場合
var conn = openDatabase('db1', '1.0', 'db1', 1024*1024);

conn.transaction(function(tx) {
    tx.executeSql('SELECT NAME, BIRTHDAY FROM MEMBER WHERE AGE >= ?', [20], function(rs) {  
       var result = rs.rows;  
       for (var i = 0, len = result.length; i < len; i++) {  
       var row = result.item(i);  
        alert(row.NAME +', '+ row.BIRTHDAY);  
    });
});
  • hifiveのAPIを使用した場合
var db = h5.api.sqldb.open('db1', '1.0', 'db1', 1024*1024);  

db.select('MEMBER', ['NAME','BIRTHDAY']).where({'AGE >=': 20}).execute().done(function(rowItems) {  
   for (var i = 0, len = rowItems.length; i < len; i++) {  
       var row = rowItems.item(i);  
        alert(row.NAME +', '+ row.BIRTHDAY);
    }  
});  

INSERT

例: MEMBERテーブルに、レコード(NAME="tanaka" BIRTH="1990/1/1" AGE=30)を追加する。

  • SQL Database APIをそのまま使用した場合
var conn = openDatabase('db1', '1.0', 'db1', 1024*1024);

conn.transaction(function(tx) {
    tx.executeSql('INSERT INTO MEMBER VALUES (?, ?, ?)', ['tanaka', '1990/1/1', 30], function(rs) {  
        alert(rs.insertId); // レコードID      
    });
});
  • hifiveのAPIを使用した場合
var db = h5.api.sqldb.open('db1', '1.0', 'db1', 1024*1024);  

db.insert('MEMBER', {NAME:'tanaka', BIRTH:'1990/1/1', AGE:30}).execute().done(function(insertIds) {  
    alert(insertIds[0]); // レコードID  
});  

UPDATE

例: MEMBERテーブルの、AGEが30のレコードを更新する。

  • SQL Database APIをそのまま使用した場合
var conn = openDatabase('db1', '1.0', 'db1', 1024*1024);

conn.transaction(function(tx) {
    tx.executeSql('UPDATE MEMBER SET NAME = ?, BIRTH = ? WHERE AGE = ?', ['suzuki', '1980/2/1', 30], function(rs) {  
        alert(rs.rowsAffected); // 更新件数  
    });
});
  • hifiveのAPIを使用した場合
var db = h5.api.sqldb.open('db1', '1.0', 'db1', 1024*1024);  

db.update('MEMBER', {NAME:'suzuki', BIRTH:'1980/2/1'}).where({'AGE >=': 30}).execute().done(function(updateCount) {  
    alert(updateCount); // 更新件数  
});  

DELETE

例: MEMBERテーブルの、AGEが30以外のレコードを削除する。

  • SQL Database APIをそのまま使用した場合
var conn = openDatabase('db1', '1.0', 'db1', 1024*1024);

conn.transaction(function(tx) {
    tx.executeSql('DELETE FROM MEMBER WHEREE AGE != ?', [30], function(rs) {  
        alert(rs.rowsAffected); // 削除件数  
    });
});
  • hifiveのAPIを使用した場合
var db = h5.api.sqldb.open('db1', '1.0', 'db1', 1024*1024);  

db.del('MEMBER').where({'AGE !=': 30}).execute().done(function(deleteCount) {  
    alert(deleteCount) // 削除件数  
});  

複数のSQLを同一トランザクションで処理する

hifiveには、複数のSQLを1トランザクションで処理するTransactionクラスがあります。このクラスのメソッドであるadd()に実行するSQLオブジェクトを追加することで、追加した順番でSQL実行後、結果をまとめて取得することができます。

例) 1トランザクションでTABLE1, TABLE2, TABLE3の順に問い合わせを実行

  • SQL Database APIをそのまま使用した場合
var conn = openDatabase('db1', '1.0', 'db1', 1024*1024);
var results = [];

conn.transaction(function(tx) {
    tx.executeSql('SELECT COLUMN1, COLUMN2 FROM TABLE1 WHERE COLUMN2 != "AAA"', [], function(tx, rs) {
        results.push(rs.rows);
       
        tx2.executeSql('SELECT COLUMN3, COLUMN4 FROM TABLE2', [], function(tx2, rs2) {
            results.push(rs2.rows);
       
            tx3.executeSql('SELECT * FROM TABLE3', [], function(tx3, rs3) {
                results.push(rs3.rows);            
           });  
        });    
    });
}, function() {}, function() {
   // 全てのトランザクションの処理が完了
    // resultsにはTABLE1, TABLE2, TABLE3の順に問い合わせ結果が格納されている
});
  • hifiveのAPIを使用した場合
var db = h5.api.sqldb.open('db1', '1.0', 'db1', 1024*1024);  
var select1 = db.select('TABLE1', ['COLUMN1','COLUMN3']).where({'COLUMN2 !=': 'AAAA'});  
var select2 = db.select('TABLE2', ['COLUMN2','COLUMN4']);  
var select3 = db.select('TABLE3', '*').where({'COLUMN1 >=': 100});  
  
db.transaction().add(select1).add(select2).add(select3).execute().done(function(results) {  
   // 全てのトランザクションの処理が完了
    // resultsは配列で、TABLE1, TABLE2, TABLE3の順に問い合わせ結果が格納されている  
});  

SQL Database APIをそのまま使用して複数のSQLを実行すると、コールバック関数がネストするため可読性が悪くなってしまいますが、
hifiveのAPIを使用すると、コールバック関数はDeferred.done()の一つで済むので可読性を損ないません。

参照

次のステップ⇒チュートリアル12.AOP(アスペクトの適用)

Copyright (C) 2012-2017 NS Solutions Corporation, All Rights Reserved.