Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
第08回Network講座2019
Search
北海道科学大学 電子計算機研究部
July 23, 2019
Education
0
51
第08回Network講座2019
北海道科学大学 電子計算機研究部
July 23, 2019
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
60
第11回Network講座2019
densan
0
71
第10回Network講座2019
densan
0
47
第09回Network講座2019
densan
1
160
第07回Network講座2019
densan
0
48
第06回Network講座2019
densan
0
72
第05回Network講座2019
densan
0
52
第04回Network講座2019
densan
0
110
第03回Network講座2019
densan
0
40
Other Decks in Education
See All in Education
とある長岡高専卒のおっさんがIT企業のマネージャーになるまで / journey-from-nagaoka-kosen-grad-to-it-manager
masaru_b_cl
0
160
【ZEPメタバース校舎操作ガイド】
ainischool
0
610
ThingLink
matleenalaakso
28
4.2k
Padlet opetuksessa
matleenalaakso
9
15k
the difficulty into words
ukky86
0
300
1021
cbtlibrary
0
360
Présentation_1ère_Spé_2025.pdf
bernhardsvt
0
440
Introduction - Lecture 1 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
2.7k
沖ハック~のみぞうさんとハッキングチャレンジ☆~
nomizone
1
510
ROSConJP 2025 発表スライド
f0reacharr
0
260
Microsoft Office 365
matleenalaakso
0
2k
DIP_4_Compression
hachama
0
130
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.2k
Building a Scalable Design System with Sketch
lauravandoore
463
34k
[RailsConf 2023] Rails as a piece of cake
palkan
58
6.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Writing Fast Ruby
sferik
630
62k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
The Invisible Side of Design
smashingmag
302
51k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
970
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.3k
YesSQL, Process and Tooling at Scale
rocio
174
15k
Transcript
ネットワークチーム 第8回 2019 北海道科学大学 電子計算機研究部
実践編 PW強度測定サービス
実践編 本日の目的 これまでの知識を生かして パスワードの強度を測定するサービスを 作ってみよう! 3
使うもの ⚫ zxcvbn Dropboxが提供している パスワードの強度を測定するための JavaScript ライブラリ ⚫ HTML・CSS・JS の知識
4
構成 5 タイトル フォーム 結果表示 ~~~~ ~~~~ Webページ index.html index.css
zxcvbn.js script.js
構成 6 要件定義 ⚫ 文字を入力する度に リアルタイムで結果を表示する ⚫ 結果は動的に生成する ⚫ ある程度の見栄えを確保する
制作
準備 zxcvbnの入手 1. https://github.com/dropbox/zxcvbn#manual- installation へ飛び、zxcvbn.jsを保存 8
準備 ファイルの作成 2. 以下のような階層でファイルを作成 pw -- index.html css -- index.css
js -- zxcvbn.js -- script.js 9
HTML HTMLを以下のように記述 10
HTMLの解説 22行目 onKeyUp=“check(this)” キーが上がったら つまり 文字が入力される度に 関数check()を呼び出す。 11
https://github.com/dropbox/zxcvbn#usage を読んでみる 12 zxcvbn(password, user_inputs=[]) zxcvbn() takes one required argument,
a password, and returns a result object with several properties:
コンソールでテスト HTMLをブラウザで開いて デベロッパーツールを起動 コンソールに以下を入力 13 let pw = zxcvbn("123456"); console.log(pw);
コンソールでテスト 方針 ⚫ zxcvbn() の引数にパスワードを入れる - フォームへの入力を取得する必要がある ⚫ 上記で得られたオブジェクトを格納する ⚫
オブジェクトのパラメーターを結果として表示する 14
スクリプトを作ろう script.js を以下のように記述 15
スクリプトを作ろう index.html をブラウザで開く 16
スタイルを作ろう index.cssを以下のように記述 17
スタイルを作ろう 完成 18
参考 ⚫ GitHub - dropbox/zxcvbn: Low-Budget Password Strength Estimation https://github.com/dropbox/zxcvbn
19
今回の講座はここまで お疲れ様でした