概要
Merry Pixmas: 3D CSS 変換でクリスマスを楽しもう。
好きな点
パソコンとモバイルで適切に機能する、クリスマスをテーマにしたデモ。さらに、新しいテーマカラーのサポートと、全画面表示で起動できるホーム画面用のウェブ マニフェストも用意されています。
活用のヒント: スマートフォンを振ると雪が降ります。
改善の余地あり
これはデモですが、アセットに指定されたキャッシュ ヘッダーと、レンダリング ブロックのない JavaScript を使用することで、認識される読み込み時間が大幅に改善された可能性があります。
Jim Savage 氏との Q &A
なぜウェブなのか
東京では、長きにわたってレスポンシブなモバイルウェブを提唱し、それよりもネイティブなウェブを追求してきました。Pixmas は、プロジェクト間のダウンタイム中に HTML5 と CSS3 のテストを実施した結果です。私たちは常に最新の知識を維持するために新しいことに挑戦しています。したがって、私たちのフロントエンド 開発チームは、ネイティブ プラットフォームではなくウェブに焦点を当てた調査を行っていました。
ブラウザの成熟に伴い、ネイティブに似た機能が増えています。位置情報、カメラアクセス、ローカル データベース ストレージなど、ネイティブ開発でしか利用できなかった機能はすべて、全体としてネイティブに近いユーザー エクスペリエンスを実現しつつ、クロス プラットフォームと迅速なイテレーション開発のメリットをもたらします。もちろん、ネイティブ開発にもメリットがあり、新しいプロジェクトに取り組む際には、ウェブとネイティブの両方のオプションについて多くの考慮事項があります。当然のことのように聞こえるかもしれませんが、お客様にとっては、あらゆるプロジェクトをコーディングの対象にするのではなく、ジョブに最適なプラットフォームを推奨することが重要です。
開発中に本当にうまくいった点は何ですか？
Pixmas の主眼は 3D 変換と、CSS をどの程度までプッシュできるかに重点を置いていたため、モザイク状のイラスト スタイルはブラウザでうまく機能し、フロントエンド デベロッパーなら誰でも、ブラウザの自然な動作は正方形にフレンドリーであるとわかります。したがって、全体的なスタイルと正方形の問題を中心とした 3D 数学がうまく機能しました。3D 変換と HTML を使ってキューブを作成するのは、他のプリミティブな形状よりもはるかに簡単です。しかし、その操作とアニメーションをスムーズに処理するには、試行錯誤が必要でした。
私たちが最も驚いたのは、モバイル プラットフォーム、特にあまり知られていない Android デバイスにおける 3D のスムーズさとブラウザ パフォーマンスでした。
アプリの改善に役立つ API があるとしたら、それはどのような API ですか？
Pixmas をもう一度記述する場合は、WebGL ベースの API を使用することになるでしょう。3D で HTML DOM 要素を CSS を使って操作するのは楽しかったですが、ウェブベースの 3D の真の力は WebGL のようなハードウェア アクセラレーションを備えた専用の技術でなければいけません。CSS 3D は、ウェブページの基本的なエフェクトやトランジションには適していますが、Pixmas のコーディング時にはブラウザのパフォーマンスに明らかな制限があります。
Google の Chrome Experiments で、優れた WebGL プロジェクトをいくつか公開しています。