laravel5.7 radioボタンのbladeでswitch文を使う

入力フォーム radioボタンで、値(value)にintを入れる。

<td>
            <input type="radio" name="role" size="40" value="1" v-model="message" checked> 管理者
            <input type="radio" name="role" size="40" value="2" <?php if( old('role')  == 2){ echo "checked";} ?> v-model="message"> 管理者2
            <input type="radio" name="role" size="40" value="3" <?php if( old('role')  == 3){ echo "checked";} ?> v-model="message"> 管理者3
            <input type="radio" name="role" size="40" value="4" <?php if( old('role')  == 4){ echo "checked";} ?> v-model="message"> 管理者4
            <input type="radio" name="role" size="40" value="5" <?php if( old('role')  == 5){ echo "checked";} ?> v-

確認画面でvalueを受ける際に、intを受けると、そのまま1~5の数字が表示されてしまう。

<tr>
          <th>権限</th>
          <td>
            {{$confirm->role}}
          </td>
        </tr>

oh my god

switch文でテキストに変換する。switch文は特にlaravelは関係ない。普通にphpで使えばよい。

<tr>
          <th>権限</th>
          <td>
            <?php
              switch ($confirm->role){
                  case '1':
                  echo "管理者1";
                  break;
                  case '2':
                  echo "管理者2";
                  break;
                  case '3':
                  echo "管理者3";
                  break;
                  case '4':
                  echo "管理者4";
                  break;
                  case '5':
                  echo "管理者5";
                  break;
              }
            ?>
            <!-- {{$confirm->role}} -->
          </td>

view

決まった

laravel5.7 ラジオボタン(radio)のinputform

view.blade.php
フォームで、radioボタンの値を渡したい。
最初、なにを土地狂ったのか以下のように書いていた。上手く値が渡らない。なぜなら、valueがnullだから。

<td>
            <input type="radio" name="role" size="40" value="{{ old('role') }}" v-model="message" checked> 管理者1
            <input type="radio" name="role" size="40" value="{{ old('role') }}" v-model="message"> 管理者2
            <input type="radio" name="role" size="40" value="{{ old('role') }}" v-model="message"> 管理者3
            <input type="radio" name="role" size="40" value="{{ old('role') }}" v-model="message"> 管理者4
            <input type="radio" name="role" size="40" value="{{ old('role') }}" v-model="message"> 管理者5
          </td>

ちゃうねん、radioボタンなので、valueは指定しないと駄目。
で、error時にはカスタムバリエーションから戻ってくるので、if文で、old(‘role’)が2の時は、checkedとすれば良い。

<td>
            <input type="radio" name="role" size="40" value="1" v-model="message" checked> 管理者
            <input type="radio" name="role" size="40" value="2" <?php if( old('role')  == 2){ echo "checked";} ?> v-model="message"> 管理者2
            <input type="radio" name="role" size="40" value="3" <?php if( old('role')  == 3){ echo "checked";} ?> v-model="message"> 管理者3
            <input type="radio" name="role" size="40" value="4" <?php if( old('role')  == 4){ echo "checked";} ?> v-model="message"> 管理者4
            <input type="radio" name="role" size="40" value="5" <?php if( old('role')  == 5){ echo "checked";} ?> v-model="message"> 管理者5
          </td>

決まった

あれ、ちょっとまてよ。確認画面で、radioボタンのvalueを以下の様に渡すと、

<tr>
          <th>権限</th>
          <td>
            {{$confirm->role}}
          </td>
        </tr>

おいおい、権限 “2” ってなんだよw

これはswitch文か?

laravel5.7のバリデーションで複数条件を設定する

required以外のバリデーションを追加したい。
ログインIDは半角英数字
メールアドレス: 半角英数字、@

$validatedData = $request->validate([
        'title' => 'required|unique:posts|max:255',
        'body' => 'required',
    ]);

requiredのほかに、unique:posts, max:255などがあります。
bail:最初のバリデーションに失敗したら、残りのバリデーションルールの判定を停止

埒が明かないので、公式サイトをみます。
validation

色々ありますね。正規表現があるなら、全部それでよさそうではあります。

半角英数字っぽいのは二つあります。

alpha_dash
フィールドが全部アルファベット文字と数字、ダッシュ(-)、下線(_)であることをバリデートします。

alpha_num
フィールドが全部アルファベット文字と数字であることをバリデートします。

ログインidなので、ダッシュ、下線が入る可能性があるので、alpha_dashでしょうか?

mailアドレスは[email]というメソッドがありました。ほう。

email
フィールドがメールアドレスとして正しいことをバリデートします

では、カスタムバリエーションを編集していきます。

public function rules()
    {
        return [
            'login_id' => 'required|alpha_dash',
        ];
    }
    public function messages()
    {
        return [
            'login_id.required' => 'ログインIDを入力してください',
            'login_id.alpha_dash' => '半角英数字、数字、ダッシュ(-)、下線(_)いずれかで作成してください',

        ];
    }

あれ、上手くいかない。何故だ?
alpha_dashが日本語でも通してしまう!!!!!!!!!!!!!!
なにいいいいいい?

ということで変更します。

'login_id' => 'required|regex:/^[a-zA-Z0-9-]+$/',

おおおおおおおおおおおおお sugeeeeeeeeeeee

emailもついでに

'mail_address' => 'required|email',

OKOK

アラートメッセージのCSS

バリデーションメッセージのフォントカラーを変えたい。
まず、参考サイトとして、netflixのソースコードを見てみます。

<div id="" class="inputError">有&#65279;効&#65279;なメ&#65279;ー&#65279;ルア&#65279;ド&#65279;レ&#65279;スま&#65279;た&#65279;は電&#65279;話番&#65279;号&#65279;を入&#65279;力し&#65279;てく&#65279;ださ&#65279;い&#65279;。</div>

div.class で inputErrorとしてますね。なるほど。

laravelのbladeに inputErrorを追加します。

<table id="tbl">
        @csrf        
        <tr>
          <th>会社名</th><td><input type="text" name="company_name" size="40"  value="{{ old('company_name') }}"><div class="inputError">{{$errors->first('company_name')}}</div></td>
        </tr>
        <tr>
          <th>代理店</th><td><input type="text" name="agent_name" size="40"  value="{{ old('agent_name') }}"><div class="inputError">{{$errors->first('agent_name')}}</div></td>
        </tr>
      </table>

cssにinputErrorを追加します。
main.css

.inputError {
	color:red;
}

バリデーションメッセージのフォントカラーが変わりました。割と普通だ。

Laravel5.7 403エラー forbiddenが出た時

local laravelで開発していて

403
sorry, you are forbidden to access this page.

forbidden って、読んで字のごとく、禁止されているって意味。なんだろうこれは?
– DNS設定していない
– サーバーから制限
– パーミッション(権限・属性)の設定ミス
– .htaccessの設定ミス
– サーバー側の障害
– WAF設定

ローカル, artisanで開発しているので、サーバ側が原因とは考えにくい。routing(web.php)か?

あ!?

custom requestのauthorizedがfalseのままだった。

公式のドキュメントにも記載がありますね。
https://readouble.com/laravel/5.5/ja/validation.html
>authorizeメソッドがfalseを返すと、403ステータスコードのHTTPレスポンスが自動的に返され、コントローラメソッドは実行されません。

public function authorize()
    {
        return true;
    }

trueに変更すると、403が消えました。
簡単ね

### 1冊やっておいても損はない本

.travis.ymlの書き方

travis.ymlの公式です。必ず公式を見るようにします。
https://docs.travis-ci.com/user/customizing-the-build/

1. 言語を指定
phpを指定します。

language: php

2. 指定する言語のバージョン
5.6以上を指定します。

php:
  - 5.6
  - 7.0
  - 7.1
  - 7.2
  - 7.3
  - nightly

3. matrixで並列に回す

matrix:
  fast_finish: true
  allow_failures:
    - php: nightly

4. 実行するコードを書く

before_install:
  - travis_retry composer self-update

install:
  - travis_retry composer require --no-update satooshi/php-coveralls:^1.0
  - travis_retry composer install --no-interaction --prefer-source

before_script:
  - mkdir -p build/logs

script:
  - ./vendor/bin/parallel-lint src test
  - ./vendor/bin/phpunit --verbose --coverage-clover build/logs/clover.xml
  - ./vendor/bin/phpcs src --standard=psr2 -sp

after_success:
  - travis_retry php vendor/bin/coveralls

wireframe cc 日本語文字化け

wireframe ccを使って、ワイヤー書いたのはいいんだけど、エクスポートしようとすると、日本語が、文字化けする。

ああああああ、きっついなー
exportする際に、pngとpdfが選べるんだが、どちらも文字化けする。。

settingで文字コードの指定がないし、おそらく日本語には対応していなんだろう。
うーん、困った。

しょうがない、ctr + [-] で縮小して画面キャプチャしかない。。
教訓: 海外のデザインツール/モック作成ツールを使用する際は、文字コードに気を付けろ(涙目)

wireframe cc の使い方

とりあえず、ブラウザ上でドラッグすると上部にアイコンが現れるので、選択します。
テキストを書きたい場合は「T」を選択します。

うん、これは思ってた以上に使いやすいかも。基本はドラッグ&ドロップで、画面のサイズなども変更できるし、日本語入力もできます。素晴らしい!
これで、作成していきましょう。

Cacoo(無料)がメンテナンスの時

おいおいおい、まじかよ。どんだけ延期してるんねん?

メンテナンスが当初、2018年 12月31 (月) 8:00 ~ 10:00までだったのが、2018年 12月31 (月) 8:00 ~ 12:00になり、その後、2018年 12月31 (月) 8:00 ~ 12:30に変更となり、2018年 12月31 (月) 8:00 ~ 2:00になった。

今日は、シコシコワイヤーを作ろうと思ってたのに、困ったなー。。

うーん、しかしこれ、なんなんだろう?
普通、リカバリ処理でも、そんなに伸びないんだけど。相当クリティカルな問題が見つかったか、今日、新たに機能追加とかやってるのかな?
awsのメンテナンスウィンドウを今日のこの時間に設定していたとしても、メンテナンスウィンドウでこんなに伸びる訳ないんだけどなー

世の中的に、12/31に仕事する人は少ないってことなんでしょうか?そんなことないと思うんだがなー

ということで、他のワイヤーツールを使おうと思います。
候補は以下の通り。ccって、完全にcreative cloudを連想させます。
Wireframe.cc https://wireframe.cc/
NinjaMock https://ninjamock.com/
moqups https://moqups.com/
Prott https://prottapp.com/ja/
mockingbird https://gomockingbird.com/home
MockFlow https://mockflow.com/
HotGloo https://www.hotgloo.com/

しかし、結構あるなー、 パット見、ninja以外はどれも良さそう。
moqupsは使いやすそうではある。まーとりあえず、Wireframe.ccってのつかってみますかね。日本語使えるかが問題だが。

Wireframe.cc

safariっぽいインターフェイスだね。

【2019年度版】Webデザイン最新トレンド

Webデザインの最新トレンドはどうなっているか? 
イケてるデザイン会社で働いていたことがありますが、Web制作におけるデザインの最新トレンドの調査は、既に作られているものを見ていきます。
ただし、ディーテールになると、デザインの基礎を学んでいるか否かで、アウトプットの質がかなりかわってきます。よって、デザイン系の専門学校卒の人材を多く抱えている制作会社は、デザインに強い印象があります。

さて、何を見るか?
沢山のサイトのキャプチャを集めたギャラリーサイトを見るのが手っ取り早いですね。
トレンドを見ていきましょう。傾向や感想を箇条書きで書いていきます。

Web Design Trend
– ヘッダー、フッターがなく、メインビジュアルの上にテキストを載せているデザインが多い
muuuuu
– MVのメッセージが英語が多い
– どこもfontをサイトに併せている
– 落ち着いたデザインが多い。奇抜な構成は少ない
WebDesignClip
– サービスと画像が直結している
– スタイリッシュが多い。文字は全体的に少ない
io3000
– pixta、potolio などにある画像をそのまま使っているサイトは殆どない
– 普段、殆ど目にしないような写真を大体使ってる
– background white, font-color blackが異常に多い
– 日本人男女の写真はほぼない
responsibe design japan
– 高品質の価値提供系が多い
写真をグラフィック加工しているサイトはカッコいい、目立つ
– 動画はあまりない
S5-Style
– 3Dを表現しているサイトは子供っぽくみえる。
– 日常のちょっとしたお洒落が多い。イメージでいうと、自由が丘。
81-web.com
– 飲食系はカメラマンの腕が光る
– 上部ヘッダーメニューがあると、少し古く感じる
– 冷たい感じが多い
– シンプルなファッションが多い、コテコテは少ない
bookma! v3
– いわゆる昭和感を狙ったデザインも悪くない
– 高層ビルなどは殆どない (一昔前は新宿、東京タワーなどが良く使われていた)
– イラストは基本的にクオリティが非常に高い
awwwards.
– 動きがあるのはやっぱりカッコいい!
WPesign Gallery
– ここだけデザインが古い
WEloveWP
– WordPressでも、ヘッダーがない傾向が顕著

最後にfortune のfuture-50のサイトのデザインを見ておきましょう。
http://fortune.com/future-50/

1位 workday
確かに今っぽいw

2位 weibo
weiboは良くも悪くも中国っぽい。デザインもbaidoと似ている。

3位 ServiceNow
うおおおおおおおおおお、かkkkkkkkkkkkkっけ
こういうの作ろ^^

4位 ctrip.com international
ファーストビューに検索ボックスがあると、なんかいいね♪

5位 vipshop holdings
なんだ、このふざけた社名は?? 大きい声では言えんが、明らかにvipを対象にはしてないよね。
デザインからターゲット層がなんとなく想像つくわww

6位 NAVER
韓国ではこんな感じか。だいぶ「NAVER まとめ」や「LINE」とはイメージ違いますね。知性を感じる。

7位 vertex pharmaceuticals
あ、これはカッコいい。多分プロのデザイナーがつくってる。素人でこの感じは出せない。

8位 Netflix
なんだろ、コメントに困るなー。何とも言えない感じ。単純に映画があんまり好きでないから、あんまり親しみを持てない というか、上手くいってるのに嫉妬する

9位 s.f. holdings
ホームページなし??????? マジかよ。すげー

10位 Salesforce
キャラクターが今っぽい。悪くないね。salesforce

ということで、ある程度、トレンドが見えてきたかも。