Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
第09回Network講座2019
Search
北海道科学大学 電子計算機研究部
July 30, 2019
Education
1
130
第09回Network講座2019
北海道科学大学 電子計算機研究部
July 30, 2019
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
40
第11回Network講座2019
densan
0
65
第10回Network講座2019
densan
0
34
第08回Network講座2019
densan
0
41
第07回Network講座2019
densan
0
41
第06回Network講座2019
densan
0
49
第05回Network講座2019
densan
0
41
第04回Network講座2019
densan
0
63
第03回Network講座2019
densan
0
32
Other Decks in Education
See All in Education
SUMMER SCHOOL 2024
pnuslide
0
140
Introduction - Lecture 1 - Advanced Topics in Big Data (4023256FNR)
signer
PRO
1
1.1k
スクフェスの学びにチームを惹き込め! 社内同時視聴会のすゝめ!
pokotyamu
0
730
4 занятие. Разбор бизнес-моделей и метод красной нити #ideaNN 9.02.2024.
karlov
0
230
Analysis and Validation - Lecture 4 - Information Visualisation (4019538FNR)
signer
PRO
0
1.4k
情報Iの「縦糸」と「横糸」を意識したプログラム教育の実践
asial_edu
0
200
MonacaEducation導入手引き2024年第1版
asial_edu
1
160
Data Representation - Lecture 3 - Information Visualisation (4019538FNR)
signer
PRO
1
1.7k
第33回 JAWS-UG札幌 クラウド女子会コラボ 勉強会
nagisa53
2
350
人生の転機からチャンスを掴む「シュロスバーグの4Sモデル」/4s-models
yuko_yokouchi
2
720
Animaatiot opetuksessa
matleenalaakso
0
3.1k
Data Management and Analytics Specialisation
signer
PRO
0
990
Featured
See All Featured
Designing for humans not robots
tammielis
248
25k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
244
20k
Music & Morning Musume
bryan
41
5.6k
Teambox: Starting and Learning
jrom
128
8.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
42k
Design by the Numbers
sachag
274
18k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
Adopting Sorbet at Scale
ufuk
68
8.6k
Documentation Writing (for coders)
carmenintech
60
3.9k
A better future with KSS
kneath
231
16k
Transcript
ネットワークチーム 講座 第9回 Electronを使った アプリケーション開発 北海道科学大学 電子計算機研究部
本日の内容 Windowsアプリケーションを 作ってみる “ “ 今まで学んだ知識を使うと アプリケーションを作れる!
INDEX 01 02 03 04 本日の内容 05 セットアップ 実行テスト PW
Checker ビルド
CHAPTER 1 本日の内容
目標 ⚫ 第8回で制作した「パスワードチェッカー」を 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. コマンドプロンプトから1階層上のフォルダへ移動する
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
前期の講座はここまで お疲れさまでした