クライアントだけで完結するプレゼン動画作成ツールを作って公開しました

本記事はヌーラバーブログリレー2021の12日目の記事です。

ヌーラボには個人開発倶楽部という部活があり、個人開発者同士で作ったものを紹介したり情報の共有したりしてお互いにモチベーションを高め合っています。本記事は、社内で紹介させてもらったプレゼン動画作成ツールについて紹介したいと思います。また、NuCon mini 2021 Summerでも紹介させていただきました。

なにを作ったのか

お手軽にプレゼン動画を作成できるツールを作りました。

こちらがURLになります。

https://presen-vid.com

次の3ステップでプレゼン動画を簡単に作ることができます。

1. スライド画像をアップする
2. スライドごとに音声を録音する
3. 動画を書き出す

画面の構成はこのようになっています。

ソースコードは下記にてGitHubにて公開しています。このツールはクライアントだけで完結しています。

https://github.com/SatoshiKawabata/presen-vid

なぜ作ったのか - モチベーション

個人開発で作るものは色々あるとは思いますが、今回の場合は「自分が欲しいから」というのが大きかったです。やはり自分が欲しいものを作るというのは、わかりやすくモチベーションを保てます。

妻は大学で非常勤の講師をしていて授業を持っています。コロナ禍により大学の授業がリモート授業になり、授業の動画を作って配信する形になりました。

妻は動画編集ができないので、僕が素材(パワポのスライドと録音した音声)をもらってAdobe Premiereで動画を作っていました。

授業が週に何回かあるので、この動画編集の作業が地味に毎回大変でした。素材を受け取るのが授業の当日の朝で授業開始まで数時間しかない、というギリギリのときもありました。

そこで、妻が自分で動画を作れるようにできないか、と思い立ちました。最初はパワポの録画機能を提案してみたのですが、「スライドごとに録音したい」という要望がありました。パワポでもスライドごとに録音できるらしいのですが、僕自身動画作成ツールに興味があったので作ってみることにしました。

どう作ったのか - 技術的な話

技術的な条件として下記を考えていました。

• 無料で作りたいので、動画をクライアントだけで動画を作成できるようにしたい
• スライドや音声データもクライアントで保持したい

クライアント完結にしたかったのはクライアントだけで動画を扱う技術に興味があったからです。

動画のエンコードにはffmpeg.wasmを使用しました。これはFFmpegという動画や音声をエンコードできるソフトウェアをWebAssemblyで動くようにしたライブラリです。これを使ってスライドと音声を1本の動画にまとめています。このライブラリがこのサービスの肝なので作ってくれた方には感謝です。

スライドや音声のデータの保存にはIndexedDBを使っています。そのままのAPIを使うのではなくDexie.jsというIndexedDBのラッパーライブラリを使っています。

妻の動画は1本１時間を超えるのでローカルの容量をかなり食ってしまってMac Book Airのディスクをかなり圧迫させてしまいました。そこで、データをzipに保存して外部メディアに移せるようにする対応などをして回避しました。

いつ作ったのか

毎日子どもを寝かしつけや家事を終えた後に夜な夜なコツコツとコミットを重ねていきました。ガッツリとした時間はあまりとれないので、スキマ時間に作業しました。子どもを寝かしつけながら暗闇の中キーボードを叩いていました。

作ってみたものの色々バグは出てきます。妻は夜型人間なので真夜中に起こされて「なんか画面が消えた(泣)」と叩き起こされてデバッグ作業をした夜もありました。

全体的な開発期間は、だいたい3ヶ月くらいで作れたかと思います。GitHubのプロジェクトでissue管理して進めました。

LPなどの周辺を整える

LPもちゃんと用意しました。最低限のメッセージが伝われば良いというレベルなのでデザインは凝っていません。吹き出しなどのグラフィックはCacooでSVGの素材を作りました。Google Analyticsも用意してどれだけの人が訪れてくれたかを見れるようにしました。

そこで、YouTubeに紹介動画をアップしてLPのトップ画面に配置しました。また、Product Huntに投稿して海外からの流入も狙ってみました。Product Huntに投稿したら海外からの流入が増えたのが面白かったです。国別のユーザー数ですが、アメリカからのユーザーも結構いました。

全体のアクセス数の推移ですが、飛び抜けているところはProduct Huntへ投稿したときです。

「どこかの誰かがこのツールを使って動画を作ってくれること」を一応のゴールにしていました。Google Analyticsのイベントを仕込んで様子を見ていました。Google Analyticsのイベントの数の表ですが、export-videoというのが動画を作成したときイベントです。14人のユーザーがプレゼン動画を作ってくれました。

まとめ

やってよかったことは以下の2点に集約されます。

• 妻が自分で授業の動画を作れるようになって、僕がやっていた動画作成をやらなくてよくなった🎉
• 世界のどこかの誰かが自分一人で作ったものを使ってくれた🎉

妻の動画制作のワークフローが大幅に改善されて、僕が動画編集する手間が無くなり、妻も「簡単で良い」と満足してくれました。

ツール自体を作っている最中はめっちゃ楽しかったですが、一通り出来上がったらちょっと燃え尽きて、LPや紹介動画といった周辺のあれこれを作るのに腰が重かったです。しかしそこを頑張ったことで世界のどこかの誰かに届けることができました。ちゃんと頑張れたのは、自分が直面している問題を解決するものが欲しい一心で作ったというのが大きかったと感じています。普段の業務ではやっていることを自分一人でやるという経験は貴重でした。

ここからユーザーを増やすところが地道で大変なところなのだろうなーと腰が引けています。。まぁ自分の作業を減らすという当初の目的は達成できたので一旦はこれで良いかなと自分を納得させています。

presen-vidに関するご意見・ご要望はGitHub issueに投稿いただけると嬉しいです。それでは失礼します。