info

category : HTML5
[HTML5]input  @ HTML5 2015年3月4日
input
HTML5で追加されたtype
  • search
  • tel
  • url
  • email
  • date
  • month
  • week
  • time
  • number
  • range
  • color

サンプル

見た目(pc firefox)
sc01

見た目(iOS7.1.1)
sc00

iOS7.1.1での入力時のキーボード
search
00search

tel
01tel

url
02urle 02url

email
03email

date
04date

month
05month

week
使用不可

time
06time

number
07number 07numberj

range
キーボードは出現しない

color
使用不可
08color

[HTML5]inputで複数ファイルのアップロード  @ HTML5 2013年4月28日
inputで複数ファイルのアップロード。
IE9は未対応 omg!
Sample

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>html5によるファイル複数アップロード</title>
<meta name="description" content="****">
<meta name="keywords" content="****">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no,address=no,email=no">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<form method="post" action="upload.php" enctype="multipart/form-data">
    画像複数選択<input type="file" name="image_file[]" multiple="multiple" accept="image/*"/>
    <input type="submit"/>
</form>
</body>
</html>

upload.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>html5によるファイル複数アップロード</title>
<meta name="description" content="****">
<meta name="keywords" content="****">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta name="format-detection" content="telephone=no,address=no,email=no">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<?php
if(isset($_FILES["image_file"])){
	$i=0;
	$data=getReformFilesData();
	foreach ($data as $v) {
		$ext=end(explode('.', $v["name"]));
		$filename='./test'.($i++).$ext;
		$result = @move_uploaded_file( $v["tmp_name"], $filename);
		if($result){
			echo '<img src="'.$filename.'" width="300"/><br/>';
		}else{
			echo 'エラー<br/>';
		}
		foreach($v as $key => $v2){
			echo $key.' : '.$v2.'<br/>';
		}
		echo '<hr><br/>';
	}	
}
function getReformFilesData(){
	if(isset($_FILES["image_file"])){
		$t=array();
		$i=0;
		foreach ($_FILES["image_file"] as $key=>$list) {
			foreach ($list as $no => $v) {
				$t[$no][$key]=$v;
			}
		}
		return $t;
	}else{
		return array();
	}
}
?>

</body>
</html>
[HTML5]Web Storage  @ JavaScript , HTML5 2010年5月13日

HTML5 Web Storageであそびました。

HTML5.JPより抜粋
Web Storage とは、データをブラウザ側に蓄積する仕組みです。
クッキーとよく似ていますが、多くの点で異なります。
Web Storage は大きなデータを蓄積できますので、ユーザーエクスペリエンスの向上や
サーバー負荷の低減に役立てることができます。
現在はW3CのHTML5仕様から分離されてしまいましたが、
次世代のウェブアプリケーションの中核を担うテクノロジーとして期待されています。

WindowsXPの下記のブラウザで動作を確認しました。
Firefox 3.6.3
Safari 4.0.4
Google Chrome 4.1.249.1064

HTML5 Web Storage

key,valueを入力して「保存」をクリックすると

WebStorageにキー、値が保存される。キャッシュをクリアしても消えません。
保存した内容は同じpcで同じブラウザじゃないと閲覧できません。

削除をクリックすると

削除される

参照したサイト一覧(順不同)

HTML5.JP – APIチェッカー – Web Storage
http://www.html5.jp/tutorial/apicheck/webstorage.html

HTML5.JP – W3C – 『Web Storage』日本語訳
http://www.html5.jp/trans/w3c_webstorage.html

[HTML5]Web Messaging  @ JavaScript , HTML5 2010年5月12日

HTML5 Web Messagingで遊んでみました。
イケてるブラウザなら使えるはず。

Web Messaging
フォームにテキストを入力して「送信」を押す

するとiframeでロードしたhtmlに入力したテキストを送信できる

んー?この機能何に使えばいいんだ?・・・よくわからんから保留。

参照したサイト一覧(順不同)

HTML5.JP – HTML5 チュートリアル – HTML5 API チェッカー – HTML5 Web Messaging
http://www.html5.jp/tutorial/apicheck/postmsg.html

W3C – HTML5 Web Messaging
http://dev.w3.org/html5/postmsg/

[HTML5]File API #03  @ JavaScript , HTML5 2010年5月11日

と、言うことは音楽ファイルも再生出来るのではないか。・・・できた。

各ブラウザのコーデック対応状況

Ogg Vorbis mp3 wav
FireFox 3.5 ×
Safari 4 ×
Chrome 3 (beta) ×
Opera 10 (beta) × ×

pcにあるogg音声ファイルをドラッグ&ドロップで再生する。
※Firefox3.6でしか動きません。
File API #03

参照したサイト一覧(順不同)

HTML5.jp – ブラウザーのネイティブなオーディオ
http://www.html5.jp/html5doctor/native-audio-in-the-browser.html

W3C – DOM-Level-2-Events
http://www.w3.org/TR/DOM-Level-2-Events/events.html

[HTML5]File API #01  @ JavaScript , HTML5 2010年5月7日

W3Cで色々策定しているみたいです。色々と。
で、HTML5であそんでみたクエストというものを見つけて
私もFileAPIであそんでみました。

pcにある画像ファイルをドラッグ&ドロップでブラウザに表示する。
※Firefox3.6でしか動きません。
File API #01


と、言うことは・・・。

参照したサイト一覧(順不同)

HTML5であそんでみたクエスト
http://dot3.jp/html5quest/

W3C – FileAPI
http://dev.w3.org/2006/webapi/FileAPI/

株式会社あゆた – HTML5サンプル集
http://ayuta.co.jp/html5-samples/

しばそんノート – W3C File APIを使ってJavaScriptでファイル加工
http://d.hatena.ne.jp/shibason/20100111/1263191021