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
160
第09回Network講座2019
北海道科学大学 電子計算機研究部
July 30, 2019
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
55
第11回Network講座2019
densan
0
70
第10回Network講座2019
densan
0
46
第08回Network講座2019
densan
0
49
第07回Network講座2019
densan
0
46
第06回Network講座2019
densan
0
71
第05回Network講座2019
densan
0
51
第04回Network講座2019
densan
0
100
第03回Network講座2019
densan
0
39
Other Decks in Education
See All in Education
JPCERTから始まる草の根活動~セキュリティ文化醸成のためのアクション~
masakiokuda
0
180
SkimaTalk Tutorial for Corporate Customers
skimatalk
0
280
i-GIP 2025 中高生のみなさんへ資料
202200
0
480
Education-JAWS #3 ~教育現場に、AWSのチカラを~
masakiokuda
0
160
Gamified Interventions for Composting Behavior: A Case Study Using the Gamiflow Framework in a Workplace Setting
ezefranca
1
120
ANS-C01_2回不合格から合格までの道程
amarelo_n24
1
240
Virtual and Augmented Reality - Lecture 8 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.7k
OJTに夢を見すぎていませんか? ロールプレイ研修の試行錯誤/tryanderror-in-roleplaying-training
takipone
1
150
SkimaTalk Teacher Guidelines Summary
skimatalk
0
790k
技術勉強会 〜 OAuth & OIDC 入門編 / 20250528 OAuth and OIDC
oidfj
5
1.2k
JOAI2025講評 / joai2025-review
upura
0
150
諸外国の理科カリキュラムにおけるビッグアイデアの構造比較
arumakan
0
310
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
Documentation Writing (for coders)
carmenintech
71
4.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
A designer walks into a library…
pauljervisheath
206
24k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
A Tale of Four Properties
chriscoyier
160
23k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
The Language of Interfaces
destraynor
158
25k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
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
前期の講座はここまで お疲れさまでした