OmniAICreator/Qiita-1.07M huggingface dataset:
LaravelのVSCodeを使った開発で、保存時にコードを自動整形する

チームで開発する場合はもちろん、個人で開発する場合にもインテンドがしっかり入っていない場合や、「{」の位置が統一されていないと書き方の良し悪しにかかわらず見づらいコードになってしまいます。コードの自動整形機能は開発の早い段階で導入しましょう。

##開発環境
言語：PHP
エディタ：VisualStudioCode(以下VSCodeと呼ぶ)

##formatterの拡張機能を入れる

phpのformatterには`PHP Intelephense`がおすすめです

拡張機能から`PHP Intelephense`を選択、[**Install**]
![スクリーンショット 2021-05-22 17.36.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1066052/15b57583-0671-7304-2e33-e75f624590e6.png)

この状態だと、フォーマットを行うにはファイルを開き
`Shift` + `Command` + `F`を入力する必要があります。

ファイル保存時に、この操作を有効にするにはもう１ステップ必要です。

##VSCode側で保存時に自動整形をする

Macのツールバーから[**Code**]→[**基本設定**]→[**Settings**]を選択

![スクリーンショット 2021-05-22 17.35.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1066052/c1def18b-8a6c-6c5b-deb7-d6e72c411933.png)

[**Editor:Format On Save**]のチェックを入れる

![スクリーンショット 2021-05-22 17.36.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1066052/fe003f0f-a72b-257e-de8a-18c30304cfe6.png)

これで有効になっています。
phpファイルを開き、`Command`+`S`で自動整形されることを確認してください。
もし働かない場合には、VSCode側の読み込みの可能性があるので、VSCodeの再起動をお願いします。
標準パッケージマネージャを使ってVimにSnipMateを入れる

毎回忘れるので備忘録です。

# 環境
Arch Linuxでやりました。
Linuxなら同じだと思います。
Vimのバージョンは8.2です。

# ダウンロード
gitからダウンロードします。表題の通り、サードパーティ製のパッケージマネージャは使わず、Vim8で使える標準のパッケージ機能を使います。（[Vim 8.0 Advent Calendar 6 日目 パッケージ](https://qiita.com/thinca/items/cdc0169e3bcc5a55a5ba)を参考にしました。）

```
mkdir -p ~/.vim/pack/packs/start
cd ~/.vim/pack/packs/start
git clone https://github.com/tomtom/tlib_vim.git
git clone https://github.com/MarcWeber/vim-addon-mw-utils.git
git clone https://github.com/garbas/vim-snipmate.git
```

# スニペットファイル作成
スニペットファイルを作成します。拡張子.snippetsというファイルを作成すると、その拡張子に対応したスニペットを作成できます。C言語ならc.snippets、pythonならpy.snippetsといった感じです。

```
mkdir -p ~/.vim/snippets
cd ~/.vim/snippets
vim c.snippets
```

次に、c.snippetsの中身を書きます。スニペットファイルの書き方についてはSnipMateのドキュメントSnipMate.txtにいろいろ書いてあります。今回は以下のようにしてみました。空白ではなくタブ文字を用いるので注意してください。

```c.snippets
snippet hello
	#include<stdio.h>
	
	int main(void){
		printf("Hello world!\n");
		return 0;
	}

snippet for
	for(int $1 = 0; $1 < $2; $1++){
		$0
	}
```

上記のファイルでは、helloと入力した後にTabキーを押すとHello world!と表示するプログラムを挿入し、forと入力した後にTabキーを押すとfor文を挿入するように設定しています。タブストップやミラーを設定することもでき、forのスニペット挿入後にTabキーを押すと、\$1、\$2の順で入力することができます。入力後のカーソル位置は\$0の場所となります。

# パーサ変更
デフォルトだと古いSnipMateパーサを使うので、以下をvimrcに追記して新しいバージョンのパーサを使うようにします。

```
let g:snipMate = { 'snippet_version' : 1 }
```

# 完了
私の環境では以上で動きました。スニペット系の他のプラグインは使ったことないんですが、何を使うのが普通なんですかね。私はSnipMateで満足しているので、しばらくは使わせてもらおうと思っています。
【Mosaic-HAT】RxToolsを使ってRTK測位に挑戦してみよう

　今回は、Ntrip Caster経由のRTK測位に挑戦です。

　RTKは、基準局の補正情報を移動局で受けることで高精度測位を実現します。
自身で両局を準備することもできますが、基準局を設置するには、正しい位置情報を知っている必要があるので、運用されている基準局を使ったほうが手軽で信頼できます。インターネットを使ってよその基準局と移動局を接続するしくみが、NTRIP Casterです。フリーでサービスしているrtk2go.comを使って、RTK測位の設定をしていきましょう。

#１．Webアプリでの設定（失敗）
※忙しい人は、スキップし、２へ。

手順としては、
１．Mosaic-HATをPCとUSB接続
２．http://192.168.3.1/
 　　にアクセスしてWebアプリを準備
３．GNSS->Positionで、Position ModeのRoverをチェック、
　　その下のRTKもチェック
４．Corrections->NTRIPで、New NTRIP clientの+をクリック
５．Edit NTRIP Connection
　　　Mode　　　Client
　　　Caster　　rtk2go.com
　　　Port　　　2101
　　　User name (空白)
　　　Password　(空白)
　　　Mount point　最寄りのマウントポイント
　　　　（rtk2go.com:2101で一覧が出ます。STR;の後がマウントポイント名）
６．OK、右下のSave current...をSave

のはずなのですが、Ntripの表示のラインが黄色くなった後、赤になり、
Error: Connection error

Edit NTRIP Connectionにも
Error retrieving source table: Resolving host failed
と出て、sourece tableがないことを怒っています。
手順５がうまくいくと、Mount pointはリストから選べるらしいですが、rtk2go.comのtableが入手できないようです。
模索するにも、このWebアプリの情報が皆無で、どうしようもない。

#２．RxToolsでの設定（成功！）
　ということで、Webアプリは一旦諦め、RxToolsをインストールしてみます。
前回記事にも書きましたが、
https://www.septentrio.com/ja/sahoto/sofutouea/rxtools
からツールとドキュメントが入手できます。ヘルプも完備されてます！

　インストール後に出てくるランチャーの一番右のアイコンから、RxAssistantを起動します。ユーザーマニュアルの10章の操作になります。
次回から自動起動するかどうかを聞いてきますのでYES/NOで答えてください。本アプリは、タスクトレイに入ってバックグラウンドで動くようです（何度も起動すると、タスクトレイに増えていくので注意）。

　まずはConnection->Connectionのリストでポートを選びます。Mosaic-HATは2ポート出てきますので、とりあえずPort1を選んでみます。しばらくして、Status覧にmosaic-X5の情報が表示されれば成功です。

　次に、Ntripタグで、Hostの右のEditをクリック。Ntrip Settingsで、Hostにrtk2go.comを入れます。すると、Stream覧にマウントポイントの一覧が！どれか選んでOK、Startをクリック。StatusのLEDがグリーンに点灯します。成功したようです。
　なお、Stream右のDetailsをクリックすると、基準局の情報が表示されます。この緯度経度情報を、Google Mapに入力し、位置を確認しましょう。基準局と移動局が離れすぎていると、キャッチするGPSが違うので、できるだけ近場の基準局を探すようにしましょう（自分の位置は、RxAssistantのPositonで確認できます）。PVT ModeもStandaloneからDifferentialへ変わりました。おそらく、見通しの良いところにアンテナを置けば、float/fixへと変わるはずです。

　Statusだけ見ていてもよくわからないので、プロット図を出しましょう。
　RxAssistantのメニューからTools->RxControlを選択すると、詳細なステータス情報が表示されます。RxControlのメニューからView->Planimetric Plotを選ぶと、別画面で現在の緯度経度がプロットされます。standaloneは青、differentialは橙。float, fixに変化するにつれ、プロットの軌跡は短くなり、高精度に安定してくることがわかります。

　なお、RxAssistantのメニューからFile->Display Diagnostic Reportを選択すると、すべての情報が表示されます。PDFに保存も可能。ConfigFileは、RaspberryPi上で動かすときの参考になるはずです。

　次は、RTK基準局に挑戦します。
[Flutter]assetsから画像を取る方法

## まずimagesファイルを作る
  プロジェクトに画像を入れるための新規ディレクトリを作る
  ここではimagesファイルに、ruby.pngという画像を入れたと仮定する。

## pubspec.yamlのassets:に記載する
```  
flutter:
    assets:
      - images/ruby.png
```
という感じで記載する。

## 呼び出す
```example.dart
body: Center(
  child: Image(
    image: AssetImage("images/diamond.png"),
  ),
),
```

これでおk
表示形式が設定された状態の値を取得したい

Excelにはセルの表示形式という機能があって、セルに同じデータを入力していても、セルの表示形式を変更することによって、任意の形式で表示することができます。Apache POIを利用してExcelブックを読み込む際、表示形式が設定された状態の値を取得したい場合、以下のように書けばよいです。

```Java
DataFormatter formatter = new DataFormatter();
String formattedCellValue = formatter.formatCellValue(cell);
doSomeThing(formattedCellValue);
```

**環境情報 (pom.xml抜粋)**

```xml
<!-- https://mvnrepository.com/artifact/org.apache.poi/poi -->
<dependency>
    <groupId>org.apache.poi</groupId>
    <artifactId>poi</artifactId>
    <version>5.0.0</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.apache.poi/poi-ooxml -->
<dependency>
    <groupId>org.apache.poi</groupId>
    <artifactId>poi-ooxml</artifactId>
    <version>5.0.0</version>
</dependency>
```
DXの要となるデータ基盤の概要【GCP】

#オシャレDXの要となるデータ基盤概要【GCP】
![qita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1180499/24588e6f-4076-1e11-9a88-f38676b6bc3e.png)
###概要
DXにはデータ活用が要となる
その中でデータ分析の基盤となるシステムが必要となり
データ分析基盤とは？から構築方法の概要まで記載する

###データ分析基盤とは
データを統合/活用するためのシステム
収集、蓄積、分析、可視化の4つの機能を保有

###システム構成
3層構造
データレイク、データウェアハウス、データマート

###データ基盤を構築する意図
データ活用の為にデータを一元管理して、企業の課題となる
「売上向上」および「コスト削減」につなげるため

###データ基盤にメジャー使用されるGCP環境
膨大なデータを効率的かつ高速に分析可能

###その他
AWS、Azureなどございますが、スピード感やクエリ量で料金が
決まる利点なども踏まえ、メジャーに使用されておりデータ基盤にはGCPを推奨する

###GCP環境を利用した簡易なアーキテクチャー
様々な実装から分析まで必要になるツールやフルスクラッチが主流であり
実際にはもっと多量になるが、主にはこの3点となる
データソース→DWH→BIツール

###データソース
Googleアナリティクス（WEBログ、スマホログ）
顧客データ（会員情報など）
POSデータ（レジで記録されるデータ）
API公開情報（外部ECサイト、気象情報など様々）※実装必要

###DWH
データソースを一元管理するBigquery
 
###BIツール
Googleが提供:データポータル
Tableauが提供する：Tableau
マイクロソフトが提供:Power BI

###まとめ
上記のように
データクラウドにデータソースを集約
→BIツールでダッシュボード開発
→経緯課題の分析/可視を導入すれば
企業が抱える課題の洗い出しから最適解を導き出すことが可能となる
MAMPを起動してphpmyadminを表示するまで

Windowsからmacに乗り換えた際にxamppからMAMPに乗り換えました。
wordpressの実行環境を構築する際にやや手順がわからなかったため共有します。


・MAMPPを起動して、右上の「webstart」を押下
![スクリーンショット 2021-05-22 17.02.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1282994/1df4b7b8-cdde-9d16-b2ed-8de61431cffb.png)

・遷移先のMAMPのwebページで、左上の「ツール」を押下
![スクリーンショット 2021-05-22 17.05.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1282994/e5ed301c-b867-ee8a-a283-f0f8c0c459df.png)

・完了！
![スクリーンショット 2021-05-22 17.07.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1282994/8f847b20-39fc-06f9-4c7c-3b3304cbeefa.png)
JSONをCSVに変換する方法

## 結論

使いやすいサービスが無かったので[json to csv](https://jsontocsvconv.com)というアプリを作ってみました。簡単にJSONをCSVに変換できますので、ぜひ使ってみてください。

https://jsontocsvconv.com

## 説明

直感的に使えるようにはしていますが、一応サービスの説明をまとめます。と言っても２つのステップ、1. JSONのアップロードと、2. CSVのダウンロード、だけです。

### 1. JSONのアップロード

JSONのアップロードは以下の3つの方法でできるようになっています。

- JSONファイルを**ドラッグ&ドロップ**
![Screen Shot 2021-05-22 at 15.17.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164793/57f8de5f-17cf-23b0-12cf-807192160706.png)

- **Upload JSON file**ボタンからJSONファイルを選択
![Screen Shot 2021-05-22 at 15.56.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164793/d4e8abf9-99a3-416c-7d1d-2a7b5ed50514.png)

- JSONをテキストとして**ペースト**または**直接書き込み**
![Screen Shot 2021-05-22 at 15.59.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164793/e3f27d5a-d5c9-2fee-d1d0-43dc546e6fda.png)

これらのいずれかでJSONをアップロードすることができます。内部的にはアップロードされたJSONデータは、サーバーに送られずブラウザ内のJavaScriptで直接CSVに変換されます。

### 2. CSVのダウンロード

JSONがアップロードされると、画面下に変換されたCSVが表示されます。右上にあるCopyボタンを押すことで、そのCSVのテキストをクリップボードにコピーすることが出来ます。
![Screen Shot 2021-05-22 at 16.08.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164793/6051db63-c556-71fd-14a1-91ececa455de.png)

また、Downloadボタンを押すと、CSVをファイルとしてコンピュータ上に保存できます。
![Screen Shot 2021-05-22 at 16.10.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164793/e7f9e69a-4e9b-5cf3-0603-f333522c4fb7.png)

#### 2.1 CSVファイルの編集

基本の機能はこれだけなのですが、せっかくなので、出来上がったCSVを編集する簡単な機能を、以下の３つ用意しました。

- **ヘッダー名**の変更
![Screen Shot 2021-05-22 at 16.15.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164793/72e7338a-2a71-ee5c-a71b-c83ef972c41b.png)

- アルファベット順に**ソート**
![Screen Shot 2021-05-22 at 16.37.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164793/fb92176b-ab64-7962-dbd6-a262989b07b0.png)

- 列を選択して**削除**
![Screen Shot 2021-05-22 at 16.39.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164793/e87d6b80-8049-9ecd-122e-85dbab58d2a4.png)

## まとめ

300行を超えない限りは全て無料で使えますので、JSONをCSVに変換したい方はぜひ[json to csv](https://jsontocsvconv.com)を使ってみてください。

**追記：**
リリースから数年が経過しましたが、SEOの効果が十分に得られておらず、サービスを知ってもらう機会が少ない状況です。もし本サービスにご満足いただけましたら、ブログなどで紹介していただけると大変ありがたいです。

サービスに関する記事：
・このサービスを作成した経緯を[サブスク作った話](https://qiita.com/_s_/items/a25118198e1d7f760e3d)に書きました。
・このサービスをGoogle広告に出した話を[個人アプリをGoogle広告に出したら思いのほか人が来た話](https://qiita.com/_s_/items/109dba3ebf43d99ec7e8)に書きました。
Clusterでワールドにログインしてきたプレイヤーを数える

プレイヤーがいなくなったら0にリセット
残念ながら `On Leave Player Trigger` がないっぽいので退出はカウントしない
![Inspector](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20773/d06d8114-c6bd-5c2b-fb57-a57fdb5beb3f.png)

ワールド訪問回数ではないです
[セーブ機能でワールドに訪れた回数がわかるようにする – Cluster Creators Guide](https://creator.cluster.mu/2021/02/16/play-count/)
[Flutter]画像を真ん中に表示する方法

```example.dart

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      //背景の色赤
      backgroundColor: Colors.redAccent,
      appBar: AppBar(
        //AppBarのタイトルと色
        title: Text("I'm superman"),
        backgroundColor: Colors.yellow,
      ),
      //中央揃え
      body: Center(
          child: Image(
        //NetworkImageはURL先の画像を引っ張る感じ
        image: NetworkImage(
            "http://www.horiyamanoie.com/wp-content/uploads/sites/29/2020/02/mount_fuji.jpg"),
      )),
    ),
  ));
}
```
JupyterLabでPlotlyのグラフを表示させる際のエラーの対応方法

# 概要
JupyterLabでPlotlyのグラフを表示できるようにした際に、エラーが発生しました。
最終的に解決した方法を残しておきます。

公式サイトを見ながらコマンドを実行していたところ、JupyterLabの拡張機能の部分でエラーになりました。

https://plotly.com/python/getting-started/

## 実行環境
|環境|バージョン|
|:---:|:---: |
| OS | Windows10 |
| JupyterLab | 3.0.14 |
| Node.js | 15.14.0 |

## エラーの内容
コマンドプロンプトで「jupyter labextension install jupyterlab-plotly@4.14.3」を実行した際に下記のようなエラーが発生しました。
エラーメッセージ「npm dependencies failed to install」で調べた方法では解消せず。

```console:console
> jupyter labextension install jupyterlab-plotly@4.14.3
Building jupyterlab assets (production, minimized)
An error occured.
RuntimeError: npm dependencies failed to install
See the log file for details:  C:\Users\User\AppData\Local\Temp\jupyterlab-debug-chqiijw0.log
```

## ログファイルの内容
続いてエラーに記載されているログファイルを確認しました。
yarnのインストールでエラーになっているようです。

```text:ログファイル
Yarn configuration loaded.
Building jupyterlab assets (production, minimized)
> node C:\anaconda3\lib\site-packages\jupyterlab\staging\yarn.js install --non-interactive
yarn install v1.21.1
[1/5] Validating package.json...
[2/5] Resolving packages...
warning jupyterlab-chart-editor > react-chart-editor > react-colorscales > rc-slider > babel-runtime > core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
[3/5] Fetching packages...
error An unexpected error occurred: "C:\\Users\\User\\AppData\\Local\\Yarn\\Cache\\v6\\npm-to-px-1.1.0-b6b269ed5db0cc9aefc15272a4c8bcb2ca1e99ca-integrity\\node_modules\\to-px\\.yarn-metadata.json: Unexpected token h in JSON at position 1999".
info If you think this is a bug, please open a bug report with the information provided in "C:\\anaconda3\\share\\jupyter\\lab\\staging\\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
```

# 対処方法
コマンドプロンプトで"yarn cache clean" を実行してyarnのキャッシュをクリア後、再度拡張機能のインストールを実行すれば解決しました。

```command:command
> yarn cache clean
```
ログファイルのエラーメッセージ中の下記メッセージでWeb検索したところ、参考のページにたどり着きました。
「yarn-metadata.json: Unexpected token h in JSON at position 1999」

# 参考
https://blog.yuhiisk.com/archive/2018/05/20/yarn-cache-error.html
会社のITインフラをゼロから試行錯誤してみる(ドメイン取得とネームサーバー設定)

# Overview
- AWS Route53でドメイン取得
- とりあえずSESでメールアドレス確保して送受信環境構築

# はじめに
具体的な構築はなるべくコマンドラインで記載していきます。
普段の業務ではGUIベースで構築することが多いので同じことをやりたくないだけで特に意味はありません。

## 使用ツール
AWS CloudShellという超絶便利なサービスがあるので活用していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/902999/a6007f5f-15ab-3d74-28be-91d5cf3c3933.png)

下記キャプチャーの右端のコンソールっぽいアイコン。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/902999/cdd23f48-c55a-b084-d841-b962a9a7f674.png)

# 1.ドメイン取得
Route53でも取得可能ですが、今回はもともと購入していたドメインを活用します。
ホストゾーンを作成して連携させます。

# 2.ホストゾーン作成
```bash:aws-cli-v2
aws route53 create-hosted-zone --name "hogehoge.com" --caller-reference "hogehogehogehoge"
```

```bash:return
{
    "Location": "https://route53.amazonaws.com/2013-04-01/hostedzone/XXXXXXXXXXXXXXXXXXXXX",
    "HostedZone": {
        "Id": "/hostedzone/XXXXXXXXXXXXXXXXXXXXX",
        "Name": "hogehoge.com.",
        "CallerReference": "hogehogehogehoge",
        "Config": {
            "PrivateZone": false
        },
        "ResourceRecordSetCount": 2
    },
    "ChangeInfo": {
        "Id": "/change/XXXXXXXXXXXXXXXXXXXXX",
        "Status": "PENDING",
        "SubmittedAt": "YYYY-MM-DDT06:13:42.844000+00:00"
    },
    "DelegationSet": {
        "NameServers": [
            "ns-9999.awsdns-37.co.uk",
            "ns-9999.awsdns-17.com",
            "ns-9999.awsdns-20.net",
            "ns-9999.awsdns-04.org"
        ]
    }
}
```

外部レジストラーでドメインを取得した場合は、"NameServers"のレコードをレジストラー側のネームサーバー設定に置き換えます。

# 3.レコード登録
Jsonファイルを作っておいてCliで読み込ませる感じです。
試しにSESで生成された認証用のレコードを手動で登録してみました。
ここで詰まったのが、TXTレコードのValueをそのまま入れようとするとエラーで弾かれてしまいます。

```
FATAL problem: InvalidCharacterString (Value should be enclosed in quotation marks) encountered with XXXXX
```
その原因は入力する値自体が"値"である必要があるらしく、エスケープして入力する必要があります。

```bash:change-batch.json
{
  "Comment": "SES",
  "Changes": [
    {
      "Action": "CREATE",
      "ResourceRecordSet": {
        "Name": "_amazonses.hogehoge.com",
        "Type": "TXT",
        "TTL": 300,
        "ResourceRecords": [
          {
            "Value": "\"XXXXXXXXXXXXXXXXXXXXXXXXXXXXX\""
          }
        ]
      }
    },
  ]
}
```

```bash:aws-cli-v2
aws route53 change-resource-record-sets --hosted-zone-id hogehogehogehoge --change-batch file://change-batch.json
```
```bash:return
{
    "ChangeInfo": {
        "Id": "/change/XXXXXXXXXXXXXX",
        "Status": "PENDING",
        "SubmittedAt": "YYYY-MM-DDT07:05:38.982000+00:00",
        "Comment": "SES"
    }
}
```

※SES側でドメイン作るときに自動でレコード登録してくれるので最後のレコード登録は不要です。なにかの参考にしていただければ幸いです。
【AWS】VPCまとめ

## はじめに
こんにちは。rattsl(@rattsl)です。
今回はAWS VPCについてハンズオンで色々いじったのでメモとして残します。
またネットワークの基礎的な知識もないため、間違えて認識している部分があったらご指摘ください。

## ネットワーク基礎

### IPアドレス
- 重複が許されない一意の32bit数値データのこと。
- ネットワーク機器やwebサイトを特定するために利用する。
- TCP/IPプロトコル通信でリクエストする。
- 利用範囲は`0.0.0.0 ~ 255.255.255.255`

ネットワーク機器に直接IPアドレスが割り振られているのではなく、NIC(ネットワークインターフェースカード)に割り当てられ、ホストにアタッチされている。

IPアドレスの数値データは3桁（255）の10進数で表されているが、実際は2進数でコンピュータ側が解釈し32bitデータに置き換えられている。

| 10進法 | 2進法 | 32bit |
|:-:|:-:|:-:|
| 16  |  10000 | 00010000 |

### IPアドレスの枯渇問題とIPv6
我々が良く目にするIPアドレスはIPv4形式。
しかし最近はIPv4形式のIPアドレス数が枯渇してきているため、IPv6形式が利用できるようになっている。
IPv6では128bit長で表され、16ビットごとに「:(コロン)」で区切った上で、16進数で表記する。
この新しいプロトコルでインターネット速度改善が期待できる。

| IPv4形式 | IPv6形式 |
|:-:|:-:|
|  124.128.24.16 |  2001:0db8:1264:5678:90ab:cdef:0000:0000 |

### グローバルIPアドレスとプライベートIPアドレス
上記の説明はグローバルIPアドレスについてのもの。

対してプライベートIPアドレスはオフィス内や家庭内で利用され、グローバルとプライベートでIPアドレスで使い分けて利用される。

このプライベートIPアドレスは規定の範囲内であったら自由に付与して利用可能。基本的にグローバルに割り当てられたIPアドレスをもらい、ローカルエリアの管理者が独自でプライベートIPアドレスを割り当てるという流れになっている。

### どうやってプライベートネットワークを作るか
ネットワークの範囲（IPアドレスの範囲）を定義する必要がある。

例）10.0.1.0/16

スラッシュで区切られた左側がIPアドレスで右側が**サブネットマスク**になる。

`IPアドレス+サブネットマスク＝IPの範囲`

このIPの範囲を**CIDR**という。

### CIDRとは
サブネットマスクを設定し、同じネットワークとして扱うIPアドレスの個数を調整できるIPアドレスの設定方法のこと。

例えば

`196.51.XXX.XXX/16`

というネットワークの範囲があったとすると、
左から32bit表示時の16桁までが同じネットワーク範囲で固定でき、右側のXXX.XXXをIPアドレスとして自由に使える。

もう少し詳しく説明するとサブネットが/8となった場合、

`196.XXX.XXX.XXX/8`

`196`という値は2進数で表すと`11000100`なのでこの8桁のバイナリ値がロックされることになる。
サブネットマスクは32まで設定することが可能で、サブネットマスクの値が大きいほど指定できるIPアドレスの範囲は狭くなる。一般的な使い方は16に指定してその中で細かく指定する際は24で指定する。

| サブネットマスク | 設定可能IPアドレス数 |
|:-:|:-:|
|  16 |  65534 |
|  23 |  512 |
|  24 |  256 |

このサブネットマスクで固定される範囲を**ネットワーク部**、利用可能な範囲を**ホスト部**と呼ぶ。

### なぜサブネットでグルーピングするか
ローカルにたくさんのIPアドレスが付与されたデバイスが繋がっているときに見つけづらい。
そこでサブネットでアドレスの範囲を分けておくと見つけやすい。

例）都道府県
〇〇さん(10.0.1.255が付与されたデバイス)に郵便物(データ)を送りたい。東京都(10.0.1)に住んでいる(サブネットの中にある)から東京中央郵便局(10.0.1)に届けよう。

## VPC
### VPCとは
AWSクラウド上からユーザー専用の仮想ネットワークを作るサービス。
アカウント作成時に各リージョンにVPCが作成される。

作成時は一つのAZ内にVPCが作成されるが同一リージョン内だったら複数AZをリソースを含めることができる。

VPCウィザードを使うと瞬時に頻繁に利用されるVPC構成を作ることができる。ウィザードを使わない場合は

`VPC作成（CIDR）→ サブネット作成 → Gatewayの設定 → セキュリティの設定（ネットワークACL)`

の順で作る必要がある。

### サブネット
VPCをさらに小さく区切ったもの。
基本的にはVPCとサブネットでネットワーク空間を構築する。
VPCをデフォルトで作成時に一つサブネットが自動的に作られる。（最低1つはVPC内にサブネットがある必要がある。）

### パブリックサブネットを設定する為に必要な設定
パブリックサブネットを置いただけではパブリックサブネットとしての役割は持たず、インターネットゲートウェイをVPCサブネットのルートテーブルに設定した段階で初めてそのサブネットがパブリックサブネットとしての役割を持つ。

### NATゲートウェイの特徴
NATゲートウェイはプライベートサブネットからインターネットへの接続を可能にする為にインターネットに接続されているパブリックサブネットに設定する。

### VPC設定前にEC2インスタンスを立てるとVPCはどういった設定になる？
デフォルトVPCにパブリックサブネットが一つ作られる。

### セキュリティグループとネットワークACL
セキュリティグループはステートフルなのに対し、ネットワークACLはステートレスなので、トラフィックを明示的に許可する必要がある。

### Direct Connectについて
Direct Connectは自社サーバ（オンプレ）とAWS(クラウド)を接続するサービス。
AWSデバイスを自社に設置して接続させるのではなく、AWS Direct Connect のパートナーまたはネットワークプロバイダーと連携して、ユーザーのデータセンター、オフィス、またはコロケーション環境から AWS Direct Connect ロケーションに接続する。

### VPCエンドポイントのゲートウェイ型の特徴
VPC内部から直接外のサービスと接続する。

### VPC Frow Logs について
ネットワークインターフェース間で行き来するIPトラフィックをキャプチャするサービス。
DataFrameでマルチカラムの2段目だけを指定してデータを取得する方法

# 概要
PandasのDataFrameでマルチカラムの2段目だけを指定してデータを取得する方法です。
下記のようなDataFrameの場合、2段目が「予算」の列だけ取得したいという場合を想定しています。

```python:python
import numpy as np
import pandas as pd
df = pd.DataFrame(np.random.randint(100, 10000, (6, 4)), 
                  columns = [
                      ['上期', '上期', '下期', '下期'], 
                      ['予算', '実績', '予算', '実績']
                  ], 
                  index = ['人件費', '減価償却費', '光熱費', '旅費交通費', '消耗品費', 'その他経費']
                 )
```
<div>
<style scoped>
    .dataframe tbody tr th:only-of-type {
        vertical-align: middle;
    }

    .dataframe tbody tr th {
        vertical-align: top;
    }

    .dataframe thead tr th {
        text-align: left;
    }
</style>
<table border="1" class="dataframe">
  <thead>
    <tr>
      <th></th>
      <th colspan="2" halign="left">上期</th>
      <th colspan="2" halign="left">下期</th>
    </tr>
    <tr>
      <th></th>
      <th>予算</th>
      <th>実績</th>
      <th>予算</th>
      <th>実績</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>人件費</th>
      <td>9611</td>
      <td>8670</td>
      <td>7938</td>
      <td>4301</td>
    </tr>
    <tr>
      <th>減価償却費</th>
      <td>3696</td>
      <td>6232</td>
      <td>8410</td>
      <td>1416</td>
    </tr>
    <tr>
      <th>光熱費</th>
      <td>8408</td>
      <td>6698</td>
      <td>4506</td>
      <td>157</td>
    </tr>
    <tr>
      <th>旅費交通費</th>
      <td>8270</td>
      <td>7533</td>
      <td>9716</td>
      <td>4732</td>
    </tr>
    <tr>
      <th>消耗品費</th>
      <td>4793</td>
      <td>4894</td>
      <td>962</td>
      <td>8419</td>
    </tr>
    <tr>
      <th>その他経費</th>
      <td>6666</td>
      <td>5125</td>
      <td>6224</td>
      <td>5593</td>
    </tr>
  </tbody>
</table>
</div>

# 方法
2段目だけ指定する場合は、pd.IndexSliceを使用します。
下記のように指定すると、2段目が「予算」の列を抽出できます。

```python:python
df.loc[:, pd.IndexSlice[:, '予算']]
```
<div>
<style scoped>
    .dataframe tbody tr th:only-of-type {
        vertical-align: middle;
    }

    .dataframe tbody tr th {
        vertical-align: top;
    }

    .dataframe thead tr th {
        text-align: left;
    }
</style>
<table border="1" class="dataframe">
  <thead>
    <tr>
      <th></th>
      <th>上期</th>
      <th>下期</th>
    </tr>
    <tr>
      <th></th>
      <th>予算</th>
      <th>予算</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>人件費</th>
      <td>9611</td>
      <td>7938</td>
    </tr>
    <tr>
      <th>減価償却費</th>
      <td>3696</td>
      <td>8410</td>
    </tr>
    <tr>
      <th>光熱費</th>
      <td>8408</td>
      <td>4506</td>
    </tr>
    <tr>
      <th>旅費交通費</th>
      <td>8270</td>
      <td>9716</td>
    </tr>
    <tr>
      <th>消耗品費</th>
      <td>4793</td>
      <td>962</td>
    </tr>
    <tr>
      <th>その他経費</th>
      <td>6666</td>
      <td>6224</td>
    </tr>
  </tbody>
</table>
</div>
【heroku, Table Plus】herokuデータベースにTable Plusを接続する方法

#前提
今回はrailsで作成しherokuへデプロイしたアプリを対象にします。
heroku, Table Plusの説明については本記事で対象外です。

また本記事は2021年5月22日時点のものです。

#結論
書き手順に沿って実行してみてください。

①herokuにログイン
②データベースに接続したいアプリを選択
③ResourcesタブしHeroku Postgresを選択
④SettingsタブのDatabase CredentialsのView Credencialsを選択
⑤URLをコピー
⑥Table Plusを起動し右クリックからnewを選択connection from URLを選択
⑦コピーしたURLを貼り付け

#詳細

####①herokuにログイン
https://jp.heroku.com/ からログインしてください。

####②データベースに接続したいアプリを選択
herokuにデプロイしたアプリの中から、Table Plusで接続したいアプリを選択してください。
![スクリーンショット 2021-05-22 15.45.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/744524/9904839c-766b-a81f-17ed-84987615001e.png)


####③ResourcesタブしHeroku Postgresを選択
![スクリーンショット 2021-05-22 15.49.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/744524/c09856ff-0143-9e49-72eb-e6038a1d6e10.png)

####④SettingsタブのDatabase CredentialsのView Credencialsを選択
![スクリーンショット 2021-05-22 15.53.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/744524/95095576-aa5c-4080-c6f0-f7593c93f927.png)

####⑤URLをコピー
![スクリーンショット 2021-05-22 15.55.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/744524/a054e4e8-0ab5-7f37-76b7-3fa22c520bca.png)


####⑥Table Plusを起動し右クリックからnewを選択connection from URLを選択
![スクリーンショット 2021-05-22 16.00.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/744524/499867d8-808a-4012-2a19-416cde8c1563.png)

####⑦コピーしたURLを貼り付け
![スクリーンショット 2021-05-22 16.01.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/744524/69430a83-09fb-d083-2915-bc4c6c7d60f5.png)

以上です！
パスワードリセットメールを送信できる時とできない時がある

#ActionMailerでたまにメールを送信できない時(sorcery使用時)

ActionMailerにはメールの送信間隔が設定されており、連続でメールを送信してもメールが送信できないことがある。

###解決策

```ruby:config/initializers/sorcery.rb
# user.reset_password_time_between_emails =
```
コメントアウトになっている部分があるので、ここを

```ruby:config/initializers/sorcery.rb
user.reset_password_time_between_emails = 1
```
メールの送信間隔を直接指定する形で設定してやれば連続でメールを送れるようになる


以下参考記事
https://rochefort.hatenablog.com/entry/2016/04/03/011717
【MATLAB】WordファイルをPDFに変換する

## はじめに
[前回](https://qiita.com/dokagui_tairan/items/6cf2f11013f45fa6efa9)はmatlabで作成したグラフをwordに貼り付けて保存する方法を説明した．
今回はその続きとして，作成済のwordファイルを開いて全体のフォントカラーを変える方法と，編集したwordファイルをpdfとして保存する方法を説明する．

なお，matlab経由でwordを開いて処理する流れのため，wordのインストールは必須である．

## 経緯
なぜ全体のフォントカラーを変えるのか？という点だが，簡単に経緯を説明する．
社内でドキュメント（wordファイル）を作る際に，途中で修正した部分はフォント色を変えておくというやり方をしている．
下図でいうと，「振幅グラフ」と「2306684」の部分が修正箇所だ．
そして，作成したwordファイルを客先に納品する際にpdf化を行うが，その際にはフォント色を黒色に戻すわけである．
<img width="400" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373168/dd88c9c8-2356-48be-c9e2-369c986ca99a.png">
フローは以下のような感じ．
Wordファイルをtmpフォルダにコピーして，そっちをWordで開いて，`Ctrl+A`で全選択してフォントカラーを黒にする．Wordのメニューから「エクスポート」を選んで，pdfとして保存する．
<img width="500" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373168/106d9b32-fb58-d2f0-33f3-41f2c4f3517d.png">


## matlabによる自動化
フォントカラーじゃなくてもっとこう先進的な，バージョン管理ツール的なものは使わないんか？　とかそういうツッコミは完全に無視して，上記のやり方をmatlabで自動化してみる．
図にすると↓である．こうなったら嬉しいわね．

<img width="200" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373168/9a8603a9-95cf-13e4-4690-525b6656cb75.png">


### Wordファイル全体のフォントカラーを変える
wordを`Ctrl+A`で全選択して，フォントカラーを変えるやつである．
ヘッダー部分などの色はこのやり方では変えられないので注意．

```matlab:
% 全選択（Ctrl+A）
selection.WholeStory
% フォントカラーを変える
selection.Range.Font.ColorIndex = 'wdBlack';
```

### WordをPDFに変換する
`pdfFile`には保存するpdfファイルのフルパスを入れる．

```matlab:
document.ExportAsFixedFormat(pdfFile, 'wdExportFormatPDF');
```

### 実装

以下にコードの全文を載せる．

```matlab:
clc
clear all
close all

path1 = pwd;
file1 = 'a.docx';
docFile = fullfile(path1, file1);

% word 初期化
word = actxserver('Word.Application');
word.Visible = 1;
document = word.Documents.Open(docFile);
selection = word.Selection;

% 全体のフォントカラーを変える
selection.WholeStory
selection.Range.Font.ColorIndex = 'wdBlack';

% pdf 出力
[path1, file1, ext1] = fileparts(docFile);
file1 = strcat(file1,  '.pdf');
pdfFile = fullfile(path1, file1);
document.ExportAsFixedFormat(pdfFile, 'wdExportFormatPDF');

document.Close(0);
word.Quit();
```


wordファイルを閉じる際に引数`0`にすると編集内容を保存せずに閉じる．
フォントカラーを黒色にしたwordファイルは不要なので，保存せずに閉じよう．
（引数を指定しないと上書きしちゃうので注意）

```matlab:
document.Close(0);
```

指定フォルダ内のwordファイルを全部処理したいといった場合には下記の記事と組み合わせれば行けるので，特に説明しない．
[【MATLAB】指定フォルダ内のファイルを検索して処理をする](https://qiita.com/dokagui_tairan/items/e60ba14f0519397616a5)

### 結果
保存した結果は以下の通りである．期待通り，文字色が黒色に変わっている．
もちろん，元のwordファイルの文字色は特に書き換えられてはいない．（タイムスタンプも変更無し）
<img width="500" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373168/ffdf6d67-a02f-14a2-5821-e0528eec786e.png">

## まとめ
今回はwordファイルをmatlabで適当に編集してpdf変換して保存する方法を述べた．
この調子でwordとの和解を続け，自動化を進めていきたい．
巡回セールスマン問題とは？

# はじめに

小学生の子どもに巡回セールスマン問題を教えようと思ってWebサイトや書籍を探したのですが、なかなか適当な解説が見つからないので、自分で書いてみます。はじめに家庭訪問の順番の例について説明したうえで、組合せが爆発すること、コンピュータでもなかなか解けないことを説明します。

# 家庭訪問の順番を決めよう！

身近な問題の中には、いろんな選択肢の中から一番良い組み合わせを選ぶ、という問題が結構あります。こういう問題を「組合せ最適化問題」といいます。例として、家庭訪問の順番について考えます。

先生が、クラスの生徒の家庭訪問をするとします。先生は忙しいので、なるべく遠回りをしないで、生徒全員の家を回りたいと思っています。例えば、１丁目に行って、２丁目に行って、また１丁目に行くよりは、１丁目の２人の家に行ってから２丁目に行ったほうが行ったり来たりしなくて済みますよね。

![school_sansyamendan.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614257/652998d1-31cc-b654-9647-7577b39f1dd8.png)

このようにして、一番近道するにはどういう順番で回ればいいか？という問題を、「巡回セールスマン問題」と言います。セールスマンがお得意様全員のところにどうやって早く行くか？という話から、こういう名前がついています。

# クラス全員の家庭訪問の順番を決めるには？

実は、クラスの生徒が増えれば増えるほど、この問題を解くのは大変です。

例えば、生徒が３人（Aさん、Bさん、Cさん）の場合を考えてみます。家庭訪問の順番は、次の６つが考えられます。

![プレゼンテーション1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614257/3d22e109-4123-f495-86ea-c4c9bb3b3c7e.png)

1. スタート→Aさん→Bさん→Cさん→ゴール（80分）
1. スタート→Aさん→Cさん→Bさん→ゴール（70分）
1. スタート→Bさん→Aさん→Cさん→ゴール（60分）
1. スタート→Bさん→Cさん→Aさん→ゴール（70分）
1. スタート→Cさん→Aさん→Bさん→ゴール（60分）
1. スタート→Cさん→Bさん→Aさん→ゴール（80分）

この場合は、Bさん→Aさん→Cさんの順番、または、逆の順番でCさん→Aさん→Bさんの順番で家庭訪問するのが一番早そうです。

生徒が３人の場合は、家庭訪問の順番は６通りでしたが、生徒の数が増えると家庭訪問の順番は何通りになるでしょうか？

- 生徒が３人の場合：6通り（3×2×1=6）
- 生徒が４人の場合：24通り（4×3×2×1=24）
- 生徒が５人の場合：120通り（5×4×3×2×1=120）
- 生徒が６人の場合：720通り（6×5×4×3×2×1=720）
- 生徒が７人の場合：5,040通り（7×6×5×4×3×2×1=5040）

・
・
・

- 生徒が30人の場合：約265,252,859,812,191,000,000,000,000,000,000通り（30×29×28×…×2×1）

とんでもない数になってしまいました。こうなると順番を考えるよりもさっさと行ったほうが早いですね。

コンピュータで計算すればいいじゃないか、と思われる方がいらっしゃるかもしれません。ちょっと考えてみましょう。
例えば、現在（2021年）日本で最高の性能を持つスーパーコンピュータは、毎秒44京2010兆回の計算ができるそうです。

> TOP500は性能評価用プログラムの処理速度で性能を競う年2回のランキングで、今回は17日に発表された。富岳は毎秒44京2010兆回（京は1兆の1万倍）で、フルスペックまで整備を進めた結果、前回の41京5530兆回から向上。2位の米国「サミット」に約3倍の性能差をつけ圧勝となった。
https://scienceportal.jst.go.jp/newsflash/20201120_n01/

では仮に、1秒で44京2010兆通りの計算ができたとしましょう。生徒が30人の場合の順番を全部計算すると、600,106,015,276,105秒、つまり、約1900万年もかかります。やっぱり難しそうですね。

実際には、計算しなくていいところを計算しないようにして高速化する方法や、一番速い回り方じゃなくてもいいからそこそこ速ければいいという計算方法（近似解法）があり、現実的な時間で計算することができます。

# そのほかの難しい問題

似たような問題の例として、「ナップザック問題」という問題があります。

例えば、遠足に持っていくおやつの合計金額が３００円までだったとします。家にいくつかの種類のおやつがあったとして、どのおやつを持っていけば好きなものを一番たくさん持っていけるかを考えます。

![プレゼンテーション1-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614257/6734d42e-95a6-8be1-7a0e-ef9fcae50c6a.png)

この問題も、家庭訪問と同じように、おやつの種類が増えれば増えるほど、持っていけるおやつの数が増えれば増えるほど、計算に時間がかかります。

ちなみに、出発地から目的地に行くのにどこを通っていくのが最短経路か？という問題は、家庭訪問に似ているような気がしますが、こちらは、コンピュータを使えば比較的速く解くことができます。この計算はカーナビなどで使われています。

# 参考文献

- [2004年度オープンキャンパス 資料 (pdf) - 永持研究室 - 京都大学](https://www-or.amp.i.kyoto-u.ac.jp/files/open-campus-04.pdf)
- [数理の窓 - Nomura Research Institute](https://www.nri.com/-/media/Corporate/jp/Files/PDF/knowledge/publication/kinyu_itf/2017/04/itf_201704_10.pdf)
- [もう狭い道は選ばない、カーナビのアルゴリズム | 日経クロステック（xTECH）](https://xtech.nikkei.com/atcl/nxt/column/18/00321/113000005/)
- [組合せ最適化問題とは - Annealing Cloud Web](https://annealing-cloud.com/ja/knowledge/1.html)
draw.ioで列を追加する方法

draw.ioでＥＲ図を作成している時にテーブルの列を追加する方法が分かりづらく、少し時間が掛かったのでやり方を書いてみます。
![スクリーンショット 2021-05-22 151631.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1532817/dd032d6d-3e8e-8056-51cf-e7b759b8253c.jpeg)
今回は「commentテーブル」の、ＦＫの列を追加してみます。


１．増やしたい列を選択して、右側の「Arrange」を選択
２．赤枠で囲ったボタンを押すことで、上下に列が追加
３．列が追加されたことを確認
![スクリーンショット 2021-05-22 152637.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1532817/8163f5b1-6166-00ba-edbb-db2ef5fced00.jpeg)
簡単ですね。
列を増やすことができました。
以上になります。
「30日でできる！OS自作入門」をMacのHighSierraでできるようにするまで(Q.appのdownload解決)

#はじめに
上手くいかなくて悩んでる人は[30日でできる！ OS自作入門 Macで頑張る(環境構築)](https://qiita.com/lilybrevec/items/fea8adbb63410590e123)を見ればできると思います(というか自分ができた)。しかし、いい機会なので自分なりにまとめます。

#自分の行動log
1:Macでいきなり進めるわけも無く、[『30日でできる！OS自作入門』を macOS Catalina で実行する](https://qiita.com/noanoa07/items/8828c37c2e286522c7ee#3-%E3%82%A8%E3%83%9F%E3%83%A5%E3%83%AC%E3%83%BC%E3%82%BF-qemu)に泣きついたがまだday1なのに色々と情報過多のため一旦置いといて参考の欄を漁ってみる。(あ、でもバイナリエディタは貰っといた)
漁った参考ページは
[30日でできる!OS自作入門　まとめ - サラリーマンがハッカーを真剣に目指す](http://bttb.s1.valueserver.jp/wordpress/blog/2018/04/17/makeos/)
これの1日目を見てから、改めて本を読み返したらコンソールという言葉に引っかかる。
2:コンソールと自作OSについて調べる。多分コンソール自体がよく分からんから実際にどうやっているのか見たかったんだと思う。そこで[Yabu.log 30日OS自作本１日目](https://yuyubu.hatenablog.com/entry/2018/04/30/30%E6%97%A5OS%E8%87%AA%E4%BD%9C%E6%9C%AC%EF%BC%91%E6%97%A5%E7%9B%AE)を見つける。ただし、参考にしたのは1日目ではなくの[環境構築のページ](https://yuyubu.hatenablog.com/entry/2018/02/10/%E3%80%8C30%E6%97%A5%E3%81%A7%E3%81%A7%E3%81%8D%E3%82%8B%EF%BC%81_OS%E8%87%AA%E4%BD%9C%E5%85%A5%E9%96%80%E3%80%8D%E3%81%AE%E6%9C%80%E5%88%9D%E3%81%AEOS%E3%83%96%E3%83%BC%E3%83%88%E3%81%BE%E3%81%A7)。
3:ここで自分の中でMacでの自作OSのための環境構築二代巨頭と呼んでいる
[sandaiさんのGithub](https://github.com/sandai/30nichideosjisaku)
[tatsumackさんのGithub](https://github.com/tatsumack/30nichideosjisaku)
に出会う。
4:sandaiさんの方はQ.appとかいうのDLしてて面倒そうなのでtatsumackさんの方を参考に進める。
5:何故かqemuがinstallできない=詰んだ。色々と調べても原因が分からない。
6:仕方ないのでsandaiさんの方で進めてみる。取り敢えずz_toolsまでは上手くいった。
7:[Q.appのDLページ](https://www.kronenberg.org/)にあるDownload for freeをclickしても一向にdownloadできない(また詰んだ臭いな)。
8:上述した[30日でできる！ OS自作入門 Macで頑張る(環境構築)](https://qiita.com/lilybrevec/items/fea8adbb63410590e123)を見つけ、そこでQ.emulatorのページを紹介しており無事downloadできた。
9:HariboteOSを作りsandaiさんの手順通りにcurl~をやるも上手くいかない。原因はcdで変なdirectoryに行っていたのを忘れてそこでcurl~を実行したせい。
10:しっかりとHariboteOSがあるHomeDirectoryまで戻ってからcurl~を実行する。
11:helloos0まで移動してからmake runを実行する。無事に下記の画像通り表示され成功！！
![スクリーンショット 2021-05-22 15.34.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706236/a5fcd3dd-583c-b18d-cc30-3dcb2c06a964.png)

#終わりに
いつも思うけど環境構築苦手だわ。今回は一時間ぐらいでできたから本当に良かった。先駆者の皆さん本当にありがとうございます。

#参考文献まとめ
[『30日でできる！OS自作入門』を macOS Catalina で実行する](https://qiita.com/noanoa07/items/8828c37c2e286522c7ee#3-%E3%82%A8%E3%83%9F%E3%83%A5%E3%83%AC%E3%83%BC%E3%82%BF-qemu)
[30日でできる!OS自作入門　まとめ - サラリーマンがハッカーを真剣に目指す](http://bttb.s1.valueserver.jp/wordpress/blog/2018/04/17/makeos/)
[Yabu.logでの環境構築ページ](https://yuyubu.hatenablog.com/entry/2018/02/10/%E3%80%8C30%E6%97%A5%E3%81%A7%E3%81%A7%E3%81%8D%E3%82%8B%EF%BC%81_OS%E8%87%AA%E4%BD%9C%E5%85%A5%E9%96%80%E3%80%8D%E3%81%AE%E6%9C%80%E5%88%9D%E3%81%AEOS%E3%83%96%E3%83%BC%E3%83%88%E3%81%BE%E3%81%A7)
[sandaiさんのGithub](https://github.com/sandai/30nichideosjisaku)
[tatsumackさんのGithub](https://github.com/tatsumack/30nichideosjisaku)
[30日でできる！ OS自作入門 Macで頑張る(環境構築)](https://qiita.com/lilybrevec/items/fea8adbb63410590e123)
Muralのファシリテーター権限で使える機能(覚書・改)

Muralのゲストとファシリテーターで使える機能が違うのだけれど、すぐに忘れてしまうのでメモ。

## ファシリテーター権限のみ使えるのは、以下の9つ。
* タイマー
* 招集
* アウトラインの編集
* 特別なロック
* ボードのサイズと背景色変更
* 御祝い機能
* みんなのカーソルを隠す
* プライベートモード
* レーザーポインタ

![MuralFacilitationSuperpowers.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73918/029e4407-918f-f510-eb85-209de065f026.png)

以下、ダイアログのざっくり訳を載せておきます。


### Facilitation Superpowers(ファシリテーションスーパーパワー)
Facilitator Superpowers are tools to help set up your murals and run productive meetings or workshops.
ファシリテータースーパーパワーは、Muralsを設定し、生産的な会議やワークショップを実行するのに役立つツールです。

### Timer(タイマー)
Use the Timer stay focused and on schedule. If you need more time for an activity, you can add extra time on the fly.
集中してスケジュールどおりに進むよう、タイマーを使用できます。 アクティビティにもっと時間が必要な場合は、その場で時間を追加できます。

### Summon(召喚)
Make sure everyone is looking at the same thing at the same time by summoning all partcipants to where you are in the mural.
Mural上のあなたのいるところに全ての参加者を召喚することによって、全員が同時に同じものを見ているようになります。

### Outline, Instructions, and Hide/Reveal steps(アウトライン、手順、および非表示/表示の手順)
Use the Outline to guide people through your mural. Add instructions, and hide steps you're not ready for people to see.
アウトラインを使用して、Muralを通して人々をガイドできます。 手順を追加したり、他の人が見る準備ができていないステップを非表示にしたりできます。

### Super Lock(スーパーロック)
Any element you lock can only be unlocked by members with Facilitation Superpowers, so your content stays where you want it.
ロックした要素は、ファシリテーションスーパーパワーを持つメンバーのみがロックを解除できるため、コンテンツは必要な場所にとどまります。

### Change the mural size and background color(Muralのサイズと背景色を変更する)
Customize your mural to fit the needs of your session.
セッションのニーズに合わせてMuralをカスタマイズします。
You can also modify the mural size by dragging the bottom and right edges.
下端と右端をドラッグしてMuralのサイズを変更することもできます。

### Celebrate(祝う)
Is a teammate having a birthday? Did your team reach a milestone? From your avatar menu you can throw confetti to celebrate together.
チームメイトは誕生日を迎えていますか？ あなたのチームはマイルストーンに到達しましたか？ アバターメニューから、紙吹雪を投げて一緒に祝うことができます。

### Hide everyone's cursors(全員のカーソルを非表示にする)
Switch off the cursors for everyone in your mural. Facilitators' cursors will remain visible.
Muralの全員のカーソルをオフにします。 ファシリテータのカーソルは表示されたままになります。

### Private Mode(プライベートモード)
During Private Mode, people can only see content they've added themselves. When you end Private Mode, all content will be visible for everyone.
プライベートモードでは、ユーザーは自分で追加したコンテンツのみを表示できます。 プライベートモードを終了すると、すべてのコンテンツがすべてのユーザーに表示されます。

### Laser Pointer(レーザーポインタ)
Direct participants to specific content in your mural by holding the H key to activate the pointer.
Hキーを押したままにしてポインタをアクティブにすることにより、参加者をMuralの特定のコンテンツに誘導します。
type="reset"とtype="submit"について

# はじめに
自分用のメモです。参考程度に。

# 〇フォーム値のクリア処理実装について
フォームの入力値のクリア処理を行いたいと思い、「type="reset"」でできるということで実装しました。しかし、「type="reset"」の挙動を正しく理解できておらず結果として修正することになりました。

## 結論
フォーム入力値のクリア処理は、「type="reset"」を使うのではなく、別途クリア処理を自分で実装しよう！

## 製作物
その際、作成していたフォームは以下のような構造でした。
入力画面→確認画面→送信画面　（確認画面から入力画面に戻る際は、入力値をフォームに反映）

確認画面から入力画面に戻った際に、「type="reset"」で実装したクリア処理を行うとフォームの値がクリアされませんでした。

## 原因
「type="reset"」は、「HTMLが読み込まれた段階での値に戻す」という仕様であった。
そのため、確認画面から入力画面に戻る際、入力値を初期値として反映させていたためフォーム値が空にならなかった。

## 対策
フォームの入力値を空にする処理を別途実装する。
また、実装の際はなんとなく使うのではなく、仕様について調べてから取り組む。

``` Html
例）js側で、クリア処理を実装している場合
<button type="button" onclick="clearForm()">クリア</button>
```


# 〇送信処理について
フォームの送信ボタンになにげなく「type="submit"」を使っていました。しかし簡単に送信ボタンが実装できる反面、Enterボタンを押すと送信してしまう。
→誤送信につながるためあまりよくない...。

そういったこともあり、現場では「type="submit"」を使わない。

## 対策
送信処理を別途実装し、送信ボタンがクリックされたときに実装した送信処理を行う。

``` Html
例）js側で、送信処理を実装している場合
<button type="button" onclick="submit()">送信する</button>
```

# おまけ
現場によるのかはわからないが、inputタグは基本使わずbuttonタグを使うという話を聞いた。


# おわりに
今まで特に何も疑わず実装していたものが、実はあまりよくなかったということを学んだ。
関数など使う際、なんとなく使わず仕様についてある程度理解してから使うよう心掛ける。
ViewControllerのLifeCycle(ライフサイクル)



# LifeCycle（ライフサイクル）とは
日常生活でも聞くことが多いライフサイクルと言う単語ですが、swiftのライフサイクルとはUIKitによって提供され、**アプリの起動、状態遷移、終了などを管理する概念**のことです。
それに付随するものとして、ViewControllerの**ライフサイクルメソッド**というものがるので、今回はそれについて紹介していきます。

# ViewControllerのライフサイクルメソッド
ViewControllerは以下のライフサイクルメソッドを持ちます。

- loadView
- viewDidLoad
- viewWillAppear
- viewDidAppear
- viewWillLayoutSubviews
- viewDidLayoutSubviews
- viewWillDisappear
- viewDidDisappear

viewDidLoadはviewController生成時にデフォルトで書かれているため、馴染み深いと思います。



## loadView
viewを生成したときに一度だけ呼ばれます。あまり使う機会はないかもしれません。

## viewDidLoad
viewをメモリに読み込んだときに一度だけ呼ばれます。**navigationやmodalから戻ってきたときには呼ばれないので、注意が必要です。**

## viewWillAppear
viewがメモリから読み込まれて、実際に画面に表示される直前に呼ばれるメソッドです。**navigationやmodalから戻ってきたときにも呼ばれます。**


## viewDidAppear
viewがメモリから読み込まれて、実際に画面に表示された直後に呼ばれるメソッドです。（ヒエラルキーに追加される、といいます）

## viewWillLayoutSubviews
UIパーツをaddSubViewするときや、デバイスの画面の向きが変更される直前に呼ばれるメソッドです。

## viewDidLayoutSubviews
addSubViewなどの処理が完了した直後に呼ばれるメソッドです。
ここで見た目が確定されるので、boundsなどのプロパティを利用する処理がある場合はここに書きます。

## viewWillDisappear
viewが画面から削除される直前に呼ばれるメソッドです
たとえnavigationController等で遷移したとしても、画面から削除されているということになるので、呼ばれることになります。viewWillAppearと対応させると覚えやすいです。

## viewDidDisappear
viewが画面から削除された直後に呼ばれるメソッドです。（ヒエラルキーから取り除かれる、といいます）

<br>
<br>


これでライフサイクルメソッドは最後です。たとえば
- 背景色の変更やボタンの丸みの変更など、一度実行すれば良い処理をviewWillAppearに記述する。
- モーダル遷移先でデータの変更をして、それを反映させる処理をviewDidLoadに書いてしまい、画面に値が反映されない。
といった問題を起こさないためにも、ライフサイクルメソッドを理解することは重要となります。

# サンプルアプリ
ライフサイクルの順序や実行されるかどうかを実際に確認するために、サンプルアプリを作成しました。それぞれのライフサイクルメソッドの中で、関数名を出力するようになっています。
navigationでの遷移やtabBarでの遷移とも絡めてコンソールに出力される様になっているので、もっと細かく知りたいという方は、ぜひgitからクローンして、いろいろな処理を試してみてください。


![スクリーンショット 2021-05-22 14.31.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/861241/5a204e26-7823-8f6c-4751-36cf5efbf2d7.png)
[- ライフサイクルサンプルアプリ](https://github.com/miyakooti/practice/tree/master/viewcontroller_lifecycle)


# さいごに
意外と処理通りの命名規則のため、英語がわかれば覚えやすいと思います。
みなさんもライフサイクルメソッドを理解して、処理を適切な場所に記述してみましょう！

# 参考文献
https://developer.apple.com/documentation/uikit/app_and_environment/managing_your_app_s_life_cycle


https://shiba1014.medium.com/viewcontroller%E3%81%AE%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB-37151427bda5
TypeScript型定義ファイルの置き場所

他にもやり方はあるようだが、一つの簡単なやり方。

外部に export する関数に対して

```typescript
// src/main.ts
export function someFunc(a: number): string {
  return `Got ${a}`
}
```

`index.d.ts` に型定義を書いて、どこかに置く。例えば、`src/index.d.ts`

```typescript
// src/index.d.ts
export function someFunc(a: number): string;
```

そして `package.json` の `main` に外部に export するファイルへのパス、`typeings` に型定義ファイルへのパスを指定する。

`src/main.ts` が `dist/main.js` にトランスパイルされるとするなら、

```javascript
// package.json
{  
  "main": "dist/main.js", 
  ...
  "typings": "src/index.d.ts",
  ...
}
```
React(importとexport) とらゼミ07 && (React Hooks) とらゼミ08 && (useEffectメソッド) とらゼミ09 メモ

※exportとimportを詳しく知りたい時はハンズオンjavascriptを見た方が良い。
## モジュール化とは
- 基本的には1ファイルに1モジュール。
- 任意の場所で使うことができる。
- 分割統治できる。
- 再利用できる。

## 名前なし(default)エクスポート。
- ES6で推奨されているエクスポート。
- クラスをエクスポートできる。

# React Hooks
## フック(Hook)とは
- クラスの機能(stateやライフサイクル)をFunctional componentでも使える。
- あくまで選択肢の一つ。

## useState()
- ステートフック。
- this.stateとthis.setStateの代替。
- 複数のstateを使う時はstate毎に宣言。

### 使い方
![2cb82c93-910f-bec3-0fa0-ebb9f68d6365.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1100170/4b0c7aa5-75c1-d68c-b42e-f85e8d4b4c1a.png)


## useEffect()
- ライフサイクルメソッドの代替できる。
- functional componentでライフサイクルが使える。

###書き方1
- useEffect内でCallBack関数を書く。
- CallBackはレンダー毎に呼ばれる。
- returnするCallBackはunmount時に呼ばれる(クリーンアップ関数)。

###書き方2
- マウント時のみ実行。
- useEffectは第二引数の配列内の値を前回レンダーと今回レンダーで比較、変更があればCallBack関数を実行。

###書き方3
- マウント、アンマウント時のみ実行。
- 1,2の複合。

###書き方4
- 特定のレンダー時実行。
- buttonなどで第二引数の値が変わった時に実行。
React(コンポーネントのライフサイクル) とらゼミ06 メモ

## ライフサイクル
- コンポーネントの「時間の流れ」。
- 生まれて、成長して死ぬまでの循環。
- それぞれの段階で必要な処理を必要。

## 三種類のライフサイクル
- Mounting : コンポーネントが配置される(生まれる)期間。
- Updating : コンポーネントが変更される(成長する)期間。
- Unmouting : コンポーネントが破棄される(死ぬ)期間。

## なぜライフサイクルを使う？
- **関数の外に影響を与える関数**を記述するため。
DOM変更、API通信、ログ出力、setState().....etc
- 副作用 = 適切な場所に配置すべき処理。

## ライフサイクルの流れ。
![ec873f34-66ea-4f00-09ea-af9f8fdeb167.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1100170/cb04cf40-3789-c03c-a3a1-1e1f5b15782d.png)

### Mounting(始動時)
入学式、準備期間。
componentDidMount() : renderの後に一度だけ呼ばれる、リスナーの設定やAPI通信に使われる。

###  Updating(更新)
何度も呼ばれる、再利用。
componentDIdUpdata() : 再レンダ後に呼ばれるスクロールイベントや条件付きイベント。 

### Unmouting(終了)
コンポーネントの破棄、葬式。
componentWillUnmount() : コンポーネントが破棄される直前にリソースの解除
React(コンポーネントの状態 = stateの設定と取得) とらゼミ05 メモ

## 状態(state)とは
- コンポーネント内で管理する変数。
- local state 呼ばれる。
- propsとして子コンポーネントに渡せる。

## 何故stateを使うのか
- renderメソッドの中では**値を変更してはいけない。** (無限ループになる可能性があるから)
- setState() セッターで値を変更する。
- stateの変更 = 再レンダーのきっかけ => ページリロードせずに表示を切り替えられる。

> レンダリング/レンダー(render)とは : webブラウザのウィンドウ内にページ内容の描画を行うことを言う。とらゼミ01でも解説済み。

## stateの設定方法
- functional componentはstateを持つことができないので、class componentが前提となる。
- constructor内で宣言する。
- オブジェクト型で記述。

例)

```react
class Blog extends React.Component {
    // コンストラクタ
    constructor(props){
        super(props)
        this.state = {
            isPublished : false
        }
    }
}

export default Blog;
```
## stateの取得
- 同一コンポーネント内で取得するなら this.state.isPublished (コンポーネント内の変数内なのでthisをつけた後、stateのオブジェクトのキーであるisPublishedをつける)。
- 子コンポーネントで参照したい場合はpropsとして渡す。

子コンポーネントに渡す例)

```react
class Blog extends React.Component {
    // コンストラクタ
    constructor(props){
        super(props)
        this.state = {
            isPublished : false //stateの値。
        }
    }
    // renderメソッド
    render(){
        return(
            <>
                <Article 
                    title="React" 
                    order={100}
                    isPublished={this.state.isPublished} //stateを渡す。
                />
            </>
        )
    }
}

export default Blog;
```
子コンポーネント側の受け取る例)

```react
import React from 'react'

const Article = (props) => {
    return (
        <div>
            <h2>{props.title} + {props.order}</h2>
            <label htmlFor='check'>公開状態</label> //ラベル設定は htmlForで行う。
            <input type='checkbox' checked={props.isPublished} id='check'/>
        </div>
    )
}

export default Article;
```
これだとcheckboxに対するcheckedのstateがfalseのままなので永遠にクリックできない、なのでstateの値を変更する必要がある。

## stateの変更方法。
- setState()を使う。
- 関数にラップするのが一般的。
- setState内に記述されたstateのみを変更。

 例) render関数と同じファイルに記述。

```react

togglePublished = () => {
        this.setState({
            isPublished : !this.state.isPublished
        })
    }
```
これを子コンポーネントで使うためには関数毎渡してやる必要がある。
アロー関数の形で渡す必要がある。

例)

```react
render(){
        return(
            <>
                <Article 
                    title="React" 
                    order={100}
                    isPublished={this.state.isPublished}
                    toggle={() => this.togglePublished()} // アロー関数。
                />
            </>
        )
    }
```

### 何故関数は関数の形で渡してあげなければならないか？
```react
render(){
        return(
            <>
                <Article 
                    toggle={this.togglePublished()} //　ここ
                />
            </>
        )
}
```
この形で渡してしまうと、この時点で関数が実行されてしまい、その時点でstateが変更され無限レンダーに入ってしまうので、toggleを実行すると関数が実行されると言う形で渡す。

### stateを子コンポーネントで受け取る。
```react
const Article = (props) => {
    return (
        <div>
            <h2>{props.title} + {props.order}</h2>
            <label htmlFor='check'>公開状態</label>
            // onClickの関数として受け取る。 
            <input type='checkbox' checked={props.isPublished}  onClick={() => props.toggle} id='check'/>
        </div>
    )
}
```
再び無限レンダーを避けるため、onClickを発動した時関数が実行されるようにする。
**onClick実行 -> toggle関数実行 -> togglePublished関数実行 -> setState()実行 -> state変更。**
React(コンポーネントの基本)  とらゼミ04 メモ

# コンポーネントとは
 とらゼミ01にて記述。
## 何故コンポーネントを使うのか。
 - 再利用するため。
 - 分割統治するため、コンポーネントのツリー構造的にも細かく分かれている。
 - 変更に強くするため。
 
## コンポーネントの種類
### Class component 
クラスによって定義されたコンポーネント。
例)

``` react
import React from 'react';

class Article extends React.Component {
    // コンストラクタ
    constructor(props) {
        super(props)
    }

    //renderメソッド
    render() {
        return(
            <div>
                <h2>{this.props.title}</h2>
            </div>
        )
    }
}
```
#### 特徴
- React.Componentを継承。
- ライフサイクルやstateを持つ。(ライフサイクルはとらゼミ05を参照)
- propsにはthisが必要。
- 2020年4月現在あまり推奨されていない。

### functional component 
関数型で定義されたコンポーネント。
例)

```react
import React from 'react';

const Article = (props) => {
    return (
        <div>
             <h2>{props.title}</h2>
        </div>
    )
}
```
#### 特徴
- ES6のアロー関数で記述。
- stateを持たない(stateless)。
- propsを引数に受け取る。
- JSXをreturnする。

## React.Fragment
コンポーネント内でコンポーネントを使う際、必ずタグで囲む必要がある。

```react
lass Blog extends React.Component {
    //  コンストラクタ
    constructor(props){
        super(props); //スーパークラスのコンストラクタ。
    }
    // renderメソッド
    render(){
        return(
            <div>
                <Article />
            </div>
        )
    }
}
```
divで囲んんでもいいがweb画面でElement構造を見てみると、かなり汚くなる。

![49df3966-ad06-8922-1734-64a26087ce97.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1100170/4b407fc8-32ed-8c20-878e-1d86cdc37a40.png)

こう言う時にコンポーネントを**React.Fragment**タグで囲むと。

![95c1ae90-f4c7-5c4f-589a-bddd28e93a9e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1100170/e04effc4-385d-05ce-164c-8fbdf0cb7efe.png)

divタグが無くなり、かなりスッキリする。
ただしdivが要らない訳じゃ無いので、場合によって使い分ける必要がある。

## propsでデータを受け渡す。(引数名はprops固定ではない)
- 子データ、 コンポーネントを使われる側、propsを介してデータを受け取る。

```react
mport React from 'react'

const Article = (props) => {
    return (
        <div>
            <h2>{props.title}</h2>
        </div>
    )
}

export default Article;
```
- 親コンポーネント、コンポーネントを使う側、propsに名前と値を送る。

```react
import React from 'react'
import Article from './Ariticle.jsx'

const Blog = () => {
    return(
        <React.Fragment>
            <Article title = {"React"}/>
        </React.Fragment>
    )
}

export default Blog;
```

### 受け渡せるデータ型
{}内に書けば文字列、数値、真偽値、配列、オブジェクトなんでも渡せる。
文字列は「{ }」  無しでも大丈夫。
python opencvを用いたコードのexeファイル化(Pyinstaller)

#概要
近年普及しているpythonはコーディングが容易であり画像処理、機械学習をはじめバックエンドの処理まで幅広い機能の構築が可能である。そんなpythonを用いてopencvを使用したコードをexe化する際に躓いたので覚書

#問題
pyinstallerを用いてopencvの使用されているコードをexe化するとcv2内で使用しているnumpyのimportが完了できず動作しない

#解決方法
opencvをpipでDL後同時にインストールされているnumpyを一度削除。その後numpyのバージョンを1.15.0に指定してDL

#おまけ
pyinstallerにて--noconsoleを指定するとエラーが発生することがある。
原因はexe化後のpathをコードが上手く認識できない様子。。。。。
そこでpathを指定する際に以下の関数を通すことで回避できる。

```
def resource_path(relative_path):
    try:
        # PyInstaller creates a temp folder and stores path in _MEIPASS
        base_path = sys._MEIPASS
    except Exception:
        base_path = os.path.abspath(".")

    return os.path.join(base_path, relative_path)
```
GAS(Google Apps Script)で自動VLOOKUPっぽいことをしてみました

<br>
GAS（Google Apps Script）を使って、Google Spread Sheet上でVLOOKUPっぽいことをしてみました。
そもそも最初から、スプレッドシートにVLOOKUP関数いれとけばいいじゃんって話なのですが、わけあって、こんなことをしてしまいした。
<br>


##やったこと
このような顧客リストシートがあるとして、
<img width="350" alt="573b70e87fae0c68f6bc55417281012d.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/59269d05-8b25-821d-a139-1f7376d57cd2.png">


「入力シート」のA列に、会員番号を入力すると、自動的に名前が出るようにします。

[![Image from Gyazo](https://i.gyazo.com/112a056f5bfc77579fb8672a01136f67.gif)](https://gyazo.com/112a056f5bfc77579fb8672a01136f67)





##手順

ツール　>　スクリプトエディタ
を起動し、以下のコードを入力

```JS:sample.gs
function myFunction() {
  const inputSheet = SpreadsheetApp.getActiveSheet(); //シートを取得
  const inputCell = inputSheet.getActiveCell(); //アクティブセルを取得

  //アクティブセルがシート「入力シート」のA列かを判定し、vlookup関数実行
  if( inputSheet.getName()=="入力シート" && inputCell.getColumn()==1 ){ 
    const value = inputCell.getValue();
    const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("会員リスト");
    const name =  vlookup(value,sheet,2); //vlookup関数呼び出し
    const inputRow = inputCell.getRow();
    inputSheet.getRange(inputRow, 2).setValue(name); 
  }
}

function vlookup(value,sheet,column) {
  let returnValue = "なし";
  for (var i = 2; i <= sheet.getLastRow(); i++) {
    if(value == sheet.getRange(i,1).getValue()){
      returnValue = sheet.getRange(i,column).getValue();
      break;
    }
  }    
  return returnValue;
}
```

<br>

あとは、
トリガーを「編集」に設定し、
デプロイ！


以上です。

<br>