学習履歴一覧

551件中の 226-250件 を表示

[Laravel]昨日のエラーを解決。Articleコントローラのリファクタリング。画像の処理を切り出し

今日のYWT Laravel Travelog 昨日のエラー解決 ここを参考に、npm rebuild node-modulesをしたあと、npm run watch-pollで解決。 prettierを入れたときに関連パッケージをアップデートしたのが原因か? ArticleControllerのリファクタリング 画像の情報をデータベースに保存する処理をリポジトリに切り出す。 コントローラにあった以下のコードをRepositoryに切り出し、コントローラでは呼び出して使うようにする。 $article->photos()->create([ 'name' => $filename, 'storage_key' => $filepath, ]); PhotoRepository.php php /** * 画像をs3にアップロードしたあと、その画像の名前と保存先をデータベースに保存する処理 * * @param string $filename * @param string $filepath * @param Article $article * @see PhotoUploadRepository::upload */ public function store($filename, $filepath, $article) { $article->photos()->create([ 'name' => $filename, 'storage_key' => $filepath, ]); } ArticleController.php ```php /** * Articleをデータベースに登録する * 画像がアップロードされていたら画像も登録する * * @param \App\Http\Requests\ArticleRequest $request * @param \App\Article $article * * @return Illuminate\Http\RedirectResponse */ public function store(ArticleRequest $request, Article $article) { $article->fill($request->all()); // 注意:ここの$request->user()はリレーションメソッドの呼び出しではなく、Requestクラスのインスタンス(ここでは$request)が持っているメソッドで、認証済みユーザーのインスタンスを返している $article->user_id = $request->user()->id; $article->save(); // 画像アップロード if ($request->file('files')) { foreach ($request->file('files') as $index => $e) { // 配列をそのまま受け取って、それぞれの変数に格納するlist [$filename, $filepath] = $this->photoUploadRepo->upload( $e['photo'], ); $this->photoRepo->store($filename, $filepath, $article); } } // タグの追加 // $requestからタグの情報を一つずつ取り出す // 無名関数の中で$articleを使うため、use ($article)とする $request->tags->each(function ($tagName) use ($article) { $tag = Tag::firstOrCreate(['name' => $tagName]); $article->tags()->attach($tag); }); return redirect()->route('articles.index'); } ``` わかったこと 切り出したときのデータの受け渡し 最初はPhotoRepositoryのstoreに、$articleを渡していなかった。 なので、 undefined method error $articleが出ていた。 よくよく考えてみれば、中で$articleを使っているので、引数で$articleも受け取る必要があった。 public function store($filename, $filepath) { $article->photos()->create([ 'name' => $filename, 'storage_key' => $filepath, ]); } 名前の付け方とファイルの分け方 上のstoreアクションの名前は、最初photoCreateだった。 $article->photo()->createでレコードを新規作成しているし、createを使っているからいいかなと思ったが、メンターさんから あとメソッド名もcreatePhotoだと、まるで写真を生成してるみたいな感じで、呼び出し側からすると違和感がありますね! repositoryに切り出すことで、controllerからすると、dbにレコードをcreateするのは知らなくて良い情報なのです。 コントローラからするとdbにレコードを createするのは知らなくて良い情報という説明でこの命名が不適切である、と感覚は掴めた。 また、このメソッドは、すでに作っていたPhotoUploadRepositoryの中に書いたが、このメソッドがPhotoUploadをするわけではないので、それも直したほうがいいとのことだった。 次やること リファクタリングできそうなら エラーページの実装

Laravel

2020年11月24日(火)

2.9時間

[Laravel]エラーが出たので原因を探る……

今日のYWT やったこと Travelog Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open '/var/www/node_modules/@babel/runtime/regenerator/index.js' 謎のエラーが出たので解決策を探る…… 切り出したリポジトリはそのままに、コントローラの処理をもとに戻す no such file or directory, open '/var/www/node_modules/@babel/runtime/regenerator/index.js'とあるので、この場所に本当にファイルがないのか探す 結果:あった (base) TakahiroKnoMacBook-Pro:laradock k2t$ docker-compose exec workspace bash root@766c7a8b8531:/var/www# cd node_modules/@babel/runtime/regenerator/ root@766c7a8b8531:/var/www/node_modules/@babel/runtime/regenerator# ls -la total 4 drwxr-xr-x 3 root root 96 Nov 19 13:21 . drwxr-xr-x 7 root root 224 Nov 19 13:22 .. -rw-r--r-- 1 root root 49 Jun 22 1984 index.js エラーメッセージで出てる、./node_modules/@babel/runtime/regenerator/index.jsのほうのファイルを見てみると、上で確認した index.jsと同じ 本番環境(https://trave-log.work/) ではこのようなエラーが出ていないので、このブランチで行った変更が原因かと思うが、npmをいじったのは2つぐらい前の作業ブランチでのことだし、今回のブランチで現時点での変更は ArticleRepositoryに allTagNamesを切り出したぐらい。 ArticleControllerで切り出したRepositoryを使う形でallTagNamesに値をセットしようと思ったが、エラーが出たので以前のコードに戻した。 わかったこと 上のエラーで vueを使っている機能がすべて使えなくなっている 次やること エラーの解決

Laravel

2020年11月23日(月)

1.0時間

[Laravel]課題アプリ作成。バリデーションでbailを使ってみる。ページネーション実装。写真の加工・投稿処理がstoreとuploadで重複してるので、リポジトリ作って切り出してみる。

今日のYWT やったこと Travelog バリデーション ページネーション Fat Controllerの解消を目指す VSCode拡張や設定 わかったこと カスタムバリデーション bail、てっきり一つ引っかかったらそのあとの他のカラムに対するバリデーションルールも飛ばしてしまうのかと思った。 |を使って一つのカラムに複数のルールを設定しているとき、どこかのルールに引っかかったらそのカラムの残りのバリデーションルールの判定を停止する。 // 画像ファイル 'files.*.photo' => 'bail|image|mimes:jpeg,bmp,png', こう書けば、imageのルールに引っかかったらmimesはチェックしない。 コレクションでページネーション コレクションに対して、直接paginateは効かない。 ので、やり方を調べた。 Laravelで独自のページネーターを作成する Laravel pagenationリンクのhttps化 Laravel 5.7 データベース:ペジネーション forPageでコレクションでもページネーションができるようになる! public function index(Request $request) { $articles = Article::all()->sortByDesc('created_at') ->load([ 'user', 'likes', 'tags', 'photos' ]); // ページネーション用 $articlePaginate = new LengthAwarePaginator( // forPageでコレクションでもページネーションできる $articles->forPage($request->page, 5), $articles->count(), 5, null, ['path' => $request->url()] ); ページネーションでもHTTPS通信を可能にする AppServiceProvider.phpに、以下の記述を追加。 public function boot() { if($this->app->environment('production')) { \URL::forceScheme('https'); // ページネーションのURLもhttpsに対応させる $this->app['request']->server->set('HTTPS','on'); } } リポジトリパターン コントローラの処理をリポジトリに移して、コントローラを見た時にEloquentのやりとりがないように・考えなくてもいいようにする そうしないとテストがまともに書けないから。 コーディングしてからテストだと人間は都合の良いテストを書く。だからテスト駆動開発が生まれた。しかしテスト駆動開発は人間には早すぎるって言ってた。 次やること ArticleControllerの処理をリポジトリに切り出してみる!

Laravel

2020年11月18日(水)

5.1時間

[Laravel]課題アプリのバリデーションをカスタマイズしたい

今日のYWT やったこと Travelog バリデーションメッセージの編集 バリデーションのドキュメント読む わかったこと ArticleRequest.phpに以下のような画像バリデーションのコードがある public function rules() { return [ // 中略 // 画像ファイル 'files.*.photo' => 'image|mimes:jpeg,bmp,png', ]; } imageで画像(jpg、png、bmp、gif、svg、webpのどれか)形式かチェックし、 mimes:jpeg, bmp, pngで画像の中でもjpeg, bmp, pngであることを求めている。 この状態で、例えばまず image のバリデーションに引っかかるようなファイル(例えば今回はzip)をアップロードすると、バリデーションエラーメッセージが2つ出てしまう。 アップロードするファイルには画像ファイルを指定してください。 アップロードするファイルにはjpeg, bmp, pngタイプのファイルを指定してください。 これを、imageのバリデーションに引っかかった時点で mimes のチェックはしない、もしくは mimesのほうのバリデーションエラーメッセージを表示しない、という挙動にしたいと思った。 以前、教えてもらったように、エラーメッセージのカスタマイズでできないかと思い以下のように書いてみた。 // エラーメッセージのカスタマイズ public function messages() { return [ // attribute名 . 引っかかったバリデーションルール => 出したいメッセージ 'end_date.after_or_equal' => '開始日または終了日を確認してください', 'files.*.photo.mimes|files.*.photo.image' => 'jpeg, bmp, pngタイプの画像ファイルをアップロードしてください', ]; } しかしこれだと、エラーメッセージは上で貼ったものと変わらず同じ このようなケースだと、バリデータの作成を使わないといけないかもしれない。 次やること バリデーションカスタマイズ終わらせる ページネーション実装

Laravel

2020年11月17日(火)

1.1時間

[Laravel]LP作成、独自ドメイン取得し設定、SSL化、画像アップロードできない問題を解決(メモリ不足)

今日のYWT やったこと Travelog LP作成 最低限の情報置いてとりあえず完成 タグが更新できない不具合を修正 お名前ドットコムでドメイン取る Route53で独自ドメインを設定してEC2にデプロイしたアプリを紐付ける 6時間ぐらいやったやつら - SSL化 - 画像のアップロードが失敗する原因を探る - EC2で使えるメモリの量を増やす わかったこと 独自ドメイン お名前ドットコムでドメイン取るのは意外と簡単 .workなら年間1円で取れる この通りやればできる 【ドメイン取得】お名前.comとawsでドメイン取得 反映には時間がかかることもあるので注意する SSL化 正直いまだに分かってないことが多いが、ロードバランサーまではSSL化して、ロードバランサーからEC2まではしなくても問題ない ロードバランサーを作成するときに、HTTPSとHTTPの両方のターゲットグループを作成しておく ロードバランサーのDNSで接続してみたりする また、bladeで使ってるassetなどもhttps化しないと、CSSのスタイルなどが読めない それを実装する魔法のコード app/Providers/AppServiceProvider.php php public function boot() { if($this->app->environment('production')) { \URL::forceScheme('https'); } } php-fpmをrestart 完了 EC2のターミナルで打つコマンドたち php-fpmの再起動 systemctl restart php-fpm Laravelのファイルをいじるときのやつ sudo su - webapp nginxのエラーファイルとか見るとき、ルートユーザーでログインするやつ sudo su - メモリが足らなくてエラーログが出ない 画像のアップロードだけでなく、加工もしているので、EC2のメモリが足らずに画像アップロードに失敗していた。 ec2userでログイン中、/etc/php.iniを編集し、memory_limitを上げた 次やること ページネーション

Laravel
Bootstrap
AWS

2020年11月16日(月)

8.0時間

[Laravel]課題アプリのデザイン。レスポンシブ対応させる。LP作成する(途中)

今日のYWT やったこと Travelog デザインをほぼ終わらせる レスポンシブを考える LPを作成する わかったこと レスポンシブ こんな感じで、Scssファイルにスタイルを書くと端末のwidthで表示を変えられる // 768px以上の画面サイズで適用されるスタイル(タブレット〜PC) @media (min-width: 768px) {} // 768pxより下の画面サイズで適用されるスタイル(タブレット以下) @media (max-width: 767.98px) {} スマートフォンサイズの時、PCモニターサイズのスクリーンショットを使ってしまうと見にくいので、LPのアプリの画面のスクリーンショットをviewportで変えたい <img srcset="">と<picture> <source> srcsetで画像をレスポンシブやRetinaディスプレイに最適化 <img srcset>で、ウィンドウ幅で画像を切替えられる……とあるものの、Laravelのマスタッシュを埋め込んだ上でwidthを指定するとうまくいかなかったので、下の<picture> <source>を試した。 <div class="container-1"> <!-- ブラウザのwidthで画像を変える --> <picture class="demo-image img-fluid"> <source media="(min-width:768px)" srcset="{{ asset('images/lp-indexpage-lg.png') }}" class="img-fluid"> <img src="{{ asset('images/lp-indexpage-sm.png') }}" class="img-fluid"> </picture> <p class="mt-3">写真をメインとし、邪魔しないスッキリとしたデザイン</p> </div> min-widthで◯◯px以上の時の画像を指定し、<img src>でそれ以下の時の画像を指定した。 画像が中央に来ない 画像の親要素にtext-align: centerで解決 次やること LP完成させる SendGridの再設定 環境変数をセット

Laravel
Bootstrap

2020年11月15日(日)

6.6時間

[Laravel]課題アプリのデザイン [その他]TechCommitの交流・相談会に参加しデザインのフィードバックもらう

今日のYWT やったこと Travelog デザイン ユーザー関連ページのデザイン完了 交流会に参加してフィードバックもらう いじる前のデザインのほうがシンプルで良いと言われる デザインをシンプルに navbarの色を濃い緑に card-headerの背景色を消去 cardのbox-shadowを上下左右すべてにつけて浮いてるようにする 追加のデザイン navbarのマイページ・ログアウトがactiveになったときの背景色変更 画像のある記事が2つ以上ある時、古い記事のカルーセル矢印ボタンを押すと一番新しい記事の画像が切り替わってしまう不具合を発見したので対処する わかったこと カルーセルの扱い 原因 カルーセルのdata-targetを、固定値で設定してしまっていた →本来は画像ごと・記事ごとに設定するべきだった 解決のためにやったこと まず、カルーセルを定義している一番外側のdivに記事ごとのidをセット html <div id="carousel-{{ $article->id }}" class="carousel slide carousel-fade mt-2" data-ride="carousel" data-interval="false"> <ol>で囲まれたインディケーターの<li>要素のdata-target属性に、上でつけたidと同じものをセット <li data-target="#carousel-{{ $article->id }}" data-slide-to="{{$loop->index}}" class="active"></li> 画像を切り替えるためのボタンのhref属性にも上でつけたのと同じものをセット <a class="carousel-control-prev" href="#carousel-{{ $article->id }}" role="button" data-slide="prev"> <a class="carousel-control-next" href="#carousel-{{ $article->id }}" role="button" data-slide="next"> これで完成。 CSSの疑似要素active クリックしている時 次やること デザイン完全に終わらせる SendGridの設定 GoogleAPIの設定 LP作成

Laravel
Bootstrap

2020年11月14日(土)

5.2時間

551件中の 226-250件 を表示