Electronではじめるアプリ開発
~JavaScript/HTML/CSSでデスクトップアプリを作ろう
~
2017年3月28日紙版発売
2017年3月28日電子版発売
野口将人,倉見洋輔 著
B5変形判/224ページ
定価2,948円(本体2,680円+税10%)
ISBN 978-4-7741-8819-5
書籍の概要
この本の概要
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をチェックしよう
この本に関連する書籍
-
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
30,000部突破のベストセラー,日本で1番売れているJavaScriptの本が,6年ぶりに全面リニューアル! 「ECMAScript 2015」によって,いっそう進化をつづけるJavaScript...
-
フロントエンドエンジニア養成読本[HTML ,CSS,JavaScriptの基本から現場で役立つ技術まで満載!]
フロントエンドエンジニアは,主にWebブラウザとシステムの間を取り持つエンジニアとしてWeb系企業では一般的になった職種と言われていますが,実際の仕事の領域や扱う...