外部から受信されたデータにより表示内容を変更するアプリを作成しました。
外部との接続はUDP通信。受信時の内容は、JSONコードになります。
1.開発環境・開発言語
C#
Visual Studio2017
2.開発期間
3週間
3.開発時に注意した点
1, 受信データの時間の変更による視認者の状態変化を正確に把握する為、
画像表示時間に正確性を要求されていました。
人間が判断できる最小時間を10msと設定し、
表示時間の誤差をそれ以内に納まるようにプログラムしました。
処理方法は、SystemTimersTimerで画像を表示させるタイミングを
作るようにしました。
実測方法は、プログラムにStopwatchを組み込んでログで確認し、
±10ms以内で実現していることを確認しました。
2, 画面拡張で接続し、サブモニターに画像を表示させたいとの依頼に対応しました。
サブモニターに何を使用するかは、
プロジェクター使用の可能性など複数候補があり、解像度が分からなかった為、
まずディスプレイ(サブモニター)の解像度を取得し、
解像度に合う画像サイズに変更してから表示させる処理を行うとうまく表示できました。
サブモニターが上下、左右どこに搭載されるのか不明であったので
どこに搭載されても良いようにプログラムしました。
処理としては、アクティブディスプレイを指定して表示させると
どこに拡張しても正しく表示することができました。

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証明書は1年~10年と設定できますが、AppleのSafariは398日(約1年)の申請が必要です。
※Webサーバーですと、ドメインがSSL証明をしてくれますが、今回はローカルサーバーをIISにて使用するため簡単にはSSL証明が発行できませんでした。そのため、OpenSSLを使ってSSL証明書を発行しローカルにインストールさせて動作させるようにしました。ふわりと書いてありますが一番大変なところかもしれません。
【Webアプリ】
1: 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サーバー,
アプリ開発,
インストール,
スマホアプリ対応