code:x

小堤です。

ご無沙汰ですねぇ、Twitterしかやってない気がします。

んで、Senchaになったとか、SenchaTouchの話もやっと堂々とかけるのですが、それはあとでｗｗｗ

んで、題名のネタ。

style: ‘padding: 10px’

こんなコンフィグオプションの指定することありますよね？まぁできるだけ、デザインに関してはCSSに持っていて、clsで指定する方がよいですが。

これ、Portalとか、まぁ特にfloatとかされている中にアイテムを配置するときに 、Chromeとかだと、きかないときあります。

聞かないと言うよりは、ExtがCSSを指定しないのか、Chromeが識別できていないのかは定かでないですが、インスペクタでみると反映されていないんですね。

んで、

styleは1個でもオブジェクト形式で指定すれ！

です。

style: {
padding: ’10px’
}

 この癖つけといたほうが、身のためダと思いますし、複数指定する場合も楽ですよね。

ってことで、久しぶりのブログこれかよ！って話なんですがｗメモｗｗ

ども、小堤です。

さて、ちょっとコードばっかり書いてて、ちょっとつかれたのでブログを。めずらしい・・。

みなさんは、Ext JSのフィールドをレイアウトする場合、何にレイアウトしますか？Ext.form.FormPanelですか？Ext.Panelですか？サンプルは、FormPanelにレイアウトしていることが多いですね。これは、FormPanelのアイテムにフィールドを設定すると、フォームレイアウトでレイアウトされるからです。

では、Ext.Panelにレイアウトしてはいけないのでしょうか？

そんなことはありません。

Ext.Panelにレイアウトしてもかまいません。しかし、その場合、レイアウトも指定しないと、FormPanelに配置したようにはなりません。

layout: ‘form’

としてあげる必要があります。

さて、ここまでは超初心者でも知ってる話ですんで、どーでもいんですが。

注意すべき点があります。

Ext.Panelの初期xtypeはExt.Panelであるということと、レイアウトは、containerレイアウトである。という点です。

何が言いたいかというと。

Ext.Panel内のアイテムで次々レイアウトを切って、フィールドをぶっこんでいくと、全部パネルでレイアウトされるんですね。

そうした場合、まず、ボーダー引かれます。うざいです。背景色も指定されてしまいます。結論から言うと、大枠は、Ext.Panelでよいのですが、その中にcolumレイアウトなどをいれたりしてレイアウトを行う場合、必ずExt.Containerクラスをxtypeで指定するようにします。

こうすることで、フィールドのレンダリングスピードが向上します。

layout: ‘column’,
items: [{
xtype: 'container',
columnWidth: .5,
items: [{
xtype: 'textfield'
}]
},{
xtype: ‘container’,
columnWidth: .5,
items: [{
xtype: 'textfield'
}]
}]

ざっくりかくと上記のようになります。（インデントきいてませんがｗ）
Ext JSのレイアウトは、コンテナーに対して、ネストしながらレイアウトを行っていきますが、この枠がすべてExt.PanelになるかExt.Containerになるかで、パフォーマンスは結構違います。
また、Ext.Containerの場合、bodyが存在しないので、背景がきれいに透けます。なので、大枠で背景を指定して、ちゃんと透けてくれるわけですね。
余計なボーダー消したりとかのコードも必要ないですし、パフォーマンスもよいですし。

ホントは、もうちょいいろいろあるんですが、簡単なテクニックとして、レイアウトするときは、だまってExt.Containerを指定する。覚えておいておくといいですよ。

ども、お久しぶりです、小堤です。

なんだか、すっかりブログ書いてなかったですね。前からいってるSpreadOfficeの開発に追われて、全く何もできません（笑）

そうそう、ロゴのデコレーションもせないかんのですよ。いられ作業。

んで、このSpreadOfficeは、ちゃんとした有料サービスなんですが、契約者の登録を裏側で行うための、コントロールセンターというアプリケーションも同時に作ってみたり、あのね・・・ほんとね。

一人で作る量じゃないですからぁ〜（；＿；

まぁ、そんなこといってもアプリケーションはできあがらないので、日々たたき続けるんですよ。いろいろ。

で、このSpreadOfficeで培ったまた、なんていうか、アプリケーション開発術のテクニックやらノウハウを、またOmegaTrickに還元します。

シークレットですが、6月にOmegaTrick会議を予定してて、そこで協議する予定です。

今月の勉強会でみせられたらいいなぁと思ってるんですが

最速フィールドレイアウト術

ということで、こうやって区雑なフィールドレイアウトしてあげると、Celeron 1GHzとかのIE6とかでも、実用レベルでの速度でレイアウトできるぜ！とか

後は、パネルを普通に使うだけじゃなくて、どうファイルを分割することでパラレル開発や、保守管理がしやすくなるか。

スタブアプリケーション開発をこれに適用することで、デバッグスピードを向上させることができるだけでなく、開発スピードさえも向上させられるか。

など（笑）

OmegaTrickを勉強会で紹介したときに「Ext JSを仕事で利用して失敗した方へ」といったんですが

まさに、Ext JSを利用してアプリある程度作れる気になって、取り組んでパフォーマンスとか、複雑化したものの管理ができなくなって破綻したプロジェクトに関わった人たちには、耳寄りなテクニックだと思われます。

僕に時間があれば、もっとブログで紹介したりしたいんですけど、とりあえず目先にSpreadOfficeのリリースがあるので、一段落するまでお待ちください。

可能であれば、今月の勉強会に参加される方には、SpreadOfficeを触ってもらえるように、開発環境のサーバーを公開したいと思っています。

おたのしみに。

あと、余談ですが、xFrameworkPX 3.5正式リリースしました。

http://www.xframeworkpx.com/

GitHubに公開されているんで、見てくれている人は、わかってるかもしれませんが、やっと正式版だせました。

いまは、完全に僕はコード書いてませんが、メンテしてもらってます。

次のxFrameworkPX 3.5.1へ向かっているし、OmegaTrick側もまぁそれなりに進んでるし、進んでるんだけどしんどす〜。

８月は、少しのんびりできるようになりたい。

まぁ・・・その先にやること決まってるから、のんびりとはいかないものの・・・多少、遊びたいｗ

ってことで、ツイッターとか、Skypeで声かけてくれてる人たち以外で、このブログで生存確認されてるそうなのでｗ　更新しておきましたｗ

また。

ども、小堤です。

なんだか、開発どっぷりだとブログかかなくなる習性は仕様です。

んで、昨日勉強会でOmegaTrickの話をさせていただきました。

http://public.iwork.com/document/?a=p192549222&d=20100421ExtJS%E5%8B%89%E5%BC%B7%E4%BC%9A.key

で、まさに開発を進めてて思うところなんですが、みなさんが食いつくであろうメインのトリックという 機能は、がりがり作っていってるんで、そのうちできあがりますが、それを支えている細かい実装の紹介というかメモはしておきたいなぁ。

と、思ったんだけど、今日はしない（笑）

予告として、

• オブジェクトクローン
  オブジェクトをコピーする機能

• スクリーンパネル
  カードレイアウトと同様だが、コンフィグオプションで、非表示のパネルを自動的に破棄することにより、パフォーマンス維持をするレイアウトとパネル
•  Containerのrefオプションによる参照設定の拡張
  refはつけた名前でしか、参照設定でいないが、.(どっと)で、設定するオブジェクトのさらに子供の階層に設定できるようになっています。
  ../panels.myitem みたいなことができます。
• フォームの拡張
  Ext.trick.form.FormPanelにより、ネストしたテキストフィールドなどを一括で参照できたり、buttons以外で配置されているボタンを一括で参照することができる機能が提供されています。

まだまだあるんですが、こういったExtオブジェクトのメソッドのように、細かくサポートしてくれるメソッドたちがいるおかげで成り立つわけで、こういうのが便利だったりするわけです。

なんで、そこらへん・・・OmegaTrickのWikiを書いてくれる人たちに参考にしてもらうってのもあるけどｗ

近日書きます。

余談ですが、数人にOmegaTrickのソースコードの中身はアプリケーション実装の非常にいいサンプルになってるみたいで（笑）みるだけでも実装の勉強になるといわれます・・無意識ですが・・・役にたってるならよかった（笑

来月も勉強会あるらしいので・・OmegaTrick使って、その場でライブコーディング（15分くらいで）アプリケーションつくれるんだぜ！っていうのやろうかなぁ。

元気があれば・・。

雨だし、やる気ナス。。。なんで今日雨降るかなぁ。

ども、小堤です。

さっき、教えてもらったんですが、MACでFireFoxなどブラウザでタブ移動していると、チェックボックスとかにフォーカスが当たらなくて困っていました。

え？Ext JSのバグ？とか思ってたんですが、違って、MACの設定を変えるだけでした。

「テキストボックスとリストのみ」になっていると、ボタンやチェックボックスにフォーカスが移動しナス。

たったこれだけかぁ・・・と思いつつ・・MACまだまだなれてないんだなぁ。

ども、小堤です。

ちょっと、気を抜くとすごい日数が経過してる。

OmegaTrick相変わらずちまちま作ってるんですが、まぁこれ一段落させないとSpreadOfficeの作業にはいれず。来週の頭には一段落させて移植作業せねば。

このOmegaTrick、今月のExt JSの勉強会のネタになる予定です。

画像のようなログインの仕組みとか、オブジェクトリテラルで指定するだけですぐ使えます。

もちろん、オリジナルのログイン画面作るために、クラス継承して、CSS上書きすれば見た目変えられるようになっていますんで、ログインほしーな。とおもったときに、毎回つくるのはいやなので、まとめました。

ちなみに、サーバーサイドはxFrameworkPXで実装しますが、これもモジュールクラスを継承して利用すれば、独自の認証処理はさっくりできあがるんじゃないでしょうか。

ログインの作成、デザイン変更ナシの状態で、数分で設置が完了するのが目標。

あと、フォームパネル関係とか、SpreadOffice途中まで作ってあるところでは実装していなかったやつなんですが、なんてーの？ｗフォームパネルのアイテムを入れ子にすると結局フォームパネルのありがたみはないよね。っていう部分をおきなうものですね、これはできたらまた紹介します。

まぁ、ここら辺までできたらSpreadOffice移植して、両方いったりきたりになりかなぁって感じ。

ちまちま細かく実装していっていますが、一通り役者がそろえば、みんなどんなものなのか理解してもらえるかなと思っています。

ちなみに、Ext JS 4.0がでると、またいままでのコード丸ごと動かすのはきびしいのかな？なんて予想してて、そこら辺の吸収レイヤーになれればいいなぁと。

なんだかんだ、Ext JSとxFrameworkPXのいったりきたり。

xFrameworkPXも進化していってるし、PXのこじんまりとした勉強会する予定です。実務でxFrameworkPXをいろんな方に使ってもらうことになってて、そこら辺の情報共有って意味と、OmegaTrickで使う人もいるので、そこらへん一回やりたいなぁ〜、こないだの場所借りてまたやるかな〜。

とか（笑）

あと、MAC

相変わらずメインにしたのでがりがりやってますが、SSDにしました！２５６GB 。たけー。

メモリも８GBかったけど、まだ届かず。ってかこの2点でMAC本体超えてるんですけど？？？？ｗ

Vimなれてきたけど、はやくばりばりの速度になりたいわぁ。今日はCtrl+Pとか覚えたｗ

ども、小堤です。

さて、しばらくブログ更新してなかったなぁ〜と思って、特に内容のない話。

いや、先日、食中毒？もどきくらいました。ええ、何日だろ・・なんとか復活・・・気味になってきた。吐き気とか何とか収まったが、いやってかさ・・どうなのよ、それ・・・。プロジェクト一段落おつかれーで、中毒・・最悪だ。

んで、そんな中めげずにMAC触っていまして。

OmegaTrickのコードは、ほぼ毎日ちゃんとプッシュしてます。

もうすぐ、Extアプリケーションの根幹部分が終わるかな。かなかな。

Vimになれていないせいも、あって・・・早くなったんだか、遅くなったんだが。

はい、んで、もって。

バリスタ買いました。

えっと、ネスカフェ　バリスタ。CMでてるやつです。家電芸人もやってましたが。

インスタントコーヒーが、珈琲屋さんのコーヒーみたくだせるんだぜー、カプチーノもつくれるんだぜー、9000円以下ってすごくねー。ってことで、今日届きました。まだコーヒーがきてないので（爆）届き次第ためすべし。

あと、なんか、タイムカプセルがちょうしわろい。

あ、MACのね。んで、バックアップ、とれない。ので、買った。

FireWireの外付けHDD。15000円くらい。てかさ、よく考えたらバックアップは、固定してるとき、クラムシェルモードの時しかとらないわけで、会社にいるときに。

なら、FireWire800 で接続したほうがあほみたいにはやいわけじゃん。無線経由より。なんか無線最高！みたいな流れでやってたけど・・・遅すぎる、あれ。結構バックアップ中もってかれるし、HDD.

で、さらに。

MACBOOKのCDーROMをはずしちゃおう！と思って（笑）

CDーROMはずしてHDD増設できるやつ買いました。OptiBayかな？

http://japanese.engadget.com/2009/02/23/macbook-pro-hdd-optibay-raid/

これでHDD2個積んでRAID0、バックアップは外付けHDD、完璧。ちなみにSSD1個よりも、SATA2個のRAID0の方が早いらしいです、コスト的、容量的にRAID0のほうがいい。

あと、外したCD-ROMをそのまま外付けにするケースもついてるそうです。まだ、届いてないのであれですが、たのしみですなぁ。

MacBookがCore i7になったらかうぞーと思ってたんですが、なんだか、RAID0にしたらしばらく動きたくないかも。

AdobeCS5が出て、このMacBookにいれて、メモリほしいなぁ〜と思ったらとりあえずメモリ買えばいいし・・・しばらくこのMacでいけそうな気がする。

とかいって、年末には買うんだろうな。

小堤です。

さて、Omega Trick。github使いやすい、かわいい。まぁそんなことはどうでもいいんですが。まとめる場所がある幸せｗ

Ext.trickという名前空間を使って作っていっています。UXじゃないんです、これは！と意気込むｗ

んで、Ext.trick.unit下に、TestCase.js/TestSuite.js/TestRunner.js/TestLogger.js作りました。まぁYUI Test のラッパークラスだけどね。

そんでもって、無事YUI Testを使ってユニットテストを実行するところまで作りました。

ん〜いい感じ。

ちなみに、作ったのは、Ext.trick.util.cloneのユニットテスト。

まぁ、Wikiに書いといたのでみてもらえれば概要はわかるかと。

要するに、JSのオブジェクト（配列含む）は、代入じゃコピーされねーんだよ！って話です。

んで、さらに、ArrayとObjectのprototypeにcloneメソッドを追加してくれて、内部的に呼び出してくれるようになってるだよ。

なんで、

var src = {};
var dest = src;

でdestが別オブジェクトになると思ってる人は、ここら辺はっきりさせておいた方がよい。

ちなみに、OmegaTrick読み込めば

var src={};
var dest = src.clone();

でdestは別オブジェクトになるってわけ。

あと、パッケージを圧縮するスクリプトも書いたよ。Google Closure Compilerに渡してるだけだけどね。

さて、仕事で　Draw系ツールの作成依頼が複数きてるので、Ext.trick.drawで試作していくべし。今日から着手できたらいいな。設計はある程度したので。

あ〜あと、なんだか意識してないうちにこの、code:xのアクセス数が増えてきててびっくり。

影響力なんて気にしたことないので（笑）いつもてきとーに書いてるんで、気にしないでください。来月にはいったら次のWorkshop Special・・というか・・次はどうするか決めてあるのでお楽しみ（にはは

そろそろ、札幌いかないとなぁ〜、勉強会実現したい。

ども、小堤です。

なんだか、嫁の話だと、リビングのソファーによっかかったまま気を失ってたそうです（笑）

さて、Workshop Specialお疲れ様でした。なんだか、勉強会っていう感じでもなく、まったりいろいろはなせて楽しかったです。なんか、こういう動きは大事かなぁと思っていて、僕自身の限界を超えるためにも必須なんじゃないだろうかと思っていますので、今後とも皆さん、よろしくお願いします。

んで、Omega Trickについても説明させてもらいました。まだベースを作っている段階なのですが、参加してくださいねぇ〜とお願いを。コラボレーターになりたい人がいれば、連絡ください。Omega Trickは僕にとってもExt JSのアプリケーション開発における集約ポイントになるんで、がんばろうと思っています。

内部的に使わなくてもいいけど、xFramework PX 3.5が最初から入っている状態になるので、xFramework PX 3.5も興味あったらみてやってください。Ext.directに関しては、すべてのこのxFrameworkPX 3.5で実装します。

で、話は変わって、Quick Silverから乗り換え。ランチャーですが、Google Quick Search Boxに乗り換えました。これ、べんりねぇ。Commandキー二回たたけばいい！っていうのいい感じです。

さて、YUI Testレベルからいろいろやって行かなくては・・Omega Trick。このOmega TrickがSpread Officeや、今後のアプリケーションのベースになることは、間違いないので、基礎のしっかりしていない家はふっとぶんですよ。自分に言い聞かせて・・がんばろ。

ども、連続で小堤です。

まぁ資料も公開したし書いてあるので、明日詳しく話しますが・・。

まぁ、ExtAnnexの代わりというか、これでいきます。

GitHubで公開しながらの構築、だけどGitだからバシバシPushはしなくてもいい感じだから・・・最初のスタートダッシュは遅いかもね。

僕一人だと（笑）こらぼれーたー募集だもんｗ

ちなみに、GitHubは、http://github.com/xenophy/OmegaTrick

ですだぁ。

早めに寝ないと・・・