Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Rails プログラマが Electron でギャルゲをつくりはじめた
Search
Koichi Tanaka
April 24, 2015
Programming
6
4.8k
Rails プログラマが Electron でギャルゲをつくりはじめた
Electron(旧:Atom-Shell)勉強会 #1 LT したものです。ちょっと加筆。
Koichi Tanaka
April 24, 2015
Tweet
Share
Other Decks in Programming
See All in Programming
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
810
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
400
Random\Randomizer クラスで日常のあれこれを解決しよう! / Random\Randomizer class solves familiar trouble
cocoeyes02
0
250
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
1
180
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
670
Snowflakeで眠ったデータを起こそう!
estie
0
120
Git Rebase
bkuhlmann
11
1.6k
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
370
Ruby Function Composition
bkuhlmann
1
330
雑に思考を整理する技術と効能
konifar
60
29k
新宿ダンジョンを可視化してみた
satoshi7190
2
260
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
140
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Documentation Writing (for coders)
carmenintech
60
3.9k
Visualization
eitanlees
136
14k
What's new in Ruby 2.0
geeforr
337
31k
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
What the flash - Photography Introduction
edds
64
11k
A Tale of Four Properties
chriscoyier
151
22k
Web Components: a chance to create the future
zenorocha
305
41k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
BBQ
matthewcrist
80
8.8k
Music & Morning Musume
bryan
41
5.6k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
Transcript
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 +43BJMT͔Βҳ͠ͳ͍ఔʹ৮ΔҐ
8&"3&)*3*/( 3BJMTͰ։ൃΛ͍ͨ͠ ؒΛืूதͰ͢
ΪϟϧήΛ ͭ͘Γ͡Ίͨ ཧ༝
None
Ϊϟϧή Ͱ
Ұൃͯ ͍ͨ
ࢦ͢ ཽ˓࢜
Γ · ͠ ΐ ͏ʂ
ิ 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 .
None
HVMQpMFΛඋ͢Δͷ Ͱྗਚ͖ͯɺ੩ࢭը·Ͱ ͔͍ͯ͠͠·ͤΜ
ୈೋճ͕͋Εಈ͘ ͷΛ͓ݟͤͰ͖Ε ͱࢥ͍ͬͯ·͢
·ͱΊ
w ҰൃͯΔ͘ΪϟϧήΛͭ͘Γ ͡Ίͨ w ϚϧνϓϥοτϑΥʔϜͳήʔϜ੍ ࡞ʹ&MFDUSPOྑͦ͞͏ w ·ͣ+4քͷ͖ͨ͠Γݴ༿Λֶ Ϳ w
։ൃڥΛීஈͷ։ൃͯ͠Δͷʹ ͚ۙͮΔͱḿΓͦ͏