ケータイサイトのはなし ( 入 門 編 ) ke-tai.org 松 井 健 太 郎 Ver 1.0
自 己 紹 介 名 前 : 松 井 健 太 郎 出 身 : 北 広 島 市 職 業 : Webプログラマー Linuxサーバ 管 理 者 ケータイ 向 け 情 報 サイトを 運 営 しています http://ke-tai.org/ 菊 水 で 小 さな 会 社 を 営 んでいます 株 式 会 社 インフィニットループ http://www.infiniteloop.co.jp/
本 日 の 内 容 ケータイの 基 礎 知 識 ケータイHTMLのイロハ 製 作 のポイント PCとの 違 い 絵 文 字 画 像 CSSについて ケータイQ&A 質 疑 応 答
ケータイの 基 礎 知 識 (1) 各 社 のシェア ドコモ (57.7%) au (33.2%) ソフトバンク(9.1%) 2008 年 1 月 ビートレンド( 株 ) 調 べ( 実 アクセス 数 から 計 測 ) 最 近 ドコモシェアを 落 とし ソフトバンクが 伸 びてきている 但 し 業 界 の 動 きは 速 く 動 向 は 常 にチェックする 必 要 がある
ケータイの 基 礎 知 識 (2) 端 末 について 国 内 で 販 売 されたブラウザを 搭 載 した 端 末 は 約 650 種 類 年 間 約 100 端 末 のペースで 増 加 全 ての 端 末 を 揃 えることは 不 可 能 テスト 検 証 に 手 間 がかかる 端 末 によって 見 え 方 の 差 異 はあるが 近 年 少 しずつ 統 一 化 が 進 んでいる
ケータイの 基 礎 知 識 (3) 公 式 サイトと 勝 手 サイト キャリアのメニューに 載 っているのが 公 式 サ イト( 例 :imenu) それ 以 外 のサイトは 全 て 勝 手 サイト 公 式 サイトには 様 々なメリットが 公 式 メニューからのアクセス 流 入 有 料 サイト 化 / 決 済 が 出 来 る しかし 最 近 は 勝 手 サイトが 注 目 されている 広 告 等 による 課 金 に 頼 らない 収 益 モデル 検 索 エンジンの 普 及
ケータイの 基 礎 知 識 まとめ ケータイ 業 界 の 動 きは 早 く 常 に 動 向 をチェッ クする 必 要 がある 端 末 数 の 多 さ キャリアや 端 末 による 違 いの ため PCに 比 べてテストと 検 証 に 手 間 がかか る しかし 近 年 少 しずつ 改 善 傾 向 にある 勝 手 サイトが 見 直 されてきている
ケータイ HTMLのイロハ 製 作 のポイント これらを 押 さえておけば 大 丈 夫! 対 応 機 種 の 選 定 サイズ 制 限 画 像 CSS 絵 文 字 振 り 分 け 処 理
ケータイ HTMLのイロハ(1) 機 種 選 定 基 準 大 きく 分 けて2パターン 3G 以 降 のみ 対 応 古 い 端 末 にも 対 応 ドコモ:FOMA au:win ソフ トバンク:3GC 以 降 の 端 末 それ 以 前 (ムーバ, 2G 世 代 )の 端 末 XHTML(CSS)で 作 成 CHTMLで 作 成 画 面 はQVGA(240 320)が 基 準 画 面 の 大 きさはマチマチ 若 者 向 け デザイン 重 視 公 共 サービス 等 に シンプル
ケータイ HTMLのイロハ(2) 1 画 面 のサイズ ケータイには1 画 面 のサイズ 制 限 がある サイズ 制 限 とは サイズとは1 画 面 内 のHTMLと 画 像 を 全 部 合 わせた 容 量 1 画 面 のサイズは 端 末 のキャッシュサイズで 決 まる オーバーすると 最 大 サイズを 超 えたので 中 断 しました といっ たエラーが 出 る 最 近 の 一 般 的 な 端 末 では100kb 程 度 対 策 方 法 長 い 文 章 はページ 分 けする 画 像 は 極 力 サイズ( 画 質 色 数 )を 抑 える
ケータイ HTMLのイロハ(3) 画 像 について 使 える 画 像 形 式 と 使 えない 画 像 形 式 がある JPEGは99%どの 端 末 でも 表 示 OK GIFもほぼOK (3G 以 前 のVodafone 端 末 は 非 対 応 ) PNGはドコモ 端 末 が 非 対 応 大 きさは 横 220ドットくらいが 無 難 (QVGA 端 末 といっても 厳 密 に240ドットは 無 い)
ケータイ HTMLのイロハ(4) CSSについて ドコモのみ 仕 様 が 大 きく 異 なる auとソフトバンクは PCとさほど 変 わらない 形 で CSSが 利 用 可 能 ドコモはかなり 特 殊 外 部 CSSファイルは 読 めない 例 :<link ref= xxx.css type= text/css /> ヘッダ 部 に 書 くこともできない 例 :<style type= text/css >xxx</style> 全 てstyle= xxx:xxx で 記 述 例 :<div style= color:#ff0000 >test</div> 拡 張 子 は.xhtml とする サーバ 設 定 (.htaccess)で 変 更 も 可 能 規 定 のDOCTYPE 宣 言 が 必 要
ケータイ HTMLのイロハ(5) 絵 文 字 について 各 キャリアそれぞれで 異 なる 絵 文 字 ドコモ ドコモ バイナリコードで 入 力 ツールを 利 用 して 入 力 Unicodeのテキスト 形 式 で 入 力 例 : au au <img localsrc= 絵 文 字 番 号 >で 入 力 ドコモのバイナリコードは 自 動 で 変 換 がかかる ソフトバンク ソフトバンク ウェブコードで 入 力 ツールかコピーペーストで 入 力 例 : $G! 絵 文 字 入 力 ツール: Windows: i 絵 文 字 (ドコモ 公 式 ) OshimaExe(フリーウェア) MacOS: エモジモ2(フリーウェア)
ケータイ HTMLのイロハ(6) キャリア 振 り 分 けについて PCやキャリア 別 でフォルダを 振 り 分 ける ユーザエージェントを 見 て 振 り 分 け 処 理 を 行 う 振 り 分 けはPerl, PHP 等 で 行 う.htaccess でも 可 能 /mobile/i/(ドコモ 用 ) 振 り 分 け 用 プログラム /mobile/ez/(au 用 ) /mobile/sb/(ソフトバンク 用 ) top.html(pc 用 ) 振 り 分 けせずプログラムで 絵 文 字 を 出 し 分 ける 方 法 も オープンソースの 絵 文 字 変 換 用 プログラムが 多 数 存 在
ケータイ HTMLのイロハ まとめ まず 対 応 機 種 を 決 め それに 合 わせたコンテンツを 作 成 する 最 近 は3G 以 降 のみ 対 応 が 多 い 1 画 面 あたりのサイズ 制 限 がある 長 いページや 画 像 を 多 用 する 際 には 注 意 画 像 は JPEG, GIF を 使 うこと CSSは style= xxx で 書 く 必 要 がある 絵 文 字 は 各 キャリアで 異 なるが ソフトバンクだけ が 互 換 性 が 無 いので 注 意 振 り 分 けやプログラムを 利 用 するとよい
ケータイ Q&A(1) Q. 参 考 となるHPや 書 籍 はありますか? A. あまり 無 いのが 実 状 です ホームページ: 各 社 の 公 式 サイト 必 要 な 情 報 が 一 通 り 載 ってます 書 籍 : ケータイHTML コンパクトリファレンス 携 帯 端 末 用 Web 製 作 バイブル Web+DB Press Vol23( 特 別 企 画 2)
ケータイ Q&A(2) Q. いちいち 実 機 で 確 認 しながら 作 成 し ているのですか? A. していません 基 本 はPCのブラウザ で その 後 エミュレータや 実 機 で 作 成 します Firefoxプラグイン User Agent Switcher エミュレータ ドコモ iモードシミュレータii au Openwave SDK ソフトバンク ウェブコンテンツビューアー その 他 P1エミュレータ
ケータイ Q&A(3) Q. 実 機 テストをしたいのですが 端 末 を 持 っ ていません 何 機 種 くらい 揃 えれば 良 いですか? A. 無 理 して 幾 つも 買 う 必 要 はありません ひとまず3 台 ( 各 キャリア1 台 )は 揃 えましょう なるべく 違 う 世 代 ( 発 売 日 ) 違 うメーカーで 揃 えましょう 無 い 分 は 知 り 合 いから 借 りたり エミュレータで 我 慢 しましょう ドコモ ソフトバンクは カード 差 替 可 能 なので 古 い 端 末 を 貰 いましょう 東 京 に 貸 出 サービスを 行 っている 業 者 があります ケータイ マイスタ ケータイラボなど 料 金 は 基 本 料 金 9,000~9,500 円 +1 端 末 あたり1,500~1,800 円
ケータイ Q&A(4) Q. ケータイ 独 自 のタグや ケータイでは 使 えないタグがあると 聞 きましたが? A. はい あります ケータイ 独 自 のタグ( 属 性 )の 例 istyle 標 準 の 入 力 モード( 漢 全 カナ 半 英 半 数 半 )を 指 定 する 例 :<input type= text istyle= 1 > accesskey ケータイのボタンを 押 すことでリンクを 押 せる 例 :<a href= test.html accesskey= 0 >test</a> phoneto リンクを 押 すことで 電 話 をかけられる 例 :<a href= tel:0123456789 > 発 信 </a> ケータイでは 使 えない( 無 視 される)タグの 例 bタグ(docomo, au) tableタグ(docomo FOMA901i 以 前 )
ケータイ Q&A(5) Q. ケータイFlashについて 教 えてください A. FlashLite が 利 用 できます ケータイで 使 えるのは FlashLite という 規 格 です 現 在 搭 載 されているバージョンは 1.0 1.1 2.0 3.0 制 限 付 きだがActionScriptも 使 えます FlashLite 対 応 端 末 のシェアは 94.2% フルFlashサイトも 増 えてきました 2008 年 1 月 ビートレンド( 株 ) 調 べ( 実 アクセス 数 から 計 測 )
ケータイ Q&A(6) Q. HTMLの 文 字 コードには 何 を 使 えばよい のでしょう? A. SJISかUTF-8を 使 いましょう 基 本 はSJISです 古 い 端 末 ではSJISしか 表 示 できません 最 近 の 機 種 (FOMA 以 降 )は ほぼUTF-8が 使 えます CGIやPHP 等 のプログラムが 関 係 してくる 場 合 は UTF-8の 方 が 親 和 性 が 高 い 場 合 があります
ケータイ Q&A(7) Q. 地 図 を 表 示 したいのですが どうした らよいですか? A. Google Static Maps API というの があります imgタグに 座 標 などのデータをつけるとGIF 画 像 で 表 示 されます http://maps.google.com/staticmap? center=[ 中 心 の 緯 度 ],[ 中 心 の 経 度 ] &zoom=[ズームレベル] &size=[ 画 像 の 横 幅 ]x[ 画 像 の 高 さ] &maptype=[mobile or roadmap] &markers=[マーカーの 緯 度 ],[マーカーの 経 度 ],[ 色 ][アルファベット] &key=[apiキー(googlemapと 共 通 )]
ご 静 聴 ありがとうございました