Cordovaでアプリストアを表示する方法
Cordovaで作ったアプリで、ボタンをタップするとGoogle PlayやApp Storeのアプリを起動して特定アプリのページを表示する方法について調べてみました。
HTMLのリンクで記述する方法
最初、
<a href="market://details?id=...">
のように記述してみましたが、うまくいきませんでした(Androidの場合)。
WebViewのセキュリティの制限でしょうか。
なので、HTMLのリンクで記述する方法はあきらめました。
プラグインを使用
cordova-plugin-market というプラグインを試してみたところ、うまくいきました。
https://github.com/xmartlabs/cordova-plugin-market
READMEに説明がありますが、Androidの場合は、
cordova.plugins.market.open('your.app.package')
iOSの場合は、
cordova.plugins.market.open('yourappname')
で使えます。
iOSの場合の注意点1
iOSの場合のパラメーターには、アプリ名の短縮名(App Store Short Link)を指定しなければなりません。
短縮名は、スペースや特殊文字の削除、小文字化、&を「and」に変更、などの変換を加えて作成します。
詳細は以下のページで説明されています。
Technical Q&A QA1633: Creating easy-to-read short links to the App Store for your apps and company
このページには記述されていませんが、アプリ名が日本語などの場合、URLエンコードする必要があります。
例えば、うちの会社で出しているアプリ「ゴールナビ - 仕事を成功に導くプランナー」の場合、
var appName = encodeURI('ゴールナビ仕事を成功に導くプランナー'); cordova.plugins.market.open(appName);
とやると、App Storeのページが開きました。
iOSの場合の注意点2
iOSではアプリ名を指定しているので、アプリ名を変更した場合、上記のコードも修正する必要があります。
アプリ名にキャッチコピーや説明を付けている場合だと、これは非常に使い勝手が悪いものになります。
cordova-plugin-market プラグインのソースを読むと、App Storeを開くのに、
itms-apps://itunes.com/app/
というURLを指定していますが、調べてみたところ、これを
itms-apps://itunes.apple.com/app/
に変えて、後ろにアプリIDを付けることでも、同じ動作を実現できることがわかりました。
例えば、
itms-apps://itunes.apple.com/app/id123456789
のように指定します。
これだとアプリ名を変更しても影響がないのでいいですね。
僕は結局、ソースを直接修正してID指定のみにして使っていますが、互換性を考えると、アプリ名が指定された場合とIDが指定された場合でURLを切り替えるのが良さそうです。
Objective-Cはまだマスターしていないのですが(もうSwiftのみで行きたい)、時間ができたらPull Requestを投げようかと思います。