imodeホームページ作成にあたり

KID京都インターネット同好会
勉強会資料 H12/11/11 長谷川
■パソコンのホームページと違うところ
 ◆画面が小さい・・全機種ちゃんと表示させるには
	文字数:漢字で横8文字X6行
	画像:	94×72ピクセル以下
	以上がスクロール無しで読める大きさ。スクロールは縦のみ。横幅94ピクセルを
	超える大きな画像は、縮小される。文字は8文字で改行される。

 ◆画像の制限・・・全機種ちゃんと表示させようと思うと2階調白黒(ベタ)の
	ノンインターレスGIFのみ。(機種によって4階調白黒、256色カラー。
	ただし全機種、今のところGIFのみ。502iのシリーズからインターレス、透過
	アニメーションGIFもOK)

 ◆ファイルサイズの制限
	1画面5kB以下(画像+HTML)。2kB以下を推奨。

 ◆文字コード・・・sift-JISのみ。したがって「半角カタカナが」使える。ファイルを
	少しでも小さくするのに半角カタカナを使おう。

 ◆よく使う<table>,<b>が使えない(一部機種では可)

 ◆文字大きさを変えることができない。 ただし一部機種で<font size=1>のみ小さな文字になります。  ◆独自のタグ   ・accesskey 電話ののボタンを押すとリンク先に飛ぶ <a href="./osusume.htm" accesskey="1">おすすめ</a> 電話ののボタンを押すとメール発信画面に <a href="mailto:hasegawa@star.gs" accesskey="1">メール</a> 電話ののボタンを押すとボタン、ラジオボタン、チェックボックスの クリック、textの文字入力画面への移動。 <input type="submit" value="検索" accesskey="1">   ・istyle (502iのシリーズのみ) <input type="text" istyle="属性値"> かな入力モードの初期値を変更できる 属性値 かな入力モード時 1 全角かな 2 半角カナ 3 英字 4 数字   ・tel 07055077856に電話をかける。 <a href="tel:07055077856">電話はこちら</a>  ◆imodeのタグ 通常のHTMLのタグを簡単にしたもの 詳細はドコモのページにあります。 http://www.nttdocomo.co.jp/i/tag.html  ◆フレームは使えない  ◆JavaScript,JavaApplet,スタイルシート,DHTML,cookie使えない。   JavaAppletは503iのシリーズから対応。 ■パソコンのホームページと同じ所  ◆通信方式はhttpです。従って普通のプロバイダーのサーバにおいてそのままで見ることが   できます。(EZwebは,こうはいきません。)  ◆タグの細かい制限を除けばほとんど同じです  ◆CGI,SSI使える。phpも使える。データベース検索のホームページが大流行。 ■機種別制限では満足できない場合  全機種共通ページにすると,白黒2階調画像しか使えないなど,不満足な点が多く  あります。CGIにて「HTTP_USER_AGENT」を取得し,機種別にページを振り分ける方法が  あります。2000年11月でカラーで閲覧可能なアクセスが50%を越えています。カラー  対応にしたいものです。  HTTP_USER_AGENTの例:DoCoMo/1.0/F502i/c10  ◆参考:機種別仕様
iモード端末 大きさ
(横全角文字数
×縦行数)
表示文字数
(全角)
液晶画面領域
(横×縦)
液晶画面領域
待受画面
(横×縦)
D501i 8×6 48 96×72ピクセル - 白黒2階調
F501i 8×6 48 112×84ドット - 白黒2階調
N501i 10×10 100 118×128ドット - 白黒2階調
P501i 8×8 64 96×120ピクセル 96×95ピクセル 白黒2階調
D502i 8×7 56 96×90ピクセル 96×120ピクセル カラー256色
F502i 8×7 56 96×91ドット 96×78ドット カラー256色
N502i 10×10 100 118×128ドット (大)118×114ドット
(小)118×70ドット
白黒4階調
P502i 8×8 64 96×117ピクセル 96×95ピクセル 白黒4階調
NM502i 8×6 48 111×106ピクセル 95×76ピクセル 白黒2階調
SO502i 8×8 64 120×120ドット 120×72ドット 白黒4階調
F502it 8×7 56 96×91ドット 96×78ドット カラー256色
N502it 10×10 100 118×128ドット (大)118×114ドット
(小)118×70ドット
カラー256色
SH821i 8×6 48 96×78ドット 96×78ドット カラー256色
N821i 10×10 100 118×128ドット (大)118×114ドット
(小)118×70ドット
白黒4階調
P821i 10×10 100 118×128ドット (大)118×114ドット
(小)118×70ドット
白黒4階調
D209i 8×7 56 96×90ピクセル 96×120ピクセル カラー256色
F209i 8×7 56 96×91ドット 96×78ドット カラー256色
N209i 9×6 54 108×82ドット (時計表示OFF時)
108×82ドット
(時計表示ON時)
108×54ドット
白黒4階調
P209i 8×6 48 96×87ピクセル 96×91ピクセル 白黒4階調
P209iS 8×6 48 96×87ピクセル 96×91ピクセル カラー256色
R209i 8×6 48 96×72ピクセル 96×72ピクセル 白黒4階調

■絵文字を使おう
 imodeの外字として,以下の絵文字が用意されています。
 小さなファイルサイズで少しでもデザインを良くすることができます。

 例: 晴れマーク

 
	絵文字は、等のコードにより
	表示されますが、下記imode用メールアプリを入れると、外字として
	インストールされます。カットアンドペーストで持ってくることができます
	iMailer http://www.nanosystem.ne.jp/right_menu.html

	絵文字一覧表はドコモのページにあります。
	http://www.nttdocomo.co.jp/i/tag/emoji/index.html
	
■少しでもファイルサイズを小さく

 2kBを見るのにパケット料が4.8円かかります。(128B 0.3円)
 ◆ファイルサイズを小さくするこつ
  ・画像より絵文字
  ・半角カタカナ
  ・数字 英文字 , 。などすべて半角
  ・ファイル名,フォルダ名は短く。http://www.sancho.co.jp/~i/
   これは携帯電話でURLを入力してもらうときの配慮ともなります。
  ・カラー画像には勇気がいる
    517B
    2385B
  ・地図や、簡単な図は└ ─ ┐等の文字で作れないか?

■カラー機種
 ◆画像(256色),文字,リンク,背景の色が指定できます。

 ◆カラーパレット
	#RRGGBBの組み合わせで,以下の256色です。
	Red	00(0) 24(36) 49(73) 6D(109) 92(146) B6(182) DB(219) FF(255)
	Green	00(0) 24(36) 49(73) 6D(109) 92(146) B6(182) DB(219) FF(255)
	Blue	00(0) 55(85) AA(170) FF()255
	カラーコード表はこちら
	赤、緑が8階調なのに、青のみ4階調です。またRGB同じ値の組み合わせが
	無いため灰色がうまく出ない。
	カラーは下記の256色なので,カラーパレットを拡散誤差方で変更すると
	きれいな画像になります。
	
		iモードカラー機種で使える色

	フォトショップのカラーパレット color.ACT
	写真はディザあり、ベタが多い文字,イラストはディザなしで変更しよう。
	減色は、Fireworksを使うのが良いかも
	
	モノクロの機種と画像を兼用しようと思うと、コントラストを高く

■■ 携帯ホームページの作り方 ■■

 ◆テーマを選ぶ。 imode風か
  ・外で情報入手、暇つぶし。
  ・パソコンのホームページを知らない世代あり
  ・以上のような小さな画面で情報伝達できるのか
  
 ◆何で作成するか
  ・手書き(簡単なHTMLなので手書きがお奨め)
	Windowsのメモ帳
	秀丸
  ・imode用のホームページエディタ
	iど〜も
	iホタル
  ・レイアウトの確認
	携帯電話でやるのが完璧。しかしパケット料金が。携帯電話の←↑→↓●キーで
	移動する感覚は、携帯電話がないとわかりにくい。
	インターネットエクスプローラ、ネットスケープを小さく表示する
	パソコン上でimodeの表示に準じたフリーウエアあり
		i-BRO artchips	http://superwww.com/i-bro/info/
		iモードTool 改	http://www.asahi-net.or.jp/~tz2s-nsmr/

 ◆表題は、漢字だと8文字以下
	8文字を超えると折り返してしまい、見にくくなる
	例: 京都の日の出時刻・・・OK

	   京都での星座の位
	   置	   ・・・だめ	

 ◆本文は改行せず、どんどんつなげる
	8文字の機種と、10文字の機種があり、8文字で改行してしまうと
	10文字の機種では見にくくなる。また<BR>タグ分ファイルが大きくなる

 ◆重要な単語の中で改行したらまずい場合は<NOBR>単語</NOBR>

 ◆絵文字を使おう

	例:シ電車での行き方

	愛想を良くする。GIF画像は、ファイルが大きくなる

 ◆トップページから浅い階層のページには、「戻る」を付けない
	imodeの初期設定は、常にファイルを読みに行くようになっている。「戻る」
	でリンクしてしまうだけで、パケット料金が発生する。imodeの←キーで
	戻ってもらうほうが良い。

 ◆縦方向はスクロールする。しかし全部ちゃんと読んでもらおうと思うと3〜4画面
  分くらいか。(漢字で150〜200文字)

サーチエンジンに登録
 ◆有名なサーチエンジン
	OH!NEW?		http://ohnew.co.jp/i/
	i-CON Search	http://www.webremix.com/i/
	iseek		http://iseek.infoseek.co.jp/
	ilycos		http://i.lycos.co.jp/
	yahooモバイル	http://mobile.yahoo.co.jp/
	あちゃらGATE	http://www.acaragate.com/

 ◆サーチエンジン一括登録
	少し前までもう少しあった気がするのだが
	いっせいアイ	http://www.i-say.net/isayi/

■参考になるサイト
 ◆iモードページ	http://www.nttdocomo.co.jp/i/
 ◆D502i用カラー	http://www.melco.co.jp/service/D-style/flash/d502/guide/index.html
  ページの作り方

■データベース
 ◆やはりimodeで多い情報量を入れるには、データベース形式にして、ユーザが打ち込んだ
  情報に対して、ページを作成するようにしたいもの。SQLなどのデータベースを使って
  サイトを作るのが流行っています。PHP3も使えます。この辺はプログラミングが必要です。

■imode以外のWebページ
種類EZ-WEBJ-SKYH"
表し方HDMLHTMLマルチパートのメール
TXT,HTML
画像形式BMPPINGBMP
プロトコルUDPTCPTCP