Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
HTML5コーデ ング環境を         ィDreamweaverで構築する  ∼ タグライブラリの活用 ∼                   1
Profile          2
丸山 章                  岡山県出身                  鳥取在住のフリーランス。mixi: http://mixi.jp/show_profile.pl?id=7200Twitter: @ akira_maru...
本も書きました!        共著ですが…           Dreamweaver           プロフェッショナル           スタイルDWテンプレートのあたりを詳細に書いてます。今のバージョンでも十分使えますよ。    ...
Todays Agenda                 5
Todays AgendaDreamweaverのHTML5対応の現状タグライブラリとは?HTML5タグライブラリ機能拡張の紹介まとめ                         6
DreamweaverのHTML5対応の現状               7
HTML5って何?            8
次世代 HTML規格である   HTML5とはよりセマンティックな構造化言語へ<header>、<nav>、<figure>などフォーム機能の大幅な強化required属性、placeholder属性などWebアプリケーション開発向け機能の強化...
まだドラフトの状態ですが… 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/コードビューでdiv#test                         <div id=...
でもやっぱり…便利だけどコーディングスタイルが変わるよね。コードヒントも対応して欲しい!                   19
タグライブラリとは?             20
タグライブラリ知ってますか?          21
タグライブラリで出来ること独自タグを登録出来るHTML5、MTタグなど属性の登録・変更が出来るrel属性に、nofollowを追加するとかコードフォーマットを指定出来るタグの改行位置やインデントなどを設定                    ...
機能アクセスその 1環境設定 → コードヒント           ここをクリック                     23
機能アクセスその 2環境設定 → コードフォーマット              ここをクリック                        24
機能アクセスその 3編集メニュー → タグライブラリ...                      25
タグライブラリエディタ              26
タグライブラリエディタ            タグライブラリ            タグ            タグ属性上で選択する項目によってここが変わる                      27
タグライブラリエディタタグライブラリの時タグを使用する言語を指定タグの時コードフォーマットを指定属性の時           適切な選択がキモ属性の大文字小文字、属性のタイプを指定                          28
タグライブラリエディタよく使う属性のタイプテキスト:任意の文字列挙:  値を「 , 」で区切るカラー: 色指定(カラーパレット)相対パス:ファイル参照CssStyle:CSSのID・Classを指定                       ...
Demo       30
HTML5タグライブラリ 機能拡張の紹介               31
HTML5タグライブラリ   機能拡張のメリットすでにHTML5のタグ属性は登録済み登録の手間無く、すぐに始められますインストール・削除が簡単Extension Manager用にパッケージ化しています新規ドキュメントでHTML5を選択可変換も...
導入における注意点HTML5は正式に勧告されていませんタグや属性は変更される可能性がありますデザインビューは対応してません。コードヒントでの効率作業に特化していますドキュメントタイプはXML構文のみDWの仕様で混在は出来ません。        ...
導入における注意点まだ属性等に漏れがあるかも…報告してくれたら早期対応します。MMDocumentTypeDeclarations.xmlが上書きされますカスタマイズしている人のみ要チェック                           ...
すでに公開済みですが…した!          ま              ートし          アップデCS5でもOKです。現時点でのタグ・属性に対応(したはず…)漏れがあれば報告してください。                    35
やってみよう  Demo         36
まとめ      37
現状ではHTML5対応には程遠い。・多分CS5だと無理。CS6に期待!タグライブラリは、実は使えるよ。・独自のタグ・属性の定義・コードフォーマットのカスタマイズHTML5タグライブラリ機能拡張を使えばHTML5のタグをコードヒントで出せるように...
ちょっと宣伝         39
機能拡張を作っています。  CSS Selector コードヒント  機能拡張  MT5 タグライブラリ  機能拡張  コメントタグコードヒント  機能拡張              など                        40
実は… CSS 3 コードヒント機能拡張 も開発中! まもなく公開。要望などフィードバック お待ちしています。                    41
ありがとうございました。               42
Nächste SlideShare
Wird geladen in …5
×

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

6.279 Aufrufe

Veröffentlicht am

Dreamweaver Town Meeting in Kyotoで話した講演資料です。

Veröffentlicht in: Technologie, Design
  • Als Erste(r) kommentieren

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

  1. 1. HTML5コーデ ング環境を ィDreamweaverで構築する ∼ タグライブラリの活用 ∼ 1
  2. 2. Profile 2
  3. 3. 丸山 章 岡山県出身 鳥取在住のフリーランス。mixi: http://mixi.jp/show_profile.pl?id=7200Twitter: @ akira_marublog: http://dwlog.net/ 3
  4. 4. 本も書きました! 共著ですが… Dreamweaver プロフェッショナル スタイルDWテンプレートのあたりを詳細に書いてます。今のバージョンでも十分使えますよ。 4
  5. 5. Todays Agenda 5
  6. 6. Todays AgendaDreamweaverのHTML5対応の現状タグライブラリとは?HTML5タグライブラリ機能拡張の紹介まとめ 6
  7. 7. DreamweaverのHTML5対応の現状 7
  8. 8. HTML5って何? 8
  9. 9. 次世代 HTML規格である HTML5とはよりセマンティックな構造化言語へ<header>、<nav>、<figure>などフォーム機能の大幅な強化required属性、placeholder属性などWebアプリケーション開発向け機能の強化APIの充実、manifest属性など 9
  10. 10. まだドラフトの状態ですが… SafariやChromeなどのモダンブラウ ザが積極的に導入 旧ブラウザ対応のJavaScript (html5.js) とかもリリース済み IE9も正式対応予定 10
  11. 11. じゃあ、開発環境としての Dreamweaverは? 11
  12. 12. デザインビューは? 12
  13. 13. ざっと見た限りだと…プロパティーインスペクタは新規属性入力には非対応。新規タグはspanのような振る舞い。マルチメディア系タグなど特殊なものを除けば、静的な表示はまあ出来なくはない。 13
  14. 14. まあでも基本は… 14
  15. 15. っちゃけぶHTML5じゃなくても、どっちみちブラウザでの確認は基本。 15
  16. 16. コードビューは? 16
  17. 17. コードビューの現状手打ちは可能。コードヒントでタグ・属性は出ない。 17
  18. 18. しかし明るい兆しも… Zen-Cording 機能拡張 ! http://code.google.com/p/zen-coding/コードビューでdiv#test <div id="test"></div> control + ,Zen-Cording に対応していれば、エディタ間で統一したコーディングスタイルをとれる。 18
  19. 19. でもやっぱり…便利だけどコーディングスタイルが変わるよね。コードヒントも対応して欲しい! 19
  20. 20. タグライブラリとは? 20
  21. 21. タグライブラリ知ってますか? 21
  22. 22. タグライブラリで出来ること独自タグを登録出来るHTML5、MTタグなど属性の登録・変更が出来るrel属性に、nofollowを追加するとかコードフォーマットを指定出来るタグの改行位置やインデントなどを設定 22
  23. 23. 機能アクセスその 1環境設定 → コードヒント ここをクリック 23
  24. 24. 機能アクセスその 2環境設定 → コードフォーマット ここをクリック 24
  25. 25. 機能アクセスその 3編集メニュー → タグライブラリ... 25
  26. 26. タグライブラリエディタ 26
  27. 27. タグライブラリエディタ タグライブラリ タグ タグ属性上で選択する項目によってここが変わる 27
  28. 28. タグライブラリエディタタグライブラリの時タグを使用する言語を指定タグの時コードフォーマットを指定属性の時 適切な選択がキモ属性の大文字小文字、属性のタイプを指定 28
  29. 29. タグライブラリエディタよく使う属性のタイプテキスト:任意の文字列挙:  値を「 , 」で区切るカラー: 色指定(カラーパレット)相対パス:ファイル参照CssStyle:CSSのID・Classを指定 29
  30. 30. Demo 30
  31. 31. HTML5タグライブラリ 機能拡張の紹介 31
  32. 32. HTML5タグライブラリ 機能拡張のメリットすでにHTML5のタグ属性は登録済み登録の手間無く、すぐに始められますインストール・削除が簡単Extension Manager用にパッケージ化しています新規ドキュメントでHTML5を選択可変換もOK。XML構文のHTML5が作成 32
  33. 33. 導入における注意点HTML5は正式に勧告されていませんタグや属性は変更される可能性がありますデザインビューは対応してません。コードヒントでの効率作業に特化していますドキュメントタイプはXML構文のみDWの仕様で混在は出来ません。 33
  34. 34. 導入における注意点まだ属性等に漏れがあるかも…報告してくれたら早期対応します。MMDocumentTypeDeclarations.xmlが上書きされますカスタマイズしている人のみ要チェック 34
  35. 35. すでに公開済みですが…した! ま ートし アップデCS5でもOKです。現時点でのタグ・属性に対応(したはず…)漏れがあれば報告してください。 35
  36. 36. やってみよう Demo 36
  37. 37. まとめ 37
  38. 38. 現状ではHTML5対応には程遠い。・多分CS5だと無理。CS6に期待!タグライブラリは、実は使えるよ。・独自のタグ・属性の定義・コードフォーマットのカスタマイズHTML5タグライブラリ機能拡張を使えばHTML5のタグをコードヒントで出せるようになるよ。 38
  39. 39. ちょっと宣伝 39
  40. 40. 機能拡張を作っています。 CSS Selector コードヒント 機能拡張 MT5 タグライブラリ 機能拡張 コメントタグコードヒント 機能拡張 など 40
  41. 41. 実は… CSS 3 コードヒント機能拡張 も開発中! まもなく公開。要望などフィードバック お待ちしています。 41
  42. 42. ありがとうございました。 42

×