2013 sguヒューマンインターフェース論0121

ヒューマンインターフェース論Vol.12

そが　としおき曽我　聡起北海道文教大学　外国語学部・国際言語学科

13年7月7日日曜日

ユーザーインターフェース

4章：アニメーション効果

iPhoneアプリケーションのアニメーション効果：

スライド、フリップなど

Webアプリケーションで実現することで、一層、ネイティブアプリに近づく。


4.1ライブラリの助けを借りる

jQTouch:jQuery向けのJavaScriptライブラリ

http://jqtouch.com/

今回は、「学生ポータル」より「sample04」をダウンロードする。

フォルダ内の「headhtml.txt」を開き「index.html」のhead要素内にコピーする。


http://jqtouch.com

http://jqtouch.com

4.1ライブラリの助けを借りる

jQTouch:jQuery向けのJavaScriptライブラリ

jQtouchを使うことで（第3章で作業したような）複雑なJavaScriptやCSSを記述する必要がない。

jQtouch固有のルールを守る。


例4-1: p.56

jQTouchを使う場合、<body>直下の<div>がパネル（一枚の画面）になる。


例4-1: p.56


例4-1: p.56

“toolbar”クラス:

一般的なiPhoneアプリケーションのツールバーに相当する。

“edgetoedge”クラス:

横幅一杯の箇条書


例4-1: p.56


例4-1: p.56

“arrow”クラス:

項目右端に矢印が付く。

toolbar要素内のh1要素:

パネルのタイトル

“button back”クラス:リンク

［戻る］ボタンとして表示、機能する。


例4-1: p.56


例4-1: p.56

「学生ポータル」より「sample04」をダウンロードする。

フォルダ内の「headhtml.txt」を開き「index.html」のhead要素内にコピーする。


例4-2: p.57

jQTouchを利用するコード:

ライブラリやCSSへのリンクと初期化スクリプト。

“index.html”に追加。


4.3:［日付一覧］パネル, p.59

日付のリスト表示。

テキストを参考にしてソースコードを “index.html”に追加。


4.3:［日付一覧］パネル, p.60

［日付一覧］パネルへのリンクの追加。

テキストを参考にして、入力・追加する。


4.4:［その日の食べ物］パネル, p.61 “slideup”クラス：

リンク先のパネルは下からスライドしながら現れる。

“display:none”スタイル

要素が非表示になる。

「date.txt」ファイルよりコピーし、 “index.html”に追加する。


4.5:［新規エントリ］パネル,

p.62［キャンセル］ボタン： “button cancel”クラス

パネルが現れた時と逆方向のアニメーション効果とともに、パネルが非表示になる。

input type = “text”…：入力項目

input type = “submit”…：送信ボタン

「createEntry.txt」ファイルよりよりコピーし “index.html” に追加。


4.6:［設定］パネル, p.65

［設定］ボタン： “button flip”クラス

パネルを裏返すアニメーション効果とともに、新しいパネルが実行される。

「settings.txt」よりコピーし追加。

4.7（p.67）でソースコードを確認し、index.htmlに入力後動作をチェックしてみる。


2013 sguヒューマンインターフェース論0121

Education