Electronによるアプリケーション開発事情2018 / builderscon2018

builderscon tokyo 2018『Electronによるアプリケーション開発事情2018』

1. ElectronʹΑΔΞϓϦ έʔγϣϯ։ൃࣄ৘ 2018 builderscon tokyo 2018 @h3_poteto
2. ࣗݾ঺հ • Akira Fukushimaʢ෱ౡ ໌ʣ • github: h3poteto • twitter: h3_poteto • Mastodon: @h3_poteto@mstdn.jp • ࢓ࣄɿterraform৬ਓ@scouty
3. એ఻
5. σεΫτοϓ޲͚ͷ MastodonΫϥΠΞϯτΛ ࡞͍ͬͯ·͢
7. ࠓ೔͸͜ͷΞϓϦέʔγϣ ϯΛ୊ࡐʹElectronͷ࿩Λ ͠·͢
9. એ఻ऴΘΓ
10. ࠓ೔ͷ࿩ • ElectronͰΞϓϦέʔγϣϯ࡞ΔͷϚδͰָ ͩΑʢͲΜͲΜָʹͳΓͭͭ͋Δ • Ͱ΋SNSͷΫϥΠΞϯτ࡞Δͷ͸େม • ւ֎੎͔Βͷҙ֎ͳ൓Ԡ͋ͬͨ • ΈΜͳMastodon΍ͬͯ΄͍͠
11. ElectronͰΞϓϦέʔγϣϯ Λ։ൃ͢Δ
12. Electron? • ੲ͸Atom-shellͱݺ͹Ε͍ͯͨ • Chromium + Node.js • Windows/Mac/Linux޲͚ͷΞϓϦέʔγϣϯ ͕࡞ΕΔ
13. ͭ·Γ • දࣔ෦෼͸ϒϥ΢βͳͷͰWebϑϩϯτΤϯ υͷٕज़Λ࢖͑Δ • React.js/Vue.js΋ࡌͤΒΕΔ • SPAͰΞϓϦ͕࡞ΕΔ
14. vue-cliͰ਽ܗ͕࡞ΕΔ $ npm install -g vue-cli $ vue init simulatedgreg/electron-vue \ whalebird
15. vue-cliͰͷ਽ܗ • webpackʹΑΔ։ൃ࣌ͷϏϧυઃఆ • auto-reload • ςετͷ਽ܗ
16. Electronͷجຊߏ଄ • mainϓϩηε: όοΫάϥ΢ϯυδϣϒɼΞϓ Ϧέʔγϣϯͷ؅ཧΛߦ͏ • rendererϓϩηε: jsΛ࣮ߦ͠html, cssΛϨϯ μϦϯά͢Δ
17. rendererϓϩηεଆΛ͢΂ͯ SPAʹ͢Δ͜ͱ͕Մೳ ͜͜ͰReact.js/Vue.js͕࢖͑ Δ
18. خ͍͜͠ͱᶃ React.js/Vue.js(Flux)ΛGUI ΞϓϦέʔγϣϯͰ࢖͑Δ
19. iOS։ൃ͍ͯͨ͜͠Ζ • ViewController͕ແݶʹଠΔʂ • delegate͕ͦ͜Βதʹ…… • ϞσϧͲ͏͜͏ͱ͍͏ΑΓঢ়ଶ΍ը໘ભҠͷ ϩδοΫ͕େม
21. class SwipeViewController: UIViewController, SwipeViewDelegate, SwipeViewDataSource, UINavigationControllerDelegate, UITabBarControllerDelegate { func navigationController(_ navigationController: UINavigationController, didShow viewController: UIViewController, animated: Bool) { if (type(of: viewController) === SwipeViewController.self) { for i in 0 ..< self.streamList.count() { self.viewItems[i].fCellSelect = false } } } } ͛͢ʔ͍ͬͺ͍Delegateͯ͠Δ
22. React.js/Vue.sj(Flux)ʹ͢Δͱ • ࠩ෼ϨϯμϦϯά͸React.js/Vue.jsͷ૚͕΍ͬ ͯ͘ΕΔ͜ͱ͕લఏ • delegateͱ͔ඞཁͳ͍ • Flux͕σʔλͷྲྀΕΛҰํ޲ʹͯ͘͠ΕΔ • GUIΞϓϦέʔγϣϯͳͷʹݟ௨͕͠ྑ͍
23. <toot :message="message" :filter="filter" :focused="message.uri === focusedId" :overlaid="modalOpened" @update=“updateToot" @delete=“deleteToot" @focusNext="focusNext" @focusPrev="focusPrev" @selectToot="focusToot(message)"> </toot> focusToot (message) { this.focusedId = message.uri }
24. خ͍͜͠ͱᶄ ίϯτϦϏϡʔλ͕૿͑Δ
25. WhalebirdͷίϯτϦϏϡʔλ • ΄΅jsͷٕज़ͳͷͰjsք۾ͷਓ͕ίϯτϦ Ϗϡʔτ͠΍͍͢ʢ͜͜ͷϘϦϡʔϜ͕ଟ͍
26. خ͍͜͠ͱᶅ ΫϩεϓϥοτϑΥʔϜ
27. ΫϩεϓϥοτϑΥʔϜ • Windows/Mac/LinuxͰಉ͡ιʔεͷ··Ϗϧ υՄೳ • ͨͩ͠Ұ෦Mac޲͚ͷػೳ౳΋࣮૷͞Ε͍ͯ Δ
28. ྫ: Dockϝχϡʔ ϝχϡʔ಺༰͕ ΧελϚΠζՄೳ elecron-context-menu
29. خ͍͜͠ͱᶆ ΞΫςΟϒʹ։ൃ͞Ε͍ͯΔ
30. ElectronͷϦϦʔε͸ׂͱ׆ൃ • v2.0.8 - 2018/08/23 • v2.0.7 - 2018/08/09 • v2.0.6 - 2018/08/01 3.0.0४උத: v3.0.0-beta.8
31. ΞϓϦέʔγϣϯΛύοέʔ δϯάˍϦϦʔε
32. Let’s ElectronΈ͍ͨͳهࣄ͸ ͍ͬͺ͍͋Δ͚ͲϦϦʔεʹ ؔ͢Δهࣄ͕΄ͱΜͲͳ͍
33. ֮͑ͯ΄͍͜͠ͱ: electron-builder͕͋Ε͹ͩ ͍͍ͨղܾ͢Δ
34. • electron-packager • electron-builder ͱ͍͏ͷ͕͋Δ
35. electron-packager • webpackͰίϯύΠϧ͞ΕͨϑΝΠϧ܈ΛΞ ϓϦέʔγϣϯͱͯ͠·ͱΊΔ • جຊతʹ͜Ε͔͠΍ͬͯ͘Εͳ͍ • ίϚϯυϥΠϯ
36. electron-builder • ΞϓϦέʔγϣϯͷύοέʔδϯά • ূ໌ॻͷ௥Ճ • ֤छΠϯετʔϧՄೳͳϑΝΠϧܗࣜʹѹॖ ʢ.dmg, .deb, .rpm, .exe౳ʣ • package.jsonʹઃఆ͕ॻ͚Δ • ެࣜυΩϡϝϯτ͕๛෋: 
 https://www.electron.build/
37. "build": { "productName": "Whalebird", "appId": "org.whalebird.desktop", "directories": { "output": "build" }, "mac": { "icon": "build/icons/icon.icns", "target": [ "dmg" ], "category": "public.app-category.social-networking" },
38. ͓͔͛ͰϦϦʔεܗ͕ࣜ๛෋ • AppStore(.pkg) • .dmg • .exe • .deb • .rpm • .tar.bz2 • snapcraft (.snap)
39. ͪΐͬͱಛघͳઃఆྫ • ΞΠίϯ • ֎෦ϦιʔεʢԻ੠౳ʣ • ূ໌ॻ • MASʢMac App Storeʣ
40. ΞΠίϯ • Mac/Windows: Ϗϧυ࣌ʹຒΊࠐΉ • Linux: Ұ෦͸main.jsͰ֎෦ϑΝΠϧΛࢦఆ • ը૾ϑΝΠϧ͸asarѹॖ͞Ε͍ͯͯ΋಺෦ͷ΋ ͷΛࢦఆՄೳ
41. "build": { "productName": “Whalebird", "files": [ "dist/electron/**/*", "build/icons/*" ], "mac": { "icon": "build/icons/icon.icns", "target": [ "dmg" ], "category": "public.app-category.social-networking" }, "win": { "icon": "build/icons/icon.ico", "target": "nsis" }, iconͷࢦఆ
42. mainWindow = new BrowserWindow({ titleBarStyle: 'hidden', useContentSize: true, icon: path.resolve(__dirname, '../../build/icons/256x256.png') } BrowserWindowͷ ىಈΦϓγϣϯͰΞΠίϯΛࢦఆ
43. ֎෦ϦιʔεͷಡΈࠐΈ • Ի੠ϑΝΠϧ౳ΛಡΈࠐΈ͍ͨ৔߹͕͋Δ • asarѹॖ಺ͷϑΝΠϧ͸ಡΈऔΕͳ͍ • ϏϧυઃఆͰasarѹॖ͔Βআ֎͢Δඞཁ͕͋ Δ
44. "build": { "productName": "Whalebird", "appId": "org.whalebird.desktop", "directories": { "output": "build" }, "extraResources": [ "build/sounds/*" ], "files": [ "dist/electron/**/*", "build/icons/*" ], Ի੠ΛextraResources ʹࢦఆ
45. const soundBasePath = process.env.NODE_ENV === 'development' ? path.join(__dirname, '../../build/sounds/') : path.join(process.resourcesPath, 'build/sounds/') const sound = path.join(soundBasePath, 'operation_sound01.wav') simplayer(sound, (err) => { if (err) log.error(err) }) ͜͜͸asar֎ͷϑΝΠϧΛ ࢦఆ͢Δඞཁ͕͋Δ
46. Mac༻ͷূ໌ॻ • Developer ID Installer • Developer ID Application electron-builderͳΒϏϧυ࣌ʹ KeyChainAccess಺ͷূ໌ॻΛ ࣗಈͰ౰ͯͯ͘ΕΔ
47. MAS͚ͩ͸ಛผѻ͍ • electron-builderͰCodeSign·ͰͰ͖ͳ͔ͬͨ • electron-packagerͰϏϧυޙɼࣗ෼ͰCodeSign • plistΛࣗ෼Ͱॻ͘ඞཁ͕͋Δ • ͦΕΛApplication LoaderͰΞοϓϩʔυ͢Δ • ͋ͱ͸iTunes ConnectͰόʔδϣϯΞοϓ
48. #!/bin/zsh -f # Name of your app. APP="Whalebird" # The path of your app to sign. APP_PATH="./packages/Whalebird-mas-x64/Whalebird.app" # The path to the location you want to put the signed package. RESULT_PATH="./packages/$APP.pkg" # The name of certificates you requested. APP_KEY="3rd Party Mac Developer Application: Akira Fukushima (HB4N6B2YVM)" INSTALLER_KEY="3rd Party Mac Developer Installer: Akira Fukushima (HB4N6B2YVM)" # The path of your plist files. CHILD_PLIST="./plist/child.plist" PARENT_PLIST="./plist/parent.plist" LOGINHELPER_PLIST="./plist/loginhelper.plist" FRAMEWORKS_PATH="$APP_PATH/Contents/Frameworks" # At first, rename app.asar.unpacked directory. # Because electron-builder does not store app.asar.unpacked directory. # I want to store unpacked files at the same directory as electron-builder. mv $APP_PATH/Contents/Resources/app.asar.unpacked/* $APP_PATH/Contents/Resources/ codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/Electron Framework.framework/Versions/A/ Electron Framework" codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/Electron Framework.framework/Versions/A/ Libraries/libffmpeg.dylib" codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/Electron Framework.framework/Versions/A/ Libraries/libnode.dylib" codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/Electron Framework.framework" codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/$APP Helper.app/Contents/MacOS/$APP Helper" codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/$APP Helper.app/" codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/$APP Helper EH.app/Contents/MacOS/$APP Helper EH" codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/$APP Helper EH.app/" codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/$APP Helper NP.app/Contents/MacOS/$APP Helper NP" codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/$APP Helper NP.app/" codesign -s "$APP_KEY" -f --entitlements "$LOGINHELPER_PLIST" "$APP_PATH/Contents/Library/LoginItems/$APP Login Helper.app/Contents/MacOS/$APP Login Helper" codesign -s "$APP_KEY" -f --entitlements "$LOGINHELPER_PLIST" "$APP_PATH/Contents/Library/LoginItems/$APP Login Helper.app/" codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$APP_PATH/Contents/MacOS/$APP" codesign -s "$APP_KEY" -f --entitlements "$PARENT_PLIST" "$APP_PATH" productbuild --component "$APP_PATH" /Applications --sign "$INSTALLER_KEY" "$RESULT_PATH"
49. #!/bin/zsh -f # Name of your app. APP="Whalebird" # The path of your app to sign. APP_PATH="./packages/Whalebird-mas-x64/Whalebird.app" # The path to the location you want to put the signed package. RESULT_PATH="./packages/$APP.pkg" # The name of certificates you requested. APP_KEY="3rd Party Mac Developer Application: Akira Fukushima (HB4N6B2YVM)" INSTALLER_KEY="3rd Party Mac Developer Installer: Akira Fukushima (HB4N6B2YVM)" # The path of your plist files. CHILD_PLIST="./plist/child.plist" PARENT_PLIST="./plist/parent.plist" LOGINHELPER_PLIST="./plist/loginhelper.plist" FRAMEWORKS_PATH="$APP_PATH/Contents/Frameworks" # At first, rename app.asar.unpacked directory. # Because electron-builder does not store app.asar.unpacked directory. # I want to store unpacked files at the same directory as electron-builder. mv $APP_PATH/Contents/Resources/app.asar.unpacked/* $APP_PATH/Contents/Resources/ codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/Electron Framework.framework/Versions/A/ Electron Framework" codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/Electron Framework.framework/Versions/A/ Libraries/libffmpeg.dylib" codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/Electron Framework.framework/Versions/A/ Libraries/libnode.dylib" codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/Electron Framework.framework" codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/$APP Helper.app/Contents/MacOS/$APP Helper" codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/$APP Helper.app/" codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/$APP Helper EH.app/Contents/MacOS/$APP Helper EH" codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/$APP Helper EH.app/" codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/$APP Helper NP.app/Contents/MacOS/$APP Helper NP" codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/$APP Helper NP.app/" codesign -s "$APP_KEY" -f --entitlements "$LOGINHELPER_PLIST" "$APP_PATH/Contents/Library/LoginItems/$APP Login Helper.app/Contents/MacOS/$APP Login Helper" codesign -s "$APP_KEY" -f --entitlements "$LOGINHELPER_PLIST" "$APP_PATH/Contents/Library/LoginItems/$APP Login Helper.app/" codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$APP_PATH/Contents/MacOS/$APP" codesign -s "$APP_KEY" -f --entitlements "$PARENT_PLIST" "$APP_PATH" productbuild --component "$APP_PATH" /Applications --sign "$INSTALLER_KEY" "$RESULT_PATH" codesignίϚϯυΛ࢖͑͹ྑ͍
50. <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http:// www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>com.apple.security.app-sandbox</key> <true/> <key>com.apple.security.application-groups</key> <string>HB4N6B2YVM.org.whalebird.desktop</string> <key>com.apple.security.files.user-selected.read-only</key> <true/> <key>com.apple.security.network.client</key> <true/> </dict> </plist>
51. <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http:// www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>com.apple.security.app-sandbox</key> <true/> <key>com.apple.security.application-groups</key> <string>HB4N6B2YVM.org.whalebird.desktop</string> <key>com.apple.security.files.user-selected.read-only</key> <true/> <key>com.apple.security.network.client</key> <true/> </dict> </plist> ͜͜Ͱ • ωοτϫʔΫΞΫηε • ϑΝΠϧΞΫηε ౳ΛڐՄ͢Δ
52. ͜ͷ͋ͱ৹͕ࠪ͋Δʂ
53. MAS͸݁ߏͭΒ͍
54. ͜͜·Ͱͷ·ͱΊ • electron-builderϚδ΂ΜΓ • electron-builderͷਐา͕଎͍ͷͰ͜Ε࢖ͬͱ ͚͹ؒҧ͍ͳ͍ • MAS͸͍ͭ΋େม
55. MastodonͷΫϥΠΞϯτΛ ࡞Δ
56. ͳͥMastodonͷ ΫϥΠΞϯτΛ࡞Δͷ͔
57. σεΫτοϓ޲͚ͷ ΫϥΠΞϯτ͕ͳ͍ɼຊ౰ʹগͳ͍ • Mstdnʢࣗ෼ͰjsonϑΝΠϧΛ༻ҙͯ͠token ΛೖΕΔʣ • The Desk • TsuruʢόΠφϦͷ഑෍͸ͳ͍ʣ
58. ͳ͍ͷͰ͋Ε͹ ࣗ෼Ͱͭ͘Ζ͏
59. Whalebirdͷίϯηϓτ • LinuxͰ࢖͑Δ΋ͷΛ • Slackʹ׳Ε͍ͯΔͷͰSlackΆ͍ݟͨ໨ • γϣʔτΧοτ͸ͱʹ͔͘ଟ͘ ࠷ڧͷTwitterΫϥΠΞϯτ ઓ૪Λࢥ͍ग़͢
60. ॳ൛͕Ͱ͖ͨ
61. ւ֎͔Βͷ൓Ԡ
62. ʢӳޠαϙʔτ͔ͨ͠Β͔ʣ ࠷ॳ͸ւ֎͔Β൓Ԡ͕
63. ϦϦʔεͯ͠࠷ॳͷҰिؒ
68. ྑ͍ʂ͚ͩͲElectron͔…… Έ͍ͨͳ൓Ԡ͹͔Γ
69. ͦΜͳʹElectronͬͯධ൑ѱ ͍ͷʁ ೔ຊͰ͸͋·Γฉ͔ͳ͔͚ͬͨͬͲ
70. ධ൑ͷѱ͞ • ϝϞϦফඅ͕ଟ͍ • SlackΛىಈ͢Δ͚ͩͰ500MBҎ্ϝϞϦΛ͍͔࣋ͬͯ ΕΔ • ࠷దԽ͞Εͯͳ͍ͷͰϝϞϦফඅ͕ଟ͍ • Javaͷํ͕͍ܰ • node.js͕ݏ͍
71. ϝϞϦͱઓ͏
72. ࠷੝ظ͸1GBҎ্ ͍͔࣋ͬͯΕͨ
73. Ͳ͜ͰϝϞϦΛ ফඅ͍ͯ͠Δͷ͔ʁ
74. ࢼͯ͠ΈΔ • StreamingΛࢭΊͨঢ়ଶͰ͍Ζ͍Ζ৮ͬͯΈΔ • StreamingΛࢭΊͨঢ়ଶͰ์ஔ ϝϞϦϦʔΫ͔ʁ
75. StreamingࢭΊ͍ͯΔͱ૿͑ ͳ͍ʂ ผʹϝϞϦϦʔΫ͍ͯ͠ΔΘ ͚Ͱ͸ͳ͍ʂ
76. StreamingʹΑΔϝϞϦফඅ • ຊ਺Λ૿΍ͯ͠ΈΔʁ
77. StreamingʹΑΔϝϞϦফඅ • όοΫάϥ΢ϯυͰStreaming͢Δ͚ͩͰ͸ର ͯ͠ϝϞϦΛফඅ͠ͳ͍ʂ
78. ΋͏গ͠ࢼ͢ • ྲྀ଎ͷ஗͍ΠϯελϯεͰ์ஔʢmikutterʣ • ྲྀ଎ͷ଎͍ΠϯελϯεͰ์ஔʢjpʣ
79. ໌Β͔ʹྲྀ଎͕଎͍΄͏͕ ϝϞϦফඅ͕ଟ͍
80. ͜Ε͸΋͠΍ϨϯμϦϯά ͳͷͰ͸ʁ
81. WhalebirdͷλΠϜϥΠϯඳը • Streaming͞Εͨ΋ͷΛ͢΂ͯhtmlͱͯ͠දࣔ ͍ͯͨ͠ • ͭ·Γ͸ϒϥ΢βͷ࣮૷ʹؙ౤͛ • FireFoxͰ΋ڊେϖʔδΛ։͍ͨΒॏ͍
 ʢ͔ͩΒΈΜͳϖʔδωʔγϣϯ͢ΔΜͩ
83. ଞ͸Ͳ͏͍ͯ͠Δͷ͔ʁ
84. iOSͷ৔߹ • UITableView͸දࣔ͞Ε͍ͯΔ෦෼͔͠Ϩϯμ Ϧϯά͍ͯ͠ͳ͍ • ӅΕ͍ͯΔ෼·ͰؚΊͨεΫϩʔϧྔ͸ܭࢉ ͍ͯ͠Δ • εΫϩʔϧ͞Εͨࡍ͸දࣔ͢Δ௚લʹ಺༰Λ ౎౓ϨϯμϦϯά
85. ਤ
86. දࣔ͞Ε͍ͯͳ͍෦෼͸ ϨϯμϦϯά͍ͯ͠ͳ͍
87. UITableViewController • cellForRowAt: ηϧͷத਎ΛϨϯμϦϯά • heightForRowAt: ηϧͷߴ͞Λࢉग़ • estimatedHeightForRowAt: ະදࣔ෼ΛؚΊͯ ηϧͷߴ͞Λࢉग़
88. ྲྀੴʹ͜Ε͸ύΫΕͳ͍
89. ϙΠϯτɿ ඳը͢Δൣғ͸ݟ͍͑ͯΔ ෦෼͘Β͍Ͱे෼
90. ElectronͰͲ͏͢Δ͔ʁ • λΠϜϥΠϯΛ͢΂ͯදࣔ͢ΔͷΛ΍ΊΔ • ࠷৽40݅ͷΈΛදࣔ͠ɼඞཁͰ͋Ε͹ LazyLoading • StreamingͰߋ৽͞Εͨ৔߹͸ɼݹ͍΋ͷΛফ ͯ͠40݅ʹอͭ
92. εΫϩʔϧΠϕϯτΛ΋ͱʹ੍ޚͯ͠΍Δ
93. 200MBΛ੾Δʂ
94. ѹ౗త͡Όͳ͍͔ʂ
95. ϙΠϯτɿ Vue.jsͷύϑΥʔϚϯεʹ΋ ؾΛ഑Δ
96. vue.jsͷύϑΥʔϚϯε • v-ifͱv-show • v-if: ੾ସ࣌ʹhtml͕ੜ੒͞ΕϨϯμϦϯά͞ ΕΔ • v-show: ͸͡Ί͔ΒϨϯμϦϯά͞Εͯ͸͍Δ ͕ɼdisplay: none͞Ε͍ͯΔ͚ͩ
97. v-ifͱv-show • v-ifͷ੾ସ࣌ϨϯμϦϯάίετ͸അࣛʹͳΒ ͳ͍ • ͔͠͠ɼඞཁͷͳ͍ͱ͜ΖΛv-showʹ͢Δͱ ͣͬͱϝϞϦΛফඅ͠ଓ͚Δ
98. ͜͜͸ਖ਼ղ͕ͳ͍
99. ࠷ۙͷWhalebird • ϝϞϦফඅ: 200MB ~ 500MB • 500MB͘Β͍·Ͱ͘ΔͱGC͞ΕͯϝϞϦফඅ ͕ҰؾʹݮΔ • ը૾͕গͳ͍࣌ؒଳ͸͍ܰʂ
 ʢpawooͷਓ͝ΊΜͳ͍͞
100. ࠷ۙͷWhalebird • ϕʔεʹͳ͍ͬͯΔElectronΛόʔδϣϯΞο ϓ͢ΔͱϝϞϦফඅ͕ݮΔ • ύϑΥʔϚϯε͸Chromiumʹ߹ΘͤͯͲΜͲ Μྑ͘ͳΔ
101. ͜ͷઌͷ࡞ઓ • ը૾ͷඇදࣔΦϓγϣϯ • τΡʔτ͕࿈ଓ͢Δ৔߹͸·ͱΊͯϨϯμϦ ϯάͰ͖ͳ͍͔ʁ
102. ͓ӄ༷Ͱ࠷ۙͷ൓Ԡ͸ྑ͍
103. APIΫϥΠΞϯτϥΠϒϥϦ Λࣗ࡞͢Δ
104. ౰ॳ͸mastodon-apiͱ͍͏ Node.jsͷϥΠϒϥϦΛར༻
105. ͕ɼΤϥʔʹͳΔͱ͍͏ใࠂ ͕ͪΒ΄Β
106. mastodon-api • POSTύϥϝʔλΛbodyͰ͸ͳ͘urlύϥϝʔ λͱͯ͠ૹ৴͍ͯ͠Δ • Ұ෦αʔόͰ͸ͦΕΒ͕ڋ൱͞Ε͍ͯΔ ଞͷબ୒ࢶ͕ͳ͍
107. ͳ͍ͷͳΒࣗ࡞͠Α͏
109. megalodon • TypeScriptͰॻ͍ͨmastodonAPIΫϥΠΞϯ τϥΠϒϥϦ • Streaming΋࣮૷ࡁΈ • OAuthΞϓϦέʔγϣϯొ࿥༻ϝιου΋༻ ҙ
110. public get<T>(path: string, params = {}): Promise<Response<T>> { return axios .get<T>(this.baseUrl + path, { headers: { 'Authorization': `Bearer ${this.accessToken}` }, params }) .then((resp: AxiosResponse<T>) => { const res: Response<T> = { data: resp.data, status: resp.status, statusText: resp.statusText, headers: resp.headers } return res }) }
111. όάͬͯͨ৔߹͸ શ෦ࣗ෼Ͱ࣏ͤΔ
112. ΠϯελϯεΛ ݐͯΔ͜ͱ΋͋Δ
113. ΠϯελϯεݪҼͷ໰͍߹Θͤ ͸ଟ͍ • ϩάΠϯ͕Ͱ͖ͳ͍ • τΡʔτͰ͖ͳ͍ • Streaming͕ಈ͔ͳ͍ • ౳ʑ……
114. ࠷ۙ͋ͬͨ൵͍͠ࣄྫ • (mastodon͕࢖͍ͬͯΔ)doorkeeper 4.3.0Ҏ ্ Ͱnative_redirect_uriʹؔ͢Δόά͕ࠞೖ • mastodon: doorkeeper ~> 4.4.1 • σεΫτοϓΞϓϦέʔγϣϯͰೝূ͕Ͱ͖ ͳ͘ͳΔ
115. ͔֬ΊΔ&ϓϧϦΫΛग़͢ • खݩͰmastodonαʔόΛݐͯΔ: 
 https://github.com/tootsuite/documentation/blob/master/Running-Mastodon/ Development-guide.md • ࠶ݱͨ͠ • doorkeeperʹissueཱͯͨΓɼmastodonʹϓ ϧϦΫΛૹͬͨΓ
117. ΫϥΠΞϯτ͚ͩͷ໰୊Ͱ͸ͳ͍͜ͱ͕ଟ͍ͷͰɼ αΫοͱΠϯελϯεΛཱͯΒΕΔΑ͏ʹ ͓ͯ͘͠ͷॏཁ
118. ·ͱΊ
119. ੒ޭͨ͠ͳʔͱࢥ͏͜ͱ • ElectronͰ࡞ͬͨ͜ͱ • Vue.jsͱ͍͏બ୒ • ӳޠݍ΁ͷ഑ྀ
120. ࣦഊͨ͠ͳʔͱࢥ͏͜ͱ • ΋ͬͱૣ͘࡞Ε͹Α͔ͬͨ • ΋ͬͱૣ͘TypeScriptΛߟྀ͢΂͖ͩͬͨ • megalodon(APIΫϥΠΞϯτ)͸ϝϯς͠΍ ͍͢ • ద౰ͳΦϒδΣΫτΛ౉͢͜ͱ͕ଟ͍
121. updateTimeFormat ({ dispatch, commit, state }, value) { const newGeneral = Object.assign({}, state.general, { timeFormat: value }) const config = { general: newGeneral } ipcRenderer.send('update-preferences', config) ipcRenderer.once('error-update-preferences', (event, err) => { ipcRenderer.removeAllListeners('response-update-preferences') }) ipcRenderer.once('response-update-preferences', (event, conf) => { ipcRenderer.removeAllListeners('error-update-preferences') dispatch('App/loadPreferences', null, { root: true }) commit('updateGeneral', conf.general) }) }, action͸ͻͱ͔ͭ͠Ҿ਺ΛऔΕͳ͍ mainͱͷ௨৴͸ipcͰߦ͏ ະ஌ͷΦϒδΣΫτ
122. શମతʹݟͯ • Electron͸ʢϦϦʔεํ๏΋ؚΊͯʣਐԽͯ͠ ͍ΔͷͰ͓͢͢Ί͍ͨ͠ • ϝϞϦফඅ͸ରࡦՄೳ • Vue.jsͰGUIΞϓϦέʔγϣϯ։ൃ͢Δͷ͸ྑ ͍
123. Mastodon͕ շదʹͳͬͨͷͰ TwitterΛݟΔ͜ͱ͕ݮͬͨ
124. ͞Α͏ͳΒTwitter ΫϥΠΞϯτ