マスコットアプリ文化祭に参加してみょう！

この記事は、[プロ生ちゃん Advent Calendar 2016](http://qiita.com/advent-calendar/2016/pronama-chan)の11日目の記事です。

はじめまして、11日目担当のスズムシ[@rinri_suzu](https://twitter.com/rinri_suzu)です。

# 軽く自己紹介
企業向け「基幹業務システム」を主に開発しています、IT業界に携わって21年目です。
カルチャー教室でプログラミングを教えていたりなんかもしてます。

そろそろ「若者の足を引っぱる老害技術者」と言われそうな感じではありますが・・・

ちなみに、[ConoHa VPS](https://www.conoha.jp/)のリセールパートナーでもあります。

![20161031_053545738_iOS.jpg](https://qiita-image-store.s3.amazonaws.com/0/100025/facfc045-b0ca-7704-3ea8-11a6b2c59010.jpeg)

**ConoHa VPSの繁栄は弊社の繁栄！！**

# 美雲ジェネレーターのお話し
初めて[マスコットアプリ文化祭2016](https://mascot-apps-contest.azurewebsites.net/2016/About)に参加し、[美雲ジェネレーター](http://windurst.jp/mikumo)を作ってみました。

本当は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](http://fabricjs.com/)

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

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

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

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


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

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

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


```ruby: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);
}
```

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

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

```ruby:javascript
	canvas.setOverlayImage(canvas.getActiveObject()).renderAll();
```
canvas.getActiveObject()で選択レイヤーを取得しています。


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

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

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


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

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


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

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