カレーは好きですか？
私は大好きです。
カレー専用のInstagramもやってます。(https://www.instagram.com/tawa.tawa.tawa/)
プログラミングの練習も兼ねて、好きなカレーを題材に何か作れないか考えました。
うーーーーーーん
そうだ！メニューガチャアプリを作ろう！
話題になったサイゼリヤガチャを参考に、Javascriptで自分なりにアレンジして作ってみることにしました！
サイゼリヤガチャ ▶ https://saizeriya-1000yen.herokuapp.com/
Qiita記事 ▶ https://qiita.com/marusho_summers/items/a2d3681fac863734ec8a
My favorite カレー屋さん『プルジャダイニング』
タイトルを見て、都内の人気店？ココ●チ？とか予想した方もいるでしょう。
おそらく、実用性を考えると、ココ●チのようなチェーン店の方がいいに決まっています。
ですが、ここは宣伝も兼ねて、私の大好きなお店にしたい・・・。
私の好きなお店と言えば・・・
そう、巣鴨にある本格ネパール料理のお店『プルジャダイニング』です。
Twitterをやっている方なら、もしかしたら名前だけ聞いたことがあるかもしれません。
「ナンはネパール料理じゃないです」のツイートがバズったお店です。
おねがいです。
— ネパール料理プルジャダイニング (@purja99) April 25, 2020
おもちかいりもすくないです。
うちは本物のネパール料理です。
ごめんなさい！うちはナンがないです。ナンはネパール料理じゃないです。 pic.twitter.com/86nGvckhIt
ネット記事にも取り上げられました。▶ https://sirabee.com/2020/04/27/20162312468/
ただ、話題性だけではありません！！！
食べログ百名店にも2年連続で選ばれましたし、カレー好きが集う実力派のお店なのです！！！
店主のプルジャさんがチャーミングなのも大きな魅力ですね。
というわけで、非常にピンポイントではありますが、プルジャダイニングガチャを作ることにしました。
できたもの
「プルジャダイニングmenuガチャ～ナンはネパール料理じゃないです～」
http://www.purjadining-gacha.com/purja.html
▲こちらのURLからガチャを回すことができます！
ボタンを押すと、ランダムに4つのメニューが表示されるようになっています。
メインや副菜などカテゴリー分けた方がいいかなとも思いましたが、
偏ったメニューが出るのも、それはそれで面白いと思ったので、この作りにしました！
<div v-show="show">
<li class="list-group-item list-group-item-light" v-for="i in 4">
{{menus[i].name}} ・・・{{menus[i].price}}円（税別）
</li>
<li class="list-group-item list-group-item-success">
合計金額は <b>{{totalprice}}</b>円（税別）です！
</li>
<br>
<div class="twitter_share" align="center" >
<button v-on:click="twitterShare" type="button" class="btn btn-primary">ツイートする</button>
</div>
</div>
結果ページはdivでまとめて、v-showを使って非表示→表示の切り替えをしています。
ソースコード全体はこちらからどうぞ！▶ https://gist.github.com/twtjudy1128/cec4247e1665a0e82281f02f88449c29
こだわりPOINT
（１）店舗のSNSと食べログへのリンクボタン
非公式のアプリではございますが、プルジャダイニングのファンとして少しでも宣伝したい・・・！
そんな思いから、公式SNSと食べログへのリンクボタンを上部に設置しました。
本当はアイコンとかもつけたかったのですが、うまくいかず・・・精進します！！！
（２）画像にマウスオーバーしたときの吹き出し
先ほどのキャプチャにあるように、トップ画像にカーソルを合わせると吹き出しが出てくるような仕様にしました！
シンプルなデザインなので、少し動きが欲しくて取り入れてみました！
位置の設定が難しかったです・・・。
（参考記事：https://saruwakakun.com/html-css/reference/speech-bubble ）
（３）ツイートシェア時の見やすさ＆オリジナルタグ
ガチャの結果をツイートシェアしてほしい！そこに特にこだわりました！
ツイート時のテキストも改行することで見やすくし、かつ私がツイートを追えるように
オリジナルタグも自動的に出るように設定しました！
（４）お店に合わせたUIデザイン
アプリのトップ写真にもあるように、黄色がメインカラー。
メニュー表も、画像のように黄色メイン＆赤・緑・黒のテキストカラーで構成されています。
このイメージに合わせて、アプリのUIもデザインしました！
改善点
・配列が苦手で、今回はとりあえず形になったが、仕様を少しでも変えるとめんどくさいコードになってるので直したい
・スマホ最適化が苦手で、今回もうまくいかなかった・・・
・ツイートシェア時、PCだとアプリURL出るのに、携帯だと出てないっぽいので直したい
今回、初めてQiita上の質問機能を使ったのですが、すぐに回答があって、
しかもどれも丁寧で的確なもので、本当に助かりました・・・。
こういう質問って回答来ないイメージがあったので、Qiita民の優しさに感激しております。
粗削りなコードしか書けないペーペーですが、今後ともよろしくお願い致します。
おわりに
カレー好きな方もそうでない方も、ぜひ一度「プルジャダイニングガチャ」をお試しください♪
昨日ツイッターで呟いたら早速使ってくれる方がいて、めちゃくちゃ嬉しかったし、もっと頑張ろうって励みになりました。
なので、もっと皆さんに使っていただけると嬉しく思います！！！
ガチャの結果をツイートしていただけたら、すぐ反応しにいきますね！
そして、少しでも興味をお持ちいただけたら、「プルジャダイニング」に足を運んでみてください♪
美味しいネパール料理を楽しめますよ。自信をもってオススメします！！！