見出し画像

七瀬すず菜さんの話をエンドレスに再生するサイトを作りましたよ！

愛犬オー

こんにちは！愛犬オーです

最近「七瀬さんの話エンドレス」ってサイトを作ったのでそれのnote書きます

夕星さんのnoteが作るきっかけになったり技術的な面でも大変助かったため
自分もnote書いて誰かの役に立てたらいいなって話です！

なんでこのサイト作ったの？

理由は2つ

1つ目はめちゃくちゃ面白そうだったから！
おはすずって元々1時間想定なのに「てかさぁ！「思っちゃったんだけどさ！」って無限に雑談始まっちゃうから平気で配信時間２時間とかになっちゃうんだよね
それがいいんだけど！
じゃあほんとうに言葉通り”無限に”雑談が続いたら？それってめっちゃおもしろそうじゃない？！

2つ目は切り抜き動画作りに挫折したから
先々月adobeを契約して、さぁ切り抜き動画作るぞ！と思ったんだけどこれが本当に難しい
何が難しい？切り抜く場所がわからない、切り抜くタイミングがわからない、タラタラしてたらすぐに他の人の作った切り抜きが出るなど…
結局テロップのデザインだけ作ってやめちゃった
切り抜き動画作ってる人ってほんとうにすごい！
だからいま僕にできるwebを使った、新しい切り抜き動画の形を提供できないか考えていました

サイトの仕組み

プログラム的な話が入るけどわかんねーってなったら適当に飛ばしてください！僕もちゃんとはわかってないです

基本的な動き

動画リストをランダムな順番に入れ替えて、リストの動画をひとつづつ設定した開始秒数から動画を再生、終了秒数になったら次の動画に進むの繰り返し、動画リストの最終に近づいたら新たにランダムな順番にした動画リストを読み込むという形で無限の雑談を実装していきます

フレームワークはreact
最近勉強しはじめたから！
始めたばっかりなので何が何だかわからないまま使っている
本来の機能の1割くらいしか使えてない気がするけど後述する問題の解決がめちゃくちゃ楽にできたのでそれだけで使って良かったと思います
あとnpmでのライブラリ管理がめちゃくちゃ使いやすかった

このサイトで重要なのは自分で操作している感覚だと思うの！
だからサイトにはスライダー（swiper）を設置して、そこに動画を載せる形にしました

動画の再生に使うのは公式のYoutube Iframe API
これは夕星さんのnoteとqiitaにめちゃくちゃわかりやすく書いてあるからそれ読んでください（丸投げ）
再生や広告がチャンネルに還元されるってのが素敵だね

重大な問題発生

公式ドキュメントをあらかじめ読んでいたら回避できた問題なんだけど、iOSでは自動再生がユーザー保護のために禁止されてるらしいのね！？！？！？！

「警告: ユーザーが費用負担する携帯電話ネットワーク経由で要求していないダウンロードを防止するために、iOS の Safari では組み込みメディアを自動再生できません。必ずユーザーが自分で再生します。」

https://developer.apple.com/safari/resources/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html

これじゃ毎回動画再生ボタンを押さなきゃ再生されない！ユーザビリティが下がっていく音が聞こえる！！となったのでreact-device-detectを使ってiosだけスライダーを廃止、動画が読み込まれたら自動で再生する方式からloadVideoByIdで読み込む方式（loadVideoByIdは動画読み込みと同時に自動再生される）に変更しました。コンポーネントで分けていたから問題部分だけ数時間で修正できました。reactの強み！

動画データ収集

全ての放送を聞いて「てかさぁ！」部分を集めるのは流石に大変！ということで、ツール活用しましょう！
にじさんじコメント検索というサイトがあります

https://comment2434.com/comment/

コメントとコメントした時間が一覧で出てくる

このサイトで「思いついちゃったか」「てかさぁ！」「はい七瀬さん」等検索して「てかさぁ」が出てくる回を見つける→開始時間と終了時間を記録という流れでどんどん集めていきましょう！

…

……

多すぎ！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
50本以上あるし時間にしたら10時間くらいあったし！
本当はおはすず第100回記念にリリースしたかったんだけど、これのせいで遅れました（見積もりの甘さ）

デザイン

配信画面をそのまま拡張したみたいな雰囲気で、画面の枠はループしてる感じ🔁をイメージして作ってみました！

コンセプトが似てるからオモコロの校長先生の話エンドレスを参考にして再生時間と再生時間を共有するボタンを配置したり（名前もここから取った） 「さっきの話、面白かったな〜元配信見にいこ！あ！飛ばされちゃって辿れない！」とか「この話もう１回聞いたな〜飛ばしてもいいんだけどな〜」となったら可哀想だから次に進むボタンと戻るボタン、元配信に飛ぶボタンをつけました

華やかな方ががいいよねってことでテキストだけの予定だったトップにはイラストを配置

僕が描きました！

最初から頭の中で作りたいものは決まっていたので作るのはそんなに苦労しなかった

初期案と実装（Figma）

触れられるボタンは角丸にしてわかりやすくしたり目を引かせたいところには水色を使ったりってしたけど実際に効果あるかはわからないです…
デザインの勉強もっとしよう

それと、Twitter投稿用の画像とロゴはillustratorを使って作ってみました
初めてにしては結構いいんじゃない？

いずれはモチーフから何まで全部自作できるようになりたいです

今後

てかさぁ！は毎日増えていくのでてかさぁ！が確認出来次第どんどん追加していきます
また、過去の放送も全て登録しているわけではないのでそちらも追加していきたい

終わりに

先々月から制作開始して結構時間かかっちゃったけどなんとか今年中に完成できて良かったです

「てかさぁ！集50連発」って10時間の動画作るのもいいんですけど、こういった切り抜きの形もあるんだなって思えてもらえたらいいのかなって思います

あと、投稿が拡散されていく中でリツイートはめちゃくちゃ大きな力を持ってるってことがわかったので自分もいいね👍と思う投稿にはどんどんリツイートしていきたいなと思うなど

満足いくものができて良かった！しばらくはweb制作はお休みして、せっかくだし契約したadobeで動画でも作るかな！

最後に七瀬すず菜さんのチャンネル登録よろしくお願いします！

じゃーね！

追記：

予想以上にたくさんの方に見てもらえてほんとうに嬉しい！
放送でも触れてもらっちゃった

小ネタ：
このサイトのドメインはendless-7（エンドレスセブン）、ロゴの「の」とサイトのアイコンは涼宮ハルヒの憂鬱のロゴからとっています

いいなと思ったら応援しよう！