XMLをブラウザで表示する完全ガイド｜見やすく整形して確認する方法

XMLファイルをダブルクリックしてブラウザで開くと、こんな状況に遭遇することがあります。

「改行されずに、一行にずらっと表示される…」
「どこが階層になっているのか分からない…」
「もっと見やすく表示できないの？」

実は、ブラウザでXMLを見やすく表示する方法がいくつかあります。

この記事では、XMLファイルをブラウザで確認する方法から、見やすく整形するテクニックまで、初心者の方にも分かりやすく解説していきます。

XML（eXtensible Markup Language）とは？
ブラウザでXMLを表示する基本
ブラウザでXMLが見やすく表示される仕組み
XMLが見にくい時の対処法
XSLTでXMLをスタイリングする
オンラインXMLビューアーツール
1. 主要なオンラインツール
2. オンラインツールの使い方
ブラウザ拡張機能・アドオン
プログラムでXMLを扱う
XMLの検証（バリデーション）
よくある問題と解決方法
ベストプラクティス
まとめ：XMLをブラウザで快適に確認しよう

XML（eXtensible Markup Language）とは？

まず、XMLの基本から理解しましょう。

XMLは「eXtensible Markup Language（拡張可能なマークアップ言語）」の略で、データを構造化して保存・交換するための言語です。

一言で言うと、人間にも機械にも読みやすい形式でデータを記述する方法です。

HTMLとXMLの違い

HTML（HyperText Markup Language）：

Webページを表示するための言語
タグが決まっている（<h1>、<p>、<div>など）
見た目を定義

XML（eXtensible Markup Language）：

データを保存・交換するための言語
タグを自由に定義できる
データの構造を定義

XMLの例

<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
  <book category="fiction">
    <title>ハリー・ポッター</title>
    <author>J.K.ローリング</author>
    <year>1997</year>
    <price>1800</price>
  </book>
  <book category="non-fiction">
    <title>サピエンス全史</title>
    <author>ユヴァル・ノア・ハラリ</author>
    <year>2011</year>
    <price>2200</price>
  </book>
</bookstore>

階層構造で、データが整理されていますね。

XMLの用途

設定ファイル：

AndroidのレイアウトXML
Maven、Gradleの設定ファイル（pom.xml、build.gradle）
Webアプリケーションの設定（web.xml）

データ交換：

APIのレスポンス（最近はJSONが主流）
RSS/Atomフィード
SVG（スケーラブル・ベクター・グラフィックス）

文書形式：

Microsoft Office（.docx、.xlsxは実はZIP圧縮されたXML）
電子書籍（EPUB）

ブラウザでXMLを表示する基本

XMLファイルをブラウザで開く方法です。

方法1：ファイルをドラッグ&ドロップ

手順：

XMLファイルを準備
ブラウザを開く
XMLファイルをブラウザウィンドウにドラッグ&ドロップ

方法2：ファイルを開く

手順：

ブラウザを開く
Ctrl+O（またはCmd+O）を押す
XMLファイルを選択
「開く」をクリック

方法3：URLを直接入力

XMLファイルがWeb上にある場合：

file:///C:/Users/username/Documents/sample.xml

または

https://example.com/data.xml

ブラウザごとの表示の違い

Google Chrome：

ツリー構造で表示
折りたたみ可能
シンタックスハイライト（色分け）あり

Firefox：

ツリー構造で表示
XMLツールバーが表示される
シンタックスハイライトあり

Microsoft Edge：

Chromeと同じChromiumベース
同様のツリー表示

Safari：

ソースコード形式で表示
やや見にくい

ブラウザでXMLが見やすく表示される仕組み

なぜブラウザでXMLがきれいに表示されるのでしょうか。

ブラウザの自動整形機能

現代のブラウザは、XMLを開くと自動的に：

インデント（字下げ）を追加
色分け（シンタックスハイライト）
階層構造をツリー表示

してくれます。

ChromeでのXML表示

特徴：

要素を折りたたみ・展開できる
タグが青色
属性が茶色
値が黒色
コメントが緑色

操作：

三角マーク（►）をクリックで折りたたみ
もう一度クリックで展開

FirefoxでのXML表示

特徴：

上部にXMLツールバーが表示
CSSを適用可能
XSLTスタイルシートに対応

ツールバー機能：

XMLソースを表示
CSSを有効/無効
XSLTスタイルシートの適用

XMLが見にくい時の対処法

XMLがうまく表示されない場合の解決方法です。

問題1：一行で表示される

原因：
XMLファイルに改行やインデントがない

例（見にくい）：

<?xml version="1.0"?><bookstore><book><title>Sample</title><author>John</author></book></bookstore>

解決方法：

方法A：オンラインツールで整形

https://www.freeformatter.com/xml-formatter.html にアクセス
XMLコードを貼り付け
「Format XML」ボタンをクリック
整形されたXMLをコピー

方法B：テキストエディタで整形

Visual Studio Code：

XMLファイルを開く
Shift+Alt+F（Windows/Linux）またはShift+Option+F（Mac）
自動的に整形される

Sublime Text：

XMLファイルを開く
パッケージ「Indent XML」をインストール
Ctrl+K, Ctrl+F で整形

方法C：コマンドラインで整形（Linux/Mac）

xmllint --format input.xml > output.xml

問題2：文字化けする

原因：
文字エンコーディングが正しく指定されていない

解決方法：

XMLファイルの先頭に正しいエンコーディングを指定：

<?xml version="1.0" encoding="UTF-8"?>

日本語を含む場合は、必ずencoding="UTF-8"を指定しましょう。

問題3：エラーメッセージが表示される

よくあるエラー：

「XML Parsing Error: mismatched tag」

開始タグと終了タグが一致していません。

<!-- 間違い -->
<title>Sample</titel>

<!-- 正しい -->
<title>Sample</title>

「XML Parsing Error: not well-formed」

XMLの構文が正しくありません。

<!-- 間違い（閉じタグがない） -->
<book>
  <title>Sample

<!-- 正しい -->
<book>
  <title>Sample</title>
</book>

「XML Parsing Error: unclosed token」

タグが閉じられていません。

<!-- 間違い -->
<book>
  <title>Sample</title>

<!-- 正しい -->
<book>
  <title>Sample</title>
</book>

XSLTでXMLをスタイリングする

XMLに見た目を追加する方法です。

XSLTとは？

XSLT（eXtensible Stylesheet Language Transformations）は、XMLを別の形式（HTMLなど）に変換するための言語です。

XMLにスタイルシート（デザイン）を適用できます。

基本的な使い方

ステップ1：XSLTファイルを作成

style.xsl：

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="/">
    <html>
      <head>
        <title>書籍一覧</title>
        <style>
          table { border-collapse: collapse; width: 100%; }
          th, td { border: 1px solid black; padding: 8px; text-align: left; }
          th { background-color: #4CAF50; color: white; }
        </style>
      </head>
      <body>
        <h2>書籍一覧</h2>
        <table>
          <tr>
            <th>タイトル</th>
            <th>著者</th>
            <th>年</th>
            <th>価格</th>
          </tr>
          <xsl:for-each select="bookstore/book">
            <tr>
              <td><xsl:value-of select="title"/></td>
              <td><xsl:value-of select="author"/></td>
              <td><xsl:value-of select="year"/></td>
              <td><xsl:value-of select="price"/>円</td>
            </tr>
          </xsl:for-each>
        </table>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

ステップ2：XMLファイルにXSLTを関連付け

XMLファイルの先頭に追加：

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="style.xsl"?>
<bookstore>
  <book>
    <title>ハリー・ポッター</title>
    <author>J.K.ローリング</author>
    <year>1997</year>
    <price>1800</price>
  </book>
</bookstore>

ステップ3：ブラウザで開く

XMLファイルをブラウザで開くと、XSLTが適用されて見やすい表形式で表示されます。

CSSでスタイリング（シンプルな方法）

XSLTより簡単な方法として、CSSも使えます。

style.css：

bookstore {
  display: block;
  background-color: #f0f0f0;
  padding: 20px;
}

book {
  display: block;
  background-color: white;
  margin: 10px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

title {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

author {
  display: block;
  color: #666;
  margin-bottom: 5px;
}

year, price {
  display: inline-block;
  color: #888;
  margin-right: 10px;
}

XMLファイルに追加：

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<bookstore>
  <!-- ... -->
</bookstore>

オンラインXMLビューアーツール

Webブラウザで使える便利なツールです。

主要なオンラインツール

1. Code Beautify XML Viewer

URL: https://codebeautify.org/xmlviewer
ツリービュー、テキストビュー切り替え可能
検証機能付き

2. FreeFormatter XML Formatter

URL: https://www.freeformatter.com/xml-formatter.html
整形とミニファイ（圧縮）が可能
エラー表示あり

3. XML Grid

URL: https://xmlgrid.net/
Excel風の表形式で表示
編集も可能

4. JSON Formatter（XML対応）

URL: https://jsonformatter.org/xml-formatter
オンラインで整形
ダウンロード可能

オンラインツールの使い方

基本的な流れ：

ツールのWebサイトにアクセス
XMLコードを貼り付け、またはファイルをアップロード
「Format」「Beautify」「Parse」ボタンをクリック
整形されたXMLが表示される
必要に応じてダウンロード

ブラウザ拡張機能・アドオン

ブラウザの機能を強化するツールです。

Chrome拡張機能

XML Tree

XMLをツリー表示
検索機能付き
折りたたみ可能

XV – XML Viewer

シンプルで見やすい
シンタックスハイライト
軽量

Firefox拡張機能

XML Viewer

XMLを見やすく表示
カスタマイズ可能
ツリー表示

インストール方法

Chrome：

Chrome Web Storeにアクセス
「XML Viewer」で検索
「Chromeに追加」をクリック

Firefox：

Firefoxアドオンサイトにアクセス
「XML Viewer」で検索
「Firefoxに追加」をクリック

プログラムでXMLを扱う

開発者向けの情報です。

JavaScript（ブラウザ）

// XMLをパース
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "text/xml");

// 要素を取得
const books = xmlDoc.getElementsByTagName("book");

// 表示
for (let book of books) {
  const title = book.getElementsByTagName("title")[0].textContent;
  const author = book.getElementsByTagName("author")[0].textContent;
  console.log(`${title} by ${author}`);
}

Python

import xml.etree.ElementTree as ET

# XMLファイルを読み込み
tree = ET.parse('books.xml')
root = tree.getroot()

# 要素を取得
for book in root.findall('book'):
    title = book.find('title').text
    author = book.find('author').text
    print(f"{title} by {author}")

Node.js

const fs = require('fs');
const { parseString } = require('xml2js');

// XMLファイルを読み込み
const xml = fs.readFileSync('books.xml', 'utf8');

// パース
parseString(xml, (err, result) => {
  if (err) throw err;
  console.log(JSON.stringify(result, null, 2));
});

XMLの検証（バリデーション）

XMLが正しい構文かチェックする方法です。

オンライン検証ツール

XML Validator

URL: https://www.xmlvalidation.com/
構文チェック
エラー箇所を表示

ブラウザの開発者ツール

Chrome DevTools：

F12キーで開発者ツールを開く
Consoleタブを確認
XMLエラーがあれば表示される

コマンドライン（Linux/Mac）

xmllint --noout books.xml

エラーがなければ何も表示されません。

よくある問題と解決方法

XMLを扱う際のトラブルシューティングです。

問題1：ブラウザでダウンロードされてしまう

原因：
サーバーが正しいContent-Typeを送信していません。

解決方法：

サーバー設定で、XMLファイルのContent-Typeを指定：

Content-Type: application/xml

または

Content-Type: text/xml

問題2：特殊文字がエラーになる

原因：
XMLでは、<、>、&などの特殊文字はエスケープが必要です。

解決方法：

<!-- 間違い -->
<description>5 < 10 && 10 > 5</description>

<!-- 正しい -->
<description>5 &lt; 10 &amp;&amp; 10 &gt; 5</description>

エスケープ文字：

< → <
> → >
& → &
" → "
' → '

問題3：名前空間エラー

原因：
XML名前空間（xmlns）が正しく指定されていません。

解決方法：

<?xml version="1.0" encoding="UTF-8"?>
<bookstore xmlns="http://example.com/books">
  <book>
    <title>Sample</title>
  </book>
</bookstore>

問題4：大きなXMLファイルが開けない

原因：
ブラウザのメモリ制限

解決方法：

専用のXMLエディタを使用（XMLSpy、Oxygen XML Editorなど）
コマンドラインツールで処理
ファイルを分割

ベストプラクティス

XMLを扱う際の推奨事項です。

1. 適切なエンコーディングを指定

<?xml version="1.0" encoding="UTF-8"?>

2. 整形されたXMLを保存

人間が読みやすいように、改行とインデントを入れましょう。

3. コメントを活用

<!-- これは書籍のデータです -->
<bookstore>
  <!-- フィクション書籍 -->
  <book category="fiction">
    <title>ハリー・ポッター</title>
  </book>
</bookstore>

4. 適切なツールを使う

開発：Visual Studio Code、IntelliJ IDEA
閲覧：ブラウザ、専用XMLビューアー
検証：xmllint、オンライン検証ツール

5. スキーマを使用（高度）

XMLスキーマ（XSD）を定義することで、データの妥当性を検証できます。

まとめ：XMLをブラウザで快適に確認しよう

XMLファイルは、ブラウザで簡単に確認できます。

この記事のポイント：

XMLはデータを構造化する言語
現代のブラウザは自動的に整形表示
見にくい場合はオンラインツールで整形
XSLTやCSSでスタイリング可能
ブラウザ拡張機能で機能強化

基本的な確認方法：

XMLファイルをブラウザにドラッグ&ドロップ
ツリー構造で表示される
折りたたみ・展開で階層を確認

整形が必要な場合：

オンラインツールにアクセス
XMLを貼り付け
「Format」ボタンをクリック
整形されたXMLをコピー

XSLTでスタイリング：

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="style.xsl"?>
<bookstore>
  <!-- ... -->
</bookstore>

覚えておきたいこと：

エンコーディングはUTF-8を指定
特殊文字はエスケープが必要
開始タグと終了タグを一致させる
大きなファイルは専用ツールを使用
オンラインツールが便利

XMLは一見複雑に見えますが、ブラウザや便利なツールを使えば、簡単に確認・編集できます。

この記事で紹介した方法を使って、XMLファイルを快適に扱ってくださいね！

XML（eXtensible Markup Language）とは？

HTMLとXMLの違い

XMLの例

XMLの用途

ブラウザでXMLを表示する基本

方法1：ファイルをドラッグ&ドロップ

方法2：ファイルを開く

方法3：URLを直接入力

ブラウザごとの表示の違い

ブラウザでXMLが見やすく表示される仕組み

ブラウザの自動整形機能

ChromeでのXML表示

FirefoxでのXML表示

XMLが見にくい時の対処法

問題1：一行で表示される

問題2：文字化けする

問題3：エラーメッセージが表示される

XSLTでXMLをスタイリングする

XSLTとは？

基本的な使い方

CSSでスタイリング（シンプルな方法）

オンラインXMLビューアーツール

主要なオンラインツール

オンラインツールの使い方

ブラウザ拡張機能・アドオン

Chrome拡張機能

Firefox拡張機能

インストール方法

プログラムでXMLを扱う

JavaScript（ブラウザ）

Python

Node.js

XMLの検証（バリデーション）

オンライン検証ツール

ブラウザの開発者ツール

コマンドライン（Linux/Mac）

よくある問題と解決方法

問題1：ブラウザでダウンロードされてしまう

問題2：特殊文字がエラーになる

問題3：名前空間エラー

問題4：大きなXMLファイルが開けない

ベストプラクティス

1. 適切なエンコーディングを指定

2. 整形されたXMLを保存

3. コメントを活用

4. 適切なツールを使う

5. スキーマを使用（高度）

まとめ：XMLをブラウザで快適に確認しよう

Youtube

カテゴリー別人気記事

コメント