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

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

携帯サイト制作のヒント:回り込みはできますか?

ページレイアウトを工夫する際画像のテキスト回り込みは携帯サイトでもよく見られます。ドコモ・ソフトバンクはCSSのfloatプロパティ、auはalign属性とキャリアによって方法が異なり、一般的にはベタベタに両方を書いたりキャリアによって記述を分けたりします。

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

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

携帯サイト制作のヒント:外部CSSは使えますか?

一般的に、3キャリア向け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ファイル一箇所に集められることのメリットは大きいです。

フリースタイルな携帯言語変換:フォーム入力モード

フォームの入力モードを内容に応じて自動で切り替える入力補助機能は、テンキーで操作する携帯サイトにとって使い勝手を大きく向上させるので、是非取り入れたいものです。生年月日や電話番号のように数字入力を要求しているのであれば、初めから数字入力モードになっていて欲しいものです。

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

フリースタイルな携帯言語変換:絵文字

携帯絵文字はキャリアごとに種類や数も異なり書き方や互換性もバラバラなので、何らかの絵文字変換ソリューションの導入がコストを抑える手段と考えるのが一般的です。

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

携帯コンテンツ変換の選定基準:お試し変換ソース

携帯コンテンツ変換の導入を考えているなら、実際にどんなソースが動作するのか、試すことが必要です。開発や運用の負担がどれくらい減るのか、どの程度の表現力があるかは試さないと分かりません。

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

フリースタイルな携帯言語変換:DOCTYPE宣言

XHTMLでページを作る際XML宣言の他DOCTYPE宣言の記述が必要ですが、何も見ずに空で宣言をタイプする人は少ないと思います。そこでDOCTYPE宣言の内容を書籍やインターネットから調べるのですが、「携帯 XHTML DOCTYPE」で検索すると、各キャリア向けのDOCTYPE宣言を解説するページがヒットします。キャリアごとに推奨するものが異なり、iモードの場合さらにiモードXHTMLバージョンに応じて記述が変わるので、「まとめ」と称しながら、種類が多くなっています。これを読んだサイト開発者としては結局どれを書けばよいのか悩んでしまうでしょう。またどれか一つDOCTYPE宣言を決めたら、記述するXHTMLもそれに従うべきなのか?と、さらに開発者を迷わせることになります。

フリースタイルな携帯言語変換:マーキー

携帯コンテンツを作る際、マークアップ言語は何を使ったらよいのか?ラウンドアバウトでは次のように考えています。
  1. XHTMLなら何でもOK
  2. CSS利用可能
各キャリア向けXHTMLは互いに細かいところで違いが多くあるが、体系としてはほとんど一緒なので、ラウンドアバウトは何でも受け入れられます。

古い端末を非対応にしたい→RA非対応端末リダイレクト機能

一応、もしかしたら使っているかもしれない古~い端末があります。どんものがあるのでしょうか?

・ドコモ
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対応 

携帯サイト開発の高コスト構造

携帯コンテンツ変換ソリューションの導入の大きな目的はコスト削減です。どのコストがどの位削減されるかは、前提システムやコンテンツによって大きな差がでますが、開発・運用全体のコスト構造を考える必要があります。一般に開発費以上に保守費が大きな問題とされます。ラウンドアバウトのコスト削減に対するアプローチ、それは...

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

携帯コンテンツ変換の選定基準:環境構築と問題の切り離し

携帯コンテンツ変換を検討するに当たり、機能や性能の他に考慮すべき事項に環境構築と問題発生時の対応があります。

■環境構築について

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

携帯コンテンツ変換の選定基準:変換エラーと変換アーキテクチャー

コンテンツ変換システムにおいて、変換仕様はもちろん重要ですが、

正しい記述で変換仕様にのっとった例)
<FONT color="black" >Hello</FONT> 
→ <span >Hello</span>

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

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

  1. <FOMT color="black" >Hello</ont>   (存在しないタグ)
  2. <FONT >Hello           (閉じてない)
  3. <FONT colorblack=" >Hello</FONT>     (属性記述に間違い)
  4. <FONT color="black" ><div>A</div>Hello</FONT> (インラインタグ内にブロックタグ)
このような例は、意図せぬミスや勘違いやバグなどから発生しますが、どのように処理されるべきでしょうか?やはり一番良いのは、そこはスキップして次の正しい場所から変換されることでしょう。そして、いついかなる時もブラウザーまでアプリケーションが出力したレスポンスを出すことが重要です。

携帯コンテンツ変換の選定基準:スループット

パフォーマンス(1アクセスの平均レスポンスタイム)と並んでユーザにとって重要な指標がスループット(1秒間あたりの処理数)です。「同時接続数はどれくらいですか?」などとよく聞かれます。スループットはサーバ台数に直接に影響を与える数字です。当然、サーバ台数が少なくて済むように、より高い性能であることが望ましいです。

1/スループット=パフォーマンス

なのですが、両者には別の相関関係があって、アクセスがスカスカの状態ではパフォーマンスは非常に良く、アクセスが増えてくれば徐々にパフォーマンスは劣化し、アクセスが増えすぎると両方落ち込みます。コンテンツ変換製品でもスカスカの状態では、パフォーマンスの違いは、あまり出ないかもしれません。問題はアクセスが増えてきてからで、どこまでスループットを上げることができるかが重要です。スループットが最大のときのパフォーマンス比較ができれば、信頼できる製品性能比較になるでしょう。全エントリーのパフォーマンスUPの方法はスループット向上にも役立つので今回は設計の話ではなく、実際の2つの計測データを提示してスループットについて説明していきます。

携帯コンテンツ変換の選定基準:パフォーマンス

携帯コンテンツ変換エンジンは、システムのフロントに位置し、常にレスポンスが通過するので、そのパフォーマンスは非常に重要です。パフォーマンス・データはコンテンツや環境や計測方法に非常に大きく依存し、客観的な方法は存在しないので分かり難いものです。良いデータを出しすぎてユーザからクレームをもらうのも好ましくなく、悪いデータを出すこともできず...とベンダー側も悩みます。

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

携帯コンテンツ変換の選定基準:ネットワーク設計とセッション

携帯コンテンツ変換を選定する際、重要なポイントの1つは製品自体がセッションを使う処理をするかどうかです。携帯コンテンツ変換製品がセッションを使う機能がある場合、ネットワーク設計に大きな制約が生じます。セッションを使用する代表的な機能が、「ページ分割」と「クッキーエミュレーション」です。

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

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

携帯コンテンツ変換の選定基準:ネットワーク設計

コンテンツ以上にネットワーク構成はシンプルでなくてはなりません。複雑なネットワークはトラブルを招き易く、コストも高く、変更リスクも高くなります。ネットワーク設計・設定といっても、ルータやロードバランサ、DNS、HTTPサーバなど様々なレベルのものがあり、1つの課題を解決する方法も多種多様です。ネットワーク技術に長けたエンジニアは少なく、基本的に高コストです。そのため、ネットワークをシンプルにすることはシステム設計上の最重要項目の1つです。

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

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

携帯コンテンツ変換の選定基準:サーバー台数

ラウンドアバウトと他社製品の一番の違いは、サーバー台数です。もっとも違いが分かりやすいのは、変換サーバーをハードウェアとして提供している製品です。

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

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

携帯コンテンツ変換の選定基準

携帯コンテンツ変換を導入を検討するに当たり、どのような点を選定基準とするか、まとめていきたいと思います。ラウンドアバウトコンセプトというBlogの中では中立性を保つことはできませんが、ここで触れる内容こそラウンドアバウトのコンセプトそのものであり、その違いを示すことができればよいと思います。

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

コンセプトは製品の外殻であり、この殻が内側に位置する色々な機能の性質・性能に決定的な影響を及ぼします。ユーザーからすれば最小限の機能さえ満たせれば、コンセプトから生じる製品の基本特性が一番重要です。それは製品を選定する上で最初に必要な情報でもあるので、ここで選定基準としてまとめていきたいと思います。

フットプリントの導入意義

フットプリントについては詳しい機能の説明や使えるツールなどはHPを参照してください。
  • 携帯サイトのユーザー認識できる生ログが記録できる
これがフットプリントの今までに無い価値なのですが、ではフットプリントが無ければどうなるのか、検証してみたいと思います。

新しい携帯サイトのアクセス解析の方法:フットプリント

もうすぐラウンドアバウト製品ファミリーである、ラウンドアバウト・フットプリントがv1.0.1となってリリースされます。フットプリントプリントはその名の通り、アクセスログに足跡をつけるツールです。ですから、これ単独ではアクセス解析はできません。しかし、このツールは携帯アクセス解析に大きな進歩をもたらすことができる製品です。

■背景
以前はあまり携帯ではアクセス解析は必要ありませんでした。なぜなら公式サイトが中心であり、アクセス数が多ければ公式メニューの上位に表示され、これがさらに入会を増やす(売上UP)というサイクルだったからです。ところが携帯でもECやコミュニティなどの勝手サイトが台頭する流れの中で、キャリアがTOPメニューに検索を設けるようになりました。検索エンジンも携帯サイト用のクローラーで情報を集めるようになり、ここに至って携帯サイトでもSEOやSEMが必要とされるようになりました。公式サイトでは試してもらって入会するまでが勝負ですが、勝手サイトではPC同様に常にユーザの行動分析をしないとアクセス(利益)が増えません。このような状況下で、携帯サイトでもアクセス解析の重要性がどんどん大きくなっています。

■フットプリントはなぜ開発されたか?
アクセス解析はWebの草創期から様々なツールが有料・無料であり、それぞれ発展を遂げているのですが、非常に有名なツールであっても携帯には使えませんでした。それは先のエントリーでも詳しく書いていますが、一言で言えば「使える正確な生ログが無いため」です。携帯アクセス解析は、生ログが無い中でどうするか?という問題とも言い換えられます。