OmniAICreator/Qiita-1.07M huggingface dataset:
Win10+WSL2+rbenv+Ruby3.0+Rails6.1導入

## はじめに
5年ほどROMった上でのqiita初投稿です。
空気を読んでいるつもりですが、何かあったらコメントください。

## ターゲット

- Rails、Rubyを全く知らない人
- 何らかのプログラミング言語でコードを書いたことがある人
- ある程度shellの操作に慣れている人
- macがなくてwindowsしかない人

## 目的

Railsを知らない人が、こんなにぱぱっとwebアプリができるんだと思える
※「他にfrourioとかあるよ」とかは禁句😘

## やること

Win10(20H2)+WSL2+ubuntu20.04+rbenv+Ruby3.0+rails6.1+sqlite3

## 1. WSL2を入れる

[WSL2(Windows Subsystem for Linux)導入手順 - Qiita](https://qiita.com/kenchan1193/items/74edfc67910b51469b45)

せっかくだからWindows Terminalを使う。

[Windows Terminal を入手 - Microsoft Store ja-JP](https://www.microsoft.com/ja-jp/p/windows-terminal/9n0dx20hk701?activetab=pivot:overviewtab)

管理者として実行する↓

```powershell
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
```

（ここでWindowsを再起動）

```powershell
wsl --set-default-version 2
```

Windowsストアからubuntu20.04LTSをインストール、起動。

![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70400/e41f8307-3ab3-cb28-cc87-7f8f2f58e5aa.png)
？！？！？（音割れポッターの音）？！？！？

[https://aka.ms/wsl2kerne](https://aka.ms/wsl2kernel)l

これをインストールしたらできた。

![Untitled 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70400/38986ec5-1929-d1a9-c709-94d1adbc4072.png)

windows terminalにもうubuntuが表示されてる。すごい。

（おまけ）bashのプロンプトが気になるのでstarshipで手軽に小綺麗に。

[Starship: Cross-Shell Prompt](https://starship.rs/ja-jp/guide/)

## 2. rbenv+Ruby3.0を入れる

 この辺を参考にする。

[WSLで作るRuby on Rails環境構築 〜VSCode Remoteを添えて〜 - Qiita](https://qiita.com/Developer_KanZG/items/f329dd3dd197b2005390)

```bash
# Jaistに変更
sudo sed -i'~' -E "s@http://(..\.)?(archive|security)\.ubuntu\.com/ubuntu@http://ftp.jaist.ac.jp/pub/Linux/ubuntu@g" /etc/apt/sources.list
sudo apt update
sudo apt full-upgrade

# rbenvインストール
git clone git://github.com/sstephenson/rbenv.git ~/.rbenv
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(rbenv init -)"' >> ~/.bashrc
exec $SHELL -l

# rbenv-buildインストール
mkdir -p ~/.rbenv/plugins
git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build

# ruby3.0インストール
sudo apt install gcc
sudo apt install build-essential
sudo apt install libssl-dev libreadline-dev zlib1g-dev

rbenv install 3.0.0
rbenv global 3.0.0
```

## 3. Railsを入れる

```bash
gem install rails

# sqlite
sudo apt install libsqlite3-dev
gem install sqlite3

# node.js
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
exec $SHELL -l
nvm install --lts

# yarn
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update && sudo apt install -y yarn

# rails new まずは適当に
rails new Rails6.1_hands_on -T --skip-action-mailer --skip-action-mailbox --skip-action-text --skip-active-storage

rails s
```
（ターミナルにlocalhostのパスが出るのでそれをブラウザで開く）
![Untitled 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70400/f4ae5c87-87e4-bf1f-306f-b4d4a9438387.png)

yay!

※動かなかったら'exec $SHELL -l'でシェルを再起動してみてください。
[ruby]スコープとは

#初めに
アウトプットのため投稿させてもらいます

#スコープとは
スコープは変数の有効範囲のことです
範囲の外からはその変数を利用できないです

そのスコープに対応するためにRubyには様々な変数が用意されています。

#グローバル変数
スコープはプロジェクトの全ての範囲です

```
$global = "global"

def japan()
  p $global
end

japan()

#実行結果
"global"
```
変数は同じ名前のものが重複すると、予期せず値が書き換えられてしまう場合があるのできをおつけましょう

#インスタンス変数
スコープはインスタンス内ならどこでも参照できます

```
class Car
  def initialize(name)
    @name = name
  end

  def put_name
    puts @name
  end
end

car1 = Car.new("トヨタ")
car2 = Car.new("三菱")

car1.put_name
car2.put_name

#実行結果
トヨタ
三菱
```

実行するとインスタンス毎に違った値が出力されます

#クラス変数
スコープはクラス内です

```
class Car
  def initialize(name)
    @@name = name
  end

  def put_name
    puts @@name
  end
end

car1 = Car.new("トヨタ")
car2 = Car.new("三菱")

car1.put_name
car2.put_name

#実行結果
三菱
三菱
```

インスタンス変数と違いCarの名前が三菱で上書きされていることがわかります。

#終わりに
グローバル変数、インスタンス変数、クラス変数のスコープのアウトプットでした
Vue Component を rollup でビルドする際に気をつけること

## はじめに

rollup の Plugin は移ろいが早いので注意が必要、という話です。

## 1. 2019 年 ~ 2020 年初めに、rollup の公式 Plugin のほとんどが deprecated になった

既存の Plugin が軒並み deprecated になり、rollup 本家のリポジトリに移動されました。
例:

- [rollup-plugin-commonjs](https://github.com/rollup/rollup-plugin-commonjs)は deprecated
  - [@rollup/plugin-commonjs](https://github.com/rollup/plugins/tree/master/packages/commonjs)を使う
- [rollup-plugin-buble](https://
- github.com/rollup/rollup-plugin-buble)は deprecated
  - [@rollup/plugin-buble](https://github.com/rollup/plugins/tree/master/packages/buble)を使う

これ以外の `rollup/rollup-plugin-XXXX`も、全て `rollup/plugins`配下に移動しています。
過去記事だと`rollup/rollup-plugin-XXXX`を参照しているものも多いので注意が必要です。

## 2. TypeScript 用の Plugin が乱立している

- [@rollup/plugin-typescript](https://github.com/rollup/plugins/tree/master/packages/typescript/#rollupplugin-typescript)
  - 本家
- [ezolenko/rollup-plugin-typescript2](https://github.com/ezolenko/rollup-plugin-typescript2)
  - 3rd Party 製の Plugin だが、DL 数は本家に比べてこっちのほうが 4 倍くらい多い
- [rollup/rollup-plugin-typescript](https://github.com/rollup/rollup-plugin-typescript)
  - deprecated
- これ以外にもいっぱい

現状、本家の[@rollup/plugin-typescript](https://github.com/rollup/plugins/tree/master/packages/typescript/#rollupplugin-typescript)を使うのが良さそうです。

これらが乱立する経緯は、[こちら](https://github.com/rollup/plugins/issues/541)が分かりやすいです。
私は以下のように理解しました。

1. 公式で`rollup/rollup-plugin-typescript`が用意されたものの、TypeScript 1.X にか対応していなかった
2. TypeScript 2.X でも利用するため、3rd Party の Plugin が乱立
3. [ezolenko/rollup-plugin-typescript2](https://github.com/ezolenko/rollup-plugin-typescript2)がスタンダードになる
4. 公式が最新の TypeScript に対応した[@rollup/plugin-typescript](https://github.com/rollup/plugins/tree/master/packages/typescript/#rollupplugin-typescript)をリリース

## 3. rollup-plugin-vue でビルドした Component を Vue2 アプリで使用する場合は、rollup-plugin-vue v5 系を使う必要がある

[こちら](https://qiita.com/eyuta/items/5f68e65e3fafe9eb5c78)にまとめました。

逆に言えば、Vue3 アプリ用にビルドしたい場合は、最新(`rollup-plugin-vue v6`)を使います。
模写コーディングの始め方


# 概要
模写コーディングを始めるに当たり必要なツールと、プロジェクトを作成して作業を開始するまでの流れを紹介します。

# Chromeアドオンのインストール
以下のツールがあれば十分と思います。

### 1. Image Downloader
ページ内の画像を全て保存するツール
※ background-imageはchromeのDeveloperToolから手動でダウンロードする必要あり。
[https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj?hl=ja&]

### 2. What Font
利用されているフォントの調査用
[https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja]

### 3. Page Ruler Redux
要素や空白のサイズ調査用
[https://chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal?hl=ja]

### 4. ColorZilla
カラーピッカー
[https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=ja]

### 5. (PerfectPixel)
完成品と模写対象の画像差分を確認するためのツール。
ピクセルパーフェクトを目指す場合のみ必要。
[https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=ja]

# プロジェクトの作成
Webサーバーには「browser-sync」を利用し、ファイル保存時にリロードされるようにしながら開発を進めます。
[https://browsersync.io/]

### 1. プロジェクトのディレクトリ作成

```sh
$ mkdir sample
$ cd sample
```

### 2. browser-syncのインストール

```sh
$ yarn add --dev browser-sync
```

### 3. yarnスクリプト追加

```diff
# package.json

{
+  "scripts": {
+    "watch": "yarn browser-sync start --server --files *.html, *.css, *.js"
+  },
  "devDependencies": {
    "browser-sync": "^2.26.14"
  }
}
```

### 4. index.html追加

```html
# index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body> test </body>
</html>
```

### 5. watch開始
Webサーバーを起動します。デフォルトでは「http://localhost:3000/」 が環境のURLになります。

```sh
$ yarn watch
```

### 6. Rest CSSの読み込み
Reset CSSには色々ありますが、今回は「normalize.css」を利用しています。

```diff

<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
+	<link rel="stylesheet" href="./node_modules/normalize.css/normalize.css">
  </head>
  <body> test </body>
</html>
```
応用数学　第二章　確率・統計

##個人的メモ

#####集合とは何か

```math
S = a,b,c,d,e
```
```math
a \in \ S 
```

```math
b \in \ S 
```
a,b は集合Sの要素である。

```math
h \notin \ S 
```
hはSの要素ではない。

#####和集合と共通部分
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653571/4f8ab5d4-1c15-20d6-4aaa-1b5a3a1cbb60.png" width=20%>
読み方はAカップB

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653571/9efb9ae4-6d6f-01ff-d641-b4eb55346366.png" width=20%>
読み方はAキャップB

#####絶対補と相対補
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653571/68d34abe-9c35-95ac-e48e-8404d2b07aae.png" width=20%>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653571/87205e7a-49e9-420f-dd34-26b25763f97f.png" width=20%>


#####確率

- 頻度確率（客観確率）

発生する頻度
例：「１０本のうち１本だけ当たりくじを引いて当選する確率を調べたところ１０％であった」という事実

- ベイズ確率（主観確率）

信念の度合い
例：「あなたは４０％の確率でインフルエンザです」という診断


#####確率の定義

```math
P(A) = \frac{n(A)}{n(U)} = \frac{事象Aが起こる確率}{すべての事象の数}

```


```math
P(\overline{A}) = 1-P(A)

```
\\

```math
P(A\cap B) = P(A)P(B|A)
= P(B)P(A|B)
```

#####条件付き確率
- ある事象Bが与えられた下で、Aとなる確率 

例：雨が降っている条件下で交通事故に遭う確率

```math
P(A|B) = \frac{P(A\cap B)}{P(B)} = \frac{n(A\cap B)}{n(B)}

```

#####独立な事象の同時確率
- お互いの発生には因果関係のない事象Aと事象Bが同時に発生する確率


```math
P(A\cap B) = P(A)P(B|A)=P(A)P(B)
```

```math
P(A\cup B) = P(A)+P(B)-P(A\cap B)
```

#####ベイズ則
- 一般に事象Aと事象Bに対して

```math 
P(A)P(B|A)
= P(B)P(A|B)
```
MVCモデルについて

##MVCとは

JavaサーブレットとJSPを利用したMVCモデルの開発を経験したので、その備忘録としてMVCモデルについてまとめます。

まず、MVCモデルの意味についてですが
M(Model)V(View)C(Controller)の頭文字をとったものになります。

**Model**
データを格納しておくための入れ物や処理などを担当します。
　　処理→Logicクラス(Java)
　　データの入れ物→データの入れ物→JavaBEANSクラス
**View**
画面の表示を担当します。
　　画面の表示→JSP
**Controller**
ModelとViewなどの処理を依頼したり画面遷移させたりなど、窓口を担当します。
　　窓口→サーブレットクラス


###具体的な動き
![MVC説明.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1066052/95d3f1e0-cd5e-259f-7c6a-cb4a7ce849b9.jpeg)

図を見ていただくと「スコープ」というものが登場しています。
スコープについて詳しくは[こちら]()を参照してください。
今回の図ではリクエストスコープを利用する場合で考えます。

>
①サーブレットクラスでユーザーからのアクセスを受け取ります。この際、ユーザー側から情報が送られることがあるので、それを受け取る場合はサーブレットクラスで受け取ります。
②サーブレットクラスから引数としてLogicクラスに何か値を渡す場合、もしくはLogicクラスからの戻り値として値を返す場合などにJavaBEANSクラスの入れ物に入れて受け渡しを行います。
③スコープにデータを保存します。
④サーブレットからJSPに遷移します。
⑤スコープからデータを取り出します。
⑥ユーザーに画面を表示します。
※よく参考書などででてくる**「リクエスト」**は①の動きで**「レスポンス」**は⑥の動きに当たります。

###補足

ここでは説明を割愛しましたがデータベースへの参照や登録や更新や削除がこの作業に追加された場合には、データベースを操作するためのLogicクラス(DAOクラス)というものを作成し、コントローラー→DAOクラス→データベースというアクセスになります。

また、逆にLogicクラスすら使わず、クリックしたら画面を遷移するだけの場合などはサーブレットとJSPだけでも画面遷移は可能です。図でいうところの①④⑥の動きです。
Macのzipコマンドについて(.DS_Store混入)

# はじめに
AWSのElasticBeanstalkでアプリケーションをzip化しようとした際に、問題点にぶつかったので、書き留めておきます。

# zipコマンド

## ファイルの圧縮

`zip [圧縮ファイル出力名] [圧縮の対象ファイル]`

下記のフォルダ構成でpythonフォルダ内のデータのみ圧縮したい場合は、pythonフォルダ内に移動し、zipコマンドを実行します。

```
.
└── python
    ├── EBSampleApp-Python.iml
    ├── application.py
    └── cron.yaml
```

```bash:実行コマンド
cd python
zip ../test1.zip *
```
### 作成後のデータ確認

`zipinfo [zipファイル名]`

zipファイルの情報を確認する事ができます。

```bash:作成されたzipファイル1
$ zipinfo test1.zip 
Archive:  test1.zip
Zip file size: 2641 bytes, number of entries: 4
-rw-r--r--  3.0 unx       84 tx defN 20-Jan-15 12:49 cron.yaml
-rw-r--r--  3.0 unx     6148 bx defN 21-Feb-05 20:12 .DS_Store
-rw-r--r--  3.0 unx     4981 tx defN 21-Feb-05 20:02 application.py
-rw-r--r--  3.0 unx      612 tx defN 20-May-30 08:57 EBSampleApp-Python.iml
```

## .DS_Storeを含まずに圧縮する方法

macの場合、ファイル管理用の`.DS_Store`が含まれてしまっている場合がある。
明示的に特定のファイルを含めたくない場合は`-x`オプションで指定します。
AWSでzipファイルをアップロードしてソースコードを展開するサービス [^1]は `.DS_Store`が含まれていても問題なく動作しました。
[^1]: ElasticBeanstalkやLambdaなど。


```bash:コマンド例
zip ../test1.zip * -x "*.DS_Store"
```


## フォルダの圧縮

`zip -r [圧縮ファイル出力名] [圧縮の対象ファイル]`

下記のフォルダ構成でpythonフォルダを圧縮したい場合は、zipコマンドに`-r`オプションを指定します。

```
.
└── python
    ├── EBSampleApp-Python.iml
    ├── application.py
    └── cron.yaml
```

```bash:実行コマンド
zip -r test2.zip python/*
```

### 作成後のデータ確認

下記の情報からわかるように、pythonフォルダ自体も圧縮ファイルに含まれている。
`zip -r test2.zip python/*`で圧縮対象ファイルを`python/*`と指定しているので、隠しファイル等は含まれていない。

```bash:作成されたzipファイル2
$ zipinfo test2.zip 
Archive:  test2.zip
Zip file size: 2907 bytes, number of entries: 3
-rw-r--r--  3.0 unx      612 tx defN 20-May-30 08:57 python/EBSampleApp-Python.iml
-rw-r--r--  3.0 unx     4981 tx defN 21-Feb-05 20:02 python/application.py
-rw-r--r--  3.0 unx       84 tx defN 20-Jan-15 12:49 python/cron.yaml
```

## フォルダ内の隠しフォルダも含めて圧縮したい場合

下記のコマンドで圧縮します。

`zip -r test3.zip python`

## フォルダ内の隠しフォルダも含めて圧縮したい場合(DS_Storeを除く)

`zip -r test4.zip python -x "*.DS_Store"`

## 当該フォルダ内で隠しフォルダも含めて圧縮したい場合（DS_Storeを除く）

一つ上の階層に「test.zip」というフォルダ名で圧縮フォルダを作成します。
対象のファイルには、`-r`オプションでフォルダを指定して、対象ファイルを`.`でカレントディレクトリに設定することで隠しファイルやフォルダを含む事ができます。

`zip -r ../test.zip . -x "*.DS_Store"`

# まとめ
zipファイルを作成するときは、「`.DS_Store`が混入していないか？」「意図しないフォルダ構成になっていないか？」を確認する為に、完成したzipファイルを確認しましょう！

```bash:zipファイル確認コマンド
zipinfo [zipファイル名]
```
【初学者むけ】CookieとSessionのお話

こんにちは。

私を含め初学者の方が躓きやすいCookieとSessionについて、
備忘録を兼ねた解説を行いたいと思います。

##Cookieとは

WEBブラウザとWEBサーバーの一連のやり取りにおいて、状態を保持管理するための仕組みのこと。

##Sessionとは

WEBブラウザとWEBサーバーのやり取りにおいて、一連の関連性のある処理の流れのことをセッションと呼びます。
例えばECサイトなどで、「商品を選ぶ」「商品を買い物カゴに入れる」「商品を確認する」「商品を購入する」といった、
処理の流れ（一時的な活動）がセッションとなります。

##ではなぜ必要なのか
通常私たちが使用しているWEBブラウザが行うHTTP通信は状態を保持する仕組みがありません＝「ステートレスな通信」。
例えば、先ほどのSessionの箇所で記載した処理の流れは、それぞれが異なるHTTP通信です。
そのため、WEBサーバー内に状態が保持されていなければ商品を確認することができないと言った事態になります。
cookieはそんなHTTP通信を補完し、以前の状態を踏まえたうえで次の動作処理させるための仕組みとして生まれました。

##通信ではどんなやり取りが行われているか
WEBサーバーへの通信を行い、レスポンス通信に「Set-Cookie」ヘッダーを含めることでブラウザへcookieを送信しています。
この際にcookieの有効期限等を設定することができます。それにより、ブラウザは以降のHTTP通信に「Cookie」ヘッダーを
含めることができるようになるので、WEBサーバーは誰が接続してきたのかを識別することができるようになります。
基本的に有効期限の設定されていないcookie（セッションcookie）はWEBブラウザが閉じられると同時に削除されます。

##Sessionの存在理由とは
上記でSessionは処理の流れと記載しましたが、厳密に言うとWEBサーバーから返されるcookieのなかに
SessionIDが含まれています。その事から、WEBサーバーはブラウザから送られてくるcookieのなかに保存された
セッションIDを識別し、WEBサーバー内に保存されているセッションデータを参照することができます。
つまりSessionが無ければ個人を識別することもできないですし、処理を進めることもできないというわけですね。
そのため、セッションIDが盗まれてしまうと、なりすましなども可能になります＝セッションハイジャック。



以上、簡単ではありますがcookieとSessionのお話でした。
[Python] Oracle DBに接続する

```py

import datetime

import numpy as np
import pandas as pd
import cx_Oracle as orcl


TARGET_HOST = "xx.xx.x.x"
PORT = "1521"
SERVICE_NAME = "***"
USERNAME = "***"
PASSWORD = "***"

## 接続識別子の作成
tns = orcl.makedsn(TARGET_HOST, PORT, service_name=SERVICE_NAME)

## DBへの接続
ora_con = orcl.connect(USERNAME, PASSWORD, tns)

SQL="""
select *
from table
"""

# データを取得してDataFrameへ変換
df = pd.read_sql(SQL, con=ora_con)
df.head()

## DBセッションの終了
ora_con.close()

```
【CSS】wow.jsが動かない時の対処法。CDNではなくファイルを直接読み込む

アニメーションを設定するwow.jsを設定しても動かずハマったのでその対処法について。


##症状

以下のように、`animate`をつけたクラスと`wow`単体では機能する。

```html:html（動く）
class="animate__animated animate__zoomIn"
class="wow animate__animated animate__zoomIn"
```

wowでスクロールが差し掛かったタイミングで表示されるのと、animate.cssは機能している状態。

しかし、このクラス設定を、animateなしの、`fadeIn`や`bounceInUp`にすると動かなくなる、、

```html:html（動かない）
class="wow bounceInUp"
class="wow fadeIn"
```

<br>
##結論
animate.cssをCDNで読み込んでいたのがダメだった。
**wow.jsの公式githubでDLしたフォルダに入っている`animate.css`をローカルで読み込む**必要がある。


https://github.com/matthieua/WOW

Download Zip（もしくはgit clone）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/dab65ffe-9ddc-fce3-8f40-d572e7b1dff9.png)


WOW/css/libs/animate.cssに入っている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/dcb7c325-73c3-8d75-1962-cee6250c551d.png)

CDNではなく、このファイルを読み込むようにしたらちゃんと動いた。


<Br>
##感想
[wow.jsの公式ページ](https://wowjs.uk/docs.html)にいくと、[animate.css](https://animate.style/#best-practices)の公式ページに誘導され、そこにCDNでもいいって書いてあるのに、、紛らわしい、、


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/4bd048af-fe1c-7763-31c6-c5d83988b299.png)
Pythonではand、orを使うよりもall、anyを使うほうがわかりやすいかも？

# `and`、`or`で書く場合
Pythonの`if`文で複数の条件を指定するときは、`and`や`or`を使うことが多いと思います。

``` and1.py
if a > 0 and a % 2 == 0 and a != 10 and a != 100:
    pass
```

ただ、この書き方では条件が増えると1行が長くなりすぎてしまいます。
しかも、条件の区切りが若干わかりづらい気もします。
そこで改行を入れることもできます。

``` and2.py
if (
    a > 0 and
    a % 2 == 0 and
    a != 10 and
    a != 100
):
    pass
```

こう書くこともできます。

``` and3.py
if (
    a > 0
    and a % 2 == 0
    and a != 10
    and a != 100
):
    pass
```

1行が短くなって見やすくなりました。
しかし、`and`がある行とない行があるのが少し気になります。

``` and4.py
if (
    a > 0 and
    a % 2 == 0 and
    a != 10 and
    a != 100  # この行だけandがないのが気になる
):
    pass
```

そこで`and`と`or`の代わりに`all`と`any`が使えるんじゃないかと思いました。

# `all`、`any`で書く場合

`all`はPythonの組み込み関数で、リストなどの中身がすべて`True`であれば`True`を返す関数です。
また、`any`は中身に一つでも`True`があれば`True`を返します。
これを使うと上のコードは下のように書き換えることができます。

``` all1.py
if all([
    a > 0,
    a % 2 == 0,
    a != 10,
    a != 100,
]):
    pass
```

おお、見やすい！
すべての条件式が揃っているので美しい気がします。

# `in`、`not in`を使って書く場合

さらに`in`や`not in`を使うことを思いつきました。

``` in.py
if False not in [
    a > 0,
    a % 2 == 0,
    a != 10,
    a != 100,
]:
    pass
```

見た目的には`all`を使う場合とあまり変わりません。
しかし、「`False`が入っていない」ということが`and`と同じということはちょっと直感的ではない気がします。

# 速度の比較

実行速度はどうでしょうか。比較してみました。

```
$ python -m timeit 'True and False and False and True'      
10000000 loops, best of 5: 22.7 nsec per loop

$ python -m timeit 'all([True, False, False, True])'        
2000000 loops, best of 5: 102 nsec per loop

$ python -m timeit 'False not in [True, False, False, True]'
10000000 loops, best of 5: 39.6 nsec per loop

$ python -m timeit 'False not in {True, False, False, True}'
10000000 loops, best of 5: 34.4 nsec per loop
```

こうしてみると、やはり`and`を使うのが一番速いようです。
`not in`を使う方法は意外と健闘しています。リストの代わりに集合を使うことで若干高速化されるようです。
この中では一番遅いとはいえ、`all`を使う方法も致命的に遅いわけではないので、実用的だと思います。

というわけで、条件式が増えた場合、`and`の代わりに`all`、`or`の代わりに`any`を使うのは良さそうだと思いました。

# 短絡評価に注意

`and`を使った場合、一番左の条件が`False`なら、右の条件は評価されずに`False`であると評価されます。
一方で`all`を使った場合、一旦リストを生成するため、すべての条件が評価されます。

単に右側の条件も評価するから遅い、というだけならあまり問題はないのですが、次のようなケースで問題が起こります。

``` and5.py
if a is not None and a > 0:  # aはNoneかもしれないが、短絡評価によってエラーが出ない
    pass
```

これを

``` all2.py
if all([
    a is not None,  # aはNoneかもしれない
    a > 0,  # aがNoneのときも評価され、エラーが発生する
]):
    pass
```

こう書き換えてしまうと、コメントに書いたようにエラーが起きてしまいます。
これはどうすればいいんでしょうか。

`None`判定だけ出すのは少し変な気がします。

``` all3.py
if all([
    a is not None,
    b is not None,
]) and all([
    a > 100,
    b > 1000,
]):
    pass
```

短絡評価される`all`演算子がほしい。
gitコマンドを実行したら「xcrun: error: invalid active developer path」というエラーが出た時の対処法

# はじめに
gitコマンドを実行しようとしたらエラーが発生したので、その解決方法をメモとして残しておきます。

# エラー内容
`git init`　で以下のエラーが発生しました。

```zsh:エラー内容
% git init
xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
```

# 対処
`xcode-select`コマンドでコマンドライン開発者ツールをインストールします。

```zsh:インストール
% xcode-select --install
xcode-select: note: install requested for command line developer tools
```
するとポップアップが表示されるので流れに沿って進んでいきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82090/0635e9e1-7696-a64c-7e99-63d3a2e8d8e4.png" width=70%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82090/31dfdf5b-02c6-5a64-18a8-f31f137462ab.png" width=70%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82090/6faa5193-ae3f-163d-8594-16cdfbb4128e.png" width=70%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82090/a96f67fc-b690-329e-5abd-6f9432c9a8b2.png" width=70%>
初めは2時間以上の表示が出ましたが、なんだかんだ5分くらいでインストール完了しました。
それでは再度実行します。

```zsh:再実行
% git init
Initialized empty Git repository in /Users/work/.git/
```
無事実行できました。


# おわりに
macOSのバージョンアップを行なったりするとこのような事象が発生するようです。
【Swift】デリゲート超超超入門

## 概要
デリゲートがよく分からないので調べました。

## デリゲートって何
[Swift の Document](https://docs.swift.org/swift-book/LanguageGuide/Protocols.html#:~:text=Delegation%20is%20a%20design%20pattern,an%20instance%20of%20another%20type.&text=Delegation%20can%20be%20used%20to,underlying%20type%20of%20that%20source.) にはこのように書かれています。
>Delegation is a design pattern that enables a class or structure to hand off (or delegate) some of its responsibilities to an instance of another type. 

>デリゲートとは、クラスまたは構造体がその責任の一部を別の型のインスタンスに渡す（または委任する）ことを可能にするデザイン・パターンです。

謎が深まるばかり…

## キャラクターに置き換えて考えてみる

つまり、責任の一部を委任するとはどういうことなのか、キャラクターに置き換えて考えてみました。

---

ここはとある会社で、社長と複数の従業員がつとめています。
従業員たちは毎朝会社の金庫の鍵当番を従業員の中から決めており、社長から依頼されたら金庫の鍵を開けます。

社長は今日の鍵当番がどの従業員なのかは知りません。
従業員は自分が今日の鍵当番だと知っていますが、いつ社長に呼ばれるかは知りません。

社長「鍵当番の人、金庫の鍵を開けてください」
社員A「はい、私が鍵当番です。鍵を開けます」

---

現実なら、声を出せば鍵当番が駆けつけてくれますが、プログラムではそうはいきません。

そこで登場するのがデリゲートです。



### サンプルコード
```swift

// デリゲートメソッドを作成
protocol KeyManagedDelegate {
    func keyManaged()
}

// 社長クラス
class President {
    
    var delegate: KeyManagedDelegate?
    
// デリゲートを持っている人に keyManaged() を実行してもらう
    func keyHolderAppointed() {
        delegate?.keyManaged()
    }
    
}

// 社員構造体
struct Employee: KeyManagedDelegate {

    var employeeName: String
    
    init(handler: President, name: String) {
        employeeName = name
        handler.delegate = self
    }
    
    func keyManaged() {
        print("\(employeeName) opened the safe with the key.")
    }
}

let gendo = President()
let shinji = Employee(handler: gendo, name: "shinji")

gendo.keyHolderAppointed()

// shinji opened the safe with the key.
```
定数 `gendo` は、誰が `KeyManagedDelegate` を持っているかは把握していなくても、`keyManaged` を呼び出すことができます。

定数 `shinji` は、`gendo` の指令を受け取り、自身が持つ `keyManaged` を実行します。

## ところで　handler.delegate = self　って何してるの？

先程のコードでは、`Employee` を初期化するときに `handler.delegate = self`　を実行していました。

ここでは、`President` がデリゲートメソッドの処理を実行したときに `Employee` が通知を受け取れるようにしています。

キャラクターに置き換えると、鍵当番が社長の連絡を受け取り鍵を開けられるようになります。

詳しい解説記事
[【Swift】hogehoge.delegate = self は何をしているのか。](https://qiita.com/jumpyoshim/items/7667e0cc81ad91016f03)

## まとめ
処理を委任する人は委任先が誰なのか知らなくても実行できるため、機能を拡張したり View を増やしたりしたときに柔軟に対応できるのだと思います。
デリゲート、なんとなく響きが専門用語っぽくて圧があるけど実はそんなに怖くないのでしょうか？
テスト30

```vb

Sub Clstest()

'標準モジュール
'クラス型配列っぽいもの

Dim clsHensu As Hensu
Dim i As Long
Dim Las_Row As Long
Dim myPersons As Collection

Set clsHensu = New Hensu
Set myPersons = New Collection

Las_Row = ThisWorkbook.Sheets("テスト").Cells(Rows.Count, 7).End(xlUp).Row

With ThisWorkbook.Sheets("テスト")

    For i = 2 To Las_Row
    
        Set clsHensu = New Hensu
        
        clsHensu.Takasa = .Cells(i, 7)
        clsHensu.Taijuu = .Cells(i, 8)
        clsHensu.Jusyo = .Cells(i, 9)
        clsHensu.Nenrei = .Cells(i, 10)
        clsHensu.Eat = .Cells(i, 11)
        clsHensu.Sports = .Cells(i, 12)
        myPersons.Add clsHensu, CStr(.Cells(i, 6).Value)
        
    Next

End With

'-----------------------------------------------
Dim c As Variant
i = 2
With ThisWorkbook.Sheets("テスト")

    For Each c In myPersons
    
        .Cells(i + 10, 7) = c.Takasa
        .Cells(i + 10, 8) = c.Taijuu
        .Cells(i + 10, 9) = c.Jusyo
        .Cells(i + 10, 10) = c.Nenrei
        .Cells(i + 10, 11) = c.Eat
        .Cells(i + 10, 12) = c.Sports
    
        i = i + 1
        
    Next

End With


End Sub

'-----------------------------------------

'クラスモジュール(Hensu)

Public Takasa As Long
Public Taijuu As Long
Public Jusyo As Variant
Public Nenrei As Long
Public Eat As String
Public Sports As String

'----------------------------------------
'ステータスバー

Application.StatusBar = False

Application.StatusBar = "進捗状況：□□□□□"

Application.StatusBar = "進捗状況：■□□□□"

Application.StatusBar = "進捗状況：■■□□□"

Application.StatusBar = "進捗状況：■■■□□"

Application.StatusBar = "進捗状況：■■■■□"

Application.StatusBar = "進捗状況：■■■■■"

Application.StatusBar = False


Sub Macro4()

Dim i As Long

i = 2
With ThisWorkbook.Sheets("Sheet8")

    Do Until .Cells(i, 1).Value = ""

    '    ActiveCell.FormulaR1C1 = "20210529"
        .Cells(i, 1).FormulaR1C1 = .Cells(i, 1).Text
    
        i = i + 1
    
    Loop

End With

    
End Sub
【黒魔術】TerraformでCloud Runを更新確認 & ビルドしてデプロイする

GCPのCloud RunをTerraformでいい感じに利用する方法を考えてみました。
ソースコードからイメージをビルドしてCloud Runにデプロイするところまでを目指します。
既存の機能だとビルドができないっぽいのでシェルやらハッシュチェックやらを駆使していい感じに仕上げます。若干Dirty hack感はありますが。

```
# ソースコードをzipに固める。
data "archive_file" "src_archive" {
  type        = "zip"
  source_dir  = "./src"
  output_path = "./src.zip"
}

# 既存の機能でビルドはできないので、シェルを直接たたく。
resource "null_resource" "build" { 
 triggers = { # ファイルのハッシュ変更を実行のトリガにする。
   file_hashes = jsonencode({
   for fn in fileset("src", "**") :
   fn => filesha256("src/${fn}")
   })
 }
  provisioner "local-exec" {
    # ビルドコマンド
    command = "gcloud builds submit --project your-project-name --tag gcr.io/your-project-name/image_name"
    working_dir = "./src/"
  }
}

# Cloud Runをデプロイする。
resource "google_cloud_run_service" "service" {
  depends_on = [null_resource.build]
  name     = "service"
  location = "us-east1"

  template {
    spec {
      containers {
        image = "gcr.io/your-project-name/image_name"
        env {
          # 環境変数が変わるとリソースが作り直されるので、ソースコードのハッシュを入れている。
          name = "SOURCECODE_MD5" 
          value = data.archive_file.src_archive.output_md5
        }
      }
    }
  }

  traffic {
    percent         = 100
    latest_revision = true
  }
}
```

いじょう。

こんなに頑張ってハックしなくても簡単にできるようにアップデートしてほしいですね。
【Heroku】HerokuでpushするときのFailed to install gems via Bundler.

#プログラミング勉強日記
2021年2月5日
作成したアプリを初めてHerokuでデプロイするときにエラーが出たのでその対処法を備忘録として残す。


#エラー内容
　Herokuにpushするときに、以下のようなエラーが出てきた。`bundle install`を実行し忘れていたためエラーが出た。


```:エラー内容
$ git push heroku master

Failed to install gems via Bundler.
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/c0ed7ceb-2713-2b87-2c71-d3fcc722a5ed.png)


#対処法
　`bundle install`を実行後もう一度pushすると解決した。

```
$ bundle install
$ git push heroku master
```
金をかけずにiPad(iPhone)でgitしたい

普段github pagesをMacでいじってる人が
iPadでgit+αできる環境を整えたときのメモです
#アプリ一覧
シェル
[ish](https://apps.apple.com/jp/app/ish-shell/id1436902243) Alpineのエミュレータ

(ここから先はなくても大丈夫)

エディタ
[kodex](https://apps.apple.com/jp/app/kodex/id1038574481)

ファイル管理系
[ファイル(デフォルト)](https://apps.apple.com/jp/app/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB/id1232058109)
[documents](https://apps.apple.com/jp/app/documents-by-readdle/id364901807)

#メモ
##gitとpythonのインストール
$ apk add git
$ apk add python3

...OK
の表示が出たらインストール成功
...error
が出た場合はもう一度apk addする

##githubからクローン
ファイルアプリ > ish > rootがホームディレクトリ
OAuthについては勉強中

$ git clone https://github.com/[user]/[repo].git
![128F0566-C8B0-4BF4-9C23-B2C684E23862.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479627/9d0f0dd7-35bc-8542-9023-d9caa8d1d251.png)


##ローカルサーバー
$ python3 -m http.server [port]

デフォルトのポートは8000
safariからlocalhost:8000でアクセスできる
ポート番号を指定しないでアクセスしたい場合[port]=80
同じローカル回線に繋いでいる端末からならiPアドレスを指定してアクセスできる

終了したい場合は ^C (ctrl-c)
![82DACFB8-212C-40B6-98B0-8B67DB80965F.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479627/17cac75f-f8a5-3167-bcf2-c19697230547.png)


##追加→コミット→プッシュ
$ git add .
$ git commit -m "update some files"
$ git push origin [branch]

##リモートの変更を確認→ローカルに適用
$ git fetch
$ git pull
![B5BBE082-CE69-40AA-AEE7-31D8522AC8BC.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479627/19af6971-b1be-39be-2979-a7146b6182f6.png)
Rspecでログインができなくて困ったときの対処法（deviseでメール認証機能を追加した人向け）

##はじめに
Rspecで「ログインしているユーザーの場合はparkings/newにアクセスでき、ログインしていない場合はリダイレクトされる」テストを書いたのだが、ログインが出来ず、テストコードが通らなかった。
この記事ではログインのやり方と、なぜ沼にハマったかを解説しようと思う。

##この記事の対象者
- deviseのメール認証機能（：confirmable）を使っている人
- Rspecのエラー原因がわからなくて困っている人

##元のコード

```ruby:spec/requests/parkings_request_spec.rb
describe "GET /new" do
    context "ログインユーザーの場合" do
      before do
        user = create(:user)
        sign_in user
      end
      it "正常にレスポンスを返すこと" do
        get new_parking_url
        expect(response).to expect(response).to be_successful
      end
    end

    context "ログインしていない場合" do
      it "サインイン画面にリダイレクトすること" do
        get new_parking_url
        expect(response).to redirect_to new_user_session_path
      end
    end
  end
```

##エラーメッセージ
```
Failure/Error: expect(response).to be_successful
       expected `#<ActionDispatch::TestResponse:0x000055e82a5aed68 @mon_mutex=#<Thread::Mutex:0x000055e82a5aecf0>, @mo...>true}, @request=#<ActionDispatch::Request GET "http://www.example.com/parkings/new" for 127.0.0.1>>.successful?` to be truthy, got false
```

エラーメッセージでググってみたが解決に役立つ記事はなかった、、、

##解決するまでにやったこと
そういえばブラウザのリクエストに対して正常にレスポンスを返すことを確認するには「expect(response).to expect(response).to be_successful」以外にもあった気がする。

調べた結果、「expect(response).to have_http_status(200)」を使うこともあるとのこと。

試しにこれでテストコードを書いてみる。

```ruby:spec/requests/parkings_request_spec.rb
describe "GET /new" do
    context "ログインユーザーの場合" do
      before do
        user = create(:user)
        sign_in user
      end
      it "正常にレスポンスを返すこと" do
        get new_parking_url
        expect(response).to have_http_status(200)　→ここを変更
      end
    end
```

するとエラーメッセージが次のように変わった。

```
1) Parkings GET /new ログインユーザーの場合 正常にレスポンスを返すこと
     Failure/Error: expect(response).to have_http_status(200)
       expected the response to have status code 200 but it was 302
```

302エラーが出ているということはリダイレクトされているということ。
つまり、何らかの原因でsign_inがうまくいってないということが考えられた。

~RSpec初心者のdevise認証システムテスト~
https://qiita.com/zongxiaojie/items/d488edd42ba3864859c7

上の記事によると、deviseでメール認証機能をつけている場合はサインインの前に user.confirm を行い認証を済ませておく必要があるらしい。

```ruby:spec/requests/parkings_request_spec.rb
describe "GET /new" do
    context "ログインユーザーの場合" do
      before do
        user = create(:user)
        user.confirm　→ここに追記
        sign_in user
      end
      it "正常にレスポンスを返すこと" do
        get new_parking_url
        expect(response).to have_http_status(200)
      end
    end
```

この後テストを実行したら無事うまくいった。

##反省点
今回エラーの原因究明に遅れた理由として、正常なレスポンスが返されることを確認する際に「expect(response).to be_successful」を使っていたことがあげられる。
確かにマッチャーは便利だが、それを使っていて何がエラーの原因かがわからなくなるのでは本末転倒だと感じる。

今後は不用意にマッチャーを多様せず、両者を使い分けていけるようになろうと思う。

##最後に
今後の励みになりますので、この記事が役に立ったと思う方はLGTMをお願い致します。
TableViewでSectionを使うときの備忘録

#はじめに
今回初めてTableViewのSectionを使ったのですが、参考にしたサイトによってSection数を記述するためのコーディングに2パターンあり、一方だとエラーが出てしまいます。この理由がなかなかわからず沼にハマってしまったため備忘録的に残します。

#ection数をコーディングするときの注意点
まず、こちらの方法だとビルドに成功しました。
```
 func numberOfSections(in tableView: UITableView) -> Int {
        return 0
    }
```
以下だと失敗しました。
```
func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return 0
    }
```

#さいごに
Section数によってCellの数が違う時などArrayの数が異なるためOptional型でnillエラーを起こしてしまうこともありました。TableViewのSectionを初めて使う方などはお気をつけください。
なお、一方は既述のバージョンが古いためにエラーが出てしまったという可能性も十分にあります。今回初めて実装して沼にハマってしまったことなのでご了承ください。
MacBook Pro(M1)にHomebrewをインストールする

MacBook Pro(M1)にHomebrewをインストールして開発環境構築の下準備をします。

#スペック
一応、使用したマシンのスペックを書いておきます。

```
MacBook Pro 13.3インチ
処理能力: Apple M1チップ
メモリ: 16GB
ストレージ: SSD 1TB
OS: macOS Big Sur(Version1.1)
```

#Homebrewのインストール
 __Terminalを起動__
![Screen Shot 2021-02-05 at 16.33.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1083406/4aaa59ca-fafa-6944-63ed-7bf19c39bf08.png)


 __Homebrewのインストール__
[Homebrew](https://brew.sh/index_ja)にアクセスして
![Screen Shot 2021-02-05 at 12.41.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1083406/3026f2f3-e760-0d95-e3b7-2f2c15a3d889.png)

コマンドをコピーしてTerminalに貼り付けEnterで実行、今回は以下のコマンドを使用します。

``` bash
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```
__(2021/05/31追記)__
現状だとこの環境でインストール出来ないソフトも多いのでユニバーサルバイナリを使いbrewをインストールする方法も書きます。(intelアーキテクチャで実行できるのでm1対応前のものも使いたい方はこちらで)

```bash
arch -x86_64 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
````

パスワードの入力を求められるので、Macのパスワードを打てばOK。この後パスワードが求められたら適宜入力。
![Screen Shot 2021-02-05 at 18.54.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1083406/7ec8d7e9-67e2-8af3-fb0c-06df7285c225.png)

下の画面が出たら、Enterで続行(他のキーを押すとキャンセルされるので注意)。
![Screen Shot 2021-02-05 at 18.59.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1083406/1cbd11cb-12e8-64af-e45d-e609b2755985.png)

あとは自動的にインストールしてくれるので気長に待ちましょう。全て終わるのに12分かかりました。
Xcode Command Line Toolsのダウンロード&インストールに時間が掛かるみたいですが、これがないとgccでエラーが出ます。

__PATHを通す__

インストールは終了しましたが、PATHが通っていないようです。(intelアーキテクチャでインストールした方はPATH通しは入りません)
![Screen Shot 2021-02-05 at 19.17.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1083406/bdf0507c-5f83-3238-aa5d-4b98197647f3.png)

brewコマンドのロケーションはわかるので

``` bash
 /opt/homebrew/bin/brew
```
と打てば使えます。PATHを通してbrewと打つだけで実行できるようにします。

```bash
export PATH=$PATH:/opt/homebrew/bin
```
これで、~/(ホームディレクトリ)からbrewコマンドを打てるようになりましたが、このままだと新しくTerminalを開いたときにコマンドが使えません。以下を実行します。

```bash
echo export PATH='$PATH:/opt/homebrew/bin' >> ~/.zshrc
```
macOS Catalina以降、デフォルトがzshになったらしいので.zshrcに書き込みます。

最後に以下を実行して、

```bash
brew
```

(intelアーキテクチャの方はこちら)

```bash
arch -x86_64 brew
```

brewで使えるコマンド一覧が出てきたら成功です。
![Screen Shot 2021-02-05 at 20.11.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1083406/4c6a5214-ee38-9244-86b0-4a312f78a974.png)

(2021/05/31追記)
最後にm1とintel向け両方をインストールして使い分ける方法を書きます。

__両方同時にインストールではなく片方が完了してからインストール行ってください__
例えば、m1向けbrewをインストールし終えてからintel向けbrewをインストールしてください。

```bash
brew
````
の場合はm1向けで/opt/homebrew/bin/brewが実行されます。

```bash
arch -x86_64 brew
```
の場合はintel向けで/usr/local/bin/brewが実行されます。(出来ない方は/usr/local/binにPATHを切ってください)

ここでarch -x86_64が何かと便利そうなので、すぐ使えるようにaliasを切っておきます。M1 Macだとデフォルトがzshなのでルートディレクトリの.zshrcを編集、なかったら作成します。

```bash:~/.zshrc
alias intel="arch -x86_64"
```

これで

```bash
intel brew
```
とスマートに決めれます！

お疲れ様でした！
【Vue.js】動的に複数のコンポーネントを切り替える

下記のように、ボタンクリックによりコンポーネントを切り替える。

![ee10fa0a954e1095dd69a7dd99b63094.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547556/cc4aba6f-89bd-6d81-6a90-c890522d2647.gif)
##v-ifディレクティブを用いた場合。

```App.vue
<template>
  <div>
    <button @click="currentComponent = 'home'">home</button>
    <button @click="currentComponent = 'about'">about</button>
    <home v-if="currentComponent === 'home'"></home>
    <about v-if="currentComponent === 'about'"></about>
  </div>
</template>

<script>
import home from "./components/home.vue";
import about from "./components/about.vue";

export default {
  components: {
    home,
    about,
  },
  data() {
    return {
      currentComponent: "home",
    };
  },
};
</script>
```

```about.vue
<template>
  <p>about</p>
</template>
```

```home.vue
<template>
  <p>home</p>
</template>
```
##componentタグにis属性を用いて切り替える場合。

```App.vue
<template>
  <div>
    <button @click="currentComponent = 'home'">home</button>
    <button @click="currentComponent = 'about'">about</button>
    <component v-bind:is="currentComponent"></component>
  </div>
</template>

<script>
import home from "./components/home.vue";
import about from "./components/about.vue";

export default {
  components: {
    home,
    about,
  },
  data() {
    return {
      currentComponent: "home",
    };
  },
};
</script>
```

##切り替えた際にデータを保持しておく
componentタグで、コンポーネントを切り替えた場合、vueインスタンスのcreateとdestroyを行っている。そのため、非表示となったコンポーネントはdestroyされるため、データは保持されない。
keep-aliveタグで囲むことにより、destroyされずに値を保持しておくことができる。

```vue
<keep-alive>
  <component v-bind:is="currentComponent"></component>
</keep-alive>
```
##切り替えの際に、処理を呼び出す場合

activatedメソッド、deactivatedメソッドを用いることにより、表示非表示切り替えの際の処理を定義することができる。

```home.vue

<template>
  <p>home</p>
</template>
<script>
export default {
  activated() {
    console.log("activated");
  },
  deactivated() {
    console.log("deactivated");
  },
};
</script>
```
Cloudflareからの接続のみ許可する

##まずはじめに
自分用の忘却しないためのメモになります
###Cloudflareとは？
>Cloudflare, Inc.は、コンテンツデリバリーネットワークやインターネットセキュリティサービス、DDoS防御、分散型ドメイン名サーバシステムを提供するアメリカ合衆国の企業で、同社が提供するCDNは閲覧者とホスティングプロバイダー間でリバースプロキシとして動作する。

というものです。
簡単に言うとサーバのデータにリクエストがあった場合Cloudflareのサーバにキャッシュがあればそこから配信してくれる。おまけにDDos攻撃なども防いでくれる。

<b>Cloudflare = 最強</b>

ということです。

###転送量を抑えられるが...

Cloudflare側のサーバ(CDN)からデータが配信されるので、転送量を抑えることが可能となっていますが、Cloudflareを経由しないでアクセスしてこられたりということがしばしばあります。
ここではCloudflare以外からのアクセスをすべてブロックする方法を記述します。

***

###IP制限をかける

cloudflareで使われているIPアドレスを調べます
[CloudflareのIPアドレス](https://www.cloudflare.com/ips/)

次に現在サーバで動かしているApacheのバージョンを調べます。


```info.php
<?php phpinfo(); ?>
```
これで現在のApacheのバージョンが表示されます。

<b>Apacheのバージョンが2.2の場合</b>

```htaccess.txt
Order allow,deny
Deny from all
deny from 173.245.48.0
```
<b>Apacheのバージョンが2.4の場合</b>

```htaccess.txt
Require all granted
Require not ip 173.245.48.0
```

<b>コードの意味</b>

- order allow,deny ：allow（許可）、deny（拒否）の順番を記入します。
- allow from all ：
特定のホスト以外のアクセス全てを許可すると言う意味です。
- deny from ：
制限をかけるホスト、IPを指定します。複数指定する場合は、１行ずつ指定します。

上記のようなコードをhtaccess.txtなどのファイル名で作成して保存します。

***
###いざアップロード!

先ほど作成したhtaccess.txtを制限をかけたいディレクトリにアップロードします。
そのあとにhtaccess.txtを.htaccessに名前を変更します。
Wordpressならディレクトリ直下にあるはずです。
このときパーミッションに注意してください。


以上でCloudflareでのみアクセスできるようになるはずです。

###動作確認

アップロードしたディレクトリにブラウザでアクセスし、アクセスを許可されたホスト、IPから制限がかかっていないことを確認してください。制限がかかっている場合、403（Forbidden）エラーが表示されます。

***

###おわりに

意外と簡単でした
stマイコンgpio設定(pull up/down , push pull/open drain)について調査してみた

#概要
Stm32マイコンのgpio設定した際にpull up/down設定とoutput mode時のpush pull /open drain設定について詳しく知らなかったので調査してみた。

#pull up/down設定
pull up/downはご存知の通り、不定な電圧レベルをhigh or lowに固定させるための設定である。マイコンによってはpull up/down設定が、portがinput mode設定の時のみしか反映されない。stm32のデータシートを見るとpull up/downの抵抗は入手力機能の外側に付けられている(
下図)。そのためinput/output mode問わずに電圧を固定できる。
![3DEF40E4-1105-4506-93FB-99038A624C17.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700308/5cb9c3fa-e5d1-fc21-7eac-43ca055c146f.jpeg)


#push pull とopen drainについて
portをoutputモードにした時に設定できるのがpush pullとopen drainの2つである。
Push pullの構造はスイッチが上下に2つついておりhighとlowを切り替える。
Open drainはスイッチが1つのみでスイッチoffの時、出力電圧が不定になる。そこで外付けでpull up抵抗をつけることで電圧highを出力できる。釣り上げる電圧を選択できるので5V系icから３.３v電圧を出力できる(下図)

![3BE6941A-743E-4B8E-B09A-733A8F0C5476.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700308/6deaca17-1c80-7e6b-7649-bcd8eb1fb2a4.jpeg)

#参考
https://www.st.com/resource/en/reference_manual/dm00043574-stm32f303xb-c-d-e-stm32f303x6-8-stm32f328x8-stm32f358xc-stm32f398xe-advanced-arm-based-mcus-stmicroelectronics.pdf
jetson agx xavierにPyTorchをインストールする

こちらから転載しています
https://wally-ngm.hatenablog.com/entry/2021/02/05/201403

pipからpytorchをインストールしようとすると，このようなエラーがでちゃいました．．．

```
Command "python setup.py egg_info" failed with error code 1 in /tmp/pip-build-7PRgOy/torch/
```

## ARM用にビルドされたバイナリを使う必要がある

こんな手順でできるそうです．
これは[公式](https://forums.developer.nvidia.com/t/pytorch-for-jetson-version-1-7-0-now-available/72048)がサポートしてくれています．
1.7.0をインストールする手順を示していますが，他のバージョンのインストールも可能です．
(URLとかは先程の[リンク](https://forums.developer.nvidia.com/t/pytorch-for-jetson-version-1-7-0-now-available/72048)にあります！)

```
pip3 install cython
wget https://nvidia.box.com/shared/static/cs3xn3td6sfgtene6jdvsxlr366m2dhq.whl
mv cs3xn3td6sfgtene6jdvsxlr366m2dhq.whl  torch-1.7.0-cp36-cp36m-linux_aarch64.whl
pip3 install torch-1.7.0-cp36-cp36m-linux_aarch64.whl
sudo apt install libopenblas-dev
```


### cythonをインストールせずに行うとこういうエラーがでます

```
ModuleNotFoundError: No module named 'Cython'
```

```
Command "/usr/bin/python3 -u -c "import setuptools, tokenize;__file__='/tmp/pip-build-3caqz9c0/numpy/setup.py';f=getattr(tokenize, 'open', open)(__file__);code=f.read().replace('\r\n', '\n');f.close();exec(compile(code, __file__, 'exec'))" install --record /tmp/pip-qk46wyli-record/install-record.txt --single-version-externally-managed --compile --user --prefix=" failed with error code 1 in /tmp/pip-build-3caqz9c0/numpy/
```

### libopenblas-devをインストールせずにtorchをimportするとこんなエラーもでます

```
libopenblas.so.0: cannot open shared object file: No such file or directory
```
カスタムキャストのキャラでバ美肉リアルタイム配信したい(iPhone+macOSで)

# カスタムキャストのキャラでバ美肉リアルタイム配信したい(iPhone+macOSで)

皆さん、バ美肉してますか？とは言え、アバターを作るの大変ですよね。
最近だと、カスタムキャストとかVカツとかいろいろアバターを作成して配信なんてアプリがあります。
ただ、残念なのは、配信サービスが限定されることと、キャラだけで他のものを映せないってことです。
学会とかでアバターを右下に置きながらプレゼン配信とかしたいじゃないですか。

そこで、皆さんお持ちのiPhone+macOSでバ美肉リアルタイム配信をする方法を確立できたっぽいので共有してみようと思います。
なお、試験環境は、
* Mac mini(2020, M1)/macOS 11.4 Big Sur
* iPhone 12 Pro MAX /iOS 14.4
です。

## 必要なもの
必要なものはこんな感じです。

* Mac
* iPhone 
* Lightningケーブル
* OBS Studio
* CamTwist
* お好みのV配信ソフト(cf.カスタムキャスト) ←iPhone上で動作

### Mac
MacはOBS Studioの動作推奨環境から以下を満たす必要があります
macOS 10.10以降
Intel CPU / Apple Silicon
OpenGL 3.2互換GPU (だいたい2012年以降のマシンなら大丈夫っぽいです)

### iPhone
Lightning端子が生きているiPhoneならOKだと思う。出来れば、最新OSにアップデート出来るモデルを。

### Lightningケーブル
充電専用ではなくmacがiPhoneを認識できるもの。安定したケーブルが望ましい。純正である必要は無し。

### OBS Studio
中核になるアプリ。いろんな映像/音声入力をリアルタイム合成して、仮想カメラに出力できる。

### CamTwist
いろんな入力を仮想カメラに出力するアプリ。アプリケーションの画面をOBS Studioに出力するのに使う。

## 最初の準備
macOSにOBS StudioとCamTwistをダウンロードしてインストール。多分、要管理者権限。
ダウンロード先は、以下の通り。
[OBS Studio](https://obsproject.com/ja/download)
[CamTwist](http://camtwiststudio.com/download/)

後、MacとiPhoneをLightningケーブルで接続。USBハブ経由でも大丈夫です。

## CamTwistの設定
CamTwistを起動すると、何を仮想カメラに出力するかを選択する画面が出てきます。
"Step 1: Select a video sources"では、Desktop+を選択しましょう。
すると、"Step 3: Adjust Settings"にDesktop+という項目が出てきます。それを選択すると、Settingsに詳細設定が出てきます。
ここでは、"Selct from exsiting windows"にチェックを入れて送信したいウインドウを選択します。(あらかじめ出しておきましょう)
Save Setupをクリックすればこの設定を保存できるので、適当な名前を付けて保存します。 
ここで、[View]-[Preview]を選べば、右下に、キャプチャされて仮想画面に出力されている映像のプレビューが出ます。

## OBS Studioの設定
OBS Studioを起動すると、自動構成ウィザードが起動します。用途に合わせて選びましょう。私は、"仮想カメラのみ使用する"にしていますが、配信サービスの配信キーを持っているのなら、配信を優先を選んでも良いでしょう。
さて、初期設定が終われば、どういう画面構成を取るかが出てきます。
ここで、"ソース"の+ボタンを押して、映像キャプチャデバイスを追加します。映像キャプチャデバイスを選んでいる状態で、"プロパティ"をクリックすると、映像キャプチャデバイスの設定画面が出ます。ここでデバイスにiPhoneの名前が載っていれば、それを選んでやります。
そうすると、iPhoneの画面が映されると思います。カスタムキャストを起動していれば、カスタムキャストの画面が映ります。ここで配信ボタンを押すと、iPhoneカメラでのモーション&フェイストラッキングされた自分のアバターが表示されます。
背景を青一色、または緑一色にしておきましょう。どちらが良いかは、キャラに使われていないほうの色と考えてください。両方使っている時はご愁傷様。
さて、映像キャプチャデバイスを選択した状態で"フィルタ"をクリックします。すると、フィルタ追加画面が出ます。カラーキーを使うと、背景を消すことが出来ます。キャラまで消えてしまったら、カスタムキャスト側で背景色を変えてみてください。
また、余計な空白がある場合は、"クロップ/パッド"を追加し、適当な数字を入れるといい感じになります。環境によって違うので、いろいろ試してください。

さて、iPhoneで表示しているアバターが表示されているだけだとつまらないですね。
CamTwistでキャプチャしている画面を追加してあげましょう。フィルタ画面を閉じると最初の画面に戻ります。
ここで、また"ソース"の+ボタンを押して、映像キャプチャデバイスを追加します。今度はデバイスは、"CamTwist"を選んでやりましょう。そうすると、ウインドウキャプチャされた画面が最前面に出ます。
適度に順番を決めて、やりましょう。

さて、ここから配信開始です。
メイン画面の右にある"仮想カメラ開始"をクリックします。色が変わった状態になればOKです。

## 配信
配信サービスのウェブページを開き、配信を開始します。この時に、カメラデバイスに"OBS Virtual Camera"を選んでやると、OBS Studioに映っている画面がそのまま実況されます。
では、皆様、良いバ美肉ライフを。

![スクリーンショット 2021-02-03 14.37.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85155/e7409fe1-a179-c4d6-4ba2-1e5778d6b03f.png)
【黒魔術】TerraformでCloud Functionsを更新確認してデプロイする

TerraformでAWS lambdaをデプロイすると、コードに更新があった時だけリソースも更新してくれますよね。
GCP Cloud Functionsの場合、残念ながらコードを更新してもリソースの更新がかかりません。
今回は、そんな残念なTerraformくんにDirty hackを仕込んでちゃんとコードを更新したときにリソースにも更新がかかるようにしたいと思います。
まあ、アップロードするファイルにmd5付けるだけなんですけどね。

```
# Cloud Functionsにアップロードするファイルをzipに固める。
data "archive_file" "src" { 
  type        = "zip"
  source_dir  = "./src" 
  output_path = "./src.zip"
}

# GCS Bucketにzipで固めたソースコードをアップロードする。
resource "google_storage_bucket_object" "src" { 
  # ここでパスにmd5を付与することで、変更が検知できるようにする。これがだいじ。
  name   = "functions/src_${data.archive_file.src.output_md5}.zip" 
  bucket = "foo_bucket"
  source = data.archive_file.src.output_path
}

resource "google_cloudfunctions_function" "service" {
  name                  = "service"
  runtime               = "python37"
  source_archive_bucket = "foo_bucket"
  source_archive_object = google_storage_bucket_object.src.name
  trigger_http          = true
  available_memory_mb   = 128
  timeout               = 120
  entry_point           = "run"
}
```


おわり。
【初心者でもわかる】文字のよこにアイコン画像を綺麗に設置する3つの方法（無料アイコンサイト紹介も）

# どうも7noteです。文字とアイコンを横並びに並べる方法を紹介

無料で使える沢山のアイコンが増えたように思います。どこのサイトも見やすくまとまっていて、なにより沢山あるのがとても助かります。
そんなアイコンたちを綺麗に配置するにはCSSの知識がかかせません。

アイコンと文字を並べる方法を3つご紹介したいと思います。



## 方法①　背景画像に入れる

```index.html
<p class="menu01">メニュー</p>
```

```style.css
p.menu01 {
  background: url(./icon.png) no-repeat left center / auto 1em;  /* 背景画像でアイコンを入れる */
  padding: 0 0 0 1.5em;  /* アイコン画像分 + 適度な間隔 */
}
```

![sample1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/bc203595-1b09-3504-063d-9d9c775c2afc.png)


**-メリット-**
・文字幅に合わせて大きさを調整できる

**-デメリット-**
・枠をはみ出るような位置に配置したら切れる
・色は変えにくい


## 方法②　アイコンフォントを設置

※事前にheadでアイコンフォント(fontawesome)を読み込む必要あり！
`<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">`

```index.html
<p class="menu02"><i class="fas fa-bars"></i>メニュー</p>
```

```style.css
.menu02 i {
  margin-right: 0.5em;  /* 適度な間隔 */
}
```


![sample2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/4d75ce51-f6fc-d648-d0f0-955fadb7b03b.png)


**-メリット-**
・文字幅に合わせて大きさを調整できる
・色を変えるのが簡単

**-デメリット-**
・アイコンフォントを読み込む必要がある。


## 方法③　画像をposition指定する

```index.html
<p class="menu03"><img src="./icon.png">メニュー</p>
```

```style.css
.menu03 {
  position: relative; /* 基準位置とする */
}

.menu03 img {
  position: absolute; /* 相対位置とする */
  top: 4px;           /* 上から4pxの位置に指定 */
  left: -1.5em;       /* 左にマイナス1.5文字分の位置に指定 */
}
```
![sample3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/2114bf31-8593-cc4c-3dc9-55dcbd3c79d9.png)

**-メリット-**
・枠をはみ出たところにも配置可能

**-デメリット-**
・文字サイズが変われば、画像サイズも変えないといけない
・色は変えにくい

## まとめ

今回は大きく分けて3つの方法にしましたが、fontawesomeをposition指定して配置するような方法などもあります。
このように組み合わせて使うこともできますし、横並びだけでいいならフレックスボックスをつかう方法など様々な方法があります。

その時々で使い分けしたり、目的に合わせたり、周りのデザインに合わせて適切な方法で作成してください。


## おまけ：無料で使えるおすすめアイコンサイト

・fontawesome（アイコンフォント）
http://fontawesome.io/icons/

・ICOOON MONO（アイコン画像集）
https://icooon-mono.com/
※日本語なので探しやすい！

・iconmaster（アイコン画像集）
https://iconmonstr.com/

ほかにもいろいろあると思うので探してみてください！

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
YouTubeの視聴時間を減らせる拡張機能の開発

# 概要
やるべきことがあるのについつい見てしまう、現代人の最大の敵ことYouTube。そんなyoutubeと健全にお付き合いできるChrome Extentionを開発します。
実際の処理としては動画再生中にサジェストされるサムネイルの数を半減させることで興味のある動画が表示される確率を減らします。

# manifest
まず、拡張機能に関する設定をmanifest.jsonに書き込んでいきます。

```json:manifest.json
{
    "manifest_version": 2,
    "name": "reduce_youtube",
    "version": "1.0",
    
    "browser_action": {
        "default_title": "reduce_youtube"
    },
    "content_scripts": [
        {
            "js": ["reduce_youtube.js"],
            "matches": ["https://*.youtube.com/*"]
        }
    ]
}
```

jsにスクリプトファイルを、matchesに反映させたいURLを記述します。


# JavaScript
```javascript
function reducing(){
	let i = 0;
	document.querySelectorAll("ytd-compact-video-renderer").forEach((element) => {
		if (i % 2){
			element.style.opacity = 0;
		}
		i ++
	})
};
```
これが適応させたい関数です。サムネイルに付与されているクラス`ytd-compact-video-renderer`の要素すべてを取得してそのうち半分（奇数番目）について透明度を0にすることで、強制的に見えなくしています。

これを実行するために以下のようなコードを書いてみました。どうでしょうか

```javascript
// 読み込み時実行
window.addEventListener('load', function(){
	console.log("load");
	reducing();
});
```
実はこのコードでは動かないことがあります。この理由は以下の記事に書いてありました。

> YouTube、動画間の遷移でPjax的なことをしているので、動画ページ内で別の動画をクリックして遷移した場合、Chrome ExtensionのJSを再読込してくれません。
[YouTubeをラジオ化するChrome Extensionを作りました](http://fjmk.hatenablog.com/entry/2016/09/25/175000)

そこで、以下のように要素の変更を検知して実行するようにしなければいけません。

```javascript
// オブザーバインスタンスを作成
let observer = new MutationObserver(function(mutations) {
	console.log("mut");
	reducing();
});

// 監視する要素
let target = document.querySelector('head');

const config = {
    childList: true,  // 子ノードに対する追加・削除を監視
    subtree: true  // 子孫ノードまで監視
};

observer.observe(target, config);
```
これでサムネイルを半減することができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678160/e5bd553c-6c42-20d7-125e-9ecf803d37f8.png)



# 参考文献
- [YouTubeをラジオ化するChrome Extensionを作りました](http://fjmk.hatenablog.com/entry/2016/09/25/175000)
- [使ってみよう！MutationObserver！](https://qiita.com/ryo_hisano/items/9f15ae87d691d497bc17)