2006年02月27日

seesaa blogでサムネイル画像をかっこよく表示 このエントリーをはてなブックマークに追加

こんにちは、紀友則です(嘘です)。久方の・・・(略)

以前 seesaa blogでLightbox.jsを使ってみる で書いたポップアップさせずにサムネイル画像を拡大表示させる方法。yanz さんのところでこの方法を見つけて、「おー、すごい」と思ってやってみたのだが、なかなか面白い。( 路上の風景〜landscapes on the road: Lightbox JS〜ポップアップさせずにサムネイル画像を表示 を参照)。

そんな中 秋元@サイボウズ研究所プログラマーBlog さんの サムネイルの段階拡大縮小サンプル という記事をみて結構感動したので「seesaa blog でもできるのかな?」と思ってやってみた。


眼の誕生――カンブリア紀大進化の謎を解く


サムネイル画像をクリックすると拡大され、再度クリックすると元の大きさに戻るというもの。

技術的には「setInterval で img タグの幅と高さの属性を段階的に更新」と書かれている。javascript の中身を見てみると、たしかにそんなことやっているっぽい。サムネイル画像から10pixelずつ拡大して、実画像の大きさになるまで拡大しているよーな感じ。

で、こんな感じでHTMLファイルを書く。
<p class="images">
<a href="http://images-jp.amazon.com/images/P/4794214782.09.LZZZZZZZ.jpg"
class="livethumbnail">
<img src="http://images-jp.amazon.com/images/P/
4794214782.09._OU09_PE0_SCMZZZZZZZ_.jpg"
width="122" height="176" largewidth="347" largeheight="500" /></a></p>
なかなかオモシロそうなので捕獲&採用。
しかし、よくこういうの思いつくし、見つけてくるねー。情報感度の高い人はこういうのすぐ見つけてくるので、すごいっす。秋元@サイボウズ研究所プログラマーBlog さん、やっぱ只者ではない。


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

2006年02月23日

seesaa blogのカテゴリと月別アーカイブは検索エンジンに巡回されない? このエントリーをはてなブックマークに追加

こんにちは。今田勇子です(嘘です)(って危ないか?)

blog に限らずいろんなサイトで検索エンジンに引っかかるかどーかなのでサイト保有ユーザは頭を悩ませているよーな気がする。「 blog は Search Engine Optimization (検索エンジン最適化)の観点からなかなかよいばい」というよーなことを言われている。
seesaa blog の場合はどーなんだろう?
この blog では殆どの記事がリサイクル不可能な澱のよーなものなのだが、Google には拾われているっぽい。
Google はクローラーと呼ばれるプログラムが御用聞きのよーにいろんなサイトをぐるぐる回って、コンテンツをかき集めている。Google のよーなロボット型検索エンジンはあるルールに則って検索対象サイトの情報をかき集めている。

そのルールとしてサイトのトップディレクトリに「robots.txt」にそのルールを書いたり、HTML内のMETAタグに
<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">

などと書くことでここは検索対象にしないでね(あるいは検索対象にしてもよいよ)というよーなことができるっぽい。(.htaccessを利用する方法もあるのかのぅ?)

ただ、robots.txtが置かれていれば必ずどのサーチエンジンのクローラーも巡回しないかといえばそうでもなさそう。言ってみれば紳士協定的な役割なのだろう。場合によってはお行儀の悪いクローラーも存在するはず。(そういうクローラーを作る人自身がお行儀が悪いとも言えなくもないのだが・・・)

このseesaa blogにも実は robots.txt が存在する。
http://ryouchi.seesaa.net/robots.txt

上記のリンクを見ればわかると思いますが、seesaa blogの robots.txt の内容はこんな風にかかれているのだ。
User-agent: *
Disallow: /category/
Disallow: /archives/

ふむ。これはどーいうことが書かれているかといえば、「すべての User-agent に対して /category/ 以下のディレクトリと /archives/ 以下のディレクトリの内容は検索エンジンのクローラーで収集しちゃだめよ」って書かれているっぽい。seesaa blogの場合、各個別の記事は /article/ 以下に置かれているので記事自体は検索対象になっている(当たり前?)。

上記の robots.txt の内容を信じれば、seesaa blog のカテゴリのHTMLファイルと月別アーカイブのHTMLファイルは検索エンジンのクローラーから見向きもされないということになる。(この認識はあっていますか? 識者の方、コメントいただければ幸いです)

この挙動は果たしてどうなのか? robots.txtについて、他のblogも調べてみた。
ココログ:robots.txtなし?
JUGEM:robots.txtなし?
アメーバブログ:robots.txtなし?
はてなダイアリー:robots.txtなし?
livedoor Blog:robots.txtなし?
Excite blog:robots.txtなし?
楽天広場:robots.txtなし?
So-net blog:オーケンブログ:robots.txtなし?
ウェブリブログ:robots.txtなし?
goo ブログ:robots.txtあり(GooglebotのみsearchディレクトリをDisallow)
FC2ブログ:FC2ブログポータルのみに設定されている? robots.txt
ヤプログ:robots.txtなし?
Yahoo!ブログ:robots.txtなし?
Blogger:robots.txtなし?

なんとなくパッと見だがrobots.txtを利用していないところが多い気がする。Seesaaのように設定しているほうが珍しいってことか? うーむ、よくわからん。
posted by りょーち | Comment(0) | TrackBack(0) | Web周辺技術

2006年02月20日

Google Page Rank Checker を少し修正してみた このエントリーをはてなブックマークに追加

こんにちは、石野桜子です(嘘です)。

どうやら Seesaaでのお祭り も無事に終わったようであり、とりあえずこのページも生きていました。昔書いた記事も消えるとなんとなく困るしあたふたしていましたがなんとか持ち直してくれてよかったです。(Seesaaの中の人、お疲れさまでした)。
そーいえば、すっごい昔に作成しっぱなしだった Google PageRank Checker という Google の Pagerankを調べるツール(そのままだが・・・)をちょいと他人任せに改良してみた。

切っ掛けは ウェブマスターフォーラム に書かれていた ウェブマスターフォーラム - グーグルのページランクのおかしな現象について を読んだことにあるっす。
上記のフォーラムで ch値 を調べるツールを作られたという方がいらっしゃったので「ふむふむ。ch値とはなんぞや?」と思いちょっと調べてみた。どうも各サイトに固有の摩訶不思議な番号のようである。 SEO覚え書き3. Googleツールバー を読んでみると難しそうなことが書かれている。

結局なんだかよくわからなかったのだが、ch値を取得することができたので、google pagerank checker に早速組み込んだ。
Google PageRank Checker

試しに りょーちの駄文と書評を調べてみる と、ch値は 63830453980 らしい。で、このch値とURLを 自分でやろうSEO (ゼロからのアクセスアップ) > Googleページランクチェックツール - Su-Jine に渡せばよいらしい。
いちいち調べてアクセスするのが面倒だったので Google PageRank Checker から直接 Su-Jine さんのサイトにデータを渡してチェックできるよーにしてみた。
ふーむ。しかし Su-Jine さん、凄いっす。いろいろ難しいことをやる人がいて、偉いのぅ・・・
続きを読む
posted by りょーち | Comment(3) | TrackBack(0) | Web周辺技術

2006年02月08日

世界の国旗を覚えましょう このエントリーをはてなブックマークに追加

こんにちは。JOC会長の竹田恆和です(嘘です)。JCO じゃないよ!

ってことでもうすぐトリノってところでオリンピックなるものが行われるよーだ。織田裕二もワクワクしているのではなかろうか?(違うか?)

日本はいくつメダルを取ることができるかはさておいて、表彰台などでいろんな国の人々が表彰されているとき、その国の国旗が掲揚される。しかし国旗だけみたのではどの国だかよくわからないことが多い。水曜スペシャルの「ビックリちびっ子選手権」の全ての国の国旗を覚えている小学二年生の竹田高利くん(謎)じゃないかぎり無理だろう。

で、まあ国旗をなんとなく覚えてみようと思ってこんなものを作ってみた。(あとjavascriptの練習ってことで・・・)
世界の国旗を覚えましょう

まあそのまんまなのだ。以前 JavaScriptで seesaa blog を全文検索 ってので参考にした 最速インターフェース研究会 さんの 最速インターフェース研究会 :: JavaScriptにBlogの全文検索をやらせてみる のインターフェースをそのまま借りてやってみた(実に素晴らしい)。
問題開始ボタンを押して、テキストボックス内に国名を入力し、表示された検索結果を選択して回答するよーなものである。JavaScriptなので、まあたいしたことはできないのであるが、innerHTML とか結構便利なことに気づいたよ(今頃?)。
ちなみに、国旗の画像ファイルは Google の 言語ツール に表示されているものをつかってみた。
まあ、これでちょいと遊んでみるづら。
posted by りょーち | Comment(0) | TrackBack(0) | Web周辺技術

2006年02月06日

「はてなアンテナをあなたのblogに」ちょっと修正 このエントリーをはてなブックマークに追加

こんにちは。凡河内躬恒です(嘘です)。心あてに折らばや折らむ初霜のおきまどはせる白菊の花(謎)。

先日掲載した「はてなアンテナをあなたのblogに ver1.1」をつくってみたのだが、利用されている方はいろんなことをかんがえていらっしゃるよーである。
いただいたご意見の中で、
更新日時を取得したい

という意見があったのでなんとなくできるよーにしてみた。実装方法はとても簡単ではてなアンテナのRSS情報の[dc:date]の値をGetして表示しているだけである。で、これに伴って、設定する項目がちょっと増えたので設定用のphpスクリプトと表示用のphpスクリプトを若干修正してみた。
あと、
最新の記事の記事タイトルの表示なんかもできるように

という意見もあったのだが、これは無理です。ってのははてなアンテナのRSSで表示される[item:description]は必ずしも記事タイトルが表示されているわけではないからです。まあ、このあたりはもうRSSリーダの世界かなぁ・・・
URLはVer1.1のURLのままであるので、下記から設定できると思われます。
はてなアンテナをあなたのblogに ver1.1

うーむ。どうだろう?
Blogパーツと言えなくもないが、先ず
・はてなアンテナを利用しているユーザで
・自分のBlogをはてなアンテナに表示したいというユーザ
だけが利用するっぽいので殆どユーザは皆無かと思われるがどうであろう?

また、この変更に伴って、各要素に付けたclassがひとつ追加されましたのでそれを書いておきます。CSSなどで綺麗にレイアウトしたい人は参考にしてください。
・class="ha_header":アンテナ名
・class="ha_item":アンテナのリスト部分
・class="ha_date":アンテナ取得日時
・class="ha_config":画面下部のconfigのリンク
・class="ha_copy":画面下部のryouchiのリンク

画面左側にはりつけているりょーちのはてなアンテナの設定は、下記の設定にしています。
・ユーザ名:ryouchi
・MAP アイコン:表示
・include アイコン:表示
・文字コード:SJIS
・更新日時の表示:long

更新日時の表示は「年月日+時刻表示(long)」と「年月日のみ(short)」で選択できるよーにしてみた。

パラメータが多くなったので、設定用のphpのscriptが約200行(元々は約50行)、表示用のphpのscriptが約60行(元々は約20行)くらいになった(うーむ)。scriptの殆どがHTMLファイルとして情報を表示することに使われているので実際はホントにシンプルなプログラムである。 はてな で作ってくれたらいいのに・・・(と言ってみるテスト)

なお、実際誰が使っているのかりょーちは把握できていないので、利用されている方は(もしよろしければ)コメントなどいただけると嬉しいです。(ホントどのくらいいるのだろう・・・)

だめ?
posted by りょーち | Comment(20) | TrackBack(2) | Web周辺技術

2006年02月02日

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

こんにちは、犬山犬子です(嘘です)。

以前 はてなアンテナをあなたのblogに という適当につくったものがある。
はてなアンテナで登録しているものを自分のblogに表示させるという「作っては見たが、誰か使っている人がいるのか?」というものなのだが、どうやら非常に少数であるが、利用されている方がいらっしゃるよーだ(ふむふむ)。

この 紹介記事エイトリアン さんよりコメントをいただきました。
できれば、MAP等のアイコンの非表示、及び更新日時がgetできるとありがたいです。

ふむふむ。
りょーちの作ったものははてなアンテナのRSSにアクセスしてそのままRSSの情報をひっぱってきて加工するよーなものなので、更新日時をGetするよーな仕組みは難しいです(というより、現在のものが反映されているよーな感じです)。
で、もうひとつのアイコンの表示・非表示の部分はやってみたらできそーだったのでやってみました。
且つ、各パーツに適当なclass名をつけてみたので、CSSなどでカスタマイズする場合にはてきとーにCSSを作ってもらえれば表示方法がカスタマイズできる(はず)。
はてなアンテナをあなたのblogに ver1.1

表示部分に割り当てたclassは下記の通り。
class="ha_header":アンテナ名
class="ha_item":アンテナのリスト部分
class="ha_config":画面下部のconfigのリンク
class="ha_copy":画面下部のryouchiのリンク

早速このサイトの左側のサイドバーにつけてみた。(多分動いているはず)。

どうであろう?(って使う人がいるのか?)
posted by りょーち | Comment(13) | TrackBack(1) | Web周辺技術

2006年02月01日

Internet Explorer 7のベータ版をインストールしてみた このエントリーをはてなブックマークに追加

こんにちは、林家きく姫です(嘘です)。

Internet Explorer 7のベータ版が出たよーなので早速WindowsXPにインストールしてみた。(ダメ?)
Internet Explorer 7: Beta 2 Preview

ユーザインターフェースが微妙に不思議な感じだがとりあえずサイトを見ることができるよーだ。いまこの記事もIE7から投稿しているのだ。
パッと見気づいたのは、こんな箇所。

■気づいたこと
・当然だが殆どのメニューが英語表記になった。
・RSS FeedがあるサイトでFeedsボタンを押すとそれっぽく整形した感じでRSSの内容を表示してくれたりする。
・Tab ブラウザという触れ込みだったのだが、FileメニューのNew Tabは何故か使えないのでTABで表示されないっぽい。
・ウィンドウ右下のステータス部分に画面の(文字ではない)拡大・縮小率を選択できるよーな機能がある。
・IE6のブックマークとかクライアント証明書などはそのまま引き継がれているっぽい。
・Google toolbarなどはなんとなくそのまま使えそう。
・Favorite(お気に入り)はブックマークとは別にFeedsという感じでRSS Feedなどもブックマークできるっぽい。
・Cookieなどもそのまま引き継がれるっぽい。

■気になったこと
・コントロールキー+ホイールマウスの操作がIE6と逆のよーな気がするが、気のせい?
・しかもホイールマウスで拡大すると、IFRAMEのスクロールバーが見えてしまう。(例えばAdsenseとか)

うーむ。よくわからんが、しばらくつかってみよう。

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

2006年01月30日

seesaa blog にショートカットアイコン(favicon)をつけてみる このエントリーをはてなブックマークに追加

こんにちは。三木のり平です(嘘です)。「ごはんですよ」(謎)。

seesaa blogのHTML編集を使ってサイトにショートカットアイコンをつけてみた。
ショートカットアイコンとは Firefox や Internet Explorer などでブックマークをつけたときにカスタマイズされたアイコンがブックマークと一緒に登録されたりするもののよーである。faviconなどとも呼ばれているっぽい。

やりかたはとっても簡単。
1. 先ずiconを作成する。このiconはbookmarkしたときに表示されるiconで、だいたい16x16とか32x32とかで256色で作るっぽい。で、画像ファイルの形式はGIF形式でも大丈夫な感じ。
2. アニメーションGIFなどを利用したい場合は下記URLでアニメーションGIFを作る。

ファイル名はfavicon.gifとしておこう。
3. Seesaa ブログ 管理画面 から自分のブログを選択後、「ツール」→「ファイルマネージャ」で、作成したGIFファイルをアップロードする(仮にryouchi.up.seesaa.net/image/にfavicon.gifをアップロードする。
4. 管理画面から「デザイン」→「HTML」を選択し、現在利用しているHTMLを編集する。
5. <head> 〜 </head>の中に下記を追加する。
<link rel="shortcut icon" href="http://ryouchi.up.seesaa.net/image/favicon.gif" />
<link rel="icon" href="http://ryouchi.up.seesaa.net/image/favicon.gif" type="image/gif" >

6. 再構築する。

で、できると思われる。
#基本的にseesaa以外でもこの方法で実装できると思われる。

FirefoxだとfaviconにアニメーションGIFを設定するとサイトを表示した際にアイコンがアニメーションされるよーな予感がする。
Internet ExplorerではアニメーションGIFは機能していないよーなきがする。

うーむ、よくわかんないな。(まあ、できなくても体制に影響はない・・・)
posted by りょーち | Comment(0) | TrackBack(0) | Web周辺技術

2006年01月25日

seesaa blogでLightbox.jsを使ってみる このエントリーをはてなブックマークに追加

こんにちは、堺すすむです(嘘です)。なーんでか?(謎)

今話題の Lightbox JS をseesaa blog でも使ってみたいなと思い、誰かやってないかなーと思ったら、既に実装されている方がいらっしゃったので、参考にしてみたら動いた。

路上の風景〜landscapes on the road: Lightbox JS〜ポップアップさせずにサムネイル画像を表示yanz さん、Good Job!!

りょーちの場合、 lightbox.css は外部ファイルとして直接stylesheetを読み込むようにしてありますが、基本的には yanz さんのところでまとめられていた、そのまま実装すればOKです!

実装結果はこんな感じです。(適当な画像がないのでamazonのものを利用した。アフィリエイトリンクじゃないっす)
amazonalert.png

なかなかよいではないですかー。
seesaa blogでは画像ファイルをアップロードした後、サムネールが作成されるよーなのですが、このリンクの貼り方は自分で入力しなければならないのでちょっと面倒。

元画像とサムネールのURLさえわかればbookmarkletとか簡単に作れそうなので、seesaa blogでデフォルトでlightbox.jsに対応して貰えたらちょっと嬉しいなと思ったりした(無理?)。
続きを読む
posted by りょーち | Comment(7) | TrackBack(1) | Web周辺技術

2006年01月23日

RSS1.0の情報を取得してXSLで整形する このエントリーをはてなブックマークに追加

こんにちは。腹黒い男で知られている、三遊亭楽太郎です(嘘です)。祝 笑点2000回

先日書いた「seesaa blogのRSSファイルをXSLで表示してみる」をもうちょっと試してみた。
RSS1.0の形式のデータだったらなんでもよさそうな感じだったので、試しにやってみた。

RSS1.0のURLを入力し、「取得」ボタンを押すとRSS情報をGetして適当なXSLファイルを元にRSSファイルを変換して表示するよーなもの。

ドメイン間でのデータソースのアクセスのエラーが出ると面倒なので、一度phpでよそさまのRSSを取得して、同じドメインにあるよってことにして表示している。
現在RSS1.0のみに対応中。

ふむ。難しいのぅ。
posted by りょーち | Comment(0) | TrackBack(0) | Web周辺技術