rootsは、jade、stylus、coffeescriptをデフォルトのスタックとして構成されています。

「サイト構築のための枠組みを用意してくれる「roots」を試してみました。」 の続きです。

rootsは、jade、stylus、coffeescriptをデフォルトのスタックとして構成されています。

jadeは、htmlのテンプレートエンジン
stylusは、cssのテンプレートエンジン
coffeescriptは、JavaScriptのコードを生成するためのコンパクトなスクリプト言語

jade
http://jade-lang.com/

stylus
http://learnboost.github.io/stylus/

coffeescript
http://coffeescript.org/

どれにも共通しているのは、少ないタイプ数で実現したい内容を表現できること。そのソースをコンパイルすることで、html、css、JavaScriptを生成します。

どれも、タグの記載の冗長な部分を不要としていたり、変数が利用できたりと、プログラミングをする際に便利な機能が用意されています。

rootsでは、jade、stylus、coffeescriptの各ソースを修正して、保存すると、自動的にコンパイルされてブラウザに表示されている画面に反映されます。

テンプレート言語を使用して、ウェブサイトを作成する際の、ソースを変更保存して、コンパイル、ブラウザをリロードして確認という作業が一瞬で出来ます。

実際のソースで確認してみます。

example > views > index.jade
の最後に、下記の２行を追加します。

p hello world
.box

example > assets > css > master.styl にboxクラスの指定を追加します。

.box
  size: 30px
  border: 1px solid 

上記のファイルを保存すると、自動でコンパイルされます。index.jadeはindex.htmlに、master.stylはmaster.cssにコンパイルされ、ブラウザには、その結果が自動でリロードされます。

サイト構築のための枠組みを用意してくれる「roots」を試してみました。

rootsというツールがあります。

サイトでは、次のように紹介されています。「roots is a toolbox for building simple, beautiful, and efficient products for the web.」シンプルで、美しく、効率的なサイト構築のためのツールボックス（フレームワーク、サイトジェネレータ）といったところでしょうか。

roots | where it all begins
http://roots.cx/

まず、Mac OS X 10.7.5　にインストールしてみます。

node.jsが入っていなかったので、http://nodejs.org/download/ より
node-v0.10.12.pkg をダウンロードしてインストール。

node.jsのインストール完了後のメッセージ

Node was installed at
   /usr/local/bin/node

npm was installed at
   /usr/local/bin/npm

Make sure that /usr/local/bin is in your $PATH.

rootsをインストールします。

$ sudo npm install roots -g 

roots用のディレクトリを作成して、サンプルサイトを作成します。作成したexampleディレクトリに入って、roots watchを叩くと、サーバが起動して、該当ページがブラウザで表示されます。

$ mkdir roots_cx
$ cd roots_cx/
$ roots new example

new project created at /example

$ cd example/
$ ls
app.coffee assets  readme.md views

$ roots watch
compiling... done!
server started on port 1111

次に　CentOS　にインストールしてみます。

インストールコマンドを叩いても、インストールが出来ませんでした。

$ sudo npm install roots -g
npm http GET https://registry.npmjs.org/roots
npm http 200 https://registry.npmjs.org/roots

npm ERR! Error: No compatible version found: roots
npm ERR! No valid targets found.
npm ERR! Perhaps not compatible with your version of node?
npm ERR!     at installTargetsError (/usr/local/lib/node_modules/npm/lib/cache.js:488:10)
npm ERR!     at next_ (/usr/local/lib/node_modules/npm/lib/cache.js:438:17)
npm ERR!     at next (/usr/local/lib/node_modules/npm/lib/cache.js:415:44)
npm ERR!     at /usr/local/lib/node_modules/npm/lib/cache.js:408:5
npm ERR!     at saved (/usr/local/lib/node_modules/npm/lib/utils/npm-registry-client/get.js:147:7)
npm ERR!     at Object.oncomplete (/usr/local/lib/node_modules/npm/node_modules/graceful-fs/graceful-fs.js:231:7)
npm ERR! You may report this log at:
npm ERR!     
npm ERR! or email it to:
npm ERR!     
npm ERR! 
npm ERR! System Linux 2.6.32-71.el6.i686
npm ERR! command "node" "/usr/local/bin/npm" "install" "roots" "-g"
npm ERR! cwd /home/ariki
npm ERR! node -v v0.6.10
npm ERR! npm -v 1.1.0-3
npm ERR! message No compatible version found: roots
npm ERR! message No valid targets found.
npm ERR! message Perhaps not compatible with your version of node?
npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /home/ariki/npm-debug.log
npm not ok

node.jsのバージョンが古いのが問題のようです。node.jsの最新版を入れます。元々、ソースから入れていたので、ソースで入れます。

$ wget http://nodejs.org/dist/v0.10.12/node-v0.10.12.tar.gz
$ tar vxzf node-v0.10.12.tar.gz
$ cd node-v0.10.12
$ ./configure
$ make
$ sudo make install

$ node -v
v0.10.12

再度インストールコマンドを叩くと、今度はインストール出来ました。Macの時と同様にroots用のディレクトリを作成して、サンプルサイトを作成します。

$ mkdir roots_cx
$ cd roots_cx/
$ roots new example

new project created at /example

You should install git ASAP.
Check out http://git-scm.com/ for a quick and easy download

$ cd example/
$ roots watch
compiling... done!
server started on port 1111

同様に、ページが表示されました。

サイトを構築する際の決まりきった作業を効率化できるツールが沢山あるようです。しばらく調べてみたいと思います。

次のrootsに関する記事「rootsは、jade、stylus、coffeescriptをデフォルトのスタックとして構成されています。」 に続きます。

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/

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

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