HTML5

[HTML5]input

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で複数ファイルのアップロード

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

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

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

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

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

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