プログラマ的京都生活

2010年09月09日

[][][][]WEBアプリケーション開発で使ったモノ

いい感じのサイトを見つけて使うんだけど、使い捨てになってメモしておくのを忘れてしまう。。

ちゃんとメモしよう!

ぐるぐるのジェネレートサイト

ぐるぐるの正式名称はスピナーアニメーション(spinner animation)というらしい。

http://www.ajaxload.info/


つやつやボタンジェネレートサイト

http://ferv.jp/app/icone/


アイコンを拡大するツール

はてブされてたヤツだけど、そんなにはすごくなかった。一応メモ。

http://toshiiy.blog22.fc2.com/blog-entry-127.html

2009年04月10日

2008年05月04日

[][][]ハイパフォーマンスWebサイト

G.W.も後半。ちょっとは勉強しておこう。ということで今読んでいる本はこれ。

パフォーマンスチューニングというと何かとサーバーサイドでやることが多い。ビジネスロジックの見直しやDBなど。しかし本書はフロントでのパフォーマンスチューニングのテクニックについて述べているところが新しい。本書では14のテクニックが紹介されています。

  1. HTTPリクエストを減らす
  2. CDNを使う
  3. Expiresヘッダを設定する
  4. コンポーネントをgzipする
  5. スタイルシートは先頭に置く
  6. スクリプトは最後に置く
  7. CSS expressionの使用を控える
  8. javascriptcssは外部ファイル化する
  9. DNSルックアップを減らす
  10. javascriptを縮小化する
  11. リダイレクトを避ける
  12. スクリプトを重複させない
  13. ETagの設定を変更する
  14. Ajaxをキャッシュ可能にする

どうでしょう。タイトルを見ただけで、読みたくならないですか。例えばスタイルシートは先頭に置いてスクリプトは最後に置くのはなんでだろう?とか。おそらく会社でもここまで指摘してくれる先輩というのはいないのではないでしょうか。いなけりゃ本で勉強して自分がなればいいのだ。ハハ。値段も1800円と技術書としては非常に安い!一家に一冊!

まだまだ読み始めたばっかりだけど、早速「HTTPリクエストを減らす」の章で紹介されていたCSSスプライトなる技を覚えた!これ結構使われているテクニックなんですね。多分知らない方が恥ずかしいんだろうけど・・・。例えばGoogle。つい最近トップページにGMailやYouTubeのアイコンが表示されるようになりました。これがCSSスプライトで実現されています。

例えば「おすすめ」タブには5つのアイコンが表示されていますが、それぞれのアイコン画像を5つ指定しているわけではありません。5つ指定すると5回のHTTPリクエストが必要ですが、HTTPリクエストの回数を減らすためにアイコンが連なった画像を1回だけ取得し、CSSで、1つだけ表示されるようにしています。その連なった画像は以下URLで確認できます。

http://www.google.co.jp/intl/ja/images/jawh_prodiconl3.png


連なった画像からどのように任意の1つを取り出すのか、というのはgoogleのページのソースを読めばすぐ分かります。分かってしまえば、いつも通りふーんって感じです。以下はそれをちょこっとだけいじってスライドさせてみました。実行してもらえば、CSSスプライトの雰囲気が分かってもらえるのではないでしょうか。

<html>
<head>
<style type="text/css">
.iconl {
  height:35px;
  overflow:hidden;
  position:relative;
  width:35px;
}
</style>
</head>
<body>
<div class="iconl" style="border:solid 1px black;">
  <img id="icon" src="http://www.google.co.jp/intl/ja/images/jawh_prodiconl3.png" style="position:absolute; left: 0px;">
</div>

<script type="text/javascript">
(function(){
  var elem = document.getElementById("icon");
  var counter = 0;

  var callback = function() {
    if ( counter < -560 ) return;

    elem.style.left = --counter;
    setTimeout(callback, 0);
  };

  setTimeout(callback, 0);
})();
</script>

</body>
</html>

2007年11月23日

[][]UTF-8でボタンの表示が若干変わる(IEのみ)

現在開発中のアプリケーションは中国語、日本語、英語を扱わないといけないため、DBもHTMLの出力エンコーディングもUTF-8を利用しています。

jspにこんなのをつける。

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="Windows-31J" %>

するとすると!表示された画面上でボタンが一回り大きくなる!!しかも日本語だと真ん中に揃わず上に寄る!!え〜!!!

実際、Googleもそうなってます。↓

f:id:mtoyoshi:20071123072824p:image

けどそういえば「Google検索」のところは普通じゃね?なんで??と思うじゃないですか。これはシングルバイト文字が先頭にあると真ん中に揃うようです。たまたま。なんじゃそりゃ!けど一回り大きくなるってのは変わりません。

色々試した挙句、以下のようにするとWindows-31Jの時と同様に表示されることが分かりました。なぜかはよく分かりません。。

button {
  font-family : "MS UI Gothic"
}

2007年09月06日

[]オーバーレイ

正式名称をなんていうのかよく分からないのですが、lightboxライブラリでよく使われている、背景をグレーにしてボタンとかリンクとか押せなくするアレのやり方がわかったのでメモ。

ピンと来ない人は以下参照。

http://test.thecodecentral.com/demos/lightbox/lightbox.html


position:absolute

タネはこれでした。すごい事をやってるんだと思ってたら仕組みは単純。

<body>
  <a href="http://d.hatena.ne.jp">はてなダイアリー</a><br>
  <button onclick="alert('hello!')">押してみて!</button><br>
  <input type="text">
</body>

こんなHTMLがあったとします。当然、リンクやボタンは押せるし、フィールドは入力が出来ます。このHTMLに以下のようなDIVを用意すると。。

<div style="width:200px; height:100px; background-color:#6F6F6F; opacity:0.5; position:absolute;"></div>

どうでしょう。今度はリンクやボタンは押せなくなり、フィールドへの入力が出来なくなりました。

position:absoluteなdivがあることで、ちょうど薄い板が覆いかぶさったようにな効果が得られるようです。板を半透明にしておけばうっすら下が見えるしいい感じ♪

※「opacity:0.5」という書き方はfirefoxで動作します。IEの場合は「filter:alpha(opacity=30)」と書きます。


要素の位置取得

もともとこれをやりたいと思ったきっかけは、ユーザーに編集権限がないんだけど、表示はしたい、という箇所に使えないか、ということ。ただしその場合、「position:absolute」だから「top」や「left」を指定しないとうまくいきません。どうやって位置情報を取得しようか、、、と悩んでいました。

でも!要素の「offsetTop」と「offsetLeft」属性から位置情報が取得できる事が分かりました。これを使えば「top」や「left」に正確な値を設定できます♪