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
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
120
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
150
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
380
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
460
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
12k
CSC509 Lecture 03
javiergs
PRO
0
330
What's new in Spring Modulith?
olivergierke
1
110
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
620
止められない医療アプリ、そっと Swift 6 へ
medley
1
130
オープンソースソフトウェアへの解像度🔬
utam0k
2
240
Cursorハンズオン実践!
eltociear
1
290
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
139
7.1k
Speed Design
sergeychernyshev
32
1.1k
Mobile First: as difficult as doing things right
swwweet
224
10k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Unsuck your backbone
ammeep
671
58k
Documentation Writing (for coders)
carmenintech
75
5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Bash Introduction
62gerente
615
210k
Building an army of robots
kneath
306
46k
Side Projects
sachag
455
43k
The Cost Of JavaScript in 2023
addyosmani
53
9k
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
։ൃڥΛීஈͷ։ൃͯ͠Δͷʹ ͚ۙͮΔͱḿΓͦ͏