第09回Network講座2019

Transcript

1. ネットワークチーム 講座 第９回 Electronを使った アプリケーション開発 北海道科学大学 電子計算機研究部
2. 本日の内容 Windowsアプリケーションを 作ってみる “ “ 今まで学んだ知識を使うと アプリケーションを作れる！
3. INDEX 01 02 03 04 本日の内容 05 セットアップ 実行テスト PW Checker ビルド
4. CHAPTER 1 本日の内容
5. 目標 ⚫ 第８回で制作した「パスワードチェッカー」を Electronを使って Windowsアプリケーション化する ⚫ gitを駆使しながら 開発を行う ⚫ コードの一部は自分で考えて 入力する
6. Webの技術を使ってアプリケーションを作るための ソフトウェアフレームワーク GitHubが開発している What is Electron ?
7. CHAPTER 2 セットアップ
8. Node.js 1. 「https://nodejs.org/ja/」 から「Node.js」を DLしてインストール 1
9. 作業フォルダ作成 1. 任意の場所に「PasswordChecker」フォルダを作成 2. 作成したフォルダを開き アドレスバーに「cmd」と入力 3. カレントディレクトリが「PasswordChecker」の状態で コマンドプロンプトが開く
10. Electron導入 1. Electronをインストール 2. 初期化処理 3. ソースファイルを置くフォルダを作成する npm i -D electron npm init -y mkdir src PasswordChecker ファイル構成
11. GitHub 1. 「https://github.com/」 にアクセス 新規リポジトリを作成する
12. git リポジトリ作成 2. 新規リポジトリ作成画面が表示されるので [Repository name]を入力して [Private]を選択する [Create repository]でリポジトリを作成
13. git リモートリポジトリ設定 1. 「src」フォルダに移動する 2. git 初期化処理 3. リモートリポジトリを設定する cd src git init git remote add origin [リポジトリのURL] リポジトリのURL
14. git リモートリポジトリ設定 4. ローカルリポジトリを上書きする 5. push ができるようになった！ git fetch origin master git reset --hard origin/master
15. ソースファイル作成 1. 「src」フォルダを開き 「index.html」 「main.js」 「package.json」 を作成する 2. 「package.json」に以下の内容を記述する 3. この記述により、アプリケーションの開始場所が 設定される { "main": "main.js" } src ファイル構成
16. コミット・プッシュ 1. コミットメッセージを入力してコミットする 2. リモートリポジトリへプッシュする
17. CHAPTER 3 実行テスト
18. サンプル実行 1. 「https://electronjs.org/docs/tutorial/first-app」に アクセスし 「index.html」 「main.js」 の内容を コピーする 2. コマンドプロンプトから１階層上のフォルダへ移動する 3. Electronを起動する cd ../ npx electron ./src
19. 課題1 実行時にデベロッパーツールが 起動しないようにしたい デベロッパーツールが開かないように プログラムを書き換えて 変更をコミットしなさい ？
20. CHAPTER 4 PWChecker
21. コードの移植 1. 前回作成した「index.html」 「css」「js」 を 「src」フォルダへコピーする 「index.html」 は上書きする 2. Electronを起動する 3. パスワードチェッカーが 起動した！ npx electron ./src
22. 課題2 「index.html」「script.js」を 以下のように書き換えなさい ⚫ 結果を表示する領域 （table, tbody, tr, td要素）を HTML側で定義する ⚫ DOMを書き換えることで td要素内に結果を表示する ⚫ 改善案が存在しない場合は “No need to improve.” と 表示する
23. CHAPTER 5 ビルド
24. パッケージング 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" },
25. パッケージング 1. パッケージングを行う 2. 「PasswordChecker-win32-x64」 フォルダが作成されるので 「PasswordChecker.exe」を実行する 3. アプリが起動したら成功！ npm run build
26. 前期の講座はここまで お疲れさまでした