こんにちは。Brushup 開発担当の木戸です。
Brushup は先日、無事 1 周年を迎え、導入企業は 800 社を超えました！たくさんの感謝の声を日々いただけるようになり、開発者としてはうれしさと同時に身が引き締まる思いです。
今回は Brushup で好評な機能のひとつ「レビュー機能」について、開発者からの視点や少しウラ話も交えて紹介します！
レビュー機能とは？
レビュー機能とは、画像、動画、ドキュメント(PDF、Office 系ファイル)を Brushup 上にアップし、専用ソフトを使わず細かい指示やコメントが Brushup の中だけでできる機能です。
これの何がいいかというと、例えば動画制作のシーンだと、送られてきた重い動画ファイルをダウンロードしたあと、拡張子に対応した再生ソフトを用意してインストールし、何分何秒のあのシーンのこの部分を云々といった指示を書き、メールなどに添付して送信、といったいくつもの作業が必要ですよね。
それがレビュー機能なら、Brushup に動画をそのままアップして再生し、指示したい箇所で止めて直接手書きでわかりやすく指示して、あとは宛先を選んでポチって終了です。一度使うともうこれなしでは仕事にならないと言われるほど圧倒的に効率が上がるので、中毒性抜群です。
と、まあこんなに便利なレビュー機能ですが、実は色々とリリースに紆余曲折がありました。
レビュー機能の前身、SVG-Edit
実はレビュー機能は数年前から構想があり、その前身がありました。それは SVG-Edit というブラウザ上で svg 編集ができる JavaScript ライブラリを使ったものでした。
このライブラリはなんとブラウザで絵を描ける画面まで用意されており、機能も豊富でとても強力なものでしたが、ただレビューを描くには機能を絞ったほうが重要だとわかり、開発するも泣く泣くお蔵入りとなってしまいました…
その反省を活かし、新たなレビュー機能の制作がまた始まりました。
そして完成へ
新しいレビュー機能はデザインからもう一度見直しました。必要最小限の機能に絞り、何より初めて見た人でも使える機能として進化させています。
レビューを描く機能も HTML5 Canvas を使い、ありものの機能には頼らず、レビューのツールや画面をひとつずつ作成しました。デザイナーとも密に話し合って、細部の操作感や見せ方にもこだわり、気持ちよく使える工夫をたくさん入れ、いまの二代目レビュー機能は誕生しました。
動画にどうやってレビューを描くの？といった、つくりに関する質問もよく聞きますが、実はとても単純で、表示されたコンテンツの上に描画用の透明な Canvas を貼っています。そこで描かれたレビューは全てオブジェクトにして描いた時間や形や拡大率などを保存して表示しています。
この方法は柔軟性が高く、静止画像のレビュー機能を作成後、動画、ドキュメントへの対応もスムーズに進めることができました。
ちなみに、drawImage を使って Canvas に直接コンテンツを貼ってもできますが、Canvas が大きくなるほど著しくブラウザの動作が重くなるため気をつけてください（反省）。
さいごに
レビュー機能はいかがでしたでしょうか。もし興味がわきましたら、無料ですぐに使い始めることができますので、ぜひ一度さわってみてください。
Brushup は本家のブログもあり、レビュー機能以外にも便利な機能の紹介などをしております。スタートアップガイドも作りました!
イラスト・写真・動画制作の圧倒的な業務効率化を目指し、まだまだ Brushup は進化します。ご期待下さい！
フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください！
フェンリルの Facebook ページでは、最新トピックをお知らせしています。よろしければいいね！してください！
関連記事
