Touch EventsがW3C勧告、仕様策定完了。スマートフォンやタブレットのマルチタッチ操作に対応
Touch EventsがW3C勧告、仕様策定完了。スマートフォンやタブレットのマルチタッチ操作に対応 これまでHTMLやJavaScriptなどのWeb標準技術では、ユーザーインターフェイスに関してマウスとキーボードを前提にしたイベントしか用意されていませんでした。 しかしスマートフォンやタブレットなどの普及により、画面を指やペンなどでタッチして操作するための仕様の要求が高まってきました。タッチ操作には同時に複数の指でタッチするマルチタッチ操作など、マウスやキーボードとは異なる操作を感知することが要求されたため、あらたな仕様を策定する必要があったのです。 Touch Eventsで追加されたイベントタイプは以下の4つ。 touchstart touchend touchmove touchcancel これらのイベントを要素にアタッチすることができます。またこれらのイベントに関連して複数
七章第三回 条件を満たすノードを順番に処理する：TreeWalker — JavaScript初級者から中級者になろう — uhyohyo.net
七章第三回 条件を満たすノードを順番に処理する：TreeWalkerこのページの最終更新日：2019年7月1日 今回は、たまに役立つものを紹介します。ある条件を満たすノード全てに対して処理を実行する方法です。 同じ感じのことは、今までに多少やってきました。例えば、getElementsByTagName（二章第六回）は、あるタグ名を持つ要素の一覧を得るためのものです。そうして得たNodeListをfor文などで1つずつ処理すれば、「ある要素名を持つ」という条件を満たすノードをまとめて処理したということになります。 しかし、今回紹介する方法では、要素名だけでなく、もっと複雑な条件を指定できます。 今回紹介するのは、TreeWalkerです。 直訳すると「木を歩くもの」という意味です。木とは木構造のことで、分かりにくいと思いますが、木構造の上を移動しながら次々処理をしていくというイメージです。
フォントの読み込み完了を検知する
TypeKitとかがやってるWebフォントの読み込みが終わったらhtml要素にクラス名を振るアレの話。TypeKitがオープンソースでリリースしているWebFont Loaderを使う方法が安全で安定。Googleがホスティングしているのもあるので手軽でもある。でも読み込み完了の検知以外にも機能があってパワフルすぎる気がするので、Adobe Blankを使って自前で書いてみることにした。 Adobe Blankのサイズ削減 Adobe Blankはそのまま使うと30KB以上ある。読み込み完了検知だけなら幅0のグリフが1つあればそれで良いので、まずはサブセット化してサイズを抑えることから。aだけのWOFFなAdobe Blankを作ればちょうど1KBくらいになる。 Download: adobe-blank.woff @font-face定義の追加 外部リクエストにすると意味が薄れるのでDa
全日本＜label＞要素マークアップ検定
Web入力フォームの縁の下の力持ち、Label要素をマスターするための検定試験です。 仲間内の勉強会で、ちょっと遊びすぎましたｗ
DOM Future と DOM の将来
わかば (id:wakabatan) 2013年5月23日 自己紹介 わかば id:wakabatan JavaScript は15年目くらい 株式会社はてな アプリケーションエンジニア ( ) 仕事では JavaScript 書いてない 最近たまに書いてる DOM 現代史のつまみぐいです 細かい話はばっさり省いています 紹介する新機能はまだ実装されていないかもしれません 5年後くらいには普通に使えるようになっている、かも DOM の歴史 1995年 Netscape2 JavaScript 1997年 IE4 DOM 1998年 W3C DOM1 2000年 W3C DOM2 2004年 W3C DOM3 2008年～現在 WHATWG DOM Standard <http://dom.spec.whatwg.org/> DOM Standard <http://dom.spec.wha
外部 script の document.write が何もしない条件などについて - ひだまりソケットは壊れない
読み込みのタイミングによっては外部 script のdocument.writeは無視される - HAKOBE blog ♨ なるほどなー、と思いながら上記記事を読んでた。 記事を読んでて JS の読み込み周りで気になることがあったので調べた。 DOM 操作で追加された script 要素のスクリプトはどのタイミングで実行されるのか? <!DOCTYPE html> <html> (略) <div id="js-insertion-point"></div> <script> var se = document.createElement("script"); se.src = "test.js"; var te = document.getElementById("js-insertion-point"); te.appendChild(se); </script> (略) 上記のような
Webパフォーマンス ベストプラクティス - Make the Web Faster
Webパフォーマンス ベストプラクティス Last updated: 02 October 2012 翻訳：@t32k WebページをPage Speedで調べるとルールに準拠していないものが提示される。このルールというのは、一般的にあなたが開発段階において取り入れるべきフロントエンドのベストプラクティスだ。あなたがPage Speedを使用しようとしまいと、私たちはこの各ルールについてのドキュメントを提供する（たぶんちょうど新しいサイトを開発中でテストする準備が整ってないだろう）。もちろん、これらのページはいつでも参照することができる。私たちはあなたの開発プロセスに取り入れてもらうために、このベストプラクティスを実装するための明確なティップスと提案を提供する。 パフォーマンス ベストプラクティスについて Page Speedはクライアント側からの観点でパフォーマンスを評価し、一般的にペー
BOWER
TWITTER ENGINEERING PRESENTS bower THE BROWSER PACKAGE MANAGER Introduction Bower is a package manager for the web. Bower lets you easily install assets such as images, CSS and JavaScript, and manages dependencies for you. For example, to install a package, run: bower install jquery This will download jQuery to ./components/jquery. That's it. The idea is that Bower does package management and pack
prototypeを拡張することで得られるもの。prototype拡張指向へのスイッチ - latest log
(ε・◇・)з mofmof.js や新しい uupaa.js では prototype拡張を活用しています (ε・◇・)з 長所がわかりづらいみたいなので、言い出しっぺのボクの中の人がメリットを列挙してみよー というエントリです (ε・◇・)з でも、長文になりそうなので、思いついたらちょっとずつ書き足していって、後で再編するよー というノリです (ε・◇・)з タイトルも適当です かわいい子には旅をさせるよ ( HTMLElement#cut ) 子ノード(div)を親ノードからパージする処理を考えてみましょう。 ---✂-------------------✂--- if (div.parentNode) { div.parentNode.removeChild(div); // div.parentNode = null } ---✂-------------------✂---
スクリプトが無効の場合のスタイル
たとえばホームページのビジュアル要素など、いったん非表示にしておいてスクリプトでふわっとフェードインさせたい、みたいなことはよくある。そのとき非表示にする操作も JavaScript にやらせると一瞬見えてしまうことがあるので CSS で非表示化したいが、それだとスクリプトが無効の場合に何も表示されなくなってしまう… というような、スクリプトによる操作を前提にしたスタイルのフォールバックをどうするかという問題。 ここのところよく使っていたのは、JavaScript で html 要素の class 属性を操作し、それをもとに CSS を書くという手。Modernizr でも使われてるあれ。 (function () { var root = document.documentElement; root.className = root.className.replace(/\bno[-_]
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
一億台のスマートテレビ、データ放送を活用する「JoiNTV」の新展開
日本テレビ放送網の「JoiNTV」は、放送通信融合型のソーシャル視聴サービスだ。データ放送を使った枠組みということで、多くの人が”馬鹿にしている”のだが、実態を見返すと、とても馬鹿にはできない、というのが現状である。 「JoiNTV」の利用イメージ。必要なものは、地デジ対応テレビとFacebookアカウントのみ。テレビ画面にFacebookの“友達”リストを表示して一緒に番組を視聴し、気に入ったシーンではリモコン操作で「いいね！」を残せる というのも、地デジに完全移行した結果、データ放送の利用者は1番組あたりで50万世帯を超えているという。テレビの進化などにより、以前に比べてデータ放送を利用する際の速度感（表示にかかる時間）が異なるというのも、利用率が向上している理由かもしれない。 確かにデータ放送は古い技術だ。BMLというHTMLのサブセットを端末に送り、コンテンツを表示させる。策定され
HTMLとJSだけで何か作るときの - hitode909の日記
HTMLとJSだけで何か作ることが多くて，開発環境をどう作るかとか，ノウハウみたいなのがたまってきたと思う． ローカルのHTMLファイルをブラウザで開くと，いろんな制約がある．たとえば，ファイルAPIを使えないとか，YouTubeのプレイヤー貼り付けできないとか，/js/みたいに絶対パスで指定することもできない．ページ1枚なら他のページにリンクとかいらないけど，ウェブサイトを作ってるときとかは，/help/でヘルプページを表示するとか書いたときに，ローカルのファイルを見てリンクが切れてるということになる．開発中はリンク切れだけど本番サーバーに置くと見れるはずとか言って開発するのは怖い． サーバーでRubyとかPerlが動いてるみたいなときはローカルでサーバーを立てて開発してると思う．HTMLとJSだけ使うときでもローカルでサーバーを立てて開発したほうがいいと思う． 開発中は，nginxでフ
【翻訳】document.writeでSCRIPTを書き出すなやで！ - MOL
Original：Don’t docwrite scripts（2012-04-10）by Steve Souders 昨日のブログ記事のHTTP Archiveが速くなっている、大きな要因の一つとしてはスクリプトローダーを使用しないことです。そのスクリプトローダーとはスクリプトを動的に読み込むためにdocument.writeを使用しているものです。振り返れば、私は2009年4月のブロッキングなしのスクリプト読み込み、続・ハイパフォーマンスWebサイト(4章)において、document.writeテクニックについて記述していました。それは以下のようなものです。 document.write('<script src="' + src + '" type="text/javascript"><\/script>’); document.writeを使ったスクリプトローダーの問題点： 挿入し
document.writeを使った遅いブログパーツ（例えばzenback）を非同期化してサイトを高速表示する方法 | ゆっくりと…
広告やソーシャル系のサードパーティー製ブログパーツを張りたいんだけど、サイトの表示速度が遅くなるのって我慢なりませんよネ。こういったブログパーツの多くが JavaScript で作られています。自サーバーに設置したスクリプトならまだ手の打ちようはあるし、本サイトでも JavaScript 読み込みを高速化するための非同期化ネタを幾つか扱ってきました。例えば Google Analitics の非同期トラッキングスニペット や LABjs、HEAD JS などの非同期ローダーが有名なところでしょう。 ところが困ったことに、こういったサードパーティ製スクリプトに document.write が使われていると、Google Analitics のようなテクニックや非同期ローダーでは、ほとんどの場合でページが白紙となってしまい使えません。Twitter や Facebook など超有名どころは既
IE 6, IE7, IE 8 でキャッシュしておいた文字列を、動的に生成した script 要素に設定し、文字列を JavaScript として評価する方法 - latest log
IE 8 で文字列から動的に script 要素を生成したい時もあると思います。 オフラインにキャッシュしておいた文字列を JavaScript として評価したい場合などです。 こうすると動作します IE6 ～ IE8 専用です。 var script = document.createElement("script"); document.getElementsByTagName("head")[0]).appendChild(script); script.outerHTML = ' <script defer="defer">' + jsExpression + '</script>'; document.createElement("script") でダミーの(プレースホルダの) script 要素を作り、そのあとで outerHTML で上書きしています。 これでも良
html2canvas - Screenshots with JavaScript
<div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello world!</h4> </div> html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas) });
Webコンテンツ、JavaScriptと画像が増加の一方で、Flashは減少傾向に
HTTP Archiveに2011年と2012年のWebサイトにおけるコンテンツの傾向比較が「2011 recap」として発表された。HTTP ArchiveはWebサイトを分析し、どの種類のコンテンツがどの程度転送されているかをまとめているサイト。2011年と2012年のサイト比較ではFlashを除くほかのすべての主要コンテンツのデータ転送量が増加しており、全体としてコンテンツ量が増加傾向にあることがわかる。 「2011 recap」では特に次の2つのデータ変化を指摘している。 Webサイトデータのうち過半数を画像データが占めており、しかも増加傾向にある。増加割合ではコンテンツ種類別で2番目に多い。 JavaScriptの増加率が44%と飛び抜けて高い。画像の増加率の2倍以上の増加率となっている。 コンテンツタイプ(Webサイト平均) 2011年1月 2012年1月 増減の割合
Firefox 10 の後方互換性に関わる修正
Firefox 10 は 01/31 のリリースに向けて開発が進められています。可能な限り互換性を維持するよう開発されていますが、他のブラウザとの相互運用性や最新 Web 標準仕様への準拠のため、後方互換性に関わる修正も含まれます。そのような修正点をまとめましたので、動作検証時などにご参照ください。 ここでは後方互換性に影響し得る修正のみ解説します。その他の新機能や変更点については次のページをご覧ください: ユーザ向けも含めた新機能: Firefox 10 の主な新機能を紹介します 開発者向けの新機能や変更点: Firefox 10 for developers UserAgent 文字列のバージョン番号が 2 桁になります Firefox 10 は初めてメジャーバージョン番号が 2 桁になる Firefox です。UserAgent 文字列でブラウザ判別を行っており、そのスクリプトのバー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Firefox 17 のサイト互換性に関わる修正のまとめ