今日のYWT やったこと Travelog カードに表示されるカルーセルのサイズや、表示の仕方見直し カルーセルの矢印が白背景だと見にくいので、background-colorを設定 同じくインディケーターが見にくいのでbackground-color設定 画像サイズが大きいとアップロードできずにnginxの413 Request Entity Too Largeが出るのを解決 EC2のインスタンス立ち上げっぱなしが心配なので、CloudWatchでログを収集することにした わかったこと CloudWatch 以下を参考にログ収集してみた クイックスタート: 実行中の EC2 Linux インスタンスに CloudWatch Logs エージェントをインストールして設定する 【AWS】Amazon CloudWatch Logs でログ収集をやってみた nginxのエラー nginxのエラー「413 Request Entity Too Large」の解決方法 EC2内のnginx.confを編集する必要がある コンソールでec2にログイン sudo vi /etc/nginx/nginx.conf client_max_body_size 20M追記 sudo service nginx reload 解決 次やること 細かなカードのデザインを考える 画像がないときもカルーセルが表示されてるのをifとかで消す

今日のYWT やったこと Travelog カードのデザイン カルーセルで、画像が勝手にスライドするのを止める カルーセルの画像を、Articleに紐付いているphotosにする 画像のheightによって、カルーセルのフィールドが伸びたり縮んだりするのを防ぐ MTG 上のカルーセルのフィールドが伸びたり縮んだりする問題を解決 画像のドラッグ＆ドロップでのアップロードとプレビューについて参考記事や参考になりそうなコードを教えてもらった 独自ドメインのとり方、HTTPS化 AWSでネットワーク構築するときどんな風にすすめるか、実際の例も見せてもらった わかったこと カルーセル <style> .carousel-item img { width: 250px; height: 250px; object-fit: contain; } </style> object-fitを使うことで、カルーセルの表示するフィールドの大きさを指定することができる 1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー MTGででてきた参考記事たち Document: drag イベント AjaxでバイナリのJPEG画像データを受け取って表示する 次やること デザインを進める

今日のYWT やったこと Travelog リサイズした画像のパス取得 S3の画像用バケット作成 ローカルからS3へのアップロード ローカルからS3へリサイズ後の画像アップロード 本番環境で普通の画像アップロード 本番環境でリサイズ後の画像アップロード ローカルでS3にアップロードした画像を読み込む 本番環境でS3にアップロードした画像を読み込む 更新処理をS3仕様に書き換え カードにカルーセルをつけて、そこに写真を表示させるようにするため、とりあえずサンプルコードをコピー カルーセルの自動スライドを止めるために<script>でjQuery書くも、エラーに苦しむ S3へのバケット作成+画像アップロード LaravelでAWS S3へ画像をアップロードする Intervention Imageで、リサイズ後の画像アップロード LaravelでS3へファイルをアップロード&参照・表示 本番環境で画像アップロードができないエラーの解決 GD Library extension not available with this PHP installationエラー わかったこと putFileでS3に画像アップロードすればパスを返してくれるけど、引数にファイル形式を期待しているので、Intervention Imageで加工したあとの画像Imageだと使えない EC2の中のLinuxマシンに画像加工用のGDをインストールしてなかったのが画像アップロードできない原因 次やること カルーセルの中の画像をArticle->photosにすればOK

今日のYWT やったこと Travelog 画像圧縮 方法を調べる Intervention Imageを使ってみることにする Qiitaの記事通りやってみるものの、うまくいかない Articleと紐付いていることと、保存先のパスが間違っていた 画像のアップロードはできるが、storage_keyに入れるための画像パスがうまく取得できない 強引に文字列連結してなんとかする わかったこと Intervention Image 画像圧縮してからアップロードのコード // 画像アップロード if ($request->file('files')) { foreach ($request->file('files') as $index=>$e) { // $storage_key = $e['photo']->store('uploads', 'public'); $filename = $e['photo']->getClientOriginalName(); $photo = Image::make($e['photo']) ->resize(800, null, function ($constraint) {$constraint->aspectRatio();}) ->save(storage_path('app/public/uploads/' . $filename)); $article->photos()->create([ 'name' => $filename, 'storage_key' => 'uploads/' . $storage_key->filename . "." . $storage_key->extension, ]); } } Image::makeで画像ファイルのための場所を新規作成する感じ？ resizeでリサイズ ->save()で変更内容を保存 AWS Lambda サーバーレス コードを実行する環境だけを提供 サーバーがないのでサーバー維持費的なものがかからない 次やること ファイルパスは今かなり強引な方法で取得しているけどこれをどうにかしたい

今日のYWT やったこと Travelog 部分検索実装 Articleのcontentカラムの内容だけ検索を実装 ルーティング作成 コントローラ作成 navbarに検索バー設置 ついでにnavbarのitemを中央よりに コントローラにメソッド追加 検索結果を表示するビュー作成 Articleのcontentとtitleを検索できるようにする orWhereを使ってみる Articleに紐付いたTagも検索できるようにする 最初は諦めてたけどorWhereHasで実装できると教えてもらう クエリビルダのwhenを使ってifを消す ついでにloadで発行されるSQLをへらす わかったこと 検索 最終的なコード SearchController.php <?php namespace App\Http\Controllers; use App\Article; use Illuminate\Http\Request; class SearchController extends Controller { public function search(Request $request) { $keyword = $request->input; $query = Article::query() ->when(isset($keyword), function($query) use ($keyword){ $query ->where('content', 'LIKE', "%{$keyword}%") ->orwhere('title', 'LIKE', "%{$keyword}%") ->orWhereHas('tags',function($query) use($keyword) { $query->where('name', 'LIKE', "%{$keyword}%"); }); }); $articles = $query->get()->sortByDesc('created_at') ->load([ 'user', 'likes', 'tags', 'photos' ]); return view('search.index', ['articles' => $articles]); } } Article::query()でクエリビルダを発行 when(isset($keyword))で、検索ワードがある場合に以下のクエリを発行する orWhereで、or検索的な挙動実装 リレーション先のタグモデルも検索するため、orWhereHasを使う クロージャの中で変数を使いたい場合、use($keyword)でok loadでSQLの発行回数を減らせるのはこっちでも一緒 viewのほうでは@isset($articles)で条件分岐した S3への画像アップロード バケットは役割ごとに作る CodeDeployで作ったやつを使いまわそうと思ったけどそれはあんまよくないみたい 画像の圧縮をしないとすぐいっぱいになりそうなのでそれは実装しないといけないみたい 次やること S3への画像アップロード 画像アップロード前に画像サイズの圧縮

今日のYWT やったこと Travelog CI,CD環境の構築 まずCircleCIだけで自動デプロイ そのあとCodeDeployを使った自動デプロイ Issueでやること管理 わかったこと AWSのエラーでも臆することなくエラーメッセージを読めば分かる git系のコマンドではmasterがmainになっていることを注意する

今日のYWT やったこと Travelog CircleCIでキャッシュを使う(npm) CircleCIでSQLiteからPostgreSQLにする（失敗中） わかったこと どうやらAPP_ENVが悪さをしてそう

今日のYWT やったこと Travelog Gitにあげてしまった環境変数について Git Revertで打ち消しコミットしたけど、そのGitHubにあがってしまっているので環境変数が見えてしまう そこで git filter branchで該当する環境設定ファイルをすべての履歴からなかったことにする さらにGithubにメールし、問題のファイルを含むPull Requestとコミットログを削除してもらうようにメールした CircleCI 設定をしなおす わかったこと 環境変数をCircleCIでセットするには、CircleCIのEnvironment Variablesに該当するキーを追加すればよい git filter branchで歴史の改ざんができる

今日のYWT やったこと Travelog テストをCircleCIで回す circleciの設定ファイルに追記 test用の環境変数を用意 そしたら間違ってSendGridのAPI Keyを上げてしまったのでSendGridの設定からそのAPIを削除 ついでにGit Revertでcommitの打ち消し

今日のYWT やったこと Travelog テストを書く わかったこと データベースに関しては ブラウザなどを通して開発環境のサンプルアプリケーション触っている時には.envに設定しているPostgreSQLが使用される テストではphpunit.xmlに設定しているSQLiteが使用される テストの書き方のパターンとして、AAA(Arrange-Act-Assert)というものがある。 日本語で言うと、準備・実行・検証

今日のYWT やったこと Travelog SendGridの設定をし、メールを送れることを確認 MailHogの設定に戻しておく デザインを考える

今日のYWT やったこと Travelog メールの設定 SendGridを使う準備 SendGridに登録

今日のYWT やったこと Travelog Googleログイン実装

今日のYWT やったこと Travelog フォロー機能 ユーザー関連ページの作成 次やること いいねした記事ページは別のページで用意していいかも

今日のYWT やったこと Travelog 編集時に、画像の削除と更新ができるようにする メンターさんにJavaScriptのコードをほぼ書いてもらって、それをもとにコントローラの処理を書く JavaScriptで、削除した画像のサムネイルとボタンも一緒に消えるように わかったこと Laravelで動的にidやクラス名を指定する class="{{ $変数名 }}でいける。難しそう・できなさそうと思っていたのはBootstrapとRailsのテンプレートエンジンslimが組み合わさったときの印象であって、Laravelではそんなことなかった。 サムネイルも一緒に削除する サムネイルにも同じように動的にidを指定し、そのidにphotoのidを指定すればよい。 hidden_fieldを削除するのと同じようにremoveすればOK Updateアクションでの既存画像の削除 in_arrayを使う。 第一引数に、現在記事と紐付いている写真のidをセット $photo->id 第二引数に、更新（削除のみ）後の写真のidが入った配列をセット。hidden_fieldにより渡されている。 $stored_photos 真なら削除しない、偽なら削除されたとみなして削除処理を走らせる。 最後の1枚も削除する場合 $stored_photoがemptyかつ、$article->photosが真（つまり、記事に紐付いている写真がある）なら、という条件分岐をする。 $stored_photoがemptyということは、hidden_fieldから値が渡ってきていない = 既存の写真がすべて削除された、ということなので、削除処理を走らせてしまってよい。 成果物 次やること この編集処理がちゃんとできてるかもう一度チェック リファクタリング

今日のYWT やったこと Travelog 画像編集ページでの画像削除 編集時には画像削除コンポーネントを表示、新規作成時には表示しないように わかったこと jQueryとLaravel Laravel6でjQueryを使うとき、こんなエラーが出たのでここを参考に、<script type="module">と記述して解決した。

今日のYWT やったこと Travelog 編集時のエラーの原因を探る やりたいこと 画像と紐付いた記事を編集時、画像が保持されるようにする 編集ページで送信が押されupdateアクションが発火した時 新しい画像が追加されていれば、その画像のみ新たに登録しArticleと紐付ける 新しい画像が追加されているかどうかの判定が必要 既存の画像が削除されていれば、その画像をphotoテーブルから削除する 画像に変更がなければ、画像テーブルには変更を加えない 現状 editページに紐付いた画像情報を持ってこれていない また、updateアクションで画像を保存する処理がない 困っていること updateアクション時の画像の処理 新しい画像が追加されている時には、画像の登録処理が走ってほしい そのためには上で書いた通り、新しい画像が追加されているかどうかの判定が必要だがその方法が分からない 画像に変更がなければ、画像テーブルには変更を加えないでほしい 画像テーブルに変更は加えないが、Articleの$fillableを通過するためには？ hidden_fieldで渡す？ わかったこと ArticleControllerのEditアクションに articlePhotosという変数を作ってviewに渡し、それを使えば既存の画像情報は持ってこれそう？ ArticleController.php public function edit(Article $article) { $tagNames = $article->tags->map(function ($tag) { return ['text' => $tag->name]; }); $allTagNames = Tag::all()->map(function ($tag) { return ['text' => $tag->name]; }); $articlePhotos = $article->photos; return view('articles.edit', [ 'article' => $article, 'tagNames' => $tagNames, 'allTagNames' => $allTagNames, 'photos' => $articlePhotos ]); } edit.blade.php @csrf <div class="md-form"> <label>タイトル</label> <input type="text" name="title" class="form-control" required value="{{ $article->title ?? old('title') }}"> </div> <div class="form-group"> <article-tags-input :initial-tags='@json($tagNames ?? [])' :autocomplete-items='@json($allTagNames ?? [])' > </article-tags-input> </div> <div class="form-label"> 開始日 </div> <div class="md-form"> <input type="date" name="start_date" class="form-control" required value="{{ $article->start_date ?? old('start_date') }}"> </div> <div class="form-label"> 終了日 </div> <div class="md-form"> <input type="date" name="end_date" class="form-control" required value="{{ $article->end_date ?? old('end_date') }}"> </div> <div class="form-file"> <label for="photo">画像ファイル（複数可）:</label> @if ($article) <?php dd($photos) ?> <input type="hidden" name="files[][photo]" value="$photos"> @endif <input type="file" class="form-control" name="files[][photo]" multiple> </div> <div class="form-group"> <label></label> <textarea name="content" required class="form-control" rows="16" placeholder="本文">{{ $article->content ?? old('content') }}</textarea> </div> edit.blade.phpに、画像情報をこのように渡してみたが、以下のバリデーションエラーで弾かれた。 files.0.photoには画像ファイルを指定してください。 files.0.photoにはjpeg, bmp, pngタイプのファイルを指定してください。 files.1.photoには画像ファイルを指定してください。 files.1.photoにはjpeg, bmp, pngタイプのファイルを指定してください。 また、ddの結果は以下の通り。 次やること この不具合を解決する ための材料を集める また、ここを解決する前にドラッグ＆ドロップでの画像アップロード実装をしたほうが良いかも？

今日のYWT やったこと Travelog タグ付け機能終了 わかったこと ハッシュタグ付け機能 このタグ付けで実装したように、blade側で本文データに#をつけていくより、サーバーサイドでやったほうが良さそう これがメンターの言ってたことか！と思った

今日のYWT やったこと Travelog タグつけ機能 次やること タグ機能終わらせる

今日のYWT やったこと Travelog タグ付け機能実装 InstagramやTwitterのようなハッシュタグ機能をどうしたらいいか考えた わかったこと タグ付け機能 記事本文のフォームを監視する ( Vue? ) # が入力されたら発火し、区切り終わりの文字などが入力されたら（例えば半角スペース、改行など）その直前までをタグとみなす タグとみなしたものは何らかの変数に格納しておき、タグとして登録 記事本文を保存するカラムには #つきの文章として保存 表示する際には、本文表示欄を監視し、 #がついている文章を見て、タグのテーブルに登録されている- かどうかを確認 これで大丈夫そうとのこと 次やること タグ付け機能実装

今日のYWT やったこと Travelog 画像表示用のビュー作成 細かいデザインはなし 画像表示用のビューは分けて呼び出す形に いいね機能（途中まで） わかったこと 画像表示 $article->photosで記事に関連づいた写真全件が取得できる。 複数件あるので1件ずつ処理する。 @foreach($article->photos as $photo)として$photoに格納。 <img>タグで表示させる。 <div class="photos"> @foreach($article->photos as $photo) <img src="{{asset("storage/{$photo->storage_key}") }}" class="img-fluid" alt="Responsive Image"> @endforeach </div> 以外と簡単でしょ。 次やること いいね機能の実装 タグ付け機能の実装？

今日のYWT やったこと Travelog 記事と一緒に画像を投稿できるように わかったこと 画像投稿 エラーの原因 enctype="multipart/formdata"がなかった ddが効かなかった理由 storeメソッド発火前にバリデーションで弾かれてしまっていたため 画像のファイル名を取得 getClientOriginalName() 画像保存のコード public function store(ArticleRequest $request, Article $article) { $article->fill($request->all()); // dd($request, $request->file('files')); // 注意:ここの$request->user()はリレーションメソッドの呼び出しではなく、Requestクラスのインスタンス(ここでは$request)が持っているメソッドで、認証済みユーザーのインスタンスを返している $article->user_id = $request->user()->id; $article->save(); // 画像アップロード foreach ($request->file('files') as $index=>$e) { $storage_key = $e['photo']->store('uploads', 'public'); $filename = $e['photo']->getClientOriginalName(); $article->photos()->create([ 'name' => $filename, 'storage_key' => $storage_key ]); } return redirect()->route('articles.index'); } 次やること 画像を表示させる 細かいビューはあと

今日のYWT やったこと Travelog作成 ログイン機能 記事のCRUD パスワードリセットメール送信 メンターさんとMTG 現状共有 Dependency Injectionについて InterfaceとImplementsを使った「この関数があること」の保証 それによってテストや変更時に嬉しいという話 DIコンテナについて わかったこと Dependency Injectionとは 注：あくまでも現時点の浅い理解 依存性の注入……は結構わかりにくい訳らしい。 オブジェクトの注入 Dependency = 必要なオブジェクト、と訳している人もいた。 <?php namespace App\Http\Controllers; use App\Article; use App\Http\Requests\ArticleRequest; use Illuminate\Http\Request; class ArticleController extends Controller { // 略 public function store(ArticleRequest $request, Article $article) { $article->title = $request->title; $article->body = $request->body; $article->user_id = $request->user()->id; $article->save(); return redirect()->route('articles.index'); } } public function store(ArticleRequest $request, Article $article) このstore()内で引数の型宣言していると同時に、Dependency Injectionしている。 メリット ArticleControllerがArticleクラスへ依存している度合いを下げているので、今後の変更がしやすく、テストがしやすい設計となっている DIしなかった場合 public function store(ArticleRequest $request) //-- ArticleクラスのDIを行わない { $article = new Article(); //-- storeアクションメソッド内でArticleクラスのインスタンスを生成している //-- 以降の処理は同じ $article->title = $request->title; $article->body = $request->body; $article->user_id = $request->user()->id; $article->save(); return redirect()->route('articles.index'); } 上記のように、DIしない場合、メソッド内でArticleクラスのインスタンスを生成することになる = 依存性が高い 開始日と終了日のバリデーション バリデーション 5.8 Laravel 最初のコード public function rules() { return [ 'title' => 'required|max:50', 'content' => 'required|max:10000', 'start_date' => 'required|before_or_equal:end_date', 'end_date' => 'required|after_or_equal:start_date', ]; } これだと、start_dateとend_dateどちらのバリデーションにも引っかかり、エラーメッセージが2つ出てしまう。 まず、以下のように変更 // バリデーションルールを設定 public function rules() { return [ 'title' => 'required|string|max:50', 'content' => 'required|string|max:10000', // 下、バリデーションかけるのはどちらか片方で良い 'start_date' => 'required|date', 'end_date' => 'required|after_or_equal:start_date', ]; } start_dateとend_dateのどちらかにだけバリデーションをかける。 また、データ型でもバリデーションをかけることによって予期せぬ型変換やバリデーションを防ぐ そしてエラーメッセージを編集 // エラーメッセージのカスタマイズ public function messages() { return [ // attribute名 . 引っかかったバリデーションルール => 出したいメッセージ 'end_date.after_or_equal' => '開始日または終了日を確認してください', ]; } こうすることで、end_dateのafter_or_equalのバリデーションに引っかかったときのメッセージをカスタマイズすることができる。 リレーションを呼んでるわけじゃないやつ $request->user()->id; ここの$request->user()はリレーションメソッドの呼び出しではなく、Requestクラスのインスタンス(ここでは$request)が持っているメソッドで、認証済みユーザーのインスタンスを返しているので注意 次やること Travelog実装(2週間後までにAWSあたりまで)

今日のYWT やったこと Laravel リレーションのコードを追う 画像の複数アップロードで使われてたコードを元にメンターさんにどういう意味なのかを聞く それを聞いた上で、仮説を立て、Techpit教材で使われていたuse Illuminate\Database\Eloquent\Relations\BelongsTo;の謎を解く Travelog 記事一覧機能実装 ユーザー登録機能実装 ログイン・ログアウト機能実装 GitHubでイシューテンプレート作成 わかったこと Laravelのリレーション <?php namespace App; use Illuminate\Database\Eloquent\Model; use Illuminate\Database\Eloquent\Relations\BelongsTo; class Article extends Model { public function user(): BelongsTo { return $this->belongsTo('App\User'); } } user();メソッド内のreturn $this->belongsTo('App\User');が、リレーションを実現している Railsでいう以下のコードと「ほぼ」同じ？ class Article < ApplicationRecord belongs_to :user end 違うところは、user()は関連付けるための設定を記載したメソッドで、呼び出せば関連付けられたEloquentを呼び出せる また、use Illuminate\Database\Eloquent\Relations\BelongsTo;はTechpitの教材にしか見当たらず、他のリレーション系の記事にはなかった。 調べたところ、これは戻り値の型宣言を行うために必要で、これをすることでuser(): BelongsToの: BelongsToが使えるようになり、 戻り値がBelongsTo型以外であればTypeErrorを返すようにしている。 photos()は関連付けるために使え、関連付け設定を記載しているメソッド photoは関連づいているデータを取得するための書き方で、 動的プロパティと呼ばれる 次やること Travelog実装を進める メンターさんに聞きたいことまとめる

今日のYWT やったこと 画像複数アップロード機能の、コントローラの処理を追う コードを追い、中にどんな値が入ってるかを調べ、処理をつかむ ddですべての変数を表示 自分なりの理解をコメントに追加 わかったこと storeAs 名前をつけて保存 Laravel側で勝手にリネームされたくない時に使う guessExtension ファイルの拡張子を取得 次やること 関連付けの処理を追う