OmniAICreator/Qiita-1.07M huggingface dataset:
CSSでくの字や三角形を作る

令和の時代に公開するような内容でないのは重々承知しておりますが、CSSでくの字や三角形を作りたいときに毎回ネットからコピペするのが面倒だったので自分用のスニペットとして書き残しておきます。

## くの字

```scss:hoge.scss
.arrow {
	&::before {
		content: "";
		display: inline-block;
		width: 15px;
		height: 15px;
		border-top: 3px solid #000;
		border-right: 3px solid #000;
		transform: rotate(45deg);
	}
}
```

### 表示

![title.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626202/84d1031a-00c7-5755-09ae-caf6af702879.png)

### 補足

`width`や`height`を増減させるとくの字の線の長さが、`border-width`を増減させると線の太さが変わります。
向きを変えたいときは`transform: rotate();`の角度を変えましょう。

## 三角形

```scss:hoge.scss
.triangle {
	&::before {
		content: "";
		display: inline-block;
		border: 15px solid transparent;
		border-left-color: #000;
		border-right: none;
	}
}
```

### 表示

![title (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626202/78a7fa3d-3804-4a84-58e1-7b88ff5a759f.png)

いわゆる二等辺三角形。
底辺の長さが`border-width`の2倍になります。

### 補足

`border-width`を増減させると三角形の大きさが変わります。
向きを変えたいときは三角形の頂点側の`border-color`を指定し、底辺側の`border`をnoneに指定してあげましょう。

`transform: rotate();`でも向きは変えられますが、要素の位置が微妙にズレるので注意。
反転させるぐらいなら問題ないかなと思います。

## おまけ

正三角形の高さ（h）を底辺の長さ（α）から割り出す場合は以下の公式を使えばいいそうです。

h = √3 / 2 * α

なので、√3を`border-width`の値に掛けてやればよさそうです。
√3は小数第6位で四捨五入して1.73205とします。

ちなみにこの公式はいま初めて知りました。

```scss:hoge.scss
.triangle2 {
	&::before {
		content: "";
		display: inline-block;
		border: 15px solid transparent;
		border-left-width: calc(15px * 1.73205);
		border-left-color: #000;
		border-right: none;
	}
}
```

### 表示

![title (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626202/1982f8c8-7d48-ff6c-b292-7ff294775a8f.png)

…見た感じ正三角形だな！

## おわりに

個人的には、CSSの勉強というより数学の勉強になりました。
不思議ですね。
HTTPS経由時のGit認証情報入力を省略する

https経由でアクセスするときにGit認証情報（ユーザ名とパスワード）を毎回聞かれるのが非常に面倒だったのでやり方を調べました。
社内ネットワークの制限でSSHを使用できない場合もあると思うので、その時の解決策です。

# 環境
ホスティングサービス：GitLab
OS : ubuntu18.04 (Virtual Box)

# 認証情報の保存

`git credential`を使用することで認証情報を保存します。
[Git のさまざまなツール - 認証情報の保存](https://git-scm.com/book/ja/v2/Git-%E3%81%AE%E3%81%95%E3%81%BE%E3%81%96%E3%81%BE%E3%81%AA%E3%83%84%E3%83%BC%E3%83%AB-%E8%AA%8D%E8%A8%BC%E6%83%85%E5%A0%B1%E3%81%AE%E4%BF%9D%E5%AD%98)  

Linuxで認証情報を保存かつ暗号化した状態で管理するには`libsecret`を使用します。

> 同じ用途でlibgnome-keyringもありますが、こちらは廃止予定となっています。
> https://github.com/GNOME/libgnome-keyring

以下の4つのコマンドを入力した後に、GitLabにアクセスすれば認証情報が保存されます。

```
sudo apt-get install libsecret-1-0 libsecret-1-dev
cd /usr/share/doc/git/contrib/credential/libsecret
sudo make
git config --global credential.helper /usr/share/doc/git/contrib/credential/libsecret/git-credential-libsecret
```

初回時のみユーザー名とパスワードを入力が必要です。
私はパスワードの代わりにパーソナルアクセストークンを使用することも可能です。
[個人アクセストークン](https://gitlab-docs.creationline.com/ee/user/profile/personal_access_tokens.html)

# 認証情報の削除

gitの設定で認証情報を解除するには以下のコマンドを入力します。

```
git config --global --unset credential.helper
```

この状態だとlibsecretに登録されている認証情報は削除されていません。
libsecretに登録されている認証情報は`seahouse`を使用することで完全に削除することができます。
ubuntuではアプリケーションから`パスワードと鍵`を選択することで表示できます。
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314894/91a90b1e-dc40-384a-001f-12c1fa08e5cf.png)

ログインに登録されているGitLabにアクセスするキーを削除します。

> コマンドで削除する方法は見つけられませんでした・・

# 補足
## 手動でlibsecretフォルダを削除してしまったとき

記事を書くにあたって、一度libsecretをフォルダごと削除して再インストールを試したところ再インストールしてもlibsecretフォルダが生成されない問題にハマりました。
（正しい解決方法かわからないですが・・）Githubから直接コードをコピーしてmakeすることで解決しました。
https://github.com/git/git/tree/master/contrib/credential/libsecret

`/usr/share/doc/git/contrib/credential/libsecret`ディレクトリを作成して、その中でviコマンドを使用してコードをコピペしたファイルを生成し、makeします。

```
vi makefile
vi git-credential-libsecret.c
make
```

## 参考

https://www.softwaredeveloper.blog/git-credential-storage-libsecret
テープ(LTO) でも、時系列検索できるかも、同じ事やっている人たくさんいそうだけど、どうなんだろう

# ビッグデータのアーカイブ(LTO)を検索したいかも

ビッグデータの時系列データをアーカイブでとっていたときに、ある範囲のデータをとりたいと思うことはあるでしょう。ごくたまにしか使わないデータの場合は、巨大なCSV（100Gぐらいから）でそのままとっておいて、テープにいれておくことはあるでしょう。100Gぐらいになると、CSVそのまま検索するのは、ハードディスクでもややつらいことがあります。さらにテープで、１TのCSVといったらもっとつらいでしょう。そこでデータを保存するときに、別途インデックスをつくってあげて、バイナリレベルでこのアドレスからこのアドレスまでとってきてとできるなら、テープでもそこそこいけるのではないでしょうか？　このアイデアのもとは、ある特許なのですが、その特許をとった人たちには、LTO向けには作ってもしょうがないと言われのですが、いやできそうだと思って、思考実験的に書いてみました。時間があればのろいですが、python　で書いてみるつもりです。可能なら、Rust の方に書いてもらえるといいなと思っています。

### どでかいCSVでも、バイナリで記憶媒体の位置指定できれば、とってこれるのではないでしょうか？

それでどんなインデックスをつくって位置指定するかです。

### 前提条件は、時系列でデータが並んでいること。　行番号インデックスがつくれます。

行番号の位置にある一行のバイナリ始点、終点がわかっていると、5100万行目から、5110万行目までとってくることが可能ですね。行番号インデックスをつかって２個の値を拾ってくればいいです。このインデックスを **行番号インデックス** と呼びましょう。

**時系列が等間隔（重複がない）でかつ抜けがなく、一行の長さが固定長なら更に楽**　**行番号インデックス**すら不要です。計算するだけですぐに取り出せます。さすがこれは条件がきつすぎるので、時系列にならんでいるだけで我慢しましょう。

実際のデータが時系列順にならんでいるかでも、実際はかなりきつい条件ではあります。でも運良く並んでいる場合があるとして考えていきます。

まず、**行番号インデックス**をつくります。**行番号インデックス**は、バイナリで見ると、行の開始位置、終了位置がならんでいるだけです。データの範囲を64bitとすると、8バイト＋8バイトのデータがならんでいるだけです。100行目をとっていくるときは、バイナリデータ上で、16バイト×100のoffset をかませばとってこれます。 ハッシュをつかったインデックスに比べると簡単ですね。固定長だと位置がインデックスになるので便利です。

位置がインデックスになっているので**位置インデックス**と仮に呼びましょう。固定長のデータだとバイナリ的に詰めて**位置インデックス**にすることが可能です。もちろん、データの位置がインデックスとして意味がある場合に限定されます。今回のように時系列でソートされていると位置をインデックスとすると便利な性質がでてきます。

### 値から、行番号を割り出すのはどうしたらいいか
**行番号インデックス**(実装は**位置インデックス**)をつくっておけば、何番目から何番目のデータという指定が簡単にできるなら、該当の範囲のデータは簡単にとってこれます。そこで値から行番号を割り出す仕組みが必要になります。

行番号割り出しのためにでもう一個、インデックスをつくります、**ソート済み値行番号インデックス**という名前にしましょう。時系列データの値を、ソートして、時系列の実際の値と、開始のソート結果の行番号の２つの値でつくったインデックスです。ここでもともとデータが時系列で、ソートされている前提なので、**ソート済み行番号と行番号インデックスの行番号は同じもの**になります。時系列データを順番にチェックしていき、重複しない時系列データがでてきたら、その時系列の値と行番号を保存し、**ソート済み値行番号インデックス**をつくっていきます。アルゴリズム的には簡単です、また、当たり前ですが、この**ソート済み値行番号インデックス**ノ行数は元データの行数を超えることはないです。

２個並んでいるので、行番号インデックスに近い構造ですね。バイナリ上は、時系列データの表現に必要なバイト数＋８バイト（行番号なんで64bitで十分でしょう）の　固定長にできますので、**ソート済み値行番号インデックス**も**位置インデックス**にできます。

**ソート済み値行番号インデックス**で、特定の時系列の値がどのデータなのかというのは、**二分探索木**で特定できます。**ソート済み値行番号インデックス**は、何行あるかわかっているので、半分のところからはじめていきます。最初に、何回か二分探索木やっておいてもいいかもしれません。ヘッドの移動回数や距離がへるので、データサイズが大きい場合ややっておいたほうがいいですね。**二分探索木**なので、そこそこ速いはずです。データの行数が増えても、比例的に時間がかかるだけです。

## まとめ　２個インデックス（そこそこ大きいけどしょうがない）をつくれば、時刻範囲の取り出しは、そこそこ意味ある時間ないで可能ではないでしょうか？

**ソート済み値行番号インデックス** で行番号特定 -> **行番号インデックス**で、実データ取得になります。

**疑問点（すでにみんなやっているのでは）**

- あまりに簡単な発想なので、時系列アーカイブでよく使われている実践ではないかと思われます。詳しい人教えてください。
- 等間隔の時系列（時系列の抜けや重複がない）で、１行を固定長にしてしまえば、２つのインデックスすら不要です。実践している人がたくさんいるんじゃないだろうか？

- 元データが時系列にソートされていなくても、もう１個インデックスを加えればなんとかなります。。。興味ある人いるだろうか？
突然動かなくなったMySQL8.0の解決 MYSQL_USER="root", MYSQL_PASSWORD cannot be used for the root user

## エラー内容

docker-compose build, upをしたところ、DBコンテナからこんなログが。

```
2021-03-19 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
```

## 解決

言われた通り、追加してみた

```yml:docker-compose.yml
version: "3"
 　　省略

  # mysql
  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: test_db
      MYSQL_USER: user
      MYSQL_PASSWORD: passw0rd

  　  省略

```

再度down, upをしたら、動いた。
SQLを学んでみた②(主キー)

実務でSQLやDBについて理解していないといけないと思い勉強を始めました。
その内容をまとめます。

## 主キー(primary key)

主キーって今まで何となく使ってきました。
`DB作ると必ずIDがあって、それは絶対に他と被らない、その行を削除したとしてもIDは繰り上がらず同じIDは存在しないもの`くらいの認識でした。
それで十分かもですが、今回学んで理解が深まりました!

## なぜ必要なのか

例えば、編集のアクションを行うとき、IDや主キーという存在がない場合で以下のようなDBがあったとします。(例なので日本語表記にしてます)

| 名前         | カナ          | 年齢       | 性別          |
|:-----------:|:------------:|:----------:|:------------:|
| 佐藤         | サトウ         | 40         | 男           |
| 佐藤         | サトウ         | 40         | 男           |
| 鈴木         | スズキ        | 30         | 女           |


ここからデータを引っ張ってきたいとか、更新したいとかの場合に問題が出てきますね。
同じ名前、年齢、性別の佐藤さんが2人います。
これでは、DBに命令をしてもどのデータか分からずうまくいきません。

でも、ここに主キーとして存在すれば解決できますね。
例えば社員番号というカラムがあったとしたら`社員番号10番の佐藤さんと11番の佐藤さん`みたいに区別できるようになります。

こんな感じで

#### ①他と被らない
#### ②必ず値が存在する(NULL)ではない

ものを主キーとして使うことができ、主キーがあることでDBとのやりとりがうまく行くということですね。


以上です。
同じソリューション内の別プロジェクトを参照する方法


#概要

以下のように１つのソリューション内にCommon, Food, Sportsと複数のプロジェクトがある。
Commonにあるクラスや関数をFoodやSportsから使いたいというときのやり方を紹介する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568592/50e3f883-6ca3-785e-fd54-62847967e706.png)

* 目的
  + VisualStudioの使い方を知る
* 本記事のゴール
  + 同ソリューション内の別プロジェクトを参照できるようになる
* 対象者
  + VisualStudio初心者
* 環境・バージョン
  + VisualStudio2017


#手順

## １．参照の追加

SportsプロジェクトからCommonにあるクラスや関数を使いたい場合、
Sportsプロジェクトの[参照]を右クリックして[参照の追加]をクリックする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568592/56189f56-6ffd-d9c8-daf8-89922801bbaf.png)

参照マネージャーの左のメニューから[プロジェクト]-[ソリューション]を選択し、Commonにチェックを入れ[OK]ボタンを押す。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568592/c378702b-b0e9-db1f-e151-44a4027a1ec0.png)

[参照]の中にCommonが追加される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568592/a7087df0-3bbf-d9b7-3842-7654dc10f1f4.png)

## ２．ソースの書き方

例えばCommonプロジェクトに自己紹介文を作成するCreateIntroductionという関数があり、それをSportsプロジェクトから使いたい場合。

```c#:Common&#x20;Class1.cs
namespace Common
{
    public class Class1
    {
        /// <summary>
        /// 自己紹介文を作成します。
        /// </summary>
        /// <param name="strFavorite">好きなもの</param>
        /// <returns>自己紹介文</returns>
        public static string CreateIntroduction(string strFavorite)
        {
            string strIntroduction = "私の好きなものは{0}です。";
            return string.Format(strIntroduction, strFavorite);
        }
    }
}
```


Sportsプロジェクトは、フォーム[Form1]の上にラベル[label1]を置いている状態。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568592/e9a4f676-eebc-b6fc-c8c6-a98627559f2d.png)


Sportプロジェクトでは、``Common.Class1.CreateIntroduction("野球")``こんな感じで使用できる。
※CreateIntroduction関数がstaticなのでこう書ける。staticでない場合はまた別。（後ほど別記事で説明予定）


```c#:Sports&#x20;Form1.cs
namespace Sports
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();

            // Commonプロジェクトの関数を使えるようになった
            this.label1.Text = Common.Class1.CreateIntroduction("野球");
        }
    }
}

```

Usingディレクティブを使ってもよい。


```c#:Sports&#x20;Form1.cs
// Usingディレクティブを使った場合
using Common;

namespace Sports
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();

            // 「Common.」は書かなくてもCommonの中のClass1なんだと分かってくれる
            this.label1.Text = Class1.CreateIntroduction("野球");
        }
    }
}

```


動かすとこんなふうに表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568592/9477f9a9-8f2f-8386-22ef-99ca2f87b21d.png)
AH00112: Warning: DocumentRoot [/var/www/vhosts/sample/public_html] does not existの対処法

#題名の通りDocumentRootに上記のパスが設定されてない？
はい、みなさんこんにちわ！底辺Engineerのひろです。
今回、Vagrant（CentOS７）でLAMP環境＋Wordpressを立ち上げるところまでやっていますが私がつまずいたエラーについてご紹していきたいと思います。



``AH00112: Warning: DocumentRoot [/var/www/vhosts/sample/public_html] does not exist``
題名の通り上記の DocumentRootに[/var/www/vhosts/sample/public_html] こちらが存在していないこと！と怒られてますｗｗｗ



ですが、同じパスで確かに存在しているんですよね。そこでちょっと色々と自分で調べてみたので同じエラーで詰まってる人もしくは原因わからなかった人などにお教えしながら一緒にエラーの根本原因を探っていきたいと思います！
※実は何度かWordpress表示まで完成できていたのですが10回目ぐらいでこのエラーにぶち当たりました。。。笑　まぁいい機会ですね！

``httpd -t``構文チェックはしっかりその都度確認しましょうね。




##1.SELINUXを無効にする
SELINUXを無効にする理由は意図的にプログラムが動かなくなったり、インストールできなくなるからです。
``getenforce``で結果が``Disabled``と確認すること。
もし、``enforcing``だったら下記を実施すること

``vi /etc/selinux/config``こちらで確認できますね。


``# This file controls the state of SELinux on the system.
`# SELINUX= can take one of these three values:``
``#     enforcing - SELinux security policy is enforced.``
``#     permissive - SELinux prints warnings instead of enforcing.``
``#     disabled - No SELinux policy is loaded.``
SELINUX=disabled←ここをdisabledに変更するだけです！
``# SELINUXTYPE= can take one of three values:``
``#     targeted - Targeted processes are protected,``
``#     minimum - Modification of targeted policy. Only selected processes are protected.``
``#     mls - Multi Level Security protection.``
SELINUXTYPE=targeted
※最後にrebootを必ずしよう！


###でも上記の設定は既にやったんだけどね、、、、


はい～～～なんでか理由がわかりました。。。。
ほんとに俺って馬鹿かも。。。。

``ディレクトリ名がただ単にvhosts→vhostとなっていました。。。。``
こんなイージーミスしている人が他にもいたそうですｗｗ

みなさんも気をつけましょう笑
Twig 自分的メモ


急遽twigを使用したサイトの修正を依頼され、twigについて調べた自分的メモです。

## twig とは
PHP製のテンプレートエンジン。

## インストール
```sh
composer require rcrowe/twigbridge
```

### テンプレート
プロジェクトを作成するなら、テンプレート作ることになると思います。
土台となるテンプレートを読み込むには <span style="color:red">extends パーツを読み込むには include を設定します。
引数を渡すこともできます

```twig
// 土台となるテンプレート
{% extends 'ファイルパス' %}　

// 一部のテンプレート
{% include 'ファイルパス'%}

// 引数をセットする
{% include 'pager.html.twig' with pager %}
{% include 'ファイルパス' with { 'favorite' : 'apple' } %} 
```



### if 条件文
```twig
{% if(row.id == "abc") %}
   <!-- 条件1がtrueの処理 -->
{% elseif(row.id == "efg") %}
   <!-- 条件2がtrueの処理 -->
{% else %}
   <!-- その他の処理 -->
{% endif %}
```

### for文
foreachは　"for in"で代用

```twig
{% for i = 1...100 %}
   <!-- 処理 -->
{% endfor %}

// 配列
{% for val in rows_work %}
   <!-- 処理 -->
{% endfor %}

// 連想配列
{% for key, rows in rows_work %}
   <!-- 処理 -->
{% endfor %}
```

三項演算子

```twig
{{ 条件文 ? 処理A : 処理B }}
```






### 変数
```
// セット
{% set sample_data = 'apple' %}
// 配列
{% set sample_array = ['apple', 'orange'] %}
{% set sample_array = ['favorite': 'bappler'] %}

// 使う
{{ sample_data }}
{{ sample_data[1] }}
{{ sample_array.favorite }}
```

---
# twigフィルター
`複数のフィルターをチェインできる 
{{ w.description | raw | nl2br }} `
### 文字列編
```twig
// 文字切り詰め
{{ name | length > 32 ? name | slice(0, 14) ~ '…' : name }}

// slice
{# bcde #}
{{ 'abcdef'|slice(1, -1) }}
{# bcde #}
{{ 'abcdef'[1:-1] }}

// default
{{ var|default('var is not defined') }}

// 大文字小文字化
{{ 'LOWER'|lower }}
{{ 'upper'|upper }}

// 先頭1文字大文字化
{{ 'lcfirst'|capitalize }}

// escape
{{ '?hoge=fuga'|e('url') }}
{{ '?hoge=fuga'|url_encode }}
{{ { hoge: 'HOGE', fuga: 'FUGA' }|url_encode }}

// sprintf
{{ "%s %d %f"|format("hoge", 1.1, 1) }}

// nl2br
{{ "one\ntwo"|nl2br }}

// replace
{{ 'hoge fuga'|replace({ 'hoge': 'HOGE', 'fuga': 'FUGA' }) }}

// リバース
{{ '1234'|reverse }}
```

### 配列編
```twig
// 後ろ
{{ [ 1, 2, 3 ]|last }}
{{ { hoge: 'HOGE', fuga: 'FUGA', foo: 'FOO' }|last }}
{{ 'abc'|last }}

// join
{{ [ 1, 2, 3 ]|join(',') }}

// explode
{{ '1,2,3'|split(',') }}

// json encode
{{ { hoge:'HOGE', fuga:'FUGA' }|json_encode()|raw }}

// length
{{ [ 1, 2, 3 ]|length }}

// merge
{{ dump([ 1, 2 ]|merge([ 3, 4 ])) }}
```

### 数値編
```
// ナンバー
{{  200.35 | number_format }}
{{ 1000000.234567|number_format(2, '.') }}
// 丸め
{{ 10.4 | round }}    {# 10 #}
{{ 10.5 | round }}    {# 11 #}
{{ 10.4 | round(0, 'ceil') }}{# 11 #}
{{ 10.5 | round(0, 'floor') }}{# 10 #}
{{ 10.05 | round(1) }}    {# 10.1 #}

// 絶対値
{% set number = -30 %}
{# 30 #}
{{ number|abs }}
```


### 日付編
```twig
{{ '2018-01-02 12:34:56'|date("Y/m/d h:i:s") }}
{{ '2018-01-02 12:34:56'|date_modify("-1 week")|date("Y-m-d h:i:s") }}
```




コメント

```twig
{# コメント #}
```

CSRF対策

```twig
{{ csrf_field() }}
```



定数アクセス

```
{{ constant('App\\Demo\\Test::DEMO') }}
```


独自関数を作る

```
lib/clsses/Renderer.php
```


### 使用例
```twig:sample/twig
{% extends 'layout/user_default'%}
{% block content %}
{% set title='hello' %}
<div class="sample">
    <h1>{{ title }}</h1>
</div>
{% endblock %}
```


### その他サンプル
```
変数がセットされているかどうか確認して
{% set all_option = all_option is defined ? all_option : true %}
```
OperationalError: no such table: テーブル名  エラー解決方法

<h1>①はじめに</h1>
pythonを使ったwebアプリを作成するためにDjangoを利用して、ブログを作成していたのですが、エラーが出たので共有いたします。他のエラーを解決する方法にもなると思うので、困っている方は試してみてください。

<h1>②エラー内容</h1>
ブログの機能としてログイン機能を入れており、デフォルトではユーザー名でログインしますが、ユーザーモデルをカスタマイズして、メールアドレスでログインできるように認証で便利なallauthパッケージを利用しました。
モデルを変更し、python3 manage.py migrateでデータをセットアップした際に出たエラーが下記になります。

```python:python
django.db.utils.OperationalError: no such table: app_category

```

または

```python:python
sqlite3.OperationalError: no such table: app_category

```

上記エラーは、データベース上にapp_categoryというテーブル（データ）が入っていないという意味になります。
app_categoryのappは私が設定したappというフォルダ名で、categoryは私が設定したclass名です。
つまり、下記のようになります。

```python:python
sqlite3.OperationalError: no such table: ファイル名＿クラス名

```

<h1>③解決方法</h1>
1.db.sqlite3ファイルを削除
2.pythonファイルの「category」が入っているコードを全てコメントアウトします。(モデルのファイルだけでもいいかも)
３.モデルのコメントアウトした「category」を元に戻します。
4.次に、データベースを再作成します
python3 manage.py makemigrations をターミナルに入力すると下記のようなメッセージが出ます。「デフォルトなしで投稿するために、null許容でないフィールド「category」を追加しようとしています。修正を選択してください：」というようなメッセージが出る場合があります。その時は選択肢1を入力し、次の画面でデフォルト値として適当な数字(1でok)を入れます。

```
You are trying to add a non-nullable field 'category' to post without a default; we can't do that (the database needs something to populate existing rows).
Please select a fix:
 1) Provide a one-off default now (will be set on all existing rows with a null value for this column)
 2) Quit, and let me add a default in models.py
Select an option: 1
Please enter the default value now, as valid Python
The datetime and django.utils.timezone modules are available, so you can do e.g. timezone.now
Type 'exit' to exit this prompt
>>> 1
Migrations for 'app':
  app/migrations/0006_auto_20210318_2344.py
    - Create model Category
    - Add field category to post

```
categoryモデルを作成することができたら
python3 manage.py migrate　をターミナルに入力しデータをセットアップます。

```
Operations to perform:
  Apply all migrations: account, accounts, admin, app, auth, contenttypes, sessions, sites, socialaccount
Running migrations:
  Applying app.0006_auto_20210318_2344... OK
```

5.エラーが無ければ他のファイルでコメントアウトしたコードを元に戻します。python3 manage.py runserverでアプリページに移動し問題ければ成功です。
　エラーがあった場合はモデルの「category」のあるコードをコメントアウトし、一つずつコメントを解除し、エラーの原因を探っていくと解決できるはずです。

<h1>④最後に</h1>
OperationalError: no such tableのエラーでつまずいてしまった方の参考になると思うので試してみてください。
LaravelのScopeで、絞り込みのメソッド作成

Laravelの絞り込み検索などのクエリビルドを別メソッドにまとめたいと思うことはないでしょうか？
私もそう思っていて、どうやって別メソッドにまとめようか調べるとscopeがあるとわかりました

メソッド名の先頭にscopeをつけることで、Laravel側でこれはスコープなのだと認識される。



```php:引数
public function scopeKeywordSearch($query, $search_keyword)
```
第一引数に$query（リレーションなどですでにある程度絞り込んでいる情報）を入れる。
第二引数以降に絞り込むためのキーワードを記述する。


`scopeKeywordSearch`という処理名であれば、先頭のscopeを取り除いた処理`KeywordSearch()`を呼び出す。

```php
$model->KeywordSearch();
```
これで定義した絞り込み処理が使える。





# 具体例

```php:Post.php(キーワード検索の例)
public function scopeKeywordSearch($query, $search_keyword)
  {
    if ($search_keyword !== null) {
      $keyword_space_half = mb_convert_kana($search_keyword, 's');
      $keywords = preg_split('/[\s]+/', $keyword_space_half);
      foreach ($keywords as $keyword) {
        $query
          ->where('title', "like", '%' . $keyword . '%');
      }
    }
  }
````

```php:利用する
$posts = Post::with(['user'])
            ->keywordSearch($search_keyword) // 先頭のscopeはメソッドを利用する際不要
            ->get();
````

````php:タイプ別検索の例

  public function scopeTypeSearch($query, $type)
  {
    if ($type !== null) {
      if (count($type) < 2) {
        if ($type[0] == "personal") {
          $query->where("type", "personal");
        } else {
          $query->where("type", "group");
        }
      }
    }
  }
```

```php:利用する
$posts = Post::with(['user'])
            ->typeSearch($type) // 先頭のscopeはメソッドを利用する際不要
            ->keywordSearch($search_keyword)
            ->get();
````

````php:カテゴリー検索の例
  public function scopeCategorySearch($query, $categories)
  {
    if ($categories !== null) {
      $query->whereIn("category", $categories);
    }
  }
````

```php:利用する
$posts = Post::with(['user'])
            ->typeSearch($type)
            ->categorySearch($input_categories) // 先頭のscopeはメソッドを利用する際不要
            ->keywordSearch($search_keyword)
            ->get();
````


````php:クーポンがあるか、ないか

  public function scopeCouponSearch($query, $coupon)
  {
    if ($coupon !== null) {
      if (count($coupon) < 2) {
        if ($coupon[0] == 1) {
          $query->whereNotNull('coupon');
        } else {
          $query->whereNull('coupon');
        }
      }
    }
  }

```

```php:利用する
$posts = Post::with(['user'])
            ->couponSearch($coupon) // 先頭のscopeはメソッドを利用する際不要
            ->typeSearch($type)
            ->categorySearch($input_categories)
            ->keywordSearch($search_keyword)
            ->get();
````

こんな感じで絞り込みのメソッドを作成して、状況に応じて組み合わせを変えて利用するとなかなか面白い。メソッド名で何で絞り込みをしているのかわかるのが魅力の一つです。

```php:利用する
$posts = Post::with(['user'])
            ->couponSearch($coupon)
            ->genderSearch($gender)
            ->typeSearch($type)
            ->categorySearch($input_categories)
            ->pointmin($min_point)
            ->pointmax($max_point)
            ->keywordSearch($search_keyword)
            ->userSearch($userName)
            ->get();
````
httpd.confのSetEnvはDirecotiryごとに設定できる

ググっても情報が見つからなかったので調べました。
同じような人の助けになれば。

こんな感じでhttpd.confの `Directory` 内で `SetEnv` を使って環境変数を設定します。

```apache:httpd.conf
<VirtualHost *:80>
  DocumentRoot /var/www/sample.jp/
  ServerName sample.jp.internal

  <Directory "/var/www/sample.jp/aaaaa">
    SetEnv TEST_ENV aaaaa
  </Directory>
  <Directory "/var/www/sample.jp/aaaaa/bbbbb/ccccc">
    SetEnv TEST_ENV ccccc
  </Directory>
</VirtualHost>
```

で下記のPHPを各階層に置いて出力を見てみます。

```php:echo_env.php
<?php
echo $_SERVER['TEST_ENV'];
```

結果は以下の通りです。
`/aaaaa/bbbbb/ccccc` と `/aaaaa` にそれぞれ.htaccessを置いてSetEnvする場合と同じ挙動となりました。

```
https://sample.jp.internal/aaaaa/echo_env.php
# aaaaa

https://sample.jp.internal/aaaaa/bbbbb/echo_env.php
# aaaaa

https://sample.jp.internal/aaaaa/ccccc/echo_env.php
# ccccc

https://sample.jp.internal/aaaaa/ddddd/echo_env.php
# aaaaa
```
【グラブル】ガチャピンモードは罠ではないのか？

# ガチャピンモードとは

グランブルーファンタジーというソシャゲで、SSR（フェス時6%、それ以外は3%）が出るまで無料10連ガチャをいくらでも回せる機能です。（本当は終了条件があるのですが、本記事では割愛します）
SSRが確定ということもあり、少なくとも虚無にはならないという安心の一方で、ガチャをたくさん回せるということはSSRが出ていないということで、実は損なのでは？という気分にもなってしまいます。そのあたりを、数学の力を借りて調べましょう。
高校数学の知識があれば読むことが出来ます。何言ってるかワカランという方は、今後確率に首を突っ込むのはやめましょう。危険です。

以下、SSR出現確率を$p$とします。

# 10連ガチャにおけるSSR期待値
ガチャ1回あたりの期待値が$p$ですから、$10p$です。期待値の線形性はかくも偉大。

……なのですが、今後のために愚直に計算しておきましょう。
期待値は(SSRの出た個数)x(その個数のSSRが出る確率)の和で表されるのでした。SSRがk個出る確率を$a_k$とおくと、期待値$P$は次のようになります。

```math
P = \sum^{10}_{k=0}ka_k
```

$a_k$は $a_k = {}_{10}\mathrm{C}_k p^k (1-p)^{10-k}$ですので、結局

```math
P = \sum^{10}_{k=0}k_{10} \mathrm{C}_k p^k (1-p)^{10-k}
```
となります。これが10pと一致することは読者への演習問題としますが、一致することだけわかっていれば大丈夫です。

# ガチャピンモードのSSR個数期待値

10連でSSRが一回も出なかった場合は、また次の10連を回すわけですから、その10連は個数という観点からはなかったことと同じです。結局、**10連ガチャでSSRが1個以上出たときの、SSR数の期待値**を求めることになります。条件付き確率というやつですね。
基本的には上の計算方法と同じですが、kの範囲と確率が異なる点に注意しましょう。SSRがk個出る確率は$\frac{a_k}{1-a_0}$です。こうなります。

```math
P = \sum^{10}_{k=1}k \frac{ a_k } {1-a_0}
```

このままでは扱いづらいので、変形します。まず、シグマの中にkがあるので、k=0を含めても問題ありません。また、$\frac{1}{1-a_0}$はkによらないため、外に出すことが出来ます。よって次のようになります。

```math
P = \frac{1}{1-a_0} \sum^{10}_{k=0}ka_k
```

あれあれ、この式のシグマ以降は先程求めた期待値そのものではないですか（しらじらしい）。結局期待値は次のようになります。

```math
P = \frac{10p}{1-(1-p)^{10}} 
```

実際に計算すると、フェス(p=0.06)で1.3個、それ以外(p=0.03)で1.14個となります。

# ガチャピンモードのSSR率

SSRの数/ガチャを回した数 で計算される数値をSSR率とします。ガチャピンモードのSSR率はどうなのでしょうか？。SSRの期待値は計算しましたから、ガチャを回す回数の期待値を計算しましょう。

10連一回でSSRが1個以上出る確率は、$1-a_0 = 1-(1-p)^{10}$でした。一般に確率pのガチャを出るまで回したときの回数の期待値は$1/p$です。いま、「SSRを出す」というガチャを回していると考えると、ガチャピンモードでガチャを回せる回数の期待値は

```math
\frac{10}{1-(1-p)^{10}}
```

となります。10連ガチャ一回につき10回のガチャを回すので、10を掛けました。

さて、SSR率は SSR数の期待値 / ガチャを回す数の期待値 で求まります。

```math
\frac{10p}{1-(1-p)^{10}} \div \frac{10}{1-(1-p)^{10}} = p
```

答えは$p$となりました。すなわちガチャピンモードでSSR率が低くなったりすることはない、ということです！これで安心してガチャを回せますね。

# 実験
ここはQiitaなので、このまま終わるとなんか怒られそうです。ということで、Pythonでシミュレーションプログラムを書いて、結果があってるのか確かめてみました。
プログラムがこちら。

```python
import random

P = 6
N = 10000


def gacha():
    result = random.uniform(0, 100)
    if result < P:
        return 1
    else:
        return 0


def gacha10():
    ssr = 0
    for _ in range(10):
        ssr += gacha()

    return ssr


def gachaping():
    ssr = 0
    n = 0
    while ssr == 0:
        n += 10
        ssr = gacha10()
    return ssr, n


if __name__ == "__main__":

    ssrnum = 0
    gachanum = 0
    for _ in range(N):
        ssr, n = gachaping()
        ssrnum += ssr
        gachanum += n

    print(float(ssrnum) / N) #SSR数の期待値
    print(float(ssrnum) / gachanum) #SSR率

```

結果は……
```
1.3092
0.06027901837101156
```

ということで、計算はあってそうです。めでたしめでたし。

# とはいえ

SSR個数の期待値は、フェス(p=0.06)で1.3個、通常(p=0.03)で1.14個でした。ガチャそのものの期待値で言えば、フェスでは22連相当、通常では38連相当です。今やってるガチャピンでは30連が出ることもありますから、期待値だけみれば、フェスでのガチャピンの期待値は30連より低い、ということになります。ただ、ガチャピン様はSSR一個以上確定なのに対して、ただガチャを回す場合はSSR0のこともありますから、一概に比較はできません。

# まとめ

- ガチャピンモードのSSR数期待値は、フェス(p=0.06)で1.3個(22連相当)、通常(p=0.03)で1.14個(38連相当)
- フェスでは30連のほうが期待値で勝る場合もあるが、SSR確定の恩恵もあるため、一概に優劣はつけられない。
- SSR率は通常のガチャと同じ。

# ちなみに
SSRが出たところで止めてもSSR率が変わらないということは、あらゆるガチャにおいて、出たところで止めても確率は変わらないということです。レア泥掘りの検証とかで、「出たとこでやめると本当の確率は出ないから、固定回数分試行して報告しろ」とかいう人がいますが、数学的には間違いだということですね。
Anaconda Team Editionの導入から構成までのまとめ

Anaconda Team Editionの導入の前提作業から、Minicondaから利用できるように構成するまでの記事をまとめました。

全体像は以下のような構成になっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223763/a0af850d-38eb-dd6e-06b3-87161d6b52f0.png)

<B>前提作業</B>
1. [Docker のRHEL7への導入](https://qiita.com/kawada2017/items/c6fd464aceffd55d67b2)
2. [Docker ComposeのRHEL7への導入](https://qiita.com/kawada2017/items/60f3d25955318bb8b2a0)

<B>Anaconda Team Editionの導入と構成</B>
3. [Anaconda Team Editionのインストール](https://qiita.com/kawada2017/items/abe8f88223e00a2b2934)
4. [Anaconda Team Editionでチャネル作成とミラーリング設定をする](https://qiita.com/kawada2017/items/7b82124fcf2309c43c67)

<B>Minicondaの導入と構成</B>
5. [Miniconda3をWindows 10にインストール](https://qiita.com/kawada2017/items/626a80ed5bbfdc2576a5)
6. [Anaconda Team EditionのチャネルにMiniconda/Anacondaから接続する](https://qiita.com/kawada2017/items/3b86096027bff5527df2)
MacをWindowsっぽくする設定

# Windowをスナップさせる。
無料で最低限って感じですが、これで。
https://www.spectacleapp.com/

# Alt-tabで切り替え
- Alt-Tab
https://github.com/lwouis/alt-tab-macos/releases

- hyperswitch
https://bahoom.com/hyperswitch

# Google日本語入力
https://www.google.co.jp/ime/

# キー割り当てを変更
https://karabiner-elements.pqrs.org/

## 「半角/全角」キーで漢字変換させる
システム環境設定 - キーボード - ショートカット - 入力ソース

```
前の入力ソースを選択     F13
```

karabinerにて

```
grave_accent_and_tilde(')   f13
PCキーボードのかなキー　        　かなキー
PCキーボードの無変換キー　      　英数キー
PCキーボードの変換キー　         かなキー
```
macのFinderで隠しファイルを表示させる方法

## 概要

macのFinderでデフォルトで隠しファイルを表示させる方法です。

## やり方

terminalで、

```shell
defaults write com.apple.finder AppleShowAllFiles TRUE # デフォルトで隠しファイル表示
killall Finder # 開いているFinderを全て停止(再起動)
```

## 参考

- [macOS Big Surで隠しファイルを表示させる方法](https://tech.naturalmindo.com/notwork_finder/)
PHPで開発する方法。LAMP,MAMP,XAMPPについて

phpで開発してみたいけど、どうしたらいいかわからない人向けです。

まずパソコンでphpの実行環境をつくるには
phpをダウンロードし,サーバーを立てることが必要です。
さらに、
データを保存したい場合はMySQLが必要です。
![ev024.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700700/002d2925-cb90-96ef-44f9-9e606a6e3820.jpeg)
この実行環境作りって結構めんどくさく、初心者にはハードルが高いです。

それを解決してくれるのが
**LAMP,MAMP,XAMPP**です。
![ev025.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700700/0bdbe74b-25ca-b846-ac3d-1e87d4dff8a9.jpeg)
仮想化・・・コンピュータの中に別のコンピュータを再現すること。

それでは説明していきたいと思います。




#仮想化

||LAMP|MAMP|XAMPP|
|:--:|:--|:--|:--|
|①|L：Linux　　|M：MacOS|X：クロスプラットフォーム|
|②|A：Apache|A：　"|A：　　  "|
|③|M：MySQL|M：　"|M：　　  " (MariaDB)|
|④|P：PHP　|P：　"|P：　　　"|
|⑤|||P：Perl|

**①OS（オペレーティングシステム）**
簡単に言うと
システム全体を管理し、さまざまなアプリケーションソフトを動かすための最も基本的なソフトウェア。

|メーカー|OS|
|:--|:--|
|apple(Mac)|MacOS|
|Microsoft (Windows)|Windows|
||Linux|

・Linuxは主にサーバー用として使うOSです。
IT系だと意外と使う場面が多いのです。

・クロスプラットフォームはどのOSでも対応可能ということです。

**②Webサーバー**
簡単に言うと
ホームページを置いておくサーバのこと。
※サーバは「サービスや機能を提供する側のコンピュータ」です。

※Apache(アパッチ)以外にもnginx(エンジンエックス)なども人気です。

**③DB(データベース)**
簡単に言うと
データの集まりのこと。保存したり、検索したり様々なことができる。

・MySQLはDBの1つです。
特徴：無償で使用でき、初心者でも導入しやすく扱いやすいため非常に人気の高いデータベース管理システム。

・MariaDBはMySQLのソースコードをベースにして、新機能追加,ソースコードの改善など組み込まれたデータベース管理システム。

**④プログラミング言語**
簡単言うと
人間がコンピューターに伝える時の言葉。

・PHPは動的にWebページを生成することができるサーバーサイドのスクリプト言語。

**⑤プログラミング言語**
・Perlはテキスト関係の処理が得意とする言語。
最近はPHPを代用することが多い。
XAMPPでは標準でPerlが入っています。

#どの仮想化を使えばいいのか？
結論
自分の環境にあった仮想化を選択したらいいと思います。

・Windowsの場合
XAMPP,LAMP

・Macの場合
MAMP,LAMP

・XAMPP,MAMPはダウンロードするとすぐに使えるようになります。

・LAMPは色々設定などが必要なので少し難易度が上ります。


次回LAMPについてお伝えできればと思います。
ありがとうございました。
プログラミング学習で役立った記事一覧

#はじめに
この記事は私がプログラミング学習をする上で、Qiitaに限らず役に立った記事を、議事録代わりにまとめたものです。
もしかしたらURL先のサイトや記事がなくなっているかもしれないので、お気づきの方はご一報ください。

随時更新中！！

#生のプログラム目次
[HTML](#HTML)
[CSS（SCSS）](#CSS（SCSS）)
[PHP](#PHP)
[JavaScript](#JavaScript)

#ライブラリ目次
[jQuery](#jQuery)
[jQuery UI(Sortable)](#jQuery UI(Sortable))


#CMS目次
[WordPress](#Wordpress)
[EC-CUBE](#EC-CUBE)

#フレームワーク目次
[Laravel](#Laravel)

#HTML
・

#CSS(SCSS)
・

#PHP
・[PHPのバージョンを7.4にアップデートする](https://qiita.com/kuroro_ru/items/046cba8e23d32599ee4a)

#JavaScript
・

#jQuery
・

#jQuery UI(Sortable)
・[Sortable（TrelloのようなD&Dでリストを移動させる機能）](https://jqueryui.com/sortable/#portlets)

#WordPress
・

#EC-CUBE
・

#Laravel
Laravel8（一部の記事はその限りではない）から入ってきた初学者は必読した方が良いと思う記事は<font color="#ffdd33">★</font>をタイトル末尾に付けておきます。
・[Laravel8を試したら即効でエラー「Target class [〇〇〇Controller] does not exist.」が表示された](https://qiita.com/tamakiiii/items/e71040173fa0a1fcad83)
・[【Laravel】MySQLの接続方法を徹底解説【コピペでOK】](https://yaba-blog.com/laravel-db/#toc8)<font color="#ffdd33">★</font>
・[【初心者向け】PHPフレームワークLaravel入門（第２版）をLaravel８で勉強するポイント](https://bokihajimeru.com/phplaravel/2852/)　<font color="#ffdd33">★</font>
・[Laravel8ではweb.phpの書き方が変わったね！ – Laravel8注目アップデート その2](https://blog.proglearn.com/2020/09/12/laravel8%E3%81%A7%E3%81%AFweb-php%E3%81%AE%E6%9B%B8%E3%81%8D%E6%96%B9%E3%81%8C%E5%A4%89%E3%82%8F%E3%81%A3%E3%81%9F%E3%81%AD%EF%BC%81-laravel8%E6%B3%A8%E7%9B%AE%E3%82%A2%E3%83%83%E3%83%97%E3%83%87/)
【Project Euler】 Problem5 【解いてみた】

# はじめに
【Project Euler】とは、プログラミングで解く数学の問題集です。

本投稿では初学者なりに、Problem1 を解くにあたっての考え方を解説しています。
ちなみに言語はRubyを用いています。


※本投稿は、Project Eulerのガイドラインに従い、解答例としてのコードは載せておりません。
　また、問題に関しては私が翻訳しています。ミスがあればご指摘ください。
　　
【Project Euler】について知りたい方はこちらから↓

 https://projecteuler.net/

# 問題(original ver.)
2520 is the smallest number that can be divided by each of the numbers from 1 to 10 without any remainder.

What is the smallest positive number that is evenly divisible by all of the numbers from 1 to 20?
# 問題(翻訳ver.)
2520は1から10までのすべての数字で割り切れる最小の数である。
同様に1から20までの整数で割り切れる最小の数を求めよ。

## 問題を解く上でのヒント
①この問題は解釈が重要です。1~20までの数字で割り切れるということは、求める数は言い換えれば1~20の倍数になっています。そして、その中で最小のものを求められているので、1~20の最小公倍数を求めればいいと解釈できます。

②最小公倍数を求めるのは非常に簡単です。例えば、aとbという数字の最小公倍数を求めるには、
a.lcm(b)　
という記述だけで十分です。
約数が少なければこの記述を繰り返し手で記述しても良いのですが、今回は1~20なので手間がかかります。

③そこで、予め自分で1~20の数字を入れた配列をつくります。
そしてその配列に対して繰り返し処理をします。この時、injectを用いると、記述を非常にシンプルにできます。injectの使い方に関しては本記事では説明を省きますので、調べてみてください。

# おわりに
今回は【Project Euler】の問題5を解く上での考え方、流れを解説してきました。
今回の問題も、知識があれば非常にシンプルな記述だけで解けます。シンプルにまとめられたときは気持ちがいいですね。
injectの使い方もこの際に覚えてしまいましょう！

このほかにも多くの問題が存在しているので、気になる方は最下部のリンクから挑戦して見てください。
また今後、私自身その他の問題にも挑戦し、同じような備忘録を投稿していきます。
私の備忘録が少しでも皆さんの参考になれば幸いです。ありがとうございました❗


https://projecteuler.net/about

問題を閲覧するにはアカウント登録が必要です。↑
Laravel Breezeでユーザー登録後にメールアドレスの確認メールが送信されるようにする

Laravel Breezeを利用するととても簡単にログイン機能を実装することができます。ただ、ユーザー登録後にメールアドレスの確認メールを送信するには手動で実装する必要があったのでメモ。


## 前提

下記記事のプロジェクトを利用します。

Laravel SailとLaravel Breezeでさくっとログイン機能を実装する - Qiita
https://qiita.com/kai_kou/items/12c060a8b5e6eb409da8

[GitHubリポジトリ](https://github.com/kai-kou/laravel-sail-sample-projects/tree/main)もありますので、ご参考ください。


## 実装

`app/Models/User.php`で`User`クラスに対して`MustVerifyEmail`インターフェースを指定するだけで実現できます。

```php:app/Models/User.php(一部抜粋)
<?php

namespace App\Models;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

-class User extends Authenticatable
+class User extends Authenticatable implements MustVerifyEmail
{
    use HasFactory, Notifiable;
```

裏側でなにをしているのかは下記が詳しくまとめてくれています。(感謝

【Laravel】認証機能の実装方法（Laravel breeze）と処理内容の確認 - Qiita
https://qiita.com/yuta-38/items/360bde6654b6d32dd79e


## 動作確認

実際にユーザー登録してみるとメール送信されることが確認できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48549/59fce046-3928-6b65-6ed5-65e529addc92.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48549/a3456f46-4657-f32f-611f-1fd613351788.png)

やったぜ

## 参考

Email Verification - Laravel - The PHP Framework For Web Artisans
https://laravel.com/docs/8.x/verification#model-preparation

Laravel Breeze - Sending Registration Emails + Email Customizations
https://laracasts.com/discuss/channels/laravel/laravel-breeze-sending-registration-emails-email-customizations

【Laravel】認証機能の実装方法（Laravel breeze）と処理内容の確認 - Qiita
https://qiita.com/yuta-38/items/360bde6654b6d32dd79e
Xplenty: パッケージやジョブの検索方法について

このブログではXplentyの検索ボックスを使用して、パッケージやジョブを素早く見つけるの方法について紹介します。

パッケージやジョブは数が増えれば増えるほど、検索ボックスにキーワードを入力するだけでは探すのは困難です。しかし、便利な検索修飾子を使用することで、さまざまな検索条件での検索が可能となります。


#検索修飾子のリストを表示するには
パッケージ検索に「**:**」または「**+**」 を入力すると、修飾語のフルリストが表示され、適切な検索修飾子をクリックすると、検索ボックスに自動的にセットされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/2fcfedc6-0ca8-0f1f-692e-af0377e2f8e8.png)


#パッケージを検索する

|検索修飾子  |説明| 入力例|
|:-----------|:------------|:------------|
|id:	|パッケージのIDで検索| |
|name:	|パッケージの名称で検索| スペースを含む文字列を検索する際は、以下のようにダブルクォーテーションで囲む <BR> name:"(本番)SF連携 日次"|
|user:	|パッケージを所有しているユーザーで検索||
|created:	|パッケージの作成日時で検索||
|modified:	|パッケージの修正日時で検索||

#ワークスペースを検索する

|検索修飾子  |説明|
|:-----------|:------------|
|name:	|ワークスペースの名称で検索|
|user:	|ワークスペースを所有しているユーザーで検索|
|created:	|ワークスペースの作成日時で検索|
|modified:	|ワークスペースの修正日時で検索|

#ジョブを検索する
|検索修飾子 |説明|入力例|
|:-----------|:------------|:-----------|
|id:	|パッケージのIDで検索| |
|log:	|エラーログのメッセージで検索 |<Font color="Green">log:syntax</Font><BR>※検索したいエラー語句を指定|
|user:	|実行ユーザーで検索|
|status:	|ジョブの実行結果で検索 (failed, pending, stopped, running, stopping ,completed)を指定|<Font color="Green">status:failed</Font><BR>*ジョブがエラーになったものを検索 |
|package:	|パッケージ名称で検索| スペースを含む文字列を検索する際は、以下のようにダブルクォーテーションで囲む　<BR> <Font color="Green">package:"(本番)SF連携 日次"</Font>|
|cluster:	|ジョブ実行に使用したクラスタ名で検索|
|started:	|ジョブ開始日時で検索|
|finished:	|ジョブ完了日時で検索|
|duration:	|ジョブの実行時間が指定した秒数で検索|<Font color="Green">duration:>600</Font><BR>*ジョブ実行時間が10分を超えるもの
|schedule:	|スケジュール名で検索|
JSとChrome拡張機能で出退を自動化

[スマレジ](https://timecard1.smaregi.jp/)の[タイムカード](https://smaregi.jp/product/timecard-cooperation.php)にて
出退の自動化を目指しました。
![Inkedsyutai_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106078/31b6c185-5a72-dbce-25eb-f3ebbae38335.jpeg)

各ボタンをJSを使って自動でクリックして、
毎朝、毎夕の業務をショートカットします。

##JavaScript

```javascript:JS
const code = '○○_2_○_○○_83_6b_○_6b&se=1&sf=○';
const pin = '0000';// pinを入力　デフォルトの場合は0000

const URL_before = 'https://timecard1.smaregi.jp/shift_stamps/pin?def=' + code;

//smaregi 出退
const URL = 'https://timecard1.smaregi.jp/shift_stamps?def=' + code;//タイムカードログインのURL
const start_work_time = 9;//始業時間
const end_work_time = 18;//終業時間

if(location.href == URL_before){
	window.setTimeout(function(){
		document.getElementById('pinCertify').value = pin;
		document.getElementById('submit').click();
	},3000);
}

if(location.href == URL){
    window.setTimeout(function(){
        //smaregi 出退
        // Dateオブジェクトを作成
        const date = new Date () ;

        // 各情報を取得
        const dayOfWeek = date.getDay() ;
        const dayOfWeekStr = [ "日", "月", "火", "水", "木", "金", "土" ][dayOfWeek] ;

        const hour = date.getHours() ;

        if(dayOfWeekStr != '日' && dayOfWeekStr != '土'){// 平日であれば
            if(hour <= start_work_time && hour >= (start_work_time - 1)){// 8以上9以下　8・9のみ
                document.getElementById('start').getElementsByTagName("a")[0].click();
            }
            if(hour <= (end_work_time + 1) && hour >= end_work_time){// 18以上19以下　18・19のみ
                document.getElementById('end').getElementsByTagName("a")[0].click();
            }
        }
    }, 3000)
}

```

上記がコードです。
9時～18時の勤務を想定しているため、シフト勤務やフレックス勤務の場合は変更ください。

##ScriptAutorunner
そしてJSを自動で実行してくれる拡張機能が以下です。

JSを画面開いたときに自動実行してくれるChromeの拡張機能：[ScriptAutoRunner](https://chrome.google.com/webstore/detail/scriptautorunner/gpgjofmpmjjopcogjgdldidobhmjmdbm)

拡張機能を追加したのち、

![Inkedjs_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106078/7a02d901-9745-0b64-0d19-61de999f2370.jpeg)

このようなオプション画面を開きます。
各『Script0』などの要素にJSのコードを入れて実行することができます。
特定のドメインで実行する場合は

![link2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106078/68b5cfe7-2ad9-f8db-5360-15c746f31367.jpeg)

こちらを好きなURLに変えてください。

```plaintext:URL
//URL
timecard1.smaregi.jp

```

自動とは言いつつURLを開いた最初の一回のみ動くため、適宜リロードするなどして対応してください。

不具合ありましたらコメントください。。

これで、出退の業務自動化完了！（スマレジに限る……）
Reactを学ぶ前にJavaScript基礎を学ぶその2

## はじめに
Rails + Reactでポートフォリオを作ろうと思いReactの勉強を始めたけどJavaScriptの知識があまりにもなかったので、最低限Reactを使うなら知っておいた方がいいJavaScriptの知識をまとめました！　その2です！

##スプレッド構文
`...array`のようにドット３つの形で記述され、配列やオブジェクトの要素を展開する構文のこと。


スプレッド構文を使うと要素が順番に設定されていく

```javascript:例
const array = [1, 2, 3, 4 ,5 ];

console.log(array[0],array[1], ...array); // => 1, 2, 3, 4, 5

```

コピーや結合もできる。

```javascript:例
const array1 = [10, 20];
const array2 = [30, 40];

const array3 = [...array1];
console.log(array3); // => [10, 20]

const array4 = [...array1, ...array2];
console.log(array4) // => [10, 20, 30, 40] 
```

また分割代入でも使うこともできるので便利！

```javascript:例
const array1 = [1, 2, 3, 4 ,5 ];
const [num1, num2, ...num3] = array1;

console.log(num1); // => 1
console.log(num2); // => 2
console.log(num3); // => [3, 4, 5]
```

### mapとfilter

・map

新しく配列を生成したり、

```javascript:例
const nameArr = ["山田", "田中", "佐藤"];

const nameArr2 = nameArr.map((name) => {
  return name;
})

console.log(nameArr2); // => ["山田", "田中", "佐藤"]

```

配列をループさせることができる。

```javascript:例
const nameArr = ["山田", "田中", "佐藤"];

nameArr.map((name) => console.log(name)); 
```

```console:console
山田 
田中 
佐藤
```

indexを持たせたい時は第2引数に持たせる

```javascript:例
const nameArr = ["山田", "田中", "佐藤"];

nameArr.map((name, index) => console.log(`${index + 1}番目は${name}です`)); 

```

```console:console
1番目は山田です 
2番目は田中です 
3番目は佐藤です 
```

・filter
条件を設定して設定した条件に一致した新しい配列を生成する。

return内に条件式を記述する。

```javascript:例
const numArr = [1, 2, 3, 4, 5];

const newNumArr = numArr.filter((num) => {
  return num % 2 === 0;
});

console.log(newNumArr); // => [2, 4]
```

## 三項演算子

if文をシンプルに書ける。
単純な処理ならいいが多用するのは可読性が悪くなるので注意。

```javascript:通常

if (条件式) {

    //true時の処理

} else {

    //false時の処理

}
```

```javascript:三項演算子
条件式 ? true時の処理 : falseの処理
```

```javascript:例
const num = 1 > 0 ? "trueです" : "falseです";

console.log(num); // => trueです
```

retrun部分に使う例

```javascript:例
const sum = (num1, num2) => {
  return num1 + num2 > 100 ? "100以上です" : "100以下です";
}
console.log(sum(80, 10)); // => 100以下です
```

## 論理演算子 ｜｜　&& の意味

| | は左側がfalseなら右側を返す
この場合`val`は値が入っていない`null`でfalse判定なので右側が返っている。

```javascript:例
const val = null;

const num = val || '(^○^)';

console.log(num); // => (^○^)
```

逆に&&の場合左側がtrueなら右側を返す。

```javascript:例
const val = 1;

const num = val && '(^○^)';

console.log(num); // => (^○^)
```

以上です！
これでReactが少しは分かるはず！


####参考にしたもの
[モダンJavaSciptの基礎から始める挫折しないためのReact入門](https://www.udemy.com/course/modern_javascipt_react_beginner/)
Camsense X1を使ってROS上でレーザースキャンしてみる

#今回の流れ
激安のLiDARで簡単にレーザースキャンが出来れば、気兼ね無く無茶な事にも使えて挑戦しやすい環境が構築できると考えました。そこで今回激安LiDAR Camsense X1を使ってROS上でLaserScanしてみることにしました。以下に購入したCamsense X1の写真を載せましたが、安い分だけ最初からちょっと傷が付いていたりしますが、、、まぁ構いません。
またこのLiDARでSLAMを動かすことも可能なので、別途記事を書こうと思っています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212663/b94e29bb-9e7e-22b1-b33b-9abaeca5918e.jpeg" width=50%>
まずは今回の内容として以下の様な流れで書かせてもらいます。


&nbsp;1.激安LiDARを購入
&nbsp;2.UART-USB変換ケーブルを購入
&nbsp;3.それぞれを接続する
&nbsp;4.ububtu上で確認してみる
&nbsp;5.ROS上で動かしてみる
&nbsp;6.まとめ
&nbsp;7.今後の展開
&nbsp;8.参考文献

#1.激安LiDARを購入
　以前、Aliexpressで激安で売られていた以下のLiDARを使わずに漬物となっていましたが、もったえない！と思い使ってみることにしました。(2021/5/23 PM0:00 AliExpressにて発見しリンク先変更)
https://ja.aliexpress.com/item/4001253880158.html?srcSns=sns_Copy&spreadType=socialShare&bizType=ProductDetail&social_params=20107023703&aff_fcid=d35c7d800ede4b91b19f59b58dcca145-1621739939676-04554-_mrvUGqr&tt=MG&aff_fsk=_mrvUGqr&aff_platform=default&sk=_mrvUGqr&aff_trace_key=d35c7d800ede4b91b19f59b58dcca145-1621739939676-04554-_mrvUGqr&shareId=20107023703&businessType=ProductDetail&platform=AE&terminal_id=611985eab1e9484ba8625514e7c92f81

#2.UART-USB変換ケーブルを購入
　このLiDARを使うに当たってUARTの端子をUSB Serialに変換して簡単に使えるよう、以下を購入しました。
https://ja.aliexpress.com/item/32967291612.html?spm=a2g0s.9042311.0.0.27424c4dSlzHH6
#3.それぞれを接続する
　LiDARとUART-USB変換ケーブルはこちらを参考にさせてもらいました。
[6ドルの激安LiDAR(Camsense X1)を使ってみる](https://qiita.com/usashirou/items/36d2c771619a22c2ec1b)

　そして以下の写真のように接続しております。
![20210313142951_IMG_2915.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212663/afe2d271-b504-4eb3-443e-b210b25c585c.jpeg)

 端子が抜けやすいので以下の様なUV接着剤で接着して端子を完全に固定しました。
[UV Cure Welding Compound Glue Pen](https://www.ebay.com/itm/5-Second-Fix-UV-Cure-Welding-Compound-Glue-Pen-Glass-Plastic-Wood-Repair-/272660212456?hash=item3f7bd0aae8)

#4.ububtu上で確認してみる
　上記ができましたら、LiDARをUSBケーブルでPCに接続し、ubuntuを立ち上げ、認識できているか確認してみます。
ちなみに今回試した環境はubuntu18.04LTSになります。

```bash:LiDARがUSBポートで認識できているか確認
$ ls /dev/ttyUSB*
```
 ここでLiDAR以外に何もUSBに接続していなければ/dev/ttyUSB0と返ってくると思います。
この時以下のコマンドでUSBで接続したLiDARを動かすための権限と永続的効果を付けます。

```bash:USBポート使用権限の付与と永続的な効果を付ける
$ sudo chmod 666 /dev/ttyUSB0
$ sudo gpasswd --add $USER dialout
```
上記コマンドを実行した後、再度ログインすることでLiDARを動かせるようになります。

#5.ROS上で動かしてみる
ubuntu18.04LTS環境ではROS Melodicを使うことになります。ROS Melodicのインストールおよびcatkin_wsのワークスペースの作成は様々な資料がありますので各自で行って下さい。
 ROS Melodicのインストールおよびcatkin_wsのワークスペースの作成が出来ましたら、ターミナルを起動しgit cloneによって以下のコードをビルドしました。

```bash:camsense_driverをビルドする
cd catkin_ws/src
git clone https://github.com/Vidicon/camsense_driver.git
cd ..
catkin_make
```
ビルドが通れば以下を動かせると思います

```bash:view.launchの起動
source ~/catkin_ws/devel/setup.bash
roslaunch camsense_driver view.launch
```
これで以下の様にLiDARからスキャンしたら情報が表示出来たと思います。
![Screenshot from 2021-03-13 17-42-47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212663/e88e4a0d-12c2-c1a4-dd8e-cd4ff355182e.png)


　$\huge{激安なのに、結構動くじゃないか！}$
 
#6.まとめ
 これらを使えば何と約千円程度でROS上でLiDARを動かす事が出来ました！起動してからモータの動きが安定するまで結構時間が掛かる点や測定精度については疑問符も付くかも知れませんが、この安さで色々試せる環境を手に入れられるなら素晴らしいと思います！

#7.今後
 今後この激安LiDARを使ってSLAMを動かしてみた記事を書きますので、乞うご期待！！
#8.参考文献
[6ドルの激安LiDAR(Camsense X1)を使ってみる](https://qiita.com/usashirou/items/36d2c771619a22c2ec1b)
HTMLの構造について

HTMLはhead要素とbody要素から成り立つ。今回はbody要素内で、
その他の要素がどのような構造をとるのかについて記事を書きたいと思う。

### HTMLのレイアウト構造
①HTMLとは左上に重力のある積み木である
HTMLは積み木の集合体であると言える。左上に重力があるので、何も遮るものがなければ積み木（=要素）は左上から収まっていく。

②入れ子構造になっている
HTMLはすでに作成した要素の中に、さらに要素を追加することができる。
これを入れ子構造という。

③HTMLの要素は中身に応じて高さが変動する
積み木の一つ一つは中身によって高さの変わる箱であると言える。

### ブロックレベル要素とインライン要素について
HTML要素は積み木であることが積み木とならない要素も存在する。
つまり、HTMLの構造をつくらない要素がある。
積み木となる要素とそうでない要素は、ブロックレベル要素とインライン要素の2種類に分けられる。

■ブロックレベル要素
HTMLの積み木を構成する要素。1つのブロックレベル要素が、1つのHTMLにおける積み木として存在する。
特徴は以下もの。

・横幅いっぱいで表示される四角い箱である
・箱の中にテキストなどが表示される
・中身に関係なく横幅いっぱいになる
・高さは中身によって変わる
・縦並びで表示される

■インライン要素
インライン要素とは、テキストの一部を示す要素で、主に文字の装飾などに使用する。
特徴は以下のもの。

・中身のテキスト量の分だけ横幅が広がる
・高さは中身によって変わる
・連続すると横並びで表示される

### 親要素と子要素について
要素が入れ子構造になると、「親要素」と「子要素」という言葉で要素間の関係性を表す。

■親要素
親要素とはある要素の１つの上位の階層にある要素。

■子要素
子要素とは親要素から見てその下位階層にある要素。

以上がHTMLの基本的な構造。
ブロック要素、インライン要素、入れ子構造を理解していると
レイアウトが作りやすいと感じた。
MySQL sql_mode

MySqlのレコードのinsertで、開発環境で動作していたものが、チェック環境で動作しませんでした。
原因は、NotNull制約がついているカラムに空のデータをinsertしようとしたためでした。
開発環境とテスト環境でsql_modeの設定が異なっていたための挙動の違いです。
双方の環境で設定を合わせておかないとダメですね。。
解決方法をメモします。



# 挙動の違い
NotNull制約のついたcol1, col2というカラムを持つtest_tableがあるとして
### テスト環境
 
```sql
mysql> insert into test_table(col1) values('aaa');
ERROR 1364 (HY000): Field 'col2' doesn't have a default value
```
insertに失敗

### 開発環境
```sql
mysql> insert into test_table(col1) values('aaa');
Query OK, 0 rows affected, 1 warning (0.00 sec)
```
insertが通ってしまう。

### テスト環境の設定
```sql
mysql> SELECT @@global.sql_mode;
+--------------------------------------------+
| @@global.sql_mode                          |
+--------------------------------------------+
| STRICT_TRANS_TABLES,NO_ENGINE_SUBSTITUTION |
+--------------------------------------------+
1 row in set (0.00 sec)
```

### 自分の開発環境の設定
```sql
mysql> SELECT @@global.sql_mode;
+-------------------+
| @@global.sql_mode |
+-------------------+
|                   |
+-------------------+
1 row in set (0.00 sec)
```
まったく設定がされていなかった！

### sql_modeの設定
```sql
SET GLOBAL sql_mode = 'STRICT_TRANS_TABLES,NO_ENGINE_SUBSTITUTION';
```
テスト環境と同じ`sql_mode`をセット

```sql
mysql> insert into test_table(col1) values('aaa');
ERROR 1364 (HY000): Field 'col2' doesn't have a default value
```
空のデータをinsertすると怒られるようになった


---
# 主なMySQLのsql_mode
```sql
sql_mode = 'ERROR_FOR_DIVISION_BY_ZERO'
```
デフォルトではMySQLでは0の除算は NULL になるが、これを指定しておくとエラー表示してくれる。

```sql
sql_mode = 'NO_ZERO_DATE'
```
DATE型 DATETIME型 に 0000-00-00 を入力しようとするとエラー表示してくれる。

```sql
sql_mode = 'NO_ZERO_DATE'
```
DATE型 DATETIME型 に 2017-12-00 を入力しようとするとエラー表示してくれる。

 

 

● MySQLのsql_modeを設定する
***root ユーザーの場合は GLOBAL に設定することが可能です***

・設定例

```sql
SET SESSION sql_mode = 'STRICT_ALL_TABLES,ERROR_FOR_DIVISION_BY_ZERO,NO_ZERO_DATE,NO_ZERO_DATE';
``` 

/etc/my.cnf を書き換える権限がある場合は、こちらを設定して  mysql をリスタートします。


```:my.cnf
sql_mode=NO_ENGINE_SUBSTITUTION,STRICT_TRANS_TABLES
```
macOS Big Sur 移行メモ (Homebrew, MacTeX)

Big Sur を新規インストールしたところ、いくつか環境セットアップにハマったところがあったので対処法を書いておく (as of 2021年3月)．



# Homebrew より前に Xcode をインストールしたほうが良さそう

Xcode が入っていない環境で homebrew をインストールすると Command Line Tools が自動的にインストールされるのだが、MacTeX の関連ツールなどいくつかのものは Xcode をフルでインストールしないと動かない (ように見える)．

Xcode を App Store 経由でインストールした後に Homebrew をインストールする。

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



# wget や xz も先に入れておく

MacTeX まわりのツールは wget などの基本的なコマンドを前提にしているように見える．

```sh
brew install wget xz
```


# MacTeX は Homebrew Cask からインストールする

何かうまく動かなかった時にアンインストールを容易にするため．

```sh
brew install --cask mactex
```

# ヒラギノフォントを MacTeX で使いたい

これまで MacTeX でヒラギノフォントを使うには [TeX Wiki > ヒラギノフォント](https://texwiki.texjp.org/?%E3%83%92%E3%83%A9%E3%82%AE%E3%83%8E%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88) に従っていればよかったのだが、今回はいくつか問題に直面した．

## kanji-config-updmap-sys に失敗する

上記のような経緯のせいか以下のコマンドで失敗するようになった：

```sh
% sudo kanji-config-updmap-sys --jis2004 hiragino-highsierra-pron

NOT EXIST ptex-hiragino-highsierra-pron.map
```

TeX のことは全くわからないのだが、tlmgr でインストールしたパッケージをアンインストール (`sudo tlmgr uninstall japanese-otf-nonfree japanese-otf-uptex-nonfree ptex-fontmaps-macos cjk-gs-integrate-macos` や `sudo tlmgr uninstall cjk-gs-integrate adobemapping`) したり再インストール等しているうちにこのコマンドは成功するようになった． 


## dvipdfmx に失敗する

```
% dvipdfmx 11.8.2
11.8.2 -> 11.8.2.pdf
[1
dvipdfmx:warning: Could not locate a virtual/physical font for TFM "rml".
dvipdfmx:warning: >> This font is mapped to a physical font "HiraginoSerif.ttc".
dvipdfmx:warning: >> Please check if kpathsea library can find this font: HiraginoSerif.ttc
dvipdfmx:fatal: Cannot proceed without .vf or "physical" font for PDF output...

No output PDF file written.
```

これも色々ググったのだが最終的に [TeX ＆ LaTeX Advent Caleandar 2017 ［改訂第7版］LaTeX2e美文書作成入門 ヒラギノフォントパッチ](https://qiita.com/munepi/items/c4274da0646b3e785c7f) で紹介されているパッチを当てると動くようになった (Catalina では使わなかった気がする)． 作者様に感謝！

GitHub: [Bibunsho7-patch/Patch.app: ［改訂第7版］LaTeX2e美文書作成入門 ヒラギノフォントパッチ](https://github.com/munepi/bibunsho7-patch)


```
git clone --recursive https://github.com/munepi/bibunsho7-patch.git
cd bibunsho7-patch
sudo ./Patch.sh
```
Chrome DevTools コンソールの便利機能

Chrome DevTools コンソールで、$(selector) とすると、selector の最初の DOM 要素を参照します。
この機能は document.querySelector() のエイリアスになるようです。

``` javascript
$('img')
```

こちらをコンソールに入力すると、ドキュメント内の最初の <img> 要素を返します。

``` javascript
$('img')
<img src="https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/38728/7677207f9203efb6254ce0889a665ff116b05e78/large.png?1611238040" alt="YoshinoriKanno">
```

*この機能は、Chrome DevTools コンソールから呼び出したときにのみ動作します。スクリプトの中で呼び出しても動作しません。*

Safari のコンソールでも動作しました。

``` javascript
const el = $('.css-42io5k')
```

こんなふうに .css-42io5k の要素を参照できます。

``` javascript
const el = $('.css-42io5k')
<a href="/YoshinoriKanno" class="css-42io5k">…</a>
```
他にも直前の戻り値や、戻り値の履歴を参照したり、いろいろな便利な機能があるようです。

参考 : 
[Console Utilities API Reference](https://developers.google.com/web/tools/chrome-devtools/console/utilities?hl=ja#queryselectorall)