i-web SmartBrowser developers site

基本的な使い方

HTML内のinputタグにfocusがセットされるとバーコードスキャナアイコンが表示されます

i-web SmartBrowserを使えば、何も設定しなくても入力ボックスからバーコードスキャンが可能になります。

<input type="text" id="data1"/>
                    

meta iwebsmartbrowser-settings


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

<meta name="iwebsmartbrowser-settings" appname="Your application name" defaultscanmode="direct">
                    
name 要素 説明 備考
iwebsmartbrowser-settings appname テキスト アプリタイトルを記述します 設定なしの場合はi-web SmartBrowserと表示します
defaultscanmode icon アイコン表示 個別に設定したscanmode属性を優先します
direct ダイレクトスキャン
off スキャンしない
defaultscanmessage テキスト 読み取り時のメッセージを記述します 個別に設定したscanmessage属性を優先します


input type属性


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

<input type="text" id="data1" />
<input type="password" id="data2" />
<input type="search" id="data3" />
<input type="tel" id="data4" />
<input type="url" id="data5" />
<input type="email" id="data6" />
<input type="number" id="data9" />
                    
属性値 内容 記述方法 備考
type text テキスト type="text"  
password パスワード type="password"  
search 検索 type="search"  
text 電話番号 type="text"  
url URL type="url"  
email E-Mail type="email"  
number 数値 type="number"  

scanmode属性


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

<input type="text" id="data21" scanmode="auto"/>
<input type="text" id="data22" scanmode="icon"/>
<input type="text" id="data23" scanmode="direct"/>
<input type="text" id="data24" scanmode="off"/>
                    
属性値 モード 内容 記述方法 備考
scanmode auto metaに記述した設定に準ずる scanmode="auto"  
icon アイコン表示 scanmode="icon"  
direct ダイレクトスキャン scanmode="direct" Android 4.4以降/iOS 8以降
非対応バージョンの場合はアイコン表示になります
off スキャンしない scanmode="off"  




scanformat属性


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

<input type="text" id="data31" scanformat="all" />
<input type="text" id="data32" scanformat="UPC_A" />
<input type="text" id="data33" scanformat="UPC_E" />
<input type="text" id="data34" scanformat="EAN_8" />
<input type="text" id="data35" scanformat="EAN_13" />
<input type="text" id="data36" scanformat="CODE_39" />
<input type="text" id="data37" scanformat="CODE_93" />
<input type="text" id="data38" scanformat="CODE_128" />
<input type="text" id="data39" scanformat="ITF" />
<input type="text" id="data40" scanformat="RSS_14" />
<input type="text" id="data41" scanformat="RSS_EXPANDED" />
<input type="text" id="data42" scanformat="CODABAR" />
<input type="text" id="data43" scanformat="AZTEC" />
<input type="text" id="data44" scanformat="MAXCODE" />
<input type="text" id="data45" scanformat="PDF_417" />
<input type="text" id="data46" scanformat="QR_CODE" />
<input type="text" id="data47" scanformat="DATA_MATRIX" />
                    
属性値 モード 内容 記述方法 Android iOS 備考
scanformat auto 読み取り可能な
すべての種類
scanmode="auto"  
UPC_A UPC-A scanmode="UPC_A" - Universal Product Code *Wikipedia
UPC_E UPC-E scanmode="UPC_E" Universal Product Code *Wikipedia
EAN_8 EAN-8 scanmode="EAN_8" EAN-8 *Wikipedia
EAN_13 EAN-13 scanmode="EAN_13" International Article Number (EAN) *Wikipedia
CODE_39 Code 39 scanmode="CODE_39" Code39 *Wikipedia
CODE_93 Code 93 scanmode="CODE_93" Code93 *Wikipedia
CODE_128 Code 128 scanmode="CODE_128" Code128 *Wikipedia
ITF ITF scanmode="ITF" Interleaved 2 of 5 *Wikipedia
RSS_14 GS1 DataBar scanmode="RSS_14" - GS1 DataBar *Wikipedia
RSS_EXPANDED GS1 Databar Expanded scanmode="RSS_EXPANDED" - GS1 DataBar *Wikipedia
CODABAR Codabar scanmode="CODABAR" - Codabar *Wikipedia
AZTEC Aztec Code scanmode="AZTEC" Aztec Code *Wikipedia
MAXCODE MaxiCode scanmode="MAXCODE" - MaxiCode *Wikipedia
PDF_417 PDF417 scanmode="PDF_417" PDF417 *Wikipedia
QR_CODE QR code scanmode="QR_CODE" QR code *Wikipedia
DATA_MATRIX Data Matrix scanmode="DATA_MATRIX" Data Matrix *Wikipedia

scanmessage属性


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

<input type="text" id="data51" scanmessage="バーコードにカメラをかざしてね!" />
                    
属性値 内容 記述方法 備考
scanmessage テキスト 読み取り時のメッセージを記述します scanmessage="バーコードにカメラをかざしてね!" metaで指定した defaultscanmessage より優先します


onscanイベント


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


ex1)  textboxをタップしてスキャン後、自動的に検索を実行する
textboxをタップすると、バーコードスキャナが起動します
スキャンが完了後、検索を実行します
<input type="text" id="data61" scanmode="direct" document.getElementById('search').click();/>
<input type="button" id="search" value="search"/>
                    

ex2)  textboxをタップするかボタンクリックしてスキャン
「barcode scan!」ボタンをクリックするか、textboxをタップすると、バーコードスキャナが起動します
スキャンが完了すると、textboxに読み取り値を設定し、「スキャンしました」ダイアログを表示します
<input type="text" id="data62" scanmode="direct" onscan="alert('スキャンしました');"/>
<input type="button" value="barcode scan!" onclick="document.getElementById('data62').focus();"/>
                    

ex3)  連続スキャンを行うサンプル
textboxをタップすると、バーコードスキャナが起動します
スキャンが完了すると、textboxに読み取り値を設定し次のテキストボックスにフォーカスが移り、バーコードスキャナが起動します
<input type="text" id="itemid71" scanmode="direct" onscan="document.getElementById('itemid72').focus();"/>
<input type="text" id="itemid72" scanmode="direct" onscan="document.getElementById('itemid73').focus();"/>
<input type="text" id="itemid73" scanmode="direct" onscan="document.getElementById('itemid74').focus();"/>
<input type="text" id="itemid74" scanmode="direct" onscan="document.getElementById('itemid75').focus();"/>
<input type="text" id="itemid75" scanmode="direct" onscan="document.getElementById('itemid76').focus();"/>
<input type="text" id="itemid76" scanmode="direct" onscan="document.getElementById('itemid77').focus();"/>
<input type="text" id="itemid77" scanmode="direct" onscan="document.getElementById('itemid78').focus();"/>
<input type="text" id="itemid78" scanmode="direct" onscan="alert('Completed!');"/>
                    

ex4)  確認しながら連続スキャンを行うサンプル
textboxをタップすると、バーコードスキャナが起動します
スキャンが完了すると、textboxに読み取り値を設定し次のテキストボックスにフォーカスが移り、バーコードスキャナが起動します
<input type="text" id="itemid81" scanmode="direct" onscan="if(confirm('next?')){document.getElementById('itemid82').focus();}"/>
<input type="text" id="itemid82" scanmode="direct" onscan="if(confirm('next?')){document.getElementById('itemid83').focus();}"/>
<input type="text" id="itemid83" scanmode="direct" onscan="if(confirm('next?')){document.getElementById('itemid84').focus();}"/>
<input type="text" id="itemid84" scanmode="direct" onscan="if(confirm('next?')){document.getElementById('itemid85').focus();}"/>
<input type="text" id="itemid85" scanmode="direct" onscan="if(confirm('next?')){document.getElementById('itemid86').focus();}"/>
<input type="text" id="itemid86" scanmode="direct" onscan="if(confirm('next?')){document.getElementById('itemid87').focus();}"/>
<input type="text" id="itemid87" scanmode="direct" onscan="if(confirm('next?')){document.getElementById('itemid88').focus();}"/>
<input type="text" id="itemid88" scanmode="direct" onscan="alert('Completed!');"/>
                    


onscanイベントで取得可能な値


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


json取得方法
onscanイベントに「JSON.stringify(arguments[0])」と記述しjsonデータを取得します
<input type="text" id="itemid41" name="itemname91" scanmode="direct" onscan="document.getElementById('result').innerHTML=JSON.stringify(arguments[0]);">
<br />
<div id="result" />
                    

jsonデータサンプル
{"data":"2016022402124680","element":{"tag_name":"INPUT","attributes":{"id":"itemid41","scanmode":"direct","type":"text","onscan":"document.getElementById('result').innerHTML=JSON.stringify(arguments[0]);","name":"itemname41"}},"orientation":180,"system":{"os_name":"iOS","application_version_name":"1.0.0","os_version":"9.2.0"},"datetime":"2016/02/26 17:39:03","location":{"longitude":136.99500561,"latitude":35.11602759,"accuracy":314},"format_name":"CODE_128"}
                    

データ取得方法
バーコードの読み取り値を取得します
<input type="text" id="itemid92" scanmode="direct" onscan="document.getElementById('result').innerHTML=arguments[0].data;">
<br />
<div id="result" />
                    

バーコードの読み取り時の緯度と経度を取得します
<input type="text" id="itemid93" scanmode="direct" onscan="document.getElementById('result').innerHTML = '緯度:'+arguments[0].location.longitude+',経度:'+arguments[0].location.latitude;">
<br />
<div id="result" />
                    

データ取得サンプル
Name Value 取得方法 内容
data 2016022402124680 arguments[0].data バーコードの読み取り値
element tag_name INPUT arguments[0].element.tag_name onscanを記述したタグ情報
attributes id itemid41 arguments[0].element.id
scanmode direct arguments[0].element.scanmode
type text arguments[0].element.type
onscan document.getElementById('result').innerHTML
=JSON.stringify(arguments[0]);
arguments[0].element.onscan
name itemname91 arguments[0].element.name
orientation 180 arguments[0].orientation 端末の向き
system device_id 15388f89297 arguments[0].system.device_id インストール時に設定される端末識別番号
device_name bluetech.sp001 arguments[0].system.device_name 設定画面で入力した端末名
os_name iOS arguments[0].system.os_name OS名
application_version_name 1.0.0 arguments[0].system.application_version_name i-web SmartBrowserのバージョン
os_version 9.2.0 arguments[0].system.os_version OSバージョン
datetime 2016/06/22 12:30:25 arguments[0].datetime バーコードの読み取り日時
timestamp 1466566225 arguments[0].timestamp バーコードの読み取り日時(Unixtime)
location longitude 136.99500561 arguments[0].location.longitude 経度 西経がマイナス、東経がプラス 単位:度(degree)
latitude 35.11602759 arguments[0].location.latitude 緯度 南緯がマイナス、北緯がプラス 単位:度(degree)
accuracy 314 arguments[0].location.accuracy 精度 単位:メートル
timestamp 1466566225 arguments[0].location.timestamp GPSデータ取得日時(Unixtime)
format_name CODE_128 arguments[0].format_name バーコードの種類111


onIWebSmartBrowserReady() コールバック関数


onIWebSmartBrowserReady() コールバック関数は、ページ読込完了時に実行される関数です 以下のサンプルは、ページ読込完了時にJavaScriptを使って端末情報を取得します


端末情報取得方法
・システム情報は、任意の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>
                    




onIWebSmartBrowserReady() コールバック関数処理完了時に格納される情報


onIWebSmartBrowserReady() コールバック関数処理完了時に「iwebsmartbrowser」オブジェクトへ、システム情報及び位置情報を格納します。
・システム情報は、任意のJavaScriptイベントに「iwebsmartbrowser.system.パラメタ名」と記述し端末情報を取得します
・位置情報は、任意のJavaScriptイベントに「iwebsmartbrowser.location.パラメタ名」と記述し端末情報を取得します


jsonデータサンプル
{"system":{"device_id":"1544c52b17","device_name":"bluetech.at001","os_name":"iOS","os_version":"9.2.0","application_version_name":"1.0.0"},"location":{"latitude":35.1318402,"longitude":136.9895945,"accuracy":30,"timestamp":1462350493957}}
                    

データ取得サンプル
Name Value 取得方法 内容
system device_id 1544c52b17 iwebsmartbrowser.system.device_id インストール時に設定される端末識別番号
device_name bluetech.at001 iwebsmartbrowser.system.device_name 設定画面で入力した端末名
os_name iOS iwebsmartbrowser.system.os_name OS名
application_version_name 1.0.0 iwebsmartbrowser.system.application_version_name i-web SmartBrowserのバージョン
os_version 9.2.0 iwebsmartbrowser.system.os_version OSバージョン
location longitude 136.9895945 iwebsmartbrowser.location.longitude 経度 西経がマイナス、東経がプラス 単位:度(degree)
latitude 35.1318402 iwebsmartbrowser.location.latitude 緯度 南緯がマイナス、北緯がプラス 単位:度(degree)
accuracy 30 iwebsmartbrowser.location.accuracy 精度 単位:メートル
timestamp 1462349883969 iwebsmartbrowser.location.timestamp GPSデータ取得日時:UnixTime


座標情報更新リクエストAPI


「native-api:///iwebsmartbrowser/request_location」 は端末内に格納されているGPS座標情報を更新するためのAPIです


実行方法
以下の記述でAPIを呼び出します
location.href='native-api:///iwebsmartbrowser/request_location';
※呼び出しから座標情報の更新まで時間が掛かることがありますので、更新までwaitする等の処理を実装してください
<script type="text/javascript">
    //座標情報更新リクエストAPIを実行する
    location.href='native-api:///iwebsmartbrowser/request_location';
</script>
                    




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


JavaScript
<script type="text/javascript">
function onIWebSmartBrowserFileChooseCallback(val) {
    if (val.request.pattern == 'type2') {
        if (val.data != null) {
            document.getElementById('itemid131').innerText = val.data.substring(0, 50) + "...(length:" + val.data.length + ")";
        }
        document.getElementById('itemid132').src = val.data;
        document.getElementById('itemid133').innerText = JSON.stringify(val.request);
        document.getElementById('itemid134').innerText = JSON.stringify(val.exception);
    }
}
</script>
                    

HTML
<div class="panel panel-default">
    <div class="panel-heading">パターン2:画像サイズ変換ありリサイズ(リサイズ width:480,height:320)</div>
    <div class="panel-body">
    <div>
            *ファイル選択(リサイズ width:480,height:320):<br />
    <a href="native-api:///iwebsmartbrowser/choose_file?%7Bpattern%3Atype2%2Cresizewidth%3A480%2Cresizeheight%3A320%7D">
                choose
                file<br />(Call
                native-api:///iwebsmartbrowser/choose_file?{pattern:type2,resizewidth:480,resizeheight:320})
            </a><br />
        </div>
    <hr />
    <div>
    <b>*読取データ (Data URI scheme形式 先頭50文字)</b><br />
    <div id="itemid131"></div>
        </div>
    <div>
    <b>*読取画像(リサイズ width:480,height:320)</b><br /><img id="itemid132" />
        </div>
    <div>
    <b>*val.request(json)</b><br />
    <div id="itemid133"></div>
        </div>
    <div>
    <b>*val.exception(json)</b><br />
    <div id="itemid134"></div>
        </div>
    </div>
</div>
                    

データ受渡値サンプル native-api:///iwebsmartbrowser/choose_file?データ受渡し値 json形式
・resizewidth又はresizeheightを指定します。両方指定した場合は画像が最大になるように調整されます。
・native-api:///iwebsmartbrowser/choose_file?より後の引数はURLエンコードを行って下さい。
・サンプル  native-api:///iwebsmartbrowser/choose_file?{pattern:type2,resizewidth:480,resizeheight:320}

Label 記述サンプル 内容
resizewidth resizewidth:480 int リサイズ後の画像幅(px)
resizeheight resizeheight:320 int リサイズ後の画像高さ(px)
その他の値(任意) (例) pattern:type2 string 引数として渡すラベルと値(ラベル:値)

データ戻り値サンプル
Name Value 取得方法 内容
val.data image/jpeg;base64,/9/4TMNRXhpZgAASUkqAAgAAAA... (Data URI scheme) Data URI scheme *Wikipedia
val.request {pattern:type2,resizewidth:480,resizeheight:320} (json) native-api:///iwebsmartbrowser/choose_fileの引数が渡されます
val.exception {"message":"エラーメッセージ","stacktrace":"スタックトレースメッセージ"} (json) native-api:///iwebsmartbrowser/choose_file 内で発生したExceptionが渡されます
{exception:{"message":"エラーメッセージ","stacktrace":"スタックトレースメッセージ"}}


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

JavaScript
<script type="text/javascript">
function onIWebSmartBrowserFileChooseCallback(val) {
    if (val.request.pattern == 'type6') {
        if (val.data != null) {
            document.getElementById('itemid171').innerText = val.data.substring(0, 50) + "...(length:" + val.data.length + ")";
        }
        document.getElementById('itemid172').src = val.data;
        document.getElementById('itemid173').innerText = JSON.stringify(val.request);
        document.getElementById('itemid174').innerText = JSON.stringify(val.exception);
    }
}
</script>
                    

HTML
<div class="panel panel-default">
    <div class="panel-heading">パターン2:画像サイズ変換ありリサイズ(リサイズ width:480,height:320)</div>
    <div class="panel-body">
    <div>
            *ファイル選択(リサイズ width:480,height:320):<br />
    <input type="file" pattern="type6" resizewidth="480" resizeheight="320" /><br />
        </div>
    <hr />
    <div>
    <b>*読取データ (Data URI scheme形式 先頭50文字)</b><br />
    <div id="itemid171"></div>
        </div>
    <div>
    <b>*読取画像(リサイズ width:480,height:320)</b><br /><img id="itemid172" />
        </div>
    <div>
    <b>*val.request(json)</b><br />
    <div id="itemid173"></div>
        </div>
    <div>
    <b>*val.exception(json)</b><br />
    <div id="itemid174"></div>
        </div>
    </div>
</div>
                    

データ受渡値サンプル <input type="file" 属性値 />
・resizewidth又はresizeheightを指定します。両方指定した場合は画像が最大になるように調整されます。
・サンプル  <input type="file" pattern="type6" resizewidth="480" resizeheight="320" />

属性値 記述サンプル 内容
resizewidth resizewidth="480" int リサイズ後の画像幅(px)
resizeheight resizeheight="320" int リサイズ後の画像高さ(px)
その他の値(任意) (例) pattern="type6" string 引数として渡すラベルと値(ラベル=値)

データ戻り値サンプル
Name Value 取得方法 内容
val.data image/jpeg;base64,/9/4TMNRXhpZgAASUkqAAgAAAA... (Data URI scheme) Data URI scheme *Wikipedia
val.request {pattern:type2,resizewidth:480,resizeheight:320} (json) native-api:///iwebsmartbrowser/choose_fileの引数が渡されます
val.exception {"message":"エラーメッセージ","stacktrace":"スタックトレースメッセージ"} (json) 画像変換処理で発生したExceptionが渡されます
{exception:{"message":"エラーメッセージ","stacktrace":"スタックトレースメッセージ"}}

Created by Bluetech Corporation