OmniAICreator/Qiita-1.07M huggingface dataset:
QtRuby を使ってみました

#はじめに
今回で4回目の投稿となります、ynuma です。
近況を簡単に書かせていただきます。

私事で恐縮ですが、3月に待望の第一子が誕生しました！！
自分で言うのも何ですが、親バカが止まりません。
子供の為にも、より一層仕事も頑張りたいと思っています。

その仕事についてですが、相変わらず HW の開発が中心です。
SW については触れる機会が少なく、さらに家の手伝いやら会社のお仕事の関係で、勉強する時間が減ってきているので、正直なところ Qt のトレンドは把握できていません。
今回の記事の内容は少々古いかもしれませんが、ご了承ください。

本題になりますが、今回のテーマは QtRuby についてです。
このテーマを選んだ理由ですが、普段 HW の評価ツールを作成する際、オブジェクト指向言語の ruby
を使用することが多いので、ruby で GUI も表示させるために、Qt を使えるようにしたい、というのが個人的な目標です。
最近のスクリプト型言語のトレンドとしては、ruby より python でしょうが、個人的には日本生まれの ruby を応援しています。
QtRuby のユーザーは限られているかと思われますが、この記事が何かお役に立てればと思っています。

# QtRuby について
QtRuby は Qt framework を呼び出せるようにしたライブラリという認識です。
後述のパッケージ名を見ていただくとわかりますが、最近では qtbindings という言い方もされているかと思われます。
binding しているということは、インタフェースのみを提供しているものと思われます。
今回は時間がないので、QtRuby の実装を確認できませんでしたが、余力がある時確認してみる予定です。

# 実用例
ざっと、以下のものが見つかりました。

Kubeplayer:
KDE が開発した online video player のようです。これによく似た名前の TubePlayer とは異なります。 
![image.png](https://qiita-image-store.s3.amazonaws.com/0/62136/6c2f9cf7-74e0-1c89-b74b-4b55f0ff37ec.png)


Kaya:
KDE の board game suite. チェスと将棋があるらしいですが、しばらく更新されていないようです。
https://github.com/pcapriotti/kaya/wiki/Kaya

Yast2:
オペレーティングシステムの設定と構成管理のためのツールで、openSUSE等に採用されているそうです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/62136/672f84e2-e58e-d840-a1e1-4f89b960225f.png)

他にもご存知の方いらっしゃいましたらご教授いただければ幸いです。


# package
Windows では以前 qtruby4 というパッケージを install していたようですが、最近では qtbindings というパッケージに変わっているようです。
これは、元々 Mac OS や Linux 向けのパッケージだったようですが、共通化されたようです。
https://github.com/ryanmelt/qtbindings

また、Qt 5.4 以降では、ruby-qml というものを用いることにより、QML/Qt Quick を呼び出せるようになった模様です。
ただし、Qt 5.x では QtRuby(qtbindings) は使えないそうです。

# qtbindings 対応の Qt 最新環境
Qt4.8.6.4: Ruby2.4 用
Qt4.8.6.3: Ruby2.0～2.3 用


# 必要なツール
不要なものが含まれていそうで自信がないのですが、以下のツールを install しました。

Qt: 4.8.6.4
CMake: 3.6.x(個人的には 3.6.10-1 を使用)
OpenSSL 1.0.2 x64(Lightでないもの)
Ruby: 2.4.2(installed from rubyinstaller.org)
gcc: 4.x, 5.x, or 6.x
今回は Windows でセットアップしました。
gcc については、MSYS2 という linux と同じコマンドライン環境を整えるツールがあるので、これを install しました。
参考⇒https://qiita.com/spiegel-im-spiegel/items/ba4e8d2418bdfe0c8049

qtbindings: 4.8.6.4
ruby 2.4.2 のコマンドプロンプトから以下の通り install します。

$ gem update --system
$ gem install rake
$ gem install qtbindings

自動で 4.8.6.4 が install されます。

※ 何かお気づきの点がありましたら、フィードバックいただければ幸いです。


# サンプルコード
試しによくあるサンプルコードを動かしてみました。

```rb:mainwindow.rb
require 'Qt'

a = Qt::Application.new(ARGV)
hello = Qt::PushButton.new('Congratulation QtRuby!', nil)
hello.resize(800, 200)
hello.show()
a.exec()
```

# 実行結果

![image.png](https://qiita-image-store.s3.amazonaws.com/0/62136/b849854a-196f-c9cd-6d52-98a334abe1ac.png)

やっと実行できるようになりました。


# 終わりに
今回はサンプルを動かすところまでで時間切れとなりました。
次回は ruby と Qt という強力なコラボで、簡単なアプリケーションを作ってみようと思います。
Rails APIでcamelCase

# やりたいこと

Single Page Applicationの開発などでバックエンドAPIサーバとしてRailsを利用する場合、やり取りされる request と response における JSON の keys を camelCase にしつつ、 Rails の内部処理では伝統的な snake_case を使いたいですよね。
しかも、一括に全てのAPIではなく、一部のAPIだけ先に少しずつcamelCase対応にしいきたい場合もあるでしょう。

# RequestのkeysをcamelCaseからsnake_caseへ変換

ApplicationControllerにsnakeize_paramsメソッドを用意しておき、 サブクラスの Controllerのbefore_actionでparamsをcamelCaseからsnake_caseに変換したいactionsを指定しましょう。

## ActionController::Parameters#deep_snakeize

ActionController::Parametersに新しいメソッドdeep_snakeizeを追加。このメソッドでparamsのkeysを深いところまでcamelCaseからsnake_caseに変換できます。

```ruby
# File: config/initializers/params_snakeizer.rb
# Transform JSON request param keys from JSON-conventional camelCase to
# Rails-conventional snake_case
module ActionController
  # Modified from action_controller/metal/strong_parameters.rb
  class Parameters
    def deep_snakeize!
      @parameters.deep_transform_keys!(&:underscore)
      self
    end
  end
end
```

## ApplicationController#snakeize_params

ApplicationControllerにsnakeize_paramsメソッドを用意しておきます。

```ruby
# File: app/controllers/application_controller.rb
class ApplicationController < ActionController::API
  protected

    # Snakeize JSON API request params
    def snakeize_params
      params.deep_snakeize!
    end
end
```

## 一部のAPIへの適用

ApplicationControllerを継承するControllerで、before_action :snakeize_paramsを必要なアクションに対して指定することによって、そのアクションのparamsが自動的にcamelCaseからsnake_case に変換されます。
    
```ruby
class UsersController < ApplicationController
  before_action :snakeize_params, only: [:say_hello, :say_goodbye]
  # .....
end
```

上記では、アクションsay_helloとsay_goodbyeが対象に指定されていますね。

## 全てのAPIへの適用

ApplicationControllerのbefore_actionに指定してしまえば、全てのアクションが適用対象になります。

```ruby
# File: app/controllers/application_controller.rb
class ApplicationController < ActionController::API
  before_action :snakeize_params

  protected

    # Snakeize JSON API request params
    def snakeize_params
      params.deep_snakeize!
    end
end
```

# Responseのkeysをsnake_caseからcamelCaseへ変換

Jbuilderの利用を仮定します。

## 一部のAPIへの適用

適用したいAPIのjbuilderファイルの先頭に次の行を記入しましょう。

```ruby
json.key_format! camelize: :lower
```

## 全てのAPIへの適用

config/environment.rb次の設定を入れたら、全てのresponseのJSON keysはsnake_caseからcamelCase に変換されます。

```ruby
Jbuilder.key_format camelize: :lower
```

# サンプル

実際に動くサンプル[rails-json-api](https://github.com/vochicong/rails-json-api)をお試しください。

# 参考

- [ActionController::Parameters#transform_keys(&block)](https://github.com/rails/rails/blob/master/actionpack/lib/action_controller/metal/strong_parameters.rb#L661)
- [Rails Hash#deep_transform_keys](http://api.rubyonrails.org/classes/Hash.html#method-i-deep_transform_keys-21)
- [Jbuilder](https://github.com/rails/jbuilder)
- [Stack Overflow: What is the best way to convert all controller params from camelCase to snake_case in Rails?](https://stackoverflow.com/a/47927464/1374973)
- [JSON keyに対するcamelCaseとsnake_caseの変換](https://github.com/vochicong/ruby-tips/blob/master/notebooks/json_camel_snake_case.ipynb)
SharedPreferenceのKeyにはEnum#name()を使ってほしい

注：志半ばで力尽きています

## SharedPreferenceっていいよね！
標準APIのSharedPreference、いいですよね！
アプリの規模にもよりますが「DBとかめんどくさいんじゃ！！！！！！！！」みたいなときはたいへん頼りになります。
プリミティブ型は抑えてるのでちょっとしたフラグ類はバシバシ保存できます。
アプリをアップデートしてもへっちゃらです。
xmlで保存されているので簡単に中身を見ることもできます。やったね！

## きびしい現実
ここにSharedPreferenceで設定を管理しているアプリがあります。キーの数は100を超えています。
定数クラスに書かれてたりActivityに定数にされてたり直書きされてたり、キーはいろんなところに散らばっています。

```java
sharedPreference.getAll.toString()
```

とかなんとかやってSharedPreferenceの中を覗いたあなたはそっ閉じします。
これからあなたはひとつひとつキーをgrepして、拾い集めて、キーと値の意味を解読しなければならないのです。つらい。

#### 私が見たきびしい現実一覧
- うっかりどこにあるかすらわからない既存のキーを上書き
- 動的にキーを生成していて欲しい値の取り出し方がわからない
- 同じ値を別のキーで三度も保存している
- SharedPrefUtilクラスが各画面ごとにある(そして同じSharedPreferenceに保存している)
- キー名をtypoした結果いつ見てもデフォルト値しか入ってない

## 原因
SharedPreferenceによって引き起こされる問題の大半はキーの管理が原因だと思います。
定数クラスとしてまとめても、複数人が編集する場合、うっかり既存と同じキーを定義してしまうこともありえます。
そのキーに対する値の型を確認するためにいちいち使っている箇所を見に行かないといけないのもつらいです。

##というわけで
記事のタイトル通り。`Enum.name()`を使ってほしいです。

###### 散らばらない
キーはすべて同じenumクラスに定義されています。定義済みのキーがどれなのか一目でわかります。
######  キーが決して重複しない
定義名が被ってるとそもそもコンパイルが通らないので安心です。
###### キーを分割管理しても安心
キーのまとまり毎にenumクラスを作ればキーが混ざってめちゃくちゃになることもありません。



ちなみに`Enum.toString()`ではなく`Enum.name()`なのは`@Override`できないからです。
親切な誰かがtoStringをオーバーライドして中身を説明してくれることは十分に考えられます。

##作ってみた
個人的にこうしたらいいんじゃないかな！　というSharedPreference向けenumは以下の通り。

```java:FoodPref.java
import android.content.Context;
import android.content.SharedPreferences;

enum FoodPref {
    // たこ
    TAKO(100),
    // ねこ
    NEKO(200),
    // そこ
    SOKO(300);

    // デフォルト値.
    public final Object DEF;

    FoodPref(Object def) {
        this.DEF = def;
    }

    // このenum専用のSharedPreference
    public static SharedPreferences getThisPreference(final Context context) {
        return context.getSharedPreferences(FoodPref.class.getSimpleName(), Context.MODE_PRIVATE);
    }
}
```

```java:つかいかた
        // 作成して
        SharedPreferences foodSp = FoodPref.getThisPreference(context);
        // 出したり
        int cat = foodSp.getInt(FoodPref.NEKO.name(), (Integer) FoodPref.NEKO.DEF);
        // 入れたり
        foodSp.edit().putInt(FoodPref.SOKO.name(), 666).apply();


        // いろいろ増えても
        SharedPreferences toySp = ToyPref.getThisPreference(context);
        // 別に保存されてるので
        SharedPreferences carSp = CarPref.getThisPreference(context);
        // 値が混ざる危険性がない
        SharedPreferences bookSp = BookPref.getThisPreference(context);
```

## 残りの課題
+ デフォルト値がObject
「そのキーにはどの型が対応しているか確実にわかる」
「取得時のデフォルト値に迷わない」
というメリットを鑑みるとキーにデフォルト値を設定する、という方向性は間違っていないと思うのだが、
呼び出し元でキャストが必要になるのは許しがたい。nullをデフォルト値にもできない。
値の型でSharedPreferenceをまとめれば一応返り値を固定できるが、できれば意味合いのグループとしてenumでキーをまとめたい。
Kotlinで試したけどObjectがAnyになっただけだった。熟達していればなにかしら方法があるのか？

+ それでも俺はキーをStringで直入れするぜ！
定義したenumのみを引数に取るラッパークラスを作ったほうがいいかもしれない。

+ 既存プロジェクトから値引き継ぎたい
がんばるしかない

## 結論
もっとうまいことして誰かどうにかしてくれたらうれしいな！
IchigoJamで文字の書き換え

IchigoJamで文字データの書き換えを試してみました。

■内容
Aの文字コード(65)を0と1で表示
236の文字コードで表示されるキャラクター(猫)を0と1で表示
236の文字コードのデータをAの文字データで書き換え
236の文字コードで表示されるキャラクター(A)を0と1で表示

PEEKで各行のデータを読み出しています。
なお、BIN$は桁数を指定しないと頭の部分がゼロの場合桁が欠けてしまうので注意が必要です。
POKEで各行のデータを書き込んでいます。
CLPで書き込んだ文字データをリセットしています。

■コード
10 FOR I=0 TO 7:?BIN$(PEEK(65*8+I),8):WAIT30:NEXT
15 ?
20 FOR I=0 TO 7:?BIN$(PEEK(236*8+I),8):WAIT30:NEXT
25 ?
30 FOR I=0 TO 7:POKE(236*8+I),PEEK(65*8+I):NEXT
40 FOR I=0 TO 7:?BIN$(PEEK(236*8+I),8):WAIT30:NEXT
50 CLP

■プログラムの実行(Chrome/FireFoxで開いてください)
http://fukuno.jig.jp/app/IchigoJam/#10%20FOR%20I%3D0%20TO%207%3A%3FBIN%24(PEEK(65*8%2BI)%2C8)%3AWAIT30%3ANEXT%0A15%20%3F%0A20%20FOR%20I%3D0%20TO%207%3A%3FBIN%24(PEEK(236*8%2BI)%2C8)%3AWAIT30%3ANEXT%0A25%20%3F%0A30%20FOR%20I%3D0%20TO%207%3APOKE(236*8%2BI)%2CPEEK(65*8%2BI)%3ANEXT%0A40%20FOR%20I%3D0%20TO%207%3A%3FBIN%24(PEEK(236*8%2BI)%2C8)%3AWAIT30%3ANEXT%0A50%20CLP%0A
※リンク先を開いた後　run [Enter]で実行されます。

■スクリーンショット
![image.png](https://qiita-image-store.s3.amazonaws.com/0/71746/d660c4e0-29c6-5826-8257-2025655e0e8c.png)
Verilogでコード整形


# はじめに
Verilogのコード整形ソフトを公開しているのを見つけたのでやってみました。

## 導入
導入方法は**GitHub**から**clone**して**make**する方法か、実行ファイルを落としてそのまま使用する方法があります。どちらの方法もパスを通して使えるようにします。
**GitHub**
https://github.com/thomasrussellmurphy/istyle-verilog-formatter
**実行ファイル**
https://code.google.com/archive/p/istyle-verilog-formatter/

## オプション
オプションを数パターン試したものを以下に記載します。
**入力テキスト**

```verilog
reg [3:0] cnt;
always @(posedge clk or posedge rst) begin
if(rst) begin
cnt<=4'h0;
end else begin
cnt<=cnt+4'h1;
end
end
```
### **--style**

**ANSI style**

```
./iStyle --style=ansi test.v
```

```verilog
reg [3:0] cnt;
always @(posedge clk or posedge rst)
begin
    if(rst)
    begin
        cnt<=4'h0;
    end
    else
    begin
        cnt<=cnt+4'h1;
    end
end
```

**Kernighan&Ritchie style**

```
./iStyle --style=kr test.v
```
```verilog
reg [3:0] cnt;
always @(posedge clk or posedge rst) begin
    if(rst) begin
        cnt<=4'h0;
    end
    else begin
        cnt<=cnt+4'h1;
    end
end
```

**GNU style**

```
./iStyle --style=gnu test.v
```
```verilog
reg [3:0] cnt;
always @(posedge clk or posedge rst)
  begin
    if(rst)
      begin
        cnt<=4'h0;
      end
    else
      begin
        cnt<=cnt+4'h1;
      end
  end
```

### **-s**

```
./iStyle -s2 test.v
```
スペース挿入オプションで**-s2**で各インデントをスペース2で指定する(**-s4**ならスペース4)

```verilog
reg [3:0] cnt;
always @(posedge clk or posedge rst) begin
  if(rst) begin
    cnt<=4'h0;
  end else begin
    cnt<=cnt+4'h1;
  end
end
```
### **-p**
オペレータの周りだけにスペースパディングを挿入する。

```verilog
reg [3: 0] cnt;
always @(posedge clk or posedge rst) begin
    if (rst)
    begin
        cnt <= 4'h0;
    end else
    begin
        cnt <= cnt + 4'h1;
    end
end
```
### **-P**
オペレータと括弧の周囲にスペースパディングを挿入する。

```verilog
reg [ 3: 0 ] cnt;
always @( posedge clk or posedge rst ) begin
    if ( rst )
    begin
        cnt <= 4'h0;
    end else
    begin
        cnt <= cnt + 4'h1;
    end
end
```

# おわりに
ここには載せてはいませんが、**module宣言**のインデントがいい感じになりませんでした。**Verilog**は色々な書き方が出来るので何か強力な**formatter**があると便利かもしれません。
シングルログアウトっていうのがあってだね

# はじめに
この記事は、Salesforce Platform Advent Calendar 2017の20日目の記事です。

### シングルログアウトがついに、Winter'18でGAになりました!!

[Let Users Log Out of All Apps at Once with Single Logout (Generally Available)](https://releasenotes.docs.salesforce.com/en-us/winter18/release-notes/rn_security_auth_slo.htm)

# シングルログアウトってなによ
主にエンタープライズIT向けのシングルサインオンで出てくる言葉です。　
シングルサインオンしたなら、ログアウトも1回の操作でやりたいよね。という一見簡単そうに見えて非常に奥の深い話です。

### 何も考えないと以下のようになります。

メイン側でログインして、サブ側へ移動しました。（SSOによりログイン処理はユーザーからは隠蔽）
サブ側でログアウトしたあと、またサブ側にアクセスするとログアウトできてない！（実際はログアウト→ログインをしている）

このアプリはログアウトできない、不具合だ！　セキュリティの不具合か？　危険だ！　となるわけです。

# 工夫で実現
メイン側のセッションを短くしておいて、サブ側で操作している間にメイン側のセッションは切れるためだいたいにおいてサブ側をログアウトすればログアウト状態になる。でも万能じゃないわけです。

# プログラムで実装する
サブ側でのログアウト処理後にメイン側のログアウト処理にリダイレクトすることで実現できます。　が・・・

Salesforce にはログアウトボタンがありますので、これを使うわけですよねってログアウトするだけのためにログアウトボタンを自作しないといけないじゃないか・・・　となり非常にめんどくさかったわけです。

が、これで解決です。

痒い所に手が届く機能追加本当にありがたいことですね。

*「えー、ただしこの機能がほしかったのは4年前であり非常に長いこと待ちましたがまたSSOを使うときに使おうと思います」*
OpenFOAM　チュートリルケースの実行方法

# はじめに
今更ではあるが、OpenFOAMのチュートリアルケースの実行方法をまとめてみる。

#　OpenFOAMのチュートリルケースについて
4日目の記事に書いた$FOAM_TUTORIALSに格納されているフォルダにある。基本的には計算の分野、ソルバ、個別の問題の順に階層分けされている。

チュートリアルケースについては有志がドキュメントを作成しているプロジェクトがあるのでそちらも参考になる。

https://sites.google.com/site/freshtamanegi/home

ユーザーマニュアルやESI版のサイトにもいくつか紹介がある。

https://www.openfoam.com/documentation/tutorial-guide/

# チュートリアルケースのコピー
カレントディレクトリで、以下のように実行する。

```
cp -r $FOAM_TUTORIALS/incompressible/icoFoam/cavity ./
```
この場合はcavityケースをコピーしている。

# チュートリアルケースの実行
大抵のフォルダにはAllrunファイルがある。これはOpenFOAMのコマンドを実行する処理の順番に並べたものである。
Allrunは以下のようにして実行する。

```
./Allrun
```

cavityケースのAllrunの中身は次のとおりである。

また、Allcleanを実行するとフォルダの中身をAllrun実行前に戻してくれる。

```
./Allclean
```

なお、pitzDailyなどAllrunがないケースもあるが、その場合はsystem下のdictファイルを見て実行するユーティリティを推定する。

そういえばpitzDailyのblockMeshDictがv5.0でmultiGrading使用に代わってしまったらしい。多数ブロックの写経ネタはもう使えないのか……

# まとめ
最近はHelyxOSとかがあるのでGUIからOpenFOAMの世界に入る日とも増えてきたが、細かいユーティリティの使い方や境界の設定などはチュートリアルケースを見なければわからないこともある。

チュートリアルケースはやっぱりOpenFOAMの基本である。
Kerasのモデルを保存する方法

Kerasのモデルを保存するとき、pickleを使うと以下のエラーが出ました。

```
TypeError: can't pickle _thread.lock objects
```

どうやらKerasのモデルを保存するのにpickleやcPickleを使うのは非推奨らしいです。
他にもおなじことをやろうとしていた人が世界中にいたみたい。=>[参照](https://github.com/tensorflow/tensorflow/issues/11157)


さっそく結論ですが、
[ここ](https://keras.io/getting-started/faq/#how-can-i-save-a-keras-model)にあるように、保存・読み込み時はkerasに備え付けのsave,load_modelを使うと良いらしい。

ただh5pyというパッケージがないとsaveするときに怒られるので、saveする前に

```
pip install h5py
```

するとよいです。

保存・読み込みはこんな感じ。

```
from keras.models import load_model

model.save('/path/to/model.h5')
del model
model = load_model('/path/to/model.h5')
```

短いですが終ります！
2017年12月版 ＲＯＳで使える機器


ROSを初めてまだ半年というビギナーです。

ROSを始める際に悩むことの１つは操作ターゲットかと思います。

そこで今回は、現状、日本で、個人で普通に購入できるものをピックアップしてみようと思います。
他にもあるかと思いますので、おすすめのものがあれば是非教えていただければと思います。

##シングルボードコンピュータ(Raspberry piとか)ベース
* [Raspberry Pi Mouse V2](https://www.rt-shop.jp/index.php?main_page=product_info&cPath=1348_1&products_id=3418)
* [Turtlebot3 Burger](https://www.rt-shop.jp/index.php?main_page=product_info&cPath=1001_1021&products_id=3587)
* [roomba](https://www.irobot-jp.com/)
 * Roomba Open Interfaceを使うため、WiFiモデルはNG
 * [ルンバをRaspberry Piを使ってROSでコントロールできるように改造してみた（半田付け無しでOK）](http://karaage.hatenadiary.jp/entry/2017/05/12/073000)
 * [Dragonboardでルンバを操作する](https://qiita.com/lutecia16v/items/af6fef616d25eeda495d)

##マイコンベース
* [GR SAKURA II](http://gadget.renesas.com/ja/product/sakura.html)
 * [256KB SRAMのGR-SAKURA IIでROS2を動かす（がじぇっとるねさすコミュニティ）](https://japan.renesasrulz.com/gr_user_forum_japanese/f/gr-sakura/4636/256kb-sram-gr-sakura-ii-ros2)
 * [GitHub](https://github.com/godzilla-max/freertps)
* [GR Peach](http://gadget.renesas.com/ja/product/peach.html)
 * [GR-PEACH で TOPPERS/ASP(RTOS)を動かす](https://qiita.com/exshonda/items/3742799cbc648e0505f7)
 * [GitHub](https://github.com/ncesnagoya/asp-gr_peach_gcc-mbed)

## その他
* [uArm Swift](http://www.ufactory.cc/#/en/uarmswift)
 * [GitHub](https://github.com/uArm-Developer/UArmForROS) 
* [Pepper](https://www.softbank.jp/robot/consumer/)
 * [PepperがROSに正式対応！](https://www.softbank.jp/robot/news/developer/20150615a/) 

## ドローン
* [AR Drone](https://www.parrot.com/jp/doron/parrot-ardrone-20-elite-edition)
 * [GitHub](https://github.com/AutonomyLab/ardrone_autonomy) 

## カメラ
* [Intel RealSense](https://www.intel.co.jp/content/www/jp/ja/architecture-and-technology/realsense-overview.html)
 * [realsense_camera](http://wiki.ros.org/realsense_camera) 
* [Structure Sensor](https://store.structure.io/store)
 * [GitHub](https://github.com/fangchangma/openni2_ros_wrapper) 
* [Xtion 2](http://kakaku.com/item/K0000991099/)
 * [openni2_launch](http://wiki.ros.org/openni2_launch)で動くようだけど、[こちらの対処](https://answers.ros.org/question/269961/openni2_launch-asus-xtion-2-no-devices-connected/)が必要？

## センサー
* [Leap Motion](https://www.leapmotion.com/)
 * [leap_motion](http://wiki.ros.org/leap_motion) 

来年はガッツリ、ROSを触りたいと思います。
WordpressにInstagram APIでギャラリー表示をしてみよう

株式会社オズビジョンの事業推進部 採用広報の @masayofff です。

[前回](https://qiita.com/masayofff/items/4a23ce18bf5e8b7e39f1)に引き続き、Wordpress×SNS関連で
2回目のアドベントカレンダー投稿です。

オズビジョンの[コーポレートサイト](http://www.oz-vision.co.jp/)が更新頻度が落ちてて悲しいので、
Instagramの写真を表示できるようにAPI連携して、
手軽に更新してる感出したいな～と思って、やってみることにしました。

## やりたいこと
・WordpressサイトのトップページにInstagramの画像を並べて表示したい
・既成のプラグインを使わないで実装したい

### Wordpressサイト
http://www.oz-vision.co.jp/
今回はオズビジョンのコーポレートサイトです

### Instagramアカウント
https://www.instagram.com/ozvision_inc/
急遽つくったアカウントです。
※12/21現在、編集中のため、限定公開となっています。

## 設定方法
・開発者アカウント設定をする
・アプリを認証してアクセストークンを取得する
・APIを使いデータを取得
・Wordpress側で表示の設定をする

### 開発者アカウント設定

Instagramのディベロッパーページへ行きます。
https://www.instagram.com/developer/

上部のメニューからManage Clientsを押し、設定します。

![qiita01.png](https://qiita-image-store.s3.amazonaws.com/0/221980/04737766-eb7a-c3c6-6834-59189cbdf324.png)

画面を進め、「Register new Client ID」で設定します。

![qiita03.png](https://qiita-image-store.s3.amazonaws.com/0/221980/95828623-ce6d-e144-10ed-323b77ef5025.png)

もろもろ設定をして、Sandbox Modeでのアプリ登録が完了！

CLIENT IDが発行されました。

![qiita02.png](https://qiita-image-store.s3.amazonaws.com/0/221980/43f0e157-f0a3-34b1-6ca3-ebf20e97c9fb.png)


### ACCESS TOKENを入手する

発行されたCLIENT IDとリダイレクトURLを下記に突っ込んでブラウザをたたきます！

```https://api.instagram.com/oauth/authorize/?client_id=【発行されたCLIENT IDほげほげ】&redirect_uri=【リダイレクトURL】&response_type=token```


![qiita04.png](https://qiita-image-store.s3.amazonaws.com/0/221980/43471b8c-fa23-45a0-5c69-7ebce264f20b.png)

『Authorize』をクリックすると、リダイレクトURLに飛びます。
URL末尾に『#access_token=ほげほげ』がついてたらOKです。

『ACCESS TOKEN』を入手できました。
このあとはこれを使うので、メモっておきます。


### 次回へ続く

長くなったので、下記の手順は別記事でまとめます。

・APIを使いデータを取得
・Wordpress側で表示の設定をする

オズビジョンのコーポレートサイトに
Instagramの写真を表示させることができたらゴールです！


## 参考にさせていただいた記事
https://hp-renew.jp/blog/custom-begin-99302629/

https://capotast.co.jp/article/detail/21/

https://www.tipdip.jp/tips_posts/production/1928/

## まとめ
SNS関連で開発者ツールとか、APIとか、非エンジニアの身では、正直難しそう～って思っちゃうんですが、意外とやってみるとカンタン。

ここまでは設定作業なので、
ここからどうやって既存のWordpressサイト上で表示させるかのほうが大事だったりします。

JSONデータをPHPで出力してCSSで調整とか、できるのでしょうか…。

やってやれないことはない！の精神で、引き続きチャレンジしてゆきます。


明日は、@kikimako さんの
『alexaに独自のskillを身につけさせたい！』です。

alexaってあのAmazon Echoの中のレディのことでしょうか？
楽しみですね♪
RubyMineのドキュメンテーション機能が素晴らしい件

RubyMineに限らずJetBrain製品はドキュメンテーション機能が優れています。

# 前提
* RubyMine 2017.3
* MacOS version 10.13.2 ( High Sierra )
* Keymap: Mac OSX 10.5+

# Quick Documentation
ドキュメント表示したいメソッドにカーソルを合わせ、`F1`

<img width="500" alt="rails_docker____repos_rails_docker__-_____app_controllers_users_controller_rb__rails_docker_.png" src="https://qiita-image-store.s3.amazonaws.com/0/14929/d03dd90a-e3cd-fb6b-f706-4355f86cafe4.png">

## ドキュメントを開いたまま作業したい時
Quick Documentationを開き、

<img width="489" alt="rails_docker____repos_rails_docker__-_____app_controllers_users_controller_rb__rails_docker_.png" src="https://qiita-image-store.s3.amazonaws.com/0/14929/5ee954f0-cee3-5e09-bb00-5ffadc422cf4.png">

## 現在選択しているメソッドのドキュメントに自動的に切り替える
これが便利！

<img width="300" alt="Fullscreen_2017_12_21_23_04.png" src="https://qiita-image-store.s3.amazonaws.com/0/14929/865d703c-b9c6-3645-981f-b27dc01c65e9.png">


# External Documentation
ドキュメント表示したいメソッドにカーソルを合わせ、`shift + F1`

<img width="500" alt="Module__ActionController__MimeResponds_—_Documentation_for_actionpack__5_1_4__and_Authy.png" src="https://qiita-image-store.s3.amazonaws.com/0/14929/286f5865-002c-5c4b-efe0-52e53023d53f.png">
Heroku Postgres に限界はあるのか？！

# はじめに
この記事は、Heroku に関するアドベントカレンダー 2017 の21日目になります。

# Herokuで本番運用の実績
さて、昨日に引き続きではないのですが・・・インスパイアを受けHeroku で本番運用ってどうなのよというお話をします。
とある、私が関わったシステムではHerokuでマルチテナント型の企業向けSaasサービスを5年ほど運用しています。
5年もやっていれば、さすがにHeroku起因の障害があると思いきや、ほとんど経験はありませんでした。

Add-onではまあまあ、あります。 SendGrid とかあとは、SendGrid とか SendGrid　とか・・・

様々な経験があるのですが、今回は「Heroku Postgres」にフォーカスしたいと思います。

# Heroku Postgres の使い方
わたしのところでは、各テーブルに tenant_id　カラムを準備してテナント毎のデータを管理しています。
5年運用していると一番データ量の多いテーブルだと数千万行のテーブルなどもありますが、OLTPにおいては
Heroku Postgres に課金しまくることで時間のかかるアーキテクチャの変更などはせずに運用できています。

数千万行に耐えうるということは、ほとんどの場合においてHeroku と Heroku PostgresでWEBアプリケーションは
完結するということになります。ただし・・・　「OLTP」においてはです。

# OLAPに限界がある
WEBからの入力を処理する分には、十分なパフォーマンスをだしてくれるものの、B2Bサービスのためまあまあ一括処理があります。CSVによる一括登録やメール送信、集計処理やレポーティングなどです。

Paasを利用した、マルチテナント型のSaasにおいてOLAPはまことにやっかいな問題です。特に、

- Herokuさんは我慢強くない(30秒ルール)
- Herokuさんは飽きっぽい（24時間に1回再起動）
- Herokuさんは懐が深くない(Dynoのメモリが×2で1G)

ため、自分でどうにかする必要があります。

# ソリューションとしては3つ
Heroku 推奨のものと、私たちが考えているものを２つ

### プログラムでなんとかする(Heroku 推奨)
アーキテクチャを見直したり、Octopus,switch_pointなどDB分割系のGemを利用もしくは自作して、Heroku Postgres のfollower 等の機能を利用しDB負荷を分散する。

### pgpool-2を利用する
これがわたしが考える最強の・・・、ではないのですがデータベースの移行を行わず、プログラムの変更を行わずにRead処理を並行に速度向上させることができます。

### Citus Cloudを利用する
基本的に、tenant_id　を超えてデータを読み出すことは無いためCitus Data を利用することで快適なクエリとなるはずです。
それに、なんと Heroku の　add-onです。


# 各ソリューションのメリット・デメリット

| ソリューション       |    メリット    |    デメリット    |
|:-----------------|:------------------|:------------------|
| プログラムでなんとかする|              サーバーコストが安い |        エンジニアリソースがかかる        |
| pgpool-2を利用する|サーバーコストが比較的安い             | pgpool-2サーバーの運用が必要             |
| Citus Cloudを利用する |              コスト高い、実績が少ない |        早い、楽ちん        |

# まとめ
大規模なHeroku アプリケーションのOLAP処理で速度をだすための方法をいくつか考えたわけですが、Heroku Postgresに限界はあるのか？　の答えは、普通のRDBと一緒ですよということです。マルチテナントなアプリケーションでなければ、Citus のメリットは活かせないですし、読み込み処理ではなく書き込みが多いアプリケーションであれば、上記で考えたような解決策は難しいのです。Heroku を選択したがために何か失敗するわけではないです。　

ここで、私の好きな記事と言葉を紹介します。

[言語をめぐる論争](http://local.joelonsoftware.com/wiki/%E8%A8%80%E8%AA%9E%E3%82%92%E3%82%81%E3%81%90%E3%82%8B%E8%AB%96%E4%BA%89)

「C#、Java、PHP、Pythonの中のどれを選んだらいいのだろう? 本当にある違いというのは、**あなたが**より良く知っているのがどれかということだ。Javaでいくつもの大きなシステム構築に成功しているJavaのグルがあなたのチームにいるのなら、C#よりもJavaで成功する可能性がずっと高いが、それはJavaがより優れた言語だからではなく(Javaの方が劣るが、その違いは問題になるほど大きなものではない)、彼がより詳しいからなのだ。」 by Joel Spolsky


*「Heroku のことをよく知ってい人と一緒にやるならHerokuを使えばいいし、AWSのプロがいるならAWSを使えばいい、それだけだ」by niseiss*

#番外編 Amazon Aurora with PostgreSQL Compatibilityに移行する
Auroraは、read replica を最大15まで増やすことができますし、IOに課金することで速度を増加させることができます。もはやHerokuでは無いですが・・・
イーサリアムのスマートコントラクト、ビットコインのような複数署名できる？

ビットコインは複数の人によって署名することで、全員または 2/3 以上同意しないと送金できないような仕組みを作れる。
では、イーサリアムのスマートコントラクトは同じことを実現できるかをやってみる

## コード

```javascript
pragma solidity ^0.4.17;

contract MultiVoteTransfer {
  address[] voterAddresses;
  mapping(address => bool) votes;
  bool public transfered;

  modifier onlyVoter() {
    bool isVoter = false;

    for (uint i = 0; i < voterAddresses.length; i++) {
      if (voterAddresses[i] == msg.sender) {
        isVoter = true;
      }
    }

    require(isVoter);
    _;
  }

  function MultiVoteTransfer(address[] _voterAddresses) public {
    voterAddresses = _voterAddresses;
    transfered = false;
  }
  
  function sign() public onlyVoter returns (bool) {
    votes[msg.sender] = true;

    bool allVoted = true;

    for (uint i = 0; i < voterAddresses.length; i++) {
      if (votes[voterAddresses[i]] == false) {
        allVoted = false;
      }
    }

    if (allVoted == true) {
        // 送金処理とか
        transfered = true;
    }
  }
}
```

## 実行してみる
- Ganache を起動して、`https://ethereum.github.io/browser-solidity` を `127.0.0.1:7454`接続しておく
- コントラクトの初期化関数に `["0x2932b7a2355d6fecc4b5c0b6bd44cc31df247a2e", "0x2191ef87e392377ec08e7c08eb105ef5448eced5"], "0x0f4f2ac550a1b4e2280d04c21cea7ebd822934b5"` ２つの投票者のアドレスを渡して、`Create`クリックしてデプロイする
- デプロイできたコントラクトに対して、`transfered`を確認してみる　⇒　`false`でした
- 上記渡した２つの投票者アドレス選択して、`sign`を呼び出すと、正常に投票できる
- 上記渡した２つの投票者以外のアドレス選択して、`sign`を呼び出すと、`transact to MultiVoteTransfer.sign errored: VM Exception while processing transaction: revert `エラーになって、投票できない
- 投票者全員投票したら、`transfered`を再度確認してみると、`true`になった

## まとめ
- ビットコインの場合は、このようなスマートコントラクトが書けないので、システム上の仕組み（署名など）を使わないと行けない
- イーサリアムの場合は、スマートコントラクトでできることが大分増えたので、気軽にでできる
- セキュリティ面でも、画面上で`sign`をクリックし関数を呼び出す場合は、中身は、`選択されているアカウントでトランザクションを作成し署名してからネットワークに送信する`という流れなので、別にビットコインの複数投票者署名するのと比べても負けないと思います。
Pythonでplistバイナリを出力

# 概要

- AWS LambdaでJSONファイルを出力し、それをiOSのアプリケーションで読み込ませた
- iPadが古い（初代iPad Air）のと、諸々の事情で25万レコードを1ファイルに持つ必要があり、JSONだとパースのときに死ぬ
- plistのバイナリにしたらパース不要で負荷も低減:v:

||JSON|plistバイナリ|
|-----|-----|-----|
|ファイルサイズ|12MB|7MB|
|メモリ使用量|112MB|45MB|

※ファイルサイズはその後の調整でJSONでもそれほど変わらなくなったので、サイズに関してはあまり期待しないほうがよいかも

#Pythonでplistバイナリを出力する

[plistlib](https://docs.python.jp/3/library/plistlib.html#plistlib.FMT_BINARY)を使います。

```python:
plistlib.dump(value, fp, *, fmt=FMT_BINARY, sort_keys=True, skipkeys=False)
```

```python:例
import plistlib

:

def save_to_plist(data):
    data_set = []
    for record in data:
        data_set.append(
            (
                record['code'],
                record['name']
            )
        )
    save_path = "/tmp/article.plist"
    with open(save_path, "wb") as fp:
        plistlib.dump(data_set, fp, fmt=plistlib.FMT_BINARY, sort_keys=True, skipkeys=False)
    return save_path
```

これだけです。簡単ですね
そろそろ2017年が終わるので、今年特にお世話になったC++の標準ライブラリを並べてみる

今年も仕事でC++をたくさん書いたので、今年特にお世話になったC++のライブラリを並べてみます。

※ライブラリ・クラス・関数等へのリンク先は、[cpprefjp C++日本語リファレンス](https://cpprefjp.github.io/)です。

# こんな標準ライブラリにお世話になった

## [\<vector\>](https://cpprefjp.github.io/reference/vector.html), [\<deque\>](https://cpprefjp.github.io/reference/deque.html), [\<algorithm\>](https://cpprefjp.github.io/reference/algorithm.html), [\<unordered_set\>](https://cpprefjp.github.io/reference/unordered_set.html), [\<unordered_map\>](https://cpprefjp.github.io/reference/unordered_map.html)

このあたりは今年に限った話ではないですが、アルゴリズムを組むことをやっているとよく使うところですね。パフォーマンスも考慮して作られているライブラリなので、（使い方を間違えなければ）速度の求められる実装であっても普通に使えます。
もっとも、行列（数学の）くらい必要となればライブラリに頼るわけですが。私は[Eigen](http://eigen.tuxfamily.org/)をよく使ってます。
昨年は\<set\>や\<map\>も割と使っていたが、今年はかなり限られた回数しか使わなかった記憶。もう今となっては「C++11で標準化されているなら無条件に利用する」くらいの気持ちです。~~そうは言っても、先日はgcc4.4の環境を利用するという機会があった~~
\<algorithm\>では主に[std::all\_of](https://cpprefjp.github.io/reference/algorithm/all_of.html)とか[std::find\_if](https://cpprefjp.github.io/reference/algorithm/find_if.html)とかを活用した。std::all\_ofがC++11で規格化されて、多くの環境で普通に使えるようになったのはありがたかったです。

## [\<utility\>](https://cpprefjp.github.io/reference/utility.html)

今年は割と[std::move](https://cpprefjp.github.io/reference/utility/move.html)を使った気がする。「配列等の内容を書き換える必要があるのだが、in-placeにできるわけではない」という処理で主に利用した。
[std::pair](https://cpprefjp.github.io/reference/utility/pair.html)も結構使ったけど、標準ライブラリでstd::pairが指定されている場面以外では極力使わない方針にしつつある（2個の値を組にしたい場合であっても構造体を定義するとか）。first/secondが何を指しているかわからなくなってくるんですよね…。

## [\<random\>](https://cpprefjp.github.io/reference/random.html)

昨年はそうでもなかったのだが、今年は乱数を用いるプログラムをよく書いたので、かなり使っていた。乱数生成器として[mt19937_64](https://cpprefjp.github.io/reference/random/mersenne_twister_engine.html)、乱数の分布として一様分布の[uniform\_int\_distribution](https://cpprefjp.github.io/reference/random/uniform_int_distribution.html)・[uniform\_real\_distribution](https://cpprefjp.github.io/reference/random/uniform_real_distribution.html)（と、場合によっては乱数発生装置[random_device](https://cpprefjp.github.io/reference/random/random_device.html) [^1]）しか使わなかったけど。

[^1]: プログラムを動かして実験をするという目的の場合、あとで再現が可能なように「乱数のシードは手で指定して、それをいくつか試す」ということを行うので、random\_deviceは試しに動かす用にしか使わなかったのである。

## [\<sstream\>](https://cpprefjp.github.io/reference/sstream.html)

数値などを文字列化することが多かったので。以前はこれを使うのが億劫だったのだが、最近は慣れてきた。
しかし、ライブラリのファイル名が「sstream」なのに対してクラス名が「stringstream」なの、何か理由あるんですかねえ…

## [\<cfloat\>](https://cpprefjp.github.io/reference/cfloat.html), [\<climits\>](https://cpprefjp.github.io/reference/climits.html)

前者は数値計算関連、後者はビット演算関連で必要になった。ちょこちょこ使ってた。

# 今後の展望とか

2017年が終わるということで、この先C++17で標準化されたライブラリがもっと普通に使えるようになるのが楽しみですし、使える環境では使っていきたいですね。特に[\<optional\>](https://cpprefjp.github.io/reference/optional.html)・[\<filesystem\>](https://cpprefjp.github.io/reference/filesystem.html)・\<string\_view\>は実装されてうれしいので。

※\<string\_view\>はcpprefjpにまだ記事がないので、手前味噌ではありますが私が以前書いたスライドへのリンクを付けておきます。[Boost.勉強会 #21 札幌「C++1zにstring_viewが導入されてうれしいので紹介します」](https://www.slideshare.net/maraigue/boost-21-c1zstringview)
PHPでの文字列の操作

学んだことの覚書

- 文字列の連結

```php:sample.php
 print 'The number is '.'723';
 // 出力: The number is 723
```

- trim()：余白の削除

```php:sample.php
 print trim(’banana ’);
 // 出力: banana（余白がなくなる）
```

- strlen()：文字列の長さの取得

```php:sample.php
 print trim(’banana’);
 // 出力: 6
```
- strcasecmp()：大文字小文字の区別なく文字列比較

```php:sample.php
 if(strcasecmp('BANANA','banana') == 0)
 {
   print 'same';
 }
 // 出力: same
```
- strtolower()：すべて小文字に
- strtoupper()：すべて大文字に

```php:sample.php
 print strtolower('Yamada');
 // 出力: yamada
 print strtoupper('Yamada');
 // 出力: YAMADA
```
- ucwords()：最初の文字だけ大文字に（小文字文字列のみ）

```php:sample.php
 print ucwords('yamada');
 // 出力: Yamada
```
- substr()：文字の一部のみ取り出す

```php:sample.php
 print substr('Yamada',0,2);
 // 出力: Ya

 print substr('Yamada',-2,2);
 // 出力: da

 print substr('Yamada',-2);
 // 出力: da
 // 第三引数を省略すると自動的に最後の文字列までを抽出

```
- str_replace()：文字の一部を置換

```php:sample.php
 $before = 'Yamada';
 $after = str_replace('Ya','Ha',$before);
 print $after
 // 出力: Hamada
```
ViewPager + Fragmentを使った時に起きた困った動作

# tl;dr
ViewPagerの中でFragmentを使う時は場合によってFragmentの再生成が行われないので思った通りに動作しないことがあるので注意する。

## 実際に起こった動作
言葉では説明しづらいので以下のgifをご覧ください
![sample.gif](https://qiita-image-store.s3.amazonaws.com/0/113187/acd559ef-71bc-30e5-c385-7076b6cc7c4e.gif)

どうでもいいんですが、この動作ってググるときになんてキーワードでググれば良いか難しい

## 原因
どうやらナビゲーションを切り替えた時にViewPagerの中にあるFragmentが再生成されずに使いまわされているから起こるらしい。

## 解決策
以下のようなFragmentPagerAdapter部分をFragmentStatePagerAdapterにするとFragmentが再生成されるようになり正しく動作します。

```kotlin
// 修正前
val adapter = object: FragmentPagerAdapter(fragmentManager)
// 修正後
val adapter = object: FragmentStatePagerAdapter(fragmentManager)
```

この他にも`onDestroyView`などのタイミングで利用しているadapterにnullをセットしても正しい動作になります。
ただし、nullをセットするadapterがフラグメント内にあったりするとフラグメントのトランザクションがコミットされた後にフラグメントを操作しようとするためエラーを吐くことがあります。

## 最後に
この動きを解決するときにググってもピンポイントで解決策が出てこなくて（根本的になんてググれば良いかもよく解らなかった）解決にちょっと手間取ったので、この記事を見て少しでも解決しやすくなると嬉しいです。
Androidって難しい
Flag Icon CSSとFont Awesome

# はじめに

Webサイトにアイコンを表示する場合、アイコンの画像をネットから収集して使いやすいように名前を変更したりサイズを調整したりする必要があります。

今回は、国旗を表示するのに便利なFlag Icon CSSとアイコンを表示するのに便利なFont Awesomeを紹介します。

![スライド47.jpeg](https://qiita-image-store.s3.amazonaws.com/0/3862/487bfd4f-cc2a-0e73-4d53-d62536032d0f.jpeg)

# Flag Icon CSS

最初に国旗を表示するのに便利なFlag Icon CSSを紹介します。


[flag-icon-css](http://flag-icon-css.lip.is)

![スライド48.jpeg](https://qiita-image-store.s3.amazonaws.com/0/3862/ea00c80a-668e-4afa-b7ae-b4e0ba7e90e2.jpeg)

Flag Icon CSSを簡単に試すために[CDN](https://cdnjs.com/libraries/flag-icon-css)経由でCSSを読み込みます。

```
<html>
    <head>
        <meta charset="utf-8">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.9.0/css/flag-icon.css" rel="stylesheet">![スライド50.jpeg](https://qiita-image-store.s3.amazonaws.com/0/3862/7e5f46c7-ab1b-4aa9-666e-1e893d6f4e61.jpeg)

        <style type="text/css">
            i {
                font-size: 400px;
            }

        </style>
    </head>
    <body style="background: #ccc;">
        <i class="flag-icon flag-icon-jp"></i>
        <i class="flag-icon flag-icon-us"></i>

        <hr />
        <i class="flag-icon flag-icon-jp flag-icon-squared"></i>
        <i class="flag-icon flag-icon-us flag-icon-squared"></i>

    </body>
</html>
```
![スライド50.jpeg](https://qiita-image-store.s3.amazonaws.com/0/3862/1cd2e728-7923-8e77-8ffc-24efb2dc23e0.jpeg)


例えば、日本の国旗を表示する場合は、以下のようになります。
`flag-icon-`のあとに、国を示すラテン文字2文字を指定します。
`flag-icon-squared`を指定すれば正方形になります。

```
<i class="flag-icon flag-icon-jp"></i>
```


# Railsの場合

Railsで利用する場合は、以下のコマンドでライブラリをインストールできます。

```
gem flag_icon_css_rails
```

# Font Awesome

次にアイコンフォントを表示するためのFont Awesomeを紹介します。

[Font Awesome](http://fontawesome.io/)

![スライド49.jpeg](https://qiita-image-store.s3.amazonaws.com/0/3862/429f91f2-32fa-0e2b-623c-961c150aca86.jpeg)


Railsで利用する場合、以下のコマンドでライブラリをインストールできます。

```
gem "font-awesome-rails"
```

[font-awesome-rails](https://github.com/bokmann/font-awesome-rails)

`application.css` にCSSファイルを指定します。

```
/*
 *= require font-awesome
 */
```

ヘルパーメソッドを利用して簡潔に記述することもできます。

```
fa_icon "camera-retro"
# => <i class="fa fa-camera-retro"></i>
```

# 最後に

最後にWikipediaの[ISO 3166-1](https://ja.wikipedia.org/wiki/ISO_3166-1)の略号一覧をまとめたCSVをGitHub Gistに公開しました。

[arthur87/iso3166-1.csv](https://gist.github.com/arthur87/5a55aecbe9eb445502aac3193f8e6e80)

左から、国・地域の日本語名、ISO 3166-1における英語名、3桁数字の国コード、ラテン文字3文字、ラテン文字2文字、場所、行政区分を示してます。



| ja_name | en_name | numeric | alpha3 | alpha2 | location | subdivision |
|:--|:--|--:|:--|:--|:--|:--|
| アイスランド | Iceland | 352 | ISL | IS | 北ヨーロッパ | ISO 3166-2:IS |
はじめて技術同人誌を書いて思ったこと


# はじめに

きたよ！Advent Calendar21日目！
てことで、はじめて技術同人誌を書いて思ったことをつらつら書くのと、なぜデータ加工の本を書いたかについて書きたいと思います。

# なんで技術同人誌書こうと思ったの？

みなさん技術同人誌って読んだことありますか？
おそらく、そんなに読んだ経験を持っている人は少ないと思うんですよ。
ぼく自身も商業誌（本屋さんやAmazonで売られている本）で満足してました。

でもね。
開いちゃったんですよ。
技術同人誌という世界を。

もうね。
偏ってるんですよ。自己満の世界（いい意味で）
ひとつひとつの想いが込められてて、著者の大切にしている思想や考え方を感じられるんですよ。
商業誌みたいに洗練されていないのが、更に味を出してます。

ぼく自身もそういった世界に踏み込みたくなったんですよね。
自分の思想や考え方が世のエンジニアたちにどう感じてもらえるのか。
どんな反応が返ってくるのか。
それを確かめるべく書きました。

でも、そのきっかけをもふもふちゃんに作ってもらったのが一番大きいですね[^1]
[^1]: 技術書典で共同で書いたもふもふちゃん

てな感じで書く運びとなりましたヽ(*ﾟдﾟ)ノ

# どんな本書いたの？そして、なぜその本を書こうと思ったの？

技術書典で販売させてもらった本は、「データを加工する技術」というタイトルです。
内容は、ログを取り込むための「Fluentd vs Logstash」と「Logstashでログを取り込む際の加工処理」についてです。[^2]
[^2]: 「Logstashでログを取り込む際の加工処理」をぼくが担当しました


え、なぜにログ？と思う方もいると思います。
ログって、多種多様にあるんですよ。
例えば、Webサーバを展開している場合は、ApacheやNginxなどのアクセスログから統計を取得したり、
アプリログからユーザ動向を分析するためにログを取得したり、はたまた踏み台サーバのAuditログを取得したりと様々です。

これは一例に過ぎないのですが、世の中にはたくさんのログがあります。
それらを取り込んで、ビジュアライズしたいと思う人はたくさんいると思うんですよ。
grepおじさんとは呼ばれない！そんな世界を望んでビジュアライズに取り掛かるんです。

でもね。
取り込むところで挫折する人が続出するんです（ぼくもそうでした。。Orz）

なので、取込部分で挫折させないための加工技術を実際のログを題材にして書きました。

* [技術書典で販売した本](http://rimarimadan.hatenablog.com/entry/2017/10/17/%E6%8A%80%E8%A1%93%E6%9B%B8%E5%85%B83_%E5%91%8A%E7%9F%A5)

# 実際に本を書いて思ったこと

書き始めはたのしい。
でも、中盤以降でつらくなってくる時がきますｗ
50ページ程度を書いたのですが、正直、それでもつらく感じた時がありました。
（O'Reilly とか書いている人は人間なのか？と思えてくる）

でも、売れた時におつりが大量に返ってきます。

あと、共同で書いて本当によかったと思います。
助言し合えたり、校正してもらって本当に助かりました（ほぼ助けてもらった側ですが）
あと、迷惑をかけられないという思いも強くなり、納期への意識が高まります。

# 技術書典で販売して思ったこと

めっちゃ楽しいです！
技術書がたくさん置いてて、技術に興味ある人たちが多くいる雰囲気が楽しいです。
なにより、売れた時が一番うれしいです。
自分の書いた本に対して対価を払ってくれて、どんな内容かを説明することで興味をもって買ってくれることが本当にうれしかったです。
また、Twitterやブログなどで戦利品として紹介してもらえたりすると更にテンション上がりました。

絶対的に次も出るべく本を書こうと思いました。
てことで、次も書くぞーーー！

# おまけ：どこで技術同人誌に出会えるの？

以下のリンクを参考にしてもらえればよいと思います！

[技術同人誌はいいぞ](https://qiita.com/froakie0021/items/c528112bd6937b0a630f)

# さいごに

自分の中では当たり前の技術で、誰でも知っている内容だろうと思って外に発信しないのはもったいないです。
みなさんが持っている技術要素を求めている人は世の中にたくさんいます。

自分がハマったところは誰かしらハマってます。
それらを体系立てて伝えられるのが、本です。

技術同人誌に少しでも興味を持っていただき、書いてみよう！と少しでも思ってもらえたら幸いです。

てことで、Advent Calendar21日目でした( ﾟДﾟ)ゞﾋﾞｼｯ
ありがとうございました。
【React Native】参考サイト一覧

初めてReact Nativeについて調べた時にお世話になったサイト一覧

 - 環境構築
https://bagelee.com/programming/react-native/react-native-1/

 - esLint
https://medium.com/@jamiehalvorson/react-native-eslint-setup-63d02076261

 - UI・UXの比較
https://alligator.io/react/react-native-ui-toolkit-roundup/

 - 遷移の比較
https://blog.mismithportfolio.com/web/20161224rnrouting

 - 開発Tips
https://medium.com/@takashiokusawa/reactnative%E3%81%A7%E5%9C%B0%E5%9F%9Fsns%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E9%96%8B%E7%99%BA%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E8%A9%B1-c155075fa276
https://blog.mismithportfolio.com/web/wb20170903
【jQuery】レスポンシブサイトでスマホ表示のときだけ電話番号をリンクにするやつ

たぶんこの手のスクリプトは検索すればいくらでも出てくると思うんですけど、なんか自分で書きたくなったので書いてみたやつを投稿します。

# 実行前HTML
```html
<p>詳しくはお電話（<span class="tel-link">0120-114-514</span>）にてお問い合わせください。</p>
```

#jQuery
```javascript
(function($) {
	var break_point = 768,
	resize_timer = null;

	$(function(){
		var $tel = $('.tel-link');

		function switch_tel() {
			var window_w = parseInt($(window).width());
			$tel.each(function(){
				var tel_text = $(this).text().replace(/-|－/g, '').replace(/[０-９]/g, function(s){
					return String.fromCharCode(s.charCodeAt(0) - 65248);
				});
				if(window_w >= break_point){
					$(this).children().contents().unwrap();
				} else {
					$(this).wrapInner('<a href="tel:'+tel_text+'" />');
				}
			});
		}
		if($tel.length){
			switch_tel();
		}

		$(window).on('resize', function(){
			if($tel.length){
				clearTimeout(resize_timer);
				resize_timer = setTimeout(function(){
					switch_tel();
				}, 200);
			}
		});
	});
})(jQuery);
```

# 実行後HTML
```html
<p>詳しくはお電話（<span class="tel-link"><a href="tel:0120114514">0120-114-514</a></span>）にてお問い合わせください。</p>
```
ウィンドウ幅が767px以下の場合にこうなります。

```html
<p>詳しくはお電話（<span class="tel-link">0120-114-514</span>）にてお問い合わせください。</p>
```
ウィンドウ幅が768px以上の場合はそのままです。

# 解説
はじめにPC表示とスマホ表示のブレイクポイントは768pxとして定義します。
そうではないサイトの場合は2行目の変数「break_point」の数値を適宜変更してください。

「tel-link」というclassの付いた要素（以下、「対象要素」）をドキュメント内から取得し、対象要素内のテキストを全角半角のハイフンを除外した上で全角数字を半角数字に変換し、変数「tel_text」に代入します。
参考：[JavaScriptで英数を全角/半角に変換する方法](https://qiita.com/yamikoo@github/items/5dbcc77b267a549bdbae)

ブラウザのウィンドウ幅が2行目で定義したブレイクポイントの幅以上の場合、対象要素の中からHTMLタグを除外し、aタグを削除します。これをやらないと、ブラウザ幅を縮めたり広げたりして遊んでるとaタグが無限にネストしていく羽目になります。

ブラウザのウィンドウ幅がブレイクポイントより小さい場合、先ほど変数「tel_text」に代入した電話番号を含めたtel:リンクのaタグを対象要素の中に挿入します。

DOM構築後とウィンドウのリサイズ完了後に、ドキュメント内に対象要素が存在する場合、上記の処理を実行します。
参考：[[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する](https://kadoppe.com/archives/2012/02/jquery-window-resize-event.html)

# 課題とか
本当は対象要素のタグをaタグに置き換える形で実装しようと思ったんですけど、classとかidといった属性を継承する処理を書くのが面倒だったので、横着してaタグを対象要素の中に突っ込むという形での実装となりました。

あと、ウィンドウ幅じゃなくてユーザーエージェントで判別して処理を分岐しろって話もあるかもしれませんが、そもそもレスポンシブサイトをわざわざウィンドウ幅を小さくして見る人はそんなにいないんじゃないかなと思うので、まあこれでいいんじゃないかなと思います。
家族で楽しめるGoogle Home Miniの活用術

# 今年のクリスマスプレセントはGoogle Home Mini　＆　Raspberry Pi！！！
念願の、Google Home MiniとRaspberry piが届きました。
![IMG_0103.JPG](https://qiita-image-store.s3.amazonaws.com/0/188304/4f835434-d9ea-60c0-9e9c-7aa5a4e92968.jpeg)

詳細

- Google Home Mini チョーク
- Rasspberry pi 3 Model B

## Raspberry piのセットアップ面倒ね。
MDMIのケーブルなくてRaspberry piのセットアップがまだできないので、まだRaspberry pi使えないです。
っということで
#### Google Home Miniを使ってなんかやります。

## 家族で楽しめるGoogle Home Miniの活用術
※Google Home Miniが届いたのは一昨日です。

###　Google Homeにただいまと言いLINEで通知する
IFTTTで簡単に実装します。
まず、New Appletsをします。
そして、ThisにGoogle Assistant,triggerはSay a phrase with a text ingredientに設定し、
ThatにLINEで,TriggerはSend a messageにします。そしてこの写真のように設定してください。
<img width="375" alt="fullsizeoutput_4f2.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/188304/708b993a-28c4-f27d-d11d-90ecf717b45d.jpeg">
<img width="370" alt="fullsizeoutput_4e5.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/188304/51d31f8d-02f2-1664-bace-c248ebccae79.jpeg">

その後、このときに設定した**LINEグループにLINE notifyアカウントを招待**してください。

そして、、
「OK Google,ただいま　はるか　より」というと、、、
<img width="375" alt="fullsizeoutput_506.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/188304/35bcecdc-32ca-086d-98e3-4129d4b53bd1.jpeg">

**通知が来た！！**

同じ要領で、、
###　Google Homeに伝言してもらう
まず、New Appletsをします。
そして、ThisにGoogle Assistant,triggerはSay a phrase with a text ingredientに設定し、
ThatにLINEで,TriggerはSend a messageにします。
設定はこの写真のようにしてください。
<img width="375" alt="fullsizeoutput_4f3.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/188304/7efe5149-4d5a-ff0d-a3c6-fd8f943f28c7.jpeg">
<img width="373" alt="fullsizeoutput_511.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/188304/24a088d9-0d3a-0c91-d2f4-f25b7845dfd9.jpeg">

その後、このときに設定した**LINEグループにLINE notifyアカウントを招待**してください。

そして、、
「OK Google,伝言　こんにちは」というと、、、
<img width="375" alt="fullsizeoutput_514.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/188304/8fb2ef50-312c-4c3b-c691-b13d83df80b0.jpeg">

伝言することができました！！！！
**やっぱりGoogle Home Miniは面白いですね！！**

# まとめ
今流行りの、AIスピーカー、Google Home!!
とても面白くて日常が楽しくなりますね。
次はRaspberry pi と連携して家電を操作したり、Google Homeを自発的に話させたりしたいと思います。
Reactでペラっとカードがめくれるアニメーションを実装する

カードをめくるアニメーションを実装したかったのですが
どう実装すればいいのか検討つかず、また時間をかけたくなかったところ
下記ライブラリを見つけました。

## 使用ライブラリ

react-card-flip
https://github.com/AaronCCWong/react-card-flip

## 動作イメージ

![6d3aa9e8763f4ff73da137235d2c3195.gif](https://qiita-image-store.s3.amazonaws.com/0/47896/b350dcde-4af9-09d2-33ea-37b8adbe7ef9.gif)

(趣味で作ったゲームです)

## インストール

```bash
$ npm install react-card-flip --save
```

## 実装方法

importして`ReactCardFlip`内に表のときと裏の時のコンポーネントを組み込むだけ
簡単。
reactに多少でも慣れている方ならすぐに実装できるのではと思います。

上の動作イメージのカードが`DeckField`だと思っていただけると。

```js
import ReactCardFlip from 'react-card-flip';

const DeckField = ({someState}) => (
    <ReactCardFlip isFlipped={someState.isFlipped}>
      <Card key="front">
        //<snip>
      </Card>

      <Card key="back">
        //<snip>
      </Card>
    </ReactCardFlip>
);
```

実際のコードでは、
onClick
-> cardをfetch
-> state更新
をredux-sagaで行っています。

来年はリッチなコンポーネントをライブラリにできるようcss周りも手をだせ、、たらと思います。
FileUtils::DryRunを使ってテストする

# TL;DR
`remove_const`と`const_set`(or 定数代入)を使って`FileUtils`を`FileUtils::DryRun`にすり替えて、stderrに吐き出されるメッセージを確かめる。

# 準備
`spec_helpr.rb`やモックを行う場所に以下のコードを書きます。

```ruby
Object.class_eval do
  RealFileUtils = FileUtils
  remove_const(:FileUtils)
  FileUtils = RealFileUtils::DryRun
end
```

`FileUtils`を`FileUtils::DryRun`に差し替えています。

# サンプル
## 実装コード
今回は以下のコードをテストしてみましょう。

```sample.rb
class Sample
  def copy_gemfile
    FileUtils.copy("Gemfile", "CopyGemfile")
  end
end
```

`FileUtils.copy`を使って`Gemfile`というファイルを`CopyGemfile`にコピーしています。

## テストコード

```sample_spec.rb
RSpec.describe Sample do
  it do
    expect {
      Sample.new.copy_gemfile()
    }.to output("cp Gemfile CopyGemfile\n").to_stderr_from_any_process
  end
end
```

`FileUtils::DryRun`のソースを読むとstderrに出力されていることが分かったのでそのようなテストを書きます。

`to_stderr_from_any_process`がポイントです。`to_stderr`では`FileUtils::DryRun`の出力を捕捉できません(原因はよく分かってないです)。

`FileUtils::DryRun`にすり替えられているため、テストを走らせてもファイルのコピーは行われておらず、代わりに`copy Gemfile CopyGemfile\n`というメッセージがstderrに出力されます。出力には最後に改行が入るため、注意です。

# 参考

`FileUtils`を`FileUtils::DryRun`に差し替える方法はFakeFSの以下の実装を参考にしました。

> https://github.com/fakefs/fakefs/blob/master/lib/fakefs/base.rb

FakeFSの方では`remove_const`と`const_set`を使っているようです。今回`const_set`を使わず代入を用いたことに深い意味はありません。

濫用はできませんが、応用が効きそうな手法ですね。
itermでアンダースコア（_)繋ぎの文字が選択できなくなった


itermでアンダースコア `_` 繋ぎの単語をダブルクリックで選択できなくなった
変数を一発で選択しづらくなったのでPreferenceの「Characters considered part of word for selection」に `_` を追加した

![設定画面.png](https://qiita-image-store.s3.amazonaws.com/0/68146/3b4aa166-c255-f113-c696-04614f24807e.png "設定画面.png")
Googleスプレッドシート入門

# Googleスプレッドシートとは
ざっくり言うとオンラインの表計算アプリケーションです。
無料で誰でも使えます。
オンラインの表計算ですので、人との共有などもとても楽にできます。

またスプレッドシートはオンラインのため、他人との共有だけでなく、同時に編集するのもサクサクできます。
他人が編集しているときは
編集してる箇所がグレーアウトされます。
![_2017-12-21-21.24.57.jpg](https://qiita-image-store.s3.amazonaws.com/0/221884/df90f15d-66ed-7885-7f22-5f3b84dbb1bf.jpeg)

# 共有設定について
他人との共有をする場合は、スプレッドシートの右上にある共有ボタンをクリックします。
すると共有設定のダイアログが表示されます。
![_2017-12-21-21.31.18.jpg](https://qiita-image-store.s3.amazonaws.com/0/221884/af1de888-cb27-9ffb-5c45-4d507bbcc948.jpeg)

リンクを知っている全員が編集可だけでなく、他のユーザーは閲覧のみなどの設定ができます。

# スプレッドシートのおすすめ関数
基本的にはエクセルと同様の関数を使用することができます。
ですので、今回はスプレッドシート特有のおすすめ関数を紹介します。

## IMPORTRANGE
まずはIMPORTRANGEです。
こちらは指定したスプレッドシートからセルの範囲をインポートします。

![ 2017-12-21 21.56.10.png](https://qiita-image-store.s3.amazonaws.com/0/221884/ecc7af0c-5e29-32ef-52c0-382b2732d9be.png)

実際に使用している例

![image.png](https://qiita-image-store.s3.amazonaws.com/0/221884/1428036f-7252-7b89-8e08-3dae786764f2.png)

同じブックでなくてもURLさえわかれば、IMPORTRANGEでデータを引っ張ってくることが可能です。

応用方法としては、vlookup関数の中の範囲をIMPORTRANGEで指定することで別ブックにあるデータでもvlookup関数を使用することができます。

## QUERY
これは本当に便利です！！
SQLのような記述でデータを取得することができます。
![ 2017-12-21 21.55.12.png](https://qiita-image-store.s3.amazonaws.com/0/221884/a3b050ea-5d49-9489-b8ff-03bf8f1fb50b.png)

例えば、出欠確認表にて、出席の人だけを抽出したい場合
![image.png](https://qiita-image-store.s3.amazonaws.com/0/221884/5489ad7e-effb-f1a6-2bc0-62b1faaf7dc3.png)

さらに、2つのシートをまとめて抽出なんてこともできます。
出欠確認を部署毎にシートを分けている場合、
![image.png](https://qiita-image-store.s3.amazonaws.com/0/221884/a6b3acf9-7b33-aab1-7ecc-0c0842b0a89e.png)

注意しなければならいことが2点
・{シート1;シート2}のようにデータ部分を書きます。
・セルの指定がA、Bのような形ではなく、Col1,Col2のように書く
Col1はCが大文字でolが小文字になります。

## ARRAYFORMULA
同じ関数をすべての行にコピーするという作業をなくしてくれます。

![ 2017-12-21 22.38.33.png](https://qiita-image-store.s3.amazonaws.com/0/221884/fbfa4bcf-61f0-e301-1948-2d9a2f81215b.png)
ここだけは公式の説明が少し足りないので補足をします。

例えば、if(B2="○","まる","ばつ")という関数はB2列しかIF文が使えず、B３の列を判定する場合はセルをコピーしなければなりませんが、
ArrayFormulaを使用すると、B列全体に関数を勝手に反映して、計算結果を出力してくれます。
ArrayFormula(if(B2:B="○","まる","ばつ"))

![ 2017-12-21 22.37.52.png](https://qiita-image-store.s3.amazonaws.com/0/221884/3d1fb40a-7afb-0b6e-d51a-a6b2d8a0657c.png)

ただし、sum関数のようにセル範囲を参照するような関数と同時に使用することはできません。

## まとめ
いかがでしたでしょうか。スプレッドシートはスプレッドシートの特徴があり、非常に使いやすくなってます。
エクセルに慣れているからではなく、状況に応じて使い分けができるようになってみてください。

今回サンプルで使用した画像のスプレッドシートは編集不可で公開してますので、参考にしてみてください。
https://docs.google.com/spreadsheets/d/156gnwITOjfleF2pgx_Qn0j57aT6PsFI4Y0ujH8hEZ1M/edit#gid=0
Signal時代から、イマドキのElmに移行中である話。

2014年かな?そのぐらいから、Elmで開発してきたプロダクトをイマドキのElmに移行した(してる途中)なんで、その話をします。わりとポエムです。

なんというか、本来は、12/15日にあげる予定だったんですが、12/7を開けて頂いたので、(そもそもわざわざ空けて頂くほどの内容じゃないと思うので)、大変なんか悪い気がします...

そんなこんなで、とりあえず投稿します。

#  つくっているものと開発経緯

実は、2012年から、Direct Manipulationと、Visual Programmingに関して、僕は関心がありまして、ずーっと開発してきたものがあります。このプロダクトは非公開ですが、今後公開する予定があります。(もう1年ぐらい、伸びてるんですがね。)

さて、開発言語としては、最初は、Vanilla JS(https://qiita.com/nobkz/items/9c79f019f93335ee5140) でした。そんで、Elmに書き直して、なんかちょっと良くなかったので、また、Vanilla JSにもどって、今は、また、Elmに移行している途中でしたが、今の時点で記事にしようと思います。せっかくAdvent Calendarの季節なので、そろそろ一旦まとめようかと。

んで、いろいろな技術をつめこんでいて、言語を作成するんで、ジェスチャーをパーサで書いたりとか、ルーティングについて自分で実装したり(その頃そもそもSPAって概念がなく、そういうのがなかった)、いろいろありました。

# この記事について、

あくまで、この記事はElmに関する記事なので、Elmに焦点を当てます。メインは、Signalです。

# Signalについて。

https://qiita.com/nobkz/items/a9ae4a25be3f7eb21311 

に書いてますが、FRPの中心的な考え型でした。当時は、関数型言語でこうやってGUIを実装していけばいいのかぁという、感じがありました。

用は、Signalを足したり引いたり、似たり焼いたりして、Signal同士や、関数を組織しながらプログラミングしてきました。とてもデータフロー的な考え方に近いものだと思っていました。

ある程度成功していたと思います。

しかしながら、問題がありました、個人的な考えでは、当時のElmには、アーキテクチャに関する問題と、非同期に関する問題がありました。

## TaskやMailboxは難しかった。そしてコードも難しくなった。

Signalは正直そこまで、難しい概念ではないと思います。しかしながら、問題だったのは、TaskやMailboxだと思います。このヘンテコな仕組みが、Elmのコードを難しくしていたのではないかと思います。

しかしながら、今のElmはなくなりました。どこに行ったのでしょうか?


# イマのElm

そんなこんなしている間に、ElmはFRPを捨てました。FRPとおさらばしました。

そして、SignalやTaskは、Elmのフレームワークとして、ElmのPlatformに隠蔽してしまいました。

# SignalからElmへ移行

## ジェスチャーの移行

僕は最初に関心、ジェスチャーの実装をどうしようか?って問題でした、ジェスチャーはSignalを利用して、判定していました。

```elm 
gesture : Signal GestureState
```

余談ですがこれは実は、Controllerの状態なはずです。本来であれば、ジェスチャー状態も分離したいのですが、Elmでは、Modelとされているのでにょもるんですが、しかないですね。素直にElmのModelというTypeに階層を置き、Controllerと本来のModelに分けました。そもそも、MVCモデルってのは、MとVの分離を言うことが多いのですが、MとCに関する状態の境界あって、そのところが、ぜーんぶStateとされて大変にょもるのですが、しかたないですね。


もどりますが、このようなControllerに関する、ものはどこに行ったかといえば、subscriptionでした。

```elm 
subscriptions : Model -> Sub Msg
```

僕は、そもそもsubscriptionの状態に関して、Gestureの状態を分離したかったので、

```elm 
subscriptions model = 
  Sub.batch [ 
    gestureUpdate (getGesture model)
  ....
   ]

gestureUpdate : GestureState -> Sug Msg
```

みたいな感じで、実装しました。subscriptionは、個人的には、ある意味Controllerのようなものでした。

# SubscriptionとSignal

Elmの作者のコメントとかは見てはいないのですが、ぼんやりelm-coreの実装とか読むと、なるほど、Subscriptionのおかげで、Singalはいらなくなったんだなと思いました。さらに、websocketなどがやりやくなったんだろうなと思いました。


確かに学習コストは下がったかのように思いましたが、実はSubscriptionが本質的にはSignalの役割なんじゃないかと。

Commandについては、また今度考察しておくかな。

## パーサーについて

Elmでパーサーも書いていました。

パーサーについては全く実装が変わりませんでした。そういえば、ElmはDSLと言う人がいましたが、汎用プログラミング言語です。もし、DSLだと言うなら、パーサーなんぞ書けない筈だと思います。

フロントエンドDSLをつくるなら、たぶん、汎用言語としての機能が余計で学習コストになっていたと思います。

# WebsocketやHttp requestについて

これも今のところ上手く行っています。CommandやSubscriptionにうまーくまとまったなぁという感想です。


# 設計の話

Elm Platformはフレームワークですが、フレームワークとして、設計がすごく変わるかといえば、実はそこまで変わらないなぁというのが僕の感想です。

しかしながら、個人的にはGUIの設計のひとつでしかないというのも感想にはあります。Elmに合わないGUIの設計をすると大変かもしれません。PAC的なアーキテクチャをとると大変かもね。

しかし、実装技術としては大きく変わったなぁと思います。以上。
AWS System Manager Parameter StoreからパラメータをYAMLにいい感じに展開する

AWS上でアプリケーションを動作させる際、みなさん秘匿情報はどう扱っていますか？

* KMSをつかう
* Parameter Storeをつかう
* Privateな設定管理ツールで管理する

あたりが一般的かなと思います。

開発リポジトリには秘匿情報をいれないポリシーで開発している場合、設定用のリポジトリを分けたり、別のコードとして管理する必要があるなど、ややまどろっこしいなあと思っていました。

そこで今回はYAMLにマクロ展開の機能を追加して、このあたりの管理を楽にできないかと思い、PoCしてみました。

## Parameter Storeとは

Parameter Storeはキーと値を保存するシンプルな仕組みです。ざっくり紹介すると、以下が特徴です。

* キーと値のペアを保存できる
* 平文あるいは暗号化するか否かを選択可能
* 暗号化のためのCMK(customer master key)を選択可能

aws-cliを利用した操作例は次のとおりです。

```
# 平文の場合
$ aws ssm put-parameter --name a_name --value "a value"
$ aws ssm get-parameter --name a_name --with-no-decryption

# 暗号化する場合
$ aws ssm put-parameter --name a_name --value "a value" --type SecureString
$ aws ssm get-parameter --name a_name --with-decryption
```

参考: http://docs.aws.amazon.com/systems-manager/latest/userguide/systems-manager-paramstore.html

## yaml.Unmarshal を拡張する

これらをアプリケーション実行時に環境変数になりに展開することもできます。ECSなどのコンテナ環境で環境変数に秘匿情報を平文でいれるのはセキュアではありません。

そこでYAMLファイルを読み取る際に値を展開すればよいのでは、と考えて実装してみました。

https://github.com/suzuken/yamlssm

機能はシンプルです。

* `yaml.Unmarshal` と同様のインタフェースです。（import文を変えるだけで適用可能）
* `ssm://` から始まる場合のみParameter Storeから値を展開します。

コード例は次のとおりです。

```go
type T struct {
	Foo string
	Bar string
}
var t T

if err := yamlssm.Unmarshal([]byte[`
foo: ssm://prod.database.name
bar: test
`], &t); err != nil {
    // ...
}

fmt.Print(t.Foo) // -> value of prod.database.name on your ssm
```

ひとまずデフォルトのCMSのみサポートしています。実行権限についてはaws-sdk-goの認証に準じます。

Parameter Storeにパラメータが存在しない場合には`Unmarshal`がエラーになります。実際のアプリケーションでは初期化処理時にYAMLで設定を読み込むと思うので、エラーの場合には`panic`なりで起動させないようにするとよいです。

## まとめ

Parameter Store便利なのでどんどんつかっていきましょう。