詳しくはsympleブログのエントリーで解説されていますが、このエントリではラウンドアバウトが用意している拡張タグ
- <ra:field></ra:field>
- <ra:area></ra:area>
携帯サイト実践ノウハウ：auで発生する「画像の隙間問題」を解消する
ブロック要素に背景色を付けるデザインは、ページにメリハリを付けるのに効果的なのでよく使われますが、auではたびたび「隙間発生問題」という意図通りの表示がされない問題にも遭遇します。
詳しくはsympleブログのエントリーで解説されていますが、このエントリではラウンドアバウトが用意している拡張タグ
詳しくはsympleブログのエントリーで解説されていますが、このエントリではラウンドアバウトが用意している拡張タグ
携帯サイト制作の実践ノウハウ：コンテンツ変換をカスタマイズする２つの方法
ここ数回のエントリーで、「PI機能」や「変換シート」を利用してコンテンツの表示コントロールをする方法を紹介しています。どちらもカスタマイズが可能なコンテンツ変換機能ですが、今回はこの２つの機能の違いや使い分けについて説明します。
●PI機能を使った変換イメージ
●変換シートを使った変換イメージ
まず大きな違いは、上の絵のように、「PI機能」はコンテンツの部分ごとに書き分けられるCASE式のようなもので、「変換シート」はサイト内で一括管理される変換設定である、という点です。
また、画面サイズやGPS対応/非対応など、機種スペックに応じた出し分けが可能なのはPI機能だけということも、決定的に違うところです。
●PI機能を使った変換イメージ
●変換シートを使った変換イメージ
まず大きな違いは、上の絵のように、「PI機能」はコンテンツの部分ごとに書き分けられるCASE式のようなもので、「変換シート」はサイト内で一括管理される変換設定である、という点です。
また、画面サイズやGPS対応/非対応など、機種スペックに応じた出し分けが可能なのはPI機能だけということも、決定的に違うところです。
携帯サイト制作の実践ノウハウ：破線や色付きの区切り線をhr要素で表示する
以前外部CSSでのエントリーでも触れましたが、区切り線（hr要素）はキャリアごとにCSSプロパティの効き方が異なるので、破線や色で装飾したhr要素を３キャリアで使うのは大変です。hr要素の代わりにいっそ画像を使うというのも一つのよい判断です。
しかし画像にしたらしたで、src属性を書くことでHTMLソースが長くなります。区切り線はサイトの中で頻繁に使うものなので、<hr />そのままの記述で簡単に画像が表示できたらなぁと思いませんか？
できます。ここ数日のエントリーでも紹介している、変換シートを活用することで可能です。
しかし画像にしたらしたで、src属性を書くことでHTMLソースが長くなります。区切り線はサイトの中で頻繁に使うものなので、<hr />そのままの記述で簡単に画像が表示できたらなぁと思いませんか？
できます。ここ数日のエントリーでも紹介している、変換シートを活用することで可能です。
携帯サイト制作の実践ノウハウ：キャリア別にメール受信設定リンクを出分ける
空メールを使った携帯サイトやサービスがよくあります。迷惑メールを懸念し携帯ドメイン以外のメールアドレスからの返信を拒否するユーザーも多いので、ユーザー離脱を起こしやすいです。こうしたユーザーに配慮し、ドメイン拒否指定をの解除がしやすいように、メール受信設定が行えるキャリアのURLにリンクを貼るなどします。
ラウンドアバウトのない静的なHTMLでは３キャリア分のリンクを列挙することになります。違うキャリア用のリンクを踏むとエラーになるので、ユーザビリティを考慮して出し分けしたいところです。
前回書いたように、ラウンドアバウトではPI機能または変換シートの２つの方法で出し分けをすることができます。
ラウンドアバウトのない静的なHTMLでは３キャリア分のリンクを列挙することになります。違うキャリア用のリンクを踏むとエラーになるので、ユーザビリティを考慮して出し分けしたいところです。
前回書いたように、ラウンドアバウトではPI機能または変換シートの２つの方法で出し分けをすることができます。
携帯サイト制作の実践ノウハウ：プログラムレスで全角カタカナを半角カタカナに変換・表示する方法
PCでは見やすい全角文字も、携帯では表示可能な幅が小さい関係上、縦に長くなりやすく見難くなるので、半角カナがよく使われます。全角を半角に変換する作業を人手で行うのは大変です。特にPC・携帯でデータソースを共有したりコンテンツ量が多い場合は、変換処理を行うアプリケーションが必要になります。
ラウンドアバウトでは変換ルールにカスタムルールを追加することができるので、こうした全角カタカナを半角カタカナに一括置換することもプログラムレスで可能です。
ラウンドアバウトでは変換ルールにカスタムルールを追加することができるので、こうした全角カタカナを半角カタカナに一括置換することもプログラムレスで可能です。
携帯サイト制作の実践ノウハウ：マルチキャリアで見えるコピーライトマーク（©）の出し方
コピーライト「©」や登録商標「®」のような文字参照は、auでは「C」「R」と表示されます。下のように英字テキストと接したところが「R」や「C」になってしまうと、ユーザーに正確な情報が伝えられないので困り者です。
（W61Kでの登録商標マーク、コピーライトマークの表示）
携帯サイト制作のヒント：綺麗な箇条書きを実現するには？
箇条書きリストは情報を整理して見せるのに効果的ですが、PCサイトでは一般的でも携帯サイトでは使われません。下の例のように字下げ幅やマーカーの見た目の違いが大きいことや、ドコモはCSSプロパティでアレンジできることがほとんどないことから、見た目をアレンジしたくても３キャリアで同じような表示ができないのです。
（画面：左からdocomo 904i、au G9、SoftBank 920P）
携帯サイト制作のヒント：回り込みはできますか？
ページレイアウトを工夫する際画像のテキスト回り込みは携帯サイトでもよく見られます。ドコモ・ソフトバンクはCSSのfloatプロパティ、auはalign属性とキャリアによって方法が異なり、一般的にはベタベタに両方を書いたりキャリアによって記述を分けたりします。
ラウンドアバウトなら言語変換と外部CSSで簡単にワンソースで回り込みができます。外部CSSに対応しないiモードブラウザ1.0のFOMAにはCSSプロパティをインライン展開し、floatプロパティが効かないau向けにはalign属性に言語変換します。
ラウンドアバウトはサンプルCSSファイルに回り込みと回り込み解除用のクラスセレクタを用意しています。これを利用しワンソースで回り込みする例をお見せします。
ラウンドアバウトなら言語変換と外部CSSで簡単にワンソースで回り込みができます。外部CSSに対応しないiモードブラウザ1.0のFOMAにはCSSプロパティをインライン展開し、floatプロパティが効かないau向けにはalign属性に言語変換します。
ラウンドアバウトはサンプルCSSファイルに回り込みと回り込み解除用のクラスセレクタを用意しています。これを利用しワンソースで回り込みする例をお見せします。
携帯サイト制作のヒント：外部CSSは使えますか？
一般的に、３キャリア向けXHTMLページを作るには外部CSSを使用せずstyle属性を使ったインラインCSSを使用する方法が推奨されています。
これは、auとソフトバンク、iモードブラウザ2.0搭載のドコモは外部CSSに対応するが、現在最も普及するiモードブラウザ1.0のFOMAでは外部CSSに対応せずインラインCSSだけという事情によるものです。
ラウンドアバウトはiモードブラウザ1.0のFOMAでも外部CSSを使った携帯サイトを見せることができます。class属性に名称（セレクタ）を書けば、ラウンドアバウトが外部CSSファイル中の該当するCSSプロパティをインラインCSSに展開するからです。ページの装飾に関する記述をXHTMLのそこかしこに散らばすのでなく外部CSSファイル一箇所に集められることのメリットは大きいです。
これは、auとソフトバンク、iモードブラウザ2.0搭載のドコモは外部CSSに対応するが、現在最も普及するiモードブラウザ1.0のFOMAでは外部CSSに対応せずインラインCSSだけという事情によるものです。
ラウンドアバウトはiモードブラウザ1.0のFOMAでも外部CSSを使った携帯サイトを見せることができます。class属性に名称（セレクタ）を書けば、ラウンドアバウトが外部CSSファイル中の該当するCSSプロパティをインラインCSSに展開するからです。ページの装飾に関する記述をXHTMLのそこかしこに散らばすのでなく外部CSSファイル一箇所に集められることのメリットは大きいです。
フリースタイルな携帯言語変換：フォーム入力モード
フォームの入力モードを内容に応じて自動で切り替える入力補助機能は、テンキーで操作する携帯サイトにとって使い勝手を大きく向上させるので、是非取り入れたいものです。生年月日や電話番号のように数字入力を要求しているのであれば、初めから数字入力モードになっていて欲しいものです。
指定方法はキャリアやXHTMLかHTMLかによって色々です。それにキャリア互換があるとかないとか、キャリアによって動作が合わないだとか、とにかくもう実にややこしいことになっています。
指定方法はキャリアやXHTMLかHTMLかによって色々です。それにキャリア互換があるとかないとか、キャリアによって動作が合わないだとか、とにかくもう実にややこしいことになっています。
フリースタイルな携帯言語変換：絵文字
携帯絵文字はキャリアごとに種類や数も異なり書き方や互換性もバラバラなので、何らかの絵文字変換ソリューションの導入がコストを抑える手段と考えるのが一般的です。
元コンテンツに最も使われやすいのはドコモのiモード絵文字です。絵文字入力ツールが用意され入力が容易なことや、絵文字の種類が最も少ないのでマッピングを考えたときiモード絵文字をベースに考えるのが最も都合がよく、逆を取るのは高コストになるからでしょう。
こうした理由からか他の変換ソリューションの多くは変換元絵文字をiモード絵文字としているので、携帯サイト開発の現場で使うことのできる絵文字は自ずとiモード絵文字に限定されます。
元コンテンツに最も使われやすいのはドコモのiモード絵文字です。絵文字入力ツールが用意され入力が容易なことや、絵文字の種類が最も少ないのでマッピングを考えたときiモード絵文字をベースに考えるのが最も都合がよく、逆を取るのは高コストになるからでしょう。
こうした理由からか他の変換ソリューションの多くは変換元絵文字をiモード絵文字としているので、携帯サイト開発の現場で使うことのできる絵文字は自ずとiモード絵文字に限定されます。
携帯コンテンツ変換の選定基準：お試し変換ソース
携帯コンテンツ変換の導入を考えているなら、実際にどんなソースが動作するのか、試すことが必要です。開発や運用の負担がどれくらい減るのか、どの程度の表現力があるかは試さないと分かりません。
ここでは、ラウンドアバウトでの特長が分かり、おそらく他のソリューションでは機種毎に見え方異なるだろう、シンプルでプレーンなhtmlを提示します。製品検討時には、是非こちらを試してみてください。
ここでは、ラウンドアバウトでの特長が分かり、おそらく他のソリューションでは機種毎に見え方異なるだろう、シンプルでプレーンなhtmlを提示します。製品検討時には、是非こちらを試してみてください。
フリースタイルな携帯言語変換：DOCTYPE宣言
XHTMLでページを作る際XML宣言の他DOCTYPE宣言の記述が必要ですが、何も見ずに空で宣言をタイプする人は少ないと思います。そこでDOCTYPE宣言の内容を書籍やインターネットから調べるのですが、「携帯 XHTML DOCTYPE」で検索すると、各キャリア向けのDOCTYPE宣言を解説するページがヒットします。キャリアごとに推奨するものが異なり、iモードの場合さらにiモードXHTMLバージョンに応じて記述が変わるので、「まとめ」と称しながら、種類が多くなっています。これを読んだサイト開発者としては結局どれを書けばよいのか悩んでしまうでしょう。またどれか一つDOCTYPE宣言を決めたら、記述するXHTMLもそれに従うべきなのか？と、さらに開発者を迷わせることになります。
フリースタイルな携帯言語変換：マーキー
携帯コンテンツを作る際、マークアップ言語は何を使ったらよいのか？ラウンドアバウトでは次のように考えています。
- XHTMLなら何でもOK
- CSS利用可能
携帯コンテンツ変換の選定基準：変換エラーと変換アーキテクチャー
コンテンツ変換システムにおいて、変換仕様はもちろん重要ですが、
正しい記述で変換仕様にのっとった例）
<FONT color="black" >Hello</FONT>
→ <span >Hello</span>
実は、変換仕様「外」の振る舞いも、負けず劣らず重要です。
間違った記述の変換仕様外の例）
正しい記述で変換仕様にのっとった例）
<FONT color="black" >Hello</FONT>
→ <span >Hello</span>
実は、変換仕様「外」の振る舞いも、負けず劣らず重要です。
間違った記述の変換仕様外の例）
- <FOMT color="black" >Hello</ont> （存在しないタグ）
- <FONT >Hello (閉じてない)
- <FONT colorblack=" >Hello</FONT> （属性記述に間違い）
- <FONT color="black" ><div>A</div>Hello</FONT> (インラインタグ内にブロックタグ)
HTMLは何を使ったらいいのか？
全キャリア対応の携帯サイトを作る際に最初に決めなければいけないものが、使用するHTMLです。そして、ほとんどの場合、iモードXHTMLを推奨しています。もしサイトが2Gもサポートしたいのであれば、iモードHTML（CHTML）となるか、2G/3Gで２つの言語を出し分けることになります。
細かい仕様の違いは他の情報源を見ていただくとして、実は表現力の違いはiモードXHTMLとCHTMLにはあまりありません。大きなところで背景色が使えるところくらいです。そしてchtmlは2G/3Gで基本的には見れますが、xhtmlは2Gでは見ることができません。なのでxhtmlの時代ということを考えなければCHTML（ver.7）を利用するのは１つの合理的判断だと思います。
