2013 sguヒューマンインターフェース論0121
Post on 31-May-2015
137 Views
Preview:
DESCRIPTION
TRANSCRIPT
ヒューマンインターフェース論Vol.12
そが としおき曽我 聡起北海道文教大学 外国語学部・国際言語学科
13年7月7日日曜日
ユーザーインターフェース
4章：アニメーション効果
iPhoneアプリケーションのアニメーション効果：
スライド、フリップなど
Webアプリケーションで実現することで、一層、ネイティブアプリに近づく。
13年7月7日日曜日
4.1ライブラリの助けを借りる
jQTouch:jQuery向けのJavaScriptライブラリ
http://jqtouch.com/
今回は、「学生ポータル」より「sample04」をダウンロードする。
フォルダ内の「headhtml.txt」を開き「index.html」のhead要素内にコピーする。
13年7月7日日曜日
4.1ライブラリの助けを借りる
jQTouch:jQuery向けのJavaScriptライブラリ
jQtouchを使うことで（第3章で作業したような）複雑なJavaScriptやCSSを記述する必要がない。
jQtouch固有のルールを守る。
13年7月7日日曜日
例4-1: p.56
jQTouchを使う場合、<body>直下の<div>がパネル（一枚の画面）になる。
13年7月7日日曜日
例4-1: p.56
13年7月7日日曜日
例4-1: p.56
13年7月7日日曜日
例4-1: p.56
“toolbar”クラス:
一般的なiPhoneアプリケーションのツールバーに相当する。
“edgetoedge”クラス:
横幅一杯の箇条書
13年7月7日日曜日
例4-1: p.56
13年7月7日日曜日
例4-1: p.56
13年7月7日日曜日
例4-1: p.56
“arrow”クラス:
項目右端に矢印が付く。
toolbar要素内のh1要素:
パネルのタイトル
“button back”クラス:リンク
［戻る］ボタンとして表示、機能する。
13年7月7日日曜日
例4-1: p.56
13年7月7日日曜日
例4-1: p.56
13年7月7日日曜日
例4-1: p.56
13年7月7日日曜日
例4-1: p.56
「 学生ポータル」より「sample04」をダウンロードする。
フォルダ内の「headhtml.txt」を開き「index.html」のhead要素内にコピーする。
13年7月7日日曜日
例4-2: p.57
jQTouchを利用するコード:
ライブラリやCSSへのリンクと初期化スクリプト。
“index.html”に追加。
13年7月7日日曜日
4.3:［日付一覧］パネル, p.59
日付のリスト表示。
テキストを参考にしてソースコードを “index.html”に追加。
13年7月7日日曜日
4.3:［日付一覧］パネル, p.60
［日付一覧］パネルへのリンクの追加。
テキストを参考にして、入力・追加する。
13年7月7日日曜日
4.4:［その日の食べ物］パネル, p.61 “slideup”クラス：
リンク先のパネルは下からスライドしながら現れる。
“display:none”スタイル
要素が非表示になる。
「date.txt」ファイルよりコピーし、 “index.html”に追加する。
13年7月7日日曜日
4.5:［新規エントリ］パネル,
p.62［キャンセル］ボタン： “button cancel”クラス
パネルが現れた時と逆方向のアニメーション効果とともに、パネルが非表示になる。
input type = “text”…：入力項目
input type = “submit”…：送信ボタン
「createEntry.txt」ファイルよりよりコピーし “index.html” に追加。
13年7月7日日曜日
4.6:［設定］パネル, p.65
［設定］ボタン： “button flip”クラス
パネルを裏返すアニメーション効果とともに、新しいパネルが実行される。
「settings.txt」よりコピーし追加。
4.7（p.67）でソースコードを確認し、index.htmlに入力後動作をチェックしてみる。
13年7月7日日曜日
top related