Home > Web
Web Archive
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の勉強をしようかと…
- Comments: 0
- Trackbacks: 0
FlashDevelop3.1.0のプロファイラが表示されない
- 2010-04-27 (火)
- FlashDevelop | Web
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を再起動してみると…
プロファイラがリストに表示されました。
リストメニューにプロファイラが表示されない（上書きが上手くいかない）場合は、上記の手順をお試しください！
- Comments: 0
- Trackbacks: 0
FlashDevelopでzen-coding
- 2010-04-23 (金)
- FlashDevelop | Web
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">
真っ新な状態からだと、何かと面倒そうなので、以下の方法が良いかと…
- XHTMLのテンプレートを開く（C:\Documents and Settings\ユーザー名\Local Settings\Application Data\FlashDevelop\Templates\XHTML.fdt）
- en→jaに変更しておく
- 他にも必要そうなものを、追加しておく
- テンプレートを保存
新規ファイル→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には、対応していないみたいです。
- Comments: 0
- Trackbacks: 0
FlashDevelopでhaXeをやってみる
- 2010-04-19 (月)
- FlashDevelop | Web
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を行うと、円が表示されました。
う～ん、何だかしっくりこないけど、まずはこんなとこで。
- Comments: 0
- Trackbacks: 1
a-blog cmsでgoogle-code-prettifyを使ってみる
google-code-prettifyをa-blog cmsで試してみました。
導入方法は、SyntaxHighlighterのときとほぼ一緒です。
ダウンロードしてくる
google-code-prettifyをダウンロードしてきます。
ちなみにですが、google-code-prettifyはApache License 2.0となっております。
zipを展開しておいて、フォルダ名をprettifyみたいにしておきます。
index.htmlに追記・1
使用中のテーマのindex.htmlに、以下を追記します。
<script type="text/javascript" src="prettify/prettify.js"></script> <link rel="stylesheet" type="text/css" href="prettify/prettify.css" />
cssとかsqlとかの場合は、別途フォルダ内のjsを読み込んであげます。
index.htmlに追記・2
マニュアルみたいなのには、bodyタグの所にonload=”prettyPrint()”って書いてね！ とあります。
a-blog cmsはjQueryが使える状態になっているので、今回は以下のようにしてみました。
<script type="text/javascript" src="prettify/prettify.js"></script>
<script type="text/javascript">
$(function(){
prettyPrint();
})
</script>
<link rel="stylesheet" type="text/css" href="prettify/prettify.css" />
テーマフォルダにアップロード
使用中のテーマフォルダ内に、prettifyフォルダ＆index.htmlファイルをアップロードします。
a-blog cms側の設定
a-blog cmsにログインして、管理ページ>カスタマイズ管理>コンフィグ>（エントリーの）編集設定に移動します。
テキストタグセレクトの箇所に、prettify用のタグを追記します。
- タグ
- pre.prettyprint
- ラベル
- prettyprint
ここまで終わったら、保存ボタンを押しておきます。
あとはエントリの際に、prettyprintを選択してあげればOKです。
マニュアルみたいなのには、ASは対応していないと書かれていたんですが、試してみたら、意外といい感じになってくれました。（javaやmxmlはOKだから？）
カラーを変更したい！ とかは、prettify.cssを編集すればいいんじゃないかと…
個人的にはSyntaxHighlighterの方が好きなんですが、google-code-prettifyでも（割と）いい感じになるということで…
- Comments: 0
- Trackbacks: 0
ホーム > Web
- Search
- Feeds
- Meta