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
超詳解！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の機能を活用しなくてはいけなくなりました。 モ
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
ときどき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
CodeIQについてのお知らせ
2018年4月25日をもちまして、 『CodeIQ』のプログラミング腕試しサービス、年収確約スカウトサービスは、 ITエンジニアのための年収確約スカウトサービス『moffers by CodeIQ』https://moffers.jp/ へ一本化いたしました。 これまで多くのITエンジニアの方に『CodeIQ』をご利用いただきまして、 改めて心より深く御礼申し上げます。 また、エンジニアのためのWebマガジン「CodeIQ MAGAZINE」は、 リクナビNEXTジャーナル( https://next.rikunabi.com/journal/ )に一部の記事の移行を予定しております。 今後は『moffers by CodeIQ』にて、 ITエンジニアの皆様のより良い転職をサポートするために、より一層努めてまいりますので、 引き続きご愛顧のほど何卒よろしくお願い申し上げます。 また、Cod
WebGLに対応し高速化したCreateJSの描画性能を探る - ICS MEDIA
インタラクティブコンテンツ制作に役立つHTML5向けのフレームワークCreateJS (使い方は入門サイトを参照ください)。2014年1月に公式ブログでWebGLサポートが発表されました（参照記事「WebGL Support in EaselJS」)。公式ブログによるとパフォーマンスが従来比の6〜50倍にも達するとのことです。 果たしてどのぐらいの性能があるのか気になりましたので、以前の検証記事「HTML5開発者必見、最速のJavaScriptライブラリはどれだ!? パフォーマンスの徹底検証」を元に、WebGL対応版のCreateJS(描画を扱うJSライブラリ「EaselJS」)のパフォーマンスを比較検証してみました。検証に用いたデモは次のリンクをクリックすることで再生できます。 CreateJS (EaselJS 0.7.1) : 従来版。CanvasのContext2Dが利用されている
FirefoxブラウザとWebの技術ですぐ作れる！ HTML5で手軽にFirefox OSアプリ開発
※1 Mozilla Corporation調べ、2014年12月現在 Firefox OSの特長 Firefox OSの構成 Firefox OSはMozillaが開発したオープンソースのスマートフォン、タブレット向けOSです。HTML、JavaScript、CSSなどのHTML5関連技術を用いてアプリを開発できるのが大きな特長であり、比較的軽量なOSとして設計されているため、低リソースのデバイスでも軽快に動作することも特長のひとつです。 Firefox OSの内部構造は主にGonk、Gecko、Gaiaという3つの層に分かれています。 一番上のアプリケーション／ユーザーインターフェース層はGaia（ガイア）と呼ばれています。Gonk（ゴンク）はデバイスとのインターフェースとなっているLinuxで、真ん中のGecko（ゲッコー）はHTML5アプリケーションのランタイムです。 アプリ開発者
<script async>でJavaScriptの非同期読み込みを - fragmentary
JavaScriptファイルをスクリプトから非同期で読み込むパターンは古い、という話を目にしたのはもう半年前のこと。 言ったのはIlya Grigorik。月末のGoogle Japanでのイベント、月初のHTTP2ConferenceにくるWebパフォーマンス界のすごいひとですよ。 Script-injected "async scripts" considered harmful - igvita.com 件のパターンは、スクリプトで動的に script を生成して、そこに読み込みたいJavaScriptファイルをぶっこんで読み込むというもの。 <script> var script = document.createElement('script'); script.src = "//somehost.com/awesome-widget.js"; document.getEleme
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
このJavaScriptフレームワークでHTML5は救われるかもしれない | readwrite.jp
HTML5はウェブ・ページをアプリのように動かし、そしてFlashに取って代わるはずだった。しかしパフォーマンスの問題で、アプリ開発者のHTML5導入は遅れてしまっている。 Famo.us社はこのギャップを埋めるためにスタートした小さな会社だ。同社は2Dと3Dの両方のエフェクトを高速表示するため、HTML5の遅延要素を本質的に回避する独自のフレームワークを開発した。このFamo.usによって、開発者はHTML5のパフォーマンスの問題に苦しむことなく、より短期間でクロスプラットフォームのアプリを開発することが可能となったのだ。 Famo.usの秘密はJavaScriptを利用していることだ。JavaScriptは極めて高速に動作し、既にあらゆるブラウザで広く使われている。Flashとは異なり、ブラウザ・プラグインをユーザーがダウンロードしたり、ブラウザメーカーがそれをサポートする必要もない。
重要！ まずは「オリジン」を理解しよう
重要！ まずは「オリジン」を理解しよう：HTML5時代の「新しいセキュリティ・エチケット」（1）（2/2 ページ） dataスキーム、fileスキーム http、https以外のスキームとして注意すべき点としては、dataスキームとfileスキームがあります。 RFC6454では、dataスキームはオリジンとしてそれぞれ固有のユニークIDを持つ、と書かれていますが、実際のブラウザ上の実装では、dataスキームで示されるリソースを含む元ページと同一のオリジンを持っていると判断されることがほとんどです。 また、fileスキームのリソースについては、複数のfileスキームのリソースについてどこまでを同一のオリジンと見なすかについては、完全にブラウザごとの実装依存となっています。 実際に同一オリジンポリシーに基づき、各リソースのオリジンによって動作が制限される機構としては、次のようなものがあります
Polymer library - Polymer Project
The Polymer library is in maintenance mode. For new development, we recommend Lit. The Polymer library provides a set of features for creating custom elements. These features are designed to make it easier and faster to make custom elements that work like standard DOM elements. Similar to standard DOM elements, Polymer elements can be: Instantiated using a constructor or document.createElement. Co
第38回 HTML5とか勉強会でテストについて話しました。 - teppeis blog
先週の4/26に開催された第38回HTML5とか勉強会「Webアプリ×テスト最新事情」で、JavaScriptのテストについて話させてもらいました。 発表資料はこちら。 JavaScript Unit Test Why? What? How? from teppeis 恥ずかしいビデオはこちら。http://www.ustream.tv/recorded/31976691 発表内容は、前回のWEB+DB PRESSで書かせてもらった内容の要約版＋アルファでした。 個人的には、最近ようやく実践テスト駆動開発(通称GOOS本)を読んで、2重のフィードバックループとアジャイルテストの4象限、TDD/BDDなんかが自分内でガシーンと、ザ・ワールドが時の歯車をがっちり掴んだときのようなつながった感があったのですが、まだ言語化するには早かったらしくあまりうまくは伝えられなかったかなと反省しました。 座
placeholder 属性と jQuery で IE にもプレースホルダを
フォームの入力コントロール （input とか textarea） に対して、初期値として入力例などをうっすら表示し、ユーザーへのガイドとして使用するプレースホルダ。HTML5 では、placeholder 属性が新たに追加され、プレースホルダの提供が簡単に行えますが、この属性の値を活かして、未対応環境にもプレースホルダを提供する jQuery プラグインを紹介します。 フォームの入力コントロール （input とか textarea） に対して、初期値として入力例などをうっすら表示し、ユーザーへのガイドとして使用する （プレースホルダ） なんてことはよくやります。 HTML5 では、プレースホルダを指定する属性として、まさにそのままの名前が付いた、placeholder 属性が新たに追加され、ブラウザさえ対応していればとても簡単に実現可能になっていますが、今のところ IE が対応していな
【HTML5】File APIを使って、投稿された画像を即時表示する方法【小ネタ】
こんにちは、橋本です。 今回は小ネタを１つ紹介したいと思います。 画像投稿フォームを作る際に、投稿された画像を即時表示したいなんてことありませんか？ そんなときに便利なのが、HTML５で追加されたFile API。 File APIを使えば、投稿された画像（正確には、選択されたローカルファイル）の情報を取得することができます。 では、画像投稿機能のサンプルを元に、File APIの使い方を見て行きましょう。 File API自体はjQueryと何の関係もありませんが、いろいろと面倒なので今回もjQueryを使っています。 サンプル <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <script src="http://code.jquery.com/jquery-latest.js" type="text/jav
history.pushState、history.replaceState - 素人がプログラミングを勉強していたブログ
HTML5のhistory.pushState、history.replaceStateを試した。 HTML5 pushState/replaceState demoで動かせる。 Minefieldだと完全に意図した通りに動くがWebKitだとURLまわりがうまくいかない。 メインのソースコードは下記の通り。 canvasで適当に壁紙用画像を作るデモで、画像自体をクリックして何度も作り直せるようにした。 こういう物を作るときは、前の画像に戻れるよう履歴管理をすべきだが、今まではlocation.hashを使ったり（hashchangeイベントが入るまではタイマーが必要だった）iframeを使ったハックだったり（ブラウザ間の互換性やhistory.go(-2)をきちんと動かすのが難しい）、あるいはページを遷移する（必要ない部分まで毎回読み込まれる）必要があった。 pushState/repl
HTML5、CSS3、JavaScriptがリアルタイム編集できる！軽量HTMLエディタ「Liveweave」 - Chrome Life
みなさんは、HTMLやCSSのコーディングには何を使っていますか？ デザイナーの方であればDreamweaverをメインで使っている人が多いと思います。 デベロッパーの場合は、自分の好きなテキストエディターを使いこなしているでしょう。 しかし、実際にはコーディングをしながら見た目や動きを確認するためにブラウザを横でたちあげてデバッグしながら作業を進めていくと思います。 コードを修正→ファイルの保存→ブラウザで更新→確認 この手順を繰り返すのですが、これがなかなか面倒です。 できれば、コードを修正したタイミングですぐに確認できるとベストですよね。 そこで今回ご紹介するのが、HTML5、CSS3、JavaScriptをリアルタイムに編集して確認ができる軽量HTMLエディタ「Liveweave」です。 「Liveweave」は、ブラウザ上で動作するHTMLエディタです。 コーディングエリアとレン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
peng-note.com is Expired or Suspended.
CSS3D Clouds