tips

＊tomcatのインストールの続きになる。たぶん。メイビ。パーハップス。

シンボリックリンクというのを張ったけれど、それでもやっぱり起動とか終了とかが面倒な気がするので、これも初めて「シェルスクリプト」というのを用意して、もうちょっと楽にしてみる。

ユーザホーム（/Users/[username]）にbinというディレクトリを作成
＊cd だけでユーザホームには行ける

$ mkdir bin

このbinディレクトリに移動してからvimを起動して、start_tomcat.shという名前でシェルスクリプトを書いてみる。

$ cd bin
$ vim start_tomcat.sh

スクリプトの内容（tomcatの起動）

#!/bin/sh
export CATALINA_HOME=/usr/local/tomcat/current
export JAVA_HOME=/usr
$CATALINA_HOME/bin/startup.sh

インストールしたtomcatのあるディレクトリをCATALINA_HOMEのところで指定している。（シンボリックリンクってのを張ったからこういうパスになっている）＊tomcatのインストール

んで、最後の行でtomcatの起動スクリプトを指定しているみたい。（他のところいまんとこよく分からない）＊Bourneシェルスクリプト入門(+bash)

実行権限を与えた上でスクリプトを実行
（このスクリプトのあるbinディレクトリに移動して）

$ chmod 755 start_tomcat.sh
$ ./start_tomcat.sh
Using CATALINA_BASE:   /usr/local/tomcat/current
Using CATALINA_HOME:   /usr/local/tomcat/current
Using CATALINA_TMPDIR: /usr/local/tomcat/current/temp
Using JRE_HOME:       /usr

ブラウザでlocalhost:8080/にアクセスして確認。OK。

終了のスクリプトも同様に（tomcatの終了）

#!/bin/sh
export CATALINA_HOME=/usr/local/tomcat/current
export JAVA_HOME=/usr
$CATALINA_HOME/bin/shutdown.sh

これも実行権限を与えた上でスクリプト実行

$ chmod 755 stop_tomcat.sh
bitmeister-no-macbook:bin bitmeister$ ./stop_tomcat.sh
Using CATALINA_BASE:   /usr/local/tomcat/current
Using CATALINA_HOME:   /usr/local/tomcat/current
Using CATALINA_TMPDIR: /usr/local/tomcat/current/temp
Using JRE_HOME:       /usr

ブラウザでlocalhost:8080/にアクセスして確認。OK。

これからは、このスクリプトのある/Users/[username]/binに移動して

$ ./start_tomcat.sh

でtomcat起動

$ ./stop_tomcat.sh

で終了。これでOK。

あなたのウェブサイトを高速化する方法

パフォーマンス向上のための14のティップス

1. HTTPリクエストを減らす
2. コンテンツデリバリーネットワーク（CDN）を使う
3. Expiresヘッダを追加する
4. コンポーネントをgzip圧縮する
5. スタイルシートを先頭に配置する
6. スクリプトを末尾に配置する
7. CSS expressionの使用を避ける
8. JavaScriptとCSSを外部ファイルに記述する
9. DNSルックアップを減らす
10. JavaScriptのサイズを小さくする
11. リダイレクトを避ける
12. スクリプトの重複を排除する
13. ETagの設定を変更する
14. Ajaxをキャッシュ可能にする

仕事場で使わせてもらっているMacBookにはVM Ware Fusionが入っていて、そん中に仮想マシンとしてWindows XPが入っている。

MacBook自体のキーボードはJIS配列の日本語キーボードだけど、実際に使用しているのは外付けのHHKB Lite2 for Mac（英語配列）。

MacBookのOSX上ではもちろん普通にUSキーボード（英語配列）がそのキー配列で使えているんだけれども、仮想マシンのXPではなぜか？これが認識されない。Windowsのことはよく知らないから、きっと設定をちゃんとしていないオレが悪いのだろうと思って、とりあえずしばらくはスルーしていたんだけど、やっぱり配列どおりに使えないのは非常に不便で仕方ない。（たとえ仮想マシンのほうはそんなに使ってなくとも）

今日、ふと思い立って調べたらすぐに分かった。これはオレなんかにすぐ分かる内容じゃないわ。さっさとググっとけばよかった。レジストリってのをいじればいいらしい。以下のように。

# スタート→「ファイル名を指定して実行」を選択し、クリック。
# 「regedit」と入力し　OK　をクリック。
# レジストリエディタが起動する。

HKEY_LOCAL_MACHINESYSTEMCurrentControlSetServicesi8042prtParameters
まで進んでいって、以下の三つの各項目をクリックして編集する。

LayerDriver JPN → KBD101.DLLに変更 (KBD106.DLLだったものを）
OverrideKeyboardIdentifier → PCAT_101KEYに変更 (PCAT_106KEYだったものを)
OverrideKeyboardSubtype → 0に変更 (2だったものを)

再起動してオーケー。

▼お世話になったエントリ
Windows Vistaで英語(US)キーボードを認識させる方法

自分じゃCSSスプライトくらいしか実践してない。書籍のほうもせっかく貸してもらってるんだし（積ん読に仲間入りさせて年を越してしまった）オライリーのものにしてはかなり薄手なんだから、これを機会にさっさと読んでしまおう。

ヤフーの画像はなぜyimg.jpドメインなのか？ サイト高速化の手法とヤフーの失敗例

ヤフーでは、ページはyahoo.comやyahoo.co.jpのドメイン名に置いてありますが、画像ファイルはyimg.comやyimg.jpのドメイン名に置いてあります。これはなぜでしょうか？

それは、複数のドメイン名を使ったほうが、ブラウザが平行してデータをダウンロードできるからというのが1つの理由です。Webサーバーとブラウザの間の通信のルールで、1つのドメイン名に対する持続的な接続は同時に2つまでにすることが望ましいとされているのです。

もう1つの理由は不必要なクッキーによる通信量の増加を避けるためです。

訪問者の状態をユーザーのブラウザに保存しておくクッキーは重要な技術ですが、ブラウザはサーバーとやりとりをするたびに手元に保存してあるクッキーのデータをWebサーバーに送ります。送られたクッキーの情報をサーバー側で利用しない場合は、クッキーのやりとりをしないほうがパフォーマンスは良くなります。

そこで、そもそもクッキーを必要としない画像を担当するサーバーはドメイン名を別にすることでクッキーのやりとりをなくしているのです。クッキーはフォルダ名でも対象を指定できますが、多くの場合はサイト全体で利用するためにドメイン名全体に対してクッキーを指定しています。ですから、ブラウザがクッキーを送らなくするには、ドメイン名を分けるのが最善なのです。実際に、米Yahoo!が画像用に利用しているyimg.comではクッキーを利用していないません。

Yahoo!パフォーマンスチーム、最新高速化ルール20を発表

新しい20のルールはサーバ、コンテンツ、クッキー、JavaScript、CSS、画像、モバイルの7つに分類されている。新しく紹介されたルールは次のとおり。

1. バッファは早期にフラッシュする (サーバ)
2. AJAXリクエストにGETを使う (サーバ)
3. コンポーネントのポストロード (コンテンツ)
4. コンテンツのプレロード (コンテンツ)
5. DOM要素数の削減 (コンテンツ)
6. ドメインをまたがってコンテンツを分離 (コンテンツ)
7. iframeの数を最小化 (コンテンツ)
8. 404を作ってしまわない (コンテンツ)
9. クッキーサイズを最小化 (クッキー)
10. コンポーネントに対してクッキーフリードメインを使う (クッキー)
11. DOMアクセスを最小化 (JavaScript)
12. かしこいイベントハンドラを用意 (JavaScript)
13. @importよりもlinkを使う (CSS)
14. フィルタの使用は避ける (CSS)
15. 画像を最適化 (画像)
16. CSS分割を最適化 (画像)
17. HTMLにおいて画像をスケールさせない (画像)
18. favicon.icoを小さく作成しさらにキャッシュを有効にする (画像)
19. 25KB以下にコンポーネントをキープする(モバイル)
20. コンポーネントを複数のドキュメントへパックする(モバイル)

ブラウザでチェックできるadd-on(Firefox)まで出ているとは知らなかった。これも後で試してみよう。
パフォーマンスチェックツール「YSlow」＊要Firebug

Windows版のSafariにある「開発」メニューもなかなかよさそうだけど。（ネットワークタイムラインの表示とか）

メニューボタンが画像で、それをCSSの背景画像で制御してロールオーバーさせるやつ。よくあるあれ。仕事でもけっこう使うのに、毎回思い出すのにちょっと時間をロスっているのでメモ。

マウスのロールオーバーで切り替わる画像は同一の画像で作成。いわゆるCSS SPRITEというやつ。（実際のそれはもっとたくさんの画像を一つにしてるけど）背景画像の表示位置を変化させることでロールオーバー効果を得ている。
CSS

#globalNavi a{
    display: block; /* こうしてblock要素に指定しないとa要素は背景を表示しない */
    width: 108px; /* 背景画像と同じサイズを指定して表示領域の確保 */
    height: 40px;
    text-indent: -200px; /* テキストはマイナスインデントで表示領域外へ */
    overflow: hidden; /* 表示領域外のものはhidden */
}

#globalNavi a.home{
    background: url(/statics/pc/btnGlobalNaviHome.gif);
}

#globalNavi a:hover.home{
    background-position: 0 -40px;

}

(x)html

<ul id="globalNavi">

    <li><a href="#" title="ホーム" class="home">ホーム</a></li>

<#-- /globalNavi --></ul>

ブラウザごとのCSSによる見栄えの差異を初期化するために、
Yahoo! UI Library:YUI の YUI Reset CSS をメモ。

続きを読む

ブラウザごとの文字サイズや見栄えの違いを合わせるために YUI Fonts CSS を利用。そのためのメモ。
（それプラス、この書籍を参考に）

続きを読む

この記事は
Smartyのカスタム設定でセキュリティと利便性を向上させる
に引っ越しました。

jQueryのtoggle()を使用した自分用メモ。今回参考にさせていただいたのはjQuery日本語リファレンスというサイトです。とても分かりやすくて理解しやすかったです。ありがとうございました。
続きを読む

target要素を使わずにリンク先を別ウィンドウで開く。
これの、もう一歩？進めたやつをメモ。
続きを読む