ネットワークチーム 講座 第９回 Electronを使った アプリケーション開発 北海道科学大学 電子計算機研究部 

本日の内容 Windowsアプリケーションを 作ってみる “ “ 今まで学んだ知識を使うと アプリケーションを作れる！ 

INDEX 01 02 03 04 本日の内容 05 セットアップ 実行テスト PW Checker ビルド 

CHAPTER 1 本日の内容 

目標 ⚫ 第８回で制作した「パスワードチェッカー」を Electronを使って Windowsアプリケーション化する ⚫ gitを駆使しながら 開発を行う ⚫ コードの一部は自分で考えて 入力する 

Webの技術を使ってアプリケーションを作るための ソフトウェアフレームワーク GitHubが開発している What is Electron ? 

CHAPTER 2 セットアップ 

Node.js 1. 「https://nodejs.org/ja/」 から「Node.js」を DLしてインストール 1 

作業フォルダ作成 1. 任意の場所に「PasswordChecker」フォルダを作成 2. 作成したフォルダを開き アドレスバーに「cmd」と入力 3. カレントディレクトリが「PasswordChecker」の状態で コマンドプロンプトが開く 

Electron導入 1. Electronをインストール 2. 初期化処理 3. ソースファイルを置くフォルダを作成する npm i -D electron npm init -y mkdir src PasswordChecker ファイル構成 

GitHub 1. 「https://github.com/」 にアクセス 新規リポジトリを作成する 

git リポジトリ作成 2. 新規リポジトリ作成画面が表示されるので [Repository name]を入力して [Private]を選択する [Create repository]でリポジトリを作成 

git リモートリポジトリ設定 1. 「src」フォルダに移動する 2. git 初期化処理 3. リモートリポジトリを設定する cd src git init git remote add origin [リポジトリのURL] リポジトリのURL 

git リモートリポジトリ設定 4. ローカルリポジトリを上書きする 5. push ができるようになった！ git fetch origin master git reset --hard origin/master 

ソースファイル作成 1. 「src」フォルダを開き 「index.html」 「main.js」 「package.json」 を作成する 2. 「package.json」に以下の内容を記述する 3. この記述により、アプリケーションの開始場所が 設定される { "main": "main.js" } src ファイル構成 

コミット・プッシュ 1. コミットメッセージを入力してコミットする 2. リモートリポジトリへプッシュする 

CHAPTER 3 実行テスト 

サンプル実行 1. 「https://electronjs.org/docs/tutorial/first-app」に アクセスし 「index.html」 「main.js」 の内容を コピーする 2. コマンドプロンプトから１階層上のフォルダへ移動する 3. Electronを起動する cd ../ npx electron ./src 

課題1 実行時にデベロッパーツールが 起動しないようにしたい デベロッパーツールが開かないように プログラムを書き換えて 変更をコミットしなさい ？ 

CHAPTER 4 PWChecker 

コードの移植 1. 前回作成した「index.html」 「css」「js」 を 「src」フォルダへコピーする 「index.html」 は上書きする 2. Electronを起動する 3. パスワードチェッカーが 起動した！ npx electron ./src 

課題2 「index.html」「script.js」を 以下のように書き換えなさい ⚫ 結果を表示する領域 （table, tbody, tr, td要素）を HTML側で定義する ⚫ DOMを書き換えることで td要素内に結果を表示する ⚫ 改善案が存在しない場合は “No need to improve.” と 表示する 

CHAPTER 5 ビルド 

パッケージング 1. パッケージング用モジュール 「electron-packager」をインストールする 2. 「PasswordChecker/package.json」 （srcフォルダ内ではない）に 以下を追記する npm i -D electron-packager "scripts": { "test": "echo ¥"Error: no test specified¥" && exit 1", "start": "electron ./src", "build": "electron-packager ./src PasswordChecker --platform=win32 --arch=x64 --overwrite" }, 

パッケージング 1. パッケージングを行う 2. 「PasswordChecker-win32-x64」 フォルダが作成されるので 「PasswordChecker.exe」を実行する 3. アプリが起動したら成功！ npm run build 

前期の講座はここまで お疲れさまでした