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に表示することにします。

ソース


拡張子が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 を公開しました。

関連ブログ

[JavaScript] テキストボックスやボタンの幅を変えるアニメーション
オープンストリーム・Biz/Browserでアプリ開発

※画像を作成するに当たり 矢印のフリーイラスト【素材っち】 http://sozaizchi.com/sozai/line/yajirushi/ の素材を使用しました。

以上、参考になれば幸いです。

0 件のコメント:

コメントを投稿