🍣

【RN】アプリストアを開く

に公開
Android
iOS
JavaScript
React Native
TypeScript
tech

概要

今回はReact Nativeで、App StoreやGoogle Play Storeなどのアプリストアに遷移する方法について紹介します。
アプリストアに遷移する目的としては、ユーザに対してアプリのレビューを促したい場合や、強制アップデートを行わせたい場合などが挙げられます。

前提：そもそもアプリストアのURLはどうなっているか

iOSないしAndoridを使う場合、ホーム画面からApp StoreやGoogle Play Storeのアプリケーションを立ち上げて、その中でキーワードやジャンルなどからアプリを検索するため、あまりURLは意識されません。

今回react-native-app-linkというライブラリを使いますが、その上でURLの形式の理解が必要なので、それぞれのストアのURLを確認しておきましょう。

App Storeでは

例えばLINEのApp StoreのURLは以下のようになっています。

https://apps.apple.com/jp/app/LINE/id443904275

ここでポイントとなるのはjpとLINEとid443904275です。
jpは国を表しており、usやcaなどに置き換えることで、表示言語を切り替えることができます。

LINEはアプリの名称です。
これはApp Storeに表示した時の名前なので、英数字以外が入る場合もあります(例えばApp Storeで「LINE(ライン)」としていた場合は、その文字列がそのままURLに入ります)。

最後にid443904275ですが、これはApp Storeがアプリに割り振った一意なIDです。
特に"id"を除いた数字部分はApple IDと呼ばれ、App Store Connectの管理画面から【App情報】を選択することで表示できます。

Google Play Storeでは

一方Google Play StoreですがLINEのURLは以下のようになります。

https://play.google.com/store/apps/details?id=jp.naver.line.android&hl=ja&gl=US

ポイントはjp.naver.line.androidの部分で、これはGoogle Play Store上でアプリを一意に識別するIDになります。
※よくパッケージ名と呼ばれてるやつです。大概はリバースドメインを指定します。

react-native-app-link

アプリストアのURLが分かったところで、今回使用するライブラリについて紹介します。
react-native-app-linkです。

https://github.com/FiberJW/react-native-app-link

インストール

tsを使わない場合は@typesは不要です。

yarn add react-native-app-link
yarn add --dev @types/react-native-app-link

使い方

使い方はいたってシンプルで、openInStore()にアプリURLの構成に必要な情報を渡すだけです。
ここで引数にした値を元に、iOSならApp Storeの、AndroidならGoogle Play Storeの対応したURLが組み立てられて、表示されます。

import AppLink from 'react-native-app-link';

// 対象のアプリ(LINE)のストアを開く
AppLink.openInStore({
    // iOS用、アプリ名
    appName: 'LINE',
    // iOS用、Apple Id
    appStoreId: 443904275,
    // iOS用、国
    appStoreLocale: 'jp',
    // Android用、パッケージ名
    playStoreId: 'jp.naver.line.android',
})
.then(() => {
　　// 成功時処理
})
.catch(err => {
　　// エラー処理
});

まとめ

今回はReact Nativeアプリでアプリストアを開く方法について紹介しました。
基本的にはそのアプリ自身のストア画面を呼び出すために用いられますが、例えば「いくつか関連アプリがあり、それらのインストールを促したい場合」場合でもreact-native-app-linkなら対応できます。

今回の内容が役立てば幸いです。

Discussion