Rails プログラマが Electron でギャルゲをつくりはじめた

Electron(旧:Atom-Shell)勉強会 #1 LT したものです。ちょっと加筆。

Transcript

1. 3BJMTϓϩάϥϚ͕
   &MFDUSPOͰ
   ΪϟϧήΛ
   ͭ͘Γ͸͡Ίͨ !UBOBLB
   
   &MFDUSPO چ"UPN4IFMM ษڧձ
   
2. ΞδΣϯμ w ࣗݾ঺հ
   w ΪϟϧήΛͭ͘Γ͸͡Ίͨཧ༝
   w &MFDUSPO
   ࠾༻ͷཧ༝
   w +BWB4DSJQU
   քͷ͖ͨ͠ΓΛ஌Δ
   w ։ൃ؀ڥΛ
   3BJMT
   ʹ͚ۙͮΔ
   w ·ͱΊ
3. ࣗݾ঺հ
4. w ాதᔨҰ
   w UXJUUFS(JU)VC
   !UBOBLB
   w גࣜձࣾ
   ສ༿
   w 3BJMTͰͷडୗ։ൃ։ൃࢧԉίϯαϧ FUD
   w 3BJMT
   ྺ೥ऑ
   w αʔόʔαΠυϝΠϯ
   w +4
   ͸
   3BJMT
   ͔Βҳ୤͠ͳ͍ఔ౓ʹ৮ΔҐ
5. 8&
   "3&
   )*3*/( 3BJMTͰ։ൃΛ͍ͨ͠
   ஥ؒΛืूதͰ͢
6. ΪϟϧήΛ
   ͭ͘Γ͸͡Ίͨ
   ཧ༝
8. Ϊϟϧή Ͱ 
9. Ұൃ౰ͯ ͍ͨ 
10. ໨ࢦ͢͸
    ཽ˓࢜ 
11. ΍ Γ · ͠ ΐ ͏ʂ 
12. ิ଍ w ٍཽ࢜˓
    ͞Μ͸๭ϊϕϧήʔϜΛ ͭͬͯ͘େώοτͨ͠
    w ͦΜͳײ͡ͰΪϟϧήΛग़ͯ͠Ұൃ ౰͍ͯͨͷͰ͋Δ
    w ͦͷޙʮֵ৽తιϑτ΢ΣΞاۀͷ࡞Γํʯͱ͍͏ຊʹήʔϜ͸ࣦഊ͠΍͍͢ͱॻ͍ͯ͋Δ ͷΛ஌ͬͯປΛೞΒͨ͠
13. &MFDUSPO
    ࠾༻ͷཧ༝
14. 8JOEPXT
    Ҏ֎Ͱ΋΍Γ ͍ͨ 
15. ิ଍ w ࠷ۙ࿩୊ͩͬͨ
    w ,PCJUP
    GPS
    8JOEPXT
    w 4MBDL
    GPS
    8JOEPXT
    w 8JOEPXT
    ͕ͳͯ͘΋։ൃͰ͖Δ
    w ϚϧνϓϥοτϑΥʔϜ
    w ήʔϜ։ൃʹ
    &MFDUSPO
    ͋Γͳؾ͕͍ͯ͠ Δ
16. +BWB4DSJQU
    քͷ
    ͖ͨ͠ΓΛ஌Δ
17. ͯ͞
    3&"%.&΍Β νϡʔτϦΞϧ هࣄ΍Β
    ಡΜͰΈΔ͔ͳ 
18. OPEFKT JPKT OQN CPXFS HSVOU HVMQ CSPDDPMJ CSPXTFSJGZ
    
19. ʗ ?P? ʘ 
20. wJPKT OPEFKT
    wOQN
    wHVMQ Λ཈͓͚͑ͯ͹
    ͍͍ͩͨେৎ෉ Ά͍
21. wOPEFKT
    w +BWB4DSJQU
    ͷ࣮ߦ؀ڥ
    wJPKT
    w OPEFKT
    ΛϑΥʔΫͨ͠΋ͷ
    w OPEFKT
    ͱಉͩ͡ͱࢥͬͯ࢖ͬͯΕ͹ ͱΓ͋͑ͣ໰୊ͳ͍ ϋζ
22. wOQN
    w ύοέʔδϚωʔδϟ
    w OPEFKT
    ʹ͍ͭͯ͘Δ
    w 3VCZ
    Ͱ͍͏
    #VOEMFS
    w 3BJMT
    Ͱ͍͏
    SBJMT
    ίϚϯυ
23. wOQN
    ͷίϚϯυ
    w npm init
    ͰϓϩδΣΫτͷͻͳܗ࡞ ੒ QBDLBHFKTPO
    ͕Ͱ͖Δ
    w BUPNTIFMM
    ΞϓϦͰ΋ಉ͡खॱ Ͱ࡞Γ࢝ΊΔͱྑ͍
    w QBDLBHFKTPO
    ͸ɺ͍͍ͩͨ
    (FNpMF
    ͱಉ͡
24. wOQN
    ͷίϚϯυ
    • npm install -g <package-name> ˒ άϩʔόϧʹΠϯετʔϧ
    • npm install —save-dev <package-name> ˒OPEF@NPEVMFT
    σΟϨΫτϦҎԼʹΠϯετʔϧ
    ˒QBDLBHFKTPO
    ͷ
    EFW%FQFOEFODJFT
    ʹύοέʔδ໊͕௥ه͞ ΕΔ
25. 
    CVOEMFS
    (FNpMF
    ʹ
    HFN
    Λ௥ه ͨ͠ޙʹ
    CVOEMF
    JOTUBMM
    
    OQN
    OQN
    JOTUBMM
    ŠTBWFEFW
    ͢Δ ͚ͩ CVOEMFS
    ͱͷҧ͍
26. wHVMQ
    w Ϗϧυπʔϧ
    w SBLF
    ͷΑ͏ͳ΋ͷ
    w DPGGFFTDSJQU
    ΍ΒͳΜ΍ΒΛίϯύΠϧ ͢Δͷʹ࢖͏
    w HVMQpMFDPGGFF
    ʹλεΫΛهड़͍ͯ͘͠
27. w HVMQ
    Ҏ֎ʹ΋Ϗϧυπʔϧ͕͍͔ͭ͘ ͋Δ
    w ͨͿΜɺਖ਼ղ͸ͳ͍
    w ݱঢ়͸
    HVMQ
    Λ࢖͓͚ͬͯ͹ؒҧ͍ͳ͍
    w ͱࢥͬͯ΍Βͳ͍ͱɺϠΫ͕ͲΜͲΜ ༙͍ͯग़ͯ͘Δ
    w ͻͱ·ͣɺ࠷௿ݶʹಈ࡞͢Δ
    HVMQpMF
    Λ࡞͔ͬͯΒ৭ʑࢼ͢ͷ͕ྑ͍
28. ։ൃ؀ڥΛ
    3BJMT
    ʹ͚ۙͮΔ
29. KBEF TUZMVT
    TBTT IBNM
    TMJN DPGGFFTDSJQU
    UZQFTDSJQU 
30. ʗ ?P? ʘ 
31. w ීஈ
    3BJMT
    Ͱ։ൃͯ͠Δ؀ڥͱ͚ۙͮΔ
    w DPGGFF
    TDSJQU
    w TMJN
    PS
    IBNM
    w TBTT
    PS
    MFTT
    w HVMQ
    ͷศརͦ͏ͳهࣄ͸ͻͱ·ͣແࢹ͠ ͯɺϛχϚϜʹ΍Δ
    w ͡Όͳ͍ͱ
    ZBL
    TIBWJOH
    ͕ӬԕʹऴΘ Βͳ͍
32. # プロジェクトを作成する $ mkdir higurashi $ cd higurashi $ npm init # Electron 用に package.json を調整 $ vim package.json $ cat package.json | grep main "main": "dest/js/index.js",
33. # プロジェクトに必要なモジュール # のインストール $ npm install --save-dev \ gulp \ coffee-script \ gulp-coffee \ gulp-plumber \ gulp-sass \ gulp-slim \ gulp-util
34. # gulpfile.coffee をつくる $ vim gulpfile.coffee
35. # (省略) COFFEE_FILES = './src/coffee/**/*.coffee' gulp.task 'coffee', -> gulp.src COFFEE_FILES .pipe plumber() .pipe coffee bare: true .on 'error', util.log .pipe gulp.dest './dest/js' gulp.task 'watch-coffee', -> gulp.watch COFFEE_FILES, ['coffee'] # (省略)
36. # slim / sass / image もだいたいコピペで # 全貌はこちら: http://bit.ly/1Hb6Vw8
37. $ tree src src ├── coffee │ └── index.coffee ├── sass │ └── index.sass └── slim └── index.slim
38. # コンパイルする $ gulp
39. # Electron のバイナリを落としてくる # https://github.com/atom/electron/ releases # electron-v0.25.1-darwin-x64/ Electron.app/Contents/MacOS/Electron にパスを通しておくと便利 # 僕は electron で実行できるようにして いる
40. # 実行する $ electron .
42. HVMQpMF
    Λ੔උ͢Δͷ Ͱྗਚ͖ͯɺ੩ࢭը·Ͱ ͔͠׬੒͍ͯ͠·ͤΜ
43. ୈೋճ͕͋Ε͹ಈ͘ ΋ͷΛ͓ݟͤͰ͖Ε ͹ͱࢥ͍ͬͯ·͢
44. ·ͱΊ
45. w Ұൃ౰ͯΔ΂͘ΪϟϧήΛͭ͘Γ͸ ͡Ίͨ
    w ϚϧνϓϥοτϑΥʔϜͳήʔϜ੍ ࡞ʹ
    &MFDUSPO
    ྑͦ͞͏
    w ·ͣ͸
    +4
    քͷ͖ͨ͠Γݴ༿Λֶ Ϳ
    w ։ൃ؀ڥΛීஈͷ։ൃͯ͠Δ΋ͷʹ ͚ۙͮΔͱḿΓͦ͏