Stranger in Wonderland

HTML5とか勉強会

2012-10-23 Tuesday

HTML5 Conference 2012 Reloaded にいってきました

HTML5とか勉強会 にいってきました。
先日の HTML5 Conference 2012 の一部再演だそうです。ちなみに各プログラムの講演映像は HTML5 Conference 2012 プログラム からリンクされてて、YouTube にあります。
今日の Ust とスライドはこちら。敬称略です。 * Introduction * 更に進化する CSS の表現力と新しい Web ツール / スライド * 更に進化する CSS の表現力と新しい Web ツール * パララックスでレスポンシブでjQuery Mobileなサイトのつくりかた（スリム版） / スライド(9/8版) * パララックスでレスポンシブでjQuery Mobileなサイトのつくりかた（スリム版）〜jQuery Mobileカスタマイズ自由自在 ver1.2 * jQuery Mobileカスタマイズ自由自在 ver1.2 / スライド

###「更に進化する CSS の表現力と新しい Web ツール」 轟 啓介 - アドビシステムズ株式会社（45min） 9/26(?)に発表したものも追加で紹介とのこと。

ADOBE & HTML
Adobe もいろんな Open Source Projects をやってるよ。jQuery Mobile, Brackets (code editor), CreateJS (JavaScript Library), Apache Cordova (PhoneGap), Web Plaform Docs (HTML5 関連のドキュメントを一元管理しようというプロジェクト), WebKit (css によるレイアウトや視覚効果の取り組み) などなど。

CSS Regions

雑誌みたいなレイアウトを CSS で簡単に実現。いれもの（Region）と文字を分離していて、複数の Region をまたがって文字を流しこむことができる。レスポンシブ対応！cool!
いまのところWebKit Nightly Builds じゃないとうごかないみたい。仕様は80%くらい固まってるとのこと。

CSS Exclusions

SVG で書いた図形の中に文字列を流し込んだりできる。Pie Chart の中に文字とか。写真の中の山の稜線に沿った文字の配置とかも。

CSS Custom Filters

シネマティックな視覚表現。これは Chromium で Demo してた。

Adobe Edge Animate

HTML アニメーションツール。コミュニティの協力により作られたものなので 1.x の間は無償提供とのこと。すてき。
「アプリ内のレッスンで Edge Animate を学ぶ」これやればだいたいわかるようになるらしい。jQuery で裏側で制御してる。イージングの効果とかをつけたりとか。 イベントの設定の画面では JavaScript 書くのだけど code snippet が充実してる。

非対応ブラウザについては、「下位ステージ」機能があるので代替を設定できる。「ポスター」というボタンで、現在プレビューしている状態のスクリーンショットを撮って Poster.png として保存してくれるので、それを貼り付けてつかうこともできる。既存のページにアニメーションを追加したいときは、html ファイルを Edge Animate で読みこめば編集できる。

Adobe Edge Code

Brackets という オープンソースプロジェクトの Adobe Distribution 版。Brackets は無料。他の Adobe 製品との連携をよくしたのが Adobe Edge Code（有料）。拡張機能は HTML/CSS/JS でつくれるよ。

Live View 機能: 保存しなくても編集内容がブラウザプレビューに反映されてすいすい確認できる！ Quick Edit 機能: 要素を選択して Command + E で css 表示、編集、保存。css 内の色のところで Command + E だとカラーピッカーがでるように開発中。js ファイルでも、このメソッド何？と思ったら Command + E だ。

Adobe Edge Inspect

リモート検証ツール。同時画面遷移とかスクリーンショットとか Chrome Dev Tool でのいろいろとかを母艦のブラウザで操作しただけで複数の端末同時に検証できるらしい。cool!

###「パララックスでレスポンシブでjQuery Mobileなサイトのつくりかた（スリム版）」 白石 俊平 - 株式会社シーエー・モバイル（30min）

Web サイトはレスポンシブ、アプリケーション化していますよねーってことで以下参考サイト。

白石さんが CA MOBILE のサイトを作ってたいへんだったときに直面した課題についての解説。

パララックススクロールをモバイルでも実現

Library たくさんあるけど（このへん）、mobile に対応してない。iOS Safari の onscroll がとれないから。最終的に Nike Air Jordan にインスパイアされて作ったのがこちら。
* ScrollTween.js on GitHub

レスポンシブで動きまくる

  • Fluid Grid - width を % 指定
  • Fluid Image - img の width も % 指定
  • CSS Media Queries - デバイスによって css 切り替え

LESS/SASS での変数、計算、mixin が必須。ないとグリッドの計算とかまじで死ぬ。Media Queries は細かく定義しすぎると上書きするスタイルがふえすぎてたいへん。Fluid Layout を補う使い方がおすすめ。揺らがないセマンティックなマークアップがだいじ。

レスポンシブで画像満載

Retina かつ Android 対応とかしなきゃいけないと画像も使い分けたいよねー。そこで、
Riloadr: レスポンシブイメージを実現するフレームワーク

<img class="responsive" data-src="img.png">
<noscript>
	<img src="img-default.png">
</noscript>

こんなかんじ。

Opera の Blues Lawson さんが提案してる picture 要素。WHATWG が提案している img 要素の srcset 属性。値には a.png 1 x a-hd.png 2x とか書くみたい。
折衷案としての picture 要素もあるけどどうなんだと。

CA MOBILE の「指」はCSSスプライトアニメーションでやってるよ。Android 2.3 標準ブラウザにはひとコマ目が残像として残り続けるバグがあったのでひとコマ目は透明画像を設定するのがおすすめというバッドノウハウなども。

jQuery Mobile を使ってみた

Framework と　Creativity のせめぎあい。トップページには使わず、中ページには使った。

  • 「制約」から見た jQuery Mobile 型に従ったマークアップ。フレームワークにHTMLをいじられる。デザインにこだわるならカスタマイズが必須だけどめんどくさい。パフォーマンスはもっさりする。

  • 「利点」からみた jQuery Mobile 慣れれば簡単。マルチプラットフォーム。全ページが一意なURLを持つ。ページ分割・読み込みが容易。

提携タスクを自動化したい

  • JS/CSS の minify
  • file の結合、file 名生成
  • LESS コンパイル
  • 異なる size の画像生成

こまごましたタスクが増えた！そこで、grunt.js: Nodeで動作するタスク自動化ツール

LESS コンパイル -> JS/CSS minify -> JS/CSS 結合 ハッシュ値つけてファイル名生成

Q: grunt はどのタイミングで実行するの？監視してて自動でうごいてくれるとか？ A: grunt ってコマンド叩いて実行させていたけど、git の commit にフックさせたりとかもできるよ。

###「jQuery Mobileカスタマイズ自由自在 ver1.2」 吉川 徹 - 株式会社シーエー・モバイル（45min）— Sublime Text 2 User Group!

jQuery Mobile を使うとなぜダサイのか。jQM 臭によりコンセプトが崩れる。jQM バレしないサイトを作ろう。
cool な事例集 jQuery Mobile Gallery

  • ThemeRoller で大まかなデザイン - GUI ツールからドラドロでぽちぽち変更する。font、background-color, UI パーツの色、角丸
  • スタイルで細かなデザイン - 普通に css でスタイル上書き。.ui-header とか .ui-title とか全体に影響するものも。

jQM のスタイル構造を知る。主要なものは、ページ、ボタン、リスト

jQM のスタイルの変化を知る テーマの切り替えによる変化 (.ui-body-a .ui-body-e)、状態による変化(.ui-btn-up-c, .ui-btn-hover-c)、機能による変化(.ui-shadow, .ui-li-has-thumb)。 ページ、ボタン、リストの box metrics についてスライドで解説。上書きスタイル作るときにべんり。

応用編

  • オリジナルの UI をつくる
  • ライブラリやツールを利用する

jQM の装飾や動作から除外する領域を作る data-ajax, data-enhance

jQM のイベントを知る ページ遷移の挙動を理解する。最初のページの body div.なんちゃら のなかに、Ajax で 読み込みたいページの body の中身をとってきてアニメーションで遷移させてる。 * pageinit - ページの初期時に発生（一度だけ）。load イベントの代わりに利用する。 * pageshow - ページの表示時に発生（何度も）。Google Analytics やライブラリの初期化。

今後のロードマップ * ‘1.3’ : 2012Q4 レスポンシブ対応 * ‘1.4’ : 2013Q1 スクロール領域とタブの追加 * ‘1.5’ : 2013Q2 カルーセル追加 * ‘1.6’ : 2013Q3 マルチパネル対応 * ‘1.7’ : 2013Q4 コードの最適化、パフォーマンス・チューニング

セキュリティフィックスの情報もウォッチするべし。1.1.1 には location.href 関連のバグあり、1.2 は 無問題のはず。

おわりに

ほとんど走り書きのまま公開しちゃってますが、こういう記事をどうやって書くのがよいのかについては試行錯誤してみます。今日のところは、Brackets と Adobe Edge Animate を使ってみたい！

Author

Yuko Honda Morita (yukop) : yukop.com
飯能→東京→シリコンバレー。夫と猫2匹と暮らしてます。作ったり学んだり踊ったりするのが好き。
Born in Japan, living in California with my husband and two cats. "A bit of a geek and a bit of a geek fan and a bit of an artist." ->

Latest Posts

Japanese
English

Chronological Archive

Tags