夏だ！カレーだ！都内の人気店のメニューガチャ作ったので、みんなでカレーを食べよう！！！

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

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

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おねがいです。<br>おもちかいりもすくないです。<br>うちは本物のネパール料理です。<br>ごめんなさい！うちはナンがないです。ナンはネパール料理じゃないです。 <a href="https://t.co/86nGvckhIt">pic.twitter.com/86nGvckhIt</a></p>&mdash; ネパール料理プルジャダイニング (@purja99) <a href="https://twitter.com/purja99/status/1253906659786686464?ref_src=twsrc%5Etfw">April 25, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

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

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

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

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

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

[![Image from Gyazo](https://i.gyazo.com/e415d4af2fc9e57c6f047f0093118716.gif)](https://gyazo.com/e415d4af2fc9e57c6f047f0093118716)

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

```html
      <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と食べログへのリンクボタン
[![Image from Gyazo](https://i.gyazo.com/e8f225bfedd86e3c6b57ccf65cb94157.gif)](https://gyazo.com/e8f225bfedd86e3c6b57ccf65cb94157)

非公式のアプリではございますが、プルジャダイニングのファンとして少しでも宣伝したい・・・！
そんな思いから、公式SNSと食べログへのリンクボタンを上部に設置しました。

本当はアイコンとかもつけたかったのですが、うまくいかず・・・精進します！！！


###（２）画像にマウスオーバーしたときの吹き出し

先ほどのキャプチャにあるように、トップ画像にカーソルを合わせると吹き出しが出てくるような仕様にしました！
シンプルなデザインなので、少し動きが欲しくて取り入れてみました！
位置の設定が難しかったです・・・。

（参考記事：https://saruwakakun.com/html-css/reference/speech-bubble ）

###（３）ツイートシェア時の見やすさ＆オリジナルタグ
[![Image from Gyazo](https://i.gyazo.com/256c6dbda85fe23d1888c06aa047806e.png)](https://gyazo.com/256c6dbda85fe23d1888c06aa047806e)

__ガチャの結果をツイートシェアしてほしい！__そこに特にこだわりました！
ツイート時のテキストも改行することで見やすくし、かつ私がツイートを追えるように
オリジナルタグも自動的に出るように設定しました！



###（４）お店に合わせたUIデザイン

[![Image from Gyazo](https://i.gyazo.com/f3443c31c68c628df3696fe9b410596a.png)](https://gyazo.com/f3443c31c68c628df3696fe9b410596a)

アプリのトップ写真にもあるように、黄色がメインカラー。
メニュー表も、画像のように黄色メイン＆赤・緑・黒のテキストカラーで構成されています。

このイメージに合わせて、アプリのUIもデザインしました！

#改善点
・配列が苦手で、今回はとりあえず形になったが、仕様を少しでも変えるとめんどくさいコードになってるので直したい
・スマホ最適化が苦手で、今回もうまくいかなかった・・・
・ツイートシェア時、PCだとアプリURL出るのに、携帯だと出てないっぽいので直したい

今回、初めてQiita上の質問機能を使ったのですが、すぐに回答があって、
しかもどれも丁寧で的確なもので、本当に助かりました・・・。

こういう質問って回答来ないイメージがあったので、Qiita民の優しさに感激しております。
粗削りなコードしか書けないペーペーですが、今後ともよろしくお願い致します。

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

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

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


####(*^^)v「よろしければLGTMも宜しくお願いします！」