*

WorkFlowyを印刷用にカスタマイズする

公開日: : 最終更新日:2015/08/27 WorkFlowy

WorkFlowyを印刷用にカスタマイズする

1.「WorkFlowy専用Firefox」で、WorkFlowyのトピックを、文書のように、印刷する

WorkFlowyを使っていると、ときどき、トピックを印刷したくなることがあります。

たとえば、こんな用途です。

  • WorkFlowyで文章を書いているときに、自分が書いた文章を印刷し、紙で読み返すため
  • WorkFlowyで書いた議事録トピックの一部を印刷して、一緒にプロジェクトを進めている誰かに伝言メモとして渡すため
  • WorkFlowyで作ったプレゼントピックの上位階層を印刷し、レジュメとして配布するため

WorkFlowyは印刷機能を持っていますので、WorkFlowyのトピックを紙に印刷することはできます。でも、WorkFlowyの印刷機能にできるのは、トピックをリストとして印刷することだけです。印刷結果には、1行ごとに「●」(bullet)や、レベルに応じた段差がついてきます。

そのままWorkFlowyを印刷する

このWorkFlowy自身が用意しているリストのようなレイアウトは、WorkFlowyを印刷したい目的によっては、全然うまく機能しません。

  • 自分が書いた文章を読み返すためには、「●」や段差はむしろじゃまになる。「●」も段差もない、普通の文章のような見た目が望ましい。
  • 一緒にプロジェクトを進めている誰かに渡す伝言メモは、メモ作成者やメモの宛先が、レイアウト上、一見してそれと分かる場所に表現されていることが望ましい。
  • セミナーのレジュメには、それ相応の美しさが要求されるので、リストのようなレイアウトでは不十分。

つまり、WorkFlowyを印刷したいと思う多くの目的との関係では、WorkFlowy自身が用意している印刷レイアウトは、力不足です。

では、WorkFlowyのトピックを自由なレイアウトで印刷し、いろんな場面で活躍してもらうことは、諦めるしかないのでしょうか。

そんなことはありません。たしかに、WorkFlowy自身は、自由なレイアウトで印刷する機能を持っていません。しかし、「WorkFlowy専用Firefox」を使えば、驚くほど広い範囲で、WorkFlowyをカスタマイズできます。印刷レイアウトも、例外ではありません。

たとえば、「WorkFlowy専用Firefox」を印刷用にカスタマイズすれば、この記事の原稿トピックを、このように印刷できます。

印刷用WorkFlowyで印刷する

Firefox自体の印刷設定を調整し、ブックマークレットを登録し、アドオンを追加すれば、まるでWordから印刷した報告書のように、WorkFlowyのトピックを印刷できるのです。

印刷用にカスタマイズした「WorkFlowy専用Firefox」なら、WorkFlowy自身の印刷機能が用意する印刷レイアウトに制約されず、自由なレイアウトでWorkFlowyを印刷できます。この記事では、WorkFlowyを印刷用にカスタマイズすることの原理を説明します。

2.WorkFlowyを印刷用にカスタマイズする原理

WorkFlowyを印刷用にカスタマイズすることの原理は、次の3つです。

  • HTMLとCSSによって、印刷レイアウトを自由に創り出す
  • HTMLとCSSは、ブックマークレット&アドオンで準備する
    • HTMLは、WorkFlowyのトピックから、ハサミスクリプトで切り取る
    • CSSは、アドオン「Stylish」で、印刷用CSSをあらかじめ準備しておく
  • Firefox自体の印刷設定は、WorkFlowyだけに特化する

順に説明します。

(1) HTMLとCSSで、印刷レイアウトを自由に創り出す

もっとも基本となる発想は、HTMLとCSSで印刷レイアウトをコントロールする、ということです。

HTMLとCSSは、普通、ウェブブラウザで表示するウェブサイトの見た目をコントロールします。でも、HTMLとCSSの発想は、

  • HTMLで、文書内に存在する意味の構造を直接に記述する
  • CSSで、文書の意味構造との対応関係によって、見た目をコントロールする

ということ、つまり「文書の意味構造と見た目の分離」です。

この発想が通用する範囲は、なにもウェブブラウザから見るウェブサイトの見た目だけに限られません。プリンタで紙に印刷するときも、HTMLとCSSで印刷レイアウトをControlすることが可能なはずです。

実際、CSSは、「@media print」というものを用意しています。この記述以降に記載されたスタイルは、印刷するときにだけ、有効になります。

そこで、WorkFlowyのトピックから生成したHTMLに、印刷用に準備したCSSを適用すれば、自由なレイアウトで、WorkFlowyを印刷できるはずです。

(2) HTMLとCSSは、ブックマークレットとアドオンで準備する

では、この基本となる発想を、具体的には、どのような道筋で実現したらよいでしょうか。

結論からいえば、HTMLはハサミスクリプトで、CSSはアドオン「Stylish」で、準備します。

a.HTMLを準備する印刷用ハサミスクリプト

ハサミスクリプトは、WorkFlowyのトピックからHTMLを切り出すスクリプトです。ブックマークレット版とAppleScript版があり、HTMLの切り出し方にもいくつかのバージョンがあります。

ハサミスクリプトは、マロ。さんの知的生産の治具工房による作品です。今回、マロ。さんに、「WorkFlowyの印刷レイアウトをHTMLとCSSでコントロールできないだろうか」と相談をしたところ、マロ。さんが、WorkFlowyから印刷用のHTMLを切り出すハサミスクリプト(ブックマークレット)を、新たに作成してくださいました。

WorkFlowyから印刷用htmlを作るBookmarklet(暫定版公開)|マロ。|note

印刷用ハサミスクリプトを使うと、その時点で開いているWorkFlowyのトピックが、ウェブブラウザの別ウィンドウで、シンプルなHTMLページとして、開きます。

印刷用ハサミスクリプトでシンプルなHTMLを別ウィンドウに書き出す

これが、印刷用のHTMLです。

b.CSSを準備するアドオン「Stylish」

アドオン「Stylish」は、ウェブブラウザで表示しているウェブサイトに、自分で用意したCSSを適用するためのアドオンです。

アドオン「Stylish」を使えば、CSSでカスタマイズできる範囲であるかぎり、どのようにでも、ウェブサイトの見た目を変更できます。その範囲はとても広く、しばしば実質的には新しい機能を追加したのと変わらないほどです。

ところで、CSSは、印刷レイアウトも制御できるのでした。ということは、アドオン「Stylish」で印刷用のCSSを準備すれば、印刷レイアウトを自由に調整できます。

しかも、アドオン「Stylish」は、ワンクリックでCSSの適用・不適用を切り替えることができます。印刷用CSSを数パターン用意しておけば、その場にふさわしい印刷レイアウトに、一瞬できせかえ可能です。

このように、ハサミスクリプトによってWorkFlowyからHTMLを切り出し、アドオン「Stylish」によってCSSをきせかえすれば、WorkFlowyの印刷レイアウトを、かなり自由に制御できます。

(3) Firefox自体の印刷設定は、WorkFlowyだけに特化する

最後に、Firefox自体の印刷設定です。

Firefoxは、印刷設定メニューを持っています。また、印刷設定メニューに見つからない設定項目も、about:configをいじれば、かなり柔軟に設定可能です。

「WorkFlowy専用Firefox」から印刷する可能性があるのは、圧倒的にWorkFlowyです。そのため、Firefox自体の印刷設定も、WorkFlowyだけに特化してしまって、問題ありません。

では、どのような項目を設定すればよいでしょうか。

私は、

  • 余白
  • ヘッダー&フッター

を設定しました。

デフォルトの設定のままだと、余白は狭く、ヘッダー&フッターに余計な情報が多いため、違和感を感じていたためです。

具体的な設定方法は、別の記事で改めてまとめます。

3.おわりに

以上のとおり、

  • HTMLとCSSによって、印刷レイアウトを自由に創り出す
  • HTMLとCSSは、ブックマークレット&アドオンで準備する
    • HTMLは、WorkFlowyのトピックから、ハサミスクリプトで切り取る
    • CSSは、アドオン「Stylish」で、印刷用CSSをあらかじめ準備しておく
  • Firefox自体の印刷設定は、WorkFlowyだけに特化する

という3つによって、WorkFlowyを印刷用にカスタマイズできます。

この印刷用WorkFlowyなら、こんな感じで、報告書っぽく印刷することも可能です。

報告書スタイル

WorkFlowyを自由なレイアウトで印刷する道が開かれたことで、WorkFlowyが活躍できる幅が、また少し広がるのではないかと思います。

まずは、マロ。さんが公開する印刷用ハサミスクリプトをお試しください。ちなみに、iPhoneからも使えます。

WorkFlowyから印刷用htmlを作るBookmarklet(暫定版公開)|マロ。|note

スポンサードリンク

関連記事

no image

「アウトラインはひとつあれば十分だし、ひとつだけの方がむしろよい」というWorkFlowyの思想を肯定する。

1.WorkFlowyの思想は、「アウトラインはひとつあれば十分だし、ひとつだけの方がむしろよい」

記事を読む

no image

WorkFlowyについて語るときに僕の語ること

走ることについて正直に書くことは、僕という人間について(ある程度)正直に書くことでもあった。途中から

記事を読む

no image

「WorkFlowyで本を書いた人からの手紙」

1.はじめに こんにちは。少しずつ暖かくなってきましたが、いかがお過ごしでしょうか。 先日さし上げた

記事を読む

no image

WorkFlowyで文章群を書き続ける環境の一例(2016年7月1日段階)

1.はじめに このブログ記事を読みました。 WorkFlowyのPC環境、MemoFlowyアプリの

記事を読む

no image

WorkFlowyとタスク管理をつなぐ「最下層トピックを切り取ってフラットに並べるタスク管理版ハサミスクリプト」

1.「一番下の階層が揃うアウトライナー」からのTwitterにおける集合知 マロ。さんの知的生産の治

記事を読む

no image

【連載】iOSからWorkFlowyを快適に使う(4) iOSからの利用を、システム全体の中に位置づける。

WorkFlowyは、パソコンからならすごく使いやすいのですが、iPhoneなどのスマートフォンから

記事を読む

no image

【連載】WorkFlowyのテキスト入力に関するキー操作の基本(4) 削除(「文字単位の削除」と「トピック単位の削除」)

WorkFlowyは、テキストを階層構造で管理するシステムです。テキストをトピックに格納し、トピック

記事を読む

no image

WorkFlowyの「Star」の基本

1.WorkFlowyの「Star」 WorkFlowyには、「Star」という機能があります。「S

記事を読む

no image

【2015年の読書】WorkFlowyとKindleによる読書システムの進化とその影響

2015年12月になりました。2015年最後の1ヶ月です。 2015年も、いろいろなことがあった一年

記事を読む

no image

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

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

記事を読む

スポンサードリンク

スポンサードリンク

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 ↑