HTMLで記述するOBJECTタグ。これはActiveXやJAVAやFlashなど拡張オブジェクトを貼り付けるタグです。この中には様々な種類のものがありますが、今回はWindows環境で呼び出すことのできるカラーダイアログを呼び出してみることにします。
Windows環境でカラーダイアログはダイアログヘルパーという位置づけで提供されているので、オブジェクトをHTMLに貼り付け、公開されている関数を呼び出すとダイアログが表示される、という仕組みになっています。
それでは、カラーダイアログで選択された色をDIVタグ内の文字列の色に反映するサンプルです。Windows+IEをお使いの方は是非お試しくださいませ。
なお、このサンプルはうさのJavaScript講座サンプル集７のサンプル22でもご覧いただけます。テスト済環境は、Windows XP + IE6.0, Windows XP + IE7.0, Windows 2003 + IE7.0, Windows Vista + IE7.0です。

ソースはこちら↓

<script language="javascript"> <!-- //------------------------------------------------------------ //javascript by ＠うさ http://www.usagi-js.com/ //------------------------------------------------------------ function ShowColorTable() { //ダイアログの表示 var selectedColor = dialogHelper.ChooseColorDlg(); selectedColor = selectedColor.toString(16); //選択された色を反映 document.getElementById("divStrings").style.color = selectedColor; } //--> </script>

HTMLはこちら↓

<FORM><INPUT type="button" name="btnMove" value="カラーダイアログ表示" onClick="ShowColorTable()"></FORM> <div id="divStrings">ここの文字列の色を変更します♪</div> <OBJECT id=dialogHelper CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"></OBJECT>

3回ほどXML/XLST関連でご案内してきましたが、そんな堅苦しいのはﾔﾀﾞ！JavaScriptってむずいの？なんて思われてしまったかもしれませんね。
ということで、こんどはウェブサイトにもブログにも、動くものがほしいときのアクセントを作ってみるなんていかがでしょうか。
DIVタグで表示している画像を、ブラウザの高さに従ってスライドさせてみるサンプルをご紹介いたします。ただスライドしていくのには、現在のX軸Y軸のポジションをインクリメント/ディクリメント（＋－）すればいいのですが、せっかくJavaScriptでは、現在のWindow枠のサイズが取得できますのでその値を利用しながら動かしてみることにします。
↓のボタンをクリックすると、ブラウザの左上から左下まで画像が下向きに動いていきます。
うさのJavaSript講座では、サンプル集８-２４でDLすることができます。サンプル集８にはそのほか右へスライドしたり斜めへスライド、そしてウィンドウを1周グルリとするものもございます。お楽しみ下さいませ♪


ソースはこちら↓

<script language="javascript"> <!-- //------------------------------------------------------------ //javascript by ＠うさ http://www.usagi-js.com/ //------------------------------------------------------------ var nLayerHeight = 70; //レイヤーの高さのピクセル数をいれてください。 var nXPos; var nYPos; var nTimer; function Init() { nXPos = 0; nYPos = 0; SampleStartMove(); } function SampleStartMove() { nYPos++; //NNの場合 if (navigator.appName=="Netscape") { //画面の大きさを取得します nHeight = window.innerHeight - nLayerHeight; //次の座標が画面よりも大きければなにもしません if (nYPos > nHeight) { return; } //NN4 if(document.layers) { //レイヤーの幅と高さをマウス座標にセット document.layerSample.left = nXPos; document.layerSample.top = nYPos; } //NN6 else { document.getElementById("layerSample").style.left = nXPos; document.getElementById("layerSample").style.top = nYPos; } } //IEの場合 if (document.all) { //画面の大きさを取得します。 nHeight = document.body.clientHeight - nLayerHeight; //次の座標が画面よりも大きければなにもしません if (nYPos > nHeight) { return; } //レイヤーの幅と高さを座標にセット layerSample.style.left = nXPos; layerSample.style.top = nYPos; } nTimer=setTimeout("SampleStartMove()",10); //タイマー } //--> </script>

HTMLはこちら↓

<DIV id="layerSample" style="position : absolute;left : 3px;top : 8px;width : 117px;height : 70px;visibility : visible; z-index : 1;" align="center"> <IMG src="images/usa_java.gif" width="54" height="19" border="0"> レイヤー部分です</DIV>

うさのJavaScript講座サンプル集にある、XMLやXSLTと連動するサンプル集１２に、XSLT内でJavasScriptを記述するサンプルを追加いたしました。
XMLにはダイレクトにXSLTを見に行くようにしていますので、サンプル見るアイコンをクリックしていただくと、お使いのブラウザでXMLを起動しどのような感じになるかご覧いただけます。
是非お試しくださいませ～♪

前回おとどけした、XMLを読み込むサンプルに引き続き、今回はXSLTをAppendしてあげようではないか！というサンプルです。
え？＜?xml-stylesheet type="text/xsl" href="xsltファイル名"?＞をXMLに書けばいいからJavaScriptでやらなくってよい？そんな場合もあります。でも、XMLがどんなものでもいい場合や、XMLはどこかのコードで生成されていてスキーマしか分かっていない場合、XSLTを動的に切り替えたい場合なんかには役に立つかもしれません。
ということで、今回もIE6,7,Firefox2.0,Opera9.0で動作確認していますサンプルをお届けしますのでお楽しみくださいませ♪
なお、このサンプルは、このブログのRSSをXMLとしていますが、うさのJavaScript講座サンプル集12-サンプル5ではHTML/XML/XSLTセットでDLできます。




ソースはこちら↓

<script language="javascript"> <!-- //------------------------------------------------------------ //javascript by ＠うさ http://www.usagi-js.com/ //------------------------------------------------------------ var xmlDocument, xslDocument; var fileName = "index.xml"; var xsltFileName = "sample5.xslt"; var browserFlag = false; //読み込みスタート function ViewTitle() { if (document.implementation.createDocument) { browserFlag = true; //XML xmlDocument = document.implementation.createDocument("", "sampleXML", null); xmlDocument.onload = loadXslt; xmlDocument.load(fileName); } else //IE { //XML xmlDocument = new ActiveXObject("Microsoft.XMLDOM"); xmlDocument.async = false; xmlDocument.load(fileName); //XSLT xslDocument = new ActiveXObject("Microsoft.XMLDOM"); xslDocument.async = false; xslDocument.load(xsltFileName); appendXslt(); } } //IE以外の場合のXSLTのロード function loadXslt() { if (browserFlag) { xslDocument = document.implementation.createDocument("", "sampleXSLT", null); xslDocument.onload = appendXslt; xslDocument.load(xsltFileName); } } //XMLとXSLTをくっつける関数 function appendXslt() { if (browserFlag) { xsltProc = new XSLTProcessor(); xsltProc.importStylesheet(xslDocument); outString = xsltProc.transformToFragment(xmlDocument, document); //表示 document.getElementById("xmlValues").appendChild(outString); } else //IE { outString = xmlDocument.transformNode(xslDocument); //表示 document.getElementById("xmlValues").innerHTML = outString; } } //--> </script>

XSLTはこちら↓

<?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:variable name="items" select="//*[local-name()='item']" /> <xsl:template match="*"> <html> <body> <xsl:choose> <xsl:when test="count($items)>0"> <table border="1" width="100%"> <tr> <td>タイトル </td> <td>リンク </td> </tr> <xsl:apply-templates select="$items" mode="item" /> </table> </xsl:when> </xsl:choose> </body> </html> </xsl:template> <xsl:template match="*" mode="item"> <xsl:variable name="item-title" select=".//*[local-name()='title']" /> <xsl:variable name="item-link" select=".//*[local-name()='link']" /> <tr> <xsl:if test="string-length($item-title)"> <td> <xsl:value-of select="$item-title" /> </td> </xsl:if> <xsl:if test="contains($item-link, 'http')"> <td> <a href="{$item-link}"> <xsl:value-of select="$item-link" /> </a> </td> </xsl:if> </tr> </xsl:template> </xsl:stylesheet>

XMLファイルをロードし表示するサンプルをうさのJavaScript講座サンプル集12に追加しました。
あたためてきたXML関連サンプル（もう何年もたっちゃっていつのまにかActiveXのよびだすObject名変わってましたが（汗））です。
以前ActiveXサンプルで一瞬だけ公開していたのですが、今日現在での動作確認をして再度整理してみました。FirefoxとOpera、IEで確認しています。7年くらい前からシステム屋さんやってたころ以来なんでもXMLでしたが、Webの世界もRSSやWebService、AjaxをはじめとしてなんでもXMLがわからないと・・・という時代なんでしょうか。うさは個人的にXML大好きです。最近システム屋さんの仕事でXPathと久し振りに格闘していましたが楽しくってしょーがない。ｗｗｗ。とまぁ、そんな話はおいといて、このブログのRSSのItemを読むサンプルをここで紹介してみます。channelの下にあるitem内のtitleとlinkのValueですネ。名付けて「プチ★ローカルRSSリーダー」♪




ソースはこちら↓

<script language="javascript"> <!-- // javascript by ＠うさ http://usagi-js.com/ var xmlDocument; var fileName = "index.xml"; //読み込みスタート function ViewTitle() { if (document.implementation.createDocument) { xmlDocument = document.implementation.createDocument("", "sample", null); xmlDocument.onload = readXml; xmlDocument.load(fileName); } else //IE { xmlDocument = new ActiveXObject("Microsoft.XMLDOM"); xmlDocument.async = false; xmlDocument.load(fileName); readXml(); } } //ロード時読み込み関数 function readXml() { var outString = ""; var objItems = xmlDocument.getElementsByTagName("item"); 　　　　　　　//とりあえず５つにしておきます。すべてのときは、objItems.lengthまでLoopしてください。 for (loop = 0; loop < 5; loop++) { var valueTitle = objItems[loop].getElementsByTagName("title"); var valueLink = objItems[loop].getElementsByTagName("link"); outString += "<br><b>アイテム" + (loop+1) + "つめ</b><br>"; outString += valueTitle[0].childNodes.item(0).nodeValue + "<br>"; outString += "<a href='" + valueLink[0].childNodes.item(0).nodeValue + "'>続きを読む</a><br>"; } ShowValue(outString); } //表示 function ShowValue(textValue) { document.getElementById("titleValue").innerHTML = textValue; } --> </script>