Blog | yusukekamiyamane tag:yusukekamiyamane.com,2008-05-13:/blog//1 2008-12-24T05:18:47Z Movable Type 4.1 Tangofy tag:yusukekamiyamane.com,2008:/blog//1.24 2008-12-24T05:16:32Z 2008-12-24T05:18:47Z Tangofy verschönert WordPress 2.7 Icons ... y Tangofy verschönert WordPress 2.7 Icons

ほお。

]]> アイコンセットランキング tag:yusukekamiyamane.com,2008:/blog//1.23 2008-12-19T06:33:18Z 2008-12-23T13:23:56Z 50 Most Beautiful Icon Sets Created in 2... y 50 Most Beautiful Icon Sets Created in 2008

11位という中途半端な位置にFugue Iconsがひっそりと。今更ながらベクター系ばかりだ。

]]> ブロック要素の高さを揃える tag:yusukekamiyamane.com,2008:/blog//1.22 2008-12-05T03:35:02Z 2008-12-05T03:51:33Z 高さというより下端だけど。 equal-bottom-nに対応する要素の下端を揃... y 高さというより下端だけど。

equal-bottom-nに対応する要素の下端を揃える。

]]> サンプル

$ (function () {
    for (var i = 1; $ (".equal-bottom-" + i).length; i++) {
        var block = $ (".equal-bottom-" + i);
        var height = 0;
        block.each (function () {
            height = Math.max ($ (this).offset ().top + $ (this).height (), height);
        });
        block.each (function () {
            $ (this).height (height - $ (this).offset ().top);
        });
    }
});
div.box {
    border: 1px solid #000;
    margin-bottom: 20px;
    margin-top: 20px;
    padding: 10px;
}
div.grid {
    _height: 1%;
    *zoom: 1;
}
div.grid:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
div.grid div.column {
    float: left;
}
p {
    margin-bottom: 0;
    margin-top: 0;
}
<div class="grid">
    <div class="column" style="margin-right: 20px; width: 200px;">
        <div class="box equal-bottom-1"><p>ほげほげほげほげほげ...</p></div>
    </div>
    <div class="column" style="margin-right: 20px; width: 200px;">
        <div class="box equal-bottom-1"><p>ほげほげほげほげほげ...</p></div>
    </div>
    <div class="column" style="width: 200px;">
        <div class="box equal-bottom-1"><p>ほげほげほげほげほげ...</p></div>
    </div>
</div>
<hr />
<div class="grid">
    <div class="column" style="margin-right: 20px; width: 200px;">
        <div class="box"><p>ほげほげほげほげほげ...</p></div>
        <div class="box equal-bottom-2"><p>ほげほげほげほげほげ...</p></div>
    </div>
    <div class="column" style="margin-right: 20px; width: 200px;">
        <div class="box equal-bottom-2"><p>ほげほげほげほげほげ...</p></div>
    </div>
    <div class="column" style="width: 200px;">
        <div class="box"><p>ほげほげほげほげほげ...</p></div>
        <div class="box equal-bottom-2"><p>ほげほげほげほげほげ...</p></div>
    </div>
</div>
<hr />
<div class="grid">
    <div class="column" style="margin-right: 20px; width: 200px;">
        <div class="box"><p>ほげほげほげほげほげ...</p></div>
        <div class="box"><p>ほげほげほげほげほげ...</p></div>
        <div class="box equal-bottom-3"><p>ほげほげほげほげほげ...</p></div>
        <div class="box equal-bottom-4"><p>ほげほげほげほげほげ...</p></div>
    </div>
    <div class="column" style="margin-right: 20px; width: 200px;">
        <div class="box equal-bottom-3"><p>ほげほげほげほげほげ...</p></div>
        <div class="box equal-bottom-4"><p>ほげほげほげほげほげ...</p></div>
    </div>
    <div class="column" style="width: 200px;">
        <div class="box equal-bottom-4"><p>ほげほげほげほげほげ...</p></div>
    </div>
</div>
]]> なんちゃってvalign tag:yusukekamiyamane.com,2008:/blog//1.21 2008-12-03T23:01:41Z 2008-12-03T23:10:46Z やはり出来ると便利なので。... y やはり出来ると便利なので。

]]> サンプル

$ (function () {
    $ ("div.grid.middle > div.column").addClass ("middle");
    $ ("div.grid.bottom > div.column").addClass ("bottom");
    $ ("div.grid div.column").filter (".middle, .bottom").each (function () {
        var height = 0;
        $ (this).siblings ().each (function () {
            height = Math.max (height, $ (this).height ());
        });
        var margin = Math.max (height - $ (this).height (), 0);
        $ (this).css ("margin-top", ($ (this).hasClass ("middle") ? Math.floor (margin / 2) : margin) + "px");
    });
});
div.grid {
    _height: 1%;
    *zoom: 1;
}
div.grid:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
div.grid div.column {
    float: left;
}
<div class="grid middle">
    <div class="column" style="margin-right: 20px; width: 100px;"><p>ほげほげほげほげほげ...</p></div>
    <div class="column" style="margin-right: 20px; width: 100px;"><p>ほげほげほげほげほげ...</p></div>
    <div class="column" style="width: 100px;"><p>ほげほげほげほげほげ...</p></div>
</div>
<hr />
<div class="grid bottom">
    <div class="column" style="margin-right: 20px; width: 100px;"><p>ほげほげほげほげほげ...</p></div>
    <div class="column" style="margin-right: 20px; width: 100px;"><p>ほげほげほげほげほげ...</p></div>
    <div class="column" style="width: 100px;"><p>ほげほげほげほげほげ...</p></div>
</div>
<hr />
<div class="grid">
    <div class="column middle" style="margin-right: 20px; width: 100px;"><p>ほげほげほげほげほげ...</p></div>
    <div class="column" style="margin-right: 20px; width: 100px;"><p>ほげほげほげほげほげ...</p></div>
    <div class="column bottom" style="width: 100px;"><p>ほげほげほげほげほげ...</p></div>
</div>
]]> テーブルのセルの中をいい感じに tag:yusukekamiyamane.com,2008:/blog//1.20 2008-11-18T07:32:21Z 2008-12-03T23:06:12Z y <td><ul /></td>と<td>ほげほげ<ul /></td>、両方ともulが:first-childになるのは困ることが多いので:first-node疑似クラスを使えるようにする。

:-moz-first-nodeと同じ。

]]> サンプル

jQuery.extend (jQuery.expr [":"], {
    "first-node": function (a) {
        var b = a.parentNode.childNodes;
        for (var i = 0; i < b.length; i++) {
            var c = b [i];
            if (c.nodeType == 1) {
                return c.parentNode.getElementsByTagName ("*")[0] == a;
            }
            if (jQuery.trim (c.nodeValue)) {
                return false;
            }
        }
        return false;
    }
});
$ (function () {
    $ ("td > :first-node").addClass ("first-node-of-td");
});
]]> 横幅不定のブロック要素を中央・右揃え tag:yusukekamiyamane.com,2008:/blog//1.19 2008-11-15T02:00:50Z 2008-11-15T06:57:31Z 要するに横幅を自動で設定してやるだけ。... y 要するに横幅を自動で設定してやるだけ。

]]> サンプル

$ (function () {
    $ (".left, .center, .right").each (function () {
        $ (this).css ({
            display: "block",
            float: "none",
            width: $ (this).css ({ display: "inline-block", float: "left" }).width ()
        });
    });
});
.left {
    margin-left: 0;
    margin-right: auto;
}
.center {
    margin-left: auto;
    margin-right: auto;
}
.right {
    margin-left: auto;
    margin-right: 0;
}
<ul class="left">
    <li class="center">ほげほげほげほげほげ...</li>
    <li class="center">ほげほげほげほげほげ...</li>
    <li class="center">ほげほげほげほげほげ...</li>
    <li class="center">ほげほげほげほげほげ...</li>
    <li class="center">ほげほげほげほげほげ...</li>
</ul>
<ul class="left">
    <li class="right">ほげほげほげほげほげ...</li>
    <li class="right">ほげほげほげほげほげ...</li>
    <li class="right">ほげほげほげほげほげ...</li>
    <li class="right">ほげほげほげほげほげ...</li>
    <li class="right">ほげほげほげほげほげ...</li>
</ul>
<ul class="center">
    <li>ほげほげほげほげほげ...</li>
    <li>ほげほげほげほげほげ...</li>
    <li>ほげほげほげほげほげ...</li>
    <li>ほげほげほげほげほげ...</li>
    <li>ほげほげほげほげほげ...</li>
</ul>
<ul>
    <li class="center">ほげほげほげほげほげ...</li>
    <li class="center">ほげほげほげほげほげ...</li>
    <li class="center">ほげほげほげほげほげ...</li>
    <li class="center">ほげほげほげほげほげ...</li>
    <li class="center">ほげほげほげほげほげ...</li>
</ul>
<ul class="right">
    <li>ほげほげほげほげほげ...</li>
    <li>ほげほげほげほげほげ...</li>
    <li>ほげほげほげほげほげ...</li>
    <li>ほげほげほげほげほげ...</li>
    <li>ほげほげほげほげほげ...</li>
</ul>
<ul>
    <li class="right">ほげほげほげほげほげ...</li>
    <li class="right">ほげほげほげほげほげ...</li>
    <li class="right">ほげほげほげほげほげ...</li>
    <li class="right">ほげほげほげほげほげ...</li>
    <li class="right">ほげほげほげほげほげ...</li>
</ul>
]]> ダイアログを出さずにウィンドウを閉じる tag:yusukekamiyamane.com,2008:/blog//1.18 2008-10-12T07:29:08Z 2008-10-24T05:32:39Z window.open以外の方法で開いたウィンドウをwindow.closeで閉... y window.open以外の方法で開いたウィンドウをwindow.closeで閉じるときに「ウィンドウは、表示中の...」というダイアログを出さずにウィンドウを閉じる。

将来にわたって問題ないのかどうかはあやしい。

]]> サンプル

window._close = window.close;
window.close = function () {
    (window.open ("", "_top").opener = top)._close ()
};
<a href="javascript:window.close ();">閉じる</a>
]]> Fugue Icons 1.0 tag:yusukekamiyamane.com,2008:/blog//1.17 2008-10-12T04:00:44Z 2008-10-12T04:04:19Z いい加減に作るか、ということで1000個にしてバージョン1.0リリース。 随分サ... y いい加減に作るか、ということで1000個にしてバージョン1.0リリース。

随分サボったけど4ヶ月でこれなら十分がんばりましたで賞ぐらいは。

]]> Twitterのタイムラインを読み込む tag:yusukekamiyamane.com,2008:/blog//1.16 2008-10-11T14:47:43Z 2008-10-12T01:27:10Z 日付部分がアレなのがアレ。... y 日付部分がアレなのがアレ。 サンプル

$ (function () {
    $ ("<script type='text/javascript' src='http://twitter.com/statuses/user_timeline/[ユーザー名].json?callback=twitterCallback&amp;count=10'></scr" + "ipt>").appendTo ("body");
    twitterCallback = function (result) {
        if (result.length) {
            var list = $ ("<dl />").appendTo ("div#twitter");
            $.each (result, function (i, entry) {
                $ ("<dt>" + entry.created_at + "</dt>").appendTo (list);
                $ ("<dd><a href='http://twitter.com/[ユーザー名]/statuses/" + entry.id + "'>" + entry.text + "</a></dd>").appendTo (list);
            });
        }
    };
});
<div id="twitter"></div>
]]> 検索キーワードに関連するブログ記事リストを表示 tag:yusukekamiyamane.com,2008:/blog//1.15 2008-10-02T09:30:39Z 2008-10-11T11:58:08Z JavaScriptで検索キーワードを取得して、Google AJAX Sear... y JavaScriptで検索キーワードを取得して、Google AJAX Search APIにぶっこむだけ。

]]> 例:

当サイト。

  1. Googleとかで「Fugue Icons」や「jQuery 注釈リスト」などと検索
  2. 検索結果からブログ記事を見る
  3. 右上とか、ホームとか

検索キーワードはセッションCookieで保持。

]]> JavaScriptで検索キーワードを取得 tag:yusukekamiyamane.com,2008:/blog//1.14 2008-09-29T18:25:23Z 2008-10-11T04:36:55Z 超適当版。 文字コード周りはEscape Codec Libraryで。 引数r... y 超適当版。

文字コード周りはEscape Codec Libraryで。

引数referrerはチェック用。

]]> サンプル

function getSearchQuery (referrer) {
    if (/[?&](kw|MT|name|p|q|qt|query|search|word)=([^&]+)/.test (referrer || document.referrer)) {
        var query = RegExp.$2;
        return eval ("Unescape" + GetEscapeCodeType (query) + "('" + query.replace (/\+/g, " ") + "')").replace (/^\s+|\s+$/g, "");
    }
    return null;
}
]]> SWFObjectとSafari tag:yusukekamiyamane.com,2008:/blog//1.13 2008-09-29T13:35:35Z 2008-10-11T04:38:01Z プラグインを無効にしている場合にもまじめにインストールされているバージョンを返し... y プラグインを無効にしている場合にもまじめにインストールされているバージョンを返してくれるのだけど、都合が悪いので0を返してくれるように改造。 オリジナル:

...if(navigator.plugins&&navigator.mimeTypes.length)...

改造版:

...if(navigator.plugins&&navigator.mimeTypes.length&&navigator.mimeTypes["application/x-shockwave-flash"]&&navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin)...
]]> Fugue Iconsだか何だか tag:yusukekamiyamane.com,2008:/blog//1.12 2008-09-29T12:57:10Z 2008-09-29T13:26:17Z 971個まで作ったところで仕事で中断。戻ってきたら超興味なくなっていた。 勢いっ... y 971個まで作ったところで仕事で中断。戻ってきたら超興味なくなっていた。

勢いって大切。

]]> フィードを読み込む tag:yusukekamiyamane.com,2008:/blog//1.11 2008-09-29T12:38:50Z 2008-10-11T04:38:43Z Google AJAX Feed APIとjQueryで簡単に。... y Google AJAX Feed APIとjQueryで簡単に。

]]> サンプル

google.load ("feeds", "1");
google.load ("jquery", "1.2.6");
google.setOnLoadCallback (function () {
    var feed = new google.feeds.Feed ("http://news.google.com/?output=rss");
    feed.setNumEntries (10);
    feed.load (function (result) {
        if (!result.error) {
            var list = $ ("<dl />").appendTo ("div#feed");
            $.each (result.feed.entries, function (i, entry) {
                $ ("<dt>" + entry.publishedDate + "</dt>").appendTo (list);
                $ ("<dd><a href='" + entry.link + "'>" + entry.title + "</a></dd>").appendTo (list);
            });
        }
    });
});
<div id="feed"></div>
]]> Fugue Iconsまたまた tag:yusukekamiyamane.com,2008:/blog//1.9 2008-07-28T23:49:18Z 2008-07-28T23:56:15Z Speckyboyにも掲載された。 96 of the Best Ever Fr... y Speckyboyにも掲載された。

96 of the Best Ever Free Icon Sets - For Web Designers, Developers and Bloggers

アイコンは現在826個。目標の1000個はまだまだ。

]]>