HTML5コーディング環境をDreamweaverで構築する

～ タグライブラリの活用 ～

1

Profile

2

丸山　章

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

岡山県出身鳥取在住のフリーランス。

3

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

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

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

4

Today's Agenda

5

DreamweaverのHTML5対応の現状

タグライブラリとは？

HTML5タグライブラリ機能拡張の紹介

まとめ

Today's Agenda

6

DreamweaverのHTML5対応の現状

7

HTML5って何？

8

次世代 HTML 規格であるHTML5とは

よりセマンティックな構造化言語へ<header>、<nav>、<figure>など

フォーム機能の大幅な強化required属性、placeholder属性など

Webアプリケーション開発向け機能の強化APIの充実、manifest属性など

9

SafariやChromeなどのモダンブラウザが積極的に導入

旧ブラウザ対応のJavaScript (html5.js) とかもリリース済みIE9も正式対応予定

まだドラフトの状態ですが…

10

じゃあ 、開発環境としてのDreamweaverは？

11

デザインビューは？

12

プロパティーインスペクタは新規属性入力には非対応。

新規タグはspanのような振る舞い。

マルチメディア系タグなど特殊なものを除けば、静的な表示はまあ出来なくはない。

ざっと見た限りだと…

13

まあでも基本は…

14

HTML5じゃなくても、どっちみちブラウザでの確認は基本。

ぶっちゃけ

15

コードビューは？

16

コードビューの現状

手打ちは可能。

コードヒントでタグ・属性は出ない。

17

しかし明るい兆しも…

Zen-Cording 機能拡張 !http://code.google.com/p/zen-coding/

Zen-Cording に対応していれば、エディタ間で統一したコーディングスタイルをとれる。

コードビューでdiv#test <div id="test"></div>

control + ,

18

便利だけどコーディングスタイルが変わるよね。

コードヒントも対応して欲しい！

でもやっぱり…

19

タグライブラリとは？

20

タグライブラリ知ってますか？

21

独自タグを登録出来るHTML5、MTタグなど

属性の登録・変更が出来るrel属性に、nofollowを追加するとか

コードフォーマットを指定出来るタグの改行位置やインデントなどを設定

タグライブラリで出来ること

22

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

機能アクセス

ここをクリック

23

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

機能アクセス

ここをクリック

24

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

機能アクセス

25

タグライブラリエディタ

26

タグライブラリエディタ

タグライブラリタグ

タグ属性

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

27

タグライブラリエディタ

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

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

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

適切な選択がキモ

28

タグライブラリエディタ

よく使う属性のタイプ

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

29

Demo

30

HTML5タグライブラリ機能拡張の紹介

31

HTML5タグライブラリ機能拡張のメリット

すでにHTML5のタグ属性は登録済み登録の手間無く、すぐに始められます

インストール・削除が簡単Extension Manager用にパッケージ化しています

新規ドキュメントでHTML5を選択可変換もOK。XML構文のHTML5が作成

32

導入における注意点

HTML5は正式に勧告されていませんタグや属性は変更される可能性があります

デザインビューは対応してません。コードヒントでの効率作業に特化しています

ドキュメントタイプはXML構文のみDWの仕様で混在は出来ません。

33

導入における注意点

まだ属性等に漏れがあるかも…報告してくれたら早期対応します。

MMDocumentTypeDeclarations.xmlが上書きされますカスタマイズしている人のみ要チェック

34

CS5でもOKです。

現時点でのタグ・属性に対応（したはず…）漏れがあれば報告してください。

すでに公開済みですが…アップデー

トしました !

35

やってみようDemo

36

まとめ

37

現状ではHTML5対応には程遠い。・多分CS5だと無理。CS6に期待！

タグライブラリは、実は使えるよ。・独自のタグ・属性の定義・コードフォーマットのカスタマイズ

HTML5タグライブラリ機能拡張を使えばHTML5のタグをコードヒントで 出せるようになるよ。

38

ちょっと宣伝

39

機能拡張を作っています。CSS Selector コードヒント機能拡張MT5 タグライブラリ機能拡張

など

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

40

実は…

CSS 3 コードヒント機能拡張も開発中！ まもなく公開。

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

41

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

42