OmniAICreator/Qiita-1.07M huggingface dataset:
【Python】pandasで２つのテーブルをjoinする

#何をしたいか
以下のテーブル2つをIDを基にして1つにしたい。
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288555/3381624d-c627-65c6-2039-d483b02c4a52.png)

#どうやるか
```python
pd.merge(Table_A,Table_B,how="XXXX",on="ID")
```
how="XXXX"で結合方法を選択することができます。


##how="inner" (inner join)
2つのテーブルに共通するIDを抜き出し、結合します。
![図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288555/499b5186-498b-625f-d099-cb0d921b177a.png)

```python
pd.merge(Table_A,Table_B,how="inner",on="ID")
```
結果
![図3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288555/dc290ba5-bd95-d5bd-d4d8-e3265292d5a0.png)

##how="outer" (outer join)
2つのテーブルのすべてのIDを抜き出し、結合します。

![図4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288555/7b4ff8f5-6cee-b7c9-a0e6-e596774a075c.png)


```python
pd.merge(Table_A,Table_B,how="outer",on="ID")
```

結果
![図5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288555/99f2dac5-c93c-ba01-d87d-cdfabe64b9d2.png)

データが存在しないところはNaNとなっています。

##how="left" (left join)
左側のテーブルのIDのみ結合します。
![図6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288555/a443146a-21dc-dcb2-dc93-c792711694b0.png)

```python
pd.merge(Table_A,Table_B,how="left",on="ID")
```
結果
![図7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288555/a208fa1f-c04d-367a-67c0-d02318b82cf0.png)

##how="right" (right join)
右側のテーブルのIDのみ結合します。
![図8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288555/a4d7e968-dcb2-99ed-92ca-59aec6a25201.png)

```python
pd.merge(Table_A,Table_B,how="right",on="ID")
```

![図9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288555/53918d39-d23d-d6f2-7e7b-6df15b9aa350.png)


#おわり
ベン図で書いてる記事が少なかったので、なるべく全面に押し出しました。
手元のMac端末からRDSに接続する方法

#【AWS】手元の端末からRDSに接続する方法

## 目次
 * [構築イメージ](#構築イメージ)
 * [手順](#手順)
   * [STEP1. RDSの作成](#step1-rdsの作成)
   * [STEP2. セキュリティグループの確認](#step2-セキュリティグループの確認)
   * [STEP3. Mysqlクライアントのインストール](#step3-mysqlクライアントのインストール)
   * [STEP4. RDSに接続](#step4-rdsに接続)
   * [STEP5. 参考サイト](#step5-参考サイト)
   
---------------------------------------


## 構築イメージ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526570/83a795b3-0535-502c-ae75-ee2f781e2cb4.png)

### 動作環境・前提条件

【動作環境】
`OS : macOS 10.14.6`
`RDS : MySQL 5.7`

【前提条件】
`1. VPC作成済`
`2. それぞれ別のAvailability Zoneでサブネットを２つ作成済`
`3. VPCにインターネットゲートウェイをアタッチ済`
`4. VPCにDNS解決とDNSホスト名を設定済`
`5. サブネットにルートテーブルを設定し、0.0.0.0/0宛をインターネットゲートウェイにする`



## STEP1. RDSの作成

マネジメントコンソールから通常通りRDSを作成します.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526570/4d43c7e5-acfb-fb97-0658-29ffb895f5a9.png)

### パブリックアクセスの許可

ここで接続タブのなかでパブリックアクセス許可します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526570/eb8f74df-dca2-106f-9bc8-8857283aa294.png)
### セキュリティグループ
新規にセキュリティグループを作成します.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526570/538f126e-839a-6f9b-d929-a65b6d983358.png)

### パスワード
パスワードとIDは覚えておくようにします.
ここまで終えたらデータベースの作成をクリックします.


## STEP2. セキュリティグループの確認

RDS作成後に、アタッチされているセキュリティグループを確認し、
自分のインターネット環境のグローバルアドレスがインバウンドルールに入っていることを確認します.

もしなければインバウンドルールに以下のサイトで確認したIPアドレスをソースのところに設定します.
`myipサイト`(https://www.expressvpn.com/jp/what-is-my-ip)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526570/08844913-f1a2-9030-87f8-49b4976aed0e.png)

## STEP3. Mysqlクライアントのインストール

自身のMacにMysqlクライアントをインストールします.

```bash:ターミナル
$ brew update
$ brew install mysql
```

## STEP4. RDSに接続

RDSのエンドポイントを確認します.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526570/b4a8dd0c-3960-cbfe-a8cf-6c1ee252654e.png)

そして, Macのターミナルでコマンドを実行します.
`mymasteruser`と`mysql–ins~.com`のところは自身のものに変更します.

```bash:macターミナル
$ mysql -h mysql–instance1.123456789012.us-east-1.rds.amazonaws.com -P 3306 -u mymasteruser -p
```

```bash:結果
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 12
Server version: 5.7.22-log Source distribution

Copyright (c) 2000, 2020, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> 

```

## STEP5. 参考サイト

https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/UserGuide/USER_ConnectToInstance.html

https://aws.amazon.com/jp/premiumsupport/knowledge-center/rds-connectivity-instance-subnet-vpc/
新しいApple Silicon搭載MacでのiOSアプリについて

※本記事は、 WWDC2020で一般公開されている情報 を元に作成しています。記事中の画像はWWDCのスライドのものを引用させて頂いております

あまり自分も詳しく把握できていないのですが、あまり記事が見当たらないなかったのでまとめておきます。
音声を翻訳した文章を読んでいるので、違うとかあれば、お気軽にコメント頂ければ幸いです。

WWDC2020の基調講演で新しく登場するApple Silicon搭載MacでiOSアプリが動かせることが紹介されています。(日本語字幕あります)

1:42:18〜
https://developer.apple.com/videos/play/wwdc2020/101/

<img width="820" alt="スクリーンショット 2020-07-17 21.07.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308423/8c42d82a-72cc-b4c5-662c-6c49bc5b103d.png">


新しいApple Silicon搭載MacでのiOSアプリの動作確認や開発については下記動画で紹介されています。(日本語字幕無いのでGoogle翻訳しながら聞きました)
https://developer.apple.com/videos/play/wwdc2020/10114/

自分が気になった要点をまとめると以下のような形っぽいです。

* Xcodeでデバッグ・動作確認するには新しいApple Silicon搭載Mac上でXcodeで「My Mac (Designed for iPad)」指定して行う必要があるよう。現在、[Universal App Quick Start Program](https://developer.apple.com/programs/universal/) に申込んで、DTK(新しいApple Silicon搭載Mac)を購入できるようになっている。
* 新しいApple Silicon搭載MacでiOSアプリを動かす場合は、今までとは想定外の画面サイズとなる可能性を考慮する必要がある
* 何もしないと、新しいApple Silicon搭載MacのAppStoreに既存のiOSは配布される。配布したくない場合は明示的に配布しないようにApp Store Connect上で設定にする必要がある。
rails6で ActiveRecord::NoDatabaseError を解決する

ハードはMacBook Air, 開発環境はVScodeを用いています。

[前回の記事(rails new でデータベースをPostgreSQLにする)](https://qiita.com/satomomo0222/items/e77e200ec6e526076764)に付随するエラーの解決方法です。

---

:small_red_triangle_down:前回の内容

```:PostgreSQLをデータベースに指定
$ rails _5.1.6_ new アプリ名 --database=postgresql
```

これをrails6で実行し、

```
$ rails server
```
でサーバーを立ち上げ、[localhost:3000](http://localhost:3000/)にアクセスすると、
**ActiveRecord::NoDatabaseError** というエラーが発生します。

これは、**データベースが存在していないことが原因で起こるエラーです。**

#解決方法　データベースを作る

##自動でやる方法

まず、rails new で生成したディレクトリに移動してください。

```
$ cd 作成したディレクトリ
```
次に

```
$ rails db:create
```

を実行してデータベースを生成します。
config/database.yml の内容に沿ってデータベースが自動で生成されます。


>###手動でやる方法

>まず、rails new で生成したディレクトリに移動してください。

>```
$ cd 作成したディレクトリ
```

>次に、config/database.yml を書き換えます。

>```:config/database.yml変更前
~省略~

>development:
  <<: *default
  database: アプリ名_development

>~省略~
```
>```:config/database.yml変更後
~省略~

>development:
  <<: *default
  database: アプリ名_db
  host: localhost
  encoding: utf8
  reconnect: false
  username: 自分のユーザー名

>~省略~
```

>※ database:はデータベース名なのでわかりやすくdevelopmentをdbに変更
その他(hots,encoding,recconect,username)に関しても、一応追記しなくても解決できるが、追記することを推奨。


>**次に、SQLを立ち上げます。**

>```
$ psql -h localhost -p 5432 -U 自分のユーザー名 -d postgres

>psql (12.3)
Type "help" for help.

>postgres=# 
```
この辺のコマンドについては
https://www.postgresql.jp/document/9.3/html/app-psql.html
に詳しく載っています。

>($ psql -h localhost -d postgres  ←これだけでも一応解決できました。)


>このコマンドを実行すると、SQL文を入力できるようになります。
ここにデータベースを作成するSQL文を書いていきます。

>```:入力前
postgres=# 
```
```:入力後
postgres=# create database アプリ名_db;
```
ここで、**アプリ名\_dbは、最初に config/database.yml で指定した database:アプリ名\_dbを入力しています。**

>```:実行後
postgres=# create database アプリ名_db;
CREATE DATABASE
postgres=# \q
```
最後に \q を入力すると、抜けることができます。

これでもう一度 $ rails server でサーバーを立ち上げて、localhost:3000 にアクセスしてみてください。エラーは解消されているはずです。

#無事に解決しました！
役に立ったら是非**LGTMボタンをポチッと押していただけると嬉しいです。**
一緒に Rails学習 頑張りましょう！:raised_hand_tone1:
zshで ヒストリに登録したくない(無視したい)コマンドラインを指定する

## はじめに

zshに限ったことじゃないですが、 コマンドライン操作においてよく使うのがヒストリ機能です

入力したことのあるコマンドラインの参照、展開、抽出なんかができるわけですが
たまにヒストリを検索したり、掘っていく時に、このコマンド邪魔だなーってなりませんか
`pwd`,`cd`,`vim` なんかがそうです

また、 `HIST_VERIFY` オプションを設定していない場合に、誤って危なげなコマンド(`mv`,`rm`)を展開して実行しちゃう
なんてこともあるかと

実はzshでは、ヒストリに積みたくないコマンドを指定できます！
というマニアックな記事

## こう書くのじゃ :older_man:
肝心の設定ですが、 変数 `HISTORY_IGNORE `に無視したいコマンドを指定してあげるだけです

```zsh:.zshrc
HISTORY_IGNORE="pwd"
```

上記の例では `pwd` がヒストリファイルに書き込まれなくなります
`HISTORY_IGNORE` には パターンを指定できます

なので複数のコマンドを指定する場合は、次のように指定します

```zsh:.zshrc
HISTORY_IGNORE="(cd|pwd|l[sal])"
```

上記の例では `cd`,`pwd`,`ls`,`la`,`ll` が無視されます。便利！
書き方は [Glob Operators](http://zsh.sourceforge.net/Doc/Release/Expansion.html#Glob-Operators) を参考にするといいです

`HISTORY_IGNORE`では、ヒストリファイル書き込み時には除外してくれますが、内部ヒストリ(メモリ)には普通に履歴が積まれます※`fc -l` すると残ってるのがわかる

内部ヒストリ登録時も無視する場合は次の方法で指定します

## ヒストリ(メモリ)にも積みたくない :ram: :x: 
`zshaddhistory`を使う

```zsh:.zshrc
zshaddhistory() {
  emulate -L zsh
  [[ ${1%%$'\n'} != ${~HISTORY_IGNORE} ]]
}
```

このHook関数は コマンドライン実行前(=ヒストリ登録前)に呼び出されます
zshaddhistoryがステータス `1`を返す場合は、内部履歴に登録されなくなります

### 少し解説
- 左辺 `${1%%$'\n'}` 
コマンドラインから改行文字を取り除いてます
変数展開の `${name%%pattern}` 構文を使用しています

- 右辺 `${~HISTORY_IGNORE}`
    `HISTORY_IGNORE` をパターンとして展開してます
    複数文字との比較でよくある `&&`  `||` とかで記述しなくてよくなるから便利ですね


### ポイント
個人的にこの設定のいいところは、 ignoreしたコマンドでも、次のコマンドを実行するまでは履歴に残っている点です
つまり「引数の一部だけほしい」「引数を変えて実行したい」ときなんかに直前のコマンドとして参照、展開が可能です

## 最後に
本当は、実行に失敗したコマンドを除外したかったのですが、できませんでした
`zshaddhistory` の仕様(コマンド実行後ではなくコマンド実行前に呼ばれる)じゃ無理ぽ
ご存知の方いましたら、教えて下さい。

以上、参考になればうれしいです
集計・報告に役立つExcel 関数まとめ

よく管理表とか作って週次で報告するんですが、毎回作るのも報告のたびに数えるのも
めんどいので、よく使うくせに忘れて調べなおす関数を整理することにしました。
※ Microsoft Excel 2016 で試しています。

# １．Excelブックの情報を取得する関数
##### （１）ファイル名全体を取得
```
=MID(CELL("filename",A1),FIND("[",CELL("filename",A1),1)+1,FIND("]",CELL("filename",A1),1)-FIND("[",CELL("filename",A1),1)-1)
```
※A1は、どのセルでも問題ありません。
##### （２）ファイル名全体から拡張子(.xlsx)を除外する
```
=MID(CELL("filename",A1),FIND("[",CELL("filename",A1),1)+1,FIND(".xlsx",CELL("filename",A1),1)-FIND("[",CELL("filename",A1),1)-1)
```
※A1は、どのセルでも問題ありません。
##### （３）シート名を取得する
```
=RIGHT(CELL("filename",A1),LEN(CELL("filename",A1))-FIND("]",CELL("filename",A1)))
```
※A1は、どのセルでも問題ありません。


# ２．一覧表を集計するときに使う関数
下記のような課題を管理する表の場合

| A列 | B列  | C列  | D列    | E列      | F列      | G列    | H列    | J列  | K列  | L列      | M列  | N列    |
|:----|:-----|:-----|:-------|:---------|:---------|:-------|:-------|:-----|:-----|:---------|:-----|:-------|
| No  | 分類 | 発生工程 | 優先度 | タイトル | 課題内容 | 起票日 | 起票者 | 期限 | 対応者 | 対応状況 | 状況 | 完了日 |


##### （１）一覧表の件数を確認する
```
=COUNTA(B:B)-1
```
※最後の"-1"は、列名などを記載している行のカウントを除外するためになります。

##### （２）一覧表の対応中の件数を確認する
```
=COUNTIF(M:M,"対応中*")
```
※対応中の後ろのアスタリスクは、「対応中(玉持ち：Aさん)」のような書き方でも集計できるように正規表現にしています。
##### （３）一覧表の期限切れの件数を確認する
```
=COUNTIFS(J:J,"<"&TODAY(),M:M,"<>"&"完了")
```
##### （４）範囲(A:A)の一番下の値を取得する
```
=INDIRECT("A"&COUNTA(A:A))
```
##### （５）今日以前の日付の総数
```
=COUNTIF(J:J,"<"&TODAY())
```
---
他にも思いついたら足していこうと思います。
nuxtでvuetify使ってる環境に node-sass と sass-loader 突っ込むと nuxt build できなくなる話

公式エントリっぽい [CSS プリプロセッサを使うには？](https://ja.nuxtjs.org/faq/pre-processors/) に従ったら 3時間 溶けることになったので、注意喚起も兼ねて投稿。

# 先に結論
`node-sass` と `sass-loader` の代わりに `@nuxtjs/style-resources` を使う。

vuetify-module の issue に同じ境遇の人が居ました。（記事書いてから気づいた。）
https://github.com/nuxt-community/vuetify-module/issues/82
>
I think styleResources module is conflicting around node-sass vs dart-sass, I don't have any workaround except the commit I proposed on the fixed branch, which means not using @nuxtjs/styleResources (and yes it means having to copy imports whenever you have to use variables in components)

## 手順的な何か
依存関係とかで苦しみたくなかったので、潔く再インストール。

package.jsonを編集して、

```diff:package.json(diff)

   "dependencies": {
     "@nuxt/typescript-runtime": "^0.4.10",
     "@nuxtjs/axios": "^5.11.0",
     "@types/node": "^14.0.23",
-    "node-sass": "^4.14.1",
+    "@nuxtjs/style-resources": "^1.0.0",
     "nuxt": "^2.13.0",
     "pug": "^3.0.0",
     "pug-loader": "^2.4.0",
-    "sass-loader": "^9.0.2"
     "pug-plain-loader": "^1.0.0"
   },
```

node_modules と package-lock.json を削除して npm install

```shell
$ rm -rf node_modules/ package-lock.json
$ npm install
```

# 解決経緯 （ただの愚痴）
[create-nuxt-app](https://github.com/nuxt/create-nuxt-app) を利用してNuxt+TypeScript+Vuetify の環境を作成した。
[Pug](https://github.com/pugjs/pug) 記法と scss 記法を使いたかったので、 公式のエントリ[CSS プリプロセッサを使うには？](https://ja.nuxtjs.org/faq/pre-processors/) を参考に以下を実行

```shell
$ npm install --save-dev pug pug-plain-loader
$ npm install --save-dev node-sass sass-loader
```
Pug も scss も使えるようになってめでたしめでたし。

と思いきや、 `npm run build (nuxt build)` すると

```shell
 FATAL  Nuxt build error                                                                                    20:04:38

  at WebpackBundler.webpackCompile (node_modules/@nuxt/webpack/dist/webpack.js:5472:21)
  at processTicksAndRejections (internal/process/task_queues.js:97:5)
  at async WebpackBundler.build (node_modules/@nuxt/webpack/dist/webpack.js:5421:5)
  at async Builder.build (node_modules/@nuxt/builder/dist/builder.js:5629:5)
  at async Object.run (node_modules/@nuxt/cli/dist/cli-build.js:107:7)
  at async NuxtCommand.run (node_modules/@nuxt/cli/dist/cli-index.js:2798:7)


   ╭─────────────────────────────╮
   │                             │
   │   ✖ Nuxt Fatal Error        │
   │                             │
   │   Error: Nuxt build error   │
   │                             │
   ╰─────────────────────────────╯
```

… は？ `npm run dev (nuxt)` コマンドは正常に動作していたのに？？？
エラーメッセージ見てみると…

```shell
...

ERROR in ./node_modules/vuetify/src/components/VMessages/VMessages.sass

...
```

Vuetify の sass 関係が原因っぽいことは分かった。 ネットの海をさまよいつつ 環境構築を何回も 2時間ほどやっているうちに、 `@nuxtjs/style-resources` の存在を知る。
入れ替えて試してみる -> 解決

めでたしめでたし…

## 得た教訓
公式の FAQ も当てにならないことがある…
大量の動画をまとめて連結させる！

## やりたいこと
ディレクトリの中の動画を全て連結して1つの動画にする

## 実行方法

```
$ python3 combine_videos.py -i sample_videos/ -o output.mp4 
29.0 1280 720
Filename:  video01.mp4
Filename:  video02.mp4
Filename:  video03.mp4
Done.
```

```combine_videos.py
#coding=utf-8
import os
import cv2
import glob
import argparse    # 1. argparseをインポート

parser = argparse.ArgumentParser()
parser.add_argument('-i', '--input_dir', help='input video directory')
parser.add_argument('-o', '--output_video', help='output video filename')

args = parser.parse_args()

def combine_videos(directory, result):
    # 入力する動画を指定(文字列でソート)
    videos_list = glob.glob('{}/*'.format(directory))
    videos_list.sort()

    # 形式はMP4Vを指定
    fourcc = cv2.VideoWriter_fourcc('m', 'p', '4', 'v')

    # 動画情報の取得
    movie = cv2.VideoCapture(videos_list[0])
    fps    = movie.get(cv2.CAP_PROP_FPS)
    height = movie.get(cv2.CAP_PROP_FRAME_HEIGHT)
    width  = movie.get(cv2.CAP_PROP_FRAME_WIDTH)
    print(fps, int(width), int(height))

    # 出力先のファイルを開く
    out = cv2.VideoWriter(result, int(fourcc), fps, (int(width), int(height)))

    # 動画の読み込み
    for video in videos_list:
        movie = cv2.VideoCapture(video)
        print('Filename: ', video.split('/')[-1])
        while True:
            ret, frame = movie.read()
            out.write(frame)
            if not ret:
                break
    print('Done.')

if __name__ == '__main__':
    combine_videos(args.input_dir, args.output_video)


```
初心者によるプログラミング学習ログ 373日目

#100日チャレンジの373日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
373日目は、
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>昨日の作業・やったこと⇩<br><br>●寝る直前の筋トレ5分、kindle読書 10分<br>●ブログ1記事作成<br>●プログラミング学習373日目 2h<br>・メンターの課題<br>・調整用メディアクエリ一部修正<br>・XDを少し弄ってみる<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%E3%81%A4%E3%81%AA%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><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></p>&mdash; ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) <a href="https://twitter.com/ppmp65/status/1283855395618877441?ref_src=twsrc%5Etfw">July 16, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
【PostgreSQL】複数インスタンス作成

1つのサーバに導入したPostgreSQLに複数ユーザでそれぞれインスタンス(データベースクラスタ)を作成したい場合の設定。
バージョンは10。

ポスグレはOS側ユーザが一つのインスタンスを持つので、まずインスタンスオーナーとなるOSユーザを作成します。
またグループも`postgres`にしておきましょう。
(Postgresインストール時に作成されているはず)

## ユーザー作成
```
adduser dangouser1
```

## 各ユーザが持つデータベースディレクトリを作成

```
mkdir /database/data_dango1
```
場所は任意 

# ディレクトリの所有を作成したユーザ、グループをpostgresに変更
※各ディレクトリには所有者のみがアクセスできるように、chmod700にしておく。

```
chown dangouser1 /database/data_dango1
chgrp postgres /database/data_dango1
chmod 700 /database/data_dango1
```

## 作成したユーザの環境変数を設定

```
su - dangousr1
$vi ./bashrc
```
以下を追記

```java:./bashrc
export PATH=$PATH:/usr/local/pgsql/bin
export PGDATA=/database/data_dango1
export PATH
export PGDATA
```
※
`$PATH:/usr/local/pgsql/bin`
は共通なので(導入時に作成されるデフォルトインスタンスのディレクトリにコマンドが格納されてるので)、
/etc/profile で全体に通してもいいかもしれません。
設定反映

```
source bashrc
```

## インスタンス作成

```
initdb --pgdata=/database/data_dango1
```
完了後、/database/data_dango1にインスタンスの構成データが作成されます。
こんな感じ

```
dangousr1@dangosvr:/database/data_dango1$ ls -lh

-rw------- 1 dangousr1 postgres 3 7月 30 23:50 PG_VERSION
drwxr-xr-x 2 dangousr1 postgres 12K 8月 27 23:50 archive_log
drwx------ 6 dangousr1 postgres 4.0K 7月 30 23:50 base
-rw------- 1 dangousr1 postgres 63 8月 28 00:00 current_logfiles
drwx------ 2 dangousr1 postgres 4.0K 8月 25 00:31 global
drwx------ 2 dangousr1 postgres 4.0K 7月 30 23:50 pg_commit_ts
drwx------ 2 dangousr1 postgres 4.0K 7月 30 23:50 pg_dynshmem
-rw------- 1 dangousr1 postgres 4.5K 7月 30 23:50 pg_hba.conf
-rw------- 1 dangousr1 postgres 1.6K 7月 30 23:50 pg_ident.conf
drwx------ 2 dangousr1 postgres 4.0K 8月 28 00:00 pg_log
drwx------ 4 dangousr1 postgres 4.0K 8月 27 23:55 pg_logical
drwx------ 4 dangousr1 postgres 4.0K 7月 30 23:50 pg_multixact
drwx------ 2 dangousr1 postgres 4.0K 8月 25 00:30 pg_notify
drwx------ 2 dangousr1 postgres 4.0K 8月 27 23:50 pg_replslot
drwx------ 2 dangousr1 postgres 4.0K 7月 30 23:50 pg_serial
drwx------ 2 dangousr1 postgres 4.0K 7月 30 23:50 pg_snapshots
drwx------ 2 dangousr1 postgres 4.0K 8月 25 00:30 pg_stat
drwx------ 2 dangousr1 postgres 4.0K 8月 28 11:51 pg_stat_tmp
drwx------ 2 dangousr1 postgres 4.0K 7月 31 23:50 pg_subtrans
drwx------ 2 dangousr1 postgres 4.0K 7月 30 23:50 pg_tblspc
drwx------ 2 dangousr1 postgres 4.0K 7月 30 23:50 pg_twophase

drwxr-xr-x 3 dangousr1 postgres 4096 8月 27 23:55 pg_wal
drwx------ 2 dangousr1 postgres 4.0K 7月 30 23:50 pg_xact
-rw------- 1 dangousr1 postgres 88 7月 30 23:50 postgresql.auto.conf
-rw------- 1 dangousr1 postgres 23K 7月 30 23:50 postgresql.conf
-rw------- 1 dangousr1 postgres 62 8月 25 00:30 postmaster.opts
-rw------- 1 dangousr1 postgres 80 8月 25 00:30 postmaster.pid
dangousr1@dangosvr:/database/data_dango1$ 
```

この中の、<font color="Blue">postgresql.conf</font>が設定ファイルなので編集します。

```java:postgresql.conf
listen_addresses = '*'
port=5432以外に設定
```

ポートははじめは5432になっていますが、
デフォルトのインスタンスに使用されているので変更しましょう。

## インスタンス起動
```
pg_ctl -D /database/data_dango1 start
```

## デフォルトのDB(postrges)に接続
```
psql --port=5433 -d postgres
```
postgresql.confで設定したポート番号を指定します。

このようにポートで分けてユーザ、ディレクトリ、インスタンスを各々で用意してやれば複数インスタンスを作成できます。
<br>
いじょう。
Ubuntu20.04に最新のnode.jsとTypeScriptをインストールする方法

## Node.js

```
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs
```

## TypeScript

```
sudo npm install -g typescript
```

## Yarn

```
sudo npm install -g yarn
```

## Referneces

* https://github.com/nodesource/distributions/blob/master/README.md
【ActiveDirectory】ドメインコントローラの昇格に関する前提条件の検証に失敗しました。

ActiveDirectoryを導入したサーバーをドメインコントローラに昇格する際、
前提条件のチェックで、
「ドメインコントローラの昇格に関する前提条件の検証に失敗しました。DNSサービスを続行する必要があります。続行する前に、DNSクライアントの構成を完了してください。」

と表示され先に進めない場合があります。バージョンは2012R2。
![20181122133940.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673840/eb95224f-32fb-5208-3ead-b5e2ff789d85.jpeg)
サーバーのIPv6が無効の場合に起こるエラーのようなので有効にしましょう。
<br>
[ネットワークと共有センター]から[アダプター設定の変更]→Ethernetのプロパティで、
[インターネットプロトコルバージョン6]にチェック。
<br>
これで再度前提条件のチェックをすると通るようになります。
ちなみにバージョン2016では起こりませんでした。
<br>
以上。
【ORACLE】アーカイブログの出力先

DBCAでデータベースを作成する際、アーカイブログの出力先をNASで割り当てたネットワークドライブで指定すると、以下のようなエラーが出ました。
バージョンは12c
![20181017110259.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673840/dda3e5b0-22ab-e88a-4ecf-21de6d785df2.jpeg)
「無視」をクリックすると
`"ORA-01034: ORACLE not available"`
でウィザードが強制終了されます。
<br>
REDOアーカイブの出力先はパラメータでいうと、

```
log_archive_dest_1: "LOCATION=出力先パス"
```
で設定しますが、今回はNAS上で作成したフォルダに”E”のドライブレターを割り振っており、パスはそのまま
`"LOCATION=E:\BACKUP\archive\"`
としていました。
が、
ドキュメントに<font color="Blue">「アーカイブ先の指定に汎用命名規則（UNC）は使用できない」</font>と書いてあったので、
`"LOCATION=\\192.168.20.6\BACKUP\archive\"`
とフルパスで指定してみたもののエラーは変わらず..
<br>
時間がなかったのでとりあえずNASをやめて、ローカルの方に新規ディスクをくっつけて指定すると問題なく作成できました。
パスは間違ってないし、アクセスもできるようにしたのに、、
<br>
インストール時の自動アーカイブ設定をOFFにして一旦DBだけ作成した後にONに変更するといけるのか。。？
ネットワークドライブに作成できないなんてことはまぁないハズ。。誰か教えて。。。
<br>
以上
【Vue.js】HTML表示について

Vue.jsについて必要な知識をまとめました。
自身の備忘録として記載します。

#v-htmlでHTMLを出力する
「HTMLのコードを出力する」ための構文の書き方をまとめます。{{}}による値の表示はHTMLのタグをHTMLとして出力させることはできません。なので「v-html」を使います。

```
<○○　v-html="・・・HTMLのコード・・・"></○○>
```
このように記載するとタグの属性として認識します。

#属性に値をバインド
タグの属性の値に変数などを設定したい場合は下記のように記載します。

```
v-bind:  属性　= "設定する値"
```
このように記載すると属性に値が設定されます。

#参考URL
Vue.js & Nuxt.js超入門
https://www.amazon.co.jp/dp/4798056596?tag=maftracking247988-22&linkCode=ure&creative=6339https://www.amazon.co.jp/dp/4798056596?tag=maftracking247988-22&linkCode=ure&creative=6339
アルゴリズムパズルを解く【その0】

#はじめに
今日からオライリーから出てる[アルゴリズムパズル](https://www.oreilly.co.jp/books/9784873116693/)を解いていきます。
**毎日何問解きます！****この日までに全て解き終わります！**などという高尚な目標はなく、しかもプログラムに活かせるだろうということも特に考えてはいないです。
そうただただパズルを解きたいからパズルを解くのです。
ということでこの文で**はじめに**は終わりになるので今から初級パズルを順に解いていきたいと思います。
だいたい1記事で2~3問くらい解きたい。
(本当に今から解くので何時間いや何日空いてこの後の文が書き進められていくかは神の味噌汁である)

#1. 狼とヤギとキャベツ
##【問題内容】
- 1人の男、1匹の狼、1匹のヤギ、1玉のキャベツがある。
- 船で川の反対側に運ぶ
- 船には男とどれか一つしか乗せられない
- 男がいないと狼はヤギをヤギはキャベツを食べてしまう

##【考察】
- 初手は条件よりヤギを運ぶしかない
- 2手目は当然男が帰ってくる
- 3手目はどちらを運んでも条件に引っかかるため4手目はヤギを戻すことが確定している
- ということは3手目はどっちでもいい
- 5手目は3手目で運んだ方と別の方を運ぶ(この時点で向こう岸に狼とキャベツが揃う)
- 6手目で男が帰って来て7手目でヤギを運べば終わり

##【解答】
1. 男,ヤギ→
2. ←男
3. 男,キャベツor狼→
4. ←男,ヤギ
5. 男,狼orキャベツ(3手目と別の方)→
6. ←男
7. 男,ヤギ→

よってしっかり運べる

##【感想】
3手目以外は一意に決まるので難しくはない。ただ1問目にふさわしいThePazzleという問題だったと思います。

#2. 手袋選び
##【問題内容】
- 黒5,茶3,灰2の10組20個の手袋がある
- 暗闇で手袋を選ぶ,確認は選んだ後のみ
- (a)少なくとも1組の色が揃う
- (b)それぞれの色を少なくとも1組
- (a)(b)を保証するには最低いくつ手袋を選べばいいか

##【考察】
- 最悪のパターンを考える問題
- 手袋なので右手と左手が揃わないと1組にならない
- 同じ側の手袋を引いている限りは絶対に揃わないのでまずそこを数える
- 黒5茶3灰2の右手だけまず引き続けたと仮定して10回,これが両条件の最低回数としてかかってくる
- (a)の場合,上の10回から何引いても揃う
- (b)の場合,上の10回から数の多い色より順に全部引き切れば最後まで灰色が揃わない

##【解答】
(a)片方の手だけ引き続けて10回,そこから何引いても揃うので11回
(b)黒と茶色を全部引いて16回,灰色の片方の手だけを引いて18回,残りの２つはどちらを引いても揃うので19回

##【感想】
高校生の数学の組み合わせの問題と似た雰囲気を感じました。ただ手袋が右手と左手があるというのが見落としやすいというかいやらしい。

#長方形の分割
##【問題内容】
- 長方形を分割して取り得る直角三角形の個数を全て求める
- アルゴリズムも示す

##【考察】
- まず思いつくのは長方形を対角線で分割すると2つ直角三角形ができる
- 直角三角形は斜辺に対して逆の頂点から垂線を下ろせば2つの直角三角形に分割できる
- ちょっと表にまとめてみる(直角三角形を分割する場合)
 
|     分割回数 |  n(直角三角形の数)    |
|:-----------------:|:------------------:|
|              1 |        3        |
|            2 |       4       |
|              3 |        5        |
|                4 |         6         |
|             5 |       7       |
|        6 |      8       |
|:|:|

- 最初だけ長方形を直角三角形に分割するので特殊なケースとして,その後は(n-2)回直角三角形を分割すればn個の直角三角形が得られる

##【解答】
最初に長方形を分割し直角三角形を2つ作成した後は(n-2)回分割することでn個の直角三角形が得られる

##【感想】
個人的にはしっくりこない感じの問題でした。ただ解答を見てもこんな感じの回答でした。解答欄にはもう１つ解答例があって少し複雑だが面白い発想だったのでそちら側の解答も思いつくようになりたいと思った。


#おわりに
今日は3問解きました。最初だけあって簡単な問題が多かったです。ただパズルを考えるのは楽しいので満足しています。
こんな考え方もあるよっていう方がいましたらコメントくださると私が喜びます。
パズルを解くよりも久しぶりにQiitaを書くことに時間がかかりました。これで夜ご飯が食べられます。それでは。
【Windows】イベントログをLinuxに転送する

WindowsのイベントログをLinuxに転送してログ管理を一元化してぇ
って時の設定。

Windowsに「NXlog」というツールを導入します。
ダウンロードはコチラから↓
https://nxlog.co/products/nxlog-community-edition/download

Windows版を選んでサーバに配置し、インストールします。
![20180611172950.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673840/0c6e73e0-10a0-519e-3f2c-ba6462fb749f.png)
選択項目は特になく、インストールも一瞬で終わります。
<br>
完了後、設定ファイルを編集します。
`C:\Program Files (x86)\nxlog\conf\nxlog.conf`

ファイル内容を以下のように修正します。 

```config:nxlog.conf
## This is a sample configuration file. See the nxlog reference manual about the
## configuration options. It should be installed locally and is also available
## online at http://nxlog.org/docs/

## Please set the ROOT to the folder your nxlog was installed into,
## otherwise it will not start.

#define ROOT C:\Program Files\nxlog
define ROOT C:\Program Files (x86)\nxlog

Moduledir %ROOT%\modules
CacheDir %ROOT%\data
Pidfile %ROOT%\data\nxlog.pid
SpoolDir %ROOT%\data
LogFile %ROOT%\data\nxlog.log

<Extension syslog>
Module xm_syslog
</Extension>

<Extension charconv>
Module xm_charconv
AutodetectCharsets shift_jis, utf-8
</Extension>

<Extension json>
Module xm_json
</Extension>

<Input in>
Module im_msvistalog
Query <QueryList>\
<Query Id="0">\
<Select Path="Application">*[System[(Level=1 or Level=2 or Level=3)]]</Select>\
<Select Path="System">*[System[(Level=1 or Level=2 or Level=3)]]</Select>\
<Select Path="Security">*[System[(Level=1 or Level=2 or Level=3)]]</Select>\
</Query>\
</QueryList>
Exec $raw_event = "json=" + to_json(); $SyslogFacilityValue = 21;
Exec convert_fields("utf-8", "utf-8");
</Input>

<Processor t>
Module pm_transformer
OutputFormat syslog_bsd
Exec $Message=(": "+$raw_event);
</Processor>

<Output out>
Module om_udp
Host xxx.xxx.xxx.xxx
Port 514
</Output>

<Route r>
Path in => t => out
</Route>
```
`"Output out"`の箇所で送りたいサーバのIPアドレスとポートを指定してください。

`"QueryList"`
の
`Select Path="Application"`
`Select Path="System"`
`Select Path="Security"`
で各イベントログの出力とLevelの指定ができます。
消すとそのイベントは吐かれません。レベルは参考以下
↓
クリティカル＝Level1
エラー=Level2
警告=Level3
情報＝Level4
<br>
次は転送先のLinuxサーバの設定です。<font color="Blue">rsyslog.conf</font>に以下を追記

```conf:rsyslog.conf
## Remote host logging
:fromhost-ip, isequal, "xxx.xxx.xxx.xxx" /var/log/xxxx.log
& stop
```
NXLOGサーバのIPアドレスとログの出力先を指定してください。
他にも、このファイルを編集することでファシリティを絞ったり出力形式を変えたりできます。
<br>
最後に
Windowsでnxlogサービスを再起動
Linuxでrsyslog再起動

```
systemctl restart rsyslog
```

指定したログファイルが作成され、イベントログの内容が吐かれているはずです。
こんな感じで

```
Jul 3 11:00:29 dango NRPE_NT[0]: [err] : json={"EventTime":"2018-07-03 11:00:28","Hostname":"dango","Keywords":36028797018963968,"EventType":"ERROR","SeverityValue":4,"Severity":"ERROR","EventID":3,"SourceName":"NRPE_NT","Task":4,"RecordNumber":8618,"ProcessID":0,"ThreadID":0,"Channel":"Application","ERROR_EVT_UNRESOLVED":true,"EventReceivedTime":"2018-07-03 11:00:29","SourceModuleName":"in","SourceModuleType":"im_msvistalo 
```

なかなかに見づらいですが、ここはrsyslog.confをいじれば整えられます。
<br>
以上ィ
クールな背景動画つきメッセージ11日目【WEBサイトを作る30日チャレンジ】

# クールなトップページを作ってみた

■概要
　・動画を背景に
　・background-colorの白を背景動画の前へ
　・白の背景にデカ文字
　・文字は背景とブレンドさせて透過させる

# 完成した制作物
　![ezgif.com-video-to-gif (11).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540462/0defd5bb-7606-37a0-cf7c-4e3f13252ceb.gif)

# コード

HTML↓

```html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <nav>
      </label>
      <label class="logo">Cool♪</label>
      <ul>
        <li><a class="active" href="#">ホーム</a></li>
        <li><a href="#">会社概要</a></li>
        <li><a href="#">事業内容</a></li>
        <li><a href="#">お問い合わせ</a></li>
        <li><a href="#">採用情報</a></li>
      </ul>
    </nav>
    <div class="video_area">
      <video autoplay muted loop type="video/mp4" src="goomalling-storm.mp4"></video>
      <h2>COOL♪</h2>
    </div>

    <footer>
      <nav>
        <div class ="footer">
          <ul>
            <li><a href="#">ホーム</a></li>
            <li><a href="#">会社概要</a></li>
            <li><a href="#">事業内容</a></li>
            <li><a href="#">お問い合わせ</a></li>
            <li><a href="#">採用情報</a></li>
          </ul>
        </div>
      </nav>
    </footer>
  </body>
</html>
```

CSS↓

```css

*
{
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}


nav{
  background: black;
  height: 80px;
  width: 100%;
}

.logo {
  color: white;
  font-size: 33px;
  line-height: 80px;
  font-weight: 600;
	text-decoration: none;
	margin-left:15px;
}
nav ul{
  float: right;
  margin-right: 60px;
}
nav ul li{
  display: inline-block;
  line-height: 80px;
  margin: 0 2px;
}
nav ul li a{
  color: #f2f2f2;
  font-weight: 500;
  font-size: 20px;
  padding: 7px 13px;
  border-radius: 3px;
  text-transform: uppercase;
  font-family: 'Poppins', sans-serif;
	text-decoration: none;
}
a.active,a:hover{
  background: rgb(33, 31, 31);
  transition: .5s;
}

.video_area{
  width: 100%;
  height: 100%;
  display: flex;
}

.video_area video{
  width: 100%;
  height: 100%;
  position: absolute;
  
}
.video_area h2{
  top:0;
  left:0;
  background-color: #f2f2f2;
  opacity: 0.9;
  width: 100%;
  height: 100%;
  font-size: 25vw;
  text-align: center;
  text-transform: uppercase;
  line-height: 100vh;
  mix-blend-mode: screen;
}
footer nav{
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center; 
}
```

# ポイント

 ・最近流行り？のmix-blend-modeを使用。
　https://developer.mozilla.org/ja/docs/Web/CSS/mix-blend-mode

 ・navバーは過去使用したコードを使って再利用してます

# 感想
　flexやpositionの付け方ミスって時間食われました笑
　どこがどのように重なりあっているのかきちんと把握しつつも、進めていく中でそれぞれの要素の特性に気をつけて進めていかねばと思いました。
　あれ・・・・videoタグ横いっぱいになってない！笑
　時間がきたため、一旦ここまで。。。


　最後までみていただき、ありがとうございます。
　ここは違う、ここはこうした方が良いかも等々ございましたらご指摘いただけますと幸いです。
デプロイできない！heroku に push できないエラーを解決する (Rails チュートリアル１章)

自分がrailsチュートリアルを進めていく上で、発生したエラーを記録していきます。
ハードはMacBook Air, 開発環境はVScodeを用いています。

#Railsチュートリアル１章 1.5 デプロイする

「よしデプロイするぞ！GitHubにプッシュするやり方と似てるゾ！」
「これならできる！！！！！！」

```
$ heroku login
```
```
$ git init
$ heroku git:remote -a アプリの名前
```
```
$ git add .
$ git commit -am "first commit"
$ git push heroku master
```

:small_red_triangle_down:その結果

```
$ git push heroku master
~省略~
remote:        Gem::Ext::BuildError: ERROR: Failed to build gem native extension.
~省略~
remote:        Could not create Makefile due to some reason, probably lack of necessary
~省略~
remote:        An error occurred while installing sqlite3 (1.4.2), and Bundler cannot continue.
~省略~
remote:  !
remote:  !     Failed to install gems via Bundler.
remote:  !     Detected sqlite3 gem which is not supported on Heroku:
remote:  !     https://devcenter.heroku.com/articles/sqlite3
remote:  !
remote:  !     Push rejected, failed to compile Ruby app.
remote: 
remote:  !     Push failed
remote: Verifying deploy...
remote: 
remote: !       Push rejected to tutorial-app-20200717.
remote: 
To https://git.heroku.com/アプリ名.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/アプリ名.git'
```

と、頭を抱えることになります。

gitにプッシュした後、herokuにデプロイするぞ！とそのまま突き進んだ人がハマるエラーです。

このエラーは、**HerokuではSQLiteがサポートされていないために発生します。
そこでデータベースをPostgreSQLに変更します。**

「よし！解決方法がわかったからやっていくぞ！」と、[1.5.1 Herokuのセットアップ](https://railstutorial.jp/chapters/beginning?version=5.1#sec-heroku_setup)や、[初心者です。Herokuでbuildに失敗し続けてしまいます。。](https://qiita.com/satomomo0222/items/08945c24869294e93f59)を試してみるものの、上手くいきません...

**上記のサイトの方法を試しても駄目だった人は、一から作り直すことになりますが、最終手段として次の方法を試してみてください。**

#解決方法

###rails new の段階でデータベースをPostgreSQLに指定する！

また一からやり直す解決策になりますので、ご了承ください...
「大丈夫みんなならできるよ！」

早速やっていきましょう。

```:変更前
$ rails _5.1.6_ new アプリ名
```

```:変更後
$ rails _5.1.6_ new アプリ名 --database=postgresql
```

これを実行すると、最初からPostgreSQLが指定されたrailsフレームワークが生成されます。

あとは、これまでと同様の手順で進めて大丈夫です。一通り設定が終わりましたら、herokuにpushしてみてください。

####ここまでやればherokuに問題なくデプロイできるようになります。
役に立ったら是非**LGTMボタンをポチッと押していただけると嬉しいです。**
一緒に Rails学習 頑張りましょう！:raised_hand_tone1:

---

>ちなみに、railsのバージョン指定をせずに、rails6でこの操作を実行すると、次のようなエラーが発生します。

>```
$ rails s
```
を実行し、[localhost:3000](http://localhost:3000/)にアクセスしてみてください。

>赤いエラー画面に、次のようなエラー文が表示されるはずです。
FATAL: database "アプリ名" does not exist
ActiveRecord::NoDatabaseError

>この場合の解決方法はこちらにまとめました。
[rails6で ActiveRecord::NoDatabaseError を解決する](https://qiita.com/satomomo0222/items/0d7f91b9c5403e9d2b68)
laravel 簡単な画像アップロードの方法

laravelで掲示板の機能の一つとして画像をアップロードする機能を実践してみます。

・Laravel 7.1
・PHP7.3

#テーブルを作る

```~~~post.table.php
public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->bigincrements('id');
            $table->string('title');
            $table->text('body');
            $table->string('path');
            $table->timestamps();
        });
    }
```

タイトル、内容、画像のpathを保存するためのカラムを追加します。

#form

```PostController.php
{{ Form::open(['action' => 'PostController@index', 'method' => 'post' , 'enctype' => 'multipart/form-data']) }}
        <p>タイトル<br/>{{ Form::text('title', '', ['id' => 'title', 'size' => 50]) }}</p>
        <p>内容<br/>{{ Form::textarea('body', '', ['id' => 'body', 'size' => '50x3']) }}</p>
        {{ Form::file('path') }}
        <div>
            {{ Form::submit('投稿', ['class' => 'btn btn-success btn-lg']) }}
        </div>
{{ Form::close() }}
```
タイトル、内容、画像選択のformを作りました。

formタグに enctype='multipart/form-data' を忘れずn記述しましょう。これは、複合データ型であることを示し、１回のHTTP通信で、複数の種類のデータ形式を扱う事でできるようになります。

#Route
```route.php
Route::resource('/post', 'PostController');
```
#controller

```PostController.php
public function index()
    {
        $items = Post::all();
        return view('post.index', ['items' => $items]);
        // DBから取得した値（$itemの内容）をpost.indexに渡してblade側で使用
    }

public function store(PostRequest $request)
    {
        $post = new Post;

        $post->title = $request->title;
        $post->body = $request->body;
        if ($request->file('path')->isValid()) {
                                                //publicに保存、ファイル名指定
            $image_path = $request->path->store('public/post_image');
            $post->path = basename($image_path);

        }
        //DB書き込み
        $post->save();
        return redirect('/post')->with('success', '投稿しました！');
    }
```

storeメソッドには、保存したいパス(ディレクトリ)を指定します。
(任意のファイル名を指定したい場合はstoreAsメソッドを使用）

`public/post_image`と画像ファイルの保存場所を指定します。
ファイルが保存されつ場所は、`storage/app/public/post_image`ディレクトリに保存されます。

`basename()`を使用して、画像名のみ保存します。

viewで表示する際には`asset()`を使用して、`<img src="{{ asset('storage/post_image/' . $item->path) }}">`と指定します。

#シンボリックリンクを張る

最後にシンボリックリンクを張りましょう。

```
php artisan storage:link
```

リンクが貼られていれば、 `public/storage`の右上に矢印が表示されます。
Cloud Functions for Firebaseで関数をシンプルにファイルごとに分割する

Cloud Functions for Firebase にて、関数を定義する際にデフォルトの`functions/index.js`以下に関数を書いていくとすぐにファイルが肥大化してしまいます。

```js:funcions/index.js
const functions = require("firebase-functions");

// Create and Deploy Your First Cloud Functions
// https://firebase.google.com/docs/functions/write-firebase-functions

exports.helloWorld = functions.https.onRequest((request, response) => {
  response.send("Hello from Firebase!");
});
```

そこで、ある程度の規模になりそうな場合は以下のようにファイルを分割した上で、関数をエクスポートして利用すると見通しが良くなるかと思います。

以下はその例です（TypeScript です）。

```ts:functions/src/index.ts
import * as admin from "firebase-admin";
admin.initializeApp();

export * from "./hello";
```

```ts:functions/src/hello.ts
import * as functions from "firebase-functions";

export const helloWorld = functions.https.onRequest((request, response) => {
  response.send("Hello from Firebase!");
});
```

`export * from "./hello";`とすることで、`hello.ts`内で`export`した関数はすべて利用できるようになります。

ぜひ参考にしてみてください😄

## 〜宣伝〜

こんな感じで Firebase を使って、[AnyMake](https://anymake.app/) というサービスを個人で開発しています。
<img width="1434" alt="スクリーンショット 2020-07-17 13.53.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90682/9ef2afbb-992f-1f85-2902-79bfea45a715.png">
気になる方はぜひチェックしてみてください👍

:arrow_forward: [AnyMake \- 最高のプロダクトと共に。](https://anymake.app/)
pandasでread_jsonするときにキャッシュでアクセスする方法

# 目的
read_jsonでwebリソースからDataFrameを作成するときに毎回通信を発生させない

# 背景
web apiを使って情報を取得して色々したいが、リクエスト数に制限があり、毎回アクセスしていては、すぐに上限に引っかかってしまう。
テストコードを書いているときはリアルタイムな情報は必要ないので、ローカルにキャッシュで持っておきたい。

# ライブラリ
1. pandas
2. requests
3. [requests_cache](https://pypi.org/project/requests-cache/)
4. [StringIO](https://docs.python.org/ja/2.7/library/stringio.html)

# サンプルコード
```python
import pandas as pd
import requests
import requests_cache
from io import StringIO

requests_cache.install_cache()
response = requests.get("https://financialmodelingprep.com/api/v3/income-statement/AAPL?apikey=demo")
content = response.content.decode()
df = pd.read_json(StringIO(content))
```
# 解説
## [requests_cache](https://pypi.org/project/requests-cache/)
`request.get`で取得するときにキャッシュが存在する場合は通信を行わず、キャッシュからresponseを返す。
`requests_cache.install_cache("test")`でキャッシュ名を変更し、それぞれ管理できる。
キャッシュはsqliteで行われる。ファイルを削除すれば、キャッシュの削除ができる。
## [StringIO](https://docs.python.org/ja/2.7/library/stringio.html)
`pd.read_json`に指定するのはファイル名、URLなので、requestsで取得した`str`はそのままだと指定できない。
`StringIO(content)`とすることで、`str`をファイルのように扱うことができる
【Linux】IPエイリアスが消えない

元々ついてるIPアドレスを別のものに変更しようとしたら、なぜかどっちも付与されてしまって再起動しても消えなかった。OSはCentOS7。

・バックアップを取る

```
cd /etc/sysconfig/network-scripts
cp -p ifcfg-eth0 ifcfg-eth0_20180413
```
でバックアップをとったとします。
<br>
・IPアドレスを変更

```java:/etc/sysconfig/network-scripts/ifcfg-eth0
DEVICE=eth0
BOOTPROTO=static
ONBOOT=yes
HWADDR=06:f5:9f:63:ec:b0
IPADDR=10.132.142.40
NETMASK=255.255.255.192
```
`IPADDR`の箇所を変更しました。
<br>
・再起動して反映

```
systemctl restart network
```
<br>
・結果

```
#ip a

2: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc mq state UP qlen 1000
link/ether 06:f5:9f:63:ec:b0 brd ff:ff:ff:ff:ff:ff
<font color="Red">inet 10.132.142.40/26 brd 10.132.142.63 scope global eth0</font>
valid_lft forever preferred_lft forever
<font color="Red">inet 10.132.84.6/26 brd 10.132.84.63 scope global eth0</font>
valid_lft forever preferred_lft forever
```

？？？？？？？なんで？？？？？？？？
再起動しても変わらず。。
<br>
調べると、どうやらバックアップの名前が原因でした。
ifcfg-eth0_yyyymmddとするとそっちまで読み込んでしまうので、
<font color="Blue">yyyymmdd_ifcfg-eth0</font>とすれば大丈夫らしいです。
<br>
・バックアップのファイル名変更

```
mv ifcfg-eth0_20180413 20180413_ifcfg-eth0
```
<br>
・NW再起動

```
systemctl restart network
```
<br>
・確認

```
ip a

2: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc mq state UP qlen 1000
link/ether 06:f5:9f:63:ec:b0 brd ff:ff:ff:ff:ff:ff
inet 10.132.142.40/26 brd 10.132.142.63 scope global eth0
valid_lft forever preferred_lft forever
```

消えました。
よし、じゃあバックアップを取らないでおくのが正解だな！！！！(違う)
<br>
以上
GitHub ActionsでLaravelアプリを本番環境に自動デプロイする 〜Github Workflow編〜

前回 https://qiita.com/araki-yzrh/items/c4a4ea29d1e9e9cebf88 の続きです

# workflowを定義する

masterブランチにpushされたときに実行されるworkflowを定義します。


```/.github/workflows/BuildDeploy.yml
name: BuildDeploy

on:
  push:
    branches:
      - master

jobs:
  build_deploy:
    runs-on: ubuntu-latest
    steps:
      ...
```

`steps` の中に、タスクをstepとして定義していきます。

# アプリのビルド

Laravelアプリは動作のために事前ビルドが必要です。
以下のように、ソースコードのチェックアウト、composer install、npm ci、npm buildするタスクをstepに追記していきます。

※Docker Login部分はGithub Packagesを前提にしています。docker hub等を利用する場合は適宜読み替えてください

```/.github/workflows/BuildDeploy.yml
- uses: actions/checkout@v2
  with:
    ref: master

- name: Docker Login
  run: echo ${{ secrets.GITHUB_TOKEN }} | docker login docker.pkg.github.com -u ${{ github.actor }} --password-stdin

- name: composer install
  run: docker-compose run app composer install --optimize-autoloader

- name: npm ci
  run: docker-compose run app npm ci

- name: npm build
  run: docker-compose run app npm run production
```


# envの配置

envをGithub Secretsで管理している場合はこのように設置しておきます

```/.github/workflows/BuildDeploy.yml
- name: put production env
  env:
    PROD_ENV: ${{ secrets.production_env }}
  run: echo -e "${PROD_ENV}" > .env
```

# デプロイ

今回は単純な例として、1台のサーバにrsyncでデプロイを行います。

```/.github/workflows/BuildDeploy.yml
- name: deploy
  run: rsync -ahv --delete ./ someapp-server:/var/www/app/
```

# 確認

対象のブランチにpushしてみるとworkflowが開始されたことが確認できると思います。

次回はAWS CodeDeployを使ったデプロイに改修してみます。
Stripeエレメントでクレカ情報POSTするフォーム

```html

<!DOCTYPE html>
<html>
<head>
	<title>Stripe Element生み出す</title>
</head>
<body>
<h2>Stripeエレメントを生み出す</h2>
<script src="https://js.stripe.com/v3/"></script>
<form action="/charge" method="post" id="payment-form">
  <div class="form-row">
    <label for="card-element">
      独自フォーム
    </label>
    <div id="card-element">
      <!-- A Stripe Element will be inserted here. -->
    </div>
    <div id="card-errors" role="alert"></div>
  </div>
  <button>Submit Payment</button>
</form>

<script type="text/javascript">	
// Create a Stripe client.
var stripe = Stripe('pk_test_yJpRRbNedLz6xLWzr504zrM800EBvb1cfh');

// Create an instance of Elements.
var elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
  base: {
    color: '#32325d',
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    }
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a'
  }
};

// Create an instance of the card Element.
var card = elements.create('card', {style: style});

// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');

// Handle real-time validation errors from the card Element.
card.on('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

// Handle form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
  event.preventDefault();

  stripe.createToken(card).then(function(result) {
    if (result.error) {
      // Inform the user if there was an error.
      var errorElement = document.getElementById('card-errors');
      errorElement.textContent = result.error.message;
    } else {
      // Send the token to your server.
      stripeTokenHandler(result.token);
    }
  });
});

// Submit the form with the token ID.
function stripeTokenHandler(token) {
  // Insert the token ID into the form so it gets submitted to the server
  var form = document.getElementById('payment-form');
  var hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'stripeToken');
  hiddenInput.setAttribute('value', token.id);
  form.appendChild(hiddenInput);

  // Submit the form
  form.submit();
}
</script>
</body>
</html>
```

参考


https://stripe.com/docs/stripe-js
Grudsomeでmetadataを設定すると TypeError: Cannot read property '$page' of undefined. が発生する

# 概要
metadataがページに依存するように最適化を行おうとした
templates内に設定したmetadataが読み込まれなかった

# 状況
```BlogPost.vue
<script>
export default {
  metaInfo: {
    title: this.$page.blogPost.title,
    metaInfo: {
      meta: [
        {
          property: "og:site_name",
          content: "Gridsome OGP テスト",
        },
        {
          property: "og:type",
          content: "website",
        },
        {
          property: "og:url",
          content: "https://sample.com/Blog/",
        },
        {
          property: "og:title",
          content: this.$page.blogPost.title,
        },
        {
          property: "og:description",
          content: this.$page.blogPost.content,
        },
        {
          property: "og:image",
          content: "https://sample.com/sample.jpg",
        },
        {
          name: "twitter:card",
          content: "summary_large_image",
        },
      ],
    },
  },
};
</script>
```

ビルドは正常に行われるがブラウザから確認すると表示されず、また開発者ツールから確認すると下記のエラーが吐かれている
> TypeError: Cannot read property '$page' of undefined

# 対応
```BlogPost.vue
<script>
export default {
  metaInfo() {
    return {
      title: this.$page.blogPost.title,
      metaInfo: {
        meta: [
          {
            property: "og:site_name",
            content: "Gridsome OGP テスト",
          },
          {
            property: "og:type",
            content: "website",
          },
          {
            property: "og:url",
            content: "https://sample.com/Blog/",
          },
          {
            property: "og:title",
            content: this.$page.blogPost.title,
          },
          {
            property: "og:description",
            content: this.$page.blogPost.content,
          },
          {
            property: "og:image",
            content: "https://sample.com/sample.jpg",
          },
          {
            name: "twitter:card",
            content: "summary_large_image",
          },
        ],
      },
    };
  },
};
</script>
```

moreInfoを関数に各値をreturnで括ることでエラーがなくなりました

まだ触り始めたばかりなので正直なぜこれで大丈夫なのかがわかりません……

# 参考
[Gridsomeでイチからブログを作る - metaタグやOGPを最適化する](https://blog.solunita.net/posts/develop-blog-by-gridsome-from-scrach-dynamic-metadata/)
【v-icon】の一覧を確認する方法と使い方 【Vuetify】

v-iconはvuetifyで使用できるアイコンです。
一覧を確認する方法と使い方をまとめました。

## v-iconの一覧を確認する方法
v-iconの一覧は下記のサイトで確認することができます。
[Material Design Icons.](https://materialdesignicons.com/)

アイコンを検索することで、下記の画像のように使用方法が出てきます。
![スクリーンショット 2020-07-14 9.41.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559347/e6b46008-1c9b-de6d-a3ae-015a03edb8a2.png)

## v-iconの使い方

v-iconはケバブケースで記載する必要があるので、変換して使用します。

```vue
mdiSendCheck
↓
<v-icon>mdi-send-check</v-icon>
```

## 【v-icon】例

```vue
<v-icon>mdi-home</v-icon> #ホーム
<v-icon>mdi-account</v-icon> #アカウント
<v-icon>mdi-magnify</v-icon>　#拡大
<v-icon>mdi-dots-vertical</v-icon> #ドット縦
<v-icon>mdi-dots-horizontal</v-icon> #ドット横
<v-icon>mdi-send</v-icon> #送信
<v-icon>mdi-arrow-down</v-icon> #矢印
<v-icon>mdi-menu</v-icon> #メニュー
<v-icon>mdi-twitter</v-icon> #ツイッター
<v-icon>mdi-facebook</v-icon> #フェイスブック
<v-icon>mdi-instagram</v-icon> #インスタグラム
<v-icon>mdi-github</v-icon> #GitHub
```
【Linux】welcome to emergency mode !

Linuxのファイルシステム自動マウント設定には/etc/fstabを使用しますが、
この中の記述をミスると正常に起動しなくなります。 

当然、sshでも確認できなくなるのでコンソールでみてみると…
![20180516183431.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673840/f7274086-949b-d118-a7eb-0139061692e5.jpeg)
welcome to emergency mode !
歓迎すな
<br>
まずrootログインして、

```
mount -a
```
で起動時に自動マウントするデバイスにある内容を再マウントしようとすることで、どこでひっかかっているのかをみてみます。
<br>
原因が特定できたら<font color="Blue">/etc/fstab</font>を編集します。
![20180516183508.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673840/2def9c75-ce94-0c68-d665-4d7976ac446f.jpeg)
「default」て項目が違いますよと。

/etc/fstab内の書き方をおさらいしておくと、、 

```java:/etc/fstab
/dev/mapper/vg_data-lv_data　 /database 　ext4　 defaults 　0 　0

1列目...デバイス名 
2列目...マウントポイント 
3列目...ファイルシステムタイプ
4列目...マウント時のオプション 
5列目...ファイルシステムをdumpするか否かの指定
6列目...システム起動時にfsckチェックを行うか否かの指定
```
5,6列目の「0」はしないの設定となります。
<br>
この場合は4列目のオプションを「defaults」としなければならなかったところを「default」にしてたのが原因でした。しょーもな！

bootのファイルシステムに誤りがなくても、とにかく/etc/fstab内の記述に間違いがあるだけで強制的にこのモードに入ってしまいます。
コンソールなどでアクセスできない場合は注意です。


以上
【FSL】Atlas（アトラス）を1枚1枚はがして別々にする方法

# 目的

[FSL](https://fsl.fmrib.ox.ac.uk/fsl/fslwiki)を用いて、atlas(アトラス)のlabel(ラベル)を1枚1枚はがして別々にする。

例として、[AAL atlas](https://www.pmod.com/files/download/v35/doc/pneuro/6750.htm)を用いる。
詳しい解説とコードは、「[【FSL】Atlas（アトラス）を1枚1枚はがして別々にする方法](https://www.aiprogrammers.net/entry/2020/05/01/021829)」をご覧ください。
【PyTorch】サンプル③ 〜TENSORS AND AUTOGRAD（テンソルと自動微分）〜

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587891/b676b25e-f9b2-9053-cb16-a63b7ed51ad1.png)
###目的
PyTorchのチュートリアル[PyTorch: Tensors and autograd](https://pytorch.org/tutorials/beginner/examples_autograd/two_layer_net_autograd.html#sphx-glr-beginner-examples-autograd-two-layer-net-autograd-py)を参考にPyTorchテンソル(tensor)と<span style="color: #ff5252">自動微分(autograd)</span>を使って、損失(loss)や重み(weight)の計算をする。

これまでは、PyTorchに実装されている<span style="color: #ff5252">自動微分機能</span>を使わずにニューラルネットワークのパラメータの勾配を計算していましたが、PyTorchの自動微分(autograd)機能を使うとパラメータの<span style="color: #00cc00">勾配計算</span>を<span style="color: #d32f2f">簡単に</span>することができます。


詳しい解説とコードは、「[【PyTorch】サンプル③ 〜TENSORS AND AUTOGRAD（テンソルと自動微分）〜](https://www.aiprogrammers.net/entry/2020/04/25/194823)」をご覧ください。


# チュートリアル

- [【PyTorch】チュートリアル(日本語版 )① 〜テンソル〜](https://www.aiprogrammers.net/entry/2020/04/13/014852)
- [【PyTorch】チュートリアル(日本語版 )② 〜AUTOGRAD〜](https://www.aiprogrammers.net/entry/2020/04/13/232357)
- [【PyTorch】チュートリアル(日本語版 )③ 〜NEURAL NETWORKS（ニューラルネットワーク）〜 ](https://www.aiprogrammers.net/entry/2020/04/18/035524)
- [【PyTorch】チュートリアル(日本語版 )④ 〜TRAINING A CLASSIFIER（画像分類）〜](https://www.aiprogrammers.net/entry/2020/04/18/152115)

# サンプル

- [【PyTorch】サンプル① 〜NUMPY〜](https://www.aiprogrammers.net/entry/2020/04/24/092500)
- [【PyTorch】サンプル② 〜TENSOR (テンソル) 〜](https://www.aiprogrammers.net/entry/2020/04/25/190705)
- [【PyTorch】サンプル③ 〜TENSORS AND AUTOGRAD（テンソルと自動微分）〜](https://www.aiprogrammers.net/entry/2020/04/25/194823)
- [【PyTorch】サンプル④ 〜Defining New autograd Functions（自動微分関数の定義）〜](https://www.aiprogrammers.net/entry/2020/04/26/194122)
- [【PyTorch】サンプル⑤ 〜Static Graphs（静的グラフ）〜](https://www.aiprogrammers.net/entry/2020/04/27/191856)
- [【PyTorch】サンプル⑥ 〜 nn パッケージ 〜](https://www.aiprogrammers.net/entry/2020/05/02/190000)
- [【PyTorch】サンプル⑦ 〜 optim パッケージ 〜](https://www.aiprogrammers.net/entry/2020/05/03/190000)
- [【PyTorch】サンプル⑧ 〜 複雑なモデルの構築方法 〜](https://www.aiprogrammers.net/entry/2020/05/04/183000)
- [【PyTorch】サンプル⑨ 〜 動的グラフ 〜](https://www.aiprogrammers.net/entry/2020/05/05/190000)