Monthly Archives: September 2010

manipulating svg with jquery

Posted on 2010.09.29 by bouze

jqueryプラグインのjquery svgを試してみたのでメモ。このプラグインを使えばsvgの表示できるブラウザならどれでもいける（はず）。前述のインラインsvgも大丈夫。 GPL & MIT ライセンス。

1. セットアップ

まず空のdivを用意。

<div id="svg"></div>

ラッパーdivのサイズがsvgのサイズに適用されるのでdivのサイズを先に定義する。

//1000×1000px
$("#svg").width(1000).height(1000);

初期化。div中にsvgタグを作ってくれる。

$("#svg").svg();

SVGWrapperオブジェクトの参照を取得する。このSVGWrapperオブジェクトがsvg操作のルートになる。

var wrapper = $("#svg").svg('get');

あとはこの$svgの関数を実行すればsvgの描画ができる。

2. 四角形の描画

座標(10,20)に縦100、横200、塗り#ff0000、線の色#000000、線の太さ1の四角形を描画する。

var rect = wrapper.rect(10,20,100,200,
{
	fill: "#ff0000",
	stroke: "#000000",
	strokeWidth: 1
});

3. プロパティの操作

rectの座標を(100,100)に、透明度を50%に変更する。

wrapper.change(rect,
{
	x: 100,
	y: 100,
	opacity: 0.5
});

4. アニメーション

jquery.svganim.jsをロードしておけばjqueryのanimateが使えるようになる。アニメーションできるプロパティはここを参照。
3秒かけてrectを座標(200,200)に、透明度100%に変更する。

$(rect).animate(
{
	svgX: 200,
	svgY: 200,
	opacity: 1.0
},3000);

5. 外部svgのロード

svg/mountain.svgをロードして読み込み完了後loadSvgCompleteHandlerを実行する。

wrapper.load('svg/mountain.svg', 
{
	onLoad: loadSvgCompleteHandler
});

6. svgをテキストで取得

rectをテキストで取得。

alert(wrapper.toSVG(rect));

出力は、

<rect x="100" y="100" width="100" height="200" fill="#ff0000" stroke="#000000" stroke-width="1" opacity="0.5" style="opacity: 0.5; "></rect>

using simpleXML to parse xml with namespace

Posted on 2010.09.27 by bouze

simpleXMLを使ったnamespase付きxmlのパースでハマったのでメモ。

パースするxmlを文字列として$strに代入。

$str = <<<XML
<html xmlns="http://www.w3.org/TR/xhtml1">
	<body>
		<p>test</p>
	</body>
</html>
XML;

$strに代入した文字列をSimpleXMLElementオブジェクト化する。

$xml = new SimpleXMLElement($string);

simpleXMLElementのregisterXPathNamespaceでnamespaceを登録する。第一引数はnamespaceプレフィックス。こういうの<prefix:html>とかこういうやつ<xml:html>。たぶんここは適当でいい。第二引数はパースするxmlのnamespace。

$xml->registerXPathNamespace("xhtml", "http://www.w3.org/TR/xhtml1");

xpathで検索する時は先のプレフィックス付きで渡す。

$p = $xml->xpath("//xhtml:p");
echo $p[0];

結果は

test

なんかnamespaceって仕様があとづけっぽくて肌が合わない。

参考：

php5でsimpleXMLを使っているのですが、名前空間の接頭辞のついた属性を取得する方法がわかりません。 <document> <note ns:data="foo"></note> </document> こんな感じの.. – 人力検索はてな

embedding inline svg

Posted on 2010.09.27 by bouze

HTMLに直接SVG埋め込んでごにょごにょしたくてハマったのでメモ。

HTML5の仕様上インラインSVGは認められているものの、現状対応してるのはIE9とFirefox4のみらしい。その他のブラウザはHTML内で以下のように記述してもSVGは描画されない。

<html xmlns="http://www.w3.org/1999/xhtml">
<body>
	<svg width="100" height="100" viewBox="0 0 100 100">
		<rect x="0" y="0" width="50" height="50" />
	</svg>
</body>
</html>

解決方法は3通り、
1. objectタグで埋め込み
2. XHTMLに記述する
3. JavaScriptで記述する

今回はダイナミックに図形を書き換えたいので1はNG。拡張子がxhtmlに変わるのがキモイので2もNG。よって今回は3のjsによるアプローチを試した。

HTMLは先ほどと同じ。SVGをラップするdivタグを用意。

<html>
<body>
	<div id="svg"></div>
</body>
</html>

まずHTMLとSVGの名前空間を分離するためにSVG用の名前空間を用意。

var svgNS ="http://www.w3.org/2000/svg";

createElementNSで先ほど用意したSVG用の名前空間にsvgタグを作る。

var svg = document.createElementNS(svgNS, "svg");

各要素をセットする。

svg.setAttribute("width", 100);
svg.setAttribute("height", 100);
svg.setAttribute("viewBox", "0 0 100 100");

ラッパーdivを捕捉して先ほど作ったSVGタグを追加する。

var wrapper = document.getElementById(wrapperId);
wrapper.appendChild(svg);

これでsvgの用意はok。あとはSVGの名前空間の方に要素を追加、操作すればいい。
例：円を描画。

var circle = document.createElementNS(svgNS, 'circle');
circle.setAttribute('cx',50);
circle.setAttribute('cy',50);
circle.setAttribute('r',50);
svg.appendChild(circle);

結論、クソめんどいからSVGをまるっとラップしたショートカットクラスが欲しい。
あった。

完

参考:

academy awards

Posted on 2010.09.24 by bouze

ここ二ヶ月ほどバイトの通勤時間を利用して歴代アカデミー作品賞をさかのぼって見てる。「アカデミー賞をさかのぼる」っていうルールがない限り見ないような作品を見まくってる。

抜けてるのは近場のレンタル屋で見つかんないやつ。これを機にオンラインレンタル試してみようかな。

※追記(2012.11.14)
全部観終わった。一番よかったのが「クラッシュ」、その次が「フォレスト・ガンプ/一期一会」、その次が「イングリッシュ・ペイシェント」。

以下各作品の個人的なスコア。

★★★★★：自分史に残る名作
★★★★☆：自信を持って他人に薦められる
★★★☆☆：おもしろい
★★☆☆☆：おもしろくない
★☆☆☆☆：時間の無駄だった
☆☆☆☆☆：他人が見るのも止める

アーティスト(2012)	★☆☆☆☆
英国王のスピーチ(2011)	★☆☆☆☆
ハート・ロッカー(2010)	★★☆☆☆
スラムドッグ・ミリオネア(2009)	★★★☆☆
ノーカントリー(2008)	★☆☆☆☆
ディパーテッド(2007)	★★★☆☆
クラッシュ(2006)	★★★★☆
ミリオンダラー・ベイビー(2005)	★★☆☆☆
ロード・オブ・ザ・リング/王の帰還(2004)	★☆☆☆☆
シカゴ(2003)	★★☆☆☆
ビューティフル・マインド(2002)	★★☆☆☆
グラディエーター(2001)	★☆☆☆☆
アメリカン・ビューティー(2000)	★★☆☆☆
恋におちたシェイクスピア(1999)	★☆☆☆☆
タイタニック(1998)	★☆☆☆☆
イングリッシュ・ペイシェント(1997)	★★★★☆
ブレイブハート(1996)	★☆☆☆☆
フォレスト・ガンプ/一期一会(1995)	★★★★☆
シンドラーのリスト(1994)	★★★☆☆
許されざる者(1993)	★☆☆☆☆
羊たちの沈黙(1992)	★★☆☆☆
ダンス・ウィズ・ウルブズ(1991)	★★★☆☆
ドライビングMissデイジー(1990)	★★☆☆☆
レインマン(1989)	★★★☆☆
ラストエンペラー(1988)	★★☆☆☆
プラトーン(1987)	★★☆☆☆
愛と哀しみの果て(1986)	☆☆☆☆☆
アマデウス(1984)	★★★☆☆
愛と追憶の日々(1984)	☆☆☆☆☆
ガンジー(1983)	★★★☆☆
普通の人々(1981)	☆☆☆☆☆
ゴッドファーザー II(1975)	★★☆☆☆
ゴッドファーザー(1973)	★★☆☆☆

recently

Posted on 2010.09.23 by bouze

最近色々あってネットでの活動がおろそかになってますが元気にやってます。四年生にもなると一週間に一回しか学校に行かないもんだからネットで近況知る比重の方が大きくなってくるね。

電子書籍

技術書を裁断してスキャンしてpdfにしてiPhoneにつっこんで歩きながら本読んでる。飯食ってるときも本読んでる。トイレ入ってる時も本読んでる。iPhoneで本読むのはお世辞にも快適とは言えないけども、本を持ち運ぶコストと取り出すコストがほぼ0になって今まで以上に本を読むようになった。でもiPadでは読まない。iPadは持ち運ぶコストも取り出すコストも紙の本とあんま変わらない。全然革命起こってない。今のiPadの半分以下の重さでディスプレイのサイズも半分で網膜ディスプレイなiPad nanoが出たら読書革命起こると思う。自分の中で。

卒制

卒制が始まった。長時間かける課題は去年に一度おっきな失敗をしてるので、それを反省して他人の進捗気にしない、他人のテーマ気にしない、他人の噂気にしないの三大気にしないをテーマに掲げて擬似のんびりやろうと思う。

バイト

バイト先でお仕事のお手伝いを何度かさせてもらった。それで色々と反省することはたくさんあるんだけどとにかく遅い！他の人の半分ぐらいのスピード、下手をすると5分の1ぐらいのペースでしか動けてない。しょぼい。あと時間の管理を他人に任せすぎ催促されるのを待ったり締め切りを決めてもらうまでできないとか学生脳すぎる。

リファクタリング

色々怒られた結果、リファクタリングをちゃんと勉強すれば幸せになれる気がしたので結城先生のリファクタリング本を読みふけってる。すごい目から鱗。

テンプレート

牧野工房の本を読んでテンプレート思考が芽生えたので日頃からプロジェクト作って作業始めるまでのセッティングを事前にしておいてコピペして使えるように準備することにした。jsのプロジェクトなら空のjsを読み込むhtmlからjsやらcss、画像を入れるフォルダ構造まで作っておいて一式コピーしたら速攻でjsに取りかかれるとか、Flashならドキュメントクラスによく使うライブラリを読み込んでおいて、SingletonやらThreadクラスの空テンプレートなんかを作っておいた。下ごしらえ大事。スタートダッシュ大事。

HDDレコーダ

アナログ放送が見れなくなるのでチューナーを買うついでにレコーダも買った。噂には聞いてたけど体験してみるとすごい。タレント名を指定したらそのタレントの出演する番組をガシガシ録画してくれる。7年ぶりぐらいにテレビっ子に回帰しそう。ただレコーダーのUIがだいぶうんこ。リモコンに対するレスポンスは遅いは戻るボタンのルールは一貫してないわやたらボタンが多い割に使いたい機能が一発で呼び出せないわ散々。iOS載せて欲しい。もしかしたらPS3+torneのセットの方が買いだったかも。

0655、2355、ピタゴラスイッチミニ

レコーダを入手したおかげで佐藤雅彦監修「0655」、「2355」、「ピタゴラスイッチミニ」の三番組を永遠に見れるようになった。リアルタイムにこんな実験的な番組見れてしやわせ。そういえば今号の美術手帳が佐藤雅彦特集、マストバイ。

プロフェッショナル

再開されるらしい。二回目は松本人志。キテル。