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ディレクターズマニュアル

    ツールジプシーの果てに。

    先日、「WEBディレクターの為のEXCEL術(1)作業スケジュール」と…

  2. WEB制作関連

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

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

  3. WEB制作関連

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

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

  4. WEB制作関連

    WEB制作者必見。便利なワイヤーフレーム作成ツールまとめ

    WEB制作に携わる方であれば業務の中で目にしたり、自分で作成したことが…

  5. WEB制作関連

    jQuery+Ajaxで実装するファイルアップローダー

    jQueryを利用したファイルアップローダーのまとめです。 (…

  6. WEB制作関連

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

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

  1. 話題・トレンド

    たった1枚の紙で実現したAR(拡張現実)
  2. WEB制作関連

    WEBサイト高速化に便利!「Google PageSpeed Insight」
  3. Design Items

    超癒されるティーインフューザー「MR. TEA INFUSER」
  4. 話題・トレンド

    iTuneから特別な発表があるようです。
  5. 話題・トレンド

    Googleで振り返るロンドンオリンピック
PAGE TOP
Top