30分でhello electron
TRANSCRIPT
![Page 1: 30分でHello Electron](https://reader034.vdocuments.net/reader034/viewer/2022042611/5871aaf91a28abda6a8b574f/html5/thumbnails/1.jpg)
30分でHello!!ElectronGaddict
![Page 2: 30分でHello Electron](https://reader034.vdocuments.net/reader034/viewer/2022042611/5871aaf91a28abda6a8b574f/html5/thumbnails/2.jpg)
Agenda
Electronとは
なぜElectronか
Hello Electron
感想
![Page 3: 30分でHello Electron](https://reader034.vdocuments.net/reader034/viewer/2022042611/5871aaf91a28abda6a8b574f/html5/thumbnails/3.jpg)
テキスト
Electronとは
![Page 4: 30分でHello Electron](https://reader034.vdocuments.net/reader034/viewer/2022042611/5871aaf91a28abda6a8b574f/html5/thumbnails/4.jpg)
Electronとは
“Build cross platform desktop apps with web technologies”
HTML, CSS, JavaScript - Node.js + Chromium
![Page 5: 30分でHello Electron](https://reader034.vdocuments.net/reader034/viewer/2022042611/5871aaf91a28abda6a8b574f/html5/thumbnails/5.jpg)
テキスト
なぜElectronか
![Page 6: 30分でHello Electron](https://reader034.vdocuments.net/reader034/viewer/2022042611/5871aaf91a28abda6a8b574f/html5/thumbnails/6.jpg)
なぜElectronか
Web技術学べる
クロスプラットフォーム
自分の作業効率化を助けられるかも
Node.jsだし
![Page 7: 30分でHello Electron](https://reader034.vdocuments.net/reader034/viewer/2022042611/5871aaf91a28abda6a8b574f/html5/thumbnails/7.jpg)
テキスト
Hello Electron
![Page 8: 30分でHello Electron](https://reader034.vdocuments.net/reader034/viewer/2022042611/5871aaf91a28abda6a8b574f/html5/thumbnails/8.jpg)
Hello Electron流れ
npm -g install electron-prebuilt
npm init -y
3つのファイル作成
package.json(自動生成)
main.js
index.html
electron .
![Page 9: 30分でHello Electron](https://reader034.vdocuments.net/reader034/viewer/2022042611/5871aaf91a28abda6a8b574f/html5/thumbnails/9.jpg)
HelloElectron
npm -g install electron-prebuilt
Electronをインストールする
![Page 10: 30分でHello Electron](https://reader034.vdocuments.net/reader034/viewer/2022042611/5871aaf91a28abda6a8b574f/html5/thumbnails/10.jpg)
HelloElectron
npm init -y
Electronアプリケーションを現在のフォルダーに作成する
![Page 11: 30分でHello Electron](https://reader034.vdocuments.net/reader034/viewer/2022042611/5871aaf91a28abda6a8b574f/html5/thumbnails/11.jpg)
HelloElectron
package.json(自動生成)
npm init -y すると作成される
アプリケーションに関するいろいろな情報を書いておく場所
![Page 12: 30分でHello Electron](https://reader034.vdocuments.net/reader034/viewer/2022042611/5871aaf91a28abda6a8b574f/html5/thumbnails/12.jpg)
HelloElectronpackage.json(自動生成)
![Page 13: 30分でHello Electron](https://reader034.vdocuments.net/reader034/viewer/2022042611/5871aaf91a28abda6a8b574f/html5/thumbnails/13.jpg)
HelloElectron
main.js
一番最初に呼び出されるjs
Chromiumを呼び出す処理を記述する
![Page 14: 30分でHello Electron](https://reader034.vdocuments.net/reader034/viewer/2022042611/5871aaf91a28abda6a8b574f/html5/thumbnails/14.jpg)
HelloElectronmain.js
![Page 15: 30分でHello Electron](https://reader034.vdocuments.net/reader034/viewer/2022042611/5871aaf91a28abda6a8b574f/html5/thumbnails/15.jpg)
HelloElectron
index.html
main.jsからロードされるhtml
Hello!!Electronする
![Page 16: 30分でHello Electron](https://reader034.vdocuments.net/reader034/viewer/2022042611/5871aaf91a28abda6a8b574f/html5/thumbnails/16.jpg)
HelloElectronindex.html
![Page 17: 30分でHello Electron](https://reader034.vdocuments.net/reader034/viewer/2022042611/5871aaf91a28abda6a8b574f/html5/thumbnails/17.jpg)
HelloElectron
electron .
Electronアプリケーションを起動する
![Page 18: 30分でHello Electron](https://reader034.vdocuments.net/reader034/viewer/2022042611/5871aaf91a28abda6a8b574f/html5/thumbnails/18.jpg)
感想思ったよりも簡単だった
次は以下のことに挑戦したい
配布
ライブラリの利用