┏━━━━━━━━━━━━━━━━━━━━━━━━━━■
┃ ■┃
●┃● ● オ ブ ジ ェ ク ト 倶 楽 部 ■ ┃
┃ ■ ┃
┗━━━━━━━━━━━━━━━━━━━━━━■━━━┛
No.226 2008/03/12
■ I N D E X
┃
┣【調査】どんなワークショップに参加してみたいですか？
┣【PF】現場リーダーの心得 [8] 「草稿箱の思い出」
┗【プログラミング】Flex2で体験するリッチクライアント[4]
〇━━━━━━━━━━━━━━━━━━━━━━━━━━━T o p i c s━
〇 【調査】どんなワークショップに参加してみたいですか？
〇 〇━━━━━━━━━━━━━ ━━・
暖かくなってくると、いろいろなものが活動を始めます。我がオブジェクト倶
楽部も、夏の納涼イベントに向けて動きが始まりました！そこで！今回は皆さ
んの声も参考にさせてもらいたい！ということに。もしも、オブラブイベント
でワークショップに参加するとしたら、「どんなワークショップに参加したい
ですか？」
お一人3つまで選んで、回答してください。ご協力をお願いします！
回答はこちらから！
http://www.ObjectClub.jp/special/kininaru/vol2008summer/PlonePopoll_view2
(1) アジャイル開発でなにかプロダクトを作る
(2) ペアプロ体験
(3) Rubyチュートリアル
(4) AIRチュートリアル
(5) Scalaチュートリアル
(6) モデリング道場
(7) 電子工作してみる
(8) 議事録
(9) 会議ファシリテータ
(10) ワークショップファシリテータ
(11) ファシリテーショングラフィク
(12) ビジネスコーチングを受ける
(13) ビジネスコーチを体験する
(14) ワールドカフェ
(15) ワークショップには興味ない。
(16) オブラブでやるんだったら、無条件で参加
(17) ちょっと語らせて！
上記アンケートページにコメントください！！
このメールに返信いただいても結構です。
前回の気になるシステム業界 ホントのところ結果はオブジェクト倶楽部サイ
ト上にて公開しています。先週のアンケートの「今の仕事は天職ですか？」の
結果はこちらから！ぜひご覧下さい。
⇒http://www.ObjectClub.jp/special/kininaru/vol191/PlonePopoll_results2
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ■━
■
┗【PF】現場リーダーの心得 [8] 「草稿箱の思い出」
先日、メーラーの「草稿箱」を整理しました(Becky!を使ってます)。一番古い
のは1998年に書かれたものでした。
草稿箱は、「ためらいの歴史」です。ほとんどは書きかけの下書きなのですが、
何通かは、「書いたけど出すのをためらったメール」なのです。
消す前にもう一度だけ読み返してみると、いくばくかの感傷とともに当時の現
場の思い出がよみがえってきます。
出すのをためらったメールのほとんどは、プロジェクトの苦境を上司に伝える
ために書かれたものでした。
・お客さまとの関係が悪化し、プロジェクトのリスクが高くなっている
・作業の質が問題となり、お客さまから指摘が入っている
・いろいろあって、仕事に対する自信をなくしかけている
などなどです。(実際はもっと生生しいですよ、もちろん)
過去の自分の文章から共通して伝わってくるのは、「もっと私のプロジェクト
にかまって！」というメッセージ。
そして自分が上司の立場になった今、過去の自分に対して感じたのは、「じゃあ、
あんたはどうしたいのよ？何かアクションできることはないの？」という割と
クールな反応でした。上司にだって、できることとできないことがある。手助
けすべきポイントと、手を出しちゃいけないポイントがある。
当時の私も、このことに少しは気がついていたのだと思います。
だからこそ、メールを出すのをためらったのでしょう。
もっと私にかまって！とやみくもに叫ぶだけでなく、現場で考え、行動する。
上司を動かすには、そこまでやらなくてはいけません。
時を超え、草稿箱はそう教えてくれました。
■私のブログです。リーダーネタと少々の技術ネタを扱ってます。
http://d.hatena.ne.jp/HappymanOkajima/
■「プロジェクトを成功させる現場リーダーの技術」私の著作です。
現場リーダーの仕事術をやさしく説明しています。
http://amazon.co.jp/o/ASIN/4797333502/xpjp-22
_______________________________________________________________________
この記事への評価にご協力をお願いします。
URLをクリックして、「ご協力ありがとうございました」のメッセージがご使用
のブラウザに表示されれば投票完了です。
良かった：
http://www.ObjectClub.jp/community/object_ml/estimate?vol=M004-7&choice=0
普通：
http://www.ObjectClub.jp/community/object_ml/estimate?vol=M004-7&choice=1
イマイチ：
http://www.ObjectClub.jp/community/object_ml/estimate?vol=M004-7&choice=2
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ■━
■
┗【プログラミング】Flex2で体験するリッチクライアント[4]
Acid2で有名な標準化団体WaSPが3月3日に、Acid3を発表しました。Acid2はHTML
とCSSでのレンダリングをテストして、スマイリーマークを表示するものだった
のですが、Web2.0時代にあわせるように、Acid3ではアプリケーション領域にも
踏み込んでいて、JavaScriptやそれに伴うDOM操作の結果も評価するようです。
ブラウザによっては、うまく動作しないRIAのサイトがありますが、このテスト
にパスするように対応されていくことで、ブラウザ仕様の統一化が進むとどの
サイトも正しく表示できるようになるでしょう。これはデザイナー、開発者と
もに嬉しいことですね。
ちなみにAcid3に合格しているブラウザは、まだないようです。。。。
さて前回[*1]は簡単なソースコードを書いてコンパイル・実行してみました。
mxmlとActionScriptの関係がわかったと思います。今回から2回にわたり、
CoverFlow風に鏡面効果を付けた画像を表示する、サンプルプログラムを作って
みましょう。
■画像を鏡面効果表示する、サンプルプログラム
ある特定の画像を、鏡面効果で表示するプログラムです。
本サンプルの目的は、mxml上でユーザカスタムコントロールをどのようにして
記述するかを学ぶことです。
■ファイルの準備
前回と同様に、インストールしたFlexのサンプルディレクトリ(flex2\samples_ja\)
の下にサンプルのディレクトリを作成し、以下のファイルを準備してください。
例えば「c:\flex2\samples_ja\reflector」というディレクトリを作ります。
reflector.mxml
ImageReflector.as
■アプリケーション(reflector.mxml)の記述
はじめにアプリケーションファイルを記述します。
<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://www.adobe.com/2006/mxml";
xmlns:local="*" width="100%" height="100%" backgroundColor="0x000000">
<!-- カスタムコントロールで鏡面効果 -->
<local:ImageReflector />
</Application>
各タグの文法は前回解説しているので、今回は省略します。画像を表示するカ
スタムコントロールは、ImageReflectorクラスですので、その宣言するだけで
終わりです。
■カスタムコントロール(ImageReflector.as)の記述
次に画像を表示するためのカスタムコントロールを記述します。
ただし文面の都合もありますので、今回は画像を表示するところまでを解説し
ます。鏡面効果のフィルタリング加工は次回コードを追加して解説します。
package
{
import mx.controls.Image;
import mx.core.IDataRenderer;
import mx.core.UIComponent;
public class ImageReflector extends UIComponent
{
private var _content:UIComponent;
public function ImageReflector()
{
super();
}
override protected function commitProperties():void
{
_content = UIComponent(new Image());
IDataRenderer(_content).data = "http://ec1.images-amazon.com/images/P/4839923221.09._L200_SCLZZZZZZZ_.jpg";
addChild(_content);
invalidateDisplayList();
}
override protected function measure():void
{
if(_content != null)
{
measuredHeight = _content.getExplicitOrMeasuredHeight();
measuredWidth = _content.getExplicitOrMeasuredWidth();
}
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number:void
{
if(_content)
{
var contentWidth:Number = _content.getExplicitOrMeasuredWidth();
var contentHeight:Number= _content.getExplicitOrMeasuredHeight();
_content.setActualSize(contentWidth,contentHeight);
}
}
}
}
■動かしてみよう！
細かい解説は後にして、ひとまずソースコードを記述したら、コンパイルです。
他のサンプルプログラムからbuild.batをコピーしてきましょう。
build.batを実行すると「reflector.swf」ができあがります。FlashPlayerで再
生すると、Web2.0ビギナーズバイブル[*2]の書籍画像が表示できましたね。
■カスタムコントロールを作るなら、UIComponent
Flex2でカスタムコントロールを作るには、いくつか方法がありますが、本サン
プルのように、UIComponentクラスを継承するのが最も簡単です。UIComponent
はPlayerからのイベントを制御してくれるので、カスタムコントロールを作る
場合、特定のメソッドのみオーバライドすれば良い事になります。
また、表示する画像自体は、_contentという属性に持たせることにします。
UIComponentは表示要素のスーパークラスです。
■コントロールの値を変更する、commitProperties
commitProperties()メソッドをオーバライドして、このカスタムコントロール
が持つ値を設定します。FlashPlayerがmxml上の<local:ImageReflector />を解
析すると、内部的にはaddChild() メソッドを使用してコンポーネントが追加さ
れまず。するとFlexはinvalidateProperties()を自動的に呼び出します。
つまり、必ず１度は最初にcommitProperties()が呼び出されるのです。カスタ
ムコントロールの場合、コンストラクタでなく、ここで描画情報を初期化しま
す。
まず、画像(Imageクラス)を実体として、UIComponentを作成します。
_content = UIComponent(new Image());
Amazonの画像を指定します。IDataRenderer.dataに画像のパスを指定すると、
実際の描画はImageクラスが担当してくれます。
IDataRenderer(_content).data = "http://ec1.images-amazon.com/images/P/4839923221.09._SL200_SCZZZZZZZ_.jpg";
カスタムコントロールの要素として、自身の子エレメントとして追加します。
addChild(_content);
つまり、mxml上では、
<local:ImageReflector >
<Image />
</local:ImageReflector >
と書いたのと同じような状態となります。
最後に、invalidateDisplayList()メソッドを呼びます。
invalidateDisplayList()を呼び出すと、画像の描画サイズを調整するため、
updateDisplayList()が呼ばれる仕組みとなっています。
■コントロールのサイズを指定する、measure
invalidateProperties()では、commitProperties()の後にmeasure()メソッドの
呼び出されます。このメソッドではFlashPlayer上に表示するサイズを設定する
必要があるので、_contentから実際の画像サイズを取得して、measuredHeight
とmeasuredWidthのプロパティに値を設定します。
■画像サイズを調整する、updateDisplayList
commitProperties()の最後で、子要素の描画を行うために
invalidateDisplayList()を呼び出しています。ここでは主に子要素の表示サイ
ズ、位置を調整します。
親要素のどの辺に、どのくらいの大きさで表示するか指定するのです。
今回は画像を表示するだけなので、画像サイズを取得して、UIComponentのサイ
ズに設定します。
_content.setActualSize(contentWidth,contentHeight);
■まとめ
今回は画像を表示するだけだったので、これほどコードを記述しなくても、
もっと簡単な方法もあったのですが、この過程は鏡面効果画像を表示するまで
に重要なものです。
いよいよ次回は画像を鏡面加工しますので、楽しみに待っていてください。
(きしだ)
[1]:これまでのメルマガアーカイヴ
第1回 ： http://www.ObjectClub.jp/ml-arch/magazine/209.html
第2回 ： http://www.ObjectClub.jp/ml-arch/magazine/214.html
第3回 ： http://www.ObjectClub.jp/ml-arch/magazine/228.html
[2]:Web2.0ビギナーズバイブル
著者名：伊藤 浩一、大津 真、岸田 健一郎、まえだ ひさこ、安井 力
Web2.0に不可欠なオープンソース技術にはどのようなものがあるのか、そして、
それらを使用して具体的にどのようなWebアプリケーション作成ができるのかと
いうことを一冊の書籍としてまとめたものです。
http://www.amazon.co.jp/exec/obidos/ASIN/4839923221/xpjp-22
_______________________________________________________________________
この記事への評価にご協力をお願いします。
URLをクリックして、「ご協力ありがとうございました」のメッセージがご使用
のブラウザに表示されれば投票完了です。
良かった：
http://www.ObjectClub.jp/community/object_ml/estimate?vol=E0012-4&choice=0
普通：
http://www.ObjectClub.jp/community/object_ml/estimate?vol=E0012-4&choice=1
イマイチ：
http://www.ObjectClub.jp/community/object_ml/estimate?vol=E0012-4&choice=2
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━--■--●--■
■
┗編集後記
こんにちは、編集人です。今週の「現場リーダーの心得」を一足先に読み、自分
の「草稿箱」を見てみました。私の場合をひとことで言えば「お願い」のメール
ばかり。懐かしくなるほど昔のものは既に削除してしまいましたが、自分の仕
事ぶりや人間関係をふりかえるいいきっかけになりました。(上田雅美)
今週の強引な一言
*** 一種二肥三作り(ことわざ)***
農作物をよく作るには、第一によい種子を選ぶこと、第二に適当な肥料を施す
こと。第三が管理をよくすることであるという意味。ソフトウェアエンジニア
をよく創るには、第一によいテーマを選び？第二に適当な仕事をして？第三に
は管理をよくしてもらう？いやいや、セルフマネージメントできるエンジニア
こそがよいエンジニアになれるってもんです！
出典参考：故事ことわざ辞典 東京堂出版
(やっとむ)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━--■--●--■
● ご意見、ご感想は ⇒このメールに返信ください
〇 配信中止、アドレス変更は ⇒http://www.ObjectClub.jp/community/object_ml/help/
〇 免責事項、過去の記事は ⇒http://www.ObjectClub.jp/community/object_ml/
■ 発行：オブジェクト倶楽部 ⇒http://www.ObjectClub.jp/
Copyright (c)2003-2008 オブジェクト倶楽部. All Rights Reserved.
powered by Eiwa System Management, Inc.