当ブログは移行しました。

http://www.symmetric.co.jp/blogに移行しました。
5秒後に自動的に移動します。
移動しない場合はこちらをクリックしてください。

携帯サイト制作の実践ノウハウ:プログラムレスで全角カタカナを半角カタカナに変換・表示する方法

PCでは見やすい全角文字も、携帯では表示可能な幅が小さい関係上、縦に長くなりやすく見難くなるので、半角カナがよく使われます。全角を半角に変換する作業を人手で行うのは大変です。特にPC・携帯でデータソースを共有したりコンテンツ量が多い場合は、変換処理を行うアプリケーションが必要になります。

ラウンドアバウトでは変換ルールにカスタムルールを追加することができるので、こうした全角カタカナを半角カタカナに一括置換することもプログラムレスで可能です。



携帯サイト制作の実践ノウハウ:マルチキャリアで見えるコピーライトマーク(©)の出し方

コピーライト「©」や登録商標「®」のような文字参照は、auでは「C」「R」と表示されます。下のように英字テキストと接したところが「R」や「C」になってしまうと、ユーザーに正確な情報が伝えられないので困り者です。


(W61Kでの登録商標マーク、コピーライトマークの表示)

携帯サイト制作の実践ノウハウ:ドコモ絵文字を本来の色で見せたい

デフォルト(青)以外のリンク色が設定されたページで、リンクテキストに絵文字を使うと、ドコモでは絵文字の色がリンク色と同じになります。リンクに限らず通常のテキストに色指定した場合も同様のことが起きます。これでは絵文字の装飾が際立たず、見栄えもしません。



本来の絵文字の色に戻すには、下のソースのようにspanタグ(XHTMLの場合)かfontタグ(CHTMLの場合)で文字色を指定する必要があります。

どこまでも拡張できる超大規模システムを目指して

"THE MAGIC ROUNDABOUT"というものがあるそうで、ラウンドアバウトがいくつも連結しています。


大きな地図で見る

運転するとなれば、これはちょっとびびりますね...

携帯コンテンツ変換のラウンドアバウトでは、大規模システムをターゲットした製品です。大規模システムに要求されるシビアな品質と拡張性こそ、ラウンドアバウトが実現している比類なき特性です。

快適な交差点→安定して高速な変換システムを目指して②

通行量が適切であると、実際のラウンドアバウトでは不思議なくらい、うまく機能するようです。



携帯コンテンツ変換のラウンドアバウトでは、大量の通信が発生しても常に安定的なサービスが出来るように不断の努力をしています。

快適な交差点→安定して高速な変換システムを目指して①

パリの凱旋門はもしかしたら一番有名なラウンドアバウトかもしれません。


大きな地図で見る

そこでも、交通量が増えてくると、ノロノロの渋滞も起きるようです。



携帯コンテンツ変換のラウンドアバウトでは、このようなことが無いように設計・実装されています。

事故の無い交差点→ロバストなシステムを目指して

本当のラウンドアバウト(交差点)の運転は、最初は非常に難しいらしい(人伝の話ですが)です。なかなか入れない、下手をすればグルグル回ったり、違うところへ出ちゃったり...経験が無くても想像はつきます。

最悪、事故になることもあります。



でも、コンテンツ変換エンジンである製品では、事故はどうしても防がなければなりません。これが「ロバストなシステムを目指す」の意味するところです。

“ラウンドアバウト(roundabout)”という名の由来

「ラウンドアバウト」という名前は多くの日本人にはなじみ名の無い単語だと思います。なぜこんな名前をつけたか、名前に込めた意味を書こうと思います。ラウンドアバウトとはイギリスなどにある交差点の形につけられた名前です(回転木馬と言う意味もありますが)。こんな交差点です。


そう、最近のラウンドアバウトBLOGの表紙のGoogleMapで表示されているものです。動きますので、拡大していけばどこだか分かります。

携帯サイト制作のヒント:クローラーをキャッチしSEO対策をしやすくする

カスタマイズ可能な端末グループの1つ、「クローラーグループ」は、携帯サイトのクローラー対策に役立つ端末グループです。

クローラーのUser-Agentを設定ファイルに書いておくと、クローラーからのアクセスが判別でき、PIやアプリケーションでクローラー向けの処理を書くことができます。

●クローラーグループの設定

クローラーグループを設定するファイルはCSV形式のテキストファイルです。

クローラーグループ名,ユーザーエージェントパターン

携帯サイト制作のヒント:端末グループを使いこなす

PI機能で使える条件式には、ラウンドアバウトが持つ機種情報の項目名以外に「端末グループ」を使うことができます。またリクエストヘッダ「X-RA-Device-Group」から取ることもでき、アプリケーションの開発サポートとしても活用できる機能です。

端末グループはいくつかの機種をグループ化したもので、デフォルトではラウンドアバウトが定義するグルーピングだけの状態ですが(システム端末グループ)、この他にユーザー定義のグループを作ることができます。
  • ユーザー端末グループ
  • クローラーグループ
※クローラーグループは次回のエントリで紹介します。

携帯サイト制作のヒント:PI機能で表示コントロール

ラウンドアバウトの機能の1つに、アクセスした機種の属性に応じて、コンテンツ内の表示の一部を切り替える機能(PI)があります。出し分けたい内容をHTML上に記述すれば、条件にマッチする機種にのみ表示させることが可能です。

PIとはProcessing Instructionの略記で、XML文書中に特定のソフトウェアへの命令を埋め込む、処理命令のための記述です。<?ターゲット 処理内容?>で表され、PHPではこのPIが使われています。ラウンドアバウトの表示コントロール機能はこのPIを利用しているので、表示コントロール機能のことを「PI機能」と呼んでいます。

PI機能の利用シーンの一部
  • 待受画面幅・高さに応じた配布する待受画像ファイルを切り替える
  • 対応アプリの種類やバージョンに応じて配布アプリを切り替える
  • Flash Liteバージョンに応じてFlashコンテンツの表示をコントロールする
  • GPS対応状況とキャリアに応じて位置情報送信用のコードを出し分ける
などなど。

携帯サイト制作のヒント:2ペインレイアウトをするには?

ページを縦に分割する2ペインレイアウトは、一目で多くの情報を見せることができ、ユーザビリティ向上に効果的なレイアウトです。

PCサイトではdivなどのブロック要素にfloatプロパティを指定することで2ペイン・3ペインのレイアウトをしますが、携帯サイトではdivにfloatが効かず横に並べられないので、テーブルを使います。

携帯サイト制作のヒント:綺麗な箇条書きを実現するには?

箇条書きリストは情報を整理して見せるのに効果的ですが、PCサイトでは一般的でも携帯サイトでは使われません。下の例のように字下げ幅やマーカーの見た目の違いが大きいことや、ドコモはCSSプロパティでアレンジできることがほとんどないことから、見た目をアレンジしたくても3キャリアで同じような表示ができないのです。


(画面:左からdocomo 904i、au G9、SoftBank 920P)

ラウンドアバウト・ホスティングの存在理由

ラウンドアバウト・ホスティングは、「コンテンツ変換製品やサービスは高すぎる」「携帯サイトを手作りするのは大変だ」という中で、もっと安く素晴らしいコンテンツが作れないと「モバイルはこれ以上発展しない」という危機感から生まれています。サービスコンセプトは次のようなものです。

今やクラウドという時代にあって、サーバーや製品を個々のユーザーが購入する時代ではなくなってきています。そのような意味からもホスティングに組み込まれているのは、ユーザニーズにマッチした形といえるのではないでしょうか?

携帯コンテンツ変換ASP:プロキシ型携帯変換の限界

敢えて単刀直入に書けば、次のようになります。




「ドコモ端末用にコンテンツを作っているので、ドコモ端末は変換を通さずにアクセスする」という一見理に適ったように思える構成でも2つの疑問が生じます。
  • ドコモ端末に生じる問題は解決してくれないのか?
  • であれば、ドコモ端末での問題は自分で解決しなくてはならないのか?
キャッシュ容量制限や端末毎の画面サイズ違いを吸収せず、CSSの使えないドコモが基準だとすれば、コンテンツ変換エンジンとしては、今後も多くの生産性向上は望めないことになります。

携帯コンテンツ変換ASP:プロキシ型の2URLとドコモ無変換の問題


プロキシ型携帯コンテンツ変換ASPでは、2つのURLが存在します。1つは元のコンテンツのあるWebサーバで、もう1つが変換プロキシサーバです。多くの場合、まず本当のURLを持っているコンテンツサーバにアクセスし、au/softbankの時は変換サーバにリダイレクトされます。そして、この事がこの方式の問題となるケースがあります。



携帯コンテンツ変換ASP:コストと運用面の比較

ASP利用では導入コストが低くても、運用コストが高ければ元も子もありません。課金体系について、ラウンドアバウト・ホスティングと変換プロキシ型ASPでは大きく異なっています。

基本月額料金
従量超過課金
(1PV換算)
ラウンドアバウト・ホスティング
2~3万円(共用)、10万~12万円(専用)
※サーバ、メモリ、ディスク、回線等のホスティングサービスを含む
なし
プロキシ型変換ASP
A:7.5万円(10万PV程度)
B:25万円(100万PV)
あり

携帯コンテンツ変換ASPの種類

ラウンドアバウトや他社競合製品を導入する場合、自ら選定・テスト・購入・導入する必要が生じます。その手間を省くことができるのが、ASPです。ASPであれば、利用したい期間だけ使えたり、製品テストなどをする必要が無いので、気軽に導入が図れます。そして、携帯変換にもASPがあり、2種類あります。

携帯サイト制作のヒント:行間が詰まって読みにくいので改善したい

新着情報など一覧でテキストを見せるようなページで、行間が詰まっていると読みにくい印象を与えます。背景色の付いたボックスと接する箇所は特に余白が欲しくなります。



PCサイトではCSSのline-heightやmarginプロパティを使えばできますが、携帯サイトの場合、最も普及するiモードブラウザ1.0のFOMAではこれらのプロパティが効かず行間を調整できない事情があるので、画像を使った何らかの方法でしか余白を調整することしかできません。

携帯サイト制作のヒント:アイコンを使ったわかりやすいナビゲーション

PCサイトではアイコンと言えば画像ですが、携帯サイトではアイコンに絵文字を使うことが一般的です。なぜなら、文字と同じくらいの画像を常に配置しておくことが難しいからです(画面サイズの数だけの画像と、それを切替える仕組みが必要)。

ラウンドアバウトを使うと画像は画面のサイズと連動して縮小するので、PCサイトのような多彩なアイコンを自由に使うことができるようになります。その時のアイコン画像の作り方・使い方について説明します。