1.
ElectronからはじめるNode.js
東京Node学園付属小学校 2時限目 for Girls
2016/04/25 平田智子

2.
about me ①
• 平田 智子(hirata tomoko)
• 新潟生まれ 大阪育ち 東京勤め
• 中小SIerで主にサーバサイドエンジニアやってます。
• サーバサイド ：Java,VB.NET,C#
• フロントサイド：ASP.NET MVC等
• VisualStudioと仲良し(´ω´)
• Webの技術面白そうだなーと思い、去年くらいから
外部の勉強会に参加し始めました
• ←お世話になったり顔出しているグループ

3.
about me ②
• Github: https://github.com/tomoko523
• Facebook:hirata.tomoko
• blog:http://tomoko-tsubasa.hateblo.jp/
• Qiita:http://qiita.com/tomoko523
• Webの技術もっといろいろ知りたい>< ！が高じて
4月からジーズアカデミーに通っています(4期生)。
• 毎週課題に追われる日々ですが、なにより一緒に学
んでいける仲間ができて楽しいです！

4.
agenda
•Node.jsのはじめるまえの印象
•なぜNode.jsをはじめたのか
•Electronとは
•Node.jsを使えるようにする
•Electronアプリ作った
•Node.jsでやってみたいこと

5.
Node.jsのはじめるまえの印象
・npmとかsoket.ioとか名前だけ知ってる
・サーバサイドをjavascriptでかけるらしい
→でもサーバサイドならASP.NETとかRubyあるし…
・名前は良く聞くけど若干食わず嫌いぎみ(すみません…）

6.
なぜNode.jsをはじめたのか
・ウェブアプリも楽しいけど、デスクトップアプリもつくりたいな！
→Atom(＠GitHub)/Visual Studio Code(＠Microsoft)は
Electronっていうので作られているらしい
→ElectronはHTML/CSS/javascript+Node.jsでできるらしい
Node.jsやるしかない ！

7.
Electronとは
・HTML5/Javascriptでデスクトップアプリが作れるようになる。
・Windows、Mac、Linuxなどのクロスプラットフォーム対応が可能
・Node.jsとChromiumベース（webアプリみたいにデバックが可能）
http://electron.atom.io/
Electronの意味は”電子”だよ！

8.
Node.jsを使えるようにする
バージョン管理ツールを使いました。
nodist(for Windows)
Windowsの場合、nodistのインストーラーを使うのが楽です。
git cloneすることもできるますが、pathを通す必要があります。
※いろいろエラーが出て何回かやりなおした…(´・ω・｀)
nodebrew(forMac) ←macの人はこちら

9.
Electronアプリ作った
①electronをインストール
$ npm -g install electron-prebuilt
②既存のwebアプリを移行する
③配布パッケージ化するツールをインストール
$ npm i electron-packager –g
参考URL
Electron入門
30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで

10.
DEMO
ベースはジーズアカデミーの課題で作った
HTML5/CSS/Javascript+Milkcocoaで作ったチャットアプリです。
書いてある通りにやったら想像以上にすぐできました！

11.
DEMO

12.
Node.jsでやってみたいこと
もっとがっつり使ってみたい！
→食わず嫌いをやめ、Nodejsのお作法を知る(勉強します！）
Electronアプリケーションを作って配布したい
→今回はとりあえず動けばいい…で作ったので;;

13.
ありがとうございました！
素材：ぴよたそ