Dreamweaver API で拡張してみるDreamweaver

やす | 2009年11月19日 18:09

先日 Dreamweaver の拡張について調べてみたので少しまとめてみます。

1. 内部構造

Dreamweaver のコマンドはほとんどが HTML と JavaScript で構成されていて、
その一覧はこの XML に定義されてます。

C:\Program Files\Adobe\Adobe Dreamweaver CS3 \configuration\Menus\menus.xml

私は「コマンド」＞「ソースフォーマットの適用」をよく使うので調べてみるとこのように記述されてました。

これを実際に開いてみると

configuration\Commands\Apply Source Formatting.htm

<HTML>
<HEAD>
<TITLE>ソースフォーマットの適用</TITLE>
<SCRIPT LANGUAGE="javascript" SRC="Source Formatting.js"></SCRIPT>
</HEAD>
<BODY onLoad="formatSource()" >
</BODY>
</HTML>

「ソースフォーマットの適用」の実体はこのSourceFormatting.jsのようです。

configuration\Commands\Source Formatting.js

2. mxp ファイルを作ってみる

オリジナルの便利な機能が出来たら配布したくなりますよね。
拡張用ファイルとしておなじみの mxp ファイルの作成には、
基本的なことが定義された mxi ファイルと処理の実体が書かれた html が必要です。

mxi ファイルについては以下のサンプルを参照、処理は自分で書いて頂くとして
その2つが出来たら Adobe Extension Manager を開き、「ファイル」＞「拡張機能の作成」
から mxi ファイルを読み込めば mxp ファイルが生成されます。

<?xml version="1.0" encoding="iso-x-sjis" ?> <macromedia-extension name="サンプルコマンド" version="1.0.0" type="command">
<author name="Yasu" />

<products>
<product name="Dreamweaver" version="9" primary="true" />
</products>

<description>
<![CDATA[
説明
]]>
</description>

<ui-access>
<![CDATA[
説明
]]>
</ui-access>

<license-agreement>
<![CDATA[

]]>
</license-agreement>

<files>
<file source="sample.html" destination="$dreamweaver/configuration/commands" />
</files>

<configuration-changes>
</configuration-changes>
</macromedia-extension>

mxi についてより詳しく知りたい方はこちらへ。
http://help.adobe.com/ja_JP/ExtensionManager/2.0/extensionmanager_cs4_help.pdf

3. その他

上記の mxp をインストールしてみると、実体の html が以下に保存されます。

C:\Documents and Settings\Yasu\Application Data\Adobe\Dreamweaver 9\Configuration\Commands

API を色々と試したい時はここをテスト環境として使えますね

なお、拡張機能をリロードしたい時は以下の画像のように挿入パネルの「メニューと
して表示」をクリック、Ctrl を押しながら「一般」をクリックすることで出来ます。
Ctrl を押さないと「拡張機能のリロード」が表示されない、ってのが裏技っぽいですね

そしてこんな感じでメニューに追加されるので、
色々とカスタマイズして遊んでみてください。

もっと詳しく知りたい人はこちらのマニュアルがオススメです。

1. 「ヘルプ」＞「Dreamweaver API リファレンス」

2. http://www.adobe.com/support/documentation/jp/dreamweaver/

| 個別ページ | comments(0) | trackbacks(0) |

DreamweaverでCakePHPの.ctpファイルを色づけして表示する方法Dreamweaver

水口翼 | 2009年11月18日 15:53

CakePHPの1.2系から拡張子が「.ctp」へ変更されていますが。基本的にはPHPで書いてあったりするのでDreamweaverのタグ表示は色分けをしたい所です。（そもそもDreamweaverCS4では初期設定で開ける拡張子ですらない）

.ctpファイルを色づけして表示する方法

Dreamweaverの設定変更ではお馴染みのconfigurationの変更を行います。
以下はDreamweaverCS4の場合です。バージョンにあわせてパスは変更して下さい。

C:\Documents and Settings\ユーザー名\Application Data\Adobe\Dreamweaver CS4\ja_JP\Configuration\Extensions.txt

（たぶん）1行目の拡張子一覧にCTPを追加

HTM,HTML,SHTM,SHTML,HTA,HTC,XHTML,STM,SSI,JS,AS,ASC,ASR,XML,XSL,XSD,DTD,XSLT,RSS,RDF,LBI,DWT,ASP,ASA,ASPX,ASCX,ASMX,CONFIG,CS,CSS,CFM,CFML,CFC,TLD,TXT,PHP,PHP3,PHP4,PHP5,CTP,JSP,WML,TPL,LASSO,JSF,VB,VBS,VTM,VTML,INC,SQL,JAVA,EDML,MASTER:All Documents

（たぶん）16行目のPHPファイル一覧にCTPを追加

PHP,PHP3,PHP4,PHP5,CTP,TPL:PHP Files

それが出来たらDocumentTypeの追加で

C:\Documents and Settings\ユーザー名\Application Data\Adobe\Dreamweaver CS4\ja_JP\Configuration\DocumentTypes\MMDocumentTypes.xml

の75目あたりを

<documenttype id="PHP_MySQL" servermodel="PHP MySQL" internaltype="Dynamic" winfileextension="php,php3,php4,php5,ctp" macfileextension="php,php3,php4,php5,ctp" file="Default.php" writebyteordermark="false">

に変更。

これでDreamweaverを再起動すれば無事表示されるはずです。

※ちなみにDocumentTypeのフォルダがConfigurationの中に無い場合はインストールフォルダ（Program Files）の中にあるはずです。C:\Program Files\Adobe\Adobe Dreamweaver CS4\configuration\DocumentTypes とかですね。

| 個別ページ | comments(0) | trackbacks(0) |

Fireworksでブレたり、ボケてしまった矩形のエッジを簡単に元に戻す方法Fireworks

ぴんしゃん | 2009年11月17日 18:12

こんにちは、ぴんしゃんです。

今回もFireworksのお話です。

日々お世話になっているありがたいソフトですが、
「え、なんで？」と思うようなバグに出くわすことがあります。
今回はそんなバグの解決方法を一つご紹介します。

ボケたりブレたりしたエッジの直し方

角丸の矩形を作って整列で移動したときに
下記のようにエッジや線が絶妙なかんじでブレてしまうことがよくあります。

こんなときは元に戻って整列を使わずに移動したり、
「角丸じゃなければ...」と無駄なことを思ったりしていたのですが、
下記のようにすれば簡単にエッジのブレを直すことができます。

プロパティの中の幅を1pxほど大きくします。
そしてすぐにまた元の幅に戻します。

ぼやけたエッジが再びシャープに！
あーよかった (・∀・)

| 個別ページ | comments(0) | trackbacks(0) |

印刷用スタイルシート（print.css）についてHTML + CSS

ぐーちゃん | 2009年11月11日 11:00

印刷用CSSを作成することで下記の様なことができます

印刷時に不必要だと思われるところを消す
文字サイズを大きくし、読みやすくする
文字間隔を適度に開けておいて、読みやすくしておく。

headの中に media="print" を記述

まずはheadの中に下記を記述します。
<link rel="stylesheet" href="print.css" type="text/css" media="print" />

media="print"とは
media属性を加えることで、ページを見る環境によってスタイルシート
を切り替えることが可能です。
media="all"【全ての環境で適用】
media="print"【印刷するときに適用】

print.cssを作成

print.css作成し、下記を最低限指定しておきましょう

例
#globalNavigation＝ナビゲーション
#sidebar＝サイドメニューなど
#ad＝広告等
#main＝コンテンツ内容

body {
    font-size: 12pt;
    color: #000000;
    background-color: #FFFFFF;
}

a:link,
a:visited {
    text-decoration: underline;
    color: #000000;
}

img {
    border: 0;
}

#globalNavigation,
#sidebar,
#ad {
    display: none;
}

#wrapper,
#contents,
#main{
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

その他については必要に応じて表示したくない物にdisplay: none;を指定してあげたり、ロゴの位置を調整するなどしてみてください。

| 個別ページ | comments(0) | trackbacks(0) |

フラクタルノイズの雲Flash

啄木鳥 | 2009年11月 9日 13:01

こんにちは。逆から読んでもきつつきです。

最近、やっとFLASHに目覚め初めています。
そんなわけで今回はActionScript3.0の話題ですが、勉強中の適当なサンプルを掲載しても面白くないので、学生時代に一度書いたことのあるフラクタルノイズの雲をAS3で書いてみました。

読み込むたびに模様が変わります。

以下、サンプルコードです。

    package
    {
        import flash.display.*;
        import flash.events.*;
        import flash.geom.*;
        import flash.utils.Timer;

        [SWF(backgroundColor="#3333cc", frameRate="60",width="128",height="128" )]
        /**
        * ...
        * @author 啄木鳥@cybridge.jp
        */
        public class Main extends Sprite
        {
            public const SIZE:Number = 128;
            public var screen:BitmapData;

            public var CloudData:Array;        // 濃度
            public var CloudDataD:Array;    // 乱数テーブル

            public function Main():void
            {
                if (stage) init();
                else addEventListener(Event.ADDED_TO_STAGE, init);
            }

            private function init(e:Event = null):void
            {
                removeEventListener(Event.ADDED_TO_STAGE, init);
                // entry point

                // 背景色との加算合成
                this.blendMode = BlendMode.ADD;

                // BitmasDataの初期化
                screen = new BitmapData( stage.stageWidth, stage.stageHeight, true, 0xFF000000 );
                addChild( new Bitmap( screen ) );

                // 雲データの初期化
                initCloud();

                // 描画
                renderCloudData();
            }

            private function initCloud():void {

                // 配列の確保＋乱数テーブルの作成
                CloudData = new Array(SIZE + 1);
                CloudDataD = new Array(SIZE + 1);

                var i:int;
                var j:int;
                for (i = 0; i < SIZE + 1;++i)
                {
                    CloudData[i] = new Array(SIZE + 1);
                    CloudDataD[i] = new Array(SIZE + 1);

                    for (j = 0; j < SIZE + 1;++j) {
                        CloudDataD[i][j] = (Math.random()*2-1.0);
                    }
                }

                // 乱数テーブルから雲データの作成
                updateCloud();
            }

            private function updateCloud():void{

                // 初期の4点を求める

                CloudData[0][0] = CloudDataD[0][0] * SIZE ;
                CloudData[0][SIZE] = CloudDataD[0][SIZE] * SIZE ;
                CloudData[SIZE][0] = CloudDataD[SIZE][0] * SIZE ;
                CloudData[SIZE][SIZE] = CloudDataD[SIZE][SIZE] * SIZE ;

                // 再帰処理で残りの点を求める
                updateCloud_r(SIZE / 2);
            }

            private function updateCloud_r(level:int):void {

                // 再帰処理脱出
                if (level == 0)
                {
                    return;
                }

                var i:int;
                var j:int;

                // 前に計算した4点の中間点を求める
                for (i = level; i < SIZE; i += level*2 )
                {
                    for (j = level; j < SIZE; j += level*2 ) {
                        CloudData[i][j] = (CloudData[i - level][j - level] + CloudData[i - level][j + level] + CloudData[i + level][j - level] + CloudData[i + level][j + level]) / 4 + (CloudDataD[i][j] * level);
                    }
                }

                // 前に計算した2点と↑で計算した2点から中間点を求める
                var count:int;
                var c:Number;

                for (i = level; i < SIZE; i += level * 2 ) {
                    for (j = 0; j < SIZE + 1; j += level * 2 )
                    {
                        count = 0;
                        c = 0;
                        if (checkPoint(i - level, j)) {
                            ++count;
                            c += CloudData[i - level][ j];
                        }

                        if (checkPoint(i + level, j)) {
                            ++count;
                            c += CloudData[i + level][ j];
                        }

                        if (checkPoint(i, j - level)) {
                            ++count;
                            c += CloudData[i][ j - level];
                        }

                        if (checkPoint(i, j + level)) {
                            ++count;
                            c += CloudData[i][ j + level];
                        }

                        CloudData[i][j] = c / count + (CloudDataD[i][j] * level);
                    }
                }

                for (i = 0; i < SIZE + 1 ; i += level * 2 )
                    for (j = level; j < SIZE; j += level * 2 ) {
                    {
                        count = 0;
                        c = 0;

                        if (checkPoint(i - level, j)) {
                            ++count;
                            c += CloudData[i - level][ j];
                        }

                        if (checkPoint(i + level, j)) {
                            ++count;
                            c += CloudData[i + level][ j];
                        }

                        if (checkPoint(i, j - level)) {
                            ++count;
                            c += CloudData[i][ j - level];
                        }

                        if (checkPoint(i, j + level)) {
                            ++count;
                            c += CloudData[i][ j + level];
                        }

                        CloudData[i][j] = c / count+ (CloudDataD[i][j]*level);
                    }
                }

                // 再帰呼び出し
                updateCloud_r(level / 2);
            }

            // 座標が適切かどうか調べる
            private function checkPoint(i:int, j:int):Boolean
            {
                if (0 <= i && i < SIZE + 1 && 0 <= j && j < SIZE + 1) {
                    return true;
                }

                return false;
            }

            // レンダリング
            private function renderCloudData():void
            {
                var i:int;
                var j:int;
                var c:int;
                var c_max:Number;
                var c_min:Number;
                var d:Number;

                c_max = CloudData[0][0];
                c_min = -CloudData[0][0];


                for (i = 0; i < SIZE;++i) {
                    for (j = 0; j < SIZE;++j ) {
                        c_max = Math.max(c_max, CloudData[i][j]);
                        c_min = Math.min(c_min, CloudData[i][j]);
                    }
                }

                d = c_max - c_min;

                screen.lock();

                for (i = 0; i < SIZE;++i) {
                    for (j = 0; j < SIZE;++j ) {
                        c = 255 * (CloudData[i][j] - c_min) / d;
                        screen.setPixel32(i, j, (0xff000000 | (c<<16) | (c<<8) | c ));
                    }
                }

                screen.unlock();
            }
        }

    }

初期4点をランダムに求めたあと、その4点の中間点を、4点の濃度値の平均＋ノイズで求め、そこからさらに4点を使って別の点を求め、・・・と再帰的に処理を行っていきます。
乱数をテーブル化しているのは次回への布石です。次回は雲を徐々に変化させます。

| 個別ページ | comments(0) | trackbacks(0) |

サイブリッジラボ

サイブリッジラボです。プログラマとデザイナーのノウハウを公開中!!

Dreamweaver API で拡張してみるDreamweaver

1. 内部構造

2. mxp ファイルを作ってみる

3. その他

タグ:

DreamweaverでCakePHPの.ctpファイルを色づけして表示する方法Dreamweaver

.ctpファイルを色づけして表示する方法

タグ:

Fireworksでブレたり、ボケてしまった矩形のエッジを簡単に元に戻す方法Fireworks

ボケたりブレたりしたエッジの直し方

タグ:

印刷用スタイルシート（print.css）についてHTML + CSS

headの中に media="print" を記述

print.cssを作成

タグ:

フラクタルノイズの雲Flash

タグ:

サイブリッジラボ

月別アーカイブ

タグクラウド

カテゴリ

サイブリッジスタッフ

検索

ラボ的メディア

最近のブログ記事

最近のコメント

社内風景ライブカメラ

サイブリッジラボ

サイブリッジラボです。プログラマとデザイナーのノウハウを公開中!!

Dreamweaver API で拡張してみるDreamweaver

1. 内部構造

2. mxp ファイルを作ってみる

3. その他

タグ:

DreamweaverでCakePHPの.ctpファイルを色づけして表示する方法Dreamweaver

.ctpファイルを色づけして表示する方法

タグ:

Fireworksでブレたり、ボケてしまった矩形のエッジを簡単に元に戻す方法Fireworks

ボケたりブレたりしたエッジの直し方

タグ:

印刷用スタイルシート（print.css）についてHTML + CSS

headの中に media="print" を記述

print.cssを作成

タグ:

フラクタルノイズの雲Flash

タグ:

サイブリッジラボ

月別 アーカイブ

タグクラウド

カテゴリ

サイブリッジスタッフ

検索

ラボ的メディア

最近のブログ記事

最近のコメント

社内風景ライブカメラ

月別アーカイブ