OmniAICreator/Qiita-1.07M huggingface dataset:
OpalでJavaScriptのAPIを呼びだしてみよう

この記事は[Opal Advent Calendar 2016](http://qiita.com/advent-calendar/2016/opal)の9日目の投稿として書いています。

またしても日付を超えてしまいましたが、今日はOpalからJavaScriptのAPIを呼びだしてみようと思います。
OpalはRubyからJavaScriptへソースコードを変換するコンパイラです。なので基本的にはRubyでプログラムを書くことになります。
[Opalのエコシステムが充実してきている](http://opalrb.org/libraries/)とはいえ、やはりそれだけでは足りないこともあります。
JavaScriptを直接実行することができれば、プラットフォームやライブラリで提供されるAPIを呼びだすことができます。
もっとも簡単な方法は、\`で囲まれた中にJavaScriptのコードを書くことです。

例えば、

    `alert('hello world')`


のように書きます。
複数行あるような場合は`%x`記法でも書けます。

```js
%x(
  var str = 'hello world';
  alert(str);
)
```

アラートだけではつまらないのでもうすこし実用的なプログラムにしましょう。
Web Audioを使って音を鳴らすなんでどうでしょう。Qiitaで検索すると適当なサンプルがありますね。
http://qiita.com/ykob/items/462b558192ab09500bf3

昨日紹介したsilicaで作ったプロジェクトに埋めこんでみましょう。
`app/application.rb`を以下のように書きかえます。

*app/application.rb*

```ruby
require 'hyalite'
#require 'menilite'

class AppView
  include Hyalite::Component

  def play
    %x(
      var context = new AudioContext();
      var buffer = null;
      var source = context.createBufferSource();

      var request = new XMLHttpRequest();
      request.open('GET', 'assets/sounds/sample.mp3', true);
      request.responseType = 'arraybuffer';
      request.send();

      request.onload = function () {
        var res = request.response;
        context.decodeAudioData(res, function (buf) {
          source.buffer = buf;
        });
      };
      source.connect(context.destination);
      source.start(0);
    )
  end

  def render
    div(nil,
      button({onClick: self.method(:play)}, 'Play')
    )
  end
end
Hyalite.render(Hyalite.create_element(AppView), $document['.content'])
```

mp3ファイルを`assets/sounds`というディレクトリを作ったその下に`sample.mp3`という名前で置いてください。
mp3ファイルはご自身でご用意くださいね。

Playボタンを押してみてください。サウンドが鳴りましたでしょうか?

さて、これでいつでもJavaScriptを実行できるので、Opalの上でなんでもできることになります。
しかし、せっかくRubyで書けるのに埋め込みのJavaScriptで埋めつくされるのも残念な感じです。JavaScriptからまたRubyに戻ってくる必要がありますね。
そこでOpalには`Native`という機能が用意されています。

`require 'native'`して、`AudioContext`を以下のように作成します。

```ruby
  context = Native(`new AudioContext()`)
```

先ほどの説明のとおり、\`に囲まれたところはJavaScriptのコードになります。
`Native()`は`Native::Object.new()`と同じ意味でNativeオブジェクトを作ることになります。
NativeオブジェクトはRubyのメソッド呼び出しとしてJavaScriptのメソッドを呼びだすことができます。

```ruby
  source = context.createBufferSource
```

このように、JavaScriptで作られたオブジェクトをNativeオブジェクトでRuby側で自由にあつかうことができるようになります。

`play`メソッドはつぎのように書きかえることができます。

```ruby
  def play
    context = Native(`new AudioContext()`)
    source = context.createBufferSource

    request = Native(`new XMLHttpRequest()`)
    request.open('GET', 'assets/sounds/sound.mp3', true)
    request.responseType = 'arraybuffer'
    request.send

    request.onload = Proc.new do
      res = request.response
      context.decodeAudioData(res) do |buf|
        source.buffer = buf
      end
    end
    source.connect(context.destination)
    source.start(0)
  end
```

JavaScriptのfunctionはRubyのProcオブジェクトやブロックで置きかえることができます。

どうでしょうかサウンドは鳴りましたか?

このように`Native`を使えばJavaScriptのオブジェクトをラップすることができます。明日は(というってももう日付が変ってしまいましたが)Web Audioを便利に扱えるライブラリを作ってみましょう。
厳選Emacsよく使うコマンド集

#はじめに
emacsで個人的に**「とりあえずこれは覚えとけ」というコマンド17個**を集めました
一応矢印キーやBackSpace,マウスによる操作は使う前提で書いてます
(学習コストが大きくなるので省略してます)
その他のコマンドは他のサイトを参考にしてください

参考サイト
- [emacs コマンド一覧（置換・コピー・検索・終了）](http://uguisu.skr.jp/Windows/emacs.html)
- [Emacs超入門［1］：Emacsの基本的な使い方とショートカットキー](https://mag.osdn.jp/09/04/06/1138226)

#ぼくのかんがえたさいきょうのEmacsコマンドチートシート
| コマンド        | 説明            |　コマンド　| 説明             | コマンド        | 説明            |コマンド        | 説明            |
|:--------------:|:---------------:|:---------:|:--------------:|:--------------:|:---------------:|:--------------:|:---------------:|
| C-x, C-s | 上書き保存       | C-x 2  | 縦にウィンドウ分割 | C-k | [カーソル~行末]切り取り |C-g |コマンド取り消し|
| C-x, C-w | 名前を付けて保存  | C-x 3  | 横にウィンドウ分割 | C-@ or C-SPC | マーク |C-s | 前方向に検索|
| C-x, C-c | 終了           | C-x 0  | 今のウィンドウを閉じる |C-w | [マーク~現在位置]切り取り |C-r|後方向に検索 |
| C-x, C-f | 開く            | C-x 1  | 他のウィンドウを閉じる|ESC-w |  [マーク~現在位置]コピー |
|                |                |C-x o    | ウィンドウの移動 |C-y |　貼り付け　|

- 「C」はCtrlキー「-」は同時押しを表しています
- 一目でわかるように,**縦方向で似たコマンド**を置き,一つの表に収めて**スクロールせずに見れる**ように努力してます
- 文字を削減して(それでも崩れているが...)説明が正しく伝らない可能性があるので,**動作を確認して自分なりに書きなおす事をお勧めします**
- 「このコマンドは必要だろ」というものがあれば**遠慮なくコメントください**.見逃している可能性が高いです
Entity URIの小技

# はじめに

Drupal8のリリースから１年以上経ちました。機能追加アップデートなども行われますます魅力的なシステムになっていると感じます。

そのような魅力的なDrupal8ですが、今年もDrupal7でのちょっとした小ネタを説明します。。

# Entity URIとは？

Drupal7からエンティティの概念が導入されました。
Drupal7の段階では完全なクラス化こそされていませんが、様々なコンテンツを共通のインターフェイスで操作するための概念が導入されています

エンティティの情報の中にはバンドル名（コンテンツタイプ）や各種コールバック関数名が記憶されています。

その情報の中に、エンティティのコンテンツが表示される際のURI情報も定義されています。

develモジュールをインストールし、Execute PHPから以下のスクリプトを実行することで確認できます。

```php
$info = entity_get_info();
dsm($info['node']['uri callback']);
```
上記を実行することで、ノードでは、node_uriという関数が実行されることでURIが決定されることがわかります

# リダイレクトさせたい

複雑なサイトや複数のサイトを組み合わせる場合、あるコンテンツから別のアドレスへ遷移させたいといった要件が往々にして発生します。

リダイレクト、つまり対象のコンテンツを開いた後に、ページ遷移が行われるもので以下のようなケースが考えられます。

* マイグレーションなどの結果既存コンテンツへリダイレクトを行う
    * このような場合最も高速なWebサーバーによるリダイレクトを行います。
* コンテンツまたはユーザー情報の条件にもとづきリダイレクトを行う
    * このような場合rules, panelsなどを利用するのがよいでしょう。

# URIそのものを変えたい

さて、リダイレクトは対象のコンテンツを開いた後に遷移が行われます。
しかし、Viewsなどでコンテンツを表示する時点でURIを変えたい場合はどうでしょうか？

### Viewsのフィールドの設定で書き換える

幸いDrupalにはViewsモジュールという偉大なモジュールがあります。
またそのために様々な拡張モジュールがあります。

Views Conditional(https://www.drupal.org/project/views_conditional )を利用することでシンプルな要件なら事足りることでしょう。

しかし、Entity Referenceされたコンテンツの場合はどうでしょうか？

### Entity Pathを利用する

https://www.drupal.org/project/entity_path
なかなか良いモジュールでエンティティのバンドルごとに、トークンを使うことで設定できます。
しかしトークンでは条件分岐が出来ません。

例えば、リンクフィールドがあり、リンクが設定されていればリンク先を、設定されていない場合は、元のリンクを利用すると行った要件に利用できません。

### カスタムモジュール化

さて、上記の流れは私が実際に経験したことで、かなり残念な気持ちになりましたので、残念な気持ちで執筆致します。。

今回の要件はこうです。

* リンクフィールドがあり、リンクが設定されている場合書き変える
* ついでにリンクフィールドのターゲット指定も考慮してね。
* コンテンツが表示された時常に上記を考慮してね。（ViewsやReferenceによる埋込)
* ログインユーザーは遷移しないでね。

事実、Entity PathモジュールはEntity URIを書き換えることで実現しています。
そちらを参考にして書いたものが以下になります。

```php
/**
 * Entityの情報を書き換えるために利用するフックを定義します。
 * Implements hook_entity_info_alter().
 */
function your_custom_entity_info_alter(&$entity_info) {
  //今回の例ではノードのarticleタイプに仕込みます
  $entity_info['node']['bundles']['article']['uri callback'] = 'your_custom_article_uri_callback';
}

/**
 * エンティティのURIを返すコールバック関数
 */ 
function your_custom_article_uri_callback($node) {
  //field_redirectという名前のリンクフィールド
  $redirects = field_get_items('node', $node, 'field_redirect');

  //ログインユーザー及びリンクが設定されていないときは元の関数をコール
  if (!user_has_role(1) || !$redirects) {
    return node_uri($node);
  }

  $redirect = reset($redirects);
  $uri = [
    'path' => $redirect['url'], //ここでリンクフィールドのリンクが設定される
    'options' => [
    ]
  ];

  //リンクフィールドのターゲットが指定されている場合、HTML属性を設定する
  if (isset($redirect['attributes']) && isset($redirect['attributes']['target']) && $redirect['attributes']['target']) {
    $uri['options']['attributes']['target'] = $redirect['attributes']['target'];
  }
  return $uri;
}
```

といったように、ごくごく短いコードで実現できます。
これにより、Viewsのレンダリング方法をコンテンツにした時、Referenceでコンテンツにした時に、またはイメージフィールドのリンクをコンテンツにした時などに書き換わります。

# 最終的には

サイトにより色々な要件があるかと思います。これがベストという方法もありません。
条件にあったものをスマートに使いこなしていきたいものです。
コントラストチェッカーのばらつきと対策

これは、[Web Accessibility Advent Calendar 2016](http://www.adventar.org/calendars/1589)の10日目の記事です。
この記事では、アクセシビリティの検証で重要なコントラストチェッカーについてお話します。

# コントラストチェッカーとは？

アクセシビリティに配慮したWeb制作を行うにあたって重要な項目のひとつは、
文字色(前景色)と背景色の選び方です。
それぞれの色に差異がない場合、文字を認識することが困難になり、
アクセシビリティが低下してしまいます。

コントラストチェッカーとは、２つの色のコントラスト比を計算し、
W3Cが定めたWebアクセシビリティの基準(WCAG2.0)に適合しているかを検証するツールです。

WCAG2.0には、コントラスト比を以下のように定めるよう規定されています。

> 1.4.3 コントラスト (最低限) : テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。ただし、次の場合は除く: (レベル AA)
> 大きな文字: サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコントラスト比がある。
> ...

> 1.4.6 コントラスト (高度) : テキスト及び文字画像の視覚的提示には、少なくとも 7:1 のコントラスト比がある。ただし、次の場合は除く: (レベル AAA)
> 大きな文字: サイズの大きなテキスト及びサイズの大きな文字画像には、少なくとも 4.5:1 のコントラスト比がある。
> ...

コントラストチェッカーには色々な種類がありますが、
**それぞれ、コントラスト比の計算方法やWCAG2.0への適合結果に違いがあります。**
この記事では、その差異を簡単に検証し、差異に対する対策を考えます。

# コントラストチェッカーの検証

## 検証したツール

以下3つのコントラストチェッカーを検証しました：

 * [Colour Contrast Analyser(v2.4.0.9)](https://www.paciellogroup.com/resources/contrastanalyser/)
 * [ColorTester](https://alfasado.net/apps/colortester-ja.html)
 * [WebAIM: Color Contrast Checker](http://webaim.org/resources/contrastchecker/)

## 検証方法

以下の表に示すように、前景色と背景色の3つのパターンを考え、それぞれのツールで測定したときに、
コントラスト比と、WCAG2.0への適合結果がどう変わるかを調べました。

| | 前景色 | 背景色 |
| :--: |:--:|:--:|
| パターン1 | #F00000 | #FFFFFF |
| パターン2 | #EF0000 | #FFFFFF |
| パターン3 | #EE0000 | #FFFFFF |

## 検証結果

### [パターン1] 前景色: #F00000, 背景色: #FFFFFF の場合

| ツール | コントラスト比 | 通常サイズAA | 通常サイズAAA | 大きな文字 AA | 大きな文字 AAA |
|:---|---:|---:|---:|---:|---:|---:|
| Colour Contrast Analyser | 4.5:1 | 適合 | 不適合 | 適合 | 適合 |
| ColorTester | 4.4:1 | 不適合 | 不適合 | 適合 | 不適合 |
| WebAIM | 4.46:1 | 不適合 | 不適合 | 適合 | 不適合 |


### [パターン2] 前景色: #EF0000, 背景色: #FFFFFF の場合

| ツール | コントラスト比 | 通常サイズAA | 通常サイズAAA | 大きな文字 AA | 大きな文字 AAA|
|:---|---:|---:|---:|---:|---:|---:|
| Colour Contrast Analyser | 4.5:1 | 適合 | 不適合 | 適合 | 適合 |
| ColorTester | 4.4:1 | 不適合 | 不適合 | 適合 | 不適合 |
| WebAIM | 4.5:1 | 不適合 | 不適合 | 適合 | 不適合 |


### [パターン3] 前景色: #EE0000, 背景色: #FFFFFF の場合

| ツール | コントラスト比 | 通常サイズAA | 通常サイズAAA | 大きな文字 AA | 大きな文字 AAA|
|:---|---:|---:|---:|---:|---:|---:|
| Colour Contrast Analyser | 4.5:1 | 適合 | 不適合 | 適合 | 適合 |
| ColorTester | 4.5:1 | 適合 | 不適合 | 適合 | 適合 |
| WebAIM | 4.53:1 | 適合 | 不適合 | 適合 | 適合 |

## 検証結果から気づくこと

上記の結果から、以下のことがわかります:

* ツールによって、色の適合/不適合の結果に違いがある。
* ツールによって、算出されるコントラスト比にも違いがある。
* コントラスト比が4.5:1 と算出されても、通常サイズAAで不適合となるツールがある。

# 対策

## コントラスト比に余裕を持たせる

4.6:1など、WCAG2.0の基準値に対して余裕を持たせるようにすると、
ツールによる適合結果のばらつきが生じにくくなります。
WCAG2.0の基準値ギリギリを攻めるのはやめたほうがよさそうです。

## 使用するコントラストチェッカーを統一する

コントラストチェッカーを統一しておくと
特に複数人で開発を行う場合、算出されるコントラスト比が異なることによって
無駄なコミュニケーションコストが発生することを抑えられます。

# まとめ

コントラストチェッカーは便利なツールですが、ともすると余計なコストを生じさせてしまいます。
それぞれのチェッカーが出力する結果に差異があることを理解しておきましょう。
raspbian 2016-11-25 をインストールしてssh接続まで

[以前のバージョンでもインストール](http://qiita.com/t114/items/20d8825120b2b910c6d0)しているので、今回はディスプレイ、キーボードなしでセットアップに挑戦してみた。
以前と基本的に変わらない部分は省略してます。

#raspbian 2016-11-25をダウンロードしてmicroSDに書き込む
 - ダウンロード元  
 https://www.raspberrypi.org/downloads/raspbian/
 - 書込みソフトダウンロード元  
 http://www.si-linux.co.jp/techinfo/index.php?DD%20for%20Windows  
（実行時は右クリックから管理者として実行してください）

#起動時にsshが有効になるようにする
2016-11-25版からsshがデフォルトで無効になりました。

 - raspbian起動時にsshを有効にしておくため書き込んだmicroSDの最上位（/boot）に`ssh`という名前の空ファイルを作成しておきます。
 - Bonjourというソフトが必要なため、iTunesをインストールするか、windowsの場合は[Bonjour Print Services (Windows)](https://support.apple.com/kb/DL999?locale=ja_JP&viewlocale=ja_JP)をインストールしておきます。

#raspberrypiの起動と接続確認
 - raspberrypiに先ほど作成したmicroSDを挿入する。
 - LANケーブルでraspberrypiとPCを直結する。
 - `raspberrypi.local`にsshで接続できることを確認する。  
 `$ ssh pi@raspberrypi.local`

#WiFi設定
 - 下記コマンドを[SSID] [password]を書き換えて実行する。  
`$ sudo sh -c 'wpa_passphrase [SSID] [password] >> /etc/wpa_supplicant/wpa_supplicant.conf'`
 - [password]の内容も`/etc/wpa_supplicant/wpa_supplicant.conf`に書き込まれてしまうため消しておくこと。
 - reboot後WiFiが繋がっているか確認する。

#余談
 - raspbian 2016-09-23からrealvncがプリインストールされ、デスクトップで操作したい場合は、realvncで繋げば操作可能になったので、軽く使う分には、もうraspberrypi用のディスプレイやキーボードは不要になる？
さいたまげーむすからゲーム業界で働くまで

こちらの日付で記事を担当することになりました、アオキと申します。
この記事では、自分がゲーム業界で働くまでの話をサクッと書きたいと思います。

＝＝＝＝＝＝＝＝＝＝＝＝＝
<b>■簡単に自己紹介</b>
![1.jpg](https://qiita-image-store.s3.amazonaws.com/0/152568/c1ad0f7b-bb6b-b788-39a2-1535d819bb69.jpeg)

アオキです。フリーランスで単発のキャラクターイラスト等を描いておりました。
デザイン専門学校卒で、ゲーム超大好きマンです。アクションとホラーが好きです。
＝＝＝＝＝＝＝＝＝＝＝＝＝

<b>■ゲーム作ってみたいと思った流れ</b>
私はゲームをプレイすることは大好きだったのですが、
ゲーム制作自体は関わったことすらない人間でした。
ある時、スマホゲームがスゴイ流行してきた頃、
たまたまUnityのゲームエンジンの話を聞きました。

フリーで落とすことが出来て、GooglePlayに実際に作ったのがあげられて、
更に自分みたいなイラストレーターでも作ろうと思えば作れるというのが魅力的でした。


<b>■一回壁に当たる</b>
![3.jpg](https://qiita-image-store.s3.amazonaws.com/0/152568/a775788e-63af-4f1b-6599-7eff1c8458a2.jpeg)

と、いっても壁に当たるときは当たります。
自分で参考書を3冊買ってきて、かたっぱしから沿って実行してみました。
（人により、それを写経と呼ぶらしい）
でもプログラミングなんて初めてだから、エラーがでた時になんでか全くワカラナイ。
ゲーム畑の知人はいないので、誰にも聞けない。
正直毎日わからないことだらけで、物凄く勉強の歩みが遅かったなと思います。


<b>■さいたまげーむすにお世話になりました</b>
![4.png](https://qiita-image-store.s3.amazonaws.com/0/152568/f7c44137-b321-a424-85ff-15737c1ac28a.png)

そこで、比較的近所で勉強会が行われていた「さいたまげーむす」に参加させていただきました。
実際のプログラマーの方にわからないことをどんどん聞けたり、
一緒に勉強している方と情報交換したりと、勉強が一気に捗りました。
そして、参加できそうな機会があるたびに、
勉強会講師のアシスタントをさせていただいたり、実際に講師もやらせていただきました。


<b>■今はプランナーをやってます</b>
いくつかスマホアプリを完成するとこまで経験して、
次は実務として働いて経験を積みたいなと思うようになりました。
結果として、スクリプター兼プランナーの立ち位置で、有名なゲーム会社で派遣社員してます。
先日働き始めて1年になりました。勉強1年＋実務1年になり、
2年で一気に環境が変わったことを感じてます。毎日すごいたのしいです。



<b>■大事だと感じたこと</b>
・ゲームだいすきなこと
・なんでも積極的に挑戦してみること
・様々な人との情報交換・コミュニケーション

ゲームが大好きなので、モチベーションが保てたし、
ゲームの定番や作ってみたいアイデアが出ました。
物凄いシンプルなゲームから、さいたまげーむすの師匠から出された課題に沿って
色々挑戦したことが、結果的に成長につながったと感じます。
そして全てにおいてコミュニケーションは物事に挑戦するきっかけになったりします。


<b>■VR勉強会開催！</b>
長々書いて失礼しました！
今度24日に行われる勉強会も、良いきっかけになると思います。
ジャンルは今話題のVR。ハンズオンで作れるのでVRのしくみも学べます。
懇親会で、集まった人たちと色々情報交換をするのもおすすめです。
当日は皆様、どうぞお楽しみくださいませ！
LJの力計算のSIMD化ステップ・バイ・ステップ その6

# はじめに

そうとうがんばってSIMD化して、もう速くならないだろうと思ってたら[kohnakagawa](https://github.com/kohnakagawa)さんから「もう少し高速化しました」というプルリクが来て慌てた話。

* [その0](http://qiita.com/kaityo256/items/5be3ce71a6ff9522a0e6) 
* [その1](http://qiita.com/kaityo256/items/4d34bf144122b78fcf49)
* [その2](http://qiita.com/kaityo256/items/e6c41b94c5cc5189c5cc) 
* [その3](http://qiita.com/kaityo256/items/7f16ab7f2281bb03e83e) 
* [その3.5](http://qiita.com/kaityo256/items/b145b2d83becccd0aa53) 
* [その4](http://qiita.com/kaityo256/items/636c5a407f5a6c61bb21) 
* [その5](http://qiita.com/kaityo256/items/dacbe5a16abbc83eb107)
* [その6](http://qiita.com/kaityo256/items/34c371c6d040be1bdc30)  ←イマココ

コードは
https://github.com/kaityo256/lj_simdstep
においてある。

# どこを直したか

一度に256ビット取ってくる命令を使うため、配列をパディングして、(x,y,z,0)という並びにしていた。それを4要素のベクトルとしてロードして、相対座標ベクトルを作るのだが、ループを4倍展開しているので、

```math
(dx_1, dy_1, dz_1, 0)\\
(dx_2, dy_2, dz_2, 0)\\
(dx_3, dy_3, dz_3, 0)\\
(dx_4, dy_4, dz_4, 0)
```

という四本のベクトルができる。これを、それぞれ自乗してからシャッフルして足すことで、相対距離を作っていた。

```math
(dr^2_1, dr^2_1, dr^2_1,0) \\
(dr^2_2, dr^2_2, dr^2_2,0) \\
(dr^2_3, dr^2_3, dr^2_3,0) \\
(dr^2_4, dr^2_4, dr^2_4,0) \\
```

で、これを転置して、

```math
v_r = (dr^2_1, dr^2_2, dr^2_3, dr^4)
```

を作ってから力の計算を4並列でやっていた。しかし、どうせ最後に転置するなら、最初に転置した方が計算量が減る。つまり、

```math
(dx_1, dy_1, dz_1, 0)\\
(dx_2, dy_2, dz_2, 0)\\
(dx_3, dy_3, dz_3, 0)\\
(dx_4, dy_4, dz_4, 0)
```

を転置して、

```math
v_x = (dx_1, dx_2, dx_3, dx_4)\\
v_y = (dy_1, dy_2, dy_3, dy_4)\\
v_z = (dz_1, dz_2, dz_3, dy_4)\\
v_0 = (0, 0, 0, 0)
```

を得たら、あとは

```math
v_r = v_x^2+v_y^2+v_z^2
```

でできるじゃん、というもの。言われてみればそれはそうだ。なんで気が付かなかったんだろ○|￣|＿ 

# 結果

というわけで上記を実装したものをこれまでと同条件で測定。

| 計算手法 | 実行時間[sec] |備考 |
|:-:|:-:|:-:|
| pair  |  8.201647  |  ペアごとにループをまわしたもの |
| pair_swp  | 7.094673 |  上記をSWPしたもの |
| pair_swp_intrin  |  4.282396   |  上記を4倍展開してSIMD化したもの |
| sorted| 7.040513| i粒子でソートしたもの|
| sorted_intrin| 3.889211 | i粒子でソートしたものをSIMD化したもの|
| sorted_swp| 5.806741 | i粒子でソートしたものをSWPしたもの|
| sorted_swp_intrin | 3.272044  | i粒子でソートしたものをSWPしたものをSIMD化したもの|
| sorted_swp_intrin_mat_transp| 2.980598  | 上記の転置順序を変えたもの|

10%弱高速化されましたな。

コードは以下に。

https://github.com/kaityo256/lj_simdstep/tree/master/step6

# まとめ

もともと、4倍展開する前にSIMD化してたものを4倍展開してから馬鹿SIMD化したので、いろいろ計算した後、最後に転置する形しか考えつかなかった。でも、プルリクもらってよく考えたら、先に転置しちゃった方が計算量少ないから速い。うーん、まだまだ修行が足りませんな。

この様子じゃ、データ構造とか工夫したり、ループのほどきかた工夫したりしたら、まだまだ高速化の余地がありそうですね。

オレはようやくのぼりはじめたばかりだからな このはてしなく遠いSIMD坂をよ・・・

こんどこそおしまい？
開発速度が上がる順序を考慮して実装を行っていこう

[開発のしやすさを重視した仕様を作成しよう](http://qiita.com/nonbiri15/items/439a9a3d7638aee2f38d)に書き足してきた内容が多くなったので、別記事にいたしました。

実装の状況によっては、開発速度に影響する項目があります。そのような項目は早い段階で実装していきましょう。

- **「現時点での実装の完了比率」よりも「開発速度」に関心があります。**

開発速度を上げきれていない要因がある場合、それらの要因を解決することを強く、マネージャーに要望したいと思います。
「個々の実装の完成度」と「個々の実装とそれを利用する側のコードとの間で原因の切り分けのできる設計」だったら、切り分けのできる設計に変更することの方こそ重要と考えます。個々の実装の完成度は、開発の産物にしか過ぎません。しかし、原因の切り分けのできる設計というのは、チームとしての開発の進め方（いわば制御方法）です。
あなたの抱えているプロジェクトにそのような開発速度を落としている要因があったら、立ち向かい続けることが大切です。
「分かる人が注意深くデバッグすれば、正しいか問題があるかどうかわかる」よりは「ログに書き残された情報を見れば誰でも簡単に確認できる」ことを希望します。「数値を電卓をたたけば妥当性をチェックできる」よりは、「図を見れば分かる」の方を希望します。

- **「設計の完成度」よりも、「設計と実装の改善の速度」に関心があります。**

　人は最初から完成度が高い設計などできやしないものだから、「設計と実装の改善の速度」に関心があります。設計の完成度を机上で上げきれることには限界があります（そうでない人もいるかもしれませんが）。実装しやすい仕様で実装して早めに課題を出すことです。「○○というすばらしい手法ではとても高速に高精度で処理できます。ただし、そのためには△△の期間がかかります」よりは、「hogehogeという ほどほどの手法では、限界がありますが、そこそこ動きます。しかも使い出すのは簡単です。」の方をまずは選びたいと思います。その手法が最終品には使わないものであっても、少しでも早い段階で動き出すことは開発への見通しを立てやすくするものです。」

- **少しずつのリファクタリングも、開発しやすさにつながります。**

 コードに機能を追加しようと思ったら、その前に該当部分をリファクタリングできないかどうかを考えることにしています。アジャイルな開発手法をとっていることもあって、そのような改変の自由度は持ち合わせています。リファクタリングをしないままに機能を追加しようとすると、ほぼ同じ機能のインタフェースが違う関数の存在によって、一方だけ機能を追加したのに、もう一方には追加していないために、バグを誘発する原因を埋め込んでしまったりします。単一責務の原理(single responsibility principle)を満たしていないコードは、開発のしやすさをそこなうものです。コードを書き、コードをリファクタリングする経験を積むと、どのようなクラス設計や関数の仕様をすべきかがわかってきます。リファクタリングも開発のしやすさに対して重要な項目です。

- **不要なコードを削除しよう**
　過去のしがらみのために使われていないコードが残ったままになっていませんか。そのようなコードは、ソフトウェア開発の見通しを悪くします。ソースコード中で検索したときに、そのコードが見つかることで、ある関数の実装を変更したときの変更が及ぶ範囲を必要以上に見積もることになります。ある要因をさぐっていくときに、本筋ではない部分に迷い込むこともなくなります。そのような要因が開発のしやすさにつながります。
 あるソフトウェアを別のOSや別のターゲットボードに移植しようと考えているなら、まず不要なコードを削除することです。OpenCVなどのライブラリを新しいバージョンにそろえるように開発中のソースコードを改変していく場合も、まず不要なコードを削除することです。それによって、メンテナンスする必要のあるコードが減ることで、開発がしやすくなります。

- **本筋じゃないことでの厄介ごとを減らしていこう。**
 ある機能のデバッグには、その状況を生じるまでメインのプログラムの実行をすすめる必要がある。そうすると、その機能をデバッグするには、その状況を作るまでの手順を毎回行う必要を生じたりする。そこに、ちょっとした厄介ごとのために、プログラムがうまく動かない状況におちいることを減らそう。開発のしやすさを損なっているならば、対策をとろう。不便さを我慢するのはよくない。
 
- **誤解をまねく変数名・関数名を直そう**
　変数名や関数名が誤解をまねく名前を使っていると、その名前が引き金になって、バグを引き起こすことがある。コードを読む際の理解に時間がかかるようになります。だからよりよい名前をつけることでコードの利用がしやすくなっていきます。そのような修正はリファクタリングの常套です。ただ、チームとして開発をしている場合には、その改変をするタイミングをチームメンバーと意見交換して進めていくのがよいでしょう。


- **楽しいと開発メンバーが感じる開発をしよう。**

　開発速度が改善するのは、開発メンバーが自分の仕事を楽しいと感じられるときです。自分の仕事が楽しいと少しでも感じられるように、開発環境を整えること、開発の方向性を設定すること、1人で課題を抱え込まないで済むように、楽しく開発ができるように工夫をすることです。



付記：
　**不便さを我慢するのは美徳ではない。**
　[Ratfor](https://ja.wikipedia.org/wiki/Ratfor)という言語を聞いたことがありますか。
FORTRAN77やそれ以前の規格のFORTRAN66では制御構文上の制約が多かった。ループ構文はDO ループしかなかった。そのような制限の強い処理系でも、C言語風の制御構文
if-else, while, for, do, repeat-until, break, next
が「C言語から恥知らずにも盗まれ」て持ち込まれています。
　この例を見ると、制限が強くて不便な処理系でも、wrapperやpreprocessorを導入することで、使い勝手のよい処理系に変えてしまうことが可能な場合があることが分かります。この方式の利点は、既存の処理系の仕様を変える必要がないため、自分の権限の及ばない部分に由来する不便さを解消できるという点です。
　開発速度が上がるようにしていくこと。それこそが開発を成功させる重要な要因の１つです。
Spring Cloudのdependencies


こんなにあるのねorz

|Category|Name|
|:-------|:----|
|Cloud Core|Cloud Connectors|
||Cloud Bootstrap|
||Cloud Security|
||Cloud OAuth2|
||Cloud Task|
|Cloud Config|Config Client|
||Config Server|
||Zookeeper Configuration|
||Consul Configuration|
|Cloud Discovery|Eureka Discovery|
||Eureka Server|
||Zookeeper Discovery|
||Cloud Foundry|Discovery|
||Consul Discovery|
|Cloud Routing|Zuul|
||Ribbon|
||Feign|
|Cloud Circuit Breaker|Hystrix|
||Hystrix Dashboard|
||Turbine|
||Turbine Stream|
|Cloud Tracing|Sleuth|
||Zipkin Client|
||Sleuth Stream|
||Zipkin Stream|
||Zipkin UI|
||Zipkin Server|
|Cloud Messaging|Cloud Bus AMQP|
||Cloud Bus Kafka|
||Stream Rabbit|
||Stream KAfka|
|Cloud AWS|AWS Core|
||AWS JDBC|
||AWS Messaging|
|Cloud Data Flow|Local Data Flow Server|
||Data Flow Shell|
|Cloud Cluster|Cluster Redis|
||Cluster Zookeeper|
||Cluster Hazelcast|
||Cluster Etcd|
|Cloud Contract|Cloud Contract Verifier|
||Cloud Contract Stub Runner|
||Cloud Contract WireMock|
|Pivotal Cloud Foundry|Config Client(PCF)|
||Service Registry(PCF)|
||Circuit Breaker(PCF)|

サーキットブレーカあたりに興味あり。
IBM Bluemix Container Serviceを少しだけ触ってみる（途中）


この記事は、[Bluemixアドベントカレンダー](https://teratail.com/Bluemix)の12/3分の記事です。空いていたので書いてみました。

Bluemixを触る機会があったので、ひとまずコンテナのサービスを見つけたので触ってみることにしました。

最近ブラウザコンソールもリニューアルされたようなので、一応資料的になるかな。

## IBM Containerとは？

IBM Bluemix内にあるDockerコンテナサービス。
Dockerの実行環境とDockerのプライベートリポジトリを提供してくれる。

2014年12月にIBM社とDocker社が提携をしていたようです。一応お墨付き的な感じでしょうか。

概要は、古いですが以下のスライドが分かりやすかったです。

> Ibm containers の紹介 v2
> http://www.slideshare.net/hideakitokida/ibm-containers-v2

公式のドキュメンテーションはこちら

> Getting started with IBM Containers
> https://console.ng.bluemix.net/docs/containers/container_index.html

## やってみる

ここからさらってく。

> Getting started with IBM Bluemix Container Service
> https://console.ng.bluemix.net/docs/containers/container_index.html

まず[カタログページ](https://console.ng.bluemix.net/catalog/?search=container)からコンテナAppを探すと、6つほど候補が出てくる。



![Unknown-1.png](https://qiita-image-store.s3.amazonaws.com/0/28666/26b7b4b4-7d44-d743-a3b7-00ec819059ab.png)


* ibm-backup-restore
  * ???
* ibm-integration-bus
  * っていうエンタープライズ向けのサービスバス
* ibm-node-strong-pm
  * StrongLoop Process ManagerというNode.jsのためのプロセスマネージャ、らしい
  * https://console.ng.bluemix.net/docs/images/ibmnode_strong_pm/ibmnode-strong-pm_starter.html
* ibm_wa_agent
  * ???
* ibmliberty
  * IBM WebSphere Application Server Libertyという製品のイメージ？
* ibmnode
  * 独自のNode.jsアプリを作るときの親として使うとよいらしい
 
あまりIBMの製品を触ったことがなかったからか、nodeはわかるけど他が全然わからん・・・。
`ibmliberty`はよくわからなくてもサンプルとして有用だから使ってみな、ドキュメントに書いてあった気がしたので、これでやってみましょう。

![Unknown-2.png](https://qiita-image-store.s3.amazonaws.com/0/28666/5490e5f8-bf6c-d925-cc41-5056fc752a0a.png)

初めてContainerサービス使うときはnamespaceを設定しろと言われる。好きな名前を設定する。

![Unknown-1 copy.png](https://qiita-image-store.s3.amazonaws.com/0/28666/84758c8a-154f-0d25-c7f1-0f7fe3657773.png)

シングルコンテナとマルチコンテナと選べる。せっかくだしマルチコンテナにする。
Container group nameはこのアプリ名と言っても過言ではない部分。適当に決める。サイズはPico、個数は3コでいいでしょう。

ホスト名とドメイン名が勝手に決まってくれる。
ポートは`9080`を選択。
`Enable automatic recovery`があると動作していないときに自動で再起動をしてくれるらしい。

container group nameを`ikuwow-container-group`にしたので、
`http://ikuwow-container-group.mybluemix.net`にブラウザでアクセスすると

![Unknown-2.png](https://qiita-image-store.s3.amazonaws.com/0/28666/6aff620d-ddfc-f24c-e826-559f4120a7cd.png)

Libertyが正しく動作しているのが確認できます。

ここで

```
502 Bad Gateway: Registered endpoint failed to handle the request.
```

ってでたあなたはもう少し待ってみるとちゃんと立ち上がります。

![Unknown-2 copy.png](https://qiita-image-store.s3.amazonaws.com/0/28666/ecbb8d29-e96c-8991-e4f8-15e04003bbec.png)


## 自作のimageをpushしてdeployする（途中）

今度はこちらをやります。


> Tutorial: Creating a single container web application
> https://console.ng.bluemix.net/docs/containers/container_gettingstarted_tutorial.html#container_gettingstarted_tutorial

（土日にやる・・・。）
Selenium Builderは本当に次世代のIDEなのか

この記事は[Selenium/Appium Advent Calendar 2016](http://qiita.com/advent-calendar/2016/selenium_and_appium)の9日目の記事です。

# Selenium Builderについて

**次世代のIDE**と言われているSelenium IDEと同様、ブラウザ操作を記録(※して再生)することができるFirefoxの拡張機能です。
Selenium IDEの後継として開発されています。
Selenium Builderは、Selenium IDEと違って、Selenium Webdriver形式をサポートしていることが特徴です。

こちらの記事に詳しいことは書かれているので、割愛します。
[次世代のIDE、Selenium Builderまとめ](http://blog.trident-qa.com/2013/12/selenium-builder-vs-ide-recap/)

![seleniumbuilder-3.x.png](https://qiita-image-store.s3.amazonaws.com/0/76009/baff5674-060d-2d69-499e-5687cb7046c8.png)

# Selenium Builderの良いところ

Selenium Builderは、記録したスクリプトを、Java、Ruby、Pythonといった他のプログラミング言語にエクスポートすることができます。
![スクリーンショット 2016-12-09 23.55.41.png](https://qiita-image-store.s3.amazonaws.com/0/76009/9c9f302f-0cd8-7d78-25d1-21c6984f15e7.png)
また、非常にシンプルなコードをエクスポートするため、スクレイピング/クローラー用途には向いていると思います。
一方、Selenium IDEは、限られた言語にしかエクスポートできず、すぐにテストが出来るように余計なものまでエクスポートします。

# Selenium Builderの良くないところ・問題点

依然としてSelenium Builderは、Selenium IDEと比べて使い勝手が悪く、機能も劣っています。

## **※ローカル実行廃止事件**

~~Firefox 44あたり~~から、セキュリティの問題で、記録は出来るものの再生が出来なくなってしまいました。
["Run test locally" missing (+workaround) · Issue #6](https://github.com/SeleniumBuilder/selenium-builder/issues/6)

※正確には、Firefox47より後から再生ができなくなったようです。

Selenium IDEでは、最新のFirefoxでもIDE上で再生できるのにどうしたことでしょうか。
2016年12月現在でも、廃止されたままの状態です。

## ローカル実行

ローカル実行をしたければ、復活するまでは、Firefox Developer Edition上で古いバージョンを動かすしかありません。

### 古いバージョンをインストール

~~Firefox Developer Editionをインストールしましょう。~~
https://www.mozilla.org/ja/firefox/developer/

~~Firefox Developer Edition上で署名が入っていない拡張機能をインストール出来るように設定する必要があります。~~

残念ながら、今はFirefox Developer Editionでローカル実行を行うことが出来ません。

下記からFirefox47をインストールしましょう。
https://ftp.mozilla.org/pub/firefox/releases/47.0.2/

![seleniumbuilder-xpi.png](https://qiita-image-store.s3.amazonaws.com/0/76009/aeda0e05-3073-3f0e-ac23-07558afbdb8b.png)

アドレスバーにabout:configと入力して開いて、xpinstall.signatures.requiredと検索します。
その次に、xpinstall.signatures.requiredをダブルクリックし、falseに変更します。

設定が終わったら、下記のリンクを開き、Github上ののRawをクリックして、ダウンロードします。
https://github.com/SeleniumBuilder/se-builder/blob/gh-pages/selenium-builder-2.3.5.xpi

その次に、ドラッグアンドドロップをしてインストールを行う流れてす。

![seleniumbuilder-install.png](https://qiita-image-store.s3.amazonaws.com/0/76009/08b1cd86-8a6e-7e0b-7c8d-b115ef364e8d.png)

### ローカル実行復活の見込み

~~復活するまでに[相当時間がかかるらしい](https://addons.mozilla.org/ja/firefox/addon/selenium-builder/reviews/828376/)です。~~

Firefoxの大幅なアップデードにより、見込みが消え失せました:sob:

## 開発停滞

~~Selenium Builderは、開発が停滞気味で少し心配です。~~
[Network Graph · SeleniumBuilder/se-builder](https://github.com/SeleniumBuilder/se-builder/network)

実質開発が終了しているようです...。

# まとめ

Selenium Builderは、2016年末でも次世代のIDEとは言い難い状況です。

この記事にあるように、Selenium IDEは大きな節目を迎えようとしています。
[Selenium IDEはこの先生きのこるのか](http://qiita.com/hiroshitoda/items/7903c07b076e1d394e5f)

果たしてどうなるのでしょうか。

※ここ最近になってChromeでも動くIDEが乱立しているようですが、Selenium Builderのような次世代のような使い勝手の良いIDEは確認されていません。Selenium Builderがいつか戻ってきて欲しいと切に願っています。それまでFirefox47で頑張っていこうと思います。

# 参考

[Selenium Builder neue alternative zu Selenium IDE](http://www.qytera.de/blog/selenium-builder-alternative-zu-selenium-ide)
NimのAsyncHttpServerで遊ぼうとしてみたら


# 概要

nimのPure実装されたasynchttpserverモジュールで遊んでみようとしたら、コアライブラリにパッチ入れることになった

## まずはコード

サーバーのサンプルコードを動かしながら、Requestオブジェクトに何が入っているかを確認しようとしたのですが、ヘッダーをダンプしようとしたら、ヘッダーのキー名を取得できるapiが見つからず・・・

ないなら作ってしまえということで、httpcore.nimにパッチとして以下のコードを追加し、nimcacheをクリアして再コンパイル。

### パッチソース

```nim:${nim_dir}/lib/pure/httpcore.nim

proc keys*(headers: HttpHeaders): seq[string] =
  ## Returns headers key  
  var ret:seq[string] = @[]
  for key in  headers.table.keys:
    ret.add(key)
  return ret
]#
```

### サンプル

```nim:httpserver_test.nim

import asynchttpserver, asyncdispatch
import sequtils
import strutils

# サーバー作成
var server = newAsyncHttpServer()

# 処理ハンドラ
proc cb(req: Request) {.async.} =
  echo "Headers = " , $req.headers.keys() # !! このkeys()を追加した
  echo "Protocol = " , req.protocol
  echo "Url = " , $req.url
  echo "HttpMethod = " , req.reqMethod
  echo "HostName = " , req.hostname
  echo "Body = " , req.body

  await req.respond(Http200, "Hello World")

# ずっと待つ
waitFor server.serve(Port(8080), cb) 

```

curlコマンドで、POSTを実行する

```shell-session
$ curl -v -H "Accept: application/json" -H "Content-type: application/json" -X POST -d '{"user":{"first_name":"firstname","last_name":"lastname","email":"email@email.com","password":"app123","password_confirmation":"app123"}}'  http://localhost:8080/api/1/users
Note: Unnecessary use of -X or --request, POST is already inferred.
*   Trying ::1...
* connect to ::1 port 8080 failed: Connection refused
*   Trying 127.0.0.1...
* Connected to localhost (127.0.0.1) port 8080 (#0)
> POST /api/1/users HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/7.47.1
> Accept: application/json
> Content-type: application/json
> Content-Length: 137
> 
* upload completely sent off: 137 out of 137 bytes
< HTTP/1.1 200 OK
< Content-Length: 11
< 
* Connection #0 to host localhost left intact
Hello World

```

# nim側の表示

```
Headers = @[content-length, user-agent, accept, content-type, host]
Protocol = (orig: HTTP/1.1, major: 1, minor: 1)
Url = (scheme: , username: , password: , hostname: , port: , path: /api/1/users, query: , anchor: , opaque: false)
HttpMethod = POST
HostName = 127.0.0.1
Body = {"user":{"first_name":"firstname","last_name":"lastname","email":"email@email.com","password":"app123","password_confirmation":"app123"}}

```

## 本来の目的には届かなかったけど・・・

あ、ライブラリのソースも修正できちゃうのね・・という驚きでした
GoogleがShakaPackagerのWin用バイナリを配布してくれないので自分でビルドする話。俺、このビルドが成功したら有給取るんだ・・・

## 困ったことに
未だ、ネクストスケープ配信事業本部 Advent Calendar 2016 に空いている日がある・・・
前回と同じく、これはそんな空き日を埋める小ネタの話。
今回もまた、恐らく大半以上の人にとって知る必要のない小ネタです。

## そもそもShakaPackagerとは？
GoogleがGithubで公開している、MPEG-DASHのパッケージャです。
https://github.com/google/shaka-packager
mp4ファイルをMPEG-DASHで配信できるフォーマットに変換するツール、と言うと分かりやすいでしょうか。
パッケージングだけでなく、WidevineDRMで暗号化出来たり、mp4からApple HLSの作成も出来たりします。
専門的になりますが、暗号化の際にAES-CBCモードが使えたりして何気に最先端です。

## そんなShakaPackagerですが
何故か、**Windows用のバイナリが配布されていません**。Linux用とMacOSX用のバイナリしか配布されていません。
READMEとか読むと、Dockerでやれば？、みたいな事が書いてあります。

## と言う事で自分でビルドしてみます
1. 何はなくとも、コンパイラーとかリンカーが必要なのでVisualStudioをインストールします
https://www.visualstudio.com/ja/downloads/
ここからCommunity Editionをダウンロードして、インストールの際にC++の環境を忘れずにチェックしてインストールします。
　

2. ShakaPackagerをビルドするディレクトリを適当に、C:\shaka\srcとかに決めます
　
3. C:\shakaにGoogleのビルド用ツールのdepot_toolsをダウンロードします

```
cd c:\shaka
git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git .\depot_tools\
```
　
4. c:\shaka\srcをgithubのリポジトリに設定します

```
depot_tools\gclient config https://github.com/google/shaka-packager.git --name=src --unmanaged
```
　
5. ここでちょっと一息
ビルドするのは、x86向けですか？それともx64向けですか？
もしもx64向けにビルドする場合は、

```
set GYP_DEFINES=target_arch=x64
```
の環境変数設定が必要です。尚、x64向けのビルドは色々と下ごしらえが面倒なので、ここではx86用のビルドを前提に話を進めます。
x86向けにビルドするのなら

```
set GYP_DEFINES=target_arch=x86
```
になりますが、この設定はしなくてもx86用のビルド設定は勝手にされるので、する必要はないと思います。
　
6. ソースファイルを同期する 

```
depot_tools\gclient sync
```
　 
7. ここでまた一息
どうも日本語環境でビルドしようとすると、ビルドの途中でコケるのでOSの言語設定を英語にします。
自分はWin7しか環境が無いので、Win7の場合だと

![0_area_lang_control.jpg](https://qiita-image-store.s3.amazonaws.com/0/146592/01986043-187d-fb77-20bb-2aad327e43fd.jpeg)

ここで

![1_locale_us.jpg](https://qiita-image-store.s3.amazonaws.com/0/146592/357a81ee-1448-66e1-82e0-4c77f39477a9.jpeg)

こんな風にシステムロケールを変更します。
　
8. ビルドする
リリースビルドをするのなら

```
cd src
..\depot_tools\ninja -C "out\Release" -k 100
```
デバッグビルドをするのなら

```
cd src
..\depot_tools\ninja -C "out\Debug" -k 100
```
です。

## x64用ビルドの際は

```
cd src
..\depot_tools\ninja -C "out\Release_x64" -k 100
..\depot_tools\ninja -C "out\Debug_x64" -k 100
```
みたいなコマンドでビルドするのですが、大量のエラー扱いされるワーニングが出てコンパイルが通らないので、
out\Release_X64
out\Debug_x64
の配下の *.ninja ファイル内の cflags に設定してある /WX を /WX- に変えておいた方が良いと思います。

それから、どうも gclient は gclient sync の際に環境変数を見て、x86向けとx64向けのソースファイルを取り分けている様なので
x86向けとx64向けのソースは分けて置いたほうが良いかなあ、とか思います。

## と、ここまで書いておいて何ですが
https://ci.appveyor.com/project/shaka/shaka-packager
で自動ビルドがされていて、packager.exeだけが欲しいなら、ここからダウンロードした方が早いです。（笑）
カッコつけないシェル関数定義

　[Shell Script Advent Calendar 2016](http://qiita.com/advent-calendar/2016/shell-script)にコネタを書きます。

　シェル関数の定義というと、こんな構文のイメージかと思います。

```sh:
foo () {
    ……
}
```

　ちなみに、bashやzshなどいくつかのシェルでは、頭に`function`を付けられたり、そのかわりに`()`を省略できたりしますが、そこは今回の本質ではないので省略します。

　さて、この`{ … }`は、実は`{ echo pen; echo pineapple; } > pp.txt`のように書くときの`{ … }`と同じです。

　かわりに算術式評価`(( … ))`を指定してみましょう。算術式評価はbash、ksh、zshで使えます。

```sh:
countup () ((
    count++
))
```

　実行してみます。

```sh:
$ count=1
$ countup
$ echo $count
2
```

　想定した動作になっているようです。

　次にif文を指定してみましょう。ファイルが存在したら「exist」を、存在しなければ「not exist」を出力する関数はこんな感じで書けます。

```sh:
is_exist () if [ -e "$1" ]; then
    echo exist
else
    echo not exist
fi
```

　for文やwhile文を指定する手もありますね。

```sh:
echoargs () for x; do
    echo "$x"
done
```

　なお、単一コマンドを指定できるかどうかはシェルによって違うようです。たとえば次の例は、筆者のところでは、dashとzshでは定義できましたが、bashでは文法エラーになりました。

```sh:
sayhello () echo hello
```

　dashのmanpageを見ると、シェル関数定義の構文は次のように書かれています。

> The syntax of a function definition is
> 
> name () command

　bashのmanpageでは次のように書かれています。

> Shell functions are declared as follows:
> 
> name () compound-command [redirection]

　bashでは複合コマンドを指定することになっていますね。

　以上、知っていても雑談ネタにしかならないだろうムダ知識でした。
Fuseでのアプリの署名のやりかた

##署名について[（公式サイトへ）](https://www.fusetools.com/docs/preview-and-export/signing)

ストア申請用のアプリを書き出すには、署名情報が必要になります！各OSの署名の設定について書きます。（基本的に公式サイトの簡単な翻訳になります。）これが終わったら、各コンポーネントとかについて、実際に作りながら書くつもりです！

基本的には、プロジェクト作成時に自動で作られた、.unoprojファイルに署名情報を書いていきます！

###◎Android

まずは、keytoolを使って、証明書ファイルを作成します。keytoolコマンドを使うには[JDK](http://www.oracle.com/technetwork/java/javase/downloads/index.html)がインストールされていることが必要です。

```
keytool -genkey -v -keystore release.keystore \
    -alias application -keyalg RSA -keysize 2048 -validity 10000
```

ファイル名やエイリアスや期限は適宜変更してください。実行すると、証明書の生成に使用する名前や組織、パスワードなどその他の情報の入力を求められます。生成された証明書をプロジェクトフォルダにいれておきます。

アプリを証明書を紐づけるため、.unoprojに下記のように追加します。

```sample.unoproj
{
    "Android": {
        "Key": {
            "Alias": "application",
            "AliasPassword": "password",
            "Store": "release.keystore",
            "StorePassword": "password"
        }
    }
}
```
パスワードなど、証明書を作ったときに入力した情報と同じように入力してください。

この証明書が使われるのはリリースビルドの時のみです。デバッグの時は、用意されているデバッグ用のキーを使うようになっています。

情報が正しく入力されていれば、以上でリリース用のAndroidアプリを書き出すことができます。

###◎iOS

まずは、下記を実行します。

`fuse build -t=iOS -c=Release -adebug`

Xcodeが立ち上がったら、あとは通常の手順で署名していく感じです。これは、、「Xcode 証明書」とかでググってください。（ほんとすんません:/）

####Xcode Development Team IDs

Xcode8から、デバッグビルドでも署名が必要になりました。しかし、XcodeでTeam IDを設定しておけば、残りのめんどくさい部分を自動的にやってくれるはずです。

Team IDは[こちら](https://developer.apple.com/account/)のメンバーシップの項目に書いてあります。

Unoはマシンの署名情報から、XCodeの開発者Team IDを自動的に探してくれます。
自分で設定する場合は、.unoprojファイルに追加します。

```sample.unoproj
{
  "iOS": {
    "DevelopmentTeam": "YOURTEAMID"
  },
  ...
}
```

もしくは、昨日紹介したビルド時のオプションを追加して設定することもできます。

`fuse build -t=iOS -s:Project.iOS.DevelopmentTeam="YOURTEAMID"`

同じMacを複数人の開発者で共有する場合は~/.unoconfig（なければつくる）に

`iOS.DevelopmentTeam: "YOURTEAMID"`

を書いておくといいみたいです。

`No matching provisioning profiles found`

と言われる場合はとりあえず`-adebug`オプションつけて実行せい！って書いてあります。
AMAZONの購入したい本を秘書さんにリストで送る

所属する研究室で、研究に必要な書籍を購入する時に、一度秘書さんにリストを送って発注をかけてもらうのだが、本の著者名、タイトル、出版社、URLをまとめておかないといけないので、冊数が増えるとこの作業が地味にめんどくさかった。

そこで（?）、最近話題の、LLVMベースのJITコンパイラでC並みの速度で計算ができる、Julia言語を無駄に使い、この作業を半自動化してみた。

正直Juliaを使う理由は特に無いが、練習がてら触ってみた。

まず最初に買いたい本のURLだけをコピペした。

```url.txt
https://www.amazon.co.jp/dp/4274219992/
https://www.amazon.co.jp/dp/4274219348/
https://www.amazon.co.jp/dp/4785315709/
https://www.amazon.co.jp/dp/4621088173/
```

その後にurl.txtと同じディレクトリで、以下のプログラムを作成して、

```bash
julia AmazonOrder.jl
```

と打った。

```jl:AmazonOrder.jl
# Pkg.add("Requests")
# Pkg.add("Gumbo")

using Requests
using Gumbo

# 重複を除く
lines = open("url.txt", "r") do fpd
	readlines(fpd)
end

lines = unique(lines)

open("new_url.txt", "w") do fpn
	write(fpn, lines)
end


open("ToHoge.txt", "w") do fp1

	# 定型文
	write(fp1, "Hogeさん\n\n")
	NoBook = length(readdlm("new_url.txt"))
	write(fp1, "お疲れ様です、@antiplasticsです。\n")
	write(fp1, "以下の" * string(NoBook) * "冊の書籍の購入を公費でお願いします。\n")
	write(fp1, "全て揃ってからの受け取りで結構です。\n")
	write(fp1, "受け取りは何時でもかまいません。\n")
	write(fp1, "よろしくお願いします。\n\n")
	write(fp1, "@antiplastics\n\n\n")

	# Web scraping
	counter1 = 0
	open("new_url.txt", "r") do fp2
		for line in eachline(fp2)
		request = get(rstrip(line))
		doc = parsehtml(Requests.text(request))

		counter1 = counter1 + 1
		print(string(counter1) * " / " * string(NoBook) * "\n")

		write(fp1, string(counter1) * ".\n")

		res = string(doc.root[1][19])
		res = replace(res, "<meta name=\"keywords\"content=", "")
		res = replace(res, "></meta>", "")
		res = replace(res, "\"", "")
		res = replace(res, "^ ", "")
		res = split(res, ",")

		counter2 = 0
		for val = res
			counter2 = counter2 + 1
			if(match(r"[0-9]{9}", val) != nothing)
				break
			end
		end

		# 著者名
		write(fp1, "著者名 : ")
		write(fp1, join(res[1:counter2-3], " "))
		write(fp1, "\n")

		# タイトル
		write(fp1, "タイトル : ")
		write(fp1, res[counter2-2])
		write(fp1, "\n")

		# 出版社
		write(fp1, "出版社 : ")
		write(fp1, res[counter2-1])
		write(fp1, "\n")

		# URL
		write(fp1, "URL : ")
		write(fp1, line * "\n")

		write(fp1, "\n")
		# sleep
		sleep(2)
		end
	end
end
```

うまく出力されると以下のような文章がファイルに書き出される。


![ToHoge_txt.png](https://qiita-image-store.s3.amazonaws.com/0/17038/114eba64-8018-2597-7bc7-704876931d9c.png)


あとはこの文章をメールにコピペして、送信するだけ。


Julia便利！
駅すぱあと路線図でパズルを作ってみた

[ヴァル研究所 Advent Calendar 2016](http://qiita.com/advent-calendar/2016/val)、10日目です。

はい、見ての通り路線図の15パズルならぬ8パズルです。
（元の形状を知っていないと解けないので、これでも十分難しいです）

![image](https://qiita-image-store.s3.amazonaws.com/0/79394/ec1eb79d-a26c-dddf-3331-68a76aa16919.png)

プレイアブルな画面はこちら：　http://rmap.ekispert.jp/rmap_puzzle/

駅すぱあと路線図というのはGoogle Mapsの路線図版みたいなものでして、Webページに路線図を表示して、そこにJavaScriptでマーカーを立てたり操作できるというものです。

本来は、例えば飲食店データと組み合わせて、駅をクリックするとその周辺の飲食店を表示するとか、駅ごとの統計データを可視化するといった使い方をするものなのですが、そのタイル画像（256x256ピクセルに区切られた地図の画像）だけを使ってお遊びで作ってみたものがこれです。

駅すぱあと路線図の普通の使い方についてはこちらにサンプルが多数あります。
http://rmap.ekispert.jp/sample/
駅すぱあと路線図は有償のサービスですが、セッション数を1日100に制限した無償版（フリープラン）もご用意しています。お気軽にお試しいただければ幸いです。
https://ekiworld.net/railmap_free/
某ツイートであった動きをvvvvで真似てみた話

Qiitaに記事をあげるのは久々です。

#今回のお話

前にvvvvでモーショングラフィック的なものを作ってみようと
とあるツイートを真似したものを紹介したいと思います。

某ツイートがこちら
https://twitter.com/dmensionxyz/status/741652339631742976

んで、自分で作ったのがこちら
https://twitter.com/sutobu000/status/741902870279270400

スクショがこちら
<img width="1711" alt="スクリーンショット 2016-12-09 21.25.02.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/109168/01f2c62b-d662-a00f-85b4-9d95569fbe1a.jpeg">


こんな感じのもvvvvなら簡単に作れますよーってのを紹介していきます。


#何故VVVVなら簡単にできるのか

それはspreadの概念があるからですね。
詳しくは過去に偉大な方々が残した記事があるのでそちらを参考に
http://qiita.com/yhy_jp/items/d5604a15eef806a7d0d0
http://qiita.com/AquaLamp/items/99ce03d1e265f756ae44

このspreadを使用することでこんなのが作れます。

今回はそのspreadである`LinearSpread`でboxを並べて
`LFO`、`Counter`、`Switch`でこの動きを作っています。
<img width="408" alt="スクリーンショット 2016-12-09 21.32.45.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/109168/8bbb9725-6f48-1884-fbde-815922053e11.jpeg">

LFOは指定した秒間をひたすら数えてくれてカウントやトグルを入れてくれるタイマー的なやつなのですが、
そのタイマーを3つ用意して、それぞれ0.3秒ずつずらしてカウントさせているのです。
この3つ用意したのもspreadの概念を用いています。

口で説明するよりも手を動かしたほうがわかりやすいと思うので、真似てみてください。


ちなみにこの部分ですが、
<img width="269" alt="スクリーンショット 2016-12-09 21.42.35.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/109168/d0edf7df-efa5-43db-1c91-48145b6eed32.jpeg">
Boxの大きさと色をつけているのですが…
自分には単色しか出来ませんでした…

どなたかここら辺詳しい人いたら解説してくれるとありがたいです。

#終わり
最近vvvvが熱くなって来ているようなので、
このビッグウェーブに乗るしかねぇ！の気持ちで
皆さんもvvvvをやってみるといいと思います。

楽で暇つぶしにもいい、vvvv。

おすすめです。
第２回 Web API を利用するには？ ～ノンコーディング編：IFTTT～

#はじめに
Web API を利用するには？というとこで、前回は概要を書かせていただきました。
今回は第２回 ノンコーディング編：IFTTT ということで、[IFTTT(イフト)](https://ifttt.com/) というサービスについてお話させていただきます。

Wikipedeia ⇒ [IFTTT とは](https://ja.wikipedia.org/wiki/IFTTT)
> IFTTT(イフト)とは「レシピ」と呼ばれる個人作成もしくは公に共有しているプロフィールを使って数あるWebサービス（Facebook、Evernote、Weather、Dropboxなど）同士で連携することができるWebサービスである。
> (Wikipedia より)

![ifttt.PNG](https://qiita-image-store.s3.amazonaws.com/0/152946/d9309cd5-58b1-2f0e-1099-777a5cd9d510.png)

Wikipedia によると上記の説明となるのですが、Web サービス同士を連携することができる Web サービスであるということです。
Wikipedia にも書かれておりますが、
**IFTTT ⇒ If This Then That** の頭文字を取って **IFTTT** となっております。

**This** はいわゆるトリガーのことで、例えば「Twitter で新たな投稿がされたら」「Gmail に特定の人からメールが届いたら」といった条件を定義することになります。定義といっても、実際にはマウスで選択する、必要な事項をキーボードで入力するだけです。コーディングは一切不要です。

**That** は **This** で定義された条件をもとに動かしたい本処理です。
例えばさきほどの条件「Twitter で新たな投稿がされたら」ということをきっかけに、「Gmail に内容をメールで送信する」という本処理を実行することができます。

ちなみに現在新たに処理を作成しようとすると以下のような画面が出てきます。

![ifttt_applets.PNG](https://qiita-image-store.s3.amazonaws.com/0/152946/99584cde-bc71-49ee-f4d5-59e1449720d6.png)

これらはすでに公開されているレシピで、これらから一つを選んで、使用するサービスのアカウント情報等を入れるだけで、使用可能となるものです。
またこれらを選択せずに、This (条件、トリガー) と That (処理) を自分で選択して、新たなフローを自分で作成することも可能です。

IFTTT を使い始めるにはアカウントを登録すれば、どなたでも使い始めることができます。

#IFTTT の位置付け
IFTTT の位置付けとしては、コンシューマー向けになります。
個人が既に持っている好きなメールアドレスでアカウントを登録して、自分が使っている他の Web サービスのアカウントを利用して、新たな処理フローを作成することができます。

セキュリティやコンプライアンスを一切無視すれば（強引な言い方ですが）、業務利用も可能です。

#IFTTT を使用する意味
私が今回 IFTTT をご紹介するのは、まず簡単に Web サービス同士を連携してみる体験ができるからです。
当然、この連携は内部的には Web API で連携がされています。IFTTT を使用するとそこを意識する必要はありません。

既に世の中的には Web API を利用するには必ずコーディングが必要、という段階ではなく、利用するということに関しては、こういったサービスを利用して体験することが可能です。

#IFTTT を利用した例
私の場合、以下のようなものを作成しております。
会社のエリアを GPS で指定して、そのエリアに自分のスマホが入ると、LINE にメッセージが飛んでくるというフローです。
![ifttt_line.PNG](https://qiita-image-store.s3.amazonaws.com/0/152946/e1b5d8ba-5a2a-d5c8-c637-4782c9f0d646.png)
![ifttt_line2.PNG](https://qiita-image-store.s3.amazonaws.com/0/152946/25b7a599-7c5d-1df0-4e7b-417eeba56a13.png)
（ちなみに画像の場所は私の会社の場所とは関係ありません。）
ウェイトコントロールについて

# ウェイトコントロールのための器具
筋トレを行う上で常に確認していたいのが自らのウェイトです。最近では単なる「体重計」以外にも「体組成計」などの体脂肪率やその他の関連データが測定できる器具が多く発売されています。

メーカーで言えばタニタやオムロン、パナソニックあたりが有名でしょうか。

# Withings
そんな中、僕が選んだのが [Withings](http://www.withings.com/jp/ja/) の体重計です。

![withings..png](https://qiita-image-store.s3.amazonaws.com/0/72181/1dcad9e1-2b27-c857-ddce-a38913e45c26.png)

これは主に以下の数値を記録できます。

- 体脂肪率
- 心拍数
- 体重
- 空気の質（？？？）

値段が少々張りますが、この器具が持つメリットを考えれば妥当だと思っています。また、Amazon のセールの対象になることが多いので、急がなければその機会を狙って安く購入するのも一つの手段です。

# Withings の何がいいか
比較サイトやレビュー記事などがあるのでわかると思いますが、この体重計、Wi-Fi が使えるんです。他メーカーの安価帯の器具ですと、スマホとの Bluetooth 連携のみで、Wi-Fi に対応したものはほとんど無いと思います。

オートメーション化が大好きなプログラマとしては、ただ一つの作業でもそれが繰り返されることはイケてないと感じるはずです。DRY じゃないです。この体重計は最初に Wi-Fi の設定さえすれば、あとは乗るだけで計測され、計測終了時点でサーバに計測データを飛ばすだけの超簡単仕様です[^1]。

そしてさらに素晴らしいのが、Withings アカウント です。[こちらの Webサイト](https://account.withings.com/) は当然として、スマホのアプリも存在します。また毎週メールでも現在の状況を通知できます。

そしてこれらは全て無料なのです。

![withings_account.png](https://qiita-image-store.s3.amazonaws.com/0/72181/6c2df9e5-da1e-ae13-b534-460c7207ef5e.png)

# Withings のダッシュボード
アカウントにログインしてダッシュボードを表示させると以下のような表示になります。

![withings_login.png](https://qiita-image-store.s3.amazonaws.com/0/72181/6c91758d-e67e-4e6c-f691-606ac7559348.png)

基本的なデータはもとより、「家族」や「友だち」、「バッヂ」といった機能もあって、それぞれでデータを競ったりできます。歩行データについては Google Health のデータをこれまた自動で拾ってくれます。

あなたがやることはそう、ただ体重計に乗るだけです。

# Withings API
これだけで終わると単に Withings の回し者に終わってしまうので、Qiita らしいことも最後に。

なんとこの Withings、[API が用意されている](http://oauth.withings.com/api)のです。[機能も豊富](http://oauth.withings.com/api/doc)で、アプリケーションに用いるような用途では十分な機能が用意されているのではないでしょうか。

# Withings API の簡易利用手順
簡単に Withings API の利用方法を説明します。

まず[こちら](http://oauth.withings.com/partner/dashboard)からデベロッパー登録をします。すると「API Key」と「API Secret」がもらえます。

これを「Step 1 : get a oAuth "request token"」の「Consumer key」および「Consumer secret」に入れ、青い Generate ボタンを押します。

出てきた URI にアクセスすると、「oauth_token」と[oauth_token_secret」がパラメータとして入手できます。そうしたら次の「Step 2 : End-user authorization」の「Request token key」および「Request token secret」にそれらの値を入力します。また Generate ボタンを押します。

「Step 3 : Generating access token」は正直よくわからなかったのですが、任意の（？）ユーザーIDを入れます。 この値はパラメータとしてコールバックに使われるということです。再び Generate ボタンを押します。

そして生成された「oauth_token」および「oauth_token_secret」および「userid」を用いて「Result (click to perform request)」のところに現れた URI にアクセスしましょう。ん？500？

今アクセスした URI の userid パラメータが、もしかして「Step 3」で入力したユーザーIDになっていませんか。userid は先ほどの操作により得られた値です。7ケタあたりの数値です。URI を書き換えましょう。そうしてアクセスすれば以下のように値が返ってくるはずです。

![2016-12-09_22-53-03_SnapCrab_Mozilla Firefox_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/72181/7e10d7bc-d0e5-ea9a-15b4-d3a222d1b398.png)

# API の利用方法
API の利用方法ですが、まず考えられるのは、一定時間（期間）おきに Twitter などの SNS に自らの体重や体脂肪率を投稿するという用途が考えられます。前回測定との絶対値比較や比率比較などを織り交ぜます。その際は数字を処理してボカしたりしてもいいかもしれないです。

自らが数値を認識することはもちろんですが、目標や現状を周囲に宣言することで目的達成へのモチベーション（後に引けない度）が向上するでしょう。

スプレッドシートに投げて、細かくデータを取り、リアルタイムでグラフ描画とかも面白そうですね。まぁダッシュボードが良い出来なので、ダッシュボードに含まれないようなデータの可視化がいいのかなと思います。

# ウェイトコントロールでより良い筋肉を！
直接的に筋肉に関係することではないですが、ウェイトコントロールは筋肉の状態を定量的に測定するために便利な手法です。ただそれは筋トレ同様に続けなければ意味がありません。Wi-Fi や API で自動化が可能な Withings の体重計（冒頭以外にも多くの機種があります）を利用してみるのはいかがでしょうか。

[^1]: 測定にやや時間がかかるのが欠点ですが
[^2]: スイマセン時間がないだけです😢
なるほどわかった！Moodleの代替ログインURL

<img width="401" alt="moodle.png" src="https://qiita-image-store.s3.amazonaws.com/0/116241/396391a4-8516-8d93-3d04-f9f19825460d.png">

# Moodleの代替ログインURLについて

Moodleのサイト管理の機能に、代替ログインURL という機能があり、本来のログイン画面とは違うWebページをログイン画面に設定できます。

## 設定方法

設定は、サイト管理＞プラグイン＞認証＞認証管理 のページから行います。

<img width="500" alt="20161203_161357#00.png" src="https://qiita-image-store.s3.amazonaws.com/0/116241/bdfde215-92c5-d8dc-3204-55d3089f2d41.png">

ここにURLを設定すると、このページからしかログインできなくなりますし、ログアウトすると、このページに遷移し、ログイン待ちとなります。

たとえば、以下のようなHTMLを作成して、これをログインページとすることができます。

```html:index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>test</title>
<meta charset="utf-8" />
</head>
<body>
<form name="login" action="https://moodle.myuniversity.com/login/index.php" method="POST">
username:<input type="text" name="username" value=""></input><br />
password:<input type="text" name="password" value=""></input><br />
<input type="submit" name="submit" value="login">
</form>
</body>
</html>
```

![20161203_162056#00.png](https://qiita-image-store.s3.amazonaws.com/0/116241/7f6eb56b-3fd2-2bd4-24e8-cb358e146543.png)

## 何に使うの？

例えば、代替ログインページにjavascriptやphp等のスクリプトを噛ませて、

- 入力値をチェックする
- 特定のIPからしかログインできなくする(他にも方法があるけど)
- 特定の時間しかログインできなくする
- 特定のリファラから以外は別のページにリダイレクトさせる

といった設定を、標準のloginページを改造せずに実現できるようになります。


## 設定をミスったら

注意書きに書かれているように、ログインできなくなります。

> 間違ったURLを設定することで、あなたのサイトから締め出されることになりますので注意してください。

このときは慌てずに以下のようにしてください。

1.MoodleのサーバにSSHでログインする
2.Moodleのデータベースにログインし、データベースを選択する。
3.以下のSQLを実行する。

```sql
UPDATE mdl_config SET value = '' WHERE name like 'alternateloginurl';
```
4.データベースからログアウトする
5.CLIでキャッシュをクリアする

```bash
$ sudo php /path/to/moodle/admin/cli/purge_caches.php
```

これで通常のログイン画面が表示されるようになります。
Linux サーバでも VNC 環境なら Smalltalk のデバッグが捗る

# 背景

Linux サーバで Smalltalk 処理系を使う場合、ヘッドレスで動かしてもよいのですが、ヘッドレスだと Smalltalk では特に生産性が高くなるデバッガなどをうまく使う事ができません。

プロダクション環境ではヘッドレスで動かすとしても、開発環境などではやはり Smalltalk 環境が IDE のように使えた方が便利でしょう。

この記事では Smalltalk のデバッグを捗らせるために Ubuntu Linux に VNC 環境を用意し、その画面に接続して Smalltalk で開発を行うためのノウハウを書きます。

**単なる VNC のインストール記事なんでしょ？**って言われると、はいそうです。って気もしますが…以下のようなことに留意しました。

* 再起動したときにも使える設定
* 閉じた環境の開発向け設定
* 必要にして十分ほどのユーザインターフェースのみの導入

Ubuntu 16.04 向けに書きましたが、Ubuntu 12.04 や Ubuntu 14.04 でも同様のことができるはずです。

# X11 + VNC 環境の構築

VNC で接続することを考慮して Xvfb + x11vnc + IceWM という構成で X11 + VNC 環境を構築します。

IceWM に特に思い入れがあるわけではないのですが、パッケージがあって軽くて枯れてるのでこれを選んでいます。

```
$ sudo apt-get install xvfb x11vnc icewm
```

## Xvfb の起動

X11 のバーチャルフレームバッファを起動します。

```
$ Xvfb :0 -screen 0 1280x1220x16 -nolisten tcp &
```

## x11vnc の起動

VNC から X11 のバーチャルフレームバッファに接続できるように x11vnc を起動します。

```
$ x11vnc -display :0 -bg -listen 0.0.0.0 -forever -shared
$ disown
```

本当はパスワード指定したり、バインドするポートとかで接続元ネットワークを制限したりしましょう。

## IceWM の起動

```
$ DISPLAY=:0 icewm-session &
$ disown
```

`icewm-session` を起動するとコントロールパネルっぽいものや仮想デスクトップなども使えて便利です。

# Xvfb + x11vnc + IceWM の自動起動

経験的に滅多に落ちるプロセスではないので `/etc/rc.local` で起動するように設定を入れてみました。

同期的な処理をブロックしないように各種の起動は `screen(1)` をデタッチした状態でデーモン化して起動するのがよいと思います。

上記を加味した結果、下記のような設定を記述するとよい感じでした。

```bash
SUDO=/usr/bin/sudo
SCREEN=/usr/bin/screen
BASH=/bin/bash
SLEEP=/bin/sleep
$SUDO -u ubuntu $SCREEN -S Xvfb   -d -m $BASH -c 'cd && Xvfb :0 -screen 0 1280x1220x16 -nolisten tcp'
$SLEEP 3
$SUDO -u ubuntu $SCREEN -S x11vnc -d -m $BASH -c 'cd && x11vnc -display :0 -listen 0.0.0.0 -forever -shared'
$SLEEP 3
$SUDO -u ubuntu $SCREEN -S icewm  -d -m $BASH -c 'cd && DISPLAY=:0 icewm-session'
```

`screen(1)` の機能はそのまま使えますから、プロセスに問題があったときはアタッチして様子を見ることができます。

```
$ screen -list
There are screens on:
	853.icewm	(11/21/16 18:02:58)	(Detached)
	847.x11vnc	(11/21/16 18:02:55)	(Detached)
	817.Xvfb	(11/21/16 18:02:52)	(Detached)
3 Sockets in /var/run/screen/S-ubuntu.
```

# 接続

上記の例ではネットワークによる制限やパスワードによる制限をしていないので、 VNC Viewer で対象ホストのアドレスを指定すれば接続できるようになると思います。

# 所感

プロダクションで Smalltalk を使おうとしたときに、デバッグやちょっとした検証などで「あー、デバッガ開きたいなぁ」とか「あー、何起こってるかわかんねぇな」とか「ワークスペース使えねぇの？」って事になりがちですが、サーバ用途をメインに使っている Linux でも一時的に VNC 環境を導入することで開発やデバッグが捗ります。

みなさんもお試しあれ。
食費を減らしたい

みなさんこんにちは。PFM本部でサービス開発ディレクターをやっている伊藤です。
年の瀬ですね。私はようやく2016年がしっくり来始めたところだったのに、もうすぐ2017年かと思うと戦々恐々としています。

師走といえば忘年会ですよね。
私も色々と忘れたい事はたくさんあるので、いっぱい忘年したいと思います。
しかし、そんな時に怖いのが食費や交際費の増加ですよね。
否が応でもこの費目の出費は増えてしまいそうです。

参考までに、私の食費、交際費の月次出費を可視化してみました
<img src="https://4.bp.blogspot.com/-j65KwzTWp74/WEZpnFUD8JI/AAAAAAAABuM/jna3tgCM464WXywXz2eUHjgsznK6uVOAQCLcB/s1600/ts.png">

Food：食費、Social Expense：交際費、Food Budget：食費＋交際費
(プライバシー保護のため具体的な金額は割愛します)

なかなか変動幅があります。
それぞれの月の項目などはマネーフォワードのアプリを紐解けばわかりますが、今回はここから先の話を考えたいです。
特に12月の出費を抑えたいという気持ちがありますので、過去の支出傾向から今月の支出を予測して、その値をベンチマークとして行動するように心がけたらどうだろうかという発想にいたります。

予測といえば、いろいろな手法がありますね。

前述のグラフを見ていただいてもわかる通り、私はR言語をよく使っていますので、R言語を使って予測をしてみましょう。
ちょうどタイミングの良いことに、先日カルマンフィルタという逐次更新アルゴリズムについて発表する機会があったので、そのアルゴリズムを使って、予測をしてみます。

まず、私の過去の支出データから状態方程式を定義します。
ある状態を構成するのは真の状態にノイズを加えたものであると定義します。
この場合のノイズはホワイトノイズとします。

今知りたいのは次の状態(t+1期)の状態ですので、t時点での状態に変動量を加えます。
変動量も基本的には正規分布に従うものとします。
初期値は私がマネーフォワードを使い始めた時点での状態とします。
定義式を記述すると下記のようになります。

<img src="https://4.bp.blogspot.com/-gTpKBSDeGW0/WEZpyoPgIhI/AAAAAAAABuQ/cCI3IIk7L2gOyHljgZostXEIZhZLTiHpQCLcB/s1600/local%2Blevel%2Bmodel.png">

これをR言語を用いて推定してみます。
カルマンフィルタを推定するパッケージはいくつかありますが、ここではKFASパッケージを用います。
最適解を探索するアルゴリズムは準ニュートン法を用いました。
予測結果の信頼区間の設定は一般的な95%信頼区間を設定しています。

R言語で記述すると下記のようになります。

```R
library(KFAS)
mod <- SSModel(food_budget$amount~SSMtrend(1, Q = NA ), H = NA)
fit <- fitSSM(mod,numeric(2),method="BFGS")
kfs <- KFS(fit$model)
afilt <- kfs$a[-1]
Pfilt <- kfs$P[,,-1] - fit$model$Q
afiltconf <- cbind(afilt+sqrt(Pfilt)*pnorm(0.025),afilt+sqrt(Pfilt)*pnorm(0.975))
alphahatconf <- predict(fit$model,interval="confidence",level=0.95)
pre <- predict(fit$model,interval="prediction",n.ahead=10,level=0.95)
```

### 予測結果
<img src="https://1.bp.blogspot.com/-Yn9BJ58IcHE/WEZp62HAR9I/AAAAAAAABuU/osW8qLcurCoJU34hWBfhdMl9taCaXzszACLcB/s1600/predict.png">

グラフの緑の予測結果が最尤推定値となります。紫が上側95%の上限値で水色が下側95%の下限値となっています。具体的な金額は明かせませんが、予測の出力結果の95%信頼区間の下限値を予算とすれば、厳粛な予算設定とできそうです。

マネーフォワードでは上記のような手間をかけなくても予算の設定をしたり、家計診断などで適切な費目の金額を案内してくれる機能がありますので、ご安心ください。

さあ、みなさんも2017年に向けてマネーフォワードで家計管理しましょう！