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
2.8k
ripgrep をライブラリとして使う
rhysd
0
380
port-monolith-to-wasm-for-chrome-extension
rhysd
0
440
Fuzzing Rust Text Editor
rhysd
1
2.9k
Vim compiled to WebAssembly
rhysd
5
2.1k
about-neovim-0.4.0-floating-window
rhysd
3
2.1k
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
「 SharePoint 難しい」ってよく聞くけど、そんなに言うなら8歳の息子に試してもらった
taichinakamura
1
560
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.6k
なんで、私がAWS Heroに!? 〜社外の広い世界に一歩踏み出そう〜
minorun365
PRO
6
1.1k
新卒1年目が向き合う生成AI事業の開発を加速させる技術選定 / ai-web-launcher
cyberagentdevelopers
PRO
7
1.5k
で、ValhallaのValue Classってどうなったの?
skrb
1
660
君は隠しイベントを見つけれるか?
mujyun
0
270
分布で見る効果検証入門 / ai-distributional-effect
cyberagentdevelopers
PRO
4
690
신뢰할 수 있는 AI 검색 엔진을 만들기 위한 Liner의 여정
huffon
0
240
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
210
来年もre:Invent2024 に行きたいあなたへ - “集中”と“つながり”で楽しむ -
ny7760
0
450
ネット広告に未来はあるか?「3rd Party Cookie廃止とPrivacy Sandboxの効果検証の裏側」 / third-party-cookie-privacy
cyberagentdevelopers
PRO
1
120
LeSSに潜む「隠れWF病」とその処方箋
lycorptech_jp
PRO
2
120
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Building an army of robots
kneath
302
42k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
GraphQLとの向き合い方2022年版
quramy
43
13k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Visualization
eitanlees
144
15k
Documentation Writing (for coders)
carmenintech
65
4.4k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
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 ͷ ΦϯϥΠϯσϞ