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 Regions
• CSS Regions Demo

CSS Exclusions

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

• CSS Exclusions
• CSS Exclusions Demo

CSS Custom Filters

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

• CSS Custom Filters
• CSS Filter lab 触って遊べる。コードもコピペして使える。

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 サイトはレスポンシブ、アプリケーション化していますよねーってことで以下参考サイト。

• GRAVITATE
• Mercedes-Benz the new A-Class
• TRON LEGACY
• CA MOBILE

白石さんが 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 を使ってみたい！

昨日日報書いてみて思ったのだけど、これは、わたしにアドバイスをくれたり力を貸してくれる、やさしくてかしこい、プログラミングの先輩たちへの恩返しにもなるのではないだろうか。というのも、bot つくってみたところ、すくすく育ってるな、よしよし。という得も言われぬ満足感があるのです。自分でプログラムを書いたにもかかわらず、ひとりで果敢に世界へ旅立ってゆく様子は頼もしくみえるし、見守るのは楽しい。わたしはいまのところ bot ではないし、expected behavoir からは程遠いとは思うけど、自分が助言した相手があちこちぶつかりながらも進んでゆく様子を見るのは、ちょっとしたひまつぶしとか気分転換にはなるのではないかな、と。

ようするに、何かの役に立ってるって自分で思いたいだけだったりします。心配するな。少なくとも自分の役には立つよ。長い文章を書くリハビリにもね。

このブログに関してしたいこと

• jekyll-bootstrap のデフォルトテンプレのままなのをなんとかしたい。
• Code highlighting with pygments doesn’t work なのをなんとかしたい。
• twitter で @ma10 さんから、jekyll-bootstrap べんりだね、でも RSS 生成してくれないのかなって コメント もらったので、それも。
• index これでいいのか。

今後のためのストック

(と)先輩が Sphinx いいぜー、って言ってた。Pythonista たちはこれで document を書くらしい。

• Sphinx-Users.jp
• Learn you some Erlang for great good! 日本語訳 - これも Sphinx だよ。

今後のための Geeklatte ネタストック

これも、(と)先輩より入れ知恵。

• Redis
• Hubson - Jenkins おじさんの前身
• 0MQ - RabbitMQ の仲間

ついでに MQ（メッセージキュー） について。巨大な仕事をしなきゃいけないときに、処理を細切れに外注に出しておいて、なんか別のことしてる間に、終わった仕事はベルトコンベアーみたいなとこにのっかってくるので、それを順番に受け取れるよ。っていうものと認識した。

今日は牡蠣フライをごちそうになっていたので進捗なしだけど、先週分の日報を書くのに復習したりしてました。

趣味プログラミングのようなものの作業記録を残すことにします。学んだことや、つまづいたことや、プロフェッショナルな先輩たちからのお告げなども。
さかのぼった分もあとで書くかもしれない（こういう場合たいていは書かない）。
TODO リストを常にどこかに表示しておけるとよいかも。

目的が自分用メモであるうえに、へっぽこなので、たぶんほとんどが、何言ってるかわかんねーぜ！ってことになる気がしている。ゆくゆくは何かの役に立てたらよいけど。

markdown の練習も兼ねてるので、markdown の syntax おさらい。code の中で var 的なもの使いたいけどないのかな。

• Markdown: Syntax

jekyll

2週間くらい触ってなかったらローカルで jekyll を起動する方法からすでに忘れてた。このブログは jekyll と GitHub Pages でできています。

$ jekyll --server --auto

で http://localhost:4000/ で確認。

Twitter bot

Google App Engine と Python で Twitter bot つくりたい計画。ってことで月齢を一日一回 tweet する bot つくった。 astral 0.6.2 というぴったりな Package を見つけたのでそれをつかってる。 月齢の数字だけじゃなくて、呼び名がある場合はそれもつぶやくようにした。「わーい、三日月だよー」とかそういうの。

日の出と日没の時間も tweet したいんだ。sunrise() とか sunset() とかあるからいけるはず。どこかの city を基準にする必要があるのでわたしの都合により Tokyo になっちゃうけど。

16人の Follower のみなさま、できそこないを生暖かく見守ってくれてありがとう。「テストなしでいきなり本番ってすごいよね。いや、いいと思う。」と先輩に呆れられたりした。テスト…ほほう……
これはテストも含めてエンタテインメントなのです！（キリッ（ごめんなさい

• @moonphase_bot

Google App Engine

というわけであっぺんじんだけど、これも忘れるのでメモ。Development Web Server の開始。

dev_appserver.py 俺ぺんじん

デフォルトの port 番号は 8080 で、dev_appserver.py --port=9999 俺ぺんじん とかすると port 指定できる。その他 option はあっぺんじんのドキュメント みる。

Application の Deploy.

appcfg.py update 俺ぺんじん

これも詳しくはあっぺんじんのドキュメントみる。

geeklatte.com

DECONCEPTER 氏からのリクエストで JSONP 吐くようにした。 Flickr API の場合、

format=json&nojsoncallback=1

これだと JSON 形式で、

format=json&jsoncallback=getGeeklatte

これだと callback 関数名指定して JSONP で出力。

• geeklatte_all.js

Web Intents

HTML5 Conference 2012 についてる WebIntents でシェアボタンをまねっこしてみようとローカルでいろいろ。動くのは確認できたけど置き場所に悩みちゅう。

先日の #gtuggirls ではじめて Web Intents 触った！翌日記念に Web Intents latte つくったら reshare の果てに Paul Kinlan 氏から、言いにくいんだけどロゴ変わったのよね、というコメントをいただき…ってご本人！ワーオ！来週あたらしいロゴでつくります。

• http://webintents-wiki.appspot.com/ （新しいロゴ）