PuzzleLogo

技術情報

Puzzleを
Download
トップへ
戻る

icon概要

Puzzle(ARブラウザ)の特徴

PuzzleはACFLというHTMLに似た言語によって定義されたARコンテンツを描画、再生するためのアプリケーションプログラムです。
WebシステムにおけるWebブラウザの役割を果たします。
Puzzleは既存のARアプリケーションとは違い、ARコンテンツを内蔵しておらず、ARコンテンツはQRコードから誘導されるURLを通じて外部のWebサーバから取得する形態をとっています。
このため、ARコンテンツを制作する技術者はARコンテンツの表現方法をACFL言語で定義してWebサーバに格納するだけで、ARコンテンツをユーザに提供することができます。
ACFL言語の記述において画像認識や画像処理、2D、3DなどといったAR関連知識は必要なく、コンテンツ表示に必要な部分だけを学習するだけでARコンテンツを作成することができます。
また、Puzzleは既存のWebインフラを利用しサービスを行うので、Web関連の技術であれば様々な応用が可能であることも特徴の1つです。

ACFLとは

ACFLは"Ar Content Format Language"の頭文字を取ったもので、Puzzleで再生するARコンテンツを定義する言語です。
基礎フォーマットにはXMLが使用されており、WebシステムにおけるHTMLの役割を果たします。
ACFLには、どのマーカーの、どの位置に、どんな表示をするのか、といった情報を記述しますこの言語を習得することでARコンテンツを比較的簡単に表現することができるようになります。

Puzzleを利用したARコンテンツ表示までの流れ

Puzzleの主な利用方法とその動作を以下に記載します。

  1. 初期URLの取得

    Puzzleを起動し、ACFLの取得先URLを指定します。
    取得先URLは「QRコード読込」、もしくは「アドレスバーへの直接入力」によって指定することが出来ます。
    初期URLの取得

  2. HTTP Requestの作成

    取得先URLに対しHTTP Requestを作成・送信し、Webサーバへ問い合わせを行います。
    HTTP Requestの作成

  3. HTTP Responseの取得

    Puzzleから送信されたHTTP Requestを受信したWebサーバは、これに対するHTTP Response(ACFL)をPuzzleに送信します。
    これを受信したPuzzleはACFLの内容を解析し、解析した結果を元にARコンテンツを表示します。また、必要であれば新たなHTTP Requestの作成を行います。
    ACFLにはマーカーの種類や画像、コンテンツの表示位置やイベント内容等が定義されています。
    HTTP Responseの取得

  4. カメラからマーカーを認識

    解析されたACFLの内容に従い、カメラに写し出された画像からマーカーを探します。
    マーカーはACFL内部で画像ファイルとして定義されます。
    カメラからマーカーを認識

  5. 描画処理

    マーカーの認識後、マーカーを起点とした描画処理を行います。
    具体的な描画内容はACFLで定義されてものに従います。
    結果はディスプレイに表示されユーザーはARコンテンツを利用できるようになります。
    描画処理

ACFLと関連深い技術

ACFLをベースにARコンテンツを作成する場合、下記の技術との組み合わせにより、多様性に富んだコンテンツが作成できると考えられます。

関連技術用法
PHP、eRuby、JSP等のタグ埋め込み言語ACFLを動的に生成し、ダイナミックなコンテンツの作成が可能になる。
MySQL、SQLite等のデータベース上記のタグ埋め込み言語と連携させることで、大量のデータとの連携が可能になる。

iconチュートリアル

Puzzleを利用した基本的なARコンテンツの作成方法

準備するもの

Puzzleを利用してARコンテンツを作成するためには下記のものが必要です

  • ネットワークに接続されたWebサーバ
  • Webサーバコンテンツを公開するための場所として必須になります。

    Hello World

    各プログラム言語に共通した例題である"Hello World"の表示を題材に、ARで"Hello World"を表示する手順を紹介します。
    まずはマーカーを用意します。今回の例題では下記の画像をマーカーとして用意しました。
    ディスプレイに表示した状態でもPuzzleからの読み込みは可能ですが、ディスプレイは照り返しが発生するため、マーカーを紙に印刷して利用すると認識しやすくなります。

    マーカーの画像

    次に下記のソースファイルを作成してください。文字コードはUTF-8で作成してください。ファイル名は"helloworld.xml"でよいでしょう。

    <?xml version='1.0' encoding='UTF-8'?>
    <acfl>
      <head>
        <version value="0.1-beta" />
        <title>Hello World</title>
      </head>
      <body>
        <arobject>
          <marker type="marker">
            <image src="http://arb.lateral-t.co.jp/arcontent/image/markers/arm004.png" />
          </marker>
          <content type="2d">
            <window
              unit="mm" width="20" height="10" 
              backgroundcolor="00000000"
              targetpoint="center" fitpoint="center"
              rotatingclip="marker">
              <frame
                backgroundcolor="000000FF"
                unit="mm" width="20" height="10"
                type="text" value="Hello World" textcolor="FFFFFFFF" />
            </window>
          </content>
        </arobject>
      </body>
    </acfl>

    完成したらWebサーバへアップロードしましょう。そして、該当URLをQRコードとして作成しましょう。
    サンプルと同じ内容のURLを収めたQRコードを下記に用意しました。

    QRコード

    これをPuzzleで読み込むと下記のように"Hello World"と表示されます。
    sumple image

    先に示したサンプルのACFLのコードについて、以下に解説します。

    <?xml version='1.0' encoding='UTF-8'?>

    xml宣言です。encoding属性は必ず指定します。

    <acfl>
    	~中略~
    </acfl>
    

    このACFLを格納するタグです。このタグは必ず1つだけ記入します。

      <head>
        <version value="0.1-beta" />
        <title>Hello World</title>
      </head>

    <title>で囲んだ部分にACFL全体のタイトルを指定します。
    <version>タグは必ず記入しなくてはいけません。<version>タグのvalue属性にはACFLのバージョン番号が記載されます。
    <title>で囲んだ部分はACFL全体のタイトルを指します。

      <body>
        <arobject>
    		~中略~
        </arobject>
      </body>

    マーカーやコンテンツを格納する本文に相当します。
    <arobject>タグは<body>内部に複数書くことができます。

          <marker type="marker">
            <image src="http://arb.lateral-t.co.jp/arcontent/image/markers/arm004.png" />
          </marker>

    マーカーを指定する部分です。<marker>タグにマーカーの情報を格納します。
    type属性はマーカーのタイプを設定します。ここでは黒い枠で囲われた「マーカー型」を指定します。
    <image>ではマーカーのソースを示しています。src属性にソースの位置を示すURLを記載します。

          <content type="2d">
            <window
              unit="mm" width="20" height="10" 
              backgroundcolor="00000000"
              targetpoint="center" fitpoint="center"
              rotatingclip="marker">
    		  	~中略~
            </window>
          </content>

    <content>タグには実際に表示されるコンテンツを格納します。
    type属性は現在2D表示にしか対応していませんが、将来的に3Dにも拡張されます。
    <window>は表示領域と表示方法を定めます。
    ここでは横幅20mm、縦幅10mmで、マーカーの中央に表示領域の中央を重ねる状態で表示されます。

              <frame
                backgroundcolor="000000FF"
                unit="mm" width="20" height="10"
                type="text" value="Hello World" textcolor="FFFFFFFF" />

    <frame>タグは<window>で設定した表示領域にテキストや画像といったパーツを配置します。
    ここでは背景を黒、テキストの色を白で表示されます

    iconドキュメント

    Puzzleで使われている技術の概要やACFLの詳細な仕様については下記のドキュメントを参照してください。

    Puzzle技術概要

    ACFLタグ解説