メモ

「コメントビュー」だけど、表示する本体は「チャット」と呼ぶ
チャットは「コメント」とそのコメントをした「ユーザー」のセット

開発時の起動方法

  1. パッケージをインストールする npm ci
    • もし先にnpm installした場合は以下を実行して最初から
      git reset --hard HEAD
      
  2. ビルドする npm run dev
    (トップディレクトリにdistフォルダが作成される)
  3. Chromeでchrome://extensions/にアクセスする
  4. ページ右上のデベロッパーモードをONにする
  5. 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形式)なので、整形する

必要なAPI

  • WebSocketのURLを取得する(OAUTH ◯ Session ✕)
  • ユーザー情報 名前、アイコンが最低限(OAUTH ✕ Session ✕)

ストレージ

  • ユーザーの情報
    • 保存内容
      • コテハン・NG・読み上げ など
    • どうやって保存するか
      • プラットフォーム毎に保存したい理由
        • ニコ生の184IDは毎週リセット。削除はプラットフォーム任せ
          • 削除する日時を保存しておいても良さそう
      • プラットフォーム関係なく保存したい理由
        • 保存してるユーザー一覧を表示する場合にある程度共通化しないといけない
          • 共通化しない場合プラットフォーム毎にビューが必要 手間
  • 大項目のユーザー設定
    • 項目
      • ニコ生)運営・184・エモーション
      • ツイッチ)特にない?
    • 内容
      • 読み上げるか・表示するか