Webアプリ その１（Web ARでバーコードをスキャンして金額を表示させる）
こんにちは、Ideagearの鈴木陽介です。
これまでは電子工作系の記事だけでしたが、今回を機に、これからはWebアプリ系にも挑戦していきたいと思います。
事の発端は約一週間前、香港在住の方とオンラインで新しいアプリのアイデアをディスカッションしている時でした。
主にECの新しいサービスに関するアイデアで、詳細はここでは書けませんが、私が理解している範囲では、一つ一つの機能は既に世の中に存在しているサービスを組み合わせれば実現可能だと感じました。
ただ、です。
それで終わってしまっては意味がありません。
電子製品のプロダクト開発における電子工作とプロトタイプ製作のごとく、ただ頭の中で理解しているのと実際にやってみるのとでは大きな違いがありますし、実際にやってみてわかることも少なくないです。
ということで、全部やると大変なので、まずは最小限の機能に限って実際につくってみることにしました。
今回のWebアプリの要件
１．スマホのネイティブアプリをつくると大変なので、Webブラウザ（つまり、Webアプリ）で動作させる。
２．スマホのカメラでバーコードをスキャンし、読み取ったバーコードの近くに金額を表示させる。
３．上記2をWebアプリのAR上で実現させる。
これだったらカンタンにできそうで、なおかつ最低限のやった感は出せるな（笑）と思い、相手に上記要件を伝え、今週末にプロトタイプを作ることを約束しました。
わざわざ相手に宣言したのは、そうでもしないとズルズルと実行を遅らせてやらなくなりそうだからです。現在東京出張中ですが、土日は訪問アポも取れないので、その時間に八王子のコワーキングに籠ってやることにしました。
まずはバーコードの読み取りツールを調査
とは言え、Webアプリなんてまともにつくったことがありませんw
一方で、今はあらゆるソフトウェア系の技術が、プログラミングの技術不用のノーコードでできるようになってきています。
そこで、「よくわからないけど、プロトタイプなんだし、とりあえずノーコードの組み合わせで何とかなるだろう。それでできる方法を探してやってみればいいや。」
ということで、まずはやり方を調べることから始めました。
ここで肝となるポイントは２つ。
１．いかにしてバーコードを読み取るか
２．読み取ったデータをどのようにAR上で表示させるか
まずは、カンタンそうなバーコードを読み取るWebアプリを探すところから始めました。
私は、QRコードのスキャンアプリについては、デンソーさんの「クルクル - QRコードリーダー」
を使っていますが、QRコードの読み取りアプリがあるんだからバーコードのも絶対にあるだろうと思って探しました。唯一の懸念は、今回探すのはスマホアプリではなく、ブラウザ上で動くWebアプリだということです。
そこで、まず見つけたのはこちらのサイト。
１．一番下の方にある「サンプル起動（カメラへのアクセスの許可が必要です）」ボタンをクリック。
２．カメラのアクセスを許可する。
３．「スキャン開始/停止」ボタンをクリック。
４．カメラで任意のバーコードを読み取る。
５．ボタンの左側にある空白のボックスに読み取ったバーコードの数字が表示される。
※パソコンのカメラだといくらやっても認識してくれません。スマホのカメラをお使いください。
下記は実際に読み取ったあとの写真です。
ただ、これだと読み取ったバーコードの数字をそのまま表示しただけです。
この数字を元に、AR上で金額を表示させるというところには遠い気がしました。
そこで気づいたのですが、「バーコードを使えばいいのであって、中の読み取る必要はないのでは？」という点です。
どういうことかと言うと、今回の本質は「商品を認識し、AR上でその価格を表示させる」ことです。そして、その方法として、
「商品の認識は、QRコードを使うのが一番簡単そうだが、QRコードはすべての商品に必ずあるわけではないため実用的ではない。一方で、バーコードを使うのはアプリ的にはQRコードより難易度が高そうだが、お店で売られているような商品にはほぼすべてバーコードがあるので、現実的にはバーコードを使う方がいい。」
と考え、まずはバーコードを読み取る機能を実装すべきだと思い込んでいましたが、今回はプロトタイプなんだし、バーコードを「画像」として認識すればいいのでは？となりました。
他方で、この時点ではどうやれば良いかは依然として不明だったので、とりあえず、このバーコードの中身を読み取る案はボツにして、先にARから取り組むことにしました。
ARのノーコードツールを探す
で、いろいろ調べたところ、「Web AR」というものがあり、それをう使うために「ARマーカー」が必要なことがわかりました。
要は、AR空間上で認識したい画像（マーカー）と認識後に表示させる画像（プレビュー）を事前に登録しておき、スマホのカメラからマーカーを認識した後にプレビューを表示させるというものです。
まさにこれです！
ここまでわかったら、後はそれができる無料のツールを探すだけですw
で、まさにドンピシャのサービスを見つけました。
CloudCIRCUSさんのLESSARというサービスです。
CloudCIRCUSの新規アカウント発行の画面はこちら
LESSARのトップページはこちら
ただ、やはり説明だけ見ても判断ができません。
ところが、LESSARの良いところは、下記のようなカンタンに試せるページがあることです。
このページの下の方にあるQRコードをスマホでスキャンし、ARと書かれている部分が認識されると、変なオバケみたいのが現れますw。下記は実際の画面です。
※AR上でスクショしたので画像が粗いですが悪しからず。
上記はマーカー認識前の画面
上記はマーカーを認識して、マーカー上にオバケ（オバケじゃなくてペンギンでしたねw）が出ている状態
こちらはペンギンの近くを拡大してスクショしました。
ちなみに、ARと書かれたマーカーがスマホの画面から外れると、オバケが見えなくなります。
ただ、これを見て、これならバーコードを写真に撮ってそれをマーカーとして登録し、同時に、表示させる画像をこのオバケから金額表示に変えるだけで目的が達成させられることに気づきました。
LESSARを使ってみる
ということで、さっそく使ってみます。
下記はLESSARでの新規アカウント発行画面です。
無料アカウントだと制限がありますが、とりあえず使ってみたいだけなら無料版で十分です。
CloudCIRCUSでIDとパスワードを入力してログインすると、下記のような操作画面に移行します。
CloudCIRCUSはLESSARの他にもいろんなノーコードツールがあるのがわかりますね。
他のサービスも興味深いですが、今回はLESSARを使いますので、LESSARのところにあるログインボタンを押します。なぜLESSARだけログインボタンがあって、他は「さっそく無料で使ってみる」になっているかというと、私はLESSARだけはアカウントを既に発行しているからですね。
LESSARにログインすると、LESSAR使用許諾特約の画面が出るので、それに同意すると、上記のようなダッシュボードに画面になります。
最初はダッシュボードを見ても何もないので、そのままスルーして「マーカー管理」を押し、「新規作成」をクリックします。
マーカーを作成する
任意のマーカー名を入れ、マーカーファイルをアップロードします。
今回はこちらの写真をマーカーとしてアップロードしました。
なお、アップロードできるのはPNGファイルだけです。スマホで普通に写真を撮るとJPGなので、スマホからBluetoothなどでパソコンに送った後、ペイントなどの画像処理ソフトを使ってJPGからPNGに変更してからアップロードしてください。
コンテンツを作成する
マーカーの登録が終わったら、次は表示させる画像を登録します。
「コンテンツ管理」から「新規作成」をクリックしてください。
今回はマーカーARを選択します。
無料版は、通常コンテンツの一択です。
任意のコンテンツ名を入力し、マーカーは先ほど作成したのを選びます。
次にコンテンツファイルをアップロードします。
今回は、ペイントで作った下記画像をアップロードしました。
こちらもPNGのみなのでご注意ください。
それ以外はよくわからないですが、たぶんデフォルトのままでいいだろうw、ということで登録をクリック。
このようにコンテンツが作成されました。
スマホからWeb ARを使ってみる
あとは、「公開URL/一覧」の下にアイコンが3つ（URLをコピー/URLを開く/二次元コードを表示）ありますので、URLをコピーしてスマホに送ったり、QRコードを表示させてスマホで読み取るなどして使ってください。これ以降の操作は、先ほどのデモの操作と同じです。
※こちらも先ほどのバーコード読み取りアプリと同じで、パソコンのカメラでは動作しないため、必ずスマホを使ってください。
QRコードを選択すると下記のような画面になります。
みなさんもご自身のスマホで実際にこちらのQRコードをスキャンするとWeb ARを起動します。
その後、先ほどのバーコードの画像を映すと「300円だよ！」が表示されますのでお試しください。
※パソコンでバーコードを表示させると大き過ぎるため、スマホとPCの画面を50cmくらい離すとちょうど良い大きさになり認識されます。
QRコードをスキャンする方法が無い方は、下記のURLからWeb ARを起動してください。
下記は実際に使ってみた時の様子。
表示された金額がマーカーの上に保持されず、スマホの画面上に固定されたままになってしまうので、微妙っちゃぁ微妙ですが、最初のプロトタイプとしては上出来でしょう。
LESSARはこのようにとても便利な機能を無料で使えるだけでなく、名前にARが含まれている点も含めて完璧なツールですね。
まとめ
今回やりたかったのは、「スマホでARを使い、AR画面上で商品のバーコードを読み取ってバーコード内の商品情報の中の金額だけを読み出し、その商品の近くに金額だけを表示させる。スマホが移動してもその商品が見切れるまでは商品の近くに金額を表示し続ける。」というものでした。
一見すると簡単そうですが、実際にやったら2日間はかかるだろうなと思っていました。
ところが、実際にやってみることで本質と目的が明確になり、プロトタイプとして必要最小限の要件だけにそぎ落とすことで、取り掛かってから本ページに書かれている内容をわずか2時間で終えることができました。
Webアプリもバーコード読み取りもARも一度もやったことはありませんでしたが、世の中のノーコードツールが日々進化してくれているお陰でこんな短期間でできました。
まぁこれを実際のサービスとして進化させるにはJavaScriptやC++などを使って膨大な時間とコストをかけなければいけないようですがw、まずは、「理論上できるだろうが、実際にできるかどうかを確かめたい」という目的は十分達成できたと思います。
なお、今回は、PCはWindows、スマホはAndroidしかテストしていません。
ですので、Mac OSやiOSユーザーの方は本記事の通りにやっても上手くいかないかもしれません。
また、スマホもARに対応していましたが、古いスマホだとできないかもしれません。
上記に関してご理解いただけますと幸いです。
では、次は別のWebアプリでお会いしましょう！
Discussion