OmniAICreator/Qiita-1.07M huggingface dataset:
【Linux】キーボードブリッジ無しで尊師スタイル

# 要約
`xinput`コマンドで内蔵キーボードを無効化！

# 尊師スタイル

内蔵キーボードの上に外付けキーボードを置くスタイルのことをこのように呼ぶらしいです。

![R0000186_small.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304979/bdea5194-e5e2-5a5b-2c9c-1bb06872f760.jpeg)

# 問題点

このようにキーボードを内蔵キーボードの上に直接おいてしまうと、キーがずっと押されっぱなしになってしまいます。そのため、これを防ぐための「キーボードブリッジ」と呼ばれる内蔵キーボードをカバーする道具が必要になります。

買いましょう。

# 更なる問題点

キーボードブリッジ、売っていませんでした。

売り切れでしょうか。販売中止でしょうか。

手作りしようにも材料が必要です。こんな時期なのでホームセンターとか行きたくないです。

# 解決策

では、邪魔な内蔵キーボードを無効化してしまいましょう。

`xinput`コマンドを使います。

実際にコマンドを入力してみると、以下のように認識済みのデバイスたちが表示されます。

```
↪ sudo xinput
⎡ Virtual core pointer                    	id=2	[master pointer  (3)]
⎜   ↳ Virtual core XTEST pointer              	id=4	[slave  pointer  (2)]
⎜   ↳ 04CA00A0:00 04CA:00A0 Touchpad          	id=14	[slave  pointer  (2)]
⎣ Virtual core keyboard                   	id=3	[master keyboard (2)]
    ↳ Virtual core XTEST keyboard             	id=5	[slave  keyboard (3)]
    ↳ Video Bus                               	id=6	[slave  keyboard (3)]
    ↳ Power Button                            	id=7	[slave  keyboard (3)]
    ↳ Sleep Button                            	id=8	[slave  keyboard (3)]
    ↳ LG Camera: LG Camera                    	id=13	[slave  keyboard (3)]
    ↳ LG WMI hotkeys                          	id=16	[slave  keyboard (3)]
    ↳ USB-HID Keyboard System Control         	id=9	[slave  keyboard (3)]
    ↳ USB-HID Keyboard                        	id=10	[slave  keyboard (3)]
    ↳ USB-HID Keyboard Consumer Control       	id=11	[slave  keyboard (3)]
    ↳ USB-HID Keyboard                        	id=12	[slave  keyboard (3)]
    ↳ AT Translated Set 2 keyboard            	id=15	[slave  keyboard (3)]
```

どれが内蔵キーボードかわからないですが、「USB」と書いてあるものは外付けっぽいので、「AT Translated Set 2 keyboard id=15」というのを無効化してみます。

```
↪ sudo xinput -disable "AT Translated Set 2 keyboard"
```
内蔵キーボードが反応しなくなりました！これで尊師スタイルを堪能できます。

ちなみに、`-disable`のあとはデバイス名でなく、id（今回の場合はid=15なので、15）でも大丈夫です。デバイスを再び有効化したい場合は、`-disable`を`-enable`に変えて実行してください。

# 設定の永続化
上で紹介したコマンドを`.xinitrc`ファイルに追記してください。永続化とは言っても、`xinput -enable`すれば再び使えるようになるので安心してください。
Leetcode 30 天挑戰, Week 3 Day 4, Minimum Path Sum, in Swift

資料結構及演算法： `Dynamic Programing` `Matrix` `Greedy`

## 題目

- 挑戰頁面 - <https://leetcode.com/explore/challenge/card/30-day-leetcoding-challenge/530/week-3/3303/>
- 元題目頁面 - [64. Minimum Path Sum](https://leetcode.com/problems/minimum-path-sum/)

## 思考方式

直覺是很明顯就是 DP (笑) ，個人覺得也可以算是 Greedy 吧。（有錯麻煩請指正）

回到題目本身，白話來說，就是拿前一個步驟的結果來成就目前的步驟。跟前天的那題 [Product of Array Except Self](https://qiita.com/vc7/items/ad77ffca4119d7741e92) 有類似的感覺。

首先，把範例拉小來分析：

``` text
1, 3
1, 5
```

以這個矩陣來說的話，左上到左下最小和會是 1 + 1 + 5 = 7 ，為什麼？

再縮小一點來看，

- 只看第一行 `1, 3`
  - 到 1 的成本是 1, 到 3 的成本是 1 + 3 = 4
- 只看第一列 `1, 1`
  - 到第一個 1 的成本是 1, 到第二個 1 的成本是 1 + 1 = 2

拉回陣列，那到 5 要怎麼判斷？到 5 的那個位置會有兩種可能：

- 1 + 3 + 5 = 9
- 1 + 1 + 5 = 7 ✅

根據題目，我們需要取最小值，所以我們會選 `7`

接著我們只要根據這個算法擴大到比較大的二維陣列即可。

## 解題步驟

用雙 loop 去走訪所有元素是必然的，接著我們根據前一小段來看每到一個位置之後要做什麼：

- (0, 0) 起點，不需要做什麼事情
- 起點以外的第一行 (row == 0) ，加上自己左邊的值再放回去
- 起點以外的第一列 (column == 0) ，加上自己上面的值再放回去
- 以上以外的位置，上面和左邊位置的值取小者和自己相加之後放回去

全部走訪完之後，在最右下角 (row.count - 1, column.count - 1) 的位置就會是從左上走到右下的最小路徑和了。

## 程式碼

``` swift
class Solution {
    func minPathSum(_ grid: [[Int]]) -> Int {
        if grid.isEmpty || grid[0].isEmpty { return 0 }
        
        // 複製一個可變的 grid
        // Make a mutable copy of grid
        var grid = grid
        
        for row in 0..<grid.count {
            for column in 0..<grid[0].count {
                // 起點不做任何處理
                // Do nothing at origin
                if row == 0 && column == 0 { continue }
                
                // 處理第一行
                // Proccessing the first row
                if row == 0 {
                    grid[row][column] += grid[row][column - 1]
                    continue
                }
                
                // 處理第一列
                // Proccessing the first column
                if column == 0 {
                    grid[row][column] += grid[row - 1][column]
                    continue
                }
                
                // 處理以外的值
                // Proccessing the rest of the positions
                grid[row][column] += min(grid[row - 1][column],
                                         grid[row][column - 1])
            }
        }
        
        // 回傳最右下角位置的值
        // Returns the right bottom item's value
        return grid[grid.count - 1][grid[0].count - 1]
    }
}
```

## 複雜度分析

令 m 為二維陣列的寬度 (每一行的 item 數)，n 為二維陣列的高度（總共有幾行）

- 時間複雜度 - O(m * n)
  - 有雙 loops 來走訪每個元素
- 空間複雜度 - O(m * n)
  - 有複製一個陣列

## 執行結果

``` text
Runtime: 60 ms (beats 93.01%)
Memory Usage: 20.4 MB
```
イヤホンだけに通知の音を鳴らす方法をがわからない

SwiftでイヤホンやBluetoothイヤホンだけに
アラームの通知音を鳴らす方法がわからないので教えて欲しいです。

イヤホンに接続されていない時は通知音がならないようにしたいです。

検索の仕方、参考になるURL、コピペできるコードなど、何か一つでもいいので
教えていただけると幸いでございます。
よく使う演算子一覧

##演算子一覧

###算術演算子

| 記号 | 効果 |
|:---|----:|
| + | 加算 |
| - | 減算(マイナス符号） |
| * | 乗算 |
| / | 除算 |
| % | 余り |
| ** | 累乗 |
| . | 文字列結合 |

###代入演算子

| 記号 | 効果 |
|:--|:--|
| = | 代入 |
| += | 加算して代入 |
| -= | 減算して代入 |
| *= | 乗算して代入 |
| /= | 除算して代入 |
| %= | 乗余して代入 |
| **= | 累乗して代入 |
| .= | 文字列として結合(追加) |

###等価比較演算子

| 記号 | 効果 |
|:--|:--|
| 　== | 値が等しければtrue |
| 　!= | 値が等しくなければtrue |
| 　> | 値が大きければtrue |
| 　< | 値が小さければtrue |
| 　>= | 値が同じか大きければtrue |
| 　<= | 値が同じが小さければtrue |
| 　eq | 文字列として等しければtrue |
| 　ne | 文字列として等しくなければture |
| 　lt | 文字コードが大きければtrue |
| 　gt | 文字コードが小さければtrue |
| 　le | 文字コードが同じか大きければtrue |
| 　ge | 文字コードが同じか小さければture |
| 　cmp | 大きければ－1、等しければ0、小さければ1 |
| 　=~ | 正規表現。指定文字列があればtrue |
| 　!~ | 正規表現。指定文字列がなければtrue |
| 　! | 否定。真のとき偽、偽のとき真 |
| 　<=> | 値が大きければ-1、等しければ0、小さければ1 |
【Rails new】Ruby on rails アプリケーション作成

![スクリーンショット 2020-04-18 23.36.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620689/b33417c2-6935-1609-e43a-a34375dd56b7.png)

##開発環境
■ Mac OS catalina
■ Ruby on Rails (5.2.4.2)
■ Virtual Box:6.1
■ Vagrant: 2.2.7

##実装

仮想環境内にて、

①アプリケーション自動作成

```①Mac内.terminal
$ rails new (アプリケーション名)
```

②作成したアプリケーションに移動

```②Mac内.terminal
$ cd (アプリケーション名)
```

③サーバーを起動

```③Mac内.terminal
$ rails s -b 0.0.0.0
```

Google chromeにてhttp://localhost:3000

![スクリーンショット 2020-04-18 23.36.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620689/be15daa3-f2a9-9e30-cbac-4f3e28c40296.png)

以上
【Qiita】 マークダウン記法 一覧

Qiitaのマークダウン記法についてできるだけシンプルにまとめてみました。
より詳しい情報は[Markdown記法 チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)をご参照ください。
なお、本稿の本文との区別のために出力例はすべて引用の形式で表示しています。

## 1. 見出し
```
# 見出し 1
## 見出し 2
...
###### 見出し 6
```

> # 見出し 1
> ## 見出し 2
> ...
> ###### 見出し 6


## 2. 斜体
```
通常：abc123あ
斜体：*abc123あ*
斜体：_abc123あ_
```

> 通常：abc123あ
> 斜体：*abc123あ*
> 斜体：_abc123あ_

## 3. 強調
```
通常：abc123あ
強調：**abc123あ**
強調：__abc123あ__
```

> 通常：abc123あ
> 強調：**abc123あ**
> 強調：__abc123あ__

## 4. 打ち消し
```
~~打ち消し~~
```

> ~~打ち消し~~


## 5. リンク
```
[Qiita](http://qiita.com/)
```

> [Qiita](http://qiita.com/)


## 6. コード
```
短いコードは`code`のように書けます。
```

> 短いコードは`code`のように書けます。


```
```python:sample.py
print('複数行のコードも書けます。ファイル名も書けます。')
```　
```

> ```python:sample.py
> print('複数行のコードも書けます。ファイル名も書けます。')
> ```

## 7. コメントアウト

```
<!--htmlのコメントの記法を使います。-->

<!--
複数行のコメントも
このように書くことができます。
-->
```

> <!--htmlのコメントの記法を使います。-->
>
> <!--
> 複数行のコメントも
> このように書くことができます。
> -->

## 8. 折りたたみ
```
<details>
<summary>ここに要約を書きます。</summary>
要約より後ろの文は折りたたみが
展開されることで表示されます。
</details>
```

> <details>
> <summary>ここに要約を書きます。</summary>
> 要約より後ろの文は折りたたみが
> 展開されることで表示されます。
> </details>


## 9. リスト(点)
```
* りんご
* バナナ
* みかん
```

> * りんご
> * バナナ
> * みかん

```
- 鉛筆
- 消しゴム
- 定規
```

> - 鉛筆
> - 消しゴム
> - 定規

```
+ 自転車
+ タクシー
+ 電車
```

> + 自転車
> + タクシー
> + 電車


## 10. リスト(数字)
```
1. 笑顔で
1. 明るく
1. 大きな声で
```

> 1. 笑顔で
> 1. 明るく
> 1. 大きな声で

## 11. チェックボックス
```
- [ ] タスク1
- [x] タスク2
```

> - [ ] タスク1
> - [x] タスク2


## 12. 引用
```
> 文頭に>を書くことで
> 引用になります。
>> ネストも可能です。
```

> > 文頭に>を書くことで
> > 引用になります。
> >> ネストも可能です。


## 13. 水平線
```
***
---
```

> ---


## 14. 画像埋め込み
```
![代替テキスト](https://hogehoge.png "画像タイトル")
```

> ![代替テキスト](https://qiita-image-store.s3.amazonaws.com/0/45617/015bd058-7ea0-e6a5-b9cb-36a4fb38e59c.png "画像タイトル")


## 15. テーブル
```
| ID | 氏名 | 年齢 |
|:---|---:|:---:|
| 1 | 太郎 | 21 |
| 2 | 次郎 | 18 |
| 3 | 花子 | 16 |
```

> | ID | 氏名 | 年齢 |
> |:---|---:|:---:|
> | 1 | 太郎 | 21 |
> | 2 | 次郎 | 18 |
> | 3 | 花子 | 16 |

なお、より簡単なテーブルの書き方は[こちら](https://qiita.com/Qiita/items/c686397e4a0f4f11683d#%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E8%A8%98%E6%B3%95)で確認できます。


## 16. 数式

```
$2^3$
$A = \\{1, 2, 3\\}$
```
> $2^3$
> $A = \\{1, 2, 3\\}$

```
```math
\left( \sum_{k=1}^n a_k b_k \right)^{!!2} \leq
\left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
```　
```

> ```math
> \left( \sum_{k=1}^n a_k b_k \right)^{!!2} \leq
> \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n > b_k^2 \right)
> ```

なお、詳しい数式の書き方は[Qiitaの数式チートシート](https://qiita.com/PlanetMeron/items/63ac58898541cbe81ada)をご参照ください。


## 17. エスケープシーケンス
```
\# 見出し
\**強調**
\> 引用
\---
```

> \# 見出し
> \**強調**
> \> 引用
> \---


## 18. 注釈
```
　右上に注釈が付きます。[^1]
　[^1]: 注釈内容は書く場所に関わらず記事最下部に表示されます。
```

> 右上に注釈が付きます。[^1]

[^1]: 注釈内容は書く場所に関わらず記事最下部に表示されます。


## 注意点

- 見出しや引用など、記号の前後に半角スペースもしくは改行文字が必要な場合があります。

- Visual Studio CodeやGitHubなどのマークダウン記法とは異なる場合があります。

- その他、一部HTMLタグも使用可能です。
Kibanaの外部からの接続設定

kibanaのserver.hostを修正した際にハマったのでそのメモ。

# 環境
- CentOS 8
- kibana-6.8.8-1

# Kibanaの外部からの接続
デフォルトでは、IPアドレス等でアクセスすると下記の接続拒否エラーが表示される。

```
$ curl 192.168.33.21:5601
curl: (7) Failed to connect to 192.168.33.21 port 5601: Connection refused
```

# 接続設定
## kibana.ymlの更新
外部からkibanaにアクセスできるよう設定更新。

```
$ vi /etc/kibana/kibana.yml
```

server.hostの値を　"0.0.0.0" （もしくはIPに応じた適切な値）に調整

```
#server.host: "localhost"
server.host: "0.0.0.0"
```

## サービス再起動
設定後にサービスを再開

```
$ systemctl restart kibana
```

# ダメな例
## ダブルクォーテーションで括っていない

```
#server.host: "localhost"
server.host: 0.0.0.0
```

## 「:」の後にスペースがない

```
#server.host: "localhost"
server.host:"0.0.0.0"
```
VGG16アーキテクチャについて知りたい情報を１記事で

何だか、なろう系作品の語呂のタイトルになってしまいましたが、VGG16について軽いメモ記事です。

### 経緯

画像認識で使われる代表的なCNNモデルであるVGG16を扱っている中で、

- kerasのmodel.summary()だと、Output Shapeとパラメタ総数は分かるが、フィルタのサイズやストライド、パディングの情報が分からない。後、完全な形での層の重ね方が分からない（活性化関数として何を使っているのか、までは分からない）
- pytorchのprint(model)だと、フィルタのサイズやストライド、パディングの情報は分かり、層の重ね方も詳細に分かるが、Output Shapeやパラメタ総数は分からない

ということで、両者の情報を併せたテーブルがどうしても欲しくなり、作成しました。

テーブルを作成し終わったとき、そもそもVGG16について（How to codeではなく）知りたい情報が1つにまとまっている記事がないかもなと思い、プチ案内板的な役割の記事を作成しようと思い至りました。

### 本題

まず、アーキテクチャの詳細情報について作成したテーブルの1枚絵を載せます。

<img width="591" alt="vgg16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122973/7b42c2ef-5d9b-ade1-737f-16abf35e6a5d.png">

このテーブルでは、前述の通りkerasとpytorchで見られるモデル情報を統合したのに加え、パラメタ総数の計算式の中身を分解して示しました。

基本的には、

パラメタ総数 = インプットチャネルの数 × アウトプットチャネルの数 * フィルタの高さ * フィルタの幅 + バイアスの数(=アウトプットチャネルの数)

で計算されます。

こちらの説明は、名著「ゼロから作るDeep Learning Pythonで学ぶディープラーニングの理論と実装」の第7章に詳しいです。ビジュアルも踏まえて詳しく説明されていますので、ご参考あれ。

[https://www.amazon.co.jp/%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E4%BD%9C%E3%82%8BDeep-Learning-%E2%80%95Python%E3%81%A7%E5%AD%A6%E3%81%B6%E3%83%87%E3%82%A3%E3%83%BC%E3%83%97%E3%83%A9%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0%E3%81%AE%E7%90%86%E8%AB%96%E3%81%A8%E5%AE%9F%E8%A3%85-%E6%96%8E%E8%97%A4-%E5%BA%B7%E6%AF%85/dp/4873117585:title]

これで、kerasとpytorchを行ったり来たり（そんなことをわざわざする人はいないと思いますが。。。）する必要はなくなるはずです。

さらに併せて、ビジュアル化したイメージも載せておきます。

![vgg16_image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122973/914d17e0-db5c-588b-e244-354e231405ed.png)

こちらの画像は、以下記事より拝借させていただきました。

[https://newtechnologylifestyle.net/vgg16originalpicture/:embed:cite]

### 注記

この記事を書いている途中で、torchsummaryというライブラリでOutput Shapeやパラメタ総数を表示できることを知りました。

[https://qiita.com/tatsuya11bbs/items/bfd8f163dd918ea04432:embed:cite]

というわけでpytorchユーザーであれば、難なく詳細情報を知ることができますね。
pythonで認証付きサイトからスクレイピング

##はじめに
pythonで**Digest認証**付きサイトからスクレイピングする方法を紹介したいと思います。（Basic認証とそこまでの差はないのですが。。。）
スクレイピングそのものや，その他の認証に関しては，以下が参考になります。
[Python Webスクレイピング 実践入門] (https://qiita.com/Azunyan1111/items/9b3d16428d2bcc7c9406)
[【Python】Basic認証があるページへのスクレイピング]
 (https://aga-note.com/python-scraping-basic-auth/)



**注意事項**
スクレイピングを行う際には，各種規約やマナーを考慮する必要があります。
[Webスクレイピングの注意事項一覧](https://qiita.com/nezuq/items/c5e827e1827e7cb29011)


##何が必要か？
言語:python 3.7.4
ライブラリ:requests, requests.auth, bs4, urllib.request


##ライブラリインスト―ル
下記の2つをpipコマンドでインストールします。

```
pip install requests
pip install beautifulsoup4
```
インストールが完了したら実践です。

##実践
今回は，以下のサイトの管理者が作成したDigest認証付きWebページのサンプルを，例として利用させて頂きました。
[HTTP クライアントを作ってみよう(6) - Digest 認証編 -]
(http://x68000.q-e-d.net/~68user/net/http-auth-2.html)

```
import requests
from requests.auth import HTTPDigestAuth
from bs4 import BeautifulSoup

#1.WebサイトURLとダイジェスト認証のuserとpass
url = 'http://X68000.q-e-d.net/~68user/net/sample/http-auth-digest/secret.html'
username = 'hoge'
password = 'fuga'

#2.Digest認証付きURLの情報取得
res = requests.get(url,auth=HTTPDigestAuth(username,password))
content = res.content

#3.htmlデータ取得
#全データ
data = BeautifulSoup(content, 'html.parser')
#タイトル取得
title = data.title.string
#本文取得
body = data.body.string
print(title, body)
```

##少し応用
Digest認証付きのURLから直接画像や，Excel等のファイルをダウンロードする場合も一応紹介しておきます。
実際にDigest認証付きのファイルURLが見つからなかったので，方法だけ載せます。

```
import urllib.request
from requests.auth import HTTPDigestAuth
from bs4 import BeautifulSoup

#1.WebサイトURLとダイジェスト認証のuserとpass
url = ******************
username = ******************
password = ******************

#2.Digest認証付きURLのファイル読み込み
#解説１
password_manager = urllib.request.HTTPPasswordMgrWithDefaultRealm()
password_manager.add_password(None, url, username, password)
#解説２
authhandler = urllib.request.HTTPDigestAuthHandler(password_manager)
opener = urllib.request.build_opener(authhandler)
#ファイル内容の読み込み
file_content = opener.open(url).read()

#3.ローカルディレクトリにファイルを保存（エクセルを想定しているので，拡張子xlsx）
path = os.path.dirname(os.path.abspath(__file__)) + '/file.xlsx' 
with open(excel_path, mode="wb") as f:
   f.write(file_content)
   print("保存しました")
```

解説１
Digest認証に必要な情報をパスワード管理オブジェクトの変数に登録します。
*HTTPPasswordMgrWithDefaultRealm()：パスワード管理オブジェクト
*add_password：変数に登録するためのメソッド

解説２
Digest認証付きURLを開く
*HTTPDigestAuthHandler：Digest認証を通すインスタンス作成
*build_opener：認証付きURLを開くインスタンス作成
より詳しく知りたい方は，参考サイトをご覧下さい。

##参考
**スクレイピングにおけるマナー**
[Webスクレイピングの注意事項一覧](https://qiita.com/nezuq/items/c5e827e1827e7cb29011)


**スクレイピング実践**
[Python Webスクレイピング 実践入門] (https://qiita.com/Azunyan1111/items/9b3d16428d2bcc7c9406)
[【Python】Basic認証があるページへのスクレイピング]
 (https://aga-note.com/python-scraping-basic-auth/)


**公式ドキュメント**
[Authentication — Requests 2.23.0 documentation](https://requests.readthedocs.io/en/master/user/authentication/)
[urllib.requestの公式ドキュメント](https://docs.python.org/3/library/urllib.request.html#http-password-mgr)
【PHP初心者】ところでtraitってなに？

PHP初心者ですが、traitというものをちょこちょこ目にするんですが、
意味わからなかったので、簡単にまとめてみました。

#trait(トレイト)
PHPバージョン5.4.0以降で使える、コードを再利用するための機能。
PHPでは多重継承ができないが、`トレイトを使うことで多重継承のようなことができる。`
##トレイトの宣言
```php
    trait トレイト名{
    	// 処理
        // メソッド、プロパティ、staticメンバを定義できる。
    }
```

##トレイトの使い方
```php

    class クラス名{
        // 複数のトレイトを使用する場合は、カンマ区切りで書く
    	use /*トレイト名, トレイト名2*/;
    }
```

**use トレイト名**とすれば、クラスを継承したときのようにトレイトのメンバを引き継ぐ事ができる。
###●継承とトレイトを同時に使い、親クラスとトレイトの両方が持つ同名メンバを呼び出した場合。
`親クラスで定義されているメンバより、トレイトで定義されているメンバが優先される。`
###●あるクラスが複数のトレイトを使い、それら複数のトレイトが持つ同名メンバを呼び出した場合。
**Fatal Errorが発生して、処理が止まってしまう。**
なので、下記の方法で`どちらを使うかを定義しておく必要がある。`

```php

    class クラス名{
        use /*トレイト1, トレイト2*/ {
            // 使用するトレイト名::メソッド名 insteadof 使用されないトレイト名　※トレイト2を使う場合
         トレイト2::メソッド名 insteadof トレイト1;
        }
    }
```
PhpStorm [EA] Please add roave/security-advisories:dev-master into require-dev as a firewall for vulnerable components.

## 背景

PhpStorm で composer.json を開いた際に下記のメッセージが表示されました。

<img width="809" alt="スクリーンショット 2020-04-18 23.11.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/ed674407-ade4-0b2d-1e3a-283ebd1f5b95.png">

```
[EA] Please add roave/security-advisories:dev-master into require-dev as a firewall for vulnerable components.
```

ドキュメントはこちら https://github.com/kalessil/phpinspectionsea/blob/master/docs/security.md#security-advisories
ちなみにこのメッセージはこのプラグインを入れると表示されます。
https://plugins.jetbrains.com/plugin/10215-php-inspections-ea-ultimate-

## Roave/SecurityAdvisories

https://github.com/Roave/SecurityAdvisories

このライブラリは`composer.json`を見てして、依存するパッケージがセキュリティ上問題ないか調べてくれます。
入れておいて損はないようです。

### インストール方法

```
$ composer require --dev roave/security-advisories:dev-master
```

このライブラリはインストールするだけでokです。
特にAPIやコマンドが用意されているわけでもありません。
`composer require`, `composer update` 時に既知の文書化されたセキュリティ問題があるソフトウェアのインストールを防ぎます。
Clean Architectureのサンプルコードの関係性をそのまま可視化してみた

Clean Architectureの説明は理解できるが，サンプルコードを理解しようとしたら，脳がOOMになったので，サンプルコードの対応関係を全部可視化して見てみた，という記事です．

少しでも，Clean Architectureの理解を試みた人の助けになれば嬉しいです．
また，バックエンド初心者なので，間違っているところがあれば，ご指摘お願いします．


## Clean Architectureとは

Clean Architectureについては，たくさんの解説記事があるので，本稿では本当に説明しません．
以下に僕が読んだ中で理解しやすいと感じたClean Architectureの記事のリンクを載せておきます．

- [Clean ArchitectureでAPI Serverを構築してみる](https://qiita.com/hirotakan/items/698c1f5773a3cca6193e)
- [Clean Architecture を用いた go + gin のバックエンド (API) 構築](http://psychedelicnekopunch.com/archives/1308)


## はじめに
先週，突然Goを使ってAPIサーバを作ることになりました．
まず[A Tour of Go](https://tour.golang.org/welcome/1)をやり，次に先人の方々の素晴らしい記事を写経しながら理解して，なんとか開始から2日で Go + Gin + Gorm + JWT でシンプルなAPIサーバを作りました．

https://github.com/tanimutomo/simple-api-server-go

1週間後，次はClean Architectureを使って実装し直す必要が出てきました．
同じように，先人たちのブログ等を読んで写経しつつ理解していこうと，始めました．しかし，2本くらい記事を読んで写経したところで，理解が進んでないことに気づき，このままでは自分で実装することができない，と思いました．Clean Architecture自体の概念は理解できるが，サンプルコードが理解できませんでした．
（僕自身，ほんのこの間までPythonで機械学習の実験コードしか書いたことなかったので，前提知識が明らかにないというのはあります）

そこで，なぜClean Architectureのサンプルコードは写経しても理解できないのか考えてみました．


## なぜClean Architectureのサンプルコードが理解できないか
(あくまで主観です．前提は前章に書いてあります．)

#### Clean Architectureとそうではないコードの実装記事の違い

- Clean Architectureではない実装の記事
    - 処理の流れに対応づけて順々にコードが書かれていく
        - e.g.) Request Handler -> Main Logic -> DB
    - 処理の流れと実装とを対応づけながら書ける(直感的)
- Clean Architectureの記事
    - 処理の流れではなく，各レイヤ (Entity, UseCaseなど) ごとにコードが書かれていく
        - e.g. ) infrastructure (db, router) -> interfaces (controller) -> ...
    - 全て写経しても処理の流れやコードの関係性が比較的わかりにくい (非直感的)
    - とにかくファイル数が多くなる

コードを書く流れや依存関係が，実際の処理の流れと異なるのは，Clean Architectureの依存関係逆転の法則に起因すると思われる．（自信ない）

#### 結論
ファイル数が多いことと，実装の流れが非直感的であることが，理解を難しくする原因ではないかと考えました．


## 全部可視化する
どうしてもサンプルコードの全体像と各コードの関係性を把握したい．
しかし，Clean Architectureの場合，少しの機能のサンプルコードでもファイル数が多いので，

- 脳内だけで処理するにはメモリ不足
- ディスプレイに描画するにも限りがある

となり，
結果的に全てのソースコードを描画して関係性をみてみることにしました．

描画するサンプルコードは[Clean ArchitectureでAPI Serverを構築してみる](https://qiita.com/hirotakan/items/698c1f5773a3cca6193e)で公開していただているものを利用させていただきました．
可視化ツールには， [draw.io](https://drawio-app.com/) を利用しました．

実際の可視化結果は以下です．(QiitaにはPDFはアップロードできなかったので，PNGです)

![clean_architecture_code_relation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224401/66a5d5e8-43f0-90d8-7bfc-f92a9387ff1b.png)

### 説明

- 長方形の領域 : 各レイヤ．Clean Architectureの概念図(よくみるやつ)に色を合わせてある．
- ソースコードの位置 : そのソースコードが属するレイヤ
- 矢印
    - 黒矢印 : importの関係
    - 太いオレンジの矢印 : 処理の流れ
    - ピンクと青の矢印 : 依存関係逆転の法則の関係
- 白枠で囲われているソースコード : 依存関係逆転の法則における"抽象"


## まとめ
Clean Architectureの概念は理解できるが，サンプルコードの理解をすることができなかったので，サンプルコードの全体像とその関係性を可視化してみました．

可視化してみたら，ちゃんとClean Architectureの概念と対応づいていることがわかりました． (そりゃそう)
この図をみながら実装していったら，自分でもClean Architectureっぽい実装ができました．

[clean-architecture-api-go](https://github.com/tanimutomo/clean-architecture-api-go)

最後に，再びになりますが，バックエンド初心者なので，間違っているところがあれば，ご指摘お願いします．
-これからポートフォリオを作成する方へ-　deviseを使用したadminユーザーの作成方法

railsチュートリアルでは、userモデルにadminカラムを追加、し、ユーザーtypeを分けて実装していました。しかし、adminユーザーは通常userと必要な機能が異なる事から、モデルで分けた方が管理しやすく、コードもスッキリします。
そこでdeviseを用いたadminユーザーの作成方法を説明します。

#●実装方法
まず、deviseでadminモデルを作成します。

```ruby
$ rails g devise admin
```

今回、adminユーザーはseed.rbで作成するので、会員登録機能は不要です。なので、adminモデルからregisterabeをコメントアウトします。

```ruby:model/admin.rb
class Admin < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, #:registerable,
         :recoverable, :rememberable, :validatable
end
```

そしてdeviseでuserも作成すると思うので、一工夫加え、ルーティングをわかりやすくします。

```ruby:config/routes.rb
Rails.application.routes.draw do
 
  devise_for :admins, controllers: {
    sessions: "admins/sessions"
  }
  namespace :admins do
    resources :users, only: %i(index destroy)
    resources :questions, only: %i(index destroy)
  end

  devise_for :users, controllers: {
    sessions:      "users/sessions",
    registrations: "users/registrations",
    omniauth_callbacks: "users/omniauth_callbacks"
  }

 resources :questions
```

namespaseを使用し、urlを変更することにより、userとのルーティングをわかり区別することができます。
今回であれば、resouces :questionが被っていますが、namespase :adminを入れることにより
admin側：　/admins/question/:id 
user側：　/question/:id
と、区別することが容易になります。

そして次はadminユーザーを作成します。今回はseed.rbを利用し作成します。

```ruby:db/seed.rb
Admin.find_or_create_by(id: 1) do |admin|
  admin.email = "example@example.com"
  admin.password = "example"
end
```

こうして、rails db:seedとすることでadminユーザーを作成することができます。
作成できたかどうかは、rails c　で確認すると良いでしょう。

ちなみにここで記載されているfind_or_create_by(id :1)というのは、id:1をまずfindする。なければcreateするという意味です。adminユーザーを重複して作成してしまうことを防ぐ事ができます。

#●まとめ
・adminユーザーは別モデルで管理すると良い
・namespaceを利用しルーティングを管理すると、userとの違いがわかりやすくなる
・db:seedを利用しadminユーザーを作成する。find_or_create_byを用いる事で、重複登録を防ぐ。

後は自分の好きなように管理ユーザーの機能を作成してください！以上です！
【CentOS8】日本語入力ができないときの対処方法

#環境
CentOS8はWindows10上で仮想マシンをたてて、そこにインストールして使う前提。

#問題
CentOS8で日本語を入力できない。
(OSインストール時にはキーボードも日本語にしたし、言語やロケールも日本語に設定した。表示(出力側)自体は日本語になっている)

#解決方法
###手順
1.　まず「設定」を開き、「Region & Language」を開く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424306/c4cdf0aa-3128-9fc1-4dfd-a55cb70472cf.png)
設定画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424306/9327fce6-ff36-ae9b-4681-5c342da61465.png)


2.　入力ソースの項目があるので「+」ボタンを押す。
すると入力ソースの言語一覧が出てくるので「日本語」を押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424306/c6ee3b59-e332-730a-1908-9f230f175802.png)


3.　「日本語」を押してみてチェックが着くだけ　or　日本語の入力ソース一覧が出てくるが、「日本語(かな漢字)」がない場合は次の手順に移る。
日本語の入力ソース一覧が出て「日本語(かな漢字)」があれば手順7に移る。
※開いた時の入力ソース一覧のイメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424306/6f233c4d-9603-8998-4451-f4765b80777c.png)


4.　ターミナルを開いて下記のコマンドを実行し、日本語入力に必要なパッケージをインストールする。
インストールしてる物の詳細については後ろの方で言及します。

```
# dnf -y install libkkc libkkc-data ibus-kkc 
```

必要なものがインストールされて、最後に「完了しました!」となればOK。

```

・・・（中略）・・・

インストール済み:
  ibus-kkc-1.5.22-9.el8.x86_64               libkkc-0.3.5-12.el8.x86_64        
  libkkc-data-1:0.2.7-12.el8.x86_64          libgee-0.20.1-1.el8.x86_64        
  libkkc-common-0.3.5-12.el8.noarch          marisa-0.2.4-36.el8.x86_64        
  skkdic-20170102-4.T1100.el8.noarch        

完了しました!
```

※実は実施1回目にインストール中にGPGキーが設定されていないとか何とかと言われ、インストールに失敗した。その件については別の記事でとりあげようと思う(需要なさそう…)


5.　再起動する。

6.　再度手順1と2を行って「設定」の入力ソース一覧を開く。

7.　入力ソースの言語一覧の「日本語」を押して、日本語の入力ソース一覧を開いたら「日本語(かな漢字)」を選択し、「追加」ボタンを押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424306/3a0c0633-5eb6-d947-4331-94893099acb0.png)

8.　「Region＆Language」メニューに戻ったら、入力ソースに追加された「日本語(かな漢字)」を選択状態にし、「設定」を閉じる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424306/83ffa0d5-27fa-db73-be01-6e943edeff17.png)

これでSuper(WindowsならAlt横のWinキー)＋spaceキーを押せば日本語入力できるようになるはずです。
日本語入力モードに変えるときのショートカットキーを変更したい場合は次の手順に進みます。

9.　「設定」を開いて「デバイス」を開く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424306/bc9ee4b3-a5ce-dea2-8b30-c423d8895234.png)

10.　「keyboad」を開く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424306/94614776-756d-a0c3-a8f3-a9378b926376.png)

11.　「タイピング」の項目の「次の入力ソースへ切り替える」を押し、自分の好みのキーの組み合わせを押す。自身は「半角/全角」を設定した。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424306/857f31ac-f458-dc36-dbfc-add377695a8a.png)



###インストールしたものについて
今回はkkc(かなと漢字の変換を行うシステム)とibus(様々な言語入力を可能にするシステム)を導入することで日本語入力を可能にしようとしたため、、そのために必要なライブラリ（libkkc、ibus-kkc、libkkc-dataなど）をインストールした。

####そもそもkkcとかibusって何？…
・libkkc (Japanese Kana Kanji conversion library)：
kkcはKana Kanji conversionの略で、かな・漢字間の変換をサポートするシステム。libkkcはそのライブラリ。
・ibus-kkc (Japanese Kana Kanji input method for ibus)：
ibusというのは色々な言語の入力を可能にするシステム。ibus-kkcはibus用のkkcということで、日本語版IMEといったところか。


#参考にさせていただいたサイト
・インストールする物について参考にした
https://ufuso.jp/wp/漢字入力ができないとき%EF%BC%88centos-8%EF%BC%89/
・kkcや入力メソッドについて
https://www.ospn.jp/osc2016-kyoto/pdf/OSC2016_Kyoto_openmanyo.pdf
・ibusについて：
https://wiki.archlinux.jp/index.php/IBus
【Swift】Compile Error : class has no initializers

~~~LOGU:ERROR
class has no initializers
~~~

# はじめに
バージョンアップの際に驚いたのがこのエラーが出やすくなってる？ってことで徐々にエラーが出れば記載していきたいと思います
Swift を扱っているといろんなコンパイルエラーがあるので、ちょこちょこと調べたりってのを残していきますね。

表題のエラーについて

~~~Swift:
class HogeClass: NSObject {
    var hoge: HogeClass
}
~~~

これを書いていると 表題のエラーが出る。

これは、ちゃんと初期化されてないよ〜って教えて〜くれています。

~~~Swift:
class HogeClass: NSObject {
    var hoge: HogeClass!
}
~~~

or 

~~~Swift:
class HogeClass: NSObject {
    var hoge: HogeClass?
}
~~~

Swift になってから 初期設定をしていないとか nil で扱うのかを具体的にしなくてはならないないんだなって印象ですね。

Swiftには、オプショナル（Optional）型というnilを許容できる変数を使うことができるようですね。

オプショナルの考えなども Swiftの特徴だと思うので調べてみましょう。

## 関連記事

【About】(http://qiita.com/sunstripe) - サンストライプ

---

## 制作チーム：サンストライプ

[![sunstripe_logo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80600/322f2d60-f19d-af9e-2b6f-7290ca546848.png)](http://sunstripe.main.jp/)
http://sunstripe.main.jp/

(月１WEBコンテンツをリリースして便利な世の中を作っていくぞ！！ボランティアプログラマー/デザイナー/イラストレーター/その他クリエイター声優募集中！!)

### 地域情報 THEメディア
THE メディア 地域活性化をテーマに様々なリリース情報も含め、記事をお届けしてます！！
https://the.themedia.jp/

### ゼロからはじめる演劇ワークショップ
多様化の時代に向けて他者理解を鍛える

https://workshop.themedia.jp/

### プログラミングワークショップ・ウェブ塾の開講！！！
様々なテーマでプログラミングに囚われずに取り組んでいきます。
詳しくはこちら　↓　↓　↓　↓　↓　↓　↓　↓
[プログラミングサロン 月１だけのプログラミング学習塾](https://workshop.themedia.jp/posts/7057553?fbclid=IwAR32CfRQ7RvDOhvuogoSwqxDLMOU7Jvuzljlnx-TMc27qBPX1BnWsfLcBR8
)

### 協力応援 / 支援者の集い
## チーム：サンストライプ
#### プログラミングラボ
https://twitter.com/sunstripe2011

一緒にポートフォリオを作りませんか？現場の体験やそれぞれの立場から年齢関係なく作品を作りたい方々と一緒にチームを作って、作品を作っています。現場に行きたい人には、職場紹介や職場の体験や悩み相談なども受けております。
様々な職種からプログラミングの知識を得たい、デザインの知識を得たい、データーベースの知識を得たいという人が集まっております。
週１のミーティングにそれぞれの近況と作業報告して、たまにリモート飲み会などをしております！！

興味がある方は、DMに話しかけてみてください。

## トラストヒューマン
http://trusthuman.co.jp/
私たちは何よりも信頼､人と考えてます｡

｢コンサルティング｣と｢クリエイティブ｣の両角度から｢人材戦略パートナー｣としてトータル的にサポートします！！

キャリア教育事業
広域学習支援プラットフォーム『のびのび日和』
https://slc-lab.amebaownd.com/

#スポンサー募集


## ネリム
https://nerim.co.jp/
配信事業などを映像コンテンツなどの制作しております

## ビヨンドXプロジェクト

[ビヨンドXプロジェクト全体会議](https://www.youtube.com/playlist?list=PLaR6-YWiGWkYhEHWnt8f1z-JC0g3nwwC9)
scanpyのデータ統合関数(sc.tl.ingest)を使ってみる

##※2021年5月24日追記
東京大学定量生命科学研究所 大規模生命情報解析研究分野の中戸先生の研究室がホームページでscanpyのチュートリアルを和訳されたものを公開されていらっしゃいます。(seuratとvelocityもありました。)
チュートリアルの具体的な中身についてはそちらを参考にされるのが良いと思います。下記にURLを記載します。

https://singlecellanalysistutorial.readthedocs.io/en/latest/


##scanpyとは
[scanpy](https://scanpy.readthedocs.io/en/latest/)はscRNA-seqのデータ解析をpythonで行うツールです。Rの[seurat](https://satijalab.org/seurat/)を用いる人も多いかもしれませんが、scRNAseqのデータ解析をpythonでやりたいという人もたくさん一定数いるのではないでしょうか。そんな人に答えるツールです。
最近~~(半年ぐらい前に)~~そのscanpyにデータの統合を行うチュートリアルができました。(2020/04/18現在)

##Scanpyにデータ統合が実装
上にすでに書いたように、scanpyのバージョン1.4.5からsc.tl.ingestという関数が実装されリファレンスとなるデータに、新しく取ったデータを統合できるようになりました。チュートリアルもすでにあります。(Integrating data using ingest and BBKNN:https://scanpy-tutorials.readthedocs.io/en/latest/integrating-data-using-ingest.html)

すごい！使いたい！

という人もたくさんいると思います。
しかし以下のようにcondaを用いてインストールをしようとすると

```.sh
$ conda install -c bioconda scanpy
```
```
Collecting package metadata (repodata.json): done

(中略)

The following NEW packages will be INSTALLED:
  scanpy             bioconda/noarch::scanpy-1.4.3-py_0
```
と表示されてしまいます。このままインストールしてもscanpy-1.4.3がインストールされてしまい、(せっかくチュートリアルまであるのに!)データ統合の関数を使うことができません。

そのうちcondaのbiocondaでもscanpy1.4.5より上のバージョンに更新されると思いますがせっかくなので一足先に使ってみましょう。

##scanpyの最新バージョンをpip installする
**[注意!]**
**condaとpipは混ぜてはいけない！**という主張があります。(混ぜても実は平気だよという主張もあリますが...)以下、**自己責任**でお願いします。

scanpyのホームページ(https://scanpy.readthedocs.io/en/latest)
をみてみると最新のバージョンは1.4.6のようです。
なのでscanpy-1.4.6をpip installしてみましょう。

```.sh
$ pip install scanpy=="1.4.6"
```

```
Collecting scanpy==1.4.6

(中略)

Successfully installed anndata-0.7.1 h5py-2.10.0 matplotlib-3.2.1 scanpy-1.4.6
```
無事にpip installがうまく行きましたね。

##バージョンの確認
しかし、安心するのはまだ早いです。
念のため、pythonから本当に1.4.6がinstallされているのか確認してみましょう。

```.py
import scanpy as sc
sc.logging.print_versions()
>scanpy==1.4.6 anndata==0.7.1 umap==0.3.10 numpy==1.17.4 scipy==1.4.1  pandas==1.0.3 scikit-learn==0.22 statsmodels==0.10.1 python-igraph==0.7.1 louvain==0.6.1
```

無事にscanpyのバージョン1.4.6はインストールされているようです。

しかし、統合する関数を実際に使ったときにエラーが出るかもしれません。
チュートリアル（https://scanpy-tutorials.readthedocs.io/en/latest/integrating-data-using-ingest.html)
に沿って進めていきます。

```.py
(中略)
sc.tl.ingest(adata, adata_ref, obs='leiden')
>running ingest
    finished (0:00:06)
```
データの統合関数もうまく働きました！(他にもこの記事では触れていませんがbbknn法を用いて統合することもできます。)

この関数を用いて統合した後、可視化するとreferenceと新しいデータのbatch effectの重なり具合なんかも見れちゃいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467630/c1c5b7a6-040e-0ef7-1e44-28a3a9952ecf.png)
引用:https://scanpy-tutorials.readthedocs.io/en/latest/integrating-data-using-ingest.html


##最後に
解析をするときにいつも思うのがバイオインフォマティクスというのはどんどんいろいろなツールが出てきて、それらを使うととりあえずそれっぽい結果が出てしまう分野でもあると思います。今回は統合の確からしさというのは検証していませんが、そういうところもしっかり学んでいきたいと思います。
誤りやアドバイスがありましたらご指導いただけると大変助かります。


##参考文献
1,Seurat:https://satijalab.org/seurat/
2,Scanpy:https://scanpy-tutorials.readthedocs.io/en/latest/integrating-data-using-ingest.html
3,conda と pip でのパッケージ管理について:https://qiita.com/ynakayama/items/29efebeb38604d10acef
CentOS7上でRailsのsecret_tokenがセット出来ない問題の対処方法

#前提
* OS:

```
$ cat /etc/redhat-release
CentOS Linux release 7.5.1804 (Core)
```
* rubyはSCLリポジトリよりインストールされている
* `nokogiri-1.10.1`がインストールされている(以下のコマンドでインストール)

```
$ gem install nokogiri -- --use-system-libraries
```

* railsプロジェクト内のGemfileを使用し`bundle install` した場合 `Fetching nokogiri 1.8.1` をしていることを確認
* `gem list` を確認した場合 `nokogiri (1.10.1)` となっていることを確認

#エラー内容

```
$ export SECRET_KEY_BASE=`bundle exec rake secret`
bundler: failed to load command: rake (/home/centos/coin_stats/vendor/bundle/ruby/2.4.0/bin/rake)
Bundler::GemNotFound: Could not find nokogiri-1.8.1 in any of the sources
  /home/centos/.gem/ruby/gems/bundler-2.0.1/lib/bundler/spec_set.rb:87:in `block in materialize'
  /home/centos/.gem/ruby/gems/bundler-2.0.1/lib/bundler/spec_set.rb:81:in `map!'
  /home/centos/.gem/ruby/gems/bundler-2.0.1/lib/bundler/spec_set.rb:81:in `materialize'
  /home/centos/.gem/ruby/gems/bundler-2.0.1/lib/bundler/definition.rb:170:in `specs'
  /home/centos/.gem/ruby/gems/bundler-2.0.1/lib/bundler/definition.rb:237:in `specs_for'
  /home/centos/.gem/ruby/gems/bundler-2.0.1/lib/bundler/definition.rb:226:in `requested_specs'
  /home/centos/.gem/ruby/gems/bundler-2.0.1/lib/bundler/runtime.rb:108:in `block in definition_method'
  /home/centos/.gem/ruby/gems/bundler-2.0.1/lib/bundler/runtime.rb:20:in `setup'
  /home/centos/.gem/ruby/gems/bundler-2.0.1/lib/bundler.rb:107:in `setup'
  /home/centos/.gem/ruby/gems/bundler-2.0.1/lib/bundler/setup.rb:20:in `<top (required)>'
  /opt/rh/rh-ruby24/root/usr/share/rubygems/rubygems/core_ext/kernel_require.rb:55:in `require'
  /opt/rh/
```

#エラー解決
##原因仮説
エラー文より、`rake`コマンドがロード出来なかった模様。
なぜ出来なかったか？はおそらく `nokogiri-1.8.1` を`rake`コマンドが必要としているから。
前提の内容より、`nokogiri`は`1.10.1`がインストールされており、ここが問題となっていると見える。

##仮説検証
実際に`rake`コマンドを実行してみる。

```
$ /home/centos/coin_stats/vendor/bundle/ruby/2.4.0/bin/rake
Could not find nokogiri-1.8.1 in any of the sources
Run `bundle install` to install missing gems.
```

##検証結果
検証した結果、やはり`rake`コマンドは`nokogiri-1.8.1`を必要としている。
`nokogiri-1.8.1`を入れてあげられると問題が解決しそう。

##解決方法
確認したところ`bundle`で既に`nokogiri-1.8.1`が存在していたため、こちらを見るように調整してあげる。

```
$ vendor/bundle/ruby/2.4.0/gems/
actioncable-5.1.4/               mysql2-0.4.10/
actionmailer-5.1.4/              nio4r-2.2.0/
actionpack-5.1.4/                nokogiri-1.8.1/
```

```
$ gem uninstall nokogiri -v='1.10.1'
gem uninstall nokogiri -v='1.10.1'

You have requested to uninstall the gem:
	nokogiri-1.10.1

loofah-2.2.3 depends on nokogiri (>= 1.5.9)
rails-dom-testing-2.0.3 depends on nokogiri (>= 1.6)
sprockets-3.7.2 depends on nokogiri (~> 1.3, development)
If you remove this gem, these dependencies will not be met.
Continue with Uninstall? [yN]  y
Remove executables:
	nokogiri

in addition to the gem? [Yn]  y
Removing nokogiri
Successfully uninstalled nokogiri-1.10.1
Note==============
依存関係のgemがあると警告されますが、無視してyを連打します。
==================
$ gem install nokogiri -v="1.8.1"
```

#参考
##gem uninstall
http://d.hatena.ne.jp/atelier-shin/20110223/1298436112
Windows7 PCに4KでRDP接続する方法

# 概要
本稿では、いまどきのPC (Windows10を想定) に4kモニタが接続され、そこから Windows7のPCにRDPする際に4Kで接続する方法を説明します。
Windows7はデフォルトで4Kの3840×2160に対応しておらず3840×2048が上限となっており、全画面でRDPすると画面の上部に黒い帯が表示されてしまいます。

# 手順
接続先PC (Windows7) で Windows Updateした後で、以下のUpdateを実施。（最低でもSP1が必要）

- [KB2574819](https://www.microsoft.com/ja-JP/download/details.aspx?id=35388) をインストール
- [KB2592687](https://www.microsoft.com/ja-JP/download/details.aspx?id=35387) をインストール
- [KB2830477](https://www.microsoft.com/ja-jp/download/details.aspx?id=40986) をインストール

さらに、ポリシーのアップデートでRDP8を有効化する。

- gpedit.mscを起動
- ナビゲーションペインから[管理用テンプレート - Windowsコンポーネント - リモートデスクトップサービス - リモートデスクトップ セッションホスト - リモート セッション環境]を選択
- [リモートデスクトップ プロトコル8.0を有効にする]を有効化
- 再起動

これで環境設定は完了です。

# 補足
gpeditでの設定はRDP8.0限定でありRDP8.1では関係ないという噂もありますが、私が検証した限りではgpeditで設定しない限り4KでRDPはできませんでした。
また、今回の検証は、接続先としてWindows7 64bit、接続元にはWindows10 64bitで行いました。これ以外の環境では結果は異なる可能性があります。
Cent8にOpenMeetingsをインストールする。

COVID-19のためリモートワーク。

でもリモートで作業する先は、インターネットとはつながらないから環境で、VPNで接続が可能なだけ。
もちろんzoomもTeamsも使えない。

なのでローカルで利用できるTV会議システムを試験。

※BigBlueButtonも試してみたけど、Flashだったので会社的にNGでOpenMeetingsを選択。



sudo dnf-3 install -y https://dl.fedoraproject.org/pub/epel/epel-release-latest-8.noarch.rpm
sudo dnf-3 install https://download1.rpmfusion.org/free/el/rpmfusion-free-release-8.noarch.rpm

echo user ALL=(ALL:ALL) ALL >> /etc/sudoers

SELINUX=enforcing
SELINUX=permissive

shutdown -r now

sudo dnf-3 install -y java-11-openjdk-devel

cd /opt
sudo curl -skO ftp://mirror.7he.at/pub/tdf/libreoffice/stable/6.4.3/rpm/x86_64/LibreOffice_6.4.3_Linux_x86-64_rpm.tar.gz
sudo tar zxvf LibreOffice_6.4.3_Linux_x86-64_rpm.tar.gz
sudo dnf-3 localinstall -y LibreOffice_6.4.3.2_Linux_x86-64_rpm/RPMS/*

sudo dnf-3 install -y libjpeg libjpeg-devel freetype freetype-devel unzip gcc gcc-c++ ncurses ncurses-devel make zlib zlib-devel libtool bison openssl-devel bzip2 bzip2-devel file-roller git autoconf automake pkgconfig nmap vlc

sudo dnf-3 install -y ghostscript

sudo dnf-3 install -y ImageMagick giflib
sudo dnf-3 install -y sox

sudo dnf-3 config-manager --set-enabled PowerTools
sudo dnf-3 config-manager --set-enabled epel-playground
sudo dnf-3 install -y ffmpeg

sudo dnf install -y mariadb-server
sudo systemctl start mariadb.service

sudo mysqladmin -u root password new-password
sudo mysql -u root -p

CREATE DATABASE open503 DEFAULT CHARACTER SET 'utf8';
GRANT ALL PRIVILEGES ON open503.* TO 'root'@'localhost' IDENTIFIED BY 'centos' WITH GRANT OPTION;
quit

 open503 ............. name of the database
 root ............. user for that database
 centos ...… password of that user

sudo curl -skO https://ftp.riken.jp/net/apache/openmeetings/5.0.0-M3/bin/apache-openmeetings-5.0.0-M3.tar.gz
sudo tar zxvf apache-openmeetings-5.0.0-M3.tar.gz
sudo mv apache-openmeetings-5.0.0-M3 open503


sudo curl -skO https://repo1.maven.org/maven2/mysql/mysql-connector-java/8.0.19/mysql-connector-java-8.0.19.jar
sudo cp /opt/mysql-connector-java-8.0.18.jar /opt/open503/webapps/openmeetings/WEB-INF/lib 

sudo curl -skO https://cwiki.apache.org/confluence/download/attachments/27838216/tomcat3
sudo cp tomcat3 /etc/init.d/
sudo chmod +x /etc/init.d/tomcat3

sudo systemctl restart mariadb.service
sudo /etc/init.d/tomcat3 start

sudo firewall-cmd --add-port=5443/tcp
sudo firewall-cmd --add-port=5443/tcp  --permanent
paginateに条件を加える

特定のデータをページネーションで表示させるためにいろいろと調べたのでメモ

##いつもの
ページネーションの例に載っているような使い方だと

```ruby:Gemfile
gem 'will_paginate',           '3.1.6'
gem 'bootstrap-will_paginate', '1.0.0'
#=> bundle install実行
```
まずは`Gemfile`に追加した後コマンド実行。
コントローラで`インスタンス変数.paginate`と追加。

```ruby:words_controller
def index
  @words = Word.paginate(page: params[:page], per_page: 10)
end
```

wordsテーブルにあるすべてのデータをページネーションとして表示させるならあとはビューに
`<%= will_paginate @words(@wordsはどっちでも可) %>`
を置くだけで準備完了です。
##本題
条件を何も指定していないページネーションだとテーブルの全データ表示になるので、
`per_page: 10`
とか一ページにいくつ表示するかを指定しても、内部では全データを表示した前提での指定数を表示します。
###例
例によってwordsテーブルのcompleteカラムがtrueのページネーションとfalseのページネーションを作りたいと思います。
trueの値のデータが15個、falseの値のデータが10個あったとします。


```ruby:words_controller
def index #(trueのページネーションづくり)
  @words = Word.paginate(page: params[:page], per_page: 10)
end

def practice #(falseのページネーションづくり)
  @words = Word.paginate(page: params[:page], per_page: 10)
end
```
先ほどと同様のメソッド内容で実験。
仮にデータの値の順番`(id:1~)`が`t,f,t,f,t,f,...(t=true,f=false)`と交互だとすると、trueのページだと一ページ目には10個表示されるはずが5つしか表示されません。falseのページも同様の結果です。
これは`Word.all`をページネーションするため変換したのが`Word.pagenate`となっているからです（私調べ）。
trueのみが表示されるページでも内部では表示されないfalseの数も含まれているため、5つしか表示されなかったんですね。

メソッド内変更

```ruby:words_controller
def index #(trueのページネーションづくり)
  @words = Word.paginate(page: params[:page], per_page: 10).where(complete: false)
end

def practice #(falseのページネーションづくり)
  @answers = Word.paginate(page: params[:page], per_page: 10).where(complete: true)
end
```
これでtrueならtrueだけで数がカウントされます。falseも然り。
【Rails】各タグごとのクラスやその他メソッドの記述の仕方

# 【Rails】各タグごとのクラスやその他メソッドの記述の仕方
## この記事のゴール
・Railsのタグにおけるクラスの定義の仕方をインプットする

### Link_toタグ
```:html.erb
<%= link_to 'リンクに表示する文字列', @モデル名など, class: "btn" %>
```

### text_fieldタグ
```:html.erb
 <%= f.text_field :title, class: "hogehoge" %>
```

### text_areaタグ
```:html.erb
<%= f.text_area :content, class: "hogehoge",placeholder: "内容を投稿する" %>
```

### link_to(deleteメソッド)タグ
```:html.erb
<%= link_to(content_tag(:i, 'Destroy', class: 'far fa-edit'), post_path(post), :method => :delete) %>
```
【質問】フリマアプリの販売管理の仕組み構築に関して

初めての投稿です！
開発に関しては初心者で、現在勉強中のものです。

タイトルにある件で質問させていただきたいのですが、
メルカリやラクマ、ヤフオク、paypayフリマなど、フリマアプリの一括販売管理をしたいと思っています。

元々は職歴としてアパレルECの業界に携わっていたのですが、
アパレルブランド用には在庫管理ツールがいくつもあるので、
今回個人的に使えるような仕組みが作れないかと思い、考えております。

超ど素人なので全く知識がなく恐縮なんですが、
①販売中・売り切れがぱっと見でわかる
②通知がくる
まずはこの二つがしたいことです。

スプレッドシートで管理、Slackで通知受け取るとかそういったものでも問題ないので、
やり方を教えていただければと思っております。

※将来的には出品管理

ちなみに1点懸念としまして、
過去に一括で出品から売上管理までできるようなアプリもあったようなのですが、
現在はないようです。
※何か問題があるので作成すること自体がダメなのでしょうか、、、？

目的は私個人の販売管理や効率化の部分なので、
そういった問題ない範囲でできたら嬉しいなと思っております。

心お優しい方、ご教示いただけますと幸いです。
よろしくお願いいたします。
github自分の備忘録

#GitHubの自分用備忘録

###ssh(Secure SHell)の公開鍵と秘密鍵を生成するLinuxコマンド
これで生成した公開鍵をGitHubに登録しておく
`ssh-keygen -t rsa -b 4096 -C "your_email@example.com"`


###現在のディレクトリをリポジトリにする
`git init`

###//指定されたディレクトリになる元のリポジトリをコピーする
`git clone git@github.com:【ユーザー名】/【リポジトリ名】.git`

###生成した鍵の場所へ移動して所有者のみの読み書き権限を秘密鍵に与える
`cd ~/.ssh
chmod 600 秘密鍵の名前`

###ssh-agent起動
```eval `ssh-agent` ```

###ssh-agentに秘密鍵を登録しておく
`ssh-add ~/.ssh/秘密鍵の名前`

###登録できたか確認
`ssh-add -l`

###githubと疎通出来たか確認
`ssh -T git@github.com`

###指定したファイルやディレクトリをaddする
`git add ファイルやフォルダ名`

###ディレクトリ内にある物をすべてadd
`git add --all`

###現在の状態を確認
`git status`

###commitする
`git commit -m "first commit"`

###masterブランチからpush
`git push -u origin master`
[Swift]ToDoアプリ作成時に疑問に抱いた６つのこと

#動機
[このページを参考](https://qiita.com/airhiro25/items/dbcf0c3b2c5c2164a8d6)にToDoアプリの作り方を学びました。アプリは完成しましたが、理解できない部分があり独自に調査しました。

##「Table View Controller」とは
###「Table View Controller」の特徴
1. 固定サイズのテーブルが画面いっぱいに準備されている（テーブルのサイズ変更不可）
2. AutoLayoutの設定やデリゲートなどの実装済
3. StaticCellが使える
4. キーボードを表示する時、入力欄が隠れないように自動的にスクロールする

###「Table View（とTable View Cell）」と「Table View Controller」の違い
- 画面の一部だけテーブルを表示したいとき　→ **「Table View（とTable View Cell）」**
- 画面全体にテーブルを表示したいとき　　　→ **「Table View Controller」**

このようにテーブルビューを作成する際、使い分ければいい！




##「init("変数":"型"){}」とは
指定イニシャライザ（Designated Initializer）です。
###イニシャライザとは
構造体とクラスで初期化するためのメソッドです。インスタンス毎に異なる値を使って実装するときに用います。

###指定イニシャライザ（Designated Initializer）とは
>
- 必須のイニシャライザ
- 全てのストアドプロパティを初期化する
- 継承している場合は、初期化後にスーパークラスの指定イニシャライザを呼ぶ<br>
引用元：[Swiftとイニシャライザ](https://qiita.com/shtnkgm/items/8b7979fc84a3cc065238)


##「tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int」とは
>
UITableView に表示したいセルの数を教えるためのメソッドです。
引用元:[Swift – UITableViewの基礎を学ぼう](https://weblabo.oscasierra.net/swift-uitableview-1/)

##「tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCella」とは
>
セルを生成して返却するメソッドで、セルの数だけ呼び出されます。 このメソッド内の最初の処理で、セル自体を生成しています。
引用元:[Swift – UITableViewの基礎を学ぼう](https://weblabo.oscasierra.net/swift-uitableview-1/)


##「dequeueReusableCell」とは
>
再利用可能なcellがあればそれを、なければ新しく作成したcellを返します。再利用可能なcellは、reuseIdentifierに紐づけられたreuse queueに格納されています。
引用元:[UITableViewCellの再利用を知る](https://medium.com/@shiba1014/uitableviewcell%E3%81%AE%E5%86%8D%E5%88%A9%E7%94%A8%E3%82%92%E7%9F%A5%E3%82%8B-24f00d68f17d)


##「.none」とは
nilを表している

#参考サイト一覧
- 「Table View Controller」について
 - https://tech.pjin.jp/blog/2016/08/05/tableview-1/
 - https://qiita.com/okyawa/items/79c5eb1e5c568fb825d4
- 「init("変数":"型"){}」について
 - https://qiita.com/shtnkgm/items/8b7979fc84a3cc065238
- 「tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int」と「tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCella」について
 - https://weblabo.oscasierra.net/swift-uitableview-1/
- 「dequeueReusableCell」について
 - https://medium.com/@shiba1014/uitableviewcell%E3%81%AE%E5%86%8D%E5%88%A9%E7%94%A8%E3%82%92%E7%9F%A5%E3%82%8B-24f00d68f17d
- 「.none」について
 - https://developer.apple.com/documentation/swift/optional/none
ログイン機能なしで投稿サイトを作る(概論)

#目的
今回はタイトルの通り「ログイン機能なしで投稿サイトを作る」方法と、注意点について話します。

#概要
1. なぜログイン機能をつけたくないのか？
2. ログイン機能の存在意義は？
3. 投稿の削除、編集機能はどうする？
4. いいね機能はどうする？

#1. なぜログイン機能をつけたくないのか？
人それぞれではありますが、ログイン機能を付けたくない理由はいくつかあると思います。自分はwebサイトを作った際、要らないなと思いました。その理由は単純で、「ユーザーにとって面倒くさい」からです。

ユーザーの視点に立ってみてください。単なる個人サイトなのに、わざわざログインして、さらにメルアドまで書かなくちゃいけないなんて、億劫だし登録をためらってしまいませんか？(´；ω；`)

誰でも自由に投稿できるサイトだと、その点利用するハードルが一気に下がるはずです。

#2. ログイン機能の存在意義
そもそも、ログイン機能はなぜ存在するのでしょうか？wikipediaに下記のことが書いてありました。

**「ログイン(英: log in)とは、コンピュータの利用開始時にユーザーの身元や妥当性を識別してさまざまなリソースへのアクセスに必要な資格情報を取得するための操作のことである。」**

主な理由はセキュリティというわけです。確かに、何らかの契約をするような場面においては、身元や資格を確実に押さえないと後で大変なことになりますよね。

また、ログイン機能によってユーザー情報を集めるという目的もあるかと思います。実際ほとんどの企業のwebサービスには、ログイン機能が実装されています。

ただ、上記2つの理由は、将来的に大きくなる(商機につながる)場合を除いて、個人の投稿サイトにおいてはあまり意味を為さないと思います。

しかし、ログイン機能のおかげで他の様々な機能を容易に作ることができます。なぜなら、ユーザーを一意に識別できるためです。例えば、投稿の削除・編集の権限を制限する、投稿に対するいいねを1回しか押せないようにする、といった仕様を簡単に作成することができます。また、DM機能などで、ユーザー同士がつながる機会も実装できますね！個人でwebサイトを作る際には、これらのメリットが大いに活躍してくれます。

だけれど、やはり誰でも自由に投稿できるサイトを作りたいと思う理由もしっかりあるわけです。

#3. 投稿の削除・編集機能
万が一、誤った情報やまずい情報を投稿してしまう場合に備えて、これらの機能は欲しくなるはずです。しかし、ログイン機能が無ければ、投稿ユーザーを識別できず、誰でも自由に他人の投稿をいじることができてしまいます。これを解決するには簡易的にパスワード機能を付けると良いでしょう。以下を参考にしてみてください。

**簡易パスワード機能**
https://qiita.com/MandoNarin/items/411f33c94eaa7cae7cc3

#4. いいね機能
投稿内容を評価するためにいいね機能が欲しくなるかと思います。しかし、ログイン機能が無ければ、ユーザーを識別できず、1人が1つの投稿に対して無限回いいねを押せてしまいます。これでは、正当に評価ができません。これを解決するにはユーザーをある程度識別できる情報を利用する必要があります。一例としてIPアドレスを用いる方法があります。以下を参考にしてみてください。

**ログイン無しでもいいね機能を利用できるようにする**
https://qiita.com/MandoNarin/items/c4e310e2501a5dd58268
Xcode 行結合・行追加のキーバインド（ショートカットキー）を設定する

# はじめに

Xcodeのエディタに**行結合**と**行追加**の機能が無いことに、長く不便を感じていました。ネットでいろいろ探したのですが、結局、**行結合**を見つけることが出来ませんでした。仕方ないので、自分で試行錯誤の結果、それなりに実用に耐えるキーバインドができたので、ここに開示します。
_**行追加**の方は何件かネットで探すことが出来たので、その内容を一緒に書いておきます。_

この内容は`Xcode version 11.4.1 (11E503a)`で動作確認しました。


# キーバインド情報の設定方法

```xml
<key>Custom Key Bind</key>
    <dict>
    <key>Join Below Line (Custom)</key>
    <string>moveToBeginningOfLine:, moveDown:, deleteBackward:</string>
    <key>Continue Newline (Custom)</key>
    <string>moveToEndOfLine:, insertNewline:</string>
    </dict>
```

`Custom Key Bind`、`Join Below Line (Custom)`、`Continue Newline (Custom)`は単なる識別子ですので、お好みの名称に変更してもOKです。

次に、ファイル `/Applications/Xcode.app/Contents/Frameworks/IDEKit.framework/Versions/A/Resources/IDETextKeyBindingSet.plist` を適当なエディタで開いて、上記の設定情報をファイル最下部に追加してください。（XMLの閉タグの整合性に注意してください。）
なお、このファイルは管理者権限が無いと更新できないので、`sudo vi ・・・`のように管理者モードで開く必要があります。

最後に、Xcodeのメニューから、Preferences... → Key Bindings タブに進み、先に追加したコマンドを選択して、お好きな**ショートカットキーを割り当て**てください。（キーコンビネーションのコンフリクトに注意）
このスクリーンショットでは、**行結合**に `Ctrl+J`を割り当てています。 
![スクリーンショット 2020-04-18 17.09.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/6b2cbb03-fbe2-1227-14d9-b5810884decf.png)


# 行結合の動作イメージ

実際の動作イメージを示します。

行を**結合**する**前**の状態です。（45行目に46行目をつなげます）
![スクリーンショット 2020-04-18 16.03.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/23d6d771-276d-72bb-2438-cfb4e0f880b7.png)
**行結合**に設定したショートカットキーを打った直後の状態です。**行結合**されてキャレットが赤い縦棒の位置にあります（結合前の45行目の行末の位置）。本当は、キャレット後方の余計なスペースを自動で削除したいところですが、単純に行結合しかできていません。
![スクリーンショット 2020-04-18 16.08.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/5a093451-c089-5579-4cc8-df64481b3ec9.png)
そこで、この状態で`shift+option+右`＋`shift+option+左`と打つと、下の状態になります。
![スクリーンショット 2020-04-18 16.07.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/ba0f6602-a8bb-c0b0-66fd-39430ac96446.png)
`backspace`を押せばこのスペースを削除できます。~~（_この余計なスペース削除も含めた**行結合**を一式でやる方法が分かりません。_）~~
冒頭に記載した**行結合**のキーバインド情報を以下のように変更することで、`shift+option+右`＋`shift+option+左`を不要にできました。`backspace`まで一連にすることもできましたが、例えば`;`を置きたいとか、最初から余計なスペースが空いてない とかもあるので、**行結合**のキーバインドでは、『**行結合とスペースの選択状態の設定**』までに留めることにしました。

```xml
    <key>Join Below Line (Original)</key>
    <string>moveToBeginningOfLine:, moveDown:, deleteBackward:, moveWordRightAndModifySelection:, moveWordLeftAndModifySelection:</string>
```

# 行追加の動作イメージ

**行追加**する前の状態です。（45行目の下に空行を追加します）
![スクリーンショット 2020-04-18 16.02.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/a189aea6-11a3-52a4-f6a3-663c511ecd77.png)
45行目のカーソルの位置にかかわらず、**行追加**に設定したショートカットキーを押すと、次のように空行ができてカーソルが移動します。
![スクリーンショット 2020-04-18 16.03.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/07c40e87-ad6f-f333-d6b3-1bc2fb893cf7.png)
赤い縦棒がキャレット（カーソル）の位置です。
今まで行末に移動してから`Enter`を押していましたが、カーソル位置に関係なく、すぐに直後の行を入力できるところが大変便利です。

# まとめ

自分はむかし`vi`使いだったので、`Ctrl+J`とか`O`を普通に使っていました。なのでずっと不便に思っていましたが、これで少し楽になりました。
もし良かったら参考にしてください。　　以上
【Unity】実行テストする前の私的チェックリスト　(随時更新)

#環境
Unity 2019.3.7f1

#はじめに
Unityでの実行テスト時に
しょうもないことでエラーになってしまうことがあるので
実行前の確認事項を備忘録として残しておきます。

#実行前の確認事項
・スクリプトがセーブされているか
・アタッチすべきものがアタッチされているか
・参照する対象の名前が合っているか　大文字小文字含む
・関数の名前は合っているか　大文字小文字含む
・作成した関数を作成しただけでなく実行しているか
・switch関数のcase〇の後はセミコロンではなくコロン
・シングルトン設定にするとアタッチしたものがシーン移動時に破壊されるため情報だけ保存するようにする
・余計なスクリプトがついていないか
snapwidgetでInstagramの画像をギャラリー風に表示する

## 今回やりたいこと
nuxtで作成しているサイトにインスタにアップしている写真一覧を表示したい。
いくつかやり方がありそうでしたが今回は手軽なsnapwidgetで実装していこうと思います。
https://snapwidget.com/

### 1. サインインorログイン
<img width="1209" alt="スクリーンショット 2020-04-18 21.08.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199085/01fe4ab3-31f0-1685-d96d-0786c27ccfb5.png">

### 2. アカウントを作成する
<img width="1210" alt="スクリーンショット 2020-04-18 21.08.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199085/7736af6e-2a72-ec49-c0db-87f30fd80c8e.png">

### 3. 表示したいSNSを選択する
<img width="1208" alt="スクリーンショット 2020-04-18 21.09.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199085/dcca39c1-d04f-00ec-4530-6626aad672e5.png">

### 4. 表示したいレイアウトを表示する
今回は画像のみ表示したいので左上のグリッドのレイアウトを選択する。

<img width="1210" alt="スクリーンショット 2020-04-18 21.09.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199085/9a879839-b05d-e41f-bf4c-e71a344cc1e6.png">

<img width="1210" alt="スクリーンショット 2020-04-18 21.09.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199085/7b1ee982-1b16-dda1-2036-2824b2cf133f.png">


### 5. サムネイルのサイズと縦横で表示する数を選択する

<img width="1211" alt="スクリーンショット 2020-04-18 21.27.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199085/627084cd-c914-02b0-2668-04a445186966.png">

### 6. コードが表示されるのでこちらをコピーする

<img width="1210" alt="スクリーンショット 2020-04-18 21.28.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199085/21ddedb7-6d14-b3e0-4603-e91e6c43f52c.png">

### 7. コードをサイトに埋め込んで完成

<img width="623" alt="スクリーンショット 2020-04-18 21.31.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199085/3e243c5a-f48f-87ff-f812-91f064392aa7.png">

これだけで埋め込むことができました。
このままWordPressに埋め込むことも可能です。

埋め込み時のスタイルの指定を外すことでCSSでのカスタマイズも可能です。
Pythonによる移動平均フィルタ

#はじめに
Pythonで移動平均フィルタを使うためのプログラム

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

#CSVを読み込む
data = pd.read_csv("hoge.csv")

data_col = data.columns
plt.figure(figsize=(5, 5))

#移動平均
n = 500 #移動平均の点数
ave = np.convolve(data[data_col[1]], np.ones(n)/float(n), 'same')

#グラフの作成
plt.figure(1)
plt.plot(ave * 1e3,data[data_col[3]] * 1e3)

#グラフ保存
plt.savefig('hoge.png')
plt.show()
```
#実行結果
![hoge.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311228/4c9fc384-b42e-5661-5365-d927fd281666.png)