見てはいけない黒歴史 in -The Rong's Caravan-
日記ログ コメント
About
黒歴史をリアルタイムで見られる貴重なサイト。
人間観察の悦びをあなたに・・・・・・

というのは冗談で、ただの趣味のサイトです。


管理人:ろんぐ
Since:2005/2/14
update:2019/11/15 「まーーーた人を呼びました」
update:2019/11/15 「まーーーた人を呼びました」
§Infomation§


宅飲みカクテルデータベース(RC)

が新しく生まれ変わりました!

使いやすくなったはずなので、ぜひ使って下さい!(笑)
§Comment§
名前の非掲載


§Diary§
2019.11.15
まーーーた人を呼びました




はい。こんなことしてました(笑)
秋田の現役キャバ嬢が、わーーーざわざ僕の家に来たいと言うのでお招きしました^^^^^
いやぁーーーーろんぐさんモテモテっすね。でもこれ(元)男なんだよなぁ



っていうのはさておき、宅飲みしました。最初は普通だったんですけど、お酒をおすすめしながらガバガバ飲んでたら二人して普通に酔いました。やはり宅飲みは最高である。←
最終的に凍らせたリモンチェッロや、キャプテンモルガンとタランチュラあたりをショットでくいくい行ってた気がするんですけど、この辺は35度のくせして異常に飲みやすい犯罪リキュールなので、まぁ酔いましたねみたいなところはあります。



まぁ他にもいろいろ気になる話はあったんですけど、それはまた追々話そうと思います。(笑)



普通に酔ったので完全に二日酔いです。テンションがアガらないので日記もテキトーに済ませます、はい(笑)

2019.11.14
Vueでカクテルデータベースをリファインする話#22【双方向バインディングとsync】

僕はいつまでプログラミングの呪縛に囚われなくてはいけないんだろう


正直プログラムの話するのつまんないんだよね()



ただ他に書くこともないので、メモ書きします。今回のテーマは双方向バインディングと呼ばれるものです。



具体的になにかっていうと、言ってしまえば親コンポーネントと子コンポーネントでデータを同期させたいっていうヤツですね。





これは銘柄の新規入力画面なんですが、何を更新するにしてもフォーム自体はそこまで大きく変わらないんですよね。
メジャーカテゴリ、ミドルカテゴリに関しては上の属カテゴリ部分が変化するぐらいで、あとは銘柄の時のみ度数が加わったり、メジャーカテゴリやミドルカテゴリの登録時は銘柄を最低ひとつは登録しなくてはいけないので、追加で銘柄の入力を強要される、ぐらいの違いしかなくて、使うべきフォームはほぼ同一なんですよね。

つまりこれが何を意味するのかっていうと、フォーム画面が使い回せるってことなんですよね。
なので、それを見越したコンポーネント作りをしなくてはなりませんネと。


ただ、ここで問題になるのが、普通にやってると親と子コンポーネントの完全同期が取れません・・・・・・。
親コンポーネントから子コンポーネントにはpropで値を渡すのですが、これはdataでつなげたとしても同期はとれません。
子コンポーネントから、変更を感知したらemitで無理矢理イベントを送信し、それを親コンポーネント側が受け取って値をコピーしてきて.....


あぁ〜〜なんということでしょう!!だるすぎる!!!!!



ということで、もっとスマートに連動させる手段を考えたいと思います。(笑)
それが.syncと呼ばれるものですね。具体的なリファレンスはここを参照に話を進めていこうとおもいます。




重要そうな箇所がここですね。syncっていうのは糖衣構文のようなので、その背景となる動きを理解していないとだめなんですが、それがこのcomputedの部分ですね。
この算術プロパティのsetがwatchの代わりになるわけです。はぁ〜〜〜賢いなこれ。なるほどな。
で、setされたらemitでイベントを発火し、親にぶちこんであげる、と。




ということで、実際に使ってうまくいったコードを載せますね。




<template>
    <div>
        <div class="flexdiv">
            <div style="flex: 1;">
                <v-select
                    :items="select_category_label"
                    v-model="selectedCategoryValue"
                    label="カテゴリ"
                    item-text="label"
                    item-value="value"
                    dense
                    return-object
                ></v-select>
            </div>
            <div if="is_need_middle" style="flex: 1;">
                <v-select
                    :items="select_middle_label"
                    v-model="selectedMiddleValue"
                    label="ミドルカテゴリ"
                    item-text="label"
                    item-value="value"
                    dense
                    return-object
                ></v-select>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props:{
            selectedCategory:null,//初期値をここにぶっこむとdataに反映される(はず)
            selectedMiddle:null,
            //brands:null
        },
        data() {
            return {
                first:null,
            }
        },
        computed: {
            selectedCategoryValue: {
                get() {
                    return this.selectedCategory;
                },
                set(value) {
                    this.$emit('update:selectedCategory', value);
                }
            },
            selectedMiddleValue: {
                get() {
                    return this.selectedMiddle;
                },
                set(value) {
                    this.$emit('update:selectedMiddle', value);
                }
            },
        }
    }
</script>

要点だけ抜き出すとこんな感じになります。値が代入されたらセッターが呼ばれるっていうのが算術プロパティの仕様ですね。
なので、値が代入されたら、その値とともにupdate:ほげほげイベントをemitします。これを親コンポーネントで受け取るわけですね。



<template>
    <div id="container">
        <category-secelt v-bind:selected-category.sync="selectedCategory"
                         v-bind:selected-middle.sync="selectedMiddle"
        ></category-secelt>
    </div>
</template>

<script>
    export default {
        components: {
            CategorySecelt,NameAndDrescription
        },
        data() {
            return {
                selectedCategory:null,
                selectedMiddle:null
            }
        },
        methods:{
            setSelectedCategory(data){
                this.selectedCategory=data;
            },
            setSelectedMiddle(data){
                this.selectedMiddle=data;
            },
        }
    }
</script>

親はこんな感じですね。.syncが糖衣構文なので、update:ほげほげが呼ばれたらそれに対応するメソッドが呼ばれます。
これで、子コンポーネントの変更が親に伝わり、親のselectedCategoryとかが連動して更新されるわけですね!!!!



これの実装に1日かかりました。つーーーーらかった!(笑)
これで自由にフォーム部品を組み合わせることができるようになったので、送信部分をつくっていって、管理画面は完成させられるかな・・・・・・・どうせまたなんか課題が出てくるんだろうけど・・・・・・(笑)

2019.11.13
カクテルDBの改善点

10日のぶんアップし忘れてましたね。そっちでは管理画面で改修したかったところを網羅しています。


さて、ほぼメモなんですけど修正しようかなって思ってるところをいくつか挙げてみます。


1.「マイナーなサブカテゴリ」についての仕様

これ今さっき気づいたんですけど・・・・・・



例えば、このようにジンとミントリキュールを選択するじゃないですか。すると、ドライジンがメジャーカテゴリに入ってないので(僕の設定ミスなんですが)、なんとドライ・ジンが検索結果から排除されるんですよ。

まぁこれは単なる僕のデータの入れ方のミスなんでいいんですけど、このカクテルDBって新たなカクテルとの出会いを目的としてるのに、この方針だと例えば「オールド・トム・ジン」と一生巡り会えないんですよね。

ちょっとそれは問題かな・・・・・・って思ったんで対策を考えなくてはいけません。

まぁまず諸悪の根源としては、隠されたマイナーカテゴリにチェックが入ってないのが悪いので、例えば親カテゴリにチェックが入った際は、隠された子カテゴリにもチェックが入るように仕様を変えてしまうのが良いかなと思います。
それで使い勝手がどうなるかはちょっと考えなくてはなりませんが、親カテゴリのチェックを外すと子カテゴリのチェックは全部外れるので問題にならないんじゃないかなぁ・・・・・・と思ってます。どうだろう。


2.「検索」「閉じる」が押しづらい

GUIの問題ですね。検索ボタンや閉じるボタンをfixedで固定したいってアイデアですね。これはほぼ確定なんですが問題がひとつあって、コンポーネントを使いまわししてるせいで配置がしづらいんですよね。

トップページに表示されてるフォームとポップアップで出せるフォーム、データの連動はしてませんが使ってるファイル自体は当たり前ですが同一です。コンポーネントオブジェクトをそれぞれ生成してるだけですからね。
つまりそのコンポーネントに検索開始ボタンも含まれちゃってるので、検索開始ボタンをどっかで固定するとなると、じゃあトップページに表示してあるフォームはどうすんのってことになりますね。
ポップアップの方はいいんですけどTOPページのフォームまでfixさせるのは大変かなぁ・・・・・・。


とはいえ、Vueでスクロール位置とかを検知できるみたいなので、それを活用できそうだったら、例えばどこかの地点までスクロールしたら検索ボタンを表示する、とかやればいいかな。
技術的には可能なことはわかってるんですが、実装のめんどくささと天秤にかけて考えます。(笑)


3.フッターどうすんの

これ書くまで忘れてました。()
まぁー、僕の著作権表示と、あとはDB埋めるボランティア募集をひっそりと載せとこうかな。どうする???


4.それぞれの「親カテゴリページ」「銘柄ページ」などの充実

最後に、これも重要視してます。例えば、これはどうやって飲むと美味しかったよーとか。そういうのやっていきたい。
それ用のカラムも一応いくつか持たせてます。まぁ具体的な仕様は実装してから考えます(!?)


5.ページ読み込み速度の改善

忘れそうだったからメモ。(笑)(笑)
ページの読み込みが遅すぎるので対策したいっていう話です。まぁたしかビルドしたファイルサイズが6MBぐらいになってるんで、それをなんとかするテクニックを探したいと思います。


6.「材料が似たカクテル」のガバ

これどういう仕様にしたかうっすらとしか覚えてないんですが、先頭2つの材料を見て、両方含まれてるカクテルがあればそれを取得し、それが5個に満たなければそれぞれの材料が使われてるのを取得して、合算してその中から5つ選ぶ、っていうメソッドにしてます。
っていうのも、先頭2つの材料が一致してるカクテルなんてそんなに見つかるものじゃないので、だったら量を取ってきた方がいいかなぁと思いまして。材料全部見なかったのは時短のためです。頭2つみればだいたいそのカクテルの味の系統は似てくるだろ、って思いまして・・・・・・笑

ただ正直ちょっと選び方が大味すぎる感はするんでなんかアイデア下さい・・・・・・笑


7.「ドランブイ」事件

完全な私的メモ。カテゴリ名と銘柄名が同じ「ドランブイ」が、銘柄の方を優先して探索するためにドランブイ15年のほうのページを開いた時に使用不可扱いされてしまう致命的なミス。
後でDBの値を上書きして消しておく必要がありますね。そもそも銘柄としてのドランブイの項目が必要なのかどうかも怪しいんですけどね実際。



とりあえずいまのとこ決めてる改善点としてはこんなもんかな。ほぼメモ書きですけど。



>>もっと読みたい


Contents
日記
過去ログです。
旅行レポートなどもこちらに置いています。

音楽素材
RPGツクール向けの音楽素材です。
現在の素材数は187曲です。

Ptutor
プログラミング対面指導サービス

Fashion研究学Note
地雷を踏まないファッション研究学。低予算でディスられないファッションを目指します。

Instagram
カクテルの「ちょっとふざけたレビュー」。
写真素材
旅行中、無駄に撮った写真を素材として並べています。
現在2600枚ほど。
そのうち更新します。

Products
カクテルデータベース
古今東西のカクテルと、その評価をデータベースにしちゃいました(笑)
現在の登録数 ⇒

Commnication
旧BBS
一応残しておきます。

Other

Author
twitterも気軽にフォローミー!おすすめはしない!笑
↓創作用アカウント(笑)