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

3BJMTϓϩάϥϚ͕ &MFDUSPOͰ ΪϟϧήΛ ͭ͘Γ͸͡Ίͨ !UBOBLB &MFDUSPO چ"UPN4IFMM ษڧձ

ΞδΣϯμ w ࣗݾ঺հ w ΪϟϧήΛͭ͘Γ͸͡Ίͨཧ༝ w &MFDUSPO࠾༻ͷཧ༝ w +BWB4DSJQUքͷ͖ͨ͠ΓΛ஌Δ w
։ൃ؀ڥΛ3BJMTʹ͚ۙͮΔ w ·ͱΊ

ࣗݾ঺հ

w ాதᔨҰ w UXJUUFS(JU)VC!UBOBLB w גࣜձࣾສ༿ w 3BJMTͰͷडୗ։ൃ։ൃࢧԉίϯαϧ FUD w
3BJMTྺ೥ऑ w αʔόʔαΠυϝΠϯ w +4͸3BJMT͔Βҳ୤͠ͳ͍ఔ౓ʹ৮ΔҐ

8&"3&)*3*/( 3BJMTͰ։ൃΛ͍ͨ͠ ஥ؒΛืूதͰ͢

ΪϟϧήΛ ͭ͘Γ͸͡Ίͨ ཧ༝

Ϊϟϧή Ͱ

Ұൃ౰ͯ ͍ͨ

໨ࢦ͢͸ ཽ˓࢜

΍ Γ · ͠ ΐ ͏ʂ

ิ଍ w ٍཽ࢜˓͞Μ͸๭ϊϕϧήʔϜΛ ͭͬͯ͘େώοτͨ͠ w ͦΜͳײ͡ͰΪϟϧήΛग़ͯ͠Ұൃ ౰͍ͯͨͷͰ͋Δ w ͦͷޙʮֵ৽తιϑτ΢ΣΞاۀͷ࡞Γํʯͱ͍͏ຊʹήʔϜ͸ࣦഊ͠΍͍͢ͱॻ͍ͯ͋Δ ͷΛ஌ͬͯປΛೞΒͨ͠

&MFDUSPO ࠾༻ͷཧ༝

8JOEPXT Ҏ֎Ͱ΋΍Γ ͍ͨ

ิ଍ w ࠷ۙ࿩୊ͩͬͨ w ,PCJUPGPS8JOEPXT w 4MBDLGPS8JOEPXT w 8JOEPXT͕ͳͯ͘΋։ൃͰ͖Δ w
ϚϧνϓϥοτϑΥʔϜ w ήʔϜ։ൃʹ&MFDUSPO͋Γͳؾ͕͍ͯ͠ Δ

+BWB4DSJQUքͷ ͖ͨ͠ΓΛ஌Δ

ͯ͞ 3&"%.&΍Β νϡʔτϦΞϧ هࣄ΍Β ಡΜͰΈΔ͔ͳ

OPEFKT JPKT OQN CPXFS HSVOU HVMQ CSPDDPMJ CSPXTFSJGZ

ʗ ?P? ʘ

wJPKT OPEFKT wOQN wHVMQ Λ཈͓͚͑ͯ͹ ͍͍ͩͨେৎ෉ Ά͍

wOPEFKT w +BWB4DSJQUͷ࣮ߦ؀ڥ wJPKT w OPEFKTΛϑΥʔΫͨ͠΋ͷ w OPEFKTͱಉͩ͡ͱࢥͬͯ࢖ͬͯΕ͹ ͱΓ͋͑ͣ໰୊ͳ͍ ϋζ

wOQN w ύοέʔδϚωʔδϟ w OPEFKTʹ͍ͭͯ͘Δ w 3VCZͰ͍͏#VOEMFS w 3BJMTͰ͍͏SBJMTίϚϯυ

wOQNͷίϚϯυ w npm initͰϓϩδΣΫτͷͻͳܗ࡞ ੒ QBDLBHFKTPO͕Ͱ͖Δ w BUPNTIFMMΞϓϦͰ΋ಉ͡खॱ Ͱ࡞Γ࢝ΊΔͱྑ͍
w QBDLBHFKTPO͸ɺ͍͍ͩͨ (FNpMFͱಉ͡

wOQNͷίϚϯυ • npm install -g <package-name> ˒ άϩʔόϧʹΠϯετʔϧ • npm
install —save-dev <package-name> ˒OPEF@NPEVMFTσΟϨΫτϦҎԼʹΠϯετʔϧ ˒QBDLBHFKTPOͷEFW%FQFOEFODJFTʹύοέʔδ໊͕௥ه͞ ΕΔ

CVOEMFS(FNpMFʹHFNΛ௥ه ͨ͠ޙʹCVOEMFJOTUBMM OQNOQNJOTUBMMTBWFEFW͢Δ ͚ͩ CVOEMFSͱͷҧ͍

wHVMQ w Ϗϧυπʔϧ w SBLFͷΑ͏ͳ΋ͷ w DPGGFFTDSJQU΍ΒͳΜ΍ΒΛίϯύΠϧ ͢Δͷʹ࢖͏ w HVMQpMFDPGGFFʹλεΫΛهड़͍ͯ͘͠

w HVMQҎ֎ʹ΋Ϗϧυπʔϧ͕͍͔ͭ͘ ͋Δ w ͨͿΜɺਖ਼ղ͸ͳ͍ w ݱঢ়͸HVMQΛ࢖͓͚ͬͯ͹ؒҧ͍ͳ͍ w ͱࢥͬͯ΍Βͳ͍ͱɺϠΫ͕ͲΜͲΜ ༙͍ͯग़ͯ͘Δ
w ͻͱ·ͣɺ࠷௿ݶʹಈ࡞͢ΔHVMQpMF Λ࡞͔ͬͯΒ৭ʑࢼ͢ͷ͕ྑ͍

։ൃ؀ڥΛ 3BJMTʹ͚ۙͮΔ

KBEF TUZMVT TBTT IBNM TMJN DPGGFFTDSJQU UZQFTDSJQU

ʗ ?P? ʘ

w ීஈ3BJMTͰ։ൃͯ͠Δ؀ڥͱ͚ۙͮΔ w DPGGFFTDSJQU w TMJN PSIBNM w TBTT
PSMFTT w HVMQͷศརͦ͏ͳهࣄ͸ͻͱ·ͣແࢹ͠ ͯɺϛχϚϜʹ΍Δ w ͡Όͳ͍ͱZBLTIBWJOH͕ӬԕʹऴΘ Βͳ͍

# プロジェクトを作成する $ mkdir higurashi $ cd higurashi $ npm
init # Electron 用に package.json を調整 $ vim package.json $ cat package.json | grep main "main": "dest/js/index.js",

# プロジェクトに必要なモジュール # のインストール $ npm install --save-dev \ gulp
\ coffee-script \ gulp-coffee \ gulp-plumber \ gulp-sass \ gulp-slim \ gulp-util

# gulpfile.coffee をつくる $ vim gulpfile.coffee

# (省略) 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'] # (省略)

# slim / sass / image もだいたいコピペで # 全貌はこちら: http://bit.ly/1Hb6Vw8

$ tree src src ├── coffee │ └── index.coffee ├──
sass │ └── index.sass └── slim └── index.slim

# コンパイルする $ gulp

# Electron のバイナリを落としてくる # https://github.com/atom/electron/ releases # electron-v0.25.1-darwin-x64/ Electron.app/Contents/MacOS/Electron にパスを通しておくと便利
# 僕は electron で実行できるようにしている

# 実行する $ electron .

HVMQpMFΛ੔උ͢Δͷ Ͱྗਚ͖ͯɺ੩ࢭը·Ͱ ͔͠׬੒͍ͯ͠·ͤΜ

ୈೋճ͕͋Ε͹ಈ͘ ΋ͷΛ͓ݟͤͰ͖Ε ͹ͱࢥ͍ͬͯ·͢

·ͱΊ

w Ұൃ౰ͯΔ΂͘ΪϟϧήΛͭ͘Γ͸ ͡Ίͨ w ϚϧνϓϥοτϑΥʔϜͳήʔϜ੍ ࡞ʹ&MFDUSPOྑͦ͞͏ w ·ͣ͸+4քͷ͖ͨ͠Γݴ༿Λֶ Ϳ w
։ൃ؀ڥΛීஈͷ։ൃͯ͠Δ΋ͷʹ ͚ۙͮΔͱḿΓͦ͏

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

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

Other Decks in Programming

Featured

Transcript