<?xml version='1.0' encoding='UTF-8'?><?xml-stylesheet href="http://www.blogger.com/styles/atom.css" type="text/css"?><feed xmlns='http://www.w3.org/2005/Atom' xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/' xmlns:georss='http://www.georss.org/georss' xmlns:gd='http://schemas.google.com/g/2005' xmlns:thr='http://purl.org/syndication/thread/1.0'><id>tag:blogger.com,1999:blog-4284139395900177040</id><updated>2011-12-07T15:56:02.413+09:00</updated><category term='携帯デザイン'/><category term='ブラウザキャッシュ'/><category term='言語変換'/><category term='CSS'/><category term='パフォーマンス'/><category term='２G対応'/><category term='コスト'/><category term='絵文字'/><category term='携帯アクセス解析の問題点とフットプリント'/><category term='ラウンドアバウトを使った新しい開発方法'/><category term='携帯コンテンツ変換・ASP比較'/><category term='携帯サイト開発の問題点とラウンドアバウト'/><category term='スマートフォンとラウンドアバウト'/><category term='携帯画像変換'/><category term='サーバ構成'/><category term='携帯コンテンツ変換・製品比較'/><category term='スマートフォン'/><category term='携帯画面サイズ'/><category term='ドコモSSL'/><category term='フットプリント'/><category term='負荷分散'/><category term='ラウンドアバウト製品コンセプト'/><title type='text'>新・携帯サイトの作り方：ラウンドアバウト コンセプト</title><subtitle type='html'></subtitle><link rel='http://schemas.google.com/g/2005#feed' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/posts/default'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default?max-results=100'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/'/><link rel='hub' href='http://pubsubhubbub.appspot.com/'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><generator version='7.00' uri='http://www.blogger.com'>Blogger</generator><openSearch:totalResults>88</openSearch:totalResults><openSearch:startIndex>1</openSearch:startIndex><openSearch:itemsPerPage>100</openSearch:itemsPerPage><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-8135061329447717424</id><published>2011-09-13T22:05:00.000+09:00</published><updated>2011-09-20T22:04:36.437+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='スマートフォン'/><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウトを使った新しい開発方法'/><category scheme='http://www.blogger.com/atom/ns#' term='スマートフォンとラウンドアバウト'/><title type='text'>スマートフォン対応：PCとケータイサイトを持っている場合</title><summary type='text'>PCと携帯サイトを持っている場合、スマホ対応後もこれまで通り携帯をサポートしなくてはなりません。スマホは、使い方は携帯と同じ、能力はPC並みというデバイスであるため、４つの選択肢があります。

①スマホ専用サイトを開発し、PC/スマホ/携帯の３サイト
②モバイル（スマホ&amp;携帯）サイトを開発し、携帯サイトは廃止し、PC/モバイルの２サイト（スマホ→携帯変換）
③携帯サイトを利用してスマホ対応し、PC/モバイルの２サイト（３キャリア変換）
④PCサイトを利用してスマホ対応し、PC&amp;スマホ/携帯の２サイト（PC→スマホ変換JS）


スマホ対応の目的を追求するなら、スマホ専用（①）かスマホ⇒携帯変換（②）スマートフォンを１つのメインデバイスと捉えてスマホ対応をするのであれば、スマホを直接ターゲットにする①又は②を選択することで、適切な操作性と情報量を持つ高いサービスレベルのサイトが実現できます</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/8135061329447717424/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2011/08/pc.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/8135061329447717424'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/8135061329447717424'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2011/08/pc.html' title='スマートフォン対応：PCとケータイサイトを持っている場合'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-4772757465232626113</id><published>2011-09-05T20:38:00.000+09:00</published><updated>2011-09-13T23:09:47.586+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='スマートフォン'/><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウトを使った新しい開発方法'/><category scheme='http://www.blogger.com/atom/ns#' term='スマートフォンとラウンドアバウト'/><title type='text'>スマートフォン対応：PCサイトだけを持っている場合</title><summary type='text'>PCサイトだけを持っている場合、今後伸びていくスマホ対応の検討は、最初にモバイル全体に対してどのようなアプローチをしたいか判断することから始めます。

モバイル端末である携帯とスマホですが、携帯は２種類あると考えることを奨めます。全ての買い替えユーザーがスマホになるのではありません。2011年時点ではスマホ買換え派は、まだ半数を超えないと予想されています。

①iPhone/Android　...　約1,500万台。12年末には2,500～3,000万だとも。
②ハイスペック携帯　...　約3.000～3,500万台。今後のDC/SB携帯は全て
③ロースペック携帯　...　約6,000～6,500万台。au携帯は全てここに入る
（※台数の推計値は各種公表値から推定）

②ハイスペック携帯は、ハード的・性能的にはスマートフォンに負けないスペックを持っています。今しばらくは③から②への流れは</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/4772757465232626113/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2011/09/pc.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/4772757465232626113'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/4772757465232626113'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2011/09/pc.html' title='スマートフォン対応：PCサイトだけを持っている場合'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-529727164958164295</id><published>2011-09-02T16:55:00.000+09:00</published><updated>2011-09-13T23:09:02.509+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='スマートフォン'/><category scheme='http://www.blogger.com/atom/ns#' term='スマートフォンとラウンドアバウト'/><title type='text'>スマートフォン対応の目的と最適なソリューション</title><summary type='text'>現在、ラウンドアバウトは、スマートフォンサイトを作ってスマートフォンとケータイをフルカバーできる唯一のソリューションとして、多くの企業に導入されてきています。様々な検討の末、ラウンドアバウトを最適ソリューションとして選択してもらえた時は、非常に嬉しい瞬間です。

重要なことの１つは、顧客がラウンドアバウトを正しく理解して、最適解として選択してもらうことです。選択後に誤ったソリューションだと気づくのは、両者にとって不幸です。そのようなことを防ぐために、ラウンドアバウトとそれ以外のソリューションが、どのように違うのか、ここで整理してみることとします。

モバイル変換ソリューションやスマートフォン（以下スマホ）対応とインターネットで検索すれば、おおまかに次のようなグループに分かれます。

【ソリューションの種類】
① ３キャリア変換　製品・ASP
② スマホ→携帯変換　製品（ラウンドアバウト＆</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/529727164958164295/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2011/09/blog-post.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/529727164958164295'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/529727164958164295'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2011/09/blog-post.html' title='スマートフォン対応の目的と最適なソリューション'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-131331936328311712</id><published>2011-08-23T16:55:00.001+09:00</published><updated>2011-08-23T16:59:02.572+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='スマートフォン'/><category scheme='http://www.blogger.com/atom/ns#' term='スマートフォンとラウンドアバウト'/><category scheme='http://www.blogger.com/atom/ns#' term='コスト'/><title type='text'>スマホサイトでケータイも対応する－モバイルノウハウ不要編－</title><summary type='text'>スマホ＆ケータイサイト制作を先延ばしにされたことはありませんか？


[モバイルサイト専門ではない制作会社の気持ち]




今までにケータイサイト制作を先延ばしにされたり、先延ばしにしたことはないでしょうか？もし、心当たりがある場合は、その理由を思い出してみてください。費用対効果が合わない・読めない、モバイルを運用する人がいない、等々、先延ばしとなった理由は様々だったと思います。
とはいえ、先延ばしになった事情の根底には「ケータイの特殊性」があったのではないでしょうか？
同じモバイルでもスマートフォンは標準技術で制作可能
同じモバイルでもスマートフォンサイトの制作であれば、制作する上での特殊な技術が少ない（PCと共通）のため、PCサイト制作を主とする制作会社としても積極的に取り組めるものだと思います。
それに対して、ケータイサイトとなると、キャリア依存、機種依存の事象が多く、</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/131331936328311712/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2011/08/blog-post.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/131331936328311712'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/131331936328311712'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2011/08/blog-post.html' title='スマホサイトでケータイも対応する－モバイルノウハウ不要編－'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://3.bp.blogspot.com/--byI_zH4Uf0/TkiyvceZKJI/AAAAAAAAAjc/VvTAACF9B5U/s72-c/image01.png' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-4943169819824514495</id><published>2011-07-26T14:00:00.000+09:00</published><updated>2011-07-26T14:27:48.435+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='スマートフォン'/><category scheme='http://www.blogger.com/atom/ns#' term='スマートフォンとラウンドアバウト'/><category scheme='http://www.blogger.com/atom/ns#' term='CSS'/><title type='text'>スマホサイトでケータイも対応する－文字問題もCSS変換で解決編－</title><summary type='text'>文字が問題で、読みづらいサイトをスマートフォンに見せていませんか？

[スマホでは文字が小さ過ぎてPCサイトが見づらくありませんか]


スマホユーザーがスマホを持ちたい理由のトップが「PCサイトにアクセスできるから」だそうです。しかし、実際にスマホでPCサイトを見ると文字が小さ過ぎて読めず、文字を拡大しながら読むと上下左右に移動しながらページ全体を閲覧することになるので、快適なブラウジングとは決して言えない状態になってしまいます。

従ってスマホにはスマホに適したページを作るのがベストとなりますが、これをケータイで見ると、文字が大き過ぎて縦に長くなったりページ全体のレイアウトが崩れるなどの問題が出てしまいます。スマホとケータイはディスプレイの大きさが類似しているにもかかわらず、それぞれに適したサイズのページを用意しなくてはならないのです。

[スマホとケータイは文字サイズの見え方が違</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/4943169819824514495/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2011/07/css.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/4943169819824514495'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/4943169819824514495'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2011/07/css.html' title='スマホサイトでケータイも対応する－文字問題もCSS変換で解決編－'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://2.bp.blogspot.com/-rmLwLXOQkPU/Ti4qABkRSkI/AAAAAAAAAjI/1gCh_gnw50g/s72-c/img0726_1.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-5417993098417549260</id><published>2011-07-07T17:46:00.003+09:00</published><updated>2011-07-12T15:45:17.991+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='スマートフォン'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯画像変換'/><category scheme='http://www.blogger.com/atom/ns#' term='スマートフォンとラウンドアバウト'/><title type='text'>スマホサイトでケータイも対応する－画像問題解決編－</title><summary type='text'>画像が問題で、スマホサイトとケータイサイトが１つにはならないと思っていませんか？



[ラウンドアバウトでスマホサイトをガラケーで表示した場合]



スマートフォン基準のコンテンツからケータイも対応するコンセプトのモバイルコンテンツ変換「ラウンドアバウト」を使えば、画像のことは気にする必要はありません。

通常、スマホ向けに高画質画像をたくさん使ったサイトをそのままガラケーで表示すると、画像サイズが大きすぎたり、１ページの容量が大きすぎたりで、下の画像のようにレイアウトが崩れるなど、トラブルが出てしまいます。



[スマホサイトをガラケーでそのまま表示]
しかし、スマートフォン向けのサイトをガラケーにも展開できる「ラウンドアバウト」は、２つの強力な画像変換機能を搭載しているので、こうしたレイアウト崩れなどの画像に関する諸問題をすべて解決します。



その２つの強力な機能とは
</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/5417993098417549260/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2011/07/blog-post.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/5417993098417549260'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/5417993098417549260'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2011/07/blog-post.html' title='スマホサイトでケータイも対応する－画像問題解決編－'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://4.bp.blogspot.com/-2htqAX7odLw/ThQSOV0EP9I/AAAAAAAAAik/Xbg7qxRK95Q/s72-c/IMGP2161.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-8963143669923664566</id><published>2010-06-23T09:00:00.003+09:00</published><updated>2010-06-23T09:43:37.998+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='スマートフォン'/><category scheme='http://www.blogger.com/atom/ns#' term='スマートフォンとラウンドアバウト'/><title type='text'>スマートフォンとラウンドアバウト ⑥iPadで見せた将来性</title><summary type='text'>iPadに一度触れると大概の人は、その魅力に取り付かれてしまいます。その使い易さやコンセプトも素晴らしいですが、我々を魅了する理由は、我々に未来を感じさせてくれるからでしょう。だから、我々は”Web&amp;MobileマーケティングEXPO”においてラウンドアバウトをiPadで説明しようと考えました。


 展示会では、iPad/iPhone/Android/3G携帯/2G携帯が、全て同じようにRichな表現できることを示し、大好評を博しました。最初のリリースからおよそ２年を経て、ようやくラウンドアバウトの持つスマートフォン対応が、マーケットに受入れられた瞬間でした。ようやく時代が製品に追いついたと言ってもよいでしょう。


今はスマートフォンをどう扱うか、iPadをどうするか、不確実な未来を予想しながら、多くの企業がその対応を考え始めています。トレンドに敏感な企業では、iPhoneアプリを</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/8963143669923664566/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2010/06/ipad.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/8963143669923664566'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/8963143669923664566'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2010/06/ipad.html' title='スマートフォンとラウンドアバウト ⑥iPadで見せた将来性'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://3.bp.blogspot.com/_zvAGg4PBKBU/TBYO2g-sUgI/AAAAAAAAAh8/Y0DnfJEMm_o/s72-c/WebMoiPad.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-4900702071935769542</id><published>2010-06-14T09:00:00.005+09:00</published><updated>2010-06-14T15:43:36.107+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='スマートフォン'/><category scheme='http://www.blogger.com/atom/ns#' term='スマートフォンとラウンドアバウト'/><title type='text'>スマートフォンとラウンドアバウト ⑤標準ブラウザーの秘めた能力を引き出す</title><summary type='text'>スマートフォンは携帯電話の一種なので、サイトを２つ作っても対象ユーザが増えるわけではありません。２００９年末の状況は下左図の通りです。伸び行くスマートフォンマーケットをターゲットにしたいけど、多数派の３G携帯も重要だし...スマートフォン用のサイトは３Gでは見えないし...

ちょっと待って！
実は携帯の標準ブラウザーだって、十分な表現力があるんです。  



右の写真は４年位前のQVGA端末での表示です（ラウンドアバウトのカタログの写真）。これを見れば、随分以前からブラウザーの表現能力は非常に高かったのが分かります。つまり、ブラウザーの表現能力に関して言えば、3G携帯とスマートフォンには、大きな差はなく、一部は3G携帯の方が高い場合さえあるのです。

 携帯サイトは貧弱、携帯の回線は遅い、携帯サイトの閲覧には高い料金がかかる、そう考える人は多いのですが、それらはすでに過去の話です。</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/4900702071935769542/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2010/06/blog-post_14.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/4900702071935769542'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/4900702071935769542'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2010/06/blog-post_14.html' title='スマートフォンとラウンドアバウト ⑤標準ブラウザーの秘めた能力を引き出す'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://3.bp.blogspot.com/_zvAGg4PBKBU/TBIPnm5ceoI/AAAAAAAAAhs/vlQSfNZtQTc/s72-c/%E7%AB%AF%E6%9C%AB%E3%82%B7%E3%82%A7%E3%82%A2.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-3724928028902624038</id><published>2010-06-11T09:00:00.013+09:00</published><updated>2010-06-14T14:19:18.204+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='スマートフォン'/><category scheme='http://www.blogger.com/atom/ns#' term='スマートフォンとラウンドアバウト'/><title type='text'>スマートフォンとラウンドアバウト ④スマートフォンの課題</title><summary type='text'>タップ・フリック・ピンチアウト＆イン...その操作名は覚えていなくとも、iPhoneが実現しているマルチタッチ・インターフェースは真に画期的で、誰でもすぐに操作を覚えてしまう優れものです。ユーザーは小さな画面に映るPC用のWebを、伸ばしたり縮めたり、追い払ったり引き寄せたり...優雅なモバイル生活を満喫できるようになりました。

■（左から）iPhoneでのページ全体、部分拡大、Flashは見えない（上部の青い点の空白部）

ところが、いくつか都合の悪いことも見えてきました。第一に、如何に優れたインターフェースがあっても、3.5インチのディスプレイでは、PCサイズのサイトはあまり見易くはないということ。第二は、Flashがサポートされないことです。
 　１．ページ全体の閲覧では文字が小さすぎ、拡大すると全体像が見えない
２．転送量が多いので1ページが出るまでの時間が遅い
３．Flash</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/3724928028902624038/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2010/06/blog-post_11.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/3724928028902624038'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/3724928028902624038'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2010/06/blog-post_11.html' title='スマートフォンとラウンドアバウト ④スマートフォンの課題'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://1.bp.blogspot.com/_zvAGg4PBKBU/TBDMwOjuXmI/AAAAAAAAAhU/j7BR_MGXi8Q/s72-c/ipall.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-3798077637441150717</id><published>2010-06-09T09:00:00.003+09:00</published><updated>2010-06-14T14:19:18.209+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='スマートフォン'/><category scheme='http://www.blogger.com/atom/ns#' term='スマートフォンとラウンドアバウト'/><title type='text'>スマートフォンとラウンドアバウト　③iPhone快進撃、XPERIA追撃。スマートフォンは一般化へ...</title><summary type='text'>2009年のiPhoneの目に見える大成功は、スマートフォンに懐疑的な人々、そして行き着くまで来た感のある携帯電話機に、新たな未来を感じさせることになります。また極めて重要な個人ツールである携帯は、ブランドも重要であり、そこでドコモが出したのが、ドコモから撤退していたSony/Ericsson のAndroid端末、Xperiaです。



ブランド力、デザインも格好よく、プロモーションも大々的に行い、Docomoから出たこともあり、これは売れました。漸く、iPhoneに対抗できるスマートフォンが出たと言えます。

今年に入り、スマートフォンは多くの機種が出ています。
04 Xperia (docomo/Android/Sony Ericsson)
04 Desire (softbank/Android/HTC)
05 IS01/IS02 (au/Android/Sharp) 
05 </summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/3798077637441150717/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2010/06/iphonexperia.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/3798077637441150717'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/3798077637441150717'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2010/06/iphonexperia.html' title='スマートフォンとラウンドアバウト　③iPhone快進撃、XPERIA追撃。スマートフォンは一般化へ...'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://1.bp.blogspot.com/_zvAGg4PBKBU/TAzfTO-ibqI/AAAAAAAAAgo/jdh600lZ0HY/s72-c/Xperia.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-8718124720520192625</id><published>2010-06-07T08:00:00.003+09:00</published><updated>2010-06-14T14:29:08.748+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='スマートフォン'/><category scheme='http://www.blogger.com/atom/ns#' term='スマートフォンとラウンドアバウト'/><title type='text'>スマートフォンとラウンドアバウト　②Android端末よりiモード2.0</title><summary type='text'>アップルは基本的に１国１キャリアというルールがあるので、ドコモが急いで出したのが、HT-03AというAndroid端末です。iPhone3Gから遅れること丁度1年、2009年7月でした。またアップルもiPhoneの改良版iPhone3GSを、2009年6月に出しています。
 【ドコモ初・日本初のAndroid携帯 HT-03A】
ところが、実は2009年の携帯端末関連で、おそらく最大の話題となったのは、Android端末よりも、iモードブラウザがFOMA始まって以来の仕様拡張をしたことです（iモードブラウザ2.0）。ラウンドアバウトは、その対応に僅か3日しか掛かっていません。それもそのはずで、何も変更しなくても新ブラウザーに対応できしまうので、確認とプレスリリースの時間だけだったのですから。

iモードブラウザ2.0の仕様は強力です。ほとんどフルブラウザと言える内容にまで進化しています。</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/8718124720520192625/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2010/06/androidi20.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/8718124720520192625'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/8718124720520192625'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2010/06/androidi20.html' title='スマートフォンとラウンドアバウト　②Android端末よりiモード2.0'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://1.bp.blogspot.com/_zvAGg4PBKBU/TAjM8uWILII/AAAAAAAAAgg/CmiqlzRQVM0/s72-c/fig_black-01.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-8797421914138279896</id><published>2010-06-02T22:11:00.002+09:00</published><updated>2010-06-14T14:19:18.217+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='スマートフォン'/><category scheme='http://www.blogger.com/atom/ns#' term='スマートフォンとラウンドアバウト'/><title type='text'>スマートフォンとラウンドアバウト　①生粋のスマートフォン対応だったが...</title><summary type='text'>今日、ラウンドアバウトHPのTOPを更新し、スマートフォンに関するページを追加しました。
http://www.symmetric.co.jp/roundabout/index.php
http://www.symmetric.co.jp/roundabout/smartphone.php 

スマートフォンを前面に押し出していて、俄かにスマートフォン対応をしたように思われるかもしれませんが、実は、「生粋のスマートフォン対応」なのです。スマートフォンへの対応はラウンドアバウトという製品にとって、あまりに自明な特性であり、そこを特に強く訴求するが無かっただけなのです。それには理由があり、そしてここに至るには長い道のりがありました...
ラウンドアバウト1.0が発売されたのは、2008年7月。それは、iPhone3Gが発売された月であり、翌8月にはデモページをiPhone対応として発表</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/8797421914138279896/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2010/06/blog-post.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/8797421914138279896'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/8797421914138279896'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2010/06/blog-post.html' title='スマートフォンとラウンドアバウト　①生粋のスマートフォン対応だったが...'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://4.bp.blogspot.com/_zvAGg4PBKBU/TAZNzI3PBFI/AAAAAAAAAgQ/J6SPBXMiShg/s72-c/RATOP0602.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-7804352648933271111</id><published>2009-12-08T09:00:00.015+09:00</published><updated>2009-12-08T09:00:02.583+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯デザイン'/><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウトを使った新しい開発方法'/><title type='text'>携帯サイト制作の実践ノウハウ：iPhone用の画像で操作性を一層向上させる</title><summary type='text'>
前回は、CSSプロパティをiPhone用に設定することで、使いやすいページにアレンジする方法を説明しました。

今回は、よりiPhoneでの閲覧や操作に向いたデザインの作り方について説明していきます。


1. 押しやすい画像のボタンに変える

小さい画像や高さのない画像を使ったボタンは、携帯には適していてもiPhoneでは指タッチがしにくいので改善が必要です。iPhoneでの操作を考慮する際、ボタン画像は適度な大きさと高さがあることが望ましいです。

例えば下の例のように、二種類の画像を用意します。iPhoneからのアクセスかどうかによって画像ファイル名を切り替えるような変換ルールを変換シートに記述すれば、それだけでも操作性を上げることができます（変換シートについては過去のエントリを参照してください）。

（用意する画像の例 - 通常用とiPhone用）
 

（変換ルール記述</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/7804352648933271111/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/12/iphone_08.html#comment-form' title='1 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/7804352648933271111'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/7804352648933271111'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/12/iphone_08.html' title='携帯サイト制作の実践ノウハウ：iPhone用の画像で操作性を一層向上させる'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://4.bp.blogspot.com/_zvAGg4PBKBU/Sxzakelk80I/AAAAAAAAAfo/27dz1ozgvrs/s72-c/iphone-image-dispatch.jpg' height='72' width='72'/><thr:total>1</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-2280380115302742866</id><published>2009-12-07T09:00:00.007+09:00</published><updated>2009-12-07T12:32:49.409+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウトを使った新しい開発方法'/><category scheme='http://www.blogger.com/atom/ns#' term='CSS'/><title type='text'>携帯サイト制作の実践ノウハウ：CSSでiPhoneで操作しやすい携帯サイトを作るコツ</title><summary type='text'>
前回のエントリで、ラウンドアバウトの変換シートを使いiPhone専用の外部CSSファイルを使うことができると説明しました。

今回はiPhone向けにデザインや操作性を改善するCSSプロパティについて、少し詳しく説明していきます。

1. bodyの余白を作らない

まず下の画像を見てください。iPhoneでは左に余白ができてタブメニューに折り返しが発生しています。ラウンドアバウトは横幅320ピクセルのiPhoneの画面サイズに合わせ、画像を縮小している（大きさは正しい）のですが、iPhoneのMobile Safariではブラウザ表示領域とコンテンツの間に数ピクセルの余白ができるため、このように見えてしまっています。



この余白はbody要素の余白サイズを0にして調整できます。一口に「余白」といってもmarginとpaddingとありますが、Mobile Safariについては</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/2280380115302742866/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/12/cssiphone.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/2280380115302742866'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/2280380115302742866'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/12/cssiphone.html' title='携帯サイト制作の実践ノウハウ：CSSでiPhoneで操作しやすい携帯サイトを作るコツ'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://4.bp.blogspot.com/_zvAGg4PBKBU/SxjzvT2cWwI/AAAAAAAAAfQ/zEg_Aw-naTs/s72-c/kitchen-for-iphone.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-3727965867184591199</id><published>2009-12-03T09:00:00.011+09:00</published><updated>2009-12-03T09:44:20.698+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウトを使った新しい開発方法'/><title type='text'>携帯サイト制作の実践ノウハウ：ラウンドアバウトでリッチで快適な携帯サイトをiPhoneにも</title><summary type='text'>ラウンドアバウトでiPhoneに対応した携帯サイトを作る際、おさえておきたい制作のコツについて説明していきます。



●VGA基準で制作

iPhone対応に限らず、ラウンドアバウトで作る携帯サイトでは常にお勧めしていることですが、VGA端末をターゲットにページレイアウトを作ります。

iPhone のブラウザ幅（縦向き・portlaitモード）は320ピクセルです。従来では一般的なQVGA端末（横幅240ピクセル）では、iPhoneの画面で は全体的に小さい内容表示になります。480ピクセル基準で作った画像はラウンドアバウトが自動的に縮小してデザインレイアウトを保持するので、画面に 合った大きさで見せることができます。なお、ラウンドアバウトは、iPhone端末の画面サイズを320×480ピクセル（portlaitモード）とし て画像を縮小します。


●viewportの設定

</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/3727965867184591199/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/12/iphone_03.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/3727965867184591199'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/3727965867184591199'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/12/iphone_03.html' title='携帯サイト制作の実践ノウハウ：ラウンドアバウトでリッチで快適な携帯サイトをiPhoneにも'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://2.bp.blogspot.com/_zvAGg4PBKBU/SxTDAPiD9VI/AAAAAAAAAdk/O1itmuCj1TI/s72-c/iphone-kitchen.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-5746468557081785821</id><published>2009-12-02T09:00:00.001+09:00</published><updated>2009-12-02T09:00:03.249+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウトを使った新しい開発方法'/><title type='text'>携帯サイト制作の実践ノウハウ：iPhoneで携帯サイトが見たい！に応える</title><summary type='text'>iPhoneには高性能なフルブラウザ（Mobile Safari）があるので、iPhoneからのアクセスはPCと同じとするサイトが多いようです。iPhoneには容量オーバーエラー（メガバイトレベルは別として）やマークアップ言語の差異といった携帯固有の問題が生じませんが、本当にPCとiPhoneが全く同じデザイン・コンテンツでよいと考えてもよいのでしょうか？

例えば下はiPhoneからアクセスしたPCサイトです。ページ上部のFlashコンテンツが表示できておらず、内容全体が一見しては読めないほど小さく表示されています。



iPhoneでは縦の場合約３分の１に縮小表示されるため、読みづらく指でのリンクやボタンの操作がしにくいということも、iPhoneで見るPCサイトによくある問題の一つと言えます。こうしたこともあってか、iPhoneに機種変更したことで（PCブラウザ拒否設定などにより）</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/5746468557081785821/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/12/iphone.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/5746468557081785821'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/5746468557081785821'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/12/iphone.html' title='携帯サイト制作の実践ノウハウ：iPhoneで携帯サイトが見たい！に応える'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://2.bp.blogspot.com/_zvAGg4PBKBU/SxS7weyGQ9I/AAAAAAAAAdM/HCyBxYny2VU/s72-c/iphone-pc-site.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-2495611716939250173</id><published>2009-12-01T09:00:00.001+09:00</published><updated>2009-12-01T09:00:05.207+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウトを使った新しい開発方法'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯画像変換'/><title type='text'>携帯サイト制作の実践ノウハウ：CSSで背景画像を付ける</title><summary type='text'>ラウンドアバウトの画像変換は、img要素の画像に限りません。変換対象となる画像は次のとおりで、今回はラウンドアバウトを使った背景画像デザインを取り上げます。
インライン画像（img要素のsrc属性）
背景画像
background属性
background、background-imageプロパティ
フォームのイメージボタン（input要素のsrc属性）
リストのマーカー画像（list-style-imageプロパティ）
画像へのリンク（a要素のhref属性）


背景画像のCSSプロパティですが、本当はdivやtable関連要素にも変換対応しています。ただ、ドコモがbody要素にしか背景画像のCSSプロパティに対応しないので、３キャリアで背景画像を使う場合は実質body要素だけということになります。

背景画像を使ったデザインは淡い色調のパターン模様がよく使われます。例えば、下の画面</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/2495611716939250173/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/12/css.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/2495611716939250173'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/2495611716939250173'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/12/css.html' title='携帯サイト制作の実践ノウハウ：CSSで背景画像を付ける'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://1.bp.blogspot.com/_zvAGg4PBKBU/SwZjMcvnCzI/AAAAAAAAAcc/pfO3MoxTBeg/s72-c/bg_vga.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-8031193075671439107</id><published>2009-11-30T09:00:00.001+09:00</published><updated>2009-11-30T09:00:03.814+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウトを使った新しい開発方法'/><category scheme='http://www.blogger.com/atom/ns#' term='言語変換'/><title type='text'>携帯サイト実践ノウハウ：auで発生する「画像の隙間問題」を解消する</title><summary type='text'>ブロック要素に背景色を付けるデザインは、ページにメリハリを付けるのに効果的なのでよく使われますが、auではたびたび「隙間発生問題」という意図通りの表示がされない問題にも遭遇します。



詳しくはsympleブログのエントリーで解説されていますが、このエントリではラウンドアバウトが用意している拡張タグ
&lt;ra:field&gt;&lt;/ra:field&gt;
&lt;ra:area&gt;&lt;/ra:area&gt; 

を使った実例を紹介します。この拡張タグを使うことで、キャリアによってdivとtableを書き分けるという煩雑なことをせず、シンプルなソース記述で隙間の発生を防ぐことができます。隙間が消せないというデザインの限界・制約を乗り越えられるので、画像同士やブロック要素を隙間なく並べたデザインが簡単にできるようになります。




隙間を解消するラウンドアバウトの拡張タグ「ra:field」「ra:area」は、</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/8031193075671439107/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/au.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/8031193075671439107'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/8031193075671439107'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/au.html' title='携帯サイト実践ノウハウ：auで発生する「画像の隙間問題」を解消する'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://1.bp.blogspot.com/_zvAGg4PBKBU/SwFFx-3iCxI/AAAAAAAAAZ0/tJrg04IuoC8/s72-c/au-imagespace.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-4311807125023796262</id><published>2009-11-26T09:00:00.005+09:00</published><updated>2009-11-26T09:46:43.587+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯コンテンツ変換・ASP比較'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯画像変換'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯コンテンツ変換・製品比較'/><title type='text'>携帯画像変換・ラウンドアバウトの実力：価格の比較</title><summary type='text'>機能が横並びで差別化しにくい商品であるほど、価格（安い）が売り文句になってしまいますが、携帯画像変換もその様相を呈してきています。価格は、機能・価格構成・隠れコストなどの違いがあり、単純比較は危険ではあるけれども、あえて２つの指標で比べて見ます。

なお、R.A.は、ラウンドアバウト従量版ライセンスを示しています。



このデータは最新のものを確認したわけでもありませんし、全てのプランでの最適化も図っていません。また、比較の為に単位を合わせたりもしています。ということで、あくまでレンジの目安程度の扱いです。月間100万AC（アクセス）という指標も不利・有利になるので、くどいようですが参考です。

■ラウンドアバウトの300万アクセスの本当の数字
比較させてもらった他社サービス・製品については、解説する立場にはありませんが、ラウンドアバウトの300万アクセスについて解説します。

</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/4311807125023796262/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/blog-post_26.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/4311807125023796262'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/4311807125023796262'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/blog-post_26.html' title='携帯画像変換・ラウンドアバウトの実力：価格の比較'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://4.bp.blogspot.com/_zvAGg4PBKBU/Sw0ivMJcP8I/AAAAAAAAAdE/TFgFGnYW37U/s72-c/%E7%94%BB%E5%83%8F%E5%A4%89%E6%8F%9B%E4%BE%A1%E6%A0%BC%E6%AF%94%E8%BC%83.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-7925644483937360660</id><published>2009-11-25T09:00:00.002+09:00</published><updated>2009-11-25T09:00:02.261+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯コンテンツ変換・ASP比較'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯画像変換'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯コンテンツ変換・製品比較'/><title type='text'>携帯画像変換・ラウンドアバウトの実力：機能の比較</title><summary type='text'>携帯画像変換の製品やサービスでは、色々な機能を謳っていますが、メイン機能となる自動変換機能と、必要であれば利用する手動（指定）変換の２種類に大別できます。

基本的に自動変換機能は、何もしなくても全ての画像に対して必要であれば施される機能であり、手動変換は必要な際に何らかの特別な指定を行って実現する機能です。


□自動変換・基本
この機能は、端末の画面サイズと対応フォーマットに合わせて行われる変換であり、この機能があるものが、「携帯画像変換である」といえるものです。基本の中でも、アニメGIFをサポートだとか、プログレッシブJPEG対応だとか、細かな対応の違いはあります。新たな携帯端末の属性が自動で配信され、何もしなくても自動で行われる基本の変換です。

□自動変換・拡張
この拡張機能があるものは、ラウンドアバウトだけです。この２つの機能は、画像が載っているHTMLを読み込むために可能</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/7925644483937360660/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/blog-post_25.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/7925644483937360660'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/7925644483937360660'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/blog-post_25.html' title='携帯画像変換・ラウンドアバウトの実力：機能の比較'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://1.bp.blogspot.com/_zvAGg4PBKBU/Swtlrjb59qI/AAAAAAAAAc0/nRnBX4gYPwg/s72-c/%E7%94%BB%E5%83%8F%E5%A4%89%E6%8F%9B%E6%A9%9F%E8%83%BD%E6%AF%94%E8%BC%83.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-7615616731381055089</id><published>2009-11-24T09:00:00.002+09:00</published><updated>2009-11-24T20:44:18.959+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯コンテンツ変換・ASP比較'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯画像変換'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯コンテンツ変換・製品比較'/><title type='text'>携帯画像変換・ラウンドアバウトの実力：方式の比較</title><summary type='text'>実は、携帯コンテンツの開発に当たり、最もポピュラーなサービスは画像変換サービスです。コンテンツ変換は画像変換機能を含みながら、システム構成や料金レンジから別カテゴリーとして認知されてきました。しかし、ラウンドアバウトはシステム構造と新・従量版による料金体系から、携帯画像変換というカテゴリーとしても非常に魅力的な製品となっています。まずは、携帯画像変換の製品やサービスにはどんなものがあるか、分類してみます。





主な方式だけでこれだけあり、それぞれ一長一短があります。それぞれのシステム特性を見ながら比較してみたいと思います。

画像変換ソリューションはHTMLコンテンツ変換のように複雑ではありません。文書解析やURLのパスの解釈などの問題や、HTTPヘッダーについて必要な知識も遥かに小さなものです。つまり、これらに起因する問題もそれほど多くはありません。その結果、様々な形式には優劣と</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/7615616731381055089/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/blog-post_24.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/7615616731381055089'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/7615616731381055089'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/blog-post_24.html' title='携帯画像変換・ラウンドアバウトの実力：方式の比較'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://4.bp.blogspot.com/_zvAGg4PBKBU/SwSq7_qWbZI/AAAAAAAAAas/Tvh6BJs7spA/s72-c/%E7%94%BB%E5%83%8F%E5%A4%89%E6%8F%9B%E3%82%B5%E3%83%BC%E3%83%90%E8%89%B2%E3%80%85.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-3175805856848334718</id><published>2009-11-20T09:00:00.004+09:00</published><updated>2009-11-20T17:23:34.547+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウト製品コンセプト'/><title type='text'>従量プランを定額化する、新・従量プラン</title><summary type='text'> 従量性のサービスは「使った分だけ払う」という点でリーズナブルですが、それでも３つの弱点があります。
サイトの規模が大きくなるとどんどん固定費が膨らんでいく掛け捨て方式
費用が変動するので予算が組み辛い
料金レンジに対して無駄が発生する

ラウンドアバウトでは１．についてはWeb版への移行パスを用意して解決しています。残る２点についても解決を図っています。

●従量課金の問題点


●ラウンドアバウトの解決策




 ■アクセス数の平準化による、月次コストの適正化
これは一括前支払い優遇として提供されます。例えば６ヶ月分を一括前払い（５ｘ６＝３０万円）すれば、６ヶ月間のアクセスが、５・７・２６・３１・３６・５５万とすれば、平均２７万アクセスとなります。月締めであれば、０・０・０・１０・１０・３０と合計５０万PVに当る超過料金が掛かります（ラウンドアバウトは１０万PV毎の超過料金設定</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/3175805856848334718/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/blog-post_20.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/3175805856848334718'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/3175805856848334718'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/blog-post_20.html' title='従量プランを定額化する、新・従量プラン'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://3.bp.blogspot.com/_zvAGg4PBKBU/SwTioyktuUI/AAAAAAAAAa0/axGDFwwsU64/s72-c/%E5%BE%93%E9%87%8F%E7%89%88%E3%81%AE%E5%BC%B1%E7%82%B9.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-4705249169741287079</id><published>2009-11-18T09:00:00.001+09:00</published><updated>2009-11-18T09:00:03.063+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウト製品コンセプト'/><title type='text'>ビジネスリスクをヘッジする：種蒔きライセンス”Seed”</title><summary type='text'>所有リスクは少なくとも「ビジネスリスクはクリア」している時の問題です。しかし、多くのビジネス、特にWebましてや携帯であれば、ビジネスリスクがはっきりしないことが非常に多いです。「まずは費用を掛けないでトライアルしてから投資判断したい」というケースが殆どではないでしょうか？

その時、コンテンツ変換製品を使えば、簡単にできたりもっと可能性を追求できたはずが、貧弱なプロトタイプの為にそのビジネスアイデアを正当に評価できなければ、非常に残念なことです。そこで生まれたのが、”roundabout Seed”です。一言で特徴を言えば、「無料」なのですが、ユーザーが蒔くビジネスの「種」、そしてシンメトリックとしては製品普及の「種」になるという意味から、”Seed”と名づけました。



■Seedがターゲットする用途
携帯ビジネスのプロトタイプ
携帯サイトデザインのユーザビリティ・テスト
社内など</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/4705249169741287079/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/seed.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/4705249169741287079'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/4705249169741287079'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/seed.html' title='ビジネスリスクをヘッジする：種蒔きライセンス”Seed”'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://1.bp.blogspot.com/_zvAGg4PBKBU/SwJ4Br3C01I/AAAAAAAAAac/Q77hrIP-yU0/s72-c/seed.gif' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-6562235782464268668</id><published>2009-11-17T11:00:00.005+09:00</published><updated>2009-11-20T17:20:31.851+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウト製品コンセプト'/><title type='text'>所有リスクとコストを減らす：スモールスタート＆出世払いの新・従量モデル</title><summary type='text'>「ラウンドアバウト導入済みホスティング」を選択できないケースでは、ソフトウェアライセンスを購入し導入する必要があります。Webサイトはビジネスが確立するまで時間が掛かり、爆発的にヒットする場合も、逆に場合によっては撤退するケースもある世界です。システム開発自体の初期コストは実際にかなり工数も掛かるので、工数が発生しない製品などは「出世払い」にして欲しいのが本音です。現状を図にすればこんな感じです。



 初期のコストを考えれば役に立つ製品を使わない選択をするケースも多くなってしまいます。しかし開発・運用コストが上がってしまえば、利益モデルが確立する時期も遅れてしまいます。

ラウンドアバウトの新・従量モデルはこれを解決するライセンスモデルであり、一言で言えば、「出世払い」できるライセンスの利用形式です。


■出世払いライセンスモデル とは？

詳しく、正確な情報は、ここをご覧ください</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/6562235782464268668/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/blog-post_17.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/6562235782464268668'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/6562235782464268668'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/blog-post_17.html' title='所有リスクとコストを減らす：スモールスタート＆出世払いの新・従量モデル'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://2.bp.blogspot.com/_zvAGg4PBKBU/SwFCvv2YuHI/AAAAAAAAAZk/3ZAct_QiI44/s72-c/%E8%A3%BD%E5%93%81%E3%82%B3%E3%82%B9%E3%83%88%E3%83%BB%E9%80%9A%E5%B8%B8%E6%94%AF%E6%89%95%E3%81%84.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-1623732509774057776</id><published>2009-11-16T09:00:00.001+09:00</published><updated>2009-11-16T09:00:03.874+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウト製品コンセプト'/><title type='text'>導入・所有コストを無くす：だから、ラウンドアバウト導入済みホスティング</title><summary type='text'>現在ITの世界でのはやり言葉、クラウド・SaaS・XaaSですが、その流れの中には「導入・所有コストの削減」が大きな目的になっています。salesforce.comが、”Success,Not Software”といって一定の支持を得ているのも、必要なものを必要なだけ使い、使った分だけ支払うということが、１つの流れになってきているのだと思います。

ラウンドアバウトはソフトウェア製品なので、”Not Software” だけだと語弊があって困りますが、実際に所有コストは非常に高くつくものです。これは、ライセンス・保守費などの見えるコストではなく、学習コストと同様に見えないコストです。
製品の調査・選定・見積・決済まで決定に至るプロセスの確定・承認コスト
購入後の発注・納品・導入・確認の入手・設定コスト 
ソフトウェア権利の保管・保守更新の事務コスト
ソフトウェアのバグフィックスやデータ</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/1623732509774057776/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/blog-post_16.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/1623732509774057776'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/1623732509774057776'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/blog-post_16.html' title='導入・所有コストを無くす：だから、ラウンドアバウト導入済みホスティング'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-8274385267602214030</id><published>2009-11-13T09:00:00.001+09:00</published><updated>2009-11-17T18:20:20.471+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウト製品コンセプト'/><title type='text'>導入容易性を上げるために：学習コストとビジネスモデル・ミスマッチ</title><summary type='text'> 製品開発の悩みの１つは、導入可能性と導入容易性のジレンマです。一般に強い支持を受けるほどターゲットは狭くなると思いますが、システムも同じで特定のシステムへの親和性を強めるとそれ以外のシステムでは使いにくくなってしまいます。

 ラウンドアバウトが現在CentOS上のApacheモジュールをプラットフォームに選択したのは、Webサーバーの環境としては一番のシェアがあるからです。それでも日本でそのシェアは50%前後のようです。今は残念ながら残りの半分はあきらめるざるを得ません。RH系Apache環境では、Apacheと一体となって動くことで、システム的には圧倒的に高い導入容易性を誇ります。しかし、導入容易性はシステム特性ばかりではありません。ラウンドアバウトでは、４つの切り口でさらに導入容易性を高める施策を打ち出しています。

■４つの切り口 
学習コスト ： 製品利用に対して必要とされる</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/8274385267602214030/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/to.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/8274385267602214030'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/8274385267602214030'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/to.html' title='導入容易性を上げるために：学習コストとビジネスモデル・ミスマッチ'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-3183673539462666311</id><published>2009-11-11T09:00:00.004+09:00</published><updated>2009-11-11T09:00:03.187+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯コンテンツ変換・製品比較'/><title type='text'>Apacheモジュールである圧倒的なパフォーマンス上の優位性</title><summary type='text'>通常のWebアプリケーションにおけるHTMLはキャッシュできないので、Apacheモジュール型のラウンドアバウトは、サーバー型（リバースプロキシー型とも言う）に比較して圧倒的に有利です。更に言えば、多くのシステムのフロントエンドにはApacheが配置されています。つまり、ラウンドアバウトは既に起動しているプロセスの中で１つのファンクションコールとして動作するという、パフォーマンス上圧倒的な有利な位置にいます。




ラウンドアバウトはプロセスの起動も管理もメモリ管理さえも既に起動したApacheからのサービスを受け、独自のIOも殆ど無く、ネットワーク通信も発生しません。

つまり、サーバー型がラウンドアバウトにパフォーマンスで勝つには、少なくとも以下の要件を満たす必要があります。

ラウンドアバウトの言語変換の処理時間 ＞ サーバー型における、通信時間、プロセス管理、言語変換の処理時間</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/3183673539462666311/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/apache.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/3183673539462666311'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/3183673539462666311'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/apache.html' title='Apacheモジュールである圧倒的なパフォーマンス上の優位性'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://3.bp.blogspot.com/_zvAGg4PBKBU/SvPMoPJlLgI/AAAAAAAAAZc/UBFdW3R_abE/s72-c/%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B9%E6%A7%8B%E6%88%90.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-878457258427156778</id><published>2009-11-10T09:00:00.002+09:00</published><updated>2009-11-10T11:04:12.845+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯コンテンツ変換・製品比較'/><title type='text'>コンテンツ変換でHTMLキャッシュありのパフォーマンスは意味が無い</title><summary type='text'>前回のエントリーで書いたように、同じコンテンツとして保証できない、またユーザーアクセスをアプリケーションに届けなければいけないために、HTMLはキャッシュしてはいけないので、変換後のHTMLキャッシュを基準にパフォーマンスを計測することは、意味がありません。




特定のコンテンツが、ユーザーセッションも使わず静的と確定しているケースであれば、HTMLキャッシュをしても良いかもしれません。それでも幾つかの問題があることを認識しておかなければなりません。
カウンターのようなCGIはその時、動作しない
アクセスログに残らない

その上、変換後のHTMLキャッシュを別サーバーのコンテンツ変換同士で共有することは、アプリケーション・セッションの混在を招く恐れがあり、非常に危険です。セッションの混在は、最悪の場合、個人情報などが他ユーザーに漏れる可能性もあります。  

おそらく、これらのリスク</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/878457258427156778/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/html_10.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/878457258427156778'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/878457258427156778'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/html_10.html' title='コンテンツ変換でHTMLキャッシュありのパフォーマンスは意味が無い'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://3.bp.blogspot.com/_zvAGg4PBKBU/SvPLdUXQKPI/AAAAAAAAAZU/iwxVpkG-jqI/s72-c/HTML%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5%E6%84%8F%E5%91%B3%E3%81%8C%E7%84%A1%E3%81%84.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-799250533422923883</id><published>2009-11-09T09:00:00.004+09:00</published><updated>2009-11-09T09:00:01.931+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯コンテンツ変換・製品比較'/><title type='text'>HTMLをキャッシュしてはいけない</title><summary type='text'>コンテンツ変換システムでは、パフォーマンスを確保するためにキャッシュをどのように設計するかは重要な設計方針です。画像については幾つかのエントリーで触れていますが、ここではHTMLについて考えてみます。最初に単純な問いかけを想定します。

”http://ra.jp/index.html”というアクセスは常に同じコンテンツとなるか？

答えは”NO”です。



なぜ、同じURLなのにコンテンツが同じではないのか？それは、”http://www.mobile.co.jp/index.php”であれば、違うことが納得いくのと同じ理由です。つまり、現代のコンテンツのほとんどは動的なページであり、ユーザーの履歴やその時のサイトの状況や時間などによって、刻々とコンテンツの中身が変わります。

アプリケーションのセッションや、クエリーパラメータ、クッキーの値、POSTデータなどなど、同じURL/</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/799250533422923883/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/html.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/799250533422923883'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/799250533422923883'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/html.html' title='HTMLをキャッシュしてはいけない'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://3.bp.blogspot.com/_zvAGg4PBKBU/SvPGglkX8zI/AAAAAAAAAZM/Z9XYKcvy5Dg/s72-c/%E5%90%8C%E3%81%98URL.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-7336986244750706742</id><published>2009-11-06T09:00:00.036+09:00</published><updated>2009-11-06T10:18:58.822+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウトを使った新しい開発方法'/><category scheme='http://www.blogger.com/atom/ns#' term='言語変換'/><title type='text'>携帯サイト制作の実践ノウハウ：コンテンツ変換をカスタマイズする２つの方法</title><summary type='text'>ここ数回のエントリーで、「PI機能」や「変換シート」を利用してコンテンツの表示コントロールをする方法を紹介しています。どちらもカスタマイズが可能なコンテンツ変換機能ですが、今回はこの２つの機能の違いや使い分けについて説明します。

●PI機能を使った変換イメージ


●変換シートを使った変換イメージ


まず大きな違いは、上の絵のように、「PI機能」はコンテンツの部分ごとに書き分けられるCASE式のようなもので、「変換シート」はサイト内で一括管理される変換設定である、という点です。

また、画面サイズやGPS対応/非対応など、機種スペックに応じた出し分けが可能なのはPI機能だけということも、決定的に違うところです。


２つの機能にはそれぞれ次のような特長があります。
PI機能の特長 

機種の属性やスペックを出し分け条件に使えるので、細かい出し分けが可能 

HTMLに記述すればサイト</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/7336986244750706742/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/blog-post_06.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/7336986244750706742'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/7336986244750706742'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/blog-post_06.html' title='携帯サイト制作の実践ノウハウ：コンテンツ変換をカスタマイズする２つの方法'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://1.bp.blogspot.com/_zvAGg4PBKBU/SvFKJjJbO2I/AAAAAAAAAY8/eaCISEz5-jE/s72-c/pi_conversion_image.gif' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-8514802832851978431</id><published>2009-11-05T09:00:00.087+09:00</published><updated>2009-11-06T10:32:39.700+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯デザイン'/><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウトを使った新しい開発方法'/><category scheme='http://www.blogger.com/atom/ns#' term='言語変換'/><title type='text'>携帯サイト制作の実践ノウハウ：破線や色付きの区切り線をhr要素で表示する</title><summary type='text'>以前外部CSSでのエントリーでも触れましたが、区切り線（hr要素）はキャリアごとにCSSプロパティの効き方が異なるので、破線や色で装飾したhr要素を３キャリアで使うのは大変です。hr要素の代わりにいっそ画像を使うというのも一つのよい判断です。

しかし画像にしたらしたで、src属性を書くことでHTMLソースが長くなります。区切り線はサイトの中で頻繁に使うものなので、&lt;hr /&gt;そのままの記述で簡単に画像が表示できたらなぁと思いませんか？



できます。ここ数日のエントリーでも紹介している、変換シートを活用することで可能です。


区切り線画像を用意し、次のイメージタグの記述を、変換シートに記述します。

&lt;img src="image/hr_dashed.gif" /&gt;
●区切り線変換ルール（イメージ）


 変換元キーワード
 &lt;hr /&gt;
 
 変換後
 ドコモ
 &lt;img src</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/8514802832851978431/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/hr.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/8514802832851978431'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/8514802832851978431'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/hr.html' title='携帯サイト制作の実践ノウハウ：破線や色付きの区切り線をhr要素で表示する'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://1.bp.blogspot.com/_zvAGg4PBKBU/SvFCybHgjYI/AAAAAAAAAY0/cIczp5PphVU/s72-c/hr.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-6856303469710268670</id><published>2009-11-04T09:00:00.028+09:00</published><updated>2009-11-05T18:30:06.155+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウトを使った新しい開発方法'/><category scheme='http://www.blogger.com/atom/ns#' term='言語変換'/><title type='text'>携帯サイト制作の実践ノウハウ：キャリア別にメール受信設定リンクを出分ける</title><summary type='text'>空メールを使った携帯サイトやサービスがよくあります。迷惑メールを懸念し携帯ドメイン以外のメールアドレスからの返信を拒否するユーザーも多いので、ユーザー離脱を起こしやすいです。こうしたユーザーに配慮し、ドメイン拒否指定をの解除がしやすいように、メール受信設定が行えるキャリアのURLにリンクを貼るなどします。 

ラウンドアバウトのない静的なHTMLでは３キャリア分のリンクを列挙することになります。違うキャリア用のリンクを踏むとエラーになるので、ユーザビリティを考慮して出し分けしたいところです。

前回書いたように、ラウンドアバウトではPI機能または変換シートの２つの方法で出し分けをすることができます。




●PI機能を使う場合

以下のサンプルのように、キャリアを出し分け条件にしてPIを記述します。

（XHTMLソース） 
&amp;#xE719;ﾒｰﾙ受信設定は&lt;br /&gt; 
&lt;?ra </summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/6856303469710268670/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/blog-post.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/6856303469710268670'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/6856303469710268670'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/11/blog-post.html' title='携帯サイト制作の実践ノウハウ：キャリア別にメール受信設定リンクを出分ける'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://1.bp.blogspot.com/_zvAGg4PBKBU/SulaW_dGi0I/AAAAAAAAAX0/XDjokQZ0KKA/s72-c/domain_before.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-7288555445156696914</id><published>2009-10-30T09:00:00.004+09:00</published><updated>2009-10-30T09:00:01.085+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウトを使った新しい開発方法'/><category scheme='http://www.blogger.com/atom/ns#' term='言語変換'/><title type='text'>携帯サイト制作の実践ノウハウ：プログラムレスで全角カタカナを半角カタカナに変換・表示する方法</title><summary type='text'>PCでは見やすい全角文字も、携帯では表示可能な幅が小さい関係上、縦に長くなりやすく見難くなるので、半角カナがよく使われます。全角を半角に変換する作業を人手で行うのは大変です。特にPC・携帯でデータソースを共有したりコンテンツ量が多い場合は、変換処理を行うアプリケーションが必要になります。

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




ラウンドアバウトの言語変換はHTMLの構造変換ではなくキーワードに一致するテキストを置換する仕組みで動作しますから、全角カタカナを半角カタカナに変換するというような、マークアップ以外のニーズにも応えることができます。

「ア」→「ｱ」、「イ」→「ｲ」・・・「ン」→「ﾝ」と、カタカナ１文字ずつについて変換ルールを用意し、CSV形式の変換</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/7288555445156696914/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/blog-post_30.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/7288555445156696914'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/7288555445156696914'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/blog-post_30.html' title='携帯サイト制作の実践ノウハウ：プログラムレスで全角カタカナを半角カタカナに変換・表示する方法'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://2.bp.blogspot.com/_zvAGg4PBKBU/Suj6l0DsQkI/AAAAAAAAAXs/W48MY3UYnbE/s72-c/zenkaku-hankaku.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-5523133198245817985</id><published>2009-10-29T09:00:00.002+09:00</published><updated>2009-10-29T09:00:03.676+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウトを使った新しい開発方法'/><category scheme='http://www.blogger.com/atom/ns#' term='言語変換'/><title type='text'>携帯サイト制作の実践ノウハウ：マルチキャリアで見えるコピーライトマーク（&amp;copy;）の出し方</title><summary type='text'>コピーライト「&amp;copy;」や登録商標「&amp;reg;」のような文字参照は、auでは「C」「R」と表示されます。下のように英字テキストと接したところが「R」や「C」になってしまうと、ユーザーに正確な情報が伝えられないので困り者です。


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


ラウンドアバウトのデフォルトの変換シートには、一部の文字参照について変換ルールが盛り込まれています。auはコピーライトや登録商標の絵文字があるので、「&amp;copy;」「&amp;reg;」をそれぞれ絵文字に変換します。



この他にも変換させたい表記があれば、必要に応じて変換シートを編集し対応させることができます。反対に、意図通りに表示できない文字を文字参照に変換させるルールを記述し、うまく表示させることも可能です。例えばこのブログエントリ「iPhoneでブラウザに円記号を表示するには？」にあるように、</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/5523133198245817985/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/blog-post_29.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/5523133198245817985'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/5523133198245817985'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/blog-post_29.html' title='携帯サイト制作の実践ノウハウ：マルチキャリアで見えるコピーライトマーク（&amp;amp;copy;）の出し方'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://3.bp.blogspot.com/_zvAGg4PBKBU/SubHhBUyAAI/AAAAAAAAAXE/YL401WSoiMU/s72-c/reg-ng.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-9139554992567071758</id><published>2009-10-28T09:00:00.005+09:00</published><updated>2009-10-28T10:21:01.218+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウトを使った新しい開発方法'/><category scheme='http://www.blogger.com/atom/ns#' term='絵文字'/><title type='text'>携帯サイト制作の実践ノウハウ：ドコモ絵文字を本来の色で見せたい</title><summary type='text'>デフォルト（青）以外のリンク色が設定されたページで、リンクテキストに絵文字を使うと、ドコモでは絵文字の色がリンク色と同じになります。リンクに限らず通常のテキストに色指定した場合も同様のことが起きます。これでは絵文字の装飾が際立たず、見栄えもしません。



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


（XHTML）
&lt;span style="color:#FF00FF"&gt;&amp;#xE6F8;&lt;/span&gt;注目ｺﾝﾃﾝﾂ&lt;br /&gt;
└&lt;a href="contents1.html"&gt;新作&lt;span style="color:#FF0000"&gt;&amp;#xE6ED;&lt;/span&gt;Xmas限定&lt;span style="color:#FF00FF"&gt;&amp;#xE71B;&lt;/span&gt;ｼﾞｭｴﾘｰ&lt;/a</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/9139554992567071758/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/blog-post_28.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/9139554992567071758'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/9139554992567071758'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/blog-post_28.html' title='携帯サイト制作の実践ノウハウ：ドコモ絵文字を本来の色で見せたい'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://4.bp.blogspot.com/_zvAGg4PBKBU/SuaxhK5zYaI/AAAAAAAAAW0/0qTjhMyrKc8/s72-c/color-glyph1.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-777211574330113003</id><published>2009-10-27T09:00:00.001+09:00</published><updated>2009-10-28T12:22:49.909+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウト製品コンセプト'/><title type='text'>どこまでも拡張できる超大規模システムを目指して</title><summary type='text'>"THE MAGIC ROUNDABOUT"というものがあるそうで、ラウンドアバウトがいくつも連結しています。


大きな地図で見る

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

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


大規模システムにおいては、まず拡張性です。システムが拡張できないことには大規模にそもそもなりません。大規模システムは、トラフィックが多く、アプリケーションが複雑です。サーバーの台数も種類もネットワーク機器も多く、回線も複雑です。このようなシステムにミドルウェアを導入しようとすれば、機能以外のシステム要件は次のようになるでしょう。

・ネットワークに影響しないこと、アプリケーションに影響しないこと、他のミドルウェアに</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/777211574330113003/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/blog-post_27.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/777211574330113003'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/777211574330113003'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/blog-post_27.html' title='どこまでも拡張できる超大規模システムを目指して'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-3536030617310489796</id><published>2009-10-26T09:00:00.001+09:00</published><updated>2009-10-26T09:00:01.658+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウト製品コンセプト'/><title type='text'>快適な交差点→安定して高速な変換システムを目指して②</title><summary type='text'>通行量が適切であると、実際のラウンドアバウトでは不思議なくらい、うまく機能するようです。



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

（前回の続きです）

■安定性の確保。メモリ消費量を減らすこと。

実装のアイデアは色々ありますが、安定性を確保するため１つだけ方法を挙げるとすれば、とにかくメモリ消費を抑え込むことです。どんなシステムでもスループットの限界がありますが、メモリ消費を少しでも抑えれば、当然スループットの限界値がUPします。Apacheのようにマルチプロセス・マルチスレッドのシステムでは僅かな節約でも大きなリターンがあります。

幸いApacheにはAPRという優れたメモリ管理ライブラリがあるので、これを使うことで安全でパフォーマンスが高く、仕様の安定した標準化されたコードを書</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/3536030617310489796/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/blog-post_26.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/3536030617310489796'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/3536030617310489796'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/blog-post_26.html' title='快適な交差点→安定して高速な変換システムを目指して②'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-3675766251129233327</id><published>2009-10-23T09:00:00.003+09:00</published><updated>2009-10-23T10:01:18.438+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウト製品コンセプト'/><title type='text'>快適な交差点→安定して高速な変換システムを目指して①</title><summary type='text'>パリの凱旋門はもしかしたら一番有名なラウンドアバウトかもしれません。


大きな地図で見る

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



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


ラウンドアバウトでは、システムのパフォーマンスと安定性は表裏一体、という考えに基づいた設計・実装をしています。優秀な実装のソフトウェアであれば、トラフィックが少ない時にパフォーマンスが良く、扱うケースが少なければ高い安定性を維持できることでしょう。しかし、ラウンドアバウトに要求されていることは、TV連動や携帯メール一斉配信のような極端なピークが発生し、豊富な画像が配置された言語不定の入力を全携帯端末に配信するような非常に複雑な処理を、高いパフォーマンスと安定性で実現することです。

■Apacheモジュールとして実装した理由。</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/3675766251129233327/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/blog-post_23.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/3675766251129233327'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/3675766251129233327'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/blog-post_23.html' title='快適な交差点→安定して高速な変換システムを目指して①'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-7682514786572806113</id><published>2009-10-22T09:00:00.003+09:00</published><updated>2009-10-22T14:17:49.680+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウト製品コンセプト'/><title type='text'>事故の無い交差点→ロバストなシステムを目指して</title><summary type='text'>本当のラウンドアバウト（交差点）の運転は、最初は非常に難しいらしい（人伝の話ですが）です。なかなか入れない、下手をすればグルグル回ったり、違うところへ出ちゃったり...経験が無くても想像はつきます。

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



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


携帯サイト開発・運営では事故が日常茶飯事です。事故が多ければ、安全運転が必要になり、たくさんのルールができます。ルールはできても守れなければ意味がありません。そして、携帯サイト開発では、このルールが複雑すぎて守れる人が少なく、これが大きな問題です。

ラウンドアバウトのアプローチはルールの強化ではありません。むしろ、ルールの撤廃です。ルールが必要なのは、ある制約が存在しているためにそれを回避する術です。</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/7682514786572806113/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/blog-post_22.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/7682514786572806113'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/7682514786572806113'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/blog-post_22.html' title='事故の無い交差点→ロバストなシステムを目指して'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-245209231604568523</id><published>2009-10-21T09:00:00.001+09:00</published><updated>2009-10-21T09:00:00.526+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウト製品コンセプト'/><title type='text'>“ラウンドアバウト（roundabout）”という名の由来</title><summary type='text'>「ラウンドアバウト」という名前は多くの日本人にはなじみ名の無い単語だと思います。なぜこんな名前をつけたか、名前に込めた意味を書こうと思います。ラウンドアバウトとはイギリスなどにある交差点の形につけられた名前です（回転木馬と言う意味もありますが）。こんな交差点です。


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

この交差点は見て分かるとおり、たくさんの道が交錯しているのに関わらず、信号がありません。



ラウンドアバウトという交差点は、様々な道から道へ自由に行くことができながら、基本的には一般的なルールをうまく適用するだけで、信号のような制約と投資をすることなく、複雑な方向変換を効率的に機能させます。

携帯コンテンツ変換エンジンを開発するに当って、「様々な制約を取り払って、極めて効率的な</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/245209231604568523/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/blog-post_16.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/245209231604568523'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/245209231604568523'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/blog-post_16.html' title='“ラウンドアバウト（roundabout）”という名の由来'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://4.bp.blogspot.com/_zvAGg4PBKBU/StgAYczQ7QI/AAAAAAAAAVc/Mbmzzi67vvQ/s72-c/%E3%83%A9%E3%82%A6%E3%83%B3%E3%83%89%E3%82%A2%E3%83%90%E3%82%A6%E3%83%88.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-1936271219260579635</id><published>2009-10-20T09:00:00.022+09:00</published><updated>2009-10-20T17:52:08.626+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウトを使った新しい開発方法'/><title type='text'>携帯サイト制作のヒント：クローラーをキャッチしSEO対策をしやすくする</title><summary type='text'>カスタマイズ可能な端末グループの１つ、「クローラーグループ」は、携帯サイトのクローラー対策に役立つ端末グループです。

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

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

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

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


ユーザーエージェントパターンの比較方法に関する詳しい解説については「開発リファレンス」を参照してください（デベロッパーコネクションにて公開中）。

ラウンドアバウトには以下のクローラーグループが予め設定されています。サイト開発者で追加・変更も可能です。CSV形式なのでExcelなどを利用して簡単に編集できます。

crawlerFroute,*</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/1936271219260579635/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/seo.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/1936271219260579635'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/1936271219260579635'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/seo.html' title='携帯サイト制作のヒント：クローラーをキャッチしSEO対策をしやすくする'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-4517330652150704115</id><published>2009-10-19T09:00:00.007+09:00</published><updated>2009-10-19T09:00:00.214+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウトを使った新しい開発方法'/><title type='text'>携帯サイト制作のヒント：端末グループを使いこなす</title><summary type='text'>PI機能で使える条件式には、ラウンドアバウトが持つ機種情報の項目名以外に「端末グループ」を使うことができます。またリクエストヘッダ「X-RA-Device-Group」から取ることもでき、アプリケーションの開発サポートとしても活用できる機能です。

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


●ユーザー端末グループ

PIをユーザー端末グループとして設定ファイルに書くことができます。繰り返し使う記述や複合条件で長くなった記述を書いたり、記述が将来変わる可能性がある場合に集約させることができます。

（端末グループ設定ファイル）
</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/4517330652150704115/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/blog-post_19.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/4517330652150704115'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/4517330652150704115'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/blog-post_19.html' title='携帯サイト制作のヒント：端末グループを使いこなす'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-8452136158419501227</id><published>2009-10-16T09:00:00.007+09:00</published><updated>2009-10-16T09:00:00.814+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウトを使った新しい開発方法'/><title type='text'>携帯サイト制作のヒント：PI機能で表示コントロール</title><summary type='text'>ラウンドアバウトの機能の１つに、アクセスした機種の属性に応じて、コンテンツ内の表示の一部を切り替える機能（PI）があります。出し分けたい内容をHTML上に記述すれば、条件にマッチする機種にのみ表示させることが可能です。

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

PI機能の利用シーンの一部
待受画面幅・高さに応じた配布する待受画像ファイルを切り替える
対応アプリの種類やバージョンに応じて配布アプリを切り替える
Flash Liteバージョンに応じてFlashコンテンツの表示をコントロールする
</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/8452136158419501227/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/pi.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/8452136158419501227'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/8452136158419501227'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/pi.html' title='携帯サイト制作のヒント：PI機能で表示コントロール'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-1410282886316068605</id><published>2009-10-15T09:00:00.002+09:00</published><updated>2009-10-15T09:00:01.333+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯デザイン'/><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウトを使った新しい開発方法'/><title type='text'>携帯サイト制作のヒント：2ペインレイアウトをするには？</title><summary type='text'>ページを縦に分割する２ペインレイアウトは、一目で多くの情報を見せることができ、ユーザビリティ向上に効果的なレイアウトです。

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


●XHTML・CSSのポイント
テーブルの幅に100%のwidthプロパティを指定
サブコンテンツ側のセルに30%程度のwidthプロパティを指定
メインコンテンツ側のセルはwidthプロパティを指定しない（自動算出）
テキスト装飾のCSSは、divかspan要素に記述する
サブコンテンツ側には画像を使う

CSSはもちろん外部CSSが使えます。最後の点ですが、ここがとても重要で、セル幅の狭いサブコンテンツにテキストを入れてしまうと、1行に4,5文字程度しか入</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/1410282886316068605/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/2.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/1410282886316068605'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/1410282886316068605'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/2.html' title='携帯サイト制作のヒント：2ペインレイアウトをするには？'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://3.bp.blogspot.com/_zvAGg4PBKBU/Ss1Vzt3NSEI/AAAAAAAAAPU/WohujG6H3GQ/s72-c/kitchen.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-502344672628599758</id><published>2009-10-13T09:00:00.002+09:00</published><updated>2009-10-13T20:19:15.707+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯デザイン'/><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウトを使った新しい開発方法'/><category scheme='http://www.blogger.com/atom/ns#' term='言語変換'/><title type='text'>携帯サイト制作のヒント：綺麗な箇条書きを実現するには？</title><summary type='text'>箇条書きリストは情報を整理して見せるのに効果的ですが、PCサイトでは一般的でも携帯サイトでは使われません。下の例のように字下げ幅やマーカーの見た目の違いが大きいことや、ドコモはCSSプロパティでアレンジできることがほとんどないことから、見た目をアレンジしたくても３キャリアで同じような表示ができないのです。


（画面：左からdocomo 904i、au G9、SoftBank 920P）


ドコモはデザイン的に貧弱です。しかもマーカーの見た目が変えられないので対処できません。ソフトバンクだけやけに字下げし過ぎて短いテキストもすぐに折り返してしまいます。情報量がさほど多くなくてもスクロールがたくさん必要な縦に間延びしたコンテンツになりがちです。auはまあまあバランスがいいですが、マーカーとテキストとの間隔がもう少し狭くてもいいかと思います。

そのため、リストを使うのはやめて単純に絵文字</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/502344672628599758/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/blog-post_13.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/502344672628599758'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/502344672628599758'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/blog-post_13.html' title='携帯サイト制作のヒント：綺麗な箇条書きを実現するには？'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://3.bp.blogspot.com/_zvAGg4PBKBU/Ss3AZz4ATqI/AAAAAAAAAQ8/nT_uFBfalSM/s72-c/list_3carrier.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-4833298134553250455</id><published>2009-10-09T09:00:00.000+09:00</published><updated>2009-10-13T20:23:54.597+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯コンテンツ変換・ASP比較'/><title type='text'>ラウンドアバウト・ホスティングの存在理由</title><summary type='text'>ラウンドアバウト・ホスティングは、「コンテンツ変換製品やサービスは高すぎる」「携帯サイトを手作りするのは大変だ」という中で、もっと安く素晴らしいコンテンツが作れないと「モバイルはこれ以上発展しない」という危機感から生まれています。サービスコンセプトは次のようなものです。

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

多くの人にラウンドアバウトという新しいテクノロジーを活用してもらうにあたっては、製品単体売りという方式では自ずと限界があります。これは購入コストだけの問題ではなく、ミドルウェア製品（サービス）の調査や判断そのものが非常に難解であることです。だから、いっそ最初から最高のものが入っていれば、何も悩まないで済み</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/4833298134553250455/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/blog-post_09.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/4833298134553250455'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/4833298134553250455'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/blog-post_09.html' title='ラウンドアバウト・ホスティングの存在理由'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://2.bp.blogspot.com/_zvAGg4PBKBU/SssbN7vdsRI/AAAAAAAAAM8/HK8fvDoVFUA/s72-c/%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9%E3%81%A7%E8%A7%A3%E6%B1%BA.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-4134949205442906079</id><published>2009-10-08T09:00:00.003+09:00</published><updated>2009-10-13T18:09:18.443+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯コンテンツ変換・ASP比較'/><title type='text'>携帯コンテンツ変換ASP：プロキシ型携帯変換の限界</title><summary type='text'>敢えて単刀直入に書けば、次のようになります。




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

今はドコモ端末FOMA用のコンテンツの開発方法を少しアレンジすれば、全てのキャリアで使えるXHTMLになるのは周知の事実です。唯一絵文字だけが解決できないので、なんらかの手段でこれを補完しているのが現状です。つまり...
キャリア間の言語変換だけでは変換エンジンの意義は非常に薄い
といえます。もちろん、</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/4134949205442906079/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/asp_08.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/4134949205442906079'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/4134949205442906079'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/asp_08.html' title='携帯コンテンツ変換ASP：プロキシ型携帯変換の限界'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://1.bp.blogspot.com/_zvAGg4PBKBU/SsnhvKGxJ8I/AAAAAAAAAM0/DjTRJNQiOZw/s72-c/%E3%83%89%E3%82%B3%E3%83%A2%E7%84%A1%E5%A4%89%E6%8F%9B%E7%84%A1%E6%84%8F%E5%91%B3.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-7040619692928229338</id><published>2009-10-07T09:00:00.001+09:00</published><updated>2009-10-13T18:08:53.501+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯コンテンツ変換・ASP比較'/><category scheme='http://www.blogger.com/atom/ns#' term='コスト'/><title type='text'>携帯コンテンツ変換ASP：プロキシ型の２URLとドコモ無変換の問題</title><summary type='text'>
プロキシ型携帯コンテンツ変換ASPでは、２つのURLが存在します。１つは元のコンテンツのあるWebサーバで、もう1つが変換プロキシサーバです。多くの場合、まず本当のURLを持っているコンテンツサーバにアクセスし、au/softbankの時は変換サーバにリダイレクトされます。そして、この事がこの方式の問題となるケースがあります。



プロキシ型変換ASPの場合には、本当のアプリケーションのあるサーバとプロキシサーバの両方がインターネットに出ているために２つのURLが存在します。また、コンテンツがドコモ端末基準で作られているため、一般にドコモ端末からのアクセスはコンテンツ変換サーバを通しません。このことは３つの点で有利です。

最大シェアのドコモが通過しないので、顧客企業はその分従量コストが節約できる
ドコモ端末のパフォーマンス劣化が起きない
ASPシステムキャパシティを節約できる

</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/7040619692928229338/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/aspurl.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/7040619692928229338'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/7040619692928229338'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/aspurl.html' title='携帯コンテンツ変換ASP：プロキシ型の２URLとドコモ無変換の問題'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://2.bp.blogspot.com/_zvAGg4PBKBU/SsnPePFag5I/AAAAAAAAAMs/6YDyrNEMa-U/s72-c/asp%E3%83%89%E3%82%B3%E3%83%A2%E3%81%AF%E7%84%A1%E5%A4%89%E6%8F%9B.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-8473323349390961062</id><published>2009-10-06T09:00:00.008+09:00</published><updated>2009-10-13T18:08:53.501+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯コンテンツ変換・ASP比較'/><category scheme='http://www.blogger.com/atom/ns#' term='コスト'/><title type='text'>携帯コンテンツ変換ASP：コストと運用面の比較</title><summary type='text'>ASP利用では導入コストが低くても、運用コストが高ければ元も子もありません。課金体系について、ラウンドアバウト・ホスティングと変換プロキシ型ASPでは大きく異なっています。


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


２者の大きな違いは、次の通りです。
ラウンドアバウト・ホスティングは、サーバ回線など全てのコストが含まれているが、プロキシ型ASPでは別にサーバを立てなければならず、サーバ調達やラック代、またはホスティング費用が別途掛かります。
ラウンドアバウト・ホスティングは、月額費固定なのでアクセスが多くてもコストが発生</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/8473323349390961062/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/asp.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/8473323349390961062'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/8473323349390961062'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/asp.html' title='携帯コンテンツ変換ASP：コストと運用面の比較'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-8995547193784471171</id><published>2009-10-05T09:00:00.003+09:00</published><updated>2009-10-13T18:08:53.502+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯コンテンツ変換・ASP比較'/><title type='text'>携帯コンテンツ変換ASPの種類</title><summary type='text'>ラウンドアバウトや他社競合製品を導入する場合、自ら選定・テスト・購入・導入する必要が生じます。その手間を省くことができるのが、ASPです。ASPであれば、利用したい期間だけ使えたり、製品テストなどをする必要が無いので、気軽に導入が図れます。そして、携帯変換にもASPがあり、2種類あります。

１つはラウンドアバウト導入済みのホスティング・サービスです。もう1つが従来の変換プロキシ型のASPサービスであり、２社から提供されています。1番の違いは製品比較同様、そのシステム構造にあります。ラウンドアバウト・ホスティングは、それだけで完結するサービスであり他には何も要りません。プロキシ型ASPでは、コンテンツが動作しているサーバが別途必要です。

２つの違いは次のようまとめられます。
プロキシ型は別途Webサーバが必要となる
プロキシ型は2度インターネットを経由してアクセスされる
携帯から</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/8995547193784471171/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/asp.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/8995547193784471171'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/8995547193784471171'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/asp.html' title='携帯コンテンツ変換ASPの種類'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://3.bp.blogspot.com/_zvAGg4PBKBU/SsMtyAS9sSI/AAAAAAAAALM/JVCJdothxIg/s72-c/%E5%A4%89%E6%8F%9BASP%E3%81%AE%E9%81%95%E3%81%84.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-184918040850180942</id><published>2009-10-02T09:00:00.006+09:00</published><updated>2009-10-29T12:25:56.847+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯デザイン'/><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウトを使った新しい開発方法'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯画像変換'/><title type='text'>携帯サイト制作のヒント：行間が詰まって読みにくいので改善したい</title><summary type='text'>新着情報など一覧でテキストを見せるようなページで、行間が詰まっていると読みにくい印象を与えます。背景色の付いたボックスと接する箇所は特に余白が欲しくなります。



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

そこでスペーサー画像を各テキストの次の行に配置して隙間を作るテクニックが使われますが、XHTMLソースを見てください。

（行間と、絵文字の両端に余白を作るためにスペーサーを配置した例）
&lt;div style="background-color:#006600"&gt;
 &lt;img src="spacer.gif" width="1" height="1</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/184918040850180942/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/blog-post_02.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/184918040850180942'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/184918040850180942'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/blog-post_02.html' title='携帯サイト制作のヒント：行間が詰まって読みにくいので改善したい'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://3.bp.blogspot.com/_zvAGg4PBKBU/SsQIBt4aitI/AAAAAAAAALU/Sgnj1HRIJcU/s72-c/linespace1.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-7430941390025564593</id><published>2009-10-01T09:00:00.004+09:00</published><updated>2009-10-13T20:19:15.708+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯デザイン'/><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウトを使った新しい開発方法'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯画像変換'/><title type='text'>携帯サイト制作のヒント：アイコンを使ったわかりやすいナビゲーション</title><summary type='text'>PCサイトではアイコンと言えば画像ですが、携帯サイトではアイコンに絵文字を使うことが一般的です。なぜなら、文字と同じくらいの画像を常に配置しておくことが難しいからです（画面サイズの数だけの画像と、それを切替える仕組みが必要）。

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

●アイコン画像を用意する

画像作成のめやす
40ピクセル四方くらいの小さい画像
色彩や絵柄のはっきりした絵柄
ファイルのデータサイズは考慮しなくてよい
形式はGIF/JPEG/PNG

   

大きさや絵柄に厳しい決まりはないですが、テキストに接する場合は文字サイズとのバランスが大事になるので、標準サイズのテキストにちょうどよく合うアイコンの高さ（=40ピクセル）</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/7430941390025564593/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/blog-post.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/7430941390025564593'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/7430941390025564593'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/10/blog-post.html' title='携帯サイト制作のヒント：アイコンを使ったわかりやすいナビゲーション'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://1.bp.blogspot.com/_zvAGg4PBKBU/SsF0Thff2LI/AAAAAAAAAKM/uKg6PbX70VY/s72-c/t01-1_icon009.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-7234838018592147672</id><published>2009-09-30T09:00:00.004+09:00</published><updated>2009-10-13T20:19:15.709+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯デザイン'/><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウトを使った新しい開発方法'/><category scheme='http://www.blogger.com/atom/ns#' term='言語変換'/><category scheme='http://www.blogger.com/atom/ns#' term='CSS'/><title type='text'>携帯サイト制作のヒント：回り込みはできますか？</title><summary type='text'>ページレイアウトを工夫する際画像のテキスト回り込みは携帯サイトでもよく見られます。ドコモ・ソフトバンクはCSSのfloatプロパティ、auはalign属性とキャリアによって方法が異なり、一般的にはベタベタに両方を書いたりキャリアによって記述を分けたりします。

ラウンドアバウトなら言語変換と外部CSSで簡単にワンソースで回り込みができます。外部CSSに対応しないiモードブラウザ1.0のFOMAにはCSSプロパティをインライン展開し、floatプロパティが効かないau向けにはalign属性に言語変換します。

ラウンドアバウトはサンプルCSSファイルに回り込みと回り込み解除用のクラスセレクタを用意しています。これを利用しワンソースで回り込みする例をお見せします。

●使用するセレクタ（CSS）
.float_l {float:left;}
.clear {clear:both;}

●</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/7234838018592147672/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_30.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/7234838018592147672'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/7234838018592147672'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_30.html' title='携帯サイト制作のヒント：回り込みはできますか？'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://1.bp.blogspot.com/_zvAGg4PBKBU/SrxdqYoB9PI/AAAAAAAAAJ0/0Vt7eMewsJs/s72-c/docomo.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-929302128381676781</id><published>2009-09-29T09:00:00.005+09:00</published><updated>2009-10-13T20:19:15.710+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウトを使った新しい開発方法'/><category scheme='http://www.blogger.com/atom/ns#' term='言語変換'/><category scheme='http://www.blogger.com/atom/ns#' term='CSS'/><title type='text'>携帯サイト制作のヒント：外部CSSは使えますか？</title><summary type='text'>一般的に、３キャリア向け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ファイル一箇所に集められることのメリットは大きいです。

ラウンドアバウトの外部CSSの使い方の具体的な解説は、開発</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/929302128381676781/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/css.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/929302128381676781'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/929302128381676781'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/css.html' title='携帯サイト制作のヒント：外部CSSは使えますか？'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-7211504949731751750</id><published>2009-09-28T09:00:00.003+09:00</published><updated>2009-10-13T20:19:15.710+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウトを使った新しい開発方法'/><category scheme='http://www.blogger.com/atom/ns#' term='言語変換'/><title type='text'>フリースタイルな携帯言語変換：フォーム入力モード</title><summary type='text'>フォームの入力モードを内容に応じて自動で切り替える入力補助機能は、テンキーで操作する携帯サイトにとって使い勝手を大きく向上させるので、是非取り入れたいものです。生年月日や電話番号のように数字入力を要求しているのであれば、初めから数字入力モードになっていて欲しいものです。

指定方法はキャリアやXHTMLかHTMLかによって色々です。それにキャリア互換があるとかないとか、キャリアによって動作が合わないだとか、とにかくもう実にややこしいことになっています。

●HTML

ドコモ
→istyle属性を使う
値
"1" ：全角かな
"2" ：半角カナ
"3" ：英字
"4" ：数字

au
→istyle属性が使える。より細かく指定できるformat属性もある
format属性値
"*A" ：大英字・記号
"*a" ：小英字・記号
"*N" ：数字
"*X" ：大英字・数字・記号
"*x" ：</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/7211504949731751750/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_28.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/7211504949731751750'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/7211504949731751750'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_28.html' title='フリースタイルな携帯言語変換：フォーム入力モード'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://3.bp.blogspot.com/_zvAGg4PBKBU/Srsiio57cdI/AAAAAAAAAJs/6PlMRg6tHik/s72-c/istyle.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-2629108720635904425</id><published>2009-09-25T09:00:00.003+09:00</published><updated>2009-10-13T20:19:15.711+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウトを使った新しい開発方法'/><category scheme='http://www.blogger.com/atom/ns#' term='絵文字'/><category scheme='http://www.blogger.com/atom/ns#' term='言語変換'/><title type='text'>フリースタイルな携帯言語変換：絵文字</title><summary type='text'>携帯絵文字はキャリアごとに種類や数も異なり書き方や互換性もバラバラなので、何らかの絵文字変換ソリューションの導入がコストを抑える手段と考えるのが一般的です。

元コンテンツに最も使われやすいのはドコモのiモード絵文字です。絵文字入力ツールが用意され入力が容易なことや、絵文字の種類が最も少ないのでマッピングを考えたときiモード絵文字をベースに考えるのが最も都合がよく、逆を取るのは高コストになるからでしょう。
こうした理由からか他の変換ソリューションの多くは変換元絵文字をiモード絵文字としているので、携帯サイト開発の現場で使うことのできる絵文字は自ずとiモード絵文字に限定されます。

一方ラウンドアバウトですが、以下は絵文字を使ったサンプルです。全て同じ絵柄（ハート）ですがキャリアごとに違う色々な書き方を混ぜています。どの書き方もラウンドアバウトを通すことで同じ絵文字が表示されます。

●</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/2629108720635904425/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_25.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/2629108720635904425'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/2629108720635904425'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_25.html' title='フリースタイルな携帯言語変換：絵文字'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://2.bp.blogspot.com/_zvAGg4PBKBU/SrHVQBmm6FI/AAAAAAAAAJE/2u0yeX23HGA/s72-c/glyph_n06a.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-219614213935627754</id><published>2009-09-24T19:17:00.004+09:00</published><updated>2009-10-20T16:14:21.816+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯画像変換'/><category scheme='http://www.blogger.com/atom/ns#' term='言語変換'/><title type='text'>携帯コンテンツ変換の選定基準：お試し変換ソース</title><summary type='text'>携帯コンテンツ変換の導入を考えているなら、実際にどんなソースが動作するのか、試すことが必要です。開発や運用の負担がどれくらい減るのか、どの程度の表現力があるかは試さないと分かりません。

ここでは、ラウンドアバウトでの特長が分かり、おそらく他のソリューションでは機種毎に見え方異なるだろう、シンプルでプレーンなhtmlを提示します。製品検討時には、是非こちらを試してみてください。


①画像メニュー　...　画像を横並びにしたソースです

●HTML
&lt;?xml version="1.0" encoding="Shift_JIS"?&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html </summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/219614213935627754/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_10.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/219614213935627754'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/219614213935627754'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_10.html' title='携帯コンテンツ変換の選定基準：お試し変換ソース'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://lh4.ggpht.com/_zvAGg4PBKBU/SqdVey3F7XI/AAAAAAAAAIs/5ycaTRxlxYI/s72-c/au_1.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-6482242631094178689</id><published>2009-09-24T09:00:00.006+09:00</published><updated>2009-10-13T20:26:10.302+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウトを使った新しい開発方法'/><category scheme='http://www.blogger.com/atom/ns#' term='言語変換'/><title type='text'>フリースタイルな携帯言語変換：DOCTYPE宣言</title><summary type='text'>XHTMLでページを作る際XML宣言の他DOCTYPE宣言の記述が必要ですが、何も見ずに空で宣言をタイプする人は少ないと思います。そこでDOCTYPE宣言の内容を書籍やインターネットから調べるのですが、「携帯　XHTML　DOCTYPE」で検索すると、各キャリア向けのDOCTYPE宣言を解説するページがヒットします。キャリアごとに推奨するものが異なり、iモードの場合さらにiモードXHTMLバージョンに応じて記述が変わるので、「まとめ」と称しながら、種類が多くなっています。これを読んだサイト開発者としては結局どれを書けばよいのか悩んでしまうでしょう。またどれか一つDOCTYPE宣言を決めたら、記述するXHTMLもそれに従うべきなのか？と、さらに開発者を迷わせることになります。

●iモードXHTML 1.0
&lt;!DOCTYPE html PUBLIC "-//i-mode group (</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/6482242631094178689/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/doctype.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/6482242631094178689'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/6482242631094178689'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/doctype.html' title='フリースタイルな携帯言語変換：DOCTYPE宣言'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-6806959233278228306</id><published>2009-09-18T09:00:00.004+09:00</published><updated>2009-10-13T20:26:10.303+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウトを使った新しい開発方法'/><category scheme='http://www.blogger.com/atom/ns#' term='言語変換'/><title type='text'>フリースタイルな携帯言語変換：マーキー</title><summary type='text'>携帯コンテンツを作る際、マークアップ言語は何を使ったらよいのか？ラウンドアバウトでは次のように考えています。
XHTMLなら何でもOK
CSS利用可能
各キャリア向けXHTMLは互いに細かいところで違いが多くあるが、体系としてはほとんど一緒なので、ラウンドアバウトは何でも受け入れられます。

「何でも」とは、「iモード向けでも」「au向けでも」と、何か一種類の統一されたマークアップなら何でもということに限りません。他のXHTMLが混在していても、さらにはXHTMLの途中にCHTMLの記述が混ざっていてもOKです。こんなルーズな感覚が実際の現場にとっては負担がないのです。

キャリアごとのXHTMLやCSSプロパティの記述方法の違いで、複雑になりがちなものの一つに、マーキーの書き方があります。

●3G向け
&lt;span style="display: -wap-marquee;"&gt;ﾏｰｷｰ</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/6806959233278228306/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_18.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/6806959233278228306'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/6806959233278228306'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_18.html' title='フリースタイルな携帯言語変換：マーキー'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://1.bp.blogspot.com/_zvAGg4PBKBU/SrCT2-6rnXI/AAAAAAAAAI8/-LuggFei20c/s72-c/marquee-n905i.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-4683148481801540607</id><published>2009-09-17T09:00:00.005+09:00</published><updated>2009-10-13T20:13:36.488+09:00</updated><title type='text'>古い端末を非対応にしたい→RA非対応端末リダイレクト機能</title><summary type='text'>一応、もしかしたら使っているかもしれない古～い端末があります。どんものがあるのでしょうか？

・ドコモ
P501i　1999年発売　白黒表示　96x120ピクセル表示　5KBキャッシュ SSL非対応
N502i　2000年発売　4色表示　118x129ピクセル表示　5KBキャッシュ SSL非対応

・ソフトバンク（2000年当時はJ-PHONE）
J-T04　2000年発売　256色表示　96x90ピクセル表示　6KBキャッシュ SSL非対応
J-T04　2001年発売　256色表示　118x124ピクセル表示　6KBキャッシュ SSL非対応

・au
A3013T　2002年発売　65536色表示　144x135ピクセル表示　9KBキャッシュ SSL対応
A3012CA　2002年発売　65536色表示　125x147ピクセル表示　9KBキャッシュ SSL対応　

２Gのユーザーも大事</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/4683148481801540607/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/ra.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/4683148481801540607'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/4683148481801540607'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/ra.html' title='古い端末を非対応にしたい→RA非対応端末リダイレクト機能'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-8080149858283116463</id><published>2009-09-16T09:00:00.008+09:00</published><updated>2009-10-20T16:17:31.337+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウト製品コンセプト'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯サイト開発の問題点とラウンドアバウト'/><title type='text'>携帯サイト開発の高コスト構造</title><summary type='text'>携帯コンテンツ変換ソリューションの導入の大きな目的はコスト削減です。どのコストがどの位削減されるかは、前提システムやコンテンツによって大きな差がでますが、開発・運用全体のコスト構造を考える必要があります。一般に開発費以上に保守費が大きな問題とされます。ラウンドアバウトのコスト削減に対するアプローチ、それは...

開発・保守を誰でも可能とし、専門知識を不要にすることで、人件費を抑える

ことです。手法は異なりますが、CMSにも通じる考え方です。コスト要因の最大の問題は人件費であり、人件費は専門性が必要とされるほど高くなります。自社や既存の取引先に開発や保守を頼めれば、コスト構造を大幅に改善することが可能になります。

携帯サイトは一般にトラブルが多く、アプリケーションの保守にも細心の注意が必要です。このため、専門家や経験豊かな会社に頼むことが多く、逆に専門でない会社は消極的な姿勢に成</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/8080149858283116463/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_16.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/8080149858283116463'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/8080149858283116463'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_16.html' title='携帯サイト開発の高コスト構造'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-1238173563063880140</id><published>2009-09-14T09:00:00.015+09:00</published><updated>2009-10-20T16:11:02.036+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯コンテンツ変換・製品比較'/><title type='text'>携帯コンテンツ変換の選定基準：環境構築と問題の切り離し</title><summary type='text'>携帯コンテンツ変換を検討するに当たり、機能や性能の他に考慮すべき事項に環境構築と問題発生時の対応があります。

■環境構築について

通常、４つの環境が関係してきます。
本番運用環境
本番試験（ステージング）環境　...　本番とほぼ同じ状態に保たれている試験環境
開発環境　...　開発現場の結合テスト環境
開発者ローカル環境（PC）

それぞれの環境でアプリケーションが同じように動作しなくてはなりません。複雑な本番環境には、同様に複雑な環境を作っておかないと本番でしか出ない問題が起きたりします。ただ、試験や開発には本番と同じようにコストは掛けられません。この時、決定的な要素は、

ソフトウェアか、ハードウェアか？

と言う点です。サーバ型であってもソフトウェアであれば、本番と同等の構成を柔軟に構築できます。しかし、ハードウェアであると本番同等の環境を作ることは難しいでしょう。特に大規模</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/1238173563063880140/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_14.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/1238173563063880140'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/1238173563063880140'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_14.html' title='携帯コンテンツ変換の選定基準：環境構築と問題の切り離し'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-2414644582913262744</id><published>2009-09-10T09:00:00.004+09:00</published><updated>2009-10-20T16:11:32.741+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='言語変換'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯コンテンツ変換・製品比較'/><title type='text'>携帯コンテンツ変換の選定基準：変換エラーと変換アーキテクチャー</title><summary type='text'>コンテンツ変換システムにおいて、変換仕様はもちろん重要ですが、

正しい記述で変換仕様にのっとった例）
&lt;FONT color="black" &gt;Hello&lt;/FONT&gt;　
→　&lt;span &gt;Hello&lt;/span&gt;

実は、変換仕様「外」の振る舞いも、負けず劣らず重要です。

間違った記述の変換仕様外の例）

&lt;FOMT color="black" &gt;Hello&lt;/ont&gt; 　　（存在しないタグ）
&lt;FONT &gt;Hello　　　　　　　　　　　(閉じてない)
&lt;FONT colorblack=" &gt;Hello&lt;/FONT&gt;　　　　　（属性記述に間違い）
&lt;FONT color="black" &gt;&lt;div&gt;A&lt;/div&gt;Hello&lt;/FONT&gt;　(インラインタグ内にブロックタグ)
このような例は、意図せぬミスや勘違いやバグなどから発生しますが、どのように処理されるべきでしょうか？やはり</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/2414644582913262744/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_11.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/2414644582913262744'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/2414644582913262744'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_11.html' title='携帯コンテンツ変換の選定基準：変換エラーと変換アーキテクチャー'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-7908607108025286513</id><published>2009-09-09T09:00:00.005+09:00</published><updated>2009-10-20T16:12:07.146+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='パフォーマンス'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯コンテンツ変換・製品比較'/><title type='text'>携帯コンテンツ変換の選定基準：スループット</title><summary type='text'>パフォーマンス（1アクセスの平均レスポンスタイム）と並んでユーザにとって重要な指標がスループット（1秒間あたりの処理数）です。「同時接続数はどれくらいですか？」などとよく聞かれます。スループットはサーバ台数に直接に影響を与える数字です。当然、サーバ台数が少なくて済むように、より高い性能であることが望ましいです。

１/スループット＝パフォーマンス

なのですが、両者には別の相関関係があって、アクセスがスカスカの状態ではパフォーマンスは非常に良く、アクセスが増えてくれば徐々にパフォーマンスは劣化し、アクセスが増えすぎると両方落ち込みます。コンテンツ変換製品でもスカスカの状態では、パフォーマンスの違いは、あまり出ないかもしれません。問題はアクセスが増えてきてからで、どこまでスループットを上げることができるかが重要です。スループットが最大のときのパフォーマンス比較ができれば、信頼できる</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/7908607108025286513/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_09.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/7908607108025286513'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/7908607108025286513'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_09.html' title='携帯コンテンツ変換の選定基準：スループット'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://4.bp.blogspot.com/_zvAGg4PBKBU/SqC-kWxEg8I/AAAAAAAAAGE/donVYDTVLUs/s72-c/%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9%E5%AE%9F%E6%B8%ACRA.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-1014859134480869514</id><published>2009-09-08T09:00:00.008+09:00</published><updated>2009-11-17T16:01:03.733+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯画像変換'/><category scheme='http://www.blogger.com/atom/ns#' term='パフォーマンス'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯コンテンツ変換・製品比較'/><title type='text'>携帯コンテンツ変換の選定基準：パフォーマンス</title><summary type='text'>携帯コンテンツ変換エンジンは、システムのフロントに位置し、常にレスポンスが通過するので、そのパフォーマンスは非常に重要です。パフォーマンス・データはコンテンツや環境や計測方法に非常に大きく依存し、客観的な方法は存在しないので分かり難いものです。良いデータを出しすぎてユーザからクレームをもらうのも好ましくなく、悪いデータを出すこともできず...とベンダー側も悩みます。

ラウンドアバウトでは、多少のリスクをとってパフォーマンスデータを公開しています。また1,000/秒のスループットも表明しています。画像キャッシュがある状態で、ノーマルなサーバで１ページ10画像程度のコンテンツで試せば、HTML/画像を合わせて、秒間1,000アクセスは控えめに言っても出るでしょう。ただ、他製品では「独自な技術で高速」というだけで、データも中身が分かりません。

■ハイ・パフォーマンスには理由がある
８：２の</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/1014859134480869514/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_08.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/1014859134480869514'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/1014859134480869514'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_08.html' title='携帯コンテンツ変換の選定基準：パフォーマンス'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://lh4.ggpht.com/_zvAGg4PBKBU/SqBqS4gk33I/AAAAAAAAAF8/saPYv71lTpE/s72-c/%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-1906586154037586766</id><published>2009-09-07T09:00:00.008+09:00</published><updated>2009-11-17T16:08:13.323+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='負荷分散'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯コンテンツ変換・製品比較'/><category scheme='http://www.blogger.com/atom/ns#' term='サーバ構成'/><title type='text'>携帯コンテンツ変換の選定基準：ネットワーク設計とセッション</title><summary type='text'>携帯コンテンツ変換を選定する際、重要なポイントの１つは製品自体がセッションを使う処理をするかどうかです。携帯コンテンツ変換製品がセッションを使う機能がある場合、ネットワーク設計に大きな制約が生じます。セッションを使用する代表的な機能が、「ページ分割」と「クッキーエミュレーション」です。

セッションを使うと次のような制約が発生します。

アクセス端末は常に同じ特定変換サーバを通過する必要がある
このため単純なラウンドロビンが使用できず、パラメータ等による振分けが必要となる
アプリケーションもセッションを利用し、特定サーバでの処理を要求する場合がある
この時、１つの携帯からは特定変換サーバと特定Webサーバを通過するように、ネットワーク設計しなくてはならない。
そこで３つのサーバ構成が考えられます。

セッションありサーバ型の構成及びアクセスルート



左図は2段にロードバランサを配置</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/1906586154037586766/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_07.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/1906586154037586766'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/1906586154037586766'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_07.html' title='携帯コンテンツ変換の選定基準：ネットワーク設計とセッション'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://4.bp.blogspot.com/_zvAGg4PBKBU/Sp9o6fVtN-I/AAAAAAAAAEU/teuDKNPIP20/s72-c/%E8%B2%A0%E8%8D%B7%E5%88%86%E6%95%A3%E6%A7%8B%E6%88%90%E3%82%B5%E3%83%BC%E3%83%90%E5%9E%8B.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-1175352962307704086</id><published>2009-09-04T09:00:00.006+09:00</published><updated>2009-10-20T16:13:30.998+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='負荷分散'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯コンテンツ変換・製品比較'/><category scheme='http://www.blogger.com/atom/ns#' term='サーバ構成'/><title type='text'>携帯コンテンツ変換の選定基準：ネットワーク設計</title><summary type='text'>コンテンツ以上にネットワーク構成はシンプルでなくてはなりません。複雑なネットワークはトラブルを招き易く、コストも高く、変更リスクも高くなります。ネットワーク設計・設定といっても、ルータやロードバランサ、DNS、HTTPサーバなど様々なレベルのものがあり、１つの課題を解決する方法も多種多様です。ネットワーク技術に長けたエンジニアは少なく、基本的に高コストです。そのため、ネットワークをシンプルにすることはシステム設計上の最重要項目の１つです。

負荷分散とフェールオーバーを考慮した複数台のサーバ構成をする場合、サーバ型とラウンドアバウトではネットワーク構成が大幅に異なります。

フェールオーバーを考慮したサーバ型とラウンドアバウトのシステム構成


サーバ型では、ネットワークに追加するだけ、と言われますが、実際のところ追加するのは簡単ではありません。左図のようにロードバランサを2段に組む必要</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/1175352962307704086/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_498.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/1175352962307704086'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/1175352962307704086'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_498.html' title='携帯コンテンツ変換の選定基準：ネットワーク設計'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://2.bp.blogspot.com/_zvAGg4PBKBU/Sp9PMshicKI/AAAAAAAAAEE/ZlFmboG3HZY/s72-c/%E8%B2%A0%E8%8D%B7%E5%88%86%E6%95%A3%E6%A7%8B%E6%88%90.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-7224207033926243933</id><published>2009-09-03T09:01:00.009+09:00</published><updated>2009-10-20T16:13:52.366+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯コンテンツ変換・製品比較'/><category scheme='http://www.blogger.com/atom/ns#' term='サーバ構成'/><title type='text'>携帯コンテンツ変換の選定基準：サーバー台数</title><summary type='text'>ラウンドアバウトと他社製品の一番の違いは、サーバー台数です。もっとも違いが分かりやすいのは、変換サーバーをハードウェアとして提供している製品です。

例えば、Webサーバーが3台ある環境で、ハード提供型は3台の変換サーバーが必要で、合計6台となります。一方ラウンドアバウトはWebサーバーに組み込まれますので3台のままです。

サーバー型とラウンドアバウトの台数の違い


あなたならどちらを選びますか？？
ラウンドアバウトのコンセプトは、Simple is Best.であり、携帯の全ての特殊性を排除することです。携帯システムだからといってシステム構成自体が特殊化することは、コンテンツの特殊性よりも遥かに大きな問題だと考えています。


おそらく、サーバー型のコンセプトは、「ネットワークに追加するだけ」「問題の切り分けが容易」というものだと思います。


さらに別の例を見てみます。PCも携帯</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/7224207033926243933/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_2209.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/7224207033926243933'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/7224207033926243933'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_2209.html' title='携帯コンテンツ変換の選定基準：サーバー台数'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://1.bp.blogspot.com/_zvAGg4PBKBU/Spz3pMsaUDI/AAAAAAAAADs/cqsi9CTJDdw/s72-c/%E5%8F%B0%E6%95%B0%E6%AF%94%E8%BC%83.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-1454164018731457193</id><published>2009-09-03T09:00:00.003+09:00</published><updated>2009-10-20T16:14:58.671+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯コンテンツ変換・製品比較'/><title type='text'>携帯コンテンツ変換の選定基準</title><summary type='text'>携帯コンテンツ変換を導入を検討するに当たり、どのような点を選定基準とするか、まとめていきたいと思います。ラウンドアバウトコンセプトというBlogの中では中立性を保つことはできませんが、ここで触れる内容こそラウンドアバウトのコンセプトそのものであり、その違いを示すことができればよいと思います。

常に製品は、様々な機能の有無を○×付けて評価されますが、実は”×”であることにも強い意味がある場合もあります。製品のコンセプトを理解してもらうことは、その製品の最も有効な使い方や将来性について、ユーザーに安心して製品を使ってもらうために大事なことだと考えます。

コンセプトは製品の外殻であり、この殻が内側に位置する色々な機能の性質・性能に決定的な影響を及ぼします。ユーザーからすれば最小限の機能さえ満たせれば、コンセプトから生じる製品の基本特性が一番重要です。それは製品を選定する上で最初に必要な情報</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/1454164018731457193/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_03.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/1454164018731457193'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/1454164018731457193'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_03.html' title='携帯コンテンツ変換の選定基準'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-7546840830401048078</id><published>2009-09-02T09:00:00.004+09:00</published><updated>2009-10-13T20:23:35.732+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯アクセス解析の問題点とフットプリント'/><category scheme='http://www.blogger.com/atom/ns#' term='フットプリント'/><title type='text'>フットプリントの導入意義</title><summary type='text'>フットプリントについては詳しい機能の説明や使えるツールなどはHPを参照してください。
携帯サイトのユーザー認識できる生ログが記録できる
これがフットプリントの今までに無い価値なのですが、ではフットプリントが無ければどうなるのか、検証してみたいと思います。


au/softbankの端末は、HTTP/SSLの両方ともユニークIDがリクエストヘッダーから取得できますので、設定すればApacheログに記録できます。
次にdocomoですが、全てのリンクにguid=onと記述する必要があるので、コンテンツに修正が必要です。また副作用は無いと思いますが、１ソースでこのリンクをつけると全キャリアにその記述が入ります。
docomoのSSLはIDが取得できないので、HTTPアクセス時に１サーバーの場合にはアプリケーションセッションに入れることも出来ますが、複数サーバーの場合には困難でしょう。
また</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/7546840830401048078/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_02.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/7546840830401048078'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/7546840830401048078'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post_02.html' title='フットプリントの導入意義'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-1423249059603075301</id><published>2009-09-01T09:00:00.008+09:00</published><updated>2009-10-13T20:23:35.733+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯アクセス解析の問題点とフットプリント'/><category scheme='http://www.blogger.com/atom/ns#' term='フットプリント'/><title type='text'>新しい携帯サイトのアクセス解析の方法：フットプリント</title><summary type='text'>もうすぐラウンドアバウト製品ファミリーである、ラウンドアバウト・フットプリントがv1.0.1となってリリースされます。フットプリントプリントはその名の通り、アクセスログに足跡をつけるツールです。ですから、これ単独ではアクセス解析はできません。しかし、このツールは携帯アクセス解析に大きな進歩をもたらすことができる製品です。

■背景
以前はあまり携帯ではアクセス解析は必要ありませんでした。なぜなら公式サイトが中心であり、アクセス数が多ければ公式メニューの上位に表示され、これがさらに入会を増やす（売上UP）というサイクルだったからです。ところが携帯でもECやコミュニティなどの勝手サイトが台頭する流れの中で、キャリアがTOPメニューに検索を設けるようになりました。検索エンジンも携帯サイト用のクローラーで情報を集めるようになり、ここに至って携帯サイトでもSEOやSEMが必要</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/1423249059603075301/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/1423249059603075301'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/1423249059603075301'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/09/blog-post.html' title='新しい携帯サイトのアクセス解析の方法：フットプリント'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://3.bp.blogspot.com/_zvAGg4PBKBU/SpuTne4cdWI/AAAAAAAAADc/-CSm5pn0PHM/s72-c/IMG%E3%83%93%E3%83%BC%E3%82%B3%E3%83%B3%E6%96%B9%E5%BC%8F%E3%81%AE%E3%81%BF%E5%9B%B3.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-7085126942334162392</id><published>2009-08-31T09:00:00.005+09:00</published><updated>2009-10-13T20:16:13.403+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯アクセス解析の問題点とフットプリント'/><category scheme='http://www.blogger.com/atom/ns#' term='フットプリント'/><title type='text'>imgタグビーコン方式の問題点②高コスト</title><summary type='text'>■ビーコン式ASPは高い

imgタグビーコン方式は通常ASPで提供され、決して安くはありません。有用なサービスを開発・運用しているので当然なのですが、携帯アクセス解析にとってはこれこそが最大の問題です。定常的な固定費のかかるシステムは敬遠される傾向にあり、場合によってはサーバやコンテンツ保守より高価になってしまうアクセス解析の普及の妨げになっていると思われます。

GoogleAnalyticsのように無料で提供されれば良いのですが、おそらくそのようなサービスはないでしょう。ログ解析自体は直接利益を生むわけではないし、PCであればGoogleAnalyticsを初めとする高度な解析サービスが無料で提供されている中で、月額3万～10万、年間30万円や100万円の最低料金を払えるサイトはそれほど多くはないでしょう。

導入コストが高いために、本来全てのサイトであるべきアクセス解析が、全</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/7085126942334162392/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/img.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/7085126942334162392'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/7085126942334162392'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/img.html' title='imgタグビーコン方式の問題点②高コスト'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-8276585767898064583</id><published>2009-08-28T09:00:00.006+09:00</published><updated>2009-10-13T20:16:13.403+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ドコモSSL'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯アクセス解析の問題点とフットプリント'/><category scheme='http://www.blogger.com/atom/ns#' term='フットプリント'/><title type='text'>imgタグビーコン方式の問題点①SSL通信時</title><summary type='text'>■ドコモ端末のSSL通信制限

完璧なようなimgタグビーコン方式ですが、ドコモ端末仕様の制限が立ちはだかります。ドコモ端末はSSL通信時に２つの制限があります。

★ドコモ端末におけるSSL通信時の制限
ホストドメイン以外の画像へアクセスすることができない
iモードID（キャリアユーザーID）を取得することができない
SSL通信領域は、会員情報登録フローや商品購入フローなど、コンバージョンに関わるWebで最も重要なページが含まれています。ドコモの制限があるとSSL通信時にはビーコンを飛ばすことができません。また、通信可能なホストドメイン上でさえユーザーIDを取得できないので、致命的な状況です。このため、多くのサービスではSSL通信には対応していません。

＜SSL通信時のimgタグビーコン方式の問題＞


■SSL通信の制約を乗り越える方法と問題点

いくつかのimgタグビーコン方式は</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/8276585767898064583/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/imgssl.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/8276585767898064583'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/8276585767898064583'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/imgssl.html' title='imgタグビーコン方式の問題点①SSL通信時'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://3.bp.blogspot.com/_zvAGg4PBKBU/SpUikpD58TI/AAAAAAAAADM/pPeDvrQPLqM/s72-c/IMG%E3%83%93%E3%83%BC%E3%82%B3%E3%83%B3%E6%96%B9%E5%BC%8FSSL%E5%95%8F%E9%A1%8C.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-664103553542116481</id><published>2009-08-27T09:00:00.006+09:00</published><updated>2009-10-13T20:16:13.404+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯アクセス解析の問題点とフットプリント'/><category scheme='http://www.blogger.com/atom/ns#' term='フットプリント'/><title type='text'>現在の携帯サイトのアクセス解析の方法</title><summary type='text'>■方法１：アプリケーションでセッションパラメータを生成し引き回す

携帯サイトのアクセス解析ですが、クッキーが使えないのでPHPやJavaのセッションなどを利用して、これらの値を引き回してサーバーログにURLパラメーターとして記録してツールで取り込んだりします。このようなアプリケーションで頑張る方法は、開発・運用コストが高くつくことに加え、一度パラメータのセッションが切れてしまったら、次のアクセスは別セッションとなってしまう問題があります。切れてしまえばユーザーがリピーターかどうか判別するには、ログインさせる必要が出てきたりして、ユーザビリティの劣化が発生したりします。

もう１つ重要な制限として、静的ページに使えないという点があります。アプリケーションとしてセッションを引き回す必要がないページでも一度切れてしまうと別セッションとなってしまうため、静的なページでも動的なページとして作</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/664103553542116481/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/blog-post_27.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/664103553542116481'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/664103553542116481'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/blog-post_27.html' title='現在の携帯サイトのアクセス解析の方法'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://1.bp.blogspot.com/_zvAGg4PBKBU/SpUbZF3198I/AAAAAAAAADE/AMZ0ImSaytU/s72-c/IMG%E3%83%93%E3%83%BC%E3%82%B3%E3%83%B3%E6%96%B9%E5%BC%8F.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-1815738318630508275</id><published>2009-08-26T09:00:00.006+09:00</published><updated>2009-10-13T20:16:13.404+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯アクセス解析の問題点とフットプリント'/><category scheme='http://www.blogger.com/atom/ns#' term='フットプリント'/><title type='text'>携帯サイトのアクセス解析が特殊な理由</title><summary type='text'>携帯サイトも当然アクセス解析が必要ですが、PCであればとりあえずアクセスログを解析ツールで読み込ませて基本的な解析を開始できます。webalizerやAWStatsなど無料のツールもあります。ただし、これらのツールはIPベースでユーザー識別するので、個人自宅からのアクセスはほぼ同じアドレスからアクセスされるのでよいのですが、ゲートウェイを経由する企業からのアクセスを考慮すると、セッション数（ユーザー数）などのデータには正確性に問題があります。問題はありますが、なんといってもコスト０で実現できる点は大きな利点です。

とはいえ、やはりセッション数を把握しない限り正しい解析はできませんし、コンバージョン数や経路分析までも求められて来ると、どうしても個別のユーザーを判別しなくてはなりません。そこでユーザーを識別するために、クッキーを使って個別のアクセスを区別します。方法として、クッキーを使った</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/1815738318630508275/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/blog-post_26.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/1815738318630508275'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/1815738318630508275'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/blog-post_26.html' title='携帯サイトのアクセス解析が特殊な理由'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-5607894844425936950</id><published>2009-08-25T09:00:00.013+09:00</published><updated>2009-10-13T20:20:21.846+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯画像変換'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯サイト開発の問題点とラウンドアバウト'/><title type='text'>フォント問題は画像で解決できる</title><summary type='text'>テキストには、フォントが不定かつ機種で異なるのでデザイン計算できないという異機種の問題と、1行の文字数は個々の端末としては固定であり自由ではなく、高さもいつも決まった分必要だという問題があります。後者は当たり前のことかもしれませんが、デザインを考える上では制約となってしまします。

ラウンドアバウトの下で画像を使って、TOPメインメニューを作れば、文字数もフォントも自由に、そしてどんな端末でも同じように見えます。下図の例は５つの画像を並べた例です。





”項目名：データ”のようなレイアウトも画像を使えば、項目名の長さに囚われずにインデントを揃えて、そしてデータとの区別をしっかりつけたデザインをすることが出来ます。左図はその例となります。このような画像を１つだけ作るだけで綺麗なユーザビリティの高いデザインを全ての端末で実現することができます。

ラウンドアバウトはレイアウトを崩</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/5607894844425936950/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/blog-post_18.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/5607894844425936950'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/5607894844425936950'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/blog-post_18.html' title='フォント問題は画像で解決できる'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://4.bp.blogspot.com/_zvAGg4PBKBU/SpKENnwRkzI/AAAAAAAAACk/aBJRU_7rhBg/s72-c/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC.gif' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-6136120148369166416</id><published>2009-08-21T09:00:00.007+09:00</published><updated>2009-10-29T12:28:06.937+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯デザイン'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯画像変換'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯サイト開発の問題点とラウンドアバウト'/><title type='text'>携帯端末のフォント問題</title><summary type='text'>昔の端末は1行が8文字～１２文字と決まっていて大きさも変更できませんでした。しかし、現在の端末はサイズが選択でき、かつ組込フォントは機種毎に異なり画面幅も違うので、1行に何文字とは決められません。htmlではフォントサイズは指定できますが、表示を正確にコントロールすることはできません。そもそも、HTML自体がフォントを絶対的な大きさで表現する技術ではないので、コントロールできたところで本来あまり意味は無いのですが、携帯サイトでは事情が異なっています。

よくあるのがTOPメインメニューで、ユニクロの携帯サイトを例に取れば、

MEN｜WOMEN｜KIDS｜BABY｜HOME

となっています。このメニューの問題を挙げてみましょう。

テキストなので、端末によってどこで折り返されるのか不定です
フォントが不定なので、見易いのか見辛いのか不定です
メインメニューにも拘らず、他の</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/6136120148369166416/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/blog-post_21.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/6136120148369166416'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/6136120148369166416'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/blog-post_21.html' title='携帯端末のフォント問題'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-620064702854557404</id><published>2009-08-20T09:00:00.003+09:00</published><updated>2009-10-13T18:13:43.316+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='２G対応'/><title type='text'>２G端末の現状と対応</title><summary type='text'>２Gも対応したいんです。と、要望される人も多いのですが、まずは数字から抑えることが重要です。


２Ｇサービス
１月末
４月末
７月末

ドコモPDC
666万
556万
461万

ソフトバンクPDC
275万
197万
150万

ａｕCDMAOne
34万
31万
29万



その上、ソフトバンクＰＤＣは来年の３月をもってサービス終了となります。auに関してはほぼプリペイド型であるのでWeb対応は考慮しなくてもよいでしょう。ドコモに関しては２０１２年まで続きます。ドコモだけで毎月30万台の端末がＰＤＣから抜けていく計算で、ソフトバンクがなくなることを考えると、おそらく来春にはドコモＰＤＣの200万台以下へのサービスをどうするか？という問題になります。なお、7月末時点で全契約数は１億８９０万台であり、Web契約は９１７３万台なので、PDCのうちWebを見ているものは更に限られます。</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/620064702854557404/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/g.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/620064702854557404'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/620064702854557404'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/g.html' title='２G端末の現状と対応'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://3.bp.blogspot.com/_zvAGg4PBKBU/SopUGSuJA5I/AAAAAAAAACc/SAlG3r-w7Yc/s72-c/kpdc01.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-452627498579319485</id><published>2009-08-19T09:00:00.007+09:00</published><updated>2009-10-13T20:19:15.712+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウトを使った新しい開発方法'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯画像変換'/><title type='text'>ラウンドアバウトが実現するリッチな携帯サイト</title><summary type='text'>最初にリッチの定義からします。

リッチ＝ユーザビリティが高い

ユービリティが高いとは、コンテンツが見易く、欲しい情報に素早くアクセスし、正確な情報を得ることができ、操作に迷わないデザインです。最終的にコンテンツ制作者の腕にかかってくることですが、携帯サイトでは、様々な制約があることから、特殊な腕を要求していました。例えば...

トップメニューは項目を縦棒で区切る
タイトルのバックグラウンドカラーを設定して目を引く
絵文字の使い方を統一する
半角スペースで見出しの字数を揃える
とかとか。これらのテクニックはテキストの中で如何に目出せたり、綺麗に見せるかということを目的にしていますが、如何せん、テキストばかりなので苦労するほどの効果が得られません。テキストベースでサイトに装飾することには限界があり、問題もあります。ところが画像であれば、多くの問題を解決することができます。



左は</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/452627498579319485/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/blog-post_19.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/452627498579319485'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/452627498579319485'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/blog-post_19.html' title='ラウンドアバウトが実現するリッチな携帯サイト'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://3.bp.blogspot.com/_zvAGg4PBKBU/Sok9ApkdrNI/AAAAAAAAACU/6PyKhCjFR-o/s72-c/k04.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-203455363491321395</id><published>2009-08-18T12:00:00.002+09:00</published><updated>2011-12-06T19:02:58.861+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯デザイン'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯画像変換'/><title type='text'>携帯サイトのデザインが貧弱な理由</title><summary type='text'>この業界にいる身としては悔しいですが、一般的に携帯サイトはデザインは貧弱と思われています。理由は、小さな画面、テキスト中心、単純なレイアウト（人によってはI型とか言う）などによるのでしょう。

小さな画面は仕方ないとして（携帯できないと意味ないですから...）、テキスト中心、単純なレイアウトになってしまう理由として、よく言われるのが
携帯は画像の処理が苦手
画像は遅いのでテキスト中心にすべき
携帯は画面が小さいので、単純なデザインの方が好まれる
などですが、果たしてそうでしょうか？



左の２画面はラウンドアバウトのデモ画面ですが、左の絵は34個の画像で全てを合わせて113Kbあります。SoftBankの９３０SH（VGA端末）で、10秒程度で全て表示されます。

ラウンドアバウト・サンプルサイト：キッチン.com

見ての通り、画像についてPCと同じように多用しても、現在の端末</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/203455363491321395/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/blog-post_13.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/203455363491321395'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/203455363491321395'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/blog-post_13.html' title='携帯サイトのデザインが貧弱な理由'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://4.bp.blogspot.com/_zvAGg4PBKBU/Sokr41vRl7I/AAAAAAAAAB8/mhUpm5LIq6Q/s72-c/k01.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-4140084159963499684</id><published>2009-08-17T09:00:00.005+09:00</published><updated>2009-11-16T18:29:10.869+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯サイト開発の問題点とラウンドアバウト'/><title type='text'>携帯画像：ブラウザーキャッシュ容量問題：ラウンドアバウトの解決法</title><summary type='text'>ラウンドアバウトは、コンテンツ制作からブラウザーキャッシュ容量の制約を完全に除去します。アプローチとして、ブラウザーのハードウェアの容量を上げられないのであればコンテンツの容量を下げるしかありません。ラウンドアバウトも他の一部のソリューションと同様に画像の品質をダウンさせることで、容量を削減しますが、根本的に違うところは次の1点です。

アクセス端末のキャッシュ容量内に収まるように、ページ中の全画像を変換する

キャッシュ内への容量調整を複数画像変換に対応して行い、決してオーバーフローしないことが、ラウンドアバウトにしかできないものです。また、

全て自動で行い、コンテンツには何も記述する必要はありません
セッションレスで動作するのでHTMLと画像が別のサーバーから配信できる。つまりロードバランサーの下で単純ラウンドロビンで動作し、アプリケーションとネットワークに影響しません。

</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/4140084159963499684/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/blog-post_17.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/4140084159963499684'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/4140084159963499684'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/blog-post_17.html' title='携帯画像：ブラウザーキャッシュ容量問題：ラウンドアバウトの解決法'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-6796140305164257743</id><published>2009-08-14T11:43:00.007+09:00</published><updated>2009-11-16T19:08:52.920+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ブラウザキャッシュ'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯画像変換'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯サイト開発の問題点とラウンドアバウト'/><title type='text'>携帯画像：ブラウザーキャッシュ容量問題：これまでの対策</title><summary type='text'>ブラウザーキャッシュ問題は昔から携帯開発者を悩ませていた最大の問題です。ブラウザーキャッシュが10Kバイトのような時代には、テキストだけでも制限を越えてしまう場合もあり、１ページあたりの情報を少なくするしかありませんでした。しかし、今日の１００Kバイト以上の端末がほとんどを占めるようになると、まずテキストでは超えない制限となったので、画像をいくつ載せるか、どのクオリティにするか、という問題に置き換わってきています。ですから、このBlogでもブラウザーキャッシュ容量問題は画像の話題としています。

容量オーバーの問題はとにかく深刻です。右のようなダイアログが画面に



でてきてアプリケーションが完全に止まり、制御不能になります。このような事態に比べたらレイアウト崩れやデザインの貧弱さは、許せる範囲だと言えます。

ブラウザーキャッシュ容量問題の対策が難しい点を挙げます。

2G端末で６K</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/6796140305164257743/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/blog-post_7872.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/6796140305164257743'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/6796140305164257743'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/blog-post_7872.html' title='携帯画像：ブラウザーキャッシュ容量問題：これまでの対策'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://2.bp.blogspot.com/_zvAGg4PBKBU/SoJl8cRk-gI/AAAAAAAAABk/EreZuDH9OdA/s72-c/ovflw.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-6974209780640317462</id><published>2009-08-11T12:38:00.022+09:00</published><updated>2009-10-21T20:03:26.914+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ブラウザキャッシュ'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯画像変換'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯画面サイズ'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯サイト開発の問題点とラウンドアバウト'/><title type='text'>携帯サイト画像：VGA問題</title><summary type='text'>画像の問題のもう１つである容量の違いに触れる前に、新しい問題としてVGA対応について触れましょう。

これまでの３～４年間はQVGA（横幅２４０px）の端末が事実上の標準機であり、仕様上の上級機でした。より古い端末でも200pxを切るような端末は５～６年前でもほとんどありません。つまり、画面サイズは上位機種から15%程度の違いでした。このため、さらに古い端末をサポート対象にせず、単純なレイアウトだけであれば、２２０px程度を基準に作ることでデザインも概ね大きく崩れることがありませんでした。

このような状況の中でソフトバンクからVGA（横幅４８０px）の端末が２年位前に発売され、この５月にはドコモの新機種の大部分はVGAサイズとなりました。VGAはQVGA比で縦横２倍、面積４倍という大きさであり、これまでと全くスケールが違います。サイズが大きくなったVGA端末では、当然キャッシュ容量も大</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/6974209780640317462/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/vga.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/6974209780640317462'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/6974209780640317462'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/vga.html' title='携帯サイト画像：VGA問題'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-8844753944060044808</id><published>2009-08-10T12:16:00.017+09:00</published><updated>2009-10-21T20:04:09.533+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='携帯画像変換'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯画面サイズ'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯サイト開発の問題点とラウンドアバウト'/><title type='text'>携帯サイト画像：画面サイズ問題</title><summary type='text'>携帯サイト制作の肝とも言える画像問題について考えます。根本の問題は２つです。

機種毎に画面サイズが異なる
機種毎に容量が異なる

ここでは画面サイズの問題にフォーカスします。歴史的経緯（？）から過去の端末において、端末のブラウザーからはみ出してしまうとエラーになり、表示されないという問題がありました。つまり、

大きすぎて表示できない

ということです。この問題に対処するのが一般的な画像変換ソリューションであり、大きすぎてエラーになってしまう事態を防止します。
しかし

一般的な画像変換ソリューションでは、大きすぎない、つまり画面に収まる画像は変換しません。この時、１つの問題が発生します。それは、サイズ変更をする画像としない画像が１ページ中に混在するので、当然レイアウトが変化してしまうことです。せっかく綺麗にレイアウトしても別の画面サイズの端末で見るとレイアウト崩れが生じてしまうのです</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/8844753944060044808/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/blog-post_10.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/8844753944060044808'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/8844753944060044808'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/blog-post_10.html' title='携帯サイト画像：画面サイズ問題'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-5007614468761410410</id><published>2009-08-07T16:02:00.019+09:00</published><updated>2009-10-20T16:15:59.581+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='言語変換'/><category scheme='http://www.blogger.com/atom/ns#' term='CSS'/><category scheme='http://www.blogger.com/atom/ns#' term='携帯サイト開発の問題点とラウンドアバウト'/><title type='text'>HTMLは何を使ったらいいのか？</title><summary type='text'>全キャリア対応の携帯サイトを作る際に最初に決めなければいけないものが、使用するHTMLです。そして、ほとんどの場合、iモードXHTMLを推奨しています。もしサイトが2Gもサポートしたいのであれば、iモードHTML（CHTML）となるか、2G/3Gで２つの言語を出し分けることになります。

細かい仕様の違いは他の情報源を見ていただくとして、実は表現力の違いはiモードXHTMLとCHTMLにはあまりありません。大きなところで背景色が使えるところくらいです。そしてchtmlは2G/3Gで基本的には見れますが、xhtmlは2Gでは見ることができません。なのでxhtmlの時代ということを考えなければCHTML（ver.7）を利用するのは１つの合理的判断だと思います。

2Gはちょっと置いておいて、iモードXHTMLが推奨されるのは消極的な理由からで、au/softbankでは利用できるCSSが使</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/5007614468761410410/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/html.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/5007614468761410410'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/5007614468761410410'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/html.html' title='HTMLは何を使ったらいいのか？'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-5766475357432998241</id><published>2009-08-07T14:47:00.007+09:00</published><updated>2009-10-13T20:21:33.438+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウト製品コンセプト'/><title type='text'>携帯サイト制作会社の意識の壁</title><summary type='text'>ラウンドアバウトを紹介して回る先にモバイルコンテンツプロバイダー（MCP）は外せません。ラウンドアバウトの良さを一番に理解してくれる企業にでしょうから。様々なお付き合いの中で、開発現場の方から開発マネージャーや経営TOPに近い人まで多くの人に見てもらってきました。ほとんどの人からポジティブなコメントを頂いていますが、それは置いておいて、常ではないけどよく聞く期になる言葉があります。

「ここまで高いデザイン性は携帯サイトに必要なんでしょうか？」
「ここまでデザインを追及できるなら、デザインにコストがかかりそうですねー」
「デザイン性を追及したいサイトにはいいですね」
といったものが１つで、少々乱暴だけど”Web価値＝デザイン＝ユーザビリティ”だと思うので、携帯サイト特有の価値観といったものが業界に存在するようです。
「社内の開発者はキャリア個別に作ることに馴れて分業しているからなぁ...</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/5766475357432998241/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/blog-post_07.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/5766475357432998241'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/5766475357432998241'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/blog-post_07.html' title='携帯サイト制作会社の意識の壁'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-858478881818173303</id><published>2009-08-07T12:47:00.005+09:00</published><updated>2009-10-13T20:21:33.439+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウト製品コンセプト'/><title type='text'>Web制作会社と携帯サイト制作会社の間の深い溝</title><summary type='text'>ラウンドアバウトが出来上がろうとしていた時期に、Web制作会社（携帯も作るがPCサイトメインの）へ製品紹介をしていた時の話です。そもそもなんでWeb制作会社へ行ったかと言えば、ラウンドアバウトは携帯の煩わしい問題を無くしてしまうので、業務の幅が広がるという話をしにいった訳です。そこで聞いた話は、この先何度も聞くことになるのですが、結構考えさせられるものがありました。要約すると...

「携帯サイト制作は実のところ、営業上できるとは言っていますが、あまりやりたくはないのです。大体、PC/携帯両方を希望するクライアントが多いのですが、その難しさとコスト及び効果を説明することで、時期尚早として２次開発などに変更して、結果的に受注しないようにしているんです」

話は続き、

「携帯サイト対するクライアントの予算は小さく、ビジネスとしても旨みがすくないし、トラブルが多くて実際としても運営コスト的</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/858478881818173303/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/web.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/858478881818173303'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/858478881818173303'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/web.html' title='Web制作会社と携帯サイト制作会社の間の深い溝'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4284139395900177040.post-754332814618696222</id><published>2009-08-07T12:26:00.003+09:00</published><updated>2009-10-13T20:21:33.439+09:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='ラウンドアバウト製品コンセプト'/><title type='text'>ラウンドアバウトのコンセプトを公開していきます</title><summary type='text'>モバイルWebプラットフォーム：ラウンドアバウトのオフィシャルではあるけど、製品サイトには載っていないような情報を、携帯サイト開発にまつわる話を絡めて公開していくBlogです。ラウンドアバウトとは以下の製品のことです。http://www.symmetric.co.jp/roundabout/このBlogを通じてラウンドアバウトのコンセプトを広く知ってもらえるとよいなぁと思っています。そして、携帯サイト開発について色々な意見を聞ければよいなぁと思っています。</summary><link rel='replies' type='application/atom+xml' href='http://roundabout-mwp.blogspot.com/feeds/754332814618696222/comments/default' title='コメントの投稿'/><link rel='replies' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/blog-post.html#comment-form' title='0 件のコメント'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/754332814618696222'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4284139395900177040/posts/default/754332814618696222'/><link rel='alternate' type='text/html' href='http://roundabout-mwp.blogspot.com/2009/08/blog-post.html' title='ラウンドアバウトのコンセプトを公開していきます'/><author><name>ラウンドアバウト＠コンセプト</name><uri>http://www.blogger.com/profile/11436034921794297553</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry></feed>
