c-geru のすべての投稿

CreateJS

CreateJSのマウスイベントでのthis参照

引き続き野中さんの記事（EaselJSのマウスクリックとドラッグ&ドロップ）のコードを書いていて、イベントハンドラからthisの参照した時に、何を指すのかがわからなかったのでテストしてみました。

 上の記事で作ったShapeに対して・・・
function overHandler(eventObject) { 　  console.log("over++++++++++++++++");

console.log("this>>"+this);
console.log("eventObject>>"+eventObject);
console.log("eventObject.target>>"+eventObject.target);

 }
こんな感じで、各イベントハンドラでログを書き出してみた結果です。
onClick
this>>[Shape (name=null)]
eventObject>>[MouseEvent (type=click stageX=98 stageY=46)]
eventObject.target>>[Shape (name=null)]
onDoubleClick
this>>[Shape (name=null)]
eventObject>>[MouseEvent (type=dblclick stageX=104 stageY=51)]
eventObject.target>>[Shape (name=null)]
onPress
this>>[Shape (name=null)]
eventObject>>[MouseEvent (type=mousedown stageX=98 stageY=46)]
eventObject.target>>[Shape (name=null)]
onMouseMove
this>>[MouseEvent (type=mousedown stageX=110 stageY=55)]
eventObject>>[MouseEvent (type=mousemove stageX=503 stageY=253)]
eventObject.target>>[Shape (name=null)]
onMouseUp
this>>[MouseEvent (type=mousedown stageX=98 stageY=46)]
eventObject>>[MouseEvent (type=mouseup stageX=98 stageY=46)]
eventObject.target>>[Shape (name=null)]
onMouseOver
this>>[Shape (name=null)]
eventObject>>[MouseEvent (type=mouseover stageX=115 stageY=55)]
eventObject.target>>[Shape (name=null)]
onMouseOut
this>>[Shape (name=null)]
eventObject>>[MouseEvent (type=mouseout stageX=119 stageY=66)]
eventObject.target>>[Shape (name=null)]

これらをまとめると・・・

  • onMouseMove,onMouseUpでは、thisは対となるMouseEvent（mousedown）を指す。
  • その他のマウスイベントでは、thisはshapeを指す。
ということのようです。
※easeljs:0.6.0で動作確認。
 
関連リンク
CreateJS

CreateJSでMouseOver/MouseOutを使う際の注意点

ついでなんで、合間にいじってたCreateJSのマウスイベントについて。

クリックは問題なく動いたんだけど、マウスオーバー／マウスアウトがうまく行かなくて填まりました。で、結局・・・
stage.enableMouseOver()

というメソッドを使って、明示的にonMouseOverとonMouseOutを使うことを宣言しないといけないらしいです。こちらの記事（EaselJSのMouseEventを理解しよう）を参考にしました。感謝。

あと、EaselJSのバージョンが0.6.0以降は、イベントハンドラでなくイベントリスナー推奨らしいので、その関連リンクも。
Flashな人にとっては、AS2.0 >> AS3.0的な流れですね。

CreateJS

CreateJSはじめる際の注意点

ようやく重い腰を上げて、CreateJSを触り始めました。

とりあえず参考にしたのは、当日の講義も聴いた野中さんのこの記事。
で、記事はわかりやすいんだけど。ライブラリのバージョンが上がってるので、その辺の注意点をメモ。

walk2_mc._SpriteSheet = new SpriteSheet({images: [“sprite_sheet.png”], frames: [[0,0,167,268,0,84.5,135],[167,0,167,268,0,84.5,135],[334,0,167,268,0,84.5,135],[0,268,167,268,0,84.5,135],[167,268,167,268,0,84.5,135],[334,268,167,268,0,84.5,135]]});

この「frames」に書かれている配列の2,3番目が幅（168）と高さ（268）になります。
去年の11月に聞いて、今頃触るっていうのもアレなんですけど、記事はたくさんあるけれど、バージョンの差違で同じようにハマル人もいるかもなので、一応メモしておきます。
※easeljs:0.6.0、soundjs:0.4.1、preloadjs:0.3.0で動作確認。
AIR for iOS, Xcode

iOSシミュレータのリセット

iOSシミュレータにインストールしたアプリや画像データなどを削除する方法。これで行けるらしい。以下、「iOS開発ガイド」の「iOSシミュレータの使用」から引用。
コンテンツと設定のリセット

シミュレーション環境のユーザコンテンツと設定を工場出荷時の状態に戻し、インストールしたアプリケーションを削除するには、「iOSシミュレータ(iOS Simulator)」＞「コンテンツと設定をリセット(Reset Content and Settings)」を選びます。

下記サイトからの情報です。感謝。

AIR for iOS

FlashCS6からiOSシミュレータを使う

先日、Flash Professional CS6アップデート2が公開されて、CS6から直接iOSシミュレータを使ったデバッグができるとのことで、早速試してみたのでメモを残します（環境:MacOSX 10.6.8、Xcode4.2）。

  1. iOSシミュレータSDKにパスを通す。ファイル＞AIR for iOS 設定＞一般で、iOSシミュレーターSDKにパスを設定します。ウチの環境だとこんな感じ。/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator5.0.sdk ＞ 設定画面
  2. ファイル＞AIR for iOS 設定＞デプロイは、こんな感じ。＞ 設定画面
  3. デバッグ＞ムービーをデバッグで、iOSシミュレータを選択して、デバッグ。＞ 設定画面
これでiOSシミュレータが起動して、アプリが転送されているので、そのままデバッグできます。ただしiOSシミュレータが起動してもアプリは自動で開きません。またアプリは2画面目以降にインストールされるようなので、フリックしてページを切り換える必要があります。

以下の記事とツイートを参考にしました。ありがとうございます。


Movable Type

Movable Typeのディレクトリ変更

マルチドメイン運用を考えて、独自ドメインをサイトルートから変更しました。で、サイトルートにあったmtフォルダも移動したのですが、ブログの保存ができなくなったり、確認ボタンでNot Foundが出たり…。

一応、忘れてしまいそうのでメモ。
  1. mt/mt-config,cgiに書いてあるパスを修正。修正箇所はこちらを参照。
  2. ブログ設定の公開設定＞サイトパスをディレクトリ変更に合わせて修正。
これで問題なくブログも修正可能になりました。普段しないことをすると大体はまるという、よくある話でした（笑）。
AIR, AIR for iOS, AS3.0, Flash Builder, Flex

AIR for iOSでCameraUIを使ったアプリが落ちる件について

Flash Bulider4.6でCameraUIクラスを使ったiOSアプリのテストをしていたんですが、何度かカメラを呼び出して（CameraUIはiOSのカメラを呼び出す仕様）いると、何度目かで必ずアプリが落ちる…という現象が発生しました。

ネットで探したサンプルコード（Adobe AIR for iOSによるiPhone/iPadアプリケーション開発第4回 カメラとカメラロール ｜ クラスメソッド開発ブログ）に手を加えてテストしていたので、「どこか自分で書き足したところがおかしいんだろうな」と色々テストするも解決せず。元のサンプルコードに戻した状態でも状況は変わらず。
で、いろいろググってみたら、こんな記事を発見。
この記事によると「Flex SDK4.6に問題があって、iOS上ではカメラを使うアプリは使えない」とのこと。がーん…。
ちょうどFlash Builder4.7がリリースされたタイミングでもあるので、一縷の望みをかけて、Flash Builder4.7+Apache Flex4.8+AIR3.4の環境を構築してテストしてみました。
結果は問題なく動作しました。Flex 4.8ならOKなようです。しかしこの問題、いろいろググった割に関連記事が1つしかないとか…。AbodeのFAQとかに載っていてもよさそうですが。
AIR, AIR for iOS, Flash Builder, Flex

Flash Builder4.7+Apache Flex4.8+AIR3.4のセットアップ

Flash Builder4.7を入れてみたんですが、これってFlex SDK 4.6でAIR SDK 3.1なんですね…。これだとあまり意味がないので、Flash Builder4.7+Apache Flex4.8+AIR3.4にしてみました。次回のセットアップ用にメモしておきます。

 
  1. Flash Builder4.7ベータ版をDLします。インストールします。Adobe IDでのサインインが必要です。DLページの一番下にシリアル番号が書いてあるのでメモを忘れずに。
  2. Flash Builder4.7ベータ版をインストールします。インストール時にAdobe IDが必要なんですが、これが既存のIDが使えず、新規に取得する必要があります。インストール画面から新規取得すればOK（私も場合は既存IDと同じにしましたが、問題なく通りました）。毎度おなじみ上条さんのブログに説明があります（Flash Builder 4.7 ベータ版の公開 – akihiro kamijo）。
  3. 次にApache Flex 4.8ですが、手動でのインストールだと個別にDLするものなどがあったり、いろいろ面倒なのですが、諸々まとめてインストールしてくれるツールの紹介記事をみまして、これを使わせていただきました（Apache Flex 4.8 インストールAtomic Lab）。
  4. 最後にAIR SDK 3.4ですが、これまたありがたい記事がありまして、コレを参考にしました（Memo, Flex SDKのAIR SDKを3.2へアップデート ? イナヅマTVログ）。ブログではAIR3.2とFB4.5になっていますが、それぞれ3.4と4.7に置き換えて作業すればOKです。
これで完了です。無事セットアップしてAIR for iOSでの実機書き出しまでテストできました。わかっていれば簡単なことでも、いろいろ調べながらだと結構手間がかかるので、参考までに。
ぶつぶつつぶやきながら作業していたら、柊さんにアドバイスいただきました。柊さんと各ブログ主さんに感謝。
[追記1]環境を書いていませんでした。MacOSX10.6.8+MBP2011です。
[追記2]AIR SDK 3.4をDLする際に、何故かSafari（5.1.7）だとうまく行かず、ChromeでDLしました。
AIR, AIR for iOS, iPhone

iPhone開発用の証明書を再作成

Flash BuilderでAIR for iOSのテストしようとしたら、p12の証明書ファイルがドコにあるのかわからず…。

で、下記の対処で解決。
  1. キーチェーンアクセスを起動。
  2. キーチェーン；ログイン、分類；自分の証明書を選択。
  3. iPhone Developer証明書の中にある秘密鍵を選択。
  4. ファイル＞書き出す
で、.p12のファイルが作れます。これを読み込ませてOK。
Xcodeだと一回設定してそのままなので、ちょっと焦りました。
自分用メモとして。