ARバナー(ブログパーツ)
拡張現実感ARを使った バナー(ブログパーツ)を作成することもできます。
ブログの新たな付加価値として、また キャンペーン企画としてもご利用いただけます。
- ブログ利用者は JavaScript のコードを書くだけです。
- Flash コンテンツ自体は、主催者側にあるので、後から 対応するマーカーや表示するオブジェクトを追加することが可能です。
- サンプルのバナーの様に、代替機能を実装することにより、Web カメラがない人にも楽しんでいただくよう作成することができます。
(例、Webカメラがない場合は、2Dのアバターを画面表示し、Webカメラがある場合は、マーカー上に、3Dのアバターを表示するなど。) - 再生回数や、クリック回数を取得することも可能ですので、カメラの普及率やユーザの好みなどデータマイニングを行うこともできます。
本ページのサンプルバナーは、ご自由にご利用いただいてかまいません。
本サンプルバナーを(JavaScriptが利用可能な)ブログに設置することにより、
Webカメラがあるサイト訪問者にはARを実際に体験してもらうことができます。
また、Webカメラがないサイト訪問者にも雰囲気を楽しんでいただくことができます。
ARバナーを表示する前に
- 実際のARを利用する場合は、表示の際にWebカメラが必要になりますので別途ご用意ください。エミュレーションモードでご利用の場合はWebカメラは不要です。
- Flash技術を利用していますので、Flashプラグインがインストールされた環境でお楽しみ下さい。
最新のAdobe Flash Playerをダウンロード
ARバナーの使い方
| 1、PCにWebカメラを接続します。 |
| マーカーはこちら | 2、マーカーを印刷します。 |
| 3、印刷したマーカーを、Webカメラで撮像します。 ※バナー上に 「カメラとマイクへのアクセス」のダイアログが表示された場合は、「許可」 ボタンを押してください。 |
| 4、マーカーの上に3D画像が表示されます。 |
バナーの設置方法
バナーを設置する場合は、ブログの自由設定エリア等に、以下のコードを貼り付けてください。
※一部のサイトでは、外部Flashが許可されないため、画像が表示されないことがあります。
応用例
OpenSocial の APIを使用することで、OpenSocial 対応のサイトにも設置することができます。
以下は Mixi の OpenSocial 機能を利用して、画面上にバナーを設置したものです。