OmniAICreator/Qiita-1.07M huggingface dataset:
nodebrewからnodenvに乗り換えた

## 概要

ずっと使っていたnodebrewをやめて、ディレクトリごとにnodeのバージョンを切り替えられるnodenvに乗り換えました。

[nodenv/nodenv](https://github.com/nodenv/nodenv)

## きっかけ

firebaseを使った開発をしてて、フロント側とclound functionsで対応するnodeのバージョンが違う事案が発生しました。

nodebrewだとディレクトリでバージョンを切り替えられなかったので、探した末nodenvにたどり着きました。

## 導入手順

### nodebrewを削除

まずはnodebrewを削除します。

```console
$ brew uninstall nodebrew
```

あとは `~/.bash_profile` に書いてあるPATHを消します。（使用してるSHELLによってPATHの在り処は変わります）

```console
$ vi ~/.bash_profile
# .bash_profile
PATH="~~" # nodebrewのPATH。ここを消す
```

nodeが消されたか確認します。

```console
$ node -v
# バージョン情報が返ってこなければOK
```

### nodenvをインストール

いろんな envライブラリを管理してる `anyenv`をインストールして、そこからnodenvをインストールしてきます。

[anyenv/anyenv](https://github.com/anyenv/anyenv)


```console
$ brew install anyenv
$ anyenv init
$ anyenv install nodenv
$ exec $SHELL -l
```

nodenvがインストールされたか確認します。

```console
$ nodenv -v
nodenv 1.3.0+5.ae0f24a #こんな感じのが返ってきたらOK
```

### nodeをインストール

まずはインストール可能なバージョンの確認を。

```console
$ nodenv install -l 
Available versions:
0.1.14
0.1.15
0.1.16
# 以下略
```

必要なnodeのバージョンをインストールします。

```console
$ nodenv install 12.7.0
$ nodenv install 10.16.0
```

グローバル（通常使用する方）を設定。

```console
$ nodenv global 12.7.0
$ node -v
v12.7.0
```

10系のほうは必要なディレクトリに移動して、以下のように設定します。

```console
$ nodenv local 10.16.0
$ node -v
v10.16.0
```

あと、自分はyarnを使うのでそれも。

```console
$ npm install -g yarn
```

インストールした諸々を反映させて

```console
$ exec $SHELL -l
```

完了！

これでディレクトリごとにnodeバージョンの管理ができるようになりました。

うまく行かなかったらローカルにPATHの消し忘れはないか、反映し忘れはないかなど確認してみましょう。

あとは適宜本家Githubを見てみてくださいませ。

[anyenv/anyenv](https://github.com/anyenv/anyenv)

[nodenv/nodenv](https://github.com/nodenv/nodenv)
Envoy: はじめましょう

# tldr
勉強がてらにEnvoyのドキュメントを邦訳してみました。ベースはGoogle Translateで、ところどころ不自然な箇所を直しています。

原文としたのEnvoyのドキュメントは[こちらのディレクトリ以下](https://github.com/envoyproxy/envoy/tree/master/docs)にあります（ライセンス：[Apache License 2.0](https://github.com/envoyproxy/envoy/blob/master/LICENSE), [NOTICE](https://github.com/envoyproxy/envoy/blob/master/NOTICE)）。

目次は[こちら](https://qiita.com/kentakozuka/items/27cc937fba4c18b226d0)です。


## はじめましょう

このセクションでは、非常に単純な構成から始めて、いくつかの構成例を示します。

Envoyの使用を開始する最速の方法は、ビルド済みのバイナリをインストールすることです。ソースからビルドすることもできます。

これらの例ではv2 Envoy APIを使用しますが、APIの静的構成機能のみを使用します。これは、単純な要件に最も役立ちます。より複雑な要件については、動的構成がサポートされます。

### 簡単な例を実行するためのクイックスタート

これらの命令は、Envoyリポジトリ内のファイルから実行されます。以下のセクションでは、同じ構成の構成ファイルと実行手順の詳細について説明します。

基本的なプレーンHTTPプロキシの検証に使用できる非常に最小限のEnvoy設定は、configs / google_com_proxy.v2.yamlで利用できます。これは、現実的なEnvoyの展開を表すことを意図したものではありません。



使用されるDockerイメージには、Envoyの最新バージョンと基本的なEnvoy構成が含まれます。この基本構成により、Envoyは受信したリクエストを* .google.comにルーティングします。
Nuxt.js の SSR で Cache-Control などのヘッダーを付与する

Nuxt.js の SSR で、 HTTP のレスポンスヘッダー変えたいなって思った時にどうやるのがいいのか考えた時にメモ :pencil:

# 結論

header の付与には [serverMiddleware](https://ja.nuxtjs.org/api/configuration-servermiddleware/) を使う

他の検討候補に比べて手軽だし、特に問題はないと思う。

```js:nuxt.config.js
  serverMiddleware: ["~/middleware/response-header.js"],
```

```js:middleware/response-header.js
export default (req, res, next) => {
  // req の path によって変えるなど内容は自由に……
  res.setHeader("Cache-Control", "public, max-age=600, s-maxage=3000");
  next();
};
```

# 他の検討候補

## module を使う

Nuxt.js を使っていると、色々と便利なモジュールがあるので、まずモジュールはないかって考えてしまったりする。
実際レスポンスヘッダーを変更するモジュールはあり、使い方も README に書いてあった。
[nuxt-custom-headers](https://github.com/MartinLG/nuxt-custom-headers)
しかし、上記リポジトリの Issue や Pull Request で既に挙げられているが、 `nuxt generate` の時の考慮がされていなかったり、注意が必要なため、あまりお勧めできないと感じた。

## module を作る

ちょうど良いモジュールがないならば作るか？
というわけで自分ならどう作るかを考え、 CSR であったり `nuxt generate` での静的HTML生成にはレスポンスヘッダーは関係がないので、 [addServerMiddleware()](https://ja.nuxtjs.org/api/internals-module-container/#addservermiddleware-middleware-) を使って追加するのが良いかと思った。
ただ、モジュールとして共通化する意味をあまり感じなかったので、結局作らず :expressionless:

## サーバーアプリケーションを利用する

Nuxt.js はデフォルトの `nuxt start` で起動するサーバーではなく、 [Express](https://expressjs.com/), [Koa](https://koajs.com/), [Micro](https://github.com/zeit/micro) などのアプリケーションに変更することができるので、そっちの方でレスポンスヘッダーを変更することもできそう。
routes ファイルの modifier 構文

Play では routes ファイルで HTTP ルーティングを記述します。各 route には modifier というマークが付けられます。

例えば次の `+ nocsrf` の部分。

```
+ nocsrf
POST  /api/new              controllers.Api.newThing
```

[Play のドキュメント](https://www.playframework.com/documentation/2.7.x/ScalaRouting) では

> It is also possible to apply modifiers by preceding the route with a line starting with a +. This can change the behavior of certain Play components.

と書かれていますが、具体的な構文が書かれていません。

[routes ファイルをパースする部分のソース](https://github.com/playframework/playframework/blob/678014185eee5d98e1700af8f8debdf3abac213e/dev-mode/routes-compiler/src/main/scala/play/routes/compiler/RoutesFileParser.scala#L194-L195)を見ると

```scala
  def modifiers: Parser[List[Modifier]] =
    "+" ~> ignoreWhiteSpace ~> repsep("""[^#\s]+""".r, separator) <~ ignoreWhiteSpace ^^ (_.map(Modifier.apply))
```

`separator` は `namedError(whiteSpace, "Whitespace expected")` で、 `whiteSpace` は `"""[ \t]+""".r` です。

宣言的でわかりやすいですね。
大雑把に言えば 「`+` のあとに whiteSpace 区切りで文字列を並べる」 という構文のようです。
`+ foo bar    baz` とすれば `foo`, `bar`, `baz` が modifier として設定されます。


[play.api.routing.Router.RequestImplicits._](https://github.com/playframework/playframework/blob/678014185eee5d98e1700af8f8debdf3abac213e/core/play/src/main/scala/play/api/routing/Router.scala#L99-L118) を import すると、
`RequestHeader` に対して `hasRouteModifier(String)` が呼び出せるので、リクエストが modifier の付いた route を通ってきたかわかります。
sourcetreeでサブモジュールを利用する方法【Git submodule】

## 結論
下記のように左メニューの下部で右クリックすると「サブモジュールを追加」がありますので、そこからサブモジュールを利用できます。

![sourcetree_submodule.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206138/5d1f5e28-2653-d5c3-a6bb-a1818521a728.png)


## 背景
sourcetreeではサブモジュールを利用していないプロジェクトでは、デフォルトでサブモジュールのメニューが出ておらず、最初どこから利用するのか困惑しました。
一度追加するとそのプロジェクトではサブモジュールのメニューが追加されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206138/fc53453f-578b-a8d0-4574-d0d04321cdc8.png)
Oculus Quest Or Go をコマンドラインからアップロード

アプリサイズが大きくなりすぎるとコマンドラインからでないとアップロードできないため、コマンドラインからのアップロード方法をメモっておく

**※BundleVersionCodeが前回の値より上回っていないと絶対にアップロードできないので注意する事**

１．コマンドラインツールを下記からダウンロードして、インストール

　◆基本ここに書いてある通りにやればできる
参照URL：https://developer.oculus.com/distribute/latest/concepts/publish-reference-platform-command-line-utility/

２．コマンドプロンプトを立ち上げてコマンドラインツールのインストールフォルダまで移動する。

```
cd コマンドラインツールのフォルダ 
```

３．下記のようにコマンドを打つ
　アプリID・アプリシークレットID・チャンネルはダッシュボードから取得できる。
　後は自動でアップロードが始まるので完了まで待つ

■Oculus Go側

```
ovr-platform-util upload-mobile-build --app_id ダッシュボードのOculusGo側のアプリID --app_secret ダッシュボードのOculusGo側のアプリシークレットID --apk apkのフルパス --channel ダッシュボードのOculusGo側のアップロードするチャンネル名
```

■Oculus Quest側

```
ovr-platform-util upload-mobile-build --app_id ダッシュボードのOculusQuest側のアプリID --app_secret ダッシュボードのOculusQuest側のアプリシークレットID --apk apkのフルパス --channel ダッシュボードのOculusQuest側のアップロードするチャンネル名
```


４．ダッシュボードの確認
　アップロードしたチャンネルのバージョンコードが更新されている事を確認し、
　静的解析のようなチェック処理が終わるまで待つ。
　サイズによっては30分ぐらい待たされる。
yamlやJsonのチェック(Lint)ができるCUEの紹介

# yamlやJsonのDSLが辛い
昨今、kubernetesを初めとして、yamlやJsonでconfigを書く機会が多くなっています。
**独自記法を覚えるのがつらい。**
私「ここは文字列？数値？省略したらどうなる？」

また、台帳管理をyamlで行うケースもあるかと思いますが、**yamlの型管理がしたい。**
私「文字列のみってreadmeに書いたのに、数値が入ってる・・・」

#### [CUE](https://cuelang.org/)はyamlやJson上のデータに対して、型を定義し、そのチェックをしてくれるツールです。

# この記事を読むと得られること
- CUEに関して何となく分かる
- CUEを使ってyamlの型チェックを行える

# CUEとは
[CUE](https://cuelang.org/)とは
> CUE is an open source language, with a rich set APIs and tooling, for defining, generating, and validating all kinds of data: configuration, APIs, database schemas, code, … you name it.

簡単に言うと、あらゆるデータの定義ができる言語だと言っています。
実際に、様々なデータのvalidationやdefinitionが行えます。

提供は2つの形式です
- goのsdk
- CLI

今回はCLIを中心に紹介していきます。

# CUEでyamlの型定義をし、チェックする
CUEはいろいろなことが出来るのですが、今回は**型定義を行い、それをもとにyamlのチェックをします。**
なので、役割として
- CUEは型の定義
- yamlは値の定義

とします。

ちなみにCUE単体で、型の定義とデータの定義ができますが、今回はyamlを使う前提にします。
需要もそっちのほうがありそうですし。

例として以下のyamlのチェックを実行していきます。
プロジェクトのルールを守っていないyamlをCUEで発見していきます。

```yaml
apiVersion: extensions/v1beta1 # 今は"apps/v1"
kind: Deployment
metadata:
  name: deployment-example
spec:
  replicas: 3 # replicasは3未満に制限
  template:
    metadata:
      labels:
        app: deployment-example
    spec:
      containers:
      - name: sample
        image: sample # docker imageのtagの省略禁止
        ports:
        - containerPort: 80
```

コメントで書いたルールをチェックするCUEが以下です。以降、この二つのファイルを例に説明していきます。

```cue
package kubernetes

apiVersion: "apps/v1" // apiVersionを指定
spec: {
	replicas: <3 & int // 3未満を指定
	template spec containers: [{image: =~"^[a-z][a-zA-Z0-9]*:[a-zA-Z0-9!-/:-@¥[-`{-~]+"}] // tagの明記を指定
}
```

## Types are Values
CUEのドキュメントを読んでいると、まず出てくる怪文書が「Types are Values.」
型と値は違うだろーー！！という気持ちになりますが、読み込むと意味が分かりました。
せっかくなので簡単に解説します。

上記のCUEの`apiVersion`と`replicas`のところで型と値が同じように扱われています。
これが**Types are Values.**の効果です。型と値を区別しなくてよくなり、記法が簡単になります。

### 型と値を「集合」と読み替える
集合です。数学の集合です。
例えば`int`は整数型を意味しますが、これを`int = {Z(Zは整数の全集合)}`だと思ってください。
そうすると、`{1} ⊆ int`が成り立ちます。
`string`でも同じです。`string = {文字列の全集合}`であり、`{"apps/v1"} ⊆ string`です。 
つまり、CUEの`apiVersion: "apps/v1"`は値を指定しているわけではなく、`{"apps/v1"}`を指定しているわけです。
型とか値とか考えずに集合で考えると理解しやすいと思います。

## 型定義方法cook book
### 和集合を定義したい
`"sample" | "text"`
"sample"という文字列か"text"という文字列のどちらかを許可する場合。
### 積集合を定義したい
`>3 & int`
3より大きい、かつ整数を許可する場合。
### 文字列の範囲を表現したい
"[a-z]"
任意の小文字アルファベット1文字を許可する場合(正規表現が使えるということです)。


## yamlの型チェックをしてみる
今回はCUEのCLIを使ってチェックしてみます。
`cue vet deployment.yaml check.cue`
これを実行するだけでチェックしてくれます。簡単！

以下が結果です。

```
apiVersion: conflicting values "extensions/v1beta1" and "apps/v1":
    ./network_socket.yml:1:14
    ./policy/policy.cue:3:13
spec.replicas: invalid value 3 (out of bound int & <3):
    ./policy/policy.cue:6:12
    ./network_socket.yml:5:44
spec.template.spec.containers.0.image: invalid value "sample" (does not match =~"^[a-z][a-zA-Z0-9]*:[a-zA-Z0-9!-/:-@¥[-`{-~]+"):
    ./policy/policy.cue:7:37
    ./network_socket.yml:13:12
```

確かに怒られています。

# 最後に
CUEのツールはCIに組み込んで初めて真価を発揮すると思います。
各種設定ファイルをcommitすると、CIが走り、問題があれば教えてくれる・・・素晴らしい仕組みです。
yamlやjsonで設定ファイルを書く人は一度CUEを試してみても良いかもしれません。

ただし、yamlやjsonのチェックがCUEで全て満たせるとも思えないので、サクッとチェックしてみたい人向けです。
(がっつりやりたい人は自分でチェックスクリプトを書いた方が良さそうです。)
phalcon webtoolsを使う！

#phalconのwebtoolsは便利なので使いたい！

でもちゃんとした使い方の説明がない！

ということで、説明します。

##composer で　phalcondevtoolsをインストール

まずは、
composer で install

```
{
    "require-dev": {
        "phalcon/devtools": "~3.4"
    }
}
```

すると、コマンドラインで実行できるphalconが以下に配置されます。

```
vendor/phalcon/devtools/phalcon

# 動作確認
vendor/phalcon/devtools/phalcon --help
 
```

## webtoolsをインストール

devtoolsでwebtoolsを有効にします。
いま現在動作がうまく行ってない場合は、一旦無効にします。

※重要なポイント。実行する場所がphalconプロジェクトのルートで実行です。
（composer.jsonとかある場所と同じ場所）

```
vendor/phalcon/devtools/phalcon webtools disable
vendor/phalcon/devtools/phalcon webtools enable
 
```

なにをやっているかというと、
publicにある、webtools.php とその設定ファイルのwebtools.config.phpをdisableで消します。
enableで環境に合わせたwebtools.config.phpを作成するといった動作してます。

これで、

http://xxxxxxx/webtools.php
にアクセスすればOKです。
STM32CubeIDEでTOPPERS/ASPカーネルとHALドライバを同居 - 本編

# はじめに

[準備編 (1)](https://qiita.com/imagou/items/2a208c877db1a77d341b)と[準備編 (2)](https://qiita.com/imagou/items/29edbaefcc3da5a9c073)の続きで、、、

**ついにASPカーネルとHALドライバを同居させます！**

# （本編の）本編

## 1. 準備

### 1-1. リアルタイムアプリケーション側の変更

#### 1-1-1. サンプルコード書き換え

**RTApp**（RTOSではないので注意！）プロジェクトの`sample.c`に、LED2を点滅させるコードを追加してやります。
以下のdiffを参考にしてください。

```console
user@user-VirtualBox:~/workspace/STM32CubeIDE/RTApp/application$ diff sample1.c.org sample1.c
114a115,116
> /* HALを使用したいので */
> #include "main.h"
152a155,156
> /* タスク1ならトグル */
> if (tskno == 1) HAL_GPIO_TogglePin(LED2_GPIO_Port, LED2_Pin);
```

しかしあまりにも雑なので、以下にコードを置いておきました。
https://github.com/imagou/QiitaSource/tree/master/STM32CubeIDE_ASP_HAL

#### 1-1-2. Makefileの書き換え

includeパスを追加してやる必要があります。
こちらも以下diffを参考、またgithubにも配置済み。

```console
user@user-VirtualBox:~/workspace/STM32CubeIDE/RTApp/application$ diff Makefile Makefile.org
148d147
< CDEFS := $(CDEFS) -DSTM32L475xx
150d148
< INCLUDES := $(INCLUDES) -I../../STM32App/Inc -I../../STM32App/Drivers/STM32L4xx_HAL_Driver/Inc -I../../STM32App/Drivers/CMSIS/Device/ST/STM32L4xx/Include -I../../STM32App/Drivers/CMSIS/Include
```

### 1-2. STM32アプリケーション側の変更

`main()`に、ASPカーネルのスタートアップを追加します。
以下同文。

```console
user@user-VirtualBox:~/workspace/STM32CubeIDE/STM32App/Src$ diff main.c.org main.c
72a73,74
> void hardware_init_hook(void);
> void sta_ker(void);
77a80,81
> void _kernel__start(void) {}
> void software_term_hook(void) {}
117a122,123
>   hardware_init_hook();
>   sta_ker();
```

また、タイマハンドラに、ASPカーネルのティック関数呼び出しを追加。
以下同文。

```console
user@user-VirtualBox:~/workspace/STM32CubeIDE/STM32App/Src$ diff stm32l4xx_it.c.org stm32l4xx_it.c
49a50
> void target_timer_handler(void);
171a173
>   target_timer_handler();
```

## 2. ビルド

### 2-1. リアルタイムアプリケーションのビルド

コンパイルさえ通っていればOKです。
（たぶんワーニングは出ます）

### 2-2. STM32アプリケーションのビルド

こちらは問題なく成功するはず。

## 3. 動作確認

[ASPカーネル動作](https://qiita.com/imagou/items/8e19ed77884af4fb4e71#3-%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D)、及び**0.4秒おきにLED2が点滅する**ことを確認してください。

## 4. 解説

`sample1.c`のdiff、及び実動作から一目瞭然ですが、HALドライバを用いてLEDをトグルさせているだけです！

# おわりに

単純に、**ASPカーネルのスタートアップ関数を呼ぶだけでOK**でした。
すっきり。

# 残課題

3つもプロジェクトがあるのは鬱陶しいので、RTAppはSTM32Appに統合したほうがいい気もしていますが、今後の課題とします。

# 参考

（特になし）
[JS]Objectの値をコピーしたいのに参照先がコピーされちゃう！！？？

記事下部にコメント指摘の追記あります。
## やりたいこと

人類において２００００００００回は繰り返されているであろう事象。
それはObjectをコピーして、コピーした方の中身を入れ替えたはずが、
コピー元まで入れ替わってしまっているということ。

これはObjectも（もちろんArrayも）参照先をコピーしてしまうことに起因する。
四次元ポケットと似た仕組みだ。（入り口は異なれど中身は一緒）

```JavaScript

// あるObjectがあって、
const ObjectA = {
    a:'dog',
    b:'cat',
    c:'bird',
};

// それをコピーする必要があった
const ObjectB = ObjectA;

// コピーした方の中身をちょっとだけ変えたい
ObjectB.a = 'dragon';

// あれ！？！？コピー元まで変わってる！？！？
console.log(ObjectA.a);

//欲しい結果= dog
//実際の結果= dragon

```

## 解決策

そこで、[Object.assign()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)を応用します。

`const ObjectB = Object.assign({}, ObjectA);`

```JavaScript
const ObjectA = {
    a:'dog',
    b:'cat',
    c:'bird',
};

//メソッド第一引数のassignが必須。これで新規のObjectに入れ直している。
const ObjectB = Object.assign({}, ObjectA);

// コピーした方の中身を変える
ObjectB.a = 'dragon';

// コピー元は変わってない！コピーした先だけが変わってる！ヨシっ！
console.log(ObjectA.a);
console.log(ObjectB.a);

//実際の結果
// ObjectA.a = 'dog'
// ObjectB.a = 'dragon'

```

ただこれもシャローコピー（１階層目のみのコピー）なので、
ネストになっていた場合は以下のように参照先がコピーされてしまいます。

```JavaScript
// Objectの中にObjectを作る
const ObjectA = { animal: { a: 'dog', b: 'cat' }, creature: { a: 'dragon', d: 'harpy' } };

// さっきと同じく、Object.assign()でコピーする
const ObjectB = Object.assign({},  ObjectA);

// よっしゃ、animalのaを'bird'に入れ替えたろ！
ObjectB.animal.a = 'bird';

console.log(ObjectA.animal.a);
console.log(ObjectB.animal.a);

// 実際の結果= 両方とも'bird'
```

ディープコピーはやり方を調べると色々でてきますが、
自前でメソッドを定義するのはわりと大変です。

配列であればmap関数などで中身を入れ替えちゃえば良いのですが、
オブジェクトの場合はそうもいきません。

ただディープコピーは多くの人たちが必要としていることもあり、
いろんな言語に対応するライブラリが作られています。

そういうのを使ってみるのも、良いかもしれませんね！（投げやり）

参考：
Jqueryであればextendとか。
https://api.jquery.com/jquery.extend/


## もっとわかりやすくかける方法（コメント指摘）
[スプレッド構文](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)で書くのが今風ということで、しかもこっちの方が見やすくてわかりやすいですね（IE対応、assignもできないし）

```JavaScript
// {}の空オブジェクトに、ObjectAの中身をスプレッド構文で展開してあげる
const ObjectB = { ...ObjectA };

// コピーした方の中身を変える
ObjectB.a = 'dragon';

// コピー元は変わってない！コピーした先だけが変わってる！ヨシっ！
console.log(ObjectA.a);
console.log(ObjectB.a);

//実際の結果
// ObjectA.a = 'dog'
// ObjectB.a = 'dragon'
```
UE4でマップを真っ暗にしてみる

![capDark.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16768/68ac5304-d8a4-d021-7226-133cda84b7e2.png)

上のような真っ暗なシーンにライトだけが効いてくるマップを作りたくて、Blankなプロジェクトでやったことをメモする。

# 参照サイト

* [UE4で朝から夜にする！ | おっさんのゆるゆる研究開発室 – ゲームとモデリング](https://bintololab.com/ue4-lighting-night)
* [How do I make a completely dark scene? - UE4 AnswerHub](https://answers.unrealengine.com/questions/210477/how-do-i-make-a-completely-dark-scene.html)
* [Can I set up the sky sphere to be dark night, or I have to create custom sphere? - Unreal Engine Forums](https://forums.unrealengine.com/development-discussion/content-creation/8920-can-i-set-up-the-sky-sphere-to-be-dark-night-or-i-have-to-create-custom-sphere)

# 実施環境

UE4.22.3

# やったこと

## Sky Sphereの設定変更

![capSkySphere.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16768/67be9f2f-d055-59a3-1401-634eb83b0a64.png)

## Light Sourceの設定変更

![capLightSource.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16768/c809eeee-9b1c-75f4-a369-997b92534025.png)

# Atmospheric Fogの無効化

Atmospheric FogのVisibleのチェックを外す。

# その他やったこと
過不足ありそう。

* [Project Settings]>[Engine]>[Rendering]>[Auto Exposure]のチェックを外す
* [World Settings]>[Lightmass Settings]>[Environment Intensity]の値を0に
* Skylightの[Details]>[Light]>[Indirect Lighting Intensity]の値を0に
アドオンとは（add-on）


#アドオンの意味
アドオン（add-on）とは、ソフトウェアに後から追加できる拡張機能のことである。 具体的には、アプリケーションの機能を追加する目的で作成されるソフトウェアのことである。 代表的な例としては、ブラウザに追加されるプラグイン（plug-in)などがある。別名、アドイン（add-in）とも呼ばれる。

####便利なアドオン
アドオンを使う機会でもっとも一般的なのは、IE（インターネット エクスプローラー）に代表されるパソコン用のWebブラウザでしょう。 ブラウザ上から直接検索できる「Googleツールバー」や「動画やファイルを簡単にダウンロードできる」「広告を自動でブロックしてくれる」など、さまざまな種類のアドオンが無料で公開されています。


 
####危険なアドオン
ただし、ネット上にはブラウザの動作を不安定にしたり、個人情報を抜き取るようなマルウェア・スパイウェアと呼ばれる危険なアドオンも存在します。 こうしたアドオンを不用意にインストールしてしまうと、通販サイトなどにログインする際のアカウント情報を盗まれたり、キーボードで入力した文字を外部に送信されるといった危険性があるため十分注意が必要です。

知らない間にアドオンが追加されているかも？
ネット上で見つけた何らかのアプリケーションをインストールする際に、同時にアドオンが追加される場合があります。 本来の目的とは別にセットで追加を求められるケースがあるのです。 こうしたアドオンをよく確認せずに許可してしまうと、知らない間に不必要なアドオンが追加されていた、という現象が起きてしまいます。

アドオンを無効にすることで閲覧の速度を上げます
アドオンはブラウザに機能を加えていくものなので、基本的に僅かずつですが動作スピードを遅くしてしまうデメリットが存在します。 こうした問題に対処するため、一部のアプリでは「アドオンを無効にすることで閲覧の速度を上げます」という通知を出し、定期的にアドオンの管理を促してくれます。

 
#アドオンの管理で出来ること
アドオンの管理には以下のような５つの機能があり、各種設定を行うことが可能です。 「Internet Explorer」「Google Chrome」「Microsoft Edge」「Mozilla Firefox」など代表的なブラウザにはアドオンの管理が用意されています。

####１）アドオンの無効
アドオンの無効では、不必要だったり問題が発生するアドオンを無効にできます。 削除とは違い一時的に無効にするだけなので、いつでも有効に戻すことができます。 必要がどうか迷った場合はとりあえずこの「アドオンの無効」を選択しておくと無難かもしれません。

####２）アドオンの有効
アドオンの有効を選択すると、無効にしたアドオンを再び使用できます。 アドオンの有効・無効を使い分けることで、オン・オフのイメージで機能を切り替えることができます。

####３）アドオンの削除
明らかに不必要であったり、意図せずインストールされてしまったアドオンがある場合は「アドオンの削除」を実行しましょう。 ただし、無効とは違いブラウザ上から完全に消すことになる（アンインストール）ので、再び必要になった場合は探し出して追加し直す手間がかかります。

####４）アドオンの更新
古いアドオンを使い続けているとセキュリティ上の問題が発生する場合があるため、定期的な更新（アップデート）が必要になります。 アドオンの更新は「手動で今すぐ」行ったり、「自動で更新」に設定することも可能です。

####５）アドオンの報告
アドオンに問題が起きた場合、その情報をGoogle・マイクロソフトなどの製作会社に報告することができます。 特に悪質なアドオンを発見した場合などに開発者に対して報告することで、その後の対処に生かされるため時間の許す場合は積極的に報告すると良いでしょう
EC2 Mysqlのアンイストール

RDSを別立てをしたため EC2に入れていたMysql関連が不要になったため削除を行う。

```
インストールされているmysqlの確認
$yum list installed mysql*

上記コマンドで出てきたmysql関連の削除（例）
$yum remove mysql57.x86_64 mysql57-common.x86_64

不要なディレクトリの削除
$rm -rf /var/lib/mysql
$rm -rf /var/lib/mysql/
$rm -rf /usr/lib64/mysql
$rm -rf /usr/lib/mysql
$rm -rf /usr/share/mysql
$rm –rf /usr/my.cnf
$rm -rf /root/.mysql_sercret
$chkconfig –del mysqld

再度インストールされているmysqlの確認 何も出てなければok
$yum list installed mysql*
or
$rpm -qa | grep -i mysql

```
Visual Studio Community 2019導入

「visual studio express」で検索したら

https://visualstudio.microsoft.com/ja/vs/express/
![vs1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/ef0c3da7-9262-c54e-2a6d-c9ef9e7f013b.png)


名前が変わっていた。

「community 2019をダウンロードする」
を押した。

![vs2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/b9a1d81b-f218-1dbd-dc99-86253130c0d7.png)

「保存」を押して、保存が終了してから
「実行」を押した。

![vs3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/2451f5a3-4cdb-0514-ff90-413314ac4729.png)

「続行」を押した。


![vs5a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/6e856653-ce2b-a71d-f803-a55b0124d58e.png)


「はい」を押した。
この画面が「PrtScr」ボタンでファイルにできなかった。
携帯で写真をとってinstagramかどこか経由で切り貼り。

![vs4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/18fe1492-8a8f-a919-673c-7adbe07a2213.png)

数分したら

![vs5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/539ecba7-4d1c-75e3-6417-2cfd1ea0ddfc.png)

でも、すぐに次の画面になった。

![ps6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/2127ad36-d635-a8da-d159-47a344ac7c5b.png)

C#,VB,C++を使う可能性がある。
ユニバーサルWindowsって気になる。

「インストール」を押した。

![vs7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/263dbbd3-df79-aaa0-7538-ababb10e7271.png)

今度は５分や１０分では終わらなそう。

DELL Note PC A97THGENが、ぶんぶんファンが回って五月蠅い。

ハングする前に、ひとまず、ここまでで記事投稿。

約１時間後

![vs8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/8c8014ba-32e7-ab0a-a8c0-6f7904c90c01.png)

お昼休みに入ります。続きは食後に追記します。
![vs9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/16c58bca-ff7d-e70d-5e9d-9423c43afc80.png)

「再起動」

![vsa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/c561743d-e071-da52-8605-a9dde6f9f562.png)

「Visual Studio 2019」

![vsb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/cb4aff44-2df3-21bf-83d1-47cd0a59f0e4.png)

「後で行う」

![vsc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/dadf4561-0d16-ea19-3198-782de296e270.png)

「Visual Studioの開始」

![vsd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/f9ee0f93-ae10-1a8f-bb68-942f348e1c4e.png)

本当に数分だった。

![vse.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/8ae285a7-9560-b33e-bded-af602425a000.png)

「プロジェクトやソリューションを開く」で、spreadのsampleを開く

![vsf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/057b06e9-e389-c804-61b1-76fd95c2818f.png)

build

```shell-session
1>------ ビルド開始: プロジェクト: SpreadWinDemo, 構成: Debug Any CPU ------
1>  SpreadWinDemo -> C:\Users\kaize\OneDrive\ドキュメント\spreadsamples\VB\SpreadWinDemo\bin\Debug\SpreadWinDemo.exe
========== ビルド: 1 正常終了、0 失敗、0 更新不要、0 スキップ ==========
```


# 文書履歴(document history)
ver. 0.01 初稿 2019926
ver. 0.04 URL追記　20230228

### 最後までおよみいただきありがとうございました。

いいね　💚、フォローをお願いします。

####  Thank you very much for reading to the last sentence.

Please press the like icon 💚　and follow me for your happy life.
golang マップ

```go
package main

import (
	"fmt"
)

func main() {

	// 宣言で
	var soup map[string]int
	
	// 宣言しただけだとnill
	fmt.Println("宣言だけだとnillです：", soup == nil)

	
	// nillのマップの存在しないキーの参照
	measurement, status:= soup["onion"]
	
	// nillのマップの存在しないキーは、デフォ値 intは0
	fmt.Println("存在しないキー：" , measurement)
	
	// ステータスはfalse	
	fmt.Println("ステータス：", status)
	

	//makeで、代入
	m1 := make(map[string]int)
	m1["NHK"] = 1
	m1["日本テレビ"] = 4
	m1["テレビ朝日"] = 5
	m1["TBS"] = 6
	
	fmt.Println("makeのNHK：", m1["NHK"])


	//マップリテラルで代入
	m2 := map[string]int{
		"NHK": 1,
		"日本テレビ": 4,
		"テレビ朝日": 5,
		"TBS": 6,
	}
	
	fmt.Println("マップリテラルの日本テレビ：",m2["日本テレビ"])
	
}

```
ループ内で配列長を変える配列操作

# ループ内で配列長を変える危険な配列操作

配列["a", "a", "b", "c"]から"a"を除いて配列["b", "c"]にしたいとする。

## 配列のsplice

```javascript
var ary = ["a", "a", "b", "c"];
for (var i = 0; i < ary.length; i++) {
    console.log(ary[i]); // a, b, cを表示する。
    if (ary[i] === "a") ary.splice(i, 1); //aryを["a","b","c"]に変更し2番目の"a"を飛ばす。
}
```

配列に対してループしているのに`splice`が配列の長さを4から3に変えている。
こういうプログラムは予想も付かない不具合を起こす可能性があり危険。


## getElementsByTagNameなどに対するremove

```html
<ul>
    <li>a</li>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
<script>
    var ary = document.getElementsByTagName("li");
    for (var elem of ary) {
        console.log(elem); /* <li>a</li>, <li>b</li>, <li>c</li>を表示する。 */
        if (elem.textContent === "a") elem.remove(); /* aryをHTMLCollection [<li>a</li>, <li>b</li>, <li>c</li>]に変更し2番目の"a"を飛ばす。 */
    }
</script>
```

elment.childNodes、element.children、getElementsByClassName、getElementsByTagNameが返す配列に対してループを回すことは危険。
ループ内で配列長を変えるという問題の構造に気づきにくい。


# ループ内で使用しても安全な配列操作

## querySelectorAllに対するremove
```html
<ul>
    <li class="q_selector">a</li>
    <li class="q_selector">a</li>
    <li class="q_selector">b</li>
    <li class="q_selector">c</li>
</ul>
<script>
    var ary = document.querySelectorAll(".q_selector");
    for (var elem of ary) {
        console.log(elem); /* <li>a​</li>, <li>​a​</li>, <li>​b</li>, <li>c</li>を表示する。*/
        if (elem.textContent === "a") elem.remove(); //aryはNodeList [li, li, li, li]のまま変更されない。
    }
</script>
```

配列をループ内で使用しても安全な配列に変えることで安全に配列を操作できる。
この配列は`remove`しても配列の長さが変わらない。


## jQueryのremove

```html
<ul>
    <li class="jq_each">a</li>
    <li class="jq_each">a</li>
    <li class="jq_each">b</li>
    <li class="jq_each">c</li>
</ul>
<script>
    var ary = $(".jq_each");
    ary.each(function() {
        console.log(this); /* <li>​a​</li>, <li>​a​</li>, <li>​b</li>, <li>c</li>を表示する。 */
        if ($(this).text() === "a") $(this).remove(); //aryはk.fn.init [li, li, li, li, prevObject]のまま変更されない。
    });
</script>
```

配列をループ内で使用しても安全な配列に変えることで安全に配列を操作できる。
この配列も`remove`しても配列の長さが変わらない。


## 配列のdelete

```javascript
var ary = ["a", "a", "b", "c"];
for (var i = 0; i < ary.length; i++) {
    console.log(ary[i]); // a, a, b, cを表示する。
    if (ary[i] === "a") delete ary[i]; // aryを[empty, empty, "b", "c"]に変更する。
}
```

配列操作をループ内で使用しても安全な配列操作に変えることで安全に配列を操作できる。
`delete`は配列の長さを変えない。


## spliceの後でループを戻す

```javascript
var ary = ["a", "a", "b", "c"];
for (var i = 0; i < ary.length; i++) {
    console.log(ary[i]); // a, a, b, cを表示する。
    if (ary[i] === "a") {
        ary.splice(i, 1); // aryを["b", "c"]に変更する。
        i = i - 1; //spliceの後でループを1つ戻す。
    }
}
```

配列のspliceはループの順番を戻すことで正常に配列を操作できる。
配列の長さが変わるのでこのやり方は注意が必要。


# 配列の削除問題

この問題を密かに**配列の削除問題**と呼んでいるが、**配列の削除問題**と一言で説明しても問題の構造が伝わらないという問題がある。後者の問題を解決するためにこの記事を書いた。

**配列の削除問題**は知られていないが、このような問題はQiitaやteratailで見つけられる。

- [getElementsBy**で取得したDOM要素をすべて削除するにはどうするの？](https://qiita.com/suin/items/1c2c0e36a9dffde31e10)
- [JavaScript - javascriptで配列から特定の要素だけ抜き取りたい！](https://teratail.com/questions/491)
iOS13にUpdateしたiPadでBLE通信を実施しようとしたらアプリが落ちた

iPadOS13にしたらアプリが落ちて困ったので取り合えず初投稿します。

#現象発生環境
Xcode:11
iPadOS:13.1
iPad mini5

#現象
BLE通信が発生する箇所をタッチするとアプリが落ちる

#対応方法
エラー内容で調べたら直ぐに対応方法を発見出来ました。

対応方法としてはInfo.plistに「Privacy – Bluetooth Always Usage Description」を追加して、
Valueには表示に使用するメッセージを設定すればOKでした。

[対応方法詳細](http://harumi.sakura.ne.jp/wordpress/2019/08/27/ios13%E3%81%8B%E3%82%89%E3%81%AEbluetooth%E3%83%91%E3%83%BC%E3%83%9F%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3/)

＊iOS13でも同様の対応が必要だと思われます。
モーダルにアニメーションをつけ、Vue.jsで実装する

表示/非表示のアニメーションを、Vue.jsで書こうとするとき、何回もどうやるんだっけ？ってなるので、メモ。

というか、回りくどいことしてますが、結論BulmaとVue.jsでできているモーダルにアニメーション付けたいってことだったと書いてから思いました。

## モーダルにアニメーションをつける

### 使うモーダルコンポーネント
[Bulma(CSSフレームワーク)のモーダル](https://bulma.io/documentation/components/modal/)
こちらのモーダルにアニメーションつけてみたいと思います。

### ふんわり表示するアニメーションサンプル
[ふんわり表示/非表示するモーダル](https://kuzlog.com/2018/01/21/2413/#i-4)
こちらのふんわりのアニメーションをつけようと思います。

## jQueryでアニメーションをつける
* アニメーションのサンプルはcheckboxを使ってますが、よく使うclassを追加するタイプにするため、jQueryで書きます。
* サンプルのアニメーションが `display: none;` で切り替えるタイプではないので、最初から `is-active` をつけて表示の状態にしておきます。
* 表示/非表示で追加するclassは別途 `is-show` というクラスをつくってCSSを書きます。

``` html
<button class="modal-show">モーダル表示</button>

<div class="modal is-active">
  <div class="modal-background"></div>
  <div class="modal-content">
    モーダルだよ。
  </div>
  <button class="modal-close">×</button>
</div>
```

``` css
/* CSSは追記する部分だけ書きます。 */
.modal {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.5s, transform 0s 0.5s;
}
.modal-content{
  transform: scale(1.2);
  transition: 0.5s;
}
.is-show{
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s;
}
.is-show .modal-content{
  transform: scale(1);
}

```

``` js
$(function(){
  $('.modal-show').click(function(){
    $('.modal').addClass('is-show');
  });
   $('.modal-close, .modal-background').click(function(){
    $('.modal').removeClass('is-show');
  });
});
```

## Vue.jsで書く
* jQueryで書いていた `is-show` の部分を、モーダルを表示/非表示にするdataプロパティとして書きます。
* templateのモーダルを `transition` で囲います。（今回は `modal` という名前をつけています。）
* Vue.jsのtransitionのアニメーションの書き方でCSSを書きます。（下はSassで書いてます。）

```vuejs
<template>
  <button class="modal-show" @click="modalShow">モーダル表示</button>

  <transition name="modal">
    <div class="modal is-active" v-if="isShow">
      <div class="modal-background" @click="modalClose"></div>
      <div class="modal-content">
        モーダルだよ。
      </div>
      <button class="modal-close" @click="modalClose">×</button>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
    }
  },
  methods: {
    modalShow() {
      this.isShow = true
    },
    modalClose() {
      this.isShow = false
    }
  }
}
</script>

<style lang="scss" scoped>
.modal-enter-active, .modal-leave-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s;
  .modal-content{
    transform: scale(1.2);
    transition: 0.5s;
  }
}
.modal-enter, .modal-leave-to {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.5s, transform 0s 0.5s;
  .modal-content{
    transform: scale(1);
  }
}
</style>
```
ラクスルサイトで注文一覧を取得するブックマークレット

## 導入

経理側で計上する際にラクスルの注文情報が必要だが、ラクスル側でcsvでの吐き出しが無いため、注文一覧を取得するブックマークレットを作ってみた。

## 使い方

- 注文一覧（完了した注文）ページでブックマークレットを使う
- 注文一覧がクリップボードにコピーされる
- そのままスプレッドシートに貼り付け

## コード

```js
// title:(ラクスル用注文一覧取得)
text="";
no=document.getElementsByClassName("orders-orderSummary-receiptNum");
date=document.getElementsByClassName("orders-orderSummary-date");
payment=document.getElementsByClassName("orders-orderPayment-type");
price=document.getElementsByClassName("orders-orderPayment-priceNumber");
label=document.getElementsByClassName("orders-itemData-label");
content=document.getElementsByClassName("orders-itemData-content");

text="注文番号\t注文日時\t支払い方法\t仕様\t商品名\t出荷予定日\t部数\t注文合計金額\n";

for(i=0;i<date.length;i++){
  j=7*i;
  text+=no[i].innerText.split('注文番号：').join('')+"\t"+date[i].innerText+"\t"+payment[i].innerText+"\t"+content[j+0].innerText+"\t"+content[j+2].innerText.split('編集').join('')+"\t"+content[j+3].innerText+"\t"+content[j+4].innerText+"\t"+price[i].innerText+"\n";
}

textBox = document.createElement("textarea");
textBox.setAttribute("id", "target");
textBox.setAttribute("type", "hidden");
textBox.textContent = text;
document.body.appendChild(textBox);

textBox.select();
document.execCommand('copy');
document.body.removeChild(textBox);
```

## ブックマークレットにする方法

- 上記のコードをコピー
- <a href="https://crocro.com/tools/item/gen_bookmarklet.html" target="_blank">ブックマークレット作成</a>を開き、ブックマークを作る
Lightning コンテンツ幅修正

修正するファイルは以下の４ファイルとなります。

・front-page.php
・page.php
・index.php
・single.php

front-page.php
 $main_col = ‘col-md-8’;　を $main_col = ‘col-md-9’;　に
$main_col = 'col-md-9';
div class=”col-md-3 col-md-offset-1 subSection sideSection　のcol-md-offset-1を削除
<div class="col-md-3 subSection sideSection">

page.php　（固定ページ）
div class=”col-md-8　を　col-md-9 に変更
<div class="col-md-9 mainSection" id="main" role="main">
div class=”col-md-3 col-m subSection sideSection　の　col-md-offset-1を削除
<div class="col-md-3 col-m subSection sideSection">

index.php (カテゴリ・アーカーブ・タグ ページ)
div class=”col-md-8 mainSection” id=”main” role=”main” を col-md-9に変更
<div class="col-md-9 mainSection" id="main" role="main">
div class=”col-md-3 col-md-offset-1 subSection sideSection　のcol-md-offset-1を削除
<div class="col-md-3 subSection sideSection">

single.php (記事ページ)
div class=”col-md-8 mainSection” id=”main” role=”main” の　col-md-8　を　col-md-9へ
<div class="col-md-9 mainSection" id="main" role="main">
div class=”col-md-3 col-md-offset-1 subSection sideSection　の　col-md-offset-1を削除

<div class="col-md-3 subSection sideSection">
大きな地物をIntersectsする際に有効なST_Subdivide関数

#概要
国土数値情報の森林地域や都道府県ポリゴンなどノード数の多いポリゴンとIntersectsしたい場合そのままやってしまうと遅いのですが、ST_Subdivide関数を使えばIntersectsを高速にできます。
ただ、Intersectsしたい地物が少ない・小さい場合などはST_Subdivideを実行する時間もかかるため、そのままIntersectsした方がいい場合もあります。


#ST_Subdivide関数について
指定した数より多いノードを持たないポリゴンを返します。
例として東京都の森林地域を下記のコードでST_Subdivideした場合は
（256個以下のノードに切り分ける）

```SQL
SELECT 
      ST_Subdivide(geom,256) 
FROM 
      japan_forest_pl;
```
結果としてはこのような状態で返ってきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380046/587e3b00-e142-485f-1e41-e74e0cfda6a9.png)
この状態からST_Unionをすれば元のポリゴンへ戻すことが可能です。
#速度比較
例として、
日本全国の森林地域が格納されているjapan_forest_plテーブルと
日本全国の行政区域が格納されているjapan_city_plテーブルを
Intersectsさせて松山市の森林地域を抜き出したいと思います。
ポリゴンは全て国土数値情報のものを使用しています。
##そのままIntersectsを行う場合
```SQL
SELECT
	ST_Union(
          ST_Intersection(forest_pl.geom,city_pl.geom)
             ) as geom
FROM 
	(
	SELECT geom as geom
	FROM japan_forest_pl
	WHERE pref_code = '38' 
	) AS forest_pl,
	(
	SELECT geom as geom
	FROM japan_city_pl
	WHERE city_code = '38201'
	) AS city_pl
WHERE st_intersects(forest_pl.geom,city_pl.geom)
```
Execution time: 23361.740 ms
#ST_Subdivide後のポリゴンをIntersects
```SQL
SELECT
	ST_Union(
          ST_Intersection(forest_pl.geom,city_pl.geom)
             ) as geom
FROM 
	(
	SELECT geom as geom
	FROM japan_forest_pl_subdivide
	WHERE pref_code = '38' 
	) AS forest_pl,
	(
	SELECT geom as geom
	FROM japan_city_pl_subdivide
	WHERE city_code = '38201'
	) AS city_pl
WHERE st_intersects(forest_pl.geom,city_pl.geom)
```
Execution time: 13910.946 ms

10秒程度削減できました。
ただ、概要にもかきましたが1行政だとST_Subdivideの実行する時間を考慮するとそのまま実行する方が早いですね。

#おまけ
PostgreSQL9.5
Postgis2.3.7
だとバグが発生してたみたいです
追記（2019/9/28）
色々見てると2.5.0まで色々のバグが治ったりできたりしている関数みたいですね。
リングがない地物ではこの現象は発生していないのでリングがない地物で行うと良いかと思います。

ST_Subdivide(geometry,256)
**before**
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380046/1b05d487-0e45-1dfe-b33b-ea2779315b9c.png)
**after（ST_Union後の画像しか残ってなかった）**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380046/326867ae-131e-c4d4-90d2-e5a9a4372438.png)

おそろしや・・・
プログラミング初学者が参考にした記事をまとめてみた。

#学習の役に立つ記事
プログラミングは調べる力が大事だとよく言われますが、世の中には不親切な記事が溢れすぎています。
質の低い記事に引っかかってしまって、時間を大量にロスした経験は誰にでもあると思います。
そこで、プログラミング初学者の私が躓いたときに検索しまくった結果、<b>一番参考になった</b>記事をまとめました。

#筆者のプログラミングレベル
ksです。
・プログラミング歴2ヶ月（2019/9/25時点）
・Progate Lv 200ぐらい
・Java『やさしいJava』、『スッキリわかるJSP & サーブレット』、『スッキリわかるJava 入門　実践編』を終え、簡単なゲームを何個か作ったレベル
・MySQL　ノリで使えるレベル
・JavaScript, TypeScript　何となくコードが書けるレベル
・Angular,Springboot　何とか使えるレベル

#前提
初学者はProgate→参考書が鉄板だと思います。最初は無料の記事でがんばろうと思いましたが、結構な時間をロスしました。Progateは『知る』ため、参考書は『理解する』ために使う感じ。多分頭の良い人ならProgate要らないです。
参考書はAmazonで評価が高い物で良いと思います。

###Java
[TECH Projin]
(https://tech.pjin.jp/)
・練習問題が勉強になります。インプットが終わった初学者はとりあえずここで問題を解いてみるとよいと思います。

[ラムダ式・Stream APIの理解のポイントは「型」]
(http://masatoshitada.hatenadiary.jp/entry/2015/02/09/190150)
・スッキリシリーズではラムダ式が何となくしか理解できませんでしたが、この記事で理解が深まりました。
（※スッキリシリーズは大変勉強になる参考書です）

###Spring boot
[多様化するJavaのフレームワーク問題を解決する、「Spring Boot」とは？](https://codezine.jp/article/detail/11310)
・Spring bootはこちらの内容をインプットするだけで、今のところはあまり不便を感じていません。

###Angular
[Angular Docsの紹介]
(https://angular.jp/docs)
・Angularは情報が少なく学習に苦労しました。いろいろググりましたが、公式チュートリアル（日本語）が一番わかりやすいです。
（参考書はAmazonで最も評価の高いAngular アプリケーションプログラミングを用いました）

###メモ（というか戒め）
・悩むぐらいならググったほうが早い。
・調べ事をするとき。英語を避けると結局遠回りになる。（TOEIC 630にはつらい・・・）
・まだまだ学習途上なので適宜追加します。
目標への指標の設定

職歴変更から目標技術獲得までの目標の指標を設定しよう。
かっこいいことを書くのはマウントする為じゃなくて
あこがれて強くなるため。マウントは生産性がないから意味ない。


１、ラフな目標
アプリ開発フルスタックエンジニア（PL・PM）
要はフロント～サーバーまで全部できる。
UX・プログラム・コーディングを一手にできること。

理由
１、コミュニケーションの円滑化
２、プロジェクト参画者すべてのチーム化
３、楽して仕事するには、究極的には全工程の理解が必要
４、追従できない専門的技術分野の獲得の為の足場が欲しい
５、



技術地点（※は使う予定あり。投稿時点で使っているは非公開）

Lv10は設計～開発・裏技まで可能。サトリも出来ます。
lv5はちょっとしたコーダー級、カリカリ書ける人

html・css・・・lv7
MySQL・・・lv5
javasprict・・・lv7（優先度高）
(node.js・・・lv7)
php・・・lv4（優先度低）
java・・・lv4
Ruby・・・lv3

※C#・・・lv5（優先度高）
c・・・lv5
c++・・・lv5
アセンブリ言語・・・lv5

先行技術系？（古いのもあるけど）
※python・・・lv5
(django・・・lv5)
Kotlin・・・lv3
go・・・lv3


レベルの指標が分からん。
HTML5/CSS3　tableの書き方

<h2>テーブルの外観を作る――（例）５行２列のテーブルを作成する</h2>

☆ＨＴＭＬ５

```html:table-base.html
...
<div id="main">
	<article>
		<h1>.........</h1>
					<!-- div id="main"とarticle、h1 は ２カラムＨＰの部品-->
		<table>
			<caption>......</caption>
					<!-- テーブルにその内容を説明・補足するキャプションを追加することができる。キャプションは、他の子要素の上に必ず書きます。④ キャプションをテーブルの下に置くときには、CSSでtable {caption-side: bottom;}と記入します。 -->
			<thead>
					<!-- ヘッダー行をグループ化する。⑤ -->
			<tr>
				<th scope="col">......</th>
					<!-- scope属性：thに見出しに関連するセルの方向を指定する。th scope="col"②　ないしはth scope="row"③ -->
				<th scope="col">......</th>
			</tr>
			</thead>
			<tbody>
					<!-- ボディー行をグループ化する。⑤ -->
			<tr>
				<th scope="row">......</th>
				<td>......</td>
			</tr>
			<tr>
				<th scope="row">......</th>
				<td>......</td>
			</tr>
			<tr>
				<th scope="row">......</th>
				<td>......</td>
			</tr>
			<tr>
				<th rowspan="3"  scope="row">......</th>
					<!-- 行ないしは列を結合するためには、rowspan属性、colspan属性を使います。rowspan属性の場合、空の列は省略して書きません。colspan属性の場合、空の行は省略して書きません。① -->
				<td>......</td>
			</tr>
			<tr>
				<td>......</td>
			</tr>
			<tr>
				<td>......</td>
			</tr>
			</tbody>
		</table>
	</article>
</div>

...
```

<h2>CSSで見映えを調整する</h2>

☆ＣＳＳ３

キャプションをテーブルの下に置く

```css:table-base.css
/* キャプションをテーブルの下に置く ここから ↓ */
table {
    border-collapse: collapse;	
    caption-side: bottom;
}
/* キャプションをテーブルの下に置く ここまで ↑ */
```

テーブルのレイアウトを調整する

```css:table-base.css
/* テーブルのレイアウトを調整する ここから ↓ */
table th, table td {
	padding: ...px;
	border: ...px solid #......;
}
/* テーブルのレイアウトを調整する ここまで ↑ */
```

テーブルの基本的なレンダリング

```css:table-base.css
/* テーブルの基本的なレンダリング ここから ↓ */
table {
	width: ...%;
}
/* テーブルの基本的なレンダリング ここまで ↑ */
```

table-layout プロパティ

```css:table-base.css
/* table-layout プロパティ ここから ↓ */
table {
	table-layout: auto;
	/* ないしは */
	table-layout: fixed;
	/* など */
}
/* table-layout プロパティ ここまで ↑ */
```

二重になっている罫線を１本にする

```css:table-base.css
/* 二重になっている罫線を１本にする ここから ↓ */
table {
	border-collapse: collapse; /* ２重線は、separate */
}
/* 二重になっている罫線を１本にする ここまで ↑ */
```

1列目のセル幅を指定する

```css:table-base.css
/* 1列目のセル幅を指定する ここから ↓* /
table tr th:first-child {
	width: ...px;
}
/* 1列目のセル幅を指定する ここまで ↑ */
```

2行目以降のテキストを上端揃えにする

```css:table-base.css
/* 2行目以降のテキストを上端揃えにする ここから ↓ */
table tbody th,
table tbody td {
	vertical-align: top;
}
/* 2行目以降のテキストを上端揃えにする ここまで ↑ */
```

奇数行と偶数行で背景色を変える

```css:table-base.css
/* 奇数行と偶数行で背景色を変える ここから ↓ */
table thead tr th {
	background-color: #......;
}
table tbody tr:nth-child(odd) {
	background-color: #......; /* 奇数行背景色 */
}
table tbody tr:nth-child(even) {
	background-color: #......; /* 偶数行背景色 */
}
/* 奇数行と偶数行で背景色を変える ここまで ↑ */
```

キャプションのCSSを調整する

```css:table-base.css
/* キャプションのCSSを調整する ここから ↓ */
table {
	……
}
caption {
	text-align: left;
	margin-bottom: ...px;
}
caption p {
	margin-top: ...px;
	margin-bottom: ...px;
}
table th, table td {
	……
}
/* キャプションのＣＳＳを調整する ここまで ↑ */
```
fastTextで単語の分散表現を獲得する

#準備
下記のページに書いてあるので，詳しくはここを見てください．
https://qiita.com/m__k/items/68a149139532bc8cf657

```
$ git clone https://github.com/facebookresearch/fastText.git
$ cd fastText
$ make
```

#学習
なお，前回の“<a href="https://qiita.com/Naoki-Shibata-LS/items/b258e608e778385efde5">Word2Vecで単語の分散表現を獲得する</a>”と同様，TravelBlogのテキスト情報を用いて学習を行います．

```
$ ./fasttext skipgram -input [textファイル] -output [modelの名前] -dim 300
Read 528M words
Number of words:  807037
Number of labels: 0
Progress: 100.0% words/sec/thread:  118286 lr:  0.000000 avg.loss:  0.503195 ETA:   0h 0m 0s
```

#確認
king - man + woman = ?

```confirm.py
import gensim
model = gensim.models.KeyedVectors.load_word2vec_format('[modelの名称].vec', binary = False)
print(model.most_similar(positive=["king", "woman"], negative=["man"], topn=9))
```



```
[(‘kings’, 0.6394046545028687), (‘king窶冱’, 0.6300824284553528), (‘king-sized’, 0.617986261844635), (‘king/queen’, 0.6178181171417236), (‘pharaoh窶冱’, 0.6167725324630737), (‘king’’, 0.6152504682540894), (‘birthrate’, 0.6043733358383179), (‘queen-sized’, 0.6003711819648743), (‘pharaoh)’, 0.5966148376464844)]
```

うまくいかない...
Lossが下がりきっていないかも．
調べてみると，epochのデフォルトは5とのこと．
epochを30にしてみよう

```
$ ./fasttext skipgram -input [textファイル] -output [modelの名前] -dim 300 -epoch 30
Read 528M words
Number of words:  807037
Number of labels: 0
Progress: 100.0% words/sec/thread:   94129 lr:  0.000000 avg.loss:  0.097892 ETA:   0h 0m 0s
```

```
[('queen', 0.5857873558998108), ('king,', 0.5639103055000305), ('King', 0.5392391681671143), ('kings', 0.532159686088562), ('princess', 0.510100781917572), ('king.', 0.4975261688232422), ('kingly', 0.49258339405059814), ('kings,', 0.4881439208984375), ('throne', 0.48232918977737427)]
```

うまくいきました．
やはり，学習が足りなかったようです．

##追加実験(さらにepochを変更してみると...)

```
$ ./fasttext skipgram -input ../sentences -output fastText_travelblog_300dim_epoch50_model -dim 300 -epoch 50
Read 528M words
Number of words:  807037
Number of labels: 0
Progress: 100.0% words/sec/thread:   99613 lr:  0.000000 avg.loss:  0.071412 ETA:   0h 0m 0s
```

Lossが下がっていることを確認．
実際に演算をしてみる．

```
[('king,', 0.5747531652450562), ('queen', 0.5343612432479858), ('kings', 0.5206679105758667), ('king.', 0.5016391277313232), ('princess', 0.4929012656211853), ('princess,', 0.48218420147895813), ('queen.', 0.47622746229171753), ('King', 0.4598667025566101), ('queen。ヌs', 0.4520658254623413)]
```

まさかのking

#関連のある投稿
<a href="https://qiita.com/Naoki-Shibata-LS/items/b258e608e778385efde5">Word2Vecで単語の分散表現を獲得する</a>

#参考ページ
https://qiita.com/m__k/items/68a149139532bc8cf657
古き良き #Linux の makeコマンド + Malefile で開発環境構築とか docker-compose build / up / down とかテストとか rails console とかコマンド一発で実行できるようにしてみよう ( Mac開発におすすめ ) ( #linux #docker #rails )

# make コマンドとは

>makeは、プログラムのコンパイルに広く使われているコマンドです。どのソースコードをどのようにコンパイルすれば良いかを判断し、コンパイルに必要なコマンドを実行してくれます。

[第5章 Makeの基本](https://manual.atmark-techno.com/dist/atmark-dist_developers_guide_ja-1.0.11/ch05.html)

# Makefile

- Makefileという名前で、拡張子なしのファイルを作成しておくだけで良い。
- make コマンドを叩くと、このMakefileを自動的に解釈してくれる。

例

```
build:
	docker-compose build
up:
	docker-compose up
down:
	docker-compose down
rspec:
	bundle exec rails rspec
console:
	bundle exec rails console
```

# make コマンドの例

```
make build
```

```
make up
```

# make コマンド + Makefile良さ

- 長いコマンドを覚えなくて良い。叩かなくて良い。
- makeコマンドが入っている環境では、なに一つせず、そのままコマンドが叩ける。 (開発環境構築コマンドを叩くために開発環境構築をしなくて良い) Macなら最初から入ってるはず。

# makeコマンドってコンパイル用じゃないの？

そう思っていたんだけど、こんな別の使い方もできるっぽい。
ファイルにコマンドを羅列するだけで動くなんて。

# Windowsだと

makeコマンド自体のインストールが必要っぽい？

# 参考

[2016年だけどMakefileを使ってみる - Qiita](https://qiita.com/petitviolet/items/a1da23221968ee86193b)



# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2528








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
#docker – docker-compose up でエラーが起こって動かない ( failed: port is already allocated )

- 複数の環境を切り替えた時に起こりがち。前に使ってたdockerコンテナが残ってるパターンとか。
- docker-compose ps で他のコンテナが port を使っていないか確認しよう。
- docker-compose ps だと docer-compose が管理しているものしか一覧できないので、素の docker ps も叩いてみよう。
- 邪魔しているコンテナ、プロセスがあれば docker-compose down とか docker-kill とかして対処しよう。


# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2527








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
騒音について考えて見る

東京でも静かな住宅地に住んでいるのだが、たまに騒音がありちょっと気になることがあるので、発信源を考えてみた。

* 近所の道路を走る車やトラック
* 空を飛ぶ軍用機や民間機
* 近所の新築や改築
* 近所の道路工事
* パトカーや消防車や救急車のサイレン
* 区市町村の屋外スピーカー
* 近所で演奏される楽器の音
* 近所の大学の学祭の打ち上げ花火（年一度だが）
* 電車の走行音や警笛（我が家では微かにしか聞こえないが）

騒音ではないが環境音

* 雨や風や雷や嵐
* 鳥の鳴き声
* 犬や猫の鳴き声
* 夏のセミの声
* 秋の虫の声
* 近所の神社の大太鼓

この中で一番気になるのは軍用機の騒音で、これがどれくらいの頻度で発生しているか、調べるための仕組みを作ってみたい。民間機は高度がけっこうあるので、それほど気にならない。またもし民間機の近所を通る頻度を調べたければADB-Sで調べる方法もある。

24時間完全に録音して解析するのはコストがかかりすぎる。

単位時間のピークレベルを確認できるモジュールを作ってその値をモニターするのが良いのではないかと考えている。

具体的にはAVRのADにマイクをつなげてループで最大値を保存して、I2Cでそのその値を返すようなモジュールの作成を考えている。I2Cのアクセスで値はリセットする。

屋内において観測する場合、オーディオなどの影響を受けない工夫も必要かもしれない。

正確な単位(db)で測るのは校正が難しいのが、相対的な計測でも十分な場合も多いと思う。

# プロトタイプ回路

[Macの古いマイク](https://qiita.com/yamori813/items/737f54bbcc584df8791e)を使って、とりあえず作ってみました。

![noise_ele.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/40acf14a-b988-7426-89e6-f4e887c922c5.png)

![写真（2019-09-29 14.54）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/19f41f28-bfaf-92ff-aa2b-fea37967a253.jpeg)
よく分からない #Ruby の CSV#read と CSV#open の違い

# csv

```
A,B,C
A,B,C
A,B,C
```

# read

- その名の通り読み取り専用。
- 配列の配列で中身を返す。

```rb
CSV.read('/tmp/3.csv')
=> [["A", "B", "C"], ["A", "B", "C"], ["A", "B", "C"]]
```

headers を指定すると `CSV::Table` クラスのインスタンスが返ってくる

```rb
CSV.read('/tmp/3.csv', headers: true)
=> #<CSV::Table mode:col_or_row row_count:3>
```

each すると繰り返しごとにCSVの行 ( `CSV::Row` ) が得られる

```rb
CSV.read('/tmp/3.csv', headers: true).each { |line| p line}
#<CSV::Row "A":"A" "B":"B" "C":"C">
#<CSV::Row "A":"A" "B":"B" "C":"C">
=> #<CSV::Table mode:col_or_row row_count:3>
````

書き込みモードで開こうとするとエラーが起こり、なおかつ、ファイルの中身が全て消える。なにこれ。

```rb
CSV.read('/tmp/3.csv', 'r')
=> [["A", "B", "C"], ["A", "B", "C"], ["A", "B", "C"]]

CSV.read('/tmp/3.csv', 'w')
# IOError: not opened for reading
# from /Users/yumainaura/.rbenv/versions/2.6.3/lib/ruby/2.6.0/csv/parser.rb:202:in `gets'

CSV.read('/tmp/3.csv', 'r')
=> []
```

# open

読み取りじゃなくて色々できるやつ。
CSVクラスのインスタンスが返ってくる

```rb
CSV.open('/tmp/3.csv')
=> <#CSV io_type:File io_path:"/tmp/3.csv" encoding:UTF-8 lineno:0 col_sep:"," row_sep:"\n" quote_char:"\"">
```

headers を指定しても同じ

```rb
CSV.open('/tmp/3.csv', headers: true)
=> <#CSV io_type:File io_path:"/tmp/3.csv" encoding:UTF-8 lineno:0 col_sep:"," row_sep:"\n" quote_char:"\"" headers:true>
```

each すると繰り返しごとにCSVの行 ( `CSV::Row` ) が得られる

```rb
CSV.open('/tmp/3.csv', headers: true).each { |line| p line}
#<CSV::Row "A":"A" "B":"B" "C":"C">
#<CSV::Row "A":"A" "B":"B" "C":"C">
=> #<CSV::Table mode:col_or_row row_count:3>
```

open して read すると CSV.read と同じく `CSV::Table` のインスタンスが返ってくる

```rb
CSV.open('/tmp/3.csv', headers: true).read
=> #<CSV::Table mode:col_or_row row_count:3>
````

ファイルへ書き込みもできる

```rb
CSV.open("path/to/file.csv", "wb") do |csv|
  csv << ["row", "of", "CSV", "data"]
  csv << ["another", "row"]
  # ...
end
````

# 参考

[[Ruby]CSV::Tableが便利 - Qiita](https://qiita.com/hkengo/items/59ba599ef48c613f2402)

# ドキュメントを読みなさいだって？

とてもとてもよくわかるドキュメントが欲しい。

# お疲れじゃないですか？Rubyプログラマの皆さん

適度に休みを取りましょう。プログラミングは1日1時間まで。
![image](https://user-images.githubusercontent.com/13635059/65644969-c2a29e00-e030-11e9-850c-ad31b924d59b.png)



# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2526








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
190923 Laprasエンジニアリング勉強会#2

- ライブラリ
    - よく使う処理をひとまとめにしたもの
- フレームワーク
    - 処理をもっと大きくまとめたもの
- データベース
    - ユーザー情報やコンテンツなどを保存しておく場所
- SQL
    - 言語ではない
- サーバー（インフラ環境）
	- 色々入れる箱
	- Azure/AWS/GCP…
	- 多くの企業がクラウドサービスを利用している
- OS 
	- 様々なアプリケーションを動かす大元のソフト
	- 多くのOSはUnixなどから派生している

- OSS
    - 自身の技術をオープンにし、他者の手も加わって新しいものを作り上げていく
    - OSSは意識が高いとかでなく一般的なもの
    - Ruby,wordpressなどもOSS
    - Open soft source
    - OSSという概念のもと、技術は継承し急速に発展している
    - Rubyやwordpressなども
    - つまり言語同士の関連性も高かったりする
    - 例えばGo人材が欲しいのであれば、関連した言語や派生する前の言語などを調べることによってキャッチアップ速度や経歴との親和性の目安をつけられる
＜調べてみよう＞
- 自社エンジニアになんでうちは●●を使っているのか聞いてみる
- 今人気な技術はなんなのか調べてみる
- 自社技術に近しい技術を調べてみる
VeeValidatorでmax dimensionsを実装する

## 概要
画像のwidthとheightを何px以下にするっていうバリデーションがしたかった。
が、VeeValidateにデフォルトであるRuleにはそんなものはなかったし、追加するつもりもなさそうだった。
https://github.com/logaretm/vee-validate/pull/2052

## 環境
- Nuxt
- TypeScript
- Vuetify
- VeeValidate

## 結論
自前でルール定義しよ

```typescript:src/plugins/vee-validate.ts
import Vue from 'vue'
import VeeValidate, { Validator, Rule, RuleResult } from 'vee-validate'
import ja from 'vee-validate/dist/locale/ja'

Vue.use(VeeValidate)
Validator.localize('ja', ja)

// HACK: カスタムルールは別ファイル化の方がよき
const loadImage = (src: string): Promise<HTMLImageElement> => {
  return new Promise((resolve, reject): void => {
    const image: HTMLImageElement = new Image()
    image.onload = (): void => resolve(image)
    image.onerror = (e): void => reject(e)
    image.src = src
  })
}

const maxDimensionsRule: Rule = {
  validate: (file: File, pixel): RuleResult => {
    const url = window.URL

    // HACK: promise型を返したくないからthen使ってる
    const isVelify = loadImage(url.createObjectURL(file)).then(
      (response: HTMLImageElement): boolean => {
        if (response.width > Number(pixel)) {
          return false
        }
        if (response.height > Number(pixel)) {
          return false
        }

        return true
      }
    )
    return isVelify
  },
  getMessage: (field: string, [pixel]: [number]): string => {
    return `${field}は幅${pixel}px、高さ${pixel}px以下にしてください`
  }
}
Validator.extend('maxdimensions', maxDimensionsRule)
```

## 詳細
今回は画像の縦横同じ大きさでよかったので指定するpixelは一つだけにしましたけども引数増やせば縦横別々の指定もできそう。

あとはいつものようにルールを呼び出すのみ

```vue
    <v-file-input
      v-model="imageFile"
      v-validate="{
        maxdimensions: 1024
      }"
    ></v-file-input>
```
#shell で巨大な CSV ファイルを作るコマンドの例 (1万行とか)


```
for i in {1..10000}; do echo "A,B,C" >> /tmp/big.csv; done
```

コマンドを1万回発行するので効率は悪そう。まあコマンド打って放っておけば。

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2525








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->