OmniAICreator/Qiita-1.07M huggingface dataset:
gulpfileを手抜きで実装する

# タスク実装が面倒臭い問題

例） src 配下のファイルを拡張子別にコンパイルするタスク

```
/**
 * ES6, JSXコンパイル
 */
gulp.task('js', function(){
  return gulp.src('src/**/*.{js,jsx}')
             .pipe($.babel())
             .pipe(gulp.dest('build'));
});

/**
 * slimコンパイル
 */
gulp.task('slim', function(){
  return gulp.src('src/**/*.slim')
             .pipe($.slim({ pretty: true }))
             .pipe(gulp.dest('build'));
});

gulp.task('css', function(){
  return gulp.src('src/**/*.*')
             .pipe(gulp.dest('build'));
});

/*
 * build 以下削除
 */
gulp.task('clean', function(target){
  del(['build/**/*'],target);
});

gulp.task('compile', ['clean', 'slim', 'css','js']);
```

全て src/ 配下を対象としているにも関わらず拡張子別にタスクを設定しなければいけないため
同じようなタスクが量産されている。

コンパイルする拡張子が増えれば増えるほどタスクを複製するのは面倒なので何とか この記述をDRYにしてみる。


# gulp-if による拡張子別処理の実装
ストリームの処理に対して条件分岐をかけることができるモジュール。
今回は　このモジュールを使って拡張子別に実行モジュールを振り分ける実装を行う。

使い方は以下の通り(　引用：https://github.com/robrich/gulp-if　)

```
var gulpif = require('gulp-if');
var uglify = require('gulp-uglify');

var condition = true; // TODO: add business logic

gulp.task('task', function() {
  gulp.src('./src/*.js')
    .pipe(gulpif(condition, uglify()))
    .pipe(gulp.dest('./dist/'));
});
```

gulpif　の第一引数に対し、boolean を渡すことで後述のモジュールを実行することができる。
今回はストリームで渡されたファイルの拡張子を判定し、それに応じたモジュールを実行する必要があるため、以下のようなメソッドを実装する。

```
var matcher = function(pattern){
  var reg = new RegExp(pattern),
      chain = {};

  chain.check = function(file){
    return reg.test(JSON.stringify(file));
  }
  return chain;
}
```

単順にメソッドチェーンを利用し、指定した拡張子のストリームで渡されたファイルの拡張子が等しいかを判定することができる。
このメソッドと先述のgulp-ifで手抜きタスクを実装してみる。

# 手抜きタスクを実装

```
gulp.task('test', function(){
  return gulp.src('src/**/*.*')　//コンパイル対象のディレクトリ以下 全指定
             .pipe(gulpif(matcher('slim').check, $.slim({ pretty: true })))
             .pipe(gulpif(matcher('js').check, $.babel()))
             .pipe(gulp.dest('build'));
});

gulp.task('clean', function(target){
  del(['build/**/*'],target);
});

gulp.task('compile', ['clean', 'test']);
```

スッキリ。

ただし、全ファイルを総なめするためタスク実行速度が遅くなってしまう問題があるので
逐一タスク書くのが面倒でタスク実行速度が多少遅くなっても構わないという場合に使ってみるのが良いかもしれない。
esp8266でMicroPythonを動かす

# MicroPythonとは
マイコンに最適化されたPython3実装です。
元々はpyboardというマイコンボード用でしたが、KickstarterでESP8266への移植が始まりプロジェクトは無事に成功しソースはgithubで公開されています。


# 環境及び準備するもの

- Ubuntu 16.04
- Python 2.7.12
- [ESPr Developer](https://www.switch-science.com/catalog/2652/)
- LED
- 抵抗

#試す

[公式ドキュメント](https://docs.micropython.org/en/latest/esp8266/index.html)を見ながらやるといいです。

ESP8266用のmicropythonはgithubで公開されているのでコンパイル環境を整えてビルドしたいところですが、[公式サイト](http://micropython.org/download/)コンパイル済みの物があるのでそれをダウンロードしてきます。

ESP8266にダウンロードしてきたファームウェアを書き込むために **esptool** をインストールします。
**Python3環境では動かないので注意**

```
$ pip install esptool
```

次にesptoolを使用してマイコンのフラッシュを消します。

```
$ sudo esptool.py --port /dev/ttyUSB0 erase_flash
esptool.py v1.2.1
Connecting...
Running Cesanta flasher stub...
Erasing flash (this may take a while)...
Erase took 21.7 seconds
```
ダウンロードしてきたファームウェアを書き込みます。

```
$ sudo esptool.py --port /dev/ttyUSB0 --baud 460800 write_flash --flash_size=32m 0 esp8266-20161110-v1.8.6.bin
esptool.py v1.2.1
Connecting...
Running Cesanta flasher stub...
Flash params set to 0x0040
Writing 569344 @ 0x0... 569344 (100 %)
Wrote 569344 bytes at 0x0 in 14.2 seconds (321.7 kbit/s)...
Leaving...
```
シリアルモニタを開いて確認する。

```
$ sudo screen /dev/ttyUSB0 115200
```

ESP8266を再起動し次のようなメッセージが表示されたら成功です。

```
could not open file 'main.py' for reading

MicroPython v1.8.6-7-gefd0927 on 2016-11-10; ESP module with ESP8266
Type "help()" for more information.
>>> 

```

# Lチカしてみる

ESP8266の14番ピンにLEDをつなげる
Ctrl-E でペーストモードに入れる。Ctrl-Dで終了。
Ctrl-Cでキャンセル。

```
import machine
import time
pin=machine.Pin(14, machine.Pin.OUT)
while True:
    pin.high()
    time.sleep(1)
    pin.low()
    time.sleep(1)

```
Lチカしたら成功です！。

[公式ドキュメント](https://docs.micropython.org/en/latest/esp8266/index.html)には、socket、GPIO、PWM、ADC等のチュートリアルが乗っているのでとても参考になリます。
またMicroPython用のライブラリは[専用のライブラリ](https://github.com/micropython/micropython-lib)があります。
RESTfm で Update してみよう

# RESTfm で Update する
RESTfm で Read する方法はこれまで十分に見てきました。次は Update です。

とはいえ、基本的な方法は GET と変わりません。アクセスする URI を構成し、そこに対して PUT メソッドでアクセスするだけです。PUT なので Webブラウザ ではアクセスできませんが、それ以外は GET と変わりません。

# Update できるのはレコードに対してだけ
[公式ドキュメント](http://restfm.com/manual)を見るとわかりますが、Update をする対象はレコード以外にありません。Update という動作の内容を考えれば当然のことではありますが、レコードの Update しか対象となる動作が無いゆえに分かりやすく、誤りも少ないと思います。

# 基礎となる URI と使用するデータベースおよびレイアウト
説明を分かりやすくするために、RESTfm を以下の場所に配置したと仮定します。

**http\://hogehoge/RESTfm/**

また、説明に使うデータベース名は`Member`とし、同じくレイアウト名は`categories`とします。

# レコードを Update する（レコードID を用いて URI を構成する）
それではレコードを Update します。そのためには対象となるレコードのレコードIDを指定する必要があります。そのレコードIDをここでは仮に`123456789`とします。この条件のもと、URI を構成すると以下のようになります。

http\://hogehoge/RESTfm/Member/layout/categories/123456789

上記の URI がアクセスする URI です。

# レコードを Update する（検索条件を用いて URI を構成する）
前述の方法では レコードID を指定して更新対象のレコードを特定していますが、さすがにこれだけでは不便だろうということで、レコードの検索を経由してのレコード指定をする方法も用意されています。

例えば`foo`というフィールドの値が`barbar`であるレコードを Update の対象にしたい場合は以下の URI を叩きます。**記号類（「=」など）や日本語はエンコードする必要がありますがここでは見やすくするために省略していますので注意してください**。

http\://hogehoge/RESTfm/Member/layout/categories/foo===barbar

注意点として、検索によりレコードが一意に定まる必要があります。複数のレコードが検索により引っかかる場合はエラーになります。

# レコードを Update する（変更する内容を指定する）
対象のレコードについて、そのレコードのどのフィールドをどんな値に変更するかを指定します。ここでは仮に`foo`というフィールドを`bar`と変更するとしましょう。すると送信する JSON は以下のようになります。

```
{
    "data": [
        {
            "foo": "bar"
        }
    ]
}
```

PHP で上記 JSON を作る場合は以下のようにすればいいでしょう。

```php
$data = array("data" => [
        array("foo" => "bar")
        ]);
$post_json = json_encode($data);
```

# レコードを Update する（PHP の curl を用いる）
URI も定まり、送るべき JSON も作れました。あとは実際に PUT するだけです。念のため、PHP でのコード例を以下に示します。もちろん PHP 以外でも OK です。

```php
$uri = "http://hogehoge/RESTfm/Member/layout/categories/foo%3D%3D%3Dbarbar";
$request = "PUT";
$headers = array("Content-Type: application/json");
$data = array("data" => [
        array("foo" => "bar")
        ]);
$post_json = json_encode($data);

$options = array(
    CURLOPT_URL => $uri, 
    CURLOPT_CUSTOMREQUEST => $request,
    CURLOPT_HTTPHEADER => $headers,
    CURLOPT_POSTFIELDS => $post_json,
    CURLOPT_RETURNTRANSFER => true
);

$curl = curl_init();
curl_setopt_array($curl, $options);
$response = curl_exec($curl);
curl_close($curl);
```

# オプションパラメータ
ここまでで Update の基本は大丈夫でしょう。ただ、さらに Update を便利にするパラメータが用意されています。詳しくは[公式ドキュメント](http://restfm.com/restfm-manual/web-api-reference-documentation/uri-restfmdatabaselayoutlayoutrecordid/update-put)を参照してほしいのですが、いくつか紹介をします。

- **RFMappend**
    - このパラメータを指定すると、データとして送った内容を**上書きするのではなく付け加えます**
    - その名のとおりアペンドするわけです
- **RFMelsePOST**
    - このパラメータを指定すると、Update の対象となるレコードが存在しない場合、レコードを Create します
- **RFMscript**
    - このパラメータを指定すると、Update した後に指定のスクリプト（「=」でつないでスクリプト名を指定）を実行します
    - スクリプトに引数を用いる場合はさらに`RFMscriptParam`パラメータを付与します

# bulk も可能
GET の記事で記載した bulk での Update も可能です。詳しくはやはり[公式ドキュメント](http://restfm.com/restfm-manual/web-api-reference-documentation/uri-restfmdatabasebulklayout-bulk-operations/update)をどうぞ。

# Update（PUT）は慎重に
GET メソッドは単に情報を取得するだけですので誤った URI を叩いたりしてしまってもエラーが出るくらいですが、PUT の場合は誤るとデータを更新してしまいます。したがって、テストデータなどで十分に仕様を把握した上で実戦投入するといいでしょう。

また、エラーチェック（ログ出力）や変更されたかどうかのチェックを組み込むことで、何かあった際の対応が楽になると思うので、そこらへんも意識してコードを書くようにしてみてください。
Fess ヒープサイズ変更

Fess 10.3
ヒープサイズを変更してみます。

- FESS_HEAP_SIZEの設定
- クローラ側のヒープメモリー最大値変更

※　どちらも**変更後にFessの再起動**が必要です。

## FESS_HEAP_SIZEの設定

```shell-session:bin/fess.in.sh
FESS_HEAP_SIZE=2g
```
bin/fess.in.shの3行目と4行目の間に追加しました。

##クローラ側のヒープメモリー最大値変更

app/WEB-INF/classes/fess_config.properties
の20行目付近にあるjvm.crawler.options`-Xmx`に設定します。
512mから1gに変更しました。

```properties:fess_config.properties
# JVM options
-Djava.awt.headless=true\n\
-server\n\
-Xmx1g\n\
```
Vim 8.0 Advent Calendar 20 日目 新しいイベント

この記事は [Vim 8.0 Advent Calendar](http://qiita.com/advent-calendar/2016/vim8) の 20 日目の記事です。

Vim 8.0 では autocmd イベントも新しく追加されています。

## `TabNew`

新しくタブページが開かれた際に発生します。例えば `:tabnew` Ex コマンドを使うと、以下の順番でイベントが発生します。

1. WinLeave
2. TabLeave
3. WinNew
4. WinEnter
5. TabNew
6. TabEnter

## `TabClosed`

タブページが閉じられた際に発生します。例えば、`:tabclose` Ex コマンドでカレントタブページを閉じると、以下の順番でイベントが発生します。

1. BufLeave
2. WinLeave
3. TabLeave
4. TabClosed
5. WinEnter
6. TabEnter
7. BufEnter

## `WinNew`

新しいウィンドウが作成された際に発生します。Vim 起動時に開かれるウィンドウに対しては発生しません。

## `CmdUndefined`

定義されていないユーザー定義コマンドを実行しようとした際に発生します。
パターンはコマンド名に対してマッチングが行われ、`<amatch>` と `<afile>` は実行しようとしたユーザー定義コマンド名に設定されます。しかし、`<amatch>` は正しく展開されないようなので、`<afile>` を使うのがよいでしょう。
イベントの実行中に存在しなかったコマンドを定義すれば、イベント終了後にコマンドが実行されます。

以下の例は、`Foo` で始まる未定義の Ex コマンドを実行すると、その場で自分自身のコマンド名を出力する Ex コマンドを定義します。

```vim
augroup example
  autocmd!
  autocmd CmdUndefined Foo* execute 'command! -nargs=*' expand('<afile>') 'echo' string(expand('<afile>'))
augroup END
FooBar
" => FooBar
```

## `OptionSet`

オプションが設定された際に発生します。
パターンは、常に短縮していないオプション名に対してマッチングが行われ、`<amatch>` にはオプション名が設定されます。
また、以下の組み込み変数に設定されたオプションの値の情報が格納されます。

| 組み込み変数名  | 説明 |
|:----------------|:-----|
| `v:option_old`  | 変更前のオプションの値です。 |
| `v:option_new`  | 変更後のオプションの値です。 |
| `v:option_type` | 設定された変数のスコープです。`global` か `local` が入ります。 |

`'key'` オプションの場合は、セキュリティのためイベントは発生しません。

## `TextChanged`

ノーマルモードでカレントバッファのテキストが変更された際に発生します。このとき、`b:changedtick` が更新されます。
このイベントはそれなりの頻度で発生します。重い処理を行う場合は十分注意すべきです。

## `TextChangedI`

挿入モードでカレントバッファのテキストが変更された際に発生します。ただし、補完のポップアップメニューが表示されているときは発生しません。
このイベントは非常に頻繁に発生することに気を付けてください。重い処理を行うと、ユーザー体験が著しく損なわれます。
JSON やXML データをCDataドライバーでJDBC, ODBC, ADO.NET で利用する方法

#JSON, XML が苦手な方へ#
多くのモダンデータストアはJSON かXML ベースのWeb API を通じて利用されます。すでに長く使われてスタンダートとして安定しているフォーマットです。 ただし、カスタム業務システムや帳票・BI などの各種ツールでは、RDB を基本としたデータソース・フォーマットにしか対応していないというケースが多いのではないでしょうか？ 今後も使っていくシステムではあるけれど、改修を行うのにもコストがかかるし、エンジニアもJSON の修得には時間が。そんなとき頼りになるCData のJDBC, ODBC, ADO.NET ドライバーですが、生憎自分が使いたいWeb API のドライバーが製品化されていない。 そこでCData JSON Driver、CData XML Driver を使って、JSON およびXML フォーマットで提供されているWeb API に対してカスタムスキーマを設定することでデータドライバーとして利用することができます。
 スキーマ設定はちょっと上級者向けですが、組織内で一人がスキーマ定義を行えば、同じスキーマファイルを利用して、組織・コミュニティ全員がWeb API をテーブル型のデータとして開発環境および、BI, 帳票ツール、Excel から使えるようになります。

#使いたいJSON, XML データのモデル化#
正しくJSON またはXML をデータベースとして読むためには、「テーブル」として表示させたい各エンドポイントに対してスキーマを定義します。 初めてテーブル名を決めます。次にパースしたいJSON/XML エレメント毎に名前をふっていきます。 そして「テーブル」のユニークなプライマリーキーとなるエレメントを定義し、繰り返しとなるエレメントを定義して「行」に均し、パースするリソースの位置を定義します。

##JSONの例##
```
{
"person": [
{
"id": 1754,
"name": "Joe Smith",
"address": {"street": "9th Street", "city": "New York", "state": "NY"},
"children": ["John", "Sarah", "Elizabeth"],
"birthday": "1960-01-01"
},
{
"id": 1755,
"name": "Jane Doe",
"address": {"street": "8th Avenue", "city": "New York", "state": "NY"},
"children": ["Adam", "Bailey"],
"birthday": "1960-07-01"
},
...
]     
}
```

このJSON を下のようにスキーマ定義します:

```
<rsb:info title="Person" desc="Parse a document into rows.">
<!-- Column definitions -->
  <attr name="ID"             xs:type="int" key="true" other:xPath="id" /> 
  <attr name="Name"           xs:type="string"         other:xPath="name" />
  <attr name="Address_Street" xs:type="string"         other:xPath="address/street" />
  <attr name="Address_City"   xs:type="string"         other:xPath="address/city" />
  <attr name="Address_State"  xs:type="datetime"       other:xPath="address/state" />
  <attr name="Child1"         xs:type="string"         other:xPath="children[0]" />
  <attr name="Child2"         xs:type="string"         other:xPath="children[1]" />
  <attr name="Child3"         xs:type="string"         other:xPath="children[2]" />
</rsb:info>

<rsb:set  attr="RepeatElement"  value="/json/person/" />
<rsb:set  attr="uri"            value="PersonData.json" />
```

#Read / Write 処理の設定#
スキーマのカラム定義を作成したら、次はスキーマに様々なスクリプトを書き込むことで、必要なSQL クエリ(SELECT, INSERT, UPDATE, DELETE) が使えるようにしましょう。

| 処理 | SQL | スキーマメソッド |
|:-:|:-:|:-:|
| Read  | SELECT | GET |
| Create | INSERT| POST |
| Update | UPDATE| MERGE |
| Delete | DELETE| DELETE |


```
<rsb:script method="GET">
  <rsb:call op="jsonproviderGet">
    <rsb:push />
  </rsb:call>
</rsb:script>
  
<rsb:script method="POST">
  <rsb:call op="jsonproviderGet">
    <rsb:push />
  </rsb:call>
</rsb:script>
  
<rsb:script method="MERGE">
  <rsb:call op="jsonproviderGet">
    <rsb:push />
  </rsb:call>
</rsb:script>

<rsb:script method="DELETE">
  <rsb:call op="jsonproviderGet">
    <rsb:push />
  </rsb:call>
</rsb:script>
```
これで、定義したスキーマにおいて、指定されたURI でデータを処理できるように設定ができました。さらに複雑なクエリ（ソートや、グルーピングなど）は 製品ヘルプの"Modeling XML Data" 項を参照してください。
短気であらねばならない理由

ラリー・ウォールの言葉に、「プログラマーの三大美徳は、怠惰・短気・傲慢である」と言うものがあります。

怠惰については[以前に考えてみました](http://qiita.com/jkr_2255/items/a6423e94467cbd02fef6)が、今回は「短気」について考えてみます。

## 「短気」の意味
もちろん、この「短気」も普通の意味ではなく、**プログラムの動作が**遅いことを許容できない、という意味合いです。人間関係については短期になっても得なことはありません。

## 遅いことによる問題
### 遅いことそれ自体による問題
セキュリティ上の要請があって「遅い方がいい」プログラムもまれに存在します[^1]し、ユーザーインターフェースのプログラムの場合は「ユーザーの反応速度に合わせる」必要がありますが、そういう場面でない場合、動作が遅いことに対してはデメリットしかありません。Amazonによれば、サイト速度が0.1秒遅くなれば、売上は1%低下するとされています。

### 負荷の問題
通信などの待ち時間が多くて遅くなっているプログラムなら別ですが、そうでないプログラムの場合、何かしらの処理を行うことに時間を取られているわけです。CPUバインドな処理にしろI/Oバウンドな処理にしろ、何かしらの処理を行う以上は電力も消費します（モバイルアプリの場合は特に考慮が必要となります）。また、サーバ処理などで処理を多並列に行う場合、1つのサーバで捌ける量が減ってしまうので、サーバを増やすなどコストもかさんでしまうこととなります。

### バグ・不具合の兆候
フレームワーク段階で問題なく速度が出ている状況で、ある箇所だけ極端に遅いとなれば、それはそこのプログラム上の問題が疑われることになります。また、ふだん十分な速度が出ているのにあるときだけ遅くなった場合も、何かしらの不具合を示唆するものとなります。

ただ、元から遅ければそういった異常のサインに気づく余地もないので、何もなければ充分な速度が出るようにしておく必要があります。

## 注力すべき点
「アルゴリズムとデータ構造」という本もありますが、高速化にあたってはこの2つの見直しが最重要ポイントだと考えます。アルゴリズムを見直せば、計算量のオーダーから変わってしまうこともありますし、データの保管先はレジスタ＞キャッシュ＞メモリ＞ディスク＞ネットワークというように、選び間違えればCPU時間とは比較にならないほどの時間を消費するものなので、適切な箇所に適切なデータを置くことで大幅な高速化が望めます。

コードのちょっとした書き方を変えたところで、数倍変われば御の字といったところです。たとえばWebサーバで動くシステムの場合、まずWeb自体の通信時間が速くて数ミリ秒、遅ければ100ミリ秒単位でかかってしまいます。そんな環境下で1マイクロ秒高速化できても、ほとんど意味がありません。

[^1]: 総当たり攻撃を避けるために、パスワードのハッシュ化をわざと長時間かかる関数で行うなど
FK (Fine Kernel Toolkit) の紹介

# FK の紹介

FK (Fine Kernel Toolkit) は、Windows や Mac、あるいは Linux や FreeBSD など主要なプラットフォームで同一のコードを用い開発ができる、リアルタイム3DCG用のライブラリです。開発言語として C++ 版と、C#、F#、Visual Basic といった .NET Framework 対応の言語を用いることができます。

![ゲーム開発の様子](https://qiita-image-store.s3.amazonaws.com/0/149311/cbb2ca50-a5ac-c573-a5ad-e2f4e58b67d4.png)

### FK の特徴
FKは元々研究開発支援を目的としたライブラリですので、ゲームなどのコンテンツ制作支援を目的とするライブラリやフレームワークとは若干異なった特性を持っています。以下にそれを列挙していきます。

##### マルチプラットフォーム
FK C++版のコードは、(機種依存の機能を用いない限りは)同一のコードが Windows、Mac、LinuxやFreeBSDなどのUNIX系OSのいずれでも変更せずにビルドし実行することができます。また、「CLI版」という .NET Framework に対応した版もあり、C# や F# といった .NET 言語上での開発も可能です。CLI版はC++版に対し、プロパティの積極利用などより .NET 言語での開発が容易となるように設計されています。

##### 他システムとの親和性
FKは元々研究での利用を念頭に設計されているため、他システムとの親和性を重視しています。例えば OpenGL コードの直接記述やGLSLによるシェーダー記述、OpenCV, ARToolkit、CUDAを利用するような場面においても、他のシステムと組み合わせることが容易です。また、GUIライブラリについても、FLTK や Qt など様々なシステムを選択することができます。

##### 高度な形状操作
FK では、形状を表す方法として通常のインデックスフェースセットの他に、「半稜線構造 (Half-Edge Structure)」 という高度なデータ構造を保持する形状クラスがあります。このデータ構造は業務用CADでも用いられている堅牢で優れたもので、点・線・面といった要素の動的な追加や削除などが可能となっています。

##### 優れた座標変換
3Dプログラミングでは、座標変換が大きな割合を占めます。これを FK で実現するクラスが「fk_Model」です。このクラスは大変強力で、ユーザが指定したいと思う要望をほぼ網羅した機能を保持しています。また、行列やオイラー角、四元数(クォータニオン)を用いた制御も容易であり、様々な理論を簡単に適用することができます。fk_Model 自体が親子関係(階層構造)をなす事ができるので、ボーンアニメーションも簡単に構築できます。

### 他のライブラリとの比較
FKは歴史的にはかなり古い部類のライブラリであり、後発のライブラリ(例えば Siv3D など)と比較するとやや重厚な印象を持つのではないかと思われます。コンテンツ制作においては、他のライブラリの洗練された設計がとても有効に働くと思います。一方、研究開発などではFKのようなライブラリはクラスの各機能が助けとなるのではないでしょうか。また、FKはゲームそのものだけでなく、様々なゲーム用ツールを作成するためのライブラリとして高い機能を発揮します。

もっと詳しく知りたい人は、まずは[FK Webページ](http://gamescience.jp/FK)を参照してみて下さい。また、以下のタイトルで論文としてもまとめていますので、研究や教育での活用事例について知りたい人は参照してみて下さい。この論文中で[「FK Performer」](http://gamescience.jp/~rita/FKP/)というモーション制作ツールが紹介されていますが、それ自体もFKで作成されています。また、FK Performer で作成したモーションは FK 中で容易に制御できます。

[論文「独自ツールキットによるスケーラブルなCGとゲーム開発の教育的実践」](https://ipsj.ixsq.nii.ac.jp/ej/index.php?active_action=repository_view_main_item_detail&page_id=13&block_id=8&item_id=80442&item_no=1)
ゲーム制作におけるカラーユニバーサルデザイン

[Happy Elements 株式会社 カカリアスタジオ Advent Calendar 2016](http://qiita.com/advent-calendar/2016/hekk_cacalia_studio) 20日目の記事です。
担当はチーフデザイナーの @sailtask です。

## **はじめに**
ゲームのグラフィックやUI、ルックを作る上で、色彩設計や配色のバランスを考えるのは、見栄えだけでなくその操作性やゲームを通じた体験全てにおいて、非常に重要な意味を持ちます。

カカリアスタジオでは、1タイトルごとに専任のグラフィックデザイナーがUIからバナーなどのグラフィック素材制作を行う体制となっていますが、実制作に当たって意識してもらっている考えの一つに「カラーユニバーサルデザイン」があります。

## **色覚特性とカラーユニバーサルデザイン**
![1.png](https://qiita-image-store.s3.amazonaws.com/0/230/f8d7d3e3-76eb-b88e-d340-144f87031408.png)

### **色の見え方について**
「色」とは、そもそも人によって見え方が異なります。その中でも、先天的にその錯体細胞（色を見分ける細胞）の数が少なかったり、または疾患などが原因で、特定の色域を見分けることができない方が存在します。

大多数の人の色の見え方を**一般色覚**と呼ぶのに対し、それらの見え方を**色覚特性（色覚異常）**と呼びます（色弱・色盲と呼ばれることもあります）

### **色覚特性の分類**
色覚特性は、大きく分けて2つのグループ（P型、D型）に分けられます。いずれかを保有する人は、日本人男性の**約5%（20人に1人）**、女性の場合は**約0.2%（500人に1人）**という、わりとありふれた割合で存在していることが分かっています。全体では**約320万人以上**が保有者とされています。

この割合は欧米圏の場合、男性で約8%、女性で約0.5%と増加する傾向にあり、逆にアフリカ圏などでは減少する傾向にあるようです。

このことから、ゲームのように不特定多数のユーザーへ向けて発信する製品やサービスのデザインについては、それら**色覚特性を持つユーザーを考慮したした色彩設計（= カラーユニバーサルデザイン）を取り入れる必要性がある**と考えられます。

特に、海外を意識した作品、男性向けジャンルなど、保有割合が大きいターゲット層に向けたゲーム、パズルゲームなどの属性の色分けがゲームプレイの鍵となっているタイトルについては、非常に重要な考え方と言えます。

参考：[色覚型と特徴 - 特定非営利活動法人カラーユニバーサルデザイン機構CUDO](http://www2.cudo.jp/wp/?page_id=540)

## **ツール**
実際に、色覚特性に配慮したUIを作る際に利用しているツールや機能についての紹介です。

### **Photoshop**
**Photoshop**には、標準機能でP型、D型の色域をシミュレートすることができます。

![dea442e7d1768160d5750dbf2cb2590e.gif](https://qiita-image-store.s3.amazonaws.com/0/230/6891868a-9287-7d2d-726d-c2ba34856dc4.gif)

メニューの `表示 > 校正設定` より、`P型（1型）色覚` または `D型（2型）色覚` のいずれかにチェックを付けることで、それぞれの色覚フィルターを現在のドキュメントに適応させることが出来ます。（あくまで見え方を変えているだけなのでドキュメントの内容には影響しません）

戻す時は `表示 > 色の校正` のチェックを外すことで元に戻ります。

### **Skala View / Skala Preview**

[Skala Preview - Bjango](https://bjango.com/mac/skalapreview/)

**Skala View** と **Skala Preview** は、紐付けられたデバイスにPSDファイルをリアルタイムで表示するアプリ（とソフトウェア）です。Photoshopと連携することでリアルタイムで実機でデザイン確認が出来るため、主にそういう使い方をしていますが、こちらもシミュレート機能があります。

| 通常の見え方 | シミュレーター呼び出し | 結果 |
|:-:|:-:|:-:|
|<img width="375" alt="1.png" src="https://qiita-image-store.s3.amazonaws.com/0/230/bed3aa58-0df6-c5a4-0cb4-7a37a63d4353.png">|<img width="375" alt="2.png" src="https://qiita-image-store.s3.amazonaws.com/0/230/aa9be471-b389-76f5-9684-11353e3d322e.png">|<img width="375" alt="3.png" src="https://qiita-image-store.s3.amazonaws.com/0/230/1c3ea9d2-2924-7fe9-564a-a378d21e1831.png">|

これはちなみに以前は有料でしたが、いつからか無償で公開されるようになりました。

## **色のシミュレータ（おまけ）**
[色のシミュレータ - App Store](https://itunes.apple.com/jp/app/senoshimyureta/id389310222?mt=8)

**色のシミュレータ** はデバイスのカメラを通じて、景色に色々な色覚特性のフィルタを掛けるアプリです。実用的なツールではありませんが、色覚特性を持つ人がどういう景色を見ているのかを体験できます。

## **おわりに**
ゲームのUIやグラフィックは基本的にシュッとしたものやイケイケなものを求められることが多いですが、そういうアウトプットにたどり着くまで、実はこういうことを考えてデザインをしているということが伝わると嬉しいです :)

ちなみにサンプルのイラストは当社マスコットキャラクターのハピエレちゃんです。かわいい。

### **カカリアスタジオで一緒に働く仲間を募集してます！**
[Happy Elements株式会社 カカリアスタジオ](http://cacalia.jp/) ではエンジニアだけでなく、クリエイティブ職（グラフィックデザイナー、イラストレーター、アニメーションデザイナー）も社員、アルバイト問わず積極的に募集しています。ご応募は [こちら](http://www.happyelements.co.jp/recruit/) から。
Swiftについての覚書７

#Toolbarについて
今回はこんな感じのツールバーを作成するサンプルです。

![Untitled7.png](https://qiita-image-store.s3.amazonaws.com/0/150621/3504ff2f-1597-1ad9-0126-056346476f8e.png)


##ツールバーのサイズを決める

    let myToolbar = UIToolbar(frame: CGRectMake(0, self.view.bounds.size.height - 44, self.view.bounds.size.width, 40.0))

##位置を決める

    myToolbar.layer.position = CGPoint(x: self.view.bounds.width/2, y: self.view.bounds.height-20.0)

##色を決める

    myToolbar.barStyle = .BlackTranslucent
    myToolbar.tintColor = UIColor.whiteColor()
    myToolbar.backgroundColor = UIColor.blackColor()

##ボタン１を生成する.
    let button1: UIBarButtonItem = UIBarButtonItem(title: "Button1", style:.Plain, target: self, action: #selector(onClickBarButton(_:)))
    button1.tag = 1
        
##ボタン２を生成する.
    let button2: UIBarButtonItem = UIBarButtonItem(title: "Button2", style:.Plain, target: self, action: #selector(onClickBarButton(_:)))
    button2.tag = 2

##ボタン３を生成する.
    let button3: UIBarButtonItem = UIBarButtonItem(title: "Button3", style:.Plain, target: self, action: #selector(onClickBarButton(_:)))
    button3.tag = 3
        
##ボタンの間のスペースを作成
    let buttonGap: UIBarButtonItem = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FlexibleSpace, target: nil, action: nil)
        
##ツールバーにボタンとスペースを入れる
    myToolbar.items = [button1, buttonGap, button2, buttonGap, button3]
        
##Viewにツールバーを設定
    self.view.addSubview(myToolbar)

完成！！
並列でAndroidのブラウザテストがしたい(Ruby)

この記事は[selenium_and_appiumアドベントカレンダー2016](http://qiita.com/advent-calendar/2016/selenium_and_appium)の20日目の記事です。

![parallel_5.gif](https://qiita-image-store.s3.amazonaws.com/0/141487/c01f12b6-f07f-952f-5c3e-b6f52c5581e4.gif)

# はじめに

TEISHISEIです！語弊を恐れず書きます!お手柔らかにー

上のgifは弊社の[STF](https://github.com/openstf/stf)環境で実行したAndroid端末のSelenium(Appium,Selendroid)並列実行です。
STFとはリモート(ブラウザ)でAndroidの実機操作を行うツールです。STFの方が気になる方は[こちら](http://qiita.com/xshsaku/items/2aee50c12923223f18db)へ。

# Androidで動かしたい

Androidでブラウザテストがしたい場合、かなり複雑ですよね。

- Android2.3以上ならSelendroid
- Android4.2以上ならAppium
    - Chromeを使いたいならAndroid4.2以上
        - Chromeをインストールしている
        - Android Chromeのversionは43.0.2357.0以上
    - Browserを使いたいならAndroid4.4以上
        - Browserがインストールされているか(com.android.browserでないといけない。メーカー独自のBrowserだと動かない)

そしてdriverインスタンス作成時のconfigとかがそれ毎に違ってたりして複雑。調べるのも結構大変。

なので並列実行できるRuby用のSelenium(Appium,Selendroid)のラッパーを作りました。
実行できるブラウザとツールを判定して勝手にいろいろ設定してくれます。

# インストール

すいません。まだちゃんとテストできてないので公開はしていません。
gitから落として手動でbuildする必要があります。

```
$ git clone https://github.com/arakawamoriyuki/android_webdriver.git
$ cd android_webdriver
$ gem build android_webdriver.gemspec
```

そしてGemfileにbuild後にでてきたgemを指定。

```
gem '/path/to/android_webdriver-x.x.x.gem'
```

# 使い方

古いAndroid2.3も実行できるように[selendroid-standalone.jar](http://selendroid.io/)をダウンロードしてください。

実行できる環境にあるのか、下記で検証できます。

```
$ bundle exec android_webdriver doctor
```


## シンプルにudidを指定して1端末実行

```
require 'android_webdriver'
udid = 'xxxxxxxxxxxxx' # udidを調べて設定してください
driver = AndroidWebDriver.for(udid)
driver.navigate.to 'https://www.google.co.jp'
driver.quit
```

## オプションを指定して1端末実行

```
require 'android_webdriver'
udid = 'xxxxxxxxxxxxx' # udidを調べて設定してください
driver = AndroidWebDriver.for(udid, {

  ## 実行したいブラウザ名. (Chrome or Browser or Selendroid)
  # 指定がなければ自動で選択。
  browserName: 'Chrome'

  ## selendroid-standalone.jarのパスを指定
  # selendroid-standalone.jarをダウンロードしてください。デフォルトではfindコマンドを使って、下層ディレクトリから検索したパスを利用します。
  # `find . -name 'selendroid-standalone-*.*.*-with-dependencies.jar' -type f`
  selendroidPath: './selendroid-standalone-*.*.*-with-dependencies.jar'

  ## 各ポートを設定します。
  # デフォルトで空きポートを調べて設定してくれます。
  port: '4444'
  bootstrapPort: '4445'
  selendroidPort: '4446'
  chromedriverPort: '4447'

  ## ログの吐き出し
  logPath: "./log/#{Time.now.strftime('%Y%m%d%H%M%S')}.#{udid}.log"
})
driver.navigate.to 'https://www.google.co.jp'
driver.quit
```

## 複数端末を直列で実行

```
require 'android_webdriver'
udids = [udid,udid,udid...] # udidを調べて設定してください
AndroidWebDriver::MultiDevices.sequential(udids) do |driver|
  driver.navigate.to 'https://www.google.co.jp'
  driver.quit
end
```

## 複数端末を並列で実行

```
require 'android_webdriver'
udids = [udid,udid,udid...] # udidを調べて設定してください
AndroidWebDriver::MultiDevices.parallel(udids) do |driver|
  driver.navigate.to 'https://www.google.co.jp'
  driver.quit
end
```

# さいごに

記事作成までに間に合わず、まだバグがあるはずです。。
unix系osだと動くはず(未検証)。

次の記事は[tadashi0713](http://qiita.com/tadashi0713)さんです。
appiumについて書いてくれるとの事で期待してます!
PyCharmのリモートデバッグ機能を使ってみる

PythonのIDEであるPyCharmの売りとなる機能の一つとしてリモートデバッグ機能があります。
とても便利な機能ですが、使い方を日本語で解説してあるページがあまり無かったので、設定方法や便利な使い方を解説したいと思います。
※PyCharmのバージョンは"Professional 2016.3"で確認しています。

# リモートデバッグの必要性

単純な構文ミスや毎回発生するバグなど、ほとんどのケースはローカルのデバッグで解決できます。しかし、環境に依存するバグや、特定のユーザーデータに起因するバグはローカルのデバッグで発見することは難しいです。
また、ローカル上に仮想環境を用意して、そこで実行するケースも多いかと思います。その場合でもリモートデバッグは有効です。

リモートデバッグと呼ばれる機能は2種類あるので、それぞれ説明していきます。

# Python Debug Server方式
ローカルでデバッグサーバを起動し、リモートからアクセスさせる形式です。

## リモートの準備

まずはリモート環境の準備です。
ローカルのPyCharmをインストールしたディレクトリ内にデバッグ用のアーカイブが置いてあるので、それをリモートサーバの適当な場所にコピーします。

```bash
scp /Applications/PyCharm.app/Contents/debug-eggs/pycharm-debug.egg user@host:/path/to/pycharm-debug.egg
```

リモートサーバで上記のファイルのパスを通します。
環境変数「PYTHONPATH」に追加するか、プログラム上からsys.pathにパスを追加します。

例：sys.pathに追加する場合

```py
import sys
sys.path.append('/path/to/pycharm-debug.egg')
```

##  ローカルの準備
次に、ローカルのサーバを呼び出す設定を追加します。

```py
import pydevd
pydevd.settrace(192.168.1.1, port=12345, stdoutToServer=True, stderrToServer=True)
```

settraceの第1引数はローカルのホスト名（リモートとローカルが別ネットワークにある場合は、お互いにアクセスできるようにする必要があります）。
第2引数はローカルで待ち受けるポート番号になります。


以上で、準備は完了。

## デバッグ実行

続いて、ローカルで待ち受けるサーバを起動します。
PyCharmの "Run/Debug Configurations" の設定で、左上の＋ボタンから "Python Remote Debug" を選択します。

![スクリーンショット 2016-12-19 20.16.58.png](https://qiita-image-store.s3.amazonaws.com/0/85528/549c437a-f1d4-87d8-6c22-6e7c5e5f9b1b.png)

"Local host name" には先程のsettraceの第1引数で設定したローカルのホスト名。
"Port" には第2引数で指定したポート番号を入力します。
OKを押して、ブレークポイントを設定してからデバッグボタンをクリックすると、ローカルで待受状態になります。

リモートサーバのほうは普通にrunserver等で起動するだけです。
これで、ブラウザ等でリモートサーバにアクセスすると、ブレークポイントで停止してローカルのPyCharmからステップ実行等を行うことができます。

# remote interpreter方式

こちらはsshで接続して、リモートのインタプリタを使う方式です。
利用頻度は少ないかもしれません。
なお、この方式は有料のProfessinalEditionでしか利用できないようです。

PyCharmの設定画面から"SSH Remote Run plugin"を有効にします。
![スクリーンショット 2016-12-19 12.17.27.png](https://qiita-image-store.s3.amazonaws.com/0/85528/30d12b3f-0fe1-604e-9f2d-8316f088d548.png)


次に 「設定 > Project: server > Project Interpreter」
"Project Interpreter" 横の歯車マークをクリックして、add Remoteを選択します。

SSH Credentialsを選択して、SSHでログインする情報を入力します。
![スクリーンショット 2016-12-19 16.02.34.png](https://qiita-image-store.s3.amazonaws.com/0/85528/16f8901f-46d1-dbf9-ca02-fc2f281c8427.png)

path mappings　横のボタンをクリックして、ローカルのapplicationディレクトリとリモートのapplicationディレクトリを追加します。

これでinterpreter一覧にリモートサーバのインタプリタが追加されるので、ローカルで選択して動かすことができます。


# 最後に

Python Debug Server方式はpydevを実行するかたちになるので、ON/OFFの設定を簡単に切り替えられるようにして、必要なときだけONにして使うようにすると良いと思います。
設定は面倒ですが、かなり便利な機能なので、是非オススメです。
Securing OpenAM

## 今日やること

取り留めのない情報を発信しているAdvent Calendarとなりつつありますが、今日はOpenAMをマジで使う前にやっといたほうがいいことをまとめていきたいと思います。

## ソース

主に[Forgerock社が公開しているガイド](https://backstage.forgerock.com/docs/openam/13.5/admin-guide)からの引用となります。

## **変更しとくべきデフォルトの設定９連発**

OpenAMは比較的簡単に(？)試してもらえるようにと、デフォルトである程度の設定が入った状態でデプロイされます。ただ、このデフォルトの設定の一部を残したまま、本番運用すると**酷い目にあいますよ～**という内容です。

全部で９つあります。

#### その１：LDAPに接続するときは専用のユーザーを作成し、ACLをちゃんと設定して、バインドするべし

内蔵のLDAPを使うなんて、言語道断。ちゃんと専用のIDストアを用意して、バインドユーザーを作成する。

#### その２：Cookieの名前をiPlanetDirectoryProから変更するべし

認証後、こんな名前のCookieが配布されてたら「あ～OpenAMなんだ～~~（脆弱性調べよう～）~~」ってなります。

#### その３：デプロイメントするURLを`openam`を使うべからず

これも、その２と同じ。

#### その４：最上位のレルムの管理者を`amadmin`とすべからず

管理者のアカウント名が決まっているっていうのはかなりまずいですね。

#### その５：管理者アカウントを作成し、トレースできるようにしておくようにするべし

監査の観点からすべきでしょうね。

#### その６：認証失敗時のエラーメッセージを統一すべし

`openam.auth.soap.rest.generic.authentication.exception`を`true`に設定したらよいとのこと。

#### その７：デモユーザーは消すべき

デフォルトで`demo`というIDのユーザーが作成されています。消しましょう。

#### その８：gotoパラメータに制限をかけるべし

Open Redirectorを防ごうねっという意味でしょう。Validation Serviceという、有効なgotoパラメータをリスト化して、評価する仕組みがOpenAMにはありますので、設定しましょう。**Top Level Realms -> Services** からValidation Serviceを追加できます。

#### その９：モジュールベースの認証はOFFにすべし

サインイン画面に`module=DataStore`みたいなQuery Parameterをリクエストすると、認証のチェーン設定を無視して、IDとパスワードだけで認証出来ちゃいます(⋈◍＞◡＜◍)。✧♡




**結構危ない設定がありますね。(;´Д`A**
特にインターネットに公開しているサイトでOpenAMを使っている場合、どれか1つでもやってないことがあったら、設定を変更した方がいいレベルですね。先ほども書きましたが、**OpenAMを使っている**ってことが判明するだけでも攻撃の対象になりうるかと思います。

## **ネットワークのデザイン**

わたしのとこみたいに従業員向けのIAMということであれば、最初からはあまり複雑に考えなくてもいいのかなぁ～？と思ってはいます。しかし、IAMをインターネットに公開する場合は、ここに書いてあることについて、考える必要があるかと思います。

1枚の画像を[ForgerockのAdministration Guide](https://backstage.forgerock.com/docs/openam/13.5/admin-guide)から参照します。

![](https://backstage.forgerock.com/cp/portal/cloudstorage/PmV0fl73Q-OkGz6YGx4Gjg?redirect)

IAMはその特性上、インターネットに公開された場合、ありとあらゆる攻撃にさらされると思います。なので、本当に外部のユーザーやデバイス、サービスが利用するエンドポイントだけをホワイトリスト形式で公開するのが良いデザインであるというお話です。解決方法として挙げられているのが、上述のとおり、DMZにリバースプロキシーを配置して、エンドポイントの公開を行うという方式です。

確かに、外部のエンティティからすれば、OpenAMの管理画面にアクセスするエンドポイントは不要ですし、ドメイン内のID連携をおこなうPolicy Agent系のエンドポイントも不要ですね。せいぜい、Federation用のエンドポイントと認証系のエンドポイントぐらいあれば十分でしょう。

## セキュアコミュニケーション

他にも通信の保護という観点から以下のことを設定するべきと言われています。

#### 1. HTTPS、LDAPSをつかうべし

「常時暗号化通信」って時代ですからね～。あたりまえでしょう。

#### 2. 発行するCookieはSecure Cookieにすべし

** Configure -> Server Defaults -> Security -> Cookie**から設定できます。

#### 3. 発行するDomain Cookieはサブドメインとすべし

ん～？ドメイン内に悪人が居るっていうことを懸念しての注意書きかな？Policy Agentを使わなくて、全部SAMLとかOpenID Connectでやる場合は無視してもいいかと思っていますが...。

#### 4. デフォルトのカギはゴミ箱に捨てるべし

署名や暗号に使っているキーストアに入っているデフォルトのカギは捨てて、ちゃんと作りましょう。`keytool`の出番ですね。

#### 5. SAMLのメッセージは暗号化すべし

SAMLは詳しくないのですが、署名だけでは足りないってことを言ってますね。理由がよくわからないですねぇ。


## 〆

今日は調べもの中心でした。

わたしの会社のIAMもOpenAMで作るときはこれらの設定をやってからリリースしたいと思いました（小並感

明日はなにしよう～？

ばい！
何か！を書こうとしてみた

#こんにちは!  

2016年7月より、さくらインターネットのエバンジェリストとなりました *みたにくみ* です。
北海道のITコミュニティ界隈では、「母」(はは) と呼ばれることが多くなりました。
最近では、年上の人にも「母」って呼ばれることが増えて、あやしうこそものぐるほしけれなう。

##1996年から2016年

さくらインターネットのアドベントカレンダーを予約して、「何か！」書くと思ったときには、「さくら この20年」とか書こうかと思ったりしていたんですよ。
実はわたくし、さくらインターネットが創業したとき(1996年12月23日)は、その上流だった、東京インターネット株式会社の運用技術部に勤めていたのです。


なので、その後も、さくらの田中社長 (*1) とは、東京インターネットの社長・会長だった、高橋徹氏 (*2) がインターネットの殿堂入りした時のパーティや、その他の機会にお会いしたり、さくらが石狩にデータセンターを構えてからは、北海道でのイベントも増え、その折に、田中さんの話も聞いていたので、なんとなく、書けそうな気がしちゃったんです。(アマいな。自分)


なんにせよ、まずは高橋氏(以下、toru氏)にメールしてみました。
ご高齢ですし、すぐにはお返事は無理かなぁ。なんて思いながら待っていますと……


toru氏 **「さくらインターネットが起業してTokyo Netに挨拶にきたのを覚えています。あれから20年ですか。」**


Yes! Yes!! 返事がきましたョ！感慨深そうです。
というわけで、先月、高橋邸にお邪魔してインタビューしてきました！


toru氏 **「田中くん、さくらインターネットを起業して、御苑ビルの社長室に挨拶に来たの、よく覚えている」**

とのこと。そう、このときの田中さんは18歳。20年たった今、田中さんは、38歳。 (遠い目をしています)
もう既に、遠い親戚のおねーちゃんみたいな気持ちになってきます。


toru氏 **「舞鶴高専の学生で、インターネットプロバイダを起業したってことで、新聞にも載ったね」**

探しました。探しましたが、インターネット黎明期の新聞記事はウェブで探し当てることができず。

そんなこんなで、「喉つまらないようにね、よく噛んでね」とじゃがポックルを食べつつ、

*「殿堂入りパーティのときは、田中さんが若い人たくさん連れてきてくれて、みなさんとっても喜んでましたねー」「こないだの某キャンプの時も、さくらメンバーの発表すごく良かったんですよー」* なんて、わたしの報告に

**「うんうん」**

と、嬉しそうに微笑んでいる、親戚のおじいちゃんモードになっていました。


そういうわけで、さくらの20年を東京インターネット側から見てみよう！と、いう目論見は、ぽかぽかのリビングで、綺麗な夕焼けを見ながらじゃがポックルとなりました。


記念すべき20周年のタイミングで、さくらインターネットにjoinできて、ad.jp に再び戻ってくることができたこと、すごく幸せに感じています。
これからも、さくらを好きって思ってもらえるよう、evangelize できますよう、おつとめします。


## エバンジェリストって、何をしているの？

ってか、さくらで何をしているの？？って、よく聞かれます。
12/4 に、[「さくらインターネットのエバンジェリストチームって何やってるの？」](http://nextcloud.tokyo/?p=295)という大変わかりやすいエントリがあります。
[toshi__ya](https://twitter.com/toshi__ya) さんありがとう！


このお品書きの中で、わたしが主に担当している活動は、広報活動とコミュニティ活動になります。

- 広報活動

　主に北海道で開催される社外セミナー・ハンズオンの運営。パートナー起業さんとのイベント開催のお手伝いをしています。
　石狩見学のアテンドもしています。

- コミュニティ活動

　12/7 に、[さくらの技術イベント動向＆「さくらの聖夜」今年も開催！](http://qiita.com/hourin/items/b31ba668de21bcbbf3c7) で、hourin さんが書いているように、エバンジェリストは、さくらの技術コミュニティの開催、運営をしています。

　また、個人でもITイベントやカンファレンスの運営スタッフをしています。
各種イベントにてさくらに興味を持ってくださっている方々とつながり、色んなお話できるといいなと思っています。


IT業界ですと、エバンジェリストといえば技術支援を主にしている方が多い印象ですが、さくらには、 hourin さんをはじめ、コミュニティでの活動を主軸にしているエバンジェリストもいます。

ITコミュニティ・ITイベントでの活動で、なにかお役に立てそうなことがあれば、お声をかけてください。どうぞ、よろしくお願いいたします。



<DL>
<DT>
(*1)
<DD>先日、[YAPC::Hokkaido 2016 SAPPORO](http://yapcjapan.org/2016hokkaido/) にて、さくらインターネットは懇親会スポンサーとして協賛しました。そのため、乾杯の挨拶を田中さんにお願いしたのですが、
「！社長っ！乾杯をおねがいしまっす！！」　と、申し上げますと
「いつも社長なんて呼ばないじゃないですかっ！！ (ひどいっ)」　と、ツッコミが入りました。ひぃ。なんでー
</DD></DT>

<DT>
(*2)
<DD> [高橋徹氏の Wikipedia エントリ](https://ja.wikipedia.org/wiki/%E9%AB%98%E6%A9%8B%E5%BE%B9_(%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%E7%A0%94%E7%A9%B6%E8%80%85))
現在は、ご自宅で療養しながら、まったりと過ごされています。
どうしてもというイベントにもは、参加されていることも。

![toru氏とうちの娘 2016年11月撮影](https://qiita-image-store.s3.amazonaws.com/0/147203/f9aee0b6-7ffd-9b4e-e0c0-63808d118ea5.jpeg "私と撮ったのより、こっちのほうが格段にいい表情なので")![toru氏 snowの洗礼](https://qiita-image-store.s3.amazonaws.com/0/147203/b4474a39-937b-2a16-3e30-35863db062e7.jpeg "snowで破顔一笑")
</DD></DT>
OpalでElectronのアプリをつくる(その4)

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

完全に間に合っていません。(今日は12月19日です)
ネタ切れ感満載です。しかたがないのでelectron_opalの続きです。

[本家](https://github.com/jannishuebl/electron_opal)にちまちまPRを送るよりは、[フォーク](https://github.com/youchan/electron_opal)して完全に書きかえてしまおうという戦略を取ることにしました。
新しいものを作ろうという理由はいくつかあるのですが、一番大きいのは、opal-viennaに読み込んでいるところです。
わたしとしてはやはり拙作の[Hyalite](https://github.com/youchan/hyalite)やM[enilite](https://github.com/youchan/menilite)を使いたいところです。そうでなくてもviennaにロックインするのはうれしくありません。

いくつかの修正をほどこして、Opal v0.10.3でオリジナルのものと同等くらいに動くようになりました。(v0.0.1でタグ付けしてます)
(ただし、viennaなどデフォルトでrequireしているものは外しました。)

やったことは以下のとおり

* Opal v0.10.3に合わせ使えなくなったAPIを起きかえた
    * `Opal::Processor` => `Opal::Builder` など
* ファイルをいくつか分割した。
    * *electron_opal.rb* => *rake_task.rb*, *index.rb*, *debug_server.rb*
* DebugServerなどを直してdebugタスクがちゃんと動くようにした。
    * SprocketsをOpalに組みこみのものを使うようにするなど

などなど

今日はDebugServerについてちょっと書きます。

オリジナルのコードは

```ruby
def env
  @env ||= Sprockets::Environment.new
  @env
end
```

Sprocketsの環境を新しく作っています。
コンパイルするだけなら、Sprocketsは必要ありません。実際、`Opal::Builder`を使っているbuildタスクはこの`env`に依存していません。
debugタスクもコンパイルする部分と開発用のサーバーとに分けると、コンパイルする部分に関しては`env`を使わないはずです。
なのでこの`env`というメソッド完全に消すことができました。

代りにDebugServerでは`Opal::Server`を作ることにします。

```ruby:lib/electron_opal/debug_server.rb
def initialize(config)
  Opal::Config.source_map_enabled = true
  @opal = Opal::Server.new do |s|
  config.paths.each {|path| s.append_path path }
     s.debug = true
  end

  create_app @opal
end
```

オリジナルのコードではコンストラクタに`env`を渡していたものを`config`を渡すように変更しました。
依存が切れてすっきりします。
Sprocketsが必要なところでは、`opal.sprockets`を使います。こんな風に

```
maps_app = ::Opal::SourceMapServer.new(opal.sprockets, maps_prefix)
```

htmlファイルを生成している*index.rb*もシンプルになります。

```ruby:lib/electron_opal/index.rb
def javascript_include_tag
  if @debug
    Opal::Sprockets.javascript_include_tag(@name, sprockets: @sprockets, prefix: @prefix, debug: true)
  else
     %{<script src="#{@prefix}#{@name}.js"></script>}
  end
end
```

こうなってくるとハードコードしているhtmlファイルの生成部分も普通にテンプレートを使って生成することができそうです。
次回はそのあたりをやろうと思います。
まだ勤怠処理で消耗してるの？Amazon Dash Button で出退勤する

ACCESS の近藤です。

弊社の同僚 @kumabook の記事とコラボです！
…というか完全にタダ乗りです。ゴメンなさい。(まだ本人は知らない)

TeamSpirit という勤怠システムを採用している会社限定です。

## 何つくったの？

* dash-hack-spirit  
  https://github.com/diescake/dash-hack-spirit

デモ動画撮影してみました。
流石に勤怠システムはお見せできないので前回以上に地味です。
ただログがでるだけで、もはや動画でなくても良い気さえします。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">出退勤できるボタン <a href="https://t.co/MLwMQ3QiTJ">pic.twitter.com/MLwMQ3QiTJ</a></p>&mdash; ポメラニウス (@pomeranian_dev) <a href="https://twitter.com/pomeranian_dev/status/810859079174266880?ref_src=twsrc%5Etfw">2016年12月19日</a></blockquote>

どちらかというと、ボタンのシールを作るのを一番楽しみにしていたのですが、
環境構築に手間取り既に今 23:45 で余裕皆無でした…。

もし作ったら、後ほど追記します！

## 仕組み

[dash-button](https://github.com/ide/dash-button) 使ってます。
[hack-spirit](https://github.com/aHirokiKumamoto/hack-spirit) 使ってます。

[dash-hack-spirit](https://github.com/diescake/dash-hack-spirit) は dash-button でボタンの押下イベントを拾って、hack-spirit で TeamSpirit の勤怠処理を行う仕組みです。

…説明がなんかデジャブ感ありますね。

hack-spirit の詳細は @kumabook さんの記事をご覧ください！
http://qiita.com/kumabook/items/de159bd02de5458927b8


## 感想とか

追い込まれると集中力上昇のパッシブスキルが発動する~~ギリギリまでやらない~~タイプなので、
19:00 くらいから始めたのですが、環境構築に3時間かかって死にかけました…。

自宅のネットワークならすんなりいったところが、
会社のネットワーク内で、しかも VirtualBox のブリッジで繋ごうとしたりとか、そもそも mac だと libpcap-dev インストールできないやんけ…、とかとか落とし穴が多くて、もっと計画的にやろうね！というのが教訓です。(たぶん治らない)

それでは、明日は…というかもはや数分後ですが、再び、@kumabook さんでした。
次回以降も、よろしくお願いします！
ICUの使用用途

# ICUとは
ICUはInternational Components for Unicodeの略で、その名の通りUnicodeに関するあれこれを扱ってくれるライブラリです。
TATEditorで利用しているICUの機能はざっと以下の通りです。

- 正規表現検索 (regular expressions)
    - Unicode的には[UTS#18](http://www.unicode.org/reports/tr18/)の実装になります
        - Level 1とLevel 2の一部を実装している
    - 使う場合はこちら側のテキストをUTF-16で持っておくと便利
        - `UText`を実装すればかなり自由度の高い文字列クラスを使えます
- 曖昧検索 (collation)
    - 使う場合はこちら側のテキストをUTF-16で持っておくと便利
        - `UCharIterator`を実装すればかなり自由度の高い文字列クラスを使えます
- 文字種の変換
    - Hiragana to Latin, Any to Upper, Any to NFCなどの変換ができます
- 文字列境界の解析
    - 改行可能な位置の取得
        - Unicode的には[UAX#14](http://www.unicode.org/reports/tr14/)の実装
        - TATEditorでは折り返し改行を行う場所の探索に利用しています
    - 単語の区切りの取得
        - Unicode的には[UAX#29 (Word Boundaries)](http://www.unicode.org/reports/tr29/#Word_Boundaries)の実装
        - TATEditorではダブルクリック時の選択範囲の決定に利用しています
    - 文章の区切りの取得
        - Unicode的には[UAX#29 (Sentence Boundaries)](http://www.unicode.org/reports/tr29/#Sentence_Boundaries)の実装
        - TATEditorではトリプルクリック時の選択範囲の決定に利用しています
- Unicode情報の取得
    - Unicodeの種々の値を取得できます
    - TATEditorでは文字のUnicode名を表示する際に使っています
        - ステータスバーのコードポイントを右クリックすると出る
- 文字コード検出
    - 実装はメジャーな文字コード全てに対して評価関数（バイナリ ↦ [0,100]）を設計し、その評価値の最も高いものを選ぶというもの
    - それなりの精度
- 文字コード変換
    - UTF-16 ⇄ 各種文字コードの変換ができる
    - 変換元/変換先の文字コード名を知っている必要がある
        - 一覧は[ここ](http://demo.icu-project.org/icu-bin/convexp)で見られます
- 日付/時刻の文字列化
    - 時刻を各Localeの表記に変換するものです
    - 昔はWindows 7以前で日本のタイムゾーンの取得に失敗して韓国標準時になったりしてた
        - 直ったという噂を聞いている
        - 昔は https://twitter.com/496_/status/104628456599470080 みたいな感じで修正してました
    - TATEditorでは現在時刻の挿入などに使っています
        - F5キーで挿入できる

他にもBiDiのAPIやレイアウトエンジンがあります。
BiDiはアラビア語などに対応する際にお世話になるかなと思ってます。

# ICUのビルド
- Windows
    - Visual Studioのソリューションファイルをビルドすれば完成です
    - スタティックライブラリのビルドはちょっと骨が折れます
        - （適切な手順を書く時間がなかった）
- Ubuntu
- macOS
    - 適切な引数で`./runConfigureICU`すればいい感じになる
    - macOSでUniversalバイナリを作るなら`lipo`しましょう
- iOS
- Android
    - https://github.com/zhuxiaomengjj/icu-cross-compile が良さそう
    - 適当に修正して使いましょう

# ICUのサンプルコード（`NULL`）
時間が足りませんでした＞＜。

# おわりに
ICUはUnicodeの仕様を実装する手間を省く際には非常に便利なライブラリでした。
本当は「ICUの使い方」というタイトルだったのですが、使い方（サンプルコード）に手がつかなかったので変更しました。

明日はwxWidgetsのことを書きます。
RedDotRubyConf 2016 について

# はじめに
この記事は、Shinosaka.rb Advent Calendar 2016 の 20日目の記事です。

内容はシンガポールの [RedDotRubyConf 2016](http://reddotrubyconf.com/) の感想です。

# RedDotRubyConf とは

* シンガポールでの RubyConf です
* そもそも RedDot とはシンガポールの別名です。
  * 地図上の赤いシミ（Dot）というのが由来で RedDot と呼ばれるようになったようです
* SG$ 355.49 、日本円でざっくり 3万円とわりとお高いカンファレンスです
* シングルトラックで 2日間のカンファレンスです

# シンガポールに注目する理由

* 初等教育が優れている
* 英語＋中国語ってこれからの時代良い気がする
* 東南アジア、南アジア、オセアニア地域の首都がシンガポールという感じ。
    * RedDotRubyConf では、いろんな地域の Rubyist が集まる
    * 一度にいろんな人と交流できる
* 治安が良く、食べ物がおいしい

# RedDotRubyConf の特徴、オススメする理由
* 利用者の立場の発表が多い
    * 技術レベルとしては確実に日本の方が高いと思う
    * 逆に、日本の RubyKaigi はガチすぎ、怖いと思う人にオススメな気がする
* わりと交流する時間が長い
    * 休み時間がたくさんある
    * 食事つき（5食もある！！　1日目朝、昼、2日目の朝、昼、夕。おやつもある）
    * 食事会場への移動などがなく、ずっと同じ場所にいる分、話をする時間が長くなる。
* 日本人と話すときの話
    * 普段は、すごく話しかけにくい人でも同じ日本人というだけで話しかけやすくなる
    * 今回は、万葉の大場社長とかとすごく話ができてとてもよかったです
* 日本人以外の人と話すときの話
    * 日本人というだけで話が弾む部分もある
    * Ruby が日本発祥だからか、日本に好意的な人が多い
    * 英語力が低くても、みんなちゃんと聞いてくれる。やさしい。
* コミュニティオーガナイザの参加者が多い
    * コミュニティ運営関係の話題でけっこう盛り上がれたりとかして良かった

# RedDotRubyConf 2016 で印象に残った発表
* [Matz さん](https://engineers.sg/v/800)
  * Ruby 開発者はユーザのことを思っているというメッセージが特に良かった
* [Let’s Play Ruby Golf](https://engineers.sg/v/802)
  * Quipper で働くマニラの女性エンジニアの発表だった
  * Golf厨には基本的な内容。日本と違い、マサカリが来ないと安心できる雰囲気がとても良い。
* [Where Did Everybody Go](https://engineers.sg/v/806)
  * 転職する人がどういう理由でどこに行ったのかに関する発表
  * これ以外にも、「How We Replaced Salary Negotiations with a Sinatra App」という地域ごとの給与水準とかに関する発表もあった
  * こういう技術系でない発表もあるのが、良い
* [Our Fight Against Super Bad Patterns in Legacy Rails App](https://engineers.sg/v/817)
  * 万葉の大場社長の発表。
  * Rails 2.x や 3.x から Rails 4.x に移行する話
  * 冗談とかもたくさん織り交ぜてあり、とても良かった

# RedDotRubyConf 2016 に行って良かった点
* シンガポール人の友達ができた
* いろんな国のコミュニティオーガナイザと知り合えた
* 日本のすごい Rubyist とがっつり話しこむことができた
* (RedDotと関係ないけど）
  * 海外在住日本人にもたくさん会えた
  * 子供服をたくさん買うことができた
  * 帰りの飛行機をビジネスクラスにアップグレードしてもらえた
  * 機内エンタテインメント映画（オデッセイ）、漫画（キングダム、進撃の巨人）を楽しんだ
  * でも、調子に乗って食べ過ぎた

# まとめ
* みなさん、海外カンファレンス行きましょう！
* RedDotRubyconf はオススメ
* シンガポール在住でない参加者がとても多く、居心地が良い
  * 親日
  * 交流する時間が多い
* RedDotRubyConf 来年も行きたい
FFmpegでgifアニメをmp4に変換する

誰に需要があるかわからんけど小ネタ。

gifアニメをmp4に変換したいときはffmpegを使って下記のコマンドで一発。

```
ffmpeg -i input.gif  -movflags faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" output.mp4 
```

ただひとつ、動画に変換すると透過を保持できないので注意。

<br><br><br>


ちなみに、ループが短い1秒未満のgif等の場合は生成された動画が短すぎるなと感じることがある。

そういう場合は、これもまたffmpegで上記コマンドでいくつか同じ動画を生成し、下記コマンドでそれらを結合するといい感じの長さの動画になる。

```
ffmpeg -i input01.mp4 -i input02.mp4 -i input03.mp4 -filter_complex "concat=n=3:v=1:a=0" output_concat_version.mp4 
```

nには結合する動画の数

vは動画結合で1ならtrue,0ならfalse

aは音声結合で1ならtrue,0ならfalse

を指定する。

手前味噌だが、自分の作っている[GIFMAGAZINE](http://gifmagazine.net/)というサービスでも一部でこのコマンドを使ったりしている。

ほんとffmpegはなんでもできる良い子。

## 参考

- [
Optimizing Animated GIFs by Converting to HTML5 Video 
](http://rigor.com/blog/2015/12/optimizing-animated-gifs-with-html5-video)
意外と忘れがちな色々なブラウザでのfont-family

#はじめに
いつもサイトをつくる時に向き合わなければならないのが ''Font Family" などのフォント関連の指定です。 あらためて最近のフォント指定事情について考えてみたので、その辺を失敗談も含めながら、ざっくり紹介しようと思います。



#<i class="fa fa-mobile" style="font-size:1em;"></i> iOSで見たとき明朝体表示になってしまう


画像左のように**Futura Koyu**(無料で使えるFuturaもどき）を適用させたデザインをもともとしていた場合、iPhoneで確認するとiOS上のブラウザ（SafariやChromeなど）では**明朝体**が適用されてしまっています。

![1.jpg](https://qiita-image-store.s3.amazonaws.com/0/126762/5b871bd0-b1a1-7cc2-41bb-88d7e729276e.jpeg)

これだとだいぶサイトの雰囲気が変わってしまい、iPhoneから見るユーザーのことが気になって夜も眠れないところです。

###なぜこのようなことが起こったか

上記のcss指定は以下でした。

```CSS
.top-about {
    padding-bottom: 0;
    font-family: "Futura Koyu";
}
```


これはsans-serif;の記述を抜いたことによるものだと気づくのに予想以上に時間がかかってしまいました。そこでこうします。

```CSS
.top-about {
    padding-bottom: 0;
    font-family: "Futura Koyu",sans-serif;
}
```

sans-serifを書き足しました。これで見慣れたあのこが帰ってきた安心感がでました。
ついつい影が薄い末尾にいるやつなので、ないがしろにしがちですが、このこはいわばフォントの保険なのでしっかり書いてあげます。


###フォントが指定されなかった時

iOSでは指定されたフォントがすべて見つからないと、デフォルトである明朝体を指定してしまうっぽいです。欧文フォントでserif系を指定しているなど、明朝体で表示されていい！というときでなければsans-serifを最後に付け加えるようにしたほうがいいでしょう。
いつも、スルーしがちですが、スマホ、また、Windowsなどの場合、フォントが見つからない、webフォントが読めていないなどの自分の開発環境では起きないさまざまな事を考えておかねばなりません。（最近はだいぶ楽になったと思いますが~~昔はWindows対応憎んでた~~）


#色んなブラウザの無指定時のフォント
ここで改めてブラウザのデフォルトフォントを確認しておきたいと思います。
もしフォントを指定しなかった場合に何が表示されるのか意外と知らなかったりするのでまとめてみました。

|ブラウザ|フォント|
|:--|:--|
|Safari |Times / ヒラギノ明朝 ProN|
|Firefox|ヒラギノ角ゴシック ProN|
|Chrome|ヒラギノ角ゴシック Pro|
|Internet Explorer|Times New Roman / ＭＳ Ｐゴシック|
|Opera|ヒラギノ明朝 Pro|
![2.jpg](https://qiita-image-store.s3.amazonaws.com/0/126762/a6450ba6-e320-9dcc-93aa-22f4365b5e1f.jpeg)


短い単語で見ると違和感は少ないですが、文章で見るとだいぶストレスが出て来るものもあります。

#<i class="fa fa-google" style="font-size:1em;"></i> おまけ
2016年で良かったことといえばwebフォントサービス最大手の（自分の中で）[GoogleFonts](https://fonts.google.com/)が今年の6月にデザインを大幅にリニューアルしたことでしょうか。サイト全体に[マテリアルデザイン](https://material.io/guidelines/)が存分に感じられるようになり、前のモヤっとした時代錯誤感が一気に解消されました。

また、テーマカラーをカスタマイズできるようになり、フォントを指定する前にいろいろな背景でこのフォントは映えるのかということを試すことができるようになっています。ありがたや。
<img width="649" alt="スクリーンショット 2016-12-19 21.51.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/126762/b5f7b51a-0df8-7284-8236-900537b83be2.png">

<font color="DarkGray">ただ、ダミーテキストが「Grumpy wizards make toxic brew for the evil Queen and Jack.」のパングラムじゃなくなったのは寂しいかも..</font>


とにかく！GoogleFontsをつかうのであれば、Serif、Sans-serifなどに合わせて、もともと末尾に最適なフォントを指定してくれていますので、上記で書いたことは気にせず、ぐいぐい開発しちゃって問題ないです。
<img width="600" alt="スクリーンショット 2016-12-19 17.05.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/126762/04b44113-5ca7-9415-6712-a8c3d4f26382.png">
######↑こんな感じで勝手についてくる。


### それではよいフォントライフを！<i class="fa fa-thumbs-o-up" style="font-size:1em;"></i>
Live2D WebGLのインスタンシングで遊んでみる♪

この記事は [WebGL Advent Calendar 2016](http://qiita.com/advent-calendar/2016/webgl)の19日目の記事です。
以前から興味のあったインスタンシングとLive2D WebGLを組み合わせてみました。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">WebGLのインスタンシングでハルちゃんを40体表示できたw <a href="https://t.co/4C3FWfnGky">pic.twitter.com/4C3FWfnGky</a></p>&mdash; naotaro (@naotaro0123) <a href="https://twitter.com/naotaro0123/status/810849772802191364">2016年12月19日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>


# 開発環境
[Live2D WebGL SDK2.1](http://sites.cybernoids.jp/cubism-sdk2/webgl2-1)

# 解説
インスタンシングは、大量のモデルを効率的にレンダリングする処理の事です。
詳しい解説は、以下を参考にしました。

・[wgld.org - インスタンシング](https://wgld.org/d/webgl/w075.html)
・[WebGLにおけるジオメトリインスタンシング（ANGLE_instanced_arrays）を丁寧に説明してみる](http://qiita.com/emadurandal/items/1812198d562bd1216c70)
・[WebGL対決！「本物インスタンシング VS 古えの擬似インスタンシング」速いのはどっちだ！？](http://qiita.com/emadurandal/items/c393283b1ff53573594f)

1体ずつLive2Dモデルを描画する方式では、6体以上になるとFPSが落ちてきます。
前に[Live2D WebGLサイト](http://wankoromochi.com/)を作った時は、描画も6体ぐらいが限界でした...。
（スマホブラウザだと1体消えたりする）
<img width="500" alt="スクリーンショット 2016-12-19 23.20.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/15028/fb73188b-adfe-d366-d041-feee4c0734b6.png">

そこで今回はインスタインシングを使ってみたらある程度FPSをキープしつつ、40体描画できました！
ただ、全てのモデルが同じ描画になってしまうので、用途が限られそうですが。

・AndroidのChromeで描画
![picture.png](https://qiita-image-store.s3.amazonaws.com/0/15028/63455586-0274-2b86-2f1c-5e6e78fbc64c.png)



今回は、Live2Dをオフスクリーンの描画し、それをPlaneのテクスチャとして使ってます。
そのため、単純にPlaneをインスタンシングしてみたという実装です。

# ソースコード
ソースは、githubにアップしました。
ただ、こちらのソースはPCのsafariでは動作しますが、chromeとfirefoxでは上手く描画できてないです
（chormeは何も描画されない、firefoxは一部のパーツだけ描画される。でもAndroidのChromeでは描画されるという）
今後、改善策を見つけたら修正しようと思います。

[github - Live2D_Instancing](https://github.com/naotaro0123/Live2D-Instancing)
IoTで生きてるだけダイエットを実現したい

 
この記事は[IoTLT Advent Calendar 2016](http://qiita.com/advent-calendar/2016/iotlt)18日目の記事です！
 
こんにちは、ちゃんとくです。
先日は[電気風呂の件](http://qiita.com/tokutoku393/items/690191db3f0adc3594ca)で少々お騒がせいたしました|ω-`)


今年のIoTLTでのLTをまとめてみたら結構登壇していました！（太字が登壇した回）
![スクリーンショット 2016-12-19 23.01.42.png](https://qiita-image-store.s3.amazonaws.com/0/119003/fcb29bdb-2085-817e-3424-c2caa929972b.png "スクリーンショット 2016-12-19 23.01.42.png")

毎度トンデモ電子工作を発表させてもらっておりますが、いつも温かく聞いていただいて圧倒的感謝・・・！

お風呂センサ、（Boccoもどきの）おかえりセンサ等々いろいろやらせていただいたのですが、これからIoTで実現したいことができました！

## 生きているだけでダイエットできる仕組みをつくる
**痩せたい。**
めちゃくちゃ太りました。痩せたいです。でも運動も食事制限も続かないので、勝手に続けられる仕組みを作ろうと思い立ちました。

![スクリーンショット 2016-12-19 23.30.44.png](https://qiita-image-store.s3.amazonaws.com/0/119003/6ad41138-522b-c6fc-9eba-4f3bab7d6490.png "スクリーンショット 2016-12-19 23.30.44.png")

* 食事制限をする
* 体重を記録する
* 運動する

この3つを続けられれば、自ずと痩せられるはず・・！
なので自動で記録＆サボると怒られる仕組みを作っていこうと思います！

### 運動を記録・監視・通知する
手はじめに運動したことを取得、記録、さらにサボると怒られる仕組みをつくってみました！
完成したものがこちらです。
![slack_for_ios_upload_720.jpg](https://qiita-image-store.s3.amazonaws.com/0/119003/f4b8e62b-738d-28a5-320d-dbe74503f759.jpeg "slack_for_ios_upload_720.jpg")

WioNode+ジャイロセンサ(+給電用のUSBモバイルバッテリー)で出来ています。（真剣にやってます）

Web側の実装はTwitter連携が簡単に実現できそうだったのでBluemixのNode-REDを使ってみました。
![スクリーンショット 2016-11-21 15.19.56.png](https://qiita-image-store.s3.amazonaws.com/0/119003/82aa3532-c9f5-de43-f6b8-05ffeef4f8e1.png "スクリーンショット 2016-11-21 15.19.56.png")
ノードをつないで簡単にセンサーとwebを連携できます。（画像はweb側の実装部分です）
センサーの値をそのままCloudantに投げ込み、24時間ごとに判定をしています。

## 課題
ジャイロセンサの値をとにかくDBに突っ込んでいるのですが、うまい計算方法がわからずとりあえず動いたらOKな実装になっています。。
そのためまだ実稼働できていません（´・ω・｀）しょぽん

最近忙しくて実装する時間が・・！と思っているのですがこれ実装するまでダイエット始められないのでは。

体重の記録と食事の記録の方のハックも全然進まない。
まあ忙しいから仕方ないよね。うん。

## まとめ
**痩せたい。**

春にはパーフェクトボゥディになっているはずですので、なにとぞ応援よろしくお願い致しますm(_ _)m
上流設計の不思議なところ

# 上流設計の不思議なところ
* 実験もしないでよくわかってないことまで決めようとする。詳細を無視して全体像を書こうとする。
* 抽象化 は あいまい にすること？上流工程では具体的な事象が見えてはいけない？

---
# 未知なものは経験するしか無いでしょ

* 経験が豊富で、ノウハウも豊富にたまっているのであれば、上流工程で整理するのがいい。ウォーターフォールプロセスが非常によく合う。
* 経験が不足しているなら、原理試作的に無理やり動かす、実験するしかない。
* 実験した結果を活かして、要求、仕様をブラッシュアップする。

実践からの学びはボトムアップ、帰納的だが、それを説明するにはトップダウンで演繹的に説明するほうが伝わりやすい。

---
# 抽象 = 木を見つつ森を見る
抽象 = 捨象。常識的な経験から類推可能な部分、普遍的な部分を削ぎ落とすこと。
あいまいにすることとは誰も言ってない!

* 基本設計には具体的な実装まで記載してはいけない?
 * 具体的な構造体名、モジュール名まで削ってしまったら、トレーサビリティが取れなくなる
 * なのに構造体名、モジュール名など具体的なエッセンスが不足した設計書が多い。
* もやもやとしたかたまりではなく、枝葉でもない。


---
# オブジェクト指向三大要素
オブジェクト指向というと、汎化、継承、ポリモーフィズムやデザインパターンとかに注目に行きがちだが、これらは使う場面を選ばないとマイナスに働くことも多い。

カプセル化が重要。

---
# おまけ UML 雑感
ロール名が変数名、インスタンスになる。多重度 配列の要素数になる。
よって双方向参照ではないなら両方にはいらない、記載しない方がいいのではないか。


アクティビティ図、責務をどこからどこまで実施するかがわかりやすいがトリガがわかりにくい。
シーケンス図、トリガはわかりやすいがトリガを受けて責務をどこからどこまで実施するかがわかりにくい。
擬似コード、箇条書き、文書で十分なことも多い。

---
# 分析と設計
分析とは、物事を細かく分解して、成分、要素、側面を明らかにすること。

分解する。細かな成分、要素を集める。
* 集めた要素を側面ごとにまとめる。→ モデル化。
* 関心事が似ている、近い、関連する度合いを距離感で表せる。KJ法に近い。
→ リファクタリング。クラスにまとめる。別クラスにする。ばらす。まとめなおす。
  クラス化する、メンバ変数化する。
【Java上達事例】Javaを2ヶ月で習得し、プログラマーに転職した体験談


※こちらの記事は、プロスタ編集部が現在大変人気の高いJavaの学習法を公開することで、皆様のお役に立ちたい意図で投稿しております。

参考サイト：[【Java上達事例⑦】Javaを2ヶ月で習得し、プログラマーに転職した体験談](http://programming-study.com/case/java-programmer/)

#【Java上達事例】営業だった私が２ヶ月でJavaを習得しSEに転職するまでの話

趣味でやっていたプログラミングを本格的に始め、プログラマーに転職した30代前半男性の体験談です。

##Linux環境で実行できるJavaを始める

当時、私は趣味の範囲でwindowsのアプリケーションばかりを開発していたのですが、せっかくなので本格的に使える言語を習得しようと思い立ちました。そこで、Linuxでも実行できる言語としてたどり着いたのがjavaでした。
結論から述べます。最終的に私はこれがきっかけでプログラマーに転職することができました。本当によかったと思っています。

##ドットインストールとJava Driveで勉強を開始

さて、私が習得するために活用した各サイトのおすすめポイントについて話します。

###ドットインストール

まず、私がjava言語の入門に当たって動画で学びたいと思っていたので、検索してまず初めにたどり着いたサイトが皆様お馴染みドットインストールでした。何よりの利点はわかりやすい解説と視覚的に学べる動画コンテンツで学べることです。こちらのサイトで基礎的な技術を習得することができました。有料会員になるとさらに充実したコンテンツや便利な機能を利用することができて、さらに、ほかの多種多様な言語に関する動画コンテンツが見放題なのです。有料会員になっても決して損ではないので、ぜひおすすめします。

###Java Drive

次に、文字ベースで学習したいという方にお勧めしたいサイトがJava Driveです。こちらのサイトは1つのページに分かりやすいようにたくさんの手順は書いていません。なので一気に何もかも詰め込むのが苦手な方は、1つの順序を完了するごとに次に進めていけるので非常に学習しやすいです。私がこのサイトをお勧めする理由はもう一つあります。それは非常に基礎的な内容・知識のほかに、とても発展的な詳しい内容まで幅広く分かりやすく解説されているので、高度な技術を要する内容まで学ぶことができるからです。
➡︎ [その他のオススメのJava学習サイトはこちら](http://programming-study.com/language/java-site/)

##0円と2か月で習得

私は先ほど紹介したサイトで学習をしました。かかった費用は0円ですし、期間は2か月で習得することができました。一度バグの原因が解らず挫折しかけたことがありました。そんな時にはYahoo!知恵袋で質問をし、解決することができました。あと、自分が習得した後の様子を大げさに(天才プログラマーになってgoogleにスカウトされたりとか(笑))妄想するとやる気が湧き出てきます。

##やる気があれば今からでも遅くはない

最後にこれからJavaを習得しようと考えておられる初心者の皆さんにお伝えします。javaはやる気さえあれば必ず習得できます。そして非常に需要のある言語なので、今からやってもどうせ…ではなく今からでも十分にスキルとして役立てることができます。実際に私もプログラマーになることができました。皆さんもこの機会に楽しいJavaの世界に飛び込んでみてはいかがでしょう？

【オススメ記事】
➡︎[【Java上達事例⑥】プログラミング学習は目標を具体化することが大事](http://programming-study.com/case/definite/)
➡︎[【Java上達事例⑧】営業だった私が２ヶ月でJavaを習得しSEに転職するまでの話](http://programming-study.com/case/java-se/)