MacでEvernoteにWebデザインをストックしたいならPaparazzi!とFolder Action Scriptの組み合わせがオススメ!!

Webデザイナーの皆さんはWebサイトを見ていて、いいなと思ったWebサイトを見つけた時にどうしていますか？ブックマークしたりスクリーンショットを撮ったり、方法は色々あると思いますが良いと思ったWebサイトは保存しておきたいですよね。

僕は最初の頃はスクリーンショットを撮ってEvernoteに保存していたのですが、面倒くさくて途中からリンクとWebサイト名をEvernoteに保存するという方法を取っていました。

しかし最近、Paparazzi!(パパラッチ)というアプリとEvernoteのFolder Action Scriptというものを見つけ、この組み合わせが物凄く便利だったのですぐさまその方法に切り替えました。今回はWebデザイン収集に役立つPaparazzi!とEvernoteのFolder Action Scriptの使い方についてまとめてみます。

何が便利なの？

Paparazzi!はWebサイトのスクリーンショットを撮るためのアプリケーションです。ただ撮影するだけではなくサイト幅や画像の名前等も設定できるアプリなので最初にある程度設定してしまえば…

アプリを起動
URLをコピペ
画像保存ボタン（Command+S）で保存

この3ステップでWebサイトのスクリーンショットを保存する事が可能です。

そして次に紹介するFolder Action Scriptは、フォルダ内にファイルを入れた時に何かしらの処理を与えるための仕組みの事です。Evernote Folder Action Scriptは指定したフォルダ内に入れたファイルをEvernoteに送信してくれるので、Paparazzi!で画像を保存する際に、保存先を指定したフォルダにする事で自動でEvernoteにスクリーンショットを送信してくれます。

要は下記の動画のような事が可能になります。URLを入力して保存するだけでEvernoteにサイトのスクリーンショットが保存できるので非常に便利ですし、何より楽です。

Paparazzi!の使い方

Paparazzi!の公式サイトからダウンロードボタンをクリックしてダウンロード、インストールします。

Derailer

Paparazzi!

https://derailer.org/paparazzi/

A full-webpage screenshot utility for macOS.

アプリを起動すると下の画像のようなウインドウが開きます。メニューバー真ん中のテキストボックスに表示したいサイトのURLを貼り付けEnterを押すとサイトが読み込まれます。

読み込んだらCommand+SでWebページの保存が行えます。ちなみにこの読み込みがうまくいかないサイトもあるので注意しましょう。特にパララックス系のサイトはうまく表示できない場合があるので、うまく表示できない場合は諦めて気に入ったデザイン部分のスクショを普通に撮っています。

ちなみに環境設定の「General」から保存する画像の名前を設定する事ができます。色んなフォーマットが用意されているのですが僕の場合はサイトのタイトルをそのまま画像の名前にしたかったので「%t」にしています。

ちなみに「Sizes」から保存する画像サイズのプリセット設定も行う事ができます。

Evernote Folder Action Script

そもそもフォルダアクションというのは、フォルダの中にファイルが追加されると何かしらのアクションをそのファイルに実行する機能です。

フォルダの中にファイルを入れた際に、Evernoteに自動でそのファイルをアップロードして新規でノートを作成するというスクリプトを作成して配布している方がいらっしゃったので、今回はそのスクリプトをフォルダに設定します。

このフォルダの中に先程のPaparazzi!で撮影した画像を入れればEvernoteで新規のノートが作れてしまうという寸法です。

Evernote Folder Action Scriptのダウンロードと設定

細かいダウンロード方法や設定方法はスクリプトの配布ページや、既に他の方が紹介してくださっているので、細かい部分を知りたい方はこちらの記事をご覧ください。

Veritrope

“Evernote Dropbox”：ファイルやスキャンした文書をEvernoteに素早く保存！ - Ve...

http://veritrope.com/evernote-dropbox：-ファイルやスキャンした文書をevernoteに素/

A Japanese translation of instructions for the “Evernote Folder Action” script!

あなたのスイッチを押すブログ

ファイルをEvernoteに自動転送するフォルダを作る方法。Macのフォルダアクション活...

http://bamka.info/folderaction_evernote

フォルダに簡単な設定をすると、入れたファイルを自動でEvernoteに転送させられます。Macにはフォルダアクションという機能があり、ここに特殊なアクションスクリプトを登録します。するとEvernoteへの自動転送が可能になるのです。５分もあればできる作業ですので、ぜひ試してみてください。

この記事では、念のためざっくりとした流れだけ書いておきます。

まず、スクリプトの配布先にあるダウンロードリンクから「Evernote_Folder_Action_Files_JP.zip」をダウンロードして、ダブルクリックして展開。

展開したフォルダ内にある「Evernote Folder Action.scpt」というファイルを[Macintosh HD]→[ライブラリ]→[Scripts]→[Folder Action Scripts]に移動します。

次にフォルダアクションを設定するためのフォルダを作成します（名前はなんでもOK）。作成したフォルダに右クリックをして[サービス]→[フォルダアクション設定]をクリックします。

「関連付けるスクリプトを選択:」と表示されるので、先程追加した「Evernote Folder Action.scrt」を選択して「関連付ける」ボタンをクリックします。ウインドウはもう閉じてしまって構いません。

これでこのフォルダ内に何かファイルを入れると新規のノートが作成されて入れたファイルが添付されるようになります。試しに設定したフォルダ内に画像ファイル等を入れてみましょう。

設定したフォルダ内にファイルを入れると下記の画像のようなウインドウが表示されます。テキストエリアにタグを入力する事ができます。

「既定のノートブックに作成」だとEvernoteで設定している既定のノートブックに新規でノートが作成されます。
既定のノートブックの変更はMacの公式アプリの場合、[環境設定]→[全般]の「初期設定では、新規ノートは以下のノートブックに保存されます:」から変更する事が可能です。
その他の環境での変更方法はEvernoteのヘルプをご覧ください。

Evernote ヘルプ＆参考情報

既定のノートブックを変更する方法

https://help.evernote.com/hc/ja/articles/208314728-既定のノートブックを変更する方法

新規に作成したノート、Web クリッパーで新規に作成したクリップ、Evernote に転送したメールなどは、「既定のノートブック」に自動的に保存されます（ただし、特定のノートブックを指定した場合を除きます）。既定のノートブックを設定Macメニューバーから Evernote > 環境設定...を選択します。「全般」タブの「初期設定では、新規ノートは以下のノートブックに保存...

「ノートブックを選択」だとノートブックを選択する画面に切り替わり、選択したノートブックに新規ノートが作成されます。

Evernote Folder Action Scriptの設定変更

フォルダにファイルを入れる度に、ウインドウが出てきてどのノートブックに作成するのか選択するのは少し面倒です。このスクリプト自体凄く丁寧に作られていてウインドウの表示のオンオフや既定のノートブックの変更がちゃんとできるように作られていたので、設定したフォルダにファイルを入れると自動で予め指定したノートブックに新規追加するようにしてみましょう。

先程ファイルを追加した[Macintosh HD]→[ライブラリ]→[Scripts]→[Folder Action Scripts]に移動してEvernote Folder Action.scptをダブルクリックします。するとスクリプトエディタが起動すると思います（起動しない場合は右クリックして[このアプリケーションで開く]→[スクリプトエディタ.app]）。

ちなみに[Folder Action Scripts] フォルダ内で編集しようとすると「ファイル”Evernote Folder Action.scpt”を含むフォルダに書き込むためのアクセス権がありません。」と表示されてしまう場合は、一旦ファイルを別フォルダに移動させてから編集すると、ちゃんと保存できます。

基本的に変更するのは上から35行目〜65行目までです。

======================================
// USER SWITCHES (YOU CAN CHANGE THESE!)
======================================
*)
-- SET THIS TO "OFF" IF YOU WANT TO SKIP THE TAGGING/NOTEBOOK DIALOG
-- AND SEND ITEMS DIRECTLY INTO YOUR DEFAULT NOTEBOOK
property tagging_Switch : "OFF"
-- IF TAGGING IS ON AND YOU'D LIKE TO CHANGE THE DEFAULT TAG,
-- TYPE IT BETWEEN THE QUOTES (DEFAULT IS "@Evernote")
property defaultTag : ""
-- THIS IS THE DELIMITER WHICH SEPARATES YOUR LIST OF TAGS
-- CHANGE BELOW, IF YOU'D LIKE!
property theDelims : {","}
-- SET THIS TO "OFF" IF YOU DON'T WANT
-- ORIGINAL FILES DELETED AFTER IMPORT INTO EVERNOTE
property delete_Files : "ON"
(*
======================================
// OTHER PROPERTIES (USE CAUTION WHEN CHANGING)
======================================
*)
-- IF YOU ARE RUNNING THIS SCRIPT WITHOUT THE TAGGING DIALOG
-- YOU CAN HARD-CODE TAG AND NOTEBOOK VALUES HERE…
property EVnotebook : "0801_Webサイト保存"
property EVTag : {}
(*

一行ずつ説明していきます。

property tagging_Switch : "OFF"の部分をOFFにするとポップアップが表示されなくなります。デフォルトだとONになっていますが、今回は表示させたくなかったのでOFFにします。

property defaultTag : ""はポップアップ表示の際にデフォルトで入力されているタグを入力します。デフォルトは「@Evernote」になっています。

property theDelims : {","}はポップアップ表示でのタグ入力の際に、タグの区切りに使う文字列の設定をします。デフォルトは「,」になっているのでタグとタグの間に「,」を入力する事でタグを分ける事ができます。

property delete_Files : "ON"はフォルダ内にファイルを入れてEvernoteに送信した後、そのファイルを削除するかどうかの設定です。デフォルトではONになっていてOFFにするとファイルは残るようになります。僕は基本的にサイトのスクリーンショットをEvernoteに送信したいだけなのでONのままにします。

property EVnotebook : "0801_Webサイト保存"はポップアップ表示の設定がOFF時に、ファイルの送信先をどのノートブックにするかの設定です。日本語でもきちんと機能したので入力間違いにだけ気をつけて入力すれば大丈夫です。ちなみに僕は「0801_Webサイト保存」に送信したかったのでその名前を入力しました。

property EVTag : {}にはポップアップ表示の設定がOFFの時に設定したいタグを入力します。

設定ができたらフォルダ内に画像を設定してみて、ちゃんと指定したノートブック内に新しいノートが追加されていれば成功です。

これで後はPaparazzi!でWebサイトのスクリーンショットを保存する時に保存先を、このフォルダアクションスクリプトを設定したフォルダにしておけば、すぐにEvernoteに画像が保存されるというわけです。