読者です 読者をやめる 読者になる 読者になる

ふろしき.js

Web + Mobile + UX + Performance Tech

ライブラリ

オープンソースのJavaScriptライブラリでベンダサポートを受ける方法

サーバサイドのOSS開発ではRedHat社のようなOSSサポートベンダがいますが、フロントエンドはイマイチ充実していない印象があるようです。エンタープライズでの活用の場合、近年のHTML5ベースなRIA開発を行う上でベンダサポートは切実な問題になるでしょう。…

1300の優良サイトが選んだ「ページレイアウト(Page Layout)」ライブラリ集 - タイルレイアウト・可変グリッドレイアウト・レスポンシブWebデザインなど

1300の優良サイトを調査してみたシリーズ、第13回は「ページレイアウト(Page Layout)」です。タイルレイアウト・可変グリッドレイアウト・レスポンシブWebデザインと、様々なページレイアウトの思想が時代の流れとともに生み出されてきました。ふろしき.jsの…

1300の優良サイトが選んだ「ページスクローラー(Page Scroller)」ライブラリ集

1300の優良サイトを調査してみたシリーズ、第12回は「ページスクローラー」です。ボタンクリックなどのイベントに反応して、ページの先頭や任意の要素にスクロールさせる機能を、「ページスクローラー」といいます。ふろしき.jsの調査では、1300中68サイト(5…

1300の優良サイトが選んだ「コンテンツスクロールバー(Content Scroll-bar)」ライブラリ集

1300の優良サイトを調査してみたシリーズ、第11回は「コンテンツスクロールバー」です。利用規約などを表示する画面では、CSSの「overflow:scroll」プロパティを利用して、ブロック要素に対してスクロールバーを与えることがあります。これを「スクロールバ…

1300の優良サイトが選んだ「フルスクリーンバックグラウンドイメージ(Full Screen Background Image)」対策ライブラリ集

1300の優良サイトを調査してみたシリーズ、第10回は「フルスクリーンバックグラウンドイメージ(Full Screen Background Image)」です。背景にフルスクリーンの状態で画像を表示させるには、独特なノウハウを必要とします。この対策への呼び名は日本にはまだ…

1300の優良サイトが選んだ「オーバーレイイメージ(Overlay Images)」ライブラリ集

1300の優良サイトを調査してみたシリーズ、第9回は「オーバーレイイメージ」です。Webページ上の画像をクリックした際に、同一ウィンドウ内に拡大された画像を表示する処理を、「オーバーレイ」や「オーバーレイイメージ」といいます。ふろしき.jsの調査では…

1300の優良サイトが選んだ「pjax」ライブラリ集と問題点

1300の優良サイトを調査してみたシリーズ、第8回は「pjax」です。Webアプリケーションには、「http://〜/sample.cgi」のようなクエリストリングでなく、「http://〜/#!/sample」のようにハッシュとして持たせ、Ajaxによってデータを動的に取得する仕組みのも…

1300の優良サイトが選んだ「コンテンツスライダー(Content Slider)」ライブラリ集

1300の優良サイトを調査してみたシリーズ、第7回は「コンテンツスライダー」です。画像ファイルや動画ファイルをスライドショーのように表示させるアニメーションを、「コンテンツスライダー」といいます。デザインに関わるためどれがベストとも言えませんが…

1300の優良サイトが選んだ「マウスオーバー・ロールオーバー」ライブラリ集

1300の優良サイトを調査してみたシリーズ、第二回は「マウスオーバー・ロールオーバー」です。画像やブロック要素などのオブジェクトは、マウスポインタが当たった際にビジュアルデザインが変化することを求められることがあります。これを広義では「マウス…

1300の優良サイトが選んだ「CSSのポリフィル・シム」ライブラリ集

1300の優良サイトが選んだシリース、第5回は「CSSのポリフィル・シム」です。レガシーIEは、CSSに不具合や新標準への未対応という問題があります。日々追加されるCSS3プロパティや新しいセレクタへの対応を必要とする場合、「ポリフィル」または「シム」と呼…

1300の優良サイトが選んだ「ブラウザの種類・機能判定」対策とベストプラクティス

1300の優良サイトが選んだシリース、第4回は「ブラウザの種類・機能判定」です。以前「マルチブラウザとクロスブラウザの違いは何か?」という記事を書きました。コンテンツの相互運用性の対策を、「Webブラウザの種類」でやるか「Webブラウザの機能」でやる…

1300の優良サイトが選んだ「CSSリセット」のベストプラクティス

1300の優良サイトが選んだシリース、第2回は「リセットCSS・ノーマライズ」です。Webブラウザごとに異なるCSSのデフォルト値を、均一化させることを「リセットCSS」と言います。「ノーマライズ」と言います。 reset.css / YUI Library (76件) 公式サイト:ht…

クロスブラウザ対応を助けるJSライブラリ"Modernizr"

Modernizrは、HTML5やCSS3などの新しいWebの標準がWebブラウザに実装されているか、汎用的なインタフェースを通じて確認することができるJavaScriptライブラリです。▼公式サイト http://modernizr.com ▼ダウンロード http://modernizr.com/download/ ▼Develo…

imgタグの画像のロードタイミングを制御できるjQueryプラグイン"Lazy Load"

Webページを表示する時、画面に表示されていない無駄な画像までロードしていませんか?画像のロードは、Webブラウザの表示を遅らせるだけでなく、サーバ側にも負荷を与える厄介な処理でもあります。"Lazy Load"は、そんな画像ファイルのロードタイミングを、…

ページの初期描画を高速化させる、yepnope.jsの使い方

yepnope.jsは、JavaScriptファイルやCSSファイルを遅延して読み込んだり、条件によって読み込む対象ファイルをスイッチさせることで、ページ応答やパフォーマンスを改善するJSライブラリです。yepnope.jsの公式Webサイトはこちらですが、2013年6月現在はリン…