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
4k
ripgrep をライブラリとして使う
rhysd
0
420
port-monolith-to-wasm-for-chrome-extension
rhysd
0
460
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.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
新しいスケーリング則と学習理論
taiji_suzuki
9
3.4k
日本版とグローバル版のモバイルアプリ統合の開発の裏側と今後の展望
miichan
1
490
効率的な技術組織が作れる!書籍『チームトポロジー』要点まとめ
iwamot
2
190
【令和最新版】ロボットシミュレータ Genesis x ROS 2で始める快適AIロボット開発
hakuturu583
2
1.4k
信頼されるためにやったこと、 やらなかったこと。/What we did to be trusted, What we did not do.
bitkey
PRO
0
1.1k
2024年にチャレンジしたことを振り返るぞ
mitchan
0
170
スケールし続ける事業とサービスを支える組織とアーキテクチャの生き残り戦略 / The survival strategy for Money Forward’s engineering.
moneyforward
0
210
Formal Development of Operating Systems in Rust
riru
1
140
ネットワーク可視化の世界
likr
7
5.6k
pg_bigmをRustで実装する(第50回PostgreSQLアンカンファレンス@オンライン 発表資料)
shinyakato_
0
150
普通のエンジニアがLaravelコアチームメンバーになるまで
avosalmon
0
660
ソフトウェア開発における「パーフェクトな意思決定」/Perfect Decision-Making in Software Development
yayoi_dd
2
2.6k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
182
21k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
It's Worth the Effort
3n
183
28k
Embracing the Ebb and Flow
colly
84
4.5k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Side Projects
sachag
452
42k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
850
Producing Creativity
orderedlist
PRO
343
39k
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 ͷ ΦϯϥΠϯσϞ