HTML5なら外部ライブラリを利用しないでリアルタイム入力チェック出来る - Qiita
リアルタイム入力チェックは今のWEBページでは割りと標準化されつつあるけど、 ライブラリを選定したり、画面の表示を考えたりと何かと面倒。 HTML5の機能で追加されたバリデーション機能を利用すればそういった煩わしさから開放されるのでは？ と思いたち、外部ライブラリを一切使わずにリアルタイム入力チェックを実装してみた。 コード <section> <form id="sampleForm"> <label> 半角英数字以外を入力してみよう <input type="text" id="input" placeholder="半角英数字で入力" pattern="^[0-9A-Za-z]+$" required> </label> <button type="submit" id="submit">送信</button> </form> </section> <script> "use str
W3C発行のHTMLがすべて廃止された日 | フロントエンドBlog | ミツエーリンクス
あくまで有効日数はW3C仕様の名目上のステータスであり、参考情報にしか過ぎないわけですが、HTML5とそれよりも前に策定された(X)HTML仕様は、2018年3月に一斉に廃止され、HTML Review Draftと入れ替わるタイミングでHTML 5.1とHTML 5.2が同時に廃止されました。Second Editionを含んでいますが、HTML5シリーズがいずれも勧告から3年で廃止されているのは何とも興味深いところではあります。 また、古い話ですが、当時HTML5のEditorを務めていたHixieことIan Hickson氏が2008年に「HTML5の完成は2022年ごろになる」と発言していたことがありました（HTML5の完成は2022年！？ | Web標準Blog | ミツエーリンクス）。2012年にW3CとWHATWGのHTMLが分裂[1]し、結局今年になってWHATWG HTM
あなたがまだ使っていないかもしれないHTML5の便利機能10選 - Qiita
こんにちは、たかとーです🧑🎤 こちらは、10 useful HTML5 features, you may not be usingの翻訳記事になります。 当記事は、Tapasさんの許可を得て翻訳しています。Tweet 10 useful HTML5 features, you may not be using HTML5は新しいものではありません。最初のリリース（2008年1月）以来いくつかの機能を使用してきました。100DaysOfCodeの取り組みの一環として、HTML5の機能リストをもう一度よく見てみました。何か見つけたかな？私は今のところあまり使っていません。 この記事では、過去にあまり使ったことがなかったが、今では便利になったHTML5の機能を10個挙げています。また、Netlifyでホストされている、実際に動作する例を作成しました。参考になることを願っています。 htt
videoタグによる埋め込み動画がiPhoneでのみ表示されない時の対処法
先日、videoタグで設置している動画が、iPhoneでのみ表示できないという問題に遭遇しました。MacbookやiPadのSafariでは再生できており、iPhoneだけ動画の部分が真っ白になってしまうという現象です。 結果的に属性を1つ追加するだけで解決しましたので、備忘録として残しておきたいと思います。 videoタグによる埋め込み動画がiPhoneだけ表示されない時の対処法 iPhoneでvideoタグの動画が表示されない時は、playsinline属性をvideoタグに追加してあげます。以下のような感じです。 <video poster="example.jpg" preload="none" muted autoplay playsinline> <source src="example.mp4"> </video> playsinline属性については、MDNによると以下のよ
誰でもWeb上でリアルに動くHTML5アニメーションを製作できる「Animatron Studio」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、ブラウザ上から誰でも簡単にHTML5で作られたアニメーションを製作できるWebサービスをご紹介します！ Webサイトやサービスに組み込んで動きのあるコンテンツを作成したり、企業ロゴやバナー広告、商品紹介、インフォグラフィック…など、とても幅広い分野に応用することが可能です。 ブラウザさえあれば今すぐアニメーションを作れるので、ぜひみなさんもオリジナル作品を作ってみてください！ 【 Animatron Studio 】 ■「Animatron Studio」とは？ 「Animatron Studio」は、とにかく誰でも簡単にアニメーション製作ができることを前提に設計されています。 豊富なイラストやテンプレートを自在に組み合わせることで、わずかなマウス操作だけで楽しいアニメーションを次々と作っていくことが可能です。 例えば、以下のようなアニ
“モダン”ウェブアプリケーション 〜アメブロ5ヶ年計画〜
HTML5 Conference 2017.9.24 1. “モダン”ウェブアプリケーション ∼アメブロ5ヶ年計画∼ HTML5 Conference 2017.9.24 原 一成 @herablog 2. アメーバブログ 2004年開始のブログサービス 芸能人の利用が多い 芸能人以外とそれ以外のPVは半々 3. 2015 バックエンドシステムの刷新 2017 2016 Isomorphic JavaScript AMP https Code-splitting Node.js v8 React 16 PWA 4. 5年かけて“モダン”な状態にする 5. “モダン”であること エコシステムとつながっていること 6. “モダン”であること エコシステムからの恩恵 エンジニアの流動性 ! " 7. エコシステムからの恩恵 最新技術を取り込みやすい 世界中のエンジニアと協力できる ! 8. エン
2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります（※）。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw
【HTML5.1勧告】セクション要素内見出しレベル仕様の変更について
2016年11月1日付でW3CがHTML5.1を勧告しました。 HTML5からの変更差分はこちらにまとめられていますので、詳細はこちらを見ていただくとして、 今回はその中で「removed」つまり削除された仕様の一覧の中にあった次の項目に注目したいと思います。 ・The use of nested section elements each with an h1 to create an outline. （・アウトラインを生成するためにそれぞれh1を持つネストされたセクションを使用すること） HTML5でのアウトラインと見出しのルール 2014年勧告のHTML5では、「セクショニング・コンテンツの入れ子によって正しく階層構造がマークアップされている場合、その中で使用される見出しレベルは問わない」という仕様がありました。 このことはHTML4.01からHTML5になったときの大きな仕様変更
超詳解！Service Worker Deep Dive ── HTML5 Conference 2016セッションレポート
超詳解！Service Worker Deep Dive ── HTML5 Conference 2016セッションレポート 保呂毅 はじめまして。GoogleでChromeの開発をしている保呂毅です。 Chromeの中では特にService Worker周りを担当してまして、最近はNavigation Preloadという新機能をがんばって実装しています。 先日開催されたHTML5 Conference 2016でService Worker周辺の最近（ここ1年くらい）の動向に関する発表をさせていただいきました。 今回は、この発表の内容を振り返りたいと思います。 Service Workerとは まず本題に入る前に簡単にService Workerの説明します。 Service Workerとはどういうものかと言いますと、 下のコードのようにnavigator.serviceWorker
この1年、Webのパフォーマンスで変わったことは？──HTML5 Conference 2016
この1年、Webのパフォーマンスで変わったことは？──HTML5 Conference 2016 川田寛（ピクシブ株式会社） こんにちは、ふろしきです。HTML5 Conference 2016の当日は、38度近くの熱があり、発表時はろれつが回ってませんでした。しかし、伝えたいことは伝えられたと思っています。その内容とは… 「この1年でWebのパフォーマンスの技術にどんな動きがあったのか」 というダイジェスト。ここで話した3つのテーマについて、本記事でもご紹介。 1. レイアウト処理を減らす HTML5がバスワードするよりもずっと前から、CSSでアニメーションさせることはごくごくあたりまえ。JSが扱えないデザイナーであっても手軽にアニメーションできる良い世界になりました。しかしそこに、モバイルが出現したことで、JSだけで満足という人たちもCSSの機能を活用しなくてはいけなくなりました。 モ
HTML 5.1のsrcset・sizes属性とpicture要素の使い方 – レスポンシブイメージで画像表示を最適化 - ICS MEDIA
日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約40%であり、ウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です（参照「StatCounter」)。 HTMLの「レスポンシブイメージ」を使えば、HTMLのタグだけで表示端末にあわせた画像を配信できます。 本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。 この記事で学べること img要素のsrcset属性とsizes属性の使い方 picture要素の使い方 レスポンシブイメージとは一体何か？ レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年勧告のHTML 5.1に追加された仕様です（現在のHTMLの仕様書）。主な特徴は次の通りです。 CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り
プログレッシブウェブアプリ詳解 ─ 過去・現在・未来
Web技術でアプリ開発2016特集・第5弾は、プログレッシブウェブアプリ (Progressive Web Apps)をご紹介させていただきます。 はじめに プログレッシブウェブアプリ(Progressive Web Apps)という言葉が初めて登場したのは2015年8月のAlex Russellによる記事Progressive Web Apps: Escaping Tabs Without Losing Our Soulです。当時オフラインやプッシュ通知など、モバイルウェブを飛躍的に進化させる画期的な機能が次々と追加されていた状況において、このムーブメントを呼称するための言葉が求められていました。Google社内でいくつもの候補が挙げられましたが、Service Workerの発案者としてAlex Russellが推したのが、この「プログレッシブウェブアプリ」でした。 また、当初Goog
もう迷わない！HTML5のもっとも基本的なテンプレートはこれだ！（2016年版）
HTMLを書くときのベースとなる「書き出し」。いまどきはエディターにプリセットされていますし、ネットにも山ほど転がっていますが、どうせならきちんと意味を理解して、自分だけのテンプレートを作っておくとカッコいい。 HTML5を習得していくうちに、HTML5のテクニックをまとめて使ったひな型を作っておきたいと考えることでしょう。もちろんお勧めしますし、開始点として便利な、オンラインソースの使用も検討してみるもいいでしょう（もっと詳しく知りたい場合は、html5boilerplate.comやhttps://github.com/murtaugh/HTML5-Resetも参照してください）。 ただし今回は、構築内容も含め、コードを一から説明していきます。なぜならHTML5とCSS3を使ったサイトやWebアプリを作る際、使えるオプションに詳しくなれるし、この記事をテクニックの手引きとして参照しやす
W3Schools Online Web Tutorials
W3Schools offers a wide range of services and products for beginners and professionals, helping millions of people everyday to learn and master new skills. Free Tutorials Enjoy our free tutorials like millions of other internet users since 1999
Canvasで描画した画像を送信してサーバに保存する - Qiita
タイトルどおりのことをやった際の実装時メモ。 Canvasから画像を取得 2通りの方法が見つかった。 Base64への変換 Blobへの変換 Base64への変換 canvas.toDataURL()を呼び出すだけで取得可能であるが、 画像サイズに比例した巨大な文字列となり、変換によって元サイズより33%データ量が増える。 取得したBase64を<image>のsrcに指定すれば画像表示され、 <a>のhrefに指定すればリンククリックでダウンロードできてこれはこれで便利。 Blobへの変換 canvas.toBlob()を呼び出すだけで取得可能。 Blob形式で表現すれば、createObjectURL(blob)によりURL参照が取得できるので、 画像サイズに依存せずメモリ使用量を抑えられるらしい。（未確認) これは便利と思いきやcanvas.toBlob()はFirefoxでのみサポ
JS非同期処理のいま
Web屋という仕事のこれから 〜Web動向からWeb屋に必要な技術を考えてみる〜 FutureSync Vol.5 で発表したスライドです。 タイトルは釣りです。前半はほぼネタです。 中身はJavaScriptで動作するデバイスは楽しいからみんなやってみたら？ という内容です。
ローランド TR-909の機能とサウンドをWebブラウザ上に再現する「HTML-909」が公開
「HTML-909」は、TR-909の機能とサウンドをWebブラウザ上で実現するWebアプリ。各キットのパラメーターも、しっかりエディットできる凝った仕様になっています。TRシリーズのプログラミング方法を知っている人ならすぐに遊べると思いますが、知らない人のために簡単に説明しておくと、一番下の16個のボタンが、16分音符単位での各キットのオン／オフ・スイッチとなります。左側の“PLAY”ボタンをクリックすると、シーケンサーがスタートし、一番下の16個のボタンは順々に点灯。そしてキックを打ち込む場合は、左上の“BASS DRUM”と記された部分をクリックし、一番下の16個のボタンを使って、キックを鳴らしたい位置のボタンをクリックします（4分打ちにする場合は、“1”、“5”、“9”、“13”をクリック）。他のキットも同じ手順でプログラミングすることが可能です。残念ながらシャッフルはできないよう
ときどきWEB | HTML5のFile APIでローカルファイル情報取得してやんよ!!!
そろそろHTML5 APIのひとつでもリファレンスしていこうかな・・・ かといって今さらcanvasとかやってもしょうがないし、MathMLみたいなマニアックなものは覚えても使う機会があるかどうか・・・という事で 『File API』というヤツを手始めに覚えようかと思います。 『File API』について HTML5以前はブラウザ(またはWebアプリ)からローカルファイルを扱うには<input type="file">タグを利用してユーザーがファイルをアップロードする必要がありましたが、 File APIの登場でJavaScriptからローカルファイルを直接読み取ることができる様になりました。 このAPIはユーザーが指定したローカルファイル(Webブラウザが動作するパソコンのHDDやSSDといったストレージに置かれたファイル)の情報やデータを取得できます。 主なAPIの種類 File AP
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 Feature Tips
peng-note.com is Expired or Suspended.