インスペクタ
2000/02/27
=====================================================[ No.05 2000/02/27 ]==
Dreamweaver Programming < インスペクタ >
[ BACK NUMBER ]
http://www2s.biglobe.ne.jp/~tomoChan/dreamweaver/mail/
===========================================================================
◆Mac World Expo
===========================================================================
Windowsしか使ったことがないのに、行ってきました。仕事で行ったわけでなかった
ので自由に行動してました。途中時間があったので、マクロメディアのブースで、
デモをすることになりました。Macを使ったことがなかったので、デモとしては最低
の結果になりました。説明しようと思っても使い方がわからないので、どうしようも
ない状態でした。(^^;Macを使えるようになって来年参加したいです。
◆新作コマンド
===========================================================================
前回のメールマガジン発行後から追加したコマンドです。
URLText.htm
HTMLドキュメント上にURL,メールアドレスを検索し、リンクを設定するコマンドファ
イル
http://www2s.biglobe.ne.jp/~tomoChan/dreamweaver/dream/command/URLText.htm
◆今後の発行について
===========================================================================
いろいろな方と話を聞いているとカスタマイズするより、カスタマイズをしたものを
使う方が多いようです。そこで、カスタマイズの説明はそこそこにして、僕が作った
コマンド、ビヘイビア等の説明を行っていこうと思っています。次の号でカスタマイ
ズについての説明は終わります。
◆質問が来ました
===========================================================================
Dreamweaverのカスタマイズで質問のメールが届きました。回答はここで行うことを
許可していただいたのでここで返事を行います。
%gt; objectの中に、「テーブル」の項目がありますが、デフォルトで設定できる項目
%gt; に、「CAPTION」タグを挿入したいのです。私の場合、通常テーブルにはタイトル
%gt; が付きますので、captionもダイアログ上で記述できれば、効率がいいのです。
%gt; いろいろいじってみようと思ったのですが、JavaScriptのコマンドがわからなくて
%gt; 挫折してしまいました。
%gt;
%gt; もしよろしければ、ダイアログのフォームで記入した「タイトル」を、
%gt; HTML上に反映させるJavaScriptをご存じなら、教えていただけないでしょうか。
まず、テーブルを設定するときにcaptionを挿入できるようにするにはオブジェクト
を修正します。
Configuration/Objects/Common/Table.htm
Configuration/Objects/Common/Table.js
Table.htmに、captionの内容を設定するテキストフィールドを追加します。
54行目以降に以下の内容を追加してください。
<tr>
<td aligin="right" valign="baseline" nowrap>キャプション:</td>
<td valign="baseline" nowrap colspan="3">
<input type="text" name="Caption" size="20">
</td>
</tr>
これで、captionを設定するフィールドが追加されます。
次にキャプションの内容をテーブルを設定する際に追加するように、Table.jsを
編集します。
19行目に
var Caption = document.forms[0].Caption.value;
を追加し
58行目の
openTag += '%gt;' + tableContent;
部分を
if( Caption.length %gt; 0 )
openTag += '%gt;' + '<caption%gt;' + Caption + '<\/caption%gt;' + tableContent;
else
openTag += '%gt;' + tableContent;
と修正します。
これで、captionが追加されるようになりました。
これで理解していただいたでしょうか？＞質問された方
今回のように疑問を感じたことがありましたら、メールを下さい。採用できる
質問なら答えようと思っています。
◆インスペクタ
===========================================================================
上の例では変更点はテキストのみでタグに関する属性はないので、インスペクタを
必要としませんが、タグの属性を編集できるようにする場合はインスペクタを定義
します。
Configuration/Inspectorにインスペクタの設定ファイルが格納されています。
この中にあるTitle.htmを参考にインスペクタがどのように実装されているかを説明
します。
Title.htmは名前のとおり、ページのタイトルのインスペクタの編集に使うファイル
です。Title.htm、Title.js、Title.gifの３つのファイルで構成されています。
GIFファイルはヘッドコンテンツの場合、上の部分にアイコンとして表示されます。
他にも、外部JSファイルで_pi_common.jsを読み込んでいます。これは、プロパティ
インスペクタ用によく使う関数を集めたJSファイルです。
最初に_pi_common.jsの内部を説明します。含まれる関数は、
function docBase()
現在のドキュメントパスを返します。普通dw.getDocumentPath()を呼び出すと、
ファイル名を含んだ形が返されるのですが、この関数を使うとファイル名を取り
除いた形で返してくれます。
function findObject(objName, parentObj)
parentObjが指定されていると、parentObj中からobjNameの名前がついたオブジェ
クトを検索し返します。指定されていない場合はダイアログのドキュメントから
検索します。
function getSelectedObj()
現在選択されているオブジェクトを返します。
この関数は連続して選択していない場合か、またはテーブル中の２つ以上セルの
選択を考慮していません。
function showHideTranslated()
選択したオブジェクトがトランスレートされたコードを含むかどうか調べ、インスペ
クタ上のトランスレータアイコンを表示・非表示にします。
function launchQuickTagEditor( forTranslationIcon )
クリックタグエディタを起動します。トランスレータアイコンをクリックして呼び
出したかどうかをforTranslationIconにセットします。
となっています。よく使うのは、getSelectedObj()関数とfindObject()関数です。
インスペクタ内部を見ましょう。Title.htmです。
一番最初の行に、コメントがあります。このファイルがどのようなインスペクタか
を示します。
<!-- tag:TITLE,priority:5,selection:within,vline,hline --%gt;
tag:
インスペクタが認識するタグの種類です。他にはトランスレータ、コメントASPが
あります。
priority:
インスペクタの優先度です。大きいほど優先度が高くなります。
selection:
インスペクタの対象となる場合に、タグを完全に含んだ状態か、タグ内部でいいか
を指定します。
vline:
インスペクタにはアイコンが表示されますが、この部分に縦のラインを表示するか
どうか指定します。vlineと書くと表示されます。
hline:
インスペクタで上下の分割ラインを表示するかどうか指定します。hlineと書くと
表示されます。
インスペクタを機能させるには、いくつかのJavaScript関数を用意する必要があり
ます。
function canInspectSelection() -- Title.js(11)
選択したオブジェクトが、インスペクタの対象となるかどうかを調べます。
同じタグでも属性値で違うインスペクタを使う場合に使います。
例えば、FlashとDirector表示するにはObjectタグを使いますが、同じインスペ
クタではまずいので、clsIDを見て判断します。
インスペクタを表示するときにどのようなフィールドを決めなければなりません。
BODY内に入力フォームを用意しなければなりません。Title.htmはレイヤー内にフォ
ームを設定していますが、必要なのは、トランスレートされたオブジェクトのアイ
コン表示するレイヤーだけで後は、自由にレイアウトしてかまいません。だいたい、
表示部分は、HTMLから-3ピクセルほどずれるので、レイヤーでレイアウトするほう
が見栄えはいいです。 -- Title.htm
入力フォームができれば、今度は選択されたオブジェクトの属性をセットする必要
があります。
function inspectSelection() -- Title.js(19)
この関数内で、選択されたオブジェクトから属性値を抜き出し、フォームのフィール
ドにセットします。
次に入力されたデータを反映させる場合は、入力フィールドのフォーカスが離れた
場合に更新するように onBlurのイベントを各フィールドに設定し自動的に更新
するようにします。
function setTitleTag() -- Title.js(31)
<input type="text" name="Title" size="57" onBlur="setTitleTag()"%gt;
-- Title.htm(21)
とこのようにインスペクタはできています。ビヘイビアや、コマンドと比べて
簡単に作れると思います。
かなり駆け足だったかもしれませんが(^^;、これでインスペクタの説明は終わりま
す。本当はトランスレートされたオブジェクトのやり取りもいろいろとあるのです
が、詳しい部分はテンプレートライブラリのコードを見てください。
http://www2s.biglobe.ne.jp/~tomoChan/dreamweaver/tomoLib/
◆あとがき
===========================================================================
発行が一日遅れてしまい申し訳ありません。来週、出産のために実家に戻っていた
嫁さんと赤ちゃんが戻ってくるので掃除、買出しと時間が取れなくなかったのです。
すみません。次回の発行予定は、３月１８日でコマンドの解説となります。
==========================================================================
Dreamweaver Programming
発行、編集： 植木 友浩
登録、解除： http://www2s.biglobe.ne.jp/~tomoChan/dreamweaver/mail/
注意： 記載された情報は各人の責任においてご利用ください。
この記事により生じるいかなる損害についても責任は
負いかねますのでご了承ください。
Copyright(C) 2000. Tomohiro Ueki. All rights reserved.
===============================================[ Magazine ID: 0000021775 ]=
Thank you!
---------------------------------------------------------------------------
このメールマガジンは、インターネットの本屋さん『まぐまぐ』を利用して
発行しています。( http://www.mag2.com/ )
---------------------------------------------------------------------------
