Dreamweaver Town Meeting in KyotoのセッションでHTML5タグライブラリ機能拡張を含めたタグライブラリネタで話しました。おこし頂いた方、誠にありがとうございます。久しぶりに話すと予想通りカミカミになってしまいました。
会場でも挙手していただきましたが、タグライブラリ使っている人って意外と少ないんですね。ちょっとした手間をかけるだけで効率の上がる1手段だと思いますので、是非使ってみて欲しいと思います。
話は変わって、前回リリースして半年以上たちましたが、上記イベントのセッション内で告知した通り、HTML5タグライブラリー機能拡張をアップデートしました。Working Draftの最新版の情報を盛り込んだつもりです。
【更新内容】
- Working Draftの最新版の情報を踏まえたタグ、属性に変更。
- 既存タグで新規追加された属性の追加。
- 決まった属性値のコードヒント表示に対応。
- mxiの文字コードをUTF-8に変更
機能の詳細は別記事「HTML5で新規追加されたタグをDreamweaverのタグライブラリーに登録してみた」を参考にしてください。
【注意点】
- 新規ドキュメントのHTML5の構文は前回と同様にXML構文となります。本当はHTML構文と選択可能にしたかったのですが、ドキュメントタイプが同じ<!DOCTYPE html>だと混在できないようです(多分Dreamweaverの仕様です。<!DOCTYPE xhtml>にすれば混在できるけど微妙)。XML構文は個人的好みで選択しています。実はCS5は新規ドキュメントのみHTML5で作成できますが、HTML構文なります。ですので、HTML構文で書きたい旨のリクエストが多ければ別途検討します。
- XML構文が前提なので、論理属性の属性（例えばinputタグのcheckedなど）はchecked="checked"のようになるように設定しています。但し既存タグの既存属性に関しては一部のみ修正しています。
- Tag選択（挿入メニュー > タグ...）には対応していません。選択は出来ますが、タグの解説やグルーピングがなされていません。
- Dreamweaver 8以降でインストール出来るように設定していますが、保証はしません。
- デザインビューでの表示は対応していません。あくまでコードヒントでHTML5のタグ＆属性を表示させることにフォーカスしています。
- 新規ドキュメント作成時の文字コードのmetaタグは
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
となってしまいます。Dreamweaverの仕様になります。HTML5の仕様としてはこのままでも問題ないようです。
【ダウンロード】
- 以下のファイルをダウンロードしてください。鷹野さんにlzhじゃなくてzipにしてと言われましたので圧縮方法を変えました(笑)。（zipで圧縮しております。）
html5_tag_suites_v050.zip
【追記】
ダウンロードのリンク先が間違っておりました。修正しました。4/23 2:32
こんばんわ
京都、大阪とごくろうさまでした
adobe Labs から
Adobe Dreamweaver CS5 HTML5 Pack が
発表になりましたね
丸山さんから見たこの内容につて、また
ここのエントリーなどで教えてもらえませんか
来週は大喜利なんで発表はムリですよね
t2さんコメントありがとうございます。HTML5 Packで実現されたことはAdobe Labsに書かれています。ざっとあげると
・HTML5、CSS3コードヒントに対応→但しセレクターは対応してません。自分の機能拡張を使ってください。CSS3はとりあえず自分のよりはプロパティーの対応度は多いですが、rgbaやopacityとか出てこないし、もうちょっとな感が多いです。これからのupdateで対応されるとは思いますが、差分パッチみたいなのをだすかもしれません。w
・HTML5のサンプルレイアウトが2つ追加→しかしDoctypeをちゃんとHTML5に指定しないとXHTMLで適用されます。
・マルチプレビュー→これは便利。指定したpxでCSSの振り分けをしてくれます。
・ライブビューの向上。→CSS Nite in OSAKA Vol.20のデモをご覧になった方はご存知ですが、あのCS5のライブビューよりさらに向上してSafari(Webkit)と同等になっています。これだけで入れる価値があると思ってます。
目立った特徴はこれくらいかなと。デザインビューはほとんどわかりませんでした。Labsにあるということはまだプレビュー版ということなので、表示とか英語なのですが、機能的には十分に使えます。CS5に乗換されるなら是非！ってここで詳細に述べたらblogネタがなくなってしまう…。w