軽く自己紹介

企業向け「基幹業務システム」を主に開発しています、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に描画した画像の拡大・縮小（その他もろもろ）などが簡単に行えます。

fabricjs

例えば、衣服を売るネットショップで『マネキンに好きな服を着せてコーディネートを確認！』なんて事が出来ますね。

今回は機能のメイン「背景画像の取り込み」と「キャラクター画像の追加」について説明します。

Fabric.jsの問題点

Fabric.jsを使用するにあたり、問題となるのは日本語の情報量が少ないでしょうか…
実際、Fabric.jsのメソッドを調べるのにかなりの量の英文ページを見てました。

また、Fabric.js独特のクセがあるのも少し難儀です。
※renderAll()が場合によって効かなかったり…

背景画像の取り込み

画像の描画には主に2パターンあります。
　・setBackgroundImageで「背景画像」とする方法
　・canvas.addで「レイヤー」とする方法

ちなみに今回、背景画像はsetBackgroundImageを使用しています。
canvas.addでも同じ事は出来ますが、背景画像が動くのが嫌だったので、背景画像取り込みでは使用しませんでした。

HTML

<canvas>Canvas対応のブラウザで開いて下さい。</canvas>
<input type="file" id="file" accept="image/*">

javascript

$("#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);
}

また、選択画像を「最前面に移動する」機能も作ってありますが、今回はコメントアウトしています。最前面の移動時、稀にレイヤーの再描画がうまく行かず残像が残ってしまった為です。
この原因は最後まで分からず・・・機能的に落としましたｗ

ちなみにこんなプログラムで「最前面に移動」が行えます

javascript

	canvas.setOverlayImage(canvas.getActiveObject()).renderAll();

canvas.getActiveObject()で選択レイヤーを取得しています。

キャラクター画像の追加

Fabric.jsでは「imgタグ」で指定した画像をcanvasに追加出来るので簡単です。

ただし、今回の美雲ジェネレーターでこの方法は使用していません。
1キャラクター150kb～250kb程のサイズがあるので、選択された画像のパスを元にImageオブジェクトを作成する方法にしています。

ちにみに、キャラクター選択で表示している画像は20kb程のサムネイル用画像です。
その画像をSwiper.jsでスライドさせています。

javascript

	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を通して「プログラムを作る（物を作る）のは楽しいよ！」と言っている様に感じます。きっと「マスコットアプリ文化祭」の根本も「作る楽しさを広める、知ってもらう」ではないかと思います。

様々な工夫や技術を駆使したアプリが沢山公開されていますが、簡単なプログラムでも大丈夫なので臆せず「お気に入りのキャラクター」で是非参加してみてください！

「マスコットアプリコンテスト」じゃなく「マスコットアプリ文化祭」ですからね！

問われているのは「技術力」ではなく「自分で作る」事なはずですよ。