Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Dreamweaver
コードヒントHowTo
前夜祭
1
Profile
2
丸山 章
mixi: http://mixi.jp/show_profile.pl?id=7200
Twitter: @akira_maru
blog: http://dwlog.net/
岡山県出身
鳥取在住のフリーランス。
CSS Nite...
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/
Windows
C:¥Program Fil...
注意点など
xmlで定義されています。
タグと属性で構成されている。
→htmlと考え方は同じ。コメントアウトもできる。
CodeHintフォルダに別ファイル(xxx.xml)
で格納しておくとそれも適用される。
→オリジナルは、安全のために極...
CSSをコードヒントで
出してみよう
30
その前に基本構造を
理解する
31
基本骨格
<codehints xmlns:MMString="http://www.adobe.com/
schemes/data/string/">
<menugroup MMString:name="css_codehints_1"
id...
CSSコードヒントの基本形
<menu pattern="hoge">
<menuitem label="表示される文字"
value ="挿入される文字" />
</menu>
hoge aaaaa
bbbbb
hoge
確定後
ccccc
...
<menu>の属性
pattern属性
入力した際にコードヒントで表示する
出す文字列を指定。
複数の文字列を同時に指定することが
できる。
text
34
<menu>の属性
patternseparator属性
pattern属性で複数文字列を指定する
場合、仕切りとなる文字を指定。
text
pattern="aaa/bbb"
patternseparator="/"
aaaまたはbbbが
入...
<menu>の属性
additionaldismisschars属性
指定した文字が入力されたらコード
ヒントを消す。複数指定可。
text
additionaldismisschars=";:"
" : "または" ; "が入力された時、
コ...
<menu>の属性
allowwhitespaceprefix属性
空白が挿入されたらコードヒント表示を
消すか否かを指定。デフォルトはfalse。
true / false
allowwhitespaceprefix="true"
空白が入力...
aaaaa
bbbbb
<menu>の属性
allowmultiplevalues属性
空白挿入後、再度menuitemの値を
入力できるかを指定。
デフォルトはfalse。
true / false
allowmultiplevalues="...
<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...
例:opacityの後に0.1∼1を表示
考え方
➡ " { "の入力後に、コードヒントで
"opacity"表示。確定文字は "opacity:"
➡ "opacity:"の入力後に、コードヒントで
0.1、0.2…を表示。確定文字も同様。
...
プロパティ確定後に
の特定値を出す
<menu pattern="{"
allowwhitespaceprefix="true"
additionaldismisschars=":}"
displayrestriction="css">
<me...
プロパティ確定後に
の特定値を出す
<menupattern="opacity:"
allowwhitespaceprefix="true"
additionaldismisschars=":;"
displayrestriction="css...
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/
Extens...
まとめ
54
タグ系コードヒントは
タグライブラリエディタで登録。
それ以外のコードヒントはxmlを編集
する必要がある。
xmlの編集はタグと属性を理解すれば
htmlライクに編集出来る。
55
明日も話します
56
HTML5 タグライブラリ
機能拡張
CSS3コードヒント機能拡張
CSSセレクタコードヒント
機能拡張
57
ありがとうございました。
58
Upcoming SlideShare
Loading in …5
×

Dreamweaver
コードヒントHowTo

1,285 views

Published on

CSS Nite in OSAKA Vol.20 前夜祭でお話したDreamweaverのコードヒントのカスタマイズについてのスライドです

Published in: Software
  • Be the first to comment

Dreamweaver
コードヒントHowTo

  1. 1. Dreamweaver コードヒントHowTo 前夜祭 1
  2. 2. Profile 2
  3. 3. 丸山 章 mixi: http://mixi.jp/show_profile.pl?id=7200 Twitter: @akira_maru blog: http://dwlog.net/ 岡山県出身 鳥取在住のフリーランス。 CSS Nite in OSAKAの 実行委員もやってます。 3
  4. 4. DWテンプレートのあたりを 詳細に書いてます。 今のバージョンでも十分 使えますよ。 本も書きました!共著ですが… Dreamweaver プロフェッショナル スタイル 4
  5. 5. 機能拡張作ってます DWテンプレートタグ コードヒント機能拡張 MT5 タグライブラリ 機能拡張 他 コメントタグコードヒント 機能拡張 5
  6. 6. 要望などフィードバック お待ちしています。 6
  7. 7. Today's Agenda 7
  8. 8. コードヒントとは? コードヒントを表示させるためには? ➡ タグをコードヒントで出す ➡ タグ以外をコードヒントで出す 補足 まとめ Today's Agenda 8
  9. 9. コードヒントとは? 9
  10. 10. コードヒントとは? Dreamweaverのコードビューで htmlタグやcssなどの入力の際に 表示される補完機能のこと。 <body 10
  11. 11. コードヒントとは? コードヒントの有無でコード入力の 作業効率への影響大。 登録されていないものは表示されない。 11
  12. 12. コードヒントを表示させる ためには? 12
  13. 13.   で表示するために情報が登録 されている必要がある。  コードの種類により、登録する 情報の場所が異なる。 13
  14. 14. コードの種類により、登録する 情報の場所が異なる。 タグ HTML5、MTタグなど →タグライブラリエディタ それ以外 CSS、JavaScript、phpなど →codehintフォルダ内(xml形式で) 14
  15. 15. タグをコードヒントで出す 15
  16. 16. 属性も登録・変更可 rel属性に、nofollowを追加するとか コメントタグは登録できない タグはタグライブラリ エディタで登録する 16
  17. 17. その1 環境設定 → コードヒント 機能アクセス ここをクリック 17
  18. 18. その2 環境設定 → コードフォーマット 機能アクセス ここをクリック 18
  19. 19. その3 編集メニュー → タグライブラリ... 機能アクセス 19
  20. 20. ここをクリック タグライブラリエディタ 20
  21. 21. 新しいタグ ⃝:<tag></tag> ×:<tag /> タグの名前 どのタグライブラリに属するか? 21
  22. 22. 新しい属性 どのタグに属するか? どのタグライブラリに属するか? 登録する属性名 22
  23. 23. 上で選択する項目に よってここが変わる タグライブラリ タグ タグ属性 タグライブラリエディタ 23
  24. 24. タグライブラリエディタ タグライブラリの時 タグを使用する言語を指定 タグの時 コードフォーマットを指定 属性の時 属性の大文字小文字、属性のタイプを指定 適切な選択がキモ 24
  25. 25. タグライブラリエディタ よく使う属性のタイプ テキスト:任意の文字 列挙:  値を「 , 」で区切る カラー: 色指定(カラーパレット) 相対パス:ファイル参照 CssStyle:CSSのID・Classを指定 25
  26. 26. Demo 26
  27. 27. タグ以外をコードヒントで出す 27
  28. 28. タグ以外の設定は codehint.xmlに格納されている Mac OSX /Applications/Adobe Dreamweaver CS4/ configuration/CodeHints/ Windows C:¥Program Files¥Adobe¥Adobe Dreamweaver CS4 ¥configuration¥CodeHints 28
  29. 29. 注意点など xmlで定義されています。 タグと属性で構成されている。 →htmlと考え方は同じ。コメントアウトもできる。 CodeHintフォルダに別ファイル(xxx.xml) で格納しておくとそれも適用される。 →オリジナルは、安全のために極力触らない。 29
  30. 30. CSSをコードヒントで 出してみよう 30
  31. 31. その前に基本構造を 理解する 31
  32. 32. 基本骨格 <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
  33. 33. CSSコードヒントの基本形 <menu pattern="hoge"> <menuitem label="表示される文字" value ="挿入される文字" /> </menu> hoge aaaaa bbbbb hoge 確定後 ccccc 33
  34. 34. <menu>の属性 pattern属性 入力した際にコードヒントで表示する 出す文字列を指定。 複数の文字列を同時に指定することが できる。 text 34
  35. 35. <menu>の属性 patternseparator属性 pattern属性で複数文字列を指定する 場合、仕切りとなる文字を指定。 text pattern="aaa/bbb" patternseparator="/" aaaまたはbbbが 入力された時、 コードヒントを出す 35
  36. 36. <menu>の属性 additionaldismisschars属性 指定した文字が入力されたらコード ヒントを消す。複数指定可。 text additionaldismisschars=";:" " : "または" ; "が入力された時、 コードヒントが消える 36
  37. 37. <menu>の属性 allowwhitespaceprefix属性 空白が挿入されたらコードヒント表示を 消すか否かを指定。デフォルトはfalse。 true / false allowwhitespaceprefix="true" 空白が入力されても コードヒントは消えない。 37
  38. 38. aaaaa bbbbb <menu>の属性 allowmultiplevalues属性 空白挿入後、再度menuitemの値を 入力できるかを指定。 デフォルトはfalse。 true / false allowmultiplevalues="true" hoge aaaaa bbbbb 空白入力でコードヒントが 再び出る 38
  39. 39. <menu>の属性 type属性 font / color / url 特殊なコードヒントを表示する。 39
  40. 40. <menu>の属性 type属性 font / color / url type="font" フォントリストを表示 type="color" 選択後、カラーパレット表示 type="url" 選択後、ファイル参照 ダイアログを表示 40
  41. 41. <menuitem>の属性 label属性 コードヒント表示時に表示される文字 value属性 確定後に挿入される文字 text text 41
  42. 42. 記述してみる 42
  43. 43. CSSプロパティを出す 基本形 <menu pattern="hoge" displayrestriction="css"> <menuitem label="viewtext" value ="inserttext" /> </menu> 43
  44. 44. CSSプロパティを出す 考え方 ➡ " { "の入力の後に、コードヒントが 表示される。 ➡ 空白が入力されても消えない。 ➡ " : " " } " の後に、コードヒントが 消える。 44
  45. 45. CSSプロパティを出す <menu pattern="{" allowwhitespaceprefix="true" additionaldismisschars=":}" displayrestriction="css"> <menuitem label="opacity" value ="opacity:" /> </menu> "{"でコードヒント表示 空白OK ":"または"}"で消える コードヒントで "opacity"が表示 確定後は "opacity:" 45
  46. 46. 例:opacityの後に0.1∼1を表示 考え方 ➡ " { "の入力後に、コードヒントで "opacity"表示。確定文字は "opacity:" ➡ "opacity:"の入力後に、コードヒントで 0.1、0.2…を表示。確定文字も同様。 プロパティ確定後に の特定値を出す 46
  47. 47. プロパティ確定後に の特定値を出す <menu pattern="{" allowwhitespaceprefix="true" additionaldismisschars=":}" displayrestriction="css"> <menuitem label="opacity" value ="opacity:" /> </menu> 【opacity表示用】 47
  48. 48. プロパティ確定後に の特定値を出す <menupattern="opacity:" allowwhitespaceprefix="true" additionaldismisschars=":;" displayrestriction="css"> <menuitemlabel="0.1"value="0.1"/> <menuitemlabel="0.2"value="0.2"/> </menu> 【数値表示用】 48
  49. 49. CSSセレクタを出す 基本形 <menu pattern="hoge" doctypes="CSS"> <menuitem label="viewtext" value ="inserttext" /> </menu> 大文字 49
  50. 50. CSSセレクタを出す 例:" @ "の後にimportを表示 <menu pattern="@" doctypes="CSS"> <menuitem label="@import" value ="import" /> </menu> 50
  51. 51. Demo 51
  52. 52. 補 足 52
  53. 53. 機能拡張として 配布するためには? パッケージ化するために mxiファイルが必要 同様にxml形式。 mxpはExtensionManagerで作成。 mxiファイルの仕様 http://help.adobe.com/en_US/ ExtensionManager/2.0/mxi_file_format.pdf 53
  54. 54. まとめ 54
  55. 55. タグ系コードヒントは タグライブラリエディタで登録。 それ以外のコードヒントはxmlを編集 する必要がある。 xmlの編集はタグと属性を理解すれば htmlライクに編集出来る。 55
  56. 56. 明日も話します 56
  57. 57. HTML5 タグライブラリ 機能拡張 CSS3コードヒント機能拡張 CSSセレクタコードヒント 機能拡張 57
  58. 58. ありがとうございました。 58

×