概要

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

こんな方におすすめ

• Electronを使ってみたい人
• 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をチェックしよう

サポート

ダウンロード

本書に関するサンプルコードをダウンロードできます。

データは，ZIP形式の圧縮ファイルです。圧縮ファイルをダウンロードしていただき，適宜解凍してご利用ください。

それぞれのソースコードは，ご自身の責任において使用してください。使用した如何なる結果についても，著者および技術評論社は一切の責任を負いません。

以上のことをご確認，ご了承の上，データをご利用願います。

ダウンロード

Electron_support.zip