Wipeyy - Chrome拡張機能(ユーザー500人くらい)

【概要】

Javascriptの学習を初めて10日くらいの頃にβ版を開発したChrome拡張機能です。その後機能を補充するなどして、Chrome Web Storeにリリースしました！

現在ほとんど告知などはしていないのですが、地道に増え続け230〜250人のアクティブユーザーが付いています。

ショートカットで動画をワイプにできるwipeyy。ワイプは常に最前列に配置され、【再生・停止・10スキップ】も可能です。

初心者向けプログラミング学習サイト『ドットインストール http://dotinstall.com/ 』での学習に最適化したChrome拡張機能
他にもYoutube, Prime Video, ニコニコ動画など様々な動画サイトで利用できます。

【作ったきっかけ】

プログラミングの学習をはじめた頃、もっと多くのことが知りたいと思い、ドットインストールを貪るように見ていました。

しかし、ドットインストールを閲覧しながらVS Codeでコーディングをして、さらにプレビューをブラウザに表示して。。。と、小さい画面では作業が非常にやり難いものでした。

ドットインストールの動画の部分だけを切り出して、エディタを操作していてもテレビのワイプのように見ることができれば便利なのでは・・・。そう思って作りはじめました。

【開発】

Wipeyyでは、簡単に動画をワイプ(Picture in Picture)にできるようにする機能や、ショートカットで再生・停止、スキップなどができる機能を搭載したいと考えていました。

また、ドットインストールを利用しているときに、動画が完了したら完了ボタンを自動でクリックして、次の動画を再生する機能もつけたいと考えていました。

ワイプにする機能は比較的簡単で、video要素を取得さえできれば、Javascript側からPicture in Picutureを実行すればいいだけです。そのためβ版は2,3日で作ることができました。この時はドットインストールでPicture in Pictureができ、視聴最後まで終わると、完了ボタンを押して、次の動画に移動するというものでした。

案外簡単に完成すると思ったのですが、Chrome拡張機能自体の仕様が中々難解であった点や、動画が自動再生できないなどの問題を抱えており、リリースするにはまだまだ未熟なものでした。

最終的に、動画の自動再生に関してはChromeの動画再生ポリシーの問題だったと突き止めることができ、Chrome拡張機能でキーボードショートカットを実装できるようになったりと自分で調べて機能を実装できる力がついて大きな成長を感じることができました。

また、Chrome拡張機能やChromeのポリシーの問題など、日本語の解説記事がほとんど無い中での学習でした。最初は英語のドキュメントを読むことに抵抗がありましたが、メゲずに読み解くうちに、苦手意識を克服し、今では積極的に英語のドキュメントを見ることができるようになったのも大きな成長の1つです。

動画を操作するコントローラーはクラスにしたことで、コードがすっきりとみやすくなったのもここでの大きな学びでした。

【リリースに向けて】

また今回、Chrome拡張機能として多くの人に利用していただくために、ターゲット・ペルソナ、コンセプトなどしっかり設定した上で開発を行うようにしました。

拡張機能の説明文をどのように書けばユーザーに使って頂けるのか。親しみのあるアイコンを作るにはどうしたらいいのかなど、周りの人に壁打ちしながら作成したのも大きな学びの1つです。

【反響など】

リリースした旨をTwitterで投稿したところ、多くの人から反応があり、特に告知や広告もしていないのですが、1週間のアクティブユーザーは200人を上回り、僅かながらですがユーザーも増えております。

たまにTwitterでこの拡張機能が便利と紹介してくださる方がいらっしゃるのでとても嬉しく感じるとともに、モノづくりのやり甲斐を感じることができました。