IT戦記

プログラミング、起業などについて書いているプログラマーのブログです😚

トップ > Mixi

フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か

Mixi Facebook

みなさん、こんにちは

お元気ですか？僕は元気です。

さて

最近よく、「いいね！」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。

そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。
OGP? おーじーぴー？？とはなんでしょうか。

OGP とは

簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。
まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。
ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別することが難しいのです。
なので、決まった OGP という書き方で HTML に情報を付加しておくことで、プログラムからも意味を理解しやすいウェブページを作っていこうってことです。

なぜ、これが重要か

「いいね！」ボタンや「チェック」ボタンで、ウェブページが紹介されるようになって、ウェブ中の様々なウェブページがどんどん SNS の中に流れ込んでくるようになっているんですね。
で、そうすると当然 SNS の中でそのページをどう表現すればいいか（リンクテキストはどうすべきか、画像はどうすべきか、どこに表示すべきか）という問題が出てきます。
そこで、最近さまざまな SNS サイトで使われるようになった仕様が OGP なんですね。
SNS だけでなく、これからは様々なサイトで「ウェブ上に書かれたモノ」と「人」をつないで行く時代になると思います。
OGP も SNS だけに留まらず、そのほかのサイトでもどんどん使われるようになっていくのだと思います。

具体的にはどう書くの？

さて、では具体的にどのように書くのか、その一例を見せたいと思います。
たとえば僕のブログのトップページについて OGP で記述すると、以下のようになります。

<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#">
  <head>
    <title>IT戦記 - はてなダイアリー</title>
    <meta property="og:title" content="IT戦記">
    <meta property="og:type" content="blog">
    <meta property="og:description" content="IT戦士あまちゃんが、日々思ったことやウェブのことプログラミングのことを書いている日記的なブログです。">
    <meta property="og:url" content="http://d.hatena.ne.jp/amachang/">
    <meta property="og:image" content="http://www.st-hatena.com/users/am/amachang/user.jpg">
    <meta property="og:site_name" content="はてなダイアリー">
    <meta property="og:email" content="seijro@gmail.com">
    <meta property="og:phone_number" content="080-1266-2159">
  </head>
  <body>

簡単に説明すると

  • og:type
    • このウェブページが何のページであるかを記述（必須）
  • og:title
    • このウェブページが記述しているモノの名前（必須）
  • og:image
    • このウェブページが記述しているモノの画像（必須）
  • og:url
    • このウェブページの正式な URL（必須）
  • og:description
    • このウェブページの説明
  • og:site_name
    • このウェブページが何かのサイトに所属する場合そのサイト名
  • og:email, og:phone_number
    • 連絡先

詳細はThe Open Graph protocolに記述されています。
まあ、要はウェブページの情報を HTML 上の meta 要素として記述するんですね！簡単ですよね！

フェイスブックでの使われ方

ちょっと概要ばっかりだとピンとこないと思うので、具体的にフェイスブックでこの情報がどんな感じで使われるかを見てみましょう。
フェイスブックでは、以下の 4 つの箇所で OGP の情報を使っています。

  • 「いいね！」した人のウォール（「いいね！」した瞬間）
  • 「シェア」した人のウォール
  • 「いいね！」した人のプロフィール
  • 「いいね！」した人のウォール（「いいね！」した後日）

ひとつひとつ具体例を見てます。

「いいね！」した人のウォール（「いいね！」した瞬間）での OGP の使われ方

まずは、「いいね！」を押した人のウォールに書き込まれる文言についてです。
OGP の情報によって表示されるリンクテキストを変えることができます。
たとえば、ちょっとサンプルとして以下のようなウェブページを用意してみました。
http://callee.jp/ogp/003.html
このウェブページでは、まったく OGP を使っていません。
これを「いいね！」すると以下のようにウォールに流れます。

こんな感じでドメイン名のトップとタイトルがそれぞれリンクされます。（場合によっては、ドメイン名の変わりにトップページのタイトルが入ったりします。）
そこで、以下のようにウェブページ og:title と og:site_name という property 属性を持った meta 要素を追加してみます。

<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#">
  <head>
    ...
    <meta property="og:title" content="タイトルだよ">
    <meta property="og:site_name" content="サイト名だよ">
    ...
  </head>

http://callee.jp/ogp/004.html
そうすると、以下のようにリンクテキストをカスタマイズすることが出来ます。

リンクテキストの重要性

リンクテキストはストリーム型の SNS では非常に重要な要素だと思います。
たとえば、以下の二つがウォールに流れてきた場合にどちらをクリックしたくなるでしょうか。

見た目の印象が全然違いますね。
なので、フェイスブックの「いいね！」をページに置くときは og:title と og:site_name は書いたほうがいいでしょう。

「シェア」した人のウォールでの OGP の使われ方

次は、リンクを「シェア」した瞬間にその人のウォールに表示される文言や画像についてです。
ここでも、 OGP の情報によってリンクテキストや画像や概要の文言を変えることができます。
たとえば、以下の URL を「いいね！」すると
http://callee.jp/ogp/007.html
以下の画像のような感じにウォールに表示されます。

「画像」と「ウェブページのタイトル」と「ドメイン」と、場合によっては、「概要」が挿入されていますね。
これを、以下のような meta 要素を挿入すると

<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#">
  <head>
    ...
    <meta property="og:title" content="おーじーぴーのテスト">
    <meta property="og:description" content="これは、あまちゃんが Open Graph Protocol の挙動を試すために用意したページです。">
    <meta property="og:image" content="http://callee.jp/ogp/full_moon.jpg">
    ...
  </head>

http://callee.jp/ogp/009.html
以下のように、「画像」と「ウェブページのタイトル」と「概要」をカスタマイズすることが出来ます。

音声や動画を添付する方法

また OGP の情報を使ってシェアされたリンクに音声や動画を添付することが出来ます。
以下は、音声を添付する例です。

<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#">
  <head>
    ...
    <meta property="og:audio" content="http://callee.jp/ogp/audio.mp3">
    <meta property="og:audio:title" content="すごい歌">
    <meta property="og:audio:artist" content="すごいバンド">
    <meta property="og:audio:album" content="すごいアルバム">
    <meta property="og:audio:type" content="application/mp3" />
    ...
  </head>

http://callee.jp/ogp/015.html
添付された音声は、以下のようにウォールに表示されます。

以下は、動画を添付する例です。

<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#">
  <head>
    ...
    <meta property="og:video" content="http://callee.jp/ogp/movie.flv">
    <meta property="og:video:width" content="450">
    <meta property="og:video:height" content="390">
    <meta property="og:video:type" content="application/x-shockwave-flash" />
    ...
  </head>

ちなみに、動画を添付するには以下のフォームでサイトの審査の申請をする必要があるようです。
http://www.facebook.com/help/contact.php?show_form=video_embed_whitelist

「いいね！」した人のプロフィールでの OGP の使われ方

また、以下のように og:type と fb:admins が設定されていると、

<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#"
    xmlns:fb="http://www.facebook.com/2008/fbml">
  <head>
    ...
    <meta property="og:title" content="おーじーぴー・ザ・ムービー">
    <meta property="og:type" content="movie">
    <meta property="fb:admins" content="amachang">
    <meta property="og:image" content="http://callee.jp/ogp/amachang.gif">
    ...
  </head>

http://callee.jp/ogp/011.html
以下のような感じで og:type で指定した種類のモノとしてプロフィールに登録されます。

ここで、このリンクをクリックすると「いいね！」したウェブページに飛びます。
ただ、ちょっとややこしいんですが、 fb:admins で指定したフェイスブックのユーザーだけは違う挙動をします。
fb:admins で指定したユーザーは、そのページの管理人となります。
管理人は、次の項で示すようにそのページを「いいね！」した人のウォールにあとからお知らせを流すことが出来ます。

「いいね！」した人のウォール（「いいね！」した後日）での OGP の使われ方

前に述べたように、「いいね！」した人のウォールに後日お知らせを流すことが出来ます。
このお知らせは、管理ページ（ファンページに似たページ）から流すことが出来ます。
管理ページへは、前述した fb:admins で指定されたフェイスブックユーザーで、ウェブページの以下の部分をクリックすることで行くことができます。

管理ページは、以下のようにファンページのような感じです。

ただ、このファンページは管理者からしか見えないファンページで、「お知らせを流す用途」にだけ使います。
たとえば、以下のようにすると

以下のようにウォールにポストされます。

で、この名前の部分をクリックするとまたウェブページに人を呼び戻すことができます。（ただ、管理者がクリックした場合は、管理ページに飛ばされます。）
つまり、この機能を使うと外部サイトに内部ファンページと同等のユーザーの呼び戻し機能を付加することが出来るということです。
これは、非常に有益になってくると思います。重要ですよ！
あと、ひとつだけ注意すべきなのは og:type が article なものはこのお知らせの機能は使えません。
これは、 article は一時的なものでリアルなモノを指さない（ブログの記事など、それ自体がファンの対象ではない）からだそうです。

fb:admins の代わりに fb:app_id を使う

fb:admins を使って、手動でお知らせを流すことが出来るのは良い機能なのですが、一つのサイトにたくさんのウェブページがあって、たくさんの「いいね！」があった場合は一個一個のページに対して管理していくのは大変ですね。
そんな場合は、 fb:admins の代わりに fb:app_id を使うことで、プログラムからそれらの作業を自動化することが出来ます。
やり方としては、以下のページからお知らせ専用のフェイスブックアプリを作ります。
Facebook for Developers | F8 Facebook開発者向けカンファレンス: 5月1～2日

で、以下の ID を

以下のように fb:app_id として設定します。

<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#"
    xmlns:fb="http://www.facebook.com/2008/fbml">
  <head>
    ...
    <meta property="og:title" content="おーじーぴー・ザ・ムービー２">
    <meta property="og:type" content="movie">
    <meta property="fb:app_id" content="168986543145706">
    <meta property="og:image" content="http://callee.jp/ogp/amachang.gif">
    ...
  </head>

http://callee.jp/ogp/012.html
この際、以下のようにアプリケーションの設定でドメインと URL を指定しておく必要があります。

そうしたら、まず access_token （アプリケーション自身が、アプリケーションのリソースを自由に使うための認可を示す文字列）を取得します。
コマンドラインで以下のように叩きます。

# まず、アプリケーションがアプリケーション自身のリソースにアクセスするための認可を取得する
curl -F type=client_cred -F client_id=168986543145706 -F client_secret=アプリケーションの秘密鍵https://graph.facebook.com/oauth/access_token

# 次に、 URL を指定してお知らせを流す
curl -F "access_token=上のコマンドで取得できたaccess_token" -F message="Hey guys" -F id=http://callee.jp/ogp/012.html https://graph.facebook.com/feed

簡単でしょ？
このようにすると、以下のようにストリームに流れるのです。

ミクシィやグリーでの使われ方

ミクシィやグリーでは、主に「いいね！」や「チェック」したときにストリームに流れる情報の以下の三つの指定に使われます。

プロフィールへのプッシュや、あとからお知らせを流したりする機能はないと思います（あったらすみません）

OGP のこれから

このように、大手 SNS がこぞって OGP を採用したことによって、今後ますますウェブページでの OGP の利用が進んでいくのだろうと思っています。
とくに、トラフィックの重要度が高いメディアや大手ブログでの OGP の利用が進むのではないでしょうか。（はてなダイアリーでも、早く対応してくれないとユーザーがスネちゃうぞ＞＜）
また、様々なウェブページの OGP 利用を始めることで、その情報を活用するサイトも増えてくると思います。
まず、ソーシャルブックマークサイトや Twib などのように URL に紐づいた情報をたくさん持っているサイトでの活用が思い浮かびます。情報として URL を大量に持っていて、さらに OGP によって「URL が何を示すものか」が分かるようになる訳ですから「URL をブックマークするサイト」から「リアルオブジェクトをブックマークするサイト」に進化することが出来る訳ですね！
たとえば、はてなブックマークで考えてみると URL を基にした「人気エントリ」だけではなく、リアルオブジェクトを基にした「人気の本」とか「人気の映画」とか「人気のアスリート」とか「人気の人」とか「人気の場所」とか「人気の店」とか、色んな切り口で表現できるようになれるわけです。
なんかわくわくしますね！

と、いうわけで

今回は OGP （Open Graph Protocol）について紹介いたしました。
OGP、おもしろくないですか？
この記事を読んで興味を持った人は、ぜひ自分のウェブページに OGP の情報を付加してみませんか？
また、これから何か URL に紐づいたデータを扱うようなサービスを作ろうとしているなら、 OGP の情報を活用してみるとおもしろいのではないでしょうか？
ではではーヽ(´ー｀)ノ

はてなダイアリーにいいねボタンを置く方法

JavaScript Facebook Twitter Mixi

たっち！


みなさん、こんにちは

お元気ですか、僕はアイスのあとラーメンを食べて気持ち悪い状態ですが元気です。

さてさて

最近は、フェイスブックやミクシィやツイッターなどの SNS で面白いと思ったモノを紹介し合う文化が定着してきているような気がします。
そんな中で、ウェブページを紹介するために使われるためにウェブページに置かれるものが「いいね！」ボタンだったり、「ツイート」ボタンだったりするわけですね。
というわけで、はてなダイアリーにそういったボタンを配置する方法を紹介したいと思います。
ここで紹介する方法は、ちゃんと理解して置きたい人向け、 XML や HTML を分かっている人向けとなります。

はてなダイアリーには自由な HTML を貼り付けられない

まあ、普通に自由に HTML を貼り付けられる環境であれば、ただ単に提供されるボタン用の HTML を張り付けるだけなので簡単です。
でも、はてなダイアリーの場合は自由な HTML を貼り付けることが出来ません。*1
と言うわけで、はてなの許可された形の HTML 内で貼り付ける必要があるわけですね

グーグルガジェットの作り方

グーグルガジェットとは、様々なページに貼り付けやすいように設計されたブログパーツみたいなもんです。
はてなダイアリーにはグーグルガジェット用の HTML を張り付けることが出来るので、グーグルガジェットとして様々なボタンを貼り付けようということですね。

まず、簡単な XML を書く

グーグルガジェットは、以下のような XML ファイルをどこか URL を持つ場所に公開すれば良いです。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" />
<Content type="html"><![CDATA[

ここにボタンの HTML を貼り付ける

]]></Content>
</Module>
XML からグーグルガジェット用の HTML を取得する

たとえば、上の XML を http://callee.jp/socialbuttons/sample/000.xml に置いてみました。
これから HTML を作るには http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/000.xml にアクセスして、「Get the Code」を押します。そうすると HTML が表示されると思います。
具体的には以下のようなものです。

<script src="http://www.gmodules.com/ig/ifr?url=http://callee.jp/socialbuttons/sample/000.xml&amp;synd=open&amp;w=720&amp;h=150&amp;title=%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AA%E3%83%BC%E3%82%BD%E3%83%BC%E3%82%B7%E3%83%A3%E3%83%AB%E3%83%9C%E3%82%BF%E3%83%B3&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>

これをはてなダイアリーの日記に貼り付ければ良いのです。

これで

グーグルガジェットは作れるようになりましたね。
次は、具体的に様々なボタンをこのグーグルガジェットを書いてみましょう。

グーグルガジェットにツイッターのボタンを貼り付ける

ツイッター用のツイートボタンは、以下のページから作ることが出来ます。
http://twitter.com/goodies/tweetbutton

今回は以下のように作りました


水平方向にカウントを表示

とりあえずツイートテキストは適当に入れておきます（グーグルガジェットの場合、タイトルの自動取得はうまくいきません。）

とりあえず URL も適当に入れておきます（グーグルガジェット内の場合、 URL の自動取得はうまくいきません。）

言語は日本語で

一緒にツイッターユーザー名もツイートさせることもできますが、これは使いません（とくに理由はありません）

そうすると、 HTML が出来ますね。

で、貼り付けるとグーグルガジェットの XML は以下みたいな感じになります。
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" />
<Content type="html"><![CDATA[

<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://d.hatena.ne.jp/amachang/" data-text="IT戦記" data-count="horizontal" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

]]></Content>
</Module>
この XML を試したい場合は以下で試せます

http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/001.xml

次に、フェイスブックのボタンを貼り付ける

フェイスブックのいいね！ボタンは以下のページで作ることができます。
いいね！ボタン - ソーシャルプラグイン - ドキュメンテーション - 開発者向けFacebook

以下のように作ります


なるべく、シンプルなボタンになるようにしてみました。

「Get Code」ボタンを押して、上のほうの iframe って書いてあるテキストボックスから HTML をコピーします。

で、貼り付けるとグーグルガジェットの XML は以下みたいな感じになります。
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" />
<Content type="html"><![CDATA[

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&amp;layout=button_count&amp;show_faces=false&amp;width=110&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>

<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://d.hatena.ne.jp/amachang/" data-text="IT戦記" data-count="horizontal" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

]]></Content>
</Module>
この XML を試したい場合は以下で試せます

http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/002.xml

次に、はてなブックマークのボタンを貼る

はてなブックマークのボタンは以下のページで作ることができます。
はてなブックマークボタンの作成・設置について - はてなブックマーク

以下のように作ってみました


適当に URL とタイトルを入れて、アイコンのタイプを選びます。
右側の HTML をグーグルガジェットの XML に貼り付けます。

で、貼り付けるとグーグルガジェットの XML は以下みたいな感じになります。
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" />
<Content type="html"><![CDATA[

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&amp;layout=button_count&amp;show_faces=false&amp;width=110&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>

<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://d.hatena.ne.jp/amachang/" data-text="IT戦記" data-count="horizontal" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<a href="http://b.hatena.ne.jp/entry/http://d.hatena.ne.jp/amachang/" class="hatena-bookmark-button" data-hatena-bookmark-title="IT戦記" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

]]></Content>
</Module>
この XML を試したい場合は以下で試せます

http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/003.xml

最後にミクシィイイネ！ボタンを貼り付ける

ミクシィのチェックボタンを作るのは結構めんどくさいです。

まず、 mixi Plugin の登録をする

以下のページに行きます
ソーシャル・ネットワーキング サービス [mixi(ミクシィ)]

新規サービスの追加を押します。

このように必要事項を埋めて、同意→作成と進みます

HTML を取得する

このページの一覧から、以下のようなページに進むことが出来ます

上記のように設定してタグを取得してみます

で、貼り付けるとグーグルガジェットの XML は以下みたいな感じになります。
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" />
<Content type="html"><![CDATA[

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&amp;layout=button_count&amp;show_faces=false&amp;width=110&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>

<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://d.hatena.ne.jp/amachang/" data-text="IT戦記" data-count="horizontal" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<a href="http://b.hatena.ne.jp/entry/http://d.hatena.ne.jp/amachang/" class="hatena-bookmark-button" data-hatena-bookmark-title="IT戦記" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

<iframe scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:140px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140"></iframe>

]]></Content>
</Module>
この XML を試したい場合は以下で試せます

http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/004.xml

対象 URL、タイトルをカスタマイズ可能にする

とりあえずだいぶ出来てきましたが、この手順を毎回ブログを書くたびに行うのは面倒です。なので、 URL やタイトルなどはカスタマイズ可能にしておきましょう。

UserPref という仕組みを使う

さっきまでの URL に以下のように UserPref というタグを追加します。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" />
<UserPref name="articleUrl" datatype="string" display_name="記事の URL" required="true" />
<UserPref name="articleTitle" datatype="string" display_name="記事のタイトル" required="true" />
<Content type="html"><![CDATA[
...省略
]]></Content>
</Module>
UserPref の値を HTML の中で使う

_IG_Prefs というオブジェクトを HTML の中の JavaScript から使うことが出来ます。
最終的には、以下のような感じになります。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" />
<UserPref name="articleUrl" datatype="string" display_name="記事の URL" required="true" />
<UserPref name="articleTitle" datatype="string" display_name="記事のタイトル" required="true" />
<Content type="html"><![CDATA[

<iframe id="facebook-like-for-article" src="" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>

<a id="twitter-share-for-article" href="http://twitter.com/share" class="twitter-share-button" data-url="" data-text="" data-count="horizontal" data-lang="ja">Tweet</a>

<a id="hatena-bookmark-for-article" href="" class="hatena-bookmark-button" data-hatena-bookmark-title="" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>

<iframe id="mixi-check-for-article" scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:140px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140"></iframe>

<script type="text/javascript">
/* Get UserPrefs Values */
var prefs = new _IG_Prefs();
var articleUrl = prefs.getString('articleUrl');
var articleTitle = prefs.getString('articleTitle');

/* Facebook Like for Article */
var facebookLikeForArticleEl = document.getElementById('facebook-like-for-article');
facebookLikeForArticleEl.src = 'http://www.facebook.com/plugins/like.php?href=' + encodeURIComponent(articleUrl) + '&layout=button_count&show_faces=true&width=110&action=like&colorscheme=light&height=21';

/* Twitter Share for Article */
var twitterShareForArticleEl = document.getElementById('twitter-share-for-article');
twitterShareForArticleEl.setAttribute('data-url',  articleUrl);
twitterShareForArticleEl.setAttribute('data-text', articleTitle);

/* Hatena Bookmark for Article */
var hatenaBookmarkForArticleEl = document.getElementById('hatena-bookmark-for-article');
hatenaBookmarkForArticleEl.href = 'http://b.hatena.ne.jp/entry/' + articleUrl;
hatenaBookmarkForArticleEl.setAttribute('data-hatena-bookmark-title', articleTitle);

/* Mixi Check for Article */
var mixiCheckForArticleEl = document.getElementById('mixi-check-for-article');
mixiCheckForArticleEl.src = 'http://plugins.mixi.jp/favorite.pl?href=' + encodeURIComponent(articleUrl) + '&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140'

</script>
<!-- Twitter Share for Article -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<!-- Hatena Bookmark for Article -->
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
]]></Content>
</Module>
この XML を試したい場合は以下で試せます

http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/005.xml

グーグルガジェット内のデザインを調整

次に、グーグルガジェット内のデザインを調整

以下のように構造化して、適当に CSS を書きます
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="500" height="21" />
<UserPref name="articleUrl" datatype="string" display_name="記事の URL" required="true" default-value="http://d.hatena.ne.jp/"/>
<UserPref name="articleTitle" datatype="string" display_name="記事のタイトル" required="true" default-value="title" />
<UserPref name="backgroundColor" datatype="string" display_name="背景色" required="true" default-value="#FFFFFF" />
<Content type="html"><![CDATA[
<style>
body, html {
    overflow: hidden;
    margin: 0;
}

body {
    font-size: 14px;
    font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    list-style: none;
}

#mixi-check-for-article {
    margin: 0 0 0 5px;
}
</style>

<ul>

    <li><iframe id="facebook-like-for-article" src="" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe></li>

    <li><a id="twitter-share-for-article" href="http://twitter.com/share" class="twitter-share-button" data-url="" data-text="" data-count="horizontal" data-lang="ja">Tweet</a></li>

    <li><a id="hatena-bookmark-for-article" href="" class="hatena-bookmark-button" data-hatena-bookmark-title="" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a></li>

    <li><iframe id="mixi-check-for-article" scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:140px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140"></iframe></li>

</ul>

<script type="text/javascript">
var prefs = new _IG_Prefs();
var articleUrl = prefs.getString('articleUrl');
var articleTitle = prefs.getString('articleTitle');

document.body.style.background = prefs.getString('backgroundColor');

/* Facebook Like for Article */
var facebookLikeForArticleEl = document.getElementById('facebook-like-for-article');
facebookLikeForArticleEl.src = 'http://www.facebook.com/plugins/like.php?href=' + encodeURIComponent(articleUrl) + '&layout=button_count&show_faces=true&width=110&action=like&colorscheme=light&height=21';

/* Twitter Share for Article */
var twitterShareForArticleEl = document.getElementById('twitter-share-for-article');
twitterShareForArticleEl.setAttribute('data-url',  articleUrl);
twitterShareForArticleEl.setAttribute('data-text', articleTitle);

/* Hatena Bookmark for Article */
var hatenaBookmarkForArticleEl = document.getElementById('hatena-bookmark-for-article');
hatenaBookmarkForArticleEl.href = 'http://b.hatena.ne.jp/entry/' + articleUrl;
hatenaBookmarkForArticleEl.setAttribute('data-hatena-bookmark-title', articleTitle);

/* Mixi Check for Article */
var mixiCheckForArticleEl = document.getElementById('mixi-check-for-article');
mixiCheckForArticleEl.src = 'http://plugins.mixi.jp/favorite.pl?href=' + encodeURIComponent(articleUrl) + '&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140'

</script>
<!-- Twitter Share for Article -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<!-- Hatena Bookmark for Article -->
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
]]></Content>
</Module>

続けるにはENTERを押すかコマンドを入力してください
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="500" height="21" />
<UserPref name="articleUrl" datatype="string" display_name="記事の URL" required="true" default-value="http://d.hatena.ne.jp/"/>
<UserPref name="articleTitle" datatype="string" display_name="記事のタイトル" required="true" default-value="title" />
<UserPref name="backgroundColor" datatype="string" display_name="背景色" required="true" default-value="#F9F9F9" />
<Content type="html"><![CDATA[
<style>
body, html {
    overflow: hidden;
    margin: 0;
}

body {
    font-size: 14px;
    font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    list-style: none;
}

#mixi-check-for-article {
    margin: 0 0 0 5px;
}
</style>

<ul>

    <li><iframe id="facebook-like-for-article" src="" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe></li>

    <li><a id="twitter-share-for-article" target="_top" href="http://twitter.com/share" class="twitter-share-button" data-url="" data-text="" data-count="horizontal" data-lang="ja">Tweet</a></li>

    <li><a id="hatena-bookmark-for-article" target="_top" href="" class="hatena-bookmark-button" data-hatena-bookmark-title="" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a></li>

    <li><iframe id="mixi-check-for-article" scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:140px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140"></iframe></li>

</ul>

<script type="text/javascript">
var prefs = new _IG_Prefs();
var articleUrl = prefs.getString('articleUrl');
var articleTitle = prefs.getString('articleTitle');

document.body.style.background = prefs.getString('backgroundColor');

/* Facebook Like for Article */
var facebookLikeForArticleEl = document.getElementById('facebook-like-for-article');
facebookLikeForArticleEl.src = 'http://www.facebook.com/plugins/like.php?href=' + encodeURIComponent(articleUrl) + '&layout=button_count&show_faces=true&width=110&action=like&colorscheme=light&height=21';

/* Twitter Share for Article */
var twitterShareForArticleEl = document.getElementById('twitter-share-for-article');
twitterShareForArticleEl.setAttribute('data-url',  articleUrl);
twitterShareForArticleEl.setAttribute('data-text', articleTitle);

/* Hatena Bookmark for Article */
var hatenaBookmarkForArticleEl = document.getElementById('hatena-bookmark-for-article');
hatenaBookmarkForArticleEl.href = 'http://b.hatena.ne.jp/entry/' + articleUrl;
hatenaBookmarkForArticleEl.setAttribute('data-hatena-bookmark-title', articleTitle);

/* Mixi Check for Article */
var mixiCheckForArticleEl = document.getElementById('mixi-check-for-article');
mixiCheckForArticleEl.src = 'http://plugins.mixi.jp/favorite.pl?href=' + encodeURIComponent(articleUrl) + '&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140'

</script>
<!-- Twitter Share for Article -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<!-- Hatena Bookmark for Article -->
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
]]></Content>
</Module>

背景の色は、 IT 戦記の背景色に合わせてみました。

この XML を試したい場合は以下で試せます

http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/006.xml

実際に貼り付ける

次は実際に貼り付けてみましょう。ぺた

以下のように微妙な感じになります


び、微妙ですね。

不要な部分を CSS で隠します

貼り付けられたグーグルガジェットは、以下のような HTML の構造をしています。

  • table.gadget
    • tbody
      • tr
        • td
          • span.title
            • a
      • tr
        • td
      • tr
        • td
          • div
            • iframe （これ以外は不要！！！）
      • tr
        • td
          • a
            • img
        • td
          • span.powered
            • a
            • #text

貼り付ける HTML のそばに以下のような CSS を一緒に貼り付けます。

<style>
/* IE 以外用 */
/* IE では、 nth-child が使えない */
table.gadget tr:nth-child(1), table.gadget tr:nth-child(2), table.gadget tr:nth-child(4) {
    display: none !important;
}

/* IE 用 */
/*  IE ではテーブルはコンテンツがあればつぶれないので、不要なものを消して td の高さを 0px にし iframe だけ残す */
table.gadget td {
    height: 0px !important;
    padding: 0px !important;
}

table.gadget img, table.gadget span, table.gadget a, table.gadget a:hover {
    display: none;
    height: 0px !important;
    font-size: 0px !important;
}

/* 共通 */
table.gadget td, table.gadget tr, table.gadget iframe, table.gadget div ,table.gadget {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}
</style>

この CSS は大変便利なのではてなダイアリーの詳細デザイン設定で、ブログ全体の CSS として設定しておくのもいいかもしれません。

というわけで

ついに完成！！！お疲れ様でした！

こんなめんどくさいことできない＞＜！！！

そういう人のために、汎用化したものも作っておきました。
http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/complete.xml
ここで生成された HTML を、前述した以下の CSS と一緒に貼り付けてくださいね。

<style>
/* IE 以外用 */
/* IE では、 nth-child が使えない */
table.gadget tr:nth-child(1), table.gadget tr:nth-child(2), table.gadget tr:nth-child(4) {
    display: none !important;
}

/* IE 用 */
/*  IE ではテーブルはコンテンツがあればつぶれないので、不要なものを消して td の高さを 0px にし iframe だけ残す */
table.gadget td {
    height: 0px !important;
    padding: 0px !important;
}

table.gadget img, table.gadget span, table.gadget a, table.gadget a:hover {
    display: none;
    height: 0px !important;
    font-size: 0px !important;
}

/* 共通 */
table.gadget td, table.gadget tr, table.gadget iframe, table.gadget div ,table.gadget {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}
</style>
ちなみに僕のブログでは以下のようなの使ってます！

http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/buttons.new.xml?v9

というわけで

みなさんも、はてなダイアリーにいいねボタン貼り付けてみませんか？
ではではーヽ(´ー｀)ノ

*1:管理ページが記事ページとが同じオリジン（Same origin）であるため

Mixi の Gmail 連携機能からマイミクを一括追加するブックマークレット

Mixi JavaScript

Gmail のコンタクトリストからマイミクの追加が出来るようになったみたいですね！

『mixi』の「友人を招待」ページhttp://mixi.jp/invite.plや「メアドでマイミクリクエスト」ページhttp://mixi.jp/add_friend_mail.plにおいて、「Gmail」のアドレス帳を読み込み*1、友人を『mixi』に招待することや、マイミクシィリクエスト（友人登録）を行うことが可能となります。日頃、「Gmail」でやりとりをしている友人・知人については、個別にメールアドレスを入力する必要がなくなるため、簡単に招待やマイミクシィリクエストを行えるようになります。

株式会社ミクシィ

おおお！これはすごい！

これで、知り合いを探す手間が大きく減りますね！！
すばらしい！

というわけで、一括マイミク追加するブックマークレットを書いてみた

使い方はいかのとおり

  1. Mixi にログインする
  2. このページから Google アカウントを登録する
  3. アドレス帳のインポートページ にいく
  4. 以下のブックマークレットをブラウザのロケーションバー（URL が表示されている箇所）にコピー＆ペーストして、エンターキーを押す。
javascript:(function(e) { e.src='http://amachang.sakura.ne.jp/misc/mixi/gmail_follow.js'; document.body.appendChild(e) })(document.createElement('script'))

そうすると、そのページにいる人が全員マイミクに追加されます！

対応ブラウザ

まとめ

便利ですね！

はじめての mixi アプリ

Mixi JavaScript

IE ではたぶん動きません。

友達一覧取得

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="simple mixi Appli">
    <Require feature="opensocial-0.8"/>
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
        <script type="text/javacript">
                var req = opensocial.newDataRequest();
                req.add(req.newFetchPeopleRequest(opensocial.newIdSpec({ userId: 'OWNER', groupId: 'FRIENDS' }), { max: 1000 }), 'friends');
                req.send(function(res) { document.body.innerHTML = res.get('friends').getData().asArray().map(function(p) { return p.getDisplayName() }); });
        </script>
  ]]>
  </Content>
</Module>

友達エクスプローラ

次々にクリックして友達を探索

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="simple mixi Appli">
    <Require feature="opensocial-0.8"/>
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
        <script type="text/javacript">
            var body = document.body;
            (function getFriends(id) {
                var req = opensocial.newDataRequest();
                req.add(req.newFetchPeopleRequest(opensocial.newIdSpec({ userId: id, groupId: 'FRIENDS' }), { max: 1000 }), 'friends');
                req.send(function(res) {
                    body.innerHTML = '';
                    res.get('friends').getData().each(function(p) {
                        var a = document.createElement('a');
                        a.appendChild(document.createTextNode(p.getDisplayName()));
                        a.href = 'javascript:void(0)';
                        a.onclick = function() { getFriends(p.getId()) };
                        a.style.display = 'block';
                        body.appendChild(a);
                    });
                });
            })("OWNER")
        </script>
  ]]>
  </Content>
</Module>

JSDeferred を導入する

非同期処理が多いから。 id:cho45 に感謝

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="simple mixi Appli">
    <Require feature="opensocial-0.8"/>
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
<script type="text/javacript">
/* ... ここに JSDeferred をコピペ ... */
</script>
<script type="text/javacript">

Deferred.define();

function reqPerson() {
    var d = new Deferred();
    var req = opensocial.newDataRequest();
    for (var i = 0; i < arguments.length; i ++) {
        req.add(req.newFetchPersonRequest(arguments[i]), i);
    }
    var length = arguments.length;
    req.send(function(p) {
        var array = []
        for (var i = 0; i < length; i ++) array.push(p.get(i).getData());
        d.call.apply(d, array); 
    });
    return d;
}

reqPerson('OWNER', 'VIEWER').
next(function (owner, viewer) {
    document.body.innerHTML = owner.getField('nickname') + ' x ' + owner.getField('nickname');
}).
error(function(e) {
    console.log(e);
});

</script>
  ]]>
  </Content>
</Module>

アプリ貼った人と通りすがりの人の共通の友達一覧を取得

function reqPeople() {
    var d = new Deferred();
    var req = opensocial.newDataRequest();
    for (var i = 0; i < arguments.length; i ++) {
        req.add(req.newFetchPeopleRequest(opensocial.newIdSpec({ userId: arguments[i][0], groupId: arguments[i][1] }), arguments[i][2]), i);
    }
    var length = arguments.length;
    req.send(function(p) {
        var array = []
        for (var i = 0; i < length; i ++) array.push(p.get(i).getData().asArray());
        console.log(array);
        d.call(array); 
    });
    return d;
}

reqPeople(['OWNER', 'FRIENDS', { max: 1000 }], ['VIEWER', 'FRIENDS', { max: 1000 }]).
next(function (array) {
    var owners = array[0];
    var viewers = array[1];
    var seen = { };
    owners.forEach(function(p) { seen[p.getId()] = true });
    var commons = [];
    viewers.forEach(function(p) { if (p.getId() in seen) commons.push(p) });
    var body = document.body;
    commons.forEach(function(p) {
        var a = document.createElement('a');
        a.href = p.getField('profileUrl');
        a.textContent = p.getDisplayName();
        a.style.display = 'block';
        body.appendChild(a);
    });
}).
error(function(e) {
    console.log(e);
});

出力されたページによって見栄えを買える

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="simple mixi Appli">
    <Require feature="opensocial-0.8"/>
  </ModulePrefs>
  <Content type="html" view="profile">
  <![CDATA[ show_profile.pl, show_friend.pl  ]]>
  </Content>
  <Content type="html" view="canvas">
  <![CDATA[ run_appli.pl ]]>
  </Content>
  <Content type="html" view="home">
  <![CDATA[ home.pl ]]>
  </Content>
</Module>

マイミクのページから直接「足あと」を消せる、グリースモンキー

JavaScript Mixi

はじめに

mixi の足あと機能がパワーアップしましたね！

　「足あと」の機能改善においては、ページデザインのリニューアルと同時に、「マイミクシィ」（友人）の表示に加えて、これまで足あとページでは分からなかった「マイミクシィのマイミクシィ」（友人の友人）についても、アイコンが表示されるようになりました。これらの機能改善により、自分のページを訪れたユーザーとのつながりが、今まで以上に分かりやすくなります。

　また、新機能「自分の足あと」の提供により、自分が訪問した先(プロフィールや日記など)のユーザーのニックネームを、時系列で最大30件表示いたします。なお、意図しないユーザーのページへ訪問してしまったときのために、相手の足あとページから自分の足あとを削除できる機能*1を追加しています。

株式会社ミクシィ

どうやら

自分の足あとを削除できるようになったみたいですね！

ただ

この機能、便利なんですけど「足あと」ページに飛ばなければならないのが少しめんどくさいです＞＜

というわけで

マイミクのページに「足あと」削除リンクを付けるグリースモンキーを書いてみました。

こんな感じです


この「消しちゃう！」を押すと、今日のその人への「足あと」を削除することができます。

ソースコードは以下に貼っておきます

// ==UserScript==
// @name           ashikeshi
// @namespace      http://mixi.jp/
// @include        http://mixi.jp/show_friend.pl?id=*
// ==/UserScript==

var id = location.href.match(/\d+/)[0];
var user = document.evaluate('//h3[1]', document, null, 2, null).stringValue.match(/^(.*)さん\(\d*\)/)[1];
var div = document.createElement('div');
div.className = 'heading14';
div.innerHTML = <dl>
    <dt class="shortline"><strong>@@USERさんへの足あとを</strong></dt>
    <dd>
        <a style="font-size: 1.5em; font-weight: bold" href="http://mixi.jp/delete_log.pl?id=@@ID&amp;date=@@DATE">
            消しちゃう！
        </a>
    </dd>
</dl>.toString()
    .replace(/@@USER/, user)
    .replace(/@@ID/, id)
    .replace(/@@DATE/, function() {
        var date = new Date();
        return date.getFullYear() +
        '-' + (date.getMonth() + 101 + '').substring(1) +
        '-' + (date.getDate() + 100 + '').substring(1);
    });

var p = document.getElementById('bodyContents');
p.insertBefore(div, p.firstChild);

ご自由にお使いください
# E4X 便利ですね＞＜！

mixi の「足あと」ページから「マイミク申請」するグリースモンキー

JavaScript Mixi

はじめに

mixi の足あと機能がパワーアップしましたね！

　「足あと」の機能改善においては、ページデザインのリニューアルと同時に、「マイミクシィ」（友人）の表示に加えて、これまで足あとページでは分からなかった「マイミクシィのマイミクシィ」（友人の友人）についても、アイコンが表示されるようになりました。これらの機能改善により、自分のページを訪れたユーザーとのつながりが、今まで以上に分かりやすくなります。

　また、新機能「自分の足あと」の提供により、自分が訪問した先(プロフィールや日記など)のユーザーのニックネームを、時系列で最大30件表示いたします。なお、意図しないユーザーのページへ訪問してしまったときのために、相手の足あとページから自分の足あとを削除できる機能*1を追加しています。

株式会社ミクシィ

どうやら

「マイミクのマイミク」からの足あとには、しるしがつくようになったようです！

というわけで

マイミクのマイミクは皆マイミクだ、マイミクのわ、わーわ。ってことで、足あとページから「マイミク申請」できるグリースモンキーを書いてみました。

こんな感じです

マウスオーバーすると「マイミク申請しちゃう？」と表示されて、

クリックすると、マイミク申請ページに飛びます。

ソースコードは以下に貼っておきます

// ==UserScript==
// @name           ashitomo
// @namespace      http://mixi.jp/
// @include        http://mixi.jp/show_self_log.pl
// @include        http://mixi.jp/show_log.pl
// ==/UserScript==

var result = document.evaluate('//img[contains(@src,"log_friend002.gif")]', document, null, 7, null);
for (var i = 0; i < result.snapshotLength; i ++) {
    var img = result.snapshotItem(i);
    img.title = 'マイミク申請しちゃう？';
    img.style.cursor = 'pointer';
    var link = img.previousSibling;
    with({ uri : link.href.replace(/show_friend/, 'add_friend') }) {
        img.addEventListener('click', function() { location.href = uri }, false);
    }
}

ご自由にお使いください

mixi 新デザインでグリモン作ったり、スクレイピングしたり、しやすくなった

Mixi JavaScript

今回の mixi のデザインのポイントは

  • 全ページで prototype.js の 1.5.0_rc0 が読み込まれている
  • 新しいデザインのページはテーブルレイアウトじゃない
  • 新しいデザインのページは id class 付きまくり

いろいろ試してみた

prototype.js が読み込まれているか確認する

alert(Prototype.Version); // 1.5.0_rc0

ページ内に id が何個あるか

alert($$('*[id]').length); // トップページに 52 個！

ページ内に class が何個あるか

alert($$('*[class]').length) // トップページに 239 個！

おおすごい！

試しに日記一覧ページから日記の URL を抽出するワンライナー

$$('#bodyMainAreaMain dt a').filter(/view_diary.pl/);

ちなみに、これは Firefox 専用ですが、他のブラウザを考慮してもそれなりに簡単に書けると思います。

まとめ

でも、今までのぐりもん書き直すのめんどいー＞＜