Tweet
Tweet

Slide 1

Slide 1 text

!"#$%&'() +,-./,0 123&' 456 Ռ෺Ϧϯ@FruitRiin גࣜձࣾελσΟετ 2022/01/22 TechCommit ΫιΞϓϦίϯςετ

Slide 2

Slide 2 text

ΫιΞϓϦ͡Όͳ͍ ͱ͍͏ۤ৘͸؁Μͯ͡ ड͚ೖΕ·͢

Slide 3

Slide 3 text

789:*;*<=>?@A??B • Ռ෺Ϧϯ@FruitRiin • GitHub, Twitter, Qiita... • Vue.js͕޷͖ʂReactʁ৮ͬͨ͜ͱͳ͍Ͱ͢Ͷ • Vue3 on ElectronͰϑΝΠϥ࡞ͬͯ·͢

Slide 4

Slide 4 text

ࠓճ͸ΫιΞϓϦͷ࿩

Slide 5

Slide 5 text

։ൃͷಈػ

Slide 6

Slide 6 text

ΦϯϥΠϯͷΠϕϯτ͕ ΦϑϥΠϯΑΓָ͘͠ͳ͍ʂʂ

Slide 7

Slide 7 text

CDEFGHIJIKJL ൓Ԡ͕໨Ͱݟ͑Δ

Slide 8

Slide 8 text

CDEFJHIJIKJL ෼அ͕͋Δ ଘࡏײ͕Θ͔Βͳ͍

Slide 9

Slide 9 text

ίϯηϓτ

Slide 10

Slide 10 text

MNOB@*P@QROSJT5L • LTதʹ؍٬ͷϦΞΫγϣϯ͕શ͘Θ͔Βͳ͍ɺָ͘͠ͳ͍ • ొஃதͷνϟοτʹؾ͔ͮͳ͍ɺर͑ͳ͍ • ໨ͰͩΊͳΒԻͳΒΘ͔ΔͷͰ͸ʁ • →νϟοτͨ͠ΒԻ͕໐ΔαʔϏε • ը໘ڞ༗ػೳͳͲͷ഑৴ػೳ΋ॾʑࡌͤΑ͏

Slide 11

Slide 11 text

σϞ

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

ࢀՃऀͷײ૝

Slide 14

Slide 14 text

UVWXYZ • ؍٬ʮൃදதʹಡΈ্͛ΒΕΔͱࢥ͏ͱνϟοτͮ͠Β͍ʯ • ొஃऀʮൃදதʹಡΈ্͛ΒΕΔͱฉ͘ํʹूதͯ͠͠·ͬͯ ஻Γ͕ࢭ·ͬͯ͠·͏ʯ

Slide 15

Slide 15 text

ΫιΞϓϦͳͷͰ͸ʁ

Slide 16

Slide 16 text

Θͨ͠͸͔ͪΒ͖ͭ·ͨ͠ ͓͓ɺΏ͏͠ΌΑ 
 ͠ΜͰ͠·͏ͱ͸ɹͳ͚͞ͳ͍

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

ٕज़ελοΫղઆ

Slide 21

Slide 21 text

[\]^_1 • ϑϩϯτΤϯυϑϨʔϜϫʔΫɿVue3 • αʔόʔɿnetlify • ޻෉ͨ͠ϥΠϒϥϦͱ͔ • ө૾഑৴ɿSkyWay • ಡΈ্͛ɿGoogle Cloud Text-to-Speech + Functions

Slide 22

Slide 22 text

`D • Vue3 • Vue͸͍͍ͧ • Netlify • Reactͱ͔Vueͱ͔ͷϦϙδτϦΛ 
 ಉظͨ͠ΒWebϖʔδެ։ͯ͘͠ΕΔ͍͢͝΍ͭͩΑ

Slide 23

Slide 23 text

PabcQb • ʮϏσΦɾԻ੠௨࿩ͷػೳΛ͔ΜͨΜʹ࣮૷Ͱ͖ΔɺϚϧνϓ ϥοτϑΥʔϜͳSDKͰ͢ɻʯ • WebRTC͍ͬͯ͏ϓϩτίϧΛ࢖ͬͯΔ • ͦΕʹ͍ͭͯ͸ৄ͘͠ͳͯ͘Α͍ • ௨৴ྔ͕গͳͯ͘ݸਓͳΒλμͰ͔ͭ͑Δ͔Β͓ࢼ͠ʹGood

Slide 24

Slide 24 text

deeRfO*gfe>h*@Oi@*@e*jkOOlm*nop • ೔ຊޠͱ͔ಥͬࠐΉͱԻ੠Λฦͯ͘͠ΕΔ • Cloud Functions Ͱ೔ຊޠΛ౉͢ 
 →͜ͷAPIͰԻ੠ʹม׵

Slide 25

Slide 25 text

qrs)tu • Text to Speech APIͷnode SDKͷ໭Γ஋͕ base64͡Όͳ͍ • Unit8Array ͬͯԿʁʁʁ

Slide 26

Slide 26 text

async function tts(text){ const res = await fetch(BASE_URL + `tts?text=${text}`).then((res) => res.json()) const u8 = new Uint8Array(res[0].audioContent.data) return arrayBufferToBase64(u8) } function arrayBufferToBase64(buffer: Uint8Array) { let binary = "" const bytes = new Uint8Array(buffer) const len = bytes.byteLength for (let i = 0; i < len; i++) { binary += String.fromCharCode(bytes[i]) } return window.btoa(binary) } ˎΠϝʔδ

Slide 27

Slide 27 text

vwx • νϟοτ͸νϟοτͱͯ͠ɺΤϞʔγϣϯΛଧͯΔΑ͏ʹ͢Δ • ΤϞʔγϣϯʹ͚ͩରԠͨ͠Ի͕໐Δ • →ഥखͱ͔ͼͬ͘Γͱ͔ͷԻͰྟ৔ײΛײ͡Δ • →࣮͸νϟοτͷԻ੠ಡΈ্͛͸ඞཁͳ͔ͬͨʁʁʁ

Slide 28

Slide 28 text

࠷ߴͷΦϯϥΠϯΠϕϯτ؀ڥ 
 ٻΉ Fin.