FUJITSU Software Interstage Application Server/ Interstage Web Server Express JavaScript ライブラリユーザーズガイド Windows/Solaris/Linux B1WS-1049-03Z0(00) 2015 年 10 月
まえがき 本書の目的 本書は 以下の 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 月初版 - i -
目次 第 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 - ii -
第 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 で組み合わせるだけでアプリケーションを開発できます - 1 -
クロスプラットフォーム対応幅広いスマート端末 / ブラウザに対応しているので クロスプラットフォーム対応のサイトが簡単に作成できます スマート端末とは スマートフォンと同等の操作性を持つデバイスの総称です 本製品には jquery Mobile 1.2.0 jquery 1.8.3が含まれています 1.3 アプリケーション開発方法 1.3.1 提供ファイル 以下のスクリプトファイル スタイルシートを提供します 拡張子の前に.min が付いているファイルは 空白 改行やコメントを削除してファイルサイズを縮小した圧縮版で 運用時は圧縮版のファイルを使用することを推奨します 拡張子の前に.min が付いていないファイルは 空白 改行やコメントにより可読性を向上させたファイルで 開発 デバッグ時に利用します 提供ファイル jquery.mobile-1.2.0.js jquery.mobile-1.2.0.min.js jquery.mobile-1.2.0.css jquery.mobile-1.2.0.min.css jquery-1.8.3.js jquery-1.8.3.min.js images/ajax-loader.gif images/icons-18-black.png images/icons-18-white.png images/icons-36-black.png images/icons-36-white.png 説明 jquery Mobileスクリプト jquery Mobileスクリプト圧縮版 jquery Mobile 用スタイルシート jquery Mobile 用スタイルシート圧縮版 jqueryスクリプト jqueryスクリプト圧縮版スタイルシートで使用するイメージスタイルシートで使用するイメージスタイルシートで使用するイメージスタイルシートで使用するイメージスタイルシートで使用するイメージ 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 - 2 -
/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 Interstage Application Server Enterprise Edition V11.2 サポートサポートサポート - 3 -
クライアントクライアント要件 HTML5 対応のWebブラウザで動作することができます 対応するスマート端末は以下のとおりです OS バージョン 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 Webブラウザ標準ブラウザ標準ブラウザ標準ブラウザ標準ブラウザ標準ブラウザ標準ブラウザ標準ブラウザ 動作確認した端末は以下のとおりです 機種ハードメーカー 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 アプリケーションの組み込み方法 を参照してください 提供ファイルの名前を変更しないでください 提供ファイルの内容を変更しないでください - 4 -
本製品の他のコンポーネントと利用する場合は そのコンポーネントが動作保証する Web ブラウザや OS との組み合わせ条件で利用してください サンプルは 商用 業務での利用はできません jquery Mobile の仕様により プラットフォーム ( 端末 OS Web ブラウザ ) によって表示が異なる要素があります 次版では非互換が発生する可能性があります 1.9 制限事項 制限事項を以下に示します J2EE 1.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.html 1.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 - 5 -
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. - 6 -
第 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 スクリプト /smartp/jqueryui/runtime/css/ テーマディレクトリ ( 注 ) jquery-ui-1.10.0.custom.min.js jquery-ui-i18n.js jquery-ui-i18n.min.js jquery-1.8.3.js jquery-1.8.3.min.js jquery-ui.css jquery.ui.theme.css jquery UI スクリプト圧縮版 jquery UI datepicker 多国語対応スクリプト jquery UI datepicker 多国語対応スクリプト圧縮版 jquery スクリプト jquery スクリプト圧縮版 jquery UI 用スタイルシート jquery UI 用スタイルシート (jquery-ui.css の一部 ) - 7 -
ディレクトリ提供ファイル説明 /smartp/jqueryui/runtime/css/ テーマディレクトリ ( 注 )/images *.png スタイルシートで使用するイメージ 注 ) テーマディレクトリには以下の種類があります Black Tie Blitzer Cupertino Dark Hive Dot Luv Eggplant Excite Bike Flick Hot Sneaks Humanity Le Frog Mint Choc Overcast Pepper Grinder Redmond Smoothness South Street Start Sunny Swanky Purse Trontastic UI darkness UI lightness Vader テーマ名 テーマ名に対応するディレクトリ名 black-tie blitzer cupertino dark-hive dot-luv eggplant excite-bike flick hot-sneaks humanity le-frog mint-choc overcast pepper-grinder redmond smoothness south-street start sunny swanky-purse trontastic ui-darkness ui-lightness 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 にコピーします - 8 -
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/) を参照してください - 9 -
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 ブラウザ ) によって表示が異なる要素があります 次版では非互換が発生する可能性があります - 10 -
2.7 制限事項 制限事項を以下に示します J2EE 2.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. - 11 -