12. 新しいブラウザ機能

Deno

https://gyazo.com/95e410e517c0b67e33b8e13852847975

https://github.com/denoland/deno

node.jsの作者であるRyan Dahlが開発しているセキュアなTypeScriptランタイム on V8

クラウドIDE

ブラウザ上で動くIDE

CodeSandbox

Cloud9

masuidrive氏記事

もうソフト開発もクラウド上でやる時代?

CodeSandbox

https://www.youtube.com/watch?v=z02Zg7zFpoc

サンプル

Amazon Cloud9

https://www.youtube.com/watch?v=_xpzCzQZ-b8

https://aws.amazon.com/jp/campaigns/manga/vol2-1/ https://gyazo.com/07a4db77912f71769e0b3fcbf3378349

レポート課題

ブラウザの新機能

画面描画

マルチメディア

ローカルファイル

どんなアプリでも作れるようになった

昔のブラウザ

× 描画

× 動画

× 音

× CG

× 通信

× ファイル操作

ブラウザの新機能

HTML5

WebGL

WebCL

Web Audio API

Web MIDI API

HTTP/2

HTML5

http://gyazo.com/1042666f281f44e8b223f445e47babd2.png

HTML5の機能

セマンティックス

新タグ, RDFa, マイクロデータ, マイクロフォーマット

オフラインとストレージ

App Cache, Web Storage, Indexed Database API, File API

デバイスアクセス

Geolocation API, マイク, カメラ, アドレス帳, カレンダー, 端末の向き

接続性

WebSocket, Server-Sent Events

マルチメディア

audio/video要素

3D、グラフィックス、エフェクト

SVG, canvas要素, WebGL, CSS3 3D

パフォーマンスと統合

Web Workers, XMLHttpRequest Level 2

CSS3

WOFF

HTML5の機能

Video/Audio

Canvas, SVG

レイアウト/構造化タグ

新しいInput

File API

ドラッグ&ドロップ

マイクロデータ

Web Worker

App Cache

Web Storage

WebSocket

Geolocation API

XMLHttpRequest Level 2

WebRTC

Video/Audio

<audio>タグ

<video>タグ

Videoタグ

video.html

http://masui.org.s3.amazonaws.com/7/7/773a108d3ba8e8e0a82aba51861e82ad.mp4

CanvasとSVG

http://gyazo.com/622066eb8dbcdbe57aae904182981bfa.png

Canvasの例

ズーミングシステム

http://gyazo.com/d8e1099d4bacfbb00a1e2e25ee9edae8.png

SVGの例 - D3.js

D3.js

http://gyazo.com/365e08f7a80fcdf574afe3843a1f2ced.png

SVGの例 - SDraw

http://www.pitecan.com/tmp/SDraw/sdraw.html http://gyazo.com/8404a22e439dd6f9bef8b13f9c763624.png

D3.jsを利用

レイアウトタグ

<nav>

新しい入力要素

スライダ

色選択

時刻入力

...

スライダ

slider.html

code:slider.html

<label>レンジ（type="range"）:<input type="range" name="range"></label>

</form>

https://gyazo.com/a50c97fd2777d685d058c50811f637f1

色選択

colorsel.html

code:html

<!DOCTYPE html>

<html>

<body>

Select your favorite color: <input type="color" name="favcolor" /><br />

</form>

</body>

</html>

http://gyazo.com/292fa5d2ebe9312b07ef8a148c37597c.png

File API

ローカルファイルの読み書き

ドラッグ&ドロップ

ブラウザ内のドラッグ&ドロップ

ブラウザ外からのドラッグ&ドロップ

File APIを利用

マイクロデータ

独自の語彙から構成される名前と値のペアによって、あるスコープ内のDOMを意味付けする仕組み

HTML内で話題にしている人名/作品/商品などと言ったメタデータを、コンピュータが容易に認識出来るようにマークアップしたもの

Web Worker

JSをバックグラウンドで走らせる

マルチスレッドで動作可能

マルチコアCPUだとJSでも高速計算可能になる

pushState

操作履歴をセーブ

サーバと通信せずにURL状態を変えられる

Ajaxで「戻るボタン」を実装できる

WebSocket

サーバとの自由な通信

Cometなどを利用しなくてすむ

Node.jsで簡単に利用可能

socket.ioライブラリを利用

サーバからのイベントとブラウザからのイベントが対称

App Cache

HTML/CSS /JavaScriptをローカルにキャッシュ

manifestファイルを使う

Web Storage

ブラウザにデータをKVSで保存

ローカルストレージ

ウィンドウが開いている間だけ有効

セッションストレージ

永続的に保存

ChromeStorage

拡張機能のデータストレージ

ブラウザ内にデータが保存される

chrome.storage.local.set

Indexed Database API

NoSQLなデータベース

Geolocation API

ユーザの位置情報を扱う

無線LAN・WiFi・携帯電話基地局・GPS・IPアドレスなどから位置情報を取得

GeoAPI sample

geoapi.html

code:geoapi.html

<head>

//ユーザーの現在の位置情報を取得

navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

function successCallback(position) {

mapsurl = "https://maps.google.com/maps?q=" +

position.coords.latitude + "," +

position.coords.longitude;

location.href = mapsurl;

}

function errorCallback(error) {

var err_msg = "";

switch(error.code)

{

case 1:

err_msg = "位置情報の利用が許可されていません";

break;

case 2:

err_msg = "デバイスの位置が判定できません";

break;

case 3:

err_msg = "タイムアウトしました";

break;

}

document.getElementById("show_result").innerHTML = err_msg;

}

</script>

<title>Geolocation API　サンプル</title>

</head>

<body>

<p>あなたの現在位置</p>

</body>

</html>

Geolocation API

getCurrentPosition()

ユーザーの現在の位置情報を一回だけ取得する

watchPosition()

ユーザーの位置情報を定期的に監視する

clearWatch()

watchPosition()による位置情報の監視をクリアする

XMLHttpRequest Level 2

クロスドメイン対応

WOFF

Webで使えるフォント

Googleフォント

無料で利用可能

日本語フォントリスト

Webフォントの利用

小杉丸ゴシックの利用

CSSに書くだけで使える

code:style.css

@import url('https://fonts.googleapis.com/css?family=Kosugi+Maru');

html, body, #editor, .grid li {

font-family: helvetica, arial, "Kosugi Maru", sans-serif ;

}

で利用している

WebRTC

ブラウザでWebカメラを使う

http://gyazo.com/40acad6ef966289f059bbc54a693edfa.png

http://gyazo.com/6268457a183fc00cc587ec4151e9c835.png

WebGL

ブラウザ上でOpenGLで3Dグラフィクス描画

Three.js

Three.js入門

Three.jsサンプル集

GLとは?

SGI(Silicon Graphics)が作成した3次元ライブラリ

SGIのワークステーション(IRIX)で動作

GLプログラム例

http://gyazo.com/c6f572c70aca7068c3078bbd36996f46.png

OpenGL

GLを様々なマシンで使えるようにしたもの

Linux

Windows

Mac

ウィンドウ処理、マウス処理などは含まない

システム依存するため

WebGL

OpenGLをブラウザ上で動かす

GPUのOpenGLを直接アクセス

デモ集

Google本棚

Introduction to WebGL

WebGLデモ20選

Rotating cube by WebGL

https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/webkit/SpinningBox.html http://gyazo.com/2b2d731b33eefbc423c30b28e0b8c3ee.png

Source

http://gyazo.com/4c2193c5acb673ffad2088117b779623.png

WebGL Fluid

https://gyazo.com/109ffc512ac1529068921545095db984

WebGL Water

https://gyazo.com/4afc96a4a5fbd15fd610f97636dbd740.png

WebGL サンプル

Sample @ Khronos

Learning WebGL

three.js many samples

Many balls

Rotating globes

20 WebGL demonstrations

EnchantPro

JavaScriptのライブラリ

3Dゲームなどを簡単に作れる

GLSL

WebGLの「シェーダ」言語

C言語

http://glslsandbox.com/

WebGLの将来

最近はどこでも動く

Canvasより高速

情報視覚化にもっと活用されるべき

WebCL

GPUをブラウザから利用

OpenCLのブラウザ版

OpenCL

マルチコア、GPUなどの異種混合並列計算フレームワーク

NVIDIAのCUDAに対してAppleが提案

CUDA

NVIDIAのGPUを利用するCライブラリ

GPGPUのためのもの

GPGPU

General-purpose computing on graphics processing units

= GPUによる汎目的計算

GPGPUで劇安スーパーコンピュータ

ブラウザで音を扱う

Googleシンセサイザ

http://www.google.com/doodles/robert-moogs-78th-birthday?doodle=6201726XDBA74MzMMlMzN0pmZthmZn8AAAMRmZnyAAANQAAB6pmZs3__-3-2E8aZmbTPP__9lPUzMz2n7___YzzpmZhzlphik5hglphhFphkEFhhFoRmFJhhFphmklhnFphhFphkFkhlEkhlE4hlFphkklBmV0hjFphmFJhhFIhkFIhjEYhlFphh-A.. http://gyazo.com/d9a312912bf3f85cf26cfd870f39c5ba.png

audioタグ

code:audio.html

このWebブラウザーは音声の再生に対応していません。

</audio>

Audioオブジェクトでドラム

http://www11.plala.or.jp/sothicblue/html5drum/ http://gyazo.com/fa6af9ea506b095cc091169795099574.png

Web MIDI API

http://gyazo.com/02ab57fcdfc2bbe73de951a9b3dc1853.png

村井純 @ ORF2014

MIDIギターをブラウザに接続

ブラウザから音を出す

ブラウザでグラフィクス表示