ローカルストレージはドメインごとにストレージが異なり、保存されたデータは永久に残り続ける。
セッションストレージはウィンドウごとにストレージが異なり、ウィンドウが閉じられるとデータは削除される。

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

・セッションストレージの場合
保存：　sessionStorage.setItem( キー, 値 );
読込：　変数 = sessionStorage.getItem( キー );

・ローカルストレージの場合
保存：　localStorage.setItem( キー, 値 );
読込：　変数 = localStorage.getItem( キー );

※セッションストレージの例

function saveStorage(id){
var target = document.getElementById(id);
var str = target.value;
sessionStorage.setItem("message",str);
}

function loadStorage(id){
var target = document.getElementById(id);
var msg = sessionStorage.getItem("message");
target.innerHTML = msg;
}

※ローカルストレージの例

function saveStorage(id){
var target = document.getElementById(id);
var str = target.value;
localStorage.setItem("message",str);
}

function loadStorage(id){
var target = document.getElementById(id);
var msg = localStorage.getItem("message");
target.innerHTML = msg;
}

http://libro99.appspot.com/index3?id=179002&page=2&label=%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0

— posted by midilin @ 09:22AM

データベース・リンクとは？

分散データベースの管理の１つでリモート・データベースのオブジェクトへのアクセスを可能にするローカル・データベース内のポインタ。

今使っているデータベースをローカル・データベースとして、
select文を発行すると、実際にはリモート上のデータベースにアクセスしているいう事。

http://www.oklab.org/oracle/dblink.html

— posted by midilin @ 02:47PM

DECLAREとは宣言部のこと。
実行部の開始を表すbeginが出現するまでの間の部分で、
一般にプロシージャやファンクションは
開始直後にその中で使う変数をすべて記述する。

つまり、変数や定数の宣言は
DECLAREとBEGINの間で行う。

— posted by midilin @ 11:36AM

function init() {
window.addEventListener("dragenter", dragenter, true);
dropbox = document.getElementById("dropbox");
window.addEventListener("dragleave", dragleave, true);
dropbox.addEventListener("dragover", dragover, true);
dropbox.addEventListener("drop", drop, true);
}

ドロップイベントのインターフェイス "dataTransfer" を使ってファイルハンドラを取得

function drop(e) {
var dt = e.dataTransfer;
var files = dt.files;
e.preventDefault();
if (files.length == 0) {
handleData(dt);
return;
}
for (var i = 0; i < files.length; i++) {
var file = files[i];
handleFile(file);
}
}

ファイル APIを使ったファイルの取得方法も掲載されている

File Readerインターフェイスでファイルの読み込める
}

http://netforestdevnote.blog26.fc2.com/blog-entry-36.html

— posted by midilin @ 09:12AM

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

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

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


・データベースのオープン
Database openDatabase(dbname, version, displayName, estimatedSize)
（dbnameは空ＯＫ。
　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

PL/SQL で SELECT を行なうには SELECT 〜 INTO を使用して SELECT の結果を変数に代入する必要あり。


CREATE OR REPLACE PROCEDURE RIVUS.STEP01_SELECT
IS
vUserID USER_MASTER.USER_ID%TYPE;
vUserName USER_MASTER.USER_NAME%TYPE;
BEGIN
SELECT USER_ID, USER_NAME INTO vUserID, vUserName FROM USER_MASTER;
DBMS_OUTPUT.PUT_LINE('利用者IDは' || vUserID || 'です。');
DBMS_OUTPUT.PUT_LINE('利用者名は' || vUserName || 'さんです。');
END;
/
（しかし、このプログラムは抽出対象レコードが単一の場合しか使用できない）
http://www.shift-the-oracle.com/plsql/select.html

— posted by midilin @ 05:46PM

表から取得した複数レコードの項目を、まとめてコレクションにセットする。

LIMITオプションで、一回に処理する件数を指定することもできる。


http://oracle.se-free.com/plsql/d9_bulk_fetch.html

— posted by midilin @ 04:50PM

・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、両方ＯＫ。

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

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

— posted by midilin @ 09:02AM