カレーは好きですか？

私は大好きです。
カレー専用の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をやっている方なら、もしかしたら名前だけ聞いたことがあるかもしれません。

「ナンはネパール料理じゃないです」のツイートがバズったお店です。

おねがいです。
おもちかいりもすくないです。
うちは本物のネパール料理です。
ごめんなさい！うちはナンがないです。ナンはネパール料理じゃないです。 pic.twitter.com/86nGvckhIt
— ネパール料理プルジャダイニング (@purja99) April 25, 2020

ネット記事にも取り上げられました。▶　https://sirabee.com/2020/04/27/20162312468/

ただ、話題性だけではありません！！！

食べログ百名店にも2年連続で選ばれましたし、カレー好きが集う実力派のお店なのです！！！
店主のプルジャさんがチャーミングなのも大きな魅力ですね。

というわけで、非常にピンポイントではありますが、プルジャダイニングガチャを作ることにしました。

できたもの

「プルジャダイニングmenuガチャ～ナンはネパール料理じゃないです～」
http://www.purjadining-gacha.com/purja.html

▲こちらのURLからガチャを回すことができます！

ボタンを押すと、ランダムに4つのメニューが表示されるようになっています。
メインや副菜などカテゴリー分けた方がいいかなとも思いましたが、
偏ったメニューが出るのも、それはそれで面白いと思ったので、この作りにしました！

<divv-show="show"><liclass="list-group-item list-group-item-light"v-for="i in 4">
            {{menus[i].name}} ・・・{{menus[i].price}}円（税別）
        </li><liclass="list-group-item list-group-item-success">合計金額は    <b>{{totalprice}}</b>円（税別）です！
        </li><br><divclass="twitter_share"align="center"><buttonv-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民の優しさに感激しております。
粗削りなコードしか書けないペーペーですが、今後ともよろしくお願い致します。

おわりに

カレー好きな方もそうでない方も、ぜひ一度「プルジャダイニングガチャ」をお試しください♪
昨日ツイッターで呟いたら早速使ってくれる方がいて、めちゃくちゃ嬉しかったし、もっと頑張ろうって励みになりました。
なので、もっと皆さんに使っていただけると嬉しく思います！！！

ガチャの結果をツイートしていただけたら、すぐ反応しにいきますね！

そして、少しでも興味をお持ちいただけたら、「プルジャダイニング」に足を運んでみてください♪
美味しいネパール料理を楽しめますよ。自信をもってオススメします！！！