🌅
【React Native】QRコードから自分のアプリを起動する
はじめに
Expoでの開発を行っています。
QRコードをスキャンして自分のアプリを起動する方法をまとめました。
Expoのリンクの種類
まず、前提として自分のアプリに遷移するためのリンクは主に2種類あります。
- ディープリンク
- ユニバーサルリンク
ディープリンク
ディープリンクはmyappのような任意のカスタムスキームを使用します。
myapp://web-app.com/product
ディープリンクはたとえば、商品の広告をクリックすると、ユーザーのデバイスでアプリが開き、その商品の詳細を表示できます。ただし、アプリ未インストール時には動作しません。
ユニバーサルリンク
Android では App Links と呼ばれ、iOS では Universal Links と呼ばれます。
ユニバーサルリンクは、通常の HTTP および HTTPS スキームを使用します。
https://web-app.com/product
ユニバーサルリンクも同様に商品の広告をクリックすると、ユーザーのデバイスでアプリが開き、その商品の詳細を表示できます。ディープリンクとは異なり、ユーザーがアプリをインストールしていない場合、アプリに関連付けられた Web サイトに移動します。
その他の違いの比較
| 特徴 | ディープリンク | ユニバーサルリンク |
|---|---|---|
| リンク形式 | カスタムスキーム（例: myapp://） |
HTTP/HTTPSリンク（例: https://example.com） |
| アプリ未インストール時の動作 | リンク無効 | ブラウザでウェブページを開く |
| 設定の複雑さ | 簡単 | やや複雑（ドメイン所有権の確認が必要） |
| ユーザー体験 | 確認ダイアログが表示されることがある | スムーズ（確認ダイアログなし） |
| 主な用途 | QRコードやメール内リンク | 広告、ソーシャルメディアリンク、ウェブ連携 |
| サーバー設定の必要性 | 不要 | 必要 |
| オフライン対応 | 対応可能 | アプリがインストールされていれば対応可能 |
ディープリンクでQRコードから自分のアプリを起動する
今回はディープリンクを使用します。※ユニバーサルリンクの説明はしません。
app.jsonにスキーマを追加
app.jsonに以下の記述を追加します。
app.json
{
"expo": {
"scheme": "myapp"
}
}
追加したらビルドします。（ EASビルドでもDevelop Buildでも可能 ）
QRコードを生成
QRコード生成ツールでQRコードを生成します。※生成できれば方法はなんでも良いです。
実機でQRコードを読み取る
生成したQRコードをネイティブカメラで読み込みます。
リンクをタップすると自分のアプリに遷移できました。
QRコードだけでなく、safari等で myapp://にアクセスしても自分のアプリに遷移することができます。
まとめ
以上、QRコードから自分のアプリを起動する方法でした🖐️
Discussion