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
ユーザーストーリーマッピングから始めるアジャイルチームと並走するQA / Starting QA with User Story Mapping
katawara
0
170
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
11
2.9k
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
1.8k
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
290
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
220
Oracle Cloud Infrastructure:2025年2月度サービス・アップデート
oracle4engineer
PRO
1
140
君も受託系GISエンジニアにならないか
sudataka
2
410
運用しているアプリケーションのDBのリプレイスをやってみた
miura55
1
490
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
370
ビジネスモデリング道場 目的と背景
masuda220
PRO
9
410
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
1
180
Featured
See All Featured
Facilitating Awesome Meetings
lara
51
6.2k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Docker and Python
trallard
44
3.3k
Become a Pro
speakerdeck
PRO
26
5.1k
RailsConf 2023
tenderlove
29
1k
Designing for humans not robots
tammielis
250
25k
Designing Experiences People Love
moore
139
23k
Building Your Own Lightsaber
phodgson
104
6.2k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
It's Worth the Effort
3n
184
28k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
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 ͷ ΦϯϥΠϯσϞ