改・WorkFlowyで「三色ボールペン方式」
公開日:
:
WorkFlowy
目次
1.三色ボールペンWorkFlowy
今、私のWorkFlowyは、「三色ボールペンWorkFlowy」です。
「三色ボールペン方式」とは、『三色ボールペンで読む日本語』で齋藤孝氏が提唱した読書の基本技です。本に線を引いたり書き込んだりする際、次のルールに従って、青・赤・緑の3色に色分けをします。
- 青:客観的にまあまあ重要
- 赤:客観的にとても重要
- 緑:主観的に面白い
「三色ボールペン方式」は、読書技法ですが、知的生産一般に応用可能です。たとえば、私は、Googleカレンダーに入力する予定を「三色ボールペン方式」で色分けしています。
WorkFlowyで作るKindle本の「読書ノート」の実例:『三色ボールペンで読む日本語』
「Stylish」というアドオンを使えば、この「三色ボールペン方式」をWorkFlowyで実現できます。「三色ボールペンWorkFlowy」です。
このことを、以下の2つの記事で書きました。
そうしたところ、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;
- }
- background: -moz-linear-gradient(top,
- .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;
- }
- background: -moz-linear-gradient(top,
- }
- .contentUnderline{
不要な行もあるかと思います。もっとエレガントに記述することもできるかと思います。ともあれ、とりあえずうまく機能しているので、これでよしとしています。
以下、ひとつひとつの説明です。
(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: -moz-linear-gradient(top,
「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;
- }
- background: -moz-linear-gradient(top,
ほしい表現は、赤線と緑ハイライトです。
赤線は、「.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専用Firefox」の説明
ブラウザから使うWorkFlowyを、専用アプリのようにするTipsが、「WorkFlowy専用Firefox」です。
「WorkFlowy専用Firefox」によって、パソコンからのWorkFlowyを、さらに強力なツールに育て上げる(Windows&Mac)
WorkFlowy×Stylish
「WorkFlowy専用Firefox」の余白を、アドオン「Stylish」で調整する
三色ボールペン方式
「三色ボールペン方式」の考え方や応用例
ToodledoとGoogleカレンダー以前のタスク管理・スケジュール管理を振り返る
『三色ボールペンで読む日本語』関係
WorkFlowyで作るKindle本の「読書ノート」の実例:『三色ボールペンで読む日本語』
三色ボールペン方式を取り入れると、なぜ、読書会の場は、創造的になるのか?
三色ボールペン方式×WorkFlowy
スポンサードリンク
関連記事
-
【連載】iOSからWorkFlowyを快適に使う(6) iPhoneからのWorkFlowyをもっと自由にするMemoFlowy&HandyFlowy
この連載では、iOSのWorkFlowy公式アプリが抱える次の7つの課題に取り組んできました(iOS
-
WorkFlowy基本5原則【第3原則】「アウトライン」を流動的に変化させ続ける
1.はじめに WorkFlowyは、他の道具にはあまり見られない特徴を持つ、ちょっと変わった道具で
-
WorkFlowyの共有機能の使い方と、知っておくと役に立つ知識
1.WorkFlowyの共有機能 WorkFlowyは、共有機能を持っています。自分のWorkFlo
-
KindleからWorkFlowyへの「入口」を拡張するツール「kindle highlight to WorkFlowy」
1年ちょっと前に妄想していたこれ。 彩郎版のKindleハイライト取得ブックマークレットを構想する
-
WorkFlowyのDropboxバックアップの基本
1.WorkFlowyのDropboxバックアップ機能 WorkFlowyには、Dropboxへのバ
-
【2015年の文章】WorkFlowyで文章を書き続けていたら、文章を書くことが、もっと好きになった
「文章を書く」ということは、私にとって、とても大切なことです。 2015年は、私にとって、「文章を書
-
進化を続けるMemoFlowyが獲得した3つの新機能(MemoFlowy Ver.1.5)
MemoFlowyはWorkFlowyへのテキスト入力に特化したメモアプリです。MemoFlowyを
-
WorkFlowyで、文章となる枠の外に混沌さを排出して、文章を書く
私のしつこいおすすめ活動の成果か、ウェブ経由ではない何人かの知り合いが、WorkFlowyを使い始め
-
「WorkFlowy専用Firefox」を、アドオン「Easy Copy」で強化する
0.概要 「WorkFlowy専用Firefox」で、WorkFlowy内にWorkFlowyのUR
-
WorkFlowyのタグの基本
1.WorkFlowyのタグ機能 WorkFlowyは、タグ機能を持っています。 WorkFlowy