OmniAICreator/Qiita-1.07M huggingface dataset:
GitHubにプッシュしたら自動でNetlifyにデプロイされる方法

たまに記事で見かけてた、「GitHubにpushでデプロイ」。
これ、すごいなーって思いながら難しい設定がいるんだろうなとちょっと踏み出せなかったんですけど、
案外やってみるとめちゃくちゃ簡単だったので、同じような人がいればと思いこの記事書きます。

GitHubにpushしたらプロジェクトを自動でビルドしてくれて、その結果をNetlifyに反映してくれる設定まで書きますね。

##環境
今回はReactを使ったサービスをデプロイする想定で、進めます。
（他のフレームワークもたぶん同じ感じでいけます。）

デプロイ先には[Netlify](https://app.netlify.com/)を選ばせていただきました。

##GitHubにリポジトリを用意
とりあえずgithubにリポジトリを作って、何かしらサービスがpushされてるところまで進めてください。
Reactなら「create-react-app」でできたものをそのままpushしちゃったものでいいです。

##Netlify設定
まだアカウントを持ってない方はまずアカウントを作ってみてください。
https://app.netlify.com/
GitHubアカウントでアカウントを作るとデプロイ設定がスムーズにできる気がします。

ログインしたらトップページに「New site from Git」ってボタンが現れるので、こちらをクリック。
![スクリーンショット 2021-03-08 18.45.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67190/b771d44e-c151-5753-fa0d-d5fd45922a1d.png)


次のページで何のサービスと紐付けるか尋ねられるので今回は「GitHub」を選択。
GitHubが別ウィンドウで立ち上がるので認証を済ませてください。

次にデプロイ対象のリポジトリを尋ねられます。
もし対象のリポジトリが表示されていない場合は下の方にある
「Configure the Netlify app on GitHub」
からGithub側でリポジトリのアクセス設定を変更してあげると表示されるようになるはずです。
![スクリーンショット 2021-03-08 20.43.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67190/af806f81-9820-5ef3-2678-c8a041bf47d0.png)


最後にデプロイ設定です。
大事なのは下記の３つ。

+ Branch to deploy：デプロイ対象のブランチ　
+ Build command：ビルドを実行するコマンド
+ Publish directory：公開するディレクトリ

僕の場合は今回は
「master」、「yarn build」[^1]、「build/」を設定しました。
![スクリーンショット 2021-03-08 21.06.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67190/dedf819f-f805-7225-dcb2-5ec2c6a8814d.png)

これで全部設定完了です。
「Deploy site」ボタンを押すと、デプロイ作業を始めてくれます。

数分待つと、デプロイ完了されて実際にページにアクセスすることができるようになります^◡^
![スクリーンショット 2021-03-08 21.40.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67190/ca721448-e187-0d67-3601-4b1c7b298ff3.png)

以上でGitHubとNetlifyを紐付けてデプロイするまでの設定完了です！
以降はGitHubのmasterにpushするたびに自動でNetlify側がそれを検知し、再度ビルド＆デプロイを実行してくれるようになります。

お疲れ様でした！！


## おまけ
ちなみにデプロイ先のURLは変更することが可能です。
上の場合「goofy-golick-8dbcaa.netlify.app」とランダムな文字列になっちゃってるんですが、
「Site settings」 > 「Change site name」から好きにサブドメインを変更すること可能です。
![スクリーンショット 2021-03-08 21.47.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67190/c278723a-a57c-1ff2-1a03-b1f5ac7977fb.png)
興味ある方ぜひ。


[^1]: Reactだけの現象か分かりませんがたまにビルドがうまく行かなくなる時があります。それも急に。そんな時はビルドコマンドを「CI= npm run build」としてみると直るかもしれません。（参考：https://answers.netlify.com/t/netlify-not-building-command-failed-with-exit-code-1-npm-run-build/16999）
SCNNodeに最初だけカメラの方を向いているようにする

オブジェクトのむきをカメラに追従させるには

```swift
let billboardConstraint = SCNBillboardConstraint()
node.constraints = [billboardConstraint]
```

とすればいいが、これだとオブジェクトの方向がずっとカメラに追従してしまうため、オブジェクトの側面が見られない。
最初だけカメラの方向に向けるには、角度を計算してオブジェクトを回転させる。

```swift
let cameraPosition = sceneView.pointOfView!.position
let radian = atan2(camera.x-node.position.x,(camera.z-node.position.z)) // この場合Y軸の回転を求めている。
node.eulerAngles.y = node.eulerAngles.y + radian
```
🐣
****
フリーランスエンジニアです。
お仕事のご相談こちらまで
rockyshikoku@gmail.com

Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
ARKit SceneKit でタップした場所のSCNVector3ポジションを取得する

タップした先にSCNNodeがある場合は、タップ先とnodeの接点が取れます。

```swift
// sceneViewにtapRecognizerを与えておいてください。

func tap(_ sender: UITapGestureRecognizer) {
    let sceneView = sender.view as! ARSCNView
    let touchLocation = sender.location(in: sceneView)
    let hitResults = sceneView.hitTest(touchLocation, options: [:])
    if !hitResults.isEmpty {
        if let hitPosition = hitResults.first?.worldCoordinates {
            print(hitPosition)
    }
```

タップした先がARKitのカメラ背景など何もない場合、適当なPlaneを指定することでその平面とタップとの接点が取れます。

```swift
func tap(_ sender: UITapGestureRecognizer) {
    let sceneView = sender.view as! ARSCNView
    let touchLocation = sender.location(in: sceneView)
    if let unProjectPoint = sceneView.unprojectPoint(touchLocation, ontoPlane: simd_float4x4 (columns: (simd_float4(0,0,-5, 0), simd_float4(0,0,-5, 0), simd_float4(0,0,-5, 0), simd_float4(0,0,-5, 0)))) { 
    // 適当に５m先の平面との接点をとってみる。平面検出したアンカーなどでもいいですね。
       print(unProjectPoint)
    }
```

あとはタップポイントにノードおくなりビームを飛ばすなりなんなり。

🐣
****
フリーランスエンジニアです。
お仕事のご相談こちらまで
rockyshikoku@gmail.com

Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
ARKitのFeaturePointsを消す

ワールドトラッキングの結果を点群で表示してくれる機能ですが、消し方があんまり見当たらなかったので。

手順

```swift
sceneView.debugOptions = []
self.featurePoints.forEach { $0.removeFromParentNode() }
```

🐣
****
フリーランスエンジニアです。
お仕事のご相談こちらまで
rockyshikoku@gmail.com

Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
KingFisher で UIButtonに画像を設定する

KingFisherでUIButtonにリモート画像を設定するには、buttonTypeをカスタムに設定します。

```swift
let button = UIButton(type: .custom)
button.kf.setImage(with: url, for: .normal)
```

これでオッケー。

🐣
****
フリーランスエンジニアです。
お仕事のご相談こちらまで
rockyshikoku@gmail.com

Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
なぜコンピューターは２進数を用いるのか

#結論
二進法だと電気のon,offで0と1が表現できる。

例えば十進法だと10段階の電圧を判別する回路が必要になり大変。

#おまけ
##半導体とは
半導体とは正式名称「半導体集積回路」のこと。

情報の記憶、数値計算、論理演算窓の知的な情報処理機能を持っている。

##トランジスタ
電気の流れをコントロールする部品。

例えば「信号を増幅する」「回路をオンオフする」
google drive の document　書式、レイアウトが 崩れる

問題
PDF・ワード・パワポをGoogleドライブで共有すると書式が崩れる！

解決策
フォントを
M PLUS Rounded 1c
または
M PLUS 1p
にする


参考資料：https://www.youtube.com/watch?v=KLDruUtzSAE&t=121s
シェルスクリプトで複数のファイルを同時にオープンして交互に読み取る

## はじめに

解説することもない小ネタですが意外と見かけない気がするので。`paste` コマンド相当のものを独自で実装したい場合とか、ファイルディスクリプタのサンプルとして

補足 `paste` コマンドは POSIX で規定されていますが OpenWrt では組み込まれていなかったりします。

## 実装

`paste` コマンドのように引数で引数で指定した2つのファイルを行ごとにタブ区切りで結合します。リダイレクト版の方がファイルディスクリプタを適切なタイミングで自動的に閉じてくれる（元に戻してくれる）ので個人的に好みです。

### リダイレクト版

```sh:paste1.sh
#!/bin/sh
while :; do
  eof=1
  read -r line1 <&3 && eof=''
  read -r line2 <&4 && eof=''
  [ "$eof" ] && break
  printf '%s\t%s\n' "$line1" "$line2"
done 3<"$1" 4<"$2"
```

### exec 版

```sh:paste2.sh
#!/bin/sh
exec 3<"$1" 4<"$2" # ファイルディスクリプタを開く
while :; do
  eof=1
  read -r line1 <&3 && eof=''
  read -r line2 <&4 && eof=''
  [ "$eof" ] && break
  printf '%s\t%s\n' "$line1" "$line2"
done
exec 3<&- 4<&- # ファイルディスクリプタを閉じる

# 開いているファイルディスクリプタを調べる方法
# ls -al /proc/$$/fd
```
SQLでbooleanを集計する

ANSI SQLには1999以降 `EVERY`, `SOME`, `ANY` といったbooleanの集約関数がある。

しかしMySQL 8.0やOracle 21cではこれらの関数はサポートされていないようだし、PostgreSQLには `EVERY` はあるものの、 `ANY` や `SOME` は非標準の別名の `bool_or` としてしか使えない。どうしたものか……。

先に答えを言ってしまうと、 `MIN` や `MAX` が代わりに使える。

# `MIN`, `MAX` を使う方法

boolean = {false, true}, bit = {0,1} に関して、 (boolean, AND, true), (boolean, OR, false), (bit, MIN, 1), (bit, MAX, 0) はそれぞれモノイドを成し、以下のような関係が成り立つ。

| x | y | x AND y | x OR y |
|:-:|:-:|:-:|:-:|
| false | false | false | false |
| false | true  | false | true  |
| true  | false | false | true  |
| true  | true  | true  | true  |

| x | y | MIN(x, y) | MAX(x, y) |
|:-:|:-:|:-:|:-:|
| 0 | 0 | 0 | 0 |
| 0 | 1 | 0 | 1 |
| 1 | 0 | 0 | 1 |
| 1 | 1 | 1 | 1 |

false = 0, true = 1 と読み替えると、ちょうど `x AND y` は `MIN(x, y)` に対応し、 `x OR y` は `MAX(x, y)` に対応する。bitで集計をしたあと、結果をbooleanに読み替えればbooleanの集計ができる。

すなわち、

```sql
SELECT
  EVERY(x),
  ANY(y)
FROM hoge
```

は

```sql
SELECT
  MIN(CASE WHEN x THEN 1 ELSE 0 END) = 1,
  MAX(CASE WHEN y THEN 1 ELSE 0 END) = 1
FROM hoge
```

と言い換えられる。

# 和や積を使う方法

また、 (integer, +, 0) もモノイドを成し、以下のような関係が成り立つ。

| x | y | x + y |
|:-:|:-:|:-:|
|  0 |  0 |  0 |
|  0 | >0 | >0 |
| >0 |  0 | >0 |
| >0 | >0 | >0 |

`OR` と同じような関係が成り立つため、

```sql
SELECT ANY(x) FROM hoge
```
は

```sql
SELECT SUM(CASE WHEN x THEN 1 ELSE 0 END) > 0 FROM hoge
```

とも言い換えられる。

`AND` についても (bit, *, 1) で `MIN` と同様のことが言えるが、

| x | y | x * y |
|:-:|:-:|:-:|
| 0 | 0 | 0 |
| 0 | 1 | 0 |
| 1 | 0 | 0 |
| 1 | 1 | 1 |

SQLでは積による集計に一工夫必要なため（参考: [SQLである列の要素すべての積を求める方法 - Qiita](https://qiita.com/shiozaki/items/68a94d7e049e49493a77)）、 `MIN`, `MAX` による言い換えの方が対称性があってよいと思う（`SUM` を使った書き方は `count-if` 的な使用法もあるけど）。

# 参考URL

* [MySQL :: MySQL 8.0 Reference Manual :: 12.20.1 Aggregate Function Descriptions](https://dev.mysql.com/doc/refman/8.0/en/aggregate-functions.html)
* Oracle Database / Release 21 - [Aggregate Functions](https://docs.oracle.com/en/database/oracle/oracle-database/21/sqlrf/Aggregate-Functions.html#GUID-62BE676B-AF18-4E63-BD14-25206FEA0848)
* PostgreSQL 12 - [9.20. 集約関数](https://www.postgresql.jp/document/12/html/functions-aggregate.html)
実行すると肥大化していくシェルスクリプト

##概要
実行するとスクリプトファイル自身が肥大化していくシェルスクリプトです。
実用的なものではなく、遊びです。

[**実行すると肥大化していくバッチファイル**](https://qiita.com/X-IA/items/6dd0c3ba26146503e8cd)の
Unix/Linuxコマンド版です。

##環境
Ubuntu 20.10 on Windows Subsystem for Linux (WSL2)
macOS 11.1 BIg Sur

###コード
```:bomb.sh
cat $0 $0>$0_
cat $0_>$0
```

上記で動かない場合は、下記の3行版で試してください。

```:bomb.sh
cat $0 $0>$0_
cat $0_>$0
sh $0

```


##解説
* スクリプトファイルのコマンド行数は2行となっています。
* 1行目はCATコマンドにて、自身の中身を中間ファイルに2個分上書きしています。
<br/>※元ファイルの名前が "bomb.sh" ならば、中間ファイルは "bomb.sh_" になります。
* 2行目は中間ファイルの中身を元のファイルに上書きしています。
* メカニズムがまだ解っていないのですが、<br/>2行目のコマンド実行終了後も上書きされたファイル内のコマンドが読み出されてしまうのか、処理が延々と続きます。
* スクリプトファイルのサイズが、2倍、4倍、8倍... と1サイクルにつき2倍になります。
<br/>※シェルや文字コードによっては、綺麗な2倍ずつにはならない場合があります。
* <font color=red>大容量のUSBメモリ、SDカード、SSDなどNAND型フラッシュメモリのストレージ上で実行する場合にはご注意下さい。<br />ファイルを上書きしていく仕様のため、一度データを書き込んだ領域が再び空き領域になります。<br />これは、ウェアレベリング（書き込み位置が分散されるよう制御する技術）が巧く働かない場合にP/Eサイクルを早め、故障する（書き込み不可になる）虞がある事を意味します。</font>
初学者がDocker+Django+gunicorn+nginx+PostgreSQL環境でCSSを配信できるようにしてみた

[前回の記事](https://qiita.com/grv2688/items/af2df0a7bd531d5935da)では簡単な日記アプリを作りましたが、[CSSが配信されていなかった](https://qiita.com/grv2688/items/af2df0a7bd531d5935da#django%E3%81%AE%E7%AE%A1%E7%90%86%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9)ので、今回はその部分を修正していきます。

# つくったもの
cssが適用されたページを表示したいと思います。

![ログイン画面.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689015/ba30ff0f-a99c-81c1-dcd1-58b382278201.png)


# コンテナを起動
```
$ docker-compose up -d
$ docker-compose exec web bash
```

# 静的ファイルの置き場所を変更する
settings.pyを開いて、静的ファイルの置き場所を指定します。

```python:conf/settings.py
# 静的ファイルの配信
STATIC_ROOT = os.path.join(BASE_DIR, 'static/')
```

collectstaticを行い、静的ファイルを指定した場所に集めます。

```
$ python manage.py collectstatic
```

# ボリュームがマウントされる
今、webコンテナの中でcollectstaticを実行したので、webコンテナ内にstaticフォルダが作成され、静的ファイルはその中に格納されました。下の図で言うと①です。

![マウント.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689015/fa1cac59-b5fd-c966-483a-f0030298f840.png)

実は、docker-compose.ymlにボリュームマウントを記述しておいたので、作成したstaticフォルダはホストにもコピーされます。 上の図の②です。

```yaml:docker-compose.yml
services:
  web:
    volumes:
      - './web:/code'
```

そして、staticフォルダはnginxコンテナにもマウントしているので、静的ファイルはnginxコンテナにもコピーされます。上の図の③です。

```yaml:docker-compose.yml
services:
  nginx:
    volumes:
      - './web/static:/static'
```

さらにnginxコンテナにはguicornの設定ファイルがあり、静的ファイルの配信先として先ほどコピーされたstaticフォルダが指定されています。

```conf:nginx/conf/gunicorn.conf
location /static {
    alias /static/;
}
```

以上より、静的ファイルはnginxから配信されるようになります……というのが、私の理解なのですが、どうでしょうか…。間違っていたらご指摘いただけると嬉しいですm(_ _)m

# 確認する
localhost:80/adminにアクセスすると、今度はcssが適用されたページが表示されると思います。

![ログイン画面.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689015/ba30ff0f-a99c-81c1-dcd1-58b382278201.png)
【Node.js】Firebaseでエミュレーターを使ったjestのCIをGithub Actionsで

もうエミュレーターでテストすればいいんじゃないか説。

```package.json
  "scripts": {
    "jest": "jest",
    "test": "firebase emulators:exec --only functions,firestore \"npm run jest --exit\"",
  }
```
別のFirebaseプロジェクトを用意する必要もないし、sinonでFirebaseAdminのモックとかも作る必要ないから楽。

# Github Actions
```
jobs:
  ci:
    runs-on: ${{ matrix.os }}

    strategy:
      matrix:
        os: [ubuntu-latest]
        node: [12]

    steps:
      - name: Checkout 🛎
        uses: actions/checkout@master

      - name: Setup node env 🏗
        uses: actions/setup-node@v2.1.2
        with:
          node-version: ${{ matrix.node }}

      - name: Cache node_modules 📦
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - name: Install dependencies 👨🏻‍💻
        run: |
          npm install -g firebase-tools
          npm ci

      - name: Firebase runtime config 🔥
        uses: w9jds/firebase-action@master
        with:
          args: functions:config:get > .runtimeconfig.json
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
          PROJECT_ID: "default"

      - name: Run linter 👀
        run: |
          npm run lint
          npm run test
```
functions.config()を使ってる場合は、firebase-actionsを使って`.runtimeconfig.json`に吐き出す。
また、エミュレーターの起動はfirebase-actionsを使わないので`npm install -g firebase-tools`を忘れずに。


# Cloud Storageのテスト
FirebaseのStorageは現状エミュレーターのサポート外なので、initializeAppで認証情報を渡してテストする。同じプロジェクトでテストする場合、バケットをテスト用に変更すると楽。（デフォルトで用意されてるstagingのバケットなど）

```storage.test.js
import * as admin from 'firebase-admin';
import { config } from 'firebase-functions';
admin.initializeApp({
  credential: admin.credential.cert({
    project_id: config().credential.project_id,
    client_email: config().credential.client_email,
    private_key: config().credential.private_key.replace(/\\n/g, '\n'),
  }),
  storageBucket: 'staging.<PROJECT_ID>.appspot.com', // test用に変更
});
```
秘密鍵を`functions.config()`から読み込む場合、`\n`が`\\n`になって
`Failed to parse private key: Error: Invalid PEM formatted message.`
と、認証でコケるので改行に置換してあげる。
vscodeでdocker上のspring bootをデバッグできないとき

dockerをシャットダウンしたり、dockerコンテナを削除した後などであらためて

```
docker-compose up -d
```
したときなど、Remote Developmentで コンテナのjava環境が動かない場合がある。

# やり方

いったん.gradleフォルダをホスト上のディレクトリに退避させておいて、そこを見に行く

```
cd && ln -s /usr/local/src/root/.gradle .gradle
```
SPRING BOOT DASHBOARDを再読み込み
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542119/ff2811ca-eff6-0a4c-e8e3-4f3a9f17176e.png)
SPRING BOOT DASHBOARDを再読み込みした場合はvscodeを再起動しないとうまくいかないぽい
久しぶりにKaliをアップデートしようとしてエラー（EXPKEYSIG ED444FF07D8D0BF6 Kali Linux Repository）になった時やったこと

## リポジトリキーの期限切れに関するGPGエラーに対処する
以下サイトを参考に、
参考：[しばらくの間Kaliインストールを更新しなかった場合（tsk2）、リポジトリキーの期限切れに関するGPGエラーが表示されることに注意してください（ED444FF07D8D0BF6）](https://www.it-swarm.jp.net/ja/apt/kali-linux%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA%E3%81%AE%E7%84%A1%E5%8A%B9%E3%81%AA%E7%BD%B2%E5%90%8D%EF%BC%9A%E3%80%8C%E6%AC%A1%E3%81%AE%E7%BD%B2%E5%90%8D%E3%81%AF%E7%84%A1%E5%8A%B9%E3%81%A7%E3%81%99%EF%BC%9Aexpkeysig-ed444ff07d8d0bf6-kali-linux%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA%E3%80%8D/962627825/)

以下コマンドでアップデートが実行できた。

```
wget -q -O - https://archive.kali.org/archive-key.asc | apt-key add
sudo apt update
sudo apt full-upgrade -y
```
Railsポートフォリオで詰まった箇所まとめ（その都度追加）

Railsポートフォリオ作成中、時間を取られた箇所まとめ。精神的に来たもの一覧でもある。ほぼ自分への戒め用。もう少し早く書き始めればよかった･･･

####【ページ内リンク】
[０．環境](#０環境)
[Q１．フォルダ全消しした後、再度同じものを作り直したときに途中でエラーの嵐になる](#q１フォルダ全消しした後再度同じものを作り直したときに途中でエラーの嵐になる)
[Q2.テーブルにDateTimeが追加できない！](#q2テーブルにdatetimeが追加できない)

#０．環境
・AWS
・heroku/7.48.0 linux-x64 node-v12.16.2
・Rails 5.2.4.5
・ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-linux]
・MySQL 5.7.31
・PostgreSQL 9.2.24

#Q１．フォルダ全消しした後、再度同じものを作り直したときに途中でエラーの嵐になる
A．前に作ったデータベース消してなかった。そりゃ同名のDB作ろうとしたらエラー出ますよね。

【解決策】

```
mysql> drop database 消したいDB名;
```

・消したいDB名の確認方法は`mysql> show database;`

[ページ内リンクへ戻る](#ページ内リンク)

#Q2.テーブルにDateTimeが追加できない！
A．諦めてdateクラスとtimeクラスに分けた･･･(後に、`DateTime`って大文字`D`と`T`を使ってたからだと判明。これは酷い。)

【経緯】
・日付と時刻を入れたかったので、それら二つとも代入できるDateTimeクラスって便利じゃん！ということで`$ rails g model テーブル名 カラム名:DateTime`をやってみたが`$ rails db:migrate`でエラー。
・エラー文読んでみたらDateTimeがダメみたい
・`Time`でも`Date`でも出来なかった
・色々考えた結果、`$ rails g model テーブル名 カラム名:date ~`としたら出来た
・普通に`$ rails g model テーブル名 カラム名:datetime`としたら出来るのでは･･･？
・出来た。

【解決策】

```
$ rails g model テーブル名 カラム名:datetime
```

[ページ内リンクへ戻る](#ページ内リンク)
頭文字で分類するリストを作ってTableViewをの基本操作確認

TableViewの基本操作を確認。(cellの追加・削除・移動・Sectionの作成・SectionのTitle毎に分類)
二次元配列を使いこなすことが重要。Sectionとrow毎に配列でデータを管理する。

```swift

import UIKit
class ViewController: UIViewController, UITableViewDataSource {

    @IBOutlet weak var tableView: UITableView!
    @IBOutlet weak var textField: UITextField!

    var header = [String]()
    var row = [[String]]()

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self
        tableView.isEditing = true

        //A-Zを返す
        header = (65...90).map{ String(Character(UnicodeScalar($0)!)) }
        //A-Z以外はothersに分類
        header.append("others")

        for n in 0..<header.count {
            row.append([""])
        }
    }

    //Section数
    func numberOfSections(in tableView: UITableView) -> Int {
        return header.count
    }

    //    Header Title
    func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return header[section]
    }
    //    Footer Title
    //    func tableView(_ tableView: UITableView, titleForFooterInSection section: Int) -> String? {
    //        return "Footter"
    //    }

    //Section中のrowの数
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return row[section].count
    }

    //cellの中身を規定
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = UITableViewCell(style: .default, reuseIdentifier: "Cell")
        cell.textLabel?.text = row[indexPath.section][indexPath.row]
        return cell
    }

    //cellの削除
    func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
        row.remove(at: indexPath.row)
        tableView.deleteRows(at: [indexPath], with: UITableView.RowAnimation.automatic)

    }

    //cellの移動
    func tableView(_ tableView: UITableView, moveRowAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {
        let num = row[sourceIndexPath.section][sourceIndexPath.row]
        row[sourceIndexPath.section].remove(at: sourceIndexPath.row)
        row[destinationIndexPath.section].insert(num, at: destinationIndexPath.row)

    }

    //cellの追加
    @IBAction func insert(_ sender: Any) {
        let text = textField.text ?? ""
        let letter = text.prefix(1).uppercased()
        print(letter)

        if let firstIndex = header.firstIndex(of: letter){
            row[firstIndex].insert(text, at: row[firstIndex].endIndex)
            tableView.insertRows(at: [IndexPath(row: row[firstIndex].endIndex - 1, section: firstIndex)], with: .automatic)
        }else {
            row[row.endIndex - 1].insert(text, at: row[row.endIndex - 1].endIndex)
            tableView.insertRows(at: [IndexPath(row: row[row.endIndex - 1].endIndex - 1, section: row.endIndex - 1)], with: .automatic)
        }
        textField.text = ""
    }
}
```

![Videotogif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/843253/0db56bf9-bd1a-d280-3859-4f3693d6a127.gif)
Two Sum  〜leetcode〜

#〜問題文〜
```
Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target.

You may assume that each input would have exactly one solution, and you may not use the same element twice.

You can return the answer in any order.

 
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
Example 1:

Input: nums = [2,7,11,15], target = 9
Output: [0,1]
Output: Because nums[0] + nums[1] == 9, we return [0, 1].
Example 2:

Input: nums = [3,2,4], target = 6
Output: [1,2]
Example 3:

Input: nums = [3,3], target = 6
Output: [0,1]
 

Constraints:

2 <= nums.length <= 103
-109 <= nums[i] <= 109
-109 <= target <= 109
Only one valid answer exists.
```

引用元：　https://leetcode.com/problems/two-sum/
　　

簡単に要約すると、  
「与えられた配列(nums)内の数字同士で、足し合わせると、targetになる配列要素の添字（インデックス）を、2つ、配列として出力するようなメソッドを作りなさい。」  
だそうです。　　


## 〜回答例〜


```ruby

def two_sum(nums, target)
    search = Hash.new
    nums.each_with_index do |item,index|
        i = search[target-item]
        return [i+1, index+1] if i != nil
        search[item] = index
    end
end

```

回答例引用元（一部改変）：
https://leetcode.com/problems/two-sum/discuss/55/Accepted-ruby-solution

#以下、上記回答の分解分析


## 1. メソッドの定義

```ruby

def two_sum(nums, target)

        〜省略〜

end
```

 
「two_sum」というメソッドで第一仮引数＝「nums」と第二仮引数＝ 「target」と定義する。

## 2. 変数searchに代入

```ruby

         〜省略〜

    search = Hash.new

         〜省略〜

```

変数「search」に対して、「Hash.new」を代入する。

Hash.newについては以下を参考にする。

参考：https://docs.ruby-lang.org/ja/latest/method/Hash/s/new.html


```ruby


    nums.each_with_index do |item,index|
       
          〜省略〜

    end

```
「each_with_index」メソッド。
要素とその添字（インデックス）をブロックに渡して繰り返すメソッド。

参考：https://docs.ruby-lang.org/ja/latest/method/Enumerable/i/each_with_index.html

今回場合、ブロック変数の「index」部分に、添字（インデックス）が入ってくる。
また、添字は0から開始する。

## 3. 以下、繰り返し部分

```ruby

    
 i = search[target-item]
 
```
変数「 i 」に「search(=Hash.new)」を代入する。
「search」の添字の指定は、「target（＝本メソッドの仮引数）」-「item（＝numsの各要素）」で行う。


```ruby

   
  return [i+1, index+1] if i != nil


```

「return ~ if」の書き方は以下を参考にした。
参考：https://qiita.com/okhrt/items/3e98ba496bcf8c50ac64

つまり「return 処理　if 条件」。
↓
「i (=search(=Hash.new))がnil（空）でなければ、　「i+1」　と 「index（＝添字）+1」を配列で返しなさい。」という意味。

全体の最終的ゴールの出力はこの行。

```ruby

 search[item] = index

```
継続する場合はこちらに続く。
「search(=Hash.new)」の添え時として、「item（＝numsの各要素）」を指定してあげた数値は、indexに代入される。
↓
処理後再びループへ。
[Laravel]envファイルごとに処理を変更する

#概要
ローカル環境と本番環境、テスト環境でDB処理を変えたかったのでその方法を起筆します。

#実装
envファイルごとに分岐することで実装しました。

.envファイルと.env.productionファイルを用意してAPP_ENVを以下のようにする。

```..env
APP_ENV=local
```

```.env.production
APP_ENV=production
```

controllerにAPP_ENVによって分岐させる処理を加える。

```.php
<?php

namespace App\Http\Controllers;

use App\Http\Requests\PostRequest;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Storage;

class PostController extends Controller
{
    public function store(PostRequest $request)
    {
        if(app()->environment('local')){
        //local環境で行いたい処理を記述
        }else if(app()->environment('production')){
        //production環境で行いたい処理を記述
        }
    }
}

```

#まとめ

なんかもっとスマートな方法がありそうです。
知っていましたら教えてください。
sass (scss) での z-index 管理

ちょっと大きめの規模のプロジェクトで `z-index` の管理が必要になったので、簡易的に管理するためにつくったものです。
既存ライブラリの `z-index` もあわせて管理する必要があったので、マップにそれも書き込みつつ運用します。マップに該当のキーがない場合は、`getNextHighestZIndex` 関数で次の最上位の `z-index` を取得してマップに書き込むようにしてみたものの、あまり使いませんでした。

```manager.scss
@use 'sass:list';
@use 'sass:map';

//管理用のマップ（例）
$z-index-order: (
    header: 1,
    button: 2,
    lib-modal: 100, //ライブラリのz-index
    offcanvas: 101,
    modal: 102,
);
$last-z-index: null;

@function getZIndex($key:null) {
    $has: map.has-key($z-index-order, $key);
    @if $has {
        @return map.get($z-index-order, $key);
    }
    @else {
        $nhz: getNextHighestZIndex();
        $m: map.set($z-index-order, $key, $nhz);
        @return $nhz;
    }
}

@function getNextHighestZIndex() {
    $z-index: 0;
    @each $key, $idx in $z-index-order {
        @if $idx > $z-index {
            $z-index: $idx;
        }
    }
    $last-z-index: $z-index + 1;
    @debug "last-z-index:#{$last-z-index}";
    @return $last-z-index;
}
```


```sample.scss
@use "./path/to/manager";

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: manager.getZIndex(modal);
}

```

### 使用例

<p class="codepen" data-height="300" data-theme-id="17026" data-default-tab="css,result" data-user="1cco" data-slug-hash="rNWqMQb" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="SCSS: z-index management">
  <span>See the Pen <a href="https://codepen.io/1cco/pen/rNWqMQb">
  SCSS: z-index management</a> by 1cco (<a href="https://codepen.io/1cco">@1cco</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
【Ruby】to_iメソッドで値を整数に変換する。

個人メモです。

`to_i`を使うと整数に変換できる。


```rb:to_i
test = { x: "123", y: "456", z: "789" }
puts test[:x].class  #String
puts test[:x].to_i.class #Integer
```

`class`は型を調べるメソッド。

<br>

```rb:to_i
test = { x: "123", y: "456", z: "789" }
puts test[:x].is_a?(Integer)  #false
puts test[:x].to_i.is_a?(Integer)  #true
```

`.is_a?(型)`は指定した型かどうかを調べるメソッド。



<br>
##次の処理は何を意味しているか？

```rb:
    per_page = params[:per_page].to_i
```

シンボルparamsの中のper_pageの値を取得し整数に変換したものを、per_pageに格納している。

つまり、per_pageにはただの整数が入っている。
IFTTTでiOSのリマインダーが同期されない場合

IFTTTでthenアクションとしてiOSのリマインダーを設定しても、IFTTTアプリを開くまで同期がされない場合についてです。
Alexa (Echo Dot)のやることリストに項目を追加したときにリマインダーに追加したかったのですが、うまく動作しなかったので書きました。

# 解決策

「省電力モード」をオフにして、IFTTTの「Appのバックグラウンド更新」をONにします。

#### 「省電力モード」をオフにしたくない場合

残念ながら「省電力モード」がオフのままでは期待通り動作しないようです。
実行時に通知を送信をオンにすることで、アクションが実行されたの数分後〜1時間後までには通知が来るので、その通知をタップすることでリマインダーに同期するという手を取るのが1番良いかと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155587/a5a5bb5d-a3ba-6839-8d79-7fd248b8f1f3.png)
アクションをリマインダーではなく通知に設定すればもっと早く通知が届くので、それを見て手動でリマインダーを追加するのも良いかもしれません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155587/32600fba-a507-87c6-08aa-40450d171d6a.png)


他にも

- ショートカットAppを使って、IFTTTを定期的に開く（時間や場所によって）
- ショートカットAppを使って、iPhoneでリマインダーアイコンをタップするとIFTTTを経由して開くようにする
- Dropboxに追加してMacで同期：https://www.reddit.com/r/ifttt/comments/dd0c02/ios_reminders_applet_not_seeing_new_tasks_in_ios/fgjifr7?&context=3

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155587/8d45cb53-5d05-4fd8-86f5-71106de77543.png)
などがありますが、かなり利便性は低下します。
Alexaスキルの「Any.do」などを追加すると、やることリストをスマホのアプリでも見られるようになる(純正リマインダーに同期はできない)ので、そちらを使うのも手かもしれません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155587/7f86b0ae-40ed-6304-7224-5a41025d13ec.png)
Vue.js始めてみました①

この度Vue.jsを学び始めました。
その勉強内容をまとめます。

## Vue.jsとは

Evan Youさんという方が手軽に小規模なアプリケーションを作れることを目的に作られたフレームワーク。
SPA(シングルページアプリケーション)なので1つのページの変化があった部分だけ表示を変える。
その為、読み込みが少なくスムーズで切り替えが素早い。

個人的にはEvanさんは日本のアニメが好きなのでVue.jsの各バージョンのコードネームが日本のアニメからきていることに親近感を覚えました。
`Dragon Ball`とか`Hunter×Hunter`とか。可愛いな。


## インストール

[Vue.jsインストールページ](https://jp.vuejs.org/v2/guide/installation.html)

上記に記載されている通り

- CDN
- ダウンロード
- Vue-cli

の3つの方法があります。

一番手軽なのがCDNだと思います。
1行コードをheadに組み込むだけで使えるようになります。(開発バージョンと本番バージョンがあリます)
本日時点では以下ですが、公式サイトから必ず確認してください。

```PHP:開発バージョン
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
```

開発バージョンと本番バージョンの違いは、開発バージョンだと警告文を出力してくれるなどあるみたいです。


## 使ってみる

以下のようにheadにCDNを組み込みます。

```PHP:
<head>
  <meta charset="UTF-8">
  <title>Sample</title>
  <link rel="stylesheet" href="style.css" >

// 以下を追加
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

</head>
```

以下のようにHTML要素を作ります。(説明だけなのでテキトーです)

```PHP:
<div id="app">
  <p>{{ text }}</p>
</div>
```

以下のようにVueインスタンスを作成します。
script要素で作成します。

```PHP:
<script>
  new Vue({
    el: '#app',
    data: {
      text:'Hello!World'
    }
  })
</script>
```

上記のように記述すると`data`の内容がHTML要素の`text`に反映され、`Hello!World`とブラウザ上に表示されます。

##  Vueインスタンスの中身

```PHP:

new Vue({
  el:どのHTML要素とつなげるか
  data:どのデータを入れるか
  methods:処理内容
  computed:どのデータを使って計算するか
  watch:データの監視
})

```

上記のように作成します。

一旦ここまでです。
arduinoでナップザック問題

#概要　

ナップザック問題、やってみる。

#問題

|価値|	容量|
|:--|:--|
|6|3|
|7|4|
|8|6|
|1|1|
|4|5|

容量のリミットは、12
最も、価値が大きくなった時の価値を答えよ。

#サンプルコード

```

int N = 5;
int W = 12;

int wt[5] = {
	3,
	4,
	6,
	1,
	5
};
int va[5] = {
	6,
	7,
	8,
	1,
	4
};
int dp[13];

void setup() {
	Serial.begin(115200);
	Serial.printf("\nok\n");
	for (int i = 0; i < N; i++)
	{
		for (int w = W; w >= 0; w--)
		{
			if (w - wt[i] >= 0)
			{
				if (dp[w] < dp[w - wt[i]] + va[i])
				{
					dp[w] = dp[w - wt[i]] + va[i];
				}
			}
		}
	}
	Serial.print(dp[W]);
}
void loop() {
	delay(10);
}



```

以上。
【初心者】Swift UIを勉強する その③ ーーーSlidebarとNavigationLink

# はじめに

iPadの画面サイズを最大限に利用するために、１つの画面に複数の階層を作成するのが理想です。
**今回のはiPhoneだけじゃなく、iPadでもスライダーバーとラベルも作成していきます。**

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/c6f6e833-306e-3b01-e889-f62f84f39cf5.gif" width=20%> 　　　　　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/a60a0ab9-2bfa-0ca1-d9cd-b9fd7009e8fd.gif" width=30%> 


# 目次
<!-- タイトルとアンカー名を編集 -->
1. [SlidebarとLabel](#SlidebarとLabel)
2. [NavigationLink](#NavigationLink)
3. [iPad](#iPad)
4. [まとめ](#まとめ)
5. [参考文献](#参考文献)

<!-- 各チャプター -->
<a id="#SlidebarとLabel"></a>
# SlidebarとLabel
・`cmd N`で新しいファイル**Slidebar**を作成します。
・前回の記事と同じく`List`を使い、`Label`をGroup化します。
・前回の`listStyle`は`InsetGroupedListStyle()`を使いましたが、今回は`SidebarListStyle()`を使います。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/a7519347-e80a-227a-7506-d0247b0bd403.png" width=55%> 　　　　　　　　　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/b55108e1-fd2d-24e3-229a-674694d3a30a.png" width=30%>

・`List`ごとを`NavigationView`に取り込んで、`navigationTitle`でタイトルを追加します。navBarにタイトルは自動生成されます。

```swift:Slidebar.swift
NavigationView {
   Label("Tutorials", systemImage: "list.bullet.rectangle")
   Label("Livestreams", systemImage: "tv")
   Label("Certificates", systemImage: "mail.stack")
   Label("Search", systemImage: "magnifyingglass")
}
   .listStyle(SidebarListStyle())
   .navigationTitle("Learn")
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/382eaeba-9fda-03a1-b7e6-5d207e44ff56.gif" width=20%>




<a id="#NavigationLink"></a>
# NavigationLink
・UIKitではボタンなど`addTarget`を使って画面遷移しますが、SwiftUIでは`NavigationLink`を使います。
・とてもシンプルで、引数に遷移先のViewを指定し、クロージャー内でトリガーを定義します。
　遷移先は`CoursesView()`を指定します。

```swift:Slidebar.swift
NavigationView {
    List {
        NavigationLink(destination: CoursesView()) {
              Label("Courses", systemImage: "book.closed")
     }
}
```
　　
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/7f82c03d-74a9-4d53-96cf-c03b2c2696a9.gif" width=20%> 

<a id="#iPad"></a>
# iPad
・iPadで実行する際に、デフォルトの画面は`CouresesView()`が表示されません。暫定的な解決方法は一番最初に一回`CouresesView()`を実行してもらいます。
![截屏2021-02-28 22.15.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/9a8f1ebf-e866-1866-bb07-c9c9ceaec18d.png)



<a id="#まとめ"></a>
# まとめ
・SnapKitとAutoLayoutに全然負けない気がしました。
・styleまわりは馴染みがなくて、覚えていくしかありません。

**ソースコード[Github](https://github.com/wsimple1028/swiftUI_ios14)**

<a id="#reference"></a>
# 参考文献
- [Design Code --- SwiftUI for iOS 14](https://designcode.io/swiftui-ios14)
ファイルのバックアップ時に日付をつける（2回目実行時は時間秒数を追加）　〜　Linux シェルスクリプト　

初めましてshoです。
今回はとあることがキッカケで以下の処理を目的とするシェルスクリプトを作成いたしました！

***・任意のファイルを日付つきでバックアップする（cpコマンド）***
***・同じ日に同じファイルのバックアップがあった際は時間、秒数を追加してバックアップする***
***・実行時は実行内容の表示***


簡単なコードなので実用性は低いとは思います。もしアドバイス等何かあればコメントいただけると嬉しいです。



（※学習記録やメモ書き目的で始めました。ほぼ初学者レベルなので理解が浅いところや誤りがあるかと思いますがよろしくお願いします。またアドバイス等コメントいただけるとすっごく嬉しいです。早く先輩方のお力になれるよう精進します。）



#とりあえずシェルスクリプトの中身

```
#!/bin/sh

file_name="$@"
backup_file_name=${file_name}.$(date +%Y%m%d)

if [ ! -e ${backup_file_name} ]
then
 cp -pv ${file_name} ${file_name}.$(date +%Y%m%d)
else
 cp -pv ${file_name} ${file_name}.$(date +%Y%m%d_%H%M%S)
fi

```

#実行結果
```
#ls
file1 file2
#backup-shell file1
`file1' -> `file1.20210307'
#ls
file1  file1.20210307  file2
#backup-shell file1
`file1' -> `file1.20210307_165426'
#ls
file1  file1.20210307  file1.20210307_165426  file2

```



##解説！
照らし合わせながら処理の流れ。

```

file_name="$@"
→シェルスクリプト実行時に受け取った引数（今回の場合バックアップしたいファイルのこと)を変数file_nameに格納

backup_file_name=${file_name}.$(date '+%Y%m%d')
→変数backup_file_nameにスクリプト実行時に受けとったファイル名を日付つきで格納

if [ ! -e ${backup_file_name} ]
→変数backup_file_nameのファイルが存在していなければ次の処理をする
then
 cp -pv ${file_name} ${file_name}.$(date +%Y%m%d)
→シェルスクリプト実行時に受け取ったファイルに日付をつけてコピーする
else
 cp -pv ${file_name} ${file_name}.$(date +%Y%m%d_%H%M%S)
→もし変数backup_file_nameのファイルが存在していたら時間と秒数を追加してコピーする
fi

```

##もうちょっとだけ詳しく

```
file_name="$@"
```

”＄@”　はシェルスクリプト起動時に付けられた引数の内容をそのまま受け取りたい時に使うもの。
この書き方で下記の

```
＃backup-shell  file1
（↑シェルスクリプト名)(↑コピーしたいファイル名）
```

のようにスクリプト実行時に「スクリプト名　コピー元ファイル名」と入力すればコピー元ファイルをそのまま引き継ぎスクリプトファイル内の変数　＄filename　に格納してくれる。


```
if [ ! -e ${backup_file_name} ]
```

-e は対象が存在しているか確認するもので、今回は　！　をつけているので
「対象が存在していない場合」という条件にして最初の処理をしています。
（※「！」をつけると否定文になる）

でも　-e　は「ファイルタイプにかかわらず、存在すればコマンド実行する場合」に用いられるらしいのでもっと厳密に指定して実行したい場合は違うの使った方がいいのかな。。

・・・てかですね、理解した的に言っていますがこの「-e」を発見するのにめっさ苦労しました。
ひどい。もっとググり力つけたい。


ざっくり書きましたが以上です！
最後まで読んでくださった方いましたらありがとうございます！



####参考にしたサイト↓

https://linuxfan.info/post-1739
[AWS] Windows版AWS Cliだけで、ECRにDockerイメージをPushする方法

# ECRへのログイン

通常、ECRへのDockerイメージのPushは、ECRリポジトリ管理画面の「プッシュコマンドの表示」から行えます。
この中に、

1. リポジトリへのログイン
2. Dockerイメージのビルド
3. Dockerイメージへのタグ付け
4. ECRリポジトリへイメージPush

という手順が示されていますが、Windowsの場合、最のリポジトリへのログインが、PowerShellになってます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427998/7c41506d-ec6b-0f78-924b-f5b920b75335.png)

# AWS Tools for PowerShell

> Windows PowerShell 用 AWS Tools を使用すると、デベロッパーと管理者が AWS のサービスとリソースを PowerShell スクリプト環境で管理できます。Windows、Linux、MacOS 環境の管理に使用するのと同じ PowerShell ツールを使用して、AWS リソースを管理できるようになりました。

となってます。そう、これは、あくまでPowerShell用であって、Windows版 AWS Cliとは別物なのです。
正直、AWS Cliだけで完結したいですよね。

# AWS Cliで最初のログインを突破する

これさえできれば、このあとは、dockerコマンドのみでいけるのです。
ということで、AWS Cliコマンドのみでやる方法ですが、実に簡単です。

PowerShell版

```
(Get-ECRLoginCommand).Password | docker login --username AWS --password-stdin {AWSアカウントID}.dkr.ecr.{リージョン}.amazonaws.com
```

AWS Cli版

```
aws ecr get-login-password | docker login --username AWS --password-stdin {AWSアカウントID}.dkr.ecr.{リージョン}.amazonaws.com
```

単純に、現在使用しているAWSアカウントでの、ECRのパスワードを標準出力経由で、`docker login`コマンドに渡してあげればいいだけです。
form_withのlocal: trueオプションがいらないパターン

コメント機能実装時コメントを非同期で更新したい時にActionCableを使った。
コメントを投稿するとjsファイルは動いているが画面の読み込みが起きていた。おまけにコメントの送信ボタンを押すと、ボタンの要素にdisabled属性が付与されたりした。原因はform_withのlocal: trueオプションだったようだ。非同期を実現するにはlocal: trueオプションは不要のようだ。
【jquery,js】エンコード、デコードを実装する [encodeURI,decodeURI,try] [js12_20210308]

####  <font color='orange'>処理の概要</font>
テキストエリアに表示されたコードを、エンコード・デコードボタンを押下した時、エンコーディング、デコーディングを行う。

##### 処理のフロー：
　(1)ページ読み込み時にinit()メソッドにより、テキストエリアに文字列が出力される
　(2)デコード、エンコードボタン押下時にURIメソッドにてコーディングされる
　(3)デコードの場合は、エラーによりプログラムが異常終了するので、tryでcatchをしてあげる

####  <font color='orange'>画面イメージ</font>


#####画像１
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647299/7138d35e-4ca5-8e83-162f-9e0c83edf636.png" width="400px">


#####画像２
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647299/05312c7d-addb-ca4d-c435-d4d3d24896dc.png" width="400px">

#####画像３
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647299/6611a981-48ba-0f92-9e1a-9fe249ea073d.png" width="400px">


####  <font color='orange'>ソースコード</font>
```html:index.html
<body onload="init()">
	<textarea id="beforeEncodeText"></textarea><br>
	<input type="button" id="encodeButton" value="エンコード">
	<input type="button" id="decodeButton" value="デコード"><br>
	<textarea id="afterEncodeText"></textarea>
</body>
```

#### リファクタリングする前
```javascript:main.js
function init(){
    var lobjText = ""
    var defaultStr = [
        ["https://www.google.co.jp/#q=%E6%97%A5%E6%9C%AC%E8%AA%9E"],
        ["--------------------"],
        ["https://www.google.co.jp/#q=日本語"]
    ]
    
    $.each(defaultStr,function(){
        lobjText = lobjText + this + "\n";
    });
    $("#beforeEncodeText").val(lobjText)
};

$(function(){
    $("#encodeButton").click(function(){
        var encodeText = $("#beforeEncodeText").val()
        encodeText = encodeURI(encodeText);
        $("#afterEncodeText").val(encodeText);
    }); 

    $("#decodeButton").click(function(){
        var dencodeText = $("#beforeEncodeText").val()

        try {
            dencodeText = decodeURI(dencodeText);
        } catch(e) {
            console.log("err : " + e)
        }

        $("#afterEncodeText").val(dencodeText);
    }); 
});
```

####  <font color='orange'>ポイント</font>
html：
(1)なし
js：
(1)URIはhttpやftpにてパスを指定する際に使用する。パスには日本語が指定できないため、%と16進数で表記される。
(2)URL内にクエリなどで日本語を指定したい場合はエンコードメソッドを使用する
(3)デコードはエンコードの逆で元の文字列に置き換えます。
(4)デコードは失敗するとエラーが出るため、trycatchを使用する。引数のeにはエラーの内容が入っている（例えば%FFはデコード出来ない）

####  <font color='orange'>参考資料</font>
JavaScript(仕事の現場でサッと使える！デザイン教科書)　p97
【Ruby】before_actionとは何か？引数を渡す方法とオプションの使い方実例。

【Ruby】before_actionとは何か？引数を渡す方法とオプションの使い方実例。

##before_actionとは何か？
**各アクションが動く前に実行する処理を記述**できる。
コントローラの冒頭に記述する。


##記述方法

1. [引数なしの場合](#引数なしの場合)
2. [引数ありの場合](#引数ありの場合)
3. [オプション](#オプション)


##1. 引数なしの場合

・`before_action :<メソッド名>`

メソッドは同じファイルの下部に記述する。（※引数を渡すとエラーになる）


<br>
**▼実例**

```rb:before_actionの例
class UsersController < ApplicationController

  before_action :require_permission

  #（省略）アクションを記述

  #before_actionの処理
  def require_permission
    unless current_user.partner? || current_user.admin?
      redirect_to admin_root_path, alert: 'ここから先は管理者限定です！'
    end
end
```

アクションを実行する前に、`require_permission`を実行する。
もし、current_userのpartnerかadminの値が存在しなければ、admin_root_pathにリダイレクトする。その際にalartを表示する。



###unless文
条件式がfalseなら処理を実行する。
`if !条件式`と同じ

```rb:
unless 条件式 
  処理
end
```

###||
または（or）。

オブジェクトcurrent_userの`partner`または`admin`の値が存在すればtrue,　存在しなければfalseを返す。


###redirect_to
・`redirect_to <リダイレクト先>[, <オプション名>: <値>]`

`alert:`で、アラートを表示する
 
（参考）[Ruby公式 redirect_to](https://railsdoc.com/page/redirect_to)



<br>
##2. 引数ありの場合
処理に引数を渡す場合は、矢印と波かっこ`→ { }`を使う。

`before_action ->{ 処理 }`

 - 引数を渡さない場合でも使える。


**▼実例**

```rb:before_actionの例
class UsersController < ApplicationController

  before_action ->{
    require_permission("password")
  }

  #（省略）アクションを記述

  #before_actionの処理
  def require_permission("password")
    unless password === "xxxxx"
      redirect_to admin_root_path, alert: 'ここから先は管理者限定です！'
    end
end
```


<br>
###処理を複数記述する
処理を複数記述する場合も、`->{ }`を使う。

```rb:
  before_action ->{ 処理1, 処理2 }
```



<br>
##3. オプション
オプションをつけることで条件を絞ることができる。

| オプション | 内容 |
|:-:|:--|
| :only  | 実行するアクション  |
| :except  | 実行しないアクション  |
| :if  | 実行する条件 |
| :unless  | 実行しない条件 |

例えば、createとshowアクションのみに適用したい場合は、`only: [:create, :show]`をつける。



```rb:before_actionの例
class UsersController < ApplicationController

  before_action :require_permission, only: [:create, :show]

  #（一部省略）アクションを記述
    create: {
      create_params: :users_params,
      json_renderer: :show_renderer,
    },
    show: {
      json_renderer: :show_renderer,
    },

  #before_actionの処理
  def require_permission
    unless current_user.partner? || current_user.admin?
      redirect_to admin_root_path, alert: 'ここから先は管理者限定です！'
    end
end
```


<br>
**▼`->{ }`を使った場合も同じ**

```rb:before_actionの例
class UsersController < ApplicationController

  before_action ->{require_permission}, only: [:create, :show]

  #（一部省略）アクションを記述
    create: {
      create_params: :users_params,
      json_renderer: :show_renderer,
    },
    show: {
      json_renderer: :show_renderer,
    },

  #before_actionの処理
  def require_permission
    unless current_user.partner? || current_user.admin?
      redirect_to admin_root_path, alert: 'ここから先は管理者限定です！'
    end
end
```


<br>
・[Rails公式 before_action](https://railsdoc.com/page/before_action)
Pythonで辞書から探す時のTips(個人的)

#概要
Pythonの辞書から探す時、Keyが存在しないとエラーが出てしまう。

今までは`if`で回避していたが、そういえば`except KeyError`でも回避できるので、ごく簡単にまとめる。
#内容
##環境
macOS Catalina
Python 3.7.0
##準備
```Python:tmp.py
names = {'tokino': 'sora', 'sakura': 'miko'}
print(names['suzuki'])
```
ここで、`names['suzuki']`とすると、エラーが出てしまう。
##解決策1 `if`を使う
```Python:tmp.py
if 'suzuki' not in names:
    names['suzuki'] = 'not yet'
print(names['suzuki'])
```
##解決策2 `try`を使う
```Python:tmp.py
try:
    print(names['suzuki'])
except KeyError:
    names['suzuki'] = 'not yet'
    print(names['suzuki'])
```
##蛇足
単にデフォルト値を欲しいだけなら、

```Python
print(names.get('suzuki', 'not yet'))
```

デフォルト値を設定したいだけなら、
`defaultdict`を使うことで解決するかもしれない。

私の例はあまりいい例ではないと思う。
#参考にさせていただいた本・頁
特になし
#感想
書き方の幅が広がって良かった。
#今後
`try`の方を使った方が自然な時は、使っていこうと思う。
AndroidStudioでMissing essential plugin 立ち上がらない

Flutterの環境構築でAndroidStudioをダウンロードした後、間違えてKotlinをダウンロードしてしまい、消したところ…

![スクリーンショット 2021-03-08 18.42.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1007371/e434ae2c-955e-1744-3689-09170657a1da.png)

Missing essential plugin...と出た。和訳すると、「最初からダウンロードし直せ！」ということなので、

指示通り実行したが解決せず、同じことをn+1回繰り返していた。

ググってみると、解決できました。参考記事はこちらです↓

https://www.it-swarm.jp.net/ja/android/android-studio%E3%81%AB%E5%BF%85%E9%A0%88%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3orgjetbrainsandroid%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%9B%E3%82%93/816969405/

要約すると、　「AndroidStudio4.1を消せ！」ということです。

macOS：~/Library/Application Support/Google/AndroidStudioPreview4.1

ここで私はLibraryやApplication Supportというファイルが無くて困りました。

これらのファイルはターミナル上でしか見られないファイルなのです。初学者は気をつけてください！

さらに注意してほしいのが、

✕　　＄　cd Application Support
○　　＄　cd "Application Support"

と打つことです。

以上です。
その結晶構造、VESTAで見える化しませんか？

## はじめに
**結晶構造の可視化ツール[VESTA](https://jp-minerals.org/vesta/jp/)の概要と具体的な使い方**についてご紹介いたします。

## VESTAとは
VESTA（**V**isualization for **E**lectronic and **ST**ructural **A**nalysis）は結晶構造、電子・核密度等の三次元データ、及び結晶外形の可視化プログラムです。結晶構造を簡単に可視化することができ、第一原理計算ソフトウェアの入力ファイルへの変換や、計算結果の可視化にも利用可能です。

## VESTAの使い方
[公式マニュアル](https://jp-minerals.org/vesta/archives/VESTA_Manual.pdf)もありますが、以下のサイトなどにも詳しく使い方が説明されており参考になると思います。

- [MateriApps](https://ma.issp.u-tokyo.ac.jp/app-post/1176)
- [研究者のためのCG作成術②（VESTA編）](https://www.chem-station.com/blog/2018/10/cg2.html)
- [VESTAの使い方](http://science.shinshu-u.ac.jp/~tiiyama/?page_id=3207)

## VESTAの使用例
「Materials Projectからcifファイルの入手→VESTAで可視化」の流れについて解説いたします。今回は例として"NaCl"の結晶構造を可視化していきます。

### cifデータの取得
[Materials Project](https://materialsproject.org/)のトップページで"Na"と"Cl"を選択して検索します。
![1_materialsproject_NaCl.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1057114/eb92169f-d740-d6ef-77a6-e8443f6d6298.png)

合計12個の候補が検索されました。NaClで"E Above Hull"が最も小さい赤枠で囲ったmp-22862を選択します。なお、Energy Above Hullは熱力学的凸包（Convex Hull）からどのくらいエネルギー的に不利であるかを表す指標です。安定相では0であり、Energy Above Hullが小さいということは実験上最も生成しやすい（安定である）ことを表しています。
![2_materialsproject_NaCl_list2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1057114/62d46f8a-749c-1cd5-f867-df29dc4caef6.png)

CIF→Computedを選択し、cifファイルを取得して保存します。
![3_materialsproject_NaCl_file.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1057114/02c57e5d-4838-7aa9-3df7-a6660f2771e9.png)

### VESTAでの可視化
VESTAを起動し、File→Openで上記で保存したcifファイルを選択して開きます。
![4_VESTA_file_open.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1057114/7b61fbf1-41cc-954e-fef8-bcdd6402b583.png)

ファイルを開くと以下のような画面が表示されます。ここから原子間の距離の検索や結晶構造のアレンジなど様々なことが実行できます。
![5_VESTA_NaCl.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1057114/acf6d702-d772-73bd-ddf2-286fc78470a1.png)

## まとめ
**VESTAの概要と具体的な使い方**についてご紹介いたしました。

### 参考
- [VESTA（日本語ページ）](https://jp-minerals.org/vesta/jp/)
- [MateriApps](https://ma.issp.u-tokyo.ac.jp/app-post/1176)
- [研究者のためのCG作成術②（VESTA編）](https://www.chem-station.com/blog/2018/10/cg2.html)
- [VESTAの使い方](http://science.shinshu-u.ac.jp/~tiiyama/?page_id=3207)
- [Materials Project](https://materialsproject.org/)
- [計算機化学とインフォマティクスによる材料の熱力学的安定性と反応性](https://eprints.lib.hokudai.ac.jp/dspace/bitstream/2115/79152/3/Final_20200804%EF%BC%BFHUSCUP_4.pdf)
RSpecにて引数が必要なsubjectの使い方

# はじめに
RSpecで、同じメソッドに対してのテストを複数回書くシーンでは、subjectを使うことでDRYなコードを書くことができます。
ここでは引数が必要なメソッドのテストをsubjectを用いて書きます。

# 実装
ユーザー名(user_name)、自己紹介(pr)カラムがあるユーザーを、フリーワードで検索するuser_search(free_word)メソッドをテストするとします。普通に書くと以下のように繰り返し同じ処理が出てきます。

```spec/models/user_spec.rb
describe "#user_search" do
  context "when 'user_name1' is given" do
    it "return 1 result" do
      expect(Job.user_search("user_name1").count).to eq 1
    end
  end

  context "when 'pr1' is given" do
    it "return 1 result" do
      expect(Job.user_search("pr1").count).to eq 1
    end
  end
end
```
これは以下のようにsubjectでまとめて処理を書くことができます。

```spec/models/user_spec.rb
describe "#user_search" do
  subject { User.user_search(field).count }

  context "when user_name1 is given" do
    let(:field) { "user_name1" }
    is_expected.to eq 1
  end

  context "when pr1 is given" do
    let(:field) { "pr1" }
    is_expected.to eq 1
  end
end
```

引数はletで定義することができます。
AtCoder ABC194振り返り(灰コーダー　AB2完:C保)

注意：この記事は競プロ初心者が茶色を目指すために復習や反省するだけの記事です。使用言語はPython3で現状のパフォーマンスは200-300程度です。
あくまで自分の備忘録ですが同レベルの方の新しい発見に繋がれば嬉しいです。

#結果

A問題 正解
B問題 正解(ミスが多く再提出と時間がかかった)
C問題 やりたいことは分かったが計算量の面でTLEになり不正解

#B問題
N人の人がそれぞれ仕事A,BをAi分Bi分で終わらせることができる。その時最短で終わる時間を求める問題。別の人が仕事をするならA,Bの長いほうが終わる時間になり同じ人が仕事をするならA,Bの和が終わる時間になる。

まず根本的な考え方のミスとしてAの時間最小値とBの時間最小値と同一人物の合計の最小値を求めそれらを比較したがそれだと不正解になることに気が付くのが遅かった。
例)
1.A1=4 B1=4
2.A2=8 B2=5

この時一人目に仕事を任せると4+4で8分となってしまう。そのうえ最小値で求めても4分と4分で答えが4分になるが実際A1とB2で5分が一番早く仕事が終わる。
2<N<1000の条件があったため総当たりで考えても計算量は全く問題なかったことに気が付くのが遅かった。

#C問題
N個の整数が与えられる。各要素同士の2乗の和を求める。
やることは分かったのでやってみたらTLEになった。

```Python:C.py

#TLEになったコード
N=int(input())
num=input().split(" ")
all=0
for a in range(N):
    for b in range(a,N):
        if a!=b:
            all=all+(int(num[a])-int(num[b])**2
print(all)

```

与えられる数値に|A|<200という制約があったためそれを利用するらしい。
N<3×10^5なのでO(N^2)だと10^10を超え実行速度に問題が出るパターンがある。
しかし-200<A<200なら各要素の2乗のパターンは多く見積もって400×400で160000しかない。
(a-b)^2で求めようとしていたものを考え方を変え、S^2となるSの量を求める。
(雑な例だがS=1が2個,S=3が3個なら1*2+3*2=11となる)

C問題、かなり考えていますが今の理解はここまでなのでいったん保留にします。
他の過去のC問題などもこなしてから再考しようと思います。

#身についたこと
・二つ以上の要素でN>10^5の可能性がある時計算量が多くなるためほかの面を利用する。
　今回のC問題の場合は要素数Nではなく要素の範囲-200<i<200を用いてfor文を回す。(C問題)
・全検索で10^10までの回数なら全検索もあり。(B問題)
vimeo API で発火したイベントを確認したい

#初めに
`vimeo API` で発火（登録）したイベントを確認したくて、簡単に表示できる方法を探した。

##video.jsの場合

`videoJS`の`onメソッド`は配列を渡せるらしく、下記のような記述が可能だそうだ。

```video.js
video.on(['loadstart', 'loadedmetadata', 'loadeddata', 'play', 'playing', 'pause', 'suspend', 'seeking', 'seeked', 'waiting', 'canplay', 'canplaythrough', 'ratechange', 'ended', 'emptied', 'error', 'abort'], (e) => {
    console.log(`EVENT: ${e.type}`);
});
```
[[Video.js] JavaScriptで動画を再生する
](https://qiita.com/yun_bow/items/fe94d95c4eb4dc3a0803)	


###Parameters

|name	 |Type	| Required	|  Description|
|:-----------|------------:|:------------:|:------------:|
| first|         String or Component|yes |The event type or other component	|
| second	| function or String | yes	|The event handler or event type|
| third	       | function	| yes	|The event handler|

#vimeoの場合

vimeoのonメソッドは…


`on(event: string, callback: function): void`

残念、`文字列型`しか渡せないようです。



##実装
イベントは`cuechangeを除き`HTML5の`video`で使われるものと同じそうなので、該当のイベントを配列にして出力することで解決した。

```js
//You can listen for events in the player by attaching a callback using .on():

player.on('eventName', function(data) {
    // data is an object containing properties specific to that event
});
//The events are equivalent to the HTML5 video events (except for cuechange, which is slightly different).

//To remove a listener, call .off() with the callback function:
```

```vimeo.js
var items = [ 'audioprocess', 'canplay', 'canplaythrough', 'complete', 'durationchange', 'emptied', 'ended', 'loadeddata', 'loadedmetadata',
 'pause', 'play', 'playing', 'progress', 'seeked', 'ratechange', 'seeking', 'stalled', 'suspend', 'timeupdate', 'volumechange', 'waiting' ];

items.forEach(function(value) {
  player.on(value, function() {
    console.log(value);
  });
});
```
#引用
[[Video.js] JavaScriptで動画を再生する
](https://qiita.com/yun_bow/items/fe94d95c4eb4dc3a0803)	

[MDN Web Docs 動画埋め込み要素
](https://developer.mozilla.org/ja/docs/Web/HTML/Element/video#events)	

https://github.com/vimeo/player.js/blob/master/dist/player.js
texstudio bibtex コンパイル

しばらく期間を開けたら何故かコンパイルできなくなったため、（何か設定を変えてしまった）
備忘録として現状コンパイルできる設定を書き記す。

![tex_settings.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/582711/01fadf3e-b8f3-0424-3525-1da61250f49e.png)

minimal working exampleは以下

```
\documentclass[a4paper]{article}

\usepackage{natbib}


\begin{document}
	
\citet{ciationkey} is good
	
\bibliographystyle{jecon}
\bibliography{test}
	
\end{document}
```

とりあえずここまで。
HTTP編　１

# HTTPの重要性
HTTPはRFC2616で規定されたプロトコルです。
RFC2616で規定されているバージョン1.1で、これが現時点での最新バージョンです。
現在のWebではこのバージョンが最も使われています。

HTTPはHTMLやXMLなどのハイパーテキストだけでなく、静止画、音声、動画、JavaScriptプログラム、PDFや各種オフィスドキュメントファイルなど、コンピュータで扱えるデータであればなんでも転送できます。

HTTPはWebの基盤となるプロトコルです。

# TCP/IPとはなにか

HTTPはTCP/IPを基盤にしています。

TCP/IPはインターネットの基盤を構成する重要なネットワークプロトコルです。
TCP...Transmission Control Protocol
IP... Internet Protocol
## インターネットのネットワークプロトコル
インターネットのネットワークプロトコルは階層型になっています。以下図
![https___qiita-image-store.s3.ap-northeast-1.amazonaws.com_0_78136_4cb6315c-2d72-2be5-a860-e364b771e28e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/978289/559d7c46-ac12-e4b1-0402-ed2fc163c4b5.png)

### ネットワークインターフェース層
ここは、物理的なケーブルやネットワークアダプタに相当する部分

## インターネット層
ここが担当するのは、ネットワークでデータを実際にやりとりする部分で、TCP/IPではIPがこれに当たる。
IPではデータの基本的な通信単位をパケットと呼ぶ。指定したIPアドレスを送り先として、パケット単位でデータをやり取りして通信する。
IPは自分のネットワークインターフェースでデータを送り出すことだけを保証していて、送り出したデータが多数ルータを経由して最終的な送り先まで届くかどうかは保証していません。

## トランスポート層
ここは、IPが保証しなかったデータの転送を保証するのがトランスポート層の役割です。
TCP/IPではTCPがこれに相当する。

TCPでは接続先の相手に対してコネクションを張ります。このコネクションを使ってデータの抜け漏れをチェックし、データの到達を保証します。
TCPで接続したコネクションで転送するデータが、どのアプリケーションにわたるのかを決定するのが、ポート番号です。
ポート番号は1~65535の数値で、HTTPは80。

# アプリケーション層
ここでは、具体的なインターネットアプリケーション、たとえばメールやDNS、そしてHTTPを実現する層です。
TCPでプログラムを作る時はソケットと呼ばれるライブラリをつかうのが一般的だが、

ほとんどのプログラミング言語にはHTTPを実装したライブラリが標準でついているため、ソケットを使ってHTTPを独自に実装することはほとんどない。

しかしWebサービスやWebAPIを開発するにあたっては、フレームワークの細かな挙動や設定、パラメータなどがプロトコルレベルでどのように動作するのかを把握しておく必要がある。