*

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

公開日: : WorkFlowy

1.三色ボールペンWorkFlowy

今、私のWorkFlowyは、「三色ボールペンWorkFlowy」です。

WorkFlowyで三色ボールペン方式

「三色ボールペン方式」とは、『三色ボールペンで読む日本語』で齋藤孝氏が提唱した読書の基本技です。本に線を引いたり書き込んだりする際、次のルールに従って、青・赤・緑の3色に色分けをします。

  • 青:客観的にまあまあ重要
  • 赤:客観的にとても重要
  • 緑:主観的に面白い

「三色ボールペン方式」は、読書技法ですが、知的生産一般に応用可能です。たとえば、私は、Googleカレンダーに入力する予定を「三色ボールペン方式」で色分けしています。

WorkFlowyで作るKindle本の「読書ノート」の実例:『三色ボールペンで読む日本語』

「Stylish」というアドオンを使えば、この「三色ボールペン方式」をWorkFlowyで実現できます。「三色ボールペンWorkFlowy」です。

このことを、以下の2つの記事で書きました。

そうしたところ、takasek(@takasek)さんが、Twitterでコメントを寄せてくださいました。takasek(@takasek)さんのコメントによるすばらしい2つの改善提案を受けて、「三色ボールペンWorkFlowy」は、また少し成長した気がします。感謝です。

そこで、少し成長した「三色ボールペンWorkFlowy」を、「改・WorkFlowyで「三色ボールペン方式」として、ここにまとめます。

2.いただいた改善提案

いただいたtakasek(@takasek)さんのTweetは、こちらです。

2つのことが含まれています。

  • 「三色ボールペン方式」の青線・赤線・緑ハイライトを、WorkFlowyの何に割り当てるか?
  • 緑ハイライトと下線が重なる問題の解決法

それぞれ説明します。

(1) 「三色ボールペン方式」の青線・赤線・緑ハイライトを、WorkFlowyの何に割り当てるか?

a.takasekさんのご提案と、その根拠

「三色ボールペン方式」の青線・赤線・緑ハイライトを、WorkFlowyの何に割り当てるかについて、takasekさんの提案は、次の組み合わせです。

  • 「三色ボールペン方式」の青線
    • WorkFlowyの下線
  • 「三色ボールペン方式」の赤線
    • WorkFlowyの下線+斜体
  • 「三色ボールペン方式」の緑ハイライト
    • WorkFlowyの太字

この根拠は、次の2つです。

  • 「三色ボールペン方式」の考え方からの根拠
    • 「三色ボールペン方式」では、青線(客観的にまあ重要)の上位概念が、赤線(客観的にとても重要)である。
    • 青線=下線、赤線=下線+斜体という割り当ては、青線の程度が上がったものが赤線、という両者の関係を反映しているので、「三色ボールペン方式」の考え方と合っている。
  • WorkFlowyの操作方法からの根拠
    • 前提として、下線はCtrl+Uで、斜体はCtrl+Iであり、UとIはキーボード上、隣に並んでいる。
    • なので、赤線のためには、Ctrlを押しながらUとIを連続して押せばよく、操作が簡単。

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

私は、この改善提案に深く納得し、さっそく真似させていただきました。

「青の上位概念が赤」というご指摘は、客観系統と主観系統の区別という「三色ボールペン方式」の基本思想に沿っており、すばらしいです。

また、青と赤は、「やっぱり赤」「やっぱり青」などと、青から赤へ、赤から青へ、という修正が多い2色であるところ、青=U、赤=U+Iという組み合わせなら、この往復が簡単であるところも、ポイントが高いです。

(2) 緑ハイライトと下線が重なる問題の解決法

a.takasekさんのご提案

緑ハイライトが上の行の下線と重なる問題について、takasekさんは、「background: -moz-linear-gradient」による解決方法を示してくださいました。

あんまり分かっていないのですが、教えていただいたとおりに記述したところ、うまくいきました。

なんでも、グラデーションを指定しているとのことです。

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

もちろん即採用です。

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

(1) 今のスタイル

と、いうわけで、「続・WorkFlowyで「三色ボールペン方式」」でもやっていた赤色文字・緑色文字も使えるバージョンに、takasekさんによる2つの改善提案を取り入れて、スタイルを書き直しました。

改・三色ボールペン方式

今の「三色ボールペンWorkFlowy」のスタイルは、次のとおりです。

  • @-moz-document domain(“workflowy.com”) {
    • .contentUnderline{
      • border-bottom: 2px #0000FF solid;
      • text-decoration:none;
      • }
    • .contentUnderline.contentItalic{
      • border-bottom: 2px #FF0000 solid;
      • color: #000000;
      • }
    • .contentBold {
      • font-weight: 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)
        • );
      • }
    • .contentItalic{
      • font-style: normal;
      • color: #FF0000;
      • }
    • .contentBold.contentItalic {
      • background: -moz-linear-gradient(top,
        • rgba(255, 255, 255, 1),
        • rgba(255, 255, 255, 1) 5%,
        • rgba(255, 255, 255, 1) 10%,
        • rgba(255, 255, 255, 1)
        • );
      • color: #04B404;
      • }
    • .contentUnderline.contentItalic.contentBold{
      • 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)
        • );
      • color: #000000;
      • }
    • }

不要な行もあるかと思います。もっとエレガントに記述することもできるかと思います。ともあれ、とりあえずうまく機能しているので、これでよしとしています。

以下、ひとつひとつの説明です。

(2) 説明

a.基本の三色(青線・赤線・緑ハイライト)

(a) 青線

  • .contentUnderline{
    • border-bottom: 2px #0000FF solid;
    • text-decoration:none;
    • }

「border-bottom: 2px #0000FF solid;」で青線を引きます。

「text-decoration:none;」で下線を消します。

(b) 赤線

  • .contentUnderline.contentItalic{
    • border-bottom: 2px #FF0000 solid;
    • color: #000000;
    • }

「border-bottom: 2px #FF0000 solid;」で赤線を引きます。

「color: #000000;」で、文字色を黒にします。「.contentItalic」で赤色にしてあるので、もとに戻すわけです。

「font-style: normal;」は、「.contentItalic」ですでに解除してあるので、書きません。

「text-decoration:none;」は、「.contentUnderline」ですでに解除してあるので、書きません。

(c) 緑ハイライト

  • .contentBold {
    • font-weight: 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)
      • );
    • }

「font-weight: normal;」で、太字を解除します。

「background:」で、背景にグラデーションを設定します。

b.赤色文字・緑色文字

(a) 赤色文字

  • .contentItalic{
    • font-style: normal;
    • color: #FF0000;
    • }

「font-style: normal;」で、斜体を解除します。

「color: #FF0000;」で、文字色を赤色にします。なお、このため、先ほどの「.contentUnderline.contentItalic」で文字色を黒に戻す必要があります。

(b) 緑色文字

  • .contentBold.contentItalic {
    • background: -moz-linear-gradient(top,
      • rgba(255, 255, 255, 1),
      • rgba(255, 255, 255, 1) 5%,
      • rgba(255, 255, 255, 1) 10%,
      • rgba(255, 255, 255, 1)
      • );
    • color: #04B404;
    • }

「background: 」で背景を白にします。「.contentBold」で設定した背景を解除しているわけです。

なお、こんな記述じゃなくてもいい気がしますが、よくわからないので、こうしてあります。

「color: #04B404;」で、文字色を緑にしています。

c.青線+緑ハイライト、赤線+緑ハイライト

(a) 青線+緑ハイライト(客観的にまあ重要で、主観的に面白い)

「.contentUnderline.contentBold」

単純に、「.contentUnderline」と「.contentBold」が重畳的に適用されればよいので、特に記述する必要はありません。

(b) 赤線+緑ハイライト(客観的にとても重要で、主観的に面白い)

  • .contentUnderline.contentItalic.contentBold{
    • 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)
      • );
    • color: #000000;
    • }

ほしい表現は、赤線と緑ハイライトです。

赤線は、「.contentUnderline.contentItalic」の設定が生きていますので、何も記述しなくてもよいです。

緑ハイライトは、「.contentBold.contentItalic」で背景を白にしてしまっていますので、「background:」で、改めてグラデーションを設定します。

また、「.contentBold.contentItalic」で文字色が緑になっていますので、「color: #000000」で改めて文字色を黒に戻します。

4.「三色ボールペンWorkFlowy」は、「三色ボールペン方式」のための、最も優れたデジタルツール

私は、「三色ボールペン方式」を愛用しています。齋藤孝氏も繰り返すように、「三色ボールペン方式」は、知的生産の基本技です。日々使いこむことで、3色の色分けという具体的な行為が、客観系統と主観系統の区別という高度な知的作用と結びつきます。

「三色ボールペン方式」を技として使い込むには、道具が大切です。アナログにおいては、「三色ボールペン方式」を実践するための道具として、三色ボールペンが存在しています。ところが、デジタルにおいては、これまで、「三色ボールペン方式」を実践するのに適した道具が存在していませんでした。

「三色ボールペン方式」を実践するためには、少なくとも次の3つの条件を満たす必要があるのですが、この3つを兼ね備えたデジタルツールが見当たらなかったためです。

  • ごく簡単な操作で、赤・青・緑の色分けができる。
  • 赤+緑、青+緑という重ね塗りができる。
  • 文字を、客観系統と主観系統で色分けして、書き込むことができる。

たとえば、パソコンやiOS版のKindleアプリには、3色を含む複数色ハイライトの機能があります。でも、Kindleアプリの色分けは、次の理由で、「三色ボールペン方式」を実践することができません。

  • 赤・青・緑の色分けの操作が、少し面倒。
  • 同じ場所に2色を塗ることができない。赤or青or緑。
  • 書き込む文字を色分けすることができない。

これに対して、今回、アドオン「Stylish」で実現した「三色ボールペンWorkFlowy」は、この3つを満たしています。

  • キーボードからの簡単な操作で、赤・青・緑の色分けが可能。
  • 同じ場所に、赤+緑、青+緑という重ね塗りができる。
  • 文字を、赤色と緑色という客観系統と主観系統で色分けをして、書き込むことができる。

「三色ボールペンWorkFlowy」は、「三色ボールペン方式」という知的生産の基本技を、デジタルツールに活用する道を開くTipsです。

「三色ボールペン方式」の愛用者の方も、そうでない方も、よろしければ、一度お試しください。

【2015/07/27 追記】

@takasek さんから重ねてアドバイスをいただき、「background:」を少し書き換えました。

「:not()」を使ってきれいに書く方法も、考えてみたいです。

【関連】

WorkFlowy

WorkFlowyの説明

WorkFlowyの丁寧な説明

「WorkFlowy専用Firefox」の説明

ブラウザから使うWorkFlowyを、専用アプリのようにするTipsが、「WorkFlowy専用Firefox」です。

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

WorkFlowy×Stylish

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

三色ボールペン方式

「三色ボールペン方式」の考え方や応用例

三色ボールペン方式で読書会を運営する方法を構想する

ToodledoとGoogleカレンダー以前のタスク管理・スケジュール管理を振り返る

『三色ボールペンで読む日本語』関係

WorkFlowyで作るKindle本の「読書ノート」の実例:『三色ボールペンで読む日本語』

三色ボールペン方式を取り入れると、なぜ、読書会の場は、創造的になるのか?

三色ボールペン方式×WorkFlowy

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

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

スポンサードリンク

関連記事

no image

【連載】iOSからWorkFlowyを快適に使う(6) iPhoneからのWorkFlowyをもっと自由にするMemoFlowy&HandyFlowy

この連載では、iOSのWorkFlowy公式アプリが抱える次の7つの課題に取り組んできました(iOS

記事を読む

no image

WorkFlowy基本5原則【第3原則】「アウトライン」を流動的に変化させ続ける

1.はじめに WorkFlowyは、他の道具にはあまり見られない特徴を持つ、ちょっと変わった道具で

記事を読む

no image

WorkFlowyの共有機能の使い方と、知っておくと役に立つ知識

1.WorkFlowyの共有機能 WorkFlowyは、共有機能を持っています。自分のWorkFlo

記事を読む

no image

KindleからWorkFlowyへの「入口」を拡張するツール「kindle highlight to WorkFlowy」

1年ちょっと前に妄想していたこれ。 彩郎版のKindleハイライト取得ブックマークレットを構想する

記事を読む

no image

WorkFlowyのDropboxバックアップの基本

1.WorkFlowyのDropboxバックアップ機能 WorkFlowyには、Dropboxへのバ

記事を読む

no image

【2015年の文章】WorkFlowyで文章を書き続けていたら、文章を書くことが、もっと好きになった

「文章を書く」ということは、私にとって、とても大切なことです。 2015年は、私にとって、「文章を書

記事を読む

no image

進化を続けるMemoFlowyが獲得した3つの新機能(MemoFlowy Ver.1.5)

MemoFlowyはWorkFlowyへのテキスト入力に特化したメモアプリです。MemoFlowyを

記事を読む

no image

WorkFlowyで、文章となる枠の外に混沌さを排出して、文章を書く

私のしつこいおすすめ活動の成果か、ウェブ経由ではない何人かの知り合いが、WorkFlowyを使い始め

記事を読む

no image

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

0.概要 「WorkFlowy専用Firefox」で、WorkFlowy内にWorkFlowyのUR

記事を読む

no image

WorkFlowyのタグの基本

1.WorkFlowyのタグ機能 WorkFlowyは、タグ機能を持っています。 WorkFlowy

記事を読む

スポンサードリンク

スポンサードリンク

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 ↑