「コメントビュー」だけど、表示する本体は「チャット」と呼ぶ
チャットは「コメント」とそのコメントをした「ユーザー」のセット
- パッケージをインストールする
npm ci
- もし先に
npm install
した場合は以下を実行して最初からgit reset --hard HEAD
- もし先に
- ビルドする
npm run dev
(トップディレクトリにdist
フォルダが作成される) - Chromeで
chrome://extensions/
にアクセスする - ページ右上の
デベロッパーモード
をONにする dist
フォルダをドラッグアンドドロップする
- 全体のレイアウトを考える
- ヘッダー・放送接続・コメントビュー・コメント送信エリアに分かれているが、 それぞれを別ウィンドウやモーダルにするか
- 設計
- 表示する内容とそのレイアウトを考える
- 現在表示している内容
- Key・ユーザー名・チャット時刻・コメント(Keyはデバッグ用。いらない)
- プラス表示したい情報
- ユーザーアイコン・配信プラットフォーム毎のチャット情報(アイコンで表示)
- 現在表示している内容
- 表示する内容とそのレイアウトを考える
- 見た目
- 一番下でないときに「一番下へ移動する」ボタンの表示
- 初コメ強調
- ホバーでの強調?
- ユーザー名は長い場合は省略(折り返さない)
- コメントは折り返す・折り返さないを変更可能
- 機能
- チャット行右クリック
- チャット内容のコピー(コメント・ユーザーID・ユーザー名)
- ユーザー詳細ページの表示
- ユーザーID・コメントNG追加
- その他配信プラットフォーム毎に違う内容
- チャット行右クリック
- ポップアップ?でユーザー詳細ページを表示する
- ユーザー名・アイコン・ID・ユーザーページへのリンクの表示
- その放送でのチャット数・各チャット詳細
- ユーザー設定
- NCBrowser内でのコテハン・背景色・読み上げ等
- 種類
- 棒読みちゃん
- Web Spatch API
- 機能
- コメントを読み上げる
- 読み上げる時に個別の調声は無し
- オプションでの調声はできても良い
- エラーの統一したインターフェースを用意する
- Live専用のエラーはあるがそれ以外にもエラーは発生するので、 アプリ全体としてのインターフェースが必要
- ログの保存・出力
- コテハンの実装
- 読み上げはユーザー単位で変更可能だが、どこで読み上げを行うか
- Liveに任せるか、読み上げ用のサービスを作るか
- ドラッグアンドドロップでの放送への接続
- チャット読み上げ
- 棒読みちゃん
- ブラウザスピーチ
- コメント検索
- ユーザーNG
- コメントNG
- 現在ニコ生APIはOAUTHを利用しているが、Cookie認証に変更するか
- OAUTHのためのサーバや連携を作る部分が面倒。本番申請していないので一部のユーザーしか使えない
- CookieのAPIはあまり公開されてない。放送ページをスクレイピングするようになると思う
- 必要なAPIの用意
- コメント送信
- 放送の詳細取得
- 過去チャットの取得
- ユーザー放送以外への対応
- 公式放送・チャンネル放送・ライブ公開
- 接続可能かなどのチェックを正しく行う
- コミュ限放送・有料放送・TS期限切れ
- 生主や運営のチャットは特別な形式(/info、HTML形式)なので、整形する
- WebSocketのURLを取得する(OAUTH ◯ Session ✕)
- ユーザー情報 名前、アイコンが最低限(OAUTH ✕ Session ✕)
- ユーザーの情報
- 保存内容
- コテハン・NG・読み上げ など
- どうやって保存するか
- プラットフォーム毎に保存したい理由
- ニコ生の184IDは毎週リセット。削除はプラットフォーム任せ
- 削除する日時を保存しておいても良さそう
- ニコ生の184IDは毎週リセット。削除はプラットフォーム任せ
- プラットフォーム関係なく保存したい理由
- 保存してるユーザー一覧を表示する場合にある程度共通化しないといけない
- 共通化しない場合プラットフォーム毎にビューが必要 手間
- 保存してるユーザー一覧を表示する場合にある程度共通化しないといけない
- プラットフォーム毎に保存したい理由
- 保存内容
- 大項目のユーザー設定
- 項目
- ニコ生)運営・184・エモーション
- ツイッチ)特にない?
- 内容
- 読み上げるか・表示するか
- 項目