Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

この記事は、プロ生ちゃん Advent Calendar 2016の11日目の記事です。

はじめまして、11日目担当のスズムシ@rinri_suzuです。

軽く自己紹介

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

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

ちなみに、ConoHa VPSのリセールパートナーでもあります。

20161031_053545738_iOS.jpg

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

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

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

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

susumu_taka
基幹業務系の開発やってます 最近はlaravel5.1使う事が多い今日この頃
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした