Laravel開発、booklistに詳細表示を追加
ログイン後のトップページや、所有書籍のトップページにはそれぞれ本の情報が一覧表示される仕様となっています。
リストには写真とタイトルが表示されているのですが、書籍の詳細情報をここに加えることにしました。
元々何かしらの情報を追加する予定でしたので、このタイミングで作業することにしました。
今回の目的
書籍情報リストに詳細情報を表示させる
なぜやるか
- 元々書籍情報を表示させるスペースと予定していた。
- 今回の詳細情報を実際に表示させることで、リスト上である程度の内容が確認できるようにさせたい。
やりたいこと
- リスト情報に詳細情報を表示させる。
- 書籍情報と所有書籍のページで表示するデータを変更する。
やったこと
- リスト一覧表示の現状を確認する
- リストに詳細情報を表示させる
- 詳細情報の表示上限を設定する
- 表示ページによって内容を変更する
実施内容
リスト一覧表示の現状確認
まずは現状の表示を確認します。
# 書籍情報ビュー
# 所有書籍ビュー
画像とタイトルが表示されていますが、タイトルの下部にスペースがあります。
ここに今回書籍の詳細情報を追加することが目的です。
リストに詳細情報を表示させる
書籍情報リストに詳細情報を表示させる
まず、詳細情報を表示させます。
# ~/resources/views/components/books_list.blade.php
<div class="book-table__list--detail">
<a href="/{{$page_path}}/{{$book->id}}">
<h3 class="list-book-title">{{$book->title}}</h3>
</a>
<p class="list-book-detail">
{{$book->detail}}
</p>
</div>
タイトルの下に詳細情報を表示させる記述を追加しました。
表示するだけならこれで完了です。
長文に対応できなくなる
しかしこれだけでは、問題がありました。
あえて長文のテキストを登録してみました。次の項目にわたってテキストが出力されてしまいます。
そこで今回は、長文時にはテキスト表示を途中で打ち切ることにしました。
実装にあたり以下を参考にさせて頂きました、ありがとうございます。
テキスト表示に上限を設定する
テキスト表示について上限を設けられる設定を加えました。
# ~/resources/views/components/books_list.blade.php
<div class="book-table__list--detail">
<a href="/{{$page_path}}/{{$book->id}}">
<h3 class="list-book-title">{{$book->title}}</h3>
</a>
<p class="list-book-detail">
{{ str_limit($book->detail, $limit = 300, $end = '...') }}
</p>
</div>
指定した長さを超過した分は切り詰めまれます。切り詰めた時は文章の最後に第三引数の文字が指定されます。
この状態でビュー表示を確認します。
# 上限設定後ビュー
長文テキストに上限を加えることで、スッキリした表示となりました。
詳細がある程度分かるようになり、より詳細を確認したい…続きが見たい場合は詳細画面に移動すればすべて確認することができます。
以上で詳細表示は完了です。
しかし、もう一つ手を加えることにしました。
所有書籍の詳細情報欄の表示を変更する
所有書籍リストにも詳細を出力する
所有書籍情報の表示ページも同じリストを使用しています。
一見同じ様なリストですが、ログインユーザーの所有書籍情報を元に一覧表示しています。こちらも詳細情報を出せばそれでもいいんですが、所有書籍としての情報を出すことにしました。
所有書籍には所有者が必要とする情報を入力できるようにしていました。
# 所有書籍情報の編集画面
フリーメモとしてテキスト入力できるので、こちらの情報を所有書籍のリスト画面では表示させることにしました。
リストにフリーメモ表示をさせる
まずは表示設定を追加してみました。先程の書籍情報リストと同じコンポーネントを修正します。書籍情報リストでの詳細情報が消えてしまいますが、こちらは後ほど戻したいと考えています。
# ~/resources/views/components/books_list.blade.php
<div class="book-table__list--detail">
<a href="/{{$page_path}}/{{$book->id}}">
<h3 class="list-book-title">{{$book->title}}</h3>
</a>
<p class="list-book-detail">
{{ str_limit($book->freememo, $limit = 300, $end = '...') }}
</p>
</div>
$bookには所有書籍情報画面の場合は、所有書籍情報が入っています。
ですので、この中からfreememoカラムを指定すれば表示される…はずでした。
フリーメモテキストが表示されない。
しかし、表示できませんでした。
フリーメモが表示されない原因を探る
原因を探りながらコードを確認していると…そもそもフリーメモが取得できていないことに気がつきました。
データ取得について順を追って確認します。
# ~/app/Http/Controllers/PropertyController.php
public function index()
{
$user = Auth::user();
$property = Property::userGetBook();
return view('property.index',['user'=>$user, 'books'=>$property]);
}
indexページ表示時のアクションです、所有書籍情報を取得してbooksとしてビューに引き渡しています。
この時、本の情報はスコープ設定していました。
# ~/app/Property.php
public function scopeUserGetBook()
{
$property = Property::where('user_id', Auth::user()->id)
->join('bookdata','bookdata.id','=','properties.bookdata_id')
->select('properties.id','title','picture','cover')
->get();
return $property;
}
モデルに記述したスコープです。
ユーザー自身の所有書籍を取得するためにjoinによる結合をしています。
id番号が重複すると意図しないid番号になることがあったため、表示するカラムを個別に設定していました。
その時の内容はこちらです。
必要なカラムのみ取得していますが、ここにfreememoがありませんので、フリーメモが表示されなかったんですね…。
表示情報として追加します。
public function scopeUserGetBook()
{
$property = Property::where('user_id', Auth::user()->id)
->join('bookdata','bookdata.id','=','properties.bookdata_id')
->select('properties.id','title','picture','cover','freememo')
->get();
return $property;
}
これで表示を確認します。
# 所有書籍リストビュー
フリーメモが表示されました。
ページ毎に表示させる内容を変更させる
先程も触れましたが、コンポーネントの記述をfreememoと変更した為、書籍情報ページのdetailが削除されてしまい、表示できなくなっています。
そこで、ページ毎に表示させる内容を切り替えられるようにしました。
スロット設定を追加する
リスト一覧はコンポーネントを使用していますので、コンポーネント表示元でスロットを追加して表示カラムを設定させることにしました。
@slot('detail')を準備し、それぞれ表示させる情報を設定することにしました。
# ~/resources/views/book/index.blade.php
@component('components.books_list',['books'=>$books])
@slot('page_path')
book
@endslot
@slot('detail')
detail
@endslot
@endcomponent
所有書籍一覧からのコンポーネントです。スロットにdetailカラムを指定しました。
# ~/resources/views/property/index.blade.php
@component('components.books_list',['books'=>$books])
@slot('page_path')
property
@endslot
@slot('detail')
freememo
@endslot
@endcomponent
所有書籍一覧からのコンポーネントは、スロットにfreememoを追加しています。
# ~/resources/views/components/books_list.blade.php
<div class="book-table__list--detail">
<a href="/{{$page_path}}/{{$book->id}}">
<h3 class="list-book-title">{{$book->title}}</h3>
</a>
<p class="list-book-detail">
{{ str_limit($book->$detail, $limit = 300, $end = '...') }}
</p>
</div>
$detailとしてスロットの情報を反映させることにしました。
呼び出し元の設定により表示情報が変更され、各ページで表示させるべき情報が取得できるようになりました。
indexビューを編集しましたが、検索時にも同じビューを利用しているのでfindビューに対しても同様にスロット設定を追加しています。
以上でbooklistに表示させる情報を追加しました。
今回は詳細情報を追加しましたが、同じ様な設定をすれば他の情報も表示できるでしょう。
