CSS Nite in Shinagawa, Vol.2「HTML5+CSS3 Web Camp 2012」でHTML５のあれこれを聞いてきました。
※（以下、灰色文字で書いている箇所は私視点です。）
＊セッションタイトル
１.HTML5が拓く未来 ～HTML5との正しいつきあい方～ 羽田野 太巳さん
２.HTML5セクションによるWeb制作の基本 益子 貴寛さん
３.CSS3で変わるWeb制作 鷹野 雅弘さん
４.開発支援ツールを使った最新IEへの互換対応 物江 修さん
５.Internet Explorer 10とマイクロソフトにとってのHTML5 春日井 良隆さん
６.Productivity Future Visionを読み解く 全員
ーーーーーーーーーーーーーーーーーーーー
１.HTML5が拓く未来 ～HTML5との正しいつきあい方～ 羽田野 太巳さん
WEBの世界はどんどん進化していますが、実はXHTMLが標準化されたのは2000年でした。
それまで１０年は同じテクノロジー（WEB標準）をずっと使っていて、
WEBが進化していたと思っていたのはシルバーライトやフラッシュなどのプラグインが進化していたからだそうです。
◇伝えたいこと
・ウェブサイト性悪市場はすでにレッドオーシャン
・他の業界の動向にも目を向けよう
・HTML５をはじめとしたウェブ技術が業界をつなぐ
・HTML５がウェブ業界の生きる新たな道を拓く
この４つの文章に今日伝えたいことが集約されているそうです。
以下掘り下げたお話です。
○ ウェブ業界三重苦
・高度化するニーズ
クールなサイトを普通に作れると勘違いされるようになりました。
シンプルで一見手が込んでいないように感じるサイトでも、
実際に作ってみると、いかにデザインセンスや動きが良いのか、考えて作られていて苦労のポイントとかが痛いほど分かります。
私のスキル不足も大きく関係していますがね。
・断片化/多様化する端末
Androidの中でもバージョンが様々
１０年前はPC向けだった（苦労はブラウザ間くらい）
今はディスプレイとかブラウザ以外にも色々と出てきました。
・下がり続ける制作単価
お客さん（会社）は減りつつある。
１円から株式会社を名乗れるようになったので数自体は増えているようですが、「お客様」は確実に減っているとのことです。
○ HTML５はその救世主になり得るのか？！
【現在の動向】
アプリ基盤となるウェブ技術
サービスのマルチデバイス対応（テレビとかでも見れるように・・・）
○ サービスの利用形態の変化
Buy Once, Read Everywhere
Pay Once,Play Anywhere
新しいデバイスを買う人は新しいものを買いやすい人が多い傾向にあり、
古いものを使い続ける人は新しいものが出ても飛びつく率が低いそうです。
スマフォ購入数が去年は非常に多く（円グラフの割合半数）、スマフォ向けに新しいものを作った方がいいのかもしれない。とのことでした。
スマフォのニーズが上昇・・・
セミナーのどこかで言われたように今の状態は異常でバブルが弾けるようにスマフォブームは落ち着くかもしれません。
スマフォに焦点を当てて事業を広げるのは怖いですね。。。
それで当たる可能性もありますが。
○ 基盤の違い
Android
WindowsPhone
iOS
・プログラム言語が全てバラバラだからコストが３倍かかるけど、一つのサービス（同じ機能）をリリースするのに３倍もかけられません。
ソフトウェア産業は人件費が一番かかる。とのことでした。
・今、一度書いたらどこででも動かせるかもしれないものとしてアプリ世界からHTML５が注目されています。
「どこででも動かせる」
これは「理論的にはあり得ること」だそうです。
○ あらゆるＩＴの基盤を変えるのがHTML５
・ウェブからネイティブアプリへ変換
PhoneGap
Titanium Mobile
こういうツールを使えばjsの知識があれば変換できるそうです（限界あるけれども）
wikiはPhoneGapで作られているそうです。
○ コンシューマー向けの機器を企業に取り入れようという流れが増えています。
MEAP（Mobile Enterprise Application Platform）：HTML５で作ることが増えているとな！
○ ウェブの応用範囲拡大
・テレビがスマートフォン化する。
・任天堂DSについているブラウザはOpera
Operaは本業で組み込み式のもの作成
Opera TV Store（ウェブテクノロジーだけで作っている）
auのガラケーフルブラウザはOpera・・・
PCで無料で配布されているのは宣伝とのことです。
・Docomoのブラウザ作ってたとこACCESS
プラットフォーム提供
ここもTVでHTML５をサポートしようとしているそうです。
・電子看板
看板をディスプレイで表示
デジタルサイネージと言うそうで、
これもウェブで出来るじゃないかという考えになっていっているとのことです。
空中ディスプレイ
プロダクトとして事業者向けにこういったテクノロジーは既に出ているそうです。
※レッドオーシャン
→競争がすごい世界。どんだけ頑張ってもお金にならなくて血の海
「今の時代」
※ブルーオーシャン
まだ競争になっていない世界。お金稼げる
「今はレッドオーシャンだけどウェブの知識は他の業界にも生かせる。」という心強いお言葉を最後に頂きました。
（WEB業界で生き残っていくべく色々な知識をつけていきたいと思います♪）
２.HTML5セクションによるWeb制作の基本 益子 貴寛さん
○ 今のWEB業界のトレンド
・パララックス効果
・レスポンシブWebデザイン
HTML５
新規案件/フルリニューアル
「もう採用しない理由がない」とのことです。
どんどん採用していきたいですね。
○ HTML５の三本柱
・セマティクス
文書構造
マイクロデータ
・互換性
マルチデバイス
クロスブラウザ
プラグイン不要（ここ重要）
プラグインがあるとスマフォで熱暴走して強制シャットダウンの可能性も起こりうるそうです。
・WEBアプリ
APIs
○IE6のシェアは５％は切ってるはずで、IE６と７足して１０％は切っているとのことです。
これからのベースラインはIE8以上で！
・HTML５は、DOCTYPEがシンプルに！
一歩進むために、DOCTYPEだけ変えるサイトも多いそうです。
HTML構文XHTML構文のどちらも利用可で、
今後のことも考えたらDOCTYPEだけでも変えた方がいいのかも？だそうですよー。
で書けるように。 今までは
と書いていたのでスッキリします。
他にも、content typeがいらなかったり色々と省略が可能でhead内がよりスッキリします。
・CSSの適用目的だけならばdivを使うけど、構造的な区切りはsectionを使います。 一部の要素を念のためブロックレベル化しておいた方が良いそうです。
ここでチェックできます。 http://validator.w3.org/
1waningはHTML５は実験的だよという内容のため気にしない。
・IE6~8まではhtml5を認識しないので以下で対応。
printshivが入っている方はプリントする時にも対応させるやつだそうです。
以前、IEに対応させる別のjsを使おうとしたのですがIE6で重くなりすぎて開かなくなってしまいました。
色々と実際に触っていった方が良いですね。
・近頃話題
Twitter Bootstrap
リッチなユーザーインターフェイス
・articleは本文のところ（sectionの中）
navは重要なナビゲーションと判断するものだけに使います。
例えば、領域が大きいものとか。
・asideは本文とは直接関係しないコンテンツ
イメージ写真、広告、ブログパーツ、ウィジェットなど
h1〜h6は音声読み上げを考えるとひとまずこれまで通りがいいかもだそうです。
○ 検索エンジン最適化の面でもHTML５が重要になる。
・アウトラインを意識した構造化スマフォサイトの利便性の向上
HTML５で作っておけば将来的にいいかも
HTML５でベースを作っておきましょう。
hgroupいらないのではという提案なども色々ある。
一応残っていて、最終的にどうなるかは分からないので使わない方が良い。
そもそもサブタイトルにH2使うのはおかしい。とのことでした。
３.CSS3で変わるWeb制作 鷹野 雅弘さん
メニューの一番右だけボーダー表示させない場合、みなさんだったらどうしますか？
css3を使いますと、、、
li{
border-right: solid 1px #888888;
}
li:last-child{
border-right: none;
}
最後のliにclassふってごにょごにょしなくてすみますね！
○ 画像化の手間が減る
・ページ表示が早くなる＆メンテナンス性の向上
○ 対応状況は・・・？
詳しくはCSS3 Propertiesサイトへ
○ 対応方法
・何もしない
・フォールバック・・・代替の値を使うbackground-colorのrgbaとか
・ベンダープリフィックス・・・-webkitとか暫定的に対応させる
-o-
-ms-
-webkit-
-moz-
・ライブラリでカバーする
http://css3pie.com/
・FW CS６
グラデーションや角丸の画像を作成したら
cssのプロパティにソースが出てきます。
CSS3,please!というサイトで色々と遊べるそうです。
こんなサイトです。
Grad3サイト
グラデーション作れます。
こんなサイトです。
○ レスポンシブWEBデザイン
Media Queriesサイト
多くのサイトが掲載されており、勉強になりますし見ていて楽しいです。
○ 「静的なカンプは過去の手法になるかも」
巷ではそんな話が出ているそうです。
PSとかFWでカンプを作って切り出すやり方は過去のやり方。
動くモップアップを作っていくべきかもしれないとのことです。
○ 今流行のレスポンシブWebデザイン。
「PCと同じ画面が表示されると思ったのに、、、」
使う側からすると微妙なことも。
ロイヤリティの高いユーザーであればあるほど、
「表示が違う」とか「コンテンツがスマフォだとない」とかとか。
作り手の配慮が必ずしも喜ばれるわけではない。
スマフォでどういうコンテンツをどういう時に見たいのかユーザー視点で落とし込んでいく必要がある。
難しいけれども考えなければいけないことですね。
4.開発支援ツールを使った最新IEへの互換対応 物江 修さん
結構高度でしかもまだ出ていないIE10のお話でした！！
・Internet Explorer 10 F12開発者ツール
・Compat Inspector
・Fiddler
F12開発者ツール
Internet Explorer 10 標準搭載です。
IEで他のバージョンを見ることが出来ますが、ここで変えて見てもレンダリングのルールが古いブラウザになるだけで１００％ではないそうです。
全く同じブラウザにするには、これ
Expression Web SuperPreview
完全な比較ができます。
IE6対策で、他に２つ使っていましたがどれも表示が異なる場合がありました。
毎回「どれが正しいの？！」となっていましたが「全く同じ」だと仰っていたのでこちらでの表示を信じます♪
以下IE10からの機能
検証＞WCAG チェックリスト
ツール＞ユーザーエージェント文字列の変更
ツール＞サイズ変更（メディアクエリの確認ができる）
ツール＞ルーラーを表示できる
ツール＞カラーピッカー
カラピッカーなど色々な機能が標準でついているなんて・・・
IE10、早く試してみたいです
・Compat Inspector
ソースに入れてページを見ることで、赤マークが出てきたり黄色マークが出てきたり。
修正していくことで、他のwebページブラウザで問題なく動くページが作れるそうです。
・Fiddler（フィドラー）
レスポンスを書き換えてオンライン上にあるサイトもローカルと混ぜて検証することができます。
デモを見せて頂きましたが、なんか凄かったです
５.Internet Explorer 10とマイクロソフトにとってのHTML5 春日井 良隆さん
2014年4月8日Windows XP SP3のサポートが終了。
「IE6サポートやめよう。別料金〜」マイクロソフトの方ですらこう仰ってます！
今、スマフォ利用が多いためHTML５に注目が集まっている。
HTML５の利用にはWebページとWebアプリケーションがあります。
IE6は遅くてもっさりしていてそのイメージが残っているけれども今は体感速度は他と同等
しかも、IE10はより早くなるそうです。
注意する点として、
Metro版IE10はプラグインをサポートしないそうです。
ASUS(アスース)やSurface機器のお話をして頂いたり、キネクトプレゼンテーションが凄かったり・・・！！
あとは、この一言が心に残りました。
「Javascriptを使えない人は生き残っていくことは厳しい」
私、使えません。
ひえー！＞＜
6.Productivity Future Visionを読み解く
パネルディスカッション形式でした。
Productivity Future Vision
youtubeが開きます。
この動画・・・色々と興奮しました；D
ぜひ見てみて下さい。
確か、３年ほど前。Androidが日本市場に出てきました（・・・ですよね？）
Googleが作ったプラットフォーム（Android）が搭載されたスマートフォン。当時、「プラットフォーム・・・？Google・・・？
google、本格的に携帯に手を出し始めたのかー、覚える機種増えた。。。」て素人目線で思っていました。
でも気づけばスマフォと言えばiPhoneかAndroidという状態になってました。
WEB業界に入って（＆注目するようになって）からまだ少ししか経っていません。
Androidの変化を通じて、WindowsPhoneは今後どうなるのかなーとか他に新しいの出てくるのかなーとか色々考えるようになりました。
息切れしないように息抜きしながら勉強し続けます。