今回はjavascript絡みの話題です。
あるサイトのリニューアルのひとつの目玉として、
「サイト全ページに新着情報が掲載されている。」
という、別段新鮮なことではないのですが、
やってみることになりました。
今回の新着情報は、
検索エンジンは気にしなくていいから、
デザイン重視で画像で文字を見せて欲しい、
とのご依頼でした。
更新作業のことを考えると、
該当箇所にiframeを入れて、
一つの新着情報ファイルを呼び込む、
というのが簡単な方法なのですが、
新着の項目が増えるとスクロールバーが出てきて、
ちょっとヤボな感じになってしまいます。
スクロールバーが出ないように、
その都度CSS で高さ幅を調整したりすることも可能ですが、
毎回となると、ちょっと面倒くさいかなーと思いつつ、
トップページ以外は、表示される項目は
別のスタイルでレイアウトされるようにしたいな、
などと、余計なことを考えてしまい...、
ここはひとつjavascriptで、
該当箇所に書き込むようにしよう、
との考えに至りました。
javascriptならば、書き込む内容は、
後々、如何様にも変化させられますし、
共用js ファイルを読み込ませておくだけで良くなるので、
読み込むファイルのパス（../の数）を気にしなくてもよいのが利点です。
ページ数が増えても怖い物ナシ。
javascript切ってる人って、いないよねー って決めつけつつ、
実行にとりかかりました。
最初は新着情報は一項目しか載せない（はずだった）ので、
まずは以下のように記述しました。
▽HTMLファイル（新着情報を表示させたい箇所）
<script type="text/javascript">
<!--
whatsnew();
-->
</script>
▽javascriptファイル
var nsImg = '000001.gif';
var nsAlt = '新着ネタその1';
var nsURL = 'http://www.hoge.com/news.html';
var nsDock = '<a href="' +nsURL+ '") ><img src="http://www.hoge.com/img/'+nsImg+'" alt="' +nsAlt+ '" /></a>'
function whatsnew(){
document.write(nsDock);
}
※"は特殊文字で半角のコーテーション「"」の意味です。
画像ファイル名、代換えテキスト（これはなくてもいいかも、と思いつつ）、
クリック後のURLをそれぞれ変数に格納して、
それを定型ソースにまとめたものを、
document.writeで書き出す、という、ものすごく単純なものですが、
うまく、該当箇所に画像文字が表示してくれました。
これで、更新時は、
画像の作成と、格納する内容を書き換えるだけでOK！
しかも全ページ更新してるみたいに見える〜
と、舞い上がっていましたが、
あろうことか（でもやっぱりなー）の、
新着情報の項目を二つ以上載せたい！
と、ご要望がグレードアップしてしまいました。
そこで、javascriptを以下のように変えてみました。
var max = 3;
var nsImg = new Array(max);
nsImg[0] = 'ここには記述しません。;
nsImg[1] = '000001.gif';
nsImg[2] = '000002.gif';
var nsAlt = new Array(max);
nsAlt[0] = 'ここには記述しません。';
nsAlt[1] = '新着ネタその1';
nsAlt[2] = '新着ネタその2';
var nsURL = new Array(max);
nsURL[0] = 'ここには記述しません。';
nsURL[1] = 'http://www.hoge.com/news1.html';
nsURL[2] = 'http://www.hoge.com/news2.html';
var nsDock = '<a href="' +nsURL[1]+ '") ><img src="http://www.hoge.com/img/'+nsImg[1]+'" alt="' +nsAlt[1]+ '" /></a><a href="' +nsURL[2]+ '") ><img src="http://www.hoge.com/img/'+nsImg[2]+'" alt="' +nsAlt[2]+ '" /></a>'
function whatsnew(){
document.write(nsDock);
}
なんとなく、スクリプトっぽい見た目になりましたが、
内容はとてもカンタンです。
まず、それぞれの変数を配列にします。
var nsAlt = new Array(max);
の、「new Array()」が、その配列化命令です。
()内には数字が入りますが、ここではmaxという別の変数に数字を代入することで、
maxだけ変えればOK〜 という状態にしています。
配列って、何かの本に「仕切りのついた箱をつくるようなもの」
的に書いてあったように思いますが、
このことで、変数名に [数字] をつければ、いくつもの分身の変数ができます。
配列は、何回もぐるぐると回って処理をする、ループ処理によく使われるのですが、
ここでは単に、いくつもの変数名を作るのがメンドイので、
数字によってわかりやすくしているだけのものです。
ともあれ、mac Safari、mac FF、win IE7.0、win FFと気持ちよく、
2つの新着情報の項目が画面に表示されてました。
が、
最近鬼門のwin IE 6.0で、またしてもひっかかってしまいました。
新着情報は、まったく表示されませんでした。
営業さんは待ってらっしゃるし、
対処法がわからず、焦りまくってました。
win IE 6.0 では、ブラウザ画面の左下に、javascriptのエラーを表示してくれます。
ダブルクリックすると、ソースの何行目にエラーの発生源があるか、教えてくれます。
しかし今回は、そのエラー行を見ても、全く何を意味するのかが、わからない〜。
（詳しい人なら、一発でわかるのでしょうけれど...）
こうなればデバッグ体制をとるしかない。と、
スクリプトやソースを少し削除しては、確認、少し削除しては、確認、の
作業を繰り返しました。
その結果、新たに加えた以下の記述を取り除くと
動くことが判明しました。
▽問題のjavascript部分
var nsTex = new Array(max);
nsTex[0] = 'ここには記述しません。';
nsTex[1] = '新着ネタその1';
nsTex[2] = '新着ネタその2';
フっと、他のスクリプトを参考にしていたときに、
各行の最後に「¥n」が、いっぱい入っていたことを思い出しました。
正規表現で「行末」を意味するものですが、試しに入れてみると
あ〜れ〜 動くではありませんか。
▽動いた！ javascript部分
var nsAlt = new Array(max);
nsAlt[0] = 'ここには記述しません。 ¥n';
nsAlt[1] = '新着ネタその ¥n';
nsAlt[2] = '新着ネタその2 ¥n';
javascriptでは基本中の基本なんでしょうけれど、
IE6.0においては、全角文字での文末に「 ¥n」が、必須なんでしょうね。
そのうち、閲覧環境はIE7.0以上になるでしょうから、
要らなくなるかもしれませんが、
「 ¥n」君には、汗をかかせてもらいました。
詳しい方なら、なーんだ、というような話で、
恥さらしな内容だろうと思いますが、
デザイナーな自分にとっては、
身をもって「 ¥n」パワーを知った次第です。
javascriptかじりかけの方は、
スクリプトが動かなくなったら、
「 ¥n」のことを、ぜひぜひ思い出してください。
タグ：javascript 新着情報
【CSSベースのHTMLコーディングの最新記事】
