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で社内ツールを作ったお話
In JSオジサン#6 @sters9
会場のみなさま
アルコール
摂取しているか!?
画面の向こうの
みなさま
アルコール
摂取しているか!?
お仕事中の方ごめんなさい..
私は
のんでいます
というわけで。
こんばんは !
@sters9 ごみばこ
です!
http://gomiba.co.in/
サブドメインでの面白サービス考え中です!
今日は
流行のElectronで
社内ツールを作った話
をします!
http://electron.atom.io/
デスクトップ向けアプリを
Web技術で
作れる!!!!
サイコー!!!!
え?
「なにがサイコーなの?」
エディタとか
ブラウザとか
ツールとか
とかとかを…!
C云々とか
Java云々とか
.NET云々とか
全部いらない!!!
HTML
JS
CSS
Webフロントエンドの知識で!
画面ができる!!!!
もちろん、大変なモノを作るならその知識も必要です…。
サイコー!!!!
え?
「それってブラウザでよくね?」
ちら…
「それってブラウザでよくね?」
業務でIEを使っている人
まだまだ多い!!
つらい!!!!
https://twitter.com/Ito_SIPD/status/528488753405235200
Electronは
Chromiumが動いている!
Chromium!
サイコー!!!
サイコーなElectron
今すぐ始めよう!!
一瞬でElectronハローワールドするので
ついてきてね!!!
npm install -g electron-prebuilt
mkdir myapp
cd myapp
npm init
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Welcome to Electron!!</h1>
</body>
...
index.js
const electron = require('electron');
const app = electron.app
const BrowserWindow = electron.BrowserWindow
var m...
electron .
ウィンドウでてきた!!
JSで!!!
Windowsネイティブ!!!
スゴイ!!!
ヤバイ!!!!!!
(錯乱)
社内ツール作ったら
いろいろ業務捗るんじゃ…
第1弾
「XXの出力からいい感じに
集計データを作りたく」
「管理画面が使いにくい..」
↑
あるある
JSで解決できる!!
だって、JSオジサンだもん…。
でも
ブラウザ差異が…
そこで
Electron!!!
サイコー!!!!!
使用者の声
第2弾
Confuluence Client
デスクトップ通知ほしい…
Markdownで挿入機能…
よく見るページへのリンク…
探しているものが見つからない…
アプリの方が勝手がよさそう…
最強のクライアントソフト
つくろう!!
チョーイイ!!!
使用者の声
あれ…?
あれ…?
もしかして…?
社内ツールとしての
Electronサイコー
なのでは!?!?
JSをかきたい
JSオジサン
・ブラウザ対応は嫌
・サーバサイド…。そこまで手を入れなくてもできるじゃん…。
JSをかきたい
JSオジサン
なんでもいいから
ちゃんと動くやつほしい
ツールを要求する社内の人
ブラウザでもなんでもいいよ
JSをかきたい
JSオジサン
なんでもいいから
ちゃんと動くやつほしい
ツールを要求する社内の人
いや、えっと…。
インフラの人
ほら、色々あるじゃん色々。Electronいいと思うよ!
利害関係が
一致してる!!!
https://www.pakutaso.com/20120809223post-1821.html
サイコーなElectron
今すぐ始めよう!!
おしまい。
npm install -g electron-prebuilt
Electronで社内ツールを作ったお話
Electronで社内ツールを作ったお話
Electronで社内ツールを作ったお話
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
JSオジサン openframeworks emscripten
Next
Download to read offline and view in fullscreen.

5

Share

Download to read offline

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

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
  • ssuser98e349

    Oct. 29, 2017
  • TomonoriKoza

    Sep. 1, 2016
  • nyoshitaka

    May. 28, 2016
  • shunketsuoh

    Mar. 4, 2016
  • sfus

    Feb. 28, 2016

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

Views

Total views

7,485

On Slideshare

0

From embeds

0

Number of embeds

3,469

Actions

Downloads

13

Shares

0

Comments

0

Likes

5

×