js初心者がEvernoteのサイトメモリーを使ってブックマークレットを作るまで

how to write js biginner js初心者がEvernoteのサイトメモリーを使ってブックマークレットを作るまで

Googleリーダーで選択中の記事をEvernoteへいい感じにクリップできるブックマークレットを作りました。

ブックマークレットはJavascriptを使って作るというのは知っていましたが、Javascriptをまともに触ったことはないですし、ましてやブックマークレットなんて作ったことはありません。

そんなJavascriptド素人がブックマークレットを作成した手順をサラっとご紹介します。

ブックマークレットはどうやって作る?

そもそもブックマークレットを作ったことがないので、どんな感じで作ればいいのかすらわかりませんでした。これはもうGoogle先生に聞くしかない!

Google先生から返ってきた答えがこれ。

ブックマークレットサービス・Hatena::Let を作りました – 川o・-・)<2nd life

なんとあの「はてな」に「Hatena::Let」というブックマークレット作成支援サービスがあったのです。

この記事を詳細に読んでみると、どうやら文字数の調整やら改行削除やら更には動作URLの限定とかjsの外部読み込みまで、ブックマークレットを作る際の面倒なところをお任せできちゃうみたいじゃないですか!

ということで、「Hatena::Let」を利用して作ることに決定です。

Hatena::Let利用のポイント

上にもちょこっと書きましたが、Hatena::Letのいいところをササッと箇条書き。

  • 簡単に公開・作成できる。ブックマークレットの置き場所がはてなのサーバーなので負荷対策にもなりそう(多分)。
  • ブックマークレットには文字限界があるけど、それを自動で調整してくれる(文字数を超える場合は外部読み込みに変換してくれる)。
  • 改行や空白を自動で詰めてくれる。
  • ブックマークレットが動作するURLを簡単に制限できる。
  • 外部jsの読み込みも簡単に記述できる。(今回はEvernoteのサイトメモリーに使われてるjsを読み込む必要があったのですごく助かった)。
  • デバッグが簡単にできる。(DebugLetというブックマークレットを使うと保存だけでブックマークレットに反映される)。

ブックマークレット作るときは使わないともったいないですな。
このサービスを詳しく紹介した記事も書こう!

Evernoteサイトメモリーのカスタマイズ方法

Evernoteに記事をクリップには最近公開されたサイトメモリーに使われているnoteit.jsというjsを使いますよ。

最初はAPIを使おうかなぁとか考えてたんですが、調べてみるとどうやらEvenoteのAPIを使うには申請やらなんやらをしないといけないようなので、記事をクリップするだけならサイトメモリーのjsを使えないかと思ってそちらを試しました。

その際に参考にしたサイトがこちら。

シゴタノ! — Evernote サイトメモリーで「一歩先」のブログをつくる

純粋にブログボタンとしてサイトメモリーを使うときのカスタマイズ方法が紹介されています。

実はnoteit.jsを使う方法はとても簡単。Evernote.doClip()というメソッドを呼び出して引数でオプションを渡すだけでEvernoteにクリップできちゃいます。

オプションとして渡す必要があるのは「元記事のURL」と「記事タイトル」と「記事のid」です。それぞれ「url」、「title」、「contentId」というオプションなのでオブジェクトに詰めてEvernote.doClip()メソッドに渡します。

Googleリーダーを解析

さて、ここからが一番面倒な部分。といってもそんなに難しくありませんでしたよ。

Googleリーダーの構造解析にはFirebugを使いました。これはもう常套手段ですね。

解析するは選択した際に指定されるidと元記事のURLと記事タイトルが書かれている要素だけ。

how to write js biginner01 tm js初心者がEvernoteのサイトメモリーを使ってブックマークレットを作るまで

選択中の記事のidは「current-entry」、元記事URLと記事タイトルは「current-entry」の中の「h2」要素内。これだけ分かればあとは「h2」から元記事URLと記事タイトルをすっぱ抜くjsを書くだけです。結局jsはそれだけで済んじゃいました。

最後にjsを書く

HTMLの要素をすっぱ抜くjsくらいならサクっと調べればjs初心者の僕でも書くことができましたよ。はい。結局jsの解説はほぼなしですw

そしてできたjsがこれ。

/*
 * @title GoogleReader to Evernote
 * @description GoogleReaderの選択中記事をEvernoteにクリップします。
 * @include http://www.google.com/reader/view/#stream/*
 * @license MIT License
 * @require http://static.evernote.com/noteit.js
 */

var obj = document.getElementById("current-entry").firstChild.firstChild.firstChild.firstChild;
var elems = obj.getElementsByTagName("h2");
var elem = elems[0];
var title = elem.firstChild.firstChild.textContent;
var url = elem.firstChild.href;
var param = new function(){
             this.contentId = 'current-entry';
             this.title = title;
             this.url = url;
             }

Evernote.doClip(param);

void(0);

最初のコメント部分はHatena::Letの機能でブックマークレットのタイトル、説明、動作するURL、ライセンス、外部読み込みするjsを指定しています。これだけで初期動作をいい感じにしてくれます。

var obj = document.getElementById("current-entry").firstChild.firstChild.firstChild.firstChild;
var elems = obj.getElementsByTagName("h2");
var elem = elems[0];
var title = elem.firstChild.firstChild.textContent;
var url = elem.firstChild.href;

そしてここでGoogleリーダーから現在選択中の元記事URLと記事タイトルを抽出。

var param = new function(){
             this.contentId = 'current-entry';
             this.title = title;
             this.url = url;
             }

抽出したものをオブジェクトにつめる。

Evernote.doClip(param);

そしてオプションを渡してdoClip!

void(0);

最後のこれはおまじないみたいな感じ。

ソースコードを見やすくするために、適時改行をいれて書いてみます。最後のvoid(0)は、決まり文句みたいなもので、これを入れ忘れるとページ遷移がおきてしまうので、必ず記述して下さい。

ソースコードを見やすくするために、適時改行をいれて書いてみます。最後のvoid(0)は、決まり文句みたいなもので、これを入れ忘れるとページ遷移がおきてしまうので、必ず記述して下さい。

こんな感じで解説してあったので一応付けときました。必要なのかどうなのかは分かりませんw

ちょっと長くなってしまいましたが、js初心者な僕でも案外簡単にブックマークレットが作れてしまいまいた。

なのでjs分からんという方も臆することなくチャレンジしてみるといいと思います!

pixel js初心者がEvernoteのサイトメモリーを使ってブックマークレットを作るまで