【サービス設計編】半自動で運営される個人開発集サイト作ってみた

こんにちは！

今回から筆者が「半自動で運営される個人開発集サイト」を作ったので、その制作過程を全て公開していきます。

今回の記事はその1本目ということで、サイトのコンセプトや設計などをご紹介していきます！

少しでも参考になれば嬉しいです。

サービス概要
基本設計
- 画面設計
- データベース設計
最後に

サービス概要

基本情報

まず、基本情報は以下になります。

URL: https://os3-369-17826.vs.sakura.ne.jp/

Github: https://github.com/tarao96/prdev

サービスコンセプト

当サイトはQiita,Zenn,Noteなどの主要なエンジニア向けメディアから「個人開発」に関する記事だけを集めた、個人開発集サイトになります。

制作理由としては、筆者自身が普段個人開発を行なっており、当サイトは個人開発に関する情報を集めるために制作しました。

一番の売りは運営に手がかからないことです。当サイトは、自動で個人開発に関する記事を収集してきて投稿します。

機能一覧

ユーザ側

個人開発に関する記事の閲覧
外部サイトでの記事詳細閲覧
記事自動収集（API、スクレイピング）

管理側

ログイン、ログアウト
当サイトの記事一覧
記事削除
記事編集
記事作成
外部サイトでの記事詳細閲覧

当サイトの肝となる記事の自動収集は各種APIやスクレイピングでデータベースへ保存しています。

こちらは追々解説していきます。

技術構成

技術構成は全く凝っておらず、筆者の使い慣れた技術スタックです。

使用技術一覧

【フロント】

HTML
CSS
JavaScript

【バックエンド】

PHP
Laravel

【ライブラリ】

domCrawler（スクレイピング）

【開発環境】

Docker Compose

【本番環境】

さくらVPS
Docker Compose

技術選定の理由

まず、サービス自体がかなり小規模のためフレームワークを使うまでもないということで、生のCSSに生のJavaScriptという、令和ではまず見ないであろう構成となりました。

バックエンドは一番使い慣れているLaravelを使用。

開発環境は本番環境へのデプロイを見据えてDocker環境。

本番環境に関しては、今回のサービスはマネタイズ目的ではないため、サーバー代をできるだけ抑える目的で信頼と実績の「さくらVPS」を選びました。

基本設計

次に基本設計ということで、今回のサービスの画面設計とDB設計を見ていきます。

画面設計

以下、画面遷移図です。

シンプルですね。

ユーザ側は個人開発に関する記事一覧画面から各外部サイトへリンクで飛べるようになっています。

また、管理側は記事一覧から記事情報の編集、記事の作成、また外部サイトへ飛んで記事内容を確認することができるようになっています。

データベース設計

データベース設計といっても今のところ使用しているテーブルが記事テーブルと管理ユーザテーブルの2テーブルしかないため、ER図等は作成しておりません。

そこで、各テーブルのカラムだけどうなっているのかを記載しておきます。

articlesテーブル

カラム名	データ型
id	bigint_unsigned
title	varchar(255)
url	varchar(255)
comment	varchar(255)
source	varchar(255)
author_name	varchar(255)
author_profile_image_url	varchar(255)
article_created_at	datetime
article_updated_at	datetime
created_at	timestamp
updated_at	timestamp
deleted_at	timestamp

admin_usersテーブル

カラム名	データ型
id	bigint_unsigned
name	varchar(255)
email	varchar(255)
email_verified_at	timestamp
password	varchar(255)
remember_token	varchar(100)
created_at	timestamp
updated_at	timestamp
deleted_at	timestamp