サイゼリヤ1000円ガチャに触発されてサイゼリヤN円ガチャを作りました(Nuxt.js, Vuetify)

経緯

画期的なアイディアのサイゼリヤ1000円ガチャを紹介させてください！

サイゼリヤ1000円ガチャ
https://saizeriya-1000yen.herokuapp.com/

サイゼリヤ1000円ガチャのQiita記事
https://qiita.com/marusho_summers/items/a2d3681fac863734ec8a

私自身サイゼリヤをよく利用しますし、弊社では週1ペースでサイゼリヤに行っています。
参考記事: https://praha-inc.hatenablog.com/entry/2019/05/24/193302

そこで、サイゼリヤへ足を運んだ時に早速使ってみました。

使ってみた

(...おわかりいただけるだろうか...)

無慈悲にランダムな品目が出てくること、これもガチャの楽しみだと思います！

Twitterも #サイゼリヤガチャで盛り上がっていますね！

欲が生まれた

ただ実際にアプリを使用したユーザとして
以下の欲求が生まれました。

• 主菜・副菜・サラダなど、バランスの良い食事が取りたい
• ボタン増やしてみたらどうだろう？(500円ガチャ、1500円ガチャ)

そして、今回本家を真似る形になってしまいますが
どうしてもこの機能を実装したい欲とこれをSPAで実装したい欲が高まり、、
私はサイゼリヤガチャによってゾーンに連れて行かれてしまいました。
ゾーンとは: http://zone-training.jp/zone-state.html

作ったもの

今回作ったものはこちら
サイゼリヤN円ガチャ
https://saizeria-gacha.web.app/

※フッターに本家へのリンクを掲載しています。

今回のリポジトリはこちら
https://github.com/harhogefoo/Saizeriya_1000yen
（本家とはだいぶ違う形になってしまったのでリポジトリはフォークするべきではなかったかも）

今回やったこと

• SQLiteで管理されているメニュー情報をJSONファイル化
• JSONファイルをGitHub Pagesにデプロイする Travis CI を記述
• Nuxt.jsで0から実装し機能を追加

それぞれに関して説明していきます。

なぜGitHub PagesにJSONをホストするのか？

サイゼリヤのメニューがオープンなAPIで配信されていれば
新しいアイディアを思いついた誰かがサクッと作ってくれる世界になるのではないかと思いました。
また今回SPAで実装するにあたって、JSONを取得して使いたかったことも理由の1つです。

SQLiteで管理されているメニュー情報をJSON化

node.jsのsqlite-jsonライブラリを使用しました。
SQLiteからJSONを出力してくれます。最高です。

ソースはこちら
https://github.com/harhogefoo/Saizeriya_1000yen/tree/develop/generator

sqlite-json ../server/sensai/saizeriya.db --table menu -o ../docs/menu.json

JSONファイルをGitHub Pagesにデプロイする Travis CI を記述

DBが更新されるたびに毎度JSONを書き換えるのは面倒！なので
publicなリポジトリなら無料で使えるTravis CIを使い、GitHub Pagesにホストしてみました。

ホストすると以下のように見れます。
https://harhogefoo.github.io/Saizeriya_1000yen/menu.json

やっていることは、developブランチに変更があった場合、masterブランチにコミット&デプロイするだけなのですが
多々ハマったので別記事にしてまとめる予定です。

ハマった内容を簡潔に書いておくと

• dist: trusty を指定しないとGitHub Pagesへのデプロイが失敗する
• masterブランチに無限デプロイを走らせてしまった
• $GITHIB_TOKEN どうやって設定する問題

ソースコードは以下です。

.travis.yml

dist: trusty
language: node_js
node_js:
- '11'
script: sh -c 'cd generator && yarn && yarn generate'
cache: yarn
branches:
  only:
  - develop
deploy:
  provider: pages
  skip_cleanup: true
  github_token: $GITHUB_TOKEN
  keep_history: true
  target_branch: master
  on:
    branch: develop

※ 後述しますがこの章には悲しいオチが待っています。

Nuxt.jsで0から実装し機能を追加

ここまでで下地ができました。
Nuxt.js好きです。あとは書くだけ。

ソースコードはこちら。1日で書いた突貫のコードなので温かい目で見てください:
https://github.com/harhogefoo/Saizeriya_1000yen/tree/develop/frontend

悲しいオチについて

端的にいうと、GitHub PagesにデプロイするCIが無駄になりました

上記のディレクトリをよく見ると分かるのですが
menu.jsonは Nuxt.jsが配置されている frontendディレクトリのstaticディレクトリに配置しています。
つまり、GitHub PagesにホストしたJSONを見に行っていません。

CORSのお話

理由は、SafariのPreflightリクエストをGitHub Pagesのホスト先で受け付けなかったのです。
Google Chromeでデバッグをしていたのでここに気づいたのは公開直前でした。。

恐らくSafariの仕様だと思うのですが、別ドメインにリクエストを投げる前にOPTIONSメソッドでそのドメインにリクエストを投げています。
ここで正常なレスポンスとCORSが許可されたヘッダーが返ってくれば、GETリクエストを投げてくれるはずのですが...
GitHub PagesではOPTIONSを受け付けていないようでした。

Google Chromeでは、Preflightリクエストを飛ばしていないので開発中問題なく動いていたのだと思います（条件によってPreflightリクエストを飛ばす/飛ばさないがあるらしい）。

GitHub Pagesは Access-Control-Arrow-Origin: * が設定されているので大丈夫ってサクッと調べた時に書いてあったのになあ。。

これに関しては、S3に置いたりするしかないのでしょうか。

まとめ

やったことをざっとまとめましたが、こうして私の開発欲はようやく落ち着きました。

開発期間は1日。

とっても楽しかった。個人開発は楽しいですね。

本家となった
「サイゼリヤ1000円ガチャ」
https://saizeriya-1000yen.herokuapp.com/

インスパイアされて今回作った
「サイゼリヤN円ガチャ」
https://saizeria-gacha.web.app

ぜひ使ってみてください。

サイゼリヤ1000円ガチャに敬意を込めて。

Happy Coding!