2007年11月27日 17:49 Iwao Kobayashi
| 個別ページ
| コメント(0)
| トラックバック(0)
デザインで背景に雪の結晶でも薄く入れようと思い、Googleでイメージ検索をしたところ、雪の結晶dingbatを発見!
http://www.katsfunfonts.com/
ダウンロードは、Page63に掲載されている「KR Kinda Flakey」というリンクから。
この時期、デザインにさりげなく使ってやると雰囲気が増してよいのではないでしょうか。
Welcome to DingbatDepot.com : DingbatDepot.com is the largest source of free dingbat fonts on the internet today. All dingbat fonts on this site are free (shareware or freeware) and available for immediate download. To start downloading the free dingbat fonts, select one of the links from the left hand navigation panel: either Alphabetically or by Category.

free dingbat fonts
- with GroveLog
ちなみに、DingbatDepot.comというサイトも発見!
実際使えるかっていうと、微妙なものも多いとは思うけれど、眺めているだけでもにぎやかで楽しいです。
2007年11月17日 18:30 Iwao Kobayashi
| 個別ページ
| コメント(0)
| トラックバック(0)
写真をモーダルエフェクトで、スライドショー表示する
これはprototype.js用の、Lightbox.jsを使っていた。これと、全く同じ動きをしてくれるjQuery のプラグインがありました。
jQuery lightBox plugin
利用方法は簡単。ライブラリをサーバーにアップして、内で読み込む。そして、lightbox 表示するHTMLオブジェクト(タグを囲んでいるタグ)を、jQueryセレクタで選択する。 $('a[@rel*=lightbox]').lightBox(); と記述すると、prototype.js 用のlightbox.js で指定する方法と同じになるので、今までのブログ記事を修正しなくても、そのままjQueryプラグインでスライドショー表示できます。これは便利。

ブログで使っているprototype.js を jQuery へ移行(スライドショー, ハイライトなど):Goodpic
- with GroveLog
これまでThickBoxを使っていたけれど、こっちの方が、エフェクトがかっこいいなぁ。
いま、某バイクメーカーの新商品関連のフォトギャラリーサイトを作成していて、やはり、ThickBoxを使って構築したのだけれど、いまから変更したい気持ちが。。とはいえ、なにしろアップ直前だからなぁ。
このブログでも近々Flickrの写真を見せたいと思っているので、その際はこっちを使ってみます。
jQuery lightBox plugin
2007年11月15日 00:25 Iwao Kobayashi
| 個別ページ
| コメント(0)
| トラックバック(0)
DebugBarは、IE5以上に対応したウェブアプリケーションのデバッグツール。IE内でツールバーやサイドバーとして表示され、JavaScriptエラーやDOMツリー、HTMLソースコード、HTTPヘッダなどの表示、ページ内での任意のJavaScriptコードの実行、表示中のページに関するさまざまな情報の取得などが行える。

IE向けデバッグツール「DebugBar 5.0 beta 1」リリース:ニュース - ZDNet Japan
- with GroveLog
使えます。
これまで、FirefoxでのデバッグはFireBugのおかげで快適なんだけれど、困っていたのはIEでのデバッグ。
IEではjavascriptエラーが出た場合、アラートは出るが内容はほとんど意味なし。非常に面倒で、FireBugみたいなツールがないものかと以前から思っていたけれど、真剣に探すことなく、なんとなくすごしていたところ、このニュース。
ブログのネタにも良いと思い、ダウンロード and インストール。
機能としては、FireBugとくらべても遜色ないのではないでしょうか。
DOMのTreeも展開できるし、表示画面をなぞりながらオブジェクトの選択も可能だし、関連するcss、htmlソースなんかも参照できて、なにより、javascriptのエラーは行数とエラーメッセージがちゃんとでる。
これで、IEでのデバッグ効率も格段にアップすること間違いなし。重宝しそうです。
2007年11月12日 10:40 Iwao Kobayashi
| 個別ページ
| コメント(0)
| トラックバック(0)
GroveLogでは、最新のQuoteをXMLでfeedしています。これを読み込んで、ブログのサイドバーにその内容を表示してやろうという、よくあるブログパーツです。
実現するにあたって考慮しないといけないのは、javaScriptのクロスドメインの問題と、XMLのパースの問題。
クロスドメインの対応は今回は、当ブログのサーバ上にプロキシCGIを設置しました。(一応、レスポンスを返すドメインを制限する機能くらいはあります。)
XMLのパースにあたってはこれを使わせてもらいました。
JKL.ParseXML クラスは、サーバ上の XML 形式ファイルをダウンロード~解析して、
JavaScript オブジェクト(配列やマップ)に変換するライブラリです。
複雑な DOM 操作なく簡単なスクリプトで XML 形式ファイルを扱えるため、
Amazon など XML を出力する既存の Web サービスや、
CGI と連携することで ajax ページを手軽に構築できます。
IE・Firefox・Opera・Safari のクロスブラウザに対応しています。
XML を JSONのように手軽に扱える他、
JSON/CSV/LoadVars 形式ファイルなどのテキストファイルも利用可能です。

[ajax] JKL.ParseXML/ajax通信処理ライブラリ
- with GroveLog
ループ処理で最新の10件分だけ抽出するようにしています。
とりあえずなので、汎用的ではないです。
時期バージョンではJSONを利用してプロキシCGIなしで、どこでも設置可能なブログパーツに改良するつもりです。(ローディングのアニメーションくらいあったほうが親切かな)
2007年11月 2日 10:17 Iwao Kobayashi
| 個別ページ
| コメント(0)
| トラックバック(0)
このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。

ブロックレベル要素の高さを揃えるheightLine.js[to-R]
- with GroveLog
以前、角丸ライブラリかなにかで、角取りつつ高さも揃える・・みたいなのがあったような気がしたのだけれど、覚えておらず。
改めてGoogleしてみたところ、よさそうなのを発見。
ただ、個人的にはjQueryを利用しているので、jQuery版みたいのがあれば、そっちの方がすっきりするかなと思い、「jQuery 高さ揃え」で、再度Google。すると、今度はこれを発見。
ブロックレベル要素の高さを揃えるheightLine.js[to-R]を見て不満に思ったのは、高さを揃える要素を取得するために固定のclass名を使っていることでした。これだと既存のHTML文書に適用するためには、script要素を加えるだけでなく、それ用のclass名も書き加えなければなりません。どうせJavaScriptを使うのであれば、既存のHTMLの構造を生かしつつスクリプト側で目的の要素を取得できたほうがいいのではと思いました。

jQueryでブロック要素の高さを揃えてみる - 徒書
- with GroveLog
今回はこっちを使うことに。
問題なくうまく行きました。一点、jqcorner.jsも併用しているのだけれど、先に.flatHeights()で高さを揃えてから、.corner("5px")としないと変なところで角丸されてしまいます。
角丸とか、高さを揃えるとか、昨今のウェブデザインではよく使う手法だけれど、普通にやろうとすると、余計なdivが増えたり、cssを多くかかないといけなかったり、どんどん複雑になる傾向があります。こうった便利なjsを使うとソースも綺麗に保てるし、なにより、ずっと楽になります。重宝します。