nkjmkzk.net

powered by Kazuki Nakajima

AngularJSではじめるHTML5開発 – Part3 Bootstrapの適用

Part2の続きです。

今回はBootstrapを適用してアプリを現代風にイメチェンします。検証作業も見た目が質素だとやる気が削がれるので外観をある程度整えておくのはとても重要です。

まず今回開発する部分をデモでみておきましょう。

デモ

では実装へ。

Bootstrapをインポートする

BootstrapもAngularJS同様にCDNでホスティングされているのでそちらを指定して読み込みます。BootstrapにはJavascriptライブラリも用意されていますが、こちらはjQueryを必要としますので合わせて読み込みます。

<apex:page showHeader="false" standardStyleSheets="false" applyBodyTag="false" applyHtmlTag="false" docType="html-5.0" >

<html ng-app="ngbootcamp">
<head>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.min.css"></link>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"></script>
	<c:RemoteTK />

たったこれだけ。

HTMLにBootstrapを適用していく

Bootstrapには非常に多くのスタイル、そしてコンポーネントが用意されています。

グリッドシステムやサイドバー等をBootstrapに依存して構成するにはBootstrapの記法にしたがってマークアップを記述していく必要があります。

今回はまずBootstrapのグリッドシステムを利用して画面を縦2列に分割し、ゲスト一覧を左列に表示するようにしてみます。

<body ng-controller="guestCtl">
	<div class="container" style="margin-top:20px;">
		<div class="row">
			<div class="col-md-4" style="border: solid 1px #eee;">
				<div ng-repeat="guest in guests">
					{{guest.Name}}
				</div>
			</div>
			<div class="col-md-8" style="border: solid 1px #eee;">
				&nbsp;
			</div>
		</div>
	</div>
</body>

Previewボタンをクリックして画面を確認してみましょう。

2 column

ちゃんと4:8で分割されていますね。

マークアップの構造をみていきましょう。
divで階層構造が追加されています。クラスでみると、container > row > col-md-* という具合に3層あります。

まずcontainerはグリッドシステムを利用する際、最上位に必要なエレメントとなります。

次にrowですが、これは文字通り行を意味しています。この行の中に最大12列を作成することができます。

最後にcol-md-*ですが、これは列をあらわしており、最後に幅(列数)を意味する12以下の数字を指定します。今回はcol-md-4とcol-md-8と指定していますので、画面が4:8で分割されます。また真ん中のmdの部分は想定するデバイス(画面サイズ)を意味しておりxs / sm / md / lgの中から選択します。

例えばmdだと、指定通り4:8で画面が分割されるためには最低992pxの画面幅が必要になり、それ以下の画面サイズでは画面は分割されず縦に並びかえられます。これはレスポンシブデザインを意識した仕様です。

また、col-md-*の要素にborderスタイルを追加していますが、これは画面の構成を確認するために一時的に指定しています。

次にList Groupを適用してゲスト一覧にスタイルを適用していきます。

<body ng-controller="guestCtl">
	<div class="container" style="margin-top:20px;">
		<div class="row">
			<div class="col-md-4">
				<div class="panel panel-default">
					<div class="panel-heading">
						ゲスト
					</div>
					<div class="list-group">
						<a class="list-group-item" href="#" ng-repeat="guest in guests">{{guest.Name}}</a>
					</div>
				</div>
			</div>
			<div class="col-md-8">
				&nbsp;
			</div>
		</div>
	</div>
</body>

Previewボタンをクリックして画面を確認してみます。

list group applied

こちらは特に解説のしようがないのですが、Bootstrapの記法でこう記述するとリストがこのように表示される、ということですね。より詳しくはBootstrapドキュメントの該当チャプターを参照ください。
http://getbootstrap.com/components/#list-group

今回はここまで。現時点でのindexファイルは下記のようになっています。

<apex:page showHeader="false" standardStyleSheets="false" applyBodyTag="false" applyHtmlTag="false" docType="html-5.0" >
 
<html ng-app="ngbootcamp">
<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.min.css"></link>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"></script>
    <c:RemoteTK />
    <script>
    var ngbootcamp = angular.module('ngbootcamp', []);
    
    ngbootcamp.controller('guestCtl', function($scope){
        var force = new remotetk.Client();
        var soql = "select Id, Name from guest__c";
        force.query(
            soql,
            function(result){
                $scope.guests = result.records;
                $scope.$apply();
            },
                function(result){
                console.log(result);
            }
        );
    });
    </script>
</head>
<body ng-controller="guestCtl">
    <div class="container" style="margin-top:20px;">
        <div class="row">
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        ゲスト
                    </div>
                    <div class="list-group">
                        <a class="list-group-item" href="#" ng-repeat="guest in guests">{{guest.Name}}</a>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                &nbsp;
            </div>
        </div>
    </div>
</body>
</html>
 
</apex:page>

以降のHTMLは常にBootstrapをベースに記述していきます。

次回はゲストを選択するとその詳細情報が右側のエリアに表示されるというインタラクティブな仕組みを構築していきます。

 

関連情報

without comments

Written by 中嶋 一樹

2月 8th, 2014 at 4:17 pm

Leave a Reply