michimani.net

注文方法がわかりにくいココイチの料金を簡単に計算できるツールを作りました

2019-05-19

みなさん、ココイチでカレー食べてますか?
私は一時期 週3くらいのペースで食べるくらいココイチのカレーが好きです。(最近は頻度が減りましたが、相変わらず好きです)
ココイチの醍醐味といえば、カスタマイズですが、慣れてないと注文方法がわかりにくかったりします。

そんなココイチの注文をスムーズにできるようなツールを作りました。

作ったもの

ココイチ注文料金簡易カリキュレータ

ココイチが好きすぎてココイチの料金簡易計算ツール作りました。https://t.co/EZbRBJhtWv

— よっしーCBR789RR (@michimani210) May 16, 2019

できること

以下、注意点です。

なぜ作ったのか

冒頭にも書きましたが、私自身がココイチ大好きなので、ランダムでトッピングを選んでくれるツールがあればいいなーと思って作りました。
構想自体は去年の年末からあったんですが、怠慢により半年弱放置していました。

そんな矢先に サイゼリヤ1000円ガチャ が公開されて、あーやられたなーと思ってすぐにリリースしました。サイゼリヤ1000円ガチャさん、おしりに火をつけてくれてありがとうございました。

どんな技術で動いているのか

アプリケーション

最近 Vue.js を触り始めたので、その練習も兼ねて フロントエンドは Vue.js を使って書いてます。
サーバサイドはありません。フロントのみです。

Vue.js のプロジェクトは Vue CLI を使って簡単に作成できました。

$ vue create coco1.app.michimani.net

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files

設定は、 TypeScript を使う以外は基本的にデフォルトのままです。

アーキテクチャ

構成図は下図の通りです。

ココイチ注文料金簡易カリキュレータ 構成図

下記 AWS のサービスを使った、いたってシンプルな構成です。

アプリケーションは静的ファイルのみなので、 Route53 + CloudFront + S3 でアクセスできる簡単設計です。

デプロイは、CodeCommit への push をトリガーにして CodeBuild でビルド、S3 へデプロイ、完了後には Slack へ通知。というのを CodePipeline でやってます。

あと、トッピングのデータを json ファイルで保持しているので、ココイチのメニューページをクロールする Lambda を定期的に実行して、できるだけ最新のデータで計算できるようにしています。

困ったところ

Route53 + CloudFront で独自ドメインでアクセスできるようにするところで少しだけ困りました。

CloudFront にエイリアス設定した独自のドメインにアクセスしたら、Origin のバケット URL にリダイレクトされる。今までそんなことなかったのに、なんか設定の順番でも間違えた?

— よっしーCBR789RR (@michimani210) May 16, 2019

結果的に時間が解決してくれたんですが、 CloudFront で新たに Distribution を作ったときはステータスが Deployed になるまでおとなしく待つべきですね。Route53 での DNS 設定はそのあとにやったほうが良さそうです。

Vue.js については、データ管理を良しなにやってくれるのでビューの組み立てがめちゃくちゃ簡単だなという印象です。
ロジック自体は TypeScirpt で書けるので新たに覚えることはないですし、これくらいのシンプルなものであれば困るところは無かったです。
もっと複雑なサービスになるとデータ管理とかをしっかり考えないとダメなんでしょうね…。そうなると困る気がしてます。

まとめ

ココイチの注文料金を簡単に計算できるサービス 「 ココイチ注文料金簡易カリキュレータ 」 をリリースしたという話でした。
ぜひ使っていただいて、いろんなココイチのメニューを楽しんでください!

以上、よっしー (michimani) でした。