英語アプリ作成中 - VeryGLADのブログ

久しぶりにやってます。

体調悪すぎ！！

今日は、サーバーにあるファイルを読み込み、ローカルストレージへ入れるところと、
GoogleDriveで公開するところをやってみた！

iphoneでローカルファイルを読む処理が分からんので、サーバーのファイルを読むこととした。
アプリは、googleドライブで公開。
無料！

アプリのURL
https://googledrive.com/host/0B3nOyjO_6BDqMmwtTHhBeDFrRm8/WEB%E3%82%B9%E3%83%88%E3%83%AC%E3%83%BC%E3%82%B8_0327_JSON.html

参考にしたURL
javascriptでサーバーのファイルを読み込む処理
Serverファイルの読み込み

Googleドライブで静的Webページを公開する方法
ついに出来るようになった！Googleドライブで静的Webページを公開する方法 | nanapi [ナナピ]

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>LocalStorage Sample</title>
</head>
<body onload="viewStorage();">
	<h1>Local Storage アプリケーション</h1>
	
<script type="text/javascript">
// ①Web Storageの実装確認
if (typeof localStorage === 'undefined') {
	window.alert("このブラウザはWeb Storage機能が実装されていません");
}else{
	//window.alert("このブラウザはWeb Storage機能を実装しています");

	var storage = localStorage;

	// http://sinzysinzy.hatenablog.com/entry/2014/02/27/215812
	// の一部
	function readwriteFile() {
		var reader = new FileReader();
		reader.onload =setlocalStorage;

		var files = document.getElementById("fileSelector").files;
		reader.readAsText(files[0], document.getElementById("encode").value);
	}

	// ③localStorageへの格納
	function setlocalStorage(readData) {
		//var key   = "";
		//var value = "";

		var i, j  = "";
 		var csv = readData;
		csv.replace(/\r\n?/g,"\n");  // 改行コードの統一
		var lines = csv.split("\n"); // 行を分割
		for (i=0; i<lines.length; i++) {
			var cells = lines[i].split(",");  //列を分割（４列あり）
			var key   = cells[0];             //１列目をkeyにセット
			var valueAry = new Array();
				valueAry.push(cells[1]);
				valueAry.push(cells[2]);
				valueAry.push(cells[3]);//配列にしておく
			var valueJSON = JSON.stringify(valueAry);//オブジェクトをJSON形式の文字列に変換する
			
			console.log("valueAry: " + valueAry + " valueJSON: " +valueJSON);

			// 値の入力チェック
			if (key && valueJSON) {
				storage.setItem(key, valueJSON);  //localStorageへ書き込み
			}
		}

		// 変数の初期化
		key = "";
		value = "";

		viewStorage();
	}

	// ③localStorageからのデータの取得と表示
	function viewStorage() {
		var list = document.getElementById("list")
		while (list.firstChild) list.removeChild(list.firstChild);

		// localStorageすべての情報の取得
		for (var i=0; i < storage.length; i++) {
			var _key = storage.key(i);

			// localStorageのキーと値を表示
			var tr = document.createElement("tr");
			var td1 = document.createElement("td");
			var td2 = document.createElement("td");
			list.appendChild(tr);
			tr.appendChild(td1);
			tr.appendChild(td2);
			td1.innerHTML = _key;
			
			var valueParsed = JSON.parse(storage.getItem(_key));//JSON形式の文字列をオブジェクトに変換する
			td2.innerHTML   =   valueParsed[0] + "|" 
							  + valueParsed[1] + "|" 
							  + valueParsed[2];
			console.log(" valueParsed:" +  valueParsed);
		}
	}

	// ⑤localStorageからすべて削除
	function removeallStorage() {
		storage.clear();
		viewStorage();
	}
	
	
	function loadHtml(fileName){
		httpObj = new XMLHttpRequest();
		httpObj.open('GET',fileName+"?"+(new Date()).getTime(),true);
		// ?以降はキャッシュされたファイルではなく、毎回読み込むためのもの
		httpObj.send(null);
		httpObj.onreadystatechange = function(){
		if ( (httpObj.readyState == 4) && (httpObj.status == 200) ){
			var readData = httpObj.responseText;
			setlocalStorage(readData);
			
		}

    }
    
    

}
	

}
</script>


<input type="button" value="ファイル読み込み" 
       onClick="loadHtml('https://googledrive.com/host/0B3nOyjO_6BDqMmwtTHhBeDFrRm8/html5_utf8.dat')" />
<input type="button" value="クリア" 
       onClick="removeallStorage()" />
<br>
		<table border="1">
			<tr>
				<th>キー</th><th>値</th>
			</tr>
			<tbody id="list">
			</tbody>
		</table>


</body>
</html>