埋物の庭

埋物の庭

街中にあるつい見落とされがちで埋もれてしまっているもの(=埋物、まいぶつ)を紹介します。

QRコード絵画を作ろう!

f:id:haniwakai:20210913220658p:plain

 

突然だが、下の画像をご覧いただきたい。

f:id:haniwakai:20210912202628p:plain

なんの変哲もないQRコードだ。

しかし読み取ってみると…

 

f:id:haniwakai:20210912204933j:plain

 

f:id:haniwakai:20210913211037j:plain

 

富士山だ!

QRコードに富士山の絵が入ってる!

 

私はこの方法で作成した絵をQRコード絵画と呼ぶことにした。

今回の記事は、私がQRコード絵画を創りだすまでのひと夏の物語だ。

 

はじまり

QRコードは便利だ。

読み取るだけで色々なことができてしまう。決済やポイントカード、URL告知など街中いたるところで日々使われている。スマホの普及とともに利用範囲は広がり続け、空前の大繁栄をとげている。

 

f:id:haniwakai:20210908232256j:plain

新目白通り沿いの看板。デカい。

f:id:haniwakai:20210912210129j:plain

手のひらにQRコードがある人。

 

そんなQRコードを眺めていて思った。

 

QRコードを使ってなにかおもしろいことができるのではないか。

有用さ以外の使われ方もあるのではないか。

もしかするとQRコードにテキスト以外の情報、たとえば画像を入れることもできるのでは?

 

実際にやってみよう。

 

そもそもQRコードとは

QRコードは、デンソーウェーブが1994年に開発した2次元コードだ。QRコードデンソーウェーブの登録商標

 

 

私たちが日常で使っているように、QRコードにはテキストデータを入れることができる。ただのテキストでもいいし、URLでもいい。

 

QRコード仕様を見ていると、英数字は最大4,296文字、漢字は最大1,817文字とある(バージョン40、誤り訂正レベルL)。だいぶ入れられるみたいだ。

 

f:id:haniwakai:20210912211641p:plainテキストを入れたり

 

f:id:haniwakai:20210912212219p:plain

URLを入れられる

 

このようにテキストデータを入れるのが王道というか一般的な使われ方なわけだけど、それ以外にバイナリデータも入れることもできるらしい。最大2,953文字まで。

 

ん、ところでバイナリデータって?

 

バイナリデータとは

バイナリデータはコンピュータが処理するために2進数で表現されたデータのこと。バイナリ=binaryは2進数という意味。


なじみがないと思うかもしれないが実は身近な存在で、画像や音声データ、Excelなどソフトのファイル、PCの実行ファイルなどテキストデータ以外はすべてバイナリデータだ。

 

f:id:haniwakai:20210909003501p:plain

テキストデータはメモ帳などテキストエディタで開くとそのまま読むことができるが、それに対してバイナリデータはバイナリエディタ(バイナリデータ版のテキストエディタ)で開いても2進数がずらーと並んでいるだけで意味はわからない。

 

f:id:haniwakai:20210913213945p:plain

テキストエディタ

 

f:id:haniwakai:20210913214136p:plain

バイナリエディタ

 

バイナリデータは、ファイルに関連づけられたアプリケーションを使わないと中身が見られないのだ。だから中身が画像のバイナリデータ(=画像データ)であればペイントなどの画像編集ソフトで開く。そうすると画像として表示させることができる。

 

f:id:haniwakai:20210913214957p:plain

 

というわけで画像データはバイナリデータなのだ。

 

さきほど仕様で最大容量が2,953文字までと確認した。これはそのまま2953バイトということだから、約3キロバイト。画像ファイルとしてはかなり小さい容量だ。

 

たとえばスマホで撮った画像のサイズを見てみると単位はメガ。キロはそれよりも1/1000倍小さい。どうしよう。

 

そこで思いついた。ドット絵だ!

 

f:id:haniwakai:20210912220310p:plain

UFO


昔のゲームは限られた解像度やデータ容量のなかでドット絵によってグラフィック表現をしていた。

 

先人たちの知恵を参考に、ドット絵ならなんとか画像データをQRコードに入れられるはずだ!

 

QRコード絵画 ー作成編ー

それでは作っていこう。

 

◆必要なもの

・お絵かきソフト(ピクセル数や色数を指定できるもの。今回はdotpictを使用)

バイナリエディタPNGを開けるもの。今回はFavBinEditを使用)

QRコード作成アプリ(バイナリデータを扱えるもの。今回はQRefineを使用

 

好きなドット絵を書こう。

96×96ピクセルのキャンバスを用意して描いていく。

 

f:id:haniwakai:20210912224619j:plain

 

色数が増えるとその分容量も増えるので気をつけて。このキャンバスサイズだと10色くらいまではギリギリいける。

 

f:id:haniwakai:20210912224600j:plain

そろそろ紅葉ですね

 

できた。

 

作品をPNG形式で保存して容量を確認する。

1,605 バイト、3MB以下だ!これならいけそう。

 

次に、この絵を画像としてではなくバイナリデータとして扱いたいので、バイナリエディタで開く。今回はFavBinEditを使った。

 

f:id:haniwakai:20210913214136p:plain

豆知識:PNGファイルの最初の8バイトは「89 50 4E 47 0D 0A 1A 0A」

 

このバイナリデータをまるっとコピーしてそれをQRコード作成アプリにペーストしたい。

しかしQRコードは基本的にテキストデータを入れることが想定されているため通常のアプリではそれができない。

探しているとバイナリデータも入れたいこだわり派向けのアプリがあった。QRefineだ。

 

 

まさに欲しかったものを作ってくれた方に感謝しつつ、先ほどコピーしたデータをアプリにペーストする。これでQRコードの出来上がりだ!

 

f:id:haniwakai:20210912231430j:plain

ちなみにQRefineのバイナリの上限は2050バイト以下までなので注意

 

できあがったQRコードは画像として保存できるので、人に見てもらいたいときはそれを読み取ってもらおう。

 

QRコード絵画 ー読取編ー

それではできあがったQRコードを読み取って、作品を鑑賞しよう。

 

◆必要なもの

QRコード読取アプリ(バイナリデータを扱えるもの。QRefineがおすすめ

・画像編集ソフト(なんでもOKだが、絵のピクセル数が極小なのでできれば拡大できるものが望ましい。今回はPhotoshopを使用)

 

基本的には作成の工程の逆。ただしバイナリファイルを開くところが鬼門だ。

 

まずQRコード読取アプリでQRコードを読み取る。

 

f:id:haniwakai:20210912204933j:plain

 

すると、QRコード画像orバイナリデータとしてファイル保存できるので、バイナリデータとして保存する。

 

f:id:haniwakai:20210912232114j:plain

 

バイナリデータのファイルは拡張子が.binとなっている。これが厄介で、スマホタブレットによっては開けたり開けなかったりする。

 

私の使っているOPPOスマホはファイルタイプを選択すれば「写真」として開くことができた。しかしiPhone/iPadはそれができないし、Androidでも機種によっては開くことができないようだ。

 

f:id:haniwakai:20210912232951p:plain


なので開けない場合は

①PCで開く(PCはBINが開けるので)

②オンライン変換サイトを使う(BIN→PNGなどで変換)

のどちらかを試してみよう。

 

②も失敗することがあるので、私の一番推奨は「スマホQRefineをインストールして、QRコードを読み取って、保存したバイナリファイルをPCに送って、Photoshopで開いて」ということになる。

 

正直けっこうな手間だ。

しかしその分見てもらえたときは嬉しい。ぜひやってみてほしい。

 

作品

作成編でお見せしたものを含めて3作品。

 

1. aki

f:id:haniwakai:20210913001533p:plain

 

2. Tea

f:id:haniwakai:20210913001737p:plain

 

3. estate

f:id:haniwakai:20210913212118p:plain

 

おわりに

今回は画像だったけど、他のバイナリデータも入れられるのでまた試してみたい。たとえば音楽でチップチューンとか。

 

QRコードには可能性が詰まっている!