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.

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

871 views

Published on

「北海道HTML5fun+OSGeo」発表資料

Published in: Business
  • Be the first to comment

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

  1. 1. フロントエンドの技術で始める デスクトップアプリ
  2. 2. 自己紹介 ・名前 日下 智貴 Twittre: @rakuda_daraku ・ お仕事 Web系の技術を利用したアプリ開発がメイン
  3. 3. 本日の内容
  4. 4. このロゴを知っている方?
  5. 5. Electronのロゴと似てる
  6. 6. Electronのロゴと似てる Atom Electron
  7. 7. Atom ・Github社が開発しているエディタソフト ・JS/CoffeeScriptで機能拡張が可能 ・クロスプラットフォーム Webブラウザ(Chromium)ベースで動作
  8. 8. Electron ・ChromiumとNode.jsをベースにした デスクトップアプリフレームワーク ・クロスプラットフォームで動作 ・UI等の部分は、HTML・JS・CSSで実装 ・旧称:Atom-Shell
  9. 9. Electron製のデスクトップアプリ
  10. 10. クロスプラットフォームアプリの開発 ・Java (Swing、JavaFX) ・Qt (C++, Python ) ・Node-Webkit (node.js)
  11. 11. ・Node.jsをインストール Electronをインストールするために必要 ・Electronをインストール npm -g install electron-prebuilt Electronの開発環境
  12. 12. ・アプリケーション用のディレクトリを作成 ・アプリの設定ファイルを用意 npm init -y 作成された「package.json」のmainに 記載されたJSファイルがアプリの エントリポイントになる 準備
  13. 13. ・カップ麺タイマー ・AngularJSを利用したメモアプリ もう少し凝ったものを作って見よう
  14. 14. ・Webアプリとして作成したものを デスクトップアプリ化が簡単に試せる ・HTML・JS・CSSの知識ですぐにアプリが 作れる ・実行環境込で配布が可能 デスクトップアプリの活用
  15. 15. ・バイナリサイズが大きい Chromium等を含む必要があるため ・動作が遅い(既存のネイティブアプリに 比べて) Electronのデメリット
  16. 16. Electronをどういった時に利用するか ・オレオレツールを 簡易的に作成クロスプラットフォーム化する ・既存の静的なWebアプリをネイティブ化する

×