OmniAICreator/Qiita-1.07M huggingface dataset:
Windows で何かしらエラーが起きているけど、特定できない方へ


# 概要
この記事は、windows利用者で、**何かしら不具合が起きているけどエラーが特定できない方**に向けた内容になっています。
Window初心者である方、そうでない方も**イベントビューアを使用したエラーの特定方法**は意外と知らない方が多いのではないのかと思います。
私自身もwindowsパソコンとは10年以上の付き合いですが、ココつい最近知りました。笑

**知らないことは恥じることではないです。**
なぜなら今この記事をみて知ればいいのですから。


今回は私が使用しているOSが**windows7**なので、windows7の手順でお話していきます。

背景は、私が記事にしようと思ったきっかけや訴えたいことが書いてあるので、
**時間ないんださっさとその方法教えろや！**と思ってる大半の方は右サイドバーにある一覧から解決方法を押してください！！


#背景
今使用しているパソコンのパフォーマンスが大変落ちていることがわかったので一つ一つ解決を試みる。が、検索方法が

「windows 処理速度 遅い」
「windows かたまる」

こんなんじゃあ、いつまでも解決されません！！！！！
結局全然見つからなくて、ネットサーフィンして一日終わってしまった！！
いつのまにかYoutube開いてた！！！
ことなんて日常茶飯事。

###ちがうだろ。
全人類、性別も違ければ、体の細かい仕組みもちがう。だからかかる病気も治し方もちがう。
パソコンも同じように、OSも違ければ、中身のスペックも違う。
Macなんか見た目的にどれも一緒だろ！（Macユーザごめんなさい）なんて思う人いるだろうけど、人によってインストールしているソフト全然違うから！！！そこで起きるエラーなんか誰も予想できへんほどダルい絡み方してるから！！！！

検索をかけるなら、
**「私のスペックはこれで」「何が原因で」「どういうふうに困っているのか」**、
しっかり特定した上で、解決方法を調べることが一番効率よく解決方法にたどり着きます。
自分の「スペック特定」は
[こちら](https://121ware.com/navigate/enjoy/prevent/useful/20090804/index.html)の記事を参照してください。


# 解決方法
 


#####① イベントビューアの起動
#####② アプリケーションログをみる
#####③ 検索をかける



たったこれだけ工夫すれば、劇的にスピード感が違います。




####① イベントビューアの起動

- コントロールパネルからイベントビューアを起動する
- 「スタート」メニューから「コントロールパネル」をクリック
- 「システムとセキュリティ」をクリック
- 下の方にある「管理ツール」のセクション内にある「イベントログの表示」をクリックでイベントビューアが起動します。

<img width="413" alt="bandicam 2018-07-21 15-05-10-025.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/193375/bee551a3-c9ae-57c4-f619-b0df4af1f62f.jpeg">




####② アプリケーションのログをみる
左側のサイドバー内にある「windowsログ」をクリックすると、アプリケーション、システム、セキュリティ等、実行されたログ別に分かれています。
<img width="567" alt="bandicam 2018-07-21 15-11-28-738.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/193375/b0fd3668-6cd0-4b41-36ad-0999da41cba2.jpeg">
何が原因か分かる人は、システムやセキュリティを疑っても良いのですが、わからない場合は、基本的に**アプリケーションログ**を見てみて大丈夫だと思います。


####中身から原因のログを見つける方法について
<img width="400" alt="bandicam 2018-07-21 15-11-49-521.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/193375/4787171e-a4bf-6fa2-55e1-11c332fe3d82.jpeg">
1 .「日付と時刻」から何時何分何秒かまで書かれているので、エラーが起きた時間から推測して、ある程度範囲を決めます。

2 . そこから「レベル」のところに「エラー」または「警告」であるログを中心にクリックすると下に「原因」や「**イベントID**」、「**ソース**」が書かれています。

<img width="389" alt="bandicam 2018-07-21 15-12-09-468.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/193375/c1009567-f326-3589-54ca-263144d4c5ef.jpeg">


####③検索をかける
基本的にこの「**ソース**」と「**イベントID**」で検索かけると解決方法が見つかる事が多いです！！
もう少し詳しい方は、原因が書かれているところにある単語から選んで検索をかけると、より解決方法にたどり着きやすいです。

以上　エラーを特定する方法でした！



/

/



プロフ
名前 : Gihwan
プログラミング歴：4年
使用できる言語 : C++ Processing HTML CSS JS
twitter : http://twitter.com/kihwan9696
Github  : これから公開していきます
CentOS7にdocker(docker-ce)をinstall

※CentOS7(7.5)にdocker(docker-ce)をinstallした時のメモ(2018/7/21)

## OS

```
cat /etc/centos-release
CentOS Linux release 7.5.1804 (Core)
```

## install

* 基本的に以下に従いinstallを実施

https://docs.docker.com/install/linux/docker-ce/centos/

> Install required packages. yum-utils provides the yum-config-manager utility, and device-mapper-persistent-data and lvm2 are required by the devicemapper storage driver.

* 事前に必要なパッケージを追加

```
sudo yum install -y yum-utils \
  device-mapper-persistent-data \
  lvm2
```

> Use the following command to set up the stable repository.
  You always need the stable repository, even if you want to install builds from
  the edge or test repositories as well.

* stable versionのdocker-ceをinstallする為yum repositoryを追加

```
sudo yum-config-manager \
    --add-repo \
    https://download.docker.com/linux/centos/docker-ce.repo
```

> Install the latest version of Docker CE, or go to the next step to install a specific version:

* docker-ceのinstall

```
sudo yum install docker-ce
```

> start docker!

* docker起動

```
sudo systemctl start docker
```

どなたかのお役にたてば嬉しいです。
世界一簡単な、uWsgiを使ったFlaskアプリ（python）をnginxサーバにデプロイする方法の説明

#目的
他のページでこの構成でウェブアプリをデプロイする時の解説があったのですがよくわからなくて結局公式リファレンスを見たのでまとめます。
世界一簡単すぎて理解することができないかもしれませんが許してください。
nginx.confとuwsgi.iniくらいは参考になるかもしれません。

#前提
・ nginxがインストールされている。
・ python3がインストールされている。
・ flaskがインストールされている。
・ uwsgiがインストールされている。

#nginxの設定
nginxの設定に以下を追加

```nginx:nginx.conf
server{
        location / {
            include uwsgi_params;
            uwsgi_pass 127.0.0.1:3031;
        }
    }
```

#uWsgiの設定
uwsgiの設定ファイルを以下の通りにします。

```uwsgi.ini
[uwsgi]
master = true
socket = 127.0.0.1:3031
wsgi-file = app.py 
callable = app
processes = 4 
threads = 2 
stats = 127.0.0.1:9191
touch-reload=/path/to/application/reload.trigger
pidfile=/path/to/application/app.pid
```
#flaskアプリの開発
pythonのプログラムを記述します。

```python:app.py
from flask import Flask, render_template, url_for, request, Response, jsonify, redirect, send_from_directory

app = Flask(__name__)

@app.route('/')
def rootDir():
    return render_template('index.html')
```
#Flaskの起動
サーバの起動は以下のコマンドでできます。
```$ uwsgi uwsgi.ini```
バックグラウンドモードは以下です。
```$ uwsgi uwsgi.ini &```
また、バックグラウンドモードの際にapp.pyを編集した後などに再起動する場合は
```$ touch reload.trigger```
でできます。
#nginxの起動
起動
```$ sudo service nginx start```
再起動
```$ sudo nginx -s reload```
停止
```$ nginx -s stop```
手順書作成、エンジニアとしてのお作法

# 経緯
当方インフラエンジニア。作業をする際に、わからないまま設定作業をしてしまい、よくミスする人を多数見てきた（自分自身も含めて）。
そんな失敗学をもとに、手順書を作成する際、作業する際の観点や肝を以下を作成してみた。

# 流れ
・前提条件
・①事前準備
・②設定
・③事後作業1
・④事後作業2

## 前提条件
～～ができていないとこの作業ができない、等がないかの確認。
仕事は準備が8割とも言いますが、これが大事。
作業後になにかすることも可能であれば事前に確認しておく。

## ①事前準備
・設定前の状態確認
　確認コマンドや参照コマンドを事前に調べておく。
・設定前の情報取得
　ファイル等であればコピーしておく。
・事前バックアップ

## ②設定
・設定追加箇所のみを設定。
　なるべくコマンド等を利用する。GUI操作を最小限にする。
・不要な追加箇所は設定しない。
・削除と追加を同時に行わない。

## ③事後作業1
・設定後の状態確認
・設定後の情報取得
・設定前、設定値の差分比較
　アプリケーションであればWinMerge。Windowsであればfcコマンド、Linuxであればdiffコマンドを活用する。
・事後バックアップ

## ④事後作業2
・目的の機能が利用できるか確認

# 備考
基本的だけど、意外に忘れがちなこと。
事前にネゴったりレビューしたりもしたいけれど、そういうプロジェクトばかりでもないはず。そういうときにいかに自分の身を守れるか、正常確認を行えるのかがポイント。何事も都度確認することが大事（確認は大変なことだけれども）。

[Rage Against The Machine - Killing In the Name](https://www.youtube.com/watch?v=bWXazVhlyxQ)
最近空耳アワーでこの曲が「ナゲット割って父ちゃん」にされてしまい、なかなか空耳が消えない今日この頃。
rex0220 項目入力不可プラグイン

kintone アプリの追加・編集画面において、指定された項目を入力不可にするプラグインです。
[関連レコード集計プラグイン](https://qiita.com/rex0220/items/8cbe764670b0e6431a42)で集計先アプリの集計項目を入力不可にするときに、指定してください。

- 追加・編集画面で、指定項目を入力不可にする
- プラグイン設定のダウンロード＆アップロード機能
- 無償公開します

※動作環境は、PC・スマホです。

[rex0220 stores](https://rex0220.stores.jp/)で、公開中です。

[項目入力不可プラグイン](https://rex0220.stores.jp/items/5b52cf705f78666bff001749)


# 項目編集不可の設定例

<img width="901" alt="2018-07-21_15h01_27.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/2cceeed5-f488-d5a9-96e8-0924e8cfe366.png">


# 項目入力不可プラグインの設定手順

## プラグインの追加

- 「kintone システム管理 > プラグイン」で追加します。
- 「アプリの設定 > プラグイン」で、アプリに追加します。

<img width="1102" alt="2018-07-21_15h07_34.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/f068e043-0925-328c-0af6-623dd1fe75c2.png">

## プラグインの設定

編集不可にする項目をチェックして、「保存」します。

<img width="830" alt="2018-07-21_14h55_30.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/7b96ee8b-1cad-b886-3111-b51db154e754.png">

# 注意事項

- 既に、JavaScript によるカスタマイズを行っているアプリの場合、処理が競合して、エラーになる場合があります。その場合は、該当するアプリでプラグインの使用を中止してください。
最大公約数

# C言語で最大公約数を計算

```c:euclidean.c
#include <stdio.h> // 標準入出力

// プロトタイプ宣言
int GCD1(int a, int b);
int GCD2(int a, int b);
int GCD3(int a, int b);

int main(void) {
  int a, b;
  int tmp;

  // 入力
  printf("aを入力 : ");
  scanf("%d", &a);
  printf("bを入力 : ");
  scanf("%d", &b);

  a = GCD3(a, b);

  printf("結果 : %d\n", a);

  return 0;
}

int GCD1(int a, int b) {
  while(a != b) {
    if(a >= b)
      a = a - b;
    else
      b = b - a;
  }

  return a;
}

int GCD2(int a, int b) {
  int r;

  // whileの中は条件式をとるので代入した結果をt/fとして扱う場合は括弧でくくる
  while((r = a % b)) {
    a = b;
    b = r;
  }

  return b;
}

int GCD3(int a, int b) {
  if(a < b) return GCD3(b, a);
  if(b == 0) return a;
  return GCD3(b, a % b);
}
```
かわいい猫のgifアニメをたくさんダウンロードする

google-images-download を使って、google画像検索の画像を一括ダウンロードします。

#google-images-downloadのインストール

githubからgitを使ってインストールしてください。gitはすでにインストールされているものとします。また、pythonも別途インストールしておいてください。

```bash
git clone https://github.com/hardikvasa/google-images-download.git
```

#google-images-downloadの簡単な使い方（”cat”の画像検索結果を100個ダウンロードする）

```
cd google-images-download/google_images_download
./google_images_download.py -k cat
```

google_images_download.pyと同じフォルダのdownloadの下にキーワード"cat"のフォルダができ、その下に画像ファイルがダウンロードされていきます。

#猫gifのダウンロード方法

そして、以下のように書くと、猫のgif動画を10個ダウンロードされます。

```
./google_images_download.py -k cat -l 10 -f gif
```

![9. fb1b04824b49d5603c15a2f65202ffa6.gif](https://qiita-image-store.s3.amazonaws.com/0/164821/3892321f-dc9d-df6a-5bda-801a90c3bd8b.gif)

癒やされましょう。
DockerでWordpress環境を作る（2018/07/21最新バージョン対応）

- Wordpress公式のDockerイメージを元にWordpress環境を作ろうとしたら、思った以上に色々引っかかったのでメモを残しておきます。
- `docker-compose`を使って、wordpressコンテナとMySQLコンテナを連携するよくあるパターンを使います。

## コマンドラインだけで立ち上げる場合

## `docker-compose`を使う場合
### 使った`docker-compose.yml`
- 上のポイントが要なのですが、とりあえず成功した例です。

```yaml
version: '3'
services:
  wordpress:
    hostname: wp
    container_name: wp
    image: wordpress:4.9.7-apache
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db # これを下のDBのホスト名と一致させること！！
      WORDPRESS_DB_USER: wp_user
      WORDPRESS_DB_PASSWORD: password
  db: # これを上のWORDPRESS_DB_HOSTと一致させること！
    hostname: wp_db
    container_name: wp_db
    image: mysql:5.7 # バージョンに注意！
    volumes:
      - wp_db_cache57:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wp_user
      MYSQL_PASSWORD: password
volumes:
  wp_db_cache57:
    external: true
```

### ポイント
#### コンテナのバージョンを意図的に指定する。
- 特に**MySQLのバージョンを5.7にすること**。
- 現在（2018/07/21）では、`mysql:latest`はバージョンが5.8になっているので、latestでやってしまうと、**コンテナが立ち上がりこそすれ、wordpressの画面がいつまでたっても出てこないので注意**。
- ちなみに`wordpress:4.9.7-apache`は現状に置ける`wordpress:latest`と同義です。

#### 特定の環境変数を指定する。
- 特に大事なのは以下の三つ。

|環境変数|役割|
|:--|:--|
|WORDPRESS_DB_HOST|連携するDBのホスト名を入れる。**DBのホスト名と同じにすること！（なお、デフォルトではmysqlという値が入っているため、ホスト名をmysqlにするのもあり）**|
|WORDPRESS_DB_USER|wordpressのDBの所有者名。**MYSQL_USERと一致させること**。|
|WORDPRESS_DB_PASSWORD|↑のパスワード。**MYSQL_PASSWORDと一致させること**。|

## まとめ
- とりあえず上のポイントを守ってcomposeすれば立ち上がります！
Node.js を入れて npm を使えるようになるまでの話

## はじめに
こんにちは、フロントエンド勉強中の nanarya です。
最近 Macbook Pro を買いました。
薄っぺらいキーボードにもなかなか慣れないので練習も兼ねてちょっとしたメモ書きを。
新しい PC を買ったので、新たに環境構築をしなきゃいけなくなったんですが、ちょっと迷ったので調べたことを簡単に残しておこうと思います。
まだまだ駆け出しの身で、間違っているところもあるかと思いますので、見つけた際にはぜひご指摘ください。私と、これを見た同じ駆け出しの方の為になりますので何卒。
では、そろそろ本題。

## npm を使いたいけど、そこまでが長いよね
最近　WEB のフロントエンドの実装も少しずつ触るようになって、なんとなく npm を入れた後は 

- webpack を使って
- HTML は pug をコンパイル
- CSS は sass とか stylus をコンパイル
- JS は babel を使って ES6 で書く

というのが割りと今風なのかなって感じてます。
（実際皆さんの環境でどうなのかも気になりますね）
[この辺りは以前に記事でまとめたのでよかったらどうぞ](https://qiita.com/nanarya/items/661ec10ff262c84424a6)

じゃあ npm を入れるまではどうなんでしょう？
正直、一度入れてしまえばあまり意識しないと思いますが、そこまでに案外選択肢があるような気がします。
homebrew とか、 ndenv とかなんか色々ありますよね。
入れ方を間違えると、node がバージョン違いで喧嘩しちゃうみたいなので、導入時にちゃんと計画的に入れておくのが吉という感じがします。
その辺調べたことをまとめたお話です。

## Node.js を入れる前に入れるパッケージの話
Node.js のインストールに使ったり、バージョンの管理ができるパッケージがあるようなのでそちらを確認していきましょう。

### homebrew ってなんだろう
[こちらをご覧ください](https://qiita.com/omega999/items/6f65217b81ad3fffe7e6)（とても雑な説明）
__「Mac OS Xオペレーティングシステム上でソフトウェアの導入を単純化するパッケージ管理システムのひとつである」__だそうです。

詳しく何かとかを書き出すとそれだけで記事になってしまうので、簡潔に書くと
__インストールするためのソフト__とでも思っていれば良さそうです。
npm は node package manager の略ですが、それの node のみに限らないもの、というイメージでしょうかね。
他の手段でインストールできるなら問題ありませんが、入れておくとインストールがとても便利になるものだと思われます。
おそらく現在でも多く使われているのではないでしょうか（ネットは個々の情報は多くありますが、新旧の見分けがつきづらいので新参者には辛いですよね）
[homebrew について非常に良い分かりやすい記事](https://teratail.com/questions/101819)が合ったのでリンクしておきますね

### nodebrew ってなんだろう
名前的に homebrew の node 版っていうイメージですね。
こちらは１つのPCに複数のバージョンの Node.js を入れることができるようになるパッケージのようです。
これを入れることで、プロジェクトごとに node のバージョンを使いわけることができるという寸法ですね。
ただ、こちらおそらく次に紹介する ndenv の方が新しく、かつ高機能ではないかと思われますので、現在はそちらを使うのが良いのではないでしょうか。

### ndenv ってなんだろう
基本的には nodebrew と同じく複数のバージョンの Node.js を使い分けられるものになります。ただ、利点として `.node-version` というデータをプロジェクトのディレクトリ内に入れておくと、自動で判別して node のバージョンを切り替えてくれるようです。
nodebrew にはこの機能はおそらくないようなので、今から環境構築するのであればこちらを使うのが良さそうです。
2019.6.14追記：開発が滞っており、現在は下のnodenvを使用するのが主流のようです。

### nodenv ってなんだろう(2019.6.14追記)
現在、anyenvのリポジトリが変更となり、それに伴いanyenvではこちらをフォローすることになったようです。  
同じようなものなのに複数存在するのは面倒ですが、今から使うのであればこちらが良さそうですね。

### anyenv ってなんだろう
ndenv 等のバージョン管理ツールを言語ごとにまとめて管理できるものです。 phpenv(PHP) や rbenv(ruby) などが含まれます。

### nvm っていうのもあるらしい
node version manager とてもわかりやすい名前ですね。
ただこちらは少し古いようで、どうも nvm => nodebrew => ndenv と移り変わっているという感じなんですかね。

## で、結局何を使えばいいの？
制作するものや環境によって最適解は異なるかと思いますが、
基本的には__homebrew__を使って__ndenv__をインストールすればいいのかな、と思います。
他の言語も触ったりするようであれば、__anyenv__ を入れてもいいかもしれないですね。
おそらく nodebrew や nvm あたりは今は出番がないんじゃないかと思います。

## 終わりに
こういったのって、記事の時系列とかに気をつけないと情報が古かったりもするので、新参者には勉強しづらいんですよね...
ご意見や情報があればコメントにていただけると幸いです。

それにしても、HTML と CSS と JS を書きたいだけなのに入れるものとか覚えることとか多すぎでしょ！！（メモ帳で HP 作っていた人間の感想）
あと、MBP の薄っぺらいキーボード、ちょっと文章書いたくらいじゃなかなか慣れないですね...
React NativeでGIFを使う【Android】

[公式](https://facebook.github.io/react-native/docs/image)に書いてありますが、ハマってしまう人がいると思うので(自分みたいに)

React Nativeでは画像は`Image`で表示しますが、AndroidでGIFやWebPを扱う際には`android/app/build.gradle`に以下を記述する必要があります。

```gradle
dependencies {
  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  compile 'com.facebook.fresco:animated-base-support:1.9.0'

  // For animated GIF support
  compile 'com.facebook.fresco:animated-gif:1.9.0'

  // For WebP support, including animated WebP
  compile 'com.facebook.fresco:animated-webp:1.9.0'
  compile 'com.facebook.fresco:webpsupport:1.9.0'

  // For WebP support, without animations
  compile 'com.facebook.fresco:webpsupport:1.9.0'
}
```

Android Studioのバージョンが3.Xの人は`compile`の代わりに`implementation`を利用してください。
タスクの初期化処理を待ってから先に進ませる

開始した別タスクの初期化処理を待ってから先に進めたい場合にManualResetEventSlimが使えます。以下の例では、Service関数が別タスクの処理で初期化処理を行ってからループ処理しています。ServiceAsync関数は初期化処理をまってからreturnします。

```C#
using System;
using System.Threading;
using System.Threading.Tasks;

namespace ConsoleApp1
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("Main start.");
            var mres = new ManualResetEventSlim();
            var task = ServiceAsync(mres);
            task.Wait();
            mres.Dispose();
            Console.WriteLine("Main end.");
        }

        private static Task ServiceAsync(ManualResetEventSlim mres)
        {
            Console.WriteLine("ServiceAsync start.");
            var task = Task.Factory.StartNew(() => Service(mres));
            mres.Wait();  // Service関数内のmres.Set()で先に進みます。
            Console.WriteLine("ServiceAsync end.");
            return task;
        }

        private static void Service(ManualResetEventSlim mres)
        {
            Console.WriteLine("Service start.");

            // 初期化処理
            Console.WriteLine("Service initialize start.");
            Thread.Sleep(3000);
            Console.WriteLine("Service initialize end.");
            mres.Set();  // ServiceAsync関数側に通知します。

            // ループ処理
            for (int i = 0; i < 10; i++)
            {
                Thread.Sleep(1000);
            }
            Console.WriteLine("Service end.");
        }
    }
}
```

出力例
```Main start.
ServiceAsync start.
Service start.
Service initialize start.
Service initialize end.
ServiceAsync end.
Service end.
Main end.```
Pythonで下の階層のファイルをimportする方法

#はじめに
Pythonで下の階層にあるPythonファイルを呼び出す方法を解説します。
Pythonを初めて１週間くらいの人向けの記事です。

#同じ階層にあるファイルをimportする方法
```text
<ファイルの構造＞
  root
    ├ main.py　　　# main.py から called.py をimportする
    └ called.py

```
```python:main.py
import called     #これで呼び出せる

```

#下の階層にあるファイルをimportする方法
```text
<ファイルの構造＞
  root
    ├ main.py
    └ sample ─ called.py

```
```python:main.py
from sample import called
```
ESLint v5.2.0

前 [v5.1.0] | 次 [v5.3.0]

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">ESLint v5.2.0 has been released: <a href="https://t.co/PyfnjNhFC4">https://t.co/PyfnjNhFC4</a></p>&mdash; ESLint (@geteslint) <a href="https://twitter.com/geteslint/status/1020510514294677504?ref_src=twsrc%5Etfw">July 21, 2018</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ESLint 5.2.0 がリリースされました。
小さな機能追加とバグ修正が行われました。

質問やバグ報告等ありましたら、お気軽にこちらまでお寄せください。

> 🏢 [日本語 Issue 管理リポジトリ](https://github.com/eslint/eslint-jp)
> 👫 [日本語サポート チャット](https://gitter.im/eslint/eslint-jp)
> 🏢 [本家リポジトリ](https://github.com/eslint/eslint)
> 👫 [本家サポート チャット](https://gitter.im/eslint/eslint)

# 🚀 本体への機能追加

## [#10571]: `--cache` CLI オプションの動作がより直感的になりました。

従来は `--cache` オプションを指定して Lint を実行すると、Lint エラーが存在しないファイルについてハッシュ値をキャッシュして、ファイルが編集されない限り Lint をスキップしていました。これにより、現在編集していない大多数のファイルについて Lint をスキップすることができていました。

今回、Lint エラー自体もキャッシュに含むことで、Lint エラーがあったとしても、ファイルが編集されない限り Lint をスキップするようになりました。

# 💡 新しいルール

特になし。

# 🔧 オプションが追加されたルール

特になし。

# ✒️ `eslint --fix` をサポートしたルール

特になし。

# ⚠️ 非推奨になったルール

特になし。

[v5.1.0]: http://qiita.com/mysticatea/items/f0d469455b05f233813a
[v5.3.0]: http://qiita.com/mysticatea/items/eb99e18d6cc7c3bf9317
[#10571]: https://github.com/eslint/eslint/issues/10571
[#9999]: https://github.com/eslint/eslint/issues/9999
[xxxx]: http://eslint.org/docs/rules/xxxx

<!-- 
![JSCS Icon](http://jscs.info/favicon.ico) JSCS 互換ルールです。
-->
物体検出向けクラウドサービスの比較

# 概要
物体検出のために各クラウドベンダーの機械学習サービスの比較を行った。

# 要求仕様
 - Object Detection（分類だけでなく、位置も特定する画像認識）
 - 固有の教師ラベル（犬、猫、人などの一般的なものではない）

# 結論
[Amazon SageMaker](https://aws.amazon.com/sagemaker/)を採用

# 理由
 - GPU利用可能
 - 用意したデータで学習可能なため、任意の教師ラベルを利用可能
 - 同一ベンダーがFaaS（Function as a Service）を提供（場合によっては必要になるため）
    - AWS Lambdaが利用可能
    - Azure Functionsはpythonをサポートしていない模様
    - Google Cloud Functionsはまだベータ版

# 他の候補
 - [Google Cloud AutoML](https://cloud.google.com/automl/)
    - まだalpha版
 - [Google Cloud Machine Learning Engine](https://cloud.google.com/ml-engine/)
    - 前述のように、GCPのFaaSはベータ版なため見送り
 - [Azure Machine Learning Studio](https://docs.microsoft.com/en-us/azure/machine-learning/studio/)
    - GPUの利用可否が不明
 - [Azure Machine Learning services](https://docs.microsoft.com/en-us/azure/machine-learning/service/)
    - まだpreview版
 - [Azure Batch AI](https://azure.microsoft.com/en-us/services/batch-ai/)
    - まだpreview版
 - [Azure Custom Vision](https://azure.microsoft.com/en-us/services/cognitive-services/custom-vision-service/)
    - まだpreview版
 - その他、色々なAPI
    - 所定の認識を行うのみで、任意の教師ラベルが使えない

# 所感
機械学習サービスとしては、GoogleのCloud Machine Learning Engineも検討の余地があった。結局、FaaSなどの周辺サービスの充実度合いでAWSを使った。
Azureは全般的にpreview版が多く、機械学習では出遅れている印象。また、機械学習に限ったことではないが、C#を第一にサポートしており、Windows環境で開発していない人間には使いにくい。
仮想デスクトップのショートカット

# よく使う仮想デスクトップのショートカット
## 移動
Ctrl ＋ Winキー ＋ ← or →

## 開く
Ctrl ＋ Winキー ＋ D

## 閉じる
Ctrl ＋ Winキー ＋ F4  
  
<hr>
Reactメモ

# Reactを使える状態にする

```js:index.js
// ↓をファイルの先頭に書く
import React from "react"
import ReactDOM from "react-dom"
```

# レンダリング

```jsx:index.js
// import React from "react"
// import ReactDOM from "react-dom"

// <h1>Hello World</h1>をrootにレンダリング
ReactDOM.render(
  <h1>Hello World</h1>,
  document.getElementById("root")
)
```

# コンポーネントを作る
2種類の書き方がある

***Class Component***

```jsx:index.js
// import React from "react"
// import ReactDOM from "react-dom"

// ReactDOM.render(
//  <h1>Hello World</h1>,
//  document.getElementById("root")
// )

// Headerというクラスコンポーネントを作成
class Header extends React.Component {
  render(){
    return (
      <div className="header">
        <h1>ヘッダーです</h1>
      </div>
    );
  }
}

// Headerコンポーネントをrootにレンダリング
ReactDOM.render(
  <Header />, //スラッシュがないとエラーになります
  document.getElementById("root")
)
```

```
class Header extends Component{ // React.は省略しても大丈夫
  render(){
    return(
      <div className="header">
        <h1>ヘッダーです</h1>
      </div>
    );
  }
}
```

***Functional Component***

```jsx:index.js
// import React from "react"
// import ReactDOM from "react-dom"

// ReactDOM.render(
//  <h1>Hello World</h1>,
//  document.getElementById("root")
// )

// HeaderというFunctionalコンポーネントを作成
const Header = (props) => {
  return(
    <h1>ヘッダーです</h1>
  )
}

// Headerコンポーネントをrootにレンダリング
ReactDOM.render(
  <Header />,
  document.getElementById("root")
)
```

# propsを使う

```jsx:index.js
// Tasksコンポーネントを作成
class Tasks extends React.Component {
  render(){
    return (
      <p>{this.props.task}</p>
    );
  }
}

// Tasksに値を渡す
ReactDOM.render(
  <Tasks task="勉強" />,
  <Tasks task="家事" />,
  document.getElementById("root")
)
```

#ハマったところ

```
var Hello = React.createClass({
  render: function() {
    return (
      <div>Hello</div>
    );
  }
})
```

`React.createClass` はv16では削除されたそうです。
使おうとするとエラーが出ます。

# 注意点
・コンポーネントは大文字で始める
・`React.createClass`はv16以降では使えない
どうしてもMacのFinderをWindowsのパスのまま開きたいんだ！！

# 概要
Macを使い始めたとき最初に思ったのが、Windowsユーザーから共有されたディレクトリパスをそのままコピー&ペーストでFinderを開きたい！！でした。
しかも、できればWindowsライクな感じで（Windows歴が長かったもので）
欲しい物は作ってしまおうということで、アプリ作りました。
![description gif](https://raw.githubusercontent.com/wiki/zetton-31/Gate/images/description.gif)
このアプリでは、以下のようなパスをMacでそのまま開くことができます。
共有されたパスの「¥」を「/」に置換する必要はもうありません。
もちろん、Macの「/」区切りのパスも開けます。

```
G:/teamdrive/development/test
G:¥teamdrive¥development¥test
G:\teamdrive\development\test
G:\teamdrive\development\test\specification.xlsx

//tera/team/development/test
¥¥tera¥team¥development¥test
\\tera\team\development\test
\\tera\team\development\test\specification.xlsx
```

私のようにコピー&ペーストでFinder開きたい方は、ぜひ使ってみて下さい〜
特にMacユーザーとWindowsユーザーの混成チームに属している方には役に立つのではないかなぁと思います。
これでファイルへのアクセスが爆速(？)間違いなしです！！
ということで、この記事ではアプリの使い方を簡単に説明します。
また、このアプリはElectronで作ったので、Electronについて得た知見も別記事でまとめる予定です。
Electronを使えば、HTML、CSS、Javascriptでデスクトップアプリができちゃうなんて、ちょっとした便利ツールを作るにはもってこいですね。

# ツールの使い方
1. Githubからアプリをダウンロードして、展開する。
https://github.com/zetton-31/Gate/releases/download/v0.1.1/Gate-0.1.1.tar.gz

2. Gate.appをアプリケーションディレクトリに格納する。

3. Gate.appを実行する。

4. 画面左上に入力フォームが表示されるので、パスを入力する。

5. Enter または OPENを押下するとFinderで入力したディレクトリが開きます。

# 今後のメンテナンスについて
他にも実装したいと思っている機能がいくつかあるので、逐次アップデートしていきます！
欲しい機能や改善点があれば、ぜひぜひコメントかGithubのIssueを下さい！！

＜検討中のもの＞
・アップデート通知機能
・MacのディレクトリパスをWindows用に変換してクリップボードにコピーする機能追加（MacユーザーからWindowsユーザーへ共有する用）
・ドライブ名称とボリューム名称の設定画面追加
・Windowsへの対応（MacのパスをWindowsで開けるようにする。）
OctoberCMSのエラーをSlackに通知する

[Error Loggerプラグイン](https://octobercms.com/plugin/vojtasvoboda-errorlogger)を使うと楽にできるが、Slackの方の設定など情報がなかったのでメモ。

## Error Loggerプラグインのインストール
OctoberCMSの管理画面、またはcomposerでもインストールできる。
composerではプロジェクトのルートディレクトリで下記コマンドで完了。

```
composer require vojtasvoboda/oc-errorlogger-plugin
```

以上で、下記のような画面が管理画面で開ける。

![oc_error_logger_slack.png](https://qiita-image-store.s3.amazonaws.com/0/138322/9d1c3c16-08ee-7d6e-019b-d6dc156d9f90.png)

## Slackの設定
ブラウザでSlackにログインして[Slack APIページ](https://api.slack.com/apps)からSlackアプリを作成する。

<img width="889" alt="Screen_Shot_2018-07-21_at_10_44_09.png" src="https://qiita-image-store.s3.amazonaws.com/0/138322/800c47e8-023b-b3f1-6bb8-6fd7216559ee.png">

「Review Scopes to Add」をクリック
![Screen_Shot_2021-01-14_at_16_58_18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138322/768b7139-d2ad-e631-07cf-2eef5aa3e304.png)

「Bot Token Scopes」で、Botに許可する権限を選択して設定する。
「Add an OAuth Scope」ボタンをクリックして、`chat:write.customize`を設定すると`chat:write`も追加するダイアログが出るので「Add Scopes」を押せば両方設定できる。
![Screen_Shot_2021-01-14_at_17_01_29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138322/8b7f464b-1a2f-7f7d-bb27-413180d719b4.png)

![Screen Shot 2021-01-14 at 17.03.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138322/e7e98d0d-c9dc-b9a4-04c5-8c6ec07405aa.png)

そしたら、ページの上の方に戻って「Install to Workspace」をクリックする。
<img width="881" alt="Screen_Shot_2018-07-21_at_10_48_11.png" src="https://qiita-image-store.s3.amazonaws.com/0/138322/4d54b899-ccfa-41f3-5871-2280d19979d1.png">

確認画面が表示されるので許可して自分のチームのワークスペースにアプリをインストールする。

インストールされると元の画面に戻り、「Bot Uesr OAuth Access Token」をコピーする。
![Screen_Shot_2021-01-14_at_17_05_51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138322/214f13e3-0e42-eee8-0d85-7ac21cc5e802.png)

そして、Slackのチャネルでこのアプリを追加してやる。
![Screen_Shot_2021-01-14_at_18_46_39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138322/75c630b5-c165-5605-ffbd-7c3730d1a180.png)

以上で、Slackの方の設定は完了。

## Error Logger プラグインの設定
OctoberCMS管理画面のSettings画面で、SYSTEM以下にある「Error logger」のメニューを開き、Slackタブを選択する。
![Screen_Shot_2021-01-14_at_18_44_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138322/3b1f05e9-e8ca-0f43-5fc8-2e15f6c0600f.png)


ここの「Slack API token」に先ほどコピーしたBotのトークンを貼り付ける。

Slack channelはお好きなチャンネル名を。ちなみに`#`で始まるのはチーム内の公開チャネルで`?`で始まるのは非公開チャネル、`@`で始まるのはユーザ名でダイレクトメッセージになる。

「Name of a bot」は実は先ほと作成したBotの名前でなくてもよい。単純にこの名前がSlackへの投稿で表示される。

「Send as attachment (option)」はチェックした方がSlackに表示されるメッセージがコンパクトになってよい。

以上で、ログにエラーが吐かれるとSlackに通知が飛ぶようになる。

<img width="886" alt="Screen Shot 2018-07-21 at 12.04.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/138322/508e5e9c-0a7a-3b95-92b9-f1f554d62e8c.png">
[関数系] PHPのswitch文の落とし穴「===」厳密比較じゃない・・・

# 概要

switch文をif文に書き換えるということをこの前やったが、そういえばという程度のメモ。ただ、余裕がないときにハマると厄介な気がするので、残しておく。

# 始まり

以下のようなswitch文があり、一つの分岐が必要なくなる事態が発生した。
以下の文でいうと、case 1の場合が必要なくなったと考えてもらえば良い。
ちなみにdefault文はなかった。


```php:元のswitch文

switch ($sample) {
    case 0:
        echo 'iは0に等しい';
        break;
    case 1:
        echo 'iは1に等しい';
        break;
}
```


ただ、case1がないとするとif文に書き換えた方が読みやすそうだ。じゃあそうしよう。default文もないし。まあ、リスク避けたいし、普通に厳密比較で書けば良いよね。


```php
if ($sample === 0) {
    echo 'iは0に等しい';
}
```

そして実行・・・あれ?echoされなくない・・・確かめると・・・

# 今回の問題

#### $sampleは実はstringで入って来てた

つまり、if文でいうと以下のような比較が行われていたわけで・・・

```php
if ($sample == 0) {
    echo 'iは0に等しい';
} else if ($sample == 1) {
    echo 'iは1に等しい';
}
```
これだと文字列の0でもintの0でもなんなら・・・と言った感じに曖昧な比較となる。(知っている人がほとんどだろうからあとは何もいうまい。)



いやちょっと待ってくれ。そこはintで渡しておけ・・・とか、おま・・・・。という小言は置いておいて。その時は0の方が正しい値(もちろん現実ではマジックナンバーが使用されていたわけではないが)だったため、$sampleの方を強制的にintに変換することで(納得いかないけど)対応した。



でもswitch文の方が読みやすい場合もあるので、switch文での厳密比較もしたいよね。

# switch文で厳密比較する場合にはどうするのか

```php:元のswitch文

switch ($sample) {
    case $sample === 0:
        echo 'iは0のintegerに等しい';
        break;
    case $sample === '0':
        echo 'iは0のstringに等しい';
        break;
}
```

という感じになる。現場からは以上です。

# 参考

[PHPのswitchで厳密な型比較](https://qiita.com/GHKEN/items/e2c96324a0365a690e86)
OpenWrt上でmDNSによる名前解決をしたい

表題の通り、OpenWrt上でmDNS（ホスト名.local）を使って名前解決したいと思ったんですが、どうやら無理っぽいと結論づけました。


## 普段のLinux環境での名前解決

多くのLinux環境ではglibc+NSS(Name Service Switch)で名前解決をしています。mDNSでの名前解決をしようと思ったら`/etc/nsswitch.conf` にmdnsの設定を書けば動くはずですし、mDNS系のパッケージをインストールすれば設定が追加されているはずですので意識せずにmDNSでの名前解決が可能だろうと思います。

## 一方OpenWrt環境では

一方、最近のOpenWrtではlibcとしてmuslを採用しており、NSS自体が存在しません。straceで確認してみたのですが、まず`/etc/hosts`を見てファイルベースで名前解決を試み、次に`/etc/resolv.conf`を見てローカルのdnsmasqでの名前解決を試み、そこで解決できなければ試合終了という挙動のようです。

dnsmasqがmDNSも問い合わせるような設定があればいいのですが、そのような動作は難しそうでした。

## 結論

OpenWrt環境ではmDNSによる名前解決は難しそうだという結論を得ました。

代替手段についてですが、OpenWrt環境ではLAN内のドメイン（デフォルトでは.lan）で名前解決できるはずなので、そちらを使うことにしました。敗北感がありますね。
AndroidでError calling RCTDeviceEventEmitter.emitが出る時の解決方法

`react-native run-android`を利用している時に発生するようです

`adb.exe`が入っているディレクトリを確認(Android Studioが入っている場合は`~/Library/Android/sdk/platform-tools`)

以下のコマンドを実行
`adb reverse tcp:8081 tcp:8081`
aws-workshop-for-kubernetesに従ってKubernetesのログをFluentdでCloudWatch Logsに連携するときのエラー対応方法

[aws-workshop-for-kubernetes](https://github.com/aws-samples/aws-workshop-for-kubernetes)に従ってFluentdからCloudWatch Logsにログ収集するとエラーが発生したので、対応方法を記載します。

## 発生したエラー

`Aws::CloudWatchLogs::Errors::InvalidSequenceTokenException`というエラーが発生しました。

## 原因と対応方針

[こちらの記事](https://qiita.com/htnosm/items/581db601d070b7ccea3b)の通り、複数のログソースから単一のログストリームにデータを送信していることが原因です。

AWS公式ドキュメントの「[CloudWatch Logs エージェントのリファレンス
](https://docs.aws.amazon.com/ja_jp/AmazonCloudWatch/latest/logs/AgentReference.html)」にも、このようなデータ収集はサポートしていないという記載があります。

> **同一または異なるホストの異なるログデータを同じログストリームに指定できますか。**
>    複数のログソースから単一のログストリームにデータを送信する設定はサポートされていません。

[aws-workshop-for-kubernetes/02-path-working-with-clusters/204-cluster-logging-with-EFK/templates/fluentd-configmap.yaml](https://github.com/aws-samples/aws-workshop-for-kubernetes/blob/master/02-path-working-with-clusters/204-cluster-logging-with-EFK/templates/fluentd-configmap.yaml)の関連部分は以下の通りです。

```
  output.conf: |
    <match **>
      # Plugin specific settings
      type cloudwatch_logs
      log_group_name kubernetes-logs
      log_stream_name fluentd-cloudwatch
      auto_create_stream true

      # Buffer settings
      buffer_chunk_limit 2M
      buffer_queue_limit 32
      flush_interval 10s
      max_retry_wait 30
      disable_retry_limit
      num_threads 8

    </match>
```

log_stream_nameが固定になっているのがエラーの原因です。

## 対応方法

[fluent-plugin-cloudwatch-logs](https://github.com/fluent-plugins-nursery/fluent-plugin-cloudwatch-logs)のREADMEを読むと、log_stream_nameにhostnameを入れることができると書かれています。

> This plugin uses fluent-mixin-config-placeholders and you can use addtional variables such as %{hostname}, %{uuid}, etc. These variables are useful to put hostname in log_stream_name.

そこで、ConfigMapを以下の通り修正します。

```
  output.conf: |
    <match **>
      # Plugin specific settings
      type cloudwatch_logs
      log_group_name kubernetes-logs
      # ログストリーム名をhostごとに変える
      log_stream_name fluentd-cloudwatch-%{hostname}
      auto_create_stream true

      # Buffer settings
      buffer_chunk_limit 2M
      buffer_queue_limit 32
      flush_interval 10s
      max_retry_wait 30
      disable_retry_limit
      num_threads 8

    </match>
```

これで複数のログソースから単一のログストリームにデータを送信することによるエラーは発生しなくなります。
Let’s encryptを利用して、https通信を構築する

前回、Ubuntu18.04にLaravelの環境を構築しました。今回は、[この環境](https://qiita.com/kouji555/items/5b4232711d472ca4d981)にドメインを設定し、https通信ができるようにしたいと思います。

##ドメインの取得
[こちらのサイト](https://ferret-plus.com/8797)を参考に無料のドメインを登録しました。
使いやすい以下の２点にしぼりました。

*no-ip
https://www.noip.com/remote-access

*freenom
https://my.freenom.com/clientarea.php

最終的に、freenomを利用し、.mlを取得してドメインを登録しました。

##UbuntuにLet’s encryptを利用して、サーバ証明書の取得

ubuntuにLet’s encryptをインストール。

```
sudo apt-get install letsencrypt
```

nginxを一旦止めて、証明書を取得する。

```
sudo systemctl stop nginx
sudo letsencrypt certonly --standalone -d example.ml
```

##ngnixに証明書を設定する

[前回](https://qiita.com/kouji555/items/5b4232711d472ca4d981)の設定にhttpsの設定を追記しました。

```
server {
        listen 443 default_server;
        listen [::]:443 default_server ipv6only=on;

        server_name sample-test.ml;

        root /var/www/laravel/public;
        index index.php index.html index.htm;
        ssl on;
        ssl_certificate /etc/letsencrypt/live/example.ml/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/example.ml/privkey.pem;

        location / {
                try_files $uri $uri/ /index.php?$query_string;
        }
        location ~ \.php$ {
                try_files $uri =404;
                fastcgi_split_path_info ^(.+\.php)(/.+)$;
                fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
                fastcgi_index index.php;
                fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
                include fastcgi_params;
        }
```

設定が終了したので、nginxを起動します。

```
sudo systemctl start nginx
```

暫くすると、```https://example.ml```でアクセスできるはずです。

##最後に
AWS上に、これまで、Laravelの開発環境を構築しました。
次は、ローカル環境上にhttpsでの開発環境を構築したいと思います。

参考元
https://qiita.com/k-yamada-github/items/7314003de7bdcbb2d39b
設定を永続的に保存するためのWeb storage

Qiitaに動画表示機能があるとしまして、その音量レベルとミュート設定を保存したり取り出すコードを人が使いやすいように書きました。
保存方法はWeb storageのLocal storageを使います。ブラウザのウィンドウやタブを閉じても永続的に保存されます。
StorageにはString型しか保存できないので、JSONファイルに変換してから保存します。

使い方は

```js:App.js
const { Settings } = require('./Settings');
const settings = new Settings();
//Local storageに何も保存されていなければ初期設定を返します
console.log(settings.volumeLevel);//0.5が出力されます
//Local storageに保存します
settings.volumeLevel = 1.0;
//Local storageを読み込んで出力します
console.log(settings.volumeLevel);//1.0が出力されます
```

コードは

```js:Settings.js

const APP_NAME = "QiitaVideo";

class Settings {
    constructor() {
        this._STORAGE_KEY = `${APP_NAME}Settings`;
        this._DEFAULT_SETTINGS = {
            volumeLevel: 0.5,
            isMuted: false,
        }
    }
    set volumeLevel(volumeLevel) {
        this._setKeyValue("volumeLevel", volumeLevel);
    }
    get volumeLevel() {
        return this._userSettings.volumeLevel;
    }
    set isMuted(isMuted) {
        this._setKeyValue("isMuted", isMuted);
    }
    get isMuted() {
        return this._userSettings.isMuted;
    }
    set _userSettings(userSettings) {
        const storage = this._getStorage();
        storage[this._STORAGE_KEY] = JSON.stringify(userSettings);
    }
    get _userSettings() {
        const storage = this._getStorage();

        const settingsJSON = storage.getItem(this._STORAGE_KEY);

        //初めてlocalstorageを使用する場合は初期設定を返す
        if (settingsJSON === null) return this._resetSettings();

        let settings;
        try {
            settings = JSON.parse(settingsJSON);
        } catch (e) {
            console.error('ユーザー設定のJSONファイルが壊れています。');
            console.warn('ユーザー設定を初期化します。');
            return this._resetSettings();
        }

        //ユーザー設定の検証
        if (!this._validateSettings(settings)) {
            console.error('ユーザー設定のプロパティが一致しません。');
            console.warn('ユーザー設定を初期化します。');
            return this._resetSettings();
        }

        return settings;
    }
    _setKeyValue(key, value) {
        const userSettings = this._userSettings;
        userSettings[key] = value;
        this._userSettings = userSettings;
    }
    _resetSettings() {
        const storage = this._getStorage();
        storage[this._STORAGE_KEY] = JSON.stringify(this._DEFAULT_SETTINGS);
        return this._DEFAULT_SETTINGS;
    }
    _validateSettings(settings) {
        const keys = Object.keys(this._DEFAULT_SETTINGS);
        return keys.every(key => (key in settings));
    }
    _getStorage() {
        try {
            return window.localStorage;
        } catch (e) {
            console.error('Web storageを利用できません');
            throw e;
        }
    }
}

module.exports = {
    Settings,
    APP_NAME,
};

```

#最後に
英語字幕と日本語字幕を同時に表示させて英語学習が出来るChrome拡張機能を公開しました。
もしよければ使ってみてください。よろしくお願いいたします。
[Hulu 同時字幕で英語学習](https://chrome.google.com/webstore/detail/lmmahellpnmhbpmimpebhikpjhiojhok)
[Netflix 同時字幕で英語学習](https://chrome.google.com/webstore/detail/gibmkmmdicoffkhjkfimmjkojjopoagg)
AWSシンプルアイコン抜粋&AWSシステム構成図

# 1. はじめに

---

## 参考
この資料は、AWSを用いたクラウドサーバ環境（Amazon EC2）を構築するにあたり、重要と思われるAWSシンプルアイコンを、以下の勉強会で学んだことをベースに、アレンジし、まとめたものとなります。

- [クラウドヂカラ #AWSセミナー
〜エンジニアに求められる本当のスキルとは!〜](https://pe-bank.jp/anket/event/20180705aws)
 
---

## このスライドを見てできること
- AWSシンプルアイコン の主要アイコンが理解できるようになる。
- AWSシステム構成図が理解できるようになる。

---

# 2. AWSシンプルアイコン

---

## アイコン機能説明（その1）

![スクリーンショット (202).png](https://qiita-image-store.s3.amazonaws.com/0/240522/e49b28f3-75f7-8ec4-d7c0-2c8aece0f39c.png)

---

## アイコン機能説明（その2）

![スクリーンショット (203).png](https://qiita-image-store.s3.amazonaws.com/0/240522/ec14d8e7-9e44-ef1c-2a92-b4f8ddd5697d.png)

---

# 3. AWSシステム構成図

---

## AWSシステム構成サンプル

![スクリーンショット (204).png](https://qiita-image-store.s3.amazonaws.com/0/240522/f0e1cb8e-5ea2-fb11-e307-fb2fb5a1b757.png)


---

# 4. おわりに

---

## おわりに
みなさまにとって、少しでも、この資料がお役立てできれば、幸いです。
時間があれば、資料をブラッシュアップしたいと思いますので、よろしければコメントお待ちしております！

---

# end
Controlled or Uncontrolled？

Reactで描画する入力要素には、ControlledとUncontrolledという2種類のものがあります。そして、それぞれに動作が違いますが、意図せずに両者を切り替えようとする動作になってしまってトラブルとなったこともありました。

# Controlled Element

Reactから`<input>`などの`value`に値を指定すると、それはControlled Elementということになります。[以前書いた](https://qiita.com/jkr_2255/items/c994b4ceebdd127bd710)ように、Controlled Elementは「入力操作があればイベントを発生させる」のと「`value`として与えられた値を表示する」というだけの動作となり、入力時のイベントから対応する変数を書き換えるようなコードを書かない限り、値は変化しなくなります。

# Uncontrolled Element

このような動作が適切でない場合、Uncontrolled Elementを使うこともできます。`value`に何も指定しない場合、「入力値をReact側の値に固定させる」という動作はもちろん起きず、ふつうのフォーム要素と同様、要素内に値を記憶するスタイルとなります。Reactから初期値を指定したい場合、`defaultValue`というpropを与えることで制御できます。

なお、`<input type="file">`はJavaScriptから値を書き込むことができないので、Uncontrolled Elementとして使うしかありません。

# うっかりUncontrolled

このように、Controlled ElementとUncontrolled Elementは性格の違うもので、両者を動的に切り替えようとするとエラーとなります。

切り替えを意図的にやることはないと思いますが、Controlledにするつもりが`value`に`undefined`を代入してしまうと、Uncontrolledとなってしまいます。イベントなどで値が変われば、「Controlledに切り替えようとした」とエラーとなってしまいます。

フォーム要素に与える値が`undefined`となることはないので、実用上は問題ないのですが、うっかりやらかさないように要注意です（文字列になる値であれば、`value || ''`などで対策しておいてもいいかもしれません。）。

# 外部リンク

* [facebook/react#6222 
Controlled inputs with the potential for `undefined` value](https://github.com/facebook/react/issues/6222)
opensslの表示系コマンドメモ

いつも忘れるのでメモ。
並べてみて気づいたが、サブコマンドが違うだけで後は一緒。

# 秘密鍵の確認
```
$ openssl rsa -in 秘密鍵ファイル -text
```

# 証明書署名要求の確認
```
$ openssl req -in 署名書署名要求ファイル -text
```

# 証明書の内容確認
```
$ openssl x509 -in 証明書ファイル -text
```
_mm_mul_pd() > x86 Intrinsics List || _ps: パックド単精度浮動小数点, _pd: パックド倍精度浮動小数点, _ss: スカラー単精度浮動小数点, _sd: スカラー倍精度浮動小数点

```txt:動作環境
GeForce GTX 1070 (8GB)
ASRock Z170M Pro4S [Intel Z170chipset]
Ubuntu 16.04.4 LTS desktop amd64
TensorFlow v1.7.0
cuDNN v5.1 for Linux
CUDA v8.0
Python 3.5.2
IPython 6.0.0 -- An enhanced Interactive Python.
gcc (Ubuntu 5.4.0-6ubuntu1~16.04.4) 5.4.0 20160609
GNU bash, version 4.3.48(1)-release (x86_64-pc-linux-gnu)
scipy v0.19.1
geopandas v0.3.0
MATLAB R2017b (Home Edition)
ADDA v.1.3b6
gnustep-gui-runtime v0.24.0-3.1
PyMieScatt v1.7.0
```

現在ソースリーディングを進めているコード(ADDA)において下記のような実装がある。

```interaction.c
...
ipx = _mm_cvtsi32_sd(ipx,ix);
ipx = _mm_mul_pd(p360,ipx);
...
```

Matrixに関する何かというのは推測できる。
_sdや_pdは何か?

上記の関数を含めた一覧は以下に記載されている。

- [x86 Intrinsics List](https://msdn.microsoft.com/en-us/library/hh977023.aspx)

SSE関連の実装なので、自分には直接関係はなさそう。

### ps, pd, ss, sd

https://www.xlsoft.com/jp/products/intel/compilers/ccl/12/ug/intref_cls/common/intref_bk_avx_fma.htm
によると

- _ps: パックド単精度浮動小数点
- _pd: パックド倍精度浮動小数点
- _ss: スカラー単精度浮動小数点
- _sd: スカラー倍精度浮動小数点

これ以上の情報は不要なので、ここまで。
AppEngineのローカル開発サーバdev_appserver.pyでデバッグログを出力する

AppEngineのローカル開発サーバでDEBUGログが出なかったので出す方法を調べた。


## 現象

ソース

```
logging.basicConfig(level=logging.DEBUG)
logging.debug("DEBUG!!!")
logging.info("INFO!!!")
```

デバッグログは出力されない。

```
INFO!!!
```

## 対策

dev_appserver.pyのオプション`--log_level debug`が必要。

```
dev_appserver.py --log_level debug app.yaml
```

https://cloud.google.com/appengine/docs/standard/python/tools/local-devserver-command
【Swift】ローカライズとiPhoneの使用言語


# １．はじめに
　英語と日本語に対応したアプリを作ったので、iPhoneの言語設定をちょこちょこ変えてテストをしていた時に、想定した言語で表示されなかったので書き留めておきます。
　
　ローカライズの設定
　・英語（base）
　・日本語
　
　「PROJECT > Info」 の設定
　![スクリーンショット 2018-07-21 9.21.10.png](https://qiita-image-store.s3.amazonaws.com/0/124577/ca890846-c1ed-abf7-a56e-a12b13922b58.png "スクリーンショット 2018-07-21 9.21.10.png")


# ２．コード
```ViewController.swift
override func viewDidLoad() {
	super.viewDidLoad()
	print(NSLocalizedString("hello", comment: ""))
}
```

```Localizable.strings(Base)
"hello" = "hello english";
```

```Localizable.strings(Japanese)
"hello" = "こんにちは 日本語";
```


# ３．想定
　iPhoneの使用言語の設定とアプリ内での表示の想定。
　iPhoneの使用言語は「設定 > 一般 > 言語と地域 > iPhoneの使用言語」で変更できます。

| ＃ | iPhoneの使用言語 | アプリ内の表示       |
|:---|:---------------|:-------------------|
| 1  | 日本語          | 「こんにちは 日本語」 |
| 2  | English        | 「hello english」  |
| 3  | Español        | 「hello english」  |

　つまり、iPhoneの使用言語を日本語または英語にした場合は、それぞれ該当する言語で表示される。
　それ以外の言語に設定した場合は、英語で表示される。


# ４．うまくいかなかったパターン
　iPhoneの使用言語を日本語、英語以外に設定した場合に日本語で表示されたり英語で表示されたりした。
　これはアプリのローカライズが「iPhoneの使用言語」だけではなく、その下の「使用する言語の優先順序」にも影響されるためです。
　
　![スクリーンショット 2018-07-21 9.44.54.png](https://qiita-image-store.s3.amazonaws.com/0/124577/8b7957da-434a-43ae-539b-84a19dcec6e0.png "スクリーンショット 2018-07-21 9.44.54.png")


　iPhoneの使用言語に日本語、英語を設定した場合は、それぞれ該当する言語で表示されます。
　iPhoneの使用言語に日本語、英語以外を設定した場合は、使用する言語の優先順序が影響します。
　日本語と英語のうち、優先順序の上位にある言語でアプリがローカライズされます。
　
　
　つまり、以下のような設定の場合は英語でローカライズされます。
　![スクリーンショット 2018-07-21 9.51.20.png](https://qiita-image-store.s3.amazonaws.com/0/124577/792ab38d-7064-b3ae-6a23-fd6b4a1613dc.png "スクリーンショット 2018-07-21 9.51.20.png")
　
　
　また、以下のような設定の場合は日本語でローカライズされます。
　![スクリーンショット 2018-07-21 9.52.48.png](https://qiita-image-store.s3.amazonaws.com/0/124577/75d3e88a-fc32-4b2a-b3ff-01864896d069.png "スクリーンショット 2018-07-21 9.52.48.png")
　
# ５．おわりに
　iPhoneの使用言語をコロコロ変えるユーザーはあまりいないと思うので、実際にはそこまで影響は出ないかなと思いますが、テストでちょっと戸惑ったのでメモしときます。
さくらのクラウドDNS + Let's Encrypt でワイルドカード証明書する！

ワイルドカード証明書記事第3弾ですｗ

* [Let's Encrypt (certbot) を使ってワイルドカード証明書する！(あとちょっと)](https://qiita.com/chamaharun/items/9b8c00d14c05c025febd)
* [Let's Encrypt (certbot) でワイルドカード証明書できた！](https://qiita.com/chamaharun/items/566c78bb8a13b4c2bc16)

Let's Encryptの公式推奨クライアントであるcertbotが最新バージョンでさくらのクラウドDNSに対応したので、検証してみました。



####  おことわり
pipではcertbotが記事執筆時点(2018/07/21)で0.26.1が最新バージョンらしく、本記事ではpipで一からインストールしています。
一方yum(epel)ではまだ0.25.1なので、yumで入れた方は0.26以降が配信されるのを待ったほうが良いかもです。

## 準備
* さくらのクラウドDNSでゾーンが登録されていて、レコードが利用可能な前提で進めます。
* 詳しくは[公式ドキュメント](https://manual.sakura.ad.jp/cloud/appliance/dns/index.html)を参照してください。

### certbot 0.26.1 のインストール
pipからインストールしてます。
前回の記事同様、setuptoolsが古いと怒られたのでupgradeしてます。

``` bash
$ yum -y install python-pip
$ pip install pip --upgrade
$ pip install setuptools --upgrade
$ pip install certbot
$ pip install certbot-dns-sakuracloud
```

### さくらのクラウドのAPIの認証情報を用意
さくらのクラウドのコントロールパネルから、APIキーを発行します。
<img width="907" alt="スクリーンショット 2018-07-21 09.09.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/104051/f73ca224-a305-d582-7cee-bcc7c8be424b.png">

以下の形式で認証情報を記述したファイルを用意します。
今回は ` ~/.sakura ` というファイル名にしています。
パーミッションは600とかにしとかないとunsafeだと怒られます。

``` python:~/.sakura
dns_sakuracloud_api_token = 'アクセストークン'
dns_sakuracloud_api_secret = 'アクセストークンシークレット'
```

## 証明書を取得
` --dns-sakuracloud-credentials ` オプションで認証情報ファイルを指定します。

```bash
$ certbot certonly --dns-sakuracloud \ 
  --dns-sakuracloud-credentials ~/.sakura \ 
  -d *.ドメイン \
  -m メールアドレス \
  --manual-public-ip-logging-ok \
  --agree-tos 
```

 * manual-public-ip-logging-ok グローバルIPが記録されることへの同意
 * agree-tos 利用規約への同意
 * これらのオプションをつけておかないと同意するか確認される。

## 結果
取得できた！

```bash
Saving debug log to /var/log/letsencrypt/letsencrypt.log
Plugins selected: Authenticator dns-sakuracloud, Installer None
Obtaining a new certificate
Performing the following challenges:
dns-01 challenge for ドメイン
Waiting 90 seconds for DNS changes to propagate
Waiting for verification...
Cleaning up challenges

IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at:
   /etc/letsencrypt/live/ドメイン/fullchain.pem
   Your key file has been saved at:
   /etc/letsencrypt/live/ドメイン/privkey.pem
   Your cert will expire on 2018-10-18. To obtain a new or tweaked
   version of this certificate in the future, simply run certbot
   again. To non-interactively renew *all* of your certificates, run
   "certbot renew"
 - If you like Certbot, please consider supporting our work by:

   Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
   Donating to EFF:                    https://eff.org/donate-le

```

## まとめ
* certbotのDNSプラグインにさくらのクラウドDNSが追加された。
* 認証情報のファイルを用意し、オプションで指定することで、APIを叩かなくてもワイルドカード証明書が発行される。
* 簡単。

## おまけ
* 多分更新は certbot renew コマンドですんなり行くと思います。
* OSC Hokkaido 2018 で[ワイルドカードネタを発表](https://speakerdeck.com/chamaharun/lets-encryptdeshi-merusslzheng-ming-shu)しました。
macOSアプリ開発でわからないときの調べ方

最近swiftでmacOSアプリを開発しています。
macOSアプリの開発は初めてで、swift & Xcodeでの開発経験も浅いので、わからないことは調べながら進めてます。
基本的に調べるときはまずググりますが、swiftとXcode関連でググるとだいたいがiOSの記事が上位に出てきてしまいます。

そんな中で、macOS開発の調べものについてこれまで試した自分なりの調べ方を書き留めておきます。

## その前に・・・
macOSアプリ開発の日本語の情報は英語に比べて圧倒的に少ないので、否が応でも英語に触れる必要が出てくるかと思います。

## 「cocoa + 調べたいワード」でググる
macOSは基本的にcocoaフレームワークで作られてるので、**「cocoa + 検索ワード」**でググると情報が引っかかるようになります。

## NSViewとかでググる
cocoaのビューはiOSと違ってNSViewなど、プレフィックスがNSになっています。
[こちら](https://developer.apple.com/documentation/appkit/views_and_controls)を参考に（または実際にXcodeで触れて）使いたいビュー名を調べてググります。

## Youtubeを検索する
↑の検索ワードをYoutubeで調べるとビューの使い方を説明している動画が結構あります。
文章では分かりづらいStoryboardやInterface builderの使い方などが順を追って見られるので重宝します。

## AppleのAPIリファレンスを読む
上でも貼ってますが、[Appleの公式APIリファレンス](https://developer.apple.com/documentation/appkit/views_and_controls)を読んで使い方を確認します。

## 本を買う
一冊手元にあると結構役に立ちます。
いわゆるヒレガス本は持ってて安心かもしれません(自分は別の本持ってますが・・・)。

## Appleのサンプルプロジェクトを見る
[ここから](https://developer.apple.com/library/archive/navigation/index.html#topic=Sample+Code&section=Resource+Types)サンプルプロジェクトがダウンロードできます。
検索ボックスに調べたい内容のワード(例えばNSMenuとかNSSplitViewとか)を入力して絞り込みます。
ダウンロードしたら実際にxcodeでコード見て動かして参考にできます。

## teratailやstackoverflowで質問する
どうしても情報が見つからない場合は質問すると答えが帰ってくるかもしれません。
その場合はなるべく具体的に質問するようにします。

## 番外
調べ方というか、学習の仕方になってしまうので別物ですが、勉強会やオンライン講習に参加するのも良いかと思います。
勉強会は[connpass](https://connpass.com/)などで調べると見つけやすいかと思います。
オンライン講習(MOOC)だとcocoaの講習は[Udemy](https://www.udemy.com/)ぐらいにしかありませんでした(cousera、Udacity、JMOOCには全然ない・・・)。

---

他にも「こういう風に調べてるよ、参考になるよ」というのがあれば是非コメントくださいませ。
【進捗】M5stackでNeoPixelを使う最速手順

M5stackでNeoPixelで進捗を出す最速手順と、
ハマったポイントを紹介します。



##手順１. Neopixelライブラリーの使用

先人の知恵をお借りして、AdafruitのNeopixel Libraryを使用します。
（先人リンク）
https://qiita.com/tomorrow56/items/fcf5ea7bfd2056e8f88f




...と、
基本的にはコレで終了なのですが、これでネオピクが光らず、
2日ほど進捗が出ませんでした。

##M5stack実は電源2種類あるよ問題

実はM5stackには電源用のピンが2種類あります。
・5V
・3.3V

![IMG_1228.png](https://qiita-image-store.s3.amazonaws.com/0/273740/7c6bc447-b346-acf6-e26e-1757bc6238c3.png)


ネオピク側に記載してあるのは5Vなのでなんの疑いもなく「5V」ピンから電源をとろうとしてましたが、M5stackでネオピクを制御する場合は「3V3」ピンから電源を取る必要があるようです。

![37621900_1517370461702552_564396953673138176_n.jpg](https://qiita-image-store.s3.amazonaws.com/0/273740/46d22776-047b-0864-f789-7b8eb9c97c4d.jpeg)



進捗は以上です。
Spring Bootのactuatorで取得できるhealthの情報をBeanで利用する

# 概要

Spring Bootのactuatorで取得できるhealthの情報をBeanで利用する方法を調べたのでシェア
用途は、actuatorのhealthが、アプリケーションの環境(diskやDBの接続状態)の情報を表すのに対し、サービス固有のスタンバイ状態などを表現したい場合に使えます。
例えば、k8sのreadinessとlivenessを使い分けたいときなどに利用できます。

# 参考

[Introducing Actuator Endpoints in Spring Boot 2.0](https://spring.io/blog/2017/08/22/introducing-actuator-endpoints-in-spring-boot-2-0)
[Spring Boot on Kubernetes : Yahoo!ズバトク事例](https://www.slideshare.net/techblogyahoo/spring-boot-on-kubernetes-yahoo-jjugccc)

# やり方

RouterFunction(かつKotlin)を使った例になっていますが、アノテーションベースでも動くはずです。

```kotlin
package com.example.service

import org.springframework.boot.actuate.health.HealthEndpoint
import org.springframework.http.HttpStatus
import org.springframework.stereotype.Component
import org.springframework.web.reactive.function.server.ServerRequest
import org.springframework.web.reactive.function.server.ServerResponse
import org.springframework.web.reactive.function.server.ServerResponse.status
import org.springframework.web.reactive.function.server.body
import reactor.core.publisher.Mono

@Component
class StatusService(
        private val healthEndpoint: HealthEndpoint
) {
    private var ready: Boolean = false

    fun ready() = ready

    fun readiness(req: ServerRequest): Mono<ServerResponse> {
        if (!this.ready || healthEndpoint.health().status.code != "UP") {
            return status(HttpStatus.SERVICE_UNAVAILABLE).body(Mono.just("service is unavailable"))
        }
        return status(HttpStatus.OK).body(Mono.just("service is available"))
    }

    fun serviceIn() {
        this.ready = true
    }

    fun serviceOut() {
        this.ready = false
    }
}
```
Spectrumを試してみた。


はじめまして、maoです。
今日は新しいサービスミーハーなmaoが最近追加したサービスをご紹介します。
<h3><b>Spectrum : https://spectrum.chat/</b></h3>

<img width="1385" alt="スクリーンショット 2018-07-16 9.49.21.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/85978/1451026b-bcbb-57ab-7f20-e8473cc8db10.jpeg">
<br>
Spectrumはコミュニティベースの交流プラットフォームです。使ってみて1週間くらい（この記事を書いた時点では3-4日）ですが、面白いです。英語の勉強にもなるので、ちょこちょこ使い続けそうな予感です。

Spectrumの特徴を一言で言うとその階層の分け方、機能かと思っています。FacebookやTwitter、Quora、Slackなどいいとこ取りができているのかなと思います。

その特徴・機能をログインしてからの動線に沿って見ていきたいと思います。

・・・って思ったけどQiitaに全然画像が読み込まれなかったので
https://note.mu/celorie/n/n5a4df06108f1
こちらの記事をご覧ください。

ちゃんと画像つきで解説してます。


<h3><b>Spectrumはどれくらい使われている？</h3></b>

Spectrumはまだまだ聞いたこともない方が多いのかもしれません。その規模は大きなコミュニティは5000人くらいのものを発見していますので、全世界でユーザーは2-3万人くらいいるのでは？となんのロジックもなく勝手に類推しています。海外のサービスの話題が多いこと、言語が英語であることから日本からのユーザーはあまりいないのかと思いきや、すでにいくつかの日本語スレがありました。

Angular Japan
https://spectrum.chat/thread/0811621a-ad3f-476c-8a57-378a2679d8c9?thread=aa1ceb4f-e881-4459-b2ed-7989dd09edba


「Japan」というキーワードで検索したところこちらのコミュニティが一番メンバー数が多いようです。7/21に検索した時には149人のメンバーがいらっしゃいました。

ちらほら日本語のコミュニティは見受けられたものの、せっかくチャンネルやスレもオープンに誰でも見られるコミュニティプラットフォームなので、ローカル言語でというよりは英語のほうがSpectrumを使い倒せそうです。

<h3><b>他ツールとの使い分けは？</h3></b>
あるスレではSlackからの移行をするかしないか？　というディスカッションを見つけました。Slackと構造が似ていますし、ディスカッションに使う、フォーラムで使うなど使い方も似ているので（さらには使い勝手もいいし）当然検討されうるツールだなと思います。固定のチームで使うのであれば言語はローカル言語でもよさそうですし（入力・表記で日本語を使っても今のところは問題がありませんでした）、チャット、ファイル共有、チャンネル使い分けなど基本的なできることはあまり変わりません。

SlackとSpectrumの違いは何かと言うと、内向きか外向きか、というポイントだと思っています。Slackは一定長期的に、所属組織にある程度コミットメントしていて、クローズドな会話をしたい、ときにはおすすめかと思います。チームが固まってきたときによりスムーズに密に会話がしやすくなるツールというイメージです。

他方SpectrumはSlackの勉強会・コミュニティに入ったときに感じる使いづらさみたいなものを解消するために使えるかと思っています。数百人になったときスレでなんとなく発言しづらいなあとか、勝手にチャンネル立てづらいなあとか。Spectrumの中にはコミュニティがたくさんあるので、Slackで言うところのワークプレースを行き来しやすく、違うコミュニティに所属しているユーザーともリアルタイムに会話することができます。それから、各ユーザーページもあるので、プロフィールを確認することができます。Slackではユーザーのプロフィールを見ることができません。コミュニティプラットフォームとして使うのであればプロフィールあったら便利ですよね。

<h3><b>まとめ</h3></b><br>
SpectrumはFacebook、Twitter、Quora、Slackのいいとこどり。使い方はまたまだ広がりそう。今はまだユーザーが使い込んで発展させていくフェーズ。

今回使ってみて、コミュニティの数もまだ少ないですし、必須ツールではないな、といったところです。しかし目立った使いづらさはなく、コミュニティが増えてきていろんなディスカッションが見られるようになったらもっと使うようになるんだろうなと思いました。

新しいサービスに目がない人、コミュニティツールを探している人、ぜひ使ってみてください^^

#