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

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

travis CIでvagrantからS3にデプロイ

まず、vagrantでrubyが入っているか確認します。
[vagrant@localhost deploy]$ ruby -v
ruby 2.3.1p112 (2016-04-26 revision 54768) [x86_64-linux]

ruby 2.3.1ですね。travisをインストールします。
[vagrant@localhost deploy]$ gem install travis
Fetching: multipart-post-2.0.0.gem (100%)
Successfully installed multipart-post-2.0.0
Fetching: faraday-0.15.4.gem (100%)
Successfully installed faraday-0.15.4
Fetching: faraday_middleware-0.12.2.gem (100%)
Successfully installed faraday_middleware-0.12.2
Fetching: highline-1.7.10.gem (100%)
Successfully installed highline-1.7.10
Fetching: backports-3.11.4.gem (100%)
Successfully installed backports-3.11.4
Fetching: multi_json-1.13.1.gem (100%)
Successfully installed multi_json-1.13.1
Fetching: addressable-2.4.0.gem (100%)
Successfully installed addressable-2.4.0
Fetching: net-http-persistent-2.9.4.gem (100%)
Successfully installed net-http-persistent-2.9.4
Fetching: net-http-pipeline-1.0.1.gem (100%)
Successfully installed net-http-pipeline-1.0.1
Fetching: gh-0.15.1.gem (100%)
Successfully installed gh-0.15.1
Fetching: launchy-2.4.3.gem (100%)
Successfully installed launchy-2.4.3
Fetching: ethon-0.11.0.gem (100%)
Successfully installed ethon-0.11.0
Fetching: typhoeus-0.8.0.gem (100%)
Successfully installed typhoeus-0.8.0
Fetching: websocket-1.2.8.gem (100%)
Successfully installed websocket-1.2.8
Fetching: pusher-client-0.6.2.gem (100%)
Successfully installed pusher-client-0.6.2
Fetching: travis-1.8.9.gem (100%)
Successfully installed travis-1.8.9
invalid options: -SHN
(invalid options are ignored)
Parsing documentation for multipart-post-2.0.0
Installing ri documentation for multipart-post-2.0.0
Parsing documentation for faraday-0.15.4
Installing ri documentation for faraday-0.15.4
Parsing documentation for faraday_middleware-0.12.2
Installing ri documentation for faraday_middleware-0.12.2
Parsing documentation for highline-1.7.10
Installing ri documentation for highline-1.7.10
Parsing documentation for backports-3.11.4
Installing ri documentation for backports-3.11.4
Parsing documentation for multi_json-1.13.1
Installing ri documentation for multi_json-1.13.1
Parsing documentation for addressable-2.4.0
Installing ri documentation for addressable-2.4.0
Parsing documentation for net-http-persistent-2.9.4
Installing ri documentation for net-http-persistent-2.9.4
Parsing documentation for net-http-pipeline-1.0.1
Installing ri documentation for net-http-pipeline-1.0.1
Parsing documentation for gh-0.15.1
Installing ri documentation for gh-0.15.1
Parsing documentation for launchy-2.4.3
Installing ri documentation for launchy-2.4.3
Parsing documentation for ethon-0.11.0
Installing ri documentation for ethon-0.11.0
Parsing documentation for typhoeus-0.8.0
Installing ri documentation for typhoeus-0.8.0
Parsing documentation for websocket-1.2.8
Installing ri documentation for websocket-1.2.8
Parsing documentation for pusher-client-0.6.2
Installing ri documentation for pusher-client-0.6.2
Parsing documentation for travis-1.8.9
Installing ri documentation for travis-1.8.9
Done installing documentation for multipart-post, faraday, faraday_middleware, highline, backports, multi_json, addressable, net-http-persistent, net-http-pipeline, gh, launchy, ethon, typhoeus, websocket, pusher-client, travis after 18 seconds
16 gems installed

travis setupをする?
[vagrant@localhost deploy]$ travis setup s3
Shell completion not installed. Would you like to install it now? |y| y
Can’t figure out GitHub repo name. Ensure you’re in the repo directory, or specify the repo name via the -r option (e.g. travis -r /)

ん??
とりあえずtutorialを見てみよう。
https://docs.travis-ci.com/user/tutorial/

.travis.ymlをリポジトリに置くと書いてます。
>Add a .travis.yml file to your repository to tell Travis CI what to do. The following example specifies a Ruby project that should be built with Ruby 2.2 and the latest versions of JRuby.

deploy:
  provider: travis-s3
  access_key_id:
  secret_access_key:
    secure:
  endpoint:
  region: ap-northeast-1
  bucket: travisci-s3
  local-dir: /
  acl: public_read
  skip_cleanup: true
  on:
    repo: hpscript/travis-s3
  branches:
    only:
    - master

あれ、これ、githubにpushしたらaccess_keyとsecret_access_key漏れてしまうやんけ。
publicだと使えない??

Vagrantfileのsynced_folderとは?

vagrantのsynced_folderを利用することにより、ホスト、ゲスト間でのファイル同期が可能。

Vagrant.configure("2") do |config|
  # other config here

  config.vm.synced_folder "host_path", "guest_path", options...
end

vagrant up時に有効化

ということは、

local.vm.synced_folder ".", "/vagrant",

. が問題だーーーーーーーーーーーーーーー おkkkkkkkkkkkkkk なるほど。

サイトのパーミッション変更のことだ。

:owner => "vagrant", :group => "apache", :mount_options => ["dmode=775,fmode=775"]

おk 問題はほぼ解決^^