アドオン「Stylish」で「WorkFlowy専用Firefox」に機能を追加する

1．「WorkFlowy専用Firefox」を、一段高いレベルに引き上げてくれたアドオン「Stylish」

私は、WorkFlowyを、「WorkFlowy専用Firefox」から使っています。

「WorkFlowy専用Firefox」は、用途をWorkFlowyに限定したFirefoxです。機能は普通のFirefoxそのものですが、用途がWorkFlowyだけに限定されています。

なぜ、こんなことをするかといえば、用途をWorkFlowyに限定することによって、WorkFlowyの使い勝手を上げることに特化したカスタマイズが簡単になるためです。Firefoxには、多くの先達によって、たくさんのカスタマイズノウハウや、いろいろなアドオンが蓄積されています。これら膨大な蓄積を、WorkFlowyの使い勝手を上げるという一点に集中できることが、「WorkFlowy専用Firefox」の唯一にして最大の強みです。

●

これまでに、私が「WorkFlowy専用Firefox」を強化するために実行してきたことは、いろいろあります。その中で、もっとも大きな進化をもたらしてくれた方策をひとつだけ選べと言われれば、答えは「アドオン「Stylish」の導入」です。

アドオン「Stylish」は、ウェブサイトの見た目を変えるアドオンです。その仕組みを大雑把に言えば、自分で設定したスタイルシートを、自分のブラウザの上でだけ、特定のウェブサイトにかける、というものです。

このような仕組みなので、ウェブサイトの見た目がCSSで制御されていさえすれば、CSSでできる範囲で自由に、見た目をカスタマイズできます。そして、昨今のウェブサービスの見た目は、ほぼすべてにわたって、CSSで制御されています。ということは、アドオン「Stylish」を使えば、かなり自由に、見た目を変えることができるわけです。

●

WorkFlowyも、その見た目はCSSで制御されています。フォントや行間や背景や余白などはもちろんのこと、段差やBulletなどアウトライナーの本質と切り離せない見た目も、noteやパンくずリストやタグなどWorkFlowyの機能と深く絡み合う見た目も、全部CSSです。

そのため、アドオン「Stylish」を使えば、WorkFlowyの見た目を好きなように変えることができます。この見た目の変化はあまりに根本的なので、ときに、「見た目」を変えることが、「新しい機能」を追加することと、ほぼイコールになるほどです。

アドオン「Stylish」は、「WorkFlowy専用Firefox」を、一段高いレベルに引き上げてくれます。ここでは、「WorkFlowy専用Firefox」に特化して、アドオン「Stylish」の具体例を説明します。

2．アドオン「Stylish」で、「WorkFlowy専用Firefox」は、こんなふうに育つ

アドオン「Stylish」を使うと、どんなことができるかの実例を、いくつか示します。

(1)　彩郎の「WorkFlowy専用Firefox」での実例

私がやっているのは、主に、次の3つです。

a．「三色ボールペンWorkFlowy」

ひとつめは、「三色ボールペンWorkFlowy」です。

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

齋藤孝氏が提唱する「三色ボールペン方式」を、WorkFlowyで実践するために作成しました。

• カスタマイズした見た目
  • 下線（青色下線へ）
  • 下線+斜体（赤色下線へ）
  • 太字（緑色ハイライトへ）
  • 斜体（赤色文字へ）
  • 斜体+太字（緑色文字へ）
• 追加された新機能
  • 三色ボールペン方式の塗り分け機能
  • ポイントは、次の3点
    • 赤＆緑、青＆緑が可能
    • 文字の色を赤・緑にすることも可能
    • 操作が簡単（Ctrl+U,I,B）

b．「フラットなWorkFlowy」

ふたつめは、「フラットなWorkFlowy」です。

アドオン「Stylish」による「推敲用WorkFlowy」（段差フラット＆bullet非表示）

アウトラインを一時的に忘れるために、作成しました。

• カスタマイズした見た目
  • WorkFlowyの段差（段差をなくしてフラットに）
  • WorkFlowyのBullet（Bulletを消して、リストではない見た目に）
• 追加された新機能
  • 段差を消すことで、アウトラインを一時的に忘れることができる
  • Bulletを消すことで、リストではなく、文章のような印象にすることができる
  • これらは、推敲に役に立つ

c．「プレゼン用WorkFlowy」

みっつめは、「プレゼン用WorkFlowy」です。

WorkFlowyをプレゼンツールとして使うことのメリット

WorkFlowyの画面をプロジェクタでスクリーンに映してプレゼンをする際、そのままだと文字が少し小さいため、文字サイズを大きくするために、作りました。

• カスタマイズした見た目
  • 文字サイズを大きく
  • 行間を広く
  • 余白をなくして左右を最大化
• 追加された新機能
  • スクリーンに表示したときに見やすい

(2)　先達の皆様方の活用例

アドオン「Stylish」によるWorkFlowyのカスタマイズには、先達がいらっしゃいます。先達の皆様方の活用例を紹介させていただきます。

a．あきさん

(a)　見た目をブログと近づけて、「自分のモノ」にする

Chrome拡張『Stylish』でWEBアプリを自分のモノにする – mmkns

私とアドオン「Stylish」の出会いは、この記事でした。

(b)　タグごとに色を変える

【WorkFlowyTips】Stylishでタグ名ごとに色を変える – mmkns

特定のタグの色を変えることもできます！　驚愕。

(b)　フォント

Firefoxでフォント「Ricty Diminished」が潰れる問題が解決 – snap of brain

フォントが潰れるというちょっとした問題の解消にも使えます。

b．倉下忠憲さん

(a)　note全文表示

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

見た目を変えることで、機能を追加する、という視点は、倉下忠憲さんのこの記事に教わりました。

noteを全文表示にして、エディタに近づけています。

(b)　ハイライト表示

WorkFlowyでハイライトを使えるようにカスタマイズする方法 | シゴタノ！

「三色ボールペンWorkFlowy」は、このTipsから生まれました。

c．Stylishの共有サイトで公開されているいろいろな使用例

アドオン「Stylish」には、ウェブサービスごとに、スタイル共有サイトが存在しています。

WorkFlowyのスタイル共有サイトは、以下のとおり。

Workflowy themes and skins – userstyles.org

ここをざーっとみると、アドオン「Stylish」で追加できる機能をイメージできるはずです。

3．アドオン「Stylish」でWorkFlowyのためのスタイルを作るには

アドオン「Stylish」を設定するには、CSSを作る必要があります。特にCSSを知らない方がはじめてやろうとすると、高いハードルを感じて怖気づいてしまうかもしれません。

でも、心配ありません。

まず、倉下忠憲さんによるシゴタノ！の次の記事は、丁寧で、詳しくて、わかりやすい解説です。これを読めば、どんな必要な作業の全体イメージがつかめます。

WorkFlowyでハイライトを使えるようにカスタマイズする方法 | シゴタノ！

次に、残る作業は、具体的なCSSの作成なのですが、これもそんなにむずかしくありません。理由は2つあります。

ひとつは、アドオン「Stylish」で作るスタイルは、自分のブラウザ上でのみ動くスタイルです。多少不格好でも、多少構文がおかしくても、多少エラーがあっても、自分のブラウザ上で見た目が変われば、それで問題はありません。

（このアドオンが変更するのは見た目だけです。なので、変なスタイルを適用してしまっても、それによってウェブサービスのデータが失われる、とかいうこともありません。この意味で、気楽です。）

そのため、Googleなどで検索しながら、適当に試行錯誤をくり返せば、だいたい目的を叶えるスタイルを作ることができます。

その上、世の中には、CSSを作ることを支援してくれる便利なツールが、たくさん存在しています。Firefoxなら「開発ツール」がこれにあたります。

開発ツール | MDN

「開発ツール」は、ウェブサイトの特定の箇所の見た目が、どんなCSSで制御されているのかを、ピンポイントで特定してくれます。「開発ツール」を使えば、CSSを書くことのむずかしさは、大きく下がります。

この「開発ツール」の存在が、理由のふたつめです。

「WorkFlowyのここがこんな見た目になれば、もっと便利なんだけどな」というニーズを感じている方は、よろしければ、アドオン「Stylish」によるカスタマイズにチャレンジしてみてください。きっと、WorkFlowyがもっともっと身近な「自分の道具」に育ちます。

お知らせ

このエントリは、その後、加筆修正などを経て、書籍『クラウド時代の思考ツールWorkFlowy入門』の一部分となりました。

書籍『クラウド時代の思考ツールWorkFlowy入門』の詳細目次と元エントリは、次のとおりです。

『クラウド時代の思考ツールWorkFlowy入門』の詳細目次と元記事の紹介