Linux & Android Dialy

Web Worksが使えるか確認
WebWorkersが使えるかは
windowオブジェクトに
Workerオブジェクトがあるか調べる
var ele=document.getElementById(“result”);
//WebWorkersが使えるか確認
if(!window.Worker){
ele.innerHTML=”WebWorkersが使えません”;
return;
}
次に、ワーカー作成
今回は、句読点変換ボタンがクリックされたときの処理
document.getElementById(“convert1”).addEventListener(“click”,fuction(){
var text=document.getElementById(“sourcetext”).value;
var myworker=new Worker(“js/convert1.js”);
myworker.onmessage=fuction(evt){
ele.innerHTML=evt.data;
}
myworker.postMessage(text);
},true);
では、解説
イベントハンドラでは、
テキストエリアに入力された文字列を読み出す
ソースは
var text=document.getElementById(“sourcetext”).value;
次に、new Worker()で
Workerオブジェクトを作成して
引数へ、Javascriptのパス
もしくは、URLを指定する
ソースは
var myworker=new Worker(“js/convert1.js”);
ここで指定するJavascriptは、
Worker専用にすること
理由は、DOM操作のコードがあると
エラーが発生するため
注意すべきは、Workerオブジェクトを作成した時点で
すぐに、ファイルが読みこまれ、実行までされること
ライブラリ指定のように、読み込みだけではないところに注意
読み込んだ時点で実行されるため
Workerオブジェクトへデータを渡すこともできないし
呼び出し元にデータや結果を、渡すこともできない
そのため、読み込みに指定するファイルは
イベントハンドラだけ定義して
何も処理しないようにしている
ちなみに、worker内で定義した関数や変数は
呼び出し元とは違う扱いになるため
名前が同じでも違うものとして認識されるらしい
関数のスコープの区切りの感覚にちかいかもしれない
　　　　　　

Web WorksのJavascriptの機能制限
バックグラウンドで動かすため、いくつか機能制限がついてしまう
特に大きいのがHTMLページ内の
要素へアクセスできないということ
つまり、DOM制御ができない
ちなみに、DOMは
Document
Object
Model
の略
DOMでは、要素で囲まれた範囲を
ひとつのオブジェクトとして
扱う
オブジェクトなので
メソッド、プロパティがあり、
これらを使い、要素の操作ができる
Web Worksでは、このDOMが使えない
Web Worksで使えるオブジェクトは
ECMAScript-262で定義されてるオブジェクト
Array
Boolean
Data
Error
Fuction
Math
Number
Object
RegExp
String
navigatorオブジェクト
locationオブジェクト
というように
Web Worksでは、純粋なロジック部分のみ
処理する
DOM操作ができないため
並列実行される複数の処理が原因
で
ページを書き換えることがない
DOM処理は、Web Worksの呼び出しもとで行う
また、Web WorksからJavascriptファイルを
読み込んで実行できるので
ライブラリみたいな感覚で
Javascriptが使えるようになる

Web Worksとは
Web Worksは、Javascriptをバックグラウンドで複数同時に実行する機能
かつて、Javascriptは、簡単名処理が多く
瞬時に終わるものだったけど
HTML5あたりから
アプリが作れるぐらい要求されたりする
実際、ハイブリッドアプリ
phone gap
titanium studio
などで作成されるものは
HTML5
Javascript
CSS3
で作成されるものもある
こうなると、問題はJavascriptの処理速度
画像ファイル
ファイル解析
これらは、非常に時間がかかる
このため、ブラウザーが止まったり
反応しない時間が長いと、
ブラウザーでscriptを中止しますか？
とダイアログがでたりする
こんなときに、使えるのが
バックグラウンドで並列処理する
Web Works
これならブラウザーが、停止しないし
処理に時間がかかっても
停止するダイアログが表示かれない
これは、Web Worksが処理がおわったら
呼び出し音もとに伝達する仕組みのため

デスクトップからドラッグ&ドロップ
ウィンドウのdropイベントと
dragoverイベントのみ、イベントハンドラを設定し
ブラウザーでのデフォルトアクションが動作しないようにする
evt.preventDefault();
のとこが該当
次に、デスクトップからの画像のドロップについて
デスクトップからファイルがドロップされると
dataTransferオブジェクトのfiles配列へ
ドロップされたファイルのオブジェクトが入る
今回は、画像ファイルのみを対象にした
ソースは
var fileList=evt.dataTransfer.files;
//ドロップされたファイル数
for(var i=0;i

世界測地系と日本測地系
日本周辺の位置情報に特化した独自の位置情報の計算が
日本測地系といわれる
GoogleMapで使われているのは
世界共通の位置情報の計算方法で
世界測地系といわれる
現在、ほとんどのアプリは、世界測地系
なぜなら
日本測地系と、世界測地系では
位置情報に400mの誤差があるから
世界測地系と、日本測地系の変換は　
国土地理院
海上保安庁情報部
のWebサイトでできるが
現在地情報を取得するほとんどのAPIは
日本測地系と世界測地系の両方に対応している

ドロップ領域のイベント処理
ドラッグ項目がドロップ領域に入ると
dragenterイベントが発生
このイベントが発生したら、ドロップ領域の背景を変更
drop.addEventListener(“dragenter”,fuction(evt){
evt.preventDefault();
drop.style.backgroundColor=””#ecc;
},true);
drop.addEventListener(“dragleave”,fuction(evt){
evt.preventDefault();
drop.style.backgroundColor=”#eee”;
},true);
drop.addEventListener(“dragover”,fuction(evt){
evt.preventDefault();
},true);
dragenterイベントでも
preventDefault()
でブラウザーのデフォルト動作を無効化しておく
ドラッグ項目がドロップ領域からでたら
dragleaveイベントが発生する
このイベントが発生したら
ドロップ領域の背景色を元に戻す
そして、一番重要なのが
dragoverイベント
これがないと
ドラッグ&ドロップできない
中身は
ブラウザーのデフォルト動作を無効化する
preventDefault();
だけでok
処理をまとめてみると
ドラッグ&ドロップは
drop.addEventListener(“dragenter”,fuction(evt){
evt.preventDefault();
//ドロップ領域に入ったときの処理
},true);
drop.addEventListener(“dragleave”,fuction(evt){
evt.preventDefault();
//ドロップ領域からでたときの処理
},true);
//ドラッグ&ドロップの必須
drop.addEventListener(“dragover”,fuction(evt){
evt.preventDefault();
},true);

まず
document.querySelectorAll()
で、ドラッグするdiv要素をピックアップする
ちなみに、#dragitems divは
id=”dragitems” の中のdiv要素という意味
これを変数 itemListへいれれば
ドラッグ対象となるdiv要素が配列要素として入る
ソースにすると
var itemList = document.querySelectorAll(“#dragitems div”);
次にドラッグ対象のdiv要素の
draggableプロパティへtrueを設定
これで、ドラッグ可能になる
ソースにすると
itemList[i].draggable=true;
単純にドラッグするだけならこれだけで
いいけど
普通はどこかにドロップする
このとき、必要なのがドロップ先で
なにがドロップされたか、
わかるようにすること
今回はドラッグ対象のdiv要素へIDをつけている
ドラッグが開始されると
div要素では
dragstartイベント
が発生する
このdragstartイベントを捕捉し、
ドロップ先に渡すデータを設定
ソースにすると
itemList[i].addEventListener(“dragstart”,fuction(evt){
ドロップ先にdivのIDを渡すには
Eventオブジェクトを介して
データのやりとりをする
Eventオブジェクトには
データのやりとりをするための
dataTransferオブジェクトがあるので
これを使う
dataTransferオブジェクトの
setData()
で、データをドロップ先へ渡せる
setData()は
最初のパラメータに
データの種類を示す文字を指定する
指定する文字は、すでに決まっていて
自分で任意のものを選ぶことは残念ながらできない
文字なら text
URLなら url
となる
ただし、ブラウザーによっては
text
しか使えないから
無難にいくならtextを指定するほうがよい
div要素のIDとかならtextになる
そして、ドロップ先に渡すデータは
setData()の
2番目のパラメータに指定する
dragstartイベントが発生したとき
ドラッグ開始された要素の情報が
Eventオブジェクトの
currentTargetオブジェクトに入る
この
currentTargetオブジェクトの
idプロパティへ
div要素のIDが入っているので
これをsetData()の
2番目のパラメータとして指定すれば
要素のIDを渡せる
ソースにすると
evt.dataTransfer.setData(“text”,evt.currentTarget.id);
draggable=trueは
ドラッグ可能にするだけで
ドロップするときの処理などは
Javascriptで書く必要があるので注意

HTML5のドロップ&ドラッグは
デスクトップからのファイルもドロップできる
また、File APIと組み合わせて
デスクトップからドロップしたファイルの内容を読み込んで処理できる
たとえば
デスクトップの画像を
Canvasへ
ドラッグ&ドロップし
Canvasへ画像を描画するなと