REDLINE MAGAZINE | スペースは嫌、class付けるのも嫌な時用(追記有)

スペースは嫌、class付けるのも嫌な時用(追記有)

>>081210：追記　コメント欄にてもっといい書き方教えて頂きました！

タイトル、なんのこっちゃ？って感じなんですが、そういう時があるんです。例えば会社概要なんかをマークアップした時、定義リストとして書く際にdtに社名、所在地、電話番号・・・って入れるじゃないですか。そういう部分の元原稿って「社　名」みたいな感じで２文字の部分に予めスペースが入ってて見た目を整えてあるものが多いんですね。なんちゃって均等割り付けみたいな感じ。

ところがwebの場合、そういうのってhtmlに直接スペース入れられないじゃないですか。アクセシビリティ的にも文書的にも。もちろんデザイナ目線でのその部分の見た目を整えたい気持ちも分かるんですね。なのでCSSのletter-spacingで左右揃ってなくてもとりあえずなんとなく全部間隔あけとくか、チマチマと例外部分だけclass付けて左右がそれなりに揃うようにコントロールしてたんですけど、どうも要領悪い気がして・・・。

自分の場合、だいたいそういう部分は2文字、3文字、4文字が混在してるパターンが多いので、とりあえずそういうケースを想定してjQueryでやってみような発想に至りました。

んじゃjQueryでやってみよう

まず元のhtmlソース

<dl>
<dt>社名</dt>
<dd>ああああああああ</dd>
<dt>所在地</dt>
<dd>いいいいいいいい</dd>
<dt>電話番号</dt>
<dd>うううううううう</dd>
<dt>定休日</dt>
<dd>ええええええええ</dd>
<dt>地図</dt>
<dd>ええええええええ</dd>
</dl>

なんの変哲もない普通のマークアップ。続いてjavascript部分。

<script src="jquery.js" type="text/javascript"></script>
<script language="javascript"><!--
$(document).ready(function() {
$("dt").each(function(){
	if($(this).text().length == 2){
		$(this).css({"letter-spacing":"2em"});
	}else if($(this).text().length == 3){
		$(this).css({"letter-spacing":"0.5em"});
	}else{
		$(this).css({"letter-spacing":"0"});
	}	
  });	
});
--></script>

forとか使わなくてもjQueryにはeachというのがあるという事実を知ったのでそれを利用してdtを繰り返し処理。dtに入ってる文字数を数えて2文字ならletter-spacingを2emに、3文字ならletter-spacingを0.5em、4文字ならletter-spacingはなしにしましょうという作戦。

>>サンプルページ・その1（スタイルデフォなので分かりにくいかも）

>>サンプルページ・その2（それっぽく簡単なスタイルつけてみた）

で、うまくいったーって喜んでみたけど、IEさんだとなんか変。予定どおりじゃない。javascriptの事は勉強不足で分からないんド素人なので事情がよくわからんのだけど、これってIEに当たってるCSSスタイルから考えると$(this).text().lengthで取得予定のカウントが1多いの？それともこういう場合に$(this).text().lengthとかいう書き方で文字数カウントしようとする私の頭が沸いてるってことなんだろうか。他のやつ使わないとダメ？

んじゃ次、ブラウザを判別して頑張ってみる

ここまで来ると意地でもなんとかしたくなったのでjQueryでブラウザを判別する方法を探してみました。

>>jQueryで簡単UserAgent判別 - Webtech Walker

ブラウザのバージョンやOSは判別できないみたいとのことですが、IEかどうかだけ分かればいいのでこれを使ってみることに。

>>サンプルページ・その3

上のサンプル1.2に加えて上記サイトのブラウザ判別の部分をくっつけてみたんですね。

$(document).ready(function() {
$("dt").each(function(){
	if($(this).text().length == 2){
			$(this).css({"letter-spacing":"2em"});
		}else if($(this).text().length == 3){
			$(this).css({"letter-spacing":"0.5em"});
		}else{
			$(this).css({"letter-spacing":"0"});
		}
	
	if($.browser.msie)
		if($(this).text().length == 3){
			$(this).css({"letter-spacing":"2em"});
		}else if($(this).text().length == 4){
			$(this).css({"letter-spacing":"0.5em"});
		}else{
			$(this).css({"letter-spacing":"0"});
		}
  });	
});

結果としてはIEでもうまくいってるように見えるんだけど書き方とか合ってるかどうかは不明。if($.browser.msie)って{}で括らなくていいの・・・？謎。でもなんか動いてる。

もうちょっとまとめたい

上のソースだとなんか同じ記述が２回出てきてどうよと思ったのでもう少しだけまとめてみるように頑張る。

>>サンプルページ・その4

$(document).ready(function() {
$("dt").each(function(){
	if($(this).text().length == 2){
			$(this).css({"letter-spacing":"2em"});
		}else if($(this).text().length == 3){
			$(this).css({"letter-spacing":"0.5em"});
				if($.browser.msie)
				$(this).css({"letter-spacing":"2em"});
		}else if($(this).text().length == 4){
			$(this).css({"letter-spacing":"0"});
				if($.browser.msie)
				$(this).css({"letter-spacing":"0.5em"});
		}else{
			$(this).css({"letter-spacing":"0"});
		}
  });	
});

私の頭では、ここがわからんという部分

JS脳がない私から見てここがわからんかったっていう部分メモ。

「１減らす」ってしたかったけどやり方わからんかった

ブラウザ判別できるんだったら予めIEの時は数を1減らすっていう風にしておけばif($.browser.msie)の部分を何回も出現させなくて済むんじゃないの？と思ったけど書き方と入れる場所がよくわからんかった。

考えたのは、
if($.browser.msie)
$(this).text().length = $(this).text().length--;
とか
if($.browser.msie)
$(this).text().length = $(this).text().length - 1;
ってすればいいんかなって思ったんだけど、うまくいかなかった。1減らした値を代入したいっていう意味だったんだけど書き方が間違ってるのか入れる場所がおかしいのかうまくいかない。

if($.browser.msie)の部分

ここってなんで{ }いらんの？と思った。{ }で括っても動いたけど括らなくても動いた。どこまでがif($.browser.msie)の適応範囲だってどうやって決まってるんかよく分からない。よくわからんまま結果が先に出た感じ。次のifが出てくるまでって感じ？とか勝手に思ってる。

あ。適応範囲で思い出した。関係ないけど、変数の有効な範囲(スコープっていうの？)っていうのもいまいちよく分かってないん。リファレンス見た → そこに書いてあるソースの意味は分かった(ような気がした) → で？っていう所で思考停止。どんな時にその考え方が必要になってくるんかがよく分からん。

もっと根本的にここがわからんという部分

プログラミング全般って、まず最初に作りたいものをイメージして、そこから逆にどんな処理が必要になってくるのか辿っていくっていう考え方で合ってます？処理する方法を知るためにリファレンスでどんな事できるかある程度把握しておいて、あとはそれを組み合わせる、みたいなイメージなんだけど、なんかイマイチ自分の脳みそが進化しないのはその根底の考え方が間違ってるんじゃないだろうかと思う今日この頃。実務で何かそういう系の仕事があればもっと素早くレベル上がるんだろうな。必要に迫られてないから遅いわ・・・。

あーあと、私の場合、どうしてもCSSが好きだから自分がCSSを勉強してた時と比較して考えてしまうんだけど、HTMLにしろCSSにしろ、よく使うものって限られててとりあえずそれだけザックリ理解できたら細かいものとかはその都度調べながらとか、極論言うと分からない部分飛ばして自分ができる代替方法でなんとかしてしまえー効率悪いけど！みたいな考え方でも全然いけるんだけど、javascriptもそんな感じなんでしょうか。

今「なんかこんなんできた！スゲーー！」
↓
半年後「もっといい書き方見つけたわ。私随分効率悪い書き方してたな」

CSSの時はそうだったんだけど、javascriptもこういう発想の流れになるのでしょうか。全然その域に達する気配がないんですけど。

081210：追記　更にまとまった最終版

またもやありがたいアドバイスをコメント頂きました。上で書いた「「１減らす」ってしたかったけどやり方わからんかった」についての解決方法。

>>サンプルページ・その5（これが決定版だ！バージョン）

$(document).ready(function() {
$("dt").each(function(){
	var strLength;
	if($.browser.msie)
		strtLength = $(this).text().length -1;
	else strtLength = $(this).text().length;
	if(strtLength == 2){
		$(this).css({"letter-spacing":"2em"});
	}else if(strtLength == 3){
		$(this).css({"letter-spacing":"0.5em"});
	}else{
		$(this).css({"letter-spacing":"0"});
	}
  });	
});

コメント欄で最初の書き方だとプロパティを書き換えようとしてしまっているのでうまくいかないのかも…とアドバイスもらってハッとしました。最初に考えてた$(this).text().length = $(this).text().length--;って確かによく考えればその通りだなーと。変な事してた。プロパティと値がごっちゃになってたんですね。つーか、言われてみれば気づく初歩的な事なんだよ。でも私にはそんな事すらササっと分からないんだよ。これが弱点なんだな・・・。もっと勉強しまつ。slowbirdsさん、ありがとうございました！

2008年12月10日 12:08 | Red | パーマリンク