WorkFlowyから出力するHTMLの仕様に関する考察

WorkFlowyから出力するHTML仕様に関する考察

はじめに

twitterでマロ。さんから、WorkFlowyから出力するHTMLについて、WFtoHTMLとPorterで仕様を合わせませんか？という提案をいただきました。

PorterのHTML出力ルールは自分自身が使いやすい仕様で、独自に設計しましたが、WorkFlowyからHTMLを生成するツールが複数あり、それぞれで出力仕様が異なるというのは、ユーザから見て好ましい状況ではありません。

このため、共通仕様に向けた検討をしてみます。ほぼ私信かもしれません。（WFtoHTMLの仕様に間違いがあれば、コメントください＞マロ。さん）

WFtoHTMLとPorterのHTML出力仕様の違い

基本仕様

WFtoHTMLの基本的なHTML出力は下記の仕様を前提としています。

選択したレベルを基準にh1タグからh2、h3とレベルごとにタグ付けする。
基本として各レベルはhタグで括られるが、その項目に子レベルがない場合は本文として扱いpタグで括られる。
Workflowyのnote部分は書き出さない。

これらはPorterも同じ仕様（オプションでnoteも出力できますが）であり、大枠では問題ありません。

このため、双方で仕様をすりあわせすべきなのは、それぞれが採用している独自のマークアップ部分ということになります。

WFtoHTMLの独自マークアップ仕様（★）

以下にWFtoHTMLの独自マークアップと、対応するPorterでの書き方をまとめます。

要素WFtoHTMLの独自マークアップPorterでの書き方リスト「ulリスト」「olリスト」と書いたトピック以下の子要素はulタグ・olタグで囲まれる先頭が「*」または「+」または「-」で始まり、1つ以上のスペースがあるトピックは、リストとして出力される。
「数字.」で始まり1つ以上のスペースがあるトピックは番号付きリスト。
トピックのレベル（インデント）でリストをネストすることができる引用「bq」以下がblockquoteタグで囲まれる。citeも記述可能先頭が「＞」で始まるトピックは引用になる
citeは未サポートテーブルtb以下がtableタグで囲まれる。配下のトピックが各行の1列名になり、その配下のトピックが行を構成する列になるhttps://help.github.com/articles/organizing-information-with-tables/HTMLタグそのまま出力されるそのまま出力される

Porterの独自マークアップ仕様

Porterでは内部的に一旦Markdownに変換してからHTMLへ変換しています。HTMLへの変換はMarkedというMarkdownパーサーを使っており、例えば以下のような書き方もサポートしています。

リンクしたいテキストを［］で囲み、それに続く（）の中へURLを書くとリンクになる。
強調したい文字を「＊」で囲むと、強調になる。さらに強い強調をしたい場合「＊＊」で囲む。
トピックの先頭から「＊」か「－」を3つ以上書くと水平線になる。

この他にもサポートしている記法があり、マークアップのバリエーションはPorterの方が多い状況です。

考察

以上を踏まえると、仕様をすりあわせるためのアプローチとして、

Porterだけでサポートしている記法を削りWFtoHTMLと共通化する
WFtoHTMLへPorterだけでサポートしている記法を取りこむ
WFtoHTMLの独自マークアップ記法（★）に該当する部分に限定して、双方で互換性を持たせる

があると思います。

案1はPorterの設計をガラポンで見直しする必要があることと、個人的に困る（使っている記法があるため）ことから「×」

案2はWFtoHTMLがブックマークレットで作成されているため、PorterがサポートしているMarkdownチックな記法を全て取りこむのは（ブックマークレットという性質上）難しそうなので「△」

ということで、案3かなぁと考えていますがいかがでしょう？＞マロ。さん

WFtoHTML側での対応が難しいということであれば（特にテーブルが難しそう）、PorterへWFtoHTMLの独自記法を取りこむだけでもメリットはありそうです。（ユーザ数はWFtoHTMLの方が圧倒的に多いでしょうから）

確認したいWFtoHTMLの仕様

リストをネストすることはできるのか？
テーブル出力時THタグを出力する方法はあるか？

おわりに

以上、現時点で思いつく範囲で仕様の差異と、今後の進め方の案をまとめてみました。これをたたき台として、仕様をすりあわせできればと考えてます。

参照資料

workflowy