2012年3月18日日曜日

後からはいってきたメンバーにも、下の学年にも追い抜かれベンチの我が息子。 今年は母親である私は保護者部長なので、息子の出ない試合にも沢山でかける羽目に。上等だ!一緒に苦渋

背番号を読み上げられ、大声で返事をする息子の横顔。

名前の漢字が間違えている背番号表・・・・切なくて涙がでそうでした。

愛しているよ!頑張ろうぜっ。

出来の悪い子ほど可愛いいって本当かもね。

Posted via email from cohiro's posterous

2012年2月11日土曜日

イチローがやってくる!

いい席(イチローを見るために)はもう残ってなかったけど、行くぞー

息子のいい誕生日プレゼントになるわ!

http://event.yomiuri.co.jp/mlb/

Posted via email from cohiro's posterous

2012年1月28日土曜日

「Let's Rooock! 」な気分! 悪い癖がムクムクと。。 今更ながら映画「School Of Rock」を見た。

本日は、定期健診やら色々あったのに「面倒くさい!」と予定を全部ぶっちぎり。

随分前にTSUTAYAで借りて、見る時間がなく見れなかったものを旦那様がディスクに落としてくれてた「School Of Rock」を見た。

 

Rockとコメディーはよく似合うのね。

私にとって、すごーく面白い映画だった。

ピート・タウンゼントやら ラモーンズ やらアレサ・フランクリンやら私のアイドル達が沢山でてきて(映像だけど)、楽しかったー

ちょっとBLUES BROTHERSみたい?な感覚。

 

大体「ローック!」なんて言ってる人たちは、世間の感覚からすげー外れてて、外側から見るとある種コメディーチック。

大半の人はこの映画で言うところの「観客をビリビリさせる」事なんかできないのに、沢山の労力と時間とお金を使って、どうしようもない音楽を大真面目にやりながら大口をたたくのだ。

 

でも、やっぱり私はこの種の人達が大好き!

Let's Rooock!!!!!

 

Posted via email from cohiro's posterous

2011年9月2日金曜日

Flash Builder開発(画面遷移フレームワーク)

■新機能について

・画面遷移用の新しいコンポーネントは次の通り

spark.components.View:画面用コンポーネント

spark.components.ViewNavigator:画面遷移コンポーネント

 

・上記アプリケーションを定義するためのコンポーネントは次の通り

spark.components.ViewNavigatorApplication:ViewNavigatorコンポーネントを1つ保持

spark.components.TabbedViewNavigatorApplication:ViewNavigatorコンポーネントを複数保持

 

■VIEWNAVIGATORコンポーネント

ViewNavigatorコンポーネントとは:

画面遷移の履歴を保持して遷移できるようにしたコンポーネント

[構成]

部品名 用途

actionBar 画面の情報を表示するActionBarコンポーネント

contentGroup 画面を配置するGroupコンポーネント

 

■VIEWNAVIGATORコンポーネントの機能

1)画面表示機能

Viewコンポーネントで作成した画面を表示する機能

 

2)画面遷移機能

動的な画面遷移とその遷移を管理する機能

次の画面に進めると履歴し、履歴をもとに前の画面に戻せる

 

メソッド名 処理

pushView 指定した画面へ進めて、履歴を1つ追加します。

popView 画面を1つ戻して、履歴を1つ削除します。

popToFirstView 初期画面まで戻して、それまでの履歴を削除します。

popAll 全ての履歴を削除します。

replaceView 現状の画面と新しい画面を入れ替えます。

 

・画面遷移時のトランジション

また、画面遷移時のトランジション(動作)は、4種類が用意されている

 

メソッド名 処理

spark.transitions.SlideViewTransition 上下左右からスライドするエフェクト

(この内右からのスライドがデフォルト)

spark.transitions.FlipViewTransition 回転するエフェクト。

spark.transitions.CrossFadeViewTransition 透明度でフェードアウト・イン

spark.transitions.ZoomViewTransition ズームするエフェクト

 

[設定方法]

① ViewNavigatorのプロパティでデフォルトのトランジションを指定

メソッド名 処理

defaultPushTransition 次の画面に進む際のトランジションを指定します。

defaultPopTransition 前の画面へ戻る際のトランジションを指定します。

 

② 画面遷移する度にメソッドで指定する方法

pushViewやpopViewの引数にトランジションクラスを指定

 

■VIEWコンポーネント

Viewコンポーネントとは:

画面を作成するための基礎となるコンポーネント

Viewコンポーネントをルートタグにして、ボタンやラベルなどのコンポーネントを配置して画面を作成

 

ViewコンポーネントにはViewNavigatorコンポーネントと連携するためのプロパティがある。

そのプロパティでは表示・非表示の他、titleの文字を指定したり、右側のグループのレイアウトなどを指定できる。

 

-------------------

ViewNavigatorコンポーネントとViewコンポーネントを用いたアプリケーション

-------------------

■VIEWNAVIGATORAPPLICATIONコンポーネント

ViewコンポーネントとViewNavigatorコンポーネントを利用して画面遷移を行うようなアプリケーションを構築するための

アプリケーションコンポーネント。

 

ViewNavigatorApplicationコンポーネントには、ViewNavigatorコンポーネントを内部的に1つ保持。

よって、ViewNavigatorApplicationコンポーネントも画面履歴を管理可能。

 

また、保持しているViewNavigatorコンポーネントのfirstViewプロパティを設定するために、

ViewNavigatorApplicationコンポーネントにもfirstViewプロパティが用意す。

 

 

ソースコード:

<s:ViewNavigatorApplication firstView="views.ListView">

</s:ViewNavigatorApplication>

 

 

・ ハードウェアキーとの連携

ViewNavigatorApplicationコンポーネントでは、デバイスのハードウェアキーと連携。

 

キー 動作

Menu アプリケーションメニュー表示(Viewコンポーネントごと)。

Back ViewNavigatorコンポーネントのpopViewメソッドと同等。

 

ソースコード:

    <s:viewMenuItems>

        <s:ViewMenuItem label="再読み込み"/>

        <s:ViewMenuItem label="初期化"/>

    </s:viewMenuItems>

 

 

■TABBEDVIEWNAVIGATORAPPLICATIONコンポーネント

TabbedViewNavigatorApplicationコンポーネントは、ViewNavigatorコンポーネントを複数保持可。

複数のViewNavigatorコンポーネントを切り替えるために、下方にTabBarを表示。

TabBarは、ViewコンポーネントのtabVisibleプロパティで操作することも可。

 

また、ハードウェアキーに対しては、ViewNavigatorApplicationコンポーネントと同様に対応。

ただし、現在表示しているViewNavigatorコンポーネントに対してのみ処理。

 

ソースコード:

<?xml version="1.0" encoding="utf-8"?>

<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 

xmlns:s="library://ns.adobe.com/flex/spark">

<s:ViewNavigator label="Tab1" width="100%" height="100%" firstView="views.Tab1View"/>

<s:ViewNavigator label="Tab2" width="100%" height="100%" firstView="views.Tab2View"/>

</s:TabbedViewNavigatorApplication>

 

 

 

Posted via email from cohiro's posterous

2011年8月25日木曜日

Flash Builder4.5でやる少しデザイン寄りの事

■スキンについて

スキンを活用しないとみんな同じようなインターフェイスになります。

デザインをするためにはスキンを使いましょう(以上 flexbuilder4ガイドより)

 

■..でスキンって何か

MXMLで作成でき、読み書きが簡単であると共に、ツールによるアクセスも容易なもの

デザイン

 

■どうやってつくるのか?

http://www.adobe.com/jp/devnet/flex/articles/flex4_skinning_02.html

FXGというマークアップ言語を使う

 

流れ的には(ボタンの場合):

 ① 単純なボタンスキン作成

 ② ボタングラフィックスのボタンスキンへの変換

 ③ Buttonコンポーネントに関連付ける

 

① 単純なボタンスキン作成

Sample1.mxml

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark">

    <s:Group verticalCenter="0" horizontalCenter="0">

        <s:Rect id="rect" radiusX="4" radiusY="4" top="0" 

           right="0" bottom="0" left="0">

           <s:fill>

               <s:SolidColor color="0x77CC22" />

           </s:fill>

           <s:stroke>

               <s:SolidColorStroke color="0x131313" weight="2"/>

           </s:stroke>

        </s:Rect>

 

        <s:SimpleText text="Button!" color="0x131313" 

                textAlign="center" verticalAlign="middle"

                horizontalCenter="0" verticalCenter="1"

                left="12" right="12" top="6" bottom="6"

        />

    </s:Group>

</s:Application>

 

② ボタングラフィックスのボタンスキンへの変換

ButtonSkin1.mxml

<?xml version="1.0" encoding="utf-8"?>

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled=".5">

 

    <!-- states -->

    <s:states>

        <s:State name="up" />

        <s:State name="over" />

        <s:State name="down" />

        <s:State name="disabled" />

    </s:states>

 

    <!-- border and fill -->

    <s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0" bottom="0" left="0">

        <s:fill>

           <s:SolidColor color="0x77CC22" />

        </s:fill>

        <s:stroke>

           <s:SolidColorStroke color="0x131313" weight="2"/>

        </s:stroke>

    </s:Rect>

 

    <!-- text -->

    <s:SimpleText text="Button!" color="0x131313" 

            textAlign="center" verticalAlign="middle"

            horizontalCenter="0" verticalCenter="1"

            left="12" right="12" top="6" bottom="6"

    />

</s:Skin>

 

 ③ Buttonコンポーネントに関連付ける

これは2つ方法あり。skinClassというCSSスタイルを指定するか mxmlでインラインに設定次の例は mxmlへのインライン指定

Sample2.mxml

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">

    <s:Button verticalCenter="0" horizontalCenter="0" skinClass="ButtonSkin1" 

             click="trace('I\'ve been clicked!')" focusIn="trace('focus...on me?')" />

</s:Application>

 

■スキンステート

http://www.adobe.com/jp/devnet/flex/articles/flex4_skinning_03.html

 

例えば、Buttonコンポーネントには、up、over、down、disabledの4つの基本的スキンステートがあります。

各ステートごとに異なるデザインを設定できます。

 

ButtonSkin2.mxml

<?xml version="1.0" encoding="utf-8"?>

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled=".5">

 

    <!-- states -->

    <s:states>

        <s:State name="up" />

        <s:State name="over" />

        <s:State name="down" />

        <s:State name="disabled" />

    </s:states>

 

    <!-- dropshadow for the down state only -->

    <s:Rect radiusX="4" radiusY="4" top="0" right="0" bottom="0" 

        left="0" includeIn="down">

        <s:fill>

           <s:SolidColor color="0"/>

        </s:fill>

        <s:filters>

           <s:DropShadowFilter knockout="true" blurX="5" blurY="5" 

           alpha="0.32" distance="2" />   

        </s:filters>

    </s:Rect>

 

    <!-- border and fill -->

    <s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0" 

         bottom="0" left="0">

        <s:fill>

           <s:SolidColor color="0x77CC22" color.over="0x92D64E" 

           color.down="0x67A41D"/>

        </s:fill>

        <s:stroke>

           <s:SolidColorStroke color="0x131313" weight="2"/>

        </s:stroke>

    </s:Rect>

 

    <!-- highlight on top -->

    <s:Rect radiusX="4" radiusY="4" top="2" right="2" left="2" 

        height="50%">

        <s:fill>

           <s:LinearGradient rotation="90">

               <s:GradientEntry color="0xFFFFFF" alpha=".5"/>

               <s:GradientEntry color="0xFFFFFF" alpha=".1"/>

           </s:LinearGradient>

        </s:fill>

    </s:Rect>

 

    <!-- text -->

    <s:SimpleText text="Button!" color="0x131313" 

            textAlign="center"

            verticalAlign="middle"

            horizontalCenter="0" verticalCenter="1"

            left="12" right="12" top="6" bottom="6" 

     />

</s:Skin>

 

■スキンパーツ

http://www.adobe.com/jp/devnet/flex/articles/flex4_skinning_04.html

 

Sparkのスキン可能コンポーネントには、コンポーネントの定義に使用できるスキンパーツのセットがあります。スクロールバーの場合、加算ボタン、減算ボタン、トラック、サムの4つのスキンパーツがあります。ボタンの場合、スキンパーツはlabelElementの1つだけです。

 

■スキン可能コンポーネントの作成

http://www.adobe.com/jp/devnet/flex/articles/flex4_skinning_05.html

 

------

ネタ元:Adobeのサイト↓

http://www.adobe.com/jp/devnet/flex/articles/flex4_skinning.html

 

Posted via email from cohiro's posterous

Flash Builder4.5でできる事を調べる

■できる事

Google AndroidとApple iOSの両方のデバイスをサポートするアプリ開発。

 

■Adobeの想定しているワークフロー

Flash Builder(開発)→ Flash Catalyst(インタラクションデザイナー)→ Photoshop/Illustrator(ビジュアルデザイナー)

 

手順:

① Flash Builderでスキン適用可能なコンンポーネントの作成

② Flash Catalystでスキンを変更してデザイン

 

開発とデザインを兼務する人向けには:

Flash Builderでプロジェクトを選択して「Edit in Flash Catalyst(Flash Catalystで編集)」を選択し、Flash Catalystで必要なデザインの変更できる。

 

■パッケージ、クラス、forループ、whileループ、switchブロックの定義など、すぐに使用できる100種類を超える組み込みテンプレートが提供。

カスタマイズもでき他のマシンにエクスポートもできるので、メンバー全員がプロジェクト用に統一されたテンプレートのセットを使って作業できる。

 

■サーバーサイド開発との連携

FlexとPHPを使ったWebアプリケーションやモバイルアプリケーションを構築する開発プロセスを合理化

------------------------------

元ネタはAdobeのサイトです↓

http://www.adobe.com/jp/devnet/flashbuilder/articles/whatsnew-flashbuilder-45...

Posted via email from cohiro's posterous

仕事モードオン!

この年から、そして子育て中のこの状況の中で、新たに技術を習得するつもりの自分が好きで嫌いだ。

 

Posted via email from cohiro's posterous