OmniAICreator/Qiita-1.07M huggingface dataset:
AndroidStudio3.1.2でAAPT2エラーが出た時の対処法

## 恐怖のエラーAAPT2
ふとした瞬間に起こるAAPT2エラーに、幾度となく悩まされてきました。
どうにか終止符を打ちたいので残しておきます。

#### エラーログ

````
Warning:The [パッケージ名] property is deprecated and it has no effect on the build process.
/home/********/.gradle/caches/transforms-1/files-1.1/appcompat-v7-27.0.2.aar/*************************/res/values/values.xml 
Error:(246, 5) error: resource android:attr/fontVariationSettings not found. 
/project/bkup/14_march_2018/***/***/build/intermediates/incremental/mergeDebugAndroidTestResources/merged.dir/values/values.xml
Error:(246, 5) error: resource android:attr/ttcIndex not found.
Error:(269) resource android:attr/ttcIndex not found.
Error:(269) resource android:attr/fontVariationSettings not found. Error:java.util.concurrent.ExecutionException: java.util.concurrent.ExecutionException: com.android.tools.aapt2.Aapt2Exception:
AAPT2 error: check logs for details Error:failed linking references.
Error:java.util.concurrent.ExecutionException: com.android.tools.aapt2.Aapt2Exception:
AAPT2 error: check logs for details Error:com.android.tools.aapt2.Aapt2Exception:
AAPT2 error: check logs for details Error:Execution failed for task ':*****:processDebugAndroidTestResources'.
````

## 解決策①：enableAapt2

````gradle.properties 

android.enableAapt2=false

````
自分は解決しませんでした。

## 解決策②：force 'com.android.support:support-v4:27.0.2'

````build.gradle

configurations.all {
    resolutionStrategy {
        force 'com.android.support:support-v4:27.0.2'
    }
}

````
自分は解決しませんでした。

## 解決策③：build tools

````build.gradle

classpath 'com.android.tools.build:gradle:3.2.0-alpha13'

````
自分はこれで解決できました。

## 考察

AAPT2エラー自体、.xmlファイルの記述ミスで発生するみたいなんですけど、今まではAAPT2エラーが出るばかりで何処がミスしてるのか書いてないんですよね。
それが最新のbuild toolsでミス箇所まで出るようになったみたいです。

参考：
android studio 3.0.1 で AAPT2 error が出た時の対応
https://qiita.com/kako351/items/7775157358aaf00da6f9

LobiのAndroidアプリ開発を Android Studio 3.0 に移行しました！
https://techblog.kayac.com/ready-for-andorid-studio-3

AAPT2 working abnormally in android studio 3.1 both for True and False flag
https://stackoverflow.com/questions/49534951/aapt2-working-abnormally-in-android-studio-3-1-both-for-true-and-false-flag
AWSでOpenCV にてCUDAを使えるようにした

# 必要そうな依存関係インストール （EmscriptenでOpenCV使ったことあれば入ってるはず）
https://docs.opencv.org/3.0-beta/doc/tutorials/introduction/linux_install/linux_install.html

# compiler

```
$ sudo apt-get install build-essential
```

# 必須

```
$ sudo apt-get install cmake git libgtk2.0-dev pkg-config libavcodec-dev libavformat-dev libswscale-dev
```

# オプション

```
$ sudo apt-get install python-dev python-numpy libtbb2 libtbb-dev libjpeg-dev libpng-dev libtiff-dev libjasper-dev libdc1394-22-dev
```
# ソースダウンロード（拡張も好みで入れる）

```
$ wget https://github.com/opencv/opencv/archive/3.4.1.tar.gz
$ wget -O cont_3.4.1.tar.gz https://github.com/opencv/opencv_contrib/archive/3.4.1.tar.gz
```

# 解凍

```
$ tar -zxvf 3.4.1.tar.gz
$ tar -zxvf cont_3.4.1.tar.gz
```

# 移動
```
$ cd opencv-3.4.1
```

# ビルド用ディレクトリの作成
```
$ mkdir build 
```

# 移動
```
$ cd build
```

# インストールしたい仮想環境に入っとく
```
source activate 環境
```

# CUDA連携用設定 もちろんGPU対応数学ライブラリもONにしとく

```
$ cmake -D CMAKE_BUILD_TYPE=RELEASE \
-D CMAKE_INSTALL_PREFIX=$(python -c "import sys; print(sys.prefix)") \
-D PYTHON3_EXECUTABLE=$(which python) \
-D PYTHON3_INCLUDE_DIR=$(python -c "from distutils.sysconfig import get_python_inc; print(get_python_inc())") \
-D INSTALL_C_EXAMPLES=OFF \
-D INSTALL_PYTHON_EXAMPLES=ON \
-D WITH_CUDA=ON \
-D ENABLE_FAST_MATH=ON \
-D CUDA_FAST_MATH=ON \
-D WITH_CUBLAS=1 \
-D OPENCV_EXTRA_MODULES_PATH="../../opencv_contrib-3.4.1/modules" \
-D PYTHON3_PACKAGES_PATH=$(python -c "from distutils.sysconfig import get_python_lib; print(get_python_lib())") ..
```

仮想環境用の設定忘れてビルドしなおしたやつが居るとか（私です）


# make

```
$ make -j $(nproc)
```

# インストール

```
$ sudo make install
```

これでOK。
一応確認

```
$ python
```


```python
import cv2
print(cv2.getBuildInformation())
```

こんな感じで出ればOK
![image.png](https://qiita-image-store.s3.amazonaws.com/0/257883/0f26d4ae-b59f-fe56-a52f-094ce8ccf182.png)

余談
結構ディスク食うので、EBSは大きめの方がいい

参考
http://dlrecord.hatenablog.com/entry/2017/12/15/145356
https://www.pyimagesearch.com/2016/07/11/compiling-opencv-with-cuda-support/
https://dev.widemeadows.de/2017/08/23/building-opencv-for-anaconda-python-3/
Visual Studio で ビルドしても更新されない

IE11の場合

１．リフレッシュする Ctrl +F5
２．このパスにあるファイルを全部消す
![image.png](https://qiita-image-store.s3.amazonaws.com/0/118025/3aef1e8d-0cd6-89db-27ce-e55831704db2.png)


3.保護モードになっているとキャッシュ（２．のフォルダの中身）がリフレッシュされないので
保護モードを外しておく
![image.png](https://qiita-image-store.s3.amazonaws.com/0/118025/5e0fe3f8-49d0-fec6-2041-7254ed0a3698.png)
Netflix Queer Eye 第4話	"Big Little Lies" アリアン君で見つめなおす責任と嘘

自分のマインドセットの参考に、また同じようなマインドの人に参考になれば。

## Queer Eye　第4話　"Big Little Lies" アリアン君

大学の単位を落とし就職先が決まっていたにもかかわらず留年になってしまったアリアン君、
アルバイトも長続きせず1週間でさぼってバックレるというクズオブクズであった、
近しい友人たちはいい加減クズオブクズマインドからくる言い訳と行動が伴わない発言に嫌気が差し、フェブ５へとアリアン君の改善を依頼する。

アリアン君の行動の中で現れる、「責任逃れ」「先延ばし」「行動しない」この3つが自分と全く同じだった、以前から自覚していたこの3つの行動を反面教師のようなアリアン君を見せられることで顔面を蹴り飛ばされる気持だった。  

## 責任逃れ
  
「単位を落としたのは誰のせい？」  
「僕のせいだけじゃない」  
  
内心自分のせいだとわかっているがそれによっておこる「責任」から逃れるために責任を教授と分散させようとしている、そのためにウソをつく羽目になりそのウソを取り繕うためにまたウソを重ねる最後には結局事実だけが残る、さらにこの時留年の事実を親に伝えていなかった。

## 先延ばし
親に伝えることへの恐怖によって中々留年の事実を伝えられず、その現実と向き合うことに恐怖しゲームに没頭して忘れようとしていた、しかし先延ばしはまったくの無意味で結局はその時はやってくるし、恐怖におびえていた日々は何の意味も持たない。

## 行動しない
自分は変わらなきゃとミクロほどしか思っていないので行動をしようとしない、支離滅裂の言い訳だけはすぐ出てきてそれで自分を守ろうとするがそんな紙の盾では現実に突き刺されて終わりである。現実は「留年してる」「アルバイト1週間バックレ」「言い訳とウソの塊」（「シェアハウスなのに掃除をしない」）でしかなく、彼のクズさを浮き彫りにするのである。

## 原因
彼はいつか誰かが何とかしてくれると思っているかつ責任は自分だけにはないと思いたいのである。それは友人であり、親であり、未来の自分であり、様々な「今の自分」以外の人間に責任を押し付けている。  
「単位は担当の教授が厳しいせい」  
「掃除をしなくてもルームメイトがしてくれる」  
「留年しても親は授業料も部屋代も払ってくれる」  
「いま努力しなくても未来の自分がスーパー努力して大金持ちになれる」  
こんな感じで、とにかく今は自分が楽しいことしかしたくないので、すべてをアウトソーシングするのである、時空をも超えて。

## 自覚
メンバーのカラモは彼に彼自身のウソと真実が入り混じった事柄を質問し、イエス・ノーで彼に答えさせた、その後カラモは「ウソか本当か曖昧な答えはあった？」、アリアン君は「うーんウソか本当かで答えられない問題もあった」、「そんなことはない、すべて嘘か本当かに分かれる」というカラモ。カラモはまず彼が彼自身についている嘘を見つめさせ自らの責任を自覚させたのである、自分へのウソを見つめ責任を自覚させた後カラモは「肩の力を抜いて、留年なんて大したことない！」と彼にも言うように促す、問題を怖がっていても前には進めないし、進まない限り未来はないことを彼に伝えるのである。

## まとめ
自分の抱えてる問題の解決法は「自分に嘘をつかない」ということだった、自分に嘘をついていると問題自体が見えなくなってしまう、まずは自らを見つめ自分の責任を自覚し客観的に自分と問題を考えることが第一歩だ。

### Queer Eyeについて
Fab Fiveが問題を抱えている人々の元へ現れ、それぞれの得意分野を用いて問題解決していくNetflixオリジナル番組である。この5人は内面的な問題の解決に重点を置いていてその人自身や時にはその人を取り巻く人々も含めて問題解決を行いその人に寄り添った道しるべを示していってくれる。
Chromeでローカルファイルを開いた時にVimiumを使用する方法

# はじめに
本解決方法ではローカルファイル(file://)をVimiumで操作できるようにする．
Vimiumにローカルファイルを扱う許可を設定していなかったことが原因．

個人的な理由：
VimからMarkdownファイルを編集している時に，PrevimでChromeを使用してプレビューしている．
しかしPrevimから開いたローカルファイル（Markdown)上でVimiumが使用できないのでとても不便であった．

<img width="1440" alt="スクリーンショット 2018-06-18 19.24.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/23372/409d2bd5-fc73-c3d8-f272-5a5354563fed.png">




# 解決方法
Chromeの設定でVimiumがローカルファイルを扱えるようにする．

設定 > 拡張機能 > Vimiumの詳細 > ファイルのURLへのアクセスを許可する 
をオンにする．

<img width="1440" alt="スクリーンショット 2018-06-18 19.30.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/23372/d9310e93-7ceb-be47-a9e1-29884c939d8a.png">


# おわりに
Vimium最高！
Markdownのプレビューを操作する時にマウスやスペースキーでスクロールしていたので，効率が大幅に改善．
pdf上でも動作すると良いが，Javascriptの関係で起動しないのが残念．
360度画像×スマスピ×webで誰でもIoTホームを体験できる

# はじめに

先日googleさんにて行われたVUILTにて、(@TakeruY1206 )さんが「VUI時代のホームページを作ってみた」で登壇してました。

Alexaに「電気消して」っていうと、***webサイト上の***部屋の画像の電気が消えるやつ。
その時は、デモ動画で本当は連携してなく、画像の電気が消えるタイミングで話しかけてたみたい笑
いやそれでも、個人的にこのアイデアがすごく面白くて、未来を感じたので実際に作ることにしました。
でも、同じの作ってちゃあ面白くないから３６０度画像を取り入れることに。

# ちょっと紹介させて。

実際のwebサイト
https://s3-ap-northeast-1.amazonaws.com/demo-home/index.html

そんで、実際に動画をみてもらったほうがイメージつきやすいので、みてみてください。

https://twitter.com/imasirooo/status/1006477734426472448

# 仕組み

簡単な仕組み図。
言葉の表現が微妙だが、だいたいこんな感じ。

<img width="724" alt="スクリーンショット 2018-06-07 17.15.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/195882/f129ef1f-1419-5f93-0d79-e18def10ef73.png">

firebase realtime databaseの、値が変更されたらwebサイト側でイベントを取得できる機能を利用。
参考　https://qiita.com/seiya1121/items/4cbc32678558315c2159

つまり、Alexaのスキルで「電気消して」とかっていうとfirebaseのデータの値を変更する。
そのとき、web側で「値がかわったよーー」ってのがわかる。（一応値もわかる）。
「値が変わったよーー」ってなった瞬間web側は電気を消す画像にしている。
(本当は電気が消えてる画像ではなくて、cssで画像を暗くしている)

下の画像はfirebaseの画像。
`isOn`がtrueの時は電気はオン。falseだったら電気オフにする。

<img width="200" alt="スクリーンショット 2018-06-08 10.15.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/195882/2c36d8ca-486a-1446-f669-af3550c722f4.png">


# コードとかを少し

## Alexa側

firebase realtime databaseはPUTなどでも値を操作できる。
以下のcurlコマンドと同じ操作をAlexa(nodeのrequest-rpomiseモジュールなど)で行う。

```
curl -X PUT -d '{
  "light": {"isOn": "true"}
}' 'https://docs-examples.firebaseio.com/rest/saving-data/fireblog/users.json'
```

参考
https://firebase.google.com/docs/database/rest/save-data?hl=ja

## web側

本当は、firebaseの設定とかを書かないと行けないんだけど端折ります。
詳しくは　https://qiita.com/hiroyuki7/items/2f74105d9d0298ac317a とかを見て。

```
// databaseの値をリッスン
firebase.database().ref('light').on("value", snapshot => {
  if(snapshot.val().isOn === true){
    // cssで画像を明るくする処理
  }else{
    // cssで画像を暗くする処理
  }
})
```

databaseの値がAlexaなどで変更された時、`firebase.database().ref('light').on("value", snapshot => {})`が呼ばれる。
値は`snapshot`に張っているから、trueかfalseかを判断して画像を明るくするか暗くしている。


# 360度カメラ

このままでは、人のアイデアをもらっただけなのでもう少し工夫をしたい。
ってことで、360度カメラを使ってガチで部屋っぽさを出そうかなと。
360度画像を簡単に表示するライブラリがあった。

https://developers.google.com/vr/develop/web/vrview-web

さすがGoogle様って感じ。

# 最後に

IoT電化製品とか自社のサイトに取り入れて見るのもありかと
UIViewにはconvenience initializerが存在する - UIView has a convenience initializer.

# 疑問
`UIView`を拡張して、

```swift
class CustomView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }

    func commonInit() {
    }
}
```
こういうViewを作って、`CustomView()`と引数なしの初期化を行うと、`override init(frame: CGRect)`で定義したイニシャライザが呼ばれ、`commonInit()`も期待通りに呼ばれるのはなぜだろうと、ふと疑問に思った。


# 検証
`UIView`がconvenience initializerを持っていると考えると説明がつく。

```swift

class UIViewLike {
    init(frame: CGRect) {
        print("UIViewLike initialized")
    }

    convenience init() {
        self.init(frame: .zero)
    }
}

class CustomViewLike: UIViewLike {
    override init(frame: CGRect) {
        super.init(frame: frame)
        print("CustomViewLike initialized")
    }
}
```

これらを定義して、

```swift
let hoge = CustomViewLike()
```
と引数なしのイニシャライザを呼んでやると、

```
UIViewLike initialized
CustomViewLike initialized
```
とログに表示される。
webpackでbuildされるファイルがデカすぎてつらい時(分割されすぎてつらい時も後述)

この blog は下記へ移行しました。しかるべき期間が過ぎたらこちらの記事は削除しようと思います。
https://lidqqq.dev/blog/c443d578ca4ca728b6fa
[Apache][Test] Apache Benchを使った負荷テスト


Webサーバーの負荷テストならまず **ab（(Apache Bench)の略）**だという。

# 1. インストール

## Macの場合
MACの方は標準でインストールされている。
OS X Lionではバグがあり動作しないようで、
[こちらの記事](https://blog.verygoodtown.com/2012/05/apache-bench-test-erroron-os-x-apr-socket-recv-connection-reset-by-peer-54/)を確認。

## Windowsの場合

Step1. [xampp](http://www.apachefriends.org/jp/xampp.html)をインストール。
Step2. `xampp` のインストールフォルダに入る： ```cd C:\xampp\apache\bin\``` 。
Step3. `ab`コマンドを実行。

# 2. abコマンドの構文

```
$ ab [-OPTION] URL
```

**OPTION** は `man ab` コマンドで確認できる。

# 3. 負荷テストのやりかた

## 一番簡単な実行方法

```
ab -n [総リクエスト数] -c [同時リクエスト数] [URL]
```

同時10接続で、100リクエスト発行するならこうなる。

```
ab -n 100 -c 10 http://example/test.php
```

## 実行結果の見方

実行結果のレポート情報の中で、まずは下記の２つを確認しておくと良い。

* Failed Requests：失敗したリクエスト数。これが発生している場合は、サーバが処理できる能力を超えている。
* Requests per second：1秒あたりに処理したリクエスト数。

サーバーの限界を測定するには、
「Failed Requests」が0、「Request per second」がより大きい数値になるようにチューニングする。

:weary: 自動的にチューニングしてくれるOPTIONがあればなあ。

* **CSVファイルとして出力**

eオプション（exportの略称だよね）をつけると、
CSVファイルとして出力可能。

```
ab -n 100 -c -e result.csv 10 http://example/test.php
```


# 4. できるとできないこと

* １回の実行で単一のURLに対してリクエスト
* シナリオベース（複数の一連の）のテストはできない


複数のURLに対して負荷を生成したい場合は、下記のようなツールがある。

* Apache JMeter
* httperf
* weighttp


# 参考

https://blog.verygoodtown.com/2012/05/apache-bench-ab/
https://qiita.com/mmmm/items/f31b15b4f80427360207
https://dev.classmethod.jp/tool/ab-tutorial/
【Git】コマンドで特定のディレクトリ以下の変更を取り消す

Gitコマンドで、特定のディレクトリ以下のファイルの変更を取り消すときの操作です。
特定のディレクトリ内で色々作業していたけど、やっぱり元に戻したくなった場合などに使えます。

## 特定ディレクトリ以下のファイルの変更を取り消す

```bash
git checkout HEAD <PATH>
```
`<PATH>`で指定したディレクトリ以下の、全てのファイルの変更を取り消します。

※このコマンドでは、未追跡ファイルは削除されません。
　未追跡ファイルも削除したい場合は、下の操作を行います。

## 特定ディレクトリ以下の未追跡ファイル（Untracked files）を削除する

```bash

git clean -f <PATH>
```
`<PATH>`で指定したディレクトリ以下の、全ての未追跡ファイルを削除します。

※未追跡ファイルの削除は、事前に確認してから行ったほうが安全です。
　削除されるファイル一覧は、`git clean`コマンドに`-n`オプションをつけることで確認できます。

```bash

# 消える未追跡ファイル一覧の出力（まだ消えない）
git clean -n <PATH>
```
WindowsでVSCodeを使ってrailsのデバッグを行う

ここ最近railsで開発しはじめて約2カ月。Windowsだととても開発しずらい。
MacなんかだとVSCodeでデバッグの方法がいくつも載っているのですが、Windowsだと英語サイトしかないし(しかも質問サイトとか)、よくわからない。
今回はWindowsでrailsのデバッグ方法をまとめました。

# 環境
Windows10
WSL(Ubuntu上にrailsの環境設定済)
Ruby 2.4.3
VSCode

# Railsの前準備
- デバッグするためdevelopementのgroupに以下の記述を追加

```:Gemfile
gem 'ruby-debug-ide'
gem 'debase'
```

- gemをインストール

```
bundle install
```

# VSCodeの前準備
## WSLをVSCodeのターミナルから実行できるように設定
- 設定を選択  
![image.png](https://qiita-image-store.s3.amazonaws.com/0/202761/bfd9bddd-223c-3409-bfab-ae2df5a59a66.png)

- 右のタブに以下を追加

```
"terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\bash.exe"
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/202761/e32e017e-5111-dd84-3a7e-373e4b5ff549.png)

## Rubyの設定

- 拡張機能にRubyを追加
![image.png](https://qiita-image-store.s3.amazonaws.com/0/202761/04399028-f6fe-e556-a320-83519709f177.png)

- F5を押して、Rubyを選択。
- launch.jsonが新規で作成されるので、そのまま保存する。

- (2018/07/06追記) デバッグの設定
remoteWorkspaceRootをローカルパスに変更

```json:launch.json

(省略)
{
  "name": "Listen for rdebug-ide",
  "type": "Ruby",
  "request": "attach",
  "cwd": "${workspaceRoot}",
  "remoteHost": "127.0.0.1",
  "remotePort": "1234",
  "remoteWorkspaceRoot": "/mnt/c/Users/xxxx/Documents/SHIPS" // <-ローカルパス
},
(省略)
```

#デバッグ
- Ctrl + @で下の方でターミナルを開いて以下のコマンドを実行（Fast Debbuger …が出たらOK）

```bash:ターミナル
$ rdebug-ide --host 0.0.0.0 --port 1234 -- ./bin/rails s -b 0.0.0.0 -p 3000
-e development
Fast Debugger (ruby-debug-ide 0.6.1, debase 0.2.2, file filtering is supported) listens on 0.0.0.0:1234
```

- デバッグの実行  
デバッグビューに切り替え、「Listen for rdebug-ide」を選択、再生ボタンを押下します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/202761/7d05951e-8f87-82e8-8ac7-46a3b84e8a5c.png)

ターミナルで以下が表示されたらOKです。

```bash:ターミナル
(省略)
=> Booting Puma
=> Rails 5.1.6 application starting in development
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.11.4 (ruby 2.4.3-p205), codename: Love Song
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://0.0.0.0:3000
Use Ctrl-C to stop
```

- 後は実際の画面で確認するだけ！  
以下はscaffoldで作成したequipment_commentsのindexにブレークポイントを貼った例です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/202761/a29b2bbe-dd79-f9f8-013c-a67cb72763dc.png)


# 参考
[Windows10でWSLとVSCodeを使ってプログラミング環境を整える](https://qiita.com/yo_kanyukari/items/37421f497b7ffaa75502)
[Visual Studio Codeを使ってRailsをデバッグ実行してみよう](https://qiita.com/chimame/items/56e48ab3145312ff1786)
https://code.visualstudio.com/docs/editor/debugging#_launch-configurations
https://github.com/rubyide/vscode-ruby/issues/336
mountしたcomponentの子孫ノードでイベントをsimulateしても結果が反映されない（と勘違いした）

Reactで開発中、こんなテストを書いたところ、どうしてもGreenにならない・・・
なぜだ！？

```React
import React from 'react';
import { mount } from 'enzyme';
import AnyComponent from './any_component';

it('changes the value of input') () => {
  const wrapper = mount(<AnyComponent />);
  const node_input = wrapper.find('input');

  node_input.simulate("keyDown", { key: "z", keyCode: 90, which: 90});
  wrapper.update();

  expect(node_input.prop('value')).toEqual("z");
};
```

上のコード、問題を発見した時のコードからシンプルな内容に書き換えたつもりが・・・今回のお題を解決しても、そもそもGreenにならんやつですね・・・

Enzymeの仕組み的に、keyDownのシミュレーションでchangeのイベントは発火しなさそうです・・・

ってことで・・・

```diff
-  node_input.simulate("keyDown", { key: "z", keyCode: 90, which: 90});
-  wrapper.update();
+　　　　node_input.simulate("change", {target: {value: "z"}});
```

で、本題ですが・・・
find関数が返すオブジェクトは、その時点でのSnapshotで、その後の変更は影響しないんですね。気づいてみれば、「そりゃそうだわな・・・」なんですが、気付くまでは、とても悩みましたw

```diff
-  expect(node_input.prop('value')).toEqual("z");
+  expect(wrapper.find('input').prop('value')).toEqual("z");
```
Android カメラアプリを作ろう　その１ AndroidStudioを使って環境を整えよう。

# 開発環境を整えよう

開発環境はこんな感じ

<dl>
<dt>IDE<dt>
<dd>Android Studio</dd>
<dt>試験端末<dt>
<dd>ASUS_X013DB (Zenfone Go / ZB551KL)</dd>
</dl>

ここのところandroidから離れてて知らなかったんだけど、android8.0ってOreoになったのね。
Omanjuuを推していた身としてはちょっと残念。

正直に言うとOrangetteとかくるのかなって思ってました。

さて、ではプロジェクトを新規作成していきましょう。

メニューバーから[File]-[New]-[New Project]

試験端末は「開発用に」という名目で買い置きしておいたZenfone Goを使います。
Zenfone Goは2018/06現在の最新ファームウェアでOSは5.1.1(Lollipop)なので、
Android Studioの開発対象もAPI22( Android 5.1(Lollipop )～にあわせていきます。

![2018y06m18d_165749177.jpg](https://qiita-image-store.s3.amazonaws.com/0/259679/4e592f64-9d91-5d51-6735-620f39ffe5ba.jpeg)

この時点で現在利用されている端末の62.6％をカバー。
確かAndroid 4.2(JellyBean)が安定してて、いまだに結構出回ってるんでしたっけ？
割と開発者泣かせな状況ですね。

開発対象を決めたらテンプレートを[Empty Activity]にして作業開始。
![2018y06m18d_171739461.jpg](https://qiita-image-store.s3.amazonaws.com/0/259679/c06c450f-ca75-4cf8-5ffb-dba6815ac493.jpeg)

と、思いきや！
Gradleさんがおむずがりです。
毎度毎度これがね。IDE久しぶりに動かしてスムーズに新規プロジェクトが動き始めたためしがないような気がします。

↓今回はコレ！
![2018y06m18d_174155613.jpg](https://qiita-image-store.s3.amazonaws.com/0/259679/e3b9b767-4932-8e8c-648d-4c487cc9fa06.jpeg)

あ、忘れずに試験端末の方も開発者オプションを出しておきます。

[Screenshot_2018-06-18-16-59-14.jpg](https://qiita-image-store.s3.amazonaws.com/0/259679/c6720f3a-9a63-e2ae-7dc4-6de22cefcece.jpeg)

---

えー、と言ったところで今日はちょっと用事があるのでおしまいです。（短い）
問題残したまま離れるのは心苦しいけど仕方ない。

今日の稼動は01:23:21でした。（夜に追記するかも）

---
(追記)

帰ってきてから少し調べてみると、SDKの設定がなんだかよろしくないとのこと。
で、エラーメッセージを元に継続調査したところ、StackOverFlowにこんな質問と回答が

[Gradle sync failed with Android Studio 3.1: Uninitialized object exists on backward branch 70](https://stackoverflow.com/questions/49515100/gradle-sync-failed-with-android-studio-3-1-uninitialized-object-exists-on-backw/49552113)

これは・・・ドンピシャじゃな？

そこで解決策として提示されている方法、
[File]-[ProjectStructure]-[SDK Location]画面のJDK locationの[Use embedded JDK]チェックボックスをtrueに変更

![2018y06m19d_021321401.jpg](https://qiita-image-store.s3.amazonaws.com/0/259679/5ff87e37-9148-c285-83da-191c32900a6a.jpeg)

で、これでもダメ。
なぜかProject Structureウィンドウ開く度にチェックが消える。

･･･よく見たらエラーの告知が画面下部に居ますね。
こいつをひらくとこんな感じ。

![2018y06m19d_022641786.jpg](https://qiita-image-store.s3.amazonaws.com/0/259679/b5a3ad5c-20bd-42c7-8721-9a39775047cb.jpeg)

「Android SDK/NDK のパスに空白入ってんじゃん！」とのこと。
あれ？君昔そんなエラー吐いてたっけ？

どうすっかなー？ファイル移動させっかなー？

それもなんかめんどいなー

せや！


ということで、シンボリックリンクで解決できないか試してみることに。


1. コマンドプロンプトを管理者権限で起動して、
![2018y06m19d_024351616.jpg](https://qiita-image-store.s3.amazonaws.com/0/259679/945da1c0-21d3-d597-64f3-ca652948d963.jpeg)

1. mklinkコマンドで空白を含まないパスから元々のSDKのパスにシンボリックリンク作って
![2018y06m19d_024343248.jpg](https://qiita-image-store.s3.amazonaws.com/0/259679/e84c5809-a0ca-a25d-4642-4b0ddc1cce0f.jpeg)

1. で、こう！
![2018y06m19d_024623371.jpg](https://qiita-image-store.s3.amazonaws.com/0/259679/f9eadf16-8162-8278-94f0-393b1724c7f0.jpeg)

よし！エラーは消えたな！（強引）
結果は以下のとおり。

![2018y06m19d_024716372.jpg](https://qiita-image-store.s3.amazonaws.com/0/259679/1c9131d9-f9bf-6f2c-c860-cc763849c7d5.jpeg)

これで気持ちよく開発が出来ますね（ご満悦）
ってことで追加作業が00:39:53。今日は本当にこれでおしまい！
GCEに初めてSSH接続してハマったこと

Google Cloud Platformで、Compute EngineのインタンスにSSH接続する必要があり、ググって方法を試しましたが、Permission deniedというエラーがターミナルで出ました。

結果として、一番初めにGCEにSSH接続するときは、Compute Engineのダッシュボードで、公開鍵の内容を所定の場所にコピペする必要があります。
![スクリーンショット 2018-06-18 17.55.17.png](https://qiita-image-store.s3.amazonaws.com/0/20977/fda668b8-2096-609f-178a-3d2f22db8888.png)
この画像の様にSSHの欄があります。
このブロックをするチェックの下に、公開鍵を追加するところがあります。
そこに、公開鍵の内容をコピペして追加してください。
すると赤い部分に、ログインする際のユーザー名が表示されます。
黒い四角の部分に、公開鍵の内容の抜粋が表示されます。

```
ssh -i ~/.ssh/id_rsa ユーザー名@インスタンスの外部IPアドレス
```
の形で、ログインできます。
ログインに成功すると、下記の画像の文字がターミナルに表示されます。
![スクリーンショット 2018-06-18 18.01.31.png](https://qiita-image-store.s3.amazonaws.com/0/20977/5096cc74-9044-048c-f402-020a153bd7b6.png)

一応秘密鍵のフォルダの権限は、変えてみました。
```
chmod 700 ~/.ssh
```

下記の記事が参考になると思います。
https://webkaru.net/linux/mac-ssh-login-public-key/
Eclipseで「Warning: Top level elements set to working sets but no working sets are defined.」のエラーの対処法

#自分の環境
Windows10 Home
Eclipse Neon(4.6.3)

#エラーについて
![image.png](https://qiita-image-store.s3.amazonaws.com/0/265015/a43a1832-e0f7-fda7-4883-ac355b717d8c.png)
このようにプロジェクト・エクスプローラーに今までのフォルダが表示されずに、エラーが出る場合があります。

それについての対処法をお教えします。


![スクリーンショット.png](https://qiita-image-store.s3.amazonaws.com/0/265015/e7f3b201-eba6-e471-0d48-83e3829f9385.png)

そうすると
![image.png](https://qiita-image-store.s3.amazonaws.com/0/265015/a79e45d8-a9c8-8e10-1e25-3b76ab3d328a.png)
コンテキストメニューが表示されます。

この中の「トップ・レベル要素」をクリックし、
![image.png](https://qiita-image-store.s3.amazonaws.com/0/265015/645ea029-4042-ad86-5c11-f748a71d01ec.png)
「ワーキングセット」を「プロジェクト」に変更してください。

そうすると
![image.png](https://qiita-image-store.s3.amazonaws.com/0/265015/8a8b667f-2e47-86f0-0b9e-6981a23c6136.png)
このようにフォルダが表示されると思います。



以上です。
Cognos Framework Manager でUNIONする方法

#概要
Cognos Analytics や Cognos BI の Framework Managerで、JOIN(結合)をするのは、こんな風に「リレーション(関係)」を定義してやってますが、じゃあUNION(統合)は、どうやってやるのと最近聞かれましたので投稿しておきます。
![007.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/3e10b6fe-86a6-5a44-11e3-16903d7254b7.jpeg)

#手順
こんな風に、UNTBL1とUNTBL2が存在して、Database Viewにテーブル定義を取り込み済みの状態とします。
![008.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/7537e652-5406-9b38-9daa-db6a5774c615.jpeg)

UNIONされたクエリー・サブジェクトを作成するためには、「操作」メニューから「クエリー・セットを定義」を選択します。
![004.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/0379b5a9-df50-9e68-97dd-0d8847af7cdf.jpeg)

こんな感じに名称を指定し、「UNTBL1」と「UNTBL2」を選択して「OK」します。
![005.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/13ece516-3a76-1e8e-7347-efca6a1548b3.jpeg)

作成された「UNION」というクエリー・サブジェクトをテストしてみると、以下のようにUNTBL1とUNTBL2がUNIONされたクエリー・サブジェクトになっている事がわかります。
![006.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/61996bb1-c22b-af8c-b1c1-893c304529a3.jpeg)

という感じです。簡単ですが。

#参考
**How to define Union, Intersect and Except in Framework Manager**
http://www-01.ibm.com/support/docview.wss?uid=swg21339752

**How to define Union, Intersect and Except in Cognos Analytics 11 Framework Manager.**
http://www-01.ibm.com/support/docview.wss?uid=swg21999403
【Kaggleのはじめかた】 チュートリアル ML編 part4

前回
[【Kaggleのはじめかた】 チュートリアル ML編 part3](https://qiita.com/mozi/items/6d0c15f2079e34df3004#_reference-07c25276491430bed9eb)
ではデータセットに含まれる欠損値の補償について取り扱いました

今回はlevel 2.2から始めていきます

# 2.2 : Using Categorical Data with One Hot Encoding

前回まではデータを取り扱う際に、扱いずらいデータを編集、あるいはカラムごと削除してしまう話をしました。では、どのようにして文字列などを扱うことができるのでしょうか？

この章のタイトルにある、One-Hot Encodingは単語などをプログラムで取り扱うためにカテゴリーを01で分類してしまう手法のことです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214036/26695cb7-e333-bb40-aaed-070c3cd92689.png)
このようにして、単語をベクトルとして扱えるようになります。


## 例
チュートリアルのサンプルコードが少々分かりにくかったため、ある程度オリジナルなものをサンプルとして紹介します。

```python:
# おなじみ
import pandas as pd

# pathを短く
melbourne_file_path = '../input/melb_data.csv'
melbourne_data = pd.read_csv(melbourne_file_path) 
print(melbourne_data.columns)
```
まずは毎度おなじみのデータセットの用意から。前回までのkernelをしようとしたところ上手くいかなかったため新しいkernelを使用しています。

新しいカーネルですと、データセットがダウンロードされていないので、Codeの隣にあるDataタブで検索して追加する必要があります。

pathについて、"../input/melb_data.csv"だとうまくいきました。不透明なディレクトリ構造のため、エラーに注意してください。

```python:
# データ分割用のライブラリをインストール
from sklearn.model_selection import train_test_split

# 本来はこんなにありませんが、練習のため全部入れてみました
melbourne_predictors = ['Suburb', 'Address', 'Rooms', 'Type', 'Price', 'Method', 'SellerG',
       'Date', 'Distance', 'Postcode', 'Bedroom2', 'Bathroom', 'Car',
       'Landsize', 'BuildingArea', 'YearBuilt', 'CouncilArea', 'Lattitude',
       'Longtitude', 'Regionname', 'Propertycount']

# train_predictorsが欲しかったので、ここに格納してあげます。
train_predictors = melbourne_data[melbourne_predictors] 

# やっとです。各カラムのデータ型を表示します
train_predictors.dtypes.sample(10)
```

```
Price           float64
BuildingArea    float64
Method           object
Longtitude      float64
Postcode        float64
Date             object
Address          object
YearBuilt       float64
Regionname       object
Landsize        float64
dtype: object
```
チュートリアルとは違った結果になりますが、確かにデータ型が混在していますね。
Laravelのコントローラー名は単数形か複数形か

どちらでも良さそうだがプロジェクト内では統一しておきたいところ。

デフォルトの挙動を尊重するのだとしたら

```bash
$ php artisan make:model FooBar -c # Create a new controller for the model
```

で生成されるファイルが

- app/FooBar.php
- app/Http/Controllers/FooBarController.php

なので単数形で良い気がする。

## おまけ：View

ビューのディレクトリ名は`layouts`や`errors`ディレクトリがあるので複数形が基本で良い気がする。
Railsでデータベースカラムの追加を行う方法

# はじめに

[Rails チュートリアル](https://railstutorial.jp/)などで、Railsの勉強をしていてフォームの実装をしていた時に、フォームを追加したい場合、当然カラムもしなければいけません。色々調べていたら勉強になったので、まとめておきます。

# 環境

この記事では以下の環境（2018年6月18日時点）で動作確認できました。

- Ruby: 2.4.1
- Rails: 5.0.7

# 現状

`microposts`という名前のテーブルに、新たに`status`というカラムを追加したい場合

```sql
mysql> describe microposts;
+------------+--------------+------+-----+---------+----------------+
| Field      | Type         | Null | Key | Default | Extra          |
+------------+--------------+------+-----+---------+----------------+
| id         | bigint(20)   | NO   | PRI | NULL    | auto_increment |
| content    | varchar(255) | YES  |     | NULL    |                |
| user_id    | bigint(20)   | YES  | MUL | NULL    |                |
| created_at | datetime     | NO   |     | NULL    |                |
| updated_at | datetime     | NO   |     | NULL    |                |
+------------+--------------+------+-----+---------+----------------+
```

# カラム追加の方法（マイグレーションファイルの作成）



カラムを追加するコマンドをするマイグレーションファイルを生成する基本構文は、下記のようになります。

```bash
$ rails g migration Addカラム名Toテーブル名 カラム名:データ型
```

## 実際行ったコマンド

実際行ったコマンドは下記のようになります。

```bash
$ rails g migration AddStatusToMicroposts status:string
```

## 実際できたマイグレーションファイル

```rb:20180618075017_add_status_to_microposts.rb
class AddStatusToMicroposts < ActiveRecord::Migration[5.2]
  def change
    add_column :microposts, :status, :string
  end
end
```

## マイグレーションを実行

実際にカラムを追加するために、マイグレーションを実行します。

```bash
$ rails db:migrate

== 20180618075017 AddStatusToMicroposts: migrating ============================
-- add_column(:microposts, :status, :string)
   -> 0.0088s
== 20180618075017 AddStatusToMicroposts: migrated (0.0097s) ===================
```

## DB確認

マイグレーションが実行されているかを確認するために、DB（`microposts`テーブル）を確認して見ます。

```sql
mysql> describe microposts;
+------------+--------------+------+-----+---------+----------------+
| Field      | Type         | Null | Key | Default | Extra          |
+------------+--------------+------+-----+---------+----------------+
| id         | bigint(20)   | NO   | PRI | NULL    | auto_increment |
| content    | varchar(255) | YES  |     | NULL    |                |
| user_id    | bigint(20)   | YES  | MUL | NULL    |                |
| created_at | datetime     | NO   |     | NULL    |                |
| updated_at | datetime     | NO   |     | NULL    |                |
| status     | varchar(255) | YES  |     | NULL    |                |
+------------+--------------+------+-----+---------+----------------+
```

`status`カラムができていることを確認できました。

---

以上です！

# この記事を読んだ方に

この記事を読んで、誤っている箇所をみつけたり、追記した方がいい内容などありましたら、編集リクエストやコメント欄で指摘していただけると助かります。

# 参考

- [Railsドキュメント / マイグレーション(migration) / カラムの追加(add_column)](http://railsdoc.com/migration#%E3%82%AB%E3%83%A9%E3%83%A0%E3%81%AE%E8%BF%BD%E5%8A%A0(add_column))
firebase-toolsをproxy環境で使う

# TL;DR
・`firebase-tools`は通信に`node`の`faye`を使っているため，環境変数の`http_proxy`とかが使えない
・`faye`の通信部分に`proxy`などをハードコードすれば通るらしいがハードコードはイケてない
・`faye`から環境変数の`http_proxy`を見て動的にProxy解決するように改造した

# はじめに
Firebaseのチュートリアルどおりに，`firebase login`, `firebase init`と進めた後に，Cloud Functionsなどを
`firebase deploy --only functions`
でデプロイしようとしたら，Console上に何も表示されないままで固まる．
(せめてここでどんなErrorが起きてるか，とか出してくれればまだマシだった．．．)

# foyeのclient.jsを改造
`firebase-tools`をインストールしたときに，依存解決でインストールされる`firebase`モジュールが抱える`foye`の`client.js`を改造します．

`firebase-tools`自体は，自分の環境では
`/usr/local/lib/node_modules/firebase-tools`
にインストールされていました．

この`firebase-tools`がもつ`firebase`モジュールの中の`foye`を ↓ のように改造します．


```javascript:firebase-tools/node_modules/firebase/node_modules/foye-websocket/lib/foye/websocket/client.js
11 ...
12
13 var Client = function(_url, protocols, options) {
14   options = options || {};
15
 +   options.proxy = {
 +     headers: {'User-Agent': 'node'},  // User-Agentも設定しないと通信できませんでした
 +     origin: process.env.HTTP_PROXY    // HTTP_PROXYはProxy Host+Portをexportした環境変数
 +   }
16
17 ...
```

これで，Codeを環境毎に書き換えることなく，`firebase-tools`からProxyを動的に解決してくれるようになりました．

### 情報元のStackOverflow
https://stackoverflow.com/questions/27098328/firebase-in-nodejs-with-http-proxy/28155536

---///
大規模Vue.jsアプリを開発するときのディレクトリ構成考えた

#背景
Vue.jsは公式のチュートリアルとかドキュメントは充実してるし、vue-cliもあるし、
初学者が勉強して動作させるのはけっこう簡単にできる。
でも、大規模アプリケーションを開発するとなると単一ファイルコンポーネントに
ひたすら処理を書いてしまいがちなので、大規模アプリケーション開発でも耐えうる（であろう）
ディレクトリ構成を考えました。

#想定
50ページ以上のVue.jsアプリケーションを複数名で開発することに耐えられるディレクトリ構成を目指す。
開発者が処理を書くときに、どこに書けばいいか迷わないように。

#構成
vue-cliのwebpackテンプレートをベースにしてます。
https://github.com/vuejs-templates/webpack/tree/develop/template
srcディレクトリ以下は構成をいじっていますが、ルートディレクトリは基本的に
webpackテンプレートのままです。

```bash:ディレクトリ構成
Root::
├─build
├─config
├─dist
├─static
├─test
├─src
│  ├─assets
│  ├─components
│  │  ├─mixin
│  │  ├─partial
│  │  │  ├─modal
│  │  │  └─plugin
│  │  └─pages
│  │       ├─member
│  │       ├─register
│  │       └─.....(etc)
│  ├─lib
│  │  ├─lang
│  │  │   ├─en
│  │  │   ├─ja
│  │  │   ├─ch
│  │  │   └─.....(etc)
│  │  │─functions
│  │  └─definition
│  ├─router
│  ├─setup
│  └─store
```

##ルートディレクトリ
**/build**
webpackのconfigファイル格納

**/config**
webpackで使う定数（？）関係の設定ファイル格納

**/dist**
buildしたときにファイルが出力されるディレクトリ。
このディレクトリである必要はありませんが、webpackテンプレート標準ではここに設定されています。

**/static**
Vue.jsで管理されない静的ファイル群。
主にクライアントがファイルを自由に置く領域として用意しています。

**/test**
ユニットテスト、E2Eテストを格納。

##srcディレクトリ以下
**/assets**
webpackで結合されるファイルを格納。
SASSファイルや、画像、Webフォントなどを入れています。

**/components**
Vue.jsの単一ファイルコンポーネント群。
単一ファイルコンポーネントは

* ページそのもの
* 複数ページで使い回すパーツ
* mixin

という３つの用途があるので、それぞれフォルダを分けています。
基本的にpagesに入っているファイル数＝ページ数になります。
ヘッダーやフッターなど共通してるものはpartialに。

**/lib**
サイト全体で使う処理や設定を格納しています。

* lang
多言語サイトの場合の言語ファイル

* functions
汎用処理関数群。
Vue.jsではobjectをv-forで表示する場合に取り出し順を担保しないので、
オブジェクトをソートして配列化する・・・・といったような関数をまとめてあります。

* definition
Enum的なものを格納します。
実際にはES6ではEnumがないので、Typescript化しないと使えませんが、Vue.jsのTypescript化は結構たいへんなので、
「Enumのようなもの」を作ってここにいれて運用しています。

**/router**
vue-routerの設定ファイルを格納。

**/setup**
アプリケーション固有の設定ファイルを格納。

**/store**
Vuexモジュールを格納。


# あとがき
複数名で開発していると、mixinで処理してるページとベタ書きがあったり、mixinがどのページ用の
mixinか分からなかったり、同じような処理があちこちにあったり・・・・カオスな状態になりがちでした。
「どこに何がある」が分かりやすくなればメンテナンス性もあがるかなと思い考えてみました。
ご意見お待ちしております！
2018/06_03 御題決め

# 今週の課題

毎度ギリギリでなんとか（一応）動くもの出来てますね。

ってことで３品目。

**カメラアプリを作ろう**

今回はandroid。

実は少し変わったカメラアプリにしようかなぁ？
とか思っていたり。

ちょっと今回はGitHubにはソース上げないかもですが…

道筋は結構見えているつもりなのでサクサクやっていきましょう。
sonarlintのEclipse設定

前提：SonarQubeのインストールとプロジェクト含めての各設定が完了であること

・EclipseのMarketplaceで、SonarLint を検索してインストールし、再起動します。
・SonarQube Servers ビューで、SonarQube Server URLなどの情報を入力してサーバー設定を実施
　　※セキュリティのため、Choose authentication methodはToken を推奨。TokenはSonarQubeからユーザーごとに発行できる
・対象プロジェクトを右クリックし、[SonarLint] -> [Bind to a SonarQube project…] -> [Auto bind selected projects] を選択しSonarQube Serverに関連付けをします。Auto bind がうまくいかない場合は、SonarQube Projectを手動入力して関連付けをします。
・対象プロジェクトを右クリックし、[SonarLint] -> [Analyze] で解析実施

■注意点
SonarLint とSonarQubeの解析結果が不一致であることが判明しました。
これは、SoanrLintの制約事項です。
コード重複や、テストカバレッジなど一部の解析機能が使えない
例）
2 duplicated blocks of code must be removed.

参照：https://www.sonarlint.org/eclipse/
Unite2018Tokyo ShaderGraph 公演まとめ

## Pref.
Unite2018Tokyoで高橋さんがご登壇された
「新機能Shader Graphを使えばプログラミング無しにシェーダーが作れるようになります！」
の中で紹介されたUnity2018からPreview実装されているShaderGraphの機能紹介とテクニック紹介
を簡単にまとめした．

[【Unite Tokyo 2018】新機能Shader Graphを使えばプログラミング無しにシェーダーが作れるようになります！](https://www.youtube.com/watch?v=9OP6s5RFNkQ&t=1279s)

## Shader Graphとは
ノードベースのShader Editor．
グラフィカルな環境でShaderでの絵作りが可能になる．

## 利用することでの利点

### 1. 簡単にShaderを扱える
Shaderを手書きでソースから書くと難しいのに比べノードベースのShader EditorであるShader Graphは
誰でも簡単に扱うことができる．

### 2. 互換性
最終的な画面の描画までの様々な描画処理の流れをRender Piplineというが，従来のShaderの仕組みでは
Render PiplineごとにShaderを書き直さなければならなかったが，従来のRender Piplineは大きく
2つしか存在していなかったので特に問題は起きなかった．

しかしこれから「Scriptable Render Pipline」機能，つまりスクリプトによる
カスタムRender Piplineの登場により，Render Piplineが無数に追加が可能になる．
そういったときに従来のShaderの仕組みではそれぞれでの最適化が難しくなる．

Shader Graphは一回ShaderをShader Graph上で作成してしまえばそれら全てに対応できる仕組みになっている．
Shaderに抽象性を持たせる，結果どのレンダリングパイプラインでも使い回せるようになっている．

<font color="dark orange">いわばShader GraphはSRP(Scriptable Render Pipline)世代のUnityにおいて
シェーダを組むための標準の仕組みである．</font>

## Shader Graphセットアップ手順
現在2通りの方法があるが1のLightweight-RPテンプレートを利用の方が簡単である．

### 1. Lightweight-RPテンプレートを利用
Unityのプロジェクトを構築するときにテンプレート「Lightweight-RP」を選択する．

### 2. Package Manager経由でインストール
Package Managerを利用してShader Graphをインストールする．
<font color="dark orange">この方法だと私の環境では現時点でうまく行かなかったので
打開策を[https://qiita.com/nmxi/items/cddf16f1ade9913e0780](https://qiita.com/nmxi/items/cddf16f1ade9913e0780)に書いておきました．</font>

## 実際にShader GraphでShaderを作ってみる
UnityエディタのProjectタブ内を右クリックして，いつも通りShaderを新規作成するタブに

- PBR Graph (Phisicaly Based Rendering ライティグあり)
- Sub Grap (複雑なので今回の公演では説明は割愛)
- Unlit Graph (ライティングなし)

が追加されているので，それぞれ選択する．
するとこれまたいつも通りにファイルが生成されるので(.ShaderGraphファイル)
ダブルクリックでShader Graphのエディタ画面に移ることができる．

## 紹介されたノード
|ノード名|説明|
|---|---|
|Sample texture 2D|2Dテクスチャを読み込む|
|Sample Noise|ノイズを生成|
|Add|値を足し算|
|Step|ある値以上を抽出|
|Smooth Step|Stepノードのなめらかに値が変化する版|
|Fraction|小数点以下を返す 1.1→0.1 2.4→0.4 0.5→0.5|
|Invert Color|色を反転|
|Time|ゲームが開始されてからの経過時間を秒で返す|
|Multiply|色を掛け合わせる|
|Remap|値一次変換 In,Min,Maxでの範囲で値の範囲で入力された値がOut,Min,Maxの範囲で出力されるように一次変換してくれる|
|Lerp|値の補間 A,Bの間を繋ぐ|
|Split|ベクトルを成分に分解 Combineとセットで覚えると良い|
|Combine|ベクトル成分を結合 Splitとセットで覚えると良い|
|Saturate|0~1以外の値を切り捨てる　負の値はバグになりやすいのでその点有効|
|Sine|sin波 周期的な値を生成|

## 紹介されたテクニック
とても端折ってるので動画を見たほうが早いです．

### 反復アニメーション
Timeノード - Fractionノード
![4wersg.gif](https://qiita-image-store.s3.amazonaws.com/0/181807/66293183-0f0d-53d1-c4f7-500dac32905b.gif)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/181807/6bd0d42c-4969-2554-cb46-df777bf19b49.png)

### 明るさを補う
Multiplyノードで1以上を掛ける
![image.png](https://qiita-image-store.s3.amazonaws.com/0/181807/5262c928-5497-4378-6834-360bfdab91d3.png)


### 時間軸を素にした適当な値を出力
Timeノード - Gradient Noiseノード
![ecWc.gif](https://qiita-image-store.s3.amazonaws.com/0/181807/8c68a264-c4a3-4f49-ae37-8af66a9bb291.gif)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/181807/e8e6f84a-bc28-c048-7b73-90f68664935b.png)
AWSシンプルアイコンのクイズを作った

# AWSシンプルアイコン
AWS利用者の方はどこかで見たことがあると思いますが、AWSの各製品にはアイコンがあります。

<img width="420" alt="スクリーンショット 2018-06-11 13.56.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/118352/8db033fc-9ac4-d7a9-de0a-bf8d2dbbf92c.png">

こういう図で使用するやつですね。

このアイコンは↓のページで紹介されており、画像をダウンロードできるほか描画ツールへのリンクもあります。

[AWS シンプルアイコン - AWS アーキテクチャーセンター | AWS](https://aws.amazon.com/jp/architecture/icons/)

>AWS シンプルアイコンは AWS 製品およびリソースのアイコンを含む公式アイコンセットです。お客様やパートナーがアーキテクチャーダイアログを作成するのにお使いいただけます。ホワイトペーパー、プレゼンテーション、データシート、ポスター、または技術資料などのダイアグラムに採り入れやすいよう、シンプルなデザインになっています。


# おまえは今までに見たAWSのアイコンをおぼえているのか?
このシンプルアイコンですが、憶えているようで憶えていない気がしたのでクイズを作ってみました。

- [Vol.1](https://www.flexiquiz.com/SC/N/aws-product-icons-1)
- [Vol.2](https://www.flexiquiz.com/SC/N/aws-product-icons-2)


Vol.1はアイコン選択クイズで、設問の製品のアイコンを4つの中から選択するものです。
Vol.2は製品選択クイズで、設問にあるアイコンが表している製品を4つの中から選択するものです。

どちらも最初は身近な製品ですが、後半は難しくなっていると思います。

ぜひ満点目指してチャレンジしてください！💪🏻


# 余談

- ちなみにクイズ作成はこれを使ってます。
https://www.flexiquiz.com/

- ちなみにここから画像を引っ張ったりしてます。
https://github.com/burib/aws-simple-icons-for-architecture-diagrams

- AWSの製品は `Amazon xxxx` という名前のものと `AWS xxxx` という名前のものがありますが、どういう使い分けになっているんでしょうねえ？
JupyterにpandasのDataFrameとMatplotlibのグラフを並べて表示する

プレゼン資料などを作る際に、グラフとテーブルデータを並べて表示したくなるときがあります。

Jupyterではこのパターンが多いのではないでしょうか。

* テーブルデータ -> pandasのDataFrame
* グラフ -> Matplotlib

下記のライブラリを使って実装してみます。

* IPython.display.HTML  
  HTMLをそのままJupyterに表示
* jinja2  
  テンプレートエンジン
* io.BytesIO, base64  
  Matplotlibのグラフをバイナリデータに出力

サンプルコードはこんな感じです。

```python
from io import BytesIO
import base64
import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
from IPython.display import HTML
from jinja2 import Template


# 表示するテーブルを作成
np.random.seed(1)
df = pd.DataFrame(np.random.rand(4, 4), columns=list("ABCD"))

# 表示するグラフを作成
bytes_data = BytesIO()
plt.ioff()  # 対話的操作をオフ
fig = plt.figure()
ax = fig.add_subplot(1, 1, 1)
ax.plot(df)
fig.savefig(bytes_data, format="png")
plt.close(fig)
png_data = base64.b64encode(bytes_data.getvalue()).decode()

# HTML出力
html_tpl = """
<table>
  <tr>
    <td><img src="data:image/png;base64,{{ png_data }}" /></td>
    <td>{{ table }}</td>
  </tr>
</table>
"""
tpl = Template(html_tpl)
html_text = tpl.render({"png_data": png_data, "table": df.to_html()})

HTML(html_text)
```

このように表示されます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/22023/923b4c74-8368-2ee4-9152-c03467bc7041.png)

いかがでしょうか？HTML形式なので、位置やフォントなど見栄えの調整もし易くなると思います。
[RISE](https://github.com/damianavila/RISE)と組み合わせることでプレゼンが捗りそうです。

【2018/06/18 21:20追記】 余計なグラフがshowで表示されることを抑制する処理を追加
このサイトのようなボタン操作での画面内スライドはどう実装されているのでしょうか。

モバイル版タウンワークのトップページのような、県選択で何かボタンを押すと、それに対して次に選ばせる画面が出てくる、
スライドの動きはどのように実装すればいいのでしょうか。
https://townwork.net/?arc=1

jQueryのスライドを調べているのですが、イメージ画像などのスライドショーの実装方やライブラリばかりで、
このような選択画面でのスライドのさせ方がわかりません。

是非わかる方がいましたらご教授いただきたいです。
よろしくお願いいたします。
iOS11にてNavigationBarButtonLeftの位置がおかしくなってしまう問題(swift)

# 追記
iOS13対応版あげました

> iOS13でもNavigationBarButtonの位置を調整したい - Qiita
https://qiita.com/rd0501/items/8e8254a23d87a9b2fea2

# 環境
Swift4ぐらい
Xcode Version 9.4 (9F1027a)

# 現象

iOS11にてNavigationBarButtonLeftの位置をdefaultの16の位置より外側に配置するために以下の処理を行ってました。
以下の実装を行うとNavigationBarButtonにdefaultで入る16ptの余白をなくすことができます。

```swift
import Foundation

final class BaseNavigationBar: UINavigationBar {
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        if #available(iOS 11, *) {
            loop: for view in subviews {
                for stack in view.subviews where stack is UIStackView {
                    stack.superview?.layoutMargins = .zero
                    break loop
                }
            }
        }
        
    }
}

final class BaseNavigationController: UINavigationController, UIGestureRecognizerDelegate {
    
    override init(rootViewController: UIViewController) {
        if #available(iOS 11, *) {
            super.init(navigationBarClass: BaseNavigationBar.self, toolbarClass: UIToolbar.self)
            self.viewControllers = [rootViewController]
        } else {
            super.init(rootViewController: rootViewController)
        }
    }
}
```

上記の対応を入れていたのに特定のViewControllerにてNavigationBarButtonの位置が16ptになってしまってました。

# 解決

`self.navigationController?.setNavigationBarHidden(false, animated: true)`とNavigationBarButtonを追加するタイミングを以下のように逆にしたらうまく行きました。

```swift
final class CommonWebViewController: BaseViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        self.navigationController?.setNavigationBarHidden(false, animated: true)

        // NavigationBarLeftItemを追加する処理
        self.setNavLeftButton(type: .back, selector: #selector(CommonWebViewController.back(_:)))
    }
}
```

↓

```swift
final class CommonWebViewController: BaseViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // NavigationBarLeftItemを追加する処理
        self.setNavLeftButton(type: .back, selector: #selector(CommonWebViewController.back(_:)))
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        
        self.navigationController?.setNavigationBarHidden(false, animated: true)
    }

}
```
TruffleRubyを動かしてみた

RubyKaigi 2018でも発表のあったらしいOracle製の高速Ruby実装「TruffleRuby」を動かしてみた。

最初は[こちらの記事](https://blog.freedom-man.com/truffleruby/)と同じようにやろうとしたけど、Mac上でDockerイメージのビルドがうまくいかなかったので、[公式ドキュメント](https://github.com/oracle/truffleruby/blob/master/doc/user/installing.md)を参考にAmazon Linux上で直に動かしてみた。

[追記]
`gem install nokogiri`しようとしたら「LLVMが必要だ」と言われて、`yum install llvm clang`したものの`unsupported clang version: 3.6.2`。やっぱり公式にサポートされているディストリビューションを使ったほうがよさそう。

# 公式ドキュメントより

- Community Edition
  - Linuxのみ
  - productionで使ってもOK
- Enterprise Edition
  - LinuxとMac両方あり
  - 評価だけならタダだけど本番で使っちゃダメ
  - Oracle Technology Networkからダウンロードする

アクティブにテストされている環境：

- Oracle Linux 7
- Ubuntu 16.04 LTS
- Fedora 25
- macOS 10.13

LLVM, zlib, libsslが必要。ロケールはUTF-8にする必要がある。

と書いてあるが、今回の手順を試すだけならLLVMはなくても動いた。
ロケールは`ja_JP.UTF-8`にした。

# TruffleRubyのセットアップ

```
export LANG=ja_JP.UTF-8

wget https://github.com/oracle/graal/releases/download/vm-1.0.0-rc2/graalvm-ce-1.0.0-rc2-linux-amd64.tar.gz

tar xf graalvm-ce-1.0.0-rc2-linux-amd64.tar.gz

cd graalvm-ce-1.0.0-rc2/bin

./gu install org.graalvm.ruby

# benchmark-ipsのインストールのために必要
sudo yum install -y openssl openssl-devel

# hoge.rbで使っているのでインストール
./gem install benchmark-ips
```

```
[ec2-user@ip-10-4-1-235 bin]$ ./ruby --version
truffleruby 1.0.0-rc2, like ruby 2.4.4, GraalVM CE Native [x86_64-linux]
```

```hoge.rb
#!/usr/bin/env ruby

require 'benchmark/ips'

def call
  i = 0
  while i < 1000
    i += 1
  end
end

call; call; call; call; call # JITを効かせたいがために複数回呼び出す

Benchmark.ips do |x|
  x.report('call') { call }
  x.compare!
end
```

TruffleRubyでベンチマーク実行：

```
[ec2-user@ip-10-4-1-235 bin]$ ./ruby hoge.rb
Warming up --------------------------------------
                call    91.374k i/100ms
Calculating -------------------------------------
                call      1.858M (±12.7%) i/s -      8.955M in   5.038041s
```


# 比較のため、普通のCRuby 2.4をインストール

```
sudo yum install -y ruby24
sudo update-alternatives --set ruby /usr/bin/ruby2.4
```

```
[ec2-user@ip-10-4-1-235 bin]$ /usr/bin/ruby --version
ruby 2.4.4p296 (2018-03-28 revision 63013) [x86_64-linux-gnu]
```

CRuby 2.4でベンチマーク実行：

```
[ec2-user@ip-10-4-1-235 bin]$ /usr/bin/ruby hoge.rb
Warming up --------------------------------------
                call     4.736k i/100ms
Calculating -------------------------------------
                call     48.834k (± 0.4%) i/s -    246.272k in   5.043175s
```

`8955 / 246.272 = 36.5`だから、確かに37倍速かった。
docker 「コンテナを ssh 接続できるようにするDockerfile」チュートリアル解説

dockerチュートリアルに、コンテナに直接ssh接続する例が書かれている。

[Dockerize an SSH service | Docker Documentation](https://docs.docker.com/engine/examples/running_ssh_service/)

# 概要

特別なことは何もしていない。
docker的な解決ではなく、単にサーバー的解決をおこなう。

要するにサーバを立ててから、ssｈ接続できるようにするまでの手順をDockerfileに書いておけば良い。

# Dockefile



```bash
FROM ubuntu:16.04

RUN apt-get update && apt-get install -y openssh-server
RUN mkdir /var/run/sshd
RUN echo 'root:screencast' | chpasswd
RUN sed -i 's/PermitRootLogin prohibit-password/PermitRootLogin yes/' /etc/ssh/sshd_config

# SSH login fix. Otherwise user is kicked off after login
RUN sed 's@session\s*required\s*pam_loginuid.so@session optional pam_loginuid.so@g' -i /etc/pam.d/sshd

ENV NOTVISIBLE "in users profile"
RUN echo "export VISIBLE=now" >> /etc/profile

EXPOSE 22
CMD ["/usr/sbin/sshd", "-D"]
```


# Dockerfileの解説

## sshサーバーをインストールする

```
RUN apt-get update && apt-get install -y openssh-server
```

サーバーなしにはssh接続はできぬ。

## ssh用のディレクトリ作成

このディレクトリがないとsshdが動かないっぽい。

```
RUN mkdir /var/run/sshd
```

## rootユーザーにパスワードを設定する

`chpasswd` コマンドでパスワード設定をする。Linuxの基本コマンドである。
この例では `root` ユーザーに `screencast` というパスワードを設定している。

```
RUN echo 'root:screencast' | chpasswd
```

## rootでのパスワードログインを許可する

sshd_config ファイルを強引に書き換えての設定変更。

```
RUN sed -i 's/PermitRootLogin prohibit-password/PermitRootLogin yes/' /etc/ssh/sshd_config
```

OpenSSHのバージョンにもよるが、デフォルト設定では通常、 root に直接パスワードでログインすること禁止されている。

[「OpenSSH 7.0」がリリース、PermitRootLogin設定の変更などセキュリティ強化が行われる | OSDN Magazine](https://mag.osdn.jp/15/08/14/072400)

## 何かのおまじない

正規表現のせいで読みづらいが `/etc/pam.d/sshd` の設定を書き換えている。
コメントにある通り、これを書かないとログイン後にキックされてしまうらしい。

```
# SSH login fix. Otherwise user is kicked off after login
RUN sed 's@session\s*required\s*pam_loginuid.so@session optional pam_loginuid.so@g' -i /etc/pam.d/sshd
```
```diff
- session　　required　　pam_loginuid.so
+ session　　optional　　pam_loginuid.so
```

(だが試しにこの行を消してみたところ、特に問題なくsshログインできた)

[ubuntu - Why is it needed to set `pam_loginuid` to its `optional` value with docker? - Stack Overflow](https://stackoverflow.com/questions/21391142/why-is-it-needed-to-set-pam-loginuid-to-its-optional-value-with-docker)


# 環境変数を渡す例

チュートリアルにはあくまで例を書いているだけで、特に意味のあることはしていないような。(この二行を消しても動く)

```
ENV NOTVISIBLE "in users profile"
RUN echo "export VISIBLE=now" >> /etc/profile
```

- [bash - Why set VISIBLE=NOW in /etc/profile? - Stack Overflow](https://stackoverflow.com/questions/36292317/why-set-visible-now-in-etc-profile)

# 22番ポートを晒す

```
EXPOSE 22
```

# sshサーバーを起動する

起動せずにはsshは使えぬ。

```
CMD ["/usr/sbin/sshd", "-D"]
```

# 参考

- [ubuntu 11.04 xinetd経由でｓｓｈdを起動する（設定の変更）: 豆腐と蒟蒻](http://tofutokonnyaku.cocolog-nifty.com/blog/2011/06/ubuntu-1104-x-2.html)
- [PAMの役割 | OpenGroove](https://open-groove.net/lpic/pam-modules/)








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
numbaのjitではtry-catch節がエラーになる

この記事は要約です。詳細は以下のリンク先ブログ記事をご覧ください。

http://coffeebreakscript.hatenablog.com/entry/2018/06/18/143536

`numba`の`@jit`を使って定義した関数の中ではtry-catch節を用いた例外処理が使えません。
たとえば、次のようなコードを動かすと…

```python
from numba import jit

@jit
def function_name(input_args):
    hoge ...
    try:
        hoge1
    exception ERROR:
        hoge2

    return hoge
```

こんな感じのエラーが出ます。(最後の4行だけ抜粋)

```
    (前略)
  File "C:\ProgramData\Anaconda3\lib\site-packages\numba\controlflow.py", line 515, in run
    assert not inst.is_jump, inst
AssertionError: Failed at object (analyzing bytecode)
SETUP_EXCEPT(arg=XXX, lineno=XXX)
```
※arg=とlineno=の後のXXXには本来なら数字が入ります。



今のところ回避策はないようです。
『try-catchを使いたい場合は`@jit`を使わない』というのが唯一の対処法っぽい。(回避策ご存知の方はコメント欄までお願いいたします。)


■参考サイト：
https://stackoverflow.com/questions/47064474/avoid-try-catch-in-numba
TwitterのAPIでcallbackURLをチェックするようになった

# TwitterのAPIでCallbackのエラーが出ていた

Twitterの認証でエラーが出ていた。
急になぜ？？

```
Received HTTP status code [403] with message
"
<?xml version="1.0" encoding="UTF-8"?>
<errors>
<error code="415">Callback URL not approved for this client application. Approved callback URLs can be adjusted in your application settings
</error>
</errors>
"
when getting temporary credentials.
```

```
Enable Callback Locking (It is recommended to enable callback locking to ensure apps cannot overwrite the callback url)
```

`error code="415"` ってなんだ??

## 原因

調べてみると一ヶ月前から告知がされていました。
https://twittercommunity.com/t/action-required-sign-in-with-twitter-users-must-whitelist-callback-urls/105342

これまではURLのチェックがなく、とりあえず入れていればなんでもOKでしたが、きちんとチェックするようになったということです。

![callback.png](https://qiita-image-store.s3.amazonaws.com/0/117024/598b4e8a-e9b1-b4c2-307f-716781e78911.png)

こんなふうに、今まではURLはなんでも良かったのです。

## 解決策

2018年6月13日以降はAPIを使用するアプリ側できちんとcallback時のURLを設定する必要があります。
アカウントを連携する時に返ってくるURLになります。

ちなみに開発環境においては、 `localhost`はNGでしたが、Vagrantで使用しているIPを使ってもOKでした。

実際のアプリでは正しくURLを指定する必要があります。
つまり`oauth/request_token`をリクエストする時の`oauth_callback`パラメータに入るurlを、Twitterの開発アカウントの設定画面のcallbackURLで設定したURLと一致していないとダメになりました。


詳しくはこちら
https://twittercommunity.com/t/application-oauth-callback-url-cant-be-whitelisted/105957
https://developer.twitter.com/en/docs/basics/callback_url
AWS Cloud9でHeroku CLIを使えるようにする

`AWS Cloud9`環境[^1]において、下記のコマンド[^2]を全部コピペして実行すると`Heroku CLI`が導入できます。

```bash:ターミナル
#　全てコピーして一度に実行
$ curl -OL https://cli-assets.heroku.com/heroku-linux-x64.tar.gz
tar zxf heroku-linux-x64.tar.gz && rm -f heroku-linux-x64.tar.gz
sudo mv heroku /usr/local
echo 'PATH=/usr/local/heroku/bin:$PATH' >> $HOME/.bash_profile
source $HOME/.bash_profile > /dev/null
```

上記コマンド実行後、`Heroku CLI`の導入に成功している場合は、
`$heroku --version`コマンドでバージョン情報が表示されます。

```bash:ターミナル
# Heroku CLIの導入に成功している場合はバージョン情報が表示される。
$ heroku --version
heroku/7.0.98 linux-x64 node-v10.4.1
```


[^1]: environment作成時に、特にカスタムせずに環境を作っている前提です。

[^2]: 実行コマンドについては、Rails Tutorialの`$ source <(curl -sL https://cdn.learnenough.com/heroku_install)`コマンドの中身を参考にしています。