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
5k
Rails プログラマが Electron でギャルゲをつくりはじめた
Electron(旧:Atom-Shell)勉強会 #1 LT したものです。ちょっと加筆。
Koichi Tanaka
April 24, 2015
Tweet
Share
Other Decks in Programming
See All in Programming
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
7
5.4k
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
260
CSC305 Lecture 11
javiergs
PRO
0
270
Go言語はstack overflowの夢を見るか?
logica0419
0
610
Devvox Belgium - Agentic AI Patterns
kdubois
1
150
社会人になっても趣味開発を続けたい! / traPavilion
mazrean
1
100
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
120
Cursorハンズオン実践!
eltociear
2
1.2k
マンガアプリViewerの大画面対応を考える
kk__777
0
260
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
CSC509 Lecture 06
javiergs
PRO
0
270
モテるデスク環境
mozumasu
3
1.3k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Typedesign – Prime Four
hannesfritz
42
2.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
658
61k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
YesSQL, Process and Tooling at Scale
rocio
173
15k
The Language of Interfaces
destraynor
162
25k
Making Projects Easy
brettharned
120
6.4k
Docker and Python
trallard
46
3.6k
Done Done
chrislema
185
16k
For a Future-Friendly Web
brad_frost
180
10k
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
։ൃڥΛීஈͷ։ൃͯ͠Δͷʹ ͚ۙͮΔͱḿΓͦ͏