Angular-Materialを動かすための最小限テンプレートサンプル

最近Angular-Material（以下「AM」）を使ってみている。

material.angularjs.org

AMはまだ開発の初期段階ではあるものの、すでに結構使える状態ではないかと思う。

しかし、まだドキュメントが不十分でとっつきにくい。デモページでソースコードが見られるようになってはいるものの、headの終端から始まっていてコード全体が見通しにくい。


結局、AMのリポジトリをクローンしてデモの中身を直接見に行かなければならなかった。

そこで、ここにAMを動かすための最小限テンプレートの例を書いておきたいと思う。最終的にはこのように表示される。



Angular-Materialコンポーネントのインストール

まずは適当な場所にプロジェクトディレクトリをつくり、AMをインストールする。

# cd ~/git
# mkdir AngularMaterialMin
# cd AngularMaterialMin
# bower install angular-material

これで必要なモジュールが全て揃う。


index.html
<!DOCTYPE html>
<html ng-app="app" ng-controller="AppCtrl">
  <head>

    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

    <title>AngularMaterialMin</title>

    <!-- CSS -->
    <link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css">
    <link rel="stylesheet" type="text/css" href="css/app.css" />

    <!-- JS -->
    <script src="bower_components/hammerjs/hammer.min.js"></script>
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-animate/angular-animate.min.js"></script>
    <script src="bower_components/angular-aria/angular-aria.min.js"></script>
    <script src="bower_components/angular-material/angular-material.min.js"></script>
    <script src="js/app.js"></script>

  </head>
  <body layout="vertical">

    <!-- ツールバー -->
    <md-toolbar>
      <div class="md-toolbar-tools">
        <span flex>AngularMaterialMin</span>
        <md-button aria-label="ボタン" ng-click="onClickBtn();">ボタン</md-button>
      </div>
    </md-toolbar>

    <!-- コンテンツ -->
    <md-content class="md-padding">
      <p>ここにコンテンツ</p>
    </md-content>

  </body>
</html>

ここでのポイントはbodyタグの「layout="vertical"」。これを指定しないとコンテンツ部分が長くなってスクロールしたときにツールバーも上にスクロールしてしまう。


css/app.css
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -webkit-user-select: none;
}

input[type=text] {
  -webkit-user-select: auto;
}

Cordovaでのモバイルアプリ開発を意識した設定を入れているが、通常のWebアプリを開発するならハッキリ言ってこのCSSは無くてもいい。AMを動かすために独自のCSSで色々と設定する必要は無い。


js/app.js
var app = angular.module("app", ["ngMaterial"]);
app.controller('AppCtrl', function ($scope) {

  console.log('メインコントローラー初期化');

  $scope.onClickBtn = function(evt) {
    console.log("onClickBtn()");
  }

});

ここでのポイントは追加モジュールとして「ngMaterial」を指定すること。これを指定しないと全く動かない。


テーマを指定する

テーマの読み込みと指定方法を探すのに少々苦労した(^^);

デフォルトテーマは「angular-material.min.css」。その他のテーマは追加でthemesの配下にあるテーマファイルを読み込む。

例えばこのようなファイル「bower_components/angular-material/themes/amber-theme.css」。テーマのCSSを読み込む順番は任意で構わない。

その上で、各コンポーネントに「md-theme」のアトリビュートを使ってテーマを指定する。

<md-progress-linear md-theme="amber" mode="determinate" ng-value="50"></md-progress-linear>

md-buttonはデフォルト状態ではテーマを変更しても色が変わらない。「class="md-primary"」などの色が付くようなクラスを指定する必要がある。


全プロジェクトファイル

GitHubに上げてある。

junkoro/AngularMaterialMin

ライセンス？

WTFPL – Do What the Fuck You Want to Public License

コメント

コメントを投稿

このブログの人気の投稿

レオナルド・ダ・ビンチはなぜノートを「鏡文字」で書いたのか？

イメージ
日経14.06.08朝　芸術と科学のあいだ　１７　鏡文字に込めた天才の思惑　福岡伸一 …ダ・ビンチの筆の特徴は、線が左上から斜め右下へと流れていることである。これは彼が左利きだったかららしい。 もう一つの際立った特徴は、文字がすべて鏡文字、左右反転で書かれていることだ… アイディアを盗まれないよう暗号化したのだという説があるが、暗号にしては簡単に解読されてしまう… ダ・ビンチは天才であり完璧主義者であると同時に、大いなる山っ気を持った人物でもあった。 いつも自分を売り込むこと、プランやアイディアを広めることを考えていた。そのためには何が必要か。マスメディアである。 ダ・ビンチの鏡文字は自分の原稿をいつの日か活版印刷するために意図された周到な準備だったのではなかったか。 日経記事より レオナルド・ダ・ビンチは過去の人物の中で最も尊敬する人物だ。彼は本当に何でも出来た。芸術も、科学も、工学も。まさに「万能人 (uomo universale)」。 レオナルド・ダ・ヴィンチ - Wikipedia 当然自分はダ・ビンチの足元にも及ばないが、いくつもの人工言語（プログラミング言語）を使うことができる。ひとつをマスターするのは大変だったが、ひとつマスターするとその他の言語にはかなりの共通点があるので、新しい言語を習得するのにそれほど時間がかからなくなったからだ。 いかに天才であったとしても生きられる時間は限られている。その限られた時間の中であれほどの多方面に渡る物事を習得できたのは、「すべてのものに共通する何か」を習得したからではないかと思うのだ。 自分の知る限り、その「すべてのものに共通する何か」を習得したのではないかと思える人物は、ダ・ビンチただ一人だ。 そのダ・ビンチの新たな側面を知った。山っ気というか、マーケティングにも興味があったようだ。 そのマーケティングには何らかのメディアが必要だ。やはり自分もダ・ビンチは活版印刷のために鏡文字を使っていた説に一票だ。 マーケティングへの興味という他にもう一つ根拠がある。ダ・ビンチが生まれたのが1452年。グーテンベルクの聖書が世界で初めて活版印刷でつくられたのが1455年。 グーテンベルク聖書 - Wikipedia つまり、ダ・ビンチが生きた時代は活版印...
続きを読む

macでsmb（samba）共有サーバーに別名で接続（別アカウント名で接続）する方法

macでsmb（samba）共有サーバーに別のアカウント名で接続したくなった。 接続を解除してもパスワードを保存してしまったために自動的に再接続してしまい、別アカウント名で接続できなくなってしまった(´・ω・`) どうすれば別名で接続できるのか？ Finder＞移動＞サーバーへ接続＞サーバアドレス に下記のように入力する。 smb://アカウント名@ホスト名 ノリでやってみたら、たまたまできちゃった(・∀・) 知らなかったわ〜
続きを読む

Windows7でネットワーク上の共有フォルダにアクセスする資格情報を保存するには？

イメージ
Windows7でネットワーク上の共有フォルダにアクセスする場合、通常IDとパスワードを求められる。Windows7ではこれを「資格情報」と呼んでいるようだ。 普通に入力してアクセスすることはできた。しかし問題は、 ログオフや再起動をすると、「資格情報を記憶する」をチェックしても毎回聞かれる ことだ。ネットで調べると、このような状況になる人は多いようだった。自分なりのログを書いておこうと思う。 普通に入力して共有フォルダにアクセスした後、「コントロールパネル」＞「ユーザーアカウントと家族のための安全設定」＞「資格情報マネージャ」を見るとこのようになっていた。何度も聞かれるのは、「常設」が「ログオンセッション」となっているためだろうとわかる。これをなんとかしなければならない。 そこで、まず「資格情報コンテナから削除」でこの資格情報を消してから、「Windows資格情報の追加」をする。普通に考えればこのように入力することになるだろう。 これで一度再起動した。しかし、これでもなぜか次のような画面が出て接続できなかった。 試行錯誤の結果、 ポイントはユーザー名を「サーバー名¥ユーザー名」とすること だとわかった。 こうして追加すると、このように「常設」が「エンタープライズ」になる。これで2度と聞かれなくなった。 このような苦労をしなくてもNASには普通に接続できたのだけれど、接続先がMacの共有フォルダだったのがいけなかったのだろうか。いまだに謎だ。
続きを読む