TOP > 2007年04月

覚えたてユーザビリティ

2007.04.27 Author: 健次

入社してから早いもので、一カ月が過ぎました。
その会社生活の中で覚えた言葉の中から、一つ。「ユーザビリティ」を今回のテーマにしたいと思います。
ユーザビリティというのは何なのかと申しますと、アプリケーションソフトウェアやハードウェアにおける使いやすさの尺度を表す言葉です。少し分り辛いので日常に置き換えてみましょう。
例えば、コンビニ等でよく見かける喉飴のパッケージ。プラスチックでできていて、主に丸い形が主流のあの入れ物です。
思い出してください、最初はどう開ければいいのか分らなくはありませんでしたか?取っ手(らしき部分)を捻ったりスライドさせたり。
すぐに慣れましたし、今では大体開け方の想像がつくと思いますが、初めて見た時はとても驚きました。
ではWebに戻って考えてみましょう。
Webで使い勝手が悪い、といいますと、たとえば


  1. 何所に目的の場所にたどり着くリンクが張ってあるのか分からない。

  2. 元の場所に簡単に戻れない。

  3. 欲しい情報が見つけにくい。


等が挙げられます。
ユーザが使いにくい。これはユーザビリティの悪さを示しており、Web屋の人間はユーザビリティを向上させる事にも意識を配って仕事をしています。
では、ユーザビリティを上げるにはどうしたらいいのか?
解決方法の一つとしては、「F字理論」というものを使います。
「F字理論」というのは、人はサイトを見る時に、F字型に読んでいきますよという、「人の目線」に着目した理論です。

  • まず最初に何を見るか。

  • その次にどこを見るのか。

  • 何処を見られにくいのか。


これを押さえておけば、どこに何を置けば効率よくユーザが目的のページに飛べるか、伝えたい事が効率よく伝わるか、というものがある程度把握できます。
このような理論を用いながら、Web屋は日々ユーザビリティの向上を考えていますが、十人十色と申します通り、千人が千人同じ見方をするとも限りません。あくまで理論は理論です。
F字の他にも、「Web屋ではない一般の方に見せる」、「一般の方の常識を理解する」などという方法もありますが、それらを駆使しても、誰もが使いやすいか?という問いに、私は首を縦に振ることができません。
ああでもない、こうでもないとずっと考えていると、訳が分らなくなりますが、それでもWeb屋としてユーザの事を考えれば避けては通れない道です。
ですから、
既存の理論に頼りきりになるのではなく、常にユーザビリティとは何か、を念頭に置いて仕事をしたいと思います。

STP CCNA、CCNP、CCDP、CCIE試験 基礎その2

2007.04.26 Author: hoge


STPネタです!!!

レイヤ2ネットワーク構成時のループトポロジを回避するSTP機能は、
BPDUと呼ばれる有名な制御用パケットを使用します。

※STP:スパニングツリープロトコル (spanning tree protocol)
※BPDU:ブリッジプロトコルデータユニット (bridge protocol datat unit)

BPDUはCPU処理にて制御されていますので、処理するVLANの数が増えると、
当然CPUの負荷も上昇する事となります。
その為、各プロダクトでサポートされるVLAN数とは別にSTPの制限が発生します。
この制限は、「STPインスタンス」と呼ばれるものによって決まります。

高速なコンバージェンス機能を有するMSTやRSTP、PVST+等についても、
BPDU制御技術の仕様によりSTPインスタンスの制限があります。


※IEEE規格準拠
・STP:802.1d
・RSTP:802.1w
・MSTP:802.1s

<STP インスタンス数計算式>
= トランクポート数 x トランクポートに流れるVLAN数 + アクセスポート数

<Catalyst インスタンス確認コマンド>

hoge# show spanning-tree summary

UplinkFast is enabled
PortFast BPDU Guard is disabled
Stack port is GigabitEthernet0/1


Name Blocking Listening Learning Forwarding STP Active
-------------------- -------- --------- -------- ---------- ----------
VLAN100 45 0 0 1 46
VLAN200 15 0 0 1 16
VLAN300 15 0 0 1 16

→[STP Active]がSTPのインスタンス数となります。

基幹スイッチに対して各拠点からの複数VLANがハンドリングされる場合、
あっという間にインスタンス数が上昇する事があります。
TAGのトンネリング技術等による回避策も検討出来ますが、
まずは、"インスタンス数"を念頭に置いたネットワーク設計をする事が重要です。

【JavaScript】パターンマッチ比較 match、search、test、exec

2007.04.25 Author: たわばがに

ということで、今回はJavaScriptのパターンマッチネタです。

比較するメソッドとしてmatchsearchtestexec、の4つを取り上げます。
それぞれ性質が異なるので、使う場合は注意が必要です。

比較のために、以下のようなサンプルを作ってみました。

続きを読む >>

六曜付カレンダーを作る 其弐

2007.04.23 Author: Jas

私の課題紹介「六曜付カレンダーを作る」の第二弾です。
まずは簡単に前回の復習を。

【前回のあらすじ】
六曜付カレンダーを作るためには旧暦の計算をしなくてはいけない。
旧暦計算をするためには新月と二十四節気の日付のデータが必要である。
旧暦を計算する問題点は・・・

    1:閏月挿入箇所が変則的なので挿入箇所を決めるのが難しい
    2:新月と二十四節気の計算方法が複雑なので計算に時間がかかる

以上、前回は六曜付カレンダー作成時の難関=「旧暦計算の問題点」を説明しました。

ということで、今回は上に示した旧暦計算の2つの問題点のうち、1番の閏月の挿入箇所の決め方を紹介していきたいと思います。

続きを読む >>

[Xen] CentOS5でvirt-installを使って仮想環境を作る

2007.04.23 Author: ぴ

今回は、Red Hat Enterprise LinuxのクローンOSとして有名なCentOSの話です。

2007年3月に、Red Hat Enterprise Linux 5(以下、RHEL5)がリリースされました。それに伴い、2007年4月にCentOS5もリリースされました。RHEL5・CentOS5がリリースされたことによって、Webアプリの実行環境が劇的に変化することが予想されます。大きな変更点としては、以下のようなものが挙げられます。

  • Apacheが2.2系に
  • phpが5.1系に
  • MySQLが5.0系に
  • PostgreSQLが8.1系に
  • Kernelが2.6.18に
  • 仮想環境Xen対応に
その中の、仮想環境Xenについて取り上げてみます。

Xen非対応のOS(CentOS4など)では、XenのパッチをあてたKernelを再構築するなどして、環境を構築する必要がありましたが、CentOS5ではネイティブにサポートしているので(インストール時にVirtualizationのオプションを選択のこと)、非常に簡単にXenの環境が手に入ります。

Xenでは、管理用のOS Domain-0 と、ゲストOSが必要です。Domain-0上でゲストOSのインストール・起動等をコントロールすることができます。また、ゲストOSのコンソールへのアクセスも行うことができ、シームレスな操作を行うことが可能です。

Domain-0の環境は、Virtualizationのオプションを選択して初期インストールした時点で環境が手に入るので、ゲストOSの作成方法について解説をしたいと思います。

続きを読む >>

floatを使ったレイアウト時の <pre>タグの扱い

2007.04.20 Author: たく


<pre>タグで囲まれた範囲のソースは記述された
スペース・改行などを、そのまま表示することができますが、
このブログのように左右でfloatを使ったレイアウトでは
<pre>タグ内に書かれた記述が改行されずに
長くなった時、囲まれたボックスを押し広げて
レイアウトを崩すという問題があります。

これをoverflow:scroll;で
ボックスにスクロールバーを表示させて
解決する方法がありますが
ieの場合ボックス内の記述がはみ出そうとしなくても
常にスクロールバーが表示されてしまいます。


すごく、邪魔ですよね。

それを解決するCSSが以下です。
pre {
      width: auto;
      _width:100%;
      overflow: auto;
      /*_でIEハックを行っています。どうですか?下にスクロールバーが表示されましたね。これでIEでもソースがはみ出そうとした時だけ、スクールバーが表示されます。*/
}

あとはpaddingやmarginなどを調節して
各ブラウザが同じ見栄えになるようにすれば完了です。

Solaris8、Solaris9、Solaris10等のNFSv3/NFSv4

2007.04.20 Author: hoge


Solarisネタです♪

よく知られるNFSにはバージョンが存在します。
主流としてはバージョン3なのですが、Solaris10からはバージョン4です。
その事について纏めます。

[NFSバージョン指定方法]
Solaris9まではNFSv3が標準で使用されておりましたが、
上述で書いた通りSolaris10はNFSv4が標準となっています。

バージョンミスマッチを防ぐ為、Solaris10のNFSクライアントで、
NFSバージョン4をバージョン3へ変更します。

・修正ファイル
 /etc/default/nfs
・修正ライン
NFS_CLIENT_VERSMAX

NFS_CLIENT_VERSMAXパタメータは、NFSクライアントが使用する最大の
NFSバージョンを指定するパラメータです。
このパタメータを「3」に変更してNFSクライアントが使用する最大のバージョンを「3」とします。

 hoge#vi /etc/default/nfs
NFS_CLIENT_VERSMAX=3

上記の手法で変更を実施すると、全NFS設定が反映されます。
各NFS毎に設定を反映させる場合は下記を実施します。

 home# mount -F nfs -o vers=3 <SERVER>:/path <MOUNT>

※参考※
Sparc Enterprise ですか・・・

CheckPoint FW-1 NGX SICリセットについて

2007.04.18 Author: hoge


CheckPoint FireWall-1 NG、NGXネタです

さて、このネタがサーバ分類なのかネットワーク分類なのか、
非常に難しいところなのですが。 (むぅぅ)
FW-1におけるSIC(*1下記参照)のリフレッシュ方法について纏めます。

[前提条件 moduleとcenterが分かれている事]

・EnforcementModule = Unix (IPSO含)
・SmartCenter = Windows (2000,2003)

1. EnforcementModuleへログインします。
 1-1. ログイン後、「#cpconfig」を実行します。
 1-2. 表示より「*1 Secure Internal Communication」を選択します。

2. 以前とは異なるActivation Keyを入力します。
 2-1. Would you like re-initialize communication ?(y/n)[n]?
    本表示に対して[y or n]を入力します。
    ここでは再設定を実施するので[y]と入力します。
 2-2. Are you sure ?(y/n)[n]?
    継続しますので[y]と入力します。
 2-3. Activation Keyを入力します。
    再度確定入力を要求されますので、同じkey入力を実施します。
 2-4. cpconfigメイン画面に戻りますので「Exit」を選択します。
    下記のような再起動を要求する表示が出ますので[y]入力。
    Would you like to do now ?(y/n)[y]?
    再起動が実行されます。

3. スタート→プログラム→Check Point SMART Clients→
 Check Point Configuration NGを実行します。
 (NGXの場合は、NGXと表示されます。)
 3-1. Check Point Configuration Tool ウィンドウが起動しますので、
    「Secure Internal Communication」タブを選択します。
 3-2. Activation Keyフィールド及びConfirm Activation Keyを入力します。
    当然ですが、EnforcementModuleと同じkeyを入力します。
 3-3. Check Point Configuration Tool にて「OK」を選択します。
 3-4. cpconfigダイアロボックスが表示されますので、「はい」を選択します。

4. cpデーモン(サービス)が再起動されます。

[SICが正常に確立されない時]
・EnforcementModuleとSmartCenterのOS日付は正確ですか?
 相互日付誤差が1分以内で無ければ、EnforcementModuleにて、
 証明書が有効になりません。
・SmartCenterのInternalCAとFQDNは正しいものでしょうか?
・EnforcementModuleにて下記コマンドを試行してください。
 #fw unloadlocal (セキュリティポリシがアンロードされます)

※参考※
 #fwm unload local

【JavaScript】戻り値指定なしのreturn、ローカル配列arguments

2007.04.18 Author: たわばがに

ということで、今回はJavaScriptの小ネタです。
普段あまり意識していない部分に着目してみました。

【その1.戻り値指定なしのreturnは何も返していないのか?】

通常、関数でreturnを書く場合は何らかの戻り値を指定する場合が多いと思いますが、
もし戻り値を指定しなかった場合は、本当に何も返らないのだろうか?
ということで、実験してみました。

<script type="text/javascript">
<!--
// returnあり
function hoge() {
    return;
}
// returnなし
function hogehoge() {
}
// 表示
function test() {
    if (hoge()) {
        alert("test1");
    }
    if (hoge() != "") {
        alert("test2");
    }
    if (hoge() == undefined) {
        alert("test3");
    }
    alert(hoge());
    alert(hogehoge());
}
//-->
</script>
<input type="button" name="button" value="テスト" onClick="test()">

以下、結論。

実際にはundefined(未定義値)が返る。
returnを書かない場合も同じく、undefinedが返る。

なので、alertで表示されるのは、test2とtest3、そして最後の2つのundefinedとなります。
戻り値を指定しない場合は気に留めておいた方がよいかもしれません。


【その2.関数に不定の引数を渡した場合の扱いは?】

これに関しては、実験から結果を述べるのみとなります。

<script type="text/javascript">
<!--
function hoge() {
    alert(arguments[0]);
    alert(arguments[1]);
}
//-->
</script>
<input type="button" name="button" value="テスト" 
onClick="hoge('おっす','オラ、たわばがに')">

以下、結論。

関数に渡した引数は、関数内のローカル変数(配列)argumentsに格納され、
arguments[0]やarguments[1]といった指定で引き出すことが可能。

なので、alertで表示されるのは、
arguments[0]とarguments[1]に格納された「おっす」と「オラ、たわばがに」となります。

以上、痒いところに手が届きそうなネタでした。

六曜付カレンダーを作る 其壱

2007.04.17 Author: Jas

4月初めに入社し、開発部の新入社員として研修を始めたわけですが、基本構文を勉強した後にいくつかの課題をやりながらPHPの勉強を進めていっています。

先週の課題はカレンダー作成でした。
土日祝日までうまく表示できるようになり、完成!と思ったのもつかの間・・・
「じゃぁ、今度は六曜も表示させてね」という部長さんの一言で私のカレンダー製作は難関に。

続きを読む >>

EIGRP メトリックのチューニング(CCNP講座)

2007.04.16 Author: hoge


EIGRPネタです♪


少し難しい内容ではあるがEIGRPを扱う上で非常に大事である。

EIGRPは、IGRPのメトリック算出方法を使用してメトリックが決まります。

☆256 x IGRPメトリック = EIGRPメトリック

IGRPメトリック算出方法(K値を用いた算出方法)

☆メトリック = K1 x BW(帯域) + (K2 x BW)÷(256-load) + K3*Delay x [K5 ÷(信頼性 + K4)]

K値のdefaultでは、K1=K3=1, K2=K4=K5=0となっているはずです。

"metric weigths"コマンドによりK値を設定しない場合:

☆ メトリック = BW(帯域) + Delay

上記は各リンクメトリックとなるので、トポロジテーブルでは下記計算となる。

☆メトリック = 10,000,000÷(最小のパスBW) +∑(delay÷10)

この事から、EIGRPメトリックは上記メトリック値に256を乗算した値となります。



業務でEIGRPのK値をチューニングする機会は、まぁ少ないだろう。

但し、試験でのK値の概念は非常に重要なものがある。

OSPF+EIGRP等の組み合わせで活用して欲しい



※参考※

ip bandwidth-percent eigrp [AS番号] [パーセント]

CSSでドロップダウンメニューを実現する

2007.04.13 Author: たく


Firefoxでご覧下さい↓






JavascriptやFlashを使ってドロップダウンメニューを
作るのはごく一般的ですが、
上のようにCSSのみでも可能です。

以下ソースです。
■HTML
<ul>
<li id="menuTitle">ともクリサービス
<ul id="menuList">
<li><a href="#">Webシステム開発</a></li>
<li><a href="#">サーバ構築</a></li>
<li><a href="#">ネットワーク構築</a></li>
</ul>
</li>
</ul>
■CSS
* {
	margin:0;
	padding:0;
}
li#menuTitle{
	width:150px;
	line-height:30px;
	font-weight:bold;
	border:solid 2px #666;
	text-indent:10pt;
}
ul#menuList {
	list-style:none;
	position:absolute;
	width:0px;
	height:0px;
	overflow:hidden;
	margin-top:2px;
}
li#menuTitle:hover ul#menuList {
	list-style:none;
	width:150px;
	height:auto;
}
a {
	display:block;
	line-height:30px;
	text-decoration:none;
	border-right:solid 1px #666;
	border-bottom:solid 1px #666;
	border-left:solid 1px #666;
	text-indent:10pt;
}

子側のulを通常時width,heightを0で、非表示にしておいて
マウスオーバー時に表示させるという仕組み。

だだし、IEでは6以下のヴァージョンでは
a要素以外の「:hover」疑似クラスが対応していないので
まだ実用的ではないですがIE7が普及した際に
使えるんじゃないでしょうか。

ブラウザで異なるアニメーションGIFの動作

2007.04.12 Author: たわばがに

ということで、今回はJavaScriptネタではありません。
ブラウザ毎に動きが異なるアニメーションGIFに関してです。

(↓※現在はデザインが変わってしまったため、5人組の画像は表示されていません。)

先日、しゃいんブログのトップページ上部でシャカシャカ走り続ける5人組を
アニメーションGIFに変更したのですが、
InternetExplorerで見ると、どうも動きが遅いというか、もっさりしている。
Firefoxでの動きと全然違うのは、何でだろう?
以下、結論。

InternetExplorerでは、1フレームのウェイトが0.1秒より短い場合、
強制的にウェイトが0.1秒となる。
故に、各フレームでのウェイトが共通の場合、秒間最大10フレームまでしか表示できない。

なので、ブラウザが異なっても共通の演出を行いたかったら、
ウェイトは0.1秒以上で設定すべし、ということですね。なるほどなるほど。
(なお、そっちの方の業界では、よく知られた話のようで)

以上、少々風変わりなネタでした。

Ajaxのロード中に表示するアニメーションを生成してくれるサイト

2007.04.09 Author: えす

Ajaxのロード中に表示する画像を探していたら、アニメーションgifを生成してくれるサイトを
見つけましたので紹介します。

続きを読む >>

あなたの会社のウェブサイトはアクセシブルですか?

2007.04.06 Author: たく

ウェブサイトにアクセシビリティが求められるようになって

久しいですが、Internet ExplorerのプラグインのWeb Accessibility Toolbar

W3CによるHTML,CSSバリデート

画像をオフにしたときの画面表示

視覚障害者の見え方シミュレーションなどが

ローカル環境から簡単に診断できます。



この診断結果がすべてでないですが

このツールを使った作りこみで

それなりの成果は出るんじゃないでしょうか。



ちなみに我が社のWebサイトの診断結果です。

HTML:http://validator.w3.org/check?uri=https%3A%2F%2Fwww.tomo.ne.jp

CSS:http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.tomo.ne.jp%2F

OSPF CCNA、CCNP、CCDP、CCIE試験 基礎その1

2007.04.06 Author: hoge

OSPFネタ
OSPFについてシリーズで書くものとする。 (^o^?
OSPFについて基本的な事を記述するつもりであるが、
CCNA(Ver3.0)程度の知識は必要となるかも知れないとだけ先記。
又、Zebraから有名になったVersion3についてはここでは触れない。
例として分かりやすくする為にRIPを引き合いに出す事を多くする。

OSPFの一般特徴概要
1: 速いコンバージェンス(エリア数、LSDBサイズにもよる)
2: VLSMに対応
3: ホップカウントといったDistanceVector型にある制限は無し
4: 帯域幅を元にしたコストを計算メトリックとする。
5: DistanceVector型プロトコルでは対応出来ないスケーラブルなネットワーク用件
  に対応する為にIETFによって開発。(OSPFv2はRFC2328)
6: OSPF情報は、プロトコル番号89(TCP-6、UDP-17)を用いて、
  IPパケットで搬送される。




OSPFの一般特徴詳細
1: コンバージェンス速度について
  例えば、RIPにはホールドダウンとルートエージングがあり、
  大規模ネットワークの場合、RIPのコンバージェンスには数分を要する事がある。
  OSPFのコンバージェンス時間はRIPのコンバージェンス時間より高速であり、
  ルーティング変更が直ちにフラッティングされ、平行して計算される為である。
  ダイクストラアルゴリズムを採用しているので当然ではあるのだが・・・
  ※参考※
  ダイクストラアルゴリズムは近年のGIS系にも採用されている。


2: VLSMのサポート
  OSPFではサブネットマスクとVLSMがサポートされている。
  サブネットを集約するかアドバタイズするか任意設定できる事も大きい。


3: ネットワークの到達可能性
  例えば、RIPネットワークは全長が15ホップ(ルータ15台)を超えると、
  ネットワークが到達不可能と判断される。
  OSPFには事実上、距離到達可能性による制限はない。


4: 帯域幅の使用
  RIPは30秒毎にネイバー全てに保有するルーティングテーブルをブロードキャストする。
  OSPFはLSAをマルチキャストし、ネットワーク変更が生じた場合アップデートを送信する。
  OSPFは30分毎にアップデートを送信して、ルータ全てが同期してる事を確認する。
  DR、BDRの概念は、この最たるであると言える。


5: パス選択の方法
  RIPのルーティング技術は純粋にホップ数に元づいて決定される。
  ホップ数の多いパスの方が総リンク帯域幅が大きくなる。
  遅延や通信速度に関係が無くベストパスが選択されない事がある。
  OSPFではコスト値=メトリックが使用され、接続の速度に基づいてベストパスが
  選択される。
  標準では100M帯域のメトリックは、"1"と計算される。



今回はこの程度にて終了。

<便利知識>

OSPFではループバックインターフェースへ設定されたIPアドレスはホストルートと見なされ、
/32としてネットワークへアドバタイズされる。

※参照 RFC2328のセクション9.1※

ループバックインターフェースにip ospf network point-to-pointコマンドが設定されると、
OSPFによりループバックのサブネット/32が、設定された実際のサブネットとしてアドバタイズされる。

Excel 2007のファイル形式(xlsx)をひも解く

2007.04.03 Author: ぴ

Office 2007から、ファイル保存形式が変更になりました。
Excel 2007を例にとると、ファイルの拡張子が以下のように4文字に変更されました。

  • xlsx: Excelブック
  • xltx: Excelテンプレート

また、データ形式自体も変更になり、xlsxファイル自体はzipで圧縮されたファイルになっています。そのため、Windows付属のzipファイル等でファイルの展開を行うことも可能です。

zipで展開すると、

\docProps
\xl
\_rels
[Content_Types].xml
といったディレクトリ・ファイルがあることが分かります。
ちなみに、この中にあるファイルは、ほとんどがxml形式のファイルで、画像等のデータは\xl\media以下に実体のファイルとして保存されるようになっています。

このうち、docPropsディレクトリには、

\app.xml
\core.xml
の2つのファイルがあることが分かります(初期状態で)。
今回は、core.xml について解説します。

core.xmlは、ファイルの属性情報が保存されるファイルです。このファイルを編集することによって、さまざまな属性を設定することが可能です。具体的には、

dc:creator作成者
dc:lastModifiedBy前回保存者
dc:titleタイトル
dc:subject表題
cp:keywordsキーワード(Vistaではタグ検索に利用)
dcterms:createdコンテンツの作成日時
dcterms:modified前回保存日時
cp:lastPrinted前回印刷日
のような要素をいじれば、上記属性を変更することが可能です。

JIS2004対応MSゴシック&MS明朝と、Photoshop6とIllustrator10

2007.04.02 Author: マル

いつかの夕暮れ頃に現れるWEBシステム企画人のたわいない話、「たそがれ営業部」。しばし、マルにおつきあいください。

さて、今更ですが、先日Windows Updateをかけていましたところ、JIS2004対応MSゴシック&MS明朝のフォントがダウンロード可能になっておりました。

新しいもの好きな私としては、試してみたい衝動に駆られてついつい入れてしまうわけです。入れるだけなら簡単ですから。それも後先考えずに・・・。
それで、入れてみた感想としては、Webなどの表示はけっこう様変わりして、従来のフォントよりも少し見やすくなったような気がします。個人的には好きな文字です。

ところが、ちょっと尋常でない問題が発生しました。Photoshop6とIllustrator10で文字が消え失せてしまいました。色々探っていましたが、とりあえず回答は得られませんでした。
どうも、Microsoftですら対応に難ありのところがあるぐらいですから、理解の上でということでしょうか。
とりあえず、仕事にならなさそうなので、削除することにします。。。