"Array values in the parameter are deprecated" エラー

問題と原因

Railsのサーバーやコンソール実行時次のような警告が出る場合:

$ rails server
Array values in the parameter are deprecated. Please use a String or nil.
An Array was passed in from bin/rails:3:in `load'
.
.
.

この場合原因はbin/springの11行目にある:

Gem.paths = { "GEM_PATH" => [Bundler.bundle_path.to_s, *Gem.path].uniq }

解決策

bin/springのこの11行目を次のように修正するか:

Gem.paths = { 'GEM_PATH' => [Bundler.bundle_path.to_s, *Gem.path].uniq.join(File::PATH_SEPARATOR) }

springを次のコマンドで最新のバージョンにアップデートすることで、この警告は解消される:

$ bundle update spring && bundle exec spring binstub --remove --all && bundle exec spring binstub --all

direnv使い始め

direnv

direnvとは

• cdのようなシェルスクリプトをフックとしてディレクトリごとに環境変数を自動で設定してくれるツール
• ディレクトリをぬけ出すと環境変数はリセットされる

インストールとセットアップ

brewを使ってインストール:

$ brew install direnv
$ brew link direnv

あるいはdirenvはGoで書かれているので、Goとmakeを使って:

$ git clone https://github.com/direnv/direnv
$ cd direnv
$ make install

インストール後、フックを追加:

echo 'eval "$(direnv hook bash)"' >> ~/.bashrc
echo 'eval "$(direnv hook zsh)"' >> ~/.zshrc
echo 'eval (direnv hook fish)' >> ~/.config/fish/config.fish
echo 'eval `direnv hook tcsh`' >> ~/.cshrc

もし、~/.bash_profileが存在しない場合は、以下の内容で新しく~/.bash_profileを作成、あるいは追加:

if [ -f ~/.bashrc ]; then
    . ~/.bashrc
fi

使用例

• .envrcファイルでディレクトリ固有の環境変数を指定
• direnv edit .コマンドでそのディレクトリの.envrcファイルを作成

使用する前に環境変数EDITORを設定しておく。

export EDITOR={エディタ}

ターゲットのディレクトリに.envrcファイルを作成:

$ mkdir test
$ cd test
$ echo ${FOO-nope} //環境変数FOOは存在しないのでnopeを返す
nope
$ direnv edit .

.envrcを編集する:

export FOO=foo

リロード:

$ direnv reload
direnv: loading ~/.direnvrc
direnv: loading .envrc
direnv: export +FOO

環境変数が設定されているか、確認:

$ echo ${FOO-nope}
foo

ディレクトリを抜けだしてみる:

$ cd ..
direnv: unloading
$ echo ${FOO-nope}
nope

Error response from daemon: client is newer than server (client API version: 1.23, server API version: 1.22)

Dockerに関するエラー:

$ docker ps
Error response from daemon: client is newer than server (client API version: 1.23, server API version: 1.22)

Machineの更新が必要なので、次のコマンドを打つ:

$ docker-machine upgrade [machine名]

再度チャレンジ:

$ docker ps
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES

大丈夫そう。

はじめてのUnity (C#)

参考: http://catlikecoding.com/unity/tutorials/clock/

シンプルな時計を作る

完成品はこちら:

まずはプロジェクトの作成:

プロジェクトの作成が完了したら、Create > Create Emptyから新しく"Clock"という名でゲームオブジェクトを作成する。また、Create > Create Empty Child を選択し、Clockの子オブジェクトとしてHours, Minutes, Secondsを作成:

次に、時計の針を作るために、それぞれの子オブジェクトに対し、子cubeを作成する。それぞれのポジションとスケールは次の通り:

親	position	scale
Hours	(0,1,0)	(0.5, 2, 0.5)
Minuts	(0, 1.5, 0)	(0.25, 3, 0.25)
Seconds	(0, 2, 0)	(0.1, 4, 0.1)

オブジェクトのヒエラルキーと現時点でのSceneは次のようになる:

アニメーションの追加

時計を動かすにはスクリプトが必要だ。まずは、ProjectタブからCreate > C# Scriptで新しくC# スクリプトを作成し、ClockAnimatorと名前をつける。スクリプト編集するために、ファイルをエディタで開こう。

まず、UnityEngineの名前空間から必要な物を使用することを宣言する。次に、ClockAnimatorクラスにMonoBehaviourからの継承を宣言する。

using UnityEngine;

public class ClockAnimator : MonoBehaviour {
}

ClockオブジェクトのInspectorからAdd Component > Scripts > ClockAnimatorと選択して、オブジェクトとスクリプトをつなげる。

時計の針を動かすためには、Transformコンポーネントにエディタからアクセスすることが必要になるので、Transform変数を宣言し、オブジェクトのプロパティとしてそれぞれに割り当てる。

using UnityEngine;

public class ClockAnimator : MonoBehaviour {

    public Transform hours, minutes, seconds;
}

次に、Updateメソッドを追加する。このメソッドはフレーム毎に呼び出される特殊なメソッドだ。

using UnityEngine;

public class ClockAnimator : MonoBehaviour {

    public Transform hours, minutes, seconds;

    private void Update () {

    }
}

このメソッドを追加すると、コンポーネントにチェックボックスが表示され、オン・オフが設定できる。

Hoursの針は1時間毎に360/12度、Minutesの針は1分ごとに360/60度、1秒ごとに360/60度回転する。これらの値を定数の浮動小数点として次のように定義する。

using UnityEngine;

public class ClockAnimator : MonoBehaviour {

    private const float
        hoursToDegrees = 360f / 12f,
        minutesToDegrees = 360f / 60f,
        secondsToDegrees = 360f / 60f;

    public Transform hours, minutes, seconds;

    private void Update () {

    }
}

System名前空間から、現在の時刻を知るため、DateTimeのNowプロパティを呼び出し、time変数に格納する。

using UnityEngine;
using System;

public class ClockAnimator : MonoBehaviour {

    private const float
        hoursToDegrees = 360f / 12f,
        minutesToDegrees = 360f / 60f,
        secondsToDegrees = 360f / 60f;

    public Transform hours, minutes, seconds;

    private void Update () {
        DateTime time = DateTime.Now;
    }
}

時計の針を動かすには、hours、minutes、secondsのコンポーネントのlocalRotationを直接変更する必要がある。Quaternionのあるメソッドを使って、任意の回転を定義しよう。

using UnityEngine;
using System;

public class ClockAnimator : MonoBehaviour {

    private const float
        hoursToDegrees = 360f / 12f,
        minutesToDegrees = 360f / 60f,
        secondsToDegrees = 360f / 60f;

    public Transform hours, minutes, seconds;

    private void Update () {
        DateTime time = DateTime.Now;
        hours.localRotation =
            Quaternion.Euler(0f, 0f, time.Hour * -hoursToDegrees);
        minutes.localRotation =
            Quaternion.Euler(0f, 0f, time.Minute * -minutesToDegrees);
        seconds.localRotation =
            Quaternion.Euler(0f, 0f, time.Second * -secondsToDegrees);
    }
}

真ん中のPlayボタンを押せば、アニメーションが開始され、時計が動き始める。

はじめてのAurelia

http://aurelia.io

Aureliaとは次世代UIフレームワーク。AngularJS、Reactに比べて影が薄い。どうなっていくんだろうか？チュートリアルをやってみた感想としては、HTTPリクエストとルーティング周りがクリーンで素敵。

以下、チュートリアルの適当な和訳。

Getting Set Up

キットをここからダウンロードします。

• NodeJS - キットのフォルダー内で簡単なサーバーを立ち上げるには、http-serverをnpm install -g http-serverでインストールします。インストールが終了したら、http-server -o -c-1コマンドでサーバーを立ち上げます。

The Index.html Page

index.htmlは、Aureliaベースのアプリケーションのテンプレートとなるファイルです。

index.html

<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <link rel="stylesheet" href="styles/styles.css" />
    <meta name="viewpoint" content="width=device-width, initial-scalse=1"/>
  </head>
  <body aurelia-app>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
      SystemJS.import('aurelia-boostrapper');
    </script>
  </body>
</html>

ヘッダーはきわめてシンプルで、スタイルシートといくつかのメタデータを指定しています。

スクリプトタグを見てみます。モジュールローダーであるsystem.jsは、Aureliaのライブラリを読み込んでくれます。次に、config.jsファイルはローダーの設定を記述しています。ツールを使ってAureliaのパッケージをインストールすれば、自動的に生成されます。

モジュールローダーとコンフィグを設定した後に、SystemJS.importを使って、aurelia-boostrapperモジュールを読み込んでいます。

このブートストラッパーが読み込まれると、HTMLドキュメントのaurelia-app要素を探します。この要素によってブーストラッパーはアプリケーションのビューモデルとビューを読み込みます。

Creating Your First Screen

Aureliaでは、UIコンポーネントはビューとビューモデルの2つの部分にわかれます。ビューはHTMLで記述されて、そのDOMに描画します。ビューモデルはES 2016で記述されて、データとその振る舞いをビューに渡します。Aureliaの強力なデータバインディングによって、これら2つの部分はリンクし、データの変更が互いに反映されます。この分離のアイデアは、デベロッパー/デザイナーの協業、メンテのしやすさ、アーキテクチャ上の柔軟性、ソースコントロールにおいても、有用です。

srcフォルダーにapp.htmlとapp.jsファイルがありますが、これらがビューとビューモデルのコンポーネントです。ビューモデルをfirstNameとlastNameを持つ、シンプルなクラスに置き換えましょう。fullNameプロパティと、"submit"メソッドも追加します。

app.js

export class App {
  heading = 'Welcome to Aurelia';
  firstName = 'John';
  lastName = 'Doe';

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }

  submit() {
    alert(`Welcome, ${this.fullName}!`);
  }
}

基本的なデータと振る舞いを記述するビューモデルを作成しました。次にHTMLを使って、ビューを作成しましょう。

app.html

<template>
  <section>
    <h2>${heading}</h2>

    <form submit.trigger="submit()">
      <div>
        <label>First Name</label>
        <input type="text" value.bind="firstName"/>
      </div>
      <div>
        <label>Full Name</label>
        <p>${fullName}</p>
      </div>
      <button type="submit">Submit</button>
    </form>
  </section>
</template>

まず、すべてのビューはtemplateタグにネストされています。ビューは基本的な入力フォームです。入力コントロールを見てみましょう。value.bind="firstName"に気づいたでしょうか？これによって、入力した値とビューモデルのfirstNameプロパティのデータバインディングを行います。ビューモデルのプロパティが変化した時に、入力値は新しい値に更新されます。入力コントロールの値を変更した時、Aureliaはビューモデルに新しい値を入れます。簡単なことですね。

この例では、もっと面白いことが起きています。最後のフォームグループのHTML中に、${fullName}があります。これは文字列の挿入です。ビューモデルからビューへの一方的なデータバインディングで、自動的に文字列へと変換され、ドキュメントに挿入されます。最後に、フォーム要素を見てみましょう。submit.trigger="submit()"に気づくでしょう。これはイベントバインディングで、フォームのsubmitイベントが発火した時に、ビューモデルのsubmitメソッドが呼び出されます。

ブラウザを更新して、確かめてみましょう。

Adding Naviagation

ひとつのページのアプリだと面白くないですよね。スクリーンを幾つか追加して、クライアントサイドのルーティングを設定しましょう。app.jsとapp.htmlをそれぞれwelcome.js、welcome.htmlにリネームしましょう。マルチスクリーンアプリの最初のページになります。"layout"、"master page"、"root component"となるapp.jsとapp.htmlを新しく作成します。ビューにはナビゲーションUIと現在のスクリーンのコンテントプレースホルダーを、ビューモデルにはルーターのインスタンスを設定しましょう。

app.js

export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map([
      { route: ['', 'welcome'], name: 'welcome', moduleId: './welcome', nav: true, title: 'Welcome' }
    ]);

    this.router = router;
  }
}

ルーターを使うために、configureRouterコールバックを実行するAppクラスをエクスポートします。このコールバックは設定オブジェクトとともに呼びだされます。設定オブジェクトを使用すれば、ドキュメントのタイトルを生成する際に、これを使用し、ルートのマッピングを行います。それぞれのルートは次のプロパティを持ちます:

• route: パターンに一致したら、このルートにナビゲートします。静的なものだけでなく、customer/:idのようにパラメーターを使用することも出来ます。ワイルドカードパターンとクエリ文字列もサポートしています。routeは文字列パターンやパターンの配列でなければなりません。
• name: URLを生成するコードで使用する名前です。
• moduleId: このルートで描画するコンポーネントのパスです。
• title: ドキュメントのタイトルを任意で指定できます。
• nav: このルートがナビゲーションモジュールに含まれる場合、trueに設定します。

app.html

<template>
  <require from="bootstrap/css/bootstrap.css"></require>
  <require from="font-awesome/css/font-awesome.css"></require>

  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <i class="fa fa-home"></i>
        <span>${router.title}</span>
      </a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
          <a href.bind="row.href">${row.title}</a>
        </li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li class="loader" if.bind="router.isNavigating">
          <i class="fa fa-spinner fa-spin fa-2x"></i>
        </li>
      </ul>
    </div>
  </nav>

  <div class="page-host">
    <router-view></router-view>
  </div>
</template>

Appクラスは上記のapp.htmlのビューにデータバインドされます。このマークアップの大部分はメインのナビゲーション構造を扱います。ビューの上部にrequireエレメントがありますね。ES2015/2016のimportと同じく、AureliaはHTMLのrequireエレメントの使用を可能にします。このエレメントによって、この場合ではCSSを読み込むことが出来ます。これで、ナビゲーション構造のレイアウトにブートストラップを使用することが出来ます。

基本的なデータバインディングと文字列の挿入はすでに見たので、新しいことに注目しましょう。ulエレメントのnavbar-navを見て下さい。liはrepeat.for="row of rotuer.navigation"によって、どのようにリピーターを使うかを示しています。これによって、router.navigation配列のそれぞれのアイテムにliが作られます。ローカル変数はrowで、子エレメントで見ることが出来ます。

liでは、クラスを追加/削除するために、どのように文字列挿入を使用しているか示しています。下に行くと、ふたつ目のulがあります。子エレメントのliのバインディングを見て下さい。if.bind="router.isNavigating"これは、条件のもとで、バインディングされた値をベースとしたliを追加/削除します。ルーターはisNavigatingプロパティを更新します。

ブラウザを更新して、確かめてみましょう。"welcome"ルートのために選択されたタブが確認できます。このwelcomeビューはメインコンテントエリアで表示されます。ブラウザのデバグツールを開いて、DOMを見てみましょう。router-viewの中でwelcomeビューコンテントが表示されているのがわかるでしょう。

Adding a Second Page

さて、ナビゲーションアプリケーションができましたが、スクリーンがひとつだと面白く無いので、ふたつ目のスクリーンを追加しましょう。

Githubからユーザー情報を取得して表示しましょう。まずは、仮のスクリーンへのルートを設定します。

app.js

export class App {
  configureRouter(config, router){
    config.title = 'Aurelia';
    config.map([
      { route: ['','welcome'],  name: 'welcome',  moduleId: './welcome',  nav: true, title:'Welcome' },
      { route: 'users',         name: 'users',    moduleId: './users',    nav: true, title:'Github Users' }
    ]);

    this.router = router;
  }
}

users.jsとusers.htmlファイルを作成する必要があるとわかるでしょう。これがそのソースです。

users.js

import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-fetch-client';
import 'fetch';

@inject(HttpClient)
export class Users {
  heading = 'Github Users';
  users = [];

  constructor(http) {
    http.configure(config => {
      config
        .useStandardConfiguration()
        .withBaseUrl('https://api.github.com/');
    });

    this.http = http;
  }

  activate() {
    return this.http.fetch('users')
      .then(response => response.json())
      .then(users => this.users = users);
  }
}

fetch polyfillと同じく、HttpClientをAurelia's Fetchプラグインからインポートします。これによって、HTTPリクエストを簡単に行うことが出来ます。デフォルトではこのプラグインは含まれませんが、スターターキットにはすでに含まれています。

injectデコレーターを見てみましょう。ここでは何を行っているのでしょう？Aureliaはアプリを描画するために必要なUIコンポーネントを作成します。Dependency InjectionコンテナがHttpClientのようなコンストラクタ依存を供給することで可能になります。では、どのようにDIは何を供給すべきかを知るのでしょうか？あなたが行うことといえば、ES2016のinjectデコレータをクラスに追加することだけですが、これで、供給するインスタンスの種類のリストを渡します。それぞれのコンストラクタパラメーターにはひとつの引数を用意します。上記の例では、HttpClientインスタンスが必要なので、injectデコレータにHttpClientタイプを追加し、コンストラクタに対応したパラメーターを渡します。

Aureliaのルーターはルーターの変更時にビューモデルのライフサイクルを実施します。"Screen Activation Lifecycle"や"Navigation Lifecycle"と呼ばれるものです。ルートの内外に対する流れをコントロールするために、ビューモデルは任意でライフサイクルの多様な部分にフックすることが出来ます。ルートがアクティベートする準備ができた時には、ルーターはactivateフックを呼び出します。上記のコードでは、Github APIを呼び出して、ユーザーを取得するためにこのフックを使用しています。activateメソッドで、httpリクエストの結果を返していることに注意して下さい。すべてのHttpClient APIはPromiseを返します。ルーターはPromiseを探知し、それがresolveするまでナビゲーションの完了を待機します。 つまり、この場合では、データが入れられるまで、任意でルーターにページの表示を遅らせることができるのです。

users.html

<template>
  <section>
    <h2>${heading}</h2>
    <div class="row au-stagger">
      <div class="col-sm-6 col-md-3 card-container" repeat.for="user of users">
        <div class="card">
          <canvas class="header-bg" width="250" height="70"></canvas>
          <div class="avatar">
            <img src.bind="user.avatar_url" crossorigin />
          </div>
          <div class="content">
            <p class="name">${user.login}</p>
            <p><a target="_blank" class="btn btn-default" href.bind="user.html_url">Contact</a></p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

このスクリーンのビューはきわめてシンプルです。初めて見るものはないでしょう。

要約すると次のようになります。アプリにページを追加するには: 1. app.jsルーターにルートを設定します。 2. ビューモデルを作成します。 3. 同じ名前のビューを作成します。 4. お祭り騒ぎします。

Bonus: Creating a Custom Element

延長戦です。カスタムHTMLエレメントを作成しましょう。"navbar"が適した候補だと思います。たくさんのHTMLがapp.htmlファイルにあります。<nav-bar>エレメントを抽出して、少し叙述的にします。最後には次のように記述することが出来ます。

app.html

<template>
  <require from="bootstrap/css/bootstrap.css"></require>
  <require from="font-awesome/css/font-awesome.css"></require>
  <require from="./nav-bar"></require>

  <navbar router.bind="router"></navbar>

  <div class="page-host">
    <router-view></router-view>
  </div>
</template>

このコードは"nav-bar"のnav-barエレメントを必要とします。ひとたびビューにおいて、このエレメントが利用可能になると、(routerのような)カスタムプロパティへのデータバインディングを含め、その他のエレメントと同じように使用することが出来ます。

まずは、nav-bar.jsとnav-bar.htmlを作成しましょう。

nav-bar.js

import {bindable} from 'aurelia-framework';

export class NavBar {
  @bindable router = null;
}

カスタムエレメントを作成するために、クラスを作成し、それをエクスポートします。このクラスはHTMLでエレメントとして使用されるので、どんなプロパティがエレメントの要素として表れるべきかをフレームワークに教える必要があります。そのために、bindableデコレータを使用します。injectと似て、bindableはAureliaにクラスについての情報を提供します。bindableデコレータは、フレームワークに対して、routerプロパティをHTMLの要素として表示して欲しいと伝えます。要素として表示されれば、ビューとバインドすることが出来ます。

nav-bar.html

<template>
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <i class="fa fa-home"></i>
        <span>${router.title}</span>
      </a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
          <a href.bind="row.href">${row.title}</a>
        </li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li class="loader" if.bind="router.isNavigating">
          <i class="fa fa-spinner fa-spin fa-2x"></i>
        </li>
      </ul>
    </div>
  </nav>
</template>

これはもともとのapp.htmlファイルのnavbar HTMLとほとんど同じに見えますね。でも、app.jsにバインディングするのではなく、ここではnav-bar.jsにバインドしています。

このカスタムエレメントはとてもシンプルです...が、シングルrouterプロパティを定義するためにES 2016のクラスを必要とするのは、すこし馬鹿げているように見えます。どうにか取り除けないでしょうか？答えは、YESです。振る舞いのない、しかし、一連のプロパティがバインドされるビューを供給する、とてもシンプルなエレメントでは、省略することが出来るのです。

まずは、nav-bar.jsファイルを削除します。次に、nav-bar.htmlファイルをひとつ変更します。templateエレメントでは、次のようにbindableプロパティを宣言することができます。

nav-bar.html

<template bindable="router">
  ...
</template>

最後に、requireエレメントhtmlコンポーネントを指すので、app.htmlファイルを更新する必要があります。

app.html

<template>
  <require from="bootstrap/css/bootstrap.css"></require>
  <require from="font-awesome/css/font-awesome.css"></require>
  <require from='./nav-bar.html'></require>

  <nav-bar router.bind="router"></nav-bar>

  <div class="page-host">
    <router-view></router-view>
  </div>
</template>

Aureliaがどのようにカスタムエレメントの名前を決めているのか不思議に思うでしょう。慣例では、エクスポートされた、小文字かつハイフンで繋がれたクラス名を使用します。HTMLのみの場合では、ファイル名を使用します。

カスタムエレメントの作成に加えて、既存のエレメントに新しい振る舞いを追加するカスタムアトリビュートを作成することも出来ます。repeatやifのように、ビューからDOMを追加したり削除することで、直接テンプレートをコントロールするアトリビュートが必要になることがあるでしょう。Aureliaのパワフルな、かつ拡張可能なテンプレートエンジンでは、これが可能になります。これは秘密ですが...いわゆるAureliaの"ビルトイン"の振る舞いには、実際にビルトインされているものはありません。それらは独自のライブラリに存在し、プラグインとしてAureliaに"インストール"されるのです。私たちは、あなたが自身のアプリとプラグインにビルドしなければならないものと同じコアを使用する"ビルトイン"を提供します。

Bonus: Leveraging Child Routers

独自のルータを持つ三番目のページを追加しましょう。これを子ルーターと呼びます。子ルーターはそれぞれ自身のルーター設定を持ち、親ルーターへナビゲートします。

まずは、app.jsを更新しましょう。

app.js

export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map([
      { route: ['','welcome'],  name: 'welcome',      moduleId: './welcome',      nav: true, title:'Welcome' },
      { route: 'users',         name: 'users',        moduleId: './users',        nav: true, title:'Github Users' },
      { route: 'child-router',  name: 'child-router', moduleId: './child-router', nav: true, title:'Child Router' }
    ]);

    this.router = router;
  }
}

何も新しい物はありません。面白いのはchild-router.jsです。

child-router.js

export class ChildRouter {
  heading = 'Child Router';

  configureRouter(config, router){
    config.map([
      { route: ['','welcome'],  name: 'welcome',       moduleId: './welcome',       nav: true, title:'Welcome' },
      { route: 'users',         name: 'users',         moduleId: './users',         nav: true, title:'Github Users' },
      { route: 'child-router',  name: 'child-router',  moduleId: './child-router',  nav: true, title:'Child Router' }
    ]);

    this.router = router;
  }
}

これ、部分的にはAppの設定と同じですよね。これが、再帰的ルーターです。

ビューを作成して、完成させましょう。

child-router.html

<template>
  <section>
    <h2>${heading}</h2>
    <div>
      <div class="col-md-2">
        <ul class="well nav nav-pills nav-stacked">
          <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
            <a href.bind="row.href">${row.title}</a>
          </li>
        </ul>
      </div>
      <div class="col-md-10" style="padding: 0">
        <router-view></router-view>
      </div>
    </div>
  </section>
</template>

アプリを実行して、魔法を目の当たりにしなさい...そして宇宙が爆発しないように祈りなさい。

Conclusion

Aureliaは素晴らしいアプリケーションを作成出来るだけでなく、そのプロセスを楽しむことも出来ます。私たちはシンプルな慣習によってデザインしました。なので、デベロッパーは、たくさんの設定や、頑固で、制限の多いフレームワークを満たすためのボイラープレートコードを記述に、時間をムダにすることがなくなります。Aureliaを使えば、もう障害物にぶつかることがなくなるでしょう。Aureliaはプラグシステムを使用し、カスタムできるように注意深くデザインされています。

Atomエディタから、はてなブログのエントリーを編集できるようになりました

以前から開発していた、Atomからはてなブログにエントリーを投稿できるようにするパッケージ

hatena-blog-entry-post

にプルリクエストをもらって、エントリーが編集できるようになりました。

ついでに日本語ドキュメントも作成しました。

パッケージはapm install hatena-blog-entry-postでインストールできます。

Processingでカレンダーを作る

カレンダーを作ってみたが、長いし読み解きにくいコードになってしまった。input areaみたいなのは作れないのかな？

int defaultYear = 2015;
int defaultMonth = 5;
int rectRX, rectRY;
int rectLX, rectLY;
int rectSize = 20;
boolean leftButtonOver = false;
boolean rightButtonOver = false;
color currentColor = 200;

void setup() {
  size(800, 700);
  background(currentColor);
  rectLX = width/2-50;
  rectLY = 50;
  rectRX = width/2+50;
  rectRY = 50;
}

void draw() {
  update();
  drawCalendar(defaultYear, defaultMonth);

  if (rightButtonOver) {
    fill(255);
  } else {
    fill(0);
  }
  rect(rectRX, rectRY, rectSize, rectSize);

  if (leftButtonOver) {
    fill(255);
  } else {
    fill(0);
  }
  rect(rectLX, rectLY, rectSize, rectSize);
}

void update() {
  if (overLeftButton(rectLX, rectLY, rectSize, rectSize)) {
    leftButtonOver = true;
    rightButtonOver = false;
  } else if (overRightButton(rectRX, rectRY, rectSize, rectSize)) {
    leftButtonOver = false;
    rightButtonOver = true;
  } else {
    leftButtonOver = false;
    rightButtonOver = false;
  }
}

void mousePressed() {
  if (leftButtonOver) {
    background(currentColor);

    if (defaultMonth == 1) {
      defaultMonth = 12;
      defaultYear -= 1;
    } else {
      defaultMonth -= 1;
    }
  }
  if (rightButtonOver) {
    background(currentColor);

    if (defaultMonth == 12) {
      defaultMonth = 1;
      defaultYear += 1;
    } else {
      defaultMonth += 1;
    }
  }
}

boolean overRightButton(int x, int y, int width, int height) {
  if (mouseX >= x && mouseX <= x+width && mouseY >= y && mouseY <= y+height) {
    return true;
  } else {
    return false;
  }
}

boolean overLeftButton(int x, int y, int width, int height) {
  if (mouseX >= x && mouseX <= x+width && mouseY >= y && mouseY <= y+height) {
    return true;
  } else {
    return false;
  }
}

void drawCalendar(int year, int month) {
  fill(0);
  text(year, width/2-20, 30);
  text(month, width/2+20, 30);

  int days = daysOfMonth(year, month);

  // draw days of the Month
  for (int day = 1; day <= days; day++) {
    fill(50);

    int x = dayOfWeek(year, month, day);
    int y = weekOfMonth(year, month, day);

    fill(0);
    noFill();
    rect(x*100+40, y*100-20, 100, 100);

    color z = setColor(x);
    fill(z);
    text(day, x*100+50, y*100);
  }
}

color setColor(int day) {
  if (day == 0) {
    return #FF0000;
  } else if (day == 6) {
    return #0008FF;
  } else {
    return #000000;
  }
}

int weekOfMonth(int year, int month, int date) {
  return (date - dayOfWeek(year, month, date) + 12) / 7;
}

int daysSum(int year, int month, int date) {
  // 2000,1,1
  int daysSum = 1;
  for (int y = year-1; y >= 2000; y--) {
    if (isLeapYear(y)) {
      daysSum += 366;
    } else {
      daysSum += 365;
    }
  }

  for (int m = month-1; m >= 1; m--) {
    daysSum += daysOfMonth(year, m);
  }

  daysSum += date;
  return daysSum;
}

int dayOfWeek(int year, int month, int date) {
  int daysSum = daysSum(year, month, date);
  // 0 - Sun / 6 - Sat
  return daysSum % 7;
}

boolean isLeapYear(int year) {
  if (year % 4 == 0 && year % 100 != 0) {
    return true;
  } else {
    return false;
  }
}

// 4,6,9,11 has 30 days.
int daysOfMonth(int year, int month) {
  if (month == 4 || month == 6 || month == 9 || month == 11) {
    return 30;
  } else if (month == 2) {
    if (isLeapYear(year)) {
      return 29;
    } else {
      return 28;
    }
  } else {
    return 31;
  }
}