Blog | yusukekamiyamane » code http://yusukekamiyamane.com/blog Mon, 16 Jan 2012 08:29:51 +0000 ja hourly 1 http://wordpress.org/?v=3.1 相対日時表記に変換 http://yusukekamiyamane.com/blog/archives/141 http://yusukekamiyamane.com/blog/archives/141#comments Wed, 17 Mar 2010 00:35:44 +0000 yusukekamiyamane http://yusukekamiyamane.com/blog/?p=141 PHPの場合。

function format_relative_date ($date) {
  $time = strtotime ($date);
  $second = time () - $time;
  if ($second < 60) {
    return ($second . "秒前");
  } else if ($second < 3600) {
    return (intval ($second / 60) . "分前");
  } else if ($second < 86400) {
    return ("約" . intval ($second / 3600) . "時間前");
  } else {
    return (date ("m/d H:i", $time));
  }
}
]]> http://yusukekamiyamane.com/blog/archives/141/feed 0 アイコン検索のAjax化 http://yusukekamiyamane.com/blog/archives/97 http://yusukekamiyamane.com/blog/archives/97#comments Tue, 16 Mar 2010 03:02:04 +0000 yusukekamiyamane http://yusukekamiyamane.com.s88735.gridserver.com/blog/?p=97 した 。

jQueryのload関数、超便利ですね。

]]> http://yusukekamiyamane.com/blog/archives/97/feed 0 アイコン検索 http://yusukekamiyamane.com/blog/archives/26 http://yusukekamiyamane.com/blog/archives/26#comments Wed, 24 Feb 2010 04:11:51 +0000 yusukekamiyamane http://yusukekamiyamane.com.s88735.gridserver.com/blog/?p=26 Fugue Icons Search を公開。

夜なべしてリファレンス系サイトと首っ引きでPHP書いた。適当でも動くもんだ。

]]> http://yusukekamiyamane.com/blog/archives/26/feed 0 サイトの多言語対応化 http://yusukekamiyamane.com/blog/archives/23 http://yusukekamiyamane.com/blog/archives/23#comments Fri, 19 Feb 2010 07:13:14 +0000 yusukekamiyamane http://yusukekamiyamane.com.s88735.gridserver.com/blog/?p=23 アイコンとかフォントのサイト を.htaccessをいじくってコンテントネゴシエーションで多言語対応化 (と言っても2言語だけだけど) した時のメモ。

Think ITの記事 を大いに参考にした。

英語版: index.html.en (デフォルト)
日本語版: index.html.ja

AddLanguage ja .ja
AddLanguage en .en
Options +MultiViews
ForceLanguagePriority Fallback
LanguagePriority en ja
SetEnvIf Cookie (^|\s)lang=\"?(en|ja)\"? prefer-language=$2
SetEnvIf Request_URI \.(en|ja)$ prefer-language=$1
Header append Set-Cookie "lang=%{prefer-language}e;expires=Tue, 1-Jan-2030 00:00:00 GMT;path=/" env=prefer-language
Header append Cache-Control no-cache

多分ちゃんと動いてる。

]]> http://yusukekamiyamane.com/blog/archives/23/feed 0 ブロック要素の高さを揃える http://yusukekamiyamane.com/blog/archives/19 http://yusukekamiyamane.com/blog/archives/19#comments Fri, 05 Dec 2008 03:35:02 +0000 yusukekamiyamane http://yusukekamiyamane.com.s88735.gridserver.com/blog/?p=19 高さというより下端だけど。

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>
]]> http://yusukekamiyamane.com/blog/archives/19/feed 0 なんちゃってvalign http://yusukekamiyamane.com/blog/archives/18 http://yusukekamiyamane.com/blog/archives/18#comments Wed, 03 Dec 2008 23:01:41 +0000 yusukekamiyamane http://yusukekamiyamane.com.s88735.gridserver.com/blog/?p=18 やはり出来ると便利なので。

サンプル

$ (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>
]]> http://yusukekamiyamane.com/blog/archives/18/feed 0 テーブルのセルの中をいい感じに http://yusukekamiyamane.com/blog/archives/17 http://yusukekamiyamane.com/blog/archives/17#comments Tue, 18 Nov 2008 07:32:21 +0000 yusukekamiyamane http://yusukekamiyamane.com.s88735.gridserver.com/blog/?p=17 <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");
});
]]> http://yusukekamiyamane.com/blog/archives/17/feed 0 横幅不定のブロック要素を中央・右揃え http://yusukekamiyamane.com/blog/archives/16 http://yusukekamiyamane.com/blog/archives/16#comments Sat, 15 Nov 2008 02:00:50 +0000 yusukekamiyamane http://yusukekamiyamane.com.s88735.gridserver.com/blog/?p=16 要するに横幅を自動で設定してやるだけ。

サンプル

$ (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>
]]> http://yusukekamiyamane.com/blog/archives/16/feed 0 ダイアログを出さずにウィンドウを閉じる http://yusukekamiyamane.com/blog/archives/15 http://yusukekamiyamane.com/blog/archives/15#comments Mon, 13 Oct 2008 07:29:08 +0000 yusukekamiyamane http://yusukekamiyamane.com.s88735.gridserver.com/blog/?p=15 window.open以外の方法で開いたウィンドウをwindow.closeで閉じるときに「ウィンドウは、表示中の…」というダイアログを出さずにウィンドウを閉じる。

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

サンプル

window._close = window.close;
window.close = function () {
  (window.open ("", "_top").opener = top)._close ()
};
<a href="javascript:window.close ();">閉じる</a>
]]> http://yusukekamiyamane.com/blog/archives/15/feed 0 検索キーワードに関連するブログ記事リストを表示 http://yusukekamiyamane.com/blog/archives/13 http://yusukekamiyamane.com/blog/archives/13#comments Thu, 02 Oct 2008 09:30:39 +0000 yusukekamiyamane http://yusukekamiyamane.com.s88735.gridserver.com/blog/?p=13 JavaScriptで検索キーワードを取得 して、Google AJAX Search API にぶっこむだけ。

例:

当サイト。

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

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

]]> http://yusukekamiyamane.com/blog/archives/13/feed 0