Webサービスプロジェクト　～　ファイルを選択して読む

8/18/2019

Silicon Valley Super Ware

2019年8月17日

ファイルを選択して読み込む

今回のGPSデータのファイルを読み込んで解析するWebサービスでは
まずはファイルの情報を読み込む必要があります。

既に勉強されている方はご存知かもしれませんが、
今日はこのファイルを選んで読み込みという部分を解説します。

ファイルの選択は？

ファイルの選択はHTMLの「input」という部品を使うと簡単にできます。

この中で、「read_file(this.files)」がファイルが選択された場合に呼び出されるJavascriptの関数です。あとは、実際にJavascriptのコードを書けば良い事になります。

Javascriptのコードのサンプルを書いておきました。
全てJavascriptで書く事ができますが、jQueryを利用した方がシンプルな記述が可能なので
サンプルコードではjQueryを利用しています。

読み込みは簡単！

ファイルの読み込み自体は、「input」でファイルが選択されたときに、

呼び出される関数で、「FilerReader」という予め用意されているクラスを作成するだけで

あとはファイルの読み込みは全部やってくれます。

「e.target.result」に読み込んだファイルが格納されます。

今回の例では読み込んだファイルの改行（「\n」）を見つけると1行として分割しています

HTMLの記述では、「＜」「＞」などの文字はHTMLの記述で特別な意味で使われているのでそのままでは正しく表示されません。

HTMLで正しく表示するためにこれらの文字を見つけた時は、

HTMLでそうした特殊文字を表示するための文字列に変換しています。

今回のファイルを読み込んでページに表示をするページの全体のソースコードです。
面倒なので、HTML/CSS/Javascriptを全て一つのファイルにまとめてあります。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>
<body>
<div id="sv_title">
<h1><a href="https://www.siliconvalleysw.com/">Silicon Valley Super Ware</a></h1>
</div>
<div id="sv_gps_content">
<input type="file" onchange="sv_file_selection(this.files)"/>
</div>
<div id="sv_gps_app"></div>
<script>
function sv_file_selection(files) {
// Sets a container for this application
var container = $('#sv_gps_app');
// Clears container
container.empty();
// Creates a file reader
var freader = new FileReader();
freader.readAsText(files[0]);
freader.onload = (function(e) {
var error = e.target.error;
if (error !== null) {
alert("Error: " + error);
} else {
// Displays the file name
container.append('<h2>File name: ' + files[0].name + '</h2>');
var contents = e.target.result.split("\n");
for (var i = 0 ; i < contents.length ; i++) {
var line = "";
for (var j = 0 ; j < contents[i].length ; j++) {
var c = contents[i][j];
if (c === '<') {
line = line + '&lt';
} else if (c === '>') {
line = line + '&gt';
} else if (c === '&') {
line = line + '&amp';
} else {
line = line + c;
}
}
container.append('<p>' + line + '</p>')
}
}
});
}
</script>
<footer>Copyright(c) 2019 by Silicon Valley Super Ware<br>All rights reserved.</footer>
</body>
<style>
body {
width: 750px;
}
h1,h2,h3,h4,h5,h6,p {
margin: 0;
font-family: 'Noto Sans JP', sans-serif;
}
table {
background-color: lightgray;
border-radius: 5px;
}
footer {
font-family: 'Noto Sans JP', sans-serif;
font-size: 10px;
text-align: center;
}
#sv_title a {
background-color: black;
color: white;
border: 1px solid black;
border-radius: 5px;
display: block;
text-align: center;
text-decoration: none;
padding: 5px;
width: 400px;
line-height: 40px;
margin: 10px auto;
}
#sv_gps_content input {
margin: 10px 30px;
}
#sv_gps_app {
background-color: lightgray;
border-radius: 5px;
padding: 5px;
}
#sv_gps_app p {
margin-left: 40px;
}
@media screen and (max-width:600px) {
body {
width: 100%;
}
footer {
font-size: 4vw;
}
#sv_title a {
width: 90vw;
margin: 3vw auto;
font-size: 6vw;
}
}
</style>
</html>

ファイルの扱い

Webサービスでは元になるデータが必要な場合も沢山あります。

Javascriptではファイルを読み込むなどの処理は予め用意されている機能を利用すれば

簡単に作れます。

今回の例では単純にファイルを読み込んで中身を表示しているだけなので

Javascriptのプログラム自体は簡単な物で実現できます。

実際のWebサービスでは、読み込んだファイルから必要な情報を取り出して処理する必要があります。今後は目的とする機能を目指して拡張していく事にします。

今回のポイント

今回のポイントは

ファイルを選択する
ファイルを読み込む
jQueryを利用してページに表示する

この3点だけです。HTMLでは「＜」「＞」意外にも特殊文字があります

ファイルにこうした文字が使われている場合正しく表示するためには置き換えが必要です

GPSのデータファイルはXMLで書かれているのでこれらの文字が多用されています。

ファイルの読み込み自体は簡単ですが、正しく表示するためには幾つかデータを
置き換える必要があります。

まずは基本の操作はできました！

お問い合わせはこちら！

このブログを検索

シリコンバレースーパーウエア