OmniAICreator/Qiita-1.07M huggingface dataset:
いい感じのトグルボタンを実装した

## はじめに

今回はサービス開発をする上でトグルボタンを実装することになり、「１から作るのめんどいのでいいサンプルパクれないかな」と思って探していたのですが、あまりいい感じのが見つかりませんでした。

### 僕の要望
- input type="checkbox" をちゃんと利用しており、楽にフォームのチェックボックスとしても利用できる
- jqueryを使用しない(動き的にもjsを利用するほどのものでもないと思うのでcssのみにしたい)
- 再現性の高いコード（楽したい）

**今回のゴール**

![toggle_button.gif](https://qiita-image-store.s3.amazonaws.com/0/176180/c989352b-023d-9e03-bca8-f13ddf86bc72.gif)

### 現実
codepenにいっぱい落ちているけど大体はどれか欠けている。他のサイトも大体変わらない印象。codepenは特にただボタンを実装すればいいことをいいことにposition:absolute;を利用しているのが多く参考にならない。

## めんどくさいけどもう実装しよう...

いいなと思ったサイトのコードを部分的に拝借して作成しました。

実際のコードがコチラ

```hoge.slim
 input#toggleButton1.toggle-button type="checkbox"
 label[for="toggleButton1"]
```
```toggle.scss
.toggle-size {
  width: auto;
  max-width: 60px;
  height: auto;
  max-height: 50px;
}

.toggle-button {
  appearance: none;
  margin: 10px;
  width: 60px;
  height: 29px;
  border: 1px solid #B3B3B3;
  border-radius: 50px;
  background-color: #fff;
  transition: background-color .4s ease;
  &:focus {
      outline: none;
  }
  &:checked {
      background-color: #6468c3;
  }
}

.toggle-button + label {
  position: relative;
  display: inline-block;
  top: -45.5px;
  left: 1px;
  width: 27px;
  height: 27px;
  border: 1px solid #B3B3B3;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
  transition: left .4s ease, background-color .4s ease;
}

.toggle-button:checked + label {
  position: relative;
  display: inline-block;
  top: -45.5px;
  left: 31px;
  width: 27px;
  height: 27px;
  border: 0px solid rgba(0,0,0,0.0);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
}
```
実際に動いている様子

![toggle_button.gif](https://qiita-image-store.s3.amazonaws.com/0/176180/c989352b-023d-9e03-bca8-f13ddf86bc72.gif)


もしかしたら不必要なコードが紛れ込んでいる可能性があるのであったら教えて頂けると助かります。
また注意点としてcssの`top:  px;`, `left:  px;`等の値は自分の作成したい場所によってはへんな感じになると思いますが、数値を調整してあげることで使用することができます。
company-modeの補完候補の移動をCtrl-nとCtrl-pでやりたい

私はEmacs+Goの環境でcompany-modeを利用して補完の候補を出しているのですが、この候補を選ぼうとしてCtrl-nで移動できないのにイライラしていました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/46856/2a87a8a1-3968-2e2e-cdb1-0da3a6b4c7c5.png)

M-n/M-pで移動するのが正解らしいのですが、そんなキーバインドがデフォルトというのは解せませんね。

これをCtrl-n/Ctrl-pで移動するようにするのは簡単で、次のように`.emacs`に書くだけです。

```elisp
+;;; Remap company-select-next and company-select-previous to C-n and C-p
+;;; via: https://emacs.stackexchange.com/questions/2988/how-to-remap-companys-select-next-and-select-previous-keys
+(with-eval-after-load 'company
+  (define-key company-active-map (kbd "M-n") nil)
+  (define-key company-active-map (kbd "M-p") nil)
+  (define-key company-active-map (kbd "C-n") #'company-select-next)
+  (define-key company-active-map (kbd "C-p") #'company-select-previous))
```

## 元ネタ

- https://emacs.stackexchange.com/questions/2988/how-to-remap-companys-select-next-and-select-previous-keys
composer: command not found と Could not open input file :/usr/local/bin/composer.phar からの対処

地獄かよ

と言うくらいハマったので備忘録的にメモ同じようにハマって時間潰してしまう人が減れば嬉しいです。

##以前インストールしたはずのcomposerがcomposer: command not foundとなってしまう件について

基本的には、
 ```$ curl -sS https://getcomposer.org/installer | php
```
```sudo mv composer.phar /usr/local/bin/composer
```

パスの確認
```echo $PATH
```

パスに/usr/local/bin: が存在していたとする。

この時もし、パスが設定されてなければこちらへ[パスの設定法](https://teratail.com/questions/91384)

パス確認できれば、composer.pharの存在の確認
```ls /usr/local/bin/composer
```

composer.pharが存在していれば、
```alias composer="php /usr/local/bin/composer.phar"
```

これで全て解決し、composerが使えれば良し

僕はここからまだ続きました。。。


##Could not open input file: /usr/local/bin/composer.phar について



```composer -v
```
を実行すると
```Could not open input file: /usr/local/bin/composer.phar
```
開けませんと。。。

その結果この後1時間ほど色々ググった結果このコマンドを打つと
```alias composer="php /usr/local/bin/composer/composer.phar"
```

```composer -v
```
成功しましたー

まあ、完全にaliasの設定が間違えてましたね。。。

自分の環境をしっかり見直すの大事ですね泣

まあ、もっと詳しく解説できる方がこれ見られたらコメントいただけると嬉しいです。

ひとまずこれで。おしまい
GR-LycheeにMotorShieldはやめたほうがいい

MotorShieldを使用した上で、カメラを使用すると、ノイズが乗る傾向が強いです。
たぶん、モータードライバーがノイズ源となっていると思います。
ノイズが乗ると、緑色になってしまうので要注意です。
写真は、MotorShieldを使用したものです。
端に緑のバーが出るのは、軽症で、普通は、前面が緑色になってしまいます。

![IMG_8355.JPG](https://qiita-image-store.s3.amazonaws.com/0/285344/0d26d05a-479c-c75f-e8cf-e27461a043c8.jpeg)

ノイズ源は出来るだけ離す方が良いと思いますので、Shieldではやめた方が良いと思います。
クロダイとキビレの画像識別

釣りが趣味で、よく黒鯛（チヌ）、キビレ（キチヌ）を釣るのですが、この2魚は姿、形がとても似ています。そのため、素人ではなかなか見分けがつきません。僕は余裕ですが。

上が黒鯛で下がキビレ。ほぼ同じですね。
一番の見分けポイントは下ビレが黒いほうが黒鯛、黄色いほうがキビレです。![12928308_1064951343567610_3334937522716603000_n.jpg](https://qiita-image-store.s3.amazonaws.com/0/307686/7b9ba849-debf-b031-4e74-1c2692b621fa.jpeg)

釣れたときに、あれ？これ黒鯛？キビレ？どっちだ？ってことがよくあると思います。
そして、キビレは黒鯛に対し味が落ちるため、釣れた時に持ち帰るかリリースするか即座に判断しないといけません。

そこで今回は、この２魚を識別することができるのか、pythonで検証しました。
将来的にはその場で写真を撮って画像をアプリに投げ、判定する。そんなことができたらいいですね。いや、いらないですね。

ソースコード、手順は以下記事を参考にさせていただきました。
■ TensorFlowで画像認識「〇〇判別機」を作る
https://qiita.com/too-ai/items/4fad0239b8b3c465fe6d

また、識別ライブラリであるTensorFlowがpython3.7では使えなかったので、一時的に
pythonのバージョンを下げるため、以下の記事を参考にさせていただきました。
■ MacでPythonに好きなバージョンを入れて切り替えられるようにする
https://qiita.com/baozam/items/76d32c8fda9399322b34

次にTensoFlowのライブリを以下記事を参考に追加しました。
■ TensorFlow Hubから学習済みモデル(Inception-v3)を利用する
https://qiita.com/shu-yusa/items/8ae5326ff55f9dd674c7


さらに画像を判定するときにエラーが出てしまったのですが、以下記事を参考にすることで解決できました。
■ Tensorflowでエラー「tensorflow error KeyError: “The name 'import/Mul' refers to an Operation not in the graph.”」が出た時
https://qiita.com/umeee/items/ffde72ec84fa2065b1ff

学習データとして、黒鯛、キビレの画像を４０枚ずつ用意し、判別機に学習させます。
学習が終われば、いよいよ画像判定です。

手始めに次の画像を判定します。
![13427887_1112147828847961_696704319063437633_n.jpg](https://qiita-image-store.s3.amazonaws.com/0/307686/09248ccc-bab5-127e-97f4-5f61ef2d4de2.jpeg)

結果はこちら。
<img width="177" alt="スクリーンショット 2018-10-28 12.03.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/307686/97a192e9-741a-cbf8-d7ad-5e959e1d437c.png">

76%キビレと判定しています。

次に黒鯛の画像を判定。![10408509_754082011321213_7219903089677204691_n.jpg](https://qiita-image-store.s3.amazonaws.com/0/307686/f0deb9b1-09d3-e996-4f81-295f1b1d6f1a.jpeg)

結果はこちら。
<img width="158" alt="スクリーンショット 2018-10-28 12.07.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/307686/67ec1824-f2bf-30f7-d27a-9cae48839d23.png">

71%黒鯛と判定していますね。

なかなか高い精度で判定できています。
React Hooksを触ってみた - State Hooks

## 概要
Reactの新機能、React Hooksのうち、`State Hooks`の紹介

## React Hooksとは？
React Hooksとは、React Ver `16.7` から導入される、クラスを書かずに `state` 管理を行える機能。
現在、Reactの `16.7.0-alpha.0` で機能を試すことができる。(10/28/18 現在)

## React Hooksを使って見るには？
手っ取り早く機能を試すには、`create-react-app`で新規reactアプリを作成すること。
そのままだと現時点での`latest`である`16.6.0`が入っているので、`@next`版を入れる(10/29/18現在)

```sh
yarn add react@next react-dom@next
```

## とりあえずExampleの実装

Reactの公式サイトに乗っているCounterの実装例を書いてみる
Code Sandboxは[こちら](https://codesandbox.io/s/mqk5ry40rx)

```app.jsx
import React, { useState } from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>You clicked {count} times </p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

const rootElement = document.getElementById("root")
ReactDOM.render(<App />, rootElement)
```

## つまりどういうことだってばよ？
まずは最初の行を見てほしい

```jsx
const [count, setCount] = useState(0)
```

ここでCounterの値を保持するstate名、`count`とそれと対になるSetter関数である`setCount`が宣言されている。
`useState()`に使われている引数は宣言したStateの初期値だ。
ボタンを押す度にsetCountが呼ばれて`count`の値が更新される。

```jsx
<button onClick={() => setCount(count + 1)}>Click me</button>
```


## 何が良くなったの？
今までのstateful componentと比べて格段にコードが短く済むようになったのと、
Classでは無いので、至るところで`this`を書かなくても良くなり、とっつきやすくなった。
参考までに上記のコードを今までのReactの手法で書いたらこうなる。

```app.jsx
import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {
  constructor() {
    super();
    this.state = { count: 0 };
  }

  setCount(val) {
    this.setState({ count: val });
  }

  render() {
    const { count } = this.state;
    return (
      <div>
        <p>You clicked {count} times </p>
        <button onClick={() => this.setCount(count + 1)}>Click me</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```

## 他の機能は？
今回紹介したのはReact Hooksの基本であるState管理を行う為の機能、`State Hooks`。
React Hooksには他に以下の機能がある
- `Effect Hooks` - クラスを宣言しなくてもStateの状態をListenしてState以外の操作が行える
- `Custom Hooks` - 他のComponentで流用できるHooks
これらについてはまた後日記述する。

## 参考
[Hooks at a Glance - React](https://reactjs.org/docs/hooks-overview.html)
[Introducing Hooks - React](https://reactjs.org/docs/hooks-intro.html)
[Writing Custom Hooks - React](https://reactjs.org/docs/hooks-custom.html)
「勝ちつづける」組織を作る基本哲学（自律した組織を作り、組織文化として定着させる）

###シンプルかつライト
誰もが理解でき実行できること。広く、すばやく定着するためには難しいもの、量が多いものは難しい。

###対モノ・コト（×対個人）
問題の原因を人に当てはめてしまうと、対立・反発・離脱・不協力・排除を引き起こしてしまう。問題を外在化すること。「あなたはなぜ○○をしたのか？」ではなく「○○をしたのは何があったからなのか？」と尋ねる。前者は人を問題の原因としており、後者はモノ・コトを問題の原因としている。

###スモールステップ
いきなり大きな変化を求めない。大きな理想を追求しない。できることからはじめ、小さな成功体験を積み重ねる。

###柔軟
こだわりすぎないこと。前例にとらわれないこと。

###完璧をもとめない
考えて立ち止まらないこと。走りながら考えること。完璧な正解などないと心得る。

###目的に立ち返る
その方法、その行動、その計画は、本来の目的に沿ったものなのかを考える。手段が目的にならないよう注意する。

###リーダー、主役、キーマンをつくらない
まわりがその人を伺いながら行動するようにしない。意見が率直に言える雰囲気を保つ。作業の属人化を防ぐ。「誰もがキーマンになる」という文化を組織に定着させる。

###仕組みでミスを防ぐ
「人が気を付ける」という改善策だけでなく、「人が誤らないよう仕組みを作る」

###問題点ばかりを見ない
問題点を見つけ、なんでもかんでも改善してしまうと、うまくいっていることも（悪い方向に）変えてしまうことがある。
php-master-changes 2018-10-27

今日は ext/tidy の HTML 5 要素用の定数追加があった！ 1 コミットだけだった！

# 2018-10-27
## cmb69: Add TIDY_TAG_* constants supported by libtidy 5
- https://github.com/php/php-src/commit/0d6490598dc2ab09ebd5cc28c4da6eb4eb11f98d
- ext/tidy で、[libtidy 5](http://api.html-tidy.org/tidy/tidylib_api_5.0.0/tidyenum_8h.html#ae5b597c0999422ff383f08ab595ef5e8a16d20becf3c3cb022ddabccc83d8c314) で使える HTML5 要素用の定数 TIDY_TAG_* を追加
nodebrewとnodeのバージョンが違う




```
cd $HOME/.nodebrew/current/bin

$ ./node -v
v11.0.0

$ node -v
v10.5.0
```


### npmのパスを調べる

```
npm bin -g

/usr/local/bin
```

cd /usr/local/bin


ここにいたので、ここのnodeを使わないように


pathを調べる
vi ~/.bash_profile


```
export PATH=$PATH:$HOME/.nodebrew/current/bin
```

nodebrewのパスを先に解決するように変更

```
export PATH=$HOME/.nodebrew/current/bin:$PATH
```


# それでも変わらない場合

shellを確認する

```
chsh
```

↓ zshになっていれば
https://support.apple.com/ja-jp/HT208050

zsh用の設定を行う

vi .zprofile

```
export PATH=$HOME/.nodebrew/current/bin:$PATH
```
ReactNative > createMaterialBottomTabNavigatorの使い方


createMaterialBottomTabNavigatorの使い方

公式ページを読んでもさっぱりわからなかったのでメモ

[createMaterialBottomTabNavigator · React Navigation](https://reactnavigation.org/docs/en/material-bottom-tab-navigator.html)


↓のようなマテリアルなボトム・バー
![Kobito.QxbyFT.png](https://qiita-image-store.s3.amazonaws.com/0/49910/a1d7f0c9-f666-03d1-4dcb-82766c6c3281.png "Kobito.QxbyFT.png")


以下に使い方サンプルあり
[Snack](https://snack.expo.io/ByodbqZGQ)


使い方
createMaterialBottomTabNavigatorを作って、
App.jsで使うだけ。

なんてステキ仕様

[createBottomTabNavigator · React Navigation](https://reactnavigation.org/docs/en/bottom-tab-navigator.html) の方はRedux-Offlineでバグがありましたが、createMaterialBottomTabNavigatorはちゃんと動きました。




### App.js

```js:App.js
import React, { Component } from 'react';
import MyTabs from 'Navigation';

export default class App extends Component {
  render() {
    return (
      <MyTabs />
    );
  }
}

```



### Navigation.js

```js:Navigation.js
import React, { Component } from 'react';
import { Platform } from 'react-native';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import Icon from 'react-native-vector-icons/Ionicons';

import HomeScreen from 'HomeScreen';
import ProfileScreen from 'ProfileScreen';
import SettingsScreen from 'SettingsScreen';

export default createMaterialBottomTabNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        tabBarLabel: 'Home',
        tabBarColor: '#842655',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon size={25} name={ Platform.OS === 'ios' ? (focused ? 'ios-home' : 'ios-home-outline') : 'md-home' } style={{ color: tintColor }} />
        )
      }
    },
    Profile: {
      screen: ProfileScreen,
      navigationOptions: {
        tabBarLabel: 'Profile',
        tabBarColor: '#1e1e1d',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon size={25} name={ Platform.OS === 'ios' ? (focused ? 'ios-contact' : 'ios-contact-outline') : 'md-contact' } style={{ color: tintColor }} />
        )
      }
    },
    Settings: {
      screen: SettingsScreen,
      navigationOptions: {
        tabBarLabel: 'Settings',
        tabBarColor: '#ff3838',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon size={25} name={ Platform.OS === 'ios' ? (focused ? 'ios-settings' : 'ios-settings-outline') : 'md-settings' } style={{ color: tintColor }} />
        )
      }
    }
  },
  {
    shifting: true,
    activeTintColor: 'white',
    inactiveTintColor: '#ddd',
  }
);
```
Redux-Offline > POSTでデータ送信方法






[Make your offline-first React app with Redux-Offline - David Tran](https://jslancer.com/blog/2017/05/23/no-internet-no-problem/)



[Redux Offline – 构建离线优先的Web和React Native Apps - JavaScript开发 - 评论 | CTOLib码库](https://java.ctolib.com/article/comments/41626)

以下を参考にした

My code:

```
dispatch({
      ...executingDispatch,
      meta: {
        offline: {
          effect: {
            url: GRAPHQL_URL,
            method: TYPE_POST,
            body: JSON.stringify(query),
            headers: buildHeaders(token)
          },
          commit: { type: WARDROBE_ITEMS_SUCCESS, value: { params } },
          rollback: dispatchErrorAlertObject()
        }
      }
    });
```





```
export const postQRCodeData = jsonBody => ({
  type: types.POST_QRDATA_TYPE,
  payload: { jsonBody },
  meta: {
    offline: {
      // the network action to execute:
      effect: { url: urlList.urlQRSave, method: 'POST', body: JSON.stringify(jsonBody)  },
      // action to dispatch when effect succeeds:
      commit: { type: types.RECEIVE_QRDATA_RESULT_TYPE, meta: { jsonBody } },
      // action to dispatch if network action fails permanently:
      rollback: { type: types.RECEIVE_ERROR_QRDATA_RESULT_TYPE, meta: { jsonBody } }
    }
  }
});

```
猫博士アプリ(1)

世の中には色々な種類の猫がいます。
ペルシャ猫やシャム猫など。

猫の種類に詳しくなりたい！という気持ちから、
猫の種類を勉強できるwebアプリを作成しようと思います。

内容はざっくりとこんな感じ

①トップページ
　画面中央に「ネコ博士」の文字を置き、
　その下にSTARTボタンを設置

②問題ページ(STARTボタン押下で表示)
　猫の画像と猫の種類の選択肢を表示

③正解ページ(解答が正しいときに表示)
　「正解」と表示

④不正解ページ(解答が間違いのときに表示)
　「不正解」と表示

開発環境はcloud9にします。

まずはプロジェクトの作成

```
$ ruby new cat_app
$ cd cat_app
```
プロフジェクトの中身はこんな感じ

```
~/cat_app $ ls
app  bin  config  config.ru  db  Gemfile  Gemfile.lock  lib  log  package.json  public  Rakefile  README.md  test  tmp  vendor
```
Gitで管理します。

```
~/cat_app $ git init
~/cat_app $ git add -A
~/cat_app $ git commit -m "Initialize repository"
~/cat_app $ git remote add origin https://github.com/ikunobu/cat_app.git
~/cat_app $ git push -u origin master
```


ここから、①トップページの作成作業に入ります。
ブランチを切り、コントローラを作成します。

```
~/cat_app $ git checkout -b make_top_page   
~/cat_app (make_top_page) $ rails g controller top index
```
ページを編集します

```app/views/top/index.html.erb 
<h1>猫博士</h1>
<a href="#">START</a>
```

画面表示はこんな感じ

![top_page.png](https://qiita-image-store.s3.amazonaws.com/0/146679/59637f79-5ab6-e347-7c17-1f3eda84a193.png)

今日はここまで、、、
Minecraftサーバーのログインを検知してSlackを飛ばすBotを召喚する

## 経緯
最近身内マイクラ鯖を立てまして結構みんな楽しんでやってくれているようなのですが、みんなで一緒にできないことが多いっぽいのです。
誰かがログインして通知をもらえたらみんな幸せなのではと思ったのでBotを召喚することにしました。

## 開発環境

- DockerのArch Linux (動作環境: Ubuntu 18.04 Server)
- Python 3.6.6

## 概要

1. Minecraftからデータをn秒間隔で取得。
    - [mcstatsrv.usのJSONAPI](https://api.mcsrvstat.us/)を1分ごとに叩いて取得
    - [mcapi.de](mcapi.de)なんてものもあるようです。
    
2. SlackのWebhookを叩いて通知
- [ここ](https://producesomething.slack.com/apps/new/A0F7XDUAZ--incoming-webhook-)から簡単にWebhookURLを取得できます。

## 中身

```
import time
import json
import requests
import threading
from lib.slack import *



# Polling Motsunabe minecraft
def motsunabeMinecraft():
    preHowManyPlayer = 0
    prePlayers = []
    players = []
    while True:
        res = requests.get("https://api.mcsrvstat.us/1/example.com")
        data = res.json()
        howManyPlayer = data["players"]["online"]
        if howManyPlayer > 0:
            players = data["players"]["list"]

        if howManyPlayer > preHowManyPlayer:
            ## Someone has logined.
            diffSet = set(players) - set(prePlayers)
            loginUsers = list(diffSet)
            for loginUser in loginUsers:
                send_slack("マイクラ鯖へ{}がログインしました。".format(loginUser))

        if howManyPlayer < preHowManyPlayer:
            ## Someone has logouted.
            diffSet = set(prePlayers) - set(players)
            loginUsers = list(diffSet)
            for loginUser in loginUsers:
                send_slack("マイクラ鯖から{}がログアウトしました。".format(loginUser))

        print("Number of login players is {}".format(howManyPlayer))
        preHowManyPlayer = howManyPlayer
        prePlayers = players
        time.sleep(60)


if __name__ == "__main__":
    threading.Thread(target=motsunabeMinecraft).start()

    print("Connected..")
```

ちなみにThreadingをつかっているのは同時にDiscord.pyのログインBotを動かしているためです。単体で動かす場合は必要無いとおもわれ。

## 結果

![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/108489/2dd5bb89-8363-108a-ed19-04fdf174039e.png)

*うるさくなりすぎてみんなミュートにするのでありました。*
C#での動画再生(OpenCvSharp使用)


## 環境
・Visual Studio 2017
・OpenCvSharp3-AnyCPU

## ソースコード一式
https://github.com/visyeii/MovieOpenCvSharp

## 導入方法
### NuGetパッケージマネージャー起動
1. Visual Studioで新規にプロジェクトを作成する。（今回はMovieOpenCvSharpとした）
1. ツール＞NuGetパッケージマネージャー＞ソリューションのNuGetパッケージの管理
![MovieOpenCvSharp - Microsoft Visual Studio 2018-10-28 08.41.29.png](https://qiita-image-store.s3.amazonaws.com/0/125575/f699308a-01f3-9274-6013-09519158b67b.png)

### OpenCvSharp3-AnyCPUインストール
1. 参照＞検索欄に"opencv"と入力
2. OpenCvSharp3-AnyCPUを選択
3. インストール対象プロジェクトにMovieOpenCvSharpをチェック
4. インストール
![MovieOpenCvSharp - Microsoft Visual Studio 2018-10-28 08.47.24.png](https://qiita-image-store.s3.amazonaws.com/0/125575/f89950c9-95fd-58fc-8b99-5342800126e6.png)

## ソースコード抜粋
注意：
　動作検証のため```Application.DoEvents()```を使用しています。
　アプリを作る場合は別スレッドで描画するなどしてください。


```csharp

using OpenCvSharp;
using OpenCvSharp.Extensions;       // Bitmap変換に必要

private void button1_Click(object sender, EventArgs e)
{
    VideoCapture vcap = new VideoCapture(textBox1.Text);

    while (vcap.IsOpened())
    {
        Mat mat = new Mat();

        if (vcap.Read(mat))
        {
            if (pictureBox1.Image != null)
            {
                pictureBox1.Image.Dispose();//Memory release
            }

            if (mat.IsContinuous())
            {
                pictureBox1.Image = BitmapConverter.ToBitmap(mat);
            }
            else
            {
                break;
            }
            Application.DoEvents(); // 非推奨
        }
        else
        {
            break;
        }
        Thread.Sleep((int)(1000 / vcap.Fps));
        mat.Dispose();//Memory release
    }

    vcap.Dispose();//Memory release
}

```

## 説明
* 動画ファイルを開いて、フレームをbitmap変換してPictureBoxに描画しています。
* 動画再生が終わると、最後のフレームで停止します。
* 一応、ある程度のメモリ使用量に達した時点でGCが働きますが、精神衛生上よろしくないので```.Dispose()```でメモリ解放しています。

## 参考URL
http://sourcechord.hatenablog.com/entry/2014/10/05/022144
abc 095  累積dp

C
ファーストフードチェーン「ピザアット」のメニューは「A ピザ」「B ピザ」「AB ピザ」の 3 種類です。A ピザと B ピザは全く異なるピザで、これらをそれぞれ半分に切って組み合わせたものが AB ピザです。A ピザ、B ピザ、AB ピザ 1 枚あたりの値段はそれぞれ A 円、B 円、C 円です。
中橋くんは、今夜のパーティーのために A ピザ X 枚と B ピザ Y 枚を用意する必要があります。これらのピザを入手する方法は、A ピザや B ピザを直接買うか、AB ピザ 2 枚を買って A ピザ 1 枚と B ピザ 1 枚に組み替える以外にはありません。このためには最小で何円が必要でしょうか？なお、ピザの組み替えにより、必要な量を超えたピザが発生しても構いません。

```
#include<iostream>
#include<algorithm>
#include<vector>
#include<string>
using namespace std;
using ll = long long;
int main() {
	int A, B, C, X, Y;
	cin >> A >> B >> C >> X >> Y;
	if (A + B < 2*C) {
		cout << A * X + B * Y << endl;
	}
	else {
		if (X < Y) {
			int ans1 = 2 * Y*C;
			int ans2 = 2 * X*C + (Y - X)*B;
			if (ans1 < ans2)
				cout << ans1 << endl;
			else
				cout << ans2 << endl;
		}
		else {
			int ans3 = 2 * X*C;
			int ans4 = 2 * Y*C + (X - Y)*A;
			if (ans3 < ans4)
				cout << ans3 << endl;
			else
				cout << ans4 << endl;
		}
	}
	return 0;
}
```
Cにしては優しめ？

D

```
#include<iostream>
#include<vector>
#include<algorithm>
#include<string>
#include<map>
#include<math.h>
#include<queue>
#include<deque>
#include<stack>
#include<cstdio>
#include<utility>
#include<set>
#include<list>
#include<cmath>
#include<stdio.h>
#include<string.h>
#include<iomanip>
using namespace std;
#define FOR(i, a, b) for (ll i = (a); i <= (b); i++)
#define REP(i, n) FOR(i, 0, n - 1)
#define NREP(i, n) FOR(i, 1, n)
using ll = long long;
using pii = pair<int, int>;
using piii = pair<pii, pii>;
const ll dx[4] = { 0, -1, 1, 0 };
const ll dy[4] = { -1, 0, 0, 1 };
const int INF = 1e9 + 7;
int gcd(int x, int y) {
	if (x < y)swap(x, y);
	if (y == 0)return x;
	return gcd(y, x%y);
}
////////////////////////////////////////

int main() {
	ll N, C;
	cin >> N >> C;
	vector<ll>x(N + 2), v(N + 2);
	for (int i = 1; i <= N; ++i) {
		cin >> x[i] >> v[i];
	}
	x[0] = 0;
	x[N + 1] = C;
	ll cal = 0;
	vector<vector<ll>>dp(2, vector<ll>(100010, 0));
	for (ll i = 1; i <= N; ++i) {
		cal -= x[i] - x[i - 1];
		cal += v[i];
		dp[0][i] = max(dp[0][i - 1], cal);
	}
	//ここでそれまでのカロリーの最大値をメモ
	cal = 0;
	for (ll i = N; i >= 1; --i) {
		cal -= x[i + 1] - x[i];
		cal += v[i];
		dp[1][i] = max(dp[1][i + 1], cal);
	}
	ll maxcal = 0;
	for (ll i = 0; i <= N; ++i) {
		cal = dp[0][i] + dp[1][i + 1] - x[i];
		maxcal = max(maxcal, cal);
		cal = dp[0][i] + dp[1][i + 1] - C + x[i + 1];
		maxcal = max(maxcal, cal);
	}
	cout << maxcal << endl;
	return 0;
}
```
VirtualizedListでimmutable.jsのList型を使うときにハマったポイント

# TL;DR
（同じく困ってる人向け）以下いい感じにコピペすると使えます。

```
<VirtualizedList
  data={SOME_IMMUTABLE_LIST_OBJECT}
  keyExtractor={(item, index) => index.toString()}
  getItem={(data, index) => data.get(index)} // VirtualizedListでは必須プロパティ
  getItemCount={data => data.size} // VirtualizedListでは必須プロパティ
  renderItem={item => this._renderItem(item)}
/>
```


# 概要
immutable.jsのList型は、要素の引数を能動的に指定できるためとても便利です。
例えばデータベース内のidとListのindexを対応づける、という使い方もできるため、他にも使っている人がいると思います。  

しかしimmutable.jsのList型は、FlatListでは使うことができません。その場合は、代わりにその継承元?であるVirtualizedListを使うようにドキュメントで指示されています。
[参考: FlatList#data](https://facebook.github.io/react-native/docs/flatlist#data)

VirtualizedListでimmutalbe.Listを使う上での注意点をまとめました。

# 1. getItem, getItemCountプロパティが必須
プロパティを指定し忘れた場合、それぞれ次のようなエラーが出ます。
`TypeError: getItem is not a function ...`
`TypeError: _this.props.getItemCount is not a function ...`

また、getItemCountに指定したサイズ分しかループを繰り返してくれません（逆に、ループ回数を自分で指定できるということでもあります）


# 2. Immutable.Listにはgetメソッドがない
arrayのつもりでうっかりこんな書き方するとエラーになります。
`getItem={(data, index) => data[index]}`


# 3. Immutable.Listにはlengthプロパティがない
arrayのつもりでうっかりこんな書き方するとエラーになります。
`getItemCount={data => data.length}`
RJDBCでJDK Library not loaded: /Library/Java/JavaVirtualMachines/jdk-9.jdk/Contents/Home/lib/server/libjvm.dylib Errorがでた際の備忘録

# 概要
- Exploratory から、TreasureDataにアクセスする際に 以下のようなErrorが出た際とてもハマったので備忘録
- RStudioからもできなかったのですが、こちらでRSudioからもできるようになりました。

# 環境情報

| パッケージ名 | バージョン |
| --- | --- |
| Java | 10.0.2 |
| R | 3.5.0 |
| RStudio | 1.1.456 |
| rJava(CRAN) | 0.9-10 |
| RJDBC(CRAN) | 0.2-7.1 |
| Exploratory | 4.4.0.5 |

# Error内容

```
Error: package or namespace load failed for 'rJava':
 .onLoad failed in loadNamespace() for 'rJava', details:
  call: dyn.load(file, DLLpath = DLLpath, ...)
  error: unable to load shared object '/Library/Frameworks/R.framework/Versions/3.5/Resources/library/rJava/libs/rJava.so':
  dlopen(/Library/Frameworks/R.framework/Versions/3.5/Resources/library/rJava/libs/rJava.so, 6): Library not loaded: /Library/Java/JavaVirtualMachines/jdk-9.jdk/Contents/Home/lib/server/libjvm.dylib
  Referenced from: /Library/Frameworks/R.framework/Versions/3.5/Resources/library/rJava/libs/rJava.so
  Reason: image not found
```

# 解決方法

```
sudo ln -s $(/usr/libexec/java_home)/lib/server/libjvm.dylib /usr/local/lib
```

```
R CMD javareconf -n # こちらは念の為実施
```

# TreasureDataへのアクセスScript
こちらはTreasureDataさんのスクリプトから抜粋で動作しました。

```
library(RJDBC)
drv <- JDBC("com.treasuredata.jdbc.TreasureDataDriver",
            "/path/to/td-jdbc-<td-jdbc.version>-jar-with-dependencies.jar",
            identifier.quote="`")
conn <- dbConnect(drv,
                  "jdbc:td://api.treasuredata.com/testdb;type=presto;useSSL=true",
                  "YOUR_USER_NAME_HERE",
                  "YOUR_PASSWORD_HERE")
dbListTables(conn)
dbGetQuery(conn, "SELECT COUNT(1) AS cnt FROM www_access")
```

# 参考
- https://support.treasuredata.com/hc/en-us/articles/360001487927-R-Language-Driver-Install
- https://github.com/rstudio/rstudio/issues/2750
Python Flask, GET, POST 基本動作メモ

## はじめに
この記事はFlask初心者の私が [Flask Quickstart](http://flask.pocoo.org/docs/1.0/quickstart/) を元に作成した，GETメソッド，POSTメソッドの基本的な動作についてまとめたメモです．

### 環境
- python 3.7.0
- flask  1.0.2

## コード  

```python:test_request.py
from flask import Flask, request, Markup, abort

app = Flask(__name__)


@app.route('/')
def index():
    html = '''
    <form action="/test">
        <p><label>test: </label>
        <input type="text" name="query" value="default">
        <button type="submit" formmethod="get">GET</button>
        <button type="submit" formmethod="post">POST</button></p>
    </form>
    '''
    return Markup(html)


@app.route('/test', methods=['GET', 'POST'])
def test():
    try:
        if request.method == 'GET':
            return request.args.get('query', '')
        elif request.method == 'POST':
            return request.form['query']
        else:
            return abort(400)
    except Exception as e:
        return str(e)


if __name__ == '__main__':
    app.run()
```

## 実行
```terminal:terminal
python test_request.py
```

## 実行結果
### ルート
127.0.0.1 - - [28/Oct/2018 09:05:05] "GET / HTTP/1.1" 200 -
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43136/e6ac8494-9182-5af8-ba93-de2f1b5b39f3.png)


### GETメソッド
127.0.0.1 - - [28/Oct/2018 09:06:18] "GET /test?query=test_get HTTP/1.1" 200 -
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43136/a16ad956-b91d-60de-ef2a-8e7c29867701.png)
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43136/060200bb-14bd-75d0-8016-2182bbc076d5.png)

### POSTメソッド
127.0.0.1 - - [28/Oct/2018 09:07:22] "POST /test HTTP/1.1" 200 -
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43136/7b8d3bc3-73c2-efbb-4c23-db6ec270f544.png)
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43136/8eb2e4cc-6864-462c-402c-1cbcdff3c890.png)


### 直接アクセス → GET
127.0.0.1 - - [28/Oct/2018 09:08:13] "GET /test HTTP/1.1" 200 -
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43136/9fa90e9c-f49c-3dd9-d0cb-3d3e16f6c898.png)


## 参考
Quickstart — Flask 1.0.2 documentation
http://flask.pocoo.org/docs/1.0/quickstart/
プロンプト設定が効かない、.bashrcや.bash_profileが読み込まれない

UbuntuのDockerコンテナ上で、 `adduser user_name` のように作成したユーザーでログインした時に『プロンプト設定が効かない』、『.bashrcなどが読み込まれない』ことがあった

# 原因

```bash
$ echo $SHELL
/bin/sh
```

ログインユーザのシェルがshになっていた。

# 対応方法

- ログインシェルを変更する
 - または /etc/passwdを直接書き換える

```bash
chsh -s /bin/bash user_name
```

## 今後アカウント作成時のデフォルトシェルを `/bin/bash` にする

- 現行設定を確認

```bash
useradd -D | grep SHELL

SHELL=/bin/sh
```

- デフォルトシェルを `/bin/bash` にする

```bash
useradd -D -s /bin/bash

# vimで書き換える場合
vim  /etc/default/useradd
```

- `SHELL=/bin/bash` となっていることを確認する

```bash
useradd -D | grep SHELL

SHELL=/bin/bash
```
sshとsocatでVPN

https://blog.monophile.net/posts/20180105_socat_vpn_tap.html
これのssh版

# サーバ側

- socatコマンドをパスワードなしでsudoで実行できるようにしておく


# クライアント側

```sh:クライアント側で実行
mkfifo fifo
cat fifo | (ssh sakura sudo socat - tun:10.0.0.1/24,tun-type=tap,tun-name=tap1,iff-up,iff-promisc) | sudo socat - tun:10.0.0.2/24,tun-type=tap,tun-name=tap1,iff-up,iff-promisc > fifo
```
オンプレストレージの設計項目メモ

基本的なことのメモ。

|No.   |項目  |備考  |
|:---|:---|:---|
|1|RAIDアレイ|HDD、SSDをどうまとめてRAIDアレイとするか。ホットスペアも。|
|2|ストレージプール|RAIDアレイをどうまとめるか。一部メーカーには存在しない|
|3|ボリューム|RAIDアレイ、もしくはストレージプールからホスト（サーバ）への割当サイズ|
|4|ホスト割当|作成したボリュームをどのホストから参照できるようにするか。共有ディスクなら複数ホスト|
|5|優先コントローラ|作成したボリュームをどちらのコントローラで処理するか。優先コントローラでない方に接続するとコントローラ間の帯域を食いつぶす|
|6|ゾーニング|WWPNゾーニングかポートゾーニングか|
|7|ファブリック構成|FCスイッチ間をつなぐかどうか。ストレージ製品によって推奨構成は異なるけど、つないだ場合もデータがFCスイッチ#1とFCスイッチ#2の間を通過するような構成は非推奨のことが多い|
|8|スナップショット|製品仕様に依存する|
|9|ディスクの監視|製品仕様に依存するけど基本やるべき|

思いつくところとかあったら追記します。
Vue.jsを使って非同期で取得した文章に改行を入れる方法

#背景
Vue.jsで非同期で取得した改行入りの文章をそのまま出力しても改行がされません。
一般的に、jsで改行を入れようと思ったら改行コードをbrタグに変換する必要があるかと思いますが、Vue.jsのデリミタは自動でHTMLタグをエスケープしてしまいます。そのため、v-htmlを使用して出力する方法がありますが、そのままだとXSSになってしまいますのでサニタイズが必須です。
クライアントサイドオンリーの方だと忘れがちな処理かと思いますので記しておきます。

#方法
```javascript:index.js
this.text = this.text.replace(/\n/g, '<br/>');
```
改行コードをbrタグに置き換える。

```vue:Index.vue
<div>{{ text }}</div>
```
上記のようにしても、改行コードがエスケープされてしまうのでv-htmlを使用する。

```vue:Index.vue
<div v-html="text"></div>
```
このままではXSSとしてJavascriptが実行されてしまうので、サニタイズが必要。
> 任意の HTML をあなたの Web サイト上で動的に描画することは、 XSS 攻撃を招くため大変危険です。v-html は信頼済みコンテンツのみに利用し、 絶対に ユーザの提供するコンテンツには使わないでください。

そこで下記のライブラリを使用してサニタイズします。
https://github.com/punkave/sanitize-html

```javascript:index.js
import sanitizeHTML from 'sanitize-html';

Vue.prototype.$sanitize = sanitizeHTML;
```
ライブラリをインポートして、$sanitizeとしてVueインスタンスに登録します。

```vue:Index.vue
<div v-html="$sanitize(text)"></div>
```
こんな感じで設定すれば改行ができるようになります。

以上。
Dockerで構築したWordPress環境のMySQLにMySQL Workbenchから接続する

# はじめに
今更ながらWordPressローカル環境をDockerで構築したので、その際にMySQL WorkbenchからDockerのMySQLに接続した方法についての備忘録。

# 説明しないもの
- Dockerの使い方
- MySQL Workbenchの使い方

# 環境
macOS Sierra 10.12

```bash
$ docker -v        
Docker version 18.06.0-ce, build 0ffa825
```

# docker-compose.ymlの設定

```docker-compose.yml
version: '3.3'

services:
   db:
     image: mysql:5.7
     volumes:
       - db_data:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: somewordpress
       MYSQL_DATABASE: wordpress
       MYSQL_USER: wordpress
       MYSQL_PASSWORD: wordpress
     ports:
          - "4306:3306"

   wordpress:
     depends_on:
       - db
     image: wordpress:latest
     ports:
       - "8000:80"
     volumes:
        - "$PWD/wp:/var/www/html"
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: wordpress
       WORDPRESS_DB_PASSWORD: wordpress
volumes:
    db_data:
```

基本的に[クイックスタート](https://docs.docker.com/compose/wordpress/#define-the-project)のものを使用。

テーマとプラグインだけマウントしたい場合は下記のようにしている。

```docker-compose.yml
volumes:
  - ./themes:/var/www/html/wp-content/themes
  - ./plugins:/var/www/html/wp-content/plugins
```

portが3306だとローカルのMySQLとバッティングするので、それ以外のものを設定する。

```docker-compose.yml
ports:
  　- "4306:3306"
```

接続する前に立ち上げておく。

```bash
$ docker-compose up -d
```

# MySQLWorkbenchに接続する
<img width="899" alt="スクリーンショット 2018-10-28 2.32.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/243815/a25694ff-64f9-e4a2-4caa-092b3eac5a34.png">
Connection Method: Standard (TCP/IP)
Hostname: 127.0.0.1
Username: root
password: `MYSQL_ROOT_PASSWORD`のもの

`Test Connection`をクリックして、`Successfully made the MySQL connection`が表示されればOK。
UNITYシェーダ UsePassでシェーダーファイルをまとめる

1つのシェーダーに複数のパスが書かれることが多い
例えば　Forward、ForwardAdd、Outline、ShadowCaster、Deferred
と。
また、シェーダーも目的別に複数ふえます
キャラ用、キャラ アルファクリップ有、キャラ 自己発光あり・・・　背景、背景クリップ有、背景 自己発光あり、背景 輪郭線あり・・・
それらをそのまま書くと　コピーペーストだらけの保守性のわるいものになります
そこで　保守性をあげるために
cginclude、UsePassなどがあります

とりあえず今回は、Passが多くなり醜くなったのでUsePassできれいにする

https://github.com/YukiMiyatake/UnityLesson/tree/UsePass

#元のコード
Passが複数あります

```cpp
Shader "hogehoge"
{
	Properties
	{ 
             hogehoge 
	}

	SubShader{
		Tags{ hoge }

		Pass
		{
			name "FORWARD"
			hogehoge
		}


		Pass
		{
			name "FORWARD_ADD"
			hogehoge
		}

		Pass
		{
			name "OUTLINE"
			hogehoge
		}

		Pass
		{
			name "SHADOW_CASTER"
			hogehoge
		}


    }
    FallBack "HOGE"

}

```

パスが増えるたびに　どんどんコードが長くなりますし
シェーダーを増やすごとに　このファイルをコピーしてカスタマイズしていきます
保守性やばいですね


#UsePassする
上記のPass{} の中身を　UsePassを使い名前で参照します

```cpp
Shader "hogehoge"
{
	Properties
	{ 
             hogehoge 
	}

	SubShader{
		Tags{ hoge }

		UsePass "hoge/FORWARD"
		UsePass "hoge/FORWARD_ADD"
		UsePass "hoge/OUTLINE"
		UsePass "hoge/SHADOW_CASTER"
	}
	FallBack "HOGE"
}
```

Passの中身のシェーダーコードが名前で参照でき、これでパスやシェーダーが増えても安心！

Passの中身は

```cpp
Shader "hoge" {
			
	SubShader{
		Pass
		{
			Name "FORWARD"
			hoge
		}
	}
}
```

のように別のファイルにパスの中身をかけます
Shaderに名前をつけ、PassもNameで名前をつけます
Shader名/Pass名　で呼び出す

Shader名は、Materialにシェーダーを適用するときの名前のあれです
今回のパスの中身を記述したシェーダーは Materialから設定させたくないので
Shader名をHiddenから始めます

また　注意点としては  PassのNameは　大文字小文字を使えますが、大文字小文字の区別なく判断されるので
私は大文字で統一しています
fish shell で pyenv anaconda環境の初期設定(mac) 

## はじめに
クリーンインストールされたmacに触れる機会があったので、タイトル通りの備忘録です。

## 手順
まずは<a href="https://brew.sh/index_ja">こちら</a>からhomebrewのインストール

```
# fishをインストール
$ brew install fish

# デフォルトのshellをfishに変更
$ chsh -s /usr/local/bin/fish
```
ターミナルを再起動すると、fishになっています。

<font color="Crimson">chsh: /usr/local/bin/fish: non-standard shell</font>
というエラーが出た場合、
テキストエディタで`/etc/shells`を開き、末尾に`/usr/local/bin/fish`を追記すると、うまく行くと思います。

## pyenvとanacondaのインストール

```
$ brew install pyenv

# インストール可能なanacondaのリストを確認
$ pyenv install -l | grep anaconda

# anacondaのバージョンを指定してインストール
$ pyenv install anaconda3-5.2.0
$ pyenv global anaconda3-5.2.

# pathを通す(pathは自身の環境に合わせて記述ください)
$ set -gx PYENV_ROOT "$HOME/.pyenv"
$ set -x PATH $PATH "$PYENV_ROOT/bin"
$ status --is-interactive; and . (pyenv init - | psub)
```
これでpyenvとcondaコマンドが使えるようになりました。
しかしfishはこのままでは、`conda activate`が使えないようなので、テキストエディタで下記を記載します。

```
# テキストエディタでファイルを開く
$ vim ~/.config/fish/config.fish

# 末尾に下記を記述して保存
source (conda info --root)/etc/fish/conf.d/conda.fish
```
これで、conda activateが使えるようになりました。

cuiを再起動後、うまく動作しない場合は`~/.config/fish/config.fish`の記述が間違えている可能性があるので、確認してみてください。
ISUCON8でやったこと

ISUCON8に同僚＆元同僚と「チーム人間性」として参加し、本戦5位となりました。
記事を書くまでがISUCONという言もあり、来年以降の参考になるかもしれないので何点か書き残しておきます。

この記事では自分がやったことだけを主に書きます。チームメイト目線での記事はこちら。

- [ISUCON8本選に出場して5位だった](https://ocadaruma.hatenablog.com/entry/2018/10/21/004353)
- [ISUCON8本戦で5位になった話](https://qiita.com/mshibuya/items/321a5896b793cb62a8ac)

# 本戦で自分がやったこと

問題内容は[こちら](https://github.com/isucon/isucon8-final)。

### ロウソクチャートをキャッシュ

過去の時刻のロウソクチャートは変化しないので、一度取得したらメモリにキャッシュするようにした。スコアも多少上がり採用。

が、のちの別の最適化(tradeの非正規化)の導入時に、噛み合わせが悪かったのかfailするようになったため無効化。その後failしないようにできたものの、スコアが下がるようになっていたので結局最後まで無効化していた。

結果論だが、ここに掛けた工数は勿体なかったのかも。

### N+1問題の解消

`GET /info` や `GET /orders` で、各orderに紐付くtradeを取得するというN+1問題があったのでそれを解消。ついでに、同じuserIdのUserをDBから引き直していたのも解消した。

ここで `t.Price = tAmount.Int64` という痛恨のコピペミス。チームメイトの手まで煩わせてしまった...猛省。

どう考えても速くなるはずと思っていたが、スコアはほとんど上下せず。でも採用。今考えると、シェアボタン有効化前だったので頭打ちになっていたり、各userに紐付くorder数(N)が小さかったからかもしれない。

### その他

- `HasTradeChanceByOrder` で、lowestとhighestは片方しか要らないので必要な方だけ取得するように
  - 効果見えなかったか何かで結局採用せず。ベンチの振れ幅だった可能性はあるかも
- `POST /orders` を小手先の変更で速くできないか試すもfailしたため不採用

## 次回に向けて

計測してボトルネックとなっている箇所から速くする戦略自体は正しいと思うが、「効果大きいかは分からないが遅くはならないはず」且つ「割とすぐ直せる」ような箇所はさっさと手を出してマージしても良いかも知れない。序盤のコードリーディングで細々した改善点に気付いたりするが、序盤にしっかり測ろうとしても他のボトルネックやベンチの振れ幅で改善効果が分かりにくかったり、終盤には忘れてたり手を出す余裕が無かったりするため。

今回だとこの辺など。

- `LIMIT 1` にしたら良さそうと10:40に気付いたのに、導入したのは14:18だった
- 静的ファイル配信はボトルネックにならなかったため手を出さなかったが、やって損は無かったはず

# 予選で自分がやったこと

問題内容は[こちら](https://github.com/isucon/isucon8-qualify)。

### sheetをメモリで持つように

sheetは最初からDBに入っているが、更新されず大した量でもないのでメモリ上で引けるようにした。

### `getEvent` の高速化

「全席についてループし、予約が入ってないか各席で毎回DBから引く」ような元の実装を、「入っている予約達をDBから引き、予約が入ってない席にはデフォルト値を仕込む」ような実装に変更。

これは滅茶苦茶効果が大きかったのだが、実装当初は後述の罠により延々failしていた。

### ロックの掛け方がおかしいのを修正

[ここ](https://github.com/isucon/isucon8-qualify/blob/master/webapp/go/src/torb/app.go#L591-L601)の順番が逆という罠。`getEvent` と直接は関係無いのだが、ここを直さないと上記 `getEvent` 高速化が効かなかったため大変苦しかった。

### テーブルでロックするように

終盤、デッドロック系でどうにもスコアが安定しなかったため採った策。多少遅くなってもスコア0になるよりマシという考えで、 `SELECT FOR UPDATE` している箇所を `LOCK TABLES` を使うように書き換えた。

安定を取ったせいで予選落ちしたら辛いなぁと逆にハラハラしていたが、結果的にベンチガチャに失敗したチームも多かったようなので良かったと思う。

# 最後に

運営の皆様ありがとうございました。実際素晴らしかったと思います。
MacのFinderで開いているディレクトリにcdできるコマンド作った（Fish shell）

# 作ったもの
タイトル通りMacのFinderで開いているディレクトリにcdできるコマンドを随分前に作りました。Apple Scriptの部分は誰かのコードから拝借しました（すみません出典を覚えてません）。このコードを`~/.config/fish/functions`に`cdf.fish`という名前で保存すれば使えるようになります。

# コード

```shell
function cdf
	set target (osascript -e 'tell application "Finder" to if (count of Finder windows) > 0 then get POSIX path of (target of front Finder window as text)')
        if test -n "$target"
                cd $target
                pwd
        else
                echo 'No Finder window found' >&2
                false
        end
end
```
【初心者向け】Vue.jsの双方向データバインディング

# 双方向データバインディングとは
- データとUIを結びつける
- ここで言う双方向とはデータを更新すればデータが更新されて、データが更新されればUIが更新される

文章だけだとなかなか分かりづらいので例を上げてみます。

# 実例
main.js

```js
(function(){
  "use strict";
  var vm = new Vue({
    el: '#app',
    data: {
      name: 'masha'
    }
  });
})();
```
ｖｍという変数に対してnew Vueしてあげます。
new Vue = Vueのインスタンス作成と考えて良いと思います。
続いて、elというキーを指定し、cssセレクタ同様'#app'と指定します。
このモデルにデータを保持してもらうため、dataというキーを指し、nameというキーでmashaというデータを指定します。

以下のHTMLでmain.jsのデータをUIに反映させてみましょう。

index.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Vue App</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>

  <div id="app">
    <p>Hello {{ name }}！</p>
    <input type="text" v-model="name"></input> 
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>//CDNを読み込む
  <script src="js/main.js"></script>//JSの読み込み

</body>
</html>
```
上記の通りJavaScript側のデータは**｛｛ ｝｝**で表現できます。
先程main.js内で、dataには、nameというキーでmashaというデータを指定していしたので、**Hello {{ name }}**とすると、UIではHello mashaと表示されます。
![Screen Capture 40.gif](https://qiita-image-store.s3.amazonaws.com/0/253605/82bacc86-e0e1-8b27-d2d0-1140545c126c.gif)
真・UnityTimeLineで、特に拡張せずに、イベントとして発行していいかを自由に設定する方法（強引）

#開発環境
Unity2018.2.3f1
VisualStudioCommunity2017

##アプリとして吐き出したチェック対象
PC
OculasGo（apkのインストール)


#読者対象者
Unityのタイムラインをゲームで使いたい人
タイムラインでこの期間だけ、何かの入力が有効なイベントをとりたいなどの人

ただし、以下の人は役に立つ内容ではありません。
TimeLine側からイベントを発行を行う。のを実装したいと考えている方。

###得られる知見
上記の解決

#前書き
前回の記事にて、以下の内容を記述しました。

TimeLineから条件によって、呼び出すTimeLineを変える方法の失敗談
https://qiita.com/herieru/items/8024dc3e8abd7989c65b

しかしながら、この方法は、<b>Editor上</b>でのみで動作する方法で
exeとして吐き出したり、OculasGoで実行するとてんでイベントなんて来やしない内容でした。
なので、前回のは実質失敗記事になりました。（タイトルも変えた）


#今回の内容
特定の時間内に、特定のボタンを押した時に、実行していいタイミング（イベント）
かどうかを判断する一つの解決策です。
ただ、設計とかの概念としては、一切考慮していないものになります。
たぶんその辺は、もっと有名な方々が、その辺の記事を書いているので、その記事をお読みください。

#どんな時に使う？
例えばこんな時
・TimeLine上のここからこの時間の間だけ、ボタンの入力を受け付けるようなもの
・特定の時間制限つきで何かの判定を行うためのもの


#完成図

![TimeLineのイベントの取得の設定を行う.png](https://qiita-image-store.s3.amazonaws.com/0/101366/4b13339f-5945-ad6d-2c76-046d7f0b97b3.png)

ざっくりいうと、上記の図のようにEventCheak用のGameObjectの<b>Active状態か</b>をみて、その状態をイベントが欲しいスクリプトから見て、イベントを行ってよいかの判断を行うようにします。



#手順
１．hierarchy上に、GameObjectを置き、それのActiveを切る
２．それの参照をイベント判定を行いたいところのスクリプトに対して、GameObecjectの参照をInspectorで設定を行う
３．TimeLineで、配置したGameObjectをActiveControlTrackで設定を行い、イベントが欲しいタイムラインのタイミングで、設定する。

４．スクリプト側から、イベント（入力など）が行われた際に、今はイベント期間中として有効かどうかを確認して、有効だったら、内部でイベントを発行する。


といった感じです。

なので、TimeLineから、<b>イベントを発行するわけではない</b>ので注意が必要です。
やってはいけないこと

#この記事の目的
プログラミングを始めて間もない人に私と同じようになってほしくない、今同じような状況にいる人の参考になればと思います。

内容も短いので私の経験を反面教師にしてください。

#公式サイト、動画学習サイトを見るだけ
**コードを見るだけ**で手を動かさないと**本当に痛い目にあいます。**

もちろん無駄ではありませんが、何がどのように動いているのか、何故動いたのか、何がそれを動かしたのかが見ただけでは何も理解できません。


入門者向けの記事、動画だとどの言語も同じような内容ばかり(条件文、繰り返し処理など）なので**わかった気になってしまいます。**

これが**1番怖い事**でわかった気になってしまっているから次々レベルの高い内容に目を通してしまい、もちろんその内容もほとんど見るだけなので使えるようになんてなりません。

また、「分からないことが分かっていない」というのも深刻です。

例えば野球がしたくてYouTubeを見てフォームを真似してバットを振ってみる人と、動画を見るだけの人では身につくスピードが明らかに違います。

そして振ってる間に**何か気づくことが必ずあります。**

プログラミングも同じように読むだけではなく参考にしたものと同じものを作る、コードを書くことで何が理解できていないかはっきりし、理解できなかったことが体に身につく瞬間があります。


**泥臭く、手を動かし続けましょう。**
エンジニアのモチベーションを高める目標設定の考え方

エンジニアとして働いてはいるものの、来期の目標設定に何を書こうか迷っている人も多いと思います。
また、向いていないエンジニアとしての成長戦略を続けていて失敗し続けている人も多いと思います。
個人的にはただの技術オタクで資格とるのとか面倒で無駄だなあと思ってしまうのでそういう人向けに
以前からやってみたいなと思っていた方法論をこの機に記載しておきます。

---------
### [Strength Finder](https://www.gallupstrengthscenter.com/home/ja-jp)
という5つの強みと弱みを見つけ出す診断ツールがあります。
まずはこれをベースに考えて行きましょう。

---------

私の場合は下記の強みを持っています。

Railsエンジニアという立場で考えた場合に自分がやると成果が出る事を分析してみます。

|強み|人間面で活かすべき所|エンジニアとして活かすべき所|
|:-----------------:|:------------------:|:------------------:|
|司令性|トラブル時の問題解決に積極的に対応する|　なし　|
|目標思考|　なし　|デプロイやAWS周りの知識や技術の強化|
|慎重さ|要件が煮詰まるまで対話をする|Railsアーキテクチャを吸収して正確なコードを的確にコミットする|
|公平性|知識の共有と交換を積極的に行う|　なし　|
|活発性|他のエンジニアが心地よく働けるように働きかける|2ヶ月に1回勉強会への参加する|

従来の業績評価としての評価方法とは別の切り口から考えているので、
以下に定性的に定量的にアウトを出せるかまたは評価できるかは別に考えないといけないのですが、
大企業やSIでよくあるギッチギチの成果主義の管理体制で無駄な資格とかたくさん取らされる目標を無理やり立てさせられるよりも、緩めに人に優しく管理するならこういう方がみんな気持ちよく積極的に技術力を上げていけるのではないかなと思っています。

---------
### [OKR](https://www.kaonavi.jp/dictionary/okr/)
という目標設定のフレームワークもあります。

---------
現在働いてる組織で導入しているので一旦こちらにROMっておきます。
npm不要どころかHTML1つだけでVueとVuetifyが試せるテンプレート

# すぐつかえます
Vuetify使ってみたいなぁ、Vuetify使ってる本番に手入れする前にちょっとUI実験したいなぁ、、というわがままな俺のために、CDNを使ってすぐにVueとVuetifyで遊べるSandboxテンプレートを用意しました。

# テンプレート（HTML）
```html:template.html

<!DOCTYPE html>
<html>

<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
    <div id="app">

    <!-- ここから -->

    <v-app>

        <v-system-bar app>
            Single HTML Template
        </v-system-bar>

        <v-navigation-drawer app>
            <v-sheet>
                Hello!
            </v-sheet>

            <v-divider></v-divider>

            <v-sheet>
                Left Bar
            </v-sheet>
        </v-navigation-drawer>

        <v-main>

            <v-toolbar></v-toolbar>

            <v-container fluid>

                <h1 class="display-3">GYU-DON</h1>

                <div class="display-1">{{message}}</div>

                <v-chip close v-model="chip1" @click="onChipClick" @input="onClose">
                <v-avatar>
                <img src="https://randomuser.me/api/portraits/men/35.jpg" alt="trevor">
                </v-avatar>
                GYUDON MAN
                </v-chip>

            </v-container>

        </v-main>

        <v-footer app>hoge</v-footer>

    </v-app>

    <!-- ここまで！ -->

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    <script>
        new Vue({
            el: '#app',
            vuetify: new Vuetify(),
            data: {
                message: "this is the best of food.",
                chip1: true
            },
            methods: {
                onChipClick: function(ev) {
                    this.message = "YOSHINOYA is better.";
                },
                onClose: function(ev) {
                    this.message = "good night.";
                }
            }
        });
    </script>

</body>
</html>

```

## 変更履歴
2021/10/17 Vuetify `v2.5.10` 対応
2020/12/18 Vuetify `v2.3.21` 対応
2019/9/7 Vuetify `v2.0.15` 対応
2019/2/16 `v-chips` でコンポーネント利用のイメージがつきやすくなっていい感じ
2019/2/16 `v1.5.1` 対応

## 参考
https://jp.vuejs.org/v2/guide/index.html
https://vuetifyjs.com/ja/getting-started/quick-start
量子情報のための線形代数

#本記事の目的

私は複雑系科学の専攻の人間です。量子情報を勉強した際に、「線形代数がどのように量子情報に生かされているのかもっと前から知っておくべきだった」と痛感したので、そのような人へ向けて記事が書けたらと思います。しかし、線形代数のテキストは非常に数が多いので、差別化を図るべく、ここでは講義では扱われることが少ない内容に焦点を絞っていきたいと思います。
本稿は、このままではまずいと感じ、勉強をやり直した&LaTeXの練習も兼ねた投稿となります。

ただ、私は俗に言うピュアマスの者ではないので、厳密性に欠ける記述があるかと思われますが、ご容赦ください。

ちなみに、私が主に参考にしてる本は
・[量子情報科学入門(共立出版)](https://www.amazon.co.jp/%E9%87%8F%E5%AD%90%E6%83%85%E5%A0%B1%E7%A7%91%E5%AD%A6%E5%85%A5%E9%96%80-%E7%9F%B3%E5%9D%82-%E6%99%BA/dp/4320122992/ref=pd_lpo_sbs_14_t_1?_encoding=UTF8&psc=1&refRID=Q2MQ3VS4KD5AGR7G39P0)
・[量子物理学のための線形代数(培風館)](https://www.amazon.co.jp/%E9%87%8F%E5%AD%90%E7%89%A9%E7%90%86%E5%AD%A6%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E7%B7%9A%E5%BD%A2%E4%BB%A3%E6%95%B0%E2%80%95%E3%83%99%E3%82%AF%E3%83%88%E3%83%AB%E3%81%8B%E3%82%89%E9%87%8F%E5%AD%90%E6%83%85%E5%A0%B1%E3%81%B8-%E4%B8%AD%E5%8E%9F-%E5%B9%B9%E5%A4%AB/dp/456302516X)
になります。

特に２冊目は、中原トポロジーでお馴染みの中原さんの本です。学部１年次の線形代数の講義では、扱われないことが多いブラケット記法や双対空間などの内容がコンパクトにまとまっています。「量子情報に興味あるけど、線形代数から確認していきたい！」という方にはオススメです。学部2,3年生でも読める内容です。前半が線形代数で、後半が量子力学と量子情報への応用といった内容になります。

#本記事の計画

1.[ベクトル空間の導入](https://qiita.com/adamu-of-FUN/items/9bd633a0f3cf0739fd17)
2.[Hilbert空間]()
3.[行列と行列式]()
4.[線形演算子と行列]()
5.[テンソル積Hilbert空間]()
6.[正規行列]()
7.[特異値分解]()

と言う感じになります。記事はこれから書くので、上のリンク先から飛べるようにしたいと思います。よろしくお願いします。
`Regexp#match` では `\A` より `\G` が有用

[Rubyのリファレンスマニュアル](https://docs.ruby-lang.org/ja/2.5.0/doc/spec=2fregexp.html)に載っていない正規表現機能が、モヤモヤしていた問題を解決してくれた。

## 困っていたこと
文字列 `str = "1+2*(3*(4+5)+6*78)+9"` の n+1 文字目から始まる数字の列 `/\d+/` を抜き出したい。（ n+1 文字目が数字でなければマッチ失敗）

| n | マッチ |
|:--:|:----:|
|  0 |  "1" |
| 15 | "78" |
| 14 | 失敗<br>(`"*"`だから) |

思いついた方法をいくつか試してみる。

```ruby
str = "1+2*(3*(4+5)+6*78)+9"

# 案1
regexp1 = /\d+/
regexp1.match(str,  0) #=> #<MatchData "1">    # OK
regexp1.match(str, 15) #=> #<MatchData "78">   # OK
regexp1.match(str, 14) #=> #<MatchData "78">   # NG

# 案2
regexp2 = /\A\d+/
regexp2.match(str,  0) #=> #<MatchData "1">    # OK
regexp2.match(str, 15) #=> nil                 # NG
regexp2.match(str, 14) #=> nil                 # OK（に見えるだけであり期待しない動作）

# 案3
regexp3 = regexp2
regexp3.match(str[ 0..-1]) #=> #<MatchData "1">    # OK
regexp3.match(str[15..-1]) #=> #<MatchData "78">   # OK
regexp3.match(str[14..-1]) #=> nil                 # OK

match_data = regexp3.match(str[15..-1])
match_data.offset(0) #=> [0, 2]   # str[(15+0)...(15+2)] == match_data.to_s
match_data.pre_match #=> ""
```

- **案1**： [`Regexp#match` は第2引数にマッチ開始位置を指定できる](https://docs.ruby-lang.org/ja/latest/method/Regexp/i/match.html)。これを利用すれば文字列の途中から調べられる。
	- しかし3番目がNGなように、マッチが部分一致のため、マッチ開始位置が数字でないことに気付けない。
- **案2**： 正規表現に「文字列先頭」のアンカー `\A` を追加し、部分一致でなく前方一致で動作させる。
	- これはマッチ開始位置の指定と相性が悪い。文字列途中からマッチ開始したら、 `\A` にマッチしないので必ず失敗する。
- **案3**： しかたないのでマッチ開始位置の指定を諦め、 n+1 文字目以降の文字列を切り出してからマッチを試す。
	- 動作自体は完璧。テストケースは全部成功している。
	- でも `#match` に用意された機能が使えず、新しい文字列を作らなければいけないというのは、**どう考えても効率が悪い**。もっとスマートな方法があるのではないか？
	- 今回の要件とは関係ないが、 `MatchData` の内容が元の `str` に対するものでない問題もある。

## 解決策
Rubyの正規表現エンジンである[鬼雲のドキュメント](https://github.com/k-takata/Onigmo/blob/master/doc/RE.ja)を見ていたら、アンカー（錨）に知らないものがあった。

```text:Onigmo/doc/RE.ja
5. 錨

  ^       行頭
  $       行末
  \b      単語境界
  \B      非単語境界
  \A      文字列先頭
  \Z      文字列末尾、または文字列末尾の改行の直前
  \z      文字列末尾
  \G      照合開始位置
```

**照合開始位置** `\G` 。名前からして今回の用途に向いていそうな雰囲気がある。

というわけで案2の `\A` をこれに変えて試してみる。

```ruby
str = "1+2*(3*(4+5)+6*78)+9"

# 案4
regexp4 = /\G\d+/
regexp4.match(str,  0) #=> #<MatchData "1">    # OK
regexp4.match(str, 15) #=> #<MatchData "78">   # OK
regexp4.match(str, 14) #=> nil                 # OK

match_data = regexp4.match(str, 15)
match_data.offset(0) #=> [15, 17]   # str[15...17] == match_data.to_s
match_data.pre_match #=> "1+2*(3*(4+5)+6*"
```

全てのテストケースで正しく動作した。

文字列を切り出すなんてことはせず `#match` の機能で済んでいるので、案3の不満点を解消できた（最善かはわからないけど）。 `MatchData` の内容は元の文字列 `str` に対する情報になっているのも嬉しい。

## 宿題
正規表現によるマッチを利用する他のメソッドでも、 `\A` より `\G` のほうがいいだろうか？

- `Regexp#match?`
- `String#index`
- `String#rindex`
- 開始位置を指定できない（暗に0になっている）メソッド
ansibleの勉強を初めてみた

# ansibleメモ
## イベントリーファイル
- 資材を配置するサーバを指定できる
- []で括ることで、サーバグループを作成する可能

```
server1.sample.com
server2.sample.com

[mail]
server3.sample.com
server4.sample.com

[db]
server5.sample.com
server6.sample.com

web  ansible_host=server1.company.com ansible_connection=ssh   ansible_user=root
db   ansible_host=server2.company.com ansible_connection=winrm   ansible_user=admin
mail ansible_host=server3.company.com ansible_connection=ssh   ansible_ssh_pass=P@#
web2 ansible_host=server4.company.com ansible_connection=winrm

localhost ansible_connection=localhost

パラメータ例
ansible_connection - ssh/winrm/localhost
ansible_port - 22/5986
ansible_user - root/administrator
ansible_ssh_pass - Password
```

- インベントリーファイル作成

```
[osboxes@osboxes test-project]$ cat inventory.txt
target1 ansible_host=192.168.11.30 ansible_ssh_pass=osboxes.org

[osboxes@osboxes test-project]$ ansible target1 -m ping -i inventory.txt
target1 | FAILED! => {
    "msg": "Using a SSH password instead of a key is not possible because Host Key checking is enabled and sshpass does not support this.  Please add this host's fingerprint to your known_hosts file to manage this host."
}
```

ssh接続をしたことないサーバに接続する場合には、上記のようなエラーが出るみたい
そのため、ansibleから接続する前に、一度sshコマンドでサーバに接続する

- 便利メモ

サービスの起動もできる
serviceコマンド

テキストファイルの書き換えも可能
lineinfileコマンド

ドメインネームサーバへの追加
vars: dns_server

コマンドのループもできる
with_items:
  -
  -

- ansible roles

include <playbook name>
vars_files:
  - variables.yml

tasks:
  - include: tasks.yml

playAbleでいろいろ確認できるみたい

力尽きたのであとで書き直そ
Python: 標準モジュールで簡易的なWebサーバーを立ち上げる


コマンドラインで下記を実行。

```
$ python3 -m http.server 8080
```

# 余談
リクエストを見たいだけなら、`nc -l`で良かったりする。

```
$ nc -l 8080
```

この状態で別のプロセスから`curl localhost:8080`を実行すると、下記のような結果が得られる。

```
$ nc -l 8080
GET / HTTP/1.1
Host: localhost:8080
User-Agent: curl/7.54.0
Accept: */*

```

もちろんncはHTTPのプロトコルでお話しているわけではなく、curlのプロセスは終了しない。`Ctrl+C`で切断する。