B1WS-1049-03Z0(00)
2015年10月
Windows/Solaris/Linux
FUJITSU Software
Interstage Application Server/
Interstage Web Server Express
まえがき
本書の目的
本書は、以下のJavaScriptライブラリについて説明しています。・
jQuery Mobile・
jQuery UI本書の読者
本書は、本機能を利用して、アプリケーションの作成、運用を行う方を対象にしています。登録商標について
Microsoft、Active Directory、ActiveX、Excel、Internet Explorer、MS-DOS、MSDN、 Visual Basic、Visual C++、Visual Studio、Windows、Windows NT、Windows Server、Win32 は、米国およびその他の国における 米国Microsoft Corporation
の商標または登録商標です。
Linux は、Linus Torvalds 氏の日本およびその他の国における登録商標または商標です。
OracleとJavaは、Oracle Corporation およびその子会社、関連会社の米国およびその他の国における登録商標です。文 中の社名、商品名等は各社の商標または登録商標である場合があります。 その他の記載されている商標および登録商標については、一般に各社の商標または登録商標です。
輸出許可
本ドキュメントを輸出または第三者へ提供する場合は、お客様が居住する国および米国輸出管理関連法規等の規制を ご確認のうえ、必要な手続きをおとりください。著作権
Copyright 2012-2015 FUJITSU LIMITED
2015年 10月 第3版 2013年 6月 第2版 2012年 8月 初版
目 次
第1章 jQuery Mobile... 1 1.1 リリース情報... 1 1.1.1 追加機能の概要...1 1.1.2 互換に関する情報... 1 1.2 機能概要... 1 1.3 アプリケーション開発方法...2 1.3.1 提供ファイル... 2 1.3.2 アプリケーションの組み込み方法... 2 1.3.3 jQuery MobileによるHTMLページの作成方法... 3 1.4 APIリファレンス... 3 1.5 運用方法... 3 1.6 移行方法... 3 1.7 サポート一覧...3 1.8 注意事項... 4 1.9 制限事項... 5 1.10 メッセージ... 5 1.11 FAQ... 5 1.12 サンプル... 5 1.13 jQueryのライセンス文... 5 第2章 jQuery UI... 7 2.1 機能概要... 7 2.2 アプリケーション開発方法...7 2.2.1 提供ファイル... 7 2.2.2 アプリケーションの組み込み方法... 8 2.2.3 jQuery UIによるHTMLページの作成方法... 9 2.3 APIリファレンス... 10 2.4 運用方法... 10 2.5 サポート一覧...10 2.6 注意事項... 10 2.7 制限事項... 11 2.8 メッセージ... 11 2.9 FAQ... 11 2.10 jQueryのライセンス文... 11第
1
章
jQuery Mobile
本章では、jQuery Mobileの使い方について説明します。1.1
リリース情報
1.1.1
追加機能の概要
以前のバージョン・レベルより追加、改良された機能を説明します。 カテゴリ 概要 エンハンス 分類 ページ 現在のページに浮かぶように表示されるPopup ウィジェットを追加。 ◎ リストビュー・
リストビューを折り畳み可能にする。アコー ディオン形式も可能。・
リストビューに自動で区切りを入れる機能 を追加。 ◎ コンテント collapsibles, collapsible setsのアイコン、幅をカスタマイズ可 能。 ◎ スライダー sliderstart、sliderstopイベントの追加。 ◎ その他 jQuery 1.8.3のサポート ○ エンハンス分類： ◎：機能追加 ○機能改良1.1.2
互換に関する情報
以前のバージョン・レベルと非互換となる機能を以下に示します。 非互換となる機能 見栄え 読み取り専用であることがわかりやすいような表示に改良。 アイコンのみのボタンが小さすぎて押しづらいのを改良。 ツールバー内のボタンのデフォルトをminiに変更。 フィールドコンテナ内の要素の幅を改良。1.2
機能概要
スマート端末開発向けのjQuery Mobile(JavaScriptフレームワーク)をサポートしています。jQuery Mobileを使用すること で、スマート端末に対応するアプリケーションの開発を、 短期間に容易に行うことが可能となります。
特長
・
HTMLの知識だけで開発可能 基本的に、HTMLを記述するだけで開発できます。さらに、JavaScriptやCSSを利用することで、高度なカスタマイズ が可能になります。・
スマート端末向けの豊富な部品 標準で、スマート端末向けのツールバー、ボタン、リストなどの部品が用意されています。 これらをHTMLで組み合わ せるだけでアプリケーションを開発できます。・
クロスプラットフォーム対応幅広いスマート端末/ブラウザに対応しているので、クロスプラットフォーム対応のサイトが 簡単に作成できます。 スマート端末とは、スマートフォンと同等の操作性を持つデバイスの総称です。
本製品には、jQuery Mobile 1.2.0、jQuery 1.8.3が含まれています。
1.3
アプリケーション開発方法
1.3.1
提供ファイル
以下のスクリプトファイル、スタイルシートを提供します。拡張子の前に「.min」が付いているファイルは、空白、改行やコメ ントを削除してファイルサイズを縮小した圧縮版で、運用時は圧縮版のファイルを使用することを推奨します。拡張子の 前に「.min」が付いていないファイルは、空白、改行やコメントにより可読性を向上させたファイルで、開発・デバッグ時に 利用します。 提供ファイル 説明jquery.mobile-1.2.0.js jQuery Mobileスクリプト jquery.mobile-1.2.0.min.js jQuery Mobileスクリプト圧縮版 jquery.mobile-1.2.0.css jQuery Mobile用スタイルシート jquery.mobile-1.2.0.min.css jQuery Mobile用スタイルシート圧縮版 jquery-1.8.3.js jQueryスクリプト jquery-1.8.3.min.js jQueryスクリプト圧縮版 images/ajax-loader.gif スタイルシートで使用するイメージ images/icons-18-black.png スタイルシートで使用するイメージ images/icons-18-white.png スタイルシートで使用するイメージ images/icons-36-black.png スタイルシートで使用するイメージ images/icons-36-white.png スタイルシートで使用するイメージ
1.3.2
アプリケーションの組み込み方法
jQuery Mobileは、アプリケーション（war/ear）に組み込んで使用します。1.
本製品媒体の<ドライブ名>:\smartp\jquerymobile\runtimeディレクトリを、アプリケーションの直下（WEB-INFディ レクトリと同じ並び）にコピーします。2.
HTMLの<head>～</head>に以下の記述を追加します。<link rel="stylesheet" href="runtime/jquery.mobile-1.2.0.min.css"/> <script src="runtime/jquery-1.8.3.min.js"> </script>
<script src="runtime/jquery.mobile-1.2.0.min.js"> </script>
3.
作成したHTML、JSP、クラスファイルなどをパッケージ化します。 アプリケーションのディレクトリ構成の例を以下に示します。 index.jsp /runtime/jquery.mobile-1.2.0.min.css /runtime/jquery-1.8.3.min.js /runtime/jquery.mobile-1.2.0.min.js /runtime/images/ajax-loader.gif /runtime/images/icons-18-black.png /runtime/images/icons-18-white.png /runtime/images/icons-36-black.png/runtime/images/icons-36-white.png /WEB-INF/web.xmlなど
1.3.3 jQuery Mobile
による
HTML
ページの作成方法
jQuery Mobileを利用したHTMLページの作成方法については、jQuery Mobile 公式サイト（http://jquerymobile.com/）の
Docs(http://jquerymobile.com/demos/1.2.0/)を参照してください。
1.4 API
リファレンス
jQuery Mobile公式サイト（http://jquerymobile.com/）のDocs(http://jquerymobile.com/demos/1.2.0/)を参照してください。
1.5
運用方法
運用方法については、以下のマニュアルを参照してください。・
「Java EE運用ガイド」・
「Java EE運用ガイド(Java EE 6編)」・
「J2EE ユーザーズガイド(旧版互換)」1.6
移行方法
ここでは、前バージョンでアプリケーションに組み込んだjQuery Mobileを、本バージョンで提供する最新のjQuery Mobile へ移行する方法を説明します。現在お使いのアプリケーションを変更するため、移行失敗に備えて、あらかじめアプリケー ション資源を退避しておくことをお薦めします。
1.
runtimeの入替え1.
アプリケーションの直下（WEB-INFディレクトリと同じ並び）に組み込んだruntimeディレクトリを削除します。2.
本製品媒体の<ドライブ名>:\smartp\jquerymobile\runtimeディレクトリを、アプリケーションの直下にコピー します。2.
アプリケーションの修正 HTMLの<head>～</head>の記述を以下のように修正します。<link rel="stylesheet" href="runtime/jquery.mobile-1.2.0.min.css"/> <script src="runtime/jquery-1.8.3.min.js"> </script>
<script src="runtime/jquery.mobile-1.2.0.min.js"> </script>
アプリケーションの修正が完了したあと、パッケージ化して、配備し直してください。
1.7
サポート一覧
動作環境
以下の環境での動作をサポートします。 サーバ 製品名バージョン/機能 製品名バージョン 機能Java EE 5 Java EE 6 J2EE
クライアント クライアント要件 HTML5対応のWebブラウザで動作することができます。 対応するスマート端末は以下のとおりです。 OS バージョン Webブラウザ Android 2.3.4 標準ブラウザ Android 2.3.5 標準ブラウザ Android 3.2 標準ブラウザ Android 4.0.3 標準ブラウザ Android 4.0.4 標準ブラウザ Windows Phone 7.5 標準ブラウザ iOS 5.1 標準ブラウザ 動作確認した端末は以下のとおりです。 機種 ハードメーカー OS バージョン Webブラウザ F-01D 富士通 Android 3.2 標準ブラウザ F-05D 富士通 Android 2.3.5 標準ブラウザ F-07D 富士通 Android 2.3.5 標準ブラウザ F-12C 富士通 Android 2.3.4 標準ブラウザ T-01D 富士通 Android 2.3.5 標準ブラウザ F-10D 富士通 Android 4.0.3 標準ブラウザ T-02D 富士通 Android 4.0.4 標準ブラウザ IS12T 富士通モバイルコミュ ニケーションズ Windows Phone 7.5 標準ブラウザ
iPad 2 Apple iOS 5.1 標準ブラウザ
動作確認したWebブラウザは以下のとおりです。
Internet Explorer 9/10
Google Chrome 25.0.1364.97 m Firefox 19.0
1.8
注意事項
・
本製品はjQuery Mobileをサポートしています。しかし、jQueryおよび、jQuery Mobileのコミュニティが本製品のサポー トを表明しているわけではありません。・
jQuery Mobile関連のファイルをCDNから読み込む方法はサポートしません。Webアプリケーションに組み込む方法については、「1.3.2 アプリケーションの組み込み方法」を参照してください。
・
提供ファイルの名前を変更しないでください。・
本製品の他のコンポーネントと利用する場合は、そのコンポーネントが動作保証するWebブラウザやOSとの組み合 わせ条件で利用してください。・
サンプルは、商用・業務での利用はできません。・
jQuery Mobileの仕様により、プラットフォーム（端末、OS、Webブラウザ）によって表示が異なる要素があります。・
次版では非互換が発生する可能性があります。1.9
制限事項
制限事項を以下に示します。 J2EE1.10 メッセージ
jQuery Mobile使用時に出力される以下のメッセージについて原因と対処方法を説明します。Error Loading Page
原因
リンク先の情報が誤っている場合が考えられます。対処
id、URL、アクセス権など、リンク先の情報を確認してください。 HTML5をサポートしているWebブラウザを使用してく ださい。 ネットワークの状態を確認してください。1.11 FAQ
jQuery Mobile使用時に発生する以下のトラブルについて対処方法を説明します。Web
ブラウザの画面に何も表示されない。
HTML5をサポートしているWebブラウザを使用してください。1.12 サンプル
サンプルは、本製品媒体の<ドライブ名>:\smartp\jquerymobile\sample配下に格納されています。 サンプルについては、サンプルに同梱されているreadmeを参照してください。・
日本語版: <ドライブ名>\smartp\jquerymobile\sample\pizza\readme.html・
英語版: <ドライブ名> \smartp\jquerymobile\sample\pizza\readme_e.html1.13 jQuery
のライセンス文
Copyright 2013 jQuery Foundation and other contributors http://jquery.com/Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
第
2
章
jQuery UI
本章では、jQuery UIの使い方について説明します。
2.1
機能概要
jQuery UI とは、jQuery公式のユーザインターフェース(UI)用ライブラリのことです。jQuery UIを使うと、操作性や表現力
に優れたWebアプリケーションを作ることができます。
特長
・
統一されたデザインのページを容易に作成可能 同じテーマを設定していれば、異なるウィジェットであっても一貫したデザインで表示されるため、ページのデザイン を統一するのが容易です。・
画面の操作性を拡張 操作性を拡張するメソッドを提供しています。・
jQueryのメソッド、アニメーションの拡張 jQueryの以下のメソッドを拡張しています。－
表示、消去－
要素の位置を別の要素との位置関係で決定 アニメーションの拡張として以下を追加－
色のアニメーション－
class属性によるアニメーション 本製品には、jQuery UI 1.10.0、jQuery 1.8.3が含まれています。2.2
アプリケーション開発方法
2.2.1
提供ファイル
以下のスクリプトファイル、スタイルシートを提供します。 拡張子の前に「.min」が付いているファイルは、空白、改行やコ メントを削除してファイルサイズを縮小した圧縮版で、 運用時は圧縮版のファイルを使用することを推奨します。 拡張子 の前に「.min」が付いていないファイルは、空白、改行やコメントにより可読性を向上させたファイルで、開発・デバッグ時 に利用します。 ディレクトリ 提供ファイル 説明/smartp/jqueryUI/runtime/js jquery-ui-1.10.0.custom.js jQuery UIスクリプト jquery-ui-1.10.0.custom.min.js jQuery UIスクリプト圧縮版
jquery-ui-i18n.js jQuery UI datepicker多国語対応スクリプ
ト
jquery-ui-i18n.min.js jQuery UI datepicker多国語対応スクリプ
ト圧縮版
jquery-1.8.3.js jQueryスクリプト jquery-1.8.3.min.js jQueryスクリプト圧縮版 /smartp/jqueryUI/runtime/css/
テーマディレクトリ(注)
jquery-ui.css jQuery UI用スタイルシート
jquery.ui.theme.css jQuery UI用スタイルシート(jquery-ui.css
ディレクトリ 提供ファイル 説明 /smartp/jqueryUI/runtime/css/ テーマディレクトリ(注)/images *.png スタイルシートで使用するイメージ 注) テーマディレクトリには以下の種類があります。 テーマ名 テーマ名に対応するディレクトリ名
Black Tie black-tie
Blitzer blitzer
Cupertino cupertino Dark Hive dark-hive
Dot Luv dot-luv
Eggplant eggplant Excite Bike excite-bike
Flick flick
Hot Sneaks hot-sneaks Humanity humanity
Le Frog le-frog
Mint Choc mint-choc Overcast overcast Pepper Grinder pepper-grinder
Redmond redmond
Smoothness smoothness South Street south-street
Start start
Sunny sunny
Swanky Purse swanky-purse Trontastic trontastic UI darkness ui-darkness UI lightness ui-lightness Vader vader
2.2.2
アプリケーションの組み込み方法
jQuery UIは、アプリケーション（war/ear）に組み込んで使用します。アプリケーションの組み込み方法を以下に示します。1) ファイルのコピー
1.
アプリケーションの直下（WEB-INFディレクトリと同じ並び）にruntimeディレクトリを作成します。2.
本製品媒体の<ドライブ名>:smartp\jqueryUI\runtime\jsディレクトリ配下のjQuery、jQuery UIのJavaScriptファイル をコピーします。なお、datepickerを使用する場合は、datepickerのJavaScriptもコピーしてください。3.
必要に応じて、1.で作成したruntimeディレクトリの直下にcssディレクトリを作成します。4.
本製品媒体の<ドライブ名>:\smartp\jqueryUI\runtime\cssディレクトリ配下の使用したいテーマ名に対応するディ レクトリをruntime\cssにコピーします。2) HTMLファイルの修正
HTMLの<head>～</head>に以下の記述を追加します。
<link rel="stylesheet" href="runtime/css/xxxx/jquery-ui.css"/> <script src="runtime/jquery-1.8.3.min.js"> </script>
<script src="runtime/jquery-ui-1.10.0.custom.min.js "> </script>
xxxxはテーマ名に対応するディレクトリ名です。 なお、jQueryUIスクリプト、jQueryスクリプトは、通常は圧縮版のみを使用してください。
3) パッケージ化
作成したHTML、JSP、クラスファイルなどをパッケージ化します。 アプリケーションのディレクトリ構成の例を以下に示します。 index.jsp /runtime/jquery-1.8.3.min.js /runtime/ jquery-ui-1.10.0.custom.min.js /runtime/css/ xxxx/jquery-ui.css /runtime/css/ xxxx/images/*.png /WEB-INF/web.xml など2.2.3 jQuery UI
による
HTML
ページの作成方法
jQuery UIを利用したHTMLページの作成方法については、jQuery UI 公式サイト（http://jqueryui.com/）のDemos(http:// jqueryui.com/demos/)を参照してください。
2.3 APIリファレンス
jQuery UI公式サイト（http://jqueryui.com/）のAPI Documentation(http://api.jqueryui.com/)を参照してください。
2.4
運用方法
運用方法については、以下のマニュアルを参照してください。・
「Java EE運用ガイド」・
「Java EE運用ガイド(Java EE 6編)」・
「J2EE ユーザーズガイド(旧版互換)」2.5
サポート一覧
動作環境
以下の環境での動作をサポートします。 サーバ 製品名バージョン/機能 製品名バージョン 機能Java EE 5 Java EE 6 J2EE
Interstage Application Server Enterprise Edition V11.2 サポート サポート サポート クライアント クライアント要件 HTML5対応のWebブラウザで動作することができます。 動作確認したWebブラウザは以下のとおりです。 Internet Explorer 9/10 Google Chrome 25.0.1364.97 m Firefox 19.0
2.6
注意事項
・
本製品はjQuery UIをサポートしています。しかし、jQueryおよび、jQuery UIのコミュニティが本製品のサポートを表 明しているわけではありません。・
jQuery UI関連のファイルをCDNから読み込む方法はサポートしません。Webアプリケーションに組み込む方法につ いては、「2.2.2 アプリケーションの組み込み方法」を参照してください。・
提供ファイルの名前を変更しないでください。・
提供ファイルの内容を変更しないでください。・
本製品の他のコンポーネントと利用する場合は、そのコンポーネントが動作保証するWebブラウザやOSとの組み合 わせ条件で利用してください。・
jQuery UIの仕様により、プラットフォーム（端末、OS、Webブラウザ）によって表示が異なる要素があります。・
次版では非互換が発生する可能性があります。2.7
制限事項
制限事項を以下に示します。 J2EE2.8
メッセージ
jQuery UI使用時に出力されるメッセージはありません。2.9 FAQ
jQuery UI使用時に発生するトラブルの対処方法については、弊社の以下のページを参照してください。富士通 ホーム > ソフトウェア > ソフトウェア技術情報 > Interstage > Interstage Application Server > 注意事項 / その他
(http://software.fujitsu.com/jp/technical/interstage/apserver/notes/)
2.10 jQuery
のライセンス文
Copyright 2013 jQuery Foundation and other contributors http://jquery.com/Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
