HTML5の勉強始めました

いい加減手を付けなきゃいけないなぁと思っていたので始めました(遅!)。

まだ読み始めた所ですが、単なるマークアップランゲージだろーとなめてかかれない様子。
手強そう〜

ざっと読み始めたばかりだけど、最初にうっかり引っかかりそうなのが、シリアライゼーションかも。
特に、マークアップの省略方法については、HTMLルールでいくのか、はたまたHXTMLルールで行くのかで、違いがありそう。
当面、HTMLルールで省略しない方法にする方向で。

Error: Suspended

エンターテイメントなんですって

熱しやすく冷めやすい私が最近ハマってしまったモノ、そう、それはプロレス。
プロレスです(大事なことは2回いっとく)。

二人姉妹で子供の頃はほとんど触れることもなかったプロレス。
いかついおっさんが殴り合って流血して痛そうという印象のプロレス。
マニアックなファンが多くて他のスポーツとは一線を画した感のあるプロレス。
で、なんとなく敬遠していたプロレス。

そんなプロレスになぜかすっかりはまってしまいました。

きっかけは、友達に誘われた「戦国武将祭
「面白そうなイベントやるみたい、知り合いがご招待してくれるって」というので「はーい、いきまっす!」とノリ良く返事したものの、実は前日まで何のイベントかもちゃんと理解してませんでした(ゴメンナサイ)。
プロレスラーが出るというのも全く知らず、当日埼玉アリーナで待ち合わせしてからイベントの趣旨を知ったくらい。
でも来る物はで楽しそうなものは拒まない、普段からそんなもんです(開き直り)
割となんでも楽しむ性分だし!(居直り)

イベントの内容は、公式サイトに詳しくあるのでそちらを見てもらったほうがわかりやすいとは思うんでそちらをご参照あれ。
(余談ですが、声優ファンというジャンルがあるのを初めて知った、そしてGACKTがどれだけ人気があるのかを思い知ったイベントでもありました。カリスマってすげーね。)

実際見て、目から鱗だったのが、プロレスラーは飛ぶんです。
知ってた?やー、しらなかったよ。

プロレスラーといえば、バラエティに出ている猪木、武藤、蝶野、高田、佐々木健介くらいしか知らない私。(割と知ってるほう?)
あ、桜庭も知ってるや。
そんないかつい体をした人たちが、殴ったり関節技やったり寝技やったりするのがプロレスだと思ってた。
っていうか、そんなガタイでの人たちがプロレスラーだと思ってるから、軽々と飛んだりなんて想像できないじゃない?
それが、コーナーから飛ぶんだー、びっくり・・・と心が揺れました。

事前の友人の説明でエンターテイメントなのだということを知ったのも鱗でした。
今までジャンルはスポーツだとばかり思っていたのに、勝敗よりもお客さんの反応が大事なエンターテイメントだったと。
ここも地味に衝撃、スポーツ的観戦ではないのか・・・。

実際に見ていて、若い選手のスピード感は確かにすごいんだけども、ベテランの選手の存在感は安定した渋さがある気がしました。見せ方とかもおおーなるほどね!と思ったし。
選手それぞれに違った味があって、それぞれ魅せるための技を出していくのかーと、今まで考えてたものとは違ったものに見えました。

あとはねー、意外にイケメンが何人かいてびっくり。
しかもいいカラダ!ボディビルダーのような見せるためだけの筋肉じゃなくて実用性のある筋肉の美しさ。
そうきたら、女子的視点でもハマってしまうわけですよ。
帰りに駅に向かう途中でいかにも声優ファンな女子達が、「あのプロレスラーかっこよかったよね、帰って検索してみよう」と言っていたのもうなずけます。
プロレスって女子にも引きがありますよ。
GACKTファンはじゃんるが違うかもしれないけどw

イベントとしても珍しい類のものだったかなー。
戦国という切り口で、プロレスラーだけじゃなく、ミュージシャン、声優、パフォーマーと違ったジャンルで出演されていたのに、まとまったイベントにだったと思います。
集まったファン層の違いが妙なカオス感を醸し出しているのもまた面白かったし。

で、ミーハーなにわかプロレスファンになった私が、更にはまるに至る一つ大きな要因もあったのですが、それはまた後日ということで。

もしドラ読み終わった

とても読みやすかったので、あいた時間に残りを一気に読んだ。
ストーリーはよくある感じなのだけど、これがビジネス書というのが新しいのかも。

なんとなく小難しい印象があったものの間口を開けて、新規ユーザの開拓に貢献したんじゃない?この手法は流行るんじゃね?

少しわかった気にさせてくれるので、次のステップに踏み出そうという気分になった。
活字アレルギーあるけど、あんまり戻ることなかったのは情報量が少なかったというだけではないと思われ。

まあ、でも、それなりの内容を求めている人には不向きなのかな。
あくまで躊躇していた人たちには良いのでは。

Error: Suspended

2010.04.15 URB COLOR MEETING

URBのロゴ・カラーを決めようぜという事で、みんなでよってたかって話し合い。カラーチップとか使うとか、プログラマではなかなかできない経験だったので新鮮。

とりあえず、近しい人達からの意見でオマエラ紫でいいんじゃね?って言われていたので、メンバーでこれはと言う紫をいくつかチョイス。

んで、写真みたく白い紙に全部貼って蛍光灯の下で確認、この中で最も目に入る色を3つくらい選んで最終選考した。
へー、デザイナさんってこんなプロセスを経て色決めるのね。あらゆるところでこの色を使うことになると思われるので、こういうやり取りは大事なのかも。

しかし、意外とみんな裏方の仕事を続けてきたせいか、最後の決定はお互いにドウゾドウゾのダチョウさん状態にw
最終的には赤とも青ともつかないニュートラルな紫に決定っっ!!\ワー/

印刷用とWEB用にそれぞれ色を決めました。紙って大変なのね、勉強になるわ〜
最後に決まったデータは何だったっけな?とにかく、RGBとCMYKで準備したとよ。
DIC: 189s
C: 60% M: 95%
RGB: 7F2287

で、まずは色とロゴ決まったんでお茶。こういうの大事にして行きたい所存であります。

もしドラ読んでる

もし高校野球の女子マネージャーがドラッカーの『マネジメント』を読んだら
略して「もしドラ」読んでます。そう、まだ半分位w

ドラッカー気にはなってるけど、なんか今更感が往年の後藤真希ばりにあふれちゃうので躊躇してたけど、少し話題になってたので勢いでゲット。

設定とは言え他人の読書感を読書するという変な感じだが、読みやすいス。
特に自分、読書嫌いなので仕事の専門書以外あまり読まんのね。
きっと小説に対するラノベのような、ライト・ビジネス書の幕開けですよ、ラノベ読んだ事ないけど。

半分読んだくらいで、ドラッカーのエッセンスはちょっぴりです。
多分、これ読んだらエッセンシャル版→完全版と大人の階段のぼって行けばイイんでしょうか?
しかし、読んでるとイヤイヤそんなにうまく行かんだろとか、メンバーが意外と最初から優秀じゃね?とか、なんか違うところばかり印象に残ってしまうんだけど、これはこれでイイのかな?

Error: Suspended

HTML5 / 05. Form input

Formについて。なんだか色々追加されている模様。
詳しくはコチラを見て頂くとして、つまみ食いで見て行きます。

ブラウザはfirefox 3.6, Chrome 5.0.342.7 beta, Safari 4.0.5,  Opera 10.10, OSはMac OS X 10.6.2 です。簡単ですが、こちらから確認できます。

追加属性について

まずは、追加された属性から。今まで、Javascript で対応していた様な事が標準で出来るようになるみたいです。

autofocus

ページ見たときに最初からフォーカスが合うようになります。(文字カーソルが設定され、すぐにテキスト打てる)
複数つけるとあとに記述した方にフォーカスされます。

firefox ×
chrome
safari
opera ×

autocomplete / datalist

選択候補が補完されます。<datalist>で選択候補の一覧も作れます。本格的なものを作る場合はこれまで通りJavascriptとか組み合わせなきゃだけど、簡単なものならこれでも。
プルダウンとテキストフィールドの組み合わせでやってたような、タグ付けみたいなところで使えるかも。

firefox ×
chrome ×
safari ×
opera

placeholder

テキストフィールドにうっすら情報を表示してくれるアレですね。
autofocus設定しちゃうと消えちゃいますね。結局入力するときに見えないので個人的にはテキストフィールド下に補足テキストでいい気もしますが、Webアプリとか常用するものはあるとイイのかな。

firefox ×
chrome
safari
opera ×

required

必須かどうかチェックしてくれます。name属性の指定が必要なので、軽くチェックだけと思って省くと動作確認できませんでした。
すべてに言えることだけど、サーバ側のチェックをしなくてもよくなる訳じゃないので、あくまでユーザの利便性向上って範囲で。

firefox ×
chrome ×
safari ×
opera

他にも入力値に正規表現を使える pattern、数値の上限/下限を指定できる max/min とかあります。

追加要素について

次に追加されたInput要素。上記の属性と組み合わせるとイロイロ便利になるのかな。

search / tel / url / email

フォームの見た目を調整しつつ、場合によっては入力値のチェックも。operaだとメールアドレスもチェックしてくれますが、この辺は微妙な気も…

旧jphoneで/+?とか使えたんですが、これは通りますね。連続した … とか @直前の . とかピリオド関連もdocomoで使えたのですが、これはエラーに。今はこちらにあるように使えないようですが、昔から使っている人は引き続き使えている模様。
メールに関しては日本の携帯がアレなので、使わない方が無難な気もします。

全角を半角にしたり、ひらがなとカタカナの相互変換とかあるといいのですが、まあ日本だけの問題ですからね…

search tel url email
firefox × × × ×
chrome × × ×
safari × × ×
opera ×

date / time / datetime / datetime-local / month / week

カレンダー入力ができるようになります。min / max / step といった属性の設定が可能。
これデフォルトで出来ると助かりますが、使い勝手が悪いとみんな使わなそうな気も。今のところoperaだけですが、もう一声な感じです。

firefox ×
chrome ×
safari ×
opera

number

数値入力のみ受け付けます。こちらも min / max / step が設定可能で、step は小数も使えます。
全角で入力すると無視されますね…たまに気にせず入力する人もいるので微妙ですね。テキストフィールド横に数値を上下できるボタンがでるのはちょっとイイかもですが。

firefox ×
chrome ×
safari ×
opera

range

スライダで値を選択できます。min / max で範囲を指定できます。(デフォルト0〜100)

firefox ×
chrome
safari
opera

他にも追加要素はありますが、まだまだ各ブラウザの実装を待たねばならない段階ですね。今のところoperaが一歩リードというところでしょうか。
各要素と属性の組み合わせについては下記が詳しいので参考にして下さい。
HTML5.jp / input要素

Error: Suspended

この本を読みながら勉強中

HTML5 / 04. Video

Canvas関連たくさんあるけど、目的もなく円とかグラフとかやってもきっと忘れるので、ここは華麗にスルーを決めて次に進もうw

で、<video>タグ。こちらも追加タグですが、今後の動向に注目。
Mozilla, Googleともに誰もが自由に使えるフォーマットの模索をしているようです。

> @IT / ネット参入に“料金所”は要らない、Mozilla
> ITmedia News / YouTube、HTML5動画プレーヤーをテスト公開

YoutubeでもHTML5でテスト配信しているようです。

Youtubeの動画を引用する時に、<video src=”http://www.youtube.com/v/****”></video> 的な記述が出来るのはまだちょっと先のよう。
これできたらスゴイよね。
> HTML5.jp / video要素 – html5doctor

また、今のFlash使ったみたいに、どのブラウザでも動作するというのも少し様子見なのかな…
> マイコミジャーナル / HTML5 video、ブラウザ対応状況とコーデックまとめ

こちらにFirefox3.5以上で動作するサンプルがあります。
> 株式会社あゆた / Video要素のサンプル

videoタグの要素についてはコチラ。
> WHATWG / The video element

Error: Suspended

この本を読みながら勉強中