diary
HOME » スタッフブログ » developerのブログ

developerのブログ

[1]  <前  10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20  次>  [21]

現在 101 件のスタッフ日記を掲載しています。

Javascriptのデバッグ

2010年6月28日

Author : developer

久し振りにJavascriptを書く機会があり、ブラウザによって挙動が
違うので苦戦していました。(今も苦戦してるけど。。)

そんな時に役に立つのが、デバッグツール。
Firefoxでは有名なFirebugというpluginがありますが、他のブラウザは
どうしてるんだろう?ということで、今回使ったデバッグツールをご紹介。
というか、ブラウザに標準で入っているツールですけど。

IE8では、F12で開発者ツールが別ウィンドウで表示されます。(IE7以前には無かったと思う)
Google Chromeでは、Ctrl+Shift+Iでデベロッパーツールがウィンドウの下部に表示されます。

IE7など標準でデバッグツールが入っていない場合は、Firebug Liteをブックマークレットで
動かすのが便利です。ブレークポイントとかはれない(と思う)ので、HTMLや変数の確認程度に
なってしまいますが、余計なツールをインストールしないでいいのでお手軽です。

やり方は、以下のscript(かなり長いので切れないようにご注意を)をブックマークとかに登録して、
デバッグしたいページを開いたら、それを呼び出すだけでウィンドウの下部にFirebug Liteが表示されます。
(ブラウザのアドレスバーにコピペでもOK)

----- ここから -----
javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E=F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','1.3.0.3','firebug-lite-debug.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#debug');
----- ここまで -----

詳しくはこちら。
http://getfirebug.com/firebuglite#Bookmarklet

でも開発してる側からいうと、ユーザに簡単にHTMLやscriptが見られるのって嫌ですよね。。

Box2Dを使ってみよう2

2010年6月24日

Author : developer

前回の続き

http://www.marietta.co.jp/diary/index.php?action_diary_detail=1&id=237
にてBox2Dのワールドの設定まで進みました。

今回は実際にオブジェクトを表示したいと思います。

まずはb2BodyDefクラスでオブジェクトの初期位置を設定します。
b2BodyDefクラスはオブジェクトの初期位置や、表示する角度を設定するクラス
です。
var dodyDef:b2BodyDef = new b2BodyDef();
// 初期位置
dodyDef.position.Set(5.5 / 2, 3);

次にb2PolygonDefクラスでオブジェクトの形状を設定します。
var polygonDef:b2PolygonDef = new b2PolygonDef();
// 横幅:200ピクセル、高さ:15ピクセルの長方形
polygonDef.SetAsBox(2, 0.15);

b2PolygonDefクラスは四角形の形状を設定するクラスで、丸を設定したいときは
b2CircleDefクラスを使用します。

最後にb2Bodyクラスでオブジェクトを設定します。
var body:b2Body = new b2Body();
// world:前回設定したb2Worldクラス
body = world.CreateBody( dodyDef );
body.CreateShape( polygonDef );

これでオブジェクトの表示準備が完了しました。

表示を行うにはb2DebugDrawクラスを使用し描画命令を行う必要があります。
var debugDraw:b2DebugDraw = new b2DebugDraw();
debugDraw.m_sprite = this;
// 1m=100ピクセルに設定
debugDraw.m_drawScale = 100;
// 表示オブジェクトの透明度を設定
debugDraw.m_fillAlpha = 0.3;
// 物体を表示設定に
debugDraw.SetFlags(b2DebugDraw.e_shapeBit);
// ワールドにセット
world.SetDebugDraw(debugDraw);
// 物理シミュレーション更新
world.Step( 1/30 , 10 );

これにてようやく静止した長方形が表示されます。
最後の
world.Step( 1/30 , 10 );
は設定した秒数(1/30)につき設定した回数(10)物理シミュレーションが実行
されるメソッドです。

これだけで結構な長くなってしまったので今回はこれにて終わりにしたいと思い
ます。
次はオブジェクト同士の衝突までご紹介したいと思います。
キーボードショートカットキー・・・
使いこなせば仕事が速くなる(・・・気がする)のですが、
なかなか覚えられず。。。

今更ですが、
Flex Builder 上で
Ctrl + Shift + L キー(Macintosh では Command + Shift + L キー)
を押すとFlexBuilderで使えるショートカットキーの一覧が出たのですね。。。
(気がつかなかった。。。

子孫セレクタのサンプル

2010年6月21日

Author : developer

子孫セレクタのサンプルを作りました。
(比較しやすいよう、TitleWindowやボタンは、Sparkではなく、MXを使用します。)
 
FlashBuilder4を使い、sdkを切り替えました。

■sdk3.5の場合

MXML
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"  minWidth="955" minHeight="600">
 <mx:Style source="./default.css"/>
 
 <mx:TitleWindow width="400" height="300">
  <mx:ControlBar>
   <mx:Button label="ボタン1"/>
   <mx:Button label="ボタン2"/>
   <mx:Button label="ボタン3"/>
  </mx:ControlBar>
 </mx:TitleWindow>
</mx:Application>
CSS
/* CSS file */
ControlBar{
 horizontal-align:right;
}
ControlBar Button {
 color:#990000;
 fontSize:16;
 fontWeight:bold;
}
結果
 

■sdk4.0の場合

MXML
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="
http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
 <fx:Declarations>
  <!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 -->
 </fx:Declarations>
 
 <fx:Style source="./default.css"/>
 
 <mx:TitleWindow width="400" height="300" x="343" y="166">
  <mx:ControlBar>
   <mx:Button label="ボタン1"/>
   <mx:Button label="ボタン2"/>
   <mx:Button label="ボタン3"/>
  </mx:ControlBar>
 </mx:TitleWindow>
</s:Application>
CSS
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
mx|ControlBar{
 horizontal-align:right;
}
mx|ControlBar mx|Button {
 color:#990000;
 fontSize:16;
 fontWeight:bold;
}

結果

flashでSingleton?

2010年6月18日

Author : developer

最初に断っておきますが、これは独り言であって解決策ではありませんので悪しからず。

AcrionScript歴が浅いので、時間がある時にflexのソースを眺めたりしてます。
そんな時に見つけたクラスが「mx.core.Singleton」
[ExcludeClass]のメタタグが定義されているので入力補完では出てこないです。

元々javaやっていてasをやるようになったので、javaでは出来たのにasでは
出来ないことがあって困ることがあります。逆に出来て便利なこともありますけど。

一番困るのはメソッドのオーバーロードが出来ないこと。でもこれは今回の内容では
ないので置いといて、コンストラクタがpublicでしか宣言できないってこと。
staticメソッドだけで構成されるutilクラスとかで、インスタンスを生成する必要ないから
コンストラクタを隠蔽するってことができない。これに関しては別に大した問題じゃないですが。

困るときってのが、Singletonパターンでクラスを作りたいとき。
普段デザインパターンとか意識していない自分でも、たまに使うのがSingleton。
コンストラクタをprivateにしたいけどAcrionScriptでは残念ながらできず、
他からインスタンスを生成された場合は例外を投げるとかして擬似的に実装するしかない。
(もっとうまいやり方あるかもだけど)

で、最初に書いたmx.core.Singletonクラスってのを見つけて、これは何らかの解決策に
なるのかと思い、何をやっているクラスかって見てみたら、flexの中で使われている
Singletonの擬似的な実装方法みたいで、中では単純にstaticなmap変数でクラスの出し入れを
しているだけ。実際に登録されるクラスはSingletonよろしくgetInstanceというpublic static
メソッドで、private static変数で保持しているインスタンスを戻しているみたい。
このクラス達は普通にnewすればインスタンスを生成できちゃいそうです。
なので、mx.core.SingletonクラスはSingletonというよりはFactoryっぽいのかな?
そんな訳で、Singletonについては何の解決もせず。

きちんと統制の取れたプロジェクトならルールとしてインスタンス生成時の方法を提示して
複数生成しないようにすればいいんですが、バラバラに開発しているプロジェクトとかだと
勝手にインスタンスを生成されちゃったりしたら困るよなぁ・・・という独り言でした。

[1]  <前  10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20  次>  [21]

calendar

ライター一覧

マリエッタのスタッフへ
読まれる記事を書きましょう。
読まれる記事を書いた人には
きっと社長からのご褒美がある。
はず。

神谷信吾 神谷信吾 投稿数:227
閲覧数:1174954
hiromi hiromi 投稿数:241
閲覧数:484772
developer developer 投稿数:101
閲覧数:262188
営業部 営業部 投稿数:35
閲覧数:82992
nunoko nunoko 投稿数:34
閲覧数:81079
risa risa 投稿数:15
閲覧数:42959
yukiko yukiko 投稿数:18
閲覧数:27063
ryu ryu 投稿数:10
閲覧数:25728
taisei taisei 投稿数:9
閲覧数:24623
総務部 総務部 投稿数:8
閲覧数:19031
mai mai 投稿数:11
閲覧数:15520
minako minako 投稿数:6
閲覧数:13579
takano takano 投稿数:2
閲覧数:5471
nozomi nozomi 投稿数:13
閲覧数:5307
koike koike 投稿数:2
閲覧数:5242
toyoda toyoda 投稿数:2
閲覧数:3839
non non 投稿数:1
閲覧数:3377
adachi adachi 投稿数:1
閲覧数:2806
mii mii 投稿数:11
閲覧数:2503
aoyagi aoyagi 投稿数:1
閲覧数:2486
りう りう 投稿数:1
閲覧数:2464
sachiko sachiko 投稿数:4
閲覧数:1563
yuka yuka 投稿数:1
閲覧数:210

site search