HTML5コーディング環境を Dreamweaverで構築する
•
3 likes•4,238 views
Dreamweaver Town Meeting in Kyotoで話した講演資料です。
Recommended
More Related Content
What's hot
Similar to HTML5コーディング環境を Dreamweaverで構築する
Similar to HTML5コーディング環境を Dreamweaverで構築する (20)
More from Akira Maruyama
More from Akira Maruyama (9)
Recently uploaded
Recently uploaded (10)
HTML5コーディング環境を Dreamweaverで構築する
- 1. HTML5コーデ ング環境を ィ Dreamweaverで構築する ∼ タグライブラリの活用 ∼ 1
- 2. Profile 2
- 3. 丸山 章 岡山県出身 鳥取在住のフリーランス。 mixi: http://mixi.jp/show_profile.pl?id=7200 Twitter: @ akira_maru blog: http://dwlog.net/ 3
- 4. 本も書きました！ 共著ですが… Dreamweaver プロフェッショナル スタイル DWテンプレートのあたりを詳細に書いてます。 今のバージョンでも十分使えますよ。 4
- 5. Today's Agenda 5
- 8. HTML5って何？ 8
- 9. 次世代 HTML規格である HTML5とは よりセマンティックな構造化言語へ <header>、<nav>、<figure>など フォーム機能の大幅な強化 required属性、placeholder属性など Webアプリケーション開発向け 機能の強化 APIの充実、manifest属性など 9
- 10. まだドラフトの状態ですが… SafariやChromeなどのモダンブラウ ザが積極的に導入 旧ブラウザ対応のJavaScript (html5.js) とかもリリース済み IE9も正式対応予定 10
- 11. じゃあ、開発環境としての Dreamweaverは？ 11
- 12. デザインビューは？ 12
- 13. ざっと見た限りだと… プロパティーインスペクタは 新規属性入力には非対応。 新規タグはspanのような振る舞い。 マルチメディア系タグなど 特殊なものを除けば、静的な表示は まあ出来なくはない。 13
- 14. まあでも基本は… 14
- 16. コードビューは？ 16
- 18. しかし明るい兆しも… Zen-Cording 機能拡張 ! http://code.google.com/p/zen-coding/ コードビューで div#test <div id="test"></div> control + , Zen-Cording に対応していれば、エディタ間 で統一したコーディングスタイルをとれる。 18
- 20. タグライブラリとは？ 20
- 21. タグライブラリ 知ってますか？ 21
- 23. 機能アクセス その 1 環境設定 → コードヒント ここをクリック 23
- 24. 機能アクセス その 2 環境設定 → コードフォーマット ここをクリック 24
- 26. タグライブラリエディタ 26
- 27. タグライブラリエディタ タグライブラリ タグ タグ属性 上で選択する項目に よってここが変わる 27
- 28. タグライブラリエディタ タグライブラリの時 タグを使用する言語を指定 タグの時 コードフォーマットを指定 属性の時 適切な選択がキモ 属性の大文字小文字、属性のタイプを指定 28
- 30. Demo 30
- 31. HTML5タグライブラリ 機能拡張の紹介 31
- 32. HTML5タグライブラリ 機能拡張のメリット すでにHTML5のタグ属性は登録済み 登録の手間無く、すぐに始められます インストール・削除が簡単 Extension Manager用にパッケージ化しています 新規ドキュメントでHTML5を選択可 変換もOK。XML構文のHTML5が作成 32
- 34. 導入における注意点 まだ属性等に漏れがあるかも… 報告してくれたら早期対応します。 MMDocumentTypeDeclarations.xmlが 上書きされます カスタマイズしている人のみ要チェック 34
- 35. すでに公開済みですが…した! ま ートし アップデ CS5でもOKです。 現時点でのタグ・属性に対応 （したはず…） 漏れがあれば報告してください。 35
- 36. やってみよう Demo 36
- 37. まとめ 37
- 39. ちょっと宣伝 39
- 40. 機能拡張を作っています。 CSS Selector コードヒント 機能拡張 MT5 タグライブラリ 機能拡張 コメントタグコードヒント 機能拡張 など 40
- 41. 実は… CSS 3 コードヒント機能拡張 も開発中！ まもなく公開。 要望などフィードバック お待ちしています。 41
- 42. ありがとうございました。 42