Tumblrを弄る案件に初めて参加させて頂きましたが、
このサービスは他のブログサービスと異なり、
「最新の投稿」「タグ一覧」の出力機能を備えていない様子。
同機能を実現する為にはAPIへのアクセスを（複数回）行わなければならないのですが、
大変不便なので、それを代行するライブラリを書いてみました。

TumblrPosts

mach3’s js-tumblrposts.js at master – GitHub

Tumblrの記事を、API(/api/read/json/）を通して取得するクラスです。

簡単な使い方

ライブラリのロード

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.class.min.js"></script>
<script type="text/javascript" src="tumblrposts.js"></script>

先ず、必要なライブラリをロードします。
jQueryと、jquery.class.jsが必要です。
cf) jQueryでPrototype.js風のクラス定義をしてみる

初期化

var posts = new TumblrPost({
    domain:"example.tumblr.com",
    maxNum:300
});

初期化します。
引数のオブジェクトリテラルには、domain（対象となるTumblrのドメイン）と
maxNum（取得する最大記事数）を渡す事が出来ます。
両方共省略しても大抵問題は生じません。詳しくは後述。

イベント

次にイベントハンドラを設定します。

posts.bind( posts.EVENT_COMPLETE, function(e){
    var s = this;
    // getPosts() で投稿リストを取得
    // getTitleByPost() で投稿タイトルを取得
    $.each( this.getPosts(), function( i, post ){
        var title = s.getTitleByPost(post, 100),
            html = '<li><a href="{{url}}">{{title}}</a></li>'
            .replace( /{{url}}/, post.url )
            .replace( /{{title}}/, title );
        $(html).appendTo( $("ul#updated") );
    });
    // getTags() でタグリストを取得
    $.each( this.getTags(), function( i, tag ){
        var html = '<li><a href="/tagged/{{url}}">{{tagname}} ({{count}})</a></li>'
            .replace( /{{tagname}}/, tag.name )
            .replace( /{{count}}/, tag.count );
        $(html).appendTo( $("ul#tags") );
    });
});

記事のロードが完了すると“complete”（EVENT_COMPLETE）イベントが着火されます。
イベントハンドラ内でgetPosts()やgetTags()を呼ぶと、投稿/タグのリストを取得する事が出来ます。

posts.bind( posts.EVENT_PROGRESS, function(e){
    console.log( this.getLoadedRate() + "% Loaded" );
});

こちらは使う事は少ないかもしれませんが、
記事のロードが進むごとに“progress”(EVENT_PROGRESS)イベントが着火されます。
getLoadedRate()で進捗をパーセントで取得する事が出来ます。

ロードスタート

posts.run();

run()メソッドをコールすると、APIへのアクセスが開始されます。

APIとか

TumblrPost( config )

コンストラクタ。引数に設定用のオブジェクトを渡せます。
config
– domain (String) : Tumblrのドメイン。外部Tumblrにアクセスする時に指定。
– maxNum (Number) : 読み込む最大記事数。投稿数が多い場合はこれを指定する事で負荷を軽減出来ます。
（maxNumを指定した場合、タグの取得はあまり正確でなくなります）

run() : void

APIへのアクセスを開始します。
全ての投稿をロードするか、config.maxNumに達するまでアクセスを繰り返し行ないます。

getTags() : Array

タグリストを取得します。返されるArrayの子要素はシンプルなオブジェクトです。
Array
– name (String) : タグの名前
– count (Number) : ポスト数

getPosts( offset, count ) : Array

記事リストを取得します。
– offset (Number) : 開始位置
– count (Number) : 取得する記事数 返されるArrayの子要素はTumblrAPIのpostオブジェクトです
c) API | Tumblr

getTitleByPost( post ) : String

postオブジェクトから記事タイトルを抽出します。（試験的に実装）

getLoadedRate() : Number

ロードの進捗をパーセントで返します。

まとめ

仕方がないとは言え、
この手法は場合によっては複数回JSONPのアクセスを繰り返すことになり、
パフォーマンスが正直あまりよろしくない為、必要がなければ避けるべきでしょう。
（一度に取得できるポストの最大数が50なので…）

最新の投稿の取得は、はっきり言ってオマケでつけています。
タグ抽出時にどうせ投稿情報取得するので、ついでに格納しとけ～的な。
新規投稿だけならJSONPのコールバックで直接処理したほうが明らかに効率がいいので、
タグリストに用がないならそうすべきですね。

そんなわけで、
TumblrのAPIがタグの抽出に対応してくれれば不要なライブラリです。
まとめ書きながらなんかへこんできました…

私も早速試してみたので、雑感などを。

やはり友達がいると楽しいもの

私自身、Facebookに登録したのは去年の5月でしたが、
登録したっきり何をするわけでもなく放置してしまっていました。
というのも、Facebook上でやりとりする相手が居なかった。

今回のお祭り騒ぎでTwitterのフォロワーさんを中心に、
今までほぼ皆無だったFacebookの友人が増えました。
やっぱり、友達が居るとネットワークサービスは楽しい。当たり前ですが。

結局は周りに流されたい

そんなわけで、どうせ試すなら賑やかな今、便乗すべきですよね。
友達がいなければ機能を試そうにも試しようがないわけで。

結局の所ネットワークサービスは長いものに巻かれたい。
というよりは自分の周囲の人がどれだけ使っているかにあわせたい。
周りに流されてなんぼ、「周り」が居てこそ面白いんです。
ミーハー、大いに結構じゃないですか。

でもプラットフォームはあまり増やしたくない

今後使っていくかどうかは、
ひとえに周囲にあわせていく感じではあるのですが…

個人的には、プラットフォーム的な物をこれ以上増やしたくないという気持ちが強いです。
Twitter・Tumblr・ブログ、そしてFacebookと。
それぞれの活かし方をきちんと考えてあげないと、
自分の情報が色んなサービスに散らばってしまって管理が行き届かなくなってしまう。
Web上に漂う自分の分身がボケたりブレたりしてしまう感覚。
これは気持ち悪い！

発言を同期する程度の仕組みは用意されてますが、
それはちょっと求めている物と違います。
結局発言の先にあるコミュニケーションというのは、
それぞれのサービス自体の物に因る事になるわけですから。

とりあえず、祭に揉まれながら活かす道について思いを巡らしてみようと思います。
Facebookアプリにも少し興味がありますね！

以上、まとまりのない雑感でした。

jqury.sharelink.js

Download:
mach3’s js-jquery-sharelink at master – GitHub

SNSのシェアページへのリンクをa要素に付加するだけの単純な内容です。
デフォルトでは現在表示されているページの情報を渡しますが、
オプションで指定すればURLとタイトルを指定する事も出来ます。

各サービスで提供されているコードを使いたくない時や、
調べるのがめんどくさい時に役立てて頂ければ。

対応しているサービス

• Twitter
• Facebook (Share)
• Livedoorクリップ
• はてなブックマーク
• Delicious
• Googleブックマーク
• Yahoo!ブックマーク

簡単な例

クラス「share-twitter」がついたa要素に
Twitterのシェアページへのリンクを付加します。

$("a.share-twitter").sharelink("twitter");

オプションを用いる例

シェアしたいURLとタイトルを指定します。
オプションは、第二引数のオプジェクトで渡します。

$("a.share-twitter").sharelink("twitter",{
    url:"http://www.example.com",
    title:"EXAMPLE.com"
});

使用可能なオプション

url (string) = location.href

シェアしたいページのURL

title (string) = document.title

シェアしたいページのタイトル

target (string) = “_blank”

ターゲットウィンドウ

encode (boolean) = true

URLとタイトルをURLエンコードするかどうかのブール値

デモ

jQueryのプラグインでJSDocを使う時は
どのように書くのが正しいのだろうか…悩み中。

1. シェアボタンについて
2. Twitter
3. Facebook
4. Livedoorクリップ
5. はてなブックマーク
6. Delicious
7. Googleブックマーク
8. Yahoo!ブックマーク
9. おわりに

シェアボタンについて

よくブログ記事の下部に設置されている連中ですね。
基本的にどのサービスも共有用のURLが用意されていて、
そこにシェアしたいURLとタイトルをパラメータで添えてアクセスします。
（サービスによってはタイトルを自動的に取得しに行くタイプの物もあります）

配布されているコードをコピー＆ペーストすれば簡単に設置出来ますが、
コードの内容やボタンのデザイン等がサイトにそぐわなかったり、
メンテナンスの都合等で制作者が自分でつくりこみたいケースもあります。
そういった場合は下記にまとめたURLとパラメータをa要素に記述してやります。

パラメータについて

[url]

シェアしたいページのURL

[title]

シェアしたいページのタイトル

※渡すURLとタイトルは、きちんとURLエンコードしてあげましょう。

Twitter

URL

http://twitter.com/share?url=[url]&text=[title]

例

<a href="http://twitter.com/share?url=http%3A%2F%2Fwww.example.com&title=SamplePageTitle" target="_blank">Share on Twitter !</a>

Facebook

url

http://www.facebook.com/sharer.php?u=[url]

例

<a href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.example.com" target="_blank">Share on Facebook !</a>

Livedoorクリップ

url

http://clip.livedoor.com/clip/add?link=[url]&title=[title]

例

<a href="http://clip.livedoor.com/clip/add?link=http%3A%2F%2Fwww.example.com&title=SamplePageTitle" target="_blank">Share on Livedoor Clip !</a>

はてなブックマーク

url

http://b.hatena.ne.jp/add?url=[url]

例

<a href="http://b.hatena.ne.jp/add?url=http%3A%2F%2Fwww.example.com" target="_blank">Share on Hatena !</a>

Delicious

url

http://www.delicious.com/save?url=[url]&title=[title]

例

<a href="http://www.delicious.com/save?url=http%3A%2F%2Fwww.example.com&title=SamplePageTitle" target="_blank">Share on Delicious !</a>

Googleブックマーク

url

例

[Share on Google Bookmark !][13]

Yahoo!ブックマーク

url

http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t=[title]&u=[url]&ei=UTF-8

例

<a href="http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t=SamplePageTitle&u=http%3A%2F%2Fwww.example.com&ei=UTF-8" target="_blank">Share on Yahoo! Bookmark !</a>

おわりに

静的HTMLにこれらのパーツを組み込む案件があったのでまとめてみました。
ただ、実際1ページずつ組み込んで行くのは非常に生産性が悪いので、
JavaScriptで一括して処理しました。
そちらもプラグインにでも昇華出来た折にはまとめたいと思います。

※「このサービスも追加してくれ！」等ありましたら是非に。

2010/09/07

はてなブックマークのURLに誤りがあったので記事・DEMO共に修正しました

※Subversionが既に導入されているlinux環境が対象です。

まず、英語版の取得から。
インストールしたいバージョン（ここでは3.0.1）のリポジトリから、
現在のディレクトリにファイルをチェックアウトします。

svn co http://core.svn.wordpress.org/tags/3.0.1/ .

※ベータ版が使用したい場合は、こちらのURLを使いましょう。

→ http://core.svn.wordpress.org/trunk/

※他のバージョンを使用したい場合は、こちらから選びます。
→ http://core.svn.wordpress.org/tags/

次に日本語化ですが、こちらもリポジトリで公開されているので
一時ディレクトリ（ここでは「jp」）を作ってそこに取得します。

$ mkdir jp $ svn co http://svn.automattic.com/wordpress-i18n/ja/tags/3.0.1/ jp/

取得された日本語リソースのうち、messageディレクトリ内のmoファイルを
wp-content/languages/ にコピーします。

$ mkdir wp-content/languages $ cp jp/messages/*.mo wp-content/languages

仕上げは、wp-config.php を作成して、言語の設定をしてやります。

$ cp wp-config-sample.php wp-config.php $ vi wp-config.php

該当の部分はここ。
WPLANGの値が空白になっているので「ja」を入れてあげます。

define ('WPLANG', 'ja');

せっかくwp-config.phpを開いているので、
ついでにDBの設定なんかもやっておきましょうね。

これで無事日本語環境になりましたでしょうか。
SVNで管理しておけばバージョンの上げ下げも比較的楽になるはずですね。

参考サイトなど

• 20 Steps to a Flexible and Secure WordPress Installation | Nettuts+
• WordPress | 日本語 » 日本語リソースのインストール

追記

GitHubにも同期されたリポジトリがあるので、
より身近なgit環境で作業しても良いですね。

• WordPress/WordPress

ツイートをブログ等に埋め込める「Blackbird Pie」が公開されていたので試してみました。

Blackbird Pie – Twitter Media

使い方は至ってシンプルで、
URLを入力して「Bake It」をクリックしてパイを焼きあげます。
URLは、個別ツイート画面のURLでなければなりません。
「何時間前」等のリンクから遷移できるあれですね。

すると、埋め込まれるツイートのプレビューと
埋め込む為のHTMLコードが表示されます。
あとはそのHTMLコードをブログのエントリーに挿入するだけ。

こんな感じに埋め込む事が出来ます。実に簡単。
ユーザのページで設定されているスタイルがCSSとして一緒に埋め込まれるので、
見た目も実際の物に近い感じに表示されます。

ただ、まだ試行錯誤の段階の様で、
「もっと短いコードにする」「実際のタイムスタンプを挿入する」
等の問題点がToDoにあげられています。確かにすごく冗長なコードです。

余談。Blackbirdはイギリスではクロウタドリ、ただし米語ではクロムクドリモドキを指すそうな。
米国の会社なので後者なのでしょうか。どちらも知らない鳥ですが…
そもそもTwitterのロゴの鳥は何という鳥なのか、金属なのか粘土なのか。

先日リリースされた@anywhere、いわゆる「どこでもTwitter」を試してみました。
Twitterと連動するマッシュアップサイトを作るのに便利そうな@anywhereですが、
ブログ等でも簡単に部品を組み込むのに活用できます。

こちらもあわせて

@anywhereで認証してみる備忘録

0. 準備をしよう！

まずはAPIの取得から。こちらで登録をしましょう。
New Twitter Application | dev.twitter.com
必要事項を明記のうえ、Register Applicationをクリック。

登録が済んだら、APIキーが配布されます。
そのAPIキーを元に、ロードするJSファイルのURLを作りましょう。

<script src="http://platform.twitter.com/anywhere.js?id=YOUR_API_KEY&amp;v=1" type="text/javascript"></script>

YOUR_API_KEYの部分に配布されたAPIキーを代入します。
このscript要素をHTMLの中に記述すれば、準備完了です。

1. JavaScriptの書き方の基本

@anywhereのスクリプティングの基本はこんな感じです。

twtr.anywhere( function( tw ){
    tw.linkifyUsers(); // or do something
} );

twtr.anywhere() はjQuery.ready() みたいなもので、
@anywhereを使う準備が整うと、渡されたfunctionを走らせます。
そのfunctionに渡される引数（ここでは「tw」）が、
@anywhereの様々な機能を提供してくれるオブジェクトとなっています。

2. followmeボタンをつけてみる

こういうやつですね。 まずフォローミーボタンを表示させる場所を次のようにマークアップするとします。

<span id="#myFollowMeButton"></span>

idはお好きな名前をつけましょう。 次にスクリプトです。

twtr.anywhere( function( tw ){
    tw("#myFollowMeButton").followmeyButton("mach3ss");
} );

実にjQueryライクな！CSSセレクタエンジンもjQueryと同じSizzleです。
followmeyButton() の引数には、自分のアカウントを@抜きで渡してあげましょう。

3. ホバーカードを表示してみる

こういうやつです。 HTMLはこんな感じにしてみます。

<p id="MyProfile">TwitterAccount : @mach3ss </p>

そしてスクリプトです。

twtr.anywhere( function( tw ){
    tw("#MyProfile").hoverCards();
} );

これで、「mach3ss」の部分にリンクが張られ、
マウスオーバーする事でプロフィールのカードが表示されるようになります。

尚、ユーザーネームの部分に既にリンクが張ってあったりする場合はうまく動作しない場合があります。
その場合には、inferオプションやlinkifyオプションを活用しましょう。詳しくは↓で！
Welcome to @Anywhere | dev.twitter.com

4. ツイートボックスを表示してみる

こういうやつ。
コメント欄の変わりにTwitterにつぶやいてもらう、というのもアリだと思います。

HTMLはこんな感じで。

<span id="#myTweetBox"></span>

スクリプト。

twtr.anywhere( function( tw ){
    tw("#myTweetBox").tweetBox( {
        width : 580,
        label : "コメントをつぶやく",
        defaultContent : "#blogmach3jp @mach3ss"
    } );
} );

オプションをオブジェクトリテラルで渡します。
内容は以下の通り。

counter : Boolean = true

文字カウンターを表示/非表示

height : Number = 515

ツイートボックスの高さ

width : Number = 65

ツイートボックスの幅

label : String = “What’s happening?”

ツイートボックスの上に表示されるラベルの文字列

defaultContent : String = none

ツイートボックス内のデフォルト値

onTweet : Function = none

ツイートボックスから送信された時に呼ばれるイベントリスナーを登録。

defaultContentにハッシュタグや自分のユーザー名を入れておくと便利ですね。

5. もっと色々したい！

という方は公式のドキュメントをご参照ください。
Welcome to @Anywhere | dev.twitter.com

認証関連の情報なども色々記載されています。

フロントエンドの技術者さん達も、@anywhereの登場で
かなり実装が楽になったのではないでしょうか。
創作意欲がわいてきますね！