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
Case Studies and Course Review - Lecture 12 - Information Visualisation (4019538FNR)
signer
PRO
1
2k
Gamified Interventions for Composting Behavior: A Case Study Using the Gamiflow Framework in a Workplace Setting
ezefranca
1
120
SARA Annual Report 2024-25
sara2023
1
180
2025.05.10 技術書とVoicyとわたし #RPALT
kaitou
1
210
アウトプット0のエンジニアが半年でアウトプットしまくった話 With JAWS-UG
masakiokuda
2
310
新卒研修に仕掛ける 学びのサイクル / Implementing Learning Cycles in New Graduate Training
takashi_toyosaki
1
150
Human-AI Interaction - Lecture 11 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
450
20250625_なんでもCopilot 一年の振り返り
ponponmikankan
0
170
Open Source Summit Japan 2025のボランティアをしませんか
kujiraitakahiro
0
700
SkimaTalk Tutorial for Corporate Customers
skimatalk
0
280
推しのコミュニティはなんぼあってもいい / Let's join a lot of communities.
kaga
2
1.7k
SkimaTalk Introduction for Students
skimatalk
0
380
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Scaling GitHub
holman
459
140k
GraphQLとの向き合い方2022年版
quramy
49
14k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Building Applications with DynamoDB
mza
95
6.5k
The Cult of Friendly URLs
andyhume
79
6.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
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
前期の講座はここまで お疲れさまでした