Ext JS / Sencha Perfectday #007 講義メモ

Ext JS / Sencha Pefectday #007 に参加してきました。 以下そのレポートです。

Ext JS 4 実践開発ガイド 配布と紹介

ついに出ました。やっとでました。書籍、Ext JS 4 実践開発ガイド。 この本の出版にはレビュワーとして少々関わっていたので、 実際にできあがった本を見ると感慨深いものがありました。 さっそく著者のサインももらっておきました。

購入はゼノフィのサイトで買うのが安くなりますが、アマゾンでも買えます。 （サイドバーの広告をみてね）

発表

@kotsutsumiさんから三つの発表がありました。

発表１

Ext JS 4 のAPIドキュメントの日本語版についての発表がありました。

http://docs.xenophy.com/ext-js/4-0/

まだ全部を翻訳できているわけではなくて、現在の進捗は60%ぐらいです。 僕はこれにも少し関わっています。ドキュメントの中にひどい和訳があれば、 それはきっと僕の仕事です。ｗ

発表２

NextJS 0.8.x

現在NextJSは0.8.2が出ています。MySQLにも繋がるし、Ext.Directも使えます。 僕もいろいろと試してみたいのですが、まだまだです。

http://nextjs.net/

発表３

Ext JS 4 実践開発ガイド２ についての発表です。 @kotsutsumi さん、続編を書いてくれるという発表でした。

  • 第01章 ドラッグアンドドロップ
  • 第02章 Ext.fxによるアニメーション制御
  • 第03章 チャート
  • 第04章 Ext Direct
  • 第05章 キーボード制御とアクセシビリティ
  • 第06章 アプリケーション設計
  • 第07章 コンポーネントテスト指向開発
  • 第08章 リリースビルド
  • 第09章 デバッグ術
  • 第10章 サイクルテスト
  • 第11章 パフォーマンスチューニング
  • 第12章 Next JS と Ext DirectによるRPC
  • 第13章 実践！Twitterクライアント作成
  • 第14章 実践！ユーザー管理システム構築

すごい内容になりそうな本です。 (こんなのここに書いていいのかな、だめだったら言ってください。消しますので） 僕としては5〜11あたりの、まさに「実践」的な内容に心惹かれます。 ただ、この本は今回出版した「一冊目の売り上げ次第で中止する」そうです。 2冊目出て欲しいんで、みんな、本買ってください。

Review

ここからExt JS 4 の基本のおさらいをしました。 ものすごいスピードでの講義でした。 突然、当てられて、アセりました。(´･ω･`)

LT：Ext JS 4 におけるExt.Direct (@martini3oz 氏)

LTということで Ext.Direct を MVC アーキテクチャで使う、 というのを発表しました。 内容は、

https://extjs.sunvisor.net/using-direct-with-mvc/

です。是非ご覧ください。

Ext.Direct for Ext JS 4


その後、@kotsutsumi さんが Ext.Direct について講義。以下、そのメモ。

PollingProvider

  • 一定時間定期的にリクエストを投げ続ける
  • サーバーサイドの状態を取得させる
  • 時までsetIntervalを使いリクエストを投げる処理を記述しなくても良い。
  • Ext.Directのリクエストが他に重なっても1リクエストで処理してくれる。
[js] { "type": "event", "name": "hogehoge", "data":{ "foo": "bar" } } [/js]
  • サーバーサイドで返す場合Json形式で typeキーに対してeventを指定すること。

RemotingProvider

  • サーバーサイドのAPIを公開し、APIを直接クライアントサイドのExtJSから呼び出すことができるプロバイダー
  • ある期間の間のDirectが呼ばれたらまとめて送信する。
  • サーバーサイドではまとめて処理していっぺんに返す。
  • クライアントではtidをもとにイベントを起こしてコールバックを呼び出す。
  • ファイルのアップロードにも対応している。
  • $_POSTでリクエストデータが取得できない。
  • file_get_contents(‘php://input’)で取得します。

LT：Ext.core.Elementの活用
( @asano_yuki氏)

Xenophyの @asano_yuki さんのLT。Ext.core.Element には地味に便利な静的メソッドがいっぱいあるのね。

  • Ext JS 4で増えたメソッドについて
  • 35個増えている。Ext.Fxだったものがあるのでそれを覗くと24
  • 追加された静的メソッド11個
  • Ext.core.Element.***出呼び出す
fromPointメソッド
指定した位置にある要素を取得しExt.core.Elementを返す。
getDocumentHeight / getDocumentWidth
Ext.core.Element.getDocumentHeight();
ブラウザのウィンドウサイズを返す
getOrientation
windowの向きを返す portrait landscape を返す。
serializeForm
フォームの内容をエンコードもしてクエリ文字列にして返してくれる
unitizeBox
unitizeBox(5, “px”)
->”5px 5px 5px 5px”

など、全部はメモできませんでした。

Next JS概論

  • node製のアプリケーションサーバーを作っている。
  • iconvモジュールは使えるが、iso2002jpに変換できない。
  • iconvへの日本語パッチを当てる必要がある。
  • iconvjpを使ってそれをNextJSに組み込んだ。

0.8 から 1.0へ、現在の機能と今後。

  • PDF, Excel, Word を出力したい。
  • SVGデータ出力
  • WebSocketに完全対応。

Next JSとExt JS

  • 同じクラスシステムが使えること
  • サーバーサイドにライブラリを一元管理する仕組みを考えている。
  • Ext Directを簡単に利用できること

Ext.Drawの利用

  • Ext JS 4 から実装された。
  • SVC/VMLを抽象レイヤーとして扱えるようにする
  • SVCは標準、VMLはIE6対応。
  • Ext.drawに実装されています。
  • 描画領域Ext.draw.Surface
  • ベクターデータは、Ext.draw.Sprite
  • SurfaceにaddでSpriteを追加してゆく

SVGチャートクラス

  • Ext.drawベースでのチャートです。
  • Flashがなくても動く。
  • Sencha touch chart
  • Ext.chart.Chartコンポーネントを経由して利用する。
  • データストアと連動して描画する。
  • あるデータストアの表現の一つとしてチャートを表示する。

Sencha Touch Chart

Sencha Touch 2.0 が出る。

追記

awacioさんのブログで PerfectDay #007 のリポートを見つけました。 http://d.hatena.ne.jp/awacio/20110918/1316295521