WorkFlowyの魔改造によりコラムの横並べが可能

WorkFlowyは便利で機能的なんですけども、やっぱり気になることがありますよね。

そうです。この右側の広大なスペース。これだったらヨーロッパ大陸から移民がやってきて開拓できるんじゃないかってくらいスペースが空いちゃってます。にも関わらず、縦一列で表示できる項目の数はそれほど多くないので、全体的な俯瞰性はおせじにも高いとは言えません。

これをなんとかしたい……。そう思う有志がこの世界にはいたわけです。そこからハリウッド的な感動ストーリーが始まるのかどうかはわかりませんが、いろいろやると、以下のように表示させられます。

oh! fantastic!

このトリッキーな表示に興味があるのならば、続きをご覧ください。

必要なアドオン

ブラウザはFirefoxを使っている前提で話を進めます。たぶんChromeさんでも似たように進められると思います。

まず必要なアドオンを揃えましょう。二つあります。

一つは、「Stylish」。webページに自分好みのCSSを当てられるアドオンです。もう一つは、「Tampermonkey」。こちらはwebページで自分好みのスクリプト(javascript)を走らせられるアドオンです。この二つを組み合わせて、コラムの横並べを実現します。

まずはこの二つをインストールしておきましょう。

Stylishの設定

次に、Stylishの設定に入ります。

WorkFlowyのページを開きながら、Stylishのアドオンボタンをクリックし、「このサイト用のスタイルを探す」をポチッと。

そこで表示されるページから「WorkFlowy 2,3,4,5,6-columns!」を探してください。まあ、わかりやすい名前ですね。で、それをインストール。

ついでにもう一つ、「WorkFlowy Total Minimalist」というstyleもインストールしておきましょう。WorkFlowy 2,3,4,5,6-columns!の解説ページにもリンクがありますが、ようは→のページです。 https://userstyles.org/styles/132659/workflowy-total-minimalist

これで、Stylishの準備が整いました。ただし、これだけでは表示の仕方が設定されただけであり、アウトラインを動的に変更することはできません。それを担当するのが、Tampermonkeyです。

Tampermonkey

スクリプト、と聞いただけで情報免疫系が活発になって、目も耳も塞ぎたくなる方に朗報です。基本的にコピペだけでOKです。

まずは、以下のページにアクセス。

Different Fonts for Different WorkFlowy Outlines – WorkFlowy Blog

何が行われているのかというと、特定のハッシュタグがついた項目のフォントを動的に変えちゃう、というシステムの紹介です。で、これをさらにハックして、コラムの横並べをしてやろうじゃないか、というのが、「WorkFlowy 2,3,4,5,6-columns!」のスタイルを作った人たちの意図なわけです。マッドな意図ですね。

で、そのページの中程にTampermonkeyの説明があり、「you can find here.」というリンクがあるので、そこからGithubのページにジャンプしてください。できれば、上のページもご覧頂きたいのですが、せっかちな方のために直リンクも。

WorkflowyStylableTags_slim_version.js

ここで、右上の「Raw」ボタンを押せば、コピペ可能なプレーンテキストが表示されるので、それを全文コピペ。あとは、そのコードを、Tampermonkeyに追加すればOKです。

Tampermonkeyのボタン(ブラウザの右上に表示されているやつです)を押して、「新規スクリプトを追加」を選択。

上のような画面が表示されると思うので、もともと書いてあるコードを消してから、先ほどコピーしてきたスクリプトを貼り付けます。

あとは、保存でOKです。クラウド時代の新生児にはわかりにくいかもしれませんが、保存ボタンはフロッピーディスクのアイコンです。フロッピーディスクとは、携帯用の固形食料で、というのはまったくの嘘ですが、エディタのメニューの左から二番目のアイコンです。

これで準備が整いました。

実際の運用

一度、WokrFlowyのページを開き直してください。それでTampermonkeyのスクリプトが適用されるはずです。

上のように、「1」というマークが表示されていたら、1つのスクリプトが動いているよ、ということでOKサインです。さらにStylishで追加した二つのstyleが適用されていれば問題なし。こちらもStylishのボタンを押せば、適用されているスタイル名がチェックマーク付きで表示されるのですぐにわかります。

あとは、普通に項目を入力していき、横に並べたい(回り込みさせたい)項目の親の項目にハッシュタグをつけます。#cols-n というハッシュタグです。

#cols-6まで使えます。

さいごに

横に並べることで、圧倒的な俯瞰性を手にすることができ、「ああ、そうだ、我はこのUIを求めていたのだ」とご満悦な気分に浸れるのですが、こうしてしまうと、項目の移動に著しい制約がかかります。というか、コラム内の移動は自由なのですが、別のコラムへの移動は著しく困難です。というか、そのままの状態ではほぼ不可能といっていいでしょう。

まあ、これだけの魔改造をしているのですから、その程度の不便は甘受すべきです。もちろん、ハッシュタグを外せば、シュルリと元の一列に戻るので(これがなかなか軽快で楽しい)、その状態で移動させて、再びハッシュタグを付け戻す、というやり方はいつだって有効です。

上記を考慮すると、この横並べは作成の最中というよりも、アウトラインの移動がだいたい終わり全体をちょっと俯瞰してみたいな、とか、あるいはもう完成してしまって動かすことがないよ、という場合に使うのがFeel so goodなのでしょう。

ちなみに、私はこのシステムを非常に気に入っています。むしろこういうUIのアウトライナーが新しく来て欲しいくらいです。

▼こんな一冊も:

クラウド時代の思考ツールWorkFlowy入門 (OnDeck Books(NextPublishing))
インプレスR&D (2016-01-29)
売り上げランキング: 29,866
Related Posts with Thumbnails
Send to Kindle
Rashita
物書きをやっております。実用書から小説までなんでもござれのハイブリッド物書きです。 ライフハックや仕事術、知的生産などに興味があります。

1件のコメント

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です