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
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
490
スケールする組織の実現に向けた インナーソース育成術 - ISGT2025
teamlab
PRO
1
160
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
770
Namespace and Its Future
tagomoris
6
710
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
210
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
340
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
Navigating Dependency Injection with Metro
zacsweers
3
2.5k
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
510
Improving my own Ruby thereafter
sisshiki1969
1
160
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
180
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
710
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
A designer walks into a library…
pauljervisheath
207
24k
Code Review Best Practice
trishagee
71
19k
YesSQL, Process and Tooling at Scale
rocio
173
14k
How STYLIGHT went responsive
nonsquared
100
5.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Designing for humans not robots
tammielis
253
25k
Docker and Python
trallard
46
3.6k
Building Adaptive Systems
keathley
43
2.7k
Balancing Empowerment & Direction
lara
3
620
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
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
։ൃڥΛීஈͷ։ൃͯ͠Δͷʹ ͚ۙͮΔͱḿΓͦ͏