┏━━━━━━━━━━━━━━━━━━━━━━━━━━■
┃ ■┃
●┃● ● オ ブ ジ ェ ク ト 倶 楽 部 ■ ┃
┃ ■ ┃
┗━━━━━━━━━━━━━━━━━━━━━━■━━━┛
No.275 2009/03/25
■ I N D E X
┃
┣【プログラミング】SproutCoreでカッコイイ
┣ Webアプリケーションを作りたい [5]
┣【コラム】三色マーキング読書法 [5](最終回) − 応用編
┗【アンケート】気になるシステム業界 ホントのところ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ■━
■
┣【プログラミング】SproutCoreでカッコイイ
┗ Webアプリケーションを作りたい [5]
こんにちは、浦嶌です。
前回はBacklogモデルを作成するところで紙面が尽きてしまいました。今回から
バリバリと画面を作っていきましょう。まずは一覧表示です。
● コントローラを作る
SproutCoreはMVCフレームワークなのでモデルにアクセスするにはコントローラ
を介すのが定石です。SproutCoreには以下の4つのコントローラが用意されてい
ます。
- SC.Controller
- SC.ObjectController
- SC.ArrayController
- SC.CollectionController
今回は一覧画面なので、オブジェクトのリストを扱えるArrayControllerか
CollectionControllerが良さそうです。この2つについてSproutCoreのWiki[*1]
で調べてみると
- ArrayControllerはリストをそのまま扱う
- CollectionControllerはリストをフィルタリングしたものを扱える
という違いがあるようです。現時点ではあまりピンと来ませんが、ひとまず単
純で扱いやすそうなArrayControllerを使うことにします。
では、コントローラを生成します。sc-genコマンドの第3引数でコントローラの
クラスを指定できます。
$ sc-gen controller rist/backlogs SC.ArrayController
-- clients/rist/controllers/backlogs.js --
require('core');
Rist.backlogsController = SC.ArrayController.create({
});
----
次に、コントローラとモデルを結び付けてやります。こういった
アプリケーションの初期化処理はmainメソッドに書くのが流儀のようです。
-- clients/rist/main.js --
function main() {
Rist.server.preload(Rist.FIXTURES) ;
SC.page.awake() ;
var backlogs = Rist.Backlog.findAll();
Rist.backlogsController.set('content', backlogs);
};
----
後半の2行が追加したコードです。モデルをすべて取り出して、コントローラの
contentプロパティにセットしているだけですね。
以上でコントローラの準備は完了です。
● バックログの一覧を表示する
それでは、いよいよ画面を作成します。
-- clients/rist/english.lproj/body.erb --
<% content_for :body do %>
<% scroll_view :backlogs_scroll do %>
<%= list_view :backlogs, :content_value_key => 'title', :bind => {
:content => 'Rist.backlogsController.arrangedObjects'
} %>
<% end %>
<% end %>
----
list_viewはその名の通り、リストを表示するビューです。バインドする
オブジェクトとしてコントローラのarrangedObjectsプロパティを指定してやり
ます。arrangedObjectsは表示のためのリストを返すプロパティだそうです。
リストの各要素について、どのプロパティを表示するかをcontent_value_keyで
指定しています。この場合はバックログのtitleプロパティが一覧として表示さ
れるわけですね。
これで一覧が表示されるはず・・・と思いきや、何も出ません。試行錯誤の結
果、ビューに高さを指定してやらないと駄目だということが判明しました。
-- clients/rist/english.lproj/body.css --
.backlogs_scroll {
height: 20em;
}
----
それでは再読み込みしてみましょう・・・前回フィクスチャとして定義したモ
デルが一覧に表示されています。ちゃんと動いているようですね。
● まとめ
今回はモデルをコントローラに結び付けて画面に表示することができました。
表示だけでは寂しいので、次回以降、編集や追加の機能を作っていきます。
(id:ursm)
[*1] http://wiki.github.com/sproutit/sproutcore/keeping-control
_______________________________________________________________________
この記事への評価にご協力をお願いします。
URLをクリックして、「ご協力ありがとうございました」のメッセージがご使用
のブラウザに表示されれば投票完了です。
良かった：
/community/object_ml/estimate?vol=E0015-04&choice=0
普通：
/community/object_ml/estimate?vol=E0015-04&choice=1
イマイチ：
/community/object_ml/estimate?vol=E0015-04&choice=2
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ■━
■
┗【コラム】三色マーキング読書法 [5](最終回) − 応用編
読者の皆様、こんにちは。黒岩です。4回に渡ってお送りしてきたこの記事です
が、今回がこの連載の最終回です。(僭越ながら)今後オブジェクト倶楽部の活
動が「広く」いろいろな人たちに受け入れていただけるようにと願って、最終
回は英語で書いてみたいと思います。
● 概要
本連載では読書を楽しくする工夫をご紹介しています。これまでに「分類」
「対比」「ナンバリング」「式化」のテクニックをご紹介しました。今回は、
応用例として「分類(○と×で整理)」と「対比(赤と青で２文を比較)」のテク
ニックを使って、マインドマップを作成しました。以下に今回作成したコンテ
ンツをアップロードしていますので、よろしければご覧下さい。
http://f.hatena.ne.jp/m5101202/20090324040906
● Abstract
In this series, I introduced some techniques to enjoy reading. Today,
I would like to propose one of the applications of the “Tri-Color
Reading”. It is to create mindmap.
● Previous lesson
In previous article, we learned the schematic expression. The point of
the method is to find the sentence structure like the following examples.
・A consists of B and C.
・A is B and C.
If you interested, the articles below are also available.
1. Classification:
/ml-arch/magazine/261.html
2. Contrast:
/ml-arch/magazine/266.html
3. Numbering:
/ml-arch/magazine/272.html
4. Schematic Expression:
/ml-arch/magazine/279.html
● Practical application
I drew a mindmap based on a sentence (shown below) picked up from the
aricle [*1].
http://f.hatena.ne.jp/m5101202/20090324040906
『Software development is not a production or a manufacturing activity
[Reves92]. Software engineers create different things every time,
whereas manufacturing produces same things over and over again.』
In this example, we applied the method 1 (classification) and 2
(contrast). The classification method reveals the false (×) and the
true(○) from the sentence. The contrast method is shown in red and
blue. In this case, red and blue correspond to true and false.
● Summary and Conclusions
The “Tri-Color Reading” makes us enjoy reading.
・It helps you creating your mindmaps.
・It is easy to start. (Just use 3-color pen.)
・It is fun!
Have a nice reading life. See you next time. Thank you. :-) (黒岩)
● References
[*1] Kenji Hiranabe,
"Kanban Applied to Software Development:from Agile to Lean"
http://www.infoq.com/articles/hiranabe-lean-agile-kanban
_______________________________________________________________________
この記事への評価にご協力をお願いします。
URLをクリックして、「ご協力ありがとうございました」のメッセージがご使用
のブラウザに表示されれば投票完了です。
良かった：
/community/object_ml/estimate?vol=H004-04&choice=0
普通：
/community/object_ml/estimate?vol=H004-04&choice=1
イマイチ：
/community/object_ml/estimate?vol=H004-04&choice=2
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━--■--●--■
■
┗【アンケート】気になるシステム業界 ホントのところ
今週は「WBCは観ましたか？」のホントのところ。
野球好きな方はもちろん普段はあまり野球を観ないという方も、国別で優勝を
争うWBCはご覧になった方が多いのではないでしょうか。2006年に続き、今年も
みごと日本が優勝し、たくさんの名場面を生んだWBC。みなさまはご覧になりま
したか？
スタジアムで観戦しました！
/special/kininaru/vote?vol=240&choice=0
テレビで観戦しました！
/special/kininaru/vote?vol=240&choice=1
観ていませんがニュース等で結果はチェックしました。
/special/kininaru/vote?vol=240&choice=2
観ていません。
/special/kininaru/vote?vol=240&choice=3
WBCってなに？
/special/kininaru/vote?vol=240&choice=4
それは秘密です。
/special/kininaru/vote?vol=240&choice=5
ちょっと語らせて！
詳細をこのメールに返信ください！！
アンケート結果はオブジェクト倶楽部サイト上にて公開します。お楽しみに。
なお、前号「卒業式で泣いたことある？」の結果は公開中。ぜひご覧下さい。
⇒/special/kininaru/vol239/PlonePopoll_results2
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━--■--●--■
■
┗編集後記
こんにちは、編集人のナガタユウコです。東京では桜が開花しましたが、ぽか
ぽか日差しが暖かくなったかと思えば、次の日には冷たい風が吹いたりして、
体調を崩された方も多いのではないでしょうか。お花見を楽しむためにも、体
調管理はしっかりしたいですね。(ナガタユウコ)
オブジェクト倶楽部カレンダーの2009年4月分の電子データを公開します。
4月のカレンダーは、過去のオブラブLTの傾向です。これまでのオブラブイベン
トでは心に響く浪花節なLTが不特定多数の支持を受けてベストトーカー賞に輝
く傾向にありました。今後ベストトーカー賞を狙う方は過去のベストトーカー
をとったLTのワビサビやお笑いセンスを研究してみると新たな発見があるかも
しれません。私自身、4月のカレンダーを作成するにあたり、過去のオブラブイ
ベントで発表されたLTスライドを一気読みしましたが、十人十色のストーリー
展開やデザイン構成から多くの気づきを得ることができました。読者のみなさ
んも短編小説を愉しむような気持ちで、過去の発表資料を一読されてみてはい
かがでしょうか？さまざまなLTに触れることで、これからのLTをもっと楽しむ
ことができるかもしれませんよ。(伊藤浩一)
カレンダー電子データ
/special/#calendar
今週の強引な一言
*** 目は毫毛を見るも睫を見ず(ことわざ) ***
目は毛筋のような細かい物まで見えるのに、一番近い自分のまつげは見ること
ができない。他人の事はよく見えるが、自分の事はわからないことのたとえ。
自分のことは棚に上げて人の欠点を責めたり、逆に自分の長所に気づかずに人
のことをうらやましがったり。ちょっと立ち止まって自分をふりかえり見つめ
てみると、気づいていなかった自分の一面に気づくかもしれません。
出典参考：故事ことわざ辞典 東京堂出版
(ナガタユウコ)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━--■--●--■
● ご意見、ご感想は ⇒このメールに返信ください
〇 配信中止、アドレス変更は ⇒/community/object_ml/help/
〇 免責事項、過去の記事は ⇒/community/object_ml/
■ 発行：オブジェクト倶楽部 ⇒http://ObjectClub.jp/
Copyright (c)2003-2009 オブジェクト倶楽部. All Rights Reserved.
powered by Eiwa System Management, Inc.