dreamweaverコードヒントhowto

DreamweaverコードヒントHowTo

前夜祭

1

Profile

2

丸山　章

mixi: http://mixi.jp/show_profile.pl?id=7200Twitter: @akira_marublog: http://dwlog.net/

岡山県出身鳥取在住のフリーランス。CSS Nite in OSAKAの実行委員もやってます。

3

DWテンプレートのあたりを詳細に書いてます。今のバージョンでも十分使えますよ。

本も書きました！共著ですが…

Dreamweaverプロフェッショナルスタイル

4

機能拡張作ってますDW テンプレートタグコードヒント機能拡張MT5 タグライブラリ機能拡張

他

コメントタグコードヒント機能拡張

5

要望などフィードバックお待ちしています。

6

Today's Agenda

7

コードヒントとは？コードヒントを表示させるためには？➡タグをコードヒントで出す➡タグ以外をコードヒントで出す補足まとめ

Today's Agenda

8

コードヒントとは？

9


Dreamweaverのコードビューでhtmlタグやcssなどの入力の際に表示される補完機能のこと。

<body

10


コードヒントの有無でコード入力の作業効率への影響大。

登録されていないものは表示されない。

11

コードヒントを表示させるためには？

12

　　で表示するために情報が登録されている必要がある。　

コードの種類により、登録する情報の場所が異なる。

13

コードの種類により、登録する情報の場所が異なる。

タグ　HTML5、MTタグなど→タグライブラリエディタ

それ以外　CSS、JavaScript、phpなど

→codehintフォルダ内（xml形式で）

14

タグをコードヒントで出す

15

属性も登録・変更可rel属性に、nofollowを追加するとか

コメントタグは登録できない

タグはタグライブラリエディタで登録する

16

その1環境設定　→　コードヒント

機能アクセス

ここをクリック

17

その2環境設定　→　コードフォーマット

機能アクセス


18

その3編集メニュー　→　タグライブラリ...

機能アクセス

19


タグライブラリエディタ

20

新しいタグ

◯：<tag></tag> ×：<tag />

タグの名前

どのタグライブラリに属するか？

21

新しい属性

どのタグに属するか？

どのタグライブラリに属するか？

登録する属性名

22

上で選択する項目によってここが変わる

タグライブラリ

タグ

タグ属性


23


タグライブラリの時タグを使用する言語を指定

タグの時コードフォーマットを指定

属性の時属性の大文字小文字、属性のタイプを指定

適切な選択がキモ

24


よく使う属性のタイプ

テキスト：任意の文字列挙：　　値を「 , 」で区切るカラー：　色指定（カラーパレット）相対パス：ファイル参照CssStyle：CSSのID・Classを指定

25

Demo

26

タグ以外をコードヒントで出す

27

タグ以外の設定はcodehint.xmlに格納されている

Mac OSX/Applications/Adobe Dreamweaver CS4/configuration/CodeHints/

WindowsC:¥Program Files¥Adobe¥Adobe Dreamweaver CS4 ¥configuration¥CodeHints

28

注意点など

xmlで定義されています。

タグと属性で構成されている。→htmlと考え方は同じ。コメントアウトもできる。

CodeHintフォルダに別ファイル(xxx.xml)で格納しておくとそれも適用される。→オリジナルは、安全のために極力触らない。

29

CSSをコードヒントで出してみよう

30

その前に基本構造を理解する

31

基本骨格<codehints xmlns:MMString="http://www.adobe.com/schemes/data/string/"><menugroup MMString:name="css_codehints_1" id="CodeHints_Style_Attributes"> <description> <MMString:loadString id="css_codehints_2" /> </description>

</menugroup></codehints>

この部分にコードヒント表示させたいものを定義

32

CSSコードヒントの基本形<menu pattern="hoge"> <menuitem label="表示される文字" value ="挿入される文字" /></menu>

hoge aaaaabbbbb

hoge確定後

ccccc

33

<menu>の属性

pattern属性入力した際にコードヒントで表示する出す文字列を指定。複数の文字列を同時に指定することができる。

text

34

<menu>の属性

patternseparator属性 pattern属性で複数文字列を指定する場合、仕切りとなる文字を指定。

text

pattern="aaa/bbb"patternseparator="/"

aaaまたはbbbが入力された時、コードヒントを出す

35

<menu>の属性

additionaldismisschars属性指定した文字が入力されたらコードヒントを消す。複数指定可。

text

additionaldismisschars=";:"" : "または" ; "が入力された時、コードヒントが消える

36

<menu>の属性

allowwhitespaceprefix属性空白が挿入されたらコードヒント表示を消すか否かを指定。デフォルトはfalse。

true / false

allowwhitespaceprefix="true"空白が入力されてもコードヒントは消えない。

37

aaaaabbbbb

<menu>の属性allowmultiplevalues属性空白挿入後、再度menuitemの値を入力できるかを指定。デフォルトはfalse。

true / false

allowmultiplevalues="true"

hoge aaaaabbbbb

空白入力でコードヒントが再び出る

38

<menu>の属性

type属性 font / color / url

特殊なコードヒントを表示する。

39

<menu>の属性

type属性 font / color / url

type="font"

フォントリストを表示

type="color"

選択後、カラーパレット表示

type="url"

選択後、ファイル参照ダイアログを表示

40

<menuitem>の属性

label属性コードヒント表示時に表示される文字

value属性確定後に挿入される文字

text

text

41

記述してみる

42

CSSプロパティを出す基本形

<menu pattern="hoge" displayrestriction="css"> <menuitem label="viewtext" value ="inserttext" /></menu>

43

CSSプロパティを出す考え方 ➡ " { "の入力の後に、コードヒントが表示される。

➡空白が入力されても消えない。

➡ " : " " } " の後に、コードヒントが消える。

44

CSSプロパティを出す

<menu pattern="{" allowwhitespaceprefix="true" additionaldismisschars=":}" displayrestriction="css"> <menuitem label="opacity" value ="opacity:" /></menu>

" { "でコードヒント表示

空白OK

" : "または" } "で消える

コードヒントで"opacity"が表示

確定後は"opacity:"

45

例：opacityの後に0.1～1を表示

考え方 ➡ " { "の入力後に、コードヒントで

"opacity"表示。確定文字は "opacity:"

➡ "opacity:"の入力後に、コードヒントで0.1、0.2…を表示。確定文字も同様。

プロパティ確定後にの特定値を出す

46


<menu pattern="{" allowwhitespaceprefix="true" additionaldismisschars=":}" displayrestriction="css"> <menuitem label="opacity" value ="opacity:" /></menu>

【 opacity表示用】

47


<menu pattern="opacity:" allowwhitespaceprefix="true" additionaldismisschars=":;" displayrestriction="css"> <menuitem label="0.1" value ="0.1" /> <menuitem label="0.2" value ="0.2" /></menu>

【数値表示用】

48

CSSセレクタを出す基本形

<menu pattern="hoge" doctypes="CSS"> <menuitem label="viewtext" value ="inserttext" /></menu>

大文字

49

CSSセレクタを出す

例：" @ "の後にimportを表示

<menu pattern="@" doctypes="CSS"> <menuitem label="@import" value ="import" /></menu>

50

Demo

51

補足

52

機能拡張として配布するためには？

パッケージ化するためにmxiファイルが必要同様にxml形式。mxpはExtensionManagerで作成。

mxiファイルの仕様http://help.adobe.com/en_US/ExtensionManager/2.0/mxi_file_format.pdf

53

まとめ

54

タグ系コードヒントはタグライブラリエディタで登録。

それ以外のコードヒントはxmlを編集する必要がある。

xmlの編集はタグと属性を理解すればhtmlライクに編集出来る。

55

明日も話します

56

HTML5 タグライブラリ機能拡張

CSS3コードヒント機能拡張

CSSセレクタコードヒント機能拡張

57

ありがとうございました。

58

dreamweaverコードヒントhowto

Software