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で社内ツールを作ったお話

5,975 views

Published on

JSオジサン#6 2日目で発表した時のスライドです。
詳細はブログ記事に書いてあるので、そちらを参照してください。

Published in: Technology
  • Be the first to comment

Electronで社内ツールを作ったお話

  1. 1. Electronで社内ツールを作ったお話 In JSオジサン#6 @sters9
  2. 2. 会場のみなさま
  3. 3. アルコール 摂取しているか!?
  4. 4. 画面の向こうの みなさま
  5. 5. アルコール 摂取しているか!? お仕事中の方ごめんなさい..
  6. 6. 私は のんでいます
  7. 7. というわけで。
  8. 8. こんばんは !
  9. 9. @sters9 ごみばこ です!
  10. 10. http://gomiba.co.in/ サブドメインでの面白サービス考え中です!
  11. 11. 今日は
  12. 12. 流行のElectronで 社内ツールを作った話 をします!
  13. 13. http://electron.atom.io/
  14. 14. デスクトップ向けアプリを Web技術で 作れる!!!!
  15. 15. サイコー!!!!
  16. 16. え?
  17. 17. 「なにがサイコーなの?」
  18. 18. エディタとか ブラウザとか ツールとか とかとかを…!
  19. 19. C云々とか Java云々とか .NET云々とか 全部いらない!!!
  20. 20. HTML JS CSS Webフロントエンドの知識で! 画面ができる!!!! もちろん、大変なモノを作るならその知識も必要です…。
  21. 21. サイコー!!!!
  22. 22. え?
  23. 23. 「それってブラウザでよくね?」 ちら…
  24. 24. 「それってブラウザでよくね?」
  25. 25. 業務でIEを使っている人 まだまだ多い!!
  26. 26. つらい!!!! https://twitter.com/Ito_SIPD/status/528488753405235200
  27. 27. Electronは Chromiumが動いている!
  28. 28. Chromium! サイコー!!!
  29. 29. サイコーなElectron 今すぐ始めよう!! 一瞬でElectronハローワールドするので ついてきてね!!!
  30. 30. npm install -g electron-prebuilt
  31. 31. mkdir myapp cd myapp
  32. 32. npm init
  33. 33. index.html <!DOCTYPE html> <html> <head> <title>Hello World</title> </head> <body> <h1>Welcome to Electron!!</h1> </body> </html>
  34. 34. index.js const electron = require('electron'); const app = electron.app const BrowserWindow = electron.BrowserWindow var mainWindow = null; app.on('ready', function() { mainWindow = new BrowserWindow({width: 800, height: 600}); mainWindow.loadURL('file://' + __dirname + '/index.html'); mainWindow.on('closed', function() { mainWindow = null; }); });
  35. 35. electron .
  36. 36. ウィンドウでてきた!!
  37. 37. JSで!!! Windowsネイティブ!!!
  38. 38. スゴイ!!! ヤバイ!!!!!! (錯乱)
  39. 39. 社内ツール作ったら いろいろ業務捗るんじゃ…
  40. 40. 第1弾
  41. 41. 「XXの出力からいい感じに 集計データを作りたく」 「管理画面が使いにくい..」 ↑ あるある
  42. 42. JSで解決できる!! だって、JSオジサンだもん…。
  43. 43. でも ブラウザ差異が…
  44. 44. そこで Electron!!!
  45. 45. サイコー!!!!! 使用者の声
  46. 46. 第2弾
  47. 47. Confuluence Client
  48. 48. デスクトップ通知ほしい… Markdownで挿入機能… よく見るページへのリンク… 探しているものが見つからない… アプリの方が勝手がよさそう…
  49. 49. 最強のクライアントソフト つくろう!!
  50. 50. チョーイイ!!! 使用者の声
  51. 51. あれ…?
  52. 52. あれ…? もしかして…?
  53. 53. 社内ツールとしての Electronサイコー なのでは!?!?
  54. 54. JSをかきたい JSオジサン ・ブラウザ対応は嫌 ・サーバサイド…。そこまで手を入れなくてもできるじゃん…。
  55. 55. JSをかきたい JSオジサン なんでもいいから ちゃんと動くやつほしい ツールを要求する社内の人 ブラウザでもなんでもいいよ
  56. 56. JSをかきたい JSオジサン なんでもいいから ちゃんと動くやつほしい ツールを要求する社内の人 いや、えっと…。 インフラの人 ほら、色々あるじゃん色々。Electronいいと思うよ!
  57. 57. 利害関係が 一致してる!!! https://www.pakutaso.com/20120809223post-1821.html
  58. 58. サイコーなElectron 今すぐ始めよう!! おしまい。 npm install -g electron-prebuilt

×