テーブルを見やすくする方法のあれこれ

テーブルって行ごとに色が違っていると見やすいですよね。
いくつか方法があります。

（１）JavaScriptで

少し前のはてなブックマークの注目エントリでこんなのがありました。

テーブルをJavascriptで自動的に見やすくする:phpspot開発日誌
http://phpspot.org/blog/archives/2006/04/javascript_11.html

JavaScriptでtr要素を見つけ、偶数行にはそれようのCSSクラスを適用する
という方法です。
HTML上は特に細工する必要がないので、結構汎用的に使えるテクニックだと思います。

（２）サーバーサイドで
tr要素をforやforeachなどでループさせるときに、class=""　部分を出力制御する
方法。おそらく一番よくあるタイプ。


（３）[未定] CSS3でのnth-child擬似クラスで
CSS3自体がまだ正式なものでないのでどうなるかわかりません。
nth-child擬似クラスは同じ親を持つ子供の中で、何番目のかをさします。
これを利用し、
tr:nth-child(even) {background-color: white}
tr:nth-child(odd) {background-color: silver}
のようにしてやります。(参考)
つまり奇数行、偶数行という指定でCSSを定義できるようになるかもしれないのです。
これもHTML上は特に細工がいらないはずです。

パナソニック「VIERA」のWebブラウザを試す

我が家にVIERA(ビエラ)がやってきました。液晶の方です。
どうやらLANケーブルをつないで設定するとwebできちゃうみたいなので
早速試してみました。

まずは内臓ブラウザの仕様（取扱説明書を参考）
　・記述言語：HTML 4.0準拠
　・スタイルシート企画：CSS1/CSS2 (Subset)
　・動作記述言語：JavaScript 1.5/ ECMAScript (ECMA-262)
　・セキュア通信：SSL2.0/SSL3.0/TLS1.0
　・Cookie：バージョン0
　・モノメディア：JPEG,PNG,GIF
　・音声：wav,MPEG2-AAC,受信機内臓音
　・プラグイン：なし

Flashはだめです。JavaScriptは使えるんですね。
この時点で皆さんはきになるでしょう。「Ajaxはどうなの？」

で、試してみました。
Google サジェストを。



なんとなくできてるようですね。ただ、なんせテレビのリモコンからケータイの文字を入力するので、入力をある程度確定しないと候補が出ません。
普通はIMEの入力確定前でも候補がでてきてくれるんですけど。
さすがにこのあたりのイベント発生の仕方は違うのでしょうね。
致命的なのが…表示された候補を選択できないこと。
リモコンの矢印キーでページ内を移動するのですが、候補のところにフォーカスがあったってくれません。
まぁ、しょうがないと思います。

あと、Googleマップはだめです。だめというか、ドラッグができないので面白くありませんでした。

ちなみにこのブラウザのUAは

User-Agent: Mozilla/4.0 (compatible; MSIE 5.0 compatible; Device Mosaic 5.0; OpenTV) InettvBrowser/1.0 (009999;LX60;1.03;99999)

でした。最後のほう一部修正してあります。
他にも似たようなUA（OpenTVとかInettvBrowserとか）をはく家電ブラウザ？はあるようですね。

一通り使ってみた感想は
　・文字入力が面倒
　・レンダリングが遅め
　・カーソル、スクロールが面倒
でも、これでパソコンができない母親もネットができそうなので、まぁいいのかなと。

IEで子供セレクタ

IEはCSSのセレクタの対応がお粗末です。DIVタグの氾濫の原因だと思います。

たとえば、ある要素を基点として子要素を指定するための「子供セレクタ」
に対応していません。

ところが、子供セレクタを擬似的に実現する方法があるようです。

Lucky bag::blog: IE でも擬似的に子供セレクタ
http://www.lucky-bag.com/archives/2005/06/simulate_child.html

子孫セレクタは対応してるので、それを応用したってところですね。
目からうろこでした。

記事候補

時間があったら書こうと思っているネタを自分が忘れないようにメモします。
まだ調査してないものもありますので実際に書けるかどうか分かりません。

[(X)HTML+CSS]
　・IE7とCSSセレクタの対応

[JavaScript]
　・Flashと組み合わせて限界を超えてみる

[リッチクライアント]
　・XULについて

[Flash]
　・Zuluについて

[マイクロソフト]
　・Cookieが切れない？IEのインターネットオプションに潜む罠

[Flash] AFLAXがいつのまに1.0に

AFLAX: The AJAX Library for the Adobe Flash™ Platform
http://www.aflax.org/

以前の記事で少し取り上げたAFLAXですが、いつのまに1.0になってました。
The AFLAX Blogによると2006/3/8あたりにリリースされたようです。

demo が増えてます。Webメーラーとかインパクトのあるものが欲しいです。


このブログにも「aflax」で検索でやってくる方がたまにいらっしゃいます。
AFLAXの使い道ですが、いまだ見出せません。どちらかというと小物向けなんでしょうかね。

[セキュリティ] IE7と証明書

Internet Explorer 7 Beta 2 Previewを試してみる − ＠IT
http://www.atmarkit.co.jp/fwin2k/productreview/ie7/ie7_01.html

また、SSLなどで通信を行う際、Webサイトの素性を証明するために証明書が使われる。この証明書の有効性はインターネット上にある「信頼された認証局」が保証するのだが、この認証局を自身で構築するなどして、正規の証明

書を装う、いわゆる「オレオレ証明書」が悪用される場合があった。これに対しIE7では、信頼されていない発行元の証明書を利用している場合は次のような警告が表示され、その危険性がユーザーに対して強調されるようになっている。

いわゆる「オレオレ証明書」を使用してるサイトを見るとき、ちょっと気持ちわるくなりますってことですね。

ところで従来、ルート証明書のアップデートはWindows Updateの中にひそかにまざっていました。
IE7ではルート証明書はデフォルトでmicrosoftの物しか入ってなくて、そのほかのルート証明書はmicrosoftさんとこから取ってくるんだとか。？？　かなり記憶があいまいですどこかのブログに見た情報なのですが忘れてしまいました。週刊スケッチさんのエントリにありました。[2006/05/09修正]

[セキュリティ] SQLインジェクション対策としてのprepared statement

prepared statement（プリペアードステートメント：準備済みSQL）とは
「select * from name where id = ?」
ようなSQLを予め準備（prepared）させといて、?の部分を実行時に展開させる
って方式。利点は２つ。

１．?の部分に都合の悪い文字が入ってきてもDB側で勝手にどうにかしてくれる。
　　→SQLインジェクション対策
２．パフォーマンスアップ

抽象的で申し訳ないです。詳細は他サイトをご覧ください。
http://www.atmarkit.co.jp/fjava/javatips/025jspservlet016.html
http://www.atmarkit.co.jp/fsecurity/rensai/webhole02/webhole01.html


私はDBあまり詳しくないので、どのDBが対応しているかわかりませんが、結構
対応してくれてるはず。

SQLインジェクションついては良い資料を見つけたのでメモ

<デブサミ 2006> SQLインジェクションの脅威インジェクションの脅威
http://www.seshop.com/event/dev/2006/data/download/9-E/9-E-7.pdf ←【PDF】です

もうちょっと調べてると「セカンドオーダーSQLインジェクション」という攻撃もあるんだそうです。
一般的な「SQLインジェクション対策」では防げないんだとか。いたちごっこ。
http://www.nikkeibp.co.jp/sj/special/76/05.html

[セキュリティ] IEのCSSXSSの脆弱性が修正しきれてないんだとか

# 正直、CSSXSSについてはリアルタイムで情報を仕入れてなかったのでフォローアップ。


IE(たぶんWindows版のみ)のCSSXSS(CSSクロスサイトスクリプティング)に関する
脆弱性が4月の月例パッチでは修正されていないようです。

CSSXSSとは、CSSのimport文などで他ドメインのCSSファイルの内容を取得し
JavaScriptで参照でちゃう、みたいなかんじです。

月例パッチ適用後、よく出回っていたエクスプロイトコードは無効になった
（脆弱性がなくなった）ようにみえて、まだ他の方法でCSSXSSが可能だそうです。

http://d.hatena.ne.jp/hoshikuzu/20060414#P20060414IECSSXSS

[セキュリティ] クロスドメインクッキーインジェクション

Cookie Monster襲来！ 戦え、星野君
http://www.atmarkit.co.jp/fsecurity/rensai/hoshino06/hoshino01.html

WebブラウザにCookieがセットされるとき、Cookieにはdomain属性というものが付けられる。特に指定がない場合はアクセスしているWebサーバのホスト名、指定がある場合はアクセスしているURLのドメイン名に後方一致していればそのdomain属性で保存される。

MozillaやFireFoxでは.co.jpなどの属性型ドメイン名に対してCookieを発行できる仕様になっている。また、Internet Explorerでは.tokyo.jpなどの地域型ドメイン名に対してCookieを発行することができる仕様になっている。この仕様を悪用してCookieを操作する攻撃は、「クロスドメインクッキーインジェクション（Cross-Domain Cookie Injection）」または「Cookie Monster」などと呼ばれている。

クロスサイトスクリプティング(XSS)、クロスサイトリクエストフォージェリ(CSRF)あたりは耳にしますが、今回ご紹介しているクロスドメインクッキーインジェクション(Cookie Monster)というのは初めて聞きました。

ものすごい大雑把に説明すると「現在のブラウザとCookieの仕様上、変なCookie仕込まれて何か仕組まれちゃうかもしれない。」
ほんとに大雑把…

この問題は結構前から指摘されてるみたいですね。
http://itpro.nikkeibp.co.jp/free/ITPro/NEWS/20040921/150222/

CookieにSecureフラグ立てても意味ないのかな。関係ないか。
ちょっとWebアプリのセキュリティについて一度まとめて勉強したいと思いました。

Cookieのおさらいをするのには下記のページがオススメです。
Perlで作るCGI講座 - Cookieの概要と使い方
http://www.futomi.com/lecture/cookie/index.html

こういった、開発言語に限らないHTTPの基本は、Web開発者としてはおさえておきたいところですとね。


▼ 4/18 追記
Tociyuki::Diary Firefoxでco.jpドメインのクッキーを食わされたら
http://d.hatena.ne.jp/tociyuki/20060414/1145022976

上記サイトで対策方法が紹介されています。つっこみもあります。

[Flex] 2.0が気になる

AjaxとFlashを融合---アドビが新リッチ・クライアント開発ツールFelx 2.0を今夏出荷へ
http://itpro.nikkeibp.co.jp/article/NEWS/20060414/235367/

 

アドビシステムズは，現在はベータ版を配布中で2006年夏に出荷を予定しているFlashベースのリッチ・クライアント開発環境の新版「Flex 2.0」のデモを2006年4月14日に実施した。統合開発環境のEclipseを開発に使ってみせたほか，AjaxとFlashを融合させたクライアント画面を見せた。開発ツール「Flex Builder 2」の価格は1000ドル以下。開発会社は，米Adobe Systemsが買収した米Macromedia。

個人的に大きな変化と感じているのは
 1.価格ダウン
　　Flex1.5は200万円以上しましたからね。
　　あとFlex Framework 2.0が無償提供になると思っていたのですが、

　　どうやら勘違いのよう。SDKは無償？ちょっと自分の中で整理しきれていません
 
 2.開発ツールがEclipseベースに
　　いままではDreamweaverの延長上にあったFlex Builderでしたが

　　今バージョンからEcpliseベースに。Javaプログラマもずっと親しみやすくなる、はず。
 
 3.Flash Player 8.5
　　とにかく実行速度の向上に期待。Laszloでも恩恵をうけることができるかも。
 
 
あとURLの記事では紹介されていないのですが「AjaxとFlashを融合」というのは
FABridge (Flex Ajax Bridge) 、ACFDS (Ajax Client for Flex Data Services)
の２つのこといってるんだと思います。
　・FABridge (Flex Ajax Bridge)
　　　Ajax側からFlexコンポーネントのメソッドを読んだり、逆ができたり。
　・ACFDS (Ajax Client for Flex Data Services)
　　　詳しいことは分からないのですが、サーバー側からのプッシュ配信して、Ajaxクライアントが
　　　受け取るしくみ？？なんかリアルタイムっぽいことができるのかな。
 上記の二つはFlash 8.0 でJavaScriptとFlashが仲良くなったからできるよう
になったのだと思います。むしろ逆でこれらのライブラリを作るためにそうしたのかもしれませんが。
二つともオープンソースで提供って形になりましたね。
http://japan.zdnet.com/news/software/story/0,2000056195,20099198,00.htm
 
そのうちぜーんぶオープンソースで無償にならないかなぁ。
 
 

「Flash系RIAにできてAjaxにできないもののうち、ユーザーが幸せになる物」がこれからも増えていくことを期待しています。

インターネット証券2.0

「Web2.0的発想の証券取引を」、GMOインターネット証券がサイト開設
http://itpro.nikkeibp.co.jp/article/NEWS/20060413/235294/ 

　GMOインターネットのグループ企業である「GMOインターネット証券」は、5月12日にサービスを始めることを発表した。GMOインターネットの熊谷正寿社長は、「既存の証券会社と提携したり買収したりするのではなく、インターネット・ビジネスを熟知した我々ならではのサービスを提供する」と、意気込みを語った。
 

GMOインターネット証券のサイトを覗いて「インターネット証券2.0」という言葉を見たとき、正直飲んでいたグレープフルーツのジュースを吹いてしまった。
なんでも2.0ね。なにやら、株式発注の専用ツール「はっちゅう君」のAPIも公開するそうです。このあたりが2.0たるゆえんなのでしょうね。
 
それにしても手数料安いなぁ。約定金額20万まで105円の手数料っていまのところ一番安いのでは。
口座つくっちゃおうかな。
 
 

無料レンタルサーバー AsNetPro

無料レンタルサーバー AsNetPro
http://www.sousui.jp/index.html

ＰＨＰ　５．１．２
ＭｙＳＱＬ　５．０．１８
ＴＯＭＣＡＴ　５．５．１５
ＪＡＶＡ　１．５．０_６

が使えるみたいです。
SSH接続もOKとのこと。

ただし、応募者が多いため、抽選になるそうです。

Javaがつかえて無料のところってなかなかないですよね。

4/12 IEの仕様変更(ActiveX関連)

2006年4月のマイクロソフト月例パッチ(4/12)でIEのActiveX周りの仕様変更が行われます。

ページに含まれるAxtiveXを動作せせるとき、確認メッセージがでるようになる。のかな？

http://www.microsoft.com/windows/ie_intl/ja/using/techinfo/activexupdate.mspx

http://itpro.nikkeibp.co.jp/article/NEWS/20060407/234816/?ST=win

http://itpro.nikkeibp.co.jp/article/NEWS/20060407/234775/

忙しさ度判定システム

株式会社グローバル・フレックス・プランニング　という会社の社内システム一覧。
http://www.gfplan.jp/recruit/system.html

ここの「忙しさ度判定システム」というのがとても気になります。
なにやら常駐プログラムで忙しさが自動判別されるそうです。
どんなステータスがあるのか見てみたいです。

RED5 (オープンソースFlashストリーミングサーバー)

RED5
http://www.osflash.org/red5

よくストリーミングだとWindows Media PlayerやReal Playerを使用するものが
ありますよね。でもたまにFlashを使ったものもありますよね。
もちろんFlashを使ったものが一番好きです。

サーバー側ではたぶんFlash Media Server(旧Flash Communication Server)を
使ってるんだと思います。で、プロトコルにはRTMPを使用ってことだと思います。

前置きが長くなりましたが、RED5はFlash Media Serverと同じくRTMPを
サポートするオープンソースのFlashストリーミングサーバーのようです。
オープンソースサイドでFlashを盛り上げようぜっていうOSFlashの中の
１プロジェクトです。

OpenLaszloと組み合わせるサンプルを見かけ方ことから興味を持ったのですが
さすがに日本語の情報がほとんどなくてよくわかってません。

何ができるかというのは公式サイトの「What does Red5 do??」てとこに
書いてあります。

んー。仕事では使う機会ないかなぁ。。

Flash Playerだけでテレビ見れるといいんだけどな。

RED5を知ったきっかけは
http://nothingcompares.blog42.fc2.com/blog-entry-30.html

Vista世代のマイクロソフトの技術

オープソースのテクノロジばかり追っかけてると誤解されがちですが、
私は反マイクロソフト思考ではありません。

Flash好きな私にとって一番気になっているのは
WPF(Windows Presentation Foundation )です。
次世代API「WinFX」のプレゼンテーション層。
Avalonというコードネームで呼ばれてましたね。
どうやらWPFアプリ（なんと読んだらいいのか分かりませんが）
を動かすのにWindows Vistaは必須ではないようです。機会があればいじってみたいです。

Atlas,XAML,WPF,Expressionシリーズ...
いまVBあつかっている開発者もいずれこれらと付き合うのが
当たり前になってくるのでしょうか。
なんだかんだでマイクロソフトの存在は無視できません。

"live"のほうには全然ついて行けません。。
サービスが始まる前に「今登録しておくと、サービス開始後にお知らせします」
ってのに登録した覚えがあったのだが、結局そのまま放置しちゃってます。

・以下mix06関連リンク
mix06 Windows Presentation Foundation とは？ - WPF概要解説
http://iandeth.dyndns.org/mt/ian/archives/000612.html
　→きれいにまとまってます。

mix06 Microsoft流 mix - カンファレンス概要
http://iandeth.dyndns.org/mt/ian/archives/000611.html
　→こちらもまとまってます。

たたみラボ: Microsoft Mix06 カンファレンスまとめ
http://www.tatamilab.jp/rnd/archives/000172.html
　→まとめパワポあり

[リッチクライアント] 狛江市民ホール

【事例フラッシュ】リッチ・クライアントの座席予約・備品管理システムを導入---狛江市民ホール

http://itpro.nikkeibp.co.jp/article/NEWS/20060403/234331/

東京都狛江市の外郭団体である狛江市文化振興事業団は，狛江市民ホール「エコルマホール」の座席管理・施設予約システムを再構築した。座席管理システムは1月27日から本稼働しており，4月5日には施設予約システムもカットオーバーする予定である。新システムは，リッチ・クライアント環境「Curl/Surge RTE」を利用して開発した。

いちいちSurgeプラグイン入れてやる人いるのかなぁ。
Curlはあまりコンシューマ向けでないというイメージがあります。

本棚.org

本棚.org

webdevjp名義で作りました。
http://www.hondana.org/webdevjp/

ここ5年くらいに買ったものと欲しいもの。

ざっくりとカテゴリ分けもしてあります。

「アンタこれ読め」カテゴリも必要？

Yahoo! Japan 10周年と自分

本日2006年4月1日、Yahoo!Japanが10周年を迎えたそうです。

10年前といえばちょうど私がインターネットを始めたころです。
Windows3.1 + Netscape Navigator 1.x + 14.4kモデム
という環境で未知の世界へ飛び込んでいきました。

たぶんこれが今の自分の仕事につながっているんだと思います。

ホームページなんかもつくってましたね。
ネットサーフレスキューＷｅｂ裏技の掲示板のCGIをプロバイダの
ホームページのスペースに乗っけて、書き込みがされるのを楽しみに待ってました。
パーミッションの設定とかperlとかぜんぜん分からなくていろいろ苦労した覚えがあります。FTPクライアントやGIFを作るソフトも少なかったし。しかもWin3.1だし。
まぁそんな状態でよくやっていたと思います。

まだJavaScriptなんてなかったな。でたてのころは、みんなしてアラートとかステータスバーに文字を流すのに夢中になってましたよ。

いまではそんな知識まったくなしでブログとかつくれますもんね。
便利だこと。

メーラーはEudra使ってた覚えがあります。ずっとエウドラって読んでました。

当時の技術で思い出すのはHotJAVA、VRMLあたりです。懐かしいぃ。。


---


続きを読む