OmniAICreator/Qiita-1.07M huggingface dataset:
javascript の class 構文を 1/2ぐらいマスターしよう！！！

# クラス
> ECMAScript 6 で導入された JavaScript クラスは、JavaScript にすでにあるプロトタイプベース継承の糖衣構文[^1]です。クラス構文は、新しいオブジェクト指向継承モデルを JavaScript に導入しているわけでは**ありません**。JavaScript クラスは、オブジェクトを作成して継承を扱うためのシンプルで明確な構文を用意します。

## 基本的な構文
### クラス宣言 ver.
```javascript
class Square {
	constructor(width, height){
		this.width  = width;
		this.height = height;
	}
}
```
### クラス式 ver.
```javascript:名前なし
let Square = class {
	constructor(width, height) {
		this.width = width;
		this.height = height;
	}
};
```

```javascript:名前つき
let Square = class Square {
	constructor(width, height) {
		this.width = width;
		this.height = height;
	}
};
```

###### 注意
関数宣言では、hostingされる (関数を書く前に呼び出してもOK) が、
クラス宣言(式)では、先に呼び出すとエラーとなってしまう。

```javascript:ダメな例
let s = new Square(); // Square クラスはまだ宣言されていない => ReferenceError

class Square {} // この場合ではクラス宣言だが、クラス式でも同じようにエラー
```

---

## メソッド(プロトタイプメソッド)[^2]
```javascript
class Square {
	constructor(width, height){
		this.width  = width;
		this.height = height;
	}

	get area() {
		return this.getArea();
	}
	getArea() {
		return this.width * this.height;
	}
}

let s = new Square(1280, 1024);
console.log(s.area);
```

---

## 静的メソッド
インスタンス化なしで呼ばれる。
インスタンス化していると呼べない。

```javascript
class Square {
	constructor(width, height){
		this.width  = width;
		this.height = height;
	}

	get area() {
		return this.getArea();
	}
	getArea() {
		return this.width * this.height;
	}
	static total(a, b){
		const aArea = a.area;
		const bArea = b.area;

		return aArea + bArea;
	}
}

let s1 = new Square(1280, 1024);
let s2 = new Square(1920, 1080);
console.log(Square.total(s1, s2));
```

---

## 拡張
```javascript
class Dog {
	constructor(name) {
		this.name = name;
	}
	speak() {
		console.log(this.name);
	}
}

class SuperDog extends Dog {
	speak() {
		console.log('私の名前は' + this.name + ' です。\nよろしくお願いします。');
	}
}
```

---

```javascript
function Dog (name) {
  this.name = name;
}
Dog.prototype.speak = function () {
  console.log(this.name);
}

class Dog extends Animal {
  speak() {
    super.speak();
    console.log('私の名前は' + this.name + ' です。\nよろしくお願いします。');
  }
}
```

---

## 親クラスの呼び出し
```javascript
class Dog {
	constructor(name) {
		this.name = name;
	}
	speak() {
		console.log(this.name);
	}
}

class SuperDog extends Dog {
	speak() {
		super.speak();
		console.log('私の名前は' + this.name + ' です。\nよろしくお願いしますワン。');
	}
}
```

---
　　
力尽きました。そろそろやめましょう。

# 参照
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes

[^1]: 複雑でわかりにくい構文を、よりわかりやすく、読み書きしやすい構文として書くことのできるもの。
[^2]: どのインスタンス(new してできたやつ)でも同じメソッドを使う場合に使うもの。**メソッドはコピーされるのではなく、参照される*。*
AWS アクセスキー IDとシークレットアクセスキー の情報をcredencialsファイルから取得するコマンド

aws-cliを使ったshell scriptを書いていて、ふと「credencialsから情報を取ればスクリプトの中にACCESS_KEYとかACCESS_SECRET_KEYを書かなくて良いな」と気付いたので、取れるようにしました。

以下、デフォルトの情報を取得するためのサンプルです。
なお、別ユーザの情報を取得したい場合は、sed の引数の `-n *p` の `*` に +3 していくと取得できます。

```bash:sample
$ CRED_FILE = /home/user/.aws/credentials
$ ACCESS_KEY=`/bin/cat $CRED_FILE | sed -n 2p | cut -d'=' -f2 | tr -d ' '`
$ ACCESS_SECRET_KEY=`/bin/cat $CRED_FILE | sed -n 3p | cut -d'=' -f2 | tr -d ' '`
$ echo $ACCESS_KEY
XXXXXXXXXXXXXXXXXXXX
$ echo $ACCESS_SECRET_KEY
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
```

ちなみにクレデンシャルファイルは.awsに配置されたままのフォーマットになっています。

```bash:
$ cat /home/user/.aws/credentials
[default]
aws_access_key_id = XXXXXXXXXXXXXXXXXXXX
aws_secret_access_key = XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
[user]
aws_access_key_id = ********************
aws_secret_access_key = ****************************************
```
後、awsからダウンロードしてきたcsvファイルから取得したい時は以下で可能です。

```bash:sample2
$ CRED_FILE = /home/user/.aws/credentials.csv
$ ACCESS_KEY=`/bin/cat $CRED_FILE | tail -1 | cut -d',' -f1`
$ ACCESS_SECRET_KEY=`/bin/cat $CRED_FILE | tail -1 | cut -d',' -f2`
$ echo $ACCESS_KEY
XXXXXXXXXXXXXXXXXXXX
$ echo $ACCESS_SECRET_KEY
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
```
ちなみにcsvファイルのフォーマットは、awsからダウンロードしたままのフォーマットになっています。

```bash:
$ cat /home/user/.aws/credentials.csv
Access key ID,Secret Access Key
XXXXXXXXXXXXXXXXXXXX,XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
```
以下のようなフォーマットの場合は cat の引数の `-d',' -f*` の `*` に +1 していくと取得できます。

```bash:
$ cat /home/user/.aws/credentials.csv
User Name,Access key ID,Secret Access Key
"user",XXXXXXXXXXXXXXXXXXXX,XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
```

「うまく動かない」、「もっとシンプルでスマートなやり方がある」などのご意見があれば、ぜひともいただきたいです。

ではこちらのコマンドが少しでも皆さんのお役に立ちますように。
BlutilityでStaticMeshのMaterialを一括置換するコマンドを作る

**この内容はUE4.20Preview1時点のものです**

UE4.20から、Blutilityも機能追加され、`ActorActionUtility`と`AssetActionUtility`を親クラスに選択できるようになりました。
今回は`AssetActionUtility`を使って、StaticMeshのマテリアルを一括置換するエディターコマンドを実装します。


# Blutilityの有効化

単に上記クラスを継承しただけではBlutilityにはなりません。
`Editor Preference > Experimental`でBlutilityを有効にしましょう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/a72b25db-c767-bbd2-c825-0aeab87f89d5.png)

# Blutilityクラスの作成

コンテンツブラウザ上でコンテキストメニューから`Blueprints > Blutility`を選択します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/23d2d759-b614-8752-5c34-941e20ac39c9.png)

親クラスは`AssetActionUtility`を選択します

![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/cf0091ea-3a55-e147-f8a2-d1db0666ad14.png)

# 実装

今回の仕様は以下のとおりです

- DataTableから定義を読み込む
    - 定義は「置換前のMaterial名」と「置換先のMaterial」の構造体
- 選択されたStaticMeshの全Materialを探索し、定義に一致するMaterial名であれば、Materialを置換する

![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/049c88e7-bcbc-6565-af2c-d03d630b9e93.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/3a200de9-687c-aa3f-f321-49ab43e5c45a.png)

## コマンドの実装

コマンドのBlueprintは以下のとおりです

![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/8512fc5e-a671-c62e-0bb4-abf3d14d11c3.png)

データテーブルのロード等に関しては特に言うことはは無いですが、
`Get Selected Assets`ノードを使えば、コンテンツブラウザ上で選択したAssetの配列を取得できます

![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/d7a5bcfa-9cc2-48e1-0d7d-0086eca9881f.png)


## コマンド対象の指定

今回はStaticMeshを対象にするので、他のAssetでこのコマンドが出たら困ります
Blutilityの`Get Supported Class`をOverrideすることで、このBlutilityの対象をStaticMeshに限定します

![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/cf4a3c09-0855-a3b7-d267-ebd9f8d70dae.png)


# 使い方

Materialを一括置換したいStaticMeshを選択し、コンテキストメニューを開きます
コンテキストメニューの`Scripted Actions`に、今回作ったFunctionがあるので、クリックして実行しましょう

![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/ffd7f38a-b1c2-312f-b86b-db65131a84c9.png)

複数のStaticMeshのMaterialが一括置換されました
![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/eb76e565-2c23-bf58-a544-2dc501fe3bb4.png)
運用中のプロジェクトでUnityのバージョンアップをする際にAssetBundle絡みで詰まった事

# 概要

運用中のプロジェクトでUnity 5.3から2017.4へバージョンアップをする際に、AssetBundle絡みで詰まった事などを書きたいと思います。
iPhoneX対応などで急遽アップデートを余儀なくされたプロジェクトの担当者の方々の救いになれば…

## バージョン選定について

- 5.4, 5.5あたりは割とバグが多くて地雷なので、やめておいたほうが良い
- 5.6と2017.4は実はあんまり変わらない説
  - 厄介なAPIの仕様変更などは大体5.6までで、アップデートの工数には大差無い
- 2017.4は2020年3月までサポートされる

以上の事から、今選ぶのであれば2017.4が最適なのかなと思います。

他にも、将来的にはGoogle PlayでAndroidの64bit対応も必須になる予定で、その時に恐らく2017.4か2018.3以降にアップデートする必要性があるので、長い目で見ると今のうちに2017系に上げておくのが良いのかなと…

参考：[Meeting Google Play requirements in the future – Unity Blog](https://blogs.unity3d.com/jp/2017/12/20/meeting-google-play-requirements-in-the-future/)

> We are also happy to share that our native 64-bit support for Android is in its final development stage and is being tested internally. We aim to make it public in Unity 2018.2 as a preview and expecting it to mature in time for full release in 2018.3 (which is expected to ship in Q4 2018), well before the requirement is enforced by Google Play.

# AssetPostProcessorの仕様変更

5.5, 5.6くらいでAssetPostProcessor周りのAPIが結構変わっています。
これのせいで、新しいバージョンで開くとアセットが意図しない設定で読み込まれ、Reimportでめちゃくちゃ時間が掛かったり、metaファイルに含まれている情報（Multiple Spriteの分割情報など）が失われたりします！！
そのため、アップデートの際は以下の手順を踏むことにしました。

1. AssetPostProcessorを使っているコードを完全に修正する
2. 一度全てのアセットのmetaファイルを前バージョンの状態に戻す
3. 全てのアセットをReimportする

AssetPostProcessor周りを修正する場合は、修正しながらReimportを繰り返し、**前のバージョンのインポート設定と見比べて変わっていないかチェックしながら行うと確実**です。

<img src='https://qiita-image-store.s3.amazonaws.com/0/97014/6658cda2-af7f-50bb-f9dd-03024654194d.png' width="300"> <img src='https://qiita-image-store.s3.amazonaws.com/0/97014/1ff2de46-ccad-731f-1700-3db29f824d65.png' width="300">

左が5.3、右が2017.4の画像です。インポート設定に差異が無いことが確認できます。

## Obsolateになったプロパティ

[TextureImporter\.lightmap](https://docs.unity3d.com/ScriptReference/TextureImporter-lightmap.html)、[TextureImporter\.normalmap](https://docs.unity3d.com/ScriptReference/TextureImporter-normalmap.html)がobsoleteとなっています。
これ、なんとプロパティに代入しようとすると勝手にTextureTypeがDefaultに変わったりするので地雷です。
非推奨になったプロパティはアクセスしないようにしておきましょう。

## TextureImporterFormatにDefault設定が無くなった

5.3ではDefault設定でテクスチャの圧縮形式を設定することができましたが、5.6くらいからはプラットフォームごとにしか設定できなくなりました。
プラットフォームによって対応形式が異なるので、当然のAPI変更ですね。
そのため、[TextureImporter\.textureFormat](https://docs.unity3d.com/ja/current/ScriptReference/TextureImporter-textureFormat.html)を使って設定していた場合は、**プラットフォームごとに設定するように書き換える必要があります**。

参考：[画像フォーマットを一括で設定したい【最新】 \- Roba Memo \- 素人のUnity覚書と奮闘記](http://robamemo.hatenablog.com/entry/2017/09/26/231925)

# AssetBundleのビルドについて

5.3と2017.4ではAssetBundleの互換性が無いため、全てのAssetBundleをビルドし直す必要があるのですが、その際に**前のバージョンでビルドしたAssetBundleを上書きする形でビルドしようとするとイマイチ上手くいかない**可能性があります！！
AssetBundleはビルド先に既にファイルが存在する場合にインクリメンタルビルドしてくれる機能があるのですが、どうもそれによって上手くいかないことがあったりします。（色々と試行錯誤していたので、何が原因なのかはハッキリと分からないのですが…）
そのため、完全な新規ビルドになるように、以下のいずれかの状態でビルドすると確実です。

- ビルド先をまっさらなディレクトリにする
- オプションに[BuildAssetBundleOptions\.ForceRebuildAssetBundle](https://docs.unity3d.com/ja/current/ScriptReference/BuildAssetBundleOptions.ForceRebuildAssetBundle.html)を付けてビルドする

# まとめ

- AssetPostProcessorの仕様変更が辛かった
- AssetBundleはForceRebuildしておくと安心

何度もビルドし直してめちゃくちゃ時間かかってしんどかったので、少しでもその手間が省けると幸いです…
Tableau WDC 2.0 Get Startしてみる

[Tableau WDC 2.0 Get Start](http://tableau.github.io/webdataconnector/docs/)

WDCとは、WebDataConnect。
Tableauからネット上でXMLやJSONといった形で公開されてるAPI（RESTとか）からデータを拾って、Tableauに突っ込む仕組み

事前準備
- Git
- node と nmp

WDCのSDKを取得
```
cd $WORKDIR
git clone https://github.com/tableau/webdataconnector.git
cd webdataconnector
```

シミュレータを動かす
```
cd $WORKDIR/webdataconnector
npm install --production
npm start
http://localhost:8888/Simulator/index.html
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/140981/efda6932-e1df-f6de-0c0b-091a44753eb7.png)

ここで、
URLには、 `../Examples/html/earthquakeUSGS.html` はいっていて、【ボタン】　　Start　Interactive　Phase
をクリックする

![image.png](https://qiita-image-store.s3.amazonaws.com/0/140981/14733219-d5e3-dfae-fa84-3f8bd3eeeae6.png)

【ボタン】Get Earthquake Data!

をクリックすると・・・

![image.png](https://qiita-image-store.s3.amazonaws.com/0/140981/469af21a-da47-239f-1a3d-320f11cd1930.png)
とでるので、
【ボタン】Fetch　　Table　Dataをクリック

![image.png](https://qiita-image-store.s3.amazonaws.com/0/140981/674a46cd-4ba1-0515-511d-83bcb8b5de87.png)
取り込まれる状態ができました
シェルスクリプトで30分前や30分後の時刻を求めるワンライナー

- richmikanさんの[utconv](https://qiita.com/richmikan@github/items/14e32d099bd9bcc7f8e8)を使います
- utconvは`YYYYMMDDhhmmss`という形式での入力を要求するが、区切り文字が無い数字の羅列は人間にとって見づらいので、任意の区切り文字付き（`YYYY-MM-DD hh:mm:ss` など）で入力したうえで、sedで区切り文字を削っている
- 出力もawkで区切り文字を付加している

```shell-session:30分前の時刻を求める
$ echo '2018-06-07 16:46:00' | sed 's/[-: ]//g' | utconv | xargs -IXXX echo "XXX - 30 * 60" | bc | utconv -r | awk '{print substr($0,1,4) "-" substr($0,5,2) "-" substr($0,7,2) " " substr($0,9,2) ":" substr($0,11,2) ":" substr($0,13,2)}'
2018-06-07 16:16:00
```

```shell-session:30分後の時刻を求める
$ echo '2018-06-07 16:46:00' | sed 's/[-: ]//g' | utconv | xargs -IXXX echo "XXX + 30 * 60" | bc | utconv -r | awk '{print substr($0,1,4) "-" substr($0,5,2) "-" substr($0,7,2) " " substr($0,9,2) ":" substr($0,11,2) ":" substr($0,13,2)}'
2018-06-07 17:16:00
```
【RSpec】はじめの一歩の小さなサンプルメモ（コマンドのみ）

# メモ

```zsh:作業メモ
 % rspec --init ★設定ファイル等作成
  create   .rspec
  create   spec/spec_helper.rb
 % vim spec/person.rb 
 $ vim spec/person_spec.rb ★specフォルダにテストファイルを記載する
 % ls spec/
person.rb  person_spec.rb  spec_helper.rb
 % rspec ★出力結果は例
..

Finished in 0.00339 seconds (files took 0.14739 seconds to load)
2 examples, 0 failures

```

# 参考

RSpec自体のインストールは以下がわかりやすい
https://qiita.com/leon-joel/items/eceddd6a21c615cfeb9a

ディレクトリ構造はspecフォルダの下の構造と、appかlibフォルダの下の構造を同期させる形にしてもよい
(これはRailsの場合だった)
Directory Structure - RSpec Rails - RSpec - Relish https://relishapp.com/rspec/rspec-rails/v/4-0/docs/directory-structure
lndのトラブルシューティング

BitCoinの高速決済を実現するライトニングネットワークの実装の一つである[lnd](https://github.com/lightningnetwork/lnd)のトラブルシューティング集です。随時更新予定

## lnd.confの読み込みに失敗する

エラーメッセージ: `loadConfig: either bitcoin.active or litecoin.active must be set to 1 (true)`

bitcoin.activeを設定しているにも関わらずこのエラーが発生することがある。
lnd.conf内に使用できないプロパティがある場合にこのメッセージが表示される。
おかしなプロパティがないか確認する。

## 入金したのにwalletbalanceに反映されない

mainnetで`lncli newbalance np2wkh`したアドレスに入金しても`lncli walletbalance`に全く反映されない事象が発生した。

lndを再起動したところwalletbalanceへの反映を確認できた。

## `lncli newaddress`や`lncli openchannel`がhangする

lndの再起動後などはブロックのrescanなどの処理が走りしばらく一定のコマンドは通らなくなる。それらの処理が終わるまで待ち続ければそのうちレスポンスが返ってくる。
Keepa APIのProduct Finderで条件にあったAmazonの商品を検索する方法(GAS ver.)

Keepa本家の解説ページ　https://keepa.com/#!discuss/t/product-finder/5473

#初めに
GETだと文字数が足りず、どうしてもPOSTでリクエストしたくて試行錯誤したのでうまくいったコードを載せておきます。

#サンプルコード
```keepa_product_finder_sample.gas.js
  const key = 'APIキーを入力してください';
  const queryJSON = {
    "perPage": 100, //最低50 この数値分検索結果を取得します
    "page": 0, //ページを指定します 例えばperpageが100の時、page=0なら検索結果の1~100番目が、page=1なら101~200番目の結果が返ってきます
    "productType" : 0,
    "rootCategory" : "2127209051", //ルートカテゴリで絞りたい場合は指定します　複数のルートカテゴリを同時に指定することはできません
    "title" : "ノートパソコン -Apple",//タイトルをキーワード検索します -だけでもOKです めちゃくちゃ長いキーワードを指定してもPOSTならいけます

    "avg90_NEW_gte" : 30000, //直近90日の新品価格の平均が30,000円以上
    "current_SALES_gte": 1000, //現在のランキングが1,000位以上
    "current_SALES_lte": 20000, //現在のランキングが20,000位以下
    "current_LISTPRICE_gte": 30000, //リスト価格(コンディションに関わらず全ての出品)が30,000円以下の商品を弾けます　→ 結果に30,000円以下の商品が結構含まれてて原因不明です…
    "isPrimeExclusive" : false //Primeでは無い商品も検索されますが、通常出荷とFBA出荷の両方の出品がある商品がマッチするのであって、FBA出品が0な商品だけで絞れるという訳では無いです
  };
  
  const request =  UrlFetchApp.fetch('https://api.keepa.com/query?domain=5&key=' + key,{
    'method' : 'post',
    'headers' : { 'Connection' : 'keep-alive' },
    'payload' : { 'selection' : JSON.stringify(queryJSON)}, //POSTするときはselectionキーにqueryJSONをString化して設定します
  });
  
  const response = JSON.parse(request.getContentText());
  const asinList = response.asinList; //条件にあったASINの配列
  Logger.log('この条件にマッチするASINの合計数: ' + response.totalResults);//マッチする商品数がperPageより多い場合、asinList.length = perPage ですが、totalResultsはそれ以上になります
```
Laravel で CSV のデータを表示

次のプログラムを改造して、CSV を表示します。
[Laravel で MariaDB のデータを表示](https://qiita.com/ekzemplaro/items/55a71c651102b7f1a2dc)

storage_path() というヘルバー関数を使います。

## 次のプログラムを差し替え

```php:app/Models/Cities.php
<?php
// --------------------------------------------------------------------
/*
	app/Models/Cities.php

					Jun/07/2018

*/
// --------------------------------------------------------------------
namespace App\Models;

use Illuminate\Database\Eloquent\Model;

// --------------------------------------------------------------------
class someclass
{
  var $id = "";
  var $name = "";
  var $population = "";
  var $date_mod = "";
  
  function do_something() {
    echo "メソッド内部から出力";
  }
}

// --------------------------------------------------------------------
class cities extends Model
{
  public function getData()
  {
	$file_csv = storage_path() . '/app/public/data/cities.csv';
	$data = array();

	$file = new \SplFileObject($file_csv); 
	$file->setFlags(\SplFileObject::READ_CSV);

	foreach($file as $line)
		{
		if(!is_null($line[0]))
			{
			$unit_aa = new someclass();
			$unit_aa->id = $line[0];
			$unit_aa->name = $line[1];
			$unit_aa->population = $line[2];
			$unit_aa->date_mod = $line[3];
			array_push($data,$unit_aa);
			}
		}
	return $data;
  }
}

// --------------------------------------------------------------------
```

## 次の CSV を配置

```bash
mkdir storage/app/public/data
```

```csv:storage/app/public/data/cities.csv
t1277,鴨川,42937,1921-4-19
t1276,我孫子,86123,1921-1-10
t1271,千葉,81236,1921-7-19
t1278,銚子,47625200,2018-5-20
t1272,勝浦,49561,1921-9-20
t1275,八千代,61459,1921-6-24
t1274,流山,76128,1921-2-31
t1279,市川,25978,1921-5-14
```

## 他には変更はありません。

## サーバーの起動

```bash
php artisan serve
```

## ブラウザーでアクセス
http://127.0.0.1:8000/sample/model/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/07a4d130-c10b-86fe-7e0d-0002638b2fbf.png)


## 確認したバージョン

```text
$ uname -a
Linux shimizu 6.2.0-32-generic #32-Ubuntu SMP PREEMPT_DYNAMIC Mon Aug 14 10:03:50 UTC 2023 x86_64 x86_64 x86_64 GNU/Linux

$ php --version
PHP 8.1.12-1ubuntu4.3 (cli) (built: Aug 17 2023 17:37:48) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.1.12, Copyright (c) Zend Technologies
    with Zend OPcache v8.1.12-1ubuntu4.3, Copyright (c), by Zend Technologies

$ php artisan --version
Laravel Framework 10.22.0
```
VS Codeのgo testに-vオプションを付ける方法

# もくてき

Go言語をVisual Studio Codeで開発してる方々は、ほぼ確実にGoっていうExtensionを使ってると思います。
これを使って、テストコードを書くと、エディタの上に"run test"という文字が出てきて、ここクリックするとそのテストだけ動かしてくれますよね。

![vscode_gotest.png](https://qiita-image-store.s3.amazonaws.com/0/54830/e2e25544-55d2-c845-e32c-4bb0fa5d7661.png)

↑で"run test"をクリックすると、なんにも表示されずに、ただsuccessすると思います。

![option付ける前.png](https://qiita-image-store.s3.amazonaws.com/0/54830/0d1136a0-69da-d890-6a1e-82b4a07f94eb.png)
(ファイルパスだけ隠してます。)

テストコードの確認をしている時に、デバッガ使うのも面倒ですし、でも途中で変数の内容表示させたり等、何か手軽にできないかなぁ？と思いまして、何とか"-v"オプションを付けようと、色々調べてみました。

# やったこと

先ず、[File] -> [Preferences] -> [Settings]でUser Settingsを開きます。
そして、User Settingsに、「"go.testFlags": ["-v"],」を追記します。

![user_settings.png](https://qiita-image-store.s3.amazonaws.com/0/54830/95779149-5695-2cd5-89ed-a52849c842d6.png)

これだけです。

# やってみた結果

こんな感じで、ちゃんと-v付きで実行してくれました。

![option付けた後.png](https://qiita-image-store.s3.amazonaws.com/0/54830/ef77436d-7792-7981-fd02-ab851667037d.png)
(ファイルパスだけ隠してます。)

# そもそも・・・

Visual Studio CodeのExtentionのSettingsは、Default User Settingsの方に初期値が入っていて、変更したい場合はUser Settings側にコピーして値を変えるという仕様でした。

GoのExtensionも↓の通り、Default User Settingsの中に入ってました。
![Default.png](https://qiita-image-store.s3.amazonaws.com/0/54830/bb189a78-f1ba-3730-2aea-42e47ae1603b.png)

それに気づかずに、Extensionsのメニューから何とか変えられないのかな？とか考えてしまったせいで、無駄に時間がかかりました。。。
Upload-Download File From S3 with Boto3 Python

#<b>INTRODUCTION</b>
Today we will talk about how to download , upload file to Amazon S3 with Boto3 Python.

#<b>GETTING STARTED</b>

Before we start , Make sure you notice down your S3 access key and S3 secret Key.

###<b>1. AWS Configure</b>
Before we could work with AWS S3. We need to configure it first.

- Install awscli using pip

```terminal
pip install awscli
```

- Configure

```terminal
aws configure
AWS Access Key ID [None]: input your access key
AWS Secret Access Key [None]: input your secret access key
Default region name [None]: input your region
Default output format [None]: json
```

- Verifies

```terminal
aws s3 ls
```

if you see there is your bucket show up. it mean your configure is correct. Ok, Now let's start with upload file.

###<b>2. Upload File</b>

```python
import boto3

bucketName = "Your S3 BucketName"
Key = "Original Name and type of the file you want to upload into s3"
outPutname = "Output file name(The name you want to give to the file after we upload to s3)"

s3 = boto3.client('s3')
s3.upload_file(Key,bucketName,outPutname)
```

###<b>3. Download File</b>

```python
import boto3
import botocore

Bucket = "Your S3 BucketName"
Key = "Name of the file in S3 that you want to download"
outPutName = "Output file name(The name you want to save after we download from s3)"

s3 = boto3.resource('s3')
try:
    s3.Bucket(Bucket).download_file(Key, outPutName)
except botocore.exceptions.ClientError as e:
    if e.response['Error']['Code'] == "404":
        print("The object does not exist.")
    else:
        raise
```
Seleniumで擬似要素を扱うためのTips

Seleniumを使ってE2Eテストを書いていると、たまに擬似要素（`::before`とか`::after`）に遭遇して困ることがある。

何が困るかというと、これらの擬似要素はCSSに使われる**擬似的な**要素であるため、SeleniumのWebドライバから直接いじることができないのである。
つまり、クリックしようと思っていても、擬似要素は直接クリックすることはできないのである。（下のコードはSelenide。）

```java:擬似要素をクリックしようとする
  $("button::before").click(); // クリックできない！
```

じゃあ、どうやってクリックすればいいかというと、その擬似要素を含む要素ごとクリックするという手がある。

```java:擬似要素を含む要素をクリックしようとする
  $("button").click();
```

これで上手くいけばハッピーなのだが、往往にして擬似要素を含む要素がinvisibleになっていて失敗する。
そういう時は仕方ないが、次のようにアドホックにブラウザ上での場所を指定してクリックするしかない。

```java:擬似要素を含む要素をクリックする
Actions actions = new Actions(WebDriverRunner.getWebDriver());
actions.click($("button")).build().perform();
// 場所をさらに細かく動かしたい人
actions.moveToElement($("button"), xOffset, yOffset).click().build().perform();
```

### 参考資料
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements
https://stackoverflow.com/questions/45427223/click-on-pseudo-element-using-selenium
https://www.quora.com/How-do-I-locate-After-and-Before-css-tag-in-selenium-webdriver
モバイルアプリ開発者向けの、画像アップローダー(サーバー側)のサンプル

モバイルアプリを作ってるときに、画像アップロード部分を先回りして実装したいということあると思います。
そこで簡単なサンプルを用意したので書きました。

またエラー時の処理とかも色々書きたいときもあると思うのでモバイルアプリ側指定したHTTPステータスを返すようになっています。

## 出来ること

* 画像アップロードができる
* ステータスをモバイルアプリ側が指定できる（開発用、デバッグ用）
    * 「開発時に必ずエラーにして、エラー処理をしっかり確認したい！」とか、そういう要望あるとおもって。

## ソースコード(PHP)

```index.php
<?php
    $myHeader = $_SERVER['HTTP_X_SAMPLE_ERROR_HEADER'];
    if($myHeader){
        $status = (int)$myHeader;
        http_response_code($status);
    } else {
        http_response_code(200);
    }

    if(is_uploaded_file($_FILES['up_file']['tmp_name'])){
        if(move_uploaded_file($_FILES['up_file']['tmp_name'],"./".$_FILES['up_file']['name'])){
            header('content-type: application/json; charset=utf-8');
            echo json_encode(array($_FILES['up_file']['name']));
            return;
        }else{
            echo json_encode("error while saving.");
        }
    }
?>

<!DOCTYPE html>
<html lang="ja">
<body>
<form action="" method="POST" enctype="multipart/form-data">
    <input type="file" name="up_file">
    <input type="submit" value="upload">
  </form>
</body>
</html>
```

## 使い方

### 準備
1. サーバーを立てる。（AWS EC2 t2.micro等）
2. PHPの実行環境を整える
    * AmazonLinuxでしたら、これが参考になりそうなドキュメント https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/install-LAMP.html
3. ソースコードを配置(例えば `/var/www/html/` )
4. permissionを適切に設定
    * アップロードされるファイルは、index.phpと同じ所にUploadされます。

### 呼び出し方

* Method: POST
* Request Header: `X-SAMPLE-ERROR-HEADER` に数字を入れると、statusはその数値に設定してくれる
    * 未指定は200を返す。
    * 500を指定すると、500で返してくる（画像アップロード出来た/出来ないに関係なく）
* Request Body `up_file` でファイルを送信
* Response body: ファイル名のJSONが配列で帰ってきます。
Nestのインストールと実行

## Nestとは
NestとはNode.jsのサーバーサイドアプリ構築用フレームワークで、Angularから影響を受けTypeScriptで構築されています。サーバーサイド版Angularの様なイメージでしょうか。

[ドキュメント](https://nestjs.com/)曰く、「すぐに使用できるアプリケーションアーキテクチャの提供を目指していて、テスト可能でスケーラブルであり、疎結合で簡単に保守可能なアプリケーションを手軽に作成できる」とあります。

## インストール
[ドキュメント](https://docs.nestjs.com/)に沿ってインストールしてみます。ドキュメントには「CLI」「GIT」「NPM」の3パターンありますが、今回は「GIT」で落とします。

    $ git clone https://github.com/nestjs/typescript-starter.git app
    $ cd app
    $ npm install

## アプリ実行
[前回構築したDocker+NodeJS環境](https://qiita.com/tailix/items/e98f2637b3ee2edf3044)のマウントしたappフォルダにクローンし、コンテナを起動すると下記の様なログが出力され起動します

	2018-06-07T03:23:20.117293200Z 
	> nest-typescript-starter@1.0.0 start /home/node/app
	> ts-node -r tsconfig-paths/register src/main.ts
	2018-06-07T03:23:20.122012200Z 
	[Nest] 21   - 6/7/2018, 3:23:27 AM   [NestFactory] Starting Nest application...
	[Nest] 21   - 6/7/2018, 3:23:27 AM   [InstanceLoader] AppModule dependencies initialized +6ms
	[Nest] 21   - 6/7/2018, 3:23:27 AM   [RoutesResolver] AppController {/}: +17ms
	[Nest] 21   - 6/7/2018, 3:23:27 AM   [RouterExplorer] Mapped {/, GET} route +5ms
	[Nest] 21   - 6/7/2018, 3:23:27 AM   [NestApplication] Nest application successfully started +1ms

私は「Docker for Windows」を使用してるので、デフォルトのlocalhost「http://localhost:3000 」に接続。

何とも簡素な「Hello World!」が確認できました。
<img src="https://qiita-image-store.s3.amazonaws.com/0/262751/f7f7ca8a-c705-cfe7-e840-346ed6384b55.png" width=50%>

## まとめ
Nestは標準でTypeScriptが使え、Fastifyなども組み込めたりして個人的に面白そうなフレームワークだと思っています。
なのでこれから色々いじって記事に出来たらと思います。
MojaveのSafari v12でsafariextzを利用する

手持ちのMacbook 2016にMojave Betaを入れてみたのですが、Safariに入れていたuBlock Originが動かなくなりました。
どうやらMojave + Safari v12だとsafariextzがサポートされなくなるみたいです。
App StoreにあるExtensionを使えって言われます。
でも、App Storeにあるブロッカーって有料のしかないんですよ。
だからなんとかuBlock Originを動かす方法を模索しました。
AdBlockやμBlock、そのほかsafariextzで配布されてるExtensionなら同じことができると思います。

# 必要なもの
- safariextzファイル
    - これがないと始まりません
- xar解凍ソフト
    - xarコマンドが使えます
    - The UnarchiverでもOKです

今回は以下でダウンロードできるuBlock Originのsafariextzファイルを利用しました
https://github.com/el1t/uBlock-Safari/releases

Mojaveアップデート前にExtensionをインストールしていたなら
~/Library/Safari/Extensions
にsafariextzファイルが残っているので、それが使えます

# インストール
## safariextzを展開
ターミナルで

```
xar -xvf uBlock0.safariextz
```

とするか、
safariextzファイルの拡張子をxarに変換してThe Unarchiverなどで開けば展開できます。

## Extensionsフォルダに移動
展開してできたフォルダを
~/Library/Safari/Extensions
に移動しましょう。

この作業、必要なわけじゃないのですが、展開したフォルダを消してしまうとインストールした機能拡張が消えるので、普段は開かないフォルダに置いておきたかっただけです。

## Safariで読み込み
### 開発メニューを表示させる
既にメニューバーに開発メニューが表示されてる人は"機能拡張ビルダーで読み込み"まで飛ばしてください

Safariの環境設定を開き、詳細タブを開くと一番下に「メニューバーに"開発"メニューを表示」という項目があるのでチェックを入れてください

<img width="914" alt="スクリーンショット 2018-06-07 15.59.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/242402/e0701981-74f0-daac-c127-4a13addff37a.png">

### 機能拡張ビルダーで読み込み
開発メニューに「機能拡張ビルダーを表示」という項目から機能拡張ビルダーを開きます。
<img width="353" alt="スクリーンショット 2018-06-07 16.02.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/242402/04d7a916-6f21-01e1-dbdd-c9120a590856.png">

左下の+ボタンから「機能拡張を追加」を選び、
~/Library/Safari/Extensions
にあるsafariextzを展開してできたディレクトリを選択します。

<img width="729" alt="スクリーンショット 2018-06-07 16.06.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/242402/5de76dc0-2600-1059-1bcd-e235485a8859.png">

<img width="859" alt="スクリーンショット 2018-06-07 16.08.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/242402/9a1d1baa-8388-fcad-a5d6-298fed9b6653.png">

ちなみにこのフォルダ選択画面でも"Command + Shift + G"のショートカットが使えるのと、このフォルダ選択画面にFinderからファイルやディレクトリをドラッグ&ドロップするとその項目が選択されるので、これら使うと選択が楽になります。

<img width="807" alt="スクリーンショット 2018-06-07 16.11.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/242402/f745a834-cf5a-1b7f-d5e1-087511008859.png">

その後、右上のRunをクリックして、実行するためにパスワードを入力すれば完了です。

# 注意事項

Safari機能拡張証明書のないものは、Safariを再起動させると止まります。
その場合、Safariを起動する度に機能拡張ビルダーを表示させてRunさせる必要があります。
とても不便です。
特にSafari使う必要ない人は素直にChromeやVivaldi使ったほうがいいでしょう。
vagrant box作成手順

## VagrantでVMを管理する

### centos6.9のminimal版をインストール
[VagrantでオリジナルBoxを作成する](https://qiita.com/sims0728/items/306cf0434046296459b5#iptablesの無効化)
インストールに関しては上記を参考する

### ネット繋がらせる、eth0設定行う
```
/etc/sysconfig/network-scripts/ifcfg-eth0
上記のファイルの ONBOOT = yes へ変更  service network restart でネットワーク再起動
```

### パッケージインストール事前準備
```
yum update -y  ( 既存のパッケージが古いのせいか、更新しないとシェル失敗 )
```

### libselinux-pythonもインストールしておく
```
selinuxがdisabledで無い場合、「libselinux-python」がインストールされていないと、
ansible実行時に下記のエラーが出る。

msg: Aborting, target uses selinux but python bindings (libselinux-python) aren't installed!
```

### guest Additionsインストール必要なパッケージ追加
yum install -y gcc make kernel-devel

### virtualbox-guest-additionsのインストール
[参考リンク](https://qiita.com/sims0728/items/306cf0434046296459b5#virtualbox-guest-additionsのインストール)
[guest-addition iso](http://download.virtualbox.org/virtualbox/)
実行失敗したら、再起動してみる

### vagrantユーザー作成(.ssh/authorized_keysも作る)
以下は大事、そのせいで二日ハマった、vagrantが上手いことやってくれると思って、public keyが最初から入れていなかった
```
curl -k -L -o authorized_keys 'https://raw.github.com/mitchellh/vagrant/master/keys/vagrant.pub'
```

### vagrantユーザーのroot権限を与える
visudoでNOPASSWD: ALL 。。。追加する

### 掃除
yum clean all

### box作成
* vagrant package --base xxxでbox作成   // 勝手にxxxの名前のVMをbox作成してくれる
* vagrant box add --name xxxx package.box  // vagrantへ登録する

### vagrant init && up ( vagrant box list )
FlutterのVisualDebuggingが便利

Flutterでは、**Visual Debugging**が簡単にできます。

このVisual Debuggingを使うことで、各widget間の関係が一目で分かるだけでなく、**margin(padding)の方向も分かる**(topなのか、bottomなのかなど)のがとても便利だなぁと思いました。

**HotReload**と組み合わせればさらに便利です。
([こちら](https://www.youtube.com/watch?v=1UZ6686QsOw)はHotReloadのYoutubeでのデモです)

Visual Debuggingを使うには、main.dartに以下の**２行を追記**します。
**それだけです**。

```dart
//追加１　rendering libraryをインポートします
import 'package:flutter/rendering.dart';

void main() {
  //追加２ debugPaintSizeEnabledをtrueにします
  debugPaintSizeEnabled=true;
  runApp(new MyApp());
}
```

[Building Layouts in Flutter](https://flutter.io/tutorials/layout/)に従ってコードを書くと以下のレイアウトが完成しますが、
![Simulator Screen Shot - iPhone X - 2018-06-07 at 15.31.41.png](https://qiita-image-store.s3.amazonaws.com/0/214755/793ff59f-aa96-5188-2197-f306ca07a5fd.png)





先ほどのVisualDebuggingを適用すると、こうなります



![Simulator Screen Shot - iPhone X - 2018-06-07 at 15.38.12.png](https://qiita-image-store.s3.amazonaws.com/0/214755/104d4b41-b594-ff1f-3656-5dbbb5075bac.png)


*本来はbodyに```ListView```を使っていますが、ListViewですと(スクロール方向を示すために？)かなり目立つ矢印がど真ん中にドーンと表示されて邪魔なので、ListViewの箇所だけ```Column```に置き換えています。

各Widgetの枠が青線で縁取られていたり、margin(padding)の範囲が少し水色？で塗りつぶされていたりと、**各widget間の関係がわかりやすくなっています**。

ちなみに以下の箇所ですが、
![lakes-icons-visual.png](https://qiita-image-store.s3.amazonaws.com/0/214755/800cadf0-e341-40c2-ae80-8e99135a9b60.png)
```CALL```とそのアイコンとの間が水色で塗りつぶされていて、**```CALL```側が濃い青色**になっています。
これは、**margin(padding)の方向を示して**いて、ここでは```CALL```に対して、Androidのxmlでいう```paddingTop```が指定されていることになります。

```dart
return new Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Icon(icon, color:color),
        Container(
          //上のIconとの間にマージンを指定している
          margin: EdgeInsets.only(top: 8.0),
          child: Text(
            label,
            style: TextStyle(
              fontSize: 12.0,
              fontWeight: FontWeight.w400,
              color: color,
            ),
          ),
        )
      ],
    );
```

そのため、例えば```Icon```を```Container```で囲って、このContainerに対して` margin: EdgeInsets.only(bottom: 8.0) `を指定すると、レイアウトは変わらず、今度はアイコン側に濃青が表示されます。

![Simulator Screen Shot - iPhone X - 2018-06-07 at 15.56.12.jpg](https://qiita-image-store.s3.amazonaws.com/0/214755/948c0e6d-c4b4-019c-d0fc-62d5db46e4df.jpeg)

このように、paddingやmarginがtopなのかbottomなのかなども一目でわかるため、デバッグがしやすくなります。

今回は```debugPaintSizeEnabled```をtrueにしましたが、他にもいくつか種類があるようです。
詳細は[こちらのFlutterのページ](https://flutter.io/debugging/#visual-debugging)をご確認ください。

なお、
>ListViewの箇所だけ```Column```に置き換えています

と書きましたが、ListViewのままだとこのようになります。
**下にスクロールできるぜー！**というのが強調されている感じだと思います。
![Simulator Screen Shot - iPhone X - 2018-06-07 at 16.15.03.png](https://qiita-image-store.s3.amazonaws.com/0/214755/473c9a23-a3d2-ac7e-df26-3a6ca6be087f.png)
unittest.mock.patch と assert_not_called を一緒に使うのはアンチパターンかもしれない

※ まったくPythonテスト初心者が語っていることなので、デタラメの可能性が高いです

なんとなくpatchとか使ってユニットテスト書いていたら、「バリデーションエラーのときには、APIクライアントを叩きに行かないこと」って試験を書いてpassしているのに実際にはAPI通信しにいってる！！！みたいなことになってしまった。

[そんなpatchで大丈夫か? (mockについてのメモ〜後編〜)](https://qiita.com/FGtatsuro/items/eb2b05ff56f3599a1248) を見つけてようやく原因がわかったわけだが、わりとハマった。

## サンプルコード

伝わるかはわからないけど、なんとなくサンプルコードで説明してみる。

```py:main.py
import re

class AwsClient:
  def __init__(self, gcm_token):
    self.gcm_token = gcm_token

  def get_sns_key(self):
    print("通信するお:", self.gcm_token)


def register(gcm_token):
  if re.match("^[a-z]+$", gcm_token):
    AwsClient(gcm_token).get_sns_key()
  else:
    print("ERROR")


if __name__ == "__main__":
  register("abc")
  # => 通信するお: abc

  register("123")
  # => ERROR
```

で、バリデーションエラーのときのunittestは以下のように書いたとする。

```py:test_main.py
import unittest
from unittest.mock import patch

from main import register, AwsClient

class TestMain(unittest.TestCase):
  def test_get_sns_key_is_not_called_on_validation_error(self):
    with patch("main.AwsClient") as mockClient:
      register("123")
      mockClient.get_sns_key.assert_not_called()
```

これは当然passする。

```
$ python3 -m unittest discover
.
----------------------------------------------------------------------
Ran 1 test in 0.002s

OK
```

## 何が問題か？

patch()で**意図していないものをモックしていて、そいつのメソッドが呼ばれないことを確認してしまってる**ということに気づくのが難しい。

```py:落ちてほしいのだけど通ってしまう
class TestMain(unittest.TestCase):
  def test_get_sns_key_is_not_called_on_validation_error(self):
    with patch("main.AwsClient") as mockClient:
      register("abc")
      mockClient.get_sns_key.assert_not_called()
```

"abc" のときにはget_sns_keyは呼ばれてほしいので↑はfailするはずなんだけど、passになってしまう。

```py:passしてほしいのだけど落ちてしまう
class TestMain(unittest.TestCase):
  def test_get_sns_key_is_not_called_on_validation_error(self):
    with patch("main.AwsClient") as mockClient:
      register("abc")
      mockClient.get_sns_key.assert_called_once()
```

逆もまた然り。

## どうするとよい？

とくに私のような初心者は、 `patch.object()` を使って、文字列指定ではない方法でモック対象を指定するとよさそう。

```py:patch.objectを使う
  def test_register(self):
    with patch.object(AwsClient, "get_sns_key") as mockMethod:
      register("123")
      mockMethod.assert_not_called()
```
Galaxy の Planemo Virtual Applianceを利用する その2

[Galaxy の Planemo Virtual Applianceを利用する その1](https://qiita.com/percipere/items/91bfe30aa5eca58e7ec5)でPlanemo Virtual Applianceの利用方法と入力ファイルと出力ファイルがそれぞれ1ファイルの場合の処理方法に触れた

以下はDocker を利用したPlanemo Virtual Applianceの中での操作

## 入力ファイルが複数の場合

入力ファイルが2つで、出力ファイルが1つの例を考える

入力ファイルの作成

```
# seq 1 9 > target1.txt
# seq 11 19 > target2.txt
# paste target1.txt target2.txt > result.txt
```

target1.txtには各行に1から9までの数字、target2.txtには各行に11から19までの数字
この2つのファイルのそれぞれの行の数字をタブ区切りで並べた1つのファイルを作るためのGalaxyのxmlファイルを作成する

2つの入力ファイルを処理する場合には、`--example_input`を2回指定すれば良い

```terminal
# planemo tool_init --force \
--id 'paste' \
--name 'Paste two files to one (paste command)' \
--example_command 'paste target1.txt target2.txt > result.txt' \
--example_input target1.txt \
--example_input target2.txt \
--example_output result.txt \
--test_case
Tool written to paste.xml
Copying test-file target1.txt
cp 'target1.txt' 'test-data'
Copying test-file target2.txt
cp 'target2.txt' 'test-data'
Copying test-file result.txt
cp 'result.txt' 'test-data'
```

## lint

作成されたxmlの構文をplanemo lintでチェックする

```terminal
# planemo lint paste.xml 
Linting tool /opt/galaxy/tools/planemo/twofiles/paste.xml
Applying linter tests... CHECK
.. CHECK: 1 test(s) found.
Applying linter output... CHECK
.. INFO: 1 outputs found.
Applying linter inputs... CHECK
.. INFO: Found 2 input parameters.
Applying linter help... WARNING
.. WARNING: Help contains TODO text.
.. CHECK: Tool contains help section.
.. CHECK: Help contains valid reStructuredText.
Applying linter general... CHECK
.. CHECK: Tool defines a version [0.1.0].
.. CHECK: Tool defines a name [Paste two files to one (paste command)].
.. CHECK: Tool defines an id [paste].
.. CHECK: Tool targets 16.01 Galaxy profile.
Applying linter command... CHECK
.. INFO: Tool contains a command.
Applying linter citations... WARNING
.. WARNING: No citations found, consider adding citations to your tool.
Applying linter tool_xsd... CHECK
.. INFO: File validates against XML schema.
Failed linting
```

lintでWarningが出力されているが、理由は[Galaxy の Planemo Virtual Applianceを利用する その1](https://qiita.com/percipere/items/91bfe30aa5eca58e7ec5)のそれと同じなので、ここではそのままテストを実行
`...`部分は省略

```terminal
# planemo test paste.xml 
...
All 1 test(s) executed passed.
paste[0]: passed
```

テストが成功した

入力ファイルや出力ファイルの数に応じて、`planemo tool_init`に下記の

- `--example_input` 入力ファイル
- `--example_output` 出力ファイル

オプションをそれぞれ必要な数だけ繰り返し指定すれば良い

今日はここまで:smile:
Android Studio

※自分のメモ用に書いています
環境:Windows10 Android Studio 3.1.2

今回はダイアログの作成とデザインモードでの作成

---
初めにダイアログ作成のために新規プロジェクトを作成してsample.xml内にListViewを追記する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/249288/8cb595e9-2931-e921-744f-957921a2323c.png)
次にActivity.java内にリスト内で使うデータとそのデータをリストの各行に当てはめるアダプタオブジェクトを追記する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/249288/8334b0a9-ade6-12c7-7959-82af928190ba.png)
次にString.xml内にダイアログ内で使用する文字列を追記する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/249288/e8488835-c9d3-c278-6af0-79440a61d2ae.png)
最後にダイアログを生成するクラスを作成して、その中にダイアログで使用するタイトルやメッセージ、ボタンを設定する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/249288/2bed6b1b-9274-9dee-e5c1-fe261cfd0d71.png)

---
次にデザインモードで画面作成をする。
初めに画面作成で使用する文字列を定義する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/249288/093d1ad5-dbc6-cba6-b906-fce66b610e7f.png)
次にデザインモードでタイトル、名前のラベルと記入欄、メールアドレスのラベルと記入欄、お問い合わせのラベルと記入欄、送信などのボタンの配置を設定する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/249288/77b4a3b8-be1f-7ffa-d635-d8b7d70712b2.png)
xmlのText内部
タイトルと名前のラベル。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/249288/edec1f37-2fd4-e4d8-2b8b-2c53cfb0f3f9.png)
名前の記入欄とメールアドレスのラベルと記入欄。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/249288/01c429dc-9c65-3ba9-98c3-921c884604cf.png)
お問い合わせのラベル
![image.png](https://qiita-image-store.s3.amazonaws.com/0/249288/c7132f32-ff50-6739-05ad-36e3291a788d.png)
お問い合わせの記入欄とボタン ボタンはグループ化してある
![image.png](https://qiita-image-store.s3.amazonaws.com/0/249288/98db7ac3-8cd6-497f-3246-6e6f1674ac5b.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/249288/245860ed-2ab2-bb66-c8db-1bbcd7280050.png)
MackerelでローカルマシンのGPU負荷を監視する

## 概要

* deep learningでGPUをぶん回している時にどの程度の負荷がかかっているか監視したい。
* Mackerelの公式プラグインでGPUの監視もできる。

設定方法を書き残しておきます。

## 前提

* OS: Ubuntu18.04
* GPU: Nvidia GTX 1080

## Mackerelのセットアップ

まずは、Mackerelのアカウントを作って監視したいマシンにエージェントをインストールします。

この時点で、CPUやメモリ、ストレージなどが監視できるようになりますが、GPUは監視できていません。

## mackerel-pluginsのインストール

Mackerelには様々なプラグインが存在します。
公式からリリースされている`mackerel-plugin-nvidia-smi`を使うと、GPUが監視できるようになるので、これを使います。

インストール手順はここに書いてあります。
https://mackerel.io/ja/docs/entry/howto/mackerel-agent-plugins

Ubuntuならこうですね。

```shell
$ sudo apt install mackerel-agent-plugins
```

## mackerel-plugin-nvidia-smiの有効化

先程インストールされた`mackerel-plugins`に含まれる`mackerel-plugin-nvidia-smi`を有効化していきます。

プラグインを有効にするためには、設定ファイルを更新して、agentを再起動します。

## 設定ファイルのpath

設定ファイルは、デフォルトでは`/etc/mackerel-agent/mackerel-agent.conf`にあります。

参照: https://mackerel.io/ja/docs/entry/spec/agent

## 設定値のサンプル

このファイルに、`mackerel-plugin-nvidia-smi`を有効にする設定を追記します。どんな内容を追加すべきかはプラグインのREADMEにサンプルが書いてあります。

```toml
[plugin.metrics.nvidia-smi]
command = "/path/to/mackerel-plugin-nvidia-smi"
```

参照: https://github.com/mackerelio/mackerel-agent-plugins/tree/master/mackerel-plugin-nvidia-smi

## 実際に設定する値

`command =`のpathがサンプルになっているので、ここは書き換えましょう。
先程`apt`でインストールしたコマンドのpathを`which`で調べます。

```shell
$ which mackerel-plugin-nvidia-smi 
/usr/bin/mackerel-plugin-nvidia-smi
```

結果として、以下の値をconfに追記します。

```toml
[plugin.metrics.nvidia-smi]
command = "/usr/bin/mackerel-plugin-nvidia-smi"
```

## agentの再起動


追記したらagentを再起動します。

```shell
$ systemctl restart mackerel-agent
```

## GPUの負荷状況を見る

しばらくすると、mackerel.ioのシステムメトリクスの下に**カスタムメトリクス**という項目が現れて、GPUのファンスピードやメモリ使用量や温度などのステータスが見れるようになります。

見れなかったらmackerel-agentのログを見て異常が起きてないか確認ましょう。

```shell
sudo journalctl -u mackerel-agent.service
```

以上です。
エバーノート　タグを使いこなせ。

#エバーノートでどんどんフォルダーを作っていけるか？
この調査ではたくさんのノートを作っているとどんどんまとめたくなってきます。
そのときノートブックをつくってそこに統合するのですのが、またどんどんすすめていくとノートブックも多くなってきます。

いくつかのノートブックをまとめることができる機能をstackとよびます。

英語での検索

>Stack of Stack in Evernote 

この機能を応用すればStackのStackまで作れると思ったのですが機能が見つかりません。
それもそのはず現状としてはエバーノートはスタック　スタックの機能がありません。[こちらい](https://discussion.evernote.com/topic/101070-creating-a-stack-within-a-stack/)

##タグを使いこなせば無限スタック生成
タグはエバーノートではグループのようにあつかえます。
あるノートはこのグループに入るけどこっちは違うなど階層化していくと不便なことがあります。
それを解消するには各ノートごとにポジションをつける作業です。

これを行うと実質無限ヒエラルキー階層化が完成するのです。

##問題点
エバーノートの公式ホームページからスタックスタックがない理由の参考文献を見つける
タグの活用を考える


これら2つは新たな調査として独自にスタートしていきます。この調査はエバーノートノートの各プロジェクトの調査のスタックから調査中、調査済みの　調査中のノートブックにまとめられています。すぐにプロジェクト化をするのが大変なので暫定的にグーグルキープで項目別に管理します。


次回　グーグルキープとエバーノートを連動すると流れが加速する。
ライティングめも


https://docs.unity3d.com/jp/current/Manual/Lights.html




## Lightコンポーネント

### Bake

https://docs.unity3d.com/ja/current/Manual/LightMode-Baked.html

負荷を下げるためにライトを焼く。

まず、ゲームオブジェクトをstaticに変更することで事前計算ライティングを有効にする。

LightコンポーネントのModeをMixedかBakedにする。
シーンを再生してライトの位置を動かしたとき、
Mixedの場合、その場に光が留まりつつ、リアルタイムに移動する光も確認できる。
Bakedの場合、光は一切動かない。




> 参考
[Unity5でライトを焼く](http://tsubakit1.hateblo.jp/entry/2015/05/05/133903)

### SoftShadowとHardShadow

SoftShadow: リッチ（負荷高い）
HardShadow: ラフ（負荷低い）

### Culling Mask

ライトを当てたいレイヤーを指定して、一部のレイヤーだけにライトが当たるようにできる

> 参考
[Unity3D:ライトを特定のオブジェクトのみに当てる](http://narudesign.com/devlog/unity3d-light-culling-mask/)





## グローバルイルミネーション（GI）

https://docs.unity3d.com/jp/current/Manual/GIIntro.html
https://docs.unity3d.com/ja/current/Manual/GlobalIllumination.html

Enlightenをベースとした広域照明

> 参考
[Introduction to Unity 5 Lighting workshop - Part 1](https://www.youtube.com/watch?v=7fI3MBMSR5k)
[【Unity】Unity5のリアルタイムGI と LightProbe](http://tsubakit1.hateblo.jp/entry/2015/08/03/005303)


### Lighting Settings

Window > Lighting > Settings
GIの詳細な設定を行う

#### Environment Lighting

環境光を何にするか。Skybox、グラデーション、単色が選べる。

#### Environment Reflections

世界が何を反射しているか。




## ライトプローブ

https://docs.unity3d.com/ja/current/Manual/LightProbes.html

GIによる光の影響をベイクした情報を格納する

主な用途は、動的なオブジェクトに疑似ライティングを行うこと

ライトマップ　：静的ゲームオブジェクトを照らす
ライトプローブ：動的なライトのゲームオブジェクトを照らす





## リフレクションプローブ

https://docs.unity3d.com/jp/current/Manual/ReflectionProbes.html
https://docs.unity3d.com/jp/current/Manual/class-ReflectionProbe.html

Light > Reflection Probe

この位置なら周りの景色がこのように映るはずだよね、という情報を記録しておく

![スクリーンショット 2017-10-27 20.15.18.png](https://qiita-image-store.s3.amazonaws.com/0/136286/efa82c09-e6b5-82b6-343e-9fa088ff3d54.png "スクリーンショット 2017-10-27 20.15.18.png")

TypeをRealtimeにすることで、動的オブジェクトに対応できるようにする
Refresh ModeはOn Awakeで最初の一瞬だけ記録する。
一方、たとえば回転している壁をリアルタイムに反映したい場合は、
Refresh ModeをEvery Frameにする必要があるが負荷が高い。
Box Sizeは反射したい部分だけ適宜調整しないと、不要な部分まで反射してしまうので注意。

二箇所にリフレクションプローブを設置
![スクリーンショット 2017-10-27 19.51.08.png](https://qiita-image-store.s3.amazonaws.com/0/136286/f6efe372-6680-fd52-a9fb-31a4be3ac669.png "スクリーンショット 2017-10-27 19.51.08.png")

キャラのMetalicとSmoothnessを最大値にすると、
あたかもリアルタイムに壁の色を反射しているかのような表現ができた。
![スクリーンショット 2017-10-27 20.12.03.png](https://qiita-image-store.s3.amazonaws.com/0/136286/77a08448-b5fc-2792-3df6-2cb2d81b792b.png "スクリーンショット 2017-10-27 20.12.03.png")
![スクリーンショット 2017-10-27 20.12.36.png](https://qiita-image-store.s3.amazonaws.com/0/136286/84988ba2-f95c-52a9-1992-eed4ffd796d9.png "スクリーンショット 2017-10-27 20.12.36.png")



## ライティングの影響を受けない

https://docs.unity3d.com/ja/current/Manual/shader-Performance.html

Shaderを `Unlit/Texture` に変更する。

Unlit: すべてのライトとシャドウイングを完全にバイパスするレンダリング
[MySQL] よく使うけどたまに忘れるお役立ちクエリのメモ

## 全テーブルのレコード数
```sql
SELECT table_name, table_rows FROM information_schema.TABLES
```

## 列情報の取得

```sql
SELECT table_name, column_name, data_type FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_SCHEMA = '[DB名]' ORDER BY TABLE_NAME;
```

## 実行中の書き込みクエリ
```sql
SELECT `time`, `info` FROM information_schema.PROCESSLIST WHERE `state` = 'update';
```

## UNIX TIMEへ変換
```sql
SELECT unix_timestamp(now());
SELECT unix_timestamp('2010-01-01 11:22:33');
```

## datetime型へ変換
```sql
SELECT from_unixtime(1292120553);
SELECT from_unixtime(unix_timestamp());
```
環境構築

# localに開発環境構築する場合
## brew
## rbenv
rubyのversionは.ruby-versionで確認　

rbenv versions
rbenv install 2.5.1
rbenv local 2.5.1

## bundlerのinstall
gem install bundler

## postgresql
brew install postgresql

## postgresqlの起動
pg_ctl -D /usr/local/var/postgres start

## imagemagick
brew install imagemagick

## 新規の場合
### railsのinstall
gem install rails
通らない場合はsudoつける

## 起動
rails new プロジェクト名 --database=postgresql
bundle install
bundle exec rake db:create
bundle exec rake db:migrate
bundle exec rails s

### 新規じゃない場合
git clone
git clone プロジェクト名
bundle install
yarn install

pg_ctl -D /usr/local/var/postgres start

bundle exec rake db:create

bundle exec rake db:migrate

bundle exec rake db:seed

bundle exec rails s
Railsでiframeの表示を許可したい

Railsでiframeで呼ばれるwidgetを作っていたのですが、Railsアプリにはデフォルトで以下のオプションが付いてます。

```bash

X-Frame-Options SAMEORIGIN
```


X-Frame-Optionsとはなんぞや？という方はこちら。
https://developer.mozilla.org/ja/docs/Web/HTTP/X-Frame-Options


この設定のままだと、自身のドメインからしかiframeを表示できないので、application_controllerで以下の記述を入れていきます。

## すべてのURLから許可する場合
```Ruby
response.headers['X-Frame-Options'] = 'ALLOWALL'
```

## 特定のURLからのみ許可する場合
```Ruby
response.headers['X-Frame-Options'] = 'ALLOW-FROM http://example.com'
```
mailコマンドのメール一覧をスクロールするショートカットはzとz-

ページングorスクロールのショートカットはヘルプには出ていないが`z`と`z-`。

> If there is more than a screenful of messages, then z will show the next screenful, and z- will show the previous screenful. 

How to use the Unix command-line mail tool
http://www.johnkerl.org/doc/mail-how-to.html
Lumberyardに触れる(3)-文字表示編

※2018年1月18日時点の情報です
[←　Lumberyardに触れる(2)-インストール編](https://qiita.com/OrotiYamatano/items/81db95cf326da0b77a06)　　　　　[Lumberyardに触れる(4)-インプット編　→](https://qiita.com/OrotiYamatano/items/4ced9ec6fbd9b85b51ea)

#はじめに
今回はタイトル文字を表示していきます。
Lumberyardでの2DUIはどの様に実装するのかの勉強になると思います。

#UIエディタ
ゲーム上のUIはUIエディタという機能を使って生成出来ます。
メニューやボタンなどのインタフェース要素やコンポーネントを作成、カスタマイズ、アニメーション出来ます。
https://docs.aws.amazon.com/ja_jp/lumberyard/latest/userguide/ui-editor-using.html

UIエディタはキャンバスの概念を使用してます。
2DUIの板を作った上で、その板を表示させる制御をすることでUIを表示させることが出来ます。
早速、作成していきましょう。

#UIエディタの設定
Tools>UI Editorをクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/f4c80379-2dab-7e57-2f4e-d0882aba2711.png)

Hierarchyで右クリック、New>Element form Library>Textを選択してテキストを追加します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/396b9b02-bcb9-ee6e-6d40-828c015812c6.png)

今回は表示文字、文字サイズと色を設定していきます。
設定は下のように変更すれば良いです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/ba23e56e-d727-d13b-5cd9-5601fade73ac.png)

設定が済んだら名前をつけて任意のフォルダに保存します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/d2aa7e4d-df57-2174-1500-bb4f20827ab4.png)

もしメニューのような動的な物を作りたい場合は以下を参考してください。
https://docs.aws.amazon.com/ja_jp/lumberyard/latest/userguide/ui-editor-components-dynamic.html

#UI表示
UIを表示する方法はいくつかあります。
今回は初回読み込み表示します。

Entity Outlinerにて右クリックCreate Entityをして名前をつける。
右のEntity InspectorにてAdd ComponentでUI Canvas Asset Refを追加、Canvas pathnameにて先程保存したキャンバスを指定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/a1dd0d80-e2c8-efba-2b7b-2ab00f1ca2ca.png)

実行すると保存したキャンバスの表示が確認できるはずです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/922a0b6b-7c36-8a7f-abe6-2f89198f5290.png)

#まとめ
UIエディタに触れ、テキストを表示しました。
画像一つを表示したい場合は不便そうですが、
メニューのような画面を作成する場合便利そうな機能ですね。
次回はクリックを検出するインプットについてやっていきます。
カラムのNot Null制約を外すには引数にnull: trueを指定しないとダメ

## 結論

NN制約のないカラムにNN制約をかけるときはmigrationの`down`メソッドに`null: true`と書く必要はないが、NN制約を外す場合はmigrationの`up`メソッドに`null: true`を明示しなければならない。

## カラムにNN制約をかけたい

```sh
$ bin/rails g migration ChangeColumnToNotNull
```

```Ruby:db/migrate/2018xxxxxxxxxx_change_column_to_not_null.rb
class ChangeColumnToNotNull < ActiveRecord::Migration[5.1]
  def up
    change_column :users, :name,:string, null: false
  end

  def down
    change_column :users, :name,:string
  end
end
```

`null: true`と書く必要はありません。


## カラムにかけたNN制約を外したいとき

```sh
$ bin/rails g migration ChangeColumnToAllowNull
```

```Ruby:db/migrate/2018xxxxxxxxxx_change_column_to_allow_null_.rb
class changeColumnToAllowNull < ActiveRecord::Migration[5.1]
  def up
    change_column :users, :name,:string, null: true # null: trueを明示する必要がある
  end

  def down
    change_column :users, :name,:string, null: false
  end
end
```

`null: true`と書く必要があります。

## 理由
Railsでは、カラムのデフォルトは`null: true`(NN制約なし）です。
このため、NN制約をかける際にmigrationの`down`メソッドに`null: true` と書く必要はありません（デフォルト値が入る）。

しかし、いったん`null: false`にしたあと`null: true`にしたいときは明示する必要があります。

[ActiveRecordの下記の実装](https://github.com/rails/rails/blob/89bcca59e91fa9da941de890012872e8288e77b0/activerecord/lib/active_record/migration/command_recorder.rb#L196)がヒントでした。

```Ruby:rails/activerecord/lib/active_record/migration/command_recorder.rb
196        def invert_change_column_null(args)
197          args[2] = !args[2]
198          [:change_column_null, args]
199        end
```

2番目の引数が`true`だったら`false`に、`false`だったら`true`にするので、引数に`null: true`または`null: false`を指定する必要があります。