いってきた│でろぐ

土曜日に何回か参加している勉強会ドットコーダーのセッション3「ゆるふわ愛されHTML5ポークチョップ」に参加してきました。
変な名前ですが要はHTML5を勉強しようというものでした。
HTML5はまだ策定中のHTMLの新しい仕様なのですが、わりかた出来てきているのでここらで押さえておいた方がいいなと思っていたので参加しました。
今回の勉強会はいつもと違ってワークショップ形式という事で参加者を6つのチームに分けて、実際に主催者が用意してくれたデザインカンプを元にデザインをHTML5で時間内にチームでコーディングするというものでした。
制限時間後は各チームで「どうしてこうなったのか？」というコードのプレゼンを行いました。

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

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

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

<hgroup>
　<h1>ここにh1</h1>
　<h2>ここにh2</h2>
</hgroup>

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

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

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

コードだとこんな感じ

<article>
 <header>
  <h1>ここにh1</h1>
 </header>
 <p>ここに本文</p>
 <footer>
  ここにフッター
 </footer>
</article>

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

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

<p>
日時 <time datetime="2009-08-30">2009-08-30</time>
</p>

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

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

コードだとこんな感じ

<figure>
 <img src="画像のURL" alt="画像の代替文字列">
 <figcaption>画像の注釈</figcaption>
</figure>

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

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

コードだとこんな感じ

<blockquote>
 <h1>引用タイトル</h1>
 <p>引用本文</p>
</blockquote>

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

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

コードだとこんな感じ

<p>
 文章がここに入る<em>ここは強調</em>文章がここに入る<strong>※強い重要性</strong>
</p>

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

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

コードだとこんな感じ

<article>
 <header>
  <h1>いぬ</h1>
 </header>
 <p>犬ってかわいいよね</p>
</article>
<aside>
 <h1>ねこ</h1>
 <p>ねこだってかわいいじゃないか！</p>
</aside>

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

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

コードだとこんな感じ

<footer>
 <address>
  <a href="#">制作者連絡先</a>
 </address>
 <p>
  <small>© copyright 2010 制作者 All Rights Reserved.  </small>
 </p>
</footer>

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

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

8/24の水曜日に仕事でよいお付き合いをさせていただいているサーマルソフトさんが主催されるサーマルユーザー交流会2010in Kansaiにお呼ばれしたので参加してきました。
サーマルソフトさんは不動産業界では知らない人がいないと有名な「売買くん」や「賃貸さん」などのソフトを開発している会社さんで不動産屋さんに大人気の素敵な企業です。
というわけで今回のユーザー会はそんなサーマルソフトさんが主催するので参加しているのは不動産業界の方が多かったです。
普段では聞けないようなお話も聞けて大変勉強になりました。

ますはビール。夏ですからね。

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

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

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

雨の降りしきる日曜日に京都新聞文化ホールで行われた男の育児シンポジウムに行ってきました。
このイベントはその名のとおり育児をがんばるお父さんの為のイベントです。
僕自身も男が育児をするということの大切さをもっと周知していく事が大切だと思っていましたので参加しました。
今回のイベントは男性の参加率がとても高かったのも印象的でした。
主催者の方いわく「こういうイベントは男があまり来ないのに今回はすごい！」という事でした。
少しづつ世間の流れが変わっていっている事をなんとなく実感できた気がしました。

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

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

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

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

先日人生で初めて競馬場に行ってきました。
場所は京都競馬場。京阪の淀駅から行ってみました。
競馬が好きというわけでもないんですが（僕はギャンブルは一切やりません）、子供向け・ファミリー向けの施設やイベントが充実しているらしいという話は聞いていたので気にはなってました。
家からはバスと京阪電車を乗り継いでの行程もバスや電車を愛する息子にとっては楽しいイベントですｗ

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

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

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

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

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

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

遊具で遊んだり

滑り台で遊んだり

走り回ったりと大興奮！

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

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

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

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

日曜日は天気もよかったのでふらっと山崎へ行きました。
駅を降りると心地よい風が吹いており、なんだか楽しい気分になってきました。

電車も近いし天気もいい！最高！

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

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

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

桜がとてもきれい

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

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

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

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

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

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

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

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

連休初日の土曜日にコーダー・デザイナー向けの勉強会「.coder」に参加してきました。
今回が初開催という事でとても楽しみにしていたのですが、予想よりもまったりした雰囲気と和やかな感じで進行してとてもほのぼのしたいい感じでした。

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

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

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

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

水曜日にデジハリ大阪校であったIT CIRCUS 2010 IN OSAKAに行ってきました！

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に手をだすつもりもありませんし、デザインで勝負するつもりもありません。
なのでやはり餅は餅屋思想でそういう方々と協力して行く方向性でいこうという思いを新たにしました。

10/18（日）に開催された大阪アフィリエイト見本市2009に僕も妻と息子を引き連れ参加しました。

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

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

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

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

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

こんな感じです。

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

完全に熟睡ですｗ

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

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

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

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

いい年してはしゃぐ馬鹿

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

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

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

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