忍者ブログ
雇われるだけの人生から目指せ独立、社会人2年目なゲーム脳SEのブログ。更新頻度=週2~3回。
[206]  [205]  [204]  [203]  [202]  [201]  [200]  [199]  [198]  [197]  [196
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

引き続きGoogle App Engine上でアプリケーションを作成しています。
前回のエントリーの地点で画面のレイアウトはほぼ出来ているのですが、一つだけ物足りない点があります。
それは「中央ペインのサイズがリサイズできない」ことです。
私のイメージとしては、右側に幅300ピクセルの情報表示バーを出して、中央のメイン表示部分のサイズはウィンドウのサイズに応じて自在に変化するようなつくりにしたかったのですが、どうもうまくいきません。

これはどうやらCSSだけではなくてJavaScriptを用いて解決しなくてはならない問題のようです。

JavaScriptをプロジェクトの中で使うときに、一番気になるのが「名前空間の衝突」です。
たとえば今回のケースでは、中央ペインのサイズを変更するJavaScript関数を作るわけですから、「resize_center_pane」とかそういう感じの名前をつけたくなります。ですが、「resize_center_pane」なんてありがちな名前、世界のどこかの人が必ず別の場所で使っているわけです。すると同じ名前で別の関数が定義されますから、妙な動作が起きてしまいます。

これを防ぐために、Javaではパッケージの仕組みがあり、Pythonではモジュールの仕組みがあるのですが、JavaScriptではそういう仕組みが一切ありません。・・・困りました。

と思ったらあっさり問題解決です。
めざせ生涯現役!: JavaScript と名前空間 
なるほど、JSONの記法を用いてJSONでもなんでもなくてタダのオブジェクトの作成時に使う決まり事記法だったみたいです・・・無知ですみません・・・新規にオブジェクトを作成して、その子要素として関数を持たせていけばいいわけですね。

早速真似してみました。

var HBenpitsu = {
	version: '0.1.0',
	author: 'akisute'
}

これでばっちりです!

さて、名前空間の問題が解決したところで、本題の「中央ペインのサイズを制御する」処理に入ります。
まずは右側ペインの横幅を外部CSSで定義します。
あとはwindow.onloadとwindow.onresizeのタイミングで、「中央ペインの横幅を、document.widthから右側ペインの横幅を引いた値にする」処理を追加してやればいいだけですね。
簡単楽勝。さっさとやっちまいましょう。

HBenpitsu.resize_pane_center = function() {
	var pane_center = document.getElementById("pane_center");
	var pane_right = document.getElementById("pane_right");
	var width_pane_right = String(pane_right.style.width);
	width_pane_right = width_pane_right.match(/\d+?/i);
	pane_center.style.width = 
	(document.width - parseInt(width_pane_right)) + "px";
}

ところが
これが
動きません!


Firebugを立ち上げて1行ずつデバッグしてみたのですが、なんと「var width_pane_right = String(pane_right.style.width)」の返り値がnullになっています!そんな馬鹿な!!何度CSSファイルを見直しても間違いなくwidthプロパティは定義されています。困りました。

調べること十数分、原因らしきものを発見です。
[暴満館] JavaScriptによるCSSの操作 
この長々としたソースコードと説明のなかに、
document.styleSheets[ sheetindex ].cssRules
こんな一文が出てきます。CSSを参照しているみたいですが・・・document.styleSheets?
Firebugで参照してみると、あ、あった。

TO000051.JPG

なるほど。外部CSSを参照するときにはこのdocument.styleSheetsを見る必要があって、Element.styleで参照しているのは、HTMLタグ要素のstyle属性だったんですね。勉強になりました。

原因もわかりましたし、外部CSSを参照するにはそれなりにテクニックが必要そうだということもわかりましたので、そろそろ外部JavaScriptライブラリを導入して、問題を解決してみようと思います。

 

PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
カレンダー
06 2017/07 08
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
ブログ内検索
最新コメント
[11/13 DSLR-A850]
[08/29 逆援助交際]
[08/23 クンニ]
[08/22 熟女]
[08/19 痴漢]
はてなブックマーク
プロフィール
HN:
akisute
性別:
男性
職業:
システムエンジニア
趣味:
ゲーム・東方・ニコ動。あと散歩。
バーコード
推奨環境

横幅900px以上、Firefox 3, Safari 3, Opera 9.5, Chrome 0.2以上。IE7ギリギリ対応。IE6未対応。

忍者ブログ [PR]