XHTML+CSSでの携帯サイト構築～3キャリア対応の落とし穴～Mobile

かのう | 2010年8月10日 15:36
かのうです。
サイブリッジは今夏休み！でも私は休みをずらして9月末の祝日と合せて大型連休にしうと企んでいます。今のところまだ予定はないんですけどね笑

そういえば「iモードブラウザ2.0」のお話

2009年5月以降に発売開始されたdocomo端末に「iモードブラウザ2.0」が搭載されていますよね。
デザイナー向けの新しい機能は下記ですが、まだまだ完全に普及したとは言えないので、結局のところ「XHTML+CSS」での携帯サイト構築が必要ですね。
・外部スタイルシートを含むCSS対応
・サイズ制限が500Kバイトに
・Shift_JIS、UTF-8の文字コードが利用可能
・JavaScript対応（Ajax含む）
・ページ埋め込みFlash動画（FLV）対応
・クッキー対応
▼docomo公式サイト
iモードブラウザについて

XHTML+CSSでの3キャリア対応の落とし穴

なんで普及もしばらく時間がかかりそうなので自分のメモ的に、今回は改めて携帯サイトを作る上で基本的なお話をまとめたいと思います。
今回はなるべくキャリア毎の差をなくして「iモードブラウザ1.0」でも表示したいデザインにコーディングしようとしたとき、たいがいぶち当たる落とし穴を中心にご紹介します！

画像がゆがむ

CSSとは関係ないですが幅240pxで画像を作成して、auで見たら画像がゆがんでる...それはスクロールバーの分だけ表示される幅が縮小しているからです。
どうしてもキレイに表示したいときは画像を小さくしてセンター揃えでしょうか。

その場合私は232pxで指定していますが、その前後でも問題ないかと思います。
（横228ピクセル以内に抑えてくださいっていう記事も見たことありますが...）
<div style="text-align:center;">
<img src="img/keyv.gif" width="232" height="180" border="0" />
</div>

hrタグ

hrタグは結構くせがあります。docomoではXHTMLの属性が非対応ですし、auとSoftbankでも仕様が異なります。

下記はdocomoだと若干多めにマージンをとられますがhrで指定するには一番最適です。
<hr size="1" style="width:100%;height:1px; margin:0px; padding:0; color:blue; background:blue; border:1px solid blue;" />
それでもやっぱり...という場合はスペーサーGIFを使って1pxのボーダーを実現しましょう。
<div style="text-align:center; margin:0; padding:0; background:blue;"> <img src="img/spacer.gif" height="1" width="1" border="0" /> </div>

センタリング

styleでの指定だけでもいいのですが、より古い機種に対応させるにはalignも念のため指定しておいた方がベターです。
<div style="text-align:center;" align="center">

アンカーリンク

docomoはname属性に対応していないため、アンカーリンクの挿入は下記のようにしましょう。
<a name="top" id="top"></a>

画像の回り込み

画像にalign属性を使う場合と、styleにfloatを使う方法があります。
alingだとdocomoが非対応、floatはauが非対応になるので両方記述する必要があります。

また、回り込みの解除は解除したい箇所にブロック要素のタグがあったらそこにclearを記述します。（<br clear="all" />で解除できるのは、auとSoftbankのみなので注意）
<img src="img/icon.gif" width="60" height="60" style="float:left; margin:3px;" align="left" border="0" alt="アイコン" />
<a href="#">タイトル</a><br />
説明説明説明説明説明説明説
<div style="clear:both; text-align:center; margin:0; padding:0; background:blue;">
<img src="img/spacer.gif" height="1" width="100%" border="0" />
</div>

tableタグで2カラム表示

回り込みじゃなくて2カラムにしたい場合などはtableタグを使用しましょう。ほとんどの機種でtableタグを使用しても問題ないですが、かなり古い機種まで考慮したい場合は避けてください。

docomoではtableの外にフォントサイズを指定していた場合はデフォルトのサイ ズに戻るので、めんどうですがspanでテキストを囲んで指定してください。
tableタグやth,tdタグに指定しても効きません。
<table cellspacing="0" cellpadding="0">
<tr>
<th align="right">
<span style="font-size:xx-small;"><a href="#">タイトル</a>
：</span> </th>
<td>
<span style="font-size:xx-small;">説明説明説明説明説明説明説</span>
</td>
</tr>
</table>

フォントサイズ

フォントサイズを同じxx-smallで指定してもキャリヤや端末によって表示はそれぞれ；；
docomoは下記のように全端末共通のようです。
・大 → xx-large,x-large
・中 → large,medium
・小 → small,x-small,xx-small
「大」は大きすぎるので使わないとすると、他のキャリアの端末も考慮してベースは「x-small」で目立たせたいときは「medium」を使うのがいいんだと思うんですが、自分の携帯（auのW61P）だと「xx-small」以外はどれも太字に見えるくらいの大きさになってしまいます。。ベースを「xx-small」にすると端末によって極小になるので、デザインを取るか見やすさをとるか。。

auとSoftbankでは外部CSSが使えるためclassを指定して、ハック的にサイズを調整することも可能です。

auでのセレクトメニュー

プルダウン（セレクトメニュー）が外側のdivでフォントサイズを指定していてもデフォルトのサイズに戻ってしまい、変な改行をされることがあります。その場合はselectタグにサイズをしていしましょう。
<form action="" method="GET">
<select name="url" style="font-size:xx-small;">
<option value="りんご">りんご</option>
<option value="みかん">みかん</option>
</select>
<input type="submit" style="font-size:xx-small;" size="1" value="絞込">
</form>

マージン

docomoの場合はdivにmarginを指定しても対応していませんが、imgタグには対応しています。スペーサーGIFなどの画像にmarginを指定するかvspace,hspaceなどを活用して調整しましょう。

ちなみに、画像の周りに枠をつけたい場合、docomoはborder属性、borderプロパティともに対応していません。

docomoの絵文字をデフォルトにする

言わずとして知れているdocomoの絵文字はcolorで色の指定ができる件なのですが、bodyなどにフォントカラーの指定をしている時はかなりやっかいです。

bodyに指定せずにこんな感じにしてもいいんですが...ソースコードが多くなるとカオス状態です（[！]が絵文字だとします）
<body>
<span style="color:#48251A;">ベースは茶色だけど<span style="color:#F90;">こ んな</span>や<span style="color:#96C;">こんな</span></span>[！]<span style="color:#48251A;"><span style="color:#F69;">こんな</span>色も使いたい</span>[！][！]
</body>
そしたら絵文字の方にカラー指定をしちゃいましょう。auとSoftbankは色が変わらないので大丈夫です。すごい簡略化されたわけではないけど、ベースの色を気にせずにそれ以外の色を着色したい部分だけ気をつければOKです。
<body style="color:#48251A;">
ベースは茶色だけど<span style="color:#F90;">こ んな</span>や<span style="color:#96C;">こんな</span><span style="color:red;">[！]</span><span style="color:#F69;">こんな</span>色も使いたい<span style="color:red;">[！][！]</span>
</body>
▼docomo公式サイト
絵文字カラー一覧

まだまだあるっちゃあるのですが、、今日はココまで！！
では、また(・´з`・)

| | comments(0) | trackbacks(0) |

タグ:

2TB以上のハードディスクは要注意！

ぬいぐるみ | 2010年8月 5日 12:39
こんにちは

インフラ管理者のぬいぐるみです。

最近はずっとLinuxばっかりインストールしていたのですが
知り合いでどうしてもWindowsパソコンを作ってほしいという
依頼があったのでWindowsパソコンを作りました。

今回はその時にインストールではまった事を書きたいと思います。

最近ではハードディスクが安くなったためか大量にHDDを
積みたいという声をよく聞きます。

今回も4TBのマシンを作ってくれとの依頼でした。

特に故障にはこだわらないとのことだったのでRAID0で2TBのHDDを2台つなげ、
早速インストールしようとした所、どうしてもインストール中にエラーが出てしまいます。

原因はMBR（マスターブートレコード）というOSを選択する領域が
そもそも2TB以上のHDDに対応していないからみたいです。

しかしWindowsVista64bit版からはMBRの代わりにGPTという規格ができ、
2TB以上でも起動することができるようになりました。

しかし気をつけないといけないのは
「EFIに対応したマザーボードが必要」（ここ重要）だということです。

GPTでブートさせるには通常のBIOSでは対応できず、次世代BIOSであるEFIに対応した
マザーボードが必要になります。（EFI-Xはまったく関係ありません。）

2年前に発売されたみたいですが、私も聞いたことがないぐらいですし、
現在売られているマザーボードも探したのですがなかなか見つかりませんでした。

で、今回とった解決法は

１．RAID0で100GB程度のドライブを作成する。（Cドライブ）
２．RAID0で残りの容量を使ったドライブを作成する。（Dドライブ）
３．Cドライブを起動ディスクとしてインストールを行い、
インストール完了後、コントロールパネルからDドライブをGPTドライブとしてフォーマットする。

という方法で無事にインストールができました。

ちなみにLinuxの場合はLVMという機構があり、一度２TBのHDDにインストールした後、
HDDを追加してGUIで簡単に1ドライブにまとめられたりします。

2TBが9000円を割りましたし、今後この情報をしらないで苦労する方が増えるかと
思います。
なかなか情報がまとまっているサイトがなかったのでブログに書いてみました。
| | comments(0) | trackbacks(0) |

文字コードでforループPHP

まえだ | 2010年8月 5日 10:16

前田です。こんにちは。

基本知識の応用でたまに便利な一工夫。


ASCII文字をコードで解釈してループ処理を行う。


for($i=ord("a");$i<=ord("z");$i++){

 echo chr($i)."<br />\n";

}

表示結果は下記。

a
b
c
d
・・・


ord()は文字（2文字以上の文字列の場合は先頭文字のみ）を文字コードに変換。

chr()は数字を文字に変換。


実はこれ、

for($i=a;$i<z;$i++){

 echo $i."<br />\n";

}

でもa～yが出力されます。

ただし、

for($i=a;$i<=z;$i++){

 echo $i."<br />\n";

}

というように「<」ではなく「<=」をループ条件に入れると、

a～zでとまらず、つづけて「aa」～「yz」が出力され、

期待通りには動きません。

上記に限らず、PHPを利用する上で予期せぬ動作を防ぐためには、

"意図している通りにしか解釈しようのない"、厳密なコーディングを心がけるべきなのかと思います。

※上記はPHP5.1.6の場合


そもそも今回紹介した手法が何に役立つのか、なのですが、

共通処理を行いたい同一フォーマットのデータを持つ、

配列やDBテーブルのカラム名の通し番号に、数字ではなくa～zを使っている場合が考えられます。


原則としては通し番号には数字を使うべきだと思いますが、

例えば引き継ぎ案件で「最初からそうなっていた」場合にはどうしようもありません。


例として配列の中身（文字列）をすべてエンティティ化したい場合。

for($i=ord("a");$i<=ord("z");$i++){

 $array["key_".chr($i)] = htmlentities($array["key_".chr($i)]);

}


上記はforeachで代替できますし、非常に簡単な例ですが、

コードの行数を減らしたい際に思いの外役立つこともありますので、

頭の片隅にでも入れておくといいかと思います。

| | comments(0) | trackbacks(0) |

Fireworks CS5 のスライス書き出し時に _s1 をとるFireworks

ハシモト | 2010年8月 3日 14:31

最近の記事は HTML のことばかり書いていたので、本日は Fireworks CS5 で、スライス書き出し時にファイル名の末尾に「_s1」がつく件についての対処法を書こうと思います。

設定方法はカンタン！3ステップで終わります。

1. ファイル → HTMLの設定

2. ドキュメントの詳細 → ステート名「なし」＋「なし」を選択

fw

3. デフォルトに設定をクリック → OK

以上です。これでファイル名の末尾に「_s1」がつかなくなりました！お試しあれ。

| | comments(0) | trackbacks(0) |

タグ:

プログラマの資格PHP

ぽこ太 | 2010年7月27日 22:32

ぽこ太です。

開発環境の話ですが、
Web系ではLAMP環境が
Webアプリケーション構築環境として定着しつつあるということで
LAMP環境に順応できる技術者のニーズが高まっているようです。

「いまIT業界で採用ニーズが強い職種とは・・・？」
http://www.elite-network.co.jp/x/tokushu/colum/it_02.html

サイブリッジでもWebアプリケーション構築環境として
主にLAMP環境を採用しています。

プログラマが持ってて有利な資格

PHP技術者認定試験としては
「Zend PHP Certification」がありましたが
この秋には日本語処理などが試験範囲に加わった、
日本独自のPHPの技術者認定試験も実施されるみたいです。

「日本独自のPHP技術者認定試験、オライリーなどがNPO法人設立し実施へ 」
http://itpro.nikkeibp.co.jp/article/NEWS/20100726/350690/

実は今、サイブリッジではプログラマ募集に力をいれているのですが、
プログラマって必須の国家試験などはなくて
「私はプログラマです！」って言っちゃえばプログラマみたいな気がしてます。

DJも「おれDJです」って言っちゃえばDJですからね。

プログラマ向けの検定で有名なのが、IPAの情報処理技術者試験。
例えば、
・基本情報処理技術者
・ソフトウェア開発技術者
などが有名ですよね。

WEB開発にも関わる試験もあり、
ネットワークスペシャリスト試験や
データベーススペシャリスト試験など
結構細かい分野に分かれた試験もあるようです。
http://www.jitec.ipa.go.jp/1_11seido/seido_gaiyo.html

検定試験はあくまで検定で、実践に即していないという意見もたまにききますが、
基本的な知識、考え方は身につけておくといいと思います。

ちなみにIT系転職者アンケートでは
「役立った言語・ツール」は「VB」や「C」という回答が多いなか、
「あなたが今後習得したいスキル」では
・Java
・MySQL
・PHP
・Flash
・JavaScript
といったWeb 開発系の技術がTOP5を占めており、
現在ニーズの高いWeb系の技術を取得しようとしている人が多いようです。

また、一緒に仕事をしたことのない方や技術の詳しくない方へ、
自分のスキルを証明するには
なにより、勉強熱心さが大事かもしれません。

| | comments(0) | trackbacks(0) |

タグ:

| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |