gifアニメが作れるWebアプリ Giraf 2 を公開しました
この記事は OUCC Advent Calendar 2015 の7日目の記事にかこつけた宣伝記事です🙇🙇
昨日は @domitry さんの Google Summer of Code やろう でした。
以前このようなWebアプリを作っていましたが、この度Girafを全面的に書き換えたGiraf 2を公開しました。
新機能
複数の動画/GIF/画像を組み合わせられる
Giraf 1では一つだけの動画を変換するだけでしたが、2では複数の動画や画像を組み合わせることができます！
ファイルの読み込みは左上のボタンから行えます。
読み込んだファイルは右下に持っていくと、新しいレイヤーとして追加されます。
レイヤーは左端・右端をつかんでドラッグすると始点・終点を変更できます。一般的な動画編集ソフトと同じですね！ プレビュー再生はスペースキーです。
レイヤー編集が進化
Giraf 1では切り抜きのみでしたが、2ではレイヤーの導入に伴いいろいろ編集できるようになりました。
どこかで見たような項目が並んでいます！ 一番下の「効果」は、Giraf 1でも実装されていた出力画像の編集機能です。 JavaScriptでスクリプトを書くことで以前のバージョンのようにさまざまな効果を追加できます。 （出来が微妙な所なので今後直していきたいところです）
コンポジションの導入
Giraf 2では、「コンポジション」と呼ばれる新しい素材を作ることができます。
コンポジションはGiraf内で使えるシーケンス素材で、複数のレイヤーで構成されます。また、別のコンポジションをレイヤーとして使用することもできます。端的に言うと、After Effectsのコンポジションと同じものです。
ぜひコンポジションを活用して傑作を作ってください！
どのように作られたか
Girafの見た目は全てReactで書かれています。実はこのReact版を作る前に一度Girafの書き直しに挑戦しており、CoffeeScriptでオレオレフロントエンドライブラリなどを書いていましたが、書いても書いても終わらずにつらい気持ちになり挫説していました。Reactは最高です。もう自分で描画部分を実装したくない。
とはいえ、Giraf 2も僕個人が趣味で開発するにはもう限界という規模になりつつあり、手助けが必要と感じています…。Girafはバグ修正・新機能大歓迎です！ PRお待ちしています！
また、Girafについての質問を受け付けるask.fmアカウントも開設しました。要望や指摘などがあればバシバシお知らせください！
