Posted at

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

More than 1 year has passed since last update.

この記事は、プロ生ちゃん 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を使っている理由ですが、仕事の合間に作っていたからで、特に深い理由はありませんw


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);
}


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

この原因は最後まで分からず・・・機能的に落としましたw

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


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

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

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

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