hamashun.com

AJAXアプリ特集

RSSを辿っていたら、たまたまAJAX関連が多かったので、今日は僕が使っているAJAXのWebアプリをご紹介したいと思います。
ところでみなさんは、『AJAX』って何て読んでますか？ 僕は「えいじゃっくす」ですけど、「あじゃっくす」派もいるみたいですね。 まぁ、「りなっくす」か「らいなっくす」か、みたいな物でしょうか。

Youtubeを簡単にBlogに貼り付ける方法として、ページ中央カラム上部のEmbed内のソースを貼り付けるという方法があります。
しかしこのソースには<embed>タグが使用されているので、XHtmlではNot Validなマークアップになってしまいます。

これを回避する方法はいくつかあると思うんですけど、今回はJavaScriptを使って安易に解決してみたいと思います。

1. hidedenのわ！ - 新nowaトップについて。
2. hamashun nowa - nowaのポータルTOPをXGAの人に優しくするユーザーCSS
3. --- 地球で働く日本人のブログ --- - nowaトップをハマシュン専用にするGMスクリプト
4. キリンノワ - nowaでもっとみんなのブログを読みたくなるスタイルシート
5. hidedenのわ！ - nowaいじり。

という流れ。 正直、楽しかった。 でも、やっぱりネタ度でグリモンに負けちゃうなあ。
なので、自分の中のグリモン熱が上昇中。

JavaScriptとかjQueryとか勉強中なので、勘違いしている部分があるかもしれません。 もし誤りがあったら、ご指摘頂けると嬉しいです。

4つの要素でグラデーション角丸＋リキッドレイアウト

前回と前々回では、CSSで半ば無理やりグラデーション角丸＋リキッドレイアウトを組んでみました。 この種類の角丸デザインはCSSを書く上で必要な要素の数が多くなってしまうので厄介、というのがこれまでのあらすじ。
今回はCSSだけにこだわらず、スクリプトを使ってみたいと思います。

jQuery使用

jQueryを使います。 jQueryの特徴は色々あるんですが、ノードの取得にCSSセレクタみたいな書き方ができるのがとても気に入っています。 普段CSSを書いている人にはとても使いやすいです。
今回のサンプルでは使ってないですけど、jQuery越しにCSS3のセレクタが使えたりするのも魅力です。 しかもIE5.5以上に対応。

サンプル

今回もサンプルを用意しました。 対応ブラウザはIE5.5以上、Firefox2、Opera、Safariです。 MacIEはjQuery自体が対応していないみたいです。
例によってDL版も用意しましたので、こねくりまわしてみてください。

jQuery便利すぎる

サンプルのJSソースはとてもシンプルです。
jQueryは、wrap()メソッドを使うとその要素をWrap（包むの意味。ちなみにサランラップのラップもこれ）してくれます。 例を挙げると、

$("div.entrytWrap").wrap('<div class="wrap1"></div>');

は、「<div class="entrytWrap">を<div class="wrap1">でwrapせよ（囲え）」という命令になります。 その結果、

<div class="wrap1">
 <div class="entrytWrap">
 </div>
</div>

こんな結果になります。 これでdivが一つ増えました。 あとはこの繰り返しでdivを増やして、その増やした要素に対してCSSで背景画像を指定するだけです。

サンプルの解説

サンプルでは少し工夫した書き方にしていて、量を減らしてあります（多分、工夫の余地はもっとあるんでしょうけど）。
ノードの取得はCSSのセレクタのように、カンマ区切りで複数指定が可能です（DL版に入っているkadomaru.jsのdiv.hogehogeって辺りがそれです）。

ちなみに、JavaScriptをオフにしている環境などを考えて、その場合はborderで囲われるようにしてあります。

それってどうなの？

「JSで要素を増やすんなら、HTMLに直接書いても同じじゃん」と思う人がいるかもしれません。 しかし、HTMLに直接記述するのとDOMを操作して要素を追加するのでは意味が違うと思います。
DOMを操作して追加した要素は、（例えばJavaScriptでもって行ったなら）JavaScriptがオフの場合は現れません。 HTML文書単体として見ればその要素は追加されていないと言うか、HTMLは（余計なdivによって）汚されない。
サンプルのclass名がわりと適当な感じなのも同様の理由です（見栄えを考えるとそれっぽい名前にした方がいいかもしれませんけど）。

DOMの仕様書にその辺りの説明（DOM操作によって追加されたノードの扱い、みたいな）があるかなと思って探したんですけど、見つけられませんでした（見落としてるのかな）。

とは言え、本来CSSが担当するべき「デザイン（表現）」をスクリプトで補っているのは確かで、そこはちょっとどうかなと思う所ではあります。 ただまあ、デザインを再現する際に文書上必要な要素のみで行うのが難しい（事がままある）現状では、手段の一つとして覚えておいてもよいのではないでしょうか。

おまけ

JavaScript楽しい！ これまでのHTML+CSSでは難しかった事が簡単にできたりします。 とは言ってもまだDOMごにょごにょぐらいしかできないから、「JSはDOMだけじゃ無いからね」って会社の人達にまた言われそう。
今回のサンプルもミスターjQueryのabuiさんに手伝ってもらって完成できたしなあ。

つまり何が言いたいかと言うと、hamashun.comはRoppongi.JSに超期待してるって事です！＞＜
参考：UNIXに触り初めて一応7年・・・だけど・・・。 - devlog.holy-grail.jp

関連リンク

アクセシブルなコンテンツ、ナビゲーション、フォーム のまとめ

アクセシブルなPDFとFlash のまとめ

前回、前々回の記事同様、Webアクセシビリティ ~標準準拠でアクセシブルなサイトを構築/管理するための考え方と実践~の出版記念セミナーのまとめです。

10章の翻訳をされたのは中村精親さんですが、セミナーでは渡辺さんが話をしてくれました。 内容はアクセシブルなJavaScriptについてです。
なお、便宜上この記事では音声支援技術をスクリーンリーダーと呼んでいます。
資料へのリンク

JavaScriptはアクセシビリティ的にも誤解されている

JavaScriptは、アクセシビリティを妨げる使われ方が多かった。 例えば、右クリック禁止やポップアップ・ウィンドウなど。
また、アクセシブルでないスクリプトにより、JavaScriptをオフにすると利用できなくなってしまうコンテンツが（現在でも）ある。

著者の主張

原著を書いたのはChristian Heilmann。 ChristianはWaSPのDOMスクリプティング・タスク・フォースのメンバー。

Christianは、でしゃばらないJavaScriptがよいと言う。 JavaScriptが無い環境でも得られる情報は同じで、JavaScriptが利用できる環境では更にリッチな体験ができる、というように。
（この辺、Webデザインで言うところのMOSeを連想させますね。 アクセシビリティ関係ないですけど）

JavaScriptは「振る舞い」を担当する

HTMLが構造、CSSが表現であるなら、JavaScriptは振る舞いであると言える。

RIAのアクセシビリティ

これは、書籍から離れた内容。 GoogleのiGoogleとGoogleドキュメントのアクセシビリティについて。
なお、この調査は渡辺さんの生徒さんによるものだそうです。

渡辺研究室の2007年度卒業研究「JavaScriptを利用した動的なWebのアクセシビリティ」（松田理沙）から，GoogleのRIAのアクセシビリティ問題のケーススタディを紹介．

との事。（資料１１ページより）
（セミナーでは悪い点ばかりが取り上げられていましたが、良い点もあったのでしょうか？ 気になるところです）

操作部分のHTML

ホームページリーダーを使用すると、キーボードで操作できない部分がある。 これらは内容を持たない要素と背景画像でコーディングされているので、HTML的には意味の無い存在という扱い。
他にも、Googleドキュメントにある「新規作成」というタブをクリックすると「リンクではありません」と読み上げられる（div要素やspan要素でマークアップしてあるため）。

ショートカットキー競合

Webアプリケーションのショートカットキーと、スクリーンリーダーのショートカットキーが競合してしまう事がある。 これは本質的な問題である。

追加されるHTML

Googleドキュメントでは、ドロップダウンメニューを開くとHTMLの最後にソースが追加される。 その為、スクリーンリーダーでは開いた時には読み上げられない。

動的なページ書き換え

例えば、nowaの管理画面では自動的に新着記事を表示しますが、スクリーンリーダーでは更新がなされた事を知る術がない。
WAI-ARIAのlive属性はこの問題を解決できるかもしれない。
（WAI-ARIAについては、梅垣さんの（今回のセミナーとは関係の無い）資料Ajaxアクセシビリティ～リッチ・インターネット・アプリケーションのゆくえ～が解りやすいかも）

個人的な意見

アクセシビリティ業界（？）では、JavaScriptは悪役にされがちな気がします。
hamashun個人としては、「全てのWebサイトはアクセシブルなJavaScriptを採用すべき」という必要は無いと思います。
伝えたい情報が伝えたい相手に正しい形で伝わる事が大事なのであって、HTMLやCSSやJavaScriptなどの技術はその手段であるべきだと考えます（ここで言う情報とはテキストのみならず、デザインや操作感も含みます （いわゆるUser Experienceと言えるかも））。