質問: お世話になっております。 サーバー上()に在るテキストデータを取得し、その内容を表示させようと思っております。 1. テキストデータ(text/plain)をWebから取得する方法と、 2. その内容を表示する方法 を ご教授頂けないでしょうか? よろしくお願いします。
回答: ### サーバからのデータ取得 クライアントサイドJavaScriptでHTTP通信し、データを得るにはXMLHttpRequestを使います。 これはMonaca(Cordova)でも同じです。 XMLHttpRequestに関してはjQueryなどのライブラリに任せるかもしれませんが、大まかに流れを述べると、 ``` //XMLHttpRequestオブジェクトを生成 var req = new XMLHttpRequest(); // 今回はデータの取得だけなので"GET"とURLを指定してopen req.open("GET", url); // onreadystatechangeにコールバック関数を代入 req.onreadystatechange = function() { // コールバック関数内でreadyStateをチェックし、ステータスが完了になっていれば処理をする if (req.readyState === XMLHttpRequest.DONE){ // HTTPリクエストのステータスはreq.statusに入っている // GETに成功すると200のようです if(req.status === 200) { // 得られたテキストデータはreq.responseTextに入っている ``` といった感じです。 ### テキストの表示 JavaScriptでテキストをユーザに表示するには、alertなども使えますがDOMに追加するのがよいでしょう。 何らかのUIライブラリを使っていれば簡単な方法が用意されているかもしれませんが、自分で書くならばHTMLでpre要素を用意しておき、それのコンテンツとしてテキストを設定するのが簡単だと思います。 ``` // idが"text"の要素があるとして、 var text_elm = document.getElementById("text"); // このようにtextContentで設定すると面倒が無く簡単 text_elm.textContent = text_string; ``` ### セキュリティ上の制限 上の2点をまとめたものがこのスニペットですが、注意点があります。 ``` var url = "https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css"; var button_elm = document.getElementById("load_button"); var text_elm = document.getElementById("text"); function load(){ var req = new XMLHttpRequest(); req.open("GET", url); req.onreadystatechange = function() { if (req.readyState === XMLHttpRequest.DONE){ if(req.status === 200) { text_elm.textContent = req.responseText; } else { text_elm.textContent = "読み込みに失敗:ステータス: " + req.status; } } }; text_elm.textContent = "読み込み中..."; req.send(null); } button_elm.addEventListener("click", load, false); ``` ``` CDNからnormalize.cssを読み込む ``` このスニペットでは読み込むテキストとして (CDNで配布されているスタイルシートです) を使っていますが、これの代りに例えば などを読もうとすると普通のWebブラウザでは動きません。 WebブラウザのXMLHttpRequestでアクセス出来るURLは、JavaScriptが動いているHTMLと同じ出自(ドメインなどで決まる)に制限されているためです(CDNのファイルは広く配布するための物なのでこの制限を緩めています)。 質問の対象となっているMonaca、Cordovaなどでは、この制限は解除できます。 **但し、ユーザに信用出来ないURLにアクセスさせるようなアプリケーションでは、この制限無しではセキュリティ上の問題が発生します。** そこは気を付けて下さい。 Monacaの場合、iOSとAndroid向けのビルドではデフォルトで解除されていそうですが、これは確認していません。 Chrome向けビルドの場合はデフォルトでは制限されており、manifest.jsonで制限を解除する必要があります。 設定の書き方は時々で変わるでしょうから、必要な時に "chrome apps Cross-Origin XMLHttpRequest" などで検索するのがよいと思います。