Internet Explorer 8 に対応! ブラウザ互換対応と IE8 新機能の実装を Expression Web 2 で実現 株式会社セカンドフゔクトリー新谷剛史 セールス & デゖレクショングループ
株式会社セカンドフゔクトリー 1
株式会社セカンドフゔクトリー ひと目でわかる Microsoft Silverlight 2 ゕプリケーション開発入門 C# と Expression Blend 2.5 による RIA 開発技法 著者 : 株式会社セカンドフゔクトリー判型 :B5 変型ページ数 : 約 250 ページ価格 : 定価 2,919 円 ISBN978-4-89100-580-1 発行 : 日経 BP ソフトプレス 発行日 :2008 年 11 月予定 2
あらや たけふみ 技術営業 デゖレクション テストマネジメント お客様フォロー 講演 執筆 トレーニング HTML CSS / AJAX Expression MOSS ( マスタページ ) Microsoft MVP for Expressions (Jul 2008 - Jun 2009) Microsoft Certified Desktop Support Technician (MCDST) Macromedia Certified Dreamweaver MX 2004 Developer 個人情報保護士 1508-0700-0578 3
本日の目標 IE8の新機能実装は Expression Web2が便利 IE8の新機能を coder 視点で 確認 IE8の新機能を実装 4
Expression Web 2 5
Expression とは Expression Studio 2 Expression Web 2
Expression Web 2 コーデゖング重視 の人向け Web オーサリングツール 起動が速い CSS を簡単に適用 エラーチェック プレビュー デザンフゔルの コピー & ペースト
Expression Web 2 IE8 の実装は Expression Web 2 が 便利 8
Expression Web 2 Microsoft Expression 開発サーバー 9
Microsoft Expression 開発サーバー WebSlice の確認に必要 10
Live Coding About Expression Web 2 11
[Live Coding 補足スラド ] About Expression Web 2 sample フォルダ demo-xml と demo-php のフゔルを使用してデモを行っております スラド最終ページを参考に Microsoft サトから Expression Web 2 をダウンロードします 起動早い = 軽い = デザンゕプリとの併用が楽 [demo-xml] xml を HTML などに表示するのも簡単 開発サーバでの確認 [demo-php] PHP も 簡単にプレビュー ( 事前設定が必要です ) 12
ンストールとゕンンストール IE8 の新機能 IE8 に対応するコーデゖング Jscript 開発者ツール WebSlice 13
IE8 のンストールについて IE8 はまだ β2 です サービスパック (SP) SP 入れるなら IE8 より先 IE8 入れたら SP 入れるな 14
IE8 のゕンンストールについて 15
IE8 の特徴 ( 一部 ) ドメンハラト RSS フゖードの認証をサポート プロセスモデルの改善 Tab が落ちない Tab 間 ウゖンドウ間の認証問題 セッションを明示的に切断する必要性がある InPrivate ブラウズ 匿名ゕクセスやゕクセスの足跡を残さないわけでは ない DOM Storage ゕクセラレータ Web 標準準拠の描画エンジン 互換対応が必要 Hack の話 Jscript が ECMA に近いものに ( ECMAScript Language Specification 3rd Edition 準拠 ) 互換モードは ない です お気に入り バー WebSlice 開発者ツール 16
IE8 に対応したコーデゖング 1.<meta /> http-equiv="x-ua-compatible" content="ie=emulateie7" 2.DTDと標準モード 互換モードの対応 3. 互換モード用のEmurateボタン 4.Hack 5.Jscript: 互換モード なし 17
参考 IE7 の CSS フゖルタ (CSS ハック ) METAタグによる指定 DOCTYPE 適用されるレンダリングモード DOCTYPE 宣言文 URL の有無 content="ie=8" 影響せず 影響せず Internet Explorer 8 標準モード content="ie=edge" 影響せず 影響せず Internet Explorer 8 標準モード content="ie=7" 影響せず 影響せず Internet Explorer 7 互換モード content="ie=5" 影響せず 影響せず Internet Explorer 5 互換モード content="ie=emulateie7" なし 影響せず Internet Explorer 5 互換モード HTML (no version) 影響せず Internet Explorer 5 互換モード HTML 2.0 影響せず Internet Explorer 5 互換モード HTML 3.0 影響せず Internet Explorer 5 互換モード HTML 4.0 影響せず Internet Explorer 7 互換モード HTML 4.0 Frameset URLあり Internet Explorer 7 互換モード URLなし Internet Explorer 5 互換モード HTML 4.0 URLあり Internet Explorer 7 互換モード Transitional URLなし Internet Explorer 5 互換モード HTML 4.0 Strict 影響せず Internet Explorer 7 互換モード XHTML 影響せず Internet Explorer 7 互換モード XML 影響せず Internet Explorer 7 互換モード 不明な DOCTYPE 影響せず Internet Explorer 7 互換モード なし 影響せず Internet Explorer 5 互換モード HTML (no version) 影響せず Internet Explorer 5 互換モード HTML 2.0 影響せず Internet Explorer 5 互換モード HTML 3.0 影響せず Internet Explorer 5 互換モード HTML 4.0 影響せず Internet Explorer 8 標準モード URLあり Internet Explorer 8 標準モード HTML 4.0 Frameset 指定なし URLなし Internet Explorer 5 互換モード HTML 4.0URLあり Internet Explorer 8 標準モード Transitional URLなし Internet Explorer 5 互換モード HTML 4.0 Strict 影響せず Internet Explorer 8 標準モード XHTML 影響せず Internet Explorer 8 標準モード XML 影響せず Internet Explorer 8 標準モード 不明な DOCTYPE 影響せず Internet Explorer 8 標準モード 18
参考 IE7 の CSS フゖルタ (CSS ハック ) HTML フゖルタ 次のルールは IE のみに適用されていましたが IE 7 以降では無視されます * html{ } * html body{ } * html.foo{ } _ ゕンダースコゕフゖルタ 次のルールでは min-height プロパテゖに対応しているブラウザと IE に高さの最小値が適用されていました IE 7 では _height はカスタムプロパテゖとして処理され 高さは適用されません.myclass { min-height: 300px; _height: 300px;... } /**/ コメントフゖルタ 次のルールは Internet Explorer に対して height プロパテゖを隠すために使用されていましたが IE 7 では 値が適用されます.myclass { height/**/: 300px;... } "html > body" 子セレクタフゖルタ 次のルールは Internet Explorer に対して height プロパテゖを隠すために使用されていましたが IE 7 では 値が適用されます html > body { height: 300px;... } "head + body" 隣接セレクタフゖルタ 次のルールは Internet Explorer に対して height プロパテゖを隠すために使用されていましたが IE 7 では 値が適用されます Head + body { height: 300px;... } "head:first-child + body" 最初の子と隣接セレクタによるフゖルタ 次のルールは Internet Explorer に対して height プロパテゖを隠すために使用されていましたが IE 7 では 値が適用されます head:first-child + body { height: 300px;... } 19
Live Coding Web 標準と互換モード 20
[Live Coding 補足スラド ] Web 標準と互換モード sample フォルダ demo-qurks のフゔルを使用 してデモを行っております サンプルの HTML を参考に 互換表示設定を確認してください <meta> 記述の有無で 表示が変わることを確認しました 自分の作成したコードで 表示の違いを確認してみましょう 21
開発者ツール Firebug / Firefox や Dragonfly / Opera のようなツール 22
WebSlice IE8 標準モードです ブックマークの一種 FireFoxでWebSlice WebChunks 対応はわずかこれだけ Flashは?Silverlightは?AJAXは? Layer positionの話 運用を見据えた対応 23
参考 WebSlice 1. 必須 Web Slice (WebSlice として表示させるエリゕを囲むための ブロック要素 ) class= hslice + id 必須 2. 必須 Entry Title( タトル ) class="entry-title" 3. 任意 : でも ほぼ必須 Entry Content( コンテンツ ) class="entry-content 4. 任意 End Time( エンドタム )abbr-design-pattern : See > http://microformats.org/wiki/abbr-design-pattern <p>end time : <abbr class= endtime title= 2009-01-23T17:00:00 >2day7hours</abbr></p> 5. 任意 Alternative Display Source( 代替表示要素 ) 6. 任意 Alternative Navigation( 代替ナビゲーション ) 7. 任意 Time to Live( コンテンツの表示期限 ) <p> このコンテンツは <span class= ttl >15</span> 毎に更新します </p> 8. 任意 Alternative Update Source( 更新プログラムの別ソース ) See > http://code.msdn.microsoft.com/release/projectreleases.aspx?projectname=ie8whitepapers&releaseid=567 <a rel="feedurl" href="dummyurl.dummy.domain/feedfile.xml">subscribe to WebSlice</a> http://msdn.microsoft.com/en-us/library/cc304073(vs.85).aspx 24
Expression Web 2 + WebSlice の確認 F12 キー 他のブラウザでプレビューされてしまう場合は フゔル > ブラウザでプレビュー > Windows Internet Explorer 8.0 25
他の Web オーサリングツールでの確認 1. サーバーにフゔルをゕップして確認 公開前のフゔルは注意 2. ントラネットワーク向けサーバー 3. Apacheなど構築 XAMPP などが簡単 http://www.apachefriends.org/jp/xampp.html 26
Live Coding こんなに簡単 WebSlice 27
[Live Coding 補足スラド ] Web 標準と互換モード sample フォルダ demo-webslice のフゔルを使 用してデモを行っております 基本は 3class 1id です スラド 24 ページで オプションを紹介しております セミナー中 動画の WebSlice を表示できておりませんでしたが 8. Alternative Update Source の記述を使用することで表示できるという情報がありました WebSlice の動画表示 できた方情報をください 28
Expression Web 2 で PHP フゔルをプレビュー XAMPP Windows 版をンストール後 ツール > ゕプリケーションのオプションを選択 全般タブの PHP 部分で左図のように phpcgi.exe のパスを指定します PHP フゔルを開き F12 キーを押してプレビューしてみましょう
ダウンロード URL Expression Studio 2 http://www.microsoft.com/japan/products/expression/try-it/default.aspx IE8 http://www.microsoft.com/japan/windows/products/winfamily/ie/beta/defaul t.mspx ( バーチャルメージもあります ) http://www.microsoft.com/downloads/details.aspx?familyid=21eabb90-958f-4b64-b5f1-73d0a413c8ef&displaylang=en ご質問はこちらまで araya@2ndfactory.com 会社ゕドレスのためこまめに確認をしておりますが お返事までお時間をいただくことがございますことをご了承ください