ADP: 携帯対応も考えた画像表示

2004年03月27日 04:19 | コメント(8) | トラックバック(0)

携帯電話など、低スペックな環境では勝手に画像が読み込まれないようにし、IE6など、高スペックな環境では画像が表示されるようにする、という目的に沿って、画像表示を考えてみる。

低スペックでは画像を表示させない、というだけでは、ユーザビリティ的に問題がある。適切な説明をつけて画像の代替をさせることはもちろん重要だが、本当に画像を見たい人が見にいけるようにしたほうがいいかも。携帯だけではなく、それなりに低スペックな環境でも、画像を見たい人はいるだろうし。

というわけで、低スペックでは、画像へのリンク（ファイルサイズ情報つき）にし、高スペックでは、そのリンクを頼りに、画像を表示する、という方法をとってみる。使うのは、いつもどおりDOM。つまり、DOM (Core) が使える環境では画像がそのまま表示され、使えない環境では画像へのリンクになる。サンプルを参照のこと。

説明。

サンプルのHTMLは、

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>DOMで画像表示</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="drawimages.js"></script>
<link rel="top" href="http://adp.daa.jp/" />
<link rel="shortcut icon" href="http://adp.daa.jp/grade.ico" />
</head>
<body onload="drawImages();">
<h1>DOMで画像表示</h1>
<p>先日、高校に行った帰りに撮った写真を追加。</p>
<p class="linktoanimage"><a href="http://adp.daa.jp/archives/P1000010.JPG">森タワー写真 (352 by 288 pixels, 49KB)</a></p>
</body>
</html>

で、読み込んでonloadで実行しているdrawimages.jsのほうは、

function drawImages() {
 if(document.getElementsByTagName && document.createElement) {
  makeImage('p');
 }
}

function makeImage(tagName) {
 var tcoll = document.getElementsByTagName(tagName);
 if(!tcoll) return;

 for(var i = 0,j = tcoll.length; i < j; i++) {
  if(tcoll[i].className == 'linktoanimage') {
   var srcName = tcoll[i].firstChild.getAttribute('href');
   var c = tcoll[i].firstChild;
   if(c.firstChild.nodeValue) {
    var altName = c.firstChild.nodeValue;
    c.removeChild(c.firstChild);
    tcoll[i].removeChild(tcoll[i].firstChild);
    var x = document.createElement('img');
    x.setAttribute('src', srcName);
    x.setAttribute('alt', altName);
    x.setAttribute('title', altName);
    tcoll[i].appendChild(x);
   }
  }
 }
}

というかんじ。HTMLのほうの

<p class="linktoanimage"><a href="http://adp.daa.jp/archives/P1000010.JPG">森タワー写真 (352 by 288 pixels, 49KB)</a></p>

がメインで、drawimages.jsではp要素のlinktoanimageというclassを探して、中のa要素とその中の説明を消し飛ばし、説明部分をaltにした画像と置き換えている。えっと、あまり汎用性は考えていないので、上記p要素の行は改行を入れないでくだされ。

説明部分は、それが画像へのリンクだということが分かる文章と、ファイルサイズなどを（自分で調べて）あらかじめ書いておく。こうすれば、携帯電話やNN4などでは画像へのリンクだということが分かるし、ハイスペックなケータイなら無理をすれば見にいける。

先に補足。ちゃんとケータイ対応を考えるならば、encodingはShift_JISのほうがいいと思うし、画像はjpegがいちばん汎用性があるだろう。あと、pタグを漁っていくのは非効率なので、実際使うときには、spanか、なにかしら（あまり使わなさそうな）要素にlinktoanimageをつけたほうがいいかも。理由後付けでいいならemあたりか（ひどい？）。

トラックバック(0)

トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/108

コメント(8)

Momomo: 2004年03月27日 16:12

そういえば、森タワーは大変なことになってます・・・

アサノ: 2004年03月28日 13:56

私は FOMA N2051 とゆう初期の型を使ってんですが、これが画像は 20KB 以内なんですよね・・。なのでサンプルページのリンク先の画像は見れませんでした。無念。今の FOMA は画像はどの位の容量迄いけるんですか?

Momomo: 2004年03月29日 11:56

あれれ、そうなんですか。http://www.nttdocomo.co.jp/mc-user/i/spec/useragent.html にあるようなキャッシュサイズ100KBというのは実際の数字じゃないんですかね（実は、パケ代が怖くてやってないのですが）。

Momomo: 2004年03月29日 13:39

こんなところでまちがえるなよ、というところで凡ミスをしていたんで、直しました。

アサノ: 2004年03月29日 14:38

出た! 見えましたよ! ゎーぃ
待ち受けは 20KB 迄しか登録出来無いようなんですが、ふつーにネットサーひンする分は 100KB 迄イケるって事なんですね。

Momomo: 2004年03月29日 20:39

アサノさんありがとうございます。100KBまで大丈夫なんですね。あとは、monthly archivesさえなんとかすれば、FOMA対応と宣言できそうです。

デビ: 2004年09月10日 01:43

おぉ！　これすごい！　ジャスト私がほしかった機能！

携帯とWEBを同一コンテンツにアクセスさせているため、たくさんの画像を表示するときにどうするか悩んでいました。今まではリンク先の背景にしていたのですが、たくさんあるとCSSの管理が面倒だと思っていたのです。使える～～！

ぜひ参考にしてみたいと思います。

Momomo: 2004年09月10日 02:27

デビさん、ありがとうございます。補足ですが、現在はem要素（em class="linktoanimage"）にこの機能をあてています。あってもなくてもかまわない画像は背景画像にし、説明上できるだけあったほうがいい画像（概念図など）は、これでリンクにしています。

ADP: 携帯対応も考えた画像表示

トラックバック(0)

コメント(8)

ナビゲーション