1. アプリは現実世界の問題を解決する手段

ここまでのWeekでは、AIを使ったコード生成やデータベースの活用を学んできました。しかし、アプリの本質は「現実世界の問題を解決すること」にあります。画面の中だけで完結するアプリよりも、カメラやセンサーを通じて現実世界と繋がるアプリの方が、ユーザーにとって本当に価値のあるものになります。

今週は、スマートフォンに内蔵されたセンサー群をWeb APIから活用する方法を学び、さらにPWA技術でアプリとしてインストール可能にするところまでを扱います。

2. センサー入門

Web APIs: アプリの手足

ブラウザで出来ることは意外と多く、9軸センサ、バイブレーション、Bluetooth、USB制御など、従来ネイティブアプリが必要だった機能もブラウザから利用可能になっています。これらは Web API として標準化されており、JavaScriptから呼び出すことができます。

QRコードを活用しよう

QRコード を使えば、チケット管理、荷物追跡、イベント受付など、現実世界の情報をアプリに取り込む多くのユースケースに対応できます。ブラウザからカメラにアクセスするには MediaDevices API を使用し、読み取りには jsQR などのライブラリを組み合わせます。

1. プロンプトを入力する: v0で「QRコードを使ったチケットアプリを作って」と入力します。
2. 生成結果を確認する: イベント作成とQRコード表示ができるアプリが生成されます。
3. 運営スキャン機能を追加する: 必要に応じて「運営がスキャンするページも作って」と追加指示を出します。

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

ジャイロセンサー を使えば、スマートフォンの傾きや向きを検知し、コンパスや水平器といった実用的な機能を実現できます。ブラウザでは DeviceOrientation API を通じて端末の姿勢情報（alpha / beta / gamma）を取得できます。

1. プロンプトを入力する: v0で「ジャイロセンサーを使ったコンパスアプリを作って」と入力します。
2. スマホで開く: PCでもコンパスは表示されますが、センサーが搭載されていないため、Publish してスマホで開きます。
3. 動作を確認する: ボタンを押すとスマホの向きに応じてコンパスが動きます。

バイブを活用しよう

Vibration API を使えば、視覚だけでなく触覚によるフィードバックをユーザーに提供できます。ゲームやアラートなど、ユーザー体験を豊かにする手段として有効です。

1. プロンプトを入力する: v0で「バイブを使って、触覚で楽しめるアプリを作って」と入力します。
2. スマホで開く: Publish してスマホのブラウザで開きます。
3. 動作を確認する: ボタンをタップするとバイブレーションが発動します。

3. スマホアプリ化

アプリだと思ったらブラウザ!?

PWA（Progressive Web Application）とは、「インストール」できるWebアプリのことです。軽量なブラウザ上にWebアプリを載せることで、単体アプリとしての動作を可能にします。一度の開発でPC・スマホ・Webの全てに対応できる注目の技術です。

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

実際にPWA対応のアプリを作成し、インストールできることを確認しましょう。

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