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

1．三色ボールペンWorkFlowy

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

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

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

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

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

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

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

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

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

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

2．いただいた改善提案

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

@irodraw 早速真似してみました。素晴らしいです！自分は青=U、赤=U+I、緑=Bと割り当ててみました。赤は青の上位概念だし、UとIはキーが隣なので。なお緑が下線に乗ってしまう問題ですが、こんな解決策(画像)で如何でしょうか。 pic.twitter.com/avOuaGUHKK

— takasek (@takasek) 2015, 7月 26

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」による解決方法を示してくださいました。

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

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

@irodraw はい、お役に立てて何よりです！　緑ハイライトですが、昨日のは元々の記述が消せてなかった＆セミコロンの位置が間違っているので、こちらご使用ください。なお記述は「上部5%〜10%を透明→緑のグラデにする」という意味です。 pic.twitter.com/3oIxrMhy5C

— takasek (@takasek) 2015, 7月 27

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:」を少し書き換えました。

@irodraw 記事執筆お疲れ様です！噛み砕いた説明さすがです。技術的に気づいた点としては、
- rgbaのaの範囲は0〜1なので、白指定のaの値、1のほうがよさそう
- CSSは:not()を使うと綺麗に書けるかも（未検証ですが） http://t.co/bj0MXzSKo2

— takasek (@takasek) 2015, 7月 27

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