Mozilla Japan ブログ

Mozilla、Firefox、Firefox OS、Thunderbird の最新情報をお伝えします

個別記事アーカイブ

Developer Edition 44:新しいスタイル調整機能とメモリー管理ツール

[この記事は、米国 Mozilla の Hacks Blog に掲載された "Developer Edition 44: New visual editing and memory management tools." の抄訳です]

今月で Firefox Developer Edition は1周年を迎えます。これを記念して、既存の機能の性能を向上はもちろん、たくさんの新機能が搭載されたアップデートを公開します。これにより、より視覚的に、直感的な操作で Web の開発が行えるようになりました

Web がデスクトップで閲覧する静的なものから、より動的で、インタラクティブに、そしてモバイルでの利用を重視したものになるにつれて、アニメーションをデザインに組み込むビジュアルデザイナーは増えつつありまります。そして Firefox Developer Edition の最新版に、簡単に手際よくアニメーションを利用したデザインを行うためのツールが組み込まれました。これらのツールを使えば、これまで技術的に高度で複雑だったアニメーションを、直感的に操作、編集できます。このツールを利用するのは、プログラマではなくアニメーターです。彼らにとって使い勝手の良いツールを目指しました。

DevTools Challenger

新しいツールを理解するには、使ってみるのが一番です。新しい開発ツールを、試して学べるサイトを作成しました。それが Devtools Challenger です。Web アニメーション開発の第一人者である Rachel Nabors の協力のもと作成されたサイトには、様々なチャレンジが設定されています。これらをこなしながら、ページをスクロールし、海底を目指しましょう。

DE1-Challenger.png

アニメーションツールと CSS フィルタツール

インスペクタのアニメーションパネルを利用すると、ページ上のアニメーションををれぞれ再生、一時停止、早送りといった操作ができ、アニメーションの様子を可視化できます。アニーメションツールがインスペクタと統合されたことによって、アニメーションの全体の調整と、要素レベルにトリルダウンした調整の両方を簡単に行えます。

DE2-Loaders-CSS.png

調整したアニメーションの不備は、3 次ベジェ曲線エディタで確認できます。このエディタは、確認したい要素を選んだら 1 クリックで起動できます。

DE3-3次ベジェ.png

アニメーションツール以外にも、CSS フィルタ用のツールも搭載されています。アニメーションツールと同様のインタフェースを持っており、フィルタの追加・削除・並び替え・調整が可能です。

DE4-CSSフィルターツール.png

長さと色の調査

ページレイアウトを微調整するための新ツールが 2 つ搭載されました。ブラウザの端に表示できるルーラーと、ドラッグで指定された領域の大きさを測る機能です。これらを利用することで、ページ全体や、ページ内の要素の大きさを測ることができ、デザインの調整が大きく助かるでしょう。

DE5-ルーラー.png

カラーインスペクタは、カラー表記を切り替えられるようになりました。CSS に記述された通りに表示されている色を、Hex、RGB、HSL での表記に切り替えられます。切り替えは、Shift キーを押しながら色サンプルをクリックすることで行います。またページの他の要素から色をコピーできるスポイトツールも備えています。

メモリ仕様状況のスナップショット取得

フロントエンドエンジニア向けのツールとして、メモリパネルを搭載しました。これを利用することで、ページが割り当てられて確保したメモリ領域を確認し、メモリの効率化を図ることができます。このツールはヒープの状態のスナップショットを取り、保持しているオブジェクトの種類、メモリが確保されたプログラム上の場所、処理系の内部表現といった視点から、ドリルダウンを用いた細かい粒度での確認を行えます。この他にも、まだまだたくさんの機能を開発しています。

DE6-メモリツール.png

Websocket Debugging API

最後に、Firefox では WebSocket Frames をモニタリングする API が利用可能になりました(Bug 1203802)。これは WebSocket 用のインスペクションツールへの第一歩となります。Developer Tools のエンジニア Jan Odvarko によって、WebSocket のトラフィックを監視する実験的なアドオンも制作されました。

DE7-Websocket.png

Firefox Developer Editionは firefox.com/developer からダウンロードできます。また、Firefox Developer Edition に関するご意見やご感想は以下、Hacks Blog のコメント欄、もしくは Twitter の @FirefoxDevTools までお願いします!

前後の記事

前の記事: Mozilla がオープンソースサポートプログラムを発表
次の記事: Firefox がより強力なプライベートブラウジングの提供を開始