第１１回講義スライド。 戻るボタン等の詳細は現在の環境では動作しないため内容の確認をするに止めた。

1. ヒューマンインターフェース論
Vol.11
そが としおき
曽我 聡起
北海道文教大学 外国語学部・国際言語学科
13年6月30日日曜日

2. 3.3: ちょっとした付加機能（p.
36）
例3−4：読み込み中を示すインジケータ
重要なインターフェース処理：p.36参照
13年6月30日日曜日

3. 3.3: ちょっとした付加機能（p.
36）
例3−4：読み込み中を示すインジケータ
loadPage関数開始時にインジケータを読込む。（追記）
$('body').append('<div id="progress">読み込み中…</
div>');
hijackLinks関数終了時に削除する。（追記）
$(‘#progress’).remove();
13年6月30日日曜日

4. 3.3: ちょっとした付加機能（p.
37）
例3−5：読み込み中を示すインジケータ
インジケータ用のCSS（#progress）を追加する
（#progress.txtより）。
動作確認は一瞬だけ。
早すぎる場合はremove()を取り除く。
13年6月30日日曜日

5. 3.3: ちょっとした付加機能（p.
37）
13年6月30日日曜日

6. ユーザーインターフェース
13年6月30日日曜日

7. ユーザーインターフェース
ヒューマンインターフェイスの原則：iOSヒューマンインター
フェイスガイドライン, pp.20
「フィードバック」に相当する。
「フィードバックは、アクションを受け付けたことをユーザ
に知らせたり、処理が発生していることを ユーザに確信さ
せたりします。ユーザは、コントロールを操作しているとき
は即座のフィードバック を期待し、処理時間が長くかかっ
ているときには状況の最新情報が得られると助かります。」
13年6月30日日曜日

8. ユーザーインターフェース
p.36: ページの読み込み中、そのことをユーザーに知らせ
る。
図3-1(p.37): インジケータの表示。これがないとアプリケ
ーションが応答しなかったように見え、ユーザーを不愉
快にさせてしまう。
13年6月30日日曜日

9. ユーザーインターフェース
例3-7(p.39): タイトルが長くヘッド領域に収まらないページ
“ellipsis”（省略記号）を追加。
13年6月30日日曜日

10. ユーザーインターフェース
参考：iOSヒューマンインターフェイスガイドライン, “コンテンツビ
ュー>テーブルビュー” pp.172
テキストラベルは表示が切り詰められるのを避けるためできる限
り簡潔にする。
文字が切り詰められ てしまうと、読み取って理解することが難
しくなる可能性があります。テキストの切り詰めはすべてのテ
ーブルセルスタイルで自動的に行われますが、セルスタイルや
切り詰めが発生する場所によっては多かれ少なかれ問題となり
ます。
13年6月30日日曜日

11. ユーザーインターフェース
参考： iOS UI要素の使用方法のガイドライン, pp.135
アプリケーションのユーザインターフェイスを設計
する際には、ユーザは、標準的なビューとコントロ
ー ルの動作が組み込みのアプリケーションでの動作
と同じであることを期待している点を必ず覚えてお
いてください。
13年6月30日日曜日

12. ユーザーインターフェース
例3-8(p.41): 新しいページを読込み、表示した際にページ
先頭に強制移動させる。
scrollTo関数
13年6月30日日曜日

13. 改定：例3-9, URLチェック（p.
41）
ここで行っているURLチェックは実際にWebサイトにフ
ァイルを配置することが前提となっているため、授業内
では省略する。
第三章の以降について解説する。
13年6月30日日曜日

14. ユーザーインターフェース
例3-10(p.42): ［戻る］ボタンの作成
以前表示したページに戻る方法を提供する。
iphone.jsソースコードの大幅修正
iphone.cssにボタンデザインを追加
ただし，現在の環境では動作しないためインターフェ
ース的視点から検証するに止める。
13年6月30日日曜日

15. 例3-10(p.42): ［戻る］ボタ
ンの作成(JavaScript)
表示中のページのURLとタイトル（ボタン名に使用）を
配列（前と現在）に記録して実現。
リンクをクリックした際に配列を入れ替える。
ボタン表示の基本は「メニュー」ボタン(p.26)と同じ。
13年6月30日日曜日

16. 例3-10(p.42): ［戻る］ボタン
の作成(JavaScript)
例3-10(p.42): ［戻る］ボタンの作成
iphone.jsソースコードの大幅修正
13年6月30日日曜日

17. 非対称のボタンデザイン。
「バー」MobileHIG（Apple）, p.135
「特別に定義された外観と動作を持つUI要素」
「ナビゲーションバー」, 同 p.137
「情報階層内の移動を可能にする」
例3-11(p.45): ［戻る］ボタン
のユーザーインターフェース
13年6月30日日曜日

18. 非対称のボタンデザイン。
「バー」MobileHIG（Apple）, p.135
「特別に定義された外観と動作を持つUI要素」
「ナビゲーションバー」, 同 p.137
「情報階層内の移動を可能にする」
例3-11(p.45): ［戻る］ボタン
のユーザーインターフェース
13年6月30日日曜日

19. 非対称のボタンデザイン。
「バー」MobileHIG（Apple）, p.135
「特別に定義された外観と動作を持つUI要素」
「ナビゲーションバー」, 同 p.137
「情報階層内の移動を可能にする」
例3-11(p.45): ［戻る］ボタン
のユーザーインターフェース
13年6月30日日曜日

20. 非対称のボタンデザイン。
「バー」MobileHIG（Apple）, p.135
「特別に定義された外観と動作を持つUI要素」
「ナビゲーションバー」, 同 p.137
「情報階層内の移動を可能にする」
例3-11(p.45): ［戻る］ボタン
のユーザーインターフェース
13年6月30日日曜日

21. ボタンが四角形でないための修正：
-webkit-tap-highlight-color: rgba(0,0,0,0);
例3-12(p.46): タップ時に表
示される四角形を消すCSS
13年6月30日日曜日

22. ユーザーインターフェース
例3-13(p.47): ボタンが押されてから直前のページの内容
が表示されるまでの間、ユーザーのイライラを防ぐため
に、タップと同時にボタンの外見をクリックされたよう
に変更する。
13年6月30日日曜日

23. 「例3-13, p.47」より、iphone.cssに追加。
例3-13(p.47): クリック時に［戻
る］ボタンの画像を差し替えるCSS
13年6月30日日曜日

24. テキスト（p.48）を参考に、iphone.jsにaddClass関数な
どを追記する。
例3-13(p.48): クリック時に［戻る］
ボタンの画像を差し替えるjsの追加
13年6月30日日曜日

25. 省略：
iPhone, iPod touchなどのiOSデバイスでのみ操作可能。
ユーザーインターフェース：
アイコンのデザイン、サイズなどはガイドラインに準拠。
3.5 ホーム画面へのアイコン
の追加（p.48）
13年6月30日日曜日

26. 省略：
iPhone, iPod touchなどのiOSデバイスでのみ操作可能。
ブラウザ上部（104ピクセル分）の表示を隠す。
ユーザーインターフェース：
ブラウザ上部によるコントロール不能。
Ajaxを使い、ハイパーリンクをページ内で完結する。
3.6 フルスクリーンモード
（p.51）
13年6月30日日曜日

27. 3.6 フルスクリーンモード
（p.51）
13年6月30日日曜日

28. 3.6 フルスクリーンモード
（p.51）
13年6月30日日曜日

29. 3.6 フルスクリーンモード
（p.51）
13年6月30日日曜日