junaioで簡単!画像マーカーARを試そう!

  • このエントリーをはてなブックマークに追加
  • 80

junaioというスマートフォン用ARアプリがある。
これは、metaio社が出しているiPhone/Android用のアプリで、
基本的には位置情報ベースの、セカイカメラやlayerと同じような、
ARブラウザという種類のアプリだ。

残念ながら日本ではあまり知られていないようだが、
俺としてはこのjunaioこそが次世代を担うARブラウザになると思っている。
(日本人としてはセカイカメラを応援したいが、junaioと比べると見劣りする)

実は、このjunaioは非常にオープンなアプリで、開発者登録をすると、
自分の「Channel」というものを持つことが出来るようになる。
このChannel機能を使うと、junaioがユーザの位置情報をもとに
検索をかけてくるので、自作したアプリを使って、好きな情報をユーザに返す事ができるのだ。
つまり、自分の思い通りに位置情報ARを実現できる仕組みが整っているのだ。
しかも、PHPで作られたほぼ完璧なソースがあるので、
サーバを持っていれば誰にでも簡単にChannelの公開が出来る。
素晴らしい仕組みだ。

そして、さらに素晴らしいのが「junaio Glue」という機能だ。
これは簡単に言うと「画像マーカーを使ったAR」だ。
一見すると普通の画像とまったく見分けがつかないマーカーベースAR。
マーカーレスARと言っても良い(実際、殆ど変わらないだろう)。
この機能をも、簡単に作る事が出来るのだ。

このように、AR系の記事としてたまに出てくるのだが、
実はかなり簡単にこれらの記事にあるようなことが出来る。
もう誰にでも出来る勢いだ。
development memo for ourselves junaioのマーカーレストラッキング技術を使用した「サプリメント雑誌連動AR」 The world’s first mobile Augmented Reality Special Magazine Edition #AR #AugmentedRearity #metaio #AR
切手をARマーカーに(AR stamp) : monogocoro ものごころ

ということで、実際にjunaio Glueでコンテンツを公開するまでの
手順を紹介していこう。凄く簡単なので、是非試してみて欲しい。

なお、junaio Glueでコンテンツを公開するには、基本的には以下の条件が必要だ。
が、頑張ってサンプルソースを書き換えれば、ある程度は融通が利くと思う。

  • .htaccessが使える
  • php5が使える
  • Zend Frameworkが使える
  • HTTP_AUTHORIZATIONヘッダの値が取れる

なお、今回はさくらインターネットの共有サーバプラン+独自ドメインで動作確認している。
結構無理矢理なソース変更をしていたりするので、参考程度にする事。

あと、サンプルとして「AR三兄弟の企画書」と言う本の表紙を
イメージマーカーとして使ってみた。この本はARやる人は必読の本なので、
ぜひ読みましょう。
それに、他のAR本は基本的に表紙が単調で、マーカーにならない。

AR三兄弟の企画書

著者/訳者:川田十夢

出版社:日経BP社( 2010-08-26 )

定価:

単行本 ( 220 ページ )

ISBN-10 : 4822248240

ISBN-13 : 9784822248246



開発者登録をする

まず、junaioのDeveloperサイトに行き、開発者登録をする。
ページ右のSign Up!と書いてあるところをクリックし、必要情報を記載して登録しよう。
開発者登録すると、APIキーを貰える。
APIキーは、開発者ページのトップにある恐竜の絵の上にある
Documentation」から行けるページに書いてある。
(書いてあるのはログイン状態の時で、非ログイン時はPlease sign up to get an API keyと書いてある)

スターターキットを手に入れる

まず、開発者用のチュートリアルページを見る。開発者ページのトップにある恐竜の絵の上に、
Tutorials and Examplesと書かれたリンクがあるので、ここから入ろう。
何故こんな重要なページへのリンクがわかりにくいのか、それが気になる。

今回はjunaio Glueのコンテンツを作るので、junaio Glueのサンプルを手に入れる。
Tutorial 4 – Hello, junaio GLUEまでジャンプし、
「this junaio Glue Start Package 」の所に張られているリンクから、junaio Glue用のサンプルを手に入れよう。
(このリンクはzip直リンクなので、ここには掲載しない)
手に入れたら展開しておく。

なお、junaioには結構色々なサンプルがあり、右側メニューの「Getting started」から手に入れられる。
必要に応じてゲットすると参考になるし、とても便利だ。

画像をマーカー化する

次は、画像ファイルからマーカーを作る。
つまり、junaioが解釈できるパターンファイルを作成すると言う事だ。
右メニューのjunaio GLUEから、junaio Glueの解説ページに行く。
すると、ページの最下部にファイルをアップロードするためのフォームがあるので、
マーカーとして使いたい画像ファイルを選択し、「Create Tracking XML」というボタンぽい物を押そう。
すると、なんかよく分からないファイルをDL出来る。
この何かよく分からないファイルは、エンコードされたXMLファイルと思われるが、
中身の詳細を気にする必要は無い。

なお、このフォームは、開発者としてログインしていないと出てこない。
ログインしていない時は「Please log in to use the tracking xml creator」だ。

3Dモデルを準備する

junaio Glueでは、マーカー画像の上に3Dモデルを出せる。
右メニューの「3D Content」から、解説ページに行ける。
3Dモデルとしては、md2形式とobj形式が使用できる。
モデルは、事前に暗号化しておく必要がある。勿論、暗号化機能もこのページにある。
ページ最下部にあるフォームから、モデルを暗号化しておこう。サイズは350kbまでのようだ。

サンプルを自分用に書き換える

さて、これでプログラムとマーカーと3Dモデルの準備が出来た。
こいつらをReadme.pdf通りにサーバにおけば準備万端なのだが、
その前にプログラムを書き換え、自分用にしておく必要がある。
変更すべきは以下の4箇所だ。

  1. config/config.phpにAPIキーを書き込む
  2. src/search.phpの3Dモデルの位置を書き換える
  3. src/search.phpのマーカーデータを書き換える
  4. 画像URLの書き換えとdescriptionの追記

では、書き換えていく。

config/config.phpにAPIキーを書き込む

サンプルの「config/config.php」に、APIキーを入れる所があるので、そこにAPIキーを入れる。
一番下の行の、YOUR_API_KEY_HEREと書いてある部分だ。ここに書き込もう。

  1. define('JUNAIO_KEY', 'YOUR_API_KEY_HERE'); // Junaio developer key

src/search.phpの3Dモデルの位置を書き換える

暗号化した3Dモデルファイルをサーバに配置た時のURLを、
src/search.phpの28行目にある、以下の部分に書いてやる。

  1. <mainresource><![CDATA[http://www.junaio.com/publisherDownload/tutorial/metaioman.md2_enc]]></mainresource>

モデルのURLが「http://www.junaio.com/model.md2_enc」であればこうなる。

  1. <mainresource><![CDATA[http://www.junaio.com/model.md2_enc]]></mainresource>

次に、テクスチャ類も記入する。39行目の以下の部分を、
必要に応じて書き換える。

  1. <resources><resource>http://www.junaio.com/publisherDownload/tutorial/metaioman.png</resource></resources>

例えば、テクスチャが2枚で、URLが「http://www.junaio.com/texture1.png」
と「http://www.junaio.com/texture2.png」だった場合は、このようになる。

  1. <resources>
  2.     <resource>http://www.junaio.com/texture1.png</resource>
  3.     <resource>http://www.junaio.com/texture2.png</resource>
  4. </resources>

src/search.phpのマーカーデータを書き換える

最後に、マーカーデータのURLを書き換える。
画像から作成したマーカーファイルをサーバに配置した時URLを
src/search.phpの19行目に書く。

  1. <results trackingurl=\"マーカーファイルのURL">

例えば、マーカーファイルのURLが「http://www.junaio.com/marker.xml_enc」であれば、

  1. <results trackingurl=\"http://www.junaio.com/marker.xml_enc\">

となる。

src/search.phpの画像URLの書き換えとdescriptionの追記

junaioでは、自分のChannelに、サムネイルやアイコンをつけることが出来る。
それらのパスはsrc/search.phpにある。それぞれ29行目、30行目を書き換えればよい。
サムネイルは、3Dモデルをタップした時に現れる情報ページに出てくるようだ。
アイコンは多分位置情報ベースで使うと思う。Glueでは使わない。

  1. <thumbnail>サムネイルのURL</thumbnail>
  2. <icon>アイコン画像のURL</icon>

また、descriptionと言うタグを、どこかに追記してやる。
こいつは、モデルをクリックした時に出てくる説明文になる。

  1. <description>sample of junaio Glue</description>

以上で、PHPの書き換えは完了した。では、サーバに配置していく。
で、次のサーバへの配置でまたPHPの書き換えがあるというフェイント!

サーバへの配置

では、作ったソースをサーバに配置する。
それに伴って必要な.htaccessの設定なども、ここに併せて記載する。
ここからは俺が試した、以下の環境での話になる。

  • サーバ:さくらインターネットのスタンダードプラン
  • ドメイン:独自ドメイン
  • PHPバージョン:5

まず、ドメインとして、jsample.tarotaro.orgと言うのを作ってみる。
で、参照先を~/www/junaioにしておく。

さて、準備が出来たらサーバにファイルを置いていく準備だ。
まず必要なライブラリ「Zend Framework」を手に入れるところから始める。
公式サイトから最新のZend Framework Minimal Packageをダウンロードし、
適当なディレクトリに置いておく。

次に、サンプルのhtmlフォルダ以下にある_.htaccessを確認すると、
以下の記載がある(これは、最終的に.htacecssとして使うファイルだ)。

  1. RewriteEngine On
  2.  
  3. RewriteCond %{REQUEST_FILENAME} !-f
  4. RewriteCond %{REQUEST_FILENAME} !-d
  5. RewriteCond %{REQUEST_FILENAME} !-l
  6.  
  7. RewriteRule .* index.php

つまり、ファイルでもディレクトリでもリンクでもない物に対して
アクセスがあったら、全部html/index.phpに流すと言う意味だ。
と言う事で、~/www/junaio以下に置くのは、html以下のものが正しいとわかる。
他は、wwwの外に置いておく方が多分安全なので、そうする。
位置的には~/junaio_srcとしておこう。この下に、config、library、srcの各ディレクトリを置く。
で、library以下に、Zendという名前でZend Frameworkのディレクトリへと
シンボリックリンクを張っておく。サーバ上で以下のコマンドを実行。
なお、この例では、~/lib/ZendFramework以下に、Zend Frameworkを格納した場合。

  1. $ln -s ~/lib/ZendFramework/ Zend

さて、今更だが、Zend Frameworkは実はテスト用のclient.phpと言うのを動かすためのものなので、
Zend Frameworkをダウンロードしたり、シンボリックリンクを張るくだりは
すっ飛ばしても構わない(多分)。

~/www/junaio以下には、マーカーファイルと3Dモデル&テクスチャ、index.phpを置く。
と言う事で、図にすると以下のようになる。

で、これに併せてindex.phpの中身を書き換える。
まず、8行目と9行目を、以下のようにする。

  1. require_once '../../junaio_src/config/config.php';
  2. require_once '../../junaio_src/library/junaio.class.php';

42行目も以下のように変更。

  1. include '../../junaio_src/src/search.php';

これでよし。サーバに配置して、まずは当該URL
「http://jsample.tarotaro.org/」にアクセスして、401ヘッダが返される事を確認する。

Channel登録

こちら側の準備は出来たので、junaioにChannelを登録する。
登録しても最初はprivateに出来るので、気軽に登録しよう。
サーバへの配置より先に登録だけしておいても良い。
右メニューの「New Channel」をクリックして、Channel登録画面に進む。

登録画面では適宜必要な情報を入力する。
以下に注意して、後は好きなように情報を入れればよい。

  • Callback URLに先ほどの「http://jsample.tarotaro.org/」を指定する
  • Channel Visibilityにprivateを指定する

で、右側にあるCreateを押すと、Channelが出来上がる。
以降は、My ChannelsにてChannelの管理が出来る。


これは、俺が作ってみた「tarotarorg glue sample」ってページの例。
サムネイルはjunaioがサンプルとして出してくれていたmd2の恐竜を使っている。
勿論、モデルもこれを使ってる。確認用だから何でも良いのだ。

この画面で、Validateを押してみよう。
すると、Channelが正常に起動するかどうかの確認が行われる。
成功であれば緑色で「ok」、失敗すれば赤で「error」が、
それぞれの確認項目にて出てくる。
テストは以下の8項目ある。今回はGlueしか作ってないので、
4.と8.あたりで黄色の「warning」が出る。気にする必要はない。

  • Test 1 – Check Callback URL
  • Test 2 – Check pois/search
  • Test 3 – Check pois/search return value – junaio GLUE.
  • Test 4 – Check pois/event.
  • Test 5 – Check pois/event return value.
  • Test 6 – Check pois/visualsearch.
  • Test 7 – Check pois/visualsearch return value.
  • Test 8 – Check channels/subscribe.

なお、さくらだと2.あたりでエラーになる。理由は後で書く。

junaioで試してみる

さて、早速junaioで先ほどのChannelを試す。
junaioを開始し、右上の「チャンネル」から、
「自分のチャンネルを構成する」を選択する。
すると、作ったChannelがあるので選択。
選択するとカメラ画面に戻るので、マーカーにした画像を映してみる。
と言うことで、試してみた画面が一番上にある画像。
表紙画像をAmazonから拝借してマーカーを作ってみた。
御覧のように、恐竜が見事に本の上に出ている。
勿論md2なので、ちゃんとアニメーションもする。凄いぜ!

で、クリックするとサムネイルと、descriptionに追記した説明文が出る。

追加情報

なお、この恐竜モデルは意外と大きいので、
src/search.phpの33行目、sタグ部分を書き換えて小さくしている。
こんな感じ(最初は1になってる)

  1. <s>0.2</s>

また、さくらインターネットだとPHPがCGIモードで起動するため、
必要なヘッダである「HTTP_AUTHORIZATION」が取れない。
と言うことで、ひとまず以下にあった設定を参考にして
.htaccessを書き換え、ヘッダを取ってみた。

phpのcgiモードでHTTPのリクエストヘッダを取得 – アルファブレンド プログラミングチップス

ただ、セキュリティ的に難があるという情報もあるので、
今回だけの一時的な処置としようかな。
今後は他の手段を探さなきゃなーと思うが、冷静に考えると俺にはChannelで
公開すべきものがないので、別にいいか。

あと、ビデオ表示も出来たりする。
これがGAEとかで使えればもう大勝利なんだがなー。

スポンサーリンク
スポンサーリンク
  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサーリンク