■はじめに

こんにちは!
最近、Firefox OS 搭載端末の Fx0 をゲットしました。
いろいろと楽しんでいるのですが、少しだけ困ったことがあります･･･
カメラが好きでよく写真を取るのでカメラアプリをよく使うのですが、写真にエフェクトをかけられるアプリがリクルートさんの Camerean ぐらいしかありません、、、他にないのかなぁと探してみたのですが見当たらず･･･
なければ作ればいいじゃんと思ったのですが、JavaScript で画像フィルタがそもそも存在するのかとか、パフォーマンスは大丈夫なのかとか色々と気になることが多く、なかなか作るのに着手も出来ない状況となっています。
そこで、悶々とした思いの中でスキマ時間を利用して調べてみた内容をシェアします。

まずは、Seriously.js について調べて見た内容をシェアしたいと思います。

■Seriously.js とは何ぞや

まず最初にそもそも、Seriously.js は何なのか?からですが、Seriously.js の公式(github)によると、

Seriously.js is a real-time, node-based video compositor for the web. Inspired by professional software such as After Effects and Nuke, Seriously.js renders high-quality video effects, but allows them to be dynamic and interactive.

と書かれています。
意訳すると、

Seriously.js は Webの為のリアルタイムのノードベースのビデオコンポジットシステムです。After Effects, Nukeといったプロフェッショナルなソフトウェアに影響を受けています。Seriously.js はダイナミック、インタラクティブなビデオエフェクトをハイクオリティにレンダリングします。

という感じです。後半の方がルー大柴ぽいですが、画像や動画にエフェクトをかけてくれる JavaScript のライブラリみたいですね。

最初に出てくるノードベースのコンポジットシステムですが、日本語での情報が乏しくほとんどありませんでした。Wikipedia の英語版に情報がありましたので、こちらもあわせて記載します。
Wikipedia の記載によると動画、画像などをオブジェクトという単位で扱い、このオブジェクト毎にエフェクトをかけられるみたいです。
一方、比較対象として挙げられているのがレイヤベースのコンポジットシステム(Layer-based compositing)というものでタイムラインをベースとしてキーフレーム毎にエフェクトをかけるものとして例が挙げられています。恐らく、Flash などを想像されると良いのかなと思います。

Seriously.js の機能説明

公式によると、以下が機能として挙げられています(日本語に意訳しています)。

Optimized rendering path and GPU accelerated up to 60 frames per second

GPUを用いての60fps以上のレンダリングに最適化

Accept image input from varied sources: video, image, canvas, array, webcam, Three.js

正しいソースからのイメージのインプットを許可(ちょっと意味がわかりませんでした…):video, image, canvas, array, webcam, Three.js(これらだけを許可しているということ?)

Effect parameters accept multiple formats and can monitor HTML form inputs

複数のフォーマットからのパラメータ入力に対応し、HTML フォームインプットから確認することが可能( 後半ちょっと意味が…。デベロッパーツールなどからパラメータを確認できるということでしょうか )

Basic 2D transforms (translate, rotate, scale, skew) on effect nodes

エフェクトノードでは基本的な 2D の変換に対応( translate, rotate, scale, skew )

Plugin architecture for adding new effects, sources and targets

プラグインによってエフェクトを新規追加可能

Read pixel array from any node

全てのノードから画素の配列を参照可能

Load with AMD/RequireJS

AMD/RequireJS によって読み込み

対応しているエフェクト

Included Effects参照

Vignette、Mirrorなど様々なものに対応しています。

要求事項

WebGL に対応しているブラウザである必要があり、Firefox(4.0以上)、Google Chrome(9以上)、InternetExproler(11以上)、Opera(18以上)の必要があります。

ちなみに Firefox OS搭載端末の Fx0 は Firefox 32相当なので Seriously.js に対応しています。

また、セキュリティの制限として同一のオリジンの画像、動画しか処理出来ないため、クロスオリジンに注意が必要です。

■デモページ

Seriouslyjs.org と Github の2種類が存在するみたいです。

Fx0 でそれぞれデモページをざっと見てみました。

Seriouslyjs.org の動画のエフェクトでは [By the Sea] のエフェクトがただしく適用されていないみたいで、以下の画像の様に真っ青な画面となっていました。
使用しているエフェクトが Firefox OS では対応していないのか、なんなのか原因はわかりません･･･

ただし、他のデモはキチンと動いていましたので、全て動かないとかではなく、特定のエフェクトのみダメみたいな感じです。

■Hello Seriously.js

Hello World 代わりに簡単なサンプルを作ってみました。
サンプル作成の手順を以下に書きます。

ライブラリの取得

まず最初に Seriously.js のライブラリを取得してきます。

既に Git 環境が有る方でしたら、以下のコマンドを入力し、ライブラリ一式を取得して下さい。

git clone https://github.com/brianchirls/Seriously.js.git

Git 環境が無い方も心配せずに、Seriously.jsのページの右にある[Dowonload ZIP]を選択し、ライブラリをダウンロードして下さい。

サンプルファイルを Web アプリにしてみる

Seriously.js に付属のサンプルを Firefox OS 向けに動かすため Web アプリにしてみようと思います。

こちらの Github に修正したコードをアップしていますので、ご覧になって下さい。

今回のサンプル作成では、付属のサンプルディレクトリから、tutorialというものを持ってきて少し変更しました。

といっても、ファイルパスの変更と、 Web アプリ向けに manifest ファイルを追加したのみです。

manifest.webapp

{
  "name": "Seriously Demo",
  "description": "Serioushly App",
  "type": "web",
  "launch_path": "/index.html",
  "orientation": "portrait-primary",
  "locales": {
    "en-US": {
      "name": "Seriously Demo",
      "description": "Web app Seriously Demo"
    }
  },
  "icons": {
    "128": "/images/colorbars.png"
  }
}

このファイルを追加するのと、 index.html のソースの参照パスを以下のように変えただけです。

    <script src="./js/seriously.js"></script>
    <script src="./js/effects/seriously.vignette.js"></script>
    <script src="./js/effects/seriously.hue-saturation.js"></script>
    <script src="./js/effects/seriously.split.js"></script>

少し変更するだけで Firefox OS 向けのアプリがつくれちゃいますので、とてもお手軽に出来ますね。

下のスライダを変更すると、画像に vignette のエフェクトがかかります。

PC 版を単純に持ってきただけだからなのか、画像が見た目より小さく表示されていたりしますので、ここらへんは直す必要がありそうです。

おわりに

ざっとみたところの範囲にはなりますが、Fx0 でも動画のデモがヌルヌルと動いていましたので、非常にポテンシャルを感じる結果となりました。
ただ、動かないエフェクトがあったりなど気になることも有りますので、実際に使ってみる場合はなんのエフェクトが動かないかなど見てみる必要がありそうです。

Fx0 で Serioushly.js を使ってみたい