2006年05月22日

はてなリングをあなたのBlogに このエントリーをはてなブックマークに追加

こんにちは、幸田露伴です(嘘です)。

りょーちの作るものはだいたい二番煎じどころか白湯(さゆ)に近いほど薄いものが多いのですが、これまた薄いプログラムを作ってみた(^^;

はてなリングをあなたのblogに

はてなリングの更新状況を自分のBlogに貼り付けるものである。
はてなリング名を入力するとJavascriptのソースが表示されるのでこれをBlogに貼り付けるとできあがりである。
まあ、やっていることははてなリングのRSSの情報をGetして展開しているだけである。
はりつけたイメージはこんなかんじ。


りょーちの作ったはてな関連のツールも結構増えてきた(大抵はRSSの情報を引っ張ってきて整形するだけなのだが・・・)
はてなブックマークされている数を取得するブログパーツ
はてなアンテナをあなたのblogに
はてなBookmark Collection

ふむ。はてな、激しく便利である。
posted by りょーち | Comment(0) | TrackBack(0) | Web周辺技術

2006年05月10日

seesaa blogで「あれこれポップアップ」を使う このエントリーをはてなブックマークに追加

こんにちは、ヒップアップの川上泰生です(嘘です)

どーやら seesaa blog で起こったコメント機能などの不具合が全面的に解決した(らしい)。中の人ありがとうございます。

ってことで、勢いで 「あれこれポップアップ」を使ってみることにしたづら。

「あれこれポップアップ」は、Javascriptとスタイルシートを利用していろんな情報をポップアップしちゃおうという目論みの元作成されたものである。



上記のリンクにカーソルを合わせるとフローティングパレットのよーなものが出てくる。クリックするとリンク先に飛んだりするよーだ。

seesaa への導入は意外と簡単。下記のよーにやるのがよろしい。

1. あれこれポップアップ のサイトで「お持ち帰り用アーカイブをダウンロード」をダウンロードして解凍する。
2. seesaa の管理画面から「ツール」→「ファイルマネージャ」を選択し、適当なフォルダ(ここでは「ArekorePopup」というフォルダ)を作成し、 解凍したフォルダ内の「ArekorePopup.js」「ArekorePopup.css」「pngファイル一式」をアップロードする。
3. HTML編集で、<HEAD> 〜 </HEAD> 内に下記のように追加

<link href="http://ryouchi.up.seesaa.net/ArekorePopup/ArekorePopup.css" rel="stylesheet" type="text/css" />
<script src="http://ryouchi.up.seesaa.net/ArekorePopup/ArekorePopup.js" type="text/javascript"></script>

ryouchi の部分は自分のサイトに合わせて変更してください。
4. 全て再構築する

で、ポップアップを出すよーにする書き方は記事投稿画面でリンクの部分をこんな感じでかけばよい。(title属性を加えるのだ)


<a href="http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/ArekorePopup.html" title="あれやこれやの情報をびしばしポップアップ!" target="_blank">あれこれポップアップ</a>
で、こーすると、こんな感じになる(はず)である。


あれこれポップアップ
target属性は指定してもしなくてもよかろう。

pngファイルやアップロードしたCSSを書き換えれば別のポップアップも当然できることであろう。ポップアップ内で画像も表示できるようである。

あれこれポップアップの改訂履歴を見ると2003/10/04となっている。
結構前から存在していたんだねぇ。
posted by りょーち | Comment(0) | TrackBack(0) | Web周辺技術

2006年05月09日

seesaaブログでトラックバック元のサイトのサムネイルをSimpleAPIで表示する このエントリーをはてなブックマークに追加

こんにちは、ツーツーレロレロの大森うたえもんです(嘘です)。

先日 Webサイトのサムネールを作成するSimple APIがかなり便利! で紹介した Simple API の登場でかなりネットが盛り上がっている気がする。(このツール素晴らしいっす)。

更に拍車をかけたのが i d e a * i d e a - Lifehacks by 100SHIKI.COMi d e a * i d e a - トラックバックにサイトの縮小画像を入れてみた という記事であろう。
なるほどー、面白いこと考えるねー。

seesaaブログで誰かやってないかなーと思い検索してみると、やどりぎ@NET の cuckoo さんが seesaaブログでトラックバックにサムネイル画像を入れる という記事を書かれていたのでりょーちも参考にして(というか殆どコピペで)やってみた。(cuckoo さん、Good Jobっす!)

cuckooさんが詳しい解説をされているのでどーやって実装するのかはcuckooさんのサイトを参考にしてみてください。

ちなみにりょーちはこんな感じにHTML編集をしてみたっす。


この記事へのトラックバック<br />
トラックバック元の画像は <a href="http://www.simpleapi.net/" target="_blank">Simple API</a> を利用させていただいてます<br />
<hr />
<table border="0" >
<% loop:list_individual_article_tb -%>
<tr>
<td valign="top">
<a href="<% tb.url %>" target="_blank" rel="nofollow"><img src="http://img.simpleapi.net/small/<% tb.url %>" alt="<% tb.blog_name | html %>" width=128 height="128" hspace="4" vspace="4" border="0" /></a>
</td>
<td valign="top"><div class="side">
<a href="<% tb.url %>" target="_blank" rel="nofollow"><% tb.title | html %></a><br />
Excerpt: <% tb.excerpt | text_summary | html %><br />
Weblog: <% tb.blog_name | html %><br />
Tracked: <% tb.createstamp | date_format('%Y-%m-%d %H:%M') %>
</div></td></tr>
<tr><td colspan="2"><hr /></td></tr>
<% /loop -%>
</table>


みためは、なかなかよい感じなのですが、TABLEタグを利用しているのがちょっと弱いか?
で、実装しておいて気づいたのだが、こーなると、怪しいサイトからのトラックバックスパムも表示されちゃうのかーと思い、どうしようかと悩み中である。

うーむ・・・
posted by りょーち | Comment(0) | TrackBack(0) | Web周辺技術

2006年05月08日

Yahoo! TECHは使いにくい? このエントリーをはてなブックマークに追加

こんにちは、近松門左衛門です(嘘です)。

TechCrunch はWeb2.0っぽいサイトを追っかけるサイトのよーであるが、ここに Yahoo Guns for CNET Reviews という記事が紹介されていた。

どーやら、Yahoo! Tech というサイトがオープンしたようである。



内容は個人ユーザ向けの家電製品情報ポータルっぽいもののよーである。
検索用テキストボックスとタグを利用してプロダクト毎に商品が検索できるよーなものであるのだが、どーもこれが使いにくい・・・

Today's Top Features の5つの画像が切り替えられるよーな見せ方や、右側にある「MY TECH」のタブなどもなんだかとってつけたような感じで機能的でないっぽい。

CNET Reviews - CNET.com とリンクしているっぽい感じなのだが、CNET Reviewsの方が使いやすいよーな気がするのは気のせい?

Yahoo! Tech で利用されている機能は Yahoo! Developer で以前紹介されていた Yahoo! UI Library の一部が利用されていると思われるのだがどうも上手いこと機能的に組み合わされていないよーな印象である。

やっつけ仕事?
posted by りょーち | Comment(0) | TrackBack(1) | Web周辺技術

2006年04月28日

del.icio.usのブックマークをBlogに貼り付けてみる このエントリーをはてなブックマークに追加

こんにちは、佐竹チョイナチョイナです。(嘘です)。(Kyon^2ではなくチョイナ^2です)

日本でソーシャルブックマークといえば はてなブックマーク とほぼ等しいと思われる(ちょっと嘘)のだが、世界規模で見た場合、del.icio.us はかなり利用者がいそうである。
で、 del.icio.us/help で紹介されている例を元に、del.icio.us でブックマークしているサイトをBlogなどに貼り付けるよーなものを作成してみた。殆どサンプルのままなので特に説明することもないが、 はてなブックマーク のよーなソーシャルブックマークの元祖なのでユーザも多いよーな気がするのでなんとなく作ってみた。
やっていることは del.icio.us/help/json に紹介されていることそのまんまである・・・orz.



■使い方
1. ユーザID(他人のユーザでも大丈夫)を入力
2. 表示件数(20、50、100)を設定し、「表示用タグ取得」ボタンを押す
3. テキストエリア内に貼り付け用タグが表示されるので、このタグをBlogに貼り付ける
4. APIが勝手に指定したユーザのブックマーク一覧をGetして表示してくれるなお、deliciousを利用する際は下記のブックーマークレットを使うと登録・表示に便利ばい。

my del.icio.us:my del.icio.us (bookmarklet)右クリックでお気に入りに追加
post to del.icio.us:del.icio.usに登録 (bookmarklet)右クリックでお気に入りに追加

貼り付けイメージは下記のよーな感じ。






うーむ、こうなると はてなブックマークされている数を取得するブログパーツdel.icio.us バージョンも作りたくなったな・・・

以前紹介した Extractor - Bookmark Comment Aggregator のよーに del.icio.us のコメント数のチェックも作りたいのだが [Perl] del.icio.us のブックマーク登録件数を取得する Perl 関数 ゆうすけブログ/ウェブリブログ を見る限りではちょいと難しそう。
Overview (delicious 1.10 API) とかってのもあるらしい。

もうちょい簡単なAPI作ってほしいのぅ・・・
posted by りょーち | Comment(0) | TrackBack(0) | Web周辺技術

2006年04月27日

seesaa blogでもGoogle Sitemapsを利用できるようになったらしい このエントリーをはてなブックマークに追加

こんにちは、どんぐり音楽会でお馴染みのマイク眞木です(嘘です)。

Google のインデックスに URL を効率的に登録するためのGoogle Sitemapsなのだが、今までの仕様だと、トップディレクトリにGoogle Sitemapsの指定ファイルを置くことでサイトをクロールするよーになっていた。

ただ、seesaa blogの場合、トップディレクトリにファイルを置くことが仕様上できなかったのでseesaaでは実質利用することはできなかった。
で、それについて 【結論】結局SeesaablogではGoogle Sitemapは使えない・・・ というよーな記事を書いてみたのだが、昨日、 Google Sitemapの利用が簡単になった\(^o^)/ - クマちゃんのぼーげんブログ さんよりトラックバックをいただき、どうやらseesaa blogでも簡単にGoogle Sitemapsを利用できるらしいことを知りました。(ご連絡いただきありがとうございます)

で、ちょいとやってみた。

1.Google Sitemaps にアクセス。
2. サイトを追加のテキストボックスにseesaa blogのURLを入力し、「OK」を押して追加する。
3. 追加したサイトの「確認ステータス」をクリック
4. 以下のような説明が表示されている。
サイトの確認が完了したら、包括的な統計情報とサイトのページに関するエラー情報を確認できるようになります。 確認できない場合でも、サイトマップ プログラムを使用してサイトマップを送信し、お客様のサイトに関する基本情報およびサイトマップの詳細情報を見ることができます。

確認する方法は 2 つあります。 Google で指定した名前の HTML ファイルをアップロードするか、サイトのインデックス ファイルに META タグを追加してください。 希望する確認方法を、次の中から選択してください。

5. 確認方法を選択のプルダウンで「METAタグを追加」を選択する。
6. METAタグが表示されるので、これをコピーし、sessaaのHTML編集で下記のように追加する。(このとき、Google Sitemapsの管理画面は閉じないでください)
7. 別ウィンドウでブラウザを起動しseesaa blogの管理画面を開く。「デザイン」→「HTML」を選択し、現在利用しているHTMLを編集する。
<meta name="keywords" ・・・ の次の行あたりに、6で表示されたMETAタグを追加する追加完了したら、HTMLを保存する。
8. 保存後「すべてを再構築」する。
9. Google Sitemapsの管理画面に戻って、METAタグが表示されている部分の下にある、
http://ryouchi.seesaa.net/ のホームページにある META タグを追加しました。

をチェックし、「確認」ボタンを押すと完了。

これで大丈夫であろう。

暫くGoogle Sitemapsにアクセスしてなかったのであるが、なんだか知らないうちにかなりバージョンアップされているよーである。

「統計情報」→「クエリに関する情報」では上位検索語句や上位の検索クエリのクリック数などが表示される。
「統計情報」→「クロールに関する情報」ではGoogle に登録されたページの割合や、Google での PageRank について表示され、「PageRank の最も高いページ」という項目もある。
「統計情報」→「ページ分析」ではクロールしたコンテンツのタイプ、エンコードなどが表示される。
「統計情報」→「インデックスに関する情報」では下記の情報へリンクされている。
site:http://ryouchi.seesaa.net/
allinurl:http://ryouchi.seesaa.net/
link:http://ryouchi.seesaa.net/
cache:ryouchi.seesaa.net/
info:http://ryouchi.seesaa.net/
related:http://ryouchi.seesaa.net/

うーむ、知らないうちに機能がアップしたよーである。
暫く様子をみてみるっす。


posted by りょーち | Comment(5) | TrackBack(0) | Web周辺技術

2006年04月26日

feedmeterで生成されるタグについて このエントリーをはてなブックマークに追加

こんにちは、水谷八重子です(嘘です)。

feed meter なるものをサイトに貼り付けているのだが、良く見るとなんだか、生成されるタグがおかしいよーな気がする。

フィードメーター ブログ ランキング - りょーちの駄文と書評 というよーな感じで(人気度は兎も角)更新頻度が表示されるのでちょいと便利だなと思うのだが、この貼り付けタグは下記のように指定されている。


<a href="http://feedmeter.net/detail.php?r=http%3A%2F%2Fryouchi.seesaa.net%2F" target="_feedmeter"><img src="http://feedmeter.net/image.php?r=http%3A%2F%2Fryouchi.seesaa.net%2F" border="0" alt="RSS feed meter for http://ryouchi.seesaa.net/styles-36227.css" /></a>


アンカータグのtarget属性に_feedmeterってのはどうなの?
Another HTML-lint : Explanationl#illegal-target-name には、

HTML4.01(J)には、フレームターゲット名は英字から始まらなければならない、そうでない名前は無視される、と書かれています。これは、かなり厳しい制約で、将来増えるかも知れない(_topなどの)予約名に対処するためのものだと思われます。しかし、Mozillaなど、HTML4.0に先行してフレームを実装していたWWWブラウザではこのようなことはないようです。

と書かれているので、どーも違うよーな気がする。

実際どーでもよいのだけど、ホントのところどーなのか? うーむ。
posted by りょーち | Comment(0) | TrackBack(0) | Web周辺技術

2006年04月21日

作成したscriptのメニュー化 このエントリーをはてなブックマークに追加

こんにちは、幸田シャーミンです(嘘です)。

JavaScript Source: Free JavaScripts, Tutorials, Example Code, Reference, Resources, And Help を見ると、JavaScriptのサンプルがかなりの量、存在する。

いろいろオモシロそーなのでひとつ試してみた。
りょーちが試したのは、 The JavaScript Source: Text Effects : Fading Marquee である。

りょーちが作成したスクリプトのメニューをこんな感じで紹介できる。メニューに場所をとらないのでちょいと便利かも。


自作Script:


設置方法などは、上記のサイトに書かれているのでパラメータを変えるだけで設置できて非常に簡単(英語だけど、問題ないっす)。

他にもかなりオモシロそーなものがあるので時間があったら試してみよう。

# 相変わらずseesaaのコメント機能はおかしいまま・・・orz
posted by りょーち | Comment(0) | TrackBack(0) | Web周辺技術

2006年04月14日

はてなブックマークされている数を取得するブログパーツ このエントリーをはてなブックマークに追加

こんにちは、イクラちゃんです(バブー)(謎)。

以前 はてなブックマークされているエントリーを表示(テスト) で書いたのだが はてなブックマーク件数取得API というものがあるよーである。

なかなかオモシロそうなので、Blogの記事でどのくらいはてなブックマークされているかを知るためのBlogパーツを作ってみた。



まあ、これを貼り付けるだけである。
で、貼り付けるとどーなるかというと下記のよーなモノが表示される。



以下アイコンなどの説明です。
:今見ている記事をはてなブックマークに追加する
:はてなブックマーク先のリンク
・数値:はてなブックマークしている人の数
:りょーちのサイト(作成者)のリンク

という具合である。

今は記事をアップしたばかりなのではてなブックマークしている人の数は0ですが、この記事をみなさんがはてなブックマークしてくれればこの数は増えていくと思われます(^^;

Blogなどの場合は記事のタイトルの横などにレイアウトすれば美しいかもしれない。

#今まで作った中で一番小さいブログパーツかも・・・
#はてなヘビーユーザの方は是非お試しを
posted by りょーち | Comment(2) | TrackBack(5) | Web周辺技術

2006年04月12日

あとで読む このエントリーをはてなブックマークに追加

こんにちは、石本美由紀です(嘘です)。

最近話題になっているサービスで あとで読む という非常にシンプルなサービスがある。

はてなブックマーク などのソーシャルブックマークのよーなものなのかなと思っていたが、なかなか面白い。
「あとで読む」が提供するサービスは文字通り今見ているサイトを忘れないように「あとで読む」ためにメールでサイトの情報を送るサービスである。

まずメールアドレスを登録すると登録したメールアドレスにこんなメールが届く。

From:info@atode.cc
Subject:[あとで読む] 登録確認メールです(いま読んでください)
----
「あとで読む」ブックマーク サービスへようこそ


「あとで読む」は、ブックマークしたウェブサイトをメールで送信する、
シンプルなブックマークツールです。


■「あとで読む」を利用する

以下の URL をクリックして、表示されたリンクをブラウザに登録してください。

で、送られてきたURLをクリックすると専用のブックマークレットを作成するページに遷移する。そこで登録されたブックマークレットをお気に入りに登録しておけば完了である。

で、どーやって使うか。

たとえば、サイドフィード、メールでブックマークを管理できる「あとで読む」ベータ版 - CNET Japanなどを読んでいて「うーむ、文章長いのであとで読もう」と思ったときに先ほどのブックマークレットを実行すればメールにそのサイトのキャッシュ情報が送信される。

送信元のメールアドレスは info@atode.cc というメールアドレスなので自分の利用しているメーラーで振り分けをしておけば、ブックマークをメーラーで管理できる。

ソーシャルブックマークはその性質上サイトに一度行ってブックマークをみなければいけないがメールならタスクっぽく管理できるし、読み終わったら消しちゃえばよい。

うーむ。なんとシンプル。

なお、どーでもよいがこの「あとで読む」をはてなブックマークに登録しているのは1日で100人を越えている。

はてなブックマーク - あとで読む - ブックマーク - an email-based free bookmark service

うーむ。登録時のメールのサブジェクトの
[あとで読む] 登録確認メールです(いま読んでください)
にもユーモアセンスが感じられる。

しばらく使ってみよう。

posted by りょーち | Comment(2) | TrackBack(1) | Web周辺技術