i-web SmartBrowser demo site

i-web SmartBrowser demo site


このページはi-web SmartBrowserのデモサイトです
動作させる場合はi-web SmartBrowserアプリから実行する必要があります



meta iwebsmartbrowser-settings


metaにiwebsmartbrowser-settingsを設定してSmartBrowserの共通設定を記述します

<meta name="iwebsmartbrowser-settings" appname="Your application name" defaultscanmode="direct">
                    



input type属性


対応可能なinputタグのtype属性値です


                    
text
password
search
tel
url
email
number
file ※バーコードスキャンではなくカメラorファイル選択になります
※Android4.4のみ動作不可の場合あり
未設定
未設定(IDなし)


scanmode属性


inputタグの属性値にscanmodeを設定してfocusがセットされた時の読み取り方法を指定します。


                    
auto
icon
direct
off

scanformat属性


inputタグの属性値にscanformatを設定して読み取りを行う対象バーコードの種類を指定します。(指定は1つのみ)


                    
すべての種類
UPC-A
UPC-E
EAN-8
EAN-13
Code 39
Code 93
Code 128
ITF
GS1 DataBar
(RSS14)
GS1 Databar Expanded
(RSS14 EXPANDED)
Codabar
Aztec Code
MaxiCode
PDF417
QR code
Data Matrix
存在しない値

scanmessage属性


inputタグの属性値にscanmessageを設定してバーコード読み取り時のメッセージを指定します


                    
バーコードにカメラをかざしてね!


camerafacing属性


inputタグの属性値にcamerafacingを設定してカメラの切り替えを指定します


                    
front
back
指定なし(システム設定で指定した値)


onscanイベント 基本


onscanイベントでスキャン後のイベントを記述します


ex1)  textboxをタップしてスキャン後、自動的に検索を実行する
textboxをタップすると、バーコードスキャナが起動します
スキャンが完了後、検索を実行します


                    



ex2)  textboxをタップするかボタンクリックしてスキャン
「barcode scan!」ボタンをクリックするか、textboxをタップすると、バーコードスキャナが起動します
スキャンが完了すると、textboxに読み取り値を設定し、「スキャンしました」ダイアログを表示します


                    



ex3)  連続スキャンを行うサンプル
textboxをタップすると、バーコードスキャナが起動します
スキャンが完了すると、textboxに読み取り値を設定し次のテキストボックスにフォーカスが移り、バーコードスキャナが起動します

















ex4)  確認しながら連続スキャンを行うサンプル
textboxをタップすると、バーコードスキャナが起動します
スキャンが完了すると、textboxに読み取り値を設定し次のテキストボックスにフォーカスが移り、バーコードスキャナが起動します


















onscanイベント 応用


onscan時にJavaScriptを使って時刻やGPS情報、端末情報等を取得します


json取得方法
onclickイベントに「JSON.stringify(arguments[0])」と記述しjsonデータを取得します
onscan="document.getElementById('result1').innerHTML=JSON.stringify(arguments[0]);"
                    



データ取得方法
1) バーコードの読み取り値を取得します
onscan="document.getElementById('result2').innerHTML=arguments[0].data;"
                    



2) バーコードの読み取り値、種類、時刻を表示します
onscan="document.getElementById('result3').innerHTML = '値:' + arguments[0].data + '
種類:' + arguments[0].format_name+ '
時刻:' + arguments[0].datetime;"



3) バーコード読み取り時の緯度、経度を表示します
onscan="document.getElementById('result4').innerHTML = arguments[0].location.latitude + ',' + arguments[0].location.longitude; viewMap(document.getElementById('result4').innerHTML);"
                    


4) 位置情報を更新します
location.href = 'native-api:///iwebsmartbrowser/request_location';
document.getElementById('result7').innerText = "位置情報更新APIをコールしました";
                    



//呼び出し
onClick="viewMap(iwebsmartbrowser.location.latitude + ',' + iwebsmartbrowser.location.longitude);"
//地図を表示する(GoogleMaps使用)
function viewMap(loc) {
    var location = loc;
    document.getElementById("outputFrame").innerHTML = '';
}
                    



端末情報を取得する


任意のタイミングでJavaScriptを使って端末情報等を取得します


json形式で端末情報を取得 例)onclickイベントに「JSON.stringify(iwebsmartbrowser)」と記述しjsonデータを取得します
onclick="document.getElementById('result5').innerHTML = JSON.stringify(iwebsmartbrowser);"
                    



onIWebSmartBrowserReady()イベントを使用して端末情報を取得
・システム情報は、任意のJavaScriptイベントに「iwebsmartbrowser.system.パラメタ名」と記述し端末情報を取得します
・位置情報は、任意のJavaScriptイベントに「iwebsmartbrowser.location.パラメタ名」と記述し端末情報を取得します
<script type="text/javascript">
        //システム情報と位置情報を表示する関数
        function onIWebSmartBrowserReady() {
            //システム情報を取得
            document.getElementById('itemid101').innerHTML = iwebsmartbrowser.system.device_id;
            document.getElementById('itemid102').innerHTML = iwebsmartbrowser.system.device_name;
            document.getElementById('itemid103').innerHTML = iwebsmartbrowser.system.os_name;
            document.getElementById('itemid104').innerHTML = iwebsmartbrowser.system.application_version_name;
            document.getElementById('itemid105').innerHTML = iwebsmartbrowser.system.os_version;
            //位置情報を取得(位置情報を取得できない場合は処理しない)
            if (iwebsmartbrowser.location != null) {
                document.getElementById('itemid106').innerHTML = iwebsmartbrowser.location.latitude;
                document.getElementById('itemid107').innerHTML = iwebsmartbrowser.location.longitude;
                document.getElementById('itemid108').innerHTML = iwebsmartbrowser.location.accuracy;
                document.getElementById('itemid109').innerHTML = new Date(iwebsmartbrowser.location.timestamp).toLocaleString();               
            }
        }
</script>
                    


system.device_id:
system.device_name:
system.os_name:
system.application_version_name:
system.os_version:
location.latitude:
location.longitude:
location.accuracy:
location.timestamp:







【choose_file API】
カメラ撮影 or ギャラリー選択 からファイルを Data URI scheme で取得する
(APIを使用した取得方法 Androidのみ)


native-api:///iwebsmartbrowser/choose_file でカメラ/ファイル選択を起動し、結果がfunction onIWebSmartBrowserFileChooseCallback(val) の引数に戻ります。
結果の値(Data URI scheme)は、引数.dataで取得できます。
以下のサンプルは、native-api:///iwebsmartbrowser/choose_file でカメラ/ファイル選択後、結果の値と画像を画面に表示するサンプルです。


カメラ or ギャラリー起動、結果のData URI scheme取得方法
任意のコントロールに起動パラメタを記述します
(例:<a href="native-api:///iwebsmartbrowser/choose_file">choose file</a>)
結果をfunction onIWebSmartBrowserFileChooseCallback(val){}コールバックで取得し、Data URI schemeと画像を表示します。

パターン1:画像サイズ変換なし

*読取データ (Data URI scheme形式 先頭50文字)
*読取画像(表示のみ width:640px)
*val.request(json)
*val.exception(json)
パターン2:画像サイズ変換ありリサイズ(リサイズ width:800,height:600)

*読取データ (Data URI scheme形式 先頭50文字)
*読取画像(リサイズ width:800,height:600)
*val.request(json)
*val.exception(json)
パターン3:画像サイズ変換あり(リサイズ width:800)

*読取データ (Data URI scheme形式 先頭50文字)
*読取画像(リサイズ width:800)
*val.request(json)
*val.exception(json)
パターン4:画像サイズ変換あり(リサイズ height:600)

*読取データ (Data URI scheme形式 先頭50文字)
*読取画像(リサイズ height:600)
*val.request(json)
*val.exception(json)



【HTML カメラ・ファイル選択】
カメラ撮影 or ギャラリー選択 からファイルを Data URI scheme で取得する
(input type="file"を使用した取得方法 Androidのみ)


input type="file" でカメラ/ファイル選択を起動し、結果がfunction onIWebSmartBrowserFileChooseCallback(val) の引数に戻ります。
結果の値(Data URI scheme)は、引数.dataで取得できます。
以下のサンプルは、native-api:///iwebsmartbrowser/choose_file でカメラ/ファイル選択後、結果の値と画像を画面に表示するサンプルです。


カメラ or ギャラリー起動、結果のData URI scheme取得方法
任意のコントロールに起動パラメタを記述します

                    
結果をfunction onIWebSmartBrowserFileChooseCallback(val){}コールバックで取得し、Data URI schemeと画像を表示します。

パターン1:画像サイズ変換なし
*ファイル選択:

*読取データ (Data URI scheme形式 先頭50文字)
*読取画像(表示のみ width:640px)
*val.request(json)
*val.exception(json)
パターン2:画像サイズ変換ありリサイズ(リサイズ width:800,height:600)
*ファイル選択(リサイズ width:800,height:600):


*読取データ (Data URI scheme形式 先頭50文字)
*読取画像(リサイズ width:800,height:600)
*val.request(json)
*val.exception(json)
パターン3:画像サイズ変換あり(リサイズ width:800)
*ファイル選択(リサイズ width:800):


*読取データ (Data URI scheme形式 先頭50文字)
*読取画像(リサイズ width:800)
*val.request(json)
*val.exception(json)
パターン4:画像サイズ変換あり(リサイズ height:600)
*ファイル選択(リサイズ height:600):


*読取データ (Data URI scheme形式 先頭50文字)
*読取画像(リサイズ height:600)
*val.request(json)
*val.exception(json)


Created by Bluetech Corporation