tor4kichi / hohoema Goto Github PK

通信量を減らしたり、端末スペックがたりない場合にチェックするオプションをまとめて設定できる画面を作成します。

• 動画を一覧表示するとき、サムネイル情報を取得する
  • サムネイル画像を取得する
• 常にエコノミーで動画をダウンロードする
• コメントの表示FPS（60/30/24/15/10/5）

TO

relative to #2
ランキング表示は「ランキングカテゴリ一覧ページ」と「ランキングカテゴリページ」の２種類のページによって構成されます。

ランキングカテゴリ一覧ページ

ランキングカテゴリは「エンターテイメント」「アニメ」「動物」など様々な種類がありますが、Hohoemaではそれらの表示優先度を変更する機能をつけます。

表示優先度は、「優先表示」「通常」「非表示」の３種類があり、それぞれで分割表示を行います。

表示優先度は設定情報から取得します。

ランキングカテゴリページ

ランキングカテゴリ一覧ページでカテゴリを選択するとカテゴリ文字列を伴ってランキングカテゴリページへと遷移します。

ニコ動ランキングのパラメータにはカテゴリの他に、集計対象と集計期間がありますが、この２つはカテゴリランキングページで保持、変更UIの提供を行います。

ランキングをリスト表示するときには、「ゾーニング機能」によるフィルタリングができるようにします。詳しくは↓へ。

ゾーニング機能はランキングカテゴリページ上でON/OFFを切り替えられるようにします。

ゾーニング機能

ランキングの表示は、アプリモデル上のNG投稿者、NG動画ID、NGタイトルキーワードによって表示結果をゾーニングします。

ゾーニングした結果として、ランキングリスト上の動画情報アイテムはゾーニングした原因と共に表示をコンパクトにします。ユーザーの操作によってゾーニングによるコンパクト表示化を解除できるようにします。

まだ未完成な状態なので、まずはその部分を完成させます。

• 関連動画
• 市場

の情報を追加します。

また、それぞれの項目タイトルが必要です。
バックボタンはデフォルトのOSが提供するナビゲーションUIに任せます。

現状仮設置のUIのままですが、データ取得ができるようになってきたのでちゃんとした表示に差し替えていきます。

動画再生の映像再生をOFFにしてサウンドだけを有効にします。
最小化してもサウンドが再生される必要があります。（※調査が必要）

related from #10

設定ページに、動画NGとコメントNGの設定を行う画面を作成します。

動画NG

• 動画ID
• 動画投稿者ID
• 動画タイトルに対する正規表現マッチング

によって動画のNG設定を行います。

なお、NGとして判定された動画は、ランキングカテゴリページ、検索結果ページにおいて、表示結果がNG理由と共にコンパクト表示に切り替えられます。

多数のNG設定が加えられた場合、ゾーニング処理を行う時間が増えて、UI応答性が下がる可能性があります。

コメントNG

• ユーザーID
• コメント文字列に対する正規表現マッチング
• 同じ文字が連続したコメント
• ユーザーごとのn秒当たりのコメント数
• コメントスコア

によって動画コメントのNG設定を行います。

NG判定がされたコメントは一律に非表示とします。

T/O

ニコ動アカウントの設定を行います。

ログインはメール＋パスワードで行います。

ログイン状態、プレミアムアカウントログイン、についてUI上に表示します。

ニコニコ動画上で削除された動画は投稿者保護、および著作権者保護のため、ローカルキャッシュから強制的に削除します。

ローカルファイルの削除動作は、Hohoemaアプリの利用規約として、アプリのローカルデータへのアクセスについてユーザーからの承認を得ることを前提とします。

設定ページの大本を作成します。
設定はさらに中分類に別れます。（設定、自体が大分類です）

中分類は…

• #5 アカウント
• #6 ランキング
• #7 NG
• #8 動画プレイヤー
• 動画キャッシュ
• #9 パフォーマンス（負荷軽減等）

に分けられます。

それぞれの中分類設定はさらに細かい設定の小分類を持ちますが、これは単にkey/valueな形で表現されるものです。

マイリストのお気に入り登録と解除ができるようにマイリスト表示画面（HohoemaPageType.Mylist）やお気に入り->マイリスト画面でお気に入り操作ボタンを設置します。

タブレット、モバイルの向きによってペインの表示を切り替えます。

related from #10, #48

Frameのバックナビゲーションイベントを利用してBack時の処理をまとめます。

Back時に行うべきことは…

• PageManager.CurrentPageTypeを現在のページに合わせて変更する
• （CurrentPageTypeの変更に反応してほとんどのUI表示切り替えが完了します）

キューに再生したい動画を入れておき、連続再生するプレイリストを実現する機能を作成します。

元々プレイリスト機能はニコニコ動画の「マイリスト」として実現しているため、あくまでローカルで一時的に利用するプレイリストとして作成します。

特に想定している利用用途としては…

• 時間ができたときに後で見たいやつを入れておく
• ランキングから見るやつを全部チェックして連続再生
• 作業用BGM系を詰め込んで回す

ローカルプレイリストに入れた動画の管理画面が必要です。

プレイリスト管理画面からプレイリストに登録された動画への…

• 動画情報ページへのアクセス
• 動画のマイリストへの複数一括登録
• ローカルプレイリストから削除
• 順番の入れ替え

これらの操作をサポートしたいです。

例えばランキングページの読み込みが非同期で実行されているため、到着直後にランキングページから出て、またすぐに別のランキング一覧を表示すると動画リストの読み込みが多重になってしまい、前ページのランキングが混入してしまう。

検索でタグを対象にした際の検索結果画面、及びお気に入り->タグ表示画面でお気に入り登録・解除のボタンを設置します。

プレイヤー画面のUIをTimerスレッドを利用して自動非表示機能を実装しているが、プレイヤー画面が閉じられた時にプレイヤー画面のUI要素がDisposeされた後にTimer処理が走ってしまい、不正なアクセスが発生してしまっている。

ニコニコ動画のお気に入り機能で配信される新着情報を表示するページを作成します。

お気に入り機能とは、ユーザーやタグなどの条件でお気に入りに登録すると、アクティビティをフィードとして受信することができる機能です。

hohoemaで扱うお気に入りは

• ユーザー
• タグ
• マイリスト
• チャンネル
• コミュニティ

なお、チャンネルとコミュニティの表示機能はhohoemaにはもたせず、ブラウザで表示できるようにします。

• お気に入りは動画単位でまとめて表示を行います。
• お気に入り登録はランキングや検索結果ページ、動画情報などを通じて行います。
• 可能であれば、お気に入りページから登録の解除を行えるようにします。

アカウントに保存されたNGコメント情報とHohoemaアプリ側のNGコメント情報を同期させます。

現状アプリ側は公式のNG機能のうち、コマンドによるNGをサポートできていないので、機能を追加する必要があります。

同期のタイミングは、ログイン時及び設定からNG設定が変更されたタイミングで同期を行います。

公式チャンネル系動画のIDはランキング情報などで取得した場合には、smやsoなどの接頭辞のない数字だけのIDですが、サムネイル情報やWatchAPIから動画情報を問い合せた内容でのIDはso12345678といった形で、取得時とは別のIDを示すようになっている挙動を確認しました。

推測ですが、これは公式系チャンネルの機能として、動画の差し替えに対応するための措置だと考えられます。

特に動画情報を一覧として取得した後、動画IDを扱う箇所において、必ずサムネイル情報やWatchAPIから得られるIDを利用して再生操作やキャッシュ操作を行うようにします。

キャッシュファイルのタイトルにこのIDを使っているため、修正するまではキャッシュは常にキャッシュを最初から行う動作を行います。

再生中の動画に新しいコメントをログインユーザーとして投稿する機能を実装します。

related from #10

• ユーザー....ユーザーアイコンを表示
• マイリスト....最新動画のサムネイルを表示
• タグ....タイトルだけで十分

プレイヤーページに動画の周辺情報、及びプレイヤー設定、プレイリストにアクセスできるペインを追加します。

動画の周辺情報

• 動画投稿者説明(HTML)
• タグ
• 関連動画

プレイヤー設定

設定ページに表示される「プレイヤー設定 #8 」と同じ

プレイリスト

連続再生をサポートする再生リスト。
ログインユーザーのログインセッションに対して保持されます。
プレイリストへの動画の追加はランキングページやマイリスト動画一覧などの動画リストアイテム表示されるページから追加されます。

related from #43

動画がメインコンテンツであると再認識して、動画情報をプレイヤーページをベースに統合したいです。
プレイヤーのサイドペインに動画情報（投稿者説明、タグ、コメント）などを追加表示できるようにします。

元々は落ち着いたアプリにしようということで動画情報→プレイヤーと画面を分けていましたが、実際触ってみて手間を感じました。動画再生までにワンクッションあることで誤操作を防げるメリットがある考えもありましたが、一覧選択時にダブルタップで再生するよう設定することでこのワンクッションも意味が薄くなると考えられます。

related to #10 #28

related to #10

プレイヤー上で再生位置を維持したまま画質の変更に対応します。

ウィンドウサイズごとに見た目が調整されるようにしたいです。

1. 横幅が1279px以下、時にポートレイト表示（メニューボタン押下でメニューが画面を覆う）
2. 横幅1280~1679px、コンパクトメニュー
3. 横幅1680px以上、メニュー幅を常に最大化して表示

1~2の最小横幅については、実際に実装してみて調整します。場合によっては1080px以下などと設定するかもしれません。

参考：http://blog.okazuki.jp/entry/2015/05/10/125017

• ランキング
• マイリスト
• お気に入り
• 視聴履歴
• 設定

ランキングは優先設定のものをサブカテゴリとして表示します。
お気に入りは更新した結果、未チェックのカウントを表示します。

ログイン状態、ニコニコ動画のサービス稼働状況をメニューのトップに表示します。
同時にログアウトのボタンも表示します。

related from #20

ランキング画面など100個のアイテムをリスト表示しますが、一度にすべてを読み込むと非常に時間がかかります（２秒ほど）。
20個あるいは30個ずつ程度に切り分けて読み込みタイミングをずらしてユーザーの待ち時間を減らせるようにしたいです。

トップメニューに検索ボックスを設置して、どこからでも検索ができるようにしたいです。

検索は検索対象とソート方法をセットで指定することで実行できるようにします。

検索対象

• キーワード
• タグ
• マイリスト
• 視聴履歴

ソート方法

• 投稿日時
• コメント数
• 再生数
• コメント日時
• 人気順

人気順以外は昇順/降順があります。

検索を実行すると、検索情報を元にした検索ページを表示します。
検索ページは検索を実行するたびに開きます。

検索ページで表示される検索結果の動画情報はNG動画設定に基いて、ゾーニングを施します。

0.1秒単位でシークバーを動かしたいです。

オンラインから取得した動画情報のキャッシュを保持します。

動画情報の更新は、明示的な更新リクエスト、または前回取得から5分経過の場合に行います。

影表示を簡略化して描画処理の軽量化を図りたいです。

現状ではコメントの影生成にブラー処理を使っていて、非常に負荷が重いです。
特にタブレットやモバイルなどのCPUが非力な環境ではコメントの描画が遅くなりカクツク原因になります。

related to #10

動画情報の投稿者ユーザーのアイコンをクリックすると表示されるユーザーの詳細情報画面を作成します。

表示する情報は…

• 投稿動画
• 公開マイリスト一覧

ランキングカテゴリについて、優先表示するカテゴリや非表示にするカテゴリを設定します。

UI表現としては、ランキングカテゴリを縦にリスト表示し、リスト上に優先表示⇔通常表示、通常表示⇔非表示の分割バーを設置します。

この分割バーを境界に優先表示するカテゴリなどを判別します。

デフォルトでは全て通常表示の位置に配置します。

分割バー自体を動かせるようにする場合、分割バー同士の順序入れ替えが出来ないように調整する必要があります。あるいは、分割バーを動かせないようにすれば、そういった問題は発生しないはずです。

設定ページに、動画とコメントの表示関連の設定を行う画面を作成します。

• 自動で再生を開始する
• コメント投稿時のデフォルトコマンド
• コメント表示
• 動画投稿者コメントの解説コメントを見やすくする
  • フォントサイズ
  • フォントカラー
  • フォントの種類
• コメントの装飾許可設定
  • 投稿者
  • ユーザーID表示コメント
  • 匿名コメント
• コメントの描画間隔(10/15/[24]/30/45/60/90/120)
• デフォルトでコメントを表示
• デフォルトで低画質で再生

これまでデスクトップ＋モバイルという考えで進めてきましたが、より正しくユニバーサルアプリとして作りたい、そうすることでユニバーサルデザインへの理解を深められると思うので、UIのデザインをガラッと変えたいと思います。

具体的な指針としては

• モバイルファースト
• １ウィンドウで管理
• グローバルメニューを排除
• その代わり利用フローを徹底的に考えてデザインする

補足的な考えとしては

• 認識のしやすさと誤タップを防ぐため、余白を大切にする
• 設定項目は設定画面ではなく、実際に使う画面上で設定する

動画プレイヤーモードと音楽プレイヤーモード

動画及び音楽プレイヤーとして機能するページを作成します。

動画プレイヤーモードでは動画表示やコメント表示などをダイナミックに行います。
対して音楽プレイヤーモードでは、動画とコメントを非表示にして、音量とプレイリストの表示をメインに扱います。

• 動画の表示
  • コメントの表示
  • 再生・一時停止ボタン
  • シークバー
  • 現在の再生時間
  • コメントの投稿
  • ボリューム変更スライダー
  • ミュート切り替えボタン
• 動画情報
  • 投稿者
  • 投稿者コメント
  • タグ一覧
• 市場情報
• 関連動画
• プレイリスト情報

音楽プレイヤーモードでは「動画の表示」部分がサムネイルを表示するだけにします。

表示モード

• フルスクリーン
• 動画＋インフォ
• コンパクト

の３つの表示モードを提供します。
フルスクリーンはコンパクト表示＋全画面表示で表現します。（MediaElementのFullScreen指定ではコメント表示ができないかもしれないので（未検証））

レスポンシブ対応

特に表示モードの動画＋インフォの時、画面サイズによってインフォ表示をサイドに置くか、ボトムに置くか変更が必要になる。

ログアウトしてログインメニューへ移動するボタンが必要
その時は自動ログインがOFFになってないといけない

現状ではRTSPのストリーミング再生しか行えていませんが、ストリーミングとしてダウンロードした部分データをローカルにキャッシュして、再利用できるようにしたいです。

また、ユーザーによってローカルキャッシュの維持を指示された場合に、ストリーミング再生時に飛ばし飛ばしになっているローカルキャッシュデータの足りない部分をダウンロードして完全なデータになるようにします。

例えば、お気に入り→マイリスト→マイリスト名 と３階層ある場合、現状ではお気に入り「マイリスト名」と表示されるような形で、階層ナビゲーションであることを明示できていません。

階層表示機能として必要なことは…

• 階層のルートがメニューアイテムの場合はメニューアイテムを選択状態にする
• PageManagerに階層ナビゲーション用のPageOpenメソッドを追加する
• メニューに階層ナビゲーション用のぱんくずリストを表示する

ユーザーからキャッシュリクエストされたアイテムのダウンロード進捗状況を表示し、また既にキャッシュされた動画を一覧に表示します。

キャッシュされた動画一覧の表示順序はローカルファイルとしての作成時間をそのまま利用して表示します。

ランキング情報や動画情報などの読み込みまでの表示にラグがある画面でのプログレスホイール表示を行いたいです。

表示まで1秒以上掛かると想定される画面では積極的に読み込み待機中の表示を行います。
読み込み中の表示はその画面に馴染ませる形で行い、あまり極端な表示切替にしないことで目の負担や再描画コストを抑えます。

まず、先に検索ダイアログとして作成している内容をUserControlに変更して、ダイアログではなくフライアウトに切り替えます。

そうした上で、ポータル画面の検索ボタンとして表示している部分に検索コントロールをまるごと埋め込むように変更します。

related #25

ログインユーザーのニコニコ動画上のマイリストを表示するページを作成します。

• マイリストの追加操作は検索やランキングから行います
• ユーザーはマイリストを複数持つことができる
• マイリストを開いて、動画の一覧ビューを表示
• 可能であれば一覧ビューから登録動画の登録解除を行えるようにしたい

再現性なし。起動直後からログインができなくなるが、再起動すると問題なくログインできるようになります。

これは仮説ですが、HttpClient、あるいはその他の通信機能がアプリごとに割り当てられていて、アプリ終了時に正しく終了してできていないことが原因かも？

TO