カテゴリー: 未分類

FileAPIメモ

FileAPIのメモ
ファイルの読み込みは
Fileオブジェクト、FileReaderを使う
選択されたファイルはfiles配列へ入る
テキストファイルの読み込みは
readAsText()
バイナリファイルの読み込みは
readAsBinaryString()
画像、映像ファイルなら
readDataURL()
を使う
バイナリデータ読みだしには
charCodeAt()など文字列処理メソッドが使える

ファイル読み込みのエラーコード

エラー処理
ファイル読み込み失敗すると
onerrorへ
設定したイベントハンドラが呼び出される
このイベントハンドラに渡される
Eventオブジェクトのtarget.error.codeへ
エラーコードが入る
エラーコードは以下の通り
1
ファイルが見つからない
2
セキュリティーエラー
3
読み込みが中断
4
読み込めない
5
エンコーデイングが間違っている

FileReaderオブジェクトについて

FileReaderオブジェクトについて
テキストファイルの内容を読み込むには
FileReaderオブジェクトを使う
このオブジェクトには
テキストファイル
バイナリファイル
画像ファイル
などを扱うために必要なプロパティやメソッドがある
まず、FileReaderオブジェクトを定義
reader = new FileReader();
FileReaderオブジェクトを生成したら
テキストファイルを読み込む
テキストファイルを読み込ませるには
readAsText()を使う
reader.readAsText(textFile,”utf-8″);
readAsText()は、2つのパラメータを指定できる
最初のパラメータには
読み込ませたいFileオブジェクト
二番目のパラメータには
読み込むテキストファイルの文字コード
この文字コード指定は
meta要素のcharset属性と同じ
ちなみに、文字コードは省略できる
ただし、ブラウザーの自動判別なので
文字化けする可能性がある

テキストファイルか判別する処理

テキストファイルか調べるには
選択されたファイルを読み出すとき
input要素たと
multiple属性は指定してないから複数のファイルは選択できず
1つだけになる
しかし、これでもfilesは配列になるので
選択されたファイルへアクセスするには
以下のように
files配列の最初の要素を使う
var textFile = document.getElementById(“filedata”).files[0];
これで、textFileへFileオブジェクトが入る
でも、これには問題があり
accept属性はすべてのブラウザー対応じゃないから
ほかのブラウザーでは例外が起きてしまう
なので
Javascriptでテキストファイルか調べるようにする
ファイルの種類は
Fileオブジェクトの
type属性で調べることができる
ここには、MiME typeを示す文字が入る
しかし、ここでも問題発生
テキストファイルには
複数の種類があり
プレーンテキストだけでなく
HTMLとかも該当する
このため、さらに絞り込みするため
text/の文字が含まれるか調べる
テキストファイルを調べてみると
text/text
プレーンテキスト
text/html
HTMLファイル
text/xml
XMLファイル
text/css
CSSファイル
text/rtf
リッチテキストファイル
となる
なので、これを使い判別する
ソースにすると
if(textFile.type.indexOf(“text/”)!=0){
というように
Fileオブジェクトのtypeプロパティに
text/ が含まれるかを
文字列検索関数 indexOf()を使い調べる
indexOf()は
パラメータに指定した文字列が含まれているなら0を返す
つまり、今回なら
text/
が含まれているなら0を返し
そうでないなら
-1を返す
あと、判別を
!=0
としたのは
==-1
でも同じに見えるけど
image/text/など、変なときにエラーで-1を返したりするから
今回の場合だと
indexOf()は
text/が先頭以外、つまり、パスが違うときにも-1を返すため
==-1
だと、違うファイルを読み込む可能性がある
その点、!=0としておけば
text/から記述されているパスのみになるので、
途中のパスにtextを含むディレクトリまで選ぶことはなくなる

FileAPIの確認

File APIの確認
File APIが、使えるか判断するには
Fileオブジェクトが存在するか調べる
Fileオブジェクトがないなら
以降の処理を行わないようにする
ソースにすると
if(!window.File){
ele.innerHTML=”Fileオブジェクトなし”;
return;
}

位置情報まとめ

位置情報まとめ
GeolocationAPIて、位置情報取得するには
getCurrentPosition()
と
watchPosition()
がある
定期的に位置情報取得するなら
watchPosition()
を使う
watchPosition()による
定期的な位置情報取得を、停止するなら
clearWatch()
を使う
GeolocationAPIの場合、
方角や速度は、一定以上の速度で移動しないと値を取得できない
高度は、計算で出しているため
正確な数値ではない
GeolocationAPIで得られる位置は、
世界測地形になる

Ajaxとは

Ajaxとは
Ajaxとは、Webブラウザに実装されているJavascriptの
HTTP通信を利用して
Webページのリロードを行わずに
サーバーとデータのやりとりをすることで処理をすすめる
対話型のWebアプリのこと
Ajaxは
Asynchronous
Javascript
+XML
の略
Javascriptを使った非同期通信と
XMLを意味する
従来のWebアプリでは
ページをリンクすると、リロードしたけど
Ajaxを使えば
Javascriptの非同期HTTP通信で
画面の必要な部分だけ書き換えたりできる
ユーザ操作と平行してサーバーと通信ができる
これにより、ネイティブアプリみたいな体感ができる
名前にXMLが入ってるけど
JSONやほかのものも使える
Ajax要は
HTML要素の一部書き換え
このため、プログラムから文章にアクセスし、操作する
方法が必要
これを行うのが
DOM
DOMは
Document
Object
Model
の略
これをつかえば、画面の画像を別のものに差し替えたり
メッセージやタイトルの書き換えができる
onclick=””
のところへ
自作関数名をかく
onclick=”touch()”
onclick=”touch”ではダメ
ちゃんと()もつけること！
innerHTMLは要素の書き換えをする
divタグの要素書き換えなら
divタグへIDつける
getElementById()て特定のDOM要素を取得
DOM要素をinnerHTMLて要素書き換え
innerHTMLは
テキスト書き換えだけじゃなく
新たにHTMLを生成し、
完全に書き換えもてきる