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

    フリーで使える布地のテスクチャー50個まとめ

    柄物や布の質感のあるものなど布地のテクスチャのまとめです。 (…

  2. WEB制作関連

    WEB制作者なら必ず入れておきたいFirefoxアドオン50個

    WEB制作に携わる人には重宝するものばかりを集めたFirefoxアドオ…

  3. WEB制作関連

    今どきなUIデザインサンプル35個

    アプリやWebサービスのインターフェイスに役立ちそうなUIサンプルです…

  4. WEB制作関連

    MovableType5インストールしました。チカッパ編

    前回MT4からのアップデートを試みたが見事に失敗したので再チャレンジ。…

  5. WEB制作関連

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

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

  6. WEBディレクターズマニュアル

    WEBディレクターの為の便利ツール「Support Detail」

    エラーが起きていると言われたけど自分のPCでは再現しない。そんな時はま…

  1. LifeHack・仕事術

    Gmailで実践するGTD
  2. 話題・トレンド

    schoo(スクー)で授業配信します!
  3. WEB制作関連

    MovableType5インストールしました。チカッパ編
  4. 話題・トレンド

    宿泊客をあたたかく出迎えてくれる「Towel Origami」
  5. 話題・トレンド

    実写版 ”マリオカート” の再現度がスゴイ!?
PAGE TOP
Top