OmniAICreator/Qiita-1.07M huggingface dataset:
Basic認証が何度やっても通らない【cloudfront】

# 概要
ベーシック認証を入れて正しいIDとパスワードを入力したはずなのに何度やっても通らない。。。
正しい認証情報を入力しても、認証ダイアログが無限ループで表示されます。
もしそんな状況が起きた時はcloudfrontの設定が原因かもしれません。

# 起きた事象
.htaccessと.htpasswdを認証したいディレクトリに置くお決まりの作法で用意してあげてapacheをrestart！
よしベーシック認証かかってるはず・・・何度IDとPWを入れても例のダイアログが出続ける

これはおかしい...

アクセス先から参照してる対象ディレクトリでベーシック認証かかってるかも？
そんなこともなくテストファイルを置いても発生した。

# 問題の原因

HTTP認証はチャレンジ・レスポンス方式で行われています。
サーバーで自分自身を認証したいクライアントAuthorizationは、資格情報を含む要求ヘッダーを含めることで認証できます。
そのレスポンスにも通常、Authorizationヘッダーを含む要求を発行します。
そのヘッダーに含む情報にAuthorizationがないから（cloudfrontでその設定をしてないから）今回の問題が起きました。

![HTTPAuth.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/574173/648eea9e-57c1-68c6-7b06-85b32d8ac413.png)

引用:https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication

# おかしいなと思ったらNetworkを見る
x-cacheの箇所に「Error from cloudfront」と出ています。
croudfront内でのエラーが濃厚です。

![スクリーンショット 2021-07-10 10.20.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/574173/e74782b9-787f-d265-489b-54dab33f5f78.png)

# cloudfrontでheaderにAuthorizationを含める

CloudFront→Distributionにメニューから飛んで
BehaviorsのDefaultパターンを選択して編集

cloudfrontのAdd headerに「Authorization」を追加してあげます。
旧デザインだとwhitelistheaderというところにあります。

![スクリーンショット 2021-07-10 11.13.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/574173/4d2ad9ec-169c-06ff-4bd9-ebc53443062d.png)


![スクリーンショット 2021-07-10 10.17.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/574173/da475f49-a7b2-5e32-b68b-a22d337a5fb0.png)

# 終わり
これでベーシック認証でIDとPWを入れて認証がうまく通りました。
SwiftUI で数値の増減をアニメーションさせる

![animating-value.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/982650/b7796e80-ce05-94b3-9c0c-3a741f8509b4.png)


数字がどんどん増えていくような演出をしたいとき、
普通に書くだけだと思った通りのアニメーションをしてくれません。
そこで、徐々に変化させながら表示するためのコードを用意してみました。

# コード例

```ContentView.swift
import SwiftUI
struct ContentView: View {

    // 変化する値 count
    @State var count: Int = 0
    var body: some View {
        
        // 変化する値 count を読み取る
        AnimationReader(count) { value in
            // count ではなく value の方を使って表示する
            Text("total: \(value)")
        }
        
        // 画面が表示された後に数字を増やしてみるテスト
        .onAppear {
            withAnimation(.easeInOut(duration: 10)) {
                count += 99
            }
        }
    }
}
```

# AnimationReader.swift
- コピペして, どこかにおいてください

```AnimationReader.swift
fileprivate struct AnimationReaderModifier<Body: View>: AnimatableModifier {
    let content: (CGFloat) -> Body
    var animatableData: CGFloat
    
    init(value: CGFloat, @ViewBuilder content: @escaping (CGFloat) -> Body) {
        self.animatableData = value
        self.content = content
    }
    
    func body(content: Content) -> Body {
        self.content(animatableData)
    }
}

struct AnimationReader<Content: View>: View {
    
    let value: CGFloat
    let content: (_ animatingValue: CGFloat) -> Content
    
    init(_ observedValue: Int, @ViewBuilder content: @escaping (_ animatingValue: Int) -> Content) {
        self.value = CGFloat(observedValue)
        self.content = { value in content(Int(value)) }
    }
    
    init(_ observedValue: CGFloat, @ViewBuilder content: @escaping (_ animatingValue: CGFloat) -> Content) {
        self.value = observedValue
        self.content = content
    }
    
    var body: some View {
        EmptyView()
            .modifier(AnimationReaderModifier(value: value, content: content))
    }
}
```

お役に立てましたらぜひ **LGTM** を！
【Java】Generics（ジェネリクス）を理解する

# はじめに
現在の開発実務では``Kotlin``を利用しているものの、たびたび``Java``の知識が必要に感じることがある。
（定義ジャンプしたときとか、``Kotlin``が便利すぎて色々省略されていて、「なんでこうなってんの？？」って思うときとか、、そう言うとき）

なので``Java``についても理解を深めたい。


# ジェネリクスとは
- クラス宣言時：そのクラス内で利用する要素の「仮の型名（Eなど）」を使っておく
- クラス利用時：「仮の型名（Eなど）」を``String``などの「実際の型」に置き換えて利用する

と言う仕組み

# ジェネリクスのメリット
型を限定しないため汎用的なクラスを定義することができるとともに、クラスを利用する際は利用者自身で型安全を確保することができる。

# ジェネリクスの注意点
- ジェネリクスの型に ``int`` などの基本データ型は利用不可（例：``Generics<int>``コンパイルエラーになる）
- ジェネリクスを用いたクラスの配列を作ることはできない。
- ``Throwable``の子孫クラス（例外クラス）では、ジェネリクスを用いることができない

# 実際にコードを動かして確認してみる
## ジェネリクスを使った例

```java
// このクラスでは E の型は利用する際に決めることする
public class Generics<E> {
  private E obj;
  
  public Generics(E obj) {
    this.obj = obj;
  }
  
  public E getObj() {
    return obj;
  }
}

class Main {
  public static void main(String[] args) {
    // 利用する際に E を String として利用することに決める
    Generics<String> generics = new Generics<>("2021");
    
    String obj = generics.getObj();
    System.out.println(obj);  // 出力結果： 2021
  }
}
```

## ジェネリクスを使わずに``Object型``で同じことをしてみる

```java
public class NoGenerics {
  // ジェネリクスを利用せずに Object型　で利用する
  private Object obj;
  
  public NoGenerics(Object obj) {
    this.obj = obj;
  }
  
  public Object getObj() {
    return obj;
  }
}


class Main {
  public static void main(String[] args) {
    // String型の引数obj としてインスタンス生成する
    NoGenerics noGenerics = new NoGenerics("2021");

    // キャストして取得する。キャストしないと String として利用できない。
    String obj = (String) noGenerics.getObj();
    System.out.println(obj); // 出力結果： 2021
  }
}
```

ジェネリクスを利用する場合に比べて、これの何が問題か？ というのを考えてみると。

1. キャストが面倒くさい
2. 誤ったキャストによるエラーが発生する危険性がある（``ClassCastException``）

2のエラー危険性があることが非常によろしくない。開発時にコンパイルエラーで危険性を教えてくれない。

### ClassCastException になってしまう例

```java
// ジェネリクスを利用しないクラス
public class NoGenerics {
  // Object型 だからなんでも入れられちゃう
  private Object obj;
  
  public NoGenerics(Object obj) {
    this.obj = obj;
  }
  
  public Object getObj() {
    return obj;
  }
}

class Main {
  public static void main(String[] args) {
    // String型の引数obj としてインスタンス生成する
    NoGenerics noGenerics = new NoGenerics("2021");

    // もしこの引数を Integer型 だと勘違いして利用しようとすると当然エラーが発生する
    Integer obj = (Integer) noGenerics.getObj(); // ここで ClassCastException !!!
    System.out.println(obj);
  }
}
```

この例だと簡単な例なので``String``を``Integer``に勘違いして利用しようとすることはイメージしづらいかもないものの、実際の開発で色々な処理が絡んでくると実際にあり得ることである。

# 実型引数に継承関係に基づく制限をかける
以下のようにすることで継承関係に基づいて制限をかけることができる

```java
Generics<? extends E> // E もしくは、　Eの子孫クラス
Generics<? super E> // E もしくは、 Eの先祖クラス
```

# 最後に
ジェネリクスなんて今更かもしれませんが、改めて勉強になりました。

- [スッキリわかるJava入門 実践編 第3版](https://www.amazon.co.jp/dp/B0932P349B/ref=sspa_dk_detail_0?psc=1&pd_rd_i=B0932P349Bp13NParams&spLa=ZW5jcnlwdGVkUXVhbGlmaWVyPUFCU1dGWFZNREkxWksmZW5jcnlwdGVkSWQ9QTAyODY5ODgyUTZERFNSU1lUU0xHJmVuY3J5cHRlZEFkSWQ9QVZFSTM5SFhIRlNFJndpZGdldE5hbWU9c3BfZGV0YWlsJmFjdGlvbj1jbGlja1JlZGlyZWN0JmRvTm90TG9nQ2xpY2s9dHJ1ZQ==)
- https://www.sejuku.net/blog/22699
adbコマンドまとめメモ

## adbとは
Googleの[Android開発者ページ](https://developer.android.com/studio/command-line/adb?hl=ja)によると、以下のように説明されています。

> Android Debug Bridge（adb）は、デバイスと通信するための多用途のコマンドライン ツールです。

Android開発者はもちろん、テスターやFlutter開発者にも使えるテクニックです。「こういったツールが用意されているから、iOSも好きだけどAndroidも良いよね」と感じます。

## 環境設定（adb: command not foundとなる場合）

adbコマンドが使えない場合は、以下の記事を参考にパスを通すこと

https://coriander-tomita.hatenablog.com/entry/2019/01/24/013351

## 目的
最近adbコマンドを使う機会が増えてきたので個人的なまとめをQiita上に置いて置きたい。自分が使うものだけまとめたい。
最近、Qiitaがどこからでも参照出来て便利なことに気づいた。

## コマンド
※使用頻度が高いものがあれば随時更新

#### 文字列を入力する（ログイン情報など入力するときに便利）

```shell
adb shell input text <入力したい文字列>
```

#### インストールされているアプリのバージョンを確認

```shell
adb shell dumpsys package <パッケージ名> | grep version
```

#### apkファイルを端末にインストールする
```shell
adb install -r -d <アプリ名>
```
GitHub Codespaces で使う環境変数を設定する（アクセストークンなど）

<h1>GitHub Codespaces にシークレットな環境変数を設定したい</h1>

> ローカルに `clone` したリポジトリを VSCode + [Remote-Container](https://code.visualstudio.com/docs/remote/containers) で Docker 上で開発できるように `.devcontainer` を設置しました。無事動いたので、[GitHub Codespaces](https://github.com/features/codespaces) でオンライン（ブラウザ）でも開発できるようにしたかったのです。
>
> しかし、起動はするもののテスト時に使う API のアクセス・トークンは環境変数で渡してたため、テストが行えません。**Codespaces で環境変数の設定箇所を探したのですが見つかりません**。

[「GitHub Codespaces 環境変数 設定」とググる](https://www.google.com/search?q=GitHub+Codespaces+%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0+%E8%A8%AD%E5%AE%9A)も、なかなかヒットしなかったので、自分の備忘録として。

## TL; DR <sub><sup><sub><sup>（今北産業）</sup></sub></sup></sub>

1. **ユーザ・アカウントの設定で行います**。リポジトリや起動した Codespaces 内には設定箇所はありません。
2. [`Settings`] - [`Codespaces`] - [`Codespaces secrets`] から "New secret" で環境変数名と値を設定 → "Repository access" で対象となるリポジトリを選び、"Add secret" する。
3. ここ<br> ![](https://docs.github.com/assets/images/help/settings/userbar-account-settings.png)

## TS; DR

公式ドキュメントが詳しいよ。

- [Managing encrypted secrets for your codespaces](https://docs.github.com/en/codespaces/managing-your-codespaces/managing-encrypted-secrets-for-your-codespaces#adding-a-secret) | [GitHub Codespaces](https://docs.github.com/en/codespaces) @ docs.github.com

### P.S.

**Codespaces 内のコンテナなのかを検知・確認したい場合**は、環境変数に `CODESPACES=true` があるか確認します。
【VBA】エビデンスをエクセルに貼り付けるマクロ作ってみた。

## はじめに

テストの時とか、一枚一枚キャプチャ撮ってエクセルぺたぺたするのが面倒くさくなり、
マクロ勉強ついでにエビデンスまとめる関数を作ってみました。

---

### エビデンスまとめ

使い方
・VBAを組み込むエクセルのA1に保存したいファイル名を入力
・エビデンスをPrintScreen等で取得し、一箇所のフォルダにまとめておく
　→取得方法は何でも良い
　　自分はプリントスクリーンの保存場所をエクセルと同じ階層の
　　imagesフォルダに格納させるようにしました。
・エビデンスが保存し終わったら、関数実行してD3に入力したファイル名で、エビデンスがまとまったファイルを作成
　→ボタンに関数埋め込んだりすると使いやすい。ショートカット登録でも良いかも

```vb
Sub evidence()
Dim lngTop As Long              ' 画像貼り付け位置
Dim objFile As Object
Dim objFldr As FileSystemObject
Dim newBookName As String       ' 新しいブック名
Dim newBookPath As String       ' 格納先
Dim newBook     As Workbook     ' 新しいブック
Dim cpSheesName As String       ' コピー元のシート名
Dim cpShees     As Worksheet    ' コピーしたシート

    ' 新しいブック名、フルパスを先に保持
    newBookName = ActiveSheet.Range("A1").Value & ".xlsx"
    newBookPath = ThisWorkbook.Path & "\" & newBookName
    
    ' 新しいブックを作成するファイルが作成済かどうか確認
    If Dir(newBookPath) = "" Then
        ' 新しいシート作成
        Sheets.Add After:=Sheets(Sheets.Count)
        ' シート名変更
        Sheets(Sheets.Count).Name = "ファイル" & Sheets.Count - 1

        ' インスタンス生成
        Set objFldr = CreateObject("Scripting.FileSystemObject")
    
        lngTop = 10 '初期貼り付け位置
        ' キャプチャ貼付
        For Each objFile In objFldr.GetFolder(ThisWorkbook.Path & "\images").Files
            ActiveSheet.Shapes.AddPicture _
                    Filename:=objFile, _
                    LinkToFile:=False, _
                    SaveWithDocument:=True, _
                    Left:=20, _
                    Top:=lngTop, _
                    Width:=650, _
                    Height:=400
        
            lngTop = lngTop + 400 + 10
        Next
    
        cpSheesName = Worksheets(Worksheets.Count).Name

        ' ファイルがない場合は、新しくブック作成
        Set newBook = Workbooks.Add
        ' シート移動
        ThisWorkbook.Worksheets(cpSheesName).Move before:=ActiveWorkbook.Sheets(1)
        Set cpShees = ActiveSheet
        cpShees.Name = "エビデンス"
        
        ' 不要なシート削除
        Application.DisplayAlerts = False
        Worksheets("Sheet1").Delete
        Application.DisplayAlerts = True
        
        ' 新しいブックをVBAを実行したファイルと同じフォルダに保存
        newBook.SaveAs newBookPath
        ActiveWorkbook.Close
        
        ' 貼り付けた画像を削除
        objFldr.DeleteFile (ThisWorkbook.Path & "\images")
        Set objFldr = Nothing
    Else
        ' 既にファイルが存在する場合は、メッセージを表示して保存はしない
        MsgBox ("既に" & newBookName & "というファイルは存在します。")
    End If

    ' マクロのシートに戻って終了
    Sheets("マクロ").Select
End Sub

'おまけ
Sub sheetDel()
    Dim mySht As Worksheet
    With Application
        ' 警告や確認のメッセージを非表示に設定
        .DisplayAlerts = False
        ' シート名をチェックして、アクティブシートでなければ削除
        For Each mySht In Worksheets
            If mySht.Name <> "マクロ" Then mySht.Delete
        Next
        '設定を元に戻す
        .DisplayAlerts = True
    End With
End Sub

```
## 解説
解説は気が向いたら。。。

## おわりに

とりあえず動くものは作れたけど、
もっとコンパクトにわかりやすくしたいなーと思いました。
すぐ試せるのも楽しいですね。
まだまだ勉強しなければっ
[React,Github Actions] create-react-appのアプリケーションをGithubActionsでビルドするときに`Treating warnings as errors because process.env.CI = true.` と怒られる時の対処法

# エラー概要

create-react-appのアプリケーションをGithub Actionsでビルドして、Firebase Hostingにデプロイしようとしたら以下のエラーが出てデプロイできなかった。
どうやらCIという環境変数がtrueになっていることで、eslintによるwarnings(例えば、unused import=使われてないimport文がある など)をエラーとして扱ってしまい、ビルドがコケているみたいだった。


```
> react-scripts build 

Creating an optimized production build...

Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.
```

実際の画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366323/77bf8848-7347-3db3-d5ad-b68991a864d3.png)

# 解決方法

## 方法1.警告になるような処理を修正する
正攻法。そもそも警告が出ないコードにするのが一番。

## 方法2. 環境変数CIをfalseにする
警告を全て解消している時間はない、とりあえず動くからデプロイしたい場合はこちら。

問題の環境変数をfalseにするために
yamlのビルドを行なっているstepに以下を追加する

```yaml
env:
     CI: false
```

step全体像

```yaml
- name: Install Packages And Build The Application
        run: cd ./path/to/your/app/directory && npm i && npm run build
        env:
          CI: false
```

# 参考
- [Github's action is not building react application](https://xn--stackoverflow-oz3l.com/questions/63445967/githubs-action-is-not-building-react-application)
unity5.2の作法 その25 3D商店街

#概要

unity5.2の作法、調べてみた。
3D商店街やってみた。

#参考にしたページ

https://fukuno.jig.jp/1548

#makefile

- 新規で3Dのプロジェクト作る。
- menu->file->new sceneする。
- menu->file->save sceneでsabaeとする。
- menu->gameobject->create emptyする。
- menu->assetes->creates->c# scriptでplayer.csつくる。
- ダブルクリックして、コードを書く。
- ヒエラルキーのgameobjectに、コードを重ねる。
- カメラも重ねる。
- ３D商店街データを画面に重ねる。
- 三角で実行。

#サンプルコード

```
using UnityEngine;
using System.Collections;

public class Player : MonoBehaviour {
	void Start () {
	}
	void Update () {
        float x = Input.GetAxisRaw("Horizontal");
        float z = Input.GetAxisRaw("Vertical");
        float y = 0;
        if (Input.GetKey(KeyCode.H))
        {
            y = 1;
            Debug.Log("H");
        }
        else if (Input.GetKey(KeyCode.J))
        {
            y = -1;
            Debug.Log("J");
        }
        Rigidbody rb = GetComponent<Rigidbody>();
        rb.AddRelativeForce(rb.transform.forward * z * 8);
        rb.AddRelativeForce(rb.transform.up * y * 8);
        rb.AddRelativeTorque(new Vector3(0, x, 0).normalized * 0.5f);
	}
}


```


以上。
【React】index.js:1 Warning: Each child in a list should have a unique "key" prop.の対処法

<h2>症状</h2>
Reactでユーザー一覧画面を作成している際に、下記の警告が表示されました。

翻訳すると、「警告：リスト内の各子には、一意の「キー」小道具が必要です。」となりました。
uniqueなキーが指定されていないため、警告が出ているようです。

```terminal:warn
Warning: Each child in a list should have a unique "key" prop.

Check the render method of `humans`. See https://reactjs.org/link/warning-keys for more information.
    at O (http://localhost:3001/static/js/vendors~main.chunk.js:70746:6)
    at humans (http://localhost:3001/static/js/main.chunk.js:7030:85)
    at Route (http://localhost:3001/static/js/vendors~main.chunk.js:62233:29)
    at Switch (http://localhost:3001/static/js/vendors~main.chunk.js:62435:29)
    at Router (http://localhost:3001/static/js/vendors~main.chunk.js:61868:30)
    at BrowserRouter (http://localhost:3001/static/js/vendors~main.chunk.js:61488:35)
    at App
```

該当のソースは以下です。

```react:human.jsx
import React, {Fragment} from 'react';
import styled from "styled-components";

const ContentsList = styled.div`
    display: flex;
    justify-content: space-around;
    float:left;
    width:18%;
    margin-left:1%;
    margin-right:1%;
`;

export const Foods = () => {
　　humans = ["たかし","まさお","ひろし"]

    return (
        <Fragment>
          {
            state.humansList.map((food,i) =>
              <ContentsList key={i}>
                <humanDataCard human={human}></humanDataCard >
              </ContentsList>
            )
          }
        </Fragment>
    )
}
```

<h2>解決策</h2>
以下のように、キーを指定してやれば解決です！

```react:human.jsx
import React, {Fragment} from 'react';
import styled from "styled-components";

const ContentsList = styled.div`
    display: flex;
    justify-content: space-around;
    float:left;
    width:18%;
    margin-left:1%;
    margin-right:1%;
`;

export const Foods = () => {
　　humans = ["たかし","まさお","ひろし"]

    return (
        <Fragment>
          {
            state.humansList.map((food,i) =>
              <ContentsList key={i}>
                <humanDataCard human={human}></humanDataCard >
              </ContentsList>
            )
          }
        </Fragment>
    )
}
```

<h2>参考</h2>

https://ja.reactjs.org/docs/lists-and-keys.html

https://qiita.com/koba04/items/a4d23245d246c53cd49d
django table "XXX" already exists　エラー解決

#エラー内容
django.db.utils.OperationalError: table "XXX" already exists
"XXX" DBテーブルが既に存在するため、エラーが発生している。
DBのテーブルを削除することでエラーが解決する

DB表示

```
python manage.py dbshell
```

テーブルを表示

```
sqlite> .tables
```

XXXテーブルを削除

```
drop table XXX;
```

##補足
DBのコマンドラインからの抜け方

```
sqlite> .exit   #正しい抜け方
```

下記コマンドでエラーが解決したか確認

```
python manage.py makemigrations
python manage.py migrate
```
JavaScript 【Cheat sheet】【随時更新】

##はじめに

####学習するに至った経緯

2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。
入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、
卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

##【機能 ・ 基本操作 ・ 用語一覧】

###【DOM】　getElementById()とは
『getElementById』とは、指定したid値を持つ要素をElementオブジェクトとして返すメソッド。
HTMLタグの中から指定したidを取得して何らかの処理をしたい場合などに使用される。

getElementByIdで要素を取得するには以下のように記述。
idにはHTMLに記述した取得したいid要素を記述し、
同一idはHTML内において複数使用することは出来ないので、一意なid値である必要がある。

```
document.getElementById(id)
```
###【DOM】 appendChild()とは
JavaScriptでプログラミングを行う際、動的にWebサイトに要素を追加したい場合に、
便利なのが『appendChild メソッド』。  ※要素の集合体をノードという。
『appendChildメソッド』を使うと、特定の親ノードの子ノードの最後にノードを追加することができる。
なお、追加しようとしたノードが既に存在していたら、既存のノードが新しいノードで置き換わる。
appendChild メソッドの書き方は以下のように記述。

```
var child = element.appendChild(child);
```

###【DOM】createElement()とは
JavaScript で HTML 要素を動的に生成するには『createElement() メソッド』を使用する。
createElement() メソッドの書き方は以下のように記述し、タグ名には div や a などの HTML 要素名を指定する。

```
const element = document.createElement(タグ名)
```
crreateElement() メソッドで生成した要素を実際のHTML要素に追加することで
HTMLを動的に生成することができ、HTML 要素への追加には appendChild() メソッドなどを使用する。

```
HTML要素.appendChild(生成した要素)
```
###DOMContentLoadedとは
DOMContentLoadedイベントは、HTMLページの読み込みが完了し、HTML のパース(解析)が完了して、
DOMツリーの構築が完了した時点で発生するイベントの事。
このイベントは、document オブジェクトで発生し、addEventListenerメソッドの引数として、
DOMContentLoadedを指定してイベントリスナーを登録してのみ利用できる。
DOMContentLoaded イベントは以下のように記述する。

```
document.addEventListener('DOMContentLoaded',
  function(){
    console.log('DOMツリーの解析が終わりました。');
  }
);
```
###createElement()メソッドとは
JavaScriptで、HTML 要素を動的に生成するには createElement()メソッドを使用する。
タグ名には、divや　a　などの HTML 要素名を指定する。
createElement() メソッドの書き方は以下のように記述する。

```
const element = document.createElement(タグ名)
```
####createElement() メソッドでHTMLを動的に生成する方法
crreateElement() メソッドで生成した要素を、実際の HTML 要素に追加することで HTML を動的に生成することができる。 
HTML 要素への追加には appendChild() メソッドなどを使用する。

```
HTML要素.appendChild(生成した要素)
```
###innerHTMLとは
html要素の中身を変更。Element オブジェクトの innerHTML プロパティ、
HTML または XML のマークアップを取得や設定する。
innerHTMLの書き方は以下のように記述する。

```
let changeHTML = document.getElementById("changeHTML");
changeHTML.innerHTML = '変えました。';
```

###Node.textContentとは


Node のプロパティで、ノードおよびその子孫のテキストの内容を表す。
 
```
let text = someNode.textContent
someOtherNode.textContent = string
```
今まで正常にできていたテストコードでエラーが！？

単体テストコードでエラーが出ているテストコードの修正をしたく記述修正し
再度テストコードのコマンドをターミナルで実行すると今まで正常にできていたテストコードでエラーが！

```
ActiveRecord::StatementInvalid:
       Mysql2::Error::ConnectionError: Lost connection to MySQL server during query
```

最初は修正を加えたところが全体に起因していると仮説を立てたが
Mysql2::Errorについて調べてみると
どうやらクライアント側とサーバー間のパッケット量のキャパを超えてしまっていて処理ができないようだ。

そこでテストコードに

```ruby
 it "postal_codeが空では登録できないこと" do
    @purehase_shipping.postal_code = ''
    @purehase_shipping.valid?
    expect(@purehase_shipping.errors.full_messages).to include("Postal code can't be blank")
    sleep 1.0
  end
```

sleepを記述した。
この記述をすることで指定した秒数処理を停止できる。
すなわち一度に処理しきれなかったデータを間隔を空けて処理できるようにする。
そうすることで今まで通り正常に処理できていたテストコードが通過。

```
 tokenが空では登録できないこと (FAILED - 1)
  postal_codeが空では登録できないこと
  postal_codeのハイフンがないと登録できないこと (FAILED - 2)
  municipalityが空では登録できないこと (FAILED - 3)
  addressが空では登録ができないこと
  phone_numberが空では登録ができないこと
  phone_numberは11桁以内でないと登録できないこと
  内容に問題ない場合
    全てが正しく保存ができること
```

まだいくつか改善していないところがあるが別のエラーが原因のため
今回はご了承ください。

ちなみにsleepの秒数の間隔は好きに設定できるのでご自身の環境にあった秒数でお試しあれ！
【Rails】seedファイルを用いてデータ作成する方法

####My Profile
プログラミング学習歴②ヶ月目のアカウントです！
プログラミングスクールで学んだ内容や自分が躓いた箇所等のアウトプットの為に発信しています。
また、プログラミング初学者の方にわかりやすく、簡潔にまとめて情報共有できればと考えています。
もし、投稿した記事の中に誤り等ございましたら、コメント欄でご教授いただけると幸いです。　



#対象者

* seedファイルを使ってデータ作成したい方
* そもそもseedファイルって何？と考えている方

#目的

* seedファイルを使用し、データ作成をすること

#実際の手順と実例
###1.seedファイルとは

結論：開発のサポートをしてくれるファイルの１つです！
（rails newした際にdbフォルダ内に作られます）
メリットとしては以下の通りです。
* 開発段階のアプリに動作確認のための初期データを投入できる
* 一度に大量のデータを作成できる


###2.実例
前提：Bookモデル（カラム：title,body）

seeds.rbに以下の例を記述

````
  List.create!(
    title: 'railsを学ぼう',
    body: 'seedファイルについて'
  )
`````
その後データベースに反映させる

````
$ rails db:seed
````

動作されているかの確認として
rails cで確認します

````
$ rails c
Running via Spring preloader in process 10372
Loading development environment (Rails 5.2.6)
2.6.3 :001 > Book.all
  Book Load (0.4ms)  SELECT  "books".* FROM "books" LIMIT ?  [["LIMIT", 11]]
 => #<ActiveRecord::Relation [#<Book id: 1, title: "railsを学ぼう", body: "seedファイルについて", created_at: "2021-07-10 01:18:57", updated_at: "2021-07-10 01:18:57">]> 
````

上記の最後の行をみるとtitleとbodyにデータが入ったことが確認できました！



###3.timesメソッドの活用

timesメソッドを活用すると
seedsファイルでは複数のデータを一括で作成できます。

seedsファイルに以下のデータを入力します。

```
10.times do |number|
    Book.create!(title: 'timesを学習しよう',body: number)
  end
```

上記記載の上で、**rails db:seed**を実行後、
rails cで確認すると、、、

`````
$ rails c
Running via Spring preloader in process 10972
Loading development environment (Rails 5.2.6)
2.6.3 :001 > Book.all
  Book Load (0.5ms)  SELECT  "books".* FROM "books" LIMIT ?  [["LIMIT", 11]]
 => #<ActiveRecord::Relation [#<Book id: 1, title: "railsを学ぼう", body: "seedファイルについて", created_at: "2021-07-10 01:18:57", updated_at: "2021-07-10 01:18:57">, #<Book id: 2, title: "railsを学ぼう", body: "seedファイルについて", created_at: "2021-07-10 01:30:41", updated_at: "2021-07-10 01:30:41">, #<Book id: 3, title: "times を学習しよう", body: "0", created_at: "2021-07-10 01:30:41", updated_at: "2021-07-10 01:30:41">, #<Book id: 4, title: "timesを学習しよう", body: "1", created_at: "2021-07-10 01:30:41", updated_at: "2021-07-10 01:30:41">, #<Book id: 5, title: "timesを学習しよう", body: "2", created_at: "2021-07-10 01:30:41", updated_at: "2021-07-10 01:30:41">, #<Book id: 6, title: "timesを学習しよう", body: "3", created_at: "2021-07-10 01:30:41", updated_at: "2021-07-10 01:30:41">, #<Book id: 7, title: "timesを学習しよう", body: "4", created_at: "2021-07-10 01:30:41", updated_at: "2021-07-10 01:30:41">, #<Book id: 8, title: "timesを学習しよう", body: "5", created_at: "2021-07-10 01:30:41", updated_at: "2021-07-10 01:30:41">, #<Book id: 9, title: "timesを学習しよう", body: "6", created_at: "2021-07-10 01:30:41", updated_at: "2021-07-10 01:30:41">, #<Book id: 10, title: "timesを学習しよう", body: "7", created_at: "2021-07-10 01:30:41", updated_at: "2021-07-10 01:30:41">, ...]> 

```

と表示され、１０回分のデータが作成されました！！
QGIS の Vector Bender プラグイン

### やったこと
シェイプファイルのベクトルレイヤーのジオリファレンスをQGISのプラグイン Vector Bender で実施します。（ラスターレイヤーのジオリファレンスのベクトルレイヤー向け作業、また、ラバーシーティングと呼ばれる機能、とプラグイン画面で説明されています）

### 動作確認環境
Windows10, QGIS 3.14.0, 3.16.0

### 手順
1. プラグインのインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224987/fe947d6e-838f-812d-8d35-707f2057cb2d.png)

2. プラグインを起動  
ジオリファレンスしたい(変形したい)ベクトルレイヤーをQGISに表示し、下記のツールバーのボタンを押下するか、メニューのプラグインから Vector Benderを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224987/f0b024b3-a309-5a3e-84e1-480bf5dc4bd7.png)

3. Vector Benderプラグインのダイアログで、移動元と移動先のペアを作成するレイヤーを作成し、対象レイヤとペア作成用の作業用レイヤーの2つを編集可能にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224987/5664ccb5-656b-4d8c-9f9b-255ba2835a24.png)

4. 背景地図（この例では国土地理院の標準タイルを表示しました）を参照しながら、作業用レイヤー上に移動元と移動先のペアを作成し、作成完了後、Vector Benderを実行(Run)し、対象レイヤを変形します。またペアを追加することで、全体もしくは部分的な変形を繰り返し実行することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224987/745ddfe2-e5c3-beb7-0779-e0015c2ee585.png)

* プラグインのヘルプにリンクが掲載されている使い方に関する動画がわかりやすいです。
【Ruby】これでいいのか？ボーナスドリンク問題を解いてみた！

　まだ使えるメソッドもあまり知らず、コードの書き方の基本もままならないプログラミング初心者ですが、恥ずかしながらコードを公開しております。

　[アウトプットのネタに困ったらこれ！？](https://blog.jnito.com/entry/2019/05/03/121235)

　今回はこちらの記事を参考にしてボーナスドリンク問題を解いてみました。

　空き瓶3本で新しい飲み物を1本プレゼントしてくれる駄菓子屋で飲み物を買った場合、トータルで何本飲めるかといった問題になります。

| 購入した本数 | 飲める本数 |
| :--- | --- |
| 0 | 0
| 1 | 1 
| 3 | 4
| 11 | 16
| 100 | (出したい値)


　僕はこのようなコードにしました。

```ruby
def can_drink(purchase)
  count = 1
  while count <= purchase
    if count % 3 == 0
      purchase += 1
    end
    count += 1
  end
  puts "トータルで#{purchase}本飲めます"
end

puts "飲み物を何本購入しましたか？"
purchase = gets.to_i
can_drink(purchase)
```

　こんな解き方でいいのか？と思っているので、ご意見いただけるとありがたいです。もしかしたらどこか見落としがあるかもしれません。
【備忘録】二次元いもす法

https://atcoder.jp/contests/typical90/tasks/typical90_ab


で、うまく解けなかったので、
反省と備忘録を込めて記事にします。

atcoderは緑です。

（かなり備忘録の意味合いが強く僕が後で見返して理解しやすいように作成します）

#累積和といもす法

https://imoz.jp/algorithms/imos_method.html

厳密な話まではいもす法に関して理解するのは難しかったので、
累積和のぱっと見の考え、と上記典型90での二次元いもす法の考え方の違い（気をつけること）を記録します。

###　累積和

```go

array := []int{5,4,3,2,5}
ruiseki := make([]int, len(array))
ruiseki[0] = array[0]

for i:= 1; i<len(array); i++ {

ruiseki[i] = ruiseki[i-1] +a[i]

}

// とすることで、
// 3~5などのi~jまでの配列のsumをO(1)で取れるのが強み
// あとは、累積和されたものと累積和されたものを比較して、どちらの方が多くスコアが取れる...とかを高速で行えるなど
//3 ~ 5
get := ruiseki[4] - ruiseki[2]
```

## 解説を見て噛み砕いた理解

累積和の利点を拡張するというよりも、
累積和を扱い、二次元いもす法の利点を享受する。という印象を少なくとも上記の典型90では感じました。

早速ですが、上記の問題を例に下記のものを考えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518243/ea137cbb-3a89-89a4-5138-83bad1e8ec37.png)



図のように、(x,y)の点と、水平方向ベクトルの長さと、垂直方向のベクトルの長さが分かれば、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518243/1f63842e-7c6b-cbb7-cfd4-0fb14c7eee1b.png)

このように、長方形を描画できそうです。（プログラミングの場合は、第4象限が+,+領域になるので、+bになりますね）

上記の問題では、
対角線上の点を得て、長方形を描画することから、(x,y)の点,a,bベクトルを得ることができます。

ここで、累積和をのsumを図で考えてみると

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518243/e7a8e3d2-eebc-870a-7490-bb216098a769.png)

このようになっており、indexが進むごとに数字の重なりが発生します。
これを利用し、重なりを

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518243/390a9443-7744-28eb-0f45-effd13bbbb19.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518243/d8d80868-4dfd-e528-1db3-7a1ac6a441f2.png)



(2の部分で二つのブロックが重なっている。)

このように表せます。
これを二次元に拡張すると

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518243/f60ea3d7-0531-588e-33f0-a8e6b1201c39.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518243/f4e94f2e-0e6e-3b94-4eea-a5a5ed5d0ec9.png)

このようになります。垂直方向,水平方向のベクトルを抑えるための、-1はもちろんですが、
右下の1を考えなければいけません。

実際に、重なりを表現する場合、H,Wの二重ループになり

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518243/69a5bc4e-683d-3aa2-4da0-92abee0f53a2.png)

このようになります
その場合、垂直方向、水平方向を相殺するための1を配置しなければ、-1が永久に作用し続けます。

このように考えることで、
二次元上に、N個の長方形が存在していても、その重なりを、O(N+HW)で計算できます。
RaspberryPiで使えるモバイルバッテリー

https://qiita.com/clses/items/3aec1b0bf975f614723c

上記の記事が参考になったので, 自分も手持ちのバッテリーについて下記を満たすのか調べてみた.
使用したのは Raspberry Pi 4 だが特に気にしなくてよさそう.

1. モバイルバッテリー自身がコンセントから充電されている状態で、その間ラズパイへの給電もし続ける。
2. 充電中に外してもラズパイへの給電が瞬停しない。
3. 充電してない状態(持ち運んでいる想定)から、モバイルバッテリーを充電してもラズパイへの給電が瞬停しない。
4. ~~ラズパイが低電力状態(私の環境ではラズパイに何も接続しない状態で100mA)でも自動的に停止しない。~~

測定器具が手元にないので今回４番は調べない.

### cheero Power Plus 3 mini 520mAh CHE-071

1. OK
2. x 瞬電あり
3. OK

### TOPLAND スマートACバッテリー2600mAh LP-26W
（備考：出力1A）

1. OK
2. × 瞬電あり
3. OK

### eneloop mobile booster KBC-L2BS
（備考：出力1A）

1. OK
2. OK
3. OK
一人でサクッとアプリケーションを作るときはちゃんとしたモックアップを作るといいかも。

現役のwebエンジニアです。
おうちで勉強した内容などをメモ程度に上げていきます。

## 困ったこと
laravel✖︎intera
で一人で一からサービスを作ってみたかったが大変そうだったのでやめた。

## これからやってみること
上記の困ったことは一人でバックエンドもフロントもやろうとするのが、大変。
↓
もっと細分化してできることから進められるモックを作成したらいいのでは？

## より具体的には
以下の参考資料のようなサイトを参考にvue単体である程度動くようなモックアップを作成します。
モック作成用のアプリ等を利用するとデザインのハードルが上がるし、
アプリ本体制作時の骨組みとしての利用もしにくいので
実際に利用予定のフロントのフレームワークをモック作成に採用するのが良いのでは？と考えました。
会社の本棚の管理サービス的なものを制作予定です。

##参考資料
https://qiita.com/yujiteshima/items/bee94f3306ee4cdcd064
VirtualBoxでホスト側と異なるCPUを動作させたい

## 結論

無理です。

目的達成のためにはCPUのエミュレータが必要ですが、VirtualBoxは仮想化を行います。[QEMU](https://www.qemu.org/)などのエミュレータを使いましょう。

更新日時は古いですが[こちら](https://xtech.nikkei.com/it/article/lecture/20061228/258010/)の記事がわかりやすいです。

## 使用しているCPUを擬装させる

目的からは逸れますが、OSが認識するCPUを変えることは可能です(実際に使われるのはホスト側のCPUと同じ)。使用用途は不明ですが、CPU確認を行うロジックの動作確認とかでしょうか。。。？

### CPUプロフィール一覧の確認

[Stack Exchange](https://unix.stackexchange.com/questions/557724/where-is-the-list-of-supported-cpu-profiles-in-virtualbox)に回答がありました。

VirtualBoxのインストールディレクトリに存在する「VBoxVMM.dll」を7zipなどで展開します。その中に含まれる「.rdata」の中から使用可能なCPUプロフィールを確認します。

※かなり強引な確認方法な気がします。もしあれば、正規の確認方法教えていただきたいです。

### ゲストOSの設定変更

コマンドライン上で以下を実行します。

ゲストOS名「guest os name」のCPUを「AMD Athlon 64 3200+」に偽装します。

```
{VirtualBoxインストールディレクトリ}\VBoxManage modifyvm "guest os name" --cpu-profile "AMD Athlon 64 3200+"
```

ホスト側と同じCPUに戻す場合は以下を実行します。

```
{VirtualBoxインストールディレクトリ}\VBoxManage modifyvm "guest os name" --cpu-profile "host"
```

* [Oracle公式ドキュメントより](https://docs.oracle.com/en/virtualization/virtualbox/6.0/user/vboxmanage-modifyvm.html)
[Rails] エラーメッセージを日本語化

##はじめに
デフォルトではエラーメッセージは英語で表示されるとおもいますが、日本語で表示されると日本人からすれば丁寧でわかりやすいですよね。

今回はエラーメッセージの日本語化の方法をまとめてみました。よろしくお願いします。

エラーメッセージの表示方法はこちらを参照していただければと思います。↓
https://qiita.com/minhee/items/f3a2ff60a084948a19a5


##エラーメッセージの日本語化

まずは、新たにGemが必要となります。
↓こちらをGemfileに記載して```bundle install```

```:Gemfile
gem 'rails-i18n'
```

新しいファイルが必要となります。
```config/locales/ja.yml```
というファイルを作成してください。その中に下記のように記述します。

```yml:config/locales/ja.yml
ja:
  activerecord:
    attributes:
```

ここまで記述できたら、次の行からもう一つインデントを下げて、モデル名を記載します。
その後もう一度インデントを下げてカラム名を指定し、その日本語訳を書いてあげます。
例えば私の場合はtextbookモデルにバリデーションを記載していて、そこで使われるカラム名の日本語訳を書きました。↓

```yml:config/locales/ja.yml
ja:
  activerecord:
    attributes:
      textbook:         # モデル名
        name: 参考書名    #カラム名とその日本語訳
        page: ページ数
        image: 写真
```

こんな感じでカラム名のところが指定した日本語訳に置き換わってしっかり表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1552346/12442f57-de90-bd94-a1bb-3b4dc1868191.png)

ちなみに赤字はcssで

```css
#error_explanation {
  color: red;
}
```
で変更しました。

##最後に
エラーメッセージが日本語化されるとユーザーも使いやすいですね。
今、私が挑戦しているのは独自の条件でオリジナルのバリデーションを作ろうとしているのですが、なかなか上手くいきません。
良い記事などあれば教えていただければ幸いです！
フォルダ内のファイル数・容量を出す（ワンライナー）

ファイル整理のためフォルダの容量を調査する必要があったので調べました。
コマンドプロンプトではフォルダの容量はわからず、PowerShellで出来るらしい。
##手順
①PowerShell起動
②対象ディレクトリ移動（cd）
③以下を実行

```powershell
> Get-ChildItem ./ | ? { $_.PSIsContainer } | ForEach-Object -Process{Write-Host $_; Get-Childitem -Path $_ -Recurse | Measure-Object -property length -sum | Format-List count, sum} *> Folder_capacity.txt
```
④出力ファイルを確認（Folder_capacity.txt）※リダイレクトはおまかせで
こんな感じで出てくる。
> test_folder
> 
> 
> Count : 26
> Sum   : 290066400

※出力されるのはフォルダのみ
## 参考リンク　thx
[dirコマンドでフォルダの大きさを調べる](https://dabudablog.info/azurite/post/windows_filesize_dir/)
API Gatewayを使ってLambda関数を使ったREST APIを作成する

# はじめに
こんにちは。東京五輪のサッカー準決勝のチケット持ってましたが、無観客になっちゃいましたね :innocent: いやー、もし再抽選で当たってたら行く行かないで迷っていたと思うので、自分はこれでよかったと思います。

さて、今回は先日作成した**Lambda関数**を**API Gateway**を通してAPIとして使えるようにしようと思います。

# 先日作成したLambda巻子はこちら

https://qiita.com/akitkat/items/d7d3f41449a58fdb38ae

# API Gatewayを使ってLambda関数を実行する
## 1. APIの作成
`APIの作成`からAPIを作成します。
`API名`はお好みで大丈夫です。URLに含まれたりはしません。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86984/3a0b3a0d-5777-40da-46e0-cb49d0eea4d4.png)

## 2. リソースの作成
`アクション`プルダウンメニューから`リソースの作成`を押下。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86984/e52ce591-bae5-6fb3-ec4c-2b71cc2102d1.png)
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86984/bb7c00ff-b8ec-431f-fe71-5e9b8d97b94c.png)

## 3. メソッド作成
2と同様にプルダウンメニューから`メソッドの作成`を選択し`GET`メソッドの設定を行います。
使用したいLambda関数名のページから`関数のARN`をコピペします。

ここで、`Lambdaプロキシ統合の使用`にチェックを入れるとクエリパラメータやパスパラメータなどをLambda側に渡すことができます。

## 4. APIのデプロイ
2と同様にプルダウンメニューから`APIのデプロイ`を選択し以下を参考にデプロイを行います。

デプロイ完了後APIアクセスのURLが表示されますが、まだアクセスしません:bow:

![q.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86984/966238a7-3945-5afb-4694-964c1e61528c.png)

## 5. Lambda関数編集
Lambda関数がAPI Gatewayで返却できるレスポンス形式になっていないため(私の場合)その確認と編集を行います。

前述のLambdaでスクレイピングする記事のコードを以下のように編集します。
デプロイもお忘れなく:pray:

```diff
  from selenium import webdriver
+ import json

  def lambda_handler(event, context):

...
...
...

-     return title
+     response = {
+         'title': title
+     }
+     return {
+         'statusCode': 200,
+         'body': json.dumps(response)
+     }
```

## 6. Lambda上でテストする
Lambdaのテストのタブで、`新しいイベント`から`Amazon API Gateway Proxy` を選択します。
お好みで名前を付けて保存し、テストを実行します。

## 7. APIを叩いてみる
4で出力されたAPIのURLを叩いてみて、6と同じ結果が表示されれば完了です:+1:

# おわりに
5をしないとエラーを吐き、つまづきポイントだと思います。
エラー出た際は、Lambda側でテストで通るかどうか試してみてください、ログも出ますので読めなり、ググるなりすればわかると思いますので:smile:

それでは！
Google Docsのカーソル位置に日付を挿入するGoogle Apps Script

Google Docsの、Tools内、Script editorを選択します。スクリプトエディターが開きます。

## Google Apps Script (GAS)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/c5692481-f77a-3e6d-6b3e-b147e789232a.png)

以下をスクリプトとして保存したら、Google Docs自身を一旦閉じ、再度開きます。


```javascript
/**
 * onOpen functionは Google Docsを開いた際に自動的に実行される。
 * 詳細は以下
 * 
 * Extending Google Docs developer guide:
 *     https://developers.google.com/apps-script/guides/docs
 *
 * Document service reference documentation:
 *     https://developers.google.com/apps-script/reference/document/
 */
function onOpen() {
  // 「ユーティリティ」メニューを追加する。サブメニューには「Insert Date」
  DocumentApp.getUi().createMenu('ユーティリティ')
      .addItem('Insert Date', 'insertAtCursor')
      .addToUi();
}

/**
 * 現在のカーソルに日付を挿入する
 */
function insertAtCursor() {
  var cursor = DocumentApp.getActiveDocument().getCursor();

  if (cursor) {
    // カーソル位置へのテキストの挿入。挿入が null を返した場合は
    // カーソルのある要素がテキストの挿入を許可していないことになる
    var date = Utilities.formatDate(new Date(), "GMT", "yyyy-MM-dd"); // "yyyy-MM-dd'T'HH:mm:ss'Z'"
    var element = cursor.insertText(date);
    if (element) {
      element.setBold(true);
    } else {
      DocumentApp.getUi().alert('このカーソル位置にテキストを挿入できません。');
    }
  } else {
    DocumentApp.getUi().alert('ドキュメント内のカーソルが見つかりません。');
  }
}
```

メニューに `ユーティリティ` > `Insert Date` が表示されていれば完成です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/cd9a1c55-8f2f-8d4a-04b3-7b396a2b260c.png)


## 参考

https://webapps.stackexchange.com/questions/58965/is-there-a-way-to-insert-today-s-date-into-a-google-docs

上記を参考にしています。
【Docker】PHPの対話シェル環境を一分で構築する

# はじめに
レビューやコードの実装をおこなっていると、ちょっとした動作の確認を行いたいことがあるかと思います。
そうしたちょっとした動作確認をおこなうのにDockerが非常に有効です。
今回はphpの対話シェルを簡単に起動する方法を紹介します。

# 実行方法
```
$ docker run -it --rm php:7.4-fpm-alpine php -a 
php > 
```
quit」、「exit」、「Control + d」のいずれかで終了します。
コンテナ環境を抜けるには「Control + d」を入力します。


これで、PHPの環境構築完了です。
簡単な動作確認を行いたいときには参考していただければと思います。
【k8s】一分でpostgresql環境を作る！！

# 以下を実行するだけ！！
```shell
cat <<EOF | kubectl apply -f-
apiVersion: v1
kind: Secret
metadata:
  name: postgres-password
type: Opaque
data:
  password: dGVzdA==
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: postgres
spec:
  selector:
    matchLabels:
      app: postgres
  template:
    metadata:
      labels:
        app: postgres
    spec:
      containers:
      - name: postgres
        image: postgres:13-alpine
        env:
        - name: POSTGRES_PASSWORD
          valueFrom:
            secretKeyRef:
              name: postgres-password
              key: password
        ports:
        - containerPort: 5432
---
apiVersion: v1
kind: Service
metadata:
  name: postgres
spec:
  selector:
    app: postgres
  ports:
  - port: 5432
    targetPort: 5432
```

# postgresへのログイン方法
```
$ kubectl get po | grep postgres | awk '{print $1}' 

$ kubectl exec -it [表示されたpostgres pod] sh
$ psql -U posgres
# postgres
```
yukicoder 競プロ典型 90 問　期末試験 参戦記

# yukicoder 競プロ典型 90 問　期末試験 参戦記

コンテスト終了するまでジャッジが詰まっていたのは初めてですね. いつもより参加者が多かったとはいえ、倍にもなっていないのにここまでのことになるとは、待ち行列理論は恐ろしい.

## [A 1591 Two Digits](https://yukicoder.me/problems/no/1591)

2桁の数というのは10から99なので何も難しいことはないですよね.

```python
N = int(input())

if 10 <= N <= 99:
    print('Yes')
else:
    print('No')
```

## [B 1592 Tenkei 90](https://yukicoder.me/problems/no/1592)

含まれている文字の数を数えて、等しければ作ることができますね.

```python
from collections import Counter

S = input()

c1 = Counter('kyoprotenkei90')
c2 = Counter(S)
for k in c1:
    if c1[k] == c2[k]:
        continue
    print('No')
    break
else:
    print('Yes')
```

わざわざ数えずにソートすればよかった.

```python
S = input()

if sorted('kyoprotenkei90') == sorted(S):
    print('Yes')
else:
    print('No')
```

## [C 1593 Perfect Distance](https://yukicoder.me/problems/no/1593)

*N*≦200000 なので *x* を1から*N*まで試せば分かりますね.

```python
from math import isqrt

N = int(input())

result = 0
for x in range(1, N):
    y = isqrt(N * N - x * x)
    if x * x + y * y == N * N:
        result += 1
print(result)
```

## [D 1594 Three Classes](https://yukicoder.me/problems/no/1594)

*N*≦12 なので全組み合わせを試しても 3<sup>12</sup>≒5.3×10<sup>5</sup> なので大丈夫.

```python
from itertools import product

N, *E = map(int, open(0).read().split())

for p in product([0, 1, 2], repeat=N):
    t = [0] * 3
    for i in range(N):
        t[p[i]] += E[i]
    if t[0] != t[1] or t[1] != t[2] or t[0] != t[2]:
        continue
    print('Yes')
    break
else:
    print('No')
```

## [E 1595 The Final Digit](https://yukicoder.me/problems/no/1595)

時間内に解けず. 何度か似たような問題を解いているのに情けない. まず一番下の桁しか気にしなくていい. 3つのAの組み合わせは10<sup>3</sup>しかないので、少なくともそれだけ回せばループする. ループ長が分かれば余りを取れば良くなり、一瞬で計算できる.

```python
p, q, r, K = map(int, input().split())

A = {}
A[0] = p % 10
A[1] = q % 10
A[2] = r % 10

def conv(a, b, c):
    return (a % 10) * 100 + (b % 10) * 10 + c % 10

for k in range(3, 2000):
    A[k] = (A[k - 1] + A[k - 2] + A[k - 3]) % 10

if K - 1 < 2000:
    print(A[K - 1])
    exit()

d = {}
for k in range(2, 2000):
    x = conv(A[k], A[k - 1], A[k - 2])
    if x in d:
        loop_start = d[x]
        loop_len = k - x

n = ((K - 1) - loop_start) % loop_len + loop_start
print(A[n])
```
Linux デバイス - ブロックデバイスとキャラクタデバイス

Linux のデバイスには、ブロックデバイスとキャラクタデバイスがあります。

## キャラクタデバイス (character device)

ひとつの文字(単位)ごとに処理をするデバイスのことです。

バッファを使いません。
ひとつ前のデータに戻ってアクセスはできません。

### 例

* シリアルポート
* パラレルポート
* サウンドカード
* キーボード
* マウス
* モデム
* 仮想コンソール

## ブロックデバイス (block device)

データのまとまりごとに処理をするデバイスのことです。

バッファを使います。
ランダムアクセス可能です。

### 例

* ハードディスク
* CD-ROM

## デバイスの一覧

Linux が認識しているデバイスの一覧は、 `cat /proc/devices` で出力できます。
キャラクタデバイス、ブロックデバイスが順に表示されます。

```
[ec2-user@sample ~]$  cat /proc/devices
Character devices:
  1 mem
  4 /dev/vc/0
  4 tty
  4 ttyS
  5 /dev/tty
  5 /dev/console
  5 /dev/ptmx
  7 vcs
 10 misc
 13 input
128 ptm
136 pts
202 cpu/msr
203 cpu/cpuid
249 nvme
250 dax
251 hidraw
252 bsg
253 rtc
254 tpm

Block devices:
  9 md
253 device-mapper
254 mdp
259 blkext
```
Linux デバイス - メジャー番号とマイナー番号

`lsblk` では、デバイスのメジャー番号とマイナー番号を表示できる。 `MAJ:MIN` で表示されているのがメジャー番号とマイナー番号。

```
[ec2-user@sample ~]$ lsblk
NAME          MAJ:MIN RM SIZE RO TYPE MOUNTPOINT
nvme0n1       259:0    0  20G  0 disk 
├─nvme0n1p1   259:1    0  20G  0 part /
└─nvme0n1p128 259:2    0   1M  0 part 
```

## メジャー番号

メジャー番号は、各デバイスで使用されるドライバを表します。

数値が何を表しているかは `cat /proc/devices` を実行すると一覧で表示されます。 最初にキャラクタデバイスが、次にブロックデバイスが表示されます。(参考: [Linux デバイス - ブロックデバイスとキャラクタデバイス](https://qiita.com/KenjiOtsuka/items/8f9ee4bc41bf676d64d9))

```
[ec2-user@sample ~]$  cat /proc/devices
Character devices:
  1 mem
  4 /dev/vc/0
  4 tty
  4 ttyS
  5 /dev/tty
  5 /dev/console
  5 /dev/ptmx
  7 vcs
 10 misc
 13 input
128 ptm
136 pts
202 cpu/msr
203 cpu/cpuid
249 nvme
250 dax
251 hidraw
252 bsg
253 rtc
254 tpm

Block devices:
  9 md
253 device-mapper
254 mdp
259 blkext
```

## マイナー番号

マイナー番号は、 同じメジャー番号のデバイスを識別するための枝番号です。
中国語プログラム「華」

クジラさんの「なでしこ」に触発されて、新しいプログラム言語のコンセプトを固めてみる。

今のところは、昔のＰＣ８００１程度のＢＡＳＩＣが組めるレベルで考えている。

ただし、あの時代になかった、インターネットには繋げるようにはしたい。

#宣言文

　もちろん基本ですが・・・

```
A = 0
```
```
A　是  0
```
　しかし、ここってわさわざ置き換える必要ないねえ。。。
　万国共通の数学記号を使うべきだよなあ・・・


#IF節

　これはもう、これしかないねえ・・・

```
IF a=1000 THEN　…  ELSE
```

```
如果　a=100　就　...　反而
如果　a=100 的话 ...　或者
```
どっちも正解なんだよなあ・・・
書き言葉なのか話し言葉なのかでも違うしね・・・
好みがわかれるところ


#cause節

　こんなんプログラミングで必要かね？

```
因为　a=100　如此　
```

a=100　だからこうする。。。って
いちいち説明はいらないし、むしろ勝手にしなさいという感じ。。。
　
#ねむぃ

　こんな言語開発しても、そもそもSCRACHも禁じる国なんで、ニーズはないわなあ・・・
ユーザー毎に、一覧表示、作成の仕方(Laravel)

プログラミング初心者です
##問題
アプリ作成中に、ユーザーが作成したフォルダを、ユーザー毎に一覧表示、作成ができていなく、どのユーザーでログインしても同じ画面が表示されてしまうことに気づきました。


##解決方法
```HomeController.php
//フォルダ一覧画面
public function home(Request $request)
   {
       $folders = $request->user()->folders;
   }
```
##解説
・user()はRequestクラスの中にあるメソッドで、ユーザー情報を取得します。[ご参考](https://github.com/illuminate/http/blob/master/Request.php#L516)にどうぞ。
・foldersはUser.phpにリレーション定義したfoldersメソッドです。

つまり、$requestであらゆる情報を取得、user()でユーザー情報を取得、foldersでuser()で取得したユーザーに合ったフォルダを取得する流れになっています。

最初user()がなんなのか分からず調べるのに時間かかりました。


##備考
```HomeController.php
//フォルダ作成画面
public function CreateFolderForm()
    {
        $user = Auth::id();

        return view('user.CreateFolder',['user' => $user]);
    }
```
フォルダの作成画面で作成が実行される時に、ログインしてるユーザーのIDを渡すようにviewに渡しています。
これは、これはこの人の画面という情報をDBに保存するためです。
SQLのHAVINGとWHEREの違いは評価順序じゃない

タイトルはちょっと嘘です。結果としてHAVINGとWHEREは評価順序が違うのですが、理解の仕方が間違っています。

目的の視点から違いを把握するのが正しく、違いは以下の通りです。

- HAVINGはSUMなどの集約結果に対するフィルタリング条件
- WHEREは集合全体に対するフィルタリング条件

HAVINGとWHEREの両者の違いは目的の違いであり、評価順序の違いは目的を表現するための挙動の一つにすぎません。

HAVINGとWHEREの意味を正しく理解していれば、実行順序を覚えて挙動を理解するなどいちいちしなくても、意図通りの結果が返ってきます。
深層学習-後編2 強化学習

ラピッドチャレンジで学習したことを忘れないように残そうかと。
はい。

#強化学習
環境の中で行動を選択できるエージェントを作ることを目標とする。
行動による利益（報酬）をもとに、行動を決定する原理を改善する。

不完全な知識を元に行動しながらデータを収集し、最適な行動を見つける。
試しながら、失敗しながら学習してく。
仕事をしていくイメージ。

わかりやすかったページ

https://blog.brainpad.co.jp/entry/2017/02/24/121500

探索と利用のトレードオフ
最初はランダムに動いて(探索)、ある程度わかってきたら経験を利用する。
このトレードオフがあって、学習を進められる。

方策関数と価値関数を学習するのが強化学習。
アルゴリズムには下記がある。

- Q学習
- Sara
- モンテカルロ法

## 強化学習と通常の教師あり、教師なし学習との違い
そもそも、目標が違う。
- 教師なし、あり学習
データに含まれるパターンを見つけ出すことと、データから予測すること。
- 強化学習
優れた方策を見つける。

## 強化学習の歴史
Q学習と関数近似法があり、深層学習と組み合わせて使う様になってきている。

- Q学習
    行動価値観数を、行動するたびに更新することで学習を進める方法

- 関数近似法
    価値観数や方策関数を関数近似する手法

## ポリシー
エージェントはポリシー $\pi$ にしがって行動します。
この場合、方策とはある状態sの時に行動aを取る確率として定義されます。

```math
\pi(s,a)
```

## 価値観数
価値を表す関数。目標設定と考えれば良い。
2種類ある。

- 状態価値観数
    - 状態の価値に注目する。
- 行動価値関数
    - Q学習で使われる。
    - 状態と行動を組み合わせると生成される価値に注目する。

```math
V^{\pi}(s) : 状態価値関数 (状態sにいることの価値)\\
Q^{\pi}(s, a) ：行動価値関数(状態 + 行動関数。状態sにいて行動aを取る価値)
```

## 方策関数
エージェントがある状態でどの様な行動を取るか決める関数。
価値観数を最大にするように計算する。「今回はどうしよう？」を決める。

```math
\pi(s) = a
```

方策関数は価値観数を最大にする方法を学習させる。

##方策勾配法
方策関数をNNにしてあげればいいのでは？ということ。


- 方策反復法

```math
\theta^{(t+1)} = \theta^{(t)} + \epsilon \nabla J(\theta)
```

方策関数は

```math
\pi(s, a) |\theta)
```

s:状態
a:行動
$\theta$ : 重み

J() : NNでいうところの誤差関数

NNだと最小化したいが、深層学習は最大化したい。

- 平均報酬
- 割引報酬和

行動価値関数: Q(s, a) の定義を行い、方策勾配定理が成り立つ。
方策関数を最大化したい。
この式を計算する。

```math
\nabla_{\theta} J(\theta) = \mathbb {E}_{\pi_\theta}[(\nabla_{\theta}log\pi_\theta(a|s)Q^\pi(s,a))]
```

元の式は下記。

```math
\nabla_{\theta}J(\theta) = \nabla_{\theta} \sum_{a \in A }\pi_{\theta}(a|s)Q^{\pi}(s, a)\\
```

$\pi_{\theta}(a|s)Q^{\pi}(s, a)$ は、ある行動を取るときの報酬を表す。
それを足し合わせるというのが、上式。

## 状態価値観数 (ベルマン方程式)
現時点 t におけるQ値は一つ先の時点 t+1 のQ値によって書くことができるという考え方。

```math
Q(s_t, a_t) = E_{s_{t+1}}(r_{t+1} + \gamma E_{a_{t+1}}(Q(s_{t+1}, a_{t+1})))
```

# 深層学習の定石
２次元が入ってきたらConvolutionする。
出力が2次元ならSoftmax
出力がもっと小さな次元なら、flatten して結合して集約する。

# Alpha Go (Lee)
PolicyNet (方策関数) と Value Net (価値観数)
いずれも畳み込みネットワーク。

PolicyNet : 碁石を打つ位置を計算する
ValueNet : 勝つか負けるか算出する。

## Alpha Go の学習ステップ
学習の方法を工夫して、学習させている。
強化学習で学習させるのは大変なので、教師あり学習である程度学習させてから、強化学習をする。

1. 教師あり学習による RollOutPolicy と PolicyNet の学習
1. 強化学習による PolicyNet の学習
1. 強化学習による ValueNet の学習

### RollOutPolicy
NNだと学習のためにリソースが必要になる。
NNではなく、線形の方策関数を使いましょう。
PolicyNetに比べて1000倍早い。

## Alpha Go (Lee)のモンテカルロ木探索
価値観数を学習させるときに適用された。
下記4ステップで行使される。

- 選択
- 評価
- バックアップ
- 成長

## Alpha Go Zero
Alpha Goとの違いは下記。

- 教師あり学習はしない。強化学習だけ。
- 特徴入力(人がこれ、役に立つんじゃない？データを選ぶ)からヒューリステックな要素を排除
- PolicyNetとValueNetを1つのネットワークに統合
- Rsidual Netを導入
- モンテカルロ木探索から RollOut シミュレーションをなくした

### Residual Network
ネットワークにショートカット構造(Identity mappingと言われるバイパス接続)を追加して、勾配の爆発、消失を抑える。
100層を超えるネットワークで安定した学習ができる様になった。
単にSkipが入っているだけ。

下記を１単位(１ブロック)にして、積み重ねる。
Residual Blockという。

Convolution → BatchNorm → ReLU → Convolution → BatchNorm → Add → ReLU

ショートカット構造の場合、"Add"から始める。

浅いCNNで十分学習できてしまい、深い中間層が不要な際、不要な層の重みが 0 になる。

アンサンブル効果が得られる。

### Residual Networkの派生形
- Residual Block に工夫をしたもの
    - Bottleneck
    - PreActivation
- NetWork 構造に工夫したもの
    - WideResNet
    - PyramidNet

## Alpha Go Zero のモンテカルロ木探索
下記4ステップで行使される。

- 選択
- 評価および成長
- バックアップ

## Alpha Go Zero の学習法
1. 自己対局による教師データの作成
1. 学習
1. ネットワークの更新
Pysparkにてデータフレーム作成時に利用可能なファイルの圧縮形式に関する検証

## 概要
Pyspark（Databricks）にてデータフレームのソースファイルにて、利用可能なファイルの圧縮形式を調査したため共有します。

圧縮形式を指定するパラメータはないのですが、利用可能な圧縮形式の拡張子をソースとする場合に自動で解凍してデータを取得してくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/061089e0-faf1-a8a1-7fd7-38d92fa9a07b.png)
引用元：[pyspark.sql.DataFrameReader.csv — PySpark 3.1.2 documentation (apache.org)](https://spark.apache.org/docs/latest/api/python/reference/api/pyspark.sql.DataFrameReader.csv.html#pyspark.sql.DataFrameReader.csv)


圧縮形式の対応状況の検証結果が下記です。

| #    | 圧縮形式                         | Sparkデータフレームでの読み込み可否 |
| ---- | -------------------------------- | ----------------------------------- |
| 1    | gzip単一ファイル（拡張子:.gz）   | 〇                                   |
| 2    | gzip単一ファイル（拡張子:.gzip） | ×                                  |
| 3    | Zip単一ファイル                  | ×                                   |
| 4    | biz2単一ファイル                 | 〇                                  |
| 5    | lz4データ                        | 〇                                  |
| 6    | snappyデータ                     | 〇                                  |


検証結果から下記の方針としました。

- gzip形式の場合に、拡張子が".gzip"のときには動作しないため、拡張子の".gz"を追記する。
- zip形式に対応していないため、事前に解凍する。
- gzip（拡張子が".gz"の場合）、biz2、Lz4、snappyであれば、Sparkデータフレーム読み込み時にパラメータを設定せずに読み込む。

## 検証環境
- databricks runtime: 8.3.x-cpu-ml-scala2.12
- spark version: 3.1.0
- pyspark version:     3.1.2.dev0

## 検証方法
### 検証方法
Databricks内部にあるサンプルデータ（TPC-Hのcustomer）を圧縮したファイルを用意して、データフレームとして適切に表示できるかを検証しました。

Github Pagesとして実行結果を公開しておきます。

https://manabian-.github.io/databricks_tecks_for_qiita/#df_from_compressed_files/df_read_compressed_files.html

下記にコードを配置してありますので、興味がある方はDatabricksで検証してみてください。

```URL
https://github.com/manabian-/databricks_tecks_for_qiita/blob/main/tecks/df_from_compressed_files/dbc/df_from_compressed_files.dbc
```

### 検証結果の一部
正常に読み取れた場合には、下記のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/9649d85c-2560-f990-ca63-3e2356366081.png)

gzip（拡張子:.gzip）、および、Zip（拡張子:.zip）の場合には、レコード数も間違っており、適切なデータを表示できていないことから、適切にデータを読み取れていないことがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/6350186a-77b9-515c-cafb-4052151e89a3.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/f716f30f-72d5-af97-26d9-f81a6bb5c23e.png)
Symfony4 Entity・Formのタイプ

### Symfony4 Entityのタイプを調べたものから埋めていく

|型|日本語名|
|--|--|
|string|文字列|
|integer|数字|
|datetime|日付型|
|relation|リレーショナル型|

### 同じくFormのタイプを使ったものも埋めていく

・TextType

```php
use Symfony\Component\Form\Extension\Core\Type\TextType;

class ***Type extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('***', TextType::class, array(
                'label' => '***',
            ))
    }
}
```
・IntegerType
※TextTypeと同じ使い方
・EmailType
※TextTypeと同じ使い方
・PasswordType
※TextTypeと同じ使い方
・SubmitType

```php
use Symfony\Component\Form\Extension\Core\Type\SubmitType;

class ***Type extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('保存', SubmitType::class, array())
    }
}
```
・RepeatedType

```php
use Symfony\Component\Form\Extension\Core\Type\PasswordType;
use Symfony\Component\Form\Extension\Core\Type\RepeatedType;

class ***Type extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('***', RepeatedType::class, array(
                'type' => PasswordType::class,
                'required' => true,
                'invalid_message' => '再入力されたパスワードと一致しません。',
                'first_options'  => ['label' => 'パスワード'],
                'second_options' => ['label' => 'パスワード（確認） ※同じパスワードを入力してください'],
            ))
    }
}
```
・ChoiceType

```php
use Symfony\Component\Form\Extension\Core\Type\ChoiceType;

class ***Type extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('***', ChoiceType::class, [
                'choices'  => [
                    'Maybe' => null,
                    'Yes' => true,
                    'No' => false,
                ],
            ])
    }
}
```
・EntityType

```php
use Symfony\Bridge\Doctrine\Form\Type\EntityType;

class ***Type extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('{引き込むEntityクラス}', EntityType::class, array(
                'class' => 'App\Entity\{引き込むEntityクラス}',
                'label' => '***',
            ))
    }
}
```

※随時追記予定