Clarity Designを使ったWebシステムを作ってみる 準備編

概要

VMware社の製品のほぼ全てに使われているClarity Designというものを使った簡易的なWebシステムを作ってみようと思います。
必要スキルのAngularが初めてな部分もあり、Clarity Designを使っていてKubernetesのデモとかで使われるyelbというアプリと似たようなものをまずは目指していこうと思います。
https://github.com/mreferre/yelb

本記事の対象

• Clarity Designを使ってみたい方
• 簡単に良い感じの見た目のWebシステムを作成してみたい方

進め方

今回は以下の4章立てで進めていこうと思います。
※もしかしたら今後増やすかもしれないです

1. 準備編（本記事）
2. バックエンド編
3. フロントエンド編
4. デプロイ編

本記事ではどんな画面構成にするかやDB構成等をまとめていきます。

Clarity Designについて

今回主たる目的のClarity Designについてですが、基本的にはHTML/CSSのフレームワークのようなものになります。
用意されているクラス等を指定することで簡単に画面の構成を進めていくことができるものになります。
また、Angularと親密に連携しており、ページネーションのような少し実装が大変なものも簡易的に実装できます。
※アイコン等も非常に多く搭載

構成思案

今回作るWebシステムについて

今回は冒頭で記載したようにyelbモドキの簡易的なアンケートアプリを作ります。
基本的にはアンケートの作成/編集と回答機能を実装していく想定です。

システム全体像

今回は以下のようなシステム構成での作成を進めていきます。

• フロントエンド：Angular（Clarity Designを使うため基本必然に）
• バックエンド：Go（WebフレームワークのEchoを利用します）
• DB：MySQL（一番使い慣れているので!!）
  

画面構成

画面構成は以下のような画面を実装してみます。
基本的には1のアンケート一覧から残りの2~5を呼び出す形を想定してます。

#	名称	種別	概要
1	アンケート一覧	通常ページ	登録されているアンケートの一覧を表示 新規アンケートの作成や編集、回答画面の遷移もここから
2	アンケート回答	通常ページ	選択されたアンケートの回答画面 現在の投票状況を円グラフで表示してみる
3	アンケート作成	モーダル	新規アンケートの作成を行う
4	アンケート編集	モーダル	登録済みのアンケートの編集を行う
5	アンケート削除確認	モーダル	アンケートの削除ボタンを押した際の確認用

DB構成

DBのテーブルを以下3つで進めます。
※あらかじめ開発環境用で作成をしておきます。

• surveys
• survey_items
• answers

surveys テーブル

surveysテーブルはアンケートの管理をする箇所となります。

カラム	型	非NULL制約
id	int	NOT NULL
title	Text	NOT NULL
question	Text	NOT NULL
登録日時	DATE
更新日時	DATE

survey_items テーブル

survey_itemsテーブルはアンケートの回答項目を管理する箇所となります。
surveysテーブルのidと紐づきます。

カラム	型	非NULL制約
id	int	NOT NULL
text	Text	NOT NULL
survey_id	int
登録日時	DATE
更新日時	DATE

answers テーブル

answersテーブルはアンケートの回答を管理する箇所となります。
surveysテーブルとsurveys_itemのidと紐づけます。

カラム	型	非NULL制約
id	int	NOT NULL
survey_id	int	NOT NULL
survey_item_id	int	NOT NULL
登録日時	DATE
更新日時	DATE

バックエンド（REST API）構成

基本的には前述のDB構成に対するCRUDをそれぞれ実装していきます。
詳細は次章のバックエンド編で書いていければと思います。

まとめ

本記事ではこれから作成していくシステムの準備編というところで、画面構成やDB構成等を考えていきました。
次章から実際の実装を進めていきます。