OmniAICreator/Qiita-1.07M huggingface dataset:
【React】npx create-react-app my-appに失敗したとき ~ PCのユーザー名に空白があった時の対処法 ~

エラーの内容を見た感じ、ユーザー名に空白が入っているのが原因っぽい


## エラーメッセージ
ユーザー名が`AAA BBB`の時

```
C:\Users\AAA BBB>npx create-react-app my-app
Error: EPERM: operation not permitted, mkdir 'C:\Users\AAA'
TypeError: Cannot read property 'loaded' of undefined
    at exit (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:98:27)
    ... (省略)
C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:98
  var doExit = npm.config.loaded ? npm.config.get('_exit') : true
                          ^

TypeError: Cannot read property 'loaded' of undefined
    at exit (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:98:27)
    ... (省略)
Install for create-react-app@latest failed with code 7
```

## 解決法
**stack overflow :** https://stackoverflow.com/questions/56508244/error-installing-create-react-app-with-code-7

```bash
1. npm cache clean --force
2. npm install create-react-app --force
3. npm fund
4. npx create-react-app <app-name>
```


### GitHub
GitHubでIssueが投げられていました
https://github.com/facebook/create-react-app/issues/6512
x はどこから来た？

##はじめに

これは自分がラムダ式に出会った頃に受けた印象を元に書いた戯言的な記事です。
ちょっと雑な文章ですがご勘弁を、、、

#x はどこから来た？

例えば、こんなコードを見かけたことがあるだろう。

```c#:C#
var hoge = foods.Where(x => x.Price >= 100).FirstOrDefault();
```

このコードがやっていることは、使われているトークンや式を見て何となく想像がつく。

>x.Price >= 100 

は、価格が100円以上だろうとわかる。
その式が`Where`のカッコで囲まれていることから、SQL文を書いたことがあれば絞り込みを行うんだろうなと想像がつく。価格が100円以上の食べ物`foods`のデータ絞り込みを行い、

>.FirstOrDefault();

`FirstOrDefault`の言葉どうりに先頭データを得ていると想像できる。
ただひとつ腑に落ちないことがある。それが`x`である。`x.Price`とある。メンバを抱えているようだ。
![コメント 2020-08-12 225655.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294209/7a7d74a7-c191-6d2e-da49-ffa39e089054.png)
`x`にドットを打つとIntelliSenseでリストが現れる。その中に`Price`が見える。
このコードの前後の文は後述するが、`x`は後にも先にもこのカッコ内にしか現れない。

`x`はどこから来たのか？

突然、挨拶もなく現れた。`=>`もよくわからない。大なりイコール`>=`ではないな。見た目は右向き矢印だ。何となく左側の`x`が`=>`で右側に送り込まれて仕事をしている風に見える。

`x`よ、お前は何者だ？

##ラムダ式

この文をVB.NETで書き換えたらどうなるか。以下のとおりである。

```vb:VB.NET
Dim hoge = foods.Where(Function(x) x.Price >= 100).FirstOrDefault
```

C#より何をやってるかが分かりやすい。

>Function(x)

は誰が見ても`x`を引数にとった関数である。その右隣はC#と一緒の式だ。

2つの言語により書き方は違えど、`Where`のカッコ内はいずれも「ラムダ式」である。
**ラムダ式とは、無名関数のことで、C#では=> の左辺が引数、右辺が実装(多くは単一の式)となっている。**
VB.NETのラムダ式は、`Function(x)`とあるので誰が見たって関数だとわかる。通常のVB.NETの関数定義の場合、

>Function 関数名(x)

となるが、無名なので関数名が省略されている。C#に至っては`Function`すら無い。引数`x`があるのみである。

##Whereメソッド
ドットを打つとIntelliSenseのリストが現れるところから、何か実態が存在するかのように勘違いをしてしまうが、`x`は単なる関数の引数である。
`x`は何でもいい。`y`でも、`z`でも、`arg`でも、`food`の`f`でもよい。関数を自作するとき、引数名を自分好みに勝手に宣言するのは当たり前のことだ。

```c#:C#
    class food
    {
        public string Name { get; set; }
        public int Price { get; set; }
        public food(string name, int price)
        {
            Name = name; 
            Price = price;
        }
    }
```


```c#:C#
        var foods = new List<food> { };
        foods.Add(new food("うどん", 80));
        foods.Add(new food("もやし", 30));
        foods.Add(new food("さんま", 120));
        foods.Add(new food("たまご", 200));
        var hoge = foods.Where(x => x.Price >= 100).FirstOrDefault();
```

`Where`は、`foods`のデータ型である`List<T>`クラスの拡張メソッドである。拡張メソッドとは、雑に説明するとクラスそのものの実装を変えることなく後付けされたメソッドのことである。(ここでは詳しい説明を省略する)

`Where`の引数は、シグネチャ(宣言構文)の定められたラムダ式である。ラムダ式なら何でも受け入れるということでは当然ない。
ラムダ式の左辺、`x`の型は定められている。`List<food>`の一つ一つ、`food`クラスである。「うどん」であり「もやし」であり「さんま」であり「たまご」である。
IntelliSenseのリストに`Price`が現れたのは型が定められているからだ。
右辺は引数`x`に関するユーザーが評価したいbool型を返す式である。`foods`の全てのアイテムについて引数`x`を使って評価が行われる。想像するに`Where`の中で`foods`がループで回され、そのループの中で右辺の式が使われているのだろう。
リスト内の全アイテムに対して自分が求める条件にあったアイテムだけを抽出することができる。様々な条件を指定できる。クラスをロジックで抽出できる。何という賢い仕組みだろう！

で、上の例で`x`から得た`hoge`の中身は「さんま」である。
「さんま」は120円か。今年(2020年)はそんなに安く買えないな、、、:sweat_smile:
rails学習　7日目その３

#Railsチュートリアル　第７章

##7.1.1　デバッグとRails環境

![IMG_0560.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/815476/c7ef2d09-1746-35a5-b0f8-05cadc2c3e6e.jpeg)
debug(params)機能を使うとコントローラーのアクションやその他の情報を表示してくれて便利になる。

>csccのミックスイン機能

```scss
@mixin box_sizing{
  -moz-box-sizing:border-box;
  -webkit-box-sizing: border-box;
  box-sizing:         border-box;
  }

.debug_bump{
  clear:both;
  @include box-sizing
  } 
```
@mixinで複数の機能をまとめて、それを変数のように扱うことができる。呼び出す時は@includeで呼び出すことで機能が使える

##7.1.4　Gravatar画像とサイドバー

Gravatarは無料サービスで、プロフィール写真をアップロードして指定したメールアドレスと関連付けることができる。コードとして使うときはgravatar_forというヘルパーメソッドを使い画像をアドレスと紐付けることができる。

>①gravatar_forヘルパーメソッドを作る

![IMG_0562.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/815476/12e515fc-3025-ced6-5910-0394cb359c7e.jpeg)
image_tagというヘルパーメソッドを使い
image_tag(gravatarのURL,alt:〇〇,class:"gravatar")とかく
これでヘルパーメソッドの定義が終わったので次に実際に使っていく

>②ビューにGravatar画像と名前を載せる

使いたいビューに

```
<%= gravatar_for @user %>
<%= @user.name %>
```
を貼り付ける(@userを定義している必要あり)
@userが登録したメアドに紐づいている画像がgravatarにあればそれを表示させる。

##7.2.1 form_forを使用する

![IMG_0564.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/815476/bc5b4394-8ab2-b07e-18f3-58ab5f301ba5.jpeg)

>strong Parameters

```ruby
def create
  @user = User.new(params[:user])
end
```
params[:user]だけでは悪意のあるユーザーが他に別の情報を送信するかもしれない危険性がある。なのでこちらが許可した値のみを許可するためのコードが必要になる。

```ruby
def user_params
  params.require(:user).permit(:name, :email, :password, :password_confirmation)
end
```
このコードを書くことで指定の値だけを許可して通すようになる。この結果コードは以下のようになる

```ruby
def create
  @user = User.new(user_params)
end

private

def user_params
  params.require(:user).permit(:name, :email, :password, :password_confirmation)
end
```
privateより下にあるコードは外部からの操作を受けないので安全である


##7.3.3　エラーメッセージ

ユーザー登録はできるようになったがもし登録に失敗しても現在では「失敗しました」などのメッセージが何も表示されないので保存が成功したのか失敗したのかユーザー側は判断ができない状態になっている。

なので![IMG_0566.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/815476/7205666d-e982-8a16-ad09-353d09a6db78.jpeg)
![IMG_0568.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/815476/f5c547cd-396d-5fee-57a3-4924b99349a3.jpeg)

保存がされなかった場合はエラーを表示するコードを書く

構造としてはエラーを表示するためのコードなどを_error_messageファイルに書いておき、それをrenderを使ってnew.htmlまで持ってきている。

##7.4 ユーザー登録成功
ユーザーの登録失敗の時にエラーを出せるようにしたが、次は登録が成功した時に成功のメッセージが出るようにする。

```ruby
if @user.save
flash[:success]="Welcome to the Sample App!"
redirect_to @User 
```
「もしユーザーが保存に成功したら"Welcome to the Sample App!"というフラッシュメッセージを出す」というコードがかけた。
しかしまずflashを定義していないのでflashを呼び出すも何もない。
なのでflashを定義する

```ruby
<% flash.each do |message_type,message| %>
<div class="alert alert-<%= message_type %>"><%= message %></div%>
<% end %>
```
これでflashを定義できた。
rails routesの読み方

#はじめに
今回は、rails routesコマンドを入力した際に、記述されているルーティングの読み方を説明していきたいと思います。

## 1.ルーティングとは

端的に言うとリクエストの行き先を指定する「道しるべ」と言えます。

## 2.ルーティングの設定
routes.rbファイルに記載するとルーティングが設定できます。

```
Rails.application.routes.draw do
 get 'posts', to: 'posts#index'
end
```

## 3.ルーティングの確認

```rails routes```コマンドをターミナルで入力することで設定されたルーティングを確認できます。

## 4.rails routesの読み方
```
Prefix  Verb  URI Pattern       Controller#Action
posts   GET   /posts(.:format)  posts#index
```
Prefix・・・URI Patternに名前をつけて変数化したもの
Verb・・・HTTPメソッド
URI　Pattern・・・WebにおけるURL
Controller#Action・・・リクエストの処理を行うコントローラーとアクション

以上の４点の内容を理解することで、どのようなルーテンィグが設定してあるのか、どのような処理を行おうとしているのかの流れを掴めると思います。
ぜひ理解して一緒にプログラミングを楽しんでいきましょう！

# さいごに
最後まで読んでいただきありがとうございます！
同じ部分で困っている方や悩んでいる方のお役に立てたら幸いです！
Ruby① Windows環境の構築

備忘録

# インストーラ付きのRubyダウンロード
以下のサイトからWindows用バイナリをダウンロードする。

* [RubyInstaller](https://rubyinstaller.org/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/476387/4bf3e54b-ff5c-89bb-f37c-a5c496351290.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/476387/fe796568-5d1d-ae32-63c6-8b5a7fb69c7f.png)

ダウンロードしたexeファイルをダブルクリックする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/476387/9cac6545-069f-672c-2819-3597d5018d82.png)

インストーラが起動するので、案内に従ってインストール作業を進め、完了したことを確認する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/476387/91d6fb70-0507-2617-9aa1-30936d9d3664.png)

## 正常にインストールされたことの確認
コマンドプロンプトを立上げ、以下のコマンドを入力する。

```shell
ruby -v
```

正常にインストールされている場合、Rubyのバージョン情報が表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/476387/ab36c8bb-6124-7389-1c8c-7f072010a263.png)


## rubyコマンドを使用したスクリプトの実行
以下の内容を`hello.rb`という名前のファイルとして作成する。

```ruby:hello.rb
puts 'Hello, world!'
```

その後、コマンドプロンプトを開き、ファイルを保存したディレクトリに移動したあとで、以下のコマンドを実行する。

```shell
ruby hello.rb
```

スクリプトが実行され、結果がコマンドプロンプト上に表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/476387/966fe574-1d19-4a95-4787-0c0096ae871c.png)
LPICの学習を開始してから知ったIT用語

#【LPICの学習を開始してから知ったIT用語】

##自分用まとめ。

<strong>・ブートローダ</strong>とは、コンピュータを起動した時に呼び出されて、OSなどを動かすプログラム

　　電源投入　→　BIOS起動　→　<strong>ブートローダ起動</strong>　→　OS起動

<strong>・GRUB</strong>とは、コンピュータの起動時に、最初に読み込まれ、ストレージなどからOSを読み込んで起動するブートローダ

<strong>・IQR</strong>とは、PCのキーボードやマウスなどの入出力デバイスが、CPUを呼び出すときに生じる割り込み要求の信号。

<strong>・アドオン</strong>とは、機能拡張用のソフトウェアを合体させることで本体となるソフトウェアの出来ることを増やせる。（後から追加部品くっつける）

<strong>・カーネル</strong>とは、階層型に設計されたOSの中核。appとハードウェアレベルでの実際のデータ処理との間の架け橋をする。

<strong>・シンボリックリンク</strong>とは、UNIX系OSにおけるファイルやフォルダの代理人ファイル。
→注文受付代行ファイル。（それ自体に中身の意味はない）

<strong>・デーモン</strong>とは、UNIX系のOSにおける常駐プログラム
→主にバックグラウンドで動作するプロセス

<strong>・APT（Advanced Packaging Tool）</strong>とは、ソフトウェアのインストールとアンインストールを自動的に行う。ソフトウェアの管理を簡単に行えるようにするための仕組み。

<strong>・再帰的（再帰）</strong>とは、あるものについて記述する際に記述しているそれ自身の参照がその記述中にあらわれることをいう。

<strong>・再帰処理</strong>とは、自分自身を呼び出す処理が書かれている。関数。

<strong>・ファイルシステム</strong>とは、記憶装置に保存されたデータを管理するために必要な機能。
→OS提供。ファイルの管理はここでされる。

<strong>・スワップ領域</strong>とは、使っていないメモリの内容を一時的にしまっておくための場所。

<strong>・パーミション</strong>とは、許諾の意味。UNIX系OSではファイルシステム上でのファイルやディレクトリなどに設定されるユーザ、ユーザーグループごとのアクセス許諾（アクセス権）を指す。

<strong>・スティッキービット（Sticky Bit）</strong>とは、ディレクトリに設定される特殊なアクセス権。UNIX系システム上のファイルやディレクトリに対応して設定されるフラグ。

<strong>・inode</strong>とは、UNIX系OSの一部のファイルシステムで用いられる。ファイルやディレクトリについての情報を記録した管理データのこと。
AWS EC2でターミナルを落としてもアプリが実行し続けるように設定する（デーモン化手順）

# はじめに

AWS EC2にて、Node.jsを使って自作したWebアプリケーションをデプロイすることは成功したのですが、
ターミナルを落とす（切断する）と、そのアプリケーションが稼働停止します。

ターミナルを落としても稼働し続けられるようには『デーモン化』という処理を行う必要があるようです。

そこで、私が行ったEC2におけるデーモン化処理について書いていきます。

# この記事でわかること

- Node.js + EC2でのデーモン化
- foreverライブラリの導入方法
- foreverライブラリの使い方(start, stop, list)

# 実行環境
- AWS EC2 (Amazon Linux2 AMI)
- Apache 2.4.46
- Node.js 12.19.0
- forever v3.0.2


# 解決方法

## foreverライブラリのインストール

下記コマンドにてインストールするとともに、
正常にインストールされたかどうかを確認します。

```
$ npm install -g forever

$ forever --version
v3.0.2
```

## foreverを用いたアプリケーションの実行

本来であれば app.js を実行するとき、`$ node app.js`　と入力するのですが、
これではターミナルを落としたときに、実行も終了されてしまいます。

foreverライブラリを用いてデーモン化するときは、
`$ forever start app.js`　と入力し、実行します。

```
$ forever start app.js
warn:    --minUptime not set. Defaulting to: 1000ms
warn:    --spinSleepTime not set. Your script will exit if it does not stay up for at least 1000ms
info:    Forever processing file: app.js
```



## foreverを用いたアプリケーションの実行を終了する

foreverの実行状況を`$ forever list`コマンドによって確認します。
実行したアプリケーションに対して、5ケタのIDが設定されているので、それをメモしておきます。
次に`forever stop`コマンドによって実行を終了します。

```
$ forever stop [yourNumber]
info: Forever stopped process:

// 以下略

```

実行が終了されていることを確認します。

```
$ forever list
info: No forever processes running
```


# 参考

- [Node.jsでslackのbotを作ってEC2上でデーモン化するまで](https://qiita.com/G-awa/items/4c2119cd396ffd0be917)
- [Node.jsで作ったアプリを実行しっぱなしにする](https://qiita.com/mude/items/d5098f15f328b3db2610)
- [【Node.js入門】foreverの使い方とデーモン化による永続化・自動起動まとめ！](https://www.sejuku.net/blog/81363)
- [forever で minUptime と spinSleepTime の警告が消えない](http://var.blog.jp/archives/79903636.html)
Dockerのイメージもコンテナもぜーんぶきれいに消してやり直したい時のコマンド

Dockerいまだに慣れておらず初期開発環境構築のたびに何度も作り直してます。。
何度も作り直してると同じような名前のものばかりになるし一掃してしまいたくなることがよくありその時のコマンドをメモしておきます。

## すべてのコンテナを停止

```:terminal
PS C:\Users\607> docker stop $(docker ps -aq)
```

停止したコンテナIDが出力されます

```:出力ログ
b900982a522d
```

## すべてのネットワークを停止

```:terminal
> docker system prune
```

有効なネットワーク数分ズラズラとログが出力されます

```:terminal
WARNING! This will remove:
  - all stopped containers
  - all networks not used by at least one container
  - all dangling images
  - all dangling build cache

Are you sure you want to continue? [y/N] y
Deleted Containers:
b900982a522d3b706885a57cd3ae04f1e5e72266a230a9ed5d746fd67e9fb98c

Deleted Images:
deleted: sha256:917f7b2666d566d786c7a87d88c3a526ae73328b58883dd03ac56ac0c80892b1
deleted: sha256:0b7df1af6007d6a4579dae5458781967fe4f7541c25c50db585956d05d183cf0
deleted: sha256:042d7491666f0d7608fe6cfe54f7231818c3346c8f169a3edae50be677a4ba83
...

Deleted build cache objects:
reiknr169oxc59f9jy7hzp7tc
4olrdqcoqku9didqkquggjepb
ulylctcvpthkhx6l9erfchllz
...
Total reclaimed space: 1.574GB
```

## イメージをすべて削除

```:terminal
> docker rmi -f $(docker images -aq)
```

イメージ数分長い何かが出力されます

```:出力ログ
Untagged: vueapp:0.0.1
Deleted: sha256:a66b8502954033b2e9052e5b2a25dabc3a5d6d03de1ca2dd4c5c0e3b47ce260f
Untagged: httpd:latest
Untagged: httpd@sha256:b82fb56847fcbcca9f8f162a3232acb4a302af96b1b2af1c4c3ac45ef0c9b968
Deleted: sha256:3dd970e6b110c8cbcec63e05a91e3cefd23c76a780fcb78c33979153f044b2d4
Deleted: sha256:92ed257f355234f3e6173699f2ef99363a5babec07a6b9178b2b1afb57214c55
Deleted: sha256:b57fd9052964b1f8e16ba5e3785018ba52de527c6aba686bb3845581ca4b77d7
...
```

これで何度も失敗しても心機一転キレイにやり直せます。
[JavaScript]eclipseでJavaScriptを動かしてみる

前回、eclipseにjavascriptのプロジェクト(の殻)の作成はできたので、実際にhtmlとjsを書いてみて動かしてみる。

最初といえば「Hello, World!」を表示させるのがセオリー(?)ですがそれではつまらないので、ボタンを押したら「Hello, JavaScript!」のメッセージが表示されるように以下のようなhtmlとjsを書いてみた。

```html:NewFile.html
<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
        <title>test</title>
    </head>
    <body>
        <div id="hello"></div>
        <input type="button" value="ボタン" onclick="hello()" />

        <script type="text/javascript" src="./test_javascript.js"></script>
    </body>
</html>
```
```javascript:test_javascript.js
function hello(){
    document.getElementById("hello").textContent = "Hello, JavaScipt!";
}
```
では、実際にhtmlが表示されjsが実行されるか確認してみる。

①htmlを右クリック＞実行＞サーバーで実行 を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190156/a644d27c-b182-82ac-3399-edc4067dd71e.png)

②サーバー(デフォルトだとlocalhostのやつ?)を選択し、次へボタン押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190156/63305e36-0d06-74a7-cfec-fa03fc0998d5.png)

③実行したいプロジェクトが右側の”構成済み”に存在することを確認し、完了ボタン押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190156/7065b6bc-1106-bc1e-c66d-53d76aaf87bb.png)

④htmlが表示された！のでボタンを押下してみると、、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190156/29ec7205-9797-8676-22db-23b4f0e854d9.png)

⑤「Hello, JavaScript!」が表示された！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190156/c8cc8223-389c-936f-c659-2b19e8b7789f.png)


よって、htmlが表示されjsがちゃんと呼ばれて実行されるところまで確認できた。
【改良版】iPhoneショートカットでシステム音量を微調整する


以前投稿した[iPhoneショートカットでシステム音量を数値で指定する](https://qiita.com/benzene/items/682c447ce0713b9bea6f)について進展がありました。
**iOS14において現在の音量情報を取得できるようになった**ため、現在の音量の情報をもとに音量を調整が可能になりました。
この記事ではそれを用いてショートカットを新たに作成しましたので、詳細をまとめます。

# 現在の音量情報の取得
デバイス > 現在の音量を取得 から音量の情報を取得することができます。
最大値が**1**、最小値が**0**で規定されており、**0.001刻みの理論上1000段階の制御**が可能です。
そのため、かなり細かく微調整することができます。~~おそらく0.001の違いを聞き分けられる人はいないと思いますが…~~
一方、サイドの音量ボタンで操作を行った場合、**0.0625**刻みで変化します。
つまり、サイドボタンでは1÷0.0625=**16段階**の調整が可能です。
やはり16段階しかないのは微調整が効かないので個人的にはかなり使いにくいです。

# ショートカットの概要
早速ショートカットの概要に移ります。
今回は音量を上げる、または下げるショートカットを独立に作成しました。

1. 現在の音量の取得
2. 計算で0.01を足すor引く
3. 計算結果を現在の音量に設定する

今回は0.01で調整するようなショートカットを作ってみました。
この値は使用している音楽プレイヤーアプリやイヤホンによって最適値が変わってくると思うので、個別でちょうど良い数値を見つけるのが良いと思います。

# ショートカットのスクリーンショット
音量を上げる
<img width="400" alt="Screenshot at Oct 27 18-00-47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330454/5a2c6059-a3de-207e-eb38-0cd5886ec5a4.jpeg">
音量を下げる
<img width="400" alt="Screenshot at Oct 27 18-00-47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330454/28ee0e8d-dfe4-b600-2ae6-dd06d6b37bcb.jpeg">

# 共有リンク
以下のリンクから今回のショートカットをダウンロードすることができます。
ダウンロードには
iPhoneの設定
-> ショートカット
-> 信頼されていないショートカットを許可をオン
にする必要があるので各自設定の変更が必要です。

https://www.icloud.com/shortcuts/e035ac92a2e94b9ca92e5fc117606994

https://www.icloud.com/shortcuts/db3bb52eb7d44bf78cc902d61c4e5de9
無料で始める初めてのAWS① AWSのアカウント作成

# はじめに
AWSの存在は前から知っていましたが、使う機会がなく今まで触れることなく過ごしてきました。
そろそろ避けては通れぬ道に感じてきましたので、今回意を決して初めてみようと思います。

以下はその備忘録

## AWS アカウント作成
Webで「AWS 無料」と検索すると、以下のページがヒットしました。

* [AWS無料利用枠](https://aws.amazon.com/jp/free/?all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc)

このページの一番下にある「まずは無料で始める」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/476387/8cc137a1-bf24-71f0-6132-29960ef6f118.png)

「AWSアカウントの作成」ページが表示されるので、`Eメールアドレス`、`パスワード`、`パスワードの確認`、`AWSアカウント名`を入力して、「続行」ボタンをクリックします。
※登録は2020年11月3日に行いましたので、ここから丸一年は無料で使用できるようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/476387/4d86b376-29bc-f52c-4e2d-7ebf5ad361c2.png)

「連絡先情報」ページが表示されるので「パーソナル」を選択し必要事項を入力後、「アカウントを作成して続行」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/476387/afd4fafc-a949-7f13-c6ba-efa92643add6.png)

「支払情報」ページが表示されるので、クレジット情報を入力し、「検証して追加する」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/476387/0451b09d-ef3b-ee70-f095-ee4b426a5c14.png)

「本人確認」ページが表示されるので、内容を入力し「SMSを送信する」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/476387/07a2b6db-701d-c382-1fb4-b83ce167a0b8.png)

入力した電話番号宛に届いた4桁の番号を入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/476387/99fdf354-cb17-8e83-f760-c5d09b083a61.png)

認証が成功すると「サポートプランの選択」画面が表示されます。「無料」ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/476387/1bf45f2f-bc52-0e53-cfd1-a61f7830e611.png)

以下のURLに遷移し、「アマゾンウェブサービスへようこそ」画面が表示されます。

* [アマゾン ウェブ サービスへようこそ](https://aws.amazon.com/jp/registration-confirmation/)

10分間チュートリアルを受けることができるようになるので、順に見ていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/476387/1c22a470-1171-6955-419a-628091c0ac68.png)

チュートリアルの内容は順次別の記事に記載していきます。
ここまでは言われるがままに進めれば到達するので、特に問題点はありませんでした。

## 続き
* [無料で始める初めてのAWS② Linux仮想マシンを起動](https://qiita.com/iwama_takumi/items/6affe67a76635b7750fb)
GASで毎月の決められた日に行うイベントを登録する

曜日や稼働日かどうかに関係なく、毎月決められた日にちに行うイベント作成を簡単に行います。
googleカレンダーにはこのような繰り返しでのイベント登録がないので、また自作しました。
このスクリプトは実行すると、1年単位でイベント登録（最大12イベント）されます。

#ソースコード
```
const CALENDAR_ID = '＊＊＊＊＊＊＊＊＊＊＊＊'; //カレンダーID

function createSpecifiedDateEvent() {
  const calendar = CalendarApp.getCalendarById(CALENDAR_ID); // 検索元カレンダー
  
  let dateNum = 31; // 毎月イベントを登録したい日にち（1～31）

  let createEventYear = 2020; // イベント作成する年

  let createEventStartTime = 0; // イベントの開始時刻（24H表記）
  let createEventEndTime = 1; // イベントの終了時刻（24H表記）
  let createEventName = "先月の振り返り"; // イベントの名称
  
  // 12ヶ月分繰り返す
  for(let i = 1; i < 12+1; i++){
    
    // もし登録したい日にちがその月に存在すれば
    // （dateNumで31を指定した場合、2/31や4/31は存在しない、存在しない場合は登録をさせない）
    if(dateNum <= new Date(createEventYear, i, 0).getDate()){
    
      // 毎月の指定日にイベント作成
      calendar.createEvent(createEventName,
                           new Date(""+createEventYear+"/"+i+"/"+dateNum+" "+createEventStartTime+":00:00"),
                           new Date(""+createEventYear+"/"+i+"/"+dateNum+" "+createEventEndTime+":00:00"));
    }
    
  }
}
```

#参考にさせて頂いたURL
https://qiita.com/t4y3/items/f66022733e8bd3976e0e
Pandas100本ノックで使ったものまとめ（#1~#32）

## はじめに
大学で**機械学習**を勉強しています。復習もかねて**Pandas100本ノック**に挑戦させていただきました。
使った関数？をまとめていきたいと思います。

## Pandas100本ノック

詳細はこちら
[Python初学者のためのPandas100本ノック](https://qiita.com/kunishou/items/bd5fad9a334f4f5be51c)

## Pandas基礎（1 ~ 13）

### #1 DataFrameの最初の5行を表示

```Python
df.head()
```
####表示させたい行数を指定する場合
例：10行

```Python
df.head(10)
```

### #2 最後の5行を表示
```Python
df.tail()
```

### #5 dfの'fare'を昇順に並べ替えして表示
```Python
df.sort_values('fare')
```

**ascending=False**を指定することで降順で並べ替え

## データ抽出(14 ~ 32)

### #18 locを使ってdf全体を表示
```Python
df.loc[:,:]
```

### #20 locを使ってdfのfare列の10行目まで表示
```Python
df.loc[:10, 'fare']
```

### #25 dfのage列の値が30以上のデータのみ抽出
```Python
df[df['age'] >= 30]
```

### #27 dfのsex列がfemaleでかつageが40以上のデータのみ抽出
```Python
df[(df['sex'] == "female") & (df['age'] >= 40)]
```

### #28 queryを用いてdfのsex列がfemaleでかつageが40以上のデータのみ抽出
```Python
df.query('sex == "female" & age >= 40')
```

### #29 dfのname列に文字列「Mrs」が含まれるデータを表示
```Python
df.query('name.str.contains("Mrs")', engine='Python')
```

### #30 dfの中で文字型の列のみを表示
```Python
df.select_dtypes(include='object')
```

### #31 dfの各列の要素数の確認
```Python
df.nunique()
```

### #32 dfのembarked列の要素と出現回数の確認
```Python
df['embarked'].value_counts()
```

## 途中までやってみた感想
そこそこPandasに慣れてきた感覚はあったけど、やってみてその自信はボキッと折られました...
いい復習になるので慣れている人もぜひやってみてください。
queryめっちゃ便利...
【Java】オブジェクト指向構文 - パッケージ

#パッケージとは
* **クラス/インターフェースなどの所属**のこと
* **完全修飾名**（Fully qualified name）：名前空間まで加味した名前
* **package命令で宣言**
  * ファイルの先頭に**一度のみ**記述
  * 以降のクラス、インターフェースは全部そのパッケージに属する
* パッケージの役割
    * **型を分類し名前を識別する**
    * **機能的な分類**
        * java.textパッケージ：テキスト/日付/数値の加工クラス：
        * java.sqlパッケージ：SQLに関わるクラス
    * **アクセス制御の単位**
        * 適切な単位でパッケージを定義すると外部に対し余計な情報を隠蔽できる


##命名ルール
* **階層構造は`.`で表す**
    * `package com.example.neko.object;`
* **パッケージ名は小文字に設定**
    * 先頭大文字のクラス名が視認しやすい
    * パッケージの各階層要素（.で区切られた部分）とクラス/インターフェースの単純名は**同じ名前空間を共有**
* **ドメイン名を元に命名**
    * パッケージ接頭辞に**インターネットドメインを逆順にしたものを付与**
    * ドメインは一意であるのでパッケージ名も衝突しない
* **パッケージ階層とファイルシステム階層は対応関係**にある

## デフォルトパッケージ
  * **名前なしパッケージ**
  * package宣言を省略した場合、配下クラスはデフォルトパッケージに属する
  * 名前衝突の可能性があるので避けたい

##名前解決
* **import命令**で完全修飾名を単純名で表記可能

```java
import com.example.neko.object.Animal;
Animal animal = new Animal();
```
  * importが取り込むのは**名前解決情報**
  * クラスファイルそのものを取り込むのではないので**クラスファイルが肥大化するわけではない**
  * インポート先のクラスが更新されても**インポート元クラスを再コンパイルする必要はない**

##インポート種類
* **単一型インポート**
    * `import java.util.Map;`
* **オンデマンドインポート**
    * `import java.util.*;`
    * パッケージ配下の全部の型をインポート
    * 注：java.util.regex、java.util.streamなどのパッケージがインポートされるのではなくjava.utilパッケージのみインポートされる
    *  java.util、java.util.regexは互いにフラットな関係

* 単一型インポートのメリット
    * **名前解決の優先順位が異なる**
        * 優先型順序
            * 1.現在ファイルで定義された型
            * 2.単一インポート型
            * 3.同一パッケージ型
            * 4.オンデマンドインポート型
        * **自分で定義するときは標準ライブラリの型名と重複しないように注意しよう**
    * クラスとパッケージの関係を視認しやすい


##staticインポート
* `import static 完全修飾名`
* パッケージのみでなくクラス、構造体、列挙体などの型も略記できるようになる
* 頻繁に使う静的メソッド/定数/staticメンバークラスでシンプルにかける

```java
import static java.lang.Math.abs;
//Mathクラス配下の全静的メソッドがstaticインポートされる
//import static java.lang.Math.*;

public class ImportStatic {

  public static void main(String[] args) {
    System.out.println(abs(-10));
  }
}
```
他人との距離大丈夫？近かったら通知がくるよ！

# まずは動かしてみた
超音波距離センサーから2メートル以内であれば、obniz、LINEともに通知がいくようにしてみました。

## obniz側
![iOS の画像.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/726018/e136f153-d72a-2538-fd5f-45ebfaad8194.jpeg)

## LINE側
![iOS の画像 (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/726018/f2453777-0771-bedb-f7ef-c6ad8391ea52.jpeg)

# 実現方法
### 使用したもの
・obniz Board 1Y
・超音波距離センサー HC-SR04

### 参考にしたサイト
下記のサイトを参考にしました。
https://blog.obniz.com/make/notify-line-mail-arrives/

###ソース
```javascript
const fs = require('fs');
const request = require('request');
const Obniz = require('obniz');
const { createCanvas } = require('canvas');

const LINE_NOTIFY_URL = 'https://notify-api.line.me/api/notify';
const TOKEN = 'LINE NotifyトークンID（自分で取得）';

const POSTED_THOREHOLD = 2.0;
const MESSAGE = 'ソーシャルディスタンスを守りましょう。';

const HEADERS = {
  'Content-Type': 'application/x-www-form-urlencoded',
  'Authorization': 'Bearer ' + TOKEN
};

const OPTIONS = {
  url: LINE_NOTIFY_URL,
  method: 'POST',
  headers: HEADERS,
  json: true,
  form: {
    message: MESSAGE
  }
}

let passCount = 8;
let passFlag = false;
let obniz = new Obniz('obnizのID（自分のもの）');

obniz.onconnect = async function () {
  obniz.display.clear();
  const canvas = createCanvas(128, 64); 
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'white';
  ctx.font = '20px Avenir';
  
  let disSensor = obniz.wired('HC-SR04', { gnd: 0, echo: 1, trigger: 2, vcc: 3 });
  let rawDistance = 0;
    
  obniz.repeat(async () => { 
    rawDistance = await disSensor.measureWait();		
    rawDistance = rawDistance/1000;
    await console.log(rawDistance);
    
    if(passFlag){
      await passCount--;
      if(passCount <= 0){
        passCount = 8;
        passFlag = false;
        obniz.display.clear();
      }
      return;
    }
    
    if(rawDistance > POSTED_THOREHOLD){
      return;
    }
    await request(OPTIONS, async(error, response, body) => {
      console.log(body);
      ctx.fillText('ソーシャルディスタンスを', 0, 26);
      ctx.fillText('守りましょう。',0,56);
      obniz.display.draw(ctx);
      
      passFlag = true;
      if(error){
        console.log(error);
      }
    });
    
  }, 300);
}
```

# 最後に
ハッカソンで作ったものを忘れないようにあげてみました。
1日で作ったものにしてはだいぶいいものできたなと自画自賛。
これで会議室とかで他人との距離が近かったら通知できるようにしたらいいかも。
PowerAppsでSQL Serverに画像ファイルをアップロードする

PowerApps（キャンバスアプリ）のデータソースにAzure SQL Serverを使っている場合、画像ファイルをどのようにアップロード及び表示するのか分からなかったので調べてみました。

### 実現したいこと
 - PowerAppsから画像ファイルをAzure SQL Serverにアップロードする
 - SQL Serverにアップロードされている画像ファイルをPowerAppsからプレビューで表示する  

### 手順
#### 1. PowerAppsからアップロード

まずは保存するためのDBを準備します。今回はAzure SQL Serverを使うので、DBを作成し以下のようなテーブルを作りました。

![Screen Shot 2020-11-02 at 23.23.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241800/4fae4ead-adb5-25c8-4f14-c1934a743645.png)


次にPowerApps側の実装について説明していきます。
今回は`Add picture`というコントロールを使います。文字通り、写真をアップロードするためのものです。

![Screen Shot 2020-11-02 at 23.13.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241800/1a3e2a34-c3f9-96c5-76af-9e393b59239d.png)

もう一つ`Button`コントロールを配置します。ボタンを押したら画像ファイルをSQL Server上に保存するように、OnSelectプロパティに以下のように記述します。

```
//新しいレコードをデータベースに追加
Patch('[dbo].[Attachments]',
    Defaults('[dbo].[Attachments]'),
    {FileName:AddMediaButton1.FileName},
    {FileContent:AddMediaButton1.Media}
);

//コントローラをリセットし、新しい画像ファイルをアップロードできるようにする
Reset(AddMediaButton1);
```

出来上がった画面は以下のようになります。
![Screen Shot 2020-11-02 at 23.31.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241800/97aeaa54-b5f2-af77-c6f7-d4ae0069101c.png)

画像をアップロードする手順は以下の通りです。
・`Tap or click to add a picture`をクリックするとWindowsの場合はエクスプローラ、Macの場合はFinderが開き、画像ファイルを選択することできます。
・画像を選択したら、下にある`Button`コントロールをクリックするとファイルがDBに保存されます。



#### 2. PowerAppsから画像を表示
まずアップロードしたファイル一覧を表示するために`Vertical gallery`を画面に追加します。`Items`プロパティに画像が保存されているテーブル（今回は[dbo].[Attachments]）を設定します。また、今回は`Layout`プロパティは「Title」を指定しています（ここはお好みで）。
![Screen Shot 2020-11-02 at 23.01.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241800/4a5ea7c0-1245-22d2-aaa3-7f7dcb0d03b1.png)


次に`Image`コントロールを画面に追加し、`Image`プロパティを以下のように設定します。

```
Gallery1.Selected.FileContent
```

こうすると最初に作った`Vertical gallery`で選択されている画像を表示することができます。
![Screen Shot 2020-11-02 at 23.07.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241800/265ba778-ccc3-2af2-6587-bac032a100cb.png)

※PDFを表示したい場合、`Image`コントロールでは表示できないため、`PDF viewer`コントロールを使用すると表示することができます。
rails学習　7日目その２

#Railsチュートリアル　第６章

コントローラーには複数形、モデルには単数形を用いる。

##6.1.3　ユーザーオブジェクトを作成する

```
$rails console --sandbox
```
普通のコンソールだとデータベースへの変更は反映されてしまうが、--sandboxをつけるとconsoleが戻った時にrollbackしてくれるのでデータベースへの変更も安心して行える。

・user.createはuser.newとuser.saveをまとめて行うためのもの。

##6.1.5　ユーザーオブジェクトを更新する

```
user.update_attributes(name:〇〇,email:〇〇)
```

元々のname,emailから上書きで変更される。ただしupdate_attributesは変更する値の1つでも保存ができないと全ての変更がキャンセルとなる。
単数形だとupdate_attribute、複数形だとupdate_attributesになる

>user.valid?

user.valid?を使うとuserがvalidatesに引っかかってないかどうか調べる。引っかかっていない場合はtrue引っかかった場合はfalseを出す。またfalseが出た時にどのvalidatesに引っかかったのかわからない場合

```
user.errors.full_message
```
を使うとどこがダメだったのか教えてくれる。

##6.2.4　フォーマットを検証する

アドレスのvalidatesで問題の一つがアドレスの形式で登録しないといけないというvalidatesである。正しい形式以外をはじくvalidateは
>format:{with:正規表現}

という形でvalidatesを書いていく。そして次に正規表現をどうするのかを決めて実装する。
メールフォーマットの正規表現は

```
\/A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i
```
となる
※解説はrailsチュートリアルを参照
これをVALID_EMAIL_REGEXに代入して実装する

```
VALID_EMAIL_REGEX = \/A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i
format:{with:VALID_EMAIL_REGEX}
```
となる

>アドレスの一意性

本来アドレスは大文字と小文字の区別がない。しかしプログラミング上ではもちろん違いがあるので同じアドレスであったとしても大文字の部分と小文字の部分の違いによって違うものと判断され、validatesに引っかかってしまう。なのでそれを解消するためのコードを書く。

```
uniqueness: {case_sensitive: false}
```
上記を記入すると大文字小文字関係なく同じアドレスとして認証されるようになる。

>データベースにインデックスをつける

データベースにインデックスをつけると内容を複製して調べやすい順番で並べ替えてくれる。そのため検索などを使うときにデータベースの上から順番に見るより調べやすいデータベースの順番で検索した方が素早く検索ができる。そのためにつけるのがインデックス(index)というもの。

```
add_index :users, :email, unique:true
```
add_index :調べやすくして欲しいテーブル名, :そのテーブルの基準になるカラム名（emailだとアルファベット順に並ぶなど）, unique:true

##6.3　セキュアなパスワードを追加する
パスワードをそのままテーブルに保存してしまうとセキュリティ面でも誰かに見られたら悪用されてしまう。
このためにパスワードを暗号化して保存できるようにする。

>①Userモデルでhas_secure_passwordを呼ぶ

has_secure_passwordを呼ぶことで
・password_digestを利用できるようになる
・passwordとpassword_comfirmationが使えるようになる
・authenticateメソッドが使えるようになる（ログイン時に暗号化したパスワード同士を照らし合わせてログインさせる機能）

>②password_digestカラムを作る（userテーブルに）

マイグレーションファイルでテーブルにpassword_digestカラムが入るようにする。
(ファイル名の末尾にto_usersとすることでusersテーブルに入るようになる)


>③パスワードを暗号化するためにbcryptをGemfileに追加する

```
gem 'bcrypt',         '3.1.12'
```
bundle installを行いgemを反映させる

>④パスワードのvalidatesを作る

```
validates :password, presence: true, length: { minimum: 6 }
```
パスワードのvalidatesを作る（空文字は入れない、文字は最小で６文字というvalidatesになっている）
Android Studio で実行しようとするとCould not start AVD

Android Studio でプログラムを書いていざ実行、デバッグ実行しようとしたら、次のエラーが出ました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184382/b5b79c39-ad17-2bee-c0f4-fc11b6d77712.png)

AVD Managerを開くと
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184382/9b46a567-c7fa-1f2c-ab0f-270a2e9a58d5.png)

`VT-x is disabled in BIOS.` と表示されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184382/5d223415-f351-6ba5-1d6b-ed6daa4dd2ce.png)

一旦、OSを終了してBIOS起動し、バーチャライゼーションを有効にします。
参考：[BIOS設定からバーチャライゼーションを有効にする方法 – BlueStacks サポート](https://support.bluestacks.com/hc/ja/articles/360043236951-BIOS%E8%A8%AD%E5%AE%9A%E3%81%8B%E3%82%89%E3%83%90%E3%83%BC%E3%83%81%E3%83%A3%E3%83%A9%E3%82%A4%E3%82%BC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E6%9C%89%E5%8A%B9%E3%81%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95#h_140add49-03c2-4522-8597-44e5723acec3)

仮想端末が立ち上がりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184382/07c9db5b-3fd9-cf91-ac58-53d556d2dbe6.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184382/8b26d5b1-2f31-2236-9ff8-95a51b3aad5f.png)
Laravel6でバリデーションエラーを日本語化したかった件

#Laravel６でバリデーションを日本語化する方法
この記事の内容
Laravelで個人アプリを作成する際にデフォルトで設定されている英語でのエラーメッセージを日本語に変える為の方法です。主に備忘録です。

##開発環境
Mac OS
PHP 7.3.11
Laravel 6.20.2
※UI認証はBootstrapを使ってます。

##まず英語になっている現状の確認から

事前にスカフォールドを生成
（といってもこれをダウンロードするだけで勝手にユーザー機能が実装出来るし、バリデーションもかかってるので、楽チンです）
詳しくはこちらから（laravelドキュメント）
https://readouble.com/laravel/6.x/ja/frontend.html

```:ターミナル
php artisan ui bootstrap --auth
```

新規登録画面でバリデーションエラーの確認
![スクリーンショット 2020-11-03 18.29.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629627/29e463fc-1273-90d4-d9aa-480f816f3bf9.png)

laravelではデフォルトで英語のエラーメッセージ用のファイルが準備されてます。

```
app
 |_resources
          |_lang/en
                 |_validation.php
```
ここを見るとズラズラっと英語で何かしらが記述されています。
この中にバリデーションエラメッセージが詰め込まれていると思って下さい。

##日本語化されているファイルを貰っちゃいます

『laravel　バリデーション　日本語』
とかで調べると色々やり方が出てくる思いますが、今回はこちらの方のGitHubにあげておられたファイルを頂戴します。

https://github.com/minoryorg/laravel-resources-lang-ja

![スクリーンショット 2020-11-03 17.57.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629627/c62b5de0-5665-4d4c-a2cc-328687f73370.png)

ここをクリックして

![スクリーンショット 2020-11-03 18.01.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629627/b4943f38-c50f-2d43-1414-a1065fbac89f.png)

今回はZIPファイルをダウンロードしました。

後は、この中にあるjaフォルダをenディレクトリと同じ階層に貼り付けました。
![スクリーンショット 2020-11-03 18.14.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629627/7e41070a-6471-0ad2-bd2a-1ea8db3dc7eb.png)


##あと少しだけ
githubでも説明されていた通り、こちらのjaディレクトリを読み込ませる為の設定変更が要ります。

```
config
     |_app.php
```
この中の設定を変えます

```
'locale' => 'ja',
```

```:resources/lang/ja/validation.php
一番下の方にある
'attributes' => [],

この中に、設定させたいワードを入力させます。

'attributes' => [
        'password'=>'パスワード'
    ],
```
取り敢えずすぐに使いそうなワードだけ設定して

![スクリーンショット 2020-11-03 18.25.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629627/db6b2898-4a12-39ff-7736-f9024c0c5daf.png)

バリデーションエラーメッセージも無事に日本語化されてます。

Laravelは最初からかなり色々便利な機能が盛り込まれている分、自分でちょこちょこ直したくても上手くいかない事が多かったです。自分の場合はドキュメントの解説をしてくれる教材を見聞きしながら、徐々にドキュメントの使い方に慣れていっていると言う感じです。
使い方に慣れてくると、もっと色々な実装も出来てくると思いますので、そこは変化を楽しみながら進めていこうと思います。

あと、今回はlaravel6で行っていますので、最新のバージョンで上手くいくかどうかまでは確認出来ておりません。

宜しくお願いします。
NoSQLについて調べた。

#【NoSQLについて調べた。】

##NoSQL （Not only SQL）

RDBS以外のDBMSを指す。
スケーラブルかつ高速なパフォーマンスを発揮する。

1、KVS（key - value - store）
2、ドキュメントDB
3、グラフDB

##BASE特性

・NoSQLは、BASE特性である。

　BA：Basically Available（基本的に常に利用可能）
　S：Soft-State（柔軟な状態、常に状態の整合性を保ている必要無し） 
　E：Eventually Consistent（結果整合性、一時的に整合性が無くても許容）

→最終的に整合性を取ることが出来ればそれで良しとされる。
（可用性、性能を重視した分散システムの特性）

・RDBMSは、ACID特性である。

　[ACID特性](https://qiita.com/uejima_haruki/items/5b1d9ba0e50895b63e07)については、過去にまとめています。

##AWS　Amazon DynamoDB

NoSQLのサービス。

規模に関係なく、数ミリ秒台のパフォーマンス
key - value ドキュメントのDB
完全マネージド型のマルチリージョン

高可用性であり、フルマネージドであり、メンテナンスが不要。
単純なデータを膨大な量を高速で処理可能。

しかし、SQLサポートがされていない。
テーブル結合が出来ない。
複雑な[CRUD](https://qiita.com/uejima_haruki/items/217badaf2f430708fad2)には対応していない。
UE4 コンテンツブラウザ上でリダイレクタを検索する方法


※本記事は UE4.25.4 で動作確認を行ってます。

公式ドキュメントにある詳細検索シンタックスのリファレンスを見て、コンテンツブラウザでリダイレクタを検索出来るのを最近知ったので備忘録として
https://docs.unrealengine.com/ja/Engine/Content/Browser/AdvancedSearchSyntax/index.html

※リダイレクタについて知りたい方は下記を参照してください。
https://historia.co.jp/archives/1028/
https://docs.unrealengine.com/ja/Engine/Basics/Redirectors/index.html


コンテンツブラウザのFilters > Other Filters > Show Redirectorsにチェックが入っているか確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386876/1c2305b7-a757-98f3-84a2-914e2f31a426.png)


検索欄に下記を入力するとリダイレクタが検索されます。
`(Path:'/Game'...) AND (Class=ObjectRedirector)`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386876/445de3df-e5ff-f411-ff80-e440c1f6a4b6.png)




これをコレクションに登録
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386876/a1d2729a-eec4-a72f-67c4-460570947ddf.png)


これでコレクションをクリックするといつでもリダイレクタが見れるようになります。
![sdafadf.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386876/cf44cd71-5019-5af0-bfe4-f7821a64715f.gif)



補足
このままやると`((Path:'/Game'...) AND (Class=ObjectRedirector)) AND (Path:'/Game'...)`って感じになるので気になる方は上書きしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386876/97a03187-6212-cac2-869b-3d10398c557a.png)


以上です。
PythonでPDFからOCR

#１．はじめに
素晴らしい先人達の真似をしてPythonでPDFからOCRするコードを書いてみた。
とを使います。
やってることは、PDFをpopplerでjpg化してからTesseract OCRでtxtファイルに文字起こし

初心者なので、コードに変なところあればコメに指摘もらえると嬉しいです。
引用していないサイトも、たくさん参考にさせていただきました。ありがとうございます。

#２．概要

こちらのサイトを参考に、フォルダ構成を以下の通りにしました。
[PythonでPDFを画像ファイル（JPEG、PNG）に変換する方法](https://gammasoft.jp/blog/convert-pdf-to-image-by-python/)

|親フォルダ|子フォルダ|
|:---|:---|
|¥カレント|¥image_file|
||¥pdf_file|
||¥poppler|
||¥txt_file|

※まずはフォルダにある古いファイルを削除

```python
import os
import pathlib
from pathlib import Path
from pdf2image import convert_from_path
from PIL import Image
import sys
import pyocr
import pyocr.builders
import pathlib
import glob


def cleanup():
    # 削除対象のimgファイルがあるディレクトリ
    image_dir = pathlib.Path('./image_file')
    # globでディレクトリ内のjpegファイルをリストで取得
    jpg_path = list(image_dir.glob('**/*.jpeg'))

    # 削除対象のtxtファイルがあるディレクトリ
    txt_dir = pathlib.Path('./txt_file')
    # globでディレクトリ内のtxtファイルをリストで取得
    txt_path = list(txt_dir.glob('**/*.txt'))

    if jpg_path == []:  # リストが空ならbreak
        pass
    else:
        for i in jpg_path:
            os.remove(i)

    if txt_path == []:  # リストが空ならbreak
        pass
    else:
        for i in txt_path:
            os.remove(i)
```
※次はpdfをjpgに変換

```python
def pdf_to_image():
    # poppler/binを環境変数Pathに追加する(一時的に)
    # Path("__file__").parent.resolve()で.pyファイルの親フォルダ絶対パスを返す
    poppler_dir = pathlib.Path("__file__").parent.resolve() / "poppler/bin"
    # pathsepは環境変数に追加するときの区切り；
    os.environ["PATH"] += os.pathsep + str(poppler_dir)

    # PDFファイルのパス
    pdf_dir = pathlib.Path('./pdf_file')
    # globでディレクトリ内のpdfファイルをリストで取得
    pdf_path = list(pdf_dir.glob('**/*.pdf'))

    # PDF -> Imageに変換(200dpi)
    pages = convert_from_path(str(pdf_path[0]))

    # 画像ファイルを１ページづつ保存
    image_dir = pathlib.Path("./image_file")
    for i, page in enumerate(pages):  # enumerate関数でpagesのpage数を取得
        # .stemでpathの末尾を表示（pathlib)
        file_name = pdf_path[0].stem + "_{:02d}".format(i + 1) + ".jpeg"
        image_path = image_dir / file_name
        # JPEGで保存
        page.save(str(image_path), "JPEG")
```
※最後にocr

```python
def image_ocr():

    # tesseract-OCRのパスを通す
    tessera_path = "C:\***\Tesseract-OCR"
    # pathsepは環境変数に追加するときの区切り；
    os.environ["PATH"] += os.pathsep + str(tessera_path)

    tools = pyocr.get_available_tools()
    if len(tools) == 0:
        print("No OCR tool found")
        sys.exit(1)  # 引数1は終了ステータスで１を返す

    tool = tools[0]

    # ocr対象のファイルがあるディレクトリ
    image_dir = pathlib.Path('./image_file')
    # globでディレクトリ内のjpegファイルをリストで取得
    jpg_path = list(image_dir.glob('**/*.jpeg'))

    for i in jpg_path:
        # ocrした内容を変数txtにする
        txt = tool.image_to_string(
        Image.open(str(i)),
        lang="jpn",
        builder=pyocr.builders.TextBuilder(tesseract_layout=6)
        )
        # 変数txtをtxt_fileディレクトリにtxtファイルで保存
        with open('./txt_file/' + str(i.stem) + '.txt', mode='wt') as t:
            t.write(txt)
```
モーダルウィンドウ

```css

body {
  font-size: 14px;
}

#open, #close {
  cursor: pointer;
  width: 200px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
  padding: 12px 0;
  margin: 16px auto 0;
}

#mask {
  background: rgba(0, 0, 0, 0.4);
  position: fixed;　絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
}

#modal {
  background: #fff;
  width: 300px;
  padding: 20px;
  border-radius: 4px;
  position: absolute;　絶対位置への配置となります。　今回はウィンドウ全体の左上が基準位置
  top: 40px;
  left: 0;
  right: 0;
  margin: 0 auto;
  transition: transform 0.4s;　transition に対して、 transform が変化するときには 0.4 秒 かけてね　変化に掛かる時間を指定する
  z-index: 2;　重なりの順序を整数で指定します。0を基準として、値が大きいものほど上になります。
}

#modal > p {
  margin: 0 0 20px;
}

#mask.hidden {
  display: none;
}

#modal.hidden {
  transform: translate(0, -500px);　要素の表示位置を移動させる
}
```

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Modal Window</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <section id="modal" class="hidden">
    <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
    <div id="close">
      閉じる
    </div>
  </section>
  
  <div id="open">
    詳細を見る
  </div>

  <div id="mask" class="hidden"></div>


  <script src="js/main.js"></script>
</body>
</html>
```

```javascript

'use strict';

{
  const open = document.getElementById('open');
  const close = document.getElementById('close');
  const modal = document.getElementById('modal');
  const mask = document.getElementById('mask');

  open.addEventListener('click', () => {
    modal.classList.remove('hidden');
    mask.classList.remove('hidden');
  });

  close.addEventListener('click', () => {
    modal.classList.add('hidden');
    mask.classList.add('hidden');
  });

  mask.addEventListener('click', () => {
    close.click(); //closeの'click'イベントを呼んでいる
  });
}
```

デモ
http://samples.dotinstall.com/s/modal_js_v3/54108/MyModalWindow/index.html
Laravel bladeで配列をタイルで表示する

## やりたいこと
Controllerで取得したユーザー投稿などの情報をタイル表示にしたい

配列で渡されたデータをCollectionにしてからchunk()でタイル表示にした時のカラム数を指定してbootstrapのgrid機能で表示する

## blade
今回はchunk(3)なので横に3つ並べて表示される

```php
@foreach(collect($posts)->chunk(3) as $chunk)
    <div class="row">
        @foreach($chunk as $post)
            <div class="col-md-4">
                // ここに$postの内容を表示するコードを書く
            </div>
        @endforeach
    </div>
@endforeach

```

## 注意

bootstrapのgrid機能は12分割までなのでキレイにタイルで表示できるのは12の約数のみだが、offsetを指定すればいろいろできる（適当）。
GASで指定した月にセールの日イベントを登録する

いわゆる、毎月10,20,30日のゼロのつく日のイベント作成を簡単に行います。
googleカレンダーにはこのような繰り返しでのイベント登録がないので、自作しました。

#ソースコード
```
const CALENDAR_ID = '＊＊＊＊＊＊＊＊＊＊＊＊'; //カレンダーID

function createSaleEvent() {
  const calendar = CalendarApp.getCalendarById(CALENDAR_ID); // 検索元カレンダー
  
  let dateNum = 0; // 指定したい下1桁の日にち（例：0であれば、10,20,30の日にイベント作成）

  let createEventYear = 2020; // イベント作成する年
  let createEventMonth = 1; // イベント作成する月
  let createEventDay = new Date(createEventYear, createEventMonth, 0).getDate(); // イベント作成する月の日数
  let createEventStartTime = 12; // イベントの開始時刻（24H表記）
  let createEventEndTime = 13; // イベントの終了時刻（24H表記）
  let createEventName = "セールの日"; // イベントの名称
  
  for(let i = 1; i < createEventDay+1; i++){
  
    // 日にちを10で割った余りが指定した下1桁の日にちとイコールであれば、イベント作成
    if(i%10 == dateNum){
      calendar.createEvent(createEventName,
                           new Date(""+createEventYear+"/"+createEventMonth+"/"+i+" "+createEventStartTime+":00:00"),
                           new Date(""+createEventYear+"/"+createEventMonth+"/"+i+" "+createEventEndTime+":00:00"));
    }
      
    
  }
}
```

#参考にさせて頂いたURL
https://qiita.com/t4y3/items/f66022733e8bd3976e0e
WordPressでナビゲーションに現在地のcurrent classをつける方法 

WordPressのナビゲーションに現在地表示のためのclassを付与したい。
そんな場合の解決方法を2つご紹介します。

## 方法1：カスタムメニューで作成する

かんたんに実装したい場合におすすめの方法です。
WordPressの機能「カスタムメニュー」でナビゲーションを作成すると
class名が自動で付与されます。

```php:function.php
//カスタムメニュー
register_nav_menus( array(
    'l-gnav' => 'グローバルナビ',
));
```
カスタムメニューでfunction.phpにカスタムメニューの指定を追記します。

```php:php
<?php wp_nav_menu(array('theme_location'  => 'l-gnav',)); ?>
```

メニューを表示させたい箇所に上記のコードを追記します。
すると以下のコードが生成されます。
現在ページには自動でclass名 `current-menu-item`とつきます。

```html:生成コード
<ul id="" class="menu">
<li id="menu-item-339" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-339"><a href="">TOP</a></li>
<li id="menu-item-342" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-342"><a href="" aria-current="page">Company</a></li>
<li id="menu-item-343" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-343"><a href="">Service</a></li>
</ul>
```

この方法は、自動付与のclass名が多いところが個人的に難点だと思います。
そんな場合は方法2のカスタマイズをおすすめします。

##方法2：phpで現在地class「_current」を付与

### 元のHTML

```html:HTML
<!-- l-nav START-->
<nav class="l-nav">
<ul class="l-nav__list">
<li class="l-nav__item"><a href="">TOP</a></li>
<li class="l-nav__item _current"><a href="">Company</a></li>
<li class="l-nav__item"><a href="">Service</a></li>
</ul>
</nav>
<!-- l-nav END-->
```

このようなHTMLで現在地のみclass名 `_current` をつけたい場合の
カスタマイズです。

```php:function.php
// ページのルートスラッグ取得
function get_root_slug() {
  global $post;
  if (!is_page()) return false;
  $post_parent = $post->post_parent;
  if ($post_parent === 0) return $post->post_name;
  do {
    $post_data = get_post($post_parent);
    $post_parent = $post_data->post_parent;
  } while ($post_parent !== 0);
  return $post_data->post_name;
}
```
`function.php` に上記の記述を追記します。


```php:php
<!-- 現在ページのslugを判定 -->
<?php
function is_page_current($slug) {
  return is_page($slug) || get_root_slug() === $slug;
}
?>

<!-- l-nav START-->
<nav class="l-nav">
<ul class="l-nav__list">
<li class="l-nav__item <?php echo is_front_page() ? ' _current' : '' ?>"><a href="">TOP</a></li>
<li class="l-nav__item <?php echo is_page_current('company') ? ' _current' : '' ?>"><a href="">Company</a></li>
<li class="l-nav__item <?php echo is_page_current('service') ? ' _current' : '' ?>"><a href="">Service</a></li>
</ul>
</nav>
<!-- l-nav END-->
```
スラッグ名を基準としてclass名を付与するphpコードはこのようになります。
こちらの実装のメリットはオリジナルのclassを指定できることです。

JavaScriptを使う方法などもありますが、
WordPressの基本機能やphpを使用して、メンテナンスのしやすいサイトを制作できると良いですね。
【StereoDepth】PytorchでLR consistency lossを計算してみる

<h1>背景</h1>
stereo cameraの特性を活かしDisparityの推定精度を確かめる方法として広く使われているので、実際に動かしてみようと思った。

<h1>入力</h1>
Disparity推定に使用した左の画像
![img.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/46684ddc-bbec-28fd-3d24-3b14b99de614.png)

左のDisparity
![disp_left.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/a06a0020-5c94-2ba6-df09-c11cc92f35bd.png)

右のDisparity
![disp_right.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/d5f01d92-86af-ac8c-f6b1-b87b437a735c.png)



<h2>結果</h2>
lr_left_loss
![torch.abs(RtoL - disp_left).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/c9ef1b84-b21a-6e00-50d8-1ec43480668c.png)

lr_right_loss
![torch.abs(LtoR - disp_right).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/15d19d4f-f8f0-d457-f969-38808c0c5630.png)

Reconstructionした画像を見てみると、フェンスの所と車の周囲の推定がうまく行っていない所が、Lossとして正確に認識される事がわかる
![estLeft.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/7b7a0368-0f77-c423-21e4-c7cfc3dc6479.png)

<h2>ソースコード</h2>
```
        LtoR = self.bilinear_sampler_1d_h(disp_left, disp_right)
        RtoL = self.bilinear_sampler_1d_h(disp_right, -1 * disp_left)
        lr_left_loss = torch.mean(torch.abs(RtoL - disp_left))
        lr_right_loss = torch.mean(torch.abs(LtoR - disp_right))
        lr_loss = lr_left_loss + lr_right_loss
```

<h1>参考文献</h1>
monodepth
https://github.com/mrharicot/monodepth
昨今のプログラミング学習上、ある意味最も重要かもしれない事柄

#初めに(前書き)

この記事は、(日頃、物思いにふけっている)筆者個人の頭の中を整理することと、
最近になってプログラミングを始めた方にとって、"(今後の)学習の一助になれたらいいな"、という思いで書きました。

#本題(本文)
(筆者が思うに、)現在のプログラミングを実現(あるいは構成)するための技術的要素としては、

１. 代表的なIDEであるVSCodeやXcodeなどが’ツール’として挙げられます。(※各プログラミング言語は、これに付随するものとします)。(※言語パッケージとして導入・利用されるものがそうです)。
２. デスクトップ開発であれば、NET.Frameworkの本体やReactNative。Web開発であれば、NET.Core、React、Angular、Vue.js、Next.js、Nuxt.js、Electronなどが’フレームワーク’として挙げられます。(※これに近いものとしては、エンジンの存在があります)。
３. デスクトップ開発であれば、NET.Frameworkに付随するクラスライブラリ。Web開発であれば、JQueryやBootstrapなどが’ライブラリ’として挙げられます。

ここで、フレームワークとは、(なんらかの)プログラムの雛型、つまりは、多くのアプリケーションにとって共通にして基本的な構造となります。これはエンジンの上に乗っかっているイメージです。(※Node.js上のReactやExpressがそうです)。

ここで、エンジンについてですが、ゲーム開発(＝広義でデスクトップ開発)であれば、UnityやUnrealEngineなどが’エンジン’として挙げられます。エンジンとしては、他には、(筆者が考えるに、)Node.jsもエンジンでしょう。(※内部にChromeのV8を持つので、”エンジンを内包するエンジン”ということになるでしょう)。さらに、エンジンとは、これは"実行エンジン"とも呼ばれるように、(なんらかの)プログラムを実行するために必要な基盤ないし基幹部分であり、(これは多くの場合、)"スクリプトエンジン"のことです。(※したがって、その内部には、ある種の言語処理系を持ちます。あるいは、"言語処理系そのものがエンジン"、となります)。

ここで、ライブラリとは、(ある特定の)ハード環境に用意されているAPI群(＝各種ハードの機能にアクセスするための機能の初期セット)を効率よく使用することを可能としたものです。(※WindowsAPIであれば、関数ライブラリとして実装されています)。(※JavaAPIであれば、クラスライブラリとして実装されています)。ちなみに、ランタイムとライブラリは、(なんらかの)プログラムの実行に必要とされている諸機能を、プログラム本体とは切り離し、外部化してまとめたものなので、両者はほとんど同じものだと考えていいと思います。(※VB6が隆盛していた時代には、ランタイムと呼ばれるものはDLL形式で配布されていた・・・)。(※乱暴ですが・・・)。(※ただし、Javaのランタイムは別。Oracleのいうランタイムとは表現の幅が広く、意味するところが掴みにくいです・・・)。

ここでまとめると、「ツール(≒ツール本体＋言語パッケージ)｜エンジン｜フレームワーク｜ライブラリ(≒ランタイム)」となります。(※かなり大雑把にいって、これらすべてが'ミドルウェア'になるかと思います・・・)。

ここで興味深いかつ重要なことは、プログラム(＝アプリケーション)を実行するのに必要な’骨組み’を提供してくれるのがフレームワークであり、それに’肉付け’を提供してくれるのがライブラリだということです。つまりは、(フレームワークの内部に)ライブラリを読み込む(＝ロードないしインポート)し、目的とする(＝エンドユーザーから発せられる要求ないし要件に適合した)プログラムに必要な下地を作り、最後に、(そのプログラムに)(固有かつ)独自の実装を加える(＝フレームワーク固有のルールやスタイルに基づいて、ライブラリを利用するためのコードを書く)というのが、現在のプログラム開発の在り方なのではないでしょうか・・・。


#終わりに(後書き)
いかがだったでしょうか？。読者様の中には異議・異存がある方もおられると思いますが、
自分の弱い理解力と、拙い文章力でなんとか自分の考えを記事としてまとめて表現してみた次第です。
またまた、懲りずに記事を書いていきたいと思います。
次回からもよろしくお願いいたします。それではまた～。