OmniAICreator/Qiita-1.07M huggingface dataset:
Visual Studio CodeでChromeを起動してNode.jsをデバッグする設定

すぐ忘れるのでメモ

1. 拡張機能より「Debugger for Chrome」をインストール
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

2. .vscode/launch.jsonに以下を記述

```json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome",
            "request": "launch",
            "type": "pwa-chrome",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        },
        {
            "name": "Run npm start",
            "command": "npm start",
            "request": "launch",
            "type": "node-terminal"
        },
    ],
    "compounds": [
        {
            "name": "Launch Chrome & npm start",
            "configurations": [
                "Launch Chrome",
                "Run npm start"
            ]
        }
    ]
}
```

3. [Launch Chrome & npm start]をデバッグ実行
ShaderToy+openFrameworksでマルチパスシェイダー

###ShaderToy+openFrameworks でBufferを使用

この記事はShaderToy+openFrameworksでクリエイティヴヴィジュアルを＜その1＞
https://qiita.com/quittardis/items/8ba902ebceeef93d55c8
の続きです。


Shadertoyの、GLSL　Sandboxなどとの違いのひとつはBufferを使ってフラグメント
シェーダーをマルチにして表示できるという点です。しかも下層のパスからの色情報をインポートしてそれをベースに別のイフェクトを加えるというようなことができます。

前回の記事に以下のコードを追加して、Bufferによるフラグメントシェーダをマルチパス化できます。
先ず、ofApp.hにBufferA用の次のようにofTextureを追加します。


```ofApp.h
ofTexture texA;
```

次に、ofApp.cppのsetupを次のようにします。
ここで、test1.frag test.fragでシェーダーのコードを二つ読み込んでいます。
 shadertoy.makeBufferA(shaderString, texA);
で、BufferAを作成しています。

```ofApp.cpp
void ofApp::setup(){

	shadertoy.load("shaders/test1.frag");
	ofFile f;
	f.open("shaders/test.frag");
	ofBuffer b = f.readToBuffer();
	string shaderString = b.getText();
    //
	shadertoy.setAdvanceTime(true);
	ofSetFrameRate(30);
	ofDisableArbTex(); // very important!!!!

	shadertoy.makeBufferA(shaderString, texA);

}

```

次に、update()を以下のようにします。

```ofApp.cpp

void ofApp::update(){
	
	shadertoy.setTexture(0, ofxShadertoy::Buffer::BufferA, ofxShadertoy::Buffer::Image);
	shadertoy.setTexture(0, texA);

}

```
これで、Image Bufferのチャンネル0にBufferAのテクスチャーを割り当てています。

draw()は前回と同様に

```ofApp.cpp
void ofApp::draw(){
	shadertoy.draw(0, 0);
}
```

とします。

###Shaderをdata/shadersに配置する
test.fragはImage Buffer用のシェーダーのコードで、チャンネル0の色情報を、画面の上半分と
下半分でmixする色を変えるというものです。

```test.frag
/**
 * @author jonobr1 / http://jonobr1.com/
 */

/**
 * Convert r, g, b to normalized vec3
 */

void mainImage( out vec4 fragColor, in vec2 fragCoord ) {

	vec2 uv = fragCoord.xy / iResolution.xy;   
    vec3 fg = texture(iChannel0,uv).xyz;
	fg = (uv.y < 0.5)? fg : mix(fg,vec3(1.0,1.0,0.0), 0.7);
	
	fragColor = vec4(fg,1.0);

}
```

test.fragは、円を描くだけのシェーダーです。
描画するたび、x軸をずらしています。

```test.frag

/**
 * @author jonobr1 / http://jonobr1.com/
 */

/**
 * Convert r, g, b to normalized vec3
 */
vec3 rgb(float r, float g, float b) {
	return vec3(r / 255.0, g / 255.0, b / 255.0);
}

/**
 * Draw a circle at vec2 `pos` with radius `rad` and
 * color `color`.
 */
vec4 circle(vec2 uv, vec2 pos, float rad, vec3 color) {
	float d = length(pos - uv) - rad;
	float t = clamp(d, 0.0, 1.0);
	return vec4(color, 1.0 - t);
}

void mainImage( out vec4 fragColor, in vec2 fragCoord ) {

	vec2 uv = fragCoord.xy;
	vec2 center = iResolution.xy * 0.5;
	center.x = center.x + (iTime +.5) *64.; 
	float radius = 0.5 * iResolution.y;

    // Background layer
	vec4 layer1 = vec4(rgb(210.0, 222.0, 228.0), 1.0);
	
	// Circle
	vec3 red = rgb(225.0, 0.0, 0.0);
	vec4 layer2 = circle(uv, center, radius, red);
	
	// Blend the two
	fragColor = mix(layer1, layer2, layer2.a);

}
```



![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430586/d3f25d19-51da-04ae-3764-eec754f8ff98.png)

次回は、shadertoy.comにある実際のshaderで試してみます。
AtomでPug・Sass（Scss）を使ってコーディングと自動コンパイルできるようにするまでの備忘録

※この記事が誰かのためになれば幸いですが、あくまでも**備忘録**ですので、色々とおかしな部分があるかもしれませんが悪しからず…。

## 環境
MacOS Catalina バージョン 10.15.7
Atom バージョン 1.52.0
（ダウンロード https://atom.io/）

## やったこと
### 【1】 node.js のダウンロード・インストール
ダウンロードURL
https://nodejs.org/ja/

DL後は言われるがままにインストールを進める

ターミナルで下記２つのコマンドを実行して

```linux
node -v
```
```linux
npm -v
```

バージョンらしき表示が出ればOK（下記のような感じ）

```linux
node -v
v12.19.0
```

### 【2】 まずはpugの準備
#### ① pugのインストール
下記のコマンドを実行

```linux
npm install pug
```

これだけじゃ上手くいかなかったので下記参考にコマンド実行（「Pugのインストール（全ての悪の根源）」以下）（本当に神）
https://qiita.com/ksyunnnn/items/0c18008b564ef8e1cdd8

#### ② Atomにパッケージをインストール
##### atom-pug
Atomでpugを使うためのパッケージ
https://atom.io/packages/atom-pug
##### save-commands
コマンドを保存して実行できるパッケージ
pugファイル保存時にhtmlファイルに自動コンパイルするために使う
https://atom.io/packages/save-commands

#### ③ pugファイル保存時にhtmlファイルに自動コンパイルする設定
下記（本当に神）および[save-commandsの公式ページ](https://atom.io/packages/save-commands)参考に
https://qiita.com/easai/items/da0c13c639326a762ef2

プロジェクトのルートディレクトリに`save-commands.json`ファイルを作成

```json:save-commands.json
{
  "commands": [
    "template/pug/*.pug: pug {relPath}index.pug --pretty --out template"
  ]
}
```

これでpugファイル保存時に下記のコマンドが自動で実行される

```linux
pug template/pug/index.pug --pretty --out template
```

ファイル構成こんなかんじになる↓

- /save-commands.json
- /template/pug/index.pug
- /template/index.html

これでpugの準備は終わりー！！！

### 【3】 Sass（Scss）の準備していく〜
#### ① node-sassのインストール
まずは上手くいかなかったパターン
下記コマンド実行

```linux
npm install -g node-sass
```
めちゃくちゃエラー出てきてインストールできなかった、もう嫌

いろいろ調べたら解決方法を発見、下記参考に進める（本当に神）
https://qiita.com/akane8747/items/f72cf307354ffe10b91d
（`npm config get prefix`のところ以降試していく）

最後に下記コマンド実行して、バージョンらしき表示が出ればインストール成功

```linux
node-sass -v
```

#### ② Atomにパッケージをインストール
##### sass-autocompile
Sass（Scss）ファイル保存時に自動でコンパイルしてくれるパッケージ
https://atom.io/packages/sass-autocompile

どんな形式でコンパイルするか、またコンパイル後のファイル名など設定が可能
下記参考に
https://into-the-program.com/sass-autocompile-indent/

## 【おまけ】 Atom おすすめパッケージ
##### browser-plus
Atomにブラウザの機能を追加できるパッケージ
雷のアイコンをオンにしておけば、リアルタイムプレビューが可能になる
pugを編集→保存してhtmlにコンパイル→ディスプレイ右側にプレビューを開いてリアルタイムプレビューが可能
https://atom.io/packages/browser-plus

## とりあえずおわり
必要あればまた追記します。
FlutterでPDFを取得したい君に

## 始めに
Flutterで個人開発のアプリを作っているのですが、その機能の中にPDFをアップロードするという機能がありまして、そのためにどうやってFlutterからPDFを取得できるのかを調べたので、メモがわりに書きました。

ありがたいことに[file_picker](https://pub.dev/packages/file_picker)のというパッケージを使うとめっちゃ簡単に実装することができました

## 環境
Dart: `2.9.1`
Flutter: `1.20.2`
file_picker: `2.0.9+1`

## 実装
```dart
  Future<File> getPdfFile() async {
    FilePickerResult result = await FilePicker.platform.pickFiles();

    if (result != null) {
      File file = File(result.files.single.path);
      return file;
    } else {
      throw Exception('can not pick file');
    }
  }
```
実装自体はパッケージから関数を呼ぶだけなのですが、今回は**PDFだけ**を取得したいので引数に色々渡す必要があります

それらを渡したのが次のコード

```dart
  Future<File> getPdfFile() async {
    FilePickerResult result = await FilePicker.platform.pickFiles(
      type: FileType.custom,  // ←引数を追加
      allowedExtensions: ['pdf'],  // ←引数を追加
    ); 

    if (result != null) {
      File file = File(result.files.single.path);
      return file;
    } else {
      throw Exception('can not pick file');
    }
  }
```

引数の`type`でファイルのタイプで`custom`を指定する
第二引数の`allowedExtensions`で選択したいファイルの拡張子を配列で渡す(今回の場合は.pdfのみだが、.pngや.docを追加できたりもする)

そうすることによってPDFのファイルが取得できるので、後は好きな形に変形して終わりです


## iOSの設定
今回はiOSの方でしか動作確認をしてないので、Androidでは動かない可能性があります。。。

### XcodeでCapabilityを追加
XcodeでTARGETSの「Signing & Capability」の左上のCapabilityのプラスボタンを選択。
そこから「iCloud」を追加

TARGETSの「Signing & Capability」に「iCloud」の項目が追加されていることを確認します。
iCloud項目の中のServices項目で
- Key-value storage
- iCloud Documents
- CloudKit

とある中で「iCloud Documents」だけにチェックを入れる。

Services項目の下にあるContainers項目に自分のアプリのBundle IDのContainerを作成

ここら辺の設定は[こちらの記事](https://qiita.com/kitoko552/items/435669be49d723d17905)を参考にさせていただきました
日付付きcsvファイルを取り込み時間パーティションテーブルとしてBigQueryにインポートするpythonスクリプト

# 背景
`xxxx_20200930.csv` のように、ファイル名に日付が入っているcsvファイルをパーティションタイム指定してBigQueryにインポートするpythonスクリプトが欲しい。
今回は、大量のcsvファイルがディレクトリ以下に入っているという前提で作成。

# サンプルスクリプト

```py:main.py

from google.cloud import bigquery
import json
import glob

client = bigquery.Client()

job_config = bigquery.LoadJobConfig(
    source_format=bigquery.SourceFormat.CSV,
    skip_leading_rows=1,
    autodetect=True,
    allow_quoted_newlines=True,
    time_partitioning=bigquery.TimePartitioning()
)

path = "../some/dir/*"
files = glob.glob(path + '*')

for file_name in files:
    date = file_name.split('_')[-1][0:8]
    table_id = 'dataset.table_name$' + date # パーティション指定

    with open(file_name, "rb") as source_file:
        job = client.load_table_from_file(
            source_file,
            table_id,
            job_config=job_config
    )

    job.result()  # Waits for the job to complete.

    table = client.get_table(table_id)  # Make an API request.
    print(
        "Loaded {} rows and {} columns to {}".format(
            table.num_rows, len(table.schema), table_id
        )
    )
```


# 参考
[データをローカル データソースから読み込む](https://cloud.google.com/bigquery/docs/loading-data-local?hl=ja#loading_data_from_a_local_data_source)
diagrams.net (Draw.io) を VS Code から利用開始、構成図を書く、保存する

# はじめに
Draw.io は diagrams.net という名前に移行していくようです
https://www.diagrams.net/blog/move-diagrams-net

記事中では Draw.io と呼称します。

draw.io は web版、desktop アプリ(electron)等々...色々あるのですが、
この記事では VS Code からの利用に関して言及します。

ちなみに個人的にはwebサービスとしての draw.io (https://app.diagrams.net/) より、
VS Code Integrationを利用する方が好きです。
(良い点・使いづらい点は後ほど言及します)

# require
事前にインストールをお願いします

- Visual Studio Code
- [extenstion `Draw.io VS Code Integration`](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio)

# Visual Studio Code から利用する
- <ファイル名>.drawio ファイルを作成し、vscode で開く
    - そうすると以下の様な GUI が立ち上がるはずです
    - <img width="400" alt="1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110482/e172cf0a-c249-453e-ecce-99a04ee947bf.png">

# 構成図を書いてみる
- Layers パネルを表示させます
    - Draw.io GUIのメニュー View → Layers
    - <img width="400" alt="2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110482/9094e107-41f4-44c3-353a-5e25ee30cf55.png">

- Layers にはデフォルトで Back Groud レイヤーが存在しています
    - <img width="300" alt="3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110482/6f26f89c-ec04-94dc-723b-3dfb287b8789.png">
- ライブラリ を追加します
     - GUI 左下の More Shapes ... を押下します
     - 好きなライブラリを選んでください(今回はGCPを選択)
         - <img width="300" alt="4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110482/55fd8ba4-8ad6-f2a7-64e5-84c848f9d6a7.png">
     - すると GUI の左側にライブラリが追加されます
         - <img width="300" alt="5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110482/3ffbf0dd-9747-2d3b-8d7e-68d327002fce.png">
- バックグラウンドレイヤーを描きます
     - バックグラウンドレイヤーに描くのは図の背景です
         - <img width="400" alt="6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110482/13499f4f-dbfe-e334-cd98-9022aa7cf7c8.png">
     - 書き終わったら、鍵をクリックして背景をロックしておきましょう
- ネットワークレイヤーを描きます
     - + をクリックしてネットワークレイヤーを作成します
     - ネットワークを描きます
         - <img width="400" alt="7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110482/4c08b7a0-2ffa-14d5-0406-99d2508d513d.png">
     - 書き終わったらロックしておきます
- トップレイヤーを描きます
     - + をクリックしてトップレイヤーを作成します
     - トップレイヤーを描きます
         - <img width="400" alt="8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110482/5a4363dc-4c97-75e5-deb1-a50aa337be93.png">
- 作業を保存する
     - Draw.io GUI のメニュー File → Save 
     - `cat <ファイル名>.drawio` するとファイルにメタデータが書かれているのがわかります
- 図を書き出す
     - Draw.io GUI のメニュー File → Export...から好きな形式で書き出しましょう

構成図を書いてみる流れは以上です。
がんがん図を残して共有していきましょう!
ライブラリの追加方法に関しては別途書こうと思います。

# VS Code Integration の良い点・使いづらい点
## 良い点
- drawio ファイルをクリックするだけで起動する
- ライブラリも同時管理しやすい
- drawio ファイルが compress されないので、変更点をgit管理しやすい

## 使いづらい点
- VS Code を light テーマに変更する必要がある
    - dark テーマだと編集中と出力時で見た目が異なる

# appendix
- GitHub
   - https://github.com/hediet/vscode-drawio
- draw.io に関して
   - https://desk.draw.io/support/home
   - https://github.com/jgraph/drawio
- こちらの記事に従ってdraw.ioをCLIで実行して画像をエクスポートできます
   - https://qiita.com/u4da3/items/646cc46bff68b380cbfa
静的型付け言語と動的型付け言語

# 静的型付け言語と動的型付け言語について

プログラミング言語には型が決まるタイミングがあり、大きく分けて「静的型付け言語」と「動的型付け言語」がある。  

## 静的型付け言語
変数の宣言時に型を明記する。  
コンパイル時に型の整合性をチェックする。

Java,C,C++,C#,swift,Scala,Go,VB.net

## 動的型付け言語
変数の宣言時に型を明記しない。  
実行時に型の整合性をチェックする。  

  JavaScript,Ruby,Python,PHP

## 静的型付け言語のメリット
* 型に関係するバグを減らす。
* メモリ領域の最適化。

コーディング時に変数に入っているデータの型があらかじめわかり、
もし間違えてしまっていても、コンパイル時にエラーが得るため、バグを生み出しにくい。
また、型が決まっていると、確保しておくメモリ領域がある程度把握できるため、
無駄なメモリを取っておく必要がなくなる。
ただし、一つ一つ型を記述しないといけないため、ソースコードが長くなったり、時間がかかったりするデメリットがある。


## 動的型付け言語のメリット
* コーディングがシンプル
* 自由度が高い。

型を明記しない分ソースコードをより少なく記述することができるため、
コーディングがシンプルで自由度が高くなる。
ただし、変数にどんな型のデータが入っているのかが実行時まで定まらないため、
実行時に初めてバグが発生したり、必要なメモリ数があらかじめ把握できないため、
余分にメモリ容量を取っておく必要があるというデメリットがある。
環境構築, Buildまで -Go編-

# Goについて

静的型付けプログラミング言語として急速に人気が向上しているGo言語(Golang)。

## 1. インストール
https://golang.org/dl

go コマンドを使用する。
正常にインストールされていたら、以下のような結果が表示がされます。

```
Go is a tool for managing Go source code.

Usage:

	go &lt;command> [arguments]

The commands are:

	bug         start a bug report
	build       compile packages and dependencies
	clean       remove object files and cached files
	doc         show documentation for package or symbol
	env         print Go environment information
	fix         update packages to use new APIs
	fmt         gofmt (reformat) package sources
	generate    generate Go files by processing source
	get         download and install packages and dependencies
	install     compile and install packages and dependencies
	list        list packages or modules
	mod         module maintenance
	run         compile and run Go program
	test        test packages
	tool        run specified go tool
	version     print Go version
	vet         report likely mistakes in packages

Use "go help &lt;command>" for more information about a command.

```

## 2. 実際にコードをBuild

```
package main

import "fmt"

func main() {
	fmt.Printf("Hello World!")
}
```

Go言語はPHPやperlなどのインタプリタ言語とは違い、コンパイル言語です。
ファイルの実行をする前に必ずコンパイルをして、実行可能な状態にしなければなりません。

```
go build hello.go

//コンパイルが完了すると、「hello」というファイルが作成されます。
./hello
```

web業界出身だとPHPやRuby、javascriptといったコンパイルの必要がないインタプリタ言語がメインなので、コンパイル言語かつ静的型付け言語のGoを敬遠しがちかもしれません。が、習得は比較的簡単な言語といわれています。
MacのターミナルでAWSのS3に接続してバケットの一覧を表示する

# 目的

- MacのターミナルでAWSのS3に接続してバケットの一覧を表示する方法をまとめる

# 実施環境

- ハードウェア環境

| 項目 | 情報 |
| --- | --- |
| OS | macOS Catalina(10.15.5) |
| ハードウェア | MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports) |
| プロセッサ | 2 GHz クアッドコアIntel Core i5 |
| メモリ | 32 GB 3733 MHz LPDDR4 |
| グラフィックス | Intel Iris Plus Graphics 1536 MB |

- S3
    - 下記の方法でバケットを作成した。
        - [AWS S3のバケットの作り方](https://qiita.com/miriwo/items/41e488b79fb58fa7c952)

# 必要なもの

- バケット作成をしたAWSアカウントのアクセスキーとシークレットアクセスキー（AWSのユーザアカウント登録時にダウンロードされたCSVに記載されている、シークレットアクセスキーは再確認方法がなかったはずなのでCSVを紛失したなら新たにアカウント作成したほうが早いかもしれない。）

# 前提情報

- 本説明で実行するコマンドはMacのターミナルで実行するものとする。

# 詳細

1. 下記コマンドを実行してs3cmdをインストールする。

    ```terminal
    $ brew install s3cmd
    ```
1. 下記コマンドを実行してc3cmdの設定を行う。

    ```terminal
    $ s3cmd --configure
    ```
1. 下記のように設定内容を入力してEnterを押下する。

    ```terminal
    > Access Key: AWSアカウントのアクセスキーを入力する
    > Secret Key: AWSアカウントのシークレットアクセスキーを入力する
    > Default Region [US]: ap-northeast-1と入力する
    > S3 Endpoint [s3.amazonaws.com]: 何も入力しない
    > DNS-style bucket+hostname:port template for accessing a bucket [%(bucket)s.s3.amazonaws.com]: 何も入力しない
    > Encryption password: 何も入力しない
    > Path to GPG program: Noneと入力する
    > Use HTTPS protocol [Yes]: Trueと入力する
    > HTTP Proxy server name: 何も入力しない
    > Test access with supplied credentials? [Y/n] Yを入力してEnterを押下すると接続テストが実施される
    ```
1. 下記のような警告が出たがアクセスキーの確認は無事通ったらしいので「Save Settings?」はyを入力してEnterを押下する。

    ```terminal
    Please wait, attempting to list all buckets...
    WARNING: Retrying failed request: /?delimiter=%2F (Remote end closed connection without response)
    WARNING: Waiting 3 sec...
    Success. Your access key and secret key worked fine :-)
    
    Now verifying that encryption works...
    Not configured. Never mind.
    
    Save settings? [y/N]
    ```
1. 設定ファイルはデフォルトで下記に保存されている。
    - `/Users/Macのユーザ名/.s3cfg`
1. 下記コマンドを実行してS3のバケットが表示されることを確認する。

    ```terminal
    $ aws s3 ls
    ```
1. 下記のように現在存在するバケットの一覧が表示される。

    ```terminal
    > 2020-08-17 06:41  s3://バケット名
    ```
【React⑦】import・export基本

#モジュール活用
## export
機能分割して切り分けたモジュールを他のコードで読み込み使えるようにする

### **名前付きexport**
1モジュールから複数の関数をexportできる
classはexportできない

```react
//1ファイルで複数の関数を宣言、export
export function Foo(){
    return(<h1>Foo</h1>)
}
//アロー関数の場合
export const Bar = () => {
    return(<h1>Bar</h1>)
}
```

### **名前なしexport**
1ファイル1モジュールexport(ES6推奨)
アロー関数宣言後export
classもexport可能

```react
export default function Foo(){
    return(<h1>Foo</h1>)
}
```
```react
//アロー関数の場合
const Bar = () => {
    return(<h1>Bar</h1>)
}
export default Bar
```
```react
//Fuga classを継承したHogeをexport
export default class Hoge extends Fuga{
    render(){
      return(<h1>Fuga</h1>)
    }
}
```
## import
### **モジュール全体import**
名前なしexportしたモジュールを読み込む
npmで管理しているパッケージReactをimportする時もこれ

```react
import React from 'React';
import Article from "./Article";
```

### **関数ごとにimport**
名前付きexportされたモジュールをimport
{}にimportしたい関数名を書く

```react
import { Foo,Bar } from './FooBar';
```

### **別名でimport**

```react
import React from 'React';
//モジュール全体の場合
import * as MyArticle from './Article';
import { Foo as MyFoo } from './FooBar';
```
複数の関数をexportしているファイルを全部一気にimportして、関数をピリオドで指定することもできる

```react
import * as FooBar from './FooBar';

render(){
    return(
        <>
            <FooBar.Foo />
            <FooBar.Bar /> 
        </>
    )
}
```
Node.jsについて超ミニマムに解説してみる

#超ミニマムシリーズとは
様々な事柄に関して超短く解説するシリーズです。
これを読んであなたの興味が沸き、その飽くことのない知識欲を満たすことを願っています。

#Node.jsとは
「**サーバー側で実行されるJavaScript**」
プログラミング言語と言語処理系については➡[プログラミング言語と言語処理系について超ミニマムに解説してみる](https://qiita.com/jack1-2-3/items/541bc0c2c3106ac73d83)

#chromeの言語処理系とNode.jsの言語処理系は同じ！？
chromeの言語処理系であるJSエンジンは**V8**です。
ただ実は、Node.jsの言語処理系も**V8**なんです！あれ？じゃぁブラウザと同じじゃん！と思いますよね？
ただ、前述したように「**Node.jsはサーバー側で実行される**」というとこがポイントです！
ブラウザはユーザーが立ち上げないとコードが実行されませんが、Node.jsはサーバーに常に存在しているのでコードをいつでも実行できます。

#おまけ(ブラウザのJSエンジン(言語処理系)との違い)
「**ブラウザにはグローバル変数があるが、Node.jsには存在しない**」
グローバル変数とは、いわゆる`var`で宣言する変数です。
では、なぜNode.jsにはグローバル変数が存在しないのか？
それは、Node.jsには多くのモジュールが存在するため、**モジュール間で変数が干渉するのを防ぐためにグローバル変数がない**のです。
(※モジュールとは・・・関数などを機能ごとに分けたファイルのこと)
(※変数の干渉とは・・・同じ名前の変数が他のモジュールに存在した場合に、値を上書きしてしまったり予期せぬエラーを生むこと)
Gitサブモジュールを使って静的コンテンツをわけてみる

# Gitサブモジュール
Gitサブモジュールを使用するとあるGitリポジトリを別のGitリポジトリのサブディレクトリとして扱うことができます。
これからGitサブモジュールを使って静的コンテンツ用のGitリポジトリをサブディレクトリとして使ってみます。

# メインGitリポジトリ
「git_main」の名でリポジトリを作って以下のHtmlだけをPushして置きます。
このリポジトリにはイメージ（test.png）が存在しません。

```:html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="./assets/images/test.png"/>
</body>
</html>
```

![スクリーンショット 2020-10-22 7.40.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108475/f0def247-f979-a687-b40e-f876f02152ed.png)


# 静的ファイルがあるGitリポジトリ
「assets」の名でリポジトリを作って以下のHtmlだけをPushして置きます。
こちらのリポジトリにイメージ（test.png)が存在します。
![スクリーンショット 2020-10-22 7.51.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108475/d4aa1a52-f3a0-b028-4735-b94f32f55a97.png)


# メインGitリポジトリに「静的ファイルがあるGitリポジトリ」を「Gitサブモジュール」で追加
```
$git submodule add https://github.com/xxxxx/assets.git
```

## Gitサブモジュール実行前
![スクリーンショット 2020-10-22 7.52.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108475/8da5147d-3eb7-d003-5c5f-ede30a530a25.png)

## Gitサブモジュール実行後
![スクリーンショット 2020-10-22 7.53.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108475/81a9b13b-f6f2-cc8b-db54-2e22e56f7f3f.png)

##.gitmodules
.gitmodulesファイルができて内容は以下のようなパスとURLが保存されます。

```:.gitmodules
[submodule "assets"]
	path = assets
	url = https://github.com/xxxxx/assets.git
```

## assetsが更新された場合メインGitリポジトリから更新
1. assetsリポジトリにイメージ（test2.png）をもう１つ追加してPUSH
2. git_mainリポジトリから以下のコマンドを実行
3. git_mainリポジトリにassetsリポジトリで追加したイメージが追加される。

```
$git submodule update --remote 
```

![スクリーンショット 2020-10-22 8.05.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108475/b00bb156-6d82-a240-6850-e7cef2e9e21b.png)
【React⑥】ライフサイクルで主要なメソッド

#ライフサイクルとは
* コンポネントが生まれてから死ぬまでの時間の流れ(データやviewの変更など)
* 各段階で、必要な処理をライフサイクルメソッドで記述
    * **Mounting**：コンポネントが配置される期間(URLにアクセスした時)
    * **Updating**：コンポネントが変更される期間(画面クリック、データの操作を行った時)
    * **Unmounting**：コンポネントが破棄される期間(画面を閉じた時)
    

##ライフサイクルの必要性
*関数の外に影響を与える関数を記述するため(DOM変更、API通信、ログ出力、、)
*副作用のある処理を記述する(適切な場所に配置すべき処理)ことができる

##ライフサイクルメソッド
![lifecycle.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282755/1fc03c17-5c5f-4a54-9de4-3035b2512122.png)

* **Mounting**
    * **constructor()**：stateなどを初期化。コンポネントの中で初めから使いたいものを宣言
    * **render()**：バーチャルDOMを描画する。JSXをリターンする。
    * **componentDidMount()**：render後に1度だけ呼ばれてイベントリスナー設定やAPI通信に使う

* **Updating**：
    * **render()**：VDOMを再描画
    * **componentDidMount()**：再レンダー後に呼ばれる。(スクロールイベントでコンポネント表示など)
    
* **Unmounting**
    * **componentWillUnmount()**：コンポネント破棄直前にリソースを開放、リスナーの解除など
    
##ボタンがクリックされるといいねをカウントの実装

イベントリスナーで`Artucle.jsx`の`id={"counter"}`のボタンに対してclickした時にcountUp関数を呼ぶ。
この時countUp()で渡すとrender無限ループになってしまうので関数型で書くか、関数名のみ渡してあげる。
    

```React:Blog.jsx
import React from 'React';
import Article from "./Article";

class Blog extends React.Component{
    constructor(props){
        super(props);
        this.state ={
            isPublished:false,
            count:0
        }
    }

    componentDidMount(){
        document.getElementById('counter').addEventListener('click', this.countUp)
    }

    togglePublished = () =>{
        this.setState( {isPublished: !this.state.isPublished})
    };

    //呼び出されたらcountのstateを変更
    countUp = () => {
         this.setState( {count: this.state.count + 1})
    }


    render(){
        return(
            <>
                <Article 
                        title={"React"} 
                        isPublished={this.state.isPublished}
                        toggle = {() => this.togglePublished()}
                        count={this.state.count}
                />  
            </>
        )
    }
}

export default Blog
```
```react:Article.jsx
const Article = (props) =>{
    return(
        <div>
            <h2>{props.title}</h2>
            <label htmlFor="check">公開状態： </label>
            <input type="checkbox" checked={props.isPublished} id="check" onClick={() => props.toggle()}/>
            <LikeButton count={props.count} />
        </div>
    )
};
```

```React:Likebutton.jsx
import React from 'React';

//関数名はファイル名と合わせる
const LikeButton = () =>{
    return(
        <button id={"counter"}>いいね数：{props.count}</button>
    )
}

export default LikeButton
```
###stateを更新・リスナー設定を解除

```React
//いいね数が10超えたら0に戻す
componentDidUpdate(){
    if (this.state.count >= 10){
        this.setState({count:0})
    }
}
```
リスナーを解除しておくとサーバの負荷が減る。

```React
componentWillUnmount(){
    document.getElementById('counter').addEventListener('click', this.countUp)
}
```
アプリ本体更新せずプログラム修正 InjectFix メモ

ソースコード
https://github.com/Tencent/InjectFix

面白い仕組みだと思ったので、紹介します。
使う予定がなく、試していません。詳細な使い方はマニュアルを参照してください。

# InjectFixとは
Tencentのリポジトリにある。
Unityゲームについて、アプリ本体を更新せずプログラムを修正することができる。
あらかじめパッチを受け入れるための細工をする必要がある。

3行で説明
IL2CPP以前に、パッチがあるかチェックするコードをメソッドに挿入
パッチはC#ソースコードからコンパイルして作る
InjectFixは仮想マシンを実装している

# 流れ
C# でこのようなコードを書く。

```cs
void AddScore(int x)
{
  _score += x;
}
```
👇 C#コンパイラでコンパイル
👇 DLL
👇 InjectFixにより、パッチチェック・実行用コードをメソッドに挿入
👇 IL2CPPしてビルド
👇 アプリの本体提出・リリース
👇 スコアが1000以上にしたらバグることがユーザーからの報告で判明 999でカンストするようにしたら直る
👇 パッチ用のコードを書く

```cs
[Patch]
void AddScore(int x)
{
  _score += x;
  _score = Math.Min(_score,999);
}
```
👇 パッチファイルに変換。アップロード。アプリはパッチファイルをDL。完了。

# パッチチェック・実行用コード挿入
パッチがあるか確認して実行するコードをメソッドに挿入します。
これはランタイムで行われるのではなくて、IL2CPPするより前に行います。

```cs
void AddScore(int x)
{
  // 処理を挿入（イメージ）
  if(IsPatched(12345/*メソッドを識別するために割り当てたID*/)){
    CallPatchedMethod(12345, x)
    return;
  }
  //元のコード（パッチがなければ実行)
  _score += x;
}
```

例では戻り値なしですが、戻り値ありも対応しています。
`CallPatchedMethod`で何をするかというと、仮想マシンでパッチ後のコードを実行します。
InjectFixには仮想マシンが実装されています。

このような方法ではありません。[Win32アプリでx86命令を直接実行させる](https://qiita.com/gdrom1gb/items/acf1db020839df89e6e3)

# 感想
良い　C#でパッチが書ける。
良い　アプリ本体を更新しない。
悪い　パッチがあるかチェックするコストがかかる。
悪い　パッチは仮想マシンで実行されるため、いくらかパフォーマンスが落ちる。バグがあるよりまし。
「ViT(Vision Transformer)」時代には、「CNN」時代のような、攻めた途中処理状態の解説の図は出てこないのか？

#概要
「ViT(Vision Transformer)」時代には、「CNN」時代のような、攻めた途中処理状態の解説の図は出てこないのか？

タイトルの通りのことを感じました。


#CNN時代の攻めた途中処理状態の解説の図

CNN時代には、攻めた解説の図をよく見かけた！
（むしろ、攻めすぎ。。。。という記事を書いた。）

（出典：http://vision03.csail.mit.edu/cnn_art/index.html#v_single ）

<img width="717" alt="texture.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342207/7eb327a5-1c75-6eb8-877a-0324392451b8.png">



出典：AlexNet を使用した Deep Dream イメージ
(https://jp.mathworks.com/help/deeplearning/examples/deep-dream-images-using-alexnet.html)

<img width="335" alt="hen.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342207/99e5ff44-0142-24d2-4e01-a4a41614415f.png">

#まとめ
特にありませんが、
ViT(Vision Transformer)の弱点として、CNNに比べて、少し、**複雑**であることが挙げられるような気がしました。
CNNの反撃もあるかも。。。。
コメントなどあれば、なんなり、お願いします。:candy:

#関連（本人）

[畳み込みニューラルネットワーク（CNN)の説明が煽りすぎでは？（1層目ぐらいしか成功していないのでは？）](https://qiita.com/enoughspacefor/items/02dc8d556b9db65d4ee6)

[畳み込みニューラルネットワーク（CNN)の説明が、頑張りすぎでは？（MathWorksのdeepDreamImageとかも）](https://qiita.com/enoughspacefor/items/01f7ed446a4ccfca5972)

[画像認識、「Vision Transformer (ViT)」と「Visual Transformers」の比較](https://qiita.com/enoughspacefor/items/e41f5fe3a2febfabe3c3)
Python基礎⑤

Pythonの基礎知識⑤です。
引き続き自分の勉強メモです。
過度な期待はしないでください。

過去投稿記事
-
[Python基礎](https://qiita.com/k-yasuhiro/items/c31b6370023e67e00aa9)
[Python基礎②](https://qiita.com/k-yasuhiro/items/d8ed3e4093dd47faf40e)
[Python基礎③](https://qiita.com/k-yasuhiro/items/7e83552c58f854bd715f)
[Python基礎④](https://qiita.com/k-yasuhiro/items/3bd280ee0eea8d59d36b)
<br>

継承
-
　-既にあるクラスを元にして新たなクラスをつくること
　`「class 新しいクラス名(元となるクラス名):」`とすることで他のクラスを継承して、
　新しいクラスを定義することが出来る。
　新しいクラスは<b>「子クラス」</b>、元となるクラスは<b>「親クラス」</b>と呼ばれます。

```menu_item.py
# 親クラス
class MenuItem:
    def __init__(self, name, price):
        self.name = name
        self.price = price

    def info(self):
        return self.name + ': ¥' + str(self.price)

    def get_total_price(self, count):
        total_price = self.price * count

        if count >= 3:
            total_price *= 0.9

        return round(total_price)
```

```sweets.py
# 子クラス
# menu_item.pyからMenuItemクラスを読み込む
from menu_item import MenuItem

# 他のクラスを継承して、新しいクラスを定義
class Sweets(MenuItem):
    pass # 何も処理がない事を表す
    # インデントを揃える（半角スペース４つ分）
```
<br>

　-子クラスのインスタンスメソッド
　子クラスは「親クラス内に定義されているメソッド」と「独自に定義したメソッド」の両方が使える。
　しかし、親クラスでは子クラスのメソッドは使えない。

```sweets.py
# 子クラス
from menu_item import MenuItem

class Sweets(MenuItem):
    def calorie_info(self): # メソッドの定義には、第1引数にselfを追加する
        print(str(self.calorie) + 'kcalです') # str()で数値を文字列に変換
        # インデントを揃える（半角スペース４つ分）
```
<br>
　-オーバーライド
　親クラスにあるメソッドと同じ名前のメソッドを子クラスで定義すると、メソッドが上書きされる。
　要は、子クラスで定義したメソッドが優先して呼び出されるようになっている。

```menu_item.py
# 親クラス
class MenuItem:
    def __init__(self, name, price):
        self.name = name
        self.price = price

    def info(self):
        return self.name + ': ¥' + str(self.price)

    def get_total_price(self, count):
        total_price = self.price * count

        if count >= 3:
            total_price *= 0.9

        return round(total_price)
```

```sweets.py
from menu_item import MenuItem

class Food(MenuItem):
    # infoメソッドを定義
    def info(self):
        return self.name + ': ¥' + str(self.price) + str(self.calorie) + 'kcal'
    
    def calorie_info(self):
        print(str(self.calorie) + 'kcalです')
```
　親クラスにある infoメソッドではなく、子クラスにある infoメソッドが優先されて上書きされる
<br>

メソッド内の重複
-
　-`「super().メソッド名()」`とすることで、
　親クラス内に定義されたインスタンスメソッドをそのまま利用することが出来る。

```menu_item.py
# 親クラス
class MenuItem:
    def __init__(self, name, price):
        self.name = name
        self.price = price

    def info(self):
        return self.name + ': ¥' + str(self.price)

    def get_total_price(self, count):
        total_price = self.price * count

        if count >= 3:
            total_price *= 0.9

        return round(total_price)
```

```sweets.py
from menu_item import MenuItem

class Food(MenuItem):
    def __init__(self, name, price):
        # super()を用いて、親クラスの__init__()を呼び出す
        super().__init__(name, price)
        # self.name = name →　重複している部分は削除
        # self.price = price →　重複している部分は削除
    
    def info(self):
        return self.name + ': ¥' + str(self.price) + str(self.calorie) + 'kcal'

    def calorie_info(self):
        print(str(self.calorie) + 'kcalです')
```
初投稿です。

#Rubbyでアプリ作って記事を投稿しようと思のですが・・・:joy:

記事の書き方からアウトプットして学習となります:runner:
###自分に向けたアウトプットですのでご了承下さい。

簡単な自己紹介です。2020年10月現在、43才
プログラミング学習は2020年1月頃よりProgateにて開始。
オンラインサロンにて学習中です。

##では書いていきます！！

Qiitaでの記事には**markdown記法**を使用します。


バッククォートを３つ　```　&lArr;これです。

入力の仕方は
Windows、Macとも共通だと思います。「Shift」＋「@」で入力できます

文章をこのバッククォート３つで囲むと


```test.rb
こうなります！！
```

<details><summary>実際はこの様に入力しています。</summary>

`「ここにバッククォート３つ」
test.rb
こうなります！！
「ここにバッククォート３つ」`

厳密には違いますので、詳しくは[Markdown記法 チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)をご覧下さい。
私もこの記事を見ながら書いています:sweat_smile:


どの様に使うかと言いますと
ここにコードを記述します！！

```sample.rb
puts "kokoni-kodowokijyutu"
```
さて、これで投稿が出来る様になりました！！
Rails Tutorial 0章：事前基礎知識学習2

#事前基礎知識編  Cloud9
[Railsチュートリアル (https://railstutorial.jp/)] (https://railstutorial.jp/) 
WEBテキストRails5.1(第4版)無料で学習できるので是非チャレンジしてみてください。

ちなみに私は980円を払ってWEBテキストRails6.0(第6版)で学習しています。

>本チュートリアルに取り組む上で望ましい前提知識はありますが、必須の前提知識はありません。というのも、RailsチュートリアルにはWeb開発で重要な内容がすべて盛り込まれているからです。本チュートリアルの中心となるのはもちろんRailsによるWeb開発ですが、他にもプログラミング言語Rubyやminitest (Railsのテストフレームワーク) 、HTML、CSS、若干のJavaScriptとSQLの説明も含まれています。これらの知識は本書を読みながら学ぶこともできますが、読み始める前に少なくともHTMLの知識と何らかのプログラミング経験があると最適です。
引用:https://railstutorial.jp/chapters/beginning?version=5.1


Rails Tutorialの第一章では学習するにあたってこんな知識があると無難なようです。

* Unixコマンドライン
* HTML
* CSS
* Rubyプログラミング言語
* JavaScript (若干)
* SQL (若干)

加えて下のようなサービスも利用していて、正直言って読んでるだけでうげぇーって感じです。
正直言って難しいって思いました。
それでもゆっくりでも一歩づつやれば今よりマシな未来になるだろうと思って頑張ってます。

* heroku
* git
* AWS cloud9

Rails Tutorialの第一章に登録方法が記載されていますが、
事前基礎知識を学習するにあたってもAWS Cloud9に登録する事を最初にオススメします。

##### AWS Cloud9について
Amazonってご存知ですよね！ ネットショッピングしたことある方も多いと思います。

* Amazon prime Video (動画配信サービス)
* Amazon Music (音楽配信サービス)
* Amazon Unlimited (定額電子書籍サービス)
* Amazon Echo (スマートスピーカー)

こういったサービスが有名ですが、AWS(Amazon Web Service)というサービスも展開しています。
何をしてるかっていうとアプリ開発環境などをインターネット上で提供してくれています。
昔はLinuxという聞きなじみのないOSを自分でPCにインストールして開発環境を作る必要がありました。
cloud9というサービスを使うと複雑な設定も必要なく、さくっと開発環境を用意してくれます。
実際に使ってみると本当に便利だッ！と思いました。

####[Cloud9に登録してみましょう。](https://aws.amazon.com/jp/cloud9/)

Cloud9サービスを利用する為にはクレジットカードが必要です。
#####ここで私に降りかかった災難：無職でクレジットカードないけど、どうすりゃいいの？問題
あまりそんな方いないかもしれませんが、デビットカードで代用できます。
[住信SBIネット銀行口座開設](https://www.netbk.co.jp/contents/lineup/debitcard/)
>当社の口座を開設すると、デビットカードが一体になったキャッシュカードをご利用いただけます。
引用：https://www.netbk.co.jp/contents/lineup/debitcard/

クレジットカードなんて働けば審査も甘いしすぐ手に入るよ！
働け！って感じかもしれませんが、
自分は今働く気がないのでデビットカードで代用する方法でこの問題をクリアしました。

#####AWS登録方法

>Cloud9は現在Amazon Web Services (AWS) に統合されたため、Cloud9を使うためにはAWSアカウントが必要になります。AWSアカウントを既にお持ちの場合は、AWSにログインしてください。AWSコンソールに行き、検索ボックスから “Cloud9” と入力すると、Cloud9の開発環境を作成するためのページに行けます。
Amazon Web Services (AWS) アカウントを持っていない場合は、AWS Cloud9のユーザー登録をします。悪用防止のためクレジットカード情報の入力が必須になりましたが、Railsチュートリアルのワークスペースは１年間無料なのでご安心ください。アカウントが有効になるまで最大で24時間かかりますが、著者の場合は約10分ほどで完了しました。
Cloud9の管理ページ (図 1.4) に無事たどり着いたら “Create environment” をクリックし、図 1.5のような画面になるまで進めてください。情報を適宜入力して、確認ボタンを押して進めていくと、最終的にCloud9の開発環境を手に入れることができます (図 1.6)。このとき “root” ユーザーであるという警告メッセージが表示されるときがありますが、こちらの対処方法は後ほど説明します (IAMという機能を使った対応方法について13.4.4で説明します)。
引用：https://railstutorial.jp/chapters/beginning?version=5.1#sec-development_environment

これじゃわかんねーよって感じだったので[Youtube上にあったcloud9の登録方法説明動画](https://www.youtube.com/watch?v=RWP7hhdJU9Q)を参考にしました。 侍エンジニアさん、分かりやすい説明動画をありがとう。

最初に戻りますが、
必要知識と紹介されている内容はAWS上で全て実行できるのでCloud9にまずは登録する事をオススメします。

* Unixコマンドライン
* HTML
* CSS
* Rubyプログラミング言語
* JavaScript (若干)
* SQL (若干)
 
#####まとめ
[1.まずはCloud9登録しよう。](https://aws.amazon.com/jp/cloud9/)
[2.登録方法はこの動画を参照すれば俺でも出来た。](https://www.youtube.com/watch?v=RWP7hhdJU9Q)
[3.クレカ作れない人は住信SBIネット銀行口座開設で発行されるデビットカードで代用できる](https://www.netbk.co.jp/contents/lineup/debitcard/)
Excelのリストに対してHYPERLINKを組み込む

```List_To_LinkedSheet.bas
Option Explicit

Public Sub List_To_LinkedSheet()

    Const SHEETLIST = "SheetList"
    Const TRANSCRIPTION_ROW = 1
    Const TRANSCRIPTION_HEADER = 1 'ヘッダあり = 1, ヘッダなし = 0
    Const ANCHOR_Column = 1
    Const TRANSCRIPTION_Column = "A"
    Dim i As Long
    Dim SheetCnt As Long
    Dim ws As Worksheet
    Dim SheetListExistence As Boolean: SheetListExistence = False
    Dim HYPER_LIST As Worksheet
    Dim HYPER_SHEETS As Worksheet

    For Each ws In Worksheets
        If ws.Name = SHEETLIST Then SheetListExistence = True
    Next ws

    If SheetListExistence = False Then
        Worksheets.Add before:=Worksheets(1)
        Worksheets(1).Name = SHEETLIST
    End If

    SheetCnt = Worksheets.Count

    Set HYPER_LIST = Worksheets(SHEETLIST)
    For i = 1 To SheetCnt
        If Sheets(i).Name <> SHEETLIST Then

            HYPER_LIST.Hyperlinks.Add Anchor:=Cells(i + TRANSCRIPTION_ROW, ANCHOR_Column), _
            Address:="", _
            SubAddress:=Sheets(i).Name & "!" & TRANSCRIPTION_Column & i, _
            TextToDisplay:=Sheets(i).Name
            
            Set HYPER_SHEETS = Worksheets(Sheets(i).Name)

            HYPER_SHEETS.Hyperlinks.Add Anchor:=Sheets(i).Cells(1, 2), _
            Address:="", _
            SubAddress:=SHEETLIST & "!" & "A1", _
            TextToDisplay:="Move to SheetList sheet"
        End If
    Next i

End Sub

```
文字列

#文字列
**文字列は、プログラミングの中で文字を扱うための値です。**

文字列を生成するには、文字を**ダブルクォーテーション"**
または、**シングルクォーテーション'**で囲みます。
以下の例を見てください。

```ava:【例】Rubyファイル
"This is string."

'This is string, too.'
```

このように、文字列は簡単に生成できます。

#irbで以下のコードを実行してみましょう

irbでRubyの文字列を記述し、実行してみましょう。

```java:ターミナル
# irbを起動
% irb
```

```java:irb
# 文字列を書いてエンターキーで実行
irb(main):001:0> "Hello! こんにちは！"

# 続けてこのように表示されれば成功
=> "Hello! こんにちは！"
```
**全角スペースや日本語が含まれているとプログラムはエラーが生じますが、
文字列の値として扱う場合は、エラーにはなりません。**

#まとめ
**文字列とは、プログラミングの中で文字を扱うための値のこと。**


#####以上。
【Python】50文字でワンライナースターリンソート

#はじめに
###スターリンソートとは
昇順（降順）になっていない要素を**粛清**する（取り除く）ことで$O(n)$の計算量を実現したソートアルゴリズム？
去年話題になったらしいが、自分は出会わなかった。

`Python3.8`以降ならすごくスッキリ書ける。

#実装

```python
stalin_sort = lambda x:[m:=x[0]] + [m:=i for i in x[1:] if i>=m]
```

#動作
```python
arr = [1, 2, 1, 1, 4, 3, 9]
print(stalin_sort(arr))
#---> [1, 2, 4, 9]
```

#長さ
```python
print(len('lambda x:[m:=x[0]] + [m:=i for i in x[1:] if i>=m]'))
#---> 50
```

#まとめ
粛清というより存在を無視する感じの実装になったが短くてステキ
nuxtのredirectまとめ

# まとめ
nuxtのライフサイクル(asyncData、fetch、plugins、middleware)で使える
redirectメソッド(Nuxt 2.14.5時点)のまとめです。

## redirectの動作仕様

redirectの書き方

```javascript

  fetch({ redirect }) {
    redirect([status,] path [, query])
  }
```

のような書き方で,
ユーザーをpathで示されたルートにリダイレクトさせることができます。

```
status: 型 Number デフォルト302 (SSRの時の、レスポンスのステータスコードを指定する引数)
path: 型 String or Object (リダイレクトさせるURLを指定する引数)
query: 型 Object (URLクエリパラメータ を指定する引数)
```


pathはいろいろな形で指定できます。
1. スキーム, ホスト名, ドメイン名を含んだURL文字列
ex) `path = https://www.google.co.jp/webhp`
2. ドメイン無しの絶対パスや相対パスの文字列
ex) `path="/users", path="./users"`
3. vue routerのrouter.push({path: "/users"})で使われるようなLocationオブジェクト
ex) `path={ path: "users/1"}, path={ name: 'user', params: { userId: '123' } }`

Locationオブジェクトの詳細 
https://router.vuejs.org/ja/guide/essentials/navigation.html#router-push-location-oncomplete-onabort


### SSR, CSR と pathの引数の指定別のredirectの動作
nuxtはSever Side Rendering(SSR)とClient Side Rendering(CSR)で動作が微妙に変わったりするので、分けて考えます。

SSRの場合は、300系のステータスコードとLocationヘッダで、リダイレクトさせます。

CSRの場合は、
    外部URLなら、汎用ページ遷移Javascript関数の`window.location.replace()`で
    内部URLなら、vue routerの関数の`router.push()`で
よしなにページ遷移させます。

| | SSR| CSR |
| ---- | ---- | ---- |
| 1 フルURL | HTTPレスポンスが引数statusのコードで返り、pathのURLへリダイレクト | window.location.replace(path)でURLが置き換わる|
| 2 絶対パス・相対パス | HTTPレスポンスが引数statusのコードで返り、pathのURLへリダイレクト | router.pushでpathのURLへ遷移 |
| 3 Locationオブジェクト | HTTPレスポンスが引数statusのコードで返り、Locationオブジェクトの表すURLへリダイレクト | router.pushでLocationオブジェクトの表すURLへ遷移 |

# 所感
redirectのpath引数でvue routerのLocationオブジェクトが取れること、内部URLの場合、`router.push`も使ってくれるところが盲点でした。
今まで、redirectはrouter.pushを使ってくれない。なのでredirectを使ったら、必ずSSRになると勘違いしていたため、redirectあまり使いたくないと思っていたのですが、普通に使えそうです。

ページの初期のデータ読み込みとリダイレクトの処理は、
nuxtライフサイクルでもvueライフサイクルのどちらでも書けるので、
割と混沌になりやすいと個人的に思っていたのですが、
ここら辺の処理はnuxtライフサイクルのみで完結させるのが、
nuxtの想定しているやり方、そして割とすっきり書けるやり方なのかもしれません。

# 参考
公式のドキュメントだとbeta版のGUIDEがredirect周りを詳しく書いてます。
https://ja.nuxtjs.org/guides/internals-glossary/context#redirect

あとはひたすらnuxt公式のコードリーディングです。
https://github.com/nuxt/nuxt.js/

[このファイル](https://github.com/nuxt/nuxt.js/blob/dev/packages/vue-app/template/utils.js)の
`app.context.redirect =`あたりの記述から、
pathの指定として、1・2・3のようなパターンがあること、
`app.context.next()`でページ遷移処理らしきことやっていることが分かりました。

そして[このファイル](https://github.com/nuxt/nuxt.js/blob/dev/packages/vue-app/template/index.js)の
`const next = ssrContext ? ssrContext.next : location => app.router.push(location)`あたりの記述から
`app.context.next()`は、SSRとCSRで違うページ遷移処理をしていること、
CSRはおそらくapp.router.push(location)でページ遷移処理をしていることが分かりました。

最後に[このファイル](https://github.com/nuxt/nuxt.js/blob/dev/packages/vue-app/template/server.js)の
`const createNext =`あたりの記述から
`app.context.next()`はSSRでは, 300系のステータスコードとLocationヘッダで、リダイレクト処理をしていそうなことが分かりました。
【ruby】文字列末尾への挿入、置換、破壊【b021】

某スキルチェックの際にググったメソッド忘備録　兼　初投稿
<h1>1.出力された値の取得</h1>
ループ処理の中に任意の数、入力された文字を配列として取得

```ruby:qiita.rb
hoge  #入力される文字
huga  #入力される文字
piga  #入力される文字

lines = []  #予め配列の変数を定義
lines << gets.chomp  #改行がないようにchomp
```

・複数行にわたって文字列がくるので配列に追加していく

```ruby:qiita.rb
lines = ["hoge", "fuga", "piga"]
puts lines[0]  #インデックス番号（添字）を指定して任意の文字を出力
>> hoge
```
・インデックス番号で任意の文字を呼び出し条件によって必要な変更を行い出力

<h1>2.文字末尾へ挿入</h1>
文字列末尾の種類によって挿入するか置換するかの条件分岐を考えます。

```ruby:qiita.rb
#条件分岐
文字列.end_with?('探したい値')  #任意の文字末尾に探したい値があるか
puts hoge.end_with?('e', 'ge', 'ch')  #複数の値を一度に参照可能（どれか一つでもあればおk）
>> ture

#挿入メソッド
文字列.insert(挿入先のインデックス番号,"挿入する値") 
#['h','o','g','e']のインデックス番号は先頭からだと[0,1,2,3]、末尾からだと[-4,-3,-2,-1]
puts hoge.insert(-1,"s")  #末尾へ挿入
>> hoges

puts hoge.insert(0,"s")  #先頭へ挿入
>> shoge

#破壊的メソッド
文字列.delete_suffix("消す値")  #末尾の消す値を消去
puts gehoge.delete_suffix("ge")
>> geho  #先頭は消えない

#置換（末尾"ge"を"ver"へ変換）
puts gehoge.delete_suffix("ge").insert(-1,"ver")
>> hehover
```


参考
https://qiita.com/uuchan/items/a4e9382440bdc4d2ac75
https://qiita.com/prgseek/items/92b49fe6b0a579f9cdd8

さくっと置換できれば良かったが難しかったので合わせ技でゴリ押した
もっと良い方法を知っている方、コメントいただければ幸いです！
ssh -T git@github.comの結果はgit@github.com: Permission denied (publickey).の時の対策



Publickeyを作り、GitHubに貼り付けましたが、接続確認するとまたエラーが出ました。
原因はkeyを保存するファイルのファイル名を「id_rsa」以外の名称に命名したからです。
名称を変更したらエラーが解消しました。

######Step1. ターミナルで下記のコマンドを入力します

```ruby:qiita.rb
cd ~/.ssh
ls
```
結果：

```ruby:qiita.rb
known_hosts   y		y.pub
```

######Step2. ファイル名を変更します

```ruby:qiita.rb
mv y.pub id_rsa.pub
mv y id_rsa
```
######Step3. 接続確認

```ruby:qiita.rb
ssh -T git@github.com
```
結果：Enter passphrase for key '/Users/xxx/.ssh/id_rsa': 

######Step4. Keyを作る時に設定したパスワード入力します

下記のメッセージが表示されれば、リモートサーバーに接続成功しています
Hi xxx! You've successfully authenticated, but GitHub does not provide shell access.
README.org



# 概要

マルチスケールシミュレーション特論で学んだRubyに関する基礎をまとめたリンク集. 


# 授業メモ<span class="timestamp-wrapper"><span class="timestamp">&lt;2020-12-24 Thu&gt;</span></span>

No5. [出力](https://qiita.com/batamon-427/items/e6e73d8d62cd9e55f1ba)

No6. [変数,method](https://qiita.com/batamon-427/items/a882e00fe570c21d3e80)

No7. [条件式 if,else](https://qiita.com/batamon-427/items/3fc297574ab3acd26d15)

No8. [rake](https://qiita.com/batamon-427/private/a3088157103bf399ace6)

No9. [assert\_equal](https://qiita.com/batamon-427/items/175b11a56b0b594eb3dd)

No.10 [Recursion(再帰)](https://qiita.com/batamon-427/private/4a64f43807a83a5e05fb)

No.11 [クラス](https://qiita.com/batamon-427/items/5415bdddb18ded0dd3a1)

EX.1 [roman numerals](https://qiita.com/batamon-427/items/f66abe70e270c6d31024)

EX.2 [Google Recruit](https://qiita.com/batamon-427/items/9aeceab94c7fb1971f56)


# 基本操作<span class="timestamp-wrapper"><span class="timestamp">&lt;2020-12-13 Sun&gt;</span></span>

・githubに共有

```ruby
git add -A
git commit -m 'hoge hoge'
git pull origin main
git push origin main
```

　'hoge hoge'はなんでもいい　進捗状況などを書き込むと◎

・qiitaに共有

```ruby
gem install qiita_org
qiita config
qiita config global access_token YOUR_TOKEN
qiita post README.org private
```

環境構築済みなら最後の1文のみでおk


# emacs操作(自分用)<span class="timestamp-wrapper"><span class="timestamp">&lt;2020-12-13 Sun&gt;</span></span>

コマンドをとにかく忘れるので要ると思ったものをメモする 
C-c .  :日付挿入 
C-x C-f:別のファイルにジャンプ 
C-x u  :操作巻き戻し 



------
 - **source** ~/grad_members_20f/members/batamon-427/README.org
RubyのKernelモジュールについて

#まとめようと思ったきっかけ
普段しれっとputsとかprintとかとか使ってるけど、これって何者?と思ったので調べてみると、カーネルモジュールに含まれているメソッドらしい。「Kernelモジュール?」となったので調べてみた。

#Kernelモジュール
>全てのクラスから参照できるメソッドを定義しているモジュール。 Object クラスはこのモジュールをインクルードしています。
Object クラスのメソッドは実際にはこのモジュールで定義されています。これはトップレベルでのメソッドの再定義に対応するためです。

まず、Objectクラスという全てのスーパークラスがあって、ここで定義されたメソッドは全てのオブジェクトに使える。
そしてKarnelモジュールはこのObjectクラスに含まれているので、結果、どこでもメソッドが使えるということ。
(ちなみにモジュールとは、クラスのようにインスタンス化ができないが、定数やメソッドを定義できる機能。)

こんな感じ。

```ruby:talk.rb
#この部分がトップレベル(クラスやモジュールの外側)
def say
  puts "hello"
end
#この部分がトップレベル

#Humanクラスは親クラスのObjectを継承しているのでsayメソッドが使える。
class Human
  def talk
    say
  end
end

human = Human.new()
human.talk
#=>hello

```
#最後に
自分なりに調べたのですが、もし間違いがあったらご指摘いただけると幸いです。

#参考文献
オブジェクト指向スクリプト言語 Ruby リファレンスマニュアル
https://docs.ruby-lang.org/ja/latest/class/Kernel.html

Rubyにおけるトップレベル
https://www.javadrive.jp/ruby/method/index1.html

Ruby のトップレベルメソッドって結局なんなの
https://qiita.com/pink_bangbi/items/c08ec7b32fc6dd20baad
Honkit で PlantUml を使う[Docker]

# やること

Honkit の導入記事はいくつかあったが、PlantUml を使えるようにするという記事はあまり見当たらなかったのでおいておく

# サンプル

動作するコード
https://github.com/tktcorporation/honkit-uml-sample

# Docker 周りの準備

## package.json

```json
{
  "name": "honkit_docker",
  "version": "1.0.0",
  "scripts": {
    "serve": "npx honkit serve",
    "build": "npx honkit build",
    "pdf": "npx honkit pdf"
  },
  "dependencies": {
    "gitbook-plugin-uml": "^1.0.3",
    "honkit": "^3.6.6"
  }
}
```

## Dockerfile

```Dockerfile
FROM honkit/honkit

RUN apt-get update
# PlantUml のために追加インストール
RUN apt-get install -y build-essential openjdk-8-jre graphviz

WORKDIR /doc

COPY ./package.json ./package.json
RUN yarn

COPY . .

CMD [ "npx honkit build" ]
```

## docker-compose.yml

```yml
version: "3.7"
services:
  doc:

    build: .
    restart: always
    working_dir: /doc
    volumes:
      - .:/doc:cached
      - /doc/node_modules
    ports:
      - "4000:4000"
```

## コンテナに入る

```bash
$ docker-compose build
$ docker-compose run --service-ports doc /bin/bash
```

以降は特に断りのない限りコンテナ内での作業とする。

# Honkit 導入

## book.json

```json
{
  "plugins": [
    "uml"
  ]
}
```

## init

```bash
$ honkit init
```

## uml を書く

```md

# UML Sample
```uml
@startuml

actor Promoter
actor Entrant

Promoter --> (Create Event)
Promoter -> (Attend Event)

Entrant --> (Find Event)
(Attend Event) <- Entrant

(Attend Event) <.. (Create Member)  : <<include>>

@enduml
```
```
```

## serve

```bash
$ npx honkit serve
```

`localhost:4000` で plantuml .
[Azure] WebAppでAzure AD認証を有効にした際に、実際に認証したユーザ情報をアプリ側で取得する(PHP編)

Azure WebAppにはappservice認証機能があり、AzureAD、Google、Facebook、Twitterでの認証を簡単に設定することが可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172826/d64a1ef7-7d72-d155-5f3c-225380f1f11d.png)

非常に簡単に認証設定することができるのですが、現在は認証機能だけのため、これだけでは対象のプロバイダーで認証されたユーザ全員がWebAppにアクセスできるようになります(AzureADの場合はADの権限設定で多少制限することも可能)。

認可の機能は何かしらアプリケーション側で実装する必要があるため、今回はAzureADで認証したユーザ情報をPHPで取得する方法を調査しました。

# 取得すべき情報

[Azure App Service および Azure Functions での認証と承認](https://docs.microsoft.com/ja-jp/azure/app-service/overview-authentication-authorization) を見ると `PHP アプリの場合、App Service は _SERVER['REMOTE_USER'] 変数を設定します` という記載があったのですが、試したところこの変数では情報を取得することができませんでした。

[Azure App Service 上での認証と承認の高度な使用方法](https://docs.microsoft.com/ja-jp/azure/app-service/app-service-authentication-how-to) を見ると、ユーザー要求へのアクセス `App Service では、特殊なヘッダーを使用して、アプリケーションにユーザー要求を渡します` という記載があり、こちらの情報で取得することができました。

# サンプルコード

次のコードでヘッダ情報を取得することができました。トークンは長いのでマスク風の処理をして出力しているのと、取得できなかった情報も参考として残しています。

```php:get_aad_info.php
<?php

$headers = getallheaders();
echo "\$headers['X-MS-CLIENT-PRINCIPAL-NAME'] : ", $headers['X-MS-CLIENT-PRINCIPAL-NAME'], '<br>';
echo "\$headers['X-MS-CLIENT-PRINCIPAL-ID'] : ", $headers['X-MS-CLIENT-PRINCIPAL-ID'], '<br>';
echo "\$headers['X-MS-CLIENT-PRINCIPAL-IDP'] : ", $headers['X-MS-CLIENT-PRINCIPAL-IDP'], '<br>';

echo "\$headers['X-MS-TOKEN-AAD-ID-TOKEN'] : ", substr($headers['X-MS-TOKEN-AAD-ID-TOKEN'], 0, 10), '******************** <br>';
echo "\$headers['X-MS-TOKEN-AAD-ACCESS-TOKEN'] : ", substr($headers['X-MS-TOKEN-AAD-ACCESS-TOKEN'], 0, 10), '******************** <br>';
echo "\$headers['X-MS-TOKEN-AAD-REFRESH-TOKEN'] : ", substr($headers['X-MS-TOKEN-AAD-REFRESH-TOKEN'], 0, 10), '******************** <br>';
echo "\$headers['X-MS-TOKEN-AAD-EXPIRES-ON'] : ", $headers['X-MS-TOKEN-AAD-EXPIRES-ON'], '<br>';

echo "\$_SERVER['REMOTE_USER'] : ", $_SERVER['REMOTE_USER'], '<br>'; // 取得できない
echo "\$_SERVER['PHP_AUTH_USER'] : ", $_SERVER['PHP_AUTH_USER'], '<br>'; // 取得できない

$current_user = get_current_user();
echo "\$current_user : ", $current_user, '<br>'; // nobody になる

?>
```

これをWebAppで実行すると出力結果は次のようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172826/dfc5d233-db37-fb11-d027-e5cbc03c23bc.png)

`X-MS-CLIENT-PRINCIPAL-IDP` でAzureAD(aad)が、`X-MS-CLIENT-PRINCIPAL-NAME`でユーザ名が取得できました。この環境ではgmailのMSアカウントをAzureADにゲスト登録しているため @gmail.comのユーザ名となっています。

# その他のプロバイダの場合

その他のプロバイダで認証した場合も、同様にヘッダ情報からユーザ情報が取得できるかと思います。ドキュメントにあるヘッダ情報を並べただけですが、同様に情報取得するサンプルを [こちら](https://github.com/dog-or-cat/get_app_service_authorization_info_by_php/blob/main/get_app_service_authorization_info.php) に作成してみました。

# 参考資料

- [Azure App Service および Azure Functions での認証と承認](https://docs.microsoft.com/ja-jp/azure/app-service/overview-authentication-authorization)
- [Azure App Service 上での認証と承認の高度な使用方法](https://docs.microsoft.com/ja-jp/azure/app-service/app-service-authentication-how-to)
[Windows10] 電源オプションのスリープ(S3)有効化

# 症状
- WindowsデスクトップPCにおいて、電源オプションに「スリープ状態」が表示されないことがある。
- PowerShellで`powercfg /a`をすると、無効になっていることがある。
- サポートはされている場合は以下のようにすることで、メニューに出現させることができる。

# 対処法
- レジストリを書き換えて有効化する。

|                |                    |
| ---            | ---                |
| Registry Hive  | HKEY_LOCAL_MACHINE |
| Registry Path  | Software\Policies\Microsoft\Power\PowerSettings\abfc2519-3608-4c2a-94ea-171b0ed546ab           |
| Value Name     | ACSettingIndex     |
| Value Type     | REG_DWORD          |
| Enabled Value  | 1                  |
| Disabled Value | 0                  |

# 参考（答え）
- https://getadmx.com/?Category=Windows_10_2016&Policy=Microsoft.Policies.PowerManagement::AllowStandbyStatesAC_2&Language=ja-jp
How to create Bitmap form inflating FrameLayout (.. or other layout)

I got into a bit of trouble when I tried to create a dynamic layout and generate a Bitmap without displaying it on the screen, so I'll leave this as a note.

```kotlin

    fun createLayoutBitmap() {
        val frameLayout = createMeasuredFrameLayout()
        val bitmap = createBitmap(frameLayout)
        // save bitmap or set Views ...
    }

    fun createMeasuredFrameLayout(): FrameLayout {
        // inflate or new your layout
        return FrameLayout(context).apply {
            setBackgroundColor(Color.YELLOW)
            val tv = TextView(context).apply {
                text = "test"
            }
            // apply pixel size to TextView
            addView(tv, Rect(0, 0, 100, 200).toLayoutParams())
            // important: you need call measure() after build layout. do not add after measure(). my mistaken  point.
            measure(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)
        }
    }

    fun createBitmap(view: View): Bitmap {
        // apply drawing bitmap size in pixel.
        val rect = Rect(0, 0, 500, 500)
        return Bitmap.createBitmap(rect.width(), rect.height(), Bitmap.Config.ARGB_8888).also {
            view.layout(rect.left, rect.top, rect.width(), rect.height())
            view.draw(Canvas(it))
        }
    }
    // rect is intuitive.
    fun Rect.toLayoutParams(): ViewGroup.LayoutParams {
        return FrameLayout.LayoutParams(width(), height()).apply {
            leftMargin = left
            topMargin = top
        }
    }
```

this is a very easy sample code.