Porter for WorkFlowyユーザマニュアル

Porter for WorkFlowyはオンラインで使えるアウトライナーWorkFlowy の機能を拡張するGoogle Chrome拡張です。

/images/1tvO-cKqn96NB9braY843lQ.png インストール方法

ChromeでPorter for WorkFlowy を開いてインストールしてください。

機能

現時点(2016/02/26)の最新バージョン1.4の機能は以下の通りです。

  • テーマ機能
  • ブックマーク機能(V1.4 NEW!)
  • トピックナビ機能(V1.4 NEW!)
  • プレビュー機能(V1.4 NEW!)
  • エクスポート機能(Markdown/HTML)
  • 新規トピックウィンドウ作成機能
  • 文字数カウント機能

テーマ機能

あらかじめ組みこまれている「テーマ」を選ぶことで、WorkFlowyの見た目を変更することができます。

テーマ機能を使用するにはオプション画面を開きます。

/images/11H59lX4CzxutWTCLg6Rw4w.png テーマはPorterのデフォルトテーマに加えて、Workflowy themes and skins — userstyles.org で公開されている下記のテーマを選択することができます。

「追加するCSS」の横にある「エディタを表示」をクリックするとエディタが開き、追加のCSSを入力することができます。

テーマ適用後、WorkFlowyのタブをリロードするとテーマが有効になります。

ブックマーク機能

マウスカーソルを画面の右下へ移動させるとブックマークを管理するエリアが表示されます。

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

注意事項

V1.3ではWorkFlowyのキーボードショートカットのヘルプエリアへブックマークを表示していましたが、V1.4からは専用のエリアへ表示するように変更しました。

これにより、キーボードショットカットのヘルプとブックマークを併用することができます。

トピックナビ機能

トピックナビとは、表示中のトピックの最上位階層と、その下の階層にあるトピックを一覧する機能です。クリックするとそのトピックへ移動することができます。

トピックナビはマウスカーソルを画面の右下へ移動すると表示されます。

/images/1QoKOeJM3qNTeF3PC1RIwGw.png 注意事項

最上位レベルのトピックであっても、子要素を持たない場合、トピックナビでは表示されませんので、ご注意ください。

ブックマーク・トピックナビの表示スイッチ

画面の上にあるブックマークアイコンをクリックすると、ブックマークとトピックナビの表示・非表示を切り替えすることができます。

/images/1x10xdpkRW8RzMeJ6nVokmg.png プレビュー機能

表示しているトピックをHTMLへ変換し、プレビューすることができます。読みやすいスタイルで表示されるため、文書の推敲に便利な機能です。

/images/1epvghbaic5NJa-BWXzGbuw.png WorkFlowyを開いた状態でマウスの右ボタンをクリックすると表示されるコンテキストメニューで、[Porter for WorkFlowy] — [プレビュー」を選ぶと、WorkFlowyのタブでプレビューが表示されます。

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

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

見出しをクリックすれば直接WorkFlowyのトピックを開けるため、プレビューで見つけた誤字を修正したり、構成の見直しを素早く行うことができます。

エクスポート機能(Markdown/HTML)

Chromeのアドレスバーに表示されているアイコンをクリックすると、表示しているトピックをMarkdown、またはHTMLで出力することができます。

/images/15cH8JnyxUmEgpg8mFkMu2A.png

/images/1VFuH1hmWlIbv-CVEnSf32A.png Porter が生成するHTML

PorterではWorkFlowyのデータを一旦Markdownへ変換してから、marked というライブラリでHTMLに変換しています。

MarkedはGFM(GitHub Flavored Markdown) と呼ばれる、拡張されたMarkdowをサポートしているので、Porter単体でGFMからHTMLへ変換することができます。

Markdown(GFM)を意識した文書作成のポイント

段落

子トピックがいないトピックは段落として扱われます。

/images/1tglwNLonP1BRdEoZoMkTOA.png リスト

先頭が「*」または「+」または「-」で始まり、1つ以上のスペースがあるトピックは、リストとして出力されます。

トピックのレベル(インデント)でリストをネストすることができます。

/images/1eQYLZBrrOgw1eq_hnw_ZwA.png 番号付きリスト

先頭が数字で始まり、数字が続いた後にスペースがあるトピックは、リストとして出力されます。

/images/1iUpGf1boox7TOaP5P1cTUg.png 引用

先頭が「>」で始まるトピックは引用になります。

/images/1jdoksbOc2Kwl1MfcOQ6eHQ.png というトピックは、以下のようになります。

You can’t connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future.

Steve Jobs

テーブル

GFM構文でテーブルを記述できます。

/images/1WihPJfsLVMcNNkJP3sUPfA.png 行数が多い場合はノートに記述したほうがよいかもしれません。

その他のMarkdown記法

リンク

リンクしたいテキストを半角 [] で囲み、それに続く半角 () にリンク先URLを書くとリンクになります。

/images/1aAcrnJOcV1eLOIDvopcgeg.png と書くと以下のようになります。

ウェブ関連技術の標準化は World Wide Web Consortium (W3C) などによって行われています。

URLを記述するだけで自動的にリンクになります。http://namaraii.com/

画像

リンクと似ていますが、先頭を!で開始して、

/images/1laGG49zfggmGHW_iWOheXQ.png のように書くと画像の参照になります。

強調

強調したい文字を「*」で囲むと、強調になります。

さらに強い強調をしたい場合「**」で囲みます。

水平線

トピックの先頭から「*」か「-」を3つ以上書くと水平線になります。

取り消し線

「~」2個で囲んだ文字は取り消し線が設定されます。

コードの引用

先頭にチルダ3つ書き、後ろに対象シンタックスの言語名を記述します。

コードをはさみ最後をチルダ3つで閉じます。

/images/1LvxIzXk10a7QOAYbdHALYg.png と書くと、以下のようなHTMLが生成されます。

/images/1HhGCO9YYedkvy49nlkjnCQ.png トピックにも書けますが、コードはノートに書いたほうが良いと思います。

ノートの出力

エクスポート画面で「ノートを出力する」をチェックすると、WorkFlowyのトピックに書かれているノートを出力します。ノートは見出しにはならず、パラグラフとして出力されます。

目次の出力

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

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

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

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

新しいウィンドゥはタブやアドレスバーが無いシンプルな表示のため、フルスクリーン表示することで、文章作成に集中することができます。

文字数カウント機能

入力中のトピックの文字数を(ほぼ)リアルタイムに文字数をカウントすることができます。

/images/13utCFs6Mgy-3OLkl3Gql4A.png 画面上部の「文字数カウント」をクリックすると、文字数のカウントが開始します。カウント中にもう一度クリックするとカウントを停止します。


See also