ユーザビリティ向上小技

躓いて調べたこと、思った事を漸進的に。

他サイトに埋め込まれたフラッシュからのリンクが機能しない場合

信頼されていないSWFファイルからHTMLページを保護するためにFlashの初期設定で出力するHTMLコードは[sameDomain]です。このため外部サイトのHTMLファイルに貼り付けて、getURLでジャンプする場合、AllowScriptAccessパラメータを[always]にすると解決する事がある。

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=" http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
  width="***" height="***" align="middle">
    <param name="movie" value="othersite.com/flash.swf">
    <param name="allowScriptAccess" value="always">
      <embed type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" width="***" height="***" align="middle" src="http://othersite.com/flash.swf" allowScriptAccess="always">
      </embed>
</object>

ルートディレクトリ内のファイルへの内部リンクの書き方

＜a href="http://hogehoge.com"＞HOME＜/a＞よりも＜a href="./"＞HOME＜/a＞
ひとつ下のディレクトリからルートディレクトリへ
＜a href="../"＞HOME＜/a＞
ふたつ下のディレクトリからルートディレクトリへ
＜a href="../../"＞HOME＜/a＞

CMSってほどでもない場合

優れたコンテンツマネージメントシステムの登場によりサイトの保守管理が容易になりました。そんな便利なツールが無かった時代の、エディタで手動更新してFTPでアップロードして...といった作業から解放されます。しかし、既存のサイトで将来的にもサイトの規模が大きくならないようならば、リニューアルして初期からこれらを導入する他に、PHPを使って管理の負担を軽減することが出来ます。実はこのリンク集もそうしてますが、以下に例を。(※ページの拡張子は○○.phpになります。)

※全角カッコ→＜?php include ("meta.txt");?＞：Ajax,CSSを追加・変更する時など。
＜?php include ("header.txt");?＞：ロゴやキャンペーンページへのリンク等。
＜?php include ("menu.txt");?＞：リンク先の追加/削除時等。
＜?php include ("footer.txt");?＞：メールアドレスの変更時等。
ページ管理の例

プルダウンメニューの表示エリア

プルダウンメニューは表示エリアが少なく、スッキリした見た目になるが、ネット初心者には、見えない項目があるのに気づかない時がある。プルダウンじゃなく見えるようにするにはselect タグに size="数値"とする。

エラーページとリダイレクト

もし、訪問者が最初にアクセスしたページが「404エラー:NotFound」だったら、URLを削ってルートディレクトリや一階層上のURLへアクセスすることはまずないだろう。下記は、移動した全ファイルに記述する必要があるので数が多いと大変。
ファイル毎に記述する場合は；

<head>
<meta http-equiv="Refresh" content="0; URL=http://移転先のアドレス">
</head>
<body>
自動で移動しない場合は<a href="http://移転先のアドレス">こちらをクリック</a>。
</body>

もしphpファイルならば↑の書き方ではなく、↓にした方がページランクなどが引き継がれるらしい。
＜?php
header("HTTP/1.0 301 Moved Permanently");
header("Location: http://移転先のアドレス");
?＞

.htaccessで記述する場合は；

ページ単位ならページ分記述 
Redirect 301 /old/old1.html http://www.yoursite.com/new1.html
Redirect 301 /old/old2.html http://www.yoursite.com/new2.html
Redirect 301 /old/old3.html http://www.yoursite.com/new3.html

ディレクトリ単位 
Redirect 301 /old/ http://www.yoursite.com/new/

地図を印刷する人にも配慮

店舗や会社の地図がJavascriptでウィンドウサイズを指定されて開くページだと、印刷するのに不便。(制作側から見て)小さいウィンドウだとツールバーやアドレスバーはデザイン的にバランスが悪いと思うのだろうけど、「マウスで右クリックして印刷」を知らない人には不親切。

入力フォームを大きく

フォームに入力エラーがある時にエラーメッセージを出す前に、タイプミスに気づいて貰いやすいようにinput タグをstyle="font-size:数値"とする。スタイルシートでもOK。

CSSと文字サイズ

スタイルシートで文字サイズを指定するときは、訪問者のブラウザでサイズ変更ができるように "px" ではなくて "em" や "%" で指定する。

外部リンクのターゲット指定

新規ページ・タグが増えすぎるので、むやみにリンクのターゲット指定に "top" や "_blank" を使わない。

.htaccessで文字コードの一括変更

ファイルに文字コード指定のメタタグを書いていないと、一部のブラウザで文字化けする。今更、すべてのファイルに書き足すのは面倒なので
.htaccessで AddType "text/html; charset=Shift_JIS" .html ←最後は改行。逆に "Shift_JIS" でないHTMLファイル(下層ディレクトリも含めて)は文字化けするので注意。

ポップアップヘルプは進化中

追記:これ素敵かも→Tigra Hints
どんなポップアップヘルプがいいのだろうかと、あれこれ調べている途中。以下は、知る範囲です。
HTMLタグ中に title="テキスト" とすると、オンマウスで文字を表示。
でも、目立つようにしないと気付かれないかも。5秒ぐらいで消えるので、短い説明向き。
例えば→ acronymってタグ。CSSで文字を目立つようにすればマシだろうか。

<acronym title="解説テキスト1">acronymってタグ</acronym>
他にも使えるタグ：<a></a> , <h1></h1>～<h6></h6> , <font></font> など。

確認したブラウザ
Internet Explorer 6～	○
Firefox 1.5～	○
Opera 9～	△(ステータスバーに表示)

JavaScript + CSSで行うのは、目立つ分、使いすぎるとウザイ。 >>サンプルで確認する

<HTML>
<head>
<title>ポップアップヘルプ</title>
<style>
<!--
.help {
  margin-left:10px;
  width:300px;            /* ポップアップする枠の横幅 */
  padding:10px;
  background: #ffc;       /* 背景色 */
  border:2px solid #f33;  /* 枠の幅と色 */
  z-index:256;
  position:absolute;
  text-align:left;
  line-height:150%;
  font-size: 1em;         /* 文字の大きさ */
  font-weight: normal;
  color:#f33;             /* 文字色 */
}
.pop_txt {
 text-decoration:underline;
}
-->
</style>
<script language="JavaScript">
<!--
txt = new Array();
txt[1] = '<div class="help">ローカル環境でも作動するスクリプト言語。</div>';
txt[2] = '<div class="help">カッティングスタイルシートの略。レイアウトなどを指定します。</div>';
txt[3] = '<div class="help">画像の上にマウスが乗った時に表示することも。</div>';
txt[4] = '<div class="help">これをクリックしてもどこにも飛びません。</div>';
txt[5] = '<div class="help">メールアドレス欄なら、「タイプミスに気を付けて」とか「メアドは公開されません」など。</div>';

function PopUp(i) {
  ID.innerHTML = txt[i];
  // ヘルプの位置を調整
  ID.style.left = event.x + 20;  //横軸の値
  ID.style.top = event.y + 50;   //縦軸の値
  ID.style.visibility = "visible";
}

function HidePop() {
  ID.style.visibility = "hidden";
}
//-->
</script>
</head>

<body style="line-height:200%">
<span id="ID" style="visibility: hidden; position: absolute;"></span>
<h3>ポップアップヘルプのサンプルです。</h3>
<li><span class="pop_txt" onmouseover="PopUp(1)" onmouseout="HidePop()">JavaScript</span>と<span class="pop_txt" onmouseover="PopUp(2)" onmouseout="HidePop()">CSS</span>を組み合わせているので、色や枠も自由に変更できます。</li>
<li>画像の上にマウスカーソルを置くと<img src="http://www.zakka56.com/smp/icon1.gif" width="15" height="15" alt="?" onmouseover="PopUp(3)" onmouseout="HidePop()"></li>
<li><a href="#" onmouseover="PopUp(4)" onmouseout="HidePop()">リンク</a>先の情報を簡易表示とか。</li>
<li>フォームの入力項目用ヘルプとか。※ポップアップする位置がブラウザによって異なるので、入力欄に重なるかもしれません。</li><br>
<input type="text" onfocus="PopUp(5)" onblur="HidePop()">
</body>
</HTML>

Internet Explorer 6～	○
Firefox 1.5～	×
Opera 9～	○

Amazon.co.jp ウィジェット