Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Electronからはじめるnodejs

東京Node学園付属小学校 2時限目 for Girls の登壇資料です。(2016/4/25)

  • Login to see the comments

Electronからはじめるnodejs

  1. 1. ElectronからはじめるNode.js 東京Node学園付属小学校 2時限目 for Girls 2016/04/25 平田智子
  2. 2. about me ① • 平田 智子(hirata tomoko) • 新潟生まれ 大阪育ち 東京勤め • 中小SIerで主にサーバサイドエンジニアやってます。 • サーバサイド :Java,VB.NET,C# • フロントサイド:ASP.NET MVC等 • VisualStudioと仲良し(´ω´) • Webの技術面白そうだなーと思い、去年くらいから 外部の勉強会に参加し始めました • ←お世話になったり顔出しているグループ
  3. 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. 4. agenda •Node.jsのはじめるまえの印象 •なぜNode.jsをはじめたのか •Electronとは •Node.jsを使えるようにする •Electronアプリ作った •Node.jsでやってみたいこと
  5. 5. Node.jsのはじめるまえの印象 ・npmとかsoket.ioとか名前だけ知ってる ・サーバサイドをjavascriptでかけるらしい →でもサーバサイドならASP.NETとかRubyあるし… ・名前は良く聞くけど若干食わず嫌いぎみ(すみません…)
  6. 6. なぜNode.jsをはじめたのか ・ウェブアプリも楽しいけど、デスクトップアプリもつくりたいな! →Atom(@GitHub)/Visual Studio Code(@Microsoft)は Electronっていうので作られているらしい →ElectronはHTML/CSS/javascript+Node.jsでできるらしい Node.jsやるしかない !
  7. 7. Electronとは ・HTML5/Javascriptでデスクトップアプリが作れるようになる。 ・Windows、Mac、Linuxなどのクロスプラットフォーム対応が可能 ・Node.jsとChromiumベース(webアプリみたいにデバックが可能) http://electron.atom.io/ Electronの意味は”電子”だよ!
  8. 8. Node.jsを使えるようにする バージョン管理ツールを使いました。 nodist(for Windows) Windowsの場合、nodistのインストーラーを使うのが楽です。 git cloneすることもできるますが、pathを通す必要があります。 ※いろいろエラーが出て何回かやりなおした…(´・ω・`) nodebrew(forMac) ←macの人はこちら
  9. 9. Electronアプリ作った ①electronをインストール $ npm -g install electron-prebuilt ②既存のwebアプリを移行する ③配布パッケージ化するツールをインストール $ npm i electron-packager –g 参考URL Electron入門 30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで
  10. 10. DEMO ベースはジーズアカデミーの課題で作った HTML5/CSS/Javascript+Milkcocoaで作ったチャットアプリです。 書いてある通りにやったら想像以上にすぐできました!
  11. 11. DEMO
  12. 12. Node.jsでやってみたいこと もっとがっつり使ってみたい! →食わず嫌いをやめ、Nodejsのお作法を知る(勉強します!) Electronアプリケーションを作って配布したい →今回はとりあえず動けばいい…で作ったので;;
  13. 13. ありがとうございました! 素材:ぴよたそ

×