Draft)のお話です。Moduleは既存のブラウザの実装をベースとして,その細かな違いを吸収して一つの標準仕様としてまとめあげることを目標として策定が進められています。この仕様を学ぶことで,「⁠現在の実装がどうなっているのか⁠」⁠,「⁠将来的にどういった実装になる予定なのか」ということを知ることができます。今後大きな変更がある可能性はありますが,現状を整理するうえで重要な仕様なので詳しく見ていきたいと思います。Model)のCSS版といえる仕様です。CSSOM自体はこの連載の第10回で扱った内容が相当します。ModuleはCSSOMから派生して,ドキュメントの見た目の解析・操作を提供する仕様となっており,特に要素の位置情報を扱ったAPIが定義されています。実際にブラウザごとに細かな違いがあるため,クロスブラウザ対応において大きな障害となりやすい部分です。Moduleでは,これらのAPIを統合して,高い互換性を実現することを目標としています。ModuleでどういったAPIが定義されているのか見てみましょう。Moduleで定義されているAPIは次のとおりです。AbstractViewインターフェース名前のとおり,最も抽象的なインタフェースで,APIはありません。DocumentViewとMediaが継承しています。MediaインターフェースMediaQuery用のインターフェースです。ScreenViewインターフェース視覚的なメディア表現用のインターフェースです。viewがこのインターフェースを実装しています。viewというのはつまりwindowオブジェクト(ウェブブラウザにおけるグローバルオブジェクト)のことです。Screenインターフェース出力デバイスのスクリーンの情報を扱うインターフェースです。ScreenViewがブラウザウィンドウ側の情報なのに対して,Screenはモニタ側の情報を扱います。DocumentViewインターフェースDocumentViewインターフェースはdocumentオブジェクト用のインターフェースです。DOMとの連携において有用なAPIが定義されています。Coreで定義されているElementインターフェースの拡張APIが定義されています。HTMLとHTML5で定義されているHTMLElementインターフェースの拡張APIが定義されています。Rangeで定義されているRangeインターフェースの拡張APIが定義されています。Eventsで定義されているMouseEventインターフェースの拡張APIが定義されています。簡単に言えば,まず一番外側にモニターがあって,その位置情報を持っているのがScreenインターフェース(screen)です。モニターの中にはブラウザのウィンドウがあります。その位置情報はScreenViewインターフェース(window)がもっています。ブラウザの中にはウェブページがあります。ページの位置情報を持っているのもやはりScreenViewインターフェース(window)です。ウェブページの中には要素があり,要素の位置情報を持っているのはElementインターフェースとHTMLElementインターフェースです。特定の範囲についての位置情報を扱うRangeに,マウスイベントなどの位置情報を扱うインターフェースがあります。順番に各インターフェースを見ていきましょうスクリーンの位置情報モニターについての情報はグローバル変数のscreenオブジェクトから取得できます。pixelDepthの6つです。availHeightはタスクバーなどで隠れていない使用可能なサイズを表しています。availTopという独自プロパティも対応しており,どの部分にタスクバーなどがあるか推測することができます。IEは独自のプロパティをいくつか持っており,次のようなオブジェクトになっています。1600}ウィンドウの位置情報ウィンドウの位置情報はwindowオブジェクト,すなわちグローバルオブジェクト自身から取得できます。Viewで定義されているプロパティ・メソッドは次のとおりです。outerHeight;innerWidth・innerHeightはブラウザの内側の表示領域を表します。この値はスクロールバーを含まない点に注意が必要です。はみ出してしまいます。outerWidth・outerHeightはブラウザのウィンドウ全体のサイズを表します。6~8は対応していません。pageXOffset・pageYOffsetは表示領域において,ページのスクロール量を表します。ページを100pxだけスクロールしていたら100を返します。FirefoxやSafariとChromeはscrollX・scrollYという独自プロパティでも同じ値を取得することができます。6~8は対応していません。screenX・screenYはモニターを基点としたブラウザウィンドウの位置を表します。6~8は対応していませんが,screenLeft・screenTopで同様の値を取得することが可能です。scroll・scrollTo・scrollByはページを移動するメソッドです。scrollとscrollToはまったく同じ動作で,引数に渡したx座標,y座標に直接移動します。scrollByは引数に渡した値の分だけ現在の位置から移動します。こちらはIEを含めたブラウザで使用できます。CSSOM著者プロフィール太田昌吾(おおたしょうご,ハンドルネーム:os0x)1983年生まれ。JavaScriptをメインに,HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。Expertとして活動を開始。2019」を開催しました。DAY1・DAY2の様子を注目セッションとともにお伝えします。LINEのエンジニア3名がイベントに先駆けて見どころを紹介します。コードの安全性・安定性を高める開発サイクル~テスト管理の効率を上げ,脆弱性診断を自動で行う~本連載では,連載「業務を改善する情報共有の仕掛け」を受けつつ,安全性・安定性を加えた開発サイクルについて考えていきます。若者世代から圧倒的な人気を誇るライブ配信&動画投稿コミュニティアプリ「MixChannel」(ミクチャ)の裏側(レコメンドシステムやサーバサイド開発など)について解説していきます。その他の連載CSS3アニメーションでつくるインターフェイス表現CSS3によるアニメーション表現を紹介していきます。その中でも,幅広い読者に応用してもらえるだろうインターフェイスを主なお題とします。MySQL道普請便り本連載では,MySQLを使ったアプリ開発・運用に関するノウハウをご紹介していきます。RecipeUbuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。JavaScriptセキュリティの基礎知識JavaScriptに関するセキュリティ上の問題はどこで発生し,どうすれば防ぐことができるのか?について解説していきます。〜システムをきちんと運用するための基礎知識システムは「作って終わり」ではなく,運用の中でさまざまな問題が発生します。問題の発生に備えて事前にどのような対応をしておくべきなのか,問題発生時に何をしなければならないのか,ポイントを解説していきます。きたみりゅうじの聞かせて珍プレーソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。Linuxのメンテナンスの傍ら,Linuxやオープンソースソフトと日々を過ごす著者が,その魅力とつきあい方を,エッセイ風味でお届けします。PRESS特別編集部員,さわやか笑顔のスーパーハカーはまちちゃんとネット大好き14歳わかばちゃんが,毎号,読者の皆さんから寄せられたおたよりを紹介します。皆さんの日頃の悩みにも答えちゃいますよ。]メールでのお知らせメールで次の案内をお送りしております。メールの配信を希望する方は,利用したい項目をチェックしてメールアドレスを入力し,[登録]ボタンをクリックしてください。UPDATES[ほぼ週間に1回]新刊メールマガジン[ほぼ週間に1回]電脳会議の各号案内[ほぼ1ヵ月半に1回]※変更する場合や停止する場合は,登録情報変更ページをご覧ください。※登録いただいたメールアドレスには,そのお知らせ以外,配信いたしません。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。