はじめに・・・ これまでに飲んだお酒を覚えていますか？色は？味は？フレーバーは？ そうした日々のお酒を記録するためのWebサービス「お酒録」を作りました。 自分の飲んだお酒を記録することはもちろん、他の人が飲んでいるお酒を見たり、コメントできます。 ワインや日本酒だけに特化した類似のスマホアプリはありますが、 本サービスはそうした区別をせず、ビール、酎ハイ、日本酒、ワイン、焼酎、ウィスキーとあらゆるお酒を対象としています。 また、Twitterにお酒の写真を投稿する人が多いことからTwitterへの投稿機能も備えています。 お酒はビールや日本酒といった種類だけじゃなく、銘柄にも興味を持つとより楽しめるものと思います。 この香りが〜とか、この味が〜といった感じで。 そんな観点で、これまでお酒の銘柄を気にしたことがなかった人ほど使って欲しいです。 ※お酒は20歳になってからです。飲み過ぎにご注意ください。 「お酒録」3つの機能 記録する 日々飲んでいるお酒を記録し、後から見返すことができます。 いわゆる、「お酒の日記帳」としての使い方です。 お酒の銘柄はもちろん、味わいや香りも残すことができます。 上記の日々の記録に加えて、下のように統計データを表示することもできます。 探す 他の人のレビューを見て、自分が次に購入するお酒を探すことができます。 ユーザーの皆さまの投稿を元に夫々の銘柄ごとにフレーバーやスッキリしている等の味覚チャートが表示されるようになっています。 繋がる お酒録にTwitterアカウントを登録することで、お酒録からTwitterアカウントへ、また、お酒録に投稿した内容をTwitterにも投稿することで、お酒好き同士の方々が繋がる仕組みを作っています。 開発環境 今回は、Vue.jsを採用して、SPA（シングルページアプリケーション）として作成しました。 また、UI周りはVuetify、データベースや認証機能関連はとっつきやすいFirebaseを採用しました。 使用言語 Vue.js(SPAとして開発) ライブラリ Vuetify Vue-Router Browser-Image-Compression（投稿画像圧縮のため） ##その他 Twitter API Firebase 所感 SPA（シングルページアプリケーション）も捨てたもんじゃない 今回はSPAとして作成しました。 ネットでSPAについて調べると、SEO対策で不利とか実用レベルではない！と言われています。 まぁ、確かにSSRで作成するに越したことはないと思います。 ですが、SPAも昔に比べると大分受け入れられる下地ができてきたように思います。 Google検索にも引っかかるしAdsenseの広告審査にも通る時代になりました。 とはいってもSSRには敵わないな〜というのが私の感想です。 この「お酒録」はSPAに固執してしまいましたが、今後、一部はSSRに切り替えようと思っています。 普段コーディングばっかりやってる人はデザインを学んだ方が良いかも 普段はコードを書いていることの方が多く、デザインをゼロからやったのは今回が初めてです。 今更ですが、デザインは難しいですね。。。 今回の「お酒録」は、全体のデザインを3、4回はゼロから作り直すハメになりましたw 個人開発だからと甘えずにデザインは最初の段階で各機能も含めて、しっかりとデザインを最初に作った方が開発速度はかなり速くなるだろうと思います。

やりたいこと Vuetifyのtimepickerを使用し、テキストボックスに選択した時分を入れたい。　↓こんなやつ。 これを、画面上の複数の時刻入力すべてに対応させたい。 まずやったこと 入力が1つだけの基本的なやり方はVuetifyの公式サイトを参照。 https://vuetifyjs.com/ja/components/time-pickers/#section-30c030a430a230ed30b0306830e130cb30e530fc 本家のサンプルを基に自分なりに少々カスタマイズ。 (サンプルベース)page.vue <template> <v-container style="width:320px;"> <v-card v-for="item in items" :key="item.id"> <v-menu ref="menu" v-model="menu2" :close-on-content-click="false" :return-value.sync="time" transition="scale-transition" offset-y > <template v-slot:activator="{ on, attrs }"> <v-text-field v-model="time" label="Picker in menu" prepend-icon="mdi-clock-time-four-outline" readonly v-bind="attrs" v-on="on" ></v-text-field> </template> <v-time-picker v-if="menu2" v-model="time" full-width format="24hr" @click:minute="$refs.menu.save(time)" ></v-time-picker> </v-menu> </v-card> </v-container> </template> <script> export default { name: 'IndexPage', data() { return { menu: false, menu2:false, time: '', items: [ { id: 1, name: 'abc' }, { id: 2, name: 'def' }, { id: 3, name: 'ghi' }, ], } }, } </script> 結果（NG） データを3つ用意しているので3つのテキストボックスが表示される。 テキストボックスをクリックすると、3つ分のtimepickerが表示されてしまう timepickerが1つのサンプルをv-forの中に入れただけなので当然です。 内容を配列に対応させる必要があります。 どこに手を入れるか さあ、そもそもこの公式サンプルが何をやっているのか、正直説明が少なくてよくわかりません。 見てみると、使用されている変数に以下3つがあります。 time menu menu2 これらがどう影響するのか... 一応、自分なりの解釈は以下の通りです。 time：入力した時分の値 menu：timepickerのポップアップ表示状態 menu2：timepickerは「時」→「分」と2段階の選択が必要で、ポップアップを開き直したときに必ず「時」から開くために設定されているもの（のようです） とりあえず以下のように配列対応したら想定通りの動作をしました。 (対応後)page.vue <template> <v-container style="width:320px;"> <v-card v-for="(item, idx) in items" :key="item.id"> <v-menu ref="menu" v-model="menu2[item.id]" :close-on-content-click="false" :return-value.sync="time[item.id]" transition="scale-transition" offset-y > <template v-slot:activator="{ on, attrs }"> <v-text-field v-model="time[item.id]" label="Picker in menu" prepend-icon="mdi-clock-time-four-outline" readonly v-bind="attrs" v-on="on" ></v-text-field> </template> <v-time-picker v-if="menu2[item.id]" v-model="time[item.id]" full-width format="24hr" @click:minute="$refs.menu[idx].save(time[item.id])" ></v-time-picker> </v-menu> </v-card> </v-container> </template> <script> export default { name: 'IndexPage', data() { return { menu: {}, menu2:{}, time: [], items: [ { id: 1, name: 'abc' }, { id: 2, name: 'def' }, { id: 3, name: 'ghi' }, ], } }, } </script> 結果（OK） お見事 やったこと 基本的には以下の対応をしています。 time → time[idx] menu2 → menu2[idx] しかし！v-menu内の ref="menu" はそのままです。 そして v-time-picker 内で参照していますが、その記述は $refs.menu[idx] です。 これは、v-for内のrefは勝手に配列にされるためです。 refの記述も配列に対応する必要があると考え、 ref="menu" と $refs.menu[idx].save(略) の組み合わせを、 :ref="`menu_${idx}`" と $refs[`menu_${idx}`].save(略) のように記述してしまうと、「分」を選択時に以下のエラーがコンソールに出力され、正常に動作しません TypeError: _vm.$refs[("menu_" + idx)].save is not a function 所感 複数の timepicker に対応することができました。 しかし、上記でのエラーに遭遇してからすぐに解決できず、ずっと「？？？」状態でした。 v-for内のrefが配列にされるのはvueでは常識なのでしょうか？ そして、上記のエラーはなぜ発生するのでしょうか？ どこか公式の記述をご存知の方がいらしたら、ぜひお教えください。 ありがとうございました