WEB制作関連

EVERNOTEの新機能「Site Memory」実装編

EVERNOTEからリリースされた新機能「Site Memory」を早速実装してみました。

設置は非常に簡単でものの10分程度あっさりと完了!手順は以下の通りです。

SiteMemoryのページにアクセス

設置用のコードを取得します。

以下の手順にしたがって必要項目を入力します。

100910_3.jpg

「ノート個別の詳細オプションを表示する」をクリックするとタイトルやタグ、URLなども指定できるようになります。 また、ここで保存先のノートブック名を入力できるのですが、該当のノートブックがないとユーザー側に自動的に作成されるので自分がクリップする側だったらノートブックを勝手に作成されるのは嫌だなーと思いあえて指定しませんでした。

あとは生成された以下のコードを設置したい箇所に貼りつければ完了です。

<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({code:'',providerName:'designaholic',url:'',suggestTags:'',title:'',contentId:'maincontents'}); return false;">
<img src="http://static.evernote.com/article-clipper.png" alt="Clip to Evernote" /></a>

ここでせっかくMTで実装するので少しカスタマイズ。設置用のコードを見てみると設定で入力したものが以下のように定義されています。

styling 保存様式 全て(full)か なし(none)の時のみ記述
providerName Webサイト名
suggestNotebook 候補となる保存先のノートブック
code Evernote紹介コード
url URL
suggestTags 候補となるタグ
title 候補となるノートタイトル
contentId クリップさせたいHTMLエレメントのID

空欄にしてもタイトルは<title></title>の値、URLは該当ページのURLを取得してくれるのですがせっかくなのでMTタグを利用して以下のようにカスタマイズ。

<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({providerName:'<$mt:BlogName encode_html="1"$>',title:'<$mt:EntryTitle$>',url:'<$mt:EntryPermalink$>',contentId:'maincontents',code:''}); return false;">
<img src="http://static.evernote.com/article-clipper.png" alt="Clip to Evernote" /></a>

また<mt:Entries></mt:Entries>内で利用すれば繰返し要素に対してそれぞれCLIPボタンを表示させることもできそうですね。ただ”contentId”がかぶっていると最初に登場したものをとってくるのでIDを連番で繰り返すなどの工夫が必要そうです。

ちなみに設置は簡単ですが、どのくらいニーズがあるかはまだ未知数なので様子を見ていきたいと思います。

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

  1. WEB制作関連

    美しいスライドショーが印象的な40個のWEBサイト

    WEBサイトを作る人なら一度は使ったことのあると思うスライドショーです…

  2. WEB制作関連

    味覚も視覚も刺激する飲食店のWEBサイト33個

    いろいろなジャンルの飲食店のWEBサイトのまとめです。&nbs…

  3. WEB制作関連

    色とWEBデザイン -あか編-

    色別WEBデザインのまとめです。今回のテーマは「赤」です。&n…

  4. WEB制作関連

    色とWEBデザイン -みどり編-

    前回に続いて、色を切り口に集めたWEBデザインのまとめです。今回のテー…

  5. WEB制作関連

    海外マーケティングエージェントのWEBサイト21個

    海外のマーケティング会社のWEBサイトのまとめです。デザインクオリティ…

  6. WEB制作関連

    必ず入れておきたいポピュラーなフリーフォント30選

    どこかで見たことのあるあのフォントを含め、何かと重宝しそうなフリーフォ…

  1. 話題・トレンド

    やっぱりPhotoshopはすばらしい。
  2. Design Items

    ティッシュを煙にみたてたティッシュケース
  3. Design Items

    思わず笑顔になってしまうキースタンド。
  4. WEBマーケティング

    マーケティング心理学|両面提示と片面提示
  5. Design Items

    写真以上、動画未満。「Cinemagraphs」がスゴイ。
PAGE TOP
Top