OmniAICreator/Qiita-1.07M huggingface dataset:
textareaにmargin: 0 auto;を設定しても左右中央に寄らない問題の解決法

# 問題の画面
![スクリーンショット 2020-05-01 10.05.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547640/8385413f-5b38-a0ba-a970-87259b80f19b.png)

# 問題
赤枠で囲ってあるtextareaを左右中央に寄せようとしても寄らない。
textareaのクラスに`margin: 0 auto;`を設定しても変わらない。

# 試したこと
1. marginが効かない？
→ `margin: 10px 10px 10px 10px;`は設定できたので、margin自体が効かないというわけではなさそう。

2. 親要素のwidthが設定されていないから？
→ 親要素にwidthが設定されていなくて、widthを指定したけどダメだった。

# 解決方法
textareaに

```
display: block;
```
を設定した。

# 原因
textareaはインライン要素なので、`margin: 0 auto;`が効かなかった。
`margin: 0 auto;`を効かせるにはブロック要素である必要があるため、`display: block;`でブロック要素に変換した。

# 変更後の画面
![スクリーンショット 2020-05-01 10.50.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547640/f8ad46ec-4921-e092-4869-58c655f3e983.png)
言語処理100本ノック　第4章: 形態素解析　32. 動詞の原形

# 問題
> 動詞の原形をすべて抽出せよ．
https://nlp100.github.io/ja/ch04.html

``` python
# inputデータ
[[{'surface': '一', 'base': '一', 'pos': '名詞', 'pos1': '数詞'}],
 [{'surface': '吾輩', 'base': '吾輩', 'pos': '名詞', 'pos1': '普通名詞'},
  {'surface': 'は', 'base': 'は', 'pos': '助詞', 'pos1': '副助詞'},
  {'surface': '猫', 'base': '猫', 'pos': '名詞', 'pos1': '普通名詞'},
  {'surface': 'である', 'base': 'だ', 'pos': '判定詞', 'pos1': '*'},
  {'surface': '。', 'base': '。', 'pos': '特殊', 'pos1': '句点'}],
 [{'surface': '名前', 'base': '名前', 'pos': '名詞', 'pos1': '普通名詞'},
  {'surface': 'は', 'base': 'は', 'pos': '助詞', 'pos1': '副助詞'},
  {'surface': 'まだ', 'base': 'まだ', 'pos': '副詞', 'pos1': '*'},
  {'surface': '無い', 'base': '無い', 'pos': '形容詞', 'pos1': '*'},
  {'surface': '。', 'base': '。', 'pos': '特殊', 'pos1': '句点'}],
...
```

# 回答
``` python
surface = []
for sentense in result_list:
    for morphene in sentense:
        if morphene['pos'] == '動詞':
            surface.append(morphene['base'])
surface

# 結果
['生れる',
 'つく',
 'する',
 '泣く',
 'する',
 '始める',
...
```

# 参考にしたサイト
[言語処理100本ノックに挑戦 第4章](https://qiita.com/takugenn/items/44bf9cd78824ce7892d5)
Apacheの色々メモ、VirtualHost

apacheで試した事や参考サイトのメモ書きです。

#####環境
ec2、amazon linux2(centOS7系)
Apache2.4

#####同じサーバ内で複数のホスト（サブドメイン）が動作するようにする、VirtualHostの設定

やりたい事は、同じサーバに対して、「ドメイン.com」、「www.ドメイン.com」、「www2.ドメイン.com」の３つでhttpアクセスできるようにする（それぞれのドキュメントルートは別々）。
（*DNSで３つのAレコードの設定が前提です）

/etc/httpd/conf/httpd.confに以下を追加します。

```/etc/httpd/conf/httpd.conf
<VirtualHost *:80>
    ServerName ドメイン.com
    DocumentRoot /var/www/html
</VirtualHost>
<VirtualHost *:80>
    ServerName www.ドメイン.com
    DocumentRoot /var/www/www/html
</VirtualHost>
<VirtualHost *:80>
    ServerName www2.ドメイン.com
    DocumentRoot /var/www/www2/html
</VirtualHost>
```

これで、設定ファイルを読み込みなおせば、「ドメイン.com」、「www.ドメイン.com」、「www2.ドメイン.com」の３つにhttpアクセスできるようになります。

```
$ sudo systemctl reload httpd
```

あと、DNSの方で「www4.ドメイン.com」も同じサーバにアクセスするように設定していた場合、一番最初に書いた「ドメイン.com」の設定が適用されました。IPアドレスでアクセスした場合も、「ドメイン.com」の設定が適用されます。
また、下のように設定ファイルを書けば、「www2.ドメイン.com」の設定が適用されます。

```/etc/httpd/conf/httpd.conf
<VirtualHost *:80>
    ServerName www2.ドメイン.com
    DocumentRoot /var/www/www2/html
</VirtualHost>
<VirtualHost *:80>
    ServerName ドメイン.com
    DocumentRoot /var/www/html
</VirtualHost>
<VirtualHost *:80>
    ServerName www.ドメイン.com
    DocumentRoot /var/www/www/html
</VirtualHost>

```

次に、ServerAliasについてです。

```/etc/httpd/conf/httpd.conf
<VirtualHost *:80>
    ServerName ドメイン.com
    DocumentRoot /var/www/html
</VirtualHost>
<VirtualHost *:80>
    ServerName www.ドメイン.com
    DocumentRoot /var/www/www/html
#  ServerAlias *  #ワイルドカード
    ServerAlias www3.ドメイン.com www4.ドメイン.com
</VirtualHost>
<VirtualHost *:80>
    ServerName www2.ドメイン.com
    DocumentRoot /var/www/www2/html
</VirtualHost>
```
上では、「www3.ドメイン.com」と「www3.ドメイン.com」にアクセスされた時に、「www.ドメイン.com」と同じDocumentRootの/var/www/www/htmlを見るようになります。
同じDocumentRootを見るならば、VirtualHostタグを追加するよりServerAliasを使ったほうが見た目もスッキリします。
ServerAliasはスペース区切りで複数指定可能で、IPアドレスやワイルドカード（*）も指定できます。

あと、DocumentRootのパスについてです。

```/etc/httpd/conf/httpd.conf
<VirtualHost *:80>
    ServerName www2.ドメイン.com
    DocumentRoot /var/www2/html
</VirtualHost>
```

上の設定はvar直下にDocumentRootを指定しましたが、「www2.ドメイン.com」にhttpアクセスしたらapacheのTest Pageが表示されました。
しっかりと調べてないですが、DocumentRootで指定できるバスには制限があるみたいです。

#####VirtualHostの参考サイト
[1台のApache Web Serverに複数のドメインを設定する]
(https://qiita.com/terrym/items/ba988394fbe6099b4485)
[仮想ホストのエイリアスの設定]
(https://www.adminweb.jp/apache/virtual/index3.html)
-> ServerAliasについて説明している
[CentOS 7 の Apache httpd 2.4 に VirutalHost の設定をする手順](https://weblabo.oscasierra.net/apache24-centos7-virtualhost/)
[Apache2 バーチャルホスト 設定](http://centos.server-manual.com/centos5_apache2_virtual.html)


#####OS起動時にApacheを起動する設定

```
$ sudo systemctl enable httpd
```

現在の設定がどうなっているか、systemctl status httpdコマンドで、systemctl status httpdの値がenableかdisabledかで確認できます。

```
$ sudo systemctl status httpd
● httpd.service - The Apache HTTP Server
   Loaded: loaded (/usr/lib/systemd/system/httpd.service; enabled; vendor preset: disabled)
```




#####その他の参考サイト
[公式 Apache HTTP サーバ バージョン 2.4 ドキュメント](http://httpd.apache.org/docs/2.4/)
[Apache 2.4.34](https://eldorado-of.info/wiki/linux/apache/apache2-4-34)
->日本語で1ページでまとめられている。インストール、設定、ツール、コマンド、チューニング
【Java】HashMapの要素を拡張for文を使ったループ制御で取得する方法

##開発環境
・ホストOS: Windows10 Home
・ゲストOS: WSL2 Ubuntu20.04 LTS
・VScode ver 1.44.2
・openjdk 11.0.7

##概要
・拡張for文を使ってHashMapの各要素を取得します。配列やリストと比較してやや複雑な文になります。


##サンプルコード



```java

HashMap<String, Integer> map = new HashMap<String, Integer>();

map.put("犬", 3);
map.put("猫", 10);
map.put("兎", 5);
```

##①keyを取得する

**keySet()**メソッドを使います

```java

for(String animal : map.keySet()) {
  System.outprintln(animal);
}
```

出力結果

```
猫
兎
犬
```
(※HashMapは配列やリストと異なり順番が担保されません)

##②valueを取得する

**values()**メソッドを使います。valuesSet()メソッドではないことに注意したいですね

```java

for(Integer num : map.values()) {
  System.out.println(num);
}
```

出力結果

```
5
3
10
```



##keyとvalueを両方取得する

**entrySet()**メソッドを使います。

```java

for(Map.Entry<String, Integer> entry : map.entrySet()) {
  System.out.println(entry.getKey() + ":" + entry.getValue());
}
```

出力結果

```
猫:10
犬:3
兎:5
```
ずっとためらっていた僕がQiitaを始めたわけ

# 22歳学生、Qiitaを始める
高校生の頃から、プログラミングでわからないことが合ったらお世話になっていたサイト「Qiita」。
UnityやPythonでやりたいことができないときにGoogle先生がレコメンドしてくれるのがこのサイトだった。

正直言って技術に強い人のためのサイトだと思っていたので、なかなか敷居が高く感じていたことは事実だ。
ではなぜその重い腰をあげ、ついにQiitaを始めたのか。

## 独りよがりプログラミング
昔からゲーム製作をしていた僕にとってプログラミングは手段でしかなく、しかも個人製作だったため自分がわかればいいコードしか書かなかった。
つまり、コードはわかりやすさ重視でいわゆる洗練されたコードではなかった。
こう聞くと聞こえはいいかもしれないが、要するに既存の知識の中でゲームを作っていたから、新しい技術に対する勉強がおろそかになっていた。

大学に入り、プログラミングが趣味ではなく授業で、研究で、インターンで必要になってくるとこの問題が深刻化してきた。
研究は共同で行うことも多い、独りよがりなコーディングをしていてはダメだし、他の人が書いたコードをきちんと解読する必要もある。

そういう環境で少しずつ自分の技術力が歪んで成長していたことにようやく自覚したのである。

## コードが読めない！
**抽象クラス!? 知らねえよそんなの！**
**そもそもクラス作んなくてもこれ動くだろ！**

動けばいい、そういう発想のもとでコードを書いてきた僕には`__doc__`や`@Override`なんてなんのためにあるのかわからないし、わからないなら必要なかった。

でも勉強の必要性を理解した僕は、ついに重い腰をあげるに……まだ至らない。

## インターンで大爆死
勉強の必要性なんて、とうの昔から知ってたし、むしろわからないものに関しては勉強はたまにしていた。
そう、勉強の必要性を感じた = Qiitaを始める、の方程式は成り立たないのである。

じゃあなんで~~こんなめんどくさい~~Qiitaを始めようと思ったのか、その直接的な要因は**インターン**である。

技術系のインターンに応募しようとすると必ず見る文句、それが**過去の実績**である。

> 今まで何してたの？
> Githubのアカウントは？ ないの？
> じゃあブログとかでもいいよ　してないのか
> じゃあポートフォリオは？　ないのか…

そりゃ取りたくないよねこんな学生。
いや、当然勉強はしてますよ？
でもアウトプットのない学生は企業から見たとしても魅力的に映らないのは至極真っ当だろう。

むしろ、平凡な能力しか持たない僕にとっては、こういうアピールこそが真に重要であるはずなのだ。

そう理解した僕は、ついにQiitaのアカウントを作った……
(ついでにGithubも作った)

## 終わりに
この記事は僕の生涯初めてのQiitaの記事である。
ゆえにまだQiitaに感謝してることはないし、使いやすいとも思っていない。
今後、勉強したことをメモしていく上で、もし来年、二年後と僕がまだ記事を書いていたら、Qiitaは怠け者の備忘録として優秀だったということだろう。

以上、数年後とかに見返すための自分用記事でした。
デプロイとは

# デプロイとは
 デプロイとは特定の環境下でシステムを使えるようにする事です。

ざっくりいうと
　**使える状態にする事**です。

プログラムを作ったとしても、動かなかったら意味がないですよね。
この動かす状態にするのがデプロイなのです。


また、現場では開発環境からテスト環境、テスト環境から本番環境へあげる事をデプロイと言ったりします。

このようにデプロイは曖昧な感じで使われたりもするので、ざっくり意味を理解する程度で良いかもしれないですね。


# 参考サイト
[【初心者用】デプロイとは？意味を会話調で丁寧に解説します！](https://wakatech.jp/deployment)
[「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典](https://wa3.i-3-i.info/word16767.html)
PRを送られた際のコンフリクトの解決法

PRを相手から送ってもらったのは初めての経験なので記録に残します。


参考記事
https://qiita.com/Kto_pi/items/4fd6bdec72e852763315


conversationのマージボタンをクリックするとコンフリクトが発生しているとのこと。

今回はgithub上で直せるコンフリクトでした。


下記のような感じで表示されるので該当部分を削除してあげます。

今回は元々あったmasterブランチと、PRで送ってもらった部分がコンフリクトしていました。

したがってmasterの部分を消してあげます。

下記の部分です。下記コードの上には最新（HEAD）となるコードが表示されていました。（省略しています。）

```
=======
      host: portfolio.crtlvydt6zsr.ap-northeast-1.rds.amazonaws.com
      username: root  
      password: Shota033           
      pool: 5
    development:
      <<: *default
      database: porfolio_development
    test:
      <<: *default
      database: portfolio_test
>>>>>>> master

```



該当部分の削除の仕方を失敗してしまうと、アプリが動かなくなってしまうので注意。



通常conflictが起きた場合は最新のcommitと一個前のcommitが二つ表示されるので、どちらかを削除するようにしましょう。（下に表示されているコードを消すのが多いと思います。）



```
=====HEAD====  
gem1
gem2
変更てん
=====commitID===  #消す
gem1              #消す
gem2              #消す
```
Snap Camera でWeb会議!?

テレワークです。
でも、自分はお金持ちで書斎があるような人ではないので、洗濯物だけが背景になってしまうため、常に顔出しNG状態です。

そこで、Snap Camera　というツールを入れてみました。
MacでもWindowsでも使えるのがいいですね。

###インストール
https://snapcamera.snapchat.com/

###参考
ありがとうございます。参考にしました。
使い方：
https://qiita.com/eterao/items/4bbe53f4a715579ee407
lensの作り方：
https://note.com/ksone/n/nd0797d865823

###lensの作成
背景とか顔を買えるのとか、lensというそうです。
これは、lens studioというアプリで自分で作れます。
上記URLを参考にして、チャレンジしました。

Snap Camera で「ABK28」で検索してみてください。
最近、仮面ライダー公式WEBで無料公開された、デンライナーの車内画像を背景にしたlensを公開しています。
gitでよく使うコマンド (gitl, gitd, gits)

私がよく使っているコマンドを紹介しておきます。 `gitl`, `gitd`, `gits` というコマンドですが、そういうコマンドが一般に存在するわけではなくて、自分でそういう名前のスクリプトを作ってあるだけです。

# gitl

gitのコミットログをCUIで確認するとき、みなさんはどうしてますでしょうか。私は以下のコマンドです。

```console
$ git log --graph --date-order --branches --tags --remotes HEAD --pretty=format:"%Cgreen%ai %Cblue%an %Cgreen%h %Cblue%d %Creset%s"
```

以下のような感じで、コミットの概要とマージやブランチの状況がわかります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490207/8acbb31f-a810-7b96-ab53-46232be8ccff.png)

オプションが長すぎて覚えられないので、これを打つことはなくてスクリプトにしています。以下のようなスクリプトで `gitl` という名前と実行権限を付けて、PATHの通った場所に置いています。特定のブランチだけを見ることもできます。

```shell
#!/bin/sh

if [ $# -gt 0 ]; then
    git log --graph --date-order \
        --pretty=format:"%Cgreen%ai %Cblue%an %Cgreen%h %Cblue%d %Creset%s" "$@"
else
    git log --graph --date-order --branches --tags --remotes HEAD \
        --pretty=format:"%Cgreen%ai %Cblue%an %Cgreen%h %Cblue%d %Creset%s"
fi
```

例

```console
$ gitl
```

```console
$ gitl devel
```

このコマンドを私はもう7年以上使っています。

# gitd

特定のファイルがいままでどう編集されてきたかのログを見るには、私は以下を使っています。

```console
$ git log --graph --date-order --pretty=format:"%Cblue%d %Cgreen%ai %Cblue%ae %Cgreen%h %Creset%s" -b -p libexec/rbenv
```

こんなふうに表示されます。コミットごとの差分がログの形式で確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490207/db2c46d6-cdc7-0e39-3752-66950936e095.png)

`gitd` という名前でスクリプトにするならこんなファイル。

```shell
#!/bin/sh

git log --graph --date-order --pretty=format:"%Cblue%d %Cgreen%ai %Cblue%ae %Cgreen%h %Creset%s" -b -p "$@"
```

例

```console
$ gitd libexec/rbenv
```

このコマンドを私はもう7年以上使っています。

# gits

なんのファイルを編集したかわからなくなったときはこれ。

```console
$ git status -s
```

`git status` に `-s` を付けずに使うことは私はないです。 `git status -s` を `gits` という4文字だけで実行できるようにしています。スクリプトにするほどでもなく、aliasで設定できます。

このコマンドを私はもう7年以上使っています。

ほかにも `gita` とか `gitb` とかありますけど、省略します 😅

以上。
xibの使い方がいつまでたってもわからない

わかることからメモを取る。

＜xibでviewControllerを作る流れ＞
・ストーリーボードでxibをいい感じに作る
・作りたいviewController名のswiftファイルを作り、初期化処理を実装。
・ストーリーボード内で、File's OwnerのCustom Class欄でクラス名（＝作りたいviewControllerの名前）を指定
→xibとswiftファイルの連携が完成

＜xibでその他パーツを作る流れ＞
・ストーリーボードでxibをいい感じに作る
・ストーリーボード内で、File's OwnerのCustom Class欄でクラス名（＝作りたいパーツの名前）を指定
・init(frame:)、init(coder:)の両方にloadNib()を書くことで、swiftにxibを読み込める（そのほかにも色々やり方があるらしい）

viewControllerじゃないのを作るほうは特に曖昧……。全然使ったことないので。試してみよう。
【ふくだ学習録】自学自習 part1【47日目】

# ふくだ学習録とは？
ふくだが学習したことの備忘録。
目に見える形で残すことによってやる気を出す個人的な作戦です。
他人に見せるように書いているわけではないので、すごく読みにくいです。

### 読了した本
[データベースエンジニア養成読本 [DBを自由自在に活用するための知識とノウハウ満載!]](https://www.amazon.co.jp/dp/4774158062/ref=cm_sw_r_tw_dp_U_x_FPphEbQFPPQRM )
[ゼロから作るDeepLearning](https://www.amazon.co.jp/dp/4873117585/ref=cm_sw_r_tw_dp_U_x_y3UiEbF3P6EG7)
[PHPフレームワーク CakePHP 3入門](https://www.amazon.co.jp/dp/4798048577/ref=cm_sw_r_tw_dp_U_x_.YIjEbS1K4JY2)
[SQLアンチパターン](https://www.amazon.co.jp/dp/4873115892/ref=cm_sw_r_tw_dp_U_x_XlokEbJQK2N7P )
[Docker入門](https://www.amazon.co.jp/dp/480071091X/ref=cm_sw_r_tw_dp_U_x_xVlmEbN8ZTHZK)
[PHPフレームワーク Laravel入門](https://www.amazon.co.jp/dp/4798052582/ref=cm_sw_r_tw_dp_U_x_zzeyEbJBSQ5Y0 )
[サブスクリプション](https://www.amazon.co.jp/dp/B07HY1TND9/ref=cm_sw_r_tw_dp_U_x_lp4NEb3EEGD7Y)


### 今読んでいる本

なし

# 自学自習
本日から事業部移動により、触る技術が少し変わるので、それに向けての自学自習。
（本当はもっと早く予習完了しておきたかったけど、自分に甘くてあまり進めれてなかった、、反省。）

基本はライブラリ関係を調べる感じかな？
とりあえずメモったほうが良さそうなことをメモっていく。

### 【React】apisauce
api通信用のライブラリ。axiosより軽い。
https://www.npmjs.com/package/apisauce

### 【Laravel】SPA時のCSRFの注意点
[初心者の私がLaravel＋Vue.jsでSPAを作るときのCSRFトークンでつまずいたこと](https://qiita.com/Hidenatsu/items/708769159cdb7618e208)

<img width="891" alt="1493029546.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356866/69526173-06da-7e8b-1ef7-0a2198d7dbdd.png">


### 【フロント&サーバー】Bearer認証
[Bearer認証について](https://qiita.com/h_tyokinuhata/items/ab8e0337085997be04b1)



# 今日の一言
もっと早く朝起きネバダ。
インターネットにつながらない環境で急にrailsのアプリを作りたくなったら

# 記事の概要
インターネットにつながらない職場のサーバで、railsの環境を作った際のメモです。

# 効能
この記事は以下の症状に該当する人に効果があるかもしれません。（使えなくてもスミマセン）
・ふとした拍子に職場でrailsのアプリを作りたくなることがある。
・急にrailsを実験したくなる。
・急にrubyが書きたくなる。
・しかし、gemファイルを一個一個ダウンロードして環境構築なんてやってらんねーからやーめた。

# 前提
職場のPCからはインターネットがみられる。
職場のPCから、サーバへのSSH接続可能。
家のPCから、職場のPCへのデータ持ち込み手段がある。(メールとか、自前のホームページとか。)

# 手順
1. 家で一回環境を作る。
    1. アプリケーションディレクトリを生成

        ```bash:shell
        # アプリケーションを作って。。
        rails new appname
    
        # => これでbundle installまでしてくれますね。

        # 生成されたディレクトリに移動しておくと、後々楽です。
        cd appname

        ```

    1. database.ymlを編集
      使うデータベースに合わせて編集します。
      ここでは、とりあえずのdevelop環境＆sqliteでやりますので、デフォルトのままです。

        ```yaml:database.yml
        default: &default
        adapter: sqlite3
        pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
        timeout: 5000
        
        development:
         <<: *default
          database: db/development.sqlite3
        ```

    1. 適当にscaffold
        とりあえず、sqlite用のgemがインストールされてなくてやり直しって事があったので、モデルの生成＆ちょっとした動作確認まで進めちゃいます。

        ```bash:shell
        # アプリケーションディレクトリで以下のコマンドを実行。
        bundle exec rails g scaffold ExampleTest title:string description:string

        # マイグレーションを実行
        bundle exec rails db:migrate

        # 動作確認用にサーバを起動(ローカルでしか起動しないので、バインディングとポート番号は適当です。)
        bundle exec rails s -b 0.0.0.0 -p 30001

        # 無事起動したら、以下のアドレスにアクセスしてみます。
        # http://localhost:30001/example_tests
        # アクセスできたら、Ctrl + Cでサーバを止めます。

        ```

    1. まとめて固めて持っていく。
        bundlerには必要なgemファイルを/vendor/cacheにまとめてくれる機能(パッケージ化)があります。
        こいつを使って、他の環境に持ち運べるようにします。

        ```bash:shell
          # コマンドを一つ叩くだけの簡単なお仕事です。
          bundle pack

          # そうしますと、./vendor/cacheの中にgemファイルがたくさん入ってきます。
          ls -1 ./vendor/cache

          # 結果例:
          # actioncable-6.0.2.2.gem
          # actionmailbox-6.0.2.2.gem
          # actionmailbox-6.0.2.2.gem
          # :(延々と続く)

          # では、これらを固めてしまいます。
          # まずは、アプリケーションディレクトリの一個上の階層に移動して。。
          cd ../

          # tarで固める。(appnameはrails newの時に指定したアプリケーション名ですね。)
          tar cvzf appname.tgz appname

        ```

    1. 出来上がったtarファイルをなんとかして職場PCに持ち込む
        私は、自前のS3を使いました。。

1. 作ったrailsアプリをサーバで展開。
    1. SSHを使ってtarファイルをサーバに置きます。
    1. 置いたら、以下の手順で、展開＆bundle install

        ```bash:shell
        # まずはtarファイルを展開(tgzにしてましたが。。)
        tar xvzf appname.tgz

        # 出来上がったディレクトリに移動
        cd appname
 
        # 以下のコマンドで必要なgemをインストールできます。
        # --localオプションにより、vendor/cache配下のgemを使ってくれるという寸法です。
        bundle install --local
        ```
        => これで完了です。
git pushで自分のレポジトリへのアクセスが403で拒否される対処法 Remote: Permission to user1/repo denied to user2



##windows PCで自分のレポジトリへgit pushしたら403エラーが返ってきた際の対処法

githubのアカウントを2つ持っているが、pushした際にクローンしたレポジトリと違う方のユーザーが認識されてしまい、403エラーが返ってきた。

```
remote: Permission to user1/demo-repo.git denied to user2.
fatal: unable to access ‘https://github.com/user1/demo-repo.git/’: The requested URL returned error: 403code
```

###ちなみにここでは以下の環境を使用している
`・Windows 10 PC
・git bash 2.26`

###まずはgitconfigを確認した
```
$ cat ~/.gitconfig
[user]
    name = user1
    email = user1@gmail.com
```

アクセスしたいレポジトリのユーザーになっているから問題はなさそう...
ちなみにユーザーが違う場合、あるいは登録されていない場合は以下２つのやり方で登録する。

>１．直接configファイルを編集する

```
$ vi ~/.gitconfig 
```


>２．コマンドラインで登録する

```
$ git config --global user.name "user1"
$ git config --global user.email "user1@gmail.com"
```


もう一度pushしてみる

```
$ git push origin master
```

同じエラーがでる...
再インストールも試してみたが、エラーは治らず。

そこでPC側がどのように認証をしているのか確認した

```
$ git config credential-helper
manager
```

調べてみるとPC側の資格情報マネージャーによってユーザーを認証しているようだ。
***認証情報を一度消すことによって解決できるそうだ！***
`コントロールパネル＞（ユーザーアカウント）＞資格情報マネージャー＞Windows資格情報`

githubの資格情報があったらそれを削除する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537525/22637ebd-70c6-19ca-2b6e-0fd8030dc998.png)

もう一度pushしてみる。

```
$ git push origin master
```

するとusernameとpasswordを聞かれる画面がポップアップで出てきた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537525/eb6ef944-fa6f-7520-24d3-fca11e539e42.png)

この画面にクローンしたレポジトリのユーザー名を入れることで解決できた！

ちなみにMacを使用している方はkeychain managerに資格情報があるようなので、そこでgithubの資格情報を削除することで対処できるようだ。


以下サイトを参考
https://www.freecodecamp.org/forum/t/need-your-help-with-github-permission-denied-to-my-own-repo/17421/4
Docker mysql:5.7 の etc-mysql.cnf へ default-time-zone を指定したらエラーが発生

TimeZone を Asia/Tokyo にする必要があり etc-mysql.cnf へ default-time-zone を指定したらエラーが発生したので、その対処の備忘録です。

# 現象

etc-mysql.cnf へは以下を記載して、 docker-compose 経由でコンテナを立ち上げていました。

```conf:etc-mysql.cnf
[mysqld]
default-time-zone = 'Asia/Tokyo'
```

すでに MySQL用の Volume が作成されている場合はエラーは発生しなかったのですが、 Volume が作成されていない状態（初めての状態）で docker-compose すると、 MySQL のコンテナがエラーで立ち上がりませんでした。

`docker logs` コマンドでエラー内容を確認すると以下のエラーが発生していました。

```
Fatal error: Illegal or unknown default time zone ‘Asia/Tokyo’
```


# エラー解消方法

etc-mysql.cnf で指定した場合、タイムゾーンがロードされていないため、エラーが発生しています。
簡単な対応方法は、以下のように環境変数「TZ」でタイムゾーンを指定する方法です。

```yml:docker-compose.yml
  db:
    image: mysql:5.7
    container_name: db
    ports:
      - 3306:3306
    environment:
      - MYSQL_ROOT_PASSWORD=root
      - TZ=Asia/Tokyo
```


# 参考

- https://stackoverflow.com/questions/49959601/configure-time-zone-to-mysql-docker-container
今更ながらPHPでスクレイピングしてみた

###概要
LineBot作るためにPHPで初めてスクレイピングしたのでPHPでスクレイピングしたお話

『PHP スクレイピング』でgoogle様に聞くとPHPQueryというのを使うと簡単にスクレイピングができるらしいのでPHPQueryを使っていきます。

>参考サイト
https://qiita.com/nadonado/items/0ac037d90c5248b7eac3

###今回の目標
今回は送られてきた英単語に対してその英単語の例文を返すBotを作るので、英ナビ( https://www.ei-navi.jp/ )から例文を取得するpログラムを組みます。

###PHPQueryの設置
PHPQueryの公式サイト( https://code.google.com/archive/p/phpquery/downloads )
一番上のZipfailをダウンロード

zipファイルを解凍

![スクリーンショット 2020-04-30 14.57.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568975/e645ea6c-2ba1-2d4b-f83a-535b069d504a.png)
あとはこんな感じで設置(今回はMAMPで動かしてます）
PHPQuery-onefile.phpには何も書き込まないでOKです。
index.phpでPHPQuery-onefile.phpを読み込んで使います。(設置簡単すぎてワロタ)

###スクレイピングするサイトの構造を見る
![スクリーンショット 2020-04-30 15.08.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568975/a6fadf4d-f7d5-726a-1b74-120412ec06d1.png)

英ナビのサイトを開いてみてみると以下のことがわかると思います
>urlは https://www.ei-navi.jp/dictionary/content/検索した単語 になっている
例文はexampleというclassに入っている

この２つのことがわかったので実際にコードを書いていきます
###サンプルコード

```index.php
// phpQueryの読み込み
require_once("./phpQuery-onefile.php");

$search_word = "dog";//botの時は送られてきた単語が入るが今回は検索結果を固定する

$html = file_get_contents("https://www.ei-navi.jp/dictionary/content/".$search_word);

$sentences =  phpQuery::newDocument($html)->find(".example");

foreach($sentences as $sentence) {         
    $Example_sentence = pq($sentence);//pq()の形で再定義が必要    
    $sentence_list = $Example_sentence->text(); 
    echo $sentence_list."<br />";
}
```
今回は犬(dog)の例文を抜き取るれるよう作りました
$search_wordの部分を変えると取ってくる値も変わります。

###終わりに
スクレイピングをするのは意外と簡単なので初学者におすすめです。
個人的に面白かっったのでもっとやりたい分野です
【Unity】効果音を複数使用したい場合の2つの設定方法

#環境
Unity 2019.3.7f1

#はじめに
2つ以上の効果音を使用したい時の設定方法です。

基本の記事の応用になります。
音の基本の記事はこちらです。
https://qiita.com/Maru60014236/items/94a017ae59306929dbfb

#2つの設定方法
設定方法の決定方法は、
音のボリュームやピッチの**「詳細設定が共通であるか」**で決めます。

AudioSourceコンポーネントでいうこの設定値たちです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/cfa70036-0764-d112-f473-1c20869a6366.png)

**・設定値が共通の場合**
複数のAudioClipに対し、1つのAudioSourceコンポーネントを用意する方法
メリット：AudioSourceの用意は1つで済む
デメリット：個別で音の調整が必要な場合、設定が面倒(スクリプトからいちいち設定変更しないといけない)

**・設定値が効果音ごとに異なる場合**
1つのAudioClipに対し、1つのAudioSourceコンポーネントを用意する方法
メリット：個別で音の調整が事前に可能。
デメリット：AudioSourceを効果音の数だけ用意する必要がある。
無料の効果音を集めていくとそれぞれ音量が違うので私はこちらの方法で設定しています。

#具体例
###・設定値が共通の場合
複数のAudioClipに対し、1つのAudioSourceコンポーネントを用意します。

以下、3つのAudioClipを使用する例です。
スクリプトは次のように書きます。

```CSharp
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class test4 : MonoBehaviour
{
    [SerializeField] private AudioSource a;//AudioSource型の変数aを宣言 使用するAudioSourceコンポーネントをアタッチ必要

    [SerializeField] private AudioClip b1;//AudioClip型の変数b1を宣言 使用するAudioClipをアタッチ必要
    [SerializeField] private AudioClip b2;//AudioClip型の変数b2を宣言 使用するAudioClipをアタッチ必要 
    [SerializeField] private AudioClip b3;//AudioClip型の変数b3を宣言 使用するAudioClipをアタッチ必要 

    //自作の関数1
    public void SE1()
    {
        a.PlayOneShot(b1);
    }

    //自作の関数2
    public void SE2()
    {
        a.PlayOneShot(b2);
    }

    //自作の関数3
    public void SE3()
    {
        a.PlayOneShot(b3);
    }
}
```
対応するAudioSourceとAudioClipをアタッチ。
自作の関数をボタンや、特定のタイミングで呼び出して使用します。
(b1～b3は適当に効果音割り付けただけです～)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/f29578aa-7d4f-5aa4-78c8-237261e509f4.png)


###・設定値が効果音ごとに異なる場合
1つのAudioClipに対し、1つのAudioSourceコンポーネントを用意します。

3つのAudioClipを使用する例です。
効果音別で設定値を変更したいため、3つのAudioSourceを用意します。
スクリプトは次のように書きます。

```CSharp
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class test4 : MonoBehaviour
{
    [SerializeField] private AudioSource a1;//AudioSource型の変数a1を宣言 使用するAudioSourceコンポーネントをアタッチ必要
    [SerializeField] private AudioSource a2;//AudioSource型の変数a2を宣言 使用するAudioSourceコンポーネントをアタッチ必要
    [SerializeField] private AudioSource a3;//AudioSource型の変数a3を宣言 使用するAudioSourceコンポーネントをアタッチ必要

    [SerializeField] private AudioClip b1;//AudioClip型の変数b1を宣言 使用するAudioClipをアタッチ必要
    [SerializeField] private AudioClip b2;//AudioClip型の変数b2を宣言 使用するAudioClipをアタッチ必要 
    [SerializeField] private AudioClip b3;//AudioClip型の変数b3を宣言 使用するAudioClipをアタッチ必要 

    //自作の関数1
    public void SE1()
    {
        a1.PlayOneShot(b1);//a1にアタッチしたAudioSourceの設定値でb1にアタッチした効果音を再生
    }

    //自作の関数2
    public void SE2()
    {
        a2.PlayOneShot(b2);//a2にアタッチしたAudioSourceの設定値でb2にアタッチした効果音を再生
    }

    //自作の関数3
    public void SE3()
    {
        a3.PlayOneShot(b3);//a3にアタッチしたAudioSourceの設定値でb3にアタッチした効果音を再生
    }
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/04ea0279-16d7-277b-a68d-097c342c095d.png)
対応するAudioSourceとAudioClipをアタッチ。

AudioSourceの設定を個別で変更することで細かい調整を行うことができます。

#おわりに
もっと良いやり方があれば教えてください。
AWS KernelLivePatching(プレビュー)を試してみた、けど

AmazonLinux2のカーネルを無停止でパッチを当てられるKernel Live Patching(プレビュー)を試してみました。
https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/al2-live-patching.html

現在(2020-05-01)新規EC2を作成する場合は、最新のカーネルで起動してしまうのでパッチ当てが試せない状況です。
→ 試してみました。

## 前提条件

- Amazon Linux 2であること
- x86_64アーキテクチャであること(arm64でないこと)
- カーネルバージョンが4.14.165-131.185を含め以降のバージョンであること
    - そうでない場合は先に通常のカーネルバージョンアップが必要

## 設定


```bash
sudo yum install -y yum-plugin-kernel-livepatch
sudo yum kernel-livepatch enable -y
# rpm -qa | grep kernel-livepatch
sudo yum update kpatch-runtime
sudo systemctl enable kpatch.service
sudo amazon-linux-extras enable livepatch
```

## 適用可能なパッチのリスト(2020-05-25修正)

適用可能なパッチのリストです。

```
sh-4.2$ yum updateinfo list
Loaded plugins: extras_suggestions, kernel-livepatch, langpacks, priorities, update-motd
ALAS2-2020-1426         important/Sec. bind-export-libs-32:9.11.4-9.P2.amzn2.0.3.x86_64
ALAS2-2020-1426         important/Sec. bind-libs-32:9.11.4-9.P2.amzn2.0.3.x86_64
ALAS2-2020-1426         important/Sec. bind-libs-lite-32:9.11.4-9.P2.amzn2.0.3.x86_64
ALAS2-2020-1426         important/Sec. bind-license-32:9.11.4-9.P2.amzn2.0.3.noarch
ALAS2-2020-1426         important/Sec. bind-utils-32:9.11.4-9.P2.amzn2.0.3.x86_64
ALAS2-2020-1425         important/Sec. kernel-4.14.177-139.254.amzn2.x86_64
ALAS2LIVEPATCH-2020-009 important/Sec. kernel-livepatch-4.14.173-137.229-1.0-2.amzn2.x86_64
ALAS2-2020-1425         important/Sec. kernel-tools-4.14.177-139.254.amzn2.x86_64
ALAS2-2020-1418         important/Sec. libicu-50.2-4.amzn2.x86_64
updateinfo list done
```

パッチをあてると

```
sh-4.2$ sudo yum update --security
```

リストに出なくなりました。

```
sh-4.2$ yum updateinfo list
Loaded plugins: extras_suggestions, kernel-livepatch, langpacks, priorities, update-motd
updateinfo list done
```

## 制約

> 
- While applying a kernel live patch, you can't perform hibernation, use advanced debugging tools (such as SystemTap, kprobes, and eBPF-based tools), or access ftrace output files used by the Kernel Live Patching infrastructure.
- Kernel Live Patching is not supported by AWS Systems Manager Patch Manager.
- Amazon Linux 2 instances with 64-bit ARM (arm64) architecture are not supported.

hibernationやSystems Manager Patch Managerが利用できない等の制約があるそうです。
こちらは問題ないと思うのですが

>
AWS provides kernel live patches for an Amazon Linux 2 kernel version for up to 3 months after its release. After the 3-month period, you must update to a later kernel version to continue to receive kernel live patches.

実質3ヶ月に1回の「カーネルのバージョンアップが必要」=「(新しいバージョンにするには)再起動が発生」という縛りがあります。
live patchはカーネルのバージョンアップとは別扱いのようです。


## 雑感

- EC2管理には大変便利！
- でもFargate(ECS)のEFS対応がリリースされて、正直EC2自体これから使うのかなって気もします。
ネットがおっせえなあ・・・と思った時に爆速で現在の帯域を確認する方法

小ネタ。ネットが遅いけどいちいちスピードテストするのもダルい。

そういう時はYoutubeの統計情報を出しっぱなしにしておけば一瞬で現在の帯域を確認できる。

動画画面を右クリックして、「詳細統計情報」をクリック

![20200501-01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52237/ba58a6b5-4aad-0f5f-2805-47e3d62316e8.jpeg)

Connection Speedで現在の帯域を見ることができる。ちょっと長めの時間の遷移も見れる。長めの動画を流しっぱなしにしておいて、気になった時にパッと見るのがおすすめ。

![20200501-02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52237/ae18d230-d398-ce79-f03a-253e224351d0.jpeg)
競プロのライブラリ整理~素因数分解と素数判定~

素因数分解と素数判定を行うライブラリを作成しました。一つ目は試し割り法によるもので素因数分解を行うことができます。二つ目はエラトステネスの篩の初期化をおこなあった後に素因数分解を行うもので素数判定を行うことも可能です。

使用する際は、[こちらのテンプレート](https://qiita.com/DaikiSuyama/items/9dba963ba74396b9b7fd)と一緒に使ってください。

#[試し割り法による素因数分解](https://ja.wikipedia.org/wiki/%E8%A9%A6%E3%81%97%E5%89%B2%E3%82%8A%E6%B3%95)

任意の正の整数について素因数分解した結果を**$O(\sqrt{n})$でvectorまたはmapに挿入**します[^1]。

```PFvec.cc
class PFvec{
public:
    //PNs:=(素因数分解で出てくる素数を昇順に格納したvector)
    vector<ll> PNs;
    PFvec(ll n){PF(n);}
    void PF(ll n){
        if(n<=1) return;
        ll l=sqrt(n);
        FOR(i,2,l){
            if(n%i==0){
                PF(i);PF(n/i);return;
            }
        }
        PNs.PB(n);return;
    }
};
```

```PFmap.cc
class PFmap{
public:
    //PNs:=(素因数分解で出てくる素数を(昇順に)格納したmap)
    map<ll,ll> PNs;
    PFmap(ll n){PF(n);}
    void PF(ll n){
        if(n<=1) return;
        ll l=sqrt(n);
        FOR(i,2,l){
            if(n%i==0){
                PF(i);PF(n/i);return;
            }
        }
        PNs[n]++;return;
    }
};
```

#[エラトステネスの篩](https://ja.wikipedia.org/wiki/%E3%82%A8%E3%83%A9%E3%83%88%E3%82%B9%E3%83%86%E3%83%8D%E3%82%B9%E3%81%AE%E7%AF%A9)による素因数分解と素数判定[^2]

エラトステネスの篩を$O(n \log{\log{n}})$で初期化し、任意の正の整数について素因数分解した結果を**$O(\log{n})$でvectorまたはmapに挿入**します[^1]。

したがって、**クエリなどで幾度も素因数分解が要求される場合**はこちらのアルゴリズムで素因数分解をする必要があります。


また、下記で$PNch[i]=1$の際は$i$が素数であるとして**素数判定を行うこと**もできます。


```ES.cc
//PNch[i]:=(iを割り切る最大の素数)
//但し,iが素数の時はPNch[i]=1,i=0,1の時はPNch[i]=0
vector<ll> PNch;

//n:=素因数分解したい中で最大の値(2以上)
void ES(ll n){
    //素数として初期化
    PNch.assign(n+1,1);
    PNch[0]=0;PNch[1]=0;
    ll l=sqrt(n);
    FOR(i,2,l){
        //ある素数の倍数ならばその素数で割り切れる
        if(PNch[i]==1){
            FOR(j,i,n/i)PNch[j*i]=i;
        }
    }
}
```

```PFvec.cc
class PFvec{
public:
    //PNs:=(素因数分解出てくる素数を昇順に格納したvector)
    vector<ll> PNs;
    PFvec(ll n){PF(n);}
    void PF(ll n){
        if(n<=1) return;
        //nが素数の時
        if(PNch[n]==1){PNs.PB(n);return;}
        //マークされている数は素数
        PNs.PB(PNch[n]);
        //マークされている数でnを割った数
        PF(n/PNch[n]);
    }
};
```

```PFmap.cc
class PFmap{
public:
    //PNs:=(素因数分解出てくる素数を(昇順に)格納したmap)
    map<ll,ll> PNs;
    PFmap(ll n){PF(n);}
    void PF(ll n){
        if(n<=1) return;
        //nが素数の時
        if(PNch[n]==1){PNs[n]++;return;}
        //マークされている数は素数
        PNs[PNch[n]]++;
        //マークされている数でnを割った数
        PF(n/PNch[n]);
    }
};
```





[^1]: 但し、mapは挿入でlogがつきます。

[^2]: この素因数分解の方法が理解できない場合は[ABC152の解説動画](https://www.youtube.com/watch?v=UTVg7wzMWQc&t=3446)を見ると良いと思います。
読込失敗をFailPortに流す

#SD Readerの場合
・Runtimeタブ>Error Handling
・「On Data Type Error」と「On General Error」を「Send Data out the Fail Port」に変更
・Fail Portを追加するとエラーを出力可能
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335742/8ebb9f10-db6d-17aa-9c46-36f8f4cd5fe1.png)

※サンプルプロトコル：Capturing Corrupt Records in an SD File
今更メモリの種類について調べてみた件（１）

どうも初めまして！　

最近基本情報技術者の資格取得に向けて勉強中な駆け出しエンジニアのワカです。

#■この記事を書こうと思ったきっかけ
最近書籍を購入して勉強しているのですが、暗記ばかりでなかなか身にならないと思いました。

そこで基本情報に書かれている内容を自分なりに解釈したものをここに備忘録として書き残すことにしました。
そうすれば手も動かせるし人にみられると思うとその分責任感出ますしね！

あと個人的に今自作PCを作りたいとも考えているのでこの機会に詳しくなっとこうと思ったのも理由の一つです笑

もしかすると間違っている点などあるかもしれませんので、その時は指摘していただけると嬉しいです。

#■メモリ（主記憶装置）

メモリとはCPUからきた命令を一時記憶する装置のことです。
よくメモリの大きさは**自分の仕事するときの机のようなものだ**と言われることがあります。

##メモリの分類
メモリの種類は大きく分けて２種類RAMとROMがありますそれぞれの特徴が以下の通りです

| 名称 | 特徴 |
|:-:|:-:|
| RAM（Random Access Memory） | 読み書き可能（揮発性）  |
| ROM（Reed Only Memory）  | 読み出し専用（不揮発性）  |

###RAM
RAMはさらに細かく種類わけすることができます。それが**DEAM**と**SRAM**です



| | 使用する回路 | リフレッシュ動作（※１） | 速度 | 集積度 | 価格 |主な用途 |
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|DRAM   | コンデンサ  | 必要  |低速   | 高い  | 安価  |主記憶装置   |
|SRAM   | フリップフロップ回路 （※２） |必要   |高速   |低い   | 高価  | キャッシュメモリ  |

（※１）・・・リフレッシュ動作は記憶内容を保つために定期的な再書き込みを行うこと
（※２）・・・フリップフロップ回路はリフレッシュ動作を必要としない特徴を持つ回路

###ROM
ROMもさらに細かく種類わけすることができます。それが**マスクROM**と**PROM**です

|   |特徴  |
|:-:|:--|
|マスクROM|読み出し専用メモリ<br>製造時にデータを書き込んだ後、書き換えは不可）  | 
|PROM(Programable ROM)|ユーザー側でプログラム可能なROM<br>EPROM,EEPROM,フラッシュメモリがある   | 

#■最後に

ここまで長々と読んでくださりありがとうございました！
少し説明がわかりにくかった部分があるかと思いますが、もしわからないところがあればコメントしていただけると嬉しいです。

では！次の記事にて！
Heroku で Node.js アプリを動かすときにつまづいた内容

###デプロイ方法などをとりあえず知る。
解決策：公式ドキュメントを読む。サンプルコードを手元にダウンロードして、実際にやってみると良いです。Procfileとか事前に知れるので。
参考：[Getting Started on Heroku with Node.js](https://devcenter.heroku.com/articles/getting-started-with-nodejs)

###ClearDBの接続情報がわからない
解決策：`heroku config`で、特定のフォーマットで教えてくれます。
参考：[heroku CLIでMySQL(clearDB)の設定をする](https://qiita.com/nobuhiroharada/items/3775e010517b8385f0f5)

###`heroku config`でエラーが出たとき
原因：コマンド実行するときのディレクトリが間違っていただけでした。
参考：[[Herokuエラー]Error: Missing required flagが出た](https://qiita.com/hirokik-0076/items/71c104158fa8b963ba85)

###デプロイ後にApllication Errorが出力されるとき
原因：ポート番号を3000とかで固定していたのが原因でした。
参考：[HerokuでNode.jsアプリを実行する際のポート番号について](https://chusotsu-program.com/heroku-node-port/)

### ClearDBのMySQLだとAuto_Incrementが10ずつ増える
原因：仕様でした。とりあえず練習用に作ったアプリだったので放置。
参考１：[herokuでmysql(ClearDB)を使うとidが10ずつ増える](https://qiita.com/nsatohiro/items/0458e63c47c3d6ff37d0)
参考２：[MySQLのauto_incrementについてメモ](https://siguniang.wordpress.com/2014/02/21/notes-on-mysql-auto_increment/)

### ClearDBから引っぱってきた内容が文字化けしてる現象
原因：文字コードを設定してあげよう。
参考：[Heroku＋ClearDBで文字化けしていた件](https://omiend.hatenablog.jp/entry/2015/02/17/211134)
VPSのUbuntu環境へssh接続するためにやったこと

Linux初心者のため、備忘の記録として…

## やったこと
**KAGOYA-Cloud**で**Ubuntu**の**VPS**をたてて`ssh`で接続。

## ログイン用認証キーの保存
VPSたてるときに作成したログイン用認証キーは、作成時に勝手にダウンロードされる。
mac OS だと`/Users/***/Downloads/`に。

## ssh接続しようとしてWARNING発生

```shell-session
ssh root@サーバIP -i VPSログイン用認証キー
```
>@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@         WARNING: UNPROTECTED PRIVATE KEY FILE!          @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Permissions 0644 for 'VPSログイン用認証キー' are too open.
It is required that your private key files are NOT accessible by others.
This private key will be ignored.
Load key "VPSログイン用認証キー": bad permissions

## ログイン用認証キーファイルの権限変更
[こちら](https://qiita.com/leomaro7/items/662699dcb7a7adc36f40)を参考に以下を実行。
```shell-session
chmod 600 VPSログイン用認証キー 
```

## ssh接続
無事接続できました。

```shell-session
Welcome to Ubuntu 16.04.1 LTS (GNU/Linux 4.4.0-34-generic x86_64)

 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage

20 packages can be updated.
0 updates are security updates.


root@vサーバIP:~#
```

間違い等あればご指摘いただけると助かります。

## 参考にした記事
[エラー: Unprotected Private Key File (保護されていないプライベートキーファイル)](https://qiita.com/leomaro7/items/662699dcb7a7adc36f40)
「【若手向け】成長を加速させる「一人のふりかえり」を学ぼう」で学んだことと実践していること

## はじめに

この記事では、2020/4/16 に開催されました「[【若手向け】成長を加速させる「一人のふりかえり」を学ぼう](https://retrospective.connpass.com/event/173280/?utm_campaign=event_participate_to_follower&utm_source=notifications&utm_medium=twitter)」という勉強会に参加してみて学んだことと、一人のふりかえりを2週間ほど実践してみた結果について記載します。

勉強会の資料は以下から参照することができます。

https://qiita.com/viva_tweet_x/items/920448b667bfed56889a

Twitter ハッシュタグ :  [#ふりかえり実践会](https://twitter.com/hashtag/ふりかえり実践会?src=hashtag_click) 



## 勉強会を通じて学んだこと

### ふりかえりとは

自分の言葉でふりかえりを一言で表すと、「人の成長を加速させるもの」というものになります。

無意識にも人はふりかえりを行っており、日々成長していっています。無意識に行っているふりかえりを意識的に行うことで、更に成長を加速させることができるということばがとても印象に残っています。

### 経験学習サイクル

経験学習サイクルについては[こちら](https://bizhint.jp/keyword/13299)のサイトなどで解説されています。

何かを経験する → 経験したことを思い出して考える → それを抽象化して自分の言葉にする → 自分の言葉に落とし込めたものを行動に移し、更に経験を得る

というサイクルだと解釈しています。ふりかえりを行うことで経験学習サイクルをより高速に回すことができます。

### メモは自分の言葉で取る

普段メモを取る際、スライドの文言や発言をそのままメモする傾向にありました。

しかし今回の勉強会では「自分の言葉でメモを取りましょう」という指示があり、普段無意識に行っているメモのとり方を考えさせられる印象的な出来事でした。

### 忘却曲線

忘却曲線については[こちらのサイト](https://ja.wikipedia.org/wiki/%E5%BF%98%E5%8D%B4%E6%9B%B2%E7%B7%9A)に解説が記載されています。

ここで印象的だったのは、**記憶は「覚えてなければいけない」というものではなく「思いだせるようにする」**というものであるということです。「思い出す」ためには、呪文のように単なる記憶として覚えるのではなく、自らの意味や価値を見出してそれをアウトプットすることが必要ということを意識するようになりました。

### 振り返りに大切な7つの考え方

[公開されているスライドの37スライド目](https://speakerdeck.com/viva_tweet_x/cheng-chang-wojia-su-saseruhurikaerishi-jian-wakusiyotupu?slide=37)に詳細は記載されています。

特に意識しようと感じたのは以下の2点です

#### 立ち止まる

よく自分も[スライドで紹介されている木こりの例](https://speakerdeck.com/viva_tweet_x/cheng-chang-wojia-su-saseruhurikaerishi-jian-wakusiyotupu?slide=39)のような状態に陥りがちだと思っています。特に難しい問題に取り組んでいるときは、定期的に立ち止まって現状を把握することを意識したいと思います。

#### 多角的に捉える

ある事象に対して、**自分はどのような捉え方をする人間なのかということを認知する**ことで、それ以外の考え方を意識できるようになるというものです。自分の癖もそうですが、様々な人の反応を観察することも重要だと感じました。

### 自己防衛本能

**人間は、自分や他人の悪いところを優先して意識してしまうようになっている**らしいです。これを自己防衛本能と言います。よって人の良い部分というのは意識的に目を向ける必要があります。「人間には自己防衛本能がある」ということを知っておくだけでも、普段から人の良い部分を見るような意識付けができるのではと感じました。

仕事でもプライベートでも、最初は好印象だったが段々と時間が経つにつれてお互いの悪いところが目立つようになり、関係が悪化してしまうということを皆さんも一度は経験されているのでは無いでしょうか。これも自己防衛本能によるものなのかなと感じました。



## 実践していること

[資料の69スライド目](https://speakerdeck.com/viva_tweet_x/cheng-chang-wojia-su-saseruhurikaerishi-jian-wakusiyotupu?slide=69)にあるように、ふりかえりは定期的に行うと効果的です。忘却曲線、経験学習サイクルということからも裏付けられると思います。

自分の場合は以下のように Trello を使ってふりかえりを実践しています。

![スクリーンショット 2020-05-01 6.52.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200306/0192dcea-ba58-54fa-734f-2e5e93f63515.png)


ふりかえり手法は YWT (やったこと / わかったこと/ つぎにやること) を実践しています。

ふりかえり時期については以下のルールとしています。

- 「日」のボードは毎日記載
- 「週」のボードは **土曜日** に記載
- 「月」のボードは**月の最終日**に記載
- 「四半期」のボードは **3月末, 6月末, 9月末, 12月末** に記載
- 「年」のボードは年末休みに記載

「日」ではその日での YWT を、「週」ではその週を総括しての YWT を実施するようにしています。



## 所感

このようなふりかえりの方法は自然に身についている方もいらっしゃると思いますが、自分の場合はこのように言語化していただくことで普段の行動を変えていけるようになりました。良いと思っていた取り組みを記録とふりかえりをすることで、三日坊主になってしまうということを防げているのかなという実感があります。

一番の難関はこのふりかえりの取り組み自体が三日坊主になってしまう可能性があるということです。何事も習慣づけは大変ですね。
Atcoder ABC164 A-CをPythonで

D問題を完全に理解してから書こうと思ってましたが、時間かかりそうなのでわかり次第追記します。

#A. Sheep and Wolves
2つの値を比べる。

```ABC164a.py
s,w=map(int,input().split())
 
if w>=s:
    print("unsafe")
else:
    print("safe")
```

#B. Battle
Modとか取るのかなとも思いましたが、先攻後攻等を考えるのが手間なので素直に実装

```ABC164b.py
a,b,c,d=map(int,input().split())

while True:
    c-=b
    if c<=0:
        print("Yes")
        exit()
    a-=d
    if a<=0:
        print("No")
        exit()
```

#C. Gacha
配列中のユニークな個数を数えるだけ。

```ABC164c.py
n=int(input())
s=[input() for _ in range(n)]

print(len(set(s)))
```

と、ここまで10分で終えて今回いけるかなーと思いましたがD問題で悩んだ挙句3完止まりでした。

D. Multiple of 2019
愚直に実装すると$O(N^2)$なので確実にTLEです。ぐぬぬ

```ABC164d_TLE.py
s=input()

ans=0

for l in range(len(s)-3):
    for r in range(l+4,len(s)+1):
        a=s[l:r]
        if int(a)%2019==0:
            ans+=1
            
print(ans)
```
初心者によるプログラミング学習ログ 304日目

#100日チャレンジの304日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
304日目は、
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>304日目　2h<br>・ポートフォリオ改造<a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1255951188656222209?ref_src=twsrc%5Etfw">April 30, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
golang cobra実装方法

golang、cobraの実装について検索すると自動生成でなんとかなってしまうし
自動生成に関する記事もそれぞれ若干方法が違うからそもそもの書き方をメモ。

```main.go
func main() {
	if err := cmd.NewCommand().Execute(); err != nil {
		fmt.Println(err)
	}
}
```

```cmd/cmd.go
func NewCommand() *cobra.Command {

	cmd := &cobra.Command{
		Use:   "コマンド名",
		Short: "説明",
		RunE: func(c *cobra.Command, args []string) error {
			//実装
			return nil
		},
	}
//サブコマンドを追加したらここに追加
	cmd.AddCommand(SubCmd())
	return cmd
}

```

```cmd/subcmd.go

type Option struct {
   sampleOption string
}

func SubCmd() *cobra.Command {
    o := &Option{}
	subCmd := &cobra.Command{
		Use:   "サブコマンド名",
		Short: "説明",
		RunE: func(cmd *cobra.Command, args []string) error {
			//実装
				return nil
			}
		},
	}
        
       //opiton
	SubCmd.Flags().StringVar(&o.sampleOption, "p", "sample", "sample")
	
	return SubCmd
}
```

自動生成だと各コマンドが変数になってしまうので、
関数になるこっちのが良いと思います。
上記コピペでコマンド量産可能。
iPhoneアプリ開発が正常に実装できない

swiftによる地図検索アプリケーションを開発中で問題が生じました

下記リンクを参考にしながら、至ってシンプルな地図表示アプリを開発しているのですが、
https://developers.google.com/maps/documentation/ios-sdk/start?hl=ja


```swift
import UIKit
import GoogleMaps

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        // Do any additional setup after loading the view.
        // Create a GMSCameraPosition that tells the map to display the
        // coordinate -33.86,151.20 at zoom level 6.

        let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 6.0)
        let mapView = GMSMapView.map(withFrame: self.view.frame, camera: camera)
        self.view.addSubview(mapView)

        // Creates a marker in the center of the map.
        let marker = GMSMarker()
        marker.position = CLLocationCoordinate2D(latitude: -33.86, longitude: 151.20)
        marker.title = "Sydney"
        marker.snippet = "Australia"
        marker.map = mapView
    }
}

```

添付した画像のように背景の地図が正しく反映されません
<img width="424" alt="スクリーンショット 2020-05-01 00.31.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629747/153cd624-7531-cc67-4faf-a02b8710fbb5.png">

APIキーなどは正しく呼び出せているとは思うのですが、何が問題なのか皆目見当がつかず、エラ〜メッセージも生じていないため、困っております
因みに、
```
2020-05-01 00:31:12.141190+0900 MapSearchingTest[20614:252324] Metal GPU Frame Capture Enabled
2020-05-01 00:31:12.141432+0900 MapSearchingTest[20614:252324] Metal API Validation Enabled
2020-05-01 00:31:12.355887+0900 MapSearchingTest[20614:252324] libMobileGestalt MobileGestalt.c:1647: Could not retrieve region info
2020-05-01 00:31:12.631569+0900 MapSearchingTest[20614:252324] Google Maps SDK for iOS and Google Places SDK for iOS version: 3.8.0.0
```

どなたかお力添え願いたいです
どうかよろしくお願いします
Vuex入門の初歩の初歩

Vue.jsの勉強をしていて、Vuexも覚えたいので学習したことをまとめています。

#Vuexとは
　Vue のために開発された状態管理ライブラリ。

　ライブラリインストール

```console
$ npm install --save-dev vuex
```

#状態管理とは
　状態とは、アプリケーションが保持するデータのこと。
　Vuexを使うことでそれらのデータを一元管理することができ、全ての
コンポーネントからそれらのデータ(状態)を参照することができる。

　※ルートインスタンスにstoreオプションを渡すことで、全てのコンポーネント
から`$this.store`で参照できるようになる。

#ストア
　アプリケーションの状態(アプリケーションが保持するデータ)を保持する場所。
　Laravelでは、resources/js/store/配下に作成する。
　ストアはデータの種類に応じてモジュールとして分けて作成できる。

　※ストアをエクスポートする際、`namespaced: true`で名前空間を有効にすることで、モジュールごとの状態を呼び出せる。

##Vuexストアはリアクティブ
　Vueコンポーネントがストアから状態を取り出す時、`ストアの状態が変化したら`、
ストアはリアクティブに更新を行う。つまり`瞬時に値が更新される`。

##ストアの状態を変更するには
　**ストアの状態を直接変更することはできない。**
　明示的にミューテーションをコミットする事によってのみ、ストアの状態を
変更できる。


###state　ステート
　　データの入れものそのもの。ログイン中のユーザーデータなど。
###getters　ゲッター
　　ステートの内容から算出される値。例えば、ステートのデータからユーザーがログイン中であるかどうかを表現できる。
###mutations　ミューテーション
　　`ステートを更新する(状態を変更する)ためのメソッド`。コンポーネントはステートを直接変更できないため、`ミューテーションを介してステートを更新する`。
　　状態変更と非同期処理を組み合わせると、プログラムの動きを予想することが困難になるため、`ミューテーションは同期処理`でなくてはならない。
###actions　アクション
　　ミューテーションをコミットするメソッド。
　　`非同期処理を含むことができる`。

　SPA(Single Page Application)でのAjax(通信)は非同期処理なので、状態を変更する
には`アクションからミューテーションを呼び出(コミット)してステートを更新する`という流れ
になる。


##mapState関数
Vuexの関数で、複数computedの指定を簡単にできる。
VueインスタンスのcomputedオプションにmapState()を使うと、
stateのなかに`this.$store.state`が代入されるため、`state.ステート名`と書くと、`this.$store.state.ステート名`と同意になる。


```vue
<script>
    // mapState関数のインポート
    import {mapState} from "vuex";
// 省略
    // この書き方ではmapState()以外の算出プロパティは書けない
    computed: mapState({
        /*ステートのマッピング名1*/: state => state./*ステート名1*/,
        /*ステートのマッピング名2*/: state => state./*ステート名2*/,
        /*ステートのマッピング名3*/: state => state./*ステート名3*/
    }),

    // mapState()はオブジェクトを返すので、computed内に他の算出プロパティも書く場合など、
    // スプレッド構文で、それぞれのオブジェクトを展開することで記述できる
    computed: {
        ...mapState({
            /*ステートのマッピング名1*/: state => state./*ステート名1*/,
            /*ステートのマッピング名2*/: state => state./*ステート名2*/,
            /*ステートのマッピング名3*/: state => state./*ステート名3*/
        }),
        // 他の算出プロパティも書ける
    },
// 省略
</script>
```
Ubuntu 18.04でrbenvを使ったrubyのインストールに失敗した場合 (openssl 関係)

# Ubuntu 18.04でrbenvを使ったrubyのインストールに失敗した場合 (openssl 関係)
## コマンドとエラー内容
```
okazaki@MyComputer:~$ rbenv install 2.7.0
Downloading ruby-2.7.0.tar.bz2...
-> https://cache.ruby-lang.org/pub/ruby/2.7/ruby-2.7.0.tar.bz2
Installing ruby-2.7.0...
～～～～～ 省略 ～～～～～
installing library scripts:         /home/okazaki/.rbenv/versions/2.7.0/lib/ruby/2.7.0
installing common headers:          /home/okazaki/.rbenv/versions/2.7.0/include/ruby-2.7.0
installing manpages:                /home/okazaki/.rbenv/versions/2.7.0/share/man (man1, man5)
installing default gems from lib:   /home/okazaki/.rbenv/versions/2.7.0/lib/ruby/gems/2.7.0 (build_i
nfo, cache, doc, extensions, gems, specifications)
                                    benchmark 0.1.0
/tmp/ruby-build.20200501010852.12823.FT2oz0/ruby-2.7.0/lib/rubygems/core_ext/kernel_require.rb:92:in
 `require': cannot load such file -- openssl (LoadError)
        from /tmp/ruby-build.20200501010852.12823.FT2oz0/ruby-2.7.0/lib/rubygems/core_ext/kernel_req
uire.rb:92:in `require'
        from /tmp/ruby-build.20200501010852.12823.FT2oz0/ruby-2.7.0/lib/rubygems/specification.rb:24
26:in `to_ruby'
        from ./tool/rbinstall.rb:841:in `block (2 levels) in install_default_gem'
        from ./tool/rbinstall.rb:278:in `open_for_install'
        from ./tool/rbinstall.rb:840:in `block in install_default_gem'
        from ./tool/rbinstall.rb:830:in `each'
        from ./tool/rbinstall.rb:830:in `install_default_gem'
        from ./tool/rbinstall.rb:794:in `block in <main>'
        from ./tool/rbinstall.rb:945:in `block in <main>'
        from ./tool/rbinstall.rb:942:in `each'
        from ./tool/rbinstall.rb:942:in `<main>'
uncommon.mk:373: recipe for target 'do-install-all' failed
make: *** [do-install-all] Error 1
```

## 環境
- WSL (Windows Subsystem for Linux)
- Ubuntu 18.04 LTS
- rbenv 1.1.2-30-gc879cb0

rbenvは下記を見てインストール
★ ubuntu + rbenvでrubyをインストール
[https://qiita.com/go_d_eye_0505/items/44d12ef0d52b2dc9d560](https://qiita.com/go_d_eye_0505/items/44d12ef0d52b2dc9d560)

## 確認した項目
このエラー内容を元に解決策を確認。

```
/tmp/ruby-build.20200501010852.12823.FT2oz0/ruby-2.7.0/lib/rubygems/core_ext/kernel_require.rb:92:in
 `require': cannot load such file -- openssl (LoadError)
```

1: `apt install ruby` → `gem install openssl`
requireに失敗しているのでgemでインストールする必要があるような気がしたけれど、たぶんいらない。
ログは無いけれど、同じくopensslの関係でエラーが起きてインストールは失敗した。

2: opensslのバージョン

```
okazaki@MyComputer:~$ openssl version
OpenSSL 1.1.1  11 Sep 2018
```

## 試した内容と解決方法
1: opensslの更新
`sudo apt update && sudo apt upgrade openssl`
2: 開発に必要なパッケージのインストール
`sudo apt install libssl-dev zlib1g-dev`

2 のインストール作業で解決しました。
根本的な原因は不明ですが、**libssl-dev**をインストールすることで openssl に関係する解決したと思います。

```
okazaki@MyComputer:~$ rbenv install 2.7.0
Downloading ruby-2.7.0.tar.bz2...
-> https://cache.ruby-lang.org/pub/ruby/2.7/ruby-2.7.0.tar.bz2
Installing ruby-2.7.0...
Installed ruby-2.7.0 to /home/okazaki/.rbenv/versions/2.7.0
```
Vue Router入門の初歩の初歩

　Vue.jsの勉強をしているので、Vue Routerについてもこれから覚えていこうと思っています。
　まだあまり理解できていなく情報量はとても少ないですが、これから学習していきます。

#Vue Routerとは
　Vue.jsを使ったSPA(Single Page Application)において、ルーティング制御をするための公式プラグイン

　インストール

```console
 $ npm install vue-router
```

　Laravelのルーティングの設定(web.php)は、どんなURLでもベースとなるindexテンプレートを返すという設定にして、初期リクエストのみHTMLをレスポンスする。
　HTMLにはコンポーネント要素を配置し、配置されたコンポーネントの中にネストしたそれぞれのコンポーネントのルーティングをrouter.jsに設定することで、
　コンポーネントを入れ替えたり、切り替えてSPAを実現する。

```php:web.php
<?php

  Route::get('/{any?}', fn() => view('index'));
```
```php:index.blade.php
<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>index</title>
</head>
<body>
{{-- ここにルートコンポーネントが描画される --}}
<div id="app"></div>
</body>
</html>
```


##＜RouterView＞
　VueRouterによって提供されるコンポーネント。
　URLによって対応するHTML部品（コンポーネント）が入れ替わって描画される。

##＜RouterLink＞
　VueRouterによって提供されるコンポーネント。
　HTMLの＜a＞要素が描画されるが、クリックされるとサーバーサイドへの
GETリクエストが発生せず、VueRouterによるコンポーネントの切り替わりが
発生する。

##名前付きルート

```JavaScript:router.js
const routes = [
  {
    // URL
    path: '/',
    // ルート名を設定
    name: 'top',
    // コンポーネント名
    component: TopPageComponent
  }
]
```
```vue:Navbar.vue
<!-- :to={name: 'ルート名'}で名前付きルートを指定できる -->
<RouterLink :to="{name: 'top'}">
    <p>トップページへ遷移</p>
</RouterLink>
```
リストや辞書やタプルを外部ファイルに保存　python

#リストや辞書やタプルを外部ファイルに保存　python

Memo

こちらの記事等を参考にした。

https://neuryo.hatenablog.com/entry/2019/02/06/111611

https://www.sejuku.net/blog/31480

https://qiita.com/NoriakiOshita/items/6c2c11cab4411bd7f60c

リストもディクショナリも同様に扱えるみたいで便利。
ナイキスト周波数を超えたらどうなるかアニメーションで見る

# はじめに
　サンプリング定理(標本化定理)というものがあります。1波長に2回サンプリングすれば、元の信号を完全に復元できるというものです。このサンプリングする間隔をサンプリングレートと呼び、その周波数の半分の値をナイキスト周波数と呼びます。計測対象の信号がナイキスト周波数を超えるとエイリアシングが起こります。
　このようなことを知識として知っていても、ナイキスト周波数を超えるとどのように見えるのかアニメーションで見たことがないなと思ったので作りました。

2020/06/06 追記
実空間のアニメーションも追加しました。

# 参考
サンプリング定理を思い返すのに読みました。
[小野測器:FFTアナライザについて(page4)](https://www.onosokki.co.jp/HP-WK/c_support/newreport/analyzer/FFT2/fft_4.htm)

# プログラム
周波数空間

```python
import numpy as np
import matplotlib.pyplot as plt

N = 512 #FFTのサンプル点数
fs = 2000.0 #サンプリングレート
t = np.linspace(0.0,N/fs,N)
fft_freq = np.linspace(0.0,fs,N) #FFTの周波数軸
f_array = np.linspace(10.0,4000.0,200)

for i,f in enumerate(f_array):
    sig = np.sin(2.0*np.pi*f*t) * np.hamming(N)
    fft_amp = np.abs(np.fft.fft(sig)) / N * 2.0 / 0.54
    
    fig,axes = plt.subplots()
    axes.plot(fft_freq,fft_amp,label="{} Hz".format(np.round(f)))
    axes.set_xlabel("Frequency Hz")
    axes.set_ylabel("Amplitude")
    axes.set_ylim(0.0,1.1)
    axes.legend(loc="upper right")
    fig.savefig("{}.png".format(i))
    plt.close()
```

実空間

```python
def aliasing_freq(f,fs):
    """
    折り返された周波数
    """
    sign = (-1) ** int(f/(fs/2.0)) #周波数の符号
    if int(f/(fs/2.0))%2 == 0:
        return sign * (f - fs/2.0 * int(f/(fs/2.0+1.0e-6)))
    else:
        return sign * (fs/2.0-(f - fs/2.0 * int(f/(fs/2.0+1.0e-6))))

for i,f in enumerate(f_array):
    sig = np.sin(2.0*np.pi*f*t)
    sig_true = np.sin(2.0*np.pi*f*t_true)
    
    fig,axes = plt.subplots()
    axes.plot(t_true,sig_true,label="{} Hz".format(np.round(f)),alpha=0.5)
    axes.scatter(t,sig)
    axes.plot(t_true,np.sin(2.0*np.pi*aliasing_freq(f,fs)*t_true))
    axes.set_xlim(0.0,0.0+1.0/f*10)
    axes.set_ylim(-1.2,1.2)
    axes.set_xlabel("Time s")
    axes.set_ylabel("Amplitude")
    axes.legend(loc="upper right")
    fig.savefig("graph/{}.png".format(i))
    plt.close()
```

連番写真はGIMPでアニメーションに変換しました。

# 結果
周波数空間ではナイキスト周波数を境目に鏡のように動きます。
![ナイキスト周波数_エイリアシング.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455608/f14be282-740f-1347-0690-4b9921103b2c.gif)

実空間でも同様です。
![a.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455608/b2bb345f-414f-43a3-8967-da7b9ba3d309.gif)

こうしてみるとなぜナイキスト周波数を超えてはいけないかがよくわかります。今回は周波数がわかりますが、結果だけ見れば折り返されたものなのか、正しく測れたものなのか見分けが付きません。

# まとめ
ナイキスト周波数を超えてはいけないと覚えてはいても、超えたらどうなるのかを見る機会は少ないと思います。誰かの役に立てば幸いです。