*

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の共有機能を理解するための3つの軸、価値を引き出すためのマトリクス

1.WorkFlowyの共有機能を理解するための3つの軸 WorkFlowyには、共有機能があります

記事を読む

no image

WorkFlowyの文字数を数えるブックマークレット「WorkFlowy_WordCount」

1.WorkFlowyをまた少し「文章エディタ」へと育てる「WorkFlowy_WordCount」

記事を読む

no image

閲覧モードのブラッシュアップ(スムーズなスクロール・スリープ抑制)(HandyFlowy ver.1.1)

HandyFlowyは、iPhone・iPad用のWorkFlowy専用クライアントアプリです。 H

記事を読む

no image

WorkFlowyにKindleのURLを書いて、「読書ノート」を育てる

1.前提知識 (1) WorkFlowyに関する前提知識 a.WorkFlowyは、「読書ノート」と

記事を読む

no image

ハサミスクリプトは、何から、何を、切り取るのか?(変化し続けるWorkFlowyから暫定的な作品群を切り取るという、個人の知的生産システム)

1.ハサミスクリプト=WorkFlowyからExportしたOPMLをHTMLに変換するプログラム

記事を読む

no image

WorkFlowyで、「朝一番の自動書記」(by結城浩先生)をする

1.朝一番の自動書記 少し前、いつも読んでいる結城浩先生のブログに、「朝一番の自動書記 」が紹介さ

記事を読む

no image

アドオン「Stylish」で「WorkFlowy専用Firefox」に機能を追加する

1.「WorkFlowy専用Firefox」を、一段高いレベルに引き上げてくれたアドオン「Styli

記事を読む

no image

MemoFlowyバージョンアップのお知らせ(ver.1.1)

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

記事を読む

no image

「#ただしペーストは除く」から「#ただしペーストは1行のみ」へ/MemoFlowy ver.1.2の小さいけれど大きな一歩

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

記事を読む

no image

まずはここから!多機能なHandyFlowyの中で、使用頻度が高く、よい仕事をする、3つの地味機能

HandyFlowyは、iPhone・iPad用の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 ↑