賢者の漬け物石

2010年11月01日

電子証明書によるクライアント認証 (Apache)

銀行の企業向けインターネットバンキングなどで、よく「デジタル証明書」を使ってユーザー認証しているものがあるが、あれはどうやっているのだろうか?
ちょっと調べてみた。

Web サーバーが信頼する CA から発行した証明書を保有するクライアント (Webブラウザ) のみを信頼する、というのが「クライアント認証」の考え方のようだ。

ここでは、CA は自前で用意してあるものとする。
以下、以前まとめた下の関連記事の設定を前提に話を進める。

【関連記事】
PKI の認証局(CA)を構築する

【Webサーバー側】

(1) 信頼する CA の設定

まず、信頼する CA の一覧を設定する。
CA から、CA 証明書 (cacert.pem) を受け取り、Apache に以下のように設定する。

    SSLVerifyClient require
    SSLCACertificateFile cacert.pem のパス

複数の CA 証明書がある場合には、ディレクトリで指定できる。

    SSLVerifyClient require
    SSLCACertificatePath CA 証明書の設置ディレクトリ

設定したら Apache を再起動する。

(2) 秘密鍵＋証明書署名要求ファイルの作成

※この処理は、Web サーバーで行うのか、CA で行うのか、あるいはクライアント側で行うのかは、サービスの運営方針によるのではないか? と思う。
クライアントの秘密鍵と証明書署名要求 (CSR) の両方を含む PEM 形式のファイルを作成する。
Country Name などに入力する値は、CA のものに合わせる。

# openssl req -new -keyout user01.pem -out user01.pem
Generating a 2048 bit RSA private key
.........+++
...+++
writing new private key to 'user01.pem'
Enter PEM pass phrase:
Verifying - Enter PEM pass phrase:
-----
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [XX]:JP
State or Province Name (full name) []:Tokyo
Locality Name (eg, city) [Default City]:Shinjuku-ku
Organization Name (eg, company) [Default Company Ltd]:K-ISHIK
Organizational Unit Name (eg, section) []:
Common Name (eg, your name or your server's hostname) []:k.ishikawa
Email Address []:k-ishik@camel.zoo.park

Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:
An optional company name []:

なお、CA 証明書の内容は以下のようなコマンドで表示できる。
# openssl x509 -in CA証明書ファイル -text

【CA側】
以下の (3)、(4) の手順で、PKCS #12 形式のクライアント証明書を発行する

(3) 署名付き秘密鍵ファイルの作成

作成した秘密鍵＋証明書署名要求を CA にコピーし、証明書ファイルを作成する。

# openssl ca -in user01.pem -keyfile /etc/pki/CA/private/cakey.pem \
-cert /etc/pki/CA/cacert.pem -out user01.crt
Using configuration from /etc/pki/tls/openssl.cnf
Enter pass phrase for /etc/pki/CA/private/cakey.pem:
Check that the request matches the signature
Signature ok
Certificate Details:
        Serial Number: 14 (0xe)
        Validity
            Not Before: Oct 31 15:05:37 2010 GMT
            Not After : Oct 31 15:05:37 2011 GMT
        Subject:
            countryName               = JP
            stateOrProvinceName       = Tokyo
            organizationName          = K-ISHIK
            organizationalUnitName    = 
            commonName                = k.ishikawa
            emailAddress              = k-ishik@camel.zoo.park
        X509v3 extensions:
            X509v3 Basic Constraints: 
                CA:FALSE
            Netscape Comment: 
                OpenSSL Generated Certificate
            X509v3 Subject Key Identifier: 
                A7:EC:D2:85:9F:59:4A:A0:B4:96:81:F6:68:5B:D8:49:69:81:7E:FA
            X509v3 Authority Key Identifier: 
                keyid:2B:45:1F:EE:3B:DF:57:65:41:24:C9:04:53:AD:F1:B5:BA:80:D6:DA

Certificate is to be certified until Oct 31 15:05:37 2011 GMT (365 days)
Sign the certificate? [y/n]:y


1 out of 1 certificate requests certified, commit? [y/n]y
Write out database with 1 new entries
Data Base Updated

これにより、PEM 形式の証明書ファイル user01.crt が作成される。

(4) PKCS #12 形式の証明書ファイルの作成

秘密鍵＋証明書署名要求ファイルと PEM 形式の証明書ファイルから PKCS #12 形式の個人証明書を作成する。

# openssl pkcs12 -export -clcerts -in user01.crt -inkey user01.pem \
-out user01.p12
Enter pass phrase for user01.pem:
Enter Export Password:
Verifying - Enter Export Password:

【クライアント側】

(5) 証明書のインポート

CA (または、Web サーバー経由で) PKCS #12 形式の個人証明書 user01.p12 をクライアント PC にコピーし、ブラウザにインポートする。
(以下、Internet Explorer 7 の場合)

[ツール] メニューの [インターネットオプション] の [コンテンツ] タブで、[証明書] ボタンをクリックする。
"証明書" 画面の [個人] タブで、[インポート] ボタンをクリックする。
"証明書のインポートウィザード" が起動する。[次へ] をクリックする。
[ファイル名] 欄に個人証明書のパスを設定し、[次へ] ボタンをクリックする。
[パスワード] 欄に、手順 (4) で入力した Export Password を入力する。
[秘密キーの保護を強力にする] にチェックを入れると、ブラウザ起動後最初に対象サイトにアクセスするたびにパスワードの入力を求められる。
[このキーをエクスポート可能にする] にチェックを入れると、"証明書" 画面でキーのエクスポートができるようになる。
あとは、指示に従って処理する。

以上で、設定は完了。
クライアント認証するように設定した URL にアクセスすると、"デジタル証明書の選択" ダイアログが表示される。

インストールした証明書を選択して [OK] をクリックすればアクセスできる。

タグ：PKI CA

【技術メモの最新記事】

|

2010年10月21日

PostgreSQL 8.3 から 8.4 への移行

Fedora を 10 から 12 にアップグレードしたら、PostgreSQL が起動しなくなった。
PostgreSQL のバージョンが 8.3 から 8.4 にバージョンアップしたため、データベースファイルが対応しなくなったからだ。
すでに 8.4 にアップグレードされているから PostgreSQL も起動しないので、pg_dump もできない。
しかたなく、8.3 環境を用意して /var/lib/pgsql/data ディレクトリをごっそりそちらにコピーし、pg_dumpall した。
この移行作業のめんどくささはなんとかならないものか？
ほかの人はどうやって対応しているのだろうか。

ちなみに、たまたまインストールしてあった Ubunto では、コピーした data ディレクトリでうまく動作しなかった。
Fedora 11 でもダメで、Fedora 10 にしたらうまくいった。
Ubundo は設定がいろいろ違っていて合わせるのが面倒だったので断念。
Fedora 11 がダメだった理由は不明。

タグ：PostgreSQL データベース Fedora Linux

|

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` 要素に関連づけされる。
`fieldset`	`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

|

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	テキストの一部を強調表示するのに使う。 `em` や `strong` と異なり、本来の文章の意図とは別の意味付けから強調したい場合に用いる (あとから蛍光ペンでマーカーをつける感覚)。たとえば以下の状況で使われる。引用した文の一部を強調表示 (もともとは強調表示されていない) → 例の (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` 要素は複数指定できない。

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

|

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` 要素を説明するもの。

`figure`、`figcaption` 要素の属性 (グローバル属性を除く)

figure と figcaption 要素の属性は、グローバル属性のみ。

例

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<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

|

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>

タグ：HTML5

|

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	本文の補足記事。注記や補足情報など、本文の主題から逸れた内容の記述に使う。
`h1`～`h6`	flow content heading content formatBlock candidate	phrasing content	ヘッダー。
`hgroup`	flow content heading content formatBlock candidate	1つ以上の `h1`, `h2`, `h3`, `h4`, `h5`, `h6` 要素	ヘッダーが多階層から成る場合に、`h1`～`h6` 要素をまとめるのに使う。ページのサマリーを作る時、`hgroup` のところは `h1`～`h6` の最上位のものが使われる。
`header`	flow content formatBlock candidate	flow content (`header`, `footer` 要素を除く)	`article` の導入部分に使用する。 `h1`～`h6`、`hgroup` などをまとめたもの。目次、検索欄、関連ロゴなどの表示にも使える。
`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

|

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

要素の変更点

追加要素	廃止要素 (存在しないもの、推奨されないものを含む)
section article aside hgroup header footer nav figure, figcaption time mark ruby, rt, rp wbr embed video, audio, source canvas datalist output progress meter command details, summary keygen	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

|

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

いったん [Cancel] ボタンをクリックして画面を閉じる。
Android SDK and AVD Manager の左メニューから [Settings] を選び、[Misc] の [Force https://... sources to be fetched using http://...] にチェックを入れる。

すると今度はダウンロードがはじまった。
これはひょっとして、とりあえずバグ回避するためにつくったオプションなのだろうか。。。

さて、左メニューの [Available Packages] を見ると、今度はいろいろと表示されている。

すべてにチェックを入れて、[Install Selected] ボタンをクリック。

[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 ソフトウェア開発

|

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" の２種類が用意されている。
今回は "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の起動画面が表示される。

ここで "Installation Only" を選べばローカルディスクに MeeGo がインストールされるのだが、今回はとりあえず "Boot MeeGo" を選んで USB メモリから起動する。
※ローカルディスクにインストールすると、日本語環境になったり、設定が保存されたりするようになる。
　ただし、それ用のパーティションを切っておくか、Net PCを1台つぶす覚悟を決めるか、しておく必要がある。

ヘッダ部にメニューが並んでいる。
それぞれ、以下のような画面が表示される。

まずはネットワークの設定。
利用できる無線LANの一覧が表示されているので、[Connect] ボタンをクリックしてパスワードを入力し、接続する。

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

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

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

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

ちなみに、アプリケーション画面のシステムツールからターミナルを起動できる。
いざという時にはこれが使えそう。

タグ：MeeGo Linux

|

<< 2018年05月 >>
日	月	火	水	木	金	土
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

2010年11月01日

(1) 信頼する CA の設定

(2) 秘密鍵＋証明書署名要求ファイルの作成

(3) 署名付き秘密鍵ファイルの作成

(4) PKCS #12 形式の証明書ファイルの作成

(5) 証明書のインポート

2010年10月21日

2010年08月01日

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

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

例

2010年07月29日

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

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

例

2010年07月26日

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

figure、figcaption 要素の属性 (グローバル属性を除く)

例

2010年07月25日

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

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

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

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

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

例

2010年07月19日

セクション関連要素一覧

例

2010年07月18日

要素の変更点

属性の変更点

2010年06月27日

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

2. インストール

2.1 インストーラの入手

2.2 インストールの実行

2.3 Eclipse に ADT プラグインインストール

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

2010年05月30日

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

`figure`、`figcaption` 要素の属性 (グローバル属性を除く)

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

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

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

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