OmniAICreator/Qiita-1.07M huggingface dataset:
SCIM2.0の概要について調べてみた

# SCIMとは

System for Cross-domain Identity Managementの略。
ユーザIdentity情報を、クラウドベースアプリケーションやマイクロサービス間で連携するためのデータフォーマットの仕様。
RFC7642〜7644に定義されており、7643, 7644はStandards Track（標準化過程）にまでなっており、それに従って実装されたサービスがすでに複数存在する。

2015/9にバージョン2.0がリリースされたので、そのフォーマットについて調べてみた。

# どんなサービスで使用されているのか？

* [Azure Active Directory](https://docs.microsoft.com/ja-jp/azure/active-directory/active-directory-scim-provisioning)
    * Active Directoryに設定したユーザ・グループ情報を自動的に他サービスにProvisioningする。
    * クライアント側の一例。
* [Trello](https://developers.trello.com/reference/#overview)
    * REST API経由でTrelloのユーザ参照・作成等の操作や、チームやボードの参照が可能らしい。
    * サーバ側の一例。

その他、[SCIM 公式サイト](http://www.simplecloud.info/)の `Implementation` にて紹介されているサイト群を参照。

# 連携対象となるデータドメイン

下図のように、User情報およびそれらUserをグループ化するようなアクセス制御情報（＝Group）がデータ連携対象となる。
Groupの具体的な対象は場合に変わるが、部署であったりアクセス権限のRoleグループであったりする。
また、GroupはメンバーとしてUserまたはGroupを持つ。
EnterpriseUserとは、Userの中でもビジネスに携わったり企業に所属するUserの情報を指し、Userの情報に追加して社員番号や所属部署等の情報が入る。
その他、アプリ固有のデータ項目を追加できるよう、拡張できるようなフォーマットになっている。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/47429/63f90fce-8d65-04ae-5d61-136c3fae4f96.png)
※ [SCIM 公式サイト](http://www.simplecloud.info/)より引用

# 連携方式

公式サイトに記載されている例のように、REST API経由で対象リソース（ユーザやグループ）にアクセスするだけでよい。
以下のようなエンドポイントを用意し、それを経由するイメージ。vにはプロトコルバージョン（例：v2）、resouceには対象となるデータモデル（例：Groups）が入る。

```
Create: POST https://example.com/{v}/{resource}
Read: GET https://example.com/{v}/{resource}/{id}
Replace: PUT https://example.com/{v}/{resource}/{id}
Delete: DELETE https://example.com/{v}/{resource}/{id}
Update: PATCH https://example.com/{v}/{resource}/{id}
Search: GET https://example.com/{v}/{resource}?ﬁlter={attribute}{op}{value}&sortBy={attributeName}&sortOrder={ascending|descending}
Bulk: POST https://example.com/{v}/Bulk
```
※ Searchだけちょっと実装が面倒そう。

例えばUser作成リクエストだと、以下のようなリクエストが公式サイトでは紹介されている。

```
POST /v2/Users  HTTP/1.1
Accept: application/json
Authorization: Bearer h480djs93hd8
Host: example.com
Content-Length: ...
Content-Type: application/json

{
  "schemas":["urn:ietf:params:scim:schemas:core:2.0:User"],
  "externalId":"bjensen",
  "userName":"bjensen",
  "name":{
    "familyName":"Jensen",
    "givenName":"Barbara"
  }
}
```

そして上記のJsonのデータ項目がRFCにおいて結構しっかり定められている。

## 追記

Qiitaの記事ないと思って、SCIMについて書いたのだが、以下の記事にすでに似たようなことが書かれていた。。。
https://qiita.com/naka_kyon/items/58e3c55282e997aaef47
GAEのセットアップ

##__環境__
- ubuntu16.04
- anaconda2-5.0.1(python2.7)

##__GAEのセットアップ__
Standard環境(python)の構築

参考）[Quickstart for Python App Engine Standard Environment](https://cloud.google.com/appengine/docs/standard/python/quickstart?refresh=1#before-you-begin)


###__新しいGCPのプロジェクトを作る__
省略

###__python環境の構築__
別記事にてまとめたため省略
[[自分用]python環境構築（pyenv+pyenv-virtualenv）/GAE](https://qiita.com/star318ss/items/26a9a52bd1beb3b68bf9)

###__SDKのダウンロード__
参考）[Download the SDK for App Engine](https://cloud.google.com/appengine/docs/standard/python/download)

以下urlのubuntuに沿ってやってみたが、~~SDKがダウンロードできなかったのか？~~
~~（linux側のsdkを解凍しなくてはならなかった?）~~
解決に時間がかかってしまった。
参考）[Google Cloud SDK ドキュメント](https://cloud.google.com/sdk/docs/#deb)

```
$ export CLOUD_SDK_REPO="cloud-sdk-$(lsb_release -c -s)"
$ echo "deb http://packages.cloud.google.com/apt $CLOUD_SDK_REPO main" | sudo tee -a /etc/apt/sources.list.d/google-cloud-sdk.list
$ curl https://packages.cloud.google.com/apt/doc/apt-key.gpg | sudo apt-key add -
$ sudo apt-get update && sudo apt-get install google-cloud-sdk
$ gcloud init
```
(追記)sdkのダウンロードはできてるけど、pathが通っていなかったんだと、書きながら気づいた。



その後、sdkをダウンロードするために、
（ダウンロードは、~/.google-cloud-sdkにしといた）

```
$ curl https://sdk.cloud.google.com | bash
…
$[~/.bashrc]:  ENTER
Backing up [~/.bashrc] to [~/.bashrc.backup].
[~/.bashrc] has been updated.
$ source ~/.bashrc
```
bashrcにパスの追加をするかどうか聞かれるのでENTERする
bashrcを読み込みなおして、終わり
（追記）この方法win用だったので、上の方法でpath通したほうがいいだろう（たぶん）

これでgcloudのコマンドが使えるようになったので
追加でインストール

```
$ gcloud components install app-engine-python-extras
```


次はサンプルを動かしてみよう。
The Japanese translation of "A Whirlwind Tour of Python" - How to Run Python Code

http://nbviewer.jupyter.org/github/jakevdp/WhirlwindTourOfPython/blob/master/01-How-to-Run-Python-Code.ipynb

# Pythonコードの実行方法
Pythonは柔軟な言語であり、あなたの特定のタスクによって使ういくつかの方法があります。他の言語とPythonを区別する一つのことはコンパイルされるよりむしろインタプリタされるということです。これは、一行一行実行されることを意味し、プログラミングを、FortranやC, Javaのようなコンパイル言語では直接可能でないという意味で、双方向にしうるということです。この節では、Pythonインタプリタ、IPythonインタプリタ、すべてそろったスクリプト、もしくはJupyter notebookといった、Pythonコードを実行できる4つの主要な方法を記述します。

## Pythonインタプリタ
Pythonコードを実行する最も基本な方法はPythonインタプリタで一行ずつ行うものです。PythonインタプリタはPython言語をインストールして（前の節を見てください）、コマンドプロンプト（Max OS XやUnix/Linux システムのターミナル、またはWindowsのコマンドプロンプトアプリケーションを探してください）でPythonをタイピングすることによって開始されます。

```
$ python
Python 3.5.1 |Continuum Analytics, Inc.| (default, Dec  7 2015, 11:24:55)
Type "help", "copyright", "credits" or "license" for more information.
>>>
With the interpreter running, you can begin to type and execute code snippets. Here we'll use the interpreter as a simple calculator, performing calculations and assigning values to variables:

>>> 1 + 1
2
>>> x = 5
>>> x * 3
15
```
インタプリタはPythonコードの小さいスニペットを試してみて短い連続した演算で実験することをとても便利にします。

## IPython インタプリタ
もしあなたが基本的なPythonインタプリタに多くの時間を費やすなら、あなたはそれは完全なインタラクティブな開発環境の特徴を不足していることがわかるでしょう。（インタラクティブなPythonのための）IPythonと呼ばれる別のインタプリタはAnaconda distributionに付属されていて、基本的なPythonインタプリタに対する多くの便利な更新を含んでいます。コマンドプロンプトでipythonをタイプすることでスタートできます。

```
$ ipython
Python 3.5.1 |Continuum Analytics, Inc.| (default, Dec  7 2015, 11:24:55) 
Type "copyright", "credits" or "license" for more information.

IPython 4.0.0 -- An enhanced Interactive Python.
?         -> Introduction and overview of IPython's features.
%quickref -> Quick reference.
help      -> Python's own help system.
object?   -> Details about 'object', use 'object??' for extra details.

In [1]:
```
Pythonインタプリタと更新されたIPythonインタプリタの主たる美的な違いはコマンドプロンプトに見られます。つまり、Pythonは >>> をデフォルトで使いますが、IPythonは 番号付けされたコマンドを使います（すなわち、In [1]:）。すなわち、私たちが前に行ったように単に一行ずつコードを実行できます。

```
In [1]: 1 + 1
Out[1]: 2

In [2]: x = 5

In [3]: x * 3
Out[3]: 15
```
入力が番号付けされていることに留意してください、各コマンドの出力は同じように番号付けされています。IPythonは幅広く役に立つ機能が利用できます。もっと読むための場所につちえのいくつかのおすすめについて、"Resources for Further Learning"を見てください。

## 独立したPythonスクリプト
Pythonのスニペットを一行ずつ実行することは、いくつかの場合役に立つが、より複雑なプログラムでは、コードをファイルに保存してそれをいっきに実行することがより便利です。慣習により、Pythonスクリプトは、.py拡張子のファイルに保存されます。例えば、以下を含んだtest.pyという名前でスクリプトを作ってみましょう。

```python
# file: test.py
print("Running test.py")
x = 5
print("Result is", 3 * x)
```
このファイルを実行するために、可連弩ディレクトリにそれがあることを確認して、コマンドプロンプトでPythonのファイル名をタイプします。

```
$ python test.py
Running test.py
Result is 15
```
より複雑なプログラムのために、このような独立したスクリプトを作ることは必ず必要なことです。

##  The Jupyter notebook
双方向のターミナルと独立したスクリプトの有用なハイブリッドはJupyter notebookで、実行可能なコードや成形されたテキスト、図、一つのドキュメントに結合されてるようなインタラクティブな機能さえ許すドキュメントフォーマットです。notebookはPythonだけのフォーマットで始まりましたが、多くのプログラミン言語と互換性がされており、今やJupyter Projectの重要な部分になっています。notebookは、豊富な計算やコードや図、データ、テキストを一緒に混ぜるデータ駆動の説話を経る、共同作業という意味として、または開発環境として、両方で役に立つものです。
CSSで要素の縦横中央寄せを行う3つの方法

要素を縦横中央寄せにするための処理です。
flexboxが主流になった今では、とても簡単になりましたね。
最初に紹介する方法は最近知ったのですが、他の方法を含めまとめておきます。

## flex + margin: auto;

これが一番簡単なのではないでしょうか？
記述量が少ないです。お恥ずかしながら最近まで知りませんでした。

```css
// 対象の親要素
.wrap {
  display: flex;
}

// 中央寄せしたい要素
.box {
  margin: auto;
}
```

## flex + center

最近までは下記のように書いていました。

```scss
// 対象の親要素
.wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

// 中央寄せしたい要素
.box {}
```

## position + translate

flexboxが使える前は、position + translate で書いてましたよね。
たまに`relative`が邪魔になることもありましたが、今ではとても簡単になりました。

```scss
// 対象の親要素
.wrap2 {
  position: relative;
}

// 中央寄せしたい要素
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}
```
VisualStudioCode + gulp + browserify でブレークポイントが効かなかった問題（解決）

なかなか今更な環境ですが、ブレークポイントが効かなくて苦労してしたのでメモメモ。

# 環境
Windows 10
Visual Studio Code 1.19.1
gulp + browserify
Google Chrome

# やりたいこと

以下のようなフォルダ構成にしたい。
デバッグ時にブレークポイントを設置したい。

```
+ .vscode
+ src
| + aaa.js
| + bbb.js
+ www
  + index.html
  + script
    + main.js
    + main.js.map
```

# 答え

browserify 時に Source Map に sourceRoot を追加すればうまく行きました。

# gulpfile.js

```
// build
gulp.task( 'build', function() {
  var browserify = require( 'browserify' );
  var source = require( 'vinyl-source-stream' );
  var buffer = require( 'vinyl-buffer' );
  var sourcemaps = require( 'gulp-sourcemaps' );

  browserify( folder.src + 'main.js', { debug: true } )
      .bundle()
      .pipe( source( 'main.js' ) )
      .pipe( buffer() )
      .pipe( sourcemaps.init( { loadMaps: true } ) )
      .pipe( sourcemaps.write( './', { includeContent: false, sourceRoot: '../../' } ) )   // <===== ★ここ
      .pipe( gulp.dest( folder.build ));
} );
```

# launch.json

```
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "chrome",
            "request": "launch",
            "file": "${workspaceRoot}/www/index.html",
            "sourceMaps": true,
            "runtimeArgs": [
                "--allow-file-access-from-files",
                "--remote-debugging-port=9222",
                "--user-data-dir=${workspaceRoot}/chrometmp"
            ]
        }
    ]
}
```

# 関係なかったこと

[VisualStudioCode + TypeScript でブレークポイントが効かなかった問題（解決）](https://qiita.com/ttoonnaa/items/cb6a898e1f94a2692d14)

これ関連だろうと当てをつけて探していたのですが関係ありませんでした。
最終的に outFiles は必要ありませんでした。


# 気づいた経緯

launch.json に以下を追加してログを出力しました。

```
{
    "version": "0.2.0",
    "configurations": [
        {
...
            "trace": "sm",
...
        }
    ]
}
```

%TMP% フォルダに vscode-chrome-debug.txt が出力されたので中身とにらめっこしました。

> SourceMap: sourceRoot: undefined

こんな行がありました。

以前きちんと動いていた、TypeScript を使った環境の main.js.map を覗いてみると
sourceRoot: "../../" が指定されていました。
今回の main.js.map には指定されてませんでした。

sourcemap sourceroot で検索すると、正解が見つかりました。
Überauth Twitterでoauth/authenticateを呼ぶ

# Überauth Twitter
https://github.com/ueberauth/ueberauth_twitter

# URLを生成している部分

https://github.com/ueberauth/ueberauth_twitter/blob/master/lib/ueberauth/strategy/twitter/oauth.ex#L16

```elixir
@defaults [access_token: "/oauth/access_token",
             authorize_url: "/oauth/authorize",
             request_token: "/oauth/request_token",
site: "https://api.twitter.com"]
```

と定義されているので、`config.exs`に`authorize_url: "/oauth/authenticate"`と上書きしてやると`oauth/authenticate`を呼ぶことができる

```elixir
config :ueberauth, Ueberauth.Strategy.Twitter.OAuth,
  consumer_key: System.get_env("TWITTER_CONSUMER_KEY"),
  consumer_secret: System.get_env("TWITTER_CONSUMER_SECRET"),
  authorize_url: "/oauth/authenticate"
```

# developer twitter - api reference
https://developer.twitter.com/en/docs/basics/authentication/api-reference/authenticate
HDP Sandbox 起動スクリプトがうまくいかなかったので・・・

https://jp.hortonworks.com/tutorial/sandbox-deployment-and-install-guide/section/3/

この手順にそって start_sandbox-hdp.sh を実行したがなかなか終わらない。
以下の手順でやったらうまく起動した。


**1. スクリプト内の docker run ・・・ まで手動実行**

``` start_sandbox-hdp.sh
#!/bin/bash
echo "Waiting for docker daemon to start up:"
until docker ps 2>&1| grep STATUS>/dev/null; do  sleep 1; done;  >/dev/null
docker ps -a | grep sandbox-hdp
if [ $? -eq 0 ]; then
 docker start sandbox-hdp
else
docker run --name sandbox-hdp --hostname "sandbox-hdp.hortonworks.com" --privileged -d \
-p 15500:15500 \

〜〜〜　省略　〜〜〜

-p 2222:22 \
sandbox-hdp /usr/sbin/sshd -D
fi
```

**2. SSHで接続**
`ssh root@localhost -p 2222`

**3. 以降のコマンドはコンテナ上で直接実行**

```
/bin/sh -c 'echo "127.0.0.1 sandbox.hortonworks.com" >> /etc/hosts'

/bin/sh -c 'chown -R mysql:mysql /var/lib/mysql'

service mysqld start

service postgresql start

ambari-server start

ambari-agent start

/bin/sh -c 'rm -f /usr/hdp/current/oozie-server/libext/falcon-oozie-el-extension-*'

/bin/sh -c 'chown -R hdfs:hadoop /hadoop/hdfs'

/etc/init.d/shellinaboxd start

/bin/sh -c ' until curl --silent -u raj_ops:raj_ops -H "X-Requested-By:ambari" -i -X GET  http://localhost:8080/api/v1/clusters/Sandbox/hosts/sandbox-hdp.hortonworks.com/host_components/ZOOKEEPER_SERVER | grep state | grep -v desired | grep INSTALLED; do sleep 5; echo -n .; done;'

/bin/sh -c 'until curl --silent --user raj_ops:raj_ops -X PUT -H "X-Requested-By: ambari"  -d "{\"RequestInfo\":{\"context\":\"_PARSE_.START.HDFS\",\"operation_level\":{\"level\":\"SERVICE\",\"cluster_name\":\"Sandbox\",\"service_name\":\"HDFS\"}},\"Body\":{\"ServiceInfo\":{\"state\":\"STARTED\"}}}" http://localhost:8080/api/v1/clusters/Sandbox/services/HDFS | grep -i accept >/dev/null; do echo -n .; sleep 5; done;'

/bin/sh -c 'until curl --silent --user raj_ops:raj_ops -X PUT -H "X-Requested-By: ambari"  -d "{\"RequestInfo\":{\"context\":\"_PARSE_.START.ALL_SERVICES\",\"operation_level\":{\"level\":\"CLUSTER\",\"cluster_name\":\"Sandbox\"}},\"Body\":{\"ServiceInfo\":{\"state\":\"STARTED\"}}}" http://localhost:8080/api/v1/clusters/Sandbox/services | grep -i accept > /dev/null; do sleep 5; echo -n .; done; '

/bin/sh -c 'until /usr/bin/curl --silent --user raj_ops:raj_ops -H "X-Requested-By: ambari" "http://localhost:8080/api/v1/clusters/Sandbox/requests?to=end&page_size=10&fields=Requests" | tail -n 27 | grep COMPLETED | grep COMPLETED > /dev/null; do echo -n .; sleep 1; done;'

su - hue -c '/bin/bash /usr/lib/tutorials/tutorials_app/run/run.sh &>/dev/null'

su - hue -c '/bin/bash /usr/lib/hue/tools/start_scripts/update-tutorials.sh &>/dev/null'

touch /usr/hdp/current/oozie-server/oozie-server/work/Catalina/localhost/oozie/SESSIONS.ser
dchown oozie:hadoop /usr/hdp/current/oozie-server/oozie-server/work/Catalina/localhost/oozie/SESSIONS.ser

/etc/init.d/tutorials start

/etc/init.d/splash
```
カナは全角に,英数字は半角に(gawk)

gawk を用いたカナ半角->カナ全角, 全角英数->半角英数変換。

``` awk:kana_han2zen.gawk
#!/usr/bin/gawk -f
#gawk用
#半角カナ to 全角カナ and 全角英数 to 半角英数
#牛丼短観用
#
#ex. $ ./kana_hantozen.gawk test.txt
#参考:http://www.geocities.jp/cygnus_odile/tategaki/script-sjis/han2zen.awk.txt
#

BEGIN{
	split("０１２３４５６７８９", az, "");
	split("0123456789", ah, "");

	split("ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ", bz, "");
	split("ABCDEFGHIJKLMNOPQRSTUVWXYZ", bh, "");

	split("･ｦｧｨｩｪｫｬｭｮｯｰｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝ", kh, "");
	split("・ヲァィゥェォャュョッーアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワン", kz, "");


	split("ｳｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾊﾋﾌﾍﾎ", khb, ""); #濁点可能性文字
	split("ヴガギグゲゴザジズゼゾダヂヅデドバビブベボ", kzd, "");

	split("ﾊﾋﾌﾍﾎ", hhm, ""); #半濁点可能性文字
	split("パピプペポ", kze, "");
}
#main
{
		for(cnt in az)	gsub(az[cnt],ah[cnt]);	#全角英数to半角
		for(cnt in bz)	gsub(bz[cnt],bh[cnt]);	#全角英数to半角
		for(cnt in khb)	gsub(khb[cnt] "ﾞ",kzd[cnt]); #半角濁点文字to全角
		for(cnt in hhm)	gsub(hhm[cnt] "ﾟ",kze[cnt]); #半角パ行to全角
		for(cnt in kh)	gsub(kh[cnt],kz[cnt]);	#han2zen
		print; #出力
}
```

#用法例
``` shell-session
$ gawk -V
GNU Awk 4.1.4, API: 1.1 (GNU MPFR 3.1.5, GNU MP 6.1.2)
(略)

$ echo "
|すき家|茨城県|すき家 ｲｵﾝﾓｰﾙ下妻店|
|すき家|岡山県|すき家 ５３号岡山ＩＣ店|
|すき家|岡山県|すき家 ｲｵﾝﾓｰﾙ津山店|
|すき家|沖縄県|すき家 ｲｵﾝ那覇店|
|すき家|岩手県|すき家 ｲｵﾝﾓｰﾙ盛岡南店|
|すき家|宮城県|すき家 ｲｵﾝﾀｳﾝ佐沼店|
|すき家|宮城県|すき家 ﾌｫﾚｵせんだい宮の杜店|
|すき家|宮城県|すき家 仙台ｸﾘｽﾛｰﾄﾞ店|" >tmp
$ ./kana_han2zen.gawk tmp

|すき家|茨城県|すき家 イオンモール下妻店|
|すき家|岡山県|すき家 53号岡山IC店|
|すき家|岡山県|すき家 イオンモール津山店|
|すき家|沖縄県|すき家 イオン那覇店|
|すき家|岩手県|すき家 イオンモール盛岡南店|
|すき家|宮城県|すき家 イオンタウン佐沼店|
|すき家|宮城県|すき家 フォレオせんだい宮の杜店|
|すき家|宮城県|すき家 仙台クリスロード店|

```
参考: http://www.geocities.jp/cygnus_odile/tategaki/script-sjis/han2zen.awk.txt
JavaScriptで二次元配列の行列を転置するワンライナー

日本語で検索してもコレというのが出てこなかったのですが、海外の記事に秀逸なワンライナーがあったのでご紹介。

元記事は[コチラ](http://www.codesuck.com/2012/02/transpose-javascript-array-in-one-line.html)。function()を使いたくなかったので代わりにアロー関数を使用しています。

## コード

```javascript
const transpose = a => a[0].map((_, c) => a.map(r => r[c]));
```
受け取った配列を回転します。
## 使用例

```javascript:transpose.js
const transpose = a => a[0].map((_, c) => a.map(r => r[c]));

const array = [
    [ 1, 2, 3 ],
    [ 4, 5, 6 ],
    [ 7, 8, 9 ]
];

transpose(array);
// 　　　↓
//[
//    [ 1, 4, 7 ],
//    [ 2, 5, 8 ],
//    [ 3, 6, 9 ]
//]
```

以上です。
AWSでVPCのサブネットを構築

# 概要

AWSでVPCを作成した場合、EC2をVPC内に構築するためにはサブネットを構築しなければいけません。
サブネットを作った場合の初期状態について確認します。

# サブネットの構築
1. マネジメントコンソールでサブネットにアクセスする
2. サブネットの作成を実行する
以下の内容を入力して作成するを実行する。
<img width="704" alt="スクリーンショット 2018-01-14 0.18.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/81113/248715a3-b017-fedd-2f49-7324868faffd.png">
3. 以下の内容でサブネットが作成される

<img width="651" alt="スクリーンショット 2018-01-14 0.18.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/81113/3dbf7580-6aae-4d08-a8e1-41e04d1dbe93.png">

<img width="555" alt="スクリーンショット 2018-01-14 0.19.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/81113/60c8ceeb-e164-6028-01ca-e86384cf4976.png">

<img width="675" alt="スクリーンショット 2018-01-14 0.19.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/81113/0ee5b073-dc9a-49bb-bf17-64c1b8acfc89.png">

<img width="975" alt="スクリーンショット 2018-01-14 0.19.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/81113/7f9b6148-3acb-3a26-c1c5-b26443bc8012.png">

<img width="732" alt="スクリーンショット 2018-01-14 0.19.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/81113/70be72b3-474c-e0f7-e5c5-45b1b978274f.png">

# 関連記事

[AWSでVPCの作成](https://qiita.com/ykdevops/items/6c308bb66edb5d0d5180)
Arduinoで音声合成LSIでしゃべらせる

Arduinoで音声合成LSI(ATP3011F4-PU)を使用して
しゃべらせることに挑戦中の初心者です。
QIITAさんのARDUINOでLSI（ATP3011F1-PU)を利用して
しゃべらせる　サイトを見つけてやりましたが
実態配線図とスケッチがマッチしていないよう見受けられます。
ボタンスイッチが抜けていませんか？
それはそれとして　スケッチをコンパイルしてもエラー表示なります。
ご指導お願いいたします。
当方のLSIをARDUINOボードのLSIを差し替えて動作を確認済です。
それから、マイコンの実験：音声合成LSIの実験のｻｲﾄで
デモモードでﾌﾟﾘｾｯﾄﾒｯｾｰｼﾞの発声も確認済です。

簡単なスケッチで
例えば
void setup() {
Serial.begin(9600);
}
void loop() {
Serial.println("konbanwa");
delay(1000);
}
のスケッチでシリアルモニタでメッセージの表示は
パソコンの画面上で確認できました。

私が目標としているのは
当方の幼稚なロボットに
超音波センサーが付いているので
手を近づけるとサーボが動くと同時に
”こんばんは”などの発声をさせたいのです。
なお５㎝以下に近づくとサーボが動くスケッチは
出来上がっています。
よろしくご指導お願いいたします。
HIMUKA
AWSでVPCの作成

# 概要
AWSでVPCを作成した場合の初期状態の確認

# VPCの構築
## VPCの作成
1. マネジメントコンソールでVPCにアクセスする
2. VPCの作成を実行する
以下のよう入力して作成するをクリックする
<img width="553" alt="スクリーンショット 2018-01-13 23.18.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/81113/fb0d3338-b10a-56b0-a13d-badf1af6391b.png">

以下のようにVPCが作成される

<img width="1157" alt="スクリーンショット 2018-01-13 23.22.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/81113/2fdbe910-c73c-0728-5e7a-5882473e4fbd.png">

## VPC作成時のセキュリティグループ

VPCではネットワークACLとセキュリティグループで設定ができますが、ネットワークACLはステートレス、セキュリティグループはステートフルなのでセキュリティグループで設定をします。

先程VPCを作った際に、デフォルトのセキュリティグループも作られています。

<img width="750" alt="スクリーンショット 2018-01-13 23.32.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/81113/9c270f65-b80e-44ff-5bed-a5e647a723c8.png">

同一のセキュリティグループからのすべてのトラフィックが許可されるようになっているので、EC2を同じセキュリティグループで構築すれば、EC2間の通信が行えるということになります。

<img width="589" alt="スクリーンショット 2018-01-13 23.32.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/81113/17024493-5539-52fe-c168-48db55f73220.png">

すべてのIPに対してアウトバウンド通信（送信）が可能な設定となっています。

<img width="566" alt="スクリーンショット 2018-01-13 23.32.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/81113/dbbb9056-f8d0-6101-2415-f69455b80bc6.png">

タグは必要に応じて作成するので初期時は空です。

<img width="722" alt="スクリーンショット 2018-01-13 23.32.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/81113/f299f44c-e4c9-bebf-4e14-a9cd703ebb12.png">

## VPC作成時のネットワークACL

ネットワークACLは以下のように作られています。

<img width="777" alt="スクリーンショット 2018-01-13 23.45.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/81113/766a7cec-5ba9-bf99-631e-cdb495a049d8.png">

初期時はルール100と＊ですべてのトラフィックが許可と拒否されています。つまり初期時はすべてのトラフィックが許可されています。
ルール１００をカスタマイズしてHTTPS(443)　だけ許可に変更すると、許可のルールはHTTPS（４４３）のこりは＊の拒否のルールにマッチすることになります。

<img width="870" alt="スクリーンショット 2018-01-13 23.46.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/81113/02c1e939-a7a8-a10f-fb78-b799976e8c95.png">

アウトバウンドも同様です。ネットワークACLのアウトバウンドは特に注意が必要で、ステートレスであるためインバウンドに対する戻りパケットも考慮する必要があります。

<img width="875" alt="スクリーンショット 2018-01-13 23.46.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/81113/d0382edb-d9ec-a32b-eaa2-979abe22eb29.png">

初期時はサブネットはありません。

<img width="645" alt="スクリーンショット 2018-01-13 23.46.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/81113/136243d7-b58d-3b6e-80d8-8cd00e857058.png">

タグは必要に応じて作成するので初期時は空です。

<img width="719" alt="スクリーンショット 2018-01-13 23.46.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/81113/1bd097cb-678a-9fcb-1288-adf888322d5f.png">

# 参考
[シナリオ 1: 単一のパブリックサブネットを持つVPC](https://docs.aws.amazon.com/ja_jp/AmazonVPC/latest/UserGuide/VPC_Scenario1.html)

[VPC のセキュリティグループ](https://docs.aws.amazon.com/ja_jp/AmazonVPC/latest/UserGuide/VPC_SecurityGroups.html)
[自分用]python環境構築（pyenv+pyenv-virtualenv）/GAE

## __目的__
python＋pyenvでの環境構築はやったことあったけど、（python2系とpython3系の共存のため）
pyenv-virtualenvを入れるのが初＋変なところで詰まったので備忘録用

- GAE用の環境構築
- python2.7 

## __環境__
- ubuntu16.04

##__手順__
#### __pyenvを使ってAnacondaを入れる__

- anaconda2-5.0.1
- anaconda3-5.0.1
を入れる.

参考１）：[【随時更新】pyenv + Anaconda (Ubuntu 16.04 LTS) で機械学習のPython開発環境をオールインワンで整える](http://blog.algolab.jp/post/2016/08/21/pyenv-anaconda-ubuntu/)
git cloneするときにsudoつけてしまってその後、source ~/.bashrcしようとしたら
許可がありませんになって困った。
sudo source ~/.bashrc　はコマンドが見つかりませんでエラー。
そもそもはじめのgit cloneでsudoつけたのが原因。
すべてsudoなしで実行する。

#### pyenv-virtualenvを入れる
参考２）：[pyenv と pyenv-virtualenv で環境構築](https://qiita.com/Kodaira_/items/feadfef9add468e3a85b)


####__pyenv-virtualenvをつかってtest環境を作ってみる__
目的：test環境用にanaconda2のパッケージが使える仮想環境を作りたい

#####__失敗例__
```
$ pyenv virtualenv anaconda2-5.0.1 test
```
これだと、anacondaのパッケージが使えない、仮想環境ができてしまう

```
$ pyenv virtualenv --system-site-packages anaconda2-5.0.1 test
pyenv-virtualenv: ~/.pyenv/versions/anaconda2-5.0.1/envs/test already exists
continue with installation? (y/N) y
usage: conda [-h] [-V] command ...
conda: error: unrecognized arguments: --system-site-packages
Installing pip from https://bootstrap.pypa.io/get-pip.py...
pyenv: python: command not found

The `python' command exists in these Python versions:
  anaconda2-5.0.1
  anaconda3-5.0.1

error: failed to install pip via get-pip.py
```
どうやらpythonが呼び出せないらしい。
pythonを指定するコマンドを追加

```
$ pyenv virtualenv --system-site-packages --python ~/.pyenv/versions/anaconda2-5.0.1/bin/python2.7 anaconda2-5.0.1 test
continue with installation? (y/N) y
usage: conda [-h] [-V] command ...
conda: error: unrecognized arguments: --system-site-packages
Installing pip from https://bootstrap.pypa.io/get-pip.py...
pyenv: python: command not found

The `python' command exists in these Python versions:
  anaconda2-5.0.1
  anaconda3-5.0.1

error: failed to install pip via get-pip.py
```

うーん。だめみたい。

###__とりあえず__
何が違うのかわかっていないがconda createでも作れるみたいなのでやってみる。
参考３）：[Anacondaの使い方　その3（よく使うコマンド一覧）](http://creata.hatenablog.com/entry/2016/12/18/174533)

```
$ conda create --name test python=2.7 anaconda
Package plan for installation in environment ~/.pyenv/versions/anaconda2-5.0.1/envs/test:
(以下略
```
conda createだとなんかpathを通しているのではなく新たにインストールしてる？感
この環境は.pyenvの中にできるのね…anaconda2なのはconda　createした時にlocal環境がanaconda2-5.0.1だったから？

local環境に適用するときは、

```
$ pyenv local anaconda2-5.0.1/envs/test
```

ちなみにこれの後に同名で、以下のようにやってみた結果

```
$ pyenv virtualenv anaconda2-5.0.1 test
pyenv-virtualenv: ~/.pyenv/versions/anaconda2-5.0.1/envs/test already exists
continue with installation? (y/N) y

CondaValueError: prefix already exists: ~/.pyenv/versions/anaconda2-5.0.1/envs/test

Installing pip from https://bootstrap.pypa.io/get-pip.py...
Requirement already up-to-date: pip in ~/.pyenv/versions/anaconda2-5.0.1/envs/testGAE/lib/python2.7/site-packages

```
###__PATHの追加__
./.bashrc

```
$ export PATH="$HOME/.pyenv/shims:$PATH"
```

###__環境の切り替え__

```
$ pyenv local test
```

###__GAEのセットアップ__
参考４）：(Python 開発環境のセットアップ)[https://cloud.google.com/python/setup]

```
$  pip install --upgrade google-cloud-storage
```
HP Omen15にUbuntu 16.04をデュアルブートした後、WiFiを使えるようにする

ノートPCであるHP Omen 15-ce000のWi-FiデバイスをUbuntu16.04で使用できるようにする。

## あらまし
HP OMEN 15-ce000にUbuntu16.04をデュアルブートしたところ、Wi-Fiが利用できなかった。

HP OMEN 15-ce000はWi-FiデバイスとしてRealtecのRTL8822BEを使用している。
これはLinuxカーネルバージョン4.14からサポートされるらしい。
https://kledgeb.blogspot.jp/2017/09/linux-kernel-5-linux-414realtek.html

なのでカーネルバージョンが4.4であるUbuntu 16.04では個別にドライバをインストールする必要がある。
なお、この記事の時点(2018/01/13)では`sudo apt update sudo apt install git`で得られる16.04の最新カーネルは4.13のようだ。

## 作業
以下、作業を時系列に記す。

###1. ドライバのインストール（失敗）
まずこの方法は失敗した。

Realtec RTL8822BEのドライバーで検索をかけると[Ubuntuフォーラムでインストールの方法を紹介](https://ubuntuforums.org/showthread.php?t=2364383)していた。
[ここで紹介されているgithubページ](https://github.com/rtlwifi-linux/rtlwifi-next)にて最新のデバイスに対応したドライバーが公開されている。

しかし、先のフォーラムで示されたやり方ではmake途中でエラーが出てしまった。

エラーメッセージで検索をかけると[バグを解決した方](httpas://github.com/rtlwifi-linux/rtlwifi-next/pull/7)がいた。
今回はその方のものを以下の手順で使用した。

###2. ドライバのインストール（成功）
まずgitが入ってなければインストール。
`sudo apt update
sudo apt install git`

次にgitHubからクローンを取得。
`git clone https://github.com/synthtc/rtlwifi-next`

フォルダを移動し、make、install
`cd rtlwifi-next`
`make`
`sudo make install`

modprobeでカーネルモジュールをダウンロード
`sudo modprobe rtl8822be`

これでWi-Fiが使えるようになった。

```comand:
$ rfkill list
0: hci0: Bluetooth
	Soft blocked: yes
	Hard blocked: no
1: phy0: Wireless LAN
	Soft blocked: no
	Hard blocked: no
```
Neural Network Consoleで遊んでみる～その3～

#はじめに
この記事は『Deep Learning初心者，プログラミング初心者だけどDeep Learningしてみたいな～でもやり方わからないしな～』といった人向けであります．

[その1](https://qiita.com/szk1akhr/items/0dc360376a69a7bb2ea4)，[その2](https://qiita.com/szk1akhr/items/846943e32f3fa73439f7)の続きというわけではありません．

#動機
これまででせっかくNNCもある程度使えるようになったし，
自分の好きなAuto-Encoder*(AE)でやりたい...やりますか！
データセットの入れ替えとかもやってみたいし！
です．

*Autoencoderの表記は『Autoencoder』，『Auto-encoder』，『Auto encoder』，この3つの『encoder』の『e』が大文字バージョンと割りと豊富にあります．元が『[Auto-Associators](https://books.google.co.jp/books?hl=ja&lr=lang_ja|lang_en&id=3WkcZOWmljEC&oi=fnd&pg=PR7&dq=Auto+Associator&ots=HVjqQViQaE&sig=gaaV5JCuW1Bjt4ToPMJoEyqYCpY#v=onepage&q=Auto%20Associator&f=false)』であったことから『-』を入れたいところですね．
今回は今の気分で『Auto-Encoder』にします．

#この記事の目的
NNCでAE使って任意のデータセットで入力を再構成できるようになる．
～その3～：AEを動かしてみる
～その4～：データセットの作成，入れ替え

#扱うNeural Network
AEのみ！！

さっそくAEを動かしてみましょう！！

#AEを動かす

##そもそもAEとは？
入力隠れ出力の3層のニューラルネットワークです．

<img src = "https://qiita-image-store.s3.amazonaws.com/0/165289/4c013efd-35eb-3f55-a4c7-365859cc196b.png" width = 80%>

入力層と隠れ層の間では符号化操作(encode)が行われます．
隠れ層と出力層の間では復元操作(decode)が行われます．
入力と出力が同じになるようにネットワークを調整していきます．
最終的，出力層で入力層を再構成できるようになると，
隠れ層で入力の特徴表現するようになります，

##いざ実行
サンプルにある06_auto_encoderを開きます．
※使ったプロジェクト順に上に並ぶので，自分のは一番上にありますが，みなさんのは6番目にでもあるのではないでしょうか．

![project.png](https://qiita-image-store.s3.amazonaws.com/0/165289/cb165380-7577-7794-abe3-8078a4ef0a0c.png)


いつものごとくTrainingとEvaluationしましょう．
まずは，Trainingから(右の赤丸でTRAININGタブに切り替えて左の再生ボタンをポチりましょう)．

![trainning1.png](https://qiita-image-store.s3.amazonaws.com/0/165289/2e9913e5-2752-455b-c58b-bbbf2003a60f.png)


今日も気持ちよく精度が上がっていきますね．
素晴らしい．
さて，Evaluationしましょう(右の赤丸でEVALUATIONタブに切り替えて左の再生ボタンをポチりましょう)．

![evaluation1.png](https://qiita-image-store.s3.amazonaws.com/0/165289/f24ee24b-2571-17ad-19d0-121f606ab8c6.png)


なんでしょうこれ．
x'の所に画像が出てきています．
これまでのMulti-Layer Perceptron(MLP)やConvolutional Neural Network(CNN)とは全く異なる結果が出てきましたね．
これはびっくり．

...いえいえ，AEの構造上出力は入力の再構成になるので画像が出てくるのは当たり前ですよね．
　
さて，こんなに簡単にうまくいってしまったら逆に面白くないですね．
ではうまくいかなくなるためにはどうしたらよいでしょうか．
そうです．
その通り．
単純に学習のエポック数を減らしてしまえばいいのです．
『CONFIG』でエポックとついでにバッチサイズも変えてみましょう．
右上にある『CONFIG』タブで画面を切り替えましょう(黄色丸)．

![config1.png](https://qiita-image-store.s3.amazonaws.com/0/165289/8cc07100-10d7-19bf-1e63-d9b2253984b5.png)

水色の四角に注目．
上が『エポック』，下が『バッチサイズ』です．
エポックは『データセットを何回使いまわすか』，
バッチサイズは『どれくらい更新値を溜めてから適用するか』です．
詳しくはまたそのうちに◎

さて，エポックをぐっと減らして5エポックに設定(水色四角の上)．
ついでにバッチサイズも変えてしまいましょう．
とりあえず，500にしましょう(水色四角の下)．
そしてSaveしましょう(右上の赤丸)．

![config2.png](https://qiita-image-store.s3.amazonaws.com/0/165289/38c07231-046b-589d-9891-70a338073575.png)

いざ，Training！
(右の赤丸でTRAININGタブに切り替えて左の再生ボタンをポチりましょう)

![trainning2.png](https://qiita-image-store.s3.amazonaws.com/0/165289/4cdf7dae-27f3-55f8-6e1b-7a500ee34652.png)


ほほう．
0.02を下回っていたのが，0.06を上回った状態で止まっていますね．
先ほどと比べて学習がうまくいっていません．

続いて，Evaluationしましょう．
(右の赤丸でEVALUATIONタブに切り替えて左の再生ボタンをポチりましょう)

![evaluation2.png](https://qiita-image-store.s3.amazonaws.com/0/165289/4791209a-9922-5c98-dc37-aab08894323d.png)

...やりましたね！！
先ほどは入力っぽい出力が得られていましたが，
今回はちゃんど(？)学習できなかったので，
っぽい画像が出力されていますね．

この『エポック』と『バッチサイズ』はネットワークのチューニングに使える知識なので覚えておくと幸せになれると思います．また，この2つに加えて学習率やネットワークの構成など，人間の手で決めておくパラメータをハイパーパラメータといいます．

さて！
お次はデータセットを作成するところに挑戦してみましょう．
【.NET】参照ボタンなどにある三点リーダー(…)について

# はじめに
ファイル参照用に三点リーダー(…)のみのボタンを作成したところ、同僚から「これ何？」と聞かれたので、ファイル参照用のボタンでクリックするとファイル選択ダイアログが表示されると説明した。
![三点リーダーForm.png](https://qiita-image-store.s3.amazonaws.com/0/14053/e69802cc-1f93-ddc3-3cf0-9d29c0475dc8.png)

昔のよくアプリケーションでは、三点リーダー(…)のみのボタンを見掛けたんだけどと、Googleの画像検索で見てみると、「参照...」や「Browse...」となっていた。
![三点リーダーWeb.png](https://qiita-image-store.s3.amazonaws.com/0/14053/004a1bbb-eb12-70c7-c0d0-f6cd60d36c56.png)


もう少し調べると、統合開発環境(IDE)のプロパティ画面では、三点リーダー(…)のみが使われていた。

# 三点リーダーの意味
Visual Studioやメモ帳ではメニューなどに三点リーダーがありますね、Excel2013はリボン・・・にはないがセルの右クリックメニューで見掛けます。
![三点リーダー.png](https://qiita-image-store.s3.amazonaws.com/0/14053/3283d796-ec08-0c86-f6c1-b03bb2acdbc3.png)

>メニュー項目につく「…」は、正確には「Ellipsis Character（省略記号）」と呼ばれる。メニュー項目に「…」を付けるのは、項目選択後にダイアログウィンドウなどを表示してユーザーからアクショ ンの引数を得る場合である（例えば、「開く…」を選択すると、対象ファイルを選択するダイアログが開く）。単に確認ダイアログを表示して「OK」か「キャ ンセル」かを問う場合や、メッセージダイアログを表示するだけの場合は、「…」は不要。ただしこの差は曖昧に理解されていることが多い。
[ソシオメディアのUIデザインパターン](https://www.sociomedia.co.jp/1567)

三点リーダー(…)がある場合、別のウィンドウを開きますという用途に使われているようです。

* [ボタンの三点リーダー](http://deguin.blogspot.jp/2010/03/blog-post_26.html)
* [C#アプリの作り方入門〜「きほん」の「ほ」〜 その3 ボタンへのこだわり点3つ](http://moririring.hatenablog.com/entry/20120205/1328437775)

# 三点リーダーの罠
HTMLでのファイルアップロードの「input type="file"」では自動的に三点リーダー(…)が付きますが、Windowsフォームでは手動で追加する必要があります。
[Windowsフォームアプリケーション（.NET C#バージョン）](http://www.cactussoft.co.jp/Sarbo/divBeginPrgCS.html)

>三点リーダー(…)はフォントとしては真ん中に表示されます。しかし、本当に欲しいのは下に表示されるフォントです。
これを実現するのはドット(.)を3つ連続で打ちます。つまり三点リーダーとは名ばかりでドット3つで代用しています。
[C#アプリの作り方入門〜「きほん」の「ほ」〜 その3 ボタンへのこだわり点3つ](http://moririring.hatenablog.com/entry/20120205/1328437775)

自分はこれまで全角の三点リーダー(…)でPaddingプロパティで調整して下側に調整してたんだよな。ドット(.)3つだったのか。

# 最後に
三点リーダー(…)って言われてみないと気がつかないな部分かな、気になってネットで今回調べてみたけど、調べ方が悪いのか参照した数記事くらいしか見つからなかった。
TensorFlowのバージョンのチェック方法

以下のコマンドをterminalで入力するだけ。(mac, linux)

```bash:terminal
python -c 'import tensorflow as tf; print(tf.__version__)'   # for Python 2
python3 -c 'import tensorflow as tf; print(tf.__version__)'  # for Python 3
```

###参考
https://stackoverflow.com/questions/38549253/how-to-find-which-version-of-tensorflow-is-installed-in-my-system
googleスプレッドシートのアドレスにGASでメール送信

##はじめに、スプレッドシートを用意する。

今回は、スプレッドシートに記載されているメールアドレスに対しメールが送りたいので
以下のようなものを使う。

<img width="408" alt="1.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/215529/030d3578-99b2-05ec-b785-fb3852ab438e.png">



##スクリプトファイルを作成する

スプレッドシートのWebページ上で、上部のメニューの
[ツール] > [スクリプトエディタ] を選択する。

すると、GoogleAppScript が開く

<img width="357" alt="2.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/215529/5bd44eb6-e141-2973-ab84-52c7e060b319.png">



##メール送信プログラミング

とりあえず以下のソースをコピーして、GASに張り付ける。

```
function send_mail() {
  var sheet = SpreadsheetApp.getActive().getSheetByName('send_email');  //アクティブなスプレッドシートの「send_email」を参照
  var startRows = 2;  // 開始行数
  var sheetData = sheet.getSheetValues(startRows, 1, sheet.getLastRow(), sheet.getLastColumn());  // シートのデータを取得（2次元配列）
  var dtLimit = new Date();  // 現在時刻を取得

  // シートの各行ごとにデータを取り出す
  sheetData.forEach(function(value, index) {

    // 送信完了していない場合メールを送信する
    if (value[3] == '') {

      MailApp.sendEmail(value[2], 'メールタイトル', 'メール本文');  // メールを送信する
      sheet.getRange(startRows + index, 3 + 1).setValue(dtLimit);  // 送信完了日時をシートに書く
    }
  });
}
```

##プロジェクトを新規保存で名前を付ける

<img width="428" alt="4.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/215529/6ce95ce0-7e91-ba5d-5af8-13e25fff49af.png">



##実行してみる。

初めて実行する際はgoogleアカウントの認証が必要になる。

<img width="384" alt="5.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/215529/720ff065-a8c2-b222-5e78-46ffca00a36d.png">

![6.PNG](https://qiita-image-store.s3.amazonaws.com/0/215529/bb8599f1-fd59-897d-4e92-02089b656b1e.png)


実行するには「（安全ではない）」を選択する。

<img width="447" alt="7.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/215529/288e28b9-447f-e46d-3539-164dda454c56.png">


スクリプトによる
スプレッドシートへのアクセスと制御
メール送信機能を許可する
![8.PNG](https://qiita-image-store.s3.amazonaws.com/0/215529/a2df9191-5330-5d41-500f-c6e6910fe4e5.png)



##メールが送信される

これでメールが送信され、
対象のメールアドレスにはメールが届く。
コンストラクタにasyncを指定するとシンタックスエラーになる

# 状況
```javascript
class MyClass {
  async constructor() {
    this.aaa = 'AAA'
    this.bbb = await hogehoge();
  }
}

const ccc = async () => {
  const ddd = await new MyClass();
};
```

```console
Uncaught SyntaxError: Class constructor may not be an async method
```

# 対処法

```javascript
class MyClass {
  constructor() {
    this.aaa = 'AAA'
  }
  async init() {
    this.bbb = await hogehoge();
  }
}

const createMyClass = async () => {
  const obj = new MyClass();
  await obj.init();
  return obj;
};

const ccc = async () => {
  const ddd = await createMyClass();
};
```

非同期処理をコンストラクタから分離する。
VSCodeのタスクでjupyter notebookを起動する

## はじめに

普段VSCodeでコードを書いていますが、jupyter notebookも使いたいときがあります。
jupyter notebookの起動はコマンド```jupyter notebook```で一発ですが、いちいち黒い画面でコマンドをたたくのはめんどくさいです。
自分はMinicondaを使っているので、activateしてからコマンド叩くのはもっとめんどくさいです。

そこで、VSCodeのタスクから起動できるようにタスクランナーを定義して使っています。
tasks.jsonの書き方いつも忘れるので備忘録を兼ねて。

## 環境
OS - Windows10
VSCode - 1.19.1
Anaconda3/Miniconda3 - 4.3.30

## タスク定義

```json:tasks.json
{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "run-jupyter(環境名)",
            "type": "shell",
            "command": "cmd.exe",
            "args": [
                "/C",
                "'C:\\Users\\[user name]\\Miniconda3\\Scripts\\activate.bat 環境名 & jupyter notebook'"
            ],
            "group": "none",
            "options": {
                "cwd": "C:\path\to\notebook_dir"
            },
            "problemMatcher": []
        }
    ]
}
```

**label**
タスク名。condaの環境名を入れておくとわかりやすい。

**command**
実行するファイルはコマンドプロンプトとする。

**args**
（ここがキモ）
一つ目の値 ```"/C"``` でコマンドプロンプトで実行するコマンドを指定。
二つ目の値 ```"'C:\\Users\\[user name]\\Miniconda3\\Scripts\\activate.bat 環境名 & jupyter notebook'"``` で、指定したconda環境をactivateしてjupyter notebookを起動する。
コマンドプロンプトでは、シングルクォートで囲うことでスペースを含んだコマンドを渡せる。
& で区切り、前のコマンドが実行された後に後続のコマンドを実行する。
前半でactivate.batで対象の環境をactivateし、その状態でjupyter notebookコマンドを実行する動作となる。

**options の cwd**
タスクが実行されるワーキングディレクトリ。jupyter notebookのルートディレクトリにしたい場所を指定する。

## 実行

上記定義ができたら、ctrl+p -> task [タスク名] と入力すれば、jupyter notebookが開きます。
止めるときは、VSCodeのターミナル画面でCtrl-Cです。VSCode自体を終了しても止まります。

## 終わりに

- 自分は試していないのですが、jupyterをAnaconda環境で使う場合、環境をnotebook上のKernelから切り替えられるextensionもあるみたいです。  
https://qiita.com/yoppe/items/38005f415a5b8b884c7d
- command や args を置き換えれば同じコンセプトで他のOSでもできると思います。
今更ながらBEMについてと、それに対応するSassについてまとめてみる

今更ながらBEMについてのまとめです。
学習コストも低く、取り入れやすいので、勤めている会社でもこちらを使用しています。
以前は、BEMとMindBEMdingはわけて読んでいた気がしますが、今ではBEMといえばMindBEMdingという感じでしょうか？

## BEMについて

BEMでは基本的にclassを使用します。
そして、クラス名は、Block, Element, Modifierの3つに分けて考えます。
Blockは全体を指すもので、その要素がElement、BlockとElementそれぞれの別バージョン（色違いなど）がModifierと呼ばれます。

具体例を見てしまった方がわかりやすいと思います。

```html
<div class="media">
  <div class="media__image">
    <img src="" alt="" />
  </div>
  <div class="media__text">
    <p class="media__title">タイトル</p>
    <p class="media__lead">リード文</p>
  </div>
</div>
```

記事の一覧などで、画像とタイトルなどが表示されているものを想像していただければと思います。
まず、`media`というBlock名をつけます。
あとはこれを元に、クラス名をつけていきます。

Elementは`__`（アンダースコア２つ）でつなぎ、`Modifier`は`--`（ハイフン２つ）でつなぎます。
例えば、画像を表示する要素は、`media`というBlockのElement（要素）なので、`media__image `となります。

ただ、ここにはModifierがでてきていません。

仮に、「新着記事の場合、背景色を変えよう」などといった場合に、Modifierの出番です。
下記のようにします。

```html
<div class="media media--new">
  <div class="media__imageBox">
    <img src="" alt="" />
  </div>
  <div class="media__textBox">
    <p class="media__title">タイトル</p>
    <p class="media__lead">リード文</p>
  </div>
</div>
```

`<div class="media media--new">`以外は全く同じです。
ここでは、BlockのModifier（色違い）ですが、Elementの場合も同様に対応します。
`media__title`の別バーションがあれば、`media__title--○○`となります。
ただし、可能な限りCSSに依存した名前はつけない方がいいです。
`media--red`とかにして、後から色が青に変わったら意味わからないことになります。
（css設計ではよく言われていることですが、これってとても難しいんですよね…）

また、ここはいろいろ意見があるところですが、僕は`Block__Element__Element`というような多重階層（？）は避けるようにしています。
各Elementは全てBlockの要素で、重要なのはこの親子関係と考えているからです。

では次に、これをSass(scss)で書いていきます。

## Sass(scss)

まずセレクタを一通り書いてしまおうと思います。
こんな感じになります。

```scss
.media {

  $block: &;

  &--new {}

  &__imageBox {}

  &__textBox {}

  &__title {
    #{$block}--new & {}
  }

}
```

好みがあるかもしれませんが、`$block: &;`のように、そのときの状態を変数にいれてしまうのが好きです。
常にやる必要は全くないですが、下記のような時はやった方がいいと思います。

例えば、新着記事（`media--new`）のとき、背景以外にも`media__title`の見た目も変えて欲しいという要望があったとします。
下記のように`<p class="media__title media__title--new">タイトル</p>`とするのは、ちょっと嫌ですよね？

```html
<div class="media media--new">
  <div class="media__imageBox">
    <img src="" alt="" />
  </div>
  <div class="media__textBox">
    <p class="media__title media__title--new">タイトル</p>
    <p class="media__lead">リード文</p>
  </div>
</div>
```

では、これはやめてsass側で対応しようとします。
`media--new`の中に`media__title`を入れてしまうと、`media--new__title`になってしまうのでこれはダメです。

```scss
.media {

  &--new {
    &__title {}
  }

  &__title {}

}
```

では、`&`をやめて見ましょう。
こんな感じになります。

```scss
.media {

  &--new {
    .media__title {}
  }

  &__title {}

}
```

他にも、下記のように`&`を後ろにつけて、詳細度をあげる方法もあります。

```scss
.media {

  &--new {}

  &__title {
    .media--new & {}
  }

}
```

ただ、どちらも`.media`という部分が重複してしまいます。
変数に代入しても同じだろと思うかもしれませんが、これがいくつもでてくることになると違ってきます。
ということで、こういったときは変数にいれてあげるのがいいと思っています。

## まとめ

今更ではありますが、BEMについてまとめてみました。
個人的にお伝えしたかったのは、`Block__Element__Element`というような多重階層（？）は避けるようにしよう、scssは`&`を上手く使おうということでした。
railsのguardのlivereload設定

railsのGemfileに下記追加

chromeにhttps://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
をインストール

chromeのlivereloadの設定を「ファイルのURLへのアクセスを許可する」にチェックを入れる


Gemfile
gem 'guard'
gem 'guard-shell'
gem 'guard-livereload'

Guardfile


# directories %w(app lib config test spec features) \
#  .select{|d| Dir.exists?(d) ? d : UI.warning("Directory #{d} does not exist")}

## Note: if you are using the `directories` clause above and you are not
## watching the project directory ('.'), then you will want to move
## the Guardfile to a watched dir and symlink it back, e.g.
#
#  $ mkdir config
#  $ mv Guardfile config/
#  $ ln -s config/Guardfile .
#
# and, you'll have to watch "config/Guardfile" instead of "Guardfile"

guard 'livereload' do
  extensions = {
    css: :css,
    scss: :css,
    sass: :css,
    js: :js,
    coffee: :js,
    html: :html,
    png: :png,
    gif: :gif,
    jpg: :jpg,
    jpeg: :jpeg,
    # less: :less, # uncomment if you want LESS stylesheets done in browser
  }

  rails_view_exts = %w(erb haml slim)

  # file types LiveReload may optimize refresh for
  compiled_exts = extensions.values.uniq
  watch(%r{public/.+\.(#{compiled_exts * '|'})})

  extensions.each do |ext, type|
    watch(%r{
          (?:app|vendor)
          (?:/assets/\w+/(?<path>[^.]+) # path+base without extension
           (?<ext>\.#{ext})) # matching extension (must be first encountered)
          (?:\.\w+|$) # other extensions
          }x) do |m|
      path = m[1]
      "/assets/#{path}.#{type}"
    end
  end

  # file needing a full reload of the page anyway
  watch(%r{app/views/.+\.(#{rails_view_exts * '|'})$})
  watch(%r{app/helpers/.+\.rb})
  watch(%r{config/locales/.+\.yml})
end

guard 'livereload' do
  watch(%r{app/views/.+\.(erb|haml|slim)$})
  watch(%r{app/helpers/.+\.rb})
  watch(%r{app/controllers/.+\.rb})
  watch(%r{public/.+\.(css|js|html)})
  watch(%r{config/locales/.+\.yml})
  # Rails Assets Pipeline
  watch(%r{(app|vendor)(/assets/\w+/(.+\.(css|js|html))).*}) { |m| "/assets/#{m[3]}" }
end




Guardfile末尾に下記のように追記するとmodelファイルも追跡できる


  watch(%r{app/models/.+\.rb})


コマンドは下記の通り
$ bundle install
$ bundle exec guard init livereload
$ bundle exec guard

参考にした記事
https://qiita.com/TAKAyuki_atkwsk/items/737066dd15b9886f5dad
lemのカラーテーマをいっぱい作った

# はじめに
題名のとおりです．[lem](https://github.com/cxxxr/lem)はCommon Lisp製のエディタで開発も盛んでおすすめです．日本の方が開発しているのでとっつきやすいのですが，バンドルされているカラーテーマが２つしかなく(emacs-lightとemacs-dark)，個人的には一番惜しいところと思います．何度かエディタを乗り換えていますがお気に入りのカラーテーマがあるかどうかは判断材料の結構大きな比重を占めるように思うからです．

そこでlemの普及にちょっとでも貢献しようとlem用のカラーテーマをいっぱい作って[とりあえず公開](https://github.com/koji-kojiro/lem-pygments-colorthemes)しましたのでその紹介です．

# どうやって作ったか
作ったといっても一からガリガリ書いたわけではなく，Python製のシンタックスハイライタである[Pygments](pygments.org)に付属しているStyleをlemのカラーテーマに変換する[Pythonスクリプト](https://github.com/koji-kojiro/lem-pygments-colorthemes/blob/master/build.py)を書いただけです．ひとまずシンタックス関連のアトリビュートしか設定していませんが割りとそれらしく仕上がっていると思います．

現状で生成されるのは以下のようなテーマです．

```common-lisp:monokai.lisp
(in-package :lem-user)

(define-color-theme "monokai" ()
  (foreground "#eeeeee")
  (background "#262626")
  (cursor :foreground "#262626" :background "#eeeeee")
  (syntax-warning-attribute :foreground "#87005f" :background "#262626")
  (syntax-string-attribute :foreground "#d7d787" :background "#262626")
  (syntax-comment-attribute :foreground "#666666" :background "#262626")
  (syntax-keyword-attribute :foreground "#5fd7ff" :background "#262626")
  (syntax-constant-attribute :foreground "#5fd7ff" :background "#262626")
  (syntax-function-name-attribute :foreground "#afd700" :background "#262626")
  (syntax-variable-attribute :foreground nil :background "#262626")
  (syntax-type-attribute :foreground nil :background "#262626")
  (syntax-builtin-attribute :foreground nil :background "#262626"))
```

![monokai](https://github.com/koji-kojiro/lem-pygments-colorthemes/raw/master/sample/monokai.png)


# インストールと設定
roswellから一発です．

```shell-session
$ ros install koji-kojiro/lem-pygments-colorthemes
```

で、以下のような感じで`.lemrc`を編集すればお終いです．

```common-lisp:.lemrc
(load-library "pygments-colorthemes")
(load-theme "monokai")
```

とりあえず試したい場合はlemを起ち上げて`M-x load-library RET pygments-colorthemes`してから`M-x load-theme RET`でtabを押せばいっぱい候補が出てくるのでお好きなものを選んでみてください．

# 余談
ライブラリの名前を`lem-hoge`みたいにしとけば`load-library`で`hoge`をロードできるようです．自分でlemの拡張を書いた場合はこれに倣えばroswellで簡単に頒布できます．

# 更に余談
[レポジトリ](https://github.com/koji-kojiro/lem-pygments-colorthemes)を見てもらえばわかると思いますが，`themes/`以下に大量のソースが配置されています．何も考えずに生成してから.asdファイルを書く段になってどうしようかと頭を抱えたですが(`:component ((:file "monokai"))`みたいのを列挙しなければいけない)[asd-generator](https://github.com/phoe/asd-generator)なるツールを発見し事なきを得ました．適当に`:components`を空にしたシステム定義を書いて以下のような`asd-generator-data.asd`を書いて`update-asdf`で一発生成できました．感謝．

```common-lisp:asd-generator-data.asd
((:dir "themes"))
```

# おわりに
最後までお読み頂きありがとうございます．随時ブラッシュアップしていきたいと思いますので気長にお待ち下さい．
いつか必要になるかも：エクセルでAWSのJsonを扱う際に便利な関数

# はじめに
## お久しぶりです。
神谷です。いつも業務で仕方なく開発した、要るのか要らないのかよく判らないテクニックを公開しています。
今回もそんな感じの、どうでもいいテクニックです。
## AWS CLIの結果のJsonをエクセルで処理してみる
「データの区切り文字」でチャチャッと出来るんですが、それが許されないような場合に。

A列に下の式を入れて、B列にAWS CLIのJsonの結果をそのまま貼り付けるような使い方を想定しています。
つまり
```     "key1": "value1"
     "key2": "value2"```
こんなのがB1,B2にあったら、A1にはvalue1、A2にはvalue2と出力されるような関数です。
誰もが一度はトライしてみて、恐らく途中で挫折してる、例の式です。

```
=RIGHT(LEFT(B1,FIND("""",B1,FIND("""",B1,FIND("""",B1,FIND("""",B1)+1)+1)+1)-1),LEN(LEFT(B1,FIND("""",B1,FIND("""",B1,FIND("""",B1,FIND("""",B1)+1)+1)+1)-1))-FIND("""",LEFT(B1,FIND("""",B1,FIND("""",B1,FIND("""",B1,FIND("""",B1)+1)+1)+1)-1),FIND("""",LEFT(B1,FIND("""",B1,FIND("""",B1,FIND("""",B1,FIND("""",B1)+1)+1)+1)-1),FIND("""",LEFT(B1,FIND("""",B1,FIND("""",B1,FIND("""",B1,FIND("""",B1)+1)+1)+1)-1))+1)+1))
```
どうですか。エクセルが沸騰しちゃいそうな関数でしょう。
で、これは
```     "key": true,
     "key2": false```
みたいに、valueがダブルコーテーションで括られていない列には対応してないです。
そういう行にはこんな式を。
```
=IF(LEFT(RIGHT(B1,2),1)=",",LEFT(RIGHT(B1,LEN(B1)-FIND("""",B1,FIND("""",B1)+1)-2),LEN(RIGHT(B1,LEN(B1)-FIND("""",B1,FIND("""",B1)+1)-2))-2),LEFT(RIGHT(B1,LEN(B1)-FIND("""",B1,FIND("""",B1)+1)-2),LEN(RIGHT(B1,LEN(B1)-FIND("""",B1,FIND("""",B1)+1)-2))))
```
上の２つの式をどうにかこうにか組み合わせれば、"value"だろうがvalueだろうが、対応出来る感じが、何となくするでしょう。
けれど、ダメです。
こんなん、メモリ食い過ぎてすぐエクセルが死にます。

## なぜこんな事をしたのか
他の人に試験を任せたら、人力で一生懸命に値を比較してたので、おいおいそういうの自動化しろよと思って、あまり考えずにちゃちゃっと作ってみたのですが……
作ってると面白くなって止まらなくなったというか……
まぁそれ以前の根本的な問題ですよね。
「データの区切り文字」でやれと。
はい。
WeMo Insightで現在の消費電力を取得する

# WeMo Insight
* こういうもの↓で, アプリ経由でACオンオフできたり, 消費電力確認できる
  * [Wemo® Insight Smart Plug(Official)](http://www.belkin.com/us/p/P-F7C029/)
  * [WeMo app (Android)](https://play.google.com/store/apps/details?id=com.belkin.wemoandroid&hl=ja), iOSアプリもあり

# API
* この機器をCLIやPython API経由で操作できたりする
    * https://github.com/iancmcc/ouimeaux
        * ドキュメント: http://ouimeaux.readthedocs.io/en/latest/
            * [インストール](http://ouimeaux.readthedocs.io/en/latest/installation.html)
            * [CLI](http://ouimeaux.readthedocs.io/en/latest/wemo.html)
            * [Python API](http://ouimeaux.readthedocs.io/en/latest/api.html)

# WeMo Insightの現在の消費電力を知る手順
* だいたい上記のPython APIに書いてあることです

```
pi@raspberrypi:~ $ python
Python 2.7.13 (default, Nov 24 2017, 17:33:09) 
[GCC 6.3.0 20170516] on linux2
Type "help", "copyright", "credits" or "license" for more information.
>>> from ouimeaux.environment import Environment
>>> def on_switch(switch):
...   print "Switch found!", switch.name
... 
>>> def on_motion(motion):
...   print "Motion found!", motion.name
... 
>>> env = Environment(on_switch, on_motion)
>>> env.start()
>>> env.discover(seconds=3)
Switch found! WeMo
>>> env.list_switches()
['WeMo']
>>> switch = env.get_switch('WeMo')
>>> switch
<WeMo Insight "WeMo">
>>> print switch.get_state()
0
>>> switch.on()
>>> print switch.get_state()
1
>>> print switch.insight_params
{'onfor': 51, 'state': '8', 'ontotal': 16144, 'totalmw': 40961936, 'ontoday': 16499, 'todaymw': 40961936, 'lastchange': datetime.datetime(2018, 1, 13, 13, 4, 24), 'currentpower': 0}
>>> print switch.insight_params['currentpower']
0 (WeMoに何も差してない状態)
>>> print switch.insight_params['currentpower']
15915 (WeMoにノートPCのACアダプタを差している)
```
Rubyで画像収集を行う【3】検索結果の取得

#目次
1：検索条件の入力　
2：検索結果の取得　
3：画像の取得と保存　←いまここ
つづく

#前回のおさらい
【2】検索結果の取得　では、画像の元URLを配列で取得した。
今回はそれらをもとに、実際に画像を保存する


#早速始めよう
```.ruby
def save_image(url)
  #その日の名前でディレクトリを作成
  dn = DateTime.now
  dt = dn.year.to_s + dn.mon.to_s + dn.day.to_s + "\\"
  #僕はカレントディレクトリにあるimgフォルダのの中に格納している
  dirName = "\img\\" + dt
  #同名のものが既にない場合のみディレクトリを作成
  FileUtils.mkdir_p(dirName) unless FileTest.exist?(dirName)


  #前回取得したurlにあるファイル名を取得
  fileName = File.basename(url)
  filePath = dirName + fileName

  #?などを含む名前はファイルにつけられないので変更
  if fileName.include?('?')
  	dn = DateTime.now
  	fileName='img' + dn.hour.to_s + 'h' + dn.min.to_s + 'm' + dn.sec.to_s + 's' + '.jpg'
  end

  #同名のファイルがある場合は変更
  if File.exist?(filePath)
  	dn = DateTime.now
  	fileName='img' + dn.hour.to_s + 'h' + dn.min.to_s + 'm' + dn.sec.to_s + 's' + '.jpg'
  end

  #改めて最終的なファイルパスを設定
  filePath = dirName + fileName

  #ファイルパスを出力  
  p filePath

  # 指定したパス(自分のディレクトリ)を開いて
  open(filePath, 'wb') do |output|
    #urlを開いて書き込み(保存)
    open(url) do |data|
      output.write(data.read)
    end
  end
end
```

#コメント
save_image関数で画像を保存する部分を書きました。
が、見てわかるように保存する部分は最後のとこだけで、
それ意外の前半部分はディレクトリの確認や
ファイル名に問題がないようにしています

一応補足ですが、この関数は各画像URLに対して1回呼ばれるので、
このプログラム内での変数urlは配列ではなく1つです。
artisanコマンドからartisanコマンドを呼び出す方法の比較

調査した限りだと以下の３つの方法があるみたいです。

- `exec()`を利用する
- `$this->call()`を利用する
- `Artisan::call()`を利用する

それぞれの実装方法と実行結果を比較してみました。
実行速度に関しては厳密に計測したわけではなく、体感的なものになります。

# 実行環境

mac
PHP 7.1.13
Laravel Framework 5.5.28

# 実装方法

## exec() を利用する場合

exec関数はphpの関数で外部コマンドを実行する関数です。
http://php.net/manual/ja/function.exec.php
なので、別のartisan実行の度にphpの別プロセスを動かすことになります。
非常に実行が重いです。
第２引数と第３引数に変数を入れると（参照渡ししています）変数に実行結果が代入されます。
詳しくはphpの公式ドキュメントをご確認ください。

```php
exec('php artisan command:called --path=exec');
```

## `$this->call()`を利用する場合

こちらはLaravelのCommandクラスにで定義されているcallメソッドを利用します。
利用するには単純にメソッドを呼び出すだけです。

```php
$this->call('command:called', ['--path' => 'call']);
```

また、この方法で実行すれば新たに呼び出したコマンドに関してもinfoやerror等のlaravelのコマンド用の出力されます。

## `Artisan::call()`を利用する場合

laravelの公式ドキュメントに記載してある方法です。
こちら方法を使えばコマンドだけでなくどこからでもartisanを呼び出せます。

```php
use \Artisan;
 
// 実行
Artisan::call('command:called', ['--path' => 'artisan']);
```

戻り値は成功が0、失敗が-1になります。
実行速度はcallの場合とそれほど変わりませんでした。
この方法で実行した場合新たに呼び出したコマンドに関しての出力は表示できません。
おそらくですが、コマンドとして実行されない場合（webからのリクエストから実行するetc）を考慮している関係で出力されないのかもしれません。


# 結論

個人的には`$this->call()`が速度、利便性から一番いいと思います。

以下が比較した表です。

| 種別 | 実装コスト | 実行速度（体感） | 呼び出しコマンドの出力 |
| --- | --- | --- | --- |
| `exec()`を利用する | 低い | 遅い | ある |
| `$this->call()`を利用する | 低い | 早い | ある |
| `Artisan::call()`を利用する | 低い | 早い | ない |

比較した時に使ったコードをgistに上げておきます。
https://gist.github.com/orange634nty/85921162d45fa51862befa4916553b99

ただしwebから実行するにはArtisanを使う必要があります。