‘Web Design’カテゴリーの記事

表示・非表示スクリプト »

最近わりとちょくちょく使うので、コピペ用に。超シンプル。
(もっと複雑なことがしたかったら、Ajaxライブラリを使った方がいい)

※ サンプルは、表示・非表示がトグルになっている。

<script type="text/javascript">
// <![CDATA[
    function OpenClose() {
        tgl = document.getElementById('DivID').style.display;
        if (tgl == 'block') {
            document.getElementById('DivID').style.display = 'none';
        } else {
            document.getElementById('DivID').style.display = 'block';
        }
    }
// ]]>
</script>

Tail-Lagoon @ 18:25   |   PageUp

opacity / filter : alpha »

a:hover img {
    opacity: 0.7;
    filter: alpha(opacity=70);
}

Tail-Lagoon @ 10:26   |   PageUp

onSubmit »

久し振りに使った。すっかり忘れてた。おまけに昔書いたコードも見つからなくて手間取った。ので、備忘としてここに置いておく。特になんということもないスクリプトなんだけどね。

<script type="text/javascript" language="JavaScript">
// <![CDATA[
function FormCheck() {
    if (!document.getElementById("Assent").checked) {
        alert('「Assent がチェックされていません」');
        return false;
    } else {
        return confirm('「送信します、よろしいですか?」');
    }
}
// ]]>
</script>

<form id="Form1" action="" method="post" onsubmit="javascript:return FormCheck();">

onsubmit の中の return(強調部分)を忘れると、関数から false が返されても submit されてしまうので、注意。なんで submit されてしまうのかってことに気づくのに多少時間がかかった。すっかり忘れてたよ、まったく。

Tail-Lagoon @ 23:27   |   PageUp

Google Chrome のバグ? »

新ブラウザ、Google Chrome (0.2.149.29) を試してみたら、早速不具合を発見してしまった。
自分のサイト http://library.tail-lagoon.com で「魚」と検索すると、なぜか検索文字が「魁E」になってしまう。Chrom は Safari と同じレンダリングエンジンを使用していると聞いたので、Windows版Safari でも試してみたのだが問題ない(もちろん、IE7 や FireFox3 では既に問題ないことを確認済み)。
うーん、ベータ版ゆえの現象だろうか?

でも、アプリ側の文字コードの処理にも、問題がないとはいえないし、同様のことが別のユーザ・エージェントで起こらないとは断言できない。案外、Webアプリ側で対策すべきことかも。

「魚」という文字のコードについて調べてみると
SJIS : 8B9B
JIS : 357B
EUC : B5FB
UTF-8 : E9AD9A
UTF-16 : 9B5A
で、Shift-JISでよくある 5c文字(バックスラッシュ)でもなさそうだ。
もうちょっと調べてみる必要あり、ってことか。

Tail-Lagoon @ 22:08   |   PageUp

毎回忘れる Win IE7 用の CSS Hack »

↓毎回忘れる Win IE7 用の CSS Hack

*:first-child+html #Example {
    /* for WinIE7 */
    margin-top: -1px;
}

↓今のところは忘れていない Win IE6 用の CSS Hack

*html #Example {
    /* for WinIE6 \*/
    margin-top: -1px;
    /**/
}

↓あと、このエントリーで使うことになったバックスラッシュのエンティティ

&#92; ← Backslash Entity

Tail-Lagoon @ 16:39   |   PageUp

WordPress 2.6 → 2.6.1 »

WordPress

 WordPress が 2.6 から 2.6.1 にマイナーバージョンアップした。
 ⇒ http://ja.wordpress.org/2008/08/17/wordpress-261-ja/

 以下、単なる備忘録。

続きを読む… »

Tail-Lagoon @ 20:42   |   PageUp

Webサイトのユーザビリティ »

『Webユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。』石田 優子, 有限会社 アルファサラボ/インプレスジャパン

 ユーザビリティについては、これまで経験的にしか学んでこなかったのだが、何かそういう知識が一冊にまとまった本があるといいなと思っていた。で、ちょっと捜してみたら、やっぱりあるものだね(既に1年ほど前に出版されている)。ざっと目を通してみたけど、これはなかなか役立ちそうだ。

 で、紹介がてら下記に目次を付しておく。(この本の目次、第4章のあたりが誤って本文とカテゴリ分けがずれていたので、勝手に訂正してある。最近の出版物って校正が甘いものが増えている気がするよ。)
 この目次、基本的にこのままユーザビリティのチェックシートとしても使えると思う。

続きを読む… »

Tail-Lagoon @ 20:56   |   PageUp

WordPress の記事中の文字変換 »

WordPress

 半角のシングルクォートやダブルクォートを記事本文中に使うと、表示時に勝手に変換されるなというのは以前から気づいていたのだけど……半角ハイフンを2個連続で使う(デクリメントの表現 -- )と、— (&#8211;) に変換されるとは、今日始めて気づいたよ。
 なので、半角ハイフンを連続させる時は &#45; を使わないといけないのだ。

 ちなみにシングルクォートの実体参照(エンティティ)は &#039; 、ダブルクォートは &quot; となる。
 どれもたまにしか使わないと、すぐに忘れてしまうんだよなあ。

Tail-Lagoon @ 18:01   |   PageUp

RewriteBase »

CakePHP の設置時、.htaccess でつまずいた。
ローカルでは問題なかったのに、レンタルサーバにアップしたら、500エラーが発生。mod_rewrite が使えないせいかと疑ったのだが、しかし WordPress で使っているのだから、mod_rewrite は使用できるはずだ。
そこでそれぞれの .htaccess を比較すると、CakePHP のそれには Rewritebase の指定がなかったため、これを追加してみたら、あっさり動いた。
(他にも、FTP からは同階層に見えている公開エリアと非公開エリアのフルパスが実は全く違う(※1)ということを知らず、それに気づくまでにもかなりてこずったのだが、これはレンタルサーバの仕様およびドキュメント不足のせいなので、別の問題)
いつかまた同様の問題に出くわすかもしれないので、忘れないようメモしておく。

(webroot)/.htaccess

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /   # この行を追加
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$ index.php?url=$1 [QSA,L]
</IfModule>

(※1) 自分のためにメモっておくが、公開エリアと非公開エリアについて、フルパスでは全く違うのに、相対パスでは参照可能なのだ。不思議。シンボリックリンクを置いているのだろうか?(でもそれなら、フルパスでだってリンクにアクセス可能なのでは?)……もともと別の箇所で相対パスで使用してうまくいっていたから、ますますフルパスが違うなど思いもよらなかったのである。思い込みってよくないね。しかしどういう仕組みなのだろう?

Tail-Lagoon @ 16:24   |   PageUp

CakePHP の h() »

 CakePHP では htmlspecialchars() を h() と短縮できるのだが……、ちょっと気になることがあって、該当するソースを確認すると、下記のようになっていた。

cake/basics.php

    function h($text) {
        if (is_array($text)) {
            return array_map('h', $text);
        }
        return htmlspecialchars($text);
    }

 配列を渡すと、その値をすべて処理してくれるのは便利だけど、htmlspecialchars() はデフォルトのまま使っているから、シングルクォートは変換されない(ENT_COMPACT になる)。これはちょっと危険な気がする。といって、コア部の cake/basics.php を直しても、バージョンアップのたびに対処しなきゃいけないし、むしろ忘れてしまう可能性大。

 ではやはり h() は使わず htmlspecialchars($str, ENT_QUOTES, 'UTF-8') ときちんと書くのが一番安全かな。でもかなり長ったらしいから、毎回面倒だ。本当は app/ の中のどこか適当な場所に、改良した h() が定義できればいいんだろうけど、でもどこに置けばいいのかな?

 と調べていたら、app/config/bootstrap.php に書き込めばいいらしい。なるほど、このファイル、今後もいろいろ利用価値がありそう。覚えておこう。

    function hsc($text, $quoteStyle=ENT_QUOTES, $encoding='UTF-8') {
        if (is_array($text)) {
            return array_map('hsc', $text, $quoteStyle, $encoding);
        }
        return htmlspecialchars($text, $quoteStyle, $encoding);
    }

Tail-Lagoon @ 12:54   |   PageUp