Archive for 9月, 2008

色覚特性に配慮したWebデザインのためのツール

火曜日, 9月 30th, 2008

みなさまこんにちは、加賀田です。本日も前回に続いて便利ツールのご紹介です。

Webデザインの作業にあたって、配慮すべき項目のひとつに色とアクセシビリティの関係があります。情報を認識しやすい色使いを心がけるのはもちろん重要であって、世のデザイナーさんは(Webに限らず)常に自分の目でそれを確認していることと思います。

それに加えて、色覚に障害を持ったユーザにも使いやすい配色を行う必要があります。このあたりは、一般のプロジェクトではあいまいにされがちな部分ではあります。が、こういったことにも気を配っておくと 色覚特性ばかりでなく、例えば「ディスプレイが壊れて色の表示がいつもと違う!」なんていうハードウェアの問題などにも対応できるなど、結果すべてのユーザや閲覧環境に対してアクセシビリティの向上を図ることができます。「色覚障害なんてマイノリティでしょ?」と、あなどるなかれ。

とはいえ、他人の色の感じかたを推し量るのは難しいことで、色のアクセシビリティ評価にはそれなりの指標やツールを使う必要があります。指標としては、W3Cの手になるアクセシビリティガイドラインであるWCAG1.0に”Guideline 2. Don’t rely on color alone.”という項目があります。また、”Techniques For Accessibility Evaluation And Repair Tools“という文書もワーキングドラフトながら公開されており、RGB値からアクセシビリティを定量的に評価する手法などが紹介されているようです。

これらの指標を元に、アクセシビリティを評価するための便利ツールがたくさん出回っております。わたしの業務用マシンにインストールしているのは、「カラー・コントラスト・アナライザー」と「ColorDoctor」のふたつ。

「カラー・コントラスト・アナライザー」は、先述のW3Cによるコントラスト比や色差の評価基準から前景色と背景色の組み合わせが適切かどうかを確認できるツールです。

p_200809301.gif

当ブログのリンクテキストのコントラスト比を確認するとこんなかんじ。

そして「ColorDoctor」は、Webページの色調を色覚特性に合わせてシミュレーションできるソフトです。

p_200809302.gif

弊社Webサイトのトップページを使って、赤色が見えにくい色覚特性(正式には1型色覚というそうです)をシミュレートしてみました。全体に色合いが不明瞭に見えることが分かります。まだ文字は判読できるレベルですが、配色によっては文字が読めなくなることもあるでしょう。

ほかにもいろいろ、有料無料含めいいツールが出回っているようです。すてきですね。みなさまも一度おためしあれ。

ゲーム好きなら

月曜日, 9月 29th, 2008

皆さん、こんにちは。
季節の変わり目で体調を崩されてないでしょうか?
かく言う私は、ここ10日間ほど体調不良が続いてまして、熱がすごくあるとか、咳や鼻水がでるというわけではないのですが、体がだるくなかなか本調子に戻りません。
皆さんもこの季節は、体調管理が難しいとは思いますが、お気をつけ下さい。

さて先日、みんな大好き「phpspot開発日誌」を見ていたらこんな記事を見つけました。

サイトをドラゴンクエストっぽくするUIライブラリ「DQWindowManager」

そして、上記の記事で紹介されているサイトがこちら

DQWindowManager – Webをドラゴンクエストっぽく遊ぼう!

私と同じ年代の方でゲーム好きの方は、ほぼ100%の方がドラゴンクエストには触れたことがあると思うので、なにか無条件で親しみを覚えてしまいそうですね。
企業サイトで使用するのは、ゲーム系のサイト以外は無さそうですが、ネタとしては面白いですね。

Table2Clipboard:HTMLページのテーブルをコピペするFirefoxアドオン

金曜日, 9月 26th, 2008

みなさまこんにちは、加賀田です。本日は便利なFirefoxアドオンを見つけたのでご報告いたします。

Webページ上の表データを集計したり加工したりしたい局面というのがときどきあります。こういう場合、Excelなどの表計算ソフトに表をそのままコピペできると便利なのですが、だいたいはうまくいきません。Windows環境であればInternet Explorer + Excelならうまくいきますが、コピー元がFirefoxだったりペースト先がGoogleスプレッドシートだったりするとだめ。かといって、それだけの理由でIEを使うのもなんだか業腹です。

そこで便利なFirefoxアドオンがないかと探してみたところ、はたしてありました。Table2Clipboardをインストールすると、Firefoxのコンテキストメニューに「表全体をコピー」「表を選択」なる項目が追加されます。

p_20080926.gif

所望のテーブルを右クリックして「表全体をコピー」すれば、あとはExcelでもGoogleスプレッドシートでもテーブルの形式を保ったままペーストしほうだい!いいですねー。

コーダーの心得

木曜日, 9月 25th, 2008

Web&Peaceよ!私は帰ってきた!
はい、というわけで少々私用で休暇をいただいておりましたが、本日より復帰します。
腰痛持ちのカトーです。よろしくお願いします。

本日は、コーダーにとってはおなじみの「CSS HappyLife」様の記事で背筋の伸びるような記事がありましたのでご紹介します。

今よりちょっとだけクオリティを上げるために。

という記事なのですが、コーダーの心得といいますか、コーディングする際に意識すべきことが載っています。
なんといいますか、どれも頷けることばかりです。
そして、やっぱり最後の
「何はともあれ楽しまないと損です!」
というのが一番重要なのかなと思いました。
楽しまないと段々辛くなってきますし、精神的にも肉体的にも徐々に影響が出てきます。
今のプロジェクトも佳境にはいってきましたし、無事納品するまで楽しんでコーディングしたいと思います!

Rubyメモ:ヒアドキュメント

水曜日, 9月 24th, 2008

みなさまこんにちは、加賀田です。全国8000万の加藤ファンのみなさま、加藤の出社は明日となっておりますので本日もわたしが更新いたします。

さて、以前の記事でHTMLを吐き出すRubyCGIスクリプトをご紹介した際、 こんなことを書いておりました。

HTMLの属性をくくる引用符をエスケープするのがめんどくさい!

これ、ヒアドキュメントで比較的簡単に解決できますね。すっかり失念していました。ヒアドキュメントを使うと、先述のスクリプトは以下のようになります。

#!/usr/local/bin/ruby
puts "Content-Type: text/html¥n¥n"

puts <<EOS
<?xml version="1.0" encoding="utf-8n"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>Hello, World. ~こんにちワールド~</title>
</head>
<body>
<p>Hello, World.</p>
<p>こんにちワールド。</p>
</body>
</html>
EOS

ヒアドキュメントは、このように複数行に渡るような長大な文字列を手軽に引数として渡せる機能。文字列を引用符でくくらないので、引数の文字列中に引用符を含んでもエスケープが不要というご利益もあります。PerlやPHPにも同様の機能がありますね。UNIXのシェルスクリプトが発祥なんでしょうか。

Yukariで書き出し品質にこだわる

月曜日, 9月 22nd, 2008

みなさまこんにちは、加賀田です。加藤休暇につき、とうとう執筆者がわたしひとりになってしまいました…加藤さん、早く帰ってきてー!!ということで、本日は新たな制作ツールを入手したのでこれをご紹介いたします。

HTMLコーダーという職に就くまでわたしは知らなかったのですが、コーダーにはHTMLを書くのと同じくらい画像素材をいじる機会があります。FireworksやPhotoshopで画像を「スライス」するとか、限られた素材からバリエーションを作成するとか、あるいは弊社のスケルトン手法においてはコーダー自ら画像素材を作ってしまうこともあります。

そんな調子できょうもFireworks上でスライスの作業をしていたのですが、ここで問題発生。グラデーションのたっぷりかかった画像を切り出す際に、「gif:すべての色を割り付け」が使えないという事態が発生。「gif:アダプティブ256色」ではせっかくのグラデーションがだんだらになるし…ていうか「256色」指定してるのに書き出しに60色ぐらいしか使わへんのはなんで!?と、こういう場合ふだんならあっさりjpgに切り替えてしまうのですが、ふと「Photoshopやったらきっちり256色使ってきれいに書き出せるのにな…」と思ったわたしは、なんとかgifで書き出すべく別の方法を検討することにしました。

とはいえ、Photoshopは重いし、何よりインタフェースに慣れない…ので、減色専用のソフトウェアを使ってみることにしました。とりあえずフリーということでYukariをチョイス。

解凍パスは、
豆腐にまつわる
です。

という配布サイトの記述を誤解して、パスワードに「daizu」とか「nigari」とか入れてたのはご愛嬌。「豆腐にまつわる」をコピペして配布のファイルを解凍して、FLAX.exeを起動。

p_20080922.gif

当ブログのメインイメージを128色まで減色したところ。スクリーンショットでは分かりにくいですが、画像右の肌の部分以外は元画像とほとんど遜色ありません。 Fireworksのエンジンではこうはいかないですよね、すばらしい。

このソフト、コマンドライン上でも使えるということで、各種スクリプトと組み合わせるとさらに夢が広がりそうです。

RubyでCGIプログラム2:shebangとMIMEタイプ

木曜日, 9月 18th, 2008

みなさまこんにちは、加賀田です。本日は前回の記事で紹介した最小構成のRubyCGIプログラムについての解説です。

まずは1行目。

#!/usr/local/bin/ruby

shebangと呼ばれる記述です。UNIXではこれを使って当該スクリプトのインタプリタへのパスを指定します。むかーし、シェルスクリプトとかPerlのCGIプログラムとか書いたときに使ったなー。

UNIXのものなので、Windows環境では記述しなくても動作するようです。だいたい、Windowsのテスト環境でちゃんと解釈するとしたら上記のパスはでたらめなわけで。実際、わたしのテスト環境では1行まるごと削除してもちゃんと動きました。が、本番環境はふつうLinux+Apacheでしょうから、書くものだとしておくのがいいでしょうね。

そして次の行。

print "Content-Type: text/plain¥n¥n"

プログラム冒頭で送信するデータのMIMEタイプを指定しています。今回はHTMLコードの体をとっていないので、“text/plain”としました。XHTML1.0での最小構成は次のようになるでしょう。

#!/usr/local/bin/ruby
puts "Content-Type: text/html¥n¥n"
puts "<?xml version=¥"1.0¥" encoding=¥"utf-8n¥"?>"
puts "<!DOCTYPE html PUBLIC ¥"-//W3C//DTD XHTML 1.0 Transitional//EN¥"
¥"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd¥">"
puts "<html xmlns=¥"http://www.w3.org/1999/xhtml¥" xml:lang=¥"ja¥" lang=¥"ja¥">"
puts "<head>"
puts "<title>Hello, World. ~こんにちワールド~</title>"
puts "</head>"
puts "<body>"
puts "<p>Hello, World.</p>"
puts "<p>こんにちワールド。</p>"
puts "</body>"
puts "</html>"

MIMEタイプは“text/html”ですね。それにしても、HTMLの属性をくくる引用符をエスケープするのがめんどくさい!こういったことを解決するために、のちのちeRubyなどを取り上げる必要があるでしょう。でも、それはまた別の話…。

ともあれ、やっとHTMLを出力することができました。次回に続く!

MT4.x参考書買ってみました。

火曜日, 9月 16th, 2008

皆さん、こんにちは。
3連休の二日目から頭痛に悩まされ、ほぼ連休を無駄にした加藤です。

さて、キモチを切り替えていきます。
本日は、そんな頭痛に襲われる前に購入した本の感想を少し。
購入したのは、「Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニック クリエイターが身につけておくべき新・100の法則。
タイトル長いですね。前にもご紹介したのですが、実際に購入してみました。

感想をといいますと、ある程度MTでのサイト構築経験があればあまり必要ないかなというのが、正直な感想です。
ただ自分の場合、確認といいますか自分のやり方が合ってるという確認作業にはなりましたし、他のMT本より実務で役に立つ内容になっていると思います。
これからMTを学ぼうと考えている方は、この本にプラスして入門系の本を買うといいかもしれないです。

次は、小粋空間さんのMT4.2本でも買おうかなと検討中です。
それでは、また明後日お会いしましょう。

RubyでCGIプログラム1:ローカル実行環境

金曜日, 9月 12th, 2008

みなさまこんにちは、加賀田です。今回からRuby勉強記はCGIプログラム編に突入です。ちなみにエントリのタイトルは「Rubyはじめました5」でもよかったんですが、「Rubyはじめました」というタイトルのコンテンツがあまりに多いことに気がついたので改めて1からはじめます。どうでもいいですね。

さて、CGIプログラムを作るにあたって、問題になるのが実行環境です。これまでのプログラムは単にコマンドライン上で実行すればいいものばかりでした。しかし、CGIプログラムの実行にはWebサーバが必要です。

いま使用している業務用マシンにはXAMPPが入っており、WordPressなどPHPアプリのテストにはこちらをずっと使ってきました。しかし、XAMPPにはPHPやPerlは入っていてもRubyは入っていないのです…。別途設定すればXAMPP上でRubyCGIプログラムを使用することもできるようなのですが、めんどくさい!

そう思っていろいろ訪ね歩いていたところ、いいものを発見しました。 Rubyist Magazineの記事『Ruby ビギナーのための CGI 入門』で、Rubyで記述されたサーバスクリプトが公開されています。これはお手軽!

そういうわけで、さっそくダウンロードしたサーバスクリプトを実行、CGIプログラムを走らせてみました。次のようなコードが、どうやらRubyCGIプログラムの最小構成ということになりそうです。

#!/usr/local/bin/ruby
print "Content-Type: text/plain¥n¥n"

print "Hello, World"

上のコードとserver.rbを同じディレクトリに置いた場合は、http://localhost:8080/(CGIプログラムのファイル名)にブラウザからアクセスすれば、ご所望のCGIプログラムが実行されますよ。

ちなみに、Windows環境において空白文字を含むディレクトリ以下にRuby本体を置いていると、ブラウザでアクセスした際に500 Internal Server Errorが返ってきてうまくいきませんでした。ご注意あれ。

実行環境が整ったところで、実際のプログラミングに入っていきます。次回を待て!

IE6を除外するスクリプト

木曜日, 9月 11th, 2008

皆さん、こんにちは。
夏場でも体重が落ちず、大台を突破した加藤です。
このままではまずいといい続けて、はや1年。WiiFitの購入を検討中です。

さて、本日のお題は「IE6を除外するスクリプト」です。

IE 6 Blocker Script

コーダーの天敵ともいえる存在を除外できるそうです。
とはいえ、IE6は未だに無視できないシェアを持っているので、実務で使用することはなさそうです。
まぁ、ネタとしては面白いですね。