読者です 読者をやめる 読者になる 読者になる

WEB+DB PRESS Vol.94 Electron特集

WEB+DB PRESS Vol.94

WEB+DB PRESS Vol.94

これ面白かった。
twitterアプリの開発を通して、ざっと最低限必要なことは学べた印象。
配布と自動更新以外は写経。とても充実した内容でした。
Desktopアプリ作るなら一度使ってみたいです。

お品書き

  • timelineの表示・tweet
  • macのnotification
  • ショートカットの設定
  • メニューバー(Tray)の追加
  • badge(Dockアイコン)
  • Dockのbound animation
  • draftの保存機能
  • screenshot(desktop captureの例)
  • debug
  • test
  • 配布
  • 自動更新

こんな感じ。
f:id:rochefort:20170403180056p:plain

Securityについて

BrowserWindowのwebPreferencesオプションについて

  • webSecurityを無効にしない
  • リモートコンテントを表示するウィンドウはnodeIntegrationをfalseにする
  • allowDisplayingInsecureContentとallowRunningInsecureContentをtrueにしない
  • repermentalFeaturesとexpermentalCanvasFeaturesをむやみに有効にしない
  • blinkFeaturesをむやみに使用しない

<webview>の属性について

  • nodeintegrationをfalseにする
  • blinkfeatures、disablewebsecurity、allowpopupsを使用しない
  • insertCSS、executeJavaScriptメソッドに対してリモートコンテンツを使用しない

その他

  • Electron(Chromium)のアップデートに追従する
  • セキュアなコンテンツ(HTTPS)のみを表示する
  • Content-Scrurity-Policyを使用して、読み込むリソースを制限する
  • window.evalをオーバーライドして使用できないようにする

debug

公式のDevtron は良さそう。IPC Monitoringも可能。

npm install --save-dev devtron

# devtool上で
require('devtron').install()

test

spectron + mocha ごくごく基本的なテストの書き方のみ紹介。どうテストを書いて行くかは結構悩むかも。
 
より詳細はgithubに。
electron/spectron: Test Electron apps using ChromeDriver