読者です 読者をやめる 読者になる 読者になる

くおりあは何度でもころぶ。

フリーランスwebライター「くおりあ」が何事かを吐き捨てる。

ARコンテンツ製作サービス「cybARnet」を使ってみたおはなし( ˘ω˘)

AR cybARnet Junaio 技術ネタっぽいもの

f:id:qualia0327:20160928042632p:plain

ARってどうやって作るねん!!ってときに使わせてもらったサービス

 

けもんごー、流行ってますよね!私もポチポチやってはいるんですけどね。まぁ育ちませんけどね( ˘ω˘)いいんですイーブイちゃんかわいいですから。

f:id:qualia0327:20160928034049j:plainかわいすぎやん??やんやん??

 

そんなことはさておき、私が「AR」という文字列を本格的に意識して読むようになったのは2015年です。まだポケモンGoがプレイできるようになる前ですね。

 

f:id:qualia0327:20160928034937j:plain(ミクさんが実際に踊ってる画像、どうやら消しちゃったぽい…!不覚…!)

そのきっかけといえば、ロート製薬の「ロート デジアイ」のARパッケージです。パッケージを専用アプリでスキャンすると、目薬の箱から雪ミクさんが出てきて踊るっていうアレ。そんでその時、もう一つの記事が頭をよぎりました。

 

news.livedoor.com

こっちはお仕事で関わった話題。姫路城です。改修工事を終え、綺麗になっただけではなくARチェックポイントを設けたというもの。すでに該当記事の詳細は削除されていますが、スマホiPadでチェックポイントをスキャンすることで映像や情報が表示されるというものでした。(確か。笑)

 

えっこれおもろいやんって。イベント会場とかでやったら盛り上がるやんって思ったわけですね。こっから本題ね。

 

私は当時、地元のお祭りの企画メンバーとして関わっていました。まぁ地域の小さなおまつりなので、大した出し物はありません(失礼)冬ですし( ˘ω˘)。そんな中で、ARってもしかしたら、現実のイベントに何かをプラスすることができるんじゃないか?って思ったわけです。

 

や、やったろうじゃん…!

 

そんなわけで、企画会議で「ARちょーたのしいっすよ、ぜひやりましょうよ」と提案。当時の私が考えていたのは、姫路城のモデルでした。できればかわいいキャラクターがおまつりや地域のことを解説してくれるようなムービーをかぶせられたら楽しいなと思っていたのですが、キャラクターの権利関係な、それな。あと映像製作な、それな。( ˘ω˘)ってなもんで、紆余曲折の末「ARフォトスポットにしよう」となりました。

 

android.app-liv.jp

www.nippon-animation.co.jp

このへんがモデルケースですね。しかし問題がありました。まずは、圧倒的な私の知識不足。「できたらいいなー」程度のモンで、ARってなんじゃらほいレベルです。また、人手もありません。(つか協力者がいないので私一人です。笑)こんな状態でできるのか…?と思っていたところへ、どうやら「Junaio」というアプリがあるらしい…!これなら簡単に作れr…サービス終了…だと…?

 

完全に詰んだわたしに舞い降りた神サービス、それが「cybARnet」!!

f:id:qualia0327:20160928042632p:plain

Junaioに代わるARアプリ cybARnet

 

という絶望的な状況の中たどり着いたこのcybARnet(サイバネット)は、ARに必要となるマーカー(トリガーになる画像みたいなものと理解)と、マーカーを検知したときに再生される画像や動画を設置するわけですが、ブラウザ上からそれらの設置ができ、しかも試用が可能ということでしたので、さっそく使わせていただいたわけです!

 

製作編

 

まず、私にとって新鮮だったのが、ARとはどういう仕組みで表示されるのか?ということです。

f:id:qualia0327:20160928061047p:plain

 たぶんこういうこと。わかりやすい!!!だろ!!!! ちなみに、「チャンネル」というところと「スマホアプリを介して」というところがミソ。私はラジオ放送をイメージしました。ラジオの配信局(チャンネル)を登録し、受信機(スマホアプリ)を設置しないと見れない、というわけですな( ˘ω˘)

 

さて、じゃあチャンネルはどう作るか?

f:id:qualia0327:20160928061558p:plain

「Create New Channel」から、チャンネルを製作します。

f:id:qualia0327:20160928062409p:plain

これが実際の製作画面です。これを…

 

f:id:qualia0327:20160928063108p:plain

 こうじゃ!!(ババーン!)

 

さて、なんとなくもうお分かりだと思いますが、左下の「+」ボタンを押下すると、マーカー画像(トリガ)を設定できます。今は画面いっぱいになってますが、サイズは調整できます。そしてイーブイちゃんが乗っかっている画像は、左下の画像を現実世界でカメラが認識したときに浮かび出てくるというわけですな。

 

画像の設置位置は右側に数値で現れます。X:Y:Zの数値により、(分かり易く言うと)スマホのカメラ画面のどのあたりに表示されるか、を調整できます。ちなみにZは奥行きなので、こいつを正しく設定しないと、AR画像がマーカーの裏側に行ってしまったりしますw 画像の調整が終わったら、右下の「Create」ボタンを押下すると、チャンネル自体の設定画面に移行します。

 

f:id:qualia0327:20160928130853p:plain

 

Icon」と「Name」は、チャンネル特定のために使います(後述) 。肝心なのが「public」のチェックボックス。これがオンになっていないと、チャンネルを公開することができず、開発者以外に見ることができません。さて、「public」にチェックを入れてチャンネルを公開したら、いよいよスマホで撮影をします!!

 

撮影編

 

f:id:qualia0327:20160928134053j:plain

 

まずはGoogle PlayとかストアとかからcybARnetの撮影アプリをダウンロードします。(通常のカメラアプリでは撮影できません←ここ注意)

play.google.com

cybARnet (CYBER AR)

cybARnet (CYBER AR)

  • Cybernet Systems Co., Ltd.
  • ライフスタイル
  • 無料

 ↓

f:id:qualia0327:20160928134821j:plainアプリを起動するとこんな画面に。

 

さて、この状態ではなにも写りません。

 

f:id:qualia0327:20160928134930j:plain

虫眼鏡マークから、自分の登録したチャンネルを検索します。これがラジオで言うところの、「チャンネルを合わせる」みたいなかんじ。さっき登録した「Name」はここで使います。「Icon」は、虫眼鏡の横のチャンネルアイコンというわけですな。

 

いよいよ撮影!となるわけですが…まぁ、このテスト用の画像を載っけてもおもしろくないと思うので、私が実際にイベント用に試作したものを。

f:id:qualia0327:20160928140544j:plainいや、なんつーかすいません。。。

 

全然わからないですよねw すいません。。キャラクターの権利関係とかの処理が完全にややこしい領域なのでマスキングしたアレです( ˘ω˘)…ゴメンネ。

 

画面上部の文字と、塗りつぶしている黒い部分がキャラクター、その背後にあるポスターをマーカーとしました。まぁ、このへんは試してみてね。

 

…と、こんなかんじで。まったく初心者の私でも数時間でAR記念写真が(ある程度)撮れるまで製作することができました!すごいよ!!上の例みたいに、日付とかフレームとかを作って記念写真スポットにするのはわりと簡単。マーカーとチャンネルさえ生きていれば、場所を選ばずに撮影できるのも魅力。たとえば晴れてたら外、雨が降ったら中に移転するとか。動画を埋め込めばさらに動きがあっておもしろいコンテンツにできそうです。

 

実際に製作してみて課題だったこと

一方で、製作していて、うーん、これはむずいぞ…となったポイントも。

・読み取りに時間がかかる

カメラ性能にもよりますが、しっかりとマーカーを読み取ることができなかった場合がありました。また、距離や角度もそこそこしっかりとしていないといけません。製作側としては「必ず写るはず」という前提があるので根気よくカメラをかざすのですが、一般参加者がそこまでしてくれるかどうか…と考えると、マーカーに選定する画像を工夫したり、撮影用にカメラ性能の良いスマホを用意するなどしたほうがよいかも…?でもそうなると、撮影した画像の受け渡しの問題とかね…( ˘ω˘)むずい。

・マーカー画像の選定

複雑過ぎる画像は認識できませんでした。一方で、◯とか□とかの単純過ぎる画像でも認識しませんでした。また、屋外使用する場合にマーカーへの太陽光反射で認識しないなどの問題もありました。一日中日陰となるポイントを選定して設置するなどの工夫が必要となるでしょう。あとは、マーカー画像を印刷した紙がたわんだり汚れたりすると当然ながら読み取りません。。屋外型のイベントではちょっとばかし工夫がいりますね。

・距離感の把握

実際、AR表示させる画像の大きさの調整にはかなり時間がかかりました(というか、製作時間の半分くらいがこれ)。マーカーまでの距離に対して、画像をどれくらいの大きさで設定しておけば、不自然でない形に写るか。もうこれは数字をメモりながらテスト&テスト&テストしかないです。私の場合には子ども向けのイベントでしたので、身長を仮に140cmとして…撮影距離がマーカーから×メートル…撮影場所をスプレーとかで固定して、「ここから撮ってね」という案内を表示したりするか…?みたいな検討が必要です。

・画像、動画以外も表示できるとより楽しいかも?

たとえば日付、位置情報、温度とかを取得して表示できたりするとより多機能にできそうですね。位置情報を合わせられると、たとえばGISとの組み合わせだったりとか。交通情報とか防災情報なんかの活用もできそうだなーとか。まぁそのへんは自治体さんあたりが組むトコでしょうけどね( ˘ω˘)

 

さてさて、だいぶ長くなってしまいましたが、こんな感じでcybARnetの試用を行いました!( ˘ω˘)もっと製作時間をかければ、「記念写真」とかにとどまらず、「スタンプラリー」とか、それこそ「位置情報ゲーム」とか、あと考えたのが「宝探し」みたいなのとか。いろいろ楽しみ方も出てきそう…!イベントスタッフで企画などをやっている方はぜひご一考を。ワイみたく協力者のいないぼっちでも1ブース作れるよ!w

 

cybARnetさんのサイトはこちらから!

portal.ar.cybernet.ne.jp

cybARnetさんのブログも先進事例とか載っていて大変オススメ

AR-VRソリューション - サイバネットブログ|サイバネットシステム株式会社 ITソリューション事業本部

 

なお、一応言っときますけどスクリーンショットやロゴ画像などの転載等はアカンで。( ˘ω˘)そんなんする人いないと信じてるけども。