HTML5
今回試した入力値チェック機能は下記６つ。 required属性による入力必須制約によるチェック pattern属性による入力値のパターン制約によるチェック type属性に応じた入力値のタイプ制約によるチェック step属性による入力値制約によるチェック min属性、max…
今回試したHTML5の新要素は下記３つである。 出力値を表すouput要素 事前定義されたデータのリストdatalist要素 処理の進捗率を表すprogress要素 なお、＠ITの「HTML5とかアプリ開発入門」参考にしている。さて、出力値を表すouput要素だが、例えば下記のよ…
前回のエントリーでは、６つの変更点のうち、３つを試した。 今回は残りの３つを試した結果をメモする。これは、inputタイプのaccept属性にMIMEタイプを指定することで、アップロード時に選択できるファイルを限定する機能だ。例えば、次のように書く。 下記…
「HTML5で既存のinputタイプに加わった6つの変更点」を、自分で検証アプリを作成しながら試してみた。まずは、最初の3つ。textタイプのplaceholder属性は、テキストボックスの入力項目を説明するための属性である。 これは、チェックボックスがonでもoffでも…
このブログでは自分でHTML5の新機能を実装して、何ができるのかを試している。しかし、Remy Sharpが作成した「機能一覧とデモをまとめたページ」があるので、手っ取り早く機能一覧を確認したい場合は、そちらを利用する。
グラデーション機能を試してみた。グラデーションを付ける部分のコードは下記。 $gradientId.click(function(){ grad = ct.createLinearGradient(20,20,180,180); grad.addColorStop(0, 'rgb(255,0,0)'); grad.addColorStop(0.5, 'rgb(0,255,0)'); grad.addC…
HTML5の新機能の１つ「canvs要素」を試してみた。 例によって検証アプリを作成して、試した結果が下図。作成するのは簡単だが、ボタンをクリックするたびにcanvas描画領域を初期化する方法が分からなかったので、そこはメモしておく。まず、canvasで描画する…
普段はEclipseしか使っていないが、ソースコードと実際の見栄えを見比べながら、GUIでWebページを編集できるらしいので、使ってみようと思った。試しに、テーブルを追加してみた。 wysiwygモードにすることで、GUIでWebページの見栄えを確認することができる…
私が作ったわけではございません。 ただ単に「すげぇ〜」と思いましたので、紹介いたします。 キャプチャを撮ろうと思ったんですが、キャプチャを撮ろうとアプリを操作するとゲームがとまってしまいます。詳しくは、作者のHPを見て下さい。本当にすごいと思…
HTML5の新機能の１つ「video要素」を試してみた。 例によって検証アプリを作成して、試した結果が下図。 使い方は、audio要素とほとんど同じ。 <h1>video要素を試す</h1> <video id="video" controls> <source src="media/earthImage.mp4"></source> <input type="range" id="seekbar" value="0" min"0"/> <p>ブラウザがvideo要素に対応していません</p> </video>
HTML5の新機能の１つ「audio要素」を試してみた。 実際に、検証アプリを作成した。しかし、ハマった＞＜。currrentTimeへの値の設定が、期待通りに動作せず、困った。document.getElementById("id").currentTime = 0と書いても、0がセットされないのだ。原因…
IE8と、それより下のバージョンのIEでスタイルが適用されないことがある。 その対応方法を説明する。 【問題点】 IE8以下では、未知の要素に遭遇すると期待通りのDOMが構成されない。【解決方法】 document.createElement()を使用して、要素を生成する。 HTM…
W3CがHTML5の文法チェックツールをWEB上で公開している。次の、HTMLを文法チェックツールにかけてみた。 <html lang="ja"> <head> </head></html>
すでにご存知の方も多いかもしれないが、Google I/O 2011で「HTML5 versus Android: Apps or Web for Mobile Development?」というセッションがあった。私は半年ほど前から、Androidアプリはネイティブアプリで作成する必要はないのではないのかと思ってきた…
前回のエントリーで、localStorageを使用して格納したデータは、明示的に削除しない限り、ブラウザを閉じても削除されないことが分かった。 つまり、アプリケーションが利用者に対して明示的にlocalStorageのデータを削除する仕組みを提供している場合か、も…
当たり前だが、画面遷移をすると、javascriptの変数は消えてしまう。グローバル変数といえども、画面遷移をすると消えてしまう。画面遷移をしても、遷移する前のデータを利用するためには、下記２つの方法が考えられる。 遷移するタイミングでサーバへデータ…
少しばかり書店に立ち寄った。 欲しい本が５冊ある。でも、まだ読んでいない本もあるし、お金もかかるので我慢。 どれもいい本なんだよなぁ。欲しいなぁ。・最初の3冊はHTML5の本。中身を見たことがなかったのだが、初めて見て欲しいと思った。徹底解説HTML5…
