第九回講義時使用スライドです。

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

2. “ヒューマンインターフェースの原則”
（iOSヒューマンインターフェイスガイドライン,
Apple）
アクティビティインジケータ、日付と時刻のピッカー、
…、角丸矩形ボタン（pp.162）、…
バー、コンテンツビュー、Alert、…、 コントロール
（pp.155）、…
iOS UI要素の使用方法のガイドライン（pp.117）
13年6月16日日曜日

3. “ヒューマンインターフェースの原則”
（iOSヒューマンインターフェイスガイドライン,
Apple）
iOS UI要素
バー
コンテンツビュー
Alert
コントロール
…
アクティビティインジケータ
日付と時刻のピッカー
角丸矩形ボタン
ヒューマンインターフェースフェイスの原則
13年6月16日日曜日

4. “ヒューマンインターフェースの原則”
（iOSヒューマンインターフェイスガイドライン,
Apple）
ヒューマンインターフェースフェイスの原則
ユーザがどのように考え、どのように作業するかに基づき、
ユーザインターフェイスは
魅力的で、
シンプルで、
論理的でなければならない。
アプリケーションの
機能性が上がり、
ユーザの愛着心も高まります。
13年6月16日日曜日

5. 実際の例：
テキスト例のように、同一コンテンツをスマートフォン
用にCSSとJavaScriptで変更しているWebAppは増えてい
る。
例：Amazon
例：Touch Lab
独自インターフェースにも注目。
13年6月16日日曜日

6. 実際の例：
13年6月16日日曜日

7. 実際の例：
13年6月16日日曜日

8. 2.4 jQueryによる簡単なふるま
いの追加
ページへの動的な振る舞いの追加
Header：ナビゲーション部分（自己紹介∼ソフトウェ
ア開発）に動的な振る舞いを追加
CSS+JavaScrript(jQueryを利用（p.11参照）)
13年6月16日日曜日

9. 2.4 jQueryによる簡単なふるま
いの追加
iPhoneでアクセスした際（ウィンドウ幅で判断）「メニ
ュー」ボタンを追加する。
13年6月16日日曜日

10. 2.4 jQueryによる簡単なふるま
いの追加
「メニュー」ボタンの構造：P.24-25
画像とテキスト（「メニュー」）を併用して表現。
CSS（id “header div.leftButton”および “header
div.pressed”）で適用。
デザインは "HIガイドライン"(アップル)を参照。
バー > NavigationBar
13年6月16日日曜日

11. 2.4 jQueryによる簡単なふるま
いの追加
javaSceipt:p.25-26
宣言部分(<script type=…>)を追加。
ここでは、二つのJS（iphone.jsとjquery.js）を使用す
る。
テキストエディタを使い、iphone.jsの関数部分を作成
して「iphone.js」ファイルとしてhtmlと同一階層に配
置する（拡張子.js）。
13年6月16日日曜日

12. 2.4 jQueryによる簡単なふるま
いの追加
javaSceipt:p.26
addClass(class)：指定した要素に、CSSクラスを追加
する。
$('#header ul').addClass('hide');
13年6月16日日曜日

13. 2.4 jQueryによる簡単なふるま
いの追加
javaSceipt:p.26
addClass(class)：指定した要素に、CSSクラスを追加
する。
$('#header ul').addClass('hide');
例：
<div id="header">
<h1><a href="./">Jonathan Stark</a></h1>
<div id="utility">
<ul>
<li><a href="about.html">自己紹介</a></li>
13年6月16日日曜日

14. 2.4 jQueryによる簡単なふるま
いの追加
javaSceipt:p.26
addClass(class)：指定した要素に、CSSクラスを追加
する。
$('#header ul').addClass('hide');
例：
<div id="header">
<h1><a href="./">Jonathan Stark</a></h1>
<div id="utility">
<ul>
<li><a href="about.html">自己紹介</a></li>
例：
<div id="header">
<h1><a href="./">Jonathan Stark</a></h1>
<div id="utility">
<ul class= “hide” >
<li><a href="about.html">自己紹介</a></li>
#header ul.hide {
display: none;
}→ここの箇条書項目（ul）は全て消える。
13年6月16日日曜日

15. 2.4 jQueryによる簡単なふるま
いの追加
javaSceipt:p.26
append(content)：各要素に引数で指定したコンテン
ツを追加する。
13年6月16日日曜日

16. 2.4 jQueryによる簡単なふるま
いの追加
例：
<div id="header">
<h1><a href="./">Jonathan Stark</a></h1>
13年6月16日日曜日

17. 2.4 jQueryによる簡単なふるま
いの追加
例：
<div id="header">
<h1><a href="./">Jonathan Stark</a></h1>
例：
<div id="header">
<div class="leftButton" onclick="toggleMenu()">
メニュー</div>
<h1><a href="./">Jonathan Stark</a></h1>
「メニュー」というコンテンツに、CSSクラス
“leftButton”を適用し、クリックした際には
“toggleMenu”という関数を呼び出す。
13年6月16日日曜日

18. 2.4 jQueryによる簡単なふるま
いの追加
javaSceipt:p.26
togleClass(class)：指定したCSSクラスが要素に無け
れば追加し、あれば削除する。
$('#header ul').toggleClass('hide');
$('#header .leftButton').toggleClass('pressed');
13年6月16日日曜日

19. 2.4 jQueryによる簡単なふるま
いの追加
javaSceipt:p.26
togleClass(class)：指定したCSSクラスが要素に無け
れば追加し、あれば削除する。
$('#header ul').toggleClass('hide');
$('#header .leftButton').toggleClass('pressed');
「メニュー」がクリックされる度に、 以下
が追加・削除される。
・“ul”の “hide”
・class= “leftButton”と “pressed”
（ボタンのデザインがクリックされる度に
変わる）
13年6月16日日曜日

20. 2.4 jQueryによる簡単なふるま
いの追加
CSSに “pressed”クラスを追加：p.27
ボタンを押した際のデザインを変更する。
13年6月16日日曜日