WEB APIを使用してQRコード (※QRコードはデンソーウェーブの登録商標 です） を読み取りJSON形式でPOST送信するアプリ開発を行いました。
Android／iOsでもQRコードを読み込みができ、機種依存のないアプリ開発になります。
【検討内容】
WEBブラウザーからでもJavaScriptを使用しQRコードを読むことができるというMediaDevices.getUserMedia()というAPIを使用し確認しました。
（スマホアプリ対応バージョン）
Chrome for Android 103以上
Safari On iOs 13.4以上
（QRコードの大きさ）
12㎜角以上
（ブラウザー設定）
ChromeやSafariでは、MediaDevices.getUserMedia()使用するのにSSL証明書が必要になります。
SSL証明書は１年～10年と設定できますが、AppleのSafariは398日（約１年）の申請が必要です。
※Webサーバーですと、ドメインがSSL証明をしてくれますが、今回はローカルサーバーをIISにて使用するため簡単にはSSL証明が発行できませんでした。そのため、OpenSSLを使ってSSL証明書を発行しローカルにインストールさせて動作させるようにしました。ふわりと書いてありますが一番大変なところかもしれません。
【Webアプリ】
１： QRコード読み取りを行います。下記は、Chromeを使用しています。 QRコード読み取りボタンを押します。
QRコードを読み取ります。
読み取れた後は、開くを押すと元の画面に戻りQRコードで読み取ったURLを項目に書き込みます。
名前を入力して送信ボタンを押します。
※https://jsonplaceholder.typicode.com/
にJSONコード
{
“name”:”N”,
“url”:” https://smartageing-s.co.jp/ “,
“time”:”YYYY-MM-DD HH:MM:SS”
}
をPOSTします。
※JSON形式でPOSTされたデータを返信してくれるテストサーバです。
正常に送信できると送信した内容を返してくれるので表示させます。
QRコードを読み取りJSON形式でPOST送信をすることができました。
アプリをダウンロードしなくても、ブラウザーの機能が増えいろいろなことが出来るようになりました。
少しずついろいろな機能を紹介していけたらと思っています。
お読みいただきありがとうございました。
タグ: Android, Chrome, getUserMedia, iOs, JSONコード, JSON形式, MediaDevices, MediaDevices.getUserMedia(), OpenSSL, POST送信, QRコード, Safari, SSL証明, WEB-API, Webサーバー, アプリ開発, インストール, スマホアプリ対応