Go to Qiita Advent Calendar 2024 Top
LoginSignup
16
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@mude(Müde Zweite)

bowerを用いてMaterial DesignなAngularJSアプリを書き始めるに至るまで

Last updated at Posted at 2015-10-03

(10/6 フォントに関する追記あり。)

AngularJSのアプリケーションを作りたいけど、デザインも今っぽくしたいのでマテリアルデザインにしたい。そこで、Angular Materialを使う、という話。

Angular Materialのページは下記の通り。

前提条件は、node.jsとgitクライアントがインストールされていること

bowerをインストール

bowerはフロントエンド開発に必要なパッケージをインストールしてくれるという優れもの。

bowerについては、こちらの記事が詳しい。

インストールは下記の通り。

npm install bower -g

-gオプションがあればグローバルインストール、なければカレントディレクトリにインストールされる。
グローバルインストールすれば、プロジェクトに関わらずbowerが使えるようになるので、グローバルインストールすると良いと思う。

ライブラリをインストール

Angular Materialを用いると、Material DesignなAngularアプリケーションが作れるので、このライブラリを使いたいと思う。

本当はAngular Materialを動かすためには、AngularJS本体に加えて、angular-animate、angular-ariaという追加のモジュールが必要なのだけど、bowerを使ってangular-materialをインストールするとそれらも一緒にインストールされて便利。

また、bower.jsonにパッケージ情報を含むことができる。bowerのある環境でbower.jsonを使ってパッケージをインストールすることができるので、リポジトリにはbower.jsonだけあれば、あとは開発者がbowerで各々環境を整えることが可能となる。便利。

あと、bowerを実行すると、実行したディレクトリの直下にbower_componentsというディレクトリが作成され、そこの下に色々インストールされる。なんとなくライブラリのインストール場所とbower.jsonの場所は分けたいので、.bowerrcというファイルを作って、そこでインストール先の設定なども書いちゃおうと思う。

.bowerrcについては、下記の記事が詳しい。
http://qiita.com/sys1yagi/items/0a7b13395cf5c16ecd57

開発用ディレクトリの作成と、.bowerrcの作成

とりあえず開発用ディレクトリを一つ作って、そこに.bowerrcを保存する。また、開発用ディレクトリ直下にpublicというディレクトリを作成する。.bowerrcの中身は、下記の感じで良いと思う。

{
  "directory": "public/components",
  "json": "bower.json"
}

開発のための設定ファイル類は開発用ディレクトリ直下に、実際に公開するページはpublic以下に置くことを考える。そして、必要なライブラリはpublic/components以下に置けば、public以下をデプロイすればサイトが見られるということになる、というディレクトリ構成にした。

+ [開発用ディレクトリ]
    + .boewrrc
    + [public]

bower.jsonの作成

コマンドプロンプトを起動して、カレントディレクトリを開発用ディレクトリにする。その後、次のコマンドを打つ。

bower init

質問が表示されるが、とりあえず全ての質問をデフォルトで答えて良い。初期インストールするパッケージも何も選択肢なくて良い。Looks good?の質問に答えれば(単にエンターキーを押せば良い)、bower init実行時のディレクトリ直下にbower.jsonが作成される。

これで、開発用ディレクトリの直下にbower.jsonが作成された。

+ [開発用ディレクトリ]
    + .boewrrc
    + bower.json
    + [public]

angular-materialのインストール

bower install angular-material --save

--saveオプションがあると、bower.jsonのdependenciesにangular-materialが追記される。ということは、このようなbower.jsonがある場所でbower installをすれば、やはりangular-materialがインストールされるということになる。チームで開発したり、開発用のマシンが複数あるときは便利。

また、いきなりangular-materialをインストールしても、必要なライブラリも落としてきてくれるので便利。

+ [開発用ディレクトリ]
    + .boewrrc
    + bower.json
    + [public]
        + [components]
            + [angular]
            + [angular-animate]
            + [angular-aria]
            + [angular-material]

なんか書いてみる

のコードをコピって来るのだけど、ちょっといろいろ手を加えないといけない…。

hello.jsの作成

var app = angular.module('StarterApp', ['ngMaterial']);

app.controller('AppCtrl', ['$scope', '$mdSidenav', function($scope, $mdSidenav){
  $scope.toggleSidenav = function(menuId) {
    $mdSidenav(menuId).toggle();
  };
 
}]);

をhello.jsとして、public以下に保存する。

+ [開発用ディレクトリ]
    + .boewrrc
    + bower.json
    + [public]
        + hello.js
        + [components]
            + [angular]
            + [angular-animate]
            + [angular-aria]
            + [angular-material]

hello.cssの作成

同様に

.md-toolbar-tools h1 {
  font-size: inherit;
  font-weight: inherit;
  margin: inherit;
}

をhello.cssとして、public以下に保存する。

+ [開発用ディレクトリ]
    + .boewrrc
    + bower.json
    + [public]
        + hello.js
        + hello.css
        + [components]
            + [angular]
            + [angular-animate]
            + [angular-aria]
            + [angular-material]

index.htmlの作成

とりあえず、htmlのソースを全コピーして、貼り付けてindex.htmlでpublic以下に保存。

あとは、body要素内に

<link rel="stylesheet" href="./hello.css">

を追加して、bodyの閉じタグのすぐ上に

<script src="./hello.js"></script>

を追加する。

これでとりあえず、ヘッダにHello Worldと書かれたページが表示される。

+ [開発用ディレクトリ]
    + .boewrrc
    + bower.json
    + [public]
        + hello.js
        + hello.css
        + index.html
        + [components]
            + [angular]
            + [angular-animate]
            + [angular-aria]
            + [angular-material]

index.htmlの修正

CDNからjsファイルやcssファイルを取ってきているところを、./components/以下のものから取ってくるように修正。

もっとindex.htmlの修正

せっかくなので、もう少し動きのあるものを貼り付けたい。タブなんかが分かりやすくて良いと思う。

bodyタグの直下から、<!-- Angular Material Dependencies -->までを一気に消して、その代わりに、
次のソースをペーストする。

<div ng-cloak>
  <md-content class="md-padding">
    <md-tabs md-dynamic-height md-border-bottom>
      <md-tab label="one">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab One</h1>
          <p>Hello</p>
        </md-content>
      </md-tab>
      <md-tab label="two">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Two</h1>
          <p>Hello, hello.</p>
        </md-content>
      </md-tab>
      <md-tab label="three">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Three</h1>
          <p>3 + 4 = {{3+4}}</p>
        </md-content>
      </md-tab>
    </md-tabs>
  </md-content>
</div>

タブをクリックすると、クリックした場所から円が広がるアニメーションが表示されるし、Tab ThreeにはAngular式を入れておいた。ちゃんとAngularJSが動いていれば、3 + 4 = 7 と表示される。

まとめ

bowerを使ってAngular Materialをインストールできた。とても便利。

追記(直しどころ)

https://material.angularjs.org/0.11.2/#/getting-started のソースは、Angular Materialの0.9.4に書かれたものなのでソースが古い。具体的にはフォントが古いので修正する。

フォントをRobotoDraftから、Robotoに変更する。

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">

また、ブラウザの幅を小さくすることで、サイドナビゲーションの表示のon/offができるようになる。ブラウザの幅を変えると変化があるとは、気づかなかった…。

16
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
16
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?