Electron+Vue+Swift=真のデスクトップアプリ / How to create "Really" desktop app using Electron

Slide 1

Slide 1 text

Electron+Vue++Swift = 真のﾃﾞｽｸﾄｯﾌﾟｱﾌﾟﾘ Ռ෺Ϧϯ@fruitriin@misskey.systems Misskey.systems

Slide 2

Slide 2 text

ʢλΠτϧ͸ʣ ͍ͩͿ੝͔ͬͨ΋͠Εͳ͍

Slide 3

Slide 3 text

自己紹介@果物リン • ൒೥͘Β͍ແ৬ͱ͍͏ࣗ༝ΛᨳՎத • Vue͕޷͖Ͱͨ·Βͳ͍ • Misskey.systems͔Β͖·ͨ͠ • ͜Εʹ͍ͭͯ΋͍ͬͺ͍࿩͍͚ͨ͠Ͳ

Slide 4

Slide 4 text

こんなアプリ作ってます ੿࡞ Taskbar.fm

Slide 5

Slide 5 text

Electron੡Ͱ͢

Slide 6

Slide 6 text

（おさらい）Electron • BrowserViewͱσεΫτοϓAPIୟ͚Δ܅ͷηοτ • ͜Ε͑͋͞Ε͹WebΤϯδχΞͷ͋ͳͨ΋ σεΫτοϓΞϓϦ͕࡞ΕͪΌ͍·͢ʂ

Slide 7

Slide 7 text

πʔϧόʔ࡞Γ͍ͨͳ͋

Slide 8

Slide 8 text

ϓϩηεͷϦετ͕΄͍͠ͳ͋

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

API଍Γͳ͘ͳ͍……ʁ

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

ݟ͑ͳ͍Αʂʼ

Slide 13

Slide 13 text

ŗŕʂʼ

Slide 14

Slide 14 text

SwiftͰϓϩηεϦετ ࡞ͬͯऔಘ͢Δ͔

Slide 15

Slide 15 text

Swift製CLI tool作り方３種類 • xCodeىಈͯ͠ΰϦΰϦͬͱ࡞Δ • swiftc ͰϏϧυ͢Δ • swift build ͰϏϧυ͢Δ

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

݁ہ͸ؾ߹

Slide 18

Slide 18 text

Nodeから起動して取り扱う • xCodeىಈͯ͠ΰϦΰϦͬͱ࡞Δ

Slide 19

Slide 19 text

Nodeから起動して取り扱う • xCodeىಈͯ͠ΰϦΰϦͬͱ࡞Δ ݺͼग़ͤΔ

Slide 20

Slide 20 text

Nodeから起動して取り扱う • xCodeىಈͯ͠ΰϦΰϦͬͱ࡞Δ stdoutΛ͘Εʂ

Slide 21

Slide 21 text

Nodeから起動して取り扱う • xCodeىಈͯ͠ΰϦΰϦͬͱ࡞Δ stdoutΛ͘Εʂ

Slide 22

Slide 22 text

Nodeから起動して取り扱う • xCodeىಈͯ͠ΰϦΰϦͬͱ࡞Δ ϑϩϯτΤϯυʹ౤͛Δͧʂ

Slide 23

Slide 23 text

こんなアプリ作ってます ੿࡞ Taskbar.fm

Slide 24

Slide 24 text

ΊͰͨ͠ΊͰͨ͠

Slide 25

Slide 25 text

Appendix ʮVueʹ͍ͭͯͷ࿩͸ͳ͍ΜͰ͔͢ʂʁʯ

Slide 26

Slide 26 text

ࢲ͸޷͖ʹͨ͠

Slide 27

Slide 27 text

ElectronViteがいい感じ • xCodeىಈͯ͠ΰϦΰϦͬͱ࡞Δ

Slide 28

Slide 28 text

ViteならなんでもOK • ࢮ͵΄ͲViteͰϓϩδΣΫτ࡞ͬͨਓʹ͸ ʮ͋ʔɺͳΔ΄ͲͶʯΈ͍ͨͳؾ࣋ͪʹͳ͍ͬͯΔ͸ͣ • Vue3ͷඪ४΍Nuxtͷඪ४ʹͳͬͨϏϧυπʔϧ • Electron Vite΋΋ͪΖvueΛαϙʔτ

Slide 29

Slide 29 text

マイカスタマイズ • preloadσΟϨΫτϦ࡟আ • electron-toolkit/preload Ͱ͍͍͔ͳ • main/index.tsΛmain.tsʹɺ renderer/index.tsΛrendere.tsʹϦωʔϜ → ೝࣝෛՙ௿Լ

Slide 30

Slide 30 text

Ask any Questionʁ