OmniAICreator/Qiita-1.07M huggingface dataset:
GCPのCloud DeployをCloud Buildから呼び出すときにエラーになる(ACTAS_PERMISSION_DENIED)

GCP環境で主にGKEのCI/CDをやろうとしたときに軽くハマったのでメモ的に書きます。

### Cloud Deployとは

主にGKE(Google Kubernetes Engine)へのコンテナイメージのデプロイに利用します。
CI/CDで言うとCD(Continuous Delivery)にあたります。

Kubernetesでは良くCIとCDを分けて考えられるのですが、ArgoCDなどをインストールしなくても、コンテナイメージを動作環境に合わせてプロモート出来るのが最大の魅力と考えます。

(参考)
https://cloud.google.com/blog/ja/products/devops-sre/google-cloud-deploy-automates-deploys-to-gke


### Cloud Buildとは

GCP上で様々なタスクを実行するためのサービス。Github Actionsのようなもの
コンテナイメージのビルドも出来る。

Cloud Deployを使うなら、Cloud Buildと連携してGCP内でCI/CDを完結させたいというモチベーションは高い。


### 本題のエラーについて

設定して使ってみたところ、Cloud Buildから以下のような感じで Cloud Deployを実行する際にエラーになる
それぞれの設定はダミーです。

実行内容
```
  - name: gcr.io/google.com/cloudsdktool/cloud-sdk
    entrypoint: gcloud
    args:
      [
        "deploy", "releases", "create", "rel-${SHORT_SHA}",
        "--delivery-pipeline", "${_PIPELINE_NAME}",
        "--region", "${_COMPUTE_ZONE}",
        "--source", "hoge.yaml",
        "--images", "app=$_IMAGE_NAME:$COMMIT_SHA"
      ] 
```

エラー
```
domain: clouddeploy.googleapis.com
metadata:
  serviceAccount: xxxxxxxx-compute@developer.gserviceaccount.com
  reason: ACTAS_PERMISSION_DENIED
```

### 解決策

Cloud Buildを実行させるサービスアカウント
`xxxxxxxx@cloudbuild.gserviceaccount.com`
に権限を追加する。

### NGだった
カスタムロールを作成して
`iam.serviceAccounts.actAs`
を入れておけば良いかなと思ったがNG

### OKだった
Editor権限を追加したらうまくいった(調査中)
(IAMで足りていない権限を見ていくと
`container.clusters.getCredentials`
あたりが怪しいのではないか)

### 所感

Cloud Deployがすごく便利なので、是非試してみて欲しいです。


(参考文献)
https://medium.com/google-cloud-jp/cloud-deploy-%E5%AE%9F%E8%B7%B5%E7%B7%A8-ci-%E3%81%A8%E3%81%AE%E9%80%A3%E6%90%BA-c22a6bc96286
Webサイトのフッター下部の空白をなくすJavaScript関数&CSS(make footer stick at bottom)

下記の関数により、フッター下部の空白を埋めることができる。
どのページサイズ(縦)にも適応できる。
```
# JavaScript
function makeFooterSticky(){
    var footer_pos = $('.footer').offset().top;
    var footer_height = $('.footer').outerHeight();
    var body_height = $(document.body).outerHeight();

    if (footer_pos + footer_height < body_height){
        $('.footer').addClass('fixed-bottom');
    }
    else{
        $('.footer').removeClass('fixed-bottom');
    }
}
```
```
// CSS
// bootstrapを使用している場合は、それに付属している。
.fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
}

// .footerクラスはJqueryで識別するためだけに使用しているので、
// cssファイル内に記述する必要ない。
```
```
<!-- HTML -->
<footer class="footer">
  Fotterここ
</footer>
```

使い方
1. Footerのエレメントに```footer```クラスを追加する。
2. Bootstrapを使わない場合は、上記のCSSをcssファイルに追加する。
3. 以下のJavaScriptを```onload```など必要なときに実行する。
```
makeFooterSticky();
```
【備忘録】Android StudioでAABファイルを作成する手順

# 概要
Androidアプリをストア登録する際に、APKファイルではなく、「署名付きAAB」を推奨している状況になっています。
ここでは、AABファイルを作成する手順を備忘録で残しておきます。

そう、自分用ってことさ。

# 前提
* Android Studio
* 適当なプロジェクト


# 手順
* AABファイルを作成するプロジェクトの「ビルド」-「署名済みバンドル/APKの生成」をクリックします。
![CAP001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/06a22f31-ce8e-2731-866c-ff53ff60abdf.png)

* 「**Android App Bundle**」を選択します。（略してAAB）
![CAP002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/f521ef85-f593-54ff-5d7e-0d902b61d173.png)

* 「キー保管パス」の「新規作成」ボタンをクリック
![CAP003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/128a602d-07aa-6bc3-9143-0c692d990ca7.png)

* 「キー保管パス」欄内のフォルダアイコンをクリック
![CAP004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/4bfc7d5e-2cb6-f287-ef5c-86b9ce105db8.png)

* 現在のプロジェクトフォルダを選択して、ツールバーの「フォルダ作成」ボタンをクリック
![CAP005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/ff6bae00-5933-d934-2723-754fbc921f7f.png)

* フォルダ名は適当ですが、後で見てうっかり削除しないように「key」などがよいかと。フォルダを作ります。
![CAP006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/07ff0848-0c87-dc5d-bbc2-80671ab7369b.png)

* 作成されたフォルダ（key）を選択します。
![CAP007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/c823c383-db24-aab6-190f-591f2acfca1f.png)

* 「ファイル名」欄に「key」（これもわかりやすいという意味で）と入力します。「jks」はそのままで良いです。
![CAP008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/4f3a7fd5-2fd5-ecc8-becb-11888e5099d4.png)

* 「キー保管パス」が終わったので、「パスワード」を入力します。（パスワードはどこかに記録しておきます）
:::note warn
注意
パスワード欄が2か所ありますが、最近のアップデートで2か所のパスワードを「**同じ**」にしないとエラーになるようになりました。
最初は、なぜエラーになるのか分からなかったのですが、同じパスワードにしないとダメなようです。
:::

![CAP009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/824e82ab-fff6-0826-bbdd-0f4bd27173c6.png)

余談ですが、2か所のパスワード欄を異なるものにすると、下記のようなエラーが出ます。
（日本語化してるのが原因かもしれませんが、何を言ってるか意味不明です）
なので、同じパスワードにしてください。
![CAP010.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/720ad4d0-090f-7ebf-7e40-f1ef38a71e85.png)
![CAP011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/1275f841-a608-a3ce-2fdb-f6e642a68e33.png)

* 「証明書」欄は「名前と苗字」と「国コード（XX）」に記載していれば大丈夫。
![CAP012.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/7046b5b4-0ee3-499c-c288-a2bf44befa0c.png)
:::note info
参考
2か所とも同じにしたけど、エラーが出続けるんですが・・・・
という場合は、keyフォルダ内のkey.jksを一旦手動で削除してから、もう一度試してください。
:::

* 「キー保管パスワード」、「キー・エイリアス」、「鍵パスワード」欄には、自動的に入力されます。「パスワードを記録する」にチェックを付けると、ストア登録してるものを更新する際に便利です。
![CAP013.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/2987646b-249f-59ec-83c7-641147711740.png)

* 「暗号化キー・エクスポート・パス」は、keyフォルダにしておくと、管理が楽かもしれません・・・
![CAP014.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/bdb30339-d909-eac4-932d-35307aeae581.png)

* ストア登録する場合は「release」にします。
![CAP015.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/8cde253c-309a-fff0-c259-b71f63abc20c.png)

* これで、Gradleのビルドが始まり、完了すると下記の場所に「**app-release.aab**」が作成されます。
ストア登録のアップロードは、このファイルをアップロードします。
```
C:\Users\xxxx\AndroidStudioProjects\SampleABC\app\release\app-release.aab
```

お疲れさまでした。
【iOS,Swift】上下左右の罫線を指定可能なCustomViewを作った（@IBDesignable）

# 環境

  * Xcode 13.2.1
  * Swift 5.5.2


# 上下左右に罫線となるUIViewを配置したXibファイルを作る

制約は省きますが、↓画像のような、上下左右にWidth:5pxのUIViewを配置したXibファイルを作ります
（わかりやすいように上下左右の罫線はそれぞれ別の色にしてます）

※このXibのファイル名は「DesinableBorderView.xib」としてます。

![スクリーンショット 2022-03-18 17.32.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/827233/82cdb3e1-0361-a819-4ad6-d0b04f9b5483.png)


# Xibファイルに対応したCustomViewクラスを作成する

コードそのまま載せます。
ポイントとしては、上下左右の表示・非表示を設定ができる、BoolのIBInspectable　を作ったことです。

```swift
import UIKit

@IBDesignable
class DesinableBorderView: UIView {

    /*
      IBOutletを引く時は、XibファイルのFile's Ownerにこのクラスを指定する
     */
    @IBOutlet weak var leftBorder: UIView!
    @IBOutlet weak var rightBorder: UIView!
    @IBOutlet weak var topBorder: UIView!
    @IBOutlet weak var bottomBorder: UIView!
    
    /// 左の線を描画するかどうか
    @IBInspectable var isHiddenLeft : Bool = true {
        didSet {
            if self.rightBorder != nil {
                self.leftBorder.isHidden = isHiddenLeft
            }
        }
    }
    /// 右の線を描画するかどうか
    @IBInspectable var isHiddenRight : Bool = true {
        didSet {
            if self.rightBorder != nil {
                self.rightBorder.isHidden = isHiddenRight
            }
        }
    }
    /// 上の線を描画するかどうか
    @IBInspectable var isHiddenTop : Bool = true {
        didSet {
            if self.topBorder != nil {
                self.topBorder.isHidden = isHiddenTop
            }
        }
    }
    /// 下の線を描画するかどうか
    @IBInspectable var isHiddenBottom : Bool = true {
        didSet {
            if self.bottomBorder != nil {
                self.bottomBorder.isHidden = isHiddenBottom
            }
        }
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        loadNib()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        loadNib()
    }
    
    override func prepareForInterfaceBuilder() {
        // StoryBoard上でリアルタイムに反映する用
        super.prepareForInterfaceBuilder()
        loadNib()
    }
    
    func loadNib() {
        NSLog("loadNib")
        let bundle = Bundle(for: type(of: self))
        let nibName = String(describing: DesinableBorderView.self)
        let view = UINib(nibName: nibName, bundle: bundle).instantiate(withOwner: self, options: nil).first as! UIView
        view.frame = self.bounds
        addSubview(view)
    }
}
```


このファイルを作成したら、Xibファイルのほうに戻って、FilesOwnerやIBOutletを引くと、
≡みたいなアイコンのタブに、IBInspectable の選択肢が出ると思います。

![スクリーンショット 2022-03-18 17.44.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/827233/3e826baf-d45d-62e4-d059-78654bb8044f.png)


「Is Hidden Left」をONにすれば、左の罫線を非表示できます。
「Is Hidden Left」をOFFにすれば、左の罫線を表示できます。
（ほかの方向も同じです）

# 最後に

需要があるかわかりませんが、
罫線を引くのにプログラムでいちいちやらなきゃいけなくてめんどくて、
IBDesignable　でリアルタイムで見れるようなやつを作りました。
【GO環境構築】環境構築をしてVSCodeで少し動かすまで

### ゴール
Go言語の基礎が始められる状態にする

Go言語の基礎

https://astaxie.gitbooks.io/build-web-application-with-golang/content/ja/02.1.html

a tour of Go

https://go-tour-jp.appspot.com/list

### 環境
- mac

### 環境構築に必要なこと
- インストール
    - コマンド実行 `brew install go`
- 環境変数の設定
    - パス追加とGOPATHの設定
        - `export GOPATH=$HOME/go`
        - `export PATH=$PATH:$GOPATH/bin`

- ディレクトリの作成
    - 環境変数GOPATH配下「bin」「pkg」「src」のフォルダを作成
        - `mkdir -p go/bin`
        - `mkdir -p go/pkg`
        - `mkdir -p go/src`

- VSCodeの設定
    - VSCodeの拡張機能を”go”で検索し、"Go"をインストール
    - goのコードアシストなどのツール類をインストール
        -  （表示 -> コマンドパレット）に、"Go:Install/Update Tools"と入力後、全てインストール
    - ソースコードをsrc配下に配置する

### 実行方法
- コマンド実行
    - `go run 〇〇.go`
- VSCode実行
    - 実行ボタン これならデバッグ実行できる
- 実行ファイル実行
    - `go build`で生成されたファイルを実行する

### コマンド
- go build
    - `go build hello.go`
    - 実行するとコンパイルされる。
    - 実行ファイルが作成される
- go install 
- go fmt
    - コードフォーマッターのコマンド。インデントや改行位置などを自動調整する。
- go test
- golint
    - Goらしくないコーディングスタイルに対して警告をするコマンド。

### 感想
- どこか懐かしさがある
GitHub Actions 「Job is waiting for a hosted runner to come online.」が出たら

# 結論

待つしかないです。

# 状況

GitHub Actionsで下記、見慣れない表示に遭遇しました。

> Requested labels: ubuntu-latest
Job defined at: \<リポジトリ名\>/.github/workflows/\<ワークフロー名\>/heads/\<ブランチ名\>
Waiting for a runner to pick up this job...
Job is waiting for a hosted runner to come online.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662111/997e1639-afec-b5fc-182f-d9266c8a0eab.png)

# 調べてみたら

GitHubの[issue](https://github.com/actions/runner/issues/1400#issuecomment-997050849)でやり取りされていました。
どうやらサービスインシデントがあり、その影響というところでcloseされています。


また、GitHubのインシデントの履歴を見てみると、「Job is waiting for a hosted runner to come online.」を確認した1時間前に[障害があった](https://www.githubstatus.com/incidents/dcnvr6zym66r)ようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662111/f4536d36-9822-71e7-da2f-f5b0d0db36a5.png)
※UTCなので+9時間をお忘れなく。
２．基本設計（BD、Basic Design）

**＜開発工程＞**
---
<font color="Gray">１．要件定義（RD、Requirement Definition）</font>
<font color="Red">**２．基本設計（BD、Basic Design）**</font>
３．詳細設計（DD、Detail Design）
４．開発（CD、Coding, Development, Programming）
５．テスト（Test）
　５－１．単体テスト（UT、Unit Test）
　５－２．結合テスト（IT、Intergration Test）
　５－３．システムテスト（ST、System Test）
　５－４．ユーザ受け入れテスト（UAT、User Acceptance Test）
６．リリース（Release）、移行（Migration）
７．運用（Operation）
８．保守（Maintenance）</font>


２．基本設計（BD、Basic Design）
---
**１．定義**
基本設計について色んな定義があると思いますが、
ここでは要件定義を以下のよう定義します。
<font color="Red">ユーザ（顧客）観点で</font>「５W１H」内容に従い、
システム（機能）<font color="Red">開発内容が分かる文書を作成する工程</font>。

**２．主な項目**

- 概要及び目的
- システム構成
- 開発詳細 　　　　　　　　　　　<- 要件定義の機能要件
１）ネットワーク構成 　　　　　<- ユーザとシステム間、システムとシステム間
２）システム構成　　　　　　  　<- イメージ化 
３）インタフェース設計 　　　　<- その他システムの連携がある場合
４）帳票設計 　　　　　　　　　<- 出力する帳票（文書）がある場合
５）画面機能設計 　　　　　　　<- 画面一覧、画面遷移図、画面UIと各イベント処理内容
６）バックグラウンド機能設計 　<- 機能一覧、バッチ等
７）データベース設計 　　　　　<- ER図、テーブル定義書等
- 運用計画
- テスト計画
- スケジュール
- 開発体制
- 割り切り事項

**３．まとめ（一言）**
基本設計工程は<font color="Red">「開発においてユーザーとの契約書を作成する工程」</font>と言えるほど一番重要な工程の一つ。
<font color="Red">※出来もしない約束をしないよう気を付けよう！</font>
Lightsail WordPress環境にBasic認証をかける

この手の記事は結構出てくるが，bitnamiのディレクトリ構造が結構変わっているので備忘録
WordPressのプラグインを入れた方が早いが．今回はApache側で提供されている機能を使う

ただしLightsailに入っているBitnamiでの設定方法は少々特殊
https://docs.bitnami.com/aws/infrastructure/lamp/administration/use-htpasswd/
こちらの手順に従って設定していきます

1. パーマリンクを設定
2. .htpasswdを作成
3. Apacheの2つの設定ファイルを編集

という3ステップ

## 1.パーマリンクを設定
WordPress側でパーマリンクを設定
これをしなければ認証に必要なファイルが作成されない
大抵の人は設定済みかと思うが念の為

WordPress管理画面→設定→パーマリンク→（何もいじらずに）設定を変更ボタン

## 2.htpasswdを作成
サーバーに入り.htpasswdというパスワードファイルを作成
どこにおいても良いが分かりやすくwordpressディレクトリ内に置く

```
cd /home/bitnami/stack/wordpress
vi .htpasswd
```

.htpasswdに書き込む内容は，
https://tech-unlimited.com/makehtpasswd.html
このようなジェネレータで作ったもの
（passwordは暗号化される）


## 3.Apacheの2つの設定ファイルを編集
2.で作った.thpasswdファイルを，confファイルで読み込むことでBasic認証がかかります

下記2ファイルを編集します
* /opt/bitnami/apache2/conf/vhosts/wordpress-vhost.conf
* /opt/bitnami/apache2/conf/vhosts/wordpress-https-vhost.conf

エディタを使いファイルを見ると，

```
<Directory "/opt/bitnami/wordpress">
```

という記載があると思いますが，その下に以下の4行を追加

```
AuthType Basic
AuthName MyAuthName
AuthUserFile "htpasswdファイルのパス"    #　今回は，　"/home/bitnami/stack/wordpress/.htpasswd"
Require valid-user
```

さらに，　”Require all granted” という記載もあるので，これをコメントアウト

```
# Require all granted
```

コンソールに戻り，Apacheサーバーを再起動

```
sudo /opt/bitnami/ctlscript.sh restart apache
```
  

URLにアクセスして認証ががかかっていることを確認
VB.NETのClickOnceで引数を取りたい

## ClickOnceで引数を取る方法



```vb:VB.NET
        If (ApplicationDeployment.IsNetworkDeployed) Then
            'ClickOnce application

            '起動側の記述例　hoge.exe.appref-ms "引数1,引数2,引数3"
            'ActivationData(0)に"引数1,引数2,引数3"が入ってきます。

            Dim url As String = AppDomain.CurrentDomain.SetupInformation.ActivationArguments.ActivationData(0)

            '引数の数をカウントする
            argsCnt = CountChar(url, ",")

            '引数があれば配列に格納する
            If argsCnt > 0 Then
                arg = url.Split(",")
            End If

        Else
            'normal application
            'Dim args() As String = Environment.GetCommandLineArgs()
        End If
```
Bootstrap5でCardsを利用して画像や文字を重ねる方法

## はじめに
備忘録
Bootstrap5で画像や文字を重ねる方法の一例です。
こんな風にもできるんだなーくらいに思ってください。
どなたかのお役に立てれば幸いです。
## 実装方法
Cardsの「[card-img-overlay](https://getbootstrap.jp/docs/5.0/components/card/#image-overlays)」を使います。
cardクラスの中身に「card-img-overlayのみ」を書くことによって背景に設定した色をそのまま表示することができます。
リファレンスには、
>コンテンツは画像の高さを超えないようにしてください。もしコンテンツが画像より大きい場合、画像をはみだしてコンテンツが表示されます。
とあるので、これを逆手に取ります。
つまりcardクラスは使いますが、card-img-overlayがわざとcardの範囲をはみ出すようにすることで、自由にレイアウトができるようにしています。
また、cardクラスと一緒にborder-0クラスを指定することで、cardクラスに初期設定されている囲いの線を消すことができます。
```html
<div class="card border-0">
   <div class="card-img-overlay">
      <div class="row">
         <div class="col">
            <p>card-img-overlayの中でrowを使うこともできるし</p>
         </div>
         <img src="foo.png" class="col" alt="foo">
      </div>
      <div class="card-img-overlay">
         <p>card-img-overlayをもう1回使うこともできる</p>
         <img src="hoge.png" class="" alt="hoge">
      </div>
   </div>
</div>
```
:::note warn
この例では、重ねたい画像や文字の下にコンテンツが何もない状態を想定しています。
もし下にコンテンツを配置したい場合は、
+ 初めのcard-img-overlayの中（\<div class="row">や2つ目の\<div class="card-img-overlay">と同じ階層）にHTMLを記述していく
または
+ 下に配置するコンテンツに、cardの大きさ分のmargin-topやpadding-topを設定する
ことで解決できます。
:::
## 参照
https://getbootstrap.jp/docs/5.0/components/card/
# ブログもあります
https://kyit.net/how-to-overlay-images/
【NestJS】複数のテストファイルを実行するとテストが失敗するようになった場合の対策

# 概要

ある日、複数のテストファイルを実行していると意図しない挙動が発生してテストが失敗するようになった

今回はその改善方法をまとめる。

```bash
jest --watch --config ./src/test/e2e/jest-e2e.json
 RUNS  src/test/e2e/contractors.e2e.spec.ts
 RUNS  src/test/e2e/contractors.e2e.spec.ts
 FAIL  src/test/e2e/execBackup.e2e.spec.ts (27.724 s)
 RUNS  src/test/e2e/contractors.e2e.spec.ts

QueryFailedError: Table 'agency_widgets' already exists
```

# 原因

> Jestでは、パフォーマンスのために複数のテストファイルが並行に処理（テスト）されます。しかし、並行処理が思わぬエラーを生むこともあります。
たとえば、データベースへ接続するテストやpuppeteerを使ったE2Eテストなど副作用を生じさせるテストの場合、テストの書き方や実行タイミングによってはテストが失敗したり、想定しないテスト挙動の原因になります。

https://qiita.com/noriaki/items/5d800ea1813c465a0a11

# 前提

テストコードの書き方は以下を参照ください

https://zenn.dev/naonao70/articles/5167d8c18c81e2

https://zenn.dev/naonao70/articles/67d61979886553


# 解決方法

```bash
# 現在のプロセスで全てのテストを1つずつ実行
--runInBand

# 全テストが終了した後にJestを強制的に終了
--forceExit 

# Jest が何も出力せずに終了するのを防ぐ
--detectOpenHandles
```

> 複数のテストファイルが1つずつ順番に処理されます。具体的にはテスト実行用ワーカーの子プロセスを生成せず、元のプロセス上で順次テストファイルを処理していきます。

https://qiita.com/YutamaKotaro/items/798832e108585c7892a4

```bash
jest --runInBand --forceExit --detectOpenHandles
```
AWS Data Analytics - Specialty対策 in EMR

## 概要
Apache HadoopやApache SparkなどのOSSを利用した、ビッグデータ分析が可能なAWSのサービスです。
簡単に言うとマネージド型 Hadoop フレームワーク

## 関連する用語

### Hadoop
大規模データの蓄積・分析を分散処理技術によって実現するオープンソースのミドルウェアです

### Spark
分散共有メモリの仕組みをもち、複数マシンでメモリを共有することで、機械学習のような同じ処理の繰り返し、同じデータを何度も使うような処理において、Hadoopと比較して大幅に高速だとされる。オープンソースのソフトウェアフレームワーク

### Hive
Hadoop上に構築されたデータウェアハウス構築環境で、SQLライクな「HiveQL」を使ってデータの集約・問い合わせ・分析を行える。

### Presto
Presto は複数のデータソースのクエリに役立ち、MySQL、Redshift、Hive と直接やりとりするためのコネクタも提供できる

### Pig
Hiveと同じくHadoop上で動作するプログラムを作成できる。
スクリプト言語を使ってデータの集約・問い合わせ・分析を行える。

### Apache Ranger
Rangerは、Hadoopコンポーネント全体での一貫性のあるセキュリティポリシーの定義、運営、管理を可能にする、集中的なプラットフォーム

### EMRノートブック
クエリとコードを実行できるノートブックで視覚化できる
イメージ→https://paiza.io/ja/projects/new?language=python3

### ブートストラップアクション
EMRによって起動されるノードに対して、起動時に任意の処理を追加で実行できる仕組み
ymコマンドなどで追加のソフトウェアなどを追加でインストールできる。
**EMRはカスタムAMIが利用できないから**

## EMRの仕組み
とても簡潔にすると下記のような感じ
![スクリーンショット 2022-03-18 18.29.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501320/ec73cfd1-475c-eb0d-f333-9e739f0ca1ca.png)


## EMRクラスターの中

### マスターノード
クラスターを管理する役目をしていて、インスタンスグループの健全性を監視などもする

### コアノード
マスターノードによって管理されており、データノードデーモンを実行して、Hadoop Distributed File System (HDFS)の一部としてデータストレージを調整する。

### タスクノード
タスクノードを使用して、Hadoop などのデータに対して並行計算タスクを実行するためノード

### Hadoop Distributed File System (HDFS)
EMRクラスターでジョブ実行中の作業領域として使用するストレージ

### クラスターでのコスト最適化
マスターノード、コアノードはオンデマンドインスタンやリザーブドインスタンスなどを使用して、タスクノードにはスポットインスタンスなどを使用することでコスト最適化ができる



## EMRの特徴

### コストのが低い
10ノードのEMRクラスターの使用を1時間あたり0.15USDで使用することができます。
クラスター自体処理されると削除されるので待機時間などの料金もかかりません

### 伸縮性
クラスターサイズをAuto Scalingで何千台の多さで自動で増減することができます。

### 使用性が良い
マネージドなので自分が1から設定しなくてもAWSでよしなにやってくれる。
特定のサーバに不具合が出た場合もAutoScalingなどの対応で短時間で解決ができる


## EMRの使い所

- 大量のデータを処理する
- 続々とデータが追加される
- 分散処理


## 試験でよくある問題対策

### データの圧縮アルゴリズム
- bzip2のような分割されているものや、snappyのような高圧縮処理の圧縮アルゴリズムを使う

### 暗号化

#### 保管時の暗号化
- サーバー側の暗号化 or クライアント側の暗号化

#### 転送時の暗号化
- EMR クラスターノードと Amazon S3 間で伝送中の EMRFS オブジェクトをTLSによる暗号化を行う

#### ローカルディスクでの暗号化
- HDFSの暗号化とLUKSの暗号化
- EBS ルートデバイスボリュームを暗号化するには、カスタムAMI を指定する

### Apache Sparkでのパフォーマンス改善
- S3Slelectを使用して必要なデータのみを取得する
- Apache Spark DataDramesを使用して分散したデータを列に戻す

### ブートストラップアクションの活用
- Hadoopの設定を上書きする
- 利用したいライブラリのインストールやエイリアスの設定
- タイムゾーンの変更など
- Gangliaをインストールして利用する

### EMRへのアクセス権限
- EMRには複数のIAMロールを紐付けることができず、ユーザーごとのアクセス権の切り替えなどもできない
- Glueリソースポリシーを使いデータカタログへのアクセス権を制御する


## 内容については随時更新します
間違っているところなどありましたら是非コメントいただきたいです:bow

## 参考にさせていただいた記事
https://oss.nttdata.com/hadoop/hadoop.html
https://www.skyarch.net/column/amazon-emr/
https://dev.classmethod.jp/articles/beginner-what-is-emr-overview/
https://zenn.dev/mn87/articles/00825e91124796
Scalaの勉強はじめました 1 〜基本的な文法と素因数分解〜

## はじめに
N予備校のプログラミング入門コースでNode.jsを学び、その勢いのままScalaの勉強を同じくN予備校で受講し始めました。

## 用語
### JVM
:::note
Javaを動かすための、Java Virtual Machine (JVM)という仮想マシン
:::

### sbt
`Scala`で書いたコードをコンパイルしてビルドしてくれるツール

```
sbt console
```
`Scala`の`REPL`が表示される。
```
sbt run
```
`REPL`に入らずにプログラムの実行と終了を行う。

## 文法
```scala:Main.scala
object Main extends App {
  println("Hello Scala")
}
```
`Main`というオブジェクトを宣言。
Appというトレイト(振る舞い)をミックスイン(振る舞いをオブジェクトに対して追加)する。

名前からするに、機能の継承というか拡張という感じ。
Appというのは基底クラスに当たるんだろうか。

`println`: プリントライン
コンソールに出力して、「改行」する。

### 変数
```scala
val cat = "猫"
```
`val`は定数の宣言。
`var`もあるけれど、JSの`let`みたいなものはなさそう。

### 関数
```scala
def cat(name: String): String = {}
```
`def`で宣言して、`String`型を返す。
C#の`void`や.NETの`Sub`プロシージャにあたるものが`Unit`かなと。

## 素因数分解するプログラム
```scala
import scala.math.sqrt

object Factorization extends App {
  // 素因数分解する値
  val target = 510510
  // 割る数の最大値は 対象となる値の平方根
  val maxDivisor = sqrt(target).toInt

  def factorizationRec(num: Int, divisor: Int, acc: Map[Int,Int]): Map[Int, Int] = {
    // 最大値を超えたら
    if (divisor > maxDivisor) {
      // 限界まで(1まで)割れたらその結果を返す
      // 限界まで割れなかった場合、配列に (現在の値, 1) を追加する
      if (num == 1) acc else acc + (num -> 1)
    } else if (num % divisor == 0) {
      // 現在の配列に (現在の割る数, 次に割る数)を追加する
      // 現在の割る数が、現在の配列になかった場合、次に割る数を1として配列に追加する      
      val nextAcc = acc + (divisor -> (acc.getOrElse(divisor, 0) + 1))
      factorizationRec(num / divisor, divisor, nextAcc)
    } else {
      factorizationRec(num, divisor + 1, acc)
    }
  }

  println(factorizationRec(target, 2, Map()))
}
```

実際にどうなるかを書き出してやっと理解できた。
とにかく2で割って、割り切れなくなったら3で割って・・・を繰り返す処理。最終的には何で何回割ったかを配列で返す。

再帰呼び出しは理解に時間がかかります。
その分理解できるとスッキリするけれど。

## まとめ
新しく言語を勉強すると、まず文法に慣れるところから始まります。
すでに基礎編は半分終わってるんですが、少しずつまとめていきたいと思います。
Nuxt.jsでDaisyUIを利用する方法（備忘録）

# daisyUIとは
オープンソースのtailwindcssのコンポーネントライブラリー
vuetifyと比較するとコンポーネントの種類は少ないが、tailwindcssが元になってるので、
当たり前ではあるがtailwindcssとの相性は抜群

個人的に使いやすさも可愛いさもいい感じで使っていて楽しい！

https://daisyui.com/

# 事前準備
nuxtのプロジェクトフォルダ作成
```
$ npx create-nuxt-app my-project
$ cd my-project
```

※UIフレームワークを何にするか質問されるがNone（何も利用しない）を選択する

# daisyUIのインストール
まずはtailwindcssをインストールする
```
$ yarn add -D tailwindcss postcss@latest autoprefixer@latest @nuxt/postcss8
$ npx tailwindcss init
```

nuxt.config.jsに下記追記
~~~js:nuxt.config.js
export default {
  buildModules: [
    '@nuxt/postcss8',
    // ...
  ],
}
~~~

~~~js:nuxt.config.js
export default {
  build: {
    postcss: {
      plugins: {
        tailwindcss: {},
        autoprefixer: {},
      },
    },  
  }
}
~~~

`$ npx tailwindcss init`で作成されるtailwind.config.jsを下記のように修正する
~~~js:tailwind.config.js
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
~~~

次にプロジェクトのルートディレクトリにassetsフォルダを作成し、さらにその中にcssフォルダを作成
assets/css/styles.cssを作成し、下記のように記載して保存する
~~~css:assets/css/styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;
~~~
※vs codeで開発している場合、**postCSS Language Support**というプラグインをインストールすると文法違うよって怒られないようになります

先ほど作成したstyles.cssをnuxt.config.jsに記載して読み込ませます
~~~js:nuxt.config.js
export default {
  css: [
    '@/assets/css/styles.css',
  ],
}
~~~

これでtailwindcssが利用できるようになりました。
tailwindcssだけでも十分コーディングが楽になりますが、daisyUIをインストールしてもっと楽をしていきましょう

```
$ yarn add daisyui
```
インストール完了後、tailwind.config.jsに下記内容を追記する
~~~js:tailwind.config.js
module.exports = {
  //...
  plugins: [require("daisyui")],
}
~~~

これでdaisyUIが利用できるようになりました！

# 試しにdaisyUIを使ってみよう
~~~vue:pages/index.vue
<template>
  <div class="w-1/2 pt-40 mx-auto">
    <button class="btn btn-info">Info</button>
    <button class="btn btn-success">Success</button>
    <button class="btn btn-warning">Warning</button>
    <button class="btn btn-error">Error</button>
  </div>
</template>
~~~

こんな感じでクラス2つで一瞬でボタンができちゃう
![スクリーンショット 2022-03-18 16.43.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878891/2cbbdd28-62c3-5e84-0ce5-1b793e0e9b82.png)

vuetifyでも簡単にボタンはできますがtailwindcssを自然に利用できるdaisyUIの使用感がgoodです
みなさんも是非一度使ってみてください・・・
pytestで ModuleNotFoundError: No module named 'hoge'が出る

## 状況
以下のようなディレクトリ構成図でテストを実行する．
test_A.py，test_B.pyではbase_test.pyで定義したclassをimportしたい．
しかし，`ModuleNotFoundError: No module named 'hoge'` が出てしまいimportに失敗する．

ディレクトリ構成
```
.
├── src
│   ├── main.py
├── tests
    ├── __init__.py
    ├── base_test.py　　　（hogeクラスがある）
    ├── test_A.py　　　　　　　　　（base_test.hogeをimportしたい）
    ├── test_B.py　　　　　　　　　（base_test.hogeをimportしたい）

```

test_A.py，test_B.pyにおけるimport部分の書き方（失敗例）
```
from base_test import TestBase
```
## 解決方法
import部分の書き方を変える．
test_A.py，test_B.pyにおけるimport部分の書き方（成功例）
```
from tests.base_test import TestBase
```
以下のdocumentで説明されていますが，pytestはそのディレクトリのrootを`sys.path`に追加しているようです．
そのため，今回のディレクトリ構成ではtestsディレクトリを始点にしたpathを書く必要がありました．

https://docs.pytest.org/en/6.2.x/goodpractices.html#:~:text=py%0A%20%20%20%20%20%20%20%20test_view.py-,Now,-pytest%20will%20load
Powershellでファイルの内容を引数に取りたかった。

##### あらすじ
Python勉強のために、AtCoderなる競技プログラミングサイトに登録してみた。
ブラウザ上の慣れない環境でやるのもアレだったのでVSCodeで書いたコードを
まるっとコピペするようなイメージで環境構築とかテストとかやりたかった。

ちょっと調べてサクッとできそうな感じの環境構築を終えて、以下の問題でいざテスト……
https://atcoder.jp/contests/practice/tasks/practice_1
```
> python answer.py < input.txt
発生場所 行:1 文字:18
+ python answer.py < input.txt
+                  ~
演算子 '<' は、今後の使用のために予約されています。
    + CategoryInfo          : ParserError: (:) [], ParentContainsErrorRecordException
    + FullyQualifiedErrorId : RedirectionNotSupported
```

##### どうやら使えないらしい。
Powershellではリダイレクトによる入力が使えないのか……
また例によってネットの海を彷徨っていたら発見

```
Get-Content <入力テキストファイル> | python <実行Pythonファイル>
```
Powershell難しいなぁ……Linuxみたいにもうちょっと直感的(？)に使いたいお……

##### 参考
http://gohstisinourbrain.blog.fc2.com/blog-entry-20.html
Problem 98: アナグラム平方数

* 本記事は[ProjectEuler](https://projecteuler.net/about)の「100番以下の問題の説明は記載可能」という規定に基づいて回答のヒントが書かれていますので、自分である程度考えてみてから読まれることをお勧めします。

### 問題 98. アナグラム平方数

原文 [Problem 98: Anagramic squares](https://projecteuler.net/problem=98)

**問題の要約：ファイルから読んだ英単語の文字を数字に変換したときに平方数になる場合。元の単語のアナグラムを同じ規則で数字で変換したものも平方数になるような最大の平方数を求めよ**

問題の文章が分かりづらいですが、以下の例のようにCAREとRACEを同じ規則(C-1,A-2,R-9,E-6)で数字に変換すると、どちらも平方数になるのでこれが「アナグラム平方数単語ペア」ということになります。このときの平方数の大きい方の最大値を求めよという問題になのでこの例の場合は$9216$が答えになります。

| 元の英単語| 変換した平方数 |英単語のアナグラム| 同じ規則で変換 |
| :----:  | :---: | :---: |:---: |
| CARE | $1296=36^2$| RACE |$9216=96^2$

以下のステップで考えます。いつものようにファイルから読み込む部分は最後に添付しました。

1. 与えられた単語の中からアナグラムになっているペアを探す
1. 平方数を長さごとにリストしておく
1. str.makestansを使って単語を平方数に変換して、同じルールでペアの単語も平方数になるものを探す。このとき逆変換をして元に戻ることを確認して1対1のものに限る。

#### アナグラムになっているペアの単語を探す

**isAnaPair**で2つの英単語がアナグラムがどうかチェックしています。単純に**Counter**の結果を比較するだけです。

```python 
from itertools import combinations
from collections import Counter

def isAnaPair(s1, s2):
  return len(s1) == len(s2) and Counter(s1)== Counter(s2)   

# words : list of words read from the file
apairList = [[len(w1),w1,w2] for w1, w2 in combinations(words,2) if isAnaPair(w1,w2) ]
print(len(apairList), apairList)
# 44 [[3, 'ACT', 'CAT'], [5, 'ARISE', 'RAISE'], [5, 'BOARD', 'BROAD'], .....
```

#### 平方数を桁の長さごとにリスト

後で利用しやすいように平方数を桁の長さごとにリストします。

```python 
sqnum = [[] for i in range(15)]
for n in range(2,10**5):
  sqstr = str(n**2)
  sqnum[len(sqstr)].append(sqstr)
```
### ペアの単語が同じルールに平方数に変換できるチェック

str.makestansを使って単語を平方数に変換します。　ペアの両方とも平方数に変換出来たら逆変換をして1対1になっているかをチェックします。

```python 
maxsq = 0
for wpair in apairList:    # all anagmamic pairs
  wlen = wpair[0]          # word length
  for ns1 in sqnum[wlen]:
    ns2 = wpair[2].translate(str.maketrans(wpair[1],ns1))   # tranlate w2 to n2 with w1-ns1 rule
    if ns2 in sqnum[wlen]:
      w2 = ns2.translate(str.maketrans(ns1,wpair[1]))       # translate ns2 back to w2 to confirm 1-to-1 relation
      if w2 == wpair[2]:    
        msq = max(int(ns1),int(ns2))
        if msq > maxsq: 
          maxsq, mwpair = msq, wpair
        break  

print(f"Answer: {maxsq}, ({mwpair})")
```

#### (添付) ファイルから読み込んで英単語のリストを作る

```python 
# show upload dialog
from google.colab import files
uploaded = files.upload()
f = open("p098_words.txt")
words = f.read()
f.close()
words = words.replace('"','').split(",")
```

（開発環境：Google Colab）
pandasで散布図行列(Scatter matrix)を描く

# 散布図行列の描き方
下図のように各量を比較した散布図とヒストグラムをまとめて描ける。
![scatter_matrix.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600092/b0735eb5-dbd3-4f0b-6640-06f22bd906c2.png)

```Python: scatter_matrix.py
#インポート
import pandas as pd
import matplotlib.pyplot as plt

#irisデータセットの読み込み
from sklearn.datasets import load_iris
iris_dataset = load_iris()
X_iris = pd.DataFrame(iris_dataset['data'], columns=iris_dataset.feature_names) #説明変数 DataFrame型
y_iris = iris_dataset['target'] #目的変数 3種類に分けられる

#散布図行列の描画
plt.figure() #グラフを描く領域の作成
scatter_matrix = pd.plotting.scatter_matrix(
    X_iris, #説明変数
    c = y_iris, #目的変数ごとに色分け
    figsize = (10, 10), #図の大きさ
    marker = 'o', #マーカーの種類
    hist_kwds = {'bins': 20}, #ヒストグラムの分割数
    edgecolors='black'
)
plt.savefig('scatter_matrix.png') #図の保存
```

# 参考
https://qiita.com/ynakayama/items/94779651d09e1004fd46

https://qiita.com/mitsumizo/items/efddc80f166e900f97ef
[Unity] WindowsからMacに移行したらVisual Studio Codeが開かなくなった時の対処法（備忘録）

# 現象
WindowsからMacBookAirに新しく買い替えて、unityでゲーム開発をしようとしたら、unityからvisual studioが開けず、visual studioから開こうとするとエラー？が出る

# 出てたエラーは以下の画像

![qiitaqiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/5be44f03-bee2-94ee-0f92-61315f0ac4eb.png)



**結論：とりあえずunity関連のものを全て再インストールしたら直った**

# 試したこと
①unityの Package Managerからvisual studio Editorの設定を見直してみる
>参考記事→[Unity2020 でスクリプトをVisualSutudioで開けない問題の解消](https://bit.ly/3whQFdR)

**結果**⇨参考記事通りに進めるとunityからは問題なく開けるようになったが、エラー文は消えない

②visual studio code editorのパッケージを最新にアップデートする
[Window]/[Package Manager]を開いて、「Visual Studio Code Editor」と「Visual Studio Editor」の両方をアップデートする
>参考記事→[UnityからスクリプトをVisual studioで開いてもコードが表示されない](https://teratail.com/questions/215874)

**結果**⇨最新バージョンだったから意味なし

③visual studioをアンインストールして、もう一回設定し直してみる
**結果**⇨更なる問題が、、、
![スクリーンショット 2022-03-18 15.59.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/e8a4eb4a-fb79-db8b-f8d9-736783665539.png)

④上記の問題を解決。(インストールとエラー、再度インストールを繰り返す、、、)
>参考記事→[Visual Studio for Mac のインストーラーで、インストール中にエラーが発生した時の対処方法(System.Net.WebException)](https://kenichiro246.hatenablog.com/entry/2018/01/12/010015)

**結果**⇨インストーラーしか入らず、アプリケーションファイルからクリックして開くと謎の表示に飛び、適当にボタンぽちぽちしてたら意味わからんサイトに飛んだ
![スクリーンショット 2022-03-18 16.29.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/0494dcdd-1aa0-ff35-4ca8-5b2dafebff74.png)
![スクリーンショット 2022-03-18 16.29.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/8090d058-2d54-dd96-088a-38a20428cf8b.png)
怪しそうだったのでダウンロードはしなかった💦

⑤もう一度visual studioに関するものを消して再度インストールしなおす
**結果**⇨振り出しに戻る

⑥unity関連全て再インストール
**結果**⇨でけた

### 以上！！！！！
[Unity]UniTaskとTaskの違い

## はじめに
UniTaskとUnityに既存であるTaskとの違いメモ。

## 詳細テーブル

|  | Task | UniTask |
| --- | --- | --- |
| 機能 | Unityでは不要な機能が多い | Unityで活用できる機能のみ実装 |
| オブジェクトサイズ | 大きい | 小さい |
| 実行コンテキストの管理 | TaskScheduler、SynchronizationContext | UnityのPlayerLoop |
| 必要なC# Version | C# 5.0以上 | C# 7.0以上 |
| TaskTracker | なし | UnityEditorで確認可能 |
| メモリアロケーション | 常にヒープ | ゼロアロケーションで駆動する |
| await時の制約 | なし | 同じUniTaskに対して2回awaitできない |

### Task
- メインスレッドを動かしたまま、裏で通信を走らせたい時に使用できる。
- 複数の処理を同時に実行して、完了までの時間を短縮したい時に使用する。
- 描画には関係ない処理をメインスレッドから追い出して、動作の軽量化を図りたい時に使用する。

### UniTask
- UniTaskとはUnity向けに最適化されたTask実装を提供するライブラリ郡。
    - Unity向けTask実装「UniTask/UniTask<T>」。
    - UniTaskの稼働状況をモニタできる「UniTaskTracker」。
    - Unity向けIAsyncEnumerable<T>実装「UniTaskAsyncEnumerable<T>」。
    - 名前空間「Cysharp.Threading.Tasks」

### TaskScheduler / SynchronizationContext
- TaskSchedulerは、タスクと実際にタスクを実行するスレッドと間の調整をします。調整とはタスクをどのスレッドに割り当てるか、あるいはタスクを実行する順番を管理すること。
- SynchronizationContextは、「指定した処理を指定したスレッドで実行するために用いるオブジェクト」。

### TaskTracker
- Taskをチェックするツール。トラッキングを有効にしてスタックトレースを取得することは有用ですが、パフォーマンスに大きな影響を与えます。推奨される使い方は、タスクリークを見つけるためにトラッキングとスタックトレースの両方を有効にし、完了したら両方を無効にすることです。

### メモリアロケーション
- プログラムが、自分の仕事で使うメモリを確保すること。

  #### ヒープ
  - 動的に確保と解放を繰り返せるメモリ領域のこと。

  #### ゼロアロケーション
  - プログラムが、自分の仕事で使うメモリを確保することがないこと。
Laracastsでテストコードを勉強したときのエラーメモ

結構前に書いた記事なのですが、投稿せずに下書きにしたままだったので、今更だけど投稿！ｗｗ

『[Laracasts](https://laracasts.com/)』の、[こちらのページ](https://laracasts.com/series/build-a-laravel-app-with-tdd)でテストコードの書き方を学習をしていました。
但し、動画通りに書いても動かなかったりする箇所があったので、私なりに躓いた箇所を以下にご紹介！（と言っても最初の方の５点だけ。。。ｗｗ）
※ご注意：私の場合、環境はXAMPP for Windowsでした。それ以外で作る場合は、同じエラーが出るとは限らないので、参考程度にどうぞ。

その１：[EPISODE 2 Let's Begin With a Test](https://laracasts.com/series/build-a-laravel-app-with-tdd/episodes/2) の回にて。

動画内では、
『public function a_user_can_create_a_project() 』という名前の関数を使ってテストを進めていきますが、関数名の先頭に『test』とつけないと動きません。
『public function <font color="Red">test</font>_a_user_can_create_a_project() 』として、テストの時は必ず関数名の最初に<font color="Red">test</font>をつけるようにしましょう！

***

その２：同じく [EPISODE 2 Let's Begin With a Test](https://laracasts.com/series/build-a-laravel-app-with-tdd/episodes/2) の回にて。

動画内では、php unitを発動させる時に、
『vendor/bin/phpunit tests/Feature/ProjectsTest.php』とコマンドを打っていますが、私の場合、これを実行すると、パスが通っていないと言われてエラーになりました。
調べてみると、どうやらグローバルインスタンスのphp unitを使っていることが原因のようで、composerのローカルバージョンのphp unitを使えばよいとのこと。。。
『<font color="Red">vendor\bin\phpunit</font> tests/Feature/ProjectsTest.php』として、赤文字部分のコマンドを、スラッシュではなく、バックスラッシュで書くことで解決しました！

***

その３：同じく [EPISODE 2 Let's Begin With a Test](https://laracasts.com/series/build-a-laravel-app-with-tdd/episodes/2) の回にて。

動画内で、ProjectsControllerに『use App\Project;』とProjectモデルをインポートする箇所がありますが、これはLaravel８では、『use App\Models\Project;』としないと動かないので注意です。
これ以降も、Laravel8で作業する場合は、モデルのパスは常に変更する必要があります！

***

その４： [EPISODE 3 Testing Request Validation](https://laracasts.com/series/build-a-laravel-app-with-tdd/episodes/3) の回にて。

Facotryを使ってテストデータを挿入する箇所があります。
動画内では、Factoryのファイルを作る際に、
『php artisan make:factory ProjectFactory --model=”App\Project”』としていますが、
Laravel8で作業する場合は、『php artisan make:factory ProjectFactory --model=Project』としてください。
また、動画内では、tinkerで操作するときに、『factory('App\Project')->make()』としてデータ挿入していますが、Laravel8では、『App\Models\Project::factory()->make()』としないと動きません。
実際にデータベースにデータ挿入していくときも、
『factory('App\Project', 5)->create();』
↓
『App\Models\Project::factory(5)->create();』となります。
ProjectFactory.phpの書き方にも変更があります。
動画内では、

```ProjectFactory.php
$factory->define(Project::class, function (Faker $faker) {
    return [
        'title' => $faker->sentence,
        'description' => $faker->paragraph
    ];
});
```

このように書かれていますが、これは以下のように変更する必要があります。↓↓

```ProjectFactory.php
    public function definition()
    {
        return [
            'title' => $this->faker->sentence,
            'description' => $this->faker->paragraph
    
        ];
    }
```

***

その５：[EPISODE 4 Model Tests](https://laracasts.com/series/build-a-laravel-app-with-tdd/episodes/4) の回にて。

UnitTestを書く際、作られたファイルにはデフォルトで『use PHPUnit\Framework\TestCase;』というクラスがインポートされています。
しかし、これだとFactoryを使う際にエラーが出ます。
代わりに、『use Tests\TestCase;』をインポートするようにしてください。
SQL   問題集　無料サイト


## SQL攻略

http://sql.main.jp/

>SQL攻略は、その名の通りSQLの攻略をするための学習サイト。全ての問題を無料で演習できます。
記事としてSQLの知識を解説するだけでなく、記事にセットで実習問題が以下のようにあるのが特徴です。

>実際に学んだことをすぐ試せるので、実践的な書き方を手を動かしながら学ぶことができます。

>SQLの基礎だけでなく、データベース設計でもつかえる正規化の概念も解説されています。一通り見ながら手を動かすだけで、網羅的な知識がつくのでおすすめです！

>こんな人におすすめ
>+ 動画よりも文字で学びたい人
>+ 学んだあとすぐに実践で試す形式が好きな人

## Tech Pjin：SQL演習問題

https://tech.pjin.jp/blog/tag/sql%e7%b7%b4%e7%bf%92%e5%95%8f%e9%a1%8c/

>TECH Pjinは、技術系の記事をまとめているメディアです。「SQL演習問題」というカテゴリがあり、約70個の演習問題の記事が用意されています。

>以下の4つのポイントで、問題が用意されています。
>Tech Pjinの問題記事の4つのポイント
>+ 同じテスト環境・データの準備方法
>+ 問題文
>+ 解答のSQL
>+ 解答のSQLになる理由の補足説明
ただ問題と答えがあるだけでなく補足説明までしっかりあるので、わからなかった時に理解しやすいですよね。また自分で環境を構築する必要があるため、作業を通してより実践的なSQLを学習できます。

>こんな人におすすめ
>+ とにかくSQLの演習問題をゴリゴリ解きたい人
>+ 演習問題の答えだけでなく補足も見たい人


## SQL Fiddle

http://sqlfiddle.com/

>「SQL Fiddle」はブラウザ上で自由にデータベースを作成し、SQLの実行を試すことができます。

>Schema（データベースの構造）を作成するところから始めるので、ある程度SQLを学習したあとに利用してみるのがおすすめです。

>サイト上部に表示されている「View Sample Fiddle」をクリックするとサンプルのSQLが表示されますので、まずはそれを眺めてみてください。

>データベースエンジンはMySQL、Oracle、PostgreSQL、SQLite、My SQL Serverから選択できます。最新バージョンではないですが、無料で試せる範囲としては充分かと思います。



#### 参考サイト
https://www.sejuku.net/blog/104913

__SQLの練習に最適！ブラウザ上で実行できる初心者向け学習サービス5選__

https://paiza.hatenablog.com/entry/2019/12/22/SQL%E3%81%AE%E7%B7%B4%E7%BF%92%E3%81%AB%E6%9C%80%E9%81%A9%EF%BC%81%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E4%B8%8A%E3%81%A7%E5%AE%9F%E8%A1%8C%E3%81%A7%E3%81%8D%E3%82%8B%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91
Power Automateを使用して、日本語列名を含んだSharePoint Online リストへの登録を自動化する際のコツ

# 背景
Power Automateを使用して、日本語列名を含んだSharePoint Online リストへの登録を自動化する際、
 - SharePoint上に表示されている日本語の項目名をそのまま使えない
 - 数値項目へ登録する際にnull値を考慮する必要がある

などの注意点があります。

# 日本語列名への対応策 
Power Automate上では、日本語列名はSharePoint内部名のEntityPropertyName（「OData__xなんちゃら」）に置き換える必要があります。
例えば「日本語項目１」、「日本語項目２」列を追加した場合のEntityPropertyNameは、
| 列名 | EntityPropertyName| 
| --- | --- | 
| タイトル | Title | 
| 日本語項目１| OData__x65e5__x672c__x8a9e__x9805__x76 | 
| 日本語項目２| OData__x65e5__x672c__x8a9e__x9805__x760 |

となります。
（デフォルトで作成される「タイトル」は、Titleのままになっています）
このEntityPropertyNameは、設定画面では表示・取得する方法がありませんので、以下のAPIで別途取得します。

https://***TenantName***.sharepoint.com/sites/***SubSiteName***/_api/web/lists/GetByTitle('***リスト名***')/fields")

わたしはExcelのPower QueryでAPIを呼んでシートとして保存し、いつもで呼び出せるようにしています。
項目数が多い場合、Power Automateのコードの中に、OData_なんちゃらが頻発し、読み取った項目と設定先の項目があべこべになることもありますので、シートで保存しておくと検算（といってもVlookUpで比較するだけですが）出来るので正確性が増します。

```Power Query
    let
	    ソース = OData.Feed("https://TenantName.sharepoint.com/sites/SubSiteName/_api/web/lists/GetByTitle('リスト名')/fields"),
	    削除された他の列 = Table.SelectColumns(ソース,{"EntityPropertyName", "InternalName", "StaticName", "Title", "TypeDisplayName", "TypeShortDescription"}),
	    並べ替えられた列 = Table.ReorderColumns(削除された他の列,{"Title", "EntityPropertyName", "InternalName", "StaticName", "TypeDisplayName", "TypeShortDescription"})
	in
	    並べ替えられた列
SubSiteName、リスト名 は正しい名称に置き換えてください。
```
ここで表示される日本語のTitleとEntityPropertyNameを照らし合わせてPower Automate上で設定する必要があります。

## Nullへの対応(特に数値)
Forms（もしくはほかのトリガーソース）の項目で、SharePointリスト上の数値項目に入力するとき、int関数を使用するのですが、Nullだった場合は
```
    integer cannot be set to null or empty value
```
といったエラーが出ます。
そのため下記のようなNull判断が必要になります。
そのほかの関数も、おおむねNullだとエラーが出ることが多いので、この判断はほぼ必須。
```
    if(equals(triggerOutputs()?['body/OData_x002d__'], null), 0, int(triggerOutputs()?['body/OData_x002d__']))
OData_x002d__ は 正しいEntityPropertyNameに置き換えてください。
```
## 日付、時刻の取得時の処理
登録ではなくPower Automateでリストの値を取得する際のコツになります。
リストにデフォルトで含まれる「登録日時」「更新日時」も取得することが出来ますが、その際の時刻タイムゾーンはGMT Standard Time - UST となっています。これをこのまま扱うと、9時間分時間がずれることになります。
そのため、タイムゾーンの変更が必要になります。
いくつか方法がありますが、私自身はconvertFromUtc か、addHorus を使うことが多いです。
```
convertFromUtc(formatDateTime(triggerOutputs()?['body/Modified']),'Tokyo Standard Time')
addHours(formatDateTime(triggerOutputs()?['body/Modified']), 9)
```
ローカル起動のサーバー/フロントアプリケーションをAndroidエミュレータのWebViewで開く

# 0. 概要
掲題の通り、ローカル起動のサーバー/フロントアプリケーションをAndroidエミュレータのWebViewで開く場合、
iOSシミュレーターで開く場合と違っていくつか設定が必要だったのでその方法を記載します。

# 1. http通信を可能にする
Android9以降ではhttp通信がデフォルトで無効になったそうです。
Ref: https://developer.android.com/training/articles/security-config?hl=ja

取り急ぎローカル環境で動作確認がしたいだけなので、以下の設定を追記して有効にします。
本来無効にしておく方が望ましいので、あくまで開発時だけに留める方が良いと思います。

`AndroidManifest.xml` のapplicationタグに `android:usesCleartextTraffic="true"` を追記します。

```
    <application
            android:label="hogehuga"
            android:icon="@mipmap/ic_launcher"
            android:usesCleartextTraffic="true"> // ココを追記！
```


# 2. エミュレータからPCのローカルホストに接続できるようにする
エミュレータ内でのlocalhostはPCではなくエミュレータ自身を指します。
そのため以下のコマンドにて、エミュレータから手元のPCに通信を転送するようにします。
`adb reverse tcp:3000 tcp:3000`

※ ポート番号はご自身の環境によってよしなに変更してください。 

### adbコマンドの設定を行っていない場合は以下の手順で設定を行ってください
1. Android Studioを開きます
2. Project Structureを開きます（ヘッダーのFileより開くことができます）
![スクリーンショット 2022-03-18 16.10.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264889/f2725654-7de7-b9f1-2035-cf207de72c64.png)

3. Android SDKのpathを確認します
![スクリーンショット 2022-03-18 16.11.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264889/a9eaab37-b3da-f0bd-b232-e75687995fa7.png)

4. (zshの場合)zprofileに`export PATH=$PATH:{AndroidSDKのpath}/platform-tools`を追記します
5. 設定ファイルの読み直しを行います`source ~/.zprofile`

# 3. http://localhost:3000ではなく、http://10.0.2.2:3000をWebView開きます
※ポート番号はご自身の環境によってよしなに変更してください
欠陥レポートを書くときの注意点

# 欠陥レポートを書くときの注意点
欠陥レポートは不具合を開発担当者に伝えるためのコミュニケーションツールです。不具合の様子が正確に描写されるというのは不可欠な要素ですが、正確なだけではありません。欠陥レポートを受け取る相手にとって理解しやすいものでなければなりません。

## 全体を通して欠陥レポートを書くときの注意
- 1不具合1レポートの原則
一つの不具合を複数の欠陥レポートで報告したり、複数の不具合を一つの欠陥レポートで報告したりすれば、正確な不具合の数を知ることができなくなります。同一の操作で導かれた不具合であっても、複数の不具合と言える場合は、それぞれ別の欠陥レポートで起票します。

- 欠陥レポートはコミュニケーションツール
　テスト実施をしていると「こんな不具合を作り込むなんて真面目に仕事してないんじゃないか？」と訝死んでしまうような不具合に出会うことがあります。しかし、開発担当者もふざけてそのように製造したわけではないのです。差し迫る納期や度重なる仕様変更に耐えながら、必死の思いで政治した結果として現れた不具合なのです。
ですから、決してこれを馬鹿にしてはいけません。テストオペレーターと開発担当者はより良いソフトウェアを作っていくための仲間です。欠陥レポートには相手を不当に非難するような感情的なコメントを書き込んではいけません。

## 欠陥管理情報
- タイトルは分かりやすく
　欠陥レポートのタイトルは、不具合がどんな様子なのか一目わかるタイトルでなければいけません。開発担当者は非常に忙しいことがほとんどです。分かりにくいタイトルはソフトウェアの修正の効率を下げてしまいます。
また、分かりやすいタイトルは不具合の検索や分類のしやすさを向上します。
- 重度設定は適切には分かりやすく
　開発担当者に、検出した不具合をできるだけ早く気づいてもらおうとして、重要度を高めに設定してしまうテストオペレーターがいます。しかしこれは避けなければなりません。どれも皆高い重要度にしてしまうと、本当に重要度の高いものと、そうでないものの区別がつかなくり、この細目を設けた意味がなくなってしまいます。

## 欠陥の内容を書くときの注意
- 発生手順は一操作ごとに箇条書きで
　発生手順はどのような操作をすれば不具合が発生するのか具体的に記載したものです。通常１手順ごとに箇条書きの形式で記載します。一つの過剰に複数の手順を記載してはいけません。
- 再現率は分数の形式で
　10回同じ操作して10河合とも不具合が発生したとしたら、再現率100%と描きたくなってしまいますよね。しかしそれは望ましくありません。
この書き方で実施した回数と不具合が発生した回数の割合しかわからず、実感がわからないです。再現率は「発生回数/実施回数」（今回の場合は10/10）と書くのが良いでしょう。

## 動作環境情報を書くときの注意
- 前の準備・確認が重要
　プロジェクトごとに仕様機材やOS等は異なります。またプロジェクトが動いている最中にもこれらは変更されることがあります。
あらかじめ、どのような情報が必要なのか調査するだけでなく、不明点があった場合は、現場のリーダーに必ず質問し、不明点を解消してから記入しましょう。

## 備考を書くときの注意
- 項目にないことは書かなくていいや・・・はだめ
 テンプレートの項目にはないことでも、重要だと考えられることは「備考」に記載しましょう。開発担当者がソフトウェアを修正する際のヒントとなるはずです。
具体的には・・・
1. 不具合の発生しない場合や回避方法
1. デグレード（修正によって他の部分に不具合が発生すること）の有無
1. 関連するテストケースのID
1. 類似の不具合を記載した欠陥レポートのID
1. 同じ操作で発生した別の不具合を記載した欠陥レポートのID
 などを記載します。
## エビデンスの取得と添付の注意
- 不具合部分の明示
首都きした画像のどの部分が不具合であるのか、矢印や枠線を書き込んだり、不具合発生までの流れがわかるように順番に添付するなどして、何が不具合であるのかをはっきりさせましょう。
- エビデンスの格納方法
　取得したエビデンスを開発担当者に届ける方法には、欠陥レポートのファイルに張り込むように添付する方法以外に、別の場所に格納することで提出するという方法もあります。
## まとめ
- 欠陥レポートは分かりやすく。
- 欠陥レポートは正確に。
Drawioが素晴らしすぎてVISIOやEXCELを卒業できるかも


## インストールして使用する
https://github.com/jgraph/drawio-desktop/releases
→「Windows Installer」からダウンロードしてインストール

## ウェブページで使用する
https://app.diagrams.net/
→ウェブ上で使用できます

# Drawio
これまでエクセル方眼紙やVisioで作成していた資料がDrawioで作成することができる
豊富なテンプレートもあり、AWSやCiscoのアイコンも大量に用意されている

新規作成のテンプレートを[AWS]や[cisco]で検索すると出てきます。
ファイルの種類も豊富にあり、PDFはもちろんのことHTML等でも出力及び編集が可能です。

図形にリンクの埋め込み出来るので
ダウンロードリンクなど仕込むことで簡易的なウェブページも作成可能です。

## 作成出来る資料
ラック図
ネットワーク構成図
フローチャート
サーバ構成図
冗長化構成図
モック図
ウェブページ作る？

だいたいの図形で表す資料はこちらで代替可能だと思います。
保存先はローカルファイルからGithub、グーグルドライブ等対応しているようです。





## ちょっとだけ使い方
ファイルの保存先はいくつか選べるようです
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2519157/94426725-0c1d-ca26-ab49-77f29b7a083e.png)

今回はデバイスを選択しました
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2519157/1d431cd4-cdc1-ca31-29eb-f846bf3f1f1e.png)

今回はciscoを検索しました
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2519157/f9b2ff97-bcd2-b8ac-542d-e931efabb906.png)

なんということでしょう～
![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2519157/9b3a9bed-abe8-7b18-59b1-71cc7e46f80b.png)
3軸の折れ線グラフの作り方python

発表で3軸の折線グラフを作ろうとした時にexcelではできなかったのでmatplotlibを使って作る方法を調べました。
___
今回のデータです。
~~~3jiku.py
列１,体温,CRP,ddimer
1,37,8,9.9
2,39,17,18.6
3,39,18,7.2
4,38,19,5.7
5,38,,
6,38,25,8.1
7,39,,
8,39,19,9.3
9,38,19,
10,37,,
~~~
![スクリーンショット 2022-03-18 15.45.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600869/a33e95ac-76ff-19ef-6acd-b1b9531e33b9.png)

まずデータを取り込みます
~~~3jiku.py
import pandas as pd
#csv読み込み
df=pd.read_csv("b.csv")
~~~


~~~3jiku.py
import matplotlib.pyplot as plt
~~~
まずはmatplotlib.pyplotをimportします。
~~~3jiku.py
fig,ax1= plt.subplots()#グラフを書く場所を設定します。
fig.subplots_adjust(right=0.75)
fig.subplots_adjust(bottom=0.2)#グラフを書くスペースを調整します。
~~~
グラフを書く場所を設定して、大きさを調整します。入り切らなければ後から数値を変更して調整します。
~~~3jiku.py
ax1.plot(df["体温"].dropna(how='any'),"b-")
ax1.set_ylabel("体温")

ax2.plot(df["CRP"].dropna(how='any'),"r-")
ax2.set_ylabel("CRP")

ax3.plot(df["ddimer"].dropna(how='any'),"c-")
ax3.set_ylabel("ddimer")
~~~
dfはDataFrameの略です。dropna(how='any')メソッドを使う事でNanの値を無視して線を繋いでくれます。”b”は青”r”は赤”c”は何色なんでしょう？
set_ylabelでラベルを追加します。
~~~3jiku.py
ax2 = ax1.twinx()
ax3 = ax1.twinx()
~~~
このtwinxというものを使って2軸にする事ができます。
ただし、このままだと、軸がかぶってしまいます。
![Figure_２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600869/f66e97b5-ca90-5680-a638-965160411718.png)
____
そこで以下のようにします
~~~3jiku.py
ax3.spines["right"].set_position(("axes", 1.12))
~~~
すると
![Figure_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600869/3099435e-f5ba-af6e-3d20-eeafd8a1004a.png)
少し離れました。数値を調整して見ます。
~~~3jiku.py
ax3.spines["right"].set_position(("axes", 1.2))
~~~
![Figure_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600869/cce11730-6f91-70f3-797e-f16d64f623ad.png)
見やすくなりました。
"体温"が文字化けしていますね。

直し方わかる方、コメントで教えてくださいorz
HeidiSQLでデータベースをエクスポートするときの設定

## はじめに
複数のMySQLデータベース間でデータのバックアップ・リストアをHeidiSQLで行っていますが、バックアップ時の設定によるリストア時の動作の違いがいまいち良く分からなかったので調べて見ました。

## 調査結果のまとめ
「データベースをSQLとしてエクスポート」メニュー実行時の動作をまとめました。
|「データ」欄の表記|リストア時に<br>実行されるSQL文  |実行結果  |
|---|---|---|
|削除して挿入  |DELETE FROM<br>の後に<br>INSERT INTO|・既存レコードを新レコードで総入れ替え|
|挿入  |INSERT INTO  |・レコードのインサートのみ<br>・キー重複レコードがあるとエラーが発生<br>　→１レコードもインサートされない<br>・既存レコードは削除されない  |
|挿入を無視  |INSERT IGNORE INTO  |・レコードのインサートのみ<br>・キー重複レコードは更新されない<br>・既存レコードは削除されない|
|既存のデータを置換  |REPLACE INTO  |・レコードのインサートのみ<br>・キー重複レコードは更新される<br>・既存レコードは削除されない |
|データなし  | - |・出力ファイルにレコードは含まれない |

なお、テーブルのドロップにチェックを入れた場合はリストア時にいったんテーブルが削除されるため、どれを選択しても総入れ替えになります。
基本情報技術者試験対策　９日目　

基本情報技術者試験勉強9日目
-
この記事の目的
-
今年の5月に基本情報技術者試験を合格するために、過去問で間違えた箇所をただまとめる自分のための記事

プロフィール
-
・文系大学の３年生
・ITパスポートは保有
・ウェブアプリやサイト作成を個人で行ったことがある程度
・猫好き


今日の目標
-
テクノロジー系の問題を克服。30問中25問は正解する。

間違えた箇所
-
１、オンラインリアルタイム処理
①利用者が端末に情報を入力する
②入力された情報を端末がサーバにリクエストを送る
端末　　　　→   サーバ
　　情報をリクエスト

③サーバーがリクエストに対して、結果を返す。
端末　　　　　　←   サーバ
　　　　　　情報をレスポンス

④端末が結果を表示

２、IEEE 1394
Fire Wireとも呼ばれるAV機器やコンピュータを接続する高速シリアルインターフェース
同時に６４台接続可能
最大８００Mbpsの速度で通信可能

３、H.264/MPEG-4 AVC
幅広く利用され、動画の圧縮符号化に関する規格
ワンセグ放送、ディジタルハイビジョンTVなど低速、低画質から高速、高画質まで

４、DNSキャッシュポイズニング
PCが参照するDNSサーバに偽のドメイン情報を注入して、利用者を偽装されたサーバに誘導する。

５、フットプリンティング
攻撃のために情報を事前に収集する

６、DNSリフレクション攻撃
攻撃対象のサービスを妨害するために、攻撃者がDNSサーバを踏み台に利用して、再起的な問い合わせを大量に行う。

７、アドレス指定方式
命令が処理の対象となるデータの主記憶上の位置を指定する
①指標付きアドレス指定方式
アドレス値と指定されたインデックスレジスタの値を加算する

②相対アドレス指定方式
命令のアドレス部の値にプログラムカウンタの値を加算する

③直接アドレス指定方式
命令のアドレス部に処理対象のデータが格納されている主記憶の番地を直接記述する

④レジスタ間接アドレス指定方式
命令のアドレス部に処理対象のデータが格納されているレジスタ番号を記述する


振り返り
-
テクノロジー分野に絞って問題を解いたが、アルゴリズムやパリティチェックなど図を基に答える問題が特に苦手。時間がなくて、アルゴリズムやパリティチェックの問題がうまくまとめられなかった。
明日は、アルゴリズムやパリティチェックなど今日できなかった問題や複雑な問題をより解いていきたい
今月中までに、テクノロジー系は全て答えられるよう取り組む。できれば、マネジメント系も頑張りたい。

>引用
基本情報技術者試験ドットコム
https://www.fe-siken.com
Dropboxのアドオンを寝ぼけて間違えて購入し、びっくりして目が覚めたのですが、Chatですんなり解決できた話。<ボタンを押す前にちゃんと確認しよう>

# はじめに
この話題はいつものSQLと全く関係の無い話です。
# 経緯
寝ぼけながらメールを眺めていると、下記タイトルのメールが届いていました。
`ビジネス用ファイルを長期間保存`
新しいサービスでも始めたのかと思い興味を持って内容を読むと下記のような内容でした。
```:メール本文
エクステンデッド バージョン履歴アドオンを使用すると、バージョン履歴とファイル復元の期間を 30 日から 365 日（1 年）に延長できます。
以下のボタンをクリックして今すぐエクステンデッド バージョン履歴を購入するか、dropbox.com のアカウント設定で［プラン］タブにアクセスしてください。
```
何の疑いもなく、リンクのボタンをクリックし、Dropboxのサービスへ。
ここからは怖くて再現できないのですが、わずか１〜２クリックで下記の画面が出てきました。
`2022-03-18	1 year Extended Version History (2022-03-18 から 2023-02-04 まで) 請求書領収書	￥4,687`
おいおい！聞いてないよ（自分で押したんですが・・・）。
びっくりして目が覚めましたwww。

# 解決編
どうしたものかと考えているとDropboxの画面右下にこんなアイコンがることを見つけました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74883/868a8a6c-492a-9ed3-c93f-27f9c3a2da5e.png)

そこで、
`Visitor: スミマセン。間違えて購入した場合はどうしたら良いですか？`
と書き込むと
`Tom（仮名です）: Hello Nono, and thank you for contacting Dropbox support.`
`My name is Tom, and I will be more than happy to assist you with your issue, right away.`
と英語で回答が返ってきた。
仕方なく英語で返答し何度かチャットを繰り返すと、
`Tom: Done, I have canceled and refunded your EVH purchase.`
とあっさりとした回答。チャット開始から１-２分程度だったと思います。
領収書を確認すると
`2022-03-18	払い戻しによる調整 請求書領収書	(￥4,687)`
これで一安心。
# まとめ
本当にびっくりして目が覚めました。
簡単に契約できてしまったけど、簡単にキャンセルもできたので何とかセーフ。

今日の教訓：当たり前ですが`ボタンはちゃんと確認してから押しましょう`でした。
p47 Saruman's Army(C#)

#### 自分(不正解)
自分では、それぞれを開始点にした全探索を思いついたが、貪欲法に沿った考え方が思いつかなかった。
（１）左から考える
の縛りをした後で、
（２）同印をつけたらいいか
の順で考えればよかった。いきなり答えを出そうとしていたのと、左から考えても答えにはならない(他のパターンで直接解決があるのでは)と思い込んでいたのもよくない。

#### 解答

![qiitaに使う.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/880610/de6b9fc8-934b-8971-6de9-8b126646b26c.jpeg)
Next.js 開発時にも型検査を行う

## 概要

最近 Next.js で開発を進めていて、 ビルドを実行した際に発覚したのですが、どうやら Next.js は dev 時に型チェックを行ってくれないようです。そのため開発時には型エラーが起きないけど、ビルド時にエラーが起きてコケてしまうという事が起こり得ます。

そこで今回は開発時に型チェックを行う方法を紹介したいと思います。



## やり方

package.json に以下を追加

```diff:package.json
 "scripts": {
    ...省略
-     "dev": "next dev"
+     "dev": "next dev & tsc --watch --noEmit"
  },
```

tsc に --noEmit を指定してあげる事で型のチェックだけを行う事が出来ます。
また　--watch　によってファイルの変更を検知する事が出来ます。


## 参考にした記事

Typescript `next dev` error reporting · Issue #14997 · vercel/next.js
https://github.com/vercel/next.js/issues/14997
PHP: undefined function mb_substr()

次のようなエラーがでた時の対策

```text
PHP Fatal error:  Uncaught Error: Call to undefined function mb_substr()
```

>このエラーは、/var/log/nginx/error.log に出ました。

mbstring がインストールされているかの確認

```bash
php -m | grep mbstring
```

Ubuntu でのインストール方法

```bash
sudo apt install php-mbstring
```

インストールされたことの確認

```text
$ php -m | grep mbstring
mbstring
```

次のバージョンで確認しました。

```text
$ php --version
PHP 8.0.8 (cli) (built: Mar  3 2022 14:51:53) ( NTS )
Copyright (c) The PHP Group
Zend Engine v4.0.8, Copyright (c) Zend Technologies
    with Zend OPcache v8.0.8, Copyright (c), by Zend Technologies
```
【AWS】CodeBuildとは

# CodeBuildとは
**CodeBuild**とは、ソースコードをコンパイル・テストを行い、デプロイ可能なソフトウェアパッケージを作成してくれるAWSのビルドサービスのこと。
**CodeBuild**は、コンピューティングリソースの使用に対して、分単位で料金が発生する。

# CodeBuildの流れ
**CodeBuild**とは、ソースコードを``buildspec.yml``に従ってビルド環境の構築とテストを行う。大まかな流れが以下となる。
① ソースコードと``buildspec.yml``を作成する。
② ソースコードと``buildspec.yml``をアップロード（**CodeCommit**）する。
③ **CodeBuild**でプロジェクトを作成
④ ビルドを実行

# buildspec.ymlとは
``buildspec.yml``とは、ビルド実行時に実行するコマンドを記述した**YAML**形式のファイルのこと。
このファイルをソースコードのルートディレクトリに配置することで**CodeBuild**が``buildspec.yml``を読み込んで実行される。
上記流れのように**CodeCommit**を使用した場合は、レポジトリのルートディレクトリに配置する。