特定の画像をページの背景にする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ファイルが生成されてると思います。

マイス攻略法 もしくは Aizu Advent Calendar 12日目

この記事はAizu Advent Calendarの12日目の記事です。

今日までに制作物が出来上がらなかったのでマイスの攻略法について書きます。

 

マイスはババ抜き+すごろくみたいなボードゲームです。すごろくやから発売されてます。

マイス

 

マイスのターン中の動作は

1. 他人のカードを引き、出た経験値の分コマを進めること

2. 自分の手持ちカードを分配すること

の2つです。カードは何枚でも引けるのですが、ドクロマークのカードを引くとこのターンは一歩も進めません。どんどんコマを進めていき、ドラゴンを倒すとクリアです。お姫様のところまで行けます。ドラゴンを倒すことができるのはひとりだけなので勇者同士で足のひっぱりあいが起こります。序盤中盤終盤でとる戦略が変わってきます。

 戦略

まず序盤ではなるべく点数を多く取りたいです。そのためには自分以外のプレーヤーが1/2/3点のカードを持っている必要があります。もし自分がドクロカードを持っていればそれを残してあとは分配してしまいましょう(もし手札のないプレーヤーに点数カードだけ分配した場合次のプレーヤーがそれらをすべて引きますがそのプレーヤーも同じように分配すると思うのでまあいいです)。ドクロカードは常に自分が保持しておくと動きがわかって良いです。この段階では伝説カードもただの点数カードなのでホイホイ分配してしまって構いません。

 

次に中盤ですが、マイスは目の前のコマを飛び越せるのでわりと中盤と終盤の区別が無いです。終盤に向けて伝説カードを保持しておくのもいいでしょう。ドクロカードを一緒に持っていないと(僕は)こわいです。また保持しない場合は次のターンで上がれない人に分配しましょう。

 

ドラゴンを倒すためには伝説カードが自分の手札になければいけません。もし自分がリーチの位置にいれば他の人が自分に伝説カードを分配してくれることはないでしょうから自分で引き当てに行く事が必要です。

 

全体で共通なのはドクロカードの動きを見ておくことです。戦略によっては自らドクロカードを引きにいくこともあるくらい重要なカードです。

 

ボードゲームしに来ませんか

平日の仕事上がりや休日に、弊社でボードゲームはいかがですか。4人用からそれ以上まで、ボードゲームを用意してお待ちしております。ご連絡は@grapswizか@vvakameまで。

 

明日のAizu Advent Calendarは @aomoriringo さんです。

TG社ボドゲ部活動報告

第一回

  • http://www.zusaar.com/event/456007
  • 開催時間: 12:00 - 23:20
  • 参加者: 10人/11人中
  • ハッシュタグ: #TG社ボドゲ
  • やったボードゲーム
  • 海鮮丼
    • サーモン丼 x 3
    • 三色丼
    • やまかけ丼
    • イクラ縁側丼
    • ヅケネギトロ丼
    • 魚河岸丼
  • 感想
    • 「午前中スタートでも良かった」
    • 第二回もやったら集まりそうな雰囲気