arbor.js | インタラクティブにグラフィカルなグラフ操作が行えるjQueryを使ったライブラリ

arbor.jsというjQueryを使ったライブラリがあります。

arbor.js　Arbor is a graph visualization library
http://arborjs.org/

 

 

データの構造、関連性を理解するのに、こういった表現があれば、分かりやすいと思います。要素を移動させることにより、関連のある要素も一緒に引っ張られて動くので、関連性が強調されて意識されます。

デモの中でも、halfvizというデモが面白いです。

arbor.js » halfviz

http://arborjs.org/halfviz/

右のコードエリアに、NodesやEdgesの情報を、指定の記法で記述をすれば、すぐにインタラクティブに画面に反映されます。記法については、コードエリアの上にある「syntax reference」を見れば分かります。

構造が複雑な内容を表現する時に使えそうなライブラリです。

モバイル向けAR(拡張現実)を簡単に作れる 「CARKCHO」(カクチョ)のサービスを使ってみました。

モバイル向けAR(拡張現実)を簡単に作れる「CARKCHO」(カクチョ)というサービスがあります。

CARKCHO
https://app.carkcho.com/

このサービスのフリープランを使って、福井県立恐竜博物館に旅行に行った時、撮影したティラノサウルスの動画をAR(拡張現実)コンテンツにしてみました。

ARの動作を確認している動画

動作確認方法

まず、「CARKCHOで出来ること」のページを参考に、CARKCHOブラウザ（CARKCHOで作成したARコンテンツを見るためのスマートフォンアプリ　無料）を入手します。

CARKCHOで出来ること
https://app.carkcho.com/howto

そのCARKCHOブラウザで、下記のPDFのQRコードを読み込み、次に 、ティラノサウルスの画像を読み込みます。

ARコンテンツを見るためのQRコードとマーカー画像
http://www.vivo-win.com/blogger/CARKCHO_20130428.pdf

CARKCHOでのARコンテンツの作り方

CARKCHOにユーザー登録をして、管理画面にログインします。

 管理画面に表示されている「NEW CHANNEL」のボタンを押し、表示されるナビゲーションに従えば、簡単にAR(拡張現実)コンテンツを作成することができます。

 各CHANNELの詳細画面


AR(拡張現実)とは　ウィキペディアより

拡張現実（かくちょうげんじつ）とは、人が知覚する現実環境をコンピュータにより拡張する技術、およびコンピュータにより拡張された現実環境そのものを指す言葉。

英語の Augmented Realityの日本語訳であるため、それを日本語発音した「オーグメンテッド・リアリティ」や、省略形のARも用いられる。また、拡張現実感（かくちょうげんじつかん）とも言う。

CARKCHOのサービス価格

価格プランは、商用・非商用を含めて3種類のプランが用意されます。

＜パーソナル フリー＞
月額利用料：￥0　＊商業用利用不可
・5チャンネルまで同時配信可能／1チャンネルあたり1コンテンツ
・視聴回数制限：1チャンネルあたり200回まで

＜ビジネスビギナー＞
月額利用料：￥120,000(税別)
・10チャンネルまで同時配信可能／1チャンネルあたり5コンテンツ
・視聴回数制限：無制限(2013年3月31日まで)
・効果測定：基本分析(アクセス集計)
・企業サイト、アプリと連動可能(CARKCHO API連携時)

＜ビジネススタンダード＞
月額利用料：￥240,000(税別)
・15チャンネルまで同時配信可能／1チャンネルあたり5コンテンツ
・視聴回数制限：無制限(2013年3月31日まで)
・効果測定：基本分析(アクセス集計)＋視聴位置情報分析(ヒートマップ)＋ユーザ属性分析
・企業サイト、アプリと連動可能(CARKCHO API連携時)

CARKCHOは、手軽に、AR(拡張現実)コンテンツを作成、公開できるサービスだと思います。

「junaio（ジュナイオ）」を使ったAR(拡張現実)コンテンツを作ってみました。

junaio（ジュナイオ）とは、ドイツのmetaio社が出しているiPhone/Android用の無料配信されているアプリアプリケーションです。GPSなどを利用するロケーション型のARコンテンツ（LBS)と、画像認識によるマーカー型のARコンテンツ（GLUE）を作成、配信できます。

Augmented Reality - junaio… your mobile companion

http://www.junaio.com/

junaio（ジュナイオ）については、下記のページの説明が分かりやすいと思います。

ジュナイオガイド junaio AR（拡張現実）

http://ovic.kgt-contents-share.com/junaio_guide/

junaio（ジュナイオ）でマーカー型のARコンテンツ（GLUE）を作ってみました。

junaio（ジュナイオ）でのコンテンツの作成方法

事前に、junaio（ジュナイオ）へのユーザー登録をしておきます。
ARコンテンツは、metaio Creatorというソフトウェア（無料　無料版は制限あり）を使って作成します。

metaio | The New metaio Creator 2.5

http://www.metaio.com/products/creator/

ユーザー登録の後、metaio Creatorをインストールします。チュートリアルの動画がありましたが、見なくても分かり易いインターフェースなので、直感的な作業で、問題なくARコンテンツが作成できます。

マーカー画像を読み込むと、3Dのキャラクターを表示するアプリの設定です。

表示に角度をつけると、自分が作成しているもののイメージが分かり易いです。

コンテンツの作成が完了したら、次に、junaio（ジュナイオ）に公開用のチャンネルを作成します。

チャンネルの作成後、サーバにコンテンツをアップロードします。アップ先のサーバとして、metaio　Cloudを使うこともできますし、自分でFTPアクセスできて、インターネットに公開されているサーバであれば、そのサーバを利用することもできます。ただし、PHP5の環境が必要なようです。利用しているXREAのサーバでは、問題なくホスト出来ました。

アップが完了したjunaio（ジュナイオ）の管理画面。無料版では、2チャンネルしか公開できません。

子どもたちを分身させた写真を作ってみました。別バージョン。

以前、子どもたちを分身させた写真を作った際、別バージョン用の写真も撮っていました。

子どもたちを分身させた写真を作ってみました。
http://vivo-design.blogspot.jp/2012/02/blog-post.html

その写真で、もう一つ分身写真を作りました。

YouTubeの動画をウェブページの背景に表示する「tubular」という、jQuery Pluginを使ってみました。

YouTubeの動画が背景に表示されるページの出来る「tubular」という、jQuery Pluginがあります。

tubular
http://www.seanmccambridge.com/tubular/

YouTubeにアップしていた「とっとり花回廊バードフライトショーの鷹の飛ぶ様子」という動画をつかってサンプルファイルを作成してみました。

とっとり花回廊バードフライトショーの鷹の飛ぶ様子
http://www.vivo-win.com/jQuery_tubular/

動画の再生、一時停止、音量の制御も出来ます。

このページで表示している動画は、スマホで撮影した動画なので、画質は荒いです。一眼レフカメラで撮影した動画であれば、きめの細かい画質の動画を背景に出来るので、綺麗に見えると思います。