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を投げようかと思います。