縦に長〜い改ページ無しのWYSIWYGなスクリーンショットに憧れて

- - wikipedia:WYSIWYG

基本

Macでスクリーンショットと言えば外せないのが、これ。かなり昔からシステム標準でこのショートカットがサポートされていた。今でも便利に使っている。

フルスクリーン撮影
- command-shift-3

範囲指定 or ウィンドウ指定撮影（spaceキーで切替）
- command-shift-4

WYSIWYGという観点から考えれば、完璧。今まで期待を裏切られたことはない。*1モニタに見えた状態が、そのまま画像として記録される。

webページの撮影

ところで、時代はインターネット常時接続当り前になり、当然の欲求としてwebページを記録したい衝動に駆られる。
もちろん、command−shift−3・4で撮影できるのだけど、若干の悩みが発生。
それは、スクロールするwebページ全体を記録したいのだが、スクリーンショットでは、今見えているウィンドウの範囲しか撮影されないということ。
スクロールさせながら2回、3回と分けて撮影すれば良いのだが、それはかなり、かったるい...。
そこで、スクリーンショットにこだわらず、以下の方法で記録し始める。

htmlとして記録

Safariならwebarchive形式で、Firefoxなら「webページ、完全」で記録できる。
- しかし、webarchive形式はSafariでしか保存できないし、開けない。Firefoxの「webページ、完全」では1ファイルにまとならないのが不満。

印刷してPDFで記録

OSXは印刷を実行すると、必ずPDFを生成する。そのまま印刷するか、ファイルとして保存するか、自由に選択できる。
- しかし、気に入らないのは、PDFが紙の用紙サイズに分断されてしまうこと。
- 重要な箇所に限って、無情にも、ページ区切りで分断され、ガックリしてしまう...。

Paparazzi!で記録

そこで、Paparazzi!を使ってみた。URLを指定すれば、そのページを1枚の連続したPDFとして保存してくれる。
- かなり良い線いってると思ったのも束の間、すっかりAutoPagerizeの便利さにハマっていたのを忘れていた。
- もう、今見えているページの内容 = URLでダウンロードした内容にはならないのだ。
- AutoPagerizeが気を利かせて、次々と続きのページをAjaxで追加表示してくれている。
- だから、見えているページをURL指定して保存したつもりが、肝心の部分が記録されていなかったなんて事になってしまう...。
- 同様に、URLが変化せずにAjaxで更新されたページや、フォームを送信した結果として表示されるページも記録できないのだ。

SafariStandで記録

SafariStandには、（何も選択せず）二本指クリック*2で表示されるメニューに「PDF形式で書き出し...」というのがあるではないか！（今まで視界に入っていたはずだけど、その存在に気付かなかった...。）
PDFは用紙サイズに分断されず、1枚の連続したページとして記録される！
しかも、このPDFの文字は画像でなく、テキストとして扱われている。だから、Spotlight検索にもヒットするのだ！
- 不満は、Safariでしか利用できないこと。また、ページによっては書式が記録されないこと。

ちなみに、FirefoxでもいくつかPDF形式に書き出すアドオンを見つけて試してみた。
- しかし、どれも一旦URLをサーバーに送って、サーバーで生成されたPDFをダウンロードする方式だった。（自分が調べた限り）
- サーバーがPDFを生成するひと手間の時間と、AutoPagerizeが追加した部分が記録されないという面で不満が残る。

Evernoteで記録

Evernoteなら、Safari・Firefoxとも、二本指クリックから Add to Evernote でwebページを記録できる。
しかも、Mac・Windows・iPhone...等で記録したページを共有できる。
- 通常、webページの内容はEvernote独自のテキスト+画像データとして扱われるようだ。（webページの書式は崩れる。）
- 一方、PDFとして保存すれば、webページの書式も記録され、完璧なWYSIWYGが実現された！
- しかし、PDFとして保存できるのはSafariのみだった。FirefoxではEvernote独自形式しか選択できない...。惜しい。

ちなみに、Evernoteの真価は、記録の共有と、画像に含まれる文字をテキスト検索できることだ。
- - Evernoteで自分の脳を拡張する
たった今下書き中のMacBookのモニタをiPhoneのカメラで撮影した画像さえも、しばらくすると検索可能になってしまう！凄い！
- - 薄暗いこんな画像でも、evernoteで検索すると以下のようにヒットした。（キーワード: evernote で検索）

ただし、今のところ文字認識はアルファベットのみ。もし将来、日本語も認識してくれるようになったら、さらに素晴らしい環境になるはず。期待しちゃう。

WYSIWYGかどうか

webarchive形式ではエラーで保存できないページもある。

例：http://homepage.mac.com/tkurita/scriptfactory/history/2009/06.xhtml
- - 上記ページは、AppleScriptの理解を深めるために、いつもたいへんお世話になっているページです。
  - 有用な情報・コード例が非常に多く、ついつい保存したくなってしまうのです。（このような例に挙げて申し訳ないです。）

ちなみに、Firefoxの「webページ、完全」なら、ほぼ完全なWYSIWYGで記録できる。
Firefoxで記録したファイルをSafariで開いて保存すれば、エラー無しのwebarchiveで保存可能。謎だ...。

OSXの印刷、またはSafariStandのPDF書出しでは再現されない部分もある。

例：http://homepage.mac.com/tkurita/scriptfactory/history/2009/06.xhtml
- - AppleScriptコードのシンタックスカラーが、黒1色になってしまう...。
  - ウィンドウ最上部に位置固定の Show Site Map メニューが、PDFの中間に不透明に表示されてしまう...。
  - （PDFの中間に表示して忠実に再現しているが、不透明のため、その下のコードが見えなくなってしまうのだ。）

ちなみに、Paparazzi!やEvernoteが生成するPDFは、シンタックスカラーも再現される。
Evernoteについては...
- AutoPagerizeが追加した部分も再現され、完璧なWYSIWYGだ。（と思う）
- Show Site Map メニューも半透明で記録され、その下のコードも透けて見えた！

希望

EvernoteのPDF記録が、あらゆるブラウザから利用可能になって欲しい。
可能であれば、PNGやJPEG等の画像形式もサポートして欲しい。
操作は、コンテクストメニューあるいはサービスメニューから実行したい。
統一したショートカットも割り当てたい。（例：command-shift-5 とか）

Firefoxで見ているページを Safariで開き EvernoteにPDFで保存するスクリプト（AutoPagerize対応）

以上の経過から、EvernoteのPDF記録がベストと考えた。
Firefoxで、EvernoteにPDFで記録することを目的に、以下のようなAppleScriptを作ってみた。
Firefoxのアドオンで、サーバー経由でPDFを生成するよりは、素早く、快適に操作できそうだ。
やっていることは以下の作業をGUIスクリプティングで実行しているだけ。
- Firefoxで見ているページを「Webページ、完全」で保存して...
- そのファイルをSafariで開き、「Add Page to Evernote as PDF」を選択する。

下記コードをAppleScriptエディタで開く...
- - コピー＆ペースでAppleScriptエディタに貼付けた場合は、コード中の半角￥を、半角＼に置き換える必要あり。



 --   このスクリプトは、「Firefoxで見えているページを、Safariで開いて、EvernoteにPDF保存します。」

 --   

 --   このスクリプトを動かすために必要なもの

 --     AppleScriptライブラリ

 --       依存するAppleScriptライブラリを以下のページからダウンロードしておく必要があります。

 --       http://github.com/zarigani/AppleScript-bebe-s-Library/tree/master

 --     

 --       そして、以下のファイルをユーザースクリプトフォルダ（~/Library/Scripts）にインストールしてください。

 --         _gui.scpt

 property GUI : load script file ((path to scripts folder as text) & "_gui.scpt") 

 message("Firefox", "Add to Evernote as PDF") save_web_page_as_perfect_on_firefox() try

   add_to_evernote_as_pdf_on_safari() on error

   message("エラー", "Evernoteに保存できませんでした。") end try

 

 

 

 

 --Firefoxで、/tmp/firefox.html に「Webページ、完全」で保存する

 on save_web_page_as_perfect_on_firefox()   GUI's init()   delay 1

   GUI's shortcut("", "control-shift-\"") --半角英数に入力モードへ

   GUI's shortcut("Firefox", "command-S")   GUI's shortcut("Firefox", "command-shift-G")   do shell script "touch /tmp/firefox.html"

   tell application "System Events"

     delay 0.5

     keystroke "/tmp" & return --フォルダ名

     delay 0.5

     keystroke "firefox.html" --ファイル名

          tell pop up button 1 of group 1 of window 1 of application process "Firefox"

       delay 0.5

       click

       delay 0.5

       click menu item 1 of menu 1 --保存ファイル形式:Webページ、完全

     end tell

   end tell

   GUI's shortcut("Firefox", "command-S") --保存 ボタンを押す

   GUI's shortcut("Firefox", "command-R") --置き換え ボタンを押す

 end save_web_page_as_perfect_on_firefox

 

 --Safariで、/tmp/firefox.html を開いて Add to Evernote as PDF を選択する

 on add_to_evernote_as_pdf_on_safari()   delay 4

   --do shell script "open -a Safari /tmp/firefox.html"

   tell application "Safari" to activate

   tell application "Safari" to open ":tmp:firefox.html"

   tell application "System Events"

     delay 2

     perform action "AXShowMenu" of UI element 1 of scroll area 1 of group 3 of window 1 of application process "Safari"

     delay 0.5

     keystroke "Add Page to Evernote as PDF"

   end tell

   GUI's shortcut("Safari", "return") --Add Page to Evernote as PDF を実行する

   GUI's shortcut("Safari", "command-W") --タブを閉じる

 end add_to_evernote_as_pdf_on_safari

 

 

 

 

 --growlまたはdisplay dialogでメッセージを表示する。

 on message(title, msg)   try

     do shell script "/usr/local/bin/growlnotify " & title & " -m " & quoted form of msg

   on error

     activate

     display alert msg giving up after 1

   end try

 end message

利用環境

MacBook OSX 10.6.1

*1:あっ、DVDプレーヤのウィンドウは写らなかったかもしれない。

*2:または control-クリック、または右クリック