2011年6月24日金曜日

Eclipse 3.6 Helios で Flex Builder 3 plugin を使う

Flex Builder 3 pluginが公式に対応しているのはEclipse 3.4までです。
しかし、ちょっと作業が必要になりますが、Eclipse 3.6でもFlex Builder 3 pluginを利用する方法があります。
まあ、素直に最新版の Flash Builder 4を買ったほうがいい気もしますが、「どうしてもFlex Builder 3を使いたい!」という時のために、導入方法をまとめておきます。

1. Eclipse 3.6をインストール

何がなくてもまずはEclipse。これがなくてははじまりません。

2. Flex Builder 3 pluginのインストール

Eclipseは先ほどインストールした3.6を指定します。途中で「3.2~3.4じゃないから使えないかもよ?」とかそんなようなことを聞かれますが、構わずに進めましょう。

3. Eclipseの設定

Eclipseのインストールフォルダに行くと、「links」というフォルダが新しく作成されているはずです。 ここを開いてみると、「com.adobe.flexbuilder.feature.core.link」というファイルがあります。これは、Flex Builder 3 pluginへのリンクファイルです。
このファイルをテキストエディタで開いてみましょう。すると、 中にはFlex Builder 3 pluginのインストールフォルダのフルパスが書いてあります。
このフルパスの前に「path=」という記述はあるでしょうか? なかったら追加しておいてください。
私の場合は、

path=C:/Program Files/Adobe/Flex Builder 3 Plug-in

こんな感じになりました。
追記が終わったら、上書き保存してファイルを閉じてください。

4. Flex Builder 3 pluginにパッチをあてる

さて、このままEclipseを起動しても、Flex Builder 3 pluginを利用することはできます。しかし、おそらくビルドエラーが出てしまうはずです。
このエラーを回避するために、 Flex Builder 3 pluginにパッチをあてる必要があります。
まず、こちらのサイトで、「ProblemManager patch」をダウンロードしてください。

<Flex Builder 3 pluginのインストールフォルダ>/eclipse/plugins/com.adobe.flexbuilder.project_3.0.204732/zornproject.jar

をWinRAR等で開き、com/adobe/flexbuilder/project/compiler/internal/ProblemManager.classをダウンロードしたファイル内の同名のファイルで置き換えます。
この時、zornproject.jarを展開する必要はありません。ただWinRARで開き、該当のファイルを上書きしてください。よくわからずに展開→再圧縮を行うと、jarファイルとして認識しなくなる可能性があります。

以上で手順は終了です。Eclipseを念のため「-clean」で起動すると、Flex Builder 3 pluginが使えるようになっているはずです。

なお、すでにEclipse 3.4以下で Flex Builder 3 pluginを利用している場合は、手順3以降を行えば3.6で利用出来るようになります。再インストールは必要ありません。

2011年6月22日水曜日

[jQuery Mobile] beta 1でハマった点まとめ

jQuery MobileのBeta 1 (jquery.mobile-1.0b1.js) が公開されましたね。
レスポンシブ・レイアウトへの対応やアドレスバーが隠れるようになったり、結構すごいです。
私も早速自分の作っているサイトに適応してみたのですが、幾つかつまずいた点があったのでまとめてみます。

・ページがスマートフォンに最適化されない。

なぜかデスクトップのブラウザと同じように表示されます。ちょっと悩みましたが、公式デモページのソースに答えはありました。一行追加するだけで解消です。

<meta name="viewport" content="width=device-width, initial-scale=1">

レスポンシブ・レイアウトに対応したことと関係あるんですかねー

・ clickイベントが使えない

デスクトップのブラウザでは普通に動作するのですが、Androidで試したところ、clickイベントにバインドしたファンクションが動いてくれませんでした。
これの答えは公式ブログに書いてありました。 KEY CHANGESの項に、

「アドレスバー隠すためにfastclickっていうイベント作ったよ。このイベントのせいでもしかしたらclickイベント使えなくなるかもねー(超意訳)」

とかそんなことが書いてあります。
回避策としては2つあります。

1. clickイベントではなくvclickイベントにバインドする。


2. mobileinitイベント時に、useFastClick(false)を設定する。


ちなみに、2番だとアドレスバーが隠れなくなるようです。vclickイベントにバインドを変更するのが無難かなー。

2011/09/06 補足: jQuery Mobile beta 2ではfastclickが廃止され、clickイベントに戻ったようです。一部端末でfastclickイベントか二度検出されたり、という不具合があったようです。

・vclickイベントからイベント発生元オブジェクトを取得する方法がわからない

これ個人的にすごくハマった。
alpha 4 では、動的にリストを作成し、各li要素にclickイベントをバインドして、 イベントからクリックされたli要素を取得、ということをやっていました。
この時、

$(event.currentTarget).children("#hoge").text();

という形でli要素内の任意の子要素を取得していました。
ところが、beta 1 でclickイベントをvclickイベントに変更すると、上の方法ではクリックされたliを取得できませんでした。
公式ブログやらjQuery Mobileのソースやらを読んでみると、vclickはマウスのクリックイベントとタッチパネルデバイスのタップイベントやらを統合していい感じに処理してくれるカスタムイベントのようです。
で、取得したイベントの中の要素をここを参考にしてこんな感じで全部見てみました。

var props = new Array();
for (var key in event){
    props.push(key);
}
props.sort();
$("#msg").html(props.join("<br />")).css("text-align", "left");

上記のコードを利用して、イベント内の怪しそうな要素をかたっぱしから見ていった結果、

$(event.originalEvent.target.parentElement).find("hoge").text();

でクリックされたli要素内の任意の子孫要素を取得できました。
なんかもっとスマートなやり方がありそうな気もするんですけどねー。 

・検索ボックスにイベントをバインドできない。 


別のエントリにまとめました。