画像にキャプションを表示させるようにした。 img 要素には alt 属性を細かく入れていたので alt の内容を抜き出して figcaption として表示させるようにした。やり方はまるっきり r7kamura さんの手法 を真似した。
昔の記事はレイアウトが壊れているかもしれないけど気にしないことにする。
Blog Hacks 2020
先日 secondlife さんのブログについて触れたが、最近は r7kamura さんも頻繁にブログを書かれるようになった。
ブログハック的な記事を良く書かれていて読むのが楽しい。特に画像にキャプションを入れる手法が参考になった。
Markdown のパース & HTML への変換を Markdown パーサー任せにするのではなく、 html-pipeline.gem を使って良い感じに挟み込みたい処理を入れているようだ。
このブログでも結構ごちゃごちゃやっている。例えばコードスニペットのシンタックスハイライトがそうだ。 Markdown から HTML にしたあと Nokogiri で HTML を読み込んで解析し、コードスニペットをハイライトされた <code> ブロックに置換している。
これに加えて OGP 読み込み君も存在しているし、 Amazon Associate のタグを読み込んでアフィリエイトリンクに置換するための処理も存在している。
いまのところそれぞれ処理を Lokka プラグインとして実装しているので一つ一つが独立して動く必要があり、 Nokogiri による HTML の解析回数が無駄になっている。 r7kamura さん方式で、ルールだけそれぞれのモジュールで定義して、 HTML の解析と置換処理は 1 回で済むようにするのが効率的だと思う。
2010 年以降も自前でブログを運用してハックの様子をシェアしてくれている hail2u.net や lowreal.net はとても参考にしているし、勝手に同志のような感覚を抱いていた。自分も細々と頑張ってはいたが、ながしまきょうさん、 cho45 さんのほかには同じようにブログの運用に情熱を持っている人を見つけられなくて少しさみしい気持ちがしていたところ、 secondlife さんや r7kamura さんが加わってきて盛り上がってきた。 Blog Hacks 2020 の様相を呈してきている。
プレーンテキスト Markdown 時代の終焉
なぜ 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 化したような感じで、文章を並べ替えたり入れ子にしたりできる。
文章を構造化することに慣れていない人でも、まぁまぁ読みやすい構造化された文章を書ける、あるいは構造化された文章の書き方を学べるようになっている。
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 がやっぱり好きだとも思う。
Marked.app で GitHub Flavored Markdown を使う
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を使う
RailsアプリケーションでMarkdownを使いたと思った。（Markdown大好きっ子なので）
調べてみたところ、 BlueCloth というライブラリを使うといいらしい。
これはRailsのプラグインではないのでgemでインストール。
$ sudo gem install blueclothその後viewで
<%= markdwon(@item.text) %>とか書けばいい。
しかしなんも設定しない状態だとRailsアプリケーションはBlueClothを読み込まないので、config/environment.rb に
config.gem "bluecloth"と書いてやる。するとめでたくMarkdownが使えるようになる。