"YouTubeExtension"と"LocalTube"のご紹介

YouTubeExtensionとは

独自に開発したGoogleChromeの拡張機能です❗️
何ができるかはコントローラー(次の画像)を見れば何となくわかると思います😕操作性を考えたら何もデザインしないのが使いやすかったので初期のHTMLの状態です😅

フィルター機能

単純に動画の映像の色を変えるものになります🌈ようは明るさやコントラストなどを変更することができる機能🤖
使用用途としては心霊系の動画をより恐怖を持って視聴することが可能になったり、見ずらい部分をフィルターをかけて見やすくするなどがあります🐈

左右反転/上下反転

単純に動画の映像を左右反転させたり、上下反転させることができる機能🪞
どういうわけか、ごく稀に左右反転していたり、上下反転していたりする動画があるので、それに対応するための機能🔥

コントロール表示/非表示

再生ボタンとかチャンネルアイコンなどの動画視聴に邪魔なオブジェクトを非表示にする機能☠️
単純に映画とかを見ていて、カーソルが当たると出現するオブジェクトが邪魔だから実装しました💡

キャプチャ機能

現在写っている映像を画像化する機能で動画の画質に応じて良い写真が撮れる🎥4Kの映像なら非常に良い写真が撮れます❗️
ちなみにフィルタをかけた状態や左右上下反転状態でもシャッターを押せます😃

擬似クリップ機能

これまでの機能はすでに公開されている拡張機能にもある機能で『すげぇ❗️』という機能ではないが、おそらくこの擬似クリップ機能は世界初❓じゃないかと自負している✊

YouTubeにはクリップという機能があり、自分のお気に入りのシーンを何度も繰り返し視聴したり、保存・共有することのできる機能があります🧐 が、この機能はYouTube側の仕様や仕様変更などを経て、クリップできる動画もあればそうでない動画もあったり、動画投稿者自身が他人のクリップを削除することができたり、さらに言えば5秒〜60秒までしかクリップできない、そう言った制限があり、私自身もこれを不便に感じていました😡

というわけで作ったのがこの擬似クリップ機能になります💡擬似という名をつけているのは本家YouTubeのクリップ機能との差別化を測るためです📏言ってしまえば本家の機能から共有機能を無くしたものと考えてもらえればOK👌

この場合、3.5秒〜4.5秒の動画を繰り返し視聴することが可能になる💡が、ブログでは説明できないので気になる人は拡張機能を設定してみてね☺️

LocalTubeとは

LocalTubeとは擬似クリップの情報をlocalhost環境へ保存し、取り扱うためのツールになります😃ようはクラウド上へデータを保存せず、自分自身の端末をローカルサーバーとして動かし、自分自身で擬似クリップを管理するツールです🥱保存する機能をどう作り、運用するのかを考えた時、Webサービスとして展開しようとすると、サービス規約や認証機能などを実装しなければならず、それにともなう保存先サービスの無料制限や課金額などを考える必要がありました😮‍💨だからこそSQLiteを用いてOSS(オープンソースソフトウェア)で対処することに帰着しました🐸

できることは擬似クリップ情報の保存、ブラウザ上での情報管理になります。

"YouTubeExtension"から擬似クリップ情報を送信し、自動でサムネイル画像(キャプチャ機能で取得した画像)と擬似クリップ情報をSQLiteに保存することができます。そしてExpressを用いてブラウザに一覧を表示することができ、情報の編集や擬似クリップの視聴ができます☝️

⚠️擬似クリップの視聴はあくまで"LocalTube"と"YouTubeExtension"を連携させないといけないので、それぞれを自分のPCにインストールしておく必要がある⚠️

"YouTubeExtension"と"LocalTube"の今後について

"YouTubeExtension"は今後、タイミングがあれば他にも機能を実装しようと考えており、アイデアを募集中🚩

"LocalTube"はNEXT.jsへの移植を考えており、現状は機能のアップデートはありません🚨なぜかというと"LocalTube"自体がjavascriptのみで作られており、これ以上の機能の追加や複雑化を伴ってくると、保守や操作性に影響が出ると考えているから、このタイミングで移植しようと判断しています🐸ただ他にもアイデアがあり、そちらの対処や勉強、就職活動など時間は限られているので、実際にどうなるのかわかりませんがね🤮

GitHub リポジトリ

https://github.com/portfoliokns/YoutubeExtension
Chromeウェブストアへ公開しているわけではないので、PCへインストールする必要がありますが、比較的簡単に導入することができます⚠️

https://github.com/portfoliokns/LocalTube
Node.jsやExpressやSQLiteを使用するため、ITエンジニアとしての知識が必要となりますので、導入はある程度困難を極めます🚨