nkjmkzk.net

powered by Kazuki Nakajima

Archive for 10月, 2011

jQuery Mobileことはじめ – Force.comで試してみるjQuery Mobile

先日、9月29日にjQuery Mobile 1.0 RC1がリリースされました。

jQueryといえば今やFlashを凌ぐインストール数を誇ると言われているJavaScriptのライブラリ。そのjQueryをベースとしてjQueryモバイル端末向けに最適化されたライブラリがjQuery Mobileです。

Key FeaturesのページにjQuery Mobileの特徴がリストアップされていますが、一言で言えばjQuery Mobileのハートは「メジャーなモバイル端末をほぼ全てサポートし、異なる端末間の挙動の差異を吸収してくれる」というところでしょう。

Objective Cで書いたネイティブiPhoneアプリは当然ながらAndroid端末ではそのまま動かすことはできませんが、jQuery Mobileで書いたWebアプリケーションであればどのようなモバイル端末からも即座に利用でき、さらに通常のWebページではなくモバイル端末での操作に最適化されたネイティブアプリに近いインターフェースを提供してくれます。

  • Objective Cとかを知らなくてもネイティブっぽいモバイルアプリが書ける
  • 端末ごとのクセはjQueryにお任せ

素晴らしいじゃないですか。早速動かしてみましょう。

JavaScriptは純粋なWebサーバさえあれば走らせることができるのが良いところ。なのでWebサーバがある人はそこでindex.htmlでも作成してコーディングをスタートできます。

とはいえ手頃なWebサーバが手元にない、という人はこの機会にForce.comを利用してみましょう。

Force.comは一言でいえばアプリケーション開発、稼働、配信プラットフォームです。企業向けのアプリケーションに用いられることが多いですが、技術的には何にでも使えます。そして今回のようにjQueryベースのWebアプリケーションをホストさせることも簡単にできます。Developer Editionという無償で利用できるエディションがあるのでまずはこちらのページからサインアップしてアカウントを作成します。

 

UsernameはEmail形式である必要がありますが、有効なEmailである必要はありません。若干意味がわかりませんが、そこはかとなく「nkjm.kzk@jquerymobile.dev」とかそんな感じでOKです。(Email Addressは本当のEmailを入れてください)

サインナップするとすぐにWelcomeメールが届くのでそのメールにあるリンクから新しいパスワードを設定しつつログインします。

画面右上に自身の名前が表示されたプルダウンメニューがありますのでそこから「設定」を選択します。

 

左のサイドメニューから「開発」=>「ページ」をクリックし、「Visualforceページ」中の「新規」をクリックします。

 

表示ラベルと名前には「jquerymobile」等適当な名前を入力し、Visualforce Markupにこちらのコードをペタッと張り付けます。

 

このフォームに書いた内容がまさにHTMLで出力されることになります。HTML, CSS, JavaScriptといった一般的なマークアップでそのままコーディングできるのに加え、Apexというforce.com専用のマークアップを利用することができます。サンプルコードでは<apex:page>タグおよび<apex:ouputText>タグがありますが、それ以外は通常のHTMLであり、その中にごくシンプルなjQuery Mobileの要素を入れこんであります。すべて埋めたら「保存」をクリックしてページを保存します。

次に左のサイドメニューから「開発」=>「サイト」をクリックします。このページでWebサーバの設定を行うわけです。といってもごくシンプルな設定のみです。はじめにドメイン名を指定します。適当に取得可能なものを設定してください。

 

ドメイン名が登録できたら「新規」をクリックしてこのドメイン名にアクセスすると表示されるサイトを作成します。

 

ここでは適当なサイトの名前を設定し、「有効」にチェックをいれてこのサイトをアクセス可能な状態にし、「有効なサイトのホームページ」に先ほど作成したページを指定します。

 

これで完了です。

指定したURLにアクセスしてみましょう。こちらの環境ではhttp://nkjm-jquerymobile-developer-edition.na12.force.comですね。

こんなサイトが表示されればOKです。

 

PCのブラウザで確認できたらiPhone, iPad, Androidなどのモバイル端末で是非挙動を見てみてください。Webアプリなのにネイティブに近いインターフェースであることが実感できると思います。

iOSでは端末のオリエンテーション(縦横)を変えたときにうまく表示幅があわなくなるマイナーな不具合があるようですが、次期バージョンでFixされるとのことなので心配なさそうです。

そんなこんなで気になるjQuery Mobileですが、近々で正式版が出るようですので引き続き要チェックですね。

また、こんな感じでForce.comをWebアプリの開発環境として利用することもできます。今回はブラウザ上でコードを入力しましたが、Force.com IDEという統合開発環境も提供されており、Force.comのクラウドとローカル環境を同期しながらより効率的に開発作業を行うことも可能です。そちらも是非。

without comments

Written by 中嶋 一樹

10月 9th, 2011 at 7:28 pm

Posted in Uncategorized

Tagged with , ,