RedMobile でスマートフォンの現在地からQRコードを生成するアプリを作ったメモ

RedMobile でスマートフォンの現在地からQRコードを生成するアプリを作ったメモです。

こんなものを作りました

現在地をつどつど確認してQRコードを生成してデータをシェアするというのが、つらくなってきたので作ってみたら、思いのほか便利だったのでメモしておきます。

定期的に current location のにある通り、スマートフォンの現在地を取得していて、必要なタイミングで LOCATION QR CODE GENERATE ボタンをクリックするとその地点のQRコードを含むURLを作成してくれます。

このサンプルではちょうど中野駅の近くの緯度経度をQR code API を使って、緯度経度地図のURL https://fukuno.jig.jp/app/printmap/latlngmap.html#18/35.706170/139.665794/&base=std&ls=std&disp=1&vs=c1j0l0u0f1 というURLのQRコードを生成しています。

RedMobile の Node-RED フロー

実際のフローはこちらです。

json
[{"id":"451493c0.6e10ec","type":"http request","z":"8038da66.69ae08","name":"QR code generator API","method":"GET","ret":"bin","paytoqs":"query","url":"https://api.qrserver.com/v1/create-qr-code/","tls":"","persist":false,"proxy":"","authType":"","x":290,"y":160,"wires":[["f082f375.ae5ad"]]},{"id":"cbddc6f6.e47cd8","type":"change","z":"8038da66.69ae08","name":"QRコードAPIへパラメータ設定","rules":[{"t":"set","p":"payload","pt":"msg","to":"{}","tot":"json"},{"t":"set","p":"payload.size","pt":"msg","to":"320x320","tot":"str"},{"t":"set","p":"payload.data","pt":"msg","to":"\"https://fukuno.jig.jp/app/printmap/latlngmap.html#18/\" & $flowContext(\"location\").latitude\t & \"/\" & $flowContext(\"location\").longitude & \"/&base=std&ls=std&disp=1&vs=c1j0l0u0f1\"","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":510,"y":100,"wires":[["451493c0.6e10ec"]]},{"id":"5883b593.0dd20c","type":"ui_template","z":"8038da66.69ae08","group":"de1c8cd.f50bd7","name":"QRコード表示","order":4,"width":"6","height":"6","format":"<img src=\"data:image/png;base64,{{msg.payload}}\" />","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":700,"y":160,"wires":[[]]},{"id":"63b99c06.73bd84","type":"location","z":"8038da66.69ae08","name":"","x":130,"y":280,"wires":[["3f4b96d5.2e48ea"]]},{"id":"f082f375.ae5ad","type":"base64","z":"8038da66.69ae08","name":"base64 変換","action":"","property":"payload","x":510,"y":160,"wires":[["5883b593.0dd20c"]]},{"id":"8960c78f.cbf5e8","type":"sensor subscribe","z":"8038da66.69ae08","sensor":"geolocation","freq":3000,"name":"","x":360,"y":400,"wires":[[]]},{"id":"43f1c289.d195bc","type":"inject","z":"8038da66.69ae08","name":"Subscribe","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":170,"y":400,"wires":[["8960c78f.cbf5e8"]]},{"id":"3f4b96d5.2e48ea","type":"change","z":"8038da66.69ae08","name":"位置情報を記録","rules":[{"t":"set","p":"location","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":300,"y":280,"wires":[["ec9351a6.c9447"]]},{"id":"5bce0a71.45fd14","type":"ui_button","z":"8038da66.69ae08","name":"","group":"de1c8cd.f50bd7","order":2,"width":0,"height":0,"passthru":false,"label":"Location QR code Generate","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":200,"y":100,"wires":[["cbddc6f6.e47cd8"]]},{"id":"33d39c93.5531a4","type":"ui_text","z":"8038da66.69ae08","group":"de1c8cd.f50bd7","order":1,"width":0,"height":0,"name":"","label":"current location","format":"{{msg.payload}}","layout":"col-center","x":700,"y":280,"wires":[]},{"id":"ec9351a6.c9447","type":"change","z":"8038da66.69ae08","name":"メッセージ作成","rules":[{"t":"set","p":"payload","pt":"msg","to":"\"lat:\" & $flowContext(\"location\").latitude  & \" lon:\" & $flowContext(\"location\").longitude","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":500,"y":280,"wires":[["33d39c93.5531a4"]]},{"id":"fdf7e9c0.3a25c8","type":"comment","z":"8038da66.69ae08","name":"位置情報の購読","info":"","x":160,"y":360,"wires":[]},{"id":"e35d6c57.23d02","type":"comment","z":"8038da66.69ae08","name":"位置情報を記録","info":"","x":160,"y":240,"wires":[]},{"id":"2f5ea580.42fbea","type":"comment","z":"8038da66.69ae08","name":"ダッシュボード部分","info":"","x":170,"y":60,"wires":[]},{"id":"2285edb4.e48af2","type":"comment","z":"8038da66.69ae08","name":"現在の位置を表示","info":"","x":610,"y":240,"wires":[]},{"id":"de1c8cd.f50bd7","type":"ui_group","name":"デフォルト","tab":"c333b8c3.a77b28","order":1,"disp":false,"width":"6","collapse":false},{"id":"c333b8c3.a77b28","type":"ui_tab","name":"QR Code Generator","icon":"dashboard","disabled":false,"hidden":false}]

すぐに使えるフローJSONです。こちらを RedMobile にインポートしてデプロイしてください。