Home > Web

Web Archive

新しいブログを始めました!


こっそりと新しいブログを始めました!

ブログタイトルからも分かるかと思いますが、WebStromに関する個人的なメモです。

WebStormは以前、東京てら子で(バージョンが1.0の時)サラッとデモしたことがあります。

その後バージョンが2.0にあがり、どんな感じになったのかを検証する意味合いも含め、個人ライセンスを購入してみました。

今なら半額セールをやっているので、お得かと思います。

WebStromのサイトはがっつり英語(DLできるPDFも英語)ですし、Google先生にお世話になろうにも日本語のブログもまだそんなにないことから、ちょっと始めてみました。

最初はゆる〜いネタばかりを投稿していくことになるかと思いますが…

WebStormに関する情報を、共有出来ればと思っています。

という訳で、宜しくお願いします。

Pixel Bender Plug-in for Adobe Photoshop CS5

  • 2010-09-03 (金)
  • Web

Pixel Bender Plug-in for Adobe Photoshop CS5

これは何かと言うと、Pixel Benderで作成したものを、Photoshop CS5のフィルタとして使えるようにすることが出来るプラグイン(mxp)ファイルです。

mxpはAdobe labsのPixel Benderのページからダウンロード出来ます。

使い方

Getting Startedの1にあるダウンロード先に進みます。

けど、このままだとダウンロードすることが出来ないんですね。

By downloading~の箇所にチェックを入れると、ファイルがダウンロード出来るようになります。お使いの環境に応じて、32Bit or 64Bitのmxpをダウンロードします。

次にExtension Manager CS5を使って、mxpをインストールします。

僕の環境はWindows7なんですが、普通にExtension Managerを起動して、mxpをインストールしようとすると、「管理者権限がありません」と怒られちゃいました!

そんなときは、Extension Managerを起動する際、右クリック→管理者として実行からExtension Managerを起動すると、mxpを無事インストール出来ました。

PhotoShopCS5を立ち上げる

mxpのインストールが終わったら、PhotoShopCS5を起動します。

すると、メニューのフィルターにPixel Benderという項目が追加されています。Pixel Bender→Pixel Bender Galleryを選択します。

リストから適当に選択してみます。

上記は、Pixel Benderのフォルダ内に入っているYellowFlowersという写真に、リスト内のOilPaintを適用させてみた例です。

ファイルを追加するには

C:\Program Files\Adobe\Adobe Photoshop CS5 (64 Bit)\Pixel Bender Files

僕の環境では上記のフォルダ内にPixel Benderのファイルが入っていました。

このフォルダ内に自分で作成したPixel Benderのファイル(.pbk)を入れてあげれば、それがPhotoShop側のリストに追加されるかと…

Pixel Benderで作ったものが、PhotoShopに持っていけて、何だか楽しそうなので、ちゃんとPixel Benderの勉強をしようかと…

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には、対応していないみたいです。

FlashDevelopでhaXeをやってみる


FlashDevelopで作成可能なプロジェクトには、大きく分けて以下のものがあります。

  • ActionScript3
  • ActionScript2
  • HaXe

以前から気にはなっていたんですが、このHaXeって何なの? と。

HaXeとは?

ここにいろいろ詳しく説明が書いてあります。

haXeはマルチプラットフォーム言語で、swfやjsやphpなどにコンパイル可能だと…

う~ん???

通常のAS3プロジェクトとどう違うのか、試してみました。

HaXeプロジェクトを作成する

FlashDevelopの新規プロジェクトから、HaXe→AS3Projectを選択。

そうすると、フォルダが二つ作成されます。

  • bin
  • src

srcフォルダ内のMain.hxファイルに、いろいろコードを記述していくことになります。

Main.hxファイルを開いてみると、こんなコードが書かれています。

package ;

import flash.Lib;

/**
 * ...
 * @author flabaka
 */

class Main 
{
	
	static function main() 
	{
		
	}
	
}

packageとかimport文とか、as3の記述とほぼ一緒。

何だか見慣れないLibとかいうクラスがありますが…

ベタですが、円を表示させてみることにします。

とりあえず、Spriteクラスをextends。

package ;

import flash.display.Sprite;
import flash.Lib;

/**
 * ...
 * @author flabaka
 */

class Main extends Sprite
{

と、コードを書いていたら、こんな表示が出てきました…

Haxeをちゃんとセットアップしてください! ってことですね。

FlashDevelop→F10(Settings)→HaXeContentを選択します。

HaXe Pathの箇所には、こう書かれています。

C:\Program Files\Motion-Twin\haxe

で、CドライブのProgram Filesを見ても、そんなフォルダは存在していないと…

どうやらhaXeをインストールしないと駄目みたい…

haXeをインストールする

haXeのインストールはここから出来ます。

一番上のWindows用インストーラーをダウンロードしてきます。

ダウンロードしてきたhxinst-win.exeをダブルクリック。

すると、インストーラーが起動します。

インストールしますか? と聞かれるので、「はい」を選択します。

インストールが終わると、CドライブのProgram Filesフォルダ内にMotion-Twinフォルダが作成されます。

これで完了~! と思ったんですが、先のエラーダイアログがまだ出てきます。

僕の環境はWindows7なんですが、Program FilesとProgram Files(×86)のフォルダがあって、先のMotion-TwinフォルダはProgram Files(×86)フォルダ内に作成されていました。

そこでFlashDevelopのSettingsのHaXe Pathのパスを、C:\Program Files\Motion-Twin\haxe→C:\Program Files (×86)\Motion-Twin\haxeに変更。

すると、エラーが表示されなくなりました。

package ;

import flash.display.Sprite;
import flash.Lib;

/**
 * ...
 * @author flabaka
 */

class Main extends Sprite
{
	
	static function main() 
	{
		var sp:Sprite  = new Sprite();
		sp.graphics.beginFill(0);
		sp.graphics.drawCircle(50, 50, 50);
		sp.graphics.endFill();
		addChild(sp);
	}
	
}

で、いつものようにこんなコードを書いてBuild Projectをすると、また怒られた!

characters 2-10 : Unknown identifier : addChild

で、マニュアルにあるサンプルコードを見ると、addChildの箇所は、こんな感じで書かれています。

flash.Lib.current.addChild(●●);

なので、先のコードのaddChildの箇所を変更。

package ;

import flash.display.Sprite;
import flash.Lib;

/**
 * ...
 * @author flabaka
 */

class Main extends Sprite
{
	
	static function main() 
	{
		var sp:Sprite  = new Sprite();
		sp.graphics.beginFill(0);
		sp.graphics.drawCircle(50, 50, 50);
		sp.graphics.endFill();
		flash.Lib.current.addChild(sp);
	}
	
}

これで再びBuild Projectを行うと、円が表示されました。

う~ん、何だかしっくりこないけど、まずはこんなとこで。

ホーム > Web

Search
Feeds
Meta

flashDevelopスポンサー

Return to page top