Lolicsystem@? このページをアンテナに追加 RSSフィード

2008-11-23

Pixivのプロフィール画像にdrawrへのリンクを貼り付けるグリースモンキースクリプトを書いたよ

これは何か

僕はpixivdrawrも大好きッコなのです。んで、pixiv でいろんなお絵描きさんの絵を見てる最中に、

「この人うま!!! drawr とかやってたりするかなー、drawr も見てみたい!!!」

…ッッ、とか思ったりしたときに、drawr に行って、そのユーザさんを探そうにも、いまいち探しにくかったり、探してはみたけど結局見つからなかったり、いろいろ面倒くさかったりします。 drawr 側のプロフィール欄には pixiv へのリンクが貼れて便利なのに、なんでその逆は無いんだろう…? とか思ったので、pixivプロフィール画像自画像?)のトコに、drawrリンクするアイコンを付けるグリースモンキースクリプトを書きました。

インストール

Firefoxで、Greasemonkeyインストールしてて、なおかつ pixiv 大好きッコな方は、

http://lolicsystem.com/gm_scripts/pixiv_to_drawr_gateway_0.2.user.js

http://lolicsystem.com/gm_scripts/pixiv_to_drawr_gateway_0.3.user.js *1

からインストールしてくださいー。

そしたら

んで、その後、pixiv を見に行くと、お絵描きさんのプロフィール画像名前の横に、drawr アイコンがひっついてるのが確認できると思います

f:id:lolicsystem:20081123075300j:image

ピンク色のアイコンは、そのお絵描きさんが drawr に参加していることを示してます。アイコンクリックすると、その drawr ページに移動します。


f:id:lolicsystem:20081123075301j:image

グレーのアイコンは、そのお絵描きさんはまだ drawr に参加していないことを示しています。アイコンクリックできません。


f:id:lolicsystem:20081123075302j:image

んで、中途半端な色のアイコンは、そのお絵描きさんが drawr に参加しているのだけれど、まだ絵を投稿していない(投稿枚数 0 枚)であることを示しています。


これなら、そのお絵描きさんがdrawrやってるかどうかがすぐにわかりますし、アイコンクリックすればすぐにそのお絵描きさんのdrawrを見ることができて便利ですよねー。

drawr へのアクセスについて

あるお絵描きさんdrawrページへアクセスすると、そのとき得た情報をGM_setValueでキャッシュし、次にアクセスしようとした時間が24時間以内ならば、キャッシュを使い回すようにしています。

pixivID(これがそのまま、drawrユーザ名になる)は、pixivプロフィール画像URL から取得しています。pixiv は、ユーザに関する操作はほとんど「ユーザ番号」で行い、pixivID をあまり意識させない感じなのですが、ユーザが投稿したイラストプロフィール画像URL に埋め込まれています。

プロフィール画像存在しない場合は、投稿画像URL から、pixivID を取得しています。

はまったところ

まず、pixiv のページ構造で、同じ id を持つ要素がいっぱいあって、ノード指定ではまった。

GM_xmlhttpRequest で drawrアクセスしたとき、お絵描きさんがdrawrをやってない場合、サーバさんは、

  そんな URL ねー。コード302返す!
	 ↓
  そして、http://drawr.net/ に飛ばす!
	 ↓
  http://drawr.net/存在するから、コード200で目出度し!

てな感じになると思うんですけど、この、「302 の状態」を取得する方法がさっぱりわからなかった。ステータスコード見たら 200 が帰ってくるから、てっきり「あー、drawr やってんだ」とか思ってピンク色のアイコン表示してたら、やってねー!! みたいな。

結局、お絵描きさんが drawr をやってるかどうかを判別する方法は、

http://os0x.g.hatena.ne.jp/os0x/20080220/1203472859

で知った、「finalUrl」が http://drawr.net/ だったら、それは 302 で飛ばされちゃったとゆーことで、「グレーアイコン」表示、としました。ふぅ。

あと、JavaScript のことをまず知らないから、いろいろはまりました。アイコンを含む img ノードを、

<div>ほにゃらら</div>

の、「ほにゃらら」の直後に追加したかったのですが、appendChild を使って、「ほにゃらら」の直後に、

<div>ほにゃらら<img src.../></div>

という感じで入れることができなかったので、innerHTML使って、aタグだのimgタグだのを文字列としてぶちこんむことにしました。いろいろ調べた結果、prototype.js の、Insertion.Bottom というのんを使えばできるらしいのですが、よくわかりません。

動作確認

Windows XP SP2,SP3 上の、Firefox 3.0.4

Ubuntu 7.10 上の、Firefox 2.0.0.17

上のGreasemonkey 0.8での動作を確認しています。

GM_ な関数を使っているので、Opera とか SleipnirSeaHorseでは動かないと思います(試してません)。

ありがとうございます

とにかく、Greasemonkey ていうか JavaScript とか書いたこと無かったので、ひとつひとつ調べ調べしながら、だらだらと一気に書いたので、ヘンなところも多いかと思いますが、何かありましたら、教えて下さい(_ _)

スクリプトの中にアイコンとかデータを埋め込む方法は、mala さんの http://la.ma.la/blog/diary_200601100445.htmエントリからいろいろ辿って真似しました。

その、dataスキームデータを作るのには、http://software.hixie.ch/utilities/cgi/data/data を使いました。

アクセス待ちアイコンを作るのには、http://www.ajaxload.info/ を使いました。

XPath とかは、http://pearl-white.hp.infoseek.co.jp/xpath/ 見ながら調べ調べです。

XPath用の $X 関数は、cho45 さんの、http://lowreal.net/logs/2006/03/16/1 を使わせてもらいました。異常に便利。

ていうか、「まるごと JavaScript&Ajax!」という本で、cho45 さんの「ものぐさなGreasemonkeyの飼い方」という記事には大変お世話になりました、ていうか、この記事見てなかったら書こうとしてないていうか。

あと、画像サンプル使用を許可して下さった、増田部苔丸さん、桜部のとすさん、ありがとうございましたーヽ(・∀・)ノ

何か不具合とかあったら

教えて下さいー

追記

*1drawrのページ構造変更に対応し、2008/12/27に修正しました。

ななしななし 2009/09/14 22:03 現在はうまく動作しないようですが
バージョンアップの予定はありますか?

ななしななし 2009/09/18 17:28 現在はうまく表示出来ないようですが
バージョンアップの予定はありますか?

lolicsystemlolicsystem 2009/09/26 09:22 ご報告ありがとうございます!
今日明日にでも見てみて対応検討しますー
pixivからちょっと距離を置いていたもので、スミマセンです。

ななしななし 2009/09/27 21:45 失敗したと勘違いし、2度投稿してしまいました
申し訳ありません

masahalmasahal 2010/01/22 22:20 現在以下の行でエラーが起きます。

var imagenum = $X(".//li[@class='pbook']/a", d)[0].innerHTML;

以下のように、XPATHを修正して、念のためtry〜catch で囲むと動くようになります。

try{
var imagenum = $X(".//li[@class='pbooku']/a/span[2]", d)[0].innerHTML;
}catch(e){
}

masahalmasahal 2010/01/31 00:53 投稿失敗したかも知れないので再投稿します。
----------------------------------------
drawr の仕様変更で使えなくなってるみたいです。

var imagenum = $X(".//li[@class='pbook']/a", d)[0].innerHTML;

の部分のXPATH を修正すると動くようになります。

try{
var imagenum = $X(".//li[@class='pbooku']/a/span[2]", d)[0].innerHTML;
}catch(e){
}

(念のためtry〜catch で囲んでます。)

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証