Electronではじめるアプリ開発
                    ~JavaScript/HTML/CSSでデスクトップアプリを作ろう  
                  
                  
                  - 野口将人,倉見洋輔 著
 - 定価
 - 2,948円(本体2,680円+税10%)
 - 発売日
 - 2017.3.28
 - 判型
 - B5変形
 - 頁数
 - 224ページ
 - ISBN
 - 978-4-7741-8819-5 978-4-7741-8916-1
 
概要
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をチェックしよう