Ikeda's Blog

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サイト、特にブログのページ構成は、よっぽど奇をてらった目的でなければ、オーソドックスなものの中から好きなのを選ぶ、くらいしかできないような気がしています。

メイン領域

記事を表示させる部分になります。他に役割はありません。メインコンテンツを表示させることだけが目的です。

サブ領域

メインコンテンツ以外の情報は、全てこちらに記載します。リストアップした要件のために必要なものとしては、以下です。

  • 検索のための入力欄と、検索実行ボタン
  • カテゴリの一覧
    • 親カテゴリに紐付く少カテゴリ、という構造がわかるように表示させる
    • 親子カテゴリそれぞれ、表示させる順番は自由に変更できるようにしたい

最後に

こうしてリストアップしたものは、あくまで私が必要だな、と思ったものです。もしかしたら、世界で必要としているのは自分だけかもしれません。
ですが、個人開発の場合、ここで「じゃあ何が正解なんだ?」と、グルグルと考え続けるよりも、最初の第一歩を進めるために、暫定で方針を固めてしまって、まずはスタートしてしまう方が良いのではないでしょうか。
これが業務であれば、複数人で意見を出し合い、方針をしっかり練ってから進めた方が良いでしょう。しかし、個人あるいは少人数での開発では、後から振り返ることを前提に、見切り発車してしまう方が良いケースが多いと、個人的には考えております。