しらべる Archive

ですね。全然しらなかったのですが。
OS,ブラウザ,FlashPlayerのそれぞれのバージョンにの組み合わせを知りたいときにとても重宝しました。

左メニューの中央あたりに「カスタムレポート」という項目を選択して、新規作成をすると編集画面が表示されます。

左側のメニューの「指標」からレポートの横軸、「ディメンション」から縦軸の項目をドラッグして自由に選べます。

最後に「レポートを保存」すると、設定した形式でレポートが表示されます。

これで、
ディメンションを

• OS > ブラウザ > Flash
• Flash > ブラウザ > OS
• Flash > OS > ブラウザ

開発をしていると、アプリケーションの配備や管理のためにいくつかサーバーが必要になることが多く、そのほとんどは開発が終わるとしばらく放置されて忘れたころに別のプロジェクトで必要になります。そのときは新しいプロジェクトの仕様にあった環境づくりをするので、再インストールやクリーンアップやバージョンの競合なんかに煩わされる羽目になります。そこで便利のが仮想マシン(Virtual Machine)。さらにいうと、仮想アプライアンス(Virtual Appliance)です。

巷で多い仮想マシンはVMware,VirtualBox,Xenなどですが、これらはすべてハードウェア(PC)のように振舞うソフトウェアです。これにいろいろなOS、サーバーソフトウェアをはじめとするアプリケーションを入れた状態でパッケージしたものを仮想アプライアンスといいます。ダウンロードして起動したらすぐにつかえるサーバーが手に入るわけです。
以下は仮想アプライアンスをつかってみた感想です。

bagvapp
http://bagside.com/bagvapp/

• 対応仮想マシンはVMWareのみ
• バージョン違いを含めると100種類弱のOS
• プリインストールアプリが低層レベル(kernel-devel, cpp, gcc, VMwareTools Adobe flash pluginなど)
• 無償

Virtual Appliances
http://virtualappliances.net/

• 対応仮想マシンが多い(VMware VMDK, VMWare OVF, Parallels, QEMU/KVM, Virtual Iron, Microsoft Virtual PCなど)
• OSはUbuntuのみ？
• LAMP, LAPP, TomcatなどのWebサーバー用のセットが用意されている
• 専用webalizer,phpMyAdminなどのWebコンソール付き
• 無償

JumpBox
http://www.jumpbox.com/go/virtualization

• OSはUbuntuのみ？
• 対応仮想マシンが多い(VMWare, Parallels, VirtualBox, Microsoft Hyper-V, Virtual Iron, Xen, Amazon EC2など)
• アプリケーションセットも豊富 (LAMP, LAPP, RubyonRails, PmWIki, WordPress, Bugzilla, phpBB,MovableType, Trac, Redmine, Nagios, SugerCRM, OpenLDAP, Liferay)
• 一部無償(っていうかいい感じのものは大体有償)

それぞれに長短所ありますが、アプリケーションセットアップという意味では圧倒的にJumpBox。ただRedmineなど多くのアプライアンスは起動数制限のある年間契約による有償プランなので、料金以上にセットアップに手間がかかるかどうか、同時にいくつ起動するかというあたりが検討ポイントです。
あくまで無償をえらぶなら、bagvappやVirtualAppliancesなどのアプライアンスをベースに自分でセットアップしたものを初期VMとしてストックしておくというのが現実的かもしれません。

GoogleからWebページのパフォーマンスを調査するFireBugプラグイン Page Speedが公開されました。これはちょうどYahooのFireBugプラグインのYSlowとほぼ同様の機能を提供しています。検査項目とその詳細な説明はこちらのページに記載されています。参考としてGoogleとYahooの各検索結果ページを簡単に比較してみました。

Google

Page Speed

YSlow

Googleの検索結果ページのパフォーマンス計測の比較。
Page Speedでは、１件だけ警告。CSSの定義で未使用項目が42%あるという結果がでた。これはブラウザによって使用していないものがあるということかな？それ以外はクリア。
YSlowでは１件だけCDNでBランク。たとえばAkamaiのようなコンテンツキャッシュサーバーのようなものを使うべしというもの。それ以外はA。

Yahoo

Page Speed

YSlow

Yahooの検索結果ページのパフォーマンス計測の比較。
Page Speedでは、DNSルックアップの拡散,プロキシキャッシュ,未使用CSS,適正なCSSセレクタの４つが警告。それ以外はクリア。
YSlowではCDN,GZIP,CSS expressionの３つでBランク。それ以外はA。

こうみると、YSlow、Page Speed では問題とする項目とその検査基準が微妙に違いますが、どちらが優れているというよりは、どちらも大規模サイトのサイト構築指針になっているので、２つのツールでページ全体の評価が大きく食い違うことはあまりなさそうです。

両方とも基準にしてもよいですが、どちらか片方だけを基準にしてもう片方を参考にする程度でもいいかもしれません。

Redmineはつかっていたのだけど、コミットフックをもっとスマートにしたくてMylynを使ってみることにしました。

ということでインストールと設定のメモです。

Eclipse 3.4 インストール(pleiades/J)
http://mergedoc.sourceforge.jp/index.html#/pleiades.html

Mylyn インストール(ソフトウェアアップデート)
http://download.eclipse.org/tools/mylyn/update/e3.4

WebTemplate インストール(ソフトウェアアップデート)
http://download.eclipse.org/tools/mylyn/update/incubator

Subversiveインストール(ソフトウェアアップデート)
http://download.eclipse.org/technology/subversive/0.7/update-site/

Subversive for Mylyn のインストール(ソフトウェアアップデート)
http://www.polarion.org/projects/subversive/download/eclipse/2.0/update-site/

• Subversive SVN Team Provider Plugin（Incubation）
• Subversive Integration for Mylyn Project（Optional）（Incubation）
• Subversive SVN Connectors

タスクリポジトリ追加

タスクリポジトリビューを表示してビュー上で右クリック＞タスクリポジトリの追加

タスクリポジトリータイプからWebTemplateを選択。次へ。

Webリポジトリ設定ダイアログで以下を入力

【基本情報】

サーバー: http://www.hoge.com/redmine/ (レッドマインインスタンスのベースURL)
ラベル:${project}
ユーザー：Redmineの自分のID
パスワード：Redmineの自分のパスワード

【追加設定】

パラメータ：project
値：RedmineのプロジェクトID

【拡張構成】

タスクURL:${serverUrl}/issues/show/
新規タスクURL: ${serverUrl}/projects/${project}/issues/new
クエリリクエストURL: ${serverUrl}/projects/${project}/issues [GET]
　　　　　　　　　　　自分に関連するチケットのみ表示したい場合は
　　　　　　　　　　　${serverUrl}/projects/${project}/issues?set_filter=1&assigned_to_id=me
クエリパターン: <td class="subject">.*?<a href="/redmine/issues/show/(\d+)">(.+?)</a></td>
ログインリクエストURL: ${serverUrl}/login?username=${userId}&password=${password} [POST]
Task Editor Settings: プレーンテキストかTextile

【HTTP認証】
必要に応じて

タスククエリーの追加

タスクリストで右クリック＞新規＞クエリー

追加したタスクリポジトリを選択＞次へ

クエリのタイトルをつける(プロジェクト名が分かりやすい)

すでにチケットがいくつか登録してあれば「拡張構成」のプレビューや開くで取り込めているか確認できる
>完了

タスクリストにチケットがタスクとして表示される

タスクの追加
タスクリストで右クリック＞新規＞タスク

追加したタスククエリーを選択＞次へ

「ブラウザを開きます。」という旨のダイアログが出るので「完了」

EclipseのWebブラウザにRedmineが表示されるので、そこでチケット登録
　(必要であればログインする)

タスクリストを更新すると追加されているのが分かる。

Redmineでコミットフックの設定
Redmine上で＞管理＞設定＞リポジトリの「コミットメッセージ内でチケットの参照/修正」で参照用と修正用のキーワードを設定。

ここでは参照用にはrefs、修正用にはfixを設定
修正時に変更されるステータスとして「実装終了 100%」とした。

コミットコメントのテンプレートをつくる
ウィンドウ＞設定＞タスク＞チーム　のコミットコメントのテンプレートを設定

ここでは以下のように設定した。
(refs #${task.id}) ${task.description}
${task.url}

タスクに取り掛かる
タスクリストでこれから取り掛かるタスクで右クリック＞アクティブにする

アイコンがついて、選択したタスクが現在活動中であることが示される

作業のコミット
コミットコメントに上で設定したテンプレートに変数が流し込まれた状態でデフォルト表示される

これに情報などを追記してコミット

コミットコメントのテンプレートの冒頭にrefsとあるのでチケットにリビジョンが紐付けされる

refsをfixに書き換えると、チケットとリビジョンの紐付けに加え、チケットのステータスが自動的に変更される

これにより、EclipseとブラウザのRedmineを行き来する必要がなくなり、Eclipseでの作業に集中できます。ただ、まだインキュベーション段階ということもあり、ブラウザを経由する作業などが必要な部分もありますが、RedmineのAPIを経由できるようになってくれば、よりEclipseで作業が完結できるようになるかと思います。

ApacheをローカルのWindowsで起動しようとして、エラーになったので調べてみた。

C:\Documents and Settings\memorycraft>netstat -ano

Active Connections

  Proto  Local Address          Foreign Address        State           PID
  TCP    0.0.0.0:80             0.0.0.0:0              LISTENING       2152

PID：2152ってだれ？

いた。Skypeだ。設定を見てみると。。。

80番ポートを使用するにチェックが入っていました。。
このチェックを外したら、無事動きました。
うーん、こわいこわい。

mayaaで、フォーム部品などをコントロールする際に html:checkbox などのStrtusタグを使用するのですが、

テンプレートがXHTMLで、

<input type="checkbox" m:id="check1" name="check1" checked="checked"/>

mayaaファイルが

<html:checkbox m:id="check1" property="check1"/>

のようになっていても、以下のように閉じタグ無しで出力されてしまいます。

<input type="checkbox" name="check1" value="on">

うーん、と思って、中の人に質問したところ一発で解決しました。
default.mayaaで、以下のようにするとよいそうです。

<html:html m:xpath="html" xhtml="true" />

もしくは、

<m:beforeRender><![CDATA[
   page.setAttribute(Packages.org.apache.struts.Globals.XHTML_KEY, "true");
]]></m:beforeRender>

そもそもStrutsタグのxhtml="true"を html:htmlに設定するものだと知らずに、
一生懸命、<html:checkbox xhtml="true" /> とかやっていたのでした。。。

sugaさんありがとうございました。

出力するHTMLのContent-TypeがShift_JISの場合、JavaやDBによっては～が化けたりすることがあります。Mayaaでそれを回避したときのメモを残します。

①テンプレートのContent-TypeをWindows-31Jに変更、実際のテキストエンコーディングもWindows-31Jにする。

<meta http-equiv="Content-Type" content="text/html; charset=Windows-31J" />

②WEB-INF/classes/META-INF/org.seasar.mayaa.provider.ServiceProviderに次の設定をする

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE provider
    PUBLIC "-//The Seasar Foundation//DTD Mayaa Provider 1.0//EN"
    "http://mayaa.seasar.org/dtd/mayaa-provider_1_0.dtd">
<provider>
    <engine>
        <parameter name="convertCharset" value="true"/>
    </engine>
</provider>

以上ですんなり、いけました。
convertCharsetがtrueだと、レスポンスヘッダとHTMLのContent-TypeがShift_JISのまま、
Windows-31Jでエンコーディングしてくれます。

以前の記事で、CoRDを使ったMacからWindowsへのリモートデスクトップ接続を書きましたが、しばらく使ってみるとMac＞Windowsへのキーバインドがいろいろ問題ありでした。Mac＋Windows用のキーボードを使っていたのですが一番ひどいのは"_"(アンダースコア)や"\"(円記号),"|"(パイプ)が打てませんでした。

リモートでプログラムをするときはかなり致命的でした。直後にMSからMac＞Winの製品の新しいバージョンが出ていて気になったので、遅ればせながら使ってみました。

【Remote Desktop Connection Client for Mac 2】
http://www.microsoft.com/japan/mactopia/products/remote-desktop/default.mspx

最初っからこれにしておけばよかった。。。

キーバインドはWindowsキーボードがそのまま使えるし、Macキーボードからはショートカットのカスタマイズも可能。サウンドもリモート環境だけで鳴らせたり、YouTubeも遅延やスキップはするけどある程度は見れる。

なによりローカルMacのドライブをリモートのWindowsにマウントできる！
個人的にはDropBoxやLiveDriveの必要があまりなくなってしまったかも知れない。
パフォーマンスも全体的にCoRDよりいいです。

またしばらく使ってみていろいろ試したいと思います。

昔のシステムのＤＢだと、年月日がカラムごとにNUMBERで入っていたり、年が和暦で入っていたりすることがあります。 そんなときにJava6の和暦カレンダー(JapaneseImperialCalendar)が便利です。

//元号コード、
int imperialCd = 4;
//和暦年
int year = 19;
//月
int month = 5;
//日
int day = 2;


//ロケールを和暦に設定
Locale.setDefault(new java.util.Locale("ja", "JP", "JP"));
 //カレンダーを作成
Calendar cal = Calendar.getInstance();
//元号コードを設定(明治:1,大正:2,昭和:3,平成:4)
cal.set(Calendar.ERA, imperialCd);
//年月日を設定
cal.set(year, month-1, day);
//西暦、和暦でそれぞれ表示
DateFormat format = new SimpleDateFormat("GGGGyy年 MM dd日");
DateFormat format2 = new SimpleDateFormat("yyyy/MM/dd", Locale.JAPAN);
System.out.println(format.format(cal.getTime()));
System.out.println(format2.format(cal.getTime()));

結果

平成19年 5月 2日
2007/05/02

ＤＢとかドキュメントまわりのちょっとした作業でcamelizeしたいとき、いちいちIDEとか使うの面倒なことがあって、秀丸マクロで探してたら作ってる人がいたので、メモ

【秀丸マクロ書いてみた。ラクダ文字<->アンダーバー区切り】
http://pokosho.com/b/archives/118

重宝しています。

普通に{hoge}/{moge}だと、
URL的に問題がでる場合がある。

以下、田中さん(仮)から教わった方法。

public String hoge;
public String moge;

@Execute(validator = false, urlPattern="{hoge}/{moge}")
public String testHogeMoge(){
	return hoge();
}

@Execute(validator = false, urlPattern="{hoge}")
public String testHoge(){
	return "hoge.html";
}

覚えておきたいので、メモ。

SAStrutsでURL情報を取るには以下のようにするといいっぽい。

@Resource
protected Map requestScope;

@Execute(validator = false)
public String test(){

	String requestUri = (String)requestScope.get("javax.servlet.forward.request_uri");
	String contextPath = (String)requestScope.get("javax.servlet.forward.context_path");
	String servletPath = (String)requestScope.get("javax.servlet.forward.servlet_path");
	String pathInfo = (String)requestScope.get("javax.servlet.forward.path_info");
	String queryString = (String)requestScope.get("javax.servlet.forward.query_string");

	System.out.println(requestUri);
	System.out.println(contextPath);
	System.out.println(servletPath);
	System.out.println(pathInfo);
	System.out.println(queryString);
		
	return "test.html";	
}

テスト：http://localhost:8080/example/test?hoge=moge#poge
結果は以下の通り

/example/test

/example/test
null
hoge=moge

前にDropBoxのことを書いたんですが、やっぱり2GBでは足りないなー。と思ってフル活用できていなかったんですが、ついにすげーサービスが出てきてしまったようです。

LiveDrive
http://www.livedrive.com/

・ブラウザでもローカルでもファイル管理できる
・ローカルでは、仮想的にドライブができて、サーバーのデータと同期
・仮想ドライブを使うと複数のPCでデータ同期できる
・iPhone対応(予定)
・容量無制限、無料
・↑ベータ版の間だけかも？

DropBoxの基本的な要件をみたしつつ、無制限無料というのが太っ腹すぎる。
よろこび勇んで、Firefoxをポータブル版に移行してみましたが、LiveDriveの仮想ドライブ上だと、アドオンがうまくインストールされてくれませんでした。。。
DropBoxディレクトリでは問題なくいけるので、仮想ドライブの作り方に問題があるのかもしれないですね。

おしい、でもせっかくの無制限なので、、、、

DropBoxにはポータブルアプリ(Firefox, Pidgin)
LiveDriveにはデータファイル(iTune Music, 写真,作業ファイルなど)

というように住み分けをさせてみました。

同期速度はDropBoxと同じくらいな気がします。いますぐにというよりはゆるゆる同期されるまで放置という感じです。
複数のPCを使用する場合、同期の優先順位とか細かいところがまだよくわかっていませんが、とりあえず動いているのでしばらく使ってみようと思います。

なにげにiTuneの曲が同期できるのが一番うれしい。

mayaaを使ってみて実感した一番こまるのはm:idやm:xpathに変数が使えないこと。

たとえば、

<div id="pref">
	<table>
		<tr>
			<td><input type="checkbox" />
				北海道</td>
			<td><input type="checkbox" />
				青森県</td>
			<td><input type="checkbox" />
				秋田県</td>
			<td><input type="checkbox" />
				岩手県</td>
			<td><input type="checkbox" />
				山形県</td>
		</tr>
		<tr>
			<td><input type="checkbox" />
				宮城県</td>
			<td><input type="checkbox" />
				福島県</td>
//(以下略)

とあり、DB項目から抽出した都道府県情報

List<Map> prefectureList

があったとすると、

forでまわして、プロセッサ一発でセットしたいというのが人情というもの。
感覚的にはもう、こうしたくて仕方ない。むりだけど。

<!-- 当然エラー -->
<m:for init="${ var i = 0 }"
       test="${ i &lt; prefectureList.size() }"
       after="${ i++ }" >

	<m:echo m:id="${cb + i}">
		<m:attribute name="name" value="prefId" />
		<m:attribute name="value" value="${prefecture.get('prefId')}" />
	</m:echo>

</m:for>

テンプレートにはできるだけ手を入れたくないのだけど、しかたなく、inputタグにid(cb0,cb1,cb2,,,)を付けて、m:echoでidを参照しようかと思って以下にしても

<m:with m:xpath="//div[@id='pref']/table/tr/td/input[@type='checkbox']">
	<m:forEach items="${prefectureList}" var="prefecture" index="i">
		<m:echo>
			<m:if test="${id == 'cb' + i}">
				<m:attribute name="name" value="prefId" />
				<m:attribute name="value" value="${prefecture.get('prefId')}" />
			</m:if>
		</m:echo>
	</m:forEach>
</m:with>

idを参照できるためにはecho内部にifを書く必要があるけど、
echoを先に書いたら、マッチしないのに出力されてしまう。。。
もどかしすぎる！！！

そんなとき、ふとひらめいた。
xpathで指定したので、同時に一括処理されるのかと思ったのだけど、中で変数をカウントアップしたら
ちゃんと対象タグの数だけ処理が走っていました。

つまり、、

<m:beforeRender><![CDATA[
	var cbcount = 0;
]]></m:beforeRender>

<m:with m:xpath="//div[@id='pref']/table/tr/td/input[@type='checkbox']">
	<m:echo>
		<m:attribute name="name" value="prefId" />
		<m:attribute name="value" value="${prefectureList.get(cbcount).get('prefId')}" />
	</m:echo>
	<m:exec script="${cbcount++}" />
</m:with>

タグカウント用の変数でList出力するようにしたらうまく行きました。ただし、タグの順番とListの順番が同じになってる必要がありますけど。テンプレートにもノータッチ。おっしゃ！

いっつも忘れるので、メモ。

リンク先が/hoge.htmlのaタグを囲むliタグの選択は
//li[a/@href="/hoge.html"]
リンク先が/hoge/から始まるaタグを囲むliタグの選択は
//li[starts-with(string(a/@href),'/hoge/')]
とやります。

aと@の間にスラッシュをいつも忘れてしまう。。。

mayaaでタグ処理の前にリクエストパラメータの下ごしらえをしておきたいときがあります。そのときに注意しておきたい点を１つメモ。

たとえば、http://example.com/sample?hoge=mogeというリクエストをmayaaで処理する場合、プロセッサでは、 ${hoge} でパラメータを参照できます。

//mayaaファイル
<m:write value="${hoge}"/>

//出力
moge

このhogeをbeforeRenderのスクリプトで処理する場合、${hoge}はJavaScriptのstringオブジェクトとしてあつかわれます。

//mayaaファイル
<m:beforeRender><![CDATA[
	function getA(){
		return hoge.length;
	}
]]>
</m:beforeRender>
<m:write value="${getA()}" />

//出力(lengthはプロパティだから文字数が帰る)
4

このhogeをJavaのStringオブジェクトとして扱いたい場合は、明示的に初期化してあげる必要がある

//mayaaファイル
<m:beforeRender><![CDATA[
	function getB(){
		var h = new java.lang.String(hoge);
		return h.length;
	}
]]>
</m:beforeRender>
<m:write value="${getB()}" />

//出力(lengthはメソッドだから関数が帰る)
function length() {/*
int length()
*/}

たとえば、hoge.startsWith('ho');とかは明示的に初期化しないと使用できず、パースエラーになります。

SEOとか絡んだりすると、GETでパラメータを渡したりすることがあって、そのときにqueryStringをそのまま使用したいときがあります。そんなときのメモ。

SAStrutsでは、RoutingFilterによって、リクエストパラメータがActionのプロパティにセットされたあと、HttpServletRequestからはqueryStringは見えなくなってしまうようです。

その場合、requestScopeというMapオブジェクトからqueryStringを参照することで解決できました。

Actionクラスのプロパティとして、requestScopeをインジェクションさせます。

//こうするだけで、勝手にセットされます。
public Map requestScope;

queryStringを取り出すには以下のようにします。

query = (String)requestScope.get("javax.servlet.forward.query_string");

たとえば、http://example.com/sample?bar=foo&hoge=moge
というURLでは、bar=foo&hoge=moge という文字列が取得できます。

以上です。

SAStruts+Mayaaの話題です。

sastruts.VIEW_PREFIXをWEB-INF/viewにした状態で、default.mayaaにコンポーネントの挿入コードを書いてWEB-INF/viewに置いても動作しない模様。

org.seasar.mayaa.provider.ServiceProviderのdefaultSpecificationに/WEB-INF/view/default.mayaaを指定してもだめ。。

コンテキストルートに配置すると動く。。

なぜだ。。

いままで、MacやXPでOpenVPNをつかっていたのですが、Vista入りのノートPCを使うことになって、イーモバ＋OpenVPNを入れたのですが、動きが不安定。
LAN内でVPNするにはOKなんだけど、外からつなぐと、VPNがつながった状態ではWebも見れないし、ネットワーク内のPCも見れない。

調べたところ、

Vistaのユーザーアクセス制御をOffにして、

route-method exe
route-delay 2

の2行をconfigの設定ファイルに記述したらあっさり動きました。

Javascriptのテンプレートエンジン、jTemplatesを使っています。 ちょっとはまったとこをメモ。

jTemplatesの#foreachの中で、もともとテンプレートに渡されたdataのループオブジェクト以外の参照をしたいときが、あります。
代表的なのはコンボボックスのデータのセットとかです。
普通の感覚でやろうとすると、いきなりツマづきます。

sample.js

var data = {
	optionCode : 2
	optionMap : {
		1 : "あああ",
		2 : "いいい",
		3 : "ううう"
	}
};
$("#form").setTemplateURL("select.tpl");
$("#form").processTemplate(data);

select.tpl

....
<select>
	<option{#if $T.optionCode}{#else} selected="selected"{#/if}>選択してね</option>
	{#foreach $T.optionMap as option}
	<option value="{$T.option$key}"{#if $T.option$key == $T.optionCode} selected="selected"{#else}{#/if}>{$T.option}</option>
	{#/for}	
</select>
...

選択値(optionCodえがある場合、selectedにするように処理したいのだけど、
$Tの参照はスコープによって変わってしまうようで、
foreachを出るまで、$TはoptionMapのイテレーターオブジェクトのようなものになってしまっています。
このため、foreach中の$T.optionCodeはundefinedとなり、選択値をセットできません。

なので、foreachに入る前に選択値を変数として保持しておく必要があります。
jTemplatesでは、テンプレート中の任意の場所で{#param}を定義することで、
変数を保持しておくことができます。
定義した変数は$Pで参照します。

<select>
	<option{#if $T.optionCode}{#else} selected="selected"{#/if}>選択してね</option>
	{#param name=optionCode value=$T.optionCode}
	{#foreach $T.optionMap as option}
	<option value="{$T.option$key}"{#if $T.option$key == $P.optionCode} selected="selected"{#else}{#/if}>{$T.option}</option>
	{#/for}	
</select>

こうすることで、foreach内でも、もともと渡されたdataを参照することができました。

っていうか他に方法ないのかな。。

指定されたURLの画像が存在するかのチェックをしたくて、見つけた記事

JavaScript から画像の存在有無を調べる
http://www.ecoop.net/memo/2005-06-29-3.html

ざんねんながら、なぜかIE7ではうまくいかない。
存在していなくてもwidth=28, height=30 になってる。。。

というわけでonerrorをつかってみました。
あ、サンプルではjqueryも使ってます。

HTML

<tr id="neko"><td>
<img src="images/null.jpg">
</td></tr>

Javascript

//エラーチェック用関数
function isImageExist(id, url, errorCallback){
	var img = new Image();
	img.onerror = function(){
		errorCallback(id);
	}
	img.src = url;
}

//なかったらTRごと非表示
isImageExist("neko", $("#neko").find("img").attr("src"), function(id){
	$("#" + id).hide();
});

これで、IEでもFirefoxでも動きました。

いま仕事でSAStruts + Mayaaを使っています。
いままでに気づいたことや疑問点をメモします。

• HTMLのテンプレートがid付け以外ほぼ無傷にできてすごくいい(Mayaa)
• コンポーネントとレイアウト共有がとてもいい（Mayaa）
• が、SEOなんか考えるとレイアウト共有って逆にめんどくさい気がする(Mayaa)
• ActionFormを使わず、Mapとかでどこまで代用できるのか？(SAStruts)
• ActionFormを使わず、プロパティをまんまActionに定義したときに、各メソッドのバリデーション設定とかバッティングしちゃう(SAStruts)
• テンプレートを触れさせないために、WEB-INF/viewに置くも、Mayaaのレイアウト共有でパスの自動設定をすると、webapp直下のCSS、JSなどへのパスがWEB-INF下を割り当て、リンク切れをおこす。(連携)
• プロセッサの記法がなれない。。(Mayaa)
• m:else がほしい。(Mayaa)
• m:if をid指定してブロックで記述したときに子のプロセッサにid指定できないのが不便。(Mayaa)
• m:if ですら 指定したid のタグを置き換えてしまうのはおかしくないか？(Mayaa)
• m:with をつかうのが一番直感的な気がする。(Mayaa)

まだまだわからないことだらけ。。。

SAStruts どころかほぼ初Seasarなので、もともとよくわかってないですが、Actionの単位で結構迷う。どうやらSAStrutsは基本1ユースケース1アクションという設計だそうで、たしかに画面単位ではしっくり行かない。

1画面ごとだと、たとえばEmployeeListAction を定義した場合、employee_list/ で index() メソッドだけ、view も employee_list/index.jsp だけというクラスがたくさんできてしまうので、EmployeeActionにして employee/list などにして、メソッドと画面を1対1にしたほうがしっくりくる。

では、修正するときの確認や完了なんてのはどうすればいいのだろう？
employeeEdit/input, employeeEdit/confirm などとした方がいいのかな。
そもそも最近のアプリでは確認、ましてや完了なんてのは画面単位ではなくなっているから、むしろ画面遷移とJSONの切り分けの問題の方が重要だったりするのかな？

いまのところ、URLや論理単位のスマートさを考えると、管理系などのは特に、1CRUD1アクションがすっきりしている気がする。

前回の記事は検証メソッドをつかったものでしたが、今回はアノテーションを使ったバリデータによる検証でのやり方をやってみました。

@Execute(validator = false)
public String jsonError() throws IOException{

	HttpServletRequest request = RequestUtil.getRequest();
        HttpSession session = request.getSession();

        Object msgRequest = request.getAttribute(Globals.ERROR_KEY);
        Object msgSession = session.getAttribute(Globals.ERROR_KEY);
        
        ResourceBundle resource = ResourceBundle.getBundle("application");
        
        Map<String, String> result = new HashMap<String, String>();
        if(msgRequest != null){
        	for (Iterator iter = ((ActionMessages)msgRequest).get(); iter.hasNext(); ) {
        		ActionMessage msg = (ActionMessage) iter.next();
        		String text = (String)resource.getString(msg.getKey());
        		result.put("msg", MessageFormat.format(text, msg.getValues()));
        	}
        }
        else{
        	for (Iterator iter = ((ActionMessages)msgSession).get(); iter.hasNext(); ) {
        		ActionMessage msg = (ActionMessage) iter.next();
        		String text = (String)resource.getString(msg.getKey());
        		result.put("msg", MessageFormat.format(text, msg.getValues()));
        	}
        }
		
	this.response.setContentType("text/javascript");
	this.response.setCharacterEncoding("UTF-8");
	this.response.getWriter().write(JSON.encode(result));
		
	return null;
}

これだと、プロパティファイルのプレースホルダの置換も大丈夫っぽいです。

JSONのリクエストのパラメータをSAStrutsのバリデータで検証してNGだったらエラーメッセージ用のJSONオブジェクトを返す必要があったので、やってみました。

まず、検証メソッド

/**
 * JSON検証メソッドのサンプル
 * 検証せずにいきなりエラーを返す
 * メッセージのキーがJSONオブジェクトのキーになる
 * @return エラーメッセージ
 */
public ActionMessages validateFind() {
    ActionMessages errors = new ActionMessages();
    errors.add("test", new ActionMessage("msg", "こら！"));
    return errors;
}

普通の設定だとJSONが受け取れないので、JSON用のエラーアクションを用意します。これはActionクラスの親クラスに実装するか、JSONエラー用のActionクラスに実装して共通でつかうといいかも。

/**
 * JSON検証エラーハンドリング用のアクションメソッド
 * request, sessionの各スコープにエラーメッセージが存在していたら
 * それをJSONオブジェクトにセットして送信
 * @return JSONで返すのでnull
 * @throws IOException
 */
@Execute(validator = false)
public String jsonError() throws IOException{

	HttpServletRequest request = RequestUtil.getRequest();
       	HttpSession session = request.getSession();

       	Object msgRequest = request.getAttribute(Globals.ERROR_KEY);
       	Object msgSession = session.getAttribute(Globals.ERROR_KEY);

        Map<String, String> result = new HashMap<String, String>();
        if(msgRequest != null){
        	for (Iterator iter = ((ActionMessages)msgRequest).get(); iter.hasNext(); ) {
        		ActionMessage msg = (ActionMessage) iter.next();
        		result.put(msg.getKey(), (String)msg.getValues()[0]);
        	}
        }
        else{
        	for (Iterator iter = ((ActionMessages)msgSession).get(); iter.hasNext(); ) {
        		ActionMessage msg = (ActionMessage) iter.next();
        		result.put(msg.getKey(), (String)msg.getValues()[0]);
        	}
        }
		
	this.response.setContentType("text/javascript");
	this.response.setCharacterEncoding("UTF-8");
	this.response.getWriter().write(JSON.encode(result));
		
	return null;
}

で、実際にブラウザから呼び出されるアクション
@Executeで、検証メソッドとエラー時のForward先が定義されています。

/**
 * JSON検証サンプル用アクションメソッド
 * validateFindメソッドで検証した結果、NGならjsonErrorアクションにForwardして、エラー用JSONを返す。
 * @return
 * @throws IOException
 */
@Execute(validator = false, validate="validateFind", input="jsonError")
public String find() throws IOException {

	//... なんか処理とか

	this.response.setContentType("text/javascript");
	this.response.setCharacterEncoding("UTF-8");
	result.put("msg", "検証成功");
	this.response.getWriter().write(JSON.encode(result));
	return null;
}

これで、ブラウザのJSからfindに対してポストすると、結果のJSONオブジェクトのmsgには"検証成功"ではなく"こら！"が帰ってきます。

とりあえず、うまくいったんですが、これって一般的なやり方なんですかね？
みんなどうやってるんでしょうか？

FlexでVideoDisplayのキューポイントをActionScriptからセットしたときの話

myVideo.cuePointManager.removeCuePoint(cuePoint);

してもキューポイントが生きている。
なぜかと思って調べてみたら、
まちがって同じname, timeのcuePointを2回セットしてしまっていたのだけど、nameとtimeが同じだと上書きされると勝手に思っていたら、複数登録されていた。。

まぁ、オブジェクト配列なので当たり前といえば当たり前か。

なので、removeCuePointする場合には、
removeCuePointが削除されたキューポイントオブジェクトを返すことを利用して、

var removedPoint:Object = {};
while(removedPoint != null){
    removedPoint = myVideo.cuePointManager.removeCuePoint(cuePoint);
 }

とすると、確実だと思います。

jQuery 3 State Switch Plugin (J3SSW) のユーザーフィードバックをTumblrにポストするように変更しました。

やはりというかなんというか、、、一言感想的なもの程度にしか考えていなかったのでTwitterの140文字でなんとかなるだろと思ってたのですが、意外にも技術的な質問や指摘なんかをいただいて、途中できれちゃってるものがありました。申し訳ない。。。

というわけで、初めてTumblrをさわってみたのですが、機能も気軽さもブログとTwitterの中間といった感じ。twitterで物足りない人に、というよりも、リブログなどブログコンテンツの作成をtwitterの気軽さで行えるといった感じでしょうか。
J3SSWの用アカウント以外に、自分のアカウント(http://memorycraft.tumblr.com/)も用意したので暇があれば、ちょっといじってみたいと思いますので、使っている人いたら気軽にフォローしてください。
いや、フォローさせてください。。
こういうときなんて言うの？

S2UnitやS2jUnit4などでSeasarのユニットテストを行う際、エクセルファイルなどを使ってテスト開始前にDBに初期データを入れる機能をよく使います。そのとき、場合によってはユニットテスト(UT)用DBと結合テスト(CT)用のDBを分ける必要がでてきます。それを対処したときのメモです。

seasar2の環境変数設定ファイルである、env.txt, env_ut.txtによって、実行中の環境によって環境変数#Envがut, ct などに切り替わります。これを利用してs2container.diconではdeployモードを切り替えています。

これと同じようにデータソースをut環境で切り替える場合には以下のようにします。

jdbc.dicon

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE components PUBLIC "-//SEASAR//DTD S2Container 2.4//EN" 
	"http://www.seasar.org/dtd/components24.dtd">
<components>
	<include condition="#ENV == 'ut'" path="jdbc_ut.dicon"/>
	<include condition="#ENV == 'ct'" path="jdbc_ct.dicon"/>
	<include condition="#ENV != 'ut' and #ENV != 'ct'" path="jdbc_ct.dicon"/>
</components>

jdbc_ct.dicon と jdbc_ut.diconには それぞれCT、UT用のjdbc.diconの内容を定義すればいいわけです。

追記：
いい情報を教えていただきました。ファイル名だけで勝手に切り替わるそうです。

ひが 2008年11月26日 13:07

jdbc.diconで切り替えなくても、
jdbc_環境名.diconという名前で用意しておけば、
環境名に一致するものがあれば自動的に読み込まれます。

一般的には、本番用にjdbc.dicon、
ut用にjdbc_ut.dicon、
ct用にjdbc_ct.dicon
と定義しておけば、と
書くだけで大丈夫です。

忘れてた。前回の記事はこれをやりたいための準備だった。前回の容量で、普通のJavaプロジェクトをDynamic Web Moduleに変更すると、プロジェクトのProperties > Java Build Path > Libraries タブの右側にある Add Library...ボタンを押したときに、Web App Libraries というの選択できるようになる。

Add Library...ボタンを押すと

Web App Librariesが選べる

Web App Librariesを選択すると参照するプロジェクトを選択する画面になるので、ここで現在設定しているプロジェクトを選択して完了する。

すると、ライブラリー一覧にWeb App Librariesというノードができ、展開すると中にWEB-INF/lib 以下のJarが全て入っているのが確認できる

こうしておくとJarを追加したときにいちいちクラスパスを追加する必要がなくって楽だと思います。

しばらくFlexBuilderしてしか使ってなかったEclipseで、超ひさしぶりにJavaプロジェクトに触れました。久しぶりすぎてかなり忘れてるのですが、再発見したことをメモ。

プロジェクトを作って、いろいろ設定してしまってからあとでプロジェクトのタイプを変えたいときには、プロジェクトの Properties...> Project Facets でプロジェクトにいろいろな属性を与えらます。

一覧に、現在適用されている属性(ファセット)が表示され、右下の Modify Project...で、ファセットの追加や変更ができます。たとえば通常のJavaプロジェクトに動的Webプロジェクトの属性を与えるには、Modify Project..で表示されるファセットの編集ダイアログでDynamic Web Module にチェックを入れます。

設定したファセットはConfigurations:で雛形として保存して流用できます。
あまり使わないけど、便利。

前回の記事の最後でpost-commitのことに触れた

script/runner "Repository.fetch_changesets" -e production

ですが、実際やってみたら全然だめでした。post-commitでもcronでも無反応で、スクリプト自体はキックされているのですが、実行権限やユーザーなど、いろいろ試しても、動かず。

仕方なく次善策(次々善策？)として、チケット一覧の表示時に唐突にフェッチかけることにしました。

app/controllers/issues_controller.rb

  def index

    @repository = @project.repository
    @repository.fetch_changesets if Setting.autofetch_changesets?

    .....

とりあえず、これで回避。
うーーん。。。釈然としない。

会社の古いサーバー(Fedora4)でRedmineをSubversionとからめて運用しようとしたときに、はまった点をメモ。

リポジトリビューワーがいまいちうまく機能しない。リポジトリ自体は表示されるのだけど、リビジョンを参照できないし、コミットログにチケット番号を埋めてもチケットに関連するリビジョンが表示されない。どうやらリビジョンが拾えていない様子。

それだとコミットフックで自動クローズとかができずSVNをからめるうまみがない。

原因を探ってみた。(URL等はふせてあります。)

ログを見る(Passengerを使っているので、Apacheのログです。)

$ tail -300f ./apache/logs/error.log

svn: PROPFIND (URL: '/svn/example'): サーバに接続できませんでした (http://www.example.com)
サブコマンド 'info' にはオプション '--xml' をつけられません。
使用方法を知りたいときは 'svn help info' と打ってください。
サブコマンド 'info' にはオプション '--xml' をつけられません。
使用方法を知りたいときは 'svn help info' と打ってください。

ん、、もしかして。。。

Subversionのバージョンを調べてみる

$ svn --version
svn, バージョン 1.2.3 (r15833)
   コンパイル日時: Aug 26 2005, 03:42:45

しらべてみたら、svn info の --xml オプションが使えるのは Subversion 1.3以降からだ。。。

Subversionのアップデート

# yum update subversion
Setting up Update Process
Setting up repositories
updates-released          100% |=========================|  951 B    00:00     
extras                    100% |=========================| 1.1 kB    00:00     
base                      100% |=========================| 1.1 kB    00:00     
Reading repository metadata in from local files
Could not find update match for subversion
No Packages marked for Update/Obsoletion

、、、Fedora4でサポートされているSubversionのパッケージは1.1.4までだ。。
SVNサーバーは運用中なので、ソースからコンパイルするのは厳しい。

ぽくぽくぽく、、

ちーん

redmineのSVNアダプターを書き換えちゃえ。
ということで、
svn info --xml オプションの出力をXMLパースしている部分を
svn infoにして、出力を自力パースするように変更

lib/redmine/scm/adapters/subversion_adapter.rb で実装されている
SubversionAdapterクラスのinfoメソッド内

          shellout(cmd) do |io|
            begin
              doc = REXML::Document.new(io)
              #root_url = doc.elements["info/entry/repository/root"].text          
              info = Info.new({:root_url => doc.elements["info/entry/repository/root"].text,
                               :lastrev => Revision.new({
                                 :identifier => doc.elements["info/entry/commit"].attributes['revision'],
                                 :time => Time.parse(doc.elements["info/entry/commit/date"].text).localtime,
                                 :author => (doc.elements["info/entry/commit/author"] ? doc.elements["info/entry/commit/author"].text : "")
                               })
                             })
            rescue
            end
          end

となっている部分を

          elements = []
          shellout(cmd) do |io|
            begin
              io.each_line do |line|
                next unless line =~ %r{^\s*(\S+)\s*(:)\s(.*)$}
                elements << $3.strip
              end
              info = Info.new({:root_url => elements[2],
                               :lastrev => Revision.new({
                                 :identifier => elements[3].to_i,
                                 :time => Time.parse(elements[7]).localtime,
                                 :author => (elements[6] ? elements[6] : "")
                               })
                             })

            rescue
            end
          end

1行ごとに読みこんで、文字列分解してオブジェクトに突っ込む感じにします。

これでApacheを再起動。

おお！チケットに関連するリビジョンが表示されています。
リポジトリビューワーにも関連するコミットログが記載されました。
めでたしめでたし。

チケットの関連リビジョンは、一度リポジトリビューワーを表示しないと更新されないようなので、以下サイトを参照。
「リポジトリ」を開くまでSubversion等のリポジトリへのコミットが「活動」に表示されません
redMine で trac の trac-post-commit-hook のような事をやる

仕事でつかうためにプロジェクト管理ツールを比較してみました。

ユーザーが複数プロジェクトを横断できるのと、数は少ないながらも結構つぶぞろいのプラグインがあることで、いまのところRedmineが気になります。
こうしてみると、やはりTracには愛憎入り混じった感情がありますなあ。

最近Netvibesを使い始めました。
まえに一度iGoogleをつかっていたのですが、カスタマイズ性が低いのと、ウィジェットが玉石混交なので、すぐに飽きてしまったのですが、これはいいかもです。

Netvibes
http://www.netvibes.com/

気に入ったを挙げると

• デフォルトでヘッダを小さくしたり、Google検索バーを追加したりできる
• ポータル画面のままウィジェットを検索、閲覧、設定、追加できる
• それぞれのタブでレイアウトのカラム数を指定できる
• MySpaceやTwitter,またはネット上の任意のURLから壁紙を設定できる
• Yahoo! Pipes や Dapperというスクレイピングサービスからウィジェットを作成、追加できる

Dapperというのは、Yahoo! Pipesと同様に、WEB上のコンテンツを加工して任意の形式で出力できるWEBサービスです。Pipesがフィルターオブジェクトを結合して加工していくのに対して、Dapperはコンテンツビューワで選択したエリアを追加/削除することで加工していくので、より直感的です。簡単な加工であればDapperの方が楽かもしれません。

Dapper
http://www.dapper.net/

ただし、複雑なスクレイピングは無理っぽいので、簡単なやつはDapperで、複雑なやつはPipesでウィジェット作成という使い分けするといいですね。

(一度Netvibesがまったく動かなくなったのですが、FirefoxのTabMixPlusが悪さしてたみたいです。はずしたら動きました。注意)

追記：
iGoogleでも新しいインターフェースが採用されたようですね。
アドレスバーにて
javascript:_dlsetp('v2=1');
を実行すると、新iGoogleが使えるようです。

Firefox3.1 beta1 がリリースされたので、これを機会に自分の環境で各ブラウザのベンチマークサイトのスコアを計測してみました。

OSは　WindowsXP SP3 Core2Duo 3.00GHz 3.25GB RAM

対象ブラウザは

• Firefox3.0.3
• Firefox3.1beta1
• Chrome 0.2.149.30
• WebKit r37605

もちろん Firefox 3.1 beta1は
javascript.options.jit.chrome
javascript.options.jit.content
をtrueにしてTraceMonkeyを有効にした状態。

測定したベンチマークは以下の２つ

SunSpider JavaScript Benchmark
http://www2.webkit.org/perf/sunspider-0.9/sunspider.html
結果(y軸)は、実行にかかったミリ秒なので、数値が小さい方が優秀

V8 Benchmark Suite - version 1
http://code.google.com/apis/v8/run.html
結果(y軸)は、スコアなので、大きいほうが優秀

Firefox 3.1 beta1はかなり早くなったと言えると思いますが、劇的ではないし、体感はあまり変化を感じないですが、やはりChrome と Webkitは爆速。
実際の体感速度は、通信速度やネイティブの動作も影響するのでこれで全てというわけではないですが、Chromeは全体の体感速度として一番早い気がします。
一方、最新ビルドの純ナマWebkitは、Chromeよりもレンダリング自体のスピードは少しもさっとしている気がします。ベンチ結果を見る限り、V8 vs SquirrelFish Extreme はほぼ互角っぽいので、ChromeはJSエンジンだけではなく、総合的に早いんですね。

まぁどちらにしても、Firefoxのアドオンの恩恵から離れられないので、しばらくはFirefox 3.0系だと思います。ChromeだとかJSエンジンだとか言ってても結局みんなもそうだよね？？

FlexやAS3などで、DisplayObjectなどのコンポーネントをマウスで移動,リサイズするときに隣のコンポーネントに吸着(スナップ)したい場合があります。
とりあえず思いついた方法をメモ。

簡単な仕様

• 各コンポーネントのエッジの間隔が一定の距離以上はなれていると吸着しない
• 各コンポーネントのエッジの間隔が一定の距離以下になったら吸着

移動またはリサイズ中のコンポーネントをsrc
吸着対象のコンポーネントをtarget
吸着する一定の距離をrange
重なっている矩形領域をintersection
とすると、ｙ軸方向に考えると以下の4通りの場合があります

重なっていない状態で、吸着しない場合

srcとtargetがrange*2 以上はなれている
↓
srcの境界線をrangeだけ拡張した矩形がtargetと重ならない

重なっていない状態で、吸着する場合

srcとtargetがrange*2以内にある
↓
srcの境界線をrangeだけ拡張した矩形がtargetと重なる
srcの境界線をrangeだけ縮小した矩形がtargetと重ならない

重なっている状態で、吸着する場合

srcとtargetがrange*2以内にある
↓
srcの境界線をrangeだけ拡張した矩形がtargetと重なる
srcの境界線をrangeだけ縮小した矩形がtargetと重ならない

重なっている状態で、吸着しない場合

srcとtargetがrange*2以内にある
↓
srcの境界線をrangeだけ拡張した矩形がtargetと重なる
srcの境界線をrangeだけ縮小した矩形がtargetと重なる

この前提を元にすれば、わりとすっきりとした実装ができるのではないでしょうか。
実装のサンプルを全て載せると量が多いので、リサイズ時のY軸方向の処理に限定した場合の、吸着補正の矩形領域の取得メソッドをサンプルとして載せておきます。

/**
 * 矩形領域のサイズを拡張/縮小するメソッド
 * @param src リサイズ中のコンポーネント
 * @param range 拡張/縮小する距離
 */
private function getFixedRectangle(src:DisplayObject, range:Number):Rectangle{
	var pt:Point = src.parent.localToGlobal(new Point(src.x, src.y));
	return new Rectangle(pt.x - range,
				pt.y - range,
				src.width + range * 2,
				src.height + range * 2);
}

/**
 * リサイズ時に吸着補正した矩形領域を返すメソッド
 * @param src リサイズ中のコンポーネント
 * @param target スナップ対象のコンポーネント
 */
private function getSnapedRectangle(src:DisplayObject, target:DisplayObject):Rectangle{
	
	var srcRect:Rectangle = getFixedRectangle(src, 0);
	var targetRect:Rectangle = getFixedRectangle(target, 0);
	var targetShrinkRect:Rectangle = getFixedRectangle(target, -RANGE);
	var targetExpandRect:Rectangle = getFixedRectangle(target, RANGE);
	var intersectionRect:Rectangle = srcRect.intersection(targetRect);
	var rsltRect:Rectangle = srcRect;

	/**
	 * srcの境界線をrangeだけ拡張した矩形がtargetと重なり、
	 * srcの境界線をrangeだけ縮小した矩形がtargetと重ならない
	 */
	if(srcRect.intersects(targetExpandRect) &&
		!srcRect.intersects(targetShrinkRect)){
		
		if(intersection.height < RANGE * 2){
			/**
			 * スナップ領域にあるのがエッジの下端だった場合
			 * →　サイズだけ変更
			 */
			if(intersection.y < targetRect.y){
				rsltRect.height = targetRect.y - srcRect.y;
			}
			/**
			 * スナップ領域にあるのがエッジの上端だった場合
			 * →　サイズと位置を変更
			 */
			if(intersection.y == srcRect.y){
				rsltRect.y = targetRect.y + targetRect.height;
				rsltRect.height = (srcRect.y + srcRect.height) - 
							(targetRect.y + targetRect.height);
				
			}
		}

	}

	return rsltRect;

}

Rectangle::intersection や Rectangle::intersects を使用するところがポイントです。

思いついたまま実装したのですが、もっと簡単な方法があったりして。。。

ページ遷移の少ない、コンポーネント単位のUI設計ではステートダイアグラムというのがいいらしい。

NETTUTS : How Using State Diagrams Can Make You a Better Web Coder
http://nettuts.com/articles/how-using-state-diagrams-can-make-you-a-better-web-coder/

ここで説明されているステートダイアグラムとは、ユーザーのアクションであるインプットを「矢印」、アプリケーションのアクションであるアウトプットを「丸」として、丸を矢印でつないで、入力と状態遷移の関係を図にしたもののようです。

記述に色や注釈を加えることで、シンプルな図のなかに状態遷移に関する多くの情報を詰め込むことができ、仕様が整理されることでバグの少ないコーディングにつなげやすいとのことです。

ドキュメントとして残しにくい、ダイナミックな状態遷移の記述として参考になります。

Flashでレーダーチャートをつくる機会があったので、メモします。
AS2 なので、AS3にする場合は、適宜書き換えてください。

コードは概ね以下のようになっています。
上のサンプルのように動的に数値を変更する場合は、コントロールのリスナー等と組み合わせて描画毎にレーダーのムービークリップを削除するなどしてください。

//色
var RAEDER_COLOR:Number = 0x01B0F0;
//透過度
var RAEDER_PERCENT_OPACITY:Number = 40;
//最大値
var RAEDER_MAX_VALUE:Number = 10;
//データ
var RAEDER_COUNT:Number = 8;
//NumericStepperのリスナー
var stepListener:Object;


/**
 * 初期化して生成
 */
function init():Void{
	stepListener = new Object();
	stepListener.change = recreate;
	for(var i=1;i<=RAEDER_COUNT;i++){
		this["step" + i].addEventListener("change", stepListener);
	}
	createRaeder(getValues(), indicator);
}

/**
 * 再生成
 */
function recreate():Void{
	removeMovieClip(indicator.raeder);
	createRaeder(getValues(), indicator);
}

/**
 * データの取得
 * @return データ配列(レーダーの時計回り順)
 */
function getValues():Array{
	var values:Array = new Array();
	for(var i=1;i<=RAEDER_COUNT;i++){
		values.push(this["step" + i].value);
	}
	return values;
}

/**
 * レーダーの生成
 * @param vallues データ配列
 * @param target レーダーを生成ムービークリップ
 */
function createRaeder(values:Array, target:MovieClip):Void{
	
	var values:Array = getValues();
	var angle:Number = 360 / RAEDER_COUNT;
	var degrees:Array = new Array(RAEDER_COUNT);
	var points:Array = new Array(RAEDER_COUNT);
	var raeder:MovieClip = target.createEmptyMovieClip("raeder", target.getNextHighestDepth());
	var offset:Number = target._width/2;
	var scale:Number = (target._width/2) / RAEDER_MAX_VALUE;
	
	for(var i=0; i<RAEDER_COUNT; i++){
		degrees[i] = 270 + angle * i;
		points[i] = {x:Math.cos(degrees[i] * Math.PI / 180) * values[i] * scale + offset,
					 y:Math.sin(degrees[i] * Math.PI / 180) * values[i] * scale + offset};
	}
	raeder.beginFill(RAEDER_COLOR, RAEDER_PERCENT_OPACITY);
	raeder.moveTo (points[0].x, points[0].y);
	for(var j=1;j<RAEDER_COUNT;j++){
		raeder.lineTo (points[j].x, points[j].y);
	}
	raeder.endFill();
}

//初期化
init();

マピオンラボがFlash Maps APIを公開したそうです。
マピオンのFlash地図をFlexコンポーネントとして使用でき、AIRにも対応しているそうです。日本の地図をFlexコンポーネントとしては最初らしいです。コーディング(というかマークアップ)はしやすいです。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   xmlns:mapion="http://www.mapion.co.jp/mmap/flex"
   width="500" height="350"
   layout="absolute" backgroundColor="#FFFFFF">

	<mx:Script>
		<![CDATA[
			import jp.co.mapion.mmap.control.MControlPosition;
			import jp.co.mapion.mmap.event.MMapEvent;

			[Bindable]
			private var dataArray:Array = [
				{
				latitude:35.63105917980109,
				longitude:139.64407593011856,
				message:"今日の飲み会の場所"
				},
				{
				latitude:35.63175461574784,
				longitude:139.64411079883575,
				message:"マックフルーリーのキャラマキ"
				}
			];
			private function mClick(e:MMapEvent):void
			{
				e.clickedOverlay.openInfoWindowHTML(e.clickedOverlay.extra.message);
			}
		]]>
	</mx:Script>

	<mapion:FlexMapionMap
		id="map"
		width="100%" height="100%" mode="labs"
		key="d3d3Lm1lbW9yeWNyYWZ0LmpwL2ZsYXNobWFwYXBpX3Bvd2VyZWRieW1hcGlvbgee"
		latitude="35.63199917000009" longitude="139.64407593011856"
		zoomLevel="7"
		wheelZoomChangeEnable="true"
		dataProvider="{dataArray}"
		markerClickFunction="{mClick}">
		<mapion:controls>
			<mapion:MSliderControl
				offsetX="10" offsetY="10"
				anchor="{MControlPosition.M_ANCHOR_TOP_LEFT}" />
			<mapion:MScaleControl
				offsetX="10" offsetY="10"
				anchor="{MControlPosition.M_ANCHOR_TOP_RIGHT}" />
		</mapion:controls>
	</mapion:FlexMapionMap>
</mx:Application>

しかし、いかんせんマピオン。地図がしょぼい。。
Google Maps API for FlashがFlexコンポーネント対応してくれればベストなんですかね？

ただ、マピオンがサンプルとして提供しているAIRアプリの油マピオンはちょっと気になります。名前が。あぶらまぴおん。

ほとんどのブラウザが持っている重大なセキュリティ欠陥だそうです。
簡単に言うと、リンクにマウスオーバーしたときにブラウザのステータスバーに表示されるURLとは違うURLに遷移できてしまうというものだそうです。

つーことで、実際に試してみました。
うそリンクその１
ctoa日記へリンク(と見せかけてsuz-labへジャンプ)

このコードは以下のようになっています。

<em>
  <a id="test1" 
           href="http://blog.livedoor.jp/hiroki0907/" 
           onMouseDown="document.getElementById('test1').removeAttribute('href')"
           onMouseUp="location.href='http://suz-lab.blogspot.com/';">
    ctoa日記(と見せかけてsuz-labへジャンプ)
  </a>
</em>

さらに、こういうことも。
うそリンクその２
suz-labへリンク(と見せかけてナシメモをオーバーレイ)  消す

<em>
  <a id="test2" 
       href="http://suz-lab.blogspot.com/"
       onMouseDown="document.getElementById('test2').removeAttribute('href')"
       onMouseUp="document.getElementById('cjoverlay').style.display='block'">
    suz-labへリンク(と見せかけてナシメモをオーバーレイ)
  </a>
</em>&nbsp;&nbsp;
<strong>
  <a class="delete" 
       href="#" 
       onMouseDown="document.getElementById('test2').setAttribute('href', 'http://suz-lab.blogspot.com/')" 
       onMouseUp="document.getElementById('cjoverlay').style.display='none'">
    消す
  </a>
</strong>

さらにこちらのサイトでは、上の「うそリンクその２」のしくみを使って、ソーシャルサイトなどで不正アクセスをされてしまう危険性を示唆しています。簡単に言うと「うそリンクその２」でオーバーレイしているIFRAMEは透明でも、フレーム内のリンクはクリックできます。つまりダミーボタンの真上に別のサイトを完全透明オーバーレイ表示して、ユーザーの意図しないボタンを押させることができてしまうのです。

普段多少リンク先を気にすることがあっても、ステータスバーでしか確認していなかったので、地味ですがけっこうイヤですね。これ。現状、FirefoxのNoScriptプラグインを使うか、IFRAMEを無効にするなど、ユーザー側の対処が必要だそうです。

より詳しくは以下のサイトが参考になります。

• [ZDNet]Clickjacking: Researchers raise alert for scary new cross-browser exploit
• セキュリティ専門家が "Clickjacking" を警告
• Not Clickjacking (Almost Certainly)

TracやSubversionで情報やソースを共有したいけども、わざわざサーバーにインストールするほどではないという程度のプロジェクトでは、プロジェクト管理のホスティングサービスがあればいいと思ったら、あった。

Devjavu
https://www.devjavu.com/

無料のプランでは、ストレージ１GB、コミッタは3人まで。
有償だと、ストレージ拡大、Secure SVN 、コミッタ数増員などがある。

プロジェクトサイトでログインしている状態ではAdminツールも普通に使えます。

基本的にはユーザーは招待制で、ユーザーの認証には2種類あります。
ひとつは各プロジェクト内のメンバーの認証で、これはTracユーザーにあたり、通常プロジェクトのオーナーから招待を受けます。

もうひとつはプロジェクトのオーナーとしての、Devjavu自体のユーザー認証です。
Tracでプロジェクトオーナーからプロジェクトメンバー招待されただけでは、自分のプロジェクトは作成できません。

Devjavuのサービスがフルオープンになる前に、自分のプロジェクトを作成したい場合は、DevjavuのMLで、 Jeff Lindsay さんに招待コードをリクエストしてみてください。(有償なら招待がなくても作成可能です)

Adminで、anonymousユーザーの閲覧禁止もできるので、クローズドなプロジェクトでも利用可能です。

AJAXやFlexのようにブラウザのフロントエンドアプリでは、画面を小さなコンポーネント部品に分けて、制御するエリアを小さくすることで、パフォーマンスやユーザビリティをアップすることが大きなメリットとなっていますが、同じ画面で複数の部品が別々の処理を行う機会が増えるので、スレッドの概念が必要になってくる場面があります。
いくつかフロントエンド技術のスレッド処理に関する記事があったのでメモします。

ActionScript
AdobeのデベロッパーセンターでSparkの人が擬似スレッディングの記事を書いています。データ読み込みのサイクルアニメーションのもたつきが許せなかったので、機会があれば使ってみたいです。

JavaScript
Concurrent.ThreadというJSの擬似スレッドライブラリの記事です。

<script type="text/x-script.multithreaded-js"></script>

というタグの中での処理をスレッド化できるのが便利そうです。

さいきんWebクライアントのプログラミングをしていると、昔のJavaアプレットの時代を思い出すことが多い気がします。

jQueryUIのSliderをフォームのSelect要素のデータを元に生成することで、スライダーの値をコントロールしやすくする方法と、そのコンポーネントセットを提供しているサイトがあったのでメモ。

Using Progressive Enhancement to Convert a Select Box Into an Accessible jQuery UI Slider

selectを隠して、代わりに拡張されたjQueryUIのスライダーを生成、表示し、値のやりとりには元のselectをgetter/setterのインターフェースとすることで、使いやすくしているようです。
ちなみにこれを作っている会社はjQuery UI のThemeRollerを作った会社だそうです。

手っ取り早い使い方
jQueryとjQueryUIを入れて

<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.6rc1.packed.js" type="text/javascript"></script>

ここでダウンロードしたSlider拡張のJSとCSSを入れ

<script src="accessibleUISlider.jQuery.js" type="text/javascript"></script>
<link type="text/css" href="jquery-ui-slider-additions.css" media="screen" rel="Stylesheet" />

さらにThemeRollerのテーマファイルを入れる

<link type="text/css" href="jquery-ui-themeroller.css" media="screen" rel="Stylesheet" />

select要素を定義して

<select class="ui-accessible-hidden" name="filterPriceFrom" id="filterPriceFrom">
	<option value="0">￥0</option>
	<option value="1000">￥1,000</option>
	 ......
	<option value="max" selected="selected"s>Max</option>
</select>

<select class="ui-accessible-hidden" name="filterPriceTo" id="filterPriceTo">
	<option value="0">￥0</option>
	<option value="1000">￥1,000</option>
	 ......
	<option value="max" selected="selected"s>Max</option>
</select>

select要素のidを指定してスライダーを初期化

<script type="text/javascript">
	$(function(){
		$('select#filterPriceFrom, select#filterPriceTo').accessibleUISlider({width: 170,labels: 2}).change();
	});
</script>

以下はちょっと手を加えたサンプルです。

とても便利です。
ただ、ビジュアル要素のカスタマイズやレイアウトとの兼ね合いが多少面倒なので、もうちょっと改善してほしいかも。

Google LabsでAudio Indexingがリリースされてます。

音声認識技術で、動画中の音声をインデックス化して検索できるというもの。
サイトでは初期データとして、大統領選候補者のスピーチ動画を検索できるようです。
リンク先ではいきなり"health"というキーワードでの検索結果が表示されていて、スピーチ中に"health"という言葉のある動画がリストアップされています。

将来YouTubeやiTunesなんかと絡めて、歌詞からPVを検索できたりするのかもしれないし、インタビュアーや記者なんかは、原稿を起こすのに重宝するかもしれません。もしくは自然言語処理エンジンと組み合わせて、自動的な情報規制なんかもされるかもしれないですね。

確実に未来がつくられてますなぁ。
ディレクトリがgaudiと略されているのがまたニクイです。

GoogleCodePrettifyを入れてみました。
いろいろやってみた中で、一番簡単で効率のいいと思った方法をメモします。

●次のようにヘッダのテンプレートでCSSとJSファイルをインポートします。

<link href="/prettify/prettify.css" rel="stylesheet" type="text/css"/>
<script src="/prettify/prettify.js" type="text/javascript"></script>

●フッターの最後に以下を追加

<script type="text/javascript">
prettyPrint();
</script>

●QuickCodeプラグインのquickcode.plの115行目あたり

return '<pre>' . $s . '</pre>'; 

を

return '<pre class="prettyprint">' . $s . '</pre>'; 

に修正して、プラグインディレクトリにアップロード

●あとは、記事作成時にフォーマットをQuickCodeにして
[code][/code]の間にコードを記述

アコーディオンメニューを作成するときに、メニューの中にさらにアコーディオンを作りたいときがあったのですが、以外に簡単にできたのでメモします。

作り方は簡単。アコーディオンのヘッダ部分とボディ部分の二つにclass指定して、
タグ構造を入れ子にします。あとはjQueryでスライドさせるだけです。ちなみにjQuery UIのアコーディオンではないです。

JSコード(jQueryを使用しています。)

$(document).ready(function() {

  $("div.accordion").hover(function(){
    $(this).css("cursor","pointer");
  },function(){
    $(this).css("cursor","default");
  });

  $("div.accordion").click(function(){
    $(this).next().slideToggle("fast");
  });
});

HTMLコード

<div class="accordion"><a href="#">見出し１</a></div>
<div class="bellow">
  <div class="accordion"><a href="#">見出し１－１</a></div>
  <div class="bellow">
    <ul>
      <li><a href="#">あああああ</a></li>
    </ul>
  </div>
  <div class="accordion"><a href="#">見出し１－２</a></div>
  <div class="bellow">
    <ul>
      <li><a href="#">いいい</a></li>
      <li><a href="#">ううう</a></li>
    </ul>
  </div>
</div>

<div class="accordion"><a href="#">見出し２</a></div>
<div class="bellow">
  <div class="accordion"><a href="#">見出し２－１</a></div>
  <div class="bellow">
    えええええ
  </div>
  <div class="accordion"><a href="#">見出し２－２</a></div>
  <div class="bellow">
    おおおおお
  </div>
  <div class="accordion"><a href="#">見出し２－３</a></div>
  <div class="bellow">
    <ul>
      <li><a href="#">かかか</a></li>
      <li><a href="#">ききき</a></li>
    </ul>
  </div>
</div>

<div class="accordion"><a href="#">見出し３</a></div>
<div class="bellow">
  <ul>
    <li><a href="#">くくく</a></li>
    <li><a href="#">けけけ</a></li>
  </ul>
</div>

サンプル(見出しをクリックすると開閉します)

うわさのオンラインストレージサービスDropBoxがリリースされています。

早速使ってみていますが、かなりいい。
保存先はホストサーバー上（Amazon S3）で、アップロードにはクライアントソフトを使用します。容量は2GBまで無料、有料オプションで50GBまで使えます。

クライアントソフトでは同期対象となるローカルディレクトリの変更をバックエンドでサーバーと同期するので、変更容量が大きいと反映に若干タイムラグがあるものの、負荷を感じずサーバーにアップする感覚がまったくなく快適です。

ひとつのアカウントで複数のマシン上にクライアントソフトを入れておけば、データの同期ができ、さらに、WEB上で閲覧、リストア、バックアップ、共有などバージョン管理機能も使えます。

つまり、DropBoxはTortoiseSVN機能とTracの機能をホスティングしてくれるようなものです。しかもTortoiseSVNとTracを導入するよりはるかに簡単です。

自宅とオフィスの同期に、チームの協業に、大容量ファイルのやり取りに、写真の公開に、と、ただのストレージでは物足りなかった人のための最強ツールかも。

ドロップダウンを生成してくれるソリューションにもいろいろな方法があるようで、大半はスクリプトを伴うものが多いようです。

ここではCSSだけを生成するオンラインのドロップダウンメニューのジェネレーターをメモします。

Suckerfish Multi-level menu CSS generator
http://pixopoint.com/suckerfish_css/

手順は以下の通り

1. 画面上部のバーがプレビュー（デフォルトは赤いバー）
2. 最初のボックスでテンプレートを決めて
3. メイン階層とサブ階層のメニューのスタイルを決定する
4. 最初のボックスの「Submit Design」ボタンをクリック
5. 一番下のボックスにCSSが出力される

対応するHTMLの構造は以下のような感じでリストをネストします。

<ul id="suckerfishnav">
  <li><a href="http://pixopoint.com/blog/" title="Blog">Blog</a>
    <ul>
      <li><a href="http://pixopoint.com/suckerfish-wordpress-plugin/" title="WordPress Dropdown Menu Plugin">Dropdown Plugin</a></li>
      <li><a href="http://pixopoint.com/aqua-vaccinium-wordpress-theme/" title="Aqua Vaccinium WordPress theme">Aqua Vaccinium</a></li>
    </ul>
  </li>
  <li class="current_page_ancestor"><a href="">Stuff</a>
    <ul>
      <li class="current_page_ancestor"><a href="">Another Level</a>
        <ul>
          <li class="current_page_ancestor"><a href="">Next Level</a>
            <ul>
              <li><a href="">Test</a></li>
              <li><a href="">Test</a></li>
            </ul>
          </li>
          <li><a href="">Test</a></li>
          <li><a href="">Test</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

idはリストの最上位で指定するだけでOKです。
生成されたCSSにちょっと手を加えるだけでそれなりの見た目になるので、アニメーションや凝った仕様が必要ないのであれば、これで十分使えるのではないでしょうか？

ドロップダウンを調べていて、SuckerFishという言葉をよく見かけましたが、コバンザメという意味だそうです。メニューがコバンザメのようにぴったりくっついて表示されるところから来ているんですね。英語だとこういう例えも様になりますね。日本語だとコバンザメニュー。。

必要があってオンラインの角丸ジェネレーターを調べてました。
ツールによって色々な方法があって目的にあえばどれでもいいんですが、ほとんどは元画像が必用だったり、CSSで出力するものばかりでした。

元画像なしで単色の角丸画像を出力するナイスなサイトがあったのでメモ。

RoundedCornr
http://www.roundedcornr.com/

出力形式にいろいろバリエーションがあって

• 単色の角丸をHTML+CSS＋画像で出力
• グラデーションの角丸をHTML+CSS＋画像
• ボーダーの角丸をHTML+CSS＋画像で出力
• 上の全てを画像のみで出力

で、画像のみで作成するのがうれしいです。

GoogleのブラウザChromeの情報がリークした大騒ぎから一晩、GoogleChromeが発表された。

もうインストールして使うことができるみたいなので、試してみました。
この記事もChromeで書いています。

ぱっとみて目立つタブの位置とシンプルでキレイなスキンがまず目に入り、
新規タブを立ち上げると、履歴などから開くページをサジェストしてくれます。

アドレスバーに見える入力欄は「Omnibox」と呼ばれ、URLや検索ボックスをかねており
入力内容をサジェストしてくれます。

一度訪れたページに検索エンジンがあると、その存在を検知することができ、
Omniboxでエンジンを指定して検索できるようになります。
たとえば、Amazonを訪れると、以後omniboxでは"amazon キーワード"でAmazon検索が可能になります。

タブはドラッグして独立したウィンドウにもできます。

ベースはWebkitだそうですがJavascriptエンジンはWebkit純正ではなくV8を使用しているので、かなり軽快。FireFox3.1とのスピード対決が楽しみ。

MozillaLabsが発表したWebサービスのコマンドランチャーのアドオンUbiquityが便利すぎるです。

カスタマイズ可能なホットキー(デフォルトはwin:alt + space, mac:option + space)でコマンドランチャーを起動でき、QuickSilverのようにコマンドをサジェトしてくれます。

起動するホットキーは好みのキーに変更できます

コマンドは各種検索エンジン、Twitter、GmailなどのWEBサービスやFireFoxの機能をつかえます。表示しているページのURLや選択した文字列をコマンドの引数にすることもできるので、ソーシャルブックマークや検索なども便利です。以下はコマンドの一例です。

Twitterに投稿
twと打つだけで、twitterコマンドがサジェストされます。

Wikipediaを検索
入力した文字だけではなく、選択文字列もキーワードに出来ます。

GoogleMapsで地図を検索
気になる場所の地図を表示できます。

Gmailを送信
Gmailの連絡先の名前もサジェストしてくれます。

Google Calendarでスケジュールのチェック
日付を指定して予定を確認できます。デフォルトで今日の予定が表示されます。

コマンドはUbiquity Herdと呼ばれる共有システムによってユーザー自身でJavascriptによる開発、公開、インストールができるようになっていて、現在インストールされているコマンド一覧はcommand-listコマンドで調べることができます。

インストールされているコマンド一覧
command-listコマンドで表示されます。

インストールできるコマンド
こちらに公開されているユーザーコマンド一覧があります。

コマンドのインストール画面
一覧のリンクを選択するとインストールバーが表示され、"discribe"ボタンを押すとインストールが始まります。

about:ubiquity
アドレスバーにabout:ubiquityと入力すると、ホットキーの設定やコマンド一覧、公開ユーザーコマンド一覧、コマンドのインストール状況などUbiquity自体の設定画面が表示されます。

これらの操作はすべてキーボードだけで出来るので、マウスに手を伸ばすことなく各種Webサービスを使うことが出来るし、それぞれのWebサイトの画面をロードする必要もないので、ストレスも減ります。現在プロトタイプということもあって、日本語の処理や細かい部分が少し足りないですが、十分便利といえるレベル。超クールです。

英語ですが、機能の詳しい説明はこちらのUbiquityWikiに載っています。

MozillaがFireFox3の機能拡張のコンテストを行い、そのグランプリに輝いたGUI設計ツール「Pencil」がすばらしい。

SVGベースなので、VisioやPowerPointのように部品を自由に配置でき、大きさと位置、回転をハンドルで調節できる。
画面部品のプリセットには、基本図形とGTK、WinXPのコンポーネントが用意されている。ep, epz形式で保存、pngで出力が可能。

以下に、出力のサンプルを載せます。
だいたいこういうファイルを画面数だけ連続で出力できます。

注釈用の矢印などもあるので、画面要素のドキュメントをブラウザでつくれることになる。贅沢いえばHTMLとCSSのテンプレートを出力できて欲しい。で、そのままFireBugとWebDeveloperで機能開発、FireFTPでアップロード、とFireFoxだけでモックアップの作成の一連の流れができるのに。それにしてもFireFoxの開発プラットフォーム化がどんどん進んでいくなぁ。

FlexSDKのリリース3.1にともない、AIR1.1が正式にサポートされました。

このサポートではAIRの致命的なバグであった、HTMLコントロール内でのFlashコンテンツがtransparent="true"の状態でもレンダリングされるようになり、さらに背面にあってもFlashコンテンツだけ前面にレンダリングされるという現象が解消されているようです。

これで、Flashコンテンツを含むHTMLを使用した場合でも、アプリケーションウィンドウの形に制限がなくなるので、よりデザイン性の高いブラウザをつくることができますね。

最近、比較的に複雑かつ大きなFlexアプリケーションの作成にPureMVCを使用しましたが、慣れない中なんとか収束を迎えつつ、使用してみて感じたことをメモしておきます。

• Pureというだけあって、とてもシンプル。
• フレームワークによってアプリケーション構造をある程度決定してくれるので、楽。
• sendNotification() によって、同一コア内のイベント伝達がとても楽。
• マルチコア版の場合、各コア間の境界をまたいだイベント伝達がサポートされていない。
• Flexにはデータバインディングやイベント機構があるため、Controler が形骸化しやすい。

とくに最後のModelとViewだけで機能してしまう場合が多いという点が、MVCとFlexの親和性の点で気になりました。

このへんのトピックを調べていたら、PAC（Presentation-Control-Abstraction）パターンというのがFlexにマッチしそうだという記述があった。

PACパターンというのは、コンポーネントを中心にしたエージェントというMVCに似た最小の機能単位を作成し、そのエージェント同士が階層状につながりあってアプリケーションが作成されるようです。

FlexとPACパターンの踏み込んだ考察は以下が詳しいので参考になります。
Flex/AIRをPAC的に実装するトライアル

まだよく理解できてないので、また調べたいと思います。

Flex/AIRの仕事でパフォーマンスを気にすることが多くなってきたので、いろいろ調べてメモ

●教科書、総本山のドキュメント
クライアントアプリケーションのパフォーマンスチューンアップテクニック集

基本的な概念やテクニックなのだと思うのですが、読み返すと意外と知らなかったり、忘れていたりすることがあるので、たまに目を通したい。トゥイーンエフェクト時にデータ操作などの別処理が割り込むのを回避するsuspendBackgroundProcessingというのは知らなかった。

●トゥイーンライブラリのパフォーマンス比較
Speed Test - Tweening Engine Comparison Tool

世に出回っているトゥイーンエンジンのパフォーマンスを実際に動かして計測できるサイト。TweenLite、TweenMaxが軽すぎ。機能によっては導入の検討をしたい。オブジェクト数が少なければそんなに差はないのだけど、それにしてもデフォルトのTweenのトロさに愕然。

●UIコンポーネントのオブジェクトキャッシュ
Flex Performance, Memory Management, & Object Caching

とうとうFlexでオブジェクトキャッシュなんて話になってる。
これは遅延生成の逆で、あらかじめ生成したコンポーネントをプールして、表示するときに渡している。大量のインスタンスが必要なコンポーネントの毎回の生成コストをさげるにはいい方法かもしれない。

SWFコンテンツのブラウザでのデバッグはいつもなんとなく泥臭いイメージを持っていて、もうちょっとスマートな方法はないものかと思っていたのですが、ひとつのヒントとして、ちょっといい方法が載っていたのでメモ。

FireBugには、デバッグコンソールにページ内のJSコードから任意の内容を出力するためのConsole APIというものが用意されています。FireBugのConsole APIの概要はgihyoの記事

第2回　Firebugによるデバッグの基本，Console APIとその活用

に載っています。

このConsole APIというのは、サイト内のJSから呼び出せるのですが、それをActionScriptのExternalInterface経由で呼び出すConsole APIコンポーネントをつくった方がいました。

ActionScript 3からFirebugを使うas3zerobugを作った

このコンポーネントを使用することにより

console.log("aaaa");
console.debug("bbbb");
console.info("cccc");
console.warn("dddd");

などがActionScriptから使用できるようになるそうです。

SWFを埋め込むHTMLやその他のHTMLページなどのデバッグを既にFireBugで行っている場合は特に、コストの少ない、良い方法ではないでしょうか。

ただし、これはFireFoxでしか検証できないので、最大シェアのIEのことを考えると、、、、と思っていたのですが、面白いものがありました。

Companion.JSというIEの拡張アドオンで、FireBugを模した感じでJavaScriptのデバッグができるツールです。MSの悪名高いスクリプトデバッガをうまくラップしている様です。このCompanion.JSはFireBugのConsole APIもサポートしており、つまり上記のAS3のコンポーネントを使うことができます。

つまり、上記のアドオンをいれておけば、FireFoxでもIEでも同じASデバッグコードをチェックできるわけです。

コンポーネントのつくり事態は非常にシンプルなので、カスタマイズしてさらに柔軟にデバッグすることもできそう。よくよく考えたらFireBugとExternalInterfaceがあれば、コンソールから実行中にASコードを実行とかできるんですよね。いろいろデバッグの可能性がひろがるかも。

ダラダラと進行しているSproutCore翻訳プロジェクトですが、なんと翻訳を手伝ってくれるという奇特な方があらわれました。

Malon,Incさんです。どうぞよろしくお願いします。

本家のWikiもトピックが徐々に増えている。果たして追いつけるのか〜？

いままで使用していたWindowsマシンが壊れたので、これを機にMacに乗り換えました。だってMac mini やすいんだもん。体がWindowsになれてしまっているのでストレスを感じないために、いろいろセッティング必要ですが、まず、リモートデスクトップ用のVPNクライアントとして使うために以下のようにセッティングしました。

●VPNクライアント　
Tunnelblick

Mac用のGIUベースのOpenVPNソフト。WindowsのOpenVPNからの移行が非常に簡単。　/User/username/Library/ にopenvpnディレクトリを作成して、Windowsで使用していたOpenVPNのコンフィグと鍵ファイル一式を突っ込んで、コンフィグファイルの　.ovpnを.confにリネームするだけ。

●リモートデスクトップクライアント
CoRD

LinuxのリモートデスクトップクライアントrdesktopのCocoa版。フルスクリーンにも対応。複数の接続先を保持できる。接続先を登録後、リストの接続先を選択するだけ。ただし、Macからなので、接続先はIP指定で。
　
　
　
接続した使用感としては、気持ちもたつく感じ。おそらくMac miniのビデオメモリが貧弱なせいだと思うので、ぜひそれなりのスペックのMacで試してみたい。UIや接続方法などよく考えられたいいツールだと思います。MicrosoftもMac用のリモートデスクトップを出しているのですが、これは完全に論外、フルスクリーンどころか最大化もできず色数も少なすぎでした。。

Windowsのリモートデスクトップ > CoRD >>>> VNC >>>>>>>>> MSのMac版RDC

という感じです。
このようにMacとWindowsを行き来するようになると、エクスペリエンスデザインというものを肌で感じられて面白いです。やっぱりMacのUIは楽しい。

Apple Mac mini 2GHz Intel Core 2 Duo/1GB PC2-5300/120GB/SD/Intel GMA950 MB139J/A

FlexとAS3のコードカバレッジをしてくれるツールがあるようです。

FlexCover

Flex、AIR、AS3に対応していて、mxmlc/compc コンパイラとフレームワークに独自に手を加えたカスタムバージョンのFlexSDKを含んでいて、出力したSWF、SWCファイルに測定用の呼び出し関数を挿入することで、コードの実行とその回数を検知する仕組み。

カバレッジ方式はラインとブランチの両方をサポートしているようです。

測定の実行は、基本的には次のような流れ。

１．Flexcover SDKで対象プロジェクトをコンパイルすると測定コード入りのSWFとカバレッジメタデータファイル(ソースコードと実行ラインの対照表のようなもの)が出力される

２．CoverageViewerというスタンドアロンのAIRアプリケーションを起動して１.で出力したメタデータファイルをロード、最初はカバー率０％なので以下のような画面になる。

３．測定対象のSWFを起動し、いじりたおす。

４．再びCoverageViewerに戻ると、いま行った操作により呼び出されたコードラインとその回数が表示される

といった感じ。
また、自動化されたユニットテストスイートのカバレッジツールとしても使用できるようで、その場合はテキストベースのレポートファイルとして出力され、あとでそれをビューワーで閲覧できるらしい。

Flex開発も、いよいよWEBアプリのようになってきましたね。

一人ですが、、、

英語のドキュメントを調べていていつも思うのは、同じところを何度も読み返すたびに、同じ単語をしらべたりして、二度手間で、毎回、最終的にこれ最初に全部翻訳しとけばよかった、と思うこと。

SproutCoreをいじりはじめて、予想以上に便利そうなのと、予想以上にクセがありそうなので、気になってドキュメントを見ているうちに、上記のような理由で翻訳してみようと思い立ちました。

SproutCore ドキュメント翻訳

翻訳は現在進行中で、進行状況は気まぐれです。
翻訳もいいかげんですが、SproutCoreに興味のある方には参考にはなるのではないでしょうか。

翻訳済みのものはこちらにショートカットがあります。

本家Wikiも現在進行中で、新しいページが増えていっていますが、こちらの翻訳Wikiでは、興味のあるところを優先的に翻訳しています。全部訳す前に力尽きると思いますので、興味ある方はご協力ねがいまっす。

肩が凝ってしょうがないので、新しいキーボードを買いました。
マウスの機能がついていて、ひざの上で使えるキーボードです。
小ぶりです。

右手側は
親指：トラックボール(マウス移動)
人差し指：左ボタン

左手側は
親指：左右ボタン
人差し指：スクロールホイール

こうやってひざの上で使います。
ちょっと大きなゲームコントローラのような感覚。
　
　
　

マウスの機能が分解されてキーボードの左右に配置されたような感じで、最初は操作に慣れるのに四苦八苦しました。使い始めて２週間くらいたちますが、ようやく慣れてきて実感したことを記します。

長所

• 肩がとても楽
• 背もたれ完全に倒して、入院患者のような姿勢でタイピングできる
• 一応iTunes対応のメディアキーがついている
• ワイヤレス
• 裏側がちょうど"もも"の部分がへこんでいるので安定する

短所

• キーボードの右半分(記号のエリア)が寸づまって幅が他より狭い
• テンキーがない(m,.,/,j,k,l,;,u,i,o,p,8,9,0がNumLockでテンキー化)
• ワイヤレスの性能か、たまに反応が悪い

結論としては、こみいったプログラミングとかグラフィック作成とかする場合にはある程度訓練が必要。また、作業に集中するときは前のめりになって画面に向かうことが多いので、そういうときは無意識に、机上において普通に使ってしまう。
オペレーションにかなりの精度を要する必要がない気楽な作業（ネットサーフィン、ドキュメントを読む、コードレビュー、メール）は、相当いい。
ただ、マウス部分、キーボード部分の両方に、品質やユーザビリティを向上できる余地がまだたくさんあるので、もっとグレードの高い機種が出ると本格的に仕事で使えるかも。

簡単に言うと、是非おなじコンセプトでロジクールから発売してもらいたい、と。

２.4GHZﾜｲﾔﾚｽ　光学式トラックﾎﾞｰﾙ内蔵ｷｰﾎﾞｰﾄﾞ　TK-24G02

恥ずかしながら割と最近知ったのですが、

superButterDog のような命名法をキャメルケースというそうです。
大文字がラクダのコブなんだって。

それに対して
super_butter_dog はスネークケースだそうです。

Wikipedia : キャメルケース

たしかにプロジェクトの始めに、コーディングルールの話をすることはよくあるんですが、これをなんと呼べばいいのかわからなかったのでスッキリ。

外人さんのネーミングセンスはかっこいーなー。

P.S："ラクダ 蛇"でGoogle検索したら、PerlとPythonの記事がヒットした。。

以前書いたオンラインFlashでもなく、ActionScriptのビルド管理ツールでもないSproutがまた出てきました。芽が好きなんですね。向こうの人は。

というわけでAppleが iPhoneとのデータ同期ツールMobileMeで採用しているSproutCoreという技術が面白そう。

一般的に出回っているエフェクト系やライブラリ的なJSではなく、ブラウザのみで動作するJS用のMVCフレームワークとしてJSアプリケーションの構築をサポートしている。

サンプルも面白いし、Wikiをぱっと読んだ感じ、開発が楽そうなアーキテクチャもよさげ。

iPhoneをはじめ、モバイルデバイスの小さい画面では、アプリケーションがいかにスムーズに画面を切り替えるのかが重要な要素になると思うので、このように１つのWEBページ内でJavaScriptによって画面を切り替えるUIというのはとても可能性を感じます。

ちょっと遊んでみようかと思いました。

PureMVCを使用したFlexなどのアプリで、メモリの開放や初期化などで、

Mediator::onRegister
Mediator::onRemove
(Proxyも同様)

が便利なことに気づいた～（いまさら）

override public function onRegister():void{
  //イベントリスナの登録
  widget.addEventListener(Widget.OPEN, onOpen);
  widget.addEventListener(Widget.SAVE, onSave);
}
override public function onRemove():void{
  //イベントリスナの削除
  widget.removeEventListener(Widget.OPEN, onOpen);
  widget.removeEventListener(Widget.SAVE, onSave);
}

こうすれば、
registerMediator時にリスナ登録、
removeMediator時にリスナ開放
が自動的に行なわれる。

気づくのおそいー。

FlexBuilder3のProfessional版に付属しているFlexプロファイラが便利です。
メモリに展開されているオブジェクトをインスタンス単位で確認できるので、メモリリークの調査などに重宝しています。

が、ここで一つ罠が。

プロファイラでしばらく調べた後、デバッグモードで実行したら、アプリがスタートしない。。。全てのブレークポイントを外すと再生されるけど、ブレークポイント一つでも有効にすると動かない。

ログを見ると、ソースファイルの検索でエラーが出てる

java.lang.NullPointerException
	at com.adobe.flexbuilder.debug.breakpoints.FlexLineBreakpoint.findSourceFiles(FlexLineBreakpoint.java:388)
	at com.adobe.flexbuilder.debug.breakpoints.FlexLineBreakpoint.instantiate(FlexLineBreakpoint.java:442)
	at com.adobe.flexbuilder.debug.model.FlexDebugTarget.breakpointAdded(FlexDebugTarget.java:889)
	at com.adobe.flexbuilder.debug.model.FlexDebugTarget$FdbThread.installDeferredBreakpoints(FlexDebugTarget.java:539)
	at com.adobe.flexbuilder.debug.model.FlexDebugTarget$FdbThread.advanceStateMachine(FlexDebugTarget.java:570)
	at com.adobe.flexbuilder.debug.model.FlexDebugTarget$FdbThread.access$6(FlexDebugTarget.java:544)
	at com.adobe.flexbuilder.debug.model.FlexDebugTarget$1.run(FlexDebugTarget.java:646)
	at org.eclipse.core.runtime.SafeRunner.run(SafeRunner.java:37)
	at org.eclipse.core.runtime.Platform.run(Platform.java:857)
	at com.adobe.flexbuilder.debug.model.FlexDebugTarget$FdbThread.eventLoop(FlexDebugTarget.java:626)
	at com.adobe.flexbuilder.debug.model.FlexDebugTarget$FdbThread.run(FlexDebugTarget.java:687)
	at java.lang.Thread.run(Thread.java:619)

しかも、デバッグコンソールになぞの一文

[SWF] C:/development/projects/eclipse/workspace/eclipse3.3/.metadata/.plugins/com.adobe.flash.profiler/ProfilerAgent.swf - 17,476 バイト (圧縮後)

続きを読む...

HTMLLoaderやHTMLなどで、ZIPとかがダウンロードされない。

と思ったら、バグが報告されていた
http://bugs.adobe.com/jira/browse/SDK-14172

要はレスポンスヘッダにContent-Dispositionがattachment タイプだった場合、ブラウザはレスポンスをファイルとして保存させるべきだけど、できてないよ。っていう報告です。

ステータスとしては

The AIR team has been notified about this issue. Resolving this bug as External.

対応中とのことですが、Externalってどういうことだろう？
Webkitに手を加えるってことかな？

サポートを待ってもいられないので、どうにかできないかと色々やってみたけど、
htmlのページ遷移の際の リクエストやレスポンスをインターセプトする手段がどこにもない。。レスポンスヘッダすら取れない。。

だめだこりゃ。

AIRのHTMLコントロールをいじっていると、ちょっと色気を出してブラウザっぽくしてみたくなり、その瞬間にいろんな壁にぶち当たることは多い。
そのうちのひとつとして、HTMLへのドラッグがある。
履歴やブックマークのデータをブラウザのHTMLエリアにドロップしてナビゲーションさせたいが、デフォルトでは出来ない。

以下は、HTMLコンテンツへのドラッグを実現する方法のメモです。

続きを読む...

AIR/Flexで、HTMLコンポーネントのhtmlLoader属性にカスタムHTMLLoaderをセットしても、まったく動かない。ソースを見ると、getter/setterがないみたい。
htmlLoaderFactoryにカスタムHTMLLoaderのファクトリクラスをセットした、が、動かない。

デバッグして観察してみたら、以下のことがわかった。

・HTMLコンポーネントでは、オーバーライドしたcreateChildrenメソッド で、
　htmlLoaderFactoryにhtmlLoaderを生成させている

・htmlLoaderFactoryがセットされるのはcreateChildren実行のあと

・commitPropatiesメソッド内でも、htmlLoaderFactoryの変更に対してはスルー

・htmlLoaderFactoryがセットされたときに、htmlLoaderFactoryChangedというイベントを発行している

・googleで検索してみた　"htmlLoaderFactoryChanged"

・1件だけヒット！

・GoogleCodeにあるオープンソースFlexのHTMLコンポーネントのソース。。。

なんなん？

PDF
・HTMLLoaderのスケール(widthとheightではない)を変えると、レンダリングされない
・アプリケーション記述ファイルでtransparentがtrueだとレンダリングされない
・HTMLLoaderを含む親階層のどこかでフィルタをかけているとレンダリングされない。

Flash
・HTMLLoaderのスケール(widthとheightではない)を変えると、レンダリングされない
・アプリケーション記述ファイルでtransparentがtrueだとレンダリングされない（1.1で修正済み）
・HTMLLoaderを含む親階層のどこかでフィルタをかけているとレンダリングされない。

HTML
・日本語IMEを使ったテキスト入力ができない。

追記　AIR1.1でアプリケーション記述ファイルでtransparentがtrueでも表示されるようになったようです。
AIR1.1でHTMLでもIME使えるようになったようです。よかった！

。。。。。。

Flexの開発では次の２つはよくある要望だと思います。

A・各コンポーネントの共通部分をまとめたい
　　けど、大体の場合、共通化したいUIの一部分だけは独自実装部分だったりする。
　　たとえばウィンドウのヘッダ部分なんかはいい例だ。
　　タイトル、最小化、最大化、閉じるは共通だけど、
　　メニューバーや、インジケーターなんかは独自実装だ。

B・コンポーネントを実装するのにActionScriptクラスを使いたくない
　　ファイルの拡張子で、UIデザインとロジックを区別することが出来るし、
　　デザインとコードの分離をしやすくしたい。
　　

この２つを両立させようとすると、

「カスタムMXMLコンポーネントを作り、他のMXML上で、
カスタムコンポーネントタグに子要素として他のコンポーネントを追加する」
ということになります。

すると、エラーが発生します。
「可視の子の複数のセットが指定されています。」

これは、子要素に対してカスタムMXMLコンポーネントがどう振舞っていいかをMXMLコンパイラが判断できないためです。

このままで判断できないなら、判断できるようにしてあげる必要があります。
その方法をメモします。

続きを読む...

WEBサイトの製作をしていると、コンテンツが正しく通信できているかを実際にチェックしたいときが多々あります。とくにJavaScriptやFlashPlayerが行う通信は見た目にはわかりずらいのでなおさらです。

実際のブラウザでどのように通信が行われているかを知る手段として、以下のツールがとても便利なので、メモっときます。

続きを読む...

Flex案件で、Excelのワークシートを切り替えるタブのような機能で画面を切り替えたい場面があった、

それにまつわる試行錯誤の結果、わかったことのメモ

続きを読む...

PureMVC(AS3)では通常版と、MultiCore版があって、
MultiCore版は、ウィジェットアプリが作れるようになっている。

PureMVC Framework for AS3 [ MultiCore Version ]

各モジュールにそれぞれのMVC(Facade含む)のセットを用意でき、
ウィジェットアプリとして動作できる

プラットフォームと各ウィジェットの連携もインターフェースを用意すれば可能
かなり便利っぽい、まだベータ版で、足りない部分もあるだろうけど、試してみる価値はあるかも。

たとえば、
1,2,4という配列があったとして、これの総当りの順列のリストを出したい。
組み合わせ数が２のときは、[1,2], [1,4], [2,1], [2,4], [4,1], [4,2]
組み合わせ数が３のときは、[1,2,4], [1,4,2], [2,1,4], [2,4,1], [4,1,2], [4,2,1]
という具合。

いくつかの文献を参考にして、こんな風にしたらうまく行ったのでメモ。

続きを読む...

PureMVCを実装するときに実装側に必要なクラス構成と、
そこで必要な処理をメモとして簡単にまとめてみました。

まだソースは読みきれていないので、ざっくりとした基本的な解釈です。
場合によっては過不足あるかも知れませんが、
いちおう一般的なFlexアプリを想定した場合です。

続きを読む...

いいものを見つけたのでメモ。

SproutsはActionScriptやFlexのプロジェクトやクラスを生成、管理する
いわゆるビルド管理ツール。MavenのAS版みたいな感じ。

プロジェクト生成 ＞ クラス生成 ＞ ビルド ＞ テスト実行

の流れをコマンドベースで行なえる。
しかもCruise Controlにも持っていくことが出来るそうです。すげぇ。
Ruby上で動作します。
(以前のエントリで書いたSproutとはまったく関係なし)

生成,管理するプロジェクトはASの1,2,3とFlex,AIRに対応しており、
各種コンパイラやツール、フレームワークなどのライブラリを
必要に応じて自動でダウンロード、インストールしてくれます。

対応ツール：MTASC, SWFMill, MXMLC, COMPC, AsDoc, AdobeFlashPlayer
対応ライブラリ：AsUnit, FlexUnit, PureMVC, Cairngorm, AdobeCorelib

かなり期待できそう。ちょっと触ってみました。

続きを読む...

SILVAFUG(The Silicon Valley Flex User Group)のミーティングで行なわれた
Flexで使用できる各種フレームワークの比較をテーマにしたプレゼンテーション

メモとして簡単な抜粋を超適当に訳してみた。

観点としては

・とっつきやすさ(Approachable）
　　-ドキュメント
　　-普及率
　　-開発者コミュニティ
　　-知識共有(他の言語の技術を応用しているか)

・拡張性(Scalable)
　　-コードテスト
　　-カプセル化のしやすさ
　　-変更のしやすさ
　　-共同開発のしやすさ
　　-モジュール化のしやすさ

・開放度(Flexible)
　　-オープンソースライセンス
　　-コンテキストの内部、外部に対しての依存性(少ないほどよい)
　　　内部：Flexフレームワーク
　　　外部：PHP、Java、AMF、AIRなど

の３つ。

以下がそれぞれの特徴

続きを読む...

　　N95EU版の日本語化に関しては、以前のエントリどおりでよかったのですが、
　　香港版はフォントが.cccフォントで、EU版のやり方では、
　　フォントが上にかなりずれる。
　　調べたり、試行錯誤した結果、以下の2通りの方法が有効

　　１．S60 Platform SDKs for Symbian OS, for C++の右側の3rd Edition FP2を
　　　インストールするとアプリケーションフォルダ内に生成される
　　　heiseigoths60.ttf を s60sc.ccc、s60thck.cccにリネームして使用する。
　　　半角カナもOK。
　　　ただしボールドが汚い。

　　２．EU版で使用したMSゴシックをフォントエディタfontforgeで全て下にずらす。
　　　インストールの仕方はココかココを参考にします。
　　　windows版は要Cygwinです。

　　　・Xウィンドウでfontforgeを開く。
　　　・「file > open」 でMSゴシックを開く。
　　　・Ctrl + A で全選択後、「element > transformation > transform」を選択。
　　　・開いたダイアログの"move" の横のYに、-70前後の数値を入れてOK。
　　　・「file > save as..」　で s60sc.cccとs60thck.cccの名前で保存。

いまんとこわかった違い。

・フォントが違う
　　香港版
　　　　s60sc.ccc
　　　　s60thck.ccc
　　EU版
　　　　nohindisnr60.ttf
　　　　nohindissb60.ttf
　　　　nohinditsb60.ttf

・FlashLite3のバグ
　　EU版
　　　　以前挙げた様に、RMTPストリーミングで強制的に横画面になる
　　香港版
　　　　RMTPストリーミングしても横画面にならない(!!!!)

前回の記事：FLVファイルを再生する際、どの程度のメモリが消費されますか？
で、FAQの回答が意味不明だったので、
Device Centralと実機で確認したところ、300kbpsのRTMPストリーミングに対し、
およそ700kb前後のヒープを使用していることがわかりました。

そして以下のようなテキストを表示しながら観察してみました。

続きを読む...

FlashLite : FAQ

１分のビデオでは約２～３MBのRAMが消費され、５分のビデオでは平均３～４MBが消費されます。 ビデオの長さに比例してメモリ消費量が増えることはありません。

この短い日本語をどうしても理解できない。。
長さって、横幅の長さとかってことかしら？？？？

携帯のローカル保存されたSWF同士で、Singletonクラスの参照が共有できなくて、ずっと悩んでいたら、FlashLite3(Flash8)のローカルファイルシステムのセキュリティ制限に思いきり引っかかっていた。

ローカルファイルのセキュリティ

読み込み元と読み込み先で System.security.sandboxType してみたら、
読み込むほうが localTrusted で 読み込まれるほうが
localWithFile (パブリッシュ設定どおり) だった。
サンドボックスが違えば_global変数も共有できないわけだろうけども。

Flash 8 Player のセキュリティモデルの動作の詳細については、Flash 8 製品のヘルプを参照してください。このヘルプを使用するときには、Flash Lite 3.0 のセキュリティモデルと Flash Player 8 のセキュリティモデルとの間で次の違いがあることに注意してください。

・信頼の管理は、Flash Lite 内のホストアプリケーションによって実行されます。
・Flash Lite では、信頼構成ファイルは必要ありません。
・SWF ファイルのデベロッパー、製造元、およびキャリアは、Flash Lite 内のすべてのセキュリティ設定を実行する必要があります。ユーザーは信頼を設定できませんし、設定マネージャも提供されていません。ただし、ホストアプリケーションを使用すると、限定された範囲内でユーザーはセキュリティ設定を実行できることがあります。たとえば、特定の SWF ファイルを信頼済みとして設定できます。

「Flash Lite 内のホストアプリケーション」ってなんのこと？？

FlashLite3でFLVをストリーミングすると、勝手に横画面モード(ランドスケープビュー)になってしまい、FlashPlayerを終了するまで元に戻らない。埋め込みビデオだと問題なく動く。S60がストリームコネクションをみておせっかいを焼いているのかも？

で、調べていたら公式フォーラムに載りたてホヤホヤのバグでした。。

FLV playback in Flash Lite 3 on S60 causes rotation to landscape mode

次回のファームウェア更新で解消される予定との事。

追記：この現象はN95 EU版での現象のようです。香港版では普通に再生されました。

はぁ、こまった。
ということで考えた末、メイン(最上位)のムービークリップを横にたおして配置し、1px * 1Px のダミーFLVをアプリの最初っから流して、無理やり縦にしようと計画。

。。。数分後。。。

ぎこちなくも縦にはなってくれました。
が、

_rotation など、TextField プロパティによっては、実行時にテキストフィールドを作成する際に使用できないものもあります。テキストフィールドは、埋め込みフォントを使用した場合にのみ回転できます。

確かに横に倒すとデバイステキストはレンダリングされない。。
痛すぎる。。。
(日本語使わない場合は、フォントを埋め込めばレンダリングされます。日本語はフォントだけで端末のヒープを使い切るのでNG）

FlashLiteでポップアップの回で検証していたスクリーン機能は、全てのインスタンスがステージ上に展開されるので画面数が増えたら当然メモリオーバーしてしまいます。実験したところ今回の画面数ではNGだということがわかりました。。加筆修正済しました。

やはり外部SWFになってしまうのかな？
attachMovieとremoveMovieClipではどうか？
たしかにattachMovieはリンケージ書き出しが必要なので、リンケージデータはメモリ上にロードする必要がある。でも今回は100k制限はないし、構成やコントロールが複雑になるので、外部SWFはできるだけ避けたい。。

FlashLite３は２と比べてメモリ効率が改善されている気がしますが、どのみち貧民的なプログラミングをする必要はありそうです。

こちらにモバイルデバイスでFlashやるときの訓示が書かれているので、模造紙に書き出して壁にでも貼っておこうかと思います。

FlashLiteでフォーカス制御をする際にちょっとハマったので、メモします。

ボタンを押したタイミングでモーダルポップアップしたに、そのままだと押したボタンがオーバー状態でフリーズしてしまう。どうやらフォーカスを持ったまま無効になると、こうなるみたい。

なので、以下のようにすることで解決しました。

/** ポップアップ時 */
var focusStore:Object = eval(Selection.getFocus()); //フォーカスオブジェクトを保持
Selection.setFocus(null); // フォーカスを外してから
popupBtn1.enabled = false; // 無効化
popupBtn2.enabled = false; // 無効化
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/** ポップアップから帰ってきたとき */
popupBtn1.enabled = true; //有効化
popupBtn2.enabled = true; //有効化
Selection.setFocus(focusStore); // フォーカスを戻す

フォーカスオブジェクトを保持しておくと、操作を再開しやすいので便利です。

CGをやっていたころから気になっていた
HDRI（high dynamic range image、ハイ・ダイナミック・レンジ・イメージ）
ですが、3DCGでは環境光のマッピングデータとして扱っていた記憶があるのですが、最近ではそれ自体が作品になっているようです。
合成具合をうまく調整することで、非現実的で彩度の高いイラストのようなイメージになるみたいです。

こちらのサイトでは、東京のいろんな景色がHDRi作品として公開されています。
リンク：HDRiな生活

いいなー、自分もやってみたい。
それにはデジカメを買わなくては。。。

ちょっと前まで冗談で話してた「ブラウザでFlashオーサリング」が
実現してしまっている。

リンク：Sprout - Flash用オンラインWYSIWYGエディタ

まぁFlashやFlexのようにオールラウンドOKではないし、かっちりしたものは無理だろうけど、軽い小品ならこういうのでぜんぜんいいかも。

Flashの世界にまでやってきた「美しいコード」。
最近だんだん作り方とかにこだわりがなくなってきた。
動きゃいいじゃんみたいな。

Googleのシェフのレシピが公開されてる～
かぼちゃのスフレケーキ？
うまそうなので訳してみた。

続きを読む...

どうやら日本語TTFフォントを
Z:\resource\Fonts以下のファイルにリネームして上書きすればいいみたい。
そのときの作業メモです

続きを読む...

日本語フォントを入れるためにY-Browser をインストールしたときのメモ

続きを読む...

今、とある案件でFlashLite3をいじってます。はじめてのFlashLite。
過去のバージョンでは、Flashとは勝手が違って作成がかなり大変だったようですが、
3は、API的にはFlash7と大して変わらずなんとか頑張れそうです。

ここまで触ってきた中で、Flashとは違う部分をメモっときます。

続きを読む...

既存サイトの機能追加で有無も言わさない形でこんな要件に遭遇した。
『HTMLはHTTP、Flash内部からのサーバー通信はHTTPSセッション』
いつもこんがらがるのでメモとして書いておきます。

続きを読む...