HyperappでMarkdownエディタを作って薄い本を書きたい

2018/03/30 We Are JavaScripters!@17thの発表資料です

Transcript

1. )ZQFSBQQͰ.BSLEPXOΤσΟλΛ ࡞ͬͯബ͍ຊΛॻ͖͍ͨ 
   8F
   "SF
   +BWB4DSJQUFST
   !UI !BUTVDP@
2. ΞαΦΧΞπί
   !BUTVDP@ ϑϦʔϥϯε
   ϑϩϯτΤϯυΤϯδχΞʗ8FCσβΠφʔ
   ೣ೿ͷ؁ౘɺң͕௧͍ܥ8FC԰ ʙɹ8F+4ӡӦ
4. ݘςτϥʴ ϑϩϯτΤϯυΤϯδχΞਓͷٕज़ܥಉਓαʔΫϧɻ
   ʹ։࠵͞Εٕͨज़ॻయʹͯɺ
   ʮΠψͰ΋Θ͔Δ8FC
   $PNQPOFOUTʯͱ͍͏ຊΛ൦෍ɻ ຯΛ͠Ίͨզʑ͸ٕज़ॻయͰͷ৽ץ൦෍Λ໨࿦Ή΋ɺ
   ਐ௙͕ո͍͠ɻ
5. 8F+4!UIͰ)ZQFSBQQͷίʔυϦʔσΟϯάͨ͠͠ɺ
   ͔͔ͤͬͩ͘Β͜ΕͰҰ࡭ॻ͖͍ͨ αϯϓϧʹ.BSLEPXOΤσΟλͰ΋
   ࡞ͬͨΒ͍͍Μ͡Όͳ͍ʁ
6. ৽ץͷςʔϚʹͯ͠
   ͍ͭͰʹ8F+4ͷωλʹ͠Α͏
7. 8IBU
   JT
   )ZQFSBQQ
   
   +BWB
   4DSJQU੡௒ܰྔϏϡʔϥΠϒϥϦ
   ͦͷଞϥΠϒϥϦʹґଘͤͣɺ͘͘͞͞࢖͑Δͷ͕ૉఢɻ
   Ծ૝%0.ʗεςʔτ؅ཧʗΠϕϯτϋϯυϦϯά͕ػೳͷશͯ Ͱɺֶशίετ͕௿͍ͷ΋ັྗɻ
   
8. ΅Μ΍Γͨ͠σϞ
10. Ͱ͖Δ͜ͱ ✦ .BSLEPXOೖྗͷϦΞϧλΠϜϓϨϏϡʔ
    ✦ ϓϨϏϡʔελΠϧͷมߋ
    ✦ .BSLEPXOه๏ͷิ׬ૠೖ .BEF
    JO
    8FCQBDL
    )ZQFSBQQ
    NBSLFEKT
    FDU
    
    
     ੡࡞࣌ؒɿ࣌ؒ͘Β͍
    ˞؀ڥߏஙʹ࣌ؒ࢖ͬͨ
11. Α͍
    
    εςʔτͷ؂ࢹɾϏϡʔͷߋ৽ʹશৼΓ͍ͯ͠ΔͷͰɺͱʹ͔ ͘γϯϓϧͰΘ͔Γ΍͍͢ɻ
    +49͕࢖͑ΔͷͰίϯϙʔωϯτͷݟ௨͕͍͍͠ɺؾ͕͢Δɻ
    <button onclick={() => actions.down(1)}>-</button> h("button", { onclick: () => actions.down(1) }, "-") ˣ
12. Ͳ͏͠Α͏
    
    UFYUBSFBͷೖྗΛϓϨϏϡʔ͢ΔͷʹJOOFS)5.-Λ࢖͍ͬͯΔ ͷͰͲ͏ʹ͔͍ͨ͠ɺͱ͍͏͔͔ͤͬͩ͘͠+49Ͱ؅ཧ͍ͨ͠ɻ <section id='previewHtml'> <div id='preview' className={state.previewType} innerHTML={state.preview}></div> </section>
13. ✦ .BSLEPXOˠ+49ʹม׵ͯ͠΋ʮ+49ܗࣜͷจࣈྻʯʹͳΔ͚ͩ Ͱʮ+49Λೝࣝͯ͠ඳը͢Δʯ͜ͱ͕ग़དྷͳ͍ɺͭΒ͍
14. ͦͷଞ͜Ε͔Β΍Γ͍ͨ͜ͱ ✦ ίʔυϋΠϥΠτ
    ✦ ೖྗิ׬͋ͨΓͷॲཧΛ੔͑Δ
    ✦ ίϯϙʔωϯτ୯Ґʹ෼ׂ
    ✦ ݪߘΛॻ͘
15. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    ࣥචؤுΓ·͢