最高のサービス概要
本書の目的
最高のサービス(以下、本サービス)について、そのサービスコンセプトと要件を定義し、クリアするべき課題について明確にする。
サービスコンセプトと目標
ターゲット
20代〜40代独身男性
サブカルチャーと孤独を愛するさみしい人間
対象のキャラクターとその背景にあるハイコンテクストな世界観に魅了されている
次の動画が待ちきれず既アップロード動画を周回視聴している
ファンアートをかき集めている
キャラクターと世界観についての考察を繰り返しインターネットに放流している
キャラクターの実在性についてうわ言をつぶやいている
キャラクターに語りかけるロールプレイを行っている
アニメ『serial experiments lain』『攻殻機動隊』に執着を見せる
キャラクターに癒やしを求めている
人生に疲れ、眠れない夜を過ごしている
夢も希望もない、人間が怖い、眠るのが怖い
利用シーン
眠る前に本サービス(Webサイト)を開いて、ブラウザを全画面表示し、またはプロジェクターでスクリーンに映し出し、キャラクターが流れていくのを眺め、あるいは動画をぼんやりと視聴し、死んだように眠る。
目的1: キャラクターを無限に眺め続けたい
目標1a: キャラクターの画像(ファンアート)が全画面表示で流れ続ける
目的2: 繰り返し動画の視聴を行いたい
目標2a: キャラクターの動画がいつでも視聴できる
目的3: 穏やかに眠れるようになりたい
目標3a: 本サービスを利用する際に画面の操作を必要としない
目標3b: リラクゼーション効果を発揮する
目的4: 非言語的な低レベルコミュニケーションを行いたい(さみしさを紛らわせたい)
目標4a: ページを閲覧していること、画面の操作を行ったことを同時に閲覧している他の利用者が察知できる仕組みを持つ
目標4b: 目的3の妨げとならないようにする
サービスの構想
サービス概要
本サービス(Webサイト)を開いた利用者に対し、キャラクターアートのBGM付スライドショーを提供する。また、キャラクターの動画再生機能を提供する。
システム構成
システム概念図
https://gyazo.com/e5ac3ea902a2c785f43c996d62abe557
ハードウェア構成図
https://gyazo.com/e352a956590a6b240e90e4bd15aecc1d
これ作る意味ないな?
ネットワーク構成図
https://gyazo.com/e8f374846d72a7fcb91bca4df9ad1f90
Docker内部からリクエスト投げられないならこうなる
https://gyazo.com/9bd9cadb4f9d19f634a60ebf0fe69af2
ソフトウェア構成図
https://gyazo.com/b68aa0d74799f1137af42e7dcef39d68
機能要求
要求機能の一覧
機能A: キャラクターアート再生機能
対応する目標: 1a, 3a
機能B: キャラクター動画再生機能
対応する目標: 2a, 3a
機能C: BGM再生機能
対応する目標: 3a, 3b
機能D: 最新アート・動画取得機能
対応する目標: 1a, 2a, 3a
機能E: オフライン機能
対応する目標: 1a, 2a
機能F: 報告機能
対応する目標: 1a, 4a
機能G: オンラインメンバー人数表示機能
対応する目標: 4a, 4b
機能H: キーボード操作機能
対応する目標: 1a, 2a, 3a, 3b, 4a, 4b
機能I: 各種設定機能
対応する目標: 1a, 2a, 3a, 3b, 4a, 4b
機能J: SNS機能
対応する目標: 4a
機能K: WebVR機能
対応する目標: 1a, 2a
機能Aの要求詳細
機能A1: 最高のTumblrの、Posts/Photoを全画面で表示する
機能A2: 画像をフェードイン/フェードアウトアニメーションでスライドショー表示する
機能A3: キャラクターアートの引用元・作者情報を表示する。表示はトグルする
機能Bの要求詳細
機能B1: 最高のTumblrの、Posts/Videoを全画面で表示する
機能B2: 動画再生は、リストから選択して行う。リストはトグルする
機能B3: 選択した動画は、本サービス閲覧中のすべての利用者で同時に再生される(配信)
機能B4: 指定秒数後に再生する機能を有する
機能B5: 同じ動画を連続して配信することを制限する機能を有する(荒らし対策)
機能Cの要求詳細
機能C1: 機能A利用時に、最高のTumblrの、Posts/Audioをバックグラウンドで再生する(BGM)
機能C2: BGMは、リストから選択する。リストはトグルする
機能C3: BGMは、OFFにすることが可能とする
機能C4: 選択したBGMの状態は、ブラウザを閉じた後も記憶する(次回訪問時に復元)
機能Dの要求詳細
機能D1: バックグラウンドで定期的に最高のTumblrの更新をチェックし、機能A1,B1,C1の最新のリソースを取得する
機能D2: 取得したリソースを元に、スライドショー、動画リスト、BGMリストを更新する
機能D3: スライドショーへの反映タイミングを設定可能とする
即時表示、次の表示、1周したら表示
機能Eの要求詳細
機能E1: 機能D1で取得したリソースをキャッシュし、オフライン環境下でもネットワークが必要な機能A,B,Cの一部を利用可能とする
機能E2: オンライン/オフラインへの移行を検知し、オフラインモードのON/OFFを変更する
機能Fの要求詳細
機能F1: 機能Aで表示されるキャラクターアートが、センシティブな画像である場合に利用者が報告できる
機能F2: 報告された画像はオンラインの利用者に通知され、一定時間の投票期間を経て、不適切の票が多数の場合は本サービスで閲覧できなくなる
機能F3: キャラクターアートを本サービスの機能Aで利用されたくない場合に、削除依頼を行うことができる。削除依頼には手動で対応する
機能Gの要求詳細
機能G1: PV総数/現在オンラインの利用者数を2進数でグラフィック表示する
機能G2: 利用者が何番目のオンラインメンバーなのか、色を分けることで判断できるようにする
機能G3: 表示のON/OFFを切り替えることが可能とする
機能Hの要求詳細
機能H1: 各機能のUIに対しキーボードショートカットでアクセスできるようにする。対応する機能は下記の通り
A3, B2, C2, C3, F1, F3, G3, I1, J1
機能H2: キーボードショートカットの一覧を表示するショートカットキーを有する
機能H3: 全画面表示を切り替えるショートカットキーを有する
機能Iの要求詳細
機能I1: 各機能の設定を行うUIを実装する
機能Jの要求詳細
機能J1: SNS投稿機能を実装する
Facebook, Twitter, Google+, Tumblr, Line
機能Kの要求詳細
機能K1: 機能A、機能Bを閲覧するVRシアターモードを実装する
機能K2: スクリーン位置を調節する機能を実装する
機能K3: 各機能にアクセスするためのVR専用UIを実装する
課題
要求機能ですべての目標が達成されるか
OK (未対応の目標なし)
要求機能は実現可能か
結論: 機能E(オフライン機能)は今までやったことがないので実現可能か不明。その他はなんとかなる。
機能A
ElixirでTumblr APIわからん
→ 覚える
ElixirでOAuthわからん
→ 覚える
ElixirでJSONわからん
→ 覚える
Canvasに画像ロード
→ Create.jsがなんとかしてくれるはず
画像ロードのクロスオリジン問題
→ クライアントサイドで突破は不可能。サーバーサイドでロードしてWebSocketのイベントで投げてやるような回避が必要
Canvasのスライドショー/アニメーション
→ Create.jsがなんとかしてくれるはず
キャラクターアート情報UI
→ Vue.jsがなんとかしてくれるはず
UIの状態管理
→ Vuexが必要かどうかは作成しながら判断する
コンテンツキャッシュして大丈夫?
→ これはCDNだから…多分平気…
画像が全画面サイズに満たない場合はどうする?
→ 安易に拡大すると例えばピクセルアートとかがひどいことになりそうなのでいい感じのルールを作る必要がある
機能B
動画再生は各プラットフォームの埋め込み?動画のデータを流す?
→ 埋め込みだと自動再生・キャッシュがかなわない可能性がある。その時はWebSocketでバイナリを流してみる。大きいファイルをWebSocketで流すのやったことないので楽しみではある
動画のデータを流す場合、元動画の再生数に寄与しない問題
→ 裏で元動画のURLにリクエストだけ投げてカウントアップするような仕組みを考える
コンテンツキャッシュして大丈夫?
→ これはCDNだから…多分平気…
ElixirでWebSocket Broadcast
→ 標準仕様なんだしできるでしょ多分
配信荒らし対策
→ 「全オンラインメンバーで同時再生」をOFFにする仕様は持ちたくない。WebSocketやる意味なくなる
→ 誰かが再生開始時間指定したらその瞬間から動画終了までは配信機能を止めるミューテックスが必要
→ 一度配信された動画は暫く再配信できないようにリキャストタイム設ける
→ 2窓対策いる?いらないと思う
配信動画選択リストのUI
→ Vue.jsがなんとかしてくれるはず
機能C
スライドショー時再生、動画再生時停止、またそれっぽい演出
→ Create.jsがなんとかしてくれるはず
BGM選択リストのUI
→ Vue.jsがなんとかしてくれるはず
機能D
Elixirで定期実行プロセスわからん
→ 覚える
リソースの配信を一度に行ってサーバーや帯域が保つのか
→ 落ちたらその時考える。Elixirは耐障害性が高いらしいし大丈夫でしょ知らんけど
→ VPSの帯域はわからん。通信量で課金のところじゃないからかなり絞られてる可能性がある。怒られたら考える
機能E
PWAの要件がわからん
→ 覚える
キャラクターアート、動画を全部キャッシュすると結構な容量になりそう
→ そのためのIndexedDB。ユーザーに許可貰えば大丈夫なはず
機能F
そもそもセンシティブな画像を上げなければいいのでは
→ そのうちTumblrへのアップロードも自動化する予定なので要る
リアルタイム投票はオンラインメンバーの数次第なところがある
→ 例えばアクセス時に未判定の画像について投票とかしようとするとユーザーにとってかなり鬱陶しいことが予想される。ユーザー体験は落としたくない
→ 30分とか1時間毎に1日平均のオンライン数に達していれば1回投票をやる、とかなら許されそう。投票時間は30秒あれば3割くらいは反応して投票してくれるんじゃないかな。これは試す機会少なそうだけど試行錯誤しながらアルゴリズム考える
削除依頼の送信先は?依頼主の本人確認は?
考え中。メールかTwitterのDMで行く。
機能G
現在オンラインのうち何番目って色分けで表現できるのか
自分の番号までは明るい緑のビット、それ以降は暗い緑のビットでどうか
機能H
ショートカットのキーバインドどう作る?
→ よさげなライブラリがきっとnpmにあるはず。ほらあった 機能I
全体的にVue.jsでがんばる
機能J
全体的にVue.jsでがんばる
機能K
canvasとvideoをVRに持ち込めるのか
→ A-FRAMEに専用タグがあるので大丈夫なはず
非機能要件は必要ないか
そんなもんない
入出力要件は必要ないか
もともとの業務フローがない+このサービスは何も生み出さない
以上。