Webでできる体験を考える会 / On the possibilities of PWA experience

Transcript

1. 8FCͰͰ͖ΔମݧΛߟ͑Δձ 折原 レオナルド賢

2. ڈ೥ͷ͍·͝Ζ

3. None
4. None
5. None

6. ࿩͢͜ͱ ͍ΖΜͳ 8FC
   "1*
   Λ৮ͬͯΈΔ ࢖ͬͨ͜ͱͳ͍ਓͰ΋Θ͔Γ΍͘͢ Ͱ΋ʮߟ͑ΔձʯͳͷͰൃలܕ΋ఴ͑ͯ

7. ࿩͢τϐοΫ  ໐Δ΋ͷɾಈ͘΋ͷͷ"1*  8FC
   "TTFNCMZ
   ͱ 8FC
   8PSLFS  1VTI
   "1*

8. 8FC
   "VEJP
   "1*
   
   8FC(-
   
   8FC
   #MVFUPPUI
   
   8FC
   .*%*
   "1*  ໐Δ΋ͷɾಈ͘΋ͷͷ"1*

9. ໐Δ΋ͷ

10. 8FC
    "VEJP
    "1*
    ͜ͱ͸͡Ί const context: AudioContext = new (window.AudioContext || window.webkitAudioContext)(); AudioContext

    Λ࡞੒͢Δͱ͜Ζ͔Β͸͡·Δ

11. 8FC
    "VEJP
    "1*
    ͜ͱ͸͡Ί const context: AudioContext = new (window.AudioContext || window.webkitAudioContext)(); const

    sourceNode: AudioBufferSourceNode = context.createBufferSource(); const gainNode: GainNode = context.createGain(); const biquadFilterNode: BiquadFilterNode = context.createBiquadFilter(); const analyserNode: AnalyserNode = context.createAnalyser(); biquad Filter Node source Node gain Node analyser Node

12. 8FC
    "VEJP
    "1*
    ͜ͱ͸͡Ί const context: AudioContext = new (window.AudioContext || window.webkitAudioContext)(); const

    sourceNode: AudioBufferSourceNode = context.createBufferSource(); const gainNode: GainNode = context.createGain(); const biquadFilterNode: BiquadFilterNode = context.createBiquadFilter(); const analyserNode: AnalyserNode = context.createAnalyser(); biquad Filter Node source Node gain Node analyser Node "VEJP#VGGFS4PVSDF/PEF TUBSU XIFO
    PGGTFU
    EVSBUJPO  TUPQ XIFO  CVGGFS
    
    Իָσʔλ BT
    "VEJP#VGGFS MPPQ
    
    USVF ԻݯΛઃఆɾૢ࡞

13. 8FC
    "VEJP
    "1*
    ͜ͱ͸͡Ί const context: AudioContext = new (window.AudioContext || window.webkitAudioContext)(); const

    sourceNode: AudioBufferSourceNode = context.createBufferSource(); const gainNode: GainNode = context.createGain(); const biquadFilterNode: BiquadFilterNode = context.createBiquadFilter(); const analyserNode: AnalyserNode = context.createAnalyser(); biquad Filter Node source Node gain Node analyser Node (BJO/PEF HBJOWBMVF 
    
    ʙ  ԻྔΛίϯτϩʔϧ

14. 8FC
    "VEJP
    "1*
    ͜ͱ͸͡Ί const context: AudioContext = new (window.AudioContext || window.webkitAudioContext)(); const

    sourceNode: AudioBufferSourceNode = context.createBufferSource(); const gainNode: GainNode = context.createGain(); const biquadFilterNode: BiquadFilterNode = context.createBiquadFilter(); const analyserNode: AnalyserNode = context.createAnalyser(); biquad Filter Node source Node gain Node analyser Node #JRVBE'JMUFS/PEF UZQF
    
    ༻ҙ͞ΕͨΤϑΣΫλʔΛֻ͚Δ GSFRVFODZWBMVF  
    ʙ  2WBMVF 
    ʿ ʙ ʿ ʞMPXQBTTʟ ʞIJHIQBTTʟ ʞCBOEQBTTʟ ʞMPXTIFMGʟ ʞIJHITIFMGʟ FUD

15. 8FC
    "VEJP
    "1*
    ͜ͱ͸͡Ί const context: AudioContext = new (window.AudioContext || window.webkitAudioContext)(); const

    sourceNode: AudioBufferSourceNode = context.createBufferSource(); const gainNode: GainNode = context.createGain(); const biquadFilterNode: BiquadFilterNode = context.createBiquadFilter(); const analyserNode: AnalyserNode = context.createAnalyser(); biquad Filter Node source Node gain Node analyser Node "OBMZTFS/PEF ԻͷσʔλΛऔಘ͢Δ const analyzerParams = { times: new Uint8Array(analyserNode.frequencyBinCount), freqs: new Uint8Array(48), }; analyserNode.getByteTimeDomainData(analyzerParams.times); analyserNode.getByteFrequencyData(analyzerParams.freqs);

16. getByteTimeDomainData ͰऔಘͰ͖Δσʔλ getByteFrequencyData ͰऔಘͰ͖Δσʔλ

17. ֤ /PEF
    ͷ഑ઢ biquad Filter Node source Node gain Node analyser

    Node sourceNode.buffer = SOUND_BUFFER; sourceNode.connect(gainNode); gainNode.connect(biquadFilterNode); biquadFilterNode.connect(analyserNode); analyserNode.connect(context.destination); connect connect connect context.destination connect SOUND_BUFFER

18. 4PVOE
    8BMLFS
    ͷ഑ઢ

19. 4PVOE
    8BMLFS
    ͷ഑ઢ IUUQTZPVUVCF&:X089CCOL

20. 4PVOE
    8BMLFS
    ͷ഑ઢ IUUQTZPVUVCF9I%1D53VT

21. 4PVOE
    8BMLFS
    ͷ഑ઢ IUUQTZPVUVCF(1%OT$FG7I&

22. ಈ͘΋ͷ

23. 8FC(-
    ͜ͱ͸͡Ί ͞ΘͬͯΈΔͳΒϥΠϒϥϦ͕γϯϓϧ

24. 8FC(-
    ͜ͱ͸͡Ί IUUQTEFNPTMJUUMFXPSLTIPQGSUSBDL IUUQTJNNFSTJWFHDPNXJTIFT

25. 8FC(-
    ͜ͱ͸͡Ί import * as THREE from 'three'; const scene =

    new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); document.getElementById('screen').appendChild(renderer.domElement); scene camera γʔϯͱΧϝϥ͕Ͱ͖Δ ͜ΕΛ DBOWBT
    ͱͯ͠ %0.΁௥Ճ

26. ΦϒδΣΫτΛੜ੒͢Δ const geometry = new THREE.BoxGeometry(1, 1, 1); const material

    = new THREE.MeshBasicMaterial({ color: 0x000000 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); ཱํମ͕ઃஔ͞Εͨ scene cube

27. ϏδϡΞϥΠβʔͷத਎ ٖࣅίʔυ const rectShape = new THREE.Shape(); const OFFSET =

    円の中心から付け根の距離; rectShape.moveTo( OFFSET * cos(角度) + (幅 / 2) * cos(角度 + π / 2), // X座標 OFFSET * sin(角度) + (幅 / 2) * sin(角度 + π / 2) // Y座標 ); rectShape.lineTo( OFFSET * cos(角度) + (幅 / 2) * cos(角度 - π / 2), OFFSET * sin(角度) + (幅 / 2) * sin(角度 - π / 2) ); rectShape.lineTo( 振幅 * cos(角度) + (幅 / 2) * cos(角度 + π / 2), 振幅 * sin(角度) + (幅 / 2) * sin(角度 + π / 2) ); rectShape.lineTo( 振幅 * cos(角度) + (幅 / 2) * cos(角度 - π / 2), 振幅 * sin(角度) + (幅 / 2) * sin(角度 - π / 2) ); ← OFFSET→

28. ϏδϡΞϥΠβʔͷத਎ ٖࣅίʔυ const rectShape = new THREE.Shape(); const OFFSET =

    円の中心から付け根の距離; rectShape.moveTo( OFFSET * cos(角度) + (幅 / 2) * cos(角度 + π / 2), // X座標 OFFSET * sin(角度) + (幅 / 2) * sin(角度 + π / 2) // Y座標 ); rectShape.lineTo( OFFSET * cos(角度) + (幅 / 2) * cos(角度 - π / 2), OFFSET * sin(角度) + (幅 / 2) * sin(角度 - π / 2) ); rectShape.lineTo( 振幅 * cos(角度) + (幅 / 2) * cos(角度 + π / 2), 振幅 * sin(角度) + (幅 / 2) * sin(角度 + π / 2) ); rectShape.lineTo( 振幅 * cos(角度) + (幅 / 2) * cos(角度 - π / 2), 振幅 * sin(角度) + (幅 / 2) * sin(角度 - π / 2) ); ← OFFSET→ ͜͜ͷৼ෯̍ຊ

29. ը໘ͷస׵ IUUQTZPVUVCF)QOVR/&:

30. ը໘ͷస׵ 5ISFFKT DBOWBT 3FBDUKT $PNQPOFOUT 5ISFFKT DBOWBT ͕͜͜ τϥϯδγϣϯ ͍ͯ͠Δ

31. ը໘ͷస׵ const material = new THREE.ShaderMaterial({ ... }); const curtain

    = new THREE.Mesh(geometry, material); ShaderMaterial Λ࢖͏ͱɺ(-4-
    ͕ॻ͚Δ

32. ը໘ͷస׵ uniform float mixRatio; uniform sampler2D tDiffuse1; uniform sampler2D tDiffuse2;

    varying vec2 vUv; void main() { vec4 tex1 = texture2D(tDiffuse1, vUv); vec4 tex2 = texture2D(tDiffuse2, vUv); gl_FragColor = mix(tex2, tex1, mixRatio); } const material = new THREE.ShaderMaterial({ }); material.uniforms.mixRatio.value = transition; mixRatio ΛมԽͤ͞Δ͜ͱͰ ̎ͭͷγʔϯΛ੾Γସ͑Δ

33. QPTUQSPDFTTJOH TDFOF
    ʹඳը͞ΕͯΔϞϊͨͪશͯʹӨڹΛ༩͑ΔΤϑΣΫτ IUUQTZPVUVCF%N:[6BHPT

34. QPTUQSPDFTTJOH
    5ISFFKT import { EffectComposer, RenderPass, EffectPass, GlitchEffect } from

    'postprocessing'; const composer = new EffectComposer(renderer); composer.addPass(new RenderPass(scene, camera)); const glitchEffect = new GlitchEffect(); const glitchPass = new EffectPass(camera, glitchEffect); glitchPass.renderToScreen = false; composer.addPass(glitchPass); ͜ΕͰɺ͹Γ͹Γ͢Δԋग़͕ SFOEFSFS
    શମʹ͔͔Δ

35. ΞϯνΤΠϦΞεॲཧ import { EffectPass, SMAAEffect } from 'postprocessing'; const smaaEffect

    = new SMAAEffect(); smaaEffect.setEdgeDetectionThreshold(0.08); const smaaPass = new EffectPass(camera, smaaEffect); smaaPass.renderToScreen = false; composer.addPass(smaaPass); SMAAEffect Λ࢖͏͜ͱͰ SFOEFSFS
    શମʹΞϯνΤΠϦΞε͕͔͔Δ

36. දݱʗମݧΛߟ͑Δ

37. ԕ͘ͳ͍ະདྷͰ͸ 8FC
    ͷήʔϜ 18" ͰΞϓϦฒΈʹ༡΂Δ͸ͣ

38. ΞϓϦͱൺ΂ͯͷϝϦοτ ɾ63-
    Λ౿Ί͹༡΂Δ ɾ8FC
    ͍ͬͯ͏Πϯελϯτੑ ɾγΣΞͷ͠΍͢͞ ͜ΕΛ׆͔ͯ͠ɺ༡ͼํ΋ 1SPHSFTTJWF
    ʹͪ͠Ό͑͹

39. ήʔϜηϯλʔͬͯͲ͏͍͏࣌ʹߦ͘ʁ Ո͡ΌͰ͖ͳ͍༡ͼํΛ͍ͨ࣌͠ ͨͱ͑͹ ݸਓͷ੠

40. ࣗ෼Ͱଗ͑ΒΕͳ͍ػࡐ͕͋Δͱ͜ΖͰ༡Ϳ

41. ྟ৔ײͨͬ΀ΓͳεϐʔΧʔ ͕͋ͬͨΓ େഭྗͷϏδϡΞϥΠβʔ͕͋ͬͨΓ ը૾Ҿ༻ɿ %+."9
    NPTFT

42. ໘ന͔ͬͨήʔϜΛ 18"
    Ͱ࣋ͪؼΔ

43. %&.0 %+
    ϛΩαʔͷ .*%*
    ௨৴Λ #MVFUPPUI
    ʹͷͤͯ 8FC
    Ͱड͚औͬͯΤϑΣΫλʔΛ͔͚ͯΈΑ͏ IUUQTZPVUVCFWR/T/P':

44. 8FC
    #MVFUPPUI const device = await navigator.bluetooth.requestDevice({ filters: [{ services: [UUID.SERVICE]

    }], }); const server = await device.gatt.connect(); const service = await server.getPrimaryService(UUID.SERVICE); const characteristic = await service.getCharacteristic(UUID.CHARACTERISTIC); await characteristic.startNotifications(); const UUID = { SERVICE: '03b80e5a-ede8-4b33-a751-6ce34ec4c700‘, CHARACTERISTIC: '7772e5db-3868-4112-a1a9-f2669d106bf3', }; .*%*
    σόΠεͷ 66*%

45. .*%*
    #MVFUPPUI navigator.requestMIDIAccess({ sysex: true }) .then(onMIDISuccess, onMIDIFailure); ͦͷͨΊ .*%*
    ͷΞΫηε΋΋Β͓ͬͯ͘ ը૾Ҿ༻ɿ"NB[PODPN

    #MVFUPPUI
    Λ௨ͯ͠ .*%*
    ͷ௨৴͕Ͱ͖ΔΑ͏ʹͳΔϞϊ .*%*
    ϙʔτ΍ 64#
    ϙʔτ͕ͳ͍ σόΠεͰ΋ .*%*
    ௨৴͕Ͱ͖Δ

46. ΤϑΣΫλʔΛૢ࡞͢Δ characteristic.addEventListener( 'characteristicvaluechanged‘, (event) => { const data = event.target.value;

    てきとうに処理... } ) biquad Filter Node ૢ࡞ .*%*
    ͸ $-0$,
    γάφϧ͕͋ΔͨΊ characteristicvaluechanged ͸ΊͬͪΌൃՐ͢Δ ஫ҙ

47. 8FC
    "TTFNCMZ
    
    8FC
    8PSLFS
    
    8FC
    $SZQUP
    "1*  8FC
    "TTFNCMZ
    ͱ 8FC
    8PSLFS

48. 8FC
    "TTFNCMZ

49. 8FC
    "TTFNCMZ ϒϥ΢β༻ͷόΠφϦίʔυΛ༻ҙͯ͠ ͦΕΛ +BWB4DSJQU
    ଆ͔Βಈ͔ٕ͢ज़ XBTN

50. XBTN ͷ࡞Γํ $
    
    $
    
    --7. 3VTU wasm-pack (P ,PUMJO/BUJWF ͜ΕΒͷࢿ࢈Λ 8FC
    ʹ࣋ͪࠐΉ͜ͱ͕Ͱ͖Δ

51. FNTDSJQUFO % emcc -O3 file.c -o file.wasm ୯ҰϑΝΠϧʹରͯ͠ % ./emconfigure

    ./configure % ./emmake make % emcc -O3 project.bc -o project.wasm ϓϩδΣΫτʹରͯ͠ -O3 ͸ϦϦʔεϏϧυʹదͨ͠࠷దԽ େจࣈͷΦʔͱ θϩ͡Όͳ͍Α

52. $
    ˠ XBTN ͷಓͷΓ #include <emscripten.h> EMSCRIPTEN_KEEPALIVE int add(int x, int

    y) { return x + y; } EMSCRIPTEN_KEEPALIVE ࢀর͕ͳ͍ؔ਺͕࠷దԽͰ ফ͞Εͯ͠·͏ Λ͚ͭͳ͍ͱɺ % emcc -O3 add.c -o add.wasm add.c ͬͦ͘͞Ͱ͖ͨ

53. +BWB4DSJQU
    Ͱಈ͔͢ const { instance } = await WebAssembly.instantiateStreaming(fetch('add.wasm'), {}); const

    result = instance.exports.add(1, 1); console.log(result); // -> 2 WebAssembly ʹ͸ଞͷಡΈࠐΈํ΋༻ҙ͞Ε͍ͯΔ instantiateStreaming ͕Ұ൪ޮ཰త ͚Ͳ

54. ݟ͔ͭΒͳ͍ NPEVMF ͍ΖΜͳ NPEVMF
    ͕ͳ͍ΑͱݴΘΕΔ ελϯυΞϩϯͰಈ͔ͳ͍ܗࣜͰ XBTN ʹίϯύΠϧ͖ͯͯ͠Δ Ͱ΋ɺͦͬͪͷ΄͏͕ܰྔͩ͠ແବ͕ͳ͍

55. ݟ͔ͭΒͳ͍ NPEVMF await WebAssembly.instantiateStreaming(fetch('add.wasm'), imports); ͖ͬ͞͝·͔͍ͯͨ͠ୈҾ਺Λ͔ͭͬͯɺ ͦΕͧΕͷ NPEVMF
    Λఆ͍ٛͯ͘͠ඞཁ͕͋Δ const imports

    = { env: { __memory_base: 0, memory: new WebAssembly.Memory({ initial: 512 }), wasi_snapshot_preview1: (args) => { console.log(args); } } }; ͜Μͳ͔Μ͡

56. XBTN ͔Β JNQPSU
    ͨؔ͠਺ console.log('instance.exports.add →', instance.exports.add); OBUJWF
    DPEF
    ʹͳ͍ͬͯΔ

57. "TTFNCMZ4DSJQU export function add(a: i32, b: i32): i32 { return

    a + b; } 5ZQF4DSJQU
    ͷײ֮Ͱॻ͚Δ % npm install --save-dev assemblyscript % npx asc add.ts -b add.wasm -O3 ɾͪΐͬͱ +4
    ͷॲཧૣ͍ͨ͘͠ͱ͜Ζ͕͋Δ ɾܭࢉΛଟ͘ͷ৔ॴͰ࢖͍ճ͢ $$
    ͱ͔͸ա৒͚ͩͲ ͜͏͍͏ͱ͖ʹศར

58. 8FC
    8PSLFS 8FC
    8PSLFS

59. 8FC
    8PSLFS +BWB4DSJQU
    ΛϝΠϯεϨου͔Β֎ͯ͠ɺ όοΫάϥ΢ϯυʹ͢Δٕज़ +BWB4DSJQU ϝΠϯεϨου 8PSLFS εϨου ॏ͍ॲཧ͸ ϝΠϯεϨουΛࢭΊͯ͠·͏ 8PSLFS
    ʹ·͔ͤͯ

    ऴΘͬͨΒڭ͑ͯ΋Β͏ ݟͯͷ௨Γ ॏ͍ॲཧ

60. 8FC
    8PSLFS
    Λ૊ΈࠐΉ const worker = new Worker('worker.js'); ͜ͷ࣌఺͔Β ͸ಈ͖࢝ΊΔ worker.js 8PSLFS
    ࣗମ͸ී௨ͷ

    +BWB4DSJQU ͨͩɺσʔλͷड͚౉͠͸ QPTU.FTTBHF Ͱߦ͏ worker.postMessage('Hello from client');

61. σʔλͷड͚౉͠ const worker = new Worker('worker.js'); worker.postMessage('Hello from client'); worker.addEventListener('message',

    (message) => { console.log(message.data); // -> 'Hello from worker' }); DMJFOUKT self.postMessage('Hello from worker'); self.addEventListener('message', (message) => { console.log(message.data); // -> 'Hello from client' }); XPSLFSKT self ͸ͳͯ͘΋ಈ͘ const worker: Worker = self; Ͱ΋ඍົʹܕ͕ҧ͏͔Β 5ZQF4DSJQU
    ͳΒɺ ͱͯ͠΋Α͍

62. σʔλͷड͚౉͠ͷࠔΔͱ͜Ζ ී௨ʹ QPTU.FTTBHF ͰσʔλૹΔͱίϐʔ͞ΕΔ ॏ͍ॲཧ͕Ͱ͖ΔͬͯݴͬͯΔ͚Ͳ .# ͘Β͍ͷಈըϑΝΠϧͳΜͯૹͬͨΒɺ ίϐʔ͞Εͯ (# ΋ϝϞϦΛͻͬഭͯ͠͠·͏

    5SBOTGFSBCMF
    0CKFDU
    Λ࢖͏ʂ

63. 5SBOTGFSBCMF
    0CKFDU const video = new Uint8Array(500 * 1024 * 1024);

    worker.postMessage({ type: 'SEND_VIDEO', video }, [video.buffer]); QPTU.FTTBHF ͷୈҾ਺ʹ "SSBZ
    Ͱ "SSBZ#VGGFS ͔ .FTTBHF1PSU ͔ *NBHF#JUNBQ Λ౉͢ 8PSLFS DMJFOU video

64. 5SBOTGFSBCMF
    0CKFDU const video = new Uint8Array(500 * 1024 * 1024);

    worker.postMessage({ type: 'SEND_VIDEO', video }, [video.buffer]); QPTU.FTTBHF ͷୈҾ਺ʹ "SSBZ
    Ͱ "SSBZ#VGGFS ͔ .FTTBHF1PSU ͔ *NBHF#JUNBQ Λ౉͢ 8PSLFS DMJFOU video video ͸ DMJFOU
    ͔Βॴ༗ݖ͕ 8PSLFS
    ʹҠΔ QPTU.FTTBHF ޙ DMJFOU
    ͰࢀরͰ͖ͳ͍

65. ଎͞ͷҧ͍ DMJFOU
    ଆ worker.postMessage({ type: 'START_TIMER' }); const video = new

    Uint8Array(500 * 1024 * 1024); worker.postMessage({ type: 'SEND_VIDEO', video }); DMJFOUKTʢͦͷ··ૹΔʣ worker.postMessage({ type: 'START_TIMER' }); const video = new Uint8Array(500 * 1024 * 1024); worker.postMessage({ type: 'SEND_VIDEO', video }, [video.buffer]); DMJFOUKTʢ5SBOTGFSBCMF
    0CKFDUʣ

66. ଎͞ͷҧ͍ XPSLFS
    ଆ let startTime = null; self.addEventListener('message', (message) => {

    const { type, video } = message.data; switch (type) { case 'START_TIMER': startTime = performance.now(); break; case 'SEND_VIDEO': console.log(performance.now() - startTime); break; } }); XPSLFSKT

67. ଎͞ͷҧ͍ ݁Ռ DMJFOUKTʢͦͷ··ૹΔʣ DMJFOUKTʢ5SBOTGFSBCMF
    0CKFDUʣ 866.2800000165589 <NT> 0.9349999600090086 <NT> ര଎ ͍ͭͰʹলϝϞϦ

68. දݱʗମݧΛߟ͑Δ

69. ը૾ʗಈըΞϓϦ͕ΊͬͪΌߴػೳʹͳͬͯΔ ࡱͬͨΒ͙͢ʹ $MPVE
    ʹ͕͋ͬͯ ୭͕ࣸͬͯΔ͔ɺͲ͜ʹ͍͔ͨ·ͱΊͯ͘ΕΔ ৔ॴผ ਓ෺ผ ͱͯ΋΂ΜΓʂ

70. ҰํͰ ࣗ෼ͷࣸਅɾಈըΛʠͱ΍͔͘ʡ͞Εͨ͘ͳ͍ਓ͍ͩͬͯΔ ʮͰ΋ɺ$MPVE
    ʹ͋͛ΕͨΒɺखݩͷ༰ྔݮΒͤΔ͠ͳʔʜʯ ʠͱ΍͔͘ʡ͞Εͨ͘ͳ͍ਓɿ ʮϓϥΠϕʔτΫϥ΢υΈ͍ͨͷ࢖͑͹ʁʯ ఢɿ ʮͦ͏͍͏ͷͬͯຊ౰ʹ๣ௌ͞Εͯͳ͍͔ͱ͔ɺ ෼ੳʹ࢖ΘΕͯͳ͍͔ͱ͔Θ͔Μͳ͘ͳ͍ʁʁʯ ʠͱ΍͔͘ʡ͞Εͨ͘ͳ͍ਓɿ

71. ࣗ෼ͰʢϩʔΧϧͰʣ΍Δ͔͠ͳ͍͡ΌΜʂ ը૾͸αϜωΠϧ੾Γग़͠Λͯ͠ ಈը͸Τϯίʔυ
    αϜωΠϧ੾Γग़͠Λͯ͠ ҉߸Խͨ͠΋ͷ͚ͩΛ֎ʹग़͢Α͏ʹ͠Α͏ ΍Δ͔͠ͳ͍ ʢʠͱ΍͔͘ʡ͞Εͨ͘ͳ͍ਓஊ ʣ

72. ΍Δͧ ҉߸Խ͞Εͯͳ͍σʔλΛͲ͔͜ʹૹΔͳΜͯͰ͖ͳ͍ʂ ը૾ͷαϜωΠϧԽ *NBHF.BHJDL ͕࢖͑ͦ͏ ಈըͷΤϯίʔυ ''.1&(
    ͕͍͍ͳ

73. <script type="module"> import * as Magick from 'https://knicknic.github.io/wasm-imagemagick/magickApi.js'; const call

    = async function() { const fetchedSourceImage = await fetch('sample.png‘); const arrayBuffer = await fetchedSourceImage.arrayBuffer(); const sourceBytes = new Uint8Array(arrayBuffer); const files = [{ name: 'srcFile.png', content: sourceBytes }]; const command = ['convert', 'srcFile.png', '-rotate', '90', '-resize', '200%', 'out.png']; const processedFiles = await Magick.Call(files, command); const firstOutputImage = processedFiles[0]; document.getElementById('rotatedImage').src = URL.createObjectURL(firstOutputImage['blob']); console.log('created image ' + firstOutputImage['name']); }; call(); </script> XBTNJNBHFNBHJDL *NBHF.BHJDL Λ XBTN Ͱಈ࡞Ͱ͖ΔΑ͏ʹͯ͘͠ΕͯΔϞδϡʔϧ

74. <script type="module"> import * as Magick from 'https://knicknic.github.io/wasm-imagemagick/magickApi.js‘; const call

    = async function() { const fetchedSourceImage = await fetch('sample.png‘); const arrayBuffer = await fetchedSourceImage.arrayBuffer(); const sourceBytes = new Uint8Array(arrayBuffer); const files = [{ name: 'srcFile.png', content: sourceBytes }]; const command = ['convert', 'srcFile.png', '-rotate', '90', '-resize', '200%', 'out.png']; const processedFiles = await Magick.Call(files, command); const firstOutputImage = processedFiles[0]; document.getElementById('rotatedImage').src = URL.createObjectURL(firstOutputImage['blob']); console.log('created image ' + firstOutputImage['name']); }; call(); </script> XBTNJNBHFNBHJDL *NBHF.BHJDL Λ XBTN Ͱಈ࡞Ͱ͖ΔΑ͏ʹͯ͘͠ΕͯΔϞδϡʔϧ ͜Εܥɺσʔλ͸͍͍ͩͨ "SSBZ#VGGFS Ͱ΍ΓͱΓ͢Δ

75. <script type="module"> import * as Magick from 'https://knicknic.github.io/wasm-imagemagick/magickApi.js‘; const call

    = async function() { const fetchedSourceImage = await fetch('sample.png‘); const arrayBuffer = await fetchedSourceImage.arrayBuffer(); const sourceBytes = new Uint8Array(arrayBuffer); const files = [{ name: 'srcFile.png', content: sourceBytes }]; const command = ['convert', 'srcFile.png', '-rotate', '90', '-resize', '200%', 'out.png']; const processedFiles = await Magick.Call(files, command); const firstOutputImage = processedFiles[0]; document.getElementById('rotatedImage').src = URL.createObjectURL(firstOutputImage['blob']); console.log('created image ' + firstOutputImage['name']); }; call(); </script> XBTNJNBHFNBHJDL *NBHF.BHJDL Λ XBTN Ͱಈ࡞Ͱ͖ΔΑ͏ʹͯ͘͠ΕͯΔϞδϡʔϧ *NBHF.BHJDL Ͱ࢖͑ΔίϚϯυ͸͍͍ͩͨಈ͘

76. const ffmpeg = new Worker('/workers/ffmpeg-worker-webm.js'); const call = async ()

    => { const fetchedSourceMov = await fetch('sample.mov'); const arrayBuffer = await fetchedSourceMov.arrayBuffer(); const item = new Uint8Array(arrayBuffer); await new Promise((resolve, reject) => { ffmpeg.postMessage({ type: 'run', MEMFS: [{ name: 'input', data: item }], arguments: ['-ss', '2', '-i', 'input', '-f', 'image2', '-vframes', '1', 'out.jpg'] }); }); }; call(); GGNQFHKT GGNQFH Λ XBTN ͱ XPSLFS
    Ͱಈ࡞Ͱ͖ΔΑ͏ʹͯ͘͠ΕͯΔϞδϡʔϧ

77. const ffmpeg = new Worker('/workers/ffmpeg-worker-webm.js'); const call = async ()

    => { const fetchedSourceMov = await fetch('sample.mov'); const arrayBuffer = await fetchedSourceMov.arrayBuffer(); const item = new Uint8Array(arrayBuffer); await new Promise((resolve, reject) => { ffmpeg.postMessage({ type: 'run', MEMFS: [{ name: 'input', data: item }], arguments: ['-ss', '2', '-i', 'input', '-f', 'image2', '-vframes', '1', 'out.jpg'] }); }); }; call(); GGNQFHKT GGNQFH Λ XBTN ͱ XPSLFS
    Ͱಈ࡞Ͱ͖ΔΑ͏ʹͯ͘͠ΕͯΔϞδϡʔϧ ઌʹशͬͯ "SSBZ#VGGFS ʹͯ͠Δ͚ͩ

78. const ffmpeg = new Worker('/workers/ffmpeg-worker-webm.js'); const call = async ()

    => { const fetchedSourceMov = await fetch('sample.mov'); const arrayBuffer = await fetchedSourceMov.arrayBuffer(); const item = new Uint8Array(arrayBuffer); await new Promise((resolve, reject) => { ffmpeg.postMessage({ type: 'run', MEMFS: [{ name: 'input', data: item }], arguments: ['-ss', '2', '-i', 'input', '-f', 'image2', '-vframes', '1', 'out.jpg'] }); }); }; call(); GGNQFHKT GGNQFH Λ XBTN ͱ XPSLFS
    Ͱಈ࡞Ͱ͖ΔΑ͏ʹͯ͘͠ΕͯΔϞδϡʔϧ .&.'4 8FC
    "TTFNCMZ
    Ͱ࣋ͬͯΔϑΝΠϧγεςϜͷ̍ͭ ϝϞϦۭؒΛ࢖ͬͨϑΝΠϧγεςϜ

79. ffmpeg.onmessage = (event) => { switch (event.data.type) { case 'done':

    if (msg.data.MEMFS[0]) { const textDecoder = new TextDecoder(); const thumbUnit8 = msg.data.MEMFS[0].data; const img = textDecoder.decode(thumbUnit8); document.getElementById('thumb').src = img; } break; } }; GGNQFHKTʢσʔλͷडऔʣ

80. ffmpeg.onmessage = (event) => { switch (event.data.type) { case 'done':

    if (msg.data.MEMFS[0]) { const textDecoder = new TextDecoder(); const thumbUnit8 = msg.data.MEMFS[0].data; const img = textDecoder.decode(thumbUnit8); document.getElementById('thumb').src = img; } break; } }; GGNQFHKTʢσʔλͷडऔʣ #ZUF
    4USFBN
    Λ 4USJOH
    ʹ͢ΔͨΊ

81. ͋ͱ͸҉߸Խ αʔόʔΛ࢖Θͣʹɺ +BWB4DSJQU
    ͚ͩͰαϜωΠϧɺΤϯίʔυ͕Ͱ͖ͦ͏ʂ ҉߸Խ΋ࣗલͰ΍͔ͬͯΒαʔόʔʹσʔλΛૹΖ͏ XBTN ͨͪ

82. 8FC
    $SZQUP
    "1*

83. 8FC
    $SZQUP
    "1* ·ͣɺݤΛͭ͘Δ const cryptoKey: CryptoKey = await crypto.subtle.generateKey( { name:

    'AES-GCM', length: 256 }, true, ['encrypt', 'decrypt'] ); const jwk = await crypto.subtle.exportKey('jwk', cryptoKey); ࡞ΓऴΘͬͨΒ FYQPSU
    ͯ͠ *OEFYFE%# ͱ͔ʹอଘ͓ͯ͘͠ͱྑ͍

84. 8FC
    $SZQUP
    "1* ·ͣɺݤΛͭ͘Δ const cryptoKey: CryptoKey = await crypto.subtle.generateKey( { name:

    'AES-GCM', length: 256 }, true, ['encrypt', 'decrypt'] ); ҉߸Խར༻Ϟʔυ const jwk = await crypto.subtle.exportKey('jwk', cryptoKey); ࡞ΓऴΘͬͨΒ FYQPSU
    ͯ͠ *OEFYFE%# ͱ͔ʹอଘ͓ͯ͘͠ͱྑ͍

85. 8FC
    $SZQUP
    "1* ·ͣɺݤΛͭ͘Δ const cryptoKey: CryptoKey = await crypto.subtle.generateKey( { name:

    'AES-GCM', length: 256 }, true, ['encrypt', 'decrypt'] ); ݤ͕ΤΫεϙʔτՄೳ͔Ͳ͏͔ ҉߸Խར༻Ϟʔυ const jwk = await crypto.subtle.exportKey('jwk', cryptoKey); ࡞ΓऴΘͬͨΒ FYQPSU
    ͯ͠ *OEFYFE%# ͱ͔ʹอଘ͓ͯ͘͠ͱྑ͍

86. 8FC
    $SZQUP
    "1* ·ͣɺݤΛͭ͘Δ const cryptoKey: CryptoKey = await crypto.subtle.generateKey( { name:

    'AES-GCM', length: 256 }, true, ['encrypt', 'decrypt'] ); ҉߸Խͱ෮߸Խ͕ڐՄ͞Εͨݤ ݤ͕ΤΫεϙʔτՄೳ͔Ͳ͏͔ ҉߸Խར༻Ϟʔυ const jwk = await crypto.subtle.exportKey('jwk', cryptoKey); ࡞ΓऴΘͬͨΒ FYQPSU
    ͯ͠ *OEFYFE%# ͱ͔ʹอଘ͓ͯ͘͠ͱྑ͍

87. 'JMF
    Λ҉߸Խ͢Δ·Ͱ const textEncoder = new TextEncoder(); const reader = new

    FileReaderSync(); const blob = new Blob([file as File], { type: file.type }); const stringItem: string = reader.readAsDataURL(blob); const encodedBlob: Uint8Array = textEncoder.encode(stringItem); const iv: Uint8Array = crypto.getRandomValues(new Uint8Array(12)); const cryptedBuffer: ArrayBuffer = await crypto.subtle.encrypt( { name: 'AES-GCM', iv }, cryptoKey, encodedBlob ); const cryptedItem = new Uint8Array(cryptedBuffer);

88. 'JMF
    Λ҉߸Խ͢Δ·Ͱ const textEncoder = new TextEncoder(); const reader = new

    FileReaderSync(); const blob = new Blob([file as File], { type: file.type }); const stringItem: string = reader.readAsDataURL(blob); const encodedBlob: Uint8Array = textEncoder.encode(stringItem); const iv: Uint8Array = crypto.getRandomValues(new Uint8Array(12)); const cryptedBuffer: ArrayBuffer = await crypto.subtle.encrypt( { name: 'AES-GCM', iv }, cryptoKey, encodedBlob ); const cryptedItem = new Uint8Array(cryptedBuffer); ΍΍͍͚͜͠Ͳ 8FC
    $SZQUP
    "1*
    ʹ͔͚ΕΔܗʹ͍ͯ͠Δ͚ͩ

89. 'JMF
    Λ҉߸Խ͢Δ·Ͱ const textEncoder = new TextEncoder(); const reader = new

    FileReaderSync(); const blob = new Blob([file as File], { type: file.type }); const stringItem: string = reader.readAsDataURL(blob); const encodedBlob: Uint8Array = textEncoder.encode(stringItem); const iv: Uint8Array = crypto.getRandomValues(new Uint8Array(12)); const cryptedBuffer: ArrayBuffer = await crypto.subtle.encrypt( { name: 'AES-GCM', iv }, cryptoKey, encodedBlob ); const cryptedItem = new Uint8Array(cryptedBuffer); ͕͜͜҉߸ԽΛͯ͠Δͱ͜Ζ

90. 'JMF
    Λ҉߸Խ͢Δ·Ͱ const textEncoder = new TextEncoder(); const reader = new

    FileReaderSync(); const blob = new Blob([file as File], { type: file.type }); const stringItem: string = reader.readAsDataURL(blob); const encodedBlob: Uint8Array = textEncoder.encode(stringItem); const iv: Uint8Array = crypto.getRandomValues(new Uint8Array(12)); const cryptedBuffer: ArrayBuffer = await crypto.subtle.encrypt( { name: 'AES-GCM', iv }, cryptoKey, encodedBlob ); const cryptedItem = new Uint8Array(cryptedBuffer); ॳظԽʢΠχγϟϧʣϕΫτϧ ಉ͡ΞΠςϜΛಉ͡ݤͰ҉߸Խͯ͠΋ ݁Ռ͕มΘΔΑ͏ʹ͢ΔͨΊʹඞཁ

91. ͪͳΈʹ෮߸Խ const textDecoder = new TextDecoder(); const rawBuffer : ArrayBuffer

    = await crypto.subtle.decrypt( { name: 'AES-GCM', iv }, cryptoKey, cryptedItem ); const rawItem = new Uint8Array(rawBuffer); const thumb: string = textDecoder.decode(rawItem); crypto.subtle.decrypt Λ࢖͔ͬͯΒ҉߸Խͷ൓ରͷॱংͰ TUSJOH
    ·Ͱ͍࣋ͬͯ͘

92. %&.0 <input type="file"> Ͱ౉͞ΕͨࣸਅɾಈըΛ ੈքʹ͹Εͳ͍Α͏ʹखݩͰॲཧ͔ͯ͠Β ҉߸ԽΛͯ͠Ξοϓϩʔυͯ͠ΈΑ͏ IUUQTZPVUVCFPF9R#K8,: IUUQTZPVUVCFCR3RIU,1*

93. 1VTI
    "1*
    
    ͍··Ͱͷ "1*
     1VTI
    "1*

94. 1VTI
    "1* ΞϓϦͷΑ͏ʹ௨஌͕ग़ͤΔ࢓૊Έ ͍͔ͭ͘ͷ࣮૷ͷ࢓ํ͕͋Δ͚ΕͲ 'JSFCBTF
    $MPVE
    .FTTBHJOH
    ͕؆୯ͰԠ༻·ͰͰ͖Δ ˞
    "OESPJE
    ͷΈରԠ

95. 'JSFCBTF
    $MPVE
    .FTTBHJOH { name: 'app-name‘, short_name: 'app-shrt‘, ..., gcm_sender_id: 'xxxxxxxxxxxx' };

    'JSFCBTF
    ͰϓϩδΣΫτΛ࡞੒ gcm_sender_idΛݟ͚ͭͯ NBOJGFTUKTPO ʹ௥Ճ NBOJGFTUKTPO <link rel=manifest href=/manifest.json> )5.-
    ʹ௥Ճ

96. 4FSWJDF
    8PSLFS
    ͷ௥Ճ 4FSWJDF
    8PSLFSɿϖʔδΛดͯ͡΋ಈ͍ͯ͘ΕΔ 8PSLFS navigator.serviceWorker.register(‘/service-worker.js') navigator ͔Β௥Ճ͢Δ service-worker.js ผͷϥΠϑαΠΫϧͰ ಈ͖ग़͢ XJOEPX

97. 'JSFCBTF
    ͔Βͷ௨஌Λड͚Δ ͜ΕͰ 8FC
    ϖʔδ͕ όοΫάϥ΢ϯυʗλεΫΩϧঢ়ଶͰ΋௨஌͕ड͚औΕΔ import * as firebase from 'firebase/app';

    import 'firebase/messaging'; const messaging = firebase.messaging(); messaging.setBackgroundMessageHandler((payload) => { console.log(payload); }); TFSWJDFXPSLFSKT

98. 8FCϖʔδʹ͍Δͱ͖ͷ௨஌ import * as firebase from 'firebase/app'; import 'firebase/messaging'; const

    messaging = firebase.messaging(); messaging.onMessage((payload) => { console.log(payload); }); Ͱ΋ड͚औΕΔ͚Ͳ addEventListener('push', () => {}); 'JSFCBTF
    Ͱߦ͘ͳΒ PO.FTTBHF Ͱ 0, DMJFOUKTʢ8PSLFS
    ͡Όͳ͍ํͰʣ

99. import * as firebase from 'firebase/app'; import 'firebase/messaging'; const messaging

    = firebase.messaging(); const registration = await navigator.serviceWorker.register('/service-worker.js'); try { await messaging.requestPermission(); messaging.usePublicVapidKey(FIREBASE_PUBLIC_VAPID_KEY); messaging.useServiceWorker(registration); const token = await messaging.getToken(); console.log(token); } catch (e) { console.log('rejected!'); } ௨஌ͷڐՄͱ UPLFO
    ͷऔಘ

100. import * as firebase from 'firebase/app'; import 'firebase/messaging'; const messaging

     = firebase.messaging(); const registration = await navigator.serviceWorker.register('/service-worker.js'); try { await messaging.requestPermission(); messaging.usePublicVapidKey(FIREBASE_PUBLIC_VAPID_KEY); messaging.useServiceWorker(registration); const token = await messaging.getToken(); console.log(token); } catch (e) { console.log('rejected!'); } ௨஌ͷڐՄͱ UPLFO
     ͷऔಘ 'JSFCBTF
     ͷίϯιʔϧ͔Β࣋ͬͯ͜ΕΔ ௨஌ͷڐՄΛऔΓʹߦ͘ ͜͜Ͱ UPLFO
     ΛखʹೖΕΔ

101. ௨஌ڐՄͷμϝͳྫ ϖʔδ͸͍͙ͬͯ͢ʹ௨஌ڐՄΛऔΖ͏ͱ͢Δ 8FC
     αΠτ ͱͯ΋ةݥ ͲΜͳίϯςϯπ͕ͦ͜ʹ͋Δ͔Θ͔Βͳ͍Ϣʔβʔ͕ ڐՄ͢ΔϝϦοτ͕ͳ͍ ͳΜͷؾͳ͠ʹɺϒϩοΫΛ͞ΕΔͱυϝΠϯͰڋ൱͞ΕΔͷͰɺ ೋ౓ͱϢʔβʔʹ௨஌ΛૹΔνϟϯε͕ͳ͘ͳΔʹͻͱ͍͠

102. ഑ྀͨ͠ྫ ࣗલͷμΠΞϩάͰαϯυϘοΫεతʹଅ͢ͷ͕ྑ͍ $MJDL Ϣʔβʔ͕௨஌Λ΄͍͠ͱײͦ͡͏ͳ৔໘Ͱ΍Δͱ͍͍ΑͶ ͓ؾʹೖΓͷϢʔβʔͷ৽ண͕ؾʹͳΓ·ͤΜ͔ʁ ΠϕϯτͷεέδϡʔϧΛ͓஌Βͤ͠·͢Α ͋ͳ͕ͨ޷͖ͦ͏ͳهࣄ͕ͰͨΒ͓ಧ͚ͯ͠ྑ͍ʁ ͨͱ͑͹͜Μͳ

103. ಛఆͷϢʔβʔʹ௨஌͢Δ https://fcm.googleapis.com/v1/projects/{project-id}/messages:send ͜͜ʹ 1045
     ͢Δ headers: { 'content-type': 'application/json', authorization: `Bearer

     ${VALID_OAUTH_2_0_TOKEN}` }, body: JSON.stringify({ message: { token, notification: { title: 'これはタイトル', body: 'こっちは本文' } } })

104. ಛఆͷϢʔβʔʹ௨஌͢Δ https://fcm.googleapis.com/v1/projects/{project-id}/messages:send ͜͜ʹ 1045
     ͢Δ headers: { 'content-type': 'application/json', authorization: `Bearer

     ${VALID_OAUTH_2_0_TOKEN}` }, body: JSON.stringify({ message: { token, notification: { title: 'これはタイトル', body: 'こっちは本文' } } }) (PPHMF
     "1*
     ΫϥΠΞϯτϥΠϒϥϦͰ +85
     Λऔಘ

105. ಛఆͷϢʔβʔʹ௨஌͢Δ https://fcm.googleapis.com/v1/projects/{project-id}/messages:send ͜͜ʹ 1045
     ͢Δ headers: { 'content-type': 'application/json', authorization: `Bearer

     ${VALID_OAUTH_2_0_TOKEN}` }, body: JSON.stringify({ message: { token, notification: { title: 'これはタイトル', body: 'こっちは本文' } } }) (PPHMF
     "1*
     ΫϥΠΞϯτϥΠϒϥϦͰ +85
     Λऔಘ ͖ͬ͞ͷ UPLFO

106. දݱʗମݧΛߟ͑Δ

107. ͔͜͜Β͸ڠྗͯ͠΋Βͬͨௐࠪ݁Ռ΋దٓग़͍ͯ͘͠Α ͝ڠྗ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

108. ੈքதηϯαʔͰҲΕ͔͑ͬͯΔ Թ౓͕Θ͔Γ·͢ ࣪౓Λײ͡·͢ Ի͕ฉ͑͜·͢

109. ੈքதηϯαʔͰҲΕ͔͑ͬͯΔ ۙ͘ͷ #MVFUPPUI
     ͕ݟΕ·͢ ໌Δ͞Λ൑ఆ͠·͢ Ի͕ฉ͑͜·͢ Ҡಈ଎౓͕Θ͔Γ·͢ Χϝϥ͋Γ·͢ ͍ͭͰʹɺ͍͍ͩͨΦϯϥΠϯ

110. ͍͕ͭ͜൓ضΛ຋͢ͱාͦ͏ ৐ͬऔΒΕΔͱ·͍ͣ

111. 23ΛಡΈࠐΉ͚ͩͰ 63-
     ʹδϟϯϓ service-worker Πϯετʔϧ͞ΕΔ ͋ͱ͸௨஌ڐՄ͑͞΋Β͑Ε͹ λεΫΩϧ͞Εͯͯ΋ಈ͔ͤͦ͏ 1VTI
     "1*
     Λߟ͑Δͱ

112. ಈ͔ͤͦ͏ʁ ௨஌ग़ͤΔ͚ͩ͡Όͳ͍ͷʁ ௨஌ϝοηʔδͱσʔλϝοηʔδ͕͋Δ ௨஌ϝοηʔδɿ ௨஌Λग़͚ͩ͢ͷϝοηʔδ σʔλϝοηʔδɿ σʔλΛड͚औͬͯ 4FSWJDF8PSLFS ಺Ͱॲཧ͢Δ

113. ಈ͔ͤͦ͏ʁ ௨஌ग़ͤΔ͚ͩ͡Όͳ͍ͷʁ ௨஌ϝοηʔδͱσʔλϝοηʔδ͕͋Δ ௨஌ϝοηʔδɿ ௨஌Λग़͚ͩ͢ͷϝοηʔδ σʔλϝοηʔδɿ σʔλΛड͚औͬͯ 4FSWJDF8PSLFS ಺Ͱॲཧ͢Δ ʮΉΉʯ

114. message: { token, data: { ... } } message: {

     token, notification: { title: 'これはタイトル‘, body: 'こっちは本文‘ } } ௨஌ϝοηʔδ σʔλϝοηʔδ ௨஌Λग़͞ͳͯ͘΋ྑ͍ 4FSWJDF8PSLFS ͕ಈ࡞͢Δ

115. 4FSWJDF8PSLFS ͰͰ͖Δ͜ͱ WorkerNavigator Navigator battery connection geolocation lock permissions serviceWorker

     storage xr vibrate clipboard usb bluetooth credentials :Battery Status API :Network Information API :Geolocation API :Web Lock API :Permission API :ServiceWorkerContainer :Storage API :Web XR Device API :Vibration API :Clipboard API :Web USB :Web Bluetooth :Credentials Container connection lock permissions storage :Network Information API :Web Lock API :Permission API :Storage API 'FUDI
     "1*
     ͕ಈ͘ ͋ͱ

116. 4FSWJDF8PSLFS ͰͰ͖Δ͜ͱ WorkerNavigator Navigator battery connection geolocation lock permissions serviceWorker

     storage xr vibrate clipboard usb bluetooth credentials :Battery Status API :Network Information API :Geolocation API :Web Lock API :Permission API :ServiceWorkerContainer :Storage API :Web XR Device API :Vibration API :Clipboard API :Web USB :Web Bluetooth :Credentials Container connection lock permissions storage :Network Information API :Web Lock API :Permission API :Storage API 'FUDI
     "1*
     ͕ಈ͘ ͋ͱ ʮ͋ͬʯ

117. %&.0 ࢦఆͨ͠ 63-
     Λୟ͖ʹߦͬͯ΋Β͓ IUUQTZPVUVCF)HR/XHIMTX

118. #PUOFU
     ͷΑ͏ͳৼΔ෣͍ service-worker ߈ܸϓϩάϥϜೖΓ ߈ܸର৅ 63-
     Λ̍ͭ౿Ή͚ͩͰ #PUOFU
     ʹͳΔةݥੑ %%04߈ܸʂ

119. ΩϟϦΞճઢͱ 8*'*
     ซ༻Ͱ *1
     มΘͬͪΌͬͯ ϒϩοΩϯά΋Ή͍͔ͣ΋ʁ ௐࠪ݁Ռ Ұ೔ͷ͏ͪʹͲͷ͘Β͍ *1
     มΘΔʁ Ұਓ͋ͨΓ 
     <ݸ> ೔Ͱ࢖༻͢Δ

     *1
     ΞυϨε Մ΋ͳ͘ෆՄ΋ͳ͘

120. ϗϯτ͸ͦΜͳ৺഑͡Όͳ͍ ͍͍ͩͨ͜Ε͕कͬͯ͘ΕΔ

121. ྑ͍࢖ΘΕํ΋ߟ͍͑ͨ

122. දݱʗମݧΛߟ͑Δ ͖͠Γͳ͓͠

123. ΠέͯΔ 8FC
     ΞϓϦ࡞͚ͬͨͲ ӡӦ͍ͯ͘͠ҡ࣋අ͕͖͍ͭ

124. ΠέͯΔ 8FC
     ΞϓϦ࡞͚ͬͨͲ ӡӦ͍ͯ͘͠ҡ࣋අ͕͖͍ͭ ޿ࠂ ޿ࠂ ޿ࠂ ޿ࠂ ޿ࠂ ޿ࠂ ޿ࠂ

     ޿ࠂ ޿ࠂ ޿ࠂ ޿ࠂ ޿ࠂ ޿ࠂ ޿ࠂ

125. Ծ૝௨՟Λ۷ͬͯΈΔʁ $PJOIJWF Ͱѱ໊ΛͻΖΊͨʠϒϥ΢βϕʔεϚΠχϯάʡ ແڐՄͰ΍Δͷ͸μϝͳͷ͸΋ͪΖΜͷ͜ͱ ޿ࠂ͸ग़ͨ͘͠ͳ͍ ҡ࣋අ͸୲อ͍ͨ͠ ͜͏͍͏৚݅ԼͰ͸ྑ͍ΞΠσΞͰ͸͋Δ

126. Ͱ΋ڐՄΛऔͬͨ·ͱ΋ͳར༻Ͱ΋ 69
     ΘΔ͍͘ͳ͍ʁ 8FC
     ΞϓϦ࢖ͬͯΔ࠷தʹ ೤͘ͳΔ ి஑৯͏ ॏ͍ Ϣʔβʔ཭Εͦ͏

127. ࠒ߹͍Λݟͯ΍Δ Ұ൪࢖ͬͯͳͯ͘ɺόοςϦʔ΋৺഑ͳͯ͘ ΦϯϥΠϯͰ͔ͭߴ଎Ͱ઀ଓ͞ΕͯΔঢ়ଶ ॆి͞Εͯͯɺ8J'J
     ʹͭͳ͕ͬͯͳ͍ʁ

128. 0 5 10 15 20 25    

                           TMPXH H H H ຊ౰ͩΖ͔ ௐࠪ݁Ռ Ұ೔தͱ͓ͯ͠ͷ୺຤ͷ଎౓ͬͯͲͷ͘Β͍ʁ ࣌ؒ ਓ਺

129. 0 5 10 15 20 25    

                           TMPXH H H H ຊ౰ͩΖ͔ ௐࠪ݁Ռ Ұ೔தͱ͓ͯ͠ͷ୺຤ͷ଎౓ͬͯͲͷ͘Β͍ʁ ࣌ؒ ਓ਺ ͍͍ͩͨɺ͍ͭ΋଎͍

130. 0 5 10 15 20 25    

                           TMPXH H H H ຊ౰ͩΖ͔ ௐࠪ݁Ռ Ұ೔தͱ͓ͯ͠ͷ୺຤ͷ଎౓ͬͯͲͷ͘Β͍ʁ ࣌ؒ ਓ਺ ͍ͯ͠ݴ͑͹ ͜ͷ΁ΜࠞΜͰΔ

131. 0 5 10 15 20 25    

                           TMPXH H H H ຊ౰ͩΖ͔ ௐࠪ݁Ռ Ұ೔தͱ͓ͯ͠ͷ୺຤ͷ଎౓ͬͯͲͷ͘Β͍ʁ ࣌ؒ ਓ਺ ਂ໷͔Βૣே͸ ͪΐͬͱۭ͍ͯΔʁ

132. 3PVOE5SJQ
     5JNF         

                              3PVOE5SJQ
     5JNF SUU <NT> ࣌ࠁ

133. 3PVOE5SJQ
     5JNF         

                              3PVOE5SJQ
     5JNF 0 5 10 15 20 25                           TMPXH H H H ҰͭલͷάϥϑͷԼͷํ SUU <NT> ࣌ࠁ

134. ݴ͍͔ͨͬͨ͜ͱ͸ ৸ͯͦ͏ͳ࣌ؒ͸֨ผ଎͍͸ͣʂ ͚ͩͬͨͲ ͍͍ͩͨ଎͍ͳΒɺ·͊ 0,
     Ͱ͠ΐ͏

135. දݱʗମݧΛߟ͑Δ ̏ͭΊ

136. ʮ͖ͬ͞ϩʔΧϧͰը૾ʗಈըΛ҉߸Խ͚ͨ͠Ͳɺ ΋͏ϩʔΧϧʹ࣋ͬͯΔͷ΋ෆ҆ʯ ʠͱ΍͔͘ʡ͞Εͨ͘ͳ͍ਓɿ ʮͩͬͯ 4FSWJDF
     8PSLFS
     ͍ͬͯ͏ͷΈͨ͠ʯ ʮͳʹ͞ΕͯΔ͔Θ͔ͬͨ΋Μ͡Όͳ͍ΑͶʯ ʮͦ΋ͦ΋҆৺ͬͯͳʹΛ࣋ͬͯͦ͏͍͏;͏ʹݴͬͯ

137. ʮ͋ɺ҉߸Խͯ͠όϥͯ͠ੈքதʹ෼ࢄͤ͞Αʯ ʠͱ΍͔͘ʡ͞Εͨ͘ͳ͍ਓɿ ڕΛӅ͢ͳΒւͩΑͶ εϚϗͷւ΁

138. ݤ" ݤ# ݤ$ ݤ% ҉߸Խͨ͠ϑΝΠϧΛ෼ׂͯ͠഑෍ɺ഑෍ઌͷݤͰߋʹ҉߸Խ ΋͏ͪΐͬͱ۩ମతʹ͸

139. ·ͨ͸ ݤ" ݤ# ݤ$ ݤ% ద౰ͳ਺ϗοϓͤͯ͞ɺ҉߸Խͱෳ߹Λ܁Γସ͑͢ ࠷ऴతʹ %
     ʹ࣋ͬͯͯ΋Β͏

140. https://fcm.googleapis.com/v1/projects/{project-id}/messages:send headers: { 'content-type': 'application/json', authorization: `Bearer ${VALID_OAUTH_2_0_TOKEN}` }, body:

     JSON.stringify({ message: { token, data: { ... } } }) 1VTI
     "1*
     ͷ࿩ʹཱͪฦΔͱ

141. https://fcm.googleapis.com/v1/projects/{project-id}/messages:send headers: { 'content-type': 'application/json', authorization: `Bearer ${VALID_OAUTH_2_0_TOKEN}` }, body:

     JSON.stringify({ message: { token, data: { ... } } }) 1VTI
     "1*
     ͷ࿩ʹཱͪฦΔͱ ୭ʹૹΔ͔ αʔόʔͷೝূΩʔ ͜ͷ͕̎ͭ͋Ε͹ 8FC
     1VTI
     ͸ Ͳ͔͜ΒͰ΋୭͔ΒͰ΋ૹΕΔ

142. ฦͯ͠΄͍࣌͠ʢෳ߹࣌ʣ ฦͯ͠ʂ ͍ͬͯ͏ 1VTI
     ௨஌ΛૹΔ ෳ߹ ෳ߹ ෳ߹ ෳ߹ ݟΕΔʂ ݤ"

     ݤ# ݤ$ ݤ%

143. ·ͨ͸ ݤ" ݤ# ݤ$ ݤ% ฦͯ͠ʂ ฦͯͩͬͯ͠ ฦͯͩͬͯ͠ ͓ͬ

144. ·ͨ͸ ݤ" ݤ# ݤ$ ݤ% ฦͯ͠ʂ ฦͯͩͬͯ͠ ฦͯͩͬͯ͠ ͓ͬ ෳ߹

     ෳ߹ ෳ߹ ෳ߹ ݟΕΔʂ

145.          

                 Ԡ౴࣌ؒ<ඵ> ࣌ࠁ ฏۉԠ౴࣌ؒ ͦΕͬͯݱ࣮తʁ ௐࠪ݁Ռ 1VTI
     "1*
     ͬͯΈΜͳͲΕ͘Β͍Ͱฦͯ͘͠ΕΔͷʁ ஗͍

146. ͦΕͬͯݱ࣮తʁ ௐࠪ݁Ռ 1VTI
     "1*
     ͬͯΈΜͳͲΕ͘Β͍Ͱฦͯ͘͠ΕΔͷʁ Ԡ౴଎౓ʢฏۉʣ 
     <ඵ> Ұ൪ૣ͔ͬͨԠ౴ʢฏۉʣ 
     <ඵ> Ұ൪஗͔ͬͨԠ౴ʢฏۉʣ 
     <ඵ> Ԡ౴཰ʢฏۉʣ

     
     <>

147. 1VTI
     ͰͲͷ͘Β͍ૹ৴Ͱ͖Δ ͬͪ͜ͷλΠϓͳΒ ,#
     ҎԼʹͳΔ·Ͱ෼ׂͨ͠Βཧ࿦্͸͍͚Δ

148. 1VTI
     ͰͲͷ͘Β͍ૹ৴Ͱ͖Δ ͬͪ͜ͷλΠϓ͸αʔόʔʹ͚͋ͣͯɺ ࡏΓॲΛڭ͑Δͱ͔͠ͳ͍ͱ͍͚ͳ͍ ͜͜ʹૹͬͨΑ Cc2H5BfqPf+L/Z Cc2H5BfqPf+L/Z ͜͜ʹૹͬͨΑ Cc2H5BfqPf+L/Z ͜͜ʹૹͬͨΑ Cc2H5BfqPf+L/Z

149. ·ͱΊ 8FCͰͰ͖ΔମݧΛߟ͑Δձ

150. ̏ͭͷδϟϯϧʹ෼͚ͯ 8FC
     "1*
     ͷ࢖͍ํΛ঺հ ૊Έ߹Θͤͯ࢖͏ͱ໘ന͍Αͱ͍͏࿩Λఴ͑ͯ 8FC
     8PSLFS 8FC
     "TTFNCMZ 1VTI
     "1* 8FC(-
     UISFFKT 8FC
     "VEJP
     "1* ͳʹ͔໘ന͍͜ͱͷ͖͔͚ͬʹͳͬͯ͘ΕΔͱྑ͍Ͱ͢

151. ંݪ ϨΦφϧυݡ !-FPOBSEP@FOHS ϑϩϯτΤϯυΤϯδχΞɺͨ·ʹ69σβΠφʔ LINE 株式会社 UIT 室 User Interface

     + Technology team @LINE corp

152. ͋Γ͕ͱ͏͍͟͝·ͨ͠