SlideShare a Scribd company logo
P R E S E N T A T I O N :
フロントエンドエンジニア 堀祐磨(ほりでー)
Electronで作る

はじめてのGUIアプリ
PDF差分比較アプリを作ってみた
Electronで作るはじめてのGUIアプリ
づや会 Vol.4 node.js
2
Electronで作るはじめてのGUIアプリ
自己紹介
堀 祐磨 (ほりでー)
1988年生まれ。多摩美術大学を中退後、
デザイナーとしてグラフィックデザイン・
Webデザイン・UIデザインを経験。
2015年、株式会社LIGにフロントエン
ドエンジニアとして入社。
Electronで作るはじめてのGUIアプリ
DTP制作
4
Electronで作るはじめてのGUIアプリ
DTP制作の辛さ
IllustratoとかInDesignで
印刷物を作るお仕事
バージョン管理とか無理

(全部バイナリ)
5
Electronで作るはじめてのGUIアプリ
DTP制作の辛さ
カタログとかで商品の値段とかを校正後
に間違って変えようものなら(=デグレ)…
数万部の刷り直し! 

損害賠償!
Electronで作るはじめてのGUIアプリ
目視で確認なんて

やってられん
7
Electronで作るはじめてのGUIアプリ
GraphicsMagickの
gm compare コマンド
8
Electronで作るはじめてのGUIアプリ
1枚づつの比較しかできない
印刷用PDFを分解→個別に比較→再結合~の流れをgulp
化
便利なんだけどターミナルから叩くのは直感的ではない
GUIアプリにしよう!
9
Electronで作るはじめてのGUIアプリ
コマンドライン版

差分比較ツール
便利なんだけどターミナルから
叩くのは直感的ではない
GUIアプリにしよう!
Electronでやってみよう!
10
Electronで作るはじめてのGUIアプリ
つくってみた
11
Electronで作るはじめてのGUIアプリ
GUI版差分比較アプリ
ファイルをGUIから指定して、ボタンを押すとコマンドが走る!
12
裏側
Electronで作るはじめてのGUIアプリ
gulp以外使わないから
node.jsのAPIが分からん!
13
Electronで作るはじめてのGUIアプリ
const fs = require('fs');
14
Electronで作るはじめてのGUIアプリ
node.jsの標準API "fs"
ファイルシステムまわりの機能
フォルダを作る
ファイルを読み取る
ファイルの存在確認
ファイルの権限確認
ファイルの読み書きするならこれ
15
Electronで作るはじめてのGUIアプリ
const child =
require('child_process');
16
Electronで作るはじめてのGUIアプリ
node.jsの標準API "child_process"
spawn
childProcessインスタンスを返し、そいつのイ
ベントを使ってあれこれする
exec
コマンド実行後にコールバックが走り、それであ
れこれする
execFile
シェルスクリプトファイルにパラメータを渡して
実行し、そいつの実行後にコールバックが走り、
その中であれこれする
上記は全部非同期処理だが、それぞれ同期処理版(~
Sync)のメソッドもある
17
OSのシェルを叩けるので、これさえあれば何でもできる!
Electronで作るはじめてのGUIアプリ
electronで
child_process使う際は
罠があるので注意

(後述)
18
Electronで作るはじめてのGUIアプリ
同期処理と非同期処理
多くのAPIが非同期で、たいてい同期
バージョン(~Sync)も用意されている
同期バージョンは実装が考えやすいが、
処理が終了するまで他の処理が全部止
まる
今回のアプリは同期処理中心に実装
19
Electronで作るはじめてのGUIアプリ
electronのAPI
20
Electronで作るはじめてのGUIアプリ
dialogモジュール
21
Electronで作るはじめてのGUIアプリ
dialogモジュール
ユーザーとの対話ウィンドウ(OSネイティブ)を出す
showMessageBox
通知や選択を求める一般的なダイアログを表示
showOpenDialog
ファイルやフォルダの選択を求めるダイアログを表示
showSaveDialog
ファイルの保存先を求めるダイアログを表示
返り値がシンプルで使いやすい
22
Electronで作るはじめてのGUIアプリ
BrowserWindow

モジュール
ウィンドウ1つに相当するオブジェクト
ブラウザ画面のサイズやURLを指定し
たり、様々な状態についてのプロパティ
を持つ
23
Electronで作るはじめてのGUIアプリ
appモジュール
アプリケーション全体についての色々なイベントを持っている
アプリ全体に影響するメソッド
quit/hide/show
環境やOSによっていい感じに内容を変えてくれる便利メソッド
getPath('hoge')
アプリの現在パス
OSのユーザーホームのパス
OSのテンポラリフォルダのパス
~などを取得できる
24
Electronで作るはじめてのGUIアプリ
メインプロセスと

レンダラプロセス
25
Electronで作るはじめてのGUIアプリ
メインプロセスと

レンダラプロセス
メインプロセス
1個しかないプロセスで、consoleは
electron実行時にCLI上に出てくる
サーバ的な役割
26
Electronで作るはじめてのGUIアプリ
メインプロセスと

レンダラプロセス
レンダラプロセス
ウィンドウごとに立ち上がるプロセスで、
consoleはChromiumのデバッグ画面上に出て
くる
クライアント的な役割
メインプロセスに比べて制約が大きいらしい

(セキュリティの為)
27
Electronで作るはじめてのGUIアプリ
メインプロセスと

レンダラプロセス
両プロセス間の通信はイベントを使った非同期通
信が基本(ipcMain/ipcRendererモジュール)
同期的な通信機能も用意されているものの、メ
インプロセスから結果が帰ってくるまでレンダラ
プロセスは応答しなくなる(非推奨)
remoteを使うと擬似的にレンダラプロセスから
メインプロセス内にあるモジュールも利用可能
28
Electronで作るはじめてのGUIアプリ
Electronアプリの

テンプレート
29
Electronで作るはじめてのGUIアプリ
frontplate

ビルド構成
gulp + webpack + babel
テスト環境
gulp + webpack + babel + Karma
+ mocha + power-assert
30
※LIGのCTOが作ったテンプレ(OSS)
Electronで作るはじめてのGUIアプリ
webpackやKarmaの

設定でつまづいたところ
31
Electronで作るはじめてのGUIアプリ
つまづきポイント
webpackがnode.jsの __dirname を置き換えちゃう
webpack.confに設定追記で解決
32
Electronで作るはじめてのGUIアプリ
つまづきポイント
webpackがnodeの標準モジュールを合体
させようとして壊れる!
targetをelectronにして解決!
33
Electronで作るはじめてのGUIアプリ
つまづきポイント
Karmaがrequire()できないって言ってくる
karma-electronを導入
ブラウザテスト用にrequireを実装(テスト時のみ)
34
Electronで作るはじめてのGUIアプリ
ビューの実装
35
Electronで作るはじめてのGUIアプリ
安心のBootstrap!
36
Electronで作るはじめてのGUIアプリ
安心のjQuery()!
37
Electronで作るはじめてのGUIアプリ
アプリのパッケージ化
38
Electronで作るはじめてのGUIアプリ
asar
atom-shell app
packages
39
Electronで作るはじめてのGUIアプリ
electron-packager
40
Electronで作るはじめてのGUIアプリ
ここに大きな罠が…
41
Electronで作るはじめてのGUIアプリ
asarの罠
child_processはほとんど使えない!
42
Electronで作るはじめてのGUIアプリ43
http://electron.atom.io/docs/
v0.36.3/tutorial/application-
packaging/
Electronで作るはじめてのGUIアプリ
asarの罠
任意のコマンド実行できちゃうじゃん!
そんな危険なもの配れないよ!
でもchild_process.execFile()なら
使っていいよ!
44
Electronで作るはじめてのGUIアプリ
asarの罠:execFileなら許す
何が違う?
実行するシェルスクリプトが事前に必要
そのシェルスクリプトは、asarのビルド時に
unpackオプションを指定しておくこと
同期版のchild_process.execFileSync()は
使えない
45
Electronで作るはじめてのGUIアプリ
非同期処理が面倒臭いから
execSync()で作ってたの
に~!!!
46
Electronで作るはじめてのGUIアプリ
そういう訳で、
このデモアプリはCLIから
しか起動できません orz
47
(いつか非同期化する…絶対…)
Electronで作るはじめてのGUIアプリ
感想
48
Electronで作るはじめてのGUIアプリ
感想
開発環境と違う挙動するasarは曲者
同期的なメソッドを使うと、作りやすいけどやっぱり微妙
非同期処理怖い(特にループ)
自分の人生じゃ当分来ないだろうと思ったけど、案外早
く来た…
GUIアプリ初挑戦したけど面倒臭い
オプションを変更するUIを置くだけでも面倒臭い…
49
Electronで作るはじめてのGUIアプリ
感想
シェル叩く機能を作るのであれば、
nodejs側のロジックを作りこむより
も、シェルスクリプトとして作り込ん
だ方が作りやすい?
マルチプラットフォーム対応するのは
難しそうだけど、OSXだけならこっ
ちの方が楽かも…?
50
Electronで作るはじめてのGUIアプリ
今後の展開
非同期化してパッケージ化できるように
する
graphicsmagickなどのバイナリもパッ
ケージ内にまとめ、インストール不要に
したい
GUIから設定できるオプションを増やす
51
Electronで作るはじめてのGUIアプリ
最後に宣伝
52
Electron で作るはじめてのguiアプリ
Electron で作るはじめてのguiアプリ
http://media-massage.net/
 ブログもあるよ! /
Thank you!
http://media-massage.net/
デザインとWeb開発とその他諸々。

More Related Content

What's hot

ネットワークエンジニアはどこでウデマエをみがくのか?
ネットワークエンジニアはどこでウデマエをみがくのか?ネットワークエンジニアはどこでウデマエをみがくのか?
ネットワークエンジニアはどこでウデマエをみがくのか?
Yuya Rin
 
UE4プログラマー勉強会 in 大阪 -エンジンの内部挙動について
UE4プログラマー勉強会 in 大阪 -エンジンの内部挙動についてUE4プログラマー勉強会 in 大阪 -エンジンの内部挙動について
UE4プログラマー勉強会 in 大阪 -エンジンの内部挙動について
com044
 
UE4とBlenderでランニングコストを抑えるモダンなワークフロー
UE4とBlenderでランニングコストを抑えるモダンなワークフローUE4とBlenderでランニングコストを抑えるモダンなワークフロー
UE4とBlenderでランニングコストを抑えるモダンなワークフロー
エピック・ゲームズ・ジャパン Epic Games Japan
 
UniTask入門
UniTask入門UniTask入門
UniTask入門
torisoup
 
4つの戦犯から考えるサービスづくりの失敗
4つの戦犯から考えるサービスづくりの失敗4つの戦犯から考えるサービスづくりの失敗
4つの戦犯から考えるサービスづくりの失敗
toshihiro ichitani
 
Photonのサービス選択の勘どころ
Photonのサービス選択の勘どころPhotonのサービス選択の勘どころ
Photonのサービス選択の勘どころ
GMO GlobalSign Holdings K.K.
 
Mayaカメラデータunityインストール
MayaカメラデータunityインストールMayaカメラデータunityインストール
Mayaカメラデータunityインストール
小林 信行
 
【Unite Tokyo 2019】Understanding C# Struct All Things
【Unite Tokyo 2019】Understanding C# Struct All Things【Unite Tokyo 2019】Understanding C# Struct All Things
【Unite Tokyo 2019】Understanding C# Struct All Things
UnityTechnologiesJapan002
 
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
UnityTechnologiesJapan002
 
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
Unity Technologies Japan K.K.
 
オブジェクト指向できていますか?
オブジェクト指向できていますか?オブジェクト指向できていますか?
オブジェクト指向できていますか?
Moriharu Ohzu
 
[CEDEC2017] 最新モバイルゲームの実例からみるUE4のモバイル向け機能・Tipsを全部まるっとご紹介!
[CEDEC2017] 最新モバイルゲームの実例からみるUE4のモバイル向け機能・Tipsを全部まるっとご紹介![CEDEC2017] 最新モバイルゲームの実例からみるUE4のモバイル向け機能・Tipsを全部まるっとご紹介!
[CEDEC2017] 最新モバイルゲームの実例からみるUE4のモバイル向け機能・Tipsを全部まるっとご紹介!
エピック・ゲームズ・ジャパン Epic Games Japan
 
【Unity道場Houdini編】UnityとHoudiniで作るRealtimeVFX実践解説 後編
【Unity道場Houdini編】UnityとHoudiniで作るRealtimeVFX実践解説 後編【Unity道場Houdini編】UnityとHoudiniで作るRealtimeVFX実践解説 後編
【Unity道場Houdini編】UnityとHoudiniで作るRealtimeVFX実践解説 後編
UnityTechnologiesJapan002
 
【Unite Tokyo 2019】運用中超大規模タイトルにおけるUnityアップデート課題の解決手法と事例
【Unite Tokyo 2019】運用中超大規模タイトルにおけるUnityアップデート課題の解決手法と事例【Unite Tokyo 2019】運用中超大規模タイトルにおけるUnityアップデート課題の解決手法と事例
【Unite Tokyo 2019】運用中超大規模タイトルにおけるUnityアップデート課題の解決手法と事例
UnityTechnologiesJapan002
 
実践イカパケット解析
実践イカパケット解析実践イカパケット解析
実践イカパケット解析
Yuki Mizuno
 
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っているやはりお前らのMVCは間違っている
やはりお前らのMVCは間違っている
Koichi Tanaka
 
「Helix Core」導入事例紹介 『小~中規模事例 "Unreal Engine 4 × Helix Core ヒストリア運用レギュレーション紹介"』
「Helix Core」導入事例紹介 『小~中規模事例 "Unreal Engine 4 × Helix Core ヒストリア運用レギュレーション紹介"』「Helix Core」導入事例紹介 『小~中規模事例 "Unreal Engine 4 × Helix Core ヒストリア運用レギュレーション紹介"』
「Helix Core」導入事例紹介 『小~中規模事例 "Unreal Engine 4 × Helix Core ヒストリア運用レギュレーション紹介"』
historia_Inc
 
モダンフロントエンド開発者に求められるスキルとは
モダンフロントエンド開発者に求められるスキルとはモダンフロントエンド開発者に求められるスキルとは
モダンフロントエンド開発者に求められるスキルとは
Takuya Tejima
 
【Unite 2018 Tokyo】『CARAVAN STORIES』のアセットバンドル事例
【Unite 2018 Tokyo】『CARAVAN STORIES』のアセットバンドル事例【Unite 2018 Tokyo】『CARAVAN STORIES』のアセットバンドル事例
【Unite 2018 Tokyo】『CARAVAN STORIES』のアセットバンドル事例
UnityTechnologiesJapan002
 
Unity開発で使える設計の話+Zenjectの紹介
Unity開発で使える設計の話+Zenjectの紹介Unity開発で使える設計の話+Zenjectの紹介
Unity開発で使える設計の話+Zenjectの紹介
torisoup
 

What's hot (20)

ネットワークエンジニアはどこでウデマエをみがくのか?
ネットワークエンジニアはどこでウデマエをみがくのか?ネットワークエンジニアはどこでウデマエをみがくのか?
ネットワークエンジニアはどこでウデマエをみがくのか?
 
UE4プログラマー勉強会 in 大阪 -エンジンの内部挙動について
UE4プログラマー勉強会 in 大阪 -エンジンの内部挙動についてUE4プログラマー勉強会 in 大阪 -エンジンの内部挙動について
UE4プログラマー勉強会 in 大阪 -エンジンの内部挙動について
 
UE4とBlenderでランニングコストを抑えるモダンなワークフロー
UE4とBlenderでランニングコストを抑えるモダンなワークフローUE4とBlenderでランニングコストを抑えるモダンなワークフロー
UE4とBlenderでランニングコストを抑えるモダンなワークフロー
 
UniTask入門
UniTask入門UniTask入門
UniTask入門
 
4つの戦犯から考えるサービスづくりの失敗
4つの戦犯から考えるサービスづくりの失敗4つの戦犯から考えるサービスづくりの失敗
4つの戦犯から考えるサービスづくりの失敗
 
Photonのサービス選択の勘どころ
Photonのサービス選択の勘どころPhotonのサービス選択の勘どころ
Photonのサービス選択の勘どころ
 
Mayaカメラデータunityインストール
MayaカメラデータunityインストールMayaカメラデータunityインストール
Mayaカメラデータunityインストール
 
【Unite Tokyo 2019】Understanding C# Struct All Things
【Unite Tokyo 2019】Understanding C# Struct All Things【Unite Tokyo 2019】Understanding C# Struct All Things
【Unite Tokyo 2019】Understanding C# Struct All Things
 
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
 
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
 
オブジェクト指向できていますか?
オブジェクト指向できていますか?オブジェクト指向できていますか?
オブジェクト指向できていますか?
 
[CEDEC2017] 最新モバイルゲームの実例からみるUE4のモバイル向け機能・Tipsを全部まるっとご紹介!
[CEDEC2017] 最新モバイルゲームの実例からみるUE4のモバイル向け機能・Tipsを全部まるっとご紹介![CEDEC2017] 最新モバイルゲームの実例からみるUE4のモバイル向け機能・Tipsを全部まるっとご紹介!
[CEDEC2017] 最新モバイルゲームの実例からみるUE4のモバイル向け機能・Tipsを全部まるっとご紹介!
 
【Unity道場Houdini編】UnityとHoudiniで作るRealtimeVFX実践解説 後編
【Unity道場Houdini編】UnityとHoudiniで作るRealtimeVFX実践解説 後編【Unity道場Houdini編】UnityとHoudiniで作るRealtimeVFX実践解説 後編
【Unity道場Houdini編】UnityとHoudiniで作るRealtimeVFX実践解説 後編
 
【Unite Tokyo 2019】運用中超大規模タイトルにおけるUnityアップデート課題の解決手法と事例
【Unite Tokyo 2019】運用中超大規模タイトルにおけるUnityアップデート課題の解決手法と事例【Unite Tokyo 2019】運用中超大規模タイトルにおけるUnityアップデート課題の解決手法と事例
【Unite Tokyo 2019】運用中超大規模タイトルにおけるUnityアップデート課題の解決手法と事例
 
実践イカパケット解析
実践イカパケット解析実践イカパケット解析
実践イカパケット解析
 
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っているやはりお前らのMVCは間違っている
やはりお前らのMVCは間違っている
 
「Helix Core」導入事例紹介 『小~中規模事例 "Unreal Engine 4 × Helix Core ヒストリア運用レギュレーション紹介"』
「Helix Core」導入事例紹介 『小~中規模事例 "Unreal Engine 4 × Helix Core ヒストリア運用レギュレーション紹介"』「Helix Core」導入事例紹介 『小~中規模事例 "Unreal Engine 4 × Helix Core ヒストリア運用レギュレーション紹介"』
「Helix Core」導入事例紹介 『小~中規模事例 "Unreal Engine 4 × Helix Core ヒストリア運用レギュレーション紹介"』
 
モダンフロントエンド開発者に求められるスキルとは
モダンフロントエンド開発者に求められるスキルとはモダンフロントエンド開発者に求められるスキルとは
モダンフロントエンド開発者に求められるスキルとは
 
【Unite 2018 Tokyo】『CARAVAN STORIES』のアセットバンドル事例
【Unite 2018 Tokyo】『CARAVAN STORIES』のアセットバンドル事例【Unite 2018 Tokyo】『CARAVAN STORIES』のアセットバンドル事例
【Unite 2018 Tokyo】『CARAVAN STORIES』のアセットバンドル事例
 
Unity開発で使える設計の話+Zenjectの紹介
Unity開発で使える設計の話+Zenjectの紹介Unity開発で使える設計の話+Zenjectの紹介
Unity開発で使える設計の話+Zenjectの紹介
 

Viewers also liked

インフラざっくり会
インフラざっくり会インフラざっくり会
インフラざっくり会
祐磨 堀
 
JSオジサン openframeworks emscripten
JSオジサン openframeworks emscriptenJSオジサン openframeworks emscripten
JSオジサン openframeworks emscripten
minoru nakanou
 
フロントエンドの技術で始めるデスクトップアプリ
フロントエンドの技術で始めるデスクトップアプリフロントエンドの技術で始めるデスクトップアプリ
フロントエンドの技術で始めるデスクトップアプリ
Tomotaka Kusaka
 
Electron を知る
Electron を知るElectron を知る
Electron を知る
Tomoya Shibata
 
Electronで 動画ながら見アプリを作った
Electronで 動画ながら見アプリを作ったElectronで 動画ながら見アプリを作った
Electronで 動画ながら見アプリを作った
Hayato Koriyama
 
アイデアを発展・整理するための便利なアプリとその使い方
アイデアを発展・整理するための便利なアプリとその使い方アイデアを発展・整理するための便利なアプリとその使い方
アイデアを発展・整理するための便利なアプリとその使い方
祐磨 堀
 
今更はじめるQuartz Composer
今更はじめるQuartz Composer今更はじめるQuartz Composer
今更はじめるQuartz Composer
祐磨 堀
 
PodcastをSkype経由で録音
PodcastをSkype経由で録音PodcastをSkype経由で録音
PodcastをSkype経由で録音
ebina yohichi
 
C#マスコット(公開用)
C#マスコット(公開用)C#マスコット(公開用)
C#マスコット(公開用)
信之 岩永
 
プログラミング .NET Framework 第4版
プログラミング .NET Framework 第4版プログラミング .NET Framework 第4版
プログラミング .NET Framework 第4版
信之 岩永
 
面白法人カヤックのウェブフロントエンド術
面白法人カヤックのウェブフロントエンド術面白法人カヤックのウェブフロントエンド術
面白法人カヤックのウェブフロントエンド術
minoru nakanou
 
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGLMedia Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Atsushi Tadokoro
 
Electronからはじめるnodejs
ElectronからはじめるnodejsElectronからはじめるnodejs
Electronからはじめるnodejs
Hirata Tomoko
 
20分でできる!Xamarin.Forms入門
20分でできる!Xamarin.Forms入門20分でできる!Xamarin.Forms入門
20分でできる!Xamarin.Forms入門
Shinichi Hirauchi
 
[CB16] Electron - Build cross platform desktop XSS, it’s easier than you thin...
[CB16] Electron - Build cross platform desktop XSS, it’s easier than you thin...[CB16] Electron - Build cross platform desktop XSS, it’s easier than you thin...
[CB16] Electron - Build cross platform desktop XSS, it’s easier than you thin...
CODE BLUE
 
WebアプリをElectronに乗せる
WebアプリをElectronに乗せるWebアプリをElectronに乗せる
WebアプリをElectronに乗せる
Hiroyuki Anai
 
WPF4.5入門
WPF4.5入門WPF4.5入門
WPF4.5入門
一希 大田
 
Redmine勉強会vol.1 なぜ組織にはドキュメンテーションが必要なのか
Redmine勉強会vol.1 なぜ組織にはドキュメンテーションが必要なのかRedmine勉強会vol.1 なぜ組織にはドキュメンテーションが必要なのか
Redmine勉強会vol.1 なぜ組織にはドキュメンテーションが必要なのか
祐磨 堀
 
Dockerで楽しむ自宅サーバ
Dockerで楽しむ自宅サーバDockerで楽しむ自宅サーバ
Dockerで楽しむ自宅サーバ
祐磨 堀
 
ElectronでExactTargetのGUIツールを作ってみた話
ElectronでExactTargetのGUIツールを作ってみた話ElectronでExactTargetのGUIツールを作ってみた話
ElectronでExactTargetのGUIツールを作ってみた話
tzm_freedom
 

Viewers also liked (20)

インフラざっくり会
インフラざっくり会インフラざっくり会
インフラざっくり会
 
JSオジサン openframeworks emscripten
JSオジサン openframeworks emscriptenJSオジサン openframeworks emscripten
JSオジサン openframeworks emscripten
 
フロントエンドの技術で始めるデスクトップアプリ
フロントエンドの技術で始めるデスクトップアプリフロントエンドの技術で始めるデスクトップアプリ
フロントエンドの技術で始めるデスクトップアプリ
 
Electron を知る
Electron を知るElectron を知る
Electron を知る
 
Electronで 動画ながら見アプリを作った
Electronで 動画ながら見アプリを作ったElectronで 動画ながら見アプリを作った
Electronで 動画ながら見アプリを作った
 
アイデアを発展・整理するための便利なアプリとその使い方
アイデアを発展・整理するための便利なアプリとその使い方アイデアを発展・整理するための便利なアプリとその使い方
アイデアを発展・整理するための便利なアプリとその使い方
 
今更はじめるQuartz Composer
今更はじめるQuartz Composer今更はじめるQuartz Composer
今更はじめるQuartz Composer
 
PodcastをSkype経由で録音
PodcastをSkype経由で録音PodcastをSkype経由で録音
PodcastをSkype経由で録音
 
C#マスコット(公開用)
C#マスコット(公開用)C#マスコット(公開用)
C#マスコット(公開用)
 
プログラミング .NET Framework 第4版
プログラミング .NET Framework 第4版プログラミング .NET Framework 第4版
プログラミング .NET Framework 第4版
 
面白法人カヤックのウェブフロントエンド術
面白法人カヤックのウェブフロントエンド術面白法人カヤックのウェブフロントエンド術
面白法人カヤックのウェブフロントエンド術
 
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGLMedia Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
 
Electronからはじめるnodejs
ElectronからはじめるnodejsElectronからはじめるnodejs
Electronからはじめるnodejs
 
20分でできる!Xamarin.Forms入門
20分でできる!Xamarin.Forms入門20分でできる!Xamarin.Forms入門
20分でできる!Xamarin.Forms入門
 
[CB16] Electron - Build cross platform desktop XSS, it’s easier than you thin...
[CB16] Electron - Build cross platform desktop XSS, it’s easier than you thin...[CB16] Electron - Build cross platform desktop XSS, it’s easier than you thin...
[CB16] Electron - Build cross platform desktop XSS, it’s easier than you thin...
 
WebアプリをElectronに乗せる
WebアプリをElectronに乗せるWebアプリをElectronに乗せる
WebアプリをElectronに乗せる
 
WPF4.5入門
WPF4.5入門WPF4.5入門
WPF4.5入門
 
Redmine勉強会vol.1 なぜ組織にはドキュメンテーションが必要なのか
Redmine勉強会vol.1 なぜ組織にはドキュメンテーションが必要なのかRedmine勉強会vol.1 なぜ組織にはドキュメンテーションが必要なのか
Redmine勉強会vol.1 なぜ組織にはドキュメンテーションが必要なのか
 
Dockerで楽しむ自宅サーバ
Dockerで楽しむ自宅サーバDockerで楽しむ自宅サーバ
Dockerで楽しむ自宅サーバ
 
ElectronでExactTargetのGUIツールを作ってみた話
ElectronでExactTargetのGUIツールを作ってみた話ElectronでExactTargetのGUIツールを作ってみた話
ElectronでExactTargetのGUIツールを作ってみた話
 

Similar to Electron で作るはじめてのguiアプリ

Web制作者のための上流工程の簡単な説明
Web制作者のための上流工程の簡単な説明Web制作者のための上流工程の簡単な説明
Web制作者のための上流工程の簡単な説明
祐磨 堀
 
社会人になってからでもソフトウェアエンジニアになれる?どんな時代でもなりたい自分でいるために大切なこと [KIKKAKE for Parents#6 イベ...
社会人になってからでもソフトウェアエンジニアになれる?どんな時代でもなりたい自分でいるために大切なこと [KIKKAKE for Parents#6 イベ...社会人になってからでもソフトウェアエンジニアになれる?どんな時代でもなりたい自分でいるために大切なこと [KIKKAKE for Parents#6 イベ...
社会人になってからでもソフトウェアエンジニアになれる?どんな時代でもなりたい自分でいるために大切なこと [KIKKAKE for Parents#6 イベ...
Peatix Japan
 
Web制作者視点で理解するソフトェアテスト
Web制作者視点で理解するソフトェアテストWeb制作者視点で理解するソフトェアテスト
Web制作者視点で理解するソフトェアテスト
祐磨 堀
 
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
Chihiro Tomita
 
TOPPA!! ノーコード講座
TOPPA!! ノーコード講座TOPPA!! ノーコード講座
TOPPA!! ノーコード講座
Syuntaro Kane
 
コンポーネント単位で考えるWeb制作
コンポーネント単位で考えるWeb制作コンポーネント単位で考えるWeb制作
コンポーネント単位で考えるWeb制作
祐磨 堀
 
Leapmotionとp5.js:DEMOと解説
Leapmotionとp5.js:DEMOと解説Leapmotionとp5.js:DEMOと解説
Leapmotionとp5.js:DEMOと解説
光吉 浜谷
 
『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで
『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで
『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで
エピック・ゲームズ・ジャパン Epic Games Japan
 
事業企画
事業企画事業企画
事業企画
teradonburi Terai
 
ものづくりの視点で説明する要件定義
ものづくりの視点で説明する要件定義ものづくりの視点で説明する要件定義
ものづくりの視点で説明する要件定義
祐磨 堀
 
UIデザインは誰のもの?
UIデザインは誰のもの?UIデザインは誰のもの?
UIデザインは誰のもの?
GMO Pepabo, Inc.
 
「Camelog」Android開発秘話
「Camelog」Android開発秘話「Camelog」Android開発秘話
「Camelog」Android開発秘話
Shoya Tsukada
 
Jenkinsを使おうよ
Jenkinsを使おうよJenkinsを使おうよ
Jenkinsを使おうよ
Yohei Oda
 
Prottとsketchとzeplinのススメ
ProttとsketchとzeplinのススメProttとsketchとzeplinのススメ
Prottとsketchとzeplinのススメ
Asami Yamamoto
 
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
theguild
 
20150226 炎上を防ぐためにフロントエンドエンジニアとしてできること
20150226 炎上を防ぐためにフロントエンドエンジニアとしてできること20150226 炎上を防ぐためにフロントエンドエンジニアとしてできること
20150226 炎上を防ぐためにフロントエンドエンジニアとしてできること
Yusaku Kinoshita
 
頭を柔らかくするデザインの発想 by Life is Tech !
頭を柔らかくするデザインの発想 by Life is Tech !頭を柔らかくするデザインの発想 by Life is Tech !
頭を柔らかくするデザインの発想 by Life is Tech !
Naoki Kanazawa
 
Approach of Prototyping for making Application User Interface about iOS
Approach of Prototyping for making Application User Interface about iOSApproach of Prototyping for making Application User Interface about iOS
Approach of Prototyping for making Application User Interface about iOS
Fumiya Sakai
 
App inventor for bussiness
App inventor for bussinessApp inventor for bussiness
App inventor for bussiness
Takeaki Tada
 
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
Miho Yamamori
 

Similar to Electron で作るはじめてのguiアプリ (20)

Web制作者のための上流工程の簡単な説明
Web制作者のための上流工程の簡単な説明Web制作者のための上流工程の簡単な説明
Web制作者のための上流工程の簡単な説明
 
社会人になってからでもソフトウェアエンジニアになれる?どんな時代でもなりたい自分でいるために大切なこと [KIKKAKE for Parents#6 イベ...
社会人になってからでもソフトウェアエンジニアになれる?どんな時代でもなりたい自分でいるために大切なこと [KIKKAKE for Parents#6 イベ...社会人になってからでもソフトウェアエンジニアになれる?どんな時代でもなりたい自分でいるために大切なこと [KIKKAKE for Parents#6 イベ...
社会人になってからでもソフトウェアエンジニアになれる?どんな時代でもなりたい自分でいるために大切なこと [KIKKAKE for Parents#6 イベ...
 
Web制作者視点で理解するソフトェアテスト
Web制作者視点で理解するソフトェアテストWeb制作者視点で理解するソフトェアテスト
Web制作者視点で理解するソフトェアテスト
 
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
 
TOPPA!! ノーコード講座
TOPPA!! ノーコード講座TOPPA!! ノーコード講座
TOPPA!! ノーコード講座
 
コンポーネント単位で考えるWeb制作
コンポーネント単位で考えるWeb制作コンポーネント単位で考えるWeb制作
コンポーネント単位で考えるWeb制作
 
Leapmotionとp5.js:DEMOと解説
Leapmotionとp5.js:DEMOと解説Leapmotionとp5.js:DEMOと解説
Leapmotionとp5.js:DEMOと解説
 
『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで
『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで
『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで
 
事業企画
事業企画事業企画
事業企画
 
ものづくりの視点で説明する要件定義
ものづくりの視点で説明する要件定義ものづくりの視点で説明する要件定義
ものづくりの視点で説明する要件定義
 
UIデザインは誰のもの?
UIデザインは誰のもの?UIデザインは誰のもの?
UIデザインは誰のもの?
 
「Camelog」Android開発秘話
「Camelog」Android開発秘話「Camelog」Android開発秘話
「Camelog」Android開発秘話
 
Jenkinsを使おうよ
Jenkinsを使おうよJenkinsを使おうよ
Jenkinsを使おうよ
 
Prottとsketchとzeplinのススメ
ProttとsketchとzeplinのススメProttとsketchとzeplinのススメ
Prottとsketchとzeplinのススメ
 
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
 
20150226 炎上を防ぐためにフロントエンドエンジニアとしてできること
20150226 炎上を防ぐためにフロントエンドエンジニアとしてできること20150226 炎上を防ぐためにフロントエンドエンジニアとしてできること
20150226 炎上を防ぐためにフロントエンドエンジニアとしてできること
 
頭を柔らかくするデザインの発想 by Life is Tech !
頭を柔らかくするデザインの発想 by Life is Tech !頭を柔らかくするデザインの発想 by Life is Tech !
頭を柔らかくするデザインの発想 by Life is Tech !
 
Approach of Prototyping for making Application User Interface about iOS
Approach of Prototyping for making Application User Interface about iOSApproach of Prototyping for making Application User Interface about iOS
Approach of Prototyping for making Application User Interface about iOS
 
App inventor for bussiness
App inventor for bussinessApp inventor for bussiness
App inventor for bussiness
 
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
 

More from 祐磨 堀

キャリア設計的な話
キャリア設計的な話キャリア設計的な話
キャリア設計的な話
祐磨 堀
 
約物アキを調整するjQueryプラグインを作ってみた
約物アキを調整するjQueryプラグインを作ってみた約物アキを調整するjQueryプラグインを作ってみた
約物アキを調整するjQueryプラグインを作ってみた
祐磨 堀
 
実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れ
実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れ実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れ
実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れ
祐磨 堀
 
Kubernetes & Google Container Engine; DockerコンテナをGKEでクラスタリングしてみた
Kubernetes & Google Container Engine; DockerコンテナをGKEでクラスタリングしてみたKubernetes & Google Container Engine; DockerコンテナをGKEでクラスタリングしてみた
Kubernetes & Google Container Engine; DockerコンテナをGKEでクラスタリングしてみた
祐磨 堀
 
LIGブログをテキストマイニングしてみた TinyTextMinerとRによる、はじめてのデータマイニング
LIGブログをテキストマイニングしてみた TinyTextMinerとRによる、はじめてのデータマイニングLIGブログをテキストマイニングしてみた TinyTextMinerとRによる、はじめてのデータマイニング
LIGブログをテキストマイニングしてみた TinyTextMinerとRによる、はじめてのデータマイニング
祐磨 堀
 
AWSで自宅サーバ?
AWSで自宅サーバ?AWSで自宅サーバ?
AWSで自宅サーバ?
祐磨 堀
 
やさしいSassり方
やさしいSassり方やさしいSassり方
やさしいSassり方
祐磨 堀
 

More from 祐磨 堀 (7)

キャリア設計的な話
キャリア設計的な話キャリア設計的な話
キャリア設計的な話
 
約物アキを調整するjQueryプラグインを作ってみた
約物アキを調整するjQueryプラグインを作ってみた約物アキを調整するjQueryプラグインを作ってみた
約物アキを調整するjQueryプラグインを作ってみた
 
実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れ
実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れ実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れ
実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れ
 
Kubernetes & Google Container Engine; DockerコンテナをGKEでクラスタリングしてみた
Kubernetes & Google Container Engine; DockerコンテナをGKEでクラスタリングしてみたKubernetes & Google Container Engine; DockerコンテナをGKEでクラスタリングしてみた
Kubernetes & Google Container Engine; DockerコンテナをGKEでクラスタリングしてみた
 
LIGブログをテキストマイニングしてみた TinyTextMinerとRによる、はじめてのデータマイニング
LIGブログをテキストマイニングしてみた TinyTextMinerとRによる、はじめてのデータマイニングLIGブログをテキストマイニングしてみた TinyTextMinerとRによる、はじめてのデータマイニング
LIGブログをテキストマイニングしてみた TinyTextMinerとRによる、はじめてのデータマイニング
 
AWSで自宅サーバ?
AWSで自宅サーバ?AWSで自宅サーバ?
AWSで自宅サーバ?
 
やさしいSassり方
やさしいSassり方やさしいSassり方
やさしいSassり方
 

Electron で作るはじめてのguiアプリ