つれずれなるままの開発日記(最近はFlexばかり..)

Archive for 9月, 2010

さて、久々のmod_chxj（携帯コンテンツ変換のApache module) に変更を取り込んでもらいました。

今回の目玉は大きく分けて、出力文字コード対応と、画像変換関連です。

使い方はまた、再度こちらで乗せたいと思いますが、
これで、mod_chxjでXHTMLのサイトがかなり使いやすくなってきたと思っています。

いまどき、携帯といえばすっかりスマートフォンですが、スマートフォンに意識が高まりつつあればあるほど、
既存携帯のサイトというのはお金や、時間がかけられなくなるのだと思っています。

しかし、それとは逆に、利用されているほとんどは既存の携帯からのアクセスです。

だからこそ、携帯サイトはすっきり簡単に構築できないといけないかなと。
今更、携帯向けのXHTMLを勉強したいという気にもなりませんしね。

試してみたい方は、
http://sourceforge.jp/projects/modchxj/cvs/
をどうぞ。

ただし、0.13系はgitにしかないと思うので、gitからソースをダウンロードする必要があります。
このあたりがめんどくさいのですが・・・・

前回の本の紹介ににも通じる話だ。

今、ちょっと、JQueryを使う必要が出てきた。
要するにAjaxだ。
実は、Ajaxという用語のライブラリを使うのはほぼ初めてだ。
(JavaScriptは多少使うが、ちょっとした関数レベル。DOMツリーを操作するようなことはなかった。）

というのも、あまり、好きではなかったからというのが理由だ。

でも、ActionScriptをやっていたので、まあまあすんなり理解できた（と思う）。

が、やはり、これはHTTPがよくわかっていない人には、本や説明の通りに実装することは可能なようだが、
それ以上は難しいようだ。
（これが、好きではない理由の一つなのだが・・・）

Ajaxを使うとなると、HTML表示のバッチ的な処理よりも、よりクライアントアプリに近い考え方が必要になる。
（Flexでも同様だとはおもうが・・・）

結局は、クライアントアプリを作る上での基本と概念を突き詰めることになり、
一方で、サーバ側をみれば、通信が複雑化していくわけなので、通信の方も基本とその概念をつきつめて行くことになってしまう。

たとえば、
クライアントでは、画面（正確にはデータ）の書き換えを早くやるには・・・・、たくあんあるオブジェクトを作成しないでたくさんあるように見せるには・・・とか。
HTTPで全二重的な通信をしているようにするには・・・・とか。

これらは、Ajax的な概念がなかった頃のWebアプリでこのような問題にぶち当たることはそうそうなかった。

とおもしろいもので、技術が進んでも、勉強することはだんだん過去になっていき、
むかーしのより単純な構造だった時の本などで勉強したくなってしまう。

だから、「あーこれは基本的な話がしてあるなー」
という本を見つけると、今は必要かどうかわからなくても、ついつい手元に置いておきたくなる。

久しぶりに本の紹介です。

こちら、Linuxでプログラムなどをしている人は読んでみるのも結構いいと思います。
内容は、「Cでできているプログラムのパッケージングの仕方」です。

もう少し具体的なことを言えば、
configure; make; make install;
のルールでソフトウェアをパッケージングするにはさせるにはどうすればいいかと。
もちろん、それ以外にもなぜ、
/usr/lib
の下には、lib* というシンボリックリンクファイルがたくさんあるのかとか・・・

題名と、内容があまり結びつかないので、探していてもなかなかたどり着かないのが残念ですが、
こんな本があったんだ。と思いました。
これを先に読んでいたら、「C言語と環境」のあたりがもうちょっとすんなりわかったのになーと。

これだけ聞くと、関係ないな－という人も、
LAMP環境を自分で構築してプログラミングをしている人は、なんとなくやっていることの中身がわかるので、
どうしてもmakeで失敗してしまうとか・・・
のような時に、誰も助けてくれないが、どうにか自分で解決しなければならないときなんかには参考になるとおもいます。

また、自分が専門的にやっているレイヤーから、もうちょっと下の層に入ってみると、
実は自分がもっている問題点が直ったりすることがわかることもあります。

たとえば、patchコマンドなんてスクリプト言語をやっているとあまりつかわないかもしれませんが、使えると結構便利です。
そんなことも説明があります。

この間、いくつものプロジェクトの為にコピーしてしまったプログラムを修正するのに、
一応、その部分でカスタマイズが入っていないことを確認しつつ、
コピー＆ペーストでがんばっている人がいましたが、こんなのpatchで一発なのにと教えてあげましたが、
難しいと言って、コピー＆ペーストで乗り切ろうとしていましたが、結局、スケジュールに間に合わないからと直すことすら、やめていました。

こんな感じに、ほんのちょっと周辺がわかるだけでかなり楽になることもあるので、
知識として読んでおくだけでもいいと思います。

それと、非常に広く使われているにもかかわらず、作る側はあまり知っている人がいない。
そして、その考え方もあまりかわるようなこともないほど枯れているようなことって、結構、あとあとになって必要になることが出てきます。

そんな時に、あーこれだ。と思っても、手に入らない事って結構あるので、
一人に一冊とは言いませんが、会社の本棚にはあってもいい本だと思います。

さて、つい１ヶ月半まえには、メール送信の問題(airxmail)でSSL/TLSを見ていました（実際にはas3cryptoのソース）が、
今回はDeflate(圧縮) の中身をちらほらと見ることになりました。

別にすべてを理解したとも思っていませんし、理解できたとおもってもいませんが、
このようなレイヤーを真剣に読んでみるということは、自らのモチベーションのみではちょっと無理です。
しかしながら、見てみると意外にいろんな発見があって、非常に為になります。

具体的に何が為になるかとは表現しづらいですが、コンピュータの基礎の部分の大切さを再認識します。

ちなみに、Deflate処理はこちらがいいです。

http://www.futomi.com/lecture/japanese/rfc1951.html

今更ながら、大学時代に聞いたことがあるような用語だぞ。というのもあります。

あの頃は、何に使うのか、どこでつかうのかが全くわかりませんでしたが・・・

最後に、いろいろと使ってくださる方や、さらに意見をくださる方々に本当に感謝します。

spark:RichEditableTextを使って、キャレットがある位置に画像を挿入してみました。
（正確に言えば、キャレットではないのかもしれませんが・・・・）

TextLayoutFramework も関係してきます。

MXMLはこんな感じ

<s :RichEditableText id="f_richEditableText" width="80%" height="90%" />

挿入する場所のソースはこんなかんじ。

private function doInsertInlineImg():void{
	// f_richEditableTextは RichEditableText
	var textFlow:TextFlow  = f_richEditableText.textFlow as TextFlow;

	//　全体のテキストの中で何番目の文字の前にキャレットがあるか？
	var absPos:int = f_richEditableText.selectionAnchorPosition;

	//  「行」を取得する

	var line:TextFlowLine = textFlow.flowComposer.findLineAtPosition(absPos);
	var para:ParagraphElement = line.paragraph;

	//  選択した「行」の何番目かの文字列か？
	var linePos:int = absPos - line.absoluteStart;

	//  行のパラグラフから、対象となる要素(ふつうは SpanElementかな )を取得する
	var targetElement:FlowLeafElement = line.paragraph.findLeaf(linePos);

	//  要素が始まる場所を全体の位置から引いて、要素内の何番目かを調べる
	var elementPos:int = absPos - targetElement.getAbsoluteStart();

	var rf:InlineGraphicElement;
	var childAt:int;

	if(targetElement.textLength > elementPos){
		var ele:FlowElement = targetElement.splitAtPosition(elementPos);
		childAt = para.getChildIndex(ele);
		rf = new InlineGraphicElement();
		rf.source = drawRect("[挿入文字]");
		para.addChildAt(childAt,rf);
	}
	else{
		//  ここに来ることはないはず・・・
	}

}
private function drawRect(label:String,height:int = 18):Sprite{
	var rect:Sprite = new Sprite();
	var text:TextField = new TextField();
        text.height = height;
	text.text = label;

	var width:int = text.width + 10;

	rect.addChild(text);
	rect.graphics.beginFill(0xff0000);
	rect.graphics.drawRect(0,0,width,height);
	rect.graphics.endFill();
	text.width = width;
	rect.width = width;
	return rect;
}

Apacheのモジュールで、どうにかしてDBにあるデータを取得したいな－と思っていた。
しかし、具体的なDBのクライアントとして作りたくないし、ライブラリを組み込むのもめんどくさい。

また、用途もSQLほどの複雑さを求めているわけでもなく、単にKey/Valueのレベルでいいのだ。

どうしたらいいかと、考えていたら、 Apacheというかaprにはmemcacheへの接続関数が提供されているし、
DB側は、jmemcache-daemon というJavaのライブラリがあり、
こちらで、memcacheのプロトコルをサポートしています。
（どうやら、こちらも JBoss Nettyを使っているようで、こちらの使い方も以前調査済みなので、助かる。）

ここで、キャッシュストレージを自作して、内部でJDBCで接続して値を返すようにすれば、
DBの値が取得できるって訳です。

aprのmemcacheがあまり使われていないようなのが、
気になりますが問題があるーと情報があるころからはだいぶバージョンも進んでいるようなので、まあ、大丈夫かなと。

実際、試してみたところ簡単なXMLの取得はできているので、まあ、私の目的は達成できているのでいいかな。

memcache自体がDBのキャッシュのような使われ方をしているのに、memcacheのストレージをDBにしてしまうというのは、
ちょっとおかしな感じもしますが、C言語（ネイティブ）な環境だとライブラリ問題がいつも発生するから、
このような単純でかつよく使われているプロトコルでを通してアクセスするはいい方法かなと思っています。

サーバ ( memcached ) 側のテストもtelnetでできますし。

Flex Builder改め、Flash Builderでは、MXMLスキンの作成というのがメニューに加わり、
よりスキンの作成も簡単になるのかとおもい、ちょっと挑戦してみた。

ここで、単純なSkinの作成ではほかのサイトを見た方が詳しく書いてあると思うので、
私なりにちょっとはまった部分を乗せる。

具体的には、SparkのButtonを作成することにした。
しかし、Buttonに、２つのラベルが設定できるようにしたいのだ。
どうしてかと言えば、STEP 1 とか STEP 2とかのようなナビゲーションボタンを作りたい。

ここで、

<local :StepButton label="初期設定" step="STEP 1" />

のようにして、以下のような図のボタンを作りたい。

Buttonのスキンを作ると、デフォルトでソースがコピーされるが、
いらない部分を消していき、必要となるラベルを以下のように追加した

<local :step width="{width}" height="{height}" />
<s :Label id="stepDisplay"
		 textAlign="center"
		 verticalAlign="top"
		 maxDisplayedLines="1"
		 horizontalCenter="0" verticalCenter="1"
		 left="10" right="10" top="13" bottom="2" color="#FFFFFF" fontSize="14" >
</s>

<!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
<s :Label id="labelDisplay"
           textAlign="center"
           verticalAlign="middle"
           maxDisplayedLines="1"
           horizontalCenter="0" verticalCenter="1"
           left="10" right="10" top="7" bottom="2" color="#FFFFFF" fontSize="16">
</s>

ちなみに、<local :step />というのはFXGで作成した背景画像です。

どうやら、labelDisplayというのが、labelで設定したものなので、これと同様にして、
stepDisplayのラベルを作成してみた。

さて、設定できる先は作成したものの、このLabelにどうやって値を設定するのだろうか？と悩んでしまった。

結論から先に言えば、以下のコードでできた。

< ?xml version="1.0" encoding="utf-8"?>
<s :Button xmlns:fx="http://ns.adobe.com/mxml/2009"
		  xmlns:s="library://ns.adobe.com/flex/spark"
		  xmlns:mx="library://ns.adobe.com/flex/mx"
		  width="160" height="75"
		  >
	<fx  eclarations>
		<s :State name="current" />
	</fx>
	<fx :Script>
		< ![CDATA[
			import spark.components.supportClasses.TextBase;

			[SkinPart(required="false")]
			public var stepDisplay:TextBase;

			private var _stepLabel:String;

			public function set stepLabel(label:String):void{

				if(stepDisplay){
					stepDisplay.text = label;
				}
				_stepLabel = label;
			}

			override protected function partAdded(partName:String, instance:Object):void{
				super.partAdded(partName,instance);

				if(instance == stepDisplay){
					stepDisplay.text = _stepLabel;
				}
			}
		]]>
	</fx>
</s>

肝は、partAdded(partName:String, instance:Object) の部分。
ここで、instance部分にSkinPartで定義したインスタンスが渡ってくるので、そのインスタンスに文字列を設定すると
Skinで定義した stepDisplayに文字列が設定される。

まだまだ、疑問はのこるが、とりあえずはこれで目的は達成できた。

疑問は
１）SkinのIDと部品の変数名は同じでないといけないのか？
　マッピングをどこかに記述することができるのか？

２）SkinとMXMLの部品をどう使い分けるか？
　別に上の用途はSkinでなくてもこれまで通りMXMLで対応できる。
　特にコンポーネントとして作る必要がないケースなどは特に悩みますね。