OmniAICreator/Qiita-1.07M huggingface dataset:
正規表現でstickyが使えないとき

JavaScript内でパーザーのようなものを実装しようとして正規表現のstickyフラグを使用していました。

stickyフラグとは開始位置から指定した正規表現が始まっていなければマッチしない、というものです。

```js
let re = /([A-Za-z_][0-9A-Za-z_]*)/gy; // yをつけることでstickyフラグがONになる

re.lastIndex = 5;
let match = re.exec("1234 ABCDEFG");
// => match: [0: 'ABCDEFG', 1: 'ABCDEFG', length: 2, index: 5]

re.lastIndex = 5;
let match2 = re.exec("1234 5678 ABCDEFG");
// => null
```

しかし、stickyってIEではサポートされていないんですね...

仕方ないのでとりあえずstickyなしで、見つかった場所が開始位置でなければ見つかっていないことにしていました。

```js
function stickyMatch(re, text, index) {
  re.lastIndex = index;
  let match = re.exec(text);
  return match && match.index === index ? match : null;
}

let re = /([A-Za-z_][0-9A-Z-a-z_]*)/g;
let match = stickyMatch(re, "1234 ABCDEFG", 5);
// => match: {0: 'ABCDEFG', 1: 'ABCDEFG', length: 2, index: 5}

let match2 = stickyMatch(re, "1234 5678 ABCDEFG", 5);
// => null
```

が、これだと長いテキストをパーズしているときにちょっとした性能問題にぶち当たります。

開始位置にパターンにマッチする文字列が存在しないとき、検索が文字列の最後まで走ってしまいます。パーザーで使用するつもりなのでそれが最悪で文字列の長さ分繰り返されるため、ちょっと考えるだけで$O(n^2)$以上のコストになります。

どうしたもんかと頭を抱えていたんですが、ふと思いついたのでメモ書き。

```js
function stickyMatch(re, text, index) {
  re.lastIndex = index;
  let match = re.exec(text);
  return match && match[match.length - 1] === undefined ? match : null;
}

let re = /([A-Za-z_][0-9A-Z-a-z_]*)|()/g; // 最後の |()がミソ

let match = stickyMatch(re, "1234 ABCDEFG", 5);
// => match: {0: 'ABCDEFG', 1: 'ABCDEFG', 2: undefined, length: 3, index: 5}

let match2 = stickyMatch(re, "1234 5678 ABCDEFG", 5);
// => match2: null
```

正規表現の最後に`|()`をつけることで指定したパターンにマッチしなくても、開始位置で確実にマッチして文字列の余計な操作が実行されません。また本来マッチしてほしいパターンがあればちゃんとマッチします。

最後に指定しているので、マッチしてほしいパターンが開始位置になければ最後の`()`にはマッチするので`''`になっているはずです。逆に開始位置にパターンがあればundefinedになっています。つまり`match[match.length - 1] === undefined`であれば、本来のパターンにマッチしたことがわかります。

いちいち`|()`をつけて回るのが面倒でpolyfillを書こうとしたけど、`/～/y`はJavaScriptのエンジン側で対応しなければ無理と気づいて断念。
shared_ptr を make_shared に何も考えずに置き換えようとして嵌った話


## 問題

まずは下記のコードを示します. 

```c++:shared_ptrを使ったコード
#include <iostream>

class BaseEntity {
public:
  BaseEntity() {
      std::cout << "BaseEntity" << std::endl;
  }
  BaseEntity(const BaseEntity&) {
      std::cout << "BaseEntity(const BaseEntity&)" << std::endl;
  }
  virtual ~BaseEntity() = default;
  virtual int getvalue() const noexcept { return 100; }
};

class DerivedEntity : public BaseEntity {
public:
  DerivedEntity() {
      std::cout << "DerivedEntity" << std::endl;
  }
  DerivedEntity(const DerivedEntity&) {
      std::cout << "DerivedEntity(const DerivedEntity&)" << std::endl;
  }
  virtual ~DerivedEntity() = default;
  int getvalue() const noexcept override { return -100; }
};

int main()
{
    auto p = std::shared_ptr<BaseEntity>(new DerivedEntity());
    std::cout << "value: " << p->getvalue() << std::endl;
}
```

実行結果は下記です.

>BaseEntity
DerivedEntity
value: -100

派生クラス DerivedEntity を new してるのでオーバーライドされた getvalue 関数は正しく -100 を返してくれました. 期待通りです.

まぁこれでも良いのですが, どうやらメモリ効率と安全性から make_shared を使った方が良いんだぞ, というプラクティスがあることを思い出し書き直そうと思いました(やや疲れ気味の頭で).

```c++:make_sharedを使った誤ったコード
#include <iostream>
#include <memory>

class BaseEntity {
public:
  BaseEntity() {
      std::cout << "BaseEntity" << std::endl;
  }
  BaseEntity(const BaseEntity&) {
      std::cout << "BaseEntity(const BaseEntity&)" << std::endl;
  }
  virtual ~BaseEntity() = default;
  virtual int getvalue() const noexcept { return 100; }
};

class DerivedEntity : public BaseEntity {
public:
  DerivedEntity() {
      std::cout << "DerivedEntity" << std::endl;
  }
  DerivedEntity(const DerivedEntity&) {
      std::cout << "DerivedEntity(const DerivedEntity&)" << std::endl;
  }
  virtual ~DerivedEntity() = default;
  int getvalue() const noexcept override { return -100; }
};

int main()
{
    auto p = std::make_shared<BaseEntity>(DerivedEntity());
    std::cout << "value: " << p->getvalue() << std::endl;
}
```

>BaseEntity
DerivedEntity
BaseEntity(const BaseEntity&)
value: 100


眠い目をこすって何度も確認しても何故か 100 が返されているようにしか見えません. 

「そうだ, きっとこれは夢なんだ」

## 何が不味かったか

もう一度下記を見てみましょう.

```c++:shared_ptrを使ったコード
auto p = std::shared_ptr<BaseEntity>(new DerivedEntity());
```

```c++:make_sharedを使った誤ったコード
auto p = std::make_shared<BaseEntity>(DerivedEntity());
```

`DerivedEntity()` で DerivedEntity がデフォルトコンストラクトされ, その後 BaseEntity のコピーコンストラクタに渡す, という動作になってしまっており, 意図しない有効なコード(コンパイラに怒られないという意味で)となってしまっていたのです.

派生クラスの shared_ptr を make_shared で作成するにはテンプレート引数として基底クラスではなく派生クラスを渡します.

なので, 下記のように記述すべきでした.

```
auto p = std::make_shared<DerivedEntity>();
```


## 参考
[How to make_shared a derived class?](
https://stackoverflow.com/questions/24968294/how-to-make-shared-a-derived-class)
ちょっとずつ読むドメイン駆動設計 第三部 より深い洞察へ向かうリファクタリング 序章

# 的確なモデルを見つけること

第二部ではドメイン駆動設計の構成要素の紹介が中心であったが、的確なモデルをいかに見つけるかとうのが第三部の中心になります。

”的確なモデル”とは、ドメインについての深い理解をとらえたモデルのこと。

## リファクタリングのレベル

「[リファクタリング](https://www.amazon.co.jp/dp/427405019X/)」は、リファクタリングに関するエンジニアなら必ず読むべき一冊ですが、その焦点は、コードを読みやすくしたり、変更を容易にすることなど技術的なところにあります。

ドメイン駆動設計からリファクタリングを捉えると、ドメインについての新たな洞察得るためだったり、コードを通してモデルの表現を明確にするために行うものになります。

> リファクタリングを行うことによって、より一層の洞察に満ちたモデルへ向かう際に便利な、変更の単位が作り出されるのだ(第三部序章より)

## 深いモデルとしなやかな設計

最初に作られるモデルは、表面的で、浅い知識にしか基づいていないのが普通で、プロセスを通して深いモデルが発見されていきます。

深いモデルは、変更が容易な、しなやかな設計によって支えられます。

モデルとコードを繰り返し変更し、その変更が新しい理解を反映していれば、**最もよく変更される場所**が柔軟になっていき、深いモデルが発見されたときも反映することが容易になります。

> モデル駆動設計は、２本の足で立っている。深いモデルにより、表現力豊かな設計ができるようになる。同時に設計が、開発者が実験できるくらい柔軟で、何が起きているかを開発者に示せるくらい明確であれば、モデルを発見するプロセスに対して実際に洞察を与えられる。(第三部序章より)

## 発見のプロセス

抱えている問題に本当に合った設計を作り出すために、ドメインと最も関連の深い、中心となる概念をとらえるモデルが必要。その探し方、取り込み方を**第９章「暗黙的な概念を明示的にする」**で解説しています。

リファクタリングが難しいとモデルの変更が難しい、しなやかな設計をするための解説が**第１０章「しなやかな設計」**。

深いモデルを発見するためには創造性と試行錯誤が必要だが、使えるパターンがあることも。その解説を**第１１章「アナリシスパターン」、第１２章「デザインパターン」**で。

最初の**第８章「ブレイクスルー」**では、より深い洞察へ向かうリファクタリングのプロセスがブレイクスルーにつながったプロジェクトの例の紹介です。

ブレイクスルーはなかなか経験できるものではないのですが、ドメイン駆動設計やっててよかったと思える瞬間です。
競プロ等におけるC++の標準入力

あまり使っていないので、もっと良い書き方があるかもしれません。

--------------------------------
入力:文字数の指定がない場合

```C++
1 2 3 4 5
```
```C++
1
2
3
4
5
```

等

コード

```C++
#include <iostream>
using namespace std;
int main(void){
    int l, i=0, a[10];
    while(cin>>l){
        a[i] = l;
        cout << a[i];
        i++;
    }
}
```

出力

```C++
1 2 3 4 5
```

--------------------------------

入力:文字列かつスペースで分割したくない場合

```C++
a b c d efg
```

コード

```C++
#include <iostream>
#include <string.h>
using namespace std;
int main() {
    string s;
    getline(cin,s);
    cout << s << "\n";
    cout << s[0];
}
```

出力

```C++
a b c d efg
a
```


--------------------------------

入力:カンマ区切りの複数行複数列

```C++
1,2,3
4,5,6
7,8,9
0,1,2
```

コード

```C++
#include <iostream>
#include <string.h>
using namespace std;
int main() {
    int i;
    char str[10], *a[10],*b[10],*c[10];
    while(cin >> str){           //行数指定がある場合はif文でも可
       a[i] = strtok(str, ",");  //","で分解
       b[i] = strtok(NULL, ",");
       c[i] = strtok(NULL, ",");
        cout << a[i] << b[i] << c[i]  <<"\n";
        i++;
    }
    return 0;
}
```

出力

```C++
123
456
789
012
```

--------------------------------


久々に使うとかなり混乱しますね...

入力:行数、列数指定の無い入力

```C++
1 2 3 4
5 6 7 8
9 0 1 2
```

に対し、a[0][0]=1, a[1][0]=2 となるような行列風配列の方法を考えていますが、どうするのが一番楽だろうか
neovim 謎のqが表示される問題の解決（kubuntu）

kubuntuで（konsoleで）neovimを使っているのですが、結構前から、書き込んだり改行したり何かノーマルモードでコマンドを使おうとした時、謎のqが表示されるようになって困っていました。が、解決したので方法を記録しておきます。

https://github.com/neovim/neovim/issues/6403
が関係するissueで、すべてすっ飛ばして最後のコメントを読めばいいのですが、

```
set guicursor=
```

をinit.vimにかけば解決です。以上。
Wio LTE (ATコマンドを使ってみた）

##背景
WioLTE:GetTime()関数がエラーになって、日時が取得出来ないので、何が原因なんだろうと思ったので、ATコマンドベースで取得可能なのか？を調べて見た。

##環境(2017/10/29)
MacBook 12(2017)
MacOS High Sierra(10.13)
Arduino IDE 1.8.5
Wio LTE Library v1.0.1
Wio LTE Japan Version (SORACOM CONSOLE経由で購入）　v1.0
mineo au MVNO 1 SIM(VoLTE専用)

## 結論
ライブラリが、期待している戻り値が違うので、エラーになっていました。
ライブラリの[Issue 3](https://github.com/SeeedJP/WioLTEforArduino/issues/3)に報告しました。

## 検証プログラム
```c:test.ino
#include <WioLTEforArduino.h>

#define EC21J Serial1

WioLTE Wio;

void setup() {
  delay(200);

  SerialUSB.println("");
  SerialUSB.println("--- START ---------------------------------------------------");
  
  SerialUSB.println("### I/O Initialize.");
  Wio.Init();
  
  SerialUSB.println("### Power supply ON.");
  Wio.PowerSupplyLTE(true);
  delay(5000);

  SerialUSB.println("### Turn on or reset.");
  if (!Wio.TurnOnOrReset()) {
    SerialUSB.println("### ERROR! ###");
    return;
  }
  
  delay(3000);

  SerialUSB.println("Loop Start");
}

void test_time2()
{
  EC21J.write("AT+CCLK?");
  EC21J.write(0x0d);
  
  delay(1000);
  
  while (EC21J.available() > 0) {
    SerialUSB.write(EC21J.read());
  }
}

void loop() {
  test_time2(); 
  delay(5000);
}
```

## 検証結果
AT+CCLK?を送ってみたら、
+CCLK: "17/10/28,17:40:58+00"
が帰ってきました。
UTC時刻なので、日本時間の９時間前を示しています。

![171029-0001.png](https://qiita-image-store.s3.amazonaws.com/0/33220/6fe20372-7522-2b4a-9870-c6d37e43b0bd.png)

## その他
WioLte.cppの６行目の

// #define DEBUG

のコメントを外すとライブラリ内でエラーが発生したときに、エラーの発生している行数が表示されるので、よく出来ているなあと思った。

以上、ご参考までに
VSCode拡張機能開発でコンテキストメニューを使う

# VSCode拡張機能開発でコンテキストメニューを使う方法
 package.jsonのcontributesに以下の要素を追加

```json
"menus": {
    "editor/context": [{
        "when": "editorHasSelection",
        "command": "extension.Command",
        "group": "myGroup@1"
    }]
}
```
# 解説
menuはメニューに関する情報を表現する辞書です。menu内のeditor/contextは、エディタ上で右クリックをした時に表示されるコンテキストメニューを表しており、他にはエクスプローラー上でのコンテキストメニューを表すexplorer/contextや、エディタのタイトルメニューバーを表すeditor/titleなどがあります。whenでどのようなタイミングでのコンテキストメニューに機能を追加するか制御できます。このjsonの場合、editorHasSelectionなので、何かを選択している状態で右クリックをした時、追加した機能を実行するアイテムが追加されます。

# 参考
https://code.visualstudio.com/api/references/contribution-points#contributes.menus
Asset Sync を Webpacker と連携させる

## はじめに

Asset Sync を Webpacker に対応させた時のメモを残す

## 手順

### Gemのインストール

```ruby:Gemfile
group :production do
  gem 'asset_sync'
  gem 'fog-aws'
end
```

assets:precompile は production 環境で実行されるため
`group :production`を指定する

### 設定の追加

Asset Pipelineで生成されたファイルの読込先を指定する（従来からあるAsset Syncの設定）

```config/environments/production.rb
config.action_controller.asset_host   = "//s3-ap-northeast-1.amazonaws.com/#{configatron.aws.s3.bucket_name}"
config.assets.prefix                  = '/assets'
```

Webpacker が生成するファイルの出力先の設定を追加する
`public/packs` に出力される

```config/webpacker.yml
default: &default
  public_output_path: packs
```  

`config/initializers` でAssetSyncの初期化を行う
`config.add_local_file_paths`ブロックでwebpacker生成物のパスを指定する

```config/initializers/asset_sync.rb
if defined?(AssetSync)
  AssetSync.configure do |config|
    config.fog_provider          = 'AWS'
    Fog.credentials              = { path_style: true }
    config.aws_access_key_id     = ENV['AWS_ACCESS_KEY_ID']
    config.aws_secret_access_key = ENV['AWS_SECRET_ACCESS_KEY']
    config.fog_directory         = configatron.aws.s3.bucket_name
    config.fog_region            = configatron.aws.region
    config.existing_remote_files = 'delete'
    config.gzip_compression      = true
    config.manifest              = true

    config.add_local_file_paths do
      Dir.chdir(Rails.root.join('public')) do
        Dir[File.join(Webpacker.config.public_output_path, '/**/**')]
      end
    end
  end
end
```

最後に、作成されたファイルがコミットされないようにignoreしておく

```text:.gitignore
/public/assets
/public/packs
/public/packs-test
```

### assets:precompile の実行

`rake assets:precompile` する

```
$ RAILS_ENV=production rake assets:precompile --trace
```

マニフェストファイルが作成される

`public/assets/.sprockets-manifest-012345****.json`
`public/packs/manifest.json`

生成されたファイルを確認すると、アセットがS3からダウンロードされるように設定されている

```public/packs/manifest.json
{
  "application.js": "//s3-ap-northeast-1.amazonaws.com/kurorekishi.me/packs/application-2648fb3e982861ae9a1b.js",
  "application.js.map": "//s3-ap-northeast-1.amazonaws.com/kurorekishi.me/packs/application-2648fb3e982861ae9a1b.js.map"
}
```

### アセットのアップロードだけやり直したい

アセットのアップロードのみをやり直すことができる

```
$ RAILS_ENV=production rake assets:sync
```
Fall Creators Updateを適用するとトースト通知できなくなる

Windows10でアクションセンターに（トースト）通知を行うには以下のようにします。

```csharp
using Windows.UI.Notifications;

...

// トースト通知を飛ばす
ToastNotificationManager.CreateToastNotifier(appId).Show(notification);
```

これまでは特に注意しなくてもこの状態で通知が飛ばせていたのですが、Fall Creators Update適用後では一部通知ができなくなる可能性があります。

具体的には、`CreateToastNotifier`メソッドの引数に**Windowsに登録済みのAppIDを渡さなれけばならなくなりました。**正直AppIDが何なのかよく分かっていませんが、調べて分かったAppIDの具体例をいくつか載せておきます。

- Power Shell
  - {1AC14E77-02E7-4E5D-B744-2EB1AE5198B7}\WindowsPowerShell\v1.0\powershell.exe
- コマンドプロンプト
  - {1AC14E77-02E7-4E5D-B744-2EB1AE5198B7}\\cmd.exe

## 追記(2017/10/29)
AppIDの確認方法がわかりました。どうやらAppUserModelIdのことを指しているみたいです。

1. `Win + R`でファイル名を指定して実行ウィンドウを表示
2. `explorer.exe shell:AppsFolder`を入力しOKを押下
3. 表示されたエクスプローラの何もない部分で右クリック
4. [表示]-[詳細]を選択
5. [並べ替え]-[その他]でAppUserModelIdにチェックを入れる

これでアプリケーションのAppUserModelIdを調べることができます。もっといい方法があるかもしれませんが取り急ぎメモ程度に追記しました。
Ubuntu16.04LTSからDockerまで

####１．まずはOSインストール

・USBディスクに入れてあるイメージからからOSインストール。
・OS起動したので、`$ sudo apt update`するも、appstreamcli で coredump 吐いたりするので、無効化で対処。さらに`$ sudo dpkg --configure -a`を実行。
これで、`update`と`upgrade`を無事終了。
・10インチノートでは色々辛いので、MacのTerminalから入るためにsshインストール。
 `$ sudo apt install openssh-server`

####２．次はDocker
いつの間にか(2017/06？)、Docker EE/CE というの発表されていた。当然 ComunityEdition の方を入れる。
旧版では`/etc/apt/sources.list`で定義していたものが、リポジトリ追加の時に定義するように変わったようだ。
######・REPOSITORYのセットアップ
```
$ sudo apt-get update
$ sudo apt-get install apt-transport-https ca-certificates curl software-properties-common
$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
$ sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
```
######・Docker のインストール
```
$ sudo apt-get update
$ sudo apt-get install docker-ce
```
######・確認
```
$ docker run hello-world
$ sudo docker ps -a
```
ちなみにv17.09。

####3. docker-composeも入れておく、あとRubyもかな
　　Rubyは fluentd と elasticsearch 繋ぐのに必要。                    

######・docker-compose インストール
```
$ sudo curl -L https://github.com/docker/compose/releases/download/1.16.1/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose
$ sudo chmod +x /usr/local/bin/docker-compose
```
######・docker-compose 確認
```
$ docker-compose --version
docker-compose version 1.16.1, build 1719ceb
```
　v1.16.1 は LatestVer。
######・Ruby は Rails 要らないんで、 rbenv だけ。
```
$ apt update ; apt install -y rbenv ruby-build ruby-dev
```
######・PATHを通す
```~/.profile
eval "$(rbenv init -)" 行を追加
```
######・インストール実行
```
$ rbenv install 2.2.3　 #インストール
$ rbenv global 2.2.3　　＃有効化
```
うまくいかない場合は、```sudo apt install libssl1.0-dev```する　20180806追記
######・確認
```
$ rbenv version
$ ruby --version
$ gem --version
$ gem env
```

#####参考リンク
appstreamcli無効
http://grainrigi.hatenablog.com/entry/2017/08/26/232405
Docker公式
https://docs.docker.com/engine/installation/linux/docker-ce/ubuntu/
docker−compose公式
https://docs.docker.com/compose/install/
Ruby 2.2.3https://qiita.com/knjname/items/2ea61d5ff8c89c17b704
githubの本番環境に反映させる方法

1. githubでrepositoryからpushを選択する。
2. ブラウザからgithubにアクセスする。
3. repositoryにアクセスする。
4. repositoryを確認する。いつpushしたかを確認する。
5. compare & pull requestのボタンを押す。
6. 次のページでコメントを残す。何をしたか、どのような仕様を変更したか、どんな機能を追加したかなど
7. create pull requestのボタンを押す。
8. This branch has no conflicts with the base branchのメッセージが出ているか確認する。
エラー時は基本This branch has conflicts that must be resolvedのメッセージが表示される。
9. Merge pull requestは自分以外の人がする。他の人がチェックするため。
Encrypted secrets の運用メモ

[Encrypted secrets](http://guides.rubyonrails.org/5_1_release_notes.html#encrypted-secrets) は Rails 5.1 から使える環境変数の管理機能
`/etc/environment` による管理から Encrypted secrets に乗り換えたときのメモ

## セットアップ

以下のコマンドを実行

```
$ rails secrets:setup
```

暗号化された `secrets.yml.enc` が作成される

```config/secrets.yml.enc
X6a8TC38q6m4Qz6WA1ntCExn1DrlNqNriP1KwtrpKIWp28rhwFFCNdFufHJFBeIztEE5io1P5vQK8puoBWPvUT9xZW8U+cS5YWMkiaOyJ4nJngQ4JgCLpBRoI7jQSFQNfG6VuU5h2wJ567MeWzpBQrOdxzKJKCADi6QZ+QG7FkKrsmBLW3J9dJu6uUP4K29Onwus05QrXlKmnI9pJ587jiSYxkzGU1nHUsVircl7sHX8XHCjrU6eJAWV363T9mhrQLQb5n8IP0lo2IFxHkI4CplK0eWp6IiHI5HIebQMtJzW4wTClGcWKQ8vsT23mkXfwV0toAdfYIQHlX8XhN1/hYrPmynsd75tBdEh3giX9pqUJqiru5H3BWN9zxUGtNTSK7fx75bYFf134XQ2SvNYCjJv5u2orFlCsMJmwG56zhgMx/h0mxCOaAZLWQhflwZawd+qhKtCOxGR/Von3ZNsSThPZcYrTTdkdNbC9A2FCqUywoSmRIjctfwupXsrztgPyKcezcPZZ2zdV1yK2h3l1nVA3SFAFpMpDSsjS69BsD+ZWr55Dh4YiR0D16Y+YTSOCR7LHVy6pi30Suv2dj4RB32GuIaUejpma5lbIZfYAtt67CDW/frPkwB+94eVvUuH4HbvafnMijw6Nl4dAZx8KRfXolBflNuJZ0Aa0QIQzFH74gvL3X2EGaSS98W2+4L9hizKeRIZl7U2hF8TsNM+Q1ioSyCif2RyO45Z+wiP9gy4PbuNXM5i8Oy8TokYkuj3lCjunCOB1aJ98Iaa5bjtTOTfcA4nTPfPRlaux2NmnXcYEhAxP2F6dLpQZ6cig06Hs5DhbjGYyTNTiF902CcIOtF9xU9iCNZ6/t8ph2ZW1kxif82qTrKu+XTFmEE66jmT4l9eu7DC1jiiN14oosA0NQBMoadVVdtMjwgyFnWwgTKEvBuCm/RljRYdzDKki9vn4IoutV4Bt9ZX36Xtq/F3vzjwsASkQJCkb38DpR3mTyMa+3FwLER7eCjFZQdAS4nXnm7eoYWlwWtFcxNBt5AdOjENvEvz1j8Yz7E2dNd8czOfeL/99Vv6VcsWfJ+HC08fLONKrg2FaRhea41p5sQqmkX+7gB6VAQFxD27EKX0tBe7csNxZDqIPFIZjkij2kA8xc+0+RwhZzngGXhmunEUxz59pTcbi4/o2mVNxQs=--tgJzuYFhEhnaMxuK--CGcncM4zJKfjTJy+vDtkIw==
```

`config/secrets.yml.key` には復号に必要なキーが保存される

```config/secrets.yml.key
0123456789abcdef0123456789abcdef
```

`.gitignore` に以下が追加される

```text:.gitignore
# Ignore encrypted secrets file.
config/secrets.yml.key
```

## secretsの編集とRailsからの利用

以下のコマンドで暗号化された secrets を直接編集できる

```
$ rails secrets:edit
```

Rails からは以下のように値を参照できる

```
> Rails.application.secrets.secret_key_base
```

## 開発環境では素のsecrets.ymlを使う

暗号化されたsecretsは、当然ながら復号しないとどんな環境変数が定義されているか確認できない。開発環境ではすぐに定義を確認できるように、素の`secrets.yml`も同時に定義している。

```config/secrets.yml
development:
  secret_key_base: <your_secret_key_base>

test:
  secret_key_base: <your_secret_key_base>

production:
  secret_key_base: <%= ENV["SECRET_KEY_BASE"] %>
```

バージョン管理されないように注意する。

```text:.gitignore
config/secrets.yml
```

## コマンド実行時にキーを聞かれないようにする

環境変数`RAILS_MASTER_KEY`を設定しておくとコマンド実行時にキーを聞かれずに済む

```text:.env
RAILS_MASTER_KEY: 0123456789abcdef0123456789abcdef
```

## capistranoで復号キーをデプロイする

復号キーをデプロイするために以下のタスクを定義する

```lib/capistrano/tasks/secrets.rake
namespace :deploy do
  task :secrets do
    on roles([:web, :app]) do
      execute "/bin/mkdir -p #{shared_path}/config/"
      upload! 'config/secrets.yml.key', "#{shared_path}/config/secrets.yml.key"
    end
  end
end
```

復号キーをデプロイ

```
$ cap production deploy:secrets
```
Kotlin: Gson から Moshiに移行する


## Kotlin: Gson から Moshiに移行する

### Gradleの設定

```kotlin:app/build.gradle:

// network
def retrofitVersion = '2.3.0'
implementation "com.squareup.retrofit2:retrofit:$retrofitVersion"
implementation "com.squareup.retrofit2:adapter-rxjava2:$retrofitVersion"

// コメントアウト
//implementation "com.squareup.retrofit2:converter-gson:$retrofitVersion"

// 追加
implementation "com.squareup.retrofit2:converter-moshi:$retrofitVersion"

// 追加
def moshi_version = '1.5.0'
implementation "com.squareup.moshi:moshi:$moshi_version"
implementation "com.squareup.moshi:moshi-kotlin:$moshi_version"

```

### モジュールの設定

```kotlin:ClientModule

@Module
class ClientModule {

// コメントアウト
//@Provides
//@Singleton
//fun provideGson(): Gson = GsonBuilder()
//    .setFieldNamingPolicy(FieldNamingPolicy.LOWER_CASE_WITH_UNDERSCORES)
//    .create()

  @Provides
  @Singleton
  fun provideMoshi() = Moshi.Builder()
      .add(KotlinJsonAdapterFactory())
      .build()

// コメントアウト
//@Provides
//@Singleton
//fun provideRetrofit(gson: Gson): Retrofit = Retrofit.Builder()
//    .baseUrl("http://hoge.com")
//    .addConverterFactory(GsonConverterFactory.create(gson))
//    .addCallAdapterFactory(RxJava2CallAdapterFactory.createWithScheduler(Schedulers.io()))
//    .build()

  // 追加
  @Provides
  @Singleton
  fun provideRetrofit(moshi: Moshi): Retrofit = Retrofit.Builder()
      .baseUrl("http://hoge.com")
      .addConverterFactory(MoshiConverterFactory.create(moshi))
      .addCallAdapterFactory(RxJava2CallAdapterFactory.createWithScheduler(Schedulers.io()))
      .build()

  @Provides
  @Singleton
  fun provideArticleClient(retrofit: Retrofit): DiaryApi = retrofit.create(DiaryApi::class.java)
}

```

###  これでOK:beer:


ついでにJsonをパースする時にスネークケースをキャメルに変換時の方法

```kotlin:Diaries
data class Diaries(
    // コメントアウト
    // @SerializedName("next_offset")
    @Json(name = "next_offset")
    val nextOffset: Int,
    val items: List<Diary>
)
```
arduinoにQAPASS、1602aのLCDをつなぐ

#何を制御するのか
arduinoでタイマーを利用して２つの時間間隔を制御して、車の外気モードの時間と内気循環モードの時間をそれぞれ異なる時間で切り替えたいと思って早くも数ヶ月。
実は特に真夏は、内気にしてクーラーをかけないと冷える効率はよくない。
しかし、ずうっと内気ばかりでも湿度がさがりすぎたり空気がこもった感じになるのでたまに外気を入れられたら、、そんな発想で作成したものの今はもう寒くなってきて。
##２つの時間を交互に切り替えるだけなら簡単ではあったが
arduinoはプログラミングができるのでおおざっぱに言えば２つの時間を変数にもたせて交互にタイマー割り込みをかければそれ自体はたいしたことないことですぐ実現できていた。しかし、何が大変だったかといえばたまに手動で切り替えたとき、どうするかという問題。そんなのまあたいした問題ではないことだがこだわったためちょっといろいろ制御を加えた。まず現在のモードが外気モードか、内気循環モードかを判断してから、タイマー割り込みで次の割り込み時間を選択する場合にたとえば現在外気だったら内気の時間変数で次のタイマー割り込みをかける。必ずしもインターバルではないような判断を加えた。判断は内気の場合自分のホンダ車はLEDが点灯するので、それをもってきて判断するというやりかた。
これをヤフオクで安くゲットしたコンパレータを使ってその電圧を判断してarduinoのアナログ入力とコンパレータICの出力をつなげた。日立製のHA17393はデータシートから読み取れなかったが、出力は電圧は変化しない。アースとなるか、アースにならないかの違い。ちょうどarduinoのアナログ入力、読み取りモードはデフォルトで使用していたため、アナログ入力端子をアースとの抵抗値を変化させることで、analogReadの戻り値が変化するモードで使用していた。そのため、アナログ入力値に電圧を変化させて入力させても、読み取れない。あくまでこのモードではアースとの抵抗値で値が変化するのである。しかしこの方が安全に利用できる。まちがってarduinoに使用している電源電圧より高い電圧をアナログ入力に入れてしまうとぶっこわれる可能性が高い。これは調べていたころそんな注意はあったし、実際自分のarduino　nanoはA0のアナログ入力は壊れてしまった。
#QAPASSの表示で注意すること
さて、やっと本題。
なかなか表示できずこまっていたがなんのことはない、V0端子はLCDのコントラスト調整端子で、なにもしないと表示されない。それで、検索した配線図で、目に付くのは電源とGNDに可変抵抗をいれて電圧を変化させて調整できるようになっているもの。それ以外はまだよく検索していないので見つけられていないが、自分は単にこのV0端子もGNDとの抵抗値を調整できるように半固定抵抗を取り付けた。この半固定抵抗のGNDの対極には電源は接続していない。自分のQAPASS　LCDはGNDとの抵抗を変化できればこれで十分よく調整できた。
![0156dad6ce64ac8cc79a46a39aebebe8aec27298bc.jpg](https://qiita-image-store.s3.amazonaws.com/0/200517/96c1b4bd-ec24-b77e-d8d8-57e0485cf8cc.jpeg)
上記写真は、まだ表示文字列を精査していない、段階で表示ができるようになったばかりのもの。LCDにくっついている半固定抵抗はコントラスト調整、その後ろ
arduino基盤にくっついている半固定抵抗はコンパレータもすぐ近くにみえるが、内気循環モードのときの電圧判断のGNDとショートするかどうかの分岐点の電圧値を調整するもの。
前書きにも書いたが、正しく現在の外気／内気のモードをarduinoが判断しているかどうかをチェックするにはやはり何らかの表示が必要で、シリアル通信ではデバッグ情報を表示できるが、車の走行中にパソコンとUSB接続したくないし、だいたいからして、12Vの電源は取っているし。

#ケースに収めて
![01343b2b1f9ce04d144f6a20bd1e3208f93dd52365.jpg](https://qiita-image-store.s3.amazonaws.com/0/200517/d53d3ec0-3f1e-f4c2-e2b6-006fac84dee8.jpeg)
配線が細い線を使ってみたので、（ウン十年前に購入してずっと保持していたオレンジのリード線）ハンダののりが悪かったので何度も導通を確認して表示できたもの
Reactチュートリアルが難しすぎる人のためのReactチュートリアル1

チュートリアルだと思った？
僕のメモで、つよい人にこれでいいのか聞くための資料でした。残念だったね。

# こんなのを作ってみる
[![https://gyazo.com/1247355c66ab854c73b62de532441611](https://i.gyazo.com/1247355c66ab854c73b62de532441611.gif)](https://gyazo.com/1247355c66ab854c73b62de532441611)

TypeScriptを使います。
PropsやStateに何が入るのか明記できるのがきもちいい。

# create-react-app
**よーし！環境作ってくぞ！っと始めると1日終わって、「オレ何してたんだっけ…？」**ってなるので(経験談)、[create-react-appのTypeScript版](https://github.com/wmonk/create-react-app-typescript)がオススメです。
 
```shell-session
npm install -g create-react-app

create-react-app my-app --scripts-version=react-scripts-ts
cd my-app/
npm start
```

ブラウザが起動して、編集すると勝手にリロードされます。

# App.tsx を編集
```TypeScript
import * as React from "react";
import "./App.css";

export interface Props {}
export interface State {
  income: string;
}
const logo = require("./logo.svg");

class App extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      income: ""
    };
    // メソッド内でthisを見るためのお約束
    this.onChangeIncome = this.onChangeIncome.bind(this);
    this.moneyYouWant = this.moneyYouWant.bind(this);
  }

  onChangeIncome(e: React.FormEvent<HTMLInputElement>) {
    this.setState({ income: e.currentTarget.value });
  }

  moneyYouWant(money: number): string {
    if (money === NaN || money <= 0) {
      return "";
    }
    return `${money * 10000000}兆円欲しい`;
  }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          <label>
            現在の年収{" "}
            <input
              type="text"
              value={this.state.income}
              onChange={this.onChangeIncome}
            />万円
          </label>
        </p>
        <p className="Money">{this.moneyYouWant(Number(this.state.income))}</p>
      </div>
    );
  }
}

export default App;
```

- 入力欄を変更すると、`onChangeIncome`が呼ばれる
- `onChangeIncome`は`state.income`に年収を保持する
- 表示する箇所で`moneyYouWant`が呼ばれ、表示される

# 備考:ｶﾞｸﾌﾞﾙさせるCSSはこんな感じ
```css
.Money {
  animation: hurueru .1s  infinite;
  font-size: 3em;
  color: #f00;
}

@keyframes hurueru {
  0% {transform: translate(0px, 0px) rotateZ(0deg)}
  25% {transform: translate(10px, 10px) rotateZ(1deg)}
  50% {transform: translate(0px, 10px) rotateZ(0deg)}
  75% {transform: translate(10px, 0px) rotateZ(-1deg)}
  100% {transform: translate(0px, 0px) rotateZ(0deg)}
}
```

# 気になる点
- 表示内容を作るメソッドをJSXから呼ぶのではなく、stateに結果を入れてそれを表示すべきな気がしてきた。JSXは単にstateを表示するだけに務めるのが見やすそう。
    - [reviewed] stateには状態だけを入れるべきなので、このままで良いと思う。`moneyYouWant`を別のクラスにすると見やすくなる。

# 次回
今回作った画面を部品化して使いまわしてみる。
https://qiita.com/kaibadash@github/items/0f753e0615f475c8cbbf
Riot Pug Sass Typescriptで楽にWebページ・アプリを開発 (何が便利か編)[TypeScript編]

## 親記事
https://qiita.com/narumi18wa/items/2aab618bce37ba82ae60

## 主要な機能
javascriptに型解決を与え、コンパイル時に型によるエラーを未然に検知する。
コンパイル時にES2015, ES2016, ES2017の機能をES5へコンパイルする。

javascriptは型が無いため、関数に好きな値を渡せる。楽に書けるという意味では便利な一面もあるのだが、開発が大規模化してくると思い込みで全く違う値を渡したり、何が返ってくるのか忘れていたりして逆に辛いこともある。

TypeScriptはclassはもちろん、interfaceなどでObjectの型解決もでき、IDEと組み合わせると強力な補完が効き、かなり楽な開発をすることができる。

## 従来のjavascriptとの比較
#### ajaxで受け取った値をログに吐き出す
##### javascript
###### index.js
```js
// よくわからん
function callHogeHoge() {
  $.ajax({
    type: "get",
    url: "hogehoge",
    headers: {},
    data: null
  }).done((response) => {
    console.log(response)
  }).fail((jqXHR, textStatus, MessageThrown) => {
    throw new Error("hogehoge")
  })
}
callHogeHoge()
```

##### TypeScript
###### index.ts
```ts
// わかりやすい
import AsyncAjax, {} from "../util/AsyncAjax"

async function callHogeHoge(): Promise<void> {
  const response: string = await AsyncAjax("get", "hogehoge", null, null)
  console.log(response)
}
callHogeHoge()
```

###### AsyncAjax.ts
https://github.com/narumi18wa/riot-pug-sass-ts-proj/blob/master/src/script/util/AsyncAjax.ts

### 比較考察
ほぼES2017の威力だったように見えますが、AsyncAjax内の型解決だけでも強力です。
IDEを使っていれば、headerやrequest dataに誤ったオブジェクトを渡しただけでエラーとなります。
CodePipelineの編集はAWS CLIを使ってJSONでさくっとやる

## tl;dr

- GUIだと名前の変更も、要素のコピーなんかもできなくて辛い
- AWS CLI の `aws codepipeline get-pipeline` で定義を取得し、それを編集して `create-pipeline`, `update-pipeline` で流し込めばOK

## AWS CodePipeline

[AWS CodePipeline](https://aws.amazon.com/jp/codepipeline/) は、CodeBuildやLambdaを実行して、Continuous Delivery、Release Automationができるサービス。各ステップの入出力 (Artifact) は、S3オブジェクトを介す、S3ドリブンな感じなのと、GUIで動いているのが見える感じが個人的には好きなサービスです。
AWS Lambdaのデプロイ自動化のドキュメントでは、CodePipeline / CodeBuild / AWS SAM / CloudFormation を使って実現する方法が書かれています。

- [Lambda ベースのアプリケーションのデプロイメントを自動化する - AWS Lambda](http://docs.aws.amazon.com/ja_jp/lambda/latest/dg/automating-deployment.html)

## だるいこと

上のデプロイメント自動化の手順を読みながら、操作すると、CodePipelineができあがって、コミットトリガでデプロイされる仕組みができるんですが、たとえば、ステージングデプロイ、承認、プロダクションデプロイ というフローをつくりたいと思うと、

- Deploymentのステージをコピーして必要な修正だけしたいが、そんな仕組みはない
- Deployment は2つステージができるので、`Stage Deployment`/`Prod Deployment`という名前にしたいが、一度作ったステージやアクションは名前の変更ができない

ということでだるい。

## AWS CLIで簡単に編集

### 現在の定義の取得

`aws codepipeline get-pipeline` で取ってこれる。また、あとの作業のため `--query` で `pipeline` という要素の中のみを取得してきます。

```
aws codepipeline get-pipeline --name <pipeline name> --query pipeline > current.json
```

こんなのが取れる

```json
{
  "roleArn": "arn:aws:iam::123456789012:role/AWS-CodePipeline-Service",
  "stages": [
    {
      "name": "Source",
      "actions": [
        {
          "inputArtifacts": [],
          "name": "Source",
          "actionTypeId": {
            "category": "Source",
            "owner": "AWS",
            "version": "1",
            "provider": "CodeCommit"
          },
          "outputArtifacts": [
            {
              "name": "MyApp"
            }
          ],
          "configuration": {
            "PollForSourceChanges": "false",
            "BranchName": "<branch>",
            "RepositoryName": "<repo-name>"
          },
          "runOrder": 1
        }
      ]
    },
    ...
  ],
  "artifactStore": {
    "type": "S3",
    "location": "codepipeline-us-west-2-123456789012"
  },
  "name": "<name>",
  "version": 7
}
```

### 編集

GUIと同じようにステージの中にアクションが並んでいるので、名前を変更したりコピーしたりする。

### 新規作成

JSONを編集し、最低限 `pipeline.name` の要素の値をコピー先の名前とする。
これだけでコピーされる

```
aws codepipeline create-pipeline --pipeline file://changed.json
```

### 更新

同様。バージョン番号がインクリメントされるが、ここは考慮されないので、元のバージョン番号のまま置いておいて大丈夫。

```
aws codepipeline update-pipeline --pipeline file://new.json
```

## 今後

AWS SAMでアプリケーション作ると、CloudFormationで定義されるのに、このパイプラインやCodeBuildの定義は、Consoleで手編集って微妙。このあたりもCloudFormation化するとよいが、書くのが大変。
これを、CLIの戻りからいい感じにCloudFormationのJSON/YAMLの定義に自動で書き換える仕組みが作れそう。
JavaScript で非同期関数を使った sort

プロダクション環境で使われるようなものかは分からないけれども、趣味プロをしていた時に欲しくなったものを、備忘録的に残しておきます。

`Array.prototype.sort` の引数には、同期で結果を返す関数しか渡せません。
しかし、時には値の比較を非同期に行いたいこともあるのではないでしょうか。

そんな時は、 native の関数は使えないので、自前で sort を実装してしまいましょう。

```js
/**
 * return the mid value among x, y, and z
 * @param x
 * @param y
 * @param z
 * @param compare
 * @returns {Promise.<*>}
 */
async function getPivot(x, y, z, compare) {
  if (await compare(x, y) < 0) {
    if (await compare(y, z) < 0) {
      return y;
    } else if (await compare(z, x) < 0) {
      return x;
    } else {
      return z;
    }
  } else if (await compare(y, z) > 0) {
    return y;
  } else if (await compare(z, x) > 0) {
    return x;
  } else {
    return z;
  }
}

/**
 * asynchronous quick sort
 * @param arr array to sort
 * @param compare asynchronous comparing function
 * @param left index where the range of elements to be sorted starts
 * @param right index where the range of elements to be sorted ends
 * @returns {Promise.<*>}
 */
async function quickSort(arr, compare, left = 0, right = arr.length - 1) {
  if (left < right) {
    let i = left, j = right, tmp;
    const pivot = await getPivot(arr[i], arr[i + Math.floor((j - i) / 2)], arr[j], compare);
    while (true) {
      while (await compare(arr[i],  pivot) < 0) {
        i++;
      }
      while (await compare(pivot, arr[j]) < 0) {
        j--;
      }
      if (i >= j) {
        break;
      }
      tmp = arr[i];
      arr[i] = arr[j];
      arr[j] = tmp;

      i++;
      j--;
    }
    await quickSort(arr, compare, left, i - 1);
    await quickSort(arr, compare, j + 1, right);
  }
  return arr;
}

// example usage
quickSort(array, (a, b) => Promise.resolve(a - b));
```

[Wikipedia の quickSort のコード](https://ja.wikipedia.org/wiki/%E3%82%AF%E3%82%A4%E3%83%83%E3%82%AF%E3%82%BD%E3%83%BC%E3%83%88#.E5.AE.9F.E8.A3.85.E4.BE.8B)を元に書いてみました。
aync/await を使うと、非同期を意識せずにシンプルに書けますね。
こういうの、もし需要があるなら、すでに npm に publish されてそうですが、あまりちゃんと調べません。。
Riot Pug Sass Typescriptで楽にWebページ・アプリを開発 (何が便利か編)[Riot編]

## 親記事
https://qiita.com/narumi18wa/items/2aab618bce37ba82ae60

## 主要な機能
tagを自作できる。
tag内で構造(HTML)とスタイル(CSS)を同一次元で管理できる。

### 従来のHTMLとの比較
#### HTML
```html
<!DOCTYPE html>
<html>
  <head>
    <title>hoge</title>
  </head>
  <body>
    <div class="item">
      <p class="big" style="font-size: 1.5em;">huga</p>
    </div>
    <div class="item">
      <p class="big" style="font-size: 1.5em;">moge</p>
    </div>
    <div class="item">
      <p class="big" style="font-size: 1.5em;">ohyo</p>
    </div>
  </body>
</html>
```

#### Riot
##### index.pug
```pug
doctype html
html
  head
    title hoge
  body
    item(text="huge")
    item(text="moge")
    item(text="ohyo")
```

##### item.tag
```riot
item
  p.big {text}

  script.
    import riot from "riot"
    this.text = opts.text

  style.
    .big
      font-size: 1.5em
```

### 比較考察
きれいにモジュール化できて楽に開発できそうです。
checkboxをappendしてcheckedにつまった話

個人用のメモとして。

## やりたかったこと
* jsonとかのデータに従って、特定の数 checkbox を作成する
* 条件に従ってチェックボックスの on/off を変えておく必要がある

## はじめにやったこと
1. $().append(); を forで回す
2. append()したやつに対してprop()でcheckどうのを変更する

* ready()したり
* .trigger('create')したり

## はじめの結果
* チェックボックスができたはいいが、checkにならない
* readyの中に入ってconsole.log()も出るけど走ってなくて意味不明
* trigger('create')君にいたっては仕事をしない

## 最終的な対応
* 条件によって、checkedな要素とそうでない要素を切り替えて apeend()する

## コード
```js
(function() {
  var arr = [0,1,1,0,1,1,0,0,0,1]
  for (let i = 0; i < 10; i++) {
    let addedElem;
    // trueであれば、checkedの方作る
    if (arr[i]) {
      addedElem = $('<label><input type = "checkbox" name = 1 checked>チェック</label>');
    } else {
      addedElem = $('<label><input type = "checkbox" name = 1>チェック</label>');
    }
    $('#dokka-no-area').append(addedElem);
  }
})();
```
Riot Pug Sass Typescriptで楽にWebページ・アプリを開発 (何が便利か編)[Sass編]

## 親記事
https://qiita.com/narumi18wa/items/2aab618bce37ba82ae60

## 主要な機能
CSSの `{` `}` `;` を廃止する。
インデントで構造を表現する。
変数、関数、mix in、importが使える。

## 従来のCSSとの比較
### 同じ表現を無くす

#### CSS
```css
.one {
  margin: 64px;
  /* この64pxどっから出てきた？ */
  width: calc(100% - 64px * 2);
}
```

#### SASS
```sass
$one-margin: 64px
.one
  margin: $one-margin
  // 100%からmarginを引いていることがわかる
  width: calc(100% - #{$one-margin} * 2)
```

### 構造をインデントで表現する
#### CSS
```css
.one {
  width: 100%;
}

.one > .two {
  width: 50%;
}

/* 増えてくると見づらい */
.two > .three {
  width: 30%;
}

.three:hover {
  color: red;
}
```

#### SASS
```sass
.one
  width: 100%

    // &はこの場合は.one、つまりthisを指す
    & > .two
      width: 50%

      & > .three
        width: 30%

        &:hover
          color: red
```

### importが使える
#### CSS
```css
.one {
  /* なんための色？ */
  background: #dfdfdf
}
```

#### SASS
##### _color.sass
```sass
$main-theme: #dfdfdf
```

##### index.sass
```sass
@import "color.sass"

.one
  // 背景はメインテーマ色で
  background: $main-theme
```

#### 比較考察
従来のCSSよりわかりやすいスタイルを書けるようになると思います。
Riot Pug Sass Typescriptで楽にWebページ・アプリを開発 (何が便利か編)[Pug編]

## 親記事
https://qiita.com/narumi18wa/items/2aab618bce37ba82ae60

## 主要な機能
HTMLの `<` `>` 及び `綴じタグ` を廃止する。
インデントで階層を表現する。

### 従来のHTMLとの比較
#### HTML
``` html
<!DOCTYPE html>
<html>
  <head>
    <title>hoge</title>
  </head>
  <body>
    <p class="big" style="font-size: 1.5em;">huga</p>
  </body>
</html>
```

#### Pug
```pug
doctype html
html
  head
    title hoge
  body
    p.big(style="font-size: 1.5em;") huga
```

#### 比較考察
明らかにPugのほうが楽です。HTMLの綴じタグを書くときにインデントを追う必要もありません。
実はimportや変数、繰り返し機能があるので、Pug単体で使ってもかなり便利だと思います。
MacのVSCodeでPermission deniedがでてチョット困った

# TL;DR

久しぶりにMacでVSCodeを使って`git push`したらアクセス拒否！と怒られる事態に遭遇したのでその解決方法のメモ。

```
Permission denied (publickey).
```

# 対象読者 or 前提条件 or 環境

- VSCode バージョン 1.17.2 (1.17.2)
- macOS HighSierra バージョン 10.13（17A405）
- `~/.ssh/config`に鍵の設定などは実装済み。

# 解決方法

`git`が参照している秘密鍵を`ssh-add`を使ってキーチェインに保存する。

```
$ ssh-add -K [キー]
```

今回は`github.com`への`push`時にエラーになっていた。
VSCodeを使わない場合、問題がないため鍵や設定そのものがどうこうということではないのだろうと思っていたがたったこれだけのことだった。

恐らくOSなのか、VSCodeなのかわからないがどこかのタイミングで秘密鍵の参照ができなくなっていたために発生していたエラーなのだろうと思う。
キーチェインに覚えさせることが正しい対応なのかは不明だが、とりあえずこれで行いたいことは出来るようになった。

# 参考

- [Git pull permission denied (Public key) on Mac OS Sierra #36818](https://github.com/Microsoft/vscode/issues/36818)
データの因果関係を探る手法LiNGAMをpythonで書いてみた


統計的因果探索の1つであるLinear non-Gaussian Acyclic Model(LiNGAM)をpython3で書いてみました。githubに置いてます→[ICA-LiNGAM code](https://github.com/ragAgar/LiNGAM)

# ちょっと説明
## どんなモデル?
LiNGAMでは、データの生成過程を因果と捉える手法で、仮定に沿っているデータであれば理論的には因果関係を一意に推定可能です！(線形関係)

要は、下のような状況で生成されているデータがあったとしたら、
このデータを与えるだけで、"xからyに強さ2の因果効果がある"と分かる手法です。

```
x = e1
y = 2x + e2
```
## すごさ
何がすごいかというと、重回帰分析とかだとyをxで説明するとか、xをyで説明するとかの方向を自分で決めなければいけなかったのに、LiNGAMではデータから確実に決められるところが画期的です。
他にも仮定の自然さみたいなのが挙げられます。

その仮定は、実データを考えてみると結構自然なもので、 
　　1. データが連続変数
　　2. ノイズ項eが、非ガウス分布(正規分布でない)、
　　3. ノイズ項eが、互いに独立
であるということです。ちなみにノイズ項は外生変数とか言われます。

LiNGAMは、非ガウス性に注目してるおかげで、連続変数同士の因果関係を見つけることができる手法です。

## 実装
内部で独立成分分析(ICA)という信号処理を使っていて、sklearnにFastICAがあったので、割と簡単にできました。
ただ、非ガウス性の尺度として、*ネゲントロピー*(近似)を扱ってるものしか発見できなかったので、今回は*尖度ベース*のICAを自分で実装してみました。
コードは全て[ココ](https://github.com/ragAgar/LiNGAM)にあります。


# 実行例
## Step1
まず、lingam.pyを実行する。jupyterだと```%run lingam.py```とかでできる。

## Step2
サンプルデータ生成する。この例では、x -> y の向きに2の強さの因果がある。
一様分布で非ガウスなノイズを生成。

```
import numpy as np
import pandas as pd

size = 10000
np.random.seed(2017)
x = np.random.uniform(size=size)

np.random.seed(1028)
y = 2*x + np.random.uniform(size=size)

X = pd.DataFrame(np.asarray([x,y]).T,columns=["x","y"])
```

## Step3
実行する。fitでできる。

```python:尖度ベース
lingam = LiNGAM()
lingam.fit(X)
```

```python:ネゲントロピーベース
lingam = LiNGAM()
lingam.fit(X,use_sklearn=True)
```

で、実行結果。この例ではどっちも同じだった。
ほぼ正しく因果が推定できてる!!

```python:result
x ---|1.991|---> y

array([[ 0.        ,  0.        ],
       [ 1.99149033,  0.        ]])
```
# おわり
3以上変数でもできます。ただ、あんまり多いとすごく時間かかるかも...

尖度使ったICAは、異常値に弱いので、実データならば```use_sklearn=True```の方がいいと思います笑
質問、ミスなどありましたら、教えてください！

他の因果探索手法も実装してみたい！

[LiNGAM code](https://github.com/ragAgar/LiNGAM)
[LiNGAM 論文](http://www.jmlr.org/papers/volume7/shimizu06a/shimizu06a.pdf)
Laravel CSRFトークン切れを500から403に変更

## 概要
500エラーをチェックしているとCSRFトークンの不正（有効期限切れ）でも
500番エラーとなるようで、監視などしていると毎回報告されてくる。

トークンの有効期限切れ（一定時間ブラウザを放置）については、
500番エラーにならないようにしたいので、例外処理の調整を行う。

## 実装

```php:./laravel/app/Exceptions/Handler.php
    /**
     * HTTPレスポンスに対応する例外をレンダー
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Exception  $exception
     * @return \Illuminate\Http\Response
     */
    public function render($request, Exception $exception)
    {
        // CSRFトークンが存在しない、トークン不一致時に発生
        // TokenMismatchException例外を500ではなく403で処理する
        if ($exception instanceof TokenMismatchException) {
            abort(403);
        }

        return parent::render($request, $exception);
    }
```

## 参考サイト
Laravel5.3、エラーページの表示
https://kore1server.com/355/Laravel5.3%E3%80%81%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E8%A1%A8%E7%A4%BA
wordの図番号とfield

#あらすじ
　wordの図番号とフィールドのseqとの関係を説明
#概要
　要するに、フィールドの{seq 図}というのが図番号であるということで、これの相互参照をつけると、自動的にブックマークをそこに設定して、{ref _Ref123456}みたいになっているということである。

#フィールドでの実現による問題点
　なんかの順番を付けていってその参照をつけるというケースを考える。
　単に{seq a1}
 とかとやって、このシーケンス番号に相互参照を付ける場合、いちいち、その点にブックマックを設定してやって(仮にA12というブックマーク名とする)、
　{ref A12}
　とかで実現するのが、フィールドで実現する場合である。

　この問題は、途中で{seq a1}の数が増減すると、ブックマークの名称が意味がなくなり、修正しなければならないということである。
#図表の挿入で実現する場合
　これを解決するのが「参考資料」の「図表番号の挿入」である。
　ここでは「ブックマーク」という概念を隠蔽してくれる。

##図表番号の挿入
　通常、図表番号を挿入すると
![image.png](https://qiita-image-store.s3.amazonaws.com/0/60225/a0d24696-5741-517b-7be0-3168f9097c19.png)
　というような画面がでてくる。問題はこれが
　{seq 図}
　というフィールドで実現していることを知らないことである。

　あまり、気にしていなかったが、このダイヤログの「ラベル名」というのはラベル名をクリックすれば「図」「表」以外にも「a1」「順番」とかなんでもいいのである。そしてそれが
　{seq 順番}
　というような形で挿入され、一覧を見ることができる。
##相互参照の挿入
　通常は相互参照は「図」「表」だけだと思っていたのだが、上のように「ラベル」を設定することで、任意の{seq xx}フィールドを参照できるようになっている。
　そして、相互参照を作る場合に、ユーザは意識しないが、word内部で参照するポイントに_Refxxxxxxというようなブックマークを追加して
　{ref _Refxxxxx}という相互参照を作成する。

　こういう方法であれば、seqを途中で削除して順番を変更しても、参照している番号との一貫性が保てるということである。
数式を逆ポーランド記法に変換

# 概要
数式を逆ポーランド記法に変換するサンプルプログラムです。
アルゴリズム引用元：
http://www.gg.e-mansion.com/~kkatoh/program/novel2/novel208.html
数式引用元：
http://www.wdic.org/w/SCI/%E9%80%86%E3%83%9D%E3%83%BC%E3%83%A9%E3%83%B3%E3%83%89%E8%A8%98%E6%B3%95

ありがたや

# 詳細
数式をもとにポーランド記法に変換しているだけです。
アルゴリズムをJavaで作っているだけなので、感謝すべきは引用元様でしょう。

```java:Rpn.java
/**
 * アルゴリズム引用：http://www.gg.e-mansion.com/~kkatoh/program/novel2/novel208.html
 */
public class Rpn {
    public static void main(String[] args) {
        // 式の引用：http://www.wdic.org/w/SCI/%E9%80%86%E3%83%9D%E3%83%BC%E3%83%A9%E3%83%B3%E3%83%89%E8%A8%98%E6%B3%95
        String formula = "a+b"; // ab+
//        String formula = "a+(b*c)"; // abc*+
//        String formula = "(a+b)*c"; // ab+c*
//        String formula = "a*b+c*d+e*f"; // ab*cd*ef*++
//        String formula = "((a+b)*(c+d)+e)*f"; // ab+cd+*e+f*

        System.out.println(getRpn(formula));
    }

    /**
     * 数式を逆ポーランド記法に変換.
     *
     * @param formula 逆ポーランド記法変換対象の数式
     * @return 逆ポーランド記法に変換した数式
     */
    public static String getRpn(String formula) {
        char[] sequenceList  = formula.toCharArray();
        // 戻り値を格納するStringBuilder
        StringBuilder resultBuilder = new StringBuilder(sequenceList.length);
        Deque<Character> stack = new ArrayDeque<>();

        // 数式をすべて逆ポーランド記法に変換するまでループを続ける
        for(char token : sequenceList){
            switch (token) {
                case '+':
                case '-':
                    // スタックされた演算子の優先順位より低い場合は、スタックの演算子をバッファへ
                    while (!stack.isEmpty()) {
                        char c = stack.getFirst();
                        if (c == '*' || c == '/') {
                            resultBuilder.append(stack.removeFirst());
                        } else {
                            break;
                        }
                    }
                    stack.addFirst(token);
                    break;
                case '*':
                case '/':
                case '(':
                    stack.addFirst(token);
                    break;
                case ')':
                    // 「(」から「)」までの演算子をバッファへ
                    List<Object> list = Arrays.asList(stack.toArray());
                    int index = list.indexOf('(');

                    Deque<Character> workStack = new ArrayDeque<>();
                    for (int i = 0; i <= index; i++) {
                        char c = stack.removeFirst();
                        if (c != '(') {
                            workStack.addFirst(c);
                        }
                    }

                    while (!workStack.isEmpty()) {
                        resultBuilder.append(workStack.removeFirst());
                    }
                    break;
                default:
                    // 数値の場合
                    resultBuilder.append(token);
                    break;
            }
        }

        while (!stack.isEmpty()) {
            resultBuilder.append(stack.removeFirst());
        }
        return resultBuilder.toString();
    }
}
```


##終わりに
バグっていたら教えてください。バグっていなかったら使ってください（笑）
引用元様と知りたい情報をすぐ手に入れられるインターネットに感謝。
LFTPを使ってFTPSでファイル転送ができないのは大体ファイアウォールのせい

仕事でLFTPクライアントを使ってFTPSを利用する機会があり、制御コネクションは繋がるのにデータコネクションが繋がらない問題に直面しました。

いきなり原因を言っちゃうと、「<font color="red">クライアント側のファイアウォール</font>」でした。

<クライアント側>
OS:CentOS
クライアント:LFTP

<サーバ側>
OS:Windows Server
接続方式:FTPS
暗号化モード:Explicit
転送モード:passive
ポート:21


FTPSでの接続は「制御コネクション」と「データコネクション」の２つが行われます。
暗号化モードExplicitはクライアント側から「AUTH」コマンドを送り、SSLにて暗号化された通信が確立されます。

つまり、「制御コネクション」のサーバへの接続時には暗号化されておらず、「制御コネクション」レスポンスから暗号化された接続となります。その暗号化された情報には「データコネクション」で使用するポートも含まれます。(制御コネクションで使用する21とは別物です。）

![キャプチャ.JPG](https://qiita-image-store.s3.amazonaws.com/0/50991/d05ca751-d877-f49d-4d90-65b218299129.jpeg)


<font color="red">暗号化されたデータコネクションで使用するポート番号</font>はクライアント側のファイアウォールからは判別できず、本来なら自動的に一時的にポートを開放する機能が作動せず、不審なデータ通信としてブロックされてしまっていました。

今回は、データコネクションで使用するポート番号を予め開放する設定をクライアントのファイアウォールに行うことで解消できました。
macOS High SierraにしたらMySQL Workbenchの動作がおかしくなった件

# MySQL Workbenchの動作が不安定
macOS High SierraにバージョンアップしたらMySQL Workbench　6.3.9の動作がおかしくなったという話です。

自分の環境で一時的に起こっている問題なのかと思って様子を見ていましたが、StackOverflowにも[スレッド](https://stackoverflow.com/questions/46419476/mysql-workbench-6-3-9-is-not-compatible-with-macos-high-sierra)が立っていました。

どんな風におかしいかというと、

- SQLを実行すると実行中のアイコンがグルグル回りっぱなしになって終了しない。
- SELECT文を実行した時に取得件数の表示だけしか出ない。（従来は、取得したデータがテーブルに表示されました。）
- 左側のスキーマペインの表示が更新されない。スキーマのテーブル一覧とかが見れなくなった。

でした。

# MySQL Shell
当面のしのぎとしてMySQL Shellをインストール。
macOS High SierraからAWSのRDS（mysql, mariadb）に接続してテーブルのデータが参照可能なことを確認しました。

```
$ mysqlsh -u [user_name] -p -h [host_name] -P [port] --sql
Enter password:

mysql-sql> SHOW DATABASES;
+--------------------------------------+
| Database                             |
+--------------------------------------+
| information_schema                   |
| innodb                               |
| mysql                                |
| performance_schema                   |
| mydatabase                           |
| tmp                                  |
+--------------------------------------+
6 rows in set (0.05 sec)

mysql-sql> SHOW TABLES IN mydatabase;
+----------------------+
| Tables_in_mydatabase |
+----------------------+
| table_1              |
| table_2              |
+----------------------+
2 rows in set (0.06 sec)

mysql-sql> SELECT * FROM mydatabase.table_1;
+---------+---------+---------------+
| field_a | field_b | timestamp     |
+---------+---------+---------------+
| a1      | b1      | 1351577200000 |
| a2      | b2      | 1409143237443 |
| a3      | b3      | 1498678934200 |
+---------+---------+---------------+
3 rows in set (0.13 sec)
```

よく使いそうなオプション

|オプション|意味|
|:-----|:-----|
|-D|スキーマを指定|


# その後
上記問題に対応したバージョンが2017/11/15にリリースされました。
MySQL Workbench　6.3.10

  - [リリースノート](https://dev.mysql.com/doc/relnotes/workbench/en/wb-news-6-3-10.html)
  - [ダウンロード](https://dev.mysql.com/downloads/workbench/)
PHPStormにCodeSnifferを追加

## 概要
PHPStormにてPSR2に準拠できていない部分を波線で教えて欲しい。
そうなるようPHPStormの設定を行う。

## PHPの確認
下記コマンドで、PHPのバージョンを確認してみる。
※ PHPがインストールされていない場合は、インストールしてください。

```sh:ターミナル
$ php -v
PHP 5.6.30 (cli) (built: Feb  7 2017 16:18:37) 
```

## PHP Composerインストール
設定を行うには、PHP CodeSnifferがインストールされている必要があるようです。
Maceへインストールをする。

pearかcomposerでインストールできるようですが、
composerの方が使い慣れているのでそちらを選択。

```sh:ターミナル
$ curl -sS https://getcomposer.org/installer | php
$ mv composer.phar /usr/local/bin/composer
```
vendorフォルダにパスを通す。

```sh:ターミナル
$ echo '# php composer installer' >> ~/.bash_profile
$ echo 'export PATH=$PATH:$HOME/.composer/vendor/bin' >> ~/.bash_profile
$ source ~/.bash_profile
```

## PHP CodeSnifferインストール
「~/.composer/vendor/bin/phpcs」にインストールされます。

```sh:ターミナル
$ composer global require "squizlabs/php_codesniffer=*"
```

インストール状況を確認

```sh:ターミナル
$ which phpcs
/Users/{ユーザー名}/.composer/vendor/bin/phpcs

$ phpcs -i
The installed coding standards are MySource, PEAR, PSR1, PSR2, Squiz and Zend
```

## PHPStormの設定
「 Preferences 」を開き、「 Languages & Frameworks > PHP > Code Sniffer 」を選択。 
「 Configuration 」の右側にある"..."をクリック。
![phpstorm1.png](https://qiita-image-store.s3.amazonaws.com/0/142279/580c7536-a2af-733e-4a90-64a8e325fcd4.png)

Code Snifferというダイアログが開いたら、「 PHP Code Sniffer (phpcs) path: 」に 
「 /Users/{ユーザー名}/.composer/vendor/bin/phpcs 」と入力し、"OK" をクリック
![phpstorm2.png](https://qiita-image-store.s3.amazonaws.com/0/142279/88ff2ed8-262b-a4d0-c233-4da503c2ef40.png)

次に設定画面の Editor > Inspections を選択。
PHP Code Sniffer validationにチェックを入れます。
「Coding standard:」でPSR2を選択し、OKをクリックする。
![phpstorm3.png](https://qiita-image-store.s3.amazonaws.com/0/142279/72c772ce-e93a-cb0d-cf62-fd03e2edf522.png)


## 参考サイト
* [MacにComposerをインストールする](http://mawatari.jp/archives/install-composer-in-mac)
* [PHP_CodeSniffer のインストール(composer編)](http://bashalog.c-brains.jp/15/12/21-100000.php)
* [PHPStormにCodeSnifferのコーディング規約のチェックを設定する](https://confluence.jetbrains.com/display/PhpStorm/PHP+Code+Sniffer+in+PhpStorm#PHPCodeSnifferinPhpStorm-InstallingviaComposer)
EC2にSSHするときのメモ

## 概要

EC2にお気軽に接続するためのメモ

## 手順

### 依存パッケージのインストール

```
$ brew install direnv awscli peco
```

### 環境変数の設定

direnvを使ってプロジェクトごとに環境変数を設定する
プロジェクトのルートに下記のファイルを作成

.env

```
AWS_ACCESS_KEY_ID: <YOUR_AWS_ACCESS_KEY_ID>
AWS_SECRET_ACCESS_KEY: <YOUR_AWS_SECRET_ACCESS_KEY>
AWS_REGION: ap-northeast-1

AWS_DEFAULT_REGION: ap-northeast-1
AWS_DEFAULT_GATEWAY: manage.myapp.dev
```

.envrc

```
if [ "$(type -t direnv_load)" = 'function' ]; then
  dotenv
fi
```

### SSHの設定を追加

踏み台サーバを経由して各インスタンスにアクセスする

/etc/hosts

```
xxx.xxx.xxx.xxx   manage.myapp.dev
```

~/.ssh/config

```
Host manage.myapp.dev
  IdentityFile ~/.ssh/id_rsa_myapp
  User         ec2-user
Host manage.myapp.dev/*
  ProxyCommand ssh -W "$(basename "%h")":%p "$(dirname "%h")"
  IdentityFile ~/.ssh/id_rsa_myapp
  User         ec2-user
```

### 接続用スクリプトの設置

接続用のスクリプトを作成する
スクリプトはどこかで拾ったやつを若干手直ししたもの
リンクを貼りたかったんですが、コピペ元が見つからなかった
ごめんなさい

~/usr/local/bin/ec2ssh

```
#!/bin/bash

SSH_COMMAND="ssh ${AWS_DEFAULT_GATEWAY}"

DESCRIBE_COMMAND=$(cat << EOS
aws ec2
  --output text
    describe-instances
  --query
    'sort_by(Reservations[].Instances[].{InstanceId:InstanceId,Tags:Tags[?Key==\`Name\`].Value|[0],InstanceType:InstanceType,State:State.Name,Ip:PrivateIpAddress},&Tags)'
EOS
)

IP=()
COUNT=1
IFS=$'\n'

SERVER_LIST=$(eval $DESCRIBE_COMMAND)

for line in $SERVER_LIST; do
    IFS=$'\t'
    set -- $line
    IP=("${IP[@]}" $3)
    LIST=$LIST"$COUNT: $5 $3 $4 $1 $2\n"
    (( COUNT++ ))
done
RET=$(echo -e "$LIST" | column -t -s " ")

if type peco > /dev/null 2>&1 ; then
    SELECTED="$(echo $RET | peco)"
    IFS=$':'
    set -- $SELECTED
    ITEM=$1
else
    echo $RET
    echo -n "number? : "
    read ITEM
fi

if expr "$ITEM" : '[0-9]*' > /dev/null ; then
    if [ 1 -le "$ITEM" -a "$ITEM" -le $COUNT ]; then
        (( ITEM-- ))
        eval "${SSH_COMMAND}"/"${IP[$ITEM]}"
    fi
fi
```

### EC2に接続

プロジェクトのルートで以下のコマンドを実行

```
$ ec2ssh
```

![console](https://i.gyazo.com/19a7e029a666ff0a9d1591785bf264a8.png)