[57] プログレスバー（進捗状況）を出そう progress要素
value属性と max属性の約束事 value属性と max属性、どちらも0以上の数値を使います。マイナスはNG。進捗状況だからね。 value属性のデフォルトは0.0から1.0。小数もOKってことね。 max属性があれば、value属性の値も max属性の値まで。逆にmax属性が無ければ、maxの値は1.0。 max属性は、0より大きい値でなければダメ（0じゃダメ）。 ●サンプル1 静的なサンプルですが、value属性と max属性の指定によるプレビューです。 max値は全部 100にしています。 value値（これは実際には JavaScript によって変動するのですが）は、 上から、0、50、100。4番目は value属性が無い（または取得できない）状態のサンプルです。 0%（0%） 50%（50%） 100%（100%） 0%（未確定） <label ><progress v
![[57] プログレスバー（進捗状況）を出そう progress要素](https://cdn-ak-scissors.b.st-hatena.com/image/square/592027f3e8ef20097cc905941f6f4f240992b1ad/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-45.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2Ftsubu_icon2s.jpg)
<input autocomplete>－HTML5タグリファレンス
<input>要素のautocomplete属性を指定すると、ユーザーに対して入力候補を提示して、内容を自動補完することができます。 例えば、検索キーワード候補の提示のようなインターフェースを実現できます。 入力候補として表示されるデータのリストを指定するには、 HTML5から追加される予定の<datalist>を使用します。<datalist>は、 フォームの入力欄などで入力候補となるデータリストを定義します。 各データのリスト項目は、<option>で定義します。 <datalist>をサポートしたブラウザでは、<option>で指定された値がユーザーに対して入力候補として提案表示されます。 <input>のlist属性の値と<datalist>のid属性の値を同じにして、入力欄とデータリストを関連付けます。 ■属性 HTMLソース <form action="xxx.php" met
Web rtcの使い方
Web RTCにより拓かれるコミュニケーションサービスの形 「新たなバリュー創造へ。ntt comのチャレンジ」webアプリケーション エバンジェリスト ...
Apacheのディレクトリインデックスをありえない位かっこ良くできる「h5ai」:phpspot開発日誌
h5ai larsjung.de Apacheのディレクトリインデックスをありえない位かっこ良くできる「h5ai」 HTML5の機能を使って、通常の味気ないディレクトリインデックスをかなりかっこ良くしちゃうというものです。 ディレクトリ一覧。アイコンなんかもついてかなりリッチ mod_headersとmod_autoindexというApacheモジュールを応用して作られているようですが、こんなことが出来るとは知りませんでした。 表示方法もアイコンベースに変更することも可能です。これはイカしていますね。 サイドの丸みを帯びた物体にカーソルをあわせるとニュイーンと伸びてツリービューが表示。これまた便利です。 動作デモはこちら デザインは基本的にHTML+CSSなので、あなた好みにカスタマイズすることも可能。 Apacheの味気ないデザインページは嫌だ！というデザイナーさんは覚えておくとよさそう
HTML5 Video
HTML5 Video Events and API This page demonstrates the new HTML5 video element, its media API, and the media events. Play, pause, and seek in the entire video, change the volume, mute, change the playback rate (including going into negative values). See the effect on the video and on the underlying events and properties. load() play() pause() currentTime+=10 currentTime-=10 currentTime=50 playbackR
Takazudolog - 地獄のvideo／audio要素
video／audioにハマりまくったメモ。作ってたのは、Flashでやってたような、複数の動画ファイルを、途中の選択肢によって色々変えながら見せるというようなインタラクティブムービーみたいなの。なので、ハードにvideoを使いまくるという意味で、普通に一本動画を見せるという用途よりももっと色々する必要があったわけだけれども、そうでない場合でも、videoが色々厄介であるということは知っておく必要があると思う。 とりあえず、videoやaudioを使いたい人は、以下の2ページを熟読せよ。 プラグインは要らない！音声／動画対応したHTML5 - audio／video要素 | Think IT Video - Dive Into HTML5 videoのイベントは HTML5 Video を眺めてるとなんとなく分かる。 audioライブラリ試してうまくいったやつはこれ。 SoundJS vi
web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
HTML5は本当にFlashの代替になり得るのか？～Webテクノロジー進化論
第20回 RIAコンソーシアム・ビジネスセミナー「Flash」はその役割を終えたのか～今後のRIA開発を考える～ http://www.riac.jp/2012/01/bflash-ria.html でつかった資料Read less
避けるべきHTML5機能をまとめたティップサイト「HTML5 Please」登場
HTML5やCSS3といった最新の技術を活用したWebページの制作は開発者にとっては魅力的な選択肢だが、そこには常に「どの機能ならば使っても良いか」という判断が必要になる。最新のブラウザがある機能に対応していたとしても、それがすべての主要ブラウザでサポートされていないことがあったり、あるバージョンでは特定の問題を引き起こすこともある。「どの機能ならば使っても良いか」という調査にかかるコストを考えると、従来の古い技術のみでWebサイトを構築する、といった選択肢も捨てがたいものとなってしまう。 こうした際に役立つサイト「HTML5 Please」が登場した。HTML5やCSS3、JavaScript APIに関して利用が推奨されるかどうか、どのブラウザのどのバージョンがサポートし、全体としてどの程度の対応状況にあるかをまとめたサイトだ。どの機能を利用すべきかといった判断をするのに役立てることが
最新のWeb RTC仕様について調べてみた - IT-Walker on hatena
ワーキングドラフトが公開されたり、IEBlogでも言及されるなど、注目度が一層高まってきた感のあるWeb RTC (Web RealTime Communication)仕様について、改めて調べてみました。 Web RTCは、Webアプリからカメラやマイクでメディアデータを取り込んたり、リモートホストとのP2Pのデータ送受信を行うためのJavaScript APIです。 Web RTCは、以前はWHATWG HTMLの一部として仕様が提案されていましたが、分離して一つの仕様になりました。分離したのはつい最近です。 API自体は単純なので、これまでは仕様書流し読みしてわかった気になっていたのですが、「ローカルからのメディアデータの取り込みとP2Pがなんで同じ仕様にあるんだろう？」とふと疑問に思って、きちんと仕様書を眺めて見ました。同じように疑問に思う方が居らっしゃれば、お役に立つ記事かと思い
JavaScript最新動向 〜WebSocket編〜
Dev fest 2020 taiwan how to debug microservices on kubernetes as a pros (ht...
[ #TGS2011 ] UEIが開発したゲームエンジンがスゴい。しかもオープンソース！
[ #TGS2011 ] UEIが開発したゲームエンジンがスゴい。しかもオープンソース！2011.09.15 16:50 ユビキタスエンターテイメント（UEI）が画期的なゲームエンジンを開発しましたよ。 ｢enchant.js｣と名付けられたこのゲームエンジンはHTML＋JavaScriptベースで、PC、Mac、iPhone、iPad、Android全てで動作するクロスプラットフォームだそうです。UEIのブースでARマーカーとAndroid端末が展示されていて、実際に試させて貰いました！ 何がスゴいって、1枚目写真にもあるようにシンプルなスクリプトで動作するんですよね。オープンかつクロスプラットフォームなんでこれからの展開が気になるところです。 （河原田長臣）
FlashからEdge?Adobe Edgeを使ってみる！ 『インストール方法からサンプルコンテンツ作成まで』 | HTML5でサイトをつくろう
FlashからEdge?Adobe Edgeを使ってみる！ 『インストール方法からサンプルコンテンツ作成まで』 Adobe Edgeとは 先月の1日(※現在は2011年9月)アドビがHTML5対応のインタラクションデザインツール「Adobe Edge」のパブリックプレビュー版をリリースしましたが、皆さんはもう使ってみましたか？ リリース後、私の周りでもとても話題になっていました。 この「Adobe Edge」はFlashで行っていたアニメーションなどのインタラクティブコンテンツを『 HTML5・CSS3・JavaScript 』などの標準規格を使用して制作することができるツールになっているようです。 思えば、去年ぐらいから私自身もFlashを使う機会が減ってきたように思います。今後どうなっていくのだろう？と考えていたところでのリリースでしたのでとても興味があります。 また「Adobe Ed
[JS]かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic
HTML5 Canvasを使って、ローディング用のアニメーションを作成する超軽量（約3K）のスクリプトを紹介します。 デモページ Sonicの実装 Square（矩形）とCircle（円形）を例に実装方法を紹介します。 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="sonic.js"></script> JavaScript: Square（矩形） あとは、JavaScriptで記述するだけです。 var square = new Sonic({ width: 100, height: 100, fillColor: '#000', path: [ ['line', 10, 10, 90, 10], ['line', 90, 10, 90, 90], ['line', 90, 90, 10, 90], ['line', 10, 90, 10, 10]
getImageDataによるCanvasの画像データ取得
CanvasにImageData形式の画像データを設定するputImageData()を使うと、JavaScriptで作成した配列の画像データ（フレームバッファ）を直接Canvasに描くことが出来ました。今回は、逆にCanvasに現在描かれている画像データをgetImageData()メソッドで取得し、JavaScriptでピクセルの色成分を書き換える「画像処理」を試してみましょう。 まず、Canvasの描画内容を格納したImageDataを取得するには、取得する範囲を指定してCanvasコンテキストのgetImageData(x, y, width, height)を呼び出します。Canvasコンテキストcontextから(0, 0)-(31, 31)の32*32ピクセルのImageDataを取得する場合なら context.getImageData(0, 0, 32, 32) のように
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - google/gumbo-parser: An HTML5 parsing library in pure C99
実践初級ITブログ HTML5動画の作成＆再生２
GitHub - mozilla/pdf.js: PDF Reader in JavaScript
FileとWebの関係をもっと知る: Blob, FileそしてFileSystemAPI
サルでもわかるHTML5超入門
