はじめに
個人ゲームを作っていてTwitterなんかを始めると、iOSとAndroidのストアページのリンクを両方貼っていたら140文字になんか収まらなくなりますね。
本来ならランディングページを作って、AppStoreとGooglePlayのバナーを貼るのがベストなんでしょうが、デザインを作る余裕もないし、サーバーなんか持っていない！
だけど、とりあえず1つのURLでAppStoreとGooglePlayのストアに飛ばしわけたいというケースはそこそこあるんじゃないでしょうか。
技術的には端末のUserAgentをみてリダイレクトするだけなんですが、無料という縛りが入ると、意外と選択肢は少なかったです。今回はクライアントサイドのJavaScriptで実現しました。
検討した候補
- Heroku
- 無料だとスリープするのが必須とかで、スリープしないためにCronでジョブ実行するとか本末転倒な感じだったので断念
- 無料のレンタルサーバー
- 意外と使えるのが見つけられず。お名前ドットコムでドメイン運用してますが、さすがに無料のサーバーは提供していないんですね。
- Google Site
- 任意のJavaScriptが実行できませんでした。。。
- Google Apps Script
- これでいけました
実装方法
Google Apps Script をWebアプリケーションとして一般公開することで無料で実現できます。まずはGoogle Driveからスクリプトを作成しましょう。
コード
コード.gs
function doGet(e) {
var t = HtmlService.createTemplateFromFile('index.html');
return t.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form action='https://itunes.apple.com/app/idxxxxxx' method='GET' id='ios'>
<input type="hidden" name="mt" value="8">
</form>
<form action='https://play.google.com/store/apps/details' method='GET' id='android'>
<input type="hidden" name="id" value="com.example.xxxxx">
</form>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
if((navigator.userAgent.toLowerCase().indexOf("iphone") > -1) || (navigator.userAgent.toLowerCase().indexOf("ipod") > -1) || (navigator.userAgent.toLowerCase().indexOf("ipad") > -1)) {
$("#ios").submit();
} else if ((navigator.userAgent.toLowerCase().indexOf("android") > -1)) {
$("#android").submit();
} else {
$("#ios").submit();
}
});
</script>
</body>
</html>
※com.example.xxxxはGoogle Play、idxxxxxxはApｐStoreのidに変更してください。
あとは公開→Webアプリケーションとして公開にてユーザー全員に公開すれば完了です。
GASだとURLが長くなってしまうので、短縮URLを使うのが良いです。
https://goo.gl/
Googleならアクセス履歴も確認できます。
実際の挙動はこんな感じです