フロントエンドの技術で始めるデスクトップアプリ

フロントエンドの技術で始める
デスクトップアプリ

自己紹介
・名前
日下智貴
Twittre: @rakuda_daraku
・お仕事
Web系の技術を利用したアプリ開発がメイン

このロゴを知っている方？

Electronのロゴと似てる
Atom Electron

Atom
・Github社が開発しているエディタソフト
・JS/CoffeeScriptで機能拡張が可能
・クロスプラットフォーム
Webブラウザ(Chromium)ベースで動作

Electron
・ChromiumとNode.jsをベースにした
デスクトップアプリフレームワーク
・クロスプラットフォームで動作
・UI等の部分は、HTML・JS・CSSで実装
・旧称：Atom-Shell

Electron製のデスクトップアプリ

クロスプラットフォームアプリの開発
・Java (Swing、JavaFX)
・Qt (C++, Python )
・Node-Webkit (node.js)

・Node.jsをインストール
Electronをインストールするために必要
・Electronをインストール
npm -g install electron-prebuilt
Electronの開発環境

・アプリケーション用のディレクトリを作成
・アプリの設定ファイルを用意
npm init -y
作成された「package.json」のmainに
記載されたJSファイルがアプリの
エントリポイントになる
準備

・カップ麺タイマー
・AngularJSを利用したメモアプリ
もう少し凝ったものを作って見よう

・Webアプリとして作成したものを
デスクトップアプリ化が簡単に試せる
・HTML・JS・CSSの知識ですぐにアプリが
作れる
・実行環境込で配布が可能
デスクトップアプリの活用

・バイナリサイズが大きい
Chromium等を含む必要があるため
・動作が遅い（既存のネイティブアプリに
比べて）
Electronのデメリット

Electronをどういった時に利用するか
・オレオレツールを
簡易的に作成クロスプラットフォーム化する
・既存の静的なWebアプリをネイティブ化する

Recommended