携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-
XHTML+CSSで一歩進んだモバイルサイトを作るテクニックを幅広く紹介☆
このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
書影


携帯サイトの作り方を詳しく解説した本
「携帯サイト コーディング&デザイン」が12月26日(金)に発売(予定)になります。
非常に反響の大きかったThinkITの今から始めるモバイルサイト制作以来の執筆(単著)です。

──────────────────────────────
携帯サイト コーディング&デザイン
12/26 発売予定
ISBN 978-4-7973-4848-4
著者 高木 悠介(ペンネーム)
価格 2,709円
ページ数 260
出版社 ソフトバンククリエイティブ
──────────────────────────────

今までも、携帯サイトの制作に触れた本はあったのですが、
各キャリアが公表している仕様をただ右から左に流しているだけの書籍や
携帯サイトだけではなく、デコメや着メロ、アプリの作り方など
携帯サイトでできることを鳥瞰したような広く浅い内容で、
誰に向けた本なのかターゲットが絞り切れていない本が多かったため、

「結局、汎用性のある携帯サイトを効率的に作るにはどうすればいいの?」

という当たり前の疑問を解決できるような書籍を目指し、執筆いたしました。
本書のターゲットは当ブログの読者と同じで、
「PCサイトを作ったことがあるけれど、携帯サイトはよく分からない」
という方を対象に、携帯サイトのマークアップ(HTML、CSS)と
3キャリア携帯サイトを作る上でのデザインテクニックを解説した本です。

本書の特徴としては、

1. 3キャリアに対応したHTMLやCSSの書き方
2. 表現力の高いモバイルサイトを作る技
3. ユーザビリティに配慮したサイト構成
4. キャリア別のHTMLタグ、CSSリファレンスを掲載

あたりでしょうか。
通常、この手の書籍は最後のリファレンスに
絵文字の一覧表や端末のスペック表、カラーチャート表などを載せていますが、
これはキャリアのホームページを見れば良いわけですし、なんとなく内容の水増しにしか見えません。
(いろいろと事情はあるようですが…)

■HTMLごとに属性やCSSの挙動、対応表、ポイントなどをキャリア別に詳解
リファレンス

対して、本書はそのようなものは一切載せず、4.のリファレンスが充実しているという
面白い本にしてみました。実機画面(3キャリアごとに)を掲載し、
HTMLやCSSをどのように書くと、実機ではどうなるなるのか、
キャリアごとの違いはどう出るのか、といったポイントをまとめています。
(実はこの部分が一番大変だったわけですが…)
CSSリファレンスもうまくキャリア別にまとめられて良かったと思っています。

目次は以下のようになります。

目次

Chapter 1 独自に進化する携帯サイトの世界
1-1 携帯サイトを取り巻く状況
1-1-1 ユーザー層
1-1-2 携帯サイト利用率とシェア
1-1-3 コンテンツサービスの状況
1-1-4 端末の市場動向
1-1-5 携帯サイトのこれから
1-2 携帯サイトが注目される理由
1-2-1  24時間持ち歩く携帯
1-2-2 垂直統合がもたらす認証・著作権・課金モデル
1-2-3 公式サイトと勝手サイト

Chapter 2 携帯サイトはPCサイトと何が違うのか
2-1 携帯キャリア独自の仕様
2-1-1 携帯ブラウザ
2-1-2 HTMLの種類
2-1-4 CSS
2-1-5 絵文字
2-1-6 文字エンコード
2-2 端末に依存する仕様の違い
2-2-1 扱える画像の種類と目安
2-2-2 キャッシュ容量
2-2-3 画面サイズ
2-2-3 文字サイズ
2-3 携帯サイトならではの機能
2-3-1 電話を直接かける
2-3-2 電話帳登録
2-3-3 メールを送る
2-3-4 フルブラウザ切り替え
2-3-5 ブックマーク
2-3-6 GPS
2-4 携帯サイトではできないこと

Chapter 3 汎用的な携帯サイトの作り方
3-1 目的や規模に合わせた作成法の選択
3-1-1 キャリア別静的サイト
3-1-2 3キャリア対応の静的サイト
3-1-3 プログラム完結型
3-2 携帯サイトを作るために知っておくべき知識
3-2-1 基本はPCサイトと同じ
3-2-2 HTMLタグとCSS組み合わせによるキャリア別挙動
3-2-3 よく使う、使わないHTMLタグとCSS
3-3 汎用的なサイトを作る
3-3-1 標準的なサイト構成
3-3-2 サンプルサイトのソースの解説
3-4 携帯サイトの慣習テクニック
3-4-1 装飾は絵文字が最大の武器
3-4-2 半角カナのなせる技
3-5 動作確認
3-6 PCサイトから携帯サイトへの導線付け
3-6-1 htaccessを使ったユーザーエージェント振り分け
3-6-2 IP制限
3-6-3 QRコード
3-6-4 METAタグ

Chapter 4 3キャリア対応携帯サイトの制作ノウハウ
4-1 HTMLヘッダー
4-1-1 HTMLかXHTMLか
4-1-2 DOCTYPE宣言
4-1-3 コンテンツMIMEタイプ
4-2 画像についてのルール
4-2-1 画像の種類と画面サイズ
4-2-2 再配布の禁止
4-3 文字関連のルール
4-3-1 文字色の指定
4-3-2 文字サイズの変更
4-3-3 インデント
4-4 CSS関連のルール
4-4-1 インラインCSSと外部CSS
4-4-2 使えるCSSプロパティ
4-5 「こうしたい」を実現するデザインテクニック
4-5-1 色つき罫線 <HR>
4-5-2 spacer.gifによる疑似罫線
4-5-3 背景見出し(反転文字)
4-5-4 点線区切り
4-5-5 画像の回り込みと解除
4-5-6 下位互換のための記述方法
4-5-7 ページ内リンク
4-5-8 バグの考慮
4-6  CSSハック
4-6-1 外部CSS
4-6-2 CSSへの対応状況の違いを逆手にとる

Chapter 5 携帯サイトのユーザビリティ
5-1 使いやすさを向上する
5-1-1 リンク先とアンカーテキスト
5-1-2 アクセスキー
5-1-3 フォーム入力補助
5-1-4 ページ内コピー
5-1-5 ドメイン指定拒否解除、許可登録
5-1-6 内部リンク
5-1-7 ダイレクト操作
5-1-8 利用者に安心感を与える
5-2 視認性を高めるコツ
5-2-1  1行以内に収める努力
5-2-2  文字量を減らすテクニック
5-2-3 罫線文字で階層を可視化する
5-2-4 メニューと内容説明を1行で示す
5-2-5 余白はできるだけ詰める
5-2-6 PCサイトとは違う画面遷移
5-2-7 色の扱い方

Appendix
A-1 携帯絵文字変換スクリプト
A-2 3キャリア対応携帯画像変換
A-3 キャリア別に外部CSSを切り替える

Reference
・HTMLタグとCSSのキャリア別挙動
文書の本文を記述する
文書のヘッダー部を指定する
HTML 文書であることを示す
HTML 文書のタイトルを示す
略語であることを示す
頭字語であることを示す
住所や連絡先、電話番号などを示す
引用の文章であることを示す
改行を表す
引用や参照を示す
定義部分であることを示す
汎用的なひとかたまりの範囲を定義する
論理的な強調を行う
見出しをつける
キーボードから入力される文字であることを示す
段落であることを示す
プログラムソースなどをそのままの状態で表示する
短い引用を示す
プログラムの出力サンプルを示す
汎用タグ
論理的な強調を表す
プログラムコードの引数や変数を示す
リンクを示す
定義リストで定義する単語と解説を行う
順序なし/ありリストを表示する
入力フォームを表示する
入力フォームの各部品
表を表示する
表の中で表題を示す
画像を表示する
文字を太字にする
文字をひとまわり大きくする
水平方向の罫線を引く
文字を斜体にする
文字をひとまわり小さくする
メタデータを入力する
href属性で指定した文書を参照する
スタイルシートを記述する
ページに記述されたリンク先URLの基準となるURL

・キャリア別CSSプロパティ対応表
NTTドコモ
au
ソフトバンク

Index


本を出すタイミングとしては、高機能な携帯端末が一巡し、リッチな携帯サイトを
閲覧できる環境が整った昨今の状況を考慮すれば、まずまずなのかなと思います。
ぜひ、ご興味があればお手にとってご覧ください!

このあたりの内容は以前のThink ITで執筆させていただいたときも、
特集の中では一番PVもあり反響も大きかったみたいですが、
今回の書籍は完全に未知数。はたして…(^ ^;)

■完全フルカラー
完全フルカラー

全国の書店に流通するのはおそらく早いところで26~28日くらいに
なるのではないかと担当者の方はおっしゃっていました。
待てない方はご予約を(笑)
Amazonでは26日に発売、現在予約受付中となっています。
都内の大きな書店では先行販売も行うみたいです。

■ユーザビリティの解説も
ユーザビリティ

ここ数ヵ月間、本当に忙しい毎日でしたが、
このような執筆活動の機会をいただけて本当にうれしいです。

本書と荒木さんが先日出された
「PHP×携帯サイト デベロッパーズバイブル」もぜひ!



こちらの本と併せて、携帯サイトがさらに活気づけば幸いです。
みなさん携帯サイト作りましょう!

それでは。





管理者にだけ表示を許可する


すみませんでした
お世話になっております。
わかりました。どうやら「AddType application/xhtml+xml .htm .html」が足りなかったようです。今使っているサーバでは.htaccessを設置することも変更することもできないようで断念するしかないようです。
他のサーバにおいたら普通に動いていました。AuthConfig と Limit は動くといわれましたがなんのことやら^^;

ご迷惑をおかけしました。失礼致します。
eri | URL | 2009/05/22/Fri 11:27 [EDIT]
なんででしょ
本のほう購入して活用させて頂いております。
質問させて頂けそうなのでご質問なのです。3機種対応でメニュのところに背景帯にように入れと思いまして以下のように入力しました。
<div style="background-color:#ccffff;color:#ffffff;text-align:center">
<div class="line1">Menu</div>
</div>
N-03AやNTTのエミュレータIIでは背景が表示されませんでした。
これはヘッダとかの問題なのでしょうか。
良く分からなくなってしまいましたので質問させて頂きました。

よろしくお願い致します。
eri | URL | 2009/05/21/Thu 23:13 [EDIT]
Re : さっそく活用しています。
mimoさん

書き込みありがとうございます。
またご購入ありがとうございます!

お役に立ててとても光栄です。
書籍で疑問に思ったこと、ご質問等あれば、
気兼ねなくおっしゃってください。

今後も、ブログ、書籍共々よろしくおねがいします。

shiba | URL | 2009/01/10/Sat 09:58 [EDIT]
さっそく活用しています。
はじめまして。
書籍の末尾にあるURLを見て来ました。

いつもネットで検索して、
新しそうな情報をつぎはぎしながら作業していました。

結局どれがベストなのか、
判断できずに作業をすすめることがおおかったのですが、
この参考書を読んで、気分がすっきりしました。

最新のノウハウで頭の中が再構築された気分です。

ありがとうございました。
mimo | URL | 2009/01/09/Fri 14:21 [EDIT]
Re : 素晴らしい参考書有り難うございます。
> Kamitani79さん

お世話になっています。
書き込みありがとうがとうございます!

また、ブログでの本書籍のご紹介ありがとうございました。
ご購入ありがとうございます。

確かに大変なところこもありましたが、
無事出版できて良かったです。

今後ともよろしくおねがいいたします!

shiba | URL | 2008/12/27/Sat 22:40 [EDIT]
素晴らしい参考書有り難うございます。
とても素晴らしい参考書有り難うございます。
大変だったと思いますが、これからも活躍期待していますv-162v-162
Kamitani79 | URL | 2008/12/27/Sat 20:44 [EDIT]




Copyright © 携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-. all rights reserved.

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。