Evernote Site MemoryをDevelopr Guide見ながら試してみた

EvernoteのWebパーツ

---

Evernote Site Memory | Evernote Corporation

今回は、Evernoteに追加されたページ埋め込み型のクリップ機能の実装について。今までのWebクリップは、ユーザー側の自発的な行為でしたが、このパーツ埋め込みによって、サイト運営者から、Evernoteユーザーに対してクリップを促せるようになりました。

TwitterのTweet Buttonみたいなソーシャル性はないでしょうけれど、ユーザーに利便性を提供できるということでDeveloper Guideを見ながら、実装した感じをメモメモ。普通に使う分には、Evernoteサイトメモリーのフォームでお手軽に作るほうが簡単。

---

以下、サンプルコードとかオプションのリファレンスの和訳的なものとかとか。

---

サンプルコード ( 転載 )

上記の公式の紹介ページで呈示されていたサンプルコードを拝借。

例ではa要素にonclickイベントで呼び出してますが、適切なoptionを指定してEvernote.doClipを呼び出せば、どこからでもどうとでも料理できそうです。この下の次項にて、doClipのオプションについても説明を掲載しています。

<a href="javascript:" onclick="Evernote.doClip({
  title: 'Evernote Site Memory',
  url: 'http://www.evernote.com/about/developer/sitememory/',
  code: 'myReferralCode',
  contentId: 'content',
  footer: '<img src=&quot;/about/media/img/logo.png&quot; />',
  suggestNotebook: 'Evernote Development Notes',
  suggestTags: 'Evernote,Site Memory',
  providerName: 'Evernote',
  latitude: 37.39,
  longitude: -122.07,
  styling: 'full' });return false">
  <img src="http://static.evernote.com/article-clipper.png" />
</a>
<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>

設定できるオプションのリファレンス

title : クリップのタイトル。

url : リソースの参照先URL。クリップされる内容とは異なり、クリップのメタデータとしての情報。

content : 文字列またはDOM要素を指定。クリップされる内容を指定する。content系オプションで第1優先。

contentId : contentに相当する要素のidを指定する。content系オプションで第2優先。

contentUrl : contentに相当する内容のURLを指定する。content系オプションで第3優先。stylingオプションは無効になる。Javascriptは無視されるので、それらの描画内容も反映されない。

signature : 文字列またはDOM要素を指定。クリップされる内容に、追加される。水平線で区切られる。

header : 文字列またはDOM要素を指定。クリップされる内容に、ヘッダーに相当する部分を明示して加える。

footer : 文字列またはDOM要素を指定。クリップされる内容に、フッターに相当する部分を明示して加える。

code : アフィリエイト用の識別子を指定。

suggestNoteBook : おすすめノートブック名。初期選択になるわけではないので、節度をわきまえた控えめな実装。

suggestTags : おすすめタグ。同上で、控えめな実装。おすすめタグの中から、ユーザーが実際に加えるタグを設定できる。

providerName : クリップ提供者の名前。

latitude : 緯度の設定。例: 37.39 。

longitude : 経度の設定。例: -122.07 。

styling : スタイルの設定。text, none, full のいずれかを指定。クリップされる内容がcontentUrlオプションで指定されている場合は無効。

クリップされる内容は、基本は現在表示中のページのみ。content系オプションやheader, footerなどのオプションを指定することで、クリップされる内容を制御する。

content系オプションはどれかひとつしか適用されず、同時に指定した場合もそれぞれに優先順位が設定されているみたいです。クリップに送り込む内容をそこそこ厳密にコントロールできるので、今後のどなたかのアイディア勝負に期待したい所存。

おまけ : a-blog cmsなうちのブログはこうしといた

<!-- BEGIN entry:loop -->
<a href="#" onclick="Evernote.doClip({
    title       : '{title}',
    url         : '{permalink}',
    <!-- BEGIN_MODULE Touch_Entry -->
    contentId   : 'root_contents',
    <!-- END_MODULE Touch_Entry -->
    <!-- BEGIN_MODULE Touch_NotEntry -->
    contentUrl  : '{permalink}',
    <!-- END_MODULE Touch_NotEntry -->
    providerName: 'ayumusato'
});return false;">
<img src="http://static.evernote.com/article-clipper.png" />
</a>
<!-- END entry:loop -->

クリップされるときは、基本的にビューがEntryのはずですが、Entry以外のときにはcontentUrlオプションにpermalinkが入るように設定しておきました。

このブログ、ツイッターとかのソーシャル系パーツも下に移動させないとなぁ。各種ボタンは、記事をざっと見終わった後の動作なので、ふつー下にあるべきなんですよね。近日中に修正予定。:-)

参考＆関連サイト

• 新機能：サイトメモリーボタンでWebサイトを1発保存！ « Evernote日本語版ブログ
• Evernoteサイトメモリー | Evernote Corporation
• あなたのブログを Evernote 対応にする Site Memory、本日公開！

---