gissn.dev

2017년 1월 2일 월요일

HTTPリクエスト、レスポンス色々

ウェブブラウザは、HTTPリクエストメッセージを作成
・URLを解析し、ウェブサーバとファイル名(URI)が判断できたら、それを元でHTTPリクエストメッセージを作成
http: + // + www.google.co.jp + / + dir + / + file.html

http: データソースにアクセスする構造（プロトコル）を記述
// 後ろの続きはサーバ名を表す
www.google.co.jp ウェブサーバ名
/dir/file.html データ元のパス名　※ 最初の/：ルートディレクトリを意味

httpプロ処を使用する(httpサーバ)www.google.co.jpというウェブサーバから/dir/file.htmlのパスのファイルにアクセスするという意味（ファイルをリクエスト）

・HTTPプロトコルは、クライアントとサーバーが通信するメッセージの内容、順番を定めた規約
・クライアント --> サーバにリクエストメッセージを送信する。リクエストのメッセージには
「何を」、「どうするか」が含まれる。
「何を」　：リクエストするファイル名または　CGI名などが該当（URI　--> ex. /dir/file.html）
「どうするか」：メソッド（代表的なメソッドは、GET, POST)
GET --> URIで指定したリソースをリクエスト
POST --> サーバ側にデータを送信

・サーバ --> クライアントにレスポンスメッセージを送信する。
レスポンスのメッセージには、状態コードとデータが含まれる

・サーバからレスポンスメッセージを表示するとページが文章だけだと表示することでいいだが、
写真とか図などを含む場合は、イメージ以外のテキストのみ表示してから、
もう一度、ウェブサーバにイメージファイルをURIに指定し、リクエストメッセージを送信
リクエストメッセージを記載するURIは一つで決まっているため、複数のイメージファイルが
ある場合、イメージ数分のリクエストが必要になる

・ウェブサーバは、HTTPリクエスト作成はできるが、ウェブサーバーにメッセージを送信するのは、
できない

・ウェブサーバは（アプリケーション）、ソケットライブラリにDNSサーバからウェブサーバのIPアドレスを参照するようにリクエスト

・OS（TCP/IP）にデータ送信をリクエスト

・TCP/IP(softwear)はデータ送信・受信を制御（通信の準備作業など）
　※インターネットではデータを送信時に細かく分けた形(パケット）で転送するが
　　　そのパケットの送信・受信を制御するのがIPの主な役割

・LANカードが実際の送信、受信処理を行う

Geolocation

http://mikaduki.info/api/1823/
http://help.opera.com/Windows/10.61/ja/geolocation.html#details

◆Geolocation機能は、ユーザが現在地球上のどの位置にいるかを特定する機能
Geolocationは、ユーザの位置情報を教えてくれるAPI

◆Geolocation仕組み

無線LAN、携帯電話基地局、GPS、IPアドレスなどから送信されたデータを取得

◆Geolocationオブジェクト取得
navigator.geolocaion --> Andoroid端末では対応してない場合がるので、googleのWEB拡張設定を使って値を取得

◆Andoroid用option設定は、

・GPSを使用して正確さを増やす
・データ取得を待つミリ秒
・キャッシュを保持するミリ秒

var option = {enableHighAcuuracy:true, timeout:10000, maximumAge:0};

◆データ取得については、
現在の位置を一度きりのデータを取得する方法と
一定間隔おきにデータを取得する方法がある

・geolocation.getCurrentPosition($成功時コールバック関数、$失敗時コールバック関数、$オプション)
・geolocation.watchPosition($成功時コールバック関数、$失敗時コールバック関数、$オプション)

※clearWatch --> watchPositionでの定期的な取得をクリア

◆positionのcoordsプロパティ
緯度
経度
高度
方向
スピード
緯度経度の精度
高度の精度

・position.coords.latitude
・position.coords.longitude
・position.coords.altitude
・position.coords.heading
・position.coords.speed
・position.coords.accuracy
・position.coords.altitudeAccuracy

◆errorプロパティ
geolocation情報取得に失敗した場合のエラーコード、メッセージ
・error.code
・error.message

------------------------------------------------------------------

<div id="latitude"></div>
<div id="longitude"></div>
<div id="altitude"></div>
<div id="speed"></div>
<div id="accuracy"></div>
<div id="heading"></div>
<div id="altitudeAccuracy"></div>
<script type="text/javascript">
(function (){
debugger;
var geo = window.navigator.geolocation;
// geolocationオブジェクトが使えない場合、
// googleのWEB拡張設定を使って値を取得
if(geo === undefined){
geo = google.gears.factory.create('beta.geolocation');
}

// Android用option設定
// GPSを利用して制度を増やすか、データの取得を待つミリ秒、キャッシュ保持時間(ミリ秒)、
var option = {enableHighAccuracy:true, timeout:10000, maximumAge:0};

// ユーザの位置を一度きりで取得
geo.getCurrentPosition(success, fail, option);

// 一定間隔おきに位置情報データ取得
geo.watchPosition(success, fail, option);

function success(position){
alert('geolocation情報取得成功');
$('latitude').innerHTML = "緯度：" + position.coords.latitude;
$('longitude').innerHTML = "経度：" + position.coords.longitude;
$('heading').innerHTML = "方向：" + position.coords.heading;
$('altitude').innerHTML = "高度：" + position.coords.altitude;
$('speed').innerHTML = "速度：" + position.coords.speed;
$('accuracy').innerHTML = "緯度緯度の精度：" + position.coords.accuracy;
$('altitudeAccuracy').innerHTML = "高度の精度：" + position.coords.altitudeAccuracy;
}

function $(id){
return document.getElementById(id);
}

function fail(err){
alert('geolocation情報取得失敗 '　+ err.code + " : " + err.message);
}

})();

</script>

2017년 1월 1일 일요일

file

<input type="file" multiple name="file[]" id="file">
<div id="info"></div>
<div id="result"></div>

<script type="text/javascript">
(function () {
if (window.file) {
debugger;
var fileEl = document.getElementById('file');
fileEl.addEventListener("change", display);

function display() {
var files = fileEl.files;
debugger
console.log(typeof filesArray);
var info = "";
var result = "";
var fileReader;

for (var idx = 0; idx < files.length; idx++) {
debugger
var file = files[idx];
var fileName = file.name;
var fileSize = file.size;
var fileType = file.type;
var fileUpdate = file.lastModifiedDate;
var fileUrn = file.urn;
info += '--------------------------------------------------------';
info += '<li>' + 'fileName: ' + fileName + '</li>';
info += '--------------------------------------------------------';
info += '<li>' + 'fileSize: ' + fileSize + '</li>';
info += '<li>' + 'fileType ' + fileType + '</li>';
info += '<li>' + 'fileUpdate ' + fileUpdate + '</li>';
info += '<li>' + 'fileUrn ' + fileUrn + '</li>';

fileReader = new FileReader();
fileReader.readAsText(file, "utf-8");
fileReader.addEventListener('load', function () {
debugger;
result += document.getElementById('result').innerHTML;
result += '-------------------------------------------------------';
result += '<li>' + "内容：" + fileReader.result + '</li>';
document.getElementById('result').innerHTML = result;
});

fileReader.addEventListener('error', error);
function error() {
return function () {
alert(event.target.error.code);
};
}
}

document.getElementById('info').innerHTML = info;
}

} else {
alert('fileをサポートしません');
}

})();
</script>

worker

http://m.mkexdev.net/52

http://d.hatena.ne.jp/ushiboy/20101021/1287667594

javascriptはもともとシングルスレッドといい、時間がかかる処理の場合
その間、他のUI作業をスクリプト作業が完了するまで待機しないといけなかったが
Webworkerを使えば、複数のプログラムを平行して実行できる（マルチスレッド）

WebworkerはjsコードをUIスレッドと別途でバックグラウンドで実行できるため、
worker処理が行われる間ウェブページが固まることなく、UI作業を行うことができる

ワーカをサポートしないブラウザかを確認する必要がある
if(!!window.Worker){
alert("ブラウザがワーカをサポートしません")
}

terminate() ワーカを終了
onmessage　メッセージ受信イベント
postMessage　メッセージ送信イベント
onerror エラー発生時感知イベント
errプロパティ
・message
・filename
・lineno エラーが発生した時、エラー発生行を知ることができる
-----------------------------------------------
worker.html
-----------------------------------------------
...
<body>
<button onclick="callWorker()">callWorker</button>
<button onclick="stopWorker()">stopWorker</button>
<br>
<input type="text" id="toworker">
<div id="result"></div>
<script type="text/javascript">
var worker;
function callWorker() {
if (!!window.Worker) {

// workerがすでに存在した場合終了
if (worker){
worker.terminate();
}

// worker処理を定義したjsをパラメータでworker生成
worker = new Worker("./worker.js");

// workerからメッセージ受信
worker.onmessage = function(event) {
document.getElementById('result').innerHTML = event.data;
};

// ワーカーにパラメータ送信
worker.postMessage(document.getElementById('toworker').value);
} else {
alert("ブラウザがワーカをサポートしません")
}
}

function stopWorker() {
if (worker) {
worker.terminate();
}
}
</script>
</body>

-----------------------------------------------
worker.js
-----------------------------------------------
var total = 0;
onmessage = function(event){
for(var val=0; val < 50000000000000000000; val++){
total = total + val;

// workerから
postMessage(event.data + ' 中間結果:' + total);

}

postMessage(event.data + '結果' + total);
}

Storage

Storageオブジェクトには、LocalStorageとSessionStorageの2種類がある。

１．SessinStorage
ブラウザを閉じるとデータが消えてしまう。

２．LocalStorage
　・ブラウザを閉じてもデータは残る
　・ブラウザにKey-Value型で保存される。
　・デベロッパツールのResourcesタグのLocalStorage項目で確認できる
　・重要な情報を保存するのは望ましくない（個人情報。。）
　・メソッド
　getItem(key)
setItem(key, 値)
removeItem(key)
clear() LocalStorageにあるデータをすべて削除

　・キー：値　 --> 1:n　可能
　　キー一つに対して複数の値を保存できる
　　複数の値は、JSONというデータのフォーマットで設定する
　　LocalStorageに設定：JSON.stringify({'key1':value, "key2:value"}) --> Objectを文字列
LocalStorageから取得：JSON.parse("{'key1:value,''key2:value'}");--> 文字列をObject

page Visibility

・下記のイベントが発生した場合、visibilitychangeイベント発生
ページが最小化
ページ遷移
ページが隠れる
※window クローズの場合は、発生しない

・visibilitychangeイベントが発生したら、document.hiddenの状態はtrue

document.hidden --> true

Audio

１．audio 再生時間が変わった時に発生するイベント
timeUpdate　--> chromeの場合、0.25秒ごとイベント発生

２．audioメソッド

audio.play()
audio.pause()
audio.load()

３．audioプロパティ

audio.duration
audio.currentTime
audio.volume ---> 0以下、1以上の場合エラー
audio.playbackRate
audio.paused
audio.ended
audio.error
audio.readyState
audio.networkState

-----------------------------------------------------------

audioメソッド

audio.play() 再生
audio.pause() 停止
audio.load() 再ロード

audioプロパティ

audio.duration　メディアの長さ
audio.currentTime 再生位置
audio.volume 音量(0 ~ 1 --> +0.1, -0.1)
audio.playbackRate スピード(+0.5, -0,5)
audio.paused 停止状態判定
audio.ended　　　　　終了状態判定
audio.error エラーの状態（何もなければnull)
audio.readyState　　メディアの準備状態　
audio.networkState　ネットワーク状態

play開始前
-----------------------

readState :null

readyState :0 何も準備できてない

networkState :3 リソースがみつからない

play後（play後停止、終了しても状態は同じ）

-------------------------

error :null

readyState :4 HAVE_ENOUGH_DATA 充分に完了

networkState :1　　　NETWORK_IDLE　利用停止状態

最初は 2 (データダウンロード中)--> 1

<button id="play">play</button>
<button id="pause">pause</button>
<button id="load">load</button>
<button id="end">終了</button>
<button id="currenTime">currentTime最初から</button>
<button id="volumeDown">volume-</button>
<button id="volumeUp">volume+</button>
<button id="playbackRateUp">playbackRate+</button>
<button id="playbackRateDown">playbackRate-</button>
<div id="info"></div>
<div id="infoVolume"></div>
<div id="infoCurrentTime"></div>
<div id="infoDuration"></div>
<div id="infoPlaybackRate"></div>
<div id="infoError">エラーなし</div>
<div id="infoReadyState">準備状態</div>
<div id="infoNetworkState">ネットワーク状態</div>

<script type="text/javascript">
var audio = new Audio();
audio.src = "http://www.noiseaddicts.com/samples_1w72b820/2558.mp3";

// 再生時間が変わった時にtimeupdateイベント発生：chromeの場合0.25秒ごとに呼ばれる
audio.addEventListener("timeupdate", displayInfo);

$('play').addEventListener("click", play);
$('pause').addEventListener("click", pause);
$('currenTime').addEventListener("click", currentTime(0));
$('volumeUp').addEventListener("click", volume(true));
$('volumeDown').addEventListener("click", volume(false));
$('playbackRateUp').addEventListener("click", playbackRate(true));
$('playbackRateDown').addEventListener("click", playbackRate(false));
$('load').addEventListener("click", load);
$('end').addEventListener("click", end);
$('infoError').innerHTML = "readState :" + audio.error;
$('infoReadyState').innerHTML = "readyState :" + audio.readyState;
$('infoNetworkState').innerHTML = "networkState :" + audio.networkState;

function displayInfo() {
$('infoVolume').innerHTML = "infoVolume :" + audio.volume;
$('infoCurrentTime').innerHTML = "infoCurrentTime :" + audio.currentTime;
$('infoDuration').innerHTML = "infoDurationvolume :" + audio.duration;
$('infoPlaybackRate').innerHTML = "infoPlaybackRate :" + audio.playbackRate;
$('infoError').innerHTML = "error :" + audio.error;
$('infoReadyState').innerHTML = "readyState :" + audio.readyState;
$('infoNetworkState').innerHTML = "networkState :" + audio.networkState;

// 終了状態の場合
if (audio.ended) {
return $('info').innerHTML = '終了';
}
// 停止状態の場合
else if (audio.paused) {
return $('info').innerHTML = '停止';
} else {
return $('info').innerHTML = '';
}
}

function play() {
audio.play();
}

function pause() {
audio.pause();
}

function load() {
$('info').innerHTML = "再読み込み!(audio.load())";
audio.load();
}

function end() {
debugger;
audio.currentTime = audio.duration;
}

function volume(upFlg) {
return function () {
if ((upFlg && audio.volume === 1) || (!upFlg && audio.volume === 0)) {
return;
}

if (upFlg) {
audio.volume += 0.1;
} else {
audio.volume -= 0.1;
}
};
}

function currentTime(time) {
return function () {
audio.currentTime = time;
};
}

function playbackRate(upFlg) {
return function () {
if (upFlg) {
audio.playbackRate += 0.5;
} else {
audio.playbackRate -= 0.5;
}
};
}

function $(id) {
return document.getElementById(id);
}

</script>