Laravelでブログサイトを作る 03. URL設計
おさらい
必要なページ
では、リストアップした要件を盛り込んだブログサイトを作るとして、どのようなページが必要になるかを考えていきます。
この時、2つの視点が考えられます。閲覧してくださる人のため（フロント）と、管理を行う人のため（管理）です。
フロント
- 記事の一覧表示
- 新着順の一覧
- 大カテゴリで絞り込んだ記事の一覧
- 少カテゴリで絞り込んだ記事の一覧
- 検索ワードにマッチする記事の一覧
- 記事1件の表示
管理
- 親カテゴリの管理
- 一覧表示（追加、変更、削除）
- 少カテゴリの管理
- 一覧表示（追加、変更、削除）
- 記事の管理
- 一覧表示
- 新着順の一覧
- 親カテゴリで絞り込んだ記事の一覧
- 少カテゴリで絞り込んだ記事の一覧
- 検索ワードにマッチする記事の一覧
- 編集
- 一覧表示
それぞれの補足
記事の一覧表示
新着順、絞り込み、検索が「記事の一覧表示」にまとめられています。
これは、別々の機能ではなく、絞り込み条件があるか無いかの差はつきますが、それでも記事一覧という大本の役割に違いが無いからです。
こう考えておけば、いくつも似たような機能を開発するのではなく、異なる部分だけそれぞれに作り、大本の機能に合流させるという考えへと繋がり、開発の工数を削減することへと繋がります。
親カテゴリの管理、少カテゴリの管理
一覧表示に対して、カッコ書きで追加などを記しています。
記事などであれば、一覧から編集対象を選ぶ→編集する、というワークフローになります。
さて、カテゴリではこのフローは必要だろうか、と考えると、正直なところ、不要だと私は考えました。
編集項目が少ないことと、表示順を編集する際、他のカテゴリの順位を確認したくなるケースがあるからです。
なので、編集専用のページを作って1件ずつ管理するのではなく、一覧表示する画面で編集もできるようにすれば良いと考えました。
URL一覧
- http://ドメイン/
- 新着順一覧
- http://ドメイン/parent/XXX
- 親カテゴリで絞り込んだ記事の一覧
- 「XXX」は親カテゴリID
- http://ドメイン/child/XXX
- 子カテゴリで絞り込んだ記事の一覧
- 「XXX」は子カテゴリID
- http://ドメイン/search
- キーワードで検索を行う
- 検索ワードはPOSTメソッドで送信
- http://ドメイン/content/XXX
- 記事1件の表示
- XXXは記事ID
- http://ドメイン/admin
- http://ドメイン/admin/articleList
- 管理者用：記事一覧
- http://ドメイン/admin/articleEdit
- 管理者用：記事編集
- http://ドメイン/admin/articleUpdate
- 管理者用：記事の更新処理
- http://ドメイン/admin/parent/XXX
- 管理者用：記事一覧（親カテゴリで絞り込み）
- http://ドメイン/admin/child/XXX
- 管理者用：記事一覧（子カテゴリで絞り込み）
- http://ドメイン/admin/search
- 管理者用：記事一覧（キーワード検索）
- http://ドメイン/admin/parent
- 管理者用：親カテゴリ一覧
- http://ドメイン/admin/parentUpdate
- 管理者用：親カテゴリの更新処理
- http://ドメイン/admin/child
- 管理者用：子カテゴリ一覧
- http://ドメイン/admin/childUpdate
- 管理者用：子カテゴリの更新処理
Laravelでブログサイトを作る 02. データベース設計
おさらい
まとめた要件は、前回を参照。
データベースで管理する情報
親カテゴリ
- ID
- 一意となる値です。「どれのこと？」を特定するために利用します。
- カテゴリ名
- まず必要なのは、カテゴリの名前です。こればっかりは理由も何も、無ければ話にならないものなので、割愛します。
- 表示順
- 一覧表示する上で必要な順序を保有する必要があります。
- created_at、updated_at、deleted_at
- LaravelでEloquent ORMを使用する際、順に作成日時、更新日時、削除日時を格納するために作成します。
- このうち、削除日時は、「日時が入っていたら削除」と、論理削除のために使用します。
子カテゴリ
- ID、カテゴリ名、表示順、created_at、updated_at、deleted_at
- 親カテゴリ同様に、保有する必要がある情報です。
- 親カテゴリID
- 子カテゴリには、親に当たる親カテゴリが存在する構成になります。
- この場合は、親カテゴリのIDと同じ値を格納します。
記事
- ID、created_at、updated_at、deleted_at
- この辺りは、親子カテゴリと同様にシステム的に必要な情報です。
- 記事タイトル
- 記事のタイトルですが、データベースでは文字数の制限をつけたりはしません。
- ○文字まで、という制限をデータベース側でやってしまうと、変更する時の手間が大きくなってしまうからです。
- 記事本文
- HTMLなどのタグも含めて保存します
- 親カテゴリID
- 記事と親カテゴリは1対1の関係にするので、記事情報に親カテゴリを保有させます。
- （記事に対して複数関連付けるものは子カテゴリ）
記事と子カテゴリを関連付けるテーブル
前述しましたように、1記事に対して複数の子カテゴリが関連付けられるように、記事IDと子カテゴリIDを記録するテーブルを用意します。
まとめ
親カテゴリ（ParentCategory）
| カラム名 | データ型 | index | 備考 |
|---|---|---|---|
| id | int | ─ | 主キー |
| name | text | × | カテゴリ名 |
| number | int | ○ | 表示順 |
| created_at | timestamp | × | 作成日時 |
| updated_at | timestamp | × | 更新日時 |
| deleted_at | timestamp | × | 削除日時 |
※表示順はORDER BYで指定するため、インデックスを作成する。
子カテゴリ（ChildCategory）
| カラム名 | データ型 | index | 備考 |
|---|---|---|---|
| id | int | ─ | 主キー |
| name | text | × | カテゴリ名 |
| parent | int | × | 親カテゴリID |
| number | int | ○ | 表示順 |
| created_at | timestamp | × | 作成日時 |
| updated_at | timestamp | × | 更新日時 |
| deleted_at | timestamp | × | 削除日時 |
※表示順はORDER BYで指定するため、インデックスを作成する。
記事（article）
| カラム名 | データ型 | index | 備考 |
|---|---|---|---|
| id | int | ─ | 主キー |
| title | text | × | 記事タイトル |
| body | text | × | 本文 |
| parent | int | ○ | 親カテゴリID |
| created_at | timestamp | × | 作成日時 |
| updated_at | timestamp | × | 更新日時 |
| deleted_at | timestamp | × | 削除日時 |
※親カテゴリを指定し、属する記事を探すケースがあるので、親カテゴリIDにインデックスを作成する。
記事-子カテゴリ(articleChild)
| カラム名 | データ型 | index | 備考 |
|---|---|---|---|
| id | int | ─ | 主キー |
| article | int | ○ | 記事ID |
| child | int | ○ | 子カテゴリID |
| created_at | timestamp | × | 作成日時 |
| updated_at | timestamp | × | 更新日時 |
| deleted_at | timestamp | × | 削除日時 |
※記事が持つ子カテゴリを取得するケースが考えられるので、記事IDにインデックスを作成する。
※子カテゴリを指定し、属する記事を探すケースがあるので、子カテゴリIDにインデックスを作成する。
Laravelでブログサイトを作る 01. 要件定義
はじめに
記事【Laravelでブログサイトを作る】シリーズでは、当ブログの構築に至るまでの作業を公開して参ります。
「これから、Laravelを使ってみよう」「Laravelを使ってみたいけれど、何をつくれば良いかわからない」そんな方の一助となりましたら幸いでございます。
なお、当記事シリーズは、"コピペすれば同じものが出来る"といったものではございません。
あくまで、参考資料等としてご利用くださいますよう、宜しくお願い致します。
要件定義
自分自身が使うものではありますが、必要な機能は何か？といった要件は事前に洗い出す必要があります。
当然ながら、運用する上で増えることもあるでしょうが、まずは必要最低限。「とりあえず、ブログとしての体裁を整えるためには」という観点で、リリースまでに盛り込む機能をリストアップしていきます。
記事を作成する機能
当たり前だろ、と言いたくなりますが、その当たり前を整理することも要件定義には必要です。
そして、ここで記事を作るのに必要な要素は何か、を少しだけ掘り下げます。（掘り下げすぎると、あれもこれもと要望が湧き出してしまうので、今は少しだけ、としています）
ブログの記事を構成する要素は、大きく2つ。タイトルと本文です。
このうち、タイトルについては、文面にこだわることはあるものの、言ってしまえば、ただのテキストなので、要件としては特にありません。テキストが保存できれば、それだけで良いのです。
対しまして、本文。こちらの要望として、まずは初期の実装内容として、「文字の装飾がしたい」「画像を掲載したい」という2点を挙げてみましょう。
1. 文字の装飾
幸い私は、WEBサイトの制作に携わることもあり、HTMLとCSSの知識を一応は持ち合わせております。
ブログをWEB上で公開することもあり、記事本文をHTMLで記述し、CSSで装飾することで要望を満たすことはできそうです。
あとは、運用する上で負担を削減できる方法を考えれば良いでしょう。私の場合は、面倒くさがりなので、記事を書くための労力を極力減らしたいのです。
よって、ここでの要件は以下になります。
- 本文にHTMLを記入できる
- HTMLの記入をサポートする仕組みを導入する
2. 画像を掲載
記事文中に、画像を掲載したいと考えます。これは、以前に公開していたブログで、文字だらけの記事は自分でも見づらさを感じたためです。図説を入れるケースもありますが、テキストを読む途中で、休憩ポイントを置くこともまた、読みやすさにつながると考えました。
しかし、例えばFTPツールなどを使って画像ファイルをアップロードして、記事本文にimgタグを挿入する、なんて手間のかかる方法では、私は面倒になって記事を書かなくなるでしょう。（過去、実際になりました）
ですので、画像を掲載するための要件は、唯一にしてシンプルです。
- 記事本文を書きながら、画像をアップロードできるようにする
記事の表示
これもまた当然の機能と言えますが、しかし、どうすれば来てくださった方にわかりやすい、使いやすいサイトにできるでしょうか？
この回答は、簡単に出すことはできないでしょう。だからこそ、世の製作者各位は日々頭を悩ませておられますので。それでは、そういった知識をしっかりと学んだわけでもない私ができることは何かとなると、他所様がどうしているのかの調査と、自分が何を求めるかを基準にすることです。
他のサイトを参考にし、その中から「これは」というものを採用していく方法です。
ここで間違えてはならないのは、自分の求めるものは世間でも求められるだろう、ではなく、答えを出すまでのつなぎである、という所です。「最初から答えは出せない」と開き直ることでもあります。
サイト毎に求められるもの、というのは、どうしてもコンテンツによって異なりますので、定期的に改善していきながら最適解を探すのだ、という考え方です。これはあくまで私なりの考えなので、話半分に聞いていただければとは思いますが。しかし、特にWEBにおいては、刻々と変わる状況に対応できることが強みでもあるのではないでしょうか。
そうした中で、私が当ブログを作る際に求めた機能を順に記してまいります。
1. 一覧表示する時、記事冒頭を表示することで、内容を推測しやすくする
もちろん、分かりやすいタイトルをつけることは前提にあります。しかし、プロのライターでも四苦八苦することを、素人である私ができるとは言い切れません。
だからこそ、記事の冒頭も一覧に表示することで、どんな内容なのかを案内したいと考えました。
2. カテゴリによる分類、及びそれを絞り込んでの一覧表示
これは、他の方のブログなどを読んでいる時に当然のように使用している機能の実装となります。
読んでいる記事と同様のカテゴリ（呼び方としては、ジャンルやタグなどとも表現できます）を閲覧する機会が多いため、これは必須であると考えました。
その上で、カテゴリには親子の考えを持たせます。今回のようなブログサイトを作ることは、システム開発の範疇ですが、その中でもPHPについての話、Laravelについての話、JavaScriptについての話など、細分化することができるからです。
3. テキスト入力式の検索機能
上記のカテゴリごとの表示に、不足を感じるケースが稀にありました。「いや、知りたい情報は別なんだよなぁ」という時、探し方が分からないようでは、他所で情報を探そう、ということになってしまいます。それはつまり、使いづらいということ。
自分が使いづらいと感じた部分を解消する方針での仕様です。
4. 目次の表示
記事の全体像が見えることで、自分の求める情報はあの辺にありそうだ、とアタリをつけられるケースがあります。目次は、そういった利便性の向上に一役買ってくれるケースが多いように思っているので、実装したいと思います。
全体的なページ構成
まず、ページの構成として、2カラム構成を採用します。これは、メイン領域とサブ領域の2つに分かれたページ構成で、ブログによくあるデザインです。このうち、左側をメイン領域、右側をサブ領域とした構成にします。
採用理由としては、「見慣れているから迷いづらい」「好み」といったところです。
WEBサイト、特にブログのページ構成は、よっぽど奇をてらった目的でなければ、オーソドックスなものの中から好きなのを選ぶ、くらいしかできないような気がしています。
メイン領域
記事を表示させる部分になります。他に役割はありません。メインコンテンツを表示させることだけが目的です。
サブ領域
メインコンテンツ以外の情報は、全てこちらに記載します。リストアップした要件のために必要なものとしては、以下です。
- 検索のための入力欄と、検索実行ボタン
- カテゴリの一覧
- 親カテゴリに紐付く少カテゴリ、という構造がわかるように表示させる
- 親子カテゴリそれぞれ、表示させる順番は自由に変更できるようにしたい
最後に
こうしてリストアップしたものは、あくまで私が必要だな、と思ったものです。もしかしたら、世界で必要としているのは自分だけかもしれません。
ですが、個人開発の場合、ここで「じゃあ何が正解なんだ？」と、グルグルと考え続けるよりも、最初の第一歩を進めるために、暫定で方針を固めてしまって、まずはスタートしてしまう方が良いのではないでしょうか。
これが業務であれば、複数人で意見を出し合い、方針をしっかり練ってから進めた方が良いでしょう。しかし、個人あるいは少人数での開発では、後から振り返ることを前提に、見切り発車してしまう方が良いケースが多いと、個人的には考えております。