OmniAICreator/Qiita-1.07M huggingface dataset:
Could not find node.js. This will result in editors missing key features.となった時の対応方法

# 事象1 : Eclipseを使っていたらMissing node.jsってダイアログが出た
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/834ceb23-bae4-3602-9c97-657755775fd1.png)

## 原因 : Node.jsがインストールするされていないから
最近はEclipse使うのにNode.jsが必要なのか・・・

```text:エラーメッセージ
Could not find node.js. This will result in editors missing key features. Please make sure node.js is installed and that your PATH environment variable contains the location to the 'node' executable.
(ざっくり訳)
Node.jsが見つかりませんでした。これにより、エディタに主要な機能がなくなります。Node.jsがインストールされPATHにが通っていることを確認してください。
```

### 対応1 : 見なかったことにする
- 環境
    - Windows10 64bit バージョン1909
    - Eclipse IDE for Enterprise Java Developers Version: 2020-03 (4.15.0)

エディタの何かが使えなくなったらしいが、特に困ってないしNode.jsを使う開発でないし面倒くさいし・・・困ったときにインストールする

### 対応2 : Node.jsをインストールする
- 環境
    - CentOS Linux release 7.8.2003 (Core)
    - Eclipse IDE for Enterprise Java Developers. Version: 2020-03 (4.15.0)

[NodeSourceのGitHubのReadme](https://github.com/nodesource/distributions/blob/master/README.md#rpminstall)に書いてあるV10~13のいずれかのバージョンをインストールする

```bash
# リポジトリを追加する
$ curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -
...省略...
## Run `sudo yum install -y nodejs` to install Node.js 14.x and npm.
## You may also need development tools to build native addons:
     sudo yum install gcc-c++ make
## To install the Yarn package manager, run:
     curl -sL https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
     sudo yum install yarn

# コマンドの指示に従ってyumでインストールする
$ sudo yum install -y nodejs
...省略...
Installed:
  nodejs.x86_64 2:14.7.0-1nodesource                                                                                                                                                                               

Complete!

# ちゃんとPATHも通ってめでたしめでたし
$ node -v
v14.7.0
```

# 事象2 : Node.js v14.7.0 is not supported.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/6bb24c3f-c61d-42cf-41e4-7bbd71fb5e2f.png)

## 原因 : インストールしたNode.jsのバージョンがサポート対象じゃないから

### 対応 : 見なかったことにする
面倒くさいからそのうち対応するけど今は見なかったことにする
AzureエンジニアがAWSを学ぶ【認証編】

こちらのAWS Summit 講演内容をメモにまとめました。
AWSを活用したユーザー認証実装パターン解説 | AWS Summit Tokyo 2019
資料　https://pages.awscloud.com/rs/112-TZM-766/images/B2-06.pdf
動画　https://www.youtube.com/watch?v=wnB6Fq7-tHs

#Amazon Cognito
- ユーザープール
    - ユーザー認証する機能
- IDプール
    - AWS Credentials（AWSサービスへアクセスするためのもの）を発行する

#AWSを活用したユーザー認証活用パターン
##従来型のWebアプリ
###A-1認証サービスの活用
　　Application Load BalancerはCognitoとOIDCIDプロバイダの活用が可能
　　https://dev.classmethod.jp/articles/http-headers-added-by-alb-and-cognito-are-explained/

   Amazon Cognitoの活用
　　　ALBにアクセスするとCognitoにリダイレクトされる。
　　　ID、パスワード認証がかかって、リダイレクト。

　フロー
1. ユーザーからALBにアクセス
2. Cognito（ユーザープール）にリダイレクト　ソーシャルやSAML2.0対応IDP連携可能
3. 認証画面が表示される
4. ユーザーはID/Passwordを連携
5. Cognito Token+ ALBにリダイレクト
6. ユーザー→ALB
7. ALB→バックエンドのサービスに連携

##A-2
ALBを使っていない。Coginitoが要件に合わない。
Open ID connectを使っていない。→自分で認証構築する。

##モダンなAPIベースのWebアプリ
###B-1　APIをAmazon API Gatewayで提供している場合
- ユーザープール
  - ユーザー認証する機能
  ユーザー→S3→ユーザー認証画面→ユーザープールが認証を実施してTokenを渡す→Amazon API GWがTokenを検証。
- AWS IAM
- AWS Lambda
  - 独自ロジックで認証する場合

###B-2　APIを独自実装で提供している場合
　アプリケーションロジック内でのカスタム認証を実施

###B-3　Amazon CognitoのIDプールを利用
ユーザー→S3→ユーザー認証画面→ユーザープールが認証を実施してTokenをIDプールに渡す→IDプールがユーザーにAWS Credentialsを渡す。

IDプールによるAWS Credentials発行
　事前にIAMロールの割当ルールを設定
　
　割り当てられたIAMロールを利用してAWS Credentialsを生成
　　AWS Security Token

##クラウドベンダーが提供するアプリ
　Azure AD相当の機能ですね。

　100種類以上のアプリやSAML2.0対応のアプリを統合可能

　引用「AWS SSO は追加料金なしで利用できます。」
　https://aws.amazon.com/jp/single-sign-on/faqs/

###C-1 シングルサインオンを提供したい場合
AWS SSO利用時のフロー
1. ユーザーがAWS SSOにアクセス
2. AWS SSOが認証画面を応答
3. ユーザーがID/Passwordを入力
4. AWS SSOがポータル画面を応答(ポータル画面はAzure ADのアクセスパネル相当ですね。)
5. ユーザーがポータルでアプリを選択して利用

###C-2　Active Directoryを活用したい場合
- AWS SSOでADFSを利用することなくSAML2.0対応アプリへ認証可能
- オンプレミスのADやAWS Microsoft ADとの連携も可能
- AWS SSOは2020年8/1時点では東京リージョン未対応
https://aws.amazon.com/jp/about-aws/global-infrastructure/regional-product-services/
　（東京リージョンないなら使えないな・・・）
Rustにおける連想配列リテラル・ハッシュリテラル相当

[いろいろな言語の連想配列系リテラル記法を比較してみた | TechRacho](https://techracho.bpsinc.jp/hachi8833/2020_07_31/95098) という記事でRustにも言及されていますが、そこでは以下のような手続き的な構成が紹介されています。

```rust
use std::collections::HashMap;

let mut hash = HashMap::new();
hash.insert("apple".to_owned(), 1);
hash.insert("orange".to_owned(), 2);
hash.insert("coffee".to_owned(), 42);
```

Rustでこのように指定した値の入ったハッシュを作る場合、以下のように書くほうが好まれるかと思います。

```rust
use std::collections::HashMap;

let hash = vec![
    ("apple".to_owned(), 1),
    ("orange".to_owned(), 2),
    ("coffee".to_owned(), 42),
]
.into_iter()
.collect::<HashMap<_, _>>();
```

([Add `IntoIterator` impl for arrays by value](https://github.com/rust-lang/rust/pull/65819)がマージされれば上記の `vec![]` は `[]` とすることができます)

また [`maplit` クレート](https://crates.io/crates/maplit) が以下のようなマクロを提供しています。

```rust
use maplit::hashmap;

let hash = hashmap!{
    "apple".to_owned() => 1,
    "orange".to_owned() => 2,
    "coffee".to_owned() => 42,
};
```

Rustのマクロは `()` `[]` `{}` のいずれでも呼び出せるので、 `hashmap!()` や `hashmap![]` のように書いてもかまいません。 (`{}` だけ構文上の扱いが少しだけ異なりますが、このユースケースではほとんど問題にならないと思われます)

また本題とは逸れますが、上記のように `String` 型のリテラルが必要な場合は [`big_s` クレート](https://crates.io/crates/big_s) も便利です。

```rust
use big_s::S;
use maplit::hashmap;

let hash = hashmap![
    S("apple") => 1,
    S("orange") => 2,
    S("coffee") => 42,
];
```
Ruby 例外処理

## 背景  
Rubyの例外処理を描いたときに状況に応じた使い分けが必要だったので、備忘録としてまとめました。  
 
## begin rescue  
* エラーが発生しそうな処理に対して書く  
* エラーが発生したときにエラーログなどを書ける  

```  
begin
  1 / 0 // 例外を発生させる
rescue
  puts "エラーが発生しました"  
end  
```  

## raise  
* エラーを意図的に発生させる  
* 1 / 0をraiseに置き換えても成立する  

```   
begin
  raise
rescue
  puts "エラーが発生しました"  
end 
```  
  
## retry
* エラーが発生しても再度beginの処理に戻る  
* 例の場合は無限ループしてしまうので、何度か実行してエラーであれば処理を抜けるような処理を書く  

```  
begin
  raise
rescue 
  retry // beginの処理を再度実行
end  
```

## ensure  
* 正常に処理が終わってもエラーでも必ず実行される処理  

```
begin
  // 正常処理
rescue => e
  // 例外処理
ensure
  // とりあえず実行される
end
```
npx webpack が失敗するので swap追加

個人利用で借りているvpsサーバーで webpack のbuildを走らせると強制終了する

```
$ npx webpack --mode=production
[Function: VuetifyLoaderPlugin]
Browserslist: caniuse-lite is outdated. Please run next command `npm update`
[BABEL] Note: The code generator has deoptimised the styling of /***/tech/node_modules/jquery-ui-bundle/jquery-ui.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of /***/tech/node_modules/lodash/lodash.js as it exceeds the max of 500KB.
Killed
```

swapの状況を見ると、目一杯使われている状況

```
$ watch -n 2 cat /proc/swaps

Every 2.0s: cat /proc/swaps                                                                                                                                                                                                       Sat Aug  1 12:32:30 2020

Filename                                Type            Size    Used    Priority
/var/spool/swap/swapfile                file            2097148 1898968 -1

Every 2.0s: cat /proc/swaps                                                                                                                                                                                                       Sat Aug  1 12:37:14 2020

Filename                                Type            Size    Used    Priority
/var/spool/swap/swapfile                file            2097148 2097148 -1
```

#### スワップ(swap)ファイルの作成
```bash
$ sudo dd if=/dev/zero of=/var/spool/swap/swapfile20200801 bs=1M count=2048
2048+0 レコード入力
2048+0 レコード出力
2147483648 バイト (2.1 GB) コピーされました、 3.29138 秒、 652 MB/秒
```

#### ファイル属性の変更
```bash
$ sudo mkswap /var/spool/swap/swapfile20200801
スワップ空間バージョン1を設定します、サイズ = 2097148 KiB
ラベルはありません, UUID=e8d546cc-31ed-4ad3-95a2-8aa45b034c6b
```
#### swapの設定
```bash
$ sudo swapon /var/spool/swap/swapfile20200801
swapon: /var/spool/swap/swapfile20200801: 安全でない権限 0644 を持ちます。 0600 がお勧めです。
$ sudo chmod 600 /var/spool/swap/swapfile20200801
```

これで webpackのビルドが安定するようになった

```
Every 2.0s: cat /proc/swaps                                                                                                                                                                                                       Sat Aug  1 13:20:00 2020

Filename                                Type            Size    Used    Priority
/var/spool/swap/swapfile                file            2097148 2096920 -1
/var/spool/swap/swapfile20200801        file            2097148 418392  -2
```
#### 削除
```bash
$ sudo swapoff /var/spool/swap/swapfile20200801
```
```bash
$ sudo rm /var/spool/swap/swapfile20200801
```
【初学者向け】AWSでSSL化する方法

# はじめに
ポートフォリオをAWSを使いSSL化を目的にやっています。既にEC2を用いてデプロイが済んでいてRoute53でドメインを取得している前提で勧めさせていただきますのでご了承下さい。

まだAWSを用いてデプロイをされていない方は[世界一丁寧なAWS解説。](https://qiita.com/naoki_mochizuki/items/f795fe3e661a3349a7ce)の下準備からデプロイ2までを済ませて下さい。
ドメインの取得が済んでいない方は[こちら](https://qiita.com/monsieur39/items/d2eaedfe217420435a4f)の記事を参照下さい。私が書いたものですが、結構手抜きで申し訳ございません、、、

# SSLサーバー証明書とは
この辺は知らなくても真似して行けば問題なく出来ますが、知らずにやるのと知った上でやるのでは違うと思うので書いておきます。

SSLとは、簡単に言うとWebサイトとそのサイトを閲覧しているユーザとのやり取り（通信）を暗号化するための仕組みです。
<img width="88" alt="スクリーンショット 2020-08-01 16.39.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431966/2260a47b-76da-7abd-8377-0e0160162f8e.png">
この鍵マークがついているのはSSL化されている証拠になります。
もしSSL化されていない場合ですと悪意のあるユーザーによって閲覧しているホームページのアドレスや、掲示板に書き込んだ内容、ショッピングサイトで入力したクレジットカード番号やパスワードなども盗み見ることが出来てしまいます。

# 手順
私の雑な説明より他の方が書いた記事の方が参考になるので[この記事](https://qiita.com/nakanishi03/items/3a514026acc7abe25977)のRoute53の項目まで進めてください。

ただしCertificate Managerの途中で**タグを追加**という項目が増えていますが、中身は空でも問題ありません！

ロードバランサーについてはまだ、サブネットが一つしかありませんので先に新たなサブネットを作る必要があります。
[世界一丁寧なAWS解説。下準備編](https://qiita.com/naoki_mochizuki/items/f795fe3e661a3349a7ce)でやったサブネット作成と同じ手順で新たなサブネットを作成していきます。
ここで**注意**して欲しい事を三つ紹介します。
1 新たに作るサブネットのアベイラビリティゾーンは最初のサブネットとは違うものにしましょう。
2 IPv4 CIDR ブロックの値は10.0.1.0/24にしましょう。
3 作ったサブネットのルートテーブルの設定をお忘れなく！
以上の3点が守られていればまた[先ほどの記事](https://qiita.com/nakanishi03/items/3a514026acc7abe25977)のロードバランサーのところから進めてもらって大丈夫です！

きっとこれで上手く行くはずです！

拙い文でしたが最後まで読んでいただきありがとうございます！
ローカルで開発中のnuxtプロジェクトをdockerコンテナ（別フォルダ）でnuxt startで公開する方法

## ローカルのnuxt開発環境をサクッとdockerで公開したい

全然サクッと公開できなかった・・・

開発環境で色々作っているnuxtのプロジェクト、普段はyarn devやnpm run devで開発・確認をしていますが、お客サンからの一言「どっかサーバーに上げて見れるようにしてくれない？」と。

ここで考えられる対応方法はいくつかあります。

・ビルドしてdist/ フォルダをS3やgithub経由でnetlifyとかにアップする。
　簡単。S3やgithub,netlifyの設定が必要。
　変更のたびにビルド→再アップが必要。

・開発サーバーを放置していいなら、直接 yarn serve(nuxt start)する
　一番簡単、ただしnuxt startをデーモンとして動かないので、サービス化するのに一手間必要。

・dockerコンテナをawsのec2上などに展開する。
　サービス化できるので放置できる。gitと連携しておけば、ファイル更新があってもpullしてコンテナ内で再ビルドできる。

楽なのは、ビルド済みのファイルをS3やnetlifyなどの静的ファイル公開サービスへデプロイする方法です。
ただ、今回セキュリティの事情で、ec2上に乗せる必要がありました。

## dockerでnuxtプロジェクトを公開する方法は主に2つありまして

・nginxコンテナでdistフォルダを公開する（一般的）
　本番系に近い方法、SPAの設定が必要。
　https://ja.nuxtjs.org/faq/nginx-proxy/

　こちらも、ソース変更のたびに再ビルドが必要です。

・nodeコンテナで直接 yarn serve（旧 yarn start）する。
　↑今回やる方法

今回、nodeコンテナで公開する方法を使ってみました。
dockerを配置するフォルダと、nuxtのフォルダが別の場所にある場合はひと工夫必要でした。

### docker-compose

```docker-compose.yml
services:
  node:
    tty: true
    build: ./dockerFileのあるディレクトリ
    volumes:
      - ../../nuxtプロジェクトのフォルダ:/app:delegated
    ports:
      - "80:3000"
    command: ash -c "yarn && yarn build&& yarn export && yarn serve"
```

### Docker-file

```Dockerfile
FROM node:current as node

WORKDIR /app

ENV NUXT_TELEMETRY_DISABLED 1
ENV HOST 0.0.0.0
ENV PORT 3000
```

ENV NUXT_TELEMETRY_DISABLED 1が無いと、build時に止まってしまう

https://stackoverflow.com/questions/63096652/how-to-ignore-the-nuxt-js-starting-question

##ハマったポイント

docker-composeのvolumesフォルダは、ビルド中には見ることができない。。。
COPYコマンドで親ファイルからソースを持ってくることができない・・・
なので、コンテナを起動してからyarn install,build系のコマンドを叩くようにする必要がありました。

https://crieit.net/posts/docker-build-volume
https://qiita.com/mk-tool/items/1c7e4929055bb3b7aeda
https://qiita.com/katoosky/items/bd24905bca20afdfe745

##参考資料

https://jp.vuejs.org/v2/cookbook/dockerize-vuejs-app.html
https://qiita.com/art_porokyu/items/8363334c358c67adb61a
https://qiita.com/tmiyajima/items/b099fb707bfde9337a70
[Rails]seedファイルへの記載方法色々


※自分への備忘として残しておくものです。
基本フォームでのデータ作成を理解してればなんとなくイメージつくものが多いと思います。

# 環境
Ruby 2.6.5
Rails 6.0.3


# 書き方あれこれ

### ①一個だけ作成（基本）

```ruby:seed.rb
User.create!(
   email: "user@user.com",
   name: "user1",
   passowrd: "password"
)
```

レコードを作りたいモデルにcreate!アクション。
各カラムの値を与えてあげる。

### ②複数個デモデータを作成

```ruby:seed.rb
 users = User.create!([
  {nickname: "guest", email: "guest@guest.com", password: "guest1234"},
  {nickname: "guest2", email: "guest2@guest.com", password: "guest5678"}, 
])
```
配列を用意。配列の各要素にハッシュの形でレコードデータを渡してあげることで作成が可能。


### ③複数個デモデータを作成(繰り返し処理)

```ruby:seed.rb
20.times do |n|
  User.create!(
  name: "guest#{n+1}",
  email: "guest#{n+1}@guest.com",
  password: "guest#{n+1}0000",
 )
end
```

timesメソッドを使用してcreate!アクションを複数回実行。
uniquenessがあるカラムが重複しない様に値にnを含むことで各レコードに違う値を実装。

### ④配列を組み合わせる

```ruby:seed.rb
stations = ["東京",
  "有楽町",
  "新橋",
  "浜松町",
  "田町",
  "高輪ゲートウェイ",
  "品川",
  "大崎" ,
  "五反田",
  "目黒",
  "恵比寿",
  "渋谷",
  "原宿",
  "代々木",
  "新宿",
  "新大久保",
  "高田馬場",
  "目白",
  "池袋",
  "大塚",
  "巣鴨",
  "駒込",
  "田端",
  "西日暮里",
  "日暮里",
  "鶯谷" ,
  "上野",
  "御徒町",
  "秋葉原",
  "神田"]

stations.length.times do |i|
  Station.create!(
    name: stations[i]
  )
end
```

配列を用意した後、その数だけ繰り返し処理を実行し、カラムには配列の値を与える。
（eachでも行けるはずだと思うんですがなぜかうまく行かずtimesで処理した）
配列を使用したのは別のカラムにもこの値を使い回したかったから。
（具体的に言うとこの後飲食店のデモデータを作る際に、店名に駅名を含めたかったのでこのやり方にした)


### ⑤attributes nestを含むレコードの作成


```ruby:seed.rb
Item.create!(
  name: "ソファ",
  produce: "新品",
  price: 8000,
  images_attributes: [{image: File.open('./app/assets/images/index_item01.png',)}]
  )
```

ItemテーブルがImageテーブルをネストしていて、has_manyな関係の場合。
images_attributesは複数のレコードデータを持つので、配列を作ってその中にハッシュでImageテーブルのレコードデータを与えてあげる。



### ⑥今までの色々組み合わせ

```ruby:seed.rb
10.times do |i|
  Shop.create!(
    name: "鮮魚商店 #{stations[i]}店",
    address: addresses[i],
    capacity: 40,
    mainimage: File.open('./app/assets/images/shops/shop1_1.jpg'),
    maincontent: "産地直送の海の幸を用意してお待ちしています！",
    likepoints: 0,
    station_ids: [i+1,i+2],
    introduces_attributes: [
      {subcontent: "落ち着いた店内で食事が楽しめます。",
        number: 1,
        subimage: File.open('./app/assets/images/shops/shop1_2.jpg')},
      {subcontent:"おすすめは海鮮盛り合わせです！",
        number: 2,
        subimage: File.open('./app/assets/images/shops/shop1_3.jpg')},
      {subcontent: "話し好きの店員があなたをお待ちしています！",
        number: 3,
        subimage: File.open('./app/assets/images/shops/shop1_4.jpg')}
    ]
  )
end
```

先ほどのstationsと言う配列を利用して、shopデータを複数作成している。
shopテーブルはintroducesテーブルをネストしていて、introducesテーブルに複数のレコードを渡したいのでハッシュの形で配列を渡している。
意外とそんなに複雑ではない。
（原因不明ですが最初これでうまく行かず、インデント整えたりしてたらなんか通りました。何だったんだ。。。）


### まとめ

フォームでデータがどう送られているのかを勉強した時にだいぶ理解したのでseedファイルへの記載はそれほど悩みはしませんでしたが。
色々読みあさってる中で公式かなんかの文章で出てきた「配列はハッシュでとりだし、ハッシュは配列で取り出すことでデータを保存する」と言う言葉がすごくわかりやすかったなーと言う印象です（うろ覚え）

備忘として残しておきます。
OOPのたとえ話が奇妙すぎる件

#なんかそれおかしくないか？
個人ブログや初心者向けの書籍等でたまに見かけるのだが、オブジェクト指向プログラミングを実際のプログラミング言語で説明しようとする例として、長いことおかしいと思っていたことを文章にまとめたいと思う。
#うまい例えが見つからないのは確かだが
そもそも説明しようとしている本人が継承やインタフェースについて「なぜそういう実装が必要なのか？」という原点を見失っているように思えてならない。無理やり例を作り出して、その例に沿って継承やインタフェースを実装して「便利だろ？」と自画自賛する例が少なくない。
**だがその例えは日本じゃあ二番目だ。**
#OOPは進化論ではない
よくありがちな大間違い（最近は見かけなくなってきた）

- Monkeyクラスに実装を追加してHumanクラスを作り～
- DogクラスからPoodleクラスとChiwawaクラスを作り～

プログラミングと進化論や生物多様性とは**本質的に何の関連もない**。クラスに実装が追加されたり継承して異なる振る舞いになることを、生物の多様性とか環境適応になぞらえているのだろうが**まったくの誤り**である。
#OOPは差分プログラミングではない
ある人の説明で、共通する処理を親クラスにくくり出し、処理の異なる部分だけをサブクラスで実装すればコード量が少なくて済む、というような内容を見かけたのだが**アホか！差分プログラミングじゃねぇよ**と思わず心の中で叫んでしまった。そんなものはOOPのごく一部のそのまたごく一部の特性をOOPだと勘違いしているに過ぎない。
#設計は具象から、実装は抽象から
飲食店に出向いて食事をして帰るというタスクを考える。
1.店に出向く
2.注文する
3.食べる
4.会計して帰る
これは飲食店がガストでもロイヤルホストでも通用する振る舞いだ。ということは具象オブジェクトであるガストとかロイヤルホストという部分は実は本質ではなくて、具象部分をそぎ落とした**振る舞いのフレームワーク**を抽出することこそが大切なのだ。上記１～４のアクションを行うフレームワークを抽象的にクラス化することで、あとは飲食店がどこであろうが多少のカスタマイズと実装の追加で対応できる。後払い先払いが乱立している牛丼業界なんかは多少の工夫は必要だろうが、大枠は同じだ。
#OOPの利便性はいい例題が少ない
なかなか理解するためのGoodな例題が少ないのがOOPの世界だと思う。
[結城浩さんの本](https://amzn.to/314URfO)はなかなかいい書籍だと思うのだが、GoFのパターンをどう実装するか、という形式なので、現実の課題から具象をそぎ落として抽象フレームワークをいかにして抽出するか、という部分の学習には向かない。残念だ。
PlayFrameworkでBasic認証

メモ記事
https://index.scala-lang.org/hejfelix/play-basic-auth/play-basic-auth/0.1.15?target=_2.12
を使うと超簡単。

なお、0.1.15以降のバージョンではインタフェースなどが変わっているので、上記サンプルをFilterの部分とrouterの部分をコンパイルが通るように編集する必要あり。
新卒プログラマの学習ログ　〜　其の三　〜

#エラー処理(CreateProcessエラー)
このエラーでドツボにハマッたので、ここに書き残しておきます。

###　環境
- Windows 10
- Android Studio 4.0.1

# 概要
Android Gradle Pluginのアップデートか何かをきっかけに、どのプログラムを実行しても下記内容のエラーが表示されるようになりました。
>Android Studioエラー：CreateProcessエラー

私の場合では原因はJDKのクラッシュでした。
JDK Locationで示しているディレクトリ内にjava.exeがなければ、私と同じ原因となっている可能性が高いです。

プロジェクトを開いている状態のAndroid Studio上から、`File` → `Other Settings` → `Default Project Structure...` と開いてパスの先を把握し、PCの実環境で上記の内容を確認してみてください。

# 解決方法
JDKを再インストールすることで解決しました。
Android Studioで現在使用しているものと同じバーションを.zipファイルでダウンロードします。
（https://developer.android.com/studio?hl=ja）
解凍したファイル内のJDKに現在のインストール済みAndroid StudioのJDKのパスを通せば完了です。


#とりあえず。。。
メモ代わりに書いていますが、これから理解が深まれば書き足していきます。
いつか誰かのお役に立てると嬉しいですね。

# 初学者から一人前まで、、、
ここでは一人前のプログラマの定義を
「おおよそ自力で様々なツールを活用しながら、ある程度思い通りの実装ができること」
とします。

また、人生においてプログラミングに向き合う時間として、現時点で2000時間取り組めればある程度の基盤が備わると仮定しています。
（言語やツールに依存しない思考法や情報収集能力）

プログラミングは大学で学んで来ましたが、特に根詰めてやってきていないので、ノーカウントとして取り組みます。

現在までの学習時間
**およそ360時間**
どんどん更新していきます。
【Laravel】Artisanコマンド基礎

# Artisanコマンドとは
- **PHPのフレームワークであるLaravel専用のコマンド**
- **Artisanコマンド使用することでモデルやコントローラを簡単に作成することが出来る**


## アプリケーション作成

```terminal:ターミナル
laravel new アプリケーション名
```

## サーバー立ち上げ

```terminal:ターミナル
php artisan serve
```

## コントローラ作成

```terminal:ターミナル
php artisan make:controller コントローラ名
```

## サービスプロバイダー作成

```terminal:ターミナル
php artisan make:provider サービスプロバイダー名
```

## ミドルアウェア作成

```terminal:ターミナル
php artisan make:middleware ミドルウェア名
```

## フォームリクエスト作成

```terminal:ターミナル
php artisan make:request フォームリクエスト名
```

## モデル作成

```terminal:ターミナル
php artisan make:model モデル名
```

## マイグレーションファイル作成

```terminal:ターミナル
php artisan make:migration create_テーブル名_table
```

## マイグレーションファイルの実行状況確認

```terminal:;ターミナル
php artisan migrate:status
```

## マイグレーションを実行

```terminal:ターミナル
php artisan　migrate
```

## マイグレーションファイルのロールバック

```terminal:ターミナル
php artisan migrate:rollback
```


## シーダーファイルの作成

```terminal:ターミナル
php artisan make:seeder シーダー名
```

## シーダーを実行する

```terminal:ターミナル
php artisan db:seed
```
P5.js 日本語リファレンス(DEGREESなど)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の 関数を説明します。

※このページでは DEGREES、RADIANS、HALF_PI、PI、QUARTER_PI、TAU、TWO_PI の説明を記載しています。


## DEGREES

### 説明文

angleMode() で使用する定数で、DEGREEDS を指定すると角度は 例えば円は０°〜３６０°で扱います。

### 構文

angleMode(DEGREES)


## RADIANS

### 説明文

angleMode() で使用する定数で、RADIANS を指定すると角度は 例えば円は 0.0 〜 2π (6.28318531)で扱います。

### 構文

angleMode(RADIANS)

## HALF_PI

### 説明文

HALF_PIは 1.57079632679489661923の値(πの半分)を持つ数学定数です。これは円の円周と直径の比率の半分です。三角関数sin() およびcos() と組み合わせると便利です。

### 構文

sin(HALF_PI)

cos(HALF_PI)

## PI

### 説明文

PIは 3.14159265358979323846の値(π)を持つ数学定数です。 これは円の円周と直径の比です。 三角関数sin() およびcos() と組み合わせると便利です。

### 構文

sin(PI)

cos(PI)

## QUARTER_PI

### 説明文

QUARTER_PIは 0.7853982の値を持つ数学定数です。これは,円の円周と直径の比率の4分の1です。三角関数sin() およびcos() と組み合わせると便利です。

### 構文

sin(QUARTER_PI)

cos(QUARTER_PI)


## TAU

### 説明文

TAUは 6.28318530717958647693の値(2π)を持つ数学定数TWO_PIのエイリアスです。 これは, 円の円周と直径の比の2倍です。 三角関数sin() およびcos() と組み合わせると便利です。

### 構文

sin(TAU)

cos(TAU)


## TWO_PI

### 説明文

TWO_PIは 6.28318530717958647693の値を持つ数学定数です。 これは,円の円周と直径の比の2倍です。 三角関数sin() およびcos() と組み合わせると便利です。

### 構文

sin(TWO_PI)

cos(TWO_PI)

### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
SplunkでJPCERTログ分析トレーニング（ハンズオン　その６）

https://blogs.jpcert.or.jp/ja/2020/07/log_analysis_training.html
で「インシデント対応ハンズオン」でやってきたデータが公開されたのでSplunkでやってみる。

[その１](https://qiita.com/toshikawa/items/926c63a9f77a0835c94e)
[その２、その３](https://qiita.com/items/764a33b9144bda84a907)
[その４](https://qiita.com/items/d5abe89e01167a31e216)
[その５](https://qiita.com/items/17ad15fe609bd514db5f)の続き
#準備
https://jpcertcc.github.io/log-analysis-training/
から
https://github.com/JPCERTCC/log-analysis-training
に飛んで、
`git clone https://github.com/JPCERTCC/log-analysis-training.git`

レポジトリがダウンロードできる。

#ソースタイプの設定
今回は前回までと違って、きちんとソースタイプを設定してあげないと、ログの改行などおかしくなってしまう。

[the Splunk Add-on for Windows](https://splunkbase.splunk.com/app/742/)をインストールして、基本的な設定をSplunkに準備しておく

xmlファイルをアップロードしたら、

1. `xmlwineventlog`を選択
2. `タイムスタンプ・プリフィックス`に`Time=\"`を設定
3. _詳細_から`SHOULD_LINEMERGE`を`false`
4. `LINE_BREAKER`を`([\r\n]+)\<Event xmlns`
5. _別名で保存_し、次に進む。

これで、データ取り込みはOKとなる。

#検索
今回はLogonTracerの使い方の説明なので、Splunkがどうといった話ではないので、フィールドの抽出だけ

```sql:basic_search.spl
source="Security.xml" 
| spath input=EventData_Xml 
| rename Data{@Name} as Data_name 
| eval xml_data=mvzip(Data_name,Data,"=") 
| rename _raw as raw 
| fields - *Data* System_Props_Xml date_* host punct source sourcetype splunk* 
| rename xml_data as _raw 
| kv 
| fields - xml_data _raw 
| rename raw as _raw
```

これで左側にきちんとフィールド抽出結果がでているので、調査もしやすくなる。

#まとめ
その１の感想で「grepと何が違うの？」というのがありました。

Splunkのいいところって、項目抽出が後でもできるので、全体の頻度とかを確認しながら疑いのあるところや必要なものを検索（`grep`）やら戻ったりして調査できることだと思います。

:sweat:先ほどの取り込みやSPLのように用意されているものが使えなかったりした場合は苦労することになります。

今回は加工されたログなので、いろいろと調整しましたが
https://docs.splunk.com/Documentation/Splunk/latest/Data/MonitorWindowseventlogdata
と基本的には問題は発生しない（はず）です。

とりあえずはこれにておしまい。

質問とかありましたら、よろしくお願いします。
chorome DevToolsのCSS Overview でwebサイトレビュー

##chorome DevToolsとは
chorome上で右クリック押して検証から開けるやつ．
ElementでDOMとかCSSを操作してみたり，consoleでjsの操作をしたりする人が多いのでは．
詳しい説明は[こちら](https://developers.google.com/web/tools/chrome-devtools?hl=ja)．

##CSS Overview
chorome DevToolsに2020/7追加された新機能．
まだテスト段階みたいですが現状でも充分に活用できそうです．
特に，Webサイトの分析やレビューをする初学者の方におすすめです．

##使用方法
DevToolsを開き，
右上の歯車＞Experiments＞CSS Overviewにチェック
DevToolsを一旦閉じて，再度開くとタブに追加されます．

##できること
CSS Overviewで現状できることをQittaのトップページに使用しながら紹介します．

###Overview summery
ページのCSSの概要を確認できます．
要素の数や，外部CSS利用数などの具体的な数値を確認することができます．
<img width="1051" alt="スクリーンショット 2020-08-01 16.52.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482629/cf18ae7f-df16-b1e5-1c8e-4a865ef88adf.png">

###Colors
サイトに使用している色の一覧を確認できます．
背景色や文字色ごとに分けられており，各カラーをクリックすることでどの要素に対して色が付けられているかを確認することができます．
<img width="1052" alt="スクリーンショット 2020-08-01 16.55.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482629/927f8d20-54c5-763c-f009-040aa907c60b.png">

###Font info
サイトで使用されているフォントの種類，サイズ，ウェイトなどを確認できます．
こちらもクリックすることでどの要素に対して適用されているかを見ることができます．
<img width="1055" alt="スクリーンショット 2020-08-01 16.59.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482629/7ecf3674-4e35-b298-0b7e-d1b9cdc1ed2a.png">

###Unued declarations
使用されていない宣言を確認できます．
簡単に言うと，意味のない無駄なCSSが無いかを教えてくれます．
<img width="1063" alt="スクリーンショット 2020-08-01 17.04.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482629/e8094519-c59c-60a4-dc05-f18838eb03de.png">

###Media queries
メディアクエリがどの値で区切られているのかを確認できます．
<img width="790" alt="スクリーンショット 2020-08-01 17.06.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482629/b52d3cb4-4122-c9c8-5a40-b7866750813e.png">

##まとめ
以上がCSS Overviewで現状できることです．
サイトレビューだけでなく自分で制作したサイトの最終確認にも活用ができそうです．
まだ実験的な段階ですので，今後使用方法や機能の追加もあるかもしれません．
個人的には，使用カラーの割合も分かるようになればいいなと思っています．
Sourcetree でダークテーマを使う

# Windows

## やり方

`上部メニュー` > `ツール` > `オプション` > `全般` > `Theme`

で **Light** を **Dark** に変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252342/3fe97f19-946b-c5ef-451e-7fee783b8d5d.png)

## 参考

https://www.366service.com/jp/qa/1fd94b09e17ea5903420a483a803cb41

# Mac

![Screen Shot 2021-01-01 at 6.14.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252342/614d06ad-744c-d1b7-388c-1915a81741c5.png)

## やり方

`上部メニュー` > `Preferences` > `General` > `Appearance`

で `Dark Mode` を選択
Djangoの管理画面が翻訳されないときの対処法

# 現象

2020/08/01現在、adminで生成した管理画面で一部日本語化されない箇所があります。

# 原因

引用符`""`が`“”`に、`'`が`’`に[変更されました](https://github.com/django/django/commit/42b9a23267f14be39b9b00958e18d5746783208e)。
これによって、引用符を使っているメッセージでlocaleファイルの`msgid`の対応が崩れたため、一部の文言が日本語化されません。

# 対策

今すぐ日本語化するためには、[こちらのプルリク](https://github.com/django/django/pull/13245)を参考に`locale\ja\LC_MESSAGES\django.po`の引用符を編集し、
以下の記事を参考にlocaleファイルのコンパイルを行う必要があります。

[[Python] Django ロケールファイルを追加して日本語メッセージを変更する](https://qiita.com/okoppe8/items/e1c8d4b6ba24af788504)

※localeファイルはTransifexで管理されているため、プルリクは却下されているようです。そのうち修正されることでしょう。
P5.js 日本語リファレンス(circle)


このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の circle関数を説明します。

## circle()

### 説明文

画面に円を描きます。円は単純な閉じた形状です。これは, 指定されたポイントつまり中心から指定された距離にある平面内のすべてのポイントのセットです。この関数は ellipse() の特別なケースで楕円の幅と高さが同じです。楕円の高さと幅は円の直径に対応します。デフォルトでは最初の2つのパラメータは円の中心の位置を設定し、3番目のパラメータは円の直径を設定します。

### 構文

circle(x, y, d)

### パラメタ

- x 
Number：円の中心のx座標

- y
Number：円の中心のy座標

- d
Number：円の直径


### 例1

```javascript
function setup() {
  createCanvas(200, 200);

  //中心点(100, 100)に直径150の円を描画します。
  circle(100, 100, 150);
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/375ggSYCx


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
P5.js 日本語リファレンス(ellipse)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の ellipse関数を説明します。

## ellipse()

### 説明文

画面に楕円を描画します。幅と高さが等しい楕円は円です。最初の2つのパラメータは中心点を設定し、3番目と4番目のパラメータは楕円の幅と高さを設定します。高さが指定されていない場合、幅の値は幅と高さの両方に使用されます。負の高さまたは幅が指定されている場合は、絶対値が使用されます。原点は ellipseMode() で変更できます。

### 構文

ellipse(x, y, w, [h​​])

ellipse(x, y, w, h, detail)

### パラメタ

- x
Number：楕円のx座標

- y
Number：楕円のy座標

- w
Number：楕円の幅

- h
Number：楕円の高さ (オプション)

- detail
Number：楕円を描画する頂点数(WebGLモードの場合)



### 例1

```javascript
function setup() {
  createCanvas(200, 200, WEBGL);

  //中心点(0, 0)に幅105、高さ55、頂点数10の円を描画します。
  ellipse(0, 0, 105, 55, 10);
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/n6XO9PXGU


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
P5.js 日本語リファレンス(line)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の line関数を説明します。

## line()

### 説明文

画面に線(2点間の直接パス)を描画します。 4つのパラメータを持つline() は 2D で、6つのパラメータを持つline() は 3D で線を描画します。線に色を付けるには stroke() を使用します。線を塗りつぶすことはできないため fill() は線の色に影響を与えません。 2D の line はデフォルトで1ピクセルの幅で描画されますが、これは strokeWeight() で変更できます。

### 構文

line(x1, y1, x2, y2)

line(x1, y1, z1, x2, y2, z2)

### パラメタ

- x1  
Number：最初の点のx座標

- y1  
Number：最初の点のy座標

- x2  
Number：2番目の点のx座標

- y2  
Number：2番目の点のy座標

- z1  
Number：最初の点のZ座標

- z2  
Number：2番目の点のZ座標



### 例1

```javascript
function setup() {
  createCanvas(400, 400);
  
  // 始点(30, 20) から 終点(85, 75)にラインを描画
  line(30, 20, 85, 75);

  // 色を赤色にする
  stroke("#FF0000");
  // 線幅を3にする
  strokeWeight(3)
  
  line(85, 20, 85, 75);
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/P8Q1Imn_6


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
P5.js 日本語リファレンス(point)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の point関数を説明します。

## point()

### 説明文

点を描画します。最初のパラメータはポイントの水平方向の値、2番目のパラメータはポイントの垂直方向の値です。ポイントの色は stroke() で変更されます。ポイントのサイズは strokeWeight() で変更されます。

### 構文

point(x, y, [z])

point(coordinate_vector)

### パラメタ

- x
Number：X座標

- y
Number：Y座標

- z
Number：z座標(WebGLモードの場合)(オプション)

- coordinate_vector
p5.Vector：座標ベクトル

### 例1

```javascript
function setup() {
  createCanvas(400, 400);
  
  //ポイントのサイズを10ピクセルにします
  strokeWeight(10);

  //色を紫色にします
  stroke('purple');

  point(30, 20);
  point(85, 20);
  point(85, 75);
  point(30, 75);

  //色を青色にします
  stroke('blue');

  // 座標ベクトルを設定して点を描画
  let a = createVector(10, 10);
  point(a);
  
  //色を赤色にします
  stroke('red');

  // 座標ベクトルで点の位置を指定
  point(createVector(20, 20));

}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/MROsg4TBi

### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
P5.js 日本語リファレンス
P5.js 日本語リファレンス(quad)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の quad関数を説明します。

## quad()

### 説明文

四角形を描画します。四角形は四辺形のポリゴンです。長方形に似ていますがエッジ間の角度は90度に制限されていません。最初のパラメータのペア (x​​1,  y1) は最初の頂点を設定し、後続のペアは定義された形状を中心に時計回りまたは反時計回りに進む必要があります。 z引数は、WEBGLモードのみ機能します。
### 構文

quad(x1, y1,  x2, y2,  x3, y3,  x4, y4)

quad(x1, y1, z1,  x2, y2, z2,  x3, y3, z3,  x4, y4, z4)

### パラメタ

- x1
Number：最初の点のx座標

- y1
Number：最初の点のy座標

- x2
Number：2番目の点のx座標

- y2
Number：2番目の点のy座標

- x3
Number：3番目の点のx座標

-  y3
Num ber：3番目の点のy座標

- x4
Number：4番目の点のx座標

- y4
Number：4番目の点のy座標

- z1
Number：最初の点のZ座標

- z2
Number：2番目の点のZ座標

- z3
Number：3番目の点のZ座標

- z4
Number：4番目の点のz座標


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
P5.js 日本語リファレンス(rect)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の rect関数を説明します。

## rect()

### 説明文

画面に長方形を描画します。長方形はすべての角度が90度の4辺の形状です。デフォルトでは最初の2つのパラメータは左上隅の位置を設定し3番目のパラメータは幅を設定し4番目のパラメータは高さを設定します。ただし、これらのパラメータの解釈方法は rectMode()  で変更できます。

5番目、6番目、7番目、8番目のパラメータが指定されている場合、それぞれ左上隅、右上隅、右下隅、左下隅の隅の半径を決定します。半径を省略した場合、以前に指定した半径値の値に設定されます。

### 構文

rect(x, y, w, [h​​], [tl], [tr], [br], [bl])

rect(x, y, w, h, [detailX], [detailY])

### パラメタ

- x
Number：長方形のx座標

- y
Number：長方形のy座標

- w
Number：長方形の幅

- h
Number：長方形の高さ (オプション)

- tl
Number：左上隅のオプションの半径 (オプション)

- tr
Number：右上隅のオプションの半径 (オプション)

- br
Number：右下隅のオプションの半径 (オプション)

- bl
Number：左下隅のオプションの半径 (オプション)

- detailX
Number：x方向のセグメント数(WebGLモードの場合)(オプション)

- detailY
Number：y方向のセグメント数(WebGLモードの場合)(オプション)

### 例1

```javascript
function setup() {
  createCanvas(400, 400);
  
  stroke("red");
  
  //左上点(30, 20)に幅55と高さ80の長方形を描画します。
  rect(30, 20, 55, 80);

  
  stroke("blue");

  //角が丸く, 半径が15の長方形を描画します。
  rect(110, 20, 55, 55, 15);

  stroke("green");

  //以下の半径の角が丸い長方形を描画します：
  //左上= 20, 右上= 15, 右下= 10, 左下= 5。
  rect(190, 20, 55, 55, 20, 15, 10, 5);
  
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/gbKYl62iq

### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
P5.js 日本語リファレンス(square)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の square関数を説明します。

## square()

### 説明文

画面に正方形を描画します。正方形はすべての角度が90度の4辺の形状で,辺の長さは同じです。この関数は幅と高さが同じである rect() の特殊なケースであり、パラメータはサイドサイズの "s" と呼ばれます。デフォルトでは、最初の2つのパラメータは左上隅の位置を設定し、3番目のパラメータは正方形の辺の長さを設定します。ただし、これらパラメータの解釈方法は rectMode() で変更できます。

4番目、5番目、6番目、7番目のパラメータが指定されている場合は、それぞれ左上隅、右上隅、右下隅、左下隅の半径を設定します。省略したときの半径は以前に指定した半径の値に設定されます。

### 構文

square(x, y, s, [tl], [tr], [br], [bl])

### パラメタ

- x
Number：正方形のx座標

- y
Number：正方形のy座標

- s
Number：正方形の辺のサイズ

- tl
Number：左上隅の半径 (オプション)

- tr
Number：右上隅の半径 (オプション)

- br
Number：右下隅の半径 (オプション)

- bl
Number：左下隅の半径 (オプション)



### 例1

```javascript
function setup() {
  createCanvas(400, 400);
  
  stroke("green");
  
  //場所(30, 20)に, 辺の長さが55の正方形を描画します。
  square(30, 20, 55);
  
  stroke("blue");

  //角が丸く, 半径が20の正方形を描画します。
  square(110, 20, 55, 20);

  stroke("red");

  //角が丸く, 次の半径の正方形を描きます：
  //左上= 20, 右上= 15, 右下= 10, 左下= 5。
  square(190, 20, 55, 20, 15, 10, 5);
  
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/Br0Oyq8JH


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
P5.js 日本語リファレンス(triangle)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の triangle関数を説明します。

## triangle()

### 説明文

三角形は3つの点を結んで作成される平面です。最初の2つの引数は最初の点を設定し、2番目、3番目の引数は2番目の点を設定し, 最後の2つの引数は3番目の点を設定します。

### 構文

triangle(x1, y1,  x2, y2,  x3, y3)

### パラメタ

- x1
Number：最初の点のx座標

- y1
Number：最初の点のy座標

- x2
Number：2番目の点のx座標

- y2
Number：2番目の点のy座標

- x3
Number：3番目の点のx座標

- y3
Number：3番目の点のy座標


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
「Rails db:migrate」ができなくて苦戦した話。

ある時、`rails db:migrate`しようとしたら、
`StandardError: An error has occurred, all later migrations canceled:`
エラーが起こってしまいました。


まず`rake db:reset`してから
もう一度`rails db:migrate`して解決を試みるも、

エラーが発生して`rake db:reset`すらできません。

ここでマイグレーションファイルの記載ミスがないか確認。

しかし、何度確認してもスペルミスはなし。

結構探しました。そしてある時、


**「あ、全角はいってる。」**

はい、解決です。

`rails db:migrate`できないときって、スペルミスとか、全角入ってた
とかいうことが僕は多いです。

単純なことなのですが、今回は原因究明にまあまあ時間かかりました。


僕を含め初心者は特に、マイグレーションファイルに手こずることが多いと思います。
rails始めたての最初のうちは
間違えてマイグレーションファイル消しちゃったり、rollbackしないで修正しちゃったり...
怖いですね。

「マイグレーションファイル取り扱いには気をつけないといけない」
ということを再認識しました。
MySQLのカラム名に "key" は使えない

何度読み返しても正しい文法のSQL文でSyntax Errorが出続けて困ったときは、
どこかに予約語が含まれていないか確認しましょう

[予約語一覧 (ver 5.6)](https://dev.mysql.com/doc/refman/5.6/ja/reserved-words.html)

# 強力な助っ人
私を救ってくれたオンラインの文法チェッカーです
[EverSQL SQL Query Syntax Check & Validator](https://www.eversql.com/sql-syntax-check-validator/)


私を悩ませていたのは

```sql
INSERT INTO table (id, key, name) VALUES (1, 'A', 'abc'), (2, 'B', 'def'), (3, 'C', 'ghi')
```
みたいなSQL文なのですが、ちゃんとprettyした上で `key` をハイライトして教えてくれて本当に有能です
［NoCodeでHP制作］iOSアプリ申請時のプライバシーポリシーを簡単に最速で作成する方法

<h2>最近アプリをリリースしたokaです。</h2>
リリースする際、やっとできたと思ったのに制作以上にリリース作業が大変だった事に驚き、少しでもリリースするハードルを下げれたらと思い考えた結果、2020年の現在では現状最速でハードルが一番低い手法を実装できたのでよければ参考にしてください！

(完成プライバシーポリシー)
<img width="1280" alt="スクリーンショット 2020-08-01 16.17.51.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517666/2dc735cf-b3bf-a9a4-fb54-02d8bf08b1a2.jpeg">


<h2>必要な環境</h2>
・PC
・Googleアカウント


<h2>内容</h2>
今回はGoogleサイトを使用してプライバシーポリシーを書く方法を紹介します。
今回私が作成したアプリはこちら
[TskKru](https://apps.apple.com/jp/app/taskru/id1523777115)
<img width="990" alt="スクリーンショット 2020-08-01 16.28.49.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517666/99c339c8-1149-af49-4a03-eb0951d1b4ee.jpeg">
iOSAppでタスクを管理するものです。
こののアプリは特にデータを取得することやカメラなど使用することもないので簡単な文言ですみました。
(画像参照)

実際の作り方は
・[Googleサイト](https://sites.google.com/new?hl=ja)にログイン
・好きなテンプレを選択
・文字を打つ
以上です！

某メーカーの謳い文句でもある”直感的で使いやすい”とはまさにこの事。

お問い合わせでメールの登録もできますのでアドレスを表示する事なくお問い合わせも作る事が可能です。

実際にAppStore申請時のプライバシーポリシーに登録して申請してみた結果……

見事審査を通過してリリースに成功！

2020年8月現在最速で簡単にプライアシーポリシーが作れる方法ではないでしょうか？

更にAppサポートもGoogleサイトのUrlで登録できるため、Googleサイトでアプリに関する情報も掲載できます！

お手軽にプライバシーポリシーを作る事はもちろん気軽にHPも作れるのでおすすめです！

以上
###［2020年版］最速でプライバシーポリシーを作成し、アップする方法［NoCodeでHP制作］
でした！
firebase firestoreで後からSubCollectionにfieldを追加したくなったときの対処。

firebaseで後からfieldを追加するとき

例) サブコレクションとして保存しているcommentコレクションの全てのドキュメントに
status: 1
を追加したい。

    var commentsSn = await firebase.firestore.collectionGroup("comments").get(); //snapshot取得
    var commentsPath = commentsSn.docs.map(e => e.ref.path) //参照するパスを取得
     commentsPath.forEach(path => { //全てのパスに対して status:1 をセット
      firebase.firestore.doc(path).set({
        status:1
      },{
        merge: true
      })
    })


optionで merge: true を付けておかないと他のフィールドが消えるのでご注意ください。
Jupyter notebookでインテリセンス的な表示をしたいのですが

# きっかけ
GoogleColaboratoryなんかだと、入力候補がずらずら出てきて超便利です。
「いんてりせんす」と言っているのはMSだけなのかなという気もして、一般的になんというかはちょっとわからないけど、言ってみればまあそれです。
でも、手元のJupyter notebookだと出てこないから、いつまでたってもライブラリとかメソッドとか覚えない自分なんか超大変で、まったくもうこうなったらGoogleColaboratoryとかVSCodeとかPyCharmとかに一回打ち込んでからJupyter notebookookにコピペしてやろうかとかしょうもないことを考えていたら、案外簡単に対応策があったのでメモ的に記しておきます、よかったよかった。
# 方法
notebookの最初に以下のコマンドを入力して、実行してください。

```vim
%config IPCompleter.greedy=True
```
#結果
簡単ではあるけど候補が出ます。PyCharmほどの上げ膳据え膳ぶりではないけど、だいぶ作業しやすいです。

一度実行すれば以後は不要なようです。しばらくこれで頑張ってみます。
VBScriptでカタカナの全角・半角変換を行う関数

下記の記事のロジックの応用で、カタカナの全角・半角変換を行う関数も作成しました。
[VBScriptで全角・半角変換を行う関数](https://qiita.com/takahasinaoki/items/4ff08f0b733ddc6c6927)


#ソースコード

```vb
Option Explicit

Const ZENKANA = "、。「」ー・゜゛アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲンァィゥェォャュョッ"
Const HANKANA = "､｡｢｣ｰ･ﾟﾞｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜｦﾝｧｨｩｪｫｬｭｮｯ"
Const ZENKANA2 = "ヴガギグゲゴザジズゼゾダヂヅデドバビブベボパピプペポ"
Const HANKANA2 = "@ｳﾞｶﾞｷﾞｸﾞｹﾞｺﾞｻﾞｼﾞｽﾞｾﾞｿﾞﾀﾞﾁﾞﾂﾞﾃﾞﾄﾞﾊﾞﾋﾞﾌﾞﾍﾞﾎﾞﾊﾟﾋﾟﾌﾟﾍﾟﾎﾟ" '1文字目はダミー

'*****************************************************************************
'[概要] 半角カタカナを全角に変換する
'[引数] 変換対象文字列
'[戻値] 変換後文字列
'*****************************************************************************
Function StrConvWideKana(ByVal strWord)
    Dim i, j, strChar, strChar2
    For i = 1 To Len(strWord)
        strChar = Mid(strWord, i, 1)
        
        strChar2 = Mid(strWord & "@", i, 2) '最終文字の後ろに1文字ダミー文字を追加しておく
        j = InStr(2, HANKANA2, strChar2) '2文字目から検索
        '偶数の時
        If j > 0 And j Mod 2 = 0 Then
            '例:ｶﾞ→ガ
            strChar = Mid(ZENKANA2, j / 2, 1)
            i = i + 1 '濁点分1文字進める
        Else
            j = InStr(1, HANKANA, strChar)
            If j > 0 Then
                strChar = Mid(ZENKANA, j, 1)
            End If
        End If
        StrConvWideKana = StrConvWideKana & strChar
    Next
End Function

'*****************************************************************************
'[概要] 全角カタカナを半角に変換する
'[引数] 変換対象文字列
'[戻値] 変換後文字列
'*****************************************************************************
Function StrConvNarrowKana(ByVal strWord)
    Dim i, j, strChar
    For i = 1 To Len(strWord)
        strChar = Mid(strWord, i, 1)
        j = InStr(1, ZENKANA2, strChar)
        If j > 0 Then
            '例：ガ→ｶﾞ
            strChar = Mid(HANKANA2, j * 2, 2)
        Else
            j = InStr(1, ZENKANA, strChar)
            If j > 0 Then
                strChar = Mid(HANKANA, j, 1)
            End If
        End If
        StrConvNarrowKana = StrConvNarrowKana & strChar
    Next
End Function
```
 
#関連記事
[VBScriptで全角・半角変換を行う関数](https://qiita.com/takahasinaoki/items/4ff08f0b733ddc6c6927)
[VBScriptでカタカナの全角・半角変換を行う関数](https://qiita.com/takahasinaoki/items/8e57b58e634a11c1a080)　※この記事
[VBScriptでひらがな・カタカナ変換を行う関数](https://qiita.com/takahasinaoki/items/51746404092ce741ceda)
cwebpコマンドの-psnrオプションの罠と-qrangeがやってくる！

# cwebpの品質-q ≠ 人間にとっての画質

WebP画像への変換を行う`cwebp`コマンドには、**仕上がり画質の目標値を指定**できる`-psnr`オプションがあります。

いわゆる品質(`-q`パラメーター)はデータ圧縮処理上の品質であって、`-q 75`が人間の知覚にとって75点の品質を意味するとは限りません。むしろ画像の内容によってバラつきが出ます。

その問題を解消する手段として``は**「-psnr いいじゃん！」**と思ったのですが、

[cwebpコマンドには目標PSNRから品質を決めてくれる-psnrオプションがある - Qiita](https://qiita.com/miyanaga/items/f057474248dc843839fa)

結果として`-psnr`オプションは実用できませんでした…

# PSNRの弱点

PSNRはシンプルな計算式ゆえ、結果が直観的ではないことがあります。

[MSE/PSNR vs SSIM の比較画像紹介 - Qiita](https://qiita.com/yoya/items/510043d836c9f2f0fe2f)

弱点が露呈したのは次のように**大部分を背景が占める画像**でした。

![](https://php.simulate.site/webp-params-nav/default/source/goods01.jpg)

例えば風景写真について`-psnr`を35、40、45、50と変化させても違和感はありませんが、

![webp-params-explorer (9).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35178/e2a3629d-af74-2c6f-9c0f-9d177168ac95.png)

https://php.simulate.site/webp-params-nav/default/?source=goods01.jpg&suite=cwebp-standard#case-cwebp_psnr

指輪の物撮り写真を同様に変換するとすごく**「荒い！」**と感じる結果になります。

![webp-params-explorer (10).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35178/cae2af67-fb4e-d451-538c-d84669dd6f3b.png)


https://php.simulate.site/webp-params-nav/default/?source=goods01.jpg&suite=cwebp-standard#case-cwebp_psnr

これは**変化の少ない背景が「差異の少なさを荒稼ぎ」**してしまうため、認知的な特徴である指輪部分にしわ寄せが来て差異を過小評価してしまうからです。

PSNR40と言えばそこそこきれいな画質を期待しますが、品質パラメーター`-q 20`の方がきれいなくらいなので、`-psnr 40`に実際に適用された`-q`パラメーターはかなり低い(10未満？)はずです。

<img width="1312" alt="貼り付けた画像_2020_08_01_16_24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35178/e428151e-8bb8-1ced-e4c2-adbbd989f37c.png">


# 最低品質を指定したい → -qrangeでできるようになりそう

この問題を回避するひとつの方法として、品質`-q`の最低値を指定できるようになればなぁ…と考えていたら、最新のコードで`-qrange`パラメーターが追加されていました！

https://github.com/webmproject/libwebp/blob/cf2f88b38f0131644bb02df6a75ca36a342b4f7d/examples/cwebp.c#L568

```c
  printf("  -qrange <min> <max> .... specifies the permissible quality range\n"
         "                           (default: 0 100)\n");
```

`-psnr`オプションには処理時間が長いという弱点もありますが、`-qrange`パラメーターがリリースされたら

```bash
cwebp -psnr 42 -qrange 40 95 -o output.webp input.jpg
```

みたいな使い方がベストになるかもしれません。楽しみ！
AWS CLIでポリシーのjsonファイルを指定するとMalformedPolicyエラー

常識の範疇かもしれないけど、数時間悩んだ挙句に解決した時には「これ半年ぐらい前にもやった気がする」と思ったので、僕が3回目に悩んだときのためにメモしておく。

# AWS CLIでポリシーのjsonファイルを指定するとMalformedPolicyエラー

AWS CLIでS3バケットにポリシーを設定する `put-bucket-policy` では、ポリシードキュメントをJSONファイルとしてあらかじめ用意しており、 `--policy` オプションで指定する。[公式ドキュメントのExample](https://docs.aws.amazon.com/cli/latest/reference/s3api/put-bucket-policy.html#examples)は以下のようになっている。

```
aws s3api put-bucket-policy --bucket MyBucket --policy file://policy.json
```

きっとフルパスで指定するのが無難だろう、でもWindowsの場合区切り文字やドライブはどう描くのが正解かなと思いながらいくつかやってみると、次のようなエラーになる。

```
A client error (MalformedPolicy) occured: policies must be valid JSON and the first byte must be '{'
```

正しいJSON形式ではないというのだから、[JSONLint](https://jsonlint.com/)でチェックしたり、文字コードや改行コード疑ったりもしたが、解決しない。

# Windowsでは `file://C:\Temp\policy.json` のように指定

答えは[Stackoverflowに書かれてた](https://stackoverflow.com/a/34376927)。問題はJSONファイルの内容ではなくて、ファイルパスの指定方法だった。

> ポリシーファイルパスには `file://` プロトコルをつけることが必要
> <pre>$ aws s3api put-bucket-policy --bucket kryptonite \
   --policy file:///home/superman/aws-example/public-bucket-policy.json</pre>
> もしくは（Windows）
> <pre>$ aws s3api put-bucket-policy --bucket kryptonite \
   --policy file://C:\Temp\public-bucket-policy.json</pre>
> もしくは（相対パス）
> <pre>$ aws s3api put-bucket-policy --bucket kryptonite \
   --policy file://public-bucket-policy.json</pre>

Windowsでは `file://C:\Temp\policy.json` のようにフルパスを指定するらしい。 `file://C:\Temp` ってまさかと思うけど、これでポリシーの設定ができた。まさかと思うけど、これでいいのだ。

# 参考

* [put-bucket-policy — AWS CLI 1.18.110 Command Reference](https://docs.aws.amazon.com/cli/latest/reference/s3api/put-bucket-policy.html)
* [amazon web services - MalformedPolicy error using aws s3api - Stack Overflow](https://stackoverflow.com/questions/19496919/malformedpolicy-error-using-aws-s3api/34376927)
windowsでiverilog その63

#概要　

windowsでiverilogやってみた。
pipelineの考察。

#pipelineの考察。

明確なサンプルが見つからないので、書いてみた。

#順序回路


```
module shiftregister(input clk, input rst, input data, output out);
	reg [3:0] q;
	assign out = q[3];
	always @(posedge clk)
	begin
		q[3] = q[2];
		q[2] = q[1];
		q[1] = q[0];
		q[0] = data;
	end
endmodule

```

#pipeline化


```
module shiftregister(input clk, input rst, input data, output out);
	reg [3:0] q;
	assign out = q[3];
	always @(posedge clk)
	begin
		q[0] <= data;
		q[1] <= q[0];
		q[2] <= q[1];
		q[3] <= q[2];
	end
endmodule

```

以上。
vimのsedで置換前の文字列を用いて置換する

#概要
vim,sedで置換前の文字列を使って置換したいときがあります（要するに追記）
解説しているサイトが見つかりづらかったので、備忘録としてまとめておきます

##※追記08/03
単に置換対象の文字列を利用して置換したい場合は、以下で可能とのこと
`s/old/new&/`
old → newold

##やり方
例えばvimでsedを使って"old"を"new"に置換するときは以下のようにします
(%：ファイル全体が対象，g：該当部分全てが置換対象，C：置換対象に対して逐一確認をする）

`:%s/old/new/gc`
old → new

これを、置換前の文字列"old"を消さずに追記したいときは以下のようにします

`:$s/\(old\)/new\1/gc`
old → newold
\\( \\)で囲まれた文字列は変数として格納され、"\\+数字" で参照できます(\1~\9まである模様)


また、正規表現と組み合わせると

```before.txt
a b c d e f g
```

`:$s/\([a-z]\)/\11/gc`

```after.txt
a1 b1 c1 d1 e1 f1 g1
```
([a-z]：小文字のアルファベット一文字)
上記のように正規表現で検索した文字・文字列を逐次格納できるので使い方の幅が広がります
LINEに自動投稿(GASとSpreadsheetで）

#動機
LINEにのグループチャットに「今日のギリシャ語単語！」を投げてるんですが、自動投稿にしたくなった。

#目標
LINEにgoogle spreadsheetから情報をもらって定期自動投稿する

#方法
基本はこちらを参考にしました。
https://hoshino-wp.com/line-notify-google-apps-script/
大変お世話になりました。ありがとうございます。
(LINE Notifyを目的のグループに招待するの忘れてて一日うまくいかなかった。）

こちらで1日一回apps scriptを走らせる設定にしました。

spreadsheetにはこんな感じの内容があるとしましょう。

|date|content|
|:---|:----|
|2020/08/01|Ἰησοῦς: イエス（固有名詞）|
|2020/08/02|Ἰούδας: ユダ（固有名詞）|



以下、具体的なコードの編集内容です。

```Javascript:今日の新約聖書ギリシャ語単語
const url = "https://docs.google.com/spreadsheets/hogehoge";
const lineToken = 'qawsedrftgyhujiko';
const timeZone = 'Asia/Tokyo';
const timeFormat = 'yyyy/MM/dd';

//送信内容を作って送信
function postContent() {
  var content = createContent();
  sendPostContent(content);
}

//LINE Notifyへpost
function sendPostContent(content) {
  var token = [lineToken];
  var options = {
    "method": "post",
    "payload" : {"message": content },
    "headers": {"Authorization": "Bearer " + token}    
  };
  UrlFetchApp.fetch("https://notify-api.line.me/api/notify", options);
}

//送信内容を作ります
function createContent() {
  const today = getFormattedDate();
  
  const ss = SpreadsheetApp.openByUrl(url);
  const ws = ss.getSheetByName("単語");
  const captionRow = ws.getRange(1, 1, 1, ws.getLastColumn()).getValues();
  //日付の書いてある列番号を取得
  const dateColNum = captionRow[0].indexOf("date");
　//内容のまとめてある列番号を取得
  const contentColNum = captionRow[0].indexOf("content");
  
  //カラム名の下にある全データを取得
  const vocabData = ws.getRange(
     2, 
     1,
     ws.getLastRow(),
     ws.getLastColumn()
  ).getValues();

  const content = "\n\n" + 
    vocabData.filter(function(row){
      //日付が書いてないやつは無視します。
      if (row[dateColNum] == null){return false;};
      const plannedDate = getFormattedDate(row[dateColNum]);
　　　//日付が今日のものだけ選びます。
      return (plannedDate == today);
    }).map(function(row){
      //内容だけ抽出します。
      return row[contentColNum];
    }).reduce(function(previousValue, currentValue){
　　　//改行でつなげます。
      return previousValue + "\n\n" + currentValue;
    });
  
  console.log(content);
  return content;
}

function getFormattedDate(some){
  if (some == null){ 
    return Utilities.formatDate(new Date(), timeZone,timeFormat);
  }
  const target = Utilities.formatDate(new Date(some), timeZone,timeFormat);
  //console.log(target);
  return  target;
}
```
日付の比較だけなかなかスマートにいかないのですが、こちらを参考にさせていただきました。
https://qiita.com/rf_p/items/f423ed2b23b789b2ebe9

#感想
毎日ちょっとずつやるのって難しいので自動化したいですよね。
Twitterのbotとかもみんなこんなん書いてるんですかね。
書いたコードをgoogleにおいておくだけっていうのはすごくいいなと思いました。

---
# #ERROR!が送信された(2020/08/04追記)
LINE Notifyから"#ERROR!"の文字列が送信された。明らかにspreadsheet内のエラーである。
しかし当該のspreadsheetにerrorの文字列はない。
とはいえ心当たりはあって、apps scriptでカスタム関数を書いたせいだと思われる。
どういう処理の順番になってるのかわからないが、カスタム関数のスクリプトが走る前にLINE Notifyのスクリプトが動いたと考えるのが自然だ。

だいいち、spreadsheetって開くたんびにカスタム関数計算し直すから5000行も計算させるんじゃなかった。
というわけで、値を改めて貼り付けて生のデータにしました。

明日はうまく行くよね。
MagicLeapテスト用に作成したアプリのアンインストール方法


TheLabでDeviceBridgeを行いMagicLeapと接続する
Appタグを開くとアプリケーション一覧が確認できるのでその中から目的のアプリを削除する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212999/b8a1ecc4-ef4d-f190-4823-6763b9c0f1c9.png)
IBusで全角半角を切り替えるショートカットを設定する方法

- 環境
    - CentOS Linux release 7.8.2003 (Core)
    - IBus 1.5.17

1. [Preferences]からダイアログを表示する
2. [General]タブ > [Keyboard Shortcuts] > [Next input method:] > [...]ボタンでダイアログを表示する
3. [Key code:]と[Modifiers:]を設定する
4. [Add] > [Apply] > [OK]ボタンでダイアログを閉じる
5. [Close]ボタンでダイアログを閉じる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/1e9deebb-9e56-c10e-0fab-49d2846ca32f.png)