OmniAICreator/Qiita-1.07M huggingface dataset:
LocalStack起動時にS3バケットを作成する (docker-compose)

# フォルダ構成
```:tree
├── docker-compose.yml
└── localstack
    └── init_s3.sh
```

# docker-compose
`volumes` で `./localstack` を `/docker-entrypoint-initaws.d` へ割り当てる
これにより `./localstack/*.sh` が `docker-compose up` 時に実行される

```dockerfile:docker-compose.yml
services:
  localstack:
    container_name: "${LOCALSTACK_DOCKER_NAME-localstack_main}"
    image: localstack/localstack
    network_mode: bridge
    ports:
      - "4566:4566"
      - "4571:4571"
      - "${PORT_WEB_UI-8080}:${PORT_WEB_UI-8080}"
    environment:
      - SERVICES=${SERVICES- }
      - DEBUG=${DEBUG- }
      - DATA_DIR=${DATA_DIR- }
      - PORT_WEB_UI=${PORT_WEB_UI- }
      - LAMBDA_EXECUTOR=${LAMBDA_EXECUTOR- }
      - KINESIS_ERROR_PROBABILITY=${KINESIS_ERROR_PROBABILITY- }
      - DOCKER_HOST=unix:///var/run/docker.sock
      - HOST_TMP_FOLDER=${TMPDIR}
    volumes:
      - ./localstack:/docker-entrypoint-initaws.d # ここ
```

# shell
`./localstack/init_s3.sh` にバケット作成コマンド

```sh:init_s3.sh
#!/bin/bash
awslocal s3 mb s3://hoget
```


おわり

- 参考
    - [localstack/localstack - GitHub](https://github.com/localstack/localstack/blob/master/README.md#initializing-a-fresh-instance)
Expo(React) のVideoはBase64を表示できない？

## やりたいこと
1. Expoで、Webアプリ（Not Native）として
2. カメラorライブラリから動画を選択し、
3. プレビューする

## 困ったこと
2は[ImagePicker](https://docs.expo.io/versions/v40.0.0/sdk/imagepicker/)で簡単にできたが、
3は[Video](https://docs.expo.io/versions/latest/sdk/video/)でできなかった。（表示されなかった）

## 結論
ExpoのVideoコンポーネントではなく、HTMLの<video>タグ。

```react
<video src={base64} width="320" height="200" controls/>
```

### ちなみにこれも駄目
不具合：音声が流れない

```react
<video width="320" height="200" controls>
  <source src={base64}/>
</video>
```

cf. [javascript - Base64 value is not working with video tag? - Stack Overflow](https://stackoverflow.com/a/57187583)
> adding the src in the <source> element caused the video to do nothing.

理由はわからない（バグ？）が、`<source>`にsrcを追加する方法では機能しないよう。
hookを使ったMaterialUIのハートアイコンのON・OFF

　MaterialUIを使って、ハートアイコン（MaterialUI的にはFavoriteIcon）を
実装したいときに色々悩んだので書きます。



##結論
####完成品
![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/885252/fc569020-0aa8-cd24-f967-c3701a296dbd.gif)


####コード
```
import { React, useState } from "react";
import { IconButton } from "@material-ui/core";
import FavoriteIcon from "@material-ui/icons/Favorite";
import FavoriteBorderIcon from "@material-ui/icons/FavoriteBorder";


const Demo = () => {

//ハートの状態を管理するfavoを定義(初期値はfalse)
  const [favo, setFavo] = useState(false);

//アイコンをクリックしたらfavoのtrueとfalseが切り替わる関数を作成
const handleClick = () => {
  if (favo === false) {
      setFavo(true);
    } else {
      setFavo(false);
    }
  };

//trueなら<FavoriteBorderIcon  />をfalseなら<FavoriteIcon color={"secondary"} />を描画
return(
 <>
      <IconButton
        onClick={() => handleClick()}
      >
        {favo ? <FavoriteIcon color={"secondary"} /> : <FavoriteBorderIcon />}
      </IconButton>
　</>
)
}
export default Demo
```
ハートの色を白から赤に変えるために
`FavoriteIcon`には`color={"secondary"}`を与えている。
##感想

可読性はあんまり良くないです。
もっといい方法知っている方は教えていただけると助かります！:heart_eyes:
個人的によく使う Git コマンド集

## 概要
表題の通りです。思いついたら随時更新していきます。

## コマンド集
#### カレントに切り替えずに ブランチ を最新化
```shell
# `:` を挟んで左側がリモート（fetch 元）、右側がローカル（fetch 先） 
# 当然カレントブランチに対して行うとエラー
git fetch origin master:master
git fetch origin develop:develop
```

#### カレントの変更内容を違う名前のリモートブランチにpush
```shell
# `:` を挟んで左側がローカル、右側がリモート 
git push origin feature/local:feature/remote

# 今のブランチの内容を push　したい場合
git push origin HEAD:feature/remote
```

#### リモートの追跡を解除する
```shell
# 結構使いたいコマンドだが調べると意外とこのコマンドを載せている記事が無い。
# 割と調べるのに苦労したので記載します。
git --unset-upstream
```
#### 直前のコミットメッセージを変更する
```shell
# 以下のコマンドを打つと vi が開くので編集して保存
# コミットIDが書き換わるので他の人と作業している場合普通にコンフリクトします
# 周りの人に影響が無いかどうかを確認してから実行するようにしましょう
git commit --amend
```

#### 複数個前のコミットメッセージを変更する
```shell
# HEAD~2 でコミットの範囲を指定。 この場合 ２つ前までのコミットを指定している
# vi が開くので書き換えたいコミットに対し、 `pick` となっている箇所を `edit` に変更して保存
git rebase -i HEAD~2

# 以下を実行すると vi が開くのでコミットメッセージを編集して保存
git commit --amend

# 編集したコミットを確定させる、複数 edit に変えた場合は amend -> continue を繰り返す
git rebase --continue
```

#### ローカルを無理矢理リモートに合わせる
```shell
# 下の例は develop に合わせる場合です。ブランチ名は適宜変更してください
# このコマンドは編集中のものがすべて消えるので git stash で退避してください
git reset --hard origin/develop
```

#### ローカルのカレントブランチと同名のリモートに対してブランチ名を指定せずに push
```shell
# 初回 push 時によく使っています
git push origin HEAD
```
MySQLをMacで使うと必ず遭遇する<.. ERROR! The server quit without updating PID file>←こいつ

#はじめに


####解決策①
PIDを作ってみる

```
$touch /usr/local/var/mysql/$(uname -n).pid 
```

####解決策②
権限を変える

```
＄sudo chown -R _mysql:_mysql /usr/local/var/mysql/
```

####解決策③
mysqlをアンインストールし、関連ファイルを消し、再インストール
[【MySQL】pid not foundもしくはpermission deniedの対応方法](https://qiita.com/AK4747471/items/36b73edd9d1e666ae0c0)

####①〜③でダメだった人！！次を試してみて！！！

##今回の解決策
実行中のプロセスから、mysqlを抽出

```
$ps -e | grep mysqld

  322 ??         0:00.04 /bin/sh /usr/local/zend/mysql/bin/mysqld_safe　(以下略)
  700 ??         0:08.92 /usr/local/zend/mysql/bin/mysqld (以下略)
```
出てきたプロセスIDをkillする

```
$sudo kill 322
$sudo kill 700
```

```
$mysql.server start
Starting MySQL
. SUCCESS! 
```

#おわりに
mysqlをmacにインストールする度に遭遇し、その度に解決策を忘れ死に物狂いでコマンドを打ってます。
vscode clang-format

#download LLVM
https://llvm.org/builds/

#vsocde　extension をインストールする
Clang-Format

#vscode settings

```json
{
    "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe",
    "window.zoomLevel": 1,
    "C_Cpp.clang_format_path": "C:\\Program Files\\LLVM\\bin\\clang-format.exe",
    "C_Cpp.clang_format_fallbackStyle": "{
        BasedOnStyle: Google,
        AccessModifierOffset: -2,
        AlignEscapedNewlinesLeft: true,
        AlignConsecutiveAssignments: false,
        AlignEscapedNewlinesLeft: true,
        AlignTrailingComments: true, 
        AllowShortBlocksOnASingleLine: true,
        AllowShortCaseLabelsOnASingleLine: false,
        AllowShortFunctionsOnASingleLine: 'Inline',
        AllowShortIfStatementsOnASingleLine: false,
        AllowShortLoopsOnASingleLine: false,
        AlwaysBreakAfterDefinitionReturnType: false,
        AlwaysBreakBeforeMultilineStrings: true,
        AlwaysBreakTemplateDeclarations: true,
        BinPackArguments: true,
        BinPackParameters: true,
        BreakBeforeBinaryOperators: 'None',
        BreakBeforeBraces: 'Allman',
        BreakConstructorInitializersBeforeComma: true,
        ColumnLimit: 0,
        ConstructorInitializerAllOnOneLineOrOnePerLine: true,
        ConstructorInitializerIndentWidth: 2,
        ContinuationIndentWidth: 2,
        Cpp11BracedListStyle: true,
        DerivePointerBinding: true,
        IndentCaseLabels: true,
        IndentWidth: 2,
        IndentWrappedFunctionNames: false,
        KeepEmptyLinesAtTheStartOfBlocks: true,
        MaxEmptyLinesToKeep: 1,
        NamespaceIndentation: 'None',
        PointerAlignment: 'Left',
        SpaceBeforeAssignmentOperators: true,
        SpaceBeforeParens: 'ControlStatements',
        SpaceInEmptyParentheses: false,
        SpacesBeforeTrailingComments: 1,
        SpacesInAngles: false,
        SpacesInCStyleCastParentheses: false,
        SpacesInParentheses: false,
        Standard: 'Cpp11',
        TabWidth: 4,
        UseTab: 'Never'
    }"
}
```
【AWS】RDSの別アカウントへの移行方法（スナップショットの共有設定）


#はじめに
様々な理由でAWSリソースを別のAWSアカウントに移行したいという場面があるかと思います。
今回はAWSサービスの中でもよく利用されるRDSの別アカウントへの移行方法をご紹介いたします。

EC2の移行方法についてもご紹介しています。
・[【AWS】EC2の別アカウントへの移行方法（AMIの共有設定）](https://qiita.com/NaoyaOshiro/items/39e6c08ce56deae9d9e8)

#RDS移行方法の種類
1. dumpコマンド
2. スナップショットを作成し別アカウントに共有

今回はAmazon RDSなので**「2. スナップショットを作成し別アカウントに共有」**の方法をご紹介したいと思います。

#移行手順
3ステップです。

1. 移行元のRDSスナップショットを取得
2. 移行先のAWSアカウントにスナップショットを共有
3. 移行先のAWSアカウントで共有されたスナップショットからRDSインスタンスを構築

<h4>1. 移行元のRDSスナップショットを取得</h4>
移行元のAWSアカウントで移行対象のRDSを選択し、アクションから「スナップショットの取得」
※なぜかステータスが「停止」のときはスナップショット取得ができなかったので注意。
![スクリーンショット 2021-01-30 0.51.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237056/eab5f827-27bb-7762-d008-1bce3f8014f1.png)


スナップショット名を記入し「スナップショットの取得」
![スクリーンショット 2021-01-30 0.51.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237056/045403aa-42a5-a728-88ec-7f68072bb298.png)

<h4>2. 移行先のAWSアカウントにスナップショットを共有</h4>
先程取得したスナップショットを選択しアクションから「スナップショットの共有」
※進行状況が「完了」でないと「スナップショットの共有」は選択できません。
![スクリーンショット 2021-01-30 1.01.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237056/9b0725ec-625a-f8ff-f9dd-8ba6056ac1e6.png)


移行先のAWSアカウントIDを記入し「追加」、「保存」
※DBスナップショットの可視化で「Public」を選択すると世界中のユーザー全員がこのスナップショットにアクセスできる状態になってしまうため、無難に「Private」を選択。
![スクリーンショット 2021-01-30 1.03.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237056/13ee5b9e-2484-fcec-5baa-e876c3d3866b.png)

<h4>3. 移行先のAWSアカウントで共有されたスナップショットからRDSインスタンスを構築</h4>
移行先のAWSアカウントでRDSスナップショットが共有されているか確認。
共有されていることが確認できたらあとはアクションから「スナップショットの復元」でRDSインスタンスを構築して移行完了！
![スクリーンショット 2021-01-30 1.14.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237056/e279c030-98d6-e3e3-e20a-c07ba6a8dc80.png)
MacにComposerをインストールしてパスを通すまで

# Composerをインストール

## 状態

```
2021.1.30
MacOS Catalina
インストールするcomposerのversion: 2.0.9
```

## まずは公式ページを確認

https://getcomposer.org/download/

```
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === '756890a4488ce9024fc62c56153228907f1545c228516cbf63f885e036d37e9a59d27d63f46af1d4d07ee0f76181c7d3') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"
```

バージョンが変わると、上記のコマンドも変わると思いますので、正確には公式ページを確認してください。


## コマンドを実行していく

コマンドを実行していくディレクトリは、ユーザーのホームディレクトリで行ってますが、
あとで、生成されたファイル(`composer.phar`)を移動するので、どこでも大丈夫です。

### 1

```
% cd

% php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
%
```

`composer-setup.php` というファイルが生成されます。

### 2

```
% php -r "if (hash_file('sha384', 'composer-setup.php') === '756890a4488ce9024fc62c56153228907f1545c228516cbf63f885e036d37e9a59d27d63f46af1d4d07ee0f76181c7d3') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"

Installer verified
%
```

### 3

```
% php composer-setup.php

All settings correct for using Composer
Downloading...

Composer (version 2.0.9) successfully installed to: /Users/non/composer.phar
Use it: php composer.phar

% 
```

`composer.phar`というファイルが生成されます。
composerのコマンドの実行ファイルです。
※`.composer`も生成されてますが、これはこのまま何もいじりません。

### 4

```
% php -r "unlink('composer-setup.php');"
```

`composer-setup.php`が削除されます。

## パスを通す

### 1

```
% sudo mv composer.phar /usr/local/bin/composer
```

`composer.phar`がなくなり、`/usr/local/bin/composer` ができます。

### 2

どこからでも`composerコマンド`が使えるか確認

```
% composer --version
Composer version 2.0.9 2021-01-27 16:09:24
% 
```

🎉🎉🎉
Python で「リストの前から i 番目」「後ろから i 番目」をシンプルに書く

## 「リストの前から i 番目」「後ろから i 番目」を取得する

Python では `list[0]` でリストの先頭の要素を、 `list[-1]` でリストの最後の要素を取得することができます。

前から i 番目、後ろから i 番目の要素を取得する場合は、それぞれ `list[i]` 、 `list[- i - 1]` で取得することになります。

## 例：リストを反転する

例えば、 `list.reverse()` を使わずにリストを反転させるコードを書くと、次のようになります。

```Python:reverse.py
for i in range((len(list)) // 2):
    list[i], list[- i - 1] = list[- i - 1], list[i]
```

## ビット否定演算子を使い、シンプルに書く

リストの先頭の要素は0から始まるのに対し、リストの最後の要素は-1から始まり、絶対値が1つずれているため、 後ろから i 番目の要素の取得は、 `list[- i - 1]` または `list[- (i + 1)]` と書く必要があります。

ここでビット否定演算子を利用すると、後ろから i 番目の要素の取得を、 `list[~i]` とよりシンプルに書くことができます。

先ほどの例は、次のように書くことができます。

```Python:reverse.py
for i in range((len(list)) // 2):
    list[i], list[~i] = list[~i], list[i]
```

## 参考

- [組み込み型 — Python 3.9.1 ドキュメント](https://docs.python.org/ja/3/library/stdtypes.html#bitwise-operations-on-integer-types)
vercel デプロイ時のエラー確認方法(502: BAD_GATEWAY)

Next.jsのプロジェクトを優秀なvercelを使ってデプロイしようとした時にエラーが発生。
完成したコミットをプッシュして自動でビルドが始まる。
ビルドが終わって正常に完了したかと思えば`502: BAD_GATEWAY`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449626/9c6b6fbc-f986-e75e-3953-ddd66c95baa3.png)


```
Application Error
The error occurred in the hosted application

An error occurred with this application.
This is an error with the application itself, not the platform.

502: BAD_GATEWAY
Code: NO_RESPONSE_FROM_FUNCTION
```

何が原因かを調べるにはvercelのサービス上にある`RealtimeLogs`を確認すればエラー出力が確認できる。

`Functions`から`Errors`のタブを選択すれば真っ赤なエラーログにありつける


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449626/44cc356d-4986-2164-476e-b11a903ce4e7.png)
GitとGitHubについて

#目次
①Gitとは
②GitHubとは
③ローカルリポジトリからリモートリポジトリへの一連の流れ


##①Gitとは
一言で言うと分散型バージョン管理システムのこと。もっとわかりやすくというと、ある時点でのファイルの内容を保存するための入れ物のようなものを管理するしくみのこと。Gitはファイルの内容を記録するために、管理下にあるディレクトリの内容をコピーして保存する。このファイルを入れる箱のようなものがリポジトリという。

<b>補足</b>
<b>◯リポジトリとは</b>
ファイルやディレクトリの状態を記録する場所のこと。変更履歴を管理したいディレクトリをGitの管理下にあるリポジトリにおくことで、そのディレクトリ内のファイルやディレクトリの変更履歴を記録することができる。リポジトリには2種類ある。

<b>◯ローカルリポジトリとは</b>
ユーザー1人ひとりが利用するために、自分の手元のマシンに配置するリポジトリのこと。つまり自分のPC上（ローカル環境）におくリポジトリのこと。ファイルやディレクトリの変更は自分な好きなタイミングで変更できる。

<b>◯リモートリポジトリとは</b>
専用のサーバーに配置して複数人で共有するためのリポジトリのこと。ローカルリポジトリの変更修正をリモートリポジトリに反映させることができる。

##②GitHubとは
Gitの仕組みを利用し、簡単に複数人で開発ができるようにしてくれるWeサービスのこと。

<b>補足</b>
<b>◯commitとは</b>
ファイルやディレクトリの変更修正をGitのリポジトリに変更内容を保存すること。

<b>◯gitignoreとは</b>
Gitにより追跡対象としないファイルを指定するための設定ファイルのこと。あるディレクトリの配下をGit対象としても、その中のすべてのファイルをGitで管理したいとは限らないのでどのファイルをGitで追跡しないようにするかを.gitignoreを使って指定することができる。

<b>◯gitignoreのグローバル設定</b>
.gitignore_globalを作成し、そのファイルに.DS_Storeと記述し、以下のコマンドを実施

```php:ターミナル
git config --global core.excludesfile ~/.gitignore_global
```


<b>◯pushとは</b>
ローカルリポジトリでのコミットをリモートリポジトリに反映すること

##③ローカルリポジトリからリモートリポジトリへの一連の流れ
①で記述したように、まずはローカルリポジトリの作成をする。その後にリモートリポジトリの作成を行う。ファイルに変更や修正を行った後に、ローカルプロジェクトにて反映させる。最後にリモートリポジトリに変更内容を反映させる。
[Unity] EnhancedScrollerのなんやかんや

備忘

有料AssetのEnhancedScrollerで行を追加（または削除）したあとに
スクロールバーを元の位置へ戻すのがうまくできていなかった。（５～６ヵ月くらい塩漬けしてた）

おおまかに以下の手順で元の位置へ戻せる。
１．スクロールの位置を保存。
２．データの追加削除変更色々実施し、更新処理。（セル高さ再計算が行われる）
３．１．で保存した位置をスクロールへ反映。

```csharp:test.cs
               ~~ 省略 ~~
    private List<Data> _data = new List<Data>();
    public EnhancedScroller scroller;
               ~~ 省略 ~~
    void OnAddOrDel(Data data)
    {
        // １．スクロールの位置を保存。
        //　[現在の行数] = [スクロールの全体の高さ] / [1行分の高さ]
        int dataindexPos = (int)(scroller.ScrollPosition / GetCellViewSize(null, 0));
        // スクロールのパーセンテージ(0 ~ 1)
        float scrollposition = scroller.NormalizedScrollPosition;

        // ２．データの追加削除変更色々実施し、更新処理。（セル高さ再計算が行われる）
        // 行の削除・追加・変更処理
        if (data.delFlag) _data.Remove(data);
        else LoadLargeData(); // 全体的に更新

        // スクロールの更新処理と同時に保存した行へ飛ぶ。※引数が重要※
        scroller.ReloadData(scrollposition);

        // ３．１．で保存した位置をスクロールへ反映。
        // 行を変更したり削除した場合は微妙にずれるので微調整。
        scroller.JumpToDataIndex(dataindexPos);
    }
               ~~ 省略 ~~
```

最後のJumpToDataIndexだけでいいじゃんってなると思うけど、
行を追加しまくるとスクロールはされるけど画面のデータが操作するまで非表示になるんです。

ReloadDataとJumpToDataIndexの間に１フレームほどあけてあげるとうまくいくけど、
画面がちらつくんですよね。（初期表示の行から指定の行まで飛ぶ）

当初はWindowsアプリでいう「描画しない」設定を探してみましたが見つからず…。
AWS LambdaでEC2インスタンスで立てたpostgres Dockerコンテナにアクセスする

# EC2にpostgres Dockerを立てる

EC2でDocker postgresを立てる。
以下の記事が参考になった。

https://qiita.com/kurkuru/items/b44653a5fcd1072852c0

```
docker run -d --name postgres -e POSTGRES_PASSWORD=test -p 5432:5432 postgres
```

# Lambda 関数

lambda のランタイムには `Python 3.8` を用いた。
コードは以下の通り。
`xxx.xxx.xxx.xxx` にはEC2インスタンスのプライベートIPを入力する。

```python

import json
import psycopg2


def execute_sql(sql):
    connection = psycopg2.connect(host='xxx.xxx.xxx.xxx',
                                  user='postgres',
                                  password='test',
                                  dbname='postgres',
                                  port=5432)
    cursor = connection.cursor()
    cursor.execute(sql)
    result = cursor.fetchall()
    return result


def lambda_handler(event, context):
    sql = 'select * from testtable;'
    result = execute_sql(sql)
    print(result)
    return {
        'statusCode': 200,
        'body': json.dumps(result)
    }
```

# psycopg2 import準備

上記コードだけでは `psycopg2` を使用できない。

https://github.com/jkehler/awslambda-psycopg2

をForkし、ローカルにリポジトリを取り込む。Fork 初体験だったので感動した（笑）

次にランタイムの同じ `psycopg2-3.8` の名前を `psycopg2` に変更し圧縮する。

レイヤーに追加すれば良いと思ったのだが、importできなかったので（なぜ？）以下のアクションボタンからzipファイルをアップロードした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/c80e0237-c721-f72e-e0aa-097823e537e3.png)

アクションボタンを押してアップロード。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/d1a06e3a-c49f-8f50-e67e-7a6f54ac2753.png)

続いて、`lambda_function.py` を作成する。
現在の状態はこんな感じ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/56f7f3df-8edf-bc2f-b42f-d6a467e9c244.png)

# VPC の設定

コンソール画面を少し下にスクロールすると `VPC` 設定欄がある。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/f0017c4f-7104-abf5-2c9a-e18406a7676f.png)

編集をクリックし、VPC、サブネット(一つだけしか選択しないと注意されるが無視)、セキュリティグループを設定する。
セキュリティグループはデフォルトを用いた。（EC2インスタンスに付けたセキュリティグループもデフォルトだったので、これで良いみたい）

# アクセス権限

Lambda 関数を作成する際 AWS が新規に作成したロールに 2つのポリシー `AmazonEC2FullAccess` と 
`AWSLambdaVPCAccessExecutionRole` をアタッチした。本当はもっと厳しくした方が良いと思う。詳細は公式ドキュメントに書いてあった。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/177d85a3-eceb-bfcc-7bfe-eee4a84d8691.png)


後はテストボタンを押して以下の画像のように結果が出ればOK。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/1527593b-137e-96e8-cd3f-a71856a62053.png)


# 参考記事
公式ドキュメント
https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/configuration-vpc.html

psycopg2をローカルでもAWS Lambda上でも同じように使う
https://qiita.com/redshoga/items/195d3ce3faa5f29171c0

DockerでPostgreSQL環境を構築する
https://qiita.com/kurkuru/items/b44653a5fcd1072852c0
Pythonを仮想環境で開発する時によく使うコマンドまとめ

Pythonを学び始めてまもなくでコマンドを中々覚えられないので、備忘録ついでにまとめます。


#git関連

###ファイルの変更状態の確認

```
$ git status
```

###すべての変更内容をインデックスに追加

```
$ git add -A
```

###メッセージ付きでコミット

```
$ git commit -m "COMMENT"
```

###GitHubにコミット

```
$ git remote add origin https://github.com/<your-github-username>/my-first-blog.git
```

#仮想環境関連

###仮想環境の作成
仮想環境を構築するディレクトリに移動して以下コマンド.
myvenevは好きな名前でOK.

```
$ python3 -m venv myvenv
```

###仮想環境の起動
環境環境を作成したディレクトリがカレントディレクトリにある状態で以下コマンド.
コンソールでプロンプトの行頭に (myvenv) が付いたら、仮想環境(virtualenv) が起動されている状態。

```
$ source myvenv/bin/activate
```

#Heroku

###Herokuにログイン

```
$ heroku login
```


###Herokuにアプリを作成する
APPNAMEは省略可。自動的に未使用の名前をつけてくれる
（おそらく enigmatic-cove-2527 のようなもの）.

```
$ heroku create APPNAME
```


###Herokuのリモートリポジトリの登録/変更

```
$ heroku git:remote --app APPNAME
```
###Herokuのマイグレーション

```
$ heroku run python manage.py migrate
```

###Herokuにデプロイ

```
$ git push heroku master
```

###Herokuのアプリインスタンスの実行

```
$ heroku ps:scale web=1
```

###ブラウザでHerokuアプリを開く

```
$ heroku open
```
Python3でSlackへチャット送信する〜セキュリティリスクを無視して〜

# 日記の部分

義理の姉が桃太郎電鉄の新作をやりたいらしく購入を検討しているどうも私です。

AmazonでDL版買おうと思ったんだけど一向に見つからず。
どうやらニンテンドーeショップでしかDL版は売ってないようね。
価格が崩れないので悩んでいます。

最近仕事が忙しく過去の自分がどんなコードを書いていたか忘却の彼方です。

BluetoothでSwitchの自動操作をする記事を書くんや、という思いだけがあっても手は全く動かしてなかったので週末は頑張ります。

空想では、

* 自動操作をして
* 孵化したポケモンが色違いかを画像処理で判定したり
* 個体値チェック＆特性チェックをOCRを駆使して判定して
* 該当したらSlackで通知して処理を終了する

みたいなことを考えています。

その中の

「該当したらSlackで通知」

この処理、私が仕事やプライベートで使い回しのお決まりロジックがあります。
シンプルな内容ですが、公開して残しておこうと思います。

# 本題の部分

表題にある通り、「セキュリティリスクを無視して」います。
個人の開発端末に入れているだけなので良しとします。いいですね。

SlackのAPIを使った送信の仕組みは以前投稿しています↓
https://qiita.com/smd877/items/3254dacab77b9bcc8e53

これと同じ仕組みを使います。違う箇所は

```
「Add an OAuth Scope」を押下し「files:write」を選択します。
```

の部分で、ココは「files:write」ではなく「chat:write」を選択します。

チャット送信するためのアクセストークンと送信先のチャンネルIDを用意したら、

```
$ sudo vi /etc/environment

// 末尾に以下追加
POST_SLACK_TOKEN_ID=取得したアクセストークン
POST_SLACK_CHANNEL_ID=送信先のチャンネルID
```

このようにenvironmentに入れてしまいます。(これがリスクポイント。)
あとはこの2つの環境変数を使ってメッセージを送信するコードを用意します。

```slack-post.py
import os
import urllib.request, urllib.parse

MESSAGE = 'sample message.'
POST_SLACK_TOKEN_ID = os.environ.get('POST_SLACK_TOKEN_ID')
POST_SLACK_CHANNEL_ID = os.environ.get('POST_SLACK_CHANNEL_ID')

URL = 'https://slack.com/api/chat.postMessage'
headers = {
    'Authorization': 'Bearer ' + POST_SLACK_TOKEN_ID
}
message = {
    'text' : MESSAGE,
    'channel' : POST_SLACK_CHANNEL_ID
}
data = urllib.parse.urlencode(message).encode()
req = urllib.request.Request(URL,data=data,headers=headers,method='POST')
urllib.request.urlopen(req)
```

で、pythonを実行して対象のチャンネルにメッセージが投稿されていることを確認
![img0129.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158995/2c63dc0c-067e-a5aa-b4fa-b4277e9132fe.png)
こんな感じに。

以上です。
ではまた。
【rails】【heroku】image_tagの記述が原因でエラーになってしまった

## はじめに
作成中のポートフォリオに機能を追加し、herokuにデプロイしたところ、`We're sorry, but something went wrong.`が表示されてしまったので、原因と解決策をメモ。
初心者のため間違いなどあれば、教えていただけるとうれしいです！

## 実行環境
- Rails 6.0.3.4
- ruby 2.6.5

## 原因
- 以下をターミナルで実行

```zsh
% heroku logs --tail

# 実行結果
ActionView::Template::Error (The asset "top" is not present in the asset pipeline.
```
→ `asset` 配下に`top`なんてないぞ！と怒られていました。
`assets/images`を確認したところ`top.jpg`は存在している…ローカルでは問題なく見れていたのに、なぜだ？と思ったところ、原因は`image_tag`の書き方にありました。

```erb:index.html.erb
# 修正前
<%= render "shared/header" %>

<div class='main'>
  <div class="home-image">
    <%= image_tag 'top' %> <!-- ←ここ -->
    <h2 class='home-title'>
      hogehuga
    </h2>
  </div>

<!-- 省略 -->
```

## 修正内容
- 画像の**拡張子**を記述する必要がありました…！

```erb:index.html.erb
# 修正後
<%= render "shared/header" %>

<div class='main'>
  <div class="home-image">
    <%= image_tag 'top.jpg' %> <!-- ←ここ -->
    <h2 class='home-title'>
      hogehuga
    </h2>
  </div>

<!-- 省略 -->
```

## 参考記事


[【Rails】画像のパスを指定する](https://qiita.com/d0ne1s/items/0af5e99feafd5172d8ce "【Rails】画像のパスを指定する")
【PHP】名前空間(namespace)について

#名前空間(namespace)とは
PHPでは通常、同名の関数を定義することができません。しかし、ファイルが山のように出てくると、どうしても関数名が被ってしまうことが起こり得ます。
`名前空間(namespace)`とは、別々の空間にそれらを定義することで、同名の関数であっても使うことのできる仕組みのことを言います。

#本当に同名の関数を定義することはできないのか
`yamada.php`と`takahashi.php`という2つのファイルで`getHello()`という同名の関数を定義して、`greet.php`で呼び出してみます。

```php:yamada.php
<?php
function getHello() {
  return 'Hello yamada';
}
```

```php:takahashi.php
<?php
function getHello() {
  return 'Hello takahashi';
}
```

```php:greet.php
<?php
require_once 'yamada.php';
require_once 'takahashi.php';

echo getHello();
```
`greet.php`を実行すると、以下のエラーが表示されました。

```
Fatal error:  Cannot redeclare getHello() (previously declared in...
```
>`getHello()`という関数を、先に`yamada.php`で宣言しているので、`takahashi.php`で同名の関数を定義することはできません。

といった感じのエラーですね。同一空間に`getHello()関数`を複数定義していることが原因です。

#名前空間の定義
定義した名前空間の影響を受けるのは、`クラス(抽象クラスやトレイトを含む)`、`インターフェイス`、`関数`、そして`定数`だけです。PHPで定数を定義する方法は`constキーワード`と`define関数`を使う2種類がありますが、名前空間の影響を受けるのは`constキーワード`のみです。

名前空間の宣言には、キーワード`namespace`を使用します。

```php
<?php
namespace 名前空間名;
```
名前空間の宣言は、他のコードの先頭で行います。`名前空間の宣言より前に書くことが許されているコードはdeclare文のみです。`

```php
<html>

<?php
namespace sample; //Namespace declaration statement has to be the very first statement or after any declare call in the script
?>

</html>
```
PHPコード以外であっても、名前空間の宣言の前に記述することはできません。

#名前空間の使用法
定義した名前空間の中の関数を実行するときは以下のように表記します。

```
名前空間名\関数名;
```

#実際に使ってみる
先ほどの`yamada.php`と`takahashi.php`で名前空間を宣言します。

```php:yamada.php
<?php
namespace yamada;
function getHello() {
  return 'Hello yamada';
}
```

```php:takahashi.php
<?php
namespace takahashi;
function getHello() {
  return 'Hello takahashi';
}
```
名前空間を宣言したことで、`yamada.php`の`getHello()関数`は`yamada`という名前空間の中に。`takahashi.php`の`getHello()関数`は`takahashi`という名前空間の中に存在している状態になりました。


```php:greet.php
<?php
require_once 'yamada.php';
require_once 'takahashi.php';

echo yamada\getHello();
```
`greet.php`を書き換えて実行します。

```
Hello yamada
```
しっかり表示されました。

#参考
* [PHP: 名前空間の定義 - Manual](https://www.php.net/manual/ja/language.namespaces.definition.php)
* [PHPのnamespace(名前空間)の使い方を現役エンジニアが解説【初心者向け】](https://techacademy.jp/magazine/29632)
* [【PHP超入門】名前空間（namespace・use）について](https://qiita.com/7968/items/1e5c61128fa495358c1f#use-%E3%82%AD%E3%83%BC%E3%83%AF%E3%83%BC%E3%83%89%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)
Pythonライブラリ導入時のapt/pipの違いについて

# Pythonライブラリの混在について(ubuntu18.04にて調査）

　ubuntuでPythonのライブラリを使う場合，ubuntu標準のPythonライブラリ（sudo apt install python3-hoge）を使う方法と，pipのライブラリを使う方法があります。pipについては，sudo管理者権限の実行と，一般ユーザでの実行での違いもあります。どちらかでインストールするともう片方でライブラリが入らなかったり，混在して競合することがあるので，調べたことをメモっておきます。（今回はvenvを使わない前提で。）

# インストール先のパス

| 入れ方 | ①sudo apt install | ②sudo pip install | ③pip install |
|-----|-----|-----|-----|
| インストール先のパス | /usr/lib/python3/dist-packages | /usr/local/lib/python3.6/dist-packages | /home/hoge/.local/lib/python3.6/site-packages/ |
|利用シーン|rootが全ユーザに適用したい場合|rootが全ユーザに適用したい場合|一般ユーザが自分自身のみを対象に使う場合|

# 優先順位
同じライブラリが入っている場合，パスの順序の優先度が高いものが利用されます。以下の方法で確認できます。

```python
import sys
print(sys.path)
```
結果はこんな感じ。優先度的には③＞②＞①の順です。

```
['', '/usr/lib/python36.zip', '/usr/lib/python3.6', '/usr/lib/python3.6/lib-dynload', 
'/home/hoge/.local/lib/python3.6/site-packages', '/usr/local/lib/python3.6/dist-packages',
 '/usr/lib/python3/dist-packages']
```

# 導入順序による導入可否
## ①→②
入らない。
Requirement already satisfied: numpy in /usr/lib/python3/dist-packages
と「すでに入ってまっせ」と言われる。

## ②→①
入る。でも②の方が優先なので，想定した動き（aptで入れたライブラリを使いたい！）をしない。

## ①→③，②→③
入る。使うときには③が最優先になる。
ShaderGraphで作成したマテリアルでなぜかParticle SystemのColorが適用されなかった原因と対処法

###記事の環境
Unity 2019.3.0f6
Shader Graph 7.1.8

###はじめに
タイトルで思いっきりShader Graphと書いてますが、普通にコードベースのシェーダーでも同じことが言えます。
要はちゃんと**頂点カラーをブレンド**しましょうねというお話です。

###遭遇した問題
右がデフォルトのパーティクルで左が自作したシェーダーを適用したマテリアルで出しているパーティクルです。
マテリアルを変えただけでその他の設定は変えていません。
![ParticleSystemBefore.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293529/ad75c2ad-97c7-3b92-c589-cc52ea26a80d.gif)
右は消だんだんと見えなくなっていくのに対して、左はパッと消えているのがわかるかと思います。
Shader Graphはこんな感じになってます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293529/e524c46f-5eb9-ce7a-1c17-ab9a0e273095.png)
どうやらParticle Systemは色を変えるのに頂点カラーを使用しているようで、頂点カラーをブレンドしてあげる必要があります。
頂点カラーはVertex Colorというノードで取ってこれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293529/8c29b971-75dd-099c-afe6-bb6d60d2950c.png)


これで実行するとこのようにしっかりと透明になります。(画質荒くてすみません。。。)
色も変えられます。
![ParticleSystemAfter.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293529/b4a9451d-bf3f-7eca-5abc-00cab0e36979.gif)


###参考文献
https://realtimevfx.com/t/shadergraph-default-particle-shader-unity/9048
SACインストール（mac）

#環境
macOS Cataina
10.15.7

#やり方
sacのHPから
`sac-101.6a-mac_x86_64.tar.gz`
をダウンロードし展開すると
`sac`
というディレクトリができるので，
このディレクトリを
`/usr/local`
に入れる．
（`/usr/local/sac`）



#パスを通す

`~/.bash_profile`に

```.bash_profile
#PATH for SAC                                                                                                                                                                
export SACHOME=/usr/local/sac
export SACAUX=/usr/local/sac/aux
export PATH=/usr/local/sac/bin:$PATH
```
を追加して，ターミナルを再起動すれば準備完了



あとは好きなディレクトリで

```
$ sac
```
と打ち込めば

```
 SEISMIC ANALYSIS CODE [11/11/2013 (Version 101.6a)]
 Copyright 1995 Regents of the University of California

SAC> 
```

sacが起動します．
Pythonで3DCGするならlibiglがいいですよという話

　人間には誰しもプログラムだけで3DCGを完結させたいという願望があります。そのような時に、例えば[FBXSDK](https://www.autodesk.com/developer-network/platform-technologies/fbx-sdk-2020-0)などは有力な手段となりますが、正直とっつきづらい印象があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288125/a8f14994-5917-95dd-0a29-06f676e8a999.png)

　そこで、[libigl](https://libigl.github.io/)を使うことをおすすめします。

　元々はC++用に開発されたライブラリですが、ありがたいことにPython用のバインディングが用意されています（FBXSDKもPythonバインディングはありますが、こちらの方が圧倒的に手軽です）。Jupyterを使ってインタラクティブに出力を確認できるのでとても便利です。

# 導入

　Anacondaを使います。Anacondaを使うのは趣味の問題ではなく、付属の`meshplot`というライブラリがconda限定っぽいからです。pipで可能だったらすいません。以下のコマンドでインストールします。

```
conda install -c conda-forge igl
```

　あと付属もライブラリも合わせてインストールします。

```
conda install -c conda-forge meshplot 
```

　それが完了したらjupyterを起動します。

# 使い方

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288125/f6730c13-2e5d-88f0-0c2f-bec4ca1474a5.png)

　[公式チュートリアル](https://libigl.github.io/libigl-python-bindings/tut-chapter0/)ではStanford Bunny等のサンプルを用意していますが、せっかくなのでBlenderでの操作と比較するために、Blenderで自前の素材を用意することにしましょう。

　Blenderでトーラスのメッシュを作成し、`obj`ファイルとしてエクスポートします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288125/afdc3fff-0d3b-c8bb-6d1c-6d4eed8c7c98.png)

　生成されたファイルをjupyterで開いたフォルダに入れます。ここでは`torus.obj`としています。

　jupyterで以下の命令を打ちます。

```python
import igl
import scipy as sp
import numpy as np
from meshplot import plot, subplot, interact
v, f = igl.read_triangle_mesh("torus.obj")
plot(v, f)
```

　すると以下のようなプレビューが出ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288125/12c8bf7c-b204-5dad-e38a-592d6c63537a.png)

　画像だとよくわからないと思いますが、この図形は**マウスで拡大縮小したり回転させたりする**ことができます。便利！

　頂点やメッシュの情報にもアクセスできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288125/67c3d3c8-0cdd-b9cf-e8da-a6d7b1d58b59.png)

　`v`は頂点座標、`f`は何番目の頂点を結んでポリゴンにしているかというデータです。

　早速、このデータを使ってイタズラします。

# 改変

　`f`のデータをいじります。頂点番号の内1つをずらしてみます。

```python
for i,_ in enumerate(f):
    f[i][2] += 1
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288125/9407015a-1cf7-2546-d26c-f20054b42f81.png)

　今度は座標を歪めてみます。頂点座標をeの指数にします。

```python

v, f = igl.read_triangle_mesh("torus.obj")
v = np.exp(v)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288125/a247a431-702b-2302-a14e-27cda96b4325.png)

　おむすびみたいになりました。

　これをファイルとして出力します。

```python
igl.write_obj("torus2.obj",v,f)
```

　するとフォルダに`torus2.obj`が生成されるはずです。

　生成された`obj`をBlenderで読み込むと、変形されたメッシュが得られていることがわかります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288125/cd62dc87-cf43-9f5b-1fce-71bb5249137f.png)

# スクリプトでやる場合

　もちろん、このような操作はBlenderでも行うことができます。

```python
import bpy
import numpy as np
for v in bpy.data.meshes['torus'].vertices:
    v.co = np.exp(v.co)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288125/589ecb24-2473-9b7a-0c8e-6e03dda637b5.png)

（※OBJフォーマットとBlenderの座標系が違うため鏡像反転になっています）

　単純な処理ならそこまでスクリプトの手間は変わらないですが、libiglの方は諸々のAPIが整備されており、何よりJupyterでデバッグしながら開発しやすいので、その点でアドバンテージがあります。

　興味を持った方は[チュートリアル](https://libigl.github.io/libigl-python-bindings/tut-chapter0/)をやってみましょう。
サーバーを公開すると来る攻撃的アクセス

# 公開サーバーは常に攻撃を受けるリスクがある
とよく聞くけれど、本当かどうか確かめてみる。
攻撃って「普通に・常に」されているという現実が少しでも広まればいいな。

## 自宅WEBサーバーのログを見てみた。
ちなみにセキュリティ管理を楽にする目的で静的HTML配信のみのEWBサーバーにしている。
ログは access*.txt のようなファイルなのでlinuxコマンドで集計してみた。

### ログの全行は3087行 （直近約2週間分）
```
ls | grep access| xargs wc -l
3087
```

### php関連の攻撃
CMSの管理ページなどを狙っている模様。phpファイルは動作しないので実害はなし。
全アクセスの20%とかなり多いことがわかる。

```
ls | grep access| xargs cat| grep -i .php |wc -l
623
```

### *.env なるファイルを取得しようとするアクセス
サーバー環境情報が欲しいのだろうか。

```
ls | grep access| xargs cat| grep -i .env |wc -l
81
```

### なんのファイルか不明だが、"/Autodiscover/autoiscover.xml"へのアクセス

```
ls | grep access| xargs cat| grep -i autodiscover | wc -l
39
```


### POSTメソッドを使用するページはないけれど、POSTアクセスも

```
ls | grep access| xargs cat| grep POST |wc -l
212
```


え ちょっとまって、ほとんど攻撃アクセスじゃ...？苦笑
おしまい...orz
呼び出し元のバッチに処理が戻らず途中終了する

# はじめに
Windowsバッチ（親バッチ）で別のバッチ（子バッチ）を呼び出した時、
親バッチの処理が返ってこず、子バッチで処理が終了してしまった場合の原因と解決方法の備忘録。

## 原因① callコマンドを使ってバッチを呼び出していない
呼び出す側の親バッチを**main.bat**、呼び出される側の子バッチ①を**a.bat**、子バッチ②を**b.bat**とする。

```ruby:main.bat
@echo on
rem callコマンドを使用せず子バッチ呼出し 

a.bat
b.bat
```


```ruby:a.bat
echo test1
```

```ruby:b.bat
echo test2
```


呼び出す側の親バッチで**callコマンド**を使用しなかった場合、
子バッチ **a.bat** の実行結果は返ってくるが、子バッチ **b.bat** の実行結果は返ってこない。

```ruby:実行結果
> test1
```

## 解決方法① callコマンドを使ってバッチを呼び出す
バッチ呼出し時に**callコマンド**を使用する。

```ruby:main.bat
@echo on
rem callコマンドを使用してバッチ呼出し

call a.bat
call b.bat
```
子バッチ① **a.bat** だけでなく、子バッチ② **b.bat** の実行結果も返ってくる。

```ruby:実行結果
> test1
> test2
```



## 原因② 呼び出したバッチをexitで終了している
原因①と同様に呼び出す側の親バッチを( main.bat )、呼び出される側の子バッチ①を( a.bat )、子バッチ②を( b.bat )とする。


```ruby:main.bat
@echo on

call a.bat
call b.bat

exit 0
```

```ruby:a.bat
rem exitでバッチ終了

echo test

exit 0
```

```ruby:b.bat
rem exitでバッチ終了

echo test2

exit  0
```

呼び出される側の子バッチ( a.bat )が**exit 0**で終了している場合、
子バッチ( a.bat )の実行結果は返ってくるが、子バッチ( b.bat )の実行結果は返ってこない。

```ruby:実行結果
> test1
```

## 解決方法② 子バッチに/bオプションを指定する



```ruby:main.bat
@echo on

call a.bat
call b.bat

exit /B 0
```


/bオプションをすることで、現在実行中のバッチのみ終了するように指定できる。
オプションを指定しなかった場合は、コマンドプロンプトを終了するという意味になる。

```ruby:a.bat
rem exitコマンドに/bオプションを指定

echo test

exit /B 0
```

```ruby:b.bat
rem exitコマンドに/bオプションを指定

echo test2

exit /B 0
```

子バッチ①　**a.bat** だけでなく、子バッチ② **b.bat** の実行結果も返ってくる。

```ruby:実行結果
> test1
> test2
```
そうだ、SQLを勉強しようⅫ

#はじめに
SQLを学んでいて、そろそろ文や句や関数の意味の理解があやしくなってきたので、とりあえず、ここまでで出てきた単語となんとなくの意味を一覧にしてまとめておこうと思います。
なお、細かい使い方については考慮しません。その単語を見た時に、ざっくりと意味が言えるようになりたいためのまとめです。

##SQLに出てくる単語ざっくり意味

|単語|意味|
|---|---|
|SELECT|検索
|UPDATE|更新
|INSERT|挿入
|DELETE|削除
|FROM|テーブル指定
|INTO|INSERT文でテーブル指定
|VALUES|INSERT文で値を入力
|SET|UPDATE文で列名と値を入力
|WHERE|絞り込み条件(必ず真偽値)
|AS|別名をつける
|IS NULL|NULLかどうか判別
|IS NOT NULL|NULLではないかどうか判別
|LIKE|パターンマッチング
|IN|いずれかに一致
|NOT IN|どれとも一致しない
|BETWEEN A AND B|AとBの間
|ANY|いずれかと一致すれば真
|ALL|全てと一致すれば真
|A AND B|AかつB
|A OR B|AかB
|NOT A|Aではない
|DISTINCT|重複を除外
|ORDER BY|順番を変える
|ASC|昇順
|DESC|降順
|UNION|和集合
|EXCEPT|差集合
|INTERSECT|積集合
|CASE|条件と一致したら値を変換
|LENGTH|文字数
|SUM|合計値
|AVG|平均値
|MAX|最大値
|MIN|最小値
|COUNT|行数を数える
|ROUND|四捨五入
|TRUNC|切り捨て
|POWER|冪乗
|CURRENT_DATE|現在の日にち
|CURRENT_TIME|現在の時刻
|CAST|データ型を変換
|TRIM|空白削除
|REPLACE|指定文字を変換
|CONCAT|文字列を連結
|SUBSTRING|一部を抽出
|COALESCE|最初に登場するNULLでない値を返す
|GROUP BY|検索結果のグループ化
|HAVING|集計結果に対して絞り込み条件

##最後に
単語カードにして覚えようかな…
#Anaconda NavigatorをWindows環境下でインストールした時にはまった話

`Python3`
AnacondaをWindows環境下にインストールしてAnaconda Navigatorを立ち上げる際に起動せず長時間悩みましたので備忘録として残しておきます。
まだ、ダウンロードしてない方は[こちら](https://www.anaconda.com/products/individual)の公式サイトからインストラーをダウンロードして下さい。

##1.インストラーの起動
インストーラーを起動させると下記のような画面になり、Next>を押していくとインストール先を指定する画面にいきます。
![キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946119/a5d14526-ab1e-2eeb-35c7-d3688205f69b.jpeg)

インストール先にCドライブ直下を指定しました。
![キャプチャ1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946119/928883b9-63aa-d81f-7578-54caa7dea28e.jpeg)

##2.Anaconda Navigatorの起動

それではスタートメニューからAnaconda Navigatorを起動していきます。
すると、Loading applicationで処理が止まり、これ以上進まないです。数分待つとデスクトップにあるAnacondaのアイコンが消えてしまいます。
図1![Anaconda3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946119/a005c4d9-dd95-70f8-89f7-8342e8d772b5.jpeg)

もう一度Anaconda Navigatorをスタートメニューから起動させてみます。
すると、既にAnacondaは起動しているとの表示がされました。
図2![Anaconda already.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946119/59b6f309-d7a8-8ce1-289a-d37cf6f7905e.jpeg)

これは画面上では起動できてないですが、バックグラウンドプロセスで既にPythonが動いているため、既に起動しているとの注意がされています。そこでタスクマネージジャーから、Pythonを消して再度Anaconda Navigatorの起動を試します。
 ![タスクマネージャー.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946119/692bcee2-2245-54fb-b746-077f5f94d7d5.jpeg)

再度起動するもLoading applicationで停止して起動はしませんでした。

##3.エラー文の解読
現在の状況ではエラー文も一切ないため、何が原因で起動しないのかが分からないのでAnaconda Powershell PromptからAnaconda Navigatorを起動させて何かしらのエラー文が出ることをひとまずは期待します。

コマンドに　`anaconda-navigator` と入力し、Enterを押します。
![power shell.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946119/40207b57-ea3d-4120-70fb-c6c7230b6e57.png)

すると最後の行に　`UnicodeDecodeError: 'utf-8' codec can't decode byte 0x82 in position 2: invalid start byte`とのエラー内容が出ました。
![エラー.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946119/34b88856-1427-b550-3ced-934654fa5050.png)

初めての見るエラー文だったので調べてみると **utf-8っていう文字コードのままだとデータの読み込みができない**そうです。
これはAnaconda Navigatorを起動する際に何かしらの文字コードが邪魔して上手くAnacond Navigatorを読み込めないと言っています。
しかし、Cドライブ直下にインストールをしているのにどこを参照して何の文字が邪魔をしているのか全く分からなかったので調べていくことに。

すると、Anaconda Navigatorを起動時にユーザーディレクトリ直下にある　.condaディレクトリを参照していることが分かりました。
つまり、私の場合は**ユーザー名を漢字で作成をしてしまっているため**、恐らくこれが原因でAnaconda Navigatorが起動してないと考察しました。

##4.解決へ
ローカルユーザーアカウントを新しくローマ字で作成して、新しく作成したユーザーアカウントの環境に再度Anacondaをインストールします。
すると無事にAnaconda Navigatorを開くことができました。
ただ、pythonを使用するたびにアカウントを切り替えるのはとても面倒なのですがひとまず解決はできました。
![Anaconda.Navigator.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946119/01cbc2e4-4b47-ba2f-e152-cb1e2a9d86d1.png)

##最後に
Windows環境下でプログラミングを行う場合、ユーザー名をローマ字で記載したほうが良いことがわかりました。
ただ、アカウントを切り替えるのが面倒なのでもし、他の方法でも直し方がわかる方がいれば教えてください。
github の個人リンク集

github を色々 star を押したら、結局多すぎでほしい時は見つからない。
ここで分類してリンクを貼っどく

### java
* java swing tips https://github.com/aterai/java-swing-tips https://ateraimemo.com/Swing.html
* java parser     https://github.com/javaparser/javaparser
* java websocket  https://github.com/TooTallNate/Java-WebSocket
* java websocket  https://github.com/smartboot/smart-socket
* sqlite-jna https://github.com/gwenn/sqlite-jna
* GoogleAuth https://github.com/wstrange/GoogleAuth
* easyexcel https://github.com/alibaba/easyexcel
* hutool https://github.com/looly/hutool
* BeeCP(connection pool) https://github.com/Chris2018998/BeeCP
* jansi(ANSI escape codes) https://github.com/fusesource/jansi
* ANSI Escapes in the Eclipse Console https://github.com/mihnita/ansi-econsole
* jfinal (a java web framework) https://github.com/jfinal/jfinal
* 从零开始写个编译器吧系列 https://github.com/Moskize91/TaolanTutorial
* java swing dock https://github.com/Benoker/DockingFrames
* t-io 重新定义网络编程模式，让天下没有难写的网络程序 https://github.com/tywo45/t-io        or           https://gitee.com/tywo45/t-io
* java swing https://github.com/bobbylight/RSyntaxTextArea
* java ProcessExecutor https://github.com/zeroturnaround/zt-exec
* Java 资源加载器 https://github.com/core-lib/loadkit
* java 手写实现渐进式 redis 缓存工具 https://github.com/houbb/cache
* http client https://github.com/AsyncHttpClient/async-http-client
* Java template https://github.com/javamonkey/beetl2.0 or https://gitee.com/xiandafu/beetl
* arthas Java诊断工具 https://github.com/alibaba/arthas
* connection pool https://github.com/alibaba/druid

### python
* Richは、_リッチ_なテキストや美しい書式設定をターミナルで行うためのPythonライブラリ https://github.com/willmcgugan/rich


### kv-store
* Redis 5.0.10 for Windows https://github.com/tporadowski/redis


### font
* https://github.com/tonsky/FiraCode


### javascript / css
* https://github.com/jquery/jquery
* https://github.com/tvjsx/trading-vue-js
* input chinese pinyin with only javascript https://github.com/sxei/pinyinjs
* 丰富多样的 Web 弹出层组件 https://github.com/sentsin/layer
* ドラッグ可能な要素を作成したり、ノード同士を矢印で繋いだりする https://github.com/jsplumb/jsplumb
* https://github.com/ics-ikeda/shuffle-text
* JavaScript animation engine https://github.com/juliangarnier/anime
* layui https://github.com/sentsin/layui
* dialog https://github.com/HugoGiraudel/a11y-dialog
* クレジットカード入力 https://github.com/muhammed/vue-interactive-paycard


### others
* Excel ツール https://github.com/RelaxTools/RelaxTools-Addin
* https://github.com/ruanyf/weekly
* icon https://github.com/bytedance/IconPark


### Docker
* oracle 12c  https://github.com/MaksymBilenko/docker-oracle-12c

### download
* https://github.com/imgyh/tiktok
* https://github.com/soimort/you-get
* https://github.com/yt-dlp/yt-dlp
* https://github.com/ytdl-org/youtube-dl

### h5 framework
* https://github.com/ColorlibHQ/AdminLTE
* https://github.com/PanJiaChen/vue-element-admin
* https://github.com/tabler/tabler
* https://github.com/ColorlibHQ/gentelella
* https://github.com/akveo/ngx-admin
* https://github.com/ant-design/ant-design-pro
* https://github.com/akveo/blur-admin
* https://github.com/iview/iview-admin
* https://github.com/creativetimofficial/material-dashboard
Dockerの立ち上げで AH00534: httpd: Configuration error: No MPM loaded. というエラー

# 課題

```
docker-compose up --build
```
をしたら

```
AH00534: httpd: Configuration error: No MPM loaded.
```

apacheの設定がうまくいっていないエラーが出た。


## 解決法

```
docker system prune -af
```

でシステム内のすべてのイメージを削除して
もう一度 `docker-compose up --build` をする
KiCad(Mac版)とFreerouting1.4.4(Mac版)を使う前に.appが開けなかった話


[KiCAD(Mac版)でFreeroutingを使って自動配線する (2021年1月時点最新手法)](https://qiita.com/pmbit_jam/items/7bc33bdd28177bfd22d1)
[xattr コマンドの使い方／ヘルプの日本語訳（macOS でパーミッションの@付き拡張属性の操作）](https://qiita.com/KEINOS/items/e218c4d8da5451c9e59c)
[KiCadのインストール方法は第二話へ #プリント基板製作シリーズ【プリント基板製作 第一弾】第三話 プリント基板を設計しよう！！](https://www.youtube.com/watch?v=et6R49Azckc)

上記を参考にしました
結論を書くと下記コマンドで解決しました
freerouting-1.4.4-macos-x64.dmgからFreerouting.appをアプリケーションフォルダに移動させてから実行してます

```vim:vim
xattr -cr /Applications/Freerouting.app
```
![スクリーンショット 2021-02-18 23.13.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363815/1fc3202c-81e4-c990-dc60-b11fc0749cb7.png)

どうやって解決したか
[Github: Freerouting](https://github.com/freerouting/freerouting) の issueを見ました

![スクリーンショット 2021-02-18 23.10.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363815/88fef162-935e-5508-2c35-8f0cc827def5.png)

適当に覗いていくと
![スクリーンショット 2021-02-18 23.11.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363815/44e97696-e731-3899-d8be-0184b3399116.png)
![スクリーンショット 2021-02-18 23.11.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363815/d5208700-b05c-ba14-336c-5b351a50fbb4.png)

ありましたね Google先生にて翻訳
![スクリーンショット 2021-02-18 23.19.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363815/e52702cc-2f25-e36a-5ae9-199df727c3a6.png)

![スクリーンショット 2021-02-18 23.20.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363815/22553c92-5333-c611-fd9b-0c041725ed82.png)

おわりに
しばらく離れてたら jdkのバージョンたくさんあるし起動しないしでなんか大変でした
KiCadなるものを使い始めたのでこれからの電子工作が楽しくなりそうです
Next.jsをVercelにデプロイするときに「Error: Cannot find module 'webpack'」が発生

## 概要
Next.jsを試しにVercelにデプロイしたときに、`Error: Cannot find module 'webpack'`というエラーが発生しました。全てのケースで発生するわけではないと思いますが、私がやった時の条件とその対応をメモ書きします。

## 条件
* Next.jsのバージョン： 10.0.4
* webpackは使用していない

## 調べた内容
[Error: Cannot find module 'webpack'](https://github.com/vercel/next.js/issues/21679)のIssueに同じような事象が記載されていました。おそらく何かしらのバグに起因するものだろうと思いますが、取り急ぎNext.jsとwebpackのバージョン設定を変更すればいけそうというのは読み取れました。

## 対応
以下の通りにバージョンの設定をしたら、デプロイが上手くいきました。

* Next.jsのバージョン： 10.0.6
* webpackのバージョン： 4.46.0
[Rails6] jQueryを使えるようにする

#環境
`Rails 6`

#インストールする

```
$ yarn add jquery
```

#webpackの編集をする

```:config/webpack/environment.js
const { environment } = require('@rails/webpacker')

// ここから追記する
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)
// ここまで追記する

module.exports = environment

```

#application.jsの編集をする

```:app/javascript/packs/application.js
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "jquery"   //この１行を追加
```

#queryファイルを作成し、読み込む
jsファイルは、javascriptフォルダに作成します。
今回は `test.js` を作成しました。
作成したjsファイルを読み込むために `application.js` に以下のような `import "ファイル名.js" ` を追記します。

```:app/javascript/packs/application.js
import "jquery"
import "test.js"   //この１行を追加
```

そして `test.js` コードを書いていきましょう。

##？　リロードしないとJavaScriptが動かない場合
jsファイルに以下のように `turbolinks:load` を記述します。

```
document.addEventListener("turbolinks:load", function() {
  //処理
})
```


[参考にしたサイト](https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker/)
CarthageでMoya v14.0.0をXCFrameworkでビルドするとエラー


2021年2月初にリリースされた Carthage v0.37.0 で XCFramework がサポートされました。これにより M1 Mac 上のシミュレータとバイナリがコンフリクトしてしまう問題が解消しています。

早速、自社プロジェクトの環境でも XCFramework に移行を進めたのですが、Appleプラットフォームでのネットワーキングで人気のある [Moya](https://github.com/Moya/Moya) のビルドでエラーになるようになってしまいました。エラー内容は、Moyaがラップしている [Alamofire](https://github.com/Alamofire/Alamofire) がインポートできないというものでした。

```swift
import Alamofire
```

Moyaの最新バージョンは、ちょうど１年前にリリースされた [14.0.0](https://github.com/Moya/Moya/releases/tag/14.0.0) で、 それ以降は次のメジャーバージョン 15.0.0 の開発が進められていますが、あまり進捗は良くないように見えます。

困ったなぁと思っていたら、その問題を解消するプルリクエストが１週間前に master ブランチにマージされていました。どうやら FRAMEWORK_SEARCH_PATH の設定に問題があったようです。

[add framework search path to support building xcframeworks via Carthage #2130](https://github.com/Moya/Moya/pull/2130)

現時点でこのPRが含まれるタグはつけられていませんが、急ぐ場合は master ブランチを利用しましょう。

### (2021/2/19) 上記のエラーが解消された 1.4.0.1 がリリースされました

https://github.com/Moya/Moya/releases/tag/14.0.1
【Python】読込むブック名とセルの値をパラメーターにする。①

pythonを使用してExcelファイルの操作を勉強しています。
本日の気づき(復習)は、パラメーターに関してです。
pythonでExcelを操作するため、openpyxlというパッケージを使用しています。

後々レイアウトを変更したり、プログラムで読み込むブック名やセルの値を変えてしまうかもしれない時の対処法です。
なんだかちょっと実戦形式っぽくてワクワクしてます。

今回はこちらのブック「日報.xlsx」を、使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927441/bbc57acb-3d52-bacc-6512-533a4f62f4bf.png)

# コマンドライン引数
sysモジュールのargv属性を使ってコマンドライン引数を取得します。
詳しくはこちらをご確認ください。
https://docs.python.org/ja/3/library/sys.html

```python:commad_arguments.py
import sys
from openpyxl import load_workbook

filename = sys.argv[1]
cellno = sys.argv[2]

wb = load_workbook(filename, read_only=True)
ws = wb.active

print(ws[cellno].value)
```

```python
# 読み込むブック名とセル名を入力して実行
>python commad_arguments.py 日報.xlsx I1
-->hogehoge
```
argv属性はパラメターをリストで返すそうです。
ちなみに、「argv[0]」にはプログラム名が入ります。
Shell Script自分用メモ

#Shell Script コマンド　まとめ

##基本

####変数宣言
```shell
#=の左右は空白なし
#name ="MK"  //NG
#name= "MK"  //NG
#name = "MK" //NG
name="MK"
echo "My name is $name"

#コマンドの結果も変数に入れます
result=$(networksetup -getdnsservers Wi-Fi)
echo $result
```

####比較

```shell
#[の右と]の左もスペースが必要です
1="pencil"
if [ "$1" = "pencil" ]; then
    echo "Is Same"
else
    echo "Is Not Same"
fi
```
なぜか$1にも""を使う理由は何も代入しないと、以下の結果になってしまいます、errorです

```shell
if [ = "pen" ]; then
```

##Macで保存後ダブルクリックで実行
1.ファイルを.commandで保存、もしくは拡張子なし
2.

```shell
chmod +x myscript
```

##スクリプト実行後Enterキーを押すまで窓を閉じない

```shell
#scriptの最後で
read -p "Press Return to Close..."
```

##Wi-FiのDNSを切り替え

```shell
#現在のWi-Fi DNS確認
networksetup -getdnsservers Wi-Fi

#Wi-Fi DNSをセット
networksetup -setdnsservers Wi-Fi $dns

#Wi-Fi DNSを削除
networksetup -setdnsservers Wi-Fi empty
```

##ファイルをtar.gzにする

```bash
$ tar -czvf file.tar.gz ./folder
```

-c : 新しく作成する
-v : 出力
-f file.tar.gz : 対象
-z : gzipでfilterする

##tar.gzを解凍する
```bash
$ tar -xzvf file.tar.gz
```
-x : 解凍

```bash
$ tar -xzvf my.tar.gz -C /home/vivek/backups/
```
-C : 解凍先を指定する（実際は解凍する前にそっちに移動する）


##tar.gzの中身を見る
```bash
tar -ztvf file.tar.gz
```


#ファイルをリモートにあげる

##ファイルをアップロード
```bash
$ scp file.txt remote_username@XX.XX.XX.X:/remote/directory/myfolder
```
##ファイルの名前を変更
```bash
$ scp file.txt remote_username@XX.XX.XX.X:/remote/directory/myfolder/newFile.txt
```
##Directoryごとをリモートにあげる
```bash
$ scp r /folder/project remote_username@XX.XX.XX.X:/remote/directory/
```
##リモートからローカルへ
```bash
scp remote_username@XX.XX.XX.X:/remote/directory/file.txt /local/directory
```


#SSH 関連(要復習確認：X)

##連続コマンドを実行したい場合
```bash
ssh -T XXX.XX.X.XXX << `EOF`
cd /myfile/project/
pwd
ls -ll
mv file newFile
EOF
```

##ローカル変数は上記のやり方で使えないので注意
```bash
NAME="myProject"

ssh -T XXX.XX.X.XXX << `EOF`
echo "This is my ${NAME}"
EOF
```
###結果
```bash
This is my
```

##毎行ずつならできます
```bash
ssh -T XXX.XX.X.XXX << `EOF`
ssh -T XXX.XX.X.XXX echo "This is my ${NAME}"
```


##リモートにファイルあるかどうか
```bash
TARGETZIP="myfile.tar.gz"
ssh -T XXX.XX.X.XXX "[ -f /file/folder/$TARGETZIP ]"
```
【Rails】レスポンシブデザインを導入する

##１、viewportの設定

##viewport（ビューポート）とは
```
「表示領域」
　　Webページの横幅が、viewportとなる。
```

viewportを設定していないPC向けのページをスマートフォンで表示すると、文字もページも小さくなってしまう。
そこで、viewportを指定することで、画面幅いっぱいにコンテンツや本文がおさまるようにしていく。
ただ、viewportを設定しただけでは最適化されたとは言えない。
viewportでは表示領域を設定して、ページが見やすいように拡大されているだけになっている。
そのため、スマートフォン用にCSSでレイアウトを設定してあげる必要がある。

##viewportのmetaタグを記述する
```application.html.erb
<!DOCTYPE html>
<html lang="ja">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>ABCD DEMO</title>
   <link rel="stylesheet" href="./css/reset.css">
   <link rel="stylesheet" href="./css/style.css">
   <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700,900&display=swap" rel="stylesheet">
 </head>
```
「width=device-width」は、閲覧している画面サイズに合わせてサイズ変更するという意味になる。

###initial-scale（初期倍率）
最小縮小倍率の指定。
初期値は0.25で、0より大きく10未満の値を指定できる。

###maximum-scale（最大倍率）
minimum-scaleと同様最大拡大倍率を指定できる。
0から10の値を指定することができる。
設定しない場合は1.6と自動的に設定される。

###user-scalable （ズーム操作の可否）
ユーザーがズームすることを許可するかどうかを指定できる。
yesかnoまたは1か0で指定することができる。
設定しない場合はuser-scalable=yesと自動的に設定される。

##２、メディアクエリの設定
```
  デバイスの解像度やウィンドウの幅、向きなどの指定条件に合わせて、別々のCSSを適用できる機能のこと
```
メディアクエリでは、link要素中のmedia属性やCSSの@media規則を使って、デバイスやスクリーンサイズで適用範囲を切り替えることができる。
一般的に、link要素を利用して複数ファイルを読み込むよりも、CSS中で@mediaを記載した方がHTTPリクエストの回数が少なく、ページの読み込みが早くなると言われている。

###ブレイクポイント
メディアクエリを使ったCSSの切り替えでは、CSSの切り替え条件として「ブレイクポイント」(Break Point)を設定する。

##記述例
```application.css
@media screen {
　　* {font-size: 16px; }  
}
```
```application.css
@media screen and (min-width:960px){
　　* {font-size: 16px; }  
}
```

##表示を確認する
ブラウザの検証ツールを立ち上げる
ピンク丸の部分の表示をクリック

![スクリーンショット 2021-02-18 22.42.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780845/f7181ff7-5e9e-e4c9-bb61-648d265c4d0c.png)

上記画像のボタンをクリックすると「デバイスモード」が立ち上がります。デバイスモードでは、様々なデバイスのサイズでWebサイトの表示が確認できる。


![スクリーンショット 2021-02-18 22.46.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780845/6c6b12f0-b10e-cbb9-be66-ffbe338ee99e.png)

画面上部の「Responsive」の部分で、主要なスマホやタブレットでの表示がプルダウン形式で選択できる。
「Responsive」は画面幅をマウスドラッグで変更したり、任意の数値（px）を指定することができる。
それ以外の具体的なデバイスを選択すると、そのデバイスの画面幅で表示されるようになる。