2013/04/29

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」を見れば分かります。


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


2013/04/28

モバイル向け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


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

ジュナイオガイド junaio AR(拡張現実)


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



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

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

metaio | The New metaio Creator 2.5


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


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


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

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

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


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

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

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

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

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


2013/04/27

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

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

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


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

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

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

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

人気の投稿 (過去 30 日間)