Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

atsuco
March 30, 2018

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

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

atsuco

March 30, 2018
Tweet

More Decks by atsuco

Other Decks in Programming

Transcript

  1. )ZQFSBQQͰ.BSLEPXOΤσΟλΛ
    ࡞ͬͯബ͍ຊΛॻ͖͍ͨ
    8F"SF+BWB4DSJQUFST!UI
    !BUTVDP@

    View full-size slide

  2. ΞαΦΧΞπί!BUTVDP@
    ϑϦʔϥϯε
    ϑϩϯτΤϯυΤϯδχΞʗ8FCσβΠφʔ
    ೣ೿ͷ؁ౘɺң͕௧͍ܥ8FC԰
    ʙɹ8F+4ӡӦ

    View full-size slide

  3. ݘςτϥʴ
    ϑϩϯτΤϯυΤϯδχΞਓͷٕज़ܥಉਓαʔΫϧɻ
    ʹ։࠵͞Εٕͨज़ॻయʹͯɺ
    ʮΠψͰ΋Θ͔Δ8FC$PNQPOFOUTʯͱ͍͏ຊΛ൦෍ɻ
    ຯΛ͠Ίͨզʑ͸ٕज़ॻయͰͷ৽ץ൦෍Λ໨࿦Ή΋ɺ
    ਐ௙͕ո͍͠ɻ

    View full-size slide

  4. 8F+4!UIͰ)ZQFSBQQͷίʔυϦʔσΟϯάͨ͠͠ɺ
    ͔͔ͤͬͩ͘Β͜ΕͰҰ࡭ॻ͖͍ͨ
    αϯϓϧʹ.BSLEPXOΤσΟλͰ΋
    ࡞ͬͨΒ͍͍Μ͡Όͳ͍ʁ

    View full-size slide

  5. ৽ץͷςʔϚʹͯ͠
    ͍ͭͰʹ8F+4ͷωλʹ͠Α͏

    View full-size slide

  6. 8IBUJT)ZQFSBQQ
    +BWB4DSJQU੡௒ܰྔϏϡʔϥΠϒϥϦ
    ͦͷଞϥΠϒϥϦʹґଘͤͣɺ͘͘͞͞࢖͑Δͷ͕ૉఢɻ
    Ծ૝%0.ʗεςʔτ؅ཧʗΠϕϯτϋϯυϦϯά͕ػೳͷશͯ
    Ͱɺֶशίετ͕௿͍ͷ΋ັྗɻ

    View full-size slide

  7. ΅Μ΍Γͨ͠σϞ

    View full-size slide

  8. Ͱ͖Δ͜ͱ
    ✦ .BSLEPXOೖྗͷϦΞϧλΠϜϓϨϏϡʔ
    ✦ ϓϨϏϡʔελΠϧͷมߋ
    ✦ .BSLEPXOه๏ͷิ׬ૠೖ
    .BEFJO
    8FCQBDL
    )ZQFSBQQ
    NBSLFEKT
    FDU
    ੡࡞࣌ؒɿ࣌ؒ͘Β͍
    ˞؀ڥߏஙʹ࣌ؒ࢖ͬͨ

    View full-size slide

  9. Α͍

    εςʔτͷ؂ࢹɾϏϡʔͷߋ৽ʹશৼΓ͍ͯ͠ΔͷͰɺͱʹ͔
    ͘γϯϓϧͰΘ͔Γ΍͍͢ɻ
    +49͕࢖͑ΔͷͰίϯϙʔωϯτͷݟ௨͕͍͍͠ɺؾ͕͢Δɻ
    actions.down(1)}>-
    h("button", { onclick: () => actions.down(1) }, "-")
    ˣ

    View full-size slide

  10. Ͳ͏͠Α͏
    UFYUBSFBͷೖྗΛϓϨϏϡʔ͢ΔͷʹJOOFS)5.-Λ࢖͍ͬͯΔ
    ͷͰͲ͏ʹ͔͍ͨ͠ɺͱ͍͏͔͔ͤͬͩ͘͠+49Ͱ؅ཧ͍ͨ͠ɻ

    innerHTML={state.preview}>

    View full-size slide

  11. ✦ .BSLEPXOˠ+49ʹม׵ͯ͠΋ʮ+49ܗࣜͷจࣈྻʯʹͳΔ͚ͩ
    Ͱʮ+49Λೝࣝͯ͠ඳը͢Δʯ͜ͱ͕ग़དྷͳ͍ɺͭΒ͍

    View full-size slide

  12. ͦͷଞ͜Ε͔Β΍Γ͍ͨ͜ͱ
    ✦ ίʔυϋΠϥΠτ
    ✦ ೖྗิ׬͋ͨΓͷॲཧΛ੔͑Δ
    ✦ ίϯϙʔωϯτ୯Ґʹ෼ׂ
    ✦ ݪߘΛॻ͘

    View full-size slide

  13. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    ࣥචؤுΓ·͢

    View full-size slide