SlideShare a Scribd company logo
1 of 61
Download to read offline
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>
</html>
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;
});
});
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

More Related Content

Viewers also liked

Twilio を使えば簡単にできる アプリケーションと電話/SMS連携
Twilio を使えば簡単にできる アプリケーションと電話/SMS連携Twilio を使えば簡単にできる アプリケーションと電話/SMS連携
Twilio を使えば簡単にできる アプリケーションと電話/SMS連携
Masashi Shinbara
 
Composer による依存管理 と Packagist によるライブラリの公開
Composer による依存管理 と Packagist によるライブラリの公開Composer による依存管理 と Packagist によるライブラリの公開
Composer による依存管理 と Packagist によるライブラリの公開
Shogo Kawahara
 
第7回こども病院移転計画調査委員会資料
第7回こども病院移転計画調査委員会資料第7回こども病院移転計画調査委員会資料
第7回こども病院移転計画調査委員会資料
f_kodomo
 

Viewers also liked (20)

JSとKinectさん
JSとKinectさんJSとKinectさん
JSとKinectさん
 
React+fluxを導入した話
React+fluxを導入した話React+fluxを導入した話
React+fluxを導入した話
 
Angularおじさんの1年
Angularおじさんの1年Angularおじさんの1年
Angularおじさんの1年
 
New Generation Build System "Fly"
New Generation Build System "Fly"New Generation Build System "Fly"
New Generation Build System "Fly"
 
NetBeans、FuelPHP と過ごしたこの 2 ヶ月
NetBeans、FuelPHP と過ごしたこの 2 ヶ月NetBeans、FuelPHP と過ごしたこの 2 ヶ月
NetBeans、FuelPHP と過ごしたこの 2 ヶ月
 
東京から沖縄に移住したからこそわかるクラウドとコミュニティの有り難み 〜人はもっと自由になれる〜
東京から沖縄に移住したからこそわかるクラウドとコミュニティの有り難み 〜人はもっと自由になれる〜東京から沖縄に移住したからこそわかるクラウドとコミュニティの有り難み 〜人はもっと自由になれる〜
東京から沖縄に移住したからこそわかるクラウドとコミュニティの有り難み 〜人はもっと自由になれる〜
 
先取り!PHP 7 と WordPress
先取り!PHP 7 と WordPress先取り!PHP 7 と WordPress
先取り!PHP 7 と WordPress
 
Laravelのeloquent だけ入れた話
Laravelのeloquent だけ入れた話Laravelのeloquent だけ入れた話
Laravelのeloquent だけ入れた話
 
PSR-1 と PSR-2 を 5分でざっくり理解する
PSR-1 と PSR-2 を5分でざっくり理解するPSR-1 と PSR-2 を5分でざっくり理解する
PSR-1 と PSR-2 を 5分でざっくり理解する
 
Play jjug2012spring
Play jjug2012springPlay jjug2012spring
Play jjug2012spring
 
traitを使って楽したい話
traitを使って楽したい話traitを使って楽したい話
traitを使って楽したい話
 
Twilio を使えば簡単にできる アプリケーションと電話/SMS連携
Twilio を使えば簡単にできる アプリケーションと電話/SMS連携Twilio を使えば簡単にできる アプリケーションと電話/SMS連携
Twilio を使えば簡単にできる アプリケーションと電話/SMS連携
 
新標準PSRに学ぶきれいなPHP
新標準PSRに学ぶきれいなPHP新標準PSRに学ぶきれいなPHP
新標準PSRに学ぶきれいなPHP
 
Composer による依存管理 と Packagist によるライブラリの公開
Composer による依存管理 と Packagist によるライブラリの公開Composer による依存管理 と Packagist によるライブラリの公開
Composer による依存管理 と Packagist によるライブラリの公開
 
第7回こども病院移転計画調査委員会資料
第7回こども病院移転計画調査委員会資料第7回こども病院移転計画調査委員会資料
第7回こども病院移転計画調査委員会資料
 
【ハンズオン】初めてのUnityで作る「3D野球盤」_"8a1"20150204発表資料
【ハンズオン】初めてのUnityで作る「3D野球盤」_"8a1"20150204発表資料【ハンズオン】初めてのUnityで作る「3D野球盤」_"8a1"20150204発表資料
【ハンズオン】初めてのUnityで作る「3D野球盤」_"8a1"20150204発表資料
 
はじめて作ったアプリが10,000ダウンロード達成したから自慢する
はじめて作ったアプリが10,000ダウンロード達成したから自慢するはじめて作ったアプリが10,000ダウンロード達成したから自慢する
はじめて作ったアプリが10,000ダウンロード達成したから自慢する
 
SwiftとReactNativeで似たようなUIを作った際の記録
SwiftとReactNativeで似たようなUIを作った際の記録SwiftとReactNativeで似たようなUIを作った際の記録
SwiftとReactNativeで似たようなUIを作った際の記録
 
DMMの闇に触れた話
DMMの闇に触れた話DMMの闇に触れた話
DMMの闇に触れた話
 
Trait とは? その使い道を考えてみる
Trait とは? その使い道を考えてみるTrait とは? その使い道を考えてみる
Trait とは? その使い道を考えてみる
 

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

Gadget1プレゼン
Gadget1プレゼンGadget1プレゼン
Gadget1プレゼン
guest97f9f9
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
 
テレニコツイ
テレニコツイテレニコツイ
テレニコツイ
jz5 MATSUE
 
Boost.勉強会 #13 @仙台 鳥小屋
Boost.勉強会 #13 @仙台 鳥小屋Boost.勉強会 #13 @仙台 鳥小屋
Boost.勉強会 #13 @仙台 鳥小屋
Yuto M
 
心臓から目覚し時計まで
心臓から目覚し時計まで心臓から目覚し時計まで
心臓から目覚し時計まで
koress project
 
Android & Nui & Physical Computing
Android & Nui & Physical ComputingAndroid & Nui & Physical Computing
Android & Nui & Physical Computing
Takahiro KUREBAYASHI
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
 

Similar to Electronで社内ツールを作ったお話 (20)

Gadget1プレゼン
Gadget1プレゼンGadget1プレゼン
Gadget1プレゼン
 
Great journey of koress project. A new hope : Japanese modern net gadgets
Great journey of koress project. A new hope : Japanese modern net gadgets Great journey of koress project. A new hope : Japanese modern net gadgets
Great journey of koress project. A new hope : Japanese modern net gadgets
 
組み込み向けC++のやり方を探る - mbedで楽しい組み込みプログラミング -
組み込み向けC++のやり方を探る - mbedで楽しい組み込みプログラミング -組み込み向けC++のやり方を探る - mbedで楽しい組み込みプログラミング -
組み込み向けC++のやり方を探る - mbedで楽しい組み込みプログラミング -
 
未踏成果発表
未踏成果発表未踏成果発表
未踏成果発表
 
Androidでへっぽこ思考戦車を作ってみた
Androidでへっぽこ思考戦車を作ってみたAndroidでへっぽこ思考戦車を作ってみた
Androidでへっぽこ思考戦車を作ってみた
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
 
テレニコツイ
テレニコツイテレニコツイ
テレニコツイ
 
Boost.勉強会 #13 @仙台 鳥小屋
Boost.勉強会 #13 @仙台 鳥小屋Boost.勉強会 #13 @仙台 鳥小屋
Boost.勉強会 #13 @仙台 鳥小屋
 
PHPMATSURI2011 LT大会
PHPMATSURI2011 LT大会PHPMATSURI2011 LT大会
PHPMATSURI2011 LT大会
 
プロ文.com 勉強会 Phase 1
プロ文.com 勉強会 Phase 1プロ文.com 勉強会 Phase 1
プロ文.com 勉強会 Phase 1
 
あらためてWorld Wide Web
あらためてWorld Wide WebあらためてWorld Wide Web
あらためてWorld Wide Web
 
コミュニティの場が、ひとりのエンジニアの歯車を回しだした、くるくると
コミュニティの場が、ひとりのエンジニアの歯車を回しだした、くるくるとコミュニティの場が、ひとりのエンジニアの歯車を回しだした、くるくると
コミュニティの場が、ひとりのエンジニアの歯車を回しだした、くるくると
 
第2回 IT講座 ゲームを作るって?
第2回 IT講座 ゲームを作るって?第2回 IT講座 ゲームを作るって?
第2回 IT講座 ゲームを作るって?
 
ゆるふわWoT&firefoxOS体験記
ゆるふわWoT&firefoxOS体験記ゆるふわWoT&firefoxOS体験記
ゆるふわWoT&firefoxOS体験記
 
心臓から目覚し時計まで
心臓から目覚し時計まで心臓から目覚し時計まで
心臓から目覚し時計まで
 
2015/02/14 FirefoxOSハンズオン@関西
2015/02/14 FirefoxOSハンズオン@関西2015/02/14 FirefoxOSハンズオン@関西
2015/02/14 FirefoxOSハンズオン@関西
 
Android & Nui & Physical Computing
Android & Nui & Physical ComputingAndroid & Nui & Physical Computing
Android & Nui & Physical Computing
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
 

More from sters

まぼろしのむいかめ in #upcamp 2013 Toyko
まぼろしのむいかめ in #upcamp 2013 Toykoまぼろしのむいかめ in #upcamp 2013 Toyko
まぼろしのむいかめ in #upcamp 2013 Toyko
sters
 
UnityとnodeとMMDと
UnityとnodeとMMDとUnityとnodeとMMDと
UnityとnodeとMMDと
sters
 
残パン会のあれ
残パン会のあれ残パン会のあれ
残パン会のあれ
sters
 

More from sters (9)

PHPBLT#6 PHPの未来に入るかもしれない機能の紹介
PHPBLT#6 PHPの未来に入るかもしれない機能の紹介PHPBLT#6 PHPの未来に入るかもしれない機能の紹介
PHPBLT#6 PHPの未来に入るかもしれない機能の紹介
 
Facebook Messenger Platform で始める Bot 開発
Facebook Messenger Platform で始める Bot 開発Facebook Messenger Platform で始める Bot 開発
Facebook Messenger Platform で始める Bot 開発
 
Packagist を旅してみる
Packagist を旅してみるPackagist を旅してみる
Packagist を旅してみる
 
PHP で LINE Bot をしてみる
PHP で LINE Bot をしてみるPHP で LINE Bot をしてみる
PHP で LINE Bot をしてみる
 
Jenkins Wars Episode 2
Jenkins Wars Episode 2Jenkins Wars Episode 2
Jenkins Wars Episode 2
 
JavaScriptによる記号プログラミング
JavaScriptによる記号プログラミングJavaScriptによる記号プログラミング
JavaScriptによる記号プログラミング
 
まぼろしのむいかめ in #upcamp 2013 Toyko
まぼろしのむいかめ in #upcamp 2013 Toykoまぼろしのむいかめ in #upcamp 2013 Toyko
まぼろしのむいかめ in #upcamp 2013 Toyko
 
UnityとnodeとMMDと
UnityとnodeとMMDとUnityとnodeとMMDと
UnityとnodeとMMDと
 
残パン会のあれ
残パン会のあれ残パン会のあれ
残パン会のあれ
 

Recently uploaded

Recently uploaded (7)

新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 

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