備忘録のような

趣味グラマによる個人的な見解、備忘

スマホ対応のyoutubeをニコニコ動画風にコメント付き再生が出来るサイト

とりあえず負荷の軽減としてアーカイブのみでyoutubeをコメント付き再生出来るサイトを作ったので、
宣伝を兼ねて記事書きました~サイトは↓

tocvcv.com


サイトの使い方の補足で、
特にスマホ(iPhone)の場合仕様によりちゃんとしたフルスクリーンが出来ません
ただ疑似的に同じフルスクリーンにできるので書いておきます、
縦画面でサイトに入り、横にすると出来ます
特にそれ以外はありません
また、メニューの使い方が結構癖が強めになっちゃって、
メニューの閉じ方がメニュー周りの白枠(余白)をどこでも良いので押すと閉じます
閉じたメニューは動画再生していないのなら、右下に透明であるので押すと表示
再生中は右中央付近にあります、(画面サイズで多少変わるかも?)
またチャットモード切替は、検索欄の右上にある、全体/上位で変えられ、
名前の通り上位チャット表示が良ければ上位、上位チャットを解除した状態の全コメント表示が、全体です


まだまだ出来たばかりで微調整や、原因がよく分からないで一部見られないアーカイブがあったりします(たぶん配信中に起こったつべ側の不具合の影響??)
また対応サイトとかは今はつべだけですが、twitch、openrec 辺りは対応するかもしれません、
後接続が多いとつべ側から対策されるかもしれないので、もし人気出て対策する必要が出たら
たぶんすぐに回避対策します、

一応技術面を解説というか残しておくと、
laravel(+guzzle)+vue(+axios)で作りました
全部初めて使ったので結構大変だったです
laravelはぶっちゃけ環境整えられればチョロかったですが、
vueは所々内部的な優先度だったり細かい仕様で躓いたりしました、、
後関数をファイル分けしたり、ちゃんとテンプレートを使い分けて作りたかったけど
ちょびちょび作ってたら一つだけでごり押しの状態になり後戻りするのが大変でそのままになってしまった

コメント描画方法については最初調べた感じcssアニメーションでの実装がgpu処理になり良いらしく参考記事もあるしでそうしてたんですが、
本家様は別の方法で実装しておりそれの違いによりこっちのコメントの方がアンチエイジングのせいか鮮明で
雰囲気が惜しいところ止まりになってしまった、、一応そっち版の軽く作ったのですが、組み込み直す手間や調整の問題でやめました

sslはなんか前々から話には聞いていた無料のやつが簡単に自動更新ができて時代が良くなったなと

Google search consolednsでのtxt認証についての注意があって、
cloudflareを使っているのならcloudflare上で追加してあげないといけません!!(自分完璧忘れてて模索してました)
最初はvaluedomainでやってるからここで追加しとけば良いんだろ的なので失敗
次にホスティングサーバー、自分はさくら使っててそこからやると良いみたいなの見てそれを設定しようとしたらそもそもそのドメイン欄がないみたいな

書くところはそんくらいです


それと関係はないのですが、何年も更新して無くて記事少ないのにpvが今でも月500くらいあってびびりました
けど技術系での情報が古いものは基本悪だと思うので少しもったいないけど整理しました