*

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

公開日: : 最終更新日:2016/05/05 WorkFlowy

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で「三色ボールペン方式」

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

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

b.「フラットなWorkFlowy」

推敲用WorkFlowy。フラットでbulletなし。

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

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

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

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

c.「プレゼン用WorkFlowy」

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入門』の詳細目次と元記事の紹介

スポンサードリンク

関連記事

no image

WorkFlowyの「トピック」とは何か?

1.WorkFlowyは、「トピック」に、どんな情報を与えているのか? (1) 「トピック」という入

記事を読む

no image

WorkFlowy×ハサミスクリプトを支えるふたつの思想

1.WorkFlowy×ハサミスクリプト 私がブログ原稿を書くために使っているツールは、WorkFl

記事を読む

no image

彩郎流二毛作。知的生産の治具マクロ「WFtoMSWD.dot」で、Word文書作成プロセスから得る収穫を倍にする。

1.マロ。さんの知的生産の治具工房による新作Wordマクロ「WFtoMSWD.dot」 マロ。さんの

記事を読む

no image

WorkFlowyのZoom機能の基本

1.WorkFlowyのZoom機能とは (1) 基本概念 WorkFlowyは、Zoom機能を持っ

記事を読む

no image

WorkFlowyをプレゼン資料として使ってみたことの報告(前編:初回の課題を解消するための試行錯誤)

1.はじめに 数ヶ月前、私は、「WorkFlowyの画面をプロジェクタでスクリーンに投影すれば、それ

記事を読む

no image

WorkFlowyを「テキスト管理システム」と捉えて、WorkFlowyから大きな価値を引き出す

1.WorkFlowyは、テキスト管理システム 少し前、こんな文章を書きました。 「WorkFlow

記事を読む

no image

スマートフォンを機種変更した場合の、HandyFlowyとMemoFlowy(少しおまけにWorkFlowy)

先日(2017-01-28)、スマートフォンを機種変更しました。 機種変更前がiPhone5cで、機

記事を読む

no image

WorkFlowyでセミナーをやってみたことの報告(課題・可能性・今後の展望)

1.WorkFlowyでセミナーをやってみた (1) 「朝一番の自動書記」での思いつきをTwitte

記事を読む

no image

MemoFlowy ver.1.2のまとめと、HandyFlowyとMemoFlowyの相乗効果

1.MemoFlowy ver.1.2のまとめ MemoFlowy ver.1.2の内容を連載形式で

記事を読む

no image

WorkFlowyを、赤坂シナモンの地下迷宮みたいにしたい(その1)

1.『ねじまき鳥クロニクル』赤坂シナモンが統べるコンピューターの地下迷宮 『ねじまき鳥クロニクル』の

記事を読む

スポンサードリンク

スポンサードリンク

no image
お待たせしました! オフライン対応&起動高速化のHandyFlowy Ver.1.5(iOS)

お待たせしました! なんと、ついに、できちゃいました。オフライン対応&

no image
「ハサミスクリプト for MarsEdit irodrawEdition」をキーボードから使うための導入準備(Mac)

諸事情により、Macの環境を再度設定しています。 ブログ関係の最重要は

no image
AI・BI・PI・BC

AI 『〈インターネット〉の次に来るもの 未来を決める12の法則』を読

no image
[『サピエンス全史』を起点に考える]「それは、サピエンス全体に存在する協力を増やすか?」という評価基準

1.「社会派」に対する私の不信感 (1) 「実存派」と「社会派」 哲学

no image
[『サピエンス全史』を起点に考える]サピエンス全体に存在する協力の量と質は、どのように増えていくのか?

『サピエンス全史』は、大勢で柔軟に協力することがサピエンスの強みだと指

→もっと見る

  • irodraw
    彩郎 @irodraw 
    子育てに没頭中のサラリーマンです。1980年代生まれ、愛知県在住。 好きなことは、子育て、読書、ブログ、家事、デジタルツールいじり。
    このブログは、毎日の暮らしに彩りを加えるために、どんな知恵や情報やデジタルツールがどのように役に立つのか、私が、いろいろと試行錯誤した過程と結果を、形にして発信して蓄積する場です。
    連絡先:irodrawあっとまーくtjsg-kokoro.com

    feedlyへの登録はこちら
    follow us in feedly

    RSSはこちら

    Google+ページ

    Facebookページ

PAGE TOP ↑