自己紹介

ECサイト運営
[東京] 非常勤エンジニア＋フリーランス
[新潟]

最近のお仕事

・・・などをやっています。

APIって・・・？

Application Programing Interface

ソフトウェアコンポーネントが互いにやりとりするのに使用するインタフェースの仕様

https://ja.wikipedia.org/wiki/アプリケーションプログラミングインタフェース

具体的にどんなもの？

• DOM APIとかXMLHttpRequestとか
• APIごとに標準化が進められてはいるが、ブラウザによって実装状況に差がある
  例えばjQueryは、ブラウザごとのDOM APIの実装の差異を吸収してくれていた

HTML5 APIって・・・？

https://ja.wikipedia.org/wiki/HTML5

どんなことができるの？

• オフラインとストレージ - App Cache、Web Storage、Indexed Database API、File API
• デバイスアクセス - Geolocation API、マイク・カメラ、アドレス帳・カレンダー、端末の向き
• 接続性 - WebSocket、Server-Sent Events
• マルチメディア - audio要素, video要素
• 3D、グラフィックス、エフェクト - SVG、canvas要素、WebGL
• パフォーマンスと統合 - Web Workers、XMLHttpRequest Level 2

https://ja.wikipedia.org/wiki/HTML5

その前にちょっと寄り道・・・

PWA[Progressive Web Apps]のこと

• Googleが2015年に提唱
• ネイティブアプリに近いUXを提供するWebサイト
• オフラインでも動くとか、通知が来るとか、写真撮れるとか
• 実現にはHTML5 APIが不可欠
• Apple(iPhone)のスタンスは・・・？

DOM・CSS関係

• ドラッグ＆ドロップのAPIが標準化（jQuery UI がなくても大丈夫！）
  Drag and drop API
• タブレット、スマートフォンのタッチイベントが扱えるように
  Touch Events
  Touch Events - Level 2・・・こちらはまだ草案
• マウスイベントとタッチイベントをまとめて扱えるように
  Pointer Events
  Pointer Events - Level 2・・・こちらもまだ草案
• CSSアニメーションのイベント取得
  CSS Conditional Rules Module Level 3
  →将来的にはWeb Animations APIに統合される？
  

  
  $('.element').bind('mozTransitionEnd webkitTransitionEnd transitionend', function(){
    console.log('Transition end!');
  });
  $('.element').on('webkitAnimationEnd animationEnd', function(){
    console.log('Keyframe animation end!');
  });
  

ファイル

• File API
  ローカルファイルにアクセスできるようになった（Flashがなくてもアップロードできる！）
  読み取り専用、パスは取れない。
  
• File and Directory Entries API
  ディレクトリ（フォルダ）のドロップは基本的にはまだ扱えない。（Chromeだけならがんばればできる。）

音を鳴らす

• Web Audio API
  HTMLのaudio要素を扱う（play/stopなど）
  だけじゃなくて、ものすごくいろいろできる。
  

  
  var ctx = new AudioContext();
  
  var osc = ctx.createOscillator();
  osc.frequency.value = 440;
  osc.type = 'sine';
  
  var gain = ctx.createGain();
  gain.gain.value = 0.5;
  osc.connect(gain);
  gain.connect(ctx.destination);
  
  osc.start(ctx.currentTime);
  osc.stop(ctx.currentTime + 5);
  

• Web MIDI API
  MIDIデバイスを扱う
• Web Speech API
  音読してもらう

ビデオ関係

• HTMLのvideo要素を扱う（play/stopなど）
  HTMLMediaElement
  「Web Video API」というものは存在しない

  再生可能なビデオ形式はブラウザによって異なるので、扱いにくい面がある。
  参考：HTML5 の audio 要素と video 要素でサポートされているメディアフォーマット

• ビデオの字幕（track要素）を扱う
  WebVTT: The Web Video Text Tracks Format
  

2D・3Dグラフィック

デバイスにアクセスする

• Geolocation API
• Clipboard API and events
• Media Capture and Streams
• Ambient Light Sensor・・・Firefoxのみ。
• Battery Status API
• DeviceOrientation Event Specification
• Web Bluetooth
• Gamepad

※ネイティブアプリでやる場合はOS提供のAPIを使うので、あくまでもWebブラウザからデバイスへのアクセスです。

サーバリクエスト

• XMLHttpRequest Level 2
  おなじみのAjaxです。Level2からCORSがサポートされました。
• Fetch API
  XHRより低レベルのAPI。現状、Chrome・Firefoxのみ。
  後述のWebWorkersからも使える。

  
  fetch(url).then(function(response) {
    return response.text();
  }).then(function(text) {
    console.log(text);
  });
  

  Promiseが返ってきます。

Web Worker

ストレージ

WebRTC

そのほか

• History API
  HTML5の仕様に含まれている
  Custom Scroll RestorationはIE、Edgeで未実装。
• Credential Management Level 1
  Chromeだけが対応中。ブラウザに保存されたID・パスワードの情報にアクセスできる。（もちろん生パスワードが見られるわけではない。）
• Web Cryptography API
  JavaScriptでハッシュ(SHA-1、SHA-2)とか公開鍵の生成ができる。ブラウザ実装はまだ足並みが揃っていない感じ。
• The Permissions API
  GPSとかプッシュ通知とかが使えるかどうかを判定してくれる。Chrome・Firefoxのみ。
• Payment Request API
  AndroidのChromeのみで動いている・・・。仕様自体は草案段階。
  Credential Management APIと同様で、ブラウザに保存されたクレジットカード情報にアクセスできる。

おまけ：標準化から外れたもの

• ローカルにファイルを保存するようなやつ
  File Writer API
  File System API
• アドレス帳とカレンダーへのアクセス
  Contacts Manager API
  Calendar API