2018.2.16
カクテルデータベース制作日誌#11【メジャーカテゴリ】
Ver0.1時点のフォームを見てみましょう。
まぁ僕もさすがにこのまま放置するつもりはないんですが、これをどうシェイプアップするかが非常に悩ましいと思っていたのです。
が、ちょっと前に思いついた方法として「メジャーな材料」「そうでない材料」とで区別するという手法を思いつきました。
例えば、ラムやテキーラなんかはメジャーなカテゴリなので最初から表示しますが、「ガリアーノ」とか「アドヴォカート」なんかは知らない人の方が多いと思われるって類のカテゴリなんですよね。
とはいえ、検索条件として除外するとかいうのはこのDBの存在意義に関わるので僕はやりたくないのです。
半分自分用のデータベースとはいえ、未来につながるコンテンツとして育てていこうと決意したわけですからね。
そこでVer0.2で実装しようと考えたのが「初期状態では非表示になるチェックボックス」です。
つまり、どうせ誰も知らないようなカテゴリは最初隠しておいて、詳細検索みたいなボタンを押すと全て表示される、みたいな実装にしたいなと思ったのです。
と思ったんですば、調べてみるとアニメーションは簡単なものならjQuery側でいい感じの関数が使えるみたいなので、遠慮なく使わせて戴きましょう。
コード例は書きませんけどtoggle()っていう関数で、表示／非表示を切り替えてくれる関数ですね。こちら側で状態を保存しなくていいのは大変にラクで、引数でアニメーションつけることができます。
いまの状況としてはこんな感じです。結構マシになったと思いません！？
一応現段階でスマホ対応まで済ませてはいます。自分の中ではあまりベストな選択とは思っていないものの、一応人前に出せるようなデザインにはなってると思います。
ちょっと見づらい気がしますが、この「メジャーでない項目の表示／非表示」ってとこをクリックすると･･････
こんな風に、バーって開きます。
こう一口に言いましたけど、ここに到達するまですごい長い時間かかりました。使いやすさ的にどうなんでしょうね。ここに関してはこれ以上の選択肢が僕には思いつかない･･････。
いちいちポップアップさせるのも鬱陶しいですしね･･････。ちなみにスマホだと異常に縦長の画面になってしまいます。まぁしょうがないよね（）
トップページに関しては、あとはヘッダーだけ微調整して完成ということにしましょうかね。
いい感じに作れたので、カクテルの詳細画面も公開です。
画像とか動画が登録されているやつはこんな感じのデザインになってます。あ、画像はテスト用なのでテキトーなの使ってます。
これで基礎デザインが出来上がったのでこれをどうやってレスポンシブにしましょうね･･････。（）
というとこで今日の情報はここまで！これから頭を悩ませていきましょう笑