2005年07月12日

Google Adsense Checkerを作ってみた このエントリーをはてなブックマークに追加

Google Adsense はコンテンツ連動型の広告なので、掲載されているコンテンツによって広告表示結果が動的に変わるのだ。
例えば、りょーちのこのサイトの場合、書籍に関する記事が多い。なので、検索エンジンなどでやって来た人は、必然的に作家名や小説の名前などで検索を行い、このページにやってくる。で、そのページに作家や小説の広告が掲載されていると、サイトに来た人が興味を持つ公算が高いため、広告をクリックする可能性が高まる。
Googleは自分がクロールしているサイトの内容を把握しているため、どのような語句がサイトに含まれているかを調べて、関連するキーワードに近い広告を掲載する仕組みである。なので、 Google Adsense を利用するには(おそらく)先ずGoogleにクロールされている必要があると思われる(想像・・・)。

ただ、Google Adsense を利用するには、申請して審査を通過してという過程が必要なため、思い立って直ぐには広告を張ったりすることができない。そういう人のために巷にいろいろな形で実現されている Google Adsense Checker とか Google Adsense シミュレータ と呼ばれているものが存在する。
これは何をするものかといえば、 Google Adsense をもし表示したらどんな広告が表示されるかをシミュレーションするもののよーである。Google Adsense用のアカウントを取得していなくても Google にクロールされていさえすれば、Adsense広告が表示される(はず)。
りょーちがたまに利用していたサイトは下記の2つ。(他にご存知の方がいらっしゃれば教えてください。)

Google で「Google 検索: Google Adsense シミュレータ」で検索した場合、一番上位に来ているのが、「 Google Adsense シミュレータ:http://takawo.net/adsense/ 」なのだが、どうも、挙動がおかしいように感じている。

http://www.asahi.com/の実行結果

なんだか、「Googleから広告が出力されませんでした」と表示されてしまう。(←私だけですか?)

次に、Google で「Google 検索: Google Adsense Checker」で検索した場合、一番上位に来る、「 AdSenseCheckerアドセンスチェッカー:http://adsense.zubari.jp/ 」を試してみたがこちらもりょーちの環境だと、Adsense広告が表示されないみたい。(うーむ、おそらくりょーちがリアルで存じ上げている方が作られている筈なのだが・・・)←見てる?Zさん?

「うーむ」と思い、「自分で作れるのかな?」と思って休憩時間によろよろと下記のよーなものを作ってみた。


利用方法は至って簡単で、上記サイトでシミュレーションしたいURLを入力すると、どのような広告が表示されるかをシミュレーションできます。
なお、あくまでもシミュレーションであって、全く同じものが表示されるわけではありません。通常のGoogle Adsenseでも同じページをリロードすると別の広告が表示されていると思います。(このあたりはどうやって実現しているのかよくわかっていないのですが・・・)

なお、簡単にシミュレートできるように(例によって)bookmarkletも作ってみたっす。

Adsense Checker(右クリックでお気に入り保存)


bookmarkletはシミュレートしたいサイトでこのbookmarkletを利用すれば上記のサイトに自動的にURLを引き渡し、シミュレーションが行われます。

現在対応しているのは、下記のフォーマットです。
●Google Adsense
・ビッグバナー (728×90)
・バナー (468×60)
・レクタングル (中) (300×250)
・ワイド スカイスクレイパー (超横長) (160×600)
・スカイスクレイパー (120×600)
・レクタングル (大) (336×280)
・スクエア (250×250)
・ハーフバナー (234×60)
・レクタングル (小) (180×150)
・ボタン (125×125)
・縦長バナー (120×240)
●Google AdLinks(リンクユニットに4/5リンク)
・120x90
・160x90
・200x90
・180x90
・468x15
・728x15

Google AdLinksについてはiframeのマージンを縦横各20ピクセルほど多めに取っています。(何故かピッタリだと上手く表示されない・・・)

まあ、あくまでもお遊び的なので、ホントに何が表示されるかは、実際に Google AdSense に登録してみるのが一番です(当たり前か・・・)
不具合や感想などがありましたらご連絡ください。
よろしくばい。
posted by りょーち | Comment(0) | TrackBack(0) | Web周辺技術

2005年07月08日

track feedの仕組みは? このエントリーをはてなブックマークに追加

以前から track feed を利用していたのだが、この仕組みがいまひとつよくわからなかった。
何をやるものかといえば、サイトに track feed のロゴを張っておけば、「他のサイトからリンクが張られたことを瞬時にRSSでお知らせします」というものらしい。「瞬時にってすごい!」って思ったのですがどうも違うらしい。
track feedの吐き出すRSSの<description>属性を見ると、
HPに他のサイトからリンクが貼られたら通知するRSSフィードです。 cgiからのリンクは、すべて同じリンクとみなされますので、google 検索結果などからのリンクは検索キーワードによらず初回の一回のみ新着リンクとして通知されます。なお、リンク元サイトに HP への明示的なリンクが確認できない場合はタイトルの前に「*」を表示しています。

ふむふむ。やっぱ、リンクが貼られたらと書いてある。「うーむ。おかしい」と思って更に調べてみると、track feed : Webサイトにリンクが張られたら瞬時にRSSで配信 のページには、
track feed は、あなたのHPにリンクが貼られると、それが初めてクリックされた瞬間に RSS でリンクが張られたことをお知らせします。

と書かれている。
うーむ、瞬時にちゃうやん・・・
で、貼り付けるScriptのソースを確認したら、
・document.referrer を取得してtfrefに格納
・document.URL を取得してtfurlに格納
・http://trackfeed.com/img.php に
 r=ユーザアカウント判別用の文字列
 tfref=やって来たURL(リンク元URL)
 tfurl=現在のURL(リンク先URL)
 を渡す。
・img.phpでは、ユーザアカウントを判別し、tfrefとtfurlをリンク元・リンク先URLとしてRSS Feedを(裏側で)作成する。
・GET Methodで渡された結果を画像で返す。
という仕組みのようである。

うーむ、まあそりゃそうだわな。どこかの誰かがリンクを張ったのをどーやってわかるのか疑問だったが、クリックされないと分からないってことだ。
クリックされてページに誘導された時点ではじめてtrack feedがreferrerを取得し、track feedに送りRSSを生成するということだ。

#どうも話しが上手すぎると思った。

なお、一応工夫しているっぽいのは、RSS Feed作成用に利用するユーザ管理用IDとRSS Feed表示用に利用するユーザ管理用IDが微妙に違うため、他のユーザは他人のRSS Feedを用意に見ることができないようになっているっぽい。このあたりは流石に考えられているみたい。検索してみたら、 track feed 不具合修正 ということでやっぱ推測できないようになっているみたい。

うーむ。まあ、重宝しているからいいか。
posted by りょーち | Comment(2) | TrackBack(1) | Web周辺技術

2005年07月06日

はてな注目ASINにamazonアソシエイトリンクを利用 このエントリーをはてなブックマークに追加

はてなコレクションでamazonアソシエイトリンクを利用 にも書いたのだが、はてなの吐き出すRSS情報を取得していろんなことをやってみようと思ったりしていた。
で、はてなブックマークコレクションのASIN情報にamazonアソシエイトリンクを埋め込むscriptを書いてみたのだが、はてなブックマークコレクションには 注目ISBN/ASIN というものがあり、はてな上で取り上げられている書籍などで話題になっているものはどれかというのを表示してくれるのだ。
で、これにもRSS情報があったので、はてなで話題になっているメディアへamazonアソシエイトリンクを貼ってみることにする。
下記のJavaScriptを貼り付ければOKである。
encodeの部分はJIS/SJIS/EUC-JP/UTF-8にあわせて利用してください。
で、tagの部分にはあなたのアソシエイトIDに書き換えてください。

<script language="JavaScript" src="http://www.usamimi.info/~ryouchi/hatena/hatena.hotasin.php?encode=SJIS&tag=ryouchih-22"></script>
<script language="JavaScript" src="http://www.usamimi.info/~ryouchi/hatena/hatena.hotasin.php?encode=JIS&tag=ryouchih-22"></script>
<script language="JavaScript" src="http://www.usamimi.info/~ryouchi/hatena/hatena.hotasin.php?encode=UTF-8&tag=ryouchih-22"></script>
<script language="JavaScript" src="http://www.usamimi.info/~ryouchi/hatena/hatena.hotasin.php?encode=EUC-JP&tag=ryouchih-22"></script>

取り付けた結果はこのようになる。


ボタンをおすと、はてなブックマークに登録できるようになっている。コレクション機能も利用可能である。

RSSって一度Getしたら書き換えが可能なのでちょいと便利だな。
今後はRSSの微妙なバージョンやatomやらいろいろバージョンがあったりするのだが、気になるのは某Microsoftがまたもや自前の仕様でRSS情報を扱おうという動きもあるっぽい。
うーむ、やはりRSSは今きているらしいのぅ。
posted by りょーち | Comment(1) | TrackBack(0) | Web周辺技術

2005年07月04日

seesaa blogのGoogle Sitemapsを作る このエントリーをはてなブックマークに追加

また、懲りずに Google Sitemaps なのだが、 Google Sitemaps グーグル・サイトマップ(ベータ版)FAQとプロトコル全訳。新しいURL登録方法はSEOに必須になる? [絵文録ことのは]2005/06/04 を参考にみてみるとなんとなくこんな風につくればよいのではないかなと思い、よろよろと作ってみた。
必要なもの:
・Webサーバ
・php5.0以降
 ・tidy関数2.0とcurl(Client URL Library)関数が利用できること
  tidyについては下記URLを参照
   Tidy関数
  curlについては下記URLを参照
   CURL, Client URL Library 関数

Windowsユーザの人で自分のマシンで手っ取り早く試すには、 apache friends - xampp for windows をダウンロードするのがよい。
インストールの方法は XAMPP - 開発環境一括インストール - phpspot あたりに事細かに書いてある。

で、無事インストールしたら、下記のプログラムを利用すればよい。



りょーちが借りているレンタルサーバではtidy2.0とcurlが利用できないのでソースのみの公開なのだ。

で、XAMPP上で上記プログラムを走らせて見た結果が こちら である。
なんとなくできていると思いませんか?

上記のスクリプトでは、GET METHODの引数としてurlとuserという引数を使っている。
urlには http://ryouchi.seesaa.net/ などと seesaa blog のURLを指定する。
userにはryouchiなどと適当な名前を指定する。このuserで指定した名前+.xmlというファイル名でGoogle Sitemaps用のファイルを作成するのだ。

GETメソッドで渡しているので実行後には下記のようなURLが表示されると思う。

http://[サーバ名]/[ディレクトリ名]/createSitemaps.php?sitelist=http%3A%2F%2Fryouchi.seesaa.net%2F&user=ryouchi

つまりここにアクセスすると、 http://[サーバ名]/[ディレクトリ名]/[user名].xml ができるわけである。
りょーちはpingサーバの仕組みを知らないのでなんともいえないが、pingサーバに
http://[サーバ名]/[ディレクトリ名]/createSitemaps.php?sitelist=http%3A%2F%2Fryouchi.seesaa.net%2F&user=ryouchi
を指定すれば、もしかしたら自動的に Google Sitemaps を更新してくれるのかもしれない。(違う?)

ちなみにここではseesaa blog用のGoogle Sitemaps作成スクリプトと銘打っているが、勿論この考え方で他のblogの Google Sitemaps を作成することも可能である。
変更点は下記のような感じ。

seesaaの場合:
・URLは http://ryouchi.seesaa.net/ などという形式 (118行目)
・index.rdf は http://ryouchi.seesaa.net/index.rdf に存在 (119行目)
・アーカイブ用のディレクトリは /archives/ 以下に存在(132行目)
・カテゴリー用のディレクトリは http://ryouchi.seesaa.net/category/ 以下に存在(128行目)
・記事用のディレクトリは http://ryouchi.seesaa.net/article/ 以下に存在(160行目)
・現在は http://ryouchi.seesaa.net/ に先ずアクセスし、/archives/ と http://ryouchi.seesaa.net/category/ を含むURLのいずれかを検索対象にしている(どちらかをすべてクロールすれば全てのarticleが取得できるので)(126行目/128行目)

という感じになっているのでこれらをお使いのblogにあわせてもらえればよい。

ココログの場合:(user→hoge)
・URL: http://hoge.cocolog-nifty.com/blog/
・index.rdf : http://hoge.cocolog-nifty.com/blog/index.rdf
・アーカイブ: http://hoge.cocolog-nifty.com/blog/yyyy/mm/
・カテゴリー: http://hoge.cocolog-nifty.com/blog/[カテゴリ名]/
・記事: http://hoge.cocolog-nifty.com/blog/yyyy/mm/[記事ファイル名]

yaplog.jp の場合:(user→hoge)
・URL: http://yaplog.jp/hoge/
・index.rdf: http://yaplog.jp/hoge/index1_0.rdf
・アーカイブ: http://yaplog.jp/hoge/monthly/yyyymm/
・カテゴリー: http://yaplog.jp/hoge/category_[xxx]/
・記事: http://yaplog.jp/hoge/archive/[xxx]

drecom.jp の場合:(user→hoge)
・URL: http://blog.drecom.jp/hoge/
・index.rdf: http://blog.drecom.jp/hoge/index1_0.rdf
・アーカイブ: http://blog.drecom.jp/hoge/monthly/yyyymm/
・カテゴリー: http://blog.drecom.jp/hoge/category_[xxx]/
・記事: http://blog.drecom.jp/hoge/archive/[xxx]
#あれ?yaplogと同じ?

jugem.jp の場合:(user→hoge)
・URL: http://hoge.jugem.jp/
・RSS: http://hoge.jugem.jp/?mode=rss
・atom: http://hoge.jugem.jp/?mode=atom
・アーカイブ: http://hoge.jugem.jp/?month=yyyymm
・カテゴリー: http://hoge.jugem.jp/?cid=[xxx]
・記事: http://hoge.jugem.jp/?eid=[xxx]

exblog.jp の場合:(user→hoge)
・URL: http://hoge.exblog.jp/
・RSS: http://hoge.exblog.jp/index.xml
・atom: http://hoge.exblog.jp/atom.xml
・アーカイブ: http://hoge.exblog.jp/myyyy-mm-dd/
・カテゴリー: http://hoge.exblog.jp/i[xx]
・記事: http://hoge.exblog.jp/[xxxxxxx]/

livedoor.jp の場合:(user→hoge)
・URL: http://blog.livedoor.jp/hoge/
・RSS: http://blog.livedoor.jp/hoge/index.rdf
・atom: http://blog.livedoor.jp/hoge/atom.xml
・アーカイブ: http://blog.livedoor.jp/hoge/archives/yyyy-mm.html
・カテゴリー: http://blog.livedoor.jp/hoge/archives/cat_[xxxxxx].html
・記事: http://blog.livedoor.jp/hoge/[xxxxxxx].html


ってな具合にいけるのではなかろうか?
どうであろう・・・

暇な人で「やってみたけどうまくいかなかった」「やってみたらうまくいった」的なご意見はこちらまでコメントいただきたいばい。よろしくね。
posted by りょーち | Comment(6) | TrackBack(1) | Web周辺技術

2005年07月01日

phpでseesaaのサイト一覧を作る このエントリーをはてなブックマークに追加

以前、 Google Sitemaps について記載したが、いちいち手動で作るのは面倒であると思った。自分のサイトに記事が多くなればなるほど管理が大変である。
りょーちの場合は何の脈絡もなく書き連ねているのでどうも酷いことになっている気がする。
で、seesaa blog でも Google Sitemaps を動的に生成したいという野望の元に、いろいろ考えていたが、なんとなくできそうな予感がしている。しかしこれは seesaa の機能を利用するのではなく、php の script を書いて、seesaa のURLを渡せば Google Sitemaps 用のクローラ用XMLファイルを動的に生成しちゃうようなものを作るということである。
Google Sitemaps の XMLの仕様を今ひとつよく読みこめていないのだが、基本はサイト内にある全てのURLをリストにするということのようである。
なので、先ずは、seesaa blogの所定のサイトの全てのURLリストを取得するよーなプログラムを作ってみた。
以下そのレシピ。

必要なもの:
・Webサーバ
・php5.0以降
 ・tidy関数2.0とcurl(Client URL Library)関数が利用できること
  tidyについては下記URLを参照
   http://php.s3.to/man/ref.tidy.html
  curlについては下記URLを参照
   http://php.s3.to/man/ref.curl.html

Windowsユーザの人で自分のマシンで手っ取り早く試すには、apache friends - xampp for windows をダウンロードするのがよい。
インストールの方法は XAMPP - 開発環境一括インストール - phpspot あたりに事細かに書いてある。

で、無事インストールしたら、下記のプログラムを利用すればよい。

ソースのみ公開したのは、りょーちが借りているレンタルサーバではtidy2.0とcurlが利用できないのであった。なので、ソースのみなのだ。
ソースを見てもらうとわかるのだが、たいしたことはやってない。
一応コメントらしきものは書いてみた。

で、XAMPP上で上記プログラムを走らせて見た結果が こちら である。

まあ、ちょっと無理矢理なのだが・・・
今は分かりやすくHTMLにリンクを貼って表示させているが、phpの書き方でGoogle SitemapsのXML形式で吐き出すこともできるであろう。

あとは野望としては、pingを送るような感じで記事が追加されたら動的にGoogle Sitemapsを吐き出すようなプログラムを(誰か)作ってくれるのではなかろうか?

WindowsでXAMPPとかをインストールして是非やってみてください。不具合があれば報告若しくは修正したものをいただけるとありがたいです(^^;

ちなみに、php5.0とtidy2.0とcurlが利用できるフリーのサーバをご存知な方がいらっしゃれば教えていただきたいです。
よろしくです。
posted by りょーち | Comment(1) | TrackBack(0) | Web周辺技術

2005年06月29日

はてなコレクションでamazonアソシエイトリンクを利用 このエントリーをはてなブックマークに追加

はてなブックマークに新たにコレクション機能が搭載されたようである。
コレクション機能についてははてなの下記のお知らせをご確認ください。
はてな各サービスの機能変更、お知らせなど - はてなメールマガジン『週刊はてな』 - はてなブックマークにコレクション機能登場!お気に入りを載せて自分だけのコレクションページを作ろう

要するにamazonの書籍などに特化したはてなブックマーク機能だと思われる。
機能としては ブクログ に近い機能だと思われる。
amazonのアソシエイトIDを持っている人はこの商品リンクに自分のアソシエイトタグを貼りたいという欲求があると思う。
<script>タグを利用できれば、下記のような形で加工してアソシエイトタグを貼ることができそうなのだ。

<script language="JavaScript">
<!--
function replaceUrl(){
associateTag = "ryouchih-22";
count = document.links.length;
for (i = 0; i <count ;i++){
hatenaBaseURL = "http://d.hatena.ne.jp/asin/";
myBaseURL = "http://www.amazon.co.jp/exec/obidos/ASIN/";
if ( document.links[i].href.indexOf(hatenaBaseURL) != -1){;
asinNo = document.links[i].href.split("/");
document.links[i].href=myBaseURL+""+asinNo[4]+"/"+associateTag;
}
}
}
//
!-->
</script>
<body onload="replaceUrl();//">

要するに、やろうとしていることは「http://d.hatena.ne.jp/asin/」までを「http://www.amazon.co.jp/exec/obidos/ASIN/」に無理矢理変更してASINをつけて後ろにアソシエイトタグを貼り付けるってな感じである。
しかし、はてなではセキュリティのため(?)<script>タグを利用できないのであった。
なので、ちょっと見栄えは悪いが、無理矢理アソシエイトタグを埋め込むプログラムを書いてみた。



上記サイトに行き、はてなコレクションのユーザ名(=はてなのユーザ名)とamazonのアソシエイトタグを入力すると、JavaScriptが自動生成される。
で、それを自分のblogになど貼り付けると、はてなコレクションで集めたamazonの商品リンクをアソシエイト付リンクに変換して表示する。
できあがりはこんな感じ。



これははてなコレクションのRSS情報を取得して無理矢理amazonのURLとアソシエイトタグを吐き出すだけのプログラムなので、利用用途は少ないかもしれないが、こんなこともできるよっていう例として捉えていただければと思います。

この仕組みはamazon ECSを全く使っていません。純粋にはてなコレクションのRSS情報から取得したもののみで実現しています。asinの情報ははてなで取得できるので、ちょっと修正すれば、商品画像などもamazon ECSを使わなくても表示させることができそうです。

#そのうちデフォルトでアソシエイトIDにはてなが対応しそうだけど・・・
posted by りょーち | Comment(0) | TrackBack(0) | Web周辺技術

2005年06月24日

Google Search History このエントリーをはてなブックマークに追加

Google Search History なるものがβ版で公開されている。

利用するには Google Accounts が必要。

で、やってみた。下記のよーに表示されるらしい。(一応アカウント名は消してみた)



#キャプチャー撮るつもりなかったのだが
#今にして思えば怪しげな単語で
#検索しなくてよかった(^^;

自分の検索した履歴をカレンダー形式で表示したり、一日に何回googleを利用しているかがわかるみたい。
うーむ。しかし、アカウントと連動して検索揃果が分かるのは実際はどうなのか?
例えば非常に怪しい言葉(想像してみて)でサーチしている人は危険人物としてGoogleにチェックされたりするとか・・・(ないか?)

Google Search Historyプライバシーポリシー日本語訳)をみる限りではなんとなく大丈夫な予感がするが・・・

ただ、実際問題として検索するために「ログイン」するかどうかは疑問である。
ちょいと要チェックじゃの。
posted by りょーち | Comment(2) | TrackBack(0) | Web周辺技術

2005年06月17日

seesaa blogで「もんたメソッド」を使う このエントリーをはてなブックマークに追加

巷で話題のもんたメソッドが凄い勢いでその勢力を広げている。

もんたメソッドの詳しい説明は bricklife.weblog.*: 「もんたメソッド」は○○なプレゼン手法だ (説明ムービーなど) をご確認いただきたい。
「もんた」とは言わずと知れた おもいっきりテレビ のみのもんたである。
おもいっきりテレビではフィリップの重要な箇所を目隠しすることで観客を注目・集中させるプレゼン方法を取っている。ビジネスの世界でもこれが話題になり、Webの世界ではちょっとした「もんたメソッド祭り」が開催されている。

で、この仕組みを実装したJavaScriptなどがいろいろ出回っているのでseesaaでもできるであろうと思って使って見た。
利用イメージはこんな感じ。黒い部分をクリックしてみてください。

午後は○○思いっきりテレビ


なんとなくイメージ沸きましたか?
で、seesaaでの実装方法は下記のような手順です。
(1) 下記のJavaScriptファイルを右クリックでファイルを保存(ダウンロード)し「monta.js」という名前をつける。

(2) 保存したら、seesaaの管理画面に入り、「ツール」→「ファイルマネージャ」を選択し、適当なところにアップロードする。このときどこにアップロードしたかを覚えておく。
今は、 http://ryouchi.seesaa.net/js/monta.js にアップロードしたとしておこう。
(3) seesaaの管理画面で「デザイン」→「コンテンツ」で「新しいコンテンツ」を追加する。
・種類:自由形式
・追加先ページ:全ページ
・配置:フッター
・並び順:0
(4) 追加した自由形式の設定は下記のようにする。
タイトル:もんたメソッド
自由入力欄:
<script type="text/javascript" src="http://ryouchi.seesaa.net/js/monta.js"></script>
(5) blogを全て再構築する。

これで準備が整った(^^;
で、記事を書くときの記述方法なのだが、こんな風な書き方をする。

午後は<span monta="on">○○</span>思いっきりテレビ

こう書くと、こうなる。
午後は○○思いっきりテレビ


簡単っすね(^^;
seesaa以外のblogでもタグを自分で入力できてJavaScriptの外部ファイルを読み込める仕様のblogであれば勿論利用できます。

異常な盛り上がりを見せているこの「もんたメソッド」。
少し前にWeb上で話題になったのが「 高橋メソッド 」。非常に斬新なプレゼンテーション手法である。
高橋メソッドで作られたプレゼンテーションが上記の高橋征義氏のホームページに掲載されている。これはかなりインパクトがあった。もしご覧になられていない方は是非ご覧下さい。
日本Rubyの会について 高橋征義氏
Railsな考え方  高橋征義氏
これは非常に素晴らしいと思ったものだ。
今後も面白い「なんとか」メソッドを生み出してほしいっす。
seesaaで今すぐにでももんたメソッドを使って見たいときは・・・
posted by りょーち | Comment(5) | TrackBack(1) | Web周辺技術

2005年06月15日

Google PageRank Check シール このエントリーをはてなブックマークに追加

自分のページの PageRank が気になる人はりょーちを含めて結構いると思う。以前、 こちらの記事 で紹介したものを応用して、Google PageRank Check シールというものをつくってみた。
Blogの部品のようなものなのだが、要は freelance-help の Google Ranking Report と同じような機能を作って見たということです。
<script
type="text/javascript"
language ="JavaScript"
src="http://www.usamimi.info/~ryouchi/pagerank/pagerankcheck.js">
</script>

(※ここでは改行していますが、1行で書かれています
をページのどこかに貼っておけば、そのページのGoogleのページランクを表示するというものである(ホントにこれだけです・・・)。で、右上にあるのが実装結果となります。
シールのようにペタリと貼る感覚で、わりと簡単に設定できるのでちょっと便利かも。

仕組みはわりと簡単で、以前作った Google PageRank Checker で利用している機能を呼び出してJavaScriptでIFRAMEとして表示させるというシンプルなもの。
現在はIFRAMEの大きさは width=150/height=100 に設定してみた。
ちなみに、どこのページから呼び出されたのかはJavaScriptの「document.location」を利用している。

seesaaユーザは管理画面から「デザイン」→「コンテンツ」→「新しいコンテンツの追加」から「種類:自由形式」を選んで貼りたいところに自由形式のブロックを作り、自由形式記入欄に上記のタグをそのままコピペして再構築すればOKっす。

勿論タダで使えます。(当たり前か・・・)
要望などがありましたらこの記事にコメントください。(ニーズはあるのか?)
posted by りょーち | Comment(4) | TrackBack(1) | Web周辺技術

2005年06月01日

はてなアンテナをあなたのblogに このエントリーをはてなブックマークに追加

人力検索サイトはてな を利用している人は はてなアンテナ も利用していると思います。はてなアンテナは、気になるサイトの更新状況をまとめてチェックしてくれる便利ツールです。
お気に入りのページを登録すればはてなアンテナが代わりに自動巡回。専用ページに更新順に表示します。
人気のアンテナをインポートして自分用にカスタマイズしたり、友達だけで共有するアンテナも思いのまま!

という触れ込みでちょいと使い始めたのだけれど意外と便利。他のはてなのサービスとも微妙にリンクしていて気持ちがよい(このあたりのユーザの囲い込みがはてなの強みか?)
で、このはてなアンテナを通常のBlogでも利用したいなと思い、下記のようなことができるよーにしてみた。

はてなアンテナを通常はてな以外のblogで利用するにはRSSを読み込んで表示させる方法があるけど、RSSで取得する情報をもうちょっと美しく表示したいときに便利かなと思ったのだ。
はてなアンテナのURLは

というように
http://a.hatena.ne.jp/[ユーザ名]/

という形式になっている。一方提供されるRSSのURIは、
http://a.hatena.ne.jp/[ユーザ名]/rss

という形式になっている。
で、このRSSを取得して、ちょいと加工して表示してしまえばいいのだ。RSSの取得と加工はこの界隈で非常に有名な DA実験室 さまの daRssParser [v1.0.3] [EUC] を利用させていただいた。この RssParser がめちゃくちゃよくできている。まじで素晴らしいです。これがないと作るのは不可能でした(The Dark Angel さま、素晴らしいツールをありがとうございます)。

で、りょーちの作ったのが、下記のものです。

はてなアンテナをあなたのblogに:りょーち (新しいウィンドウで開きます)


使い方は簡単です。はてなアンテナのユーザIDを入力して「はてなアンテナ表示」のボタンを押します。すると、はてなアンテナのチェック(ユーザが存在するかどうか、アンテナが公開されているかどうか?)を行い、正常にはてなアンテナが取得できたら、はてなアンテナを表示します。
さらに、取得したはてなアンテナをblog上に表示するためのJavaScriptの外部ファイルへのリンクを作成し、文字コード毎に表示のためのJavaScriptを生成します。
この生成されたコードをBlogに貼り付けて再構築すれば、完成。
参考までにSeeSaaでの利用方法を記載しておきます。
SeeSaaの場合だと、どうも文字コードがShift JISっぽいのでSJISを利用します。
SeeSaaの管理画面から「デザイン」→「コンテンツ」を選択。
新しいコンテンツの追加で、
種類:自由形式
追加先ページ:追加したいページ(全ページなど)
配置:配置したい場所(りょーちは右サイドバーに設置してみた)
並び順:配置場所の中での並び順(0〜100)
を選択し「コンテンツの追加」ボタンを押します。

「自由形式の設定」画面が表示されたら、適当な「タイトル」を入力後、 はてなアンテナをあなたのblogに:りょーち で生成したTEXTAREA内のコードを貼り付けます。
CSSは特に利用していませんので、 div class="sidetitle" とか div class="side" などとを好みで設定してください。
貼り付け終わったら「保存」します。変更を反映させるには、ブログの再構築が必要です再構築完了後、自分のBlogにはてなアンテナが表示されていれば成功です。

アンテナの横にある、 のアイコンは表示されてるアンテナの おとなりページ です。
その横の のアイコンは、表示されている アンテナを含むページ です。

なお、はてなIDを所有していない人でも他人のアンテナを自分のサイトに貼り付けたりすることも勿論可能です。

まだまだ、改良の余地はあると思いますが、ご意見、不具合、利用方法がわからないなどがありましたらこのBlogに書き込んでいただければと思います。
あ、勿論、利用料は無料です(あたりまえか・・・)
好き勝手に使っていただければと思います。

(需要があるのかどうか不明だが・・・)
posted by りょーち | Comment(14) | TrackBack(2) | Web周辺技術