川崎の工場夜景

川崎で工場夜景を撮ってきました。

工場夜景@川崎
photo by Hitoshi TAKEUCHI
Canon EOS 5D Mark II, 70.0 mm, f11.0, ISO 200, 4sec, 0EV, Adobe Photoshop Lightroom 6.2.1 (Macintosh)
generated by FlickURL

場所は東扇島、千鳥町周辺です。

工場夜景@川崎
photo by Hitoshi TAKEUCHI
Canon EOS 5D Mark II, 70.0 mm, f11.0, ISO 200, 6sec, 0EV, Adobe Photoshop Lightroom 6.2.1 (Macintosh)
generated by FlickURL

風光明媚な場所で撮る風景写真とは違って、人が少ないのが良いですね。

工場夜景@川崎
photo by Hitoshi TAKEUCHI
Canon EOS 5D Mark II, 180.0 mm, f11.0, ISO 200, 6sec, 0EV, Adobe Photoshop Lightroom 6.2.1 (Macintosh)
generated by FlickURL

が、あまり夜遅い時間だと人がいなすぎて怖いかも…

工場夜景@川崎
photo by Hitoshi TAKEUCHI
Canon EOS 5D Mark II, 105.0 mm, f9.0, ISO 200, 4sec, 0EV, Adobe Photoshop Lightroom 6.2.1 (Macintosh)
generated by FlickURL

工場の写真は昼とはまったく印象が異なり楽しいですね。SF映画のようなテイストになります。

工場夜景@川崎
photo by Hitoshi TAKEUCHI
Canon EOS 5D Mark II, 160.0 mm, f11.0, ISO 200, 6sec, 0EV, Adobe Photoshop Lightroom 6.2.1 (Macintosh)
generated by FlickURL

スポンサードリンク

トピックナビとブックマークの表示スイッチの追加(Porter for WorkFlowy)

オンラインで使えるアウトライナーWorkFlowy の機能を拡張するGoogle Chrome拡張Porter for WorkFlowy のバージョン1.4.1を公開しました。

Porter for WorkFlowy

V1.4でトピックナビとブックマークをサポートしましたが、文書作成に集中したいときに、表示がジャマになるケースがありますので、表示オンオフを切り替えられるようにしました。

Topic Navi

文字数カウンタの横にあるブックマークアイコンをクリックすると、トピックナビとブックマークの表示する・しないを切り替えることができます。

ダウンロードはこちらから どうぞ。

Porter for WorkFlowyの機能一覧はこちらを。

Porter for WorkFlowy 1.4をリリースしました(トピックナビとプレビュー機能の追加)

オンラインで使えるアウトライナーWorkFlowy の機能を拡張するGoogle Chrome拡張Porter for WorkFlowy のバージョン1.4を公開しました。

Porter for WorkFlowy

トピックナビ

トピックナビ機能とは表示中のトピックの最上位階層と、その下の階層にあるトピックを一覧する機能です。いわば、アウトラインのアウトラインですね。

Topic Navi

トピックナビはマウスカーソルを画面の右下へ移動すると表示され、一覧されているトピックをクリックすると、そのトピックへ遷移します。

おおきな(ボリュームのある)トピックでの見通しがよくなり、編集しやすくなると思います。

(注意)最上位レベルのトピックであっても、子要素を持たない場合、トピックナビでは表示されませんので、ご注意ください。(APIが公開されていないことによる限界です…)

ブックマーク

前バージョンのV1.3でブックマーク機能をサポートしましたが、V1.4ではWorkFlowyのキーボードショートカットヘルプを置き換えるのをやめ、専用のエリアへ表示するように変更しました。

Bookmark

トピック機能と同様に、マウスカーソルを画面の右下へ移動すると表示されます。

WorkFlowyのトピック専用のブックマークですので、Chromeの他のブックマークと混在することがありません。フォルダを作りブックマークを階層的に管理することもできます。

プレビュー機能

表示しているトピックをプレビューする機能をサポートしました。プレビュー専用のCSSを用意しましたので、より読みやすくなり推敲が捗ると思います。

PorterはMarkdown形式で画像リンクを記述できるため、プレビューでは画像も含めたトピックの全体像を確認することができます。

Preview

マウスの右ボタンをクリックすると表示されるコンテキストメニューで、[Porter for WorkFlowy] – [プレビュー]を選ぶと、プレビューが表示されます。

プレビュー中の各見出しには、対応するトピックへのリンクが設定されています。

見出しをクリックすれば直接WorkFlowyのトピックを開けるため、プレビューを見て修正しなくなったトピックへ素早く移動することができます。

ダウンロードはこちらから どうぞ。

Porter for WorkFlowyの機能一覧はこちらを。

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

考察

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

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

があると思います。

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

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

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

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

確認したいWFtoHTMLの仕様

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

おわりに

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

参照資料

Porter for WorkFlowy 1.3をリリースしました

オンラインで使えるアウトライナーWorkFlowy の機能を拡張するGoogle Chrome拡張Porter for WorkFlowy のバージョン1.3を公開しました。

Porter for WorkFlowy

バージョンアップの内容

ブックマーク機能

オプション画面の「一般」タブで「ブックマークを有効にする」をチェックすると、ブックマーク機能を使用できます。

WorkFlowyのトピック専用のブックマークですので、Chromeの他のブックマークと混在することがありません。フォルダを作りブックマークを階層的に管理することも可能です。

Bookmark

ブックマークはWorkFlowyのヘルプ画面(キーボードショートカットキーのヘルプ)を、ブックマーク表示エリアに置き換えて表示します。

このため、WorkFlowyのヘルプ画面と同じショートカットキー(Macは「⌘ + ?」Windowsは「Ctrl + ?」)で表示・非表示を切り替えることができます。

ブックマーク機能使用中は、WorkFlowyオリジナルのヘルプ画面を参照できなくなりますが、「ブックマークを有効にする」のチェックを外し、WorkFlowyをリロードすれば、オリジナルのヘルプ画面に戻ります。

目次出力機能

エクスポート画面で「目次を出力する」をチェックすると、この文書の冒頭にあるようなページ内の目次を出力できるようにしました。

目次出力はHTMLフォーマット時のみ有効です。

新規トピックウィンドウ作成機能

WorkFlowyを開いた状態でマウスの右ボタンをクリックすると、コンテキストメニューが表示されます。

[Porter for WorkFlowy] – [表示しているトピックを新しいウィンドゥで表示する]を選ぶと、表示しているトピックを新しいウインドウで開くことができます。

新しいウィンドゥはタブやアドレスバーが無いシンプルな画面です。この画面をフルスクリーンで表示すれば、WorkFlowy以外の情報が遮断され、文章作成に集中することができます。

細かな機能が増えてきたため、下記のページにまとめていくことにしました。併せてご覧ください。