HTML5勉強会19回目に行ってきた。

久しぶりにHTML5の勉強会に行って来ました。今回は、LTはなくディスカッションベースの勉強会となるということで、お誘いいただき参加させてもらいました。
スタンスとしては、やはりIAとかUXの文脈で少しでも話ができたらな・・という感じでの参加でした。勉強会で感じたことなどをレポートします。(お酒が入った状態での勉強会であったので、一部曖昧ですが、そこはご勘弁ください)

続きを読む

[HTML5]勉強会に行ってきた。HTML5とIAについても考えてみた。

先週の話になりますが、9/17に行われたHTML5+αの勉強会に行ってきました。今回は、マークアップを軸にした内容ということで、個人的に非常に興味深いなぁと思いながらの参加でした。

今回の勉強会では、HTML5でリリースされたタグでどうマークアップするのかというのをテーマに、実際にマークアップをしながらの会でした。マークアップというのは、情報にどう意味をつけるかということが重要になってくるのですが、それはマークアップする人それぞれで感覚が異なってきます。今回においてもその状況ははっきりと見えてきました。3グループにわかれてのマークアップ検討になったのですが、3グループ共に共通の解釈の部分もあれば、異なる解釈もあり。個人的に思うに、その解釈の違いをこういう場で共有することが非常に意味があるものと思います。答えのないマークアップの中で、どこまで共通項目を増やすことができるかということをマークアップする人は考えていくべきだと思います。

HTML5の勉強会に参加するときは、少なからずIAのことも頭にいれて考えているので、今回もそれについても少し・・・。

続きを読む

HTML5 TechTalk @Fukuoka

去る4/24にHTML5 TechTalk @Fukuokaに行ってきました。このセミナーは、福岡で行われるイベントとしてはかなりビッグスピーカーが集結するイベントでしかも無料ってことで喜びいさんで行ってきた次第です。

セミナーで印象的だった言葉などをメモ程度で申し訳ありませんが、記載させていただきます。

続きを読む

[HTML5]勉強会にいってきた4 ~IAについて話した~

先週の金曜日、HTML5の勉強会に行ってきました。
今回は、先日立ち上げた(・・・といっても何も動いていないですが・・・)コミュニティのKIAbaseについての案内とIAについて。。という感じでスピーカーをさせていただきました。

IAについての認知は、福岡という土地もあってか、あまりまだ知られていないというのが実態でした。HTML5の勉強会にて、マークアップなどの話をさせていただくときに、IAについて言葉の上で広めていたものの、これまでの参加者以外の方には、なかなか知られていない分野でした。

話した内容をカンタンにまとめると・・・。

・IAって聞いたことある?
・IAとは、「複雑な情報をわかりやすく伝えるための技術」(参考:「IA100」)
・そんなの当たり前じゃん!
・でも当たり前だけど、サイトで迷ったこととか、情報になかなかたどりつけなかったことはない?
・当たり前なのに、なぜそんなことが起きるのか?
・無意識にしてるから
・IAは色々と、やることがあるし、答えもないから複雑。まずは、意識することが必要だ

続きを読む

[HTML5]勉強会にいってきた3

ちょっと仕事も落ち着いたので、報告とフォローもかねて書き込みます。
先日、HTML5+αの勉強会 第4回目に行ってきました。正直、体調が思わしくなく、あまり本調子ではなかったけど、セッションをひとついただいて、今回はタグの話をしてきました。

なぜ、ここに来てタグの話をしたかというと、マークアップエンジニアとして、タグの重要性をもう一度考えなおしたかったこと、それからプログラマーの人たちが結構多い、この勉強会でタグの重要性を語ることで、プログラムの品質をあげるきっかけになれば・・・というところ。

このセッションで言いたかったことは、ただひとつ。

タグには意味がある。その意味をもたせることがすごく重要。

ということにつきます。

まず、なぜタグというものができたのかというのを考えてみて欲しいと思ったわけです。ブラウザのためにタグができたのではないということです。情報の整理のためにタグという付加情報が出来上がった。ひとつの文書(ドキュメント)を細分化し、その情報に対して、タグと言う付加情報を与えることで、なにげにある情報に意味を持たせたわけです。

僕はこの考え方は、インフォメーションアーキテクチャ(以下IA)につながるものと思っています。文書というのは情報の塊です。その塊を整理してあげることで、例えば分類がしやすくなる。例えばざっと情報を得ることができるということだと。それは情報の構造化。つまりはIAです。

マークアップという作業は、ページ単位でのIAだと思っています。ただし、そこには答えというのは存在しません。ただ、考えてやるのかやらないのかによって、その質が現れるし、その先の効果というものが見えてくるのではないしょうか。

これは例えば、「歩く」という動作で考えてみるといいかもしれません。我々は、日々「なにげに歩いています」。そこには特別な意識もなく、行われている動作です。そこに、「正しい歩き方」を意識することで、ダイエット効果であるとか、姿勢がよくなるとかの効果が出てくるわけです。

文書の中のマークアップという作業も同じこと。マークアップはブラウザで表現するためだけにするのであれば、「なにげにマークアップ」でも問題はありません。それは我々が「なにげに歩いている」ことと同じようなことです。特に問題もなくブラウザで表示は可能です。そこに意味を持たせたタグをつけることで、「なにげ」から脱却できるのです。という話をメインにもってきたのです。

プラスアルファで言いたかったことは、プログラマーの方々にむけたことでした。
世の中にある様々なプログラム(ASP,APIを含む)は、情報を集めることには長けています。そして情報を集めるという意味で考えるとHTML5になって、タグの情報が細分化されたことによって、より集めやすい状況になっていると言えます。

ただ、集める情報も使われて当然ということを考えましょうということ言いたかったわけです。具体的にいうと集めて吐き出された結果はきちんとした情報構造になっていますか?ということです。
情報を集めるというのは、その人のフィルターがかかったものになります。情報が雑多にある昨今において、情報の価値を決めるひとつの要因としては「個人のフィルター」があると思います。
そのフィルターがかかった情報に価値があると思うわけです。なら、その情報をさらに多くの人に提供すべきではないかと思うわけです。情報を提供するなら自分たちが集めやすかった形としてアウトプットする必要があるのではないでしょうか?ということです。それはマークアップでありタグの意味付けということだと思うわけです。

情報は今後集めるだけではなく、情報をさらに使ってもらうという方向にもっていくこと。それはすべての制作というカテゴリーにいる人達が今後意識していかないといけないことだと思います。

そんなことをセッションで語ったわけです。せっかく最近勉強中である、IAの話とかも含めて進めてみたかったということで・・・。まだまだ全然答えが見えないことですが、少し考えてみたかった。それをタグというアプローチからせめてみたという感じです。

思うままに書いたので、重複している内容もありますが、そこいらはご勘弁。
またそんな機会を見つけて考えてみたいと思います。

スライドをシェアします。

[HTML5]勉強会にいってきた2

去る11/6に第1回(・・・前回は第0回だった)のHTML5勉強会にいってきた。
今回は、ありがたいことにリクエストをもらって、HTML5の勉強会でありながら、CSS3の話をすることに。
第2回目のスピーカーってことで、前回の反省も踏まえながらのセッション。約30分だけど、意外と盛り上がった。

CSS3については、まだまだ追いかけれてない部分もあったり、色々と状況が変わったりってあるので、なんとも言えないけど、とりあえず、話をしてみた。

HTML5の勉強会には、なぜか?という感じだけどプログラマーの方が多く参加される。
前回は特にそれが顕著で、ほとんどがプログラマー。CSSコーディングをしたりマークアップをしたりという人が少なかったので、今回はかなりの期待をもっていってみたら、結構いた。
というか、プログラマーですが、CSSも書くよって人も多かった。

そんな中ある知識の中からCSS3の話。
主に、強化されたSelectorの話や、transition、transform、font周りの話をメインにデモをしながら・・・という感じ。

意外というかプログラマーの人が多いからなのか、trasitionなどの効果(デコレーション)的な部分よりもSelectorの話が反応がよかった。

例えば、

tableで表組みを作った時に、偶数番目と奇数番目の行を色分けするのに、
tr:nth-child(odd)とかtr:nth-child(even)で簡単にできるよー

って話などをしたら、ほへーってみんなが言ってくれた。書き出す形式などであまり気をつけなくてもよくなるってことでやはり関心が高かったんだろうと思う。

そんな中 コメントとして、
「HTML5やCSS3が出てきて、より分業化が進むようになるね」
というのがあり、初めは正直「?」という感じだったけど、話を聞いてみると確かにそうだ。
つまり、今まで分業をしたようでも結局は、何かしらの要望が入っていたわけ。それがなくなっていくね。という話。例えば、先ほどの例でを使えば、

表組みで書き出す時には、偶数番目と奇数番目の表示を変えたいから、それぞれをプログラムで判断して書き出す時にclass名を付けておいて。

などという要望がプログラム側に必要だった。

それが、CSSでそれが制御できるようになるとプログラムからは、そこのあたりを気にする必要がなくなる。という感じかな。

ということを色々考えると、HTML5やCSS3が出てくることで、共通言語としてはHTMLを意識すれば、あとはどうにでもなるという感じに近づいてくるのでは?と思った。

ただし、これには、ひとつの壁があると思う。
それは、HTMLをきちんと書くことができるか?だ。文書構造を意識することがプログラマーとデザイナーの双方でできれば、HTMLは共通言語として伝わっていくだろうけど、そうでない場合破たんが生まれるような気がする。

まあそんなことを考える勉強会だった。

懇親会のときには、みんな意外とIAに興味をもっていたので、うれしかった。
いつかIAについても少し触れながら話がしてみたいと思うが。。。しっかり勉強しないとねという感じだった。

とりあえず、今俺が読んでるIAの本は紹介しておいた。

[HTML5]勉強会にいってきた。

HTML5の勉強会に行ってきた。

いさんで行ってみたけど、集まった人たちが基本的にプログラマーの方々だったので、ちょっと場違いかなとも思いながら、今の自分でできることを話した。

初めてスピーカーをしたけど、話をしてみると結構面白いもので、
いろんな方から近寄ってきてもらえた。

発表自体もうまくいったので、まーよし。

今回は、いろんな話はせずに、HTML5になると、今以上に構造を意識する必要があるよー。ってな話をさせてもらいました。IAとかにもかかわってくるかなってな話もおまけでしました。

スライドはslideshareで共有します

[HTML5] sectionタグとdivタグの使い分けについて

HTML5を勉強しているときに、ちょっと気になったのが、sectionタグとdivタグの使い分け。
これまで、なんでも分類をするときにdivタグを用いてきた。

でも、sectionタグが増えた。

sectionタグはどうつかうんだ?ってことは、sectionタグがあれば、divはいらねーのか?

そんなことを思ったが、僕の持論はこう。

sectionタグは、文書的な意味合いで使う。
divタグは、CSSなどのデザインでどうしても使わなきゃできねーよって時に使う。

そこだと思う。

HTML5になって今よりもっと構造的になってくるんだろうな~とあらためて思った。

[HTML5] HTML5 hタグについて

個人的に調べているので、間違ってたらまた訂正するということで。

HTML5において、hタグ(見出しタグ)のポジションとしては、「セクションの見出し」となる。

従来からあるh1、h2、…などのタグは、「セクションの見出し」を表す要素としてHTML5でも利用できる。

って書いてあった。
ということは、セクションごとに見出しが設定されるということになるので、

これまで、一応の考えであった、「ページに一つしかh1タグを設けることができない」とあったものがなくなるということになる。

つまり1ページに複数のセクションが存在し、そのセクションが同列という文書構造である場合、h1タグが複数存在しても何も問題がないということになるのでは?

結局は文書構造をしっかり理解したうえで、マークアップするということに他ならないわけだが。。。

参考サイト
詳解! HTML 5と関連APIの最新動向 – 新タグ&API編

http://journal.mycom.co.jp/special/2009/html5-1/005.html