この日はものすごく寒かったですがスチーム号の乗車も楽しかったですし、15時30分の運転後のターンテーブルでの機関車の回転もすごく迫力がありました。
もう少し暖かくなったらまた行きたいです。

今回のテーマはアクセシビリティ。
（アクセシビリティってなにっていう人はまずこのページを見てください）
僕は
・普段サイトを制作する場合についつい忘れがちな音声読み上げブラウザなどの最適化などを少しまじめに考えよう！
・知らないことも多いのでこの機会に知識を得よう！
・セミナーに参加することで意識を高く持っていこう！
という目的で参加することにしました。
ドットコーダーは何回か参加させてもらってるんですが、毎回新しい発見・知識の獲得と自己の反省点の洗い出し、そしてモチベーションアップにものすごく役に立っています。
なので毎回素晴らしいのですが、今回も素晴らしかったです。
自分の復習の意味もかねまして少し紹介させてもらおうと思います。

●最初のセッション：ACRIプロジェクトの持田さんのプレゼン。
アクセシビリティについての基礎的な部分から現在の状況などをさらっと紹介してくれました。
細かい事は色々ありましたが印象深かったのは

・一生懸命作ったWebサイトが使えない人がいるかもしれない場合がある
・そしてその一生懸命作ったWebサイトで人が苦しむ事があるっていうのは悲しくないですか？

ということ。
いわれてみれば確かにそのとおりで、自分が作ったもの（どんなものにせよ世間に公開しているもの）は使ってもらってこそ意味があるものです。
見ることが出来ないというのは悲しいですし、ましてや人に対して苦痛を与えるものであって欲しくはないなと思います。
セッションを聞いて思ったのは、人に対する思いやりや優しさのようなプラスの感情がベースでアクセシビリティという考え方を使えば世界はもっと幸せになれるのでは？という事。
なんにせよまずは気持ちからというのはシンプルですがとても重要なことですし。

●みるくさんのセッション
音声読み上げブラウザ「NetReader」で実際に読み上げてみるというもの。
途中機器トラブルで進行が止まったりしましたが、実際の読み上げブラウザをが動作しているところを見るのが初めてだったので新鮮でした。
細かい点ですが以下のようなポイントを気をつけようと思いました。

・スペースの使い方
「期　間」と「期間」では読まれ方が違う「期（き）　間（あいだ）」と「期間（きかん）」とスペースを空けることで単語として認識しなくなる。
よく指示書とかのワードで文字間調整を行う場合に「期　間」のようにスペース付きで指示来る場合があるけどこれには注意しないと。
どうしてもその見た目を再現したいのであればCSSを当てて対応するとかしたほうがいい。

・時間の表現方法
例えば00:00でなく0時0分にしたほうが読み上げの時に時間であるということが分かりやすい。
細かいことですが分かりやすいにこしたことはないっていう話。

●あらたさんのセッション
キャプションに関するお話。
例えば動画の字幕をテキスト化することで次のようなメリットがある。
・アクセスアップに繋がる（テキストデータをGoogleがインデックスすれば検索エンジンからのアクセスアップに繋がる）
・認知の向上に繋がる（日本人が英語の発音だけでなく字幕があることでよりその言葉を理解する事ができるようになるような感じ）

これはかなり面白いことでとてもGoogleらしいというか発想が素敵でした。GoogleはYoutubeのコンテンツである動画をよりインデックスさせやすくするため動画データをテキストデータに書き起こし、インデックス化させやすくするということに力を入れているそうです。
ユーザーからすると目的のコンテンツを動画で見ることも出来ますし、字幕があればより深い認知に繋げる事もできます。
また、動画を見ようとするとそれなりに「まとまった時間」を費やす必要がありますがテキスト化された情報であれば「途中まで読んであとから読む」という動作もしやすいというのも大きなポイントです。
現在の動画に字幕をつけるサービス「CaptionTube」を使えばテキストデータ化した動画コンテンツを作ることもできるようです。今度やってみようと思います。

また、そのキャプションまわりで面白い話がHTML5でのキャプションの実装についてのお話。
現在策定中のHTML5の新要素でtrack要素という要素を儲けキャプションを定義付けするという話。
これが実現できればキャプションであると言う事が仕様として決められるのでおもしろいなーて思うのですがまだ仕様書もなくブラウザ未対応という事で今後に期待ということらしいです。個人的に是非実現して欲しいです。

セッションはこんな感じでして、あとは各テーブルブロックごとに今回のセッションを聞いてどう感じたかをグループディスカッション形式で話し合いました。
ここからがある意味ワイワイガヤガヤアクセシビリティですねｗ
僕のいるテーブルでもああでもないこうでもないと色々話をしました。
普段アクセシビリティに関しての題材のみでディスカッションを行うと言う事はまずないのでその時点でかなり新鮮です。
いろいろな人の話・考え方を聞くと脳が活性化されてとっても刺激的でいい感じでした。
聞いたことを話し合うことでさっき聞いた内容をより深く脳に刻みつけることもできて一石二鳥です。

そして最後に各テーブルごとに質問を発表しました。
僕が個人的にいいと感じたのは

・機種依存文字について
・実際どこまでやればいいの？

の2点。
まず機種依存文字は対応するべきなのかと言う事ですがそもそも機種依存をしている段階でアクセシビリティではないということ。
全くそのとおりで一部の環境でしか見れないということはそもそもの考え方から違うよねっていうことです。

そして実際に制作をしている僕らがどこまで対応するべきなのかと言う事に関しては「TPOに合わせてできるものから（優先順位の高いものから）やっていけばいいのでは？」
という事でした。そういわれても実際どうすればいいのかなというところに関しては「アクセシビリティの実践は、ワークフローへの組み込み」というスタンスで解決していくのがいい」というアドバイスでした。
確かに自分のワークフローにアクセシビリティチェックの項目を付け加えてしまえばいいと思いますし、かならずしもしなければならないと言うわけではなく時と状況に応じて「ここまではがんばろう」という自分の中での線引きをすればいいと思いましたのでさっそく今後は実践していこうと思います。
（僕の場合は個人なのでワークフローへの導入はかなりやりやすいんですがチームの場合は大変でしょうね。）

そんなわけでとても充実した3時間を過ごす事ができました。
今回参加したことで自分の中でのアクセシビリティに対する考え方は確実に変わったので、今後の制作物には少しづつでもできる範囲で今回のイベントで得た知識を組み込んでいけたらなと思っていますし、実践しようと思います。
そして次回以降のドットコーダーにも積極的に参加していこうと思います！

ワークショップ自体は知ってはいましたが実際にやってみてかなりいい刺激を受けました。
というのも基本的に制作をする時って個人でするものなのでコーディング中に複数人とコーディングの仕方について話すということがないので他の人の作業の仕方がみれたのも面白いポイントでした。
僕のいたチームは僕を含め3人だったのですがPCで入力してもらう係とアイデア出しと検証の係、プレゼンで話す係を割り当てて僕はプレゼンで話す係を担当しました。
他のチームは他のチームでそれぞれ独自に色々と面白そうに取り組んでいました。
なので最終的なプレゼンもチームの個性がでていて非常に面白かったです。

で、今回実際にHTML5でコーディングを行ってものすごく勉強になったのでちょっと忘れないように覚書をしておこうと思います。
(ここから下の紹介分はかなり自分視点で書いてます。なので「ここは間違いだ！」と思われましたら突っ込んでください)

hgroup
ｈ1やｈ2みたいな見出し要素をグループ化してまとめておく時に使います。
使い方が微妙かなーと思いつつも文書の定義づけに意外と使い道がありそう。
将来的にはSEOでもけっこう重要になってくるのではないかと思います(その時までSEOという手法が使われていればの話ですが。)
コードだとこんな感じ

ここにh1
ここにh2

要素についての詳細ははこちら

<input type="search" />
これは全く知らなかったのでけっこううれしい発見だったんですがこの新しいinputの要素を使うと検索時に入力したキーワードをキャンセルするボタンみたいのが出てきます。だからどうしたという事ではないんですがサイトによく使われるサイト内検索用に定義された要素というのがいいなと思いまして。

article
サイトの内の「単独で再配布でき再利用できる」部分を定義する要素がarticle要素。
わかりやすくいうとブログのFeedで配信される部分のようなイメージです。
(ブログFeedにはナビゲーションとかパンくずとか入ってないですよね。普通は。)
ここがしっかり定義されていればここを見ただけで「このコンテンツがどういうものであるか」という判別がつくようになるという事なので将来的にユーザビリティ向上のために重要視される要素になるのではと考えています。

コードだとこんな感じ

ここにh1


<p>ここに本文</p>

注目すべきポイントはやはりコンテンツ内に重複するheaderやfooter要素が内包できる事ですね。
要素についての詳細ははこちら

time
時間を定義する要素がtime要素です。コンテンツ内で表記すべき時間に関する部分を定義する時に使います。
僕的にはまだ完全に理解でききれていませんので今後の勉強課題です・・・。
コードだとこんな感じ

2009-08-30

要素についての詳細ははこちら

figure
本文から参照する画像とか表とかを定義する要素がfigure要素。
本文から参照するという意味合いなのでレイアウト目的に使用してはいけませんよというのが引っ掛けポイントで、今回しっかり引っかかってしまった要素です。
コンテンツの本筋にかかる部分の画像と注釈のセットが使用対象なのでコンテンツ内でも比較的重要度が高いという認識がなされるのはまず間違いないと思います。「この説明にかかる図表はこれだ！」というのにかっちりくる時に使うようにします。

コードだとこんな感じ

要素についての詳細ははこちら

blockquote
前からある要素で引用をするときに使う要素なんですけど、HTML5からはsectionと同じようなセクショニングコンテンツのような位置付けになるみたいです。ということでこのタグ内に見出し要素を入れることが出来ます。

コードだとこんな感じ

引用タイトル

引用本文

要素についての詳細ははこちら
でも僕は今回そのことよりも勉強になったのが引用についての認識でした。
課題にはカンプの下の部分に「ここ文章は引用です」と書いてあったのですがソース元がないし、コンテンツ作成者が集めた独自コンテンツならば引用ではないのではないかという事で僕たちのチームではblockquoteでくくらなかったんですが、他のチームの方の説明でも色々意見が分かれてました。というのも「引用と書いてあるがソースがない」という部分。ネットに慣れ親しみすぎるとついついソースありきで引用の有り無しを判断してしまいがちですが、例えばお客様の声のような実際に人が紙に書いたものをサイト内のコンテンツに使用する場合でも引用として成立するという考え方もあるという事です。考え方は人によって違うのは当然なのでどれが正しいのか判断しかねる部分ではありますがそういう考え方も出来るのかとけっこう衝撃が強かったです。もっと広い視野で物事を考える・主観的になりすぎない癖を付けていこうと思いました。

em・strong
文字列の強調を表すこの2つの要素はこれまで似たような使い方だったのですがはっきりと意味合いを分けられるようになっています。
意味合い的にはemが単なる強調で、strongがコンテンツ内での重要性を定義付けるものです。これによって文書内での意味合いによってemとstrongをしっかり分けてマークアップ出来ます。これまでが微妙に分かりにくかったのでこの仕様変更はうれしいです。

コードだとこんな感じ

ここは強調文章がここに入る※強い重要性

要素についての詳細はemはこちら・strongはこちら

aside
メインのコンテンツには関係しているけど、やや本筋から逸れながらも軽く触れておきたいようなコンテンツから構成されるページに使う要素がaside要素。セクショニングコンテンツなので見出しを含む文書構造になります。
今回のお題ではサイト内のバナーやおすすめ商品の部分でasideが使われることが多かったのが印象的です。

コードだとこんな感じ

いぬ


犬ってかわいいよね

要素についての詳細ははこちら

small
サイトの著作権表記に使用することが多い細目を定義付ける要素がsmall要素。
僕は普段あまり使わないんですが、今回は皆さんしっかり使ってました。
よくよく調べてみるとここしかないなって感じでフッターのコピーライト表記に最適だったりします。

コードだとこんな感じ

制作者連絡先

© copyright 2010 制作者 All Rights Reserved. 

要素についての詳細ははこちら

という感じです。その他にもたくさん勉強になるポイントがありました。
参加されている皆さんのレベルがものすごく高くて僕のような中途半端な人間ではまだまだ勉強不足な感が否めませんでしたが、実際に参加して一緒に作ってみて、作った経緯の説明を聞いてかなり充実した内容でした。
おかげでかなり勉強になれましたし、自分自身のモチベーションアップにも繋がりました。
プレゼンするという機会もとてもいい経験になりましたしね。
次回以降も日程の合う限り参加して行こうと思いました。

参加されている皆さんはとてもモチベーションが高くて活気にあふれている素敵な方々でした。
おかげでこちらもがんばろうという気持ちになれてとても感謝しています。

今回の幹事をしていただいたサーマルソフトの石田さんこと日本一不動産ソフトを売る男やっちゃん。
大変だったと思いますがお疲れ様でした！

異業種の方と話をすると違った角度から物事を考える事が出来るので素晴らしいですね！
次回もあればぜひ参加したいと思いますので呼んでくださいね！

僕が個人的に印象に残った事ですが、
・育児は家族のコミュニケーション
・自分の時間は育児中でも自分の時間（すぐに自分の時間がないというのは考え方で変わる）
・お互いの思いやりを持つ事が大切
など、ついつい忘れがちですがとても基本的で大切な事を再認識する事が出来ました。

一般的には「男が育児なんて」という方もまだ多いですが、やはり家族との時間を楽しく、優しいものにしていくことが将来の自分の幸福感に結びつくと考えているのでこれからももっと積極的に育児をしていこうと思います。

あと、会場で「パパ手帳」なるものが配布されていました。
これは妊娠・出産から成人するまでの間の家族の出来事を記したり、その時の父親の感想などを書き連ねて子供が成人した時に手渡す為の手帳です。要は母子手帳の男版みたいなものです。
これが記入項目とかがかなりこっぱずかしい内容です。
大人になった子供に読まれて失笑を買うこと間違いなしの一品になることでしょう。
今は恥ずかしい気持ちですが気が変わったら記憶をさかのぼって書いてみようと思います。

ちなみに育児をしている男性の事を「イクメン」というそうですよｗ

当日は天気もよく、素晴らしい気分でした。

京都競馬場に到着。早速休憩しますｗ

芝生の緑が素晴らしく綺麗

記念撮影をしたかったのですがお腹がｗ

天気がよくて気分は最高だったんですが天気がよすぎてちょっと暑かったので屋内のキッズルームに行ってみることにしました。
キッズルームはあまり人もいなくて流れるアンパンマンがどことなく寂しげではありましたが息子はアンパンマンよりもブロックの方がよかったようでブロックを独占して遊んでいました。

なんかもう・・・ね。必死ですよｗ
その後同い年くらいの子や数人の子供がやってきたので独占したかった息子はとたんに機嫌が悪くなり気分を変えよう再び外へ。
外の公園も良い天気で気持ちよいですが、ちょっと天気がよすぎて暑い・・・・。

遊具で遊んだり

滑り台で遊んだり

走り回ったりと大興奮！

暑すぎるので帽子を持ってくればよかったと後悔。
熱射病にすらなりそうなくらいの天気でした。

帰る間際には綺麗なお花を見つけて愛でていました。

「おはなきれい」と駆け寄り花を愛でる息子。

天気の良い素晴らしい気分を満喫できてとても有意義な一日を過ごす事が出来ました。

まずはアサヒビール大山崎山荘美術館に行ってみました。
息子が大好きなバスが無料で送迎してくれるサービスがあったので乗り込みます。
途中からは徒歩で山道を登ります。

息子のリクエストで肩車で山道を登ります。ある種の修行ですね。

ここは美術館なのですがその周りにある公園がとてもきれいでいい感じです。
しかも程よい天気と満開の桜で気分は最高。

桜がとてもきれい

最高の天気と美しい風景。心が癒されます。

池には大きい鯉もいて見ていても楽しいです。息子も身を乗り出して楽しんでいます。

美術館自体には行きませんでしたが、息子と3人で美しい自然を心行くまで満喫しました。

その後、サントリーの山崎蒸溜所へ。
ウイスキーの製造過程を見学し、ものすごく勉強になりました。
山崎という土地を選んだ理由、蒸溜釜の形の違いによる味わいの違いなど普段では知る事のない事も知ることができ大満足。息子はというと樽が貯蔵されている倉庫に行くと暗くて怖かったのか「こわい！」を連発していましたｗ

置く場所の高さや奥行きなどによっても味に変化があるそうで全ての樽で違う味わいになるそうです。

一通り見学が終わると、最後には試飲がありました。
普段はビールしか飲まない僕も久々にウイスキーを飲みました。

試飲ではハイボールを飲みました。後味さわやかでとてもおいしかったです！

素晴らしい景色や美味しいお酒を満喫し、大満足の一日でした。

だいたい10人くらいの方が自身でできるお話をまとめてきていただいてとても勉強になったのですが、今回はその中で僕が個人的に面白かった物を少しだけ紹介します。

1つ目に紹介するのがjQueryでプレゼン用資料を作れるプラグインの「mukislide」。
会場で聞いている時はなんかいまいちっぽい雰囲気で進行していたんですが僕はけっこう好きでした。
というのもこれまでパワポでプレゼン用の資料を作る場合が多くかったのですが、僕はどうにもあのパワポの仕様というかインターフェイスが好きではないんです。
でもこのmukislideを使えばプレゼン用資料もHTMLで作れる！という事はデザインだって自由にできちゃう！ってことなんですよね。
これってすごく素敵な事だと僕は思います。
HTMLとCSSという慣れ親しんだ環境で作れるので生産性があがりますね。
公開する際もURLを告知すればいいだけなので便利です。
しかもシステム部分はjQueryとmukislideのスクリプトを外部ファイルで読み込むだけなのでローカルファイルを圧縮してデータで送れば相手の環境にパワポ等のソフトがなくても大丈夫というのもうれしいポイント（実際にはサイトで公開しておくだけで十分な気もしますがｗ）
サンプルも公開されています。
かなり個人的に好きな感じなので積極的に活用して行こう＆周りに推薦していこうと思います！

2つ目に紹介するのが「simplelib」。
これはlightBox等のよく使われるjQueryのプラグインをセットにして必要なものだけを使うという発想のプラグイン。
実際に使う場合はこれまで個々をそれぞれ設定したりするのでheadの部分が長くなったりそれぞれのクラスやらディレクトリ構成やら変更するのがめんどくさかった事を一括できてしまうというすぐれもの。
よく使うものをまとめてくれているのでいちいち設定や設置する手間が省けて非常に効率的ですね！
配布はまだ準備中ということなのでしばらく待ちます。

その他にも面白い内容の話や為になる内容の話が満載でとても充実した時間を過ごす事ができました。
今後も継続して開催していくという事なので可能な限り参加していきたいと思います。

IT CIRCUS 2010 IN OSAKAはWebに関わる人であれば少しは気になる内容を扱うセミナーで、以下のような内容を聞かせてくれてたったの1,000円というリーズナブルな価格も嬉しいイベントでした。
内容としては

「多様化するウェブクリエイターが共有すべき意識」森川眞行さん（日本ウェブ協会理事長）
「レンタルサーバーよもやま話」森下源一さん（ファーストサーバ株式会社）
「フリーで生き抜くデザイナーでガンバろう！」秋葉秀樹さん（CSS Nite in OSAKA）
「FLASK流モテFlash」株式会社IN VOGUEさん FLASKチーム
参加によるパネルディスカッション

という内容でした。このイベントを知ったきかけというのがクオリティの高いFLASHやAR等の実績のあるIN VOGUEさんが参加されるということで知ったのですが、やはり参加しておいてよかったなというのが個人的な感想です。
僕が個人的に一番面白かったのはCSS Niteの秋葉さんのお話です。
実際にIllustratorやPhotoshopの初期バージョンからのユーザーである秋葉さんのデザイナー視点でのお話がとても勉強になりましたし、ロゴの作り方やHTML5のcanvas要素の話なども非常に面白かったです。
でも、何よりも一番良かったのは秋葉さんのしゃべりの技術です。
けっこう堅い話のあとだったので参加者は皆固かったんですが、秋葉さんのお話の際には笑いがおきたりと終始和やかな感じでした。
話の途中にも伸びをして気持ちをリフレッシュさせてくれる時間を設けてくれたりといった心遣いも素晴らしいなと思いました。
真似が出来るものではありませんが参考にしたいと思います。
また、今回お話頂いた内容も後日ブログでまとめてくれるというお話でしたので復習しておこうと思います。
Webデザインに興味ある方も是非チェックしておくことをおすすめします。
秋葉さんのブログ

僕が今回参加した目的はIN VOGUEさんのARの話だったんですが、そのお話もとてもいい内容でかなり勉強させてもらいました。
実際に僕はFLASHをガッツリ制作して行く気はないのですが、Webに携わるものとしては知っておかなければならない内容でした。
IN VOGUEさんのFLASHチームであるFLASKはブログもされているようなのでチェックしときましょう！
FLASKブログ

今回のセミナーに参加して思ったことはもちろん勉強になってテンションやモチベーションが上がったのは最高でしたが、それよりも今後の自分の方向性を考え直すきっかけになったことがなによりもありがたい事でした。
秋葉さんのようにデザイン部分を突き詰めて行く、もしくはIN VOGUEさんのようにFLASHを突き詰めて行くという道もあるかと思いますが、僕の場合はシステムとFLASHに手をだすつもりもありませんし、デザインで勝負するつもりもありません。
なのでやはり餅は餅屋思想でそういう方々と協力して行く方向性でいこうという思いを新たにしました。

このイベントはアフィリエイトのリンクシェアさんが主催したイベントで、リンクシェアさんの提携する企業が一押し商品のサンプル等をブロガー、アフィリエイターにアピールしてもらおうという趣旨のイベントのようでした（勝手な推測）。
その他にもTwitter活用セミナーなどのプレゼンもあり、会場はすごい人だかりでした。

会場内でのセミナーの様子。最新の動向をチェックします。

アルファブロガーのネタフルさん達が東京からゲストで来ておられました。

場内ではこのイベント用のTwitterのハッシュタグが映されていました。分かりにくいですが妻のつぶやきも表示されていますｗ

会場では各社の新製品やアピールしたい商品が所狭しと並べられています。
また、実際に使用したり飲食する事もできる為、良質の記事を書くために役に立ちそうな感じでした。

こんな感じです。

息子をベビーカーに乗せて行ったのですが他にもベビーカーや子連れの参加者もいて一安心。
もし邪魔になりそうならすぐ帰ろうと思っていた心配は杞憂でした。
その息子もベビーカーですやすや寝ておりましたので妻とゆっくり場内を見てまわりました。

完全に熟睡ですｗ

場内では参加アンケートを答えるとオリジナルチロルチョコを配布していました。

参加賞品のオリジナルチロルチョコ。うまー。

また、この日解禁だったWindows7に実際に触ってみる事もできるパソコンブースもありました。

Windows7の画面はこんな感じでした。いまだXPの僕には少し触りづらい印象でした。
その横にあったモニターに僕が映っていたので馬鹿っぽいですが無意味な写真も撮影。

いい年してはしゃぐ馬鹿

あと、場内でベビーカー押してるのが目立ったのかテレビにインタビューされましたｗ
人生初のインタビューｗ

照れました。
毎日放送のVOICEという番組らしいです（放送日未定）。

また、会場にはIT飲み会で知り合ったO崎さん、Iさん、Aさんも来られていました。
みんなで会場で配っているTシャツを着て記念撮影。

結構楽しめたので次回もあれば是非参加したいと思います。