Tech Sketch Bucket of Technical Chips by TIS Inc.

[JointJS入門]JointJSを使ってブラウザ上にフォルダ構成図を描いてみよう

Pocket

HTML5の登場によりCanvasやSVGなどを利用することでWebサイトやアプリでリッチな表現ができるようになってきています。しかし、CanvasやSVGを使って全て自前でグラフを描くのは大変なので、D3.jsなどのライブラリを使用してグラフや図を描くことが多いと思います。そこで、今回は「JavaScript Diagramming Library」であるJointJSを使い、ブラウザ上に図を書いてみます。

「Backbone.js」と「jQuery Mobile」を組み合わせてネイティブっぽいWebアプリを作ってみよう!~ ④jqmized-backbone編 ~

Pocket

前回 はBackbone.jsとjQuery Mobileを組み合わせることで、ネイティブアプリのような見た目のWebアプリを作成しました。
しかし、Backbone.jsとjQuery Mobileを組み合わせるためにjQuery Mobileの一部機能を止めているため、「画面遷移時のトランジション」や「1つのHTMLファイルに複数のページ情報を持たせる」ことを実現しようとするとJavaScript実装が増えてしまうという問題がありました。そこで、今回はこれらを解決する「jqmized-backbone」について解説します。 

「Backbone.js」と「jQuery Mobile」を組み合わせてネイティブっぽいWebアプリを作ってみよう!~ ③Backbone.js + jQuery Mobile編 ~

Pocket

前回 はBackbone.jsを使ったWebアプリを作ってみました。
ただ、見た目に関することを何もしていなかったのでいまいち(?)見た目が美しくありませんでした。

というわけで、今回はBackbone.jsで作成したWebアプリにjQuery Mobileを組み合わせることでネイティブっぽい見た目にしていきたいと思います。

「Backbone.js」と「jQuery Mobile」を組み合わせてネイティブっぽいWebアプリを作ってみよう!~ ②Backbone.js編 ~

Pocket

前回 は、Ruby on Railsを使ってサーバー側にRESTful APIを実装しました。
今回はBackbone.jsを使ったクライアント側の実装をみていきます。

「Backbone.js」と「jQuery Mobile」を組み合わせてネイティブっぽいWebアプリを作ってみよう!~ ①環境構築&サーバ側の実装編 ~

Pocket

HTML5の普及によりWebアプリは急速に進化しています。しかし、Webアプリを作成する際のデファクトスタンダードは存在していないのが現状です。そこで、比較的導入実績の多いJavaScriptフレームワークである「Backbone.js」と「jQuery Mobile」を用いてネイティブに近いWebアプリを作成してみました。今回から4回に分けて上記手法を用いたWebアプリの作成方法についてご紹介します。
本連載ではサーバの実装からクライアントの実装までWebアプリを作成するために必要なことをひととおり解説します。

まず、初回である今回は環境構築とサーバ側の実装を見ていきたいと思います。

Kinect + OpenNIを使用して取得した「空間の使用頻度」をsocket.ioを利用してリアルタイムに確認する - ③(Kinect編)

Pocket

前回前々回で環境構築とサーバ側の実装まで完了しました。今回はKinect側の実装を進めていきます。

Kinect + OpenNIを使用して取得した「空間の使用頻度」をsocket.ioを利用してリアルタイムに確認する - ②(Node.js編)

Pocket

前回は環境構築を実施しました。今回はサーバ側の実装を進めていきます。
サーバ側の実装は「Node.js」を使用するため、Kinectを持っていなくても動作確認をすることが可能です。
Node.jsやExpress, express-resource, ejs-locals, socket.io等を使用するため、もし興味があれば今回分だけでも実装を試してみてください。

Kinect + OpenNIを使用して取得した「空間の使用頻度」をsocket.ioを利用してリアルタイムに確認する - ① (環境構築編)

Pocket

Kinect + OpenNIを使って「空間の使用頻度」を測定し、クライアント側にリアルタイムに送信しHeatmapを作成します。まずは環境構築を実施します。