kasailab.jpkasailab.jp/sample3.docx · Web...

5-4　現在位置の地図を表示

watchPosition メソッドで取得した現在位置（緯度・経度）を中心とする地図を表示し

ます。地図については「4 章 Google Maps」を参照してください。

・geo4.html<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><style type="text/css"> html,body { height: 100%; }</style><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script><script type="text/javascript"> var opt = { enableHighAccuracy:true, timeout: 3000, maximumAge: 15000 }; var watchID=navigator.geolocation.watchPosition(success,error,opt); function success(pos) { var latitude=pos.coords.latitude; var longitude=pos.coords.longitude; initMap(latitude,longitude); } function error(err){ alert("ERROR(" + err.code + ")\n" + err.message); } function initMap(lat,lng){ var element = document.getElementById("map");

・パソコン Internet Exploler

・Android Chrome

・Android Safari

「注」地球の裏側

現在地の地球の裏側の座標は以下で得られます。なお、「zoom: 3」程度にしておかな

いと海しか見えません。

var latitude=-pos.coords.latitude;var longitude=pos.coords.longitude-180;

8 章　ドラッグ＆ドロップ

ドラッグ＆ドロップは mousedown や mouseup などのイベントで実現することがで

きましたが、 HTML5 ではドラッグ＆ドロップ専用の新しいイベントや新しいメソッ

ド・属性が追加されています。ドラッグ＆ドロップはドラッグ操作とドロップ操作の 2種類の操作を組み合わせて行います。

draggable 属性を「true」に設定するとドラッグが可能に、「false」に設定するとド

ラッグが禁止になります。ドラッグ関連イベントとして

ondragstart 、 ondrag 、 ondragend が、ドロップ関連イベントとして

ondragenter 、 ondragleave 、 ondragover 、 ondrop があります。

「event.dataTransfer」オブジェクトの setData メソッドと getData メソッドを使え

ばドラッグ操作とドロップ操作という異なる操作の間でデータをやり取りすることがで

きます。ドロップされたファイルオブジェクト（複数のファイル）は

「event.dataTransfer.files」で取得できます。

　ドラッグ＆ドロップ関連のイベントはマウスイベントの仲間なので、スマホやタブ

レットなどのタッチパネルでは動作しません。

8-1　draggable 属性

draggable 属性を「true」に設定するとドラッグが可能に、「false」に設定するとド

ラッグが禁止になります。draggable 属性を指定しないとデフォルト解釈になります。

<img>や<a>タグはデフォルトで「true」、他の要素は「false」と解釈されます。

以下はそれぞれの要素に draggable 属性を指定したものです。ドラッグ可能なものは、

ドラッグを開始するとドラッグ対象物の薄い色の画像（ゴースト画像）が移動します。

ドロップターゲットは設定していないので、ブラウザのクライアント画面にはドロップ

はできません。ただし、ブラウザのアドレスバーやデスクトップはシステム側でドロッ

プターゲットとして設定されているのでドロップできます。

・drag1.html<!DOCTYPE html><html><head><style>div.drag { width:300px; height:150px; margin:20px; background-color:#CCFF66; border:1px solid #00cc00;}</style></head><body ><div class="drag" draggable="true">コンテナはドラッグできますが、イメージは単独でドラッグできません。<br /><img src="play.png" draggable="false" /></div><div class="drag" draggable="false">コンテナはドラッグできませんが、イメージは単独でドラッグできます。<br /><img src="pause.png" draggable="true" /></div><a href="http://www.yahoo.co.jp">Yahoo!へのリンクもドラッグできます。</a></body></html>

8-2　ドラッグ&ドロップのイベント処理

ユーザによるドラッグ&ドロップ操作は以下の 7 つのイベントを利用して行います。ド

ラッグ&ドロップの間の各イベント間におけるデータのやり取りは event.dataTransferオブジェクトの setData メソッドと getData メソッドを使います。ブラウザが持つデ

フォルトのドラッグ&ドロップ処理を無効にするには「event.preventDefault();」を実

行します。

ドラッグ関連イベント機能

ondragstart ドラッグ開始時に発生。

ondrag ドラッグが継続している間に発生。

ondragend ドラッグ終了時に発生。

ドロップ関連イベント機能

ondragenter ドラッグ要素がドロップ要素に入った時に発生。

ondragleave ドラッグ要素がドロップ要素から出た時に発生。

ondragover ドラッグ要素がドロップ要素に重なっている間に発

生。

ondrop ドロップ時に発生。

ドラッグ&ドロップ処理では主に以下の 3 つのイベントハンドラを使用します。

1.　ondragstart イベントハンドラドラッグ側ではドラッグの開始で ondragstart イベントハンドラを呼び出し、ドラッ

グを開始したオブジェクトの情報をイベントオブジェクトに格納します。こここではド

ラッグを開始したオブジェクトの id を" text/plain "型の文字列として格納します。

function dragStart(event){ event.dataTransfer.setData("text/plain",event.target.id); // ドラッグオブジェ

クトの情報

}

2.　ondragover イベントハンドラドロップを受ける側ではドラッグオブジェクトがドロップオブジェクトに入ると

ondragover イベントハンドラを呼び出し、ブラウザのデフォルトの動作を無効にし、

ユーザのドロップ動作を可能にします。通常のブラウザの動作はファイルをドロップす

るとそのまま開く処理になってしまいます。

function dragOver(event){ event.preventDefault(); // ブラウザのデフォルトの動作を無効にする

}

3.　ondrop イベントハンドラドロップが発生したら ondrop イベントハンドラを呼び出します。

「event.dataTransfer.getData("text/plain");」によりドラッグオブジェクトの id を取

得します。

function drop(event){ var id = event.dataTransfer.getData("text/plain"); var target=document.getElementById(id); // 何らかの処理

}

setData/getData に指定できるデータの型は以下です。

データの型を示す文字列意味

text/plain 平のテキスト。

text/html HTML 文字列。

text/xml XML 文字列。

text/uri-list URI、ファイル名のリスト。

「注」ブラウザによってはこれらのデータの型を示す文字列を使わずに任意の文字を

キーのように使うこともできます。

event.dataTransfer.setData("id",event.target.id);var id = event.dataTransfer.getData("id");

以下は play.png と mute.png をドラッグオブジェクト、trush.png をドロップター

ゲットとします。ドラッグ&ドロップされたオブジェクトのファイル名を alert で表示し、

ドラッグオブジェクトを非表示にします。

・drag2.html<!DOCTYPE html><html><head><script type="text/javascript"> function dragStart(event){ event.dataTransfer.setData("text/plain",event.target.id); // ドラッグオブジェ

クトの情報

} function dragOver(event){ event.preventDefault(); // ブラウザのデフォルトの動作を無効にする

} function drop(event){ var id = event.dataTransfer.getData("text/plain"); var target=document.getElementById(id); alert(target.src); target.style.visibility = "hidden"; }</script></head><body ><img id="img1" src="play.png" draggable="true" ondragstart="dragStart(event);" /><img id="img2" src="mute.png" draggable="true" ondragstart="dragStart(event);" /><br /><img src="trush.png" ondragover="dragOver(event);" ondrop="drop(event);" /> </body></html>

8-3　ドロップ先ターゲット

ドロップがされたターゲットは「event.currentTarget」で取得できます。

以下は 2 つの<div>要素間で、その中に配置されているイメージをドラッグ&ドロップ

で移動するものです。

・drag3.html<!DOCTYPE html><html><head><style>div.dropbox { width:500px; height:52px; margin:20px; background-color:#CCFF66; border:1px solid #00cc00;}</style><script type="text/javascript"> function dragStart(event){ event.dataTransfer.setData("text/plain",event.target.id) } function dragOver(event){ event.preventDefault(); } function drop(event){ var id = event.dataTransfer.getData("text/plain");

var target =document.getElementById(id); event.currentTarget.appendChild(target); //ドロップ先にドラッグされた要素

を追加

}</script></head><body ><div class="dropbox" ondragover="dragOver(event);" ondrop="drop(event);"><img id="img1" src="canada.gif" draggable="true" ondragstart="dragStart(event);" /><img id="img2" src="korea.gif" draggable="true" ondragstart="dragStart(event);" /><img id="img3" src="australia.gif" draggable="true" ondragstart="dragStart(event);" /></div><div class="dropbox" ondragover="dragOver(event);" ondrop="drop(event);"></div></body></html>

8-4　ドロップされたファイルオブジェクトの取得

ドロップされたファイルオブジェクト（複数のファイル）は

「event.dataTransfer.files」で取得できます。個々のファイルを参照するには以下のよ

うにします。

var files = event.dataTransfer.files;for (var i=0; i<files.length; i++) {

// files[i]で i 番目のファイルオブジェクトを取得

}

以下はドロップされたファイルの名前、サイズ、MIME タイプを表示するものです。

CTRL キーまたは SHIFT キーを併用することで複数のファイルを選択することができま

す。

・drag4.html<!DOCTYPE html><html><head><style>#dropbox {

width:500px; height:200px; margin:20px; background-color:#CCFF66; border:1px solid #00cc00;}

</style><script type="text/javascript"> function dragOver(event){ event.preventDefault(); } function drop(event){ var files = event.dataTransfer.files; var msg = ""; for (var i=0; i<files.length; i++) { msg += "No"+(i+1) + " : " + files[i].name + " : " + files[i].size + " Byte: " + files[i].type + "<br />"; } document.getElementById("dropbox").innerHTML = msg; event.preventDefault(); }</script></head><body ><div id="dropbox" ondragover="dragOver(event);" ondrop="drop(event);"></div></body></html>

8-5　ドロップされたイメージファイルの読み込み

ドロップされたファイルを読み取るには File API(9 章参照)の FileReader オブジェクト

を使用します。ファイルの MIME タイプが「image」のときだけファイルを DataURLとして読み込むには以下のようにします。

var files = event.dataTransfer.files;for (var i=0; i< files.length; i++) {

var file = files[i];

} reader.readAsDataURL(file); } } event.preventDefault(); }</script></head><body ><div id="dropbox" ondragover="dragOver(event);" ondrop="drop(event);"></div></body></html>

8-6　ドロップされたテキストファイルの読み込み

ドロップされたファイルを読み取るには File API(9 章参照)の FileReader オブジェク

トを使用します。ファイルの MIME タイプが「text」のときだけファイルを文字列とし

て読み込むには以下のようにします。

var files = event.dataTransfer.files;for (var i=0; i< files.length; i++) {

</script></head><body ><textarea id="dropbox" rows="20" cols="80" ondragover="dragOver(event);" ondrop="drop(event);"></textarea></body></html>

8-7　選択テキストのドラッグ＆ドロップ

2 つの<textarea>の間で、一方の<textarea>で選択されているテキストを他の

<textarea>のカーソル位置にドラッグ&ドロップすることを考えます。その際、CTRLキーが押されていれば「コピー」、押されていなければ「移動」とします。

ドラッグカーソルに「+」印のコピーを示すマークを入れるには、dropEffect プロパ

ティを以下のように設定します。

event.dataTransfer.dropEffect="copy";

dropEffect プロパティに指定できるモードは以下です。

dropEffect プロパティ機能

none すべてのドロップ操作を禁止。

copy データをコピー。

move データを移動。

link データをリンク。

<textarea>の選択されているテキストの開始位置と終了位置は以下のように取得でき

ます。

var src=document.getElementById(id);var start = src.selectionStart;var end = src.selectionEnd;

この start と end を元に選択されているテキストを取得し、ドロップ先の<textarea>のカーソル位置（ dst.selectionStart で取得）に追加します。移動の場合は元の

<textarea>の選択されているテキストを削除します。

・drag7.html<!DOCTYPE html><html><head><script type="text/javascript"> function dragStart(event){ event.dataTransfer.setData("text/plain",event.target.id); } function dragOver(event){ event.preventDefault(); // ブラウザのデフォルトの動作を無効にする

if (event.ctrlKey) event.dataTransfer.dropEffect="copy"; else event.dataTransfer.dropEffect="move"; }

function drop(event){ var id=event.dataTransfer.getData("text/plain"); var src=document.getElementById(id); var start = src.selectionStart; var end = src.selectionEnd; var select = src.value.substring(start, end); if (!event.ctrlKey){ src.value=src.value.substring(0,start)+src.value.substring(end); } var dst=event.currentTarget; dst.value=dst.value.substring(0,dst.selectionStart)+select+dst.value.substring(dst.selectionStart); }</script></head><body ><textarea id="text1" rows="5" cols="40" ondragstart="dragStart(event);" ondragover="dragOver(event);" ondrop="drop(event);">123456</textarea><textarea id="text2" rows="5" cols="40" ondragstart="dragStart(event);" ondragover="dragOver(event);" ondrop="drop(event);">abcdef</textarea></body></html>

8-8　ドラッグアイコンの設定

setDragImage メソッドを使ってデフォルトのゴースト画像の代わりにユーザがド

ラッグアイコンを設定することができます。

event.dataTransfer.setDragImage(ドラッグアイコン, オフセット x, オフセット y);

ドラッグ要素が <img> タグかどうか判定するには「 instanceof HTMLImageElement」を使って以下のようにします。

if (event.target instanceof HTMLImageElement)

以下はドラッグ対象が<img>要素か<div>要素かでドラッグアイコンを切り替えるも

のです。

・drag8.html<!DOCTYPE html><html><head><style>div.drag { width:300px; height:150px; margin:20px; background-color:#CCFF66; border:1px solid #00cc00;}</style><script type="text/javascript"> function dragStart(event){ var dragIcon = document.createElement("img"); if (event.target instanceof HTMLImageElement ) dragIcon.src = "dragicon1.png"; else if (event.target instanceof HTMLDivElement ) dragIcon.src = "dragicon2.png"; event.dataTransfer.setDragImage(dragIcon, 0, 0); }</script></head><body ><img id="img1" src="play.png" draggable="true" ondragstart="dragStart(event);" /><div class="drag" draggable="true" ondragstart="dragStart(event);">コンテナ

</div></body>

</html>

8-9　ドラッグ&ドロップを用いたイメージの移動

イメージをドラッグしドロップ位置に移動します。ドロップ位置は「event.clientX, event.clientY」で取得できます。これはブラウザのクライアント画面の左上隅を(0,0)とする座標です。イメージをドラッグしたときのマウス座標とイメージの左上隅の座標と

の差を dx,dy に求めておき、ドロップしたときのマウス位置に対し、このオフセット値

で補正することで、正確なマウス位置にドロップができます。 style 属性の

target.style.left で得られる値の末尾には「px」が付いています。座標の数値計算を行

うためにはこの「px」を削除して行い、再び target.style.left に代入するときは「px」

を付加します。

・drag9.html<!DOCTYPE html><html><head><script type="text/javascript"> var dx,dy; function dragStart(event){ var target=document.getElementById(event.target.id); var targetX=target.style.left.slice(0,-2); // 末尾の px を削除

var targetY=target.style.top.slice(0,-2); dx=event.clientX-targetX; dy=event.clientY-targetY; }

function dragEnd(event){ var target=document.getElementById(event.target.id); target.style.left=(event.clientX-dx)+"px"; target.style.top=(event.clientY-dy)+"px"; }</script></head><body ><img id="img1" src="play.png" draggable="true" ondragstart="dragStart(event);" ondragend="dragEnd(event);" style="position:absolute;left:50px;top:50px" /><img id="img2" src="mute.png" draggable="true" ondragstart="dragStart(event);" ondragend="dragEnd(event);" style="position:absolute;left:120px;top:50px" /></body></html>

3×3 のイメージを for の 2 重ループを使って配置し、ドラッグ&ドロップで任意の位置

に移動します。

・drag10.html<!DOCTYPE html><html><head><script type="text/javascript"> var dx,dy; function init() { var y,x,img,n=0; for (y=40;y<=40*3;y+=40){ for (x=40;x<=40*3;x+=40){ var img=new Image(); img.src="white.png"; img.id="img"+n; img.style.position="absolute"; img.style.left=x+"px"; img.style.top=y+"px"; img.draggable=true; img.addEventListener("dragstart",dragStart); img.addEventListener("dragend",dragEnd); document.body.appendChild(img); n++; }

} } function dragStart(event){ var target=document.getElementById(event.target.id); var targetX=target.style.left.slice(0,-2); // 末尾の px を削除

var targetY=target.style.top.slice(0,-2); dx=event.clientX-targetX; dy=event.clientY-targetY; } function dragEnd(event){ var target=document.getElementById(event.target.id); target.style.left=(event.clientX-dx)+"px"; target.style.top=(event.clientY-dy)+"px"; }</script></head><body onload="init()"></body></html>

8-10　ドラッグ＆ドロップを使ったパズルゲーム

パズルゲームの基本になるイメージの移動を行います。3×3 のマスの一か所が空いて

いるとします。上下あるいは左右に空きがある場合はイメージをドラッグ＆ドロップで

空き位置に移動できるようにします。

マスの空き情報は配列 m[][]に保存しておきます。「0」なら空き、「1」ならイメージ

があると判定します。

イメージのサイズを 40×40 ピクセルとした場合に、ドラッグ開始時のマウス位置から

マスの位置（縦、横）を得るには以下のようにします。

var i=Math.floor(event.clientY/40);var j=Math.floor(event.clientX/40);

この(i,j)位置のマスの上下左右に空きがあるか調べるには以下のようにします。

if (m[i-1][j]==0 || m[i+1][j]==0 || m[i][j-1]==0 || m[i][j+1]==0)

この条件を満たせばドラッグを開始したイメージは移動可能なので flag を true に設定

します。ドロップ側では flag が true で、ドロップ位置のマスが空きなら、イメージを空

き位置に移動します。

if (flag==true && m[i][j]==0){ target.style.left=j*40+"px"; target.style.top=i*40+"px";

m[oldi][oldj]=0; // 前の位置を空き状態にする

m[i][j]=1; // ドロップ位置をあり状態にする

}

・drag11.html<!DOCTYPE html><html><head><script type="text/javascript"> var m=new Array(5); var flag=false; var oldi,oldj; function init(){ var y,x,img,n=0; for (y=40;y<=40*3;y+=40){ for (x=40;x<=40*3;x+=40){ if (n!=8){

var j=Math.floor(event.clientX/40); if (flag==true && m[i][j]==0){ target.style.left=j*40+"px"; target.style.top=i*40+"px"; m[oldi][oldj]=0; // 前の位置を空き状態にする

m[i][j]=1; // ドロップ位置をあり状態にする

} flag=false; }</script></head><body onload="init()"></body></html>

9 章　File API

File API を用いることにより、JavaScript からクライアント側のファイルにアクセス

（読み込み専用）することが可能です。ただし、セキュリティを考慮して、アクセス可

能なのは、利用者が<input type="file">タグを使って意識的に選択したファイル、あ

るいはドラッグ＆ドロップしたファイルのみに限られます。ファイル名を指定してファ

イルオープンするということはできません。

File API を用いてファイルにアクセスするには FileReader オブジェクトをインスタン

ス化し、readAsXXX メソッドを使ってファイル読み込みを開始します。ファイルの読み

込みが完了すると onloaded イベントハンドラが呼び出されますので、そこで

event.target.result を使って結果を取得します。

9-1　ファイルオブジェクト

　ファイルにアクセスするためには、アクセスするファイルを選択し、それにより取得

できた File オブジェクトを使用します。

1.　ファイルの選択方法ファイルを選択する方法として以下の 2 種類があります。いずれも files オブジェクト

に File オブジェクト配列が取得できます。個々の File オブジェクトは

files[0]、files[1]、・・・で取得できます。

①<input type="file">タグを使う方法

var files = event.target.files;

② ドラッグ&ドロップを使う方法

var files = event.dataTransfer.files;

2.　ファイル情報の取得File オブジェクトの主なプロパティとして以下があります。

File オブジェクトのプロパティ機能

name ファイル名。

type MIME タイプ。

size サイズ（バイト）。

lastModifiedDate 最終修正日時。

以下は選択したファイルの情報を表示します。選択したファイルは一つと仮定してい

ます。

・file1.html<!DOCTYPE html><html><head><script type="text/javascript"> function disp(event) { var file = event.target.files[0]; // 選択されているファイルは 1 つと仮定

if (file) { var msg = "名前:" + file.name + "<br />"; msg += "サイズ:" + file.size + "<br />"; msg += "タイプ:" + file.type + "<br />"; msg += "最終修正日時:" + file.lastModifiedDate + "<br />"; document.getElementById("msg").innerHTML = msg;

} }</script></head><body><input type="file" onchange="disp(event);"><p id="msg"></p></body></html>

9-2　FileReader オブジェクト

FileReader オブジェクトを使ってファイルを読み込むには FileReader オブジェクト

をインスタンス化し、「reader.readAsText(file)」メソッドを使ってファイル読み込を

開始します。reader.onload プロパティにファイルの読み込が完了すると呼び出される

onloaded イベントハンドラを設定します。 onloaded イベントハンドラ内で

event.target.result を使って結果を取得します。以下の例では onloaded イベントハン

ドラの名前を「loaded」としています。

var file = event.target.files[0];if (file) {

var reader = new FileReader(); reader.readAsText(file); // 読み込開始

reader.onload = loaded; // イベントハンドラの設定

}function loaded(event) {

// event.target.result に読み取り結果が得られる

}

1.　readAsXXX メソッドreadAsXXX メソッドは読みとる結果のデータ型に応じて以下の 4 種類があります。

「XXX」に読みとる結果のデータ型を指定します。

・readAsBinaryString(file) バイナリ文字列として取得します。各バイトは、0～255 の範囲の整数で表されます。

・readAsText(file[,encoding])テキスト文字列として取得します。encoding にエンコードタイプを指定します。省略

すると"UTF-8"とみなされます。

・readAsDataURL(file)Data URL として取得します。

・readAsArrayBuffer(file)ArrayBuffer オブジェクトとして取得します。

2.　テキストファイルの読み込みreader.readAsText メソッドで読み込んだ結果を<textarea>にテキストファイルと

して表示します。

・file2.html<!DOCTYPE html><html><head><script type="text/javascript"> function disp(event) { var file = event.target.files[0]; if (file) { var reader = new FileReader(); reader.readAsText(file); reader.onload = loaded; } } function loaded(event) { var str = event.target.result; document.getElementById("msg").value = str; }</script></head><body><input type="file" onchange="disp(event);"><textarea id="msg" rows="10" cols="80"></textarea></body></html>

3.　DataURL の読み込みreadAsDataURL メソッドで読み込んだ結果を<img>にイメージファイルとして表示

します。

DataURL はイメージなどのデータを base64 でエンコードして、以下のような

「data:」スキームで表現したものです。この DataURL は<img>の src 属性に直接指定

することができます。

data:MIME タイプ;base64,データ

・file3.html<!DOCTYPE html><html><head><script type="text/javascript"> function disp(event) { var file = event.target.files[0]; if (file) { var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = loaded; } } function loaded(event) { var dataURL=event.target.result document.getElementById("img").src =dataURL; }</script></head><body><input type="file" onchange="disp(event);"><br /><img id="img" /></body></html>

9-3　ファイルの種類を判定して読み込む

選択したファイルの種類が「image」か「text」かでファイルを読み込むメソッドを

変えるには以下のようにします。

if (file.type.match("image")) { reader.onload = function (evt) { // イメージファイルの処理

} reader.readAsDataURL(file);

}if (file.type.match("text")) {

reader.onload = function (evt) { // テキストファイルの処理

} reader.readAsText(file);

}

　以下は選択したファイルの種類が「image」の場合は<img>にイメージを表示し、

「text」の場合は<textarea>にテキストを表示します。

・file4.html<!DOCTYPE html><html><head><script type="text/javascript"> function disp(event) { var img = document.getElementById("image"); var text=document.getElementById("text"); var file = event.target.files[0]; if (file) { var reader = new FileReader(); if (file.type.match("image")) { reader.onload = function (evt) { img.src = evt.target.result; } reader.readAsDataURL(file); } if (file.type.match("text")) { reader.onload = function (evt) { text.value += reader.result; } reader.readAsText(file); } } }

</script></head><body><input type="file" onchange="disp(event);"><br /><textarea id="text" rows="10" cols="80"></textarea><br /><img id="image" /></body></html>

9-4　複数のファイルを読み込む

<input type="file" multiple>とすると複数のファイルが選択できます。この場合、

「event.target.files.length」で選択されているファイルの個数を取得できます。

for (var i=0;i<event.target.files.length;i++){ var file = event.target.files[i]; ・・

}

選択された複数のイメージファイルを<img>オブジェクトに格納し、<p>タグの子要

素として追加します。選択したファイルのファイル名は<textarea>に追加します。

・file5.html<!DOCTYPE html><html><head><script type="text/javascript"> function disp(event) { var images = document.getElementById("images"); var text=document.getElementById("text"); for (var i=0;i<event.target.files.length;i++){ var file = event.target.files[i]; if (file.type.match("image")) { text.value += file.name+"\n"; var reader = new FileReader(); reader.onload = function (evt) { var img = document.createElement("img"); img.border=1; img.width=150; img.height=100; img.src = evt.target.result; images.appendChild(img); } reader.readAsDataURL(file); } } }</script></head><body><input type="file" multiple onchange="disp(event);"><br /><textarea id="text" rows="10" cols="40"></textarea><p id="images"></p></body>

</html>

9-5　ファイル・イベントハンドラ

FileReader には以下のようなイベントハンドラを設定するプロパティが用意されてい

ます。

イベントハンドラ・プロパティ機能

onloadstart 読み込み開始時に呼び出される。

onprogress 読み込み作業中に呼び出される。

onload 正常に読み込んだときに呼び出される。

onabort 中断時に呼び出される。

onerror 読み込みエラー時に呼び出される。

onloadend 読み込み処理完了時に呼び出される。

1.　エラー処理onerror イベントハンドラでは error.code プロパティでエラーコードを取得できます。

エラーコードの意味は、以下のとおりです。

エラーコード意味

1 指定のファイルが存在しない。

2 権限エラー（読み取り権限を持たないなど）。

3 ファイルの読み込みを中断された。

4 読み込み中のエラー。

5 ファイルサイズが許容上限を超えた。

　以下は onerror イベントハンドラでエラーコードに対応するエラーメッセージを表示

するものです。

・file6.html<!DOCTYPE html><html><head><script type="text/javascript"> function disp(event) { var file = event.target.files[0]; if (file) { var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = loaded; reader.onerror = error; } } function loaded(event) { alert("ロード完了"); }

function error(evt) { var errors =new Array( "", "指定のファイルが見つかりません。", "読み込み権限がありません。", "処理が中断されました。", "読み込み中にエラーが発生しました。", "ファイルサイズが大きすぎます。" ); alert(errors[evt.target.error.code]); }</script></head><body><input type="file" onchange="disp(event);"><br /></body></html>

2.　進捗状況onprogress イベントハンドラの event.loaded で読み込んだバイト数、event.total

でファイル全体のバイト数が取得できます。従って「event.loaded /event.total * 100」が進捗率となります。

以下はファイル読み込みの進捗率を表示するものです。

・file7.html<!DOCTYPE html><html><head><script type="text/javascript"> function disp(event) { var file = event.target.files[0]; if (file) { var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = loaded; reader.onprogress=progress; }

} function loaded(event) { alert("ロード完了"); } function progress(event) { var prog=Math.floor(event.loaded /event.total * 100); document.getElementById("msg").innerHTML=prog+"%読み込済み"; }</script></head><body><input type="file" onchange="disp(event);"><br /><p id="msg"></p></body></html>

9-6　ArrayBufferArrayBuffer は、バイナリデータの送受信やファイル・リード/ライトの際のバッファ

です。ArrayBuffer を直接操作することはできませんので、いったん ArrayBufferViewオブジェクトに変換してから操作します。ArrayBufferView として以下の種類がありま

す。

ArrayBufferView 意味

Int8Array 8ビット長、符号付き整数値。

Uint8Array 8ビット長、符号なし整数値。





Float32Array 32ビット長、単精度浮動小数点数。

Float64Array 64ビット長、倍精度浮動小数点数。

Blob データは直接操作できないので、読み込んだイメージファイルに加工を加えるに

は ArrayBuffer に読み込んでから加工します。BMP イメージファイルを ArrayBuffer に

読み込み、Uint8Array 型のデータとして 1 バイト単位でビット反転します。BMP イメー

ジファイルの先頭 54 バイトは各種情報領域なので、この領域は加工しません。

var bmp = new Uint8Array(event.target.result);for (var i=54;i<bmp.length;i++){ // BMP ファイルの先頭 54 バイトは各種情報領域

bmp[i]=~bmp[i]; // ビット反転

}

加工したデータを Blob データに変換して<img>に表示するには以下のようにします。

var blob = new Blob([bmp], { "type" : "image/png" });document.getElementById("img").src =window.URL.createObjectURL(blob);

「注」BlobBlob(Binary Large OBject)はデータベースシステムで定義されるデータ型の一つで、画

像や音声などのバイナリデータを格納できます。<input type="file">やドラッグ&ド

ロップで得られるファイルオブジェクトは Blob形式のバイナリーデータです。

・file8.html<!DOCTYPE html><html><head><script type="text/javascript"> function disp(event) { var file = event.target.files[0]; if (file) {

－「9-9　JSON」を参照してください。

・file9.html<!DOCTYPE html><html><head><script type="text/javascript"> function disp(event) { var file = event.target.files[0]; if (file) { var reader = new FileReader(); reader.readAsText(file); reader.onload = loaded; } } function loaded(event) { var data = JSON.parse(event.target.result); var msg=""; for(var i=0; i<data.item.length; i++){ msg+="name:"+data.item[i].name+",age:"+data.item[i].age+"\n"; } document.getElementById("msg").value = msg; }</script></head><body><input type="file" onchange="disp(event);"><br /><textarea id="msg" rows="10" cols="40"></textarea></body></html>

kasailab.jpkasailab.jp/sample3.docx · Web...

Documents

Transcript of kasailab.jpkasailab.jp/sample3.docx · Web...