エンジニアリング記事web、ゲームなどのエンジニアリングについて紹介しています。

eyecatch

2016/03/31

Angular Material 実践 vol.1

最近1からAngularを実装する機会があったのですが、デザインをおこすのが億劫だと思い、AngualrMaterialならばPSDを作らずともいい感じのデザインになるのではないかと思い、手を出してみました。 その時はまったことなどを紹介します。 Angular Materialとは googleが提供している、AngularJS用のUIコンポーネントです。 導入 bower install angular --save bower install angular-material --save 必要なJSを読み込み jquery.min.js angular.min.js angular-material.min.js angular-aria.min.js angular-animate.min.js angular-ui-router.min.js angular-material.min.css Angular Material Design Table Angular Materialに良い感じのテーブルがなかったので、MaterialDesiginTableを採用してみました。 導入 bower install angular-material-data-table --save 読み込み md-data-table.min.js md-data-table.min.css ControllerにDIする angular .module('app', ['ngMaterial']) .controller('DemoCtrl', DemoCtrl); function DemoCtrl() { } html <div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak> <md-content class="md-padding"> <section layout="row" layout-sm="column" layout-align="center center" layout-wrap> <md-button class="md-raised">Button</md-button> </section> </md-content> </div> これでいい感じのMaterial Deginのボタンができたかなと思います。 ↑こんな感じの。 一旦、導入までまとめました。

eyecatch

2015/11/18

AngularJsでよく使うAPI

angular.module()などはAngularで実装する際、必ずと言っていいほど使用すると思いますが、そのほかのAngularのAPIで便利だなと思った関数あったので、書いてみました。 angular.copy オブジェクトまたは配列をディープコピーします。 AngularJsでは同じ変数を参照してしまうと、双方向データバインディングの影響で、意図していない場所の値が変更されてしまう可能性があるので、その際によく使いました。 $scope.user = 'user1'; var user1.name = angular.copy($scope.user); angular.forEach いわゆるforEachしてくれます。obj内の各項目に対し、それぞれiterator関数を実行してくれる。iteratorの関数は、iterator(value, key)として実行され、valueにはオブジェクトのプロパティの値または配列の要素が入り、 keyにはオブジェクトのプロパティのキーまたは配列のインデックス番号が入ります。 var lists={ item1:'name1', item2:'name2', item3:'name3' }; angular.forEach(lists, function(val, key) { // ~~ }); angular.merge 任意の複数オブジェクトを一つのオブジェクトにマージしてくれます。 配列でも使用できるようです。 var obj1={ item1:'name1', item2:'name2' }; var obj2={ item3:'name3', item4:'name4' }; var mergeObj = angular.merge(obj1, obj2); angular.isDefinedなどis〜 対象が定義されているか否かを調べてくれます。定義されていればtrueが返ります。他にもisDateとかisArrayとかあり、条件分岐で複雑な処理を書かなくて良いので便利です。 var val = 'key'; angular.isDefined(val); // true 他にも便利なAPIが多数用意されているようなので、underscore.jsなど使用する前に一度目的のapiがないかどうか調べてみても良いかもですね。

eyecatch

2015/09/10

Brunchでフロントエンド開発 - その2

http://qiita.com/yhikishima/items/5c595fab7df4aa885a7e 昨日の記事からの流れで、brunchのインストールから起動までを行ってみたいと思う。 http://brunch.io/ のステップの内容、そのままインストールしていってみた。 1、Brunchインストール npm install -g brunch まずはbrunchをインストール 2、Brunchプロジェクトを作成 brunch new <skeleton-URL> [optional-output-dir] skeleton listで好きなプロジェクトをインストールする。 skelton一覧 - http://brunch.io/skeletons.html なぜかやたらとCoffeeScriptが多い。。 今回は「Pineapple in a Can」を入れてみる。 任意のディレクトリに移動し、 brunch new gh:timebox-designs/pineapple-in-a-can 01_Pineapple 以上のコマンドをうつ。何やら色々なファイルが入ってきた。 3、開発 プロジェクトの生成が完了したら、指定したディレクトリに移動し(今回は「01_Pineapple」)、以下のコマンドをうつ brunch watch --server おお!動いた。 info: application started on http://localhost:8080/ ターミナルに表示されたコメントには、「http://localhost:8080/」 ここを表示しろと。 ブラウザで確認してみると。・ 何も表示されていなかった。。。。 error: { [Error: Component must have "/Users/yhiki1/work/Brunch-env/01_Pineapple/bower_components/marionette/bower.json"] code: 'NO_BOWER_JSON' } とエラーがでていたので、bower installする必要があったそうだ。 あらためてbower installしたのちに上記手順をふむと、 brunchで生成されたhtmlが表示された! 何やらよくわからない画像が表示されているが、アプリケーションを作成していくための雛形が作られている様子。 非常に簡単! アプリケーション内は といった構成。 app内のファイルをいじっていく形。非常にわかりやすく、シンプルな構成。 インストールからアプリケーションの起動までやってみたが、簡単に導入できる点は素敵。 実際に開発を始めてみて、問題など出していってみたいと思う。 今回のソース https://github.com/yhikishima/Brunch-env/tree/master/01_Pineapple

eyecatch

2015/09/10

Javascriptの正規表現

今までわかっている気になっていた正規表現。 先日仕事で正規表現を書く機会があったのだが、うまく書けず、数時間ハマってしまったので、改めて勉強し直そうと思う。 正規表現 そもそも正規表現とは? 「文字列内で文字の組み合わせを照合するために用いられるパターン」 だそうです。 簡単に言うと、文字列内にある文字があるかどうか、など文字列をいい感じに検証したいときに便利な記述方法、なのだろうか。 正規表現は以下2つのパターンで書ける。 正規表現リテラル var reg = /hoge+a/; RegExp オブジェクトのコンストラクタ関数 var reg = new RegExp("hoge+a"); 今回はよく使用する正規表現リテラルで書いていこうと思う。 よく使う特殊文字 正規表現でマッチしている部分を見つけたいときは、必ずといっていいほど特殊文字を使用すると思う。 /^hoge+a/ このような形で。特殊文字をどれだけマスターしているかによって、正規表現を使う幅が広がってくる。 1. バックスラッシュの次の文字をエスケープしてくれる。 2. ^ 入力の先頭にマッチする。 /^a/ このようにすると、”abc”の”a”にマッチする 3. $ 入力の末尾にマッチする。 /a$/ このようにすると、”bca”の”a”にマッチする 4. * 直前の文字の 0 回以上の繰り返しにマッチする。 /ab*/ このようにすると、”abbbbccc”の”abbbb”にマッチする。 “a”にもマッチする。”bbb”ではマッチしない。 5. {n} 直前の文字がちょうど n 回出現するものにマッチする。 /a{2}/ このようにすると、”aabc”の最初の”aa”にマッチする。 “abc”にはマッチしない。 6. [xyz] 文字集合を表す。角括弧で囲まれた文字のいずれか1個にマッチする。 /[ab]/ このようにすると、”aefgb”の”a”にマッチする。 7. [^xyz] 文字集合の否定または補集合。角括弧で囲まれた文字ではない文字にマッチする。 /[^ab]/ このようにすると、”aefgb”の”e”にマッチし、一番最初の該当文字にマッチする。 他、多数存在するが、全て覚えていくのも大変なので、随時覚えていきたい。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions 正規表現の使用 正規表現は、RegExpのtestおよびexecメソッド、Stringのmatch、replace、search、およびsplitメソッドとともに使用する。 1. match 文字列中で一致するものを検索するStringのメソッド。結果情報の配列を返す。マッチしない場合はnullを返す。 var str = "abcdefg"; str.match(/[a-e]/gi); // ["a", "b", "c", "d", "e"] 2.