タグ別アーカイブ: HTML5

jQueryプラグインのオプションとHTML5 data-*属性でハマった時に幸せになれるかもしれないまとめ

html5 data parser

意外と要注意… なんて記事を書いておきながら、実際に HTML5 のカスタム・データ属性にオプションを指定する jQuery プラグインを作っていて、かなりハマってしまいました。

data-* 属性に書いた複雑なオプションを jQuery Data API で処理するには、JSON で指定しなくちゃダメなんですネ。ちゃんと ドキュメント にも書いてありました 😉 。

ということで、「もっと簡単に記述できるようにしたい!」を叶える 簡易な data-* 属性パーサー を作りましたので、ここに発表します。

ついでに data-* を使った jQuery オプション指定のユースケースを整理し、その実装方法をまとめてみたいと思います。

続きを読む

プログレッシブレンダリングでUXを向上させるJS非同期読み込みのベストプラクティス

iOS Safari

本ブログでは、サイトの高速化に直結する「JavaScript 非同期読み込み」の話題を多数取り上げてきました。タイトルに釣られてこの記事を見てくれている方なら Google Analytics の非同期コードスニペット はご存知でしょうし、規模の大きいサイトやアプリ用に RequireJS などのフレームワークを使っている方もいるでしょう。

GA も RequireJS も、動的に生成したスクリプト要素を DOM に埋め込む「DOM 挿入法」が用いられています。さらに遡れば、Steve Souders が 2009年4月の記事 ノン・ブロッキングなスクリプト読み込み で、6つの手法に分類しています。

果たしてこれらの方法は、サイトの高速化にとってベストなのでしょうか?

答えは2012年12月の海外記事にありました。そこで本エントリーでは、日本ではほとんど取り上げられていない Frame in Frame という ノン・オンロード・ブロッキングなスクリプト読み込み を紹介し、タイトルの様な視点で、その活用方法を考えてみたいと思います。

続きを読む

Respond.jsとレスポンシブWebデザインをめぐるベストプラクティス議論

How are you responsive?

2012年2月、Modernizr 2.5 の カスタム・ビルダー から Respond.js が外されました。理由は、HTML5 Boilerplate (以下 H5BP) コミュニティでの決定です。Respond.js は、IE8 以下などのメディアクエリ未対応なブラウザにもその代替え機能を提供するスクリプトで、レスポンシブ Web デザイン を支えるスクリプトとして、H5BP に長らく (8ヶ月) 採用されてきた経緯があります。

ではなぜ、Respond.js は外されたのでしょう?

今回は、その決定を下した長~い議論 Issue #816: Revert mobile-first media queries and remove respond.js から、ベスト・プラクティスの要点と、Paul Irish の考える H5BP の理想像を読み解いてみたいと思います。

ヘタクソで読みづらいですが、日本語訳 も作りましたので、どうぞ 🙂 。

続きを読む

HTML5 Boilerplate, Initializrをこれから使う人が押さえるべき5つの原則

HTML5 logo

boilerplate とは、「再利用を意図した標準的な文例集」 だそうです。

Paul Irish が中心となり構築されてきた HTML5 Boilerplate は、その名の通り HTML5 でサイトを構築するためのテンプレート、さらにはフレームワークをも含む内容となっており、その特徴は次のように語られています。

HTML5 Boilerplate は、HTML5 を扱う上で必要な数多くの機能強化を他のベスト・プラクティスの数々と組み合わせることで、最小限の先行投資でプロジェクトの磐石な基盤を提供します。

2011年02月08日 HTML5 Boilerplate を使用して Web 開発を容易に始める | IBM developerWorks より。

HTML5 Boilerplateをベースにすることで最初からベストプラクティスが適用されたサイトやページを構築できるという特徴がある。

2011年08月15日 待望のHTML5ベストプラクティス「HTML5 Boilerplate」バージョン2登場 | マイナビニュース より。

ここで言う ベストプラクティス とは、ブラウザ違いを吸収し効率の良い JavaScript や CSS のコードを書くためのノウハウはもちろん、Yahoo! の 「Best Practices for Speeding Up Your Web Site」 や Google の 「Web Performance Best Practices」 にまとめられている、主に応答性のよいサイトを作るためのフロントエンド改善策を指しているものと思われます。

また、HTML5 Boilerplate のお手軽なサブセットとなっている Initialir には、「簡単に」 とか 「さくさく」 とかの形容詞が付けられて紹介されています。

さて、実際にこれらのテンプレートを使ってみると、ベストプラクティス という一言で、または単に 「かんたん、サクサク」 という一言で終わらせるのはもったいない、という気がしました。そこで、近年の技術トレンドに照らし合わせて 「5つの原則」 という形にまとめ、それらがどのようにテンプレートに織り込んであるかを考えてみました。

これからこのテンプレートでサイトを構築してみようという方の参考になれば幸いです 😀 。
続きを読む

最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた

ひょんなことから normalize.css のページを覗いていたら、Google Analytics、Google +1、Twitter、Facebook の各 JavaScript をまとめて非同期で読み込んでいるスクリプトが使われているのを見つけました。

CSS/JavaScriptのAsynchronous Loadingをめぐる熱い論議」 でも書きましたが、スクリプトの非同期読み込みは、Google Analytics のコードスニペット で一応の決着を見た感じで (実は、標準化を巡って第2ラウンドが始まってはいますが…)、今や Google+1 はもちろん、Facebook も同様の手法を推奨しています。

調べてみたら、「それなら Twitter のスクリプトだって同じように読めばいいじゃないか」 という感じでどんどん まとめスクリプト の改良が進んできたようです。

我が日本としてはこれに 「はてな」 を加えるしかない!、ということで作ってみましたので、公開したいと思います。

続きを読む

意外と要注意 HTML5データ属性とjQuery Data APIの関係まとめ

前の記事「HTML5でモダンブラウザのCSS3バグを回避するためのハック方法」に関連して、jQuery で HTML5 データ属性にユーザーエジェント文字列を格納する方法を調べていました。その結果、ちょっと整理をしておいた方が良いかなと思う点を共有したいと思います。

ご存知の方も多いと思いますが、jQuery には .data()jQuery.data() という、DOM 要素に データ を紐付けて記憶しておく仕組みが元々ありました。jQuery 1.4.3 からは、 API レベルでの 親和性 が考慮された形で HTML5 data-* 属性を取り込む仕様が導入されました。

HTML5 時代では、クライアント・サイドで実行されるコード量も増え、データ属性を扱う機会もちょくちょく出てくるのではないでしょうか。そこで今回は、

  1. HTML5 data-* 属性のおさらい
  2. jQuery Data API の経緯
  3. jQuery Data API と HTML5 data-* 属性の共通点と違いまとめ

といった順にまとめておきたいと思います。
続きを読む

HTML5でモダンブラウザのCSS3バグを回避するためのハック方法

browser sniffing
将来、何かの役に立つかもしれないので、メモとしてエントリー。

IEなんかの古いブラウザに対応するための CSS ハック方法は古くから知られていますが、CSS3 への過渡期の現在、(本当は使いたくない)ベンダー・プレフィックスや Modernizr なんかを使って新しいデザインにチャレンジしている人も多いことでしょう。

それでもなお、特定ブラウザの、特定バージョンで思った通りのデザインにならないことがあれば、やはり何かしらのハックに頼らざるを得ない状況は、今も昔も変わらないのかもしれません。

そんな場合のハックを An HTML5 boilerplate addon for CSS browser nitpicks から紹介です。紹介されているテクニックは、従来型の CSS 解釈時バグや CSS 属性のアリ/ナシといった特徴や機能ベースではなく、そのものズバリ、ユーザーエージェントによるブラウザの嗅ぎ分け(Browser Sniffing)方法です。JavaScript でいえば、このような方法は全く好ましくないとされていますが、HTML5 時代の、特にモダンブラウザごとに対応する方法としてはアリ…? かもしれませんネ。
続きを読む

jQuery DeferredとHTML5 Web Workersでオブジェクト指向な並列プログラミングを

UIが反応しなくなったページ

jQueryのDeferredとPromiseで応答性の良いアプリをー実践編」 で述べましたが、Deferred には次の様なうれしさがあります。

  • 非同期な処理をする部分と、その結果をインターフェースする部分を分離する事によって、(特にアプリケーションに近い部分で) コードの可読性が高まる
  • 複数の Deferred オブジェクトをまとめて監視出来る

一方 Web Workers には、window オブジェクトや DOM へのアクセスが出来ないなど、ちょっと引いてしまう制限がありますが、考えようによっては、表示やマウス入力を扱う ユーザー・インターフェースな処理 と、その中身の 純粋にデータ的な部分を扱う処理 とを分離して Web アプリを作るという、オブジェクト指向的な考え方と極めて親和性が良いのではないかと思います。

ということで今回は、「Deferred と Web Workers を組み合わせましょう」 と言う自然な成り行きの記事 「Combining jQuery Deferred with the HTML5 Web Workers API」 からミニ・フレームワーク的なコードを紹介したいと思います。

ステップ毎に jsFiddle のサンプルも載せましたので、楽しんでい頂けたらと思います 😀 。
続きを読む

jsFiddleをとことん楽しむために知っておくと良い15の事

jsFiddle

fiddle」 には、「いじくる, もて遊ぶ」 とか 「暇・時間をつぶす」 などの意味があるようです。「jsFiddle」 はご存知の通り、HTML + CSS + Mootools、jQuery、Prototype、Dojo などの各種 JavaScript フレームワークで、遊んでみようというサイトです。日本には、「jsdo.it」 という、楽しいサイトもあるのですが、jsFiddle はまだαバージョン。次のβバージョンでは機能追加が数多く予定されており、個人的には期待大なのです。また jsdo.it にはない機能もありますので、必要に応じて使い分けるのが吉だと思います。

今回はそんな魅力が伝えられるよう、まとめてみたいと思います。
続きを読む

Canvasを使ったグロー効果が幻想的!!HTML5/Videoタグ用jQuery Plugin

ambilight

新年、明けましておめでとうございます。旧年中、このブログ読んで下さった方々、お世話になりました。今年もがんばりますので、よろしくお願いします 😀 。

新年一発目のお題は、Philips 社 の TV に装備された Ambilight を模した jQuery Plugin の紹介です。このギミック、日本ではほとんど馴染みがないと思いますが、液晶 TV の背面外周に取り付けられた LED が画面に合わせた色に発光し、映画館の環境 (アンビエント) 光の雰囲気を演出するというものです。
続きを読む