ふろしき.js

Web + Mobile + UX + Performance Tech

Web制作者向け

日本人が開発したJavaScriptライブラリ、エンジニア別国内利用率ランキング

「エンジニアはGitHubにソースコードを上げると、転職で有利になる!」なんて言われている時代ですが、本当にそうなのでしょうか?多大な時間を割いて、ソースコードを管理し、マニュアルを作り、特設ページを作り、公開することに意味はあるのでしょうか?

Compat Inspector - ソースコードからIE独自機能を機械的に検出しWeb標準へ置き換えさせる方法

古いWebコンテンツではIE独自の機能を利用しないことには、リッチな機能を盛り込むことが実質的に不可能という状況でした。しかし、IE9以上からはWeb標準への準拠が高く、Microsoft側でも、IE独自機能に依存しないWeb標準へ準拠したコンテンツ作りを推奨して…

Webアプリのパフォーマンス改善をWeb標準で行う方法、まとめ

「HTML5 Advent Calendar 2013」の24日目の記事です。Webアプリのパフォーマンス改善と言えば、JavaScriptやDOMアクセスなど、既存の技術ベースな改善手法を想像する方も多いでしょう。最近では、こうした改善のあり方を、別の視点からもう少し広げようとい…

無料でIEのマルチバージョンテスト「Modern.IE」開発での利用時の注意点

Microsoftは、6以降の全てのIEの動作をテストできる手段として、「Modern.IE」というサービスを提供しています。タイトルでは無料と言っていますが、実際には一部のサービスのみが無料となっています。本来なら有償のサービスを売り込みたいところなのでしょ…

IE11のX-UA-Compatibleの使い方/動作仕様

IE11では、X-UA-Compatibleという制御パラメータを利用し、過去のWebブラウザの機能をエミュレートさせることができます。本記事では、X-UA-Compatibleの利用方法について解説します。 動作の仕様 設定方法 HTMLドキュメント内にX-UA-Compatibleを追加する A…

IE10のX-UA-Compatibleの使い方/動作仕様

IE10では、X-UA-Compatibleという制御パラメータを利用し、過去のWebブラウザの機能をエミュレートさせることができます。本記事では、X-UA-Compatibleの利用方法について解説します。 動作の仕様 設定方法 HTMLドキュメント内にX-UA-Compatibleを追加する A…

IE9のX-UA-Compatibleの使い方/動作仕様

IE9では、X-UA-Compatibleという制御パラメータを利用し、過去のWebブラウザの機能をエミュレートさせることができます。本記事では、X-UA-Compatibleの利用方法について解説します。 動作の仕様 設定方法 HTMLドキュメント内にX-UA-Compatibleを追加する Ap…

IE8のX-UA-Compatibleの使い方/動作仕様

IE8では、X-UA-Compatibleという制御パラメータを利用し、過去のWebブラウザの機能をエミュレートさせることができます。本記事では、X-UA-Compatibleの利用方法について解説します。 動作の仕様 設定方法 HTMLドキュメント内にX-UA-Compatibleを追加する Ap…

IE11のEmulateIE10(X-UA-Compatible)でDOCTYPEスイッチに不具合がある(→仕様でした)

(※ 本ドキュメントは古い情報です。正確な仕様は、こちらを参照して下さい。)IE10までは、「X-UA-Compatible」に対して、「IE=EmulateIE」で指定された対象バージョンのドキュメントモードでは、DOCTYPEスイッチの条件に従いQuirksモードへの切り替えを行っ…

IE10のDOCTYPEスイッチによるStandard/Quirksモードの切り替え一覧表

IE10には、古いIEの動作とHTML5との相互運用を可能としたレンダリングエンジンとして動作するQuirksモードと、最新のレンダリングエンジンとして動作するStandardモードがあります。HTMLドキュメントの一番上でのDOCTYPE宣言を行うことにより切り替えを行い…

IE9のDOCTYPEスイッチによるStandard/Quirksモードの切り替え一覧表

IE9には、IE5の動作を再現させるQuirksモードと、最新のレンダリングエンジンとして動作するStandardモードがあります。HTMLドキュメントの一番上でのDOCTYPE宣言を行うことにより切り替えを行います。IE9の場合、「X-UA-Compatibe」へ「IE=EmulateIE」とい…

IE7のDOCTYPEスイッチによるStandard/Quirksモードの切り替え一覧表

IE7には、IE5の動作を再現させるQuirksモードと、最新のレンダリングエンジンとして動作するStandardモードがあります。HTMLドキュメントの一番上でのDOCTYPE宣言を行うことにより切り替えを行います。IE7からは、IE6まで問題になっていたXHTML1.0のDOCTYPE…

相互運用性対策は「ブラウザ/デバイス検出」から「機能/動作検出」へ

これまでWebシステム/サイトは、Webブラウザの種類でビューを切り替える「ブラウザ検出」という考え方が一般的でした。また、デスクトップ型かスマートデバイス型かをサーバで判断し、ビューを返す「デバイス検出」は、今もなお主流かと思います。しかし最近…

ブログのGoogleの検索結果表示を操作する方法

Googleの検索結果を操作する方法について解説します。どのサイトも断片的にしか説明していないため、本記事では変更作業からGoogle側へ反映するまでの一連の流れを手順書化して解説しています。★ 手順の流れ 1. 検索結果の表示を変更する コンテンツのタイト…

1300の優良サイトが選んだWeb制作のベストプラクティス集

Web制作/開発に関わっていると、自分のやり方は本当に正しいのかと疑問に感じることはないでしょうか?Webの技術は目まぐるしい速度で進化していますが、そのノウハウは個人へ依存しているように思えます。体系的に学ぶにも、多くの学校ではツールや綺麗な作…

Internet Explorer 11のユーザエージェント問題 - 対策方法の全て

Internet Explorer11へアップデートされてから1ヶ月。多くのWebアプリが動作不良を起こし、混乱が生じているようです。IEは11から、「User Agent スニッフィング」と呼ばれる手段で、Webブラウザに依存した作り込みが行われることを防ぐため大胆な仕様変更を…

IE11のユーザエージェント問題 - 開発者側でできる対策 (判定方法の変更/互換性モードの利用)

既存のWebサイト・システムがIE11で動作しない場合、ユーザエージェントの観点では以下の何れかで対策が可能です。 navigator.userAgent文字列からの判定 HTMLドキュメント内から、互換性モードの操作 上記の対策はどちらも、"課題"があります。近年のWeb開…

IE11のユーザエージェント問題 - ユーザ側でできる解決策 (互換表示機能の利用)

IE11でのみWebサイト・システムへアクセスできない場合、以下の問題が考えられます。 サーバ側でIE11からのアクセスを拒否している。 IE11のレンダリングエンジンに問題があり利用できない。 以下の対策で、改善される可能性があります。 1. サーバ側でIE11…

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によってデータを動的に取得する仕組みのも…

現実指向コーディング 〜Web標準やブラウザ仕様に負けない、現実的な方法を模索する〜

★ 最新の機能が使いたいんだけど・・・ HTML5の登場で、既存の機能にも置き換えが進んでいます。とはいえ、古いIEがシェアを得てしまっている現状を鑑みると、いきなり新しいWeb標準を使うわけにもいきません。古いIEのために、Shim/Polyfillと呼ばれるライ…

OSSな開発・制作ツールを使いこなすための一夜漬けノート

やたらといっぱいあって、覚えるのが面倒なWebの開発/制作ツールたち。やつらを、いかにして最短ルートでマスターするかについて考え、記事にしてみます。コンテンツはこれから、、増えるはずです。 ★ a. OSSの開発ツール オープンソースのJavaScriptライブ…

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

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

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

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

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

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

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

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

1300の優良サイトが選んだ「AMD・遅延ロード」のベストプラクティス

1300の優良サイトが選んだシリース、第3回は「AMDと遅延ロード」です。JavaScriptファイルのロードのパフォーマンス向上を図るメカニズムを「AMD(Asynchronous module definition)」といいます。Webアプリ開発を行なうデベロッパの方は、今後重要な知識にな…

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

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

1300の優良サイトが選んだ「PNG Fix」のベストプラクティス

ネット上の優良1300サイトを調査してみたシリーズ、第一回はPNG Fixです。IE5.5-6はPNGフォーマットを表示できますが、アルファ値(透明度)は正しく反映されない仕様です。また、IE7-8のPNG表示では、半端なアルファ値が正しく表示されない等の問題を持ちま…

ナビゲーションバーを作るためのベストプラクティス(clearfix法とinline-block法)

横並びのブロック要素の作成はWeb技術入門者にとっての最初の難関であり、その考え方を理解するのに多くの時間を要します。テーブルレイアウトに逃げてしまう元凶でもあります。ボタンを左から右に向かって並べるナビゲーションバーなんて、まさにその好例で…

クロスブラウザ対応を助ける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月現在はリン…

CSSのロードタイミングの不備が引き起こす、FOUCとは?

FOUC(Flash of Unstyled Content)とは、Webページへアクセスした直後、CSSによるデザインが有効でないページが一瞬だけ表示される現象のことです。まず、下の例をご覧下さい。 <html> <head> <meta charset="utf8" /> <title>Example</title> <link rel="stylesheet" href="hoge.css" type="text/css" /> </head> <body> ・・・ </body> </html> この例では、CSSの外部ファイルをhead要素内から呼び出…