Mtk's Blog: [JavaScript] XMLコンテンツをWebに表示する

2014年3月22日土曜日

[JavaScript] XMLコンテンツをWebに表示する

Try to show the XML Web content with JavaScript

今回作るアプリケーション

XMLコンテンツJavaScriptを使ってブラウザーに表示させるブラウザーアプリを作ってみました。
JavaScriptネタはいろいろなサイトで紹介されていて出尽くしてる気がしますが一つくらい自分で作ってみようと思い至りました。

開発環境は次の通りです。
・Windows8 64bit + Internet Explorer 10
・Windows7 32bit + Internet Explorer 11
※Firefoxでは動作しませんでした。

JavaScriptでWebコンテンツを利用する上での問題点

仕様によりJavaScriptで扱えるWebコンテンツは制限があります。
Webサービスを提供するサーバーのドメイン名やプロトコル(オリジン)と、JavaScriptのコンテンツが置かれているサーバーのドメイン名が一致している場合に限ります。
クロスドメイン制限などと呼ばれるようです。
ただし、Webサービスを提供するサーバーが次のようなヘッダーを出力する場合はドメイン名が異なるサーバーからでも利用することができます。
Access-Control-Allow-Origin: *

ただし、最近は異なるオリジンにアクセスできるブラウザーもあるようです。
Internet Explorer 10/11では、ローカルドライブに保存されたhtmlファイルを実行する場合はクロスドメインの制限を受けないようで期待通りの動作をしました。
今回は、MSN産経ニュース http://sankei.jp.msn.com/rss/news/flash.xml をJavaScriptでWebに表示することにします。

ソース

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>sample</title>

  <style type="text/css">
    * { font-family: Arial, Helvetica, Sans-Serif; }
    table, th, td { vertical-align: top; border: solid 1px; }
    .nowrap_area { white-space: nowrap; }
  </style>

  <script type="text/javascript"><!--
  function showContent() {
    //ボタンを操作不可にする (連打禁止措置)
    var update_button = document.getElementById("update_button");
    update_button.disabled = true;

    //MSN産経ニュースのXML Webサービスを取得
    var url = "http://sankei.jp.msn.com/rss/news/flash.xml";
    var request = new XMLHttpRequest();
    request.open("GET", url, true);
    request.send("");
    request.onreadystatechange = function () {
      // readyState=4 はデータ受信完了
      if (request.readyState == 4) {
        // status=200 はリクエスト成功
        if (request.status == 200) {
          //テーブルに表示済みの内容を削除
          var content_table = document.getElementById("content_table");
          for (var i = content_table.rows.length - 1; i > 0; i--) {
            content_table.deleteRow(i);
          }

          //受信したXMLコンテンツをテーブルに表示
          var xml = request.responseXML;
          var items = xml.getElementsByTagName("item");
          var len = items.length;
          for (var i = 0; i < len; i++) {
            var item = items[i];

            //テーブルに行追加
            var row = content_table.insertRow(-1);

            //テーブルに1列目追加 (見出し)
            var xmlTitle = item.getElementsByTagName("title")[0].firstChild.nodeValue;
            var cell1 = row.insertCell(-1);
            cell1.innerHTML = xmlTitle;

            //テーブルに2列目追加 (概要とリンク)
            var cell2 = row.insertCell(-1);
            var xmlDescription = item.getElementsByTagName("description")[0].firstChild;
            var xmlLink = item.getElementsByTagName("link")[0].firstChild.nodeValue;
            //description要素が配信されない場合はnull
            var description = (xmlDescription != null ? xmlDescription.nodeValue + "<br />" : "")
              + "<a href=\"" + xmlLink + "\" target=\"_blank\">" + xmlLink + "</a>";
            cell2.innerHTML = description;

            //テーブルに3列目追加 (配信日時)
            var xmlPubDate = new Date(item.getElementsByTagName("pubDate")[0].firstChild.nodeValue);
            var cell3 = row.insertCell(-1);
            cell3.innerHTML = xmlPubDate.toLocaleString();
            //CSSで改行禁止に設定したクラス名を追加
            cell3.className = "nowrap_area";
          }
        }

        //データ受信後にボタンを操作可能にする
        update_button.disabled = false;
      }
    }
  }
  //-->
  </script>
</head>
<body>
  <input type="button" value="コンテンツ更新" id="update_button" onclick="showContent();" />

  <table id="content_table">
    <tr>
      <th>見出し</th>
      <th>概要とリンク</th>
      <th>配信日時</th>
    </tr>
  </table>
</body>
</html>

拡張子がhtmlのテキストファイルに次のソースを貼り付けて保存します。今回は sample.html というファイル名で保存しました。
※文字エンコードはBOM無しUTF-8に設定して下さい。

Internet Explorerを起動して保存したファイルをドラッグ・ドロップします。

「ブロックされているコンテンツを許可」ボタンをクリックします。

画面が表示されたら「コンテンツ更新ボタン」をクリックすると

その時点のMSN産経ニュースの情報を表示します。著作権保護のため画像の一部にぼかしを入れてます。

今回のサンプルは、ローカルドライブに保存したHTMLファイルをInternet Explorerで開くことが動作条件なので実用性はありません。

これを応用して、ザ・数唱 / Digit Span PLAY のWebページの表示言語を切替えるのに使ってみました。
http://www.fujiu.jp/AndroidApp/app010_digitspan.shtml

Androidアプリザ・数唱 / Digit span PLAY を公開しました。

0 件のコメント:

コメントを投稿

注: コメントを投稿できるのは、このブログのメンバーだけです。

Mtk's Blog

新アプリケーション