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 = '';
}
                    

地図を更新(scan) 地図を更新(system)

---

端末情報を取得する

任意のタイミングで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と画像を表示します。

---

【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と画像を表示します。