プログラ生活

プログラム初学者のためのポイントを書いていこうと思います。たまに脇道それた記事もありますが、息抜きだとおもって気長にお付き合いください。

Androidアプリ QR CROSS VIEW ガイド

pumpkin-labo.com

アプリの内容

QR CROSS VIEWは、ハンディターミナルのようにQRコードを入力値として扱えるAndroidアプリで、見た目はブラウザ(WebView)そのままです。 ただし特徴は、JavaScriptがネイティブアプリと通信しQRデコーダーを呼び出してくれるというもので、Webアプリケーション側の開発で完結するというものです。
QRコードを活用した自動認識システムにおける開発のコストを低くすることを目的としています。

仕様版ダウンロード

ダウンロードはこちらから
個人のGoogleDriveですが、心配せずDLされてください。
また、インストール時に身元不明アプリと出るかもしれませんが、こちらもご心配せず、試してみてください。

※ 試用版は機能制限でURLの設定ができません。
※ 本アプリをバースエンジニアリング等で解析することは違法行為になります。発見し次第通報いたしますのでくれぐれも実行されないでください。

試しに使ってみる。

※ QR CROSS VIEWでないと動作しません。

使い方

以下は、DEMOページのHTMLソースです。
(CSSは除きます)

<html>
<head>
    <script>
        function qr_input(item){
            document.getElementById("item").value = item;
            android.soundPlay(1, 0);
            open_disp();
            android.openCamera(0)
        }

        var camera_type = 0;

        function change_event(){
            if (camera_type == 0){
                android.changeCamera(1, 0);
                camera_type = 1;
            }else{
                android.changeCamera(0, 0);
                camera_type = 0;
            }
            android.closeCamera();
            open_disp();
        }

        function open_disp(){
            document.getElementById("disp").style.display="block";
        }

        function close_disp(){
            document.getElementById("disp").style.display="none";
        }

    </script>
</head>
<body>
        <div id="disp">
                <div class="maintitle">
                    QR CROSS VIEW
                </div>

                <br />

                <div class="h1">
                    <textarea class="txtara" name="text" id="item" placeholder="スキャンしたQRコードの値が挿入されます。"></textarea>
                </div>
        </div>

        <div class="box">
            <p class="h2">
                カメラ操作
            </p>
            <p class="h1">
                <input class="f_btn" type="button" onClick="android.openCamera(),close_disp()" value="OPEN" >

                <input class="f_btn" type="button" onClick="change_event()" value="FRONT" >

                <input class="f_btn" type="button" onClick="android.closeCamera(),open_disp()" value="CLOSE" >
            </p>
        </div>

        <div class="box">
            <p class="h2">
                音操作
            </p>
            <p class="h1">
                <input class="g_btn" type="button" onClick="android.soundPlay(1, 0)" value="SOUND1" >

                <input class="g_btn" type="button" onClick="android.soundPlay(2, 1)" value="SOUND2" >

                <input class="g_btn" type="button" onClick="android.soundPlay(3, 2)" value="SOUND3" >
            </p>
        </div>

</body>
</html>

実際のデモ画面はこんな感じです。

以下の画像のOPENを押すと

f:id:hanabusa-snow:20201228202513p:plain
 

画像のようにカメラが開きます。

f:id:hanabusa-snow:20201228202538p:plain

パーツの説明

function qr_input(item){
        document.getElementById("item").value = item;
}

QRコードのスキャン結果を受け取ります。
qr_input()関数を必ず定義し、その際引数(引数名は自由)を一つつけてください。
引数が入力値になります。




android.openCamera()

カメラを起動しビューを開きます。
サイズは画面領域の縦半分固定です。




android.closeCamera()

カメラを停止しビュー閉じます。
また、WebView領域を前面に展開します。




android.changeCamera(0, 0);

カメラを変更します。
第1引数は、0がリアカメラで、1がフロントカメラです。 第2引数は、0が変更メッセージを表示、1が非表示です。




android.soundPlay(1, 0)

効果音を鳴らします。
第1引数は、1,2,3のいずれかで効果音の種類を変えます。
第2引数は、繰り返しの数を指定します。




サポート

使用制限解除をしたアプリ購入のご相談、またご不明な点は、本ブログのお問い合わせよりお問い合わせください。