MAD MAX - Fury Road

仕事しながら観た〜。

もう二回は観ているのに、何度観ても面白う。

ニュークスの「Witness me!!!」ってところで毎回ぐっとくるｗ

苦しかったときの話をしようか

しゃちょーパイセンにおすすめされた書籍。

元P&Gのマーケッターとして活躍した後、倒産まであと少しとなってしまったUSJをV字回復させた森岡 毅さん著書。

将来に悩む娘さんに宛てた手紙を元に書籍化されたもので、愛する娘へ語りかけるような文面が印象的。

何を目指して良いのかわからない若い世代こそ読んで欲しい前半から、森岡さん自信のこれまでの苦労を綴ったこの本のタイトル「苦しかったときの話をしようか」と題した第5章が、もう涙なくしては読めない。

これから就活が始まる大学生と、世の働くお父さんに読んで欲しい。

むちゃくちゃ泣けた。

いぬやしき

原作とはもろもろ違うけど、それなりに楽しめた。

ただ、ちょっと演技が臭いというかなんというか。

恋は雨上がりのように（実写映画化版）

omiend.hatenablog.jp

からの実写映画化版。

原作の名シーンを違和感なくちょこちょこ入れてあって、端折っているところはあるもののテンポ良くいい感じにまとまっていたかなああ！

普通に楽しめた。

そして我らが大泉洋大先生が出演。主演の橘あきらを演じるのは小松菜奈。

この二人がまじでいい感じに原作の世界観をガッツリと引き出していたように思う。

そして何より小松菜奈ってすげえんだなと思った。

完全に大泉洋先生が出汁になってしまうほど、ラストの涙ぐみながら「友達だったら普通メールとかすると思うんです。」ってシーンでもう全部持っていかれたｗ

恋は雨上がりのように

この前読んだ漫画。めっちゃハマったｗ

冴えないおっさんに恋をしてしまう女子高生の切ない切ない片思いと青春と、そんな冴えない４０代おっさんの人生が題材。

漫画なのだけど純文学のような雰囲気があって、というか作中でも純文学に触れていたりと、作者の文学への愛も感じてとっても良かった。

万引き家族

なるほど想像通りの映画。

リリー・フランキーのキャラが良いのと、安藤サクラはさすがですなあ。

そして何より松岡茉優神。

からの樹木希林。

家の中はごっちゃごちゃなのに、すべてが調和されている感じ。

でも最後はちょっと煮え切らないなあ。もっとハッピーエンドにするか、個人的にはもっとどん底に落としても良かった。

家の中のごちゃごちゃ具合が、俺が若いときに住んでいた家の中と似ていてツラかった。

VeeValidate でフォームをいい感じにする

VeeValidate とは

baianat.github.io

フォームにバリデーションを掛けてくれる便利なやつ。

例えば、メールアドレス入力欄のバリデーションを

• メールアドレス形式
• 入力必須
• MAX255文字

としてバリデーションしたい場合、このように定義してあげるだけで

          <input
            v-validate="'email|required|max:255'"
            v-model="form.email"
            :class="{'is-error': errors.has('form[email]')}"
            class="form__input"
            type="email"
            name="form[email]"
            data-vv-as="メールアドレス"
            placeholder="例）info@demo.jp"
          >
          <p
            v-show="errors.has('form[email]')"
            class="form__error">
            {{ errors.first('form[email]') }}
          </p>

こんな感じにしてくれる。

メルアドエラー

submit ボタンのクリックを抑制する

さて、バリデーションが通らない場合、保存ボタンなどをクリックさせないようにしたい。

例えばこういったフォームがあったとして

お問い合わせフォームNG

お問い合わせ画面

入力が全てOKだったら「送信ボタン」がクリック出来るように变化させる。

お問い合わせフォームOK

しかし、バリデーションがエラーとなる入力欄が合った場合は「送信ボタン」をクリックさせたくない。

computed にて fields の invalid を参照する

まずボタンに :disabled="invalid" を定義。

<button
  :class="{ 'button--is-arrow': !invalid, 'button--is-disabled': invalid }"
  :disabled="invalid"
  class="button"
  @click="submit()">
  送信
</button>

さらに computed に下記を定義（バリデーションが設定していないフォームがあってもOK）。

  computed: {
    invalid() {
      const that = this
      const _result = Object.keys(this.fields).map(
        key => that.fields[key].invalid
      )
      return _result.includes(true)
    }
  },

これ、もしかしたらもっと良い方法があるかもしれないので、よかったら教えてくださいまし。

フォームを表す fields にはいろいろな状態を管理するフラグがある

baianat.github.io

Vue Devtools

ざっと動作を見てみた。

対象	初期値	フォーカス	入力（エラー）	入力（エラー無し）
changed	false	false	true	true
dirty	false	false	true	true
invalid	true	true	false	true
pending	false	false	false	false
pristine	true	true	false	false
required	true	true	true	true
touched	false	true	true	true
untouched	true	false	false	false
valid	false	false	true	false
validated	false	false	true	true

まああまり気にしなくてもいいけど、ココらへんをゴリゴリ使ったフォームってどんなのがあるのか。

結構複雑になりそうなので、できれば簡潔に実装したいところかな。

あと関係ないけど、VeeValidate と↓を連携させるとすごくカッコイイフォームが出来そうね。

vuetifyjs.com