背景が黒いWebページにQRコード載せるときは注意が必要

QRコードを配置したページの背景が黒い場合、携帯電話のQRコードリーダーの認識が悪くなることがあるようです。これは良く考えれば当たり前なのですが、画面が暗いとQRコードを読み取るカメラが明るさを勝手に調整して白い部分が光ったようになってしまうからです。

以下は背景が黒い場合と白い場合のQRコードを読み取った画面の比較画像です。背景が黒いと左のように光って、QRコードがほとんど見えなくなっています。


 
実際に試したい場合は以下のサンプルページから。
画面クリックで黒いページと白いページが切り替わるので、携帯電話をかざしたままクリックすると、カメラが自動的に明るさを調整する様子が良くわかると思います。
※トリニトロンのモニターだと輝度が低いため、この現象が起こらないようです。

サンプルページ01 (画面クリックで切り替わります)
 
以下のように、QRコードの明度を下げたり色をつけたりしてコントラストを低くくすれば回避することができます。

サンプルページ02 (画面クリックで切り替わります)
 
もちろんQRコード自体を大きくすることでも認識を上げることができます。ただ多少大きくするよりかは、明度を下げる方が認識度が高いです。

携帯の機種やモニターの明度にも関係して必ず起こる現象ではありませんし、QRコードリーダーの明るさ調整で調整すれば読み取ることもできますが、背景が黒いWebページにQRコードを載せる時はデザインに注意が必要そうです。

FLARToolKitを使った素敵コンテンツ

FLARToolKitを使った素敵コンテンツを2つご紹介。

bow

ひとつ目はボストーク株式会社さんの名刺連動コンテンツ『BOW』
シンプルなキャラクターの可愛さ、小学校の図工の時間を思い出させるような楽しいデザインが素敵なサイトです。
BOWさんの名刺に印刷されているマーカーでサイト内のFLARToolKitコンテンツを体験することが基本になっていますが、名刺がなくても自分でカスタムデザインしたFLARToolKit用アバターを作って遊ぶことができたり、FlickerやTwitterと連携させる仕組みも用意してあったりと、目一杯工夫がこめられたコンテンツです。
その他、FLARToolKitでマルチマーカー(複数のマーカーで複数のモデルを表示する)を使ったコンテンツは珍しいので、そこも見所。
 
 
aid-dcc

二つ目は既にご存知の方も多いと思いますがAID-DCC/カタマリの年賀コンテンツ『HAPPY NEW YEAR ‘09』
こちらはAID-DCC/カタマリから送られたFLARToolKit用マーカー付きの年賀状を用意してサイトにアクセスすると、今年一年のメッセージを含んだ3Dアニメーションが見られるというものです。
 
Read more »

このあいだのFLARToolKit使ったやつのソースと、その動かし方の解説

いまさらな感じですが、12月のてら子で発表したFLARToolKitの使ったやつのソースを公開しました。

xmas_sample_flartoolkit.zip

FLARToolKitの中に入っているサンプルファイルとほとんど同じで、公開するほどのものでもない・・・て感じなのですが、以前解説したFlexBuilderでFLARToolKit動かす記事が古くなっててあまり参考にならないというのもあり、今回公開したソースファイルを動かすまでの手順を書いておきます。FLARToolKit備えつけのサンプルファイルも同じ手順で動かせます。
今回はFlexBuilderもFlashDevelopも使わず、Flash CS3単体で動かしてみます。

必要なライブラリのダウンロード

FLARToolkit(TortoiseSVNなどでダウンロード)

Papervison3D

Tweener

FLARToolkitとPapervison3Dは必須です。Tweenerは、FLARToolKit備えつけのサンプルファイルでは必要ないですが、今回動かすソースで使っているのでダウンロードしてください。
 
FLARToolKitのtrunk以下をダウンロードすると以下のようになっています。


 
Read more »

注文してたものが届いた

三ノ宮の革靴職人さんに注文していたものが届いた。
とても気に入ったので写真撮ってブログにアップ。
 
Read more »

Blenderのアニメーション付きファイルをPapervision3Dで表示する


 
Blenderで作ったアニメーションを、Papervision3Dで使う方法の解説です。
Flashで3Dアニメーション付きのファイルを扱う場合、3DソフトはフリーソフトのBlender、FlashはPapervision3Dのライブラリを使用するのがポピュラーみたいです。

Papervison3Dでアニメーション付きの3Dファイルを読み込む場合は、Collada形式(拡張子.dae)のファイルを使用するのですが、BlenderからPapervision3Dで使えるdaeファイルを書き出すのが、ちょっといやかなりやっかいで、この工程が作業の中で一番のポイントとなります。私もうまくいくまでほんと何度も失敗しました。
試行錯誤した結果、重要だったのは以下の2点でした。
 
・Blenderの最新安定版(12月18日現在2.48a)をインストールすること
・Python2.5.2(←最新版ではないので注意)をインストールすること
 
↑の環境以外では以下に記述するとおり作業を進めても、daeファイルをエクスポートできません。逆に言えばこの2点を押さえておけばできたも同然です。

注意:BlenderもPapervision3Dもしょっちゅうバージョンアップされるので1~2ヶ月も経てば最適な環境は変わってくると思います。気が付いた時点で追記していくつもりですが、新しいバージョンが出てる場合はそちらを試してください。

それでは以下から順を追って説明していきます。
 
Read more »