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
Vim on Browser (short)
Search
Linda_pp
October 04, 2016
Technology
1
2.5k
Vim on Browser (short)
emscripten night LT
Linda_pp
October 04, 2016
Tweet
Share
More Decks by Linda_pp
See All by Linda_pp
actionlint の Linter 設計
rhysd
6
4.6k
ripgrep をライブラリとして使う
rhysd
0
430
port-monolith-to-wasm-for-chrome-extension
rhysd
0
470
Fuzzing Rust Text Editor
rhysd
1
3k
Vim compiled to WebAssembly
rhysd
5
2.2k
about-neovim-0.4.0-floating-window
rhysd
3
2.2k
reply.vim
rhysd
0
1.2k
Vim ported to WebAssembly (VimConf 2018)
rhysd
4
3.3k
go-selfupdate-github で ツールを自己アップデートする
rhysd
5
4.3k
Other Decks in Technology
See All in Technology
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
1
1.1k
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
100
これからSREになる人と、これからもSREをやっていく人へ
masayoshi
6
4.1k
滅・サービスクラス🔥 / Destruction Service Class
sinsoku
6
1.5k
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
7
1k
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
730
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
740
データの品質が低いと何が困るのか
kzykmyzw
6
1k
[2025-02-07]生成AIで変える問い合わせの未来 〜チームグローバル化の香りを添えて〜
tosite
1
290
Culture Deck
optfit
0
330
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
450
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Statistics for Hackers
jakevdp
797
220k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Music & Morning Musume
bryan
46
6.3k
Docker and Python
trallard
44
3.3k
Writing Fast Ruby
sferik
628
61k
Building Adaptive Systems
keathley
40
2.4k
Navigating Team Friction
lara
183
15k
Transcript
on emscripten night (2016/10/05) @Linda_pp @rhysd
Vim on Browser
Vim.js • Vim.js ͱ • Vim.js ͷΈ • Vim.js ͷػೳ
Vim.js ͱ • https://github.com/coolwanglu/vim.js/ • Vim ΛϒϥβʹҠ২ͨ͠ͷ • Author: Wang
Lu (ɹɹ@coolwanglu) • Emscripten Λͬͯ Vim ͷίʔυΛ JavaScript (asm.js) ʹίϯύΠϧ
Vim.js ͷΈ • Vim ͷϑϩϯτΤϯυ෦Λ֦ு • gui_gtk.c gui_win32.c, gui_x11.c
ͳͲʹՃ͑ ͯ gui_web.c Λ࣮ • gui_web.c Ͱ Emscripten ͷ API Λ௨ͯ͠ϒϥ βଆ (JavaScript) ͱͭͳ͛Δ
Vim.js ͷΈ IUNMͰ+4ʹίϯύΠ ϧ͞ΕͨίʔυΛϩʔυ ॳظԽॲཧ ɾϑΥϯταΠζऔಘ ɾDBOWBTཁૉͷॳظԽ ɾΦϯϝϞϦ'JMF4ZTUFN &NTDSJQUFOΛܦ༝্͕ͯͬͯ͘͠Δ
&WFOUʹैͬͯεΫϦʔϯΛDBOWBT ཁૉʹඳը LFZQSFTTͰೖྗΛऔಘ͢Δ Ϣʔβ TDSJQU Ωʔೖྗ ௨
Vim.js ͷػೳ • .vimrc Local Storage ্ʹஔ͔ΕΔͷͰΧε λϚΠζˍอଘ͕Մೳ •
Vim script ͕ಈ͘ → Vim ϓϥάΠϯ͕ಈ͘ • :! console.log(‘Hello, JavaScript!’)
Vim.js ׆༻ྫ • react-vimjs Ͱ markdown ΤσΟλ • ϓϥάΠϯͷΦϯϥΠϯσϞ
react-vimjs ͱ ίϯύΠϧࡁΈͷ Vim.js Λ bundle ͠ɼReact ίϯϙʔωϯτͱͯ͠؆୯ ʹ͑ΔΑ͏ʹͨ͠ͷ
1 import React from 'react' 2 import Vim from 'react-vimjs' 3 4 React.render( 5 <Vim memPath="path/to/dist/vim.js.mem"> 6 Loading... 7 </Vim>, 8 document.body 9 );
markdown σϞ Vim Ͱฤू͍ͯ͠ΔςΩετ͕ TextChanged ͰϓϨϏϡʔ͞ΕΔ IUUQSIZTEHJUIVCJPSFBDUWJNKT
markdown σϞ
Vim ϓϥάΠϯ clever-f.vim ͷΦϯϥΠϯσϞ IUUQSIZTEHJUIVCJPDMFWFSGWJN Vim ϓϥάΠϯΛ github pages
Ͱମ ݧͰ͖Δ
clever-f.vim ͷ ΦϯϥΠϯσϞ