最高のサービス設計
システム概要
プロジェクト名
supreme-tsugu-chan
システム概念図
ハードウェア
ネットワーク
ソフトウェア
画面設計
全体
ファンアート情報ビュー
動画リストビュー
BGMリストビュー
報告ビュー
操作説明ビュー
設定ビュー
VRモード
機能設計
サーバーサイド
ライブ感でやっていく
クライアントサイド
ライブ感でやっていく
ファイル・DB設計
サーバーサイド
ファイル設計
なんかいい感じのキャッシュをする
cache
<post id>_<filename>.cache
photo_list.json
video_list.json
audio_list.json
DB設計
なし
クライアントサイド
ファイル設計
なし
DB設計
IndexedDB ER図
https://gyazo.com/0ce4b07df3dc4091a7e377d3556e0011
インターフェース
サーバー-Tumlbr間インターフェース
rest api
photoサイズの問題で仕様変更するかも
videoサイズの問題で仕様変更するかも
クライアント-サーバー間インターフェース
websocket
connect: supreme:service
client -> server
get_photo_list
request: get_photo_list
code:json
{ }
response: photo_list
code:json
{
"meta": { "request": "get_photo_list", "code": 200, "message": "ok" },
"photo_list": List<tumblr post>
}
get_video_list
request: get_video_list
code:json
{ }
response: video_list
code:json
{
"meta": { "request": "get_video_list", "code": 200, "message": "ok" },
"video_list": List<tumblr post>
}
get_audio_list
request: get_audio_list
code:json
{ }
response: audio_list
code:json
{
"meta": { "request": "get_audio_list", "code": 200, "message": "ok" },
"audio_list": List<tumblr post>
}
get_photo_item
request: get_photo_item
code:json
{ "id": <tumblr post id>, "file": "<item filename>" }
response: photo_item
code:json
{
"meta": { "request": "get_photo_item", "code": 200, "message": "ok" },
"photo_item": {
"id": <tumblr post id>, "item": binary
}
}
get_video_item
request: get_video_item
code:json
{ "id": <tumblr post id>, "file": "<item filename>" }
response: video_item
code:json
{
"meta": { "request": "get_video_item", "code": 200, "message": "ok" },
"video_item": {
"id": <tumblr post id>, "item": binary
}
}
get_audio_item
request: get_audio_item
code:json
{ "id": <tumblr post id>, "file": "<item filename>" }
response: audio_item
code:json
{
"meta": { "request": "get_audio_item", "code": 200, "message": "ok" },
"audio_item": {
"id": <tumblr post id>, "item": binary
}
}
client <- server
new_photo_item
send: new_photo_item
code:json
{
"new_photo_item": <tumblr post>
}
new_video_list
send: new_video_list
code:json
{
"video_list": List<tumblr post>
}
new_audio_list
send: new_audio_list
code:json
{
"audio_list": List<tumblr post>
}
user_count
send: user_count
code:json
{ "user_count": number }
運用
ソースコードはgithubにて管理する。
tumblrへのアクセストークンは.envに記載し、これはgit-secret (git-secretsではなく)で暗号化して管理する。
アクセスログ、通信ログはなし。
Google Analyticsでアクセス解析を行う。
バックアップ、リカバリ対象はなし。
マイルストーン
(10%) サーバーサイド基本機能
(20%) 機能A: キャラクターアート再生機能の実装
(30%) 機能C: BGM再生機能の実装
(40%) 機能B: キャラクター動画再生機能の実装
(50%) 機能D: 最新アート・動画取得機能の実装
(55%) 機能I: 各種設定機能の実装
(60%) 機能G: オンラインメンバー人数表示機能の実装
(65%) 機能J: SNS機能の実装
(70%) 機能H: キーボード操作機能の実装
(80%) 機能E: オフライン機能の実装
(90%) 機能F: 報告機能の実装
(100%) 機能K: WebVR機能の実装