操作方法

• → キー: 次のページへ
• ← キー: 前のページへ
• ↑ キー: 目次ページへ
• ↓ キー: 目次ページから戻る
• 目次ページでは ← → キーで一覧を移動し、クリックで選択します

それ、 JS で出来るよ
JSer の逆襲

Agenda

• Rediscover JavaScript
• Flash と JavaScript
• 実は JS でも出来ること
• 今でも JS で出来ないこと
• JavaScript にしかない利点

10 年。

世界が JavaScript の真の実力を発見するのに要した時間である。

1995 年、Netscape 社の Brendan Eich により開発・設計された JavaScript は、「世界で最も誤解されたプログラミング言語」などと呼ばれもした、

ともすれば不遇とすらいい得る歳月を経て、あたりのそこここに満ち充ちていた「Web の旧来的なインタラクションの窮屈さを革命したい」という思いによって、ふたたび表舞台に招来された。

JavaScript は、Web の「あちら側」と「こちら側」とを取り結ぶ、もっとも古くてもっとも新しい、そして、もっとも重要な技術だ。次の 10 年を自らの手で創り出すために、我々は Shibuya.js を結成した。

JS

Flash と JavaScript

• 両者とも、 Web 上のインタラクティブコンテンツの勝利者
• 実は Flash も JavaScript と同じ言語で記述されている
• 永遠のライバルであり、良き友

Flash と JavaScript

• 2005 年までは、 Flash の独り勝ち状態
• Ajax の台頭により、現在のような状勢に
• JavaScript の逆襲が始まる！

実は JS でも出来ること

• ラスターグラフィックス
• ベクターグラフィックス
• アニメーション

ラスターグラフィックス

写真のような、一点一点に対する色をデータとして持っているグラフィックス。 基本的に拡大縮小すると、画質が落ちる。

canvas

var canvas = document.getElementById("id");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(150, 150);
ctx.quadraticCurveTo(60, 70, 70, 150);
ctx.lineTo(30, 30);
ctx.fill();

ベクターグラフィックス

点や線や面の座標や方程をデータとして持つグラフィックス。 基本的に拡大縮小しても画質が落ちない。 ラスターグラフィックスのデータを含むことも出来る。

svg

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    <path d="M204.33 139.83 ..." />
    <path d="M204.33 139.83 ..." />
    ：
    <script type="text/javascript">
var elm = document.getElementsByTagName('path');
    </script>
</svg>

vml

<div xmlns:v="urn:schemas-microsoft-com:vml">
 <v:rect style="width:30; height:30;"
    fillcolor="#ffcccc" strokecolor="red"
    strokeweight="1" />
 <v:oval style="width:40; height:30"
    fillcolor="#ffcccc" strokecolor="red"
    strokeweight="1" />
 <script type="text/javascript"> ... </script>
</div>

現在仕様策定中

• video 要素 (HTML5)
• audio 要素 (HTML5)
• XMLHttpRequest level 2 (See Also) (W3C)

video 要素

<video src="news.ogg" id="news" >
 今夜のニュースステーションの映像
</video>
<script type="text/javascript">
var video = document.getElementById('news');
video.play();
video.pause();
video.stop();
</script>

audio 要素

<audio src="news.au" id="news" >
 今夜のニュースステーションの映像
</audio>
<script type="text/javascript">
var video = document.getElementById('news');
video.play();
video.pause();
video.stop();
</script>

XMLHttpRequest level 2

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://extern-domain/', true);
xhr.send(null);

XMLHttpRequest level 2

<?xml version="1.0" ?>
<?access-control
     allow="allow.example.org"
     deny="deny.example.org"?>
<data>
 ：
 ：
</data>

先行実装

• video 要素
• Firefox 3.x or 4 〜
• Opera 9.5 or 10 〜
• audio 要素
• Opera 9.5 or 10 〜
• XMLHttpRequest level 2
• Firefox 3