■はじめに

前回の記事で Seriously.js のサンプルコードを Firefox OS 向けの Web アプリへと変更を行いました。

PC 版の Web サイトを単純に変更したのみでしたので、画面サイズがあっていない為、PC 版の表記となっていました。

この点について修正を行いましたので、修正方法を記載したいと思います。

viewportの追加

スマートフォン向けの Web サイトの作成経験のある方はご存知かと思いますが、index.html のタグに viewport を追加することで、表示時のサイズ指定が行えます。

index.htmlの前半部

<html>
<head><title>Seriously.js Tutorial</title></head>
<body>

ここを

index.htmlの前半部

<html>
<head><title>Seriously.js Tutorial</title></head>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
<body>

このように変更します。

各項目ですが、それぞれ以下の様になります。

width
表示時のサイズの指定が行えます。ここでは device の幅と一致するように指定を行っています。
user-scalable
ユーザによるズームの可否の指定が行えます。Web ブラウザ上でのピンチインピンチアウト実施時の拡大縮小の可否が該当します。 no を指定することでユーザによる拡大縮小を行えないようにしています。
initial-scale
表示時の初期ズーム倍率を指定出来ます。1を指定することでズームの変更なしとしています。

このように、表示時に画面の表示幅と一致させ、ユーザによるズームの変更を不可としています。

スマートフォン向けの Web サイトの操作感を思い出して見て下さい。
対応サイトはこのような動作になっていますよね。

お決まりな表現となっていますので、 Firefox OS 向けの Web アプリを開発される際は覚えておいて損のない記載となります。

※への記載できる詳細についてはMDNをご参照下さい。

さて、viewport の指定を行いましたが、どのような表示となったでしょうか。

先程より大分改善されましたが、まだ隙間がある状態となっています。

WebIDE 上からインスペクタで覗いてみてみましょう。

画像のように選択すると、画面上のアプリではコード上の選択箇所に対応する要素が次の図のように破線で表示されます。

どうやら以下のコードの画像指定部分が問題のようです。

index.html

<body>
    <!-- page content goes here -->
    <img src="./images/colorbars.png" id="colorbars"/>

幅の指定を行ってみましょう。

index.html

<body>
    <!-- page content goes here -->
    <img src="./images/colorbars.png" id="colorbars" width="100%" />

画面の表示は上の画像のみ大きくなりました。
どうやら、Seriously.js ではエフェクトを掛ける場合は元の画像サイズのまま表示される模様です。

普通に考えると、大きさを変更できるはずなので、 Seriously.js の公式サイトを見てみました。

どうやら、reformat というデモがサイズ変更しているみたいです。

このコードを見てみることにしました。

reformat

以下に reformat のサンプルコードがあります。

コードを眺めてみるとこの部分で大きさを指定しているみたいです。

            reformat = seriously.transform('reformat');
            target = seriously.target('#canvas');
            //set up reformat parameters
            reformat.width = target.width;
            reformat.height = target.height;
            reformat.mode = '#mode';

seriously.transform() に reformat を指定し、該当の幅、高さを変更。その後、モード指定をし、source に読み込み画像を設定することで、このサイズに大きさが変わるみたいです。

mode に何を指定できるのかAPIリファレンスを見てみたのですが、あまり記載が無く、みあたらず。。。

デモページでは contain, cover, width, heightなどの指定可能項目が並んでおり、いくつか指定できる要素があるみたいです。

index.html

        // declare our variables
        var seriously, // the main object that holds the entire composition
            colorbars, // a wrapper object for our source image
            vignette, // a vignette effect
            reformat, // reformat node
            target; // a wrapper object for our target canvas

        seriously = new Seriously();
        colorbars = seriously.source('#colorbars');
        reformat = seriously.transform('reformat');
        target = seriously.target('#canvas');
        vignette = seriously.effect('vignette');

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

この様にコードを変更しました。

どのような表示になったか見てみましょう。

お、きちんと表示されるようになりました。

今回の対応コードは以下にアップしてます。

■おわりに

Seriously.js のリファレンスがそこまで充実していないのか( 別な場所にある?? )、画像サイズを大きくするのに少し手間取りました・・・

サンプルコードがあるので、なにか詰まった場合はサンプルを参考にして進めるのが良さそうですね。

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

■はじめに

viewportの追加

reformat

■おわりに