実録！フグ料理 #1

Frontend de KANPAI! #7 https://frokan.connpass.com/event/135584/

Transcript

1. 実録！フグ料理 #1 FROKAN#7 @Takepepe
2. About Me ▪ Takefumi Yoshii / @Takepepe ▪ DeNA / DeSC Healthcare ▪ Frontend Engineer ▪ TypeScript Meetup JP member
3. フグ料理？
4. Project Fugu
5. Project Fugu NativeApp と WebApp の差分を 埋めるため、NativeApp でしか リーチ出来なかった API を Chrome で解放するプロジェクト。 https://developers.google.com/web/updates/capabilities
6. Project Fugu Google I/O でもセッションがあり、 来たるChromeDevSummit でも 進捗共有があるそうです。 https://developer.chrome.com/devsummit/
7. Why "Fugu" ? セキュリティ・プライバシーの観点から、 NativeAPI へのアクセスには注意が必要。 ※ カメラなど特に。 フグは美味しいけど、調理次第では毒となることも。 その自戒の念を込めた名称が「Project Fugu」
8. Completely list of APIs 「Project Fugu」に含まれるAPIは、現在 80 以上ある。 既に実験的に試せる API として、巷で話題になったものもちらほら。 ▪ Web Bluetooth API ▪ Web Share API ▪ Media Session API ▪ Shape Detection API ▪ Badging API ▪ Get Installed Related Apps API ▪ Wake Lock API ▪ Writable Files API https://docs.google.com/spreadsheets/d/1de0ZYDOcafNXXwMcg4EZhT0346QM-QFvZfoD8ZffHeA/edit#gid=272423396
9. Let's Cooking ! 今日は「矩形検出」の Shape Detection API を使って、 何か作ってみた記録を紹介していきます。 ▪ Web Bluetooth API ▪ Web Share API ▪ Media Session API ▪ Shape Detection API ▪ Badging API ▪ Get Installed Related Apps API ▪ Wake Lock API ▪ Writable Files API https://docs.google.com/spreadsheets/d/1de0ZYDOcafNXXwMcg4EZhT0346QM-QFvZfoD8ZffHeA/edit#gid=272423396
10. Shape Detection API Shape Detection API で検出可能なものは ３種類。 バーコード検出、テキスト検出（光学式文字認識）および顔検出 Barcode Detection Text Detection Face Detection
11. 試す前の事前準備
12. Enable to Experimental Features Shape Detection API を Chrome で 試すためには、chrome://flags で Experimental Web Platform features （実験的機能）を Enabled にする。
13. Enable to Experimental Features Shape Detection API を Chrome で 試すためには、chrome://flags で Experimental Web Platform features （実験的機能）を Enabled にする。 AndroidChrome でも 一部利用可能！
14. 使い方
15. BarcodeDetector 画像要素から、バーコード文字列・矩形を複数検出（たったこれだけ！） async function detectBarcode( element: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement ) { if (!window.BarcodeDetector) return new Error('BarcodeDetector is undefined') const barcodeDetector = new window.BarcodeDetector() return await barcodeDetector.detect(element) }
16. TextDetector 画像要素から、テキスト・矩形を複数検出（たったこれだけ！） async function detectText( element: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement ) { if (!window.TextDetector) return new Error('TextDetector is undefined') const textDetector = new window.TextDetector() return await textDetector.detect(element) }
17. FaceDetector 画像要素から、顔面・矩形を複数検出（全部一緒！） async function detectFace( element: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement ) { if (!window.FaceDetector) return new Error('FaceDetector is undefined') const faceDetector = new window.FaceDetector() return await faceDetector.detect(element) }
18. 検出
19. BarcodeDetector boundingBox: DOMRectReadOnly bottom: 293.48682403564453 height: 181.0986328125 left: 272.1447448730469 right: 445.8060607910156 top: 112.38819122314453 width: 173.66131591796875 x: 272.1447448730469 y: 112.38819122314453 cornerPoints: Array(4) 0: {x: 275.6146545410156, y: 112.38819122314453} 1: {x: 445.8060607910156, y: 126.80418395996094} 2: {x: 437.9911193847656, y: 293.48681640625} 3: {x: 272.1447448730469, y: 292.72515869140625} length: 4 format: "qr_code" rawValue: "https://design.dena.com/" 検出できたバーコード（ex: QR code） 画像内の矩形が取得できる（DOMRect） const barcode = await detectBarcode(element) console.log(barcode)
20. BarcodeDetector boundingBox: DOMRectReadOnly bottom: 293.48682403564453 height: 181.0986328125 left: 272.1447448730469 right: 445.8060607910156 top: 112.38819122314453 width: 173.66131591796875 x: 272.1447448730469 y: 112.38819122314453 cornerPoints: Array(4) 0: {x: 275.6146545410156, y: 112.38819122314453} 1: {x: 445.8060607910156, y: 126.80418395996094} 2: {x: 437.9911193847656, y: 293.48681640625} 3: {x: 272.1447448730469, y: 292.72515869140625} length: 4 format: "qr_code" rawValue: "https://design.dena.com/" const barcode = await detectBarcode(element) console.log(barcode) SVG ポリゴン描画などに利用できる 矩形の点座標。
21. BarcodeDetector boundingBox: DOMRectReadOnly bottom: 293.48682403564453 height: 181.0986328125 left: 272.1447448730469 right: 445.8060607910156 top: 112.38819122314453 width: 173.66131591796875 x: 272.1447448730469 y: 112.38819122314453 cornerPoints: Array(4) 0: {x: 275.6146545410156, y: 112.38819122314453} 1: {x: 445.8060607910156, y: 126.80418395996094} 2: {x: 437.9911193847656, y: 293.48681640625} 3: {x: 272.1447448730469, y: 292.72515869140625} length: 4 format: "qr_code" rawValue: "https://design.dena.com/" 検出できる Barcode Format は複数。 出典：W3C Community Group aztec, code_128, code_39, code_93, codabar, data_matrix, ean_13, ean_8, itf, pdf417, qr_code, unknown, upc_a, upc_e const barcode = await detectBarcode(element) console.log(barcode)
22. BarcodeDetector const barcode = await detectBarcode(element) console.log(barcode) boundingBox: DOMRectReadOnly bottom: 293.48682403564453 height: 181.0986328125 left: 272.1447448730469 right: 445.8060607910156 top: 112.38819122314453 width: 173.66131591796875 x: 272.1447448730469 y: 112.38819122314453 cornerPoints: Array(4) 0: {x: 275.6146545410156, y: 112.38819122314453} 1: {x: 445.8060607910156, y: 126.80418395996094} 2: {x: 437.9911193847656, y: 293.48681640625} 3: {x: 272.1447448730469, y: 292.72515869140625} length: 4 format: "qr_code" rawValue: "https://design.dena.com/" 取得できた文字列（URL等）が 「rawValue」に格納される。
23. TextDetector const text = await detectText(element) console.log(text) boundingBox: DOMRectReadOnly bottom: 293.48682403564453 height: 181.0986328125 left: 272.1447448730469 right: 445.8060607910156 top: 112.38819122314453 width: 173.66131591796875 x: 272.1447448730469 y: 112.38819122314453 cornerPoints: Array(4) 0: {x: 275.6146545410156, y: 112.38819122314453} 1: {x: 445.8060607910156, y: 126.80418395996094} 2: {x: 437.9911193847656, y: 293.48681640625} 3: {x: 272.1447448730469, y: 292.72515869140625} length: 4 rawValue: "hogehoge" 検出できる矩形情報などは、 BarcodeDetecotor と一緒。
24. TextDetector const text = await detectText(element) console.log(text) boundingBox: DOMRectReadOnly bottom: 293.48682403564453 height: 181.0986328125 left: 272.1447448730469 right: 445.8060607910156 top: 112.38819122314453 width: 173.66131591796875 x: 272.1447448730469 y: 112.38819122314453 cornerPoints: Array(4) 0: {x: 275.6146545410156, y: 112.38819122314453} 1: {x: 445.8060607910156, y: 126.80418395996094} 2: {x: 437.9911193847656, y: 293.48681640625} 3: {x: 272.1447448730469, y: 292.72515869140625} length: 4 rawValue: "hogehoge" 確認範囲では、環境差異が大きい。 矩形情報は取れても、rawValue が 取れなかったり。 日本語でも矩形だけは取れたり…
25. FaceDetector const face = await detectFace(element) console.log(face) boundingBox: DOMRectReadOnly bottom: 307 height: 176 left: 437 right: 613 top: 131 width: 176 x: 437 y: 131 landmarks: Array(3) 0: locations: Array(1) 0: {x: 491, y: 185} type: "eye" 1: locations: Array(1) 0: {x: 559, y: 185} type: "eye" 2: locations: Array(1) 0: {x: 525, y: 263} type: "mouth" 他と同様、矩形情報が複数とれる。 new FaceDetector() で引数に 速度優先・検出数上限が設定可能。
26. FaceDetector const face = await detectFace(element) console.log(face) boundingBox: DOMRectReadOnly bottom: 307 height: 176 left: 437 right: 613 top: 131 width: 176 x: 437 y: 131 landmarks: Array(3) 0: locations: Array(1) 0: {x: 491, y: 185} type: "eye" 1: locations: Array(1) 0: {x: 559, y: 185} type: "eye" 2: locations: Array(1) 0: {x: 525, y: 263} type: "mouth" 顔全体の矩形情報のほか、 目・鼻・口の頂点座標（複数）が 取得できる。
27. FaceDetector const face = await detectFace(element) console.log(face) boundingBox: DOMRectReadOnly bottom: 307 height: 176 left: 437 right: 613 top: 131 width: 176 x: 437 y: 131 landmarks: Array(3) 0: locations: Array(1) 0: {x: 491, y: 185} type: "eye" 1: locations: Array(1) 0: {x: 559, y: 185} type: "eye" 2: locations: Array(1) 0: {x: 525, y: 263} type: "mouth" Android Chrome では FaceDetecor が 利用できる判定となったが、 矩形取得が現状できなかった。 （観測範囲）
28. DEMO https://project-fugu-cooking.firebaseapp.com/
29. Recipe 顔のモザイク処理には Pixi.js を利用。 PIXI.texture に filter を適用、SVG で要素マスキング。 https://pixijs.io/pixi-filters/tools/demo/ const texture = PIXI.Texture.from(element) sprite.texture = texture sprite.filters = [new PixelateFilter((16 * offset) >> 0)] app.stage.addChild(sprite)
30. Recipe Pixi.js の filter は種類が豊富で簡単に扱える。 アイディア次第で面白いことが色々できそう！ https://pixijs.io/pixi-filters/tools/demo/ const texture = PIXI.Texture.from(element) sprite.texture = texture sprite.filters = [new PixelateFilter((16 * offset) >> 0)] app.stage.addChild(sprite)
31. Recipe WebGL fragment shader による GPU レンダリングが行われるため、 canvas 上で畳み込み処理を 行うよりも高速。 https://pixijs.io/pixi-filters/tools/demo/
32. フグ料理してみた所感
33. 楽しい & 楽しみ ▪ 実験的機能なので、不安定なのはやむなし ▪ 依存ライブラリ無しに、色々検出できるの楽しい ▪ フロントエンドっぽい実装は、やはり楽しい ▪ Native App ならではの機能が、今後続々！期待大
34. 今後のスケジュール 2019年中には、 多くの機能が 解放される見込み。 https://www.youtube.com/watch?v=GSiUzuB-PoI&feature=youtu.be
35. 本日のサンプル https://project-fugu-cooking.firebaseapp.com/ https://github.com/takefumi-yoshii/project-fugu-cooking ※ iOS Chrome で見ちゃダメだぞ！
36. ご静聴ありがとうございました