Lifehacking.jp

あなたのブログに Evernote Site Memory を追加する

Thursday, 9 September 2010 · 4 Comments · evernote


WordPress や Movable Type などといった、自分でテンプレートを修正することが可能なブログシステムを利用している人なら、Site Memory は簡単に導入することができます。

Lifehacking.jp で Evernote ボタンを追加するまでの手順を以下にまとめておきましたので、ご参考にしてください。

1. まず、ビルダーでアイコンを選びます。

Evernote サイトで公開されているボタン作成ツールで、まずはアイコンを選びます。日本語も用意されていますね。

sitememory1.jpg

2. サイトの情報、そしてラッパーの ID を入れる

ここでブログのソースを見る必要があります。たいていのブログは <div id=”content”> などといったタグ、記事部分が囲まれているはずですので、その部分の ID を探してきてフォームに入力します。

またここで、ユーザーがその記事を追加した場合にどのノートブックに追加するかを指定できます。ノートブックがない場合は自動で作成されますが、人によってはこれは嫌がるかもしれません(「いきなり知らないノートブックが作成された!」)ので注意が必要です。

また、将来的には Site Memory を通して Evernote のプレミアム会員に登録してくれたユーザーがいた場合、アフィリエイト・プログラムを通して支払いをうけることができますので、そのコードも入力できます。

下の Advanced のリンクをクリックすれば、タグの指定、テキストのみのクリッピングか画像も含めたすべてか、といった詳細を指定できます。

sitememory2.jpg

3. コードをコピーして表示させたい箇所にペースト

以上の入力がすむと、Javascript のコードが生成されますので、それをブログの任意の場所に貼り付ければ完成です!

sitememory3.jpg

ブログのトップページなどで利用する場合

ブログのトップページにたくさんの記事があって、その一つ一つに Site Memory のアイコンを付けたいと思った場合もほとんど同様ですが、クリップされたノートのタイトルがブログのタイトルに、クリップされたノートの URL がブログの URL でパーマリンクになりませんので、ちょっとだけ細工をします。

生成されているコードの中には、providerName:'Lifehacking.jp'とか、suggestNotebook: 'ライフハック' といった具合に先程のフォームに対応した設定がされていますが、ここで利用出来る項目にはもっと種類があります。

詳しくは Developer Guide に解説されていますが、ここでは titleurlを用いて記事のタイトルとパーマリンクを追加します。たとえば WordPress の場合:

title: '<?php the_title(); ?>',
url: '<?php the_permalink(); ?>',

といった具合に、記事の題名とパーマリンクを作る PHP を挿入しておけば大丈夫です。

Developer Guide には、さらに緯度経度を加えたり、特定の DOM エレメントをクリッピングしたり、ヘッダーやフッターを加える方法などが紹介されています。

このあたりを活用すればブログの記事だけではなく、店や賞品の情報を次々とクリッピングするなどといった利用法も考えられそうです。

Site Memory が単に「しゃれたクリッピングのメカニズム」ではなく、Evernote のプラットフォーム化にかかわっているのかが、このあたりからもわかりますね。

とりあえずはブログをもっているひとはみな Evernote ボタンを付けてみましょう。

この記事をみた人はこんな記事も見ています

  1. あなたのブログを Evernote 対応にする Site Memory、本日公開!
  2. 便利な Google ブックマークレット10種類
  3. SiteInfo: Atom1.0, ソーシャルブックマーク etc.
  4. Evernote 日本語版プレビューページとブログがオープン!
  5. 4HWW の Tim Ferriss が Evernote のアドバイザーに。その意味とは?
  6. Evernote は時間とともに価値の増すサービス
  7. 会議のすべてをまかなう TimeBridge が Evernote と連携
  8. Evernote 3.5 for Windows が正式リリース

Tags:

  • http://twitter.com/___iB___ ibuholic

    これやろーーっ!

  • http://meigen.ko2ko2.net/ コボリ ジュンコ

    おぉーー、これは非常に便利!
    このキャプチャボタンがついていたら、ブログをどんどんEvernoteの中に入れられますね!

  • http://sakuraicatshop.blogspot.com/ Catshop

    導入手順の分かりやすい解説、ありがとうございました。これを参考にして、ボクのblogにも設置させてもらいます。幾つかのサイトでclipしてみましたが、ゴキゲンな動作ですっかり気に入っちゃいました。サクサク動くし!

  • http://twitter.com/densuke ぐは

    いれさせていただきましたー