OmniAICreator/Qiita-1.07M huggingface dataset:
Node.js で Google Cloud Storage に署名付きURLを使ってファイルアップロードする方法

# GCSにクライアントからアップロードする
画像、ドキュメント、映像、音声など様々な種類のファイルをクラウドストレージにアップロードするシーンは多々あります。そんなとき クライアント => バックエンド => クラウド の順番にアップロードしていると通信に時間がかかります。そこで、署名付きURLを使って クライアント => クラウド で直接アップロードするといい感じです。

AWSのS3は結構ドキュメントなり記事なりが充実していますが、GCS x Node.js のものがほとんどなく苦労したので残しておきます。

## 1.署名付きURLを発行（バックエンド）
署名付きURLはGCSのサービスクレデンシャルが必要なのでバックエンドで行います。フレームワークにexpressを使っています。

```ts:signed_url.ts
import express from "express";

export const post_signed_url = async (req: express.Request, res: express.Response) => {
  const {Storage} = require('@google-cloud/storage');

  const client = new Storage();

  const options = {
    version: 'v4',
    action: 'write',
    expires: Date.now() + 15 * 60 * 1000,
    contentType: 'application/octet-stream',
  };

  const url = await client.bucket("your_bucket_name").file(req.body.file_name).getSignedUrl(options);

  res.send(url)
}
```
#### ポイントはcontentTypeです。上記のように'application/octet-stream'にしないといけません。

## 2.署名付きURLを取得（クライアント）
1で作ったAPIを叩いて署名付きURLを取得します。
file_nameにはアップロードするファイルの名前を入れます。

```ts:get_signed_url.ts
post_signed_url () {
  this.$axios.post('/api/post_url', {
    file_name: "your_uploading_file.png"
  }).then((res: any) => {
    this.signed_url = res.data[0]
  })
}
```

## 3.アップロードできるようにバケットのCORSを設定します。
上記で取得したurlをそのまま使ってもCORSではじかれてしまうので設定します。

### 3.1. 好きなディレクトリで下記ファイルをつくります。ファイル名は自由です。

```json:cors.json
[
  {
    "origin": ["http://localhost:3000"],
    "responseHeader": ["Content-Type", "Authorization",  "Content-Length", "User-Agent", "x-goog-resumable"],
    "method": ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
    "maxAgeSeconds": 3600
  }
]
```
### 3.2 さっき作ったファイルを指定してバケットに設定します。
```bash
$ gsutil cors set cors.json gs://your_bucket_name
```
以下のコマンドで設定を確認できます。

```bash
$ gsutil cors get gs://your_bucket_name
```

## 4.クライアントからアップロードします。
変数 signed_url には２で取得したものを設定します。

```js:client.js
upload_file () {
  const file = document.querySelector('#file').files[0];
  if (signed_url != null && target != undefined) {
    this.$axios.put(signed_url,
    file,
    {
      headers: {
      'Content-Type': 'application/octet-stream'
    }
  }).then((res: any) => {
    console.log(res)
  })
}
```
クライアント側でもContent-Typeを指定のようにしないといけません。どんなファイル形式でも。

以上です！
pythonでのCOVID-19シミュレーション(SIRモデル)　～～都道府県ヒートマップを添えて～～

# はじめに
PythonでSIRモデルを用いてCOVID-19の感染拡大シミュレーションを行いました. モデルについては47都道府県それぞれ作成し, ヒートマップでの可視化を行いました. 

github ページ
https://github.com/chihina/analysis_covid_19_python

可視化動画 (フリーソフトでの編集のため若干の透かしが入っています. ごめんなさい!!)
https://www.youtube.com/watch?v=7XvPKcasL1U

![visualize_image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482108/f569bf3d-e7cb-d541-6815-a60ec63684d5.png)

## 開発環境
インタプリタ: python 3.71
特殊なライブラリ: folium==0.11.0
その他 matplotlib, numpyなどです. 

# SIRモデルについて
SIRモデルの常微分方程式は以下のようなものです. 
(簡単にいうと βは感染率, γは回復率を表します)  

```math
\frac{dS}{dt}(t) = -\beta S(t)I(t)\\  
\frac{dI}{dt}(t) = \beta S(t)I(t) - \gamma I(t)\\
\frac{dR}{dt}(t) = \gamma I(t)\\
```

S (susceptible)... 感受性保持者(感染する可能性がある人)  

I (Infected)... 感染者

R (Recovered)... 免疫保持者(もしくは隔離者)

## 1つ目の方程式
```math
\frac{dS}{dt}(t) = -\beta S(t)I(t)\\  
```

  左辺は, 単位時間あたりの感受性保持者の変化率を表します. 感受性保持者と免疫保持者に感染率を掛け合わせることでこれを表現します.  

つまり, 単位時間あたりに感染した人の分だけ S が減少するということです.  

## 2つ目の方程式
```math
\frac{dI}{dt}(t) = \beta S(t)I(t) - \gamma I(t)\\
```

左辺は, 単位時間あたりの感染者の変化率を示します. 
右辺第一項は先程登場したものです. 右辺第二項については, 単位時間あたりに回復する人を示します. 

つまり, 単位時間あたりに感染する人から回復する人を引いたものということです. 

## 3つ目の方程式
```math
\frac{dR}{dt}(t) = \gamma I(t)\\
```
左辺は, 単位時間あたりの免疫保持者の変化率を示します. 右辺は先程のものと同様で, 単位時間あたりに回復する人を示します. 

つまり, 単位時間あたりに回復する人の分だけRが増加するということです. 

# SIRモデルの改良
ここまで述べてきたSIRモデルを47都道府県分考えたところで, 1つずつが独立してしまうために意味がありません. よって, 人口比データを用いて他の都道府県の感染状況による影響項を追加しました. 

```math
\frac{dS}{dt}(t) = -\beta S(t)I(t) - I_{pref} × PR_{pref} × 0.1\\  
\frac{dI}{dt}(t) = \beta S(t)I(t) - \gamma I(t) + I_{pref} × PR_{pref} × 0.1 \\
\frac{dR}{dt}(t) = \gamma I(t)\\
```

## 追加した項について
```math
I_{pref} × PR_{pref} × 0.1
```
1つ目の文字はその時考えている県以外の感染者の状況を表現しています.

2つ目の文字は, その時考えている県の東京都の人口比を示します. 

よって, この項によって他の都道府県で感染者が増えれば自身の県でも感染者が増加するようにしています. 人口比の情報を使用したことで東京都, 大阪府, 愛知県など人口が多い県の影響が強くなるようにしています. 

# 実装方法
以上で改良したSIRモデルを, pythonで解いていきます. 本来ならばscipyを使用すれば簡単に実装できますが, 理解のために地道に実装しました. 詳しくはコードをご覧の上, ご質問お願いします!!

実装手法: 4次のルンゲクッタ法

ルンゲクッタ法については説明がたくさんありますので, 「4次のルンゲクッタ法」で検索をお願いします.

# 可視化方法
python foliumで時系列ヒートマップ(time series heatmap)描く 
https://sammi-baba.hatenablog.com/entry/2018/12/25/074017

を参考にさせていただきました. 都道府県ごとの感染者情報をpandasのdataframeで作成後, 
csvに書き出したものを読み込み使用しました. 実際の動画はyoutubeにアップロードしたのでご覧ください!!

可視化動画 (フリーソフトでの編集のため若干の透かしが入っています. ごめんなさい!!)
https://www.youtube.com/watch?v=7XvPKcasL1U

![visualize_image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482108/f569bf3d-e7cb-d541-6815-a60ec63684d5.png)

# まとめ
完璧に今の感染状況をつかむことはできませんでしたが, 比較的単純な常微分方程式を持って
ある程度の感染拡大の再現ができたことは非常に驚きでした. 

より詳細な内容について質問等ございましたらぜひお願い致します!!

# 参考文献
以下の記事, 統計データを参考にさせていただきました. 
ありがとうございます. 

[1] python foliumで時系列ヒートマップ(time series heatmap)描く 
https://sammi-baba.hatenablog.com/entry/2018/12/25/074017

[2] 人口推計 平成29年10月1日現在人口推計 国勢調査サイト(e-stat) 
https://www.e-stat.go.jp/dbview?sid=0003215844

[3] Data of Japan githubページ (2020年 7月 28日アクセス) 
https://www.e-stat.go.jp/dbview?sid=0003215844
Swift で数値を3文字区切りの文字列に変換する【コピペ 用】

Swift で数値をカンマで区切って表現したい時などには下記の Extension Property が使用できます。

```swift
extension Int {
    var withCommaString: String {
        let formatter = NumberFormatter()
        formatter.numberStyle = .decimal
        formatter.groupingSeparator = ","
        formatter.groupingSize = 3

        return formatter.string(from: NSNumber(value: self)) ?? "\(self)"
    }
}
```

### NumberFormatter.Style

NumberFormatter.Style を使用するとデバイスのローカル言語に合わせて数値をフォーマットしてくれます。下記が公式ドキュメントにも記載してある US, France, China の例です。

|Style|en_US Locale|fr_FR Locale|zh_CN Locale|
|---|---|---|---|
|.none| 1235 | 1235 | 1235 |
|.decimal| 1,234.568 |1 234,568| 1,234.568 |
|.percent|12%|12 %|12%|
|.scientific|1.2345678E3|1,2345678E3|1.2345678E3|
|.spellOut|one hundred twenty-three|cent vingt-trois|一百二十三|
|.ordinal| 3rd | 3e |第3|
|.currency|$1,234.57|1 234,57 €|￥1,234.57|
|.currencyAccounting|($1,234.57)|(1 234,57 €)|(￥1,234.57)|
|.currencyISOCode|USD1,234.57|1 234,57 EUR|CNY1,234.57|
|.currencyPlural|1,234.57 US dollars|1 234,57 euros|1,234.57人民币|


https://developer.apple.com/documentation/foundation/numberformatter/style
DjangoでModelをDictionaryに一瞬で変換し、爆速でFormを初期化する

#概要
諸事情がありModelFormを使わないこととしたが、FormをModelで初期化する際に、コンストラクタの引数にDictonary型で与えるのが地味に面倒だったので調べたときのメモ

#やりかた
Modelオブジェクトの```__dict__```メソッドを呼び出すだけ。

###例

```python
model = Compound.objects.get(id=compound_id)
form = CompoundForm(compound.__dict__)
```

参考文献には他にも様々なやり方が記載されている。

#参考文献
[Convert Django Model object to dict with all of the fields intact](https://stackoverflow.com/questions/21925671/convert-django-model-object-to-dict-with-all-of-the-fields-intact)
囲った範囲のキャプチャがとれるWindows標準ツール snipping tool が便利すぎる

# 囲った範囲のキャプチャがとれるWindows標準ツール snipping tool が便利すぎる
普段仕事をしていて、画面のキャプチャを取りたいときはだいたいWinShotを利用していたのですが、特定の範囲を自分で指定してキャプチャを取りたい場合にはWindows標準のsnipping toolというものがあったのでご紹介します。

## 利用に向ているケース

- 特定範囲を指定してキャプチャを取りたい
- キャプチャ用のツールをインストールしたくない

## 逆にWinShotの方が向いているケース

- アクティブウィンドウのキャプチャを取りたい
- 画面全体のキャプチャをとりた


## snipping tool の使い方
「Winマーク」＋「Alt」＋「S」を押すだけ。
これだけです。
「Winマーク」＋「Alt」＋「S」を押すと、画面が少し暗くなって下記の様になります。
この状態で、好きな範囲を選択すると、そこの部分のみ切り取られて、クリップボードに保存されます。

![snippingtool_1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362131/29b28c47-181c-86e2-8805-7aa04472dbce.gif)

選択範囲を自分で囲ってコピーすることも可能です。
![snippingtool_2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362131/ebc374e0-e47e-93a5-fa89-5e46489fb52f.gif)

素晴らしすぎる。
2言語でアプリ開発してみた

# アプリ、開発しました！

## アプリの概要

**メンバーとグループ数を入力するとグループ分けするアプリ**

機能の詳しい説明 : [はてなブログ](https://sato-na.hatenablog.com/entry/2020/08/15/205239)

## 開発環境 / コード

- エディタ : AndroidStudio

- java版 : https://github.com/sato-na/guruwake_java

- kotlin版 : https://github.com/sato-na/guruwake_kotlin


# なぜ、2言語で同じアプリを開発したのか

kotlinとjavaの共通点 = アンドロイドアプリが開発できる

だけど、書き方が少し違う…

なので、

同じアプリを開発して同じ機能を実装しようとしたときに、

どのように違うのかが気になって作りました！

ですが、2言語を照らし合わせながらコードを書いてみると…

**ただコードをあわせるだけじゃまだ振り返りにくいな…**


# ということで…

**今日から7日間毎日記事を投稿します！**

## 内容

- 1日目　<開発したものを紹介したい！(個人的な願望)>

- 2日目　<それぞれの言語の基礎を知りたい！>

- 3日目　<リストを作りたい！>

- 4日目　<関数を作りたい！>

- 5日目　<ボタンから次の画面に移りたい！>

- 6日目　<ツールバーから前の画面に戻りたい！>>

- 7日目　<いろんな機能を実装したい！>

※ 今のところの予定です…(8月18日更新)

※ 温かく見守っていただけると幸いです…
都内某所でBGAのX線検査をしてみた。

#この記事について

著者の北神(@nonNoise)が体験した内容をまとめた記事です。
間違ってる事や変な事もありますが、活動ログとして残しておきます。

# 都内某所でBGAのX線検査装をしてみた。

都内某所というのは、東京の秋葉原のとあるビルにあるコワーキングスペースです。
X線検査装置を借りられたので、試しにとって見ました。

前回
https://www.youtube.com/watch?v=acrJceh3bkU
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12499/d45593a9-2659-e67b-ca77-3e296a945ed6.png)


**「自宅でオーブントースターを使ってBGAを実装する」**という実験を行い、無事に成功？してしまったので

これが本当に成功なのか、X線検査装置で確認してみたいと思います。


![DSC_0211.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12499/345076f9-bfc9-d0a4-74bc-3e608199631d.jpeg)

早速、X線検査装置に入れていきます。

![DSC_0212.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12499/b14dd8f5-2c8b-8d6f-6847-408b929b0a65.jpeg)

今回お借りしたのは**MSX500型X線検査装置**というものです。
http://www.mseng.co.jp/new/ja/products/xray/msx500.html

![DSC_0213.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12499/e188b13b-7a6a-0a9a-f052-46f616b6b1fa.jpeg)
レーザーがあるところが検査ポイントです（若干ずれているので後でボタンで移動させます）

![DSC_0214.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12499/e1a1064c-c29b-764f-be61-1dac99f3ddf5.jpeg)

電源を入れ、検査開始　といっても、X線が出るだけなので、こう放射線マークが点灯します。

![DSC_0215.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12499/04758af6-de5d-63a5-a420-d86ce9894455.jpeg)


摘みで、強さや明るさを調整し、PCのソフトでこんな感じで確認していきます。

さて、肝心のBGAを見てみます。

![02 (2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12499/093d7337-3e18-0e87-01d4-be483f1d38f3.jpeg)

おぉ！綺麗に出来てる！！

と、調子を見ていくと、気になる点が・・・

![01 (2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12499/30ab6e3c-f07b-1206-0a5b-ef193ec11c07.jpeg)

おや？？？

ショート？？いや、これはチップコンデンサのような影が・・・

![03 (2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12499/0a72937c-4c90-f0c5-39ae-40614c908dc0.jpeg)

ん？？？

BGAの中にBGAがあるような・・・

**今回検査したICはOSD335XというSiP**になります。
SiPはICの中に複数のICやコンデンサを含んだＩＣですので、上記のように、X線を見ると、見えちゃうんですね・・・

とりあえず！大丈夫そうだから　**ヨシッ！！**

# 番外編

X線検査機を１時間借りられたのですが、**なんと１０分で終わってしまった**ので、その他のICについても**意味もなく撮ってみた**

![05 (2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12499/cca3c0ba-0eee-517b-3c62-3247aba00a05.jpeg)

FT23Xの写真～

![06 (2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12499/864c675b-206c-5140-0c69-0e11390daab4.jpeg)

EtherCATで使うLAN9252の写真～

![07 (2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12499/420053d0-fb9f-1d2f-5b7c-14e38359f570.jpeg)

４層基板の内層配線の写真～

まぁ見れて楽しかった。

ただ、画素数というか、１回で見える範囲が限定されているため、IC全部のピンを精査するとなると、ボタンを押してテーブルを移動させて、繰り返し検査する必要があります。
地味な作業ですが、見えないものが見えるという点では面白いので、また機会があれば試してみたいと思いました。

でわでわ。
Twitter @nonNoise
FlaskでheaderのAccept-Languageを指定する方法

Spotify APIを利用している際に日本語にてデータが返ってこない場合があり、調べたところheaderに```Accept-Language```を入れてあげるとよいとのことでした。
https://qiita.com/yumayamada1029/items/8bdb2e1d176c7e72db72

API問い合わせをFlaskから行っていたため、その場合のサンプルコードが以下になります。

```python
@app.route('/getUserTopArtists/<string:access_token>')
def getUserTopArtists(access_token):
    header = {
        'Authorization': 'Bearer' + ' ' + access_token,
        'Accept-Language': 'ja'
    }

    r = requests.get('https://api.spotify.com/v1/me/top/artists', headers=header)

    return r.text

```


その他、headerに追加したい項目がある際も下記に追加していく形でよさそうです。
【Swift】 UIColor extensionに任意の色を定義する

#はじめに
ダークモードとライトモードで色が変わる、システムで提供されてる`UIColor`(`.systemBackground` 等) を自分で指定する方法がありましたので共有します

#UIColor Extension
UIColor を拡張して、以下のようなコードを書きます

```swift
import UIKit
extension UIColor {
    class var dynamicColor: UIColor {
        get {
            .init(dynamicProvider: { (traitCollection) -> UIColor in
                switch traitCollection.userInterfaceStyle {
                case .dark:
                    return .systemRed
                case .light:
                    return .systemBlue
                case .unspecified:
                    return .systemBlue
                @unknown default: return .systemBlue
                }
            })
        }
    }
}
```

#使用法
システムカラーと同様に記述するように使えます

```swift
class myViewController: UIViewController {
    override func viewDidLoad() {
        let button = UIButton()
        button.backgroundColor = .dynamicColor
    }
}
```

このようにUIColorを拡張することでも使用することができます

```swift
extension UIColor {
    class var dynamicColor: UIColor {
        get {
            .init(dynamicProvider: { (traitCollection) -> UIColor in
                return UIColor(red: 0.1, green: 0.1, blue: 0.1, alpha: 0.1)
            })
        }
    }
}
```
【Kotlin】リフレクションを用いてcompanionObjectのフィールドを一括取得する

コンパニオンオブジェクトのフィールド値を一括参照したいが、はまったのでメモとして残す。

## 結論

```kotlin
class Hoge() {
    companion object {
        val piyo = "piyo_value"
        private val huga = "huga_value"
        const val hoge = "hoge_value"
    }
}

//コンパニオンオブジェクトのKClass取得
Hoge::class.companionObject
    ?.let {
        it.memberProperties
　　　　　　　//パブリックフィールド以外を参照すると例外投げるので除外
            .filter { property -> property.visibility == KVisibility.PUBLIC }
　　　　　　　//直接property.getの引数の型がNothingに推論されるのでメソッド参照経由で無理やり呼び出す
            .map { property -> property::get.call(this.companionObjectInstance) }
    }.orEmpty()
```


## 拡張関数で使う
```kotlin
fun <T : Any> KClass<T>.getCompanionObjectPropertyValues() =
    this.companionObject
        ?.let {
            it.memberProperties
                .filter { property -> property.visibility == KVisibility.PUBLIC }
                .map { property -> property::get.call(this.companionObjectInstance) }
        }.orEmpty()

Hoge::class.getCompanionObjectPropertyValues()
```

## 終わり
かなり乱暴になってしまった感が否めない。。。。。
そもそもリフレクション使っているときは設計が狂っている気がしますね。
ディープラーニングに必要なベクトルの知識　線形変換

ディープラーニングを勉強していて、ベクトルの表現や、線形結合などの概念に詰まって気持ち悪かったので、まとめてやっつけます！

目次
１　ベクトル基礎１　（ディープラーニング学習に関わりの深いベクトル基礎知識）
２　ディープラーニングへの応用
３　ベクトル基礎２　（より、ベクトルの理解を深める）




##ベクトル基礎１
一次変換（線形変換） ・・ある点に行列を掛け算し、別の点に移動させる。　（ベクトルの方から見た数学的な定義）
つまり、値を変換するということです。

一次結合（線形結合）・・ax+byのような形の式
![Slide23.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631141/c6749f99-494c-3bf7-259d-30c6ab5f5597.gif)

### 線形(linear)とは、”直線にする”と言う意味  
つまり、 入力x　に対して、出力y(u)を求めるプロセスとして、　y（u) = wx + b の形にして求めるということ。
ここで,y(u)は線形変換の結果出力されるもの。つまり隠れ層に渡すされる出力の値。


なぜuが出てくるかいというと、いきなり入力　x→y を求めてしまっては、ディープラーニングでもないんでもないただの関数と同じなので。

＜重要用語＞
基底 ・・　全体を表現するのに、必要最低限のベクトル　（※基本ベクトルともいう）
線形結合　・・いくつかのベクトル（or関数）がある時、それぞれの定数倍したものの和

※ ２次元空間は互いに平行でないベクトルが２つあれば、その線形結合で全ての平面を表すことができる
<font color="MediumOrchid">線形空間（ベクトル空間）</font>とも呼ぶ



![ダウンロード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631141/768c77b8-f148-a04a-3fd5-4d80b3625e0b.png)



＜ベクトルを使う意味・心得＞
機械（コンピューター）が扱う数字の形式の中で、相性というものが有る。
機械の大好物が処理が早い表現が行列（orベクトル）です。

これにより、GPUの処理を高速にできるので、ディープラーニングには必須の知識となっています。
画像もRGBの数値で表せるので、結局相性が良いいのは、行列（ベクトル）です。

#### この１次方程式 (y = wx + b)は、行列で表すことができるので、
１次方程式ではなく、機械が好きな行列で表現しましょう！　という感じです。





![deeplearning-3336-6-638.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631141/20df45d5-974a-6f76-3ecd-c22fe77d658d.jpeg)



まとめ

①　入力層→隠れ層のフェーズ
【目的　(x→u)　を求める】

１次方程式　u = Wx + b 


②　１次方程式の出力→活性化　　フェーズ　（ニューロンが発火するかしないか、決める　＝　0,1か決める）
【目的　(u→z)を求める】  
非線形関数　(ex sigmoid,Relu)


③　出力フェーズ　（マシンが最終的な数値（答え）を発表するフェーズ）
目的　(z→y) を求める






##ベクトル基礎2

逆行列と行列式　


###逆行列
逆行列は　元の行列と掛け合わせると、単位行列となる行列　　

![gyaku-gyoretsu1806.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631141/2e848478-9443-1dc1-b423-c5a39fb68742.png)


###行列式(determinant)


![picture_pc_6eccf09912e51aa9b3b04d6ed4c0929f.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631141/e3ee4a72-dc33-9dbf-f371-64f60e4e4e8d.png)


行列式は上で定義される式です。

＜ポイント＞
１　行列式　＝　０　の時、　逆行列は存在しない。

２　行列式　≠　０　の時、　逆行列が存在する


ここで、一次変換の話です。

１次変換は
点単位で見れば、点を変換する　
点の集合を空間としてみれば　   <b>空間を変換する<b>　　　性質がある。
![lineartransform1_22.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631141/a6555b52-bcf0-7b79-7cf4-c7bcf42f7e38.gif)
Railsでテーブルを作成する手順

# はじめに

備忘録として作成しています。
間違いなどあればご指摘ください。

# 前提条件

Ruby 2.6.5
Rails 6.0.0
macOS Catalina 10.15.6

```
ターミナルでアプリを作成するディレクトリに移動してから作業する
＄は入力しないこと
#以降はコメントなので入力しないこと

$ cd test/  # testというディレクトリに移動する
$ cd ~/  # ホームディレクトリに移動する
$ cd ..  # 一つ上の階層のファイルに移動する
$ cd  # ルートディレクトリに移動（手間はかかるがここから順にディレクトリをたどっていくと確実）
```

# テーブルを作成する前にモデルを作成する

```
ターミナルで入力
$ rails g model item
```
このコマンドでできること
・modelsディレクトリにitemモデルを作成`models/item.rb`
・dbディレクトリにマイグレーションファイルを作成`db/20200815112313_create_items.rb`

ちなみにまだテーブルはできていません

# テーブルの中身を書き加える（必要であれば）

```ruby:20200815112313_create_items.rb
class CreateItems < ActiveRecord::Migration[6.0]
  def change
    create_table :items do |t|
      # 下の３行が書き加えた部分
      t.string :name, null: false
      t.text :explanation
      t.integer :price, null: false

      t.timestamps
    end
  end
end
```

# テーブルを作成する

```
ターミナルで入力
$ rails db:migrate  # これで無事テーブル作成完了
```

# 分解してみる

```ruby
create_table :items do |t|
#  itemsテーブルに以下のカラムを作りますよ
```
```ruby
t.string :name, null: false
# string型で、nameカラムを作りますよ
# nullを許可しませんよ
```
```ruby
t.text :explanation, null: false
# text型で、explanationカラムを作りますよ
```
```ruby
t.integer :price, null: false
# integer型で、priceカラムを作りますよ
```
```ruby
t.timestamps
# レコードの作成日時(created_atカラム)と更新日時(updated_atカラム)を作りますよ
```

# まとめ
1.モデル作成
2.マイグレーションファイルを修正
3.rails db:migrate

といった流れです。
オプションや他の方法についてはまた別の記事で。
Boost BindとPlaceholderに関する雑感

個人的な経験から、初めてTensorflowを扱ったとき、placeholderが把握できなかった経験があった。
従来のC/C++の変数とは少し違うためである。

しかし、BoostのBind関数から見るとわかった。

     1#include <iostream>
     2#include <boost/bind.hpp>
     3using namespace std;
     4using namespace boost;
     5
     6void func_for_bind( const char* s1, const char* s2,
     7               const char* s3, const char* s4 )
     8{
     9    cout << s1 << ' ' << s2 << ' '
    10         << s3 << ' ' << s4 << endl;
    11}
    12
    13int main()
    14{
    15    // placeholder: _1, _2                                                                                                                                                            
    16    bind( &func_for_bind, _1, _2, "three", "four" )( "one", "two" );
    17    bind( &func_for_bind, "one", _1, "three", _2 ) ( "two", "four" );
    18    bind( &func_for_bind, _1, _1, " (ノД`)", _2 )( "(ﾟ∀ﾟ)", "(´ω`)" );
    19
    20    return 0;
    21}

16行目でbindはプレースホルダー _1, _2に "one", "two"を渡している。
プレースホルダー_1, _2は、専門的に言うと「関数に渡される遅延引数の記述位置」

<pre>
./a.out 
one two three four
one two three four
(ﾟ∀ﾟ) (ﾟ∀ﾟ)  (ノД`) (´ω`)
</pre>

最近のプログラマな人は、「Pythonから入ったのでPlaceholder抵抗ありません」という人が多いのだらうか？ 
(*´Д｀)
openFrameworksでTelloドローン動画ストリーミング


##はじめに
前回の記事で，[openFrameworksからTelloドローン操縦する](https://qiita.com/kikpond15/items/3ef236354e460cd50d5d)を投稿しました．
この記事ではTelloドローンのストリーミング機能をopenFrameworksで実装する方法を紹介します．

##OpenCvのVideoCaptuerを使う
Telloのストリーミングについて色々と調べていたらPythonを使った[記事](https://qiita.com/mozzio369/items/8e0fb12dc30c493f5cc4)が一番多く，やはりOpwenCvを使ってストリーミングをしているようです．公式が出している[Pythonのサンプルコード](https://github.com/dji-sdk/Tello-Python)も参考になります．

## 詰まった点
最初「openCVでできるなら楽やな〜，ofxOpenCvから生のopencv触れるし〜」と思っていたのですが，どうやらofxOpenCvではVideoCaptuerなどの動画を扱うクラスは，他のoFの動画を扱うクラスとの混同を避けるためにコンパイルされていない機能があるそうで，addonを使わずにopencvをインクルードしなければなりませんでした．

####OpenCvのインストールとパスの設定
この作業が一番めんどくさかったです．OpenCvのインストールとパスの設定はすでに多くの方がやり方をあげてくれているので，それらを参考にしました．
**参考サイト**
- http://kzm42.blog24.fc2.com/blog-entry-25.html
- http://kzm42.blog24.fc2.com/blog-entry-25.html
- https://qiita.com/Atsu30/items/5a76d159b5a79d7d7769

OpenCvをインストールしoFでインクルード出来たらOKです．
###実装
前回の[記事](https://qiita.com/kikpond15/items/3ef236354e460cd50d5d)でTelloのアドオン，[ofxTello](https://github.com/kikpond15/ofxTello)を紹介しました．これも使って実装します．

```c++:ofApp.hpp
#pragma once
#include "ofMain.h"
#include "ofxTello.h"
#include "opencv2/opencv.hpp"

using namespace cv;
class ofApp : public ofBaseApp{
public:
    void setup();
    void update();
    void draw();
    void exit();
    void keyPressed(int key);

    ofxTello tello;
    VideoCapture cap;
    Mat bgrFrame, rgbFrame;
    ofImage img;
    int distance, angle, speed;
};

```


```c++:ofApp.cpp
#include "ofApp.h"

using namespace cv;
//--------------------------------------------------------------
void ofApp::setup(){
    tello.connect();
    tello.streamon();
    cap = cv::VideoCapture("udp://@0.0.0.0:11111");
    distance = 50;
    angle = 45;
    speed = 50;
}
//--------------------------------------------------------------
void ofApp::update(){
    if (cap.isOpened()){
        cap.read(bgrFrame);
        cvtColor(bgrFrame, rgbFrame, COLOR_BGR2RGB);
        img.setFromPixels(rgbFrame.data, rgbFrame.cols, rgbFrame.rows, OF_IMAGE_COLOR);
    }
    img.update();
}
//--------------------------------------------------------------
void ofApp::draw(){
    img.draw(0,0);
}
//--------------------------------------------------------------
void ofApp::exit(){
    tello.streamoff();
    tello.close();
}

//--------------------------------------------------------------
void ofApp::keyPressed(int key){
    if(key == 't'){
        tello.takeoff();
    } else if(key == 'l'){
        tello.land();
    } else if(key == 'w'){
        tello.foward(distance);
    } else if(key == 's'){
        tello.back(distance);
    } else if(key == 'a'){
        tello.left(distance);
    } else if(key == 'd'){
        tello.right(distance);
    } else if(key == OF_KEY_UP){
        tello.up(distance);
    } else if(key == OF_KEY_DOWN){
        tello.down(distance);
    } else if(key == OF_KEY_RIGHT){
        tello.cw(angle);
    } else if(key == OF_KEY_LEFT){
        tello.ccw(angle);
    }
}
```
![ダウンロード (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191122/a3fab8b8-667c-f64e-ca63-e016e93c9723.gif)


こんな感じで飛ばしながら動画ストリーミングをやることが出来ました．
まだofxTelloの方には組み込んでいないのですが，今後実装していこうと思ってます．
JavaScriptでイベント処理をキャンセルするメソッド3選

# イベント処理をキャンセルする方法
イベント処理をキャンセルするためには、下記メソッドのいづれかを使用します。

* __preventDefault__
* __stopPropagation__
* __stopImmediatePropagation__

## preventDefault
defaultのイベントをキャンセルします。
>JavaScriptにおける「イベント」とは、ウェブページ上で発生するあらゆるアクションの総称です。
>例えば、ボタンのクリック、フォームへの入力、ページの読み込み、マウスポインタを要素の上に合わせるなど、様々な出来事がページ上で発生します。
>引用元：(https://www.sejuku.net/blog/61631)

## stopPropagation
イベント発生元の親要素にイベントがあれば、親要素のイベントの実行をキャンセルします。
イベント発生元のみを実行したいときに、使用します。

## stopImmediatePropagation
イベント発生元と同じ要素に複数のイベントがあったときに、イベント発生元以降のイベントの実行をキャンセルします。
defaultのイベントのみ実行したいときに、使用します。

# サンプルで検証
各メソッドの違いを確認するために、サンプルを用意しました。

```index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JavaScriptでイベント処理をキャンセルするメソッド3選</title>
</head>
<body>
<div id="parent">
  <p>JavaScriptでイベント処理をキャンセルするメソッド3選</p>
  <p>
    <a id="child" href="https://qiita.com/tamakiiii/items/f47e38bb8f03ef92f298">JavaScriptでイベント処理をキャンセルするメソッド3選ページへ</a>
  </p>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function() {
  $('#child').click(function(e) {
    window.alert('#childイベント1が呼び出されました。');
    //e.preventDefault();
    //e.stopPropagation();
    //e.stopImmediatePropagation();
  });

  $('#inside').click(function(e) {
    window.alert('#childイベント2が呼び出されました。');
  });

  $('#outside').click(function(e) {
    window.alert('#parentイベントが呼び出されました。');
  });
});
</script>
</body>
</html>
```

## preventDefaultを実行した場合
<p>　以下のような順番でイベントが発生する。</p>
<dd>・childイベント1</dd>
<dd>・childイベント2</dd>
<dd>・parentイベント3</dd>

## stopPropagationを実行した場合
<p>　以下のような順番でイベントが発生する。</p>
<dd>・childイベント1</dd>
<dd>・childイベント2</dd>
<dd>・リンクに従って別のページへ移動</dd>

## stopImmediatePropagationを実行した場合
<p>　以下のような順番でイベントが発生する。</p>
<dd>・childイベント1</dd>
<dd>・リンクに従って別のページへ移動</dd>

# 参考
* [【JavaScript入門】イベント処理のキャンセル方法](https://kita-note.com/js-cancel-event)
* [イベント処理を中断するには？（preventDefault／stopPropagation／stopImmediatePropagation）](https://www.buildinsider.net/web/jqueryref/022)
* [【JavaScript入門】初心者でも分かるイベント処理の作り方まとめ！](https://www.sejuku.net/blog/61631)
【初学者】【5分で終了】Railsアプリケーションでフォントを変更する方法。

#はじめに
なんとかPFを作り上げたものの、デザインがダセェなぁと思いフォントを変えた時の記録です。備忘録。
PFはこちら→[Parrot](https://parrot-live.work/)

#やっていく
###①いい感じのフォントを探す
まず初めに、変更したいフォントを探します。

ちなみに自分は、こちらのサイトから探して、ダウンロードしました。
　→[FONT FREE](https://fontfree.me/)

zipファイルがダウンロードされ、解凍すると、こんな感じのフォルダが現れると思います。これでOKです。（フォントによっては、.otfではなく.ttfの場合もありますが問題ないです。）
![スクリーンショット 2020-08-15 19.26.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509192/81299867-4d3b-8c03-42bb-ed6cf1e9e232.png)

###②ダウンロードしたファイルを自分のアプリケーションに移す
この時、ダウンロードしたもの全部ではなく、.otf（または、.ttf）ファイルだけを移してください。先ほどのスクショのものだと、03スマートフォントUI.otfだけですね。

移す場所は、assets/fontsの中です。（fontsフォルダは作成してください！😖）

![スクリーンショット 2020-08-15 19.38.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509192/7e11c9d4-9a60-46a4-3061-24faec6d3292.png)

気付いた方もいると思いますが、日本語名のファイルがあると開いてくれないため、意図的にファイル名から日本語を削除しています😖　（今回だと、03スマートフォントUIから03UI）
特にフォント変更に支障は出ないので、もし日本語があった場合は削除・変更してください！

なんで開かないかの詳しく理由はこちら
　→[Lonely Mobiler](https://loumo.jp/archives/18959)

###③少しいじって終わり
残りは、application.scssを少しいじるだけ！

まずは、

```ruby:application.scss
@font-face {
  font-family: '03UI';
  src:  asset_url('/assets/03UI.otf') format("truetype");
  font-weight: normal;
  font-style: normal;
}

```
こんな感じにします。

そんでもって、変更したい箇所にfont-familyを追加！（今回自分は全体なのでbodyに。background-colorは気にしないでください。）

```ruby:application.scss
body {
  background-color: #DFEFED;
  font-family: '03UI';
}
```

すると、、、

![スクリーンショット 2020-08-15 20.03.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509192/34b6b664-f916-cfa4-a7c0-51045456238c.png)

でけた！！ちょっと雰囲気が変わった！！

#おわりに
細かい説明は省いていますが、こんなに簡単にできました。是非みなさんもお試しあれ💁🏻
位置引数のタプル化、キーワード引数の辞書化

#位置引数のタプル化
引数の数がわからない、複数ある時は*argsでまとめるとタプル化可能
![スクリーンショット 2020-08-15 19.45.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527694/5179b099-af85-7e76-0735-8e76bf777b04.png)

#キーワード引数の辞書化
**kwargsを用いることで辞書化可能

![スクリーンショット 2020-08-15 19.59.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527694/836c28bb-90b2-3ba8-8978-bb4cd2ac9bf4.png)

この方が見やすい
辞書のkey,valueが**で辞書化されている
![スクリーンショット 2020-08-15 20.05.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527694/23561aac-c684-91c0-53f7-6068c41edef1.png)
SwiftUI でShareSheet を表示する方法

#はじめに
SwiftUIを使い始めたのですがShareSheet を使う方法があまり見当たらなかったので備忘録的に共有します。

#とりあえずView を作る
とりあえずShareボタンとテキスト入力を作りました

```swift
struct someView: View {
    @State private var shareItem: String = ""

    var body: some View {
        TextField("type something...", text: $shareItem)
        Button(action: {
            // Action
        }) {
            HStack {
                Text("Share")
                Image(systemName: "square.and.arrow.up")
            }
        }
    }
}
```

#ActivityViewをSwiftUIで使えるようにする
ここではtxtをsomeViewの変数と対応させたいので`@Binding`とすることで`<Binding>String`タイプとする。
詳しいことはこのページが参考になります。
[Property Wrappersを理解する](https://d1v1b.com/swiftui/property_wrappers)

```swift
struct ShareSheet: UIViewControllerRepresentable {
    @Binding var text: String

    func makeUIViewController(context: Context) -> UIActivityViewController {
        let activityItems: [Any] = [txt]

        let controller = UIActivityViewController(
            activityItems: activityItems,
            applicationActivities: nil)

        return controller
    }

    func updateUIViewController(_ vc: UIActivityViewController, context: Context) {
    }
}
```

#呼び出す
先程の、`someView` に書き加えてShareSheetを`.sheet`で呼び出し、
`showActivityView` が `true`の時に表示されるようにします。
Bindingなので、$をつけて変更ができるようにします。

```swift
struct someView: View {
    @State private var showActivityView: Bool = false
    @State private var shareItem: String = ""

    var body: some View {
        TextField("type something...", text: $shareItem)
        Button(action: {
            self.showActivityView = true
        }) {
            HStack {
                Text("Share")
                Image(systemName: "square.and.arrow.up")
            }
        }
        .sheet(isPresented: self.$showActivityView) {
            ShareSheetView(text: $shareItem)
        }
    }
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409695/131eae0b-d2c9-b20a-c13e-efcbc1b671a7.png" width="30%" alt="Simulator Screen Shot">

これでActivityViewが使えるようになりました！
しかし、真ん中でいい感じに止まるUIではないのでうまくやる方法を知っている方がいたらぜひコメントをください…
VMのgitlabをコンテナへ（ついでにバージョンアップ 12.0.3→13.2.4）（ついでにdocker-compose）

前回：[DockerでVMへのリバースプロキシ](https://qiita.com/F_clef/items/e0bbf371398772edc1f7)
これはそろそろDockerを使えるようになりたい筆者の試行錯誤の軌跡です。

# gitlabをVMからDockerコンテナへ移行
前回は、既存のVMサーバー群にDockerのnginxからリバースプロキシしました。
![Untitled(3) (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227222/29141450-1359-c374-bb35-c2cdf6da6748.png)

今回は、VMサーバー群のアプリケーションのうち、gitlabをDockerコンテナに移行して、*Develop*を閉じます。
![Untitled(4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227222/c1249067-b5de-41a0-fea7-1307d3f6b555.png)

# いきなり閑話休題　便利！docker-compose
試行錯誤する中で、何度もコンテナの再作成を行いました。
最初はコンテナ起動コマンドをメモしておいて、ターミナルにペーストしていましたが、
nginxのコンテナとgitlabのコンテナ両方でそんなことするのはかったるいです。

このときにやっと**docker-compose**の便利さを理解し、使えるようになりました。

docker-composeとは、イメージや起動オプションをテキストベースで管理するアプリケーションです。
docker-compose.ymlファイルに複数コンテナの起動設定を記述しておくと、
以降はコマンド一つでそれらコンテナの一斉起動、一斉停止、一斉削除等ができるようになります。

```yaml:docker-compose.ymlの例
version: '3'
  
services:
    deploy:
        image: nginx
        restart: always
        ports:
            - 80:80
            - 443:443
        volumes:
            - /home/fclef/docker/server/deploy/nginx/ssl:/etc/nginx/ssl
            - /home/fclef/docker/server/deploy/nginx/conf:/etc/nginx/conf.d
            - /home/fclef/docker/server/deploy/nginx/params:/etc/nginx/params
            - /home/fclef/docker/server/deploy/letsencrypt:/etc/letsencrypt
            - /home/fclef/docker/server/deploy/content/html:/usr/share/nginx/html
            - /home/fclef/docker/server/deploy/script:/tmp/script

    gitlab:
        image: gitlab/gitlab-ce:latest
        restart: always
        ports:
            - 50080:80
            - 50443:443
        environment:
            GITLAB_OMNIBUS_CONFIG: |
                external_url 'http://localhost'
        volumes:
            - /home/fclef/docker/server/gitlab/config:/etc/gitlab
            - /home/fclef/docker/server/gitlab/logs:/var/log/gitlab
            - /home/fclef/docker/server/gitlab/data:/var/opt/gitlab
        depends_on:
            - deploy
```

# 大まかな手順
* gitlabのバックアップ
* gitlabコンテナの起動
* gitlabのリストア

これだけなのに、結構かかりました。。

## gitlabのバックアップ
参考：[kuruwiの日記 GitLabのサーバ移行](https://kuruwi.net/2019/0526/210705/)

参考先に書いてあるとおりですが、

```console
# gitlab-rake gitlab:backup:create
```
で`/var/opt/gitlab/backups`にアプリケーションデータのバックアップを作成し、
`/etc/gitlab`下の設定ファイル達を移行しやすいように圧縮しておくだけです。

## コンテナの起動
参考：[GitLab Docs - GitLab Docker images](https://docs.gitlab.com/omnibus/docker/)

割愛。
イメージは`gitlab/gitlab-ce:latest`としました。(→エラーになりました。)

## リストア
できません。
エラーになります。
バックアップ元のバージョンが12.0.3だったのに、latest(13.2.4)にしようとしたため、
バージョン飛びすぎでエラーになりました。

### エラー解消
13.2.4にするためには、一旦13.0.x系にする必要があります。
そして、13.0.x系にするには、12.x.x系の最新にする必要がありました。
よって、以下の手順を取りました。

1. 12.0.3のイメージでコンテナを起動し、リストア
2. 12.10.14のイメージでコンテナを再作成→起動時にデータがバージョンアップされる
3. 13.0.12のイメージでコンテナを再作成→起動時にデータがバージョンアップされる
4. latest(13.2.4)のイメージでコンテナを再作成→起動時にデータがバージョンアップされる

とりあえずこれでDockerコンテナでgitlabが稼働し始めました。

次回：[DockerでPostgreSQLとOwnCloud](https://qiita.com/F_clef/items/6d988c188e4ecbfc42cd)
位置引数とキーワード引数、デフォルト引数

![スクリーンショット 2020-08-15 19.33.30 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527694/8a550335-819c-24b7-65f6-067089880639.png)
python3.7 
環境：pycharm

#位置引数
![スクリーンショット 2020-08-15 19.17.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527694/231cdbde-67df-82f0-2982-2bbff115cac2.png)
この位置が関係してくる

![スクリーンショット 2020-08-15 19.20.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527694/a10ea9d5-baae-0263-51b6-187d282b4298.png)

対応関係を誤るとこのように意図しない結果が現れることも！

#キーワード引数
そこでキーワードを与えておく![スクリーンショット 2020-08-15 19.23.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527694/75794d90-dc2b-ba24-cf7e-13bade47c943.png)

##注意点
キーワード引数と位置引数を共に使う場合は注意が必要
![スクリーンショット 2020-08-15 19.30.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527694/fbf611de-8939-3752-28c6-75e4842553a0.png)

#デフォルト引数
引数を渡さなかった場合、はじめに設定した物が使用される
![スクリーンショット 2020-08-15 19.33.30 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527694/6174aa64-98e7-fdd9-2702-92fe99dc0ff9.png)
Udemyを使いAWSソリューションアーキテクトアソシエイトを取得しました。

2020/3に個人ブログに書いた記事の移植になります。下にも書きましたが現在はバージョンが変わり若干内容が異なります。ただ勉強法にはあまり影響はないかと。


はじめに結果

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">思ったよりぎりぎりのスコアではなかった <a href="https://t.co/adoqQJbkjx">pic.twitter.com/adoqQJbkjx</a></p>&mdash; みゅーみくす (@myu_mx) <a href="https://twitter.com/myu_mx/status/1233730801268715520?ref_src=twsrc%5Etfw">February 29, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

勉強している方は間に合わせたほうが良いでしょう。（画像にマークしてるのは模試のやつですが）  
再受験ポリシーは14日となるので、…早めの受験計画を

### 勉強法
* 期間：11月〜2月の3ヶ月
* 実務：EC2,S3,Auroraなどのあたり。SQSとかSNSは全くでした。
* Udemyの学習動画、模擬試験集（2月に追い込み）
    * ※2020/3月の改定にもすでに対応しています。
* ブラックベルト

実務で触れない部分は動画のみの学習でハンズオンはやりませんでした。理解は薄く模試で間違いがちだったのでブラックベルトで補完。
理想は動画の通り自ら手を動かしてハンズオンです。

#### Udemy大活躍

Udemyは今後も資格取得や学習などに使いたいと思うサービスです。
Udemyの動画学習は事前ダウンロードでき、通信量を抑えながら通勤時間やスキマ時間に少しずつすすめることができて便利です。
理想は実際に手を動かしてハンズオンやりたいところですが、動画やその他学習で合格までたどり着くことも可能です。
演出問題は一問一答で正誤がすぐ分かり解説も流れで見れます。もう紙の教本には戻れないレベル…

##### 模試  
一時停止しいつでも再開可能です。
自動採点、正誤マークの有無で絞り込みできるので復習もしやすいです。
難易度が高めなので一回目で50%くらいのレベルでしたが試験は受かりました。

### 取得してみて

業務で触れない分野も体系的に知識が付く。そして使ってみたくなる。特にサーバレス
業務で触れる分野も細かい疑問にぱっと答えられるもしくはそういえばこうだったようなと言う引き出しができる。

### 次にやること

WindowsServer,ネットワークオンリーからLinux,AWSと来てインフラエンジニアとしても今風なスキルセットとなりました。 
これに続いてデベロッパーアソシエイトやDockerの勉強をしようと思います。
(2020/8追記 デベロッパーアソシエイトは英語版のハンズオンしかなく苦戦してます...)
User must exist エラー

```
def create
    @comment = @article.comments.build(comment_params)
end
```
上記の形から@comment変数にuser_idの入れ方が分からなかったので備忘録として
※アソシエーション後の話

結論

@commentはオブジェクトなので、.user_idメソッドを使用しcurrent_user.idを代入すれば良かった。
@comment.user_id = current_user.idの様な形

最終形

```
def create
    @comment = @article.comments.build(comment_params)
    @comment.user_id = current_user.id
end
```

基礎的な事が分かっていなかった・・・
オブジェクトとメソッドの関係を復習しよう
VScodeからGitHubにpushすると毎回GitHubに飛ばされる

## Visual Studio Codeからpushすると毎回GitHubに飛ばされる
VScodeからpushすると毎回GitHubの認証ページに飛ばされる。
Terminalからpushは問題なく実行出来る。
簡単に環境を書くとMac, Visual Studio Code, httpsでcloneしたリポジトリ。

## 出ていたエラー等
git pushすると、
> 拡張機能'GitHub'がGitHubを使用してサインインしようとしています

「許可」を押す
GitHubに飛ばされる
![スクリーンショット 2020-08-15 18.19.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176461/6bd48b68-7f94-35fb-0cf6-b20b7ab93235.png)
> Authorize Visual Studio Code to access GitHub

Continueを押す
![スクリーンショット 2020-08-15 18.22.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176461/694c7e5b-7be5-8cf0-6b60-be074c22115c.png)
Success!になり、再びVScodeに戻ると

> キーチェーンにアクセスできませんでした
The user name or passphrase you entered is not correct.

のようなエラーが出る(うろ覚え)
×でエラーを閉じると、git pushが完了する。

git push出来るには出来るが、毎回この工程を挟むのが辛い。

## 解決

キーチェーンを開く
開き方：⌘+spaceを押し、keychainを打ちEnter
![スクリーンショット 2020-08-15 18.29.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176461/f455d34c-dde1-c97b-4ec1-096f0de4598d.png)
ログインの上で右クリックし、「キーチェーン"ログイン"をロック」
![スクリーンショット 2020-08-15 18.31.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176461/bed268e7-a7b7-97c8-a462-c44dcb50b027.png)
再び、「キーチェーン"ログイン"をロックを解除」
Macのログインパスワードを入れて解除する

git pushすると、初回は同じようにGitHubに飛ばされますが、次回から聞かれなくなります。

## 教訓
公式ドキュメントを読もう。

https://code.visualstudio.com/docs/editor/settings-sync#_troubleshooting-keychain-issues
windowsのショートカットリンクURLを一括出力する方法

## ソースコード

```powershell:output_urls.bat
@echo off
for /f "tokens=1,* delims==" %%a in (
  'type *.url 2^>nul^|findstr /b "URL="'
) do @echo %%b
```

多分、ソースコードだけでは何しているのかさっぱりだと思うので、
お時間ある方は下も読んでくれると嬉しいです。

## 使い方

### はじめに

![スクリーンショット (36).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130352/69e737ce-300b-192d-0f4a-f36946b6558f.png)

まず、Google Chromeで、アドレスバーの部分を、所定のフォルダにドラッグアンドドロップするなどして、ショートカットリンクの一覧を用意します

### バッチファイルを作る

同じフォルダ内に、バッチファイルを用意します。
フォルダ内で右クリック > 新規作成 > テキストドキュメントで、「output_urls.bat」という名前でファイルを作ります。

任意のテキストエディタで、ファイルを開き、中に以下のコードをコピペして、保存します。

```powershell:output_urls.bat
@echo off
for /f "tokens=1,* delims==" %%a in (
  'type *.url 2^>nul^|findstr /b "URL="'
) do @echo %%b
```

### コマンドプロンプトを開く

![スクリーンショット (37).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130352/3b018de5-e5b7-713c-2a21-7023292b8c79.png)

アドレスバーのところに「cmd」と入力して、Enterキーを押します

### バッチファイルを実行する

![スクリーンショット (38).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130352/429b40d7-8030-d46d-d187-9682f7e69df8.png)

以下のコマンドを実行することで、URLの一覧が出力されます

```
output_urls.bat
```

## 仕組み

![スクリーンショット (39).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130352/f5f5e718-870e-f82e-a5c0-21a5851c5669.png)

`type "ショートカットリンク名.url"` と入力すると、2行目に、`URL=ショートカットURL` という文字列が出力されます。

同一フォルダ内のファイル数、forループして、typeでリンク先URLを出力し、
findstrで`URL=ショートカットURL`という文字列を取得して、
先頭の`URL=`という文字列を削除することで、
URL一覧を出力している感じです。

ファイルに出力したかったらこんな感じにコマンド実行すればいいと思います

```
output_urls.bat > urls.txt
```

以上。
Xcode iOS 実機でエラー dyld: Library not loaded

Xcode Swift iOS で実機で実行すると起動する前にエラー終了してしまいます。今回は対処法を３つ紹介します。

Xcode のエラー内容

```
dyld: Library not loaded: @rpath/Eureka.framework/Eureka
  Referenced from: /private/var/containers/Bundle/Application/4CA0EF18-AEE7-4A4A-B11D-3A4039FB4159/MyLive.app/MyLive
  Reason: image not found
```

# 方法１ ライブラリをアップデート
ますはライブラリとcarthageなどのアップデートを試します。

```
brew upgrade carthage
carthage update --platform iOS
```

# 方法２ ライセンスを更新

Apple Developer に久々にログインすると、ライセンスの更新がありました。
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253995/ef0f031c-cdf3-8de2-2cab-549a6181574c.png' width=60%>
ライアセンス更新後、Xcode の preferences の accounts を確認します。
以下ライセンスの意味です。
Apple Development（開発）
Apple Distoributon（ストア配布）

参考記事
https://qiita.com/umepiyo_a3/items/a8c37b9f321318b57289
これでもうまくいかないときは、古いライセンスを削除すると、うまくいくことがあるそうです（私はフォルダをリネームしました）
rm -rf ~/Library/Developer/Xcode/DerivedData/
rm -rf ~/Library/MobileDevice/Provisioning\ Profiles/

# 方法３ ライブラリの Embed（同梱）の設定

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253995/966cdf91-c937-ecf6-00c8-d80474b859ed.png' width=100%>

Xcodeのプロジェクトで
General - Frameworks, Libraries, and Embeded Content
Do Not Embeded -> Embed & Sign に変更します（動いた！）

# あとがき

いつのまにか Embed フラグが変わっていたようです。ライセンスを更新したので、ずっとライセンス周りを調べてハマってしまいました。ハマると怖いです。
[ServiceNow] カタログOnLoad時の実行順

サービスカタログ表示時に実行されるOnload処理の実行順を調べた覚え書き。

# 結論
- Catalog Client Script → UI Policy の順で実行
- Catalog Client Script はOrder順
- UI Policy はVariable Set → Catalog Item の順


# きっかけ
カタログアイテムと変数セットでそれぞれに表示制御が定義されていて、どれがどの順で動いているのかよくわからなくなっていた。

# 検証方法
カタログアイテムを作成し、OnLoadのUI Policy, Catalog Client Scriptを作成。
さらに変数セットを作成し、こちらにもOnLoadのUI Policy, Catalog Client Scriptを作成。
それぞれの実行時に下のようなコードを追加。

```alert.js
alert("トリガーされたイベント名");
```
![スクリーンショット 2020-08-15 17.56.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676866/e5b39907-a37d-88a5-1e8b-1c2dbf06b544.png)

カタログの試行（Try it）でダイアログが表示される順を確認する。

Orderが実行順に影響することもありえるので、Orderの値を変更して再検証を行う。

## 検証結果
- Catalog Client Script → UI Policy の順で処理される
- Catalog Client Script はOrder順
- UI Policy はVariable Set → Catalog Item の順

![スクリーンショット_2020-08-15_18_01_21.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676866/1c03c074-0ed6-bd99-6d5c-18b9a52eb047.jpeg)
↓
![スクリーンショット_2020-08-15_18_01_29.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676866/9264d5d2-4024-0b76-f3ca-387881970f01.jpeg)
↓
![スクリーンショット_2020-08-15_18_01_46.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676866/85b8a724-c16f-1d32-cb15-8e94b9066196.jpeg)
↓
![スクリーンショット_2020-08-15_18_02_23.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676866/327449b9-e365-ff3b-d1c5-ed3e234861f5.jpeg)

# 追加検証
ついでにRequest Item のUI Policy とClient Script も併せて検証してみました。

## 検証結果
- Client Script は Catalog Item → Request Item の順
- UI Policy も Catalog Item → Request Item の順
ABC169のB問題にnumpy.prod()を使うと不正解になった件



**B問題** https://atcoder.jp/contests/abc169/tasks/abc169_b



この問題を読んで、全部掛け算する、sumの掛け算版の関数があれば一発でできると思い、調べるとnumpy.prod()がそれにあたるということで、使ってみたら、WAでした。



**WA** https://atcoder.jp/contests/abc169/submissions/15692265



で、普通にfor文で掛け算してAC。大きい数の掛け算は遅くなるそうなので、範囲超えたらすぐbreakするようにしています。



**AC** https://atcoder.jp/contests/abc169/submissions/15692483



numpy.prodについて調査した。



<br>

調査用のjupyter notebookはgistで公開


https://gist.github.com/kokuyokugetter/0b3718a7b0bd0adf8f3c0f6f6e483b9e


<br>



最後の2セルを比較すると、1~20までの総積までは同じで、21からnumpy.prod()がズレているのが分かる。





numpyはC言語やfortranで実装されているそうなので、64bitの整数の符号ありの最大値9223372036854775807 を 1~20の総積2432902008176640000 で割った値が約3.8であるので、21以降でズレるというのは違和感がない。



その後1~20の総積に4を掛けてもズレたので、最大値が9223372036854775807というのもおそらく正しい。



bitがどう変化して負になったりするのか調べたらもっと確実なことが言えそうですが、競プロ的には総積はpythonの組み込みだけで真面目にやりましょうって感じで終わりです。
Laravelで画像の表示からアップロードまでをわかりやすく解説します

## やること

####ユーザーのプロフィール画像の表示とアップロードをできるようにします。

### 環境

- mac OS Catalina 10.15.6
- Laravel 7.22.4

## 方法

###1. シンボリックリンク作成

 ```:terminal
 php artisan storage:link
 ```

 - シンボリックリンクとは？

     **簡単に言うと、ショートカットのような機能です。**

     例えばLaravelでは「一般のユーザーがwebからhtp://xxxxxx/storageに画像を送ると、Laravel内では/storage/app/publicに保存する」という動きをしますが、この紐付けをしているのがシンボリックリンクです。

###２. config/filesystems.phpで1で作成されたシンボリックリンクを確認（必要に応じて追加）

 ```php:config/filesystems.php
    		/*
        |--------------------------------------------------------------------------
        | Symbolic Links
        |--------------------------------------------------------------------------
        |
        | Here you may configure the symbolic links that will be created when the
        | `storage:link` Artisan command is executed. The array keys should be
        | the locations of the links and the values should be their targets.
        |
        */

        'links' => [
            public_path('storage') => storage_path('app/public'),
        ],
 ```

 これでwebから見た時の`/storage`とLaravel上の`storage/app/public`がリンクするようになります。

 さらに今回は画像を扱う事をわかりやすくするため、公式ドキュメントと同じく、`images`フォルダを作成して保存するように設定を追加します。

 ```php:config/filesystems.php
        'links' => [
             public_path('storage') => storage_path('app/public'),
             public_path('images') => storage_path('app/images'), //追加
        ],
 ```

 これでweb上の`/images`とLaravel上の`storage/app/images`がリンクします。

 ※公式ドキュメントでは

 > Webからのアクセスを許すには、public/storageからstorage/app/publicへシンボリックリンクを張る必要があります。

  とありますが、リンクにあるweb上の**`public`は不要です。`/storage`でアクセスできます。**

  このせいでうまくリンクされずに苦労しました。

  一行追加したので、反映させるために**再度コマンドを打ちます。**

 ```php
    php artisan storage:link
 ```

###3. 動作確認

 試しに`storage/app/images`に画像ファイルを置いて`http://localhost/images/ファイル名`でアクセスします。
ここまでで表示はできるようになりました。

  次はアップロード方法です。

###4. アップロード方法
 **※`enctype='multipart/form-data'`は忘れずにformタグに入れてください。**

 ```php:user.blade.php
    <form action="/profile/{{$user->name}}" method="POST" enctype='multipart/form-data'>
    @csrf @method('PUT')
    <input type="file" accept="image/*" name="image">
    </form>
 ```

 上のようにして画像送信をしたら、次はコントローラーでの操作です。

 ```php:UserController.php
    public function update(Request $request, $userName)
        {
            $user = User::where('name', $userName)->first();
            //↓で保存しています。
            $filePath = $request->file('image')->store('images');
            $user->image = basename($filePath);
            $user->save();

            return redirect('/profile/' . $userName);
        }
 ```

 順に説明します。

  `$request->file('image')`では受け取ったimageを`file()`でファイルとして読み込ませます。

  `store(保存先)`とすることでファイルが保存されます。ファイル名は自動的にIDが割り振られます。変数としてファイルパスが返されるので`$filePath`に代入します。

  このままだと`$filePath`に`/public`などの余計な部分が入っているので、`basename()`で最後のファイル名の部分のみを取り出して保存させます。

  以上でファイルのアップロードも完了です。お疲れさまでした。



####参考

[Laravel 7.x ファイルストレージ](https://readouble.com/laravel/7.x/ja/filesystem.html)

「パブリックディスク」、「ファイルアップロード」を参照
overcommitでRSpec, Brakeman, Rubocop, RailsBestPracticesを走らす

## なぜovercommitを使おうと思ったか
- テストや静的解析を自動で実行したい
- git hooksを使うと、commit、pushなどのタイミングで特定のスクリプトを実行できる
- git hooksの内容はgitで管理出来ない
- overcommitを使うとgit hooksを管理、拡張できる

## 前提
- Rspec(テスト自動化)
- Brakeman(セキュリティチェック)
- Rubocop(Rubyのコード解析)
- RailsBestPractices(Railsのコード解析)

をすでに導入済みで、手動でコマンドを叩ける状態になっていることを前提に書いていきます。
使っていないツールがある場合は、その部分の設定は無視してください。

## 導入
```rb:Gemfile
group :development do
  gem 'overcommit'
```
```zsh
$ bundle install
$ overcommit --install
```
```.overcommit.yml
# 不要なチェックを無効化
CommitMsg:
  ALL:
    enabled: false
PreCommit:
  AuthorEmail:
    enabled: false
  AuthorName:
    enabled: false
  BrokenSymlinks:
    enabled: false
  CaseConflicts:
    enabled: false
  MergeConflicts:
    enabled: false
# 必要なチェックの設定
  RuboCop:
    enabled: true
  RailsBestPractices:
    enabled: true
PrePush:
  Brakeman:
    enabled: true
  RSpec:
    enabled: true
```
```zsh
$ overcommit --sign #設定変更を反映
```

なお、設定ファイルで明示的に設定した項目以外は、[デフォルトの設定](https://github.com/sds/overcommit/blob/master/config/default.yml)が適用されます

## 動作確認
以下、動作確認方法の一例です。
**Rubocop**
適当なcontrollerに`Time.now`を埋め込んで、Commitできないことを確認
**RailsBestPractices**
適当なmodelに`default_scope order(created_at: :desc)`をセットして、Commitできないことを確認
**Brakeman**
適当なcontrollerに`http_basic_authenticate_with name: 'ID', password: 'password'`をセットして、Pushできないことを確認
**RSpec**
パスしないテストを書いて、Pushできないことを確認

## ハマったところ
手動でRSpecを実行するとパスするのに、pre-pushのチェックをパスできず、以下のメッセージが表示されました。

```
NameError:
  uninitialized constant Capybara::DSL
```

手動で叩く時は`bin/rspec`を実行しているけど、pre-pushの時は`bundle exec rspec`を実行しているので、微妙に挙動が違ってくるみたいです。`spec_helper.rb`に以下を追記して解決。

```spec/spec_helper.rb
RSpec.configure do |config|
  # 以下の3行を追加
  ENV['RAILS_ENV'] ||= 'test'
  require File.expand_path('../config/environment', __dir__)
  require 'rspec/rails'
```
## 参考
- [sds/overcommit: A fully configurable and extendable Git hook manager](https://github.com/sds/overcommit)
- [overcommit/default.yml at master · sds/overcommit](https://github.com/sds/overcommit/blob/master/config/default.yml)
- [git hooksをovercommitで管理して作業効率の底上げを狙う - LCL Engineers' Blog](https://techblog.lclco.com/entry/2018/03/27/170000)
【駆け出しエンジニア必見】様々なプロセスの確認と停止方法まとめ


#プロセスIDを特定する

###システム上で動いてるプロセスを、種類を指定して特定する

```shell
$ ps aux | grep 種類
```

###指定したポートから、プロセスを特定する

```shell
$ lsof -i -P : grep ポート
```
-i オプションは、ネットワークソケットを対象にしている
-P オプションは、ポート名の代わりにポート番号で表示する



#様々なプロセスの削除

###プロセスIDや種類を指定して削除する

```shell
$ kill -9 プロセスID

$ kill -9 プロセス種類
```

###springのプロセス削除

```shell
$ ps aux | grep spring
  ec2-user 12241 0.3 0.5 589960 178416 ? Ssl Sep20 1:46
  spring app | sample_app | started 7 hours ago

# 指定のプロセスを一つ削除
$ kill -9 12241
$ kill -9 -f 12241

# 指定のプロセスの種類を一括削除
$ spring stop
```

###mysqldのプロセス削除

```shell
$ sudo lsof -i -P | grep "LISTEN"
rapportd    315     beanzou    4u  IPv4 0xb08837e715006a8d      0t0    TCP *:60753 (LISTEN)
rapportd    315     beanzou    5u  IPv6 0xb08837e7098fcf3d      0t0    TCP *:60753 (LISTEN)
mysqld    20675      _mysql   21u  IPv4 0xb08837e71962630d      0t0    TCP localhost:3306 (LISTEN)
com.docke 21307     beanzou   10u  IPv4 0xb08837e71878be4d      0t0    TCP localhost:60810 (LISTEN)
com.docke 21308     beanzou   52u  IPv6 0xb08837e7098fdb7d      0t0    TCP *:8080 (LISTEN)

$ mysql.server stop
```