iPhoneからWorkFlowyを報告書っぽいレイアウトで印刷する（印刷用ハサミスクリプト暫定版の紹介）

1．印刷用ハサミスクリプトが、暫定版として、公開されました

先日、WorkFlowyで書いたトピックを、アウトラインっぽくないレイアウトで印刷する方法を、ご紹介しました。

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

その後、マロ。さんが、「WorkFlowyから印刷用htmlを作るBookmarklet」の暫定版を公開してくださいました。

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

このブックマークレットを使えば、上の記事で説明したとおり、パソコンの「WorkFlowy専用Firefox」からの印刷レイアウトを柔軟に調整することができます。

その上、このブックマークレットは、iPhoneからの印刷も助けてくれます。iPhoneから、WorkFlowyのトピックを、報告書っぽいレイアウトで、印刷することができるのです。

以下、このブックマークレットを使って、iPhoneからWorkFlowyのトピックを報告書っぽく印刷する方法を説明します。

2．事前準備

事前準備として、

• iPhoneとWi-Fiプリンタをつなぐ
• 印刷用ハサミスクリプトブックマークレットをiPhoneのブラウザに登録する

の2つを行います。

(1)　iPhoneとWi-Fiプリンタをつなぐ

Wi-Fiに対応しているプリンタなら、iPhoneから写真やPDFなどを印刷することができます。AirPrintというAppleの技術に対応しているプリンタなら、とても簡単です。AirPrintに対応していないWi-Fiプリンタでも、それほど難しくはありません。

a．AirPrint対応プリンタの場合

AirPrintは、Appleが、OS XやiOSの一部として提供する機能です。AirPrintに対応するプリンタに、iPhoneやMacから、Wi-Fiを通じて、直接印刷できます。

AirPrint について – Apple サポート

お手持ちのプリンタがAirPrint対応なら、iPhoneとプリンタの両方をひとつのWi-Fiネットワークにつなぐだけで、iPhoneとプリンタをつなぐことができます。

iPhone、iPad、または iPod touch からプリントする – Apple サポート

b．AirPrint非対応のWi-Fiプリンタの場合

ここ数年で発売されたWi-Fi対応のプリンタは、たいてい、AirPrintに対応しているようです。

しかし、それ以前のプリンタなど、AirPrintに対応していないWi-Fiプリンタも存在します。実際、我が家のプリンタは、AirPrint未対応でした。

その場合、メーカーが提供しているアプリによって、iPhoneとプリンタをつなぎます。

たとえば、我が家のプリンタはEPSONなので、次のアプリでした。

カラリオプリンター Epson iPrint | 製品情報 | エプソン

iPhoneとプリンタの両方をひとつのWi-Fiネットワークにつないだ上で、iPhoneで起動したこのアプリからプリンタを探せば、iPhoneとプリンタをつなぐことができます。

(2)　iPhoneのブラウザに印刷用ハサミスクリプトをブックマークする

次に、iPhoneのブラウザに、印刷用ハサミスクリプトをブックマークします。

iPhoneからWorkFlowyを使う場合は、公式アプリを使うのが普通です。WorkFlowy開発陣も、アプリを使うことを推奨しています。でも、公式アプリは、ブックマークレットが使えませんので、ブックマークレットを使うためには、ブラウザアプリでWorkFlowyを開く必要があるのです。

ブラウザアプリは、ブックマークレットに対応しているのであれば、何でもかまいません。SafariでもChromeでもよいですし、それ以外でも大丈夫です。

しかし、仮にAirPrint非対応のプリンタを使うのであれば、Google Chromeを使うことをおすすめします。Google Chromeなら、GoogleクラウドプリントによるGoogleドライブへのPDF保存が使えるためです。

●

さて、印刷用ハサミスクリプトは、次のページで公開されています。

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

このページに掲載されているコードを丸ごとコピーして、ブラウザアプリのブックマークに登録すれば、準備完了です。

3．iPhoneからWorkFlowyのトピックを報告書っぽいレイアウトで印刷する手順

では、iPhoneからWorkFlowyのトピックを報告書っぽいレイアウトで印刷してみます。AirPrint非対応のプリンタから印刷する方法を説明するため、Google Chromeを使いますが、Safariや他のブラウザでも、手順は大筋で同一です。

(1)　iPhoneのブラウザで、印刷したいWorkFlowyのトピックを開く

まず、印刷したいWorkFlowyのトピックを、ブラウザアプリで開きます。

印刷したいトピックにZoomして、印刷したい部分をすべて展開します。折りたたまれているところは、印刷されません。

(2)　印刷用ハサミスクリプトを実行し、レイアウトを整える

印刷したいトピックをブラウザで開いたら、ここで、ハサミスクリプトブックマークレットを実行します。

ブックマーク一覧の中から、印刷用ブックマークレットをクリックするだけです。

その結果、こうなります。

この段階で、かなり文章っぽくなりました。もはやリストではありません。

しかし、もう少しレイアウトを整えてみます。

印刷用ハサミスクリプトは、要素をクリックすると、HTMLに仕込まれたclass属性が変わり、それに対応して、見た目も変わります。HTMLやclass属性がわからなくても、クリックする度に見た目が変わりますので、好きな見た目になるまでクリックすればよいです。

今の暫定版が用意しているclassと見た目は、次のとおりです。

• content
  • 標準
  • 普通の見た目
• date
  • 日付
  • 右寄せ
• author
  • 作者
  • 右寄せ
• title
  • タイトル
  • センタリング＆文字サイズ大きめ＆ゴシック
• to
  • 宛先
  • 左寄せ
• center
  • センタリング一般
• right
  • 右寄せ一般

ぽちぽちクリック（iPhoneだとタップ）によって調整すれば、こんな感じの見た目になります。

(3)　印刷する

あとは、これを印刷するだけです。

一般的なiPhoneからの印刷と同じであり、WorkFlowyに特有の問題はないかと思いますが、簡単に説明します。

a．AirPrint対応プリンタの場合

AirPrint対応プリンタを使う場合、ブラウザから直接印刷できます。

ブラウザの共有メニューから印刷を選択し、

AirPrint対応プリンタを選ぶだけです。

b．AirPrint非対応プリンタの場合

AirPrint非対応プリンタの場合、いったんPDFファイルを経由するのがよいかと思います。

• ブラウザでPDFファイルを作成
• PDFファイルをWi-Fi印刷アプリで印刷する

という手順です。

そして、ブラウザでPDFを作成するには、Google ChromeアプリのGoogleクラウドプリントを使うことをおすすめします。

(a)　Googleクラウドプリントの「ドライブに保存」

まず、Google Chromeアプリの共有メニューから「印刷」を選び、「Googleクラウドプリント」を選択します。

そこに「ドライブに保存」とありますので、これをタップ。

すると、Googleドライブに、PDFファイルが保存されます。

(b)　Googleドライブアプリから、PDFを「アプリで開く」→Wi-Fi印刷アプリへ

次に、Googleドライブアプリから、そのPDFを確認します。

このPDFファイルのメニューに「アプリで開く」がありますので、これを選択。

ここでプリンタのWi-Fi印刷アプリを探して、PDFファイルをアプリで開きます。

エプソンのアプリなら、こんな感じです。

あとは、Wi-Fi印刷アプリで印刷をするだけです。

※参考

iPhoneからPDFファイルを作成するためにGoogle Chromeアプリが使えることを、私は、このブログ記事で知りました。ありがとうございます。

iOS用GoogleChromeならWebページをPDF出力できます – W&R : Jazzと読書の日々

4．おわりに

次の写真に写っている紙は、ここに書いた手順で、WorkFlowyのトピックをiPhoneから印刷したものです。

事前準備こそ多少面倒ですが、それさえ終わっていれば、とても簡単です。

印刷用ハサミスクリプトが、WorkFlowyの新しい可能性を、またひとつ切り開いてくれました。

参考

(1)　WorkFlowyを印刷用にカスタマイズ

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

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

(2)　Google ChromeからPDFファイルを作成する方法

iOS用GoogleChromeならWebページをPDF出力できます – W&R : Jazzと読書の日々

iOSのChromeを使えばWebサイトのPDF化が簡単にできる件 – NAVER まとめ

iOSのGoogle ChromeからPDFを作成: あれやこれや備忘録