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
56
第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
人になにかを教えるときに考えていること(2025-05版 / VRC-LT #18)
sksat
4
1.1k
2025年度春学期 統計学 第11回 分布の「型」を考える ー 確率分布モデルと正規分布 (2025. 6. 19)
akiraasano
PRO
0
150
新卒研修に仕掛ける 学びのサイクル / Implementing Learning Cycles in New Graduate Training
takashi_toyosaki
1
180
Avoin jakaminen ja Creative Commons -lisenssit
matleenalaakso
0
1.9k
Visualisation Techniques - Lecture 8 - Information Visualisation (4019538FNR)
signer
PRO
0
2.4k
自己紹介 / who-am-i
yasulab
PRO
3
5.3k
Constructing a Custom TeX Ecosystem for Educational Institutions—Beyond Academic Typesetting
doratex
1
14k
ビジネスモデル理解
takenawa
0
10k
ANS-C01_2回不合格から合格までの道程
amarelo_n24
1
270
Info Session MSc Computer Science & MSc Applied Informatics
signer
PRO
0
190
データ分析
takenawa
0
10k
令和政経義塾第2期説明会
nxji
0
120
Featured
See All Featured
A designer walks into a library…
pauljervisheath
207
24k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
RailsConf 2023
tenderlove
30
1.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Navigating Team Friction
lara
187
15k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Gamification - CAS2011
davidbonilla
81
5.4k
Designing Experiences People Love
moore
142
24k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
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
前期の講座はここまで お疲れさまでした