HTMLのpattern属性とJavaScript正規表現のunicodeオプション - Hatena Developer Blog
こんにちは、Webアプリケーションエンジニアのid:nanto_viです。みなさんHTMLのフォーム検証機能は使っていますか? 近年は各Webブラウザの対応も進み、お手軽にフォームの利便性を高められるようになっています。 そんなフォーム検証機能のひとつがinput要素のpattern属性です。pattern属性の値にJavaScriptの正規表現パターンを指定することで、ユーザーの入力が意図しないものであった場合、フォーム送信ができなくなります。下図は5桁の数字の入力が求められるところに3桁しか入力せずフォーム送信しようとしたところです。ブラウザに組み込みのエラー表示が出現し、またそのメッセージにtitle属性の値が使われていることを確認できるでしょう。(pattern属性を指定する際には、title属性に書式の説明を記述することが推奨されています。) <input type="text"
HTML5 入れ子チートシート | 吉川ウェブ
HTML 5.2のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを視覚化して表示します。 ※1 a要素の親要素が包含可能であること※1 audio要素の親要素が包含可能であること※1 canvas要素の親要素が包含可能であること※1 del要素の親要素が包含可能であること※1 ins要素の親要素が包含可能であること子要素省略※1 map要素の親要素が包含可能であること※1 noscript要素の親要素が包含可能であること かつ body要素の子孫であること子要素省略※1 video要素の親要素が包含可能であること ルート要素＆文書メタデータ html 親 子 head 親 子 title 親 子 base 親 子 link 親 子※HTML 5.2から可能。フレージングコンテンツが期待される場所※head要素の子孫であること meta 親 子※he
HTMLの文字コードをどうするべきか、あるいはHTMLとは何かという話 | なすびブログ
HTML文書は文字エンコーディングUTF-8でなければなりませんという記事があり、混乱があるようなのでHTMLについてHTML5とHTML Living Standard（以下HTML LSと省略）について、そしてHTMLファイルの文字コードをどうするかについて、まとめておきます。 TL;DR HTMLファイルの文字コードはHTML Living Standardに従ってUTF-8にする 古いSJISやEUC-JPのHTMLファイルをUTF-8に変換する必要はない What is "HTML" ? 一般にHTMLと呼ばれる規格には複数あります。 HTML4.01を含むそれ以前のHTML (W3C) XHTML1.1 (W3C) HTML5.1 (W3C) HTML Living Standard (WHATWG) まず一旦古い話は置いておいて、HTML5とHTML LSについて考えることに
“Right click and save as” needs to go away
For a long time it has been standard practice to ask visitors to “right click and save as” when downloading a file that the browser itself is capable of rendering, but where doing so is not desirable. One reason for doing this is to spare people from the annoying experience of accidentally clicking a link to a 25 MB PDF, which subsequently launches a browser plugin that of course crashes while try
ローカルストレージに簡単な解決策はない
原文：“There is no simple solution for local storage” (on March 5, 2012 by Chris Heilmann) 要約：私たちは良いデータストアとして localStorage を推奨するのをやめなければならない。パフォーマンスがひどく損なわれるからだ。しかし残念なことに、代わりとなるものはまだ完全にサポートされておらず、また簡単に実装できるものでもない。 Web 開発において、うますぎる話に出くわすことは常々だ。そういったもののいくつかは良いもので、だからこそそれが「すべて」として目立ってしまい、開発者を使うように仕向けてしまう。しかし、多くの場合、良いと思われていたものはそこまで良いものではない。また、しばらく使ってみてはじめて「間違っていた」と気づかされるものなのだ。 そんなもののひとつに、localStorage がある
W3C File APIを使ってJavaScriptでファイル加工 - しばそんノート
現在W3Cで仕様策定が進められているFile APIを使うと、JavaScriptからローカルファイルの情報や内容にアクセス出来るようになります。 Firefoxでは3.0時代から似たような機能が実装されていたようですが*1、今回やや仕様を変更した上で標準化されます。 まだワーキングドラフトの段階ですが、Firefox 3.6 RC1*2に既にほとんどのAPIが実装されていますので、今すぐに使ってみることができます。 そこで、試しにこんなサンプルを作ってみました。Firefox 3.6で以下のページにアクセスしてみてください。 JavaScriptでネガポジ反転 ファイル選択欄でビットマップファイル（.bmp）を選択、あるいはブラウザにドラッグアンドドロップすると、その画像をネガポジ反転（階調の反転）して表示します。複数選択も可です。*3 *4 ↓実行例 ファイル加工の際にサーバと一切通信
HTML5のapplication cacheがつかえない件 - （ひ）メモ
ちょっと思い違いをしていたのでメモっておきます。 HTML5にはオフラインでも参照できるapplication cacheという機構があります。 HTML5 Rocks - A Beginner's Guide to Using the Application Cache 6.6 Offline Web applications ― HTML Standard 「ローカルキャッシュなんで速いし！サーバーの負荷も減るし！！」と思ってちょっと試してみたんですが、これ、動的なページが基本のWebサービスには役に立ちません。 application cacheは、HTMLに <!DOCTYPE html> <html manifest="/cache.manifest"> <head> ...という風にキャッシュの指示ファイル cache.manifest を指定して、そこでキャッシュするとかしな
【スマホ集中連載 第4回】 "HTML5とCSS3で何ができる？" 〜メリット・デメリットを徹底研究！ : LINE Corporation ディレクターブログ
※この記事はChromeで見るのがおすすめです。 こんにちは。新規開発グループ ディレクター兼マークアップエンジニアの浜です。 スマホ連載の第4回目は、HTML5とCSS3という実装寄りの内容になります。とは言っても難しいコードはあまり出てきません。「HTML5とCSS3で何ができるのか」という事をメインに、知っておくと、構成書を作る時のアイディアベースになったりデザイナー・マークアップエンジニア（コーダー）と打ち合わせをする際に話しやすくなる内容をお送りします。 記事のアウトラインは以下です。 そもそも、HTML5とCSS3ってもう使えるの？ HTML5とCSS3を使うメリットは？ HTML5とCSS3で何ができるの？ そもそも、HTML5とCSS3ってもう使えるの？ 使えます。 （※ここから先は、その根拠について説明します。必要ない方は、次の章に飛んでしまっても構いません） 現在のスマ
File API (W3C Working Draft 26 October 2010)
File API W3C Working Draft, 24 May 2024 More details about this document This version: https://www.w3.org/TR/2024/WD-FileAPI-20240524/ Latest published version: https://www.w3.org/TR/FileAPI/ Editor's Draft: https://w3c.github.io/FileAPI/ Previous Versions: https://www.w3.org/TR/2023/WD-FileAPI-20230206/ History: https://www.w3.org/standards/history/FileAPI/ Feedback: GitHub Inline In Spec Editor:
HTML5のMicrodataとは何か？
HTML5では、HTML文書の中にメタデータを埋め込むための「Microdata」という仕様が含まれています。 最初に簡単なMicrodataの具体例を紹介します。HTML文書の中で明示的に人名であることを示したい内容があるとき、Microdataでは次のように書くことができます。 <div itemscope> <p>僕の名前は<span itemprop="name">山田太郎</span>です。</p> </div> この文書をWebブラウザで表示しても、 僕の名前は山田太郎です。 と表示されるだけで、特に何か変わったことが起きるわけではありません。しかし、このHTML文書を検索エンジンが読み込むと「山田太郎という文字列はnameである」と理解してインデックスしてくれる、といったことができるようになります（というのはあくまで例です）。 Microdataとは、文書の内容に対して機械に
HTML5のCustom Data Attributeは、Microdataよりも気軽にデータを埋め込める
HTML5のCustom Data Attributeは、Microdataよりも気軽にデータを埋め込める HTML5にはMicrodataというメタデータを埋め込むための仕様がある、ということを、「HTML5のMicrodataとは何か？ 」「HHTML5のドラフト仕様書からMicrodataの抄訳 」という2つの記事で紹介しました。 そのMicrodataよりもずっと手軽にHTMLに独自データを埋め込む方法が、HTML5では提供されています。それが「Custom Data Attribute」です。 すでに使われている独自属性 あるタグに独自の属性を付加したいという要求は、まれに生じます。 追記12/2：rel属性はHTMLの正式な仕様でした。そのため、以下の例は独自属性の例としては正しくないので省略させていただきます。すいません） 例えば、グーグルなどの検索エンジンは、スパム対策とし
こてさきAjax:WebSocketがデフォルトdisableとなった件 - livedoor Blog（ブログ）
拙著（「徹底解説 HTML5 APIガイドブック コミュニケーション系API編」）の補足・修正POSTです。 p.24にWebSocketをサポートしているブラウザが記載されていますが、周知の通り、以下のブラウザでデフォルトdisableになりました。 FireFox4 Opera11 ちなみに、執筆以降サポートを開始した iOS4.2.1のsafari は、現状使える状態です。 disableとなった理由は、現状実装されているバージョン（Draft76）にセキュリティ上の脆弱性が見つかったため。脆弱性がFixされた仕様がIETFで固まれば、マイナーバージョンであっても再び対応するとのこと。 http://hacks.mozilla.org/2010/12/websockets-disabled-in-firefox-4/ 脆弱性の詳細は、Adamさんのレポートで述べられています。 ただし
HTML5の登場で、XHTMLは結局どうなったの？
HTML5の登場で、XHTMLは結局どうなったの？：HTML5“とか”アプリ開発入門（3）（1/2 ページ） 最近よく目にする「HTML5」という言葉。JavaScriptのAPIやCSS3、SVGなどを含め、急速な広がりを見せつつある「HTML5」の基礎を学べる入門連載です。「HTML5を使うと、何ができるのか」「それを実現するには、どのようなプログラムを書いたらいいのか」をお届けします XHTMLは、まだまだ健在だ！ 前回の「HTML5でWebページをマークアップするための基礎知識」では、HTML5の文法（HTMLシンタックス）について説明しました。 今回は、連載第1回の「Webの3つの問題を解決する「HTML5」とは何なのか」から続く、HTML5に関する基礎知識を締めくくる話題として、XHTMLとの関連についてお話ししたいと思います。 XHTMLの立ち位置を、もう一度確認しておこう
W3C - 『HTML 5 differences from HTML 4』日本語訳 - HTML5.JP
一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この日本語訳は、私が理解を深めるために、自分なりに日本語化したものです。本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。 原文URL：http://www.w3.org/TR/2011/WD-html5-diff-20110525// 原文タイトル：HTML 5 differences from HTML 4 - W3C Working Draft 25 May 2011 翻訳日：2011/05/26 最終更新日：2011/05/26
WebSocketで目指せ“リアルタイムWeb”！第1回 node.jsの衝撃とWebSocketが拓く未来 - ＠IT
ご挨拶 こんにちは、ロンドンのNew Bambooという会社でWebエンジニアとして働いている@makoto_inoueです。ここのところ、PusherというWebSocketのクラウドサービスの開発に関わっています。今回から3回に渡ってWebSocketに関する短期連載を担当させていただきます。 私を含めたNew Bambooの面々（我々は自分たちのことをBambinoと呼んでいます）がWebSocketになぜ興味を持ったかということからはじまり、実際にクラウドサービスを始めるまでにいたったストーリーをお話ししたいと思います。そのストーリーを通じて、WebSocketが切り開く「リアルタイムWeb」な世界への可能性や技術的課題を皆さんと共有できればと思っています。
HTML5でWebページをマークアップするための基礎知識
最近よく目にする「HTML5」という言葉。JavaScriptのAPIやCSS3、SVGなどを含め、急速な広がりを見せつつある「HTML5」の基礎を学べる入門連載です。「HTML5を使うと、何ができるのか」「それを実現するには、どのようなプログラムを書いたらいいのか」をお届けします 5からHTMLの“文法”が変わるって知ってた？ 連載第1回の「Webの3つの問題を解決する「HTML5」とは何なのか」では、HTML5という技術革新の意義、そして本連載の大まかな流れについてお話ししました。連載第2回である今回は、HTML5のマークアップを行うための基礎知識についてお話しします。 HTML5では、その文法が大きく変化しました。「HTMLが、どれほど普及しているか」「根底となる“文法”が変わってしまったら、どれほどの影響があるか」に想像が及ぶ方であれば、非常な驚きと不安を抱かれるかもしれません。
HTML5+CSS3 入門
Webを記述する言語の標準の現状 昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。 HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1 CSS (文書の体裁・デザインを指定する言語) – CSS 2 しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの歴史的な経緯について簡単に理解する必要があります。ここまでの経緯を整理した上で、将来の展望を探りたいと思います。その上で、この授業ではどのような基準にのっとって「正しい」ということを定義するのか決めていきたいと考えます。 HTML (Webサイトの記述言語) の標準化巡る闘争の歴史 AppleInsider: なぜ Apple は HTML 5 に賭けているのか： ウェブの歴史 [Page 2] よ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IBM Developer
フォーム関連要素（2） HTML5でinput要素に追加された新しいタイプ13連発
The WebSocket API