HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋

HTML5スマートフォン業務アプリ開発（応用）
HTML5
スマートフォン業務アプリ
開発セミナー(応用)
1
申し込み受付中
http://www.staffnet.co.jp/dojo/index.html

HTML5スマートフォン業務アプリ開発（応用）©2014 Staffnet, Inc. All rights Reserved.
2
セミナー概要
基礎コース応用コース
対象範囲 HTML5使ったスマートフォン向け業務アプリ開発
目標基本機能実装に必要なスキル習得本格アプリ開発に必要なスキル習得
内容
・HTML5と関連技術の基礎
・基本的なモバイルUIの作成
・HTML5アプリの実装手順
・本格アプリ開発に必要な知識*1
・高度なデータ処理の実装手順*2
・高度なモバイルUIの作成*3
前提スキルなし
基礎コース修了または
HTML5とJavaScriptの知識
実習環境
[サーバー環境]PHP(Apache)
[JavaScriptライブラリ]jQuery, jQuery Mobile,
[サーバー環境]Java Servlet(Tomcat)
[JavaScriptライブラリ]Dojo Toolkit
*1) サーバー認証、JSON変換、ローカルデータの機密保護(暗号化と自動消去)、プログラムのモジュール化
*2) オブジェクトストア、テンプレート/データバインドによる画面作成、国際化対応、タッチイベントの処理
*3) 横ページスクロール、グラフ、グラフィック描画等

HTML5で本格アプリ開発時のハードル
 HTML5と連携するサーバー側の実装は?
 サーバーの変更を最小限で済ませるには?
 HTML5で保存したデータの機密保護は?
 JavaScriptのオブジェクト指向プログラミング
は特殊すぎる。今まで通り、クラスを使ったプ
ログラム開発はできないのか?
 機能ごとに別のJavaScriptライブラリ利用で
は動作検証が大変。良い方法は?
 データからの画面生成、国際化対応など
複雑な処理を簡単にできないか?
3

カリキュラム
概要
 HTML5によるアプリ開発とアーキテクチャ
 HTML5とJavaScriptの基礎、Dojo Toolkitの基礎
アプリ作成実習(顧客情報アプリ)
 HTMLによるUI Widget作成、JavaScriptによるクラス作成
 サーバー連携(ユーザー認証、JSONデータ変換)
 データ処理の効率化(テンプレート/データバインドによる画面作成)
 ローカルデータの保護(インメモリーデータベース、自動データ消去）
 高度なUI(横ページスクロール、ビジネスグラフ)
拡張機能の実装
 国際化対応
 暗号化
 タップとスワイプイベントの処理
 グラフィック描画(メーター表示) 4

実習アプリ(1) 画面遷移
5

実習アプリ(2) クラス構造
6

実習アプリ(3) 機能拡張
7

HTML5によるアプリ開発概要
9

10
HTML5の適用エリアとメリット
PC スマートフォン
Webサイト
・情報提供 △
・Flash等で高機能なUIを実現済
○
・高機能なUI可能*
Webアプリ
・情報処理
・ゲーム
・マルチメディア
△
・Flashやインストｰルアプリで高機能
を実現済
◎
・高機能なUI可能*
・ネイティブアプリの代替
>単一コードで複数OS対応
>アプリの配布・バージョンアップが容易
>Web開発のインフラ、スキルを活用できる
*iOSとAndroid 4.1以降は、 Flash Playerのサポートなし

14
モバイル向けJavaScriptライブラリ(1)
 JavaScriptライブラリの必要性
 WebアプリはHTML・CSS・JavaScriptを組み合わせて開発
 業務アプリに重要な動的画面生成、データ処理はJavaScriptで記述
 JavaScript標準のライブラリが付属していないためコード量が増大する
 クラスやパッケージの仕組みが提供されていないため特有の実装が必要
解決策
 第三者が提供するJavaScriptライブラリを活用
高度なUI、オブジェクトストア、クラス等を実現

15
 業務アプリ向けライブラリ選択のチェックポイント
 モバイル向けUI部品が豊富に提供されているか?
 業務アプリに必要なデータ処理機能が提供されているか?
 オブジェクト指向プログラミングが容易に出来るか?
 ライブラリサイズが大きすぎないか?
 技術ドキュメントが整理されているか?
 利用方法の習得が容易か?
 十分な導入実績があるか?
 後方互換が考慮されているか?
 将来も安定した提供が見込まれるか?

組み合わせ型の例
 jQuery + jQuery Mobile + その他ライブラリ
(基本機能) (モバイル向けUI) (グラフ、MVC等)
• 複数ライブラリ同時使用による不具合のリスク
• 相互の依存バージョン管理が大変
オールインワン型の例
 Dojo Toolkit Mobile
• Dojo Foundationが開発
• オープンソース、無償
• HTMLとJavaScriptの組合せで記述
 Sencha Touch
• Sencha Inc. が開発
• オープンソース、商用時は一部有償(グラフと図形描画機能)
• JavaScriptのみで記述
16

17
Dojo Toolkitとは
業務アプリ向けJavaScriptフレームワーク
 前提ライブラリ不要
 オープンソース・ライセンス(BSD、AFL)
安定した開発体制と導入実績
 Dojo Foundationが開発
 大手複数企業が開発スポンサー
 世界中の大手企業が採用
 IBMの製品群に組み込み
継続的サポート
 2007年から定期的にアップデート
 古いバージョンの保守継続
(Ver 1.4以降は最新ブラウザに対応)
 後方互換維持
(古いモジュールを保持)
Version リリース日
1.0 2007年11月 5日
1.1 2008年 3月26日
1.2 2008年10月 2日
1.3 2009年 3月26日
1.4 2009年12月 7日
1.5 2010年 7月22日
1.6 2011年 3月15日
1.7 2011年10月27日
1.8 2012年 8月15日
1.9 2013年 5月 1日
1.9.3 2014年 2月20日
1.10.0β 2014年 5月14日

18
Dojo Toolkitの特長(1)
高機能なUIと描画機能
 モバイルデバイスのUIと同等のルック&フィールを持つ数多くのUI部品
 タッチ機能(拡大・縮小、数値表示、強調等）を持つ高機能なビジネスグラフ
 ベクターグラフィックによる自由かつ高度な描画
 独自のUI部品の作成、タップ・スワイプ等のイベント処理

19
高機能と生産性を両立
 2,000個以上の機能モジュールを標準装備
• オブジェクトストア
(データ登録・更新・条件検索・並べ替え・出力制限）
• データバインド、HTMLテンプレート機能により
最小のコードで画面生成
• CSS3セレクタを使ったDOM操作
• Ajaxによる非同期通信
• 国際対応、暗号化......
 クラス機能により生産性の高いチーム開発が可能
• クラス生成、継承、オーバーライド
• パッケージによるクラス管理
• JavaScript特有のオブジェクト指向プログラミング不要

20
高機能かつサイズは最小限
 ライブラリを小さなモジュールに分割
(約3,000個のJavaScriptファイル)
 アプリ起動時にブラウザ環境（種類、ロケール、サポート機能等）に応じて
最小限のモジュールのみロード
※AMD (Asynchronous Module Definition)
□□□……
□□□……
□□□……
Web
ブラウザ
(AMD)

21
• ワークショップ
• 有償技術サポート
• Dojo関連ブログ
サポート
• チュートリアル
• リファレンスガイド
• APIドキュメント
• コミュニティー
技術情報
ドキュメントとサポートが充実
 70個のチュートリアル
 リファレンスガイドにAPIごとの詳細な解説とサンプルコード
 Dojo開発メンバーである「Site Pen」が有償技術サポート実施
Dojo
Foundation
• AOL
• Google
• IBM
• Site Pen 等
開発

22
クロスプラットフォーム対応
 PCとモバイル両方に対応
• iOS, Android, BlackBerry, Windows Phone
• IE, Firefox, Safari, Opera, Chrome
 モバイルOSごとのテーマを準備
(iOS, Android, BlackBerry, Windows Phone)
iOS Android

Dojo Toolkitの基礎
32

33
パッケージとモジュール(1)
パッケージで分類されたモジュールを
インクルード
独自モジュールを組み合わせてアプリを作成
独自
モジュール
＝
＋
パッケージパッケージパッケージ
□□□
□□□
……
□□□
□□□
……
□□□
□□□
……
※モジュールは、1つのJavaScriptファイル(クラス、オブジェクト等を定義)
※パッケージは、モジュールファイルが存在するディレクトリ
アプリ

34
Dojo Toolkit標準モジュール
ユーザ作成モジュール
初期化ルーチン
(index.html)
define([
module-1,
module-2,
.....................],
function(mod1,mod2....){
//処理記述
｝);
require([
module-A,
module-B,
...................],
function(modA,modB....){
//処理記述
｝);
前提
モジュール前提
モジュール
※クラスの作成はdeclare()で行います。実習2で解説します。

35
モジュールは単一のJavaScriptファイル
パッケージはモジュールの保存場所のディレクト
リを示す
require([
"dojox/mobile/parser"
……
dojox
mobile
parser.js

36
Dojo Toolkitのライブラリ
名前空間モジュール数提供する機能
dojo 288 基本機能(DOM操作、イベント、Ajax等)
dijit 213 UI機能(PC向けが中心)
dojox 1799 拡張機能(モバイルUI 、グラフィック等)
ライブラリは3つの名前空間で分類される
 モバイル用UIはdojox/mobileに含まれる

37
Dojo Toolkitの技術情報(1)
チュートリアル
 http://dojotoolkit.org/documentation/
 初級者向けから上級者向けまで幅広くカバー
 過去のバージョンにも対応
APIドキュメント
 http://dojotoolkit.org/api/
 モジュール単位のAPIリファレンス
 プロパティ、メソッド、イベント等の仕様
 リファレンスガイドへのリンク
リファレンスガイド
 http://dojotoolkit.org/reference-guide/1.9/index.html
 モジュール単位または機能単位の解説
 機能と使い方、サンプルコード

38
使いたい機能からライブラリ検索
 名前空間ごとのリファレンスガイド一覧を利用
• http://dojotoolkit.org/reference-guide/1.9/dojo/index.html
• http://dojotoolkit.org/reference-guide/1.9/dijit/index.html
• http://dojotoolkit.org/reference-guide/1.9/dojox/index.html

39
モジュール名から検索
 サンプルコードを利用する際に有効
 APIドキュメントを利用 (http://dojotoolkit.org/api/)
モジュール名を入力

解説1.処理概要
ログイン画面の作成
 内容
• 標準的なログイン画面
 学習の対象
• DojoのHTMLのひな型
• Dojo WidgetのHTML記述
55

解説2.処理概要(1)
ログイン処理の作成
 内容
• Ajaxを使いJavaサーブレットとの認証処理
• 認証済みのセッション情報を使いサーバ
ーからデータを取得
• 取得データをオブジェクトストアに保存
 学習の対象
• Ajax使ったサーバー認証の考慮点
• JavaサーブレットのAjax処理
• JSON変換
• Dojoのクラス作成と利用方法
• HTML5とDojoの処理実装
（画面遷移、イベント処理、Ajax通信、プロ
グレスインジケーター、オブジェクトストア、
画面状態の初期化）
72

73
ログイン・リクエスト
ログイン結果受信
顧客情報リクエスト
顧客情報受信
LoginServlet
・JSONデコード
・ID,PWD認証
・session開始
・sessionにID保持
CustomerDataServlet
・session有効性判別
・sessionからID取得
・顧客情報を作成
・JSONエンコード
Webブラウザサーバー
jsonData={
"loginId":"user01",
"pwd":"1234"}
jsessionid=xxxxx
{"auth":"OK"}
jsessionid=xxxxx
[{
"customerId":"001",
"name": "青山建設営業1部",
・・・・・・・・
LoginViewクラス

顧客一覧画面の作成
 内容
• オブジェクトストアから顧客名一覧表示
 学習の対象
（WidgetをJavaScriptで動的に生成、
データバインド、
オブジェクトストアからのデータ読み込み）
106

109
解説3.データバインド(1)
データバインドとは
 データをWidgetと連結させる
 リスト表示の面倒なプログラミングが不要
customerId name
001 青山建設営業１部
002 赤松機械総務部
003 朝日商事販売２部
004 アサヒ電気管理部
005 アタリヤ工業製造２部
006 池田建設庶務部
007 石井機械システム部
008 石川商事法務部
009 岩田電気経理部
010 上山工業開発部
+ =

連絡先画面の作成
 内容
• オブジェクトストアから連絡先情報表示
 学習の対象
• CSSスプライト
（HTMLテンプレート機能、TabBarと
TabBarButton、バッジ、戻るボタン）
117

122
解説4. HTMLテンプレート(1)
HTMLテンプレートとは
 データをHTMLと連結させる
 画面表示の面倒なプログラミングが不要
+ =
003
朝日商事販売２部
03-1234-1236
末宗秀雄
東京都新宿区
西新宿2−1−1
新宿三井ビルディング

日報履歴画面の作成
 内容
• オブジェクトストアから日報情報表示
• 複数ページを横スクロールでページめくり
• インジケータでページ位置を表示
 学習の対象
（入れ子構造の画面、横スクロール、
ページインジケータ）
131

売上グラフ画面の作成
 内容
• オブジェクトストアから売上と契約をグラフ表示
• 画面が回転したときはグラフの最描画
• ベクターグラフィックス（SVG)機能で描画
• SVG非対応デバイスではCanvas機能で描画
 学習の対象
• 画面回転イベントの検出
（独自イベントの作成、グラフィックスレンダリン
グエンジンの指定、グラフの配色指定、折れ線
と棒グラフの描画、軸ラベルの指定）
140

ログアウト画面の作成
 内容
• 一定時間操作しない場合
ログアウト画面に遷移しデータと
ログアウト画面を除くHTML削除
• 再ログインボタンでアプリのリロード
 学習の対象
• スリープ状態に対応するタイムアウト処理
（オブジェクトストアと共通データの消去、
HTMLの消去）
149

国際化対応(1)
ロケールに応じた表示の自動切り替え
 文字ラベル(文字列リソースを事前準備)
 日付等の書式(準備不要)
 入力Widgetの外観(準備不要)
159

暗号化(1)
ローカルデータの機密保護に有効
 Web storage等の内容を暗号化
 暗号方式としてBlowfishとAESが利用可能
 利用するモジュール
• dojox/encoding/crypto/Blowfish
• dojox/encoding/crypto/SimpleAES
165
暗号化
復号化

タップとスワイプ(1)
タッチ操作の調整とイベント処理が可能
 検出可能なイベントの種類
• タップ(タップ、タップ&ホールド、ダブルタップ)
• スワイプ(スワイプ中、スワイプ終了)
 設定可能パラメータ
• [タップ&ホールド] ホールド時間
• [ダブルタップ] 2回目のタップ位置の誤差範囲とタップの時間間隔
167
スワイプ
スワイプ

計測メータ(1)
高機能なメーターを簡単なHTMLで作成
 変動する数値をビジュアルに表示
 タッチ操作で直感的な数値入力ができる
 4種類の外観を持つメーターの作成が可能
 使用するモジュール
• dojox/dgauges/components/default/CircularLinearGauge
• dojox/dgauges/components/default/HorizontalLinearGauge
• dojox/dgauges/components/default/SemiCircularLinearGauge
• dojox/dgauges/components/default/VerticalLinearGauge
170

HTML5
スマートフォン業務アプリ
開発セミナー(応用)
申し込み受付中
http://www.staffnet.co.jp/dojo/index.html

HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋

Similar to HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋 (20)

HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋