| @WWW

Markdown Logo.png

なぜ Day One は Markdown を捨てたのか

Day One が Markdown をやめて WYSIWYG に移行した話は前書いた。

自分が知っている範囲でアンチ Markdown 勢は Scrapbox くらいしか思い浮かばず、 GitHub や Trello などのグローバル勢に加え、 Qiita やはてなブログなど日本国内向けのサービスでも当然のように Markdown が共通言語として使われているのに、その Markdown を捨てて WYSIWYG 化する1という戦略は疑問だった。

ひとむかし前の WYSIWYG は最悪で、Word での文書作成や Google Docs にも良い思い出がない。とにかく文章が書きにくい不自由なツールだった。

WYSIWYG 勢が力をつけてきている

一方で、お洒落な UI で話題になった Notion を使ってみると Markdown の要素を残した WYSIWYG だった。 Dropbox Paper も Markdown 風 WYSIWYG 、 Slack も最近段階的に WYSIWYG 化しつつある。

どうやら WYSIWYG の波が到来しつつあるようだ。

なぜ WYSIWYG なのか

Markdown は HTML を書いたことがない人には難しい

エンジニアやデザイナーなど、 HTML を理解している人からしたら Markdown は簡単だが、そうでない人には難しい。組織内に非エンジニア・非デザイナー( HTML を書けない人)が増えてくると、途端に社内ドキュメント管理ツールがカオス( や全角空白   で装飾された文書が氾濫)になる。

プレーンな Markdown では、リストの概念や文書を構造化するということに対する理解がないと読みやすい文書は書けない。プレーンテキストベースの Markdown には読みやすく構造化された文書を書けるようになることを助ける仕組みが欠落している。

普通の人が Web 系のように働きはじめている

Slack は DAU が 1200 万を超えたらしい。もはやエンジニアだけのツールだけではなくなってきているようだ。

チャット、 Wiki 、社内ブログ、タスク管理ツールなど、文章を入力させる系の SaaS が徐々に IT 産業以外の職場でも普及しつつあり、そのような環境でも受け入れられやすいようにプレーンテキストの Markdown ではなく、 Markdown 風の WYSIWYG を入れてきているのだと推察する。

普通の人でもぐちゃぐちゃにならないように文書を書くための仕組みとして WYSIWYG が注目され直しているのだろう。

抑制された WYSIWYG

Dropbox Paper や Notion の UI はシンプルでクール

MS Word や Google Docs など昔ながらの WYSIWYG はボタンが多く、出来ることが多すぎて逆に不自由だと感じる場面が多かった。一方で Dropbox Paper や Notion の WYSIWYG には悪い印象がない。Paper や Notion の WYSIWYG はできることが限定されていて、制限されているがゆえの使いやすさがある。 MS Word のような大小の文字が入り乱れ、文字が七色に輝いているような文書は書けない。

ぐちゃぐちゃな文書を書かせない仕組み

Paper や Notion はアウトライナーを WYSIWYG 化したような感じで、文章を並べ替えたり入れ子にしたりできる。

Notion

文章を構造化することに慣れていない人でも、まぁまぁ読みやすい構造化された文章を書ける、あるいは構造化された文章の書き方を学べるようになっている。

WYSIWYG 化で失うもの

文書のポータビリティー

WYSIWYG の前提として、下書きする場所と最終的な出力をする場所が同じだということが挙げられる。でないと独自の装飾フォーマットが使えない。

Notion で書いた文書は Notion でしか読めないし、 Dropbox Paper で書いた文書は Dropbox Paper でしか読めない。 Markdown で書いたテーブルならほかのツールに取り込めるが、 Notion で書いたテーブルは Notion でしか使えない。入れ子にしたり装飾したりする便利な機能も Notion で使うからこそ約束されているものだ。その場所でしかその書き方はできない

だから、ローカルのお気に入りのテキストエディター( Vim など)で書いたあとにクリップボードにコピーしてブラウザーに貼り付ける、という使い方が出来なくなってしまう。

いまこの文書は Notion を使って書いているが、プレーンテキストでコピーできない2のでブログにこの記事を投稿するときは一旦 Markdown フォーマットで書き出して Vim で開き、コピーしてブラウザーのブログ記事入力欄にペーストする必要がある。

冒頭に挙げた Day One も Markdown で文章をコピーすることができなくなった。文書作成・管理プラットフォームとして考えたときにはこれは正しい戦略で、 Markdown ではない独自のフォーマットで文書を書かせることでユーザーをロックインできる。ひとたび Notion や Dropbox Paper に文章を書きため、その独自フォーマットに慣れてしまえば、データと記法の両方によってロックインされてしまうわけだ。

Notion や Dropbox Paper はよくできていると思う。特に Notion は WorkFlowy のようなアウトライナー的な側面を持ち、いわゆる「ファイルの壁」問題を解決しつつ Markdown のサポート、画像の埋め込みや表の挿入などにも対応している。良いなと思う反面、一人のインターネットユーザーとしては、オープンかつ自由なフォーマットで書くことができる Markdown がやっぱり好きだとも思う。


  1. 正確には Notion と Dropbox Paper と同じような、 Markdown と WYSIWYG がミックスされた独自フォーマット 

  2. macOS 版の Notion では Markdown 形式でコピーできたけど、 iOS 版ではできなかった 

| @Mac/iPhone

ApplicationIcon.175x175-75.png (175×175)

MacVim で Markdown 形式で文章を書いて Marked.app でプレビューしてた。 Marked.app 、便利なんだけどリストのネストの解釈が GitHub とかの Markdown と違ってて、スペース 4 つ入れないといけないのがだるかった。あとコードのシンタックスハイライトも GitHub のに比べたら弱い。やはり GitHub Flavored Markdown で Markdown をプレビューしたい。

ここを読めばやり方が書いてある。

GitHub Flavored Markdown と互換にしたいなら結局 GitHub が使っていると公言している redcarpet と pygments.rb (と Python の Pygments )がいることになる。 Docter というその辺の gem をラップする Node.js 製のソフトを使えと書かれているけどいらないものは入れたくなかったので gem install pygments.rb redcarpet するだけにとどめた。

rbenv とか rvm でインストールした Ruby のバージョンで gem をインストールして使おうとすると失敗するらしいのであまり気が進まなかったけど sudo つけてシステムルビーにインストールした。

そんでもって同じ URL に書いてある Docter の Docter/bin/github-flavored-markdown.rb at master · alampros/Docter をパクってちょっと改変してから使うことにした。これをテキトーな名前で保存して chmod a+x する。

なんか HTMLwithPygments#header は引数三つ受け取れるようにしてないとエラーになるっぽい。あと style は Marked で当たるのでここで当てる必要なさそう。

Marked.app 側の設定で Custom Markdown Processor にチェックを入れてファイルのパスを指定すればオッケー。

Marked.app でも GitHub Flavored Markdown に近いかたちで Markdown のプレビューができるようになるのでドキュメント大量生成するしかないですね。

| @技術/プログラミング

RailsアプリケーションでMarkdownを使いたと思った。(Markdown大好きっ子なので)

調べてみたところ、 BlueCloth というライブラリを使うといいらしい。

これはRailsのプラグインではないのでgemでインストール。

$ sudo gem install bluecloth

その後viewで

<%= markdwon(@item.text) %>

とか書けばいい。

しかしなんも設定しない状態だとRailsアプリケーションはBlueClothを読み込まないので、config/environment.rb

config.gem "bluecloth"

と書いてやる。するとめでたくMarkdownが使えるようになる。