OmniAICreator/Qiita-1.07M huggingface dataset:
Electron + Vue.js + Bootstrap で環境構築

##今からやること

Electronとシェルスクリプトを使ったradiko再生プログラムを作成する。

##環境
macOS Big Sur
Visual Studio Code
node v14.0.0

##インストール項目
Vue 2.6.11
Electron 6.0.0 (electron-builder 1.4.6)
Bootstrap 4.0

##構築
#####[Homebrew][link-1]をインストール
[link-1]:https://brew.sh/index_ja

```:terminal
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```
#####Node.jsをインストール

```:terminal
$ 省略
```

#####Vueの環境を構築

```:terminal
$ npm install -g @vue/cli
$ vue create my-app
```

```:terminal
Vue CLI v4.5.11
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 2] babel, eslint) 
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
  Manually select features
```
→ プロジェクト名は小文字のみ
→ Vue 3はBootstrapに対応していないのでVue 2を選択
#####Electronの環境を追加

```:my-app
$ vue add electron-builder@1.4.6
```

```:my-app
? Choose Electron Version (Use arrow keys)
  ^4.0.0 
  ^5.0.0 
❯ ^6.0.0 
```

<font color="red">バージョンをビルダーは1.4.6、Electronは6.0.0に指定</font>
→シェルスクリプト等のコードが動かない

#####ルーターの追加
ルーター：複数のページを管理したりコンポーネントを管理するために便利な機能

```:my-app
npm install vue-router
```

#初期設定〜起動
#####Bootstrapの環境を追加

```:my-app
$ npm install bootstrap-vue
```

#####メインの基盤となるmain.jsにルータの記述を追加

```javascript:src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router' //added

new Vue({
    router, //added
    render: h => h(App),
}).mount('#app')
```
#####router.jsを新規作成

```javascript:src/router.js
import Vue from 'vue'
import Router from 'vue-router'

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(Router)
Vue.use(BootstrapVue)

export default new Router({
    mode:'history',
    base: process.env.BASE_URL,
    router:[]
})
```
#####アプリを起動
ここまでできたら起動してみる

```:my-app
$ npm run electron:serve
```
#####アプリをビルド
```:my-app
$ npm run electron:build
```


#応用

#####アイコンの設定
プロジェクトルートにvue.config.jsを作成し、指定した場所(src/assets/)にアイコンを格納。サイズは512×512のみ

```javascript:vue.config.js
module.exports = {
    pluginOptions: {
      electronBuilder: {
        builderOptions: {
            productName: "my-app",
          mac: {
            icon: 'src/assets/icon.icns',
          },win: {
            icon: 'src/assets/icon.icns',
          },
        }
      }
    }
  }
```

#####ウィンドウサイズの固定・変更

```javascript:src/background.js
/*

*/
async function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
   titleBarStyle: "hidden",
   width: 1080, height: 600,
   resizable:false,
   webPreferences: {
    nodeIntegration: true,
    webSecurity: false, //ここ大事
    webviewTag: true,
   }
  })
/*

*/
```
詳しい情報はここに載っています
Electron ドキュメント：https://www.electronjs.org/docs/api/browser-windo


##結果
Electronのバージョンを上手く合わせないと中々、シェルスクリプトが動かなかった

![スクリーンショット 2021-01-29 21.12.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522384/9f129787-1143-8ca4-c24f-3feb31b390e5.png)

参考サイト
GitHub：https://github.com/uru2/rec_radiko_ts
→ここのシェルスクリプトを参考にしました
Download FFmpeg：https://ffmpeg.org/download.html
→Gitのコマンドを打って手動でダウンロード

参考サイト2
[npmのuninstallコマンドを忘れがちなのでメモ][link-1]
[link-1]:https://qiita.com/mamosan/items/6f1cf71ccd82216fe25b
absメソッドは、どんな時に使うのか。



某スクールのRuby問題を解いた備忘録。
（自身が情弱知識なので、備忘録は小学生もわかるように書いてみた。）

プログラムを作っているときは、どのくらいの「差」があるのかを数で出したい時がある。
（数で出さなきゃいけない）
例…
⚫︎「車に乗れる人数」と「乗りたい人の数」　→　みんな乗れる？乗れない？
⚫︎「今持ってるお金」と「必要なお金」　→　お金足りる？足りない？
⚫︎「入院したい人」と「入院できる人の数」　→　入院できる？できない？

プログラムに組んで、簡単に教えてくれる便利な機能をつけたいな。

そんな時、「absメソッド」を使う。

```ruby:qiita.rb
ty(car, capacity)
  capacity = car[:capacity] - capacity

  if capacity == 0
    puts "みんな乗れます。"
  elsif capacity > 0
    puts "あと#{capacity}人乗れます。"
  else
    puts "#{capacity.abs}人乗れません。"
  end
end
```

こんな風に書いた時に、
absメソッドは、負の数の場合は、符号を取って正の数にした数値が取得できます。
たとえば、

```ruby
5 -7 = -2
```
になりますが、absメソッドを用いると符号が取られ
「2」に変換されます。

##まとめ
0より小さい数になった数を見せたいんだけど、マイナスの記号はいらないから、マイナスを取った数を表してくれるメソッド。
大人の言い方で、「絶対値を求める」メソッド。
HTML OGPについて

#OGPとは
HTML要素。
SNSにシェアした際に表示される「タイトル」・「画像」・「詳細」を設定できる。

#OGP設定のメリット
どのようなページで何を伝えたいのかが明確になる。
→共有されたユーザーの訴求率が高まる。
→より多くの人に記事を見てもらえる

#OGPの設定方法
##OGPを使用することを宣言するタグ
①head要素にprefix属性を追加する
②トップページでは「website」・トップページ以外では「article」を入力する
```<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">```

##OGPで設定できる内容
###ページURL（og:url）
```<meta property="og:url" content="ページのURL" />```
###ページタイプ（og:type）
```<meta property="og:type" content="ページの種類" />```
###ページタイトル（og:title）
```<meta property="og:title" content=" ページの タイトル" />```
###ページの説明文（og:description）
```<meta property="og:description" content=" ページのディスクリプション" />```
###サイト名（og:site_name）
```<meta property="og:site_name" content="サイト名" />```
###画像のURL（og:image）
```<meta property="og:image" content=" サムネイル画像の URL" />```

#OGP設定で気をつけるポイント
１ページごとに設定すること。
HTML metaについて

#metaとは
HTMLタグ。
WEBページの情報を伝える事ができる。

#metaで指定できる内容
・charset
```<meta charset=”utf-8″>```
・title
```<title>○○</title>```
・description
```<meta name=”description” content=”〇〇〇”>```
・keyword
```<meta name=”keywords” content=”○○,○○,○○”>```
・viewport
```<meta name=”viewport” content=”width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0, viewport-fit=cover”>```
・robots
```<meta name=”robots” content=”noindex,nofollow”>```
・OGP
```<meta property=”og:url” content=” ページの URL” />
<meta property=”og:type” content=” ページの種類” />
<meta property=”og:title” content=” ページの タイトル” />
<meta property=”og:description” content=” ページのディスクリプション” />
<meta property=”og:site_name” content=”サイト名” />
<meta property=”og:image” content=” サムネイル画像のURL” />```
GCPの使用料が請求されているクレジットカード情報を編集できなかった話

# 発生している問題の状況

GCPの管理画面からお支払い → お支払い方法と移動する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534541/80730cc9-d92f-9994-1419-14abbb2d0f27.png)

表示されたクレジットカード情報を変更しようとすると、以下のような画面が出る。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534541/9a143f86-d700-8b86-1260-3b8e242c0cef.png)

```
この操作を行う権限がありません

このタスクを完了するには、このお支払いプロファイルの編集権限が必要です。お支払いの設定ページにアクセスして、[お支払いサービスのユーザーを管理] をクリックし、この権限をあなたに許可できる管理者を見つけます。権限をすでにリクエストした場合は、メールを確認して承認します。
```

しかしながら、お支払い設定から「お支払いサービスのユーザーを管理」を押してもユーザーが管理できない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534541/b4b5e0f7-c227-8451-442f-c196c7f46c45.png)

# 原因の分析

管理画面の構成やドキュメントの内容から推測した結果、GCP (Google)の支払い周りの設定は以下のような構造になっていると思われる。

* GCPプロジェクト belongs to お支払いアカウント（変更可能）
* お支払いアカウント belongs to お支払いプロファイル（この関係は作成後に変更不可）
* お支払いアカウントはGCP下の機能だが、お支払いプロファイルはGoogleの機能
* お支払いプロファイルは、GCPだけでなくGoogle AdwordsやGoogle Play等、すべての支払いを司る
* お支払いプロファイルはビジネス・個人の2種類ある（作成後の変更不可）
  * お支払いプロファイルが個人の場合、所有者以外の変更不可（ユーザーの追加や削除ができない）
  * ビジネスのお支払いプロファイルは、1企業につき1つを想定されている

よって、上記の問題はお支払いプロファイルが個人になっていることが原因だと思われる。お支払いプロファイルの種類やお支払いアカウントの請求先プロファイルは作成後に編集できないため、新たにお支払いアカウントとお支払いプロファイルをビジネスで作成して解決。

何か認識が間違っている点がありましたらご指摘いただけると嬉しいです。
公開鍵技術の検証：鍵の生成と電子署名・暗号化


ひとまずopensslコマンドだけで一通り公開鍵技術を試すメモ。
公開鍵技術は暗号処理と電子署名に使うことが多い。まずはこの２つの違いを理解することが重要。
一般論として

* 暗号処理の場合、公開鍵で暗号化し、秘密鍵で複合する
* 電子署名の場合は秘密鍵で署名し、公開鍵で検証する（RSAは対称性があるため逆も可能:ただコマンドは違うみたい）

となる。理にかなってる。単純だが、思いついた人（RSAの皆さん）すごい。

## □鍵の生成

まず、何は無くても秘密鍵を生成。これは人に教えたり、盗まれてはいけない。

### 秘密鍵生成

生成。2021年現在、標準ではrsa 2048bitで生成されるみたい。

```bash
openssl genrsa > ./private_key.pem
```

### 公開鍵生成

秘密鍵から公開鍵を生成する。これは人に教えたり、提供したりするものです。

```bash
openssl rsa -in ./private_key.pem -pubout > ./public_key.pem
```

## □電子署名

個人的には電子署名に公開鍵技術を利用することの方が多いのでまずは署名から。

### 署名する（署名の対象となる）ファイルの生成

```bash
echo "test" > ./test.txt
```

### （秘密鍵で）署名する（署名の生成）

署名を生成する。元のファイルがどうこうなるわけではなく、その情報をベースに署名ファイルが生成されるのがミソ。

```bash
openssl dgst -sha256 -sign ./private_key.pem ./test.txt | openssl base64 > ./test.sig
```

### （公開鍵で）検証する

検証する人は「検証対象のファイル」、「署名ファイル」、「公開鍵」の３つが必要となります。

```bash
#前処理
openssl base64 -d -in ./test.sig > ./test.sha256
#検証
openssl dgst -sha256 -verify ./public_key.pem -signature ./test.sha256 ./test.txt

Verified OK
```

>別件の個人的用途のためbase64 encode, decodeを挟んでます。すみません。

## □暗号化（と複合）

### 暗号化

暗号化。

```bash
openssl rsautl -encrypt -pubin -inkey ./public_key.pem -in ./test.txt > ./test.encrypted
```

### 複合

複合。

```bash
openssl rsautl -decrypt -inkey ./private_key.pem -in test.encrypted
test
```

## その他

関連？のメモ。

### ハッシュ出力

ハッシュの出し方メモ。

```bash
echo "test" | openssl sha256

(stdin)= f2ca1bb6c7e907d06dafe4687e579fce76b37e4e93b7605022da52e6ccc26fd2
```

### base64

#### encode

```bash
echo -n "hogehoge" | base64

aG9nZWhvZ2U=
```

>-nは、改行を出力しないオプション。普通はいらない？{}のときだけ？

#### decode

```bash
echo -n "aG9nZWhvZ2U=" | base64 -d
```
HTML <head>タグについて

#headタグとは
・htmlファイルの情報を宣言するもの
・headタグ内の内容は通常ブラウザに表示されない（<title>タグを除く）

#headタグでできること
・タイトルを付ける
・メタデータの指定
・faviconの指定
・CSSとJavaScriptを追加
・言語の設定
【docker初心者】phpMyadmin on dockerを使ってみた

docker環境でLaravelアプリを作成しています。
元々学習していた教材でphpMyadmin on dockerを使っていたので
自分でもできるかなと思い挑戦してみました。

[こちら](https://qiita.com/furu8ma/items/50718efebee20fd24517)の記事を拝見させていただきました！
感謝です！


## 公式からimageをとってくる


[公式サイト](https://hub.docker.com/r/phpmyadmin/phpmyadmin/)に行きます。
![スクリーンショット 2021-01-27 20.02.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051152/92901344-6a19-1aa0-9bbc-ee9deaf8b71b.png)

上の画像のように公式のGithubに行きます。

![スクリーンショット 2021-01-27 20.12.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051152/dee9a029-ad8d-3783-a4ec-4a63f03f9ef7.png)

画像のように`docker-compose.yml`のファイルを開きます。

![スクリーンショット 2021-01-27 20.14.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051152/1d95f397-5142-e612-090b-f2d634f3822a.png)

上の画像のように囲んだところのコードをコピーします。

そして自分の`docker-compose.yml`に貼ります。

```PHP:docker-compose.yml
phpmyadmin:
    image: phpmyadmin
    container_name: phpmyadmin
    environment:
     - PMA_ARBITRARY=1
    restart: always
    ports:
     - 8080:80
    volumes:
```

これでコンテナを起動します。

```PHP:ターミナル
docker-compose up -d
```

そして`http://localhost:8080`にアクセスします。

![スクリーンショット 2021-01-27 23.30.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051152/8dc47bd4-0d10-8e09-8d76-4cec45037ee9.png)


が、ここで`データベース名`、`ユーザー名`、`パスワード`を入れる画面が出てきたのですが何のこっちゃって感じです。
知識なさすぎて悲しくなる。


先ほどの参考にしたサイトでは

```PHP:docker-compose.yml
phpmyadmin:
  image: phpmyadmin/phpmyadmin
  environment:
    - PMA_ARBITRARY=1
    - PMA_HOST=mysql
    - PMA_USER=root
    - PMA_PASSWORD=password
  links:
    - mysql
  ports:
     - 8080:80
  volumes:
     - /sessions
```

となっていたので`PMA_HOST`以下を編集してみましたがうまくいかず。

## メンターさんに質問し解決

私の場合は

```PHP:docker-compose.yml
  db:
    build: ./infra/mysql
    volumes:
      - db-store:/var/lib/mysql
```

となっていたので
`データベース名はdb`

`ユーザー名`と`パスワード`は

```PHP:mysql/Dockerfile
MYSQL_USER= <ここ>
MYSQL_PASSWORD= <ここ>
```

ここに記載されていたものを入れて無事に使えるようになりました！

`docker-compose.yml`は以下のように

```PHP:docker-compose.yml
phpmyadmin:
    image: phpmyadmin
    container_name: phpmyadmin
    environment:
     - PMA_ARBITRARY=1
    restart: always
    ports:
     - 8080:80
    volumes:
```

元に戻してます。

メンターさん感謝です！
iOS NWConnection利用時のTLSの証明書を無視する方法

# はじめに
iPhoneと家庭内で使っているIoT機器とのTLSを使った暗号通信する時に、サーバ証明書の有効性の確認が失敗して、通信エラーになる現象がありました。例えば、IoT機器が自己署名の証明書を使っている場合です。このような場合に、iOSでTLS証明書を無視して通信する方法を書いておきます。

# 通常の実装
`NWConnection`を用いた通常のTLS実装は、以下のようになります。今回の記事に関連する部分(`NWConnection`のインスタンス化)のみ記載しています。この実装では、サーバ証明書の確認を行います。このため、IoT機器が自己署名の証明書を使っている場合には、サーバ証明書のエラーとなりIoT機器と通信ができません。

``` swift
let connection = NWConnection(host: host, port: port, using: .tls)
```

# サーバ証明書を無視する実装
以下のように、`NWConnection`のパラメータ(`using: params`)を設定することで、サーバ証明書を無視することができます。`sec_protocol_options_set_verify_block()`で`sec_protocol_verify_complete(true)`を設定します。この時に、`connection.start(queue: queue)`で使う`queue`が引数に必要です。このため、対象のコードの上下に`queue`に関するコードも記載してあります。

``` swift
let queue = DispatchQueue(label: "label")

let options = NWProtocolTLS.Options()
sec_protocol_options_set_verify_block(options.securityProtocolOptions, { (_, _, sec_protocol_verify_complete) in
        sec_protocol_verify_complete(true)
    }, queue)
let params = NWParameters(tls: options)
let connection = NWConnection(host: host, port: port, using: params)

// 途中省略
connection.start(queue: queue)
```



# 参考文献
- [sec_protocol_options_set_verify_block()](https://developer.apple.com/documentation/security/2976289-sec_protocol_options_set_verify_) 
- [自己署名TLS](https://developer.apple.com/forums/thread/104018)
- [How to setup iOS 12 NWConnection that uses client cert](https://developer.apple.com/forums/thread/113312)
ActiveRecordのメソッド

ポートフォリオにてログイン機能を実装している。
その中でActiveRecordのコマンドを打つことがあるが、いまいちActiveRecordがわかっていない。

RailsでModelを作成するとはActiveRecord::Baseというクラスを継承していて、このクラスの中にどのようなメソッドがあるのか？

自分用にまとめておく。


#ActiveRecord

ActiveRecordはRuby on Railsで使われているOR Mapper(オブジェクト　リレーショナルデーターベース　マッパー)
のこと。

モデルとテーブルをつなぎ合わせて、SQL文ではなく短いコードでデーターベースの参照したり、編集したりすることができる。



```
$ rails generate model User name:string email:string
```

このコマンドを実行するとmodelが作成される。

```Ruby:app/models/user.rb
class User < ApplicationRecord
end
```
冒頭で述べたように
Ruby on Railsでmodelを作成するとActiveRecord::Baseを継承している。

このモデルクラスであるUserを例にしてメソッドについてまとめる。

#ActiveRecord::Baseのメソッドを何があるか

```Ruby
User.new( name: "takahasi", email: "takahasi@example.com" )
#Userモデルに新規ユーザーを作成

User.save
#新規ユーザーをDBへ保存

User.create( name: "takahasi", email: "takahasi@example.com" )
#newとsave行う

User.find(1)
#DBからidが１のユーザーを取得する

User.find_by( email: "takahasi@example.com" )
#DBから条件に該当する一番目のユーザーを取得する。

User.where(email: "takahasi@example.com")
#DBから条件に該当するすべてのユーザーを取得する

#find_byは条件に合うデーターを一つだけ、whereはすべてのデーターを取得する。

User.update
#ユーザーを更新する

#使い方
user = User.find_by(name: "takahasi")
user.name = "sato"
user.save

#上をこのように書ける
user = User.find_by(name: "takahasi")
user.update(name: "sato")


User.destroy
#ユーザーの削除

User.limit(6)
#DBからidの若い順に６つ取得する

User.order("created_at DESC")
#作成日時の新しい順にユーザーを並び替えて取得
#３人ユーザーがいたら、３．２．１の順で並び替え

User.order("created_at ASC")
#作成日時の古い順に取得
#３人ユーザーがいたら、１．２．３で並び替え

```

ORMapper、DBの扱いは必須なので、もっと理解したい。

#参考
https://qiita.com/penguin_note/items/adb0b9bf7c13c1b1d44d

https://qiita.com/tsuchinoko_run/items/f3926caaec461cfa1ca3

https://railsguides.jp/active_record_basics.html
ユーザーが5回または10回アプリを起動した時にレビューを依頼する方法

## はじめに
レビューアラートを表示する方法自体は`import StoreKit`を含めてもほんの2行で済むのですが、いつどこで表示させるかが悩みどころ。わざわざレビューのためのボタンを配置するのも億劫なので、特定の回数起動された時に依頼することにしました。


## 回数をカウントする
Userdefaultsを使って起動回数をカウントします。

```swift
let key = "startupCount"
let userDefaults = UserDefaults(suiteName: "/*一意に定まる名前*/")
userDefaults?.setValue((userDefaults?.integer(forKey: key))!+1, forKey: key)
userDefaults?.synchronize()
let count = userDefaults?.integer(forKey: key)
```

実行された回数を数えるための変数を用意します。僕はこれをアプリが起動された時に実行される関数の中に入れましたが、数えたいものによってはイニシャライザの中に入れても良いと思います。

## レビューを表示させる
レビューを表示すること自体はとても簡単です。`StoreKit`をimportし、表示させたいところに

```swift
SKStoreReviewController.requestReview()
```

と書きます。
今回は起動回数が5または10の時表示させたいので

```swift
if count == 5 || count == 10  {
SKStoreReviewController.requestReview()
}
```

としました。
## SceneDelegateに処理を加える
アプリによってはAppDelegateで起動時の処理を行っているものもあると思います。（特にxcode11以前のもの）





```swift:SceneDelegate.swift
class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        let contentView = Tab()
        let key = "startupCount"
        let userDefaults = UserDefaults(suiteName: "group.otsuka.amane.ColorDesignApp")
        userDefaults?.setValue((userDefaults?.integer(forKey: key))!+1, forKey: key)
        userDefaults?.synchronize()
        let count = userDefaults?.integer(forKey: key)
        
        
        // Use a UIHostingController as window root view controller.
        if let windowScene = scene as? UIWindowScene {
            let window = UIWindow(windowScene: windowScene)
            window.rootViewController = UIHostingController(rootView: contentView)
            self.window = window
            window.makeKeyAndVisible()
            if count == 5 || count == 10  {
                SKStoreReviewController.requestReview()
            }
        }
    }
//省略
}
```

なおここで使っている`Tab()`とははじめに表示される画面のことで
![スクリーンショット 2021-01-28 10.15.20.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549093/b11ccfb4-3717-435c-f627-858c8329618a.jpeg)

こんな感じで定義しています。詳しくは[こちら](https://qiita.com/Hyperbolic_____/items/8e8057398bddf8ac078e)
VichUploaderBundleを適用するEntityのプロパティはNULLを許容しないと削除ができない

#はじめに

Symfonyのファイルのアップロードに、[VichUploaderBundle](https://github.com/dustin10/VichUploaderBundle)を使っています。

[Api Platform](https://api-platform.com)を使っていて、ファイルのアップロードは、[ドキュメント](https://api-platform.com/docs/admin/file-upload/#handling-file-upload)通りに行って問題なし。


# 問題

Entityの削除(DELETE）を発行したら、以下のようによくあるエラーがでる。

```
"Expected argument of type "string", "null" given at property path "originalFileName"."
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/00ec24b6-b680-0459-fb6d-986c45bc4e72.png)

# 原因

Entityを作成した時は、たいがいデフォルト値を設定してしまうのですが、setOriginalFileNameメソッドを呼び出す時に、引数指定されたのが問題でした。


```php
    /**
     * @ORM\Column(type="string", length=255, options={"default": ""})
     */
    private $originalFileName = '';

    public function getOriginalFileName(): ?string
    {
        return $this->originalFileName;
    }

    public function setOriginalFileName(string $originalFileName = ''): self
    {
        $this->originalFileName = $originalFileName;

        return $this;
    }
```

以下のように、nullを許容する「?」をstringの前につけて解決。

```php
 public function setOriginalFileName(?string $originalFileName = ''): self
    {
        $this->originalFileName = $originalFileName;

        return $this;
    }
```

無事に削除ができるようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/fbd30b1c-25dd-912a-bc13-cb56e11826ce.png)


# まとめ

NULL許容で実装した方が、他のバンドルとも連携があるのでよいのですね。
make:entityで作ったままがよいのかも？

# 参考文献

* https://stackoverflow.com/questions/55764217/how-to-fix-error-when-trying-to-delete-file
* https://api-platform.com/docs/admin/file-upload/#handling-file-upload
enum(列拳型)の使い方をまとめました。(Rails)

##enumとは
enumはRubyではなくRailsに導入された便利な型です。
enumを使うことで文字列と値を紐付けができます。
データベースに格納される値が決まるため
定義していないものはデータベースに保存できなくなります。
##使用例

```Ruby:order.rb
enum address:[:"自宅", :"登録済みの住所から", :"新しいお届け先"]
enum payment_method:{ "ポイント支払い": 0, "コンビニ支払い": 1, "クレジットカード": 2, "電子マネー": 3, "着払い": 4 }
```
この記述をモデルに書くこと
書き方は2種類あり、
addressの方は0から順番に番号が振り分けられる。
payment_methodの方は番号を指定して決められます。~~(0から指定する必要があります)~~
次に、Viewは、

```Ruby:order/new.html.erb
<%= form_with model: @orders, url: public_orders_confirm_path, method: :get,local: true do |f| %>
 <%= f.label :address, "お届け先の住所" %>

 <%= f.radio_button :address, 0, checked: "checked" %>
 <%= f.label :address, "自宅" %>

 <%= f.radio_button :address, 1 %>
 <%= f.label :address, "登録済みの住所から" %>

 <%= f.radio_button :address, 2 %>
 <%= f.label :address, "新しいお届け先" %>

 <%= f.label :payment_method, "支払い方法" %>
 <%= f.select :payment_method,
     [
      ['ポイント支払い'], 
      ['コンビニ支払い'],
      ['クレジットカード'], 
      ['電子マネー'], 
      ['着払い']
     ],prompt: "クレジットカード" %>
  <%= f.submit "更新", class: "btn btn-sm btn-success" %>
<% end %>
```
ラジオボタンとセレクターの2種類で実装してます。
Git Bash for Windowsでaliasを設定する

Git Bashを開き、
`alias`
コマンドで現在のaliasを確認する。

```
$ alias
alias ll='ls -l'
alias ls='ls -F --color=auto --show-control-chars'
```
  
設定ファイル（~/.bash_profile）があるか確認し、なければ新規作成。

```
touch ~/.bash_profile
```
  
viエディタで設定ファイルを開く。

```
vi .bash_profile
```
  
設定したい内容を記述して保存する。以下は例。

```bash:.bash_profile
alias open="explorer"
```

 
再起動し動作を確認する。
GraphQL-RubyでEnumを活用しよう

#はじめに
graphql-rubyでは、EnumType(列挙型）を定義することができます。
本記事では、EnumTypeの利用方法やメリットについて説明します。
#EnumTypeとは
## Railsのenum
Railsでは、ActiveRecordでenumを定義できます。
dbに整数型のカラムに対応した文字列を定義したものです。
例えば、あるUserテーブルに権限を整数型で指定したカラムがあるとすると以下のように書くことができます。

```usr.rb
enum auth: { read: 0, write: 10, admin: 20 }
```
上記のように定義すると、どの数字がどの権限に対応しているかを意識することなく、記述することができます。

## GraphQLのEnumType
graphql-rubyのobjectTypeを何も考えずに定義すると以下のようになります。

```user_object.rb
module ObjectTypes
  class UserType < ObjectTypes::BaseObject
    field :name, String, null: false
    field :auth, String, null: false # 文字列として定義される
  end
end
```
graphql側はAcitiveRecrdでenumが定義されていることは知る由もないので、railsのenumに定義していない文字列でも受け入れてしまいます。そこで、graphql側にもrailsのenumに相当するEnumTypeを定義する必要があります。
まず、graphq/types以下にbase_enum.rbがあることを確認しましょう。デフォルトで入っているかと思います。
そしてbase_enum.rbを継承するauth_enum.rbを作成します。

```types/auth_enum.rb
module Types
  class AuthEnum < Types::BaseEnum
    value "read"
    value "write"
    value "admin"
  end
end
```
これでEnumTypeが定義できます。
EnumTypeが定義できたので、ObjectTypeにもEnumを適用します。

```user_object.rb
module ObjectTypes
  class UserType < ObjectTypes::BaseObject
    field :name, String, null: false
    field :auth, Types::AuthType, null: false # Enumを指定
  end
end
```
無事にgraphql側にもenumを定義することができました。もちろん、ObjectTypeだけでなくInputTypeにも定義できます。

#なぜenumを定義するか
実は、わざわざEnumTypeを定義しなくても実装としては問題ありません。定義されていないenumがフロントエンドから代入された場合には、ActiveRecordが例外を吐いてくれるので、DBに不正な値が入る心配はありません。

EnumTypeを定義するのは、フロントエンドにどのような値が入るのかを前もって知らせるためです。
特に最近のフロントエンドの多くはTypescriptを使用していると思いますので、事前にenumの値で型を作ることができ、より扱いやすいはずです。特にgraphqlのスキーマから自動で型を生成している場合にはとても便利です。

enumを定義するとフロントエンドの人が喜ぶと思うのでぜひ定義してあげて下さい。
EC-CUBE4 オーナーストアのプラグインコードを調べてコマンドで新規インストール

## はじめに

オーナーストアのプラグインを `./bin/console eccube:composer:require` コマンドでインストールするには、プラグインのパッケージ名を知る必要があります。

:information_source: 未購入の有料プラグインは含まれません

## プラグインのパッケージ名を調べる方法

以下コマンドを実行すると、EC-CUBEのオーナーストアでダウンロードできるプラグインのパッケージ情報が表示されます。

```
curl -sS https://package-api.ec-cube.net/packages.json -H 'X-ECCUBE-KEY: YOUR_EC_CUBE_KEY' | jq .
```

`YOUR_EC_CUBE_KEY` には、 `composer.json` の `X-ECCUBE-KEY` キーの値をセットします。

```json:composer.json
    "repositories": {
        "eccube": {
            "type": "composer",
            "url": "https://package-api.ec-cube.net",
            "options": {
                "http": {
                    "header": ["X-ECCUBE-KEY: xxxxxxxxxxxxx"]
                }
            }
        }
    }
```

売上集計プラグイン の場合、 `ec-cube/SalesReport4` がパッケージ名、extra の `SalesReport4` が（おそらく）プラグインコードです。

```json
    "ec-cube/SalesReport4": {
      "4.0.0": {
        "name": "ec-cube/SalesReport4",
        "version": "4.0.0",
        "description": "売上集計プラグイン",
        "type": "eccube-plugin",
        "require": {
          "ec-cube/plugin-installer": "~0.0.6"
        },
        "extra": {
          "code": "SalesReport4",
          "id": 1759
        },
        "dist": {
          "type": "tar",
          "url": "https://package-api.ec-cube.net/ec-cube/SalesReport4/4.0.0/SalesReport4-4.0.0.tgz"
        }
      },
```

## プラグインを新規インストールする

`EC_CUBE_PLUGIN_PACKAGE` には、パッケージ名（例：`ec-cube/SalesReport4`）を入れ、`EC_CUBE_PLUGIN_CODE` には、プラグインコード（例：`SalesReport4`）を入力します。


```bash
# EC-CUBEプラグインのダウンロードと依存ライブラリのダウンロード
./bin/console eccube:composer:require EC_CUBE_PLUGIN_PACKAGE

# キャッシュ削除（プラグインによってはキャッシュを削除しないと、次の手順でプラグインが正しく認識できずにエラーになります）
./bin/console cache:clear --no-warmup

# EC-CUBEプラグインの有効化
./bin/console eccube:plugin:enable --code=EC_CUBE_PLUGIN_CODE
```

## 参考

* [EC-CUBE4にオーナーズストアからコマンドでプラグインをインストールする](https://qiita.com/okazy/items/6c8f40b2114480880ae6)
Wordpressのプラグイン実行時に不具合が起きた際見直すべきポイント

#解決したい課題
wordpressのプラグイン:Contact form 7で送信完了したメールが受信できない｡

##課題の詳細
以前までは受信できていたメールが､受信できなくなった｡
フォーム上は送信完了したという表示がされる｡

ググって一番見かけたサーバ違いによる不具合でsmtpでの解決が多かったけど､サーバは同じのため､該当しない｡
https://blitzgate.co.jp/blog/250/

#結論
function.phpを見直す！
jsの動きを制御するプラグインが入ってしまっていた…｡

#詳細
実装初期､contact form 7のjsを使用したいページ(以下の例だと､/lp)以外で読み込まないように､
function.phpに以下を挿入していた｡
この当時は通常に受信できていた｡

しかし､パスをlpから変更したため､jsが読み込まれなくなっていた｡

```
 function my_contact_enqueue_scripts(){
 wp_deregister_script('contact-form-7');
 wp_deregister_style('contact-form-7');
 if (is_page('lp')) {
 	if (function_exists( 'wpcf7_enqueue_scripts')) {
         wpcf7_enqueue_scripts();
 	}
 }
 }
 add_action( 'wp_enqueue_scripts', 'my_contact_enqueue_scripts');
```
考えてみればそのとおりだし単純なことに気づくのに､時間がかかってしまった｡
contact formに限らず､
**なにかの変更のためにfunction.phpに加えた修正がなにかに影響していること**
は多々あるだろうから､なにかが上手く行かないときは､そのズバリ事象+function.phpを見直してみると良い｡


あとそもそも論としては､動いていた時期と動かなくなった時期があるのであれば､その間に加えた変更を一つ一つ検証して切り分けるのが正道｡
だが､開発が重なっているとそれを細かく実施できるかどうか､､､という工数も懸念される｡

大枠で切り分けつつ､定番のミスを抑えておくことが肝心｡
部分テンプレートについて

#目次
<b>①部分テンプレートとは</b>
<b>②部分テンプレートのメリット</b>
<b>③部分テンプレートの作成方法</b>
<b>④部分テンプレートの呼び出し方</b>

##①部分テンプレートとは
ビューファイルにおいて繰り返し使用するコードを取り出し、繰り返し利用できる仕組みのこと。

##②部分テンプレートのメリット
・繰り返し再利用できる
・繰り返し書くコードを一回で済ますことができる
・修正する際に修正箇所が少ない

##③部分テンプレートの作成方法
＿◯◯.html.erbと記述してファイルを作成する。気をつけなければならないのは、先頭に_(アンダースコア)を先頭に記述する。


##④部分テンプレートの呼び出し方
例えば、index.html.erbのファイルを部分テンプレートに使いたい場合、index.html.erbのファイルに記述してあるコードをコピーして、＿◯◯.html.erbに貼り付ける。呼び出す際に必要な3点を説明する。

・renderメソッド
こちらは、部分テンプレートを呼び出す際に利用できるメソッド。部分テンプレートを指定するときは、partialというオプションで指定する。

・partialオプション
renderメソッドで使用する。オプションで部分テンプレート名を指定することで、該当する部分テンプレートを表示できる。


・localsオプション
renderメソッドで使用できる。オプション。localsというオプションをつけることで、部分テンプレート内でその変数をつかえるようになる。

以下のように記述する

```php:index.html.erb
 <%= render partial:"human",locals:{human:human} %>
#部分テンプレートが_human.html.erbだった場合の記述。

<%= render partial:"people/human",locals:{human:human} %>
もし同じディレクトリでない場合は、どこのディレクトリにある部分テンプレートなのかを指定しなければならない。上記がその記述である。
```
EC-CUBE4 DI を利用する

## はじめに

EC-CUBE4 は Symfony3系 で作られているので、DIの仕組みとして [Service Container](https://symfony.com/doc/3.3/service_container.html) が使えます。

カスタマイズ領域は、ネームスペースが `Customize\Entity` `Customize\Resource` `Customize\Tests` 以外が、依存解決時の対象となるようです。

```yaml:app/config/eccube/services.yaml
services:
    # 省略
    Customize\:
        resource: '../../../app/Customize/*'
        exclude: '../../../app/Customize/{Entity,Resource,Tests}'
    # 省略
```

## インターフェースと実装を結びつける

```diff_yaml:app/config/eccube/packages/my_service_name.yml
services:
    Customize\Service\MyServiceInterface: '@Customize\Service\MyService'
```

## サービスクラスのコンストラクタに必要な情報を設定する

サービスクラスのコンストラクタが、他の依存で解決できる場合、この設定は不要です。

例えば、サービスクラスのコンストラクタで、リソースディレクトリ内の特定のディレクトリパスを渡したい場合に、以下のように設定します。

```diff_yaml:app/config/eccube/packages/my_service_name.yml
services:
    Customize\Service\MyServiceInterface: '@Customize\Service\MyService'
+   Customize\Service\MyService:
+       arguments:
+           $myPath: '%kernel.project_dir%/app/Customize/Resource/config/my_service.json'
```

依存が注入される度に、新しいインスタンスを生成したい場合は `shared: true` を設定します。

```diff_yaml:app/config/eccube/packages/my_service_name.yml
services:
    Customize\Service\MyServiceInterface: '@Customize\Service\MyService'
    Customize\Service\MyService:
        arguments:
            $myPath: '%kernel.project_dir%/app/Customize/Resource/config/my_service.json'
+       shared: true
```

## 独自のサービスクラスを作成する

```php:app/Customize/Service/MyServiceInterface.php
interface MyServiceInterface
{
}
```

```php:app/Customize/Service/MyService.php
<?php

declare(strict_types=1);

namespace Customize\Service;

class MyService implements MyServiceInterface
{
    private $myPath;

    public function __construct(string $myPath)
    {
        $this->myPath = $myPath;
    }
}
```

## 適当なクラスで利用する

`$myPath` つまり `/app/Customize/Resource/config/my_service.json` で初期化された状態の `MyService` クラスのインスタンスが注入されます。

```php
<?php

declare(strict_types=1);

namespace Customize\Controller;

use Customize\Service\MyServiceInterface;
use Eccube\Controller\AbstractController;

class SomeController extends AbstractController
{
    /** @var MyServiceInterface */
    private $myService;

    public function __construct(MyServiceInterface $myService)
    {
        $this->myService = $myService;
    }
```
nilガードの書き方と、使用するメリットについて

Rubyでよく出てくるキーワードのひとつ**「nilガード」**
Railsチュートリアルでも出てくる概念なので、名前は知っているという方も多いと思います。<br><br>

今日は**nilガードの書き方と、使用するメリットについて**記事を書いていきます。

・nilガードを使う意味がわからない
・nilガードを使いたいけど、書き方がわからない
・nilガードの理解をさらに深めたい

上記のような方々にお読みいただけるとうれしいです。<br><br>



##nilガードの説明と書き方

まずnilガードの説明をします。以下のような書き方をします。

```sas
number ||= 10  #①
```

このコードの意味は、**「もしもnumberがあればnumberを返す、nilかfalseであれば10を代入した上でnumberを返す」**という意味になります。

また、①と②は同じ動きをします。

```sas
number || (number = 10) #②
```
「左辺があれば左辺を返し、なければ右辺を返す」のが、nilガードです。<br><br>

例えばこんな感じです。

```sas
> a ||= 10 #aはnilなので、aに10を代入してaを返します
=> 10 
> a ||= 20 #a = 10なので、そのまま左辺の10を返します。
=> 10
```

nilガードの書き方がわかったでしょうか。

次に**nilガードを使用するメリットについて**書いていきます。<br><br>



##メリット①nilを返したことで発生するエラーを防げる
たとえば、aを戻り値で返すコードがあるとします。

```sas
return a
```

ここでaがnilであると、「戻り値がnilだから返す値がないよ!」というエラーが出ます。ほかにも、**nilを返してはいけないところでnilを返す可能性があると、エラーが出てしまいます。**

ここでnilガードを使います。

```sas
return a ||= []
```
aがあればaを返し、aがなければ[ ]を返します。
nilガードは名前の通り「nilをガードする」役割なので、**nilを返してはエラーが出てしまう！**というときに役立ちます。<br><br>



##メリット②リファクタリングできる

以下の2つのコードは同じ意味になります。


```sas
if a != nil
  a = a
else
  a = 10
end
```

```sas
a ||= 10
```
nilなのかどうか？でif文を使ってしまうと、コードが長くなってしまいます。
**nilガードを使うことでリファクタリングする**ことができます。<br><br>

##まとめ


**・nilガードの書き方「左辺があれば左辺を返し、なければ右辺を返す」**

```sas
number ||= 10 
```

nilガードを使う**メリット**は
**・nilを返したことで発生するエラーを防げること**
**・リファクタリングできること**<br>

nilガードの書き方と、使用するメリットについて解説しました。どんどんnilガードを使って理解を深めていきましょう。
<br>
<br>
この記事の説明がわかりやすかった！ここ間違ってるよ！次こんな記事を書いて欲しい！などあればコメント、DMよろしくお願いします。LGTMもぜひ。

Ruby on Railsを中心に**「なんとなくの理解で使っているもの」**を取り上げて解説しています。そのほかの記事もぜひご覧ください。<br>

ほかの記事
①[Rubyのハッシュとシンボル、キーの関係について、わかりやすく解説する](https://qiita.com/atsushi101011/items/0041bf1f7c5834a01381)
②[Rubyにおける「クラス」と「オブジェクト」の関係について分かりやすく解説してみる](https://qiita.com/atsushi101011/items/20ae2c4b65e6b2f9c6a8)
③[git addとcommit、pushの関係をわかりやすく説明する【Gitコマンド解説①】](https://qiita.com/atsushi101011/items/96054ebbd876e378cac4)
<br>



Twitterもやってますので、フォローしていただけたらうれしいです。
卓球、心理学、哲学、Webサービス、好きな音楽、カメラ、登山、ランニング、読んだ本など何でもつぶやいてます。
https://twitter.com/atsushi101011
[Unity] プラットフォームを高速に切り替える小技

マルチプラットフォームなUnity案件では、プラットフォームを切り替えるときの待ち時間とても長いです。
プロジェクトの規模が大きくなると、切り替える度に1時間以上待たされたりします。

この対策として、プラットフォーム別にプロジェクトフォルダを用意する作戦があります。
(もちろんリポジトリは共通で)
これが最も効率のいい方法ではあるのですが、編集先ミスって度々事故るんだこれ。

というわけで…

# 下準備

一旦Unityを閉じて、Libraryフォルダをコピーします。
これで察したら、あなたとても鋭い。
![01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/761337/7aed9514-635c-5a50-f5cd-fa1c70d89ce4.jpeg)

Windows用としてサフィクス付けました。
![02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/761337/5aeade54-5d0b-9785-35db-e81ab5e361e4.jpeg)

iOSに切り替えてみます。
![03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/761337/c9710fb0-1150-6e16-25b5-f9e0ce734f4e.jpeg)

一旦Unityを閉じて、LibraryフォルダのコピーをiOS用としました。
![04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/761337/e472c6cf-8062-b343-2960-8a33691a3d28.jpeg)

今度はAndroidに。
![05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/761337/101d79c2-dc0a-ecfb-8754-ed378d02c188.jpeg)

これ以上切り替える必要なくなったら、リネームでOK.
![06.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/761337/f621e6ee-117c-57b0-3c26-0195824bf4c6.jpeg)

# 切り替え方法

編集対象のプラットフォームに対応するLibrary_*から
シンボリックリンクかジャンクションでLibraryを作る。
切り替えたいときは、一旦Unityを閉じてから作り直すだけ。
![07.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/761337/8d1bd37e-f0df-4524-6847-54f1e9adbb06.jpeg)
（Git・GitHub）チーム開発で必須コマンド

# チーム開発でよく使用したコマンドをまとめました。

```:ターミナル
(1)$ git clone リポジトリURL
(2)$ git branch 
(3)$ git checkout 切り替えるブランチ名
(4)$ git checkout -b 切り替えるブランチ名
(5)$ git add ファイル名
(6)$ git commit -m "コメント"
(7)$ git push origin 作業ブランチ名
(8)$ git pull origin 取得するブランチ名
(9)$ git merge 取得するブランチ名
```
1.リポジトリのファイルをローカルPCに取得
2.ブランチ一覧が表示
3.ブランチ名を指定して切り替え
4.ブランチの作成と切り替えをまとめて実行できる。
５.インデックスに追加
6.メッセージをつけて変更履歴を保存
7.ローカルの変更をリモートリポジトリにアップロードする。
8.リポジトリの差分のデータを取得できる(fetchとmergeをまとめて実行できるコマンド)
9.ローカルブランチに反映する

## 補足
```:ターミナル
$ git fetch origin
$ git merge ブランチ名
```
- リモートリポジトリからローカルにあるリモートリポジトリの最新版を取得する
- ローカルブランチに反映する


##ローカルのブランチをリモートリポジトリのブランチに強制的に合わせる
```:ターミナル
$ git fetch origin ブランチ名
$ git reset --hard origin/ブランチ名
```
[Docker]searchコマンドでOfficialのイメージのみを抜き出すワンライナー 

- Dockerhubからイメージを持ってくる際に、`docker search`コマンドで検索することは多い。
- その際に、Official欄を見て公式かどうかを確認する状況も多い。
- 今回は、検索結果からOfficialのイメージを抜き出すシェルを記録する。

## 環境
- Mac OS X 10.15.6
- Docker version 19.03.12

## 結果
- 結果の記述は以下の通り。

```bash
# ubuntu
docker search ubuntu | awk -F '  +' '{gsub(/[0-9]+/,"[NO]",$(NF-1)); print $1,$(NF-1)}' | grep -v "\[NO\]"


NAME OFFICIAL
ubuntu [OK]
websphere-liberty [OK]
ubuntu-upstart [OK]
neurodebian [OK]
ubuntu-debootstrap [OK]
open-liberty [OK]

# alpine
docker search alpine | awk -F '  +' '{gsub(/[0-9]+/,"[NO]",$(NF-1)); print $1,$(NF-1)}' | grep -v "\[NO\]"

NAME OFFICIAL
alpine [OK]

# node
docker search node | awk -F '  +' '{gsub(/[0-9]+/,"[NO]",$(NF-1)); print $1,$(NF-1)}' | grep -v "\[NO\]"

NAME OFFICIAL
node [OK]
mongo-express [OK]
iojs [OK]
```

## 補足

### awkでの正規表現による区切り指定
- `docker search`コマンドは、多用な空白で見やすくなっている。
- そのため、awkで連続空白を区切り文字として正規表現で指定する必要がある。

### 空白の扱い
- `docker search`コマンドは、該当しない場合は空白になっている。
- そのため、該当フィールドが1つ前のフィールドとなっている場合、**"NO"**と置換している。
    - **※officalイメージの抜き出しのため、starを出さない想定。**

### 公式コマンド
- 以下のような公式であるサブコマンドのfilterを利用することも可能。
    - **※必要な項目のみの抽出とawkの習得のため、今回は利用していない。**

```bash
# ubuntu検索
docker search ubuntu --filter "is-official=true"
```

## 参考
- https://it-ojisan.tokyo/grep-v/
- https://www.gnu.org/software/gawk/manual/html_node/Regexp-Field-Splitting.html
箱ひげ図

# matplotlib

```python
import matplotlib.pyplot as plt

# yがyesとnoのときのcolumn1データを抽出
# ここでの抽出は y == yes で該当する行が全て取り出されている
y_yes = df[df["y"] == "yes"]
y_no = df[df["y"] == "no"]

# 縦軸をcolumn1で箱ひげ図を書きたい
# yesとnoのデータをまとめる
# 格納先へ = [y_yesのcolumn1の値抽出, y_noのcolumn1の値抽出]
y_column1 = [y_yes["column1"], y_no["column1"]]

# 箱ひげ図の描画
# y_column1に分けて格納したデータに対してboxplotする
plt.boxplot(y_column1)

# x軸（横軸）とy軸（縦軸）のラベルを追加
plt.xlabel("y")
plt.ylabel("column1")

# gca(get current axes)では直前まで作ったaxes部分（今回はboxplotとラベル）をaxに取得する
ax = plt.gca()

# ここまででは、x軸の2つのboxへの分類ラベルは未設定

# 取得しておいたaxにx軸の2つのboxの分類ラベルを追加
# xticklabelsで、x軸の目盛りラベルを設定
plt.setp(ax,xticklabels = ['yes','no'])
plt.show()
```
![download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698282/62b0683c-c395-6998-1b86-84d4d55461e2.png)


## gcaについて
matpltlib内には
用紙としてfigure
キャンバスとしてaxes
枠内に引く線としてline
という階層構造がある。

gca(get current axes)
1. figure内にplt.boxplot(y_column1)でboxplotが描画される。
2. axesにboxplotが描画され横軸と縦軸を追加
3. axesに行なった操作を plt.gca() として ax に取得しておく
4. x軸の分類ラベルは xticklabels で加筆  

今回はこのような流れになっているはず。

# seaborn
## 量的変数の分布

```python
import seaborn as sns

sns.boxplot(y="column3", data=df)
```

![download-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698282/c1f0024e-ee17-4727-f472-6cd45d8bea9f.png)

## カテゴリー別の量的変数の分布
```python
sns.boxplot(x="y",y="column1", data=df)

# (x,y)=(カテゴリー、量的)
```
![download-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698282/fa29a351-1f83-bbaf-36cd-2f3d4300268a.png)

## boxの並びの指定
```python
sns.boxplot(x="y",y="column1",order=["yes","no"], data=df)
```
![download-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698282/b6b00a22-58f5-36d1-4560-900d7c39b147.png)

## box内を別の質的変数で分ける
```python

sns.boxplot(x="category2", y="column1", hue="y", data=df)
```

![download-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698282/08a6c191-162f-b6b9-5bac-342fc84aa8de.png)
CentOS8でVirtualBoxのGuest Additionsのインストールで”error: macro "access_ok" passed 3 arguments, but takes just 2  bool fRc = access_ok(VERIFY_READ, (void *)R3Ptr, 1)”

```
$ tail /var/log/vboxadd-setup.log
                                                       ^
/tmp/vbox.0/r0drv/linux/memuserkernel-r0drv-linux.c:72:16: error: ‘access_ok’ undeclared (first use in this function)
     bool fRc = access_ok(VERIFY_READ, (void *)R3Ptr, 1);
                ^~~~~~~~~
/tmp/vbox.0/r0drv/linux/memuserkernel-r0drv-linux.c:72:16: note: each undeclared identifier is reported only once for each function it appears in
make[2]: *** [scripts/Makefile.build:316: /tmp/vbox.0/r0drv/linux/memuserkernel-r0drv-linux.o] Error 1
make[1]: *** [Makefile:1544: _module_/tmp/vbox.0] Error 2
make: *** [/tmp/vbox.0/Makefile-footer.gmk:111: vboxguest] Error 2
Could not find the X.Org or XFree86 Window System, skipping.
modprobe vboxguest failed
```

- VirtualBoxのバージョンを上げる
　　自分の環境だと6.1以上であれば大丈夫

- 最新のGuest Additionsをダウンロードしてインストールする
　すでに稼働中のVMがあって、VirtualBoxのバージョンを上げるのが不安な場合とか（自分）

　自力でダウンロードしてインストールする手順の参考
　　https://qiita.com/seijikohara/items/6bac67de38a2d6838127
EmscriptenによるEM_JS引数のコールバック関数でstd::string代入

備忘録です。

```
#include <iostream>
#include <cstdio>
# include <emscripten.h>
#include <string>

typedef void (*CallBack)(char*, void*);

EM_JS(void, prompt_name, (CallBack funcPtr, void *HogeStr), {
  var str = "Hoge";
  var len = lengthBytesUTF8(str) + 1;
  var heap = _malloc(len);
  stringToUTF8(str, heap, len);
  
  Module['dynCall']('vii', funcPtr, [heap,HogeStr]);
});

void printMessage(char* message, void *str) {
    printf("%s\n", message);
    std::string *Str;
    Str=(std::string *)str;
    *Str=message;
    free(message);
}

int main() {
    std::string HogeStr="未変更";
  prompt_name(&printMessage, &HogeStr);
  std::cout << HogeStr << std::endl;
  printf("%s",HogeStr.c_str());
  return 0;
}
```

コンパイルオプションに
-s EXTRA_EXPORTED_RUNTIME_METHODS=['dynCall']
が必要です。

引用。

https://qiita.com/nokotan/items/35bea8b895eb7c9682de
express-generatorを使いたい


express-generatorを使って雛形を作成できます。
そのためには、
1. express-generatorをインストール
2. 雛形の自動作成コマンドを入力
する必要があります。今回はexpressのviewエンジンにejsを使い、プロジェクト名をmy-appにします。

```terminal
npm install express-generator -g
```
```terminal
express --view=ejs my-app
```
そしてさっき作ったプロジェクトに移動してnpm installをします。

```terminal
cd my-app
npm install
```
nodemonを導入して保存ごとに自動でページが更新されるようにする。

```terminal
npm install nodemon -D
```


そしてpackage.jsonのstartの記述をnodemonに変えておく

```package.json
"scripts": {
    "start": "nodemon ./bin/www"
  }
```
nodemonについてはこちらの方がまとめていたので気になった人は見てください。
*[nodemonの使い方]:https://qiita.com/mzmz__02/items/e130b74a681e9ae2dc8b

正常に動いているか確認するにはnpm startをターミナルに打ち込みましょう。

```terminal
npm start
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618705/02e46781-184a-2c07-19af-ae17231a4fa3.png)
express-generatorでアプリができました。
squidを利用してTenant Restrictionしてみる

# 初めに
Azure ADのTenant Restriction機能を検証するため、
squidのSSL Bumpを利用して環境を構築してみたので手順をメモ。

※Tenant Restrictionの詳細はこちら
https://docs.microsoft.com/ja-jp/azure/active-directory/manage-apps/tenant-restrictions

**※あくまで動作確認用の検証環境の構築手順です。セキュリティ面の考慮はしておりませんので、そのまま本番環境へ適用することはお控えください。**

# 構築手順
- Linuxサーバーを用意する。今回はCentOS8.2を利用。
 
- サーバーにsshで接続し、まずはSquidをインストール

>yum -y install squid

- 念のためOpenSSLを最新化

>yum update openssl

- 自己証明書を作成

>cd /etc/squid
>openssl req -new -newkey rsa:2048 -days 3650 -nodes -x509 -keyout squidCA.pem -out squidCA.pem

- クライアント用のルート証明書を作成

>openssl x509 -in squidCA.pem -outform DER -out squid.cer

- 作成した証明書にアクセス権を付与

>chown squid:squid squidCA.pem
>chmod 400 squidCA.pem

- 証明書データベース用ディレクトリを作成して初期化

>mkdir -p /var/lib/squid
>/usr/lib64/squid/security_file_certgen -c -s /var/spool/squid/ssl_db -M 4MB
>chown -R squid:squid /var/spool/squid

- /etc/squid/squid.confを編集する

>vi /etc/squid/squid.conf

以下の行を削除し、
>http_port 3128

以下の行を追加
>http_port 3128 ssl-bump generate-host-certificates=on >dynamic_cert_mem_cache_size=4MB cert=/etc/squid/squidCA.pem
>request_header_add Restrict-Access-To-Tenants "**テナント名**" all
>request_header_add Restrict-Access-Context "**ディレクトリID**" all

※テナント名、ディレクトリIDに指定する値は以下のリンクを参照。
https://docs.microsoft.com/ja-jp/azure/active-directory/manage-apps/tenant-restrictions#configuration

さらにファイルの末尾に次の行を追加

>sslcrtd_program /usr/lib64/squid/security_file_certgen -s /var/spool/squid/ssl_db -M 4MB
>sslcrtd_children 5
>ssl_bump server-first all
>sslproxy_cert_error deny all

- 保存したらSquidを再起動

>service squid restart

- 正常に起動しているか確認。「active(runnning)」となっていればOK

>sudo systemctl status squid

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626626/90ce6a9d-cb68-d751-e7cd-81c39c45f4b5.png)

- sshを終了し、作成したクライアント用のルート証明書をダウンロード

>exit
>scp -r <ユーザー名>@<サーバーアドレス>:/etc/squid/squid.der "C:\temp"

- ダウンロードした証明書をクライアントにインポート
（場所は「信頼されたルート証明機関」を指定）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626626/a8c7fd69-c6d1-b06b-34bc-36fda6480b7f.png)

- プロキシサーバーに「サーバーアドレス:3128」を指定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626626/4075b246-cbf1-2e0c-3d2b-75d5d041d4d7.png)

※Pacファイルでプロキシサーバーを指定しても構いません。
その場合、以下のFQDNへの通信のみ対象としてください。
-login.microsoftonline.com
-login.microsoft.com
-login.windows.net


- ブラウザを再起動し、指定したテナント以外にはつながらないことを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626626/ccfd81a7-dba4-bd07-d711-b9102dde9632.png)
Diagramsは良さそうだけど、クラウド以外にも使えるか？

#Diagrams

https://diagrams.mingrammer.com/
の「About Diagrams」によると、

**Diagrams lets you draw the cloud system architecture in Python code.**

以下のようなものが、**非常に簡単に**:tada:Pythonコードでかける。
（図も上記のサイトから引用）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342207/1c1f1f0b-9b80-57a3-261e-672153211dbf.png)

#クラウド以外に使えるか？
Diagramsでは、AWSとかAzureとか、具体的な対象用に部品が準備されている。
普通の意味のダイアログに使えるのか？
そのような方向性で発展するのか？
とりあえず、簡単にカスタマイズできるか、、、ですが、
できそうな感じがします。
（カスタマイズは、方向性が逆かもしれませんが。。）

下記は、カスタマイズというか、単に、リソースを置換えてみただけだが。。。。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342207/420861ee-1f7e-1cda-a566-e170fcf08e40.png)


#今後
なんか、できそうな気もする。。。
Pythonによるダイアグラムの描画の観点での興味なので、Diagrams以外の他の手段もあるのかも。。。ただ、Diagramsの動向にも興味あり。

#余談
[最近よく見るあのてのイラストって、Qiitaの記事にも使えそう。いらすと。。。。](https://qiita.com/icebergiscoolssu/items/8f09f700c624cfbc1442)
に触発されて、「**いらすとや**」さんのイラストを活用してみた。
k8sのsvcからpodへの基本的なロードバランシング

k8sを勉強していて気づいたことをメモしています。
#やること
svcのLoadBalancerを使いPodにつなげる。
#Pod

```pod.yaml
apiVersion: v1
kind: Pod
metadata:
  name: sample-pod
         ~~省略
spec:
  containers:
  - image: tekitou:latest
    name: sample
    ports:
    - containerPort: 3000
      name: http-server
      protocol: TCP
```
portsでnameを指定しておくとsvcのTargetPortで使用できる。
#Service
```svc.yaml
apiVersion: v1
kind: Service
metadata:
  name: sample-svc
        ~~省略
spec:

  ports:
  - nodePort: 32039(適当)
    port: 3000(適当)
    protocol: TCP
    targetPort: http-server

  type: LoadBalancer
```

serviceの```spec.ports.nodePort```は```30000~32767```の範囲で割り当てる。
```spec.ports.port```では```pod.yamlのspec.containers.ports.containerPort```で指定したportと同じにする。
protocolのデフォルトはTCP。
あとはTargetPortで指定したPodの適切な場所に関連付けてくれる。
#svcのLoadBalancerタイプのデメリット
・httpパスでは通せない
・svc1つで1つのロードバランサーとなるためコスパが悪い


解決するにはIngressを使うのがいい。
[tailwindcss]tailwindcssをwebpackでバンドルする

# 概要

cssのフレームワークでtailwindcssが波に乗っているようなのでwebpackでバンドルする方法をハマった方法とともに記述する。

# 方法

node packageのインストール

```
npm install --save-dev optimize-css-assets-webpack-plugin webpack speed-measure-webpack-plugin

npm install --save tailwindcss@latest postcss@latest autoprefixer@latest

npm install --save-dev \
webpack webpack-cli webpack-dev-server  \
postcss tailwindcss \
postcss-loader css-loader style-loader \
```

tailwindcssの設定方法

```:webpackでentryに使用するjsfile
import "tailwindcss/tailwind.css"
```

構成fileの作成

```:terminal
#このコマンドでtailwind.config.ymlが作成される
npx tailwindcss init

#追加でwebpackでバンドルできるようにpostcss.config.jsを作成する
touch postcss.config.js
```

postcss.config.jsの設定

```:postcss.config.js
module.exports = {
  plugins: [
    require("tailwindcss")("./tailwind.config.js"),
    require("autoprefixer"),
  ],
}
```

webpackの設定

```:webpack.config.yml
const path = require("path")
module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
　　　　# ↓ここからcssに対してこの設定にしないとerrorになる
      {
        test: /\.css$/,
        use: [
          "style-loader",
          { loader: "css-loader", options: { importLoaders: 1 } },
          "postcss-loader",
　　　　　#↑ここまで
        ],
      },
    ],
  },
  // Optional for webpack-dev-server
  devServer: {
    watchContentBase: true,
    contentBase: path.resolve(__dirname, "dist"),
    open: true,
  },
}
```

これでtailwindcssが使えるようになる


#　参考文献
[公式](https://tailwindcss.com/docs/installation)

[Tailwind CSS Webpack Starter Project](https://github.com/tailwindlabs/webpack-starter)

[How to setup TailwindCSS with PostCSS and Webpack](https://blog.konnor.site/javascript/tailwindWebpackPostCSS/)
「統計的因果探索」（第2章：統計的因果推論の基礎 - その1）

[前記事](https://qiita.com/Thought_Nibbler/items/32c76dab4ec75a8c60b4)

---

# 反事実モデル
「ある薬を飲む」ことと「ある病気が治る」ことに因果関係があるかどうかを考える。
このとき、以下の両方を観測する必要がある。

1. ある薬を飲んだとき、ある病気が治ったか
2. ある薬を飲まなかったとき、ある病気が治ったか

「ある薬を飲んだ」とする（**事実**）と、「ある薬を飲まなかった」というのは事実に反する（**反事実**）。
このように、因果関係を知るためには事実と反事実の両方を観測する必要がある。

こういった枠組みを**反事実モデル（counterfactual model）**とよぶ。

## 個体レベルの因果
特定のサンプルに対する因果関係、すなわち**個体レベルの因果（unit-level causation）**を知りたい。

1. Aさんがある薬を飲んだとき、ある病気が治ったか
2. Aさんがある薬を飲まなかったとき、ある病気が治ったか

この場合、Aさんは1人しかいないので両方を観測できない。
すなわち、個体レベルの因果を知ることは不可能である。

## 集団レベルの因果
ある集団に対する因果関係、すなわち**集団レベルの因果（population-level causation）**を知りたい。


1. 集団の全員がある薬を飲んだとき、ある病気が治った割合はいくらか
2. 集団の全員がある薬を飲まなかったとき、ある病気が治った割合はいくらか

この場合も、同様の問題個体レベルの因果と同様の問題にぶつかる。
しかし、集団レベルの因果は調べることができる場合がある（らしい）。

# 構造方程式モデル
データ生成過程を記述するものの一つとして**構造方程式モデル（structual equation models）**がある。

ここでも例として、「ある薬を飲む」ことと「ある病気が治る」ことの因果関係について考える。

## 構造方程式
データ生成過程を以下の 2 つの方程式で表すことにする。
これらの方程式を**構造方程式（structual equation）**とよぶ。

$$
x = e_x \tag{1}
$$

$$
y = f_{y}(x, e_y) \tag{2}
$$

- $x$ : ある薬を飲むか
    - $x = 1$ : ある薬を飲む
    - $x = 0$ : ある薬を飲まない
- $e_x$ : $x$ を決めるための誤差変数
- $y$ : 病気にかかっているか
    - $y = 1$ : ある病気にかかっている（治っていない）
    - $y = 0$ : ある病気にかかっていない（治った）
- $e_y$ : $y$ を決めるための誤差変数
    - 「ある薬を飲む」かどうか以外で「ある病気が治る」かどうかを決める変数

## 内生変数と外生変数
変数 $x, y$ は構造方程式により値が決められる（左辺に現れるため）。
このような変数を**内生変数（endogenous variable）**とよぶ。
※構造方程式モデルの**内**部で**生**成されるから

一方、誤差変数 $e_x, e_y$ は構造方程式では値が決まらない（右辺にしか現れないため）。
このような変数を**外生変数（exogenous variable）**とよぶ。
※構造方程式モデルの**外**部で**生**成されるから

外生変数は、ある確率分布 $p(e_x, e_y)$ からサンプリングされて決まる。

## 構造方程式モデルの構成要素
構造方程式モデルは以下の4つ組として定義される。

1. 内生変数 : $x, y$
2. 外生変数 : $e_x, e_y$
3. 内生変数と外生変数を繋ぐ関数 : 式 $(1)$ の恒等関数と式 $(2)$ の $f_{y}$
4. 外生変数の確率分布 : $p(e_x, e_y)$

## 構造方程式モデルの因果グラフ
以下のように書ける。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36612/80218965-6ae2-d589-545c-406db79be0be.png)

- 直線矢印は依存する可能性がある場合に描く
    - $x$ の計算には $e_x$ が必要かもしれない
    - $y$ の計算には $e_y$ が必要かもしれない
    - $y$ の計算には $x$ が必要かもしれない
- 円弧矢印は未観測共通原因が存在する（誤差変数が独立でない）可能性がある場合に描く
    - $x$ と $y$ の未観測共通原因が考えられるので、 $e_x$ と $e_y$ は独立でないかもしれない
新人エンジニアのためのインプット大全

## はじめに
本記事はプログラミングの学習はおろか、今まで受験勉強以外でインプットしたことない！という新人エンジニア又は駆け出しエンジニアの方の為に自身のインターン経験を元に書き下ろします。
本記事を読むことで**継続的で成果に繋がる効果的なインプット**ができるようになります！（自分次第）

まずインプットの定義を確認しましょう。本記事では以下とします。
**インプットとは媒体を通して知識や技術を身に付けること**

さてインプットの定義も確認できたところで早速、具体的に何をすれば良いか、、、の前になぜインプットが必要か一緒に考えてみましょう。

## 目次
[1.インプットする目的](#1-インプットする目的)
[2.何をインプットするか](#2-何をインプットするか)
[3.どうやってインプットするか](#3-どうやってインプットするか)
[4.最後に](#4-最後に)
#1. インプットする目的
そもそもなぜ、インプットするのでしょうか？
自分自身、半年ほどインプットする目的を明確にせず、だらだらと全く以って無意味なインプットを繰り返していました。
その結果、*実務で使い物にならない*、*何度も同じ記事を読む*、*なんかわかった気になる*という最悪の三点セットを手に入れました。
まあ原因は単純で**記事を読むこと**が目的になっていたからこそ起きた事態ですね。

では、「インプットする目的」とは何か。
僕の場合は、成果を最大化するための手段を増やすことだと考えています。
分かりにくいので説明すると、成果は**プロダクトの成長、ソースコードの品質**で最大化とは**実装工数の短縮**や**保守性、拡張性、再利用性、可読性のあるコード**、**実装コストの最適化**を指します。（※成果、最大化が指すものは他にも多々存在します）
タスクを実装するために様々な視点から解決方法を考慮し、より良い手段で実現できるようにする。
これが僕の考えるインプットの目的です。

目的は十人十色だとは思いますが、目的を明確にすることは共通しています。
今すぐ、目的のないインプットはやめましょう。目的が明確でないのならばやらない方がマシです。時間の無駄なので。

#2. 何をインプットするか
さて、インプットする目的が明確になったところで次に何をインプットすべきか考えましょう。
例えば実務でRubyを使ってコードを書いています。Ruby自体はまだ触り始めて3ヶ月ほどです。
となるとRubyという言語への理解が全然足りていないはずです。
一案としてはRubyという言語が生まれたバックグラウンドやどういったことするのが得意または不得意なのか、どのような仕組みで動くのか、何のメソッドがあるのかなど基本的な知識をドキュメントまたはリファレンス等からインプットしてみるのも良いでしょう。

ここで一つ注意なのですが、できる限り**ハウツー記事**を読まないようにしてください。大体の初学者はハウツー記事を読むと思考停止して、理解した気になってしまいます。
これは本当に恐ろしいことです。エラーで詰まったときにハウツー記事を読んでその場では解決しても再度同じようなエラーで苦しむことでしょう。仕様や仕組みを理解することでしか乗り越えられません、、、
なぜこの処理は期待通りに動くのかを言語化できるのであれば問題ありませんが。

インプットする目標物を決定する際には今自分に足りていないものをリストアップし、重要度と緊急度を分けみると良いかもしれません。リストアップにはTrelloやEvernote、Google Keepなどのサービスがおすすめです。

#3. どうやってインプットするか
何をインプットするかを決めたら、どのような手段でインプットするかを考えましょう。
人間というものは愚かなもので毎日継続して何か努力しよう！と決心しても中々続かないものです。
やること自体忘れてしまったり、やる気が起きなくて後回しにしたり、理由は様々だと思います。
ということで面倒くさい事は機械にやってもらいましょう！

結論から言うと、**RSS** + **Slack**が一番楽でコストもかかりません。
RSSは記事やブログの情報を配信してくれる技術のことです。
上記の二つを組み合わせることで毎日決まった時間にSlack上で自分の読みたい記事を任意のチャンネルに送信してくれます。
例えばQiitaのRSSではSlack上で/tags/rails/feedを設定するとrailsの記事だけ取得することも可能でとても便利です。
（RSS+Slackの詳細設定につきましては今回省略させていただきます。Qiita上で検索かけるとヒットするのでそちらをご参考に）

さらにSlackのリマインダー機能を活用すれば、自分で時間を意識する必要もなくなります。
ここまですれば、あとはリマインド通知が来たら記事をクリックするだけです。非常に簡単です。

#4. 最後に
プログラミングを学習し始めて少しでも成長したいという方に役立てれば幸いです。
僕自身はまだまだ社会に出てないひよっこなので色々と考えながら、今後はエンジニアないし社会人として成長していきたいと思います。
最後までお読みいただきありがとうございました。