Electron からはじめるNode.js

東京 Node 学園付属小学校　 2 時限目　 for Girls2016/04/25 平田智子

about me ①• 平田　智子 (hirata tomoko)• 新潟生まれ　大阪育ち　東京勤め

• 中小 SIer で主にサーバサイドエンジニアやってます。• サーバサイド ： Java,VB.NET,C#• フロントサイド： ASP.NET 　 MVC 等• VisualStudio と仲良し (´ω´)

• Web の技術面白そうだなーと思い、去年くらいから外部の勉強会に参加し始めました• ← お世話になったり顔出しているグループ

about me ②

• Github: https://github.com/tomoko523• Facebook:hirata.tomoko• blog:http://tomoko-tsubasa.hateblo.jp/• Qiita:http://qiita.com/tomoko523

• Web の技術もっといろいろ知りたい >< ！が高じて4 月からジーズアカデミーに通っています (4 期生 ) 。• 毎週課題に追われる日々ですが、なにより一緒に学ん

でいける仲間ができて楽しいです！

agenda•Node.jsのはじめるまえの印象

•なぜNode.jsをはじめたのか•Electronとは•Node.jsを使えるようにする•Electronアプリ作った

•Node.jsでやってみたいこと

Node.js のはじめるまえの印象

・ npm とか soket.io とか名前だけ知ってる

・サーバサイドを javascript でかけるらしい　→でもサーバサイドなら ASP.NET とか Ruby あるし…

・名前は良く聞くけど若干食わず嫌いぎみ ( すみません…）

なぜ Node.js をはじめたのか

・ウェブアプリも楽しいけど、デスクトップアプリもつくりたいな！

→Atom( ＠ GitHub)/Visual Studio Code( ＠ Microsoft) は　 Electron っていうので作られているらしい

→Electron は HTML/CSS/javascript+Node.js でできるらしい

Node.js やるしかない ！

Electron とは

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

Electronの意味は”電子”だよ！

Node.js を使えるようにする

バージョン管理ツールを使いました。

nodist(for Windows)Windows の場合、 nodist のインストーラーを使うのが楽です。git 　 clone することもできるますが、 path を通す必要があります。※ いろいろエラーが出て何回かやりなおした… (´ ・ ω ・｀ )

nodebrew(forMac) ←mac の人はこちら

Electron アプリ作った

①electron をインストール $ npm -g install electron-prebuilt

② 既存の web アプリを移行する

③ 配布パッケージ化するツールをインストール $ npm i electron-packager –g

参考 URLElectron入門30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで

DEMO

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

DEMO

Node.js でやってみたいこと

もっとがっつり使ってみたい！→ 食わず嫌いをやめ、 Nodejs のお作法を知る ( 勉強します！）

Electron アプリケーションを作って配布したい→ 今回はとりあえず動けばいい…で作ったので ;;

ありがとうございました！

素材：ぴよたそ