３－ｄ．レコメンデーション機能⑧
35実装 実装
実装 実装
関西 IBM ユーザ研究会 IT 研究会 H23Z1 チーム
36４．考慮点と改善策
a. 操作性を向上する為の秘訣
b. 端末上でのパフォーマンスチューニン
グの秘訣
４－ａ．操作性を向上する為の秘訣①
• タッチ操作向けの設計をする
⇒ jQuery Mobile を使用し、タッチ操作に適した UI を提供
• もっとも頻繁に使用される情報を最上部の近くに配置する
⇒メニューはページの上部に配置
• できるだけログイン要求を遅らせる
⇒お気に入り登録＆アンケート機能以外はログイン不要
• ユーザに要求される入力の手間を最小限にする
⇒検索キーワード・ログイン認証以外は文字入力不要
37
iOS iOS ヒューマンインターフェイスガイドラインより（ ヒューマンインターフェイスガイドラインより（ Apple Apple 社公開） 社公開）
iOS iOS ヒューマンインターフェイスガイドラインより（ ヒューマンインターフェイスガイドラインより（ Apple Apple 社公開） 社公開）
４－ａ．操作性を向上する為の秘訣②
38モバイルのディスプレイの大きさを考慮 モバイルのディスプレイの大きさを考慮 モバイルのディスプレイの大きさを考慮 モバイルのディスプレイの大きさを考慮
• 画面が小さい為、メニューボタンが多い場合、視認性低下
⇒操作方法に悩む可能性あり。
• メニューボタンが小さいと、タッチ操作性低下
⇒誤動作による想定外の挙動。
（ユーザは誤動作の原因が理解できない）
改善策 改善策 改善策 改善策
• メニューは必要最低限に絞り込む
• メニューボタンは大きめに確保
・メニューボタンは５つのみ
・ボタンサイズは、ｊＱｕｅｒｙの デフォルト定義を使わず
ｃｓｓを修正し、大きく配置
初めての実装では・・・
初めての実装では・・・
初めての実装では・・・
初めての実装では・・・
４－ｂ．端末上でのパフォーマンスチューニングの 秘訣①
インターネット
リクエスト
・遷移に時間がかかる
⇒ 携帯がゆえに帯域が細い
⇒ページ遷移の度に通信が発生
レスポンス
39
４－ｂ．端末上でのパフォーマンスチューニングの 秘訣② 改善策 改善策 改善策 改善策
• 複数のページを１つの HTML にまとめ、要素の表示・非表示でページ遷移 を実現
• 詳細ページのコンテンツは Ajax で非同期に取得
サーバとの通信量を極力削減し、ストレスの少ない操作性を実 現！
非表示 表示 非表示
40
４．考慮点と改善策
41紹介いたします！！ デモにて
関西 IBM ユーザ研究会 IT 研究会 H23Z1 チーム
42５．まとめ
a. ｊ Query Mobile を使ってみて b.Node.js を使ってみて
c. クラウド開発をやってみて
５ - ａ．ｊ Query Mobile を使ってみて
43良かったこと 良かったこと 良かったこと 良かったこと
モバイル開発の経験がなくても、短期 間で高品質・高機能な画面設計を実現 できる。
見た目のバリエーションが少なく、 jQuery Mobile を
使用した他のサイトと、デザインが似通ってしまう。
⇒ デザインのカスタマイズは可能。
ただし大掛かりなデザインの変更を行うには
CSS や jQuery Mobile の仕様に関する知識が
必要。
気づき 気づき
気づき 気づき
5- ｂ． Node.js を使ってみて
44良かったこと 良かったこと 良かったこと 良かったこと
サーバサイドを JavaScript で作れるため、
学習コストが低く済み、開発期間短縮にも繋がる
気軽に扱える。
ソースのビルド不要、実行モジュールも軽い
気づき 気づき 気づき 気づき
Java 等に比べて統合開発環境が整っていない
⇒ 今回は環境規模もあまり大きくなかったため、
テキストエディタを使用しての開発を実施した。
シングルスレッド / 非同期 IO での処理の為， CPU 又は ディスクが
ボトルネックになる可能性がある（？）
5-b ． Node.js パフォーマンステスト
45Jmeter を使用して、 Node.js のボトルネックとなる要素を負荷テストで検
出
内容 内容 内容 内容 結果 結果 結果 結果
評価 評価 評価 評価
⇒ メモリ空き容量・ディスクアクセスは変 わらないが
CPUの使用量がアクセス数に 比例して大きくなる ⇒
CPUリソースの割り当てが重要となりえる。
CPU 使用量 空きメモリ
（ MB)
ディスク使用量 スループット
(秒）
レスポンス (ms)
シス テム リソ
｜ス
測 定 結 果
同時６０アクセ 程度でレスポンス ス、スループッ
トが悪化 同時６０アクセ 程度でレスポンス ス、スループッ
トが悪化
5- ｃ．クラウド開発をやってみて
46利点 利点 利点 利点
開発環境の統一が可能
開発環境のメンテナンスが容易
使いたいときに使え、低コストでの開発が可能 ロケーションフリーによるアクセス
気づき 気づき 気づき 気づき
パブリッククラウドの考慮点について意識する必要あり
⇒ ネットワーク遅延
⇒ セキュリティ対策
⇒コスト
最後に・・・
47 目的に応じ、最 適 な開発手法を 検討 する （ネイティブ、ハイブリッド、Ｗｅｂ ）
モバイル開発ツールの活用は有効
「 使 いやすく、ストレスのない 操作」を実現 す る
実 機での動作 確認は 必 須
提言 提言 提言 提言
さぁ！皆さんも今日からモバイル開発を
はじめてみませんか！
ドキュメント内
H23IT研関西Z1iSUC発表資料 20121104 1806
(ページ 35-48)