■はじめに

前回はサンプルコードをそのまま持ってきただけでしたので、今回はサンプルコードの中を見てみたいと思います。

前回作成したコードは以下にあります。
https://github.com/namaranran/seriouslyjs_sample/blob/master/hello_seriouslyjs_fit_size/index.html

index.html

<!DOCTYPE html>
<html>
<head><title>Seriously.js Tutorial</title></head>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
<body>
    <!-- page content goes here -->
    <img src="./images/colorbars.png" id="colorbars" width="100%"/>
    <canvas id="canvas" width="344" height="258"></canvas>
    <div>
        <input type="range" id="vignette-range" min="0" max="20" step="0.0001" value="1"/>
    </div>

    <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>
    <script>
    (function() {
        //main code goes here
        // declare our variables
        var seriously, // the main object that holds the entire composition
            colorbars, // a wrapper object for our source image
            reformat, // reformat node
            vignette, // a vignette effect
            target; // a wrapper object for our target canvas
        seriously = new Seriously();
        colorbars = seriously.source('#colorbars');
        reformat = seriously.transform('reformat');
        vignette = seriously.effect('vignette');
        target = seriously.target('#canvas');

        reformat.width = target.width;
        reformat.height = target.height;
        reformat.mode = 'contain';
        reformat.source = colorbars;

        vignette.amount = '#vignette-range';
        // connect all our nodes in the right order
        vignette.source = reformat;
        target.source = vignette;
        seriously.go();
    }());
    </script>
</body>
</html>

index.html のみで完結している簡単なコードになっています。
このコードは < script > タグの前後 2 つに分割することができます。

前半の処理

< script > タグの前についてです。

    <!-- page content goes here -->
    <img src="./images/colorbars.png" id="colorbars" width="100%"/>
    <canvas id="canvas" width="344" height="258"></canvas>
    <div>
        <input type="range" id="vignette-range" min="0" max="20" step="0.0001" value="1"/>
    </div>

    <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>

ここでは以下の処理を行うためのコードが書かれています。
1. エフェクトを掛ける対象となる元画像の読み込み
2. エフェクトを掛け表示する為のキャンバス
3. エフェクトの設定値の為のスライダ
4. 関連スクリプトの読み込み

Seriously.js にてエフェクトを掛ける場合に必須となるのが上記 1, 2 にある、「1.対象となる元画像」、「2.エフェクトを掛けるキャンバス」となります。また、 id は必ず指定する必要があります。

イメージとして、この1で読み込んだ画像を後半部分の script 内でエフェクトをかけ、2 のキャンバスを指定し表示するという感じです。

また、この前半部分では Seriously.js の本体やエフェクトも読み込みを行っています。

後半の処理

次に後半部分です。

    <script>
    (function() {
        //main code goes here
        // declare our variables
        var seriously, // the main object that holds the entire composition
            colorbars, // a wrapper object for our source image
            reformat, // reformat node
            vignette, // a vignette effect
            target; // a wrapper object for our target canvas
        seriously = new Seriously();
        colorbars = seriously.source('#colorbars');
        reformat = seriously.transform('reformat');
        vignette = seriously.effect('vignette');
        target = seriously.target('#canvas');

        reformat.width = target.width;
        reformat.height = target.height;
        reformat.mode = 'contain';
        reformat.source = colorbars;
        vignette.amount = '#vignette-range';
        // connect all our nodes in the right order
        vignette.source = reformat;
        target.source = vignette;
        seriously.go();
    }());
    </script>

非常に短いコードですが、この後半では「変数の定義/初期設定」と、「実際の設定処理」に分かれています。

定義している変数について

seriously
Seriously.jsの本体。以降のエフェクトや表示先のキャンバス指定などを行うのに必須。
corlobars
処理対象の画像の格納に使用。
reformat
画像の拡大/縮小の為に使用。reformatを行わないと、画像の元サイズのままとなるため、表示多少の画面サイズによっては小さく(あるいは大きく)なってしまう為、使用。
vgnette
エフェクト処理の為に使用。
target
エフェクトを掛けた画像をキャンバスに書き込む際に使用。

seriously 配下のメソッドは下記に定義されています。ただし、記載されていないところも混在されています・・・
https://github.com/brianchirls/Seriously.js/wiki/Seriously#methods

この各変数と前半部分で定義した画像、キャンバスとの関連付けは id に指定した名前を介して行われます。

    colorbars = seriously.source('#colorbars');
    target = seriously.target('#canvas');
    vignette.amount = '#vignette-range';

id 名に # を付け指定するだけですので非常に簡単ですね。

実処理について

変数の設定後は、画像の拡大・終了、エフェクト処理、キャンバスへの書き込みを行っています。

変数の定義と同様ですが、処理の流れは以下の図の様になります。

まず拡大縮小処理です。

     reformat.width = target.width;
     reformat.height = target.height;
     reformat.mode = 'contain';
     reformat.source = colorbars;

サンプルコード上では上記となっていました。
拡大するサイズの縦/横を指定し、拡大モードの指定、そして拡大する対象の画像を指定している模様です。
モードは他にも色々と設定できそうですので、 API リファレンスを見てみたのですが、まだ空白のままで何も記載がありません・・・

APIリファレンス
https://github.com/brianchirls/Seriously.js/wiki

仕方が無いので、実際のコードベースで追ってみます。
reformat のサンプルコードは以下にあります。
https://github.com/brianchirls/Seriously.js/blob/master/examples/transform/reformat.html

    <option value="contain" selected>Contain</option>
    <option value="cover">Cover</option>
    <option value="distort">Distort</option>
    <option value="width">Width</option>
    <option value="height">Height</option>
    <option value="none">No Scale</option>

CSS で設定が可能な contain, cover の他、 Distort(恐らく,縦横比無視して収まるサイズに変更), Width(幅優先), Height(縦優先), No Scale(拡大しない)が設定できるみたいです。

設定を行ったあとは、サイズ変更を行う対象の元画像を source に指定して完了。

次に、エフェクトの適用です。
エフェクトを行う対象のオブジェクト内の amount に値を指定し、 reformat と同様に souce に指定。

   vignette.amount = '#vignette-range';
   // connect all our nodes in the right order
   vignette.source = reformat;
   target.source = vignette;
   seriously.go();

最後に seriously.go() を呼び出して完了という流れです。

エフェクト適用時の amount ですが、エフェクト毎に指定できる要素が異なる模様。
ただし、リファレンスには詳細が無いため、サンプルコードを参考にするか、各エフェクトの JS ファイルの中をみて頑張るかのどちらかになりそうです。。。

Fx0 で Seriously.js を使ってみたい(その3)

■はじめに

前半の処理

後半の処理