OmniAICreator/Qiita-1.07M huggingface dataset:
スネークケースのレスポンスをキャメルケースで受け取りたかった

apiレスポンスのJSONのプロパティってスネークケースで扱われていますよね。
ただフロントはキャメルケースで統一してコーディングしていることが多いと思います。

キャメルケースで書いているにapi取り出し時だけスネークケースで書くのって気持ち悪い。。。。。
ということでobject内のプロパティをすべて置換するように関数を書いてみました。

#作ってみた

```javascript
const convertProperty = (src, converter) => Object
    .keys(src)
    .map(key => {
        const converted = converter(key)
        if (Array.isArray(src[key])) {
            return { [converted]: src[key].map(_ => convertProperty(_, converter)) };
        } else if (typeof src[key] === "object" && src[key] !== null) {
            return { [converted]: convertProperty(src[key], converter) };
        } else {
            return { [converted]: src[key] }
        }
    })
    .reduce((acc, cur) => ({ ...acc, ...cur }));
```

・第一引数に置換したいプロパティを持つobject
・第二引数にプロパティ名を受け取り加工して返すコールバック

を渡します。

実際使ってみます

```javascript
const sample = {
        "sample_title": "test",
        "sample_array": [
            {
                "first_property": 1,
                "second_property": 2
            },
            {
                "first_property": 1,
                "second_property": 2
            }
        ],
        "sample_object": {
            "first_property": 1,
            "second_property": 2
        }
}

const toCamel = s => s.replace(/_./g, matched => matched[1].toUpperCase());

const convertedObj = convertProperty(sample, toCamel);
consloe.log(convertedObj);
```

出力結果

```
{ sampleTitle: 'test',
  sampleArray:
   [ { firstProperty: 1, secondProperty: 2 },
     { firstProperty: 1, secondProperty: 2 } ],
  sampleObject: { firstProperty: 1, secondProperty: 2 } }
```

ネストオブジェクトも対応できていていいかんじですね！

ここではconverterとしてスネークケース→キャメルケースにする関数を渡していますが、
コールバックかえればキャメルケース→スネークケースも対応できるので割と実用的にできた気がします。


# 実際のユースケース
axiosのinterceptorsと一緒に使ったりしています。

```javascript
const Axios = require("axios");

const toCamel = s => s.replace(/_./g, matched => matched[1].toUpperCase());

const convertProperty = (src, converter) => Object
    .keys(src)
    .map(key => {
        const converted = converter(key)
        if (Array.isArray(src[key])) {
            return { [converted]: src[key].map(_ => convertProperty(_, converter)) };
        } else if (typeof src[key] === "object" && src[key] !== null) {
            return { [converted]: convertProperty(src[key], converter) };
        } else {
            return { [converted]: src[key] }
        }
    })
    .reduce((acc, cur) => ({ ...acc, ...cur }));

const httpClient = Axios.create({ timeout: 10000 });

httpClient.interceptors.response.use(
    (response) => Object.assign(response, { data: convertProperty(response.data, toCamel) })
);
```

上記のように共通のaxiosインスタンスにプロパティ変換処理を書いておけばresponseすべてがキャメルケースに変換されたうえで渡ってくるのでとてもいい感じです！

#終わり
最後までお読みいただきありがとうございました。
気になる点、アドバイスございましたら是非コメントをお願いいたします！
React Native Debuggerの使い方

# React Native Debuggerとは
React Nativeアプリをデバッグするためのアプリになります。
React Nativeでデバッグをしたい時にはReact Native Debuggerが良き。
React Native Debuggerだと以下の機能が集約されており、利用することができます。
- Chrome 
- Devtools
- React Devtools
- Redux Devtools

[公式ページはここ](https://github.com/jhen0409/react-native-debugger)

# React Native Debuggerのインストール方法
ターミナルで下記のコマンドを実行する。

```console
$brew update && brew cask install react-native-debugger
```

# React Native Debuggerの使い方
### Expoを使用しない場合のやり方
(1)Xcodeでシミュレータを起動する
(2)シミュレータを選択して、[Hardware]->[Erase All Content and Settings...]を選択し、[Erase]をクリック
(3)React Native Debuggerを起動する
(4)(2)のシミュレータを選択して、xcodeで実機ビルドする
(5)アプリが起動したら、[command + D]を実行し、[Debug JS Remotely]を選択
  しばらく待つと、勝手にReact Native Debugger接続される

### Expoを使用する場合のやり方
下記のページを参考にしてみてください。
https://qiita.com/Tetsuya3850/items/e8d4450fcb3df5522b7a
ラズパイ: Buster向け OpenCV4


- 追記:2019-10-11: OpenCV 4.1.2 armv7lのみ、ビルドしました。
    - [libopencv4_4.1.2-20191011.1_armv7l.deb](https://github.com/mt08xx/files/raw/master/opencv-rpi/raspbian-buster/libopencv4_4.1.2-20191011.1_armv7l.deb)

- 2019-08-20: OpenCV 3.4.7 / 4.1.1をビルドしました。(`OPENCV_ENABLE_NONFREE=OFF`です。前回のは、手違いでONになってたっぽいです)
https://github.com/mt08xx/files/tree/master/opencv-rpi/raspbian-buster

    - RPi 2/3/4向け
        - [libopencv4_4.1.1-20190820.1_armv7l.deb](https://github.com/mt08xx/files/raw/master/opencv-rpi/raspbian-buster/libopencv4_4.1.1-20190820.1_armv7l.deb)
        - [libopencv3_3.4.7-20190820.1_armv7l.deb](https://github.com/mt08xx/files/raw/master/opencv-rpi/raspbian-buster/libopencv3_3.4.7-20190820.1_armv7l.deb)

    - RPi 1/Zero向け
        - [libopencv4_4.1.1-20190820.1_armhf.deb](https://github.com/mt08xx/files/raw/master/opencv-rpi/raspbian-buster/libopencv4_4.1.1-20190820.1_armhf.deb)
        - [libopencv3_3.4.7-20190820.1_armhf.deb](https://github.com/mt08xx/files/raw/master/opencv-rpi/raspbian-buster/libopencv3_3.4.7-20190820.1_armhf.deb)
    - 違いは、
         - armhf:  `-D ENABLE_VFPV3=OFF -D ENABLE_NEON=OFF`
         - armv7l: `-D ENABLE_VFPV3=ON  -D ENABLE_NEON=ON`
    - ビルドの詳細は、コミットのコメント( [3.4.7](https://github.com/mt08xx/files/commit/8d924a0f66d82a22a25de4aa240398fd27d89546) / [4.1.1](https://github.com/mt08xx/files/commit/1bf2a4edd086e464e797804f227e83a21618bce5) )を見てください。



- 追記:2019-07-16
Raspbery Pi 4B (2GB) で OpenCV 3.4.6をビルドしました。いつものオプションで、1時間程度。
`time make -j4`にて、

    ```
real    57m25.179s
user    195m27.130s
sys    14m11.865s
```
> https://github.com/mt08xx/files/raw/master/opencv-rpi/libopencv3-buster_3.4.6-20190715.1_armhf.deb




# 概要
Buster向けに、OpenCV 4.1.0 をビルドしてみました。
([いつもの](https://qiita.com/mt08/items/e8e8e728cf106ac83218))顔検出(test-face_detect.py)しか、**テストしてません..**
busterで、python3は、`3.7.3`になりました。



# TL;DR

```bash
curl -SLO  https://raw.githubusercontent.com/mt08xx/files/master/libopencv4-buster_4.1.0-20190625.1_armhf.deb
sudo apt install -y ./libopencv4-buster_4.1.0-20190625.1_armhf.deb
```

# 環境
- Raspberry Pi 3B
- microSD 16GB
- Raspbian: 2019-06-20-raspbian-buster.img

# 実行例


```shell-session
pi@raspberrypi:~ $ python2 --version
Python 2.7.16
pi@raspberrypi:~ $ python2 -c 'import cv2; print(cv2.__version__)'
4.1.0
pi@raspberrypi:~ $ python3 --version
Python 3.7.3
pi@raspberrypi:~ $ python3 -c 'import cv2; print(cv2.__version__)'
4.1.0
pi@raspberrypi:~ $ 
```

# その他

- うごかない場合、以下を実行すれば、必要なライブラリはインストールされると思います。

	```
	sudo apt-get install -y \
		build-essential cmake pkg-config \
		libjpeg-dev libtiff5-dev libpng-dev \
		libavcodec-dev libavformat-dev libswscale-dev libv4l-dev \
		libxvidcore-dev libx264-dev \
		libgtk2.0-dev libgtk-3-dev \
		libcanberra-gtk* \
		gfortran \
		python2.7-dev python3-dev \
		libavresample-dev libtesseract-dev libleptonica-dev \
		libgstreamer1.0-dev  libgstreamer-plugins-base1.0-dev libhdf5-dev \
		libatlas-base-dev liblapacke-dev \
		python3-numpy python-numpy libjasper-dev
	```
iTerm2 + fishでの表示崩れを解消する

## 症状
 - pane分割時にうまく折り返せない
<img width="1226" alt="スクリーンショット 2019-06-26 13.16.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240839/ee5a6e4a-3f2d-02ca-c7c6-e9987d9ff2c3.png">

 - 補完の際にカーソル位置が前後する
<img width="1235" alt="スクリーンショット 2019-06-26 13.11.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240839/b452bd3f-9315-08d1-80f6-221a7cd82ac3.png">

## 対処
Preferences>Profiles>Textから"Ambiguous characters are double-width"のチェックを外す。
<img width="899" alt="スクリーンショット 2019-06-26 13.04.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240839/4a576a25-1a9a-6cfc-b43b-b3cc04750c76.png">

## 結果
折り返し、補完ともに表示が崩れなくなった。
<img width="1226" alt="スクリーンショット 2019-06-26 13.35.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240839/bb8d56a0-379f-997b-e0bc-8f4838f9406a.png">
<img width="1231" alt="スクリーンショット 2019-06-26 13.36.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240839/a9b81523-f9f5-28c0-1f7b-919d0e9f1a0c.png">
JIRAワークフロー：チェックボックスのチェック有無での分岐

###チェックボックス有無でボタン表示切替えと分岐を実現する
各トランジションの『条件』にて「入力値のチェック」を以下のように設定する
・チェックボックス有りの場合：対象チェックボックスフィールド ＞　0
・チェックボックスなしの場合：対象チェックボックスフィールド ＝ null
　　※nullは、設定値を空白にしたまま設定すればよい

#####例：フィールド「上長確認要」のチェックボックスにチェックがあれば「上長確認依頼」ボタンを、なければ「処理完了」ボタンを表示させ。ワークフロー分岐させる。
　①トランジションラベル「上長確認依頼」と「処理完了」のトランジションを用意する
　②「上長確認依頼」のトランジションの『条件』にて「入力値のチェック」を以下のように設定
　　　　フィールド：上長確認要
　　　　条件：＞
　　　　設定値：0
　　　　比較タイプ：文字
　③「処理完了」のトランジションの『条件』にて「入力値のチェック」を以下のように設定
　　　　フィールド：上長確認要
　　　　条件：＝
　　　　設定値： （ブランクのまま）
　　　　比較タイプ：文字
　③ワークフローを発行して有効にする


*JIRA Softwareバージョンは7.12.1*
AWS Well-Architected Framework ホワイトペーパーまとめ 5 【パフォーマンス効率】

## はじめに
AWSのアーキテクチャのパフォーマンス効率を上げるためには、どのような点に留意すればよいでしょうか？ホワイトペーパーから抜粋、まとめてみます。

#### 連載目次
[AWS Well-Architected Framework ホワイトペーパーまとめ 1 【導入編】](https://qiita.com/Catetin0310/items/6e5bd6cb573aa38f0fc0)
[AWS Well-Architected Framework ホワイトペーパーまとめ 2 【運用上の優秀性】](https://qiita.com/Catetin0310/items/179f9c587a6b8b540a8a)
[AWS Well-Architected Framework ホワイトペーパーまとめ 3 【セキュリティ】](https://qiita.com/Catetin0310/items/08e1c4843cc5571cd3a5)
[AWS Well-Architected Framework ホワイトペーパーまとめ 4 【信頼性】](https://qiita.com/Catetin0310/items/c973552de5098fdda795)
AWS Well-Architected Framework ホワイトペーパーまとめ 5 【パフォーマンス効率】 → 本記事
[AWS Well-Architected Framework ホワイトペーパーまとめ 6 【コスト最適化】](https://qiita.com/Catetin0310/items/cc57d8018a3392dd9f73)


## 設計原則とベストプラクティス
まず、設計の原則と概要です。
![01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363781/092ab06e-1d2b-20fd-ffe6-afb4bb89088a.jpeg)

次はベストプラクティスと紐づくチェック項目。
![02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363781/fa23afff-7e58-4e67-3179-160ee4468706.jpeg)

最後に各ベストプラクティスの概要です。

|-|概要|
|:--------------|:--------------|
|***選択***|アプリケーション設計、使用パターン、構成設計によって、最適なコンピューティングソリューションを選択する|
|***レビュー***|新しい技術とアプローチを取り入れる|
|***モニタリング***|エンドユーザーが認識する前に問題を修正する|
|***トレードオフ***|整合性、耐久性、容量に対して、時間やレイテンシーとのトレードオフを検討する|


## 候補サービス一覧
この柱のベースとなるサービスは、**CloudWatch**です。
トレードオフも選択に包括されると考えると、下記のような流れで設計していくことになります。

- 要件に応じて最適なサービスを選択、アーキテクチャを構築
- CloudWatchで全体的なパフォーマンスと運用状態を可視化
- もっと良いソリューションがないか、AWSブログなどで情報取得

昨今注目されているマイクロサービスには、下記を活用します。

- **Elastic Kubernetes Service(EKS)** (コンテナサービス)
- **Lambda** (サーバレスアーキテクチャの基軸)

他のマネージドサービスも入れて、一覧表にします。

![03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363781/c3eb076c-f1eb-088a-cf7a-ca3206f6ea77.jpeg)


## まとめ
パフォーマンス効率を維持するうえで留意しなくてはいけないポイントと、活用するサービスの概要、つかめましたでしょうか？次回は最後の柱、コスト最適化についてお送りします！

## 参考リンク
[オフィシャル W-Aホワイトペーパー](https://d1.awsstatic.com/International/ja_JP/Whitepapers/AWS_Well-Architected_Framework_2018_JA_final.pdf)
TailwindCSS: レスポンシブのブレークポイントを可視化するコンポーネント

[TailwindCSS]を使ってレスポンシブ対応画面を作っていると、今どのブレークポイントが使われているかわかりにくいので、アクティブなブレークポイント名を可視化するコンポーネントを作った。

[TailwindCSS]: https://tailwindcss.com/

## ブレークポイントを可視化するコンポーネント

```html
<div class="fixed top-0 right-0 m-8 p-3 text-xs font-mono text-white h-6 w-6 rounded-full flex items-center justify-center bg-gray-700 sm:bg-pink-500 md:bg-orange-500 lg:bg-green-500 xl:bg-blue-500">
  <div class="block  sm:hidden md:hidden lg:hidden xl:hidden">al</div>
  <div class="hidden sm:block  md:hidden lg:hidden xl:hidden">sm</div>
  <div class="hidden sm:hidden md:block  lg:hidden xl:hidden">md</div>
  <div class="hidden sm:hidden md:hidden lg:block  xl:hidden">lg</div>
  <div class="hidden sm:hidden md:hidden lg:hidden xl:block">xl</div>
</div>
```

上記コンポーネントをHTMLのどこかに書くと、ブラウザ画面右上にブレークポイント名が表示されるようになる。

![tailwind-responsive-selector-indicator.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/2842b48e-601e-f287-91e1-9d0f19a0416d.gif)

実際に動くコードはCodePenを参照。

<p class="codepen" data-height="468" data-theme-id="dark" data-default-tab="result" data-user="suin" data-slug-hash="PrKVOa" style="height: 468px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Tailwind CSS Responsive Active Breakpoint Indicator">
  <span>See the Pen <a href="https://codepen.io/suin/pen/PrKVOa/">
  Tailwind CSS Responsive Active Breakpoint Indicator</a> by suin (<a href="https://codepen.io/suin">@suin</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
GitHubリポジトリのStarの増加傾向が見れる、Star History

# TL;DR

* 興味のある、GitHubリポジトリのStar数の増加の様子を知りたい
* いくつかサービスがあるが、今回は[Star History](https://star-history.t9t.io/)を紹介


# GitHubリポジトリのStarの増加傾向を見たい

興味のあるGitHubリポジトリをパッと見ると、現在のStar数はわかりますが、どういう増加傾向を辿ってきたか知りたくなることがあるかもしれません。

* 最近、急にStar数が増えてきた
* コンスタントに増加している
* 最近は全然増えていない

などを知りたくなったりするかも？

GitHubリポジトリのStarの情報を可視化できるサービス、ツールなどはいくつかあるようです。

[GitHubのレポジトリについたスターを可視化する](https://rcmdnk.com/blog/2019/03/06/computer-github/)

今回は、[Star History](https://star-history.t9t.io/)を試してみることにしました。

* [Star History](https://star-history.t9t.io/)
* [Star History / GitHub](https://github.com/timqian/star-history)


# Star History

[Star History](https://star-history.t9t.io/)は、先に書いたとおりGitHubリポジトリのStarの履歴を可視化してくれるサービスです。

Google ChromeのExtensionとしても提供されています。

Star Historyに限らず、この手のツールはGitHubのAPIを使っており、認証がない状態だとRate Limitがあります。これを超える場合には、アクセストークンの取得が必要です。

[GitHub REST API v3 / Rate limiting](https://developer.github.com/v3/#rate-limiting)

今回は、Rate Limitの範囲にいるうちに使います…。


# 試してみる

それでは、Star Historyを試してみましょう。Star Historyのサイトへアクセスします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309669/28b6060d-5c9f-c2d8-5862-7020df87e30d.png)

今回は、Pythonのフレームワークである[Django](https://github.com/django/django)リポジトリで試してみましょう。

`ユーザー名/リポジトリ名`を入力して、「View star history」ボタンを押します。Djangoの場合は、`django/django`です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309669/62c41e0f-7901-7dda-a429-c3fa142308e2.png)

また、続けて別のリポジトリを追加することで、グラフの重ね合わせも可能です。ここでは、同じくPythonのフレームワークである[Flask](https://github.com/pallets/flask)を追加してみます。`pallets/flask`です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309669/6fe4cff6-c9ee-1192-97a1-1ab94f2a6434.png)

こんな感じで表示されます。

結果をクリアする場合は、ページの下部にある「Clear the result」ボタンで。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309669/11bd7606-f511-2da1-aaa1-1874a6e33c5d.png)
Ubuntuのデスクトップ環境でリモートサーバをマウントする

プログラミングと直接的に関係はないのですが。

Ubuntuというよりもgvfsだったりnautilusだったり、上物のソフトウェアの話かと思います。
ただ僕が使ってるマシンがUbuntuというだけです。

Ubuntuのデフォルトのファイラーはnautilusですが、これssh(sftp)でリモートサーバをマウントしてあたかもローカルにあるのと同様にファイラーでアクセスできるんですね。
で、そうすると何がうれしいかというと、vscodeみたいなIDEでも特別な設定なしにリモートのリソースにアクセスできるわけですよ。

普通のファイルもファイラーからのCtrl+C/Ctrl+Vでローカル/リモート間でコピペもできますし。
なんならターミナルでも透過的に操作ができる。

これ、実態はgvfsの機能ですかね。nautilusはあくまでもgvfsの機能を叩いてるんだと思います。
ちゃんと調べてないです。

さて、gvfsの機能であるという所まで辿りついたので、次はコマンドラインでマウントできると楽なのではないかというところになっていきます。

コマンドラインでマウントするには以下のコマンドを発行します。

```
gio mount sftp://USER@example.com/
```

もちろんユーザー名とホスト名は適宜変更してくださいね。

こうしてマウントするとnautilusに左側にもマウントされた項目が表示されます。
便利だ。

コマンドラインで書けたら次は自動ログインしたくなるでしょう？なりません？
僕はしたかったんですが、そこでちょっとハマったので記事を書いておこうと思った次第です。
ちなみに毎日ルーターの再起動してるために毎日接続が切れるので、接続切れた後に再接続しておいて欲しかったのが動機です。

```bash
#!/bin/bash

if [ -z $DBUS_SESSION_BUS_ADDRESS ]; then
    DBUS_SESSION_BUS_ADDRESS=unix:path=/run/user/1000/bus
fi

export DBUS_SESSION_BUS_ADDRESS

for url in \
    'sftp://USER@example.com/' \
    'sftp://USER@example.com/' \
; do
    (gio mount "${url}") > /dev/null 2>&1 &
done

```

こんな感じにDBUS_SESSION_BUS_ADDRESSが必要となるようです。
で、cronから実行すると環境変数が定義されておらずマウント出来ない。
ちなみに1000となってるところは多分uidなので適宜自分のuidにしてください。

それでは良いLinuxライフを。
Command PhaseScriptExecution failed with a nonzero exit codeの対応方法

## トリガー
iPhoneをUSB接続したまま`Run`しようとすると`Command PhaseScriptExecution failed with a nonzero exit code`が出た

## 環境
* iPhone6
    * iOS 11.2
* Xcode
    * 10.2.1

## 試したこと
* 証明書をdevelopmentのものを作成し使用
    * ERROR
* https://qiita.com/kamata1729/items/885ae2cf2a9b06594adf
  * ERROR
* pod update
  * ERROR
* https://stackoverflow.com/questions/17348912/lipo-error-cant-open-input-file/17349269
  * Pods Project in workspace -> Build Settings -> Build Active Architecture Only -> 両方`NO`
        * SUCCESS

## 所感
`Command PhaseScriptExecution failed with a nonzero exit code`の原因がまばらなので、調査して１つずつ試す他なかった。また同様にエラーが発生した時、この記事に追記していきたい。
React Redux を触った事がない人へ（概略説明）

２０１９年３月からRubyやRailsを学習しています:baby:

今月からはReact Reduxを初めて触れてみて頭を抱えて悩んでいます:thinking:

アウトプットして定着させるために、概要をざっくりとまとめてみました:v:

___
#Reactとは
UI を作ることに特化した JavaScript のライブラリ

お世話になっているProgateもReactを用いている:dog2:

さらに**MaterialーUI**というライブラリを用いるとさらにモダンな画面ができる:clap:
https://material-ui.com/

___
#Reduxとは
Reduxは、Reactが扱うUIのstate(状態)を管理をするためのフレームワーク
state(状態)はアプリケーションの描画されるページの内容

**React Reduxを使う事で...**
1つのwebページによって、1つのアプリを構築できてしまう:relaxed:
通信が行われずに次のページを描画してくれるから、ページ遷移の待ち時間が短縮できてストレス改善:ok_woman:
___
#気づき
- JavaScriptはセミコロンなくても大丈夫

　
ASIという機能で自動的にセミコロンをつけてくれる
https://ryoutaku-jo.hatenablog.com/entry/2019/02/04/222543

___
- ナウいWebページの見た目がすぐできる

<img width= 100% alt="スクリーンショット 2019-06-27 10.30.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/447788/3789893c-eba2-f515-c5b9-4938ad487717.png">

<img width= 100% alt="スクリーンショット 2019-06-27 10.31.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/447788/b5012679-0cff-88ec-2a8e-938d988e4e15.png">

<img width= 100% alt="スクリーンショット 2019-06-27 10.31.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/447788/f5212c41-9e55-9120-b7a8-d6c3509e039e.png">


**React Redux MaterialーUI**を用いて作成してみました
雰囲気出ますね:ok_woman:
AndroidのFragmentで戻るボタン押下時に特定の処理を行う方法

# Fragment側で端末の戻るボタン（バックキー）をハンドリングし、特定の処理を行う！

当初Fragment側で戻るボタンの制御をしたいと考えていたが、ActivityにてonBackPressed()をOverrideし、制御する必要があるとのことなので、以下のように実装し動作させることができた

ざっくり流れとしては以下

- Activityで戻るボタン押下時の処理をOverride
- Interfaceを通しActivityからFragmentに戻るボタン押下イベントを伝える
- Fragment側でInterfaceを継承し、特定の処理を実装


まず大元のActivityに以下を追加

```
    @Override
    public void onBackPressed() {
        Fragment fragment = getSupportFragmentManager().findFragmentByTag("handlingBackPressed");
        if (fragment instanceof OnBackKeyPressedListener) {
            ((OnBackKeyPressedListener) fragment).onBackPressed();
        }
        super.onBackPressed();
    }
```

findFragmentByTagに、適当な名前を付与しておく。
ここでは"handlingBackPressed"としておく

次に、インターフェースを作成する
OnBackKeyPressedListener.java

```
public interface OnBackKeyPressedListener {
    void onBackPressed();
}
```

次に、戻るボタンの制御をしたいFragment生成時に、"handlingBackPressed"タグを追加

```
fragment = new HogeFragment();
manager.beginTransaction().replace(R.id.main_area_layout, fragment, "handlingBackPressed").addToBackStack(null).commit();
```

HogeFragmentので作成したインターフェースを継承し、onBackPressed()内に特定の処理を追加

```
public class FavoriteItemListFragment implements OnBackKeyPressedListener {
・・・・
    @Override
    public void onBackPressed() {
        //バックキーイベントをハンドリングし、必要な処理を記載。
        //例えばActivityが制御するToolbarエリアのテキストを表示させるなど
        TextView leftToolbarText = mContext.findViewById(R.id.tool_bar_left_text);
        leftToolbarText.setVisibility(View.VISIBLE);
    }

```

以上です！
unicorn_rails 起動/停止/再起動

## 起動

```bash
# -E 環境設定
# -D デーモン起動
bundle exec unicorn_rails -E production -D
```

## 停止

```bash
kill -QUIT `cat /path/to/unicorn.pid`
```

## 再起動

```bash
kill -HUP `cat /path/to/unicorn.pid`
```

##緩やかな再起動

```bash
# 旧プロセスを保持したまま、新プロセスを起動
kill -USR2 `cat /path/to/unicorn.pid`
# 旧worker プロセスを停止 (graceful stop) 
kill -WINCH `cat /path/to/unicorn.pid.oldbin`
# 旧プロセスを停止
kill -QUIT `cat /path/to/unicorn.pid.oldbin`
```

## 参考
https://tachesimazzoca.github.io/wiki/rails3/unicorn.html
camera2でライト ON / OFF

地味にハマったシリーズ。。。

**CONTROL_AE_MODE** と **FLASH_MODE** をセットしてあげる必要がある。
あと最後に **capture** を呼ぶのを忘れずに！！

```HogeCamera.kt
    fun updateFlash(isFlash: Boolean) {
        // previewRequestBuilder → CaptureRequest.Builder
        // previewRequest        → CaptureRequest
        // captureSession        → CameraCaptureSession
        // captureCallback       → CameraCaptureSession.CaptureCallback
        // backgroundHandler    → Handler
        previewRequestBuilder.set(CaptureRequest.CONTROL_AE_MODE, CaptureRequest.CONTROL_AE_MODE_ON)
        if (isFlash) {
            previewRequestBuilder.set(CaptureRequest.FLASH_MODE, CaptureRequest.FLASH_MODE_TORCH)
        } else {
            previewRequestBuilder.set(CaptureRequest.FLASH_MODE, CaptureRequest.FLASH_MODE_OFF)
        }
        previewRequest = previewRequestBuilder.build()

        try {
            captureSession.capture(previewRequest, captureCallback, backgroundHandler)
        } catch (e: CameraAccessException) {
            e.printStackTrace()
        }
    }
```
Craft CMS でシングルセクションをエントリのように表示するプラグイン #craftcms

Craft CMS の場合シングルセクションは一意のURLになるのですが、管理画面上はシングルというセクションのグループの中にあるエントリのような見え方になります。

> Expanded Singles
> https://plugins.craftcms.com/expanded-singles

をつかうことで、それぞれを単独のメニューのように見せることができるので、使いやすくなりそうです。
python環境を整える

#実装環境
- vagrant
- virtualbox
- OS：Ubuntu[16.4]

##実施したいこと
- pythonのバージョンを3系に絞りたい
- 環境ごとにバージョンの切替をしたい

##使用ツール

- pyenv
- venv

##インストール
###pyenvインストール
gitからpyenvをクローン
※ユーザ直下のディレクトリにクローンするのが望ましい

```bash:
$ git clone https://github.com/pyenv/pyenv.git ~/.pyenv
```

###環境変数の設定

```bash:
$ echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bash_profile
$ echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(pyenv init -)"' >> ~/.bash_profile
$ source ~/.bash_profile
```

###バージョン確認

```bash:
$ pyenv -v
```

## 必要なモジュール
```
$ sudo apt install gcc make zlib1g-dev libffi-dev libssl-dev
```

###インストールできるバージョンをリスト

```bash:
$ pyenv install -l
```

###pythonのインストール

```bash:
$ pyenv install 3.7.0
```

###有効化（global）

```bash:
$ pyenv global 3.7.0
$ pyenv local 3.7.0
```

##venv

開発するディレクトリのルートディレクトリに移動
※NEW_ENV_NAMEは、自由に設定可能（今回は、python3.7）

```bash:
$ python3.7 -m venv NEW_ENV_NAME
```

ルートディレクトリ配下に、フォルダが作成される

```bash:
$ ls -lsa
total 12
drwxrwxr-x 3 vagrant vagrant 4096  6月 26 11:43 ./
drwxrwxr-x 5 vagrant vagrant 4096  6月 26 11:40 ../
drwxrwxr-x 5 vagrant vagrant 4096  6月 26 11:43 python3.7/
```

```bash:
# 開始する場合
$ source NEW_ENV_NAME/bin/activate
# 終了する場合
$ deactivate
```

##デメリット
- NEW_ENV_NAME配下に、ライブラリが膨大になっていく。
Electron + Node.js 使用時の “Uncaught ReferenceError: require is not defined” への対処

 - [Nuxt.js+Electronを試してみる](https://qiita.com/tamfoi/items/0f70bc146344ba5acaee)

上記記事を参考に環境構築したもののタイトルのエラーで起動に失敗し、なかなか時間を取られたので対処法をメモ。

# 結論
スタックオーバーフローの[この質問](https://stackoverflow.com/questions/55093700/electron-5-0-0-uncaught-referenceerror-require-is-not-defined)がドンピシャでした。 
Electron 5.0.0 以降は`nodeIntegration`の設定値がデフォルト`false`なので、有効にする必要があるとのこと。 

これを

```javascript:main.js【変更前】
const newWin = () => {
    win = new electron.BrowserWindow({})
    win.maximize()
    win.on('closed', () => win = null)
```

こうじゃ。

```javascript:main.js【変更後】
const newWin = () => {
  win = new electron.BrowserWindow({
    webPreferences: {
      nodeIntegration: true
    }
  })
  win.maximize()
  win.on("closed", () => (win = null))
```

同じところでつまずいた方の参考になれば。

# 参考リンク

 - [Electronでアプリケーションを作ってみよう](https://qiita.com/Quramy/items/a4be32769366cfe55778)
AHK(AutoHotkey)を使い　Alt ＋ b ;　現在選択中のフォルダアイコンを Ctrl + X（切り取り）状態にする

;------------
!b:: ; Alt+b
;------------

   Send , ^x ; Ctrl+x
   Sleep,200

;例：貼り付け先のフォルダがドライブDの場合  
;Run , D:\
;   Sleep,200

MsgBox , %Clipboard% の「貼り付け」先で Ctrl + V ！

Return
安く簡単にミニ四駆のステアリング機構を実現 ( Ver.0 )

#■初めに
TAMIYAのミニ四駆を改造してステアリング機構を付けて、ラジコンカー的な感じで走れるようにしてみました。ステアリングはサーボモーターで動かします。このサーボとDCモーターをobnizに接続して、スマホの加速センサーで前後左右に走れるようにしました。ミニ四駆のステアリング機構はYoutubeなんかにたくさんの作品が上がっていますが、どれも高度な加工が必要です。この投稿では、**市販のパーツの組み合わせで安く(1500円)て簡単(基本ネジ止めのみ)に実現**することを目標にしました。また、**ミニ四駆のシャーシの加工は、前輪の車軸カパーに2つの穴を開けるだけ**ですみます。ここではステアリング機構の組み立て部分のみ投稿します。obnizのプログラムは別途投稿予定です。

#■まずは完成品のデモ動作をご覧ください
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a> <a href="https://twitter.com/hashtag/%E3%83%9F%E3%83%8B%E5%9B%9B%E9%A7%86%E3%82%B9%E3%83%86%E3%82%A2%E3%83%AA%E3%83%B3%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#ミニ四駆ステアリング</a> <a href="https://twitter.com/hashtag/%E3%83%9F%E3%83%8B%E5%9B%9B%E9%A7%86?src=hash&amp;ref_src=twsrc%5Etfw">#ミニ四駆</a>　<br>ミニ四駆のステアリング機構の初期バージョン(Ver.0)完成。スマホ加速度センサー×obniz×サーボ×DCモーターでコントロール。Qiita投稿準備中。 <a href="https://t.co/onLBRLriA2">pic.twitter.com/onLBRLriA2</a></p>&mdash; Google Homer (@google_homer_) <a href="https://twitter.com/google_homer_/status/1143454091579801605?ref_src=twsrc%5Etfw">June 25, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
#■組み立て方法(概要)
組み立て済みのミニ四駆が手元にあり、これに改造を加えるという流れで説明していきます。
##1.前輪の駆動パーツを取り外す。
##2.ステアリングを動かすサーボモーターをシャーシに取り付ける。
##3.市販の部品を組み合わせてステアリング部分を組み立てる。
##4.ステアリングをシャーシに固定する。
ステアリングの組み立て部分が肝です。可動部分と固定部分など全体構造をイメージしながら作業を進めるとよいと思います。
締め付ける具合等、少し難易度が高い部分もありますが、説明のコメントを参考にして下さい。

#■組み立て方法(詳細)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234533/bb022c05-ded1-1344-f51c-44178d068af2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234533/4f302af7-da11-42f7-42e7-e33e4e703569.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234533/e47897bc-b24c-cd77-e171-b759cefe2c99.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234533/9fd757e5-ed82-176d-05c3-842c5e0e7513.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234533/0e4c7b37-e228-fc48-d842-f0589bda2d14.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234533/d9ec6e19-72be-8545-1624-324ffb898a9c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234533/18c633b7-184e-8cdc-68a6-0cb9dacb777c.png)
上物のボディの先端はステアリング部分と干渉するので切り取りました。(無念)
#■まとめ
市販の安い汎用部品を使って簡単加工でステアリング機構を実現できました。ステアリング部分が大きくて見た目がいまいちなので、これからも色々と改良を加えて行きたいと思います。ステアリングプレート部分なんかは、アイスに刺さっている板みたいなやつでも行けそうな気がしています。みなさんも色々試してみて、情報いただけるとうれしいです。
AHK(AutoHotkey)を使い　Alt ＋ t ;　自分のデスクトップにタイムスタンプを使ったフォルダを作成する

;------------
!t:: ; Alt+t
;------------

;デスクトップのフルパス
todayvar = %A_Now%  

StringMid , yvar , todayvar , 1 , 4

StringMid , mvar , todayvar , 5 , 2

StringMid , dvar , todayvar , 7 , 2

StringMid , hmvar , todayvar , 9  ,4

;例：2019-06-06_1217　１分単位
cfn = %yvar%-%mvar%-%dvar%_%hmvar%

cfn = %A_Desktop%\%cfn%

;MsgBox , Today【フォルダ作成】%cfn%

;フォルダを作成
FileCreateDir, %cfn%

;作成したフォルダを開く
run , %cfn%

Sleep,300

Return
真偽値と条件分岐についてまとめる！

## &&、||の返り値と評価を終了するタイミング
&&や||を使用した場合、式全体の返り値は必ずしもtrueやfalseになるとは限りません！

Rubyでは、式全体が真または偽であることが決定するまでは***左辺から順に式を評価***します！
式全体の真または偽が確定すると、式の評価が終了し、***最後に評価した式の値を返します***！

言葉だけでは分かりにくいと思うで、コードを見て見ましょう！

```ruby:smaple.rb
10 && 100 && 1000  #=> 1000
false && 100 && 1000 #=> false
10 && nil && 1000  #=> nil

nil || false #=> false
false || nil || 10 || 100 #=> 10
```

説明していきます！

10 & 100 & 1000であれば、全ての式を評価する必要があったため、最後の条件式である1000が返り値になっています！
一方で、false & 100 & 1000は1つ目のfalseを評価した時点で式全体の真偽値が偽であることが確定したため、そこで評価を終了し、falseを返しています！

||の場合も考え方は同じです！
false || nil || 10 || 100の返り値が10になるのは、10を評価した時点で式全体の真偽値が真であることが確定したからです！

---

Rubyにおいては、if文以外でも&&や||を使うことが多いので、そのような時にこのような仕組みを理解しておくと便利だと思います！

ご静聴ありがとうございました！
MariaDBをMySQL Tunerでチューニング

[CentOS7.6にMariaDB10.2をインストール](https://qiita.com/makio15/items/e01d2c67b5890286fd49)の続き
<p><b>MariaDBをMySQL Tunerでチューニングしてみた。

・CentOS7.6
・MariaDB10.2


#チューニングとは
・パフォーマンスの向上のために色々パラメーターを設定していくこと
（今はまだフワッとした事しかわからないので勉強していく）
・MariaDBはMySQL Tunerを使用してチューニングしていくと良いよと聞いたので早速インストールしてみる

#インストール

```
# cd /usr/local/src/
# wget -O mysqltuner.zip https://github.com/rackerhacker/MySQLTuner-perl/archive/master.zip 
# unzip mysqltuner.zip
# rm mysqltuner.zip
# cd MySQLTuner-perl-master
# chmod 755 mysqltuner.pl
```
移動したり解凍したり消したり権限付与したり...ふぅ...
よしっ！実行！

```
# cd /usr/local/src/MySQLTuner-perl-master
# perl mysqltuner.pl --buffers
```
おお...なんかOKとか!!とかある?!

#設定
下の方のRecommendationsを見ていく。
①Set up a Secure password for ~
⇒これはパスワード設定らしい？今回は無視。

②Variable to adjust ~
⇒上からこんな感じで設定していってね～って書かれているのでmy.cnfに追記していく。

```
# cd /etc
# vi my.cnf
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442008/16eb125a-c610-0df2-88fb-cf3e00590d22.png)
[mysqld]の下に
例：wait_timeout = 3600

一通り追記したら
MariaDBを再起動。チューニング完了。

今回はチューニングの流れをサラッとまとめてみた。
my.cnfの詳しい追記方法は今後まとめていく予定。

>参考サイト

[https://qiita.com/Hiroki_lzh/items/3ec45f017e3be82e7b08]

何かありましたらコメントの方をよろしくお願いいたします。
mac+clangではコンパイルオプションに-OgオプションがあるとAddressSanitizerが動かない

# 概要
Linux環境で正常に動いていたCMakeLists.txtを用いてiMacでターミナル経由でc++のプログラムをコンパイル・実行してAddressSanitizer(に内包されたLeakSanitizer)(https://github.com/google/sanitizers/wiki/AddressSanitizerLeakSanitizer)
を用いてメモリリーク(newやmallocで確保したメモリの解放忘れなど)を検出しようとしたがされなかった。

丸1日以上かけて試行錯誤した結果、どうやらmac+clang8.0.0の環境下ではコンパイルオプションに-OgオプションがあるとAddressSanitizerが動かないようである事が分かった。

# 背景
xcodeでc++のプログラムを作成していた。xcodeに付属のclangのAddressSanitizerの機能(https://developer.apple.com/documentation/code_diagnostics/address_sanitizer/enabling_the_address_sanitizer)
でメモリリークを検知しようとしたところ、OSXのAddressSanitizerはメモリリークはデフォルトでは非対応で、自分で環境変数をASAN_OPTIONS=detect_leaks=1と設定する必要があるらしい。
(https://github.com/google/sanitizers/wiki/AddressSanitizerLeakSanitizer)

ということで、xcodeのEdit Scheme > Run > Argumentsから環境変数ASAN_OPTIONSをdetect_leaks=1と設定した。が、実行してみるとメモリリークがあったことは教えてくれるものの、具体的な位置などは非対応、と言われてしまい出てこずデバッグにならなかった。どうやらxcodeに付属のclangではメモリリークは非対応のよう。

なのでメモリリークに対応したclangをインストールしてターミナル経由でプログラムをビルド・実行し、メモリリークを見つけることにした。
職場の先輩が、同じプログラムをLinuxでcmakeを用いてビルドするためのCMakeLists.txtを作成してくださったのでそれを利用することにした。

# 環境
iMac macOS Mojave バージョン10.14.4

# やった事
1. clangのインストール・準備
以下のstack overflowの回答に従って、llvmのclangをダウンロード&設定。
(「```echo 'export PATH="/usr/local/opt/llvm/bin:$PATH"' >> .zshrc```」やそれの読み込み部分に関してはインストール終了時にターミナルにこれらのコマンドを入力するように指示とコマンドが出るのでそれに従ってコマンドをコピペして実行したほうが間違いが無さそう。)
CMakeLists.txtでCMAKE_C_COMPILERとCMAKE_CXX_COMPILERに/usr/local/opt/llvm/bin/clangをセットしてやる。
https://stackoverflow.com/questions/53456304/mac-os-leaks-sanitizer
(which clangでclangの場所がxcode付属の物ではなくllvmの下のものになっていることも確認してやると尚良し?)

2. 環境変数ASAN_OIPTIONSの設定
```export ASAN_OPTIONS=detect_leaks=1```
を呼ぶ。
(又は~/.bash_profileにこれを書き込んで. ~/.bash_profileで読み込む)

3. コンパイルオプション -fsanitize=addressをCMAKE_C_FLAGSとCMAKE_CXX_FLAGSに足してCMakeLists.txtのあるディレクトリに移動し、cmake .->make ->作成されたプロジェクトを実行

→これでメモリリークがある場合検出されるはず。…がされず。


# コンパイルオプションに-Ogオプションがあるとメモリリークが検知されない！
検知されない原因はCMAKE_C_FLAGSとCMAKE_CXX_FLAGSに設定されていた-Ogオプションだったようで、これらを消したところちゃんと検出されるようになった。
Linux+gcc環境では-OgオプションがついていてもAddressSanitizerはちゃんと動くがmac+clangだと駄目なようだ。

 -  -Ogオプションとは<br/>
 最適化オプションの一つらしい。<br/>
(https://kaworu.jpn.org/cpp/g++_%E6%9C%80%E9%81%A9%E5%8C%96%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3#-Og)<br/>

 - g++4.9の場合の-Ogオプションにより「有効になるオプション」に-fsanitizeに関する記述はないが、今回の環境のclang(clang 8.0.0)ではdisableにされちゃっている？<br/>
(https://kaworu.jpn.org/cpp/g%2B%2B_-Og%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E6%9C%80%E9%81%A9%E5%8C%96)

# その他ハマった事
## Cの標準ライブラリヘッダーを使用しようとしたところfatal error: 'stdlib.h' file not found #include \<stdlib.h>などと出てコンパイルが通らない。
cmakeを用いず、ターミナルで直接
```clang++ -g -std=gnu++11 -stdlib=libc++ -fsanitize=address main.cpp```
としたところ、fatal error: 'stdlib.h' file not found #include \<stdlib.h>などと出てコンパイルが通らなかった。

どうやらmacではデフォルトでは標準ヘッダーファイルがインストールされていないようで、
```open /Library/Developer/CommandLineTools/Packages/macOS_SDK_headers_for_macOS_10.14.pkg```
とコマンドを呼び、出てくるダイアログに従ってダウンロードしたら解決した。
(https://discourse.brew.sh/t/clang-can-no-longer-find-usr-include-header-files-fatal-error-stdlib-h-file-not-found/4523)
CentOS7でGoを動かすシンプルな手順

Go言語の [Getting Started](https://golang.org/doc/install) に従って進めます。

#環境確認
CentOS7の情報を確認します。

```
$ cat /etc/redhat-release
CentOS Linux release 7.6.1810 (Core)
$ uname -m
x86_64
```
#ダウンロード
アーカイブをダウンロードします。
[Downloads](https://golang.org/dl/)

```
$ cd ~
$ wget https://dl.google.com/go/go1.12.6.linux-amd64.tar.gz
```
#インストール
ダウンロードしたアーカイブを展開します。

```
$ sudo tar -C /usr/local -xzf ~/go1.12.6.linux-amd64.tar.gz
```
#環境変数
環境変数にGoのパスを追加します。
`export PATH=$PATH:/usr/local/go/bin`

```
$ vim ~/.bashrc
$ source ~/.bashrc
```

#動作確認

```
$ go version
go version go1.12.6 linux/amd64
```
以上です。
Jenkins と Windows のタスクの違い

どちらも `指定したスケジュールでプログラムを実行する` という機能を備えていますが、その本質や如何に。
個人的主観を基幹に据えて解説していきます。

Windows のタスク

- Windows の内部メンテナンスが目的で装備されているイメージ。
- 指定した bat ファイルや exe ファイルを実行できます。
- タスクを起動する方法は、下記トリガーが発動するか、手動で実行した時。
  - 定時
  - ログオン時
  - スタートアップ時
  - アイドル時
  - イベント時
  - タスクの削除/変更時
  - ユーザー セッションへの接続時
  - ユーザー セッションからの切断時
  - ワークステーション ロック時
  - ワークステーション アンロック時
- API と[使用方法の説明](https://docs.microsoft.com/en-us/windows/desktop/api/_taskschd/)があります。
- API はありますが、自動化（追加・削除・変更）が主な用途であって、公開のためではなさそうです。
- 実行結果はエラーコードのみ。例: `前回の実行結果` にて `この操作を正しく終了しました。(0x0)`

Jenkins

- 作業の自動化が目的で、その機能面において日々改善が図られているイメージ。
- プロジェクトの種類からして豊富。Java がベースになっていて、使用できるコマンドをプラグインで拡張が可能。
- ジョブを起動するには、下記ビルド・トリガーがあります。
  - リモートからビルド
     - ビルドのパラメータ化を使うと、パラメータを与えることができます。
  - SCM をポーリング
  - 他のプロジェクトの後にビルド
  - 定期的に実行
- API や使用方法の説明があります。
- web ベースの UI。未ログイン者に対しても、表示を許可する設定は可能。
- 実行結果はエラーコードや、コンソール出力をキャプチャ可能。

上記を踏まえて、個人的にはつぎのような使い分けをしています。

Windows のタスク

- バックアッププログラムの実行。毎日。特に Windows Server で

Jenkins

- プロジェクトのビルド
- オンデマンドな音声の文字起こし
- 業務上のバッチジョブの実行
個人的にアロー関数を勉強してみた

# アロー関数を勉強してみた
[ES6(ECMAScript)](https://student-engineer.net/es2015/)で導入された「関数」の新しい書き方  

自分自身で勉強のためのメモなので既にわかりやすい解説を書いてくれている記事が存在していると思います。

## アロー関数と関数の違い
大きく分けて２つ存在します。

### 1 functionより短く書ける
functionと宣言して書かなくて良い、一行で書ける
個人的に黒魔術を詠唱しやすいと感じる

```javascript:通常の関数とアロー関数の比較
// function
function intcalc(x){
  return x + 1
}
// arrow function 省略形
const intcalc = (x) => x + 1 // 1行だけの場合はreturnは不要
```

### 2 宣言元のthisを参照
アロー関数はthisの値を語彙的に束縛するらしいのですが、言葉で説明するのは難しいので実際に書いて見るのが早い気がする。

１の省略できるという違いだけを知っていると後々に不具合を解決するのに時間が掛かってしまう事になると思います。

```javascript:通常の関数内のthis
var greething = 'Good morning'

function printGreething(){
  // ここのthis
  console.log(this.greething)
}

let object1 = {
  greething: 'Hello',
  func: printGreething
}

let object2 = {
  greething: 'Good evening',
  func: printGreething
}

// 上記２つの書き方を展開して書くとこんな感じ？
let object3 = {
  greething: 'おはようございます！',
  func: function(){
    // this.greething = greething: 'おはようございます！'
    console.log(this.greething)
  }
}

```

上記２つのオブジェクトを呼び出してみたいと思います


```javascript
// 実行結果：Hello
object1.func()
// 実行結果：Good evening
object2.func()
```

printGreething関数内で利用しているthis.greethingの値は、呼び出し元によって異なるという事になります。

呼び出し元がgreethingに別の値を入れたらその値を確定するという事です。

冷静に考えてみると引数として渡してるわけでもないのにthis.greethingが呼出し元オブジェクトによって変化するって気持ち悪いですよね汗

今度はアロー関数を使って同じ処理を書きます。

```javascript:アロー関数内のthis
var greething = 'Good morning'

// arrow function
let printGreething = () => {
  // greething = 'Good morning'で確定されprintGreethingに代入される
  console.log(this.greething)
  // console.log('Good morning') こんな感じのイメージ
}

let object1 = {
  greething: 'Hello',
  func: printGreething
}

let object2 = {
  greething: 'Good evening',
  func: printGreething
}

```

上記２つのオブジェクトを呼び出してみます。

```javascript
// 実行結果：Good morning
object1.func()
// 実行結果：Good morning
object2.func()
```

アロー関数で宣言された関数は、宣言された時点でthisの値を確定（束縛）させます。

## あとがき
Vue.jsの公式リファレンスでここはアロー関数で記述をしないでくださいと書かれていたのをみて調べてみました。  
本来なら知っている事前提でVue.jsを勉強すべきなんでしょうけど順番逆になってしまいました汗

## 参考資料
[JavaScript の this を理解する多分一番分かりやすい説明](https://qiita.com/takkyun/items/c6e2f2cf25327299cf03)

[【JavaScript】アロー関数式を学ぶついでにthisも復習する話](https://qiita.com/mejileben/items/69e5facdb60781927929)
React.js 学習メモ　第9回

最近Reactの勉強を始めたので、ノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです！

#Class Component と Functional Componentの違い

>stateはデータを貯めておくことができる場所！
propsはstateが子コンポーネントな渡されてpropsという名前に変換された物!
 
Class Componentはこれ！
Class Component => state,propsどっちも使える!

**クラス構文の性質**
関数を定義する時は必ずconstructor内で
this.handleChange = this.handleChange.bind(this);で紐づけてあげないといけません。
constructor内でこう書いてあげないとrender関数やその他の関数内で呼ぶことができません。
これはclass構文の性質上なのです。
constructor内で紐づけてあげると他の関数内でthis.~と呼ぶことができるようになります。

```jsx
class Greeting extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return <h1>My name is {this.props.name}{this.props.age} years old.</h1>
  }
}
```

###追記
>Reactの16.8.0からのuseState(ステートフック)が使えるようになったみたいです。
つまり、ステートを使うためだけにClass Componentを使う必要はなくなったようです。

>ドキュメント:
https://ja.reactjs.org/docs/hooks-state.html

>useStateの紹介している部分の動画
https://youtu.be/dpw9EHDh2bM?t=1345
Functional Componentはこれ！
Functional Component => propsのみしか使えない

```jsx
function Greeting (props) {
  return <h1>My name is {this.props.name}{this.props.age} years old.</h1>
}
```
>Statelessな処理結果が変わるようなデータを内部に持たない状態を持たないコンポーネントは上記の２つの書き方の内、functional componentで実装することが推奨されている。

コンポーネントは親と子で分かれている
Class Component(親)とFunctional Component(子)の2つです。

>state => this.setState()で上書き保存ができる
props => stateからのデータを受けるだけ、上書けるが保存はできない。

#参考文献
・[30分でReactの基礎を身体で覚える](https://qiita.com/kosuke0820/items/aa2f50fc85f72b4a5be2)
・[React の Class Component と Functional Component の書き方](https://qiita.com/takutoki/items/6a4a607cf00efa032e98)
・[2018 年 React と Redux のエコシステム総まとめ](https://qiita.com/kotarella1110/items/e76bf9cca665157f3d2e)
redux公式 "三つの原則" の大体のイメージ

redux公式の"三つの原則"についての箇所を私に向けて読みやすくしました。
または用語はわかるけどイメージがつかないという人へ。



## 1.アプリの全てのstateは、1つのstore内にある。　

1つのアプリ内にstateは複数あり、それをまとめるstoreは一つのみ。
conponentのなかでstateごとに画（view）を切り替える。


## 2.stateは読み取り専用。

stateを変更する唯一の方法は、actionに書くこと。



## 3.reducerは、stateからアクションを実行して新しいstateを返す。

reducerは、stateがactionによってどのように変換されるかを指定するために書く。

前のstateを変更するのではなく、必ず新しいstateを返すようにする。

また、同じ引数を渡されたら必ず同じ結果を返す（純粋関数）。


reducerは1つから使える。
→アプリが大きくなると、stateの特定の部分を他にreducerに小分けすることで管理しやすくなる。

reducerは、呼び出しの順序を制御したり、追加データを渡したり、ページ付けなどの一般的なタスクに再利用可能なものを作成することもできる。

![iOS の画像 (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367972/b14e808a-5099-4770-fea1-5f9f20944747.jpeg)




参考：redux公式
https://redux.js.org/introduction/three-principles
論理演算 AND,OR,NAND,NOR,XOR

論理演算(Logical Operation)
別名ブール演算(Boolean Operation)とも呼ばれ、0(偽) もしくは 1(真)か0(偽) を求める演算になります。

 　
演算の種類としては、AND,OR,NAND,NOR,XOR の5種類があります。

 
　
### 論理積(AND)

X AND Y としたとき、X かつ Y となります。
つまり1(真)と0(偽)で表す場合、XとYがどちらか1(真)のときに1(真)となり、それ以外は0(偽)となります。

```
X AND Y
1  *  1 = 1
0  *  1 = 0
1  *  0 = 0
0  *  0 = 0
```
上記のように、両方の積によって1(真)0(偽)を求めることができることから、ANDは論理積といいます。

　
　
### 論理和(OR)

X OR Y としたとき、X または Y となります。
つまり1(真)と0(偽)で表す場合、XとYのどちらかでも1(真)であれば1(真)となり、両方0(偽)のときは0(偽)となります。

```
X OR Y
1  +  1 = 1
0  +  1 = 1
1  +  0 = 1
0  +  0 = 0
```
上記のように、両方の和によって1(真)0(偽)を求めることができることから、ANDは論理積といいます。

　
　
### 否定論理積(NAND)

NAND = Not AND
つまり、論理積ではないという意味なになります。

X NAND Y としたとき、X かつ Y ではない となります。
つまり1(真)と0(偽)で表す場合、すべての入力値が1(真)の場合に0(偽)を出力し、それ以外の場合には1(真)なります。

```
X AND Y  Not
1  *  1 = 0
0  *  1 = 1
1  *  0 = 1
0  *  0 = 1
```

　
　
### 否定論理和(NOR)

NOR = Not OR
つまり、論理和ではないという意味なになります。

X OR Y としたとき、X または Y ではないとなります。
つまり1(真)と0(偽)で表す場合、すべての入力値が0(偽)の場合1(真)となり、それ以外の場合は0(偽)をとなります。
要するに、どちらかに1(真)があれば0(偽)にるということです。

```
X NOR Y  Not
1  +  1 = 0
0  +  1 = 0
1  +  0 = 0
0  +  0 = 1
```
上記のように、両方の和によって1(真)0(偽)を求めることができることから、ANDは論理積といいます。

　
　
### 排他的論理和(XOR)

XOR = Exclusive OR
Exclusive(排他的) : 仲間でない者を退ける
入力値が異なるものを検出するということになり、仲間外がいたら1(真)となります。

X OR Y としたとき、X または Y となります。
つまり1(真)と0(偽)で表す場合、入力値が異なる場合に1(真)となり、入力値が同じときは0(偽)となります。

```
X OR Y
1     1 = 0
0     1 = 1
1     0 = 1
0     0 = 0
```
　
　
　
　
### 基本情報技術者試験の過去門

実際の過去問で解説したいと思います。

---
#### 問題
次に示す手順は、列中の少なくとも一つは1であるビット列が与えられたとき、最も右にある1を残し、他のビットを全て0にするアルゴリズムがある。
例えば、00101000が与えられたとき、00001000が求まる。下記手順の a に入る論理演算は何か。

手順1
与えられらビット列Aを符号なしの2進数と見なし、Aから1を引き、結果をBとする。
手順2
AとBの排他的論理和(XOR)を求め、結果をCとする。
手順3
AとCの　a　を求め、結果をAとする。

---

まずAの 00101000 から2進数での計算で1を引いてBを求めます。

```
 00101000
-       1
=00100111
```
となり、Bは00100111となります。

この計算は2進数なので一の位で0-1となり、0が引けないので繰り上がり、次も０なので繰り上がり千の位でようやく１が引けて、引けなかった0が1になるというものです。
※説明が下手で分かりにくいと思いますので、別記事に2進数の計算を上げております。
https://qiita.com/hi-scorp-d/items/3e6c72dfb3c871f6559f

　
次にAとBの排他的論理和(XOR)でCを求めます。

```
A XOR B     C
0     0  =  0
0     0  =  0
1     1  =  0
0     0  =  0
1     0  =  1
0     1  =  1
0     1  =  1
0     1  =  1
```
となり、Cは00001111となります。

　
最後に、AとCで求めたい数字00001000となる演算を考えます。

```
A  ?  C
0     0  =  0
0     0  =  0
1     0  =  0
0     0  =  0
1     1  =  1
0     1  =  0
0     1  =  0
0     1  =  0
```
となり、?が何かを考えます。

注目すべきは、中央の1と1のときは1で、それ以外は必ず0がどちらかにあり、その場合は0になっています。

この結果になるのは…

そう！　積のときだけですよね！

```
A  AND  C
0   *   0  =  0
0   *   0  =  0
1   *   0  =  0
0   *   0  =  0
1   *   1  =  1
0   *   1  =  0
0   *   1  =  0
0   *   1  =  0
```
 
つまり a に当てはまる答えは、　論理積(AND) となります。
AppCode 2019.1を使ってみました

# はじめに
この記事は「Xcodeのエディタ機能が物足りない」と感じたとあるエンジニアが、AppCodeを試してみた所感です。
2019/6/26の段階の情報を元に内容を作成しておりますので、その点ご配慮ください。

# AppCodeとは
[AppCode: Smart Swift/Obj-C IDE for iOS & macOS Development](https://www.jetbrains.com/objc/)
AppCodeはJetBrains社が開発した、iOS/macOSアプリ開発用のIDEです。
Objective-C、Swift、C++など多くのプログラミング言語をサポートしています。

# AppCodeの良いところ
XcodeとAppCodeを比較したときに、ここが良いと思う部分をまとめます。

## EditorConfigが使える
**XcodeはEditorConfigが使えません。**
僕はホームディレクトリに「.editorconfig」を設置して、ホームディレクトリ以下のファイルを編集するときにEditorConfigで設定したルールを適応するという方法を取っています。

しかしXcodeはEditorConfigが効かないため、この運用ができません。
インデントスタイルや改行コードの統一、文字コードの設定や、行末文字の削除などEditorConfigにはとてもお世話になっているのですが、これが効かないのは割とストレスです。

AppCodeではプラグインを導入すればEditorConfigが使えるので、フォーマットを特に意識せず、コーディングに集中できるようになります。

## デフォルトでコードフォーマット機能がある （Alt + Command + L）
**Xcodeにはデフォルトのコードフォーマット機能がありません。**
[Xcodeで使えるSwiftコードフォーマッター「Swimat」をつかってみた - Qiita](https://qiita.com/toshi586014/items/1eab24c8e4b86fa10fb7)という記事で紹介されている「Swimat」を導入すればフォーマット機能が使えるようにのですが、Swimatはフォーマットの細かいカスタマイズができません。

なのでSwimatを使用した場合、フォーマットを手動で直すケースが発生していました。
ですが、AppCodeにはコードフォーマット機能がデフォルトで入っており、かつ細かいカスタマイズが可能なので、チームでソースを運用する場合に設定ファイルを共有することで、フォーマットのルールを共通化できます。

# AppCodeのここがちょっと
AppCodeのちょっと難しいと思う点を挙げていきます。

## ドキュメントが全部英語
AppCodeだけではなくjetBrains製のIDE全てにいえることですが、日本語のドキュメントが少ないです。使い方などを調べるときに英語力がないと、少し辛いかもしれません。
ちなみに僕は英語苦手です。ガンバリマス。

## 有料
AppCodeは有料IDEです。
一例ですが、2019年6月の段階で、年間22,900円ほどの使用料がかかります。非常に便利なIDEなのですが決して安くはないので、実際に購入するかどうかはよく検討する必要があります。

AppCodeは最初の1ヶ月は無料で使用することができますので、実際に使ってみてから購入するかどうかを考えてみることをオススメします。

詳しい値段は[こちら](https://www.jetbrains.com/objc/buy/#commercial?billing=yearly)をご確認ください。

# 最後に
JetBrains製のIDEは非常に高機能で使いやすいです。最初は無料で使えるので、まだ使ったことのない人は是非一度試してみてください。
pytz依存なしで、システムのローカルなタイムゾーンにawareなdatetimeオブジェクトを得る

ローカルのタイムゾーンが欲しいだけなのに、余計なpytzとか入れたくない。
`datetime.datetime.astimezone`を使う。

https://docs.python.org/ja/3/library/datetime.html#datetime.datetime.astimezone

> ### datetime.astimezone(tz=None)
> 引数無し (もしくは `tz=None`の形 ) で呼び出された場合、変更先のタイムゾーンはシステムのローカルなタイムゾーンだと想定されます。 変換後の datetime インスタンスの `.tzinfo` 属性には、 OS から取得したゾーン名とオフセットを持つ timezone インスタンスが設定されます。

例: `datetime.now`の場合

```python
>>> now = datetime.now().astimezone()
>>> now
datetime.datetime(2019, 6, 26, 11, 21, 13, 456370, tzinfo=datetime.timezone(datetime.timedelta(seconds=32400), 'JST'))
```
Alibaba CloudでRAMユーザの権限を特定のリージョンに制限する方法

Alibaba Cloudは19リージョン持っていますが、たとえば中国のリージョンに間違ってサーバを立てないようにRAMで制限を付けたいとか、日本リージョン以外は触れないようにしたいとか要望があると思います。

リソースのフォーマットは以下のようになっています。

```
Resource Format:
acs:<service-name>:<region>:<account-id>:<relative-id>
```

以下のように書くとすべてのアクションを、特定のリージョンに制限することが出来ます。
この例では、東京リージョン（ap-northeast-1）のプロダクトだけ操作できるように制限しています。

```
{
  "Statement": [
    {
	  "Action": "*",
	  "Resource": "*:*:ap-northeast-1:*:*"
	}
  ],
  "Version": "1"
}
```

どのような要素指定出来るかは以下のページを参考にしてください。

RAM Policy Elements
https://www.alibabacloud.com/help/doc-detail/93738.htm


リージョン名はこちらを参照してください。

Regions and zones
https://www.alibabacloud.com/help/doc-detail/40654.htm
docker(29) 今日のdocker error: Error response from daemon: driver failed programming external connectivity on endpoint modest_wright

docker を -p をつけて起動

```
$ docker run -p 8888:8888 -v /Users/administrator/openjij:/openjij -it kaizenjapan/openjij-ch1-ubuntu /bin/bash 
docker: Error response from daemon: driver failed programming external connectivity on endpoint modest_wright (05da127032cdca70f49fb8375505904e0d87b0fb9959ea022cc841b0a2e21c56): Bind for 0.0.0.0:8888 failed: port is already allocated.
```

すでに使っているらしい。違う番号で起動。

```
$ docker run -p 8080:8080 -v /Users/administrator/openjij:/openjij -it kaizenjapan/openjij-ch1-ubuntu /bin/bash 
root@5f528d66d2e5:/# 
```
### 最後までおよみいただきありがとうございました。

いいね　💚、フォローをお願いします。
#### Thank you very much for reading to the last sentence.

Please press the like icon 💚　and follow me for your happy life.
jQueryを使わずにdata-*属性の値を取得する

クリックイベントされた要素のdata-*属性を取得する方法
こんなHTMLがあったとして・・・

```html
    <ul id="list">
        <li class="val" data-val="val-1">Click Me</li>
        <li class="val" data-val="val-2">Click Me</li>
        <li class="val" data-val="val-3">Click Me</li>
    </ul>
```

こんな感じで取得可能。

```javascript
(()=>{
    // クリックイベントを定義
    for(const el of document.querySelectorAll(".val")){
        el.addEventListener("click", getDataAttr)
    }
})();

function getDataAttr(){
    console.log(this.dataset.val);
}
```

ただし、アロー関数とfor..ofはie11非対応なので、対応する必要がある場合は通常の即時関数とfor文で対応する必要がある。
VSCodeでC++の自作変数が変換候補に出ない問題を解決

## 環境
Windows 10
VSCode 1.35.1
MinGW 6.3.0
Visual Studio 2019

VSCodeには、C/C++という拡張機能をインストールしていた。

## 問題
VSCodeは、普通は自作変数・自作関数が変換候補に出てくる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183842/02c3290f-be8e-bbab-c3cb-d73adfd81e8b.png)

しかし、下の画像のように、全く変数・関数の候補が出てこないことがあった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183842/4fd36b45-a92b-dddb-b650-562f653ba1bd.png)

## 解決方法

`C/C++ configurations`の設定を開き、`compiler path`をVisual Studio由来のコンパイラではなく、MinGW由来のコンパイラに変更した。
具体的には、`C:/Program Files (x86)/Microsoft Visual Studio/2017/Community/VC/Tools/MSVC/14.16.27023/bin/Hostx64/x64/cl.exe`から`D:/Program Files/MinGW/bin/g++.exe`に変更した。(この変更は、右側の下矢印のボタンを押せば、自動で出てくる)

また、その変更に伴い、`Intelligence Mode`を`msvc-x64`から`gcc-x64`に変更した。

これは、MinGWを使っている場合の手順だが、~~clangを使っている場合も同様に変更が可能だと推測される~~**clangは自身のライブラリを持っていないそうなので、設定がまた変わるそうです(yumetodo様のコメントにより追記:2019/06/27)。clangの場合の設定方法は未検証なので書いていません**。

これをすることにより、自作変数が変換候補に出てくるようになった。
EspressoでNestedScrollViewをscrollToする方法

NestedScrollViewをscrollToするとこんなエラーが出ます。

```
Caused by: java.lang.RuntimeException: Action will not be performed because the target view does not match one or more of the following constraints:
(view has effective visibility=VISIBLE and is descendant of a: (is assignable from class: class android.widget.ScrollView or is assignable from class: class android.widget.HorizontalScrollView or is assignable from class: class android.widget.ListView))
```

これは内部でScrollView, HorizontalScrollView, ListViewでしか動作しないように明示的にチェックしているからです。
この`ScrollToAction`クラスはfinalで定義されているので継承できません。
コピーして`NestedScrollToAction`というクラスを定義することで問題を解決します。
kotlinでコーディングしているので自動変換されたkotlinコードをもとにしています。

```kotlin:NestedScrollToAction.kt
class NestedScrollToAction : ViewAction {

    override fun getConstraints(): Matcher<View> {
        return allOf<View>(
            withEffectiveVisibility(ViewMatchers.Visibility.VISIBLE),
            isDescendantOfA(
                anyOf<View>(
                    isAssignableFrom(NestedScrollView::class.java), // ここを追加
                    isAssignableFrom(ScrollView::class.java),
                    isAssignableFrom(HorizontalScrollView::class.java),
                    isAssignableFrom(ListView::class.java)
                )
            )
        )
    }

    override fun perform(uiController: UiController, view: View) {
        if (isDisplayingAtLeast(90).matches(view)) {
            Log.i(TAG, "View is already displayed. Returning.")
            return
        }
        val rect = Rect()
        view.getDrawingRect(rect)
        if (!/* immediate */view.requestRectangleOnScreen(rect, true)) {
            Log.w(TAG, "Scrolling to view was requested, but none of the parents scrolled.")
        }
        uiController.loopMainThreadUntilIdle()
        if (!isDisplayingAtLeast(90).matches(view)) {
            throw PerformException.Builder()
                .withActionDescription(this.description)
                .withViewDescription(HumanReadables.describe(view))
                .withCause(
                    RuntimeException(
                        "Scrolling to view was attempted, but the view is not displayed"
                    )
                )
                .build()
        }
    }

    override fun getDescription(): String {
        return "scroll to"
    }

    companion object {
        private val TAG = NestedScrollToAction::class.java.simpleName
    }
}
```

`nestedScrollTo`という名前でテストから使用できるようにアクセス用の関数も定義します。

```kotlin:NestedViewActions.kt
class NestedViewActions {
    companion object {
        fun nestedScrollTo(): ViewAction {
            return ViewActions.actionWithAssertions(NestedScrollToAction())
        }
    }
}
```

これで`scrollTo`の代わりに`nestedScrollTo`を使えばNestedScrollViewを使ったテストが可能になります。


### 参考
https://stackoverflow.com/questions/25410613/android-espresso-scrolling-to-a-non-list-view-item