jQueryって何？
jQueryは、John Resig(ジョンレシッグ)氏によって開発/公開されたJavaScriptのライブラリです。2006年8月に最初のバージョンがリリースされました。バージョンは現在二つに分かれており、IE8以前をサポートする、Ver1.x.x系と、IE9以降をサポートするVer2.x.x系があります。IE9以降ということが明確に決まっている場合は、Ver2系でも良いでしょう。ライセンスはMIT Licenseとなっており、ライセンス著作権表示を消さなければ、商用、非商用を問わず、誰でも自由に利用することが出来ます。
XPagesって標準でdojoが入ってるんだから要らないんじゃないの？
はっきり言いましょう！
2014年現在、jQueryはWeb開発の標準技術と言っても良いと思います。ちょっと検索するとわかりますが、jQueryとdojoの情報量の差は圧倒的です。日本語情報も圧倒的にjQueryが多いですし、日本語の書籍も多数出ています。
「標準搭載されているdojoで作りたい！」ということもわかりますが、どんな技術で作るか？はユーザーにとってはどうでも良いのです。技術の使い方を調べるためにネットをさまようよりも、どんなことをしたいのか？をユーザーと一緒に考える時間、いろいろなパターンを試行錯誤し、創造する時間を多くした方が良いのではないでしょうか？
前準備
このサイトではHTML5を対象にXPagesアプリケーションを開発していきます。
なので、アプリケーション(データベース)の「アプリケーションのプロパティ－HTML doctype」は”HTML5″を指定しておきます。
HTML doctypeを”HTML5″に指定すると、XPageから出力されるHTMLは下のようにスッキリした形になります。
jQueryをXPagesに読み込む(CDNから直接リンク)
一番お手軽にjQueryを組み込む方法としては、CDN(Contents Delivery Network)に直接リンクを張る方法があります。この方法は、インターネット上のあるjQueryを直接読み込む方法ですので、インターネット接続が必須です。CDNを使う場合、ネット接続が必須というデメリットがありますが、一度キャッシュされてしまえば複数のアプリケーションで何度もダウロードしなくて良いというメリットがあります。
１．新規XPageを作成します。
２．XPageのプロパティからリソースを選択し、追加ボタンからJavaScriptライブラリを選択します。
３．jQueryのダウンロードページのURLを参考に、URLからJavaScriptライブラリへのリンクに”http://code.jquery.com/jquery-1.11.0.min.js”を指定します。CDNのサーバーはGoogleやMicrosoftなど他にもありますので、自分に必要性に応じて選択して下さい。種類は”クライアント”を選択し、OKボタンをクリックします。
| 種類は”クライアント”を選択するとWebブラウザ上で動作するClient Side JavaScript、”サーバー”を指定するとDominoサーバーで動作するServer Side JavaScriptを指定することになります。 |
jQueryをXPagesに読み込む(ダウンロードし、アプリケーションに組み込む)
ネット環境がない場合や、ネットワーク構成や環境依存の問題を避けたい場合には、jQueryをアプリケーションに組み込むことをオススメします。
１．jQueryのサイトにあるDownload jQueryボタンをクリックします。
２．Download the compressed,production jQuery 1.11.1を右クリックし、対象をファイルに保存を使って適当なフォルダ(デスクトップなど)にダウンロードします。ダウンロードされるファイルは”jquery-1.11.1.min.js”です。
| compressedとuncompressedの内容は同じです。compressed(圧縮版)は不要な改行やコメントなど取り除かれており、サイズが小さいので早くダウンロードすることが出来ます。uncompressed(無圧縮版)でソースを確認しやすい形になっています。通常はcompressed
で良いと思います。 |
3．データベースナビゲータから「リソース－ファイル」を選択し、ファイルのリソースのインポートボタンを押します。そこで先ほどダウンロードした”jquery-1.11.1.min.js”を選択し、ファイルリソースへの追加を行います。
４．XPageのプロパティからリソースを選択し、追加ボタンからJavaScriptライブラリを選択します。
５．URLからJavaScriptライブラリへのリンクに”http://jquery-1.11.0.min.js”を指定し、種類は”クライアント”を選択します。本当はここで”/jquery-1.11.0.min.js”と指定したいのですが、”http://”が付いていないと、OKボタンがグレーアウトして押せないため、ここでは”http://”を付けた形でOKボタンをクリックします。
６．XPageのソースタブを開き、<xp:this.resources>タグの中のsrc指定を”src=”/jquery-1.11.1.min.js”に変更し、XPageを保存します。
動作確認
１．XPageのソースタブを開き、</xp:view>タブの手前に下記のコード(青色部分)を書き込み、XPageを保存します。
このソースではページが読み込まれた後、jQueryを使ってバックグラウンドカラーを変更しています。jQueryの使い方については追々記述していきます。
完成
動作確認用のコードが保存できたら、ブラウザを使ってプレビューを行って下さい。青いバックでブラウザウィンドウが表示されれば完成です。
