サイゼリヤ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 どうやって設定する問題
ソースコードは以下です。
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!
Author And Source
この問題について(サイゼリヤ1000円ガチャに触発されてサイゼリヤN円ガチャを作りました(Nuxt.js, Vuetify)), 我々は、より多くの情報をここで見つけました https://qiita.com/harhogefoo/items/348d89164c9c1bc91f08著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .