2010年08月01日

HTML5 のフォーム関連タグ

【関連記事】
HTML4/XHTML1 から HTML5 への変更点
HTML5 のセクション関連タグ
HTML5 のコンテンツグループ化関連タグ
HTML5 のテキストの意味付け関連タグ
HTML5 の埋め込みコンテンツ関連タグ
●参考
4.10 Forms - HTML5

追加されたフォーム関連要素

要素 カテゴリ タグ内に含むもの 説明
datalist flow content
phrasing content
phrasing content
または
0 個以上の option 要素
input 要素で使われる選択肢を定義する。
output flow content
phrasing content
listed, labelable, and resettable
form-associated element
phrasing content 計算結果を表す。
計算自体は、JavaScript などを使って処理する。

変更された属性 (グローバル属性を除く)

要素名 属性名 説明
form novalidate ブール属性。
指定すると、サブミットの際にフォームの正当性チェックが行われない。
fieldset form 関連づけされる form 要素の ID を指定する。
デフォルトでは、すぐ上のレベルの form 要素に関連づけされる。
disabled 指定すると、子ノードのフォーム・コントロールが無効状態になる (最初の legend 要素を除く)。
input type 以下の値が追加された。
search
text とほぼ同様。
プラットフォームによっては、検索フィールドが通常の入力欄と形状が異なる場合があるので、それに対応するためのもの。
tel
電話番号の入力欄。
url
絶対 URL の入力欄。
email
メールアドレスの入力欄。
datetime
日時の入力欄 (UTC)。
date
日付の入力欄。
month
月の入力欄。
week
曜日の入力欄。
time
時刻の入力欄。
datetime-local
日時の入力欄 (現地時刻)。
number
数値の入力欄。
range
目盛りなど、一定の範囲から数値を取得するフォーム・コントロールを表示させる。
color
カラーパレットなど、色を表す文字列を取得するフォーム・コントロールを表示させる。
form (既述)
autofocus ブール属性。
指定すると、ページの表示時にそのフォーム・コントロールにフォーカスが移る。
autocomplete 以下のいずれかを指定する。
on
キーワード・マッピングをオンにする。
off
キーワード・マッピングをオフにする。
値無し
デフォルト状態にする (関連づけられている form 要素の autocomplete の値。form 要素の autocomplete のデフォルト値は on)。
この属性を指定しない場合はデフォルト状態となる。
list あらかじめ定義しておいた選択肢一覧 datalist 要素の ID を指定する。
required ブール属性。
指定するとその要素は必須となり、サブミット時にチェックされる。
multiple ブール属性。
ユーザーが複数の値を指定できることを表す。
pattern フォーム・コントロールの value をチェックするための正規表現。
min 最小値。
値が数値の場合、その値が最小値となる。
値が数値でない場合、type 属性の現在の状態からデフォルトの最小値が決定されれば、その値が最小値となる。
いずれでもない場合、最小値は無しとなる。
サブミットの際、ユーザーが入力した値が数値の場合、最小値より小さいかどうかチェックされる。
max 最大値。
内容は min 属性と同様。
step 取りうる数値の階差。
ベース値は、もし最小値が設定されていればその値。最小値が無い場合、デフォルトのベース値が設定されていればその値。それが無ければ 0。
placeholder ユーザーがデータ入力する際の補助となる短めのヒント。
入力する値のサンプルや、短い説明を記述しておく。
改行コードは使用できない。
label 属性とは異なる。
output
※新規
for 計算に使われたり、計算に影響を与えたりする要素を、明示的に示す。
form (既述)
name 要素名。

W3C サイトに書かれていた例を引用。
(1) input 要素の pattern 属性の例
<label> Part number:
<input pattern="[0-9][A-Z]{3}" name="part"
title="A part number is a digit followed by three uppercase letters."/>
</label>
(2) datalist 要素の例
<input type="url" name="location" list="urls">
<datalist id="urls">
<option label="MIME: Format of Internet Message Bodies" value="http://www.ietf.org/rfc/rfc2045">
<option label="HTML 4.01 Specification" value="http://www.w3.org/TR/html4/">
<option label="Form Controls" value="http://www.w3.org/TR/xforms/slice8.html#ui-commonelems-hint">
<option label="Scalable Vector Graphics (SVG) 1.1 Specification" value="http://www.w3.org/TR/SVG/">
<option label="Feature Sets - SVG 1.1 - 20030114" value="http://www.w3.org/TR/SVG/feature.html">
<option label="The Single UNIX Specification, Version 3" value="http://www.unix-systems.org/version3/">
</datalist>
(3) output要素の例
<form onsubmit="return false">
<input name=a type=number step=any> +
<input name=b type=number step=any> =
<output onforminput="value = a.valueAsNumber + b.valueAsNumber"></output>
</form>
タグ:HTML5
posted by K/I at 08:05 | 東京 🌁 | Comment(0) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする

2010年07月29日

HTML5 のテキストの意味付け関連タグ

【関連記事】
HTML4/XHTML1 から HTML5 への変更点
HTML5 のセクション関連タグ
HTML5 のコンテンツグループ化関連タグ
HTML5 の埋め込みコンテンツ関連タグ
HTML5 のフォーム関連タグ
●参考
4.6 Text-level semantics - HTML5

テキストの意味付け関連要素一覧

要素 カテゴリ タグ内に含むもの 説明
time flow content
phrasing content
phrasing content (time 要素を除く) 時刻または日付 (時刻とタイムゾーンをつけてもよい) を表す。
mark flow content
phrasing content
phrasing content テキストの一部を強調表示するのに使う。
emstrong と異なり、本来の文章の意図とは別の意味付けから強調したい場合に用いる (あとから蛍光ペンでマーカーをつける感覚)。
たとえば以下の状況で使われる。
  • 引用した文の一部を強調表示 (もともとは強調表示されていない) → 例の (2) 参照
  • ユーザーの操作に関連が深い部分を強調表示 (検索結果での検索語の強調表示、エラー出力のエラー箇所の表示など)
ruby flow content
phrasing content
phrasing content の後に rt 要素 1 つ
または
rp 要素 1 つと rt 要素 1 つと別の rp 要素 1 つを組み合わせたグループ 1 つ以上
ルビを振る。
rt なし phrasing content
rp なし phrasing content
wbr flow content
phrasing content
なし 改行可能位置を示す。

time 要素の属性 (グローバル属性を除く)

属性名 説明
datetime 日付または時刻を表す。
この属性が指定されない場合、日付または時刻は要素の内容で指定される。
  • 日付が必須で datetime 属性が存在する場合、その値は有効な日付を表す文字列でなければならない (時刻はオプション)。
  • 日付が必須で datetiime 属性が存在しない場合、要素の内容は有効な日付を表す文字列でなければならない (時刻はオプション)。
  • 日付が必須でなく、datetime 属性が存在する場合、その値は有効な日付または時刻を表す文字列でなければならない。
  • 日付が必須でなく、datetime 属性が存在しない場合、要素の内容は有効な日付または時刻を表す文字列でなければならない。
日付は、グレゴリオ暦で表す。
pubdate ブール属性。
指定すると、直近の親の article 要素の発行日時を表す。article 要素が存在しなければ、文書全体の発行日時となる。
この属性を指定した場合、日付は必須。
article 要素または文書に対して、pubdate 属性を持つ time 要素は複数指定できない。

W3C の仕様書から、いくつか例を引用。
(1) time 要素を使った hCalendar の例
<div class="vevent">
<a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
<span class="summary">Web 2.0 Conference</span>:
<time class="dtstart" datetime="2007-10-05">10月5日</time> -
<time class="dtend" datetime="2007-10-20">19日</time>、
<span class="location">アージェント・ホテル (カリフォルニア州サンフランシスコ)</span>にて
</div>
(2) mark で強調表示する例
<p lang="en-US">Consider the following quote:</p>
<blockquote lang="en-GB">
<p>Look around and you will find, no-one's really
<mark>colour</mark> blind.</p>
</blockquote>
<p lang="en-US">As we can tell from the <em>spelling</em> of the word,
the person writing this quote is clearly not American.</p>
(3) ルビの例
<ruby>
漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
字 <rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>
(4) wbr を使って長い1語を途中改行できるようにした例
<p>So then he pointed at the tiger and screamed
"there<wbr>is<wbr>no<wbr>way<wbr>you<wbr>are<wbr>ever<wbr>going<wbr>to<wbr>catch<wbr>me"!</p>
タグ:HTML5
posted by K/I at 11:14 | 東京 ☀ | Comment(0) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする

2010年07月26日

HTML5 のコンテンツグループ化関連タグ

【関連記事】
HTML4/XHTML1 から HTML5 への変更点
HTML5 のセクション関連タグ
HTML5 のテキストの意味付け関連タグ
HTML5 の埋め込みコンテンツ関連タグ
HTML5 のフォーム関連タグ
●参考
4.5 Grouping content - HTML5

コンテンツグループ化関連要素一覧

要素 カテゴリ タグ内に含むもの 説明
figure flow content
sectioning root
次のいずれか。
  • figcaption 1 つと、その後に flow content
  • flow content と、その後に 1 つの figcaption
  • flow content
自己完結していて、通常は本文から参照されるもの。
たとえば、注釈のイラスト、図表、写真、コードリストなどに使われる。
本文から分離したところ (サイドバー、別ウィンドウ、付録など) に表示してもよい。
figcaption なし flow content figure 要素を説明するもの。

figurefigcaption 要素の属性 (グローバル属性を除く)

figurefigcaption 要素の属性は、グローバル属性のみ。

W3C に書かれていた例をいくつか。
まずは、コードリストの例。
<p>基本的なコアインターフェース API の定義については、<a href="#l4">リスト 4</a> を参照のこと。</p>
<figure id="l4">
<figcaption>リスト 4: 基本的なコアインターフェース API の定義</figcaption>
<pre><code>interface PrimaryCore {
boolean verifyDataLine();
void sendData(in sequence&lt;byte> data);
void initSelfDestruct();
}</code></pre>
</figure>
<p>API は、UTF-8 を使用するように設計されている。</p>
次は、figure ではない図と、figure である図・映像の例。
<h2>Malinko のコミック</h2>
<p>この事例では、コミックに関するある種の「知的財産」侵害に焦点が当て
られた (証拠物件 A 参照)。この訴訟では、以下の言葉で終わる予告編映像を
追及している。
<blockquote>
<img src="promblem-packed-action.png" alt="ラフコピー! この行為は問題満載!">
</blockquote>
<p>...が放送された。弁護士は Bigger 社製のノート PC という武器を手に、
雪ダルマ式戦法で先制攻撃を開始した。予告編は、証拠物件 B で全映像を閲
覧できる。
<figure>
<img src="ex-a.png" alt="汚れた紙に書かれた走り書き。">
<figcaption>証拠物件 A: 提示されたコミックの<cite>ラフコピー</cite></figcaption>
</figure>
<figure>
<video src="ex-b.mov"></video>
<figcaption>証拠物件 B: <cite>ラフコピー</cite>予告編映像</figcaption>
</figure>
<p>この事例は、法廷外で解決した。
タグ:HTML5
posted by K/I at 07:07 | 東京 ☁ | Comment(0) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする

2010年07月25日

HTML5 の埋め込みコンテンツ関連タグ

【関連記事】
HTML4/XHTML1 から HTML5 への変更点
HTML5 のセクション関連タグ
HTML5 のコンテンツグループ化関連タグ
HTML5 のテキストの意味付け関連タグ
HTML5 のフォーム関連タグ
●参考
4.8 Embedded content - HTML5

埋め込みコンテンツ関連要素一覧

要素 カテゴリ タグ内に含むもの 説明
embed flow content
phrasing content
embedded content
interactive content
なし 外部アプリケーションやインタラクティブなコンテンツを置くためのもの。
一般的に使われてきたものが HTML5 で正式採用された。
video flow content
phrasing content
embedded content
interactive content
(controls 属性を持つ場合)
トランスペアレント要素 (メディア要素を除く) (src 属性を持つ場合)
1つ以上の source 要素、およびその後にトランスペアレント要素 (メディア要素を除く) (src 属性を持たない場合)
ビデオの挿入に使用する (音声もありえる)。
embed と異なり、プラグインを使わずにビデオコンテンツを貼り付けることができる。
JavaScript による操作、CSS によるエフェクトも可能。
audio flow content
phrasing content
embedded content
interactive content
(controls 属性を持つ場合)
トランスペアレント要素 (メディア要素を除く) (src 属性を持つ場合)
1つ以上の source 要素、およびその後にトランスペアレント要素 (メディア要素を除く) (src 属性を持たない場合)
音声の挿入に使用する。
source なし なし メディア要素のメディア・リソースを指定する。
これは、複数指定することができる。
メディア要素の src 属性が指定されている場合、source 要素は無視される。
メディア要素の src 属性が指定されずに source 要素が指定された場合、source 要素で指定されたメディア・リスースを順番に再生していく (属性が正しくないものや、対応しないタイプのもの、リソースをダウンロードできない場合はスキップされる)。
canvas flow content
phrasing content
embedded content
トランスペアレント ビットマップキャンバスを表示する。
グラフの描画、ゲームのグラフィック表示など。
ビジュアルメディアでない場合や、canvas に対するスクリプト処理が無効にされている場合、canvas 要素のサポートが無効になっている場合などは、フォールバック・コンテンツが表示される。

video 要素の属性 (グローバル属性を除く)

属性名 説明
src メディアリソースのアドレス。
poster ビデオデータの準備が完了するまで表示させておく画像ファイルのアドレス (ポスター・フレーム)。
ビデオが表示できなかったり、最初のフレームで一時停止したりしたときに使われる。
いったんビデオが表示されたら二度と表示されない。
preload コンテンツのプリロード処理についての指定。
none
ユーザーがメディアのリソースを持っている必要がないか、サーバーによけいな負担をかけたくない。
(つまり、プリロードしないでほしい)
metadata
ユーザーがメディアのリソースを持っている必要はないが、メタデータ (大きさ(ピクセル値)、最初のフレーム、トラックリスト、再生時間、など) を取得しておくのが望ましい。
auto (あるいは空欄)
ユーザーの要求を優先させてもサーバーに影響は与えない。
(つまり、全部プリロードしてもかまわない)
preload 属性が指定されていない場合のデフォルト値はブラウザ依存 (W3C は metadata を推奨)。
autoplay ブール属性。
指定すると、再生可能になったら即座に再生する。
loop ブール属性。
指定すると、ループ再生する。
controls ブール属性。
指定すると、ブラウザの制御ボタンが表示される。
制作者側で操作スクリプトを用意する場合には、これを指定しない。
width ビデオの幅。
height ビデオの高さ。

audio 要素の属性 (グローバル属性を除く)

属性名 説明
src (videoと同じ)
preload (videoと同じ)
autoplay (videoと同じ)
loop (videoと同じ)
controls (videoと同じ)

source 要素の属性 (グローバル属性を除く)

属性名 説明
src メディア・リソースのアドレス。
必須。空欄禁止。
type メディア・リソースのタイプを MIME タイプで指定する。
media メディアクエリーを指定する。(参考: Media Queries)
省略した場合、デフォルト値 all (つまり、すべてのメディアに適したリソースという意味) となる。

canvas 要素の属性 (グローバル属性を除く)

属性名 説明
width 幅。
デフォルト値 300。
height 高さ。
デフォルト値 150。

(1)映像をダウンロードできなかった場合にエラーを表示させる例
W3C サイトに掲載されていた例を引用。
<script>
function failed(e)
{
// video playback failed - show a message saying why
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:
alert("ビデオの再生中止。");
break;
case e.target.error.MEDIA_ERR_NETWORK:
alert("テスト用アラート:\nネットワークエラーが発生しました。\nビデオ ファイルのダウンロードを中断しました。");
break;
case e.target.error.MEDIA_ERR_DECODE:
alert("テスト用アラート:\nビデオ再生に失敗しました。\nファイルが壊れ ているか、ビデオが使用している機能にブラウザが対応していない可能性がありま す。");
break;
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
alert("テスト用アラート:\nビデオをロードできません。\nサーバーへの接 続エラーか、ビデオフォーマットがサポートされていない可能性があります。");
break;
default:
alert('An unknown error occurred.');
break;
}
}
</script>
<p><video autoplay src="tgif.mpg" controls onerror="failed(event)"></vid eo></p>
<p><a href="tgif.mpg">ビデオファイルのダウンロード</a></p>

ビデオファイルのダウンロード

(2)ビットマップキャンバスに2つの矩形を描く
こちらは、MOZILLA サイトに掲載されていた例。
Firefox 以外で動作するかどうか不明。
<!-- フォールバック・コンテンツとして、canvas 非対応ブラウザへのメッセー ジを記述。-->
<canvas id="canvas01">このブラウザは、canvas の表示に対応していません。 </canvas>
<script type="text/javascript"><!--
// canvas ノードのコンテキストを取得
var ctx = document.getElementById('canvas01').getContext('2d');
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect(30, 30, 55, 50);
// -->
</script>
このブラウザは、canvas の表示に対応していません。
タグ:HTML5
posted by K/I at 17:24 | 東京 ☀ | Comment(0) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする

2010年07月19日

HTML5 のセクション関連タグ

HTML5 では、セクション関連のタグが大きく変更されている。
W3C のサイトでは、以下のページで解説されている。
4.4 Sections — HTML5
この文書をもとに、セクション関連タグを整理してみた。
【関連記事】
HTML4/XHTML1 から HTML5 への変更点
HTML5 のコンテンツグループ化関連タグ
HTML5 のテキストの意味付け関連タグ
HTML5 の埋め込みコンテンツ関連タグ
HTML5 のフォーム関連タグ

セクション関連要素一覧

要素 カテゴリ タグ内に含むもの 説明
body sectioning root flow content ドキュメントのメインコンテンツ。
section flow content
sectioning content
formatBlock candidate
flow content ドキュメントやアプリケーションの一般的なセクション。
同一テーマのかたまりで、たいていはヘッダーがついている。
nav flow content
sectioning content
formatBlock candidate
flow content ナビゲーションリンクを記述するセクション。
リンクグループをすべて nav 要素に入れる必要はなく、メインのナビゲーションブロックだけを入れる。
article flow content
sectioning content
formatBlock candidate
flow content 自己完結した文のまとまり。
たとえば、ブログの個々の記事など。
article の入れ子もありうる。
aside flow content
sectioning content
formatBlock candidate
flow content 本文の補足記事。
注記や補足情報など、本文の主題から逸れた内容の記述に使う。
h1h6 flow content
heading content
formatBlock candidate
phrasing content ヘッダー。
hgroup flow content
heading content
formatBlock candidate
1つ以上の h1, h2, h3, h4, h5, h6 要素 ヘッダーが多階層から成る場合に、h1h6 要素をまとめるのに使う。
ページのサマリーを作る時、hgroup のところは h1h6 の最上位のものが使われる。
header flow content
formatBlock candidate
flow content (header, footer 要素を除く) article の導入部分に使用する。
h1h6hgroup などをまとめたもの。
目次、検索欄、関連ロゴなどの表示にも使える。
footer flow content
formatBlock candidate
flow content (header, footer 要素を除く) フッター情報。
著者、関連文書へのリンク、著作権表示などの表示に使う。
セクション全体が含まれている場合は、付属文書、索引、奥付、ライセンス契約などを意味する。
記述位置はセクションの最後でなくてもよい。
address flow content
formatBlock candidate
flow content (heading content、sectioning content、header, footer, address 要素を除く) 記事に関する連絡先情報。
※任意の住所を記述するためのものではなく、あくまで関連する連絡先を記述するためのもの。
通常は footer 要素の中に記述する。

以下は、W3C のサイトを参考にして書いたサンプルコード。
<header> <h1>全日本スローライフ推進委員会</h1> <nav> <hgroup> <!-- ヘッダー情報を拾い出すアプリケーションは、「関連リンク」を採用する --> <h1>関連リンク</h1> <h2>スローライフに関する他のサイト</h2> </hgroup> <ul> <li><a href="http://www.nowhere1.org/history.html">日本のスローライフ</a></li> <li><a href="http://www.nowhere2.org/">全国スローライフ満喫協会</a></li> </ul> </nav> </header> <aside> <!-- aside をブログのサイドバーのリンクに使用した例 --> <nav> <h1>お気に入り</h1> <ul> <li><a href="http://www.nowhere3.org/">のんびり行こうよ、どこまでも</a></li> <li><a href="http://www.nowhere4.org/">委員会議事録</a></li> </ul> </nav> <nav> <h1>最近の記事</h1> <ul> <li><a href="111111.html">スローライフ推進委員会のお知らせ</a></li> <li><a href="111110.html">新委員のご紹介</a></li> <li><a href="111109.html">遅食い大会のスタッフが決まりました</a></li> </ul> </nav> </aside> <div> <article> <header> <h1>第32回 遅食い大会開催のお知らせ</h1> <p><time pubdate datetime="2010-07-10T10:28+09:00"></time></p> </header> <p>恒例の遅食い大会を開催いたします。</p> <p>...</p> <aside> <h1>遅食い大会</h1> <p>遅食い大会は、全日本スローライフ推進委員会が主催する遅食い競争の全国大会。</p> <p>...</p> </aside> <section> <h1>コメント</h1> <article> <footer> <p>投稿者: 十年寝太郎</p> <p><time pubdate datetime="2010-07-11T19:10+09:00"></time></p> </footer> <p>今年ももちろん参加します。</p> </article> <article> <footer> <p>投稿者: 56寸法師</p> <p><time pubdate datetime="2010-07-12T09:15+09:00"></time></p> </footer> <p>素敵なイベントですね。</p> </article> </section> </article> <article> ... </article> </div> <footer> <p>opyright &copy; 2010 Japan Slowlife Lovers</p> <p><a href="about.html">About Us</a> - <a href="privacy.html">Privacy Policy</a> - <a href="contact.html">Contact Us</a></p> </footer>
タグ:HTML5
posted by K/I at 11:40 | 東京 ☀ | Comment(0) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする

2010年07月18日

HTML4/XHTML1 から HTML5 への変更点

HTML5 が話題になってずいぶん経ったけれど、いったい何がどう変わったのだろう?
現状ではほとんど何の恩恵も受けていない気がする。
そういえば HTML5 が何者なのか、そもそもよく知らないではないか。

そんなわけで W3C のサイトを覗いてみたところ、こんなものが置いてあった。
HTML5 differences from HTML4
ありがたや、まさにこんな解説がほしかった。

以下、この文書をもとに HTML5 の特徴をごく荒っぽくまとめてみた。
※参照したテキストは "W3C Working Draft 24 June 2010" 時点のもの
  • HTML4、XHTML1 と互換性はあるが、SGML との互換性は無い。
  • 1行目の書き方は、
    HTML (HTML5) の場合:
    <!DOCTYPE html>
    ※SGML 準拠をやめたので DTD の指定は不要になった。
    XML (XHTML5) の場合:
    <?xml version="1.0" encoding="UTF-8"?>
  • MIME形式 text/html-sandboxed が追加された。(参考サイト:『HTML 5 sandbox 属性による iFrame セキュリティの向上』)
  • ファイル先頭の BOM で文字エンコーディングが判断されるようになった。
  • MathML と SVG の要素を直接記述できるようになった。
  • IRI (Internationalized Resource Identifier) をネイティブサポートした。
  • lang 属性に空文字列を指定できるようになった。
  • 要素、属性が変更された。→要素の変更点属性の変更点
  • 各種 API が導入された (映像とか音声とかドラッグ&ドロップとか)。
  • HTMLDocument, HTMLElement の機能が拡張された。
    • getElementsByClassName()
    • innerHTML
    • activeElement
    • hasFocus
    • getSelection()
    • classList
    • className

要素の変更点

追加要素 廃止要素
(存在しないもの、
推奨されないものを含む)
  • head 要素内での object 要素
  • basefont (CSS を使用)
  • big (CSS を使用)
  • center (CSS を使用)
  • font (CSS を使用)
  • s (CSS を使用)
  • strike (CSS を使用)
  • tt (CSS を使用)
  • u (CSS を使用)
  • frame, frameset, noframes
  • acronym (abbr を使用)
  • applet (object を使用)
  • isindex (フォームを使用)
  • dir (ul を使用)

属性の変更点

要素名 追加された属性 廃止された属性
(存在しないもの、
推奨されないものを含む)
(グローバル属性)
  • contenteditable
  • contextmenu
  • data-*
  • draggable
  • hidden
  • role
  • aria-*
  • spellcheck
●root要素
html
  • manifest
  • version
●文書メタデータ
head
  • profile
base
  • target
link
  • sized
  • rev
  • charset
  • target
meta
  • charset
  • scheme
style
  • scoped
●スクリプト
script
  • async
  • language
●セクション
body
  • alink (CSS を使用)
  • link (CSS を使用)
  • text (CSS を使用)
  • vlink (CSS を使用)
  • background (CSS を使用)
h1, h2, h3, h4, h5, h6
  • align (CSS を使用)
●グループ化
p
  • align (CSS を使用)
hr
  • align (CSS を使用)
  • noshade (CSS を使用)
  • size (CSS を使用)
  • width (CSS を使用)
pre
  • width (CSS を使用)
ol
  • start (復活)
  • reversed
  • compact (CSS を使用)
  • type (CSS を使用)
ul
  • compact (CSS を使用)
  • type (CSS を使用)
li
  • value (復活)
  • type (CSS を使用)
dl
  • compact (CSS を使用)
div
  • align (CSS を使用)
●テキストレベル
a
  • media
  • ping
  • target (復活)
  • name (id 属性を使用)
  • rev
  • charset
  • shape
  • coords
br
  • clear (CSS を使用)
●埋め込み
img
  • border (CSS を使用)
  • longdesc
  • name (id を使用)
  • align (CSS を使用)
  • hspace (CSS を使用)
  • vspace (CSS を使用)
iframe
  • sandbox
  • seamless
  • srcdoc
  • longdesc
  • align (CSS を使用)
  • frameborder (CSS を使用)
  • marginheight (CSS を使用)
  • marginwidth (CSS を使用)
  • scrolling (CSS を使用)
object
  • archive
  • classid
  • codebase
  • codetype
  • declare
  • standby
  • align (CSS を使用)
  • border (CSS を使用)
  • hspace (CSS を使用)
  • vspace (CSS を使用)
param
  • valuetype
  • type
area
  • media
  • ping
  • hreflang
  • rel
  • target (復活)
  • nohref
●テーブル
table
  • summary
  • align (CSS を使用)
  • bgcolor (CSS を使用)
  • border (CSS を使用)
  • cellpadding (CSS を使用)
  • cellspacing (CSS を使用)
  • frame (CSS を使用)
  • rules (CSS を使用)
  • width (CSS を使用)
caption
  • align (CSS を使用)
colgroup
  • align (CSS を使用)
  • char (CSS を使用)
  • charoff (CSS を使用)
  • valign (CSS を使用)
  • width (CSS を使用)
col
  • align (CSS を使用)
  • char (CSS を使用)
  • charoff (CSS を使用)
  • valign (CSS を使用)
  • width (CSS を使用)
tbody
  • align (CSS を使用)
  • char (CSS を使用)
  • charoff (CSS を使用)
  • valign (CSS を使用)
thead
  • align (CSS を使用)
  • char (CSS を使用)
  • charoff (CSS を使用)
  • valign (CSS を使用)
tfoot
  • align (CSS を使用)
  • char (CSS を使用)
  • charoff (CSS を使用)
  • valign (CSS を使用)
tr
  • align (CSS を使用)
  • bgcolor (CSS を使用)
  • char (CSS を使用)
  • charoff (CSS を使用)
  • valign (CSS を使用)
td
  • axis
  • abbr
  • scope
  • align (CSS を使用)
  • bgcolor (CSS を使用)
  • char (CSS を使用)
  • charoff (CSS を使用)
  • height (CSS を使用)
  • nowrap (CSS を使用)
  • valign (CSS を使用)
  • width (CSS を使用)
th
  • axis
  • abbr
  • align (CSS を使用)
  • bgcolor (CSS を使用)
  • char (CSS を使用)
  • charoff (CSS を使用)
  • height (CSS を使用)
  • nowrap (CSS を使用)
  • valign (CSS を使用)
  • width (CSS を使用)
●フォーム
form
  • novalidate
fieldset
  • form
  • disabled
legend
  • align (CSS を使用)
input
  • autofocus (type 属性が hidden の場合を除く)
  • placeholder
  • form
  • required (type 属性が hidden, image, ボタン類 (submit など) の場合を除く)
  • autocomplete
  • min
  • max
  • multiple
  • pattern
  • step
  • list (datalist 要素と一緒に使用)
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • type 属性の値に以下を追加
    • tel
    • search
    • url
    • email
    • datetime
    • date
    • month
    • week
    • time
    • datetime-local
    • number
    • range
    • color
  • align (CSS を使用)
button
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
select
  • autofocus
  • form
textarea
  • autofocus
  • placeholder
  • form
  • required
●対話
menu
  • type
  • label
  • compact (CSS を使用)

【関連記事】
HTML5 のセクション関連タグ
HTML5 のコンテンツグループ化関連タグ
HTML5 のテキストの意味付け関連タグ
HTML5 の埋め込みコンテンツ関連タグ
HTML5 のフォーム関連タグ

【修正・2010年7月18日】
表「属性の変更点」をカテゴリ分け
【追記・2010年7月22日】
「コンテンツのグループ化関連タグ」を追加
【変更・2010年7月26日】
「コンテンツのグループ化関連タグ」を別記事に独立
タグ:HTML5
posted by K/I at 00:20 | 東京 ☀ | Comment(2) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする

2010年06月27日

Android アプリ開発環境の構築

Android SDK をインストールしたので、その作業メモ。
Android Developers
http://developer.android.com/index.html

1. インストール前の準備

サポートされているOSは、
  • Windows XP (32-bit) or Vista (32- or 64-bit)
  • Mac OS X 10.5.8 or later (x86 only)
  • Linux (tested on Linux Ubuntu Hardy Heron)
今回は、Windows XP を用いた。

開発ツール (IDE) は、Eclipse が使える。
バージョンは、Version 3.5.1 以上。

JDKのみ、あるいは Ant を使ってもできるみたいだが、今回は Eclipse を使用した。

2. インストール

2.1 インストーラの入手
インストーラ (SDK starter package) は、上記サイトの左メニューにある Download から入手できる。
Windows版の現時点での最新版は android-sdk_r06-windows.zip だった。
2.2 インストールの実行
前項でダウンロードした ZIP ファイルをインストール先フォルダ (場所は任意) に展開。
今回は、C:\android-sdk-windows とした。
フォルダ内のファイル、SDK Setup.exe を実行する。

すると、なにやら不穏なダイアログが。。。
Android SDK Install #01
Android SDK and AVD Manager というツールが Android SDK のレポジトリ情報をダウンロードしようとしているようだが、それがなぜかうまくいかない様子だ。
エラーメッセージには "Failed to fetch..." と表示されているが、ブラウザなどから試すときちんとダウンロードできる。
サーバーがダウンしているわけではないようだ

いったん [Cancel] ボタンをクリックして画面を閉じる。
Android SDK and AVD Manager の左メニューから [Settings] を選び、[Misc] の [Force https://... sources to be fetched using http://...] にチェックを入れる。
Android SDK Install #03
すると今度はダウンロードがはじまった。
これはひょっとして、とりあえずバグ回避するためにつくったオプションなのだろうか。。。

さて、左メニューの [Available Packages] を見ると、今度はいろいろと表示されている。
Android SDK Install #04
すべてにチェックを入れて、[Install Selected] ボタンをクリック。
Android SDK Install #05
[Accept All] を選んで [Install] 実行。
欲張って全部選んだものだから、ここはけっこう時間がかかった。
2.3 Eclipse に ADT プラグインインストール
次は、Eclipse に ADT (Android Development Tools) プラグインをインストールする。
Eclipse を起動し、[Help] メニューから [Install New Software...] を選ぶ。
"Install" 画面が開くので、[Work with] 欄に https://dl-ssl.google.com/android/eclipse/ と入力し、[Add] ボタンをクリックする。
そして、"Add Repository" ダイアログの [Name] 欄にはわかりやすい名前 (たとえば "Android Development Tools (ADT)") を入力し、[OK] ボタンをクリック。

下のツリービューの "Developer Tools" の下に "Android DDMS" と "Android Development Tools" が表示される。
ついでなので両方とも選ぶ。
あとは、画面の指示に従ってインストールを実行する。

完了したら Eclipse を再起動し、[Window] メニューの [Preferences] を選択。
左側のツリーに [Android] という項目が追加されているので、クリックして [SDK Location] に、Android SDK の展開先フォルダを指定し (今回の場合は "C:\android-sdk-windows")、[Apply] ボタンをクリックする。
指定したフォルダが正しければ、下のリストビューに SDK ターゲットが一覧表示される。

準備はこれで完了だ。

3. サンプルアプリの作成

Android Developers のサイトにチュートリアルがあるので、試しに最初のサンプルを作ってみる。
Hello, World
http://developer.android.com/resources/tutorials/hello-world.html
結果はこんな感じ:
Android SDK Install #06

今回はここまで。
posted by K/I at 00:29 | 東京 ☔ | Comment(0) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする

2010年05月30日

MeeGo を試してみた

モバイル向けLinuxプラットフォーム "MeeGo" の正式版がリリースされたので、Net PC で起動させてみた。
Net PC 向けは Atom にのみ対応のようだ。
今回は、Acer の ASPIRE one (BCM92045NMD) を使用した。
※ちなみに、Celeron PC で試したら、最初の起動画面は表示されるものの起動しようとすると黒画面のまま先に進まなかった。
VMware でも同じ。

印象としては、全体的によく作り込んであると感じた。
ただし、デフォルトの日本語入力は SKK なので使いやすいとは言えない。
試した限りではひらがな入力はできても漢字変換ができなかった。
これはあくまで「プラットフォーム」なので、大きな問題ではないかもしれないが。

さて、まずは MeeGo の公式サイトからディスクイメージをダウンロードする。
http://meego.com/
トップメニューの Downloads から、Netbook を選ぶと、"MeeGo v1.0 for Netbooks (Google Chrome Browser)" と "MeeGo v1.0 for Netbooks" の2種類が用意されている。
今回は "MeeGo v1.0 for Netbooks (Google Chrome Browser)" をダウンロードした (ファイルサイズ 800MB)。

ファイルがダウンロードできたら、何らかの方法で USB メモリにコピーする。
たとえば、Unix系OSなら
# dd if=meego-netbook-ia32-1.0.0.20100524.1.img of=デバイス名
などとすればよい。

USBメモリが用意ができたら、あとはそこからブートするだけである。
Net PCの起動時にBIOS設定画面を表示させ、ブート順を変更する。
USB メモリは、たとえば USB HDD に相当するので、それをいちばん上に移動させる。
そして、作成したMeeGo USBメモリをNet PCに挿して起動すればMeeGoの起動画面が表示される。
MeeGo #01 - 起動画面
ここで "Installation Only" を選べばローカルディスクに MeeGo がインストールされるのだが、今回はとりあえず "Boot MeeGo" を選んで USB メモリから起動する。
※ローカルディスクにインストールすると、日本語環境になったり、設定が保存されたりするようになる。
 ただし、それ用のパーティションを切っておくか、Net PCを1台つぶす覚悟を決めるか、しておく必要がある。
MeeGo #02 - Myzone

ヘッダ部にメニューが並んでいる。
それぞれ、以下のような画面が表示される。
まずはネットワークの設定。
利用できる無線LANの一覧が表示されているので、[Connect] ボタンをクリックしてパスワードを入力し、接続する。
MeeGo #13 - WiFi接続

MeeGo #14 - WiFi接続完了

Bluetooth も使える。
[Add a new device] ボタンをクリックするとデバイスを検索して表示してくれるので、[Pair] リンクをクリックしてデバイスを追加する。
MeeGo #15 - Bluetoothデバイス検索

MeeGo #16 - Bluetoothデバイス追加

ステータスというのはコミュニケーションサービスを表示する画面で、現在は Last.fm と twitter のクライアントが用意されている。
MeeGo #17 - Twitter設定

MeeGo #18 - TwitterのTL表示

メールは、Evolution が採用されている。
ただし、メールの送信がなぜかうまくいかなかった。
送信されずに送信ボックスに残ったままだ。
原因不明。

ピープル画面は、メッセンジャーソフトのクライアントで、Facebook、Google Talk、ICQ、AIMなど、複数のサービスを使用できる。

ちなみに、アプリケーション画面のシステムツールからターミナルを起動できる。
いざという時にはこれが使えそう。
タグ:MeeGo Linux
posted by K/I at 18:58 | 東京 ☁ | Comment(0) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする

2010年02月04日

書籍の売上分配率について

1000円の本を売った場合、
原価(*)500円
著者への印税100円
出版社利益100円
小売り220円
流通80円
* 紙代、印刷、製本、管理、広告、編集費など
という割合で売上が分配されるそうだ。
なお、返品率は35〜40%。
(TBSラジオ「森本毅郎・スタンバイ!」にて荒川洋治氏)

これを電子出版にした場合、出版、流通のコストはいらなくなるし、小売りのコストも下げられるかもしれない。
つまり、1000円のものが820円以下にできるということ。

ただし、出版社を通さないことで、コンテンツの品質保持は難しくなるだろう。
すると、一部の電子書籍はさらに安い価格で流通するかもしれない。

その一方で、既存の出版業界では考えつかなかったような電子書籍が現れる可能性もある。

電子書籍をどのように流通させるのか、今後その仕組みづくりがどうなるか、目が離せない。
異業種からの参入が容易なところがまたおもしろい。
posted by K/I at 16:30 | 東京 ☀ | Comment(0) | TrackBack(0) | ネタのたれ流し | このブログの読者になる | 更新情報をチェックする

2010年01月03日

「賢者の漬け物石」へのアクセス状況 (2009年)

2009年の、このブログへのアクセス数順位を調べてみた。
  1. CentOS 4.4 -> 5.0 アップグレード (2007年05月06日)
  2. Windows を X サーバーにする (Cygwin) (2007年06月04日)
  3. 郵便番号から住所を調べる(PHP) (2007年08月06日)
  4. HTML で Excel の「ウィンドウ枠の固定」を実現する (2007年07月13日)
  5. Eclipse に WTP をインストールする (2008年06月25日)
  6. Fedora Core 8 のインストール (HDD上のISOイメージから) (2008年01月19日)
  7. Vista で印刷できない (2009年06月11日)
  8. スクロールしてもついてくる画像 (2009年01月19日)
  9. JPEG の Exif 情報を書き換える (Perl) (2008年01月06日)
  10. Fedora Core 9 -> Fedora Core 10 アップグレード (2008年11月30日)
CentOS、Fedora アップグレード関連の記事に、こんなにたくさんアクセスがあるのが意外。

キーワードでは、
  1. centos アップグレード
  2. 漬物石
  3. php 郵便番号
  4. emacs rss
  5. centos upgrade
  6. vista 印刷できない
  7. centos 4 5 アップグレード
  8. wtp インストール
  9. fedora core 10
  10. イーモバイル 苦情
2位が「漬物石」という結果に、ブログタイトルを変えるべきかもしれないとやや本気に考えてしまう。
それから、6位の「vista 印刷できない」。これに類似した検索語として15位にも「再起動しないと印刷できない」というのがあることから、Vista で印刷トラブルに見舞われている人は多いようだ。

アクセス元のサイトは、圧倒的に Google。
7割以上の人が Google 経由でアクセスしてきている。

ついでに、ページ閲覧に使われるブラウザの種類は、
  1. InternetExplorer (44.84%)
  2. Firefox (42.55%)
  3. Chrome (4.50%)
  4. Safari (4.20%)
  5. Opera (2.58%)
だった。
posted by K/I at 14:36 | 東京 ☀ | Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする