<input type="text" id="data1"/>
<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="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" | ||
type="email" | ||||
number | 数値 | type="number" |
<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" |
<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 |
<input type="text" id="data51" scanmessage="バーコードにカメラをかざしてね!" />
属性値 | 値 | 内容 | 記述方法 | 備考 |
---|---|---|---|---|
scanmessage | テキスト | 読み取り時のメッセージを記述します | scanmessage="バーコードにカメラをかざしてね!" | metaで指定した defaultscanmessage より優先します |
<input type="text" id="data61" scanmode="direct" document.getElementById('search').click();/> <input type="button" id="search" value="search"/>
<input type="text" id="data62" scanmode="direct" onscan="alert('スキャンしました');"/> <input type="button" value="barcode scan!" onclick="document.getElementById('data62').focus();"/>
<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!');"/>
<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!');"/>
<input type="text" id="itemid41" name="itemname91" scanmode="direct" onscan="document.getElementById('result').innerHTML=JSON.stringify(arguments[0]);"> <br /> <div id="result" />
{"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 |
<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":"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 |
<script type="text/javascript"> //座標情報更新リクエストAPIを実行する location.href='native-api:///iwebsmartbrowser/request_location'; </script>
<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>
<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>
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":"スタックトレースメッセージ"}} |
結果をfunction onIWebSmartBrowserFileChooseCallback(val){}コールバックで取得し、Data URI schemeと画像を表示します。
<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>
<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>
属性値 | 記述サンプル | 型 | 内容 |
---|---|---|---|
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