SlideShare a Scribd company logo
HTML5&API総まく
り
      白石俊平 @Shumpei
HTML5、盛り過ぎじゃない
ですか?
今年ちょっと勉強サボリ
気味だったので、正直追
えてませんでした・・・
年末暇だったので、総復
習してみたのでその成果
を共有します!
HTML/DOM/ブラウザ環
境
•   現在の要素数は108
    • 30種類の新要素
    • 14種類の既存要素が変化
•   time要素、hgroup要素、data要素
    (WHATWG HTMLのみ)などが争
    点。



HTML5マークアップ
•   リッチな入力フォーム、新たなフォーム要素、宣
    言的なバリデーションなど。


        date   datetime   datetime-local
       month    week           time
      number    range         email
       url      search         tel
      color



HTML5 Forms
•   HTMLにマシンリーダブルなデータを埋
    め込むための仕様



<div itemscope>
  <p>お名前: <span itemprop="name">白石</span></p>
  <p>       :
    <time itemprop="birthDate">1978/03/24</time>
  </p>
</div>



HTML Microdata
•   HTMLにマシンリーダブルなデータを埋
    め込むための仕様
•   RDFはXMLで、RDFaは属性で定義。
    RDFa Liteは、RDFaの初心者用サブ
    セット
<div vocab="http://schema.org/" typeof="Person">
  <p>お名前: <span property="name">白石</span></p>
  <p>       :
    <time property="birthDate">1978/03/24</time>
  </p>
</div>



RDF/RDFa/RDFa Lite
•   MicrodataやRDFaで利用する、共通ボ
    キャブラリ
•   MS/Google/Yahooが協力して策定


<div itemscope itemtype="http://schema.org/Person">
  <p>お名前: <span itemprop="name">白石</span></p>
  <p>       :
    <time itemprop="birthDate">1978/03/24</time>
  </p>
</div>




Schema.org
•       HTML5、DOM3 Core、Element
        Traversal、DOM3 Events、DOM2
        Traversal and Rangeなど、複数に散
        らかっている仕様を統合するのが主
        目的。
•       例えば、以下のようなAPIが含まれ
        る。
    •    Document#getElementsByClassName()
    •    Element#classList




DOM4
•   DOMをカプセル化し、DOMツリーのコンポーネ
    ント化を実現する仕組み




var dialog = document.getElementById("dialog");
var root = new ShadowRoot(dialog);
root.appendChild(…);




Shadow DOM
•   async属性・・・スクリプトファイルの非同期読
    み込みが可能に
•   defer属性・・・スクリプトファイルのダウン
    ロードは非同期で行われ、実行はページの読み込
    み後


<script async defer src="ad.js"></script>




script要素の新属性
•   style要素にscopedを指定すると、スタイリング
    の効果が親要素の子孫ノードに限定される
    <body>
    <h1>ページの見出し</h1>
    <section>
      <style scoped>
       h1 { color: red; }
      </style>
      <h1>セクション見出し</h1>
    </section>

style要素のスコープ
化
•    ドラッグ&ドロップを実現するためのAPI
•    draggable属性を付与するとドラッグ可能に
•    dragstart/dragenter/dragover/dropと言ったイベン
     トを処理する
•    ファイルのドラッグ&ドロップも可能
// ドロップイベントを処理するハンドラ
target.ondrop = function(event) {
  // ドロップされたファイルを取得
  var files = event.dataTransfer.files;
  for (var i = 0; i < files.length; i++) {
      var file = files[i];
      alert("名前:" + file.name + " サイズ:" + file.size);
  }
};

Drag & Drop API
•   ブラウザの履歴(「戻る」「進む」)に任意の状
    態をひもづけられる。
•   popstateイベントを捕捉して、自前の「戻る」
    「進む」処理を記述可能



history.pushState(data, document.title);

onpopstate = function(event) {
  // 状態を復元
};



履歴管理API
•   Base64用ユーティリティ関数。
•   仕様も実装も(実は)揃っている




btoa(“a”); //”YQ==”
atob(“YQ”); // “a”




window.atob()/btoa()
•   JavaScriptで暗号化処理を行うためのAPI
•   「Web Cryptography API」として、2012年4月こ
    ろに最初のドラフトを予定




window.crypto.pk.generateKeypair("DSA",
  function(pubKey) {
    …
  }, false);




DOMCryptAPI
•       CSSセレクタで要素を絞り込むためのAPI
    •    document.querySelector(selector)
    •    document.querySelectorAll(selector)
•       Level2から、find()/findAll()が増え、jQuery風に
        チェーンで絞込みが可能に



var elements = document.querySelectorAll(".section");




Selectors API
•   AndroidのIntentをWebアプリ間で実現するための
    API。
•   <intent>要素を検知したブラウザは、サービスを
    自身に登録する
var intent = new Intent();
intent.action = Intent.EDIT;
intent.type = 'image/png';
intent.data = getImageDataURI('image');
window.navigator.startActivity(intent, loadEditedImag
e);



Web Intents
•   MIMEタイプやプロトコルにWebアプリを関連づ
    けることのできるAPI
// trans-en-jaプロトコルにGoogle翻訳を関連付ける
navigator.registerProtocolHandler(
  "trans-en-ja",
  "http://translate.google.co.jp/translate?" +
  "hl=ja&sl=en&tl=ja&u=%s", "Google英日翻訳");
// trans-en-jaプロトコルを使う
<a href="trans-en-ja://www.whatwg.org/">WHATWG</a>



registerProtocolHandler
registerContentHandler
•       ユーザへの通知を行うためのAPI
•       単純なテキストしか通知に使えない
    •    Chromeに実装されているAPIよりもかなり単純


var notification =
  new Notification("mail.png", "メール到着!");
notification.onshow = function() {
    setTimeout(function() {
      notification.cancel();
    }, 15000); }
notification.show();



Web Notifications
•       Webページ内の要素をフルスクリーン化して表示
        できるAPI
    •    動画をフルスクリーン再生する、とか
•       フルスクリーン時、:fullscreen擬似クラス
        と:fullscreen-ancestor擬似クラスが有効に
var exitButton = document.getElementById("exit");
var video = document.getElementById("v");
// フルスクリーン化
video.requestFullscreen();
exitButton.onclick = function() {
  // フルスクリーン解除
  document.exitFullScreen();
};


Fullscreen API
オフラインWebアプリ
ケーションと関連API
•   HTML/CSS/JavaScript/画像など、Webアプリが
    必要とするリソースをキャッシュし、オフライン
    でも利用可能にする仕組み。
•   text/cache-manifestでの配信が不要に。

CACHE MANIFEST

hello.html
hello.js
<html manifest="hello.appcache">
…
</html>



Application Cache
•   navigator.online・・・自身がオフライン状態かど
    うか
•   online/offlineイベント・・・オンライン状態の変
    化を検知することができる。
window.addEventListener("online", function() {
}, false);
window.addEventListener("offline", function() {
}, false);


navigator.online
online/offlineイベント
•   シンプルなローカルストレージ
•   Candidate Recommendation(勧告候補)に!
•   文字列値しか受け付けない仕様になってちょっと
    残念。

localStorage.person = JSON.stringify({…});

…

var person = JSON.parse(localStorage.person);




Web Storage
•   JavaScriptオブジェクトをそのまま読み書きでき
    るローカルストレージ
•   ベンダプレフィックス付きでChrome/Firefoxがサ
    ポート済み。IE10でもサポートされる。

var openReq = indexedDB.open("sampleDB")
openReq.onsuccess = function() {
  var db = openReq.result;
  var tx = db.transaction("Person");
  tx.objectStore("Person").put({…});
});




Indexed Database API
•       ローカルファイルの読み取りをサポートする
        API。
•       以下のようなインターフェースを定義している重
        要仕様。
    •    Blob
    •    File
    •    FileReader/FileReaderSync
    •    URL
var file = fileElem.files[0];
var reader = new FileReader();
reader.onload = function(buf) { … };
reader.readAsArrayBuffer(file);



File API
•   Webアプリが自由に読み書きできるファイルシス
    テムの仕様
•   オリジンごとにファイルシステムは分離されてい
    る

requestFileSystem(TEMPORARY, 1024*1024,
  function(fs) {
    fs.root.getFile("test.txt", function(file) {…});
  });




File API:Directories and
System
•   ローカルファイルの書き出しに特化したAPI。
•   File API:Directories and Systemと深い関連を持つ


var bb = new BlobBuilder();bb.append("TEST");
var data = bb.getBlob();
fs.root.getFile("test.txt", function(file) {
  file.createWriter(function(writer) {
    writer.onwrite = function() {…};
    writer.write(data);
  });
});



File API:Writer
•       Blob/FileReader/BlobBuilderなどを抽象化し、
        「バイナリストリームを扱うAPI」として再定義
        したもの。
•       以下のインターフェースが定義されている
    •    Stream・・・Blob/Fileの親インターフェースとして
    •    StreamReader・・・FileReaderの親インター
         フェースとして
    •    StreamBuilder・・・BlobBuilderを置き換えるもの
         として




Streams API
•   クォータをリクエストしたり、使用状況を取得し
    たりできるAPI
•   Chromeで実装済み
// 50MBのクォータを要求
webkitStorageInfo.requestQuota(
  webkitStorageInfo.PERSISTENT
  1024*1024*50,
  function onsuccess() {
   …
  },
  function onerror() {
   …
  });



Quota Management API
•       バイト型を持たないJavaScriptにおいて、バイト配列
        を扱うためのAPI。
•       Khronos(WebGLを標準化している団体)で仕様が策
        定されている。
•       バイナリデータのコンテナであるArrayBufferと、
        様々なサイズを要素の単位とするビューからなる
    •    (U)Int8Array,(U)Int16Array,(U)Int32Array,(
         U)Float32Array,(U)Float64Array

var buf = new Uint32Array([1,2,3]);
console.log(buf.length);     // 3
console.log(buf.byteLength); // 12




Typed Array
•   JavaScriptで並列処理を行うための仕組み。
•   各スレッド(ワーカ)は、直接変数を共有するこ
    とは出来ず、メッセージのやり取りでデータを共
    有する。
•   ステータス:ラストコール

var worker = new Worker("worker.js");
worker.postMessage("Hello");
worker.onmessage = function(event) {
  alert(event.data);
};




Web Workers
デバイスAPI
•   アドレス帳からのデータ読み出しを可能にする
    API
•   簡単なフィルタリングなども可能
•   ラストコール済み


navigator.contacts.find(['name', 'emails'],
  function(contacts) {
    …
  }, null, {filter: '白石'});



Contacts API
•   バッテリーの使用状況にアクセスできるAPI
•   各種ステータスへのアクセス、イベントリスナの
    設定も可能
•   ラストコール済み
navigator.battery.onlevelchange = function() {
  alert('現在のバッテリーレベル:' +
         navigator.battery.level);
};
if (navigator.battery.charging) {
  alert("チャージ中");
}



Battery Status API
•       <input type="file">を拡張し、カメラやマイクから
        の取り込みを可能に
•       以下の値を指定可能なcapture属性を追加する
    •    camera
    •    camcorder
    •    microphone
    •    filesystem(デフォルト)


<input type="file" capture="camera">




HTML Media Capture
•   WebアプリからE-mail/SMS/MMSを送信するため
    のAPI

var picture =
  document.getElementById("file").files[0];
navigator.device.sendMessage(
  "mms:+460000000001?body=Welcome%20%to%Atlantis",
  [picture], function() {
    // 成功時の処理
  });



The Messaging API
•   現在接続しているネットワークの種類を検知でき
    るAPI
•   unknown, ethernet, wifi, 2g, 3g, 4g, noneといった
    文字列が返ります。


alert(navigator.connection.type);




The Network Information API
•       デバイスの各種センサーにアクセスするための
        API
•       指定できるセンサーの種類は以下。
    •    Temperature(温度), AmbientLight(光),
         AmbientNoise(音), MagneticField(磁気),
         Proximity(近接), AtmPressure(気圧),
         RelHumidity(相対湿度), Accelerometer(加速
         度), Gyroscope(ジャイロ), Orientation(デバイ
         スの向き)
var con = new SensorConnection("Temperature");
con.onsensordata = function(event) {
  alert("現在の温度は" + event.data);
};
con.read();


Sensor API
•   Webアプリからバイブレーションを行うための
    API
•   navigator.vibrate()のみの簡単なAPI



// 1秒振動させる
navigator.vibrate(1000);
// パターンを指定して振動させる
navigator.vibrate([500, 500, 500]);



Vibration API
•   現在地情報を取得するためのAPI
•   Level2からは、住所の情報にもアクセスできるよ
    うに(Firefoxで実装済み)



navigator.geolocation.watchPosition(function(position
) {
  …
});



Geolocation API
•       Webアプリにおける音声入力や音声合成を可能に
        するAPI
•       Chromeで実装済みのx-webkit-speechとは別物
•       <reco><tts>要素とAPI、そしてリモートサーバと
        のやり取りを行うSpeech Protocolからなる。
    •    Speech ProtocolはWebSocketのサブプロトコルと
         して策定されている!

<reco for="greeting">
<input type="text" id="greeting">




HTML Speech
•       デバイスの向きや傾きを加速度センサーから得る
        ためのAPI。
•       対応しているブラウザでは、windowに対して以
        下のイベントを監視できる。
    •    deviceorientation・・・デバイスの向き・傾き
    •    divicemotion・・・デバイスの動き
    •    compassneedscalibration・・・キャリブレーショ
         ンが必要
window.addEventListener("deviceorientation",
  function(event) {
   // process event.alpha, event.beta and event.gamma
  }, true);



DeviceOrientation Events
•   マルチタッチを検知するための仕組み。
•   touchstart, touchend, touchmove, touchenter,
    touchleave, touchcancelと言ったイベントを捕捉
    する

window.ontouchstart = function(event) {
  var touches = event.touches;
  if (touches.length > 1)
    alert("マルチタッチ!");
};



Touch Events
ネットワーク/
コミュニケーション
•   WebSocket ProtocolはRFCに、WebSocket APIは
    勧告候補に。
•   主要ブラウザのほとんどが実装済み/実装着手済
    み
•   バイナリの送受信やプロトコルの拡張も可能に


var ws = new WebSocket("ws://example.com/chat");
ws.send("Hello");




WebSocket
•   Cometを標準化したようなAPI。HTTPの枠組みの
    ままに、サーバからのデータプッシュを実現す
    る。
•   サーバは、決まった形式に則ってtext/event-
    streamというコンテントタイプでデータを配信
•   クライアントは、EventSourceオブジェクトのイ
    ベントを監視。
var es = new EventSource("http://example.com/stock");
es.onmessage = function(event) {
  alert(event.data);
};



Server-Sent Events
•   ウィンドウ/iframe間(異なるwindowの間)で
    メッセージングを行うためのAPI
•   postMessage() <-> onmessageでデータを受け渡
    し
•   主要なブラウザでほぼ実装済み(IEはフレーム間
    通信のみ)
//sender
window.postMessage("Hello");
//receiver
window.onmessage = function(event) {
  alert(event.data);
};


Cross Document Messaging
•   オリジンの異なるサーバとの通信を可能にする
    API。
•   XHRやSSEに、外部のURLを指定するだけ。
•   サーバ側での対応は必要


var xhr = new XMLHttpRequest();
xhr.open("GET", "http://external.com");
xhr.send("");


Cross Origin Resource
Sharing
•       パワーアップしまくり!
    •    ドキュメントやバイナリ、フォームデータの送信が
         可能に
    •    ドキュメントやバイナリ、JSONの送信が可能に
    •    送受信の進捗状況を取得可能に
    •    他のオリジンとも通信可能に
var file = document.getElementById("file").files[0];
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload");
xhr.send(file); // ファイルの送信
xhr.upload.onprogress = function(event) {
  // アップロードの進捗状況を表示
};



XMLHttpRequest Level2
マルチメディア
•   <video>で動画再生、<audio>で音声再生
•   再生のみ可能。動画や音声の生成/編集は別の仕
    様で。


<video controls src=http://example.org/movie.ogg>
</video>




video/audio要素
•   Googleが作ったWeb Audio APIと、Mozillaが作っ
    たMediaStream Processing APIを併記した仕様。
    比較用?




Audio Processing API
•       メディアデータのメタデータを取得するための
        API
    •    タイトル/言語/日時/(撮影)場所/説明/ジャンル/コ
         ピーライト/幅・高さ/動画の再生時間/フレームレー
         ト…など
•       ステータス:勧告候補

var res = new MediaResource();
var mr = res.createMediaResource("test.jpg", [], 1);
mr.getMediaProperty(["title"], function(props) {
  var result = props.Title;
  var label = result.titleLabel;
}, function(prop) { … });



API for MediaResource1.0
•   video要素と共に使用するtrack要素に指定できる
    ファイルフォーマット
•   CSSも使用可能だが、i/b/u/ruby/rt/v(音声を表
    す)/c(頭出し用のテキスト)など、使えるタグ
    が限られている

WEBVTT

00:11.000 --> 00:13.000
<v 白石><b>こんにちは!</b>




Web VTT
•       ローカル/リモートを問わない、メディアデータ
        の送受信を可能にするAPI。
    •    デバイスが持つカメラやマイク、ファイル、リモー
         トブラウザ/デバイスなどと、メディアデータをや
         り取りできる


var video = document.getElementById("video");
navigator.getUserMedia("video", function(stream) {
  var url = URL.createObjectURL(stream);
  video.src = url;
});




Web RTC
グラフィック系API
•   説明不要!のグラフィックAPI
•   <canvas>要素で指定した領域に、JavaScriptを用
    いてビットマップグラフィックを書き出せる
•   3D版のAPIはWebGL


<canvas id="canvas"></canvas>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
…




Canvas
•   Scalable Vector Graphicsの頭文字を取ったもの。
•   Webページ内でベクターグラフィックを生成でき
    る
•   HTML5に対応したブラウザなら、HTML内に
    <svg>要素を用いて直接SVGを埋め込める

<!DOCTYPE html>
<html>
  <svg>
    …
  </svg>
</html>


SVG
パフォーマンス最適
化
•   JavaScriptアニメーションを最適化するため、ブ
    ラウザにコールバック関数を登録する仕組み
•   setTimeout()/setInterval()を使った場合よりもス
    ムーズでエコなアニメーションを期待できる。


function render() {
  …
  requestAnimationFrame(render);
}
requestAnimationFrame(render);




requestAnimationFrame
•       setTimeout(fn, 0)としたい状況で、代わりに使う
        と便利。
    •    長時間かかるタスクを細切れに処理したい場合
    •    UI処理の途中経過をユーザに表示したい場合


// 処理をイベントキューに追加
var id = setImmediate(function() { … });

// 途中でキャンセルしたい場合
clearImmediate(id);




setImmediate()
•       ページの表示状態を取得することのできるAPI
    •    バックグラウンドにいるときは処理を停止する、な
         どの制御が可能になる。
•       Documentオブジェクトのvisibilitychangeイベン
        トを監視して、状態変更を検知できる

document.addEventListener("visibilitychange",
  function() {
    if (document.hidden) {
      // ページがバックグラウンドの場合の処理
    }
  }, false);


Page Visibility
•       DNSルックアップ、接続開始/、ページの読み込
        み開始/完了など、様々なタイミングを取得でき
        るAPI
    •    navigationStart,domainLookupStart, connectStart, f
         etchStart, …
•       ステータス:勧告候補

onload = function() {
  var now = new Date().getTime();
  var t = now – performance.timing.navigationStart;
  alert("ページ読み込みまでにかかった時間:" + t);
};



Navigation Timing
•   プログラム内で時間を測定するための、便利で正
    確なAPI
•   基本はマーク&メジャー
•   ステータス:ラストコール
performance.mark("mark1");
performance.measure("measure1", "mark1");

var times = performance.getMeasures("measure1");
times.forEach(function(t) {
  console.log(t);
});



User Timing
•   画像、CSS、スクリプトなど、Webページを構成
    するリソースの読み込み時間を取得するメソッド


var resourceList = performance
  .getEntriesByType(performance.PERF_RESOURCE);
for (var i = 0; i < resourceList.length; i++) {
  console.log(
    resourceList[i].responseEnd –
    resourceList[i].startTime);
}



Resource Timing
•   User Timing, Resource Timingを一貫したイン
    ターフェースで扱うようにするための仕様




Performance Timeline
HTML5は進化が本当に
著しいですね!
2012年も、
HTML5とか勉強会
並びに
html5j.org
をよろしくお願いしま
す!

More Related Content

What's hot

Mixer2 で作るカスタムテンプレートエンジン #渋谷java
Mixer2 で作るカスタムテンプレートエンジン #渋谷javaMixer2 で作るカスタムテンプレートエンジン #渋谷java
Mixer2 で作るカスタムテンプレートエンジン #渋谷java
Jun Futagawa
 
.htaccessによるリダイレクト徹底解説
.htaccessによるリダイレクト徹底解説.htaccessによるリダイレクト徹底解説
.htaccessによるリダイレクト徹底解説
Cherry Pie Web
 
081108huge_data.ppt
081108huge_data.ppt081108huge_data.ppt
081108huge_data.ppt
Naoya Ito
 
Embulk 20150411
Embulk 20150411Embulk 20150411
Embulk 20150411
Hiroshi Nakamura
 
Spring Fest 2018 Spring Bootで作るRESTful Web Service
Spring Fest 2018 Spring Bootで作るRESTful Web ServiceSpring Fest 2018 Spring Bootで作るRESTful Web Service
Spring Fest 2018 Spring Bootで作るRESTful Web Service
WataruOhno
 
ASP.NET MVC のルーティング設定を少しだけ REST ぽくする
ASP.NET MVC のルーティング設定を少しだけ REST ぽくするASP.NET MVC のルーティング設定を少しだけ REST ぽくする
ASP.NET MVC のルーティング設定を少しだけ REST ぽくする
dany1468
 
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
ria1201
 
自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた
自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた
自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた
Yuki Takei
 
Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19
Hideki Hashizume
 
PHP 2大 web フレームワークの徹底比較!
PHP 2大 web フレームワークの徹底比較!PHP 2大 web フレームワークの徹底比較!
PHP 2大 web フレームワークの徹底比較!
Shohei Okada
 
Flask勉強会その1
Flask勉強会その1Flask勉強会その1
Flask勉強会その1
Masato Kawamura
 
scala+liftで遊ぼう
scala+liftで遊ぼうscala+liftで遊ぼう
scala+liftで遊ぼう
youku
 
BPStudy32 CouchDB 再入門
BPStudy32 CouchDB 再入門BPStudy32 CouchDB 再入門
BPStudy32 CouchDB 再入門
Yohei Sasaki
 
FuelPHPをさわってみて
FuelPHPをさわってみてFuelPHPをさわってみて
FuelPHPをさわってみて
Sotaro Omura
 
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
Hayato Mizuno
 
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
onozaty
 
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
Yatabe Terumasa
 

What's hot (20)

Mixer2 で作るカスタムテンプレートエンジン #渋谷java
Mixer2 で作るカスタムテンプレートエンジン #渋谷javaMixer2 で作るカスタムテンプレートエンジン #渋谷java
Mixer2 で作るカスタムテンプレートエンジン #渋谷java
 
.htaccessによるリダイレクト徹底解説
.htaccessによるリダイレクト徹底解説.htaccessによるリダイレクト徹底解説
.htaccessによるリダイレクト徹底解説
 
081108huge_data.ppt
081108huge_data.ppt081108huge_data.ppt
081108huge_data.ppt
 
Embulk 20150411
Embulk 20150411Embulk 20150411
Embulk 20150411
 
Spring Fest 2018 Spring Bootで作るRESTful Web Service
Spring Fest 2018 Spring Bootで作るRESTful Web ServiceSpring Fest 2018 Spring Bootで作るRESTful Web Service
Spring Fest 2018 Spring Bootで作るRESTful Web Service
 
ASP.NET MVC のルーティング設定を少しだけ REST ぽくする
ASP.NET MVC のルーティング設定を少しだけ REST ぽくするASP.NET MVC のルーティング設定を少しだけ REST ぽくする
ASP.NET MVC のルーティング設定を少しだけ REST ぽくする
 
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
 
いまさらJavaScript
いまさらJavaScriptいまさらJavaScript
いまさらJavaScript
 
自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた
自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた
自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた
 
Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19
 
Pyramid入門
Pyramid入門Pyramid入門
Pyramid入門
 
PHP 2大 web フレームワークの徹底比較!
PHP 2大 web フレームワークの徹底比較!PHP 2大 web フレームワークの徹底比較!
PHP 2大 web フレームワークの徹底比較!
 
Flask勉強会その1
Flask勉強会その1Flask勉強会その1
Flask勉強会その1
 
20081003
2008100320081003
20081003
 
scala+liftで遊ぼう
scala+liftで遊ぼうscala+liftで遊ぼう
scala+liftで遊ぼう
 
BPStudy32 CouchDB 再入門
BPStudy32 CouchDB 再入門BPStudy32 CouchDB 再入門
BPStudy32 CouchDB 再入門
 
FuelPHPをさわってみて
FuelPHPをさわってみてFuelPHPをさわってみて
FuelPHPをさわってみて
 
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
 
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
 
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
 

Viewers also liked

Hadoop for programmer
Hadoop for programmerHadoop for programmer
Hadoop for programmer
Sho Shimauchi
 
今さら聞けないHadoop セントラルソフト株式会社(20120119)
今さら聞けないHadoop セントラルソフト株式会社(20120119)今さら聞けないHadoop セントラルソフト株式会社(20120119)
今さら聞けないHadoop セントラルソフト株式会社(20120119)
Toru Takizawa
 
おばかアプリ選手権2013
おばかアプリ選手権2013おばかアプリ選手権2013
おばかアプリ選手権2013
おばかアプリ選手権 2013
 
Oracleがnode.jsをやり始めたというのだが!
Oracleがnode.jsをやり始めたというのだが!Oracleがnode.jsをやり始めたというのだが!
Oracleがnode.jsをやり始めたというのだが!
Hiroshi Hayakawa
 
javascript を Xcode でテスト
javascript を Xcode でテストjavascript を Xcode でテスト
javascript を Xcode でテスト
Yoichiro Sakurai
 
iOSアプリ開発の現場で訊いてきたtips
iOSアプリ開発の現場で訊いてきたtipsiOSアプリ開発の現場で訊いてきたtips
iOSアプリ開発の現場で訊いてきたtips
今城 善矩
 
「その他」のUI Framework 3選
「その他」のUI Framework 3選「その他」のUI Framework 3選
「その他」のUI Framework 3選
Shumpei Shiraishi
 
オラクルGO!話題の位置情報アプリをクラウドで簡単に作ってみる [Oracle Cloud Developer Day 2016]
オラクルGO!話題の位置情報アプリをクラウドで簡単に作ってみる [Oracle Cloud Developer Day 2016]オラクルGO!話題の位置情報アプリをクラウドで簡単に作ってみる [Oracle Cloud Developer Day 2016]
オラクルGO!話題の位置情報アプリをクラウドで簡単に作ってみる [Oracle Cloud Developer Day 2016]
オラクルエンジニア通信
 
ハンドメイドカレンダー第15回potatotips用
ハンドメイドカレンダー第15回potatotips用ハンドメイドカレンダー第15回potatotips用
ハンドメイドカレンダー第15回potatotips用
Fumiya Sakai
 
Virtual cnc training lab story
Virtual cnc training lab storyVirtual cnc training lab story
Virtual cnc training lab story
Liu PeiLing
 
Tecnología , Sostenibilidad y Turismo
Tecnología , Sostenibilidad y TurismoTecnología , Sostenibilidad y Turismo
Tecnología , Sostenibilidad y Turismo
Jose Manuel Antelo
 
Games for Health - Robert Pratten - Imaginary Worlds for Better Living
Games for Health - Robert Pratten - Imaginary Worlds for Better LivingGames for Health - Robert Pratten - Imaginary Worlds for Better Living
Games for Health - Robert Pratten - Imaginary Worlds for Better Living
Games for Health Europe
 
Reconstruccion accidentes de transito
Reconstruccion accidentes de transitoReconstruccion accidentes de transito
Reconstruccion accidentes de transito
William Ivan Alejandro Llanos Torrico
 
Microsoft Power Point The Smart Agency Presentation
Microsoft Power Point   The Smart Agency PresentationMicrosoft Power Point   The Smart Agency Presentation
Microsoft Power Point The Smart Agency Presentation
Nigel Charlesworth
 
Institute of Directors Future of Technology Report
Institute of Directors Future of Technology ReportInstitute of Directors Future of Technology Report
Institute of Directors Future of Technology Report
Ed Dodds
 
Manual instalacion y config wsrvr2008
Manual instalacion y config wsrvr2008Manual instalacion y config wsrvr2008
Manual instalacion y config wsrvr2008
Lasombra Ftsetenta
 
Proy. gestion 13 14
Proy. gestion 13 14Proy. gestion 13 14
Proy. gestion 13 14
Francisco Javier Romero Cañete
 
Catalogogeneral2010
Catalogogeneral2010Catalogogeneral2010
Catalogogeneral2010
GQ Equipamientos
 
UTPL_EDUCACION_Familia Y El Valor De La Vida Humana
UTPL_EDUCACION_Familia Y El Valor De La Vida HumanaUTPL_EDUCACION_Familia Y El Valor De La Vida Humana
UTPL_EDUCACION_Familia Y El Valor De La Vida Humana
macsanchez19
 
Les résultats définitifs de l'élection du HCCT par le Conseil Constitutionnel
Les résultats définitifs de l'élection du HCCT par le Conseil ConstitutionnelLes résultats définitifs de l'élection du HCCT par le Conseil Constitutionnel
Les résultats définitifs de l'élection du HCCT par le Conseil Constitutionnel
Dakaractu Dakaractu
 

Viewers also liked (20)

Hadoop for programmer
Hadoop for programmerHadoop for programmer
Hadoop for programmer
 
今さら聞けないHadoop セントラルソフト株式会社(20120119)
今さら聞けないHadoop セントラルソフト株式会社(20120119)今さら聞けないHadoop セントラルソフト株式会社(20120119)
今さら聞けないHadoop セントラルソフト株式会社(20120119)
 
おばかアプリ選手権2013
おばかアプリ選手権2013おばかアプリ選手権2013
おばかアプリ選手権2013
 
Oracleがnode.jsをやり始めたというのだが!
Oracleがnode.jsをやり始めたというのだが!Oracleがnode.jsをやり始めたというのだが!
Oracleがnode.jsをやり始めたというのだが!
 
javascript を Xcode でテスト
javascript を Xcode でテストjavascript を Xcode でテスト
javascript を Xcode でテスト
 
iOSアプリ開発の現場で訊いてきたtips
iOSアプリ開発の現場で訊いてきたtipsiOSアプリ開発の現場で訊いてきたtips
iOSアプリ開発の現場で訊いてきたtips
 
「その他」のUI Framework 3選
「その他」のUI Framework 3選「その他」のUI Framework 3選
「その他」のUI Framework 3選
 
オラクルGO!話題の位置情報アプリをクラウドで簡単に作ってみる [Oracle Cloud Developer Day 2016]
オラクルGO!話題の位置情報アプリをクラウドで簡単に作ってみる [Oracle Cloud Developer Day 2016]オラクルGO!話題の位置情報アプリをクラウドで簡単に作ってみる [Oracle Cloud Developer Day 2016]
オラクルGO!話題の位置情報アプリをクラウドで簡単に作ってみる [Oracle Cloud Developer Day 2016]
 
ハンドメイドカレンダー第15回potatotips用
ハンドメイドカレンダー第15回potatotips用ハンドメイドカレンダー第15回potatotips用
ハンドメイドカレンダー第15回potatotips用
 
Virtual cnc training lab story
Virtual cnc training lab storyVirtual cnc training lab story
Virtual cnc training lab story
 
Tecnología , Sostenibilidad y Turismo
Tecnología , Sostenibilidad y TurismoTecnología , Sostenibilidad y Turismo
Tecnología , Sostenibilidad y Turismo
 
Games for Health - Robert Pratten - Imaginary Worlds for Better Living
Games for Health - Robert Pratten - Imaginary Worlds for Better LivingGames for Health - Robert Pratten - Imaginary Worlds for Better Living
Games for Health - Robert Pratten - Imaginary Worlds for Better Living
 
Reconstruccion accidentes de transito
Reconstruccion accidentes de transitoReconstruccion accidentes de transito
Reconstruccion accidentes de transito
 
Microsoft Power Point The Smart Agency Presentation
Microsoft Power Point   The Smart Agency PresentationMicrosoft Power Point   The Smart Agency Presentation
Microsoft Power Point The Smart Agency Presentation
 
Institute of Directors Future of Technology Report
Institute of Directors Future of Technology ReportInstitute of Directors Future of Technology Report
Institute of Directors Future of Technology Report
 
Manual instalacion y config wsrvr2008
Manual instalacion y config wsrvr2008Manual instalacion y config wsrvr2008
Manual instalacion y config wsrvr2008
 
Proy. gestion 13 14
Proy. gestion 13 14Proy. gestion 13 14
Proy. gestion 13 14
 
Catalogogeneral2010
Catalogogeneral2010Catalogogeneral2010
Catalogogeneral2010
 
UTPL_EDUCACION_Familia Y El Valor De La Vida Humana
UTPL_EDUCACION_Familia Y El Valor De La Vida HumanaUTPL_EDUCACION_Familia Y El Valor De La Vida Humana
UTPL_EDUCACION_Familia Y El Valor De La Vida Humana
 
Les résultats définitifs de l'élection du HCCT par le Conseil Constitutionnel
Les résultats définitifs de l'élection du HCCT par le Conseil ConstitutionnelLes résultats définitifs de l'élection du HCCT par le Conseil Constitutionnel
Les résultats définitifs de l'élection du HCCT par le Conseil Constitutionnel
 

Similar to HTML5&API総まくり

HTML5でオフラインWebアプリケーションを作ろう
HTML5でオフラインWebアプリケーションを作ろうHTML5でオフラインWebアプリケーションを作ろう
HTML5でオフラインWebアプリケーションを作ろう
yoshikawa_t
 
ASP.NET シングル ページ アプリケーション (SPA) 詳説
ASP.NET シングル ページ アプリケーション (SPA) 詳説ASP.NET シングル ページ アプリケーション (SPA) 詳説
ASP.NET シングル ページ アプリケーション (SPA) 詳説
Akira Inoue
 
Jjug springセッション
Jjug springセッションJjug springセッション
Jjug springセッション
Yuichi Hasegawa
 
Azure Cosmos DB を使った高速分散アプリケーションの設計パターン
Azure Cosmos DB を使った高速分散アプリケーションの設計パターンAzure Cosmos DB を使った高速分散アプリケーションの設計パターン
Azure Cosmos DB を使った高速分散アプリケーションの設計パターン
Kazuyuki Miyake
 
複数アプリケーションの プロセスとログを管理する ための新しいツールと手法
複数アプリケーションのプロセスとログを管理するための新しいツールと手法複数アプリケーションのプロセスとログを管理するための新しいツールと手法
複数アプリケーションの プロセスとログを管理する ための新しいツールと手法
Masaki Yatsu
 
データマイニング+WEB勉強会資料第6回
データマイニング+WEB勉強会資料第6回データマイニング+WEB勉強会資料第6回
データマイニング+WEB勉強会資料第6回
Naoyuki Yamada
 
Mobile Web
Mobile WebMobile Web
Mobile Web
Makoto Kato
 
Apache geode at-s1p
Apache geode at-s1pApache geode at-s1p
Apache geode at-s1p
Masaki Yamakawa
 
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
Naoya Ito
 
Inside mobage platform
Inside mobage platformInside mobage platform
Inside mobage platform
Toru Yamaguchi
 
オフラインファーストの思想と実践
オフラインファーストの思想と実践オフラインファーストの思想と実践
オフラインファーストの思想と実践
Shumpei Shiraishi
 
Isomorphic web development with scala and scala.js
Isomorphic web development  with scala and scala.jsIsomorphic web development  with scala and scala.js
Isomorphic web development with scala and scala.js
TanUkkii
 
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
 
Apache Torqueについて
Apache TorqueについてApache Torqueについて
Apache Torqueについて
tako pons
 
for Developer、 Microsoft Edge とInternet Explorer で 新しくサポートされるAPI
for Developer、Microsoft Edge とInternet Explorer で新しくサポートされるAPI for Developer、Microsoft Edge とInternet Explorer で新しくサポートされるAPI
for Developer、 Microsoft Edge とInternet Explorer で 新しくサポートされるAPI
Osamu Monoe
 
前期講座08
前期講座08前期講座08
前期講座08
Takenori Nakagawa
 
Webフレームワークを作ってる話 #osakapy
Webフレームワークを作ってる話 #osakapyWebフレームワークを作ってる話 #osakapy
Webフレームワークを作ってる話 #osakapy
Masashi Shibata
 
Backlogでの Perlのつかいかた
Backlogでの PerlのつかいかたBacklogでの Perlのつかいかた
Backlogでの Perlのつかいかた
Ryuzo Yamamoto
 

Similar to HTML5&API総まくり (20)

HTML5でオフラインWebアプリケーションを作ろう
HTML5でオフラインWebアプリケーションを作ろうHTML5でオフラインWebアプリケーションを作ろう
HTML5でオフラインWebアプリケーションを作ろう
 
20080524
2008052420080524
20080524
 
ASP.NET シングル ページ アプリケーション (SPA) 詳説
ASP.NET シングル ページ アプリケーション (SPA) 詳説ASP.NET シングル ページ アプリケーション (SPA) 詳説
ASP.NET シングル ページ アプリケーション (SPA) 詳説
 
Jjug springセッション
Jjug springセッションJjug springセッション
Jjug springセッション
 
Azure Cosmos DB を使った高速分散アプリケーションの設計パターン
Azure Cosmos DB を使った高速分散アプリケーションの設計パターンAzure Cosmos DB を使った高速分散アプリケーションの設計パターン
Azure Cosmos DB を使った高速分散アプリケーションの設計パターン
 
複数アプリケーションの プロセスとログを管理する ための新しいツールと手法
複数アプリケーションのプロセスとログを管理するための新しいツールと手法複数アプリケーションのプロセスとログを管理するための新しいツールと手法
複数アプリケーションの プロセスとログを管理する ための新しいツールと手法
 
データマイニング+WEB勉強会資料第6回
データマイニング+WEB勉強会資料第6回データマイニング+WEB勉強会資料第6回
データマイニング+WEB勉強会資料第6回
 
Mobile Web
Mobile WebMobile Web
Mobile Web
 
Apache geode at-s1p
Apache geode at-s1pApache geode at-s1p
Apache geode at-s1p
 
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
 
Inside mobage platform
Inside mobage platformInside mobage platform
Inside mobage platform
 
オフラインファーストの思想と実践
オフラインファーストの思想と実践オフラインファーストの思想と実践
オフラインファーストの思想と実践
 
Isomorphic web development with scala and scala.js
Isomorphic web development  with scala and scala.jsIsomorphic web development  with scala and scala.js
Isomorphic web development with scala and scala.js
 
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
 
Apache Torqueについて
Apache TorqueについてApache Torqueについて
Apache Torqueについて
 
for Developer、 Microsoft Edge とInternet Explorer で 新しくサポートされるAPI
for Developer、Microsoft Edge とInternet Explorer で新しくサポートされるAPI for Developer、Microsoft Edge とInternet Explorer で新しくサポートされるAPI
for Developer、 Microsoft Edge とInternet Explorer で 新しくサポートされるAPI
 
前期講座08
前期講座08前期講座08
前期講座08
 
Webフレームワークを作ってる話 #osakapy
Webフレームワークを作ってる話 #osakapyWebフレームワークを作ってる話 #osakapy
Webフレームワークを作ってる話 #osakapy
 
Grails 2.0.0.M1の話
Grails 2.0.0.M1の話 Grails 2.0.0.M1の話
Grails 2.0.0.M1の話
 
Backlogでの Perlのつかいかた
Backlogでの PerlのつかいかたBacklogでの Perlのつかいかた
Backlogでの Perlのつかいかた
 

More from Shumpei Shiraishi

俺的GEB概論(前半)
俺的GEB概論(前半)俺的GEB概論(前半)
俺的GEB概論(前半)
Shumpei Shiraishi
 
コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術
Shumpei Shiraishi
 
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶjQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
Shumpei Shiraishi
 
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Shumpei Shiraishi
 
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
Shumpei Shiraishi
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Shumpei Shiraishi
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Shumpei Shiraishi
 
Angular2実践入門
Angular2実践入門Angular2実践入門
Angular2実践入門
Shumpei Shiraishi
 
WebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探るWebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探る
Shumpei Shiraishi
 
変身×フランツ・カフカ
変身×フランツ・カフカ変身×フランツ・カフカ
変身×フランツ・カフカ
Shumpei Shiraishi
 
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んでイラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
Shumpei Shiraishi
 
「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで
Shumpei Shiraishi
 
HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門
Shumpei Shiraishi
 
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
Shumpei Shiraishi
 
はじめにことばありき
はじめにことばありきはじめにことばありき
はじめにことばありき
Shumpei Shiraishi
 
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクトHTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
Shumpei Shiraishi
 
この人と結婚していいの?を読んで
この人と結婚していいの?を読んでこの人と結婚していいの?を読んで
この人と結婚していいの?を読んで
Shumpei Shiraishi
 

More from Shumpei Shiraishi (20)

俺的GEB概論(前半)
俺的GEB概論(前半)俺的GEB概論(前半)
俺的GEB概論(前半)
 
コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術
 
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶjQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
 
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
 
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
 
Angular2実践入門
Angular2実践入門Angular2実践入門
Angular2実践入門
 
WebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探るWebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探る
 
変身×フランツ・カフカ
変身×フランツ・カフカ変身×フランツ・カフカ
変身×フランツ・カフカ
 
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んでイラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
 
「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで
 
漫☆画太郎論
漫☆画太郎論漫☆画太郎論
漫☆画太郎論
 
HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門
 
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
 
はじめにことばありき
はじめにことばありきはじめにことばありき
はじめにことばありき
 
秒速一億円
秒速一億円秒速一億円
秒速一億円
 
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクトHTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
 
この人と結婚していいの?を読んで
この人と結婚していいの?を読んでこの人と結婚していいの?を読んで
この人と結婚していいの?を読んで
 
20130921レジュメ2
20130921レジュメ220130921レジュメ2
20130921レジュメ2
 

HTML5&API総まくり

  • 1. HTML5&API総まく り 白石俊平 @Shumpei
  • 6. 現在の要素数は108 • 30種類の新要素 • 14種類の既存要素が変化 • time要素、hgroup要素、data要素 (WHATWG HTMLのみ)などが争 点。 HTML5マークアップ
  • 7. リッチな入力フォーム、新たなフォーム要素、宣 言的なバリデーションなど。 date datetime datetime-local month week time number range email url search tel color HTML5 Forms
  • 8. HTMLにマシンリーダブルなデータを埋 め込むための仕様 <div itemscope> <p>お名前: <span itemprop="name">白石</span></p> <p> : <time itemprop="birthDate">1978/03/24</time> </p> </div> HTML Microdata
  • 9. HTMLにマシンリーダブルなデータを埋 め込むための仕様 • RDFはXMLで、RDFaは属性で定義。 RDFa Liteは、RDFaの初心者用サブ セット <div vocab="http://schema.org/" typeof="Person"> <p>お名前: <span property="name">白石</span></p> <p> : <time property="birthDate">1978/03/24</time> </p> </div> RDF/RDFa/RDFa Lite
  • 10. MicrodataやRDFaで利用する、共通ボ キャブラリ • MS/Google/Yahooが協力して策定 <div itemscope itemtype="http://schema.org/Person"> <p>お名前: <span itemprop="name">白石</span></p> <p> : <time itemprop="birthDate">1978/03/24</time> </p> </div> Schema.org
  • 11. HTML5、DOM3 Core、Element Traversal、DOM3 Events、DOM2 Traversal and Rangeなど、複数に散 らかっている仕様を統合するのが主 目的。 • 例えば、以下のようなAPIが含まれ る。 • Document#getElementsByClassName() • Element#classList DOM4
  • 12. DOMをカプセル化し、DOMツリーのコンポーネ ント化を実現する仕組み var dialog = document.getElementById("dialog"); var root = new ShadowRoot(dialog); root.appendChild(…); Shadow DOM
  • 13. async属性・・・スクリプトファイルの非同期読 み込みが可能に • defer属性・・・スクリプトファイルのダウン ロードは非同期で行われ、実行はページの読み込 み後 <script async defer src="ad.js"></script> script要素の新属性
  • 14. style要素にscopedを指定すると、スタイリング の効果が親要素の子孫ノードに限定される <body> <h1>ページの見出し</h1> <section> <style scoped> h1 { color: red; } </style> <h1>セクション見出し</h1> </section> style要素のスコープ 化
  • 15. ドラッグ&ドロップを実現するためのAPI • draggable属性を付与するとドラッグ可能に • dragstart/dragenter/dragover/dropと言ったイベン トを処理する • ファイルのドラッグ&ドロップも可能 // ドロップイベントを処理するハンドラ target.ondrop = function(event) { // ドロップされたファイルを取得 var files = event.dataTransfer.files; for (var i = 0; i < files.length; i++) { var file = files[i]; alert("名前:" + file.name + " サイズ:" + file.size); } }; Drag & Drop API
  • 16. ブラウザの履歴(「戻る」「進む」)に任意の状 態をひもづけられる。 • popstateイベントを捕捉して、自前の「戻る」 「進む」処理を記述可能 history.pushState(data, document.title); onpopstate = function(event) { // 状態を復元 }; 履歴管理API
  • 17. Base64用ユーティリティ関数。 • 仕様も実装も(実は)揃っている btoa(“a”); //”YQ==” atob(“YQ”); // “a” window.atob()/btoa()
  • 18. JavaScriptで暗号化処理を行うためのAPI • 「Web Cryptography API」として、2012年4月こ ろに最初のドラフトを予定 window.crypto.pk.generateKeypair("DSA", function(pubKey) { … }, false); DOMCryptAPI
  • 19. CSSセレクタで要素を絞り込むためのAPI • document.querySelector(selector) • document.querySelectorAll(selector) • Level2から、find()/findAll()が増え、jQuery風に チェーンで絞込みが可能に var elements = document.querySelectorAll(".section"); Selectors API
  • 20. AndroidのIntentをWebアプリ間で実現するための API。 • <intent>要素を検知したブラウザは、サービスを 自身に登録する var intent = new Intent(); intent.action = Intent.EDIT; intent.type = 'image/png'; intent.data = getImageDataURI('image'); window.navigator.startActivity(intent, loadEditedImag e); Web Intents
  • 21. MIMEタイプやプロトコルにWebアプリを関連づ けることのできるAPI // trans-en-jaプロトコルにGoogle翻訳を関連付ける navigator.registerProtocolHandler( "trans-en-ja", "http://translate.google.co.jp/translate?" + "hl=ja&sl=en&tl=ja&u=%s", "Google英日翻訳"); // trans-en-jaプロトコルを使う <a href="trans-en-ja://www.whatwg.org/">WHATWG</a> registerProtocolHandler registerContentHandler
  • 22. ユーザへの通知を行うためのAPI • 単純なテキストしか通知に使えない • Chromeに実装されているAPIよりもかなり単純 var notification = new Notification("mail.png", "メール到着!"); notification.onshow = function() { setTimeout(function() { notification.cancel(); }, 15000); } notification.show(); Web Notifications
  • 23. Webページ内の要素をフルスクリーン化して表示 できるAPI • 動画をフルスクリーン再生する、とか • フルスクリーン時、:fullscreen擬似クラス と:fullscreen-ancestor擬似クラスが有効に var exitButton = document.getElementById("exit"); var video = document.getElementById("v"); // フルスクリーン化 video.requestFullscreen(); exitButton.onclick = function() { // フルスクリーン解除 document.exitFullScreen(); }; Fullscreen API
  • 25. HTML/CSS/JavaScript/画像など、Webアプリが 必要とするリソースをキャッシュし、オフライン でも利用可能にする仕組み。 • text/cache-manifestでの配信が不要に。 CACHE MANIFEST hello.html hello.js <html manifest="hello.appcache"> … </html> Application Cache
  • 26. navigator.online・・・自身がオフライン状態かど うか • online/offlineイベント・・・オンライン状態の変 化を検知することができる。 window.addEventListener("online", function() { }, false); window.addEventListener("offline", function() { }, false); navigator.online online/offlineイベント
  • 27. シンプルなローカルストレージ • Candidate Recommendation(勧告候補)に! • 文字列値しか受け付けない仕様になってちょっと 残念。 localStorage.person = JSON.stringify({…}); … var person = JSON.parse(localStorage.person); Web Storage
  • 28. JavaScriptオブジェクトをそのまま読み書きでき るローカルストレージ • ベンダプレフィックス付きでChrome/Firefoxがサ ポート済み。IE10でもサポートされる。 var openReq = indexedDB.open("sampleDB") openReq.onsuccess = function() { var db = openReq.result; var tx = db.transaction("Person"); tx.objectStore("Person").put({…}); }); Indexed Database API
  • 29. ローカルファイルの読み取りをサポートする API。 • 以下のようなインターフェースを定義している重 要仕様。 • Blob • File • FileReader/FileReaderSync • URL var file = fileElem.files[0]; var reader = new FileReader(); reader.onload = function(buf) { … }; reader.readAsArrayBuffer(file); File API
  • 30. Webアプリが自由に読み書きできるファイルシス テムの仕様 • オリジンごとにファイルシステムは分離されてい る requestFileSystem(TEMPORARY, 1024*1024, function(fs) { fs.root.getFile("test.txt", function(file) {…}); }); File API:Directories and System
  • 31. ローカルファイルの書き出しに特化したAPI。 • File API:Directories and Systemと深い関連を持つ var bb = new BlobBuilder();bb.append("TEST"); var data = bb.getBlob(); fs.root.getFile("test.txt", function(file) { file.createWriter(function(writer) { writer.onwrite = function() {…}; writer.write(data); }); }); File API:Writer
  • 32. Blob/FileReader/BlobBuilderなどを抽象化し、 「バイナリストリームを扱うAPI」として再定義 したもの。 • 以下のインターフェースが定義されている • Stream・・・Blob/Fileの親インターフェースとして • StreamReader・・・FileReaderの親インター フェースとして • StreamBuilder・・・BlobBuilderを置き換えるもの として Streams API
  • 33. クォータをリクエストしたり、使用状況を取得し たりできるAPI • Chromeで実装済み // 50MBのクォータを要求 webkitStorageInfo.requestQuota( webkitStorageInfo.PERSISTENT 1024*1024*50, function onsuccess() { … }, function onerror() { … }); Quota Management API
  • 34. バイト型を持たないJavaScriptにおいて、バイト配列 を扱うためのAPI。 • Khronos(WebGLを標準化している団体)で仕様が策 定されている。 • バイナリデータのコンテナであるArrayBufferと、 様々なサイズを要素の単位とするビューからなる • (U)Int8Array,(U)Int16Array,(U)Int32Array,( U)Float32Array,(U)Float64Array var buf = new Uint32Array([1,2,3]); console.log(buf.length); // 3 console.log(buf.byteLength); // 12 Typed Array
  • 35. JavaScriptで並列処理を行うための仕組み。 • 各スレッド(ワーカ)は、直接変数を共有するこ とは出来ず、メッセージのやり取りでデータを共 有する。 • ステータス:ラストコール var worker = new Worker("worker.js"); worker.postMessage("Hello"); worker.onmessage = function(event) { alert(event.data); }; Web Workers
  • 37. アドレス帳からのデータ読み出しを可能にする API • 簡単なフィルタリングなども可能 • ラストコール済み navigator.contacts.find(['name', 'emails'], function(contacts) { … }, null, {filter: '白石'}); Contacts API
  • 38. バッテリーの使用状況にアクセスできるAPI • 各種ステータスへのアクセス、イベントリスナの 設定も可能 • ラストコール済み navigator.battery.onlevelchange = function() { alert('現在のバッテリーレベル:' + navigator.battery.level); }; if (navigator.battery.charging) { alert("チャージ中"); } Battery Status API
  • 39. <input type="file">を拡張し、カメラやマイクから の取り込みを可能に • 以下の値を指定可能なcapture属性を追加する • camera • camcorder • microphone • filesystem(デフォルト) <input type="file" capture="camera"> HTML Media Capture
  • 40. WebアプリからE-mail/SMS/MMSを送信するため のAPI var picture = document.getElementById("file").files[0]; navigator.device.sendMessage( "mms:+460000000001?body=Welcome%20%to%Atlantis", [picture], function() { // 成功時の処理 }); The Messaging API
  • 41. 現在接続しているネットワークの種類を検知でき るAPI • unknown, ethernet, wifi, 2g, 3g, 4g, noneといった 文字列が返ります。 alert(navigator.connection.type); The Network Information API
  • 42. デバイスの各種センサーにアクセスするための API • 指定できるセンサーの種類は以下。 • Temperature(温度), AmbientLight(光), AmbientNoise(音), MagneticField(磁気), Proximity(近接), AtmPressure(気圧), RelHumidity(相対湿度), Accelerometer(加速 度), Gyroscope(ジャイロ), Orientation(デバイ スの向き) var con = new SensorConnection("Temperature"); con.onsensordata = function(event) { alert("現在の温度は" + event.data); }; con.read(); Sensor API
  • 43. Webアプリからバイブレーションを行うための API • navigator.vibrate()のみの簡単なAPI // 1秒振動させる navigator.vibrate(1000); // パターンを指定して振動させる navigator.vibrate([500, 500, 500]); Vibration API
  • 44. 現在地情報を取得するためのAPI • Level2からは、住所の情報にもアクセスできるよ うに(Firefoxで実装済み) navigator.geolocation.watchPosition(function(position ) { … }); Geolocation API
  • 45. Webアプリにおける音声入力や音声合成を可能に するAPI • Chromeで実装済みのx-webkit-speechとは別物 • <reco><tts>要素とAPI、そしてリモートサーバと のやり取りを行うSpeech Protocolからなる。 • Speech ProtocolはWebSocketのサブプロトコルと して策定されている! <reco for="greeting"> <input type="text" id="greeting"> HTML Speech
  • 46. デバイスの向きや傾きを加速度センサーから得る ためのAPI。 • 対応しているブラウザでは、windowに対して以 下のイベントを監視できる。 • deviceorientation・・・デバイスの向き・傾き • divicemotion・・・デバイスの動き • compassneedscalibration・・・キャリブレーショ ンが必要 window.addEventListener("deviceorientation", function(event) { // process event.alpha, event.beta and event.gamma }, true); DeviceOrientation Events
  • 47. マルチタッチを検知するための仕組み。 • touchstart, touchend, touchmove, touchenter, touchleave, touchcancelと言ったイベントを捕捉 する window.ontouchstart = function(event) { var touches = event.touches; if (touches.length > 1) alert("マルチタッチ!"); }; Touch Events
  • 49. WebSocket ProtocolはRFCに、WebSocket APIは 勧告候補に。 • 主要ブラウザのほとんどが実装済み/実装着手済 み • バイナリの送受信やプロトコルの拡張も可能に var ws = new WebSocket("ws://example.com/chat"); ws.send("Hello"); WebSocket
  • 50. Cometを標準化したようなAPI。HTTPの枠組みの ままに、サーバからのデータプッシュを実現す る。 • サーバは、決まった形式に則ってtext/event- streamというコンテントタイプでデータを配信 • クライアントは、EventSourceオブジェクトのイ ベントを監視。 var es = new EventSource("http://example.com/stock"); es.onmessage = function(event) { alert(event.data); }; Server-Sent Events
  • 51. ウィンドウ/iframe間(異なるwindowの間)で メッセージングを行うためのAPI • postMessage() <-> onmessageでデータを受け渡 し • 主要なブラウザでほぼ実装済み(IEはフレーム間 通信のみ) //sender window.postMessage("Hello"); //receiver window.onmessage = function(event) { alert(event.data); }; Cross Document Messaging
  • 52. オリジンの異なるサーバとの通信を可能にする API。 • XHRやSSEに、外部のURLを指定するだけ。 • サーバ側での対応は必要 var xhr = new XMLHttpRequest(); xhr.open("GET", "http://external.com"); xhr.send(""); Cross Origin Resource Sharing
  • 53. パワーアップしまくり! • ドキュメントやバイナリ、フォームデータの送信が 可能に • ドキュメントやバイナリ、JSONの送信が可能に • 送受信の進捗状況を取得可能に • 他のオリジンとも通信可能に var file = document.getElementById("file").files[0]; var xhr = new XMLHttpRequest(); xhr.open("POST", "/upload"); xhr.send(file); // ファイルの送信 xhr.upload.onprogress = function(event) { // アップロードの進捗状況を表示 }; XMLHttpRequest Level2
  • 55. <video>で動画再生、<audio>で音声再生 • 再生のみ可能。動画や音声の生成/編集は別の仕 様で。 <video controls src=http://example.org/movie.ogg> </video> video/audio要素
  • 56. Googleが作ったWeb Audio APIと、Mozillaが作っ たMediaStream Processing APIを併記した仕様。 比較用? Audio Processing API
  • 57. メディアデータのメタデータを取得するための API • タイトル/言語/日時/(撮影)場所/説明/ジャンル/コ ピーライト/幅・高さ/動画の再生時間/フレームレー ト…など • ステータス:勧告候補 var res = new MediaResource(); var mr = res.createMediaResource("test.jpg", [], 1); mr.getMediaProperty(["title"], function(props) { var result = props.Title; var label = result.titleLabel; }, function(prop) { … }); API for MediaResource1.0
  • 58. video要素と共に使用するtrack要素に指定できる ファイルフォーマット • CSSも使用可能だが、i/b/u/ruby/rt/v(音声を表 す)/c(頭出し用のテキスト)など、使えるタグ が限られている WEBVTT 00:11.000 --> 00:13.000 <v 白石><b>こんにちは!</b> Web VTT
  • 59. ローカル/リモートを問わない、メディアデータ の送受信を可能にするAPI。 • デバイスが持つカメラやマイク、ファイル、リモー トブラウザ/デバイスなどと、メディアデータをや り取りできる var video = document.getElementById("video"); navigator.getUserMedia("video", function(stream) { var url = URL.createObjectURL(stream); video.src = url; }); Web RTC
  • 61. 説明不要!のグラフィックAPI • <canvas>要素で指定した領域に、JavaScriptを用 いてビットマップグラフィックを書き出せる • 3D版のAPIはWebGL <canvas id="canvas"></canvas> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); … Canvas
  • 62. Scalable Vector Graphicsの頭文字を取ったもの。 • Webページ内でベクターグラフィックを生成でき る • HTML5に対応したブラウザなら、HTML内に <svg>要素を用いて直接SVGを埋め込める <!DOCTYPE html> <html> <svg> … </svg> </html> SVG
  • 64. JavaScriptアニメーションを最適化するため、ブ ラウザにコールバック関数を登録する仕組み • setTimeout()/setInterval()を使った場合よりもス ムーズでエコなアニメーションを期待できる。 function render() { … requestAnimationFrame(render); } requestAnimationFrame(render); requestAnimationFrame
  • 65. setTimeout(fn, 0)としたい状況で、代わりに使う と便利。 • 長時間かかるタスクを細切れに処理したい場合 • UI処理の途中経過をユーザに表示したい場合 // 処理をイベントキューに追加 var id = setImmediate(function() { … }); // 途中でキャンセルしたい場合 clearImmediate(id); setImmediate()
  • 66. ページの表示状態を取得することのできるAPI • バックグラウンドにいるときは処理を停止する、な どの制御が可能になる。 • Documentオブジェクトのvisibilitychangeイベン トを監視して、状態変更を検知できる document.addEventListener("visibilitychange", function() { if (document.hidden) { // ページがバックグラウンドの場合の処理 } }, false); Page Visibility
  • 67. DNSルックアップ、接続開始/、ページの読み込 み開始/完了など、様々なタイミングを取得でき るAPI • navigationStart,domainLookupStart, connectStart, f etchStart, … • ステータス:勧告候補 onload = function() { var now = new Date().getTime(); var t = now – performance.timing.navigationStart; alert("ページ読み込みまでにかかった時間:" + t); }; Navigation Timing
  • 68. プログラム内で時間を測定するための、便利で正 確なAPI • 基本はマーク&メジャー • ステータス:ラストコール performance.mark("mark1"); performance.measure("measure1", "mark1"); var times = performance.getMeasures("measure1"); times.forEach(function(t) { console.log(t); }); User Timing
  • 69. 画像、CSS、スクリプトなど、Webページを構成 するリソースの読み込み時間を取得するメソッド var resourceList = performance .getEntriesByType(performance.PERF_RESOURCE); for (var i = 0; i < resourceList.length; i++) { console.log( resourceList[i].responseEnd – resourceList[i].startTime); } Resource Timing
  • 70. User Timing, Resource Timingを一貫したイン ターフェースで扱うようにするための仕様 Performance Timeline