スマート端末向けアプリケーション開発フレームワーク利用手引き

Interstage Application Server/
Interstage Web Server Express
スマート端末向けアプリケーション開発
フレームワーク利用手引き
Windows/Solaris/Linux
B1WS-1049-01Z0(00)
2012年8月
まえがき
本書の目的
本書は、スマート端末向けアプリケーション開発フレームワークについて説明しています。
本書の読者
本書は、本機能を利用して、アプリケーションの作成、運用を行う方を対象にしています。
登録商標について
Microsoft、Active Directory、ActiveX、Excel、Internet Explorer、MS-DOS、MSDN、 Visual Basic、Visual C++、Visual
Studio、Windows、Windows NT、Windows Server、Win32 は、米国およびその他の国における米国Microsoft Corporation
の商標または登録商標です。
OracleとJavaは、Oracle Corporation およびその子会社、関連会社の米国およびその他の国における登録商標です。文
中の社名、商品名等は各社の商標または登録商標である場合があります。
その他の記載されている商標および登録商標については、一般に各社の商標または登録商標です。
輸出許可
本ドキュメントを非居住者に提供する場合には、経済産業大臣の許可が必要となる場合がありますので、ご注意ください。
著作権
Copyright 2012 FUJITSU LIMITED
2012年 8月初版
-i-
目　次
第1章リリース情報....................................................................................................................................................................1
1.1 追加機能の概要..................................................................................................................................................................................1
1.2 互換に関する情報..............................................................................................................................................................................1
第2章機能概要.........................................................................................................................................................................3
第3章アプリケーション開発方法................................................................................................................................................4
3.1 提供ファイル........................................................................................................................................................................................4
3.2 アプリケーションの組み込み方法.......................................................................................................................................................4
3.3 jQuery MobileによるHTMLページの作成方法.................................................................................................................................5
第4章 APIリファレンス................................................................................................................................................................6
第5章運用方法.........................................................................................................................................................................7
第6章移行方法.........................................................................................................................................................................8
第7章サポート一覧...................................................................................................................................................................9
第8章注意事項.......................................................................................................................................................................10
第9章制限事項.......................................................................................................................................................................11
第10章メッセージ.................................................................................................................................................................... 12
第11章 FAQ............................................................................................................................................................................13
第12章サンプル......................................................................................................................................................................14
第13章 jQueryのライセンス文..................................................................................................................................................15
- ii -
第1章リリース情報
1.1 追加機能の概要
以前のバージョン・レベルより追加、改良された機能を説明します。
カテゴリ
概要
エンハンス
分類
全般
jQuery Mobile 1.1.1に対応
◎
固定ツールバー
固定ツールバーの改良
○
ページ切り替え効果
(data-transition属
性)
ページ切り替え効果の改良
○
ページ切り替え効果へのturn 、flowの追加
◎
ページ切り替え効果のシーケンスに非同期を
追加
◎
ページ切り替え効果にFirefox追加
◎
デフォルトテーマの改良
○
新しいAJAXローダのデザインとオプション
◎
フォーム要素に小さい表示(mini)の追加
◎
フリップスイッチのデザイン改良
○
スライダーにハイライト追加
◎
スライダーにステップ属性追加
◎
jQuery 1.7.1のサポート
○
data-enhance=false属性追加
◎
data-ajax=false属性の影響範囲の拡大
◎
見栄え
その他
エンハンス分類： ◎：機能追加 ○機能改良
1.2 互換に関する情報
以前のバージョン・レベルと非互換となる機能と移行方法を説明します。
非互換となる機能
移行方法
TouchOverflow機能を非推奨にする
jQuery Mobile 1.1は本機能を使用しないで固定ツール
バーをサポート可能になりました。jQuery Mobile 1.1では
本機能を設定していても無視します。新規に記述する分
については使用しないでください。
ページ切り替え効果(data-transition属性)のデフォ
ルトがslideからfadeに変更
slideを使用する場合は、明に記述を追加してください。
ブラウザが3D未対応ならページ切り替え効果はfade
になる
ページ切り替え効果を有効にする場合には、3D対応ブラ
ウザを使用してください。
$.mobile.fixedToolbars.setTouchToggleEnabled(fal
se)未サポート。tapToggleに置き換え
$.mobile.fixedToolbars.setTouchToggleEnabled(false)を、
tapToggleを使用する記述に書き換えてください。
data-fullscreen="true" オプションをヘッダ、フッタに
設定可能（data-role="page"への設定は非推奨）
data-fullscreen="true"オプションはdata-role="page"ではな
く、data-role="header"、data-role="footer"のdivタグに記述
してください。
-1-
非互換となる機能
移行方法
jQuery Mobile 1.1ではdata-role="page"への設定も有効で
すが、新規に記述する分については使用しないでください。
-2-
第2章機能概要
スマート端末開発向けのjQuery Mobile(JavaScriptフレームワーク)をサポートしています。jQuery Mobileを使用することで、
スマート端末に対応するアプリケーションの開発を、短期間に容易に行うことが可能となります。
特長
・ HTMLの知識だけで開発可能
基本的に、HTMLを記述するだけで開発できます。さらに、JavaScriptやCSSを利用することで、高度なカスタマイズ
が可能になります。
・スマート端末向けの豊富な部品
標準で、スマート端末向けのツールバー、ボタン、リストなどの部品が用意されています。これらをHTMLで組み合わ
せるだけでアプリケーションを開発できます。
・クロスプラットフォーム対応
幅広いスマート端末/ブラウザに対応しているので、クロスプラットフォーム対応のサイトが簡単に作成できます。
スマート端末とは、スマートフォンと同等の操作性を持つデバイスの総称です。
本製品には、jQuery Mobile 1.1.1、jQuery 1.7.1が含まれています。
-3-
第3章アプリケーション開発方法
3.1 提供ファイル
以下のスクリプトファイル、スタイルシートを提供します。拡張子の前に「.min」が付いているファイルは、空白、改行やコ
メントを削除してファイルサイズを縮小した圧縮版で、運用時は圧縮版のファイルを使用することを推奨します。拡張子
の前に「.min」が付いていないファイルは、空白、改行やコメントにより可読性を向上させたファイルで、開発・デバッグ時
に利用します。
提供ファイル
説明
jquery.mobile-1.1.1.js
jQuery Mobileスクリプト
jquery.mobile-1.1.1.min.js
jQuery Mobileスクリプト圧縮版
jquery.mobile-1.1.1.css
jQuery Mobile用スタイルシート
jquery.mobile-1.1.1.min.css
jQuery Mobile用スタイルシート圧縮版
jquery-1.7.1.js
jQueryスクリプト
jquery-1.7.1.min.js
jQueryスクリプト圧縮版
images/ajax-loader.gif
スタイルシートで使用するイメージ
images/ajax-loader.png
スタイルシートで使用するイメージ
images/icons-18-black.png
スタイルシートで使用するイメージ
images/icons-18-white.png
スタイルシートで使用するイメージ
images/icons-36-black.png
スタイルシートで使用するイメージ
images/icons-36-white.png
スタイルシートで使用するイメージ
3.2 アプリケーションの組み込み方法
jQuery Mobileは、アプリケーション（war/ear）に組み込んで使用します。
1. 本製品媒体の<ドライブ名>:\smartp\jquery\runtimeディレクトリを、アプリケーションの直下（WEB-INFディレクトリ
と同じ並び）にコピーします。
2. HTMLの<head>～</head>に以下の記述を追加します。
<link rel="stylesheet" href="runtime/jquery.mobile-1.1.1.min.css"/>
<script src="runtime/jquery-1.7.1.min.js"> </script>
<script src="runtime/jquery.mobile-1.1.1.min.js"> </script>
3. 作成したHTML、JSP、クラスファイルなどをパッケージ化します。
アプリケーションのディレクトリ構成の例を以下に示します。
index.jsp
/runtime/jquery.mobile-1.1.1.min.css
/runtime/jquery-1.7.1.min.js
/runtime/jquery.mobile-1.1.1.min.js
/runtime/images/ajax-loader.gif
/runtime/images/ajax-loader.png
/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など
-4-
3.3 jQuery MobileによるHTMLページの作成方法
jQuery Mobileを利用したHTMLページの作成方法については、jQuery Mobile 公式サイト（http://jquerymobile.com/）の
Docs(http://jquerymobile.com/demos/1.1.1/)を参照してください。
-5-
第4章 APIリファレンス
jQuery Mobile公式サイト（http://jquerymobile.com/）のDocs(http://jquerymobile.com/demos/1.1.1/)を参照してください。
-6-
第5章運用方法
運用方法については、以下のマニュアルを参照してください。
・「Java EE運用ガイド」
・「Java EE運用ガイド(Java EE 6編)」
・「J2EE ユーザーズガイド(旧版互換)」
-7-
第6章移行方法
ここでは、前バージョンでアプリケーションに組み込んだjQuery Mobileを、本バージョンで提供する最新のjQuery Mobile
へ移行する方法を説明します。現在お使いのアプリケーションを変更するため、移行失敗に備えて、あらかじめアプリケー
ション資源を退避しておくことをお薦めします。
1. runtimeの入替え
1. アプリケーションの直下（WEB-INFディレクトリと同じ並び）に組み込んだruntimeディレクトリを削除します。
2. 本製品媒体の<ドライブ名>:\smartp\jquery\runtimeディレクトリを、アプリケーションの直下にコピーします。
2. アプリケーションの修正
HTMLの<head>～</head>の記述を以下のように修正します。
<link rel="stylesheet" href="runtime/jquery.mobile-1.1.1.min.css"/>
<script src="runtime/jquery-1.7.1.min.js"> </script>
<script src="runtime/jquery.mobile-1.1.1.min.js"> </script>
アプリケーションの修正が完了したあと、パッケージ化して、配備し直してください。
-8-
第7章サポート一覧
動作環境
以下の環境での動作をサポートします。
サーバ
製品名バージョン/機能
機能
製品名バージョン
Java EE 5 Java EE 6
J2EE
Interstage Application Server Enterprise Edition V11.0
○
○
○
Interstage Application Server Standard-J Edition V11.0
○
○
○
Interstage Web Server Express V11.0
○
－
－
○：サポート
－：未サポート
クライアント
クライアント要件
HTML5対応の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
標準ブラウザ
IS12T
富士通モバイルコミュ
ニケーションズ
Windows Phone 7.5
標準ブラウザ
iPad 2
Apple
iOS 4.3.5
標準ブラウザ
iPhone 4S
Apple
iOS 5.0、iOS 5.0.1
標準ブラウザ
動作確認したブラウザは以下のとおりです。
Internet Explorer 9.0.8112.16421
Google Chrome 19.0.1084.52
Firefox 12.0
-9-
第8章注意事項
・本製品はjQuery Mobileをサポートしています。しかし、jQueryおよび、jQuery Mobileのコミュニティが本製品のサポー
トを表明しているわけではありません。
・ jQuery Mobile関連のファイルをCDNから読み込む方法はサポートしません。Webアプリケーションに組み込む方法
については、「第3章アプリケーション開発方法」を参照してください。
・提供ファイルの名前を変更しないでください。
・提供ファイルの内容を変更しないでください。
・本製品の他のコンポーネントと利用する場合は、そのコンポーネントが動作保証するWebブラウザやOSとの組み合
わせ条件で利用してください。
・サンプルは、商用・業務での利用はできません。
・ jQuery Mobileの仕様により、プラットフォーム（端末、OS、Webブラウザ）によって表示が異なる要素があります。
- 10 -
第9章制限事項
制限事項を以下に示します。
J2EE
- 11 -
第10章メッセージ
jQuery Mobile使用時に出力される以下のメッセージについて原因と対処方法を説明します。
Error Loading Page
原因
リンク先の情報が誤っている場合が考えられます。
対処
id、URL、アクセス権など、リンク先の情報を確認してください。 HTML5をサポートしているWebブラウザを使用してく
ださい。ネットワークの状態を確認してください。
- 12 -
第11章 FAQ
jQuery Mobile使用時に発生する以下のトラブルについて対処方法を説明します。
Webブラウザの画面に何も表示されない。
HTML5をサポートしているWebブラウザを使用してください。
- 13 -
第12章サンプル
サンプルは、本製品媒体の<ドライブ名>:\smartp\jquery\sample配下に格納されています。
サンプルについては、サンプルに同梱されているreadmeを参照してください。
・日本語版: <ドライブ名>\smartp\jquery\sample\pizza\readme.html
・英語版: <ドライブ名> \smartp\jquery\sample\pizza\readme_e.html
- 14 -
第13章 jQueryのライセンス文
Copyright (c) 2012 John Resig, 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.
- 15 -

Download Report