WEB + PC

最近わりとちょくちょく使うので、コピペ用に。超シンプル。
（もっと複雑なことがしたかったら、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>

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

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

<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 されてしまうのかってことに気づくのに多少時間がかかった。すっかり忘れてたよ、まったく。

新ブラウザ、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文字（バックスラッシュ）でもなさそうだ。
もうちょっと調べてみる必要あり、ってことか。

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

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

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

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

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

\ ← Backslash Entity

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

　以下、単なる備忘録。

続きを読む… »

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

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

続きを読む… »

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

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

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

　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);
    }

CakePHP といえば、このあいだ早速けつまづいたことがあったので、書き留めておく。

あるフィールドの値を重複なしですべてリスト化したかったのだが、

$keyLists = array();
$SQLStr = 'SELECT DISTINCT column FROM dbTables ORDER BY forSortColumn ASC';
if ($Res = mysql_query($SQLStr)) {
    while ($Row = mysql_fetch_row($Res)) {
        $keyLists[] = $Row[0];
    }
}

これを、findAll() とかでできるかと思ったら、DISTINCT をどう指定していいのかわからなくて、結局上記コードのままになっている。で、これをメソッドとしてモデルに追加したのだが……こういう場合、これで正解？　それとも別の手がある？

追記

自前のクエリを発行する場合は query() が使えるということがわかった。これならコントローラーで気軽に（？）使える。この場合、返ってくるのはCakePHPモデルの他のAPIを使った時と同様の構造を持つ配列。
ただ、これを使用した場合の新たな疑問は、DBテーブル名にプレフィックスを付加している場合、他のAPIではプレフィックスを意識せずに使えるけれど、query() の場合は意識しないといけないらしい、ということ。
ビュー内で使用する時、常にこのプレフィックスを付けて（$Variable['PreFix_Table']['Column'] とか）呼び出すのは、何だかちょっと気持ち悪い感じがする……。統一して $Variable['Table']['Column'] のように使いたい場合はどうすれば？
というわけで、それが解決するまでは、自前メソッドのままの方が使いやすいので、query() の使用は保留。

さらに追記── AS の使用 (080701)

もしかしたら、下記でいけるかもしれない。未確認。そのうち試してみよう。

$this->User->query('SELECT DISTINCT column FROM prefix_users AS User ORDER BY forSortColumn ASC');

まず何か作ってみようと思って、真っ先に困惑したのが命名規則。データベースのテーブル名やらモデル名やらコントローラとか……ある命名規則があって、必ずしも遵守する必要はないけれど、守っておけば作りやすい（簡単便利？）らしい。というわけで、フォーラムの中にちょうどこれに関する記事を見つけたので、ブックマーク。

⇒ CakePHPシステムデザイン（最新規約）

（カスタムフィールドの利用）

　WordPressで記事を書いていて、その記事投稿の一部分にのみ独自のCSSを適用したい、という要求がしばしば発生する。その場合の対処は、

1. 独自のidもしくはclassを割当て、style.css等の共用CSSファイルにその部分を記述する。
2. 適用したいタグの中に直接 style="…" とアトリビュートとして記述する。
3. 投稿部分に <style> タグを記述する。
4. JavaScript を用いるなどして、強引にスタイルを変更する。
5. WordPressのカスタムフィールド欄にCSS文を記述し、テンプレートファイルでカスタムフィールドを <head> 内の任意の場所に出力できるように修正する。

　といった方法が考えられる。しかし……

続きを読む… »

これからちょっとフレームワークを使ってみようかな、と思って……。
いろいろ調べたところ、CakePHPが最もとっつきやすそうなので、これを使うことに決めた。

• CakePHP.org
  http://www.cakephp.org/
• フォーラム - CakePHP Users in Japan
  http://cakephp.jp/
• CakePHP プログラマーズ リファレンスガイド
  http://cakephp.jp/doc/
• CakePHP のおいしい食べ方
  http://cakephp.seesaa.net/
• CakePHPフレームワークによる快速WEB開発
  http://codezine.jp/a/article/aid/670.aspx
• CakePHPで高速Webアプリ開発
  http://gihyo.jp/dev/serial/01/cakephp

　以前の記事で、TypePad に独自の記事検索機能がないことを書いた。そして、サポートの勧めに従い Google カスタムサーチを設置して試してみた（これが ver.1）が、やはり幾つかの欠点が気になっていた。

• 記事の新規追加・修正が検索結果にリアルタイムで反映されず、Google への登録待ちになる。
• しかも、すべての記事が Google に登録されるとは限らない。
• ページまるごとインデックスされるので、メニューやナビゲーションの文言まで検索対象となり（ノイズが混じり）、的確な検索結果が得られない。

続きを読む… »

　日本語を含む文字列で、全角英数字やアルファベット大文字を半角小文字に変換および半角カナを全角カナに変換する関数。検索キーワードを統一したい場合などに有効。（検索文字列および対象文字列の双方を変換してマッチさせる。ただし、表示する文字は変換前のものをそのまま使用したい場合は、データを二重化し、変換前と後をそれぞれ用意する必要あり）

<?php
function ABC2abc($Word) { // 文字列のうち英数文字を半角・小文字に統一
    $Word = mb_strtolower($Word, 'UTF-8');
    $Word = mb_convert_kana($Word, 'KVa', 'UTF-8');
    // option  K:半カナ→全カナ  V:濁点文字を一文字  a:全英数→半英数
    $Word = mb_strtolower($Word);
    return $Word;
}
?>

　例 : Ｊａｐａｎ２００８, JAPAN2008 などの文字列を一律 japan2008 に変換

補足

　mb_convert_kana について、上記のように文字コードを指定するか、あるいはPHPスクリプトの内部エンコーディングを最初から指定しておく（下記例）かしないと、うまく機能しない場合がある。

<?php
mb_internal_encoding("UTF-8");
?>

　XOOPS は初心者泣かせの CMS ツールだと思う。
　まずインストールした後の使い方を調べるのに泣かされる。そもそもインストール直後は空っぽだから、目的に応じてモジュールを追加インストールしなければいけないのだが、では「例えばこういう使い方をしたい場合はどのモジュールを使えばいいのか」というような基本的なことからまずわからないのである。
　こういう場合、正直「XOOPS Cube 日本サイト」は、あまり初心者には向いていないと思う。よくわからないけど有用そうな情報がたくさんある。でもある程度 XOOPS を使った経験と知識がないうちは、さっぱり要領を得ない。

　で、色々悪戦苦闘しているうち見つけたのが、「ホダ塾」というサイトで提供している「ホダ塾ディストリビュージョン」である。最初から、サイト構築に必要そうなモジュールが組み込まれていて、XOOPS インストールと同時にモジュールまでインストールできる。少なくとも、わけもわからずモジュールを調べ回ったり捜したりバージョンの互換性を気にしたりといったことから開放される。あとは各モジュールを自分で試してみて、要らなければ削除していけばいい。（それから、インストール時に UTF-8 が選択できる点も、ありがたい。普通に Japanese としてインストールすると文字コードが EUC になってしまうのだが、やはり UTF-8 を使いたいじゃないか）
　しかも「うさぎにもできるXOOPS Cube入門♪」というサイトがあって、こちらでは「ホダ塾ディストリビュージョン」のインストールから使い方の基礎まで解説してくれている。
　新規インストールする場合、今後はこの２つのサイトを活用しようと思っている。

リンク

• ホダ塾
  2008年3月3日、ホダ塾ディストリビューション"HD1.0 for XCL2.1"リリース
  （XCL って何だろうと思ったが、よくよく考えたら XOOPS Cube Legacy の頭文字だった）
• うさぎにもできるXOOPS Cube入門♪
• XOOPS Cube 日本サイト
  （一応こちらもリンクはしておこう。ある程度習熟してからなら、きっと色々お世話になるはず）

※インデックス・テンプレートは、出力するファイル名が決まっている＝１ページのみ作られるファイル用のテンプレート。つまり、新たに追加した場合、自分でファイル名を決定し、アクセス方法はそのファイル名にリンクすればよいということになる。

※これに対して、アーカイブ・テンプレートは、出力するファイル名が決まっていない＝複数ページ作られるファイル用のテンプレート。テンプレートの種類と数は既にシステムで決められているので、新たにテンプレートを追加することはできない。既存テンプレートファイルの変更修正のみ可能。

※グローバル属性（どのMTタグにも使えるアトリビュート）
    remove_html="1"
        文字列からHTMLタグを取り除く
        ex. あいうえお<br />かきくけこ → あいうえおかきくけこ
    generate="1"
        （現時点では不明。何かねこれ？）

【エントリーの一覧表示関連】

※ <MTEntries> のソートに関する属性（アトリビュート）
    sort_by
        表示順の並べ替えを行うフィールドを指定。
        オプション値は、title, status, modified_on, author_id, excerpt のいずれか。
        （注 : この属性を記述しない場合は、投稿順ソートとなるため、
           通常は無記述で構わない）
        ex. sort_by="title"

    sort_order
        表示順の設定。ascend（昇順）もしくは descend（降順）。
        ex. sort_order="ascend"

    ex. <MTEntries sort_order="ascend">

※テンプレート・モジュールについては、ナレッジ・ベースよりもマニュアルページの方が詳しいようだ。ナレッジ・ベースでは掲載されているモジュール数が少ない。

※記事概要表示
    ex. <$MTEntryExcerpt remove_html="1" encode_xml="1"$>
    通常RSS出力で使用。特に概要記事を別に用意しない場合は、むしろ下記の方が良いか？

※記事本文表示
    ex. <$MTEntryBody words="N"$>
    記事本文をN文字分表示（かつ、HTMLタグは除去される）。全文を表示したい場合は属性不要。

Sample

　動的出力をするページで、時々、ドキュメントタイプ宣言（!DOCTYPE）より前──つまりソースの第１行──にHTMLコメント文などを出力するプログラムがあるが、これをやると Windows IE の描画がおかしくなることがある。

　散々HTMLソースやらCSSをあちこち確認したあげく、原因がこれだとわかった時の虚脱感はなんともいえないものだ。

　対策は、とりあえずプログラムの該当箇所をコメントアウトして何も出力させないようにするか、DOCTYPE より後になるように調整すれば済むことだけど、プログラム作者が自分じゃない場合などは、バージョンアップの際に元に戻ってしまったりして、しかもこちらもそんな対策をしたことなどすっかり忘れてしまってたりするから、思い出すまであれやこれやするはめになるのだ。

　もし他にどこにも原因になりそうな箇所がないのに、どういうわけか WinIE で表示が変だという場合、ソースの第１行がどうなっているか見落としてはいけない。忘るべからず。

.htaccess ファイルを用いて、Webサーバ（Apach）における PHP その他の動作設定を変更することはよくあるが、大概サイト構築時の初期の段階において行い、あとは殆ど顧みることがないため、そのうちすっかり忘れてしまうものだ。そして毎回新しいサイトを作るたび、何だったっけ？　と探し回るはめになるので、下記に記録。

デフォルトで表示されるページのファイル名を変更したい

DirectoryIndex sample.php index.php index.html
（先に記述したものほど表示の優先順位が上になる）

拡張子 .html のままで PHP を走らせたい

AddType application/x-httpd-php .html .htm

セキュリティ上、下記項目は必ず phpinfo() で値をチェックし、違っていたら下記値で設定すること（必須）

php_flag register_globals Off
php_flag track_vars On
php_flag display_errors Off

• register_globals オプションを無効にするのは、EGPCS(Environment, GET, POST, Cookie, Server)変数のグローバル変数登録を不可にするため。
• その代わりに track_vars オプションを有効にして、上記変数をグローバル連想配列 $_ENV, $_GET, $_POST, $_COOKIE, $_SERVER として参照可にする。
• display_errors はエラー表示するかしないかの設定。テスト環境では有効にしておいた方が開発しやすいのだが、本番（公開）環境では、エラー表示により重要なパスや変数名が表示されてしまうのを防ぐために無効化する。
• ついでに書いておくと、チェックで使用した phpinfo() のファイルは、必ず削除しておくこと！

※ PHP の httpd オプションについては下記サイトに詳しい。
http://jamesthornton.com/php/japanese/configuration.directives.html

＊＊＊

↓以下は、PHP じゃないけど、htaccess 関連としてついでに書いておくと

拡張子 .html のままで SSI を使いたい

Options +Includes
AddType text/x-server-parsed-html .shtml .html .htm
（Options は SSI 実行可能領域を設定するのだが、もともと実行可なら必要なし）

※ httpd の設定に関する参考サイト
http://www.tagindex.com/other/htaccess.html

　WEBサイト制作において、フォントサイズはピクセルで指定するのが最もわかりやすい。

　作る際にピクセルでフォントサイズを指定し、あとは勝手にユーザ側で大きくするなり小さくするなりすればいいと思う。しかし Windows IE はピクセル指定されたフォントは表示を固定してしまい、ユーザ側で大きさを変更できない（この問題は IE7  になってもまだ残されたままだ）。

　そこで、作る側としては、とりあえずピクセル指定した後、IE用のCSSハックを用いて相対指定するという若干面倒な作業をしてきたわけだが、その際に使用するCSSハックはアンダースコア・ハックが一番手軽だった。ところが IE7 ではこのアンダースコア・ハックは無視するようになってしまったのだ（互換モードのときは使えるらしいが）。なんてこった。

　だから今後はもういっそのこと、フォントサイズはすべて相対指定にして、いちいちブラウザを区別するのはやめてしまおうと思っている。

　その際、最初に CSS で * { font-size: 100%; } としてすべての要素をデフォルト（ユーザが環境設定を変更していなければ通常は 16px だ）にしてしまい、あとはそこからの相対パーセンテージで指定するのがおそらくもっとも簡単な方法だという気がする。

　ただ、相対指定は親要素の値を引き継ぐから、親が 80% サイズのとき、子を 75% とすると、元のサイズからは 60% になってしまうため若干注意が必要だ（だからピクセル指定のほうが便利なのに、MSのバカヤロー）。しかしそれさえクリアすれば後は下記のサイズ指定ですむはずだ。

文字サイズ 16px = 100% とした場合のパーセンテージ計算値

　TypePad のヘルプ記事によれば、ブログに検索機能をつけるのは、Google に頼るしかないらしい。なんてこった！

続きを読む… »

<?php
/*** Current URL ***/
$Path = pathinfo($_SERVER["PHP_SELF"]);
$DirName = $Path["dirname"];
$DirNameSlash = $DirName . '/';
$FileName = $Path["basename"];
?>

　わりとよく使うくせに、覚えていられない。いつも使う時になって、以前のファイルを探し回るはめになるので、ここに書いておく。

　ある複数のブログの更新状態をブログとは別の HTML ページでまとめて表示したい（例えば、ある企業のブログの更新状況を、その企業のサイトのトップページに自動で表示したいといった場合）。欲しいのは、エントリーのタイトルと日付とサマリー。

　というようなとき、最も手っ取り早いのは、ブログが吐き出す RSS を利用することだろう。でも XML を扱うのってちょっと面倒くさい。パースだのハンドラーだの、なんじゃそれは？ いやちょっと待ってくれ、欲しい情報はほんのわずかなんだ。最新のエントリーひとつ分の上記の内容だけ。

　だったら、単純に文字列として取り込んで、必要なものだけ抜き出した方が早くないか？ 使用する RSS のタイプも最初から決めてしまえば、RSS のバージョンに振り回される必要もない。別に汎用のリーダを作ろうってわけじゃないんだから。

　というわけで、文字コード UTF-8、データ形式は Atom、日付は降順になっていることを前提に、やってみた。以下がそのコード。

続きを読む… »

ブラウザの年次別・月別シェア
http://www.w3schools.com/browsers/browsers_stats.asp

(Mac OSX) : ターミナルで下記コマンドを実行する

defaults write com.apple.Safari IncludeDebugMenu -bool true

その後、Safari を起動し、メニュー右に “Debug” という項目が追加されていることを確認。
“Debug” → “Show JavaScript Console” を選択すると、エラーがある場合、ここにメッセージが表示される。

　アドレスバーに "about:config" と打ち込むことで、通常の環境設定ではできない各種設定が可能になる。

　項目内容については、その時々で検索をかければ、たいてい必要な情報が見つかる。

　ぼくが重宝したのは、"browser.search.openintab" を "true" とすることで、検索バーに入力した結果を常に新しいタブで表示させることができるようになったこと。今まで、わざわざ新規タブを最初に開いておいてから検索をかけていたので、その手間がはぶけるようになった。

WinIE で CSS が利かない場合、まずは HTMLファイルと CSSファイルの文字コードが同一であるかを確認すること！
CSS内に日本語のコメントが入っていて、かつ、文字コードが HTMLと違っていた場合、一部（全てではないから厄介。このおかげで原因の発見が遅れる）の CSS指定が利かなくなる現象が見られる。

通常のCSS Link
<link href="ordinary.css" rel="stylesheet" type="text/css" media="screen‚print" />

Safari 専用のCSS Link
<link href="safari.css" type="text/css" media="screen‚print" />

このように rel 属性を除くことで、Safari にしか読み込めなくなる。