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制作関連

    ダウンロードしておきたい便利なシルエット素材85セット

    人のいろいろな動きから動物、植物や街並みまでモチーフや世界観作りなどに…

  2. WEB制作関連

    カッコいいグランジ風のフォント45個まとめ

    グランジ系フォントのまとめです。個人利用向け中心ですが好みのものが多か…

  3. WEB制作関連

    紙のテクスチャが素敵なWEBデザイン35個

    紙のテクスチャを用いたWEBデザインのまとめです。…

  4. WEB制作関連

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

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

  5. WEB制作関連

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

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

  6. WEB制作関連

    写真を効果的に魅せる6つのjQueryギャラリー

    どんな情報を見せるにしても欠かせない画像を効果的に見せられるjQuer…

  1. Design Items

    一緒に出かけたい黄色い鳥って?
  2. 話題・トレンド

    チョークで描かれた3Dアートがスゴすぎる。
  3. WEB制作関連

    スクリーンショットを利用したWEBデザイン30個
  4. 話題・トレンド

    大迫力なアートオペラ「Bregenz Festival」
  5. Design Items

    食卓をドラマティックに演出する「Manga Food Plates」
PAGE TOP
Top