OmniAICreator/Qiita-1.07M huggingface dataset:
Outlook.comにメールが届いたらGoogle homeがしゃべるようにしてみた

# はじめに
- [以前の記事](https://qiita.com/ezmscrap/items/7a7f555faf7371a56e9d)で、「Gmailが届いたらGoogle homeがしゃべるようにしてみた」のだが、実はOutlook.comにもメールが届いており、こちらも届いたらGoogle homeに教えてもらいたくなった
- ところが、[IFTTT](https://ifttt.com/)を眺めてみても、Office365Outlookは見つかっても、Outlook.comは見つからなかった
- 途方に暮れていたところ、[Microsoft flow](https://japan.flow.microsoft.com/ja-jp/)と言う同種のツールがあり、そちらだとOutlook.comもトリガーに出来ることをしった
- そこで、Microsoft flowを使って、かつ、以前に作ったからくりに乗っかって楽をして、Outlook.comにメールが届いたらGoogle homeがしゃべるようにしてみた

# 前提
- Windows 10 pro バージョン1803
- [以前の記事](https://qiita.com/ezmscrap/items/7a7f555faf7371a56e9d)にしたがって、Gmailが届いたら、Google homeがしゃべってくれるようになっていること

# 概要
- 大雑把な流れ

1. Microsoft flowで、Outlook.comの新着タイトルと送り主をGoogle Drive Spreadsheetに書き込む
2. cronで毎分起動するnode.jpツールで Google Drive Spreadsheetから情報を取得する
3. 取得した新着タイトルと送り主を、「Google home喋らせサーバ」に送る

- そう、[以前の記事](https://qiita.com/ezmscrap/items/7a7f555faf7371a56e9d)と1以外は同じです。

# Microsoft flowで、Outlook.comの新着タイトルと送り主をGoogle Drive Spreadsheetに書き込む

- [Microsoft flow](https://japan.flow.microsoft.com/ja-jp/)にアクセスしてサインインする
- 「マイフロー」をクリック
- 「一から作成」をクリック
- 「多数のコネクタやトリガーを検索する」をクリック
- 「outlook.com」をクリック
- 「Outlook.com - 新しいメールが届いたとき」をクリック
- フォルダ[Inbox]をクリックして「受信トレイ」を選択
- 「新しいステップ」をクリック
- 「アクションの追加」をクリック
- 「すべてのコネクタとアクションを検索する」をクリック
- 「google スプレッドシート」と入力(googleとスプレッドシートの間に半角スペースあり!!)
- 「Google スプレッドシート - 行の挿入」をクリック
- ファイル[ファイルを選択します」をクリック
- [GoogleDrive]-[IFTTT]-[Gmail]-[Any new email]を選択
- ワークシート[ワークシートを選択します]をクリック
- [シート1]を選択
- dateのフォームをクリックして、「動的なコンテンツの追加」をクリックして、「受信日時」を選択
- titleのフォームをクリックして、「動的なコンテンツの追加」をクリックして、「件名」を選択
- nameのフォームをクリックして、「動的なコンテンツの追加」をクリックして、「差出人」を選択
- emailのフォームにも「差出人」を設定してもしなくても良い(使わないから)
- 右上の「テスト」でテストしてみる
- テスト結果でエラーが出てなければ、右上の「保存」で保存（テストで、テスト＆保存を実行していたら、これは必要ない）

# もしも、「Gmailが届いたらGoogle homeがしゃべるようにしてみた」を設定していなかったら
- [以前の記事](https://qiita.com/ezmscrap/items/7a7f555faf7371a56e9d)の「IFTTTで、Gmailの新着タイトルと送り主をGoogle Drive Spreadsheetに書き込む」以外を設定する

# 注意！
- Microsoft flowは、無料ではひと月に750回までしかトリガーを発火させないようです
- すなわち、メール750通までです！
- これ、Gmailに転送設定してGmailにまとめて、Gmailに着信したらIFTTTで発火させて、Google homeに喋らせた方が良くないですか……

# おわりに
- これで、Outlook.comにメールが着信したらGoogle homeがしゃべってくれるはず
- Microsoft flowの日本語記事が少なかったけど、750回制限で納得した
- Gmailに転送したくないんだ！Outlook.comのまま、何とかしたいんだ！と言う方がいらっしゃれば、もしかしたら、参考になるかも
ちょっとだけ綺麗に検索枠をCSSで作る


ふと検索枠つくってみた。
prefixとかは入ってないけれど、そういうのはautoprefixerでやろう！

<img width="422" alt="スクリーンショット 2018-07-18 8.43.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/1088/8d7c0af7-bf4b-4939-b24e-6ff2522c6e62.png">

```html
<div>
    <div class='flex'>
        <input class='textInput' type="text" placeholder="" value="" autocomplete="off">
        <button type='button' class='option'>オプション</button>
        <input type='submit' value='検索' class="submit">
    </div>
</div>

```


```css



    .flex {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .textInput {
        width: 60%;
        height: 50px;
        margin: 10px 0 10px;
        padding: 5px 5px 5px 15px;
        font-size: 1.7em;
        color: #555;
        border: 2px solid #3182d9;
        border-radius: 1em;
    }

    .option {
        color: #fff;
        font-size: 1em;
        height: 50px;
        background: #3182d9;
        margin: 10px 0 10px -60px;
        padding: 10px;
        border-radius: 0 10px 10px 0;
        border: 2px solid #3182d9;

    }

    .submit {
        width: 90px;
        height: 50px;
        color: #fff;
        background: #5cb85c;
        background-origin: border-box;
        margin: 10px 5px;
        padding: 10px;
        padding-left: 25px;
        font-size: 1em;
        border: 2px solid #4cae4c;
        border-radius: 10px;
    }


```
列挙体に近い使い方を、文字列で


[列挙体に近い使い方を、文字列で](https://social.msdn.microsoft.com/Forums/ja-JP/b866e03a-2d94-44d5-8995-f8279d2885a4?forum=csharpgeneralja)


自分的にこの使い方がベストヒット


```csharp
    class CMessage
    {
        public string mes1 = "静岡県";
        public string mes2 = "鹿児島";
        public string mes3 = "北海道";

        public IEnumerable<string> Enumerate()
        {
            // イテレータ (反復子)
            yield return mes1;
            yield return mes2;
            yield return mes3;
        }
    }
```

### 使い方

```csharp
    class Program
    {
        static void Main(string[] args)
        {
            // 個々に表示する　 
            Console.WriteLine(CEN_FLG_YN.ARI);
            Console.WriteLine(CEN_FLG_YN.NASHI);

            // 連続表示する
            foreach (string s in CEN_FLG_YN.Enumerate())
            {
                Console.WriteLine(s);
            }

            // New()を使用するタイプ
            CMessage mes = new CMessage(); 
            foreach (string s in mes.Enumerate() )
            {
                Console.WriteLine(s);
            }
        }
    }
```
機械学習で株取引を半年してみた結果

## この記事の概要
- [ ] 150万円の原資を約7ヶ月半運用し、+33万円になりました
- [ ] システムの内部のロジックは秘密です(理由は後述) 
- [ ] よって単なる自慢です

## 結果

<img width="651" alt="スクリーンショット 2018-07-20 20.58.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/234396/0e1d6de4-65ea-3307-dff5-2a07ccdb3f53.png">


![投資結果.png](https://qiita-image-store.s3.amazonaws.com/0/234396/367bb5d7-e615-44f2-db1e-130c3cfcc504.png)

日経平均と連動する動きをしていますが、下がるときは小さく下げ、上がるときは大きく上がることでどんどん差が開いているのがわかると思います。
市場平均との差をグラフにすると直線を描き、これがシミュレーションと同じ傾きになりました。

## シミュレーションとの比較
事前のシミュレーション結果から、**「日経平均が横ばいであれば、月4万円稼げる」**という結論が得られていました。今回、約8ヶ月運用して+33万であるためシミュレーション通りということになります。
なぜ「４万円」という具体的な数字なのかというと、「自分の売買の影響が生じない範囲で」という制約をつけているためです。この制約があるため、原資を10倍にしたからといって月40万円稼げるようになるわけではありません。このように小さい収益機会を狙っているため、システムのロジックを公開できません。

## その他の面白い知見
### 再学習は必要がない
予測モデルは一昨年学習させたものを再学習せずずっと使いまわしています。去年のテスト運用でも結果を出しており、今年も以上のような結果が出ているため、一過性の流行を捉えているわけではないということが伺えます。市場には一般性のある構造があるのかもしれません。

### 自分の売買の影響
去年のテスト運用で一番戸惑った点でした。かなり大きな金額を突っ込んでやったため、最初の３ヶ月は驚くほど負けました。そこで今度がかなりの少額で運用した結果、今度はシミュレーション通りの勝率が出せました。そこで、最も最終利益が大きくなるちょうどいい点を過去の売買データから算出して、制約を作成しています。
これについては明かしていいと思うので、公表しますと、**「１日の出来高の0.02%」**の金額を上限にしています。出来高が10000万円の銘柄であれば、投入する金額は20万円までとなります。かなり厳しい制約だと思います。

## 可能性について
本モデルはディープラーニングは使用していませんし、データは古いですし、モデルにアラも目立ちます。
私生活が忙しく改良できていませんが、コーディング力も多少向上した今なら月8万円くらいのモデルを作れそうな気はしますが、何となくやる気にならないまま、ただ漫然とシステムに自動売買させています。
知っているとアレンジの幅が広がる知識まとめてみた

#ぶつかった時に処理を行いたい時

ぶつかった時に処理を行いたい場合は、

```
void OnTriggerEnter(Collider collider){
if (collider.CompareTag ("付けたTagの名前を入力")) {
～ここに行いたい処理を書く～
     }
}
```
行いたい処理の例
1．```Destroy (collider.gameObject);```そのObjectを消滅させる
2．```playerLife += 1;```playerのLifeを1足す
3．```player.transform.position = player.transform.position + new Vector3 (0, 10, 0);```playerの位置をy軸に10だけ移動させる


#何か押した時に処理を行いたい場合

何か押した時に処理を行いたい場合は、

```
	void Update () {
		if (Input.GetKey (押したいボタンを書く)) {
～ここに行いたい処理を書く```

これを使うと、

```
public float speed = 3.0f;

	void Update () {
		if (Input.GetKey ("up")) {
			transform.position += transform.forward * speed * Time.deltaTime;
		}
		if (Input.GetKey ("down")) {
			transform.position -= transform.forward * speed * Time.deltaTime;
		}
		if (Input.GetKey("right")) {
			transform.position += transform.right * speed * Time.deltaTime;
		}
		if (Input.GetKey ("left")) {
			transform.position -= transform.right * speed * Time.deltaTime;
		}
	}

これを動かしたいものにつけるだけで一応キャラクターが動きます。(動きなどをつける場合はもう少し作業が必要です)


#時間差で消える処理

時間差でObjectを消したい時、とても簡単な方法で設定することができます。

```Destroy(gameObject,1.0f); ```

gameObjectの後、1.0秒後に消える設定を書くだけで設定をすることができます。




#あとがき
とても基礎的なことを書き連ねましたが、これを使いこなすことができるようになることで、どんどんプログラミングの技術が上がっていくと思うので頑張っていきましょう。
TECH ACADEMYってどう??【Javaコース編】

#TECH ACADEMYってどう??【Javaコース編】

この記事はテックアカデミー Javaコース編の受講感想記事です。
他のコースを受けたことがないので、Javaコースに対する感想です、ということだけ強調です。

##受講の経緯
まずは僕のテックアカデミー受講までの経緯の話から。
僕はもともと組み込み系のプログラマーで、C言語で2年間くらいソフト開発してました。
暗い話から始まるけど、仕事のプレッシャーだったりもともと神経症持ちでメンタル弱かったり残業祭りだったりで、前職を体調を崩して退職。
「さて、どうしたものかなあ。暇だ。」と思った矢先に知り合いからプログラミングスクールでも通ったら？と言われ、
優等生っぽいジャンルのものに惹かれがちな性分の僕は、WebもAndroidも組み込みもなんでもいけるJavaやるかと思い立った。

「とにかく安い受講料で」、を最優先にできるところを探した結果、テックアカデミーが筆頭候補に上がった。
本当は教室受講が良かったので(続かない気がしたので)同じく安値のTech Campも候補だったが、
教室が近くになく、Javaも企業研修向けサービスしかなかったので候補から外れた。

ということでTech Academy Javaコースの1ヶ月コースを適当なブログの招待コードを引っ張ってきて、1万円引きにしてもらい、12万程支払い、受講に至った。

テックアカデミー受講検討している人は何よりもこの1万円割引ができる方法がありますよということを知ってほしい。
その辺り説明しているサイトがあったのでリンク貼り付け。
https://www.yukisako.xyz/entry/techacademy-discount

以下感想。

##むっずい

その所以、カリキュラムの説明不足に尽きる。
HTML書いてたはずが、唐突に今まで触れなかったJavaScriptの関数を書かされる。説明はない。
上の例は僕が遭遇した一番極端な例だけど、そんなことが割と頻繁に発生する。
後半になればなるほど、「次、このコード書いて実装してみてね！」というチャプターがあれば、
その直後のコードの説明で触れられないメソッドがだいたい存在する。

そんな時に、ひとまずググってみるかーとか、メンターさんに聞くかーとか、都度都度動ける人なら、
調べる過程で得られる知識は多いし、問題解決能力も養われていくので、確実にレベルアップにつながる。

そこでわからぬ・・・でコピペしておまじない形式で先に進んでいくと、わからない、つまらないの連鎖で
モチベーションを保てず多分挫折する。

正直なところプログラミング初めてですという人は高いお金出してでも、
普通の教室形式のプログラミングスクール通って、一個一個丁寧に説明してくれるところに行った方が、身につくんじゃないかなあと思った。

わからないに遭遇した時の立ち回り方が身についてるとか、わからないに対して勘で当たりを付けられる地力(他に習得している言語がある)
があるとか、そういう人にはおすすめ。

##安い

教室形式のプログラミングスクールでJavaやろうとすると平気で30万オーバーするので、それが1ヶ月なら12万、2ヶ月なら17万程度で済むのはお得だなあと思った。

##1ヶ月はきつかった、2ヶ月以上が現実的
僕は1ヶ月で受けたが、生活がテックアカデミーになって正直きつかった。
160時間のカリキュラムだったが、自分自身、要領が悪いこともあって実際200時間以上はカリキュラムを進めるのに時間を割いた。
開始当初、並行して就職活動を進めていたが、流石に両立できず、結果受講に専念した。
カリキュラムが全て終了したのが受講期限終了2日前だったので、2ヶ月で申し込むのが無難だったかもしれない。
ちなみにカリキュラムは、受講期限が過ぎても閲覧できる。受講内容の質問やメンターさんのサポートのサービスが受けられなくなるが。

後、もし1ヶ月で受けたい人がいるのなら、以下参照。

**1か月で受ける場合はなるべく申込締切が過ぎた次の日に申し込みをする**

以下のページはテックアカデミーのJavaコースのページ
https://techacademy.jp/java-bootcamp

申込締切の表示があるが、締め切りが過ぎたらすぐ次の申し込みが始まる。
その状態が受講開始期間まで一番長い状態なのだけど、
申し込み手続きをして入金処理を行うと、その時点でカリキュラムが閲覧できるようになるので、
(それ以外のメンターサポート等のサービスは受けられないけど)
つまり実質1.5ヶ月くらいに受講期間が延びるのでお得。
いまさらながらそうしとけば良かったと後悔・・・。

##その他(疲れてきたので)
- メンターさんの回答がはやい。質問すると5分くらいで返ってくる。
- 週2回のメンタリングがサボり防止に想像以上に効果大。土日遊び呆けて週明けのメンターさんへの進捗報告で「あ・・・」しか言えないトラウマができたので。
- カリキュラムの誤字がすごい気になる。。
- わからなかったら即質問、あるいはググる、という攻めるスタイルがないと詰む。
- カリキュラムを終えたとき、いろんなサイトぼんやり眺めてると、だいたいこんな仕組みになってるんだなあというのがわかっている自分がいる。嬉しい。

##結論
他言語のプログラミング経験があって費用を安く済ませたい人におすすめ。
ひとまずカリキュラムちゃんとこなしていけばWebアプリ作れるだけの知識は身につくので、後はどれだけ本気でやれるか、やる人次第な気がしました。

以上でした。
sedでiniファイルをパースする方法とその解説

たとえば以下のようなini形式ファイルがあり、ここから`[example.jp]`セクションの内容だけ抜き出したい場合のsedでの実現方法を紹介します。

# iniファイル例
```ini:data.ini
[example.org]
foo=/home/foo

[example.jp]
foo=/home/foo
bar=/home/bar
baz=/home/baz

[example.com]
alice=/Users/alice
bob=/Users/bob
chary=/Users/chary
```

# bashスクリプト
ワンライナーにもできますが、正規表現の部分を分かりやすくするためにシェルスクリプトにしました。

```bash:extract-inisection
#!/bin/bash

# 抽出するセクション名
#  正規表現内で使用するため、ピリオドをエスケープ
SECTION=`sed -re 's|\.|\\.|g' <<<"$1"`

# セクション開始検索用正規表現
SECTION_PAT="^[ \t]*\[${SECTION}\][ \t]*$"

# セクション終了検索用正規表現
SECTION_END_PAT='^[ \t]*\[[^]]+\][ \t]*$'

sed -nre "/${SECTION_PAT}/{p;:LOOP;n;/${SECTION_END_PAT}/Q;p;b LOOP}"
```

# 実行例
```terminal
$ ./extrat-inisection example.jp < data.ini
[example.jp]
foo=/home/foo
bar=/home/bar
baz=/home/baz

```


# 解説
sedのスクリプト部分をコマンド毎に解説すると以下のようになります。sedに`-n`オプションをつけて実行しているので、パターンスペースに読み込んだ行はpコマンドを実行しない限り出力されません。

```
/${SECTION_PAT}/ {        # パターンスペースの内容がセクション開始正規表現にマッチしたらブロックの内容を実行
  p;                      # パターンスペースの内容を出力(セクション名を出力するためなので、これを無くせばセクション内部だけ取得できる)
  :LOOP;                  # ループ用のラベル
  n;                      # 次の1行をパターンスペースに読み込む
  /${SECTION_END_PAT}/Q;  # パターンスペースの内容がセクション終了正規表現にマッチしたらスクリプトを終了
  p;                      # パターンスペースの内容を出力
  b LOOP                  # 「LOOP」ラベルに戻る
}
```

# (おまけ)セクション名の列挙
こちらはわりと簡単。

```console
$ sed -nre 's|^[ \t]*\[([^]]+)\][ \t]*$|\1|p' < data.ini
example.org
example.jp
example.com
```
Go言語開発環境のための、ghq+pecoの設定手順(macOS, bash向け)

## 概要

本記事は、bash向けのghq+pecoの導入方法を紹介していきます。

## 前提
- Homebrewが入っている
- Gitが入っている
- macで開発している

私が確かめた時のbashのバージョンは3.2です。


## pecoとは
標準入力で与えられた情報から行を絞込み、標準出力に出力するだけのものです。
こう言われると難しく感じるかもしれませんが、実際に導入するのは簡単で、とてもシンプルなものです。
下に進んでいくと導入例も紹介していますので、是非試してみてください！

[GitHub - peco/peco: Simplistic interactive filtering tool](https://github.com/peco/peco)
### pecoインストール
以下のコマンドでpecoをインストールします。
`brew install peco`



## ghqとは
Go言語のファイル構成の作法に合うようにgit clone(ghq clone)してくれるツールです。

[GitHub - motemen/ghq: Remote repository management made easy](https://github.com/motemen/ghq)
### ghqインストール
以下のコマンドでghqをインストールします。
`brew install ghq`
`git config --global ghq.root $GOPATH/src`


## pecoとghqを連携させてみる
ghq get でクローンしてきたディレクトリの一覧を表示させ、選択したディレクトリに移動するファンクションを設定し、Control+gで動くようにしてみます。

```sh:.bashrc
function ghql() {
  local selected_file=$(ghq list --full-path | peco --query "$LBUFFER")
  if [ -n "$selected_file" ]; then
    if [ -t 1 ]; then
      echo ${selected_file}
      cd ${selected_file}
      pwd
    fi
  fi
}

bind -x '"\201": ghql'
bind '"\C-g":"\201\C-m"'
```

書いて保存したら読み込ませます。
`source ~/.bashrc`

`Control+g`でちゃんと動くか確認。


![名称未設定1.mov.gif](https://qiita-image-store.s3.amazonaws.com/0/238466/7a4deb1c-0cca-2cd6-b132-dbfc9c556a6f.gif)


こんな感じになっていれば成功です！！
絞り込みの機能もあるので是非使ってみてください。

これで、ghq getでクローンしてきたディレクトリの一覧が表示され、選択するだけで簡単にリポジトリに移動できました。

※ソースコードは、[ghq + peco で便利な関数(bash) - とある子育てパパの日記](http://dempatow.hatenablog.com/entry/2016/09/14/ghq_%2B_peco_%E3%81%A7%E4%BE%BF%E5%88%A9%E3%81%AA%E9%96%A2%E6%95%B0%28bash%29)を参考にさせていただきました。
上記サイトのソースコードでは、最後の行のところでうまくbindされず、コマンドを打った後リターンキーを押さないとカレントディレクトリの表示が反映されなかったので、その部分をうまくいくように書き換えています。(参考サイト[Redrawing prompt in Bash : linuxquestions](https://www.reddit.com/r/linuxquestions/comments/5w9t1z/redrawing_prompt_in_bash/))

## おまけ
先ほど設定したpecoの機能を、もう少し便利にしてみましょう。

##### pecoディレクトリを作成する
`mkdir ~/.peco`

##### config.jsonファイルを作る
`touch ~/.peco/config.json`

##### config.jsonファイルをエディタで開いて以下を書き込んで保存する
```sh:.peco/config.json
{
    "InitialFilter": "Fuzzy"
}
```

これで、先ほどのpecoの絞り込み機能に、あいまい検索機能が追加されます。
打ち込んだ文字列と一致するディレクトリを絞り込んでくれます。便利〜！
![名称未設定2.mov.gif](https://qiita-image-store.s3.amazonaws.com/0/238466/c2c972ea-3236-fa61-31de-e0334476bf61.gif)


## おわりに
今回の記事はここまでです。
他にもpecoで便利なことがたくさんできるので、また記事にしようと思います。
(pecoについて詳しい方がおられましたらぜひ教えていただきたいです！)
RICOH THETA プラグインストア公開しました

こんにちは、リコーの@mrtakadaです
本日（2018年7月23日）、[RICOH THETA プラグインストア](https://pluginstore.theta360.com)を公開しました。
![RICOH THETA Plugin Store](https://qiita-image-store.s3.amazonaws.com/0/265434/bfb6ee6b-6c31-91c1-dc5d-550717aadd6d.png)

このストアから自由にプラグインを選び、[RICOH THETA V](https://theta360.com/ja/about/theta/v.html)にインストールしてご使用いただけます。
（スマートフォン用アプリと同じイメージです）
現在公開しているプラグインは、リコープラグイン３つ＆パートナープラグイン5つの合計8つになります。

## リコープラグインの機能概要

- <del>File Cloud Upload（クラウドアップロード）</del>　[※2019年1月31日で公開終了しました](https://topics.theta360.com/ja/news/2019-01-11/)　
RICOH THETA V内にある静止画を元のサイズのまま、ルーター経由でGoogleフォト™に自動でアップロードできるプラグイン。
![File Cloud Upload](https://qiita-image-store.s3.amazonaws.com/0/265434/c77247d6-5b05-3edd-ce59-49a00026edab.png)


- [Wireless Live Streaming（無線ライブストリーミング）](https://pluginstore.theta360.com/plugins/com.theta360.cloudstreaming/)
無線ルーター経由で、PCレスで直接YouTube™に360度ライブ配信が可能なプラグイン。
![Wireless Live Streaming](https://qiita-image-store.s3.amazonaws.com/0/265434/b67e15ec-eeb6-798f-9065-26c56e94cad3.png)


- [Automatic Face Blur BETA（自動顔ぼかしβ版）](https://pluginstore.theta360.com/plugins/com.theta360.automaticfaceblur/)
静止画撮影すると被写体の顔を自動で検知し、ぼかすことができるプラグイン。
※すべての顔の認識と完璧なぼかし処理を保証するものではありません
![AutomaticFaceBlurBETA](https://qiita-image-store.s3.amazonaws.com/0/265434/ff86a3bd-59f1-65d5-8cb0-63c1c6dde914.png)



インストール方法や詳しい機能は[こちら](http://theta360.com/ja/ricoh_plugins/)を参照。

これらのプラグインをご利用いただきたいことは当然ですが、開発者の方々には別の利用方法があります。

## 開発者のプラグイン利用方法

それは、、、

**これら３つのソースコードを全て公開済み**

なので、それぞれの目的や用途に応じて自由に改良いただくことができる、ということです。
（セキュリティーに関連するコードは部分的に非公開にする場合もあります）

 + [無線ライブストリーミングのソースコード](https://github.com/ricohapi/theta-wireless-live-streaming-plugin)

 + [自動顔ぼかしβ版のソースコード](https://github.com/ricohapi/theta-automatic-face-blur-plugin)

 + [クラウドアップロードのソースコード](https://github.com/ricohapi/theta-cloud-upload-plugin)

例えば、「YouTube以外のストリーミングサービスで配信できるプラグインが欲しい」とか「登録された顔のみぼかしがかからないようにしたい」等々の要望がある場合、上記ソースコードの該当部分を修正いただくことで簡単にプラグインを開発することができます。


## プラグインを開発して、世界に発信しよう！

開発いただいたプラグインは上述の[プラグインストア](https://pluginstore.theta360.com/)から世界に発信いただくことができます。
現在は無償での配信のみですが、将来的に有償化もできるようにしていきたいと考えているので、THETAプラグイン開発に興味を持たれた方はぜひパートナープログラムにご登録ください！

なお、登録時に申請したシリアルナンバーのTHETAについてはメーカーサポート対象外になりますので、ご注意ください。

パートナープログラムの詳細は[こちら](https://api.ricoh/products/theta-plugin/)
登録フォームは[こちら](https://www8.webcas.net/db/pub/ricoh/thetaplugin/create/input)
Twitterは[こちら](https://twitter.com/thetaplugin)
THETAプラグイン開発コミュニティ(slack)は[こちら](https://join.slack.com/t/thetadeveloper/shared_invite/enQtNzcxODI2MTk2ODg0LWY5YmU2ZTIxNGYwNzlmNWZjMWMyMWFlMzY3ZmQ3NGU3ZjZiZjI0Njk4MGIxMDU5NDJiMzQ4Y2FkNDEzYmFlNGU)
Android端末でTCPDUMPする

# Androidでtcpdumpしてwiresharkで確認する

Android端末でもtcpdumpは使える

### Android端末のWiFiの通信をダンプする
```shell
adb shell
su
tcpdump -s 0 -i wlan0 -v -w /sdcard/dump.pcap
```

### Android端末から引っこ抜く
```shell
adb pull sdcard/dump.pcap
```

### wiresharkで```dump.pcap```を開く

![スクリーンショット 2018-07-20 19.41.37.png](https://qiita-image-store.s3.amazonaws.com/0/6968/b22a22db-86a2-abe0-d2ba-1acaa01a7d37.png)


## 参考
https://qiita.com/tossh/items/4cd33693965ef231bd2a


## メモ

通常のtcpdumpの使い方

```shell
# ポート10410へのudpのパケットを確認する
$ sudo tcpdump udp port 10410
```

特定のMACアドレスのログを表示する

```
eth.addr == BC:XX:XX:XX:XX:XX
```
Siderに循環複雑度の件で怒られた時にローカルで複雑度を測る方法 

PHPMDを使う
(PHPMDはインストールしておく)

```
./vendor/phpmd/phpmd/src/bin/phpmd [ファイル名] [アウトプット種類] [分析内容]
```
(問題無ければなにも出てこない)

アウトプット種類：text、xml、html
分析内容

```
cleancode（綺麗なコードかチェック）,
codesize（コードが大きすぎないかチェック）, <-これで循環複雑度が測れる
controversial（命名規則など論争が巻き起こりそうなものチェック）,     
design（設計上の問題チェック）, 
naming（変数名など名前関連のチェック）, 
unusedcode（未使用のコードのチェック）
```

(参考)
https://qiita.com/syossan27/items/d2f8c3b9fdfaaf5ff43f
JSを使わずにモーダルのようなものを作って気づいたこと

#はじめに
jsを使わずcssのみでモーダルを作ろうと思って作りました。
ただモーダルだけだとありふれているので、押したボタンが変形してコンテンツを表示するアニメーションをつけました。
が、これだとモーダルの定義にあってない気がするので、モーダルのようなもの、です…
当たり前のことかもしれないですけど実装にあたって気づいたことを羅列しました

#作ったもの
要素をクリックするとアニメーションします。ついでにホバーアニメーションもちょっとだけつけました。

<p data-height="265" data-theme-id="0" data-slug-hash="jpVYoj" data-default-tab="result" data-user="mild-tanama" data-embed-version="2" data-pen-title="Animation-test" class="codepen">See the Pen <a href="https://codepen.io/mild-tanama/pen/jpVYoj/">Animation-test</a> by mild-tanama (<a href="https://codepen.io/mild-tanama">@mild-tanama</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#実装方法

##流れ

- checkboxのcheckedを利用してコンテンツの表示・非表示を切り替える
- アニメーションをつける

###checkboxのcheckedを利用してコンテンツの表示・非表示を切り替える
cssのみで制御なので切り替えるにはinputタグのcheckboxかradioボタンを使う必要があります。
でもチェックボックス自体は表示して使わないので、display:noneで消しちゃいます。
labelのforでidを指定すれば、labelをクリックすればinputにcheckedが付くのでそちらを利用。
セレクタで:checkedで指定できるようになるので、そこから表示・非表示のプロパティを設定します。

```css
.modal-btn:checked + label {
  animation: spin 1s ease forwards;
  width: 300px;
  height: 300px;
}
```

こんな感じにcss設定してます。


#実装して気づいたこと
##タグが合っていない
そもそもの話なんですけどchecked使うためとはいえinputタグを本来の意味で使っていないのが心苦しいですね。同じくlabelタグもです。
超絶軽いですが、そこは心苦しい…。

##再度クリックしたときのアニメーション
コンテンツを閉じるときのアニメーションができない！
animationプロパティでは無理でしたね…（cssだけでは）
複雑なアニメーションの場合は戻す時にも他のアニメーションを用意して閉じる時にそのアニメーションを付与してあげる必要がありました。
transitionだけでどうにかなるアニメーションならば、そちらで閉じる時も同じアニメーションにできるので、cssのみで簡単にやる場合はそちらを利用するべきですね。

##display:none, opacity: 0の罠
[display: none; のDOMに対してtransitionを使う際の注意](https://qiita.com/gonshi_com/items/4ae066ef4bea6d519854)
これにハマってました。勉強になりました。

#まとめ

- タグ構造が無理やりなので気になる
- 複雑なアニメーションやる際はやはりjsが必要そう
- 簡単なモーダルとかならcssでもできる

個人的な感想としてはやっぱり実務向きではないですね。何よりも構造が悪すぎる気がします。
クラスのつけ外しで解決する話なので、このくらいならjsでちょこちょこつけ外しすれば良さそうです。
アニメーションの動作を確認するだけとかであれば、楽なのでいいですね！（hoverで良くない？というのはさておき）
redashを運用していく上でちょっと便利になる話

※ redashのバージョンは`4.0.1`です。
## redashの背景を黒に設定(chrome)
- [Care your Eyes](https://chrome.google.com/webstore/detail/care-your-eyes/fidmpnedniahpnkeomejhnepmbdamlhl?hl=ja)からchromeの拡張機能追加。今ではredashの長時間作業には必須になりました。
![スクリーンショット 2018-11-07 14.33.38.png](https://qiita-image-store.s3.amazonaws.com/0/96662/a82a926a-0e86-8689-58c6-ed3222cdf1d8.png)


## queryの管理編
- query名の先頭に必ずデータソース名を記載
    - 登録しているデータソースが複数ある為
- 定期実行しているqueryの管理
    - データソースにredashのDBを登録し下記のqueryを登録（postgre）

```sql
SELECT q.id as query_ID
       ,CASE
           WHEN q.schedule LIKE '%:%' THEN q.schedule
           ELSE CASE
                    WHEN trunc(to_number(q.schedule, '9999999')/60, 0) < 60 THEN trunc(to_number(q.schedule, '9999999')/60, 0) || '分'
                    ELSE CASE
                             WHEN trunc(to_number(q.schedule, '9999999')/60, 0) < 1440 THEN trunc(to_number(q.schedule, '9999999')/60/60, 0) || '時間'
                             ELSE trunc(to_number(q.schedule, '9999999')/60/60/24, 0) || '日'
                         END
                END
       END AS 実行間隔 
       ,q.name AS タイトル 
       ,ds.name AS データソース名 
       ,qr.runtime AS Runtime 
       ,qr.retrieved_at AS 最終実行日時
FROM queries q
LEFT JOIN data_sources ds ON q.data_source_id = ds.id
LEFT JOIN query_results qr ON q.query_hash = qr.query_hash
AND qr.retrieved_at =
  (SELECT max(retrieved_at)
   FROM query_results
   WHERE q.query_hash = query_results.query_hash)
WHERE schedule != ''
ORDER BY q.id ASC

```
- こんな感じに一覧で見れるようにしておくとわかりやすい
![redash_スクリーンショット.png](https://qiita-image-store.s3.amazonaws.com/0/96662/13027e43-5ef5-2247-4380-3034bed580f5.png)

## ユーザー管理編
### ユーザーの確認(organizationsの設定をしてる人には便利かも)
- ユーザーの作成権限が他部署にもあってしかも削除機能自体がないので結構大変
    - 作成ルールはあるようでないに近い
- しかもアカウント作ってもパスワード設定すらしてない人がちらほら

```sql
SELECT u.id,
       u.name,
       u.email,
      case when u.password_hash is not null then '<div class="bg-success text-center">発行済</div>' else '<div class="bg-danger text-center">未発行</div>' end as pass発行,
       u.groups,
       o.name as org_name,
       o.slug,
       u2.name as 作成者
FROM users u
LEFT JOIN organizations o ON o.id = u.org_id
LEFT JOIN events e ON e.object_id = cast(u.id as text)
AND e.action = 'create'
AND e.object_type = 'user'
LEFT JOIN users u2 ON u2.id = e.user_id
ORDER BY u.id DESC
```
- ※organizationsの設定していない人はここでleftjoinしなくてもよい。
- 上記実行で誰が誰のアカウントを作成したのかとパスワード設定したのかが把握できる。
Cognos Framework Manager で初めてモデリングする時に取りあえず知っておいた方が良い事

#概要
Cognos Analytics や Cognos 10 BI で、レポートにテーブルのデータを表示するために、Framework Managerを用いてモデリングを行います。
このモデリングの際に、テーブル構造を取り込んだ後に、テーブル間にリレーションを張りますが、そのリレーションの張り方で最低限覚えておいて欲しい事をまとめます。
あくまで初心者向けの基本の話なので、何も知らんけどFramework Managerでデータモデル作らないといけなくなっちゃった、という様な可哀想な立場に立たされた方は、取りあえずこれを3分間で読んで頭に入れてやってみてください。

#基本は 1対n でリレーション
テーブル間のリレーションの基本は 1対nで、製品表や日付表などのマスタ表(ディメンション表)が「1」の側、売上表とか実績値的な数値データを持つトランザクション表(ファクト表)が「n」の側になります。
Cognosは 1対n の関係で、分析の軸となるディメンション表か、集計対象数値データを持つファクト表かを判断します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/147246/9c5ea0d1-d3bc-269c-7707-c756b6b3e1c7.png)

#ディメンション表側は1..1、ファクト表側は1..n か 0..n
1対nと言っても、Framework Managerには色々なカーディナリティの選択肢がありますが、取りあえずディメンション表の側は「1..1」で、ファクト側を「1..n」か「0..n」かを考えます。

ファクト側を「1..n」にした場合、2つの表を結合するため発行されるSQLは「INNER JOIN」となります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/147246/73efac04-c88c-ee57-6ed7-2df20d384964.png)

ファクト側を「0..n」にした場合、2つの表を結合するため発行されるSQLは「LEFT OUTER JOIN」となります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/147246/1bd9a4a0-e9d9-32ed-b440-17dad6c1cbcf.png)

「INNER JOIN」とか「LEFT OUTER JOIN」が何かは、Googleとかで調べればいくらでもでてきますので割愛します。結合方式の意味を理解して、どっちの結合結果が必要かを考えて選択してください。

#スタースキーマ構造を目指す
ファクト表を中心に配置し、周りをディメンション表で取り囲んで行くモデルを目指します。
これがいわゆる「スタースキーマ」です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/147246/363850ee-864d-f66d-cc6f-2efb787d092c.png)

#ファクト表が複数ある場合はどうするの？
こういうのをやっている環境を時々見かけますが、ファクト表同士を n対n で直接リレーションを張ってはいけません。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/147246/8b9565aa-c3de-d730-948b-4fbd9ac919be.png)

基本はあくまで 1対n のリレーションなので、ファクト表の間にディメンションを挟みます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/147246/48cacdde-27e0-7a28-d4f3-9b94e5611b4c.png)

または、データベース上で一つの表やビューにまとめてしまうのも有りです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/147246/63b5f369-69c4-2af8-d87f-59306361a1c6.png)

#他のディメンションはどうするの？
こんな感じにしていきます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/147246/72290fd1-7e26-4852-4991-332bc49dfd51.png)


#リレーションがループするのは駄目って聞いたけど？
こういうのは駄目です。
一個前のリレーションでは、各表が「1」のディメンションなのか、「n」のファクトなのか明確だったけど、下の「表C」は、「1」と「n」を両方持っていて、ディメンションなのかファクトなのかわかりません。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/147246/f4400a45-3a7f-3aa0-af1c-485362b64328.png)

そういう時は、こうします。
表Cのエイリアス(別名)を作成します。
これで表Cはファクト、表Cエイリアスはディメンションとして役割が明確になります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/147246/028ed9de-7120-d394-f673-e65c260a9e43.png)


これで3分くらいでしょうか。

という辺りを取りあえず意識してやってみて頂ければ、後々取り返しのつかないモデルを作ってしまう事にはならないと思います。
これでやってみて、何かうまく行かない事が出てきたら、その時はまた個別に調べて考えましょう。
TwitterがインストールされていないとTwitterKitで認証できない

2ヶ月以上前から告知はされていたようですが、apps.twitter.comのサイトでTwitterアプリの
登録を行う場合に設定するCallbackURLを厳密に見るようになっていたようです。

[Action REQUIRED - Sign in with Twitter users must whitelist callback URLs](https://twittercommunity.com/t/action-required-sign-in-with-twitter-users-must-whitelist-callback-urls/105342)

## 現象
この対応をしていない状態で、Twitterアプリがインストールされていない端末で
Twitterへのログインが必要な操作を実行すると、以下のようなエラーが出力されます。

```
[TwitterKit] did encounter error with message "Error obtaining user auth token.":
 Error Domain=TWTRLogInErrorDomain Code=-1 
"<?xml version="1.0" encoding="UTF-8"?>
<errors>
<error code="415">
Callback URL not approved for this client application. 
Approved callback URLs can be adjusted in your application settings
</error>
</errors>"
```

## 原因
[Callback URL - Twitter Developer](https://developer.twitter.com/en/docs/basics/callback_url.html)
こちらのドキュメントにあるように、`oauth/request_token`の`callback_url`にapps.twitter.comで登録したCallbackURLをちゃんと登録しないといけないようです。
そんなことを言われても、TwitterKitのloginAPIには`callback_url`パラメータがありません。


## 解決策
[Callback URL Example](https://twittercommunity.com/t/callback-url-example/107307)
こちらで回答されているように、以下のフォーマットでapps.twitter.comのCallbackURLsに追加すると、特にアプリの再申請などをしなくても正常に動作するようになりました。

```
twitterkit-CONSUMERKEY://
```
`CONSUMERKEY`は、`Keys and Access Tokens`にある`Application Settings`の`Consumer Key (API Key)`です。
たとえばキーがAAAAAAAAならば、`twitterkit-AAAAAAAA://`になります。


## 参考
[TwitterのAPIでcallbackURLをチェックするようになった](https://qiita.com/non0311/items/48a6b25097d1783eab23)
どれがクリックされたかを判別する

以下のように複数のボタンがHTML上にあるとします。

```html
<button name="item1" onclick="foo()">商品1</button>
<button name="item2" onclick="foo()">商品2</button>
<button name="item3" onclick="foo()">商品3</button>
```

ボタンが押されると、`foo()`が実行されます。
このとき、何番目のボタンが押されたかを取得したい場合に、`data-xxx`を使うと便利です。

```html
<button data-index="1" name="item1" onclick="foo()">商品1</button>
<button data-index="2" name="item2" onclick="foo()">商品2</button>
<button data-index="3" name="item3" onclick="foo()">商品3</button>
```

上記で`商品１`をクリックした場合

```javascript
foo(e) {
   // datasetは、data-xxxで指定されたオブジェクトになる
   // {index:1}
   const data = e.currentTarget.dataset['index']; // 1が返される
}
```

`data-xxx`を増やすと

```html
<button data-id="foo" data-index="1" name="item1" onclick="foo()">商品1</button>
<button data-id="bar" data-index="2" name="item2" onclick="foo()">商品2</button>
<button data-id="baz" data-index="3" name="item3" onclick="foo()">商品3</button>
```

```javascript
foo(e) {
   // datasetは、data-xxxで指定されたすべてが入る
   // {id:"foo", index:1}
   const data = e.currentTarget.dataset['id']; // fooが返される
}
```

### 参考

[MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset)
CentOS7に手動でService登録を行う

手動でインストールしたソフトウェアをサービス登録したくなりますよね？
ということで、サービス登録しましょう。

# 利点
「登録しましょう」と言いましたが、その前にサービス登録する利点です。

- service（systemctl）コマンドで管理が可能
- プロセス管理をシステムに任せられる

これらだけで十分サービス登録する気になりますね。

# 登録方法
サービスをユーザ設定する場合は、`/etc/systemd/system`にその設定ファイルを作成します。
設定ファイルは、`(サービス名).service`という名前で作成します。

```(サービス名).service
[Unit]
Description=設定内容

[install]
WantedBy=multi-user.target

[Service]
ExecStart=起動するプログラム（サーバ相対パスで）
Restart=always
```

取り敢えず、上のコードで作成してください。
そのあと、日本語の部分を合うように変更してください。

# 起動方法
```.sh
systemctl status (サービス名)
# 表示結果にエラーが表示されていれば、それを解消してください。
systemctl start (サービス名)
systemctl status (サービス名)
# 表示結果でenabledになっていなければ、以下のコマンドで自動起動登録をしましょう。
systemctl enable (サービス名)
systemctl status (サービス名)
```

以上で、サービス登録は終了です。

# 追記
*Ubuntu16.04* の場合、サービスファイルは`/lib/systemd/system`にあるみたいです。
さらに、`*.service`だけでなく、`*.service.d`の場合もあるみたいです。
[Review] Python super()

## Introduction
Original article lies here!
https://www.programiz.com/python-programming/methods/built-in/super
When I was reading the other's code, I didn't get how the method `super()` was used, so I decided to save a time a bit for doing research about this.

## What is super()?
The `super()` built-in returns a proxy object that allows you to refer parent class by `super`.

**Official Docs**
1. [3](https://docs.python.org/3/library/functions.html#super)
2. [2](https://docs.python.org/2/library/functions.html#super)

Normally in Python, this function has two major use cases:
1. allows us to avoid using base class explicitly
2. working with multiple inheritance

So, in this article, I will show the use cases with the actual code using python3.6!

## Ex.1 : super() with Single Inheritance

```python
class Mammal(object):
    def __init__(self, mammalName):
        print(mammalName, 'is a warm-blooded animal.')

class Dog(Mammal):
    def __init__(self):
        print('Dog has four legs')
        super().__init__('Dog')

dog_1 = Dog()

# output
Dog has four legs.
Dog is a warm-blooded animal.
```

Why is this happy for us??
yeah, that is the same question I had at first time when I read the article, let me a bit elaborate.

```python
class Dog(NotCat):
  def __init__(self):
    print('Dog has four legs.')

    # no need to change this
    super().__init__('Dog')
```
So, for example, when we are refactoring the code and if someone wants to change the name of the base class, thanks to the super() method, it won't require our workload so much!

## Ex.2 : super() with Multiple Inheritance

```python
class Animal:
    def __init__(self, animalName):
        print(animalName, 'is an animal')

class Mammal(Animal):
    def __init__(self, mammalName):
        print(mammalName, 'is a warm-blooded animal.')
        super().__init__(mammalName)

class NonWingedMammal(Mammal):
    def __init__(self, NonWingedMammalName):
        print(NonWingedMammalName, 'cannnot fly')
        super().__init__(NonWingedMammalName)

class NonMarineMammal(Mammal):
    def __init__(self, NonMarineMammalName):
        print(NonMarineMammalName, 'cannot swim')
        super().__init__(NonMarineMammalName)

class Dog(NonMarineMammal, NonWingedMammal):
    def __init__(self):
        print('Dog has four legs')
        super().__init__('Dog')

dog = Dog()
print('')
bat = NonMarineMammal('Bat')
print(Dog.__mro__)

# output
Dog has 4 legs.
Dog can't swim.
Dog can't fly.
Dog is a warm-blooded animal.
Dog is an animal.

Bat can't swim.
Bat is a warm-blooded animal.
Bat is an animal.

(<class 'Dog'>, 
<class 'NonMarineMammal'>, 
<class 'NonWingedMammal'>, 
<class 'Mammal'>, 
<class 'Animal'>, 
<class 'object'>)
```

So, super() can deal with multiple inheritance!!
And `__mro__`(Method Resolution Order) tells you the order for parent methods to be called.

Thank you for reading!
bulmaのNavbar burgerメニューをvue(nuxt)に組み込む際のテンプレートの書き方

この記事は以下のサイトへ移動しました！

[bulmaのNavbar burgerメニューをvue(nuxt)に組み込む際のテンプレートの書き方](http://www.art-side.com/archives/129)
flashメッセージの色分けをする

下記のようなフラッシュメッセージを色分けしたい。

```php:Userscontroller.php

public function destroy($id)
{
  $user = User::find($id);
  $user->delete();
  return redirect('/users')->with('status' => '削除しました');
}
```
->with()は配列も処理できるようになっているみたいなので

```php:RedirectResponse.php
public function with($key, $value = null)
{
  $key = is_array($key) ? $key : [$key => $value];

  foreach ($key as $k => $v) {
    $this->session->flash($k, $v);
  }

  return $this;
}
```
配列にして渡してあげる

```php:Userscontroller.php
public function destroy($id)
{
  $user = User::find($id);
  $user->delete();
  return redirect('/users')->with([
    'status' => '削除しました',
    'color' => 'danger'
  ]);
}
```

表示

```php:index.blade.php
@if (session('status'))
  <div class="alert alert-{{ session('color') }}">
    {{ session('status') }}
  </div>
@endif
```
append処理が重かったのでjs処理のリファクタ

## はじめに

コードを書いていて`javascript`の処理が重く、どうにか改善できないかと模索していたところ高速化できたのでその共有

## 要件

ボタンを押したらテーブルの末尾に行を追加する

## コード

```index.php
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>

  <body>
    <button id='append_button'>テーブル行追加ボタン</button>
    <table border='1' id='my_table'>
      <thead>
        <tr>
          <th>header_A</th>
          <th>header_B</th>
        </tr>
      </thead>

      <tbody>
        <?php for($i=0; $i<10; $i++){ ?>
        <tr>
          <td>body_A_<?php echo($i); ?></td>
          <td>body_B_<?php echo($i); ?></td>
        </tr>
        <?php } ?>
      </tbody>
    </table>

    <script type="text/javascript" src="sample.js"></script>
  </body>
</html>
```

```sample.js
$('#append_button').on('click', function(){
  console.time('timer');
  let tr = "<tr><td>a</td><td>b</td></tr>";
  $('#my_table').append(tr);
  console.timeEnd('timer');
});
```

## スクリーンショット

![Ze9vAoAGFN.gif](https://qiita-image-store.s3.amazonaws.com/0/67471/640008c8-d542-84d8-438d-149be88e8701.gif)

## 計測結果

| テーブル行数 | 実行時間 |
|:-:|:-:|
|  1行 | 2.9ms  |
|  10行 | 3ms  |
|  100行 | 3.3ms  |
|  1000行 | 3.5ms  |
|  10000行 | 5ms  |
|  100000行 | 14ms  |

元のテーブルの行数を変えて計測しました
行数が多いほど処理に時間がかかることが分かります

## 原因

`$('#my_table').append(tr);`
テーブルを見つけそれの末尾にtrを足すだけですが、この末尾を探す処理に時間がかかっているようです
今回の例では1行の時に比べて100000行になると約5倍の差が出ました。
14msであれば改善しなくても良いかもしれませんが、実際に直面した事例では他の要因もあり改善しなければなりませんでした。

## 改善案

末尾を探すのに時間がかかっていたので末尾に目印をつけておき、そこに対して要素を追加してあげる
やりたいのは「末尾を探して要素を追加」ではなく「末尾に要素を追加」ということ

## 改善コード

```index2.php
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>

  <body>
    <button id='append_button'>テーブル行追加ボタン</button>
    <table border='1' id='my_table'>
      <thead>
        <tr>
          <th>header_A</th>
          <th>header_B</th>
        </tr>
      </thead>

      <tbody>
        <?php for($i=0; $i<10; $i++){ ?>
        <tr>
          <td>body_A_<?php echo($i); ?></td>
          <td>body_B_<?php echo($i); ?></td>
        </tr>
        <?php } ?>
        <tr id='last_tr' style='display: none;'>
          <td>dummy_A</td>
          <td>dummy_B</td>
        </tr>
      </tbody>
    </table>

    <script type="text/javascript" src="sample2.js"></script>
  </body>
</html>
```

```sample2.js
$('#append_button').on('click', function(){
  console.time('timer');
  let tr = "<tr><td>a</td><td>b</td></tr>";
  $('#last_tr').before(tr);
  console.timeEnd('timer');
});
```

## 改善後の計測結果

| テーブル行数 | 実行時間 |
|:-:|:-:|
|  1行 | 1.5ms  |
|  10行 | 1.6ms  |
|  100行 | 1.6ms  |
|  1000行 | 1.5ms  |
|  10000行 | 1.8ms  |
|  100000行 | 1.6ms  |

平均をとっていてバラつきはありますが、行数に依存しない処理速度が確保できました。
改善前の100000行と比べると10倍の改善になりました:smile:

## おわりに

些細なことですがうっかり大きいテーブルにappendすると処理時間がかかるので、こういうテクニックを覚えておくと良いかもしれません。
また、dummyの要素を末尾においているので場合によっては副作用をもたらすこともありそうですね。
注意して参考にしてみてください。
Mavenでwarファイルを作成する直前に別のライブラリを含めたい

色々訳あってMavenリポジトリで管理されていないライブラリがありました。

``` xml
        <dependency>
            <groupId>fukasawah</groupId>
            <artifactId>XXXXXX</artifactId>
            <version>1.0</version>
            <scope>system</scope>
            <systemPath>${project.basedir}/lib/XXXXXX.jar</systemPath>
        </dependency>
```

このjarをwarに含めたい。

今回はそれが出来る方法を2つご紹介。


`maven-dependency-plugin`を使うやり方
-----------------

デフォルトではsystemスコープの依存関係はwarに含まれないようです。
しかし、warファイルを作る作業の中に、特定のディレクトリにあるものをzipにする作業をします。
なので、zipにする直前に`maven-dependency-plugin`でコピーする作業を入れるとよいです。

``` xml
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-dependency-plugin</artifactId>
                <executions>
                    <execution>
                        <phase>prepare-package</phase><!-- ここ大事 -->
                        <goals>
                            <goal>copy-dependencies</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>${project.build.directory}/${project.build.finalName}/WEB-INF/lib</outputDirectory>
                            <includeArtifactIds>XXXXXX</includeArtifactIds>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
```

`prepare-package`が大事で、`package`ではwarファイル作成後にファイルがコピーされてしまい、warに含まれてない状態になる。

また、この時、`${artifactId}-${version}.jar`という形式で配置される。




`maven-war-plugin`を使うやり方
---------------------

Mavenの依存関係の恩恵がなくなりますが、書き方は一番素直な感じがする。

``` xml
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <configuration>
                    <webResources>
                        <resource>
                            <directory>lib</directory>
                            <targetPath>WEB-INF/lib</targetPath>
                            <includes>
                                <include>XXXXXX.jar</include>
                                <!-- <include>**/*.jar</include> --><!-- ワイルドカードも使える -->
                            </includes>
                        </resource>
                    </webResources>
                </configuration>
            </plugin>
```

こっちは単純なファイルコピーなので、artifactIdも関係ないし、versionは含まれない。
ONNX のモデルを JSON に変換する

漢なら ONNX モデルを JSON に変換したいですね!

ONNX は中身は protobuf(+ numpy バイナリデータ?)なので,

tensorflow の GraphDef を JSON 形式でシリアライズ/デシリアライズする
https://qiita.com/syoyo/items/3a1a5b84fb7c37c9adf5

と似たようなやりかたで, `google.protobuf.json_format` で JSON に変換できました.

```python
import onnx
from google.protobuf.json_format import MessageToJson

model = onnx.load('mnist/model.onnx')

j = MessageToJson(model)
print(j)
```

## TODO

* デシリアライズ時に onnx の protobuf 定義で JSON のチェックを行う
* ONNX JSON schema ほしい
ローカルでAWS SQSをモックぽく使いたい→ElasticMQがあるよ！

## TL;DR

テストコードの実行時にAWS SQSと同じ振る舞いをするモックが欲しくなったので調べたらElasticMQでイケたぞという話し。

## 手順:

### 最新のelasticMQを取得

```
$ cd /path/to/project/
$ wget https://s3-eu-west-1.amazonaws.com/softwaremill-public/elasticmq-server-0.14.1.jar
$ java -jar elasticmq-server-0.14.1.jar
```

あとは `java -jar elasticmq-server.jar` みたいなコマンドを実行してあげるだけ。
やったぜ！
……とは残念ながらぼくの場合いかなかった。

### エラーが出た:

こんな感じのエラーが出たらOpenJDKが古い可能性があるので最新を取得してインストール。

```
12:51:07.175 [main] INFO  org.elasticmq.server.Main$ - Starting ElasticMQ server (0.14.1) ...
12:51:07.684 [main] ERROR org.elasticmq.server.Main$ - Uncaught exception in thread: main
java.lang.VerifyError: Uninitialized object exists on backward branch 209
Exception Details:
...
```

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

```
$ java -version
java version "1.8.0_171"
Java(TM) SE Runtime Environment (build 1.8.0_171-b11) # ←のバージョンがインストールしたものになってればOK
Java HotSpot(TM) 64-Bit Server VM (build 25.171-b11, mixed mode)
```

## 感想:

ElasticMQ使えるようになり、テストの依存性を綺麗になくせたのでよかったです(こなみかん)

### 参考URL:
https://github.com/sbt/sbt/issues/3471
Serverless Frameworkのリソースの論理IDの命名規則について (ApiGatewayDeployment{randomNumber})

# **1. はじめに**

Serverless Frameworkで構築されるAPI Gatewayのリソースに対してserverless.yml内で容易に設定の変更が出来ない．

# **2. 詳細**

やりたいこととしては，Serverless FrameworkでAPI Gatewayのリソースを作成し，そのリソースを参照して，設定(例えばメソッドスロットリングやステージ変数など)を変更したい．

Serverless Frameworkがデフォルトでサポートしていない設定については，serverless.ymlの`resources`のセクションに記述することで，AWS CloudFormationでstackに設定を追加できる．

`resources`とは，[Serverless Framework](https://serverless.com/framework/docs/providers/aws/events/apigateway/)のサイトから引用すると下記の部分になる．

```yaml:serverless.yml
service: service-name
provider: aws
functions:
  ...

resources:
  Resources:
    ProxyResource:
      Type: AWS::ApiGateway::Resource
      Properties:
        ParentId:
          Fn::GetAtt:
            - ApiGatewayRestApi # our default Rest API logical ID
            - RootResourceId
        PathPart: serverless # the endpoint in your API that is set as proxy
        RestApiId:
          Ref: ApiGatewayRestApi
    ProxyMethod:
      Type: AWS::ApiGateway::Method
      Properties:
        ResourceId:
          Ref: ProxyResource
        RestApiId:
          Ref: ApiGatewayRestApi
        HttpMethod: GET # the method of your proxy. Is it GET or POST or ... ?
        MethodResponses:
          - StatusCode: 200
        Integration:
          IntegrationHttpMethod: POST
          Type: HTTP
          Uri: http://serverless.com # the URL you want to set a proxy to
          IntegrationResponses:
            - StatusCode: 200
```

設定の変更には，Serverless Frameworkで作成されたリソースの論理IDが必要となる．論理IDはServerless Frameworkの命名規則に則って自動的に作成される．[Serverless Frameworkの命名規則](https://serverless.com/framework/docs/providers/aws/guide/resources/#aws-cloudformation-resource-reference)を見てもらうとわかるが，自動生成される論理IDが予測できるものと,そうでないものがある．予測が出来ないものとは作成される論理IDのルールに{randomNumber}が入っているもので，ここには名前の通りランダムな値が入る．API Gatewayのリソースは論理IDの命名規則が，`ApiGatewayDeployment{randomNumber}`となっており，論理IDの予測が出来ない．

下記のように問題だと思っている人達がいる．

- [Resource name "ApiGatewayDeployment{randomNumber}" should be "ApiGatewayDeployment" #4379](https://github.com/serverless/serverless/issues/4379)
- [Not possible to create resources that depend on the ApiGateway::Deployment #2233](https://github.com/serverless/serverless/issues/2233)

## **2.1. 回避策**

実施はしていないが下記のような回避先がある模様

[Serverless Framework v1.0.0-rc.1でdeployコマンドをフックするプラグインを作る](https://qiita.com/quartette/items/0851fac51a12200bf760)

# **3. 参考リンク**
- [Resource name "ApiGatewayDeployment{randomNumber}" should be "ApiGatewayDeployment" #4379](https://github.com/serverless/serverless/issues/4379)
- [Serverless Framework - AWS Lambda Guide - AWS Infrastructure Resources](https://serverless.com/framework/docs/providers/aws/guide/resources/#aws-cloudformation-resource-reference)
- [API Gateway](https://serverless.com/framework/docs/providers/aws/events/apigateway/)
- [Not possible to create resources that depend on the ApiGateway::Deployment #2233](https://github.com/serverless/serverless/issues/2233)
- [Serverless Framework v1.0.0-rc.1でdeployコマンドをフックするプラグインを作る](https://qiita.com/quartette/items/0851fac51a12200bf760)
ACFのGroupフィールドのレイアウトで毎回迷う人に

Wordpressのプラグイン、Advanced Custom Fields(以下ACF)の
version 5.6.0から追加されたGroupフィールド。
https://www.advancedcustomfields.com/resources/group/

Groupフィールドに対して[get_field()](https://www.advancedcustomfields.com/resources/get_field/)することで配列が返されるので
わかりやすくシンプルな状態で値を取得することができます。

個人的によく使うフィールドなんですが
サブフィールドのレイアウトとしてブロック、表、列のどれを選ぶかいつも悩んでしまいます。

![acf_config_layout.png](https://qiita-image-store.s3.amazonaws.com/0/164197/7f564da0-794f-dc3c-9c71-3f5cb4bd1be4.png)

そこで今回はそれぞれのレイアウトを選んだときの表示対象画面側の見た目についてまとめていきます。

---
ちなみに今回ACF側に設定した内容はこちらです。
![acf_config.png](https://qiita-image-store.s3.amazonaws.com/0/164197/8e50a51a-6a73-639b-2748-4c92bde1eb62.png)

#ブロックレイアウト
サブフィールドが全面に広がって縦に連なります。
![acf_group_block.png](https://qiita-image-store.s3.amazonaws.com/0/164197/e72f48f0-7aea-152e-5397-5fbaddff5876.png)

#表レイアウト
サブフィールドのラベルと入力欄が縦に配置されたものが横並びになります。
![acf_group_table.png](https://qiita-image-store.s3.amazonaws.com/0/164197/ce8d239c-5606-d14d-0761-dbaaf59d7c75.png)

#行レイアウト
サブフィールドのラベルと入力欄が横に配置されたものが縦に連なります。
![acf_group_row.png](https://qiita-image-store.s3.amazonaws.com/0/164197/223d0563-0280-ca32-fc50-9b546bdf2c2f.png)

---
以上です。
phpのif文直後に{}無しで次の構文が書ける小ネタ

他言語では書けないことが多かった気がする。詳しく調べたことないので自信を持っては言えない。


```php
<?php
// てきとーな変数
$someCondition = true;
$anotherCondition = true;
$variation = 'A';
$arr = ['hoge', 'fuga'];

// if文の{}を書かずに次の構文を記述出来る

if ($someCondition) switch ($variation) {

    case 'A': echo "A!\n"; break;
    case 'B': echo "B!\n"; break;
    default: echo "others!\n"; break;


} else foreach ($arr as $item) {

   echo "{$item} \n";
}

```

配列チェックしてからforeachしたい時、ネストが見かけ上増えなくてきれいに見える。

```php
<?php
if (isset($arrOrNot) && is_array($arrOrNot)) foreach ($arrOrNot as $item) {
    // in loop

} else {
    // $arrOrNot condition invalid
}
```

PSRや一般的なコーディング規約には反するし製品では使うべきでない。
GitHubを初めて使ってみる　ブランチとマージ編

#はじめに
前回　[GitHubを初めて使ってみる](https://qiita.com/ryuji_i3/items/04a258cdcf54629fd5f3)　でGitHubへの登録から、プッシュするまでを書かせていただきました。
今回は、その続きで、ブランチ作成からマージするまでを記載していきます！！

現在のGitHubはこんな感じになってます。
masterブランチにgit.txtが存在し、以下のような内容で保存されています。

![2018-07-20_155547.png](https://qiita-image-store.s3.amazonaws.com/0/201860/f22c21db-4015-d0fc-678d-f43628d75fe1.png)

```vim:git.txt
Hello git?
```

#ブランチを作成してみよう
さっそくブランチを`git branch (ブランチ名)`で作成してみます。

```
$ git branch test
```
できました！！！？

Linuxからなにも返してきませんでしたが、本当にできているのか`git branch`で確認してみましょう。

```
$ git branch
* master
  test
```
無事できていますね。
「*」がついているところが、現在いるブランチになります。

作成したブランチに切り替えるには、`git checkout (ブランチ名)`を実行します。

```
$ git checkout test
Switched to branch 'test'
$ git branch
  master
* test
```

「*」がtestブランチに移動しました。

#作成したブランチでプッシュしてみる
testブランチで、git.txtを編集してコミットし、プッシュしてみます。
？を！！！に変更してみました。

```vim:git.txt
Hello git!!!
```

```
$ vim git.txt
$ git add --all
$ git commit -m "testブランチにプッシュ"
$ git push origin test
```

`git push origin test`では
新しく作成したtestブランチを指定します。
testブランチで作業をしているので、必ず自分のブランチにプッシュしましょう！

GitHubで確認してみます。Branchのプルダウンメニューをtestブランチに変えてみてみると・・・

![2018-07-20_161218.png](https://qiita-image-store.s3.amazonaws.com/0/201860/180a9ac3-8dd6-7af3-dbb9-a60c6a99c001.png)

testブランチではファイルが変更されていました！
また、masterブランチに切り替えてみると、まだ変更されていないのが分かると思います。

#マージしてみよう
では、最後にmasterブランチにtestブランチの変更を統合させていきます。
`git merge (ブランチ名)`でマージできます。
その前に、マージさせたいブランチに移動します。
今回はmasterブランチに移動して、testブランチをマージします。
そして、masterブランチにプッシュしてみます！

```
$ git checkout master
Switched to branch 'master'
$ git branch
* master
  test
$ git merge test
$ git push origin master
```

GitHubで確認してみます。再度masterブランチに変更してみてみると・・・
![2018-07-20_161910.png](https://qiita-image-store.s3.amazonaws.com/0/201860/a015537a-821f-35d3-0ce4-1dfe062f5203.png)

masterブランチに、testブランチの変更が反映されました！！！

#まとめ
ブランチとマージについて記載してみました。
次があればプルとかやってみたいと思います！！
Visual Studio Code (macOS) で rails を debug 出来ない/ブレークポイントで止まらない問題への対応

## 環境

- VSCode 1.25.1
- macOS 10.13.6
- ruby 5.2.1
- rails 5.2.0

## 問題

- そもそも debug を実行してもエラーになる
- なんとか debug 実行出来るようになったが、ブレークポイントで止まらない

## そもそも debug を実行してもエラーになる

下記2つは [Visual Studio CodeでRubyのデバッグをする - Tbpgr Blog](http://tbpgr.hatenablog.com/entry/2016/12/15/231752) が参考になった。

**bundle config を変更**

* bundler で生成する bin ファイルの置き場所を `./bin` から `vendor/bundle/bin` に変更
* bundler のインストール先を `vendor/bundle` では無くした

結果的に下記のような config になる

```:.bundle/config
---
BUNDLE_JOBS: "4"
BUNDLE_BIN: "vendor/bundle/bin"
```

**launch.json　をリセット**

色々なサイトに書いてある方法を試したが、古い書き方だったり、そもそも Terminal で debug-ide を起動しろだったり書いてあるがそれが必要なかった。

まず launch.json を初期化した。

1. `.vscode/launch.json` を削除
2. コマンドパレット`⌘+P`から `>debug: Open launch.json` を実行
3. 言語選択画面で`ruby` を選択

また、今回は Rails なので、 `"useBundler": true` オプションを各設定に追加する。

## ブレークポイントで止まらない

上記の設定で debug 実行まで行えるようになったが、ブレークポイントで止まらない状態になった。

新規に Rails のプロジェクトを作成して同様に設定してみると、普通に動くので何か原因があるのではないかと探っていると、どうやら `spring` が悪さをしているよう。

なので、launch.json に今度は `env` 設定を追加し、spring を動かないようにした。

ただ、同様の設定を行っても **`rails server` ではブレークポイントで止まらない…。**


## launch.json

その他、不要なファイルパス設定などを削除したりして最終的に出来上がった　 launch.json は下記の通り。

```json:.vscode/launch.json
{
  // IntelliSense を使用して利用可能な属性を学べます。
  // 既存の属性の説明をホバーして表示します。
  // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Listen for rdebug-ide",
      "type": "Ruby",
      "request": "attach",
      "cwd": "${workspaceRoot}",
      "remoteHost": "127.0.0.1",
      "remotePort": "1234",
      "remoteWorkspaceRoot": "${workspaceRoot}"
    },
    {
      "name": "Rails server",
      "type": "Ruby",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "program": "bin/rails",
      "args": [ "server" ],
      "showDebuggerOutput": true,
      "useBundler": true,
      "env": { "DISABLE_SPRING": "1", "RAILS_ENV": "development" }
    },
    {
      "name": "RSpec - all",
      "type": "Ruby",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "program": "bin/rspec",
      "showDebuggerOutput": true,
      "useBundler": true,
      "env": { "DISABLE_SPRING": "1", "RAILS_ENV": "test" }
    },
    {
      "name": "RSpec - active spec file only",
      "type": "Ruby",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "program": "bin/rspec",
      "args": [ "-fd", "${file}" ],
      "showDebuggerOutput": true,
      "useBundler": true,
      "env": { "DISABLE_SPRING": "1", "RAILS_ENV": "test" }
    }
  ]
}
```

## ENV管理

直接関係ないが行ったこととして、[direnv](https://github.com/direnv/direnv) を利用して Rails で使う環境変数を設定していたのだが、VSCode ではこいつを読む方法がないみたいだったので(昔は`envFile`オプションがあったが今は無くなったっぽい)、[dotenv-rails](https://github.com/bkeepers/dotenv) gem を利用する方法に切り替えることで対応した。

## 終わりに

* Spring が使えないとなると、どうしても実行開始に時間がかかってしまい辛いので、普段は[running spec files](https://github.com/noku/rails-run-spec-vscode) を使って今まで通り `binding.pry` を使ったほうが便利そう。
* VSCode の設定情報はオフィシャルの最新情報以外はあまり参考にしない（これは他も同じだけど…
* この情報もいつ古くなるかわからないので注意してください。