Dynamic HTML活用

 Dynamic HTMLは、動的WEBアクセスに利用される。
 Dynamic HTMLには２種類(MicrosoftとNetscape)あり、相互に互換性がないという。
 従来の静的htmlと具体的にどう違うのか？　またXMLとの違いは？

　利用するだけならまだしも、作る側となると、やはりそのへんの知識をしっかり把握
する必要がある。


参考●DHTML? アプレット? コントロール? いったいどれを使えばいいのか?
 --- Dynamic html, ActiveX control, Java appletは殆ど同一の追加機能を実現可。
 各長短を比較解説。　




■Dynamic HTMLとは？

●Dynamic HTMLに関するよくある質問
Microsoft Corporation 最終更新：1997 年10 月9 日
目次
一般的な質問
入手方法
標準規格
その他のテクノロジ
●一般的な質問
★Dynamic HTMLとは何ですか？
　IE4.0では、Dynamic HTMLの実装がサポート。Dynamic HTMLには次の機能がある。

・Document Object Model（DOM）。
ページ要素をすべてオブジェクトとして公開。すべてのページ要素上で、キーボードイベントとマウスイベントを完全にサポート。Document Object Modelのサポートにより、ダイナミックなコンテンツ、スタイル、および位置指定効果や、データバインディングとスクリプトレットが実現されています。

・データバインディング。
サーバとの間を何度も往復せずにクライアント上にデータを表示、操作（並べ替えやフィルタなど）、更新するデータドリブン型のアプリケーションフロントエンドを作成可。

・スクリプトレット。
スクリプトレットはDynamic HTMLで書かれたWebページです。スクリプトレットを、Webアプリケーションの中でコンポーネントとして使用可。スクリプトレットを使うと、コンテンツプロバイダはコンテンツを1回だけ作成し、その後は他のWebページやアプリケーションで、簡単にそのコンテンツを再利用可。

★MicrosoftによるDynamic HTMLの実装を使用するのは、どういった人ですか？
Web開発者、設計者、HTML作成者などが、幅広いサードパーティツールとMicrosoftツールを通して、MicrosoftによるDynamic HTMLの実装を利用できるようになります。現在、MicrosoftによるDynamicHTMLの実装をサポートしているサードパーティツールには、Bluestone Sapphire/Web 4.0（ベータ）、ExperTelligence WebberActive 4.0、SoftQuad HoTMetaL PRO 4.0、Pictorius iNet Developer 2.0がある。Microsoft FrontPage(r)98とMicrosoft Visual InterDev(tm)の時期メジャーリリースもまたDynamic HTMLをサポートする予定です。

●入手方法
★MicrosoftによるDynamic HTMLの実装は、どのような形で配布されるのですか？
MicrosoftによるDynamic HTMLの実装は、Microsoft Internet Explorer 4.0の機能の1つです。Dynamic HTMLは無償で再配布できるコンポーネントでもあるから、サードパーティ各社も自社のアプリケーションにDynamic HTMLを組み込むことが可。

★MicrosoftによるDynamic HTMLの実装は、クロスプラットフォームで提供されるのですか？
MicrosoftはDynamic HTMLの基盤であるDocument Object Modelを、Microsoft Windows(r)オペレーティングシステム、Macintosh(r)、主な商用UNIXなど、どのプラットホーム用のInternet Explorer 4.0にも配布。さらに、Internet Explorer 4.0の全バージョンがTabular Data Controlを通してスクリプトレットと表ベースのデータバインディングをサポート。
★どのような人たちがMicrosoftによるDynamic HTMLの実装を使ってページを開発していますか？Microsoftはその人たちをどのようにサポートしているのでしょうか？
1000以上のWebサイトがMicrosoftによるDynamic HTMLの実装を使用して、対話型のコンテンツをユーザーに提供。Microsoftでは、オンラインフォーラムとメーリングリストを通じて、開発者と設計者をサポート。詳細については、MicrosoftのSite Builder NetworkにあるMailing Listホームページ（www.microsoft.com/workshop/essentials/mail.asp）を参照してください。

●標準規格
★MicrosoftによるDynamic HTMLの実装は、どんな標準規格をサポートしているのですか？
MicrosoftによるDynamic HTMLの実装は、以下のW3C仕様をサポート。
HTML 4.0 Working Draft（http://www.w3.org/TR/WD- html40/）l
CSS1 Recommendation（http://www.w3.org/TR/REC-CSS1）l
CSS Positioning Working Draft（http://www.w3.org/TR/WD-positioning）l


★今でもW3Cは、このテクノロジを検討しているのですか？現在の状態は？
1996年8月、MicrosoftとSoftQuadはW3Cに対して、MicrosoftによるDynamic HTMLの実装の基礎であるDocument Object Model を提案しました。Microsoftは現在も、W3C Document Object Model Working Groupと協力し、このテクノロジの標準を定義する作業を続けています。
昨年4月、Working GroupはDocument Object Modelについての暫定的な要件ドキュメントをhttp://www.w3.org/pub/WWW/MarkUp/DOM/に発表しました。10月の初めには、これに続いて、Core Level 1 Document Object Model Working Draftが提出されています。MicrosoftによるDynamic HTMLの実装は、作成者がドキュメントのすべての要素の配置とアクセスができるという点で、W3Cの方針に即したものだといえます。

●他のテクノロジ
★Dynamic HTMLは、HTMLやカスケーディングスタイルシートとどんな関係があるのですか？
HTMLは、見出し、フォーム、表、段落、リンクなどを含むWebページに使用するコンテキスト情報とコンテンツに関する仕様です。
Cascading Style Sheet（CSS）は、このコンテンツの表示に関する仕様です。
Dynamic HTMLはDocument Object Modelを通じてHTML要素やCSS情報との対話を可能にするオブジェクトモデルとAPIを提供。
例えば、作成者はHTMLを使って、表があることを指定し、CSSを使って表のスタイルと表示をコントロールし、Dynamic HTMLを使って表の内容やその表示を更新。

★スクリプトとコンポーネントはWebアプリケーションの中でどのように使用されるのですか？
Web開発者と作成者は、どのテクノロジを自分たちのWebアプリケーションの中で使うかを決めるときに、いくつかのトレードオフを査定する必要がある。HTML、スクリプト、スクリプトレットを使うと、さまざまな種類のクライアントをターゲットにしたアプリケーションを幅広く配備でき、多数の作成者と開発者がこれらのアプリケーションを簡単に作成できることは確実です。コントロールやアプレットのようなコンポーネントを使うと、アプリケーションを開発するときにコーディングが必要であり、コーディングはオーサリングよりもはるかに難しくなることが考えられます。こういったコンポーネントを使用すれば、Webアプリケーションの機能は優れたものになりますが、コンポーネントの組み込みや作成ができる人が減ることになります。

★MicrosoftによるDynamic HTMLの実装とNetscapeのテクノロジとの比較は？
どちらのテクノロジも、W3Cの「CSS Recommendation and CSS Positioning Working Draft」をサポート。しかし、MicrosoftとNetscapeのテクノロジは根本的に違います。Document Object Modelに基いたMicrosoftによるDynamic HTMLの実装では高度な独創的な制御が可能であり、NetscapeによるDynamic HTML実装では、Document Object Modelはほとんどサポートしていないからです。
Navigator 4.0での、NetscapeバージョンのDynamic HTMLは、ページ要素がごくわずかにオブジェクトとして公開しているため、作成者向けのレイアウト機能やクリエイティブな機能に制限がある。ページ要素もページの読み込み中だけ操作が可能で、読み込んだ後は操作できません。Netscapeの非標準の実装は、JavaScript Accessible Style Sheets（JASS）、レイヤー、ダイナミックフォント（TrueDoc）などで構成されています。これらのテクノロジは、Microsoft Internet Explorer 4.0ではサポートされません。
MicrosoftによるDynamic HTMLの実装には、データバインディングなどの機能も含まれていますが、これはNetscape4.0ではサポートされていません。詳細については、テクノロジ比較のページを参照してくださ
い。
詳細については、Dynamic HTMLの競合製品との比較を参照してください。
●関連
Dynamic HTML に関する FAQ[MSDN WebWorkshop]


●Netscape DHTMLとの違い

ダイナミックHTML(Dynamic HTML)とは、今までのHTMLでは不可能だった、自由なポジショニングや動的表現を可能にしたHTML技術の事です。今まで、アニメーションなどの動的表現をする時、Javaやプラグイン、 GIFアニメーションなどの技術を使って表現していました。しかしDynamic HTMLでは、JavaScriptやVBScriptなどを用い、HTMLの記述のみで、比較的簡単に表現する事が出来ます。なおかつ、ブラウザのブラウズ機能自身が持つ機能なので、JAVAやプラグインやなどと違い、ページ全体を使ったより自由な表現が出来ます。 現在、Dynamic HTMLをサポートしているのは、Microsoft Internet Explorer4.0と、 Netscape Communicator(Netscape Navigator4.0)の２つのブラウザです。ただし、この２つのブラウザのDHtmlは仕様は似ているのですが、実現方法が共に違うためほとんど互換性はありません。 

●参考資料
ダイナミックHTML(Dynamic HTML)とは？
NN4 6 と Moz やIE4 5、またはDHTMLを使えないブラウザの処理などを分岐するためのブラウザバージョンチェックについて
 --- CheckするためのavaScript
とほほのダイナミックHTML入門
 --- ダイナミックHTMLのサンプル、Internet Explorer・Netscape Navigatorのダイナミ
ックHTMLの違いなどを掲載。




■Dynamic HTMLリファレンス

DHTMLリファレンス[Microsoft MSDN]
 --- に全タグの詳細がある。 全770p以上
 以下にタグリストを示した。　これで、htmlとの違いが具体的に解ると思う。

ドキュメントオブジェクトモデル リファレンス
オブジェクト
プロパティ
メソッド
イベント
コレクション
HTMLリファレンス
HTMLエレメント
キャラクタセット
CSSリファレンス
CSS属性
補足リファレンス
カラーテーブル
チップスとトリック


●オブジェクト
次に挙げたものがDynamic HTML で定義されているオブジェクトである。
原文のリンクをクリックすればそれぞれのオブジェクトの説明が見られる。
※オブジェクト
A ACRONYM ADDRESS all ○APPLET ○applets anchors AREA areas
B BASE BASEFONT BGSOUND BIG BLOCKQUOTE BODY BR BUTTON
CAPTION ○cells CENTER children CITE CODE COL COLGROUP COMMENT
DD DEL DFN DIR DIV DL document DT
elements EM EMBED embeds event external
FIELDSET filters FONT FORM forms FRAME frames FRAMESET
H1 H2 H3 H4 H5 H6 HEAD history HR HTML
I ○IFRAME images IMG ○INPUT INS 	KBD
LABEL LEGEND LI LINK links LISTING location
MAP MARQUEE MENU META
navigator NEXTID
○OBJECT OL ○OPTION ○options
P PLAINTEXT plugins PRE
Q ○rows rules
S SAMP screen ○SCRIPT ○scripts SELECT selection SMALL SPAN STRIKE STRONG STYLE
style ○styleSheet ○styleSheets SUB SUP
TABLE TBODY TD TEXTAREA TextRange TFOOT TH THEAD TITLE TR TT U UL
userProfile VAR window XMP
※入力タイプ
button checkbox file hidden image password radio reset submit text

●プロパティ
次のリストはDHTML オブジェクトモデルに含まれるプロパティである。
 各プロパティ名の上にマウスを持っていくと、そのプロパティの適用オブジェクトが
表示される。　原文ではクリックすれば、そのプロパティの詳細説明のページにジャンプ。
accessKey action activeElement align align align align aLink alinkColor
alt altHTML altKey appCodeName appMinorVersion appName appVersion availHeight availWidth
background background background backgroundAttachment backgroundColor backgroundImage
backgroundPosition backgroundPositionX backgroundPositionY
backgroundRepeat balance behavior bgColor bgColor bgProperties
border border border borderBottom borderBottomColor borderBottomStyle
borderBottomWidth borderColor borderColor borderColorDark borderColorLight borderLeft
borderLeftColor borderLeftStyle borderLeftWidth borderRight borderRightColor borderRightStyle
borderRightWidth borderStyle borderTop borderTopColor borderTopStyle borderTopWidth
borderWidth bottomMargin boundingHeight boundingLeft boundingTop boundingWidth
browserLanguage bufferDepth button
cancelBubble caption cellIndex cellPadding cellSpacing charset
checked classid className clear clear clientHeight
clientInformation clientLeft clientTop clientWidth clientX clientY clip closed code
codeBase codeBase codeType color color colorDepth cols cols cols
colSpan compact complete connectionSpeed content cookie
cookieEnabled coords cpuClass cssText ctrlKey cursor
data dataFld dataFormatAs dataPageSize dataSrc defaultCharset
defaultChecked defaultSelected defaultStatus defaultValue defer defer
dialogArguments dialogHeight dialogLeft dialogTop dialogWidth direction
disabled disabled display domain dynsrc
encoding event expando
face fgColor fileCreatedDate fileModifiedDate fileSize fileUpdatedDate filter
font fontFamily fontSize fontSmoothingEnabled fontStyle fontVariant
fontWeight form frame frameBorder frameSpacing fromElement
hash height height height hidden host hostname href href href href hspace
htmlFor htmlFor htmlText httpEquiv
id indeterminate index innerHTML innerText isMap isTextEdit
keyCode
lang language lastModified left leftMargin length letterSpacing lineHeight link
linkColor listStyle listStyleImage listStylePosition listStyleType location
loop lowsrc
map margin marginBottom marginHeight marginLeft marginRight marginTop
marginWidth maxLength media method Methods mimeTypes multiple
name name noHref noResize noShade noWrap
object offscreenBuffering offsetHeight offsetLeft offsetParent offsetTop
offsetWidth offsetX offsetY onLine opener outerHTML outerText overflow owningElement
padding paddingBottom paddingLeft paddingRight paddingTop pageBreakAfter
pageBreakBefore palette parent parentElement parentStyleSheet parentTextEdit
parentWindow pathname pixelHeight pixelLeft pixelTop pixelWidth platform plugins
pluginspage port posHeight position posLeft posTop posWidth protocol
readOnly readOnly readyState reason recordNumber recordset referrer rel
returnValue returnValue rev rightMargin rowIndex rows rows rowSpan rules
screenX screenY scroll scrollAmount scrollDelay scrollHeight scrolling scrollLeft
scrollTop scrollWidth search sectionRowIndex selected selectedIndex
self shape shiftKey size size size sourceIndex span src
src src srcElement srcFilter start start status status style
styleFloat systemLanguage
tabIndex tagName target text text text text textAlign textDecoration
textDecorationBlink textDecorationLineThrough textDecorationNone
textDecorationOverline textDecorationUnderline textIndent textTransform tfoot
thead title title toElement top top topMargin trueSpeed type type type type type
type type type type
units updateInterval url url urn useMap userAgent userLanguage
vAlign vAlign value value value verticalAlign visibility vLink vlinkColor volume
vspace
width width width wrap
x y zIndex

●メソッド
add addChannel addImport addReadRequest addRule alert assign
back blur
clear clear clearInterval clearRequest clearTimeout click close close collapse
compareEndPoints confirm contains createCaption createElement createRange
createStyleSheet createTextRange createTHead createTFoot
deleteCaption deleteCell deleteRow deleteTFoot deleteTHead doReadRequest duplicate
elementFromPoint empty execCommand execScript expand
findText focus forward
getAttribute getAttribute getBookmark go inRange
insertAdjacentHTML insertAdjacentText insertCell insertRow isEqual isSubscribed
item
javaEnabled
move moveBy moveEnd moveStart moveTo moveToBookmark moveToElementText
moveToPoint
navigate nextPage
open open
parentElement pasteHTML previousPage prompt
queryCommandEnabled queryCommandIndeterm queryCommandState
queryCommandSupported queryCommandValue
refresh reload remove removeAttribute replace reset resizeBy resizeTo
scroll scrollBy scrollTo scrollIntoView select select setAttribute setEndPoint
setInterval setTimeout showHelp showModalDialog start stop ○submit
tags taintEnabled
write writeln zOrder

●イベント
onabort onafterupdate onbeforeunload onbeforeupdate onblur onbounce onchange ○onclick
ondataavailable ondatasetchanged ondatasetcomplete ondblclick
ondragstart onerror onerrorupdate onfilterchange onfinish onfocus onhelp onkeydown
onkeypress onkeyup ○onload onmousedown onmousemove onmouseout onmouseover onmouseup
onreadystatechange onreset onresize onrowenter
onrowexit onscroll onselect onselectstart onstart onsubmit onunload

●コレクション
all anchors applets areas cells children elements embeds
filters forms frames images imports links options plugins
rows rules scripts styleSheets tbodies

●HTMLエレメント
!DOCTYPE A ACRONYM ADDRESS APPLET
AREA B BASE BASEFONT BGSOUND BIG
BLOCKQUOTE BODY BR BUTTON CAPTION CENTER
CITE CODE COL COLGROUP COMMENT DD
DEL DFN DIR DIV DL DT
EM EMBED FIELDSET FONT FORM FRAME
FRAMESET HEAD H1 H2 H3 H4
H5 H6 HR HTML I IFRAME
IMG INPUT INS ISINDEX KBD LABEL
LEGEND LI LINK LISTING MAP MARQUEE
MENU META NOBR NOFRAMES NOSCRIPT OBJECT
OL OPTION P PARAM PLAINTEXT PRE
Q S SAMP SCRIPT SELECT SMALL
SPAN STRIKE STRONG STYLE SUB SUP
TABLE TBODY TD TEXTAREA TFOOT
TH THEAD TITLE TR TT U
UL VAR WBR XMP

●CSS属性
IE4.0 でサポートされているカスケーディングスタイルシート（CSS ）について解説する。
フォントとテキストプロパティ
font-family font-style font-variant font-weight font-size @font-face font
letter-spacing line-height text-decoration text-transform text-align text-indent
vertical-align
色と背景のプロパティ
color background-color background-image background-repeat background-attachment
background-position background
レイアウトプロパティ
margin-top margin-right margin-bottom margin-left margin
padding-top padding-right padding-bottom padding-left padding
border-top-width border-right-width border-bottom-width border-left-width
border-width border-top-color border-right-color border-bottom-color border-left-color
border-color border-top-style border-right-style border-bottom-style
border-left-style border-style border-top border-right border-bottom
border-left border float clear
分類プロパティ
display list-style-type list-style-image list-style-position list-style
配置プロパティ
clip height left overflow position top visibility width z-index
印刷プロパティ
page-break-before page-break-after
フィルタプロパティ
filter
疑似クラスとその他のプロパティ
active hover @import !important cursor link visited
サポートされていないCSS 属性
word-spacing first-letter pseudo first-line pseudo white-space







●Dhtml関連リソース


■Microsoft社サイト

●Dynamic HTML[Microsoft MSDN]



ダイナミックスタイルl ダイナミックコンテントl 位置指定とアニメーションl
フィルタとトランジションl フォントのダウンロードl データバインドl
Dynamic HTMLオブジェクトモデルl



●DHTMLリファレンス[Microsoft MSDN]



 --- 全タグマニュアル。　全770p以上。



●DHTMLチュートリアル[Microsoft MSDN]



 --- 具体例の解説つき。
 Dynamic HTMLを使った一般的なWebオーサリングの作成をステップバイステップ形式で説明。
  各セクションは関連項目へリンクしているほかに、その技術についてサンプルを用いて
説明している。ここでは、スクリプト言語（特にJScriptやVBScript）に精通し、概念を
理解していることが前提となっている。

※フライングテキストを作成する
フライングテキスト（すなわち、テキストがページを横切って飛ぶような効果）は、MARQ
UEEコントロールを使うか、CSS Positioningでそのテキストを位置指定するか、という2
つの方法がある。ページ上で垂直／水平の両方向にテキストを動かす方法について説明する。


    
    
  • Use Dynamic HTML to differentiate your content
    and create compelling Web sites




※フライングテキストを斜めに動かす
ここでは、フライングテキストを斜めに動かす方法について説明する。また、Microsoft 
RInternet Explorer 4.0の洗練されたCSS(cascading style sheets)Positioningについて
説明する。

※フライングテキストの動きに曲線を加える
ここでは、DirectAnimationのパスコントロールを使って、楕円形を描きながらテキスト
を動かす方法について説明する。指定したオブジェクトが、ページが表示されている間、
幾何学的なパターンで動く。

※エレメントを順番に動かすアニメーションを作る
ここでは、タイマーやマウスイベントによって、スライドショーのようなアニメーション
効果を作る方法について説明する。

※イメージにトランジションを適用する
ここでは、イメージにトランジションを適用する方法について説明する。トランジション
を使うと、数行のスクリプトを記述するだけで、ページに高速で視覚的な効果を与えるこ
とができる。
　註)1つのスライドから次のスライドへ移動できたりページにグラフィック イメージを
  徐々に表示したりすることもできる。 

※動的な目次を作る
ここでは、動的な目次（Table of Contents）を作る方法について説明する。動的な目次
とは、目次として表示されている“大見出し”をクリックすると、コンテント（あるいは
小見出し）を展開させることができるもので、再びクリックするとそれを折り畳むことも
可能である。必要に応じて情報を表示したり非表示にするために、CSSを利用している。

※文字の色を変化させるアニメーションを作る
ここでは、CSSやタイマーを使って、順繰りに文字が点滅しながらその色を変えていくア
ニメーション効果を作る方法について説明する。

※マウスイベントによる簡単なテキストアニメーション効果
ここでは、ほんの数行のスクリプトでテキストをアニメーションさせる方法について説明
する。スクリプトでは、CSSの効果的な利用とonmouseoverイベントだけしか使っていない。




■Microsoft Webworkshop

Internet Explorer 5.5 および インターネット ツールにおける DHTML の新機能
IFRAME エレメントの使用方法
DHTML アクセシビリティ 
DHTML から Web サービスへのアクセス 


●ESSENTIALS

Internet Explorer 5における DHTML Behavior
HTML Applications の導入: ブラウザから解き放たれた DHTML


●DHTML,HTML &CSS

Internet Explorer 5.5 における縦書きレイアウトの使用
Internet Explorer 5.5 および インターネット ツールにおける DHTML の新機能
エレメント ビヘイビア
ViewLink の概要
IFRAME エレメントの使用方法


DHTML を加速する 12 の Tips
Web Folder Behaviors
<DIV> か <SPAN> か、それが問題だ
Web ページのエラー処理と回避 パート1: 基本事項
HTML Components を使った DHTML Behaviors のスクリプトによる実装
スクリプトによるWebページ印刷のサポート
HTML Applications 概要
Internet Explorer 4.0 におけるカスケーディングスタイルシート
Dynamic HTML 概要
Dynamic HTML 評価ガイド
Dynamic HTML に関する FAQ
※DHTML? アプレット? コントロール? いったいどれを使えばいいのか?
 --- Dynamic html, ActiveX control, Java appletは殆ど同一の追加機能を実現可。
 各長短を比較解説。　
スクリプティングのすべて 
Web ユーザーから入力を受け取る 1,001 通りの方法 

クライアント上の "DXML": Internet Explorer 5、データ アイランド、および XMLDOM オブジェクト
Internet Explorer での HTML フォーム Part 2
Internet Explorer での HTML フォームの操作
DHTML クールバーをアクセス可能にする
※Dynamic HTML クールバーの構築[9p]
 --- [Contents][Index ][Search][Glossary]といったCoolBarをボタン画像、テキスト
文字で表示。　サイズ調整、ボタンのon/offイメージ切替(CSS使用)など実例。
"DXML" のグローバル化 : ローカライズと XML/DHTML メニュー
"DXML" in Action: サイトへの DHTML メニューおよび TOC の実装
"DXML" Redux: XML から Dynamic HTML メニューを構築する 
※"DXML": 目次を XML から DHTML へ変換する[8p]
　--- XML+XSL+JScript+CSSで階層的なDynamic html目次を作成し、WEBページ表示方法。
　用途としては、sitemap,文書目次(リンク情報可)で全展開可。　ソースはXML-DB書式
であれば、殆どそのまま利用可能。

時間がかかる操作中に表示を更新する
DHTML から Web サービスへのアクセス
Dude の欲求不満 !
優れたダイアログの重要性
スリップ スライディング
コンポーネント、コンポーネント、コンポーネント 
原点に戻る 
配置と編集
Web サービス
ビバ！コンポーネント！
dataSrc に行くたびに設定
データ バインディングの楽しみ
更なるパフォーマンス向上のヒント
Jurassic Dude
仮想リストの再考
HTML アプリケーション
ベクトルとあなた
Tabula Rasa - DHTML によるテーブル操作 -
Dude の休日
カスタム コンテキスト メニュー、スクリプトからの印刷、ダイアログボックス
単純で軽量な仮想データバインド
非同期性: パフォーマンスの改善
夏の日々、DHTML はかんたん
条件分岐コメント、ラジオボタン
さらにダイナミックに
さまざまなトピックスから
データに自らを語らせよ
Mouseover の轟き: オブジェクト指向 HTML
DHTML ページのパフォーマンス向上
ページのデータをバインドする
DHTML におけるエラーの扱い方
Bubble Power: Internet Explorer 4.0 におけるイベント処理


●Languages & Development Tools

スクリプトにまつわる優れた効果と不満 
Windows Script Host 5.6 
JScript.NET の紹介
Web サービスのスクリプティング
Windows 2000: スクリプト天国 
データベースのためのスクリプト
Windows Script 5.5 の新機能
Windows Script Components - They Get Around (それらは歩き回る)
私にとってはすべてギリシャ語 (ちんぷんかんぷん)
スクリプト登場  
動くのなら、スクリプトにせよ 
Remote Scripting
正規表現による  Visual Basic Scripting Edition (VBScript) の機能強化
Take Five -- Version 5.0 スクリプトエンジンの新機能
Scriptlets -- 違いの分かるの人のためのコンポーネント 
VBScript それとも JScript?

Microsoft JScript Version 5.0 に追加された例外処理

Microsoft Visual SourceSafe を使った Web コンテンツの管理
Web Wizard SDK
- Web Wizard SDK 概要
- Web Wizard ドキュメント
Design-time Control SDK
ActiveX SDK
ActiveX Control Pad

Microsoft Technologies for Java
Windows Script Technologies
JScript サイト
JScript チュートリアル
- JScript ランゲージ リファレンス
VBScript サイト
VBScript チュートリアル
- VBScript ランゲージ リファレンス
Microsoft Script Debugger



●Reusing Browser Technology

Internet Explorer 5.5 の MSHTML 編集プラットフォーム
印刷プレビューを超えて : Internet Explorer 5.5 の印刷機能のカスタマイズ
印刷プレビュー 2 : Internet Explorer 5.5 印刷機能のカスタマイズ (続編)
Internet Explorer 5.5 を使った 編集可能な Web ページの作成方法







■一般サイト

●リソース



All About Japan: html > dhtml





●ニュースサイト



HotWired Japan : Webmonkey : WEB101 - 米国ニュース[日本語版]
HotWired Japan : Webmonkey : dynamic_html - 米国ニュース[日本語版]
HotWired Japan : Webmonkey : html - 米国ニュース[日本語版]
HotWired Japan : Webmonkey : Perl - 米国ニュース[日本語版]
HotWired Japan : Webmonkey : Animation - 米国ニュース[日本語版]






●主要サイト



DHtml station
 --- DynamicHTMLに関するサンプルや情報をがある。初心者用に 長所・短所の他ブラウ
ザの特徴も解説されている。

とほほのダイナミックHTML入門
 --- ダイナミックHTMLのサンプル、Internet Explorer・Netscape Navigatorのダイナミ
ックHTMLの違いなどを掲載。

M3-NET
 --- HTML、JavaScript、DynamicHTML、スタイルシート等について解説を掲載。
「ホップ・ステップ・ダイナミックHTML」のONLINE版 

Dhtml Club
 --- 今は、リンクと書籍案内[収録サンプルdl可]だけですね。




●BIGLOBE SoftPlaza DHTML特集



by Tomohiro Tamoto
第133号(1999/01/08)、第120号(1998/11/24)、第111号(10/07)[BIGLOBE SoftPlaza]
 本講座ではこのような最近のホームページで利用されはじめている「ダイナミックHTML」を利用したダイナミックなページ表現の方法と業界動向について紹介。

※前編（DHTMLとは）
ダイナミックなホームページの系譜| ダイナミックなホームページの手法
DHTMLとスタイルシート| HTMLの構造| 標準化| スタイルシートとは
スタイルシート書式| スタイルシート・リファレンス
※中編（スクリプト操作）
JavaScript| DOMとJavaScript| イベント処理| イベントを利用したJavaScript
ブラウザの識別| DREAMWEAVER J| スタイルシート操作| レイヤータグ| 互換性の注意点
※後編（動くコンテンツ）
リアルタイム時間表示| タイマーの利用| 時間変化| 展開式メニュー(IE)| オートスクロール
オブジェクトのスクロール| 奥行きの制御| クリッピング| 浮遊物



●Netscape DynamicHTML



Netscape DynamicHTML[英文]
 --- http://developer.netscape.com/tech/dynhtml/index.html
	Demos /Newsgroup /Client Technical FAQ /Documentation /Articles 
	★Sample Code /TechNote /Tools /Presentations /Books /Additional Resources




■書籍

★アスキー
Dynamic HTML実践ガイド
 Natanya Pitts‐Moultis/著 C.C.Sanders/著 Ramesh Chandak/著 福田昌弘/訳 \5800

★エムディエヌコーポレーション
INTERNETびっくりDynamic HTMLデザイン
 Jeff Rouyer/著 〔ランゲージドキュメンテーションサービス/訳〕 \4500

★[技術評論社]	http://www.gihyo.co.jp/
　目次とかの詳細あり。オンラインショッピング可。
改訂新版Dynamic HTMLポケットリファレンス	8cmCD-ROM1枚
2000年11月発行　アンク著　四六判　352ページ　1980円＋税　ISBN4-7741-1093-0
Dynamic HTMLでつくるホームページ 一歩先を行く、 松尾忠則/〔ほか〕著 \2580

★[秀和システム] http://www.shuwasystem.co.jp/
　目次とかの詳細あり。オンラインショッピング可。
だれでもカンタンDynamic HTMLサンプル集
高橋登史朗/著/ \2800/ISBNコード 4-87966-807-9 /初版発刊日 1998/07 /版型B5変/
色数 1/ページ数 228
使えるJavaScript&DynamicHTMLサンプル
著者 萩原真一 /本体価格 2,800円 /ISBNコード 4-7980-0059-0 /初版発刊日 2000/11 
判型 B5変 /色数 オールカラー /ページ数 344 

★[翔泳社]	http://www.shoeisha.com/
Dynamic HTMLがやってきた!
 アンク著 / 定価：2200円+税/B5変判　2色刷 248ページ/付属品：CD-ROM 1枚
ISBN4-88135-599-6 /1998/04/16 
Dynamic HTML+ASPアプリケーションブック
 恋川光央著 / 価：2800円+税/B5変判　344ページ/付属品：CD-ROM 1枚
ISBN4-88135-647-X/ 1998/08/31 

★[ソフトバンクパブリッシング] http://books.softbank.co.jp/
Dynamic HTMLパーフェクトテクニック
 Intern David Gulbransen/著 Kenrick Rawlings/著 ドッグズ・モア/訳編 \5800
出版日 98/04/03 /サイズ種別 Ｂ５変 1色 /ページ数 600 /ISBN 4-7973-0566-5 /付録CD-ROM

★日経BP社
はじめてのDynamic HTML Powerful new Simon St.Laurent/著 細井一雄/訳 豊田光智衣/訳 \2700

★日経BPソフトプレス
インサイドDynamic HTML Scott Issacs/著 富士通ラーニングメディア/訳 \6000
Dynamic HTMLサンプルガイド William J.Pardi/著 Eric M.Schurman/著 富士通ラーニングメディア/訳 \6000




■サンプル集～一般サイト

SimplyTheBest: DHTML scripts[PlanMagic Corp]	
ANIMATION, BACKGROUND, BUTTONS, COOKIES, DETECT/REDIRECT, FORMS, TABLES,
 ENHANCEMENTS, MENUS, MESSAGES, TIME & DATEの大量のスクリプト
Dynamic HTML cross-browser
 --- DynamicHTMLの初級応用編のサンプル集の他FreeFunctionやTip'sが掲載されている。
JavaScriptのサンプル集にもリンクされている。

Dynamic HTML Ito's Home
 --- 200を超えるDynamic HTML for IE4のSample集。

Dynamic HTML Samples for IE4
 --- ＩＥ4.0前提のDynamicHTMLサンプル集。ソース中にも各種コメントあり、115に分か
れているサンプルの中に更に細かく掲載さえれている。

HTML補完計画
 --- Internet Explorer4.0で採用されたDTMLなどの新機能の解説サイト。形状変化など
各種効果のサンプルや解説を掲載。
JSD++ for Site Builder
 --- ダイナミックHTMLのサンプル集、Java Script講座ほかを掲載。

ホームページ作成支援－ピクセル
 --- JavaScript・ダイナミックHTMLを使用したHPの自動生成システム。フォームへ入力
するだけでファイルが生成・表示される。その他、HTMLタグ辞典や・ダイナミックHTML・JavaScript研究室などもあり。

shingo.org
 --- オリジナルのDHTMLサンプルを公開しているサイト。関連ツールも紹介している。
Ywai with Dynamic HTML
 --- DynamicHTML使ったページづくりのための、簡単な基礎テクニックやHTMLとJavaScri
ptの解説。サンプル多数あり。

PAKURI館
 --- WEBサイト製作用の素材集、JavaScript集、CGI、DynamicHTML、HTMLの講座等を掲載。

プログラミングは道連れ
 --- C++、JavaScript、DynamicHTMLのプログラミングに関する情報を掲載。







■サンプル集～Microsoft

●DHTMLサンプルとツール[Microsoft MSDN]



※サンプル
次のサンプルは、Dynamic HTMLの様々な機能を理解するために用意したものである。
ダイナミックスタイル /位置指定 /DirectAnimationコントロール /パスコントロール
/スプライトコントロール /シーケンサコントロール /フィルタとトランジション
※ツール
スクリプトのデバッガ[Microsoft Script Debugger for IE]
フィルタウィザード /トランジションウィザード
CSS構文チェック用ツール[StyleT 2.0] *Internet Client SDK installationの\bin。
簡単なDirectAnimationコントロールを使ったページを作成するウィザード

●以下を参考に
Dynamic HTML
 --- http://www.microsoft.com/japan/developer/library/jpisdk/dhtml/dhtml.htm




■Dhtmlツール

●DHTML Assistant Ver.2.00
応OS：Windows 95/98/NT4.0/2000	種別：シェアウェア (2,000円)
作者名：桑原大輔氏	URL：http://www1.neweb.ne.jp/wa/dkuwa/
＊試用期限後利用不可

拡張タグにも対応する強力HTMLエディタ
　本ソフトは，テキストベースのタグ挿入型HTMLエディタだ。HTML4.01およびCSS1，CSS2
の一部，XHTML1.0，さらに「Internet Explorer 5.5」「Netscape Navigator 4.7」でサ
ポートされている拡張タグ等も編集可能。また，文字コードは，Shift-JIS, JIS, EUC, U
nicode (UTF-8, UTF-16) の入出力をサポートしている。

●ピクセル
JavaScript・DHTMLを使用したHPの自動生成システム
 フォームへ入力するだけでファイルが生成・表示される。
　JavaScript・ダイナミックHTMLなどの記述を覚えなくてもサンプルのようなページをこ
のサイトで自動生成できます。メニューのAutoCreaterから起動します。
　このサイトの運営にあたってはスクリプトなどを覚えなくても「誰でも簡単に…」を心
がけております。それとスクリプトのわかる方も作成の手間が省けると思います。
　また、ＨＴＭＬタグ辞典・ＨＴＭＬテクニックものぞいてください。
 その他、HTMLタグ辞典や・ダイナミックHTML・JavaScript研究室などもあり。







■HTML Application [HTA]

●HTML Applications の導入

: ブラウザから解き放たれた DHTML

Internet Explorer 5では、HTML Applications (HTA)が導入されています。これにより、「ブラウザから解放された」Dynamic HTML (DHTML)テクノロジを使ってスタンドアロン アプリケーションを作成することができます。HTAでは、アプリケーションを、Webページを作成する場合と同様にDHTMLやスクリプトを使って作成することも、Web用に作成されたコンテンツをベースに作成することもできます。

ここでいう「ブラウザから解放された」とは、HTAが2つの点でWebページとは大きく異なるということを意味しています。

HTA ソリューションの例

HTA を使用することで、さまざまなアプリケーションを作成できます。ここでは、HTAが優れたソリューションとなり得る代表的なシナリオをいくつか紹介します。

シンプルなHTA

HTAの機能を理解するには、実際にそれを作成してみるのが一番です。

<HTML>
<HEAD>
<TITLE>Simple HTML Application</TITLE>
</HEAD>
<BODY>
This is a simple HTML Application.
<BR>
<BUTTON onclick="self.close()">Exit</BUTTON>
</BODY>
</HTML>

この簡単な HTA どのように表示されるかご覧ください。 (このサンプルを表示するには、Internet Explorer 5 またはInternet Explorer 4.0 が必要です。).

このサンプル コードは、単純な HTML ページです。これにファイル拡張子 *.hta を付ければ、HTML アプリケーションを生成できます。.hta ファイルを起動するために、アプリケーションを起動します。<TITLE> タグ内の "Simple HTML Application" は、アプリケーション ウィンドウ タイトル、<BODY> タグ内のテキストはウィンドウのコンテンツとして表示され、<BUTTON> タグ内の "Exit" はHTMLボタンとして定義されています。

このアプリケーションは、ブラウザ上で通常みられるユーザー インターフェイスなしに実行されるので、終了(Exit)ボタンを備えています。DHTML Behaviors Library には、汎用化性を持たせた有用なサンプル コンポーネント(メニュー、ツールバーなどの一般的なグラフィック ユーザー インターフェイス)が収容されています。

この単純なサンプルは、HTMLページをどうやってHTAアプリケーションに変えるかを示したものです。ブラウザ上のDHTMLやスクリプトでできることはすべて、HTAアプリケーション ウィンドウのコンテンツ領域内でもうまく機能します。

<APPLICATION> タグの使用

HTAは、大部分が、Web コンテンツを作成するときに使用する DHTML 機能を拡張したものですが、<HTA:APPLICATION> タグを使用して実装されるアプリケーションの要求に特有の機能がいくつかあります。このタグを使用することで、たとえば、アプリケーションのアイコンを指定でき、ウィンドウのキャプションやボーダーをコントロールすることもできます。

アプリケーション タグは、<HEAD> セクション内に記述します。これは、アプリケーション ウィンドウの外観や機能をカスタマイズする複数の属性宣言からなります。上の例では、<HEAD> の下に次のタグを挿入して、アプリケーションのアイコンを指定できます。そのウィンドウには、システム メニューはいっさいありません。 

<HTA:APPLICATION ICON=simple.ico sysMenu=no>

<HTA:APPLICATION>タグで指定できる機能の詳細については、MSDN Online Web Workshop を参照してください。 ★ここではHTAのコマンドリファレンスとデモサンプルがある。 

●関連データ
HTML Applications の導入: ブラウザから解き放たれた DHTML
HTML Applications 概要
●コメント
　HTAを使用して「さまざまなアプリケーションを作成可能」とのこと。
デモ用サンプルでは、[Exit]ボタン、詳細の表示・非表示のボタンを作成。




㈱フクミ Fukumi Corporation
〒101-0032 東京都千代田区岩本町２－４－１０共同ビル（岩本町２丁目） tel.03-5687-2890 fax.03-5687-2918　URL:www.fukumi.co.jp/ 　E-Mail: mm@fukumi.co.jp
Tips 目次へ戻る。
ホームへ戻る。
作成：2001.3.20　最終更新:200.1.17　小菅博之