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

# はじめに
以前、[無料でiOSとAndroidのストアにリダイレクトする](http://qiita.com/kbysta1/items/763ac52f889eb1a6c829)という記事を書いたのですが、OGP設定をできるようにしようと試みたところ、いろいろと進展がありましたので続報です。

# Google Apps Scriptでの実装
記事にもあるようにGoogle Apps Scriptで実装していたのですが、いざOGPを実装して[CardValidator](https://cards-dev.twitter.com/validator)を通したところ残念なエラーが遭遇しました。

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

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

# ホスティングサービス
前回の記事のコメントで頂いていたように[Netlify](https://www.netlify.com/)なども検討しましたが、「無料」「使い勝手が良さそう」「慣れている」という理由から、[GitHub Pages](https://pages.github.com/)を使うことにしました。

# 導入
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対応


```html
<!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>
```

[実際のコード](https://github.com/kbysta1/kbysta1.github.io/blob/master/index.html)

OGPに使う画像は1200x630で用意しました。
最初はアイコン画像（512x512）を使ったのですが、Facbookでは上下が思いっきり切れて表示されてしまいます。
画像の確認には[OGP画像シミュレータ](http://ogimage.tsmallfield.com/)を使いました。とても便利です。

# OGPのチェック
こちらでチェックしておけば、無駄な投稿をせずに表示を確認できます。

 * [twitter](https://cards-dev.twitter.com/validator)
 * [facebook](https://developers.facebook.com/tools/debug/sharing/)

# こんな感じで表示されるようになりました
![image](https://qiita-image-store.s3.amazonaws.com/0/162091/e69665a2-d27c-1986-71b7-a763b007c33d.png)

# 実際にリダイレクト
https://kbysta1.github.io/tenkyu/

# ついでにランディングページも作ってみた
GitHub Pagesを試しているうちに、気づいたらランディングページを作っていましたw
（なんでいままで静的HTMLにGASなんか使ってたんだ＼(^o^)／）

[実装](https://github.com/kbysta1/kbysta1.github.io)と[サイト](https://kbysta1.github.io/)です。

自分はデザインセンスが皆無なので[Bootstrap](http://getbootstrap.com/)を使いました。
[Bootstrapのexample](http://getbootstrap.com/getting-started/#examples)をまんま使っただけですが、それっぽく仕上がりました。

これだけ簡単にレスポンシブデザインに対応できるのはすごいですね。

# ついでに独自ドメインで運用
[GitHub Pages + CloudFlare で独自ドメインをSSL化する](http://qiita.com/noraworld/items/89dd85a434a7b759e00c)を参考にさせて頂きました。
httpsに対応できるんですね。すごい。

自分のサイトが出来上がった！素敵！
https://keepgamesimple.com/

次は多言語化に対応する予定。。。