Local環境のXMLファイルからJavascriptを使って情報を取得する方法

# はじめに
Local環境にてXMLファイルからJavascriptを使って情報を取得する方法について自分なりにプログラムを作成してみたのでまとめました。
ニッチな内容でほとんどの人に役に立たないことかもしれませんが、ハードを使う事業をしている人にとっては割と役に立つのではないかと思います。
困っている方がいればその人に役立てばなと思っています。

#### 関連リンク
Local環境で色々なことをする関連リンクを下記に載せておくので、参考にしてください。。
こちらもニッチではありますが、なかなかおもしろいです。


https://qiita.com/syukan3/items/c20ed695c1d676799a5a

https://qiita.com/syukan3/items/dd907b7cd3ed86025546

https://qiita.com/syukan3/items/091b9b7f826dd9bec532

# やりたいこと
ブラウザにてHTMLファイル（get_local_xml.html）に埋め込んだJavascriptを動かして、ローカル上にあるXMLファイル（config.xml）から情報を取得したい。


# XMLHttpRequestではなぜダメなのか。
XMLHttpRequestでコードを書いてみたのですが、下記リンク先の通りセキュリティでエラーが出てしまいました。。

https://teratail.com/questions/18457

https://answers.microsoft.com/ja-jp/ie/forum/ie9-windows_7/ie9%e3%81%a7%e3%81%aejavascript/a6d34ed2-2e50-495b-a648-1fdeb2de9090?msgId=724c2c40-4a46-4e22-b316-3c0098dca056

# ActiveXObjectを使えばローカル上のファイルからも情報を取得できる。

http://akon.sakura.ne.jp/map/activexobject.htm


# コード実装

get_local_xml.html　に埋め込んだ Javascript を動かして、 config.xml の informationタグの1つ目の value の値を取得する。

* ポイント
    * jQuery 1.9.1 をローカルから参照する。（jQuery 3系では動かない）
    * 外部ファイルの内容を text データで出力されるので、XMLに変換して取得したい情報をとる。


```XML:config.xml
<?xml version="1.0" encoding="Shift_JIS"?>
<configuration>
  <!-- 下の "1" という値を取得したい -->
  <information value="1"/>
  <information value="2"/>
  <information value="3"/>
  <information value="4"/>
  <information value="5"/>
</configuration>

```


```HTML:get_local_xml.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>get_local_xml</title>
  </head>
  <body>
    <!-- jquery 読み込み (3系だと使用できない) -->
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <script type="text/javascript">
      // Microsoft.XMLHTTP が使えない場合は XMLHttpRequest
      $.ajaxSetup({
        xhr: function() {
            try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { return new XMLHttpRequest(); }
        }
      });

      // 外部ファイルのパス、参照したいファイル先に書き換える
      var config_path = 'config.xml';

      $.ajax(config_path, {
        complete: function(e){
            // 外部ファイルの内容を text データで出力
            var data = e.responseText;

            // text -> xml 変換
            var dom_parser = new DOMParser();
            var document_obj = dom_parser.parseFromString(data, "text/xml");

            // xml から information を抽出
            // ご自身が使う xml の内容に合わせて、コードを変更してください。
            console.log(document_obj.documentElement.getElementsByTagName("information")[0].getAttribute("value"));
        }
      });
    </script>
  </body>
</html>

```

ローカル環境のみで完結させたいため、下記リンク先を参照する訳ではなくコードを丸々コピーする。
ちなみにこの方法だと、jQuery 3系だと動かないため注意。

* jQuery 1.9.1
    * https://code.jquery.com/jquery-1.9.1.js

```javascript:jquery-1.9.1.js
// 上記のリンクからここにコピーする。
// ローカル環境のみで完結させたいため、リンク先を参照する訳ではなくコードを丸々コピーする。
```


# まとめ
ブラウザはローカル環境にて使用されることを想定していないと思いますので、使用する際は必ず検証を行なった上で使ってみてください。


# 参考
* ローカル(file:///)上で外部ファイル読み込みのセキュリティ制約を回避するいくつかの方法
    * https://qiita.com/nissuk/items/1ede2953a8661dc59214
* [*その他*] ChromeにてAjaxでローカルファイルにアクセス
    * https://qiita.com/cigalecigales/items/33afaa42f91542ffa62e
* DOMParser について
    * https://hakuhin.jp/js/dom_parser.html

---
### 会社紹介

**株式会社 Mosaica**  
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。  

詳しくは [公式サイト](https://mosaica.co.jp/) までお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/