バーコード読了目安:15分Nuxt.jsで開発しているWebサービスにバーコードリーダ機能をつけようとしたら、いろいろハマったので、そのときの備忘録。利用したのはQuaggaJS。2019動きとしては、こんな感じでシンプル。ボタンを押すと、モーダルが開いて、カメラ移動バーコードを読み取り終えると、終了してPageに結果を返すQuaggaJSを使ってみる使い方はこんな感じ。quaggaバーコードリーダモーダルはこんな感じCSSにはBulmaを利用してます。}}</style>ページ側でpropのactiveを切り替えて、モーダルの表示をすればOK。́ω`)videoやcanvasなどは、Quaggaが生成するよう。打つか投げるか以下のようなローカルで起動したNuxt.jsをhttps化する方法もあるけど、ステージング環境のFirebaseプロジェクトを用意して対応。最初はmounted内で行っていた。300で指定してみたところ、なかなか検出されず。゚д゚)!GitHubにあるexampleのquaggaJS/live_w_locator.htmlを見てみると、CSSで画面サイズとかを設定しているようなので、そちらを参考にした。defined以下の記事を見てみると、iOSのPWAでは制限があるらしい...iOSのPWAでは表示モードがstandaloneの場合にカメラを開くことができない。Qiitaなんてこった。ほんとうに残念である。Nuxt.jsでOSに応じてmanifest.jsonを切り替える方法としてはこんな感じ。"browser"にしただけのmanifest_ios.jsonを作成する。"買った本を読まずに積んでおく「積読」、全部でいくらか知っていますか?「積読ハウマッチ」は積んである本の総額がわかる書籍管理サービスです。以下のplugins/pwa-setup.tsを作成。作ったプラグインをnuxt.config.tsに設定。その他、もろもろ上記以外のQuaggaJSの使い方や開発で役立ったことを五月雨に。Qiitaバーコードリーダっぽく四角い枠をつけるこれ。}}</style>解析中っぽく緑の枠を出す読み取っている箇所を表示できるよう解析中のコールバックがある。こちらの記事を参考に、解析中の状況を表示する。́ω`)ただ、getUserMedia()にも、iOSのPWAには罠が。Kotlin/Python/Swift/Unity/Java/Haskell/DDDhttps://t.co/X3UXpmkJvpCrieitは個人で開発中です。どんな軽い内容でも嬉しいです。Crieitを作ろうと思ったかまた、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!ボードとは?関連記事Vue/Nuxtのアニメーションするときに参考にしたところNuxt.jsで編集中に、ページ移動やページを閉じるときに警告を出すやつSVGでOGP用のPNG画像を生成してみる(折り返し文字、画像埋め込み、PNG化)[個人開発]大喜利サービスを5日でつくってわかったことスワイプで気になるAV女優を探すことができる「AVキャッチャー」というサービスをリリースしました。