動画や画像の同時視聴アプリ「ぺたぺた」を作った

動画や画像を画面内にぺたぺた貼ることで、たくさんのデータを同時に視聴するためのアプリを作りました。 画面全体に等間隔で並べたり、サムネイル形式で表示したり、自由配置で表示したり、様々な表示形式に対応しています。

ときどき動画や画像ファイルを一度にたくさん開いて同時に見るのですが、良いツールがありません。 一般的な動画プレイヤーで開くとプロセスが大量に立ち上がって管理しにくいです。 一般的な画像ビューワーで開くと画像を一覧にして見にくかったりする時があります。 そんな訳で作りました。

ぺたぺた

たとえばこんな感じの UI で動画や画像を見れます。

最近はほとんどのツールを Web アプリ化しているので、動画プレイヤーや画像ビューワーの Web アプリ化はちょうど良い機会になりました。 作ってみて気付いたのは、Web アプリのほうが動画や画像のロードが早いことです。 プロセスをたくさん立ち上げないで良いし、Web ブラウザの実装が高速だからと思います。

割とサクッと作れましたが、なかなかいい感じです。 D & D での貼り付け、Ctrl + V での貼り付けに対応しており、スムーズに動画や画像を追加できます。 動画サイトの同時視聴などもできると嬉しい人がいるかなと思って、 HTML タグの貼り付けにも対応しておきました。 HTML タグが貼り付けられるので SVG や数式、メモの貼り付けなどもできます。 ホワイトボードアプリや付箋アプリとしても使えるかも知れません。 ちなみに YouTube だったら共有用の embed タグをコピーして貼り付ければ良いだけです。 ただ YouTube などの動画サイトはウィンドウサイズによって色々挙動を変えているので、 コツを掴まないとリサイズ処理がスムーズにいかないのが欠点です。たぶんどうしようもない。

Sortable、Resizable、Draggable などのクラスをたくさん実装したのですが、 なんかもうこのへんの機能はライブラリを使わないほうが良い気がしています。 ライブラリを使うと古くてあまり効率的な実装になっていないことが多く、 古い実装に影響されすぎて逆につらい気がするのが昨今です。