/ #workflowy 

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

目次

  1. はじめに
  2. WFtoHTMLとPorterのHTML出力仕様の違い
  3. 基本仕様
  4. WFtoHTMLの独自マークアップ仕様(★)
  5. Porterの独自マークアップ仕様
  6. 考察
  7. 確認したいWFtoHTMLの仕様
  8. おわりに
  9. 参照資料

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

はじめに

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

[](https://twitter.com/maro_draft/status/701550132777463808)

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の方が多い状況です。

考察

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

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

があると思います。

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

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

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

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

確認したいWFtoHTMLの仕様

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

おわりに

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

参照資料

Edit(Admin)