Flexリストコントロールでのデザインパターン(とiOSのUITableViewとの比較)

最近、Flexのリストコントロール（データグリッド）をいじってて分かったことのメモ。

Flexのリストコントロール

Flexのリストコントロールとやらは、以下みたいなのがあります。
左から順番に「リストレイアウト」、「ドロップダウンリスト」、「データグリッド」。

んで、このリスト系コントロールというのが「データ駆動型コントロール」と呼ばれるもので使い方に癖があったりします。もうちょっと言うと、ひとつのコントロールの世界の中でMVCデザインパターンが適用されている。ざっくりとした関係は以下。

Viewコントロールの中に「レンダラー」と呼ばれる描画用オブジェクトが存在し、そこにControllerとしてのFlex君がModelオブジェクトを差し込んで描画する。ポイントとしては、レンダラーオブジェクトはユーザの可視領域分といくつかのバッファ分の数しか存在しない。

「レンダラーA」〜「レンダラーC」で「データ1」〜「データ3」が描画されているとして、例えばデータグリッドを下スクロールすると、それまで「データ1」を描画していた「レンダラーA」が使い回されて「データ4」を描画するようになったりする。ようするに、描画オブジェクトのリサイクルについてFlexが面倒を見てくれる。

それによって、100万のデータを画面で扱う時に見えてない99万9990ほど分のModelオブジェクト用の描画オブジェクトが節約される。

Flexのリストコントロールを独自拡張する時は、上記が分かってないとうまく描画されないことに悩んで、ことあるごとにFlexにとって天敵の全行再描画を実施して画面が重くなってしまう。

気をつけないといけないのは、Modelオブジェクトの中で描画用データも保持しておく必要があること。ユーザ操作で文字を赤くした場合に、その「文字が赤い」情報をModelオブジェクトで保持しておかないとそのデータを再描画した際に、文字色がデフォルト色に戻ってしまったりする。ModelというのはビジネスロジックのModelではなくあくまで描画アーキテクチャ上でのModelということ。

IListItemRendererインタフェースの"set data"メソッドをオーバーライドすることにより
ModelオブジェクトをViewコントロールに独自のロジックで設定することが可能になる。

このアーキテクチャのいま思いつくメリット／デメリットは以下。

メリット：

• 描画オブジェクトのリサイクルをFlexに任せることができる

デメリット：

• 設計思想を理解するのに時間がかかる
• 同じリストコントロール上で複数種類のコントロールの使い分けがしづらい(1行目はラベルで2行目はチェックボックスとか)

Flexのレンダラーについては以下がよくまとまっていて勉強になりました。

itemRendererパート１:inline itemRenderer
itemRendererパート２:external itemRenderer
itemRendererパート３:Communication(データのやりとり)
itemRendererパート４:ステート＆トランジション

あと、Adobeのヘルプ。

Flex3開発ガイド/Listコントロール

Adobeのヘルプは、量もAppleのほど多くなくてかつ分かりやすくてよく書かれていると思う。まあ、Appleはフレームワークのソースコードを公開してないからあんだけのドキュメントが要るのかもしれないけど。

iOSのUITableViewとの違い

一方で、iOSのUITableViewはちょっと違う。
UITableViewは以下みたいなiOS版リストコントロール。

こいつへのデータの割当ては以下のようにUITableViewDelegateプロトコルのtableView:cellForRowAtIndexPath:メソッドを実装したりする。


Flexのリストコントロールとの違いは、開発者がコードの中でヘルパーメソッドdequeueReusableCellWithIdentifierやらinitWithStyle:reuseIdentifier:やらを呼び出し自力で描画オブジェクトのリサイクルをすること。

意識する必要のあることはこちらの方が多いが、リサイクルするしないをオブジェクトの識別子文字列（上記の例だと@"MyIdentifier"）によって開発者が決められるため、Flexリストコントロールのデメリットであげた「同じリストコントロール上で複数種類のコントロールの使い分け」が比較的しやすい（識別子文字列でそこを意識すれば良い）。

ようするに、少し手間がかかるけどこっちの方が好き勝手しやすそうだ。まあ自由には責任が伴うのが常なので、粗悪な設計の影響を受けやすいけど。

その他Flexについて

Flexは他にもプロパティ無効化(invalidateProperties)や描画無効化(invalidateDisplayList)などの非同期な描画アーキテクチャを採用していて、世の中的にはFlashオワコンな風潮だけどフレームワークの設計は非常におもしろい。iOSと違って、ソースが公開されているのも良いね。

あとは、以下を読んだりして勉強しました。

asでカスタムコンポーネント(1)
asでカスタムコンポーネント(2)
asでカスタムコンポーネント(3)

コアなのは、UIComponentクラスとLayoutManagerクラス。

ActionScript3のSetterがGetterを呼び出す？

「詳説 ActionScript 3.0」には下記の内容が書かれています。

setメソッドは、呼び出されると、それに対応するgetメソッドを常に呼び出し、getメソッドの戻り値を返します。
これによりプログラムでは、新しい値の設定後すぐにその値を使うことができます。
…<中略>…
値を返すsetメソッドの機能は便利に使える一方で、getメソッドに制限を加えています。
特にgetメソッドでは、内部的な変数の値の取得に必要な程度を超える作業は絶対に行うべきではありません。
…<中略>…
setメソッドによるgetメソッドの自動的な呼び出しによって、カウンタの記録の追跡が損なわれることになります。

引用：ActionScript3のsetメソッドの返り値

けれども、上記の引用元でも書かれているように、必ず呼ばれる訳ではなさそう。
自分の環境でも、SetterからGetterは呼ばれていなかった。
それは、OreillyのP79の例のようにSetterの戻り値を何かの値に代入したりして結果を評価しても同じだった。

この辺、FlexSDKのレイヤーとFlashPlayerのレイヤーとどちらに依存しているかはよく分からない。
ちなみに自分の環境は以下（Windows版でも今回書いているすべての結果は同じだった）。

Flex4.1A
Macintosh Flash Player 10.3 Plugin content debugger (Intel-based Macs)
FlashBuilder4.6(体験版)

ここでは、ブレイクポイント設定時にFlashBuilderがおかしな動きをして
あたかもSetterがGetterを呼んでいるかのような挙動に見えてはまったので
そこも含めて確認した結果をメモとして残しておく。

まずは、下記のコードを用意。
ポイントは、以下の2点。
・プロパティpropを用意し、そのGetterでpropCountをインクリメントしてコンソール出力
・execute()でGetterとSetterをそれぞれ呼び出し


まず、ブレイクポイントを設定しない時のexecute()実行時のコンソールは、以下となる。

start
GetterCalled:1
callGetter:0
callSetter
SetterCalled
end

やはり、Setterが呼ばれた時もGetterは呼ばれていない。
（自分の環境では、Oreillyの記述は嘘だったということになる）

ただし、ブレイクポイントを23行目に設定して
1行ずつ28行目まで下記のように変数値を確認しながら動かしてみる。

コンソール出力結果は、下記。Getter呼び出しが増えている（赤字が増えた分）。

GetterCalled:1
start
GetterCalled:2
GetterCalled:3
callGetter:0
GetterCalled:4
callSetter
GetterCalled:5
SetterCalled
GetterCalled:6
end
GetterCalled:7

これ、ちょうどブレイクポイントを設定して変数値を確認した回数だけGetterが呼ばれている。
プロパティpropの値をデバッガ上で見せたくて、FlashBuilderが値を表示するたびにGetterを呼び出しているようだ。
しかも、変数参照ビューをスクロールして画面に表示された瞬間にGetterを呼び出すという手の込みよう。

この時点ではまだGetterは呼び出されていない。

表示領域を少しずつ大きくして・・・propが表示された下記の瞬間に初めてGetterが呼び出される（いないいないばぁ的な）

（ここではいないいないばぁするためにダミーの変数を追加しています）

結論としては、このような変な動きをするケースがあるため、Oreillyにも書いてあるように
Getterの中ではオブジェクト内部で保持する値を更新するような副作用を伴う処理は厳禁ということで。

javascriptの配列sliceコピー

使い捨てコード用メモ。
javascriptで以下の方法で、配列を別インスタンスにして（いくつか注意点があるけど）sliceメソッドを使ってコピーできる。

単なる代入との違いは、以下で確認できる。
sliceコピーした配列には要素の削除が反映されていない。
別インスタンスとしてコピーされている。

ただし、あくまで配列が別インスタンスになっているだけであって
deep copyではないので、object型の要素は同じインスタンスを指している。
以下の3つ目のobject型の要素はvar bでも"hoge"から"fuga"へと変更されてしまっている。
他のプリミティブ型はimmutableなのでたまたま変更が跳ねていないだけ。

sliceメソッドを本来の目的でない使い方をしているのと制約があるのとで
使い捨てコードを書くとき以外は使わない方が良さそうだけど、便利そうなので備忘録としてメモっておく。

■参考：
http://www.gucch.net/programming/javascript/jqueryやprototype-jsでオブジェクトをディープコピーする/

node.jsをgithub経由でローカルにインストール

consoleでjavascriptを手軽に扱えるようにしようとnode.jsをインストール。
せっかくなので、githubからforkしてローカルにcloneしてみた。
環境：Mac OS X Lion, Xcodeインストール済み

上記のnodeのページで右上の「fork」ボタンをクリック。
画像は既にfork済み状態でキャプチャしたので、「Your Fork」ボタンになってしまっている。

ちょいと待ったら、自分のGithub上にリポジトリが出来るので
あとはそれをローカルにcloneしてインストール。コマンドは以下。


インストールは、結構時間かかった。
最後にsudoでmake installしないと、自分の場合はPermission Deniedになった。

nodeコマンドが使えるようになった！

Googleの入社問題（数字当てクイズ）

昨日、会社のリスクマネジメント研修とやらを受けさせられたのだが
その中で講師の人が講義の時間の間を埋めるのに以下の問題をGoogleの入社試験だと出題したのだった。

1
11
21
1211
111221
?
【?に入る数字をこたえよ】

自分は結局答えが分からなかったのだけど。
回答が分かれば、コードで出力する問題としては暇つぶしに手頃なサイズだったので以下のアプリで書いてみた。

Javascript-1

以下、ねたばれ注意



HTMLの中に埋め込む形式で書いたのだけど、HTMLの部分は本質ではないので省いている。
HTML付きでブラウザで表示するだけで回答が見れるコードは以下。

https://gist.github.com/1828081

iPhoneのソフトウェアキーボードでコード打ち込みながらdocument.write()するデバッグは辛かった・・・。
最初、自分でnumber型をresにpushしていながら
6行目で癖で===で比較していたため値は一致しても型不一致で期待通りに動いていなかったという＼(^o^)／

以下、回答。一応、文字を白にしとくんで、見たい人は文字選択してください。

1
1 1
2 1
1 2 1 1
1 1 1 2 2 1
3 1 2 2 1 1
1 3 1 1 2 2 2 1
1 1 1 3 2 1 3 2 1 1
3 1 1 3 1 2 1 1 1 3 1 2 2 1
1 3 2 1 1 3 1 1 1 2 3 1 1 3 1 1 2 2 1 1

以下が回答を紹介しているページ。

http://ntakei.cocolog-nifty.com/pam/2006/04/post_231f.html

一言で言うと、文字と文字数を並べていくだけなんだけど、これってどこかで見たことある・・・と思って検索したら、正体は「ランレングス圧縮」だったのであった。
# 大学の情報理論の授業で習ったはず
# 久しぶりにハフマン符号化とか調べてしまった

連長圧縮（ランレングス圧縮、RLE：Run Length Encoding）

連長圧縮では、ある連続したデータを、そのデータ一つ分と連続した長さで表現することで圧縮している。
例えば、「A A A A A B B B B B B B B B A A A」は「A 5 B 9 A 3」と表せる。これは、Aが5回続き、そのあとにBが9回、そしてAが3回続いていることを表している（連続回数を、元のデータを表す符号の前に記録することもある。その場合、符号化した後は「5 A 9 B 3 A」と表される）。

講師の人は、Googleはこういう柔軟な発想が出来る人がごろごろいるのでしょうかねーと言っていた。
そういう発想の柔軟さもそうなのかもしれないけれど裏に隠れているコンピュータサイエンスの基礎理論を見抜いて解ける人もまたターゲットにしているのかも。

まあ、最近のシリコンバレーのジョブインタビューは（一時期流行った）こういうクイズめいた問題は実際の業務では役に立たん！とあまり出題されないらしいけど。

# 2012/2/19 Array.join()を使用するよう変更

GithubをXcodeのリモートリポジトリにする方法（コマンド使わずに）

Xcode4から標準インストールされているGit。
Githubをコマンドを使わずにリモートリポジトリとして指定する手順を説明している
良いページが見つからなかったので書いてみる。

前提

Xcodeプロジェクトが既にローカルGitリポジトリで管理されていること。
Githubにコマンドラインから接続可能なこと。
Version:4.2.1

主に以下の手順となる。

• 1.Github上でリポジトリ作成
• 2.Xcode上でリモートリポジトリ指定
• 3.Xcode上でpush

1.Github上でリポジトリ作成

通常の手順でGithub上でリポジトリを作成する。

2.Xcode上でリポジトリ指定

ここからローカル作業。
Xcode上で下記の要領で"Repositories Organizer"を開く。

そして、自分のプロジェクトの"Remotes"を選択して、"Add Remote"を押下。
下記の要領で入力する。

• Remote Name:Organizer上の表示名程度だと思ってる。詳しい方、教えてください。
• Location: GithubのURI。git@github.com:ユーザ名/リポジトリ名.git

Locationは"https://..."でも行けるとどこかのサイトに書いてあったけど、試していない。

"Create"ボタンを押すと、以下の画面になる。何もせずに静かにOrganizerを閉じる。

最初、画面の下のパスワード等の入力フォームを入力しないといけないと思ってしまい
いろいろと入力してみるも何の反応も無く、Locationをいじったりして勝手にはまった。
しかし、パスワード等を入れなくても、以下の手順でpushまで出来た。

3.Xcode上でpush

下記のように"push..."を押す。

すると、下記のダイアログ登場。
そして、意外とこの画面で待つ。自分の場合、10秒くらい待った。
ここで待たされたせいで、設定が間違っていると勘違いして手戻った。

待ってると、下記の画面登場。さくっと"push"して完了。

全体的に、独りで勘違いして時間かかった。
Repositories Organizerはまだ安定しなくて、結構しょっちゅうCrashする。
今後の改善に期待。

NSNumberクラスとプリミティブ型との変換

元々はこの記事を書こうと思ってたんだった。
脱線してObjective-Cの整数と32bit64bitの記事が一個forkした。
まあ、この記事も元々はCoredataのNSManagedObjectのプロパティの型ではまったことによるforkです。

Objective-Cのコレクションクラス(NSArrayやNSDictionary)ではid型（オブジェクト型）しか扱えないため
NSIneger等のプリミティブ型を扱う際にはNSNumber型に変換する必要がある。
そこで、下記の相互変換についてメモとしてまとめておくことにした。

• NSInteger
• int
• NSNumber

以下、基本的にMac-OS-X 64bit向け。
iOS環境では、NSIntegerの取る型が異なるため、NSLogのString Format Specifiersが異なる。
値が代入されていないと、%@でNSIntegerはエラーにならないが
値が代入されていると、"EXC_BAD_ACCESS"となって実行時エラーとなる。

初期値について

初期化していない状態での初期値は、NSNumberはオブジェクト型なので「nil」、intは「0」となる。
NSIntegerはオブジェクト型として評価すると「nil」、整数として評価すると「0」となる。

int <-> NSInteger

NSInteger -> int はキャストすれば良い。
キャストしないと警告が出るのは"Objective-Cの整数と32bit64bit"で書いた通り。

一方で、int -> NSIntegerはキャストは不要。
理由はざっくりな説明だと、NSIntegerがintをくるんでいるため
下位概念のものを上位概念のものに入れることになるから、かと。

NSInteger <-> NSNumber

NSInteger -> NSNumberについては、NSNumberクラスのメソッドを使用する。
クラスメソッドを使用するパターンとalloc initするパターンがある。

NSNumber -> NSIntegerについてもintegerValueメソッドでOK。

int <-> NSNumber

このパターンについては、NSInteger <-> NSNumberとメソッドが微妙に変わるだけ。



整数以外のfloatやdoubleも基本的には同じなので割愛。

サンプルプロジェクトを以下のGithubで公開。
https://github.com/k-ori/objc-nsnumber-primitive-convert-samples

xcodeからのGithub連携でいいサイトが無かったので、それも後で書く。

■参照ページ
https://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/Strings/Articles/formatSpecifiers.html
https://developer.apple.com/library/mac/#documentation/Cocoa/Reference/Foundation/Classes/NSNumber_Class/Reference/Reference.html

http://peterszwach.blogspot.com/2011/03/github-xcode-4.html