最近はベイスターズ観戦日記と化しております

さぶれの日記
http://flex91.blog19.fc2.com/  presented by さぶれ@

プロフィール


さぶれ@

Author:さぶれ@
Webアプリなんぞ作っている会社に勤めるサラリーマン。自分の技術力のなさを嘆きつつ、日々勉強中。


最近の記事



カテゴリー



月別アーカイブ



スポンサーサイト

--/--/-- --:--|スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

「今更SPD?」と言われて思うこと

2008/06/29 23:58|読書TB:0CM:1

 ちょっと縁があって、学生さんに「学生中にプログラムの勉強しておくなら何をしたほうが良いですか?」と聞かれました。まぁ、オブジェクト指向プログラミングをできるように・・・と思ったのですが、オブジェクト指向以前に、構造化プログラミングを知っておいたほうがよいなぁ、と思いなおしました。と言うわけで、構造化プログラム設計図法 SPD―わかりやすいプログラムへの招待状という本を薦めてみました(ちなみに、こちらのBlogで紹介していたのを偶然読んで知った本です。

 SPDというのは、NECが開発したチャートの一種です。フローチャートや、HCP、PADと言った類似品?があります。まぁ、HCP、PADなどは良く知らないのでコメントできませんが、SPDはなかなか良くできた記法に思えました。構造化うんぬんを意識しなくても、自然に独立性の高いモジュールを持ったプログラム設計ができるようになりそうです。そして、書くのが苦にならないシンプルさを保っています。SPDは以下のような人に最適ではないでしょうか?

  • 長すぎたり、複雑すぎる処理を1つの関数で書いてしまうが、どう改善していいかわからない
  • 人のソースを見てみたが、どんな処理をしているか理解できない
 上記のような人は面倒くさがらずに一度SPDで書いてみるといいでしょう。SPDで書いてみることを続けていれば自然にレベルアップできそうです。気がつけば、SPD何か書かなくても自然と構造化プログラミングをかけたり、人のソースの読解力が上がっていたりしていると思いますよ。

 が、くだんの学生さんにはいまいち受けが良くありませんでしたね。「今更NECが開発した化石のようなチャートを勉強するのは気が進まない」という雰囲気でした。いや、まぁ気持ちはわかります。なんというか、こういう勉強の時ってノリじゃないですけど、何か役立ちそう、かっこよそう見たいな要素があるとモチベーションがあがるんですよね。一応構造化プログラミングできないとオブジェクト指向プログラミングにたどり着けないよ、ということは理解してもらった(はず)たので、SPDを学ばなくても別にかまわないのですがね。

 しかし、SPDみたいに勉強の一助になるツールは、時代にお合わせてリパッケージしたほうが良いのかもしれません。それこそ、ゲームのFF3がリメイクしたことにより今時の人にうけ入れやすい下地を作ったように、ツールも時代に合わせて、「装い新たに再登場!」とかしたほうが勉強する気になりやすいかもしれません。

 まぁ、「グダグダ言ってないで、とりあえずやってみろよ!」というのが本音ではありますがw


スポンサーサイト

FoxMeterを設置してみた

2008/06/28 15:09|未分類TB:0CM:0
サイト訪問者のFirefox3移行状況をチェックできるブログパーツ「FoxMeter」の記事のフォクすけのかわいさに負けて、FoxMeterを設置してみました。FoxMeterは、FireFox3への移行率を集計して、その移行率に応じて表示が変わるというBlogパーツです。
 ちなみにフォクすけバージョンとシンプルバージョンがあり、フォクすけバージョンは3333サイト限定だそうです。より詳しく知りたい人は、下記のサイトを参照してください。

ブラウザ利用率を調べるブログパーツ FoxMeter

 余談ですが、私もFireFox3を早速導入しています。サイト表示のレンダリングが早くなり、メモリの解放も迅速に行われるようです。FireFoxを使っている方は、ぜひ3へ移行することをお勧めします。
 また、FireFoxを使っていない人もこの機会にFireFox3に移行してみては如何でしょうか?私がFireFoxを使っている理由は、フォントサイズを自由に大きくしたりできることですね。フォントサイズを指定しているサイトをIEで開くと、フォントサイズが固定になってしまい、いじれないのが残念です(IE7はページを画像のように拡大することはできるのですが、ページの横幅も一緒に大きくなってしまいます。そのため、ある程度以上の大きさにしすると読みづらくなってしまいます)。他にもソフトウェア開発に役立つプラグインがあるな魅力がたくさんあるFireFox。IEしか使ったことない方は、一度試し見ると面白いと思いますよ。

Implementation Patterns翻訳メモ

2008/06/27 18:38|読書TB:0CM:0
Implementation Patternsを翻訳したときのメモ

P.44 State - 状態
  • 状態を仮定したときに、間違った仮定をしてしまうかもしれない。また、仮定した後に状態が変わるかもしれない。
  • 状態を持たないプログラムを対象とした自動リファクタリングツールなどは、より簡単に作ることができる。
  • 状態は同時並行処理で多くの問題を引き起こす。

 状態管理のコツは、似ている状態を同じところに配置することだ。
 状態が似ているかどうかを判断する手がかり
  • 同じ計算に使われているか
  • 同じタイミングで生成と破棄されるか

P.45 Access - アクセス
 状態へのアクセス方法には二通りある。
  • ストア:メモリに登録された値を読み込む。
  • コンピュート:計算処理の戻り値を受け取る。
上記の方法に大きな差はない。しかし、プログラム言語は区別しているので、我々も区別してコミュニケーションする必要がある。
 ストアとコンピュートのどちらを選択するかは、可読性、柔軟性、実行性能に影響する。

P.46 Direct Access - ダイレクトアクセス
ダイレクト変数アクセス
  • 利点:シンプルで、処理内容を明確に把握できる。
  • 欠点1:変数を変更したら、その変数にアクセスしているプログラムをすべて変更しなければならない。
  • 欠点2:変数に値をセットするだけでは、何をしたいのか分からない。(ガレージのドアが開いていることを示したいとしても、読み手に伝わりにくい)

ダイレクトアクセスを扱う普遍的なルールはない。たとえば、以下のようなものが提唱されている
  • アクセアメソッドとコンストラクタだけで使う
  • 内部シングルクラスまたは内部クラスと、そのサブクラスだけで使う
  • パッケージ内からだけで使う

Implementation Patterns翻訳メモ

2008/06/25 18:58|Java読書会TB:0CM:0
Java読書会の課題図書として、Javaネットワークプログラミングの真髄とは別に、Implementation Patternsという本があります。
この本は洋書でして、会の前までにちょこちょこ訳していかないとついていけないわけであります。
そこで、今回は今訳しているところのレジュメを公開しておきます。
私の場合、英語読むの時間かかりすぎで困っています。
英語力アップせねば・・・・

Implementation Patternsレジュメ
P43.状態
オブジェクトは、振る舞いと状態をパッケージするのに便利だ。
状態が参照可能なネームスペースは小さくなるので、分析が簡単になる。

  • 状態:時間とともに変化する値で計算する。
  • アクセス:状態へのアクセスを制限することにより柔軟性を保持する。
  • ダイレクトアクセス:オブジェクト内の状態に直接アクセスする。
  • インダイレクトアクセス:よりすぐれた柔軟性を提供するために、メソッド経由で状態にアクセスする。
  • 共通状態:フィールドとして、クラスのすべてのオブジェクトに共通する状態を格納する。
  • 可変の状態:インスタンスによって異なる状態をマップとして格納する。
  • 外部の状態:あるオブジェクトに関連する特別な目的の状態を、その状態のユーザが保持しているマップに格納する。
  • Variable:Variableは状態へアクセスするためのネームスペースを提供する。
  • Local Variable:Local Variableは単一のスコープを持つ状態を保持する。
  • フィールド:フィールドはオブジェクトが生きている間状態を格納する。
  • パラメータ:パラメータは、あるメソッドが活動している間は状態とやり取りをする。
  • 収集パラメータ?:複数のメソッドの結果を集約するためのパラメータを通す。
  • パラメータオブジェクト:頻繁に使われる長いパラメータリストをオブジェクトに統合する。
  • 定数:変化しない状態を定数として格納する。
  • 役割を示唆する名前:変数に処理の中で演じた役割で名づける。
  • 型宣言:変数のジェネラル型を宣言する。
  • 初期化:できるだけ明確に変数を初期化する。熱心な初期化:インスタンス生成時にフィールドを初期化する。
  • 不精な初期化:算出が高価な値を持つフィールドを使われる直前に初期化する。

MouseEventのbuttonDownプロパティ

2008/06/24 15:02|FlexTB:0CM:0
FlexのMouseEventには、buttonDownプロパティなんてものがあったのですね。
このプロパティでは、どのコンポーネント上でマウスダウンしたかは拾えませんが、単純にメインのマウスボタンが押されている状態かどうかを知りたいときは、便利に使えますね。
知らなかったので、メモ。

FlexでIMEのモードを制御する方法

2008/06/24 12:49|FlexTB:0CM:0
アプリケーションの使い勝手を上げるために、IMEの入力モードを場面場面で自動で制御する方法を記述します。
以下のサンプルでは、TextInputがフォーカスを取得すると、そのTextInputごとにIMEモードを変更するコードです。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:TextInput x="46" y="40" id="textInput1" focusIn="focusInHandler1(event)"/>
<mx:TextInput x="46" y="79" id="textInput2" focusIn="focusInHandler2(event)"/>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.logging.Log;
import mx.events.FlexEvent;

//textInput1がフォーカスを取得したときに呼び出されるメソッド
private function focusInHandler1(event:FocusEvent) : void {
changeIMEMode(IMEConversionMode.JAPANESE_HIRAGANA);
}

//textInput2がフォーカスを取得したときに呼び出されるメソッド
private function focusInHandler2(event:FocusEvent) : void {
changeIMEMode(IMEConversionMode.ALPHANUMERIC_HALF);
}

private function changeIMEMode(mode:String) : void {
//マシンにIMEがインストールされているか確認する。
if (Capabilities.hasIME) {
try {
//IMEを有効にして、モードを変更する。
IME.enabled = true;
IME.conversionMode = mode;
}
catch (e:Error) {
Alert.show(e.message, String(e.errorID));
}
}
}
]]>
</mx:Script>
</mx:Application>

SpacerとHBoxのパフォーマンス比較

2008/06/23 12:34|FlexTB:0CM:0
Flex アプリケーションのパフォーマンスをつらつら読んでいたところ、Spacerというクラスを発見しました。
Spacerを使うと、下のイメージのように、HBoxの左端と右端にそれぞれUIオブジェクトを配置することが可能になります。
<mx:HBox borderStyle="solid" width="400">
<mx:Button label="left" />
<mx:Spacer width="100%" />
<mx:Button label="right" />
</mx:HBox>



私は、Sapcerという存在を知らなかったので、上図のようなレイアウトをする場合、こんな感じでHBoxを入れ子にしていました。
<mx:HBox borderStyle="solid" width="400">
<mx:Button label="left" />
<mx:HBox horizontalAlign="right" width="100%">
<mx:Button label="right" />
</mx:HBox>
</mx:HBox>

気になったのが、上記二つのレイアウト方法では当然Spacerを使った方が軽いとは思うのですが、どの程度の軽さなのか?といことです。
そこで、早速測定してみました。
方法としては、スクリプトで図のようなレイアウトを1000個Applicationに追加して、その時間を測ります。
3回測定して平均を求めた結果は以下の通り。
  • Spacerを使う方法:2903ms
  • HBoxを入れ子にする方法:3318

・・・・微妙な差ですね。
正直、1000個ものUIを並べていくことはあまりないので、普段はそこまで気にしなくて良い気もします。

しかし、ちょっとしたことの積み重ねで、あっという間に重いアプリケーション動作になってしまうのも事実です。
軽快に動かないとRIAの意味が半減してしまうので、細かいノウハウを積み重ねてコーディングしていきたいものですね。

Java読書会

2008/06/22 21:27|Java読書会TB:0CM:0
昨日は、Java読書会に参加してきました。
Java読書会は毎月一回集まって選んだ本を順番に朗読していく集まりです。
この会には最近参加し始めました。
参加の敷居が低いことと、必ず年に2,3冊は技術書を読破できそうな点が気に入って参加し始めました。
自分でも技術書を読むようにしていますが、それにプラスアルファできますからね。

今は、Javaネットワークプログラミングの真髄を読書中ですが、次回で読み終わる予定です。
8月から新しい本に移行する予定なので、興味ある方は参加してみてはいかがでしょうか?
参加している皆さんは良い人ばかりですので、参加しやすいと思います。

ブラウザ内にSilverlight1.0コンテンツを全画面で表示する方法

2008/06/20 18:06|SilverlightTB:0CM:0
短期集中連載:Silverlightの全貌
こちらの記事の第3回に、Silverlighの表示領域を制御する話しが載っていました(雑誌の連載の方を読みました。今はまだネットに掲載されていないようです)。
しかし、この記事は、Silverlight2.0の話しだったため、Silverlight1.0でどうやるのか調べてみました。

以下、メモ

Default.html.jsのpropertiesのwidthとheightを100%にする。


Silverlight.createObjectEx({
source: 'Scene.xaml',
parentElement: document.getElementById('SilverlightPlugInHost'),
id: 'SilverlightPlugIn',
properties: {
width: '100%',
height: '100%',
background:'#ffffff',
isWindowless: 'false',
version: '1.0'
},
events: {
onError: null,
onLoad: Silverlight.createDelegate(scene, scene.handleLoad)
},
context: null
});

Default.htmlのヘッダーに以下の追加する。


<style type="text/css">
#silverlightControlHost {
height: 100%;
width: 100%;
}
#errorLocation {
font-size: small;
color: Gray;
}
html {
height: 100%;
margin: 0;
}
body {
height: 100%;
margin: 0;
}

Scene.xaml.jsに以下を追加


var slPlugin;
function rootCanvasLoaded(sender, args)
{
slPlugin = sender.getHost();
   if ( slPlugin != null )
{
slPlugin.content.onResize = ResizeSLContainer;
}
}

function ResizeSLContainer(sender, args)
{
var rootCanvas = sender.findName("rootCanvas");
rootCanvas.Width = slPlugin.content.actualWidth;
rootCanvas.Height = slPlugin.content.actualHeight;
}

Scene.xamlを修正


<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
Loaded="rootCanvasLoaded" x:Name="rootCanvas" Background="Gray">





1日3分「夢」実現ノート  岡崎 太郎 (著)

2008/06/19 17:46|読書TB:0CM:0
夢が見つからない人のためのシンプルな習慣 1日3分「夢」実現ノート  岡崎 太郎 (著)

概要

通常では、PDCA、つまり、計画>実行>反省>改善のサイクルでビジネスを行うことが最善とされています。
しかし、計画を立てたはいいが、立てたことに満足してしまい実行できずという場合があるのではないでしょうか?
また、そもそも計画を立てられない人も多くいると思います。
そこで、この本では「まず実行したことを記録することから始めましょう」と説いてきます。
また、日々ふと思ったことをすかさず記録に残します。
そして、後日これらの記録を集計・分析してみると、自分のやりたいこと、自分の理想な生活とのギャップなどに気がつきます。
ギャップに気がついたならば、そのギャップを埋めるような計画を立ててみて、また実行結果を記録して・・・・というサイクルに入っていきます。
つまり、PDCAは無理でも、DCAから始めて、徐々にPDCAに近づけていきましょう。

で、モチベーションシートという記録のためのシートをダウンロードできるので、まずは30日やってみよう、ということらしいです。

実践?

私の場合、2日目にして早速記録をさぼってしまいました。何を書いていいのかいまいちピンとこないんですよね。
これじゃいかんということで、無理やりにでも記録を続けてみようと思っています。


Adobeの戦略

2008/06/18 18:32|FlexTB:0CM:0
最近、javascriptをやりながらつらつらと思ったこととして、ActionScript2.0から3.0へ変わったときの変更内容についてです。
AS2.0はjavascriptと似ていますよね。で、AS3.0はJavaやC#などの言語に近くなっています。
JavaやC#をやっていた人は、AS2.0よりもAS3.0への移行の方が容易だと思います。
このことから、Adobeがエンタープライズ向けに力を入れる戦略の一環としてAS3.0へと進化させたことがよくわかります。

Adobeはここ最近Airやライフサイクルの新製品の発表などエンタープライズ向け商品が元気ですね。

こういう戦略にぶれが見えない時、企業って力を発揮する気がします。
Adobeに注目していきたいと思いました。

クロージャ?

2008/06/17 12:15|JavascriptTB:0CM:0
Silverlight1.0でコンテンツを作っているのですが、私はJavascriptがよくわからないままとりあえずコーディングしてしまっています。
その結果、何やらグローバル変数を大量に作ってしまうわ、データと関数の関連性があいまいになってくるわ、と散々なコードになってきました…。

Javascript流オブジェクト指向プログラミングでもできんものかな?と思い始めたところ、「クロージャ」というキーワードが何やら解決策になるっぽいです。
ちょろっとWebを徘徊してみたんでが、どうもピンときません。
ちゃんと勉強してみようと思いました。

投資戦略の発想法 木村 剛 (著)

2008/06/16 00:07|読書TB:2CM:0
投資戦略の発想法 2008 (2008)投資戦略の発想法 2008 (2008)
木村 剛

ナレッジフォア 2007-12
売り上げランキング : 9112
おすすめ平均

Amazonで詳しく見る
by G-Tools



株必勝○○とかを読むよりこの本を読んだほうが良いと思います。
投資の心構えや基本的な考え方が丁寧に書かれています。

生活が苦しいからといって投資に頼るのはご法度であり、余剰資金を30年くらい
の長期間のスパンで投資するべきだよ、ということが書いてあります。
「安いときに買って、高いときに売るなんて狙ってできるものじゃない」という
思想に貫かれた本です。
「本職の実力を高めることが一番の投資だ」と言われると、正論すぎて非常に耳
が痛いです。
では、「なぜ金融商品に投資をするの?」への答えとして、「リスク回避のため
の手段である」と答えを全般にわたって何度も言及しています。
派手さはないけれど、良い本だと思いました。
投資に興味がある方は、一読してみるといいと思います。

以下、読書メモ。
  • 投資を始める前に、バランスシートを作って、自分の今の財務状況を把握する。
  • 借金があるなら、投資の前に借金返済。
  • 節約は最高の投資
    • 1000円のものを900円のもので買えば、利率10%の高商品になる。
  • 自分の仕事でもうけられる実力をつけよう。
  • 貯金は生活費2年分ためよう。投資は貯めた後で。
  • 株は20銘柄を30年持てば、普通に儲かる。日本経済が駄目にならない限り儲かるはず
  • 転職したいと思う会社の株を買う。

プロカウンセラーの聞く技術  (著) 東山 紘久

2008/06/14 15:40|読書TB:0CM:0
プロカウンセラーの聞く技術 (単行本(ソフトカバー)) 東山 紘久

最近、他人とうまくコミュニケーションが取れていない気がしています。
そこで、上記の本を読んでみました。

カウンセラーが使う、聞くための技術と心得を書いた本です。
コミュニケーションを円滑にするためのテクニックを知りたくて読んでみたので
すが、正直、消化不良です。
自分の苦手分野だからでしょうか・・・・・。
この本は時期を改めて読んでみようと思います。

以下は、読書メモ。
  • 相づちを打とう
  • 相手の言ったことをそのまま肯定しよう。
    • 自分の意見と異なっていても、「あなたはそう考えていることはわかったよ」という意味でうなずこう。
  • askするなlistenせよ
  • 「きく」には、askとlistenに二つの意味がある。
    • ask:相手の意思に沿ってきく
    • listen:訊ねる。自分の意思に沿って質問する。

IsHitTestVisible

2008/06/13 19:04|SilverlightTB:0CM:0
透過処理した画像などの下のレイヤにボタンなどを置いた場合、透過処理した画像が邪魔してボタンをクリックしたりできません。
そんなときは、IsHitTestVisibleを使うとそのオブジェクトはマウスイベントを無視するようになります。
<Image x:Name="lightLayer" IsHitTestVisible="False"~ /> 
って感じでやると、画像の下のオブジェクトをクリックできるようになったいい感じです。

レバレッジ・リーディング

2008/06/11 12:35|読書TB:0CM:0
レバレッジ・リーディング 本田 直之 (著) を読んでみました。

以下、読書中のメモ

レバレッジ=てこ
  • 最高の投資方法は自分に投資すること。
  • 自分への最適な投資は多読
  • 1度読んだ本は二度と読まない(くらいの気持ちで)
  • 一つの分野に対して複数の本を読め=いろんな本に書いてあることは真理(の可能性が高い)
  • 1ページ目から読むな。全体の16%を読み取れれば良い。
  • 本を読む前に、本から得たい内容を明確化(目的をもって読む)。
  • 目的を持つとカラーバス効果が期待できる
  • 読んでいる最中に思いついたことは本に直接書き込め。
  • 重要個所は、ページを折るなどしろ。
  • 読んで終わりにするな。
  • 本に書いた内容をレバレッジメモにまとめなおせ
  • 何度もメモを読みなおし自分になじませよう
  • 修正を繰り返し自分だけのレバレッジメモを作ろう

いろんなところで絶賛されているだけあって、かなり刺激される本ですね。
いろいろな本を読みたくさせる本です。
まぁ、1週間に1冊くらいから始めて、徐々にペースを上げたいですねぇ。
さて、何を読もうかしら。

Silverlight始めました

2008/06/09 13:54|SilverlightTB:0CM:0
最近Silverlightをやらざるおえなくなりました。
しかも、Silverlight1.0です。
私はJavascriptわからんのですよね…・

と、愚痴っていてもしょうがないので、「はじめてのSilverlight」という本を読んでみました。
だいたい、感触はつかめた気がします。

ポイントは、createXaml()にある気がしますね。
var plugIn = document.getElementById("SilverlightPlugIn");
var canvas= plugIn.content.createFromXaml("<Canvas />", false);
var rootCanvas = plugIn.content.findName(rootName);
rootCanvas.children.Add(canvas);
こんな感じで、createFromXamlメソッドに文字列でXAMLを渡すと動的にUIコンポーネントを生成できるので、コードでコンポーネントの配置などを制御できます。

後は、下記のページなどを見ながら、実戦あるのみって感じでしょ">のページなどを見ながら、実戦あるのみって感じでしょうか。
Silverlight 1.0 Reference

時砂の王

2008/06/08 12:38|読書TB:0CM:0
休みを利用して小川一水の「時砂の王」を読みました。

ストーリは、人類を守るために過去に戦力を送って・・・・という一見陳腐にも
思えます。でも、そんなこと全然気になりませんでした。

丁寧に描かれたキャラクタの心理描写、タイムパラドックスネタを積極的に用い
て平行世界をバンバン作られていくのに破綻しないプロット、ストーリの主な舞
台に邪馬台国を選ぶ作者のセンス、どれをとっても最高です。

私は、あまりSFは読まないけど、ネットで書評を見てもSF好きな人にも好評なよ
うです。

非常にお話し盛りだくさんなのに、300ページ未満でうまくまとめていますので、とても読みやすいです。
ぜひ読んで欲しい一冊です。

E4Xのネームスペース処理

2008/06/06 11:12|FlexTB:0CM:1

ネームスペースを指定しないと処理されない


この前作った画像表示アプリに、画像検索エンジンから検索結果を引っ張ってきて、画像一覧に表示する機能を追加してみることにしました。画像検索エンジンはYahooのAPIを使用することにしました。
この前XMLの処理についても勉強したので、正直楽勝と思ったのですが落とし穴にはまりました。
Yahooから返ってくるXMLはこんな感じです。
var result:XML = 
<ResultSet xsi:schemaLocation="urn:yahoo:jp:srchmi http://api.search.yahoo.co.jp/ImageSearchService/V1/ImageSearchResponse.xsd" totalResultsAvailable="987433" totalResultsReturned="10" firstResultPosition="1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="urn:yahoo:jp:srchmi">
<Result>
<Title>ネコポーチ.jpg</Title>
<Summary>ネコポーチ 久しぶりにネコポーチが店頭に並びました。 前回作った時はあまり出足が良くなかったので久しく作らずにいたのですが、お客様の要望も</Summary>
<Url>http://www.kabanya.net/weblog/%E3%83%8D%E3%82%B3%E3%83%9D%E3%83%BC%E3%83%81.jpg</Url>
<ClickUrl>http://www.kabanya.net/weblog/%E3%83%8D%E3%82%B3%E3%83%9D%E3%83%BC%E3%83%81.jpg</ClickUrl>
<RefererUrl>http://www.kabanya.net/weblog/cat1</RefererUrl>
<FileSize>85.3kB</FileSize>
<FileFormat>jpeg</FileFormat>
<Height>298</Height>
<Width>448</Width>
<Thumbnail>
<Url>http://sp1.yt-thm-a01.yimg.com/image/25/m6/3626288746</Url>
<Height>93</Height>
<Width>140</Width>
</Thumbnail>
</Result>
</ResultSet>;
上記XMLからURLデータを抜き出そうとして下記のようにアクセスしたのですが、XMList.length()が0を返します。
trace(result.Result.Url.length);//出力結果:0
この原因は、ネームスペースを指定しないでアクセスしようとしたためです。上記XMLにはこんなネームスペースが指定されています。
xmlns="urn:yahoo:jp:srchmi"
よって、E4Xでアクセスする時は、こんな感じでネームスペースを指定しなければいけません。
var ns:Namespace = new Namespace("urn:yahoo:jp:srchmi");
trace(result.ns::Result.ns::Url.length());//出力結果:1
でも、毎回ネームスペースを指定するのは大変なので、デフォルトのネームスペースを指定します。
default xml namespace = new Namespace("urn:yahoo:jp:srchmi");
上記の宣言は、XMLインスタンスを生成した後やmxmlの初期化がすんでいない時に宣言すると良くわからないエラーがたくさんでます。注意してください。

なぞなこと

var ns:Namespace = new Namespace("urn:yahoo:jp:srchmi");
default xml namespace = ns;
こういう風に宣言すると
VerifyError: Error #1025: 無効なレジスタ 2 がアクセスされました。
というエラーがでます。何なんでしょうね・・・・。バグでしょうか?

mx.effects.Moveを使って画像一覧を作ってみた。

2008/06/05 09:02|FlexTB:0CM:0
せっかくFlexを勉強しているので、effectsを使った何かをやってみようと思いました。
そこで、作ったのが以下のFlexアプリ。
スライドバーで列数を変えると、画像の表示位置がアニメーションしながら変化します。
作ったアプリはこんな感じになりました。
ImageSlideShow.html

ソースとしては、ImageBoxという自作クラスをCanvas上に並べて、ImageBoxで実装したmoveImageを呼び出す、という動作になります。
ImageBox
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" width="400" height="300">
<mx:Image id="myImage" width="100%" height="100%" source="http://fc2.com/ad/200805/mob.gif"/>
<mx:Move id="myMove" target="{this}" duration="500"/>
<mx:Script>
<![CDATA[
public function moveImage(xTo:int, yTo:int) : void {
myMove.stop();
myMove.xTo = xTo;
myMove.yTo = yTo;
myMove.play();
}

public function set sourceURL(value:String) : void {
myImage.source = value;
}
]]>
</mx:Script>
</mx:Module>

mainのmxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*" creationComplete="init(event)">
<mx:VBox width="100%" height="100%">
<mx:HSlider id="columnSlider" height="24" minimum="1" maximum="10" snapInterval="1"
width="501" value="3" change="chnageNumOfCol(event)"/>
<mx:Canvas width="100%" height="100%" id="imageListCanvas">
</mx:Canvas>
</mx:VBox>

<mx:Script>
<![CDATA[
import mx.events.SliderEvent;
import mx.events.FlexEvent;

private var numOfImage:int = 20;
private function init(event:FlexEvent) : void {
var w:int = 100;
var h:int = 100;
for (var i:int = 0; i < numOfImage; i++) {
var box:ImageBox = new ImageBox();
imageListCanvas.addChild(box);
box.width = w;
box.height = h;
var location:Point = getLocation(i, box.width, box.height);
box.x = location.x;
box.y = location.y;
}
}

private function getLocation(num:int, w:int, h:int) : Point {
var numOfCol:int = columnSlider.value;
var x:int = (num % numOfCol) * w;
var y:int = int(num / numOfCol) * h;
return new Point(x, y);
}

private function chnageNumOfCol(event:SliderEvent) : void {
var images:Array = imageListCanvas.getChildren();
var num:int = 0;
for each(var box:ImageBox in images) {
var location:Point = getLocation(num, box.width, box.height);
num += 1;
//移動先の場所を指定して、Moveを実行する。
box.moveImage(location.x, location.y);
}
}
]]>
</mx:Script>

</mx:Application>


ConstraintRowとConstraintColumnクラス

2008/06/04 10:06|FlexTB:0CM:0
Flex3からCanvasクラスに、constraintRowsやconstraintColumnsというプロパティが追加されていたので調べてみました。
これらのプロパティは、Canvasオブジェクトを分割するデータを管理します。
つまり、グリッド上にラベルなどのコンポーネントを配置する場合などは、constraintRowsなどを定義して使用すれば良いようです。

constraintRowsやconstraintColumnsは、具体的にコンテナを持つわけではありません。
レイアウトに行や列を仮想的に定義したときのデータを管理します。
constraintRowsやconstraintColumnsは、親レイアウトコンテナの大きさが変わったときなどは、自動で仮想の行・列の高さや大きさを再計算したりします。

具体的にコードを見てましょう。
constraint.png

例えば、Buttonに「top="row1:10"」した場合、「row1のTopをy座標の0としたとき、Buttonは10の位置にあるよ」という意味になります。
後は、上図を見ていただければ、意味を理解できると思います。

「ConstraintRowというコンテナがあってその子供としてButtonを持つよ」
ということではなく
「constraintRowsとconstraintColumnsで仮想的な線を描いたから、その線を基準に子コンポーネントの位置を決めてね」
という発想のクラスなんですね。
ちょっと、面白い発想だと思いました。
constraintRowsやconstraintColumnsを使いこなせれば、結構柔軟なレイアウトをパフォーマンスへの影響を抑えて実装できそうですね。

時間単位でアニメーションの変化量を計算する方法

2008/06/03 12:33|ActionScript3TB:0CM:0
アニメーションをコーディングするときに、「アニメーション開始から何秒たったから、オブジェクトをこの位置に移動」などの計算をしたいときがあります。
そこで、イベント開始からの経過時間を求めるために、以下のようなコードを使っています。
import flash.utils.getTimer;

//時間カウント開始時刻を保存する。
private var startTime:int;

//一定時間ごとの処理を登録
private function onStartButtonClick(event:MouseEvent) : void {
this.addEventListener(Event.ENTER_FRAME, onTimerTick);
//現在時刻の取得(ミリ秒)
startTime = getTimer();
}

//フレームごとの処理
private function onTimerTick(event:Event) : void {
//経過時間(秒)の計算
var elapsedTime:int = (getTimer() - startTime) / 1000;
//時間ごとの実際の処理・・・
}

private function onStopButtonClick(event:MouseEvent) : void {
this.removeEventListener(Event.ENTER_FRAME, onTimerTick);
}
最初は、TimerEvent.TIMERイベントを使おうとしていました。
しかし、マニュアルを見てみるとTimerイベントは指定したインターバルごとにイベントが発生するとは限らないらしいです。
まぁ、当然と言えば当然な仕様ですね。
仕方がないので上記のような方法をとってみたのですが、毎回現在時刻を取得する処理が何か無駄な気がしてならないのです。
もっとうまい方法が欲しいところです。

Deep Zoom Composerコンテンツをコマンドラインから生成する。

2008/06/02 19:35|SilverlightTB:0CM:0
今回はちょっと趣向を変えて、Deep Zoom Composerのコンテンツを動的に生成する方法について調べてみました。
Deep Zoom Composerは非常に面白い技術だと思うのですが、静的なページにしか使えないのでは面白さは半減です。
Webアプリが状況に合わせて自動で生成していくなどできれば面白そうなことができそうですからね。
動的生成の方法としてコマンドラインからのコンテンツ生成の方法を述べてみます。

コマンドライン用ツール

Deep Zoom Composerコンテンツ生成のコマンドラインツールは「SparseImageTool.exe」になります。
普通にDeep Zoom ComposerをインストールするとC:\Program Files\Microsoft\Deep Zoom Composerにあると思います。

設定ファイル

SparseImageToolを実行するには、xmlの設定ファイルが必要です。
xmlファイルの例は下記に示してみます。
<?xml version="1.0" encoding="utf-8"?>
<SceneGraph version="1">
<AspectRatio>1</AspectRatio>
<SceneNode>
<FileName>D:\test\1.png</FileName>
<x>0</x>
<y>0</y>
<Width>0.5</Width>
<Height>0.5</Height>
<ZOrder>1</ZOrder>
</SceneNode>
<SceneNode>
<FileName>D:\test\2.png</FileName>
<x>0.5</x>
<y>0</y>
<Width>0.5</Width>
<Height>0.5</Height>
<ZOrder>1</ZOrder>
</SceneNode>
<SceneNode>
<FileName>D:\test\3.png</FileName>
<x>0</x>
<y>0.5</y>
<Width>0.5</Width>
<Height>0.5</Height>
<ZOrder>1</ZOrder>
</SceneNode>
</SceneGraph>
FileNameは画像のパスを示します。画像パスは絶対パスの必要があるようです。
x,yは画像の位置を表します。
width,heightは画像の大きさになります。
x,y,width,heightは全体を1とした時の相対値になります。
ZOrderはZindexと同じ・・・ということになっていますが、SceneNodeの並び順が画像のZ座標になっているようです。ZOrderの存在価値って・・・・?謎です。

SparseImageToolの使い方

SparseImageTool.exeはこんな感じで使います。
"C:\Program Files\Microsoft\Deep Zoom Composer\SparseImageTool.exe" CreateDeepZoomImage "d:\test\test.xml" "D:\test\deepZoomProject\catimagedeepzoom\DeepZoomOutput_Web\ClientBin\GeneratedImages\dzc_output.sdi"
SparseImageTool.exe CreateDeepZoomImage 設定ファイルパス 出力先パス
ということですね。

設定ファイル生成プログラム

ついでに、設定ファイルを作るプログラム作ってみました。参考にしてください。
言語はC#です。.NetFramework3.5が必要です。
動作としては、
「指定したディレクトリから画像一覧を取得し、その画像を指定した列数でテーブル上に並べる設定ファイルを作る」
というものです。
//画像を保存しているディレクトリパス
string imagePath = "d:\test";
//画像を何列で表示するか
int numOfColumn = 2;

XDocument doc = new XDocument();

//XMLのルートとAspectRationの生成
XElement SceneGraph
= new XElement("SceneGraph", new XAttribute("version", 1),
new XElement("AspectRatio", 1));

DirectoryInfo di = new DirectoryInfo(imagePath);

//ディレクトにある画像一覧の取得
var query = from file in di.GetFiles()
where file.Name.EndsWith(".jpg") ||
file.Name.EndsWith("png") select file;

//画像の数と表示列数から画像の位置を取得する。
int filesCount = query.Count();
int colmunCount = numOfColumn;
int rowCount = filesCount / colmunCount;
if (filesCount % colmunCount != 0)
{
rowCount += 1;
}

//画像の大きさを計算する。
double deltaX = 1.0 / colmunCount;
double deltaY = 1.0 / rowCount;
double x = 0, y = 0;
foreach (FileInfo file in query)
{
//SceneGraphを追加する。
SceneGraph.Add(new XElement("SceneNode",
new XElement("FileName", file.FullName),
new XElement("x", x),

new XElement("y", y),
new XElement("Width", deltaX),

new XElement("Height", deltaY),
new XElement("ZOrder", 1)));

//次の画像の位置を更新する。
x += deltaX;
if (x >= 1)
{
x = 0;
y += deltaY;
}
}

doc.Add(SceneGraph);

//生成ファイルの書き出し
doc.Save(imagePath + @"\test.xml");

AS3のE4Xについて

2008/06/01 09:12|ActionScript3TB:0CM:0
ActionScript3のXMLクラスはE4X(ECMAScript for XML)に準拠するなど、なかなかリッチなクラスのようです。
E4Xの仕様を中心に、いろいろXMLクラスを使ってみました。
下記のページを参考にしました。というか、ほとんどまんまです。
Core JavaScript 1.5 Guide:Processing XML with E4X

操作対象XML

これから行う操作は、下記のXMLに対して行います。
また、節が変わるごとに、下記のXMLを再セットしてから操作します。
var person:XML = 
<person type="dynamic">
<name>Bob Smith</name>
<likes>
<os>Linux</os>
<browser>Firefox</browser>
<language id="1">JavaScript</language>
<language id="2">Python</language>
</likes>
</person>;
下手に""とかでXMLの値をかこまなくても、直接コードにかけるのが良いですね。

属性の操作

XML要素へのアクセスは、通常のドット演算子+@でアクセスします。
trace(person.@type); //出力結果:dynamic
person.@type="agile";
trace(person.@type); //出力結果:agile

[]の記法もサポートしています。
trace(person["@type"]); //出力結果:dynamic


変数で動的にアクセスすることもできます。
var attribute:String = "@type";
trace(person[attribute]); //出力結果:dynamic

要素の操作

XML要素へのアクセスは、通常のドット演算子以外にも、[]の記法もサポートしています。
trace(person.name); // Bob Smith
trace(person['name']); // Bob Smith
person.name = "Boby";
trace(person.name); // Boby
trace(person['name']); // Boby
trace(person.likes.browser); // Firefox
trace(person['likes'].browser); // Firefox
trace(person['likes']['browser']); // Firefox
person['likes']['browser'] = "IE";
trace(person.likes.browser); // IE

新しい要素の追加

+= 演算子を使うと、指定したノードの下に新しい要素を追加できます。
person.likes.os += <language>C#</language>;
trace(person);
//<person type="dynamic">
// <name>Bob Smith</name>
// <likes>
// <os>Linux</os>
// <language>C#</language>
// <browser>Firefox</browser>
// <language id="1">JavaScript</language>
// <language id="2">Python</language>
// </likes>
//</person>

ただし、下記の操作はエラーになります。
操作対象が複数になってしまうためです。
var person:XML = 
<person type="dynamic">
<name>Bob Smith</name>
<likes>
<os>Linux</os>
</likes>
<likes>
<os>Windows</os>
</likes>
</person>;
person.likes.os += <language>C#</language>;//エラーになる

フィルタ

()演算子を使うと、()内の式にマッチする要素以外をフィルタリングできます。
フィルタリングの戻り値の型は、XMLListです。
操作対象のXMLを変更して試してみました。
var people:XML = <people>
<person>
<name>Bob</name>
<age>32</age>
<weight>80</weight>
</person>
<person>
<name>Joe</name>
<age>46</age>
<weight>64</weight>
</person>
<person>
<name>Mike</name>
<age>12</age>
<weight>32</weight>
</person>
</people>;
var ruslt:XMLList = people.person.(name == "Bob").age;
trace(ruslt); // 46

()内の式には、メソッドを使うこともできます。
var ruslt2:XMLList = people.person.(search(age, weight)).name;
trace(ruslt2);
//<name>Joe</name>
//<name>Mike</name>

疑問点

E4Xって、要素の削除は定義されていないのですかね?

残作業

名前空間については今度調べます。

Amazon



ブログ内検索



RSSフィード



 |  未分類 | Flex | ActionScript3 | BlazeDS | Silverlight | 読書 | Javascript | Java読書会 | 横浜ベイスターズ | 
Copyright(C) 2008All Rights Reserved. さぶれの日記
Powered by FC2ブログ.  template designed by 遥かなるわらしべ長者への軌跡.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。