HTML5とか勉強会 第19回 に行ってきた #html5j

HTML5Study HTML5 Event

HTML5とか勉強会 第19回 に行ってきた。
pjax と Responsive Web Design は最近よく聞くけど、あまり知らない分野だったので聞けてよかった。毎回興味のあるセッションばかりで嬉しい。

発表はこんな感じ。

togetterはこちら。

pjax 〜HTML5時代のAjaxサイトプラクティス〜 小松さん [twitter:@komasshu]


第19回html5とか勉強会 pjax
View more presentations from KensakuKOMATSU

  • これまでのajax
    • 部分的に更新する
    • ページを動的に切り替える
    • 速い
    • 安い トラフィックとか
    • かっこいい
  • なにも考えないとまずいことに
    • 戻れない
    • リンクできない
    • htmlみてもわからない
  • 戻るへの対応
  • hash bang
    • #!
    • なんで！つけるの？
    • Googleが検索してくれる
      • 代替のhtmlはいるけど、そっちを検索対象にしてくれる
    • コンテンツはひとつのhtmlにまとめる
    • jsでデフォルト動作をキャンセルして、ハッシュ変える
    • これをうまく使っているのがjqm
    • 問題
      • restfulじゃないよね
      • jsオフだとトップページが表示されちゃう
  • pjax
    • Fragment Identifier使ってない
    • ベースを作って、プログレッシブエンハンスメント
    • デフォルト動作をキャンセル
    • history.pushState でパスを埋め込める
    • 戻るはpopState
    • レイアウトのない専用のhtmlをajaxで取ってくる
      • sinatoraのレイアウトなしのページとか
      • jquery-pjax
    • 弱点
      • ieだと9でもだめ
      • polyfillでもだめ
  • pjax使ってるサイト

pjaxに対応させるのは、やっぱり大変だと思う。でもこういった手法があって、頑張れば対応できるし便利になる、というを知ることができてよかった。pjaxという言葉や、動作の概要は知っていたけど、実際どうやって作っているのかは知らなかった。スライドのサンプルコードがシンプルで分かりやすかった。

Box2DJSではじめる物理エンジン あんどうさん [twitter:@technohippy]

デモが面白かった。物理エンジンすごい。こういうのさらっと書けたらかっこいい。

Responsive Web Design 菊池崇さん

Responsive Web Design　HTML5勉強会

  • まずは失敗談から
    • 最初のスマホ
      • iphoneとandroid
      • でもすごくたくさんの振り分け
      • 動画のサイズを分けるため
      • jsだけで頑張って
      • 無理だ！
    • android爆発
      • スクリーンサイズ爆発 対応数二倍
    • smarttv
    • カーナビ
    • 金と時間があればできるけど
  • 足し算のアプローチ
    • コストが掛かる
    • cmsの対応が大変
  • responsive architecture
    • 80percenter
    • ものによって可変にしていこうよ
    • w3c ライカ myOpera
    • grid design
    • liquid layout
      • パーセントで指定
    • fluid image
      • maxsize
  • プラス
    • box-sizing
    • cover
    • contain
      • 480px以下には禁則処理
    • imagsizer.js
      • ieでぎざぎざを抑制する
    • respond.js
      • ie6-8をmediaqueryに対応させる
    • mobile boilerplate
      • テンプレート
      • 320andup
      • 小さいサイズから作っていく
      • パフォーマンスがよくなる
  • まとめ

知らないことばかりでとても参考になった。実践しているひとの話は分かりやすいし、細かいことが聞けてよかった。細かいテクニックはもっといろいろあるんだろうな。

けれども、僕はこのセッションを聞いていて、終始違和感があったし、多少の不快感もあった。
最初の2分くらいで、以下のような話があった。書き起こしではないけれど、ちょっと前までは動画が公開されていて、それをもとに記載した。

はじめてのスマートフォンサイトの製作で、iphoneとandroidのデザインだけでいいよということで、楽勝だと思い見積もりをして受注した。しかし受注後、MacやWindowsや各種ブラウザのものすごい数の振り分けをして欲しいと言われ、最終的に14ものHTMLを作成することになった。それは動画をフルサイズで表示したいという、クライアントのただただわがままだったと思う。

最初はなにかの冗談かと思ったけど、このあともこのような調子で進んでいった。たとえ事実であったとしても、公の場でこういった表現でクライアントを語るのかと。そもそも「自分の失敗談から」と話し始めて、「クライアントのわがままだった」という結論がちょっと信じられない。
もちろんひどいプロジェクトはある、たくさんある、そのへんに転がっている。でもこれはオフレコが通じる懇親会ではなく、参加希望者が100人を優に超えて、リアルタイムで動画配信されている勉強会だ。
自分もこういいった発言をしないように気をつけなくては、と感じた。セッションの内容は面白かっただけに、ちょっと残念だった。
＜追記1＞動画が非公開になってしまった。僕は一部の内容について批判的なことを書いているけど、セッション内容はとても参考になることが多く技術的にも面白かったので、動画が見れなくなってしまい、ちょっと残念。
＜追記2＞セッション資料が公開されてた。うれしい。

スマートフォン用サイトをデバックする5つの方法 kanasan [twitter:@kanasan]


スマートフォン用ベージをデバッグする5つの方法(Xiangpianについて（仮）)
View more presentations from Kanasansoft

スマートフォンのデバッグの大変さを垣間見た。いろいろな方法(ハック)でのデバッグがあって、それぞれ一長一短があるというのがわかった。それにしても大変そう。だからこういうツールを使えるかどうかで、生産性が大きく変わるんだろうな。

Web and TV その3

ダニエル・デイビス [twitter:@ourmaninjapan]

これで最後ですよ、と。
テレビ用ブラウザへの対応がこんなに大変なのかと感じる。TV向けに色とか頑張りすぎてもしかたないよ、文字は大きく、ナビゲーションはカオス気味だけどCSSでなんとか、ということが分かった。
それにしてもダニエルさんの語り口が良く、とても楽しく聞ける。

まとめ

毎回レベルの高い内容で、しっかり流行りものを抑えつつ、ニッチな話題もあって勉強になる。
次回は第20回記念ということで、08/21(日)に200人規模で1日通しのイベントになるとのこと。これは是非参加したい。
それはそうと、なぜか感想blogが異様に少ない気がする。こんなに人気の勉強会なのに。僕が見つけたのはこちらくらい。

申し込み登録しなくても参加できる、ブロガー優先枠とかできないかな。すでに人気の勉強会なのに、さらに申し込みが増えても困ってしまうか。

これまでに参加したときのエントリ

一覧は [HTML5Study]記事一覧 - techlog からどうぞ。