2010年9月16日木曜日

サイトリニューアル進捗報告(09/15現在)

昨日ある程度構築は進みました。
ただ、新URLを開設したとはいえ、まだアップロードして皆様にお見せするところまで進んでいないのが申し訳ありませんが。。急ぎます。。

昨日までにやったことをまとめます。:
・TOPページ(、目次ページ)が読み込まれた際、ユーザー側のPC環境の情報を取得して、それに応じて背景画像やボタン類の大きさを動的に変更する機能を実装した。
・より具体的、専門的に言えば、画面(orウィンドウ)サイズにより、読み込むCSS外部ファイル(ページのデザインに関する情報を集約化したデータシート)を動的に変えるという機能をJavaScriptで実装した。
・WingBrainとのデザイン・JavaScriptコード類の共用化、後の拡張性などを鑑み、ページのHTML本体からJavaScript部分、CSS部分をそれぞれファイルとして分離した(jsファイル、cssファイル)。

・特に、JavaScript(jsファイル)については、他との共用性の高いコード部分について、さらに個別に独立ファイル化し、元のJavaScriptコード(jsファイル)内から別のJavaScriptコード(jsファイル)を呼び出すようにした(これをJavaScriptの「動的ロード」などと言うらしい)。

・この動的ロードを実装するにあたり、ブラウザの仕様やバグ?などに起因して、色々な制約、問題があるらしく、思いつくままにコードを書いても初めは上手く動作しなかった。
・サイトで延々と調べた結果、いくつかの解決策を見出した。様々なサイトを閲覧して回ったが、一番の拠り所になりそうな情報源はこちらかなと思いました。:
 http://zombiebook.seesaa.net/article/22810383.html
 http://blog.clouder.jp/archives/000631.html
 http://k.kaeruspoon.net/articles/367
 http://blog.bornneet.com/Entry/114/(注:後から追記しました)
・専門的に言えば、createElementなる関数でscriptタグを生成して、その属性として動的に読みこむjsファイルのURLを指定すれば良いようである。ただし、チェーンメール状にjsから別のjsを読んで、そこからさらに…となる場合は、読み込みのタイミング制御などある程度高度な処理が必要になるらしい。

・他にもいくつかの方法があるようだが、古いブラウザでの対応や規格への準拠といった点も含め、色々と制約、問題がありそうなので、これらは避けることにしようと思います。:
 ①innnerHTMLで記述する方法
  http://jugem-fc2.qupi3.com/article/136557260.html
  http://d.hatena.ne.jp/shogo4405/20061207/1165479339
  http://d.hatena.ne.jp/takuya_1st/20071011/1192119134
  http://2-1b.com/archives/11
  http://lightningsheep.blogzine.jp/footprints/2009/01/innerhtml_b934.html

 ②document.writeで記述する方法
  http://okwave.jp/qa/q1482224.html
  http://d.hatena.ne.jp/susie-t/20061117/1163760218
  http://vip-audio.jugem.jp/?eid=87
  http://subtech.g.hatena.ne.jp/secondlife/20090606/1244254492

これら以外にも、参考材料として参照させていただいたサイトはいくつか(いくつも)ありますが、ここでは割愛させていただきます。
JavaScriptコードを試行錯誤的に書いて動作確認しつつ、これらのサイトで調べ上げていたら、あっと言う間に時間が過ぎてしまいました。
プログラミング言語全般的に言えることですが、JavaScriptも奥が深いです。きっちりやろうとすると、尚更…。
本当、言い訳なんですが。。

0 件のコメント:

コメントを投稿