無印良品の店舗と展示してあるソファのリスト

  • 池袋
    • ワイドアーム 羽根ポケットコイル 2シーター
    • スリムアーム ウレタン 2シーター
    • スリムアーム ウレタン 1シーター
    • ワイドアーム ダウンフェザーポケットコイル 2シーター
  • 有楽町
    • スリムアーム ウレタン 1シーター
    • スリムアーム 羽根ポケットコイル 2シーター
    • ワイドアーム ダウンフェザーポケットコイル 2.5シーター
    • あとなんかタモ材ソファとかハイバックソファとかいっぱいあった

特定の画像をページの背景にするangularjsのdirective

page-backgroundで指定した画像をページの背景にできる。CSSだけでも実現できるが、AngularJSを使ってみた。

JavaScript

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

app.directive('pageBackground', function() {
    return function (scope, elm, attr) {
        var url = attr.pageBackground;
        elm.css({
            'background': 'url(' + url + ') no-repeat center center fixed',
            '-webkit-background-size': 'cover',
            '-moz-background-size': 'cover',
            '-o-background-size': 'cover',
            'background-size': 'cover'
        });
    };
});

HTML

<!doctype html>
<html lang="ja" ng-app="app" page-background="hoge.jpg">
<head>
    <meta charset="UTF-8">
    <title>background-image</title>
    <script src="../angular.js"></script>
    <script src="index.js"></script>
</head>
<body>
</body>
</html>

controllerのscopeから値を取得できるようにしてgithubに上げました

gruntでヘッドレステストする

準備

まず、grunt-jasmine-runnerをインストールします。

$npm install grunt-jasmine-runner

次に、phantomjsにパスを通します。homebrewで持ってくるか公式サイトでダウンロードしてきましょう。

$brew install phantomjs

grunt.js内の記述は以下の通りです。

jasmine: {
  src: [
    'war/js/lib/jquery-1.8.3.js',
    'war/js/lib/spine/spine.js',
    'war/js/lib/**/*.js',
    'war/js/model.js',
    'war/js/templates.js',
    'war/js/view.js',
    'war/js/controller.js',
    'war/js/*.js'
  ],
  specs: 'target/js.test/*Spec.js',
  server: {
    port: 3103
  },
  timeout: 10000
}

jasmineタスクには主にsrc, specs, helpersオプションがあります。srcはテスト対象のファイル、specsはテストファイル、helpersはjasmine-jqueryみたいなテスト時のヘルプライブラリを記述するところです。srcオプションには*.jsだけ記述してもいいのですが、読み込まれる順番によってエラーが出てしまう（jQueryがないなど）ため依存関係にあるファイルを先に指定しています（requrejsもオプションで使える）。

実行

$grunt jasmine

を実行するとポート3103でサーバが立ち上がりテストが行われ、コマンドラインに結果が出力されます。もし実行結果をブラウザで見たい場合は代わりに

$grunt jasmine-server

を実行してください。またwatchタスクにjasmineタスクを追加しておけばファイルの更新のたびテストを実行できます。

Twitter Bootstrapのmixinsを使う

LESSにはmixinsという関数みたいに使える便利な機能があります。CSSフレームワークであるところのTwitter Bootstrapにもこの機能が取り入れられていて、私達開発者も利用できます。

必要なもの

  • variables.less と mixins.less ココらへんから取ってきましょう

lessファイルのコンパイル

コンパイルはgruntで行います。

grunt.js

less: {
    src: {
      src: ['src/main/less/*.less'],
      dest: 'war/css/*.css'
    }
}

ここではgrunt-contrib-lessを使用しています。ディレクトリがsrc/main/*なのはSlim3の上で開発しているためです。コンパイルは単純な一対一対応ですが、variables.lessとmixins.lessはコンパイルしないので別のディレクトリに置いておきます(src/main/less/lib)

mixinsを使ってみる

対象

<article>
  <section class="policy">
    <h2>Privacy Policy</h2>
    <p>hoge</p>
  </section>
  <section class="company">
    <h2>Company</h2>
    <p>fuga</p>
  </section>
</article>

src/main/less/main.less

@import 'lib/variables';
@import 'lib/mixins';

article {
  .makeRow();

  section.policy {
    .makeColumn(4);
  }
  section.company {
    .makeColumn(4);
  }
  section.help {
    .makeColumn(4);
  }
}

これでgrunt lessするとそれっぽいcssファイルが生成されてると思います。