この記事は、プロ生ちゃん Advent Calendar 2016の11日目の記事です。
はじめまして、11日目担当のスズムシ@rinri_suzuです。
軽く自己紹介
企業向け「基幹業務システム」を主に開発しています、IT業界に携わって21年目です。
カルチャー教室でプログラミングを教えていたりなんかもしてます。
そろそろ「若者の足を引っぱる老害技術者」と言われそうな感じではありますが・・・
ちなみに、ConoHa VPSのリセールパートナーでもあります。
ConoHa VPSの繁栄は弊社の繁栄！！
美雲ジェネレーターのお話し
初めてマスコットアプリ文化祭2016に参加し、美雲ジェネレーターを作ってみました。
本当はIphoneアプリで「ミクモカメラ」みたいな物を作ってみたかったんですが、Macが別の開発で使われていたり、時間がなかったり・・・
Fabric.jsも使ってみたかったんで、WEBアプリとしました。
環境の説明
Webサーバー
ConoHa VPS 1GBプラン（CentOS 7.2 64bitテンプレート使用）
フレームワーク
Laravel5.3
CSSフレームワーク
Bootstrap 3
使用ライブラリ
Fabric.js（画像合成で使用）
Swiper.js（キャラクター選択で使用）
フレームワークにLaravel5.3を使っている理由ですが、仕事の合間に作っていたからで、特に深い理由はありませんｗ
Fabric.jsて何？
HTML5で追加されたcanvas要素を拡張してくれるライブラリで、canvasに描画した画像の拡大・縮小（その他もろもろ）などが簡単に行えます。
例えば、衣服を売るネットショップで『マネキンに好きな服を着せてコーディネートを確認！』なんて事が出来ますね。
今回は機能のメイン「背景画像の取り込み」と「キャラクター画像の追加」について説明します。
Fabric.jsの問題点
Fabric.jsを使用するにあたり、問題となるのは日本語の情報量が少ないでしょうか…
実際、Fabric.jsのメソッドを調べるのにかなりの量の英文ページを見てました。
また、Fabric.js独特のクセがあるのも少し難儀です。
※renderAll()が場合によって効かなかったり…
背景画像の取り込み
画像の描画には主に2パターンあります。
・setBackgroundImageで「背景画像」とする方法
・canvas.addで「レイヤー」とする方法
ちなみに今回、背景画像はsetBackgroundImageを使用しています。
canvas.addでも同じ事は出来ますが、背景画像が動くのが嫌だったので、背景画像取り込みでは使用しませんでした。
<canvas>Canvas対応のブラウザで開いて下さい。</canvas>
<input type="file" id="file" accept="image/*">
$("#file").change(function(){
var file = this.files[0];
importImage(file);
});
function importImage(e){
var reader = new FileReader();
reader.onload = function (event) {
var imgObj = new Image();
imgObj.src = event.target.result;
imgObj.onload = function () {
var image = new fabric.Image(imgObj);
image.scaleToWidth(canvas.getWidth())
canvas.setHeight(image.getHeight());
canvas.setWidth(image.getWidth());
canvas.setBackgroundImage(image).renderAll();
}
}
reader.readAsDataURL(e);
}
また、選択画像を「最前面に移動する」機能も作ってありますが、今回はコメントアウトしています。最前面の移動時、稀にレイヤーの再描画がうまく行かず残像が残ってしまった為です。
この原因は最後まで分からず・・・機能的に落としましたｗ
ちなみにこんなプログラムで「最前面に移動」が行えます
canvas.setOverlayImage(canvas.getActiveObject()).renderAll();
canvas.getActiveObject()で選択レイヤーを取得しています。
キャラクター画像の追加
Fabric.jsでは「imgタグ」で指定した画像をcanvasに追加出来るので簡単です。
ただし、今回の美雲ジェネレーターでこの方法は使用していません。
1キャラクター150kb～250kb程のサイズがあるので、選択された画像のパスを元にImageオブジェクトを作成する方法にしています。
ちにみに、キャラクター選択で表示している画像は20kb程のサムネイル用画像です。
その画像をSwiper.jsでスライドさせています。
var imgObj = new Image();
ImhSrc = './img/anzu_conoha/anzu_conoha.png';
imgObj.src = ImhSrc;
imgObj.onload = function () {
var image = new fabric.Image(imgObj);
canvas.add(image).renderAll();
}
マスコットアプリ文化祭で思う事
プロ生ちゃんはTwitterを通して「プログラムを作る（物を作る）のは楽しいよ！」と言っている様に感じます。きっと「マスコットアプリ文化祭」の根本も「作る楽しさを広める、知ってもらう」ではないかと思います。
様々な工夫や技術を駆使したアプリが沢山公開されていますが、簡単なプログラムでも大丈夫なので臆せず「お気に入りのキャラクター」で是非参加してみてください！
「マスコットアプリコンテスト」じゃなく「マスコットアプリ文化祭」ですからね！
問われているのは「技術力」ではなく「自分で作る」事なはずですよ。