SHOEISHA iD

パスワードを忘れた場合はこちら

※旧SEメンバーシップ会員の方は、同じ登録情報（メールアドレス＆パスワード）でログインいただけます

  • 新規
    会員登録
  • 新規会員登録

ニュース

記事

デブサミ・デブスト

講座

書籍

新着記事一覧を見る

連載記事

人気記事の執筆者

ZOE

中島 佑馬

大西 武

WINGSプロジェクト 山内 直

水無瀬 あずさ
イベント
イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

講演資料・動画まとめページ

Developers CAREER Boost 2024 講演資料まとめ

Developers X Summit 2024 講演資料まとめ

Developers Summit 2024 KANSAI 講演関連資料まとめ

Developers Summit 2024 Summer 講演資料まとめ

Developers Boost 2024 講演資料まとめ

Developers Summit 2024 講演資料まとめ

CodeZine BOOKS（コードジン・ブックス）は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。

書籍に関する記事を見る

'); googletag.cmd.push(function() { googletag.pubads().addEventListener('slotRenderEnded', function(e) { var ad_id = e.slot.getSlotElementId(); if (ad_id == 'div-gpt-ad-1659428980688-0') { var ad = $('#'+ad_id).find('iframe'); if ($(ad).width() == 728) { var ww = $(window).width(); ww = ww*0.90; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/728+","+ww/728+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/728+","+ww/728+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/728+","+ww/728+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/728+","+ww/728+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(90*ww/728)+"px;width:"+728+"px;}", 0 ); } else { if ($(window).width() < 340) { var ww = $(window).width(); ww = ww*0.875; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/320+","+ww/320+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/320+","+ww/320+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/320+","+ww/320+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/320+","+ww/320+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(180*ww/320)+"px;width:"+320+"px;}", 0 ); } } } }); }); } else { document.write('
'); document.write('
'); }
クロスブラウザスクリプトの作成テクニック

ブラウザごとのwindowオブジェクトの違いを理解する

クロスブラウザスクリプトの作成テクニック 第10回

  • X ポスト
  • このエントリーをはてなブックマークに追加

ダウンロード サンプルファイル (13.7 KB)

　ブラウザの種類やバージョン、ブラウザ独自の実装の違いを考慮し、異なるブラウザで同じように動作するスクリプトを「クロスブラウザスクリプト」と言います。最終回となる今回は、ブラウザによる「windowオブジェクト」の違いについて見ていきます。  

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

　Webブラウザ（以下、ブラウザ）の種類やバージョン、各々のブラウザ独自の実装の違いを考慮し、同じように動作するスクリプトを「クロスブラウザスクリプト」と言います。ここでは、クロスブラウザスクリプトを実現する方法について、順を追って解説してきています。

　本来のJavaScriptの理想的な姿として、一つのスクリプトを書けば、JavaScriptをサポートしたブラウザであれば、同じように動くべきなのでしょう。しかし、ブラウザによって細かな実装の違いがあるため、クロスブラウザスクリプトのテクニックが必要となってきます。

　現在一般的に使われているブラウザである、Internet ExplorerやFirefox、Opera、Safariなどでは、それらのブラウザの積極的なDOMサポートのおかげで、以前ほど多くの実装の違いはなくなってきています。しかしそれでも、JavaScriptの中でも比較的よく使われているeventオブジェクトとwindowオブジェクトには、多くの実装の違いが存在します。

　その中で前回は、eventオブジェクトのブラウザによる実装の違いについて解説しました。今回は、残りのwindowオブジェクトの実装の違いについて解説していきたいと思います。

コンテンツ表示領域の取得方法

　JavaScript1.2では、ウインドウの外周やウインドウの内周、つまりウインドウ内のコンテンツ表示領域のサイズの値を取得する、次のようなプロパティが追加されました。

高さと横幅の値を持つwindowオブジェクトのプロパティ
innerHeight	//ウィンドウ内周(コンテンツ表示領域)の高さ
innerWidth	//ウィンドウ内周(コンテンツ表示領域)の横幅
outerHeight	//ウィンドウ外周の高さ
outerHeight	//ウィンドウ外周の横幅

　これらのプロパティは、JavaScript1.2に対応したブラウザの中でも、Netscape Navigator4.X以降のNetscape、Firefoxを始めとしたMozilla系ブラウザ、Opera、Safariでは対応していますが、Internet Explorerでは対応していません。しかし、コンテンツ表示領域のサイズの値に関しては、Internet Explorerでも次の用法を使えば取得することができます。

要素の高さと横幅の値を持DOM属性
document.body要素.clientHeight	//クライアントの高さ
document.body要素.clientWidth	//クライアントの横幅

　clientHeight、clientWidthはDOM属性です。このうちclientHeightは設定したHTMLタグ要素の高さの値を、clientWidthは設定したHTMLタグ要素の横幅の値をそれぞれ持っています。Internet Explorer4.X以降のInternet Explorerや、Firefoxを始めとしたNetscape6以降のMozilla系ブラウザ、Opera、Safariは、ブラウザ自身がDOM化されています。このためそれらのブラウザでは、clientHeight属性、clientWidth属性から、JavaScriptを使って値を取得することができます。つまり、body要素からJavaScriptを使ってclientHeight属性、clientWidth属性の値を取得することにより、innerHeightプロパティ、innerWidthプロパティと同じ、コンテンツ表示領域の高さと横幅の値を取得できるのです。

　次のサンプルは、JavaScriptのinnerHeightプロパティ、innerWidthプロパティとDOMのbody要素のclientHeight属性、clientWidth属性の値をそれぞれ取得し、書き出しています。

Sample/sample_1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Sample_1</title>
<style type="text/css">
<!--
body { background-color: #ffffff; }
-->
</style>
</head>
<body>
*コンテンツ表示領域の高さ、横幅
<p>
<script type="text/javascript">
<!--
document.write("コンテンツ表示領域の高さ(innerHeight)：");
document.write(window.innerHeight);
document.write("<br>");
document.write("コンテンツ表示領域の横幅(innerWidth)：");
document.write(window.innerWidth);
//-->
</script>
</p>
<p>
<script type="text/javascript">
<!--
document.write("body要素の高さ(clientHeight)：");
document.write(document.body.clientHeight);
document.write("<br>");
document.write("body要素の横幅(clientWidth)：");
document.write(document.body.clientWidth);
//-->
</script>
</p>
</body></html>
JavaScriptのプロパティの値もDOMのbody要素から取得した値も同じ値となる。
JavaScriptのプロパティの値もDOMのbody要素から取得した値も同じ値となる。

　サンプルの実行結果を見てみると、innerHeightプロパティとclientHeight属性、innerWidthプロパティとclientWidth属性が、それぞれ同じ値になっていることが分かると思います。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
DOM属性を使ってbody要素から値を取得する時の注意

NEXT

この記事は参考になりましたか？

  • X ポスト
  • このエントリーをはてなブックマークに追加
クロスブラウザスクリプトの作成テクニック連載記事一覧

もっと読む

この記事の著者

半場 方人（ハンバ マサヒト）

Netscape2.XでJavaScriptに初めて出合ったころ、「なぜJavaScriptの日本語の書籍が無いんだ」、とあちこちで嘆いていたら、じゃあおまえが書け、とお声がかかり、JavaScript関連の書籍を執筆するようになる。執筆に際していつも考えるのは、「JavaScript初心者だった頃の気持ちを忘れないよに」、ということ。主な著書は、「標準Webデザイン講座　JavaScript＆Ajax」(翔泳社)などがある。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事

この記事は参考になりましたか？

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine（コードジン）
https://codezine.jp/article/detail/3065 2008/10/16 14:00
" ); }

おすすめ

アクセスランキング

  1. 1
    NVIDIA、AIスーパーコンピューター「Project DIGITS」を発表 NEW
  2. 2
    Meta社開発のSSG、「Docusaurus 3.7」リリース NEW
  3. 3
    大企業を芯からアジャイルに──20年以上アジャイル実践してきた市谷氏が語る変革への道
  4. 4
    ガントチャートをWebアプリに組み込める「ガントシート」でプロジェクト管理機能を作成してみよう
  5. 5
    アジャイル開発の推進において、必ずしも"すごい人"は必要ない──現場のエンジニアがDevOps推進で実現する組織改革
  1. 6
    【成長するための1on1完全攻略術】意義を理解して効果的なミーティングを行うための準備をしよう！ NEW
  2. 7
    Renewer、Tips集「生成AI × 勉強法ガイドブック 2025」を公開
  3. 8
    より良いプロダクトを作り続けるために ――ソフトウェアエンジニアのための3つのキャリア構築マインドセット
  4. 9
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  5. 10
    Node.js v23.6.0 リリース、TypeScriptの実行が容易に

アクセスランキング

  1. 1
    NVIDIA、AIスーパーコンピューター「Project DIGITS」を発表 NEW
  2. 2
    Meta社開発のSSG、「Docusaurus 3.7」リリース NEW
  3. 3
    大企業を芯からアジャイルに──20年以上アジャイル実践してきた市谷氏が語る変革への道
  4. 4
    ガントチャートをWebアプリに組み込める「ガントシート」でプロジェクト管理機能を作成してみよう
  5. 5
    アジャイル開発の推進において、必ずしも"すごい人"は必要ない──現場のエンジニアがDevOps推進で実現する組織改革
  6. 6
    【成長するための1on1完全攻略術】意義を理解して効果的なミーティングを行うための準備をしよう！ NEW
  7. 7
    Renewer、Tips集「生成AI × 勉強法ガイドブック 2025」を公開
  8. 8
    より良いプロダクトを作り続けるために ――ソフトウェアエンジニアのための3つのキャリア構築マインドセット
  9. 9
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  10. 10
    Node.js v23.6.0 リリース、TypeScriptの実行が容易に
  1. 1
    アジャイル開発の推進において、必ずしも"すごい人"は必要ない──現場のエンジニアがDevOps推進で実現する組織改革
  2. 2
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  3. 3
    ガントチャートをWebアプリに組み込める「ガントシート」でプロジェクト管理機能を作成してみよう
  4. 4
    1/10まで全文無料公開、人気の入門書シリーズ『いきなりプログラミング Androidアプリ開発』
  5. 5
    デスクトップアプリ開発に必要な「Rust」の文法を理解しよう
  6. 6
    "けしからん"精神が切り拓く未来──IPA登氏が語る、技術大国・日本が目指す復活戦略
  7. 7
    Google、社内AIエージェント「Google Agentspace」発表
  8. 8
    JavaScriptのWebフレームワーク、「Astro 5.1」リリース
  9. 9
    「CUDA」　～マンガでプログラミング用語解説
  10. 10
    テストは増え続ける、でもボトルネックにはできない──テスト効率化の2つのカギを朱峰 錦司氏が解説！

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

メールバックナンバー

アクセスランキング

  1. 1
    NVIDIA、AIスーパーコンピューター「Project DIGITS」を発表 NEW
  2. 2
    Meta社開発のSSG、「Docusaurus 3.7」リリース NEW
  3. 3
    大企業を芯からアジャイルに──20年以上アジャイル実践してきた市谷氏が語る変革への道
  4. 4
    ガントチャートをWebアプリに組み込める「ガントシート」でプロジェクト管理機能を作成してみよう
  5. 5
    アジャイル開発の推進において、必ずしも"すごい人"は必要ない──現場のエンジニアがDevOps推進で実現する組織改革
  1. 6
    【成長するための1on1完全攻略術】意義を理解して効果的なミーティングを行うための準備をしよう！ NEW
  2. 7
    Renewer、Tips集「生成AI × 勉強法ガイドブック 2025」を公開
  3. 8
    より良いプロダクトを作り続けるために ――ソフトウェアエンジニアのための3つのキャリア構築マインドセット
  4. 9
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  5. 10
    Node.js v23.6.0 リリース、TypeScriptの実行が容易に

アクセスランキング

  1. 1
    NVIDIA、AIスーパーコンピューター「Project DIGITS」を発表 NEW
  2. 2
    Meta社開発のSSG、「Docusaurus 3.7」リリース NEW
  3. 3
    大企業を芯からアジャイルに──20年以上アジャイル実践してきた市谷氏が語る変革への道
  4. 4
    ガントチャートをWebアプリに組み込める「ガントシート」でプロジェクト管理機能を作成してみよう
  5. 5
    アジャイル開発の推進において、必ずしも"すごい人"は必要ない──現場のエンジニアがDevOps推進で実現する組織改革
  6. 6
    【成長するための1on1完全攻略術】意義を理解して効果的なミーティングを行うための準備をしよう！ NEW
  7. 7
    Renewer、Tips集「生成AI × 勉強法ガイドブック 2025」を公開
  8. 8
    より良いプロダクトを作り続けるために ――ソフトウェアエンジニアのための3つのキャリア構築マインドセット
  9. 9
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  10. 10
    Node.js v23.6.0 リリース、TypeScriptの実行が容易に
  1. 1
    アジャイル開発の推進において、必ずしも"すごい人"は必要ない──現場のエンジニアがDevOps推進で実現する組織改革
  2. 2
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  3. 3
    ガントチャートをWebアプリに組み込める「ガントシート」でプロジェクト管理機能を作成してみよう
  4. 4
    1/10まで全文無料公開、人気の入門書シリーズ『いきなりプログラミング Androidアプリ開発』
  5. 5
    デスクトップアプリ開発に必要な「Rust」の文法を理解しよう
  6. 6
    "けしからん"精神が切り拓く未来──IPA登氏が語る、技術大国・日本が目指す復活戦略
  7. 7
    Google、社内AIエージェント「Google Agentspace」発表
  8. 8
    JavaScriptのWebフレームワーク、「Astro 5.1」リリース
  9. 9
    「CUDA」　～マンガでプログラミング用語解説
  10. 10
    テストは増え続ける、でもボトルネックにはできない──テスト効率化の2つのカギを朱峰 錦司氏が解説！