hamashun.com

CSS Nite Vol.12に行ってきました。
今回はVOX、WordPress、Fireworks 8と、盛りだくさんの内容でした。
以下長文です。 まとめ能力の欠如が見られます。

Daily Link

PowersetはGoogleに迫るか？

確かに、検索する時は単語だけを並べますよね。

Google、「Code Search」をお披露目

JavascriptやPHPが多く出てきますけど、CSSもヒットするようです。
少し触ってみます。

Google Code Search

・・・・・・どうやら使いこなすには、正規表現が必須なご様子。

CPSC：ソニーのバッテリーリコール、現時点ではノートPC用のみ

PSPは大丈夫みたいです？

Mac IE 5をお使いの方ごめんなさい

さすがMS。 見事な投げっぱなしジャーマンですね。

USBハムスターホイール

ほ、欲しい・・・・・・！

Note

今日は、web creators conferenceにお呼ばれしてきました。
今回はSEOが議題だったのですけど、いやー為になりました。
アクセス解析などSEO的な事は、実践を通さないと中々学べない部分だと思うので、学校だと勉強しづらいんですよね。
そういう意味で、貴重なお話が聞けたと思います。

何人かの方と名刺交換をさせて頂いたんですけど、家に帰ってから残数を確認した所、残り3枚になっていました。 危ない危ない。
今月末の、卒業制作巨大プレゼンに向けて、最終兵器名刺を作成せねば。
さてどんなデザインにした物か・・・・・・。

ちなみに、某学校の友人とバッタリ出くわしたのは驚きでした。
余りの驚きに、かなり挙動不審に陥っておりました。 あっはっは。

• CSS Nite LP, Disk 1に行ってきました（1）
• CSS Nite LP, Disk 1に行ってきました（2）
• CSS Nite LP, Disk 1に行ってきました（3）

行ってきましたCSS Nite LP, Disk 1！
これは毎月開催されているイベント、CSS niteの有料版なのですけど、実は前回のジャンケン大会で招待枠を頂いたので、無料で参加してきました！
いやーラッキーでした。

会場は千駄ヶ谷駅前の津田ホールです。
付近にコンビニがあったので、からあげをお腹に放りこんでから会場に向かいました。
少し余裕を持って行った事もあって、座席は最前列をゲットです。 最近目が悪くなってきたので、できるだけ前だと嬉しいんですよね。

講演は全部で5つあって、その誰もがWeb業界の著名人です。
5つをまとめて1つのエントリで書くと超長文になってしまうので、2回か3回に分けて書こうと思います。

• CSS Nite LP, Disk 1に行ってきました（1）
• CSS Nite LP, Disk 1に行ってきました（2）
• CSS Nite LP, Disk 1に行ってきました（3）

昨日の続きです。
会場では青山ブックセンターが出店してて、講演される方の著書などを置いていました。
パラパラっと見てみたのですけど、やっぱり買う時は本腰を入れてチェックしたいので、特に買い物はありませんでした。

他にも、FirefoxやOperaの人がブースを出していました。
ニンテンドーDSのOperaは触ってみたかったのですけど、時間が無くて断念。 残念。

• CSS Nite LP, Disk 1に行ってきました（その1）
• CSS Nite LP, Disk 1に行ってきました（その2）
• CSS Nite LP, Disk 1に行ってきました（その3）

3日間もかけたレポートも、いよいよ最後です。
って言うか引き伸ばしすぎです。 ごめんなさい。

時間が結構押していたので、休憩時間は当初の予定から大幅に短縮されて約15分でした。
お腹が空くと眩暈がする体質の僕は、全力疾走で近場のコンビニへ行って、肉まんを胃に詰め込みました。
そして戻ったら、サービスで用意されたタリーズコーヒーが完売していました。 ショック。

準備に忙しくて、前日でのお知らせになってしまいました。
デジタルハリウッド クリエイターズオーディションに出場します。
これは、クラスの中から選抜された卒業制作の作品を、たくさんの人の前で晒しつつプレゼンをする、という物です。
Web業界では人材不足が叫ばれている（らしい）ので、これ幸いと企業の方が大勢いらっしゃるのです。

会場はデジタルハリウッド東京本校になります。
前日でのご案内となってしまいましたけれど、お時間の都合が付く方は、是非いらしてください。
もし、会場でお会いしましたら、どうぞよろしくお願いします。

先週金曜日、27日に行われたクリエイターズオーディションは無事終了しました。
お越し頂いた方にはお礼申し上げます。

僕個人としては、練習の時よりも上手くいって一安心です。
序盤のツカミとしてウケを狙ったポイントで、良い感じに笑いが起こったので緊張がほぐれたのかもしれません。
ちょっとネタに走りすぎたかな、とも思ったのですけど、企業の皆様から頂いた評価シートでも、概ね好評だったようで嬉しい限りです。

明日からは、各企業さんからの詳しいお話や面接等で忙しくなると思います。
これまでとは違った楽しさにワクワクしています。

行ってきましたXHTML+CSS (r)evolution, 2ndに！
最近はCSS niteにも行けてなかったので、久しぶりのイベント参加です。

XHTML+CSS (r)evolutionの講演は、名著Web標準の教科書を執筆された益子さんです。
Web標準の教科書（以下コロコロコミック）や雑誌Web creatorsの連載には、いつもかなりお世話になっているだけに期待も大です。

今回のお題はCSS3のカタチとナカミ。
CSS3の情報で日本語の物はまだまだ少ないので、これはかなり嬉しいです。

今回でひとまずの区切りとなるCSS Nite。 数えればなんと18回目でした。
月イチ無料開催はこれで終わりになり、今後は様々な形態での開催となっていくようです。

今回の内容は第一部が来賓の方3人による、割と告知的な内容。 第二部が主催の鷹野さん（株式会社スイッチ）による「Internet Explorer 7対策」という物でした。
イベントレポートと自分の為の覚書の、両方の意味を込めて記事を書いておきます。

第一部

WebSig24/7、ネクサス　アドバンスセミナー、W2Cから、3人のゲストが、次々にイベントの告知や団体の説明をされました。
CSS Niteは割と実装側の立場のイベントですけど、そうではなくてディレクション側のイベントもあったりで、そちらの方も興味を惹かれました。

第二部

さて、第二部は鷹野さんの「Internet Explorer 7対策」です。
まだまだシェア的にはIE6が多いんですけど、今後はIE7が主流になっていくのは明らか（プリインストールされるから）。 つまり、今はまだIE7対応するかを考えるという段階ですけど、すぐに対応が必須になるという事でした。

第二部では更に、マイクロソフトの人が駆けつけてくれて、鷹野さんや会場からの質問に答えて頂けるなど貴重な情報を聞く事ができました。
（ほぼ？）オフィシャルな情報という事で、本当に貴重でした。 以下にメモできた限りを書いてみます。

• VistaとXPのIE7は、レンダリングは同じ。 セキュリティ的には違う
• スタンダードスタンドアローン版IEは、MS的にはノータッチ。 知りませーん、というスタンス（通行人さん誤字のご指摘ありがとうございます）
• IE6からIE7への自動アップデートの日取りは、現在未定
• 条件付コメント（Conditional Comments）は、あくまで最終手段。 推奨している訳ではない
• IE7のズーム機能は、CSSぽい何かをほげほげして実現しているらしい。 次Ver,では更に進化したズームになるかも
• メイリオの日本語は、やっぱり斜体にならない
• フォントがデフォルトでＭＳ　Ｐゴシックなのは、現在のサイトと表示が違ってくる可能性がある為

こんな感じです。 VistaとXPの違いとか、MSの中の人から直接聞けるとやはり安心感が違います。
ズーム機能の「ほげほげ」の辺りは、企業秘密的内容なのか少し言葉を濁されていたのが余計に気になりました。 逆に調べてみたくなってきますねｗ

IE7で変わる事

• XML宣言が使いやすくなる
• a要素以外にも:hover擬似クラスが使える
• pngのアルファチャンネルやmin-プロパティシリーズ、属性セレクタなど、色んなテクニックが使えるようになる
• !importantを正しく理解する
• BOXの勝手拡張が修正

こうして並べてみると、その他のブラウザにかなり近づいてきた気がしますね。
「BOXの勝手拡張」というのは、IE6なんかで内容の量に応じてサイズが勝手に変わるバグの事で、分かりやすい言い方だなと思いました。

clearfixってどうなん？

BOXの勝手拡張が修正された事によって、IE7にはいわゆるclearfixなどで対応する必要が出てきました。
このclearfixについては色んな意見があるようですが、鷹野さん的には「運用の方が大事なのでは」という感じなようです。
これについては僕もちょっと気になっている部分なので、今度別エントリで書いてみたいと思っています。

2007年のfont-family

僕も先日Vista後のメイリオ及びfont-familyについてという記事を書いたのですけど、やはりこれは皆さん気になる部分みたいです。
鷹野さんが提案するfont-familyは以下の物です（見やすいように改行しています）。

font-family:
 "メイリオ",
 "Meiryo",
 "ヒラギノ角ゴ Pro W3",
 "Hiragino Kaku Gothic Pro",
 "ＭＳＰゴシック",
 "Osaka",
 sans-serif;

font-familyの指定内容についてはさておき（色々と好みが入ってくる問題なので）、印象に残ったのはsans-serifは半角の￥マークがバックスラッシュになるという事。 そ、そうだったのか。
他にもMacで見るVerdanaは微妙に太く見えるなど、細かいけれど気になる部分の豆知識が嬉しい感じでした。

プレゼント貰っちゃいました！

恒例のジャンケン大会では、Dreamweaver プロフェッショナル・スタイルを頂きました！
熟読の上、星5つでamazonレビューを書きたいと思いますｗ

そしてさらに、終了後にプレゼントを受け取る際に、更なる嬉しい出来事が･･････！
でも長くなってきたので、次回に続きます。

っという訳で前回のエントリの続きです。
今回は、わりと単純なレポート&雑記的内容です。 いわゆるただの日記ですごめんなさいごめんなさい。

お礼とか言ってみた

ジャンケン大会で勝ち取った本を頂いた時に、どうやらOperaの人達が来ている事が分かりました。 盗み聞きもとい聞こえてしまった他の人の会話で。

ここであれです。 キュピルリーン！ って頭の中に閃きが走りました。 ニュータイプのごとく。
Operaの人→Kurumaさんは最近Operaで働いているらしい→いるかも！ という事で行動力MAXで話しかけてみました。

Shun：あ、すいません。 Operaの方と伺ったんですが･･････。

Operaの人：あ、はい、そうです。

Shun：失礼ですが、Kuruman.orgの方とかいｔ

Kurumaさん：あ、私です。

ご本人ｷﾀー！ という事で、スターハックの件で色々と教えて頂いた事のお礼を言ってみました。
ちょい緊張してた上にエレベータを待たせていたので、ちゃんとお礼になっていたか微妙ですけれど。

懇親会に出てみた

その後は懇親会に参加させて頂きました。
これまでも終了後の懇親会は開かれていたんですけど、実は初参加です。 ザギンで飲みだなんて、贅沢なシチュエーションじゃないですか！

懇親会では多数の方と名刺交換をさせていただきました。
デジパのリョウケンさんからはコメントもいただいたりで、いやもうこんなペーペーにありがとうございます！
持っていった20枚の名刺は、あっという間に配り終えてしまいました。

懇親会ではミニプレゼンみたいなのがありました。
スピーカーの方達の個性がかなり強く出ていて、参考になるなあと思いました。
[bA] Business Architects Inc.の人のスピーチでは、指差しでスライドを指していたので、通称「あの棒」を差し出してみたり（身内ネタすみません）。
他にもWeb界隈でよく名前をお見かけする方と話ができたり、鷹野さんにも色んな方を紹介して貰ったりと、充実しすぎな時間でした。

CSS Nite 卒業式

そして宴もたけなわ気もそぞろ（by蟹の貴公子様）になった頃、サプライズイベントのCSS Nite 卒業式が行われました。
花束やらメッセージカードやらがプレゼントされた後に、鷹野さんの愛娘マリンちゃんからのビデオレターが！ 会場もなごみまくりんぐでした。

終了後、一部の方は3次会に行かれたようですが、さすがに終電が怖かったので、僕は素直に帰る事にしました。
いやー、最高の夜でした。

オマケ：
5月12日に東京・神田で、コーディングに特化したCSS Niteが開催されます。
有料版ですが、コーダーにとっては参加必須なイベントになりそうです。

CSS HappyLifeさんで、コーディング大会みたいなのやりたいなぁ～というエントリが公開されてから、物凄い勢いで反響が集まっています。
自分の実力を試せるのはもちろん、他の人のコーディングを見られるのも凄く勉強になりそうですよね。

これから仕事が忙しくなりそうな予感がしますけど、「なあに、かえって耐性が付く」という心意気で是非参加したいでっす。

CSS HappyLifeさんで、ちょっと前から告知されていたコーディングコンテスト。 ついに正式に開催が告知されました！
これはもうコーダーのみならず、全Webクリエイターが注目ですね！

ちなみにこのコンテスト、CSS Niteのコーダー特集とも言うべきCSS Nite LP, Vol.3 "Coder's High"との連動企画という事で、審査員の方々も超豪華なメンバーとなっています。
そう、告知ページをクルクルーッと下に降りていくと超豪華な審査員の名前が･･････。 名前が･･････。
（わかりやすいように画像で引用します）

　　　(　ﾟдﾟ)
　＿(__つ/￣￣￣/＿
　　　＼/　　　　 /
　　　　￣￣￣￣

　　　( ﾟдﾟ )ミ
　＿(__つ/￣￣￣/＿
　　　＼/　　　　 /
　　　　￣￣￣￣

えーゴホン。 余りの衝撃に思わずAAを探してきてしまいました。
という訳で、僭越ながら（全くだ！）ワタクシ浜 俊太朗、コーディングコンテストの審査役を務めさせて頂く事になりました！

事のきっかけはCSS Nite Vol.18での事。
その日のプレゼントでドリーの本を貰った僕は、一言お礼を言おうと主催の鷹野さんに話しかけたんです。

（中略）

それから色々あって、こんな大役を頂く事になりました。
自分なりの目線でもって、みなさんの作品を拝見させて頂こうと思います。 よろしくお願いします。

以下はオマケ。

CSS Nite shuffleに行ってきました！
このイベントは、CSSという名前が付いているにも関わらず、CSSだけでなくデザインだとかディレクション的な事もやっちゃおう！ といった目的があるそうです。　shuffleだけに。

エコなデザイナーになろう

長谷川泰久さんのこの講演は、CSS Nite in 大阪の時から聞いてみたいと思っていたので、個人的にラッキーでした。
地球環境問題とWeb制作の問題を、からめて話すという進め方が新鮮でした。

アウトプットするという事を特に強調されていたと思うんですけど、僕もそう思います。
やっぱり人間、本を読んだだけじゃあ中々身につきませんよね。

ちなみに、「すごい病院」で検索すると、本当にすごかったです。

Apollo、インストールから向かうビジョンまで

Apolloに関しては、これまでは何となく分かったような分からないような感じだったのですけど、この講演で大分理解する事ができました。
Apolloを一言で表すなら、Flashプレーヤーのおばけなんだそうです。 HTMLやPDFもできるFlash、みたいな。

ブラウザを使わずにWebと関わると言えばiTunesが代表だと思うんですけど、あれってOSごとに違う作りらしいんですよね（ソフトウェアに詳しくないんでアレですけど）。
でも、ApolloならFlashやHTML、JavaScriptで開発ができるので、結果的にクロスOSが簡単に実現できるというのも利点だとか。
うーん、なんだかちょっと、楽しそうです。

そもそもWPFとは？ WPFで何ができるのか？

すみません。 今日までWPFって知りませんでした。
何やらApolloとライバル関係になりそうですけど、こちらは3Dに強いんだとか。 なんだかプレステとセガサターンを彷彿とさせますｗ

僕個人としては、WPFよりはApolloの方がとっつきやすいかな、と思いました。 3Dは敷居が高いような感じが。

リッチコンテンツ制作に求められるセンスとスキル

驚いたのは、A BATHING APEがこれまでWebサイトを持っていなかったという事。 そうだったのかー。
このサイトが、普段Webに関わっている立場からするとかなり驚きなつくりで、トップページにはexeをDLするボタンがあるのみ。 それを実行する事で、コンテンツが見られるという仕組み。

Webの常識ではかなり型破りで危険な作りですけど、BAPEのファン層を考えると、その心配は余りないような気もします。
多分、雑誌で見たり友達からの口コミで利用する人が多いんじゃないかなあ。

感想みたいの

shuffleは、最初にサプライズコンテンツとして弦楽コンサートがあったり、途中でお客さん同士のコミニュケーションを取りやすくするしかけがあったりと、普段のCSS Niteとはちょっと違った雰囲気でした。 そもそも会場もクラブですしｗ
次回開催も楽しみです。

CSS Nite LP, Disc 3 -Coder's High-の連動企画、コーディングコンテストが開催中です。
応募すると-Coder's High-の参加費が2.000円引きになる特典付き！ 締め切りは今週末22日（日）の24時ジャスト！
しかも今から参加すれば、普段の業務のようにコーダーに仕事が回ってきた時点で納期が直前という、よりリアルな状況で参加できます！ もちろん良い意味で。

「えー、でもPSDデータしか公開されてないしー。 私Fireworks使いなのよねー」というあなたも大丈夫。
hxxk.jpの真琴さんが、PNGデータを作成してくれました！
2007-04-08T17:06:26+09:00 でページ内検索するとわかりやすいです。

審査基準

さて。
色々とあって僕も審査役として参加させて頂いているんですが、ここで僕なりの審査基準を書いておきたいと思います。

審査基準を満たす

とりあえず基本という事で。 審査基準に関しては平澤さんの告知ページを参照してください。

お客様の事を考えている

デザインを見ると、どう見ても企業サイトな訳です。 なので、お客様の目的を叶えるために作られたサイトが良いと思います。
その辺りで提案力が重要になってくると思います。

CSSハックの使い方

CSSハックは使われているのか。 使われているならどのハックを使っているのか。
使っていないなら、不自然なHTMLになっていないのか、という点を見たいと思います。

こんな感じでしょうか。
ちなみに賞品にある、各審査員ごとのプラスアルファは、「コーディングがしやすくなるグッズ」にしようかなあとか思っています。
皆様のご参加をお待ちしています！

CSS Nite LP3が終了しました！
例によって、ちょっとしたレポートを書きます。 自分用まとめの意味合いが強いので、行ってない人は解りにくいかもです。

いきなりおまけ

つーか長えよ！ って言う人用に、短縮版を追記部分に用意しました。

会場の様子

ズドーンと大きいホールに、机と椅子が整然と並んでいる感じでした。 建物の印象も近代的でオサレな感じです。
一つの長机に椅子は二つなので、かなりゆったりと過ごす事ができました。

益子さんのセッション「ザ・コーディングの美学」

3つの観点、「真・善・美」に沿って、コーディングの美学を語られました。
「真」は仕様通りかどうか。「善」は、例えばプログラマーも使いやすいソースなど、良心的な事。 そして「美」はインデントの入れ方やコメント、改行位置などとの事でした。

この中で僕が注目したのは、「美」の部分でした。
「美」に関しては、個々人の意識の差が出やすいと思います。 そういった部分で益子さんのご意見を聞けるのは貴重かなーと。

これまでにも、CSSの値やセレクタが長くなってしまった場合に改行する、というのはよく見かける手法でしたが、HTML側のタグを改行してしまう、という考え方は斬新でした。 これを実行するには、改行して良い箇所とそうでない箇所を熟知していなければならないので、「真」の知識も必要とします。
CSSの値も、font-familyプロパティやbackgroundプロパティなど、値が長くなりがちなものは改行するのも益子さん流の特徴みたいです。

最後にあったのが、NerdとGeekの話。
端的に言えばNerdは使えないオタクでGeekは使えるオタク。 みんなでGeekを目指そうよ！ という感じ。
その為には「真・善・美」を意識して、自分の仕事に誇りとプロ意識を持つ必要がある、みたいな。

ちょっと話は外れるんですけど、Perlハッカーって言うと「Perlの凄い人」って意味合いですけど、「CSSハッカー」って言うと、どうしても「CSSハック」が意識に出ちゃう気がします。
「CSSの凄い人」って、何て呼べばいいんですかねー。

小久保さんのセッション「フィロソフィー・オブ・コーディング」

フィロソフィーです。 哲学です。 なんだか難解そうなタイトルですけど、とても勉強になりました。

Web製作者の価値は、Web業界の価値に左右されるというのが、重要なポイントでした。
簡単に言うと、「サッカー日本代表とセパタクロー日本代表だと、どっちが稼ぎが多いか」みたいな感じでしょうか？
例え同じ日本代表であっても、サッカー業界の方が大きいので、稼ぎも多いはず。 多分。（セパタクラーの皆さんごめんなさい）

で、業界の価値はどのように決まるのかという事を考えると、それは製作物一つ一つのデキ。 つまり製作者一人一人のがんばりだという事です。
転じて、コード（HTMLだけでなく、全てのコード）が悪いとWeb業界の質が悪くなるという事に。

Web標準の正体についても言及されていました。
Web標準の目的とは、良いコードを作る事、ただそれだけ。 それ以上でもそれ以下でも無いとの事。
「これはWeb標準に含まれる」「いやそれは含まれない」という議論はナンセンス。 という意見も。

では、なぜ、正しいコードを書かなければならないのでしょうか？ 考えてみよう。という形で終わりになりました。
ちょっと前に、XHTMLを選択する理由という話題がありましたけど、これの回答にもなりそうです。

鷹野さんのセッション「Dreamwaverのコーディング機能再点検」

僕は基本的にエディターを使うヒトなので、ドリーは使わないんです（会社のPCにはインストールすらされていない）。
でも、コードヒントのカスタムとかは参考になりました。 今度自分のエディタでもやってみよう。

神森さんのセッション「Liveコーディング（A）」

ほぼ全工程において、ドリーのデザインビューを使用して進めていました。
これは「どの操作をしたらどういった結果になるか」を熟知しているからこそ、できる事ですよね。 でなければコードとかグチャグチャになるでしょうし。
例によって僕はドリーを殆ど使わないので、逆に新鮮な視点で見る事ができました。

ヤスヒサさんのセッション「Microformatsで上質コーディング」

来ました長谷川恭久さん。 ヤスヒサさんのプレゼンはテンポがよくて、グイグイ引き込まれます。 そしてお題はMicroformats。 期待せざるを得ません。

プレゼンは、「Microformatsとは何ぞや？」という所からはじまります。
「マッシュアップ」が最近は普通に聞く単語になっています。 異なるWebサイトからデータを持ってきて合体させちゃったりするアレですね。
それにはAPIを使う訳ですけど、ちょっと敷居が高かったりします。

その点Microformatsは超簡単です。 現在あるタグに属性を追加するだけで利用できます。
APIのような「製作者による大掛かりなコンテンツのマッシュアップ」はできませんけど、「各ユーザ（閲覧者）による細かいデータの抽出」をが行う事ができます。
この辺りの詳しい話は、ヤスヒサさんのサイトで資料が公開されているので、そちらを参考にされた方が、より理解が深まります。

余談ですけど、打ち上げの時に「nowaにはMicroformatsを実装しないの？」というお話を頂きました。
実は今回のプレゼンでかなり面白そうだと思ったので、もう少し調べてみたいと思います（あくまで現段階では個人的な意見であり、今後実装されるかどうかは全くもって別問題です）。

太田さんのセッション「プロはこう使う！Another HTML-lint 徹底活用」

みんながお世話になっている（かも）のAnother HTML-lintのお話です。

点数を気にする余りに逆にアクセシビリティが下がってしまう、という件は、バリデータやlintを使い始めた頃にはありがちですよね。
結構、多くの人が通ってきた道かもしれません。
点数はあくまで目安にして、そもそもの目的を見失わないようにしたいですね。

河内さんのセッション「Liveコーディング（B）」

今度はドリーのコードビューを駆使する、河内さんのLiveコーディングです。
急遽、bAのお二人に挟まれてコーディングをする事になりました。 な、なんてプレッシャーな・・・！

特に勉強になったのは、ナビゲーションなどから全体のサイト規模を想像して作業を進めるという部分。
確かに、全部のデザインが上がってからコーディングがスタートする事ってあんまり無いですよね。 後になってあたふたしない為にも、これは意識したいです。

あとは、背景画像をスライスする時に小さくスライスしすぎると、IEではCPUに負荷がかかるというのは初耳でした。
これは早速、社内に広めたいところです。

コーディングコンテスト表彰・講評

本当は3分くらい時間がもらえる予定で、喋る事を考えていたんですけど、時間が押していたのでカットされましたｗ
賞に選ばれた作品については、平澤さんの記事、浜賞☆コーディングコンテストVol.1｜CSS HappyLifeで講評が掲載されています。

僕のBlogでは、惜しくも賞には選ばれなかったけれど「ここが良い！」と思った作品については、今後講評を載せていきたいと思います。

おまけ2

その他打ち上げの時の事などは、nowaに書く予定です（雑記です）。

7月15日、16日は、みんなでアキバへレッツゴウ！
という訳で、Web標準に関連したイベントです。

開催要項を見ると、物凄い数のセッションがあります。 同時進行もあるので、全部に出る事は不可能です。
しかもセッションは登録制な模様。 つまり、受けたい授業を決めないといけないんですね。 選択制の授業みたいで、何だかわくわくしてきますｗ
ちなみに、参加者には後日、音声データのダウンロードがあるようなので安心です。

チケットの販売は6月1日からです。
6月中旬頃にはセッションの登録が開始されるようなので、人数漏れしないように、公式ページのRSSを登録して、小まめにチェックしておくと良いのではないでしょうか。

多分、またついったー方面でも何かあるんじゃないですかねー。 と無責任な期待をしてみたり。

既にあちらこちらで報告が上がってますけど、ついったー発の眼鏡オフに行ってきました。
このオフはcremaさんのつぶやきが発端で、何故か「眼鏡or伊達眼鏡orサングラスorマッキー眼鏡 な人達でオフをやろう！」という流れに。

「オフ会やろうか？」という段階から1週間経たずに開催されるという、超スピーディーな展開でした。
twitterっていう場的に、それくらい軽いノリの方が「らしい」ような気もしたり？

集合場所は眼鏡屋

集合場所は渋谷マークシティの眼鏡屋ZOFF。 安い割りにオサレなフレームを扱っている店です。
Shunさんは露天で売ってるような1000円くらいの伊達眼鏡しか持っていなかったので、ここで新調しました。 猫をイメージソースにしたフレームだとか。
色はもちろん赤。 色々と3倍です。

あと、UK君に訳あってのわTシャツを持っていきました。
実物の写真は彼のBlogでどぞー。

会場はベルギービールの店

会場は、道玄坂パク森の隣にあるベルギービールの店、Hemel（ヘイメル）でした。
ここがかなり当たり。 大当たりです。 渋谷とは思えないレベルの高さですよ。
料理の味はもちろん、接客もマニュアルに囚われない系で大満足でした。 今度個人的に行こうっと。

2次会はダーツ

2次会はダーツでした。
Shunさんダーツとか人生で初だったんですけど、その割にはかなり楽しめました。 狙いの付け方が全然分からなくて、勘だけで投げてましたけれど。
それにしてもUK君の空気の読めなさは異常。 もうちょっとこう、なんだ、ほら。 年上を立てるという事をだね。

その他

• twitterオフ用の名刺を用意している人多し
• frickrの写真を名刺にしてくれるやつは格好良い（海外のサービスらしい）
• ベルギービールの種類の多さは異常
• kengoさんからSkype Me!のステッカーを貰った（ありがとうございます！）
• 時価の魚は釣る所から
• Katsuoとんのダーツの命中精度も異常。 若さか？ 若さなのかっ？

まとめ

ついったー関連のオフは初参加だったんですけど、かなり軽いノリで集まれていいですね。
今後も面白そうなオフがあったら参加したいです。
そしてcremaさん、かなり突貫で大変な幹事役お疲れ様でした！ 楽しかったです。

おまけ

ﾌﾞｰﾝがビールの販売を始めたようです。

開催まで1週間ちょいとなったWeb標準の日々ですが、いよいよセッション登録が開始されました。
追記：ここで登録URLを掲載していましたが、事情により削除しました。 アドレスはＷｅｂ標準の日々からのメールを参照してください。

それと、会場周辺の簡単な地図も公開されているので、土地勘の無い人は事前にチェックしておくと当日になって慌てなくて済みます。

関係ないですけど、最近はアキバの周りに飲食店増えましたよね。 打ち上げの店には困らなそう。

超長いんでショートカットメニュー作りました。
あと、JavaScriptの素人が書いてます。 あちこち間違ってたらごめんなさい。

• マークアッパー・デザイナー向けJavaScript入門
• マークアップエンジニア・HTMLコーダー向け、Yahoo UI Library活用術
• Google Gears入門
• JSの使いどころ
• liveプレゼン
• 猿でもわかる GreaseMonkey
• Firebugの話
• 総括

Twitter関連でお世話になっているukstudioが、初心者向けJavaScript勉強会を主催してくれたので、モリモリ勉強してきました！
会場は株式会社ノッキングオン様に提供して頂きました。 ありがとうございます！
僕は行ってなかったんですけど、モバイル勉強会の時もお世話になったそうです。

マークアッパー・デザイナー向けJavaScript入門

資料公開（補足も必見）

トップバッターのUKは、JavaScriptの基本をざっくりと語ってくれました。
入門書に書いてあるような内容が中心でしたけど、疑問に思った事をすぐに聞けるという環境は良かったです。
赤い髪の人の適切なツッコ・・・補足もありましたし！

基本的な事

• CDATAの内容は、XML的には<や&を参照しなくて良い（この辺、今度じっくり調べたい）
• 「_」は、海外ではアンダースコアと呼ぶ
• リテラルとは、文字列とか、trueとか、nullとか、直接値を書く事
• 普通の配列は、数字で管理する
• 連想配列は、文字列で管理する
• 普通の配列も連想配列も、やってる事は同じ。 ただ、複雑な所では、違う事も出てくる。
• %は、「割った余り」という演算子
• >=と<=は、以上以下という演算子
• &&は、演算子同士を比べたりして、両方ともtrueならtrueを返す
• ||はどちらかでOK

ローカル変数とグローバル変数

変数を定義する時にvarを付けたりと付けなかったりなのは、ちゃんと意味があったらしい。
関数のなかでvarを付けて定義すると、その変数はその関数内でのみ使える変数（ローカル変数）になる。
関数の中でvarを付けずに定義すると、それは関数の外でも使える変数（グローバル変数）になる。

var a = 1;

function hoge () {
  a = 2;
}

functionの中のaはグローバル変数なので、最初のaに代入された1は上書きされる。

var a = 1;

function(){
 var a = 2;
}

functionの中のaはローカル変数なので、最初のaに代入された1はそのまま。

オブジェクト志向

ごめん、よくわからなかった！
後半の_tad_さんの説明がフォローしてくれているので、そちらをどぞー。

DOMについて

ノードとは、HTMLで言うところの要素みたいな感じ。

<a href="index.html">Top</a>

この場合、<a>が要素ノード、href="index.html"が属性ノード（属性と値の両方を含めるぽい？）、Topがテキストノードとなる。
もちろん、属性ノードは属性の数によって増える。

IE様は改行（br要素ではなく、単なる改行）もノードとしてしまうらしく、ノードの数がブラウザによって違う、という事態になるとか。
まったくもうこれだからＩ（ｒｙ

まとめ

• 基本的な事を喋ってくれた
• UKはいじられ愛されキャラ
• 準備とかお疲れ様！

マークアップエンジニア・HTMLコーダー向け、Yahoo UI Library活用術

資料公開

YUIを語って貰うならこの人しかいないッ！ 紫色の何かをたずさえ来てくれた―――!!! （いや今日は無かったけど）
という訳で、HolyGrailさんが初心者向けに解説をしてくれました。
ちなみに、プレゼン終了直後に資料を公開されていました。 早すぎですｗ

YUIを使うメリット

• ブラウザウィンドウの表示領域（ツールバーとかを除いた、純粋な領域サイズ）の取得
• class名でelementを取得できる
• 座標の取得
• 他にもいっぱい
• これらをクロスブラウザでやってくれる！
• しかも、自分が書くのは超シンプルなコード

多分、他のライブラリにも共通する事だと思うんですけど、ライブラリを用意さえすれば、後はそれを使うタイミングなどを指定するだけで良いみたい。
マークアップエンジニア向けに説明すると、CSSファイルのコンポーネント化の感覚に近い物があるかも？（それの是非はここではともかく）

あと、今回の資料のCSS部分は、Holyさんの後輩のマークアップエンジニアさんが担当されたそうです。
後輩さんとは、本当ならこの前お会いできるはずだったんですけど、事情により流れてしまいました。
近い内にお会いしたいと思いまくりです。

まとめ

• YUIは、色んな便利をクロスブラウザで実現してくれる
• とにかくまずはさわってみよう！
• 英語が読めない人はYahoo UI Library リファレンスを見るといいかも

Google Gears入門

makotokagaさんは、少し前から話題になっている、Google Gearsに関する事を喋ってくれました。
・・・んですけど、すみません！ ぶっちゃけ僕には難しすぎました！
理解できた事と言えば

• AdobeのAIRはアプリケーションぽさがあるけど、Gearsはあくまでブラウザベース
• オンラインでデータをキャッシュして、オフラインで見られる
• データはSQLiteで管理される
• SQLiteという、現在普及している技術を使う事によって、みんながいきなり使いこなせる

という事くらいでした。 ううーん、すみません精進します。

JSの使いどころ

moさんのプレゼンは凄かったです。
何が凄いって、終わった後のマークアッパー・デザイナー達の目の輝きとでもいいますか。
いったい何が彼らをそうさせたのでしょうか。

moさんのプレゼンはJSの使いどころという事で、「JavaScriptの使い道はWebだけじゃないんだよ」という事を語ってくれました。

ブックマークレット

SBMやtumblrでおなじみのブックマークレット。 これはJavaScriptで作る事ができる。
どうやら割と簡単に作れそうな感じ。

Firefox拡張機能

Firefoxの拡張機能を作るには、XUL(ズール)という、XMLベースの言語とJavaScriptを使う。
簡単に言うと、DOMをJavaScriptで操作するように、XULをJavaScriptで操作するんだとか。
これも手を出してみたい・・・！

Flash

ActionScriptからJavaScriptを、またその逆を呼び出す事ができる。

RIA

リッチなインターフェイスのアプリケーションを作れる！（すみませんここ聞き漏らしました）

DreamweaverやPhotoshopの拡張機能

これが凄かった！ 特にPhotoshopの拡張機能が紹介された瞬間に、マークアッパーとデザイナーは今までの苦労が走馬灯のように流れた事間違いなし。

moさんが今回紹介してくれた拡張機能は、『psdファイルからhtml要素やhead部分など最低限の構成と、素のテキストを吐き出してくれる』という物。
つまり、psdファイルからテキストをコピペする必要が無くなる訳で。
いやもう本当に、プレゼンが終わってから、一斉にみんなが同じ質問をしたのには笑いましたｗ（公開はしてくれるんですか？みたいな）

デスクトップアプリ

JavaScriptで作ったTwitterクライアントを紹介。
多分、見た目部分はCSSなんかを使っているのかな。 その辺り、なんだかAIRとも共通する便利さがあるのかも。

まとめ

• JavaScriptはWebだけの技術じゃない
• まずはブックマークレットから始めてみるといいかも
• Photoshopの拡張機能が超スゴイ

なんだか、Adobe製品のスクリプトには、まだまだ面白く便利にできる余地がある気がします。
エンジニアさん達が余り使わない分野だから（？）余計に未開拓なのかも。

liveプレゼン

_tad_さんがやってくれたのは、ほぼ真っ白なメモ帳を用意して、ライブに書き込んでいくというliveプレゼン！
いやあこの発想は無かったですわ。
内容は、プログラミングの基礎の基礎、みたいな感じでした。

キーワードは「めどい」。
なにせ「めんどい」とタイプするのすら「めどい」くらい！

構造化

• 順番にやる
• 条件を見る
• 繰り返す

プログラムっていうのは、基本的にこんな事を書いていく。 例えば次のコードなら、

if(uk == "20") {
 while(n <= 20) {
 document.write("hogehoge");
 n++;
 }
}

もし、ukと文字列20が等しければ（条件を見る）、
nが20になるまで文字列hogehogeを出力する（繰り返す）
となる。 順番にやるっていうのは、上から順に降りてくる事（・・だったはず）。

オブジェクト指向

実はめどくない。
考え方としては、「ナイフは野菜に使うと便利だけど、人に使うのはNG。 じゃあナイフは人に使えないようにしよう」という物。
JavaScriptで考えると、「機能によって、使える場所を制限しておこう」という感じ？

つまり、覚える事は少なくて済む（制限によって区切られた物ごとに覚えれば良い？）

ライブラリ

ライブラリとは、図書館のような物。
司書（エンジニア）さんはその本の種類（そのライブラリは何なのか）を知っておけばよくて、本の内容（コードの内容）までを全て熟知しておく必要は無い（知っておくに越した事はないだろうけど）。

また、既に世界各所で使われているので、不具合がおきづらい。
バグがあっても、報告をすれば直してくれる（事が期待できる）。

また、ライブラリのコードは生きた見本である。
まずは実際に使ってみて、動きなどを体験してからコードを読むと、理解が深まる。

CSSのcommon.cssは、ローカル性が強い。
対してJavaScriptのcommon.jsは、グローバル性が強い。 との事。
これは使いまわしがしやすいか否か、という意味。
（まあ、CSSはHTMLによって変わってくるので、結局は文書次第になってしまうと思います）

まとめ

• liveプレゼンメソッドすげー
• 例え話が解りやすい！
• やっぱり大事なのは使ってみる事

猿でもわかる GreaseMonkey

資料公開

赤い髪の人、Yoshioriさんのプレゼンは、グリモンに関する事です。
多分GreaseMonkeyだから「猿でもわかる」なんだと思うんですけど、誰もツッコめませんでした。

Yoshioriさんのプレゼンは、また強烈でした。
スターウォーズのライトセイバーをポインター代わりに進行をするんですけど、ご本人のキャラもあいまって、爆笑しながらも理解しやすい内容になりました。

グリモン、最初の部分の書き方

// ==UserScript==
// @name          hamashunGreaseMonkey20070714
// @namespace     http://www.hamashun.com
// @include       http://auth.livedoor.com/*
// @version       1.0
// ==/UserScript==

• @nameは、可能な限りユニークな物にしておく良い。 これがかぶると、動作もかぶってしまう恐れがある
• @namespaceがあるので、もし万が一@nameがかぶっても、一応は安心？ とりあえず自分のドメインとかにしておくと良い
• @includeは、適用するサイトの事。*はワイルドカード
• バージョンを書いておく

冒頭に書くのは大体こんな感じで、あとはJavaScriptで書いていくだけのよう。

細かい点いろいろ

• グリモン専用の関数が用意されている
• eval()で、外部スクリプトを読み込む事ができる・・・が、セキュリティ的に余りお勧めできない
• LDRは、グリモンを組み込みやすいように工夫されている（そうなのか！）
• セキュリティ的に危うい物も作れてしまうので、注意が必要
• とはいえ、作ったらバンバン公開しよう！ 優しい先輩達が優しくDisって教えてくれるよ！

JavaScriptクイズ

a = 5 + "3";
b = 5 * "3";

それぞれ、変数にはどんな値が代入されるのか？

答えはaが53で、bが15。
aは普通にそのまんまなので割愛。
5 * "3"は、数値と文字列は掛け算できないので、いい感じに判断して数値同士として扱ってくれる。

var a = 10/3;

ではこれは、どんな値がaに代入されるのか？

答えは3.3333333333333335
他の言語では小数点以下は扱わない事が殆どらしい。
JavaScriptは整数型を持っていないので、このようになるんだとか。
ちなみに、3.3333333333333335に3を掛け算すると、空気を読んで10としてくれる。

var a = new array;

a[1.5] = "foo";

alert[1.5];

小数点を解するという事は、配列に小数点以下の数値を指定する事もできる。

alert(2 & 3 == 1);

（この辺りからかなり難しくなってきて、メモったコードも怪しくなってきます）
この結果出力される値は？

答えは「0」
&演算子と==演算子だと==演算子の方が優先されるので、まず 3 == 1 でfalseが返る。
falseは0として扱われるので、 2 & 0 という事になる。
&演算子はビット演算子と言って、ビット（0と1）の世界として比較する。
その結果により、0が出力される。
なお、出力された0はビットの世界の0（つまりfalse）ではなく、 3 == 1 の結果の0である。

他にもいくつかの問題があったんですけど、メモがうまく取れていなかったり、再現ができなかったりで断念しました。
きっと他の誰かが書いてくれるはず・・・！

まとめ

• JavaScriptはツンデレ
• はて☆スタの32分の1がYoshioriさんによるもの
• JavaScript楽しい！

Firebugの話

sendさんのプレゼンは、Firebugについてでした。
コンソールのをちゃんと消さないとだめだよ！ って内容でした。
時間がかなり押せ押せだったので、ぜひ、今度また聞いてみたいと思いました。

総括

ものっそい楽しかったです。 質問しまくってしまいました。
最近、自分の中でJavaScriptとかDOMへの関心が高まってきているのもあって、タイミングも良かったです。

ユーザーCSSを作っていて感じたんですけど、何かを作るのって凄く楽しいです。
まずは何か、超簡単なグリモンかブックマークレットに挑戦してみたいです。

元々、この勉強会はUKが「社内勉強会でJavaScriptについて喋る事になった～」的な事をつぶやいたのがきっかけでした。
「じゃあTwitterでもやろうぜ！」と誰かが言い出して、あれよあれよと言う間に30人もの参加者が集まっていました。
会場探しやら色々な準備やらで大変だったと思うけれど、おかげでとても勉強になりました。 ありがとうUK！ お疲れ様！

あ、次回も楽しみにしてるから！

• Staff（セッション受付）
• Staff（道案内）
• Staff（セッション受付）
• Staff（セッション受付）
• Staff（販促物配布）

＼(^o^)／

本当は神崎さんのセッションだけは見られるはずだったんですけど、スタッフの人数的な問題でダメでした。
でも神崎さんの名刺を貰えたり、mozillaの人と仲良くなれたり、真琴さんと会えたりしたから超ハッピーだもん。

ショートカットメニュー

• このレポートの概要
• まず知っておくべき事
• ルビの話
• MIMEの話
• 複合文書の話
• XHTML2の話
• SVGの話
• 複合文書での名前空間
• 複合文書でのCSS
• アドレスバーに属性をコピペする？
• スキーマの話
• DTDの編集
• スキーマトロン（の補足）
• その他（質疑応答含む）
• オマケ

このレポートの概要

途中からだったので、全ては聞けませんでしたけど難しい内容でした。
現時点では、一般の製作者というよりはマニア向け 。

内容は、W3Cで活動されていた石川さんが、自身が策定に関わった仕様などについて語ってくれるというもの。
将来的にXHTMLは複数のマークアップ言語を一緒に使える（SVGやMathMLとか）という話を中心に、スキーマとかW3C裏話なんかも。

石川さんは「仕様」について深く関わってきた人なので、その辺りを意識しながら読むといいかもです。
最後のオマケには、懇親会でのちょい話もあります。

あと、僕にとって多分に未知の領域なので、間違っている部分もあるかと思います。
誤りを発見されましたら、ご指摘頂けますと嬉しいです。

まず知っておくべき事（ざっくりと）

SVG

絵を描く為のマークアップ言語。 手打ちだと才能の無駄使いクラス

MathML

数式の為のマークアップ言語。 ブラウザだけでなく、数学的なアプリケーションでも使える

XML複合文書（以下複合文書）

複数のXML言語を一緒に使う文書（XHTML+SVG+MathML など）

スキーマ

XML文書のルール。 DTDをスキーマ言語の例として挙げると解りやすい。 検索するとDB系の情報がヒットしやすいので、「XML スキーマ」とすると良い

名前空間（の指定）

XHTMLのa要素とSVGのa要素、普通に書いたらどっちのa要素か解らない→「この中はXHTMLの空間だよ」と示してあげる

ルビの話

部屋に入ったと同時に終わったので、他の人のまとめに期待。

MIMEの話

『XHTMLならXMLとして扱って欲しい』と言っていた。
なお、メモ用紙とかを用意しながら聞いてたので、一部完全ではないかも。

• 仕様書は、text/html版とapplication/xhtml+xml（application/xmlだったかも？ スライド公開待ち）版の両方がある
• application～の方は、（ソースを開いて見ると）タグの書き方もよりXMLぽく書いている
• その辺りの空気を読んで欲しい（XHTMLはXMLベースである）
• XHTMLにtext/htmlを使うぐらいなら、いっそHTML4.01にしてしまえ（これは、本気では言ってないけど本音かも、と感じました）

複合文書の話

複合文書には、2種類の方法がある。
一つは、現在の感覚と近い方法で、object要素などで外部リソースを参照するという物。

もう一つは同じXHTMLファイル内に埋め込む事で実現する方法。
これは説明するより例の方がわかりやすいので、XML 複合文書の可能性と課題に載っているXHTML と MathML と SVG の混在例を見るとよい。
ソースを見ると、XHTMLの中に

<math xmlns="http://www.w3.org/1998/Math/MathML"> ～ </math>

<svg:svg xmlns:svg="http://www.w3.org/2000/svg"
  width="8cm" height="8cm" viewBox="0 0 100 100"> ～ </svg:svg>

こんな感じの記述がある。 xmlns属性で名前空間を指定する事で、その中に異なる文書を記述している。
前述の方法よりこちらが理想。

ちなみに、この例のDTDを見てみると、超長くて眩暈がする（15.000行を超える！ ちなみにXHTML1.0 Transitional は1.200行）。
これはXHTMLとSVGとMathMLのそれぞれの組み合わせを書いているから。
3通りだけでもコレなのに、（他の言語もあわせると？）全部で23通りの組み合わせがある。
『本気でやりたいなら、俺の屍を超えて行け！』との事。

XHTML2の話

よく「XHTML2はあれが足りない。これが足りない」という声が上がるが、XHTML2は複合文書の土台になるようにしてある。 言うなればプレーン・ピザ。
なので、単体で見てアレコレ考えるのは違う。 また、HTML5と単純に比較するのも、石川さん個人の考えでは「違う」

SVGの話

• SVGは、仕様自体が最近できた為、洗練されている（モダンな仕様）
• SVGはケータイブラウザで普及が進んでいる
• それはベクター画像だから、機種によって画面サイズが異なっても、きれいに全画面表示できるから
• ネットフロントや、Operaモバイル9で現在対応済み
• PCブラウザでも、モダンブラウザでは結構対応している

複合文書での名前空間

例えば、XHTMLでのa要素とSVGでのa要素を、複合文書にただ書いただけでは、どちらがどちらかが解らない。
なので、名前空間を指定してやる必要がある。
『名前空間』は、複合文書では必須である。

ちなみに、名前空間を指定しても、DOMとしては持っている。
（複合文書は複数の文書を集めたのではなく、一つの文書内に複数の文書がある、という意味？）

複合文書でのCSS

@namespaceで名前空間を指定する必要がある。

アドレスバーに属性をコピペする？

XHTMLから属性のみを抜き出して、アドレスバーにペーストする。
OperaではStyleが適用されたりする（これがスクリーンから遠くてよく見えませんでした。 他の方のまとめに期待）。

スキーマの話

• 色んなスキーマがある（スライド公開待ち）
• スキーマは基本的に、一部分だけ書く、というのはできない。 一度書き出すと全部書かないといけない。 故に、仕様を書くにはいいが、普通の製作者には向かない
• ただし、Schematron（スキーマトロン）は、スキーマを補足する用途に使える
• 製作者が使うなら、通常のDTDなどにスキーマトロンを加える、「いい所取り」がおすすめ

DTDの編集

DTDの拡張は考えない方がよい（マニアの領域）。
編集で使いやすくする程度に。

例えば、DTDを読んで入力補完をしてくれるエディタで、onclick属性なんかが出てくるのがウザイ場合。
スキーマを読み書きできるエディタを使って、該当の箇所を上書きなりで修正する（多分、一時的に行う事だと思います）。

スキーマトロン（の補足）

• やりたい事だけ書く
• 他のスキーマは、メッセージ（コメントの事？）が英字のみだが、スキーマトロンは日本語が使える
• アサート：ポジ
• リポート：ネガ（この二つはよく解らなかった。この辺り不確かですみません）

その他（質疑応答含む）

• 複合文書の検証をコマンドラインで行うには、NVDLスクリプトを使う
• 石川さんオススメのエディタはoXygen/（オーキシェン）。 シェアウェアでJAVAベース
• HTML Slidyはスキーマトロンを使っている？ （ソースを見たけどよく解りませんでした）
• XHTML2とHTML5は、お互いを尊重した方がいい（争ってばかりいると、いつまでたっても進まない）
• Ian Hicksonは個人としてHTML5に関わっている。 HTML5イコールGoogleの総意、という訳ではない。 でも、ちょっとは何かあるかも？（Googleのみぞ知る？）。
• 標準に関わる者は、何か業を背負っているような（同じ人達が同じ業界をグルグル転職してる）

オマケ

Web標準の日々終了後の懇親会で、石川さんとiwaimさん達と膝突合せトークをする機会に恵まれました。
何でも現在、石川さんは後任を探しているんだとか（もちろん、いきなり全部を引き継ぐという訳じゃなくて、最初はお手伝いみたいのから）。

石川さんが危惧しているのは、後任が日本人以外になってしまって、日本人とW3Cとの結びつきが益々薄くなってしまう事だそうです。 我こそはと思う方は、石川さんに熱意を伝えてみてはいかがでしょうか。
あ、ただ、世界中から総叩きにあっても大丈夫なくらいの精神力が必要だそうです。

ショートカットメニュー

1. 表現は視覚だけじゃない
2. 色んなUA（の一例）
3. 音声ブラウザとスクリーンリーダーの違い
4. スクリーンリーダについて
5. 音声ブラウザやスクリーンリーダーのシェア
6. 読み上げについて
7. JAWSの読み上げ方
8. CSSの話
9. 質疑応答
10. 点字ブラウザについて
11. 感想

表現は視覚だけじゃない

構造と表現が分けられている事が、Web標準の基礎。
と言うと「視覚表現と構造の分離」と思いがちだが、その考え方は聴覚表現や触覚表現でも必要。

例えば、強調を表現するにはCSSで文字色を赤にしたり太字にしたりするが、それだけでは聴覚的や触覚的には強調されていない。（相当する表現は声を大きくするとか、音程を変えるとか、解説を付けるとか？ 現段階の機能で可能かどうかは別で）。

色んなUA（の一例）

視覚系ブラウザ

IE、Firefox、Opera、Safari

モバイルブラウザ

端末ごとのブラウザ

フルブラウザ

PDAブラウザ

テキストブラウザ

Lynx

サーチエンジン

Google

音声ブラウザ

ホームページリーダー

Firefox+FireVox

音声ブラウザとスクリーンリーダーの違い

音声ブラウザは「ブラウザ」。 スクリーンリーダーはPCの操作など全般を支援する。
つまり、スクリーンリーダーはブラウザソフトでは無い。

スクリーンリーダについて

最強の呼び声高いスクリーンリーダーはJAWS（ジョーズ）。
ただし価格が高い。

前述の通り、スクリーンリーダーはIEなどのブラウザを通してアクセスする。 よってUAはそのブラウザとなる。
その為にアクセス解析ではシェアが分からず、クライアントに視覚障害者への対応を勧める事に苦労する（具体的な説得材料が一つ減ってしまう）。

アクセシブルでないサイト（ショッピングサイトなど）を使った際には、辻さんはその旨をサイト側に伝える事があるとか。
（これはShunの意見ですが）それが辻さんに限る事だとは思えないし、フォームのアクセシビリティは特に重要なのでは。

スクリーンリーダーという事は通常のPC操作も支援している訳で、例えばテキストを打つ場合も読み上げてくれる（キーを叩く度、変換する度に読み上げる）。
例としてスピーカーの辻さんの「辻」という字を変換すると、「辻斬りの 辻」と読み上げていた。

音声ブラウザやスクリーンリーダーのシェア

音声ブラウザではホームページリーダーが。 スクリーンリーダーではPc-TalkerとXPトーカ－が多い。
JAWSは性能はいいけれど、値段もあってかまだまだ一般には普及していない。
（ここでモデレーターの植木さんから補足があって、 「インフォアクシアではPc-Talkerとホームページリーダーの2つをチェック対象としている」との事）

読み上げについて

ホームページリーダーでは、見出しやリンク部分を女性の声で読み上げる事で、通常のテキスト（男性）との区別を付きやすくしていた。
支援ソフトの種類によっては、女性の声のままで音程を上げる事で区別を付けてる物もある。

「、」や「。」は、「てん」「まる」と読み上げられていた。
例として上の行だと、「てん やまる はてん てんまると読み上げられていましたまる」となる（「」はどうだったかな・・メモ忘れか、登場しなかったか。 こちらの件はJAWSの読み上げ方にて追記済み）。

前述のJAWSでは、h1要素やh2要素を「見出し1」「見出し2」と読み上げてくれる。
また、リンク部分も「リンク トップ」「リンク ブログ」などと、「リンク：ほげほげ」という形式で読み上げてくれる。 他のスクリーンリーダーではそこまではやってくれないらしく、この辺りが最強たる所以？

JAWSの読み上げ方

支援技術が実際にどのように読み上げるのかを、JAWSで体験する事ができました。
必死にメモを取りましたが、展開が速かったので曖昧な部分が多くあります。 正しくは音声とスライドの公開を待ってください。

、

「てん」

。

「まる」

？

「疑問符」

・

「ナカテン」

「」

「かっこ」「かっことじ」

【】

「すみつきかっこ」

h1要素 h2要素

「見出し 1」「見出し 2」

p要素

特に何も無く、通常のテキストとして読み上げる

リンク部分

「リンク：ほげほげ」

ul要素、ol要素

1項目を読み上げた後に「3の1」など、全体数と現在数を伝えてくれる

blockquote

「ブロッククォート～ブロッククォート終了」

strong要素 em要素

特に何も無く、通常のテキストとして読み上げる（「強い強調」と「強調」だったかも）

del要素

特に何も無く、通常のテキストとして読み上げる

ここで分かる事は、（strong要素や？）del要素を通常のテキストとして読み上げてしまう支援ソフトがある、という事。
つまり、音声系の環境もサポートするならば、他の手段でそれを伝える事を考える必要がある（もちろん正しいHTMLである事を前提に）。

CSSの話

画像置換にdisplay: none; を使用するとスクリーンリーダーで内容を得られなくなるように、視覚表現の為の指定がアクセシビリティを下げてしまう事がある。

また現在の音声ブラウザは、link要素のmedia属性に対応しているとは言いがたく、media="screen,print" などと指定しても読み込んでしまう。

質疑応答

CSSが適用されると隠される、ナビゲーションスキップメニューの是非

• ミツエーリンクス的にはNG
• ただ、聴覚ブラウザ専用ではなく、他の用途でも使えるなら（文書として必要なら）良いのでは
• 音声ブラウザにはhn要素のみを次々に読み上げる機能があるので、しっかりとしたマークアップをする事も大事（スクリーンリーダーでは未実装も多いが）
• WCAG的には、欲しい（植木さんの補足）
• この辺りは日々進歩している

一般の（製作者でない、という意味）視覚障害者はどのくらいWebを使っている？（主観で）

• ハードルが高いのは確か
• 支援ソフトも、今後はオープンソースが増えて値段も下がったりするかも

Googleの検索ページを読み上げたらどうなる？

• 検索結果のサイト名が見出しでマークアップされているので、そこだけを次々に読み上げる事ができる
• 少しインデントされている部分（関連リンク？）も同じく見出しでマークアップされている

Flashや動画コンテンツは？

• コンテンツ側が代替情報を用意する事が重要
• Flashのアクセシビリティはどんどん上がっていっている
• 動画に関しては、「ここを開くと動画が再生される」と分かっていればOK。 いきなり再生されるとびっくりする。
• いきなり再生されると、動画の音声と読み上げの音声がかぶってしまう
• 辻さんはMdN Interactiveのコラムでも、その辺りの事を書いているとの事

点字ブラウザについて

セッション終了後に、点字ブラウザの動作を見せてもらえる事になりました。
本当なら写真を撮ったりしたかったんですが、次のセッションの都合上無理でした。 なので文字だけで説明。

• 点字ブラウザは、画面でなく、モノ（もしかしたら、モノ＋ソフトの両方かも）
• 動的に点字が生成される
• 画面にあわせて、点字部分のパーツがニョキニョキ動く感じ
• 点字のパーツは、鉄系の素材で頑丈な感じ
• 値段は超高いっぽい

感想

実際に読み上げソフトを常用している人の話を聞けるっていうのは、ものっそい貴重な体験でした。
お恥ずかしながら、スクリーンリーダーと音声ブラウザの違いもこのセッションで知りました。
そういえば、聴覚スタイルシートの話は出ませんでした（質問するのも忘れた・・）。 まあ、media属性の対応もまだ十分で無いのなら、殆どサポートされて無いのかもしれません。

今回のセッションと直接の関係は無いんですけど、前に2ch系のBBSで「AAがあると何が何だか分からなくなる」っていう書き込みを見た事があります。
まあ、2chくらいの規模になると２ちゃんねる”を音声で読み上げてくれるWebブラウザもあるみたいですけれど。

概要

益子さんのセッションは大人気で、当初の予定を変更して、二部屋をブチ抜いて行われる事になりました。
内容はXHTML+CSSのガイドラインを、みんなで作っていこう！ というものでした。

スライドを中心に進んでいく形式だったので、セッションを受けていない人も、公開されるスライドを見ればかなり理解できると思います（スライドはもう公開されてるんでしたっけ？ 現在探し中です。）
なので、この記事では僕がメモした内容を整理して公開しています。

ガイドラインを作る目的

• 仕事を楽にする事が大切
• 無理無駄ムラを解消する