レスポンシブ デザインの実践: IE10 に最適化されたバージョン cnBeta の誕生

過去 2 年間で、多くのインターネット製品が、さまざまなデバイスやブラウザの制限を克服するためにレスポンシブ デザインを適用し始めました。 IE10 のリリース以来、開発者を取り巻くさまざまな声が上がっています。レスポンシブ デザインの攻城兵器として、IE10 では、Web ソケット、Web ワーカー、履歴 API、ドラッグ API、ファイル API など、12 を超える HTML5 API のサポートが追加されました。完全なサポート リストを確認するには、Microsoft IE10 開発者ガイドにアクセスしてください。 HTML5 テクノロジーを使用して、従来のレイアウト サイトのウォーターフォール スタイルのレスポンシブ バージョンを迅速に開発する方法も、開発者の間で話題になっています。

cnBeta の IE10 最適化バージョン

最近、CSDNの記者がLogical Point Business Communication Design CompanyのプロジェクトディレクターであるZou Songbing氏（以下、Saber）にインタビューしました。彼らはcnBetaと協力して、HTML5テクノロジーをフルに活用し、IE10でタッチとウォーターフォールフローレイアウトをサポートする新しいバージョンを開発しました。国内ユーザーにまったく新しいニュース閲覧体験を提供するとともに、業界における HTML5 の応用に関する参考資料を提供することも期待されています。

CSDN レポーター: このプロジェクトの分担はどうなっていますか? 開発サイクルはどのくらいですか? 開発サイクルはどのように分割されていますか? 開発プロセス中にどのような問題が発生しましたか? 最も時間がかかったのはどの部分ですか? どのように解決しましたか?

Zou Songbing: プロジェクト開発チームは、メイン開発者 1 名、メインデザイナー 1 名、そしてアジャイル開発と迅速な反復を使用してプロジェクト全体を調整する 1 名の 3 名で構成されています。分業には主に、プロジェクト管理、インタラクション設計、UI 設計と開発の 4 つの部分が含まれます。開発プロセスには、最初のプロトタイプの構築から Web サイトの公開まで合計 1 か月半かかりました。開発サイクルは、プロトタイプの構築とページ要素の効果の実現に 1 週​​間、バックグラウンド データの処理に 3 日間、フロントエンドとバックエンドのデータ統合 (バックグラウンド データを処理してフロントエンドに表示する) に 3 日間、トップ 10 記事の実現に 1 週​​間、デバッグに 2 週間に分かれています。

開発で最も時間がかかるのは、さまざまなプラットフォームのデバッグです。遭遇する問題は、次の 3 つのカテゴリに分けられます。

1). 異なる解像度での断片化の問題

画面解像度が異なると、情報の表示方法も異なります。ページレイアウトや機能はそれに応じて調整する必要があります。このプロセスには多くの複雑な問題があります。たとえば、ブラウザの幅が560px未満の場合、記事操作バーが画面スペースを占有しすぎます。したがって、この状況に合わせて機能とインタラクション方法を再設計する必要があります（図1-1と1-2を参照）。

図1-1: ブラウザ幅 > 560px のアクションバースタイル

図1-2: ブラウザ幅<560pxのアクションバースタイル

開発で最も時間がかかるのは、さまざまなプラットフォームのデバッグです。遭遇する問題は、次の 3 つのカテゴリに分けられます。

プロトタイプの設計時にはこの点を考慮していなかったため、開発の後半でコード構造も調整す​​る必要がありました。これも、入念なプロトタイプ設計の重要性を思い出させてくれます。

2). ブラウザ互換性のデバッグ

特定のテクノロジーについては、特定のブラウザに独自の実装バージョンがある場合もあれば、まったく実装されていない場合もあります。例えば、モバイル版の Safari では記事ページの位置にいつも問題があります。これは、記事ページを表示するために記事の位置を計算するために CSS の calc を使用しているのですが、ブラウザが calc をうまくサポートしていないためです。最終的に、jQuery に切り替えて実装しました。

3). CSSのメンテナンスと拡張

Web アプリの構造が複雑になるにつれて、CSS ファイルのサイズも大きくなります。そのため、CSS の開発および保守コストを削減し、スケーラビリティを向上させるには、プログラム設計時にスタイル ファイルを計画することが非常に重要です。この問題を解決するために、SASS と Compass を使用します。 SASS は CSS3 の拡張言語です。CSS3 の構文と機能を備えているだけでなく、CSS のプログラミング性も強化されています。Compass は SASS をベースにしたフレームワークで、ブラウザの互換性やスタイルのリセットなどの問題を解決し、開発速度を向上させます。 SASS と Compass により、スタイル ファイルがより構造化されます。まず、スタイル定義の構造化です。SA​​SS では要素のスタイルをネストして定義できるため、子要素のスタイルを親要素で定義できます。これにより、スタイルの構造が一目でわかり、将来のメンテナンスや拡張に便利です。同時に、深いレベルの要素スタイルを正しく定義できるため、重複するコードを大量に記述する必要がなくなります。次に、ファイルの構造化です。たとえば、基本的なスタイル ファイルを定義し、ここにスタイルのリセットなどの基本的な設定コードを配置します。同時に、SASS は変数定義もサポートしているため、UI の色を変数として定義して配置できます。他のファイルでは、このファイルを "@import" で参照して変数を使用できます。このようにして、すべてのファイルに変更を適用できるグローバルな「構成ファイル」が作成されます。同時に、重要な HTML 要素のスタイル定義用に個別の SASS ファイルを作成し、検索や変更を容易にすることもできます。展開前に、Compass を使用してファイルをマージできます。

CSDN レポーター: IE10 は HTML5 をどこでサポートしていますか? このプロジェクトにどのように反映されていますか?

図1-3: 変換、回転、平行移動を使用してdiv-1を変形する

ページめくり効果をより立体的にするために、turnjs はグラデーションを使用してページめくりプロセスに影効果 (div-2) を追加します。影はページの変形に応じてリアルタイムで変化します。原理は、図 1-5 に示すように、グラデーションの終点をリアルタイムで計算することです。

図1-4: グラデーションを使用して生成された動的に変化する影の効果

MS Pointers API を使用して IE10 ジェスチャのサポートを追加することで、上位 10 件の記事に対して実際の本をめくるエクスペリエンスを実現できました。 IE10 のハードウェア アクセラレーション テクノロジの助けにより、大量の CSS3 変形、変位、角度変換の計算作業が GPU に転送され、ページめくりのプロセスがより自然でスムーズになります。

メディア クエリを使用して、さまざまなブラウザー幅に合わせて記事ページのレスポンシブ レイアウトを実装し、記事コンテンツ、コメント、記事アクション バーの異なるレイアウト スタイルを、1) 幅が 1230 ピクセルを超える場合、2) 幅が 1230 ピクセルから 560 ピクセルの場合、3) 幅が 560 ピクセル未満の場合に定義します。レスポンシブ レイアウトの最大の利点は、デバイスを考慮する必要がないことです。私たちのプロジェクトでは、デスクトップ ブラウザーの各幅の範囲で読むのに最適な記事のスタイルを設計し、その後、さまざまなモバイル デバイスに合わせて微調整し、機能を追加または削除するだけで済みます。その前に最も重要なタスクは、CSS をモジュール化することです。まず、変更されないスタイル プロパティを定義し、メディア クエリではそれらの可変プロパティのみを操作します。これは、開発とデバッグに非常に役立ちます。

CSDN記者：HTML5の今後の展開についてどうお考えですか？

Zou Songbing: 私たちは、Web サイトの構築でも Web アプリの構築でも、さまざまなプラットフォームに効率的に公開できるクロスプラットフォーム テクノロジーは HTML5、CSS3、JS だけであると考えています。 HTML5 では「一度書けばどこでも実行できる」という状況は実現できませんが、最適化する気さえあれば、クロスプラットフォーム開発全体は依然として非常に効率的です。これは、cnBeta の IE10 最適化バージョンを作成した際の私の経験です。

HTML5 設計の本来の目的は、Web サイトを、ローカル アプリケーションに匹敵する機能性と応答性を備えた真の Web アプリケーションにすることです。この考え方に従うと、HTML5 が現在のアプリ ストアのようなエコシステムを形成でき、競合できるかどうかが問題となります。最も重要なのは、HTML5 アプリはネイティブ アプリよりもユーザーにとって優れているかどうかです。その答えは、誰にもわかりません。しかし、ブラウザのパフォーマンスがどんどん強力になっていることがわかります。モバイル端末から移植された Cut The Rope や Contre Jour などのゲームを IE10 で体験できますし、メーリング グループでは Backbone.js を使用して大規模な Web アプリを構築する方法について数え切れないほどの人が議論しています。その発展を見てきましたが、振り返ってみると、さまざまなブラウザの実行効率、互換性、バグなどの問題に直面しなければなりません。これはサイクルです。開発者が問題に対して試行錯誤を続け、フィードバックを与えてこそ、プラットフォーム メーカーは改善方法を知ることができます。実行プラットフォームがより堅牢になって初めて、開発者はより優れたアプリケーションを開発し、より多くのユーザーを引き付けるようになります。したがって、HTML5 の今後の開発は私たち自身にかかっています。

HTML5 をサポートするのはブラウザーだけではないことは指摘しておく価値があります。Windows 8 はすでに HTML5 で構築されたローカル アプリケーションをサポートしているため、将来的には HTML5 と JS もローカル アプリケーション開発テクノロジになる可能性があります。

原題: レスポンシブデザイン実践: IE10 最適化版の誕生 cnBeta

キーワード: レスポンシブ、リアル、3 人、+1.5、月、IE10、最適化バージョン、cnBe、ウェブマスター、ウェブサイト、ウェブサイトのプロモーション、収益化