操作方法

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

amachang: seijro@gmail.com

Agenda

Rediscover JavaScript

10 年。

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

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

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

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

JS

Flash と JavaScript

Flash と JavaScript

Flash と JavaScript

実は JS でも出来ること

実は 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>

そして、アニメーション

今でも

JS で出来ないこと

Play Sound

Play Movie

Cross-domain 通信

しかし

現在仕様策定中

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>

しかも、これらは

現在仕様策定中だが

既に試す事ができる

先行実装

JavaScript にしかない利点

Search Engine

Crawler

microformats

GRDDL

Bookmarklet

Greasemonkey

Extensions

まとめ

現在 JS では

今までに出来なかった

様々なことが

出来るようになっています

そして、これからも

出来ることは増え続け

いつか

インタラクティブコンテンツの

覇者になるでしょう。

というわけで

インタラクティブコンテンツは

JS で決まり！

ご清聴

ありがとう

ございました