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
actionlint の Linter 設計
rhysd
6
2.1k
ripgrep をライブラリとして使う
rhysd
0
360
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.2k
Other Decks in Technology
See All in Technology
エンジニア視点で見る、 組織で運用されるデザインシステムにするには
shunya078
1
300
あなたの知らないiOS開発の世界
recruitengineers
PRO
3
170
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
240
Technical Writing Meetup vol.35
soracom
PRO
2
110
事前準備が肝!AI活用のための業務改革
layerx
PRO
1
370
AIで変わるテスト自動化:最新ツールの多様なアプローチ/ 20240910 Takahiro Kaneyama
shift_evolve
0
210
フロントエンド・オブザーバビリティを支える要素技術を学ぼう
sadnessojisan
2
180
プロダクトエンジニアを支えるための開発生産性向上施策
tsukakei
0
140
Javaにおける関数型プログラミンへの取り組み
skrb
7
320
ネットワークだけ隔離されたコンテナ作成デモ / Kichijoji.pm36
tenforward
1
210
2024年のナビゲーション・フォーカス対応:Composeでキーボード・ナビゲーションをサポートしよう
tahia910
0
110
フルカイテン株式会社 採用資料
fullkaiten
0
32k
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
The Brand Is Dead. Long Live the Brand.
mthomps
53
38k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.3k
Done Done
chrislema
180
16k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
326
21k
Designing Experiences People Love
moore
138
23k
Optimizing for Happiness
mojombo
375
69k
Visualization
eitanlees
142
15k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
[RailsConf 2023] Rails as a piece of cake
palkan
48
4.6k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
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 ͷ ΦϯϥΠϯσϞ