Today: Yesterday: Total: Online:
カテゴリー
その他
  • RSS1.0
  • RSS2.0
  • atom0.3
  • valid XHTML1.0
  • valid CSS2
  • Credit
RSSリーダーで購読する | この日記のはてなブックマーク数 | プロフィール
コメントが一番多い記事(233コメント):人の心理の裏をかくホームページ集客術:リピータになってもらうためには
ツイートが一番多い記事(94ツイート):ちょっと待て!twitterやfacebookに子供の写真を掲載する親達への警告
いいねが一番多い記事(574いいね):facebookスパムに要注意。なりすましの見分け方とアカウント乗っ取りの手口(2013年度版)

[ カテゴリー » HTML・タグ » HTML5 ]

カテゴリー » HTML・タグ » HTML5 January 21, 2011

html5 file API ID:1295568623


HTML5で、ファイル選択ダイアログ(input type="file)やドラッグ&ドロップで、
Webアプリがファイルを受け取る事ができる。

https://groups.google.com/group/html5-developers-jp/browse_thread/thread/b47b9cfbfa0e5a99?hl=ja&pli=1


・File APIによるファイルアクセス

http://libro99.appspot.com/index3?id=384001&label=javascript

わかりやすく説明してある。

HTML側で
<input type="file" id="file1" onchange="dochange(event);">

でJavascriptに渡す
<input type="file">
で受け取ったものは、Javascript側で

var file = event.target.files[0];
で取り出せる。

取り出したFileオブジェクトを引数に渡してgetfileinfo関数に渡すとき
以下のプロパティがある。
name――ファイル名
size――ファイルサイズ
type――ファイルタイプ(HTTPでの形式)
modify――最終修正日
(ブラウザによってサポートされているものが違うらしい)

function dochange(event) {
var file = event.target.files[0];
if (file) {
getfileinfo(file);
}
}

function getfileinfo(file){
var name = file.name;
var size = file.size;
var type = file.type;
var modify = file.modify;
var str = "名前:" + name + "
";
str += "サイズ:" + size + "
";
str += "タイプ:" + type + "
";
str += "最終修正日時:" + modify + "
";
document.getElementById("msg").innerHTML = str;
}


※Firefox 3.5の場合

function getfileinfo(file){
var name = file.fileName;
var size = file.fileSize;
var str = "名前:" + name + "
";
str += "サイズ:" + size + "
";
document.getElementById("msg").innerHTML = str;
}

テキストファイルを読み込むには
readfile関数でファイルの読み込みをする。

[FileReader].readAsText( [File] , [エンコード] );

FileReaderのイベント

onloadstart――読み込み開始時のイベント
onprogress――読み込み作業中のイベント
onload――正常に読み込んだときのイベント
onabort――中断時のイベント
onerror――読み込みエラー時のイベント
onloadend――読み込み処理完了時のイベント

function dochange(event) {
var file = event.target.files[0];
if (file) {
readfile(file);
}
}

function readfile(file) {
var reader = new FileReader();
reader.readAsText(file,"sjis");
reader.onload = loaded;
reader.onerror = error;
}

function loaded(event) {
var str = event.target.result;
document.getElementById("msg").innerHTML = str;
}

function error(evt) {
if (evt.target.error.code == evt.target.error.NOT_READABLE_ERR) {
alert("ファイルが読めません!");
}
}

イメージファイルを読み込む場合もFileReaderを使うことができ、
ファイルの読み込みに「readAsDataURL」というメソッドを使える。
(バイナリファイルの中身を読み込むためのメソッド)

html側

<input type="file" id="file1" onchange="dochange(event);"><img
id="img1" src="" style="width:200px;height:150px;">

javascript側
function readfile(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = loaded;
reader.onerror = error;
}

function loaded(event) {
var str = event.target.result;
document.getElementById("img1").src = str;
}

・html5の File API を使って、アップロード無しで画像プレビュー

http://d.hatena.ne.jp/favril/20100506/1273143063

・html5 の File API を使って、ローカルのテキストファイルを読み込む
function read (ele) {
if (!ele.files.length) return;

var file = ele.files[0];
if (!/^text\//.test(file.type)) return; // text/plain, text/html, ...

var fr = new FileReader();
fr.onload = function () {
document.getElementById('text').value = fr.result; // 読み込み結果をtextareaに
};
fr.readAsText(file); // ファイルをテキストとして読み込む
}

http://d.hatena.ne.jp/favril/20100512/1273670339

・第3回Webkit/HTML5勉強会 - File APIと加速度センサー
イベントリスナーの登録や、ドラッグ、ドロップ時の処理など。
Firefox 3.6のみ対応

http://www.slideshare.net/nakamura001/3webkithtml5-file-api-3208806

— posted by midilin @ 09:10AM

カテゴリー » HTML・タグ » HTML5 January 20, 2011

HTML5 データベース db アクセス ID:1295483303


Web SQL Databaseという、DBがアクセスできる。
(最初はSqliteを想定されていたらしい)

http://www.publickey1.jp/blog/09/websql.html


・データベースのオープン
Database openDatabase(dbname, version, displayName, estimatedSize)
(dbnameは空OK。
 versionはデータベーススキーマのバージョン。空文字を使用すると、バージョンに関係なくデータベースをオープン。
 displayNameは、データベースをユーザに表示する際に使用される名称
 estimatedSizeは、データベースの見積りサイズをbyte単位で指定)
 

・SQLの実行
db.transaction(callback, onError, onSuccess)
(dbはDatabaseオブジェクト
 callback:トランザクション内で行う処理
 onError:トランザクションがエラー終了した際の処理
 onSuccess:トランザクションが正常終了した際の処理
 callback以外は省略可能)
 
tx.executeSql(sql, args, onSuccess, onError)
(txはSQLTransactionオブジェクト
 sql:そのままSQL
 args:sqlで?を含めることができ、置換したもの?
 あとは同様)


サンプル
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
// データベースのオープン
var db = openDatabase("mycom_sample", "", "Sample for mycom", 1024*1024);
// テーブルの作成
db.transaction(function(tx) {
tx.executeSql("create table if not exists storage (name, val)");
});
function load() {
db.transaction(function(tx) {
tx.executeSql("select * from storage", [], function(tx, rs) {
var list = document.getElementById("list");
list.innerHTML = "";
var rows = rs.rows;
// storageテーブルに格納されている全ての値を列挙
for (var i = 0, n = rows.length; i < n; i++) {
var row = rows.item(i);
list.options[list.options.length] = new Option(row.val, row.name);
}
});
});
}
function remove() {
var list = document.getElementById("list");
if (list.selectedIndex < 0) {
return;
}
var selected = list.options[list.selectedIndex].value;
// 選択された項目を削除
db.transaction(function(tx) {
tx.executeSql("delete from storage where name = ?", [selected], function() {
load();
});
});
}
function add() {
var name = document.getElementById("name").value;
var value = document.getElementById("value").value;
// storageテーブルに値を格納
db.transaction(function(tx) {
tx.executeSql("insert into storage (name, val) values (?, ?)", [name, value], function() {
load();
});
});
}
</script>
</head>
<body onload="load()">
<h1>Databaseのサンプル</h1>
<select id="list" size="5" style="width: 100px"></select>
<button onclick="remove()">削除</button><br>
キー:<input type="text" id="name"><br>
値:<input type="text" id="value">
<button onclick="add()">追加</button><br>
</body>
</html>

2009年時では、Safari 4のみが対応?

http://journal.mycom.co.jp/special/2009/html5-2/008.html

サンプル
http://d.hatena.ne.jp/emergent/20100301/1267450386

Google Chromeでも動くらしい

HTML5のWeb SQL DatabaseをGoogle Chromeで試す
http://d.hatena.ne.jp/emergent/20100301/1267450386

Chrome 4がHTML 5 Web SQL Database APIをサポート
http://www.infoq.com/jp/news/2010/02/Web-SQL-Database

— posted by midilin @ 09:28AM

カテゴリー » HTML・タグ » HTML5 January 18, 2011

5分で把握するHTML5 ID:1295309251


・HTML5とは?
・HTML5: HTMLとXHTML向けのボキャブラリと関連API
−フォームの強化
input要素のtype属性に指定できる型に
number(数値)、date/time/datetime/datetime-local(日時)、month(月)、week(週)、color(色)、search(検索エンジン)、tel(電話番号)、url(URL)、email(メールアドレス)などが増えた

−canvasタグ
幅と高さを指定したcanvasを定義、JavaScriptコードで矩形や円、画像などを描画

−メディア要素(videoタグ、audioタグ)
videoタグは動画、audioタグは音声。imgと同じ使い方をする。

・Web Storage
−Storage
キー/バリューの形式で永続化
sessionStorageはウィンドウごと保存され、永続化期間はそのウィンドウを閉じるまで

−データベース
SQLが使える。。非同期APIと同期API、両方OK。

・Web Workers
バックグラウンドで動作するJavaScriptスレッド

・Web Sockets
サーバサイドプロセスと双方向に通信する事を可能


http://journal.mycom.co.jp/articles/2009/06/15/gdd1/index.html
http://journal.mycom.co.jp/special/2009/html5-2/menu.html

— posted by midilin @ 09:07AM

カテゴリー » HTML・タグ » HTML5 January 18, 2011

HTML 5と関連APIの最新動向  新タグ&API編 ID:1295308975


HTML 5マークアップについての簡易リファレンス
Video/Audio要素とそのAPI
Canvasタグ
大幅に強化されたフォーム要素
アウトラインを意識したマークアップ
ドラッグ&ドロップAPI

が掲載されている。
http://journal.mycom.co.jp/special/2009/html5-1/menu.html

— posted by midilin @ 09:02AM

カテゴリー » HTML・タグ » HTML5 January 18, 2011

html5 サンプル集 ID:1295308525


html5のサンプル集として

アプリケーションキャッシュ
Transform
フェードアニメーション
Throbber・・・読み込み中に表示するもの
Web Database
ドラッグ&ドロップAPI
フォーム
Video要素
サポートされているメディア形式のチェックツール
クロスドキュメントメッセージング
(異なるウィンドウ(フレーム)間でメッセージの送受信を行う)
ローカルストレージ
セッションストレージ
Web Workers
(JavaScriptでバックグラウンドスレッドを実現)
File API
FileReader

http://ayuta.co.jp/html5-samples/

— posted by midilin @ 08:55AM

カテゴリー » HTML・タグ » HTML5 January 17, 2011

Flashだとここまでできる! HTML5とFlashの機能比較 ID:1295223516


・HTML5、Flash5の両方でできること
グラフィック描写
映像の再生
(html5はvideoタグでできるが、動画コーデックが統一しておらず、クロスブラウザが現状無理。
 Flashは普及率98%)
音声の再生
3D
ソケット通信
複数ファイルのアップロード

・HTML5のみでできること
ストレージ/データベース
戻るボタン(Ajax対応)
ブラウザ外からのドラッグ&ドロップ
位置情報
メッセージ
Web Workers(バッググランド処理)

・Flashのみにできること
高度な文字組み情報(縦書きなど)
(縦書きはFlash10から)
テキストなどのアンチエイリアシング処理
ビットマップエフェクト(ぼかし、光彩)
映像のストリーミング配信
タイムラインへの動画埋め込み
コンテンツ保護や視聴制限を適用した映像配信
外部ファイルの読み込みのローディングバー表示
音声の動的生成(Flash 10 から)
フルスクリーン表示
ウェブカメラへのアクセス
マイクへのアクセス
透過画像の圧縮(透過JPEG)

http://clockmaker.jp/blog/2010/02/flash-vs-html5/

— posted by midilin @ 09:18AM

カテゴリー » HTML・タグ » HTML5 January 14, 2011

HTML5対応のWebブラウザーからWindows PCを遠隔操作 ID:1294998894


http://www.forest.impress.co.jp/docs/review/20100810_386720.html

— posted by midilin @ 06:54PM

カテゴリー » HTML・タグ » HTML5 January 14, 2011

HTML5 対応ブラウザ ID:1294997823


Google Chrome 3.0 以降
Safari 3.1 以降
Firefox 3.5 以降
Opera 10.5
Internet Explorer 9 など
http://ja.wikipedia.org/wiki/HTML5

— posted by midilin @ 06:37PM


カウンター