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
Dripcap03
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
h2so5
September 24, 2016
Programming
360
2
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Dripcap03
h2so5
September 24, 2016
More Decks by h2so5
See All by h2so5
Riot.js Tokyo #2
h2so5
0
740
Goによる P2Pチャットシステムの開発
h2so5
11
7.1k
Other Decks in Programming
See All in Programming
新卒PdEのリアル
ryu1013
1
380
KotlinConf Extended South Korea 2026 Keynote
l2hyunwoo
0
130
高専、大学編入、そして未踏へ〜プロダクト開発とキャリアの歩み - Technical College, University Transfer, and On to “Mitou” / My Journey in Product Development and Career
pkmiya
0
130
PyConJP2026_wat_Python × Signal Processing: How to Draw Pictures with Sound Using Spectrogram Art
wat
0
660
レビュー履歴をAIに食わせて、 Compose移行を加速するs
shihochan
0
260
PyO3 で既存 Python 評価器を Rust core 化する ー wasm-bindgen でブラウザにも配るための設計
kdash
1
370
AIと壁打ちしながら進めるコスト管理
fufuhu
2
1.9k
Building an Out-of-Order CPU
latte72
0
660
新人はどこまで自力でやり、どこからAIに頼るべきか/エンジニア育成に向き合う_先輩たちの悩みと知見共有会
toppan_digital_dev
1
560
What We Talk About When We Talk About XP
m_seki
2
350
AIの中の人になってみる
htkym
0
160
承認済みなのに差戻しできてしまうバグ、型で潰せます
shinchit
0
140
Featured
See All Featured
Skip the Path - Find Your Career Trail
mkilby
1
220
Designing Powerful Visuals for Engaging Learning
tmiket
1
530
Speed Design
sergeychernyshev
33
2.1k
Designing for humans not robots
tammielis
254
26k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
49
10k
What does AI have to do with Human Rights?
axbom
PRO
1
2.4k
GitHub's CSS Performance
jonrohan
1033
470k
Impact Scores and Hybrid Strategies: The future of link building
tamaranovitovic
0
430
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
1
2.9k
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
490
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
510
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.6k
Transcript
8FCٕज़Λར༻ͨ͠Ϟμϯͳ ύέοτΞφϥΠβͷ։ൃ
github.com/h2so5 ʢגࣜձࣾ151ʣ 㰡ຊɹ
ύέοτΞφϥΠβ ωοτϫʔΫΞφϥΠβ ➔௨৴ͷ༰ΛՄࢹԽ͢Δπʔϧ
w ωοτϫʔΫͷͷղܾ w ηΩϡϦςΟͷͷݕূ w ϓϩτίϧ࣮ͷσόοά w ωοτϫʔΫϓϩτίϧͷֶश
None
w ΫϩεϓϥοτϑΥʔϜ w $ ɾ(6*2U w ରԠ͍ͯ͠Δϓϩτίϧ͕๛ w $$ ɾ-VBͰϓϥάΠϯ͕ॻ͚Δ
w άϥϑඳըػೳFUD
w -VBͰॻ͚ͯ͋·Γخ͘͠ͳ͍ w (6*ϓϥάΠϯͰ֦ுͰ͖ͳ͍ w άϥϑΟΫε༻ͷ"1*͕ͳ͍ w ϓϥάΠϯཧखಈ w ϚϧνίΞڥ͕ߟྀ͞Ε͍ͯͳ͍
Dripcap
w NBD04-JOVY8JOEPXTରԠ w )5.-$44+BWB4DSJQUͰ6*Λهड़ w ղੳث EJTTFDUPS +BWB4DSJQUͰهड़ w OQNϞδϡʔϧʹରԠ
w ϓϥάΠϯཧػೳ
Demo
w $P⒎FF4DSJQU➔+BWB4DSJQU w (P➔$ w 8JOEPXTରԠʢԾʣ #PPTUձٞWFS͔Βͷओͳมߋ
(6*ͷϑϨʔϜϫʔΫ&MFDUSPO
ෳͷύοέʔδΛΈ߹Θͤͯ(6*Λߏங 1BDLFU-JTU7JFX #JOBSZ7JFX 'JMUFS7JFX 1BDLFU7JFX 4UBUVT7JFX
(6*ͷϓϥάΠϯεΫϦϓτʢൈਮʣ import $ from 'jquery'; import riot from 'riot'; import
Component from 'dripcap/component'; import { Package } from 'dripcap'; export default class PacketFilterView { async activate() { let pkg = await Package.load('main-view'); let wrapper = $('<div/>'); this.comp = new Component(`${__dirname}/../tag/*.tag`); this.view = riot.mount(wrapper[0], 'packet-filter-view')[0]; pkg.root.panel.leftSouthFixed(wrapper); } async deactivate() { let pkg = await Package.load('main-view'); pkg.root.panel.leftSouthFixed(); this.view.unmount(); this.comp.destroy(); } }
(6*ͷϓϩηεͱղੳϓϩηε *1$ .FTTBHF1BDL &MFDUSPO +BWB4DSJQU 7+4&OHJOF $
(6* /*$ ղੳϓϩηεͷத +BWB4DSJQU Τϯδϯ σʔλϕʔε MJCQDBQ
/*$ %JTTFDUPS5ISFBE σʔλϕʔε MJCQDBQ %JTTFDUPS5ISFBE %JTTFDUPS5ISFBE %JTTFDUPS5ISFBE 2VFVF 4USFBN%JTTFDUPS (6*
'JMUFS5ISFBE 'JMUFS5ISFBE 'JMUFS5ISFBE 'JMUFS5ISFBE
import { Layer, Buffer } from 'dripcap'; import MACAddress from
'dripcap/mac'; import EthEnum from 'dripcap/eth/type'; export default class EthrenetDissector { analyze(packet, parentLayer) { let layer = new Layer(); layer.name = 'Ethernet'; layer.namespace = '::Ethernet'; let destination = parentLayer.payload.slice(0, 6); layer.fields.push({ name: 'MAC destination', attr: 'dst', data: destination }); layer.attrs.dst = new MACAddress(destination); let source = parentLayer.payload.slice(6, 12); layer.fields.push({ name: 'MAC source', attr: 'src', data: source }); layer.attrs.src = new MACAddress(source); ղੳثͷϓϥάΠϯεΫϦϓτʢൈਮʣ
՝ʁ
/PEFKTͷ"1*ͱͷޓੑͷ ϓϩτίϧͷਪఆͷ ύϑΥʔϚϯεͷ
/PEFKTͷ"1*ͱͷޓੑͷ w ղੳث EJTTFDUPS ͷ࣮ߦڥ/PEFKTͰ ͳ͘ɺૉͷ+BWB4DSJQU 7 /PEFKT ෩#V⒎FS
w /PEFKTͷ"1*جຊతʹ͑ͳ͍ͷͰɺ मਖ਼͠ͳ͍ͱར༻Ͱ͖ͳ͍OQNϞδϡʔϧ ͋Δ
ϓϩτίϧͷਪఆͷ w ϓϩτίϧͷछྨ͕σʔλ͔Βผ͠ʹ͘ ͍߹ʹͲ͏ॲཧ͢Δ͔ w ݱࡏͷ࣮Ͱɺ͋Δύέοτ͕ϓϩτί ϧ"ɾ#ೋ௨ΓʹղऍͰ͖Δ߹ɺ྆ํ ͷղੳ݁ՌΛग़ྗ͢Δ w 8JSFTIBSLͰϙʔτ൪߸Ͱผ
ύϑΥʔϚϯεͷ w ͑ͳ͍͜ͱͳ͍ͱ͍͏Ϩϕϧ WYͷ ͱ͖ΑΓվળ w վળ͖͍͢Ζ͍Ζ͋Δ͕ɺࠓͷͱ͜ Ζ༏ઌ͕͋·Γߴ͘ͳ͍ w
ͪΌΜͱϕϯνϚʔΫςετ͠ͳ͍ͱʜ
None