カテゴリー: 未分類

ワーカー側で、ヒストグラムの処理
ヒストグラムは特定の色の値、つまり輝度のピクセルがどのくらい存在するか表すグラフ
ヒストグラムを処理する方法は
輝度ごとに処理して少しずつ結果を返す方法と
すべての輝度をまとめて処理する方法がある
輝度ごとに処理する方法では
少しずつ結果を見せられるためユーザーを待たせる時間が短いが、
全体の処理時間はのびる
まとめて処理する方法ては
全体の処理時間は短いが
画像サイズが大きい場合
ワーカー側での処理に時間がかかるため
ユーザー側では何も処理していないように見える
画像サイズが小さいなら、まとめて処理したほうがよいけど
状況により、このあたりは
ケースバイケース

拡張現実の種類
ビジョンベースAR
現実空間に存在する何らかの情報を読み取り
AR情報を表示するこ表示
ビジョンベースARは、更に
マーカー型ビジョンベースAR
マーカーレスビジョンベースAR
に分類できる
マーカー型ビジョンベースAR
マーカーと呼ばれる画像を認識してAR情報を表示する拡張現実
ARとしてほ！一番認知度が高い
マーカーを読み込むことで情報を表示するため
その他の情報がいらない
また、マーカーの傾きなどを、認識することで
表示する情報の角度を操作すれば
ARがより現実空間に存在するようにできる
マーカーレス型ビジョンベースAR
マーカーレス型ビジョンベースARは、
マーカーを利用せず、人の体の形を認識して
その場で試着
部屋の形を認識して模様替え
など、その空間にあるものを認識し、AR情報を表示
また、空間だけでなく
可視光通信を利用したアプリなども、開発されている
ただ、ビジョンベースARを作成するには
NyARToolkit
PTAM
などのライブラリを使わないと実装は困難
ロケーションベースAR
GPS情報と、六軸センサーを使いAR情報を表示する
このため、ビジョンベースARとは異なり
画像や空間認識がいらない
位置情報を利用して、高さ、距離などの算出もできるため
より空間的表示がてきる

拡張現実の仕組み
拡張現実は、実際に現実には存在しない情報
マーカー
映像
情報タグ
などを画面上に表示することで
拡張された空間のことを示す　
ちのみに、拡張現実はARともいわれている
ARは
Augment Realityの略
ＡＲは大きく分けて2つ
現実空間の、何らかの情報を読み取り映像を付加する
ビジョンベースAR
位置情報を利用して拡張現実を付加する
ロケーションベースAR
がある

XMLとJSON利用の利点
Androidでは、レスポンスデータの処理を
XML
または JSONで行うことが多い
どちらを使うかは開発者次第
ただ、XMLとJSONのパーシング処理だと
XMLのほうが早いことが多い
そのかわり！XMLが複雑になりタグ名が重複するときには
ソースも複雑になる傾向がある
一方、JSONは
XMLより速度は落ちるけど、階層ごとにパーシングするため
重複する要素名があっても
複雑な処理をせすにパーシングできる
このあたりは、アプリやAPIにより
レスポンス形式を指定することが重要になる

ホットペッパーAPIのメモ
key
APIキーで、これは必須
APIを利用するためのキーを設定
lat
緯度
ある地点からの範囲内のお店検索する場合に使う
lng
経度
これも、緯度と同じで、お店検索に使う
range
検索範囲
さがす範囲を、5段階で設定
1なら 300m
2なら 500m
3なら1Km
4なら 2km
5なら 3km
デフォルトなら1km
format
レスポンス形式
これはレスポンス形式を
XML
JSON
JSONP
のどれかを指定する
JSONPなら、さらにパラメータに
callback=コールバック関数
とすれば
Javascript側コールバック関数が指定できる
ちなみに、デフレは、XML
検索クエリは、ベースとなる
リクエストURLの後ろへ追加する
ちなみに、ホットペッパーのリクエストURLは
http://webservice.recruit.co.jp/hotpepper/gourmet/v1/
このリクエストURLの後に？をつけて、
パラメータを＆でくっつけて作成
わかりにくいから、構文の
例を書いてみた
http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=APIキー&lat=緯度&lng=経度&range=検索範囲の値&format=フォーマット形式
これを数値とか入れてみると
http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=12345&lat=35.69000&lng=139.87766&range=1/&format=json
というかんじになる
今回は、適当な数値だけど
しっかりと値やキーを設定すれば
リクエストURLへブラウザーでアクセスすれば
jsonとかXMLでレスポンスが表示される
XML形式なら
パーシング処理で実装できる

ワーカーから他のスクリプトの読み込み
従来のJavascriptでは、
ほかのJavascriptファイルの読み込みができなかったけど
Web Workersを使えば
importScripts()へファイルパスを指定して読み込むことができる
読み込むファイルは、複数指定することも可能で
　,て区切って記述する　
例えば
importScripts(“game.js”,”login.js”);
読み込みの順番は左から、つまり今回なら
game.jsから
となる

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