FireBaseを使って、スーパー銭湯の日替わり湯を見るWebアプリを作成してみた

firebaseを利用したWebアプリ Webプログラミング

趣味の温冷交互浴を実施するために、週末は和歌山市周辺のスーパー銭湯に足を運んでいます。最近は「いつも行くスーパー銭湯」を固定せず、その日の気分と日替わり湯が何かを考え、その日に行くスーパー銭湯を選んでいます。

日替わり湯というのは偶数日と奇数日でお風呂の種類が入れ替わることで、店によってはサウナの種類が多い日などがあります。

そんな日替わり湯を、近隣店舗分だけでも手軽に見れたらいいな…と思い、いま流行りのFirebaseを使った日替わり湯確認Webアプリを作ってみました。

HTML、CSS、jQueryを使用して実装

仕事が早く終わった日の空き時間を利用して実装をすすめ、実質2時間程度で完成しました。

HTMLCSSjQueryを使用しています。

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>今日の日替わり湯</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <header class="site-header">
    <div class="container text-center">
      <h1>今日の日替わり湯</h1>
      <p id="today"></p>
    </div>
  </header>
  <main>
    <div class="container p-4 text-center">
      <h2>きらくゆ和歌山店</h2>
      <ul class="border list-unstyled p-3" id="kirakuyu_wakayama">
      </ul>

      <h2>川辺の湯</h2>
      <ul class="border list-unstyled p-3" id="kawanabenoyu">
      </ul>

      <h2>幸の湯</h2>
      <ul class="border list-unstyled p-3" id="sachinoyu">
      </ul>

      <h2>平野台の湯</h2>
      <ul class="border list-unstyled p-3" id="hiranodainoyu">
      </ul>
    </div>
  </main>
  <footer>
    <div class="container">
      <p class="mb-0 text-center">©️ 2019 redretriever</p>
    </div>
  </footer>
  <script src="https://www.gstatic.com/firebasejs/5.8.6/firebase.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script src="./js/app.js" charset="utf-8"></script>
</body>
</html>

CSS

body {
  background: #eaf4fc;
}

header {
  background: #17184b;
  color: #fff;
}

footer {
  background: #a22041;
  color: #fff;
}

jQuery

// Initialize Firebase
var config = {
  apiKey: "<apiKey>",
  authDomain: "<authDomain>",
  databaseURL: "<databaseURL>",
  projectId: "<projectId>",
  storageBucket: "<storageBucket>",
  messagingSenderId: "<messagingSenderId>"
};
firebase.initializeApp(config);

//設定
var bathSetting = {
  'odd' : {
    'kawanabenoyu':['炭酸風呂','テルマリウム','歩行浴','壺風呂'],
    'kirakuyu_wakayama':['癒晏洞','霧のサウナ','塩サウナ','炭酸風呂','露天風呂'],
    'sachinoyu':['檜風呂','壺風呂'],
    'hiranodainoyu':['チムジルバン','オンドル','壺風呂','露天風呂'],
  },
  'even' : {
    'kawanabenoyu':['岩風呂','檜風呂','塩サウナ','チムジルバン','壺風呂'],
    'kirakuyu_wakayama':['露天風呂','炭酸風呂','サウナ(大)'],
    'sachinoyu':['岩風呂','壺風呂'],
    'hiranodainoyu':['炭酸風呂','塩サウナ','壺風呂','岩風呂','檜風呂'],
  }
}


$(function (){
  //日を取得
  var today = new Date();
  var year = today.getFullYear();
  var month = today.getMonth();
  month = month + 1;
  var date = today.getDate();

  $('#today').append(year + '/' + month + '/' + date);

  var dateType = '';

  //偶数日か奇数日か判定
  if(date % 2 === 0) {
    dateType = 'even';
  }else{
    dateType = 'odd';
  }

  //各店舗の情報を取得、表示
  $.each(bathSetting[dateType], function(shopIndex, shopValue){

    //各店舗ごとの情報
    var shop = bathSetting[dateType][shopIndex];

    $.each(shop, function(index, value){
      $('#' + shopIndex).append('<li>' + value +'</li>');
    })
  })


});

Firebaseにデプロイ

作成したHTMLなどをデプロイするには、まずFirebaseツールのインストールが必要になりました。また、下記の内容はあらかじめFirebaseのプロジェクトを作成してから行なっています。

Firebaseツールのインストール、プロジェクト設定ファイルの初期化、デプロイ

Firebaseツールは下記のコマンドでインストール可能ですが、あらかじめNode.jsのインストールが必要となりました。

npm install -g firebase-tools

Node.jsのインストールを終え、Firebaseツールをインストールしようとしたところpermission deniedのエラーが出て、Firebaseツールのインストールができませんでしたが、下記記事を参考にpermissionを設定することで、上手くインストールできました。

Firebaseツールをインストール後はスムーズにデプロイまで進むことができました。

流れとしてはFirebaseツールでのログイン、

firebase login

プロジェクト設定ファイルの初期化、

firebase init

そしてデプロイとなりました。

firebase deploy --project xxxx  

画面イメージ

デプロイしたWebアプリの画面イメージがこちらになります。

firebaseを利用したWebアプリ

交互浴に行く前に、さっとiPhoneで各店舗の日替わり湯を確認できるようになりました。おかげで「今日はどこそこの日替わり湯ってなんだっけ?」がなくなり、交互浴が捗るようになりました。

今回は静的なファイルのホスティングのみにFirebaseを利用したのですが、ユーザ認証などサーバーサイドでおこなう処理が簡単に実装できるようですので、時間を見つけて色々と試していきたいとおもいます。