Electronではじめるアプリ開発
JavaScript/HTML/CSSでデスクトップアプリを作ろう

書籍の概要

この本の概要

JavaScriptやHTMLといったWeb系の技術でデスクトップアプリケーションを作成でき,Atomエディタ,Slack,Visual Studio Codeなど,近年話題となったアプリケーションに利用されているElectron。本書は,インストールからアプリの開発,テスト,パッケージング,セキュリティ対策まで,ひととおりの開発の流れをまとめました。「チャットアプリ」「Markdownエディタ」「キャプチャアプリ」の作り方をとおして,はじめてアプリを開発する人にもわかりやすく解説しています。

こんな方におすすめ

  • Electronを使ってみたい人
  • Webの技術でデスクトップアプリを開発したい人

この書籍に関連する記事があります!

話題のフレームワークで作る,クロスプラットフォームデスクトップアプリ
みなさんは,Webブラウザを使わない日があるでしょうか。メール,ネットショッピング,データ管理,動画の閲覧,チャットなど,さまざまな用途でブラウザは使われます。

目次

第1章 Electronとは何か

1-1 Electronの概要

  • Column クロスプラットフォーム開発について

1-2 ElectronとWebの技術の進化

1-3 Electronの特徴

  • Column V8 JavaScriptエンジン

第2章 開発の流れを体験してみよう

2-1 Node.jsをインストールする

  • ダウンロード
  • インストール
  • Column Node.jsのバージョンマネージャー
  • Node.jsのバージョンについて

2-2 アプリケーション作成の準備

  • package.jsonを作成する
  • Electronのインストール
  • Column Chromium
  • Column ES Next

2-3 Electronのアプリケーション構成

  • Mainプロセス
  • Rendererプロセス

2-4 最初のアプリケーションを作成する

  • Mainプロセスを記述する
  • 最初に読み込むHTMLを作成する
  • Electronを起動する
  • Rendererプロセスを記述する

第3章 チャットアプリケーションを作ろう

3-1 Electronが使われているチャットアプリケーション

3-2 開発するチャットアプリケーション

  • アプリケーションの画面構成
  • Electronと画面開発ライブラリ

3-3 開発プロジェクトの作成

  • BabelによるES2015,JSXのトランスパイル
  • Column npmスクリプトの登録
  • ルーティングの実装
  • Column Nodeインテグレーションについて
  • メニューの作成

3-4 Firebaseを使ってリアルタイム通信を実装する

  • Firebaseについて
  • Firebaseのセットアップ
  • ログイン画面を実装する
  • サインアップ画面を実装する
  • チャットルーム一覧画面を実装する
  • チャットルーム詳細画面を実装する

第4章 Markdownエディタを作ろう

4-1 Markdown記法

4-2 開発するアプリケーションの全体像

4-3 開発プロジェクトの作成

  • 開発に必要なモジュールのインストール
  • Column モジュールバンドラー
  • ディレクトリの構成
  • アプリケーションを起動するまでの準備
  • webpackの設定
  • アプリケーションの起動
  • npmスクリプトの定義

4-4 メニューの作成

4-5 コンポーネントを作成する

  • 画面全体を描画するコンポーネントの作成
  • エディタの作成
  • リアルタイムプレビューの実装

4-6 テキストの保存と読み込みの機能を実装する

  • MainプロセスとRendererプロセスの境界線
  • ipcRenderer
  • ipcMain
  • webContents.send
  • remote
  • dialog
  • 「名前を付けて保存」を実装する
  • 「ファイルを開く」を実装する
  • 「ファイルの上書き保存」を実装する

4-7 PDF印刷機能を実装する

  • printToPDF
  • PDF印刷の概要
  • PDF印刷用の画面を作成する
  • PDF印刷処理を実装する

4-8 URLのリンクを外部ブラウザを使って開く

  • shell
  • Chromiumのライフサイクルイベントをフックして,処理を差し込む

第5章 キャプチャアプリケーションを作ろう

5-1 キャプチャアプリケーション

5-2 切り取り機能の作成

  • ディスプレイ情報を取得する
  • 「見えないウィンドウ」を作成する
  • 矩形領域選択を実装する

5-3 キャプチャ機能の作成

  • desktopCapturer APIで画面画像を取得する
  • Media Streamを取得する
  • Column WebRTCとChrome desktopCapture API
  • キャプチャ画像を取得する

5-4 Twitterに画像をPOSTする

  • Twitter APIのセットアップ
  • Twitter APIの実行確認
  • Twitter APIのアクセストークンを取得する
  • ログイン状態を保持する
  • Column ElectronとPIN-based OAuth
  • Twitterに画像を投稿する

第6章 テストを書こう

6-1 Electronアプリケーションのテスト

  • UnitテストとE2Eテスト
  • Spectronとは
  • Column Selenium WebDriverとChromeDrive

6-2 初めのテスト

  • テストを書いてみよう
  • Applicationクラス
  • テスト環境を整える

6-3 エディタの入力とMarkdownのレンダリングのテスト

6-4 テストが失敗したときの状況を記録する

  • browserWindow.capturePage
  • EmojiOneをインストールする
  • テストの記述
  • テスト失敗時の状態を記録する
  • 絵文字の表示を実装する

6-5 requireオプションを利用してテスト用のコードを差し込む

  • SpectronからElectronを起動する際のオプションを指定する
  • preload.jsの記述
  • テストの記述

第7章 アプリケーションの配布

7-1 実行可能パッケージを作成する

  • ビルドの整形
  • electron-packager

7-2 アプリケーションを自動で更新する

  • Squirrelに対応したパッケージの作成
  • Column Electronビルドツールの比較
  • 通知サーバの準備
  • autoUpdaterの実装

第8章 安全なアプリを作るために

8-1 問題点を知ろう

8-2 開発時に気をつけること

  • Nodeインテグレーションを無効にする
  • Column Nodeインテグレーション無効化は本当に安全なのか
  • webviewを利用する
  • shellモジュールを利用する
  • そのほかのチェックリスト
  • 最新のissueをチェックしよう

著者プロフィール

野口将人(のぐちまさと)

freee株式会社所属のエンジニア。React+Flux+Flowtypeを用いたフロントエンド開発が主戦場。jsのビルド周りを整備するのが好き。趣味はギター。
Twitter:@joe_re


倉見洋輔(くらみようすけ)

株式会社WACUL所属のフロントエンドエンジニア。日頃の業務ではTypeScriptとAngularでSPAを開発している。Electronは好きだがatomやVSCは頑なに使わない。Vimを武器に今日もコードを書いている。
Twitter:@Quramy