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画面の作成

・画面遷移にアニメーション効果とスワイプ操作を利用

ライブラリの入手と設定：

http://getbootstrap.com/

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 システムを利用して、３カラムレイアウトの画面を作成する。

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 で３カラム全体を囲んでコンテナ化

<div class="container">

カラム指定のタグ

    </div>

ブラウザのサイズを変更して、オートフィットの効果を確認（デバイスのサイズのエミュレートの代わり）

レスポンシブデザイン → 画面のサイズに合わせて UI レイアウトを自動変更

bootstrap のグリッドシステムの資料参照

デザイン方針：画面は１２マスのグリッドで構成されている。サイズの調整は合計１２になる様に指定。

<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 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 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の指定範囲を確認するとよい。

Page updated

Google Sites

Report abuse