03. タッチインターフェースUI
内容:
・JavaScript + CSS + HTML5 により実現される、スマートフォン用のタッチインターフェースを前提としたUI サービスの試作
・jQuery を利用したアニメーションにより、ユーザにアプリの動作を直感的に伝える工夫
・ライブラリを利用した、アプリ制作のコストダウン
参考サイト:
サンプルで学ぶTwitter Bootstrapの使い方
http://ascii.jp/elem/000/000/807/807712/index-3.html
Webサービス開発者のためのTwitter Bootstrap入門 ― 第1回
いまさら聞けない「Twitter Bootstrap」とは?
http://ascii.jp/elem/000/000/795/795948/
Bootstrap のサンプルサイト
実働するDemoと テンプレートファイルをダウンロード可能
カスタマイズして、そのまま自分のサービスに利用 や パーツ利用の勉強用に。
Bootstrapフレームワークを使った、すごい無料HTMLテンプレート素材50個まとめ
制作課題:
・レスポンシブデザインを利用した、スマートフォンの画面サイズに自動的にフィットするUI画面の作成
・画面遷移にアニメーション効果とスワイプ操作を利用
ライブラリの入手と設定:
DLした zip ファイルを展開、
ユーザホームに bootstrap のフォルダが出来る。
以後、この中に作業ファイルを保存。
制作は、 テキストエディタ Terapad を利用する。
公式サイトの basic template を Terapad にコピペ、ファイル名は index.html
文字コードは utf-8 を指定して保存すること
言語設定を、
<html lang="ja">
に変更。
本文の メッセージ や タイトル(タグ) を学籍番号入りのものに適当に編集。
保存して、ブラウザで表示確認。
Webページの幅は、デバイスサイズに自動フィットする設定。
<meta name="viewport" content="width=device-width, initial-scale=1">
bootstrap の Grip システムを利用して、3カラムレイアウトの画面を作成する。
header 領域
main 領域
3カラムに分割
左 中央 右
footer 領域
で構成する。
<div id="header" style="background:red;"> header </div>
<div class="row">
<div class="col-sm-3" style="background:gray;"> 左 </div>
<div class="col-sm-6" style="background:green;"> 中央 </div>
<div class="col-sm-3" style="background:orange;"> 右 </div>
</div>
<div id="footer" style="background:blue;"> footer </div>
表示を確認。
コンテナの設定:
領域に配置する、テキスト や UI部品 の配置方法を指定する。
・固定レイアウト
コンテンツの幅を固定して画面の中央に表示する class=container を指定
・リキッドレイアウト(流動レイアウト)
ブラウザーのサイズにあわせてコンテンツ幅を調整する。 class=container-fuild を指定
固定レイアウトの指定:
ヘッダー領域
<div id="header" class="container" style="background:red;"> header </div>
フッター領域
<div id="footer"
class="container" style="background:blue;"> footer </div>
メイン領域は div で3カラム全体を囲んで コンテナ化
<div class="container">
カラム指定のタグ
</div>
ブラウザのサイズを変更して、オートフィットの効果を確認(デバイスのサイズのエミュレートの代わり)
レスポンシブデザイン → 画面のサイズに合わせて UI レイアウトを 自動変更
bootstrap の グリッドシステムの資料参照
デザイン方針: 画面は 12マスのグリッドで構成されている。 サイズの調整は合計12になる様に指定。
<div class="col-sm-3 hidden-xs
" style="background:gray;"> 左 </div>
<div class="col-sm-6 col-xs-6" style="background:green;"> 左 </div>
<div class="col-sm-3 col-xs-6" style="background:orange;"> 左 </div>
テーブルのデザイン
フォームのデザイン
ドロップダウンメニュー bootstrap のサイトのサンプル参照
動画参照
Glyphicon とボタン のデザイン
http://getbootstrap.com/components/
ドロップダウンメニュー
モーダルウインドウの設置
作業例)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>3112789 bootstrap練習</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>こんにちは。312789 です。</h1>
<div id="header" class="container" style="background:red;"> header </div>
<div class="container">
<div class="row">
<div class="col-sm-3 hidden-xs" style="background:gray;">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
<span class="glyphicon glyphicon-heart"></span>科目
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">プログラム</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">データベース</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">基本情報処理</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Top</a></li>
</ul>
</div>
</div>
<div class="col-sm-6 col-xs-6" style="background:green;">
<table class="table">
<thead>
<tr><th>学籍番号</th><th>得点</th></tr>
</thead>
<tbody>
<tr><td>こばし</td><td>90</td></tr>
<tr><td>はせがわ</td><td>80</td></tr>
<tr><td>たちか</td><td>70</td></tr>
</tdoby>
</table>
</div>
<div class="col-sm-3 col-xs-6" style="background:orange;">
<a data-toggle="modal" href="#myModal" class="btn btn-primary">コメント</a>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">My Modal</h4>
</div>
<div class="modal-body">
こんにちは!
</div>
<div class="modal-footer">
<button class="btn btn-primary">OK!</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer" class="container" style="background:blue;"> footer </div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
・デバッグについて
UIがコードを組み込まれて複雑なHTMLファイルのデバッグには、Google Chrome のデバッグ機能を利用して、
divの指定範囲を確認するとよい。