W4-1 センサーとスマホアプリ

現実世界の問題をアプリで解決しよう。

スマホには、カメラ・バイブ・ジャイロセンサー・マイクなど、現実世界とつながる多彩なセンサーが内蔵されています。この記事では、それらをブラウザの Web API から活用し、QRコード・触覚フィードバック・ジャイロセンサー・音声入力／読み上げ、さらに PWA（インストールできるWebアプリ） まで、現実世界で役に立つアプリの作り方を順を追って解説します。

💡 今回の講義内容の活用は任意です。企画書のアイデアを形にすることを最優先してください。

目次

• センサー入門
• スマホアプリ化（PWA）
• 今週の課題
• Appendix（もっと知りたい人へ）

センサー入門

このセクションでは、次の内容を扱います。

• Web API：ブラウザの手足
• QRコードを活用しよう
• 触覚フィードバックを活用しよう
• ジャイロセンサーを活用しよう
• 無料で使える音声入力／読み上げを使ってみよう

Web API：ブラウザの手足

ブラウザで出来ることは意外と多く、9軸センサ／バイブへのアクセス、Bluetooth制御、USB制御など、従来はネイティブアプリが必要だった機能も、実はブラウザだけで実現できます。

• Web API から利用できる機能の一覧を確認できる。
• Android × Chrome × マナーモードOFF で最も確実に動作する。

💡 本サンプルは、Windows / Mac / Android 上の Chrome で動作確認しています。 ⚠️ 一部のサンプルは、特定のデバイス／設定でのみ動作します。

QRコードを活用しよう

QRコードがあれば、チケット、荷物追跡など、アプリの可能性はもっと広がります。

1. v0 で「QRコードを使ったチケットアプリを作って」と入力する。
2. イベント作成と、QRコード表示ができるアプリが出来上がる。
3. 運営／利用者向けのページに分かれていない場合が多いため、必要に応じて、運営がスキャンするためのページも作ってもらう。

💡 このサンプルでは W3のデータベースを併用しています（動作サンプル）。

触覚フィードバックを活用しよう

視覚以外のフィードバックを提供できるのが、触覚フィードバックのメリットです。

1. v0 で「バイブを使って、触覚で楽しめるアプリを作って」と入力する。
2. こちらも Publish してから、URL をスマホで開く。
3. アプリのボタンをタップすると、それに応じてバイブが発動する（動作サンプル）。

⚠️ スマホをマナーモードにしたり、設定で無効にしている場合は発動しないため注意してください。 ⚠️ iPhone ではセキュリティ上の制限により、一部サンプルが動かないことがあります。動かない場合は、違う機種を使っているチームメンバーと協力して進めましょう。 💡 サンプルを動かす際に、通知設定等の設定変更が必要な場合があります。

ジャイロセンサーを活用しよう

ジャイロセンサーは、相対的な傾きを取得できる（安定） センサーです。GPS、マップ API との併用もオススメです。

1. v0 で「ジャイロセンサーを使ったコンパスアプリを作って」と入力する。
2. PC にはジャイロセンサーがついていないため、Publish してから URL をスマホで開くことを推奨する。
3. コンパスを起動などのボタンを押すと、スマホの向きに応じてコンパスが動くことが確認できる（動作サンプル）。

⚠️ iPhone では座標系の違いにより、回転が逆転することがあります。

無料で使える音声入力／読み上げを使ってみよう

デジタル技術を使い慣れていない人にサービスを使ってもらいたい場合、音声入力のような自然な操作体験が有効な場合があります。

• 今回使うのは、ブラウザに搭載されている音声入力／読み上げAI です。利用者のデバイス上で処理されるため、いくら使っても無料です。
• プロンプト例はこちらから確認できます（動作サンプル）。

⚠️ 一部デバイスでは動かない可能性があります。Chrome × MacBook で動作確認済みです。

スマホアプリ化（PWA）

「アプリだと思ったらブラウザ！？」——ここからは、インストールできるアプリの作り方を解説します。

アプリだと思ったらブラウザ！？ PWAとは

PWA（Progressive Web Application）とは

• 簡単に説明すると「インストール」できるWebアプリ。
• 軽量ブラウザ上に Web アプリを載せることで、単体動作を可能にしている。
• 一度の開発で PC / スマホ / Web の全てに対応できる注目の技術。

対応させる方法

• manifest.json など、アプリの情報を記載した数個のファイルを追加するだけ。
• HTML だけで書かれたシンプルなサイトでも適応可能。

【任意】インストールできるアプリを作ろう

1. v0 で「PWA に対応したスマホアプリを作って」と入力する。
2. Publish して、公開 URL を取得する。
3. サイトを開くと、PC なら検索バーの横にインストールボタンが表示され、スマホならポップアップでインストールが表示される。
4. インストールするとアプリ一覧に表示され、単体で実行できるようになる（動作サンプル）。

⚠️ インストール可能の判定条件がスマホは厳しいため、先に PC でテストしてください。動かない場合は、生成された manifest.json を ChatGPT に分析してもらいましょう。 💡 インターネット接続が前提です。オフライン実行は内部サーバーを実装すれば可能です。

今週の課題

今週のゴール：スマホのセンサーを活かして、現実世界で役立つアプリに挑戦しよう。

Week 4 前半で学んだ Web API・各種センサー・PWA を、ぜひ自分の作品に取り入れてみてください。各機能の活用は任意ですので、企画書のアイデアを形にすることを最優先しましょう。

Appendix：もっと知りたい人へ

用語解説

⚠️ 免責事項：分かりやすさを優先しているため、厳密な定義と異なる場合があります。

用語	解説
Web API	ブラウザが提供する機能群。センサーやバイブ、Bluetooth、USB などにブラウザから直接アクセスできる。
センサー	スマホやPCに内蔵された、現実世界の情報を取得する装置（カメラ、ジャイロ、マイクなど）。
QRコード	情報を二次元のパターンに埋め込んだコード。カメラで読み取ってチケットや追跡に利用できる。
触覚フィードバック	バイブレーションなどで、視覚以外の感覚を通じて利用者に情報を伝える仕組み。
ジャイロセンサー	デバイスの相対的な傾きを取得するセンサー。コンパスや姿勢検出に利用できる。
音声入力／読み上げ	ブラウザに内蔵された、音声をテキスト化する／テキストを読み上げる AI 機能。デバイス上で処理されるため無料。
PWA	Progressive Web Application の略。インストールできる Web アプリで、PC／スマホ／Web を一度の開発で対応できる。
manifest.json	アプリ名やアイコンなど、PWA の情報を記載する設定ファイル。