[Node.js] デザインQRコードをアニメーションさせる

前回はQRコードの中央にちょっとした画像を貼り付ける「デザインQR」を作成しましたが、今回はその画像をアニメーションさせてみたいと思います。

アニメーションするQRコード作ってみた。
これくらいの大きさならQRコードリーダーも認識してくれる。紙はムリだけどデジタルサイネージとかWebで出すのに良いかもね。
（キャラはUNITYちゃん） pic.twitter.com/4TzPShoTmk

— 勝部麻季人 🍮 (@katsube) 2019年6月8日

アニメQRを作成する

準備

適当なディレクトリ作成し、package.jsonを作成後に、node-qrcodeとnode-canvasモジュール、GIFアニメを簡単に作成できるgifencoderをインストールします。

$ mkdir qr-anime && cd qr-anime
$ npm init
$ npm install qrcode canvas gifencoder

アニメーションするための素材ですが、今回はユニティちゃんを利用させていただきました。

DATA DOWNLOAD-利用規約 | UNITY-CHAN! OFFICIAL WEBSITE

http://unity-chan.com/contents/guideline/

HOME DATA DOWNLOAD JPEN 2014/03/06作成2014/05/19修正2015/12/01改定 ユニティちゃんライセンス条項・要約版 2.00バージョン はじめに… ユニティちゃんライセンス条項（以下、「本ライセンス」といいます）は、ユニティ・テクノロジーズ・ジャパン合同会社（以下、「弊社」といいます）が権利を有するキャラクターに関して、クリエイターの皆様に弊社キャラクターを使った二次創作活動を広く許諾することを宣言するためのものです。 弊社キャラクターを使って有償・無償を問わず二次創作活動を行うクリエイターの皆様は、弊...

UNITY-CHAN! OFFICIAL WEBSITE

アニメーションのフレーム毎にキャラを切り出して保存してあります。

ベースとなるQRコードを作成

作業を2段階に分けました。まずは基本的なQRコードを生成します。

コードは以下の通り。

const QRCode = require('qrcode');

// QRコードの設定準備
const file = "qr.png";
const segment = [
  { data:"UNITY-CHAN!\n", mode:"byte"},
  { data:"http://unity-chan.com/", mode:"byte"}
];
const options = {
  width: 164,
  color:{
    dark: '#FF3300FF',     // QRコードの色
    light: '#FFFFFFFF'     // 背景色
  }
};

// QRコード生成
QRCode.toFile(file, segment, options);

詳細は過去記事を参照ください。

[Node.js] QRコードを生成する

https://blog.katsubemakito.net/nodejs/qrcode-generates

今回はNode.js上で簡単にQRコードが生成できるnode-qrcodeを利用し、動的にQRコードを生成してみたいと思います。QRコード自体は非常に便利ですよね。2次元バーコードよりも情報量が増やせるため様々な用途に利用できます。しばらく前から日本はQRコード決済が世を賑わせていますが、個人的には早く滅んでくれないかなと思っていますがそれはまた別の話しw なんでFeliCaから退化しとんねんｗインストールnode-qrcodeはコマンドラインから利用できるコマンドも用意されていますが、今回はNode内からモジュールとして利用します。そのた...

ねこの足跡R

アニメーションさせる

次に先ほど作成したQRコードにアニメを付けていきます。GIFアニメなので要はパラパラ漫画ですね。1フレームずつ画像を作成しgifencoderに渡すと最終的にGIFアニメとして出力してくれます。

const { createCanvas, loadImage } = require('canvas');
const GIFEncoder = require('gifencoder');
const fs = require('fs');

const WIDTH   = 164;             // 画像サイズ X
const HEIGHT  = 164;             // 画像サイズ Y
const GIFFILE = 'UnityQR.gif';   // 出力ファイル名

const makeAnimeQR = async () => {
  // アセット読み込み
  const asset = {
    qr: await loadImage('./qr.png'),    //QRは事前に作成
    chara:[
      await loadImage('./image/s1.png'),
      await loadImage('./image/s2.png'),
      await loadImage('./image/s3.png'),
      await loadImage('./image/s4.png'),
      await loadImage('./image/s5.png'),
      await loadImage('./image/s6.png'),
      await loadImage('./image/s7.png'),
      await loadImage('./image/s8.png')
    ]
  };

  // アニメGIF設定
  const encoder = new GIFEncoder(WIDTH, HEIGHT);
  encoder.createReadStream().pipe( fs.createWriteStream(GIFFILE) );
  encoder.start();
  encoder.setRepeat(0);   // 0:リピートあり, -1:なし
  encoder.setDelay(110);  // フレーム間隔(ミリ秒)
  encoder.setQuality(10); // 画像品質

  // canvas準備
  const canvas = createCanvas(WIDTH, HEIGHT);
  const ctx = canvas.getContext('2d');

  // フレーム生成
  for( let i=0; i<asset.chara.length; i++ ){
    const qr   = asset.qr;
    const icon = asset.chara[i];
    const left = Math.floor((canvas.width - icon.width) / 2);    // x
    const top  = Math.floor((canvas.height - icon.height) / 2);  // y

    // 画像を載せる
    ctx.clearRect(0 ,0, canvas.width, canvas.height);  //リセット
    ctx.drawImage(qr, 0, 0);          //QR
    ctx.drawImage(icon, left, top);   //UNITY CHAN

    // 作成者名も入れておく
    ctx.fillStyle = '#FF3300';
    ctx.fillText('@katsube', canvas.width-50, canvas.height-2);

    // フレームに追加
    encoder.addFrame(ctx);
  }
  encoder.finish();
};

makeAnimeQR();

雑なコードですみませんｗ

最初に貼り付けたツイートにも書きましたが、デジタルサイネージやWebページなどで表示すると目立って良いかもしれませんね。今回利用したアニメはちょっと運動量が多いので場合によってはうざく感じるかもしれませんので、キャラがまばたきをする、髪が揺れるといった細かい演出をするだけでも印象が違ってくると思います。

あと今回はNodeで作成しましたが、通常は画像編集ソフトなどで作れば良いですｗ (なぜ書いた←)

続き

[Node.js] おみくじQRコードを作成する

https://blog.katsubemakito.net/nodejs/qrcode-design-generates3

前回はアニメーションするQRコードを作成しましたが、今回はその応用です。時間とともにQRコードの情報が変化する「おみくじ」を作ってみたいと思います。ついカットなっておみくじQRコードを作った。 pic.twitter.com/0pKlS1576g— 勝部麻季人 🍮 (@katsube) 2019年6月8日雑にいうと「ルーレット」ですね。すごい勢いでQRコードの内容が切り替わっていく中、その一瞬をQRコードリーダー読み取ることで、利用者から見るとランダムな結果が得られるというヤツです。おみくじQRを作成する準備前回と同じです。適当なディレクトリ作成...

ねこの足跡R

参考ページ

• https://github.com/soldair/node-qrcode
• https://github.com/Automattic/node-canvas
• https://github.com/eugeneware/gifencoder
• https://www.slideshare.net/koheikawasaki902/nodecanvasgif

このブログを応援する

お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。

PayPalで300円支払う
※金額は任意で変更できます。
※100円でも泣いて喜びますw
※住所の入力欄が現れた場合は「no needed」を選択ください
これまでのご協力者さま

- Sponsored Link -