P77~P83 第3章 APIでネイティブアプリ並の機能を実装する

カメラを使って写真を撮る

Media Capture and Streams APIのMediaDevices.getUserMedia メソッドを使用すれば実現可能
(実装コードは誌面に記載あるが割愛)

QRコードを読み込む

Shape Detection APIという、ブラウザで顔・バーコード・テキストの検出が可能となるAPI
2021年10月時点では、Google Chromeと一部のブラウザしかまだ対応していない
使用するには、GoogleChromeのアドレスバーで「chrome://flags」と入力して表示される設定画面で、「Experimental Web Platform featues」という項目をEnableにする必要がある。
(サンプルコードは誌面に記載あるが割愛)

マイクの音を読み込み視覚化する

Web Audio APIがWebアプリ上で音声を扱うためのAPI
(サンプルコードは誌面に記載あるが割愛)

入力した文字をブラウザで読み上げ再生

Web Search APIはm音声認識音声合成といった、音声に関する機能を提供するAPI
その中のSpeechSynthesis APIを使用すれば、音声ファイルを用意しなくても、入力した内容を読み上げ可能
(サンプルコードは誌面に記載あるが割愛)

プッシュ通知の実装

PWAを導入したいという話の中で、プッシュ通知は要望の多い機能である
2021年10月現在、iOSでのWebプッシュはサポートされていない。
Webプッシュを独自実装すると複雑な実装になるため、誌面ではOneSignalというサービスを紹介
独自で実装する場合は、web.devのプッシュ通知に関する記事などが参考になる
(OneSignalの利用方法やサンプルコードは誌面に記載あるが割愛)

終わりに