はじめての「WorkFlowy」カスタマイズ【Windows・Mac編】

このブログ「いつもていねいに」を書いている 小田やかた です。
（プロフィール　@ottaka18）

最近、「WorkFlowy」を本格的に使い始めました。

「WorkFlowy」はシンプルなクラウドアウトライナーです。

設定画面で変更できるのはフォントくらいで、有料のPro版にアップグレードしてもテーマ（画面の背景）設定ができるのと、選べるフォントの種類が無料版より少し増える程度です。

でも、先達の方たちによって、WorkFlowyをより便利に使うためにさまざまなカスタマイズの方法が紹介されています。

その方たちが紹介してくれている内容を参考に、カスタマイズに必要そうなHTMLやCSSなどの知識にたいして詳しくない私でも、なんとか満足いくカスタマイズができました。

最近、本格的にWorkFlowyを使い始めた私ですが、このカスタマイズによって、随分、WorkFlowyの使い勝手がよくなりました。

そんな私が、実際にどういう手順で何を参考にカスタマイズをしたかご紹介することで、初めてWorkFlowyを使う方や、HTMLやCSSがよくわからずカスタマイズを敬遠されている方に少しでも参考にしていただければと思っています。

1. はじめに

WorkFlowyをカスタマイズするにあたり、多くの部分を「単純作業に心を込めて」を参考にさせていただきました。それは、詳細に説明がされているブログだから、という理由もありますが、WorkFlowyに対する考え方に共感する部分が多かったからです。

WorkFlowyは単なるアウトライナーのソフトウエアです。ただ、私にとってWorkFlowyは、今後、毎日使う、自分の知的生産活動のメインツールとしたいと思っていますし、継続して使っていきたいと思っています。

「単純作業に心を込めて」の運営者である彩郎さん（@irodraw）も同じ思いであることを感じました。

また、彩郎さん（@irodraw）が提唱してる「WorkFlowyの5原則」にも大いに共感していますし、共働きのワーキングパパがゆえの時間や空間、お金という制約があるにもかかわらず、それを規定条件と考え「個人の継続的な知的生産」に取り組む姿は、私の目指す方向性とも一致しています。よって、かなりの部分を参考にさせていただきました。

本記事は、WorkFlowyのカスタマイズを趣旨にしていますので、これ以上は言及しませんが、詳しくは、本ブログの次の記事又は著書を参考にしてください。

参考　【レビュー】『クラウド時代の思考ツールWorkFlowy入門』 – いつもていねいに

2. WorkFlowy（Windows・Mac）のカスタマイズ

WorkFlowyを使い始めるにあたって、まず私が実際に行ったWorkFlowy関連のカスタマイズや環境整備は次の6つです。

(1) WorkFlowy専用のブラウザとして「Firefox」を導入

これは、前述の著書にも紹介されていますが、WorkFlowyを使う専用ブラウザを「Firefox」にしました。

「Firefox」にすることで、WorkFlowyのスタイル（画面の表示）を変更できたり、ブックマークを常に表示できるなど、WorkFlowyをより便利に使う上で「Firefox」は最適なブラウザです。

Firefox のダウンロード — 自由な Web ブラウザ — Mozilla

というのは、WorkFlowyはトピックごとに固有のURLを持っていますので、これをブックマークに保存しておけば、すぐに目的のトピックにアクセスできます。

ですので、常にブックマークを表示できるブラウザはWorkFlowyを使う上では大変便利なのです。

参考　「WorkFlowy専用Firefox」によって、パソコンからのWorkFlowyを、さらに強力なツールに育て上げる（Windows&Mac）

(2) WorkFlowyのフォントの色、字体、余白などをカスタマイズ

Firefoxのアドオン「Stylish」を使い、次のカスタマイズを行いました。

Stylish – Custom themes for any website – Firefox 向けアドオン

「Stylish」をインストールした後、設定画面でCSSを書くことでブラウザに表示される見た目を変えることができます。

「Stylish」をインストールした後、どこにどのようにCSSを書けばよいのかは、こちらのサイトを参考にさせていただきました。

参考　Firefoxアドオン「Stylish」でWorkFlowyをブログエディタにする

実際に私が行ったカスタマイズは次のとおりです。

記述したCSSのコードは最後にまとめて紹介しています。

a. 「三色ボールペン方式」を取り入れたかったため下線やフォントを3色にした

私は10年以上前から明治大学の齋藤孝氏が提唱する「三色ボールペン方式」を愛用してきました。

三色ボールペン方式とは、簡単に言えば、本や資料を読むとき「おもしろい（主観）」ところに緑の線、「まあ大事（客観）」なところに青の線、「すごく大事（主観）」なところに赤の線を引くことです。私は文字を書くときもこの色分けで書いています。

私は、齋藤孝が言う「技化」していると言えるくらい無意識に使っていますが、それをWorkFlowyでも実践できることを次のブログの記事で知り、飛びつきました。

• WorkFlowyで「三色ボールペン方式」

• 続・WorkFlowyで「三色ボールペン方式」

• 改・WorkFlowyで「三色ボールペン方式」

WorkFlowyは、デフォルトの機能としてテキストを太字・下線・斜体と3種類の装飾ができます。それをFirefoxのアドオン「Stylish」でCSSのコードを記述ことにより、例えば、太字のテキストを赤色下線付のテキストとして表示させることができます。

私は、前述のブログとは異なりますが、次の設定にしました。

• 太字（テキストを選択してControl＋B）→選択したテキストに赤色の下線
• 下線（テキストを選択してControl＋U）→選択したテキストに青色の下線
• 斜体（テキストを選択してControl＋I ）→選択したテキストに緑色のマーカー

ちなみに、この設定は「はじめての「WorkFlowy」カスタマイズ【iPhone・iPad編】」で紹介した「MarkFlowy」というブックマークレットを使うことでiPhoneでも同じ色で表示させることができます。

b. noteを全文表示にした

WorkFlowyのデフォルトの設定では、トピックの下に表示されるnoteは、どれだけ行数があっても一行しか表示されません。

参考　noteを記載するショートカットキー：Shift ＋ Enter

このnoteの表示を全文表示させるようにしました。

この設定は次のブログの記事を参考にさせていただきました。

参考　R-style » Workflowyでnoteを全文表示にしてみた

c. ショートカットキー一覧を表示させるため余白の設定を変更した

WorkFlowyのショートカットキー一覧は、「command＋？」で表示させることができますが、デフォルトの設定だと、トピックの文字と重なってしまいます。

CSSの記述により余白を調整することで、重ならないようにすることができますので、常にショートカットキー一覧を表示させておいても邪魔になりません。

参考　「WorkFlowy専用Firefox」の余白を、アドオン「Stylish」で調整する

d. フォントを設定した

まだしっくりきていませんが、とりあえずフォントを変更しました。

e. 【参考】私が設定したCSSコード

前述のa〜dまでのCSSコードは次のとおりです。コピペして使っていただいても結構です。

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("workflowy.com") {

  #documentView{;font-family:"メイリオ",sans-serif;font-size:12pt}
  .page{margin:0 !important;padding:30px 50px 20px 220px;width:100%;max-width:100%;box-sizing:border-box}
  .corner, .edge{display:none}
  #pageContainer{margin-top:0}

/* 太字の色 */  
.contentBold {
font-weight: normal;
border-bottom: 2px #FF0000 solid;
color: #000000;
}  
/* 下線の色 */  
 .contentUnderline{
border-bottom: 2px #0000FF solid;
text-decoration:none;
}

/* 斜体の色 */
.contentItalic{
font-style: normal;
background: -moz-linear-gradient(top,
rgba(188, 245, 169, 0),
rgba(188, 245, 169, 0) 5%,
rgba(188, 245, 169, 1) 10%,
rgba(188, 245, 169, 1)
);
}
  
/* タグの色 */
.contentTag{
color: #3d170a !important;
}  

  /* ノートを全文表示に */
DIV.notes DIV.content {

  height: auto !important;

  overflow: visible !important;

}  
  
}

(3) 「トピック名＋URL」を取得するためのアドオン「Easy Copy」を導入

前述したとおりFirefoxは、ブックマークを左側のバーに固定しておくことができます。WorkFlowyはトピックごとにURLを持っていますので、そのトピックをブックマークに登録すれば、簡単に目的のトピックへ移動することができます。

さらに、WorkFlowyのトピック内にURLを書いてもリンクで移動することができます。

これによりWorkFlowy内を自由に飛び回ることができるようになります。

ただ、トピックのURLだけ見ても、どのトピックなのかわかりません。そこで、URLだけでなくトピック名も同時に取得できるFirefoxのアドオン「Easy Copy」を導入しました。

Easy Copy :: Add-ons for Firefox

アドオン「Easy Copy」は、デフォルトでは、次の2つのキーボードショートカットを持っています。

• Title Link：そのページのHTMLリンクを取得するもの：command＋Shift＋ｙ
• URL：そのページのページタイトルを取得するもの：command＋Shift＋u

このどちらかをカスタマイズして「ページタイトル（トピック名）＋URL」という形にすることができます。

私は次の記事を参考にしてカスタマイズしました。

参考　「WorkFlowy専用Firefox」を、アドオン「Easy Copy」で強化する

「【ページタイトル】ページのURL」は、「【%title%】%url%」となりますので、設定画面から、前述の「URL」をこれに変更しました。

これによりので、command＋Shift＋Uで、「【ページタイトル】ページのURL」を取得することができます。

(4) 素早く目的のトピックに移動するためにFirefoxのアドオン「ShortcutKey2URL」を導入

目的のトピック（URL）にショートカットキーで移動できるアドオンに「ShortcutKey2URL」があります。

ShortcutKey2URL – Firefox Extension

この「ShortcutKey2URL」は、あらかじめ設定した「起動キー」を押し、「URLに対応する任意のキー」を押すと、あらかじめ設定したURLを開くことができます。

これにより、よく使うページ（トピック）、例えばWorkFlowyのhome画面や特定のタグを検索した画面などに、素早くアクセスすることが可能になります。

設定方法は、こちらを参照いただければわかると思います。

ShortcutKey2URL – Firefox Extension

私は次のサイトを参考にさせていただき、起動キーを「Control＋ｊ」としました。

「WorkFlowy専用Firefox」で、キーボードからブックマークレットを動かす（ShortcutKey2URL）

⑸ 自動でブログ用のHTMLタグを付与する「ハサミスクリプト」を導入

a. Mac用

次の記事で紹介されている「ハサミスクリプト」を導入しました。

WorkFlowyからブログエントリをHTMLで切り取る。ハサミスクリプトirodrawEditionの導入方法と使い方（Mac）

このスクリプトは、WorkFlowyのトピックの階層レベルごにh1タグからh2、h3とレベルごとにタグ付けします。基本は各レベルはhタグで括られますが、その項目に子レベルがない場合はpタグで括られます。

使い方は、出力したいアウトラインのexportからopml形式を選び、そうすると文章全体が選択されている状態になっているので、コピー(command+c)します。

その後、次のサイトからダウンロードしたAppleScriptを実行するとクリップボードの中身がhタグ付きに変換されるので、エディタ（私はMarsEdit）へペースト(command+v)します。

WFtoHTML irodrawEdithionバージョンアップ（引用/Table機能追加）｜マロ。｜note

このAppleScriptの使い勝手のよいところが、

• Workflowyのnote部分は書き出さない
• 「ulリスト」又は「olリスト」と書かれたトピック以下の子要素はulタグ・olタグで囲まれる
• bq以下がblockquoteタグで囲まれる
• tb以下がtableタグで囲まれる

となるところです。

これは、彩郎さん（@irodraw）仕様で作られたAppleScriptのようですが、上で紹介したリンクから私も使わせていただいています。

b. Windows用

前述のAppleScriptはMac専用です。

Windowsの場合は、類似のブックマークレットがあり、私はMacBook Airの他にWindowsPCを持っていますが、いつでも同じ環境でブログを書きたいので、このブックマークレットを設定しておきました。

WorkFlowyのexportをブログ用のタグに変換するbookmarklet(引用を使う人向け)｜マロ。｜note

c. ハサミスクリプトファミリー

他にもたくさんのScriptがありますが、次のブログの記事で紹介されていますので、参照してください。

WorkFlowyをブログツールに。ハサミスクリプトファミリーの整理（Win＆Mac・HTML＆マークダウン＆はてな記法）

(6) 文字数をカウントするブックマークレットを導入

WorkFlowyの文字数をカウントしてくれるブックマークレットです。

参考

WorkFlowyの文字数を数えるブックマークレット「WorkFlowy_WordCount」

続・WorkFlowyの文字数を数える（WorkFlowyを「文章エディタ」へと育てる）

WorkFlowyの文字数カウントブックマークレット｜マロ。｜note

3. 今後、カスタマイズしてみたい内容

他にもまだまだカスタマイズしたいことがあります。

その1つが、Firefoxの2つのタグを１つの画面に表示できるアドオンです。

これにより、同じWorkFlowyですが、画面を分割して片方のWorkFlowyを見ながらもう片方のWorkFlowyに文章を書くという使い方ができます。

アドオン「Tile Tabs」で「WorkFlowy専用Firefox」を育てる

他にも気になるカスタマイズはたくさんあります。すべて彩郎さん（@irodraw）のブログで紹介されている内容ですが、もう少し余裕ができたら導入する予定です。

• WorkFlowyで、『「超」整理法』の時間軸検索原則を実現するため、検索条件「last-changed:」のURLをブックマーク
• ［[タイトルトピック本文](WorkFlowyのURL)］を、複数トピックを対象に、一挙に書き出すブックマークレット
• 最強のブログ原稿創造システム「WorkFlowy×ハサミスクリプト」に、画像機能を追加する方法

4. おわりに

WorkFlowyは、カスタマイズすることなくそのまま直感的に使える優れたアウトライナーですが、以上のカスタマイズで随分使い勝手が向上しました。

ただ、私は共働きの子育てパパのため、パソコンを前に落ち着いてWorkFlowyをさわる時間はそれほど多くありません。文章を書く大半は、iPhoneがメインです。

ですので、私の場合、iPhoneでいかにWorkFlowyを使いやすくするかが重要になります。iPhone版のWorkFlowyのカスタマイズは、本記事とは分けて書きましたので次を参照してください。

はじめての「WorkFlowy」カスタマイズ【iPhone・iPad編】

しかし、iPhoneのWorkFlowyの使い勝手はパソコンと比べるとまだまだだと思います。いずれリリースが予定されている「HandyFlowy」を期待するばかりです。

参考　【連載のまとめ】iPhoneからWorkFlowyを快適に使うための課題・課題を解消するための方策・MemoFlowyとHandyFlowy

この記事は以上です。

もし、少しでも参考になった内容があれば、下の「いいね」ボタンを押してください。励みになります！