最近のブラウザって
すごい
2018-03-02 pixiv社内勉強会LT
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/1694845/hako_new_trans-01.png)
@hakatashi
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/4660363/2018-03-02_11_38_39-国立オリンピック記念青少年総合センター.png)
音声字幕機能
しくみ
Speech Recognition API
しゃべる
字幕テキスト
Speech Synthesis API
読み上げる
Speech API の使い方
const recognition = new SpeechRecognition();
recognition.start();
recognition.addEventListener('result', (event) => {
console.log(event.results);
});
const utterance = new SpeechSynthesisUtterance('ほげ');
speechSynthesis.speak(utterance);
あまり知られていない
今すぐ使える
便利な Web APIs
Ambient Light Events API
Ambient Light Events API
- デバイスの照度センサーにアクセス可能
- 許可無しで利用可能
- Firefox for Android で対応済み
![](https://dl2.pushbulletusercontent.com/GKFwx1cADNRjXHHuZmiIidvTAMFAYlWk/Screenshot_20180302-120559.png)
window.addEventListener('devicelight', (event) => {
console.log(`${event.value}lux`);
});
Ambient Light Events API
Accelerometer API
Accelerometer API
![](https://github.com/intel/generic-sensor-demos/raw/master/images/punchmeter.gif)
- デバイスの加速度センサーにアクセスできる
- 許可なしで利用可能
- Firefox, Chrome, Safari に実装済み
Accelerometer API
window.addEventListener("deviceorientation", (event) => {
const x = event.beta;
const y = event.gamma;
});
Caret Position API
Caret Position API
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/4660647/2018-03-02_15_36_53-Document.caretRangeFromPoint___-_Web_APIs___MDN.png)
- 座標から、その位置に存在する要素と文字数を取得する
- Chrome, Firefox, Safari で実装済み
- やばそう
Caret Position API
const range = document.caretPositionFromPoint(x, y);
const node = range.offsetNode;
const offset = range.offset;
Broadcast Channel API
Broadcast Channel API
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370811/images/4660680/2018-03-02_16_00_30-Broadcast_Channel_API_-_Web_APIs___MDN.png)
- 異なるタブ・ウィンドウ・Worker間で
メッセージのやりとりができるAPI - 許可無しで利用可能
- Chrome, Firefox で利用可能
Broadcast Channel API
const channel = new BroadcastChannel('channel');
channel.postMessage({title: 'hoge'});
channel.onmessage = (event) => {
console.log(event.data.title);
};
今すぐには使えないけど
便利そうな Web APIs
- Shape Detection API
- Web Bluetooth API
- Media Session API
- Budget API
おしまい
最近のブラウザってすごい
By Koki Takahashi
最近のブラウザってすごい
2018-03-02 pixiv社内勉強会LT
- 1,412