【Javascript】スマートフォンでAjax

スマートフォンでAjax

---

1: スマートフォン向けのページを作るには
2: X01HT用ページへの分岐 js
3: X01HT用ページへの分岐 php/perl
4: Ajaxでさらなる軽量化1
5: Ajaxでさらなる軽量化2

X01HTでAllaboutを表示

最近、携帯電話にキーボードの付いたものを見かけるようになってきました。PDAに携帯電話機能が付いたものといっても良いかもしれません。

今回から、少し気になるこの新しいデバイスに向けたAjaxを観察してみたいと思います。

面白いのは、これまで、「PDA(あるいは、モバイルノート)」と「携帯電話」として別々に存在していた異なる商品の垣根が失われ、 融合して新しいジャンルが生まれつつあるようにも見える現況です。

ユビキタスを目指しつつある世の中の流れを受けた技術の進化とともに、PDAではなく、i-modeなどでもない、本格的な 「どこでもフルインターネットアクセス」を装備した、Ajaxまでも使える携帯電話が現れてきたというわけです。

昨年あたりから、ウィルコムのW-ZERO3が人気を集め、 今年は、DoCoMoで法人向けにリリースされていたHTC社のスマートフォンhTcとほぼ同タイプの機種が、 ソフトバンクから一般向けにX01HTとして登場し、 携帯の新しい流れを作り始めているようにみえます。

HTC社製のロゴとレンズ

もちろん、海外を見れば、アメリカで人気のあるブラックベリーといった機種やPalm系のOSによるものもあり、 今後、このタイプの端末がどのように進化していくのかはわかりません。

とはいえ、ここでは日本の現況に即して、日本で今普及しつつあるキーボード収納タイプのWindows版スマートフォンを見ていきたいと思います。 今回は、 とりあえず、ソフトバンクのX01HTをターゲットとして見ていきます。

X01HTは、以前Windows CEと呼ばれていたOSが進化したWindows Mobile 5.0を積んでおり、 なんとExcelやWord、OutlookなどのOffice製品が付いてくるうえに、 IEもMSIE 4.01でJavaScriptのみではなく、XMLHttpが使えるバージョンになっています。つまり、Ajaxが使えるわけです。

また、このWindows Mobile 5.0ベースのスマートフォンは、携帯であると同時に、Windowsですので、たとえば、FTPやSSHやエディタに限らず、 スカイプなどといったソフトまでダウンロードして使えたり、あるいは、自作したりと、 まるで、普通のパソコンのようなさまざまな可能性が、そこに開かれていることも魅力です(もちろん、セキュリティへの注意も普通のWindowsのように必要です)。

次に、スマートフォン向けのページを作る際の注意事項を押さえておきましょう。

スマートフォン向けのページを作るには

スマートフォンと一般のPCとでは少なくとも下記の3点が大きく異なります。

• 画面サイズ
• CPUやメモリなどの性能
• パケットの料金体系

これらの違いからまず見ていきます。

スマートフォン用のページを作るには、最低限押さえておくべき注意事項があります。まず、はじめに重要な点は、画面サイズです。 スマートフォンで見るブラウザ画面はPCとは違い、言うまでも無くサイズがかなり小さくなります。

もちろん、普通の携帯電話の画面よりは大きいのですが、それでも、たとえば、X01HTの場合なら、240ピクセル×320ピクセルというサイズです。 今では一般のPCなら1280×1024などのサイズでも小さいくらいですが、それらと比較すると このスマートフォンの画面サイズがどれほど小さいかはわかるでしょう。

HTC用ブログを表示

このサイズの違いのせいで、多くのPC用のページは、CSSによるレイアウト変更程度で対処できる違いを超えている可能性があります。 つまり、普通のページのコンテンツそのものの量がスマートフォンで1ページとして見るには多すぎるのです。（もちろん、WinCE系の標準ブラウザはIEですし、Operaなども使えて、当然閲覧自体はできます。）

次に、スマートフォンとPCの大きな違いは、CPUやメモリなどの性能の違いです。最近のスマートフォンは、 10年ほど前のPCよりも案外性能は良いかもしれませんが、やはり、最近のPCと比べれば雲泥の差があります。 PCでさくさく閲覧できるからといってスマートフォンでも快適に見れるとは限りません。そこは、多少の気配りが必要と心得るべきです。

そして、もうひとつ、大きな違いに、現在の携帯会社の料金体系の問題があります。デュアル定額やダブル定額、PCサイトダイレクトといった定額制は、正確には、 従量制と定額制の混ざった形態であって、ここ数年の間に、PCで普及したような完全な定額ではありません。ようするに、定額上限に達するまでは、パケット量を節約するにこしたことはないのです。

X01HTの場合は、無線LANによる接続ができますので、自宅や会社、あるいは、加入している無線LANスポットでは、ソフトバンクを経由せずにインターネットへ接続もできますが、 それ以外の場所でも、どこででもアクセスできることこそがスマートフォンの魅力ですから、ソフトバンクのアクセスポイントを利用する機会もあるわけです。

X01HTのキーボード

大雑把に見ても、以上のようなスマートフォンならではの大きな特徴のすべてが、スマートフォン向けのスマートなページを作るには、現況では、専用の軽量ページを作成する必要性を指し示しているようにみえます。

となると、その専用のページへ分岐する方法が必要ですね。

X01HT用ページへの分岐 js

専用のページへの分岐方法は、いろいろ考えられますが、もし、JavaScript側で分岐するなら、たとえば、つぎのような方法になります。

【JavaScriptの場合(1)】

<script type="text/javascript">
var ua=navigator.userAgent;
if(ua.indexOf('HTC')!=-1){ location.href="http://.../分岐先.htm"; }
</script>

navigator.userAgentに文字列「HTC」が存在すれば、location.hrefへURL、"http://.../分岐先.htm"を代入することで「分岐先.htm」へジャンプします。

これをHTMLのhead内に書くことで、ソフトバンクのX01HTやDoCoMoのhTcなどHTC社製のブラウザは「分岐先.htm」へ自動ジャンプします。 参考までに、X01HTのnavigatorオブジェクトの各プロパティは次のようになっています。

【X01HTのnavigatorオブジェクト各プロパティ】

navigator.appCodeName:Mozilla
navigator.appName:Microsoft Pocket Internet Explorer
navigator.appVersion:
      4.0 (compatible; MSIE 4.01; Windows CE; HTC/X01HT; PPC; 240x320)
navigator.userAgent:
      Mozilla/4.0 (compatible; MSIE 4.01; Windows CE; HTC/X01HT; PPC; 240x320) 
navigator.platform:WinCE

上記の分岐スクリプトは、このavigator.userAgentプロパティ内の文字列「HTC」の有無を調べて分岐したわけです。したがって、「X01HT」だけを分岐したければ、たとえば、

【JavaScriptの場合(2)】

<script type="text/javascript">
var ua=navigator.userAgent;
if(ua.indexOf('X01HT')!=-1){ location.href="http://.../分岐先.htm"; }
</script>

で、「X01HT」だけを特定し、分岐できることになります。また、逆に、「Windows CE」ベースのモバイルブラウザをすべてまとめて分岐してしまいたいなら、

【JavaScriptの場合(3)】

<script type="text/javascript">
var ua=navigator.userAgent;
if(ua.indexOf('Windows CE')!=-1){ location.href="http://.../分岐先.htm"; }
</script>

となるわけです。

次ページでは、JavaScript側ではなく、サーバー側で分岐する方法もみてみます。