slack

テクてく Lotus 技術者 Slack に参加しよう!

2009/12/14

XPages で iPhone フレンドリーな Web ページの作成

最近 FC2 や seesaa といったブログから送られてくるリンクをたどると iPhone 用に整形されてきちんと対応がされています。この Blogger ではまだのようですが。
ここ数カ月の間で会社の中の iPhone 人口が増えてきていることと、今度会社の Domino が 8.5.1 にアップグレードされるのを機に Google で XPages を iPhone で見ることがどれだけ簡単にできるかどうかの下調べをしてみました。おそらく、こういったニーズは遅かれ早かれ出てくるに違いありません。
調べる前からある程度は想像できていたのですが、Safari 用の整形される css と iPhone からアクセスされた時にそれが iPhone からであることが分かれば XPages に限らずそれは簡単な話です。あとは XPages でいかに簡単にできるかがポイントになってくるでしょう。

今回参考にしたのは Mark Hughes さんの iPhone XPage App Template です。
このページにはこれから iPhone 対応の Xpages アプリケーションを作成したい方に役立つようテンプレートを公開しています。
ダウンロードファイル提供と同時に Part 1 から Part 3 まで iPhone ならではの考慮点が書かれています。

Part 1 では通常のデスクトップブラウザとは異なり iPhone では指でページを拡大縮小したりできますのでそういう動作を禁止させるコーディングです。
Part 2 ではやはり操作は指になるので "Finger Friendly" な文字サイズについて考慮したりコントロールの配置をすること。
Part 3 は iPhone のページを出すときの XPage には必要となるフォームやビューを全部ひとつのページにパネル単位で配置し、そのパネルを表示したり非表示しながらユーザーが見たいページを出すという内容のコードが紹介されています。Part 3 までの内容になると実際コーディングしながら結果を見てやっていかないとわからないので会社の Domino サーバーがアップグレードされて私の iPhone を使ってテストできる環境が整い次第試してみたいと思います。

ダウンロードしたテンプレートには、Part 1 から Part 3 までに紹介されているスクリーンショットのようなものはなく、あくまでスクラッチでこれから開発していこうとする方に再利用できる css や js とXpage がサンプルとして提供されています。これを使うだけでもかなり助かると思います。

アプリの作成方法はこれで勉強するとして、端末が iPhone かどうかを判断するのはどうすればといいかというと Declan Lynch さんの XPages for iPhone のスレッドが役に立ちます。面白いのは前出の Mark Hughes さんの解説ページのコメントで、これも大事だぞとコメントしています。

下の JavaScript でブラウザのタイプをチェックし、iPhone.xsp へリダイレクトする例です。
var uAgent = context.getUserAgent().getUserAgent();

if (uAgent.match("iPhone") != null){
       context.redirectToPage("/iPhone.xsp");
}
下の例は、iPhone アプリケーション用に必要な CSS を取り込むコードです。
<resource rendered="#{javascript:context.getUserAgent().getUserAgent().match("iPhone")}">
<content-type>text/css</content-type>
<href>iPhone.css</href>
</resource>

この 2 つの情報で何とか実際のアプリケーションを XPages 化して iPhone の Web アプリとして見れるような作りこみにチャレンジしてみたいと思います。

0 件のコメント:

コメントを投稿