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.4k
Vim on Browser (short)
emscripten night LT
Linda_pp
October 04, 2016
Tweet
Share
More Decks by Linda_pp
See All by Linda_pp
ripgrep をライブラリとして使う
rhysd
0
280
port-monolith-to-wasm-for-chrome-extension
rhysd
0
400
Fuzzing Rust Text Editor
rhysd
1
2.8k
Vim compiled to WebAssembly
rhysd
5
2k
about-neovim-0.4.0-floating-window
rhysd
3
2k
reply.vim
rhysd
0
1.1k
Vim ported to WebAssembly (VimConf 2018)
rhysd
4
3.1k
go-selfupdate-github で ツールを自己アップデートする
rhysd
5
4.1k
小さく始めて育てるコンパイラ
rhysd
13
4.7k
Other Decks in Technology
See All in Technology
Janus
bkuhlmann
1
490
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
630
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
4
290
Yahoo! 知恵袋フロントエンドをリアーキテクトしている話
lycorptech_jp
PRO
1
100
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
170
現代CSSフレームワークの内部実装とその仕組み
poteboy
8
3.6k
推しは推せるときに推せ! プロダクトにフィードバックしていこう
nakasho
0
300
アクセス制御にまつわる改善 / Improving access control
itkq
0
530
反実仮想機械学習とは何か
usaito
PRO
11
4.5k
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
4
13k
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
760
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.7k
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
For a Future-Friendly Web
brad_frost
172
9k
How to train your dragon (web standard)
notwaldorf
73
5.2k
Visualization
eitanlees
136
14k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Typedesign – Prime Four
hannesfritz
36
2.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
116
18k
Being A Developer After 40
akosma
57
580k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
A better future with KSS
kneath
231
16k
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 ͷ ΦϯϥΠϯσϞ