Home > Archives > 2010-04

2010-04

FlashDevelopのdiffui(Compare Files)


diffuiと書くより、Compare Filesと書いた方がいいかも知れませんが…

これを使うと、二つのファイル間の差分を表示することが出来ます。

差分を表示してみる

以下のような二つのファイルがあったとします。

Main.as

package 
{
	import flash.display.Sprite;
	
	/**
	 * ...
	 * @author flabaka
	 */
	public class Main extends Sprite 
	{
		public function Main() {
			trace("ほげほげ");
		}
	}
	
}

Main1.as

package 
{
	import flash.display.Sprite;
	
	/**
	 * ...
	 * @author flabaka
	 */
	public class Main1 extends Sprite 
	{
		public function Main1() {
			trace("hogehoge");
		}
	}
	
}

FlashDevelopを起動して、Tools>General Tools>Compare Files(日本語化している場合は、ツール>総合ツール>ファイルを比較)を選択します。

画面左下にある「…」ボタンを押して、ファイル(Main.as)を選択します。右側も同じようにして、ファイル(Main1.as)を選択します。(テキストエリアにファイルをドラッグ&ドロップも可能です!)

最後にRunボタンを押すと、二つのファイル間の差分をハイライト表示してくれます。

ファイルの差分を表示するということは、TortoiseSVNでもCompare Filesは使えるんじゃないの? と思ったので…

TortoiseSVNでも使ってみる

SVNクライアントツールはTortoiseSVNを使っているんですが、ファイル間の差分を表示したい場合は、以下のようにするかと思います。

比較したいファイルを選択した状態で、マウスの右クリック>TortoiseSVN>差分を選択。

デフォルトでは差分ビューアにTortoiseMergeを使っているのですが、これをCompare Filesに変更してみます。

マウスの右クリック>TortoiseSVN>設定>外部プログラム>差分ビューアを選択。

異なるリビジョンのファイルの比較に利用するプログラムの設定を、TortoiseMergeからFlashDevelopのdiffuiに変更します。

diffuiへのパスは、C:\Program Files\FlashDevelop\Tools\diffui\diffui.exeみたいな感じです。

設定を終えたら、先の二つのファイルを選択し、マウスの右クリック>TortoiseSVN>差分を選択。

すると、TortoiseMergeではなく、diffui(Compare Files)でファイル間の差分を見ることが出来ます。

やってはみたもののTortoiseMergeの方が分かりやすいので、設定を元(TortoiseMerge)に戻したことは内緒です。

FlashDevelop3.1.0のプロファイラが表示されない


FlashDevelop3.1.0のプロファイラを試してみたんですが、ちょっと填ったことがあったんでメモ。

プロファイラのダウンロードとかセッティングとかは、FlashDevelop3.1.0 RTM(FlashDevelop.jp)を参照してください。

AS3Context.dllを

ダウンロードしてきたzipファイルを展開し、ファイルを以下のフォルダ内に入れます。

Windows XP
C:\Documents and Settings\ユーザー名\Local Settings\Application Data\FlashDevelop\Plugins

これでFlashDevelopを起動して、メニューを見ても、プロファイラがリストに表示されない…

(AS3Context.dllが)Program Filesの方とバッティングしてるから表示されないのかなぁ…と思ったので…

Windows XP
C:\Program Files\FlashDevelop\Plugins

Program Filesフォルダ内のAS3Context.dllを、Pluginsフォルダから外します。

で、FlashDevelopを再起動してみると…

プロファイラがリストに表示されました。

リストメニューにプロファイラが表示されない(上書きが上手くいかない)場合は、上記の手順をお試しください!

FlashDevelopでzen-coding


FlashDevelop3.1.0からzen-codingが使えるようになりました。

zen-codingのデモのビデオとか、HTMLの書き方とかは、GoogleCodeのzen-codingにあります。

デモのビデオの最初の方を、FlashDevelopで試してみました。

FlashDevelopでzen-coding

Ctrl + B or Spaceが大事です!

ファイル→XHTMLドキュメントを選択します。

1.div

<body>
div
</body>

bodyタグの中に、divと打って、Ctrl + B or Spaceを押すと…

<body>
<div></div>
</body>

2.div#header

<body>
div#header
</body>

bodyタグの中に、div#headerと打って、Ctrl + B or Spaceを押すと…

<body>
<div id="header"></div>
</body>

3.div#header.some.classes+ul>li

<body>
div#header.some.classes+ul>li
</body>

bodyタグの中に、div#header.some.classes+ul>liと打って、Ctrl + B or Spaceを押すと…

<body>
<div id="header" class="some classes"></div>
<ul>
	<li></li>
</ul>
</body>

4.ul#navi.li*5

<body>
ul#navi.li*5
</body>

bodyタグの中に、ul#navi.li*5と打って、Ctrl + B or Spaceを押すと…

<body>
<ul id="navi" class="li"></ul>
<ul id="navi" class="li"></ul>
<ul id="navi" class="li"></ul>
<ul id="navi" class="li"></ul>
<ul id="navi" class="li"></ul>
</body>

HTMLコメント

あれこれ触っていたら、HTMLコメントのショートカットが判明。

<body>
<h1>ああああ</h1>
<p>いいいいいいいいい</p>
</body>

<h1>~</p>まで選択しておいて、Ctrl + Shift + Q

<body>
<!--<h1>ああああ</h1>
<p>いいいいいいいいい</p>-->
</body>

コメントアウトを解除したい場合も、Ctrl + Shift + Q。

真っ新な状態からだと…

真っ新な状態のファイルから、zen-codingを使ってみようかと思ったら、Ctrl + Spaceだと最初の一回だけ、補完が出来ませんでした。

新規ファイル→XHTMLを選択して、書いてあるコードを消去。

html:xt

と打ち込んで、Ctrl + Bを押すと…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
</head>
<body>
	
</body>
</html>

と、こんな感じで補完してくれます。でも、Ctrl + Spaceを押すと…

html:xt

この状態のまま、何も起こらず…

しかし、何かコードが書いてある場合なら、Ctrl + Spaceでも補完は可能です。

新規ファイル→XHTMLを選択した際にコードがある程度書かれているので、そこからならCtrl + Space or Ctrl + Bでも問題なさそう…

先の真っ新な状態での件ですが…

html:xt

Ctrl + Bを押すと、メニューを日本語化していても、xml属性がenになってしまいます。(どこかで変更出来るかも…)

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

真っ新な状態からだと、何かと面倒そうなので、以下の方法が良いかと…

  1. XHTMLのテンプレートを開く(C:\Documents and Settings\ユーザー名\Local Settings\Application Data\FlashDevelop\Templates\XHTML.fdt)
  2. en→jaに変更しておく
  3. 他にも必要そうなものを、追加しておく
  4. テンプレートを保存

新規ファイル→XHTMLで作成されたファイルを元に、zen-codingを。

スニペットと併用する

XHTMLでもFlashDevelopのスニペットが使えるので、zen-codingとスニペットを併用すると、楽チンかと。

FlashDevelopのツール>コードスニペットの編集を選択します。

スニペット名をgNaviとかにして、登録するコードは、div#gNavi>ul>li*5>a$(EntryPoint) みたいな感じで書いておきます。

で、Ctrl + B or Ctrl+ Spaceを押して、gNaviのスニペットを挿入します。

div#gNavi>ul>li*5>a

すると、aタグの後ろにカーソルが立つので、もう一度Ctrl + B or Ctrl+ Spaceを実行します。

<div id="gNavi">
	<ul>
		<li>
			<a href=""></a>
		</li>
		<li>
			<a href=""></a>
		</li>
		<li>
			<a href=""></a>
		</li>
		<li>
			<a href=""></a>
		</li>
		<li>
			<a href=""></a>
		</li>
	</ul>
</div>

すると、こんな感じに変換してくれます。

クリップボードを使う

デモのビデオの中盤あたりに、選択したコードをdiv id =”wrapper”で囲むみたいなモノがあります。

ビデオではEnter abbreviationパネルにdiv#wrapperと打ち込むだけで、サクッとやってくれていますが、FlashDevelopをあれこれ触ってみたんですが、そのパネルは組み込まれていないっぽいです。

なので、とりあえずの打開策。(以下のコードをwrapperで括ることにします)

<ul id="navigation">
	<li class="item">
		<a href=""></a>
	</li>
	<li class="item">
		<a href=""></a>
	</li>
	<li class="item">
		<a href=""></a>
	</li>
	<li class="item">
		<a href=""></a>
	</li>
	<li class="item">
		<a href=""></a>
	</li>
</ul>

最初に、ツール>コードスニペットの編集を実行し、新規スニペットを作成します。

ClipBoard
$(Clipboard)

次に、divで括りたい箇所のコードを選択して、Ctrl + Xで切り取り(カット)しておきます。

で、次に、以下のコードを記述します。

div#header

記述した後は、Ctrl + B or Ctrl + Spaceを押して、変換しておきます。

<div id="wrapper">
	
</div>

次に、もう一度Ctrl + B or Ctrl + Spaceを押し、先程登録したスニペット(ClipBoard)を呼び出します。

すると、以下のような感じになります。

<div id="wrapper">
	<ul id="navigation">
		<li class="item">
			<a href=""></a>
		</li>
		<li class="item">
			<a href=""></a>
		</li>
		<li class="item">
			<a href=""></a>
		</li>
		<li class="item">
			<a href=""></a>
		</li>
		<li class="item">
			<a href=""></a>
		</li>
	</ul>
</div>

ここで、何故わざわざクリップボード用のスニペットを作成して、それを呼び出しているかと言うと、カット&ペーストだけの場合だと、インデントがきちんと反映されない場合があるからです。(以下はその例)

<div id="wrapper">
	<ul id="navigation">
	<li class="item">
		<a href=""></a>
	</li>
	<li class="item">
		<a href=""></a>
	</li>
	<li class="item">
		<a href=""></a>
	</li>
	<li class="item">
		<a href=""></a>
	</li>
	<li class="item">
		<a href=""></a>
	</li>
	</ul>
</div>

(カット&ペーストだと)後でインデントの修正するのが嫌だなぁ…と思っていたんですが、FlashDevelopの$(Clipboard)を使ってあげることで、この現象を回避することが出来ました。

CSSのzen-coding

現時点ではCSSのzen-codingには、対応していないみたいです。

Progression用FlashDevelopテンプレート、修正しました!


Progression4正式版、リリースされましたね!

それに伴い、以前作成したProgression用FlashDevelopテンプレートを修正しました。

テンプレートの詳しい使い方などは、以下のエントリをご覧下さい。

以前のものには、CommandListのテンプレートが入っていませんでしたので、新たに追加してあります。

ダウンロード

ダウンロードは以下からどうぞ

zipの方
こちらからダウンロード
svnの方
http://trac.progression.jp/svn/experiments/flabaka/FD_templates/Progression4

FlashDevelop3.1.0のリファクタリング


出ましたね。FlashDevelop3.1.0。

3.1.0から搭載された新しい機能などは、馬鹿全さんのエントリに詳しく書かれています。

何と言っても3.1.0の目玉は、メニューの日本語化ですよね!@matsumosさん、ありがとうございます~!

リファクタリングについて

さてさて、今までimport文をアルファベット順に並べるとかは、以下のような感じだったかと思います。

3.1.0からは、こんなことしなくて大丈夫!

自動的に並べ替えてくれる

例えば、こんなコードがあって…

package 
{
	import flash.display.MovieClip;
	import flash.display.Sprite;
	
	
	public class Main extends Sprite
	{
		var mc:MovieClip = new MovieClip();
	}
	
}

ここにTextFieldクラスを追加すると、今までならMovieClipのimport文の上に補完されました。

ですが、3.1.0だと…

package 
{
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.text.TextField;
	
	
	public class Main extends Sprite
	{
		var mc:MovieClip = new MovieClip();
		var tf:TextField = new TextField();
	}
	
}

このように、自動的にアルファベト順に並び替えてくれます。

import文を短縮したい!

先の例でいうと、MovieClipクラスとSpriteクラスを*でまとめて記述したい! という場合。

Refactor→Turncate Imports。日本語化している場合なら、リファクタ→importの短縮を行うと…

package 
{
	import flash.display.*;
	import flash.text.*;
	
	
	public class Main extends Sprite
	{
		var mc:MovieClip = new MovieClip();
		var tf:TextField = new TextField();
	}
	
}

こんな感じに、変換してくれますよ!

便利ですね~!

名前の変更

名前の変更の記述を忘れていたので、追記。

Mainクラス

package  
{
	import flash.display.Sprite;
	/**
	 * ...
	 * @author flabaka
	 */
	public class Main extends Sprite
	{
		
		public var str:String = "あいうえお";
		
		public function Main() 
		{
		}
		
		public function init():void
		{
			trace("ほげほげ")
		}
		
	}

}

Subクラス

package  
{
	/**
	 * ...
	 * @author flabaka
	 */
	public class Sub extends Main
	{
		
		public function Sub() 
		{
			init();
			str = "かきくけこ"
			trace(str);
		}
		
	}

}

FlashIDE側のドキュメントクラスには、Subと指定しておきます。

これを実行すると…

ほげほげ
かきくけこ

こんな感じになります。

で、Mainクラスの方の変数名strや、init()の関数名を変更したい! となった時、名前の変更(Rename)を使うと便利です。

変数strを選択した状態で、Refactor→Rename(リファクタ→名前の変更)を実行します。

新しい変数名を何にしますか? と聞かれるので、mystrとかにしてOKボタンを押します。

すると、Mainクラスの変数名(str)とSubクラスで使われているstrの両方を、リネームしてくれます。

関数名を変更する場合も、同じ手順です。initを選択した状態で、Refactor→Rename(リファクタ→名前の変更)。

MainクラスとSubクラスにある関数(init)の両方を、リネームしてくれます。

これまた、便利ですね。

Home > Archives > 2010-04

Search
Feeds
Meta

flashDevelopスポンサー

Return to page top