OmniAICreator/Qiita-1.07M huggingface dataset:
[Automator]複数のファイルの名前を時間順の連番に一括変換する

#はじめに
最近ではコロナウイルスの影響により、大学が超高額動画サブスクリプションと化しているとの話を耳にします。
私の通っている大学では全てがオンライン授業とまではいかないのですが、依然としてオンライン授業が多いのが現状です。

オンラインによる授業はスライド形式で行われることが多いのですが、中には~~不親切なことに~~その資料を配ってくれない先生などもいます。
きちんとメモを取ったりはしているつもりですが、自分は念の為必要なスライドのスクショを撮っています。

Macでのスクショは、`スクリーンショット 2021-04-21 23.45.12.png`みたいな名前になると思うのですが、をスクショを撮った順番に連番のファイル名に変換して管理したいと思いました。


そこで利用するのが、Macに標準で搭載されている**Automator**というアプリです。
今回はこのAutomatorを使用して、複数のファイルの名前を時間順の連番に一括変換する手順を紹介します。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">[Mac]オンライン授業で溜まった沢山のスクショを一括で連番の名前に変更する。<br><br>標準で入ってるAutomatorで出来る <a href="https://t.co/BsCI1Uzbe6">pic.twitter.com/BsCI1Uzbe6</a></p>&mdash; M (@p_x9) <a href="https://twitter.com/p_x9/status/1387371535371886594?ref_src=twsrc%5Etfw">April 28, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#本編
##1. Automatorを開く
初期だとその他の部分にロボットみたいなアイコンのアプリがあると思うのでそれを開き、任意のフォルダで新規作成を押します。

##2. 書類の種類を選択する。
こんな画面になると思います。今回はクイックアクションとして作成したいのでこれを選択します。
![スクリーンショット 2021-04-28 20.57.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377767/73d0ee00-a2a7-dbbe-f162-48702b47310e.png)

##3.　初期設定
この部分では受け取る内容などの指定ができます。今回は適当にファイルを選択しても大丈夫なように全てのファイルを受け入れた後で、画像ファイルだけ抽出するという形にします。
`イメージ`項目と`カラー`項目はクイックアクションの部分のアイコンになるので好きに設定してください。

![スクリーンショット 2021-04-28 21.00.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377767/279e2cf8-f75a-fda9-2f41-d542e56bc722.png)

##4. 画像ファイルのみ抽出
別のファイルが混じっていたら除外するようにフィルタを設定します。
以下のように設定しました。スクショは`png`なので拡張子でフィルタしても良いかもです。

![スクリーンショット 2021-04-28 21.04.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377767/2fb89204-cb2f-9aba-3409-7cd4d615edb8.png)

##5. 並べ替え
画像の順番を並べ替えます。今回はスクショを取った順番にしたかったので以下のように設定しました。
![スクリーンショット 2021-04-28 21.06.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377767/3057ae72-5ec0-7c01-c48c-016b80b28ef0.png)

##6. 名前変更
スクショのファイル名変更です。
`Finder項目の名前を変更`を使用するのですが、これまでと同じように追加しようとすると以下のようなダイアログが表示されます。
![スクリーンショット 2021-04-28 21.09.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377767/38d507ba-178e-5494-9142-c9e987c0a8af.png)

追加を押すとこれらファイルのコピーが新たに作成されてそのコピーに対しリネームが行われるようになります。
私は大元のファイル名を変えて欲しいので`追加しない`を選んでいますが、各自判断してください。

数字のみの連番にしたいので以下のように設定して名前変更しています。
一番下の例のところでどんなものか確認出来るのでお好きなようにカスタマイズしてください。
![スクリーンショット 2021-04-28 21.12.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377767/d19247ef-d1ea-3c65-0884-86f2b48cd22f.png)

##7.　保存
保存を押すとクイックアクションの名前が聞かれます。これが実際に表示される名前なのでよく考えて決めましょう。

##8. クイックアクションの有効化
システム環境設定->拡張機能->Finder の部分の先ほど作ったクイックアクションが表示されていると思うので有効化してください。

##9. 終わり

#拡張機能の削除
システム環境設定->拡張機能->Finder　から削除したいクイックアクションを右クリックすると、Findarに表示というのが出てくるのでそのファイルを削除すれば消せます。

#おわりに
読んでいただきありがとうございました。
直接的なプログラミングとは少しずれるのでQiitaに投稿するかは悩みましたが、アルゴリズム的な考え方につながる遊びにも良いツールであると感じたので投稿しました。iOSのショートカットアプリもプログラミングの導入としてもとても楽しいものだと感じています。

少し記事の内容が前後しましたが、前記事にありますSwiftで音声の逆位相化については次記事で投稿します。
ありがとうございました。
VBAでPython3

まずはpythonの用意

純正でも、コンダでも、embedでも
pythonの実行環境を作る

次に、VBAの準備
標準モジュールに

```vba:python実行するモジュール
Option Explicit

' シェルの実行
Public Function run(ByVal cmd As String) As Variant
    Dim WSH, wExec As Object
    Set WSH = CreateObject("WScript.Shell")
    
    '実行
    'Set wExec = WSh.Exec("%ComSpec% /c " & cmd)
    Set wExec = WSH.exec(cmd)
    
    '実行結果
    Dim Result, Err
    wExec.StdIn.WriteLine "echo 処理中"
    Result = wExec.StdOut.ReadAll
    Err = wExec.StdErr.ReadAll
    If Err <> "" Then
        Debug.Print "Error:" & Err
    End If
    
    '解放
    Set wExec = Nothing
    Set WSH = Nothing
    
    run = shape(Result)
End Function

' レスポンスの整形
Public Function shape(ByVal v) As Variant
    If v = "" Then End
    
    '整形
    Dim str_lines As Variant

    
    '引数を行毎見ていって、空白以外を再編集する
    If UBound(Split(v, vbLf)) > 0 Then
        str_lines = Split(v, vbLf)
    ElseIf UBound(Split(v, vbCr)) > 0 Then
        str_lines = Split(v, vbCr)
    ElseIf UBound(Split(v, vbCrLf)) > 0 Then
        str_lines = Split(v, vbCrLf)
    End If
    
    
    ' 返却用に空白なしリストにする
    Dim res_list() As Variant
    Dim i, res_cnt As Long
    res_cnt = 0
    
    For i = 0 To UBound(str_lines)
        If str_lines(i) <> "" Then
            ' 行末の改行コードを飛ばしつつリストに追加
            ReDim Preserve res_list(res_cnt)
            res_list(res_cnt) = Left(str_lines(i), Len(str_lines(i)) - 1)
            res_cnt = res_cnt + 1
        End If
    Next i
    
    shape = res_list
End Function

' pythonの実行
Public Function run(ByVal interpreter_path As String, ByVal source_path As String, Optional ByVal args As String) As Variant
    If IsMissing(args) Then
        run = shell.run(interpreter_path & " " & source_path)
    Else
        run = shell.run(interpreter_path & " " & source_path & " " & args)
    End If
End Function
```

```vba:pythonを呼び出す（今回はボタン）
Private Sub CommandButton1_Click()
    Dim py, src, arg
'    py = com.desktop_path & "\..\emb-python\python-3.9.4-embed-win32\pythonw"
    py = com.desktop_path & "\..\miniconda3\pythonw"
    src = "-c"
    arg = """exec(""""" _
        & "from datetime import datetime" & "\n" _
        & "import time" & "\n" _
        & "for i in range(5):" & "\n" _
        & "\t" & "print(datetime.now())" & "\n" _
        & "\t" & "time.sleep(1)" & "\n" _
        & """"")"""
    
    Dim res
    res = python.run(py, src, arg)
    
    Dim i
    For i = 0 To UBound(res)
        Debug.Print res(i)
    Next i
End Sub
```
py：pythonの実行ファイル（pythonだとコンソールが表示される）
src：pyファイル
arg：コマンドライン引数など

上のはｃコマンドを使っての実行
Railsチュートリアルまとめ 第3章

# 第3章について
第3章では簡単なテストを実行しリファクタリングを行う。Railsではデフォルトでminitestがあるので`rails test`コマンドですぐにテストを実行することが可能。

# 目次
[1.railsコマンドの短縮形](#1-railsコマンドの短縮形)
[2.rails generateについて](#2-rails-generateについて)
[3.httpメソッドについて](#3-httpメソッドについて)
[4.テストについて](#4-テストについて)
[5.DRY](#5-dry)
[6.guard](#6-guard)

#1. railsコマンドの短縮形
rails generateやrails serverなどのコマンドには短縮形がある。
`rails server` → `rails s`
`rails console` → `rails c`
`rails generate` → `rails g`
`rails test` → `rails t`
`bundle install` → `bundle`

#2. rails generateについて
例えばrails generateコマンドでコントローラを生成すると自動的に関連ファイル(viewやテスト、ルートなど)を自動生成する。この機能は便利ではあるが、コントローラを削除したくなった場合にコントローラだけではなく関連ファイルも削除しなくてはならない。そういった場合に`rails destroy`コマンドを実行すると関連ファイルも含めて削除してくれる。モデルの作成についても同様。

#3. httpメソッドについて
httpメソッドはブラウザからサーバに送られるリクエストのこと。
主に以下の４つがよく使われる。

* GET ... 最も使われるリクエストでweb上のデータを取得する時に使われる。
* POST ... 何らかのリソースを生成する時や更新する時によく使われる。
* PATCH ... リソースを更新する時に使われる。
* DELETE ... リソースを削除する時使われる。

ちなみに一般のブラウザではGETとPOSTしかサポートしておらずPATCHとDELETEに関してはJavascriptなどであたかもPATCHやDELETEリクエストであるかのように偽装、送信して利用する。

#4. テストについて
テストは開発においてバグ追跡やリファクタリングの観点から重要であるが、テストを行う上で「テスト駆動(TDD)」にするか「一括テスト」にするか決めるのに以下のような基準で判断すると良いらしい。

***テストを先に書く場合***
* アプリケーションのコードよりもテストこーどの方が短くシンプルになる場合
* セキュリティ周りのエラーが発生した場合
* バグを見つけてバグを再現する場合
* リファクタリングする時

***テストを後に書く場合***
* 動作の仕様が固まりきっていない場合
* すぐに変更しそうなコードに対するテスト

railsではデフォルトでminitestというテストが有効になっている。
rails testでtestディレクトリ下に書かれているtest.rbファイルに基づいてテストを実行する。
実行時に結果が失敗するとエラーメッセージが表示されるのでそれを参考にコードの修正点を探す。

#5. DRY
DRYは"Don't Repeat Yourself"の略でRubyの原則。
情報の繰り返しを避けてよりコードや仕様を明確にするべし。

#6. Guard
Guardを使うとシステムの変更を監視し、テストを自動的に実行させることができる。
`bundle exec guard init`コマンドを実行すると統合テストとビューが更新される。その後Guardfileをrailstutorial.org/guardfileを参照し編集し`bundle exec guard`でguardで自動テストを実行する。
この際、ターミナルを占有するので新しいターミナルを開いて実行した方が良い。

# 参考文献
[PUTかPOSTかPATCHか？](https://qiita.com/suin/items/d17bdfc8dba086d36115)
[get,post,delete,putそしてmatchでルーティングを頑張る
](https://cre8cre8.com/rails/get-post-delete-put-match-routes.rb.htm#hl4)
[DRY原則をもう一度 -コンカレント・エンジニアリング-](https://qiita.com/Koki_jp/items/d5f1b5f277b581888a1f#:~:text=%E4%BF%A1%E9%A0%BC%E6%80%A7%E3%81%AE%E9%AB%98%E3%81%84%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2,%E3%81%AB%E8%A8%98%E8%BF%B0%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%A7%E3%81%99%E3%80%82)
sedコマンドと拡張正規表現2

# 正規表現のパターン指定をもっと完結にしたい
※「シス環系女子 season2 第8話」の備忘録です。

## sedコマンド便利なオプション
以下、テストデータ

```
$ cat test.log 
1,hoge,hogehoge
2,fuga,fugafuga
3,piyo,piyopiyo
4,foo,foofoo
5,bar,barbar
6,BAR,barBAR
7,baz,bazbaz
```

- オプションg: global replacement.1行内で該当する文字列全てを変換させる。

```
$ cat test.log | sed -e "s/bar/bora/g"
1,hoge,hogehoge
2,fuga,fugafuga
3,piyo,piyopiyo
4,foo,foofoo
5,bora,borabora
6,BAR,boraBAR
7,baz,bazbaz
```

- オプションi: ignore case.大文字・小文字の違いを区別しない。

省略。
※なんとmac os では「i」オプションが使えないらしく、MacPortsまたはHomeBrewからgsedをインストールしてから、エイリアスsed='gsed'作成する必要があるらしい。（以下参照元）
https://codehero.jp/macos/4412945/case-insensitive-search-and-replace-with-sed

## その他便利な拡張正規表現

- ブラケット:

例えば以下は同じ意味になる。

```
"s/(A|B|C|D|E|F/\1-0/"

"s/([A-F])/\1-0/)
```

以下も全て同じ意味。

```
"s/(A|B|C|G|H|N|M|O/\1-0/"

"s/([A-C]|G|H|[N-O])/\1-0/)

"s/([A-CG-IN-O])/\1-0/)

```
【初心者でもわかる】CSSで「ひし形」「角丸のひし形」の作り方

# どうも7noteです。CSSでひし形を作ります。

CSSだけで様々な図形を作れるとなにかと便利です。
ひし形の作り方を紹介していきます。

![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/f96bfee4-71bb-0763-225b-ab5e48f987f9.png)

トランプのダイヤにも使えますね。

## ソース

```html
<span class="diamond"></span>
```

```style.css
.diamond {
  width: 30px;
  height: 30px;
  background: #f00;        /* 背景色の場合、指定 */
  border: 1px solid #000;  /* 線描画の場合、指定 */
  border-radius: 5px;      /* 角丸にしたい場合、指定 */
  display: inline-block;
  transform: rotate(45deg)
  skew(
    calc((90deg - 60deg) / 2), /* ダイヤ型の角度を変更する */
    calc((90deg - 60deg) / 2)  /* ダイヤ型の角度を変更する */
  );
}
```

## まとめ

四角形を作成し、transformで回転&傾斜をつけてダイヤ型になります。
結構簡単に作れるので疑似要素として表示させて組み合わせたり、2つ使ってキラキラさせた表現を作ったりもできそうですね。

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
C++入門 AtCoder Programming Guide for beginners (APG4b)

EX23 - 最頻値
https://atcoder.jp/contests/apg4b/tasks/APG4b_bz

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1112433/f710a920-25bc-79ec-50c2-8e30933e2d39.png)

連想配列の練習問題。
map関数を使う。

map関数の使い方

```php
map<"型(int)", "型(int)"> "配列名(A)" ; //関数宣言
A["番号(4)"]="入力値(57)"; //入力
A["番号(2)"]="入力値(31)"; //入力
int a=A[2]; //呼び出し　aに31が代入される
int a=A[10]; //宣言してない配列呼び出し　A[10]=0で初期化され、a=0が代入されるはず
```
バケット法を関数でやれる。
今回の問題ではA[i]の数値を番号としてラベルし、その時の値をインクリメントするようにする。




```php
#include <bits/stdc++.h>
#include <math.h>
using namespace std;
 
int main() {
  long long N;
  long long A[110000];
  int max=0;
  int ans;
  map<long, long> B ;
  cin>>N;
  for(int i=0;i<N;i++){
      cin>>A[i];
      B[A[i]] = B[A[i]]+1;  //A[i]の値をB配列に入力し、カウントアップする
      if(max<B[A[i]]){
          max=B[A[i]];  //最大値の個数を記録する。
          ans=A[i];  //最大値を記録する。
      }
  }
cout<<ans<<" "<<B[ans]<<endl;
}

```
【Rails】carrierwaveで画像アップロードするとクラッシュした

### 環境

MacOS
Rails 6.1.3
carrierwave
rmagic

# Problem

いつものように画像をアップロードして登録しようとするとおびただしい数のエラーが表示されてrails serverが落ちました。railsでクラッシュしたのは初めてです。

```
...
/Users/xxx/Projects/xxx/vendor/bundle/ruby/3.0.0/gems/carrierwave-2.2.1/lib/carrierwave/processing/rmagick.rb:352: [BUG] Segmentation fault at 0x000000000000332e
ruby 3.0.0p0 (2020-12-25 revision 95aff21468) [x86_64-darwin19]

-- Crash Report log information --------------------------------------------
   See Crash Report log file under the one of following:
     * ~/Library/Logs/DiagnosticReports
     * /Library/Logs/DiagnosticReports
   for more details.
Don't forget to include the above Crash Report log file in bug reports.

-- Control frame information -----------------------------------------------
...
[IMPORTANT]
Don't forget to include the Crash Report log file under
DiagnosticReports directory in bug reports.
```

rmagickでエラーが出てるので画像をリサイズする工程でうまく行ってないみたいです。

# Solve

原因には心当たりがありました。
最近「brew upgrade」を実行した際に「imagemagick@6」がアップデートされたのです。
rmagickとimagemagickは関係しています。
恐らくimagemagickのアップデートの影響だと思われます。試行錯誤した結果以下で落ち着きました。

```sh
# 6系を削除して7系を入れます
brew uninstall imagemagick@6
brew install imagemagick

# 一応gemも総入れ替えしました
rm Gemfile.lock
rm -rf vendor/bundle/
bundle install
```

6系じゃないと動かない的な記事を見ましたが、今や7系でもちゃんと動くみたいです。
これで今まで通り画像をアップロードしてリサイズする事ができるようになりました。
バージョンアップで今回のようなことが起きないようにバージョンを固定したほうが良いかもしれないですね。

```sh
# アップデートされないようにフリーズしておきます
brew pin imagemagick
```

# Summary
かなりハマったのでどなたかの助けになれたなら幸いです。
【AWS】VPCの概要

#プログラミング勉強日記
2021年4月28日
[前の記事](https://qiita.com/mzmz__02/items/bc5e78ff2c19f29430e5)でもVPCについて触れているが今回はよりVPCの理解が深まったので、まとめる。

#VPCとは
　一言でいうと、AWSクラウドのネットワークからユーザ専用の領域を切り出して作る仮想ネットワーク。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/efeecf0d-479d-f8b3-0aa8-684b565023ad.png)

　AWSクラウドのネットワーク空間に様々なネットワーク機器やネットワークが使われている。その中に自分専用のAWSクラウドを利用する領域としてVPCを設定する。まず、AWSのアカウントを作ったらVPCがデフォルトで設定される。

#VPCの特徴

- 任意のIPアドレス範囲を選択して仮想ネットワークを構築する
- サブネットの作成・ルートテーブルやネットワークゲートウェイの設定など、仮想ネットワーキング環境を完全に制御できる
- 必要に応じてクラウド内外のネットワーク同士を接続できる
- 複数の接続オプション(インターネット経由・VPN/専用線(Direct Connect)が利用できる
- 単一のVPCを構築すると単一のAZの範囲に設定される
- 同じリージョン内ではVPCは複数のAZにリソースを含められる


#サブネットとVPC
　VPCとサブネットの組み合わせでネットワーク空間を構築する。VPCはVPCをさらに小さい単位に区切る仕組みであるサブネットとのセットが必須になる。サブネット側がAZとマッピングされて1つのAZと1つのサブネットが紐づいて構成される。デフォルトでVPCを作っても1つサブネットがデフォルトで構成される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/5ec1d327-0e65-b961-0091-93f8fc462965.png)
AWS Organizationsで組織にアカウントを追加しスイッチロールする

1. AWS Organizationsから「AWSアカウントを追加」をクリック

2. アカウント名、メールアドレスを入力する

2. IAMロール名はデフォルトのままで問題はない

4. 「AWSアカウントを作成」をクリックしてしばらく待つとアカウントが作成される

5. IAMから以下のようなポリシーを作成してスイッチロールを許可したユーザーにアタッチする

    ```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "",
            "Effect": "Allow",
            "Action": "sts:AssumeRole",
            "Resource": "arn:aws:iam::{アカウントID}:role/{IAMロール名（デフォルトであればOrganizationAccountAccessRole）}"
        }
    ]
}
    ```

6. コンソールの右上あたりにあるメニューの「ロールの切り替え」をクリック

1. アカウント追加時の「アカウント名」「IAMロール名（デフォルトであればOrganizationAccountAccessRole）」、表示名は適当に入れて「ロール切り替え」をクリックする

1. 追加したアカウントに切り替わっているはず
WSL2上でyoloを動かしてみる

# TL;DR
練習がてらv2でもv3でもない無印yoloをWSL2上で動かしてみました。
以下の記事とサイトを参考にさせていただきました。

https://qiita.com/daiarg/items/a922c242af9bb76eb470


https://modelzoo.co/model/yolo-tensorflow

# モチベーション
なんか画像系AIさわってみたい。でもGPUは極力使いたくない。
とりあえず流行りのyoloにさわってみよう。

# コンテナ用意
docker-composeで用意しました。

```dockerfile:Dockerfile
FROM python:3.7-buster
WORKDIR /opt/work
```

```yml:docker-compose.yml
version: '3'
services:
  yolo:
    build:
        context: .
        dockerfile: Dockerfile
    container_name: 'python371'
    tty: true
    volumes:
      - ./work:/opt/work
```

# コンテナ環境の整備
コンテナに入ったらひたすらコマンドを叩きます。

```bash
apt update && apt -y upgrade
apt install -y libgl1-mesa-dev git
git clone https://github.com/thtrieu/darkflow.git
pip install --upgrade pip
pip install numpy -U
pip install opencv-python==3.4.5.20
pip install tensorflow==1.15
pip install Cython
cd darkflow
python setup.py build_ext --inplace
pip install -e .
pip install .
mkdir bin
```

# weightsを用意
上の作業で作成したbin/に以下のyolo.weightsを設置します。
GoogleDriveからweightsをDLLします。

https://drive.google.com/file/d/0B1tW_VtY7oniTnBYYWdqSHNGSUU/view?usp=sharing


# 動作確認
とりあえず動くかだけ確認します。

```python
from darkflow.net.build import TFNet
import os
import cv2

os.chdir('darkflow')

option = {"model": "cfg/yolo.cfg", "load": "bin/yolo.weights", "threshold": 0.1}
tf = TFNet(option)

imgcv = cv2.imread("/opt/work/src/hogehoge.jpg")

print(tf.return_predict(imgcv))
```

# 結果
無事動作を確認できました。
別のプログラムで人を検出するところまでは確認できました。
今回はここまでとして、具体的に動かす部分は別途試していきたいです。

# 最後に
学習済みモデルでも結構色々遊べるみたいです。
学習者側からすると嬉しい限りです。

# 注意および免責事項
本記事の内容はあくまで私個人の見解であり、所属する組織の公式見解ではありません。
本記事の内容を実施し、利用者および第三者にトラブルが発生しても、筆者および所属組織は一切の責任を負いかねます。
#csharp　#programming　#dotnetframework　DataGridViewの編集不可(=ReadOnly)のバグの対処方法

本内容を利用した場合の一切の責任を私は負いません。

再現条件が稀で、影響も大きくなく、自分のバージョンが古くて今は起こらないかもだけど一応書いておく。

#バージョン
　.NET Framework 3.7.2
　Visual Studio Community 2015

#再現手順
1. Windowsフォームアプリケーションのプロジェクトを作ってDataGridViewを配置する。
1. デザイナ上のDataGridViewの編集有効チェックを外れにする。
1. デザイナ上でチェックボックスやテキストボックスの列を追加する。
1. ビルドする。(これは関係あるかは不明。)
1. デザイナ上のDataGridViewの編集有効チェックを入りにする。
1. Formのコンストラクタ等に適当に行を追加する処理を入れる。
1. ビルドして実行する。
1. 編集有効設定にも関わらず、編集できない。
1. DataGridViewや各列のReadOnlyプロパティもプロパティウィンドウ上ではFalseになっている。

#対処方法
いろいろ方法はあると思う。
自分がやったのは、改めて列を追加し直した。(一旦列を消す。)
DataGridViewを配置し直しても対処できると思う。
うろ覚えだが、見た目FalseになってるReadOnlyプロパティを一旦Trueにして保存し、またFalseに戻して更新させる方法でも対処できたような気もする。
【メモ】last-of-type が効かない場合の解決法

特定要素の最後だけに設定がしたい。
`div` や `section` が並んでいる中で、並んでいる特定のclassの最後にだけ設定を追加する方法です。

####例：

```html
<main>
  <section class="A">あああ</section>
  <section class="B">いいい</section>
  <section class="B">いいい</section>
  <section class="B">いいい</section>
  <section class="C">ううう</section>
</main>
```

のように、setionが並んでいて、各sectionには `margin-bottom:60px;` を付けています。
しかし、section:B が連続する場合には、最後の B だけに margin を付けたくなります。（なりました）
そこで...

####:last-child

```css
.B:last-child {
  margin-bottom:60px;
}
```

はい。これでは無理ですね。さすがに私でも知っています。
では次は...

####:last-of-type

```css
main section.B:last-of-type {
  margin-bottom:60px;
}
```

実はちょっと期待しましたが、これは意味が違うので無理だということが分かりました。

**（誤）並んだ section の中の 最後の B** 
と思ってしまいましたが...
**（正）並んだ section の最後のclassが B だった場合**
だったのですね。。。
これはこれで、別の場所で使えそうなので覚えておきます。

####隣接設定

次に登場したのが隣接設定でした。
早速試してみると、割とそれっぽくなりました。

```css
main .B + .B {
  margin-bottom:60px;
}
```

割といい感じ？と思いましたが、2番目と3番目に margin が付いてしまいます。
そりゃそうですよね。。。

いよいよ手詰まりかと思いましたが、少し視点を変えてみました。
　

####隣接設定を次の要素に

つまり、
**.B に設定を付けるのが無理ならば、次に来る要素に設定を付けて代用すればいい！**
です。

```css
main .B + not(.B) {
  margin-top:60px;
}
```

こうすると、
.B には `margin-bottom` は付かず、
.B の次に来る要素が .B ではなかった場合、その要素に `margin-top` が付きます。
（この場合は C に margin-top が付く）
これなら次にくる要素が B 以外なら `margin-top` が付いてくれるので、見た目は同じになります。

以上になります。
まぁ、そこそこ力技な気もしますが、体裁は同じになりますので良しとしました。

#####■補足

CMSなどで、下の要素がある場合とない場合が発生するぞ！ 
という場合には、先ほど覚えておいた `last-of-type` を併用します。

```css
main .B + not(.B) {
  margin-top:60px;
}
main .B:last-of-type {
  margin-bottom: 60px;
}
```

こうすることで、最後の要素が B になった場合でも対応できます。
既存のアプリのstoryboardを分割する方法。(storyboard reference)

# 0. はじめに
こんな感じで、1つのstoryboardに複数のviewControllerが設置されているのは良くないので、これを分割することを考えます。おそらく実務とかでも分割するということで統一されているので、できるようになっておいて損はないはずです。
![スクリーンショット 2021-04-28 19.36.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/861241/8394401f-79cc-b74d-ff23-9e238ab8d3f8.png)


# 1. storyboard referenceを設置して、segueで接続
次のstoryboardファイルへの道しるべみたいなものです。
![スクリーンショット 2021-04-28 19.40.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/861241/240e7da1-28cb-06ec-4482-2eca2153a8bc.png)


# 2. 新しくstoryboardファイルを作成する
ここに分割する対象のviewControllerを設置します。storyboardフォルダ等を作成して、まとめておくと良いです。
![スクリーンショット 2021-04-28 19.42.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/861241/96578991-fe14-ed6a-30c8-f06a8596c012.png)

# 3. 分割したいviewControllerを、新しく作成したstoryboardファイルにコピペ！
左のリストから選択すると楽です。
コピーして
![スクリーンショット 2021-04-28 19.44.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/861241/f974f7a6-fcf1-8acf-ad6a-a1244d4e649a.png)
ペースト
![スクリーンショット 2021-04-28 19.45.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/861241/dfe994a0-9f80-b106-3ca4-587c91ad9dde.png)
コピペが終わったら、元のViewControllerは削除しても大丈夫です。

# 4. identifierなど、その他諸々の設定
segueのidentifierを設定してください。
![スクリーンショット 2021-04-28 19.49.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/861241/5373c18d-0bae-479a-8421-0699fc97dce6.png)
次に、最初に設置した、storyboard referenceのinspectorから、遷移したいviewControllerがあるstoryboardファイルを選択してください。storyboard referenceの見た目の少し変わるはずです。
![スクリーンショット 2021-04-28 19.49.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/861241/96a53be9-496b-25de-5d95-e2f75afdc3e5.png)
さいごに、遷移する先のstoryboardファイルのviewcontrollerのinspectorから、is initial view controllerにチェックを入れてください。これは新しいstoryboardに遷移したとしても、その中のどのviewControllerに移ればよいかを、xcodeがわからないためです。
![スクリーンショット 2021-04-28 19.51.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/861241/9fb8feff-b5b7-651c-865c-f9989ab93d07.png)
これでstoryboard referenceで遷移ができるようになりました！

# 5. 1-4を繰り返して、一つのstoryboardに一つのviewControllerが含まれるようにする。
これが完了すれば、だいぶスッキリして保守しやすくなるはずです。
何か質問あればコメントしてください！
html&css 謎の隙間や余白を消すために、cssでやったこと(メモ)

##まず何よりも先にGoogle Chromeのデベロッパーツールで調べてみる

##サイト全体の隙間を消すために試したこと
```css
body,html {
    margin: 0px;
    padding: 0px;
}

```

##画像の間にできた隙間を消すために試したこと
- `vertical-align: bottom;`
- `line-height: 1.0em;`

##その他いろんなパターンの時に試したこと
- `line-height: 0;`
- `margin: 0;`
- `padding: 0;`
- `font-size: 0;`
- `display: block;`

---
これらを親要素に指定するのか子要素に指定するのかによって結果も変わってくるので、そこらへんもいろいろ試してみるのが効果的かなと思います。
GitHubに謎のHTTPレスポンスヘッダが含まれている

# GitHub

なんとなくGitHubにアクセスしたところ、HTTPレスポンスヘッダに謎の文字列が含まれていることに気が付きました。

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/21745156-0b1f-eed9-c11c-4018662c8d01.png)

`permissions-policy: interest-cohort=()`


はい、これは[FLoCを拒否するという主張](https://qiita.com/rana_kualu/items/e470f0303e6b3a429c09#%E3%82%B5%E3%83%BC%E3%83%90%E5%81%B4%E3%81%A7%E6%8B%92%E5%90%A6%E3%81%99%E3%82%8B)です。
FLoCのRFCが[GitHub上に存在する](https://github.com/WICG/floc)という現実がとても味わい深いものがありますね。


# Permissions-Policy: interest-cohort=() Header added to all pages sites

非常に簡単にですが、[GitHubブログ](https://github.blog/changelog/2021-04-27-github-pages-permissions-policy-interest-cohort-header-added-to-all-pages-sites/)で触れられていました。

`github.io`以下の全てのページに、`Permissions-Policy: interest-cohort=()`のHTTPレスポンスヘッダが出力されるようになりました。
カスタムドメインを使っているサイトは、この影響を受けません。


# GitHubはMicrosoftの傘下にある

従って、この変更はMicrosoftの意向に沿っている、あるいは少なくとも公に反対しているわけではない、と考えるのが自然でしょう。

EdgeのFLoC対応については[曖昧な回答しか返さなかった](https://qiita.com/rana_kualu/items/e470f0303e6b3a429c09#edge)Microsoftですが、ここにきてFLoC反対の姿勢を明確に表したと言ってもいいのではないでしょうか。
Catallina から Big Sur へクリーンアップデートを行った際のメモ

## 概要
Catallina から Big Sur にクリーンアップデートした際に行ったこと・忘れていて困ったことのメモ

## データの退避
- 以下のファイルを NAS に退避
    - Clipy のスニペット
    - Documents 以下のファイルを圧縮したもの
    - `~/` においておいた `./zshrc` `command`(自作のコマンドが入ったフォルダ)
- Chrome のアカウントの同期設定がONになっていることを確認
- SmartGit で PUSH し忘れているブランチがないことを確認

### 忘れていたこと
- `~/.gitconfig` の退避を忘れていてやや困った
- rbenv の現在のバージョンをメモし忘れていた
- スマートメールボックスの分類条件をメモし忘れていた

## 初期化
- キーボードを有線で接続
- Macの電源を落とす
- 起動しすぐに `command` + `option` + `R` を長押し
- macOSユーティリティが立ち上がるのでディスクユーティリティを選択
- 内蔵ディスクの `Data` がついていない方を削除
    - **`Data` がついている方を削除しなかった**
        - TimeMachine から復元する場合には削除する必要があるらしい?
        - 削除しないように注意喚起する記事も見つかるためどちらが正しいか判断がついていない...
- ディスクユーティリティを閉じる
- macOSを再インストールする
    - クリーンインストール前に最新版に変更しておかなくても問題なく Big Sur をインストールできた
    - インストールに2時間くらいかかるので覚悟が必要
- インストール後無事立ち上がったら環境設定を行う


## 環境設定

### mac の環境設定
- 「環境設定」→「キーボード」→「キーボード」→「装飾キー...」で `Caps Lock` キーを　`command` キーに置き換え
- 「環境設定」→「マウス」→「ポイントとクリック」で「副ボタンのクリック」にチェック
- 「環境設定」→「デスクトップとスクリーンセーバ」→「スクリーンセーバ」→「ホットコーナー...」で左下を「画面をロック」に置き換え
- 「環境設定」→「ソフトウェアアップデート」で「Macを自動的に最新の状態に保つ」からチェックが外れていることを確認
    - 環境が勝手にアップデートされてチーム開発に支障がでないように

### zsh 関連
- Homebrew のインストール
- rbenv のインストール
- bundler のインストール
- `./zshrc` `command`(自作のコマンドが入ったフォルダ) をもとに戻す
- 自作のコマンドに対して権限を付与(`chmod 777 ~/commands/aaa`)


### アプリ関連
各種必要なアプリをインストール

- Xcode
- SmartGit
- Chrome
- Slack
- Android Transfer
- VSCode
- Office ソフト各種 （Office 365のWebサイトからDL）
- Clipy
    - 退避しておいたスニペットをインポート

### Git 関連
- SmartGit を立ち上げて環境設定
- Github にログインし必要なリポジトリをクローン
    - 新しいマシンでのログイン扱いとなるため2段階認証が必要
- あとはいつも通りの流れ
    - `fastlane match development --readonly` で証明書の取得
        - passphrase を忘れていたため困った


## 参考
- [Homebrewのインストール](https://qiita.com/zaburo/items/29fe23c1ceb6056109fd)
- [rbenvのインストール](https://qiita.com/TakahashiKat/items/7a45bbd5d0e675c1de3f)
- [MacOS Catalina BigSurのクリーンインストール手順を解説！ data は消すべき？](https://irilyuu.com/mac-ios/mac/macos-clean-instal/)
- [【ShellScript】zshでカスタムコマンドを追加する](https://qiita.com/m-inada0408/items/42aca1d89e4f473615a2)
[Kotlin]JSON文字列をMapに変換する

巨大なJSONを扱う必要があり、変換用のクラスを作るのが面倒でMapにしたかった時のメモ

JacksonのObjectMapperとTypeReferenceを使います

```kotlin
import com.fasterxml.jackson.core.type.TypeReference
import com.fasterxml.jackson.databind.ObjectMapper

val json = 巨大なJSON

// Json -> Map変換
val mapper = ObjectMapper()
val jsonMap: Map<String?, Any?>? = mapper.readValue<Map<String?, Any?>>(json, object : TypeReference<Map<String?, Any?>?>() {})

// Mapから値を取り出す
jsonMap?.get("取り出したいキー")
```

上記はJSONがこんな形の場合の例

```json
{
  id: 123
  user: "hoge"
}
```

jsonが配列に入ってる場合は

```json
[
  {
    id: 123
    user: "hoge"
  }
  {
    id: 456
    user: "fuga"
  }
]
```

こんな感じにします

```kotlin
val jsonMap: List<Map<String?, Any?>?> = mapper.readValue<List<Map<String?, Any?>>>(json, object : TypeReference<List<Map<String?, Any?>?>>() {})
```
RSpec のsystem spec 実行時にselenium でEnter キーの押下をシュミレートする

RSpec のsystem spec 実行時にselenium でEnter キーの押下をシュミレートする

# 環境

* macOS 10.15.6
* Ruby 2.5.7
* Rails 5.2.3
* rspec-rails 4.0.1
* capybara 3.32.2
* selenium-webdriver 3.142.7

# 参照

[Keyboard :: Documentation for Selenium](https://www.selenium.dev/documentation/en/webdriver/keyboard/)

[send\_keys\(special\)\-Ruby](https://www.seleniumqref.com/api/ruby/element_set/Ruby_special_send_keys.html)

[ruby on rails \- How to simulate pressing Enter in Rspec \- Stack Overflow](https://stackoverflow.com/questions/17542185/how-to-simulate-pressing-enter-in-rspec)

[使えるRSpec入門・その4「どんなブラウザ操作も自由自在！逆引きCapybara大辞典」 \- Qiita](https://qiita.com/jnchito/items/607f956263c38a5fec24)

# 目標

![qiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377207/06e529a5-6f4a-9fa7-cb47-9424b5afa5aa.png)


上記のような検索実行ボタンの無い検索フォームでテキスト入力後にEnter キーを押して検索を実行する動作をシュミレートしたい

# 解決策

`send_keys` メソッドを使う。

下記のような検索フォームに検索テキストとして`keyword` を入力後にEnter キー押下した際の検索結果のテストを想定しています。

```HTML
<form>
  <input placeholder='Search' id="keyword_search">
</form>
```

```Ruby
it '検索結果のテスト', js: true do
  #検索フォームにkeyword を入力
  fill_in 'Search , with: 'keyword'
  #テキスト入力後のEnter キー押下
  find("#keyword_search").send_keys :return
  #検索結果の検証
  expect(page).to have_content 'keyword'
end
```

# ポイント

selenium 以外のヘッドレスブラウザとの情報が色々と混ざってしまったので整理

* `:return` は`:enter` でも可
* `:return` は小文字でないとNG
* `js: true` でJavaScript を有効にする
* `find("#keyword_search").native.send_keys :return` ではNG, `.native` はseleniumでは不要

# 学び

Poltergeist, capybara-webkit 等の他のヘッドレスブラウザ毎に微妙に記述が異なるので使用する環境できちんと調べる事が重要
macのOpenCVのカメラID

## OpenCVのカメラに関する困りごと
- コードを変えていないのに、カメラが別のカメラに切り替わってしまう！
- チームメンバーの環境で試してもらうときに、独自定数 `camera_device_index` をいくつか試すように伝えないといけない！
- `system_profiler -json SPCameraDataType`を使えばデバイスリストを取得できると聞いたのに、異なるカメラに接続されてしまうケースが頻発！

## swiftスクリプトでデバイスリストを取得できます！

私が公開している[このスクリプト](https://github.com/shinyaohtani/AVFoundationCameraList/blob/main/avfcam_list.swift)で信頼できるリストがつくれます！

- 使い方は簡単、
  - `swift ./avfcam_list.swift`と呼ぶだけでリストのJSONが出力されます。
  - あとは`jq`コマンドで整形するもよし、pythonでそのまま受け取るもよし、自由にこの出力を使えばokです。

```bash
$ swift ./avfcam_list.swift
{
  "SPCameraDataType" : [
    {
      "_name" : "FaceTime HDカメラ（内蔵）",
      "manufacturer" : "Apple Inc.",
      "spcamera_unique-id" : "0x1420000005acXXXX",
      "spcamera_model-id" : "UVC Camera VendorID_1452 ProductID_34304"
    },
    {
      "_name" : "Logi Capture",
      "manufacturer" : "XSplit Project",
      "spcamera_unique-id" : "{2B297012-XXXX-462D-8EAF-XXXXXXXXXXXX}",
      "spcamera_model-id" : "LogiCapture"
    },
    {
      "_name" : "Logitech StreamCam",
      "manufacturer" : "Unknown",
      "spcamera_unique-id" : "0x1200000046dXXXX",
      "spcamera_model-id" : "UVC Camera VendorID_1133 ProductID_2195"
    }
  ]
}
$
```

https://github.com/shinyaohtani/AVFoundationCameraList/blob/main/avfcam_list.swift

## 前提
- macOS (私はmacOS 11.3)
- OpenCVの`cv::VideoCapture`を利用している。
- Capture API backendsに`CAP_ANY`か`CAP_AVFOUNDATION`か`CAP_FFMPEG`を使っている。

## 仕組み
- macの`cv::VideoCapture`はCapture API backendsに様々なものを利用できるようになっています。([リスト](https://docs.opencv.org/master/d4/d15/group__videoio__flags__base.html#ga023786be1ee68a9105bf2e48c700294d))
- 特殊な設定をしていなければmacでは`CAP_ANY`にすると、`CAP_AVFOUNDATION`か`CAP_FFMPEG`が選択されます。
- Capture API backendsがどちらであったとしても、macでは最終的にはAVFoundationが使われてビデオキャプチャしています。ffmpegの場合、ffmpegのAVFoundationプラグインが利用されます。
- したがって、`camera_device_index`はAVFoundationのリストと整合すればよいのです。

## AVFoundationのカメラデバイスリストの取得方法
- 残念ながらAVFoundationのカメラデバイスリストを取得できるmac標準のコマンドは存在しないようです。
- また、AVFoundationそのものを`python`や`c++`から直接使うには骨が折れます。
- ですが、AVFoundationは`swift`からなら非常に簡単に利用できます。
- またmacではswiftを特殊なビルドなくスクリプトのように利用できます！
- swiftスクリプトでリストをつくりstdoutに出力しさえすれば、あとは`python`や`C++`からコマンド呼び出ししてstdoutを捕まえてあげればok

## SwiftでのAVFoundationのカメラリスト取得コード

- あまりにも簡単すぎで説明が必要ないですね。メソッドの詳細を知りたい人は検索すればAppleのページで詳しく説明してくれています。

```swift:avfcam_list.swift
import AVFoundation

let discovery = AVCaptureDevice.DiscoverySession(
    deviceTypes: [
        AVCaptureDevice.DeviceType.builtInWideAngleCamera,
        AVCaptureDevice.DeviceType.externalUnknown,
    ],
    mediaType: AVMediaType.video,
    position: AVCaptureDevice.Position.unspecified
)

let devices = discovery.devices
```

## 所感
- かなり振り回されました。この半年ひどくハマりました。チームメンバーにも迷惑を掛けたと思います。
- 結局、OpenCVのコードを追いかけて、ffmpegのコードを追いかけてやっとここまでたどり着きました。どちらもプラグインという概念で拡張しているためコードを追うのは一苦労です。cmakeやconfigureの引数でリンクするコードが変わってしまいます。
- やっと安心してVideoCaptureを利用できそうです。

## 参考
- https://qiita.com/sutoh/items/fddefe130eae3bba946f
[Rails]deviseのモジュールについて

## はじめに
deviseを自作のRailsアプリケーションで使用したので備忘録ととして残しておきます。
今回はdeviseで定義されているモジュールについて記述していきます。

deviseの導入方法は以下を確認ください
[[Rails] devise導入方法](https://qiita.com/Jackson123/items/9b7fd4f7c798c2a3aff3)

## モジュールの説明
マイグレーションファイルを確認すると以下のようになっています。

```
class DeviseCreateUsers < ActiveRecord::Migration[6.0]
  def change
    create_table :users do |t|
      ## Database authenticatable
      t.string :email,              null: false, default: ""
      t.string :encrypted_password, null: false, default: ""

      ## Recoverable
      t.string   :reset_password_token
      t.datetime :reset_password_sent_at

      ## Rememberable
      t.datetime :remember_created_at

      ## Trackable
      t.integer  :sign_in_count, default: 0, null: false
      t.datetime :current_sign_in_at
      t.datetime :last_sign_in_at
      t.inet     :current_sign_in_ip
      t.inet     :last_sign_in_ip

      ## Confirmable
      t.string   :confirmation_token
      t.datetime :confirmed_at
      t.datetime :confirmation_sent_at
      t.string   :unconfirmed_email # Only if using reconfirmable

      ## Lockable
      t.integer  :failed_attempts, default: 0, null: false # Only if lock strategy is :failed_attempts
      t.string   :unlock_token # Only if unlock strategy is :email or :both
      t.datetime :locked_at

      t.timestamps null: false
    end

    add_index :users, :email,                unique: true
    add_index :users, :reset_password_token, unique: true
    # add_index :users, :confirmation_token,   unique: true
    # add_index :users, :unlock_token,         unique: true
  end
end

```

「#」が２つ付いているところがモジュール名になります。

これを上から順に説明していきます。

**1.DatabaseAuthenticatable**
データベースに保存されたパスワードが合っているか検証をします。
同時にパスワードの暗号化も行う。

**2.Recoverable**
パスワードリセットを行います。

**3.Rememberable**
クッキーにログイン情報を保持します。

**4.Trackable**
ログインした回数、最終ログイン日時、前回ログイン日時、最終ログインIP、前回ログインIPを保存する。

**5.Confirmable**
新規登録時によるメール認証機能の付加。

**6.Lockable**
ログインに何度も失敗すると、アカウントをロックする。
何回失敗するとロックするかはLockable内で指定できる。

## その他のモジュール
マイグレーションファイルに記述されている以外にもモジュールが用意されています。
**7.Timeoutable**
ログインしたままの状態で一定時間経つと自動でログアウトさせます。
デフォルトだと30分になっています。

**8.Registerable**
登録処理を通してユーザーをサインアップします。また、ユーザーに自身のアカウントを編集したり削除することを許可します。

**9.Validatable**
Emailやパスワードのバリデーションを追加する。独自に定義したバリデーションを追加することもできます。

**omniauthable**
twitterやFacebookなどのSNS認証を追加します。

##モジュールの使い方
モジュールを使う場合は`app/models/users.rb`で下記のように記述します。

```:app/models/users.rb
devise :database_authenticatable, :registerable,
       :recoverable, :rememberable, :validatable
```
以上でモジュールの紹介は終わりです。
情報が足りないんじゃないか？などがあればコメントくださると嬉しいです。

参考

https://qiita.com/salvage0707/items/d3ddc889458ac186e62e
Google colab上で動画生成


#はじめに

Google colab上で動画を生成する際、MatplotlibのArtistsAnimationを使う方法があるが、毎回うまく動かずハマる。試行錯誤の末、Matplotlibを使わず、ムービーファイルをシェルコマンドで生成してしまうのが早いことがわかった。

# 画像の生成

まず、自分のディレクトリ上に連番のファイルを生成する

```python:generateAndSaveMovie.ipynb
import numpy as np
import matplotlib.pyplot as plt

fig = plt.figure()
ax = fig.add_subplot(1, 1, 1)

# 0 <=x < 2pi の範囲の点列を作成。
x = np.linspace(0, 2*np.pi, 101)[: -1]


for i in range(100):
    plt.plot(np.sin(np.roll(x, -i)))
    plt.savefig("image_"+(str(i).zfill(2))+".jpg")
    plt.clf()
```

# ムービー変換

次に、ffmpegを用いて連番のファイルをmp4等のムービーに変換する。

```
!ffmpeg -r 30 -i image_%02d.jpg -vcodec libx264 -pix_fmt yuv420p `date "+%Y%m%d_%H%M%S"`.mp4
```

# 画像ファイル消去

画像ファイルはrmを使って消去する

```
!rm *.jpg
```
クリックで表示画面が切り替わるメモアプリをjQueryのindexメソッドで作る

localstrageを使ったメモアプリを作成している途中で、indexメソッドについての学びがあったのでこちらに書き残したいと思います。

## 作った機能
一覧になったメモをクリックすると右側に大きく表示されるという機能。
※jQueryのバーションは3.6.0です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230656/dd33f8fe-248c-f348-4fe9-c0aae5424869.png)

## コード
### 前提
実際はlocalstrageを用いてデータの取得、表示を行うためこのようにメモ一覧がベタ打ちされることはありません。今回は、クリックしたメモを別枠に表示させる機能をメインに記載したいのでこのようなコードとなっておりますことご理解いただければ幸いです。

```index.html
<!-- メモ一覧 -->
<div class="memo">
  <div class="memo-all">
   <p class="title">桃太郎</p>
   <p class="text">鬼退治に行く</p>
  </div>
  <div class="memo-all">
   <p class="title">さる</p>
   <p class="text">鬼退治についていく①</p>
  </div>
  <div class="memo-all">
   <p class="title">いぬ</p>
   <p class="text">鬼退治についていく②</p>
  </div>
  <div class="memo-all">
   <p class="title">きじ</p>
   <p class="text">鬼退治についていく③</p>
  </div>
</div>
```

```main.js
// クリックしたメモのタイトルを右側に表示
$(".memo-all").on("click", function () {
    let index = $(".memo-all").index(this);
    let title = $(".title").eq(index).html();
    $(".textarea-title").html(title);
    console.log(index, title);
});

// クリックしたメモの本文を右側に表示
$(".memo-all").on("click", function () {
    let index = $(".memo-all").index(this);
    let text = $(".text").eq(index).html();
    $(".textarea-text").html(text);
    console.log(index, text);
});
```

## 解説
```main.js
// クリックしたメモのタイトルを右側に表示
$(".memo-all").on("click", function () {
    let index = $(".memo-all").index(this);
    let title = $(".title").eq(index).html();
    $(".textarea-title").html(title);
});
```
まずメモのタイトルを表示させます。
最初、`memo-all`に対して`on("click)`を付与します。

```main.js
$(".memo-all").on("click", function () {

});
```

しかしこのままでは`memo-all`のclassを持つ全てに適用されるため、`index`メソッドを使います。indexメソッドを記述することで同じclass名でも何番目の要素かを指定することができます。

```main.js
    let index = $(".memo-all").index(this);
    let title = $(".title").eq(index).html();
```

**indexについて参考にさせていただきた記事**
[jQueryで特定の要素が何番目にあるのかを取得する：index()](https://uxmilk.jp/45334)

```main.js
    $(".textarea-title").html(title);
```
最後に表示させたいエリアのclassを指定して`html`メソッドで取得した要素を挿入してあげれば完了です。
ViewからActivityを取得するメモ

```kotlin
package com.objectfanatics.commons.android.view

import android.app.Activity
import android.content.ContextWrapper
import android.view.View

val View.activity: Activity
    get() = activityOrNull!!

val View.activityOrNull: Activity?
    get() = context.activityOrNull

val Context.activityOrNull: Activity?
    get() = when (val context = this) {
        is Activity       -> context
        is ContextWrapper -> context.baseContext.activityOrNull
        else              -> null
    }
```
AWS Aurora ServerlessをCloudFormationで構築する際の注意点

# TL;DR

`Port` `PreferredBackupWindow` `PreferredMaintenanceWindow` をコメントアウトすればスタック更新できるよ！

# 序文
CloudFormationで構築したAurora Serverlessには独特の癖というかハマりポイントがあるのでメモ。

# 設定しなくても良い項目

- `Port`

そもそもがServerlessの場合はポート番号の変更自体が不可で、MySQL互換なら `3306` 、PostgreSQL互換なら `5432` でしか作成できないので設定しないくても良いです。

# 扱いが面倒な項目

- `PreferredBackupWindow`
- `PreferredMaintenanceWindow`

作成時に値を設定しておかないとデフォルト値（東京リージョンで作成する場合、BackupWindowは `13:00–21:00 UTC` = `22:00-06:00 JST` のどこか30分間、MaintenanceWindowはランダムな曜日の `13:00–21:00 UTC` = `22:00-06:00 JST` のどこか30分間）で作成されてしまいます。

さらにこの項目は作成後に更新する手段がありません。
そのため、作成時には設定しておきたくなる項目です。

それだけなら最初にしっかり考えて設定しておいて、値を更新しなければ済む・・・と思わせておいて、この先に罠が待っています。

# 実例

例えばこんな感じのテンプレートでAurora Serverlessを構築したとしましょう。

```
  DBCluster:
    Type: AWS::RDS::DBCluster
    Properties:
      Engine: aurora
      EngineMode: serverless
      Port: 3306
      PreferredBackupWindow: 17:00-18:00
      PreferredMaintenanceWindow: sun:19:00-sun:20:00
      MasterUsername: hoge
      MasterUserPassword: hogehoge
```

その後、スケールサイズを指定したくなって、以下のようにテンプレートを編集します。
ポートやバックアップウィンドウ、メンテナンスウィンドウは変更していません。

```
  DBCluster:
    Type: AWS::RDS::DBCluster
    Properties:
      Engine: aurora
      EngineMode: serverless
      Port: 3306
      PreferredBackupWindow: 17:00-18:00
      PreferredMaintenanceWindow: sun:19:00-sun:20:00
      MasterUsername: hoge
      MasterUserPassword: hogehoge
      ScalingConfiguration:
        MinCapacity: 1
        MaxCapacity: 2
```

ところがこのテンプレートでスタック更新をすると以下のどれかのエラーでスタックの更新に失敗します。

```
You currently can't modify EndpointPort with Aurora Serverless. (Service: AmazonRDS; Status Code: 400; Error Code: InvalidParameterCombination; Request ID: 12345678-9abc-def0-1234-56789abcdef01)
You currently can't modify BackupWindow with Aurora Serverless. (Service: AmazonRDS; Status Code: 400; Error Code: InvalidParameterCombination; Request ID: 12345678-9abc-def0-1234-56789abcdef01)
You currently can't modify MaintenanceWindow with Aurora Serverless. (Service: AmazonRDS; Status Code: 400; Error Code: InvalidParameterCombination; Request ID: 12345678-9abc-def0-1234-56789abcdef01)
```

このような状態から更新したい場合には値を変更していなくても、更新不能な項目を外しておく必要があります。

```
  DBCluster:
    Type: AWS::RDS::DBCluster
    Properties:
      Engine: aurora
      EngineMode: serverless
      # Port: 3306
      # PreferredBackupWindow: 17:00-18:00
      # PreferredMaintenanceWindow: sun:19:00-sun:20:00
      MasterUsername: hoge
      MasterUserPassword: hogehoge
      ScalingConfiguration:
        MinCapacity: 1
        MaxCapacity: 2
```

# AWSに対応してもらいたい！

結構昔からある問題（→[AWSフォーラム](https://forums.aws.amazon.com/thread.jspa?messageID=911260)）で、AWSのCloudFormationの公開カバレッジロードマップ内にIssueも立って（→[#396](https://github.com/aws-cloudformation/aws-cloudformation-coverage-roadmap/issues/396)）います。
が、残念ながら検討段階にも入っていません（→[roadmap](https://github.com/aws-cloudformation/aws-cloudformation-coverage-roadmap/projects/1?card_filter_query=%23396)）。

この問題に限らず、Issueについた「いいね」数は開発陣がチェックしているそうで、内部的にそこそこの影響力があるそうです。
※ サポート窓口や、（現在閉館中ですが）AWS Startup Loft Tokyoのスタッフに言うよりも効果的だと言われました

せっかくインフラ構成をコード化できても、更新の度にコメントアウトしたり、コメントアウトしたものをコミットしていると管理しにくいことこの上ないので是非とも対応して頂きたいなーと思っております。
Electronでデスクトップアプリケーション作成

### はじめに
Electronを使用して作成したアプリケーションを、指定の形式にビルドする方法を紹介します。

### Electronとは

- [公式サイト](https://www.electronjs.org/)
- クロスプラットフォームのデスクトップアプリケーションを作成するフレームワークです
- VisualStudioCode、Twitchアプリ、Microsoft TeamsなどがElectronを使用して作成されています

### Electronのアプリケーションアーキテクチャ
![アーキテクチャ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076043/0c8387f4-e29b-d7c5-445a-ce98b10ecca6.png)


#### メインプロセス
メインプロセスはアプリケーション起動時に最初に生成され、レンダラープロセスの管理を行います。
Electronに用意されているBrowserWindowインスタンスを作成することでウェブページを作成します。
メインプロセスは常に1つのみで、「メインプロセスの終了」＝「アプリケーションの終了」となります。

#### レンダラープロセス
レンダラープロセスは、対応するウェブページを管理します。ウェブページ内の GUI 操作を実行します。
レンダラープロセスはメインプロセスとIPC（Inter Process Communication）経由で通信を行います。
ウェブページの動作からメインプロセスの処理を行うよう通信したり、そのために必要な値を送信したりします。
### 実行環境

- node v14.15.4
- npm v6.14.10
- git version 2.30.0.windows.1

---
### 手順
- 公式のリポジトリからプロジェクトをチェックアウトし、起動します
- gitコマンドが実行可能なCUIのツールで以下のコマンドを実行します

```
>>> git clone https://github.com/electron/electron-quick-start

>>> cd electron-quick-start

>>> npm i

>>> npm run start
```

![アプリ実行](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076043/13c6810b-ba71-92cd-b7cd-efac9c97c1b0.png)


## electron-builder のインストール

- 実行ファイルを作成するために [electron-builder](https://www.electron.build/) を使用します
- プロジェクトフォルダで次のコマンドを実行します

```
npm install -D electron-builder
```

- プロジェクト直下に build-win.js を作成します

```javascript
const builder = require("electron-builder");

builder.build({
  config: {
    appId: "electron.quick.start.tutorial.demo",
    win: {
      target: "nsis",
    },
    nsis: {
      oneClick: false,
      allowToChangeInstallationDirectory: true,
    },
  },
});
```

- nsis
  - Windowsデフォルトターゲット
- oneClick
  - ワンクリックインストーラーを作成するか
- allowToChangeInstallationDirectory
  - ユーザーがインストールディレクトリを変更できるようにするかどうか

- プロジェクトフォルダで次のコマンドを実行します

```
>>> node build-win.js
```

コマンドを実行することで、distフォルダ配下に指定した形式の実行ファイルが作成されます

![スクリーンショット (51).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076043/fbae3bff-5218-a800-1a62-7a283445a19f.png)


win-unpackedの配下の.exe形式のファイルをダブルクリックすることで起動できます。
![スクリーンショット (60).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076043/ad659464-f5d5-9742-1f7a-33089eb26ee0.png)



以上の手順でElectronを使用してデスクトップアプリケーションを作成できました。
Dockerコマンドリスト

##Dockerコマンドのリスト

###Dockerイメージの確認
ローカルに保存したコンテナイメージの一覧を表示。

```
docker images
```

###Dockerコンテナの確認（起動中のコンテナ）
現在のコンテナの稼働状況を確認。起動中のコンテナのみを表示します。

```
docker ps
```

###Dockerコンテナの確認（全て）
"-a"オプションを付けることで、停止中のも含めて全てのコンテナを表示します。

```
docker ps -a
```

###Dockerファイルからイメージを作成
```
docker build -t [イメージ名]:[タグ名] Dockerファイルのあるディレクトリ
docker build -t test .
```

###DockerイメージからDockerコンテナを立ち上げる
```
docker run --name [コンテナ名] -dit \
-p [ホスト側のポート]:[コンテナ側のポート] \
[イメージ名]
```

-name：任意のコンテナ名を指定する
-d：デタッチモード（コンテナの起動をバックグラウンドで行う）
-p：ポートの指定

###コンテナの起動
```
docker start [コンテナ名 or コンテナID]
```

###コンテナの削除
```
docker rm [コンテナ名 or コンテナID]
```

###バインドマウント（ディレクトリの同期）
```
docker run --name [コンテナ名] -d \
-v [ホスト側のディレクトリ]:[コンテナ側のマウントポイント] \
-p [ホスト側のポート]:[コンテナ側のポート] \
[イメージ名]
```

###コンテナに入る
```
docker exec -it [コンテナIDまたはコンテナ名] bash
```

###コンテナの中に入ったときに、文字化けを起こすときの対処法
```
locale
文字コードを確認する

もしからであれば下記を実行する
export LANG=en_US.UTF-8
```

###コンテナから出る
```
exit
```

###ホストマシンのファイルをコンテナ内にコピーする
```
docker cp \
[ホスト上のコピーしたいファイルのパス] \
[コンテナ名orコンテナID]:[コピー先パス]
```

###ホストマシンのファイルをコンテナ内に追加する
```
docker add \
[ホスト上のコピーしたいファイルのパス] \
[コンテナ名orコンテナID]:[コピー先パス]
```
エフェクトの実装

オブジェクトを選択し、Effect→ParticleSystemをつける
![スクリーンショット 2021-04-26 210905.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/8cb80656-fbc9-3f60-40c4-837fbc66e277.png)
Rendererを開き、Materialを選択する
![スクリーンショット 2021-04-26 211613.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/44b4d80f-a118-2f4e-f744-ac1cdbb55fb6.png)
Shapeを開き、エフェクトを調整する
![スクリーンショット 2021-04-26 215029.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/b58bdad0-2e87-cb0b-52ba-d0782af0b98d.png)
Emissionを開き、RateOverTimeを調整する
![スクリーンショット 2021-04-26 221500.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/05d95bb5-5e56-0b7d-57ee-1071dc6e7b37.png)
DurationやLifeTimeなど調整する
![スクリーンショット 2021-04-26 221648.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/2c198d18-bf6e-fece-bc4b-6d227d25dd8e.png)
※時間経過とともにパーティクルを小さくする場合はSizeOverLifeを調整する
![スクリーンショット 2021-04-26 221945.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/6fb5b8d5-2420-9bcf-92c5-97cc1bdca028.png)
ループやPlayOnAwakeを調整する
![スクリーンショット 2021-04-26 222143.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/12fae514-57c0-7259-8925-7c993a58b101.png)
DocFX のはじめかた

# 環境
Windows 10 Enterprise

# やり方
https://github.com/dotnet/docfx/releases

ダウンロード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264045/926b604f-ae28-7129-c695-220c9efb32bc.png)

解凍して適切なフォルダに移動(僕はProgramFilesにしました)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264045/2f20d4cd-49c2-e4c3-e66e-c49a328eeee7.png)

コントロールパネルを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264045/21ca320b-d5aa-1c59-e400-05a852ca2225.png)

システムとセキュリティ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264045/b42c3114-94b2-8dc0-aa8c-93634e671783.png)

システム
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264045/85c0d679-1362-bcfa-fb6f-ffc854e67799.png)

システムの詳細設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264045/7b9b6d02-fbb1-48b4-9bdc-8366bf6aa112.png)

環境変数
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264045/bf639d12-19f3-f11f-0c40-278637715914.png)

Path > ダブルクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264045/fbe10d6c-1440-9e99-8831-c78c7a59c732.png)

新規 > docfxのパスを入力 > OK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264045/ff8eba8a-3211-925c-5373-5bafca107d39.png)

コマンドラインを起動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264045/e72db490-4db2-da26-3a72-f912ce3e7d6c.png)

コマンドを実行

```
docfx init -q
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264045/54cce48d-e592-3524-2ca8-5e4271171929.png)

```
docfx docfx_project\docfx.json --serve
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264045/7c0ee166-e53c-b6a3-461a-5f71ccda2043.png)


localhost:8080 にアクセス
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264045/3585c935-35bb-6d3c-5c15-d2a1440a615e.png)

完了！
HTML5  住所入力フォーム

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="result" data-user="rm5912" data-slug-hash="VwPNdav" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="住所入力フォーム練習">
  <span>See the Pen <a href="https://codepen.io/rm5912/pen/VwPNdav">
  住所入力フォーム練習</a> by morioka (<a href="https://codepen.io/rm5912">@rm5912</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

###郵便番号から住所が簡単に入力できるサービスを使ってみた。
YubinBangoというサービスを利用して郵便番号から住所を自動入力機能を実装してみました。
住所から郵便番号を出すなどはできませんが
十分使えるかなと思います。

```html:html
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
```
ライブラリを読み込んでinputのclass属性に下記のプロパティを指定します。

|クラス名        |分類　　　 |
|--------------|---------|
|h-adr         |formやdivで囲む|
|p-region      |都道府県　　|
|p-locality    |市区町村　　|
|p-street-address|町域　　　|
|p-extended-address|上記以外の住所|

これに郵便局のURLを貼るなどすればいいかなと思います。



>参考サイト
[お問い合わせフォーム最適化。改善しておきたい16の項目](https://pulpxstyle.com/efo/)
[YubinBango](https://yubinbango.github.io/)
配列操作　swift

#■配列のプロパティまとめ

|概要|プロパティ|説明　　　　　　|
|:---|:---|:---|
|要素の数|count|配列の中身の数を返す|
|先頭の要素|first|始めの要素を返す|
|最後の要素|last|最後の要素を返す|
|空か|isEmpty|空の配列であればtrue,要素があればfalseを返す|

``` swift

let a = ["りんご","ばなな","みかん"]

print(a.count)
//結果: 3 
 
//注意 firstとlastは結果がoptional型で渡されるのでオプショナルバインディングする事
if let first = a.first {
 print(a.first) 
 //結果: りんご
}

if let last = a.last {
 print(a.last) 
 //結果: みかん
}

print(a.isEmpty)
//結果: false
```

#■配列のメソッド

|概要   |メソッド|説明　　　　　|
|:---  |:---|:---|
|検索|firstIndex|指定した配列の中身の値のインデクス番号を返す|
|検索|lastIndex|指定した配列の中身の値のインデクス番号を返すfirstIndexとの違いは僕は謎ですw|
|部分列|prefix|先頭から数えた指定した個数分の配列を返す|
|部分列|suffix|末尾からつまり配列の後ろの要素から数えた指定した個数分の要素を返す|
|部分配列|dropFirst|指定した個数分の先頭要素を取り除いた要素を返す|
|部分配列|dropLast|指定した個数分の末尾要素から取り除いた要素を返す|
|追加|append|配列の末尾に値を付け加える|
|挿入|insert|指定した位置に値を挿入する|
|消去|remove|指定した位置の要素を消去する|
|消去|removeFirst|最初の要素を消去する|
|消去|removeLast|最後のの要素を消去する|
|消去|removeAll|要素を全て消去する|
|整列|sort|要素を決められた順番(昇順)に替える完全に固定でずっと変わる|
|整列|sorted|要素を決められた順番(昇順)に替えて返す　一時的に順番を変えたい時こっち|
|ランダム|randomElement|要素をランダムに返す|
|シャッフル|shuffle|要素をランダムに並び替えるずっと|
|シャッフル|shuffle|要素をランダムに並び替えた物を一時的に返す|
|逆順|revese|要素を元の配列と逆にするずっと|
|逆順|reversed|要素を元の配列に逆にした配列を返す|

``` swift
var a = ["a","b","c","d"]

a.firstIndex(of: "c") //2
a.lastIndex(of: "d") //3
a.prefix(2) // ["a","b"]
a.suffix(2) // ["c","d"]
a.dropFirst(3) // ["d"]
a.dropLast(2) // ["a","b"]
a.append("e") //["a","b","c","d","e"]
a.insert("f", at: 0)  //["f","a","b","c","d","e"]
a.remove(at: 0) //["a","b","c","d"] fがなくなっている。
a.removeFirst()　//["b","c","d"] aがなくなっている
a.removeLast()  //["b","c"] dがなくなっている
a.removeAll()  //[] 全部なくなっている。

var b = [2,5,1,3,4]

b.sort // [1,2,3,4,5] 配列の中身自体をかえる。　順番がほんまの順番に変わる。
b.sorted // 配列の中身自体はを変更はしないけど　変更したものを一時的に配列にして返す
var c = b.sorted
print(b) // [2,5,1,3,4] sortしてないとする。配列の中身自体は変わらない
print(c) // [1,2,3,4,5] 変更した物を一時的に返す順番がほんまの順番に変わる。

print(b.randomElement()!) // ランダムに返される 5とか
b.shuffle() // [4,1,5,2,3] //シャッフルされる 配列の中身自体変わる。
b.shuffled() //配列の中身に変更はない 一時的に変数にいれシャッフルした配列を返す。
b.reverse() //[4,3,1,5,2] 順番逆
b.revesed() //ReversedCollection<Array<String>> ... よくわからん...
```

revesed()はよくわからんので分かり次第更新します。

#■シーケンス操作

■fllter

指定した条件の要素等を取り出して返す。
1から100の整数が入っている配列があるとして、偶数だけを取り出したい！

``` swift
let a = [Int](1...100)
let b = a.filter { $0 % 2 == 0}
print(b)
//結果: [2,4,6,8,10,なになになになに長いので省略]1から100までの整数の偶数が取り出される。
```

クロージャを使用してる。
$0は配列の1から100までの数字全部の引数　まあ配列の中身全部って意味
あとはそれをif文のように条件を書きそれが返される。

■map

配列中身ひとつずつ全部に指定した処理を行う。

``` swift
let a = [10,20,30,40]

let b = a.map{$0 * 2} //全部2倍にしたろ

print(b) //結果: [20,40,60,80]
```

■forEach

配列の要素に順番に適応していく。
for-inと基本的には同じ ,forEachはbreakなどが使えない。

``` swift
let a = [1,2,3]
a.forEach {
 print($0)  //結果: //1 //2 //3  順番に入る。
}
```

とりあえずここまでとします。
都度必要になれば更新します。

参考にした記事というかこちらの方の記事のアウトプットです！
完璧版は下記リンクから飛べます！
https://qiita.com/REON/items/1f33886d90b4f758e715