More than 5 years have passed since last update.

無料でアプリのランディングページやリダイレクトページを作る

Last updated at 2017-03-28Posted at 2017-03-28

はじめに

以前、無料でiOSとAndroidのストアにリダイレクトするという記事を書いたのですが、OGP設定をできるようにしようと試みたところ、いろいろと進展がありましたので続報です。

Google Apps Scriptでの実装

記事にもあるようにGoogle Apps Scriptで実装していたのですが、いざOGPを実装してCardValidatorを通したところ残念なエラーが遭遇しました。

ERROR: Fetching the page failed because it's denied by robots.txt.

robotからのアクセスを拒否しているようなのでGASは断念しました／(^o^)＼

ホスティングサービス

前回の記事のコメントで頂いていたようにNetlifyなども検討しましたが、「無料」「使い勝手が良さそう」「慣れている」という理由から、GitHub Pagesを使うことにしました。

導入

https://pages.github.com/
の手順のままですね。私の場合は「Project site」→「Choose a theme」を参考にしましたが、テーマは使い方がイマイチわからなかったので、結局スクラッチでHTMLを書きました。

リポジトリとページのURLは次のような関係になっています（usernameとrepositoryが任意）
GitHub: https://github.com/username/repository
Pages: https://username.github.io/repository
※SettingsページにPagesへのリンクがあります。

リダイレクトページの実装

前回の記事からの差分は以下の通りです。

jQueryを使わないようにした
OGP対応

<!DOCTYPE html>
<html>
  <head>
    <meta property="og:title" content="タイトル名" />
    <meta property="og:url" content="https://username.github.io/repository/app_title/index.html" />
    <meta property="og:type" content="game" />
    <meta property="og:image" content="https://username.github.io/repository/image/image.png" />
    <meta property="og:site_name" content="site_name" />
    <meta property="og:description" content="説明文" />
  </head>
  <body>
  
    <form action='https://itunes.apple.com/app/idxxxxx' 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.keepgamesimple.xxxxx">
    </form>  
  
    <script type="text/javascript">
    window.addEventListener("DOMContentLoaded", function(){
      if((navigator.userAgent.toLowerCase().indexOf("iphone") > -1) || (navigator.userAgent.toLowerCase().indexOf("ipod") > -1) || (navigator.userAgent.toLowerCase().indexOf("ipad") > -1)) {
        document.getElementById("ios").submit();
      } else if ((navigator.userAgent.toLowerCase().indexOf("android") > -1)) {
        document.getElementById("android").submit();
      } else {
        document.getElementById("ios").submit();
      }
    }, false);
    </script>
  </body>
</html>