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

Markdown and WYSIWYG

Markdown and WYSIWYG

#markdownnight

Sotaro Karasawa

August 29, 2017
Tweet

More Decks by Sotaro Karasawa

Other Decks in Technology

Transcript

  1. TBD in Markdown Night
    Sotaro Karasawa / @sotarok
    Product Owner of Crowi

    View full-size slide

  2. とつぜんですがみなさん

    View full-size slide

  3. Markdown で書ける最強の Wiki といえば?

    View full-size slide

  4. http://site.crowi.wiki/

    View full-size slide

  5. ですよね!

    View full-size slide

  6. 自己紹介: @sotarok / Sotaro Karasawa
    • @sotarok
    • そうたろうです
    • Mercari, Inc で働いています
    • Crowi という Wiki エンジン作ってます
    • 好きなもの

    View full-size slide

  7. せっかくだから宣伝
    • Crowi
    • Wiki エンジンです
    • OSS でやってます
    • https://github.com/crowi/crowi
    • 2012年ごろからつくってます
    • 元々は Crocos (クロコス) という会社の社内 Wiki として作ってました
    • Crocos + Wiki で Crowi (クロウィ)
    • あ、そうそうステッカーあります
    •      そのへんのテーブルに  
    →→→
    • 社内でも使ってます

    View full-size slide

  8. Markdown parser
    • cmark じゃない
    • marked っていうやつですよ
    • remark よさそう今日来た甲斐がありました
    • クライアントでレンダリングしている (JS)
    • Preprocessor と Postprocessor を書いてる
    • (はいはい拡張拡張 …)
    • 結構JSっぽくない描き方しててダサいからアレだけど
    • markdownの補正、生成されたHTMLの補正
    • Plugin 機構ほしいですよね
    • ユーザーによりそった処理
    • 個人的な思いとしては、強いものが勝つからそれでいいか (標準化は大事ではあ
    るが)

    View full-size slide

  9. ところで

    View full-size slide

  10. みなさん
    Markdown は好きですか?

    View full-size slide

  11. • 簡易な記法わかりやすい
    • 対応しているサービスが多い
    • GitHub とか
    • というかまあ GitHub
    • Portability という考え方
    • (これはかなり重要だったりするのでは)
    • 生テキストで見ても見やすい
    • (= テキストエディタでも書きやすい)
    • テキストエディタで書いて、Paste すれば使えるとか
    • みんな WYSIWYG 好きじゃない
    • 良い思い出がない
    • 余計なことされる
    Markdown が好きな理由 (多分)

    View full-size slide

  12. 好き好き
    Markdown

    View full-size slide

  13. と思ってたんですが (本題)

    View full-size slide

  14. 本当にそうですか?

    View full-size slide

  15. WYSIWYG について
    ちゃんと考えてる

    View full-size slide

  16. きっかけ

    View full-size slide

  17. • “見たまま編集”
    • Preview ペインいらない
    • 記法に慣れていない人に優しい
    • 非エンジニアのトレーニングがいらない
    • そんなに苦労はしない、簡易な記法であることは前述の通り
    • 非エンジニアが書けない、とは言わない。もちろん、書いて くれている、メルカリのCS社員も
    書いてる
    • でも、WYSIWYG とどっちがわかりやすいかと言われたら、正直 … 明白
    • (みんな目を覚ますんだ!)
    • 付加機能の拡張表現
    • 同時編集
    • contenteditable は DOM が前提だからね、という言い訳
    • TODO化
    • HTML表現
    • メディア系の埋め込み
    WYSIWYG ってすごい

    View full-size slide

  18. はりつけたい
    # sotarok
    ## 自己紹介
    - 名前: Sotaro Karasawa / 柄沢 聡太郎
    - sotarok → 「そうたろっく」ではなく「そうたろうけー」
    - 呼び名は「そうたろう」または「そうたろうさん」的なやつだと喜びます
    - 誕生日: 9/15
    ## いつもいる場所
    - 六本木または吉祥寺
    - 本当は三鷹駅です
    - “三鷹” っていうと何故か田舎感があり (一駅しか違わないのに) 吉祥寺に住んでること
    にしてます

    View full-size slide

  19. はりつけた

    View full-size slide

  20. 本質的には
    • 文章が気持ちよく書ければ良い
    • 余計なことされず、きれいに表示される、軽快に動作してくれる
    • ちなみに
    • Google Docs とかも、よくはできている
    • 強いて cons を挙げれば
    • Portability
    • 逆ができるならば?
    • (例えば、他のサービスへの連携が Markdown でされる)
    • (contenteditable → markdown)
    • (いやーそれつくるのだるいよねえ)

    View full-size slide

  21. Dropbox Paper いいよ
    (そんなまさかな結論)
    (うそ、結論はネタです)
    (Markdown 以外も良いケースあるよねってだけの話なのでした)
    (思考停止しない訓練として)

    View full-size slide

  22. あ、あと最後に

    View full-size slide

  23. メルカリ、エンジニア募集してます
    (もちろん宣伝させてください)
    https://www.mercari.com/jp/jobs/

    View full-size slide

  24. Crowi もエンジニア募集してます
    (メルカリ社でフルタイムでCrowi開発し
    たい、とかでも相談可)

    View full-size slide

  25. ありがとうございました

    View full-size slide