Tweet
Tweet

Slide 1

Slide 1 text

Unlocking new capabilities for PWA PWA Night CONFERENCE 2020 @Takepepe

Slide 2

Slide 2 text

About Me ■ Takefumi Yoshii / @Takepepe ■ DeNA / DeSC Healthcare ■ Frontend Developer ■ TypeScript Meetup JP member 2

Slide 3

Slide 3 text

Agenda ■ 1. PWA や Web App で利用可能な、実験的機能について ■ 2. とある実験的機能 を利用してアプリを作った話 ■ 3. とある実験的機能 の API 概要 ■ 4. API 取り扱いポイント・React Redux に統合する話 3

Slide 4

Slide 4 text

1. Web Experimental Features

Slide 5

Slide 5 text

1-1. Bridging the NativeApp Gap ServiceWorker のキャッシュ戦略により、 PWA のみならず、Webブラウジングに 快適な UX がもたらされています。 1. Web Experimental Features

Slide 6

Slide 6 text

1-1. Bridging the NativeApp Gap 1. Web Experimental Features その快適なレスポンスから、 Web アプリケーション開発技術で、 Native アプリと同等機能を提供することに、 多くの期待が寄せられています。

Slide 7

Slide 7 text

1-1. Bridging the NativeApp Gap 1. Web Experimental Features しかし、Web ブラウザに許容されている 機能は限定的です。端末固有の機能に アクセスする Low-Level API の多くは、 JavaScript には解放されていません。

Slide 8

Slide 8 text

1-1. Bridging the NativeApp Gap 1. Web Experimental Features その状況を前進するべく、 Google Chrome では Low-Level API への橋渡しを 積極的に行なっています。 Experimental Features（実験的機能） には、そんな機能が多数控えています。

Slide 9

Slide 9 text

1-2. Origin Trial 1. Web Experimental Features chrome://flags で実験的機能を有効にすれば、 その機能を試すことができます。 そして、実験的機能を期限付き・ドメイン制限で 提供する「Origin Trial」もあります。 https://developers.chrome.com/origintrials

Slide 10

Slide 10 text

1-2. Origin Trial 1. Web Experimental Features 昨年 5月に開催された「Google I/O」 昨年 11月に開催された「Chrome Dev Summit」で、 この「Origin Trial」について紹介がありました。 可能性の広がりに、期待が高まりますね！

Slide 11

Slide 11 text

1-2. Origin Trial 1. Web Experimental Features 今日ご紹介するのは、 現在の私たちの生活には欠かすことのできない あの技術についてです。 最も直近に解放された API でもあります。

Slide 12

Slide 12 text

Web NFC

Slide 13

Slide 13 text

2. Devlop Trial

Slide 14

Slide 14 text

2-1. Web NFC Media MEMO Web NFC のトライアルとして、 デモアプリを作成しました。 次の検証環境で動作確認をしています。 ■ Pixel 3a　■ Android 9 ■ Google Chrome Canary v81 2. Devlop Trial https://vimeo.com/388157513

Slide 15

Slide 15 text

2-1. Web NFC Media MEMO デモアプリは配信もしていますので、 NFC 機能付き Android をお持ちの方は 試していただけると嬉しいです。 github にコードも公開しています。 https://webnfc-media-memo.netlify.com/ https://github.com/takefumi-yoshii/webnfc-media-memo 2. Devlop Trial

Slide 16

Slide 16 text

2-1. Web NFC Media MEMO このアプリを起動している時、 端末で検出された NFC Tag の処理は フォアグラウンドのブラウザに委ねられます。 2. Devlop Trial

Slide 17

Slide 17 text

2-1. Web NFC Media MEMO 2. Devlop Trial テキストメモ機能を利用して NFC Tag に書き込んだテキストは、 NFC Tag に永続化されます。

Slide 18

Slide 18 text

2-1. Web NFC Media MEMO 2. Devlop Trial テキストリーダー画面でタッチすると、 書き込んだ文字列が表示されます。 2byte 文字も可能です。

Slide 19

Slide 19 text

2-1. Web NFC Media MEMO 2. Devlop Trial 音声メモ機能は、 録音した後に NFC Tag にタッチすると、 保存することができます。

Slide 20

Slide 20 text

2-1. Web NFC Media MEMO そして、保存済みの NFC Tag にタッチすると、 アプリ上で音声メモを自動再生します。 2. Devlop Trial

Slide 21

Slide 21 text

2-1. Web NFC Media MEMO 動画データも録画・再生が可能です。 今のところ、録画の尺は設けていません。 2. Devlop Trial

Slide 22

Slide 22 text

2-1. Web NFC Media MEMO NFC Tag にはこの他にも、 様々なデータの保存が可能です。 （ウソです！種明かしは最後に） 2. Devlop Trial

Slide 23

Slide 23 text

2-2. Prepare

Slide 24

Slide 24 text

2-2. Prepare 2. Devlop Trial 一番早く API を試すことが出来る方法を紹介します。 NFC 機能が搭載された Android端末に、 Google Chrome Canary をインストール。 chrome://flags を URL バーに入力し、 Web-NFC を有効にします。 （端末の NFC機能を有効にすることも忘れずに）

Slide 25

Slide 25 text

2-2. Prepare 2. Devlop Trial localhost で挙動を確認するため、 この Android 端末を PC に接続します。 PC の Google Chrome を起動し、 More tools > Remote devices から、 接続している該当端末を選択。

Slide 26

Slide 26 text

2-2. Prepare 2. Devlop Trial Port forwarding に、開発サーバーの localhost を指定。 モバイル端末の Developer Console にアクセスします。

Slide 27

Slide 27 text

2-2. Prepare Developer Console から、Web NFC が利用可能かを確認します。 定義が存在すれば、Web NFC を試す環境が整いました。 2. Devlop Trial if ('NDEFReader' in window) { /* ... Scan NDEF Tags */ } if ('NDEFWriter' in window) { /* ... Write NDEF Tags */ }

Slide 28

Slide 28 text

3. API Overview

Slide 29

Slide 29 text

3-1. About NFC Tag

Slide 30

Slide 30 text

3-1. About NFC Tag API 詳細の話の前に、 NFC Tag について少し紹介します。 NFC Tag には様々な種類があります。 3. API Overview

Slide 31

Slide 31 text

3-1. About NFC Tag Suica / Edy などに台頭する電子マネーは、 NFC-F（Type-F）にあたります。 データ管理やセキュリティ機能が 強化されているものです。 3. API Overview

Slide 32

Slide 32 text

3-1. About NFC Tag NFC-F については、今回調べたなかでは、 Web NFC で読み書きはできませんでした。 （ただし 検出は可能） 3. API Overview

Slide 33

Slide 33 text

3-1. About NFC Tag Origin Trials の description を引用します。 Low-level I/O operation などは、対応未定とのこと。 3. API Overview Low-level I/O operations (e.g. ISO-DEP, NFC-A/B, NFC-F) and Host-based Card Emulation (HCE) are not supported within the current scope.

Slide 34

Slide 34 text

3-1. About NFC Tag 現状試すことができる API は限定的ですが、 NFC Tag を選べば、デモアプリの様なことが可能です。 3. API Overview Low-level I/O operations (e.g. ISO-DEP, NFC-A/B, NFC-F) and Host-based Card Emulation (HCE) are not supported within the current scope.

Slide 35

Slide 35 text

3-1. About NFC Tag デモアプリで利用想定しているのは、 NFC-A（Type-A）のものです。 これであれば「Web NFC」でも 読み書きをすることが可能です。 カードタイプ・シールタイプなどがあります。 3. API Overview 例（カードタイプ / ¥600 / 12枚、シールタイプ / ¥790 / 11枚）

Slide 36

Slide 36 text

3-1. About NFC Tag NPX 社の「NTAG 215 チップ（NFC-A ）」 が採用された NFC Tag は多く流通しており、 安価に入手することができます。 3. API Overview 例（カードタイプ / ¥600 / 12枚、シールタイプ / ¥790 / 11枚）

Slide 37

Slide 37 text

3-1. About NFC Tag 形だけでなく、容量も様々なものがあります。 そんなに大容量ではありません。 NTAG 213: 144Byte NTAG 215: 504Byte NTAG 216: 888Byte 3. API Overview 例（カードタイプ / ¥600 / 12枚、シールタイプ / ¥790 / 11枚）

Slide 38

Slide 38 text

3-1. About NFC Tag 読み込み可能な NFC Tag の仕様について、 より詳細な情報は以下を参照しましょう。 https://w3c.github.io/web-nfc/#x4-1-ndef-compatible-tag-types 3. API Overview

Slide 39

Slide 39 text

3-2. NDEFReader

Slide 40

Slide 40 text

3-2. NDEFReader 簡単な読み込み例を確認していきましょう。 3. API Overview const reader = new NDEFReader() reader.scan().then(() => { console.log("Scan started successfully.") reader.onreading = event => { console.log(`NDEF message read.${event.serialNumber}`) } }).catch(error => { console.log(`Error! Scan failed to start: ${error}.`) })

Slide 41

Slide 41 text

NDEFReader が NFC 読み込みに必要なインスタンスです。 scan 関数は Promise を返します。 3-2. NDEFReader 3. API Overview const reader = new NDEFReader() reader.scan().then(() => { console.log("Scan started successfully.") reader.onreading = event => { console.log(`NDEF message read.${event.serialNumber}`) } }).catch(error => { console.log(`Error! Scan failed to start: ${error}.`) })

Slide 42

Slide 42 text

3-2. NDEFReader onreading ハンドラの callback は NDEFReadingEvent を受け取ります。 3. API Overview const reader = new NDEFReader() reader.scan().then(() => { console.log("Scan started successfully.") reader.onreading = event => { console.log(`NDEF message read.${event.serialNumber}`) } }).catch(error => { console.log(`Error! Scan failed to start: ${error}.`) })

Slide 43

Slide 43 text

3-2. NDEFReader serialNumber は、物理タグ出荷時に 付与されている一意の ID です。 3. API Overview const reader = new NDEFReader() reader.scan().then(() => { console.log("Scan started successfully.") reader.onreading = event => { console.log(`NDEF message read.${event.serialNumber}`) } }).catch(error => { console.log(`Error! Scan failed to start: ${error}.`) })

Slide 44

Slide 44 text

3-2. NDEFReader serialNumber を判別することで 「一意の NFC Tag を読み込んだ」ことを判別することができます。 3. API Overview const reader = new NDEFReader() reader.scan().then(() => { console.log("Scan started successfully.") reader.onreading = event => { console.log(`NDEF message read.${event.serialNumber}`) } }).catch(error => { console.log(`Error! Scan failed to start: ${error}.`) })

Slide 45

Slide 45 text

3-3. NDEFWriter

Slide 46

Slide 46 text

3-3. NDEFWriter 書き込みもいたって簡単です。 文字列を NFC Tag に書き込んでみます。 3. API Overview const writer = new NDEFWriter() writer.write("Hello World").then(() => { console.log("Message written.") }).catch(error => { console.log(`Write failed :-( try again: ${error}.`) })

Slide 47

Slide 47 text

3-3. NDEFWriter 書き込みには、 文字列を渡すだけの方法があります。 3. API Overview const writer = new NDEFWriter() writer.write("Hello World").then(() => { console.log("Message written.") }).catch(error => { console.log(`Write failed :-( try again: ${error}.`) })

Slide 48

Slide 48 text

3-3. NDEFWriter こちらの戻り値も Promise です。 NFC Tag が検出されたタイミングで、書き込みを試みます。 3. API Overview const writer = new NDEFWriter() writer.write("Hello World").then(() => { console.log("Message written.") }).catch(error => { console.log(`Write failed :-( try again: ${error}.`) })

Slide 49

Slide 49 text

3-3. NDEFWriter 書き込むのは文字列の他に、 NDEFMessage オブジェクトを指定する方法があります。 3. API Overview const message: NDEFMessage = { records: [{ recordType: "url", data: "https://w3c.github.io/web-nfc/" }] } const writer = new NDEFWriter() writer.write(message).then(() => { console.log("Message written.") }).catch(_ => { console.log("Write failed :-( try again.") })

Slide 50

Slide 50 text

3-3. NDEFWriter 書き込むのは文字列の他に、 NDEFMessage オブジェクトを指定する方法があります。 3. API Overview const message: NDEFMessage = { records: [{ recordType: "url", data: "https://w3c.github.io/web-nfc/" }] } const writer = new NDEFWriter() writer.write(message).then(() => { console.log("Message written.") }).catch(_ => { console.log("Write failed :-( try again.") })

Slide 51

Slide 51 text

3-4. NDEFMessage

Slide 52

Slide 52 text

3-4. NDEFMessage NFC Tag の読み込み時にも、NDEFMessage を受け取ります。 この内容を読み取ってみます。 3. API Overview function consoleNDEFRecords(message: NDEFMEssage) { if (message.records.length === 0) return message.records.map(record => { const decoder = new TextDecoder() console.log(`Text: ${decoder.decode(record.data)}`) }) }

Slide 53

Slide 53 text

3-4. NDEFMessage NFC Tag に書き込まれた文字列は、直接読み取ることができません。 TextDecoder インスタンスを利用し、デコードをする必要があります。 3. API Overview function consoleNDEFRecords(message: NDEFMEssage) { if (message.records.length === 0) return message.records.map(record => { const decoder = new TextDecoder() console.log(`Text: ${decoder.decode(record.data)}`) }) }

Slide 54

Slide 54 text

3-4. NDEFMessage 1byte文字列であれば、このままでも問題ありませんが、 2byte文字を含む文字列の場合、encoding の指定が必要です。 3. API Overview function consoleNDEFRecords(message: NDEFMEssage) { if (message.records.length === 0) return message.records.map(record => { const decoder = new TextDecoder(record.encoding) console.log(`Text: ${decoder.decode(record.data)}`) }) }

Slide 55

Slide 55 text

3-4. NDEFMessage この様に、NFC-A の NFC Tag であれば、 簡単に読み書き可能であることがわかります。 3. API Overview function consoleNDEFRecords(message: NDEFMEssage) { if (message.records.length === 0) return message.records.map(record => { const decoder = new TextDecoder(record.encoding) console.log(`Text: ${decoder.decode(record.data)}`) }) }

Slide 56

Slide 56 text

3-5. NDEFRecord

Slide 57

Slide 57 text

3-5. NDEFRecord NDEFRecord について、もう少し詳しくみていきましょう。 Web IDL interface はつぎの様に定義されています。 3. API Overview interface NDEFRecord { constructor(NDEFRecordInit recordInit) readonly attribute USVString recordType readonly attribute USVString? mediaType readonly attribute USVString? id readonly attribute DataView? data readonly attribute USVString? encoding readonly attribute USVString? lang sequence? toRecords() }

Slide 58

Slide 58 text

3-5. NDEFRecord NDEFRecord のなかで必須プロパティであるのは、recordType です。 NDEFRecord の解析はこれを確認するところから始まります。 3. API Overview interface NDEFRecord { constructor(NDEFRecordInit recordInit) readonly attribute USVString recordType readonly attribute USVString? mediaType readonly attribute USVString? id readonly attribute DataView? data readonly attribute USVString? encoding readonly attribute USVString? lang sequence? toRecords() }

Slide 59

Slide 59 text

3-5. NDEFRecord recordType は任意の文字列と することができますが、 Well-known type records として取り決められている のは次の3種類です。 ■ text ■ url ■ smart-poster 3. API Overview

Slide 60

Slide 60 text

3-5. NDEFRecord recordType: "url" の record を 保持した NFC Tag を検出した 端末は、何もアプリケーション を起動していない場合、 ブラウザの起動を促します。 3. API Overview

Slide 61

Slide 61 text

3-5. NDEFRecord そのため、Web NFC を利用し recordType: "url" を指定した NDEFRecord を書き込めば、 任意の NFC Tag を ブラウザランチャーと することもできます。 3. API Overview

Slide 62

Slide 62 text

3-5. NDEFRecord recordType に アプリケーション特有の 接頭辞を付与し、検出した タグの処理を絞り込む例も 紹介されています。 ■ https://w3c.github.io/web-nfc/ 3. API Overview

Slide 63

Slide 63 text

4. Handling APIs in App

Slide 64

Slide 64 text

4-1. Permission Request

Slide 65

Slide 65 text

4-1. Permission Request Web NFC を使うアプリは、 何よりもはじめにパーミッションを 得る必要があります。 4. Handling APIs in App const reader = new NDEFReader() await reader.scan()

Slide 66

Slide 66 text

4-1. Permission Request 注意しなければいけないのは、 ページロードと同時に API をコールしないことです。 4. Handling APIs in App const reader = new NDEFReader() await reader.scan()

Slide 67

Slide 67 text

4-1. Permission Request このタイミングでコールすると、 パーミッション・プロンプトが 表示されません。 4. Handling APIs in App const reader = new NDEFReader() await reader.scan()

Slide 68

Slide 68 text

4-1. Permission Request パーミッション・プロンプトを 表示させるため、押下コールバックで API をコールする設計にしましょう。 4. Handling APIs in App const reader = new NDEFReader() await reader.scan()

Slide 69

Slide 69 text

4-1. Permission Request そして、NDEFReader インスタンスを 解放しない留意が必要です。scan が実行 されていないと、別アプリが検出に反応し、 フォアグラウンドを奪われてしまいます。 4. Handling APIs in App const reader = new NDEFReader() await reader.scan()

Slide 70

Slide 70 text

4-1. Permission Request そもそも端末設定で、NFC 機能への アクセスを拒否している場合もあります。 それらの考慮と併せ、利用できないケースを ユーザーに明示しましょう。 4. Handling APIs in App const reader = new NDEFReader() await reader.scan()

Slide 71

Slide 71 text

4-2. Permission Handling

Slide 72

Slide 72 text

4-2. Permission Handling サンプルアプリでは カメラ・マイクを利用しており、 こちらもパーミッションが必要になります。 下記関数を利用することで MediaStream が立ち上がりますが、 「カメラ・マイク」のパーミッションプロンプトも同時に表示されます。 4. Handling APIs in App function getUserMedia(constraints: MediaStreamConstraints) { return navigator.mediaDevices.getUserMedia(constraints) }

Slide 73

Slide 73 text

4-2. Permission Handling 4. Handling APIs in App アクセス権限状態の識別は重要です。 一度でも機能へのアクセスをブロックすると、 それ以降、その機能にアクセスすることができません。 （設定解除への誘導が必要） function getUserMedia(constraints: MediaStreamConstraints) { return navigator.mediaDevices.getUserMedia(constraints) }

Slide 74

Slide 74 text

4-2. Permission Handling サンプルアプリでは、Permission API を利用し、 Origin の権限状態を取得しています。 ブロックされている状況などを把握するために、 Permission API は有効です。 4. Handling APIs in App const status = await navigator.permissions.query({ name: 'nfc' }) console.log(status.state) // "granted" | "denied" | "prompt" status.onchange = () => { // dosomething ex:) re render view }

Slide 75

Slide 75 text

4-2. Permission Handling サンプルアプリでは、Permission API を利用し、 Origin の権限状態を取得しています。 ブロックされている状況などを把握するために、 Permission API は有効です。 4. Handling APIs in App const status = await navigator.permissions.query({ name: 'nfc' }) console.log(status.state) // "granted" | "denied" | "prompt" status.onchange = () => { // dosomething ex:) re render view }

Slide 76

Slide 76 text

4-2. Permission Handling query 関数で状態を知る方法と同じ様に、 request 関数でパーミッション・プロンプトを表示することもできます。 いずれも、ブラウザによってサポート状況がまちまちなので 利用する前に確認しましょう。 4. Handling APIs in App const status = await navigator.permissions.query({ name: 'nfc' }) console.log(status.state) // "granted" | "denied" | "prompt" status.onchange = () => { // dosomething ex:) re render view }

Slide 77

Slide 77 text

4-2. Permission Handling 権限状況をユーザーに知らせる View があると親切です。 権限変更された時に発火されるハンドラも指定できます。 Native API の多くは、Permission を求めるものが多いです。 利用するアプリケーションでは、手厚くサポートしていきましょう。 4. Handling APIs in App const status = await navigator.permissions.query({ name: 'nfc' }) console.log(status.state) // "granted" | "denied" | "prompt" status.onchange = () => { // dosomething ex:) re render view }

Slide 78

Slide 78 text

4-3. Media Recorder

Slide 79

Slide 79 text

4-3. Media Recorder 4. Handling APIs in App メディアの記録は、MediaRecorder を利用しています。 録音・録画がとても簡単に実現できます。 const mediaRecorder = new MediaRecorder(stream, options) mediaRecorder.onstart = () => { console.log('start rec') } mediaRecorder.onstop = () => { console.log('stop rec') } mediaRecorder.ondataavailable = event => { console.log('data available') }

Slide 80

Slide 80 text

4-3. Media Recorder メディアの記録に必要な MediaStream を立ち上げた後に、 MediaRecorder インスタンスを生成します。 4. Handling APIs in App const mediaRecorder = new MediaRecorder(stream, options) mediaRecorder.onstart = () => { console.log('start rec') } mediaRecorder.onstop = () => { console.log('stop rec') } mediaRecorder.ondataavailable = event => { console.log('data available') }

Slide 81

Slide 81 text

4-3. Media Recorder 「ondataavailable」ハンドラでは、録画データを受け取ることができます。 この録画データを、任意の方法で保存します。 4. Handling APIs in App const mediaRecorder = new MediaRecorder(stream, options) mediaRecorder.onstart = () => { console.log('start rec') } mediaRecorder.onstop = () => { console.log('stop rec') } mediaRecorder.ondataavailable = event => { console.log('data available') }

Slide 82

Slide 82 text

4-4. SerialNumber & IndexedDB

Slide 83

Slide 83 text

4-4. SerialNumber & IndexedDB デモアプリでは、NFC Tag にメディアの記録をしているかの様に、 演出を施していました。 これは種明かしをすると、NFC Tag の「serialNumber」に紐付け、 データを永続化しているだけです。 4. Handling APIs in App localforageStore.getItem(id) localforageStore.setItem(id, blob)

Slide 84

Slide 84 text

4-4. SerialNumber & IndexedDB 4. Handling APIs in App その一意の ID を key に、IndexedDB に メディア SRC である Blob を書き込んでいます。 デモアプリでは、localforage を利用しています。 IndexedDB のラッパーライブラリです。 localforageStore.getItem(id) localforageStore.setItem(id, blob)

Slide 85

Slide 85 text

4-4. SerialNumber & IndexedDB IndexedDB の取り扱いはやや煩雑です。 localStorage と同じ感覚で使えるこちらのライブラリ。 Promise を返してくれるため、設計に盛り込みやすいです。 （今回はスピード重視で選定しました） 4. Handling APIs in App localforageStore.getItem(id).then(...) localforageStore.setItem(id, blob).then(...)

Slide 86

Slide 86 text

4-5. Side Effect Handling

Slide 87

Slide 87 text

4-5. Side Effect Handling さて、ここまでで紹介した複数の API。 コールバックハンドラや Promise がほとんどで、 非同期処理のサラダボウルですね。 ひとつひとつの使い方が単純でも、順序や制御など、 アプリケーションへの統合に一工夫が必要になります。 4. Handling APIs in App

Slide 88

Slide 88 text

4-5. Side Effect Handling 4. Handling APIs in App 副作用が混在する Application は、 副作用に特化したライブラリが便利です。 私が手に馴染んでいる React では、 今回の様な アプリ色が濃いものの場合、 Redux と redux-saga を使っています。

Slide 89

Slide 89 text

4-5. Side Effect Handling 4. Handling APIs in App Store 構成は「共有機能ドメイン」と「各ページドメイン」 に分けて、Reducer や Action をそれぞれ設けています。 これらのドメインをより集め、ひとつの Store とします。 各ページドメインは「共有機能ドメインの利用者」という位置付けです。 この構成により、各々の実装が単純になっています。

Slide 90

Slide 90 text

4-5. Side Effect Handling MediaRecorder を例に見てみましょう。 録画・録音の責務は、機能ドメインで一限管理します。 4. Handling APIs in App mediaRecorder.onstart = () => { store.dispatch(creators.onStartRecording()) } mediaRecorder.onstop = () => { store.dispatch(creators.onStopRecord()) } mediaRecorder.ondataavailable = event => { const blob = new Blob([event.data], { type: 'video/webm' }) store.dispatch(creators.onDataAvailable(blob)) }

Slide 91

Slide 91 text

4-5. Side Effect Handling 4. Handling APIs in App JavaScript Native API コールバックハンドラの中で、 Redux Store の dispatch を実行しています。 mediaRecorder.onstart = () => { store.dispatch(creators.onStartRecord()) } mediaRecorder.onstop = () => { store.dispatch(creators.onStopRecord()) } mediaRecorder.ondataavailable = event => { const blob = new Blob([event.data], { type: 'video/webm' }) store.dispatch(creators.onDataAvailable(blob)) }

Slide 92

Slide 92 text

4-5. Side Effect Handling 各ページは、共有機能ドメインの Action を購読したり、 共有機能ドメイン に Action を発行します。 4. Handling APIs in App switch (action.type) { case PermanentStorageTypes.ON_SUCCESS_PUT: return handleStateByMode(state, 'ready') case MediaRecorderTypes.ON_START_RECORDING: return handleStateByMode(state, 'recording') case MediaRecorderTypes.ON_DATA_AVAILABLE: return { ...state, blob: action.payload.blob } default: return state } Page Reducer Subscribe Actions

Slide 93

Slide 93 text

4-5. Side Effect Handling 各ページは、共有機能ドメインの Action を購読したり、 共有機能ドメイン に Action を発行します。 4. Handling APIs in App const handleClickIcon = React.useCallback(() => { switch (mode) { case 'ready': dispatch(startRecording({ audio: true, video: true })) break case 'recording': dispatch(stopRecording()) } }, [mode]) Page Component Dispatch Actions

Slide 94

Slide 94 text

4-5. Side Effect Handling 今回のデモアプリで redux-saga が最も役にたったシーンは、 メディアの録画開始時に表示されるカウントダウン機能です。 これは演出以外にも、重要な役割を担っています。 カメラの起動直後（MediaStream 開始直後）暗い場所などでは 露出補正のため数秒間暗くなってしまう瞬間があります。 このタイミングで録画を始めてしまうと、良い画が撮れません。 4. Handling APIs in App

Slide 95

Slide 95 text

4-5. Side Effect Handling カウントダウンも一種の副作用であり、非同期処理といえます。 カウントダウン中に生じる別の副作用（画面遷移など）が問題になり得ます。 4. Handling APIs in App let count = 4 while (count) { const [normal, abnormal] = yield race([ call(countDownStep), call(countDownCancel) ]) if (abnormal !== undefined) break count -= normal yield put(creators.onCountDown(count)) }

Slide 96

Slide 96 text

4-5. Side Effect Handling この様な問題も saga-effect の組み合わせで克服することができます。 イレギュラーなケースもカバーしてくれる、心強い味方です。 4. Handling APIs in App let count = 4 while (count) { const [normal, abnormal] = yield race([ call(countDownStep), call(countDownCancel) ]) if (abnormal !== undefined) break count -= normal yield put(creators.onCountDown(count)) }

Slide 97

Slide 97 text

まとめ

Slide 98

Slide 98 text

機能が複雑・複合的になると、 非同期処理が入り乱れることが分かりました。 Redux・redux-saga の例を紹介しましたが、 非同期処理に強いライブラリは様々なものがありますので、 手に馴染むものを見つけてみてください。 まとめ

Slide 99

Slide 99 text

まとめ Google Chrome の Experimental Features は、 面白いものが盛りだくさんです。 Native API にどんどんリーチできる様になっています。 アイディア次第で「便利・おもしろい」 アウトプットができそうです。

Slide 100

Slide 100 text

まとめ Experimental Features のトライアルが、 新しいサービスの種になるかもしれません。 ぜひ、挑戦してみてください。

Slide 101

Slide 101 text

ご静聴ありがとうございました