OmniAICreator/Qiita-1.07M huggingface dataset:
VMware WorkstationのLinux Serverコンソールを高解像度にする

# はじめに

VMware WorkstationでLinux Serverなどのコンソールを使う際、解像度が小さくて困ることがあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13722/5ecf40e1-6808-a5a2-d161-f96dc925b43e.png)

本記事では、解像度を大きくする方法を紹介します。

# 検証環境
- VMware Workstation 15.5 for Windows
- Ubuntu 20.04 Server 64bit

# vmxの編集

対象の仮想マシンのvmxファイルを開き、次の設定を変更します

```sh:
svga.guestBackedPrimaryAware = "TRUE"
↓
svga.guestBackedPrimaryAware = "FALSE"
```

# 仮想マシンの起動とgrubの設定変更

`/etc/default/grub`を編集し、希望の解像度を設定します。

```sh
% sudo vim /etc/default/grub

GRUB_GFXMODE=1920x1440
GRUB_GFXPLAYLOAD_LINUX=keep

% sudo update-grub
% sudo reboot
```

解像度が大きくなっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13722/ecc07b4e-9c89-2bd6-7e2c-aadc1a3a20d0.png)

# 参考
- [\[Linux\] コンソールの解像度を変更する方法(CUI) -](http://www.suke-blog.com/how-to-change-terminal-resolution-cui/)
- [VMware ESXi 仮想マシンの解像度がウィンドウいっぱいにならない時は | Fun Scripting 2.0](https://servercan.net/blog/2020/08/vmware-esxi-%E4%BB%AE%E6%83%B3%E3%83%9E%E3%82%B7%E3%83%B3%E3%81%AE-%E8%A7%A3%E5%83%8F%E5%BA%A6-%E3%81%8C%E3%82%A6%E3%82%A3%E3%83%B3%E3%83%89%E3%82%A6%E3%81%84%E3%81%A3%E3%81%B1%E3%81%84%E3%81%AB/)
- [Cannot run linux(centos7) guest with resolution 19... - VMware Technology Network VMTN](https://communities.vmware.com/t5/VMware-Workstation-Player/Cannot-run-linux-centos7-guest-with-resolution-1920-1080-under/td-p/1826609)
- [Windows ゲスト OS へのビデオ解像度モードの追加 (1003)](https://kb.vmware.com/s/article/1003?lang=ja)
超初心者がPythonでHistData.comから取得したローソク足データをグラフで表示してみた

## 参考

http://serverarekore.blogspot.com/2020/10/mplfinance_20.html


↓で取得したデータを利用します。

https://qiita.com/emilia/items/28e9875d273c8f052cbd

## コード

``` draw_candlestick_chart.py
import pandas as pd
import datetime
 
import mplfinance as mpf

#masta = pd.read_csv('./temp_historical_data/USDJPY.csv')
# とりあえず100行だけ表示してみる
df = pd.read_csv('./temp_historical_data/USDJPY.csv', nrows=100)
df.columns = ["Date", "Open", "High", "Low", "Close", "Volume"]
df["Date"] = pd.to_datetime(df["Date"])
df.set_index("Date", inplace=True)

mpf.plot(df,type='candle', datetime_format='%Y/%m/%d %H:%M', xrotation=90, style="yahoo", savefig=dict(fname='test.png',dpi=100))

```

## できあがったグラフ

![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69727/8708c193-4ccd-0487-27ad-016befce0891.png)

## ちょっと説明

ネットでしらべるとmatplotlib.financeやmpl_financeを利用した例が多いが、どちらもdeprecatedなので、利用したのはmplfinance。

参考にも挙げた[ここ](http://serverarekore.blogspot.com/2020/10/mplfinance_20.html)がとてもよくまとまっていた。

見やすいグラフ化のパターンなんかは作っておかないと肝心な時に困りそう。
Spark(Databricks)のPySparkにてデータフレーム操作する時にカラムを指定してデータ取得する方法

## 概要
Spark（Databricks）のPySparkにてデータフレーム操作する時にカラムを指定してデータ取得する方法を紹介します。

確認済みの4パターンにおけるコードを提示します。

- カラム名を直接リストで指定する方法
- カラム名をcol関数で指定する方法
- カラム名をデータフレームのオブジェクト名（書式:DataFrameName['column_name']）で指定する方法
- カラム名をデータフレームのオブジェクト名（書式:DataFrameName.column_name）で指定する方法

詳細は下記のGithub pagesのページをご確認ください。

https://manabian-.github.io/databricks_tecks_for_qiita/#how_to_select_columns_by_pyspark/how_to_select_columns_by_pyspark.html

コードを実行したい方は、下記のdbcファイルを取り込んでください。

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


## 検証環境
databricks runtime: 8.1.x-scala2.12
Python  version:    3.8.8
pyspark version:    3.1.1.dev0


## カラムを指定してデータを取得する方法
### カラム名を直接リストで指定する方法

```python
# 単一のカラムを指定する方法
df.select('c_custkey').limit(10).display()
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/8085599e-45c2-0258-7f72-6aca3f9656d3.png)


```python
# 複数のカラムを指定する方法
columns = ['c_custkey','c_name']
 
print(columns)
df.select(columns).limit(10).display()
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/d334008d-a17e-dfb6-d930-2f78c04f8b49.png)


### カラム名をcol関数で指定する方法

```python
# 単一のカラムを指定する方法
from pyspark.sql.functions import col
 
df.select(col('c_address')).limit(10).display()
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/72239f55-cc67-ad06-8510-b42ee6850db7.png)

```python
# 複数のカラムを指定する方法
from pyspark.sql.functions import col
 
columns = ['c_address', 'c_nationkey']
 
col_columns = []
for column in columns:
    col_columns.append(col(column))
 
print(col_columns)    
df.select(col_columns).limit(10).display()
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/73b43c93-22a9-9fef-b9ad-f914333ef27e.png)


### カラム名をデータフレームのオブジェクト名（書式:DataFrameName['column_name']）で指定する方法

```python
# 単一のカラムを指定する方法
 
df.select(df['c_phone']).limit(10).display()
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/9cdf5e61-0bca-2801-48e3-271823934dc8.png)

```python
# 複数のカラムを指定する方法
columns = ['c_phone', 'c_acctbal']
 
col_columns = []
for column in columns:
    col_columns.append(df[column])
 
print(col_columns)
df.select(col_columns).limit(10).display()
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/3193e980-2437-c533-653f-dfef2a4bac96.png)


### カラム名をデータフレームのオブジェクト名（書式:DataFrameName.column_name）で指定する方法

```python
# 単一のカラムを指定する方法
 
df.select(df.c_mktsegment).limit(10).display()
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/25f60896-c80c-280b-ae18-72a8b6e4a202.png)


```python
# 複数のカラムを指定する方法
columns = [df.c_mktsegment, df.c_comment]
 
print(columns)
df.select(columns).limit(10).display()
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/1e77b3ee-4a92-3057-6bd1-d18e1e3738df.png)
Laravelのコントローラーについて理解する

#環境
PHP 7.3.24
Laravel 6.20.30
MAMP

#Controller(コントローラ)とは
コントローラとはlaravelのMVCモデルのCに当たるもので、モデルとビューとの橋渡しをする役割があります。ルーティング処理によって複数あるコントローラのうちどのコントローラで処理をするかが割り振られます。

***コントローラの主な役割***
・ルーティングで受け取った情報をモデルやビューで処理するように指示すること
・モデルで受け取った情報をビューファイルで読み取れるように処理すること

#コントローラの作成手順
##1. コントローラの作成
コントローラの作成は`php artisan`コマンドを使います。
ちなみにコントローラ名はアッパーキャメルケース（頭文字が大文字で複合語の先頭も大文字）にするのが一般的です。また、分かりやすいように`Controller`という言葉もつけるのが通例です。

```
$ php artisan make:controller TestController
```
コマンドを実行すると`app/Http/Controllers`に`TestController.php`が作成されていることが確認できるので、ファイルの中身を確認してみます。

```php:TestController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class TestController extends Controller
{
  // 
}
```
初期表示で`TestController`クラスを作成してくれているので、次は中身を記述していきます。

今回はindexメソッドを作成して「これはコントローラのテストです。」という文字をビューで表示させる指示を書くことにします。

```php:TestController.php
<?php

namespace App\Http\Controllers;


class TestController extends Controller
{
    public function index()
    {
        $text = "これはコントローラのテストです。";

        //top.blade.phpに$textという変数を渡す場合
        return view('top', ['view_text' => $text]);
    }
}

```
`view(ビューファイル名,ビューに渡したいもの)`とすることでコントローラからビューへ指示を出すことができます。
`view_text`がビューで使うときの変数名、`$text`はコントローラ内で定義した変数になります。
<font color="red">コントローラの中では、ビューで使う変数名は変数の＄記述しませんが、viewファイル内(bladeファイル)では変数の＄をつけたものを使います。ややこしいので注意！</font>

##2.ビューファイルの作成
先ほど設定したコントローラ内のメソッドをビュー側できちんと読み取れているか確認します。
（この記事はコントローラについて理解するものなので、ビューの記述方法などの説明は省きます）
`show.blade.php`には以下のように記述しました。

```html:show.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    {{-- コントローラで渡した変数を使う --}}
    <p>{{ $view_text }}</p>
</body>
</html>
```

##3. ルートの作成（ルーティング）
まずはリクエストURLをルートで受け取ったときに、どのコントローラで処理をするかの記述を行なっていきます。
ルートの記述は`routes`ディレクトリ内の`web.php`に以下のようにしていきます。
今回はURLが`/test`の場合、TestControllerのindexメソッドを実行するルーティング処理を行なっていきます。

```php
Route::get('/test','TestController@index');
```

##4.画面で確認
ルートで指定したURLに接続してみると以下のような表示になりました!

```text
これはコントローラのテストです。
```
これでコントローラの処理をビューで表示することに成功しました。
今回はモデルを介した処理は行っていませんが追々やっていこうと思います！


#参考
[コントローラについて](https://laraweb.net/knowledge/733/)
[【Laravel入門】コントローラの作成とビュー表示](https://qiita.com/yukibe/items/7bab0d596ae9a0930f18)
[【Laravel】viewメソッドの使い方](https://tektektech.com/views-helper/)
CentOSにNginxをインストールする

CentOSにNginxをインストールしたので、覚え書き

## 環境
* OS: CentOS 7.9.2009 （GCP: Compute Engine）
* Nginx: 1.20.1（2021年7月18日現在、Stable）

## 手順

(1) 以下のコマンドを実行

```bash:
$ vi /etc/yum.repos.d/nginx.repo
```

(2) インサートモードに切り替えて、以下を貼り付けし、保存

```
[nginx]
name=nginx repo
baseurl=https://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=0
enabled=1
```

(3) システムパッケージを更新

```
$ sudo yum update
```

(4) Nginxをインストール

```
$ sudo yum install -y nginx
```

(5) 完了したら（Complete!と表示されたら）、インストールされたこと＆バージョン確認しておく

```
$ nginx -v
```

## メモ

参考欄に記載のリンク先の内容実施後（手順の(1), (2)）、yum update＆yum installが必要。

## 参考

* [Install Nginx | nginx.com](https://www.nginx.com/resources/wiki/start/topics/tutorials/install/)
* [nginx:download | nginx.org](http://nginx.org/en/download.html)
JavaScriptを基本からまとめてみた【2】【Chromeのデベロッパーツールでデバッグする方法】

##はじめに

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

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

##デバッグとは
『デバッグ』とは、プログラム内の『バグ』を見つけて改修する作業の事。
プログラムの実行を『デバッグ』することで現在の変数の値や、処理がどのように進んでいるのかを確認する。
機能が正常に動かない、あるいは期待する結果が得られない場合には、そこに『バグ』がある。
その『バグ』を見つけ、期待値が返ってくるように改善するのが『デバッグ』。

##バグとは
『バグ』とは、プログラムの処理を邪魔するコンピューターに入り込んだ「虫」が由来と言われており、英語で「bug」と書く。
コンピューターを正常に動かすために「虫（バグ）」を取り除く作業を『デバッグ』という。

##デベロッパーツールの表示
####(1) Chromeブラウザーでウェブサイトを表示し、[ 右クリック ] ⇨ [ 検証 ] を選択することで、デベロッパーツールが表示される。<br>※ ショートカットキーはWindowsの場合F12キー(macOSの場合はCommand＋Option＋Iキー)を入力する。
####(2) JavaScript(JS)のファイルを開くために、画面上にある [ Sources ] タブを選択する。
####(3) ここで画面左にある [ Sources ] ツリーから、対象のJSのファイルを選択するとメインエリアに選択したファイルの内容が表示される。<br>左のリンクを開き、デベロッパーツールを表示してブラウザーに読み込まれているmain.jsというJSファイルを表示する。

##ブレークポイントの設定
『ブレークポイント』とは、プログラムの実行中に任意の行で処理を止める機能の事。
この機能を使用すれば、使用している変数の現在の状態が確認できる。

####(1)　ブレークポイントを設定する
メインエリアで表示されているソースコードの行番号の部分をクリックすると、青い矢印が表示されブレークポイントが設定されます。ブレークポイントを設定した状態でプログラムの実行中にこの行を通ると実行が一時的に止まり、青い矢印を再度クリックすることで設定したブレークポイントが削除される。

####(2)　ブレークポイントは複数設定できる
ブレークポイントは複数設定でき、設定したブレークポイントはすべて画面右の[Breakpoints]パネルに表示される。パネルに表示されたそれぞれのブレークポイントは1つにつき2行の情報があり、1行目にソースのファイル名と行番号が、2行目にその行に書かれたソースコードが表示される。

##変数の確認
ブレークポイントでプログラムの実行を止めると、プログラム内の変数の現在の状態を見ることができる。
変数の状態を把握することで、処理が期待どおり動作しているか確認することは大切。
これまで変数の値を確認したい場合、ソースコードにalert()関数やconsole.log()関数を書いていたが、
このブレークポイント機能を使用すればソースコードを編集することなく、ブラウザ上で任意の変数を確認できる。

####(1) マウスを重ねれば、変数の値を確認できる
変数上にマウスポインターを乗せることで変数の値(数値や文字列など)が確認できる。

####(2)スコープ内の変数の値を、一覧で確認できる
複雑なオブジェクトの変数の詳細を確認したい場合、[Scope]パネルが役に立ち、ここに現在実行中のJSのスコープの変数が表示され,関数内のローカル変数であれば、Localツリーに表示される。

####(3)複雑な階層の変数はWatchを使おう
関数内で使用されている変数が多かったり、オブジェクトの深い階層の変数を確認したい場合は[Watch]パネルを使用する。[Watch]パネルに変数名を入力することで、変数の状態を表示できる。［+］ボタンをクリックして、監視したい変数の名前をいれる。

##プログラムのステップ実行
ブレークポイントで止まったプログラムは画面のボタンで続きを実行できる。
この機能を使えばプログラムが実行される処理の流れを確認できる。

####リジューム実行
ブレークポイントで止まっていたプログラムの続きを実行する。
複数のブレークポイントを設定することで想定通りの処理順になっているか確認できる。

####ステップイン
ブレークポイントで処理が止まっている時、その行のプログラムはまだ実行されていない状態で、ステップインを実行すると、現在の行のプログラムを実行し、1つ次の処理の行へ移動してそこでまたプログラムが止まる。プログラムが実行される処理の流れを一つ一つ確認できる。▲ステップインだと、add()関数の中の処理まで進める。

####ステップオーバー、ステップアウト
ステップインのように1行ずつ確認するのに対して、ステップオーバーとステップアウトは大まかな処理の流れを確認するのに役立つ。ステップオーバーは現在止まっている行で関数が実行されている場合に、その関数の内部の処理をすべて実行して次の行で止まる。ステップアウトは現在処理が止まっている関数内の残りの処理をすべて実行し、関数を呼び出している行へ移動する。▲ステップオーバーだと、add()関数の処理の確認を飛ばして進める。


##参考サイト
[デバッグとは何をするの？基礎知識・やり方・コツを解説]
(https://tech-camp.in/note/technology/94345/)
[Chrome開発者ツールの紹介。JavaScriptの学習にも使えます]
(https://www.youtube.com/watch?v=QEREMTKXmLA)
[ChromeのデベロッパーツールでJavaScriptをデバッグする方法（2019年版）]
(https://ics.media/entry/190517/)
メモ: fetch async awaitの例

## サンプル1

![123.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/e85cbfd5-7c07-627d-1dcc-6cbca890918b.png)

```html:sample.html
<head>
	<script>
	function $(id) {
		return document.getElementById(id);
	}
	function init() {
		$("summary.title").innerHTML = "";
		$("error").innerHTML = "";
	}
	function setData(json) {
		$("summary.title").innerHTML = json[0]["summary"]["title"];
	}
	const getIsbn = async () => {
		try {
			init();
			var url = 'https://api.openbd.jp/v1/get?isbn=' + $("isbn").value;
			const response = await fetch(url);
			const json = await response.json();
			setData(json);
			console.log(json);
		} catch (error) {
			$("error").innerHTML = error;
		} finally {
			//setLoading(false);
		}
	}
	</script>
</head>
<body>

	ISBN番号 <input type="text" id="isbn" value="978-4-7741-9690-9" />
	<button onClick="getIsbn();">ISBN検索</button>
	<li> タイトル <span id="summary.title"></span> </li>
	<li> エラーメッセージ <span id="error"></span> </li>
```

* ISBNの例
    * 978-3-16-148410-0

## Web API提供元(例)

* https://oku.edu.mie-u.ac.jp/~okumura/stat/webapi.html
Linux Server のコンソール画面を広くして視認性をアップさせる

# はじめに

Ubuntu Serverなど、コンソール画面で作業することがありますが、一行に表示できる文字の数が少なく、つらいことがあると思います。

調べてみると、デフォルトでは640x480のサイズ（もしくは800x600）とのこと。高解像度画面に慣れた今の時代の人には厳しいものがありますね。

↓低い解像度で見る`less /var/log/syslog`。折り返されてつらい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13722/a1fac56e-adbf-dfb8-a666-83d60e9a1f81.png "解像度の低いコンソール画面")

この記事では、コンソール画面の解像度を高くする方法を紹介します。

# 要約

`/etc/default/grub`に設定を追記してgrubをアップデートします。

```sh
% sudo vim /etc/default/grub

GRUB_GFXPAYLOAD_LINUX=1024x768

% sudo update-grub
% sudo reboot
```


# 設定可能な解像度を調べる

まずは、コンソール画面で使うことのできる解像度を事前に調べます。

解像度一覧はgrubで確認することができます。grubメニューが表示されないディストリビューション（Ubuntu 20.04 Serverなど）では、メニューが表示されるように設定します。

```sh:grubメニューが表示されるよう設定する
% sudo vim /etc/default/grub

GRUB_TIMEOUT_STYLE=menu   # grubメニューを表示する
GRUB_TIMEOUT=5            # 5秒間表示する

% sudo update-grub
% sudo reboot
```

再起動させたらgrubメニューが表示されますので、すかさず`c`キーを押して、command-lineモードに入ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13722/d0b6d98c-254e-0b10-e4ef-9aa419ac470e.png "grubメニュー")

次のコマンドを実行して、選択可能な解像度一覧を表示させます。

```sh:選択可能な解像度一覧を表示させる
grub> set pager=1     # ページャーを有効にする(=記号は、日本語キーボードの場合は~キーで入力できます)
grub> vbeinfo         # 解像度一覧を表示させる
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13722/491fb9cd-2cb8-c843-c236-0d84c726f71e.png "解像度一覧")

自分の環境（VMware Workstation 15.5 for Windows）のUbuntu 20.04 Serverでは、`1024x768` が最大でした。

設定可能な解像度がわかったら、希望の解像度をメモしておきます。
そしてマシンを再起動するか、Escキーを何度か押してgrubメニューからLinuxを起動させます。

# コンソールの解像度を設定する

grubの設定ファイルに、先ほど調べた解像度のうち、希望のものを書きます。

```sh:/etc/default/grubに設定を書く
% sudo vim /etc/default/grub

GRUB_TIMEOUT_STYLE=hidden  # grubメニューを表示させない（menuのままでOK）。
GRUB_TIMEOUT=5             # 0秒間表示する（5秒のままでもOK）

GRUB_GFXPAYLOAD_LINUX=1024x768  # 解像度を指定する

% sudo update-grub
% reboot
```

`/etc/default/grub`は次のようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13722/626e9fed-e5f8-e9c4-fe24-54d241c9778c.png)

再起動すると解像度が大きくなっていることがわかります。
`less /var/log/syslog`も折り返されずに表示できるようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13722/9ec0005d-2803-ff36-e4dd-d76e2ba327c9.png)
【IBM Cloud Block Storage 】複製ボリュームのTarget IPが同じでiSCSIディスカバリできない場合の対処

##ケース
Block Storageのボリューム複製方法はいくつかあるが、以下の複製を実施。
https://cloud.ibm.com/docs/BlockStorage?topic=BlockStorage-migratestorage

複製元と先で、Target IPが同じとなり、
```# iscsiadm -m discovery -t sendtargets -p <ip-value-from-IBM-Cloud-console>```
によってディスカバリ不可。
（/dev/mapper/<wwid>が認識されない。）

##対処法
```iscsiadm -m session --rescan```
にてiSCSI再スキャン実施により、/dev/mapper/<wwid>に複製先ボリュームのデバイスが出現。
Vue.js案件準備

#直前準備
##画面設計の例を見る。
https://pm-rasinban.com/bd-write?fbclid=IwAR37QXlI6ISd2udez-UqxPsEUzGd-GphGwqsvHBB-MkCC92RkEtpxGPbLzU
##設計書の書き方を今まで書いていたものをまとめる。
https://qiita.com/JoeB/items/1a32cfd0139ac067cf74
##初心者用のテキストで学んで見る。
動かして学ぶ！Vue.js開発入門 by 森巧尚 
https://www.amazon.co.jp/dp/B07KPTGZ4C/ref=cm_sw_r_tw_dp_091P68T7N24YM5A5WFN2
##言葉を覚える。
CDN
Vuecli
newVue
elオプション
dataオプション
マスタッシュ
vbind
vmodel
von
methods:
function
vif
vshow
vfor
computed
watch

##FizzBuzzやってみる。
FizzBuzzの仕様
1から100までの数をプリントするプログラムを書け。
ただし3の倍数のときは数の代わりに｢Fizz｣と、5の倍数のときは｢Buzz｣とプリントし、
3と5両方の倍数の場合には｢FizzBuzz｣とプリントすること。

```javascript

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue.js sample</title>
		<link rel="stylesheet" href="style.css" >
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
	</head>
	
	<body>
		<h2>FizzBuzz</h2>
		<div id="app">
			<ul>
				<div v-for="count in 100">
					<div v-if="count % 15 === 0">FizzBuzz {{ count }}</div>
					<div v-else-if="count % 3 === 0">Fizz {{ count }}</div>
					<div v-else-if="count % 5 === 0">Buzz {{ count }}</div>
					<div v-else>{{ count }}</div>
				</div>
			</ul>
		</div>
		<script>
			new Vue({
				el: '#app'
			})
		</script>
	</body>
</html>
```
##toDoやってみる。
###
参考
https://vuejs.org/
https://qiita.com/fumiya0414/items/8d22c23dc0bff63dcc02
注　主にqiitaの記事を参考にした。そのままでは動かなかったので
ベースは公式を参考にした。

```javascript
#app ul{
    list-style:none;
}

#app li > span.done{
    text-decoration:line-through;
}

<html>
<head>
    <link rel="stylesheet" href="index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <h2>TODO List</h2>
    <form v-on:submit.prevent>
        <input type="text" v-model="newItem">
        <button v-on:click="addItem">Add</button>
    </form>

    <ul>
        <li v-for="(todo,index) in todos">
            <input type="checkbox" v-model="todo.isDone">
            <span v-bind:class="{done: todo.isDone}">{{todo.item}}</span>
            <button v-on:click="deleteItem(index)">Delete</button>
        </li>
    </ul>
    <pre>{{ $data }} </pre>
</div>
<script src="index.js"></script>
</body>
</html>
var app = new Vue({
  el:'#app',
  data:{
    newItem:"",
    todos:[]
  },
  methods:{
    addItem:function(event){
        if(this.newItem == '')return;
        var todo = {
            item: this.newItem,
            isDone:false
        }
        this.todos.push(todo);
        this.newItem = ''
    },
    deleteItem:function(index){
        this.todos.splice(index,1)
    }
  }
})


```
##Gitを学んでみる。
git init
git add .
git commit

git diff
git diff --staged
git status
git log
git restore <ファイル名>
git restore -staged <ファイル名>

ブランチ

git branch ブランチ名

git branch 
git branch -a

git switch feature
git merge feature
git push
git pull

●git fetch
●git merge
Windowsでjpg画像のorientation情報を確認する方法

# 概要
Windows10上で、jpg画像の回転情報（orientation情報）をささっと確認する手順を備忘録として残しておく。

## orientation情報を確認する方法

jpg画像フォルダをエクスプローラで表示する。

同じ画像で向きの異なる４つの画像が格納されている。
![image05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238113/424b4c6a-0c3d-e016-b329-918c77c70afd.jpeg)


表示タブ＞詳細をクリックして、詳細表示に切り替える。
![image01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238113/2512f4e9-7de5-0581-e1f1-24a7f12105e5.jpeg)


列名を右クリックしてポップアップを表示し、一番下の「その他」を選択。
![image02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238113/516d893d-0bb2-a618-018a-d58b629ac183.jpeg)

「向き」をチェックしてOKで閉じる。
![image03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238113/ce3d3789-e017-435d-5c47-2180c90245ea.jpeg)


列の最後に「向き」が表示される。「向き」列に各画像の回転情報が表示される。おそらくだが「標準」は回転なし（0度回転）だと思う。空欄の場合、exif（orientation情報）を持たない画像と思われる。
![image04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238113/b53f78b0-ecf0-bc22-6306-aa44a39bbad1.jpeg)


## orientation情報を修正する方法

### Windowsフォトを使用してorientation情報を修正する手順

画像をフォトで開き、回転ボタン（ハードマークの右となり）をクリックする。１クリック毎に90度回転する。
![image06.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238113/f55c5bf1-cc43-fa02-1c1b-82617acb393e.jpeg)

回転させた後の状態。
![image07.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238113/720c5149-1ea5-3e0f-af6a-8013fac13f88.jpeg)

数秒経つと、画像を保存しなくても向き情報が更新される。（画像サイズが変化しないので、おそらくexifのorientation情報を直接更新しているのではと思われる）
![image08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238113/31035206-6809-a0af-e650-86cab8b50ad2.jpeg)


### Windowsフォトを使用して回転画像を保存する手順

こちらは、画像を回転させて保存するので、画像劣化が発生する。

画像をフォトで開き、ペンマーク＞編集をクリック。
![image10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238113/6786ba77-3da9-4174-6cf8-aed5c580e219.jpeg)

回転ボタンを押し、コピーを保存（もしくは上書き保存）する。
![image09.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238113/ba94165b-81aa-33a4-d424-a4cf8a447f28.jpeg)


この方法の場合、回転情報が標準（0度回転）の画像として保存される。（deg090_2.jpg）
![image11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238113/8f71a0ce-3f8f-3989-7ad8-45b6a19a853d.jpeg)


以上。


####  （メモ）exif情報は割とやっかい

　スマホやデジカメで撮影したjpg画像にはexifがついていることが多い。exifとは撮影時の条件や機種等のメタデータのことで、exifの中には画像の回転情報（orientation）も含まれている。
　最近の一般的な画像ビューワでは、exifを自動で読み込んでorientation情報に応じて回転させた画像を表示する。したがって、撮影した画像をビューワなどで閲覧するときにorientation情報を意識する必要はない。しかし、画像処理ライブラリの中にはexifをデフォルトでは読み込まないものがある。exifを意識せずに画像を加工するコードを実装すると、使用するライブラリによっては意図しない向きの加工画像が生成されてしまうことがある。
　そこで自分の場合、事前にexifのorientationを持つ画像をピックアップしてgimpなどで保存しなおす作業を行う。枚数が多い場合には、一括処理でjpg保存するコードを作成してもよいが、jpg保存するとどうしても画像が劣化してしまうため、できれば必要最小限の画像だけに対処することが望ましい。
【Terraform】ALBアクセスログ用S3バケットポリシー

# はじめに

TerraformでALBバケットポリシー書きたくなった人用の**記載例（もちろん他にも方法はあります）**です。

[参考：【AWS公式】Application Load Balancer のアクセスログ](https://docs.aws.amazon.com/ja_jp/elasticloadbalancing/latest/application/load-balancer-access-logs.html#access-logging-bucket-permissions)

# コード部分
```s3.tf
resource "aws_s3_bucket_policy" "alb_log" {
  # 対象バケットを指定
  bucket = aws_s3_bucket.alb_log.id
  policy = data.aws_iam_policy_document.alb_log.json
}

data "aws_iam_policy_document" "alb_log" {
  statement {
    effect = "Allow"
    principals {
      type        = "AWS"
      # 指定先に注意
      identifiers = ["arn:aws:iam::582318560864:root"]
    }
    actions   = ["s3:PutObject"]
    # 対象バケットを指定
    resources = ["${aws_s3_bucket.alb_log.arn}/*"]
  }

  statement {
    effect = "Allow"
    principals {
      type        = "Service"
      identifiers = ["delivery.logs.amazonaws.com"]
    }
    actions   = ["s3:PutObject"]
    # 対象バケットを指定
    resources = ["${aws_s3_bucket.alb_log.arn}/*"]
    condition {
      test     = "StringEquals"
      variable = "s3:x-amz-acl"
      values   = ["bucket-owner-full-control"]
    }
  }

  statement {
    effect = "Allow"
    principals {
      type        = "Service"
      identifiers = ["delivery.logs.amazonaws.com"]
    }
    actions   = ["s3:GetBucketAcl"]
    # 対象バケットを指定
    resources = [aws_s3_bucket.alb_log.arn]
  }
}
```

# 注意事項
コード部分の「"arn:aws:iam::582318560864:root"」について解説します。
　ALBアクセスログ保管用バケットでは、AWSが管理する特定のアカウントからの"s3:PutObject"を許可する必要があります。
　また、リージョンごとに許可するアカウントIDがことなり、場合によって改修してください。（TerraformでMapのLocal,Varableを参照でもいい気がしますがお任せします。)

今回の、「582318560864」は東京リージョンに配置した、ALBを想定して書きました。

アカウントIDについては以下参考の、リスト「Elastic Load Balancing アカウント ID」を参照しました。
[参考：【AWS公式】Application Load Balancer のアクセスログ](https://docs.aws.amazon.com/ja_jp/elasticloadbalancing/latest/application/load-balancer-access-logs.html#access-logging-bucket-permissions)

NLB編もお楽しみに。
【Python】並列処理する（備忘録）

## やりたいこと

pythonで並列処理したい。multiprocessingをインポートしたらいいらしい。サンプルを作成してイメージを図にして備忘録として残す。



## どうやるか

並列処理するため、まず以下を決める。

- 並列処理を行う関数
- 並列処理を行う関数に使う引数のリスト



今回、引数に入れた数値を10万回足して100万で割った値を出力する関数を用意した。これを1から順番に30までの数値で計算を行う。イメージとしては以下の画像の感じ。

![スクリーンショット 2021-07-18 16.04.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1583578/5b48b46b-745b-69ec-6bb1-f0e0700b2dea.png)

サブプロセスに直接使いたい関数を当てはめるのではなく、引数のリストを使ってfor文で目的の関数を回すようにした。
サンプルコードは以下の通り

```python:sample_multi.py
from multiprocessing import Process


# 並列実行したい関数
def test(a):
    b = 0
    for i in range(100000):
        b += a
    print(b/1000000)

# サブプロセス：引数リストのfor文で回して目的の関数を実行
def multi_run(tasks):
    for task in tasks:
        test(task)


if __name__ == "__main__":
    # 処理データ：[1,2,...30]
    l = range(1,31)

    # 並列処理プロセス数
    multi = 3
    
    # 並列処理用のサブプロセス格納リスト
    p = []

    # 各サブプロセスに与える引数を格納するリスト
    task_list = [[] for i in range(multi)]

    # 引数のリストを作成
    for i in range(0, len(l), multi):
        for p_num, n in enumerate(range(i, i+multi)):
            if n >= len(l):
                break
            task_list[p_num].append(l[n])

    # サブプロセスへ引数リストを割り当てて並列処理開始
    for i in range(multi):
        p.append(Process(target=multi_run, args=(task_list[i],)))
        p[i].start()
    
    # 並列処理終了待ち
    for i in range(multi):
        p[i].join()
        print('p['+str(i)+'] finished.')
```
Googleアシスタントを無効にする方法(Android 10版)

自分は普段音声入力なんて使わない人なので、なにかの拍子にGoogleアシスタントが立ち上がって、たとえば音楽聴いている時に中断されたりするのが鬱陶しいので、Googleアシスタントを無効にしてます。ところでこの「Googleアシスタントの無効化」の方法ってAndroidのバージョンが上がる毎に複雑怪奇になってませんか？
ということで、とりあえずAndroid10での設定方法をまとめておきます。

※この記事は京セラ「TORQUE G04」を基に記載していますが、機種によって表示が異なる可能性がありますのでご容赦ください。

# 概要
* [設定]
* [Google]
* [Googleアプリの設定]
* [検索、アシスタントと音声]
* [Googleアシスタント]
* [全般]
* [Googleアシスタント]をオフに変更(「Googleアシスタントをオフにしますか？」と表示されるので[オフにする]をタップ)

# 詳細
## [設定]画面→[Google]
Androidの[設定]画面から[Google]を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408176/128e5579-c50e-9be5-4217-52a522d9113c.jpeg" width=30%>

## [Googleアプリの設定]
[Google]画面が開くので、[このデバイス上のサービス]にある[Googleアプリの設定]を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408176/d43f172e-68e6-0733-0fd6-d6c2a5a5d6c1.jpeg" width=30%>

## [検索、アシスタントと音声]
[Googleアプリの設定]画面から[検索、アシスタントと音声]を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408176/ec8a7fe7-2eed-099f-42f5-6947227e840d.jpeg" width=30%>

## [Googleアシスタント]
[設定]画面が開くので[Googleアシスタント]を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408176/6660e8ad-be68-0ebb-9ce0-3d3ec5562268.jpeg" width=30%>

## [全般]
[検索の設定]画面が開くので、下にスクロースして[全般]を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408176/9c4f998e-c3f3-6dfc-5cca-b03adbf703c0.jpeg" width=30%>

## [Googleアシスタント]をオフに変更
[全般]画面の[Googleアシスタント]のスイッチがオンになっているのでオフに変更します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408176/99e94e79-f5c8-de99-4df1-e3098aa46c4b.jpeg" width=30%>

「Googleアシスタントをオフにしますか？」と表示されるので[オフにする]をタップします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408176/8e769dc2-beee-6a07-47af-72d761d2ebb3.jpeg" width=30%>

[全般]画面の[Googleアシスタント]のスイッチがオフになり、Googleアシスタントが無効になりました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408176/9f7da4d2-2782-549c-2bcc-91eb26f446c6.jpeg" width=30%>
【DB】【備忘録】論理削除、物理削除の違い、削除フラグについて


【学習前の理解度】
業務でテスト環境DBや詳細設計書を確認していく中で気になった。
データが完全に削除されるか、見かけ上削除しておいたことにしておきデータは残しておく、の違いだと思っていた（理解が曖昧）。

★論理削除とは

・実際にはデータを削除せず、フラグ等をつけて削除されたことにすること（論理的に削除する）
→「削除されたものとみなす」だけで、実際にハードディスク上やDBにはデータは残っている。

◎メリット
誤って削除した場合に簡単に戻せる。

◎デメリット
実際にデータが削除されず、容量の圧迫や性能低下につながる
管理用カラムを追加する必要がある
ゴミが残ってしまう

★物理削除とは

・実際にDBから対象データを完全に削除すること。
DBからdeleteコマンドで削除する。

◎メリット
ゴミが残らず、管理がしやすい
管理するカラムがないので、実装のときにバグが出にくい

◎デメリット
誤って削除した場合にはデータの復元が手間（バックアップから戻す必要があるなど）

【まとめ】
・違いとしてはシンプルで最初の理解と大きな相違はなかった。
・物理削除を用いてDB管理している案件や現場の経験がないため、論理削除と物理削除それぞれのメリット・デメリット
は経験してみたい。
Pagespeed Insightで90点以上取ってみた

# 承前
aws lightsailでwordpressの自サイトを置いてたんだけども
データベースがぶっ飛んだので、記事系とかはそれぞれqiitaやtumblrやsnsでやればいいや。
静的ベージ1枚でそれらのリンクを貼ればいい。
そういうことになった。

# 諸々準備
## minify
jsのminify uglify-js - npm https://www.npmjs.com/package/uglify-js
cssのminify clean-css - npm https://www.npmjs.com/package/clean-css

画像のwebp化ツールもnpmでインストールしたかったが、
cwebp-cli や webp-converter-cli は 上記と相性が悪いのか

```
17 vulnerabilities (1 low, 8 moderate, 8 high)

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
```
系のアラートが出るので

```
brew install webp

```
でインストールできるcwebpを使う。
cwebp  |  WebP  |  Google Developers https://developers.google.com/speed/webp/docs/cwebp

最終的な packages.json は以下のような感じ

```
{
  "name": "tknr.com",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://tknr@github.com/tknr/tknr.com.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/tknr/tknr.com/issues"
  },
  "homepage": "https://github.com/tknr/tknr.com#readme",
  "dependencies": {
    "clean-css-cli": "^5.3.0",
    "npm-check-updates": "^11.8.1",
    "uglify-js": "^3.13.10"
  }
}

```

minify実行はこんな感じのshellを回す

```
for js in `find src/assets/js/ -name *.js | grep -v min.`;do
	dst=${js/src/public}
	dst="${dst%%.js}.min.js"
	npx uglifyjs --compress --mangle -- ${js} >| ${dst}
done

for css in `find src/assets/css/ -name *.css | grep -v min.`;do
	dst=${css/src/public}
	dst="${dst%%.css}.min.css"
	npx cleancss ${css} >| ${dst}
done
```

## 静的ページのCDNホスティング利用
DNS管理やSSLやCDNフロントエンドとしてcloudflareを使用していたので以下を使う。タダだし。

Jamstackホスティング決定版? Cloudflare Pagesを試してみたよ！ | DevelopersIO　https://dev.classmethod.jp/articles/cloudflare-pages/

設定は以下のような感じ。
![cloudflare_pages.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369323/594914a0-f079-949f-db46-cb01de8c15c1.jpeg)


## javascript等の読み込み処理のチューニング
以下を参考に粛々と。
AdSenseの広告を遅延表示させてスコア改善とページ表示スピードを高速化 - QWERTY.WORK　https://qwerty.work/blog/2020/05/adsense-speedup-lazyload.php

# 結果発表
PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=ja&url=https%3A%2F%2Ftknr.com%2F&tab=mobile

![FireShot Webpage Screenshot #004 - 'PageSpeed Insights' - developers.google.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369323/d98ac222-3d0e-0329-18a9-7df2ce0a3e12.png)

いーじょう!!(厚切りジェイソン)
【ETL】ETLツールの業務知識

1.はじめに

ETLツールとは、組織の内外に散在するデジタルデータを抽出・収集（Extract）し、用途に応じて変換・加工（Transform）したうえで、その先にある格納先に有用な情報として配信・送出（Load）してくれる、ITプロダクトのカテゴリーの一つ。
（参考：https://waha-transformer.com/etl.html）

Extract:引き抜く、切り抜く（抽出）
Transform:変身、変ずる（変換）
Load:載せる、積み込む（格納）


2.具体的な特徴

・大量のデータの変換、加工や抽出を得意とする。
・データ処理が高速で行える。
・メタデータ管理を行うことができる。

3.ETL導入による期待効果

（例）金融機関の大規模データDB構築、各対象者データを通知書に出力する、等

★メリット
・プログラムレス開発（GUIを用いる）、並列処理の採用
・生産性の向上、短期間で大規模データ処理が可能になる。
Atcoder ABC210 Python C問題振り返り

# 前書き
今回もC問題でACできなかったので振り返ります。
difficulty的には茶色より少し低いくらいなので、このくらいのレベルを安定して解けるようになりたいもんです（笑）。

# 自分の提出（TLE）
```python:
import collections
N,K = map(int,input().split())
C = list(map(int,input().split()))

ans = []

for i in range(N-K+1):
  l = C[i:i+K]
  a = collections.Counter(l)
  c = len(a)
  ans.append(c)

print(max(ans))
```

# 修正後の提出（AC確認済み）
```python:
import collections
N,K = map(int, input().split())
C = list(map(int, input().split()))
 
d = {}

cnt = []

for i in range(K):
  d.setdefault(C[i],0)
  d[C[i]] += 1

ans = len(d)

for i in range(K, N):
  d.setdefault(C[i], 0)
  # 右側の差分
  d[C[i]] += 1
  # 左側の差分
  d[C[i-K]] -= 1
  # もし要素数が0になったら、辞書型から削除
  if d[C[i-K]] == 0:
      del d[C[i-K]]
  ans = max(ans, len(d))

print(ans)
```

# 感想
なんとなくの方針は立てられるようになってきたのですが、高速化の技術とか考え方がまだまだですね。
差分だけを計算するところで高速化できる。このメソッドは色々な問題でも使えそうだなと感じました。
解説にも載っていたのですが、区間の右端を1つ動かしたときに、条件を満たすように左端を右に動かして調整するアルゴリズムを尺取り法というらしいです。
個人的には辞書型が全然使いこなせていないというか、理解が浅いなと気づかされました。どんどん使って、理解を深めていきたいです。
Cubeのインスタンス化を理解して実装する（Unity2019.4.13f）

# 本記事の目的
インスタンス化を理解して、Unityで実際に動かすとこまで行う。
動作イメージ↓
![ex10.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1043128/8a546afa-7d37-c755-324a-becb786e2ad3.gif)

# インスタンス化とは？
こちらを参考に↓
https://e-words.jp/w/%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%83%B3%E3%82%B9%E5%8C%96.html#:~:text=%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%83%B3%E3%82%B9%E5%8C%96%E3%81%A8%E3%81%AF%E3%80%81%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88,%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%83%B3%E3%82%B9%E3%80%8D%EF%BC%88instance%EF%BC%89%E3%81%A8%E3%81%84%E3%81%86%E3%80%82


# なぜインスタンス化が必要なのか？
こちらがとってもわかりやすいです↓
https://qiita.com/kn2018/items/f99f62cabfd31667b055

# 実装例

![ex09.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1043128/1a19e6d9-cae0-3893-5603-ad6caaca9e9e.gif)

スクリプトは以下の通り

```instance_cube.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class instance_cube : MonoBehaviour
{
    public float timeOut=1.0f;
    private float timeElapsed;
    public GameObject cube;

    void Update()
    {
        //timeElapsedに経過時間(Time.deltaTime)を加算 
        timeElapsed += Time.deltaTime;
        if (timeElapsed >= timeOut)
        {
            //InstantiateでGameObject生成 
            //Instantiate(複製するGameObject,位置,回転)の順番で記載 
            Instantiate(cube, new Vector3(Random.Range(-5.0f, 5.0f), Random.Range(-5.0f, 5.0f), Random.Range(-5.0f, 5.0f)), Quaternion.identity);
            //timeElapsedを0.0fに戻す 
            timeElapsed = 0.0f;
        }
    }
}
```
# 親オブジェクトの下にインスタンス化する

![ex13.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1043128/1f4cd0a8-c480-4b19-84d6-619e89074ffa.gif)


```instance_cube_under_parent.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class instance_cube_under_parent : MonoBehaviour
{
    public float timeOut=1.0f;
    private float timeElapsed;
    public GameObject cube;
    public GameObject parent;

    void Update()
    {
        //timeElapsedに経過時間(Time.deltaTime)を加算 
        timeElapsed += Time.deltaTime;
        if (timeElapsed >= timeOut)
        {
            //InstantiateでGameObject生成 
            //Instantiate(複製するGameObject,位置,回転)の順番で記載 
            Instantiate(cube, new Vector3(Random.Range(-5.0f, 5.0f), Random.Range(-5.0f, 5.0f), Random.Range(-5.0f, 5.0f)), Quaternion.identity, parent.transform);
            //timeElapsedを0.0fに戻す 
            timeElapsed = 0.0f;
        }
    }
}
```

# 最後に
これでインスタンス化ができましたね。
よく使うjQueryメソッド

学習のアウトプットとしてよく使うメソッドをまとめます。

### val（）
HTMLのinputやselectなどのvalue属性の値を取得したり設定したりできる。
value属性が使えるタグは、以下7つ。
button, data, input, li, meter, option, progress

```html
<input type="radio" value="name">太郎
```
```javascript
//nameが取得できる
$('input').val();

//valueを name1 へ変更できる
$('input').val('name1');
```

### attr（）
HTML要素のid属性やclass属性の値を取得や変更できる。

```html
<div id="content"> </div>
```

```javascript
//content が取得できる
$('div').attr('id');

//content を area に変更できる
//第2引数に変更したい値を入れる
$('div').attr('id', 'area');
```

### prop（）
フォーム関連のHTML要素に対して、値がない属性のプロパティを扱う。
boolean(true, false)で設定や変更が可能。
例：checked, selected, disabledなど

```html
<input type="text" class="title">
```
```javascript
//titleクラスのテキストを無効化する（操作できないようにする）
$('.title').prop('disabled', true);

//titleクラスのテキストの無効化を解除する（通常通り操作できるようにする）
$('.title').prop('disabled', false);
```

### text（）
HTML要素のテキストを取得や変更が可能。

```html
<p class="content">テキストを取得できます</p>
```

```javascript
//「テキストを取得できます」 が取得できる
$('.content').text();

//「テキストを変更します」 が取得できる
$('.content').text('テキストを変更します');
```
Epic Games Launcherにサインインできずに困っている方へ[備忘録]

## あらまし
先日，[Overcooked!2](https://www.epicgames.com/store/ja/p/overcooked-2)が無料DL期間だったためダウンロードしようと思いました．
EpicGamesStoreでライブラリに追加はできたのですが，起動するときに必要なEpicGamesLauncherでサインインが完了しませんでした．．．

## 結論
一通り公式サイトに載っていることを試してもだめだった私ですが，ユーザ変数にある'http_proxy'が邪魔をしていたみたいでそれを消したらうまく動作しました．

https://www.epicgames.com/help/en-US/epic-games-store-c73/launcher-support-c82/how-do-i-identify-and-disable-a-proxy-server-so-i-can-connect-to-the-epic-games-launcher-a3610

![スクリーンショット 2021-07-18 152457.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528590/3e36a85b-8b94-033d-7180-549ed54d2f73.png)
値はあえて消してあります．
## プロキシは切ったはずなのに
https://www.epicgames.com/help/ja/c90/c91/epic-games-launcher-a3510

https://www.epicgames.com/help/ja/epic-games-c73/c82/epic-games-launcher-a2676

これらのページを見ながら設定を変更しながら確認していました．
おきまりのファイアウォールも外し，ポートのブロックの解除などを行いましたがだめでした．
プロキシサーバに関しては使う場合もあるので
Widowsの設定＞ネットワークとインターネット＞プロキシ＞手動プロキシセットアップにはプロキシを保存していましたが，オフにしていました．

![スクリーンショット 2021-07-18 152243.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528590/3bb46867-73a6-7ca5-a066-e74b5c14e922.png)

それで大丈夫と思って
`VPNとプロキシサーバ
VPNとプロキシサーバは絶対に使わないでください。無効にしない場合、当社で解決できない問題の原因となります。プロキシサーバーの無効化の方法についてはこちらの記事を参照してください。`
を守れていると思っちゃったんですね～．

以上
明日使える(?)ムダ知識をあなたに~Python3知られざる機能~

# はじめに
諸事情からpythonの [Full Grammar specification](https://docs.python.org/3/reference/grammar.html)を読んでいたら、普段雰囲気でなんとなく使っていたpythonのあまり目にしない機能をいくつか見つけたので紹介してみます。

明日から使える・・・かどうかはわかりませんが、明日同僚にどや顔するくらいの使い道があること間違いなし！

紹介順には特に意図はありません。

# 1. PEP570 Python Positional Only Parameters [Python 3.8~]

```python
>>> def id(x): return x
...
>>> id(2) # (i)
2
>>> id(foo=2) # (ii)
2
```

実は、上のように定義されたpythonの関数`id`は引数を(i)のようにして渡すこともできるほか、(ii)のようにラベル付きで渡してあげることもできます。このような渡し方ができるパラメータはそれぞれpositional parameter, keyword parameterと呼ばれます。関数の定義時にデフォルト値を与えずに定義したパラメータについてもkeyword parameterとして扱うことができる、という時点で私の知らない話だったのですが、実はさらに、positionalとしてしか使えないパラメータ、keywordとしてしか使えないパラメータを指定することができるようです。これらは、positional/keyword-only parameterと呼ばれます。例を見てみましょう。

```python
>>> def id3(x, /, y, *, z): return x, y, z
...
>>> id3(1, 2, z=3)
(1,2,3)
>>> id3(1, y=2, z=3)
(1,2,3)
>>> id3(x=1, 2, z=3)
SyntaxError: positional argument follows keyword argument
>>> id3(1, 2, 3)
TypeError: id3() takes 2 positional arguments but 3 were given
```

`/`の左側にあるパラメータはpositional-only parametersとなり、keyword parameterとして使うことはできません。他方、`*`の右側にあるパラメータはkeyword-only parametersとなり、positional paramterとして使うことはできません。したがって、上の例のように、yは単に2を与えても、`y=2`のような形で与えても機能しますが、`x`と`z`についてはそれぞれpostional、keyword parameterとして与えないとエラーになる、という訳です。

# 2. PEP3132 Extended Iterable Unpacking [Python 3.0~]

関数型言語なんかだと、パターンマッチの中でリストの先頭とそれ以外を別の変数に束縛したりとかしますよね。実はpythonでも似たような事ができます。それが、Extended Iterable Unpackingです。

```python
>>> a, *b = [1,2,3]
>>> a
1
>>> b
[2,3]
```

例を見てもらえればわかる通り、変数へのiterableの代入時にスター(`*`)を付けた変数に対して、「残りの部分」を代入できるような構文です。

PEP3132の例をみると、もう少し柔軟なこともできるようです：

```python
>>> a, *b, c = range(5)
>>> a
0
>>> c
4
>>> b
[1, 2, 3]
```

# 3. PEP572 Assignment Expressions [Python 3.8~]
議論を呼んだ(そして最終的にはPython作者のGuidoを優しい終身の独裁者から引退させた)らしい問題の拡張。

pythonでは代入は「文」であるためC言語などで見るような、次のようなコードは書けません(でした)

```C
while(x = 1) {
  //do something
}
```

しかし、「式」としての代入もあったほうが便利だろうというのがこちらの提案。次のようなコードが書けるようになりました。

```python
while(foo:=False):
  print("You'll never see me.")
```

~~・・・Guido氏のBDFL引退騒動にまで発展した割に、僕の周りだとあんまりこの演算子が使われているところを見ないような・・・~~

# 4. 関数引数末尾のカンマ

pythonでは次のように、リストやタプルの末尾に余計なカンマが付いていて良い、というルールになっているのは皆さんご存じかと思います。

```python
>>> a = [1,2,]
>>> a
[1, 2]
>>> b = ("a", 2,)
>>> b
('a', 2)
```

実は、関数定義や呼び出しでの引数にも末尾に余計なカンマが付くことを許しています。

```python
>>> def hoge(x,):
...   return x
...
>>> hoge(2)
2
>>> len([1,2,],)
2
```

# 5.
以下追記予定
開発者用セットアップ(MacBook Pro)

## 備忘録
PC購入後、開発を開始するためには各種ソフトウェアをインストールする必要がある。
インストールし忘れがあると面倒なため、メモとして残しておく。随時追記予定。

**スペック**
MacBook Pro (13-inch, M1, 2020)

参考にしたサイト, およびダウンロードページ

1. google chrome

https://www.google.co.jp/chrome/

1. git

https://tracpath.com/bootcamp/git-install-to-mac.html

1. docker

https://docs.docker.com/desktop/mac/install/

https://fixel.co.jp/blog/docker-m1mac/

1. Visual Studio Code

https://qiita.com/watamura/items/51c70fbb848e5f956fd6

1. Xcode

https://apps.apple.com/jp/app/xcode/id497799835?mt=12

1. Homebrew

https://webkaru.net/dev/mac-homebrew-install/

:::note info
Xcodeは容量が12GB近くあるため、ダウンロードに非常に時間がかかることがある。
夜中のダウンロード推奨
:::
Unity上で動作するライブコーディング環境を作成してみた。

### 概要
Unityで動作するライブコーディング環境を作ってみました。
現在α版的な位置づけですが、割と形になってきたので、忘れる前に技術的な仕様をここに記すものです。
開発動機等は別の機会にして、この文章では「どうやって実装しているか」を主に記述します。
機能の追記があれば別途書いていくのもいいかな、と考えてます。

### 動画
まずは動いてる所を見てください。
https://www.youtube.com/watch?v=iMFY0INGOWE

### 特徴
- 現状シンセサイザー4音・サンプリング4音を同時発音が可能（もっと多くできる）
- Miniscriptという言語を利用して楽曲を作成可能
- リアルタイムにコードを変更して楽曲を作成可能

### 内部の仕組み（概要）
大きな要素が以下の4点。

* テキスト処理（＝エディタ）
* 言語解釈・管理エンジン
* オーディオエンジン
* サウンドサーバ

あとは細かいモジュールを多数そろえてます。

### テキスト処理

以下のアセットを利用。
https://assetstore.unity.com/packages/tools/gui/ingame-code-editor-144254
というよりもUnity上でテキストエディタ機能を利用できそうなのがこれしかありません。
このアセットに改修を行い各種機能を実装してます。
内部ではInputFieldを利用して、最終的にハイライトを別のTextに転送の上記述しているという形式です。
このため、EventSystem上ではInputFieldにフォーカスを合わせるようにし、以後他のボタンを押す場合、フォーカスをInputFieldに返す形にしています。
これでコンパイルを行ったりする場合もマウスでフォーカスをあわせたりする事無くプログラムを打ち込める環境を実現しています。

テキストについてはTextMeshProを利用しているため割と高速に描画されます。
フォントは以下を利用し、Unity上で利用可能なフォントとして生成。
https://github.com/yuru7/HackGen#%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB

### 言語解釈・管理エンジン
言語はMiniscriptを利用。
https://miniscript.org/

Unityへの組み込みが想定されており、stringを言語エンジン側に渡すだけで各種処理や連携が可能です。
以下要素を取得できるようにしました。

- 譜面
- ボリューム
- 波形プリセット
- その他各種パラメータ

エディタからソースコードを取得し適時コンパイル可能。
その際、ソースコードから譜面データ等各種パラメータを取得できるようにしました。

パラメータは必ずリストで持つ形とし、
再生タイミングに応じて、リストの要素数で分割した値を渡す処理を実装。
（ジャグ配列の場合、子要素として処理）

譜面の処理については、以下の対応が可能となります。

- 要素数が2個なら、ループを2分割し値を変更可能
- 要素数が3個かつ3個目の要素数が4個の場合、3個目だけ更に4分割可能

ここらへんは動画を見るのがわかりやすいです。

元々TidalCyclesという言語の仕様に影響を受けており、Miniscriptで同様の処理ができないか？と考えて実装してみました。

また、言語解釈・管理エンジンにてキーボード制御も管理しており、このモジュールを各オーディオエンジンが適時確認し、再生制御を行っています。

### オーディオエンジン
ここで指すオーディオエンジンとは、「ループの時間管理・利用しているシンセサイザー・サンプリングの再生状況等を司るモジュール」と定義します。
オーディオエンジンは、UnityのOnAudioFilterRead関数上に作成してます。
各種ミキサーを通す形でシンセ・サンプリングパートごとに再生タイミングを制御および波形の書き込みを行ってます。
(言ってしまうとDSP処理全般を行っていることになります）

データは以下の構成。

- **サウンドキュー・シーケンス登録モジュール**という2要素を用意
- **サウンドキュー**の機能・・・キューに入った譜面を再生すること。
- キューには「譜面番号・再生時間リミット・再生済みカウンタ」を格納
- **シーケンス登録モジュール**の機能・・・シーケンサデータは言語解釈・管理エンジン部分にて保持
- シーケンス登録モジュールではループの長さや再生位置を保持
- サウンドキューとは別にループの長さ等を管理
- サウンドキューにおいて、再生済みカウンタが再生時間リミットを超えた場合に起動
- シーケンサデータから現在のループ位置における譜面番号を取得し、サウンドキューに情報を格納する
- 上記2モジュールを循環させてサウンド処理を成立させる

シンセサイザーについては毎回波形を生成しています。
発音形式は波形メモリ音源という形式。
これは、矩形の集まりと考えて有限的な要素を複数持ち、オシレータとして運用する音源。
リストとの相性は良いため自分で波形を書き込むことが可能です。

その他エンベロープやフィルタも実装済み。
エンベロープはADSR、フィルタはLPF/HPF/BPF等。
いずれもサウンドキューと連動し動作します。

シンセサイズも最初波形を生成するのにCPU負荷がかかって各種処理が間に合わないのでは？と考えましたが、Editor上でのIL処理の時点でも悪くない数値が出てますし、IL2CPPを利用すると更に動作が早くなるため、それほど悪くない選択肢かな？と思いました。

サンプリングについては、以下の機能を実装済みです。

- サンプリング再生
- サンプリング波形の途中再生
- サンプリングの逆再生（途中再生も可能）

これらはシーケンスの指定だけで利用可能。
更に各種パラメータを指定することで、多様な演奏が可能になっています。

今後ユーザ波形の読み込みや波形の収録を多く行おうと思いますので、
演奏として楽しいものになるかと思います。

### サウンドサーバ
波形については、現状のバージョンでは以下の管理を行っています。

- 1個のGameObjectで管理
- 波形はfloat配列にすべて格納
- アプリケーション開始時にAudioClipからfloat配列にデータを変換し保持

よって、作成中のアプリケーションでは、AudioClipではなく、オーディオエンジン上でサンプリング波形の合成を行い再生しています。

当然サンプリングレートの違いが生じるため、基本的に48000Hzに決め打ち。
ユーザ波形も読み込めるようにする予定ですが、これも48000Hzに固定予定としています。

サンプリングレートの切り替えに対応できるかは検討課題とします。

### 最後に
当該ライブコーディングツールは現在鋭意開発中です。
よかったら使ってみてください。（ダイマ）

(itch.io)
https://machiaworx.itch.io/recode-livecoding
(Booth)
https://machiaworx.booth.pm/items/3007869
docker環境でホストOSのローカルホストへ接続する方法

### やろうとしたこと
ローカル開発環境でDockerを使用しており、APIの開発を担当することになった。
APIから外部業者のAPIを呼び出すが、外部業者のAPIの提供がまだであったため、動作確認を行うためにホストOSでモックサーバを動かし、ホストOSのローカルホストへ向けてAPIのリクエストを投げて動作確認を行うことが目的。

### 問題点
外部業者のAPIと仮定して起動したホストOSのモックサーバへのリクエストでエラーが発生した。
```Failed to open TCP connection to localhost:8000 (Cannot assign requested address - connect(2) for "localhost" port 8000)```
ホストOSからlocalhost:8000へ向けてAPIを叩くと通るので、Docker環境からのみ接続できない状況となっている。

### 解決までに試したこと
- 下記2点の状況を踏まえ、トライ＆エラーの時間を短縮するためにDocker環境へ入って操作することにした
  - .envへAPIのエンドポイントを定義していた（定義を変更したらコンテナを再立ち上げしていた）
  - 外部業者を想定したAPIの実行でエラーとなるため、Docker環境からホストOSへ向けたAPIだけ実行できればよい
- Docker環境へ入って状況再確認
  - ```docker-compose exec {コンテナ内のイメージ名} bash```でdocker環境へ入る
  - 対象となるAPIのリクエストを投げて同じエラーとなることを確認、今回はGETSメソッドだったのでオプションは不要
    - ```curl http:/localhost:8000/:endpont_url/?Code=1234567890``` ※これはNGパターン
- 解決方法へたどり着くまで、外部業者のAPIを想定したモックサーバへ向けてAPIリクエストを投げた

### 解決方法
- docker desktop の環境であれば、```localhost```の代わりに```host.docker.internal```を指定する（特別なDNS名の指定）
  - 今回の例では```curl http:/host.docker.internal:8000/:endpont_url/?Code=1234567890```と実行して正常なレスポンスを受け取った
  - Docker Desktop環境ではmac、WIndowsとも対応している

    | ホストOS |                               公式ドキュメントのURL                               |
    | -------- | --------------------------------------------------------------------------------- |
    | mac      | https://matsuand.github.io/docs.docker.jp.onthefly/docker-for-mac/networking/     |
    | Windows  | https://matsuand.github.io/docs.docker.jp.onthefly/docker-for-windows/networking/ |


### 周辺情報
- 特別なDNS名を指定する以外にも解決方法はあるようです
    - [Dockerのコンテナの中からホストOS上のプロセスと通信する方法](https://qiita.com/ijufumi/items/badde64d530e6bade382)
- docker desktop 以外の環境とは？
  - Dockerの入手ページの記載内容からすると、Linux版はDesktop版ではないようです
     - https://docs.docker.jp/get-docker.html
  - 本番環境を構築するときに使用するもので、ホストOSを参照することはまれなケースのはず
sls invoke で No module named '〜'

## 環境

すべて(3台とも) macOS 11.4(Big Sur) ※当時最新

## 経緯

ローカルでserverlessのテストをしたくて sls invoke しているのに、挙動がおかしい。
No module named '〜' と言われているモジュールはインストール済なのに、エラーになる。
複数のマシンで検証した。 serverless.yml は同一。

- 動かない方

```
% SLS_DEBUG=* sls invoke local -f some-function -p test.json

(略)
Serverless: Load command test
Serverless: Load command dashboard
Serverless: Invoke invoke:local
Serverless: Invoke package
Serverless: Invoke aws:common:validate
Serverless: Invoke aws:common:cleanupTempDir
Serverless: Packaging service...
Serverless: Excluding development dependencies...
Serverless: Excluding development dependencies...
Serverless: Excluding development dependencies...
Serverless: Invoke aws:package:finalize
Serverless: Invoke aws:common:moveArtifactsToPackage
Serverless: Building Docker image...
START RequestId: c05aed50-9250-1e9a-cce0-73e5d255e79b Version: $LATEST

[ERROR] Runtime.ImportModuleError: Unable to import module '***': No module named '***'


{"errorType":"Runtime.ImportModuleError","errorMessage":"Unable to import module '***': No module named '***'"}
```

`Serverless: Invoke invoke:local` までで終わるはずが、なぜかパッケージしだしてる……？

- 動く方

```
Serverless: Load command studio
Serverless: Load command dev
Serverless: Invoke invoke:local

(動いているところは略)
```

バージョンがかなり違った。3台中2台動かない。

- 動かない方(1)

```
Framework Core: 1.56.1
Plugin: 3.2.1
SDK: 2.2.0
Components Core: 1.1.2
Components CLI: 1.4.0
```

- 動かない方(2)

```
Framework Core: 1.56.1
Plugin: 3.8.4
SDK: 2.3.2
Components Core: 1.1.2
Components CLI: 1.4.0
```

Framework Coreは同じだが、PluginとSDKはかなり違う。

- 動く方

```
Framework Core: 1.83.2 (local)
Plugin: 3.8.4
SDK: 2.3.2
Components: 2.34.9
```

動かない方はずいぶん古いので、バージョンアップした。

```
% npm update serverless

(略)

   ┌───────────────────────────────────────────────────┐
   │                                                   │
   │   Serverless Framework successfully installed!    │
   │                                                   │
   │   To start your first project run 'serverless'.   │
   │                                                   │
   └───────────────────────────────────────────────────┘

+ serverless@1.83.3
```

動く方より新しくなった。

```
% sls -v
Serverless: Running "serverless" installed locally (in service node_modules)
Framework Core: 1.83.3 (standalone)
Plugin: 3.8.4
SDK: 2.3.2
Components: 2.34.9
```

Components Core と Components CLI が Components 1行になった。

再度、実行してみる。

```
Serverless: Load command studio
Serverless: Load command dev
Serverless: Invoke invoke:local

(動いているところは略)
```

うーん、動いたので嬉しいけど、何か釈然としないなぁ……

## 結論？

バージョンが古いようなら、新しくすると良いかも🍙
メモリの話

# はじめに
- プログラムを動かしたときに途中停止してしまう、異常終了しているという現象が起きた。
- 異常終了時のメトリックの状況を見ると、メモリ使用率が90%ほどになっていたことがわかった。
- 「どこでメモリを使用しているのか」を調べるために、プログラムの各動作の切れ目でのメモリ使用状況がどのようになっているのかをログで出力し、状況を特定しようとした。
- このとき、「物理メモリだけじゃ状況わからないからいろいろ見ようね」と言われて詰まった。これが今回の話につながる。

# メモリの話
## メモリというのはどういうもの？
- コンピューター処理に使うデータやプログラムを一時的に格納する場所

## メモリと一口にいっても
- コンピューターは実際に搭載している「物理メモリ」に加えて、「仮想メモリ（ページメモリ）」というのを用意している。
- 物理メモリがいっぱいになるとコンピューターは動けなくなるので、仮想メモリはストレージを一部つかって予備メモリとして動かせるようにしている。
- ただし、ストレージは読み書きが遅いので、仮想メモリを使う状況になると処理がめちゃくちゃ遅くなる。これがページアウト。

## ガベージコレクション
- 物理メモリと仮想メモリの状況だけでは、処理落ちの原因はわからない。アプリケーション実行によりメモリがどんな感じで確保されてどんな感じで解放されていったのか知る必要がある。
    - 一時的にメモリがぐん！と上がっているというのなら一つめちゃくちゃ重い動作があってそれのせいでメモリが枯渇しているということかもしれないが、だんだん使用率があがっている、ということであればガベージコレクションが間に合っていないのかもしれない。
- ガベージコレクターというのは、メモリの管理を自動で行ってくれる機能。使用したいときにアドレス空間を予約して、使用しなくなったらメモリを自動で解放してくれる。C言語とかだとメモリ確保解放を明示的にしなければいけないが、C#はこのあたり自動でやってくれる。
    - https://docs.microsoft.com/ja-jp/dotnet/standard/garbage-collection/fundamentals
- ガベージコレクターのアルゴリズム
    - https://docs.microsoft.com/ja-jp/dotnet/standard/garbage-collection/fundamentals#memory-release
    - ガベージコレクターのパフォーマンスを最適化するため、C#においてマネージドヒープはオブジェクトの有効期間に応じてG0、G1、G2の3つの世代に分けられる。
        - マネージドヒープ：アプリケーション用に確保されたメモリの仮想アドレス空間
    - 各世代の詳細は以下のとおり
        - G0
            - 新しいオブジェクトができたときに最初に格納される場所。有効期間が短いオブジェクトが格納される。
                - なお、85KB以上の大きなオブジェクトは別途大きなオブジェクトヒープ（LOH）に移され、G2の一部として論理的に収集される。
            - 一番よくGCされる。
            - G0でごみでないと判断されたものは、G1に昇格される。
        - G1
            - G0とG2とのバッファー的な役割を果たす。
            - G0のガベージコレクションでメモリ確保が間に合わなかった場合、G1のガベージコレクションを行う。
            - G1でごみでないと判断されたものは、G2に昇格される。
        - G2
            - 有効期間が長いオブジェクトが格納される。最後の砦。
            - その後のコレクションで到達不能であると判断されるまで、G2に残る。
- ガベージコレクションが間に合っていない、という状況だとして、どの世代にどれくらい物がたまっているかにより対応策がかわってくる。