<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
		xmlns:xhtml="http://www.w3.org/1999/xhtml"
>

<channel>
	<title>CIOを目指しつつの8makiのアレ &#187; IT</title>
	<atom:link href="http://blog.8maki.jp/category/proposal/it/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.8maki.jp</link>
	<description>俺と周りの変態リタラシーを埋める</description>
	<lastBuildDate>Sat, 28 Jan 2012 04:05:04 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.8maki.jp/category/proposal/it/feed" />
		<item>
		<title>Quick Zsh Tip: ディレクトリのブックマーク</title>
		<link>http://blog.8maki.jp/2011/02/quick-zsh-tip.html</link>
		<comments>http://blog.8maki.jp/2011/02/quick-zsh-tip.html#comments</comments>
		<pubDate>Sun, 20 Feb 2011 06:17:44 +0000</pubDate>
		<dc:creator>8maki</dc:creator>
				<category><![CDATA[IT]]></category>
		<category><![CDATA[proposal]]></category>
		<category><![CDATA[エンジニア]]></category>

		<guid isPermaLink="false">http://blog.8maki.jp/?p=818</guid>
		<description><![CDATA[
			
				
			
		
Y CombinatorのHacker Newsを見てたら、Bashにおけるディレクトリのブックマーク方法について書かれてました。
これでcdの手間がすごい省ける！
&#187; Quick Bash Tip : Directory Bookmarks
そのzsh版もコメント欄に書かれていたのですが、コピペするだけじゃ動かなかったので、修正版をUP。

# ZSH Directory Bookmarks
alias m1='alias g1=&#34;cd `pwd`&#34;'
alias m2='alias g2=&#34;cd `pwd`&#34;'
alias m3='alias g3=&#34;cd `pwd`&#34;'
alias m4='alias g4=&#34;cd `pwd`&#34;'
alias m5='alias g5=&#34;cd `pwd`&#34;'
alias m6='alias g6=&#34;cd `pwd`&#34;'
alias m7='alias g7=&#34;cd `pwd`&#34;'
alias m8='alias g8=&#34;cd `pwd`&#34;'
alias m9='alias g9=&#34;cd `pwd`&#34;'
alias mdump='alias &#124; grep -e &#34;g[0-9]=&#34; &#124; grep -v &#34;m[0-9]&#34; &#124; sed &#34;s/^g/alias g/g&#34; &#62; ~/.bookmarks'
alias lma='alias [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.8maki.jp%2F2011%2F02%2Fquick-zsh-tip.html"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.8maki.jp%2F2011%2F02%2Fquick-zsh-tip.html&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>Y Combinatorの<a href="http://news.ycombinator.com/" target="_blank">Hacker News</a>を見てたら、Bashにおけるディレクトリのブックマーク方法について書かれてました。<br />
これでcdの手間がすごい省ける！<br />
&raquo; <a href="http://www.huyng.com/archives/quick-bash-tip-directory-bookmarks/492/" target="_blank">Quick Bash Tip : Directory Bookmarks</a></p>
<p>そのzsh版もコメント欄に書かれていたのですが、コピペするだけじゃ動かなかったので、修正版をUP。</p>
<pre class="brush: bash;">
# ZSH Directory Bookmarks
alias m1='alias g1=&quot;cd `pwd`&quot;'
alias m2='alias g2=&quot;cd `pwd`&quot;'
alias m3='alias g3=&quot;cd `pwd`&quot;'
alias m4='alias g4=&quot;cd `pwd`&quot;'
alias m5='alias g5=&quot;cd `pwd`&quot;'
alias m6='alias g6=&quot;cd `pwd`&quot;'
alias m7='alias g7=&quot;cd `pwd`&quot;'
alias m8='alias g8=&quot;cd `pwd`&quot;'
alias m9='alias g9=&quot;cd `pwd`&quot;'
alias mdump='alias | grep -e &quot;g[0-9]=&quot; | grep -v &quot;m[0-9]&quot; | sed &quot;s/^g/alias g/g&quot; &gt; ~/.bookmarks'
alias lma='alias | grep -e &quot;g[0-9]=&quot; | grep -v &quot;m[0-9]&quot; | sed &quot;s/^g/alias g/g&quot;'
touch ~/.bookmarks
source ~/.bookmarks
</pre>
<p>こうするとブックマークされて↓</p>
<pre class="brush: bash;">
# This will create a bookmark for the /var/www directory
/var/www% m1
</pre>
<p>こうするとブックマークしたディレクトリに移動できます↓</p>
<pre class="brush: bash;">
# This will cd into /var/www
/var/www% g1
</pre>
<p>`lma`コマンドで今のブックマーク状況をチェックできます。</p>
<pre class="brush: bash;">
/var/www% lma
alias g1='cd /var/www/'
alias g2='cd /etc/httpd/conf.d'
</pre>
]]></content:encoded>
			<wfw:commentRss>http://blog.8maki.jp/2011/02/quick-zsh-tip.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.8maki.jp/2011/02/quick-zsh-tip.html" />
	</item>
		<item>
		<title>マニアックな金融系サイトをnode.jsとMongoDBで実装してみた（実装編）</title>
		<link>http://blog.8maki.jp/2011/01/marketgeek_nodejs_mongodb_development.html</link>
		<comments>http://blog.8maki.jp/2011/01/marketgeek_nodejs_mongodb_development.html#comments</comments>
		<pubDate>Tue, 18 Jan 2011 23:52:40 +0000</pubDate>
		<dc:creator>8maki</dc:creator>
				<category><![CDATA[IT]]></category>
		<category><![CDATA[proposal]]></category>
		<category><![CDATA[エンジニア]]></category>
		<category><![CDATA[サービス]]></category>
		<category><![CDATA[express.js]]></category>
		<category><![CDATA[mongoDB]]></category>
		<category><![CDATA[node.js]]></category>

		<guid isPermaLink="false">http://blog.8maki.jp/?p=778</guid>
		<description><![CDATA[
			
				
			
		
さて、前回の記事「マニアックな金融系サイトをnode.jsとMongoDBで実装してみた（概要編）」に続き、実装の詳細を書こうと思うのですが、こちらはどうせ技術者しか見ないので手っ取り早く、コードとシェルを中心にします。
この記事では、開発から運営まで一連の流れを示して、node.jsとMongoDBである程度のWebサービスを提供できるようになること、を目的としています。
SakuraのVPSにMongoDBとnode.jsをインストール
以前、別のサーバーにMongoDBを入れてアクセス解析をしようとしたのですが、どうやら32bit版だと1つのDBは2GB以上入れられないらしく。
しかたなしにSakruaのVPS（CentOS64bit）に64bit版のMongoDBをソースコードから入れました。
※32bitだとyumとかapt-getとかで入ったのにー

wget http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-1.6.5.tgz
tar xvzf mongodb-linux-x86_64-1.6.5.tgz
sudo mv mongodb-linux-x86_64-1.6.5 /usr/local/bin # どっか適当に
sudo mv /usr/local/bin/mongodb-linux-x86_64-1.4.3 /usr/local/bin/mongodb
useradd mongodb
mkdir /var/lib/mongodb  # 中身を入れるディレクトリ
chown -R mongodb:mongodb /var/lib/mongodb
mkdir /var/log/mongod
chown -R mongodb:mongodb /var/log/mongod
sudo /sbin/chkconfig --add mongod
/sbin/chkconfig mongod on
/sbin/chkconfig --list &#124;grep mongod
sudo /etc/init.d/mongod # 起動スクリプト
sudo /etc/init.d/mongod start
sudo easy_install pymongo # ついでにpythonから使うのでライブラリインストール

ちなみに、デーモン化したかったので簡単な起動シェルをこちらから拝借してきました。
&#187; 技術メモ
（こちら、公開してなかったらゴメンナサイ。そしたら別にファイル作ります。）
試しにmongoのシェルから動いてるのを確認してみてください。

mongo
----
MongoDB shell version: 1.6.5
connecting to: test
&#62; show dbs
admin
local
test

次にnode.jsを入れます。
安定版の0.2.6をインストール。ssl使う場合はもっと大変そう。

wget http://nodejs.org/dist/node-v0.2.6.tar.gz
tar zxvf node-v0.2.6.tar.gz
cd node-v0.2.6
./configure --without-ssl
make
sudo make [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.8maki.jp%2F2011%2F01%2Fmarketgeek_nodejs_mongodb_development.html"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.8maki.jp%2F2011%2F01%2Fmarketgeek_nodejs_mongodb_development.html&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>さて、前回の記事「<a href="http://blog.8maki.jp/2011/01/marketgeek_nodejs_mongodb_outline.html">マニアックな金融系サイトをnode.jsとMongoDBで実装してみた（概要編）</a>」に続き、実装の詳細を書こうと思うのですが、こちらはどうせ技術者しか見ないので手っ取り早く、コードとシェルを中心にします。</p>
<p>この記事では、開発から運営まで一連の流れを示して、<strong>node.jsとMongoDBである程度のWebサービスを提供できるようになること</strong>、を目的としています。</p>
<h4>SakuraのVPSにMongoDBとnode.jsをインストール</h4>
<p>以前、別のサーバーに<a href="http://www.mongodb.org/" target="_blank">MongoDB</a>を入れてアクセス解析をしようとしたのですが、どうやら32bit版だと1つのDBは2GB以上入れられないらしく。<br />
しかたなしにSakruaのVPS（CentOS64bit）に64bit版のMongoDBを<a href="http://www.mongodb.org/downloads" target="_blank">ソースコード</a>から入れました。<br />
※32bitだとyumとかapt-getとかで入ったのにー</p>
<pre class="brush: bash;">
wget http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-1.6.5.tgz
tar xvzf mongodb-linux-x86_64-1.6.5.tgz
sudo mv mongodb-linux-x86_64-1.6.5 /usr/local/bin # どっか適当に
sudo mv /usr/local/bin/mongodb-linux-x86_64-1.4.3 /usr/local/bin/mongodb
useradd mongodb
mkdir /var/lib/mongodb  # 中身を入れるディレクトリ
chown -R mongodb:mongodb /var/lib/mongodb
mkdir /var/log/mongod
chown -R mongodb:mongodb /var/log/mongod
sudo /sbin/chkconfig --add mongod
/sbin/chkconfig mongod on
/sbin/chkconfig --list |grep mongod
sudo /etc/init.d/mongod # 起動スクリプト
sudo /etc/init.d/mongod start
sudo easy_install pymongo # ついでにpythonから使うのでライブラリインストール
</pre>
<p>ちなみに、デーモン化したかったので簡単な起動シェルをこちらから拝借してきました。<br />
&raquo; <a href="https://luna.easyjp.net/projects/memo/wiki/mongodb/install" target="_blank">技術メモ</a><br />
（こちら、公開してなかったらゴメンナサイ。そしたら別にファイル作ります。）</p>
<p>試しにmongoのシェルから動いてるのを確認してみてください。</p>
<pre class="brush: bash;">
mongo
----
MongoDB shell version: 1.6.5
connecting to: test
&gt; show dbs
admin
local
test
</pre>
<p>次に<a href="http://nodejs.org/" target="_blank">node.js</a>を入れます。<br />
安定版の0.2.6をインストール。ssl使う場合はもっと大変そう。</p>
<pre class="brush: bash;">
wget http://nodejs.org/dist/node-v0.2.6.tar.gz
tar zxvf node-v0.2.6.tar.gz
cd node-v0.2.6
./configure --without-ssl
make
sudo make install
</pre>
<p>また、node.jsはライブラリのパッケージ管理に<a href="https://github.com/isaacs/npm" target="_blank">npm</a>というものを使っていて、こちらもインストール。</p>
<p><b-quote>ここまできて、npmは/usrとか/usr/localにroot権限で入れるのではなく、$HOME/.npmrcを設定して一般ユーザーの権限で入れるのがベストプラクティスなのだと理解した。</b-quote><br />
&raquo; <a href="http://d.hatena.ne.jp/perezvon/20100929/1285780850" target="_blank">npmをインストールする &#8211; スコトプリゴニエフスク通信</a></p>
<p>とのことで、おとなしくそれに従う。ってか実際rootで入れると、sudo npm install xxxするときに怒られます。</p>
<pre class="brush: bash;">
wget https://download.github.com/isaacs-npm-v0.2.14-6-14-g0cec5bf.tar.gz
cat &gt;&gt;~/.npmrc &lt;&lt;NPMRC
root = $HOME/.node_libraries
binroot = $HOME/bin
manroot = $HOME/share/man
NPMRC
tar -zxvf isaacs-npm-v0.2.14-6-14-g0cec5bf.tar.gz
cd isaacs-npm-v0.2.14-6-14-g0cec5bf
make install
</pre>
<p>で、必要なライブラリをインストール。</p>
<pre class="brush: bash;">
npm install express # これは古いらしく結局ソースから読み込み・・・
npm install mongodb
npm install ejs
npm install spark # 結局使わず・・・
npm install forever
</pre>
<h4>node.jsでwebサーバーを書く</h4>
<p>これで一通り環境が整ったので、適当なフォルダにapp.jsかなんかのファイル名でごりごり書いていきます。<br />
前提として、mongoDBに既に必要なデータは入ってるものとします。<br />
詳しくはmongoDBの<a href="http://www.mongodb.org/display/DOCSJP/Home" target="_blank">日本語マニュアル</a>を参照。<a href="http://twitter.com/doryokujin" target="_blank">@doryokujin</a>君に感謝！</p>
<p>ちなみにnode.jsコミュでは一番メジャーっぽい、<a href="http://expressjs.com/" target="_blank">express.js</a>っていうフレームワークを使っています。<br />
<a href="https://github.com/visionmedia/express/tree/master/examples/" target="_blank">github</a>にサンプルコードがたくさん載っていて、特にmvcがとても参考になりました。</p>
<p>なお、フォルダ構成はこんな感じです。<br />
/service<br />
　/public・・・cssとかimgとか静的ファイル<br />
　/express・・・expressの本体<br />
　/views・・・テンプレートファイル<br />
　　body.html<br />
　　layout.html<br />
　　header.html<br />
　app.js</p>
<p>app.js</p>
<pre class="brush: jscript;">
var express = require('./express'),
	phpjs = require('./php');

var app = module.exports = express.createServer(),
	Db = require('mongodb/db').Db,
	ObjectID = require('mongodb/bson/bson').ObjectID,
	Server = require('mongodb/connection').Server,
	db = new Db('dbname', new Server('localhost', 27017, {}));

app.set('views', __dirname + '/views');
app.register('.html', require('ejs'));
# express.jsはテンプレートエンジンにjadeを使ってるがキモいのでejs
app.set('view engine', 'html');
app.use(express.staticProvider(__dirname + '/public'));
# 静的フォルダの指定
app.use(express.logger('\x1b[33m:method\x1b[0m :date :status \x1b[32m:url\x1b[0m :response-time :remote-addr :referrer'));
# loggerはnode.jsが使っているConnectのformatに対応
app.helpers({ # テンプレートから呼び出せるヘルパー関数群
  helper1: function(){ return false; },
  helper2: functoin(){ return true; }
});
# routingの部分。 / にアクセスしたらこれが実行される
app.get('/', function(req, res){
	getCollection1(function(result1){
		getCollection2(function(result2){
			res.render('body', { # layout.htmlを使ったbody.htmlを描画
				layout:'layout',
				result1: result1,
				result2: result2
			});
		});
	});
});

db.open(function(){}); # dbをオープン。これしないと接続できなかった。。。
function getCollection1(callback) {
	db.collection('collection1', function(error, stock_info) {
		if( error ) console.log(error);
		else {
			stock_info.find({}, function(error, cursor){
				if( error ) console.log(error)
				else{
					cursor.toArray(function(error, results) {
						if( error ) console.log(error)
						else callback(results);
					})
				};
			})
		}
	});
}
function getCollection2(callback) { /* 以下同文 */ }

console.log('Express app started');
app.listen(3000);
</pre>
<p>layout.html</p>
<pre class="brush: xml;">
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;body&gt;
	&lt;div id=&quot;header&quot;&gt;&lt;%- partial('header') %&gt;&lt;/div&gt;&lt;!-- こういう風にヘッダも分けれる --&gt;
	&lt;div id=&quot;body&quot;&gt;&lt;%- body %&gt;&lt;/div&gt;&lt;!-- 中身がここに書かれる --&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p>開発のポイントとしては、<br />
・<strong><a href="http://phpjs.org/" target="_balnk">php.js</a>が便利すぎる！</strong><br />
　phpの関数をjavascriptでどう書くか？というスニペット集。<br />
　上記コードでは必要な関数を外部モジュール化して使ってます。<br />
・<strong>loggerのformatが不明だった</strong><br />
　node.jsが使っているConnectのサイトに<a href="http://senchalabs.github.com/connect/logger.html" target="_blank">API</a>が！<br />
・<strong>DBへのアクセス毎にcallbackが入れ子していくので、とにかくアクセスは少なく！</strong><br />
　いやはやMongoDB使ってて正解でした。<br />
　これがMySQLだったらどれだけ入れ子していったことか。<br />
　もちろん<a href="https://github.com/cho45/jsdeferred" target="_blank">jsdeferred</a>とか使って同期処理させることはできますが。</p>
<p>これでモノは揃ったので、実際に実行してみます。</p>
<pre class="brush: bash;">
cd /path/to/service
node app.js
</pre>
<p>すると&#8221;Express app started&#8221;と出るので、実際に http://localhost:3000/ から確認してください。<br />
ポートは自由に変えられます。</p>
<h4>nodeのデーモン化を行う</h4>
<p>一応以上までで実装は完了してるのですが、これをちゃんとサービスとして運営するにはあともろもろ必要ですよね。</p>
<p>一番てこずったのが、デーモン化。<br />
なんかエラー出して止まっちゃったときに、自動で再起動してくれないと困る。<br />
結論から言うと、npmでインストールできるforeverというライブラリを使っているのですが、右余曲折ありまして。</p>
<p>1. どうやらspark（configの設定、マルチコア対策）+upstart（デーモン化）+monit（監視）がテッパンらしい。<br />
&raquo; <a href="http://howtonode.org/deploying-node-with-spark" target="_blank">Deploying Node Apps with Spark &#8211; How To Node &#8211; NodeJS</a><br />
&raquo; <a href="http://howtonode.org/deploying-node-upstart-monit" target="_blank">Deploying Node.js With Upstart and Monit</a><br />
2. sparkはすんなり入った。<br />
3. upstartが動かん・・・ってrequirementがpython2.5以上で他にもCentOS5向けじゃなさそう・・・<br />
&raquo; <a href="http://upstart.ubuntu.com/faq.html#requirements-building" target="_blank">What are the requirements for building Upstart?</a><br />
4. じゃあmonitから直でspark呼ぶか、ってnpmとか諸々$HOMEに入れてるから、monitから起動できない模様・・・<br />
5. なんか他にも、<a href="https://github.com/frank06/spark2" target="_blank">spark2</a>とか<a href="https://github.com/indexzero/daemon.node" target="_blank">daemon.node</a>とか<a href="http://blog.nodejitsu.com/keep-a-nodejs-server-up-with-forever" target="_blank">forever</a>とか色々あるな～<br />
6. daemon.nodeは割と有名っぽいけど、作者が同じforeverが簡単そう！</p>
<pre class="brush: bash;">
cd /path/to/service
forever start app.js
</pre>
<p>7. 動いた！←イマココ</p>
<p>これで何とかデーモン化ができました。</p>
<h4>実際にデプロイする</h4>
<p>ちょっとポートを空けてうんぬんとか面倒くさかったので、ApacheからProxyさせました。<br />
これだとloggerの:remote-addressにIPが出ないんですけどね・・・<br />
近々改善予定。<br />
&raquo; <a href="http://mitukiii.jp/2010/12/26/ubuntu-install-node-js-and-proxy-apache/" target="_blank">mitukiii.jp | Ubuntuにnode.js入れてApacheからProxyさせてみた</a></p>
<p>ついでにMongoDBの状況をmuninでチェックできるように、<a href="https://github.com/erh/mongo-munin" target="_blank">mongo-munin</a>とやらを導入しました。</p>
<pre class="brush: bash;">
sudo ln -s /usr/share/munin/plugins/mongo_ops /etc/munin/plugins/mongo_ops
sudo /etc/init.d/munin-node restart
</pre>
<h4>まとめ</h4>
<p>いやいや、MongoDBもnode.jsも初めてだったので四苦八苦しました。<br />
しかもnode.jsに関しては、まとまった日本語ドキュメントが無いという・・・<br />
ていうか全体的にドキュメントが不足がち。<br />
しかもまだ安定運営周りの方法が確立していないようで、色々議論されてました。<br />
<a href="http://groups.google.com/group/nodejs/browse_thread/thread/757d177ac3bf3c32/1fda92d9aa9d8d8f" target="_balnk">node servers, npm scripts, spark2 and monit</a><br />
たしかにnpm start app.jsで管理できたら便利やなー</p>
<p>でもこれで、一通りnode.js周りのことが勉強できたし、足りないとこだらけなので貢献していければなーと思います。<br />
久々の長文ありがとうございました。</p>
<p>今回リリースしたサイト↓<br />
<a href="http://marketgeek.net/ja/" target="_blank">http://marketgeek.net/ja/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.8maki.jp/2011/01/marketgeek_nodejs_mongodb_development.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.8maki.jp/2011/01/marketgeek_nodejs_mongodb_development.html" />
	</item>
		<item>
		<title>マニアックな金融系サイトをnode.jsとMongoDBで実装してみた（概要編）</title>
		<link>http://blog.8maki.jp/2011/01/marketgeek_nodejs_mongodb_outline.html</link>
		<comments>http://blog.8maki.jp/2011/01/marketgeek_nodejs_mongodb_outline.html#comments</comments>
		<pubDate>Tue, 18 Jan 2011 23:52:27 +0000</pubDate>
		<dc:creator>8maki</dc:creator>
				<category><![CDATA[IT]]></category>
		<category><![CDATA[proposal]]></category>
		<category><![CDATA[エンジニア]]></category>
		<category><![CDATA[サービス]]></category>
		<category><![CDATA[金融]]></category>
		<category><![CDATA[Marketgeek]]></category>
		<category><![CDATA[mongoDB]]></category>
		<category><![CDATA[Naspers]]></category>
		<category><![CDATA[node.js]]></category>

		<guid isPermaLink="false">http://blog.8maki.jp/?p=777</guid>
		<description><![CDATA[
			
				
			
		

ちょっと半分趣味で、Marketgeekなるマニアックなファイナンス系のサイトを、意味もなくnode.jsとMongoDBで実装、リリースしました。
ただ、node.jsとMongoDBは結構はやりな割に、運用実績がすごく少ないようで、その技術の背景など含めてまとめてみました。
※なお、開発回りのことだけ知りたい方はこちらへどうぞ↓
» マニアックな金融系サイトをnode.jsとMongoDBで実装してみた（実装編）
node.jsとは何か？
node.jsは、サーバーサイドJavascriptのフレームワークで、簡単にWebサーバー等を実装することができます。
サーバサイドJavascriptは昔から注目されていましたが、node.jsの登場で一気にその流れが加速。
理由といえば、こういう類のモノにしては、びっくりするくらい速い！こと。
Google Chromeで採用していたV8をJavascrptエンジンに使っており、スピードUPが測れたとのこと。
いわゆる&#8221;Pythonより速い&#8221;らしいｗ
加えて、昨今HTML5も騒がれていますが、そうなるとサーバーへのリクエストが細分化されますよね？
そうすると非同期で処理するnode.jsはうってつけかも！という流れもあり（WebSocketとか）、今年はnode.jsの年！と言われるようになったのかも。
node.jsに関してはこの記事が詳しいです↓
» 2011年はサーバサイドJavaScriptの年になる － Publickey
MongoDBとは何か？
MongoDBとは、いわゆるNoSQL系のDBで、最新DBの中では一番注目されているオープンソースです。
今まで主流のDBであるRDBは、いわゆるExcelのようにまず列を決めてその属性群（スキーマと言う）をもったデータを行として入れていく、というスタイルのものでしたが、NoSQL系のDBではkey（IDのようなもの）でデータを管理し、そのデータの属性（スキーマ）は一定に決めなくてもよい、という柔軟なデータ構造を取れるため各所で使われ始めています。
スキーマレスDBとも言われています。
中でもMongoDBは、KVS（Key Value Store）だけでなく、複雑な検索を行ったり、インデックス張ったり、簡単にスケールさせられたり（サーバー増やしやすい）と、実用にかなった機能をもっているため広まってきています。
ちなみに実用実績としては、ForsquareがMongoDBを採用してるようです。
MongoDBと他のDBとの比較はこの記事が詳しいです↓
» MongoDB’s performance as compared to others
また、3月頭にMongoDBの商用サポートを行っている10genのイベントが東京であるらしいので興味ある方はどうぞ。
» Mongo Tokyo
なぜnode.js+MongoDBを使って実装したのか？
柔軟に金融情報を管理しようとするとスキーマ決めるのって難しいよねーっていう感じと、今後もっとリッチなVisualizationを作っていくためにAjaxとかWebSocketに適してるっぽいのがいいという勘で、MongoDBとnode.jsを選んでみました。
。。。正直あんま理由とかはないですけどねf^^;
ていうか、もともとこういうサイトを作る気合いはあったのですが、ただ技術的には何も新しい・難しいことはないので、だったら勉強がてらやってみよう！というノリでｗ
あと、オープンソースコミュニティにもそろそろ絡んでいきたいなーと思っていて、発展途上のnode.jsとMongoDBは最適だ思ったので。
開発して分かったのですが、まだまだ色々な問題点があるので、随時コミットしていきたい。
なぜMarketgeekを作ったのか？
日本のベンチャー界隈も「世界へ出ろ！英語化しろ！」とはやし立てられてますけど、実際世界と日本の違いをまともに話せる人、まともに比較できるリソースがあまりにも少なすぎるかなー、と。
それだと「とりあえず英語化して、海外視察して、ちょっと英語でプレゼンしてみて。」っていう感じで終わってしまう気がする。
そこで、具体的に何を目標にどうアプローチしていけばよいのか、思考のネタになるものを作ってみたかったとです。
加えて、逆に英語圏の人からアジアのベンチャーとかって、中々見えにくいのではないでしょうか？
2バイト文字ばっかだし。
もちろん中国とかシンガポールとかにたくさんVCは進出してきてある程度情報が海を越えてるかもしれませんが、英語で書かれた米メディアに比べて、アジアの英語メディアって圧倒的に少ない。
特に東南アジア。
これからはアジアの時代になると言われていますし、思った以上にニーズがありそうで、かつそれなりのポジションを築けそうだったのでホイホイ作ってみました。
まぁなにより作ってて単純に楽しかったです。
最先端の技術使って、興味のあるマニアックなもの作ってｗ
Naspersって２兆円もあるのか！フヒヒヒヒヒっｗｗｗみたいなｗ
あ、ちなみにNaspersは@anritさんが作ったこの図が凄く分かりやすい。
Zynga、Groupon、Facebookの金の供給元ってすごいですよね。

とりあえず見てみてください。随時機能拡張予定です。
http://marketgeek.net/ja/
あと、要望とかコメントとかあったらtwitterへどうぞ⇒@marketgeek_net
技術編はこちら↓
» マニアックな金融系サイトをnode.jsとmongoDBで実装してみた（実装編）
]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.8maki.jp%2F2011%2F01%2Fmarketgeek_nodejs_mongodb_outline.html"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.8maki.jp%2F2011%2F01%2Fmarketgeek_nodejs_mongodb_outline.html&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p><a href="http://marketgeek.net/ja/"><img src="http://marketgeek.net/img/logo.gif" style="margin-top:10px;"></a></p>
<p>ちょっと半分趣味で、<a href="http://marketgeek.net/ja/" target="_blank">Marketgeek</a>なるマニアックなファイナンス系のサイトを、意味もなくnode.jsとMongoDBで実装、リリースしました。</p>
<p>ただ、node.jsとMongoDBは結構はやりな割に、運用実績がすごく少ないようで、その技術の背景など含めてまとめてみました。<br />
※なお、開発回りのことだけ知りたい方はこちらへどうぞ↓<br />
» <a href="http://blog.8maki.jp/2011/01/marketgeek_nodejs_mongodb_development.html">マニアックな金融系サイトをnode.jsとMongoDBで実装してみた（実装編）</a></p>
<h4>node.jsとは何か？</h4>
<p>node.jsは、サーバーサイドJavascriptのフレームワークで、簡単にWebサーバー等を実装することができます。</p>
<p>サーバサイドJavascriptは昔から注目されていましたが、<a href="http://nodejs.org/" target="_blank">node.js</a>の登場で一気にその流れが加速。<br />
理由といえば、こういう類のモノにしては、びっくりするくらい速い！こと。<br />
Google Chromeで採用していたV8をJavascrptエンジンに使っており、スピードUPが測れたとのこと。<br />
いわゆる&#8221;Pythonより速い&#8221;らしいｗ</p>
<p>加えて、昨今HTML5も騒がれていますが、そうなるとサーバーへのリクエストが細分化されますよね？<br />
そうすると非同期で処理するnode.jsはうってつけかも！という流れもあり（WebSocketとか）、今年はnode.jsの年！と言われるようになったのかも。</p>
<p>node.jsに関してはこの記事が詳しいです↓<br />
» <a href="http://www.publickey1.jp/blog/11/2011javascript.html" target="_blank">2011年はサーバサイドJavaScriptの年になる － Publickey</a></p>
<h4>MongoDBとは何か？</h4>
<p><a href="http://www.mongodb.org/" target="_blank">MongoDB</a>とは、いわゆるNoSQL系のDBで、最新DBの中では一番注目されているオープンソースです。<br />
今まで主流のDBであるRDBは、いわゆるExcelのようにまず列を決めてその属性群（スキーマと言う）をもったデータを行として入れていく、というスタイルのものでしたが、NoSQL系のDBではkey（IDのようなもの）でデータを管理し、そのデータの属性（スキーマ）は一定に決めなくてもよい、という柔軟なデータ構造を取れるため各所で使われ始めています。<br />
スキーマレスDBとも言われています。</p>
<p>中でもMongoDBは、KVS（Key Value Store）だけでなく、複雑な検索を行ったり、インデックス張ったり、簡単にスケールさせられたり（サーバー増やしやすい）と、実用にかなった機能をもっているため広まってきています。</p>
<p>ちなみに実用実績としては、ForsquareがMongoDBを採用してるようです。<br />
MongoDBと他のDBとの比較はこの記事が詳しいです↓<br />
» <a href="http://prajwal-tuladhar.net.np/2009/11/15/500/mongodbs-performance-as-compared-to-others-esp-couchdb/" target="_blank">MongoDB’s performance as compared to others</a></p>
<p>また、3月頭にMongoDBの商用サポートを行っている10genのイベントが東京であるらしいので興味ある方はどうぞ。<br />
» <a href="http://www.10gen.com/conferences/mongotokyo2011" target="_blank">Mongo Tokyo</a></p>
<h4>なぜnode.js+MongoDBを使って実装したのか？</h4>
<p>柔軟に金融情報を管理しようとするとスキーマ決めるのって難しいよねーっていう感じと、今後もっとリッチなVisualizationを作っていくためにAjaxとかWebSocketに適してるっぽいのがいいという勘で、MongoDBとnode.jsを選んでみました。</p>
<p>。。。正直あんま理由とかはないですけどねf^^;<br />
ていうか、もともとこういうサイトを作る気合いはあったのですが、ただ技術的には何も新しい・難しいことはないので、だったら勉強がてらやってみよう！というノリでｗ</p>
<p>あと、オープンソースコミュニティにもそろそろ絡んでいきたいなーと思っていて、発展途上のnode.jsとMongoDBは最適だ思ったので。<br />
開発して分かったのですが、まだまだ色々な問題点があるので、随時コミットしていきたい。</p>
<h4>なぜMarketgeekを作ったのか？</h4>
<p>日本のベンチャー界隈も「世界へ出ろ！英語化しろ！」とはやし立てられてますけど、実際世界と日本の違いをまともに話せる人、まともに比較できるリソースがあまりにも少なすぎるかなー、と。<br />
それだと「とりあえず英語化して、海外視察して、ちょっと英語でプレゼンしてみて。」っていう感じで終わってしまう気がする。<br />
そこで、具体的に何を目標にどうアプローチしていけばよいのか、思考のネタになるものを作ってみたかったとです。</p>
<p>加えて、逆に英語圏の人からアジアのベンチャーとかって、中々見えにくいのではないでしょうか？<br />
2バイト文字ばっかだし。<br />
もちろん中国とかシンガポールとかにたくさんVCは進出してきてある程度情報が海を越えてるかもしれませんが、英語で書かれた米メディアに比べて、アジアの英語メディアって圧倒的に少ない。<br />
特に東南アジア。<br />
これからはアジアの時代になると言われていますし、思った以上にニーズがありそうで、かつそれなりのポジションを築けそうだったのでホイホイ作ってみました。</p>
<p>まぁなにより作ってて単純に楽しかったです。<br />
最先端の技術使って、興味のあるマニアックなもの作ってｗ<br />
Naspersって２兆円もあるのか！フヒヒヒヒヒっｗｗｗみたいなｗ</p>
<p>あ、ちなみにNaspersは<a href="http://twitter.com/Anrit" target="_blank">@anrit</a>さんが作ったこの図が凄く分かりやすい。<br />
Zynga、Groupon、Facebookの金の供給元ってすごいですよね。<br />
<a href="http://gyazo.com/2f52ac5d79a78144e58f95f137422b2e.png" target="_blank"><img src="http://gyazo.com/2f52ac5d79a78144e58f95f137422b2e.png" alt="naspers" width="400" style="border:solid 1px #808080;" /></a></p>
<p>とりあえず見てみてください。随時機能拡張予定です。<br />
<a href="http://marketgeek.net/ja/" target="_blank">http://marketgeek.net/ja/</a></p>
<p>あと、要望とかコメントとかあったらtwitterへどうぞ⇒<a href="http://twitter.com/marketgeek_net/" target="_blank">@marketgeek_net</a></p>
<p>技術編はこちら↓<br />
» <a href="http://blog.8maki.jp/2011/01/marketgeek_nodejs_mongodb_development.html">マニアックな金融系サイトをnode.jsとmongoDBで実装してみた（実装編）</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.8maki.jp/2011/01/marketgeek_nodejs_mongodb_outline.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.8maki.jp/2011/01/marketgeek_nodejs_mongodb_outline.html" />
	</item>
		<item>
		<title>GAE専用のフレームワーク「Kay Framework」のチュートリアルを試す</title>
		<link>http://blog.8maki.jp/2010/09/gae-kay-framework-tutorial.html</link>
		<comments>http://blog.8maki.jp/2010/09/gae-kay-framework-tutorial.html#comments</comments>
		<pubDate>Sun, 05 Sep 2010 14:52:36 +0000</pubDate>
		<dc:creator>8maki</dc:creator>
				<category><![CDATA[IT]]></category>
		<category><![CDATA[proposal]]></category>
		<category><![CDATA[エンジニア]]></category>

		<guid isPermaLink="false">http://blog.8maki.jp/?p=756</guid>
		<description><![CDATA[
			
				
			
		
ちょっと大量のデータをやりとりするようなWebアプリケーションのプロトタイプを作って、色々データ分析したくなった。
そこで、ちょちょっとTwitterの分析系アプリを作ろうと思い立って、大量のデータを安価に、簡単にスケールさせられることからGAE（Google App Engine）に手を出した。
実は結構前からGAEを色々いじくってるんだが、いつもpythonのWebフレームワークとして使っているdjango（正式にはジャンゴと読むらしい）がGAEだと結構めんどくさそう。
バージョンも0.9と古いということでうまいやり方を探していいたところ、友人にKay FrameworkなるGAE専用の日本人作フレームワークを教えてもらったので使ってみた。
結論：かなり使いやすい！
Twitter OAuthとの繋ぎこみあたりなんか、デフォルトで仕組みが組み込まれてて、5分くらいで実装できた。
そこまで行くのに、チュートリアルとかいじりつつ、4時間ぐらいか。
&#187; 1. Kay チュートリアル — Kay v0.10.0 documentation
日本人の方が作っているということで日本語ドキュメントもそれなりに整備されていて、かなり扱いやすかったのだが、manage.pyを使わず、Google App Engine Launcherを主に使って嵌った点があったのでまとめる。
1.2.4. GAE にアップロードする
デプロイしてwebを確認したら、下記のようなエラーが出た。
TemplateNotFound: myapp/index.html
どうやら、tenplateファイルをコンパイルする必要があるらしい。
実際、下記のコマンドを実行するとエラーは消えた。
python manage.py preparse_apps
1.7.2. 管理用スクリプト
データベースのマスタデータの挿入などの管理スクリプトの実行をどうするのか迷ったが、普通に下記のようにコマンドを打てば大丈夫。
python manage.py create_categories -h localhost:8080 --no-secure
これは、本番環境でも使える。
localhost:8080 -> xxx.appspot.com
OAuth
さて、実際にTwitter OAuthと連携させる段階。
どうやらKay FrameworkはOpenIDやOAuthにも既に対応しているらしい。
&#187; Kay Framework で認証に Twitter の OAuth を使う方法
この通りにやったら本当にできてしまった。
一瞬。
これから簡単なTwitterアプリを作ろうって人は、Kay Frameworkが激しくオススメ！！
&#187; kay-framework &#8211; Project Hosting on Google Code
※今までメディアブログを意識して文体は丁寧語でしたが、もっと気軽にブログを書きたいと思ったので、ゆるい感じの文体に戻そうかと。
]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.8maki.jp%2F2010%2F09%2Fgae-kay-framework-tutorial.html"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.8maki.jp%2F2010%2F09%2Fgae-kay-framework-tutorial.html&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>ちょっと大量のデータをやりとりするようなWebアプリケーションのプロトタイプを作って、色々データ分析したくなった。<br />
そこで、ちょちょっとTwitterの分析系アプリを作ろうと思い立って、大量のデータを安価に、簡単にスケールさせられることから<a href="http://code.google.com/intl/ja/appengine/" target="_blank">GAE（Google App Engine）</a>に手を出した。</p>
<p>実は結構前からGAEを色々いじくってるんだが、いつもpythonのWebフレームワークとして使っている<a href="http://www.djangoproject.com/" target="_blank">django</a>（正式にはジャンゴと読むらしい）がGAEだと結構めんどくさそう。<br />
バージョンも0.9と古いということでうまいやり方を探していいたところ、友人にKay FrameworkなるGAE専用の日本人作フレームワークを教えてもらったので使ってみた。</p>
<p><strong>結論</strong>：かなり使いやすい！</p>
<p>Twitter OAuthとの繋ぎこみあたりなんか、デフォルトで仕組みが組み込まれてて、5分くらいで実装できた。<br />
そこまで行くのに、チュートリアルとかいじりつつ、4時間ぐらいか。</p>
<p>&raquo; <a href="http://kay-docs-jp.shehas.net/tutorial.html" target="_blank">1. Kay チュートリアル — Kay v0.10.0 documentation</a></p>
<p>日本人の方が作っているということで日本語ドキュメントもそれなりに整備されていて、かなり扱いやすかったのだが、manage.pyを使わず、Google App Engine Launcherを主に使って嵌った点があったのでまとめる。</p>
<h4>1.2.4. GAE にアップロードする</h4>
<p>デプロイしてwebを確認したら、下記のようなエラーが出た。<br />
<code>TemplateNotFound: myapp/index.html</code><br />
どうやら、tenplateファイルをコンパイルする必要があるらしい。<br />
実際、下記のコマンドを実行するとエラーは消えた。</p>
<pre class="brush: bash;">python manage.py preparse_apps</pre>
<h4>1.7.2. 管理用スクリプト</h4>
<p>データベースのマスタデータの挿入などの管理スクリプトの実行をどうするのか迷ったが、普通に下記のようにコマンドを打てば大丈夫。</p>
<pre class="brush: bash;">python manage.py create_categories -h localhost:8080 --no-secure</pre>
<p>これは、本番環境でも使える。<br />
localhost:8080 -> xxx.appspot.com</p>
<h4>OAuth</h4>
<p>さて、実際にTwitter OAuthと連携させる段階。<br />
どうやらKay FrameworkはOpenIDやOAuthにも既に対応しているらしい。</p>
<p>&raquo; <a href="http://d.hatena.ne.jp/griefworker/20100524/kay_framework_twitter_oauth" target="_blank">Kay Framework で認証に Twitter の OAuth を使う方法</a></p>
<p>この通りにやったら本当にできてしまった。<br />
一瞬。</p>
<p>これから簡単なTwitterアプリを作ろうって人は、Kay Frameworkが激しくオススメ！！<br />
&raquo; <a href="http://code.google.com/p/kay-framework/" target="_blank">kay-framework &#8211; Project Hosting on Google Code</a></p>
<p>※今までメディアブログを意識して文体は丁寧語でしたが、もっと気軽にブログを書きたいと思ったので、ゆるい感じの文体に戻そうかと。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.8maki.jp/2010/09/gae-kay-framework-tutorial.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.8maki.jp/2010/09/gae-kay-framework-tutorial.html" />
	</item>
		<item>
		<title>今のiPadでできること・できないこと２</title>
		<link>http://blog.8maki.jp/2010/05/what-can-you-dofor-daily-tasks-by-ipad2.html</link>
		<comments>http://blog.8maki.jp/2010/05/what-can-you-dofor-daily-tasks-by-ipad2.html#comments</comments>
		<pubDate>Thu, 20 May 2010 14:32:22 +0000</pubDate>
		<dc:creator>8maki</dc:creator>
				<category><![CDATA[IT]]></category>
		<category><![CDATA[proposal]]></category>
		<category><![CDATA[サービス]]></category>
		<category><![CDATA[ipad]]></category>

		<guid isPermaLink="false">http://blog.8maki.jp/?p=701</guid>
		<description><![CDATA[
			
				
			
		
先日の記事、「今のiPadでできること・できないこと」が割と好評だったので、書き漏らしを追記します。
なんか半分以上、アプリの紹介になってしまいましたが・・・f^^;
・画面の向き固定
・デュアルディスプレイ化
・日本の雑誌の購読
・リモートデスクトップ/Linuxへのアクセス
画面の向きの固定

地味に知ってる人が少ない画面の向きの固定機能。
右側の側面に、音量調節スイッチの上にHOLDスイッチが付いてます。
iPhoneではHOLDができないため、寝転がると向きを変えてしまってすげー不便、と言う声は良く聞いていたのですが、iPadでは解決しています。
デュアルディスプレイ化

iPadをディスプレイとして使っちゃおうという使い方。
iDisplayというアプリを使えば、PCとWifiを通じて外部ディスプレイとして使うことができるようです。
Gizmodeで詳細なレビューがされています。
4月初旬段階ではまだまだバグが多いようですが、今ならもう直ってるかな？
あと、AirDisplayという拡張ディスプレイ用のアプリも、今週中くらいに登場予定。
日本の雑誌の購読

ちょうど昨日リリースされたマガストアというアプリが凄いです。
日本の雑誌をiPadでダウンロードして、読むことができます。
値段はだいたい、本誌の100円引きくらい。
AERAや週刊Newsweek、F1速報というマニアックな雑誌も扱っています。
中身はというと、雑誌のデータをまんま画像データとして入れた感じ。
見開きなどは見れませんが、いちいち本屋に行かずに買え、どこでも読むことができるので重宝しそうです。
リモートデスクトップ/Linuxへのアクセス

LogMeIn Ignitionというアプリを使えば、会社や家のPCのデスクトップにアクセスできるようになります。
￥3,500と割高ですが、かなり人気のアプリのようです。
また、iSSHというアプリは、LinuxへのSSH接続機能を提供しています。
これらを使えば、開発関連のタスクをすべてiPadで行うことができるようになるかもしれませんね。
もちろん、iPadのキータッチ入力だとプログラミングはしにくいので、BlueToothの外付けキーボードの接続をオススメしますが！
]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.8maki.jp%2F2010%2F05%2Fwhat-can-you-dofor-daily-tasks-by-ipad2.html"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.8maki.jp%2F2010%2F05%2Fwhat-can-you-dofor-daily-tasks-by-ipad2.html&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>先日の記事、「<a href="http://blog.8maki.jp/2010/05/what-can-you-dofor-daily-tasks-by-ipad.html">今のiPadでできること・できないこと</a>」が割と好評だったので、書き漏らしを追記します。</p>
<p>なんか半分以上、アプリの紹介になってしまいましたが・・・f^^;</p>
<p>・<a href="#ipad2-1">画面の向き固定</a><br />
・<a href="#ipad2-2">デュアルディスプレイ化</a><br />
・<a href="#ipad2-3">日本の雑誌の購読</a><br />
・<a href="#ipad2-4">リモートデスクトップ/Linuxへのアクセス</a></p>
<h4 id="ipad2-1">画面の向きの固定</h4>
<p><img src="http://blog.8maki.jp/wp-content/uploads/2010/05/ipad2-hold.jpg" alt="ipad2-hold" title="ipad2-hold" width="328" height="300" class="aligncenter size-full wp-image-709" /></p>
<p>地味に知ってる人が少ない画面の向きの固定機能。<br />
右側の側面に、音量調節スイッチの上にHOLDスイッチが付いてます。<br />
iPhoneではHOLDができないため、寝転がると向きを変えてしまってすげー不便、と言う声は良く聞いていたのですが、iPadでは解決しています。</p>
<h4 id="ipad2-2">デュアルディスプレイ化</h4>
<p><img src="http://blog.8maki.jp/wp-content/uploads/2010/05/ipad2-dual.jpg" alt="ipad2-dual" title="ipad2-dual" width="480" height="314" class="aligncenter size-full wp-image-704" /></p>
<p>iPadをディスプレイとして使っちゃおうという使い方。<br />
<a href="http://itunes.apple.com/jp/app/idisplay/id363500805?mt=8" target="_blank">iDisplay</a>というアプリを使えば、PCとWifiを通じて外部ディスプレイとして使うことができるようです。<br />
Gizmodeで詳細な<a href="http://www.gizmodo.jp/2010/04/idisplayipadmac.html" target="_blank">レビュー</a>がされています。<br />
4月初旬段階ではまだまだバグが多いようですが、今ならもう直ってるかな？<br />
あと、<a href="http://lifehacking.jp/2010/05/air-display/" target="_blank">AirDisplay</a>という拡張ディスプレイ用のアプリも、今週中くらいに登場予定。</p>
<h4 id="ipad2-3">日本の雑誌の購読</h4>
<p><img src="http://blog.8maki.jp/wp-content/uploads/2010/05/ipad2-maga.PNG" alt="ipad2-maga" title="ipad2-maga" width="470" height="300" class="aligncenter size-full wp-image-705" /></p>
<p>ちょうど昨日リリースされた<a href="http://www.magastore.jp/" target="_blank">マガストア</a>というアプリが凄いです。<br />
日本の雑誌をiPadでダウンロードして、読むことができます。<br />
値段はだいたい、本誌の100円引きくらい。<br />
<a href="http://www.aera-net.jp/" target="_blank">AERA</a>や<a href="http://newsweekjapan.jp/" target="_blank">週刊Newsweek</a>、<a href="http://www.f1sokuho.com/" target="_blank">F1速報</a>というマニアックな雑誌も扱っています。</p>
<p>中身はというと、雑誌のデータをまんま画像データとして入れた感じ。<br />
見開きなどは見れませんが、いちいち本屋に行かずに買え、どこでも読むことができるので重宝しそうです。</p>
<h4 ipad="ipad2-4">リモートデスクトップ/Linuxへのアクセス</h4>
<p><img src="http://blog.8maki.jp/wp-content/uploads/2010/05/ipad2-remote.jpg" alt="ipad2-remote" title="ipad2-remote" width="419" height="300" class="aligncenter size-full wp-image-710" /></p>
<p><a href="http://itunes.apple.com/jp/app/logmein-ignition/id299616801?mt=8#" target="_blank">LogMeIn Ignition</a>というアプリを使えば、会社や家のPCのデスクトップにアクセスできるようになります。<br />
￥3,500と割高ですが、かなり人気のアプリのようです。</p>
<p>また、<a href="http://itunes.apple.com/jp/app/issh-ssh-vnc-console/id287765826?mt=8" target="_blank">iSSH</a>というアプリは、LinuxへのSSH接続機能を提供しています。<br />
これらを使えば、開発関連のタスクをすべてiPadで行うことができるようになるかもしれませんね。<br />
もちろん、iPadのキータッチ入力だとプログラミングはしにくいので、BlueToothの外付けキーボードの接続をオススメしますが！</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.8maki.jp/2010/05/what-can-you-dofor-daily-tasks-by-ipad2.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.8maki.jp/2010/05/what-can-you-dofor-daily-tasks-by-ipad2.html" />
	</item>
		<item>
		<title>今のiPadでできること・できないこと</title>
		<link>http://blog.8maki.jp/2010/05/what-can-you-dofor-daily-tasks-by-ipad.html</link>
		<comments>http://blog.8maki.jp/2010/05/what-can-you-dofor-daily-tasks-by-ipad.html#comments</comments>
		<pubDate>Sun, 16 May 2010 23:11:07 +0000</pubDate>
		<dc:creator>8maki</dc:creator>
				<category><![CDATA[IT]]></category>
		<category><![CDATA[proposal]]></category>
		<category><![CDATA[サービス]]></category>
		<category><![CDATA[ipad]]></category>

		<guid isPermaLink="false">http://blog.8maki.jp/?p=668</guid>
		<description><![CDATA[
			
				
			
		
mixi日記には書きましたが、4/26～5/1まで、WWW2010という学会に参加するためにアメリカに行っておりました。
ついでながら、近くにApple Storeもあったため、iPadを何個か買ってきました。
一番初めに使った衝撃が、「ノートPCを持ち歩かなくて済む！」という印象でした。
ちょうど2週間くらい使ってみて、本当にノートPCの代替として使えるのか、現状何ができて何ができないのか、タスク内容に応じてまとめてみました。
※なお、画像は全てiPad本体でキャプチャしたものです。
・タッチキー入力
・メール/カレンダーチェック
・Webブラウジング
・本・雑誌・新聞
・iPadアプリ
・音声通話
・カメラ
・外部出力
・その他
タッチキー入力
iPhoneみたいに結構めんどいのではないか？というのが、懸念として大きかったのですが、案外入力しやすいです。
というより、横に倒してキーボードを大きくすると、本当に普通のキーボードの8割くらいの速度で打てます。
縦の場合、持って両親指二本でタイプする感じですね。

メールを打ったり、メモを書いたりというときにはあまり不自由しません。
ただ、プログラミングといった細かい文章作業は難しいように思えます。
また、十字キーもないので、文章の途中選択、コピー＆ペーストはiPhoneと同じくめんどい。。。
メール/カレンダーチェック
・メール
メールのリーダーもデフォルトで入ってるものがあります。
ローカルに保存したい（オフラインでも見たい）場合はこちら。
しかし個人的に、圧倒的にGmailをWebで見た方が使いやすい。
メールのスレッドもちゃんと折りたためたり、開いたりできますし。
メール操作はほとんど不満がありません。

・カレンダー
こちらは逆に、Web版のGoogle CalendarのUIはクソでした。
なぜか、週での表示ができない。
カレンダーはiPad付属のカレンダーを使っています。
こちらのテクニック↓を使えば、複数のカレンダーを表示できます。
カレンダーも不満無し。
&#187; iPadで複数のGoogleカレンダーを表示させる方法

Webブラウジング
基本的に、普通のWebブラウザと変わらない感じです。
ただ、タブ（？）が9個までしか開かず、それ以上開こうとすると上書きされてしまうので注意が必要。
操作性、表示は全く問題ありません。
縦で表示するといくらか縮小されますが、横で表示するとほとんどのサイトが等倍で表示されます。

また、PCで見ていて「あとで読む」記事をiPadに送る、という操作も便利です。
Evernoteでそういうプロセスがあるそうですが、完全にオフラインの状態だと中々開かなかったりしてちょっと不満。
そこで私は、pdfdownloadというサイトで、指定のサイトをPDF化してiPadに入れています。
結構めんどいっちゃめんどいですが、じっくり読めるので長文ブログやニュースは全部PDFに落としています。
本・雑誌・新聞
iBookやKindleアプリを使って、英語の本は基本的に読めます。
PDF化した本も、PDFリーダーアプリを使って読むことができます。
また、Wall Street JournalやTime、New York Timesなど、メジャーなアメリカの雑誌も購読することができます。
日本の場合、i文庫というアプリを使って青空文庫という、著作権切れの本を自由に読むことができます。
日本の雑誌はまだ見たことがありませんが、新聞では、産経新聞がiPhoneアプリを出ていて、それを2倍拡大することで結構読みやすくなっています。
追記： 日本の雑誌も読めるようになりました。 &#187; 今のiPadでできること・できないこと２

iPadアプリ
現状あまり良質なアプリがあるとは言えない状況です。
電子書籍（雑誌）、ゲーム、メモ帳（手書き可能）などがやはり主流となっています。
また、ややこしいことに、iPadアプリをiTunes経由で見るには米国アカウントが必要で、さらに米国アカウントだとクレジットカードを登録できないため、米国でしか見れない有料アプリは買えない状態です。
例えば、各ドキュメントアプリのKeynoteやNumbers（Excelのような表計算アプリ）も米国でしか見れないため、落とせない。。。
ただ、普通の有料アプリは、日本のアカウントでも検索してダウンロードすることができるので、重宝しています。
この問題は、日本発売と同時に解決されることでしょう。
こちらのサイトから、各カテゴリ毎のアプリランキングを見ることができます。
&#187; iPadアプリのカテゴリ別ランキングリスト &#8211; もとまか日記
音声通話
iPadには電話機能は付いていませんが、マイクとスピーカーが内蔵されているので、Skypeアプリ（iPhoneアプリ）を使えば不自由なく音声通話も行えます。
この際なので、Skypeのクレジットも買ってしまいました。
20円/分くらいで携帯電話にも通話ができます。
ただ注意が必要なのが、3G回線ではSkypeは使えないようです。
&#187; Skype &#8211; Skype 日本語ブログ &#8211; Skype for iPhoneの3G通話対応について
カメラ
標準装備はされていません。
なんか上部にMacBookと同じタイプのカメラっぽいのが付いているんですが・・・
いずれファームウェアかなんかがUpdateされると使えるようになるのか？
追記: 輝度センサーらしいとのこと。
ちなみに、Camera for iPadというアプリを使えば、iPhoneで取った写真・動画を無線経由でiPadに表示する、ということはできるみたいです。
外部出力
iPadのオプションツールとして、VGAアダプタがあります。
要はiPad内のコンテンツを、出力するために必要なコネクタです。
ただ、出力には注意が必要。
基本的に表示できるコンテンツは、以下に限られるようです。
　・ビデオ、Youtube、Safariで表示しているビデオ
　・写真（スライドショー）
　・Keynote
　・Safari上のWebページ（アプリ使用）
&#187; iPad：iPad Dock Connector &#8211; VGA アダプタの互換性について
その他
・ドキュメント編集：
OfficeのWord、Excel、Powerpointのようなアプリを、AppleがPages、Numbers、Keynoteというアプリで、それぞれ$10くらいで販売しています。
ただ、アカウントの問題からまだ購入できていません。
Google Docsは問題なく扱えます。
・印刷
デフォルトの機能としては、まだ無いようです。
下記記事を見るといずれ実装されるみたいですが・・・
とは言え、ネットワーク経由で印刷できるアプリはいくつかあるみたいです。
&#187; アップルのS・ジョブズ氏、「iPad」への印刷機能実装を肯定か&#8211;米報道
・ラジオ
radikoというiPhone用のアプリを使って、FMラジオも聞くことができます。
バックグラウンドでの再生もできて便利。（Safariのストリーミングページを立ち上げる）
まだまだ未知数なところが多いiPad。
日本発売が楽しみですね。
続きを書きました→今のiPadでできること・できないこと２
]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.8maki.jp%2F2010%2F05%2Fwhat-can-you-dofor-daily-tasks-by-ipad.html"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.8maki.jp%2F2010%2F05%2Fwhat-can-you-dofor-daily-tasks-by-ipad.html&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>mixi日記には書きましたが、4/26～5/1まで、<a href="http://www2010.org/www/" target="_blank">WWW2010</a>という学会に参加するためにアメリカに行っておりました。<br />
ついでながら、近くにApple Storeもあったため、iPadを何個か買ってきました。</p>
<p>一番初めに使った衝撃が、「ノートPCを持ち歩かなくて済む！」という印象でした。<br />
ちょうど2週間くらい使ってみて、本当にノートPCの代替として使えるのか、現状何ができて何ができないのか、タスク内容に応じてまとめてみました。</p>
<p>※なお、画像は全てiPad本体でキャプチャしたものです。</p>
<p>・<a href="#ipad1">タッチキー入力</a><br />
・<a href="#ipad2">メール/カレンダーチェック</a><br />
・<a href="#ipad3">Webブラウジング</a><br />
・<a href="#ipad4">本・雑誌・新聞</a><br />
・<a href="#ipad5">iPadアプリ</a><br />
・<a href="#ipad6">音声通話</a><br />
・<a href="#ipad7">カメラ</a><br />
・<a href="#ipad8">外部出力</a><br />
・<a href="#ipad9">その他</a></p>
<h4 id="ipad1">タッチキー入力</h4>
<p>iPhoneみたいに結構めんどいのではないか？というのが、懸念として大きかったのですが、案外入力しやすいです。<br />
というより、横に倒してキーボードを大きくすると、本当に普通のキーボードの8割くらいの速度で打てます。<br />
縦の場合、持って両親指二本でタイプする感じですね。</p>
<p><img src="http://blog.8maki.jp/wp-content/uploads/2010/05/ipad-key.PNG" alt="ipad-key" title="ipad-key" width="536" height="300" class="aligncenter size-full wp-image-672" /></p>
<p>メールを打ったり、メモを書いたりというときにはあまり不自由しません。<br />
ただ、プログラミングといった細かい文章作業は難しいように思えます。<br />
また、十字キーもないので、文章の途中選択、コピー＆ペーストはiPhoneと同じくめんどい。。。</p>
<h4 id="ipad2">メール/カレンダーチェック</h4>
<p>・メール<br />
メールのリーダーもデフォルトで入ってるものがあります。<br />
ローカルに保存したい（オフラインでも見たい）場合はこちら。</p>
<p>しかし個人的に、圧倒的にGmailをWebで見た方が使いやすい。<br />
メールのスレッドもちゃんと折りたためたり、開いたりできますし。<br />
メール操作はほとんど不満がありません。</p>
<p><img src="http://blog.8maki.jp/wp-content/uploads/2010/05/ipad-mail.PNG" alt="ipad-mail" title="ipad-mail" width="590" height="218" class="aligncenter size-full wp-image-679" /></p>
<p>・カレンダー<br />
こちらは逆に、Web版のGoogle CalendarのUIはクソでした。<br />
なぜか、週での表示ができない。</p>
<p>カレンダーはiPad付属のカレンダーを使っています。<br />
こちらのテクニック↓を使えば、複数のカレンダーを表示できます。<br />
カレンダーも不満無し。<br />
&raquo; <a href="http://www.lifehacker.jp/2010/04/100406ipadglcalendar.html" target="_blank">iPadで複数のGoogleカレンダーを表示させる方法</a></p>
<p><img src="http://blog.8maki.jp/wp-content/uploads/2010/05/ipad-cal.PNG" alt="ipad-cal" title="ipad-cal" width="590" height="218" class="aligncenter size-full wp-image-680" /></p>
<h4 id="ipad3">Webブラウジング</h4>
<p>基本的に、普通のWebブラウザと変わらない感じです。<br />
ただ、タブ（？）が9個までしか開かず、それ以上開こうとすると上書きされてしまうので注意が必要。<br />
操作性、表示は全く問題ありません。<br />
縦で表示するといくらか縮小されますが、横で表示するとほとんどのサイトが等倍で表示されます。</p>
<p><img src="http://blog.8maki.jp/wp-content/uploads/2010/05/ipad-safari.PNG" alt="ipad-safari" title="ipad-safari" width="291" height="218" class="aligncenter size-full wp-image-689" /></p>
<p>また、PCで見ていて「あとで読む」記事をiPadに送る、という操作も便利です。<br />
Evernoteでそういうプロセスがあるそうですが、完全にオフラインの状態だと中々開かなかったりしてちょっと不満。<br />
そこで私は、<a href="http://www.pdfdownload.org/index.html" target="_blank">pdfdownload</a>というサイトで、指定のサイトをPDF化してiPadに入れています。<br />
結構めんどいっちゃめんどいですが、じっくり読めるので長文ブログやニュースは全部PDFに落としています。</p>
<h4 id="ipad4" style="clear:both;">本・雑誌・新聞</h4>
<p>iBookやKindleアプリを使って、英語の本は基本的に読めます。<br />
PDF化した本も、PDFリーダーアプリを使って読むことができます。<br />
また、Wall Street JournalやTime、New York Timesなど、メジャーなアメリカの雑誌も購読することができます。</p>
<p>日本の場合、<a href="http://ipn.sakura.ne.jp/ibunko/" target="_blank">i文庫</a>というアプリを使って青空文庫という、著作権切れの本を自由に読むことができます。<br />
日本の雑誌はまだ見たことがありませんが、新聞では、産経新聞がiPhoneアプリを出ていて、それを2倍拡大することで結構読みやすくなっています。<br />
追記： 日本の雑誌も読めるようになりました。 &raquo; <a href="http://blog.8maki.jp/2010/05/what-can-you-dofor-daily-tasks-by-ipad2.html#ipad2-3">今のiPadでできること・できないこと２</a></p>
<p><img src="http://blog.8maki.jp/wp-content/uploads/2010/05/ipad-mag.PNG" alt="ipad-mag" title="ipad-mag" width="489" height="300" class="aligncenter size-full wp-image-687" /></p>
<h4 id="ipad5">iPadアプリ</h4>
<p>現状あまり良質なアプリがあるとは言えない状況です。<br />
電子書籍（雑誌）、ゲーム、メモ帳（手書き可能）などがやはり主流となっています。</p>
<p>また、ややこしいことに、iPadアプリをiTunes経由で見るには米国アカウントが必要で、さらに米国アカウントだとクレジットカードを登録できないため、米国でしか見れない有料アプリは買えない状態です。<br />
例えば、各ドキュメントアプリのKeynoteやNumbers（Excelのような表計算アプリ）も米国でしか見れないため、落とせない。。。<br />
ただ、普通の有料アプリは、日本のアカウントでも検索してダウンロードすることができるので、重宝しています。<br />
この問題は、日本発売と同時に解決されることでしょう。</p>
<p>こちらのサイトから、各カテゴリ毎のアプリランキングを見ることができます。<br />
&raquo; <a href="http://d.hatena.ne.jp/moto_maka/20100416/1271361403" target="_blank">iPadアプリのカテゴリ別ランキングリスト &#8211; もとまか日記</a></p>
<h4 id="ipad6">音声通話</h4>
<p>iPadには電話機能は付いていませんが、マイクとスピーカーが内蔵されているので、<a href="http://itunes.apple.com/app/skype/id304878510?mt=8" target="_blank">Skypeアプリ（iPhoneアプリ）</a>を使えば不自由なく音声通話も行えます。<br />
この際なので、Skypeのクレジットも買ってしまいました。<br />
20円/分くらいで携帯電話にも通話ができます。<br />
ただ注意が必要なのが、3G回線ではSkypeは使えないようです。</p>
<p>&raquo; <a href="http://blogs.skype.com/ja/2010/02/04/skype_for_iphone_over_3g.html" target="_blank">Skype &#8211; Skype 日本語ブログ &#8211; Skype for iPhoneの3G通話対応について</a></p>
<h4 id="ipad7">カメラ</h4>
<p>標準装備はされていません。<br />
なんか上部にMacBookと同じタイプのカメラっぽいのが付いているんですが・・・<br />
いずれファームウェアかなんかがUpdateされると使えるようになるのか？<br />
追記: 輝度センサーらしいとのこと。</p>
<p>ちなみに、<a href="http://itunes.apple.com/us/app/camera-for-ipad/id366129244?mt=8" target="_blank">Camera for iPad</a>というアプリを使えば、iPhoneで取った写真・動画を無線経由でiPadに表示する、ということはできるみたいです。</p>
<h4 id="ipad8">外部出力</h4>
<p><iframe src="http://rcm.amazon.com/e/cm?lt1=_blank&#038;bc1=000000&#038;IS2=1&#038;bg1=FFFFFF&#038;fc1=000000&#038;lc1=0000FF&#038;t=anarepforweb-20&#038;o=1&#038;p=8&#038;l=as1&#038;m=amazon&#038;f=ifr&#038;md=10FE9736YVPPT7A0FBG2&#038;asins=B003CGOTJW" style="width:120px;height:240px;float:right" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>iPadのオプションツールとして、VGAアダプタがあります。<br />
要はiPad内のコンテンツを、出力するために必要なコネクタです。<br />
ただ、出力には注意が必要。<br />
基本的に表示できるコンテンツは、以下に限られるようです。</p>
<p>　・ビデオ、Youtube、Safariで表示しているビデオ<br />
　・写真（スライドショー）<br />
　・<a href="http://www.apple.com/jp/ipad/features/keynote.html" target="_blank">Keynote</a><br />
　・Safari上のWebページ（<a href="http://itunes.apple.com/app/expedition-the-vga-out-web/id369305234?mt=8" target="_blank">アプリ</a>使用）</p>
<p>&raquo; <a href="http://support.apple.com/kb/HT4108?viewlocale=ja_JP" target="_blank">iPad：iPad Dock Connector &#8211; VGA アダプタの互換性について</a></p>
<h4 id="ipad9">その他</h4>
<p>・ドキュメント編集：<br />
OfficeのWord、Excel、Powerpointのようなアプリを、AppleがPages、Numbers、Keynoteというアプリで、それぞれ$10くらいで販売しています。<br />
ただ、アカウントの問題からまだ購入できていません。<br />
Google Docsは問題なく扱えます。</p>
<p>・印刷<br />
デフォルトの機能としては、まだ無いようです。<br />
下記記事を見るといずれ実装されるみたいですが・・・<br />
とは言え、ネットワーク経由で印刷できるアプリはいくつかあるみたいです。<br />
&raquo; <a href="http://japan.cnet.com/news/tech/story/0,2000056025,20413186,00.htm" target="_blank">アップルのS・ジョブズ氏、「iPad」への印刷機能実装を肯定か&#8211;米報道</a></p>
<p>・ラジオ<br />
<a href="http://radiko.jp/download/" target="_blank">radiko</a>というiPhone用のアプリを使って、FMラジオも聞くことができます。<br />
バックグラウンドでの再生もできて便利。（Safariのストリーミングページを立ち上げる）</p>
<p>まだまだ未知数なところが多いiPad。<br />
日本発売が楽しみですね。</p>
<p>続きを書きました→<a href="http://blog.8maki.jp/2010/05/what-can-you-dofor-daily-tasks-by-ipad2.html">今のiPadでできること・できないこと２</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.8maki.jp/2010/05/what-can-you-dofor-daily-tasks-by-ipad.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.8maki.jp/2010/05/what-can-you-dofor-daily-tasks-by-ipad.html" />
	</item>
		<item>
		<title>グラフだけじゃない、Data Visualizationフレームワーク集</title>
		<link>http://blog.8maki.jp/2010/01/javascript-data-visualization-library-not-only-for-charts.html</link>
		<comments>http://blog.8maki.jp/2010/01/javascript-data-visualization-library-not-only-for-charts.html#comments</comments>
		<pubDate>Mon, 18 Jan 2010 23:56:01 +0000</pubDate>
		<dc:creator>8maki</dc:creator>
				<category><![CDATA[IT]]></category>
		<category><![CDATA[proposal]]></category>
		<category><![CDATA[survey]]></category>
		<category><![CDATA[テクノロジー]]></category>
		<category><![CDATA[デザイン]]></category>
		<category><![CDATA[Data Visualization]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Information Presentation]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://blog.8maki.jp/?p=585</guid>
		<description><![CDATA[
			
				
			
		
(8 free Data Visualization frameworks not only for charts [en])
相変わらずData Visualization関係で調査・開発を行っているのですが、その中でJavascriptのライブラリ・フレームワークを探す時間も多いです。
» 20 Fresh JavaScript Data Visualization Libraries
上記記事のようにまとめ記事が結構あって助かるのですが、ほとんどがCharts（グラフ）のライブラリなんですよね。Chartsも線グラフか、棒グラフか、円グラフか、、、みたいにライブラリ化される主要なグラフは8種類くらいしかなく、面白くない。
適切なデータに対して適切なVisualを関連付けるわけですから、もっと多くのVisualが考えられてもいいはず！
そこでChartsに限らない、もっと根本的にData Visualizationを扱っている有名どころのフレームワークをリストアップしてみました。
SIMILE Widgets Exhibit

MITのメディアラボがリリースしているFaceted Search用フレームワークです。HTMLを拡張したテンプレート言語を用いて、簡単にFaceted Searchと、検索結果のリッチなVisualizeを可能にしています。現在、リスト、テーブル、地図、Timeline、TimeplotといったVisualに対応しています。タブなどでVisualを切り替えられるので、ユーザーの目的にマッチした検索機能を提供することができます。
SIMILE Widgetsでは、他にもTimelineや、Timeplot、Runway(Coverflow)などのVisualもAPIとして個別に提供しています。
» SIMILE Widgets Exhibit &#8211; US President Search DEMO
ProtoVis

ProtoVisはStanfordのVisualizationフレームワークです。これは巷のライブラリと違い、グラフや地図、といった単位を1つの単位として扱わず、線や面、点といったもっと細かい部品単位でVisualを作成しています。どちらかというとProcessing.jsに近いかも。たくさんのDEMOが載っているので、それらを参考にかなり自由度の高いVisualを作成することができます。
» ProtoVis DEMO
Prefuse Flare (Flash)

Prefuse FlareもData Visualizationのフレームワークとして有名です。Prefuseは、Javaのフレームワークでしたが、今回Flashに対応しました。こちらも豊富なVisualを用意しており、SIMILE同様データ構造をしっかり設計しているので柔軟性が高く、Visualの切り替えや様々なVisualを拡張することができるようになっています。
また、Flashならでわの気持ちのいいインタラクションも高評価です。
» Flare DEMO
Style Chart

こちらは、javascriptでVisualのリクエストを投げるとサーバー側で画像を生成し、それを表示するというフレームワークです。Galleryを見る限りかなり豊富なVisualを扱えるようです。画像だからってアニメーションやアクションが行えないわけではなく、そこにもちゃんと対応しています。扱っているライブラリが少ない、レーダーチャート（スパイダーチャート）も用意している点がいいです。
» Style Chart Editor(DEMO)
» Style Chart Gallery
CanViz

有名なVisualizationフレームワークであるGraphvizのJavascript版です。主にグラフ構造のデータを描画するのに適しています。ただ、DEMOを見る限り、アニメーションやイベントの設定ができないようで、本当にVisualizeのためだけのフレームワークのようです。
» CanViz DEMO
Axiis (Flex)

こちらはAdobe FlexのVisualizationフレームワークです。インタラクティブなアクションがかなりリッチに作りこまれています。下記のBrowser Statisticsは一部で話題になりましたね。かなり自由度の高いフレームワークのようです。
» Axiis &#8211; Browser Statistics DEMO
Infovis

こちらもグラフ構造のデータ描画ライブラリとして有名です。フレームワークではないので個別のVisualを利用する形になります。グラフ構造しか扱えないのですが、この手のライブラリとしては珍しく、Weighted Graph（ノード間のパスに重みが付いている）/Directed Graph（パスに方向がある）、の描画にも対応しています。現時点で5種類のグラフ系、ツリー系のVisualがありますが、どれもよくできています。
» Infovis DEMO
RGraph
番外ですが、HTML5用のグラフ生成ライブラリも登場しています。HTML5なのでまだまだ本格導入は難しいかもしれませんが、相当クオリティ高く仕上がっており、今後が楽しみなライブラリです。
» RGraph DEMO
]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.8maki.jp%2F2010%2F01%2Fjavascript-data-visualization-library-not-only-for-charts.html"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.8maki.jp%2F2010%2F01%2Fjavascript-data-visualization-library-not-only-for-charts.html&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>(<a href="http://analyst.8maki.jp/2010/01/20/data-visualization-frameworks-not-only-for-charts/" target="_blank">8 free Data Visualization frameworks not only for charts</a> [en])</p>
<p>相変わらずData Visualization関係で調査・開発を行っているのですが、その中でJavascriptのライブラリ・フレームワークを探す時間も多いです。</p>
<p>» <a href="http://sixrevisions.com/javascript/20-fresh-javascript-data-visualization-libraries/" target="_blank">20 Fresh JavaScript Data Visualization Libraries</a></p>
<p>上記記事のようにまとめ記事が結構あって助かるのですが、ほとんどがCharts（グラフ）のライブラリなんですよね。Chartsも線グラフか、棒グラフか、円グラフか、、、みたいにライブラリ化される主要なグラフは8種類くらいしかなく、面白くない。<br />
適切なデータに対して適切なVisualを関連付けるわけですから、もっと多くのVisualが考えられてもいいはず！</p>
<p>そこでChartsに限らない、もっと根本的にData Visualizationを扱っている有名どころのフレームワークをリストアップしてみました。</p>
<h4><a href="http://www.simile-widgets.org/" target="_blank">SIMILE Widgets Exhibit</a></h4>
<p><img class="aligncenter size-full wp-image-589" title="dv-js-library-simile" src="http://blog.8maki.jp/wp-content/uploads/2010/01/dv-js-library-simile.png" alt="dv-js-library-simile" width="550" height="260" /></p>
<p>MITのメディアラボがリリースしているFaceted Search用フレームワークです。HTMLを拡張したテンプレート言語を用いて、簡単にFaceted Searchと、検索結果のリッチなVisualizeを可能にしています。現在、リスト、テーブル、地図、Timeline、TimeplotといったVisualに対応しています。タブなどでVisualを切り替えられるので、ユーザーの目的にマッチした検索機能を提供することができます。</p>
<p>SIMILE Widgetsでは、他にも<a href="http://www.simile-widgets.org/timeline/" target="_blank">Timeline</a>や、<a href="http://www.simile-widgets.org/timeplot/" target="_blank">Timeplot</a>、<a href="http://www.simile-widgets.org/runway/" target="_blank">Runway(Coverflow)</a>などのVisualもAPIとして個別に提供しています。</p>
<p>» <a href="http://www.simile-widgets.org/exhibit/examples/presidents/presidents.html" target="_blank">SIMILE Widgets Exhibit &#8211; US President Search DEMO</a></p>
<h4><a href="http://vis.stanford.edu/protovis/" target="_blank">ProtoVis</a></h4>
<p><img class="aligncenter size-full wp-image-588" title="dv-js-library-protovis" src="http://blog.8maki.jp/wp-content/uploads/2010/01/dv-js-library-protovis.png" alt="dv-js-library-protovis" width="550" height="260" /></p>
<p>ProtoVisはStanfordのVisualizationフレームワークです。これは巷のライブラリと違い、グラフや地図、といった単位を1つの単位として扱わず、線や面、点といったもっと細かい部品単位でVisualを作成しています。どちらかというと<a href="http://processingjs.org/" target="_blank">Processing.js</a>に近いかも。たくさんのDEMOが載っているので、それらを参考にかなり自由度の高いVisualを作成することができます。</p>
<p>» <a href="http://vis.stanford.edu/protovis/ex/" target="_blank">ProtoVis DEMO</a></p>
<h4><a href="http://flare.prefuse.org/" target="_blank">Prefuse Flare (Flash)</a></h4>
<p><img class="aligncenter size-full wp-image-591" title="dv-js-library-prefuse" src="http://blog.8maki.jp/wp-content/uploads/2010/01/dv-js-library-prefuse.png" alt="dv-js-library-prefuse" width="550" height="261" /></p>
<p><a href="http://flare.prefuse.org/" target="_blank">Prefuse Flare</a>もData Visualizationのフレームワークとして有名です。<a href="http://prefuse.org/" target="_blank">Prefuse</a>は、Javaのフレームワークでしたが、今回Flashに対応しました。こちらも豊富なVisualを用意しており、SIMILE同様データ構造をしっかり設計しているので柔軟性が高く、Visualの切り替えや様々なVisualを拡張することができるようになっています。</p>
<p>また、Flashならでわの気持ちのいいインタラクションも高評価です。</p>
<p>» <a href="http://flare.prefuse.org/demo" target="_blank">Flare DEMO</a></p>
<h4><a href="hhttp://chart.inetsoft.com/" target="_blank">Style Chart</a></h4>
<p><img style="display: block; margin-left: auto; margin-right: auto; border: 0px initial initial;" title="dv-js-library-style-charts" src="http://blog.8maki.jp/wp-content/uploads/2010/01/dv-js-library-style-charts.png" alt="dv-js-library-style-charts" width="550" height="260" /></p>
<p>こちらは、javascriptでVisualのリクエストを投げるとサーバー側で画像を生成し、それを表示するというフレームワークです。Galleryを見る限りかなり豊富なVisualを扱えるようです。画像だからってアニメーションやアクションが行えないわけではなく、そこにもちゃんと対応しています。扱っているライブラリが少ない、<a href="http://chart.inetsoft.com/gallery/leSHhADy.png" target="_blank">レーダーチャート（スパイダーチャート）</a>も用意している点がいいです。</p>
<p>» <a href="http://chart.inetsoft.com/editor.html" target="_blank">Style Chart Editor(DEMO)</a><br />
» <a href="http://chart.inetsoft.com/gallery.html" target="_blank">Style Chart Gallery</a></p>
<h4><a href="http://code.google.com/p/canviz/" target="_blank">CanViz</a></h4>
<p><img class="aligncenter size-full wp-image-590" title="dv-js-library-canviz" src="http://blog.8maki.jp/wp-content/uploads/2010/01/dv-js-library-canviz.png" alt="dv-js-library-canviz" width="550" height="260" /></p>
<p>有名なVisualizationフレームワークである<a href="http://www.graphviz.org/" target="_blank">Graphviz</a>のJavascript版です。主にグラフ構造のデータを描画するのに適しています。ただ、DEMOを見る限り、アニメーションやイベントの設定ができないようで、本当にVisualizeのためだけのフレームワークのようです。</p>
<p>» <a href="http://www.ryandesign.com/canviz/" target="_blank">CanViz DEMO</a></p>
<h4><a href="http://www.axiis.org/index.html" target="_blank">Axiis (Flex)</a></h4>
<p><img class="aligncenter size-full wp-image-599" title="dv-js-library-axiis" src="http://blog.8maki.jp/wp-content/uploads/2010/01/dv-js-library-axiis.png" alt="dv-js-library-axiis" width="550" height="260" /></p>
<p>こちらはAdobe FlexのVisualizationフレームワークです。インタラクティブなアクションがかなりリッチに作りこまれています。下記のBrowser Statisticsは一部で話題になりましたね。かなり自由度の高いフレームワークのようです。</p>
<p>» <a href="http://www.axiis.org/examples.html" target="_blank">Axiis &#8211; Browser Statistics DEMO</a></p>
<h4><a href="http://thejit.org/" target="_blank">Infovis</a></h4>
<p><img class="aligncenter size-full wp-image-592" title="dv-js-library-infovis" src="http://blog.8maki.jp/wp-content/uploads/2010/01/dv-js-library-infovis.png" alt="dv-js-library-infovis" width="550" height="260" /></p>
<p>こちらもグラフ構造のデータ描画ライブラリとして有名です。フレームワークではないので個別のVisualを利用する形になります。グラフ構造しか扱えないのですが、この手のライブラリとしては珍しく、Weighted Graph（ノード間のパスに重みが付いている）/Directed Graph（パスに方向がある）、の描画にも対応しています。現時点で5種類のグラフ系、ツリー系のVisualがありますが、どれもよくできています。</p>
<p>» <a href="http://thejit.org/demos/" target="_blank">Infovis DEMO</a></p>
<h4><a href="http://www.rgraph.net/" target="_blank">RGraph</a></h4>
<p>番外ですが、HTML5用のグラフ生成ライブラリも登場しています。HTML5なのでまだまだ本格導入は難しいかもしれませんが、相当クオリティ高く仕上がっており、今後が楽しみなライブラリです。</p>
<p>» <a href="http://www.rgraph.net/examples/index.html" target="_blank">RGraph DEMO</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.8maki.jp/2010/01/javascript-data-visualization-library-not-only-for-charts.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.8maki.jp/2010/01/javascript-data-visualization-library-not-only-for-charts.html" />
	</item>
		<item>
		<title>モノと関連データの関係性-Semantic Webによるスキーマ定義-</title>
		<link>http://blog.8maki.jp/2009/12/data-visulization_rdf_semantic-web.html</link>
		<comments>http://blog.8maki.jp/2009/12/data-visulization_rdf_semantic-web.html#comments</comments>
		<pubDate>Sun, 13 Dec 2009 12:42:31 +0000</pubDate>
		<dc:creator>8maki</dc:creator>
				<category><![CDATA[IT]]></category>
		<category><![CDATA[proposal]]></category>
		<category><![CDATA[survey]]></category>
		<category><![CDATA[テクノロジー]]></category>
		<category><![CDATA[デザイン]]></category>
		<category><![CDATA[Data Visualization]]></category>
		<category><![CDATA[Dublin Core]]></category>
		<category><![CDATA[RDF]]></category>
		<category><![CDATA[Semantic Web]]></category>

		<guid isPermaLink="false">http://blog.8maki.jp/?p=577</guid>
		<description><![CDATA[
			
				
			
		
前回、モノをある切り口で捉え、それを適切な表現方法にあてはめて考えるアイディア出しスタイルと、モノの関連データにVisualizationをあてはめるというData Visualizationのスタイルは、脳の構造・プロセスが同じで、分かりやすいのではないか、という記事を書きました。
» アイディアの発想法とData Visualizationは同じ構造なのではないか？

そこで今回は、上記事で言及している”モノとその関連データ”とは何なのか、深く掘り下げてみたいと思います。
関連データとはプロパティである
「データから自動でVisualizationを行う」という取り組みの中で、どのようにデータを扱えばよいかという問いにぶちあたり、最近RDFおよびRDF Schema、Dublin Coreあたりを調べています。
RDF とは、主語・述語(プロパティ)・目的語(値)という3要素を用いてデータの関係性を表現するWeb上の枠組みのことです。例えば、「New Yorkの略語はNYである。」という例文は下記のようなXMLで表現されます。

&#60;rdf:RDF
 xmlns:rdf=&#34;http://www.w3.org/1999/02/22-rdf-syntax-ns#&#34;
 xmlns:dcterms=&#34;http://purl.org/dc/terms/alternative&#34;&#62;
  &#60;rdf:Description rdf:about=&#34;urn:states:New%20York&#34;&#62;
    &#60;dcterms:alternative&#62;NY&#60;/dcterms:alternative&#62;
  &#60;/rdf:Description&#62;
&#60;/rdf:RDF&#62;

この例で、主語・述語・目的語はこのような意味になります。↓
主語： New York というモノが存在し、
目的語： NY という関連データがあり、
述語： 略語 という主語と関連データの関連性を意味している。
これだけだとちょっと分かりにくいかもしれませんが、表は、基本的に主語・述語・目的語の構造に落とすことができます。下記は宇多田ヒカルのWikipedia Infoboxの例です。「宇多田ヒカルの出生名は宇多田光である」ということを表しています。

この構造は、前回の記事で示した、モノ⇔関連データ⇔Visualizationの構造に合致しています。
ここの述語、要はプロパティの部分とVisualizationをうまくひもづけるルールを定義できたら、「扱うデータからVisualizationを発想する」ことができるのではないでしょうか。さらに言えば、ルールさえしっかりしていれば、データとプロパティさえ定義すると自動でユーザーが求めるVisualizationを生成することができるようになります。
規格化されたプロパティの定義
ただ、適切なプロパティと適切なVisualizationをひもづけるには、プロパティの規格化が必要です。色々な人が、バラバラのプロパティ名を用いたり、統一化されていないカテゴリをプロパティとして付与したりすると、自動化が非常に困難になります。
そこでRDFでは、Dublin Coreというメタデータ記述語彙集を用いることが推奨されています。Dublin Coreには、TitleやCreatorといった15の基本要素と呼ばれるプロパティ候補があり、これらを用いることで、情報に共通化されたメタデータ、プロパティを付与することができるようになります。
さらにこれを細分化したDCMI Metadata Termsというものも存在します。DCMI Metadata Termsでは、50個以上のプロパティが定義されています。 先程の「略語」という述語（プロパティ）は、DCMI Metadata Termsのdcterms:alternativeというプロパティに置き換えることができます。
考察
このようにWeb上でデータを構造化する動きは、Semantic Webという流れの一つです。Semantic Webとは、コンピュータが理解できるように、Web上の情報に意味を付与しよう、というプロジェクトです。Data Visualizationで扱うデータをSemantic Webに合わせて構造化する方法は、現状は、割と有効だと思われます。
ただ、Semantic Webは分かりにくい上に考え方が古いので、中々浸透していません。Data Visualizationを主軸に考える場合、もっと別なデータの構造化・規格化手法を考える余地は大いにあるとは思います。
参考
こちらに、Semantic Webの概念図が載っています。コンテンツにメタデータの付与→メタデータの語彙規格化→語彙の意味把握(Ontology)→論理式を用いて結論を導く(Rules,Logic Framework)→結論の証明(Proof) という流れはいい線いっている気がしますが、先は長そうですね。
]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.8maki.jp%2F2009%2F12%2Fdata-visulization_rdf_semantic-web.html"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.8maki.jp%2F2009%2F12%2Fdata-visulization_rdf_semantic-web.html&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>前回、モノをある切り口で捉え、それを適切な表現方法にあてはめて考えるアイディア出しスタイルと、モノの関連データにVisualizationをあてはめるというData Visualizationのスタイルは、脳の構造・プロセスが同じで、分かりやすいのではないか、という記事を書きました。</p>
<p>» <a href="http://blog.8maki.jp/2009/11/data-visualization_idea.html" target="_blank">アイディアの発想法とData Visualizationは同じ構造なのではないか？</a></p>
<p style="text-align: center;"><img class="aligncenter" src="http://blog.8maki.jp/wp-content/uploads/2009/11/edit3.png" alt="" width="350" height="270" /></p>
<p>そこで今回は、上記事で言及している”モノとその関連データ”とは何なのか、深く掘り下げてみたいと思います。</p>
<h4>関連データとはプロパティである</h4>
<p>「データから自動でVisualizationを行う」という取り組みの中で、どのようにデータを扱えばよいかという問いにぶちあたり、最近<a href="http://ja.wikipedia.org/wiki/Resource_Description_Framework" target="_blank">RDF</a>およびRDF Schema、<a href="http://ja.wikipedia.org/wiki/Dublin_Core" target="_blank">Dublin Core</a>あたりを調べています。</p>
<p>RDF とは、主語・述語(プロパティ)・目的語(値)という3要素を用いてデータの関係性を表現するWeb上の枠組みのことです。例えば、「New Yorkの略語はNYである。」という例文は下記のようなXMLで表現されます。</p>
<pre class="brush: xml;">
&lt;rdf:RDF
 xmlns:rdf=&quot;http://www.w3.org/1999/02/22-rdf-syntax-ns#&quot;
 xmlns:dcterms=&quot;http://purl.org/dc/terms/alternative&quot;&gt;
  &lt;rdf:Description rdf:about=&quot;urn:states:New%20York&quot;&gt;
    &lt;dcterms:alternative&gt;NY&lt;/dcterms:alternative&gt;
  &lt;/rdf:Description&gt;
&lt;/rdf:RDF&gt;
</pre>
<p>この例で、主語・述語・目的語はこのような意味になります。↓<br />
<strong>主語</strong>： New York というモノが存在し、<br />
<strong>目的語</strong>： NY という関連データがあり、<br />
<strong>述語</strong>： 略語 という主語と関連データの関連性を意味している。</p>
<p>これだけだとちょっと分かりにくいかもしれませんが、表は、基本的に主語・述語・目的語の構造に落とすことができます。下記は宇多田ヒカルのWikipedia Infoboxの例です。「宇多田ヒカルの出生名は宇多田光である」ということを表しています。</p>
<p><img class="aligncenter size-full wp-image-580" title="utada" src="http://blog.8maki.jp/wp-content/uploads/2009/12/utada.png" alt="utada" width="280" height="234" /></p>
<p>この構造は、前回の記事で示した、モノ⇔関連データ⇔Visualizationの構造に合致しています。</p>
<p>ここの述語、要はプロパティの部分とVisualizationをうまくひもづけるルールを定義できたら、「扱うデータからVisualizationを発想する」ことができるのではないでしょうか。さらに言えば、ルールさえしっかりしていれば、データとプロパティさえ定義すると自動でユーザーが求めるVisualizationを生成することができるようになります。</p>
<h4>規格化されたプロパティの定義</h4>
<p>ただ、適切なプロパティと適切なVisualizationをひもづけるには、プロパティの規格化が必要です。色々な人が、バラバラのプロパティ名を用いたり、統一化されていないカテゴリをプロパティとして付与したりすると、自動化が非常に困難になります。</p>
<p>そこでRDFでは、Dublin Coreというメタデータ記述語彙集を用いることが推奨されています。<a href="http://ja.wikipedia.org/wiki/Dublin_Core" target="_blank">Dublin Core</a>には、TitleやCreatorといった15の基本要素と呼ばれるプロパティ候補があり、これらを用いることで、情報に共通化されたメタデータ、プロパティを付与することができるようになります。</p>
<p>さらにこれを細分化した<a href="http://dublincore.org/documents/dcmi-terms/" target="_blank">DCMI Metadata Terms</a>というものも存在します。DCMI Metadata Termsでは、50個以上のプロパティが定義されています。 先程の「略語」という述語（プロパティ）は、DCMI Metadata Termsのdcterms:alternativeというプロパティに置き換えることができます。</p>
<h4>考察</h4>
<p>このようにWeb上でデータを構造化する動きは、<a href="http://ja.wikipedia.org/wiki/%E3%82%BB%E3%83%9E%E3%83%B3%E3%83%86%E3%82%A3%E3%83%83%E3%82%AF%E3%83%BB%E3%82%A6%E3%82%A7%E3%83%96" target="_blank">Semantic Web</a>という流れの一つです。Semantic Webとは、コンピュータが理解できるように、Web上の情報に意味を付与しよう、というプロジェクトです。Data Visualizationで扱うデータをSemantic Webに合わせて構造化する方法は、現状は、割と有効だと思われます。</p>
<p>ただ、Semantic Webは分かりにくい上に考え方が古いので、中々浸透していません。Data Visualizationを主軸に考える場合、もっと別なデータの構造化・規格化手法を考える余地は大いにあるとは思います。</p>
<h4>参考</h4>
<p><a href="http://www.ritsumei.ac.jp/~inabam/class/km/4/" target="_blank">こちら</a>に、Semantic Webの概念図が載っています。コンテンツにメタデータの付与→メタデータの語彙規格化→語彙の意味把握(Ontology)→論理式を用いて結論を導く(Rules,Logic Framework)→結論の証明(Proof) という流れはいい線いっている気がしますが、先は長そうですね。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.8maki.jp/2009/12/data-visulization_rdf_semantic-web.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.8maki.jp/2009/12/data-visulization_rdf_semantic-web.html" />
	</item>
		<item>
		<title>アイディアの発想法とData Visualizationは同じ構造なのではないか？</title>
		<link>http://blog.8maki.jp/2009/11/data-visualization_idea.html</link>
		<comments>http://blog.8maki.jp/2009/11/data-visualization_idea.html#comments</comments>
		<pubDate>Mon, 30 Nov 2009 14:51:32 +0000</pubDate>
		<dc:creator>8maki</dc:creator>
				<category><![CDATA[IT]]></category>
		<category><![CDATA[proposal]]></category>
		<category><![CDATA[エンジニア]]></category>
		<category><![CDATA[Data Visualization]]></category>
		<category><![CDATA[松岡正剛]]></category>
		<category><![CDATA[編集学校]]></category>
		<category><![CDATA[高須賀宣]]></category>

		<guid isPermaLink="false">http://blog.8maki.jp/?p=560</guid>
		<description><![CDATA[
			
				
			
		
(Data Visualization is the same as how to organize ideas [en])
先日、元サイボウズでアメリカでLUNARRを立ち上げられた高須賀さんにお会いしました。そこで、最近研究している Data Visualization について発想が沸いたので書き残します。各データの種類（スキーマ）から自動で適切な Visualization 方法を選択して表現する、という研究です。
高須賀さんのお話
「アイディアをひねり出すとき、いきなりすごいアイディアを考えるよりも、切り口を見つけてそこから発展させた方がいい。アイディアと切り口のバランスが取れた位置が一番エネルギーがある。」ものすごく簡単にまとめるとこういうお話でした。
つまり、ものごとを構造化してとらえ、ツールを使って着想を得た方がアイディアを出しやすい、ということ。
例： 新しいレーザーを考える。レーザーは点であり直進する。点の反対は面で、直進の反対は曲がる。これらを2次元グラフにプロットし、各象限に何が当てはまるか頭をひねる。面・曲がるという象限、つまりどこにおいても光を反射させ、面に映し出すという切り口から、スクリーンの前に置かなくてもよいプロジェクターというアイディアが生まれた。
このとき、切り口からアイディアをひねるために用いたツールが、高須賀さん曰く2&#215;2というもの。要は2軸ある2次元グラフで昔私もマトリックスとも呼んでいました。構造化してアイディアを得る・まとめる方法は以下の高須賀さんの記事が分かりやすいです。
» 事業を考える切り口 &#8211; Toru Takasuka の起業・経営ブログ
» 新しい concept のはじまり &#8211; Toru Takasuka の起業・経営ブログ
松岡正剛の編集学校で教える編集術
こういった発想の訓練、実は以前にも受けたことがありました。松岡正剛の編集学校で体験授業です。
割と戦略コンサルのケーススタディ訓練に似ているのですが、MECEに限らず、もっと自由に発想する、ということが目的で楽しかったのを覚えています。そこでいただいたパンフレットに、6個のツールが載っていました。



1. Combination (一種合成型)
2つのものを合成して新しいアイディアを生み出す。
2. Triple Jump (三間連結型)
ホップ・ステップ・ジャンプ型で発想を展開。大・中・小や過去・現在・未来などの切り口もあり。
3. Branching (二点分岐型)
一つのものを2つに展開。この例ではブランドを切り口に展開した。
4. Trinity (三位一体型)
三位一体型、3点セットで考える発想パターン。3Cなどが代表例かも。
5.1 All Around (二軸四方型1)
Branching型の枝が2つ増えて、四方へと分岐する発想法。
5.2 2&#215;2 (二軸四方型2)
2軸を決めてそれぞれのマスに何が入るか考える。マトリックス型。
※英語は勝手に私が変換したものです。

Data Visualizationとの関係
さて、本題ですが、切り口をツールにあてはめアイディアを得るという発想法と、Data Visualization は、頭の中では同じ構造で処理しているのではないか？というのが今回のパラダイム・シフトでした。

どちらも「分かりやすく考える」「分かりやすく表現する」ということで、頭の使い方が非常によく似ているような気がします。Data Visualization というと Computer Science チックですが、何か考えを図にまとめるときのことを考えると分かりやすくて、まず扱う対象があって、それを一つの側面で切ったデータ群があり、それをどう Visualize するか？というのは、高須賀さんのおっしゃる構造的な思考と同じプロセスを踏むのではないでしょうか。
普通 Data Visualization [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.8maki.jp%2F2009%2F11%2Fdata-visualization_idea.html"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.8maki.jp%2F2009%2F11%2Fdata-visualization_idea.html&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>(<a href="http://analyst.8maki.jp/2010/01/27/data-visualization-is-the-same-as-how-to-organize-ideas/" target="_blank">Data Visualization is the same as how to organize ideas [en]</a>)</p>
<p>先日、元サイボウズでアメリカで<a href="http://ja.wikipedia.org/wiki/LUNARR" target="_blank">LUNARR</a>を立ち上げられた<a href="http://ja.wikipedia.org/wiki/%E9%AB%98%E9%A0%88%E8%B3%80%E5%AE%A3" target="_blank">高須賀さん</a>にお会いしました。そこで、最近研究している <a href="http://blog.8maki.jp/tag/data-visualization" target="_self">Data Visualization</a> について発想が沸いたので書き残します。各データの種類（スキーマ）から自動で適切な Visualization 方法を選択して表現する、という研究です。</p>
<h4>高須賀さんのお話</h4>
<p>「アイディアをひねり出すとき、いきなりすごいアイディアを考えるよりも、切り口を見つけてそこから発展させた方がいい。アイディアと切り口のバランスが取れた位置が一番エネルギーがある。」ものすごく簡単にまとめるとこういうお話でした。</p>
<p>つまり、ものごとを構造化してとらえ、ツールを使って着想を得た方がアイディアを出しやすい、ということ。</p>
<p>例： 新しいレーザーを考える。レーザーは点であり直進する。点の反対は面で、直進の反対は曲がる。これらを2次元グラフにプロットし、各象限に何が当てはまるか頭をひねる。面・曲がるという象限、つまりどこにおいても光を反射させ、面に映し出すという切り口から、スクリーンの前に置かなくてもよいプロジェクターというアイディアが生まれた。</p>
<p>このとき、切り口からアイディアをひねるために用いたツールが、高須賀さん曰く2&#215;2というもの。要は2軸ある2次元グラフで昔私もマトリックスとも呼んでいました。構造化してアイディアを得る・まとめる方法は以下の高須賀さんの記事が分かりやすいです。</p>
<p>» <a href="http://blog.goo.ne.jp/ttakasuka/e/d101f40c9d1fe9bedd466b654cfdcf5b" target="_blank">事業を考える切り口 &#8211; Toru Takasuka の起業・経営ブログ</a></p>
<p>» <a href="http://blog.goo.ne.jp/ttakasuka/e/95259e55c4307f01892957a16e255927" target="_blank">新しい concept のはじまり &#8211; Toru Takasuka の起業・経営ブログ</a></p>
<h4>松岡正剛の編集学校で教える編集術</h4>
<p>こういった発想の訓練、実は以前にも受けたことがありました。松岡正剛の<a href="http://es.isis.ne.jp/index_main.html" target="_blank">編集学校</a>で体験授業です。</p>
<p>割と戦略コンサルのケーススタディ訓練に似ているのですが、MECEに限らず、もっと自由に発想する、ということが目的で楽しかったのを覚えています。そこでいただいたパンフレットに、6個のツールが載っていました。</p>
<p style="text-align: center;"><img class="size-full wp-image-562 aligncenter" title="edit1" src="http://blog.8maki.jp/wp-content/uploads/2009/11/edit1.png" alt="edit1" width="500" height="364" /></p>
<p style="text-align: center;">
<p style="text-align: center;">
<p>1. <em>Combination</em> (一種合成型)<br />
2つのものを合成して新しいアイディアを生み出す。</p>
<p>2. <em>Triple Jump</em> (三間連結型)<br />
ホップ・ステップ・ジャンプ型で発想を展開。大・中・小や過去・現在・未来などの切り口もあり。</p>
<p>3. <em>Branching </em>(二点分岐型)<br />
一つのものを2つに展開。この例ではブランドを切り口に展開した。</p>
<p>4. <em>Trinity</em> (三位一体型)<br />
三位一体型、3点セットで考える発想パターン。3Cなどが代表例かも。</p>
<p>5.1 <em>All Around</em> (二軸四方型1)<br />
Branching型の枝が2つ増えて、四方へと分岐する発想法。</p>
<p>5.2 <em>2&#215;2</em> (二軸四方型2)<br />
2軸を決めてそれぞれのマスに何が入るか考える。マトリックス型。</p>
<p>※英語は勝手に私が変換したものです。</p>
<p><img class="aligncenter size-full wp-image-571" title="edit2" src="http://blog.8maki.jp/wp-content/uploads/2009/11/edit2.png" alt="edit2" width="500" height="243" /></p>
<h4>Data Visualizationとの関係</h4>
<p>さて、本題ですが、切り口をツールにあてはめアイディアを得るという発想法と、Data Visualization は、頭の中では同じ構造で処理しているのではないか？というのが今回のパラダイム・シフトでした。</p>
<p><img class="aligncenter size-full wp-image-575" title="edit3" src="http://blog.8maki.jp/wp-content/uploads/2009/11/edit3.png" alt="edit3" width="350" height="270" /></p>
<p>どちらも「分かりやすく考える」「分かりやすく表現する」ということで、頭<span style="background-color: #ffffff; ">の使い方が非常によく似ているような気がします。Data Visualization というと Computer Science チックですが、何か考えを図にまとめるときのことを考えると分かりやすくて、まず扱う対象があって、それを一つの側面で切ったデータ群があり、それをどう Visualize するか？というのは、高須賀さんのおっしゃる構造的な思考と同じプロセスを踏むのではないでしょうか。</span></p>
<p>普通 Data Visualization を調べる場合、どういった Visualization があるのか、どうプログラミングで表現するのか、といったことに目が行きがちになります。オライリー本の&#8221;<a href="https://www.amazon.co.jp/dp/0596514557?tag=8makiblog-22&amp;camp=243&amp;creative=1615&amp;linkCode=as1&amp;creativeASIN=0596514557&amp;adid=0SQK1ECCWYAE9RKK0KM6&amp;" target="_blank">Visualizing Data</a>&#8220;もアルゴリズム中心の本でした。</p>
<p>そこを、扱うデータから Visualization を発想するというパラダイムに変換することで、おもしろい表現ができるだけでなく、説得力のある Data Visualization 手法を考案できる気がしました。</p>
<p>参考までに、こちらの図↓は様々なチャートを目的別に一覧表示しています。チートシートとして使うと便利かも。</p>
<p>» <a href="http://i.imgur.com/YjWta.jpg" target="_blank">Chart Suggestions &#8211; A Thought Starter</a></p>
<p>p.s.</p>
<p>オフィスにお邪魔した際、VentureBEATの勝屋さんもいらっしゃいました。Blogに写真を載せてさらにリンクまで張っていただきました。ありがとうございました！最強のコネクターと言われるだけのことあって、超人懐っこいでしたｗ</p>
<p>» <a href="http://www.venturebeat.jp/katchaman/2009/11/%E3%82%A2%E3%82%A2.html" target="_blank">人のつながりは無限（∞）につながる &#8211; 勝屋久の日々是々</a></p>
<table class="yztbl" border="0">
<tbody>
<tr valign="top">
<td class="yz-image"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4873113784/8makiblog-22/" target="_blank"><img style="border: none;" src="http://ecx.images-amazon.com/images/I/41DdCRhKTAL._SL160_.jpg" alt="" /></a></td>
<td class="yz-info">
<div class="yz-name"><a href="http://yasazon.com/asin/4873113784.html" target="_blank"><img src="http://images-jp.amazon.com/images/G/09/icons/icon-books.gif" border="0" alt="" align="left" /></a><a name="yzlink"></a></div>
<div class="yz-detail" style="font-size:small">
<ul style="margin-top:0;margin-bottom:0">
<li><span><a href="http://yasazon.com/s/8makiblog-22/Ben%20Fry.html">Ben Fry</a>, <a href="http://yasazon.com/s/8makiblog-22/%E5%A2%97%E4%BA%95%20%E4%BF%8A%E4%B9%8B%20(%E7%9B%A3%E8%A8%B3).html">増井 俊之 (監訳)</a>, <a href="http://yasazon.com/s/8makiblog-22/%E5%8A%A0%E8%97%A4%20%E6%85%B6%E5%BD%A6.html">加藤 慶彦</a></span></li>
<li>定価 : <span>￥ 3,780</span></li>
<li>発売日 : <span>2008/12/01</span></li>
<li>出版社/メーカー : <span><a href="http://yasazon.com/s/8makiblog-22/%E3%82%AA%E3%83%A9%E3%82%A4%E3%83%AA%E3%83%BC%E3%82%B8%E3%83%A3%E3%83%91%E3%83%B3.html">オライリージャパン</a></span></li>
<li>おすすめ度 : <span><img style="border: none;" src="http://images-jp.amazon.com/images/G/09/x-locale/common/customer-reviews/stars-4-5.gif" alt="" /> (6 reviews)</span><br />
<img src="http://images-jp.amazon.com/images/G/09/x-locale/common/customer-reviews/stars-3-0.gif" alt="" />可視化の一つの手段としてProcessingの概要を知りたい人に<br />
<img src="http://images-jp.amazon.com/images/G/09/x-locale/common/customer-reviews/stars-5-0.gif" alt="" />情報の可視化入門<br />
<img src="http://images-jp.amazon.com/images/G/09/x-locale/common/customer-reviews/stars-4-0.gif" alt="" />目からウロコが。。。<br />
<img src="http://images-jp.amazon.com/images/G/09/x-locale/common/customer-reviews/stars-5-0.gif" alt="" />日本人の本より読みやすい<br />
<img src="http://images-jp.amazon.com/images/G/09/x-locale/common/customer-reviews/stars-4-0.gif" alt="" />既存のマッシュアップAPIを使うのとは違ったWeb情報の楽しみ方</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
]]></content:encoded>
			<wfw:commentRss>http://blog.8maki.jp/2009/11/data-visualization_idea.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.8maki.jp/2009/11/data-visualization_idea.html" />
	</item>
		<item>
		<title>Python-MySQL(MySQLdb)のメモリリーク対策</title>
		<link>http://blog.8maki.jp/2009/10/python-mysql-memory-leak.html</link>
		<comments>http://blog.8maki.jp/2009/10/python-mysql-memory-leak.html#comments</comments>
		<pubDate>Tue, 27 Oct 2009 00:49:31 +0000</pubDate>
		<dc:creator>8maki</dc:creator>
				<category><![CDATA[IT]]></category>
		<category><![CDATA[proposal]]></category>
		<category><![CDATA[エンジニア]]></category>
		<category><![CDATA[memory]]></category>
		<category><![CDATA[MySQL]]></category>
		<category><![CDATA[MySQLdb]]></category>
		<category><![CDATA[python]]></category>

		<guid isPermaLink="false">http://blog.8maki.jp/?p=535</guid>
		<description><![CDATA[
			
				
			
		
会社のスクリプト言語がPythonに統一されて、今月からPythonをメインに使っているのですが、MySQLに接続する際なぜかものすごくメモリを食う時がありました。その備忘録。
最近技術ネタが続いていますがf^^;
結論から先に書くと、MySQLdbのfetchallの部分を下記のように書きなおすとメモリリークが起きなくなりました。

sql = &#34;SQL文&#34;
con= MySQLdb.connect(db = db, host = host, user = user, passwd = passwd)
cur = con.cursor()
cur.execute(sql, params)
result = cur.fetchall()

↓

sql = &#34;SQL文&#34;
con = MySQLdb.connect(db = db, host = host, user = user, passwd = passwd)
con.query(sql)
r = con.store_result() # use_result()も可
result = []
while(True):
　　row = r.fetch_row()
　　if not row: break
　　result.insert(0, row[0]) # 初めにデータを挿入してリストの再構成を防ぎ高速化！
con.close()

» ueBLOG  &#124; PythonをつかってMySQLの巨大な結果を返すselect文を処理する
主にこちらのブログを参考にしたのですが、cursorを使わず直接connectからクエリを投げるようにしています。
大きな違いは、一度にデータを取得するのではなく、1行ずつ取得するようにしている、ということだと思います。6～9行目で取得する行を一つ一つリストに格納しています。
なお、4行目でstore_result()を使っていますが、use_result()も可能で、use_result()を使うとデータをサーバに保持しそこから一行ずつ取得するようになるので、よりメモリの消費が抑えられる、気がしますf^^;
確認していないので何とも言えないのですが。
SQLAlchemyだとメモリリークしない、と聞いて試してみたのですが、ORマッピングで導入が面倒くさそうなうえに、生SQLを叩く際は結局MySQLdbを使うようで問題は解決しませんでした。
大量のデータをMySQLに保存しそこから全文検索（エンジンはSenna）でデータを引っ張る処理を行っていて、ある特定のSQLを書く必要があったので。
参考：
» MySQLdbのメモリー・リーク &#8211; [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.8maki.jp%2F2009%2F10%2Fpython-mysql-memory-leak.html"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.8maki.jp%2F2009%2F10%2Fpython-mysql-memory-leak.html&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p><span style="background-color: #ffffff; ">会社のスクリプト言語がPythonに統一されて、今月からPythonをメインに使っているのですが、MySQLに接続する際なぜかものすごくメモリを食う時がありました。その備忘録。</span></p>
<p>最近技術ネタが続いていますがf^^;</p>
<p>結論から先に書くと、MySQLdbのfetchallの部分を下記のように書きなおすとメモリリークが起きなくなりました。</p>
<pre class="brush: python;">
sql = &quot;SQL文&quot;
con= MySQLdb.connect(db = db, host = host, user = user, passwd = passwd)
cur = con.cursor()
cur.execute(sql, params)
result = cur.fetchall()
</pre>
<p>↓</p>
<pre class="brush: python;">
sql = &quot;SQL文&quot;
con = MySQLdb.connect(db = db, host = host, user = user, passwd = passwd)
con.query(sql)
r = con.store_result() # use_result()も可
result = []
while(True):
　　row = r.fetch_row()
　　if not row: break
　　result.insert(0, row[0]) # 初めにデータを挿入してリストの再構成を防ぎ高速化！
con.close()
</pre>
<p>» <a href="http://www.ueblog.org/blog/entry/pythonmysqldb/" target="_blank">ueBLOG  | PythonをつかってMySQLの巨大な結果を返すselect文を処理する</a><br />
主にこちらのブログを参考にしたのですが、cursorを使わず直接connectからクエリを投げるようにしています。<br />
大きな違いは、一度にデータを取得するのではなく、1行ずつ取得するようにしている、ということだと思います。6～9行目で取得する行を一つ一つリストに格納しています。</p>
<p>なお、4行目でstore_result()を使っていますが、use_result()も可能で、use_result()を使うとデータをサーバに保持しそこから一行ずつ取得するようになるので、よりメモリの消費が抑えられる、気がしますf^^;<br />
確認していないので何とも言えないのですが。</p>
<p>SQLAlchemyだとメモリリークしない、と聞いて試してみたのですが、ORマッピングで導入が面倒くさそうなうえに、生SQLを叩く際は結局MySQLdbを使うようで問題は解決しませんでした。<br />
大量のデータをMySQLに保存しそこから全文検索（エンジンはSenna）でデータを引っ張る処理を行っていて、ある特定のSQLを書く必要があったので。</p>
<p>参考：<br />
» <a href="http://d.hatena.ne.jp/perezvon/20090109/1231491515" target="_blank">MySQLdbのメモリー・リーク &#8211; スコトプリゴニエフスク通信</a><br />
» <a href="http://kjirou.sakura.ne.jp/mt/2008/12/python_mysqldb.html" target="_blank">[Python] MySQLdbのメモリリーク (それなりブログ)</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.8maki.jp/2009/10/python-mysql-memory-leak.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.8maki.jp/2009/10/python-mysql-memory-leak.html" />
	</item>
	</channel>
</rss>

