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
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
21
5.6k
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
270
testingを眺める
matumoto
1
140
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
130
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
430
機能追加とリーダー業務の類似性
rinchoku
2
1.2k
rage against annotate_predecessor
junk0612
0
160
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
6
2.3k
複雑なドメインに挑む.pdf
yukisakai1225
5
1.1k
AIコーディングAgentとの向き合い方
eycjur
0
270
TDD 実践ミニトーク
contour_gara
1
290
Ruby Parser progress report 2025
yui_knk
1
430
Featured
See All Featured
Facilitating Awesome Meetings
lara
55
6.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
111
20k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Balancing Empowerment & Direction
lara
3
620
A Modern Web Designer's Workflow
chriscoyier
696
190k
Embracing the Ebb and Flow
colly
87
4.8k
Six Lessons from altMBA
skipperchong
28
4k
How STYLIGHT went responsive
nonsquared
100
5.8k
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
։ൃڥΛීஈͷ։ൃͯ͠Δͷʹ ͚ۙͮΔͱḿΓͦ͏