Vim on Browser (short)

Dea1add99f4cf942792c0f185aa2f2fd?s=47 Linda_pp
October 04, 2016

Vim on Browser (short)

emscripten night LT

Dea1add99f4cf942792c0f185aa2f2fd?s=128

Linda_pp

October 04, 2016
Tweet

Transcript

  1. on emscripten night (2016/10/05)  @Linda_pp @rhysd

  2. Vim on Browser 

  3. Vim.js • Vim.js ͱ͸ • Vim.js ͷ࢓૊Έ • Vim.js ͷػೳ

    
  4. Vim.js ͱ͸ • https://github.com/coolwanglu/vim.js/ • Vim Λϒϥ΢βʹҠ২ͨ͠΋ͷ • Author: Wang

    Lu (ɹɹ@coolwanglu) • Emscripten Λ࢖ͬͯ Vim ͷίʔυΛ JavaScript (asm.js) ʹίϯύΠϧ 
  5. Vim.js ͷ࢓૊Έ • Vim ͷϑϩϯτΤϯυ෦෼Λ֦ு • gui_gtk.c ΍ gui_win32.c, gui_x11.c

    ͳͲʹՃ͑ ͯ gui_web.c Λ࣮૷ • gui_web.c ಺Ͱ Emscripten ͷ API Λ௨ͯ͠ϒϥ ΢βଆ (JavaScript) ͱͭͳ͛Δ 
  6. Vim.js ͷ࢓૊Έ  IUNM಺Ͱ+4ʹίϯύΠ ϧ͞ΕͨίʔυΛϩʔυ ॳظԽॲཧ ɾϑΥϯταΠζऔಘ ɾDBOWBTཁૉͷॳظԽ ɾΦϯϝϞϦ'JMF4ZTUFN &NTDSJQUFOΛܦ༝্͕ͯͬͯ͘͠Δ

    &WFOUʹैͬͯεΫϦʔϯΛDBOWBT ཁૉʹඳը LFZQSFTTͰೖྗΛऔಘ͢Δ Ϣʔβ TDSJQU Ωʔೖྗ ௨஌
  7. Vim.js ͷػೳ • .vimrc ͸ Local Storage ্ʹஔ͔ΕΔͷͰΧε λϚΠζˍอଘ͕Մೳ •

    Vim script ͕ಈ͘ → Vim ϓϥάΠϯ͕ಈ͘ • :! console.log(‘Hello, JavaScript!’) 
  8. Vim.js ׆༻ྫ • react-vimjs Ͱ markdown ΤσΟλ • ϓϥάΠϯͷΦϯϥΠϯσϞ 

  9. 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 );
  10. markdown σϞ Vim Ͱฤू͍ͯ͠ΔςΩετ͕ TextChanged ͰϓϨϏϡʔ͞ΕΔ  IUUQSIZTEHJUIVCJPSFBDUWJNKT

  11. markdown σϞ 

  12. Vim ϓϥάΠϯ clever-f.vim ͷΦϯϥΠϯσϞ  IUUQSIZTEHJUIVCJPDMFWFSGWJN Vim ϓϥάΠϯΛ github pages

    Ͱମ ݧͰ͖Δ
  13. clever-f.vim ͷ ΦϯϥΠϯσϞ