JavaScriptライブラリユーザーズガイド

Size: px

Start display at page:

Download "JavaScriptライブラリユーザーズガイド"

よしおらぶり
5 years ago
Views:

1 FUJITSU Software Interstage Application Server/ Interstage Web Server Express JavaScript ライブラリユーザーズガイド Windows/Solaris/Linux B1WS Z0(00) 2015 年 10 月

2 まえがき本書の目的本書は以下の 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 FUJITSU LIMITED 2015 年 10 月第 3 版 2013 年 6 月第 2 版 2012 年 8 月初版 - i -

3 目次第 1 章 jquery Mobile リリース情報追加機能の概要互換に関する情報機能概要アプリケーション開発方法提供ファイルアプリケーションの組み込み方法 jquery Mobile による HTML ページの作成方法 API リファレンス運用方法移行方法サポート一覧注意事項制限事項メッセージ FAQ サンプル jquery のライセンス文...5 第 2 章 jquery UI 機能概要アプリケーション開発方法提供ファイルアプリケーションの組み込み方法 jquery UI による HTML ページの作成方法 API リファレンス運用方法サポート一覧注意事項制限事項メッセージ FAQ jquery のライセンス文 ii -

4 第 1 章 jquery Mobile 本章では jquery Mobile の使い方について説明します 1.1 リリース情報追加機能の概要以前のバージョンレベルより追加改良された機能を説明しますカテゴリ概要エンハンス分類ページリストビュー現在のページに浮かぶように表示される Popup ウィジェットを追加リストビューを折り畳み可能にするアコーディオン形式も可能リストビューに自動で区切りを入れる機能を追加コンテント collapsibles, collapsible sets のアイコン幅をカスタマイズ可能スライダー sliderstart sliderstop イベントの追加その他 jquery のサポートエンハンス分類 : : 機能追加機能改良互換に関する情報以前のバージョンレベルと非互換となる機能を以下に示します非互換となる機能見栄え読み取り専用であることがわかりやすいような表示に改良アイコンのみのボタンが小さすぎて押しづらいのを改良ツールバー内のボタンのデフォルトをminiに変更フィールドコンテナ内の要素の幅を改良 1.2 機能概要スマート端末開発向けの jquery Mobile(JavaScript フレームワーク ) をサポートしています jquery Mobile を使用することでスマート端末に対応するアプリケーションの開発を短期間に容易に行うことが可能となります特長 HTML の知識だけで開発可能基本的に HTML を記述するだけで開発できますさらに JavaScript や CSS を利用することで高度なカスタマイズが可能になりますスマート端末向けの豊富な部品標準でスマート端末向けのツールバーボタンリストなどの部品が用意されていますこれらを HTML で組み合わせるだけでアプリケーションを開発できます - 1 -

5 クロスプラットフォーム対応幅広いスマート端末 / ブラウザに対応しているのでクロスプラットフォーム対応のサイトが簡単に作成できますスマート端末とはスマートフォンと同等の操作性を持つデバイスの総称です本製品には jquery Mobile jquery 1.8.3が含まれています 1.3 アプリケーション開発方法提供ファイル以下のスクリプトファイルスタイルシートを提供します拡張子の前に.min が付いているファイルは空白改行やコメントを削除してファイルサイズを縮小した圧縮版で運用時は圧縮版のファイルを使用することを推奨します拡張子の前に.min が付いていないファイルは空白改行やコメントにより可読性を向上させたファイルで開発デバッグ時に利用します提供ファイル jquery.mobile js jquery.mobile min.js jquery.mobile css jquery.mobile min.css jquery js jquery 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スクリプト圧縮版スタイルシートで使用するイメージスタイルシートで使用するイメージスタイルシートで使用するイメージスタイルシートで使用するイメージスタイルシートで使用するイメージアプリケーションの組み込み方法 jquery Mobile はアプリケーション (war/ear) に組み込んで使用します 1. 本製品媒体の < ドライブ名 >:\smartp\jquerymobile\runtime ディレクトリをアプリケーションの直下 (WEB-INF ディレクトリと同じ並び ) にコピーします 2. HTML の <head>~</head> に以下の記述を追加します <link rel="stylesheet" href="runtime/jquery.mobile min.css"/> <script src="runtime/jquery min.js"> </script> <script src="runtime/jquery.mobile min.js"> </script> 3. 作成した HTML JSP クラスファイルなどをパッケージ化しますアプリケーションのディレクトリ構成の例を以下に示します index.jsp /runtime/jquery.mobile min.css /runtime/jquery min.js /runtime/jquery.mobile 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 -

6 /runtime/images/icons-36-white.png /WEB-INF/web.xml など jquery Mobile による HTML ページの作成方法 jquery Mobile を利用した HTML ページの作成方法については jquery Mobile 公式サイト ( の Docs( を参照してください 1.4 API リファレンス jquery Mobile 公式サイト ( の Docs( を参照してください 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 min.css"/> <script src="runtime/jquery min.js"> </script> <script src="runtime/jquery.mobile min.js"> </script> アプリケーションの修正が完了したあとパッケージ化して配備し直してください 1.7 サポート一覧動作環境以下の環境での動作をサポートしますサーバ製品名バージョン / 機能製品名バージョン機能 Java EE 5 Java EE 6 J2EE Interstage Application Server Enterprise Edition V11.2 サポートサポートサポート - 3 -

7 クライアントクライアント要件 HTML5 対応のWebブラウザで動作することができます対応するスマート端末は以下のとおりです OS バージョン Android Android Android 3.2 Android Android Windows Phone 7.5 ios 5.1 Webブラウザ標準ブラウザ標準ブラウザ標準ブラウザ標準ブラウザ標準ブラウザ標準ブラウザ標準ブラウザ動作確認した端末は以下のとおりです機種ハードメーカー OS バージョン Web ブラウザ F-01D 富士通 Android 3.2 標準ブラウザ F-05D 富士通 Android 標準ブラウザ F-07D 富士通 Android 標準ブラウザ F-12C 富士通 Android 標準ブラウザ T-01D 富士通 Android 標準ブラウザ F-10D 富士通 Android 標準ブラウザ T-02D 富士通 Android 標準ブラウザ IS12T 富士通モバイルコミュニケーションズ Windows Phone 7.5 標準ブラウザ ipad 2 Apple ios 5.1 標準ブラウザ動作確認したWebブラウザは以下のとおりです Internet Explorer 9/10 Google Chrome m Firefox 注意事項本製品は jquery Mobile をサポートしていますしかし jquery および jquery Mobile のコミュニティが本製品のサポートを表明しているわけではありません jquery Mobile 関連のファイルを CDN から読み込む方法はサポートしません Web アプリケーションに組み込む方法についてはアプリケーションの組み込み方法を参照してください提供ファイルの名前を変更しないでください提供ファイルの内容を変更しないでください - 4 -

8 本製品の他のコンポーネントと利用する場合はそのコンポーネントが動作保証する 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 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 -

9 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

10 第 2 章 jquery UI 本章では jquery UI の使い方について説明します 2.1 機能概要 jquery UI とは jquery 公式のユーザインターフェース (UI) 用ライブラリのことです jquery UI を使うと操作性や表現力に優れた Web アプリケーションを作ることができます特長統一されたデザインのページを容易に作成可能同じテーマを設定していれば異なるウィジェットであっても一貫したデザインで表示されるためページのデザインを統一するのが容易です画面の操作性を拡張操作性を拡張するメソッドを提供しています jquery のメソッドアニメーションの拡張 jquery の以下のメソッドを拡張しています - 表示消去 - 要素の位置を別の要素との位置関係で決定アニメーションの拡張として以下を追加 - 色のアニメーション - class 属性によるアニメーション本製品には jquery UI jquery が含まれています 2.2 アプリケーション開発方法提供ファイル以下のスクリプトファイルスタイルシートを提供します拡張子の前に.min が付いているファイルは空白改行やコメントを削除してファイルサイズを縮小した圧縮版で運用時は圧縮版のファイルを使用することを推奨します拡張子の前に.min が付いていないファイルは空白改行やコメントにより可読性を向上させたファイルで開発デバッグ時に利用しますディレクトリ提供ファイル説明 /smartp/jqueryui/runtime/js jquery-ui custom.js jquery UI スクリプト /smartp/jqueryui/runtime/css/ テーマディレクトリ ( 注 ) jquery-ui custom.min.js jquery-ui-i18n.js jquery-ui-i18n.min.js jquery js jquery 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 -

11 ディレクトリ提供ファイル説明 /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 アプリケーションの組み込み方法 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.

12 2) HTML ファイルの修正 HTML の <head>~</head> に以下の記述を追加します <link rel="stylesheet" href="runtime/css/xxxx/jquery-ui.css"/> <script src="runtime/jquery min.js"> </script> <script src="runtime/jquery-ui custom.min.js "> </script> xxxx はテーマ名に対応するディレクトリ名ですなお jqueryui スクリプト jquery スクリプトは通常は圧縮版のみを使用してください 3) パッケージ化作成した HTML JSP クラスファイルなどをパッケージ化しますアプリケーションのディレクトリ構成の例を以下に示します index.jsp /runtime/jquery min.js /runtime/ jquery-ui custom.min.js /runtime/css/ xxxx/jquery-ui.css /runtime/css/ xxxx/images/*.png /WEB-INF/web.xml など jquery UI による HTML ページの作成方法 jquery UI を利用した HTML ページの作成方法については jquery UI 公式サイト ( の Demos( jqueryui.com/demos/) を参照してください - 9 -

13 2.3 API リファレンス jquery UI 公式サイト ( の API Documentation( を参照してください 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 m Firefox 注意事項本製品は jquery UI をサポートしていますしかし jquery および jquery UI のコミュニティが本製品のサポートを表明しているわけではありません jquery UI 関連のファイルを CDN から読み込む方法はサポートしません Web アプリケーションに組み込む方法についてはアプリケーションの組み込み方法を参照してください提供ファイルの名前を変更しないでください提供ファイルの内容を変更しないでください本製品の他のコンポーネントと利用する場合はそのコンポーネントが動作保証する Web ブラウザや OS との組み合わせ条件で利用してください jquery UI の仕様によりプラットフォーム ( 端末 OS Web ブラウザ ) によって表示が異なる要素があります次版では非互換が発生する可能性があります

14 2.7 制限事項制限事項を以下に示します J2EE 2.8 メッセージ jquery UI 使用時に出力されるメッセージはありません 2.9 FAQ jquery UI 使用時に発生するトラブルの対処方法については弊社の以下のページを参照してください富士通ホーム > ソフトウェア > ソフトウェア技術情報 > Interstage > Interstage Application Server > 注意事項 / その他 ( jquery のライセンス文 Copyright 2013 jquery Foundation and other contributors 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

MusicSoft Manager

MusicSoft Manager( ミュージックソフトマネージャー ) は電子楽器で扱うファイル ( ソングやスタイルデータ ) を iphone/ipod touch/ipad 上で管理するアプリケーションです本アプリケーションにより以下のことができますデータのダウンロード購入データをアプリと楽器コンピューターオンラインストレージサービス Dropbox ( ドロップボックス ) 間で転送