OmniAICreator/Qiita-1.07M huggingface dataset:
【JavaScript】画像投稿時のプレビュー機能

画像複数投稿機能以上に詰まっていたプレビュー機能。
ようやく解決できたので備忘録のために投稿します。
jsの記述のルールや基礎的なところ抑えていかなければと思いました。

下記解決後コード
2,14,15,30行目の記述に変更を加えています。

```js
document.addEventListener('DOMContentLoaded', function() {
  if (document.getElementById('store-image')){
    const ImageList = document.getElementById('image-list')
    
    const createImageHTML = (blob) => {
      const imageElement = document.createElement('div')
      imageElement.setAttribute('class', "image-element")
      let imageElementNum = document.querySelectorAll('.image-element').length
      
      const blobImage = document.createElement('img')
      blobImage.setAttribute('src', blob)

      const inputHTML = document.createElement('input')
      inputHTML.setAttribute('id', `store-image-${imageElementNum}`)
      inputHTML.setAttribute('name', 'store[images][]')
      inputHTML.setAttribute('type', 'file')

      imageElement.appendChild(blobImage)
      imageElement.appendChild(inputHTML)
      ImageList.appendChild(imageElement)

      inputHTML.addEventListener('change', (e) => {
        file = e.target.files[0];
        blob = window.URL.createObjectURL(file);

        createImageHTML(blob)
      })
    }

    document.getElementById('store-image').addEventListener('change', (e) => {
      let file = e.target.files[0];
      let blob = window.URL.createObjectURL(file);

      createImageHTML(blob)
    });
  };
});
```

```rb
  <div class="field" >
    <%= f.label :images, "店舗画像" %><br />
    <%= f.file_field :images, name: 'store[images][]' ,id:"store-image"%>
  </div>
```
　　
以下解決前コード
2,14,15,30行目の記述に誤りがあったようです。（アンダーバーのせいでしょうか）

```js
document.addEventListener('DOMContentLoaded', function() {
  if (document.getElementById('store_image')){
    const ImageList = document.getElementById('image-list')
    
    const createImageHTML = (blob) => {
      const imageElement = document.createElement('div')
      imageElement.setAttribute('class', "image-element")
      let imageElementNum = document.querySelectorAll('.image-element').length
      
      const blobImage = document.createElement('img')
      blobImage.setAttribute('src', blob)

      const inputHTML = document.createElement('input')
      inputHTML.setAttribute('id', `store_image${imageElementNum}`)
      inputHTML.setAttribute('name', 'store[images][]')
      inputHTML.setAttribute('type', 'file')

      imageElement.appendChild(blobImage)
      imageElement.appendChild(inputHTML)
      ImageList.appendChild(imageElement)

      inputHTML.addEventListener('change', (e) => {
        file = e.target.files[0];
        blob = window.URL.createObjectURL(file);

        createImageHTML(blob)
      })
    }

    document.getElementById('store_image').addEventListener('change', (e) => {
      let file = e.target.files[0];
      let blob = window.URL.createObjectURL(file);

      createImageHTML(blob)
    });
  };
});
```
　　
viewの方では無理矢理画像追加のボタンを2つ用意して投稿していました。

```rb
  <div class="field" >
    <%= f.label :images, "店舗画像" %><br />
    <%= f.file_field :images, multiple: true %>
    <%= f.file_field :images, multiple: true %>
  </div>
```
【Swift】Array の contains の挙動の整理


# はじめに

よく Array の contains の挙動について忘れるので、まとめてみました。

## 基本的な挙動

```swift
// （基本形の挙動）クロージャーの返りがひとつでもtrueが含まれればtrueを返却する
print([0,1].contains { _ in true }) // ture
print([2,3].contains { _ in false }) // false

// （備考）空配列の場合はクロージャーを1周も通過しないため必ずfalseを返す（はず）
print([].contains { _ in true }) // false
print([].contains { _ in false }) // false
```

## 以下、 0を含むか？ のいろいろな書き方 （全部同じ意味のはず）

```swift
// (1) 一番長いタイプ
print([0,1].contains(where: { num in num == 0 })) // true
print([2,3].contains(where: { num in num == 0 })) // false

// (2) 引数を省略
print([0,1].contains(where: { $0 == 0 })) // true
print([2,3].contains(where: { $0 == 0 })) // false

// (3) whereを省略
print([0,1].contains { num in num == 0 }) // true
print([2,3].contains { num in num == 0 }) // false

// (4) whereを省略かつ引数を省略 ← 迷ったらこれにしてます
print([0,1].contains { $0 == 0 }) // true
print([2,3].contains { $0 == 0 }) // false

// (5) クロージャーを省略
print([0,1].contains(0)) // true
print([2,3].contains(0)) // false
```

# さいごに

contains は結構便利！！
代入式を使って CRC32 を一つの lambda 式にする (Python 3.8 以降)

 zlib などで使われている CRC32 は以下のような計算になっています。

```python:Python3
def crc32(data, P=0xedb88320, v=0):
    v = v ^ 0xffffffff
    for d in data:
        v = v ^ d
        for b in range(8):
            v = (v >> 1) ^ ((v & 1) and P)
    return v ^ 0xffffffff
```

これを、一つの lambda 式にしようとしたとき、data に応じた変数 v の更新が必要ですが、 Python 3.7 以前では v を更新する方法を見つけられませんでした。しかし、Python 3.8 から代入式 `":="` が使えるので、それが可能です。

```python:Python3.8
crc32 = lambda data, P=0xedb88320, v=0xffffffff: 0xffffffff ^ [v := ((v ^ (0 if b else d)) >> 1) ^ (((v ^ (0 if b else d)) & 1) and P) for d in data for b in range(8)][-1]
```

この式は、入力ビット数（入力バイト数の 8 倍）の配列を一度作るので、CRC32 としての実用性はゼロです。

zlib の crc32 と一致するか確認します。

```python:test.py
#!/usr/bin/env python3.8

import zlib

def crc32a(data, P=0xedb88320, v=0):
    v ^= 0xffffffff
    for d in data:
        v ^= d
        for b in range(8):
            v = (v >> 1) ^ ((v & 1) and P)
    return v ^ 0xffffffff


crc32b = lambda data, P=0xedb88320, v=0xffffffff: 0xffffffff ^ [v := ((v ^ (0 if b else d)) >> 1) ^ (((v ^ (0 if b else d)) & 1) and P) for d in data for b in range(8)][-1]


def test(data, encoding='utf-8'):
    data = bytearray(data) if type(data) != str else bytearray(data, encoding)
    a = crc32a(data)
    b = crc32b(data)
    z = zlib.crc32(data)
    if a != z:
        raise Exception('BUG(crc32a): %#010x != %#010x' % (a, z))
    if b != z:
        raise Exception('BUG(crc32b): %#010x != %#010x' % (b, z))
    print('OK: %#010x' % z)


test('abcd')
test(b'efgh')
```

```console:実行結果
$ python3.8 test.py
OK: 0xed82cd11
OK: 0x08337bb5
```

参考: [SSE4.2 拡張命令 CRC32 を使ってみる](https://qiita.com/ikiuo/items/492a133d05edc55e4543)
git ローカルでのブランチの基本操作

#ローカルブランチの基本操作
##ローカルリポジトリまで移動
```
cd ディレクトリパス
```
#ブランチを確認
```
* 現在のブランチを確認
 * git branch 
* ブランチ一覧を表示
 * git branch -a
```
 
# ブランチの作成
```
git branch ブランチ名 派生元のブランチ名
```

# ブランチの切り替え
```
git switch ブランチ名
（git checkout でも同じ挙動だが現在は、`git switch` を推奨）
```
#ブランチの作成と切り替えを一緒に行う
```
git switch -c ブランチ名　派生元のブランチ名 
```
#マージする
```
1.操作したいブランチに切り替え
git switch ブランチ名

2.マージして取り込む
git merge マージ対称ブランチ
```
#ブランチを削除
```
git branch -d ブランチ名
```
pushができなくなった時の解決方法

Sourcetreeの使用が前提となっています。他のgit連携ソフトでも考え方は同じだとは思いますが...
## エラーメッセージに403が入っているパターン
The requested URL returned error: 403
Sourcetreeにアカウントを連携→削除→連携といったことを過去に行なっている場合、キーチェーンアクセスが複数のパスワード情報を保存している可能性があります。
キーチェーンアクセスを開き、該当していそうなキーチェーンアクセスを削除します
→push時にパスワードを聞かれるので入力します
→完了！
## エラーメッセージにAugust 13 2021 が入っているパターン
remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.
まずはパーソナルトークンを取得します。
右上の設定を押し
![スクリーンショット 2021-08-23 8.26.16.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549093/203097fa-35fd-9c83-16c4-dc088a57b077.jpeg)
リモートを選択し、リモートリポジトリの編集を選択します。
![スクリーンショット 2021-08-23 8.28.27.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549093/2c281950-1301-578f-d808-80caf6c0fee3.jpeg)
https://の後ろにアクセストークンを挿入し、保存します。
→完了！
例文コピペは通らない！Twitter APIの登録・申請の攻略法

#はじめに

Twitterで自作botを作るのに必要なTwitter APIの申請について、
ネットで回ってる情報がどうにも私の経験と違うようなので記事にしました。

#申請フローについて

TwitterAPIの申請フローは、
他の記事を見ていると、

『フォーム記入&送信』→『メール認証』→『メールで質問が来るから返信する(2回程度)』→『申請完了』

という流れのようです。
このパターンももちろんあるのですが、実際は、上手く申請すると、

<b>『フォーム記入&送信』→『メール認証』→『申請完了』</b>

のように、メールでのやり取りをパスして、即API使用可能の状態になるようです。
私はこれを一発合格、ってよんでます。
もちろん、メール返信の手間がない分、こちらの方が断然良いです。

おそらくですが、Twitter社は申請文を自動でチェックしており、
怪しい申請文に対しては、人間がメール送信&レビューする、という仕組みになっているものと推察しています。

では、一発合格するにはどうしたらいいでしょうか。

#申請文について

まず、一番重要なのは、

<b>『ネットに回ってる申請文のコピペだと一発合格はあり得ない』</b>

ということです。

私も始めて申請したときは、ネットの申請文を丸ごとコピペしましたが、一発合格とはなりませんでした。

そのため、自分の言葉で、何のためにbotを使うのかを書く必要があります。

もしくは、ネットの申請文をリライトして申請する、という方法もあります。
ただ、どの程度のリライトすればいいか、は明確には分からないです。

#申請文の下のチェックマークについて

申請文記入欄の下に、いろいろチェックする欄があると思います。
もちろん、各自、自分の使い方に合ったチェックをすべきだと思いますが、以下が無難だと思います。

Analyze data →　OFF
Tweet, Retweet, like →　ON
Show tweet off twitter →　OFF
Government → OFF

大事なのは、最初のAnalyze dataで、これをONした場合は何に使うのかしつこく確認される場合があります。なのでOFFにすべきです。

私がネット情報をコピペして申請した場合も、しつこく聞かれ、3、4回やり取りがあった後にdeclineされました(笑)

Tweet, Retweet, likeについては、恐らくAPI申請している人で使わない人はほとんどいないと思うので、正直にYESで良いかと思います。

下2つはいつもOFFにしてきたので、ONにするとどうなるかは正直把握していないです。
#さいごに

まとまると、

<b>申請文のコピペはしない</b>

これに尽きます。

Twitter社のアルゴリズムは日々変わっているので、上記の攻略法が今後も通用するかは分かりませんのでご留意ください。
CORSの闇

#CORSってなに
オリジン間リソース共有（Cross-Origin Resource Share）は追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組み。
そして、安全なオリジン間のリクエストとブラウザー・サーバー間のデータ転送を支援してくれる。

つまり、__このオリジン間の通信は本当に安全なのか？？？ってのを確かめてくれる仕組み。__

え、What is オリジン？
>ウェブコンテンツのオリジンOriginは、ウェブコンテンツにアクセスするために使われる 
・URL のスキーム (プロトコル)、 
・ホスト (ドメイン)、 
・ポート 
によって定義されます。
スキーム、ホスト、ポートがすべて一致した場合のみ、二つのオブジェクトは同じオリジンであると言える。

#どうやって通信が安全か確かめるの？
自分とは異なるオリジンにあるリソースをリクエストするとき、オリジン間HTTPリクエストを実行。
具体的にはメインのリクエストを送る前に通信の安全を確認するリクエストをブラウザが自動的に送ります。
それが、__プリフライトリクエスト（OPTIONリクエスト）__。

リクエスト全体の流れ
![Screen Shot 2021-08-23 at 8.15.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1553280/ce4d6e8b-7868-8610-2d58-947b56145fcb.png)

#プリフライトリクエストを成功させるための実装
##リクエストを送る側の実装
何もしなくてよい

##リクエストを受ける側の実装
以下の2点が必要

1. OPTIONリクエストに対して適切なハンドリングをする実装
1. HTTPレスポンスヘッダーに通信の受け入れの許可をする実装

Goでのサンプルコード

```go
func (r *Router) Launch(w http.ResponseWriter, req *http.Request) {
	switch req.Method {
    // 各リクエストのハンドリング処理
    // どのリクエストに対してもレスポンスヘッダーに以下を入れる
    // w.Header().Set("Access-Control-Allow-Origin", "http://localhost:63342")
	case http.MethodGet:
		// GETリクエストのハンドリング処理
	case http.MethodPost:
		// POSTリクエストのハンドリング処理
	case http.MethodPut:
		// PUTリクエストのハンドリング処理
	case http.MethodDelete:
		// DELTEリクエストのハンドリング処理
	case http.MethodOptions:
		PreflightTodo(w)
	default:
		// エラーのハンドリング処理
	}
}

// どのリクエストを許可するのかをヘッダーに入れる
func PreflightTodo(w http.ResponseWriter) {
	w.Header().Set("Access-Control-Allow-Origin", "http://localhost:63343") 
	w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
	w.Header().Set("Access-Control-Allow-Methods", "OPTION,GET,POST,PUT,DELETE")
	w.WriteHeader(http.StatusNoContent) // statuscode = 204
}
```
#例外（CORSプリフライトが必要ないケース）
リクエストによっては CORS プリフライトを引き起こさないものもある。
以下の__全ての条件__を満たすもの

- 許可されているメソッドのうちの一つであること。
    - GET
    - HEAD
    - POST
- ユーザーエージェントによって自動的に設定されたヘッダーを除いて、手動で設定できるヘッダーは、Fetch仕様書で「CORSセーフリストリクエストヘッダー」として定義されている以下のヘッダーだけ。
    - Accept
    - Accept-Language
    - Content-Language
    - Content-Type (但し、下記の要件を満たすもの)
- Content-Type ヘッダーでは以下の値のみが許可。
    - application/x-www-form-urlencoded
    - multipart/form-data
    - text/plain
- リクエストに使用されるどの XMLHttpRequestUpload にもイベントリスナーが登録されていないこと。これらは正しく XMLHttpRequest.uploadを使用してアクセスされる。
- リクエストに ReadableStream オブジェクトが使用されていないこと。

#参照

https://developer.mozilla.org/ja/docs/Web/HTTP/CORS
【Rails】sequenceを使ってテストデータを作成する。

sequenceというものを使ってテストデータを作成すると、テストデータをいい感じに作ることができる。

```ruby 
FactoryBot.define do
  factory :user do
    sequence(:name) { |n| "ごりら#{n}" }
  end
end
```
このような形でspec/factories/user.rbに記述する。
そして、rails cでuserを作成してみる。

```
irb(main):001:0> FactoryBot.create(:user)
   (2.4ms)  SET NAMES utf8mb4 COLLATE utf8mb4_bin,  @@SESSION.sql_mode = CONCAT(CONCAT(@@sql_mode, ',STRICT_ALL_TABLES'), ',NO_AUTO_VALUE_ON_ZERO'),  @@SESSION.sql_auto_is_null = 0, @@SESSION.wait_timeout = 2147483
   (2.3ms)  BEGIN
  User Create (3.1ms)  INSERT INTO `users` (`name`, `created_at`, `updated_at`) VALUES ('ごりら1', '2021-08-23 08:32:54.454786', '2021-08-23 08:32:54.454786')
   (7.8ms)  COMMIT
=> #<User id: 11, name: "ごりら1", created_at: "2021-08-22 23:32:54", updated_at: "2021-08-22 23:32:54">
```
もう一度同じくcreateしてみる。

```
irb(main):002:0> FactoryBot.create(:user)
   (2.9ms)  BEGIN
  User Create (6.2ms)  INSERT INTO `users` (`name`, `created_at`, `updated_at`) VALUES ('ごりら2', '2021-08-23 08:33:04.147878', '2021-08-23 08:33:04.147878')
   (8.2ms)  COMMIT
=> #<User id: 12, name: "ごりら2", created_at: "2021-08-22 23:33:04", updated_at: "2021-08-22 23:33:04">
```

これでuser.nameごりら１とごりら２を作成することができた。
【AWS】AWS Codeシリーズ

#はじめに
AWS認定試験取得に向けてAWSの知識を整理するためのまとめです。
今回はAWS Codeシリーズについてまとめます。

ソフトウェアやアプリを開発してリリースするまでは下記のような流れになると思われます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718108/e7f5682c-c89f-dddf-277c-114d1fb7a665.png)
AWSで各工程のサービスと、この一連の流れ(CI環境)を実現できるのがCodeシリーズになります。

# AWS Codeシリーズとは
AWSではコードシリーズと呼ばれる、下記の4つのサービスが提供されています。
AWS CodeCommit、AWS CodeBuild、AWS CodeDeploy、AWS CodePipeline
一つ一つ見ていきましょう。

# AWS CodeCommit
ソースコードを管理するサービスです。
完全マネージド型なので、ソースコード管理サーバのバックアップやスケールなどを
気にすることなく利用できるサービスです。
Gitコマンドをサポートしているので、既存のGitツールと連動して使うことができます。

#AWS CodeBuild
ソースコードをビルド、テストできるサービスです。
こちらも完全マネージド型なので、サーバのスケーリング等を気にする必要がありません。
Java,Python,Node.js,Rubyなど、さまざまなビルド環境を利用することができます。
ビルドした結果はS3へアップロードされます。

#AWS CodeDeploy
EC2,Lambda,オンプレ環境のサーバなどに対してのデプロイを自動化することができます。

#AWS CodePipeline
完全マネージド型の継続的デリバリーサービスです。
上記３つのサービスを利用することにより、CI/CD環境を構築することが可能です。
ソースコードが変更が変更されるたびにソースコードをビルド、テスト、デプロイという一連の流れを実現できます。

コードシリーズを連動して利用すると下記のようなイメージとなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718108/6b7af6d2-fa04-4e8b-14e8-b5f877c50b03.png)


# 参考サイト
https://d1.awsstatic.com/events/jp/2018/summit/tokyo/aws/58.pdf
https://aws.amazon.com/jp/codecommit/
https://aws.amazon.com/jp/codebuild/
https://aws.amazon.com/jp/codedeploy/
https://aws.amazon.com/jp/codepipeline/
https://tech-cci.io/archives/5080
localhostって何

#本記事
・本記事は、普段の開発で使用する`localhost/ローカルホスト`に関する知識をまとめたものです。
対象としては、開発をしている駆け出しエンジニアの方や、これから開発に着手しようとしている方、もうすでに開発をしているものの、そういや考えたことなかったな〜という方々を対象としています。
・筆者の備忘録的な位置付けも兼ねているため、誤り等あるかもしれません。もし見つけた方は、お手数ですがご連絡いただけますと幸いです。

#ローカルホスト
>ローカルホストとは、通信ネットワークにおける位置関係を示す用語の一つで、利用者や稼働中のソフトウェアにとって、自らの側のコンピュータや端末のこと。通信相手は「リモートホスト」（remote host）という。


また、ホスト名とは、ネットワーク上でのコンピュータの名前を示している。つまり、コンピュータに`ααα`や`βββ`、`γγγ`などといった名前（ホスト名）をつけることができる。
ここで、名前のつけられたコンピュータを指定する際、`http://ααα`などというふうに記述することとなる。
※これはHTTPでアクセスするように指示を出している。
ここで、`自分を意味する名前がローカルホスト`である。
すなわち、`http://localhost`とは、ホスト名＝自分のコンピュータを指定している。


# 参考文献



https://wa3.i-3-i.info/word1102.html

https://qiita.com/1ain2/items/194a9372798eaef6c5ab

#最後に
最後までお読みいただきありがとうございました。
わかりにくい説明だったと思いますが、何かありましたらご連絡いただけますと幸いです。
【HTML&CSS】Bootstrapのmarginとpaddingまとめ


#対象者

* bootstrapでマージンとパディングを使いたい方
* 簡単に行や文字の間に空白を空けたい方


#目的

* bootstrapを使用して,marginとpaddingをview上で設定する

#実際の手順と実例
###1.前提

bootstrapの使用例はこちら

https://qiita.com/nao0725/items/e9beb9b4f20db83c4086


###2.marginかpaddingかを設定

bootstrapを導入するとHTMLの各要素のクラスに「m」や「p」と数字を組み合わせて幅を調整できます。

* m : margin
* p : padding

例

```
<div class="m-5">クラスを指定するとマージンがつきます</div>
<div class="p-5">クラスを指定するとパディングがつきます</div>
```


###3.上下左右を設定する

| 上下左右の指定　| 内容 |
|:-:|:-:|
|  t |  top |
|  b |  bottom |
|  l |  left |
|   r|  right |
|  x |  leftとrightをセット |
|  y |  topとbottomセット |



```

<div class="m-0">クラスを指定するとサイズ「0」のマージンがつきます</div>

<div class="p-1">クラスを指定するとサイズ「1」のパディングがつきます</div>

<div class="m-2">クラスを指定するとサイズ「2」のマージンがつきます</div>

<div class="p-3">クラスを指定するとサイズ「3」のパディングがつきます</div>

<div class="m-4">クラスを指定するとサイズ「4」のマージンがつきます</div>

<div class="p-5">クラスを指定するとサイズ「5」のパディングがつきます</div>

<div class="m-auto">クラスを指定すると「auto」のマージンがつきます</div>
```

####投稿者コメント

一回見ればわかりやすいのですが、自分で理解するのにまとめてみました。覚えるとかなり楽に行間調整が可能です!


####My Profile
プログラミング学習歴３ヶ月目のアカウントです！
プログラミングスクールで学んだ内容や自分が躓いた箇所等のアウトプットの為に発信しています。
また、プログラミング初学者の方にわかりやすく、簡潔にまとめて情報共有できればと考えています。
もし、投稿した記事の中に誤り等ございましたら、コメント欄でご教授いただけると幸いです。
VITEでvue3.0プロジェクトをgithubpages用に書き出そうとしてエラー

VITEでvue3.0プロジェクトをgithubpages用に書き出そうとしてエラー

```
vite v2.4.4 building for production...
✓ 17 modules transformed.
[vite]: Rollup failed to resolve import "assets/layout/images/logo-mobile.svg" from "src/pages/Error.vue".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "assets/layout/images/logo-mobile.svg" from "src/pages/Error.vue".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at onRollupWarning (/app/baixiangguo-client/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:51765:19)
    at onwarn (/app/baixiangguo-client/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:51550:13)
    at Object.onwarn (/app/baixiangguo-client/node_modules/rollup/dist/shared/rollup.js:20503:13)
    at ModuleLoader.handleResolveId (/app/baixiangguo-client/node_modules/rollup/dist/shared/rollup.js:19852:26)
    at /app/baixiangguo-client/node_modules/rollup/dist/shared/rollup.js:19799:22
    at async Promise.all (index 2)
    at async ModuleLoader.fetchStaticDependencies (/app/baixiangguo-client/node_modules/rollup/dist/shared/rollup.js:19797:34)
    at async Promise.all (index 0)
    at async ModuleLoader.fetchModule (/app/baixiangguo-client/node_modules/rollup/dist/shared/rollup.js:19773:9)
    at async Promise.all (index 3)
error Command failed with exit code 1.
```
色々調べてみて、rolupoptionを調べたりしたが、なんのこっちゃない、
場所が分からんのかも？と気づいてassetsをsrcの下にあることを明示したらい解決。

```vite.config.ts
    { find: 'assets', replacement: 'src/assets'}]
```
Qiita Daily Survey memo 2021.08.23

# Qiita Daily Survey memo 2021.08.23
Qiita の記事を可能な限り毎日読むために、読んだmemoを公開することでモチベーションを維持しようという試み。

# [6歳娘「パパ、flexにしたら幅が余っちゃったよ・・・」](https://qiita.com/Yametaro/items/a04032349c46dddf8cda)
無職 やめ太郎（本名）(Yametaro) さんの記事。
ITっょっょな娘さんとの会話形式でいろいろな内容を紹介してくださる方で、今回はflexデザインのお話。
他の記事も楽しく読ませていただいています。

まだまだフロントょゎょゎなので、自分もflexデザインは、よくわからなくなってしまいます…。
なんとなくでCSS関係を書いていましたが、一回しっかり勉強しようといろいろな記事を読んだりサイトを見たりしました。
私の見たサイトの中では、有料になってしまいますがドットインストールさんの下記のレッスンが非常に分かりやすく、自分でも理解することができました。
[詳解CSS フレックスボックス編](https://dotinstall.com/lessons/basic_flexbox_v2)

# [【色変記事】実務未経験がAtCoderで水色になるまで](https://qiita.com/nizi24/items/f370cf0abfd349884baa)
nizi24 さんの記事。
タイトルの通り、AtCoder で水色に到達したそうで、そこまでに実施したことを共有してくださっている記事です。
長い期間継続して努力されていて、技術力の向上も納得…という感想です。
見たことも聞いたこともないアルゴリズム名が並んでおり、「なんだかすごそう」という小学生並みの感想しかでてきません…。

ただ、途中で表示されているタイル形式で色付けされている図や、「精進グラフ」など、努力を可視化されていて、これはぜひマネしたいと思いました。
継続した努力にはモチベーションのコントロールが大変だと思うので、、、。


# [ギルドマスター「この石板に手を置いてください。―――目の前に浮かび上がったそれがあなたのプログラミングスキルです。」](https://qiita.com/underflow/items/9210aec695237a9b0ef4)
underflow さんの記事。
小説家になろうで小説を読み漁っているので、とても目を引くタイトルでした…。
大好きな作ってみた系の記事で、自分のスキルを入力してパラメータっぽいものを生成、それをurlで共有できる…というサイトです。
色遣いが好みですし、使い方もシンプルで分かりやすくとても良いと思いました。
私だと…[こんな感じ](https://beta.jpn.org/skill/?eyJwcm9maWxlIjp7Im5hbWUiOiLjgrLjgrnjg4giLCJsdiI6MSwiam9iIjoi44OX44Ot44Kw44Op44Oe44O8Iiwic3RhdHVzIjoi6ImvIiwiaHAiOiIxNiIsIm1heF9ocCI6MTYsInNwIjo0LCJtYXhfc3AiOjQsImV4cCI6MH0sImxhbmciOnsiQ1NTIjoyLCJIVE1MIjozLCJNYXJrZG93biI6MywiQyI6MSwiSmF2YVNjcmlwdCI6NSwiUHl0aG9uIjo2LCJTUUwiOjN9fQ==)です…。
Linux エフェメラルポートについて確認した時のメモ

改めて整理した時のメモです。

# 試験環境

```
$cat /etc/os-release
NAME="Amazon Linux"
VERSION="2"
ID="amzn"
ID_LIKE="centos rhel fedora"
VERSION_ID="2"
PRETTY_NAME="Amazon Linux 2"
ANSI_COLOR="0;33"
CPE_NAME="cpe:2.3:o:amazon:amazon_linux:2"
HOME_URL="https://amazonlinux.com/"
```

# エフェメラルポートとは

[エフェメラルポート](https://ja.wikipedia.org/wiki/%E3%82%A8%E3%83%95%E3%82%A7%E3%83%A1%E3%83%A9%E3%83%AB%E3%83%9D%E3%83%BC%E3%83%88)

>エフェメラルポート（英: ephemeral port、英語で短命なポートという意味）とは、インターネットプロトコル (IP) を用いた通信を行うため、TCP/IPプロトコルスタックが事前に定義されている範囲内から自動的に割り当てるポートである。Transmission Control Protocol (TCP)、User Datagram Protocol (UDP)、Stream Control Transmission Protocol (SCTP) は典型的に、クライアントサーバ型通信において、クライアント側の一時的なポート番号としてエフェメラルポートを使用する

と書いてある。

以下のブログにもある絵を見ると理解しやすい。

[Webサーバに接続するまでの流れとポート番号](https://itsakura.com/network-server-port)

例えば Linux マシンから任意の Web サーバーにアクセスする際にサーバーの 80 番ポートへアクセスするが、クライアント(今回の場合 Linux マシン)でも通信をするためにポートを割り当てる必要があり、この場合に利用されるポートがエフェメラルポート（短命の)として呼ばれている。

# エフェメラルポートに利用されるポートの確認方法

エフェメラルポートに利用されるポートは OS やディストリビューションなどによっても異なる。
設定は `sysctl -a` によって確認できる。

```
$sysctl -a |grep net.ipv4.ip_local_port_range
net.ipv4.ip_local_port_range = 32768    60999
```

上記場合、エフェメラルポートは「32768から60999」を示す。

# エフェメラルポートの制御方法

以下の2種類がある

+ ポート範囲を示す `net.ipv4.ip_local_port_range` を設定する
+ 利用されたくないポートを `net.ipv4.ip_local_reserved_ports` を利用して予め設定する

## net.ipv4.ip_local_port_range

以下参考に設定してみる。

[Linuxでエフェメラルポートの範囲を指定する](https://itbasesta.com/ephemeral-ports-range)

```
# バックアップ
$cp /etc/sysctl.conf /etc/sysctl.conf.org

# ip_local_reserved_ports を追加する
$vi /etc/sysctl.conf
```

```/etc/sysctl.conf
net.ipv4.ip_local_port_range=49152 65535
```

```
# 設定を反映する
$sysctl -p
net.ipv4.ip_local_port_range = 49152 65535
```

確認は `lsof` コマンドを使い、HTTPS 通信で使われている通信を見てみる。

```
$lsof |grep https |less
ruby      2538                root    8u     IPv4              16826       0t0        TCP ip-10-0-0-116.ap-northeast-1.compute.internal:61792->52.119.222.176:https (ESTABLISHED)

ssm-agent 3136 3157           root   13u     IPv4              22486       0t0
      TCP ip-10-0-0-116.ap-northeast-1.compute.internal:53704->54.240.225.178:ht
tps (ESTABLISHED)
```

上記を見ると `ruby` がエフェメラルポートとして `61792` を使っており、`ssm-agent` は `53704` を使っている。

設定は戻しておく。

```
$cp /etc/sysctl.conf.org /etc/sysctl.conf 
$sysctl -p
```

## net.ipv4.ip_local_reserved_ports

以下を参考にポート範囲の「32768-60500」を予約済みとする

[特定の TCP/UDP クライアントポートの使用を制限する方法](https://success.trendmicro.com/jp/solution/1120287)

```
# バックアップ
$cp /etc/sysctl.conf /etc/sysctl.conf.org

# ip_local_reserved_ports を追加する
$vi /etc/sysctl.conf
```

```/etc/sysctl.conf
net.ipv4.ip_local_reserved_ports=32768-60500
```

```
# 設定を反映する
$sysctl -p
net.ipv4.ip_local_reserved_ports = 32768-60500
```

確認は `lsof` コマンドを使い、HTTPS 通信で使われている通信を見てみる。

```
$lsof |grep https |less
ssm-agent  3133                 root   13u     IPv4             354768       0t0        TCP ip-10-0-0-116.ap-northeast-1.compute.internal:60504->54.240.225.173:https (ESTABLISHED)

・・・
```

上記を見ると `ssm-agent` が通信を行っているが、エフェメラルポートとしては `60504` が使わていることが確認できる。
上記からも `net.ipv4.ip_local_reserved_ports=32768-60500` の設定が有効化され、ポート 32768-60500 が除外されているように見える。
Pythonで声色を感情分析する(Empath)

## 音声から感情分析したい

**「なんか、今日はこの人機嫌悪いな…」**

相手の声の調子からその人の気分がなんとなくわかるというのは、私達が日常的に経験していることですよね。
もし、AIを使って相手の声から気分を推測することができたら便利だと思いませんか？

[Empath](https://webempath.net/lp-jpn/)の「気分解析API」を使うとそれができてしまいます。


> Empathは、音声等の物理的な特徴量から気分の状態を独自のアルゴリズムで判定するプログラムです。
> 数万人の音声データベースを元に喜怒哀楽や気分の浮き沈みを判定します。(Empath公式より)


## Empathで気分解析をしてみよう

EmapthはWeb API化されていて、簡単に利用することができます。
このEmapth Web APIを**Python**から利用して、**音声の気分解析**をしてみましょう:speaking_head:

Empath Web APIで解析できる「気分」は次の通りです。それぞれ0～50の範囲の値として出力されます。

- calm (平常) :neutral_face:
- anger (怒り) :angry:
- joy(喜び) :grin:
- sorrow (悲しみ) :cry:
- energy (元気度) :muscle:

### 準備
- APIの利用にはEmapthのユーザー登録が必要です。
- **基本無料**。ただし、APIの利用は**月に300回まで**。
- APIの利用には**「API key」**が必要。Emapthのマイページの「API Key設定」から発行しておきましょう。

### ボイス素材
本記事では実験用として、下記のサイト様から音声素材を拝借いたしました。

- [あみたろの声素材工房](https://www14.big.or.jp/~amiami/happy/) 様

### 音声ファイルの前準備
Empath Web APIで利用する音声ファイル(WAVファイル)は下記の仕様を満たす必要があります。

- PCM WAVE形式、16bitであること。
- データサイズが1.9MB以下であること。
- フォーマットがPCM_FLOAT、PCM_SIGNED、PCM_UNSIGNEDいずれかであること。
- 録音時間が5.0秒未満であること。
- サンプリング周波数が**11025Hz**であること。
- チャンネル数が1(モノラル)であること、

先述の「あみたろの声素材工房」からダウンロードしたWAVファイルは「サンプリング周波数」がそのままだと仕様を満たさないので変換する必要があります。

例えば、フリーソフト「Audacity」を使って変換するとよいです。
(具体的なやり方は「Audacity サンプリング周波数変換」などで検索してみてください。まったく難しくありません。)

### 気分解析
Pythonのコードは下記の通りです。
`'あなたのAPI key'`と書いてある箇所は、準備で発行したあなたのAPI keyで置き換えてください。

```python:python
import requests
url = 'https://api.webempath.net/v2/analyzeWav'

apikey = 'あなたのAPI key'

payload = {'apikey': apikey}

wav = 'ittekimasu_01.wav' # 「いってきまーす」
data = open(wav, 'rb')
file = {'wav': data}

res = requests.post(url, params=payload, files=file)
print(res.json())
```

### いってきまーす

使用したボイス：[「いってきまーす」](https://www14.big.or.jp/~amiami/happy/download/voice/004_gaisyutsu/ittekimasu_01.wav)

**注意！ ボイスを再生するときは周りに人がいないかをよく確認し、音量に注意しましょう**


```:実行結果
{'error': 0, 'calm's 15, 'anger': 0, "joy': 34, 'sorrow":0, 'energy':30)
```

使用したボイスは「いってきまーす」という**明るく元気な声**。
よって、joy(喜び:grin:)とenergy(元気:muscle:)の数値が高く出ているこの結果はいい感じであると言えそうですね。


### さよなら
使用したボイス：[「さよなら」(さびしそうに)](https://www14.big.or.jp/~amiami/happy/download/voice/001_aisatsu/sayonara_03.wav)



```:実行結果
('error': 0, 'calm':18, 'anger': 14, 'joy': 11, 'sorrow': 14, 'energy': 11}
```

anger (怒り:angry:)とsorrow(悲しみ:cry:)が高めです。
私の耳には、この声に特に怒り要素は感じませんが、悲しみと怒りは紙一重なのでしょうか？

### 痛いってばぁ！
使用したボイス：[「痛いってばぁ！ （怒って）」](https://www14.big.or.jp/~amiami/happy/download/voice/202_hidan/itaittebaa_01.wav)

```:実行結果
{'error': 0, 'calm': 0, 'anger': 0, 'joy': 25, 'sorrow': 25, 'energy': 0}
```
なぜかjoy(喜び:grin:)とsorrow(悲しみ:cry:)が高く、anger (怒り:angry:)は0。
声が高いので怒りに聞こえないのでしょうか？
それでもこの場合は、悲しみといえば悲しみなので妥当な結果と言えなくもない。

## 感情分析のこれからに注目

この「Emapth」は、すでに世界50か国2,800社で活用されているそうです。
確かに、声から気分がわかったら色々なことに活用できそうですよね。
感情分析のこれからに目が離せません:robot:

テキストから感情分析した記事もご興味あればご覧ください。

https://qiita.com/konitech913/items/317b452cc6c63894fce3
キャッシュが原因で Let's encrypt の証明書自動取得に失敗してしまう

Let's encrypt の証明書を自動取得するために、certbot を使っています。
ところが、
`certbot renew --agree-tos --webroot -w /srv/http`
などとしても

```
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Processing /etc/letsencrypt/renewal/<certfile>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Certificate not due for renewal, but simulating renewal for dry run
Plugins selected: Authenticator webroot, Installer None
Simulating renewal of an existing certificate for <certfile>
Performing the following challenges:
http-01 challenge for <domain>
Using the webroot path /srv/http for all unmatched domains.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Challenges loaded. Press continue to submit to CA. Pass "-v" for more info about
challenges.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Waiting for verification...
Challenge failed for domain <domain>
http-01 challenge for <domain>

Certbot failed to authenticate some domains (authenticator: webroot). The Certificate Authority reported these problems:
  Domain: <domain>
  Type:   unauthorized
  Detail: During secondary validation: The key authorization file from the server did not match this challenge "RdXMpaPW3jLwb0EAb46oGCQliihEMX1ybNP6PxNQWbU.u1DtLliaSTpmmHj9n-vEt4zNg8VW8ZyvHMw1lC0Cb40" != ""

Hint: The Certificate Authority failed to download the temporary challenge files created by Certbot. Ensure that the listed domains serve their content from the provided --webroot-path/-w and that files created there can be downloaded from the internet.

Cleaning up challenges
Failed to renew certificate <domain> with error: Some challenges have failed.
```

のようなエラーになってしまい、うまく更新できません。
チャレンジトークンをきちんとファイルに書いているにもかかわらず、認証サーバ側には空白に読めてしまっているようです。
ところが、`--debug-challeng` オプションを付加して「ゆっくり」実行するとうまく行きます。証明書の自動取得は不可でも、温もりの手動取得ならOKというわけです。

結論から言うと、キャッシュが原因でした。
Webサーバ側でファイルの内容変更に追従できずにキャッシュを返してしまっていて、それが空白の応答が帰る原因になってしまっているようです。
キャッシュを切ることで解決しました。
Chakra UI：ボタンなどデフォルトのブルーのアウトライン（フォーカスポイント）を消したい


## 使用環境

・MacOS BigSur（11.5.2） ・VScode（1.59.1） ・Node.js   (16.1.1） "@chakra-ui/icons": "^1.0.15", "@chakra-ui/react": "^1.6.6"

## はじめに

最近、Next.js（React）を使ったプロジェクトで**Chakra UI**を使用しています。
Chakra UIでは、クリック時にButtonコンポーネントやInputコンポーネントなど対象のコンポーネントで、デフォルトでブルーのアウトライン（フォーカスポイント）が入ってしまいます。こんなふうに。

![スクリーンショット 2021-08-22 15.28.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/711874/aada7cfe-a644-4aa6-6aae-011cbed4efee.png)


デザインの使用色やUIのバランスなどの観点から、ちょっと気持ち悪いなと感じたので、消す方法がないかリサーチをしました。
しかし、このことについて触れている記事は少なくとも自分が調べた限りはなかったので今回の記事を書きました。（もしありましたら教えていただけると幸いです🙇‍♂️）

## 結論/解決策

サクッと解決策からお伝えすると、２つ方法があります。

以下の**style props**
`_focus={{ boxShadow: "none"}}` もしくは `_focus={{ _focus: "none"}}`を

**①アウトラインを消したいコンポーネントのタグ内に記述すること**

**②Customize Themeとしてコンポーネント名でbaseStyleをグローバル適用する**

①実装例）

```tsx
<IconButton
	_focus={{ boxShadow: "none"}} //これを記述する
	aria-label="DarkMode Switch"
	icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
	onClick={toggleColorMode}
/>
```

②実装例）

```tsx
export const bodyTheme = extendTheme({
	components: {
		Button: { baseStyle: { _focus: { boxShadow: 'none' } } }　//これを記述し、Globalで適用
	}
})
```

個人的にはいちいちコンポーネントにこれを記載するよりもGlobal適用してしまえば済む②の方法がお勧めです。
※しかし②の方法はButtonコンポーネントには効きますが、IconButtonやInputやSelectは同じ方法では効きませんでした。。（①の方法は大丈夫です。）どなたかわかる方がいたら教えて欲しいです🙇‍♂️

## 最後に

調べていた際に、この[Chakra UIのGitHubレポジトリIssue#708](https://github.com/chakra-ui/chakra-ui/issues/708)に行きついて興味深い発見があったので紹介しておきます。

Chakra UIのDeveloper(＠with-heartさん)の人いわく、そもそもこれは、**キーボードだけで操作するユーザーのため**（今どの場所にフォーカスしているか分かりやすくするため）に、デフォルトで導入しているそうです。

ただ、Blue outline borders around all clickable components ugly（笑）などというIssue名に上がっているように、気持ち悪いと思っている人は多いみたいです。

去年からみんなで色々試行錯誤してなんとか（Developerの方が頑なに拒否する中）、遠回りにデフォルトのこの設定を外す方法を模索していたみたいです。

ちなみに、`focus-visible` をライブラリパッケージとして導入する方法もあるみたいなので気になる方はみてみてください。
[Accessibility on-demand with Chakra-ui and focus-visible](https://medium.com/@keeganfamouss/accessibility-on-demand-with-chakra-ui-and-focus-visible-19413b1bc6f9)

自分は公式ドキュメントの[Style Props](https://chakra-ui.com/docs/features/style-props)の記事の下〜の隅っこの方をたまたま見ていてこのやり方をみつけましたが（v1へのアップデートと同時に公式Docアップデートされた？）、ちょうど7日前に同じ解決策見つけてる人がいたのでこれで間違いないと思います。
![スクリーンショット 2021-08-23 6.06.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/711874/ee2cd983-f64d-cf25-698d-d517b7f64f77.png)


ただ、Developerさんの言うように、**"アウトラインを取り除くことはマウスユーザーなどユーザー体験を損ねる"**ということは念頭においておかないといけません。
なんでもかんでも気持ち悪いからって自分好みで消してしまうのは良くないことを学びました。
使い所を検討して導入していくことをお勧めします。

Developerさんがシェアしていた記事
Quick Tip: [Never remove CSS][4]


## 参考資料

- Chakra UI公式DOC [Style Props][1]
- Chakra UIのGitHub公式レポジトリ [Blue outline borders around all clickable components ugly #708][2]
- Medium [Accessibility on-demand with Chakra-ui and focus-visible][3]
- Quick Tips: [Never remove CSS][4]

[1]:https://chakra-ui.com/docs/features/style-props
[2]:https://github.com/chakra-ui/chakra-ui/issues/708
[3]:https://medium.com/@keeganfamouss/accessibility-on-demand-with-chakra-ui-and-focus-visible-19413b1bc6f9
[4]:https://www.a11yproject.com/posts/2013-01-25-never-remove-css-outlines/
【実践！PostreSQL】「CREATE SEQUENCE文」でシーケンスを作成する

# シーケンスとは
**連続して発生する順番（連番）**のことで、行番号のような、データを一意に特定するための列を作りたいときに使うと良い
PostgreSQLでは**「CREATE SEQUENCE文」**を使うことで、シーケンスを作成することができる

# 使い方
**目次**
-  ①シーケンスを作成する
-  ②シーケンスの開始番号を設定する
-  ③最新のシーケンス番号を取得する
-  ④シーケンス番号を進めて、最新の番号を取得する
-  （おまけ）「CREATE SEQUENCE」のかゆいところに手が届くオプション

## ①シーケンスを作成する
```
CREATE SEQUENCE シーケンス名
```
「シーケンス名」→「テーブル名.シーケンス名」にすると丁寧

## ②シーケンスの開始番号を設定する

```
create sequence テーブル名.シーケンス名
    SELECT setval('テーブル名.シーケンス名', 番号)
```
すでにいくつかのシーケンス番号が振られているテーブルを複製した場合に、シーケンス番号の現在値を設定する。
※このケースではsetvalしておかないと、シーケンス番号は1から開始されるため重複エラーが起きてしまう

## ③最新のシーケンス番号を取得する

```
select currval('シーケンス名')
```

## ④シーケンス番号を進めて、最新の番号を取得する

```
select nextval('シーケンス名')
```

## （おまけ）「CREATE SEQUENCE」のかゆいところに手が届くオプション

```
select nextval('シーケンス名')
    INCREMENT BY 1
    MINVALUE 5
    MAXVALUE 999
    START WITH 10
    CYCLE;
```
**「INCREMENT」**
値の増加量を指定できる（2を設定すれば、2ずつ増加するシーケンスになる）
**「MINVALUE」**
シーケンスとして作成する最小値を指定
**「MAXVALUE」**
シーケンスとして作成する最大値を指定
**「START WITH」**
任意の数からシーケンス番号を開始することができる
**「CYCLE」**
シーケンスが限界値に達した時、そのシーケンスを周回させることができる。（デフォルトはNO CYCLE）
【Sphinx】reSTファイル内のタイトルにSubversionのリビジョン番号を付与する。

# １．はじめに（動機）

自分用に貯めてきたSphinxのタイトル末尾にバージョン番号を付けることにしました。
その時のメモを共有します。

### ポイント

- Subversionのリビジョン番号は ```$Rev$``` を埋め込むと、```$Rev: 543 $``` のようにリビジョン番号を展開する。
- この ```$Rev: 543 $``` の ```543``` だけを使いたい。
- ```SubWCRev``` は、Cygwin端末内で作業が完結しないのでイヤ。

# ２．概要

慣れている人なら、ここを読めば後は自分で作れる。

## ２．１．見出しの書式と拡張子

見出しの書式は ```見出し文字列 [x.y.543]```

### 拡張子 ```.rstx```

- ```見出し文字列 [x.y.$Rev: 543 $]```
- このファイルをSubversionで管理
- ```.rst_``` はGVimのシンタックスハイライトの設定ができない。

### 拡張子 ```.rst```

- ```見出し文字列 [x.y.543]```
- ```.rstx``` のリビジョン番号を処理して作成。

## ２．２．仕組み

1. 元の ```.rst``` ファイルを、```svn mv``` で ```.rstx``` に変更
2. 変換用スクリプト ```make-rst``` の作成と、 ```Makefile``` への埋め込み
3. GVimの対応
    - ```.rstx``` をGVimに紐付ける。
    - ```_gvimrc``` を編集して、シンタックスハイライトを有効にする。
4. ```.rst``` を無視するように ```svn:ignore``` を設定する。  

# ３．詳細

注意） これからの作業で失敗した時のために、全てのファイルをsvn commitする。

## ３．１．元の拡張を変更

```bash
$ find source -name \*.rst -exec svn mv {} {}x \;
```

※なんかやらかしてしまったら、 ```svn revert``` してやり直す。

## ３．２．変換の仕組み

### スクリプト

```bash
#!/usr/bin/bash
# .rstx: before
# .rst: after

convert_file()
{
        if [ ${1} -nt ${2} ]
        then
                echo "generate: ${2}"
                sed -e 's/\$Rev: \([0-9][0-9]*\) \$/\1/' ${1} > ${2}
        fi
}

create_rst()
{
        for src in `find $1 -name \*.rstx`
        do
                convert_file $src ${src%.rstx}.rst
        done
}

delete_rst()
{
        find $1 -name \*.rst -exec rm -f {} \;
        return 0
}

main()
{
        if [ "$1" = "" -o "$2" = "" ]
        then
                echo "error: no args"; return 127
        fi

        if [ ! -d $2 ]
        then
                echo "not found: $2"; return 126
        fi

        if [ "$1" = "clean" ]
        then
                delete_rst $2
        else
                create_rst $2
        fi

        return 0
}

main $1 $2 $3
exit $?
```

### Makefile（変更点のみ抜粋）

```Makefile
# Catch-all target: route all unknown targets to Sphinx using the new
# "make mode" option.  $(O) is meant as a shortcut for $(SPHINXOPTS).
clear: Makefile
        @$(SPHINXBUILD) -M clean "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)

%: Makefile
        make-rst $@ $(SOURCEDIR)
        @$(SPHINXBUILD) -M $@ "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
```

## ３．３．GVimの対応

次の一行を追記する

```vim
autocmd BufNewFile,BufRead *.rstx set filetype=rst
```

## ３．４．```svn:ignore``` の設定

理由は変わらないがこんなエラーになった。

```bash
$ svn ci -m "svn proedit snv:ignore" mathematics
Sending        mathematics
svn: E155011: Commit failed (details follow):
svn: E155011: Directory '/home/USERNAME/sphinx/physics/source/mathematics' is out of date
svn: E160028: Directory '/sphinx/trunk/physics/source/mathematics' is out of date
```

別の場所で同じものをチェックアウトし、そこで同じことやったら上手くいった。
もしかしたら ```svn update``` を実行していれば解決していたのかも。


# 以上
<VB.net> Memo: AllocConsole() (.NET Core)

## Environment
* VB.net
* .NET Core 3.1
* Windows 10


## Aim

Call a console window from forms, using AllocConsole() function. Especially, the case of calling a console application (project) from a form application (project) in a same solution of Visual Studio.

## References


* [C#(Windows Formアプリケーション)でコンソールの表示、非表示、出力方法(Console.WriteLine()) - Qiita](https://qiita.com/murasuke/items/ddfc75493e1d4749836f)

## Code

```vb
Private Declare Function AllocConsole Lib "kernel32" () As Integer
Private Declare Function FreeConsole Lib "kernel32" () As Integer

Sub SomeName()
    AllocConsole()
    Console.SetOut(New StreamWriter(Console.OpenStandardOutput()) With {.AutoFlush = True})

    'Set the size of the console window into an appropriate size.
    Console.SetWindowSize(40, 20)
    Console.SetBufferSize(80, 80)


    Try
        '(...)
    Finally
        FreeConsole()
    End Try


End Sub
```

## Note

* `AllocConsole()` function allocates a console window to the process.
* `Console.SetOut(...)` defines the output stream of the console window. Without it, when the procedure `Sub SomeName` is called twice or more, functions like `Console.Writeline(...)` would throw exceptions even though after `AllocConsole()`. 
    * In some cases, specifying encoding may be needed, like <br>` Dim enc As Text.Encoding = ...` <br>`Console.SetOut(New StreamWriter(Console.OpenStandardOutput(), enc) With {.AutoFlush = True})`
  
* `FreeConsole()` closes the console window.
GitHub CLI を使ってファイルから issue を作成する

GitHub CLI を使って issue を登録してみます。issue の body にはファイルを使用してみます。

ディレクトリ構成

```terminal
.
├── PersonalTaskManagement
└── issue
    └── first-issue.md
```

issue の body に使用するファイルの中身

```terminal
$ cat issue/first-issue.md
First issue from gh

## Header

This is a section.
```

## issue 作成

``create``で issue を作成します。``-t``オプションでタイトルを、``-F``で body に使用するファイルを指定します。

https://cli.github.com/manual/gh_issue_create

```terminal
$ cd PersonalTaskManagement
$ gh issue create -t "[cli]First issue" -F ../issue/first-issue.md

Creating issue in kiyo27/PersonalTaskManagement

https://github.com/kiyo27/PersonalTaskManagement/issues/12
```

作成した issue をブラウザで確認してみます。cli で ``gh issue view -w number``でブラウザを開くことができます。

```terminal
$ gh issue view -w 12
```

![create-issue.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780549/4f9a8078-19cd-4c93-bfa9-8e9f1a157ae0.png)

Markdown にも対応していますね。

## その他

### issue リストを表示
https://cli.github.com/manual/gh_issue_list

```terminal
$ gh issue list

Showing 2 of 2 open issues in kiyo27/PersonalTaskManagement

#12  [cli]First issue   (backlog)     about 16 minutes ago
#10  [test]First issue  (inprogress)  about 3 hours ago
```

### issue の body を確認
https://cli.github.com/manual/gh_issue_view

```terminal
$ gh issue view 12
[cli]First issue
Open • kiyo27 opened about 17 minutes ago • 0 comments
Labels: backlog
Projects: todo (Backlog)


  First issue from gh

  ## Header

  This is a section.


View this issue on GitHub: https://github.com/kiyo27/PersonalTaskManagement/issues/12
```

### issue の更新
https://cli.github.com/manual/gh_issue_edit

```terminal
$ gh issue edit 12 --add-assignee @me
https://github.com/kiyo27/PersonalTaskManagement/issues/12
```

### issue にコメント
https://cli.github.com/manual/gh_issue_comment

```terminal
$ gh issue comment 12 -b "comment from gh"
https://github.com/kiyo27/PersonalTaskManagement/issues/12#issuecomment-123456789
```

### issue クローズ
https://cli.github.com/manual/gh_issue_close

```terminal
$ gh issue close 12
✓ Closed issue #12 ([cli]First issue)
```
node-fetch use on unzipper


# Unzipperでrequestを使うかnode-fetchを使うかという問題


## 経緯
unzipperのopenメソッドを使う場合にrequestを要求される課題がある。
requestに限っているわけではないものの、node-fetchを入れることはできない。
node-fetchを入れても稼働するPRを送って今後改良を追っていくほど余裕はないので
既存のunzipper提供機能の範疇でなんとか使う方法を考えた

## 課題

次の3つの課題があった。
ECONNRESETがそこそこ頻発する
requestがdeprecatedになって2年が経過している。
制作物の都合上、requestを用いる限りネストが解消されない部分がある


# やりたいこと

### zipをダウンロードして展開する
deprecateになってしまっているrequestを利用せず、documentにnode-fetchを用いる方法が記載されていないが、bufferを用いる方法は記載されていたため、
bufferを用いたnode-fetchでの代用を試みた。

requestを用いる

        const directoryFromRequest = await unzipper.Open.url( request, zipURL);

node-fetchを用いる

        const fetchZip = await fetch( zipURL )
        const zipBuffer = await res.buffer()
        const directoryFromBuffer = await unzipper.Open.buffer( zipBuffer );



# 効果
処理速度が1.3倍くらい体感で高速化した。
node-fetchを用いる事により、そこそこ頻発していたECONNRESETは解消した。
asyncによるネストが１段減少した。
ESModuleが使えるようになった。



### 参考
unzipper https://www.npmjs.com/package/unzipper
request https://www.npmjs.com/package/request
node-fetch https://www.npmjs.com/package/node-fetch

### パッケージの責務ではない
今現在、世界中の多くのプロジェクトで使われているrequestの功績は非常に大きく、
ネット上の多くのサンプルも、依存パッケージもrequestを参照していることは多い。

初めて使うパッケージのサンプルにrequestが使われていることがあり、
今回のプロジェクト（2021開始のプロジェクト）でも使ってしまっていた。

開発者に限った話では全くないのだが、何にしても
お前作れるのか？ということを全発言の前頭に置かなければならない。
そうでなければお猿さん♪でしょうか？　11年間も使わせてもらってきた感謝は大きい。
Azure Monitorで使用されているKQLの書き方をちょっとだけ調べた

業務でAzure Database for PostgreSQLのログを調査する機会が時々発生していたのですが、その際普通のSQLのようにあクエリを書こうと思ったものの、うまく動作せず、毎回Limitをかけたほぼ全文検索のような形で対応していて、「スマートじゃないなぁ....」っと思っていたので、脱出するべく調べたことを書き記したいと思います。



#Azure Monitor使用されているクエリはKQL

Azure Database for PostgreSQLのAzure Monitor使用されているクエリはKQL（Kustoクエリ言語）というものが使われているようです
以下はサンプルクエリになります。
以下のコードを説明すると、AzureActivityテーブルのTimeGeneratedの日付が2020年10月01日以降かつ、TimeGeneratedが2020年10月07日以前のもかつ、LevelがCriticalに一致するレコードのみを表示するという文になります。

```

AzureActivity
| where TimeGenerated > datetime(10-01-2020) and TimeGenerated < datetime(10-07-2020)
| where Level == 'Critical'
```

---

参考資料
https://docs.microsoft.com/ja-jp/azure/azure-monitor/logs/log-query-overview
https://docs.microsoft.com/ja-jp/azure/data-explorer/kusto/query/samples?pivots=azuremonitor
https://docs.microsoft.com/ja-jp/azure/data-explorer/kusto/query/tutorial?pivots=azuremonitor
gitローカルリポジトリ操作方法

#ローカルリポジトリからコミットまで
##1.ローカルリポジトリ作成
```
git init
(.gitが作成される)
※リポジトリを作るディレクトまでcdコマンドで移動して行ってください。
```

##2.ステージングする
```
git add ファイル名
※git add --allだと全てのファイルをステージング
```

##3.コミットする
```
git commit -m "コミットメッセージ"
※-m がない場合エディタが開くのでコミットメッセージを書いて閉じると良い
```

##4.コミットの履歴を見る
```
git log 
```

##ファイルの状態を確認したい
```
git status
※add、commitされているか確認できる
```

##修正前後の差分を確認
```
git diff
```
GoogleColaboratoryでMeCabとmecab-ipadic-NEologdを使う

# この記事の内容
GoogleColaboratoryのnotebookで以下を行う
・MeCabをインストールして使う（No module named 'MeCab'への対応）
・mecab-ipadic-NEologd をインストールして使う

# MeCabをインストールして使う
MeCabとは
　オープンソースの日本語形態素解析エンジン。
　http://taku910.github.io/mecab/
GoogleColaboratoryでMeCab（テキストの形態素解析をするライブラリ）をインストールして
いざMeCabを使おう（import MeCabしよう）とすると、
ない（No module named 'MeCab'）となる。
これは、ライブラリがインストールされた場所が、pythonがライブラリを探しにいく先に含まれていないことから起きている。
この場合は、ライブラリをインストールした場所をsys.pathに追加すればよい。
※これは他のライブラリでno moduleになった場合についてもいえる。

・まずMeCabをインストール
!apt install aptitude
!aptitude install mecab libmecab-dev mecab-ipadic-utf8 git make curl xz-utils file -y
!pip install mecab-python3==0.7

・インストールしたMeCabの場所を確認
!pip show mecab-python3
⇒　Locationの行に、以下のようにして場所が表示される
　　Location: /usr/local/lib/python3.7/dist-packages

・パスを追加
import sys
sys.path.append("/root/.local/lib/python3.7/site-packages")

・MeCabをインポート
import MeCab

・以下のようにしてMeCabを自由に使う
tagger = MeCab.Tagger("-Owakati")
sample = "今日はいい天気ですね"
print(tagger.parse(sample))

# mecab-ipadic-NEologd をインストールして使う
mecab-ipadic-NEologd とは
　日本語形態素解析辞書で、MeCab で使える。
　週2回以上更新されていて新語・固有表現に強く、語彙数が多い。
　https://github.com/neologd/mecab-ipadic-neologd
で、MeCabからこれを使う方法。

・mecab-ipadic-neologdをインストール
!git clone --depth 1 https://github.com/neologd/mecab-ipadic-neologd.git
!echo yes | mecab-ipadic-neologd/bin/install-mecab-ipadic-neologd -n -a

・mecab-ipadic-neologdがある場所を確認
!echo `mecab-config --dicdir`"/mecab-ipadic-neologd"
⇒　以下のように場所が表示される　
　　/usr/lib/x86_64-linux-gnu/mecab/dic/mecab-ipadic-neologd

・MeCabでmecab-ipadic-neologdをパス指定して読み込み
tagger  = MeCab.Tagger('mecab -d /usr/lib/x86_64-linux-gnu/mecab/dic/mecab-ipadic-neologd')


以上です。
堕落したYoutubeのアルゴリズムを自動で再教育する

私の周りにYoutubeに表示される動画がどんどん堕落していって困っている人がいます。私も頭が堕落しているので放っておくと勉強のために見ているYoutubeがどんどん娯楽専用になってきてしまいます。Youtubeには良質な教育コンテンツがたくさんあるのに、それを見られるかもしれなかった時間がエンターテインメントに消費されるのはもったいないことだと思います。これをなんとかしようと思います。

#結果
<iframe width="560" height="315" src="https://www.youtube.com/embed/Rdw7ftSRfM8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


#ソース
pip install pyautogui

```python:sensei.py
import pyautogui
import time

def setup():
    print("セットアップを開始します。")
    x = input("検索バーにカーソルを当ててEnterを押してください")
    position_searchbar = pyautogui.position()
    x = input("検索ボタンにカーソルを当ててEnterを押してください")
    position_searchButton = pyautogui.position()
    x = input("一番上に出てくる動画にカーソルを当ててEnterを押してください")
    position_video = pyautogui.position()
    return position_searchbar, position_searchButton, position_video

def search(word,position_searchbar, position_searchButton, position_video):

    pyautogui.click(position_searchbar) #検索バークリック
    #検索バーの前回の入力を消します。
    pyautogui.hotkey('ctrl', 'a')
    pyautogui.press("backspace")
    pyautogui.write(word)
    pyautogui.click(position_searchButton) #検索ボタンクリック
    time.sleep(2) #検索結果読み込み待ち
    pyautogui.click(position_video) #一番上の検索結果をクリック

def main():
    words = ["Technology", "Programming", "Maths", "Science", "Politics", "Economics","Kotlin", "Mathematics", "BBC News"]
    a,b,c = setup()
    for word in words:
        search(word,a,b,c)
        time.sleep(3) #動画を見る時間
if __name__ == "__main__":
    main()
```

シンプルに目的が達成できました。変数wordsのリストを自分の勉強したかったり興味があるものに変更してください。
typescriptでimportとexportを使う

# ファイル分割するときにimport,exportを使おうとしたらハマった

## moduleの違い
es6の書き方に慣れていたため，importとexportを使って実装したい...

```TypeScript:export.ts
export ClassName {
    〜
}
```

```TypeScript:import.ts
import { ClassName } from "./export.js";
```

よし，コンパイルだ!!  

```
Uncaught ReferenceError: exports is not defined
```
ブラウザ上でこんなエラーが出る．  

調べてみるとCommonJSモジュールの問題だと分かったので，moduleを「ES6」に変更  

[【TypeScript】モジュール分割で起きたエラーを調べる（CommonJSが原因）](https://www.i-ryo.com/entry/2020/07/14/072538)
> exports is not definedエラーはCommonJSが原因  


```json:tsconfig.json
"module": "CommonJS",
↓
"module": "ES6",
```
こんな感じで変更してコンパイルされているのを確認し，ページをリロード  

そしたらまたこんなエラーが出た

```
Uncaught SyntaxError: Cannot use import statement outside a module
```

## ブラウザ上でモジュールを使う

これについて調べてみると，問題はモジュールをブラウザ上で使う際にscriptタグの中に

```HTML
<script type="module"></script>
```
を追加しなければならないことがわかった．  

[MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules)
> 最初に type="module" を script 要素に含めることで、そのスクリプトがモジュールであることを宣言します。


これを追記して再チャレンジ  

そしたらまたまたエラーが出た  

```
Access to script at 'file:///Users/~/import.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
index.html:7 GET file:///Users/~/export.js net::ERR_FAILED
``` 

## moduleをブラウザで使うときはhttp通信じゃないといけない  

上記のエラーの内容はHTTP通信しなさいということだったのでローカルサーバーを立ち上げてみた．  

今回は簡単に「[serve](https://www.npmjs.com/package/serve)」を使ってみる.  
  
`npm install -g serve`  
でインストール  
`serve`  
でローカルサーバー立ち上げ  

これで立ち上がったローカルサーバーにアクセスしたら，なんとか成功！！

# まとめ  
typescriptでimport,exportを用いてファイル分割をしたいときには
- ES6モジュールを使う
- scriptタグの中にtype="module"を追記
- ローカルサーバーを立てる
Pythonで階層クラスタリングしデンドログラムを表示

# はじめに
クラスタリングといえば、kmeansが有名であるが、クラスタ数を事前に決めておく必要があることや、分割されたクラスタ間の関係が分かりにくいという欠点があげられる。

このデメリットを解消する手法として階層クラスタリングがある。この手法、scikit-learn には標準で搭載されていないと思い込んでいたのだがこの度あるということが分かった。その名もAgglomerativeClustering。早速使ってみたので紹介したい。

本記事では階層クラスタリングやデンドログラムの詳細については説明はしないので、詳しくは他のサイトを見てほしい。

# 環境
- scikit-learn 0.24.2

# まずはクラスタリング
まずは通常のクラスタリングを実施してみる。

### 必要モジュールのインポート

必要そうなモジュールを適当にインポート

```python
import numpy as np
import pandas as pd
from matplotlib import pyplot as plt
from scipy.cluster.hierarchy import dendrogram
from sklearn.datasets import load_iris
from sklearn.cluster import AgglomerativeClustering
```

続いてクラスタリングの実施。今回10クラスタに分割するとする。
ちなみに target_scaling という変数にスケーリング後のデータ(全1272件)が格納されているという想定だ。

```python
model = AgglomerativeClustering(affinity='euclidean', 
                                linkage='ward', 
                                n_clusters=10)
model = model.fit(targets_scaling)
```

結果を見てみよう。modelのlabels_という変数に、各データに割り当てたクラスタの番号が配列で格納されている。

```python
print(model.labels_)
array([1, 1, 9, ..., 2, 2, 1], dtype=int64)
```

集計してみると、確かに全1272件のデータが10個のクラスタに割り振られていることが分かる。

```python
np.unique(model.labels_, return_counts=True)
(array([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], dtype=int64),
 array([285, 321, 118,  56,  63,  44,  12,  37,  52, 284], dtype=int64))
```

# デンドログラムの表示
階層クラスタリングのメリットは、クラスタの関係を可視化できることである。
早速デンドログラムで可視化してみよう。デンドログラムはscipyの関数を使って表示することができる。

## デンドログラム表示関数の準備
まずはデンドログラムを表示する関数を準備しよう。これはscikit-learnの例をそのまま使っている。

```python
def plot_dendrogram(model, **kwargs):
    counts = np.zeros(model.children_.shape[0])
    n_samples = len(model.labels_)
    for i, merge in enumerate(model.children_):
        current_count = 0
        for child_idx in merge:
            if child_idx < n_samples:
                current_count += 1 # leaf node
            else:
                current_count += counts[child_idx - n_samples]
        counts[i] = current_count

    linkage_matrix = np.column_stack([model.children_, model.distances_, counts]).astype(float)
    
    dendrogram(linkage_matrix, **kwargs)

```

先のクラスタリング結果をこの関数を与えればよいのだが、デンドログラム表示関数では全データの距離計算が必要となる。

全データの距離計算を行うためには、以下のようにクラスタ数を指定せずにクラスタリングを行う必要がある。

```python
model = AgglomerativeClustering(affinity='euclidean', 
                                linkage='ward', 
                                distance_threshold=0,
                                n_clusters=None)
model = model.fit(targets_scaling)
```

この状態で、デンドログラム表示関数を呼び出すと、無事デンドログラムが表示される。


```py
plot_dendrogram(model, truncate_mode='lastp', p=10)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329816/41bcb0fc-4081-299f-c4ae-82dd39b70d94.png)

素晴らしい。10個のクラスターの関係が**一目瞭然**である。
ちなみにグラフ中の()は、各クラスターの要素数を示している。このデータを手掛かりに、```model.labels_```　で得られるクラスタとの紐づけを行ってほしい。

なお、```plot_dendrogram 関数``` の引数```p```でデンドログラムのクラスタ数を変更できるため、この```p```を変えつつデンドログラムを見ながら最適なクラスタ数を決めてもよいだろう。

# 参考
- https://scikit-learn.org/stable/modules/generated/sklearn.cluster.AgglomerativeClustering.html