OmniAICreator/Qiita-1.07M huggingface dataset:
Android に Firebase Crashlytics 導入後、署名付き APK を作れなくなった

# 背景
Android のエミュレーターでは正常に動作するのに、実機で起動するとクラッシュするという事象が発生し原因を調査していました。

それの原因は別エントリーで書く予定ですが、今回はそれ以前の話として Crashlytics を導入することにしました。

# 手順

公式ドキュメントより

- [Get started with Firebase Crashlytics](https://firebase.google.com/docs/crashlytics/get-started?platform=android)

詳細は上記に記載されているので割愛しますが、簡略して書くと下記のとおりです。

##### 1. `build.gradle` （app じゃないほう）の dependency に以下を追加

```/build.gradle
buildscript {
    ...
    dependencies {
        ...
        classpath 'com.google.gms:google-services:4.3.3'
        classpath 'com.google.firebase:firebase-crashlytics-gradle:2.1.1'
    }
}
```

##### 2. `build.gradle` （app のほう）に以下を追加

```app/build.gradle
apply plugin: 'com.google.firebase.crashlytics'
```

```app/build.gradle
dependencies {
    ...
    implementation 'com.google.firebase:firebase-analytics-ktx:17.4.2'
    implementation 'com.google.firebase:firebase-crashlytics:17.0.0'
    ...
}
```

##### 3. 実行する

エミュレータ上ですが、問題なく実行できました。
実機の方は USB ケーブルが腐ってて端末を認識できず動作未確認ですが、今回の問題は別の話です。



# 署名付き APK を作成しようとする

Android Studio 上で 

- `Build` > `Generate Signed Bundle / APK` 

を選択して APK を作成します（Bundle にはまだ未対応）。

### エラーその１

```console.
Could not resolve Firebase Google app ID, cannot upload mapping file
```

？？

結論から言うと、[さっきのドキュメント](https://firebase.google.com/docs/crashlytics/get-started?platform=android)に以下のような記載があり

> <img width="791" alt="Screen Shot 2020-06-02 at 23.40.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647246/67de91c3-2be4-2943-5e36-e52a144b1fbe.png">

自分がやった手順では最後の 

- `apply plugin: 'com.google.firebase.crashlytics'` 

しか追加してなかったのですが、その上の行に薄〜く書いてある

- `apply plugin: 'com.google.gms.google-services'`

も追加する必要がありました。

#### エラーその１解決

`build.gradle` に

```app/build.gradle
apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services'
apply plugin: 'com.google.firebase.crashlytics'
```

がちゃんと全部あるかどうか確認。

それを追加して再度実行します。

### エラーその２

今度は

```
Host name may not be empty
```

というのが出ました。一体何のことだ！？

これも結果だけ言うと、公式ドキュメントを読み進めて、別のページを参考にしました。

- [Get deobfuscated crash reports with the Firebase Crashlytics SDK](https://firebase.google.com/docs/crashlytics/get-deobfuscated-reports?platform=android)

このエラーは、 proguard（難読化）を有効にしている場合に起きるようです。

実際、ステージング向けに `minifyEnabled false` （proguard 無効）な環境では、この段階で署名付き APK の作成に成功しています。

今回失敗したのは proguard 有効な環境です。 

#### エラーその２解決

`minifyEnabled true` な環境では、以下の設定も一緒に追加する必要があるようです。

```app/build.gradle
    release {
        ...
        minifyEnabled true
        firebaseCrashlytics {
            mappingFileUploadEnabled false
        }
    }
```

ここまでで、リリース版の署名付き APK の作成に成功しました。

今回は Crashlytics の導入までですが、この後に起きた問題はまた別件として記載していく**予定**です。
子要素を親要素の中央に設置する方法【CSS】

#子要素を親要素の上下左右で中央寄せする方法【CSS】


参考リンク：[子要素を親要素内で上下左右中央寄せさせる方法](https://takayamato.com/block-centering/)

```css:css
.parent{
  position: relative;
}

.child{
  position:absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```

こうすることで親要素の中にある子要素を親要素の中央に設置することができた。
Recipe: LiveData.observe with NonNull 

### Problem

```kotlin
  viewModel.order.observe(viewLifecycleOwner, Observe {  
      it?.let { applyCurrentOrder(it) }
  })
```
toooooo many redundant code for just observe NonNull object with `LiveData`.

# Ingredients
1. `lifecycle-livedata-ktx` version 2.1.0 or higher
2. Kotlin

# Metod
#### First.
Add a dependency `lifecycle-livedata-ktx` in `app/build.gradle`.


```gradle
    dependencies {
        def lifecycle_version = "2.1.0" // or higher
        ...
        implementation "androidx.lifecycle:lifecycle-livedata-ktx:$lifecycle_version"
        ...
    }
```

#### Second.(Optional)
If your project not apply Java8 yet.
add below in `app/build.gradle`.

```kotlin
android {
      ..
      compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
      }
      // For Kotlin projects
      kotlinOptions {
        jvmTarget = "1.8"
      }
    }
```


#### Third.

Implements your `ViewModel`(AAC) class as code below.

```kotlin
class MyOrderViewModel: ViewModel() {
  private val _order: MutableLiveData<Order> = MutableLiveData()
  val order: LiveData<Order> get() = _order
  ..
  // Important: don't update _order directly in other class. just call function.
  fun updateCurrentOrder(order: Order) {
    _order.value = order
  }
}
```

#### Fourth.
Observe data your `Activity`/`Fragment` class with `ktx`(important!!!).

```kotlin
// You must add LivedData.observe Kotlin extension function.
import androidx.lifecycle.observe

class MyOrderFragment: Fragment(R.layout.my_fragment) {
  private val viewModel: MyOrderViewModel by viewModels()

  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    // No longer need to write just like viewModel.order.observe(viewLifecycleOwner, Obseve{})
    viewModel.order.observe(viewLifecycleOwner) {
        // No need null check
        applyCurrentOrder(it)
    }
  }

  fun applyCurrentOrder(order: Order) {
    ..
  }
}
```

# Additional Technique (Alternately)

If you already wrote a lot of `MutableLiveData` instead of `LiveData`, you can also do the following. 

```kotlin

interface MyOrderViewModel {
  val order: LiveData<Order>
}

class MyOrderViewModelImpl: ViewModel(), MyOrderViewModel {
  override val order: MutableLiveData<Order> = MutableLiveData()
  ..
  fun updateCurrentOrder(order: Order) {
    this.order.value = order
  }
}
```

```kotlin
import androidx.lifecycle.observe

class MyOrderFragment: Fragment(R.layout.my_fragment) {
  private val viewModel: MyOrderViewModel by viewModels<MyOrderViewModelImpl>()
  ..
}
```


# More Information
about lifecycle: https://developer.android.com/jetpack/androidx/releases/lifecycle
about java8: https://developer.android.com/studio/write/java8-support
Remove-Itemで、複数のフォルダを削除対象外にしたい

# 背景
日次で特定フォルダの配下を消そうと考えたが、一部の複数フォルダは残したい気分になったので、除外（Exclude）オプションを調べてみたところ、単一の除外しか見当たらなかったので、試してみた。
## 最低限、こんな感じで動きそう。

``` powershell:powershell
$delFolder = “c:¥work¥delTerget¥*”
$excludeItem = “除外フォルダ名1” , “除外フォルダ名2”
Remove-Item $delFolder -Exclude $excludeItem
```

`-Exclude `オプションに除外対象の配列を教えてあげれば、汲み取ってくれるらしい。
  
とはいえ、スクリプト化する事を考えると、除外対象は直書きしたくない。直すの面倒だし。
別ファイルに除外対象を記載して、読み取るようにしてみた。

``` powershell:powershell
$delFolder = “c:¥work¥delTerget¥*”
$excludeFile = “.¥exclude.txt”
$excludeItem = ( Get-Content $excludeFile )

Remove-Item $delFolder -Exclude $excludeItem
```

``` file:exclude.txt
除外フォルダ名1
除外フォルダ名2
```

ついでに、削除後の確認とかTest-Path使う時も同じように`-Exclude`オプションが使えるみたい。便利

``` powershell:powershell
Test-Path $delFolder -Exclude $excludeItem
```
Remove-Item後に上記Test-Pathを実行すると、除外対象フォルダが存在していても、`False`を返してくれる。

# おまけ1
`-Exclude`オプションはアスタリスク指定も出来るみたい。

``` file:exclude.txt
*外フォルダ*
```

# おまけ2
`-Exclude`オプションで指定する値について
タイトルにフォルダの•••って書いちゃったけど、フォルダとかファイルとかは関係なさそう。　　
その文字列に該当するオブジェクトを除外している模様。　　
おまけ1で書いた条件で実行すると、除外フォルダ名1.txtも削除から除外される。

#最後に
`-Include`オプションで、配列指定があったので、出来るだろって思ってやったらできた。
試すって大事
historyコマンドに日時を付与し、全ユーザのhistoryファイルをスクリプトで収集する

# 概要
linuxで手取り早く操作ログを取得する方法として、ユーザの`~/.bash_history`に日時を付与することで対応しました。

# 設定
historyコマンドを実行すると過去に実行したコマンドの履歴を見ることが出来ますが、日時がないのでいつ実行されたのか分かりません。
そこで、`~/.profile`に以下の一文を追記します。

```
HISTTIMEFORMAT='%y/%m/%d %H:%M:%S ';
```
`~/.profile`に記述すると個別アカウントごとに設定出来ますが、今回は全体に適用させたいので`/etc/profile.d/history.sh`に記述します。


|設定ファイル|	利用法|	例|
|:-----|------------------:|:------------------:|
|~/.profile|・ログイン時にそのセッション全体に適用するものを記述する|シェルの種類に依存しないものを記述する|・環境変数など
|~/.bashrc|bashでしか使わないものを記述する|エイリアス
|シェルオプション|プロンプト設定|~/.bash_profile|~/.profileと同じに使えるが、bashのみで有効

こちらの記事を参考にしました。
[Linux: .bashrcと.bash_profileの違いを今度こそ理解する](https://techracho.bpsinc.jp/hachi8833/2019_06_06/66396)

# 取得スクリプト
ユーザごとのファイル名が`~/.bash_history`で同じなので、ユーザごとのフォルダを用意した上で以下のようなスクリプトでコピーしてきます。

```sh

#!/bin/sh
#user1を作業ユーザとし、コピー前に作業フォルダの前回ファイルを削除する
sudo find /home/user1/log/ -name ".bash_history" -type f -print | xargs rm -f

#user1,user2,user3のファイルをuser1のlogフォルダにコピーする
for a in "user1" "usesr2" "user3" ; do

sudo cp -f /home/$a/.bash_history /home/user1/log/$a/;

done
```

# 結果
このような形のファイルが取得出来ます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252317/22caca90-9fbf-7d59-f9e6-a40944df687b.png" width=50%>
VimのチートシートをVim内に表示するコマンド作ってみた

Vimのコマンドを調べるのに、わざわざブラウザ立ち上げたりとか、PDFのチートシートを開いたりとかが面倒だったので、Vim内にチートシートを表示するコマンドを作ってみた。

# こんな風に動くよ

Vimの編集モードで`:Cheat`と入力すると、、、
<img width="822" alt="image1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141460/99d20ef9-a05f-a111-48d8-6c9d7485e299.png">


ウインドウを分割し、チートシートが表示される！（ReadOnlyで）
<img width="822" alt="image2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141460/dfcb52b5-fac5-0579-0bed-be7c5a78005f.png">

それだけです。シンプルイズベスト。
ちなみに、`:q`で終了し元の編集ファイルに移動する。

# コード

以下を`.vimrc`に追加する。
（チートシートのファイル名は適宜変更ください）

```VimL
" :Cheatコマンド
function! Cheat()
  :vsplit
  :wincmd w
  execute 'view' '~/.vimcheatsheet.md'
endfunction
:command! Cheat call Cheat()
```

ちなみに、下記環境です。

* Vim version 8.1.2292
* MacOS Catalina 10.15.4

# 感想

プラグインでもっと高機能なものもありそうだけど、
まずはこれくらいのシンプルさでやってみようかなと思います。
Machines Learning 学习笔记(Week8)

# Unsupervised Learning

## Clustering: K-means Algorithm

<img width="1000" alt="Screen Shot 2020-06-03 at 23.14.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620849/4b823860-5eba-bc05-749a-1381a2dfe66e.png">


### K-means Algorithm:
 0. randomly initialize K cluster centroids $\mu_1,\mu_2,...,\mu_K$
 1. cluster assignment: for i=1:m, $c^{(i)}$:=index of cluster centroid closest to x(i)
 2. move centroid: for k=1:K, $\mu_k$:=average (mean) of points assigned to cluster k

- Input:
 - K(number of clusters)
 - Training set {$x^{(1)},x^{(2)},...,x^{(m)}$} 

- K-means Optimization Objective:

```math
min\,J(c^{(1)},...,c^{(m)},\mu_1,...,\mu_K) = \frac{1}{m}\sum_{i=1}^m||\,x^{(i)}-\mu_{c^{(i)}}||^2
```

 - $c^{(i)}$ = index of cluster (1,2,...,K) to which example x(i) is currently assigned
 - $\mu_k$ = cluster centroid k
 - $\mu_{c^{(i)}}$ = cluster centroid of cluster to which example x(i) has been assigend

### Random Initialization
- should have K < m
- randomly pick K training examples
- Set $\mu_1,...,\mu_K$ equal to these K examples

For i = 1:100 { 

Randomly initialize K-means

Run K-means. Get $c^{(1)},...,c^{(m)},\mu_1,...,\mu_K$

Compute cost function (distortion) $J(c^{(1)},...,c^{(m)},\mu_1,...,\mu_K)$
 
}

=>Pick clustering that gave lowest cost J

## Dimensionality Reduction: Principal Component Analysis (PCA)
Purposes:

- To reduce the dimension of the input data so as to speed up a learning algorithm
- To compress data to reduce the memory of disk space
- To visualize high-dimensional data (by choosing k=2 or 3)

<img width="1090" alt="Screen Shot 2020-06-03 at 23.05.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620849/95ae637b-9eb3-6211-4eee-9999b1ea6bf0.png">

### PCA Algorithm

- Data Preprocessing(feature scaling/mean normalization)
- Compute "covariance matrix"

```math
Σ(Sigma) = \frac{1}{m}\sum_{i=1}^n(x^{(i)})(x^{(i)})^T
```

- Compute “eigenvectors” of matrix Σ(Sigma):
[U,S,V] = svd(Sigma);

- $U_{reduce} = U(:, 1:k)$
- z = $U_{reduce}'*x$


### Reconstruction from compressed representation
$X_{approx} = U_{reduce} * Z$

### Choosing the number of principal components k
<img width="888" alt="Screen Shot 2020-06-03 at 23.13.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620849/5c07f3f8-9a9a-a201-0481-84423a33579c.png">
[Rails]ECサイトのカート機能

#はじめに
Ruby on RailsでECサイトを作成しました。
その際、カート機能の実装でかなり時間を費やしたので、やり方を記載してみようと思います。

#前提条件
カート機能を持たせるためには、DBにテーブルが必要になってきます。
他テーブルとの関連付けなどについては以下の記事にて記載しております。
[[Rails] ECサイトのDB設計](https://qiita.com/kenzo-ta/items/4a3b0e0f0d4f37bb2dd8)

#カート機能の根幹の部分
ここでは、セッションを作成します。

セッションについては、以下の記事がわかりやすいです。
[【Rails】Sessionの使い方について](https://qiita.com/ozackiee/items/4ee774c81b2a0c571c05)

要は、データを保持してくれる仕組みですね。
で、このカートのセッション作成は以下のようにコーディングしました。

```ruby
# application_controller.rb
class ApplicationController < ActionController::Base

private
  #セッションの作成
  def current_cart
    # セッションから取得したcart_idを元にCartテーブルからCart情報を取得
    current_cart = Cart.find_by(id: session[:cart_id])
    # Cart情報が存在しない場合、@current_cartを作成
    current_cart = Cart.create unless current_cart
    # 取得したCart情報よりIDを取得し、セッションに設定
    session[:cart_id] = current_cart.id
    # Cart情報を返却
    current_cart
  end
end
```

ここで定義した"current_cart"を他のcontrollerでも使用していきます。

#カートに商品を入れていく

ここからは先ほど作成したメソッドをcarts_controllerで使用していきます。

```ruby
class CartsController < ApplicationController
  before_action :set_line_item, only: [:add_item, :destroy]
  before_action :set_user
  before_action :set_cart

  def show
    @line_items = @cart.line_items
  end

  def add_item
    @line_item = @cart.line_items.build(product_id: params[:product_id]) if @line_item.blank?
    @line_item.quantity += params[:quantity].to_i
    if @line_item.save
      redirect_to current_cart
    else
      redirect_to controller: "products", action: "show"
    end
  end

  def destroy
    @cart.destroy
    redirect_to current_cart
  end

  private
  def set_user
    @user = current_user
  end

  def set_line_item
    @line_item = current_cart.line_items.find_by(product_id: params[:product_id])
  end

  def set_cart
    @cart = current_cart
  end
end

```

add_itemアクションですが、商品詳細ページに"カートに入れる"ボタンを設置しており、POSTのHTTPメソッドでカートに商品の追加をしています。

```ruby
@line_item = @cart.line_items.build(product_id: params[:product_id]) if @line_item.blank?
```
上記ですが、buildメソッドを使用しています。
buildはnewのエイリアスですが、慣例として関連付けされたモデルのオブジェクトを生成する際には、buildを使い、それ以外でnewを用いるという使い分けがされているらしいです。

今回はcartが親、line_itemが子の関係なので、line_itemモデルのオブジェクトを生成したいためにbuildを使用したということです。（間違ってたらごめんなさい）

基本的にここまででカートとして機能しているかと思います。

#因みに

solidusというgemを使用すれば、秒でECサイトを作成できます。

参考記事↓
[Spreeの後継ECシステム、Solidusのインストールメモ](https://qiita.com/yuskamiya/items/4edf7dc763c079f393ee)

試しに使ってみましたが、カスタマイズがだるそうです。
目的によっては使ってみるのもアリかもですね。
「grub-efi-amd64-signed パッケージを /target/ にインストールするのに失敗しました。」の対処法

# はじめに
久々にUbuntu18.04をインストールしようとしたところ、

```
grub-efi-amd64-signed パッケージを /target/ にインストールするのに失敗しました。GRUBブートローダーなしでは、インストール
```

というエラーが発生してインストールが完了せず、ネットに書いてる情報を様々試しても一向に改善せずに苦戦したため、解決策をまとめます。

# 環境
- PC: Microsoft Surface Book 2
    - CPU: Core i7 8650U @1.9GHz
    - RAM: 16 GB
    - SSD: 2TB
    - OS: Windows 10 HomeとUbuntu 18.04のデュアルブート環境

# 対処方法
## ブートローダーをインストールしない設定でUbuntuをインストール
Ubuntuのインストールディスク(USB)から`Try Ubuntu`で起動させ、下記コマンドを実行。

```
sudo ubiquity -b
```
するとインストール画面が出てくるので、通常通りインストール。
インストールを終えたら次へ

## ブートローダーのインストール
下記部分は環境に合わせて変更してください
- {UBuntuをインストールしたパーティション} : sda2など
- {EFIパーティション}：sda1など

### 新しくインストールしたファイルシステムを`/mnt`にマウント
```
sudo mount /dev/{UBuntuをインストールしたストレージ} /mnt
```
```
sudo mkdir /mnt/boot/efi
```
```
sudo mount /dev/{EFIパーティション} /mnt/boot/efi
```
```
for i in /dev /dev/pts /proc /sys; do sudo mount -B $i /mnt$i; done
```

### `efivars`モジュールを読み込む
```
sudo modprobe efivars
```

### `grub-install`を再インストール
```
sudo apt-get install --reinstall grub-efi-amd64-signed
```
```
sudo grub-install --no-nvram --root-directory=/mnt
```

### `/mnt`をrootに変更し、Grubを更新
```
sudo chroot /mnt
```
```
update-grub
```

### インストールしたブートローダーを移動してリネーム
```
cd /boot/efi/EFI
```
```
cp -R ubuntu/* BOOT/
```
```
cd BOOT
```
```
cp grubx64.efi bootx64.efi
```
最後に再起動

# 参考
https://askubuntu.com/questions/1028703/the-grub-efi-amd64-signed-package-failed-to-install-target
マイグレーション実行時にmysqlでユーザーを作成していなかった為エラー

###マイグレーション実行時エラー


laravel7で新しくプロジェクトを作成したので
とりあえずマイグレーションの実行ししてみたら


エラー発生

```php
  SQLSTATE[HY000] [1045] Access denied for user 'user_name'@'172.20.0.4' (using password: YES) (SQL: select * from information_schema.tables where table_schema =table_name and table_name = migrations and table_type = 'BASE TABLE')
```

##原因
ただ単に.envに設定したユーザーとパスワードを登録していなかっただけ


##解決方法
mysqlでユーザーを作成をする

```sql
create user 'user_name' identified by 'pass';
```

権限の確認
新規作成したユーザには
何も権限がないことを意味するUSAGEが付いている

```sql
mysql> show grants for user_name@'%';
+---------------------------------------+
| Grants for phper@%                    |
+---------------------------------------+
| GRANT USAGE ON *.* TO `user_name`@`%` |
+---------------------------------------+
1 row in set (0.00 sec)
```

全てのDBが対象となるグローバル権限【CREATE権限】の付与

```sql
GRANT SELECT, INSERT, UPDATE, DELETE, CREATE, DROP, RELOAD, PROCESS, REFERENCES, INDEX, ALTER, SHOW DATABASES, CREATE TEMPORARY TABLES, LOCK TABLES, EXECUTE, REPLICATION SLAVE, REPLICATION CLIENT, CREATE VIEW, SHOW VIEW, CREATE ROUTINE, ALTER ROUTINE, CREATE USER, EVENT, TRIGGER ON *.* TO 'user_name'@'%' WITH GRANT OPTION;
```


実行後もう一度マイグレーションを実行したら成功
PEP 612 (Parameter Specification Variables) を読んだよメモ

Microsoft の Python 向け型チェッカーの [pyright](https://github.com/microsoft/pyright) の README を流し読みしていたら、初めて聞く PEP が登場したシリーズ第二弾です。
今回は [PEP 612 (Parameter Specification Variables)](https://www.python.org/dev/peps/pep-0612/) について書きます。

## 概要

* 汎用のデコレータを書こうとすると、型を書くのが非常に難しい
* **指定された関数と同じ引数を持つ関数** を表現する方法がほしい

## アプローチ

* `ParameterSpecification` という引数を表す型を追加すると解決する

引数を表す型として `ParameterSpecification` を追加する。
`ParameterSpecification` は `Callable` と一緒に用いることで callable object のジェネリクスっぽく振る舞うことができる。 `TypeVar` の引数版と考えるとわかりやすい。


## 例

以下の例では `add_logging()` の引数は `Callable[Ps, R]` 型で、返り値も同じく `Callable[Ps, R]` 型である。つまり、引数として指定された関数と同じインターフェースの関数を返すデコレータである。

そのため、 `@add_logging` でデコレートされた `foo()` は `(x: int, y: str) -> int` 型のままである。

```py
from typing import Callable, ParameterSpecification, TypeVar

Ps = ParameterSpecification("Ps")
R = TypeVar("R")

def add_logging(f: Callable[Ps, R]) -> Callable[Ps, R]:
    def inner(*args: Ps.args, **kwargs: Ps.kwargs) -> R:
        log_to_database()
        return f(*args, **kwargs)

    return inner


@add_logging
def foo(x: int, y: str) -> int:
    return x + 7
```

`ParameterSpecification` 型が導入されない場合、こういったデコレータに型をつけることは難しい。

## 感想

* 幸いなことにこれまでデコレータに型をつけることがなかったので気づかなかったが、確かに `ParameterSpecification` がないと適切な型がつけられない
* `ParameterSpecification` という名前はちょっと長いが、特に代案は思いつかなかったの仕方ない…
* 引数をいじるタイプのデコレータはこの PEP では扱わないとされているので、全てが解決ではないのが残念
* まだ Draft なので採用は決まってません
Qiskit: 任意の状態を作成する回路が作りたい！！

# はじめに

任意の状態を作成する回路を簡単に作りたい！と思うことはありませんか？
例えば...

```math:
\frac{|0>+|1>}{\sqrt{2}}
```

まあ，これは簡単ですね．以下の回路で作成できます．

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558839/0ef466a2-24cb-db70-c9bc-a98114484404.png)

しかし，Hadamard gateを知らなくてもこの状態を作成することができるツールがあるのです！
それが，StateVectorCircuitです．

# StateVectorCircuit

先ほどの状態を作る回路をStateVectorCircuitを用いて作成してみましょう．

まずは，使用するパッケージをimportします．

```python:
import numpy as np
from qiskit.aqua.circuits import StateVectorCircuit
from qiskit import QuantumCircuit, QuantumRegister, ClassicalRegister, execute
from qiskit import BasicAer
from qiskit.visualization import plot_histogram
```

次に今回作りたい状態を定義

```python:
state = [1 / np.sqrt(2), 1 / np.sqrt(2)]
```

これをStateVectorCircuitに入力します．

```python:
svc = StateVectorCircuit(state)
```

ここには二つの値が格納されています．

```python:
print(svc._num_qubits)
# 1
print(svc._state_vector)
# [0.70710678 0.70710678]
```

ここではまだ回路は作成されていないので，construct_circuitを行います．

```python
qc = svc.construct_circuit()
```

作成された回路がこれ

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558839/22e20c2d-86b8-1a33-3f82-12e7e295965c.png)

では実際に実行して結果を見てみましょう．

```python
cr = ClassicalRegister(1)
qc.add_register(cr)
qc.measure([0], [0])
num_shots = 10000
backend = BasicAer.get_backend('qasm_simulator')
results = execute(qc, backend, shots=num_shots).result()
counts = results.get_counts(qc)
plot_histogram(counts1)
```

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558839/083b54de-99e6-b114-2430-32e27d9df1df.png)

ふむ．良い感じですね．

ちなみに，勝手にnormalizeしてくれるので例えば

```python:
state = [100, 100]
```

とかでも対応してくれます．
もちろん複数qubitsでも大丈夫なのです．

# まとめ

今回は何かと便利そうなStateVectorCircuitを紹介しました．
ちなみに使用しているQiskitのバージョンが古いとerrorを吐くかもしれません．qiskit自体が日々進化していますからね．
ReactのCSS

# CSS Modules
- CSS のローカルスコープを JavaScript を用いて自然な形で利用できるようにした ライブラリ

```css
/* style.css */ 
.common {
  font-size: 10px; 
} 

.normal {
  composes: common;
  color: green; 
}
```

```javascript

import styles from "./style.css";

const MyAwesomeComponent = () => (
  <div className={styles.normal}>Awesome!</div> 
);
```
- このアプリを起動するとこう見える

```javascript

<div class="style-normal__227xg">Awesome!</div>
```
- 実際のクラス名は <ファイル名>-<クラス名>__<ハッシュ> というフォーマットで自動生成され、末 尾に付与されるランダムなハッシュ値によって一意であることが保証される。
- CSS Modulesの詳しい内容はこちら
https://postd.cc/css-modules/

# CSS in JS ライブラリ
- JSX ファイルの中にスタイルを直 接書き込むタイプ

## Radium
- メディアクエリや:hover、:focus、:active といったセレクタが使える

```javascript

import React, { FC } from 'react'; 
import Radium from 'radium';

const styles = {
  base: { color: '#fff', 
    ':hover': {
      background: '#0074d9', 
      opacity: 0.4, 
    }, 
  }, 
  primary: { 
    background: '#0074D9', 
  }, 
  warning: { 
    background: '#FF4136',
  },
};

const Button: FC<{ kind: 'primary' | 'warning' }> = ({ kind, children }) => (
  <button style={[styles.base, styles[kind]]}> 
    {children} 
  </button> 
);

expot default Radium(Button);
```

## styled-components
- styled.div`～` で div タグをカスタマイズしたコンポーネントが作れる
- スタイルが適用されたコンポーネントを作成できる

```javascript

import React, { FC } from 'react'; 
import styled from 'styled-components';

const Button = styled.button`

  background: transparent; 
  border-radius: 3px; 
  border: 2px solid palevioletred; 
  color: palevioletred; 
  margin: 0.5em 1em; 
  padding: 0.25em 1em;

  ${props => props.primary && css` 
    background: palevioletred; 
    color: white; 
  `}
`;

const Container = styled.div` text-align: center; `;

const TwoButtons: FC = () => ( 
  <Container> 
    <Button>Normal Button</Button>
    <Button primary>Primary Button</Button> 
  </Container> );

export default TwoButtons;
```

## Emotion
- インラインで記載可能
- フ ァイル サイズ が 小 さ く て 実 行 速 度 が 速 い

```javascript

/** @jsx jsx */ 
import React, { FC } from 'react'; 
import { css, jsx } from '@emotion/core';

const color = 'darkgreen';

const ColoredText: FC = () => (

  <div 
    css={css`
      background-color: hotpink;
      &:hover {
        color: ${color}; 
      } 
    `}
  >
    This has a hotpink background. 
  </div>
);

export default ColoredText;
```
[漏洞通告]CVE-2020-5410/Spring-Cloud-Config-Server存在路径穿越

### 漏洞描述
近日,亚信安全网络攻防实验室跟`Spring-Cloud-Config-Server`组件存在路径穿越漏洞,该漏洞由补天安全研究员`LuFei`提交给`Spring`官方.攻击者利用此漏洞可以实现目录穿越,以此读取未授权文件的内容.

### 漏洞编号
CVE-2020-5410

### 漏洞威胁等级
中危

###  影响范围
2.2.0 <= Spring Cloud Config <= 2.2.2
2.1.0 <= Spring Cloud Config <= 2.1.8

### 漏洞验证
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491410/b957f188-1214-f083-7d85-4fa6bb84f20e.png)

### 修复建议
建议升级`Spring Cloud Config`至2.2.3版本或2.1.9版本并将`Spring-Cloud-Config-Server`放置在内网中,同时使用`Spring Security`进行身份验证.

### 时间轴
[0] 2020/06/02 补天0vul Team发布漏洞通告
[1] 2020/06/02 亚信安全网络攻防实验室分析&复现该漏洞并发布漏洞通告

### Reference
https://github.com/spring-cloud/spring-cloud-config/releases
ScrapyのUser-Agentを動的に変更する

Scrapyを使っていて、Spiderのコンストラクタ内からユーザエージェントを動的に変えたいケースがあったのでやってみました。

実装はかなり簡単だったのですが、ほしい情報にうまくたどり着けなかった(結局公式に書いてあった)ので、同じ悩みを持つ人のために書いておきます。

## バージョン情報
Scrapy 2.1.0

## やること
Spiderのコンストラクタ内で`self.user_agent`にユーザエージェント文字列を設定します。

こうすることで、デフォルトで動くUserAgentMiddlewareがSpiderの属性からユーザエージェントを拾って使ってくれます。

```python

class CustomCrawlSpider(CrawlSpider):
    name = 'crawl'

    def __init__(self, *args, **kwargs):
        self.user_agent = 'custom-user-agent'

```

## 原典
言われなきゃわからん！！と思いましたが、よくよく公式ドキュメントを読んでみると[UserAgentMiddleware](https://docs.scrapy.org/en/latest/topics/downloader-middleware.html#module-scrapy.downloadermiddlewares.useragent)に書かれていました。

>In order for a spider to override the default user agent, its user_agent attribute must be set.

GitHubで[該当の箇所](https://github.com/scrapy/scrapy/blob/master/scrapy/downloadermiddlewares/useragent.py)を見てみるとたしかに`spider.user_agent`を参照してます。

## その他の設定方法
Scrapyはコマンドラインで与えた引数がSpiderの属性になるので、引数として`user_agent`を渡すことでもユーザエージェントを指定可能です。

```bash
scrapy crawl quotes -a user_agent=custom-user-agent
```

ユーザエージェントが固定値で良いのであれば、settings.pyやSpiderのcustom_settingsに`USER_AGENT`を設定することでも対応できます。

## 参考文献
https://qiita.com/as-chapa/items/0e4262e5005f642d2c1a

https://docs.scrapy.org/en/latest/index.html
djangoのadmin画面で"calendar.day_abbr"の更新に失敗する話

# djangoのadmin画面からモデルの追加・更新削除ができなくなった


画面表示や操作はできるが、更新ボタン押下時、以下の例外が発生する。


```
"AttributeError: 'calendar' object has no attribute 'day_abbr'"
```


# アプリケーション名`calendar`が原因


結論を言うと`calendar`という名前のアプリケーションが存在したため。


これが既存のcalendarとバッティングを起こして、失敗していたらしい。


クラス名で失敗ならわかるけど、アプリケーション名で失敗は想定していなかったので、原因判明にちょっと時間がかかってしまった……
BigQueryで重複IDをもつ行をひとつにするやつ

## 概要
重複してほしくないカラムがあるとき、その重複行を削除するクエリ

```SQL
SELECT AS VALUE
  ARRAY_AGG(t)[OFFSET(0)]
FROM `hoge.fuga.piyo` AS t
GROUP BY choufuku_column
```

`SELECT`句で呼ぶテーブル名って`STRUCT`なんですね。今まで何気なく使ってたが初めて認識してちょっと感動した。

ちなみに公式で推奨されるもの。

```SQL
#standardSQL
SELECT
  * EXCEPT(row_number)
FROM (
  SELECT
    *,
    ROW_NUMBER()
          OVER (PARTITION BY ID_COLUMN) row_number
  FROM
    `TABLE_NAME`)
WHERE
  row_number = 1
```

### 余談
ストリーミングAPIで格納した重複検知用のID付のテーブルをマテリアライズドビューで重複除外しようと考えた。
しかし、マテリアライズドビューにはROW_NUMBER()が使えないとのこと。
なので`ARRAY_AGG`で書き直したが、結局ダメだった。
git pull出来ないときの対処法

個人開発を進めて行く中で、git pullできないことがありました。

```
$ git pull
```

***
##試したこと##

git stashコマンドを入力。
（変更しているファイルすべてを別の場所に保存しておいて一時的に変更していない状態に戻す）

```
$ git stash
```

このコマンドを実行すると無事**git pull**できました。

***

##ちなみに

```
$ git stash list
```

上記のコマンドで、一時的に保存したリストを確認できます。

```
$ git stash list
stash@{0}: WIP on follow_unfollow: 1ef591e fix users controller
```

以下のコマンドで、退避していたスタッシュを元に戻せます。

```
$ git stash pop
```

終わり。

>[本番環境でpullしたらコンフリクト？解決法３パターン！【Please commit your changes or stash them before you merge】](https://qiita.com/15grmr/items/433ee3b47828aaad32a8)
2020/06/02 プログラミング(フロントエンド)学習3日目 メモ

# 本日の学習範囲
### ドットインストール
・はじめてのCSS #05〜#07
（学習時間：1時間）
## CSS学習メモ
### background-colorプロパティ
背景色を指定する
### ボックス
要素によって生成される領域
内から順に、content・padding・border・marginで成り立っている
### content
widthプロパティとheightプロパティで指定する領域、要素内容が表示される
### padding
paddingプロパティで指定する内側余白、背景が適用される
### border
borderプロパティで指定する境界線、太さ・線種・色を指定できる
### margin
marginプロパティで指定する外側余白
### marginプロパティ
`{margin-top: 幅;
  margin-right: 幅;
  margin-bottom: 幅;
  margin-left: 幅;}`
ボックスのマージンの幅を指定する
`{margin: 上の幅 右の幅 下の幅 左の幅;}`と記述することも可能
全て同じ値の場合は、`{margin: 幅;}`と記述できる
### divタグ(HTML)
`<div></div>`
ひとかたまりの範囲として定義する
### class属性(HTML)
`<div class="class名">`
要素に分類名を指定する
### classセレクタ
`.クラス名 {}`
特定のclass名がつけられた要素にスタイルを適用する
### auto
ユーザーエージェントによって自動的に算出される値
autoが適用されたプロパティ毎に効果は異なる
marginプロパティにおけるautoは、ブラウザが適切なマージンを選択する
`{margin-right: auto;
margin-left: auto;`
の場合、左右中央揃えになる
### ユーザーエージェント
サイトにアクセスした際に送る、OSやブラウザ、機種などの情報
URLsessionのURLComponentsをgurad letでアンラップする方法

##はじめに
URLComponentsの使い方は他の記事でも紹介されていますが、基本的に暗黙的アンラップ(!)を使用しています。
(参考:[どこよりも分かりやすいSwiftの"?"と"!"](https://qiita.com/maiki055/items/b24378a3707bd35a31a8))
もしURLにnilが入るとアプリがクラッシュしてしまうのでguradで安全にアンラップする方法を紹介します。

URLsessionの使い方は下記の記事を参考にしてみてください。
(参考[URLsessionを用いたHTTPリクエストの方法](https://qiita.com/shungo0525/items/64564fd822a7558ac7b1))

##guradでアンラップする方法
まず暗黙的アンラップを用いている方法です。（良くないパターン）

```swift

var urlComponents = URLComponents(string: "https://hogehoge.hoge")!  // "!"を使用
urlComponents.queryItems = [
    URLQueryItem(name: "email", value: "hoge@hoge.com"),      
    URLQueryItem(name: "username", value: "hogehoge")
]
var request = URLRequest(url: urlComponents.url!)　 // "!"を使用
```

続いてguradで安全にアンラップした場合です。

```swift

guard var components = URLComponents(string: "https://hogehoge.hoge") else { return nil }  // guardでアンラップ。returnでnilを返す。
urlComponents.queryItems = [
    URLQueryItem(name: "email", value: "hoge@hoge.com"),      
    URLQueryItem(name: "username", value: "hogehoge")
]
guard let url = urlComponents.url else { return nil } // 一行追加してguradでアンラップ。同じくreturnでnilを返す。
var request = URLRequest(url: url)  // urlを安全にアンラップできる。

```

##おわりに
URLsessionに限らず、アプリがクラッシュしないように基本的には"!"を使わずにguradなどでアンラップします。
しかし、returnで何を返すかが変わったり、そもそもguardを使わなかったりと型によっても変わってくるので、今回はURLComponentsについて紹介しました。
AtCoder Beginner Contest 169 A,B,Cまでをrubyで

4回目。前回C問題まで解けたので、今回もできるだろう、と舐めてかかったら、計算機工学の基礎のところでつまづく。
##A問題

```abc169a.rb
ab = gets.chomp.split(" ").map!{|item| item.to_i}
puts ab[0] * ab[1]
```
書くだけ。

##B問題

```abc169b.rb
n = gets.chomp.to_i
a = gets.chomp.split(" ").map!{|item| item.to_i}
num = 1
ans = 1
th = 10**18
a.sort!{|a,b| (-1)*(a <=> b)}
if a[n - 1] == 0
    puts 0
    exit
end
for num in 1..n do
    ans = ans * a[num-1]
    num = num + 1
    if ans > th
        puts "-1"
        exit
    end
end
puts ans
```
整数の掛け算なのだが、順に、
1. ０が一つでもあったら０
２. 10^18を超えたら即-1を返して終了
3. 要素全部の積を返す
で正解。cだと２のチェックを丁寧にやる必要があるが、rubyなら整数型で必要に応じて多倍長整数が使われるので気にしなくて良い。
２のチェックに早く引っかかるように逆順にソートして、末尾の要素が０かどうかを先にチェック、と書いたが、a.include?(0)か a.minで済む。
破壊的にソートする!をつけ忘れて通せず。
##C問題

```abc169c.rb
ab = gets.chomp.split(" ")
a=ab[0].to_i
b=((ab[1].to_s).delete(".")).to_i
ans = a*b/100
puts ans
```
bを１００倍してto_sで整数にして計算、１００で割れば良いや、とやったところで、２進表現で循環小数になるパターンを踏んでwa。
bをintegerとして扱い、小数点を除いた後にto_sが簡単。
これも通せず。
精進します。
Dockerでコンテナ起動時に実行するコマンドを環境変数から渡す方法

# 個人的なメモ
検証環境でクライアントを見立てたホストを構築するのに使っている仕組みなので、セキュリティとかの考慮は一切ないです。
環境変数で設定の値だけじゃなくて、いっそのことコマンド自体を渡してしまおうという発想に至ってしまった自分を殺したい。

## やり方
誰でも思いつく方法だと思うけど、単純に環境変数の中身をevalで実行するだけでいけた。


```
FROM centos:7.4.1708
ENV container docker

# required
# https://hub.docker.com/r/_/centos/
RUN (cd /lib/systemd/system/sysinit.target.wants/; for i in *; do [ $i == \
systemd-tmpfiles-setup.service ] || rm -f $i; done); \
rm -f /lib/systemd/system/multi-user.target.wants/*;\
rm -f /etc/systemd/system/*.wants/*;\
rm -f /lib/systemd/system/local-fs.target.wants/*; \
rm -f /lib/systemd/system/sockets.target.wants/*udev*; \
rm -f /lib/systemd/system/sockets.target.wants/*initctl*; \
rm -f /lib/systemd/system/basic.target.wants/*;\
rm -f /lib/systemd/system/anaconda.target.wants/*;
VOLUME [ "/sys/fs/cgroup" ]

RUN echo "eval \${STARTUP_RUN}" >> /etc/startup.sh
RUN echo "bash -c /etc/startup.sh" >> /etc/rc.local
RUN echo "/bin/bash">> /etc/rc.local
RUN chmod a+x /etc/rc.local
RUN chmod a+x /etc/startup.sh

CMD ["/bin/bash", "-c", "/etc/rc.local"]
```

環境変数で実行したいコマンドを渡してコンテナを動かす。

```
salacia@Vega:~/docker_env$ sudo docker run -it -d --name testhost --env STARTUP_RUN="echo 'hello' > /root/output" testimage
954f41cf05a374c00d74cd827bcd7409c150f60a1acd835824921523695404c5                                                                        
```

環境変数で指定したコマンドが実行されたことを確認する。

```
salacia@Vega:~$ sudo docker exec -it testhost cat /root/output
hello
```

## 結果
**すごいことになる！**


## 追記
今回rc.localやCMDに直接記述しなかったのは、rc.localに既にいくつかの処理を記述していて、rc.localに手を入れるのは最低限にしたかったためです。
シンプルにしたいならこんな感じで（動くことは確認してない）

```
FROM centos:7.4.1708

RUN echo "eval \${STARTUP_RUN}" >> /etc/startup.sh
RUN chmod a+x /etc/startup.sh
CMD ["/bin/bash", "-c", "/etc/startup.sh"]
```

docker-compose.ymlや、DockerfileのCMDに書いても動くと思います。（未検証）
〜CSSの基本〜

以下に注意して修正する

top → 上
bottom → 下のこと

padding→中身だけ動かしたい
margin→背景ごと動かす

margin: 0 auto;	[左右]に対して中央に配置

ショートハンド指定
padding: ○px;	四方向共通
padding: ○px ○px;	上下　左右
padding: ○px ○px ○px;	上　左右　下
padding: ○px ○px ○px ○px;	上　右　下　左

計算する番
width : calc(100% - 20px) ;

< ブロックの位置指定を固定するために！>
絶対位置指定の仕方

 position: absolute;で
スタート位置を指定。

 position: relative;を親に記載すれば
親基準のスタート位置となる。

◆以下をCSSに記載

※子要素に追加
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin:auto;

※親腰輿に追加
 position: relative;
6年ぶりにアプリを Google Play に公開したけど、ダウンロード数0でガチで凹んだ話し

## 要約：
まだ Android 2.x 系 が全盛期だった時期に、適当な名言アプリを公開して何も考えずに 5,000円程度の収益を得たエンジニアが、6年ぶりに和暦変換アプリを何も考えずに公開したら、ダウンロード数が0だった。 今は ASO 大事！

## 想定する読者の方：
- [x]  どんなアプリでも実装して公開すれば、1000ダウンロードはいけるっしょ！と思っている方
- [x]  適当に広告をつければ、月2,000円ぐらいは稼げるっしょ！と思っている方
- [x]  スマホアプリ黎明期のバブリーだった時期が、頭から離れてない方
- [x]  ASO? 何それ？そんなもん必要なの？と思っている方

**そう、昨日の私は全てチェックがついてしました。**


## やったことの箇条書き：
 - 会社で Flutter ってフレームワーク触る必要あるのか。めんどくせーけどちょっと触ってみるか。
 - どんなアプリが良いかな。あー、とりあえず和暦変換アプリなんかいいかも。簡単に作れるし。
 - ついでに今流行の RxDart も導入しちゃおう！
 - ようし、ついでに広告つけて昔みたいにちょっとしたお小遣い稼いじゃうか！
 - 1週間ほどでアプリ完成！とりあえず適当に Google Play Store に公開しちゃおう！
 - ダウンロード数0 だったので、「あー、ストア情報が何かの事情で未公開になってんのね。検索結果に全然出ないし」と思って問合せの文章を作成する。
 - 送信前に「念のため、 URL をもう1回確認するか。」とストアページを開いたところ、公開中であることを確認。
 - 地球上で誰もダウンロードしてないことに気がつき、「6年前と時代が変わったのか・・・！」と一人で震えているときに、妻に「ASO 対策してないんだから当然じゃんwwww」と煽られ、ガチで凹む ← 今ここ
 - ASO対策について真剣に考え、半年後に5万ダウンロードを達成。自社にもノウハウを転用し、本業および副収入を得て、プチリッチマンになる ←永遠にこない

ご参考に、地球上で誰もダウンロードしていない和暦変換アプリのページを一応載せときます。
(戒めのための恥さらし)
https://play.google.com/store/apps/details?id=tanaka.wax.gum.co.jp.year_calc


## 勉強になったこと：
今はアプリ作って公開するだけでは、文字通り誰にもダウンロードされないことですね。
ほんとに昔のスマホアプリ 界隈はバブリーだったんだなぁ。

この状況では、短期的な収入のみを考えるのであれば、隙間時間でスマホアプリ開発の受託案件をやった方が収入になりますね。自分が半分学習用で作ったアプリに適当な広告を乗っけて適当に公開するだけで稼げた時代は終わってしまいました。

もうしばらくは個人開発アプリは作成、公開しないかな。1円以上稼げるビジョンが1mm も浮かんでこない。
jQueryの書き方(基本)


##基本的な書き方  

```javascript
$('button').on('click', function(){
   console.log('on');
 });
```
訳：
(対象のclassまたはid).on(イベント名, セレクタ)
  console.log(何をするか)

※function()は関数の定義

##イベント一覧  
[jQueryのイベント一覧まとめ【サンプルコード有】](https://kinocolog.com/jquery_event/)

##3つのイベント処理について  
[イベント処理のキャンセル方法](https://kita-note.com/js-cancel-event)

##$()とか意味がわからない  
[テンプレートリテラルを１分でマスタ―する](https://it-biz.online/web-design/template-literal/)

##要素を追加する  
[appendメソッドで要素を追加する方法](https://proengineer.internous.co.jp/content/columnfeature/12720)


##非同期通信の際に、なんども送信できるようにしたい  
[input要素にdisabledを設定・解除する方法](https://qiita.com/yusuket1120/items/4845d0053342642ce924)
ERROR 1267 (HY000): Illegal mix of collationsとなった時の対応方法


- 環境 : MySQL 8.0.20

# 事象:変数を条件に使ったSQLを書いたファイルを実行したら怒られた

```sql:hoge.sql
SET @no = "0531";
select * from person_table WHERE person_no = @no;
```

```bash
mysql> source hoge.sql
Query OK, 0 rows affected (0.01 sec)

ERROR 1267 (HY000): Illegal mix of collations (utf8mb4_general_ci,IMPLICIT) and (utf8mb4_0900_ai_ci,IMPLICIT) for operation '='
```

# 原因 : 照合順序がカラムと変数で不一致だから
- 参考
    - [MySQL の &quot;Illegal mix of collations&quot; エラーについて - @tmtms のメモ](https://tmtms.hatenablog.com/entry/2013/04/11/mysql_Illegal_mix_of_collations)
    - [MySQL :: MySQL 5.6 リファレンスマニュアル :: 10.1.4 接続文字セットおよび照合順序](https://dev.mysql.com/doc/refman/5.6/ja/charset-connection.html)

## 対応 : 変数をSETするときに照合順序も指定する
```sql:hoge.sql
SET @no = "0531" COLLATE utf8mb4_general_ci;
select * from person_table WHERE person_no = @no;
```
VB.net 複数のボタンで同じような処理をまとめて書く方法

windows10 Visual Studio2019

会社の課題で電卓アプリを作る時、検索の仕方が悪かったこともあり
0~9のボタンで同じような処理を1つにまとめて書く方法を探すのに手間取ったので
記事にしておきます。

!![Button　複数２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572466/f3808fd9-54a2-b408-b037-e65e87737476.png)


こんな感じの複数のボタンで同じような処理をしたいとき
１つのイベントハンドラでまとめて書くにはsenderを使います。

```vb
Public Class Form1
    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click, Button2.Click, Button3.Click
        Label1.Text = sender.text
    End Sub
End Class

```

これで、押したボタンのテキストをLabel1に表示できます。
1が書かれたボタンなら1
2と書かれたボタンなら2
3と書かれたボタンなら3

たったこれだけです。

複雑な処理になっても同じように使えます。
【Go】コンテナを理解するためにコンテナを自分で”造る”【初心者】

#コンテナを理解するためにコンテナを自分で"造る"

今回は[こちら](https://youtu.be/Utf-A4rODH8)を参考にして自作コンテナを作ってみる。

#コンテナとは

詳しくは他の方の説明を受けてください。

#Goでコンテナを"造る"

##環境

今回は`VMware`で`Ubuntu`を稼働させ、`VM`上で造りました。

```
Ubuntu 20.04 LTS 64-bit

go version go1.13.8 linux/amd64
```

##まずはコンテナのルートディレクトリとなるFile Systemを作る

`/home/rootfs`ディレクトリ下に今回のルートディレクトリとなる`File System(fs)`を作成します。

```
/home/rootfs/
  ├── bin
  ├── lib
  ├── lib32
  ├── lib64
  ├── proc 　　\\空のディレクトリ
  └── sbin

```

`bin`,`lib`,`lib32`,`lib64`,`sbin`ディレクトリは`/usr`ディレクトリ下と同じものをコピーしました。

`proc`ディレクトリは空の状態で作成しておきます。

※今回はただコンテナとして動くことだけを目的としているので最小の`fs`にしています。

##コンテナを稼働させる`src`【Go】

`src`は[次のよう](https://github.com/outk/make_container/blob/master/main.go)にしました。

```go
package main

import (
	"fmt"
	"os"
	"os/exec"
	"syscall"
)

func main() {
	switch os.Args[1] {
	case "run":
		run()
	case "child":
		child()
	default:
		panic("what??")
	}
}

func run() {
	cmd := exec.Command("/proc/self/exe", append([]string{"child"}, os.Args[2:]...)...)
	cmd.Stdin = os.Stdin
	cmd.Stdout = os.Stdout
	cmd.Stderr = os.Stderr
	cmd.SysProcAttr = &syscall.SysProcAttr{
		Cloneflags: syscall.CLONE_NEWUTS | syscall.CLONE_NEWPID,
	}

	must(cmd.Run())
}

func child() {
	fmt.Printf("running %v as PID %d\n", os.Args[2:], os.Getpid())

	cmd := exec.Command(os.Args[2], os.Args[3:]...)
	cmd.Stdin = os.Stdin
	cmd.Stdout = os.Stdout
	cmd.Stderr = os.Stderr

	must(syscall.Chroot("/home/rootfs"))
	must(os.Chdir("/"))
	must(syscall.Mount("proc", "proc", "proc", 0, ""))
	must(cmd.Run())
}

func must(err error) {
	if err != nil {
		panic(err)
	}
}
```

##実際にコンテナを起動してみる

###まずはホストの`fs`と`Process`の確認

`Terminal`でホストの`fs`を確認しましょう。

```terminal
~$ cd /
~$ ls
bin    dev   lib    libx32      mnt   root  snap      sys  var
boot   etc   lib32  lost+found  opt   run   srv       tmp
cdrom  home  lib64  media       proc  sbin  swapfile  usr
```

次に、ホストの`Process`を確認

```terminal
~$ ps
    PID TTY          TIME CMD
   1927 pts/0    00:00:00 bash
   2950 pts/0    00:00:00 ps
```

`PID(Process ID)`が大きい値であるのが確認できます。

###コンテナを起動

満を持してコンテナを起動しましょう。

先ほどの`src`があるディレクトリに移動し、`Terminal`で次のようにコマンドを入力します。

```terminal
~:/home/{username}/{directoryname}$ sudo go run main.go run /bin/bash
running [/bin/bash] as PID 1
bash-5.0# 
```

**おめでとうございます！**

コンテナが起動しました！

##コンテナがコンテナであるか確認する

ホストの時と同じように`fs`と`Process`を確認してみましょう。

```terminal
bash-5.0# cd /
bash-5.0# ls
bin  lib  lib32  lib64	proc  sbin
```

コンテナ内で`/`ディレクトリに移動してもホストの`/home/rootfs`ディレクトリに移動しますね。

```terminal
bash-5.0# ps
    PID TTY          TIME CMD
      1 ?        00:00:00 exe
      6 ?        00:00:00 bash
      8 ?        00:00:00 ps
```

`PID`ちゃんと小さい値です。

ついでに`history`も確認しておきましょう。

```terminal
bash-5.0# history 
    1  cd /
    2  ls
    3  ps
    4  history 
```

`history`もコンテナ内の記録しか表示されません。

###最後にコンテナを停止するには

コンテナ内で`exit`と入力すればOK

```terminal
bash-5.0# exit
~:/home/{username}/{directoryname}$
```
[rails]Haml 投稿フォームについて


##送信フォーム(hamlでの表示方法)

```haml
%input.class-name__text{tpe: "text"}
%input.class-name__submit{type: "submit" ,value: "POST"}
1.テキストを入れるフォーム
2.送信ボタン
```

###▼ボタンのオプションの解説  
[クイックリファレンス](http://www.htmq.com/html5/input_type_submit.shtml)


##リンクをつける

```haml
= link_to '#' do
  %i.fa.fa-trash
```

##リンクの表示を変えて、下線などを消す

```sass
a {
  text-decoration:none;
}
```
マッスルJava基礎 1日目

駆け出し脳筋のプログラム日記
学んだことをまとめる

#Javaの特徴

- C/C＋＋を踏襲した文法体型
- オブジェクト思考言語
- 静的型言語
 - 変数、引数、戻り値には必ず型を宣言しなければならない！！

#Java Virtual Machine(JVM/JavaVM)
- Javaのバイナリ形式をそのまま解釈して実行出来る仮想的なマシン
    - 各OSでは専用のJavaVMを使うことで共通の実行結果を得る
  
# クラスとは？!

- 状態・状況や振る舞い・動作をまとめて定義できるプログラムの定義

| 車クラス     | 状態・状況               | 振る舞い・動作  |
|:-----------|-----------------------|------------|
| <img width="100" alt="car_character3_wagon.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/644035/a03efe55-4a09-5744-37bc-c9b70e105c2a.png">       | 車種<br>色<br>ドアの数        |   走る<br>曲がる<br>下がる      |


#### __クラスの定義の仕方__

```
class クラス名(){
 状態・状況を定義
 振る舞い・動作を定義
}
```
# メソッドとは？！

- クラスの中の __"振る舞い"・"動作"__ を定義したもの

#### __メソッドの定義の仕方__

```
class クラス名(){
 状態・振る舞いを定義

 戻り値の型 メソッド名(引数){
  振る舞い・動作の処理
 }
}
```
- メソッドを使う（呼び出す）
 - 呼び出し元がメソッドを呼び出すと、メソッド内の処理が実行されて、呼び出し元に処理結果を返す
- 引数
 - メソッドのを呼び出す際に、処理に必要な情報を __"引数"__ として渡す
- 戻り値
 - メソッドの処理が終わると、結果を呼び出し元に返す値を__"戻り値"__として返す


<img width="500" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/644035/a6142019-1ff3-6a13-af88-04ee9b6dd98a.png"> 

# mainメソッドの定義
 - mainメソッドとは
   - プログラムを起動した時に実行されるメソッド
   - 定義の仕方は決まっている

```
public static void main(String[] args){

}
```

#データ型


| データの種類| 形名| 内容 |値の範囲|
|-----------|-------|-------|-------|
|整数型|int<br>long<br>byte|32ビット整数<br>64ビット整数<br>８ビット整数|省略<br>省略<br>省略|
|実数型|float<br>double|32ビット単精度実数<br>64ビット単精度実数|省略<br>省略|
|文字型|char|文字１文字|省略|
|論理型|boolean|2値の論理値|true or false|

※Javaでは、整数はint型、実数はdouble型で定義する

# 変数の定義の仕方
- Javaの変数
 - Javaの変数は必ず「型定義」が必要
 - 定義した型以外の値を変数に代入することができない
     - これを「静的な型付け」という 

```
型名　変数名　＝　初期値;
int a = 10;
```

# フィールドとローカル変数
- フィールド
    - クラス定義の内部で宣言した変数
- ローカル変数
    - メソッド定義の内部で宣言した変数

```
public class sample{
  // フィールド
  String name = "太郎";

  // メソッド
　public void walk(){
  // ローカル変数 
  int age = 20;  
 }
}
```
[rails]hamlでアイコンを表示させたい！


```haml:haml
%i.fa.fa-trash
```

下記、アイコンについて参考になる便利サイトです。

▼回転させたり、他の機能も使いたい！
[【Rails】font-awesome-railsの使い方を徹底解説！](https://pikawaka.com/rails/font_awesome_rails)

▼アイコンを選びたい
[Font Awesome](https://fontawesome.com/v4.7.0/icons/)

▼色を指定したい
[fontawesomeの色指定！]
(https://pix524.net/fontawesome-color/)
個人でもMicrosoftのオープンライセンスを利用可能

インフラ系SEや情シス部門の方ならおなじみかと思いますが、Microsoftはライセンスの需要が大きい法人などのためにボリュームライセンスというものを提供しており、普通にパッケージライセンスを買うよりも安く買うことができます。
このボリュームライセンスは主に法人向けで、その中でも中小企業向けにオープンライセンスと呼ばれるものを提供しているのですが、このオープンライセンスは実は個人でも購入することができます。
個人でオープンライセンスを買うメリットは大きいです。

- お好みのWindowsのバージョンやエディションを入れることができる（サポート切れは除く）
- 最新のWindowsが利用できる（SA特典）
- パッケージで買えないWindows 10 Enterprise Editionが利用できる
- Windows 10 HomeからProやEnterpriseにアップグレードするときに便利
- 中古のPCや自作PCなど、OSが古かったりOSが付いていないPCにWindows入れるときに重宝する
- PC入れ替えとかでOEMとか気にしなくてもいい
- Hyper-VやESXなどのゲストOS追加したりするときに使える
- 検証でWindowsを入れたりするときに便利
- 最新のインストールメディアをVLSCからダウンロードできるのでWindowsUpdateを当てる手間を節約できる
- [ソフトウェアアシュアランス特典](https://www.microsoft.com/cms/api/am/binary/RE4r2nD)（SA特典）が利用できる

Windows10のライセンスを使いたいときは、Windows Enterpriseのライセンスが絶対お得です。Windows10ではEnterpriseが[最も機能が多いエディション](https://www.microsoft.com/ja-jp/WindowsForBusiness/Compare)ですがこれはパッケージで市販されておらずボリュームライセンスなどで購入することになります。それにEnterpriseライセンスを買っておけば、下位のProやPro Workstationも利用できます。ついでに言えば、Windows8.1も使えます（サポート切れるまでは）。
普通にWindows10 Proのパッケージを買おうとすると28000円くらいですが、Enterpriseのオープンライセンスは3年前に買ったときは20000円弱でした。安いです。

デメリットはWindows10 Homeが使えないことです。あとはボリュームライセンスなので、3ライセンス以上買わなければいけないことです。同じライセンスを3ライセンス以上ではなく、なんでもいいからMicrosoftのライセンスを3ライセンス買えば大丈夫です。
Windows EnterpriseのライセンスとOfficeのライセンスやVisual Studioのライセンスなどを組み合わせて3ライセンスにするといいと思います。
どうしても3ライセンスにならない場合は、WindowsのCALとか安いのでいっしょに買うとおすすめです。
なお、3ライセンス必要なのは最初だけで、あとからライセンスを追加購入するときは、前の注文に紐づければ1ライセンスから追加購入することが可能です。購入歴のあるライセンスと別のライセンスでも１つから買えます。

ライセンスは[ヨドバシ・ドット・コム](https://www.yodobashi.com/ec/license/index.html)などから買えます。

フォームで見積もり依頼すると返事が来るので、確認してMicrosoftに提出するExcelの申請書を添えて注文します。申請書はヨドバシ・ドット・コムのサイトから[ダウンロード](https://www.yodobashi.com/ec/license/prduct_info/index.html#ms)できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609861/ae3d8271-7c38-c67a-a5c8-a17a397c6556.png)

もともと法人向けのライセンスなので個人だと書きづらい申請書になってますが、法人名のところに個人名入れるなどしてほかに不備がなければ申請は受け付けてくれるでしょう。

その後、メールでライセンスが納品されるので、メールの記載に従ってMicrosoft Volume License Service Senter(VLSC)にログインしてライセンスを登録します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609861/32677de2-bb07-cace-d304-346e423f8c3b.png)

登録が済めば、インストール用のISOイメージやライセンスキーをダウンロードできるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609861/498e6fc7-ec42-2e80-0134-99e9f97404c6.png)

最近はインストール用のISOイメージをUSBメモリに書き込んでUSBからブートしてインストールすることができるので便利ですよね。私は[Rufus](https://rufus.ie/)というのを使っています。

Windowsのライセンスはいくつか持っておくと便利なのでお金に余裕があれば3ライセンス買ってもいいと思います。
検証などで何度も環境を作っては壊す人は所有ライセンス以上にライセンスキーを使っても大丈夫かと不安になるかもしれませんが、それは特に何も言われないと思います。ライセンスを使った回数はカウントされるようですが、ハードウェアを入れ替えたとか故障したので交換したなどの事態も考えられるので、保有ライセンス数以上のキーの使用は許容されるようです。
カウンタが50まであるので、それくらいまでであれば特に何も言われないでしょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609861/86ca511f-ef44-7ffb-61a6-e9c726d29eb1.png)

もちろんちゃんとライセンス数の範囲で利用することが前提ですになります。
従業員数に対して契約ライセンス数が少ないなど、あからさまにひどい使い方していると、Microsoftの調査が入って、ライセンス数を買い増すように言われたり、違約金を払わされたという話を聞いたことがあります。
個人で使っている分にはそこまで厳しくみられることもないかと思いますが、ライセンス数は必要数を適切に購入しましょう。
ちなみに、私は4ライセンス持っていますが、内訳はメインで使っている自作ベアボーンPC用とタブレットPCのWindowsHomeをProにアップグレードしたときに2ライセンス使って、残り2ライセンスは検証用や予備として遊ばせてます。
React デバッグ方法

# Debugger for Chrome

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

## 設定方法・手順
### launch.json
- VSCodeにてlaunch.jsonを編集
- create-react-appで開発する場合
- https://create-react-app.dev/docs/setting-up-your-editor/#visual-studio-code

```json=
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}
```

### ソースコードにブレークポイントを指定
### yarn startにてローカル環境を起動
### デバッグツールを起動

# React Developer Tools
- componentタブでstateとpropsが確認できる

＊参考
https://qiita.com/sh-suzuki0301/items/9c2af4b28ba665cc0744

# Redux DevTools
- Redux-sagaだとデバックが可能(redux-thunkだと動かない)

- top層のindex.tsxに以下の内容を記載 (src/index.tsx(index.jsx))
    - これを記載しないとRedux DevToolsが動かない
   
```javascript=
import { applyMiddleware, compose, createStore } from 'redux';

/* eslint-disable no-underscore-dangle, @typescript-eslint/no-explicit-any */
const composeEnhancers =
  process.env.NODE_ENV === 'development' &&
  typeof window === 'object' &&
  (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
    : compose;
/* eslint-enable */

const enhancer = composeEnhancers(applyMiddleware(sagaMiddleWare));
const store = createStore(reducer, enhancer);
```
便利なchrom拡張機能


使っているchrom拡張機能を紹介します。

##gyazo
拡張機能で入れることで、画面全体のピクチャをクリックひとつで作成可能です。

https://chrome.google.com/webstore/detail/gyazo/ffdaeeijbbijklfcpahbghahojgfgebo

##google翻訳
選択するだけで、翻訳結果をだすボタンが表示されて、すぐに確認出来ます。

https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb?hl=ja

##ato-ichinen
goolge検索の結果を1年以内の最新情報に絞り込めます。

https://chrome.google.com/webstore/detail/ato-ichinen/pojaolkbbklmcifckclknpolncdmbaph

##Wappalyzer
サイトの使用している言語やフレイムワークなど、様々な情報がボタンひとつで確認出来ます。

https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?hl=ja

##Speed Dial 2
新規タブを開いた際に、見やすいショートカットを優先表示してくれます。

https://chrome.google.com/webstore/detail/speed-dial-2-new-tab/jpfpebmajhhopeonhlcgidhclcccjcik/related?hl=ja

以上。
[Unity]Motion Blurで勘違いしてたこと ～ゼノブレイドリメイク買いました～

 **[ゼノブレイドのリメイク版](https://youtu.be/5isBBJTkvjU)** 買いました。
Wii版、WiiU版積みゲーしてたので今度こそクリアするぞ。

で、原作と比べてたんですが、3Dのポリゴン数とかテクスチャがリッチになっただけでなく、 **モーションブラー** をふんだんに使ってることに気づきました。
特撮感が出てやっぱカッケェ～ってなったので、PVとかトレーラー作るときにモーションブラー使って"盛れ"ないかな～と思い、[Post Processing Stack](https://docs.unity3d.com/2018.3/Documentation/Manual/PostProcessing-Stack.html) でお手軽に再現できないか試してみました。

 **ダメでした。** 

# 何がダメだったの？

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ブレる <a href="https://t.co/8L6IY9sTkX">pic.twitter.com/8L6IY9sTkX</a></p>&mdash; こんにゃく攻めバーガー (@flankids) <a href="https://twitter.com/flankids/status/1267812719488458762?ref_src=twsrc%5Etfw">June 2, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
▲たとえば、これはカメラの角度がブンブン動いて画面内のものがブレてます。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ブレない <a href="https://t.co/ZeoZR9lP6R">pic.twitter.com/ZeoZR9lP6R</a></p>&mdash; こんにゃく攻めバーガー (@flankids) <a href="https://twitter.com/flankids/status/1267812753449705473?ref_src=twsrc%5Etfw">June 2, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

▲でもこっちはカメラの内でブロックがブンブン動いても全然ブレてくれません。

どうやら Post Processing Stack の Motion Blur は、カメラの角度や座標の変化によって画面はブレますが、カメラが不動・あるいはあまり動かないときに、 **視野内でオブジェクトがどんなに激しく動こうとモノがブレない** みたいです。

# ゼノブレイドの場合

<img width="500" alt="モーションブラー_1.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184294/0481f39c-4ea0-4ff7-1f61-44f2d503d44a.jpeg">

<img width="500" alt="モーションブラー_2.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184294/c980b882-dfb9-0a5f-dd56-474f6b982399.jpeg">


カメラ内で動くキャラクターがカッコよくブレてます。これがやりたいの！

↑を実現できる、お手軽に使えるアセットとか実装方法とか知ってる方いたら教えてください！
視認性が下がるからゲーム内では多分使わないので、負荷は度外視でいいかなと思ってます。

 **Motion Vectors**  というキーワードが何か握ってると思ってるので、このへんから調べてみようかな。。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184294/89ead333-f334-72f8-2a78-970cfe0d655b.png)


# 続きの記事を書きました
* **[[Unity]Motion Blurで勘違いしてたこと・続 ～Post Processing Stack ゴメンナサイ。でもダメ～](https://qiita.com/flankids/items/c0cd04bc50bd3b902982)**
Rhinoceros スクリプティング覚書

python で Rhino 6 の自動処理書いた際の覚書。

## APIドキュメント

* [rhinoscriptsyntax](https://developer.rhino3d.com/api/RhinoScriptSyntax/)
  ―― ライノの操作クラス。IDEでも見れるけどこちらのほうが探しやすい。
* [Rhino.Python Guides with Python](https://developer.rhino3d.com/guides/rhinopython/)
  ―― python 関連情報

## その他

* エクスポート機能はないので `rhinoscriptsyntax.Command()` でマクロのテキスト入れる。
* `rhinoscriptsyntax.ObjectColor(object_ids, color)`
の`color` は RGBで　`(25,50,255)` 渡す。

python のちょっとした動作確認に使うかも

* [Repl.it - Python Online Compiler and IDE - Fast, Powerful, Free](https://repl.it/languages/python3)
非同期通信の手順書②

#前提条件
以下のブログを読んでから本記事をお読みください。
[非同期通信の手始めに](https://qiita.com/Nyanmaru-12/items/70ab49e7a4000085d72b)

#createアクションに何を記入するか
何をjsonで返して、何をHTMLで返すか…
それはrespond_toで決めるのでした。以下、コードです。

```ruby
  def create
    @comment = Comment.create(comment_params)
    respond_to do |format|
      format.html { redirect_to tweet_path(params[:tweet_id])  }
      format.json
    end
  end
```
気付く人は気付きますがrender json 〇〇がありません。
これはこの後にjbuilderを用いるためです。
次はjbuilderについて記述します。
HTMLでローカルにある画像を表示する

# プログラミングの勉強日記
2020年6月2日　Progate Lv.83
ウェブページ制作中

##imgを用いてローカルファイルにある画像を表示する方法

　HTMLファイルが保存されている同じ階層に表示させたい画像を入れたフォルダを作成して、そのなかの画像名を指定する。　

```html
<img src="./photo/S__520912916.jpg">
```

<img width="491" alt="0602.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/8a5aaa3c-84ab-694b-4df2-89de2ce1dd5f.png">