OmniAICreator/Qiita-1.07M huggingface dataset:
シェル変数と環境変数

こんにちわ!　[@darry6335](https://twitter.com/darry6335) です。
現在Lipic102の試験勉強中なのですが、3章 GNUとLinuxコマンドに関して学習した際に調べたことをここに記したいと思います。

---
###Linuxにおいて、シェルは2つある（シェル変数と環境変数）

---
###シェル変数
シェル変数は、現在実行しているシェルの中だけで有効な変数
setコマンドで現在有効になっている変数の一覧を確認できる。
bashを起動したり、logoutすると無効になる

---
###環境変数
~~新たにシェルを起動したり、logoutしても継承される変数~~
HISTSIZE変数やPATH変数、HOSTNAMEなど、様々な環境変数があり printenvコマンドで現在設定されている環境変数の一覧を見ることができる。
ユーザ固有の情報や全ユーザ共通の情報が設定されている。

[参照 IT用語辞典より](https://e-words.jp/w/%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0.html)
環境変数とは、OSが設定値などを永続的に保存し、利用者や実行されるプログラムから設定・参照できるようにしたもの。プログラムの実行時などに必要となる、利用者やコンピュータごとに内容が異なる設定値などを記録するために用いられる。

UNIX系OSでは、TZの他にも、標準コマンドなどの置かれているパス（path）を設定する「PATH」や、現在の利用者のアカウント名を表す「USER」、現在の利用者のホームディレクトリのパスを表す「HOME」、利用者の使う言語（日本語、英語など）を設定する「LANG」、カレントディレクトリを表す「PWD」、デフォルトのシェルのパスを指定する「SHELL」などがよく用いられる。

---
##シェル環境のカスタマイズ

###1.シェル変数の定義
####set 変数名=値
定義するときは$は付けない
![22キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/866385/865cf27a-865b-7c1c-4e1f-2a3cb8686e91.png)
####変数の確認
出力するときは$を付ける
![22キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/866385/84066bec-2742-06cf-f6da-dc5d682cb498.png)
csh,tcshはArrayの定義が可能
![22キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/866385/d61f5faf-c1fa-0213-ae5d-ac9a67c7f99f.png)

###2.シェル変数の一覧表示
####set 引数なし
![22キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/866385/aa0df2af-fdb8-08eb-5507-9a375584892a.png)
(上記以外にも色々有りました)

###3.シェル変数の削除
unset 変数名
![22キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/866385/94cbb7aa-a8d2-ded5-ab19-85c06368fb9a.png)

###変数の参照 (定義した要素数を出力する)
echo $#変数名
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/866385/c8edfb2b-8577-2397-1978-ba238df5b1b4.png)

---
###1.環境変数の定義
export 変数名=値

2.環境変数の一覧表示
env （引数なし）

###3.シェル変数の削除
unset 変数名

---
###エイリアスの設定
linuxでは、任意のエイリアスを登録することができる。
alias [alias名=実行内容]
###alias一覧を表示する(引数なし)
###aliasの解除
unalias alias名
上記のコマンドをシェル上で叩けばaliasの設定はできるが、logoutするとaliasは無効になってしまうので次回以降もlogin後使いたいaliasを設定する場合は、設定ファイルに書き込む必要がある。

---
###ユーザ個別の参照ファイル
各ユーザのHome dir に格納されている。
ない場合は、新規作成する
###1.login時に読み込み
~/.bash_profile > ~/.bash_loginb > ~/.profile
※上記の順で検索し、いずれかのファイルが存在すれば読み込む
###2.bash起動時に読み込み
~/.bashrc
bashシェルのオプション指定は、set +/- で指定する

---
###コマンド実行されるまでの処理フロー
1.コマンド入力
2.PATH変数に登録されているディレクトリを検索
3.処理の実行
pathlib.Pathのちょっと便利な使い方

# なにこれ
- pathlibのちょっと便利な使い方、書けるけどあまり見ない書き方
- "/"で繋げられるとか、os.pathとの対応表ではないです

# argparseと組み合わせる

- pathに関する引数をPath(args.path)としてラップし直すのを回避できる
- clickでも同じく。

```python:argparse+pathlib
import argparse
from pathlib import Path

parser = argparse.ArgumentParser()
parser.add_argument("hoge", type=Path)
args = parser.parse_args()
print(args.hoge)
# PosixPath("hoge")
```

# Pathオブジェクト作成と同時にmkdirも済ませる

- pathを与えたときに、pathに関する処理をまとめて担うclassを作成する

```python:Path+mkdir
from pathlib import Path

class HogeHuga(type(Path()):
    def __init__(self, path):
        self.mkdir()
        self.huga = self/"huga"
        self.huga.mkdir()

hoge = HogeHuga("hoge")
print(hoge)
# PosixPath("hoge")
print(hoge.huga)
# PosixPath("hoge/huga")
print(hoge.huga.exists())
# True
```

# Pathの指定をos.path.join的に行う

- Pathの引数を複数与える

```python:os.path.joinっぽい
from pathlib import Path

path = Path("hoge", "huga")
print(path)
# PosixPath("hoge/huga")

path = Path("hoge")/"huga"
# こちらのほうが短い

hogehuga = ["hoge", "huga"]
path = Path(*hogehuga)
# リストにディレクトリ構造を保持しているならこちらのほうがいいかも
```

# with open(path)をスマートにしたい

```python:Path.open()
from pathlib import Path

path = Path("hoge")
with path.open(mode="r") as f:
   huga = f.read()
```

# 読み書きをもっとスマートにしたい

- いちいちopenを書きたくない

```python:Path.read_text
from pathlib import Path

path = Path("hoge")
path.write_text("huga")
txt = path.read_text()
print(txt)
# huga
```
Postmanでpostリクエストが送れなくて泣いた男の話

Railsでapiモードを使い始めてpostmanを利用するようになりましたが、利用してからまだ3日と非常に日が浅く、しょーもないことでハマってしまいました。同じような人を出さないためにここに書き残そうと思います。ちなみにほんとに泣いてはいません。

##環境
Rails 6.1.3

##はじめに
結論から言います。自分の場合は`json形式にせずにtext形式で送っていたことがハマった原因`でした。これを見て思い当たる節がある人は今すぐtext形式からjson形式に変えて送ってみましょう。ね、しょうもないでしょ？

##やりたかったこと
postmanでpostリクエストを送ってcontactインスタンスを保存しようとしました。

```contacts_controller.rb
class V1::ContactsController < ApplicationController
.
.
 def create
    @contact = Contact.new(contact_params)
    @contact.save
    render json: @contact, status: :created
 end
.
.
 private
    def contact_params
      params.require(:contact).permit(:first_name, :last_name, :email)
    end
end
```

```routes.rb
Rails.application.routes.draw do
  namespace :v1 do
    resources :contacts
  end
end
```

これでhttp\://localhost:3000/v1/contactsのpostにデータを送れば保存されるはずでした。

##Postリクエスト失敗
Postmanで以下の形式でPostリクエストを送ることを試みます。

```
{
    "contact": {
        "email": "hoge@foo.com",
        "first_name": "hoge",
        "last_name": "foo"
    }
}
```
![14ECE5B1-743E-4E6A-9675-02F1CD813522_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1091995/595df47b-4629-8d90-d984-4f4ae734968e.jpeg)

あれ？
エラーが出てる...

##解決
text形式からjson形式に変更すれば解決できました!

ここ(赤丸)を↓
![829697E1-BCA9-43F0-AAF5-132F2D301794_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1091995/57a061a8-5af9-ff2f-cf7a-8d44ea562099.jpeg)

こうして(json形式)...
![8AA15229-D777-4771-B792-07C08A063A02_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1091995/39e5ce50-16d3-1858-23ad-8e3a52c25a2c.jpeg)

できた!
![5A01E056-069D-4F8F-A448-1E3F42A47EFC_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1091995/f9b5f941-0cd4-a03b-7a22-bf54c04d78b3.jpeg)

##おわりに
こんなので一日費やしてしまいました...。ちゃんと形式は確認しようね。おわり
初心者がAndroidアプリを作ってみる　～Viewを配置する～

#**初めに**

Androidアプリの自己学習として、シリーズ化を目指しています。
過去の記事を記載しておきますので、
Androidアプリは作ったことがないよ！
という方がいれば、以前の記事から見ていただければ幸いです。

リンク
・[初心者がAndroidアプリを作ってみる　～開発に必要なツールの設定～](https://qiita.com/t-namba/items/e9272635e9e85f25438d)
・[初心者がAndroidアプリを作ってみる　～プロジェクトの作成～](https://qiita.com/t-namba/items/69161387bee61c0187aa)
・[初心者がAndroidアプリを作ってみる　～アプリを起動する～](https://qiita.com/t-namba/items/ff24bca81be9459bd302)
・[初心者がAndroidアプリを作ってみる　～レイアウトエディタの画面構成について～]
(https://qiita.com/t-namba/items/7534f8e5b7039dbea130)

また遅くなりました。。。
アプリ云々より記事書くのが苦手なんだなと最近気づきましたが、
まだまだ続けていきます…！
前回はレイアウトエディタの画面構成についてでしたが、
今回はViewを配置してみます。
※ウィジェットについて書こうと思っていましたが、ひとまず飛ばします。

#**Viewの配置**
**Viewの削除**
まずは中央に表示されているHello World!を消してみます。
Hello World!をクリックして[delete]キーを押下します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530030/f27abc89-8824-c683-8ea2-8448323d9210.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530030/d2f24992-39bd-ff47-a8da-f6b1bcb7d17c.png)

**Viewの配置**
次に新しくViewを配置してみます。
画面が見難いのでデザインプレビューのみにしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530030/48611fcf-e3e0-ba41-fb0d-7be8bca3d011.png)

パレットから[TextView]をドラッグ＆ドロップします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530030/d579d996-50a9-372b-f354-8089289cafe7.png)



#**制約の設定**
次に、制約の設定をしていきます。
最初に削除したHello World!のように画面中央に表示されるように制約を設定してみます。
方法はいろいろありますが、まずは上下左右の〇を画面の上下左右に引っ張ってみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530030/28972a37-e899-0eda-25b1-2a182025f947.png)

結果として中央に配置されます。
画面を横向きにしても中央に表示されるため、確認してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530030/49369688-1c7e-bb6c-f963-1db4271e0266.png)

余談ですが、最初に削除したHello World!が中央に表示されていたのも、この制約が設定されていたためです。


また、設定した制約は、[すべての制約をクリア]から削除することが出来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530030/38124487-b8de-d9d7-2526-32d1c8516404.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530030/b0b99a92-ca4c-dc33-ef95-943214bfd0dd.png)


#**属性の設定**
右側に表示されている属性を変更してみます。
まず、この[TextView]のIDをmessageTextViewと設定しておきます。
今後プログラムからこの部品を扱っていく際、このIDを使用することになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530030/5e20302c-12af-0564-744a-bc74d3c767a5.png)

テキストは右下の共通属性から変更できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530030/07bc047d-e63f-53e2-8cd8-831bf12b50ae.png)

次にフォントサイズの変更ですが、
属性上部の検索欄からsizeと入力してみてください。
[textSize]のプルダウンからサイズを選択することが出来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530030/81dfe574-3d97-8a06-115c-ca2481117bc8.png)


#**最後に**
今回は、「Viewを配置」して終了にさせていただきます。
他にも様々な設定が可能なため、何を設定できるか試してみるといいかもしれません。

#**参照**
[ドットインストール　Androidアプリ開発入門](https://dotinstall.com/lessons/basic_android_v3/43407)
JavaScriptでテキストボックスの中身を空にする方法&HTMLで、ある箇所をテキストボックス化する方法

#はじめに
前回の記事https://qiita.com/men_blu/items/8fb773029516026b6d15
で、YouTubeで紹介されていたサンプルのクイズアプリケーションをtodoアプリに改造する方針を固めた。

今回の実装においてユーザーが使用する流れとしては、
青いテキストボックスにタスク名を入力しその達成度に応じたボタンを押す=>画面が切り替わり空になったテキストボックスに他のタスクを入力する．．．(繰り返し)とする。

そうすると
1.文字列が入力可能であるテキストボックスと、
2.ボタンを押すとテキストボックスに入力されていた文字列が空になる機能
が必要となる。

そこで今回は、Webページのある箇所をテキストボックスに置き換える方法と、ボタンを押したタイミングで中身を空にする方法をご紹介する。

至極初歩的な方法を用いているので、どうぞご安心されたい。

# ある要素をテキストボックスにする
まず、タスク名を入力可能にするため下記画像の'ゲーム史上、最も売れたゲーム機はどれ?'と記載がある部分をテキストボックス化する。

![スクリーンショット 2021-03-16 14.21.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/961542/7cf25c99-84e1-b1b6-600e-22b19341213f.png)

この箇所のHTMLコードは以下の通りである。

```
<div id="js-question" class="alert alert-primary" role="alert">
 A simple primary alert—check it out!
</div>
```
ここを
(↓変更後)


```
<input type="text" id="js-question" class="alert alert-primary" role="alert">
 A simple primary alert—check it out!
</input>
```
と改造すれば、↓のように入力が出来るようになっている。
![スクリーンショット 2021-03-16 15.29.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/961542/3c916ced-5b33-69ec-3c43-40a7e8373061.png)

このように、任意のHTMLタグに

```
<input type="text">
```
を追加するだけで、その箇所をテキストボックス化することができる。

# テキストボックスの中身を空にする方法
タスクの内容を書き込めるようになったとは言え、いつまでも同じタスクが表示されていたのでは複数のタスクが扱えない。
そこで、達成度を示すボタン(「OK」などが書いてある、青色のボタン)を押すと次のタスクが入力できるようにする必要がある。

つまり、ボタンを押した後にテキストボックスが空になるような実装が必要ということである。

そのために、ここでは新たにquestという変数を定義(↓4行目参照)し、そこにテキストボックス要素を代入するようにしている。


```
while(answersIndex < answersLen){
  $buttons[answersIndex].addEventListener('click', (e) => {
    count(e.target);
    let quest = document.getElementById("js-question");
    quest.value = '';
  });
  answersIndex++;
}
```
続く5行目では、quest.valueに''(空文字列)を代入している。

何をしているかと言うと、questには消したい要素(テキストボックス要素)が代入されているので、その中身(.value)に空文字を代入し、テキストボックスを空にしているのである。

これを、ボタンが押される度呼ばれる関数に実装すれば、ボタンが押される度テキストボックスを空にすることができる。

以上
# 該当ソースコードのリンク
https://github.com/blu-men/customized_todo_app/tree/develop
【コマンド】MacでTreeコマンドを使い、ディレクトリ構造を出力する

ディレクトリ構造をツリー形式で表示できる、TREE コマンドの使い方について解説します。

---


###Homebrewをインストール
TreeはHomebrewでインストールするので、Macに入っていない場合は先に入れておく。

※Homebrewとは、コマンドラインで使うmacOS用のパッケージマネージャー。簡単なコマンドを入れるだけでプログラムをインストールできるようになる。

Homebrewをインストールすると brew というコマンドが使えるようになる。バージョンを確認するコマンドは以下の通り。

```
$ brew -v
```
---

###Treeをインストール
Treeのインストールは以下のコマンドで行う。

```
$ brew install tree
```
---

###Treeの使い方
1.対象のディレクトリに移動

```
user$ cd /pathを指定
```

2.treeコマンドを実行

```
対象のディレクトリ名$ tree
```

実行すれば、ディレクトリの内容がツリー構造で出力されます。
AmazonBraketで学ぶ量子コンピュータ⓪

# この記事について
量子コンピュータの勉強をはじめて最近一通りAmazonBraketを触り終えました。
最近登場したサービスであることもあり、少し丁寧なドキュメントを残しておくと後続の方が勉強しやすくなったり、参照してわからないところを調べる際に便利かなと思ったので
自分自身の理解向上も兼ねて記事にまとめていっています。
その中で環境構築を今から行うという方もいると思うのでメモ程度に環境構築のやり方を記事にしておこうと思います。

また、量子コンピュータ関係の他の記事は、下記で紹介しています。

https://qiita.com/shnchr/items/41fa7fd1284d74007a7c

※本記事は2021年3月に更新している記事です。更新などにより内容が変わっている可能性もあるのでご注意ください。



# 環境構築
## Braketインスタンス作成
１． まずは[ホーム画面](https://ap-northeast-1.console.aws.amazon.com/console/home)にて「braket」を検索してAmazonBraketのコンソールに移動しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119747/5897c0dd-97a7-389e-5054-87eb4218aa8d.png)

２．初めてBraketを使う場合、以下の画面が出てくるかと思います。
S3にログなどを取得していくのS3のバケット生成が必要なのですが、初回のみこちらの画面で設定が可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119747/239bc7f8-63e7-58bf-205c-a664e16d5f02.png)


後ほど自分で作成することも可能ですが、素直に「Choose your data Storage」 で「Create new」を選び、バケットを作成しましょう。

３．以下のような画面に遷移します。左の選択領域で「notebooks」を選択し、「Create notebook」を押下してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119747/fc408371-348a-fe4a-da55-53841822ae5f.png)

４．とりあえず始めていきたいのでまずは「Notebook instance name」の部分だけ任意の名前を入れてあげて、「Create notebook instance」を押下してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119747/7c2d10e8-307e-73fa-3f9f-7b6917726cea.png)


５．裏でインスタンスの作成が行われます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119747/4141effa-8608-70af-7633-a9848747f56a.png)

４，５分もあれば「status」が「InService」になるので少し待ちましょう。
<font color="red"> __「InService」の間はEC2の利用料が課金されますので、利用後は停止するのを忘れないようにしましょう。__ </font>

## notebookの起動
１．URLを押下することでnotebookが起動できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119747/dd3776b5-d257-e0ab-40c0-864e9e60fd32.png)

そうすると「Braket examples」があることがわかります。
こちらはAWSが提供してくれてるサンプルコードになります。

２．Braket examples/getting_started内の「0_Getting_started.ipynb」を押下すると以下のサンプルコードが確認できるかと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119747/4aa54210-e8ea-d25d-c8e0-f43632d44325.png)


## S3連携
[こちら](https://qiita.com/doiken_/items/2f06c5b813e467ba0675#s3%E3%83%90%E3%82%B1%E3%83%83%E3%83%88%E3%81%AE%E7%99%BB%E9%8C%B2)にも記載している通り、

```
# Enter the S3 bucket you created during onboarding in the code below
my_bucket = "amazon-braket-Your-Bucket-Name" # the name of the bucket
my_prefix = "Your-Folder-Name" # the name of the folder in the bucket
s3_folder = (my_bucket, my_prefix)
```

のバケット部分とフォルダ名部分を書き換えるだけでS3に連携でき、シミュレータや実機が使えるようになります。
具体的な設定方法は「Braket examples/getting_started/1_Running_quantum_circuits_on_simulators.ipynb」にサンプルで提供されているのでそちらをご覧ください。


# まとめ
上記のように簡単にBraket環境は用意ができるので是非使ってみてください。
CircleCIでMySQLが動かなくなったので暫定対処


本日11時ごろ？ あたりからCircleCIで以下のようなエラーが起こりMySQLが起動しなくなりました。

```
2021-03-18 03:21:57+00:00 [ERROR] [Entrypoint]: MYSQL_USER="root", MYSQL_PASSWORD cannot be used for the root user
    Use one of the following to control the root user password:
    - MYSQL_ROOT_PASSWORD
    - MYSQL_ALLOW_EMPTY_PASSWORD
    - MYSQL_RANDOM_ROOT_PASSWORD
```

どうやらdockerイメージのバージョンアップによるものらしいです。
今回はちょっと脳死で暫定対処したので、その方法を紹介します。


**2021/03/19追記**

こちらの問題はすでに解決済みで、現在は作業不要です。
また、こちらの記事では不具合の内容として`MYSQL_ALLOW_EMPTY_PASSWORD`が使えなくなったと記載しておりましたが、実際には`MYSQL_USER:user`を指定しないとエラーになる。というのが正でした。


# 解決方法

① mysqlのDocker imageのバージョンを固定する
動いてた時のバージョンに固定することで、対処することができます。

② パスワードを使う方法に設定を変更する
今回は「②」の方法を選びました。
詳細は以下です。

# パスワードを使う方法に設定を変更する

公式のサンプルを参考にします。
https://circleci.com/docs/ja/2.0/postgres-config/#mysql-%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E4%BE%8B

![スクリーンショット 2021-03-18 12.52.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268801/2945935a-4166-5c25-95e5-879735ae8eb5.png)

上記の環境変数の書き方を参考に設定ファイルを書き換えます。
アプリケーション側も、DB接続設定を変更します。


# 設定前後の設定

変更前

```
jobs: > [job-name]: > environment: > MYSQL_ALLOW_EMPTY_PASSWORD: true
```

変更後

```
jobs: > [job-name]: > image: : circleci/mysql:8.0 > environment: > MYSQL_ROOT_PASSWORD: rootpw
jobs: > [job-name]: > image: : circleci/mysql:8.0 > environment: > MYSQL_DATABASE: circle_test
jobs: > [job-name]: > image: : circleci/mysql:8.0 > environment: > MYSQL_USER: user
jobs: > [job-name]: > image: : circleci/mysql:8.0 > environment: > MYSQL_PASSWORD: passw0rd
```

- `MYSQL_ALLOW_EMPTY_PASSWORD`が動かなかったのでパスワードを使う方式に変更
- enviromentを書く場所をドキュメントに合わせるため変更


以上です。
trivyでDockerイメージのスキャン実行時にタイムアウトエラー

trivyを使ってDockerイメージをスキャンした際にエラーが発生しました。
エラー内容を検索しても、それらしい記事が見つからなかったのでメモします。
オプションを1つ追加するだけで解決しました。

```console:エラーログ
$ trivy -s "HIGH,CRITICAL" -o trivy_result.txt centos7:test01
2021-03-17T07:46:41.617Z        FATAL   error in image scan: failed analysis: analyze error: timeout: context deadline exceeded
```

`--timeout`オプション追加

```console:ログ(オプション追加)
$ trivy --timeout 10m -s "HIGH,CRITICAL" -o trivy_result.txt centos7:test01
2021-03-17T08:31:42.321Z        INFO    Detecting RHEL/CentOS vulnerabilities...
2021-03-17T08:31:43.305Z        INFO    Trivy skips scanning programming language libraries because no supported file was detected

centos7:test01 (centos 7.9.2009)
================================
Total: 3 (HIGH: 3, CRITICAL: 0)
```

以上です。

参考：
https://github.com/aquasecurity/trivy/issues/139
https://github.com/aquasecurity/trivy/pull/143
https://aquasecurity.github.io/trivy/v0.16.0/usage/image/
pythonのテストやチェックツールで特定のコードを無視する方法

# はじめに

当稿は、すぐ忘れるスキップの記述を、すぐ思い出せるようにまとめたもの。

# pythonの自動テストに関わるツール
プロジェクトで以下のツールを使っている。

- pytest
    - メインのテスト
    - 実際に機能をテスト
- autopep8
    - ソースをPEP8に準拠するように整形
    - 意外と役に立ってない印象
- flake8
    - PEP8に準拠できてるかチェック
    - 100%準拠ではないとおもうが、結構これに従って作ってるだけできれいになる
- mypy
    - 引数やクラスの互換に間違いがないかのチェック
    - プロジェクトではTypeHint（引数の明示的型指定）を指定してるので、その間違いをチェックしてくれる
- bandit
    - セキュリティ的に問題あるかのチェック


# たまにチェックが邪魔なときがある

- pytest
    - 修正中とかで絶対テストコードがエラーになることが分かってるので、このケースはスキップしたいなど
- flake8
    - flake8：「おまえのコード複雑過ぎ。シンプルにしろや」
        - 関数を分割したりと言うのがよくある対処
        - それでやると、「たったこれだけのことでメソッドつくるの？」となる事がよくある
- bandit
    - bandit:「セキュリティ的にあかんのじゃ。なんとかしろや」
        - 「ここは絶対大丈夫なんで勘弁してほしい」というところがある
            - パフォーマンスチューニングで陥った経験あり

# それぞれのスキップ方法
## pytest
```
@pytest.mark.skip  # FIXME マルチスレッドでテストが落ちているのを一時的にskipしている
def test_success(self):
    """テスト

    """
```
スキップを示すアノテーションを指定することで、スキップできる。
後ろのコメントは、忘れないように習慣的にそう書いているだけ。

## flake8
```
def foo(bar: Bar,  # noqa: C901, R701
        bar_bar: BarBar) -> str:
    """関数

    """
```
上記は、対象のメソッドでは、C901とR701のチェックをしないという意味。
単に`# noqa`とした場合は、flake8のチェック全てがされない。

## bandit
```
def foo(bar: Bar,  # nosec
        bar_bar: BarBar) -> str:
    """関数

    """
```
上記は、対象のメソッドでは、banditのチェックをしないという意味。
作業中使うことが多い Power BI レポート の カスタムテーマ

Power BI Desktop の UI言語は "en-us" で使うことが多いのだけど、このとき日本語フォント(漢字) が Yahei とかになって見にくいので使っている カスタムテーマ。

**Font**
フォントを4種類用意しておくと、最初のカスタマイズの時だけいずれかを選ぶことができたりするので使いそうだなというフォントを定義している。
テーマでカスタムフォントを指定しても表示デバイスに該当フォントが必要になるので、運用で許容できるかの検討は別途必要

**Border**
テーブルビジュアル / マトリクス ビジュアルを除き表示

**valueAxis**
**categoryAxis**
チャートの軸 タイトルを非表示

```json:Theme_BaseType
{
    "name": "Theme_BaseType",
    "textClasses": {
        "label": {
            "fontFace": "Meiryo"
        },
        "callout": {
            "fontFace": "'Yu Gothic'"
        },
        "title": {
            "fontFace": "'Meiryo UI'"
        },
        "header": {
            "fontFace": "'BIZ UDPGothic'"
        }
    },
    "visualStyles": {
        "*": {
            "*": {
                "border": [
                    {
                        "color": {
                            "solid": {
                                "color": "#CCCCCC"
                            }
                        },
                        "show": true,
                        "radius": 5
                    }
                ],
                "valueAxis": [
                    {
                        "showAxisTitle": false
                    }
                ],
                "categoryAxis": [
                    {
                        "showAxisTitle": false
                    }
                ]
            }
        },
        "tableEx": {
            "*": {
                "border": [
                    {
                        "show": false
                    }
                ]
            }
        },
        "pivotTable": {
            "*": {
                "border": [
                    {
                        "show": false
                    }
                ]
            }
        }
    }
}
```


```json:カードビジュアルの表示単位を"なし"に設定
{
    "name": "Card DisplayUnit none",
    "visualStyles": {
        "card": {
            "*": {
                "labels" : [
                    {
                        "labelDisplayUnits": 1
                    }
                ]
            }
        }
    }
}
```

```json:ビジュアルヘッダーを非表示
{
    "name": "Visual header",
    "visualStyles": {
        "*": {
            "*": {
                "visualHeader": [
                    {
                        "show": false
                    }
                ]
            }
        }
    }
}
```

# 思ったこと🙄
用意しておくと便利だよ。

# その他
- [Power BI 勉強会 - connpass](https://powerbi.connpass.com/)
- [Power BI Desktop を使い始めるには](http://qiita.com/PowerBIxyz/items/6c4735cb5b5712e70981)
- [Excel で Power Query を使い始めるには](http://qiita.com/PowerBIxyz/items/52e563037b855a099ca9)
画像に余白を追加して正方形にする方法

機械学習では画像分類等の画像認識を行う際は画像を正方形にリサイズする必要があります。
しかし、画像によってはアスペクト比が1:1ではない為にただリサイズすると歪んでしまうことがあります。
そうならないために画像に余白を追加して、正方形に整形したいと思います。

# ソースコード
```
import cv2
import math

if __name__ == "__main__":
  img = cv2.imread('./sample.jpg')

  height, width, color = img.shape # 画像の縦横サイズを取得
  
  # 縦長画像→幅を拡張する
  if height > width:
    diffsize = height - width
    # 元画像を中央ぞろえにしたいので、左右に均等に余白を入れる
    padding_half = int(diffsize / 2)
    padding_img = cv2.copyMakeBorder(img, 0, 0, padding_half, padding_half, cv2.BORDER_CONSTANT, (0, 0, 0))
    cv2.imwrite('./sample@padding.jpg', padding_img)

  # 横長画像→高さを拡張する
  elif width > height:
    diffsize = width - height
    padding_half = int(diffsize / 2)
    padding_img = cv2.copyMakeBorder(img, padding_half, padding_half, 0, 0, cv2.BORDER_CONSTANT, (0, 0, 0))
    cv2.imwrite('./sample@padding.jpg', padding_img)
```
- 余白の追加には`cv2.copyMakeBorder`を利用しました。
    - 使い方は[この記事](https://qiita.com/sota0726/items/540d3be3e570cbca644e)を参考にさせて頂きました。
- 長辺に合わせた正方形を作りたかったので以下のようにしました。
    - 画像の長辺と短辺の差分を取得
    - 横長画像→上下に余白・縦長→左右に余白を追加
    - 1辺当たりの余白は長辺の差分の半分のサイズにすることで、画像を中央寄せにする

#結果
- 横長画像
![sample3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/938939/9edc144d-2199-7828-8cc7-e2f664c666b4.jpeg) ![sample3@padding.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/938939/38f6310a-bfe1-aa54-a961-480540685b65.jpeg)

- 縦長画像 
![sample.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/938939/9e9045fd-7acf-d2ba-1e81-5166c8901889.jpeg) ![sample@padding.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/938939/0ce32d31-1cd3-518c-e1ea-21959c438031.jpeg)
LaravelでVue.jsを使うときのメモ

Laravelで非同期での処理をしたい際、フロントをVueでやることが多いのですが、たまに上手く反映がされないことがあり時間を溶かしてしまうことがあるのでポイントだけまとめておきます。

基本は公式ドキュメントにのっています。

https://laravel.com/docs/7.x/frontend

resources\js\app.jsに正しくかけているか。


```resources\js\app.js
Vue.component('favorite-btn', require('./components/Favorite.vue').default);


const app = new Vue({
    el: '#app',
});

```

id="app"で全体を囲む

```index.blade.php
<div id="app">

</div>
```

Vueを正しくかけているか。favorite-btnだとうまくいくが、Vue.componentがfavoriteだとindex.bladeでfavoriteを書いてもうまくいかなかった。。。なぜかは不明。

```index.blade.php
  <favorite-btn></favorite-btn>
```

bodyの閉じタグのすぐ上にscriptを書く。headタグではダメ。


```index.blade.php
  <script src="{{ mix('js/app.js') }}"></script>
　</body>
```
Ruby問題  アウトプット

3つの数値の合計を出力するメソッドを作りましょう。
ただし、同じ数が含まれている場合は、
合計にカウントされません。
下記は、数値が1と２と3の場合の内容です。

```rb
def lone_sum(ary)
  uniq_nums = []
  ary.each do |num|
    count = 0
    ary.each do |i|
      if num == i
        count += 1
      end
    end
    if count < 2
      uniq_nums << num
    end
  end

  sum = 0
  uniq_nums.each do |unique_num|
    sum += unique_num
  end

  puts sum

end
lone_sum([1, 2, 3])
```
下記が解説です。

```rb
def lone_sum(ary)　　　#aryの中身は1,2,3です。
  uniq_nums = []　　 　 　#uniq_numsが空の状態です。
  ary.each do |num|　 #aryをnumという変数にして1,2,3を繰り返します。
    count = 0　　　　 #カウントは0から始まります。
    ary.each do |i|　　 #aryをiという変数にして1,2,3を繰り返します。
      if num == i    #numとiが同じ数値であればtrueを出力します。
        count += 1　　　#trueの場合その数値の数を1から数えます。今回は、1,2,3それぞれ1と1と1です。　　　　　　　　　　　
      end　　　　　　　 #eachは範囲内の処理が終わるまで繰り返されません。つまり、numがそのままでiの数値が繰り返される処理がnumの数値分、繰り返されます。　　　　
    end
    if count < 2　　　　　　#カウントが2未満の場合trueを出力します。
      uniq_nums << num　　　#trueの場合、uniq_numsにnumを代入します。今回は、1と2と3が代入されます。　　　　　　　　　　　　　　　
    end
  end
  sum = 0　　　　　　　　　　　　　　#sumは0です。
  uniq_nums.each do |unique_num|　 #uniq_numsを繰り返します。
    sum += unique_num　　　　　　 #sum = (0+1)+(0+2)+(0+3) = 6
  end
  puts sum   #6が出力されます。
end

lone_sum([1, 2, 3])
```
VSCodeのウィンドウタイトルいじりたい

# はじめに
こんにちは。新しいPCのセットアップを行っています、筆者です。

いろいろ移行中なのですが、VSCodeの`settings.json`見て、**あー、そういえば、そんなことしてたわ**というのを発見したので、しょうもないですが記事にしようと思いました。

# 結論: settings.jsonに書けばよい
```json:settings.json
{
  "window.title": "‹‹\\(´ω` )/››　　${dirty}${activeEditorShort} / ${rootName}　　‹‹\\( ´ω`)/››"
}
```

**こうするとこう表示されます↓**

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86984/889ed0a5-912f-d8ae-b599-ddbf26e29b28.png)

# おわりに
なぜこのような設定をしていたのか考えたのですが、きっとターミナルのプロンプト変更したりするのにちょっとハマってたときだと思います。

皆さんも個性を出してみてはいかがでしょうか:smile:
Cudaバージョンに応じたPyTorchをインストールする方法

# 何をしたいか
- `pip install torch==1.7.1+cu110`のような、pypiでホストされていないバージョンをダウンロードしたい
- 結論：["-f"オプション](https://pip.pypa.io/en/stable/reference/pip_install/#cmdoption-f)で、ダウンロード先をpypiでない[PyTorchのURL](https://download.pytorch.org/whl/torch_stable.html)に指定すればいい

# 状況
- PyTorchをインストールした際にcuda11.0を使ってインストールするよう[Official](https://pytorch.org/get-started/locally/)に書いてあったので、別環境でも同じようにインストールしようとしたらできなかった
- 最新版の更新に伴ってcu110のような枝番がpypiから削除されることが原因でした。

# どうすればいいか
- pypiでなく、PyTorchのURLからダウンロードするようにすればいい

### 自分の使いたいcudaのバージョンを確認

```bash:cuda_11.0を使っている
$ nvcc -V
nvcc: NVIDIA (R) Cuda compiler driver
Copyright (c) 2005-2020 NVIDIA Corporation
Built on Wed_Jul_22_19:09:09_PDT_2020
Cuda compilation tools, release 11.0, V11.0.221
Build cuda_11.0_bu.TC445_37.28845127_0
```

```bash:もし複数のcudaが入っていたら注意
# もしdebファイルで11.0のほか例えば10.2もインストールした場合、10.2に変更したければ
# /usr/local/cudaのシンボリックリンクを11.0に向くように上書きすればいい
$ ls -l /usr/local
lrwxrwxrwx  1 root root   10  3月 18 11:57 cuda -> cuda-11.0/
$ rm /usr/local/cuda && ln -s /usr/local/cuda-11.0 /usr/local/cuda
$ ls -l /usr/local
lrwxrwxrwx  1 root root   10  3月 18 11:57 cuda -> cuda-10.2/
```

### 自分の環境にあったwheelを探す
- [ここ](https://download.pytorch.org/whl/torch_stable.html)から空気を読んで探す

```bash:cuda_11.0に対応した1.7.1がほしい場合
# 自分はlinuxでpython3.8.6なので「cu110/torch-1.7.1%2Bcu110-cp38-cp38-linux_x86_64.whl」を発見
$ pip install torch==1.7.1+cu110 -f https://download.pytorch.org/whl/torch_stable.html
```
【Kotlin 初心者】bindingでidを取得する方法

## bindingでidを取得する方法
Kotlinでxmlのidを取得する際にfindViewByIdを使ってないですか？
findViewByIdよりもbindingならidの取得が楽になります

- アプリのbudild.gradleをにViewBindingをtrueにします

```build.gradle

android {
 viewBinding {
      enabled = true
   }
}
```

- bindingを初期化

```MainActivity.kt

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding
    
   override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
         
        // bindingを初期化します
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

   }
}
```
- ここまでできたらbindingの準備は完了です

```MainActivity.kt
override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
         
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        // Buttonのidを取得
　　　  binding.button
      
       // findViewByIdでButtonのidを取得
       val button = findViewById<Button>(R.id.button)
}

```

bindingとfindViewByIdを比較するとわかりやすいかと思います
これでidの取得がとても楽になりますね
`:read-only` より `[readonly]`

既存の CSS の改修で少々ハマったので備忘録です。

- `:read-only` : 属性を指定してない要素にもスタイルが適用される場合がある
- `[readonly]` : 属性を指定した要素のみスタイルが適用される

ざっくり input 要素などに `:read-only` のスタイルを適用する場合は、
`.my-class[readonly]` を対象にするなどにした方が良さそうです。

```erb
// 主なスタイル適用対象
<input class="my-class" type="text" readonly>

// WARNING: :read-only のスタイルは以下にも適用される
// 2021年3月18日時点で Firefox / Safari で再現、Chrome は再現せず。
<input class="my-class" type="submit" value="送信">
<input class="my-class" type="file">

```

意図しないスタイル適用を防ぐため、`[readonly]` の利用をお勧めします。
Visual Studioで定義へ移動が使えなくなった時の対処法

## はじめに
Unityの開発で`Visual Studio`を使ってたらフリーズしてしまったので、再起動を・・・。
その後自分で作ったクラスやUnityのクラスやメソッドにジャンプできなくなって1時間くらい試行錯誤。

多くの時間を無駄にしたので、他で困ってる人のために解決方法を書いておきます。
なお、この解法はMacで行ったものですがWindowsも同様だと思います。

## 解決方法
1. 現在開いている`Visual Studio`を閉じる。
2. プロジェクト直下の`.sln`ファイルが置かれているフォルダにアクセス。
3. 隠しファイルを表示する。(Macの場合は`Comman+Shit+.`を押す。）
4. `.vs`フォルダと`.vsconfig`ファイルの両方を削除
5. `Visual Studio`を開く

これで解決しました。

## 余談
`.sln`ファイルとか`.csproj`、`Temp`などのファイルも削除したのですが何も変わりませんでした。
これらのファイルは`Visual Studio`の起動時に自動的に作られるので消えても問題がないようです。

## 参考
[【VisualStudio使い方】Visual Studioで定義へ移動がグレーアウトした時の対策法](https://csharpmagazine.hatenablog.com/entry/2019/01/14/%E3%80%90VisualStudio%E4%BD%BF%E3%81%84%E6%96%B9%E3%80%91Visual_Studio%E3%81%A7%E5%AE%9A%E7%BE%A9%E3%81%B8%E7%A7%BB%E5%8B%95%E3%81%8C%E3%82%B0%E3%83%AC%E3%83%BC%E3%82%A2%E3%82%A6%E3%83%88)
現在のバージョン(`8.9.2`)には`.suo`ファイルは無かったので、おそらくその代わりのファイルだろうと思われる`.vs`を削除しました。
ウィンドウ関数 SAQL

#目次
[始めに](#始めに)
[範囲](#範囲)
[複数のリセットと複数の並び替え](#複数のリセットと複数の並び替え)
[現在の行の理解](#現在の行の理解)
[](#)
[](#)


#始めに

集計関数を使用するウィンドウと順位付け関数を使用している場合で大きく２種類ある。
順位付け関数を使用している場合、以下が必要。

1.並び替えの指定

```
rank() over ([..] partition by 'Billing_Country' order by 'A' desc ) as 'Rep_Rank'
```
2.範囲は[..]のみ

#範囲

ここまで出ないかもだが、一応

![スクリーンショット 2021-03-18 11.43.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385774/dee7a627-41fd-a918-4c1f-5e02e755c1d4.png)

#複数のリセットと複数の並び替え
複数のリセットと複数の並び替えは有効です。次に例を示します。

```
sum(sum(Sales)) over([-2 .. 0] partition by (OrderDate_Year, OrderDate_Quarter) order by OrderDate_Year)
       
sum(sum(Sales)) over([-2 .. 0] partition by (Year, Quarter) order by (Year asc, sum(Sales) desc))
```

#現在の行の理解

[..0]リセットグループから今いる行までを指定

```
q = load "dataset";
q = group q by (OrderDate_Year, OrderDate_Quarter);
q = foreach q generate OrderDate_Year as Year, OrderDate_Quarter as Quarter, sum(Sales) as sum_amt, sum(sum(Sales)) over([.. 0] partition by OrderDate_Year order by (OrderDate_Year, OrderDate_Quarter)) as r_sum;
```

![スクリーンショット 2021-03-18 11.54.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385774/38a488f9-078e-f05e-b17b-61072378f707.png)






#参考記事

https://developer.salesforce.com/docs/atlas.ja-jp.bi_dev_guide_saql.meta/bi_dev_guide_saql/bi_saql_functions_windowing.htm
jazzyが便利すぎる件

https://qiita.com/uhooi/items/d900c2de03e9d9f39b95

自動でコメントをつけてくれる

Realmが提供

問題点

objective-cとSwift混合のプロジェクトの場合、最初に2つのSourceKittenファイルを生成する必要がある。

https://github.com/realm/jazzy#mixed-objective-c--swift

これが結構だるそうなので、混合の時はしんどいかもです。

追記

podを使ってる場合はjazzy --podspec アプリ名.podspec

みたいな感じでやるんですが、こちらもみんなで共有してるプロジェクトとかだと結構気を使わないといけないかも

個人でやる分には全然いいけど、大型プロジェクトなどはそれなりに経験のある人がやらんと結構怖いかも

ざっくりとした感想です

最終追記

結果としてできませんでした。

理由はXcodeのコマンドができないとできないという結論になったからです。
　
ココアポッドの導入されているプロジェクトでバージョンもどれにするか決まっておらずターゲットもどれを選択するのか決まってなかったので、最終的に先輩に任せる形になりました。

コマンドラインでビルドできるのも初めて知ったし、まぁ確かに作られてるのは全てコードな訳なのでそうだよなあなんて思いながら

スキル不足を痛感した次第でした。

最終結論

個人でソースが少ないとかならすぐできる

ソースが多く決まってないことが多い場合は割と上級向け
CSSで背景をグラデーションにする

## 背景をグラデーションで表現する
背景をグラデーションにするには背景を変えたいHTMLのクラスに以下のコードを書くだけです。

```
background-image: linear-gradient(色１、色２);
```

画面の上から色１から色２に向かって色が変わっていきます。

## グラデーションの角度を指定する

グラデーションの方向に変えたい場合はdegを使います。
例えば、横方向に白から黒にしたい場合は以下のコードをCSSに記入します。

```
background-image: linear-gradient(90deg, white, black);
```

degの前に角度を指定します。斜め方向にグラデーションをする場合は125degのように記入します。

また円形にグラデーションをする場合はradial-gradientを使用します。

```
background-image: radial-gradient( white, black);
```
この場合中央が白で外側が黒色になります。
以上になります。何か間違いなどありましたらご指摘お願いします。
単体テストコード

#　導入方法

①　Gemfileのgroup :development, :testというグループの中にgem 'rspec-rails', '~> 4.0.0'と記入してbundle install
②　% rails g rspec:installとターミナルに打ち込んでRSpecを使用できるようにする
③　.rspecに--format documentationを追記

テストコード
①　specディレクトリにFactoryBotのファイルを生成
②　テストする単体モデルのモデル.rbを作成
FactoryBotで指定
(例)
spec/factories/users.rb
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
FactoryBot.define do
  factory :user do
    name {Faker::Name.last_name}
    email {Faker::Internet.free_email}
    password = Faker::Internet.password(min_length: 6)
    password {password}
    password_confirmation {password}
  end
end
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

例
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
require 'rails_helper'

RSpec.describe User, type: :model do
  describe '#create' do
    before do
      @user = FactoryBot.build(:user)
    end

    it 'nameとemail、passwordとpassword_confirmationが存在すれば登録できること' do
      expect(@user).to be_valid
    end

    it 'nameが空では登録できないこと' do
      @user.name = ''
      @user.valid?
      expect(@user.errors.full_messages).to include("Name can't be blank")
    end

    it 'emailが空では登録できないこと' do
      @user.email = ''
      @user.valid?
      expect(@user.errors.full_messages).to include("Email can't be blank")
    end

    it 'passwordが空では登録できないこと' do
      @user.password = ''
      @user.valid?
      expect(@user.errors.full_messages).to include("Password can't be blank")
    end
  end
end
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

実行の仕方
bundle exec rspec spec/models/user_spec.rb
Laravel5.5 FormRequest が実行されない？？

#はじめに

入力フォームのバリデーションにはいくつかの種類があるんやけど。
わいが一番好きなのは`FormRequest`なんや。

なんでかって？？
それはバリデーションだけ別ファイルに書くことにができるから便利なんよ。
コントローラーにバリデーション書くとコントローラーが読みにくくなるからいいよね〜。


そんな、FromRequest大好きなわいが時々起こしてしまう事件に対してのQiitaです。
みんなもこんなことならんようきいつけて〜や。

#現象

入力フォームで何かしら入力し送るとバリデーションエラーないし、データ送信ができるはずなんやけど、何も表示されないまま、入力フォームに画面が戻ってくる現象に関してWHY :disappointed_relieved:となったのでQiitaを書きます。

なんも表示されてないから何が起きているのかわかんない。そんな時、大体ここら辺が原因かなって心当たりがあることを書いていきます。

**・FormRequestの指定が間違ってる。**
**・入力フォームにエラー表示されるようなコードを書いていない。**
**・誤字**

FormRequestを作成するところからみていきます。

#0. FormRequest作成


今回は返信(Reply)フォームに対してのバリデーションです。
まず、artisanコマンドでファイルを作成します。

```
 php artisan make:request ReplyRequest
```
次にファイル内の編集です。
今回は返信するだけのフォームです。
入力フォームでのタグにつけたnameは`reply`です。

```php:App\Http\Requests

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class ReplyRequest extends FormRequest
{

    public function authorize()
    {
        return true;//false->trueへ変更
    }

    public function rules()
    {
        return [    
            //フォームでのnameを記載し、バリデーションルールを書く。
			'reply' => 'required|max:200',
        ];
    }
    //表示されるメッセージを自分で書きたい人は書く。
	public function messages() {
		return [
			'reply.required' => '返信は入力してください。',
			'reply.max' => '200文字以内で入力してくだい。',
		];
	}
}
````


#1. FormRequestの名前やnamespaceあってる??

よくあるパターンです。
コントローラーに書いてある、`ReplyRequest`の指定が間違っているパターン。

```php:controller.php
//① useに記載ミスがないか?
use App\Http\Requests\ReplyRequest;

//② ()内に指定してあるか?
public function store(ReplyRequest $request) {

}
```

#2. 入力フォームにエラーが表示されるようになってる??

うっかりさんがやってしまいがちなのは、入力フォームにエラーが表示される設定をしていないパターンです。
バリデーションのエラーだから、FormRequestのファイルかControllerだろう？っと思っている方には落とし穴です。

```html:view

<form action="{{ route('store') }}" method="post">
{{ csrf_field() }}

@if($errors->has('reply')) <span class="text-danger">{{ $errors->first('reply') }}</span>@endif
<textarea name="reply"></textarea>

<input type="submit" value="返信する">
</form>
```

上記の
`<span class="text-danger">{{ $errors->first('reply') }}</span>`
がないとエラーがあっても表示されません。

`@if($errors->has('reply'))`はエラーがあった時、という場合にのみエラー表示させたいので、if文で囲います。

つけ忘れがないか注意しましょう。

ちなみに`@if($errors->has('reply'))`の**reply**は`<textarea name="reply">`の**reply**からきています。

#3. nameの入力ミス

入力フォームでのフォームの**name指定**はとても重要です。
今回の場合、`<textarea name="reply">`ですね。

このnameでバリデーションはもちろん、コントローラーにPOST送信された情報を取得するにも使用するからとても重要です。

なので、このnameに入力ミス、またバリデーション指定する際にFormRequestでの指定ミスなどがあるとFormRequestが指定されているにもかかわらず、nameがなくバリデーション自体実行されないまま元の入力フォームへ戻ってきてしまいます。

**1. FormRequestの名前やnamespaceあってる??
2. 入力フォームにエラーが表示されるようになってる??**

上記の２点をチェックして、まだ改善されないようなら誤字がないか確認してみましょう。

以上になります！
時々引っかかってします沼でした :sunglasses:
まだまだひよっこ故、何かあれば編集リクエストいただければ幸いです。
画面遷移図をFigmaで作成（PowerPointより手軽！便利！）

# この記事の概要
画面遷移図の作成にFigmaが便利です。
プラグインを導入することでさらに便利に。
痒いところに手が届きます。


実際に作成したものがこちらです↓
![www.figma.com_file_G6gw3DcGNu1buXyJNPxYKv_Untitled_node-id=0%3A1 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586321/e6b82b1a-86fa-aeb6-36cd-017aa16cd635.png)


# 目次
<!-- タイトルとアンカー名を編集 -->
1. [Figmaとは？](#Chapter1)
2. [使用したプラグイン](#Chapter2)
3. [参考文献](#reference)

<!-- 各チャプター -->
<a id="#Chapter1"></a>
# Figmaとは？
[Figma](https://www.figma.com/)はオンライン上で使えるデザインツールサービスです。
アカウント作成をすれば誰でも無料で利用できます。
自分はGoogleアカウントでログインしました。

基本英語ですが日本語化するアドオンがGoogleChromeにあります。

- [Figma 日本語化]
(https://chrome.google.com/webstore/detail/figma-%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%8C%96/ekodckpnalonppfcddgnkoapajahbahc?hl=ja)

使い方はこちらを参考にしました。

- [Figmaの使い方](https://qiita.com/Hrioaki/items/d428d8318780a47f87ff)

基本的に図形作成時はPowerPointの使い方とほぼ変わらないです。
しかし、図形とアイコンと文字がゴチャゴチャした際に管理する仕組みがとても素晴らしかったです。

具体的に私はグループ化と要素のドラッグで整理を行っただけですが、
上の画像左側のようにリネームすることでそれなりにまとまって見やすくなりました。
また、要素をまとめて移動したい時は、

1.左側でグループ化を何かひとつの要素に行う
2.そのグループにまとめて動かしたい要素を全部入れる
3.真ん中の画面でそのグループを選択してドラッグ

これだけです。グループの中にさらにグループがあるという多重構造も可能。
フォルダ階層そのものなのでとても分かりやすいですね。


<a id="#Chapter2"></a>
# 使用したプラグイン

プラグインは右クリックまたは左上の ”三” と書かれたメニューバーから開けます。
Googleアドオンのように下記リンク先からインストール後、使用できます。

[Iconify](https://www.figma.com/community/plugin/735098390272716381/Iconify)
アイコンを挿入できます。
検索から使いたいアイコンについてそうな英単語を入れると複数表示されます。
私はそこから色を選択しただけです。大きさは他の図形と同じく後から調整できます。

[Unsplash](https://www.figma.com/community/plugin/738454987945972471/Unsplash)
いい感じの写真を挿入できます。
[公式サイト](https://unsplash.com/about)にプロの写真を無料で自由に利用できると書かれています。
安心ですね。
使い方は挿入したい図形を選択しつつUnsplash起動、あとはIconifyと同じです。

[Autoflow](https://www.figma.com/community/plugin/733902567457592893/Autoflow)
画面遷移図に必要な矢印を引くことができます。
Autoflow起動後、

1.真ん中の画面で線を引き始めたいフレームを押す
2.shifrキーを押しながら線を引き終わるフレームをクリック

これだけです。
フレームを動かしても矢印がついてくるので余計な引き直しが必要なく、
PowerPointより圧倒的に使いやすいです。

<a id="#reference"></a>
# 参考文献
- [Figma](https://www.figma.com/)
- [Figma 日本語化]
(https://chrome.google.com/webstore/detail/figma-%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%8C%96/ekodckpnalonppfcddgnkoapajahbahc?hl=ja)
- [Figmaの使い方](https://qiita.com/Hrioaki/items/d428d8318780a47f87ff)
ioredis-mockをJestで使う

# はじめに
Redis用ライブラリの`ioredis`を楽にモックしたくて探したところ、`ioredis-mock`というそれらしいライブラリを発見しました。
これを`Jest`で使おうとしたところ、ちょっとハマったのでやり方を書こうと思います。

# 準備
npmまたはyarnで`ioredis-mock`を追加します。

```
npm install -D ioredis-mock
```
または

```
yarn add -D ioredis-mock
```

# 使い方
以下では単純に`ioredis`のインスタンスを`ioredis-mock`にすげ替えています。

```js
// mock関数でioredisを自動モック
jest.mock('ioredis');
// 自動モックの後にrequireで読み込む
const Redis = require("ioredis");
const RedisMock = require("ioredis-mock");

test('test', async () => {
  // redisが返す値をdataキーがトップのJSON形式で定義
  const data = { data: {'hoge': 'fuga'} };

  // redisが返す値をRedisMockコンストラクターに渡す
  // この設定はioredisには存在しない
  const redisMock = new RedisMock(data);

  // 自動モックされているioredisからmockImplementation()を呼び出し、
  // redisMockインスタンスを返却させる
  Redis.mockImplementation(() => redisMock);

  // ioredisを使う処理を含む何らかのテスト
  ...
```

# おわりに
`ioredis-mock`よりも`Jest`の使い方が分からなくてハマってしまいました。
requireの前にmockを呼んで、mockImplementation()でインスタンスをすげ替えればいいという、
分かってしまえば単純なことでした。

# リンク
ioredis-mock
https://github.com/stipsan/ioredis-mock

Jest
https://jestjs.io/ja/
rubyのAPI問題

### 問題
任意の3つの数値の合計を出力するメソッドを作りましょう。ただし、同じ数が含まれている場合は合計にカウントされません。

### 模範回答の理解できたところを解説

```lone.rb
def lone_sum(ary)
  uniq_nums = []
  ary.each do |num|
    count = 0
    ary.each do |i|
      if num == i
        count += 1
      end
    end
    if count < 2
      uniq_nums << num
    end
  end

  sum = 0
  uniq_nums.each do |unique_num|
    sum += unique_num
  end

  puts sum

end
```

例えば```ary = [ 3, 2 ,3 ]```だったとして
一番親になっているeachで最初にnum = 3となって3を検証する。
次のeachで```num = 3```を対象に```ary = [ 3, 2 ,3 ]```をそれぞれ```i```として検証をする。
最初、```3 = 3```となって```count += 1```次は3 = 2では無いので読み飛ばし。次は3 = 3なので```count += 1```条件分岐で```if count < 2```となっているので最初のnumは読み飛ばしされる。
次はnum = 2の検証同じ要領で進むとcount = 1となって```if count < 2```に当てはまるため```uniq_nums << num```となる
最後はuniq_numsを対象に入っている値を足して行って合計を出力する。
以上！
Dockerでwordpress使おうとしたらDBに繋がらなかった。

##現象
Dockerで公式が紹介してるdocker-compose.ymlをそのまま使ってWordPressの環境を作るとDBに繋がらない。

```
Error establishing a database connection
```

##原因
wp-config.phpにDB情報が入っていなかった。
ただ、なぜ書き換えがされてないのかまではまだわかってない。

恐らくこちらの設定ミスだと思う...
直前にMySQLイメージがクラッシュしてたのでそれも関係するのだろうか?

##解決方法
Dockerを立ち上げて直接wp-config.phpを変更する。
Docker Desktop for WindowsでCtrl+Zを使いたいのだが！

Linuxのシェルで作業をしているとき、Ctrl+Zで現行プロセスを一時停止したいと思うことがあるが、Docker Desktop for Windows上のLinuxコンテナではCtrl+Zが効かない。

PowerShellからコンテナにアタッチした場合、Ctrl+ZがPowerShellのショートカットにバインドされていて、コンテナ側には送出されないし、今のところはレガシコンソールを使用するしか回避策が見つかっていない（ちなみに、Ctrl+Z,Cと連打すると、Ctrl+P,Qと同じ効果になる）。

Docker GUIのCLIで開いたシェルの場合、Ctrl+ZでCLI画面が閉じてしまう。

そこで発想を転換し、Ctrl+Zのサスペンド機能を別のキーに変更することを思い付いた。
やり方は簡単でsttyコマンドを使用する（以下はCLIの画面）。

```
# bash
root@ff685d3c8ae7:/# stty susp ^X
root@ff685d3c8ae7:/# cat
^X
[1]+  Stopped                 cat
root@ff685d3c8ae7:/# fg
cat
^C
root@ff685d3c8ae7:/# exit
exit
# cat
^X[1] + Stopped                    cat
# fg
cat
^C
#
```

※susp に指定する ^X は ^ と X を1文字ずつタイプすること

他に何か良い方法があれば、教えていただきたい。
メモ：画像ファイルのサイズを増やす

- 参考：https://www.wakuwakubank.com/posts/400-mac-dummy-image/

- バージョン

    ```
    $ brew info exiftool
    exiftool: stable 12.00 (bottled)
    ```

1. 画像ファイルを用意

    正確なファイルサイズにしたければ、小さいサイズの画像を用意するとか、
    1MB、みたいなきっちりサイズの画像を用意するとか。

    ```bash
    IMGE_FILE=/path/to/image_filename
    ```

2. 希望サイズのメタデータを作成

    ```bash
    SIZE=101 # 101MBのサイズにしたい
    dd if=/dev/zero of=${SIZE}MB.file bs=$(expr 1024 \* 1024) count=${SIZE}
    ```

3. 元画像のサイズup

    ```bash
    exiftool ${IMGE_FILE} -comment\<=${SIZE}MB.file
    ```

4. 確認

    ```bash
    ls -lh ${IMGE_FILE}
    ```

5. 後始末

    ```bash
    rm ${SIZE}MB.file
    ```
部分テンプレート

# 部分テンプレートのやり方

例えば、tweetを作ってたとすると
下のようなコードを記述したとする

app/views/tweets/index.html.erb
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
<div class="contents row">
  <% @tweets.each do |tweet| %>
   　< div class="content_post" style="background-image: url(<%= tweet.image %>);">
      < div class="more">
        < span><%= image_tag 'arrow_top.png' %></span>
        < ul class="more_list">
          < li>
            <%= link_to '詳細', tweet_path(tweet.id), method: :get %>
          < /li>
          <% if user_signed_in? && current_user.id == tweet.user_id %>
            < li>
              <%= link_to '編集', edit_tweet_path(tweet.id), method: :get %>
            < /li>
            < li>
              <%= link_to '削除', tweet_path(tweet.id), method: :delete %>
            < /li>
          <% end %>
        < /ul>
      < /div>
      < p><%= tweet.text %></p>
      < span class="name">
        < a href="/users/<%= tweet.user.id %>">
          < span>投稿者</span><%= tweet.user.nickname %>
        < /a>
      < /span>
    < /div>
  <% end %>
< /div>

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

<% @tweets.each do |tweet| %>〜<% end %>の中身を全て切り取りapp/views/tweets/_tweet.html.erbに貼り付けたとする。

app/views/tweets/index.html.erbは以下の記述で済む

< div class="contents row">
  <% @tweets.each do |tweet| %>
    <%= render partial: "tweet", locals: { tweet: tweet } %>
  <% end %>
< /div>
HerokuのDB再構築

## 下記手順でDB再構築しています。
テスト段階でDBの変更をよくしていたので手順だけ忘れないように残しておきます。

## ① DBのリセット
```
$ heroku pg:reset DATABASE_URL
```
コマンドを実行すると
　>
　↑で画面が止まるのでアプリ名を入れる。

## ② マイグレーション（再構築）
```
$ heroku run rake db:migrate
```

## ③ Herokuの再起動
```
$ heroku restart --app APP_NAME
```
migrateした後に再起動しないとエラーが出る時があるらしいので下記を実行。[APP_NAME]をアプリ名に変える。

## ④ データseeds
```
$ heroku run rails db:seed
```
AWSでデプロイしている場合であれば
rake db:seed RAILS_ENV=production
とQiitaに書いてあったが
AWSとPaiza.cloud共に上記で行けたので今はこれで行ってる。
GatsbyでPlaygroundを使用する時（GraphQL）

## 参考

[Gatsbyノート2(Markdown/GraphQL Playground)](https://qiita.com/hththt/items/464566527b0644dd3a68)
[最短・最速で学ぶ React製 静的サイトジェネレータ GatsbyJS + CMS Contentfulブログ実装編](https://www.udemy.com/course/react-gatsbyjs-contentful/)

## npm run developを使用する

`gatsby develop`ではなく`npm run develop`を使用してhttp://localhost:8000/___graphqlにアクセスする

![スクリーンショット 2021-03-18 10.38.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264884/50849596-f700-d28b-91cd-e91b4a08416b.png)

### どゆこと？ package.jsonを編集する

```js:package.json

"scripts": {
    "build": "gatsby build",
    "develop": "GATSBY_GRAPHQL_IDE=playground gatsby develop", // この部分をGatsby developでは呼んでくれていないため？
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
```



package.jsonのscriptsのdevelopにGATSBY_GRAPHQL_IDE=playgroundを追加編集後、

`Gatsby develop`

ではここが呼ばれずにデフォルトのツールが起動。

`npm run develop`

でpackage.jsonが反映される、という挙動でした。
その他の機能

# コメントする時など・・

Userモデル以外で他のモデルidを取得したい

ルーティングファイル

resources :(コントローラーA) do
resources :(コントローラーB)
end

こう記述すれば、コントローラーBで
def index
 @a = A.find(params[a_id])
end
みたいに紐付けられたモデルのid取得可能
Web制作の一連の流れ　〜メインとなるモデル

# 手順　メインモデル作成

①　rails g model (モデル名)
②　マイグレーションファイルに必要なカラムを記述、Userモデルと紐づける必要があるなら、
   t.references   :user,               foreign_key: true
   みたいに記述
③　rails db:migrateでテーブル作成

## モデル
①　バリデーション、アソシエーションの作成
②　写真等の投稿がある場合
　　ⅰ) Gemfileにgem 'mini_magick'　　gem 'image_processing', '~> 1.2'を記述して 
     bundle install
   ⅱ) rails active_storage:installでActive Storage導入してrails db:migrate
   ⅲ) そのモデルにバリデーション、アソシエーションの設定
　　　　has_one_attached :image
　　　　validates :image,      presence: true

## コントローラー、ルーティング
①　使用するアクションの記述
コントローラ
 def index
 end

ルーティング
 resources :(コントローラー名)　only: :index
みたいに
EC-CUBE4 の購入完了ページには CV タグを埋め込めるように Order が渡されています。 #eccube

EC-CUBE4 の購入完了ページには CV タグを埋め込めるように Order が渡されています。
ヒントとなるメモを投稿しておきますので、各サービスのCVタグに合わせてご活用ください。
例えば購入した商品の商品コードのアラートを出すには `template/default/Shopping/complete.twig` に以下のようにブロックを追記します。

```twig:template/default/Shopping/complete.twig
{% block javascript %}
    <script>
        {% for ProductOrderItem in Order.ProductOrderItems %}
            alert('{{ ProductOrderItem.product_code }}');
        {% endfor %}
    </script>
{% endblock %}
```
cocos2d-x 3.xの最新版をgitからcloneして利用する

## 概要

cocos2d-xは現在4.xが最新版であり、公式サイトからダウンロードできるv3は3.17.2で停止しているが、
githubではv3タグで3.17.2以降にも修正が入っている。
そこでv3を継続して利用するためにv3の最新版を利用する手順をまとめておく。

## 作業環境

CentOS 7.9 (7.9.2009)

## 手順

https://github.com/cocos2d/cocos2d-x のREADMEの手順に従う。

## 1. githubのリポジトリをcloneする

```
$ git clone https://github.com/cocos2d/cocos2d-x.git
```

cloneした直後は最新版のv4のタグになっているので、v3に切り替える。
gitの設定でプロンプトにブランチを表示できるようにしておくと良い。

```
$ cd cocos2d-x/
cocos2d-x (v4) $ git checkout v3
cocos2d-x (v3) $
```

tigコマンドで履歴を確認すると、直近では2020/4/30に更新が入っており継続してメンテナンスされている事が分かる。

![cocos2d-x-v3-tig.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112002/f8f5af7f-5b86-bc12-0977-e026e099ff7f.png)


## 2. 依存関係のファイルをダウンロードする

ダウンロードにはPythonを使用するが、2.xが必要なので注意。
CentOS8の場合は、yum install python2でインストール可能。
最後の質問は、依存関係のファイル「v3-deps-172.zip」を残すかどうかという意味。
ダウンロードが終わっているので、残す必要がないのでnoを入力してエンター。

```
cocos2d-x (V3) $ python2 -V
Python 2.7.18
cocos2d-x (v3) $ python2 download-deps.py
...
==> Would you like to save 'v3-deps-172.zip'? So you don't have to download it later. [Yes/no]: no
```

## 3. サブモジュールの初期化

githubの仕様変更によりgit submodule update --initが失敗する。
httpsでアクセスするように.gitconfigを修正する必要がある。

```
$ git config --global url."https://".insteadOf git://
```

これにより、~/.gitconfigに以下の変更が追加される。
ユーザー単位の永続的な設定変更となるので、不都合が起きたら該当の部分を削除すれば良い。

* ~/.gitconfig
```
[url "https://"]
  insteadOf = git://
```

上記の設定してからサブモジュールを初期化する(clone)。

```
cocos2d-x (v3) $ git submodule update --init
```

## 4. cocos2d-console をダウンロード

```
cocos2d-x (v3) $ cd tools/cocos2d-console/
cocos2d-x/tools/cocos2d-console/ ((af07b34...)) $ python2 download-bin.py
...
==> Delete 'v3-console-16.zip' file? It may be reused when you execute this script next time! (yes/no): yes
```

以上で最新のv3環境が準備できた。

## 補足：Windowsで使う場合

例えば、今回作業したcocos2d-xディレトリをtarで固めてWindowsに持っていって解凍すると
シンボリック関係でエラーが起きてしまう。
具体的には以下のシンボリックリンクが問題となる。

```
$ ls -l cocos2d-x/external/linux-specific/fmod/prebuilt/64-bit/
libfmodL.so
libfmodL.so.6 -> libfmodL.so
libfmod.so
libfmod.so.6 -> libfmod.so
```

シンボリックリンクも実ファイルにすれば問題が起きない。
Sambaを導入している場合は単にSamba経由でcocos2d-xディレクトリをWindows側にコピーするだけで解決。
Vagrant環境ならcocos2d-xディレクトリを/vagrant/にコピーしてWindows側に共有しても良い。
Ruby on Railsで基本的なWebページを作る一連の流れ　〜devise編

# 手順

% cd ~/projects
% rails _6.0.0_ new (プロジェクト名) -d mysql　　　⏪　新規プロジェクト作成
% cd (プロジェクト名)　　　　　　　　　　　　　　　　　 ⏪　そのプロジェクトフォルダに移動
% rails db:create　　　　　　　　　　　　　　　　　⏪　データベース作成

※　この後、必要に応じてencoding: utf8mb4をencoding: utf8へ変更したり、README.mdを作成したり

--------------------------------------------------------------------------
## ユーザー管理機能

①　Gemfileにdeviseを記述し、bundle install
②　rails g devise:installでdeviseをインストール
③　rails g devise userでUserモデル作成　　　※rails g model userではないため注意
④　マイグレーションファイルに必要なカラムを記述
　Eメール、パスワード以外にex.名前等
　記述の仕方　　ex.   t.string    :name,   null: false
　※null: falseはNullを許容しない
⑤　rails db:migrate  Usersテーブルができる。これをやらず起動させてもエラーになる可能性あり

#### Userモデル
バリデーション、アソシエーションの設定
- アソシエーション  
  has_many(one) :(モデル名)　manyなら複数形が望ましい
　belongs_to :(モデル名)

- バリデーション
　validates :(カラム名), presence: true　※ presence: trueは空白を許容しないということ

⑥ rails g devise:viewsでViewファイル作成

⑦　application_controllerに登録時の設定
　　before_action :configure_permitted_parameters, if: :devise_controller?

　　private
  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:name, :profile, :occupation, :position])
  end

のように書く
keysの中身はemail, password以外