Evernoteにブログ記事をクリップするボタンを設置

記事タイトルの下にEvernoteへブログ記事をWebクリップする「サイトメモリー」というボタンを設置しましたので、その手順についてご紹介。（Bloggerの設置サンプルもあります）

オンライン上にテキストや画像、ボイスメモなど何でも残しておける「Evernote」
Windows、Mac、iPhone、iPad、他スマートフォンなど、サポートされるプラットフォームも多く、非常に便利なので利用している人も多いですよね。

思いついたアイディアを残したり、覚えておきたいノウハウなどを残しておくのがEvernoteのコンセプトとなっており、当ブログのコンセプトと一致するではありませんか！！

ということで個人的には是が非でも設置したかった機能の一つです。
なお、上部のClipボタンを押すとこの記事がそのままクリップされますので、試してみてください。（キャンセルも出来ます）

サイトメモリーのHTMLソース生成

1. 「Evernote サイトメモリー」へアクセスします。

2. ページ下部でHTMLソースコードの自動生成が出来ます。通常のブログであれば、生成したソースコードを埋め込むことでサイトメモリーボタンの設置完了です。ただし、記事毎にソースコードを編集する必要がありますね。

Bloggerへの設置

Bloggerの場合は少し工夫すると動的にソースコードの内容を変更することができ、記事毎のソースコード編集が不要になります。以下に例をご紹介。
（以下、「HTMLの編集」+「ウィジェットテンプレートを展開」で行います）

Evernote用のJavaScriptファイルロードを</head>タグの直前あたりに埋め込みます

<script src='http://static.evernote.com/noteit.js' type='text/javascript'/>

<div class='post-header-line-1'>の次の行あたりに以下を埋め込みます

<span>
  <a expr:onclick='&quot;Evernote.doClip({providerName:\&quot;&quot; + data:title + &quot;\&quot;, title:\&quot;&quot; + data:post.title + &quot;\&quot;, url:\&quot;&quot; + data:post.url + &quot;\&quot;}); return false;&quot;' href='#'>
  <img alt='Clip to Evernote' src='http://static.evernote.com/article-clipper.png'/>
  </a>
</span>

Evernote.doClip内の各パラメータについては「Site Memory Developer Guide」を参照して各人でカスタマイズすると良いと思います。英語ページですが図解付きなので難しくはないと思います。

あとBlogger固有の「レイアウトデータタグ」も理解しておく必要がありますね。こちらは慣れるまで少し難解です。

参考までに上記ソースでのパラメータを簡単に解説すると、

providerName(提供元): 当ブログのタイトル
title(クリップタイトル): 記事のタイトル
url(ソースURL): 記事のURL

なお、contentは何も指定していません。ここは色々と試行錯誤したところなのですが、RSSフィードを登録したり、記事のリンクのみノートにしたり... どれもピンと来なくて悩み抜いた結果、何も指定しないといい感じのクリップになりましたw

Evernote サイトメモリーボタンの設置を検討している方は参考にしてみてください。

iKnowHow