Script Junkie の記事

CSS アーキテクチャ、パート 1: コード クリーンアップの原則と新しいベスト プラクティス 組織のスタイルシートの保守性を大幅に改善するには、堅牢な CSS を記述する基本手法をいくつか定めます。ただし、最終目標は、スケーラビリティが飛躍的に高まるように、特定サイトのスタイルシートの構造を決めることです。シリーズの初回にあたる今回は、クリーンで効率の良い CSS を記述するため絶対に不可欠な手法を取り上げ、次に、サイトのスタイルシートをレベルアップするため、ますます人気が高まっているスケーラブルな CSS アーキテクチャを実装するための準備について説明します。 Web ワーカーによる HTML5 のスレッド処理と IndexedDB によるデータ ストレージ 今回も引き続き HTML5 の機能に注目し、クライアント側アプリケーションの速度を上げる Web ワーカーと、HTML5 でのストレージの推奨アプローチである Indexed DB (クライアント側データ ストレージ メカニズム) を取り上げます。 HTML5 ビデオと履歴: ユーザーが実際に目にする機能 開発者は、ビューポート、HTML5 の新しいコントロール、地理位置情報といった新しい機能を使用して、スマートフォン、タブレット、および高度なブラウザーに、現在位置や地図を利用する機能や新しい入力コントロールを使った機能を組み込むことができます。この記事では、ユーザーが Flash のようなプラグインを使用しないでもビデオを視聴できる <video> タグと、AJAX アプリケーションでの簡単な移動を実現する HTML5 History オブジェクトの 2 つの機能について説明します。 HTML5 と SVG でゾンビの黙示録を生き延びる (パート 4): 動的SVG とパス アニメーション HTML5 の機能の中でも SVG はほとんど注目されていません。差し迫るゾンビの黙示録を何とか生き延びながら、楽しく魅力的なページの作り方を学びます。 HTML5 と SVG でゾンビの黙示録を生き延びる (パート 3): JavaScript で SVG を操作する HTML5 の機能の中でも SVG はほとんど注目されていません。差し迫るゾンビの黙示録を何とか生き延びながら、楽しく魅力的なページの作り方を学びます。 レスポンシブ Web デザインの一般的なテクニック レスポンシブ Web デザインに関するシリーズの第 3 回です。今回は、ユーザーのデバイスのコンテキストに対応するレイアウトをデザインし、実装するテクニックを調べます。グリッド レイアウト、帯域幅に応じた画像のサイズ変更、およびテキストとフォーム フィールドの最適化について取り上げます。 最新ソーシャル API の解明 (第 1 部): ソーシャルサインイン 複数のドメイン間で通信し、SkyDrive や Facebook といったソーシャル サイトのコンテンツと機能にアクセスする Web アプリでの OAuth 2.0、XHR 2、および REST の実装と関係について説明します。 CSS アーキテクチャ、パート 4: MetaCoax アプローチによる CSS のリファクタリング (フェーズ 3 と4) Denise Jacobs の CSS アーキテクチャー シリーズ 4 回目は、モジュール、パターン ライブラリ、スタイル ガイドなどを取り上げ、CSS リファクタリングに関する説明を終えます。 HTML5 データリスト: 概要と使用場面 HTML5 で追加されたデータリスト要素を使用すると、ユーザーにオートコンプリート オプションをネイティブに提供できます。今回は、データリストの概要、試用場面、制限事項、およびデータリストをサポートしていないブラウザーへの対応について説明します。 CSS アーキテクチャ、パート 3: MetaCoax アプローチによる CSS のリファクタリング (フェーズ 1 と2) CSS アーキテクチャ シリーズの 3 回目は、CSS をリファクタリングする方法について説明します。 HTML5 による Windows 8 アプリのビルド: 簡単な RSS リーダーを 30 分で作成する方法、第 2 部 この記事は、HTML5、CSS3、および WinJS (Windows 8 対象の Microsoft JavaScript フレームワーク) を使用して簡単な RSS リーダーを作成する方法について説明する 2 部構成のチュートリアルの第 2 回です。チュートリアルでは Windows 8 UI ガイドラインに従うように Expression Blend 5 を使用する方法についてもデモします。 HTML5 による Windows 8 アプリのビルド: 簡単な RSS リーダーを 30 分で作成する方法、第 1 部 この記事は、HTML5、CSS3、および WinJS (Windows 8 対象の Microsoft JavaScript フレームワーク) を使用して簡単な RSS リーダーを作成する方法について説明する 2 部構成のチュートリアルの第 1 回です。チュートリアルでは Windows 8 UI ガイドラインに従うように Expression Blend 5 を使用する方法についてもデモします。 Fabric.js の概要: 第 4 部 Fabric.js は HTML5 の canvas 要素を操作するために設計された JavaScript ライブラリです。Fabric.js の概要を説明する連載の第 4 部となる今回は、自由画、カスタマイズのテクニック、および Node.js と Fabric server の連携を取り上げます。 HTML5 と SVG でゾンビの黙示録を生き延びる (パート 2): テキスト、パス、および基本アニメーション HTML5 の機能の中でも SVG はほとんど注目されていません。差し迫るゾンビの黙示録を何とか生き延びながら、楽しく魅力的なページの作り方を学びます。 HTML5 と SVG でゾンビの黙示録を生き延びる この記事は、インライン SVG 要素 (画像、テキスト、図形、パスなど) を操作するための HTML5 サポートについて説明する連載の初回です。 Hand.js を使ってクロスブラウザー対応のタッチベースのジョイスティックを作成する この記事では、Hand.js ライブラリを使って、クロスブラウザー対応のタッチベースのジョイスティックを作成する方法について説明します。 CSS アーキテクチャ、パート 2: 最高のスケーラビリティを備えたモジュール方式のCSS アプローチ 最初の手順として適切なのは CSS を整理することです。しかし、最近人気が高まっているスケーラブルな CSS アーキテクチャで採用されている手法を当てはめても、サイトのスタイルシートをレベルアップできます。今回は、DRY CSS、OOCSS、SMACSS、および CSS for Grownupsを取り上げ、その実践手法、メリット、および成果について説明します。 対話型ナビゲーション バーをビルドする 基本的な HTML と CSS だけを使って、Web サイト用に対話型のナビゲーション バーをビルドします。このナビゲーション バーは、ユーザーが簡単に情報を見つけられ、サイトのユーザビリティが向上し、サイトのデザインにシームレスに適合します。 レスポンシブ Web サイトのエクスペリエンスをデザインする: スマートフォンの 4 インチ画面のコンテンツを 40 インチのテレビ画面に適合させる この記事は、レスポンシブ Web デザインに関する連載の第 2 部です。今回は複数のデバイスをターゲットにする Web サイトをデザインする際に適用できる概念を説明します。優れたレスポンシブサイト エクスペリエンスにする最初の手順として、サイトがさまざまなフォーム ファクターに対応するようにコンテンツ階層を計画することに注目します。 Web をレスポンシブ Web デザイン対応にする理由 この記事は、レスポンシブ Web デザインに関する連載の第 1 部です。この記事では、レスポンシブ Web デザインを使って、複数のデバイスでアプリを実行し、表示に一貫性を持たせるニーズに対処する方法について、ビジネス面および技術面から概説します。 タッチ操作とマウス操作の統一: Pointer Events を使用してクロスブラウザー タッチを実現する方法 開発者から Web 上でマルチタッチ入力に対処する統一性の高い方法についての質問を受けることがよくあります。この記事では、新しいマルチタッチ テクノロジと、クロスブラウザー サポートを適切かつ簡潔にするポリフィルを使ってブラウザー上でいくつか実験を行います。 jQuery UI を使ってカスタム ツールヒントを作成する jQuery UI の 1.9 リリースでは、ツールヒントをプログラミングしてカスタマイズできる機能を備えた Tooltip ウィジェットが提供されます。この記事では、昨今の複雑な Web アプリケーションを強化するために、ブラウザーのネイティブ ツールヒントを Tooltip ウィジェットに置き換える方法について説明します。 TypeScript: JavaScript アプリに生産性と管理の容易性を追加する — パート 2 TypeScript は、スクリプト開発者向けに構造や編成のソースとしての役割を果たす、JavaScript の強力なスーパーセットです。シリーズ第 2 回目のこの記事では、TypeScript を JavaScript と一緒に使用する方法、定義ファイルの作成、およびその他の高度なトピックについて説明します。 モバイル ゲーム入門 パフォーマンスの制限に対処する方法、ビューポートを最大にする方法、タッチベースのコントロールを処理する方法、デバイス固有のメタデータを追加する方法など、モバイル HTML5 ゲームのコードを最適化する方法について説明します。 TypeScript: JavaScript アプリの生産性を高め管理を容易にする TypeScript は JavaScript の強力なスーパーセットで、スクリプト開発者向けに構造やこーdの整理を可能にします。この記事では、クラス、モジュール、インターフェイス、タイプ セーフ性など、TypeScript の核となる考え方について説明します。 Fabric.js 入門: 第 2 部 Fabric.js は HTML5 の Canvas 要素を簡単に操作できるようにする強力な JavaScript ライブラリです。「Fabric.js 入門: 第 2 部」では、アニメーション、画像フィルター、テキスト オブジェクト、テキスト効果、およびイベントを取り上げます。 Fabric.js 入門: 第 1 部 Fabric.js は、HTML5 Canvas 要素上で図形や画像を作成および管理するためのシンプルな オブジェクト モデルを提供します。 Fabric.js 入門: 第 3 部 Fabric.js は HTML5 の canvas 要素を操作するために設計された JavaScript ライブラリです。Fabric.js の概要を説明する連載の第 3 部となる今回は、グループ、シリアル化、クラスという高度な機能を取り上げます。 他人のデータ、自分のセキュリティ: エンタープライズ対応のマッシュアップ アプリケーション このシリーズでは、マッシュアップ アプリケーションにまつわるセキュリティの問題を軽減する方法について調べていきます。この調査を進めながら、リスク管理、いつもの入力検証、最新ブラウザーの威力を活かして、架空の Contoso Corporation 向けにアプリケーションをビルドします。 他人のデータ、自分のセキュリティ: エンタープライズ対応のマッシュアップ アプリケーション (第 2 部) 今回は、信頼のレベルを定義し、それに基づいて校正することで、CORS 接続 (または任意の Ajax 接続) のデータを利用する方法を調べることから始めます。これを行うために、Project Silk で提供されているガイダンスを土台にビルドします。 他人のデータ、自分のセキュリティ: エンタープライズ対応のマッシュアップ アプリケーション (第 3 部) 最新のブラウザには、マッシュアップ アプリケーションのユーザーを保護できる多くの機能が組み込まれています。3 部シリーズの最終回は、宣言セキュリティや XSS フィルターなどの機能を操作する方法について説明します。 CSS3 セレクター入門、第 2 部: 状態ベース、ターゲット、および否定の擬似クラス この 2 部構成の連載の第 1 部では、ドキュメント ツリーにおける位置や他の要素との相対関係に従って要素をターゲットにする、CSS3 の新しい構造擬似クラスについて説明しました。今回は、CSS3 で導入された擬似クラスのうち、まだ取り上げていない状態ベース、ターゲット、および否定の擬似クラスについて説明します。 CSS3 セレクター入門、第 1 部: 構造擬似クラス 多くの開発者は id セレクターや class セレクターはすでに使い慣れています。また、以前のコラム「CSS のセレクターについて理解する」では、属性のセレクターのメリットを紹介しました。ただし、これ以外にも多くのセレクターがあります。この 2 部構成の連載では、構造擬似クラスを手始めに、CSS3 の新しいセレクターについて見ていきます。 HTML5 キャンバス ゲームの近代化: 第 2 部 オフライン、ドラッグ アンド ドロップ、File の各 API 第 1 部では、CSS の 3D 変換と遷移、およびグリッド レイアウトの使い方を紹介しました。今回は、オフライン、ドラッグ アンド ドロップ、および File の各 API の使い方を説明しながら、興味深い新たなアイデアをいくつか実装していきます。 HTML5 キャンバス ゲームの近代化: 第 1 部、ハードウェアによるスケール変換と CSS3 Internet Explorer 10 のような最新ブラウザーには、オフライン、ドラッグ アンド ドロップ、File の各 API など、興味深い HTML5 機能のいくつかが安定した状態で実装されています。こうした機能により、Web アプリケーションの世界に新たな時代が訪れ、斬新なゲーム シナリオをすぐに実現できるようになります。