プログラマとプロマネのあいだ

プログラマもやるし、プロマネもやるし、たまに似非アーキとか営業っぽいこともやる

Ext JS & Sencha Touch勉強会8月@東京に行ってきた

HTML5開発入門(Google公認API Expert 白石 俊平様)

HTML5 APIの基礎知識
CanvasはLow Levelなので、ラッパライブラリ待ち。

ググったら、こんなのがヒットした。
canto-js - Project Hosting on Google Code
Ajaxian » Canto.js: An Improved Canvas API

一応Improvedらしいですが。。
まじめに触ってみないとなんとも言えないですね。

・オフラインWebアプリケーション

Google GearsJavaScriptAPIを使ったりしなきゃいけなくて色々大変だったのが、
マニフェスト用意して、HTMLで指定するだけのお手軽になったとか。
iPhoneSafariでも使えるそうなので、これは是非使いたいですね。

・Web SQL Databaseは仕様策定が停止している

ってことらしい。

HTML5の可能性を表すデモアプリたち

HTML5だけでQuake?スゴイ。ヤバイ
けど、超ハイスペックマシンじゃないと動かないらしい。。

HTML5アプリの実例紹介
・DaVinchPad

DaVinchPad

DaVinciPadは、プライベートなメモ機能と、TwitterFacebookへのマルチポスト機能を統合した、シンプルなWebサービスです。

ってことで、早速試してみました。

便利ですね!

HTML5アプリの理想と現実

RIA(Rich Internet Application)から、Offline Web Applicationになっていくんじゃないかと予想。
Google Gearsでは、3年も前からそういう構想があったとか。

Gears API Blog: Building Offline Salesforce Applications

○質疑応答の中で
・各ブラウザのHTML5対応状況が分かるサイト

Sencha Touchコードリーディング(直鳥さん)

○何はともあれKitchen Sink

http://dev.sencha.com/deploy/touch/examples/kitchensink/

ちなみにコードリーディングの対象は、Kitchen Sink(全部入りサンプル)の中の
examples/kitchensink/src/index.js
のファイル。

とりあえず知らなかったことを列挙してみる。

○fullscreen=trueにすると、metaタグが挿入される。
<meta id="ext-gen1002" name="apple-mobile-web-app-capable" content="yes">

これ、Safariのステータスバーが出るかどうかの違いがあるそうな。
Safari HTML Reference: Supported Meta Tags - apple-mobile-web-app-capable

○全てのComponentについて、ui config optionで、色と形を指定できる。

ドキュメントを見ると、

A set of predefined ui styles for individual components. Most components support 'light' and 'dark'.

とか書いてあるので、'light'と'dark'は使えるんだろうなあ。と思ってソースを読んでいくと、
ui: 'back'とか、ui: 'action'とか出てきて混乱するが、
どうやらスタイルシート名と紐付けているので、スタイルシートをあわせてみるのが吉かも。


resources/css-debug/ext-touch.css
の中を見ると、

  /* line 72, ../sass/src/_ext-base.scss */
  .x-button.x-button-back:before, .x-button.x-button-forward:before {
    background: #999999; }

みたいな記述が見つかる。

○scroll='both'

縦にも、横にもスクロール可能ということ。
ExtJSにはなかったオプション。

○showとshowBy

showは、コンポーネントを表示するが、
showByは、"引数で指定したコンポーネント(Mixed elOrCmp)の近くに"
コンポーネントを表示するっていうのが違うらしい。

○doComponentLayout / doLayout

違いが分からず。。
再配置の範囲によって、範囲の小さいときはdoComponentLayout、
範囲の大きいときはdoLayoutを使う?