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

Electronで社内ツールを作ったお話In JSオジサン#6 @sters9

会場のみなさま

アルコール摂取しているか！？

画面の向こうのみなさま

アルコール摂取しているか！？

お仕事中の方ごめんなさい..

私はのんでいます

というわけで。

こんばんは !

@sters9 ごみばこです！

http://gomiba.co.in/

サブドメインでの面白サービス考え中です！

今日は

流行のElectronで社内ツールを作った話

をします！

http://electron.atom.io/

デスクトップ向けアプリを

Web技術で

作れる！！！！

サイコー！！！！

え？

「なにがサイコーなの？」

エディタとかブラウザとかツールとか

とかとかを…！

C云々とかJava云々とか.NET云々とか

全部いらない！！！

HTMLJS

CSS

Webフロントエンドの知識で！

画面ができる！！！！

もちろん、大変なモノを作るならその知識も必要です…。

サイコー！！！！

え？

「それってブラウザでよくね？」

ちら…

「それってブラウザでよくね？」

業務でIEを使っている人まだまだ多い！！

つらい！！！！

https://twitter.com/Ito_SIPD/status/528488753405235200

Electronは

Chromiumが動いている！

Chromium！

サイコー！！！

サイコーなElectron今すぐ始めよう！！

一瞬でElectronハローワールドするのでついてきてね！！！

npm install -g electron-prebuilt

mkdir myappcd 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.appconst 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ネイティブ！！！

スゴイ！！！

ヤバイ！！！！！！（錯乱）

社内ツール作ったらいろいろ業務捗るんじゃ…

第１弾

「XXの出力からいい感じに集計データを作りたく」

「管理画面が使いにくい..」

↑あるある

JSで解決できる！！だって、JSオジサンだもん…。

でもブラウザ差異が…

そこでElectron！！！

サイコー！！！！！

使用者の声

第２弾

Confuluence Client

デスクトップ通知ほしい…

Markdownで挿入機能…

よく見るページへのリンク…

探しているものが見つからない…

アプリの方が勝手がよさそう…

最強のクライアントソフトつくろう！！

チョーイイ！！！

使用者の声

あれ…？

あれ…？

もしかして…？

社内ツールとしてのElectronサイコーなのでは！？！？

JSをかきたいJSオジサン

・ブラウザ対応は嫌・サーバサイド…。そこまで手を入れなくてもできるじゃん…。


なんでもいいからちゃんと動くやつほしい

ツールを要求する社内の人

ブラウザでもなんでもいいよ


なんでもいいからちゃんと動くやつほしい

ツールを要求する社内の人

いや、えっと…。

インフラの人

ほら、色々あるじゃん色々。Electronいいと思うよ！

利害関係が一致してる！！！

https://www.pakutaso.com/20120809223post-1821.html

サイコーなElectron今すぐ始めよう！！

おしまい。

npm install -g electron-prebuilt

Technology

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