Web / Chrome API

この章でわかること: Webアプリは「ただの画面」ではありません。スマホやPCの機能を使った、アプリ顔負けの体験が作れます。プロトタイプの説得力を一段上げる引き出しです。

Webでできることの例

ブラウザには、スマホ/PCの機能を使う「窓口」が標準で用意されています。代表例を、 **許可(利用時にユーザーの同意が要るか)**の目安つきで並べます。

機能	何ができる	プロトタイプ例	許可
音声認識	話した言葉を文字にする	声で入力するフォーム	要(マイク)
音声合成	文字を読み上げる	読み上げ付きの案内	不要
カメラ	写真・映像を取り込む	その場で撮影・QR読み取り	要(カメラ)
位置情報	現在地を取得する	近くのお店を出す	要(位置)
ジャイロ/コンパス	傾き・方角を検知する	端末を傾けて操作	一部要
通知(Notifications)	端末に通知を出す	リマインド・お知らせ	要
共有(Web Share)	OS標準の共有シートを開く	「他アプリに送る」ボタン	不要
クリップボード	コピー/貼り付けを扱う	ワンタップでコピー	一部要
ファイル読み書き	ローカルのファイルを扱う	CSVを読み込む・保存する	操作時のみ
全画面(Fullscreen)	全画面表示に切り替える	没入デモ・キオスク風	不要
ドラッグ&ドロップ	要素をつまんで動かす	並べ替え・かんばん	不要
バイブレーション	端末を振動させる	操作の手応え(対応端末)	不要
オフライン(PWA)	電波が無くても開く	現場で使う点検アプリ(PWA)	不要

これらは特別なアプリのインストール無しに、ブラウザだけで動きます。ただしカメラ・マイク・位置情報・通知などは、利用時にユーザーの許可が必要で、多くはHTTPS(https://)でないと使えません(端末・ブラウザによる差もあります)。

論より証拠。下のボタンを押してマイクに話しかけると、ブラウザだけで文字起こしされます(Google Chrome 推奨。初回はマイクの許可を求められます)。

こんどは逆に、文字を声で読み上げます。文章を編集して、ボタンを押してみてください (こちらは許可なしで多くのブラウザで動きます)。

ボタンを押すと、ブラウザが**現在地(緯度・経度)**を取得します(初回は許可を求められます。取得した値はこの画面に表示するだけで、どこにも送信しません)。

「Webだからここまで」と思っていた線が、実はもっと先にあると知ると、提案の幅が広がります。顧客に「これ、Webでそのまま動きます」と見せられるのは強力です。

🔜 カメラ・音声合成・ジャイロなど、他のAPIのライブデモも順次追加予定です。