Laravel開発、ユーザー所有本を管理できるようにする【3】メニュー表示位置の修正
前回記事にて既存ビューの扱いを見直しました。
この作業をしていたなかで気づいたのですが、サイトのメニューについて記述方法が統一されていないという問題を見つけました。
本記事ではこの問題点を解決していきます。
- 目的
- なぜやるか
- やりたいこと
- やったこと
- 作業内容
- 状況把握しメニュー記述の問題点を確認する
- 初期設計段階
- 現状把握と問題点
- 解決策を考える
- 解決策を実行する
- ビューファイル構成をなおす
- ※componentとincludeの違い
- レイアウトをなおす
- 状況把握しメニュー記述の問題点を確認する
目的
サイトを構成する要素を整理することでコードの可読性を上げる
※なお、本記事の都合上下記表現を利用する。
（前回記事と同じ表現です。）
表現：ページ
Aページ：本情報管理ページ
Bページ：ユーザー所有本管理ページ
なぜやるか
自分で作成している時点で問題と感じており、統一性をもたせるべきであると考えた。
他人がみるとなると、なおさら分かりにくいため、ここで問題を解決させてから次の実装へすすむため。
やりたいこと
ページ内構成を統一してメニューの場所を明確にする。
やったこと
現状を知る
現状に対しての解決策を考える
解決策にそった実装を行う
続きを読む
Laravel開発、ユーザー所有本を管理できるようにする【2】登録書籍とマイページのビューに統一性を持たせる
ユーザー所有の本情報を保存させて、ユーザー毎に管理できる設定をアプリに追加しています。
前回の記事はこちら。
ここまで作成して気づいたことがあります。
本情報管理とユーザー所有本管理という、主に2種類のページが存在しています。
ビューの構成はほぼ同じで、違うところはといえばページによってカラーを変更させることで変化させている程度。
当初は別のページなのでと思いスタイルシートを分けて考えていたのですが、クラス名とスタイルを統一できそうなので、ここで再整理して後々のメンテナンスも考えた使用にしたいと考え、見直すことにしました。
※そもそもそこから最初に設計すべきというご指摘はあるとは思いますが…。
- 今回の目的
- なぜやるか
- やりたいこと
- やったこと
- 実施内容
- ページ構成を考え直す
- 初期作成ページでスタイルを一本化
- ビューも一本化させることを検討
- 既存ビューページを再利用する
- 現状作成ページの差を確認する
- 同一構成に変更する
- ビュー表示するデータを取り出す
- 同じコンポーネントでページ毎のデータを出力したい
- ビューで表示する値を条件分岐するキーを見つける
- コントローラー名で条件分岐してみる
- レコードの取り出し方を変更する
- DB情報取得から考える
- モデルのスコープ設定を作成する
- 画面表示を確認する
- ユーザー毎のデータを表示させる
- ページを区別するための色分けをする
- 残っている問題を解決する
- ビュー毎に適用する色を設定する1
- ビュー毎に適用する色を設定する2
- ビュー構成のさらなる見直し
- ページ構成を考え直す
今回の目的
本情報登録ページとマイページの構成を合わせ、スタイルシート設定を統合させる
※なお、本記事の都合上下記表現を利用する。
表現：ページ
Aページ：本情報管理ページ
Bページ：ユーザー所有本管理ページ
なぜやるか
ほぼ同じページであるにもかかわらず、別のクラス名とスタイルシートを用意していることに無駄を感じた為、統一させることでビューやレイアウトを再利用できるようにさせたい
やりたいこと
同じビューを使用し、クラス名を統一する
同じスタイルシートを使用し、統一する
ページ毎に設定する個別スタイルを設定する
やったこと
ページ構成について再考する
ページ構成をそろえる
同一コンポーネントで異なる配列からデータを取り出す
各ページ毎の設定を適用させる
続きを読むLaravel開発、ユーザー所有書籍を管理できるようにする【1】テーブルを追加して既存テーブルとリレーションを設定する
今までに作成したアプリは、アプリ内に本の情報を登録できるという物でした。
単に登録するだけでなく、今回は各ユーザーが所有している本として登録できる状態にします。
- 今回の目的
- なぜやるか
- やりたいこと
- やったこと
- 実施内容
- テーブルを追加して所有物情報を扱う
- テーブル構成を確認する
- テーブル設計してテーブルを増やす
- 新たなDBを作成する
- マイグレーションファイルの追加
- モデルの作成
- コントローラ修正
- ビューで表示できるように修正
- テーブル名を正しく設定する
- ビューでデータが表示表示確認する
- リレーション設定する
- モデルに設定を追加する
- リレーションを使用したビュー表示設定
- テーブルを追加して所有物情報を扱う
今回の目的
ユーザーが所有する本を登録するためのテーブルを作成する
作成したテーブル情報をビューで表示できるようにする
なぜやるか
ユーザーが所持している本を管理できるようにする為のプロセス。
テーブルを作成することで、今後の工程でデータ保存・変更・削除が行えるようにする。
テーブル作成完了後に実際にテーブルからデータを引き出せるようになっているか確認することを確認して次の工程にすすむため。
最終的に、ユーザーページで出来る事を完成させる。
やりたいこと
本所有情報テーブルを新規作成する。
User,Bookdataテーブルと本所有情報テーブルとの関連性を設定する。
テーブル関係しを利用してデータを引き出し、ビューで表示できることを確認する。
やったこと
DBにテーブルを追加する
追加したテーブルと既存テーブルの関係性を設定する
関係性を利用してデータを表示させる
続きを読むLaravel開発、Jsonデータ処理を理解してAPIを扱う【2】実際にWebAPIをアプリに組み込む
前回の記事でWebAPIを利用したデータの保存までの流れを学習しました。
今回は、前回の内容を使って、実際に作成中のアプリにWebAPIによる処理を追加してISBNコードによる本情報の追加を実装します。
- 今回の目的
- なぜやるか
- やりたいこと
- やったこと
- 実施内容
- データ登録処理の問題に気づく
今回の目的
WebAPIを実際に開発しているアプリで使用し、ISBNコードによる情報登録をする
なぜやるか
- WebAPIを利用した開発をできるようにしたい
- 毎回手動登録のみの状況からユーザーにとってより楽な方法を追加することで、利便性を高めたい
やりたいこと
- 前回記事で作成したWebAPIコードを実際のアプリで組み込む
- 現在のステータスを表示して、ユーザーに状況を伝える
- 登録完了時に登録内容を表示させる
やったこと
- WebAPIを組み込んで使えるようにする
- 入力コードに問題があった時にエラーメッセージを返す
- ビュー画面にメッセージを出力し、ユーザーに状況を伝える
- 登録結果を表示し、ユーザーが登録内容を確認できる
