バイトでRepositoryパターンを使ったよ

今日のタスクは前回の続き
kurowasi2525.hatenablog.com

前回はIoCとは何かなどを理解できていなかった
この一週間の暇な時間で

を読んでIoCやDIを勉強したから大丈夫だろう
(この本はLaravelの概念系が書いてある本。パソコンの前でカタカタやりながら読む本ではないですね)
(電車などで読むのには適していると思う)

qiita.com

1. まずはModelに対応するRepositoryを作成
(今回はすでにRepositoryが作成してあった)

2. 次にControllerに対応するアプリケーションを作成

3. Service Providerに作成したアプリケーションをmake&bind

4. 次にControllerに対応するReponseを作成

5. Service Provideに作成したReponseをmake&bind

6. 次にControllerに対応するResponseを作成

7. Service Provideに作成したResponseをmake&bind

一応流れが完成した
後はvalidationを行う機能・DBに情報を記録する機能を作成するのみ

Laravelのvalidationについて調べていこう

こちらの記事が便利そう
qiita.com

DBの仕様と詳細設計の仕様を見ながらValidationコードを書いていく

詳細設計とDB定義書とLaravelのModelが全然違うんですが。。。
詳細設計での名前とDB定義書での名前は違うし、DB定義書に書いてあるプロパティがModelではなかったりするし

何を信じれば良いのだろうか

— 高木徹 (@TTrpbm) 2017年8月29日

上記の理由により、まぁまぁ適当な感じで完成

その後DBに情報を記録する機能の作成も終わり

Laravelでリポジトリーパターンを適用させるだけでこんなに時間がかかってしまった

— 高木徹 (@TTrpbm) 2017年8月29日

リポジトリーパターンというか、今回のプロジェクトのルールに従うのに大きく時間を取られました
今回のは、

自作のControllerは、【自作のApplication】と【自作のRequest】と【自作のResponse】と【Request】と依存関係
自作のApplicationは、【自作のRepository】と依存関係

みたいにとても複雑になっていた
(上記の書き方で合っているのかわからない)

久しぶりにNVMを使ってNodeの環境構築を行って、Laravel5にはCSRFチェックを行ってるって知りました

NVMを使ったNodeのバージョン管理できる環境構築
※環境構築手順書の記事ではありません。
※正しい手順でやりたい場合は、他のサイトを読むことをお勧めします。

最初は別プロジェクトの環境構築から
フロント側をVue.js バック側をnodeのexpressを使うらしい
expressは昔に使ったことがある。Vue.jsは触りたいと思っていたからすごい嬉しい

まずは、npmを入れよう
会社のPCにはbrewが入っているから、今回はbrewを使って入れよう

$ brew --version
Homebrew 1.2.1
$ brew install node

あ。。。brewのupdateするのを忘れてた。。。
いつも先にupdateをするんだけど、まぁいいか

node 5.3.0 is already installed

あれ？もう入ってるやんけ笑

$node ls-remote

なんでエラー吐くんやって思ったけど、nvmだったわ笑
久しぶりすぎて色々忘れてた笑

nodeは入ってたけど、nvmが入っていないので入れていきます

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash

.bash_profileの中身を見たけど、pathの設定がしてあった
Why?　勝手にやってくれるようになったの？

Gitからプロジェクトをcloneして、npm install

なんかnodeのバージョンが変みたいなエラーが出てた気がする

$npm run hoge

起動しない。。。webpack関係のエラーみたい
nvmでnodeのバージョンを変えて色々やってみる
(バージョンの指定がしていない環境構築手順書ってどうなん？)

色々やってみたけど
nodeのバージョンをv6.11.2にして、エラーが出まくっててよくわからなかったので、
エラーに書いてあったコマンドを実行
バージョンの違いによって起きた問題をリビルドして直す感じ？

npm rebuild node-sass --force

正直何が問題だったのかよくわかりませんでしたが、
うまく動作するようになりました

多分、npm installをした際のnodeのバージョンが古くて、うまくモジュールをインストールできていなかった？
nodeのバージョンをあげて、リビルドすることでいい感じの環境になったのかな？

環境構築は完了
次の作業に移る

Laradockのシステムの修正
次は前回の続きで、Laravelの案件

アプリケーションからDockerを起動して、
Laradockを起動

$docker-compose up -d apache2 postgres
$docker ps

URLにアクセスして、ちゃんと表示される
では、GitHubから最新verを持ってこよう

なんかめちゃくちゃコンフリクトしてる。。。

$git reset --hard

とかやっても、ローカルの変更が元に戻ってもpullしようとするとコンフリクトが起きて
もう一度statusを見てみると、新しいファイルと変更だらけ。。。

よくわからないから、社員さんに聞いたけど、
削除して、もう一度クローンした方が早いよと言われてそうすることに
Laravelのバージョンを変えたのがコンフリクト大量発生の原因らしい

あまりこういうパワー系は好きじゃないけど、やるか
調べたいけど、一応バイトだから給料もらってるわけだし、自己満足にお金をもらうわけにはいかない
最短時間でできるならそれをやらなければ

元に戻った
DBのMigrationをするみたい
MigrationはNodeでしかやったことないから、PHPではどうやってやるんだろう
laravel Migration 検索検索！

どうやら

$php artisan migrate

でいけるみたい

DBに接続しようとしてSequel Proを使ったんだけど、これってPostgres対応していないんだね笑
今まで会社でもプライベートでもコマンドでやってたから知らなかった

PSequelがいいみたいなので、これをインストールしてみる

PSequelを使って接続を試みたが、なぜか失敗
コマンドで接続を試みるが、失敗
だけど、今回のシステムを立ち上げてPostgresからデータを取ってくる画面に行くと、
ちゃんとエラーは起きていない(データベースを作っただけで中身は入れてないから、表は空白)

色々調査したんだけどわからなかった
自分の中の結論は、他のプロジェクトでPostgresを扱っていて、そいつがデーモンで動き続けている
よって、接続しようとすると、そっちに接続しようとして、そのUsernameはないよと言われるって感じ
でも、なぜ二つのDocker環境のPostgresに直接接続する方法を今度調べておこう

とりあえず、情報を登録する画面の作成に入る

色々あったけど、今回知ったのはLaravel5からPOST送信でCSRFチェックってのを行っているらしい
だから、Formの中にCSRFのトークンを渡すコードを書くみたい
» Laravelのフォーム送信で「TokenMismatchException in VerifyCsrfToken.php」エラーの対処方法。｜コワーキングスペース管理人のブログ

感想
LaravelでDBに登録する画面を作成していて思ったのは、Laravelの知識がとても足りていない
そして、IoCなどの概念を理解できていないということ

今度調べてブログに書きたいと思う

Chrome62からHTTPページのinputタグに警告が表示されるようになるらしい

はじめに

Web系Developerの方々にGoogleさんから悪魔のメッセージがきてるみたい
Twitterで結構話題になってた

Chrome62でHTTPページのフォームにテキストを入力すると、
「保護されていません」という警告が表示されるようになります。
また、シークレットモードを使用している場合は、
HTTPページにアクセスするだけで「保護されていません」と表示されます。

長期的には、HTTPで配信されるすべてのページを「保護されていません」と明示することを計画しており、
この新しい警告はその一環です。

Flashなくすぞ！Flashなくすぞ！Flashなくすぞ！
の次はHTTPSにするぞ！を本格的に開始するみたい

inputの警告が出るってことは、ほとんどのサイトをSSLに対応させなきゃいけないから結構面倒だね

小学校時代の同級生は、投稿した記事のFacebookのいいねが全部消えてしまうのを残念がっていた
まぁ対策はあるみたいだけど、結構面倒みたい(鼻ほじ)

感想

僕がこの流れを見て思ったことは、SSLって安全なの？ってこと
GoogleさんはHTTPSへの流れにもってこうとしてるけど、
前に僕が研究室友達に聞いた話だと、
『SSLには重大な脆弱性がありTLSへの移行の流れが来てる』っていう話を前に聞いた

jp.globalsign.com

僕はSSL/TLSとかのセキュリティ関係は詳しくないので、よくわかりませんが
『SSLに移行させておいて、すぐにTLSに変えてね！』とかになったら面倒だろうな
(SSLからTLSに変えるのが難しいのかもよくわかってない)

誰か詳しい方いらしたら教えてください！笑

AdminLTEってのを触ってみたよ

はじめに

今日はネイティブアプリを管理するためのWeb管理画面の機能追加がお仕事

まずは前回構築したLaradockを起動しよう！

$ docker-compose up -d apache2 postgres

エラーが出た

ERROR: Couldn't connect to Docker daemon. You might need to start Docker for Mac.

Docker for Macってインストールしたらパソコン起動時に勝手に起動するのかと思ってた
自動起動の設定があると思うけど、家に帰ってから調べることにしよう

Laradockの起動もできたし、URLにアクセスしたらちゃんと表示される
これで準備完了！
けど、今回のシステムの情報を全く知らないからドキュメントを読んでいこう

社員さん曰く、できるだけパーツ化してやって欲しいとのこと
見た目はAdminLTEを使っているらしい(初めて聞いた)
表が多いためうまくパーツ化できていないらしい
(現在はテーブルで実装)
テーブルはあまり好きじゃないからFlexかGrid Layoutを使いたいところ
(前勉強したけど、その後使ってないから使ってみたい笑)

kurowasi2525.hatenablog.com

MacでDocker構築・laradockを使ってみる

はじめに
３ヶ月ぶりにバイトに来た
(１ヶ月ぶりだと思ってたけど、社員さんに３ヶ月ぶりだねと言われて時の流れの早さに驚愕した)
(それだけ卒業研究に集中していた証拠だろう)
久しぶりすぎなので、まずは環境構築からしてほしいとのこと
今作っているものは、Dockerでやることになったみたいなので、Dockerの構築をまずはしてほしいみたいなので
ここに書いていこうと思う
(リモートの人が２日前にこのシステムを作り、社員さん１人が手順書を見て環境構築に成功させた。)
(成功した社員さんは今日出社しておらず、他の社員さんに情報共有はされておらず。)
(自分以外の数人も同時に環境構築に取り掛かる)

Docker構築手順

まずは下記のリンクにアクセスして、これの手順に 従っていくみたい
docs.docker.com

英語やんけー
英語は苦手なんですよね

Docker for MacはMacで実行するために必要なものが全部入っているみたい
安定verと開発中のやつ(次期搭載機能)？があるみたい
Mac OS X El Capitan 10.11以上でMMU仮想のサポートが必要みたい(4GB以上のRAMが必要)

HEIFという画像フォーマットが今後主流になるらしい！？

今回もTwitterを見ていたら、HEIFがすごいぞ！ってつぶやきがあったので、調べてみた

HEIFとは？
High Efficiency Image File Formatの略
(エイチ・イー・アイ・エフ、ヒーフって呼ぶらしい)

MPEGによって開発された画像フォーマットの標準規格

MPEG

Moving Picture Experts Groupの略
ビデオとオーディオに対して符号を付与する基準の開発責任を負ったISO/IECのワーキンググループ

JPEGに変わるかもしれないものらしい

JPEGと比較しての利点

• PEGのおよそ半分のサイズ
• 解像度が高い
• 画像の色は最大１６ビットカラー(JPEGは８ビットカラー)
• 一連の画像にすることができる(GIFの代わりになる可能性も)
• 透明度サポート
• いつでも編集を元に戻すことができる(画像を変更したり再保存することはない)

なぜ話題になった？
WWDC2017(Worldwide Developers Conference)のiOS11から画像の保存をJPEGからHEIFにする！
って言ったことで話題になったみたい

Appleの最新のiDevicesにはHVEC、つまりHEIFのためのハードウェアサポートが組み込まれている
だからシステムやバッテリーに負荷をかけずに画像を超高速でエンコードしてデコードできる

参考資料

www.cultofmac.com

「HEIF」ってなに？高画質で軽量化！iOS11から変わるiPhone写真の保存形式を調べてみた | さくっとふぉとらいふphotolog.aiko15.com

Moving Picture Experts Group - Wikipedia

floatもflexも古い？Grid Layout Moduleの時代が来るらしい

はじめに
大学３年生の時に、小学校の同窓会に行ったらWeb系の会社をやっている人間がいて、
数件の案件を手伝わせていただいたときがあった

その時にレイアウトの指導をしてもらった際、
自分はfloatを使っていた

『やっぱりfloat使うよね。時代はflexなんだよ。float使っているのはださいよ』
と言われ、flexを教えていただき自分はflexの魅力にやられ信者になった

それからサイトを見てflexで書かれたコードを笑い、flexを崇める日々が続いた
(おしゃれなサイトは大体flexを使ってる)

そんな僕がTwitterを見ていると、『flexは古い。時代はGrid Layoutだ』みたいな記事を見たので
1時間ほど調べた情報を書いていこうと思う

利点
・聖杯レイアウト問題というのを解決できるらしい
(Web業界にいたことはないので、初めて聞いた)

聖杯レイアウト問題とは
List ApartにMatthew Levine氏がIn Search of the Holy Grailというコラムを発表したらしい
彼が発表したのは
ヘッダ、フッタ、メインコンテンツ、両側のサイドバーの４つのセクションで構成された３カラムレイアウト

• 中央のコンテンツは可変、両側のサイドバーは固定の幅
• マークアップではコンテンツは、2つのサイドバーより上に記述される
• コンテンツとサイドバーはそれぞれの内容にかかわらず、同じ高さ
• 最小限のマークアップしか必要にならないこと
• コンテンツの量が少なかったとしても、フッターはページの下部に固定されること

下記の画像がわかりやすい？
http://coliss.com/wp-content/uploads-201602/2016040912-02.gif

・アイテム間の余白調整が手軽
・簡潔に書ける

対応ブラウザ

• Chrome 57 (2017年3月)
• Firefox 52 (2017年3月)
• Safari 10.1 (2017年3月)
• iOS Safari 10.3 (2017年3月)
• Internet Explorer 10 (2017年3月)
• Edge 12 (2017年3月)

2011年頃？に生まれ技術らしい
だが、最近にモダンなブラウザが一気に採用し、
使っても大丈夫な感じになった
(これから流行っていくのかな？)