S3でJavaScriptを動かしてみる - ただのアニメ感想ブログ

小ネタを1つ。昔書いたと思ったのですが、ブログ内を検索しても出てこなかったので。
AWS S3にはウェブサイトホスティングと言う機能があります。
これによって簡単にホームページを作って公開できるのですが、あくまで公開できるのは静的なHTMLだけです。

ただ、ユーザ側で動くものは有効なので、JavaScriptは動かすことができます。
試しにブラウザのエージェントによってPC用のページとSP用のページを出し分けるサイトをS3で実現してみます。

作成したファイルは以下の通り。

・index.html

<script type="text/javascript">
  if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
    // スマホ用のページにリダイレクトする
    location.href = '/sp/index_sp.html';
  }
</script>
<html lang = "ja">
<head>
  <title>PC版TOPページ</title>
</head>
<body>
  <h1>PC用のTOPページです。</h1>
</body>
</html>

・index_sp.html

<script type="text/javascript">
  if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
  }else{
    // PC用のページにリダイレクトする
    location.href = '../index.html';
  }
</script>
<html lang = "ja">
<head>
  <title>SP版TOPページ</title>
</head>
<body>
  <h1>SP用のTOPページです。</h1>
</body>
</html>

これをS3上に配置します。
ソース内のパスに合わせて、以下のように配置します。
（S3のウェブサイトホスティングの設定に関しては説明を割愛します）

f:id:triobog:20180821000157j:plain
f:id:triobog:20180821000224j:plain

動作確認。
まずPCでトップページにアクセスしてみます。

f:id:triobog:20180821000414j:plain

次にSPのページを参照してみます。

f:id:triobog:20180821000559j:plain
f:id:triobog:20180821001910j:plain

PCのページにリダイレクトされました。
逆にSPでPC版のTOPにアクセスすると、以下のようにSP版のページにリダイレクトされます。

f:id:triobog:20180821062821j:plain

今回はS3だけで完結するようなものを作りましたが、API Gateway＋Lambdaと組み合わせればRDSやDynamoDBにデータを書き込む事ができるので、できることはもっと広がりそう。

そんな訳で、今日はこれまで。
それでは、ごきげんよう。