OmniAICreator/Qiita-1.07M huggingface dataset:
Decoratorで拡張しているクラスにFlowで型をつける

これは型がないNode.jsのWebアプリケーションに対してFlowで型を導入したときにDecoratorで追加拡張している関数やプロパティがないって怒られたのでその時行った対策のメモです。
もっと良い方法を知っておられる方がいましたら、ご教授ください。

# はじめに
## Flowとは
[型なき世界のためのflowtype入門 - Qiita](https://qiita.com/mizchi/items/95ee0101ac22e4b7b662)とか有名な記事を見てください。

## Decoratorとは
まだEcmaScript stage2の機能です。[proposal](https://github.com/tc39/proposal-decorators)

## version
Node.js: v8.11
flow-bin: ^0.77.0

# 問題となったケース
Decoratorを使ってプロパティや関数を追加しているクラスが問題となりました。

例えば以下のようなDecorator関数があります。

```js:externalEngine.js
export function ExternalEngine(name, power) {
  return function decorator(Class) {
    Object.assign(Class.prototype, {
      engineName: name,
      power: power,
      external: true,
      changePower: (power) => {
        this.power = power;
      }
      useExternal: () => {
        return this.speed ** this.power;
      }
    });
  }
}
```

そのDecorator関数を使ったクラスがあります。

```js:MyCar.js
@ExternalEngine("UltraEngine2", 4)
class MyCar {
  speed;
  dash: () => {
    this.speed = this.external ? this.useExternal() : this.speed * 2;
  }
}
```

そしてこのクラスにFlowで型定義を書きます。

```js:MyCar.js
// @flow
@ExternalEngine("UltraEngine2", 4)
class MyCar {
  speed: number;
  dash: () => {
    this.speed = this.external ? this.useExternal() : this.speed * 2;
  }
}
```

そして`flow`を実行すると、エラーになります。

# エラー内容と対応策
## そもそもDecoratorは実験的な機能だと怒られる
以下のようなエラーが出ます。

```
Experimental decorator usage. Decorators are an early stage proposal that may change. Additionally, Flow does not
account for the type implications of decorators at this time.
```

### 対応策
`.flowconfig`ファイルの`options`に以下を追加してください。

```
[options]
esproposal.decorators=ignore
```

## そんなプロパティは存在しないと怒られる
以下のようなエラーが出ます。

```
Cannot get this.external because property external is missing in MyCar [1].
```

や

```
Cannot call this.useExternal because property useExternal is missing in MyCar [1].
```

と出力されます。
Decoratorで拡張したプロパティや関数が認識されていないためです。

### 対応策
結構苦肉の策でしたが、親クラスとなるクラスを型定義ファイルに書いてそれを[Comment Types](https://flow.org/en/docs/types/comments/)で継承しました。

以下のような型定義ファイルを作成します。

```js:externalEngine.js.flow
declare class ExternalEngine {
  engineName: string;
  power: number;
  external: boolean;
  changePower: (number) => void;
  useExternal: () => number;
}
```

そしてそれをMyCar側は[Comment Types](https://flow.org/en/docs/types/comments/)で継承します。

```js:MyCar.js
// @flow
@ExternalEngine("UltraEngine2", 4)
class MyCar /*:: extends ExternalEngine */ {
  speed: number;
  dash: () => {
    this.speed = this.external ? this.useExternal() : this.speed * 2;
  }
}
```

これでFlowが実行するときはMyCarはExternalEngineのサブクラスとして認識されます。

# 最後に
コメントとはいえ継承を用いるのはDecoratorと使いところが違いますし、良くないなーと言うのが本音ですが、型定義のために今動いているコードを変更するのもしんどいなと感じたのでこのような対応策を選びました。
本当はFlowがDecoratorでの拡張を認識して良しなにしてくれるかDecorator用の型定義ファイルを置いとけばそこから判定するようになってくれれば良いのかなと思います。

他に良い方法があればどんどんコメント欄に書いてほしいです。よろしくお願いいたします。

最後までお読みいただきありがとうございました。質問や不備はコメント欄またはTwitter([@shisama_](https://twitter.com/shisama_))からお願いいたします。

(今回出てきたサンプルコードはこの記事のために適当に書いたものです。実際運用しているコードではありません。また、サンプルコードの品質については記事の本質ではないのでおやめください）
PlayでのWebjarsの利用

# Webjars
Java系の言語でウェブアプリを作る際に便利なライブラリで、Bootstrapをはじめとするウェブ系のCSS、Javascriptのコードをまとめて提供してくれます。公式サイトは[コチラ](https://www.webjars.org/)。サイトにアクセスすると、著名なJSライブラリなどが並んでいるのがわかります。基本的には、必要なライブラリに書いてあるコードをbuild.sbtに記載すれば使えるようになります。ここでは、Play2.6でBootstrapを使う方法を解説します。

# Playの準備
公式サイトにあるように、sbtでプロジェクトひな型を作ります。

```
sbt new playframework/play-scala-seed.g8
```

## Webjarsの利用
Webjarsのホームページから、Bootstrapに必要なライブラリを探して、libraryDependenciesに追加をします。Webjarsを使うのに必要な、webjars-playのライブラリも追加しています。

```build.sbt
name := """WebjarsTest"""
organization := "jp.co.example"

version := "1.0-SNAPSHOT"

lazy val root = (project in file(".")).enablePlugins(PlayScala)

scalaVersion := "2.12.6"

libraryDependencies ++= Seq(
    guice,
    "org.webjars" %% "webjars-play" % "2.6.3",
    "org.webjars" % "bootstrap" % "4.1.3",
    "org.webjars.bower" % "jquery" % "3.3.1",
    "org.webjars" % "popper.js" % "1.14.3",
    "org.scalatestplus.play" %% "scalatestplus-play" % "3.1.2" % Test,
)
```

こうすると、意味合いとしては、app/asset以下にwebjarsで追加したライブラリが設置されるようになるようです。
具体的には、`<link href="/assets/lib/bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">`と書くことで参照できるようになります。Playを使った場合は、ヘルパーを使って、`@routes.Assets.versioned("lib/bootstrap/css/bootstrap.css")`と書くことができます。

```app/view/main.scala.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        @* Here's where we render the page title `String`. *@
        <title>@title</title>
        <!-- Required meta tags -->
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <meta charset="utf-8">
    
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("lib/bootstrap/css/bootstrap.css")">
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/main.css")">
        <link rel="shortcut icon" type="image/png" href="@routes.Assets.versioned("images/favicon.png")">

    </head>

    <body>
        @* And here's where we render the `Html` object containing
         * the page content. *@
        @content
        
        <script src="@routes.Assets.versioned("javascripts/main.js")" type="text/javascript"></script>
        <script src="@routes.Assets.versioned("lib/jquery/dist/jquery.slim.min.js")" type="text/javascript"></script>
        <script src="@routes.Assets.versioned("lib/popper.js/umd/popper.min.js")" type="text/javascript"></script>
        <script src="@routes.Assets.versioned("lib/bootstrap/js/bootstrap.min.js")" type="text/javascript"></script>
    </body>
</html>
```


## Bootstrapによるサンプルページの表示
テンプレートのままですが、`app/controller.scala`を使って、Bootstrapのページを表示してみます。[http://localhost:9000](http://localhost:9000)にアクセスすると、すべてのライブラリが適切に読み込まれているのが確認できます。

```app/views/index.scala.html
@()
@main("Welcome to Play") {
  <nav class="navbar navbar-light bg-light">
    <span class="navbar-brand mb-0 h1">Navbar</span>
  </nav>
  <div class="container-fluid">
    <h1>Welcome to Play!</h1>
  </div>
}

```
このWebアプリケーションフレームワークは○規模向き　←　具体的に何人か気になったのでアンケートを採ってみた


# アンケート文

```
アンケート
下記についてイメージする人数を教えてください

Webアプリケーション開発規模
小規模：？人
中規模：？人
大規模：？人
```

# アンケート結果

|名前|小|中|大|
|---|---|---|---|
|Aさん|2~3|3~19|20|
|Bさん|1~2|5|6~|
|Cさん|2~3|10前後|50人とか・・・？|
|Dさん|1~2|3~5|6~|
|Eさん|8|34|144|
|Fさん|1~3人月|4~7人月|8人月~|
|Gさん|2|15|30|
|Hさん|1~2|3~4|5~6|
|Iさん|1~10|11~100|101~|
|Jさん|0~10|11~30|30~|
|Kさん|5|10|15|
|<b>平均値|6.44|33.44|25.4|
|<b>中央値|11.0|64.5|49.0|



# 計算に使ったコード

なんとなくコードで計算してみたくなったのでコーディング。
本当はデータサイエンティストみたいなことをパパッとやれると良いなと思っているんですが、そんなスキルは無く。。

アンケ結果そのままでは計算できなさそうだったので整形してます。

```ruby:anke_cal.rb
#!/usr/bin/env ruby
require 'pp'

answers = [
    {small: 2..3,  middle: 3..19,  large: 20},
    {small: 1..2,  middle: 3..5,   large: 6},
    {small: 2..3,  middle: 8..12,  large: 50},
    {small: 1..2,  middle: 3..5,   large: 6},
    {small: 1..21, middle: 22..89, large: 90},
    {small: 1..3,  middle: 4..7,   large: 8},
    {small: 1..7,  middle: 8..22,  large: 23},
    {small: 1..2,  middle: 3..4,   large: 5},
    {small: 1..10, middle: 11..30, large: 31},
    {small: 1..7,  middle: 8..12,  large: 15},
]

answers_small  = []
answers_middle = []
answers_large  = []

answers.each do |answer|
  answer_small  = answer[:small].respond_to?(:to_a) ? answer[:small].to_a : answer[:small]
  answer_middle = answer[:middle].respond_to?(:to_a) ? answer[:middle].to_a : answer[:middle]
  answer_large  = answer[:large].respond_to?(:to_a) ? answer[:large].to_a : answer[:large]

  answers_small.push(answer_small)
  answers_middle.push(answer_middle)
  answers_large.push(answer_large)
end


answers_small.flatten!
answers_middle.flatten!
answers_large.flatten!




def get_average(array)
  array.inject(0.0){|r,i| r+=i }/array.size
end

def get_median(allay)
  allay.size % 2 == 0 ? allay[allay.size/2 - 1, 2].inject(:+) / 2.0 : allay[allay.size/2]
end



# 平均値
pp "小規模の平均値は#{get_average(answers_small).round(2)}人"
pp "中規模の平均値は#{get_average(answers_middle).round(2)}人"
pp "大規模の平均値は#{get_average(answers_large).round(2)}人"



# 中央値
pp "小規模の中央値は#{get_median(answers_small).round(2)}人"
pp "中規模の中央値は#{get_median(answers_middle).round(2)}人"
pp "大規模の中央値は#{get_median(answers_large).round(2)}人"
```

```
$ ./anke_cal.rb
"小規模の平均値は6.33人"
"中規模の平均値は33.44人"
"大規模の平均値は25.4人"
"小規模の中央値は11.0人"
"中規模の中央値は64.5人"
"大規模の中央値は49.0人"
```

うーん、正しく計算できているんですかねぇ。

# IPAの定義

#### [PM 育成 ハンドブック](https://www.ipa.go.jp/files/000010321.pdf) P.32

>小規模 ： ピーク時に管理する要員数が１０人未満、または、年間契約金額が１億円未満
中規模 ： ピーク時に管理する要員数が１０人以上５０人未満、
または、年間契約金額が１億円以上５億円未満
大規模 ： ピーク時に管理する要員数が５０人以上５００人未満、
または、年間契約金額５億円以上１０億円未満
超大規模 ： ピーク時に管理する要員数が５００人以上、または、年間契約金額１０億円以上

---
#### [アジャイル型開発における プラクティス活用事例調査](https://www.ipa.go.jp/files/000026846.pdf) P.7  

>※1 人数が増えることによりコミュニケーション面に及ぼす影響を見たかったため、規模を表す基準として、チームの人数を採用した。
小規模 → プロジェクトに参加した人数が29名以下
中規模 → プロジェクトに参加した人数が30名以上99名以下
大規模 →プロジェクトに参加した人数が100名以上


# 感想
* 計算ムズイ
* プロジェクト＝リポジトリと考えていいのかよくわからない
* IPAの感覚とは乖離している気がする
[mac] matplotlib最短で日本語対応

### 1.日本語対応フォントをダウンロード 
[IPAフォント ダウンロードページ](https://ipafont.ipa.go.jp/old/ipafont/download.html) 
今回はIPAゴシックを用いる

### 2.ダウンロードしたttfファイルをダブルクリックしてfont bookからインストール

### 3.~/.matplotlib/fontList.jsonを削除(フォントのキャッシュ削除)

### 4.matplotlibインポート後にフォント変更


```python:cf.py
import matplotlib.pyplot as plt
plt.rcParams['font.family'] = 'IPAPGothic' #全体のフォントを設定
```

### 5.decodeしてプロット

```python:cf.py
cf=[38.581,45.605,53.476,61.858,61.740,68.210,67.691,74.289,89.813,117.726,143.940,151.615,159.194,174.699]
years=range(2004,2018)
plt.plot(years,cf)
plt.legend(['対外純投資'.decode('utf-8')])
plt.show()
```

![ダウンロード.png](https://qiita-image-store.s3.amazonaws.com/0/170241/02d4564a-0a91-4d52-cf17-7e7bb2019c06.png)

### 参考
[matplotlib と Seaborn の軸の日本語設定](https://qiita.com/kshigeru/items/0cfc0778bab197687967)
[3分でmatplotlibを日本語対応させる
](https://qiita.com/knknkn1162/items/be87cba14e38e2c0f656)
プログラミング未経験100万円の収益を上げるまで

プログラミングの勉強を始めた。
投じた金額は現時点では70万。
正直言うと、借金だ。収益を出さないと
破産する。だからこそ、強気なタイトルをつけた。

そうしないと、自分自身に負けてしまう気がしたから。

頑張るぞい。

というわけでprogateから始めた。

わかったこと
1 プログラミングは面白い
2 やってみなくてはわからない

1 progateレベルとはいえ、始めて触れた
プログラミングは、非常に楽しかった。
正しく打ち込めば反応してくれる。
間違えていれば、反応してくれない。

かつて、これほど分かりやすいものはないかったとおもう。

2 プログラミング？難しいんでしょう？
なんと思っていた。でも実際は違った。
とってもやり易い。やり始めて良かったぜ…。
ReactのイベントにJavascriptのクラスで定義したメソッドを渡すときの注意

# はじめに
初投稿になります。
なんか、世の中アウトプットが重要らしいので自分も学んだことをアウトプットしていこうかと
といってもググったことをまとめるぐらいですけど

# React動かん、、、
Reactを勉強中ですが、コンポーネントのクラスを作って、reander関数のなかでdiv要素のonClickにクラスのメソッドを渡したのですが、なんか動きません。

```jsx:SandBox.jsx
        class ClockCompo extends Component {
            constructor(props) {
                super(props);
                /* 初期化とか、、、*/
            }
            changeDisplayMode() {
                /* 処理、、、*/
                this.setState(newState);
            }
            render(){
                return (
                    <div onClick={this.changeDisplayMode}>
                        hoge
                    </div>
                );
            }
        }
```


#　なぜに、、、
といってもこれはよくやられる間違いみたいです。
普通にクラスのメンバ関数を定義するとthisは束縛されないのだとか、、、
（それでクラスとしての役割果たせてるのかよくわからんのですが、、、だれか教えてください、、、）
Javascriptのスコープ？とかはもっと勉強したいところ

# 解決策
reactの公式に解決策かいてますね。
https://reactjs.org/docs/handling-events.html

わたしは、アロー関数を使った解決策が一番しっくりくるかな、、、
なぜ、アロー関数でメソッドを定義することにより解決できるのか、、、
それは、thisの扱いが違うからの模様です。
（ほかの人のqiitaを参照、、、
https://qiita.com/mejileben/items/69e5facdb60781927929

アロー関数だと定義時にthisを束縛させるけど、
通常の関数はthisは呼び出し元オブジェクトを利用するみたいです。

this.changeDisplayModeってしてるんだから、同じオブジェクトにきまってるじゃん、、、とかおもったのですが、コールバック関数として渡してるから、ちがうthisをもとに呼び出されてたりするのでしょうか。

**ただし、この書き方はES7からの機能っぽい？ので注意。**
公式曰く、create-react-appで作成したプロジェクトについてはデフォルトで変換してくれるみたいです。

```jsx:SandBox.jsx
        class ClockCompo extends Component {
            constructor(props) {
                super(props);
                /* 初期化とか、、、*/
            }
            changeDisplayMode = () => { // アロー関数で定義し、変数に代入する
                /* 処理、、、*/
                this.setState(newState);
            }
            render = () => {
                return (
                    <div onClick={this.changeDisplayMode}>
                        hoge
                    </div>
                );
            }
        }
```

# 編集後記
たいした内容ないのに、qiitaに記事書くのなかなかつかれますね、、、
まあ、自分のメモ用にのこしていこう
JavaScriptのprivate関数命名規約メモ

# なんで調べたか
JavaScriptを書いている上でprivate functionにはアンダースコア(_)を使用する規約が多い気がしていたが、プリフィックスかサフィックスかどっちが大勢を占めるのかが気になった。

発端はGoogle JavaScript Style Guideではサフィックスだったので。
Googleさんが一番偉いわけではないが、今までずっとプリフィックスでやっていたのだが自信がなくなったりした。

# OSSな各種規約

* サフィックス(末尾付与)グループ *functionName_*
 * Google JavaScript Style Guide

* プリフィックス(先頭付与)グループ *_functionName*
 * Airbnb JavaScript Style Guide
 * Dojo Style Guide

* 確認できず
 * jQuery
 * Mozillaコーディング規約

まあ規約なので自分で使う場合は今までどおりプリフィクスにしておこう・・・
Raspberry Pi Zero Wのセットアップ

# はじめに
Raspberry Pi Zero Wを入手したので、前回記事
https://qiita.com/Satoshi_Takahama/items/797171045a1c92a891f4
のPC(windows10)を置き換えたのですが、かなり途中でつまずいたので、
参考までに書いておきます。

作業した時期は2018年8月で、使用したツールとバージョン一覧を以下に記載します。

|ツール|バージョン|
|:---:|:---:|
|LITE版RASPBIAN|2018-06-27|
|Etcher|1.4.4|
|SDメモリカードフォーマッター|5.0.0|
|git|2.11.0|
|nvm|0.33.11|
|Node.js|v8.11.3|
|npm|5.6.0|
|google-home-notifier|1.2.0|
|firebase|5.3.1|

# つまずいたところ
### OSイメージの書き込み
最初からつまずきました。
LITE版RASPBIANのOSイメージをダウンロードした後、Etcherを使用して書き込みしようとしたのですが、Startingが表示されたまま先に進みません。

これは、SDカードのフォーマットが必要でした。
以下からSDメモリカードフォーマッターをダウンロードしてフォーマットしたところ、書き込みが最後までできました。
<https://www.sdcard.org/jp/downloads/formatter_4/>

### USB経由でのアクセス
Raspberry Pi Zero WをUSBでPCに接続し、

```
ssh pi@raspberrypi.local
```
を実行したのですが、アクセスできませんでした。

これは、インターネット共有の設定が先に必要でした。
以下記事を参考に設定したところ、アクセスできるようになりました。
https://qiita.com/Liesegang/items/dcdc669f80d1bf721c21#141-%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%8D%E3%83%83%E3%83%88%E3%81%AE%E5%85%B1%E6%9C%89

### WIFI経由でのアクセス
WIFI設定を行い、PCと接続していたUSBを外して電源を入れなおした後、

```
ssh pi@raspberrypi.local
```
を実行したのですが、アクセスできませんでした。

これは、5GHzの設定(接続先SSIDを5GHzにしていた)をしていたことが原因でした。Raspberry Pi Zero Wの内蔵WIFIは2.4GHzのみしか対応しておらず、接続先SSIDを2.4GHzの設定に直したところ、問題なくアクセスできました。

### Node.jsのインストール
まずはgitをインストール

```
sudo apt-get install -y git
```
その後は以下記事を参考にnvmからNode.jsをインストールしました。
https://qiita.com/ktetsuo/items/8c9cd5714e231aa6ae09

ここでは特に問題は発生しませんでした。

### google-home-notifierのインストール
以下の手順でgoogle-home-notifierをインストールします。

```
mkdir GoogleHome
cd GoogleHome
npm init
npm install google-home-notifier
```
この後サンプルコードを実行すると、以下のようなエラーが発生しました。

```
Error: getaddrinfo -3008
    at errnoException (/home/pi/GoogleHome/node_modules/mdns/lib/resolver_sequence_tasks.js:199:11)
    at getaddrinfo_complete (/home/pi/GoogleHome/node_modules/mdns/lib/resolver_sequence_tasks.js:112:10)
    at GetAddrInfoReqWrap.oncomplete (/home/pi/GoogleHome/node_modules/mdns/lib/resolver_sequence_tasks.js:120:9)
p
```

これは、以下の記事にある対処(browser.jsの修正)により解消しました。
https://qiita.com/udon242/items/fef44cec7b243f93151b

しかし、この時点で、サンプルコードで英語の文章を喋らせることはできたのですが、日本語の文章ではしゃべってくれませんでした。

さらに、以下2点の対処が必要でした。
・ロケール設定、タイムゾーン
  sudo raspi-config　から、ロケール設定として"en_US.UTF-8 UTF-8"、"ja_JP.EUC-JP EUC-JP"と"ja_JP.UTF-8 UTF-8"を設定、タイムゾーンとしてAsia -> Tokyoを設定しました。
・サンプルコードの文字コードをShift-JISからUTF-8に変更
これで、サンプルコードから日本語の文章を喋らせることができました。

### firebaseクライアントのインストール
以下の手順でfirebaseクライアントをインストールします。

```
mkdir firebase-listener
cd firebase-listener
npm init
npm install firebase --save
```
このあと、Firebaseの更新内容を受け取るスクリプトを実行したところ、

```
Illegal instruction
```
が表示されました。

これについては、以下を参考にリビルドすることで解消しました。
https://github.com/googleapis/nodejs-logging/issues/69

```
npm rebuild --build-from-source grpc
```

しかし、この時点でまだ通知側スクリプトとの連携がうまくいっておらず、更新内容を受け取ったあと、シェルスクリプト(index.sh)を実行したところで処理が終わっていました。

これについては、シェルスクリプトの文字コードをShift-JISからUTF-8に変更し、実行権限の付加(+x)することで解消し、ようやくすべての処理を移行することができました。

# おわりに
Raspberry Pi Zero Wは消費電力が小さく常時電源投入した状態で運用できるので、通知されるタイミングがずれることもなく良い感じです。
Teraterm(SSH)からGnuplot表示

SSHでGnuplotを使う場合の表示の仕方についてメモしておきます。
最近はWindows版を主に使うので、たまにLinuxで使おうとすると、そもそもどうやって表示するんだったかわからなくなる・・・。
gnuplot自体の使い方には特に触れません。

## 前提条件
- Gnuplot実行環境：Linux（Ubuntu or CentOS or etc) 
- 操作端末：Windows
- ターミナルソフト：Teraterm(SSH)

## インストール
### Linux側
普通にインストール。

```
Ubuntu：sudo apt install -y gnuplot
CentOS：sudo yum install -y gnuplot
```
## Windows側
###Teraterm単体で使う場合
設定→端末で、自動切換え(VT<->TEK)にチェックを入れる。
![Teraterm設定](https://qiita-image-store.s3.amazonaws.com/0/276188/6c89bd9f-728a-d67b-3363-8d638e7d7269.jpeg)
Gnuplotでターミナルをvttekにする。

```
gnuplot> set terminal vttek
```
あとは普通にプロットすると、別窓で表示される。
![TEK](https://qiita-image-store.s3.amazonaws.com/0/276188/54e9ffe7-83eb-9bb6-d5b0-d287a31f2f80.jpeg)

ただ、残念なことに、一番下に "gnuplot>"と表示され、入力すると変な位置に表示される。
### Xmingを使う場合
WindowsにXmingをインストールする。
[Xming X Server for Windows](https://ja.osdn.net/projects/sfnet_xming/)
TOPページに書いてあるインストール方法に従って、setup.exeを入れるだけ。
インストールしたら、Xmingを起動しておく。特に設定はない。
Teratermの設定→SSH転送で「リモートのXアプリケーションをローカルのXサーバに表示する」にチェックを入れる。(設定を保存して、ターミナル再起動)
![SSH転送](https://qiita-image-store.s3.amazonaws.com/0/276188/3509de1d-94b0-cd79-162d-24bcffd19f0e.jpeg)

Gnuplotでターミナルをx11にする。

```
gnuplot> set terminal x11
```
あとは普通にプロットすると、Xmingに表示される。
![キャプチャ4.JPG](https://qiita-image-store.s3.amazonaws.com/0/276188/e50705dd-bc0e-69cb-4fef-2727b4f13040.jpeg)

![クリップボード4.jpg](https://qiita-image-store.s3.amazonaws.com/0/276188/900b28ca-e089-d9b3-3613-53b982dea163.jpeg)
"a"とか"g"などのショートカットやマウス右ドラッグでのズームなども使用できる。
### 補足
正しい使い方なのかわからない(errorも出てる)が、Xmingを立ち上げた状態で、ターミナル設定をx11にしないままプロットすると、Gridや拡大/縮小などのメニューを持つ画面が表示される。エラーを気にしなければこちらの方が使い勝手がいい気がする。
![キャプチャ6.JPG](https://qiita-image-store.s3.amazonaws.com/0/276188/4fe3b077-09d6-fb07-2c4c-6bda9454662e.jpeg)

![クリップボード7.jpg](https://qiita-image-store.s3.amazonaws.com/0/276188/a9c9abe8-bd13-ff90-88e4-20676d23e18c.jpeg)

### JPGファイル等に出力する
引き続き、Xmingを使用する。
GnuplotでターミナルをJPEG(JPGではない)にする。出力ファイル名を指定してからプロットする。
対応フォーマットは、"gnuplot> set term"で確認可能。

```
set term jpeg
set output 'sin.jpg'
p sin(x)
```
画像の表示はeogで可能。(Xmingに表示される)

```
$ eog sin.jpg
```
![クリップボード8.jpg](https://qiita-image-store.s3.amazonaws.com/0/276188/c29791f8-85b7-5f0d-b152-ee5f7497956b.jpeg)

ファイルの取り出しは、WinSCPなり、TeratermのSCPなりで。
Teratermの場合、ファイル→SSH SCPで転送可能。
Vimのタブで複数ファイルを一気に開く&以前の状態を復元する

## タブで複数ファイルを一気に開く
オプションに`-p`をつけるとタブで開いてくれる。

```sh
$ vim -p test.php test2.php
```

![vimP.gif](https://qiita-image-store.s3.amazonaws.com/0/142791/9183fda7-14d2-0141-30ad-45c7cff92a5e.gif)


git管理下で作業しているときに`modified`のファイルを一気に開きたいときに便利。
<img width="704" alt="modified.png" src="https://qiita-image-store.s3.amazonaws.com/0/142791/ef0b8def-afc1-573c-e868-9c54028f4cb7.png">

`git diff`のオプションで`--name-only`をつけるとless形式でmodifiedのものだけ表示できる。これを`vim -p`に渡してあげる。

```sh
$ vim -p `git diff --name-only`
```
![vim-modified.gif](https://qiita-image-store.s3.amazonaws.com/0/142791/1ad61ab5-43e7-5a36-d4d6-dac3c99e9643.gif)


## 作業前の状態をまるごと復元する

vimを開いているときに`:mks`と打つとカレントディレクトリに`Session.vim`というファイルが作られる。
通常`Session.vim`がすでに存在しているとエラーが吐かれるが、`:mks!`とすると強制上書きとなる。ちなみに`mks`は「make session」の略。

Session.vimを作ったら以下で復元する。

```sh
$ vim -S Session.vim
```

またはvimを開いているときに以下のコマンドを打つ

```sh
:source Session.vim
```
![SessionVim.gif](https://qiita-image-store.s3.amazonaws.com/0/142791/51362abe-bbce-c9c6-4cf9-623eb7558e6b.gif)

カーソルの位置まで保存してくれるので本当にそのまま復元する形となる。
rubyでed25519

# 環境
ruby v2.5
[ed25519](https://github.com/crypto-rb/ed25519/releases) v1.2.4
# ed25519の鍵生成

```ruby:generate.rb
require 'ed25519'

# generate key pair
signing_key = Ed25519::SigningKey.generate
verify_key = signing_key.verify_key
p signing_key
# => #<Ed25519::SigningKey:0x0000559c56048560>
p verify_key
#<Ed25519::VerifyKey:87638dba56966eb6971caea77420d62a880f80d066531875995fd272d39e6eb1>

```
鍵長は32byteです。 


# ed25519で署名

```ruby:sign.rb
# sign
payload = 'plain text'
signature = signing_key.sign payload
puts signature.unpack 'H*'
# => ["b5498cc4377237fb1dbdf8238d79a978c42d7633c10330234b1620532775bb77e6d224d046142442164a1d5d38f51e520f4894b784ee84aa1c68efa3ca9f2a0a"]
```
署名サイズは64byteです。


# ed25519検証

```ruby:verify.rb
#verify
puts result = verify_key.verify signature, payload
# => true
wrong_payload = 'Diffrent from original message'
begin
  verify_key.verify signature, wrong_payload
rescue => e
  puts e.class
  puts e.message
end
# => Ed25519::VerifyError
# => signature verification failed!
```
署名の検証に成功したときは**true**を、失敗したときは**例外:VerifyError**を返します。

# 鍵を文字列として扱う
鍵を文字列として扱うことができます。
バイト列にシリアライズするには`to_bytes`メソッドを用います。
16進数で表すには`String#unpack`メソッドを用います。

```ruby:serialize.rb
# serialize keys
signing_key_bytes = signing_key.to_bytes
verify_key_bytes = verify_key.to_bytes
puts signing_key_bytes.unpack 'H*'
puts verify_key_bytes.unpack 'H*'
# => ["0c4fa4bd9889b646051ca5c1c2dfc154b987c0af0a1ccc28d397367baae759bd"]
# => ["87638dba56966eb6971caea77420d62a880f80d066531875995fd272d39e6eb1"]
```

# バイト列から鍵オブジェクトを生成
シリアライズしたバイト列から鍵オブジェクトを生成することができます。
当然、複号も正しく行うことができます。

```ruby:resotore.rb
# You can make key objects form both serialized keys
# signing key
# Ed25519::SigningKey.new signing_key_bytes

# verify key
restored_verify_key = Ed25519::VerifyKey.new verify_key_bytes
second_result = restored_verify_key.verify signature, payload
puts second_result
# => true
```

# SSHの鍵としても！
sshの鍵としてもed25519を使うことができます。
[GitHubでEd25519鍵をつかう](http://jnst.hateblo.jp/entry/2014/12/15/200542)

# もっとくわしく!
[crypto-rb/ed25519](https://github.com/crypto-rb/ed25519/releases)
[ruby/String::unpack](https://docs.ruby-lang.org/ja/latest/method/String/i/unpack.html)
[Gist](https://gist.github.com/kanna0000/c67b150beda43e518376bb3e34a6dd67): コード全体はこちらにあります。
Web Authentication API の裏側と、なぜそうなっているのかを図解した

次世代 Web 認証仕様 Web Authentication API (以下 WebAuthn) が、今年の4月に勧告候補となりました。

が、ブラウザで利用するインターフェースは `navigator.credentials.create()` と `navigator.credentials.get()` の2つのみなので、それ以外の実装については [MDN のドキュメント](https://qiita.com/kyrieleison/items/62337ec7512eb19ed03b)を読んだり、[W3C Specification](https://w3c.github.io/webauthn/) を読んだりして理解する必要があると思います。

ただ、分量のある仕様を読み解くのは大変です。また、仕様は往々にして、「こうすべき(手段)」が書かれているのみで、「なぜこうすべきか(根拠)」は書かれていない、あるいは分かりにくいことがあります。

そこで、勉強がてらですが [Yubico の Luke Walker さんの資料](https://www.w3.org/Consortium/Hosts/Keio/20180629-fido-seminar/slides/JP_W3C-FIDO_Seminar_FIDO_Technical_Deep_Dive_V1.pdf)を参考に、WebAuthn の裏側である FIDO の登録フロー、認証フローをそれぞれ図解してみました。

## FIDO 登録フロー
FIDO では、よく Authenticator、Client、Relying Party という登場人物が現れます。
WebAuthn で言うと、Authenticator は鍵ペアを保持する認証デバイス、Client は Web ブラウザ、Relying Party は認証を必要とする Web サービスの提供者となります。

WebAuthn は、「Authenticator と Client 間のやりとりを Web ブラウザが代替してくれる、そのための標準仕様」という理解をしています。
なので、WebAuthn を認証方法の一つとして利用したいサービス提供者が意識するのは、Client と Relying Party 間のやりとりです。

まず、ユーザがサービスに登録する際のフローです。
単に公開鍵暗号方式でパスワードレスを実現しているだけでなく、フィッシング攻撃やリプレイ攻撃、Authenticator の偽装などを防ぐように設計されていることが分かります。

![FIDO.png](https://qiita-image-store.s3.amazonaws.com/0/44003/57e946ad-f1f1-9b25-8073-880e50f25a8a.png)

## FIDO 認証フロー
次に、登録済みのユーザがサービスにログインする際のフローです。
登録時に Relying Party に保存した公開鍵を使って、Authenticator から送られる署名を検証することでログインしますが、それ以外にも、登録フロー同様にフィッシング攻撃やリプレイ攻撃を防ぐためのパラメータや検証が必要となります。

![FIDO (1).png](https://qiita-image-store.s3.amazonaws.com/0/44003/89463ccc-af74-c804-2010-52d7d60afba5.png)
SAS Viyaでのデータの読み込みと表示

SAS ViyaではCAS（Cloud Analytic Services）と呼ぶインメモリのデータベースエンジンを搭載しています。今回はローカルにあるデータを読み込んで、表示を確認する流れを紹介します。実装はPythonで行っています。

## ライブラリのインポート

swatというライブラリを使います。swatというのは Scripting Wrapper for Analytics Transfer の略です。

```py
from swat import *
```

## SAS Viyaへの接続

まずSAS Viyaへの接続です。必要なのはホスト、ポート番号、ユーザ名とパスワードです。

```py
cashost='localhost'
casport=5570
useremail='USER_EMAIL'
userpassword='PASSWORD'
```

そして接続します。

```py
sess = CAS(cashost, casport, useremail, userpassword, caslib="casuser")
```

## テーブルアクションセットの用意

今回はデータをテーブルに読み込むので、テーブルアクションセットを用意します。

```py
sess.loadactionset(actionset="table")
```

## データの読み込み

そして例えば `/opt/sasinside/DemoData` 以下にあるデータを読み込みます。 `sas7bdat` というのはSASで作ったファイルに使われる拡張子です。

```py
indata_dir="/opt/sasinside/DemoData"
indata="bank_raw"

if not sess.table.tableExists(table=indata).exists:
    tbl = sess.upload_file(indata_dir+"/"+indata+".sas7bdat", casout={"name":indata})
```

## データを確認する

データを確認する際には `head` メソッドを使います。

```
tbl.head()
```

そうするとデフォルトで5行のデータが表示されます。

| b_tgt | cat_input1 | cat_input2 | cnt_tgt | demog_age | demog_ho | demog_pr | int_tgt | r_demog_homeval | r_demog_inc | ... | rfm6 | rfm7 | rfm8 | rfm9 | rfm10 | rfm11 | rfm12 | demog_genf | demog_genm | account |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 0 | 1.0 | X | A | NaN | NaN | 0.0 | 24.0 | 7000.0 | 57600.0 | 52106.0 | ... | 22.0 | 4.0 | 6.0 | 5.0 | 20.0 | 9.0 | 92.0 | 0.0 | 1.0 | 100000001 |
| 1 | 1.0 | X | A | 2.0 | NaN | 0.0 | 24.0 | 7000.0 | 57587.0 | 52106.0 | ... | 22.0 | 4.0 | 6.0 | 5.0 | 20.0 | 9.0 | 92.0 | 0.0 | 1.0 | 100000002 |
| 2 | 1.0 | X | A | 2.0 | NaN | 0.0 | 0.0 | 15000.0 | 44167.0 | 42422.0 | ... | 16.0 | 3.0 | 8.0 | 16.0 | 27.0 | 11.0 | 91.0 | 0.0 | 1.0 | 100000003 |
| 3 | 0.0 | X | A | 0.0 | 68.0 | 0.0 | 32.0 | NaN | 90587.0 | 59785.0 | ... | 21.0 | 2.0 | 7.0 | 15.0 | 19.0 | 9.0 | 123.0 | 1.0 | 0.0 | 100000004 |
| 4 | 0.0 | X | A | 0.0 | NaN | 0.0 | 0.0 | NaN | 100313.0 | NaN | ... | 38.0 | 5.0 | 19.0 | 24.0 | 13.0 | 6.0 | 128.0 | 1.0 | 0.0 | 100000005 |


```
tbl.head(10)
```

とすれば10行の結果が返ってきます。

## テーブル情報を確認する

テーブルの型やどれくらいのデータがあるかと言った情報は `tbl.info()` で取得できます。

```
N   Miss    Type
b_tgt            1060038  False  double
cat_input1       1060038  False    char
cat_input2       1060038  False    char
cnt_tgt          1060037   True  double
demog_age         793177   True  double
demog_ho         1060038  False  double
  :
demog_genf       1060038  False  double
demog_genm       1060038  False  double
account          1060038  False    char
dtypes: char(3), double(22)
data size: 220487904
vardata size: 0
memory usage: 2394080
```

----

ディープラーニングを使ってデータを解析していく際にはデータを確認しながらステップバイステップで行っていくかと思います。テーブルの情報を確認する際には上記を参考にしてください。
[spacemacs] 使ったショートカット一覧 （随時更新）

* `SPC t w`: whitespaceの表示非表示切り替え
* `SPC f s (:w)`: ファイル保存
* `SPC m x x`: mainパッケージで"go run"を実行
* `SPC w /`, `SPC w v`: 画面を縦に分割
* `SPC w -`, `SPC w s`: 画面を横に分割
* `SPC w d`: フォーカスのあたっているウィンドウを閉じる
* `SPC f e d`: `.spacemacs`を開く
* `SPC f e R`: 設定ファイルの反映

## NeoTree

* `s`: 隠しファイルの表示非表示切り替え
* `gr`: リフレッシュ
CakePHP入門（２） 〜ファイルの作成〜

（１）の続きです。マイグレーションファイル及びMVCファイルを作成する方法を書いていきます。
エディタから手動で作成しても良いのですが、コマンドで作成する方法も書き留めておきます。

# マイグレーションファイル
例えばUserテーブルを作るとき以下のようになります。

```
$ bin/cake bake migration CreateUsers email:string password:string created modified
$ bin/cake migrations migrate
```

マイグレーションのステータスを確認するには、

```
$ bin/cake migrations status
```

適用したマイグレーションを元に戻して、マイグレーション実行前のDB状態に戻したい（ロールバックしたい）場合は、

```
$ bin/cake migrations rollback
```

また、すでに作成済みのDBからマイグレーションファイルを作成したい場合は、

```
$ bin/cake bake migration_snapshot Initial
```

と入力すればOKです。

## 補足

カラムを追加したい時には、

```
bin/cake bake migration AddNameToUsers name:string
```

とすると、Usersテーブルにnameというカラムが追加されます。

逆に、カラムを削除したい時には、

```
bin/cake bake migration RemoveNameFromUsers name
```

と入力すれば、Usersテーブルからnameカラムを削除できます。

# MVCファイル
モデルファイルの作成は、

```
$ bin/cake bake model Users
```

コントローラーファイルは、

```
$ bin/cake bake controller Users
```

ビューファイルは、

```
$ bin/cake bake template Users
```

としてあげれば、それぞれ、

- src/Model/Table/UsersTable.php
- src/Controller/UsersController.php
- src/Template/Users

が作成されます。

（２）は以上です。


CakePHP入門（１）〜初期設定〜
https://qiita.com/jinto/items/f4545dfb02160c424d48

CakePHP入門（３）〜レイアウト〜
https://qiita.com/jinto/items/c9138faf65e417616086

CakePHP入門（４）〜バリデーション〜　
https://qiita.com/jinto/items/ebdc8b673b5b663de7df
jsonをCLIで整形して見やすくする


# 環境
macOS 10.12.6

# 前提

例えばこのような整形されてない1行のjsonがあったとする

```json
{"_id":"5b741173880fca45bc090db0","index":0,"guid":"bf4b9d4b-4016-4ac3-aca0-5202b1f714cc","isActive":false,"balance":"$2,379.87","picture":"http://placehold.it/32x32","age":39,"eyeColor":"blue","name":"Wynn Ramos","gender":"male","company":"UNI","email":"wynnramos@uni.com","phone":"+1 (889) 522-3786","address":"518 Martense Street, Bloomington, New Jersey, 7440"}
```

自分の場合、Android StudioのLogcatに出力された1行のjsonを整形して確認したい事があった

AtomやVScodeのJson整形プラグインを使ってもいいが、CLIでやってみる。

# 方法1 jq

ターミナルで以下コマンドにjsonを貼り付けて実行

`jq . <<< 'ここにjson'`

実際にやってみる

```
jq . <<< '{"_id":"5b741173880fca45bc090db0","index":0,"guid":"bf4b9d4b-4016-4ac3-aca0-5202b1f714cc","isActive":false,"balance":"$2,379.87","picture":"http://placehold.it/32x32","age":39,"eyeColor":"blue","name":"Wynn Ramos","gender":"male","company":"UNI","email":"wynnramos@uni.com","phone":"+1 (889) 522-3786","address":"518 Martense Street, Bloomington, New Jersey, 7440"}'
```

このように整形されて表示される

```json
{
  "_id": "5b741173880fca45bc090db0",
  "index": 0,
  "guid": "bf4b9d4b-4016-4ac3-aca0-5202b1f714cc",
  "isActive": false,
  "balance": "$2,379.87",
  "picture": "http://placehold.it/32x32",
  "age": 39,
  "eyeColor": "blue",
  "name": "Wynn Ramos",
  "gender": "male",
  "company": "UNI",
  "email": "wynnramos@uni.com",
  "phone": "+1 (889) 522-3786",
  "address": "518 Martense Street, Bloomington, New Jersey, 7440"
}
```

出力結果もカラーリングされて見やすいのが素晴らしい

## <<<とは

bashのヒアストリングという手法らしい

単コマンドへ文字列を渡す事ができるようだ

# 方法2 python

macなら最初からpythonが入ってるしね

`echo 'ここにjson' | python -m json.tool`

```
echo '{"_id":"5b741173880fca45bc090db0","index":0,"guid":"bf4b9d4b-4016-4ac3-aca0-5202b1f714cc","isActive":false,"balance":"$2,379.87","picture":"http://placehold.it/32x32","age":39,"eyeColor":"blue","name":"Wynn Ramos","gender":"male","company":"UNI","email":"wynnramos@uni.com","phone":"+1 (889) 522-3786","address":"518 Martense Street, Bloomington, New Jersey, 7440"}' | python -m json.tool
{
    "_id": "5b741173880fca45bc090db0",
    "index": 0,
    "guid": "bf4b9d4b-4016-4ac3-aca0-5202b1f714cc",
    "isActive": false,
    "balance": "$2,379.87",
    "picture": "http://placehold.it/32x32",
    "age": 39,
    "eyeColor": "blue",
    "name": "Wynn Ramos",
    "gender": "male",
    "company": "UNI",
    "email": "wynnramos@uni.com",
    "phone": "+1 (889) 522-3786",
    "address": "518 Martense Street,
```

# 備考
How can I pretty-print JSON in a (Unix) shell script? - Stack Overflow https://stackoverflow.com/questions/352098/how-can-i-pretty-print-json-in-a-unix-shell-script

JSON Generator – Tool for generating random data https://www.json-generator.com/
AWSの学習に使えそうなサイト

■Qiita
https://qiita.com/search?q=AWS

■ナレコムAWSレシピ
https://recipe.kc-cloud.jp

■connpass
https://connpass.com/

■AWS LOFT TOKYO
https://aws.amazon.com/jp/start-ups/loft/tokyo/

■AWS
https://dev.classmethod.jp/category/cloud/aws/

■手を動かしながら2週間で学ぶ AWS 基本から応用まで
https://www.udemy.com/aws-14days/

■AWS クラウドサービス活用資料集
https://aws.amazon.com/jp/aws-jp-introduction/

https://saikyouse.com/aws-cloud-practitioner-review/
Backlogの課題のテンプレートをもう少し便利にしてみる


ついに待ちわびた[課題のテンプレート](https://backlog.com/ja/help/usersguide/issue/userguide4187/)が実装されていました！！！
（いつ実装されたんだろう）

[課題のテンプレートのサンプル集](https://backlog.com/ja/help/usersguide/issue/userguide4193/)から引用

```
## バグの概要
## 再現方法
(再現手順、実際に行った手順を書きます。)

## 期待した結果
(本来ならこう振る舞うべきという内容)

## 実際の結果
(不具合の内容、表示崩れ等であれば画面のスクリーンショットを添付ファイルとして追加してください)
```

## 不便な点
とても便利になりましたが、ちょっとだけ不便な点があります。
上記のサンプルだと`(再現手順、実際に行った手順を書きます。)`などが表示されてしまいます。
消すのも面倒です。

## コメントアウトする
HTMLのコメントアウトが使用できるので表示されないようにしましょう。（Backlogで使えること初めて知りました）

```
## バグの概要
## 再現方法
<!--
(再現手順、実際に行った手順を書きます。)
-->

## 期待した結果
<!--
(本来ならこう振る舞うべきという内容)
-->

## 実際の結果
<!--
(不具合の内容、表示崩れ等であれば画面のスクリーンショットを添付ファイルとして追加してください)
-->
```

ほんとにちょっとしたことですが消さなくてもよくなり非常に便利ですね！
SESAMEスマートロックで開閉するトリガーまとめ

# QrioでできてSESAMEでできないこと
先日のAmazonのPrimeDayで[SESAME](https://jp.candyhouse.co/)が安くなっていたので購入しました。
その際、類似商品の[Qrio](https://qrio.me/smartlock/)とどっちを買うか迷ったのですが、APIを公開しているSESAMEを選びました。

Qrioの新型では、QrioKeyという専用のリモコンがオプションで発売予定だそうで、それがSESAMEでも出来ればと思ったのが、SESAMEを動作させるためのトリガーを色々考えてみようと思ったきっかけです。

# SESAMEのトリガーとして使える物
以下に自分が試してみたトリガー一覧をおススメ度(min:1～max:5)と共に列挙します。

## スマホ(動作環境: Android、huawei p10lite)
### 公式アプリ
おススメ度:3
SESAME公式が出してる公式アプリです。
アプリ起動後から、約5秒～10秒ほど操作が出来るまで時間がかかる。

### IFTTT(ボタン)
おススメ度:4
スマホにIFTTTのボタンウィジェットを作って、IFTTT経由で動作させる方法。
スマホのロック解除時間＋5～10秒程で開けられる。スマホを指紋認証などですぐにロックが解除できる人にはおススメの方法。

### IFTTT(GPS)
おススメ度:2
IFTTTのGPS機能を使って、動作させる方法。
使えなくもないが、開錠・施錠をした瞬間はドアから距離が離れているため、鍵の状態を確かめられないのがネック。
うまく動作しない事もしばしばある。

### SESAME公式GPS
おススメ度:1
SESAME公式のGPSアンロック・ロック機能。
動作の通知が来ない為、IFTTTのほうが使い勝手が良い。

## スマートウォッチ(動作環境: [Ticwatch E](http://www.ticwatchthailand.com/ticwatchse))
### google assistant
おススメ度:5
Ticwatch EにはGoogleAssistantが搭載されているため、
IFTTTで「this」をgoogle assistant、「that」をSESAME公式サービスに設定し動作させる。
処理時間は3～5秒ぐらい。

### IFTTT(ボタン)
おススメ度:3
IFTTTのボタンをスマートウオッチから押下する方法。
IFTTTのボタンの画面を出すのに時間がかかるため、上記Google Assistantを使うほうが良い。

## その他デバイス
### 動作環境:[Qmote S](https://qblinks.com/ja)
~~おススメ度:5
Qmote S というデバイス(Amazonで約4000円程度)を用いて、IFTTT経由で動作させる方法。
500円玉より一回り大きいほどのデバイスで、スマホカバーにストラップ代わりにつける。
物理ボタン押下のワンアクションのみで、開閉動作ができる。自分が試した中ではこれが一番使いやすかった。
処理時間は3～5秒程度。さらに処理時間を早めたいなら、IFTTTのthat側をwebhookにして、SESAMEのAPIを叩けば早くなるかもしれない。
(補足:Qmotesのhttpリクエスト機能は、カスタムヘッダーを指定できないため、SESAMEのAPIを叩くことができなかった。IFTTTのwebhook機能を使ってAPIを叩いてください。)~~

(追記)2019年ごろに、QmoteSのアプリからIftttが直接呼べなくなったので、Iftttのwebhooksを経由する必要あり

APIによるwebhooksの参考サイト:
[SESAMEスマートロックのAPIを使って、1ドア2ロックを1タップでコントロール](https://qiita.com/noirbreath/items/84288ec06c3e181dc9a8)

### 動作環境:[リモートシャッター](https://www.amazon.co.jp/Bluetooth-%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3%E7%94%A8-%E3%82%AB%E3%83%A1%E3%83%A9%E3%83%AA%E3%83%A2%E3%82%B3%E3%83%B3-Shutter-ABS3-BLK/dp/B00JX70WK4)　＋　ラズパイ等linuxサーバー
おススメ度:3
リモートシャッターを押した時に、ラズパイ等linuxサーバーから、
SESAMEのAPI呼び出しで開閉を行う方法。
リモートシャッターがゴツイため、スマホのストラップ等にするには
無理があった。上記Qmote Sのほうが使い勝手が良かった。

参考サイト:
[わずか300円でIoTボタンを作る方法](https://qiita.com/vimyum/items/8b7548ca8cf45383c5b0)

## その他試していない方法
### SESAME公式ノック機能(iOSのみ)
SESAME公式のノック機能で動作する方法。iPhoneを持っていないため、未確認。

### Apple Watch
Apple WatchのSESAME公式アプリから動作させる方法。
試していないが、これもアプリを起動させるに時間がかかるのではないだろうか。
Apple WatchのsiriからIFTTT経由で動作させたほうが早いかもしれない。
【Swift】Document Based Application で保存するデータの拡張子の指定【Cocoa】


macOSアプリを作るにあたり、アプリ独自の拡張子を指定する方法を記載します。

Document Based Application でカスタムクラスを保存したいときなど、アプリ独自の拡張子を指定したい場合があります。
Xcodeでプロジェクトを作成する際も指定できますが、あとあと変更したい場合もあるので、知っておくと便利です。

`TARGETS` > `Info` > `Document Types` の`Extension` に指定します。

<img width="849" alt="スクリーンショット 2018-08-15 20.19.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/124577/b1445bab-d3de-9319-dc24-16b0b4d3d83a.png">

これで、コードで指定する必要は無く、自動的にここで指定した拡張子で保存されます。
ちょっと困ったときの Git コマンド

いつもではないけれど、ちょっと困ったときに使いたくなる Git コマンドをまとめました。
「使い方は分かっているのだけど、よくコマンドを忘れてしまうんだよな」という方向けです。

## git revert

### コミットを相殺するコミットを打ちたい
```shell
$ git revert [commit_id]
```

### マージコミットを相殺するコミットを打ちたい
```shell
$ git revert -m [1|2] [commit_id]
```

## git reset

### コミットIDまで戻したい
```shell
$ git reset --hard [commit_id]
```

### ローカルブランチの変更履歴をリモートブランチの変更履歴で上書きしたい
```shell
$ git checkout [branch_name]
$ git fetch
$ git reset --hard origin/[branch_name]
```

## git log

### 短く表示したい、コミットメッセージとコミットIDだけ知りたい
```shell
$ git log --oneline
```

### 変更したファイルと差分のある行数を表示したい
```shell
$ git log --stat
```

### コードの差分を表示したい
```shell
$ git log -p
```

### コミットメッセージで絞り込みたい
```shell
$ git log --grep [commit_message]
```

### コードの差分に含むキーワードで絞り込みたい
```shell
$ git log -S [keyword]
```

## git grep

### リポジトリ内のファイルをキーワードで検索したい
```shell
$ git grep [keyword]
```

### リポジトリ内のファイルをパターンで検索したい
```shell
$ git grep -E "[regexp]"
```

## git branch

### ブランチをリネームしたい
```shell
$ git branch -M [old_branch_name] [new_branch_name]
```

### マージ済のブランチを削除したい
```shell
$ git branch -d [branch_name]
```

### マージ済に関わらずブランチを削除したい
```shell
$ git branch -D [branch_name]
```

### master と develop 以外のマージ済のブランチをすべて削除したい
```shell
$ git branch --merged | grep -vE '^\*|master$|develop$' | xargs -I % git branch -d %
```

### マージされていないブランチを表示したい
```shell
$ git branch --no-merged
```

## man git

### マニュアルを読みたい
```shell
$ man git
$ man git-[subcommand]
```
vue-c3 でグラフをぐいぐい描く

## 何でグラフを描くか

グラフを何で描くかという問題はみなさんそこそこ悩まれていると思います。

### 生 SVG でフルスクラッチ

次の記事は Vue + 生の SVG で実装しています。([Vue.jsでD3.jsを使わずにグラフを実装する](https://qiita.com/haribote/items/0bbf6cf5720b078039ff))

SVG を使う利点については「カスタマイズのしやすさと、D3 といったライブラリによって DOM が直接変更されないので、テストもしやすい」と述べられています。

確かに SVG で実装するのはこの記事を参照するとそこまで難しくなく(また記事がとても丁寧なので難しい部分もうまくクリアーできます)、どんなに複雑なグラフでも実装できるという意味で、フロントエンドエンジニアであれば、一度はチャレンジする価値があると思いました。

### C3.js + Vue = vue-c3

![Screen Shot 2018-08-15 at 7.32.08 PM.png](https://qiita-image-store.s3.amazonaws.com/0/240885/e5195a5b-82f9-8b7e-a3d1-a0889a0aca57.png)

https://c3js.org/

C3 は D3 をベースにしたグラフを描画するライブラリで、D3 よりも書くコードが少なくグラフを実装できます。一般的なグラフであれば、これで間に合いそうです。

この C3 を Vue のコンポーンネントとして組み込める様になっているのが vue-c3 です。

https://www.npmjs.com/package/vue-c3

これはなかなかいい感じらしいです。確かに使ってみた感じ、取っ散らからない気がします。

## 実装

(CSS の読み込みについてはこちらの記事が参考になりました。ありがとうございます。https://qiita.com/maunamoana/items/e5da5e338a45a35524b8)

次のコードが実装結果です。
https://codesandbox.io/s/w026o6xy7l?module=%2Fsrc%2FApp.vue

ポイントは
- メインのコンポーネントは `<vue-c3/>`
- これに handler という名前で渡す
- 渡すのは `new Vue()` で生成したもの
- これに対して、`this.handler.$emit('dispatch', chart => chart.load())` という形で C3 の API を実行する
- 実行する API、その際に渡す値等は C3 のドキュメントを参照する

### 

```vue
<template>
  <div>
    <vue-c3 :handler="handler"></vue-c3>
  </div>
</template>
<script>
// hander のために必要
import Vue from 'vue'

// メインのコンポーネント
import VueC3 from 'vue-c3'

// CSS を読み込む
import 'c3/c3.min.css'

export default {
  name: 'demo',
  components: {
    VueC3
  },
  data: () => ({
    // vue-c3 コンポーネントを操作するためのもの
    handler: new Vue(),
  })
}
</script>
```

```js
this.handler.$emit('dispatch', chart => {
   const options = {...} // もろもろ作る
   chart.load(options)
})
```

## `this.handler.$emit('init', this.options)`
最初はこれを実行してグラフを作成する。おそらく C3 のほうでいうところの Generate を実行している。(https://c3js.org/gettingstarted.html#generate)

特にグラフを更新したりする必要がなければ、この際に渡す option だけうまく指定してあげれば、綺麗がグラフが作成される。

## `this.handler.$emit('dispatch', chart => chart.load(options))`
C3 の各種 API を叩く際には dispatch を emit する。これで全ての API が叩ける。

例えばデータを更新したければ load 用の API を叩けばいい。https://c3js.org/gettingstarted.html#api

## tooltip
書くデータの点にマウスオーバーした際に表示されるものが tooltip だ。これの内容も設定で変更できる。

![Screen Shot 2018-08-15 at 8.02.08 PM.png](https://qiita-image-store.s3.amazonaws.com/0/240885/2879581e-515f-133e-b2e5-6e3456079581.png)

今回は「億円」や「期」という単位をつけている。このような単純な処理だけではなく、format を使えば、様々処理ができる。

## まとめ

そこそこ早くとっちらかりもしないので、vue-c3 よい。
基底クラスのプロパティを呼ぶ方法

派生クラスでオーバーライドした基底クラスのメソッドをコールする方法は、次のように基底クラス内に定義された関数 (Unbound method) に派生クラスのオブジェクトを第一引数として渡すことで達成できます。

```python
class Foo:

    def x(self):
        print("I'm Foo.")

class Bar(Foo):
    
    def x(self):
        Foo.x(self)    # Unbound method を呼ぶ
```

実行結果は、

    >>> b = Bar()
    >>> b.x()
    I'm Foo.

となります。同様に、派生クラスでオーバーライドした基底クラスのプロパティをコールするには、どうすればよいでしょうか。次がそのサンプルコードです。

```python
class Foo:
    
    def __init__(self):
        self._y = "I'm Foo.y."

    def x(self):
        print("I'm Foo.")
        
    @property
    def y(self):
        return self._y
    
    @y.setter
    def y(self, value):
        self._y = value
        

class Bar(Foo):
    
    def x(self):
        Foo.x(self)

    @property
    def y(self):
        return Foo.y.fget(self)
    
    @y.setter
    def y(self, value):
        Foo.y.fset(self, value)
        self._y += "I'm also Bar.y." 
```

`Bar`クラス内での`Foo.y`というのは`property`オブジェクトです。`property`オブジェクトについては参考1に説明があります。`property`オブジェクトは、`fget`と`fset`というメンバーを持っており、これらがそれぞれ元のgetter関数、setter関数を保持しています。ですので、基底クラスのプロパティ`Foo.y`のメンバー、`Foo.y.fget`と`Bar.y.fset`を呼ぶのが正解です。

実行してみます。

    >>> b = Bar()
    >>> b.y
    "I'm Foo.y."
    >>> b.y = "and "
    >>> b.y
    "and I'm also Bar.y."

参考1: [Pythonのプロパティ記述はよく見るとおかしい（さらによく考えればおかしくない）](https://qiita.com/junjis0203/items/b8ed7b807355a0ddd63a)

参考2: https://stackoverflow.com/questions/1021464/how-to-call-a-property-of-the-base-class-if-this-property-is-being-overwritten-i
Vim — ggとG のキーストロークを絵で覚える ( G は重力のG )

- `gg` - ファイルの最上段に移動
- `G` - ファイルの最下段に移動

## 絵

これだ。

小文字のgを2個よりも、大文字のGを1個の方が重たい。

![image](https://user-images.githubusercontent.com/13635059/44145226-b65bab24-a0c5-11e8-89b3-195c17f2f0b4.png)


## Links

- [Gist](https://gist.github.com/YumaInaura/cfd31df17b33c01147b2ad46565ccba1)
- [Medium(imported)](https://medium.com/supersonic-generation/vim-remember-gg-and-g-keystroke-with-gravitys-g-image-move-to-top-and-move-to-bottom-4e0524f94b7d)








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Java ArrayListについて

# はじめに
コレクションの学習についてまとめてみました。

今回は<b>ArrayList</b>についてです。

##ArrayListの使い方

* ArrayListの宣言と確保

```
ArrayList< ~ > 変数名 = new ArrayList<>();

```
※　〜の部分には<b>ArrayList</b>に格納するインスタンス型名を指定する。

* 要素の追加、取得、削除、調査

| 戻り値 | メソッド | 意味 |
|:-----------|------------:|:------------:|
| boolean   | add(~)   | リストの最後に要素を追加する。   |
| void   | add(int, ~)   | リストのint番目に要素を挿入する。   |
| ~   | set(int, ~)   | リストのint番目の要素を上書きする。   |
| ~   | get(int)   | int番目の要素を取り出す。   |
| int   | size()   | 格納されている要素数を返す。   |
| ~   | remove(int)   | int番目の要素を削除する。   |

※　remove()メソッドを使うと、削除された要素の後ろの全ての要素は1つずつ前へ詰める。

## サンプルコード

```java:Main.java

import java.util.ArrayList;  //解説①

public class Main {

	public static void main(String[] args) {
		
        ArrayList<String> names = new ArrayList<>();  //解説②

		names.add("サトシ");  //namesに要素を格納 - 0から始まる。
		names.add("シゲル");  // １
		names.add("タケシ");  // 2

		System.out.println(names.get(0));

		names.set(0, "カスミ");  //namesの0の要素を"カスミ"に上書きする。

		System.out.println(names.get(0));

		System.out.println(names.size());  // 要素数を出力

		names.remove(1);  // 指定位置の要素を削除

		System.out.println(names.get(1));

	}

}

```

実行結果

```

サトシ
カスミ
3
タケシ

```

##解説

① import文を記述する。

② <>記号（ジェネリクス）を使い、格納する型を指定する。

* 注意点

インスタンスでないものは格納できない。（基本データ型の情報を格納できない。）

(例) int型の情報を格納する場合は、<b>Integer</b>インスタンスに変換すれば格納できる。

```
(×) ArrayList<int>  (○) ArrayList<Integer>

```
##最後に
これからもコレクションのことについてまとめていきたいと思います。
SymfonyでN+1問題を解決する


会員情報のEntity `Customer` と都道府県のEntity `Pref` がManyToOneの関係にあるとする。

例えば以下のようなコードを書くとlazyloadでクエリが `N+1` 回実行されてしまう。

```php
$qb = $this->entityManager->createQueryBuilder();

$Customers = $qb
    ->from(Customer::class, 'c')
    ->select('c')
    ->getQuery()
    ->getResult();

foreach ($Customers as $Customer) {
    dump($Customer->getPref()->getName());
}
```

この場合は明示的にJoinしてやるとクエリの数が減らせる。
`addSelect()` で指定してやることであらかじめJoinしたデータを取得してくれる。

```php
$qb = $this->entityManager->createQueryBuilder();

$Customers = $qb
    ->from(Customer::class, 'c')
    ->select('c')
    ->addSelect('p')// この行を追加
    ->leftJoin('c.Pref', 'p')// この行を追加
    ->getQuery()
    ->getResult();

foreach ($Customers as $Customer) {
    dump($Customer->getPref()->getName());
}
```
yum provides で、「あのコマンドどのパッケージ入れるんだっけ？」を解決する

サーバのセットアップを行うとき、よく使うコマンドでも
どのパッケージをインストールすればよかったっけ？
ということはよくあります。

いつもググって調べてたのですけど、yumコマンドで探せるようです。

```bash
$ yum provides [探したいもの]
```


例）

```bash
$ yum provides dig
読み込んだプラグイン:fastestmirror
Loading mirror speeds from cached hostfile
 * base: repos.lax.quadranet.com
 * epel: mirrors.cat.pdx.edu
 * extras: mirror.keystealth.org
 * updates: mirror.hmc.edu
32:bind-utils-9.9.4-61.el7.x86_64 : Utilities for querying DNS name servers
リポジトリー        : base
一致          :
ファイル名    : /usr/bin/dig



32:bind-utils-9.9.4-61.el7.x86_64 : Utilities for querying DNS name servers
リポジトリー        : @base
一致          :
ファイル名    : /usr/bin/dig

```

ということで、digは bind-utils を入れればいいことがわかります。

メチャクチャ便利ですね！
是非活用しましょう。


# おまけ

逆に、**「このコマンドってどのパッケージから入れたっけ？」**は

```bash
$ rpm -qf /usr/bin/dig
bind-utils-9.9.4-61.el7.x86_64
```

です。

ついでに、**「このパッケージって、何が入ってるの？」**は

```bash
$ rpm -ql bind-utils
/etc/trusted-key.key
/usr/bin/dig
/usr/bin/host
/usr/bin/nslookup
/usr/bin/nsupdate
/usr/share/man/man1/dig.1.gz
/usr/share/man/man1/host.1.gz
/usr/share/man/man1/nslookup.1.gz
/usr/share/man/man1/nsupdate.1.gz
```

です。
「attr()」と「prop()」の違いは？

samuraiの「30分で理解！jQueryのattr()で属性操作を極めるコツ！
」を引用したものです。
https://www.sejuku.net/blog/37402

##「attr()」と「prop()」の共通項は？
attrもpropも属性を取得するものです。

##「attr()」と「prop()」の違いは？
```
<body>
<button class= "btn1">ボタン1</button>
<button class= "btn2" disabled>ボタン2</button>

<script>
var result1 = $('.btn1').attr('disabled');
var result2 = $('.btn2').attr('disabled');

var result3 = $('.btn1').prop('disabled');
var result4 = $('.btn2').prop('disabled');

console.log(result1);
console.log(result2);
console.log(result3);
console.log(result4);
</script>
</body>

=>undefined
=>disabled
=>false
=>true
```
「attr（）」では、「undefined」になる
→属性が付与されているかどうか
「prop（）」では、falseになる
→現在の状態の確認
[Azure] FunctionAppでログ出力されない場合、context.done()が非同期実行されていないか注意

タイトルがほぼ情報の全てですが、気づくまでに時間がかかったのでメモ。

Azure functionApp (Javascript)でログ出力されない場合、context.done()が非同期実行されてcontext.log()より先になっていないか注意が必要です。

以下サンプルでは、時間のかかる処理をsetTimeout()で代替していますが、functionApp作成時のテンプレートを元にこんなコードを書いてしまうと・・・

```javascript
module.exports = function (context, myTimer) {
    let timeStamp = new Date().toISOString();
    context.log('JavaScript timer trigger function ran!: ', timeStamp);   
    
    for (let i = 0; i < 12; i++) {
        setTimeout(function() {
            context.log('[Info] Log output test: ', i);
        }, 1000 * 10 * i);
    }
    context.done();
};
```

ログが途中で途切れてしまい、悩むことになります。サンプルだと"Function completed"が先に出ているところで気づきそうなものですが、実際のコードで色々ログを出していると気づきにくいですね。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172826/96c45a48-dc3c-b9a2-762f-f2360f445df1.png)


非同期処理の影響であることは、context.done()のところを修正すると確認できます。

```javascript
module.exports = function (context, myTimer) {
    let timeStamp = new Date().toISOString();
    context.log('JavaScript timer trigger function ran!: ', timeStamp);   
    
    for (let i = 0; i < 12; i++) {
        setTimeout(function() {
            context.log('[Info] Log output test: ', i);
        }, 1000 * 10 * i);
    }

    setTimeout(function() {
        context.done();
    }, 1000 * 10 * 12);
};
```

こちらのコードであれば、期待通りにログ出力されることが確認できます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172826/ad16b911-5b5f-0936-3197-a042db398cff.png)

もちろん実際のコードでは事前に待ち時間が分かることはなく、context.done()の実行タイミングで悩むわけですが、注意事項は以上になります。
リンクされている画像を一括ダウンロードするのに超便利なツール5選

![Bulk-Download.jpg](https://qiita-image-store.s3.amazonaws.com/0/262932/eab18054-56a8-e9be-78cb-4d66b1143620.jpeg)

皆さんは、大量の画像を一気にダウンロードしたい！って時はありませんか？好きなキャラとかアイドルの写真をまとめて保存したい！でも、一枚一枚やるのはかなり面倒臭い・・ ！って状況がありますよね。私も画像の一括ダウンロードに関する多くのお問い合わせを受けました。

私たちはできる限り機能の改善に努力していますが、今のところ[Octoparse](https://www.octoparse.jp/)はWEB上に保存されているURLとして画像を抽出することができます。そこで今回は、リンクされている画像を一括ダウンロードツールを5選ご紹介します。リンクから画像をダウンロードする場合は、必ずこの記事をご覧ください。（画像のURLを抽出する方法がわからない場合は、この[チュートリアル](http://jp.octoparse.com/tutorial/extract-data)をご覧ください。）

 

#1. Tab Save
![octoparse-imges-bulk-download-1.png](https://qiita-image-store.s3.amazonaws.com/0/262932/255900e3-e97a-624b-9f6e-f93d393eb320.png)


無料：✓はい

平均評価：★★★★

アプリケーションタイプ：Chrome拡張機能

製品レビュー：これは私が使っている画像ダウンローダです。簡単なクリックだけでウィンドウに表示されているファイルを保存することができます。したがって、画像のURLを抽出したら、URLを入力して、すぐに画像をダウンロードできます。

 

#2. Bulk Download Images(ZIG)
![octoparse-imges-bulk-download-2.png](https://qiita-image-store.s3.amazonaws.com/0/262932/701d5b45-df05-1727-71f6-70ecdaab1348.png)


無料：✓はい

平均評価：★★★½

アプリケーションタイプ：Chrome拡張機能

製品のレビュー：オプションルールがあるサムネイルではなく、ビッグサイズの画像を大量にダウンロードする場合に使用できます。しかし、一部のユーザーはそれがあまりにも複雑で使いにくいと感じています。

 

#3. Image Downloader
![octoparse-imges-bulk-download-3.png](https://qiita-image-store.s3.amazonaws.com/0/262932/a31ba74b-67bf-10ae-3b6f-b50161d4f024.png)

 

無料：✓はい

平均評価：★★★½

アプリケーションタイプ：Chrome拡張機能

製品レビュー：Webページから画像を一括ダウンロードする必要がある場合は、この拡張機能を使って、ページに含まれる画像をダウンロードできます。多くのユーザーは、それが強力で使いやすいと感じています。しかし、それは指定されたフォルダにダウンロードできないようです。使ってみます。

 

#4. Image Downloader Plus
![octoparse-imges-bulk-download-4.png](https://qiita-image-store.s3.amazonaws.com/0/262932/a496cff8-8187-618e-4bc0-303de4c772a5.png)

 

無料：✓はい

平均評価：★★★

アプリケーションタイプ：Chrome拡張機能

それを使ってWEBから画像をダウンロードとスクレイピングすることができます。選択した画像を特定のフォルダにダウンロードしてGoogleドライブにアップロードすることができます。しかし、一部のユーザーは、このツールがファイル名を変更したり、画像のサイズを使用不能なレベルに変更したりすることあるのを見つけました。

 

#5. Bulk Image Downloader
![octoparse-imges-bulk-download-5.png](https://qiita-image-store.s3.amazonaws.com/0/262932/6a6ba068-cb21-536c-0011-3737adf04766.png)

 

無料：✓はい

平均評価：★★★

アプリケーションタイプ：Chrome拡張機能

製品のレビュー：1または複数のWebページから画像を一括ダウンロードすることができます。それは、複数のタブから画像の一括ダウンロードをサポートしています。

 

 
#まとめ
画像数が多ければ拡張機能を使ったほうが効率的ですね。ぜひ試してみてはいかがでしょうか。また画像を保存するときはライセンス・著作権などには十分注意しましょう。


それでは、今日はこの辺りで。
Dockerに入門してみました。入口編。

# Dockerとは
"Linux"の仮想環境ツールである

# Dockerの仕組み
元々Linuxが持っていた機能を組み合わせたものであり、

・仮想化はLinuxのハンドルとかの様々なIDを名前空間で独立させることで行っている
・ファイルシステムもルートディレクトリを移動させるコマンド(chroot)を使って独立させている
・cpu使用率やメモリ量もLinuxのcgroupsという機能を使って割り当てることが出来る。

要するに、プロセスがメモリ空間を分離されてお互いに非干渉であることが保証されて動いているように、
それ以外のファイルシステムなどの要素についてもまるで別PCで動いているかのレベルで空間分離させている。

なので実は仮想化というよりもコンテナ化である。

# 使い方
・コンテナ環境を定義した"Dockerfile"を作成する
・Dockerfileをビルドしてimageを作成し、imageから docker run でcontainerを起動する。
　→Linuxコマンドに例えるなら、ファイルシステム上に格納されている実行ファイルがimageで、
　　それを実行してメモリ上で動いているプロセスがcontainerに対応する。
・imageは、ベースとなるimageを元に必要な処理を追加記載して作成する。
・DockerHubというサービスに様々なimageが登録されている