Archive

Archive for the ‘テクノロジー’ Category

最新ブラウザに見る昨今のJavascript事情

2月 17th, 2009

先日、会社で勉強会を行いました。 私がモデレーターを仰せつかったので、最近ひたすら実装に使っているJavascriptについて調査。

下記の動画を元に、各ブラウザの新バージョンの比較と、昨今のJavascrip事情についてシェアしました。

前半では、各ブラウザの新バージョンについて比較しています。簡単に表にまとめてみます。↓

  リリース 新機能
Firefox 3.1 2009年春
  • パフォーマンスの向上
  • ビデオ/オーディオタグの追加
  • プライベートモードの追加
Safari 4 OS X 10.6 に合わせて
  • パフォーマンスの向上
  • デスクトップアプリケーションとしての機能向上
  • ACID3にパス
  • Revampled dev tools の追加
Internet Explorer 8 2009年初旬
  • バックグラウンドでの処理
  • Web Clips機能の追加
  • タブごとにプロセスが動作
Opera 10 2009年予定
  • ACID3にパス
  • ビデオ/オーディオタグの追加
Google Chrome 2008年11月に1.0リリース
  • プライベートモード(シークレットモード)
  • タブごとにプロセスが動作

注目すべきは、IE8 もタブごとのプロセス動作になる、ということでしょうか。 加えてFF3.1 とOpeara10で、ビデオ/オーディオタグがサポートされます。そうするとFlashで動画を見る必要もなくなるかもしれませんね。

Firefox 3.1では、オープンソースのオーディオコーデック「Ogg Vorbis」およびビデオコーデック「Ogg Theora」に対するネイティブサポートが追加される見通しだ。また、新版ではこのほかに「HTML5」がサポートされるもようで、これによりFirefox 3.1では音声および動画のhtmlタグが機能するようになる。

» 「Firefox 3.1」ベータ版リリースは8月19日を目標に–「HTML5」をサポート:ニュース – CNET Japan

 注目の速さに関しては、以下のようなグラフで説明されていました。ちなみに3種類のツールで出した結果のひとつです。(見にくいですが、Chrome b1 > Safari 4.0 > Firefox 3.1 > Firefox 3.0.1 > Safari 3.1.2 > Opeara 9.5.2 > IE 8b2 > IE 7 となっています)

browser_speed

また、動画の後半では、新しく導入されるJavascriptの新機能(新関数)の紹介がされています。

  特徴 対応ブラウザ
postMessage 別のiframeに対してメッセージを送れる。 全ブラウザ
Cross-Domain XHR クロスドメインでも扱えるXMLHttpRequest FF3.1/IE8
Class Name getElementByClassNameによるエレメントの取得 Safari3.1/FF3.0/Opera9.6
Selector API document.querySelectorAll(”div p”)のようにエレメント取得を簡易化 IE8/Safari4/FF3/Opera10
Traversal API エレメント間の移動の簡易化(.nextElementSiblingなど) 全ブラウザ
HTML5 Dragging HTML5のドラッグ&ドロップイベントをサポート FF3.1
Bounding getBoundingClinetRectメソッドにより、エレメントの絶対位置を取得 IE
Javascript Threads Javascriptのスレッド化  

特筆すべきはやはりJavascriptのスレッド化ですが、うちの社長いわく、「Javascriptをスレッド化したらDOMの処理とかめんどくさそうだよね」とのこと。ロックでもかけたりするのでしょうか。本動画の例でも、3D画像の描画を使っていて、DOMの扱いは触れられていませんでした。(もしかしたら口頭でしゃべってたかも)

とはいえ、Javascriptも日々進化しており、本格的にJavascriptを中心としたブラウザの開発が進んでいることが実感される動画でした。

ちなみに、スピーカーのJohn ResigさんはjQueryの作者としても有名みたいです。Mozilla でJavascriptのエバンジェリストとして働かれているようで、Javascriptのプロですね。

8maki survey, テクノロジー , ,

デザイン用プログラミング環境Processing

9月 23rd, 2007

最近、デザイン/インターフェース分野にかなり興味が出てきていまして。

そんな中、先日参加したShibuya.jsにて、gyuqueさんがプレゼンで「コンテントツリーを視覚化したもの」等を3Dで描画していたのに感動しました。

processing2.png

» INSIDE Gecko handouts

加えて先週、森美術館のル・コルビュジエ展にいったとき、ル・コルビュジエの建築を紹介したDVDで使われていた3D映像にも感動してしまいまして。

というわけで、gyuqueさんのスライドで使われているっぽい、Processingというデザイン/アートの現場での作品制作に特化したオープンソースのプログラミング環境なるものに手を出し始めました。

» processing.org

結構情報処理学会でも注目されているらしく、増井 俊之さんがprocessingについてUNIX Magazineで紹介している記事を発見。

processing.orgで”展示”しているものをパラパラ見ているだけでも楽しい。久々にワクワクするプログラミング体験かも。

processing1.png

» Yo soy la Juani

基本はJavaで動いているみたいなのですが、このような描画を行うために洗練されていて、簡単なコードで美しい図形を描くことができるのがprocessingの特徴みたい。

int i, w, h, step, c; color cl;
w = 400;
h = 400;
step = 4;
 
size(w,h);
background(0);
 
for(i=0; i<w/step; i++){
cl = color(255/(w/step)*i, 64, 255-255/(w/step)*i, 50);
stroke(cl);
line(0,i*step,i*step,h);
line(w,i*step,i*step,0);
}

たったこれだけのコードで以下のような洗練された図形が!

processing3.png

意外とサンプルなども充実していて、ここらへんを参考にがりがり3Dってこうかと思います。

» プレゼンテーション法 » 第2回:Processing入門
» Processing 1.0 _ALPHA_ » Reference
※framerate->frameRate(0125beta版ではframerateでは動かないみたい)

プログラミングができてデザインに興味がある方は是非ご一緒にはじめてみませんか?!ちなみにproce55ingのほうが検索しやすいみたいです。

posted with amazlet on 07.09.23
前川 峻志 田中 孝太郎
ビー・エヌ・エヌ新社 (2007/03)
売り上げランキング: 31924
おすすめ度の平均: 4.5

4 プログラミングの入門者に最適!
5 わかりやすい

今日学んだ言葉:アルファチャネル

Read more…

8maki survey, テクノロジー ,