OPQR.jp : WebサービスとWebデザインについて考えてみる;

canonical属性というのが、Google、Yahoo!、MSNで導入されるらしい。
システムで処理しているページで、複数のURLでアクセスできる場合、どのURLを検索エンジンにインデックスさせるかを指定することができるらしい。
うまく使えば、サイト管理者が望むサイト構成でインデックスできるっぽい。

検索エンジン3社、正しいサイトURLを認識させるcanonical属性を導入（URLの正規化）
http://www.sem-r.com/09/20090213153711.html

大手検索エンジンcanonical属性を採用（新SEO対策）
http://profile.allabout.co.jp/ask/column_detail.php/46643

CSS Spriteを使う際の注意事項

category : Webコーディング ;

CSS Spriteについてちょっと思ったこと。
CSS Spriteは、ページのロード時間を短縮できますが、下記２点も考慮のうえ、ページ内のどの画像に対してCSS Spriteを使った方がよいかをちゃんと考えたほうがよい。

・ユーザビリティの確保（alt属性が必要な画像もあるため）
・更新性（画像サイズを変えると画像変更、CSS変更に手間がかかるため）

確実にスプライトにしたほうが良い画像は、alt属性をつける必要がない装飾画像、
ページタイトルをテキストで表示する際の背景画像などかな。

■参考サイト

CSS Sprite - CSSスプライト　解説
http://blog.livedoor.jp/fseeker/archives/193359.html

CSS Sprite 失敗
http://chushoww.blogspot.com/2008/08/css-sprite.html

CSSスプライトとは？
http://css.studiomohawk.com/30/css-sprites/

第10回　CSS Spritesでサイトを高速化
http://gihyo.jp/design/serial/01/ss-design/0010

スクロールして一定の位置で画像を変化させるCSS

category : Webコーディング ;

スクロールすると一定の位置で画像が変化する。
この効果をCSSで出せるのは、すごい。

example 1
http://www.askthecssguy.com/examples/fixedBackgroundImages/example01.html

example 2
http://www.askthecssguy.com/examples/fixedBackgroundImages/example02.html

example 3
http://www.askthecssguy.com/examples/fixedBackgroundImages/example03.html

■参考サイト

スクロールすると変化しながらついてくる画像
http://www.simplexsimple.com/archives/2009/01/css_scroll_trick.html

CSS3の:target擬似クラス

category : Webコーディング ;

CSS3で使える:target擬似クラスって、使い方によっては便利そう。
IEも対応してほしいなぁ。

第6回　CSS3のセレクタを使用してみよう
http://gihyo.jp/design/serial/01/wsd/0006

Web標準のコーディングと構文チェック

category : Webコーディング ;

めちゃくちゃ基本の話ですが、Web標準のXHTMLとCSSの書き方とW3Cの構文チェックに関してです。このブログは、Webデザインといいつつもコーディング情報が多いのにいまさらって感じですが。笑

Markup Validation Service
http://validator.w3.org/
HTMLとXHTMLの構文チェックができる。

CSS Validation Service
http://jigsaw.w3.org/css-validator/
CSSの構文チェックができる。

CSSは日本語があるのに、HTMLとXHTMLのチェックでは日本語はないみたい。チェックするアドレスは、index.htmlとか入れずにドメインのみでチェックしてもサーバで最初に表示されるように設定しているindex.htmlやindex.phpがチェックされるようだ。

クリアすると次のようになる。

Markup Validation Service （XHTML、HTML）の場合

CSS Validation Service の場合

HTMLファイルではなく、PHPのインクルードで読み込んだファイルでもクリアした。
CSSは、中の書き方が基本的な書き方であればクリアするみたい。
サイトに張るアイコンは、HTMLコードをコピペすればOKみたい。
どっちの色でもOK。
CSSのチェックの方は、アイコンのとなりのものをコピペすると検索画面にリンクする。なぜ？　下のiframeの中の、ものをコピペすればチェックOKのページが表示される。or のどっちでもリンク先は、同じ評価ページだけど、何の違いがあるの？

ただし、このブログ（OPQR.jp）は、エラーでまくりです。MT 4に変更したら、そのあたりもちゃんとやりたいと思いつつ、時間なくてできてない（じゃっかん逃げ？）。

XHTMLとHTMLの構文チェックだけなら、こっちのほうがきびしい。
Another HTML-lint
http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html

HTMLもCSSも論理的に正しく書いても、解釈するブラウザ（正確には、ブラウザの使っているレンダリングエンジンかな？）が、おかしいのもあるから仕方ないよね。
4、５年前なんて、デザイン上での表示がおかしくなるから、CSSは文字の大きさと色の指定くらいしか使えなかった。サイトの背景色さえ、CSSではなくHTMLのbodyで指定しないといけなかった。

■参考サイト

XHTMLの検証をする
http://xml.vc/pandora/Markup-Validation.html

2008年4月19日　追記：
独学で極める “Webデザイン”の技と心　第9回　ValidなHTML，ValidなCSS
http://gihyo.jp/design/serial/01/ss-design/0009?page=1

ValidなHTMLとCSSについて書かれている記事を見つけました。
ここに書かれているように、単純に100点をとれば良いということじゃないんです。

携帯3キャリアでの絵文字の書き方と3キャリアへの対応方法

category : Webコーディング ;

携帯3キャリアでの絵文字の書き方、3キャリアへの対応方法。（2007年10月現在）

■絵文字の書き方
キャリアによって書き方がけっこう違う。

（1）i-modeの場合
などのコードをHTML内に書き込む。
このソフトで、絵文字を選択すると、絵文字コードを自動で入力してくれる。
http://www.nttdocomo.co.jp/
service/imode/make/content/pictograph/tool/

（2）EZwebの場合
<IMG ICON="絵文字番号">　で絵文字番号に数字で番号を書き込んで表示する。
このページに絵文字番号が載ってる。
http://www.au.kddi.com/ezfactory/tec/spec/3.html

（3）SoftBankの場合
ここのページのウェブコードをコピペでHTMLに貼付けると表示される。
http://developers.softbankmobile.co.jp/dp/tool_dl/web/picword_01.php

■3キャリア対応にする方法

（1）3キャリア用にサイトを3つ作り、自動で振り分けるようにする。
※振り分けは、HTMLのタグではなく、サーバ側の設定やPHPなどのシステムで行う。

（2）HTMLのコード内で、PHPで絵文字コードの箇所のみ表示を切り替える。
※普通にHTMLタグを書くのと、じゃっかん違ってちょっとだけPHPの知識が必要。

（3）絵文字は使わず、絵文字を使う箇所にはアイコン画像（JPEG）を使う。
※どうしても絵文字を使いたい場合は使えない方法だけど、サイトを3つ分作る必要がなく、システムも使わないので、一番簡単な方法。

utf-8以外の文字コードで、Google Maps APIを使う

category : Webコーディング ;

Google Mapsを使う場合、HTMLファイルの文字コードをutf-8にしておかないと文字化けしたり、表示されなかったりする。
ファイル内に記述するJavascriptに、charset="utf-8"を設定すれば、HTMLファイル自体は、utf-8以外の文字コードでもOK。「WebサイトにGoogle Mapsを設置する」の記事で書いたHTMLソースをサンプルでのせとく。このサンプルでの文字コードは、shift_jisを使っている。

<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis"/>
<title>Google Maps Example <script src="http://maps.google.com/maps?file=api&v=2&key=ここに取得したGoogle Maps API keyを入力する" type="text/javascript" charset="utf-8"></script>
</head>

var map = new GMap(document.getElementById("map"));

   //座標の設定
   var lon = 135.52585244178772; //経度
   var lat = 34.687366195371624; //緯度
   var moon = new GPoint(lon,lat);

//目標を中心にする
map.centerAndZoom(moon , 3);

   //コントローラーを追加する
   map.addControl(new GSmallMapControl());
   map.addControl(new GMapTypeControl());

   //目標を表示する
   var marker = new GMarker(moon);
   map.addOverlay(marker);

//]]>
</script>

</body>
</html>

または、utf-8のHTMLファイルにGoogle Mapsを設置し、それを別のHTMLファイルからインラインフレームで読み込むという方法もいけるかも。

■動作確認環境
Windows：Internet Explorer 6、Internet Explorer 7、FireFox 2
Mac OS：Safari 3、FireFox 2

■参考サイト
MAP工房での文字コード
http://jjworkshop.com/blog/archives/2007/04/map.html

WebサイトにGoogle Mapsを設置する

category : Webコーディング ;

WebサイトにGoogle Mapsを設置する方法。

Googleのアカウントを取得する。
↓
下記URLのGoogle Mapsの登録ページでサイトURLを登録する。
http://code.google.com/apis/maps/signup.html
↓
次のページで出てくるHTMLソースをコピペで使う。

ここまでが、スタンダードな流れ。
ただし、このHTMLソースでは、拡大縮小機能なし、目印なし、航空写真なしの状態。

使いやすくするために、次のカスタマイズを行う。
・中心位置の設定
・拡大縮小、航空写真のコントローラーの設定
・目印の表示

そのために、下記HTMLソースを利用する。

<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps Example <script src="http://maps.google.com/maps?file=api&v=2&key=ここに取得したGoogle Maps API keyを入力する" type="text/javascript"></script>
</head>

var map = new GMap(document.getElementById("map"));

   //座標の設定
   var lon = 135.52585244178772; //経度
   var lat = 34.687366195371624; //緯度
   var moon = new GPoint(lon,lat);

//目標を中心にする
map.centerAndZoom(moon , 3);

   //コントローラーを追加する
   map.addControl(new GSmallMapControl());
   map.addControl(new GMapTypeControl());

   //目標を表示する
   var marker = new GMarker(moon);
   map.addOverlay(marker);

//]]>
</script>

</body>
</html>

そして、目印の位置指定をする。
下記URLで、目印を表示したい目標の経度緯度を調べる。

経度・緯度を調べる（地図作成作業補助サンプル）
http://jsgt.org/ajax/newmon/samples/chapter03/03-31/getlatlon44.htm

前述のHTMLソースの「座標の設定」のところを変更する。
座標数値は、【v1用】Zoom0 lon lat (v1 Gpoint用) の方を使う。

■動作確認環境
Windows：Internet Explorer 6、Internet Explorer 7、FireFox 2
Mac OS：Safari 3、FireFox 2

■参考サイト
GoogleMapsをサイト内に設置
http://popup.tok2.com/home2/yosiaki/googleMaps.html

Google Maps API 2 作り方・サンプル一覧
http://japonyol.net/editor/googlemaps.html

Google Mapsを自サイトに設置する
http://allabout.co.jp/internet/javascript/closeup/CU20051116A/

i-mode用サイトのXHTMLのContent-Typeの設定（メモ用）

category : Webコーディング ;

少し前に出会ったエラーで、急ぎで対処したためじゃっかん、うろ覚え。
とりあえず、忘れないようにおぼえているところだけ書いといてあとで、まとめ直す。
なので、この記事はじゃっかんエラー症状や用語や対処方法があいまいかもしれないです。あしからず。

検証環境：
DoCoMoは、D902isを使用。
Webサーバは、XREAを使用。

i-mode用で、XHTMLでサイト作った場合に、メタのContent-Typeを下記のようにapplication/xhtml+xmlにしないといけない。

しかし、それでもページを実機で確認すると、スタイルシートが正しく反映されていない場合がある。
headタグの中にstyleタグで書いたリンクの色指定のタグが、ページに直接表示されてしまっていたり、background-colorやtext-alignが反映されていないなど。

その際は、サーバのXHTMLのファイルを置くディレクトリに下記の内容を書いた「.htaccess」を置くと正しく表示される。

AddType application/xhtml+xml html

使用するWebサーバのContent-Typeは、ここで確認できる。

DoctorSEO HTTPレスポンスヘッダ確認
http://www.doctorseo.jp/seotool/headerviewer/headerview.php

■参考サイト

XHTML1.1 に正しい MIME Type を
http://www.code-404.net/article/2006/04/06/mime-type4xhtml11

3キャリア対応の携帯汎用XHTMLテンプレート

category : Webコーディング ;

3キャリア対応の汎用XHTMLのテンプレート。ちょっと古い機種でもOKなはず。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
   <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
   <meta name="description" content="" />
   <meta name="keywords" content="" />
   <meta name="robots" content="index,follow" />
   <title>タイトル</title>
</head>

ただし、metaのdescription、keywords、robotsが効果あるのかどうかまではよくわからない。多分あると思う・・・。

注意点として、これを使い汎用として作ったとしても、bodyの中のコードの書き方を工夫したり、各キャリアや機種で使える素材に注意しないと汎用サイトにならない場合あり。

例えば、再生できる動画形式、絵文字コードなどで違いがある（当然、HTMLタグの細かい書き方でも違いはある）。そこの箇所のみ、PHPでユーザーエージェント判別して表示するなどすれば、汎用化できる。

文字コードは、Shift_JISが無難。
画像形式は、JPGが無難。

ディスプレイの画面解像度も、現在横幅240pxが多いところ、その倍の480pxもある機種あり。240pxに合わせた画像サイズ、テキストサイズでは、480pxでは小さくなってしまう。テキストサイズに関しては、携帯側で文字を大きくすることも出来るが、画像は無理なので、サイズでも注意が必要。
PCみたいに携帯電話のディスプレイ解像度変えることができる機種はあるんだろか・・・。

※2007年10月現在の情報です。

■参考サイト

モバイル( 携帯 )サイト作成　DOCTYPE宣言とXML宣言
http://www.nextftp.com/pmiti/imasara/jw_mo001.htm

携帯サイト作成時のXHTMLでの相違点
http://labs.unoh.net/2006/12/xhtml.html

携帯HTMLメモ
http://www3.tokai.or.jp/janboon/hphtml/

iモードHTMLとiモードXHTMLを正しく切り替える方法
http://dspt.blog59.fc2.com/blog-entry-36.html

ｉモード対応XHTMLの考え方（DoCoMo公式）
http://www.nttdocomo.co.jp/service/imode/make/content/xhtml/outline/s1.html

SoftBankで3gpを再生すると「レスポンスが不正です。」というエラーが出る

category : Webコーディング ;

DoCoMoだと、3gp形式のファイルはAタグのみで再生できる。

SoftBankだとAタグだけで再生しようとすると、次のエラーが出て再生されない。

SoftBank 912SHの場合：
「エラーが発生しました。レスポンスが不正です。(WJ46098E)」と出て再生されない。
SoftBank 705SHの場合：
「エラーが発生しました。レスポンスが不正です。(WJ46284E)」と出て再生されない。
Vodafone 703SHfの場合：
「オブジェクト」とだけ出て再生されない。

ヘッダを出力することで、正しく再生された。
PHPを使って必要なヘッダを渡す方法を書かれていた方がいたので助かった。

■sample.html

■movie.php

<?php
   header('Content-Type: video/3gpp');
   header('x-jphone-copyright: no-transfer');
   readfile('movie.3gp');
?>

ヘッダを付加したmovie.phpを、sample.htmlからAタグで読み込む。
もちろん、DoCoMo、au（CDMA1X WIN）でも再生可能。
再生、保存の両方ができるようになる。

動作確認環境：SoftBank 912SH、SoftBank 705SH、Vodafone 703SHf

SoftBank と 3GPP にまつわるエトセトラ
http://blog.izanagi-izanami.net/2007/03/softbank_3gpp.html

動画の保存・転送制限　Vodafone
http://apachephp.seesaa.net/article/23025743.html

2007年10月17日　追記：
SoftBank 912SHの動作確認情報を追加した。

VistaのWindows Mailで、本文が文字化けする

category : Webコーディング ;

サイト制作時に A タグの mailto でメール本文 ( body ) を指定していて、ユーザー側でそれをクリックした際に立ち上がるメールソフトを Windows Mail ( Vista 既定 ) にしている場合、メール本文の内容が文字化けする。しかし、件名 ( subject ) は文字化けしない。UTFにまつわる文字コードの問題らしい。

メールでお問い合わせなどを受け付ける場合は、現状としては次のどれかで対応かな。

A) メールフォームを使う。
B) mailto 使用時は、本文 ( body ) は指定しない。
C) Windows Mail は、無視する。

Vista 既定のこのメールソフトをどれくらいの人が使っているのか分からないけど、Vista が一般的になれば、これから増えると思うので ( Outlook Express の後継らしいので) 。その前に Microsoft が修正するかな。

やっぱり、一番無難なのはメールフォームを使うことかな。
詳細を書かれている人がいたので、詳しくはこちらを。↓

VistaのWindows Mailとmailtoタグによる本文のプリセット（文字化け問題）
http://shimax.cocolog-nifty.com/search/2007/02/vistawindows_ma_c78c.html

フォームのリセットボタンを画像で作る

category : Webコーディング ;

メールフォームやアンケートフォームのリセットボタンを画像で作る。
（コード的に正しいかは、ちょっと自信ない）

サンプル：

inputタグのtypeをimageにして、onclickに以下のスクリプトを使う。

ソースコード：

次の環境で動作する。

Windows：
Internet Explorer 6.0、Internet Explorer 7.0、FireFox 2.0、Opera9.10、Netscape7.1

Mac OS：
Safari 2.0、FireFox 2.0、IE5.2、Opera8.51、Netscape7.1

「Mac版IE5.2でselectが非表示になる。textareaが文字化けする」の回避方法

category : Webコーディング ;

文字コードをShift_JISからUTF-8に変更したら、Mac版IE5.2でselectの中身が表示されなくなってしまった。文字コードをUTF-8に指定すると、selectの中身の２バイト文字が文字化けするらしい。

回避方法は、optionに下記を指定する。
<option・・・・・lang="ja">

Mac IEでselectが文字化けor表示されない
http://studiomd.jp/archives/2005/08/mac_ieselector_1.html

また、textareaの中身が文字化けする方は、CSSでfont-familyを指定すれば回避された。ただし、bodyやformにではなく、直接textareaに指定しないといけないようだ。

Mac版IE+ココログのコメント・文字化け
http://shimax.cocolog-nifty.com/search/2005/01/macie.html

検索

新しいエントリー

RSSフィード

アーカイブ：Webコーディング

IEの場合だけ、フォームでＥｎｔｅｒを押してもうまく動作しない

タグ

確認ダイアログのＯＫを押したあとにリンクするJavaScript

タグ

検索エンジンにインデックスされるURLを正規化するcanonical属性

タグ

CSS Spriteを使う際の注意事項

タグ

スクロールして一定の位置で画像を変化させるCSS

タグ

CSS3の:target擬似クラス

タグ

Web標準のコーディングと構文チェック

タグ

携帯3キャリアでの絵文字の書き方と3キャリアへの対応方法

タグ

utf-8以外の文字コードで、Google Maps APIを使う

タグ

WebサイトにGoogle Mapsを設置する

タグ

i-mode用サイトのXHTMLのContent-Typeの設定（メモ用）

タグ

3キャリア対応の携帯汎用XHTMLテンプレート

タグ

SoftBankで3gpを再生すると「レスポンスが不正です。」というエラーが出る

タグ

VistaのWindows Mailで、本文が文字化けする

タグ

フォームのリセットボタンを画像で作る

タグ

「Mac版IE5.2でselectが非表示になる。textareaが文字化けする」の回避方法

タグ

新しいイメージ

カテゴリー

アーカイブ

タグクラウド