ポートフォリオとして作っていたブログサイトが完成したので、少し解説してみます。
YouTubeなどに載っているブログサイトだとあまり実用性がなかったので、
実際に自分でも使えるような機能を色々と付けてみました。
目次
1.ブログサイト
2.使用技術
3.機能一覧
4.ER図
5.工夫した点
6.苦労した点
7.これからの課題
1. ブログサイト
完成系はこんな感じです。
ブログとしての基本的な機能は備わっています。
2. 使用技術
- PHP 8.1.3
- Laravel Framework 8.73.2
- Vue.js 2.6.14
- MySQL 8.0.28
- Docker/docker-compose
3. 機能一覧
- ユーザーの新規登録・ログイン
- 投稿・編集・削除
- 公開・非公開設定
- マークダウン機能
- サムネイル・ファイルアップロード
- 投稿検索
- カテゴリ検索
- 月別投稿表示
- カテゴリランキング
- コメント機能
4. ER図
5. 工夫した点
- 見出しや文字の強調など、ブログを書きやすくするためのマークダウン形式
- 月別の投稿と投稿数を表示する月別表示機能
- カテゴリを使用回数順に表示する、よく使われるカテゴリ機能
6. 苦労した点
- マークダウンエディタのファイルアップロード機能
TOAST UI Editor というマークダウンエディタを使ったのですが、そこにファイルアップロード機能を追加するのに少し苦戦しました。
オプションを追加して、サムネイル画像を投稿するときと同じ処理を書き、返ってきた画像のパスがテキストエリアに表示されるようにしました。
既に出来上がってるマークダウンエディタを使ったので、後から機能を追加するのは少し苦戦しました。
詳細はこちらの記事に書いてあります！
TOAST UI Editor のファイルアップロード機能
- axios通信
こちらもマークダウンエディタ関連なのですが、Vue を使ったマークダウンエディタだったため、タイトルや本文などの投稿内容も全て Vue からコントローラに送られるようにしたのですが、そこで使ったaxios通信で少し苦戦しました。
ただ、初めて非同期通信に触れる機会だったのでとても良い経験になりました。
こちらも別記事でちょこっと解説してます。
非同期通信を勘違いしていた問題
- ブログ編集画面の分岐
ブログ編集画面を表示する際、サムネイルがある場合と無い場合で表示方法を変えるのが少し複雑でした。
サムネイルがある場合
サムネイル画像とサムネイル変更ボタンを表示させ、
変更した場合はDBから画像を削除し、サムネイル新規登録ボタンを表示させる。
サムネイルが無い場合
サムネイル新規登録ボタンを表示させる。
という分岐を、v-if や v-showを使って実装しました。
7. これからの課題
これから追加してみたい機能の一つに、サムネイル自動生成 があります。
現在は、サムネイルが無い投稿は No Images と表示された画像を自動的にサムネイルにするように設定しているのですが、それだと味気ないので、自動的にブログタイトルを画像に埋め込み、オリジナルのサムネイルを作る機能を実装できたらいいなと考えています。