わい「次の祝日はいつかなーっと」
— だいぱんまん🐶技術ブログ (@donchan922) 2019年5月6日
画面「7月15日(月)海の日まであと、69日10時間47分22秒」
わい「どんだけ〜」
そんなWebアプリ「次の祝日までどんだけ〜」を作りました☺️皆さんも一緒に次の祝日がくるのをカウントダウンして待ちわびてやりましょう！（絶望の69日後）https://t.co/sIvmI897Ee pic.twitter.com/lEWAKYH7Ca
今年のGWは夢の10連休でしたが、それも今日で終わり。なんとなく次の祝日を調べてみたらなんと69日先。こうなりゃもう、次の祝日までカウントダウンして思う存分待ちわびてやろうと思い、勢いでWebアプリケーション「次の祝日までどんだけ〜」を作成しました
Webアプリケーション「次の祝日までどんだけ〜」
次の祝日までをカウントダウン形式で表示してくれるWebアプリです。文字だけだと味気ないので、祝日ごとに画像を表示しています。
画像はすべていらすとやのものを使わせていただきました。どの祝日の画像もすべて用意されていて驚きました。いらすとやさんすごい。。ただ、2020年から「体育の日」が「スポーツの日」に変更されるのですが、さずがにまだスポーツの日の画像は用意されていませんでした（用意してほしいですー
）。
技術の話
ここからは少し真面目に技術のことについて書いていきます。
使用技術
- フロントエンド
- Thymeleaf
- JavaScript
- CSS
- バックエンド
- Java
- Spring Boot
- Gradle
- LomBok
- デプロイ
- Heroku
いつも個人開発はRuby on Railsで作るのですが、業務でJavaを使っていることもあり勉強がてら上記構成でWebアプリケーションを作成しました。Spring Boot、慣れればサクッとWebアプリが作れますね。
デプロイ先はおなじみHerokuです。なんせデプロイが簡単なのです。どれくらい簡単かというと、以下のようにたった3行のコマンドを実行するだけです。
# たった3行でHerokuにデプロイできました
$ heroku login
$ heroku create
$ git push heroku master
ちなみに、画面がシンプルなのでCSSフレームワーク（Bootstrapなど）は使っていません。レスポンシブ対応はCSSをちょこちょこっと書いて行いました。ですので、スマホでも見ていただけると嬉しいです
ドメイン名が「next-holiday-dondake.herokuapp.com」とHerokuのデフォルトになっているのは見逃してください
気が向けば独自ドメインを取得しようと思います。
仕組み
- 祝日のリストを用意する
- 内閣府が提供している国民の祝日のCSVを利用
- 祝日ごとの画像を用意する
- いらすとやを利用
- 次の祝日の判定ロジックを組み込む
- 祝日のリストを読み込み、現在日時から直近の祝日を取得
- 画面を表示する
- Thymeleafを使って次の祝日情報（名前、日付、画像名）をViewに返す
- JavaScriptでカウントダウンを作る
こうやって仕組みを並べてみると、たくさんのサイトにお世話になっているなと感じますオリジナルの仕組みとしては、「次の祝日の判定ロジックを組み込む」くらいですね。
リリース最優先で開発を進めたため、コードが汚かったり、テストコードを書いていなかったりします。ソースは公開していますので、プルリクお待ちしています
まとめ
連休明けは仕事や学校に行くのがおっくうになるかと思いますが、次の祝日は必ずや訪れます。皆さんも一緒に次の祝日がくるのをカウントダウンして待ちわびてやりましょう！（絶望の69日後）