10月16日にアクセシビリティをテーマに勉強会を行ないました。

スピーカー

• 持田さん（@motchie, アルファサード）
• あらたさん（@aratakojima, NPO法人しゃらく）
• みるくさん（@milk54, White Stage）

当日のおおまかな流れ

1. 持田さんのセッション：10分
2. みるくさんのセッション：40分
3. あらたさんのセッション：40分
4. グループディスカッション、質疑応答：80分

みなさんのセッション内容

アクセシビリティ・イントロダクション（持田さん）

タイトル通り「アクセシビリティって何？」というところを持田さんにお話していただきました。アクセシビリティというと高齢者や障がい者のための、という意識の人は多いんじゃないかと思うんですが、いかにして私たちがつくったものを多くのひとが気持ちよく使ってくれるか、ということなんですね。イントロダクションとしてすばらしいセッションでした。
スライド（PDF）

優しく 楽しく 幸せに アクセシビリティ（みるくさん）

音声ブラウザではどのようにサイトを読み上げられるのか、というのをなかなか普段検証したことがある人は少ないとおもいます。「ちゃんとしたHTMLを書く」というのがいかに大事かというのがよくわかるセッションでした。セッション中、音声ブラウザ（リーダー）のトラブルなどもあったのですが、もしかしたら普段これらを使っている人でも、こうしたトラブルが起きたりしているのかなぁ、なんてことも思いました。
スライド（PDF）

Caption is Fun!

動画のキャプチャというあんまり皆さんも手を出していなさそうな、新鮮で面白いお話でした。キャプションも聴覚に障がいがある方のための、というわけじゃなく、音声が聞けない環境においても良い対応で、またテキストデータ化されていることで検索エンジンなどにも拾われるなど、いろいろな側面でメリットがありますね。
スライド（PDF）

グループディスカッション＆質疑応答

ワイワイガヤガヤということで、最後に長めの時間をとって、グループ別に今回の勉強会の振り返りや、普段のアクセシビリティ対応の話、そして今回のスピーカーのみなさんへの質問などを考えてもらいました。
ここで出てきた質問の一部と、事前に参加者からいただいた質問をいくつか抜粋します。

JavaScriptでつくられたDOMコンテンツの内容は音声で読み上げられるのでしょうか？

• それが読み上げられることは期待しないのがいいと思います。現時点では。（持田さん）
• 自分が知る限りはケースバイケース。書き方によっても、UAによっても違う。気になる場合は手元のUAでチェックするのがよいかと。（あらたさん）

そもそもどのくらいアクセシビリティを重要視せねばいけないのか？

• 用途が決まっているWebサイトなら意識しないこともあると思いますが、ユーザーが特定できないサイトでは、基本的なことは配慮しておいたほうがいいかなと思います。（持田さん）
• HTMLをvalidateして当たり前だと思うくらいにはやってもいいかなと思います。（あらたさん）

知識は得たけど、実践まではいけない（時間的なコストの理由などで）どうすれば「やろう」と思えるか？

• ワークフローにアクセシビリティのフローをいれる。チェックリストをつくって、それをクリアしないと次のフェーズに進めないようにする（あらたさん）

リンクテキストの文言はどうするのが良いか？

• 飛び先が正確にわかるように書いてください（みるくさん）
• リンク先の目的が分かるようにしましょう。 http://www.ciaj.or.jp/access/web/docs/WCAG-TECHS/H30.html（持田さん）

音声ブラウザのためのショートカットアンカー、設けていますか？これも僕は面倒で設けてないことがほとんどです。

• 仕事でコーディングすることは今までになかったのですが、これを頼りにしている人がいる可能性があると思うので、現状は設定した方がいいのかなとは思います。（持田さん）
• 設けていません。音声ブラウザのみに配慮するのはアクセシビリティではないと思っているので。（あらたさん）
• 設けてます。（みるくさん）

画像の直後に、その画像のaltと同じテキストがあるような場合でも、アンカーリンクの場合、画像のalt属性は必須？例えば何かの写真のキャプションとか。

• リンクだとaltテキストを入れないといけないので、2度読みになってしまいます。なので、画像とキャプションをa要素で囲みaltの値を空にするのがベストだと思います。（みるくさん）

参加者の感想（一部紹介）

• やろうと思ってて全く手をつけてなかったアクセシビリティが新鮮で、参加者のモチベーションが高かったので、すごくいい刺激になりました。
• 音声ブラウザなど、言葉で知っていても実際どういうものかわかっていなかったので大変勉強になりました。
• 持田さんの分かりやすい導入も、みるくさんの音声読み上げ聞き比べも、あらたさんの動画のcaption考も、「知ってるつもり（机上で）」な部分がかなりクリアになりました。
• 今回の勉強会がwebアクセシビリティが根付く・広まるきっかけの一つとなれば素晴らしいと思いました。
• ディスカッションに関しては、グループごとの討議をもっと共有できる形がいいなあと思いました。
• 取り扱っていただくテーマによって参加される方が違い、専門の方とお話させて頂く機会がもてて、とっても勉強になりました！貴重な機会となりました。
• いつアクセシビリティガイドライン対応と言われてもいいように準備しておかないといけないですね。
• 最新技術、とんがったテーマももちろん魅力的なのですが、こういった普遍的なテーマがやっぱり一番面白いものだなあと思ったり。

あとがき

この勉強会の企画のときに「アクセシビリティ」というのが難しくて固い、重いんじゃないか、ということで人も集まりにくいかもしれないとおもっていたのですが、今回は定員を超える勢いで参加者が集まりました。そのアツさは最後のディスカッションでの各チームとも盛り上がってた感じに現れてましたね。またスピーカーお三方にも、「ゆるふわで」という無茶ぶりにも関わらず、アクセシビリティをしっかりと考えたくなる、わかりやすい内容でお話いただいてありがとうございました。

初めての方も、人見知りな方も、常連さんも、奮ってご参加下さい！

幹事

幹事は前回同様、以下の4人の予定です。

• @5509
• @rewish
• @hiloki
• @hogenishi

参加方法

TwiPlaで参加表明してください。

TwiPla – ドコダ飲み: Web制作関係者飲み会 in 大阪

9月25日にWebパフォーマンス限定の勉強会を行ないました。

スピーカー

• 石本さん（@t32k, MOL）
• ともえさん（@tomo_e, EC Studio デザインブログ）
• いたさん（@itasan, STUDIO Bloom）
• ひろきさん（@hiloki, inkdesign）

石川からのゲスト、石本さんのお話をキーノートに、いろんな側面でのパフォーマンスネタを披露していただきました。
そしてまるしん堂のおまんじゅうはやっぱり美味しかった。

当日のおおまかな流れ

1. 簡単な説明：10分
2. 石本さんのセッション：40分
3. ともえさんのセッション：15分
4. いたさんのセッション：15+10分
5. ひろきさんのセッション：40分

みなさんのセッション内容

Long Life Web Performance Optimization（石本さん）

Webパフォーマンスがバズワード的に騒がれていた数カ月前と比べると、WPOの話題はいま落ち着いてきています。しかしその裏でWPOを重要課題としていろいろな技術やテクニック、リソースが出てきています。それらを追いかけていくのも大事ですが、このセッションでは「人間」、「認知・知覚・感受」といったところに注目したパフォーマンスの最適化を説いていきました。なかでもFLOWの話はなかなか興味深い内容でした。
※石本さんのセッションスライドは後日公開予定です。

みんなで使おう！Fireworks！（ともえさん）

PNG形式のファイルをいかにして最適化させるかを、Fireworksの使い方と一緒に解説してくれました。PNGの最適化ならFireworksがおすすめで、ただキレイに書き出すことを考えるならPhotoshopで書き出すのが良さそうですね。PNGだけでなく、JPEGの最適化の方法の一つとして、JPEGマスクの紹介もしてくれました。
ともえさんのセッションスライド

javascriptのパフォーマンスを上げる7つのこと（いたさん）

タイトルのとおり、JSのパフォーマンスをあげるためのtips７つの紹介です。と、この７つをやればいいってことでなくて、一番重要なのはDOM設計をしっかりやるのが最適化につながるということです。idとclassの使い分けなど肝になりますね。
なんとこのJSのtipsだけでなく、おまけでJPEGの話もホワイトボードをつかって解説してくれました。
いたさんのセッションスライド

iPhoneでのウェブパフォーマンス最適化を考える（ひろきさん）

iPhoneにおけるウェブサイトのパフォーマンス最適化はデスクトップ以上に有効といえるんじゃないでしょうか。キャッシュについての報告や、デモサイトをみんなのiPhoneで検証して、リソースの扱い方などを体感しました。jQueryのアニメーション、CSS3のアニメーションをくらべると、CSS3の圧倒的な処理な軽さにみんな驚きました。
ひろきさんのセッションスライド (PDF)

「パフォーマンス」というテーマでもいろんな側面の話がきけて面白いですね！

参加者の感想

今回もアンケートの一部を紹介！

• パフォーマンスという１つの題に対して、心理学から画像処理、JS、iphoneと、いろんな方面からの話が聞けて大変よかったと思います;-)
• 目から鱗でした。
• FWについては普段ほとんど使った事がなかったので「へ〜」というネタが多くて楽しかったです
• わからない用語が出た場合、その場で調べながら話を聞いていたので、用語の解説や、用語に対して書かれているサイトへのリンクなどがあれば便利だなぁーと思いました。
• あまりパフォーマンス関係は考えてなかったので、反省になりました。
• 参加しやすくとても良いと思いますよぉ。多すぎず、少なすぎずちょうど良い人数だと思う
• しきりがとてもよかったと思います。ちゃきちゃきしていたのでお話も聞きやすかったです。
• まるしん堂のおまんじゅううますぎる・・・
• 予想以上に大阪の笑いのレベル（沸点）が高かった

あとがき

今回は前回のワークショップ形式から再びセミナー形式でおこないましたが、回数を重ねてドコダらしさみたいなのが出てきたような気がしますね〜。ゆるふわです、ゆるふわ。
今回のセッションはいろんな職種の人にも役立つ内容だったかもしれませんね。ドットコーダーは「コーダー」とかいてますが、コーダーじゃない人もどしどし参加お待ちしています。

キーノートをつとめていただいた石本さんの講演は、10月16日（次のドコダ５と一緒！！）にWCAF(Web Creators Association 福井)で開催されるイベントでスピーカーをされるようです。この記事を見た北陸方面の方は参加されてはいかがでしょーか？

8月28日にHTML5の勉強会をワークショップ形式で行いました。
ファシリテータは、上田さん（@w3gjp, W3G.jp）と、芝さん（@SBKame）にお願いしました。

ワークショップでコーディングは、どうなるのかちょっとだけ不安でしたが、上田さんと芝さんの素晴らしい準備と進行で大成功でした！ありがとうございました。

当日のおおまかな流れ

1. 簡単な説明：15分
2. ワークショップ（グループ毎にディスカッション・コーディング）：90分
3. 各チームごとに発表：40分
4. 上田さんによる解説と質問：30分

各グループのコーディング結果

当日は約25人を6グループに分けてのワークショップを行いましたので、芝さんが用意してくれたサンプルと、各グループのコーディングデータをアップしました。

• サンプル
• Aチーム
• Bチーム
• Cチーム
• Dチーム
• Eチーム
• Fチーム

上田さんと芝さんからのコメント

上田さん

みんなの結束力すごかったですね！今度はこの結束力を活かして面白いものでも作りましょう！@hogenishiさんも言ってましたが、合宿とかやりたいですね。

芝さん

はやくみんな僕のポジションに気づいてください！

合宿したいですね！

参加者の感想

今回からアンケートをちゃんと？取りましたので…一部載せておきますね！

• HTML5は難しいなと思いました。他の方のマークアップ方法を見ることが出来たのも参考になりました。
• ワークショップ形式がよかったです
• 時間が短かったので、もう少しゆっくりやりたかった。
• グループ形式でじっくり考えることができて非常に楽しかったです。
• やっぱり聞いてるだけよりも手を動かし～の考え～のしながらだと、学んだことがより身になるなぁ　と思いました。
• とにかくワークショップはおもしろい！グループディスカッション的なのはどんどん取り入れたい
• やっぱり勉強会はツッコミがあった方が面白いね。
• スイーツ（あめ）が用意されてて感動しました
• トイレがきれいでした
• 自分以外の人がどんな風にコーディングする要素を決めているかが知れてとても楽しかったです。ポークチョップ形式ってほんとにいいもんですね。

あとがき

ワークショップはみんな満足してもらえたようでよかったです。僕は写真撮っててあんまり参加できず、、残念です。またやりましょう！

今月はWebパフォーマンスですよ！もう再来週ですねー。心待ちにしましょうしてます！
上田さん、芝さん、参加者のみなさんおつかれさまでしたー。

少々遅れましたが、7月24日に開催した、ゆるふわ愛されドットコーダーセッション2のスライドデータを公開します。

ツッコミや質問などは、TwitterでReplyしたりしなかったりな感じでお願いします。

スライドデータ

• JavaScriptとDOM (@hogenishi)
• ゆるふわ愛され基礎jQuery (@5509)
• 画像スライダーを作ってみる (@itasan)
• jQueryを使った簡単な実装例 (@rewish)

セッション3について

次回のテーマは「HTML5」です。よろしくお願いします。

ゆるふわ愛されHTML5ポークチョップ – ドットコーダーセッション3

他にもやりたいことはたくさんあるので、、
連番の大きなやつ以外は適当にどんどんやっていく感じでよろしくです。
10人規模くらいでもやりたいんです。近いうちに。。

テーマ内でお話いただける人はいつでも募集中です。お願いします。

ドットコーダーセッション3

タイトル

ゆるふわ愛されHTML5ポークチョップ

テーマ

HTML5

ファシリテータ

• @w3gjp
• @SBKame

形式

ワークショップ

開催日

8/28(土) 15:00～18:00

定員

30人（埋まってしまいました…）

参加表明

http://tweetvite.com/event/dotcoder3

ドットコーダーセッション4

タイトル

すこーし愛して。ながーく愛して。Webパフォーマンス

テーマ

Webサイトパフォーマンス

スピーカー

• @t32k

形式

セッション

開催日

9/25(土) 15:00～18:00 予定

定員

35人

参加表明

http://tweetvite.com/event/dotcoder4

(写真は@t32kさん提供です。)

何が愛されゆるふわやねんっていう感じなんですけど、ドットコーダーセッション2を7月24日に開催しました。

総合的に満足してもらえ…た？

会場がとてもきれいで、「トイレがよかった」「トレイがきれい」「トイレが快適」「トイレどんだけきれいやねん」「@tmshinさん提供の饅頭がうますぎる」「どんだけうまい饅頭やねん」「まるしん堂のお饅頭やばい」「まるしん堂」「いちご大福はもっとうまいらしい」など満足してもらえたようです。

セッション

• JavaScriptとDOM (@hogenishi)
• ゆるふわ愛され基礎jQuery (@5509)
• 画像スライダーを作ってみる (@itasan)
• jQueryを使った簡単な実装例 (@rewish)

Guest

• a-blog cmsの便利な機能(JS編) (@kazumich)
• 誰得プラグインのあれやこれや (@hiloki)

スライド

スライドについてはこのエントリで、追って公開していきます。

参加者のみなさんへ

良かった点、悪かった点など感想ありましたらぜひコメントしてください！不満は書きにくいものですが、どんどん書いてもらって結構です。全部受け止めます。でもゆるい感じは譲れません。ゆるい感じでしっかりした内容の勉強会にしていけたらと思っていますので、よろしくです。

さーて、次回のドコダちゃんは？

カツオです。いよいよ夏本番ということで、蝉もミンミンうるさい季節になりましたね。そんな夏な最中みなさんは海・川・山よりもHTML5、CSS3に興味があるようなので、次回テーマは『HTML5』です。

形式はワークショップ的な感じになる予定ですが、また追ってエントリで紹介しますね。でもうっかり定員もう埋まっちゃいました。そんな感じで次回もよろしくです。

7月

ドットコーダーセッション2「jQuery」
とりあえずjQueryは押さえておきましょう。

本編：http://tweetvite.com/event/dotcoder2

本編は人数埋まってしまいましたが
その後の懇親会は募集中です。

懇親会的な飲み会：http://tweetvite.com/event/docoda2

8月

ドットコーダーセッション3

9月

ドットコーダーセッション4

第1回はJavaScriptでしたが、第2回はもう少し範囲を絞ってjQueryです。
主にというか初級者向けの内容になります。

第1回の概要

テーマ

jQuery

対象

jQueryを始めたい人。基礎を押さえたい人。

形式

スクール的な感じかLTか調整中です。

スタンス

超ゆるく、楽しく。かたい感じにはしたくないので、気楽にどうぞ。

募集人数

30人（ただし幹事含む）

場所

大阪研修センター（大阪市淀川区十三本町1-12-15 ドルチェヴィータファースト3F）

日時

7月24日 15時～18時

会費

1000円

参加表明

Tweetvite

懇親会

会場近くで開催します。表明はTweetvite（本編とは別です）からどうぞー。勉強会に参加していない方もどうぞ！

キャンセルする場合

Yesの方はもちろんですが、Maybeの方ももし当日になってこられなくなってしまった場合、必ずキャンセルする旨を@5509に伝えてください。