最初に
当該関数自体はプラットフォームを問わないが、下記の環境を前提に話を進めて行く。
- OS: Windows
- Webサーバ: Apache HTTP Server (XAMPP)
- エディタ: Visual Studio Code for the Web
ファイルを作成
- **Visual Studio Code for the Web**を開く
- Ctrl+Shift+E で左サイドバーを展開
- 「Open Folder」ボタンをクリックし、「xampp」フォルダを選択（標準ではCドライブ直下）
- 「htdocs」フォルダを右クリックし、「New File」をクリックする手順で、次の4つのファイルを作成
- dict.xml
- function.js
- sample.js
- testing.html
4つのファイルの中身は、次の通り。
dict.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE dict [
<!ELEMENT dict (item)* >
<!ELEMENT item (#PCDATA) >
<!ATTLIST item key ID #REQUIRED >
]>
<dict>
<item key="項目-01">項目-01の値</item>
<item key="項目-02">項目-02の値</item>
<item key="項目-03">項目-03の値</item>
<item key="項目-04">項目-04の値</item>
<item key="項目-05">項目-05の値</item>
</dict>
function.js
// -*- coding: UTF-8; -*-
/*
* 指定したXMLファイルのDocumentオブジェクトを取得する関数
*/
function getXMLDocument(url) {
const xmlhttp = (
window.XMLHttpRequest
? new XMLHttpRequest()
: new ActiveXObject('Microsoft.XMLHTTP')
);
xmlhttp.open('GET', url, false);
xmlhttp.overrideMimeType('text/xml');
xmlhttp.send();
return xmlhttp.responseXML;
}
sample.js
// -*- coding: UTF-8; -*-
// XMLファイル'dict.xml'のDocumentオブジェクトを取得
const xmlDocument = getXMLDocument('dict.xml');
document.write("<h2>項目一覧</h2>");
document.write("<dl>");
const items = Array.from(xmlDocument.getElementsByTagName('item'));
items.forEach(function(item) {
document.write("<dt>" + item.attributes['key'].nodeValue + "</dt>");
document.write("<dd>" + item.childNodes[0].nodeValue + "</dd>");
});
document.write("</dl>");
testing.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>XMLファイルからデータを取得</title>
</head>
<body>
<!-- getXMLDocument関数を定義したスクリプト -->
<script type="text/javascript" src="function.js" charset="UTF-8"></script>
<!-- getXMLDocument関数を用いたサンプルスクリプト -->
<script type="text/javascript" src="sample.js" charset="UTF-8"></script>
</body>
</html>
Webサーバを起動
- 「XAMPP Control Panel (XAMPPコントロールパネル)」を開く
- Apache を「Start」
- ブラウザを起動し、
http://localhost/testing.htmlを開く