OmniAICreator/Qiita-1.07M huggingface dataset:
[git]特定のcommitまで戻ってブランチを切る方法 

# はじめに
結合テスト中とかにはローカルでは動いてたけどいざステージング環境に載せたら動かないってなった場合に、どの時点では動いていたか確認するときに便利

# コマンド
```
git checkout [該当のcommitのハッシュ値] -b test-branch
```
Springって何なのか気になったので調べてみた

##はじめに
Railsチュートリアルを進めていく中でちょくちょく見かけた「spring」という単語。テストエラーに困ったときに```$spring stop```,```$spring start```とすると上手くいった時があったのですが、そもそも「spring」というのが何なのか分からなかったので調べてみました。

##Springとは
アプリケーションをバックグラウンドで実行し続けることによって開発をスピードアップするRailsアプリケーションプリローダーとのこと。

バックグラウンドとは
>背景という意味。複数のウィンドウが実行されている場合に、奥にあるウィンドウや見えないところで動作することを指す。

引用元URL https://kotobank.jp/word/%E3%83%90%E3%83%83%E3%82%AF%E3%82%B0%E3%83%A9%E3%82%A6%E3%83%B3%E3%83%89-7372

プリローダーとはpre(前に)loader(ロード)、つまり前もってロードしておくという意味。

2回目以降のbin/rails,bin/rakeのコマンドの時間を短縮することができ、アプリケーションの開発効率を上げることができる。

たしかに```$rails test```をする時最初は結構時間が掛かるけど、2回目以降は早い…。陰ながらアプリケーション開発を支えていてくれてたのですね。

##使い方

Rails 4.1 以降であればデフォルトでGemfileに'spring'が書かれているようです。つまり、```$bundle install```のコマンドを実行してしっかりインストールできれば基本的にこちらは何もしなくても大丈夫。

##最後に
今回はspringについて調べてみました。僕と同じ疑問を持った初学者の方に少しでも役に立てれば幸いです。

Rails tutorialを進めていく上で分からないところ、自分で整理したいことを他にも記事にしているのでよかったらぜひ。
Flaskの初期設定

# はじめに

ここでは、Flaskを始めるときの初期設定について解説します。

# `__init__.py`の設定

用いるデータベースやアプリケーションによってやや変わりますが、`__init__.py`は以下のようにします。

```python:__init__.py
import os

from flask import Flask

from . import db, auth, views


def create_app(test_config=None):
    app = Flask(__name__, instance_relative_config=True)
    app.config.from_mapping(
        SECRET_KEY = 'dev', # 開発用
        DATABASE = os.path.join(app.instance_path, 'プロジェクト名.sqlite'),
    )

    if test_config is None:
        app.config.from_pyfile('config.py', silent=True)
    else:
        app.config.from_mapping(test_config)

    try:
        os.makedirs(app.instance_path)
    except OSError:
        pass

    
    db.init_app(app)

    app.register_blueprint(auth.bp)
    app.register_blueprint(views.bp)

    app.add_url_rule('/', endpoint='index')

    return app
```

`SECRET KEY`はとりあえず開発用に設定しているだけで、デプロイ時には変更する必要があります。
また、`init_app`はアプリケーションの初期化用のメソッドです。後日の記事で解説します。
`app.register_blueprint`は、ここでは例として`auth`と`views`について記述していますが、blueprintを設定しているアプリケーションそれぞれについて記載しておく必要があります。
`add_url_rule`では、今回の例ではインデックスページのURL指定をしています。


# まとめ

ここでは、Flaskのプロジェクトを始めるときの初期設定について解説しました。
データベースやアプリケーションの設定については後日取り上げる予定です。
Einstein Analytics - Integrationユーザが権限を持っていないオブジェクト項目一覧の取得

#背景
Einstein AnalyticsでSalesforceオブジェクトからデータセットを作成するときは、Integration Userという内部ユーザでオブジェクトを参照します。新規に作成したカスタム項目など、Integration Userが読むことができない項目はデータセットに取り込むことができません。データフローが失敗したり、データマネージャの接続の画面で接続済データの項目が選択できなかったりします。
問題が発生した時点でIntegration Userに項目の参照権限を与えて頂ければ問題ありません。
ただ、現在Integration Userが**参照できない**項目を一覧する機能がありませんので、この機能を作成しました。

ちなみに**参照できる**項目については以下のSOQLで得ることができます。

```SQL
SELECT Field FROM FieldPermissions WHERE ParentId IN 
(SELECT Id FROM PermissionSet WHERE PermissionSet.Profile.Name = 'Analytics Cloud Integration User')
```

#実行手順
###デプロイ
コードは[こちら](https://github.com/az-ak/AnalyticsUserPermCheck)で公開してます。
[force-app/main/default/classes/AnalyticsUserPermCheck.cls](https://github.com/az-ak/AnalyticsUserPermCheck/blob/master/force-app/main/default/classes/AnalyticsUserPermCheck.cls) が本体です。任意の方法でデプロイしてください。
設定 > Apexクラス > 新規 からコピペしていただいても構いません。
###Testメソッドの実行
ここでは開発者コンソールを使用する方法を紹介します。

#####Debugログレベルの事前調整
全オブジェクトの全項目を調べるため、Debug Logがかなり大きくなり最大サイズに達してします可能性がありますので事前に必要なログだけ取得できるレベルに調整します。
![DebugLogLevels.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144149/dcfe6f63-4d71-b1ab-60e7-875439bce92e.png)
Debug > Change Log Levels　から Change Log Levels の画面を開きます。General Trace Settings for you の DebugLevel Action をクリックし、ApexCode のみ DEBUG としておきます。ほかは NONE で構いません。
#####Testメソッドの実行
Test > New Run から AnalyticsUserPermCheck クラスを選択し、checkPermIntegrationUser メソッドにチェックを入れ、Selected Test でこのメソッドを選択して右下のRunを押下するとテストが実行されます。
![RunTest.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144149/7214ca7b-f279-a32e-66ff-d5af91c62acf.png)

#####Debug Logの確認
実行が終わると、Logsのペインに実行時のタイムスタンプでログが作成されていることがわかりますので、これをクリックします。
![DebugLog.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144149/e9750727-d513-0b9f-f84c-e39c68c3af73.png)
上図のように Integration User がアクセスできない項目が一覧されます。（ログレベルを調整しなかった場合は、他のログに紛れて見にくいので DEBUG という文字列でフィルタしてください。）
Flutter によるスマホアプリ開発

# はじめに
Flutter (フラッター) は、Googleによって開発されたフリーかつオープンソースのモバイルアプリケーションフレームワークです。FlutterはAndroidやiOS向けのアプリケーションの開発に利用されています。

様々なUIパーツが初めから用意されており、組み合わせることで簡単にUIを実装することができます。
<img width="343" alt="スクリーンショット 2020-05-05 22.34.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/229633/8472a2b3-96da-27a7-4868-e840fc781335.png">
プログラミング言語には「Dart」を使用します。
_※JavaScriptやJavaの開発経験者であれば、簡単に理解出来ると思います。_

https://twitter.com/pirorororonn/status/1254773673380085761

Flutterの開発環境構築とプロジェクトを作成する方法を備忘録としてまとめます。

# 事前準備

公式ドキュメントや開発環境の構築方法について把握します。

## ドキュメント

#### Flutter
公式サイト : https://flutter.dev/

* [ドキュメント](https://flutter.dev/docs)
* [APIドキュメント](https://api.flutter.dev/)
* [サンプル](https://flutter.github.io/samples/#)


#### Dart
公式サイト : https://dart.dev/

* [ドキュメント](https://dart.dev/guides)

## 参考にした本
* [基礎から学ぶ Flutter](https://amzn.to/3qUVgO3)
* [Flutter　モバイルアプリ開発バイブル](https://amzn.to/2W6sony)


## 環境構築

GitHub のFlutterリポジトリからソースコードを取得し、必要に応じてブランチまたはタグを変更します。
https://github.com/flutter/flutter

```
$ git clone https://github.com/flutter/flutter.git -b stable
```

.bash_profileにflutterツールのパスを追加します。

```
#Flutter
$ export PATH_TO_FLUTTER_GIT_DIRECTORY=/Applications/flutter
$ export PATH=${PATH_TO_FLUTTER_GIT_DIRECTORY}/bin:$PATH
```

`PATH_TO_FLUTTER_GIT_DIRECTORY` はFlutterのgitリポジトリを複製したパスにします。

次のコマンドを実行して、flutter/binディレクトリがPATHに含まれていることを確認します。

```
$ echo $PATH
```

次のコマンドを実行して、flutterコマンドが使用できることを確認します。

```
$ which flutter
```

次のコマンドを実行して、セットアップを完了するために必要な可能性のある他のソフトウェアがあるかどうかを確認します
（詳細出力の場合は、-vフラグを追加します）。

```
$ flutter doctor
```

# 実装

## 新規プロジェクト作成
新しいアプリを作成するには、次のコマンドを実行し、myappプロジェクトの名前に置き換えます。

```
$ flutter create myapp
$ cd myapp
```

### iOS simulatorで実行する

```
$ open -a Simulator
$ flutter run
```
<img width="312" alt="スクリーンショット 2020-05-05 22.34.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/229633/84e948ed-e89c-5753-247b-c4bc03bd1960.png">
### FlutterやDartのパッケージを使用する
FlutterやDartの各種パッケージは、「Dart packages」で探せます。

* [Dart packages](https://pub.dev/)

Flutterでは、外部パッケージなどの依存関係やアプリの設定は pubspec.yaml に記述します。
次のコマンドを実行すると、pubspec.yamlに記載された外部パッケージなどが取得され、使えるようになります。

```
$ flutter packages get
```

# まとめ
今回はFlutterの開発環境構築を行い、 [サンプルプロジェクト](https://github.com/nekoharuyuki/flutter_test) を作成して、いろいろな動作を検証してみました。
検証からいくつか、メリット・デメリットとして挙げられる点を感じたのでまとめます。

#### メリット
* １つのソースコードで、iOS・Androidの両方で動作するアプリを手軽に開発出来る
* クオリティの高いUIが簡単実装出来る
* Dart言語は、JavaScriptやJavaの開発経験者であれば、簡単に理解出来る

#### デメリット
* 日本での採用事例が少なく、開発者の人口も多くない
* オープンソースライブラリや情報が少ない（日本語で書かれた資料が少ない）
* OSに依存する機能については、各プラットフォームごとに実装する必要がある

また別で、Flutter と [Firebase](https://firebase.google.com/docs/flutter/setup?hl=ja) で、「アプリのアクセス/クラッシュ解析」や「クロスプラットフォームでPUSH通知」や「ログイン認証」などが簡単に実装出来たので、今後まとめていきます。

# 追記
Flutterプロジェクト に Firebase の設定について、 [Flutter アプリに Firebase を追加する](https://qiita.com/nekoharuyuki/items/88ad77d8025ada858404) にまとめました。
Node.js で MongoDB にアクセスする簡単なサンプル

次のページのサンプルを改造しました。
[Quick Start](https://mongodb.github.io/node-mongodb-native/3.3/quick-start/quick-start/)
>MongoDB にはユーザー　scott パスワード tiger123 でアクセスできるとします。

データの挿入

```js:mongodb_insert.js
#! /usr/bin/node
//
//	mongodb_insert.js
//
//					May/03/2020
// ----------------------------------------------------------------
console.log ("*** 開始 ***")

const host = 'scott:tiger123@localhost'
const port = 27017

const MongoClient = require('mongodb').MongoClient
const assert = require('assert')

const url = 'mongodb://' + host + ':' + port

// Database Name
const dbName = 'myproject'
const client = new MongoClient(url,
	{useNewUrlParser: true,useUnifiedTopology: true})

client.connect(function(err) {
  assert.equal(null, err)
  console.log("Connected successfully to server")

  const db = client.db(dbName)

  insertDocuments(db, function() {
    client.close()
	console.log ("*** 終了 ***")
  })
})

// ----------------------------------------------------------------
const insertDocuments = function(db, callback) {
  // Get the documents collection
  const collection = db.collection('documents')
  // Insert some documents
  collection.insertMany([
    {aa : 10}, {bb : 20}, {cc : 30}, {dd : 40}
  ], function(err, result) {
    assert.equal(err, null)
    assert.equal(4, result.result.n)
    assert.equal(4, result.ops.length)
    console.log("Inserted 4 documents into the collection")
    callback(result)
  })
}
// ----------------------------------------------------------------
```

実行結果

```text
$ export NODE_PATH=/usr/lib/node_modules
$ ./mongodb_insert.js
*** 開始 ***
Connected successfully to server
Inserted 4 documents into the collection
*** 終了 ***
```

データを読む

```js:mongodb_read.js
#! /usr/bin/node
//
//	mongodb_read.js
//
//					May/03/2020
// ----------------------------------------------------------------
console.log ("*** 開始 ***")

const host = 'scott:tiger123@localhost'
const port = 27017

const MongoClient = require('mongodb').MongoClient
const assert = require('assert')

const url = 'mongodb://' + host + ':' + port 

const dbName = 'myproject'
const client = new MongoClient(url,
	{useNewUrlParser: true,useUnifiedTopology: true})

client.connect(function(err) {
	assert.equal(null, err)
	console.log("Connected correctly to server")

	const db = client.db(dbName)

	findDocuments(db, function() {
		client.close()
console.log ("*** 終了 ***")
		})
})

// ----------------------------------------------------------------
const findDocuments = function(db, callback) {
  const collection = db.collection('documents')
  collection.find({}).toArray(function(err, docs) {
    assert.equal(err, null)
    console.log("Found the following records")
    console.log(docs)
    callback(docs)
  })
}
// ----------------------------------------------------------------
```

実行結果

```text
$ export NODE_PATH=/usr/lib/node_modules
$ ./mongodb_read.js
*** 開始 ***
Connected correctly to server
Found the following records
[
  { _id: 5eafbfd5a6a9fb12219e7f50, aa: 10 },
  { _id: 5eafbfd5a6a9fb12219e7f51, bb: 20 },
  { _id: 5eafbfd5a6a9fb12219e7f52, cc: 30 },
  { _id: 5eafbfd5a6a9fb12219e7f53, dd: 40 }
]
*** 終了 ***
```
【初心者】Rubyのデータ型・について

データには数値と文字列の2種類がある。


数値データはさらに整数データ（integer）と実数データ(float)に種類が分かれている。

・integerは整数を表示する。

・floatは小数点を表示する。

###pメソッド
データを出力するメソッド。文字列の場合は""で囲んでくれる。対してputメソッドは自分で文字列で囲まないといけない。

###to_fメソッド
数字をfloatクラスに変更するメソッド。

###pメソッドとto_fメソッドを使った例
```
number = "0.08"
puts number
p number.to_f
```

###to_iメソッド
文字列を整数に変換する。つまり小数点を消したい時に使う。


###to_iメソッドとto_fメソッドを使った例


priceをprice.to_fにすればOK。

元々変数が整数であるためそのまま計算すると128/100は1になってしまう。したがって1.28に変えてあげるために```price.to_f```という形にして少数を表示するfloatクラスに変えてあげる。

```
price = 128
weight = 300
amount = ((price.to_f / 100) * weight).to_i
puts "100グラム#{price}円の肉、#{weight}グラムは、#{amount}円です。"
```
【JavaScript】配列の変数を操作する方法（プリミティブ型とオブジェクト型の違い）

#【JavaScript】配列の変数を操作する方法（値渡しと参照渡し）

##配列ではない場合の変数の操作

```js

    let a = 1;
    let b = a;
    a = 3;

    console.log(a);//3
    console.log(b);//1
```

これはlet b = a;の後にa = 3;を実行しても、処理を実行したbには影響を与えない。
プリミティブ（値）型の挙動。JavaScriptの場合は値渡しと呼ぶ。
「引越し前の住所を見ている」と覚えることにする。

##配列の変数の操作

```js

    let a = [1,2];
    let b = a;
    a[0] = 3;

    console.log(a);//[3,2];
    console.log(b);//[3,2]
```

この場合のbは[1,2]ではなく、配列a（の場所）を参照しているため、[1,2]とはならず[3,2]となる。
オブジェクト型（参照型）の挙動。JavaScriptの場合は参照の値渡し（共有渡し）と呼ぶ。
「引っ越し後の住所に転送されている状態」と覚えることにする。

##オブジェクト型（配列）の変数を操作する方法
スプレッド構文(...)を使うことでプリミティブ型のように変数を操作できる。

```js

    let a = [1,2];
    let b = [...a];//let b = a;をスプレッド構文で書いた場合
    a[0] = 3;

    console.log(a);//[3,2];
    console.log(b);//[1,2];
```

##補足
言語により、参照の値渡し、参照渡しと挙動と表現が異なる。
用語を引用する場合は前提条件（本件の場合は言語）を正しく確認する必要がありますね。学びました。

参考:値渡しと参照渡しと参照の値渡しと
https://qiita.com/ur_kinsk/items/949dabe975bdc1affb82

謝辞：shiracamus様
micro:bit 初心者がつまずきやすいポイント

micro:bit初心者が（そうです私のことです）つまずきやすいポイントをいくつか共有しておきます。

### パソコンにセキュリティロックがかかっていてMICROBITドライブにアクセスできない

MakeCodeで作ったプログラムをmicro:bitへ転送するときに、パソコン上にUSBマスストレージとして認識されたMICROBITドライブに.hexファイルをコピーするのですが、なぜかMICROBITドライブが「書き込み禁止」になっていてコピーできません。

[学校のPCでUSBメモリが禁止されている場合の対処方法](https://tfabworks.com/news/5692/)

なるほど、会社のパソコンを使っているためセキュリティロックがかかっていました orz...

上記サイトにもある通り、iPad を使うことにしました。

### プログラム転送中に電源を切ったりリセットボタンを押してはいけない

iPad を使うときは micro:bit とペアリングして、Bluetooth 経由でプログラムを転送します。

大人ならなんとなく**本能的にそんな操作はしない**のですが、こどもたちに触らせるとプログラム転送中でもボタンをカチカチします。そう、プログラム転送中にリセットボタンを押してしまいました orz... そうすると、簡単には復旧できずもうペアリングさえできない状態に陥ってしまいました。こどもって本当に QA（Quality Assurance）向きですね。。

### その状態から復旧するときはパソコンが必要です

セキュリティロックがかかっている → iPad を使う → ペアリングできない → パソコンが必要 → ... 
はい、無限ループです。MakeCode で表現するならこんな感じです。
![image1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/432852/acfc5792-9c2a-a41c-be46-f770fda66bb7.jpeg)

結局、昔の~~使い易かった時代の~~セキュリティロックがかかっていないパソコンを引っ張り出しました。

復旧方法は、最新のファームウェアをこちらからダウンロードしてきます。
https://microbit.org/get-started/user-guide/firmware/

リセットボタンを押したままUSBでパソコンにつなぐと、パソコン上に MAINTENANCE ドライブが現れます。そこにダウンロードしておいたファームウェアの.hexファイルをコピーします。アップデートが終わるとリセットがかかって MICROBIT ドライブに切り替われば成功です。

### ペアリングモードに入るまでA,Bボタンを長押しする

iPad を使ってプログラムを Bluetooth 経由で転送するときに、毎回ペアリングが必要です。

ペアリングのコツですが、A,Bボタンを押しながらリセットを1回押す。そして LED がペアリングモード表示になるまで A,Bボタンを離してはいけません。**A,Bボタンはずっと押しておく**というのがポイントです。

Enjoy micro:bit!!
SQLのCASE文

SQL文のCASE演算子は、列の値や条件式を確認し、結果に応じて値を変化することができる。

####値の時
>CASE　列の値　WHEN　値1　THEN　値1のときに返す値
　　　　　　　（WHEN　値2　THEN　値2のときに返す値）
　　　　　　　（ELSE　それ以外）
END


####条件の時
>CASE　WHEN　条件1　THEN　条件1のときに返す値
　　　（WHEN　条件2　THEN　条件2のときに返す値）
　　　（ELSE　それ以外）
END


式の結果に応じて複数のパターンの結果を得るために有用である。
（例、数値で管理しているカラムにて文字で表示させるときなど）
シェルスクリプトのjoinコマンドでcsv,tsvファイルのinner joinとleft join

# はじめに

複数のデータベースやシステムにデータがまたいでいるとき、それらのデータをidかなにかで結合したいときがあります。

自分のlocalにDBいれて、とりこんでしまえばSQLで結合するのは難しくないです。
そこまでするほどでないとか、DBに取り込むにはデータが多すぎるときは、シェルでさくっとやりたいことがあります。

# joinコマンドのバージョン

次のもの以降なら問題ないと思います。古いバージョンだと、一部使えない機能があります。

```
$ join --version
join (GNU coreutils) 8.32
Copyright (C) 2020 Free Software Foundation, Inc.
License GPLv3+: GNU GPL version 3 or later <https://gnu.org/licenses/gpl.html>.
This is free software: you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law.

Written by Mike Haertel.

```

# 内部結合(inner join)

ヘッダーありの場合は`--header`オプションをつけます。
区切り文字は`-t`でいけます。 csvなら`-t,` でいけます。tsvの場合はタブ文字を認識させるために、`-t $'\t'` とします。 

ファイルの例としては、tsvで、ダブルクォートを囲み文字のものとします

```:test1.tsv
$ cat test1.tsv
"id"    "name"
"1"     "test 1"
"2"     "test 2"
"3"     "test 3"
"4"     "test 4"
```

```:sample.tsv
$ cat sample.tsv
"id"    "tel"
"2"     "031234567"
"4"     "123456789"
```

```bash
$ join --header -t $'\t' test1.tsv sample.tsv
"id"    "name"  "tel"
"2"     "test 2"        "031234567"
"4"     "test 4"        "123456789"
```

# 左外部結合(left join)

`-a`オプションで、マッチしないものも残すファイルを指定します。
左側を残した場合は`-a 1` になります。

```bash
$ join --header -t $'\t' -a 1 test1.tsv sample.tsv
"id"    "name"  "tel"
"1"     "test 1"
"2"     "test 2"        "031234567"
"3"     "test 3"
"4"     "test 4"        "123456789"
```

これだと、マッチしなかった行について、右側のファイルにあるカラムがかけてしまいます。
そのときは、`-o`オプションと一緒に、`-e`オプションを使うことで指定できます。
とくになければ `-o auto` をするのが便利です。両方のファイルのカラムがすべてでます。
（古いバージョンだと、これが使えないので注意）

```bash
$ join --header -t $'\t' -a 1 -o auto -e '""' test1.tsv sample.tsv
"id"    "name"  "tel"
"1"     "test 1"        ""
"2"     "test 2"        "031234567"
"3"     "test 3"        ""
"4"     "test 4"        "123456789"
```

# cross join

あまり使う場面がなさそうですが、両方のファイルのidを残したい場合があります。
いわゆるcross join相当をしたいときです。
`-a 1 -a 2`でできます。


```bash
$ cat sample2.tsv
"id"    "tel"
"2"     "031234567"
"4"     "123456789"
"5"     "050XXXXYYYY"
"6"     "06XXXXYYYY"
```

```bash
$ join --header -t $'\t' -a 1 -a 2 -o auto -e '""' test1.tsv sample2.tsv
"id"    "name"  "tel"
"1"     "test 1"        ""
"2"     "test 2"        "031234567"
"3"     "test 3"        ""
"4"     "test 4"        "123456789"
"5"     ""      "050XXXXYYYY"
"6"     ""      "06XXXXYYYY"
```

# 除外処理

除外したいIDのリストをファイルでもっていて、IDがその除外リスト以外のものだけを抽出したいケースがあります。
-vオプションで残したいファイルの方を指定するだけです。

```:exclude.tsv 
"id"
"2"
"3"
```

```bash
$ join --header -t $'\t' -v 1  test1.tsv exclude.tsv
"id"	"name"
"1"	"test 1"
"4"	"test 4"
```


# 参考リンク

* https://yut.hatenablog.com/entry/20120907/1346975281
* https://qiita.com/motthy/items/c2c445417b677b56ac67
* https://orebibou.com/2017/07/join%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%A7%E8%A6%9A%E3%81%88%E3%81%A6%E3%81%8A%E3%81%8F%E3%81%A8%E4%BE%BF%E5%88%A9%E3%81%AA%E4%BD%BF%E3%81%84%E6%96%B98%E5%80%8B/
* https://qiita.com/doitnow420@github/items/88fa7878282866443803
* https://stackoverflow.com/questions/1722353/unix-join-separator-char
Vue.js Firebase導入概要


Vue.jsプロジェクトへのFirebaseの導入(メールアドレス認証機能)の概要をまとめる。(学習用)

## Firebaseとは

* Google が運営するソーシャルログインや、リアルタイムデータベース機能を提供するサービス(mBaaS)。 
  * 認証やデータ管理のためのバックエンドシステムを用意する必要がなくなり、フロントエンドの開発に専念することが可能になる。

## Firebase導入

### プロジェクト作成

1. **[Firebaseコンソール](https://console.firebase.google.com/?hl=ja)**にログイン。

2. 「**プロジェクトを追加**」を選択。

3. 必要事項を入力。

   * プロジェクト名(必須)
   * Google アナリティクス設定有効化(任意)

   

### Firebaseプロジェクト設定

1. コンソールから、作成したプロジェクトを選択。

2. 以下画像の「</>」部分を選択。<img width="813" alt="スクリーンショット 2020-05-04 14.15.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586535/f572c0f2-4b73-5bd9-4a02-79e50b2d8168.png">


3. Firebaseを導入するアプリのニックネーム(Firebaseコンソール上に表示される)を登録。

4. 以下のように、プロジェクト用の設定情報が表示される(後でコンソールから確認可能)。<img width="829" alt="スクリーンショット 2020-05-04 14.24.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586535/cdc91279-65b9-26e3-d05e-402dc59b9d26.png">

   

### Vue.jsプロジェクトへの適用

*  Firebaseモジュールをインストール。

   ```bash
   npm install --save firebase
   ```

* 上記設定情報の読み込み。

   ```javascript
   import firebase from 'firebase'
   ...
   const config = {
       apiKey: 'YOUR_API_KEY',
       authDomain: 'YOUR_AUTH_DOMAIN',
       databaseURL: 'YOUR_DATABASE_URL',
       projectId: 'YOUR_PROJECT_ID',
       storageBucket: 'YOUR_STORAGE_BUCKET',
       messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
       appId: 'YOUR_APP_ID
   }
   firebase.initializeApp(config);
   ```

## メールアドレス/パスワード認証設定

### Firebaseプロジェクト

1. Firebaseコンソールのプロジェクト画面左側にある「**Authentication**」を選択。
2. 「**Sign-in method**」タブを選択。
3. プロバイダの「**メールアドレス/パスワード**」を選択し、「**有効にする**」をチェックした後、保存。
4. 「**Users**」タブを選択。
5. 「**ユーザーを追加**」を押下し、アプリユーザーのメールアドレス/パスワードを入力し、「**ユーザーを追加**」。

### Vue.jsプロジェクト

#### ログイン処理

```vue
<template>
    ...
    <input type="email" placeholder="Email" v-model="email">
    <input type="password" placeholder="Password" v-model="password">
    <button @click="signIn">Signin</button>
    ...
</template>

<script>
...
	methods: {
    signIn: function () {
      firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(
          // 認証成功時の処理
        ).catch(error=> {
          // 認証失敗時の処理
        })
    }
    ...
  }
</script>
```

#### ログアウト処理

```vue
<template>
...
<button @click="signOut">Sign Out</button>
...
</template>

<script>
...
	methods: {
      signOut: function () {
          firebase.auth().signOut().then(() => {
        		// ログアウト成功時の処理
      	  })
      }   
  }
...
</script>
```



## 参考文献

* [Firebase(公式)](https://firebase.google.com/docs?hl=ja)
「Flutterの環境構築」 ~私文男子の格闘第2話~

#はじめに
(2020/5/4 投稿)
GWは完全に授業ばかり。まあ勉強以外にすることほぼないからいっか。どうも私文男子です。
本日は、Flutterの環境構築を行っていきたいと思います。

Flutterの公式サイトの環境設定手順はとても丁寧ですが、それでも疎い私にとっては重労働だったのでまとめておきます。

Flutterとは何か？なんで初心者エンジニアがFlutterから入ったのか？といったことは

第1話「Flutterについての下調べ」
https://qiita.com/shibundanshi/items/36ee4e92247f4595d64e

こちらの記事からチェックしてくださいね。

ということでガシガシ進めていきます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629658/e66756ef-1456-3436-ab40-2e650828cec3.png)


#前提事項
セットアップ始めて行く前にまずは私の環境紹介と、Flutterのバージョンから。

###私の環境
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629658/75d4b588-a328-2387-11d4-0fc658b1e539.png)

###X Codeバージョン
Version 11.4.1

###Flutterバージョン
Flutter for Mac OS ver1.12.13

#環境構築
###手順1:「Flutter公式にアクセスしFlutterをDL」

まずは[Flutter公式](https://flutter.dev/)にアクセス。
そこから
**「Get Started」をクリック**
↓
**「MacOS」を選択**
↓
**ダウンロードボタンからダウンロード**

これで手順1は完了です。

###手順2:Flutterを動くようにしてみる
Flutterをダウンロードしたら、今度はMacのターミナルを開きます。

####2-1.ターミナルからZIPファイルを展開

任意のフォルダを作成し、そこにZIPを展開します。

```bash
#展開するファイルの指定(Desktopと書いてある部分を任意に変更)
$ cd Desktop 

#展開する
$ unzip ~/Downloads/flutter_macos_v1.12.13+hotfix.9-stable.zip
```

このコマンドがうまく作動して、任意に選択したファイルの中が画像のような状態になっていれば大丈夫です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629658/f666af28-0993-4cdb-0b41-ae4fb36c5388.png)

####2-2 Xcodeのインストール

これはApp Storeからダウンロードするだけです。簡単。
<img width="1440" alt="Xcodeインストール.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629658/3ab0971e-5d03-b378-04d2-0abf83d203cd.png">

インストールできたら、ライセンスの許可をしますか？という旨のメッセージが出てくるので迷わず許可を押しましょう。

####2-3再びターミナルでコマンドを打ち込む

許可ができたら、ここからターミナルでの操作です。
コピぺして貼れば大丈夫です。私の場合はよくわかっていないので1行ずつ貼りました。

```bash
#flutterツールをパスに追加
$ export PATH="$PATH:`pwd`/flutter/bin"

#Flutterを開発バイナリと連携?
$ flutter precache
```

これがうまく実行されると、以下の画像のようなメッセージがターミナルに表示されます。
ここまで来れば手順2はバッチリです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629658/15650cc4-ce72-d87b-1bf0-667e14352826.png)

###手順3: Xcodeのシュミレーターで確認してみる

ここまでくればあとは確認の段階。
Xcodeをずっと前にインストールした方はバージョンを上げておきましょう。
バージョンが最新になっているのを確認して、まずはシュミレーターを開きます。

####3-1 iOSシュミレータを開く
これはGUIで操作してもコマンドを打ち込んでも構いません。

```bash
open -a Simulator
```
iPhoneの画面が出てきたらこの段階はクリアです。

####3-2 シンプルなアプリを作成して実行する
ターミナルにコマンドを打ち込みましょう。
役割はコメントアウトで示してあります。実行に時間がかかる物もあるので1行ずつがベターでしょう。

```bash
#新しいFlutterアプリ(my_appという名前)を作成
$ flutter create my_app

#ディレクトリ移動
$ cd my_app

#シュミレーターでアプリ起動
$ flutter run
```

うまく実行できると、このような画像のようになると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629658/15603b03-b839-ecb0-8b44-c1fc4028ce03.png)

このサンプルアプリはどうやら右下の+ボタンを何回押したかわかるアプリのようですね。

ここまで来れれば一旦環境構築はおしまいです。

iPhoneを持っていて実機でテストしたいという人はここから証明書の発行などもう一声あるようですが、、、、

#環境構築の感想
はじめての環境構築でしたがぐぐりにぐぐって何とか終わらせることができました。
わかる人にとってはFlutter公式の説明はわかりやすいかとおもいます。

次回はどうやったら反映されるのかだったり、どこをいじればいいのかがさっぱりわからないのでいろいろいじってみて報告したいと思います。

それではまた！
javascript基礎　非同期処理編


javascriptを知る上でかなり重要な概念かと思っています。
できる限り、シンプルに記載していこうと思います。


##非同期処理(async)と同期処理(sync)
どちらもメインスレッドで実行されますので、少なからずどちらも影響を受けます。
同期処理とは順番にタスクを処理されることをいいます。
非同期処理はも同期処理同様順番に処理されますが、一つの非同期処理が終わるのを待たずに次の処理に移ります。
つまり、複数同時に処理されているタスクがあります。

### Promiseとは
非同期処理の結果を表すビルトインオブジェクトになります。
エラーファーストコールバックとゆうルールを発展させたもので、
オブジェクトの形で統一的な見た目で扱うことができるようになっています。

```js
const promise = new Promise((resolve, reject) => {
    // 成功したときはresolve()
    // 失敗したときにはreject()
    resolve() //resolve
});

const onResolve = () => {
    console.log("resolveされたときに呼ばれる");
};

const onReject = () => {
    console.log("rejectされたときに呼ばれる");
};

promise.then(onResolve, onReject);
```
####Promiseチェーン
割と下記は見たことある感じかと思いました。

```js
console.log("実行")

const chainPromise = () => {
  return new Promise((resolve, reject) => {
    setTimeout(()=> {
      console.log("成功しました。")
      resolve()
    },500)
  })
}

chainPromise().then((resolve) => {
  console.log(`${resolve} 成功`)
}).catch((error) => {
  console.lg({error})
})

```

####Promise.all
複数の Promise の結果を集約するのに便利です。

```js

const TIMEOUT = 1000;

const chainPromiseAll = number => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(number);
    }, TIMEOUT);
  });
};

const chainPromiseNumber01 = chainPromiseAll(1);
const chainPromiseNumber02 = chainPromiseAll(2);
const chainPromiseNumber03 = chainPromiseAll(3);

const startDate = Date.now();

Promise.all([
  chainPromiseNumber01,
  chainPromiseNumber02,
  chainPromiseNumber03
]).then(values => {
  console.log(Date.now() - startDate + "ms");
  console.log(values); // [1, 2, 3]
});

```


### AsyncとAwaitとは
Promiseの上に作られた構文なので、Promiseと組み合わせて利用する。
Promiseチェーンとして記載していた非同期処理の内容も同期処理のように書くことができます。
結構直感的に書くこともできます。

awaitはpromiseが解決するまで待機します。

```js
async function Main() {
    await new Promise((resolve) => {
        setTimeout(resolve, 16);
    });
};

console.log("1");

Main().then(() => {
    console.log("3");
});

console.log("2");
```
Awaitは、Asyncの中でのみ利用可能です。


以上になります。


Promise自体を理解していないと腑に落ちないかと思ったので、今回アウトプットしながらできたので、
いろいろ知ることができたかと思いました。

この辺りはよく僕自身も利用していて、大変有意義な振り返りになりました。
日頃使っていてその時ヒラメかなったけど、よく考えればこんな使い方できたなとは結構思うことが多かったように思います。

PromiseやAsync Function並びにAwaitを今後の学習していき、また載せようと思います。

##関連書
[JavaScript Promiseの本](https://azu.github.io/promises-book/#chapter1-what-is-promise)
DNSの仕組み【僕の備忘録】

##前書き
DNSについて改めてちゃんと理解しておこうと思って調べたのでまとめておきます。
図とかエクセルで作ったけど次はちゃんとモダンなツールさがそ

##DNSとは
・どめいん ねーむ　しすてむ の略
・ドメインはURLの~.comとか~.jpとかのこと
・webサーバーにアクセスするためにドメインからIPを取得して、そのIPを使ってwebサーバーにアクセスする。

###イメージ図
![dns.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348801/61ce1245-3c4f-bc82-1420-8448bc671e03.jpeg)


##DNSサーバーとは
ドメインとIPの紐づけを保存しているサーバー。
まずDNSサーバーにアクセスしてIPを取得出来たら対象のwebサーバーに取得したIPでアクセスする。

##ルートDNSサーバー
世界に13個しかないすごいDNSサーバー。

##キャッシュDNSサーバー
図には登場しなかったけどほんとは一番頑張ってるやつ。
どう考えてもルートDNSサーバーの負荷が尋常じゃないので、一度問い合わせのあったドメインとIPを一定時間保持（キャッシュ）しておくサーバー。
→全体のパフォーマンス向上
→上位のDNSサーバーの負荷軽減

##まとめ
イメージはつかめたかなと思います。
いざ自分で使うときは配置場所だとか種類があるらしいので調べてみたください。
最近はクラウド上でよしなにやってくれそうだけど
「abstract interface 違い」まとめ

- 結論からいうと以下の通りです。
    1. abstractは、メモリー節約のために使われました。ただし自由度が高すぎて、interfaceが提供されるきっかけになりました。
    1. interfaceは、ポリモーフィズム（ArrayListとかLinkedListを実現するアレ）を提供するために作られました。
    1. interfaceのdefaultは、ムーアの法則対策のために作られました。

# abstractが提供されるようになった経緯

まず、継承機能について、基礎的な歴史から解説いたします。（存じておりましたら申し訳ございません。）

昔のプログラミングは商業的価値があまりなく、小規模な開発しかありませんでした。そこから大規模開発になっていき、大規模なコードを読みやすくしたい上に、メモリも足りないという問題がありました。そこで、メモリを節約しようということで、再利用性というか、抽象性が欲しい！ということになりました。

（抽象性の意味を再確認）
例えば、我々が他の人に「野球、サッカー、テニスとか楽しい！」を説明する時、一言で「スポーツ楽しい！」で伝わりますね。

昔のプログラミングは、そのような、重複した意味をまとめる力（抽象化）がありませんでした。そこで、親クラス（抽象化）も表現できるオブジェクト指向（Java）のabstractが出番になった訳です。（当時interfaceはありませんでした。）

abstractは、ぶっちゃけ自由度が高すぎて読みづらいものでした。メソッド（機能）とグローバル変数（状態）両方出てこられて、直感的によく分からない物でした。まぁそれでも使えるっちゃ使えました。

# interfaceが提供されるようになった経緯

ある時、abstractを利用したオブジェクト指向開発で、ある要望が発生しました。ポリモーフィズムで作りたいと。そして、もう少し制約を設けて読みやすくしたい。

ポリモーフィズムと言えば、List型ですね。例えば、List型で、ArrayListやLinkedListを両方扱えるようにしたい、.size()とか.add()を、どの型でも扱えるようにしまいたいというものですね。

そのような目的に絞って継承関係を扱えてしまえるなら、interfaceで綺麗に書いて読みやすくしましょうよ！ということで、interfaceがJavaに提供されました。

# interfaceのdefaultが提供されるようになった経緯 「abstract interface 違い」の根源

時が過ぎてJava8になり、interface自身に、機能が持てるようになりました。default機能ですね。この話がきっと、abstractとinterfaceの違いマジ分からん問題になっているかと思います。

このdefault機能が提供された経緯は、今までの抽象化の要望とは違います。ムーアの法則対策だった気がします。来たるべくリソース不足問題に少しでも対応できるようにするために、今ある半導体のリソースを最大限に節約したいという理由で、徹底的に並列化したいという要望がありました。

そこで、並列処理を簡単かつ安全に作れるようにするためにストリームAPIが作られ、これじゃ匿名クラスだらけで分かりづらいねということで簡潔なラムダ式が導入されることになりました。

つまり、defaultはムーアの法則崩壊対策のストリームAPI提供のために作られたということで、defaultを自由に使っていいというルールが現状ないということですね。

# まとめ

defaultの使い方は基本的にストリームAPI・ラムダ式で必要になる機能であって、default機能を自由に使っていいかどうかまでは分かりませんでした。しばらく様子見がいいでしょう。

# 余談1 パンドラの箱

abstractって、interfaceみたいに多重継承できませんでしたよね。多重継承したいという理由で、別の抽象化機能interfaceを作っちゃったという経緯もあるようです。（多重継承できてしまうとバグの追跡がしづらくなったりして、昔は禁じ手とかパンドラの箱とか言われて反対されていたらしいです。）

# 余談2 オブジェクト指向の歴史

コンピュータって趣味だよね
↓
コンピュータって商売のタネになるね！
↓
コンピュータって立派な産業だね！よっしゃもっとプログラミングを大規模に扱いたい！せめてプログラミングに抽象化の機能が欲しい！それでメモリーも節約したい！
↓
高機能なJavaが台頭する。abstractも提供されている。
↓
abstractって読みづらい。ポリモーフィズムも欲しい。
↓
interfaceの提供
↓
なんかムーアの法則が危ういんじゃね....? 笑えない....せや！今ある半導体リソースをとにかく有効に扱いたいから、徹底的な並列処理が簡潔に書ける機能を提供しよう！
↓
ストリームAPIとかラムダ式の提供

だったと思います。
Kali Linuxのウィンドウやターミナルを見やすくする【Kali Linux 2020.1】

## 背景

最近KaliLinux2020.1を使い始めたのですが、デフォルトのターミナルやウィンドウが個人的に使いにくいと感じたため、修正しようと思いました。

先ずは今の状態を確認します。右がターミナル、左上がフォルダ、左下がテキストエディタです。
デフォルトだと正直、ターミナルとテキストエディタの見分けがつきにくかったり、メニューバーが視認しにくかったり、「最大・最小化」や「閉じる」のアイコンが小さかったりと不便だと感じました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462467/2b156464-4dfe-77e1-f5a1-33fa94e784ec.png)

## 目標

今回は個人的に気になったいくつかの項目について、先ずは標準で備わっている設定で改善していきます。どうやらネット上には様々な見やすいテーマパッケージが落ちているようですが、今回はそういったものを使わずにできる範囲で見やすくしていきます。最適解ではないので、あくまで”変更方法の参考例”としてお役立ちになると幸いです。

* メニューバーに輪郭がないため、押す場所が分かりにくい。
    * → メニューバーとその他の領域を見分ける境界線をつける
* 「最大・最小化」や「閉じる」のアイコンが小さい。
    * → アイコン部分を大きくする。
* ターミナルとテキストエディタの見分けがつきにくい
    * → 見分けやすくする。
* フォントが小さい。
    * -> フォントを大きく、可読性を上げる。

## 手順

### テーマ設定

* Kaliのメニューから、[Settings Manager(赤枠)]を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462467/52af02d4-5248-00fd-81d6-d0eec1fc2084.png)

* [Appearance]を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462467/a7a4a7c2-63f1-cfe3-b419-60ce9cd7e631.png)
* Kali-Darkから、Adwaita-darkに変更。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462467/c7afa1be-77d8-597d-5dc6-7bc092cbf3bf.png)
* これで、メニューバーの輪郭強調されて見やすくなったと思います（左：Before、右：After）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462467/987b665a-2b30-1b3a-f4e6-43c7623348ce.png)

### ウィンドウ設定
* 次は、[Setting Manager] > [Window Manager]と選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462467/aca88041-f8fc-9c37-e994-27fe16263532.png)
* [Theme]をKali-Darkからkali-Dark-HiDPIに変更
* また、[Title font]でフォントサイズを少し上げておくと良いと思います
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462467/e681ead6-6be5-9f44-b9cb-41bdb4710396.png)
* ウィンドウが少し大きくなったので、合わせてアイコンも少し大きくなったと思います（左：Before、右：After）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462467/4764d0c6-9052-44fa-e596-fdf2e4300207.png)

### ターミナルの設定

* ターミナルを起動し、ターミナル内の[File]>[Preferences]を選択
* [Appearance]内の、[Font]を12pt、[Terminal margin]を12pt程度に変更。変更後は[Apply]ボタンで確定させます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462467/cc174d69-caa1-66de-dbed-3d8a3b028360.png)

* デフォルトのフォントサイズは流石に小さいと感じていたので、少し大きくした方が結果的に効率が良いと思います（左：Before、右：After）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462467/895ca90f-75c3-c17d-5f4c-1054bbeaf10a.png)

### テキストエディタの設定
* テキストエディタを起動し、[Edit]>[Preferences]を選択
* 以下の図の通りにチェックボックスにチェックを入れます。行数や改行の表示など、個人的に表示しておいた方が役立つ設定ですが、ここは色々と試しながら調整して下さい
* また、[Colour scheme]をKali-DarkからKali-Lightなどに変更してターミナルとの差別化を図る
* その他、インデントはどちらかというと4の方が馴染み深いので8 -> 4に修正します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462467/84e22a7d-104a-a54e-0775-9f31d69b3bc8.png)

* 修正後はこんな感じ（左：Before、右：After）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462467/a4bebcd9-6211-a18c-4bae-315a249f4f15.png)


## 最終的にどうなったか

最終的にには以下のようになりました。
快適とは言えませんが、デフォルトよりは見やすくなったかと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462467/1abe8a55-0f1b-251c-a181-631cd9785f8d.png)
ポートスキャンについて調べてみた

# 概要

ポートスキャンについて調べてまとめてみた。

# ポートスキャンとは

ネットワークに繋がっているポートのうちどれが通信可能になっているかを見つけることである。

# ポートとは

データがネットワークからパソコンに入るときのドア。
機器の接続口。

ポートは0~65535番まで存在する。

## ウェルノウンポート番号

0~1023番をウェルノウンポート番号といい、IANAによって管理されている。すでに振り分けられている。

## レジスタードポート番号

1024~49151番はレジスタードポート番号といい、これもIANAで管理されている。IANAが登録を受け付けている。

## その他のポート番号

ユーザが自由に使用できるのは49152~65535番

## 有名なポート番号

こちらによくまとまっている。
<http://e-words.jp/p/r-wellknownports.html>

# ポートスキャンの種類

## TCPスキャン(Vanilla Scan)

3ウェイハンドシェイクを確立することで、ポートの状態を確認する。
コネクションが確立するため、ターゲットサーバのログに記録される。

<img width="557" alt="スクリーンショット 2020-05-04 13.37.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/f796d1a6-87ef-6746-cb44-4dd31a20709d.png">

## SYNスキャン

コネクションを確立しないでポートの稼働状態を確認する方法。
ステルススキャン、ハーフオープンスキャンともいう。ターゲットホストのログには記録されない。応答結果がSYN/ACKのときは、アクティブ状態で、RST/ACKの時は非アクティブ状態であると判断する。

<img width="593" alt="スクリーンショット 2020-05-04 13.58.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/c4aa7831-23fb-2085-982c-d2f244cbacb9.png">

## FINスキャン

FINパケットを送り、RSTパケットを受信したらアクティブ、何も受信しなかったら非アクティブと判断する。

## クリスマスツリースキャン(XMAS scan)

FIN,PSH,URG(緊急確認)のフラグを全てONにしたパケットを送信し、RSTを受信したら非アクティブ、何も受信しなかったらアクティブとする。

## NULLスキャン

全てのフラグをOFFにしたパケットを送信し、RSTパケットを受信したら非アクティブ、何も受信しなかったらアクティブとする。

## UDPスキャン

ターゲットにUDPパケットを送信し、応答なしならアクティブ、ICMP port unreachableを受信すると非アクティブと判断する。

<img width="542" alt="スクリーンショット 2020-05-04 14.34.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/a7509765-80f0-9f79-0e6c-af2a68d0bdc0.png">

## FTP Bounce Scan

FTPサーバを中継して指定のホストへアタックやポートスキャンを実施する手法。現状ではほぼ利用不可能。

# 実際にしてみる

## MACのネットワークユーティリティでポートスキャン

今回はnmapを使わずに、macのネットワークユーティリティでポートスキャンしてみます。
ローカルアドレス127.0.0.1を入力し、scanを押す。

<img width="659" alt="スクリーンショット 2020-05-04 11.19.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/ff8d5866-cb71-10a1-efbc-35b1b6f59552.png">

次にLINEとSkypeを開けて再度ポートスキャンしてみる。

<img width="653" alt="スクリーンショット 2020-05-04 15.00.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/2368c5a7-fa53-f312-36a2-5105a15ffa97.png">

10400ポートが開いたので、ターミナルを分かる起動し、`lsof`コマンドで調べてみる。

```terminal
% lsof -i:10400
COMMAND   PID   USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
LINE    19523 Tomoki   11u  IPv4 0xa2dbb30cec7973c1      0t0  TCP localhost:10400 (LISTEN)
```

10400ポートをLINEが使っているということが分かる。

`kill <PID>`と入力すると対象のプロセスが入力する。

```terminal
% kill 19523
```

LINEが終了した。

# ポートスキャンの対策

## 予防、防止

* 不要なサービスを停止し、ポートを閉じる。
* OS、アプリケーションを最新化し、パッチを適用する。
* 脆弱性検査を実施し、セキュリティホールが塞がれているかを確認する。
* ファイアウォールなどで不要なポートへのアクセスを遮断する。

## 検知,追跡

1ポートごとにある程度の時間を空け、ポート番号をランダムに選択して行われると検知は非常に困難。

* ネットワーク監視型IDS,ホスト監視型IDS,IPSの利用
* ファイアウォールのログから検知する。
* ホストのログから検知する。
provideメソッド

##Provideメソッドとは

 日本語に訳すと
「供給する」「与える」

```erb:home.html.erb

<% provide(:title,"Home") %>
```

```erb:application.html.erb
<title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>
```
application.html.erbは各viewで共通している部分のHTMLを書くファイルです。

provideメソッドで定義したものはlayoutファイル内においてyieldメソッドで呼び出すことができます。

こうすることで重複せずにビューを少ないコードで書くことができます（リファクタリング）
AR，AM，ARMAモデルへのフィッテング

#はじめに
本稿では，pythonを用いて，与えられた時系列データをARモデル，AMモデル，ARMAモデルにフィッティングする方法を記述する．

#用いる関数
関数statsmodels.tsa.arima_model.ARMA.fitを用いる．
詳細は[こちら](https://www.statsmodels.org/devel/generated/statsmodels.tsa.arima_model.ARMA.fit.html#statsmodels.tsa.arima_model.ARMA.fit)

#ARモデルのフィッティング
例として，AR(1)モデルのフィッティングをする．

```math
y_t = 1 + 0.5 y_{t-1} + \epsilon_t
```
ただし，$\epsilon_t$は分散1の正規ホワイトノイズとする．
また，$y_0=2$とする．

```python
#モジュールの取り込みとグラフをいい感じにするおまじない
import matplotlib as mpl
import matplotlib.pyplot as plt
plt.style.use('seaborn')
mpl.rcParams['font.family'] = 'serif'
%matplotlib inline
import numpy as np
import statsmodels.api as sm
import statsmodels.tsa.api as smt
p = print

#プロットするデータ列の作成
#今回は1000個の時刻におけるデータを取り込む
y = np.zeros(1000)
np.random.seed(42)
epsilon = np.random.standard_normal(1000)
y[0] = 2
for t in range(1,1000):
    y[t] = 1 + 0.5 * y[t-1] + epsilon[t]

#プロットする時系列データを見てみる
plt.plot(y)
plt.xlabel('time')
plt.ylabel('value')
plt.title('time-value plot');
```
次のグラフがプロットされる．
![img.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565132/45a49a30-b83f-0406-edf9-cb0c47fc4f45.png)


このモデルをフィッティングする．

```python
mdl = smt.ARMA(y, order=(1, 0)).fit()
p(mdl.summary())
```
結果は以下のようになる．
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565132/58e1102c-3781-d991-8ad7-2406b032adb9.png)
定数項は2.0336，ARモデルの係数は0.4930と実際の2，0.5と近い値を推定できていることがわかる．
また，今回のモデルは，定数項2を含んだARモデルであったが，定数項が0であることが既知である場合は，

```python
mdl = smt.ARMA(y, order=(1, 0)).fit(trend='nc')
```
とすればよい．

#MAモデルのフィッティング
order=，の部分の数字を変えるだけでよい．
例えば，MA(1)にフィッテングする場合は，

```python
mdl = smt.ARMA(y, order=(0, 1)).fit()
```
とすればよい

#ARMAモデルのフィッテング
ARMA(1, 1)にフィッテングする場合は，

```python
mdl = smt.ARMA(y, order=(1, 1)).fit()
```
とすればよい

#そもそもARMAの次数の検討がつかない場合
関数sm.tsa.arma_order_select_icを用いると，情報量基準で最適な次数を推定できる．
関数の詳細は[こちら](https://www.statsmodels.org/stable/generated/statsmodels.tsa.stattools.arma_order_select_ic.html)

##ARMAモデルの次数推定
先に述べたAR(1)モデルモデルの時系列データを用いて，次数の推定を行います．
つまり，次数が(1,0)であると推定できれば成功です．

```python
from statsmodels.tsa.arima_process import arma_generate_sample

y = np.zeros(1000)
np.random.seed(42)
epsilon = np.random.standard_normal(1000)
y[0] = 2
for t in range(1,1000):
    y[t] = 1 + 0.5 * y[t-1] + epsilon[t]

sm.tsa.arma_order_select_ic(y)
```

結果は以下のようになります．
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565132/839e0369-b99d-251e-27de-4b05bc0f7692.png)

次数(1,0)が最適に推定されました．
行列は，BICの値を表しており，
行がARの次数，列がAMの次数を表しています．

AICを用いたい場合や，AICとBICの両方で評価したい場合は以下のように記述します．

```python
#AICを用いる場合
sm.tsa.arma_order_select_ic(y, ic='aic')
#2つの情報量基準で同時に評価したい場合
sm.tsa.arma_order_select_ic(y, ic=['aic', 'bic'])
```

また，次数の最大値を変更してサーベイしたり，定数項=0と仮定した上で推定することも可能です．
【CircleCI】Run  rspecテスト失敗から解決に向けて設定した環境変数(2/2)

#問題
ローカルでは問題なくパスするテストが、CircleCIでのRun rspecでエラーとなった。

前回、

- .circleci/config.ymlへの設定
- Dockerfile.devへの設定
- docker-compose.ci.ymlへの設定

といった設定を行った、[こちらの続き](https://qiita.com/_dodntint_/items/34505d2a713c92b8bc65)。



#CircleCI管理画面より設定
Settings >user_name >app_name > Environment Variables

- HEROKU_API_KEY
- RAILS_MASTER_KEY

  を追加


#デプロイされたアプリの確認

HerokuアプリのURLは、CircleCIの、heroku_deployの、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597926/9dbbb0cb-0a9f-9e0b-fe55-267ba282a583.png)

heroku_deployの部分をクリックして、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597926/befc16b1-9fdd-2282-9489-7909b93a8973.png)

実行項目の中の、Deployの中の下の方にある。

現在の環境では、CircleCIでデプロイが完了するたびに、新しいアプリがheroku上に作成されるよう、`.circleci/config.yml`に設定されている為、こちらで確認するようにしている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597926/89df507f-dc7e-602b-3820-792a4c6fc1b8.png)



次は、herokuにデプロイしたアプリが表示されない、、

よしログを確認しよう。

CircleCIを使用していない場合は、Herokuの、

<img width="206" alt="スクリーンショット 2020-05-03 23.21.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597926/bb04717e-d51d-8410-f2fa-d6572a605e8d.png">

こちらから確認するが、

CircleCIを使用している場合は、先程のCircleCIのheroku_deployの下に、

Run post-deploy tasks、という項目があるので、こちらから確認できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597926/944f3ce8-6879-5427-7de7-0f3ae8b1342e.png)

内容を確認すると、

```
undefined method `[]' for nil:NilClass (NoMethodError)
```
該当のファイルの5行目を確認すると、環境変数を呼び出している行であることがわかる。



#Herokuの環境変数確認・登録


heroku上に登録する環境変数

ターミナルで確認

```
$ heroku config
```
登録のある環境変数一覧を確認。
RAILS_MASTER_KEY:
SECRET_KEY_BASE:



登録

```
$ heroku config:set 環境変数名=value
```

ちなみに、、
登録の削除は

```
$ heroku config:unset 環境変数名
```

ここまでで、無事にアプリを表示することができるようになった。
今回は、開発の途中でローカルにて、環境変数を設定し、管理を`bash_profile`から`config/credentials.yml.enc`に変更した事と、変数の設定を後回しにして実装を急いでしまった事が原因でした。

これからは、環境変数を使用すると同時に、これらの登録を先に行い、デプロイまでが通過するか、確認するようにしたいと思います、、


また、ローカルではエラーが無くて、CircleCIやデプロイ後に動かない場合は、環境変数を真っ先に疑おうと思い始めました。



###終わりに。
最後まで読んで頂きありがとうございます:bow_tone1:
転職の為、未経験の状態からRailsを学習しております。正しい知識を着実に身に着け、実力のあるエンジニアになりたいと考えています。継続して投稿していく中で、その為のインプットも必然的に増え、成長に繋がるかと考えています。
今現在、初心者だからといって言い訳はできないですが、投稿の内容に間違っているところや、付け加えるべきところが多々あるかと思いますので、ご指摘頂けると幸いです。この記事を読んで下さりありがとうございました。
Shopifyのliquidで計算をしたい

#Shopifyで計算をする
10000円以上購入で送料無料などのキャンペーンをする時に、
10000円からカートの小計を計算し、
あと○○円で送料無料などと計算をしたい。

##コード
```php

       {%- assign free_shipping_fee = 1000000 -%}
       {% if cart.total_price < free_shipping_fee %}
       <div>送料無料まであと{{ free_shipping_fee | minus: cart.total_price | money_without_currency }}円</div>
       {% endif %}
```
##コードの説明
shopifyで計算をするときは、
{{計算したい対象 | コマンド  | コマンド }}とする
四則演算のコマンドは
plus:100 100足す
minus:100 100引く
times:100 100倍する
divided_by:100　100で割る

他にもround、floorなどがある模様

コマンドは横に並べることができる。
例えば オーダーに10倍して10足す

```php3
{{customer.orders_count | times: 10 | plus: 10 }}
```

##数値から直接計算はできない
下記のように10000円を直接入力して計算することはできないので、最初の数値は変数化する必要がある

```php
{{ 10000 | minus: cart.total_price | money_without_currency }}
```
STS4をMacで動かす

MacでSpringTools Suite4を動かすと下記のようなエラーメッセージが出てSpringTools Suite(STS)が立ち上がらない。

```
Alert: Failed to create the Java Virtual Machine
```

これを解決しようと思う。

## 環境

- macOS Catalina version 10.15.4
- AdoptOpenJDK (build 14+36)
- SpringTools Suite 4.6.1

## 方法

SpringToolsSuite.iniに以下のものを書き足す。

```zsh:場所
$ vi /Applications/SpringToolSuite4.app/Contents/Eclipse/SpringToolSuite4.ini 

```

```ini:SpringToolsSuite.iniに追記
-vm
 /Library/Java/JavaVirtualMachines/adoptopenjdk-14.jdk/Contents/Home/bin/java

```

eclipseの場合はeclipse.iniになる


JavaのMacフォルダに移動

```zsh:JavaのMacフォルダに移動
$ cd /Library/Java/JavaVirtualMachines/adoptopenjdk-14.jdk/Contents/MacOS/
```

MacOSフォルダにあるlibjli.dylibを削除

```zsh:libjli.dylibを削除
$ sudo rm /Library/Java/JavaVirtualMachines/adoptopenjdk-14.jdk/Contents/MacOS/libjli.dylib"
```

JavaのLibのlibjli.dylibのシンボリックリンクをJavaのMacOSフォルダに貼る

```zsh:libjli.dylibのSymbolicLinkを貼る
$ sudo ln -s /Library/Java/JavaVirtualMachines/jdk-14.jdk/Contents/Home/lib/libjli.dylib libjli.dylib
```

## 参考

https://www.eclipse.org/forums/index.php?t=msg&th=1102885&goto=1823113&#msg_1823113.
SwiftUI でキーボードの表示／非表示に応じて背後のコンテンツの高さを調整する

# 概要

SwiftUI でキーボードを表示したときに、背景のコンテンツの高さがよろしく調整されず、キーボードの背後に隠れてしまうので、自分で実装した。

### Before

![before.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4617/85066f98-98ec-9661-ce61-1ce24ef16e80.gif)

### After

![after.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4617/22cc9f44-6dde-c6d1-ad5a-2ced74ea6af0.gif)

# サンプルコード

- [ogaoga/AutoShrinkList: SwiftUI sample code of auto adjust view height depending on the keyboard.](https://github.com/ogaoga/AutoShrinkList)

# 方法

`Spacer` の高さをキーボードの高さにして、コンテンツを見える範囲にする戦略。

- キーボードの状態はノーティフィケーションで取得できるが、`struct` だとノーティフィケーションを受け取れないので、ViewModel クラスを実装して通知を受け取る。
    - https://github.com/ogaoga/AutoShrinkList/blob/master/AutoShrinkList/ViewModel.swift
- Combine を使って ViewModel のキーボードの高さを監視し、`Spacer` に渡す。
    - https://github.com/ogaoga/AutoShrinkList/blob/master/AutoShrinkList/ContentView.swift#L26
- キーボードの高さの変化に応じて `Spacer` の高さが動的に変化し、スクロールの範囲を調整することができる。

# 補足

- iPad ではキーボードの表示位置が決まってないので、無効にした方が良い。
- キーボードの高さをそのまま `Spacer` に渡すと、キーボードの上に 34px ぐらいの余白ができてしまうので、調整が必要。
- キーボード上げ下げに応じたアニメーションは諦めた。

# 参考記事

- [iOS11でkeyboardの高さを正しく取得する - Qiita](https://qiita.com/sgr-ksmt/items/1d72d9973bc6220a5633)
Ruby on Rails チュートリアル 第２章①

○この記事の要点
「第2章　Toyアプリケーション」の途中まで実施内容メモ
思ったことなどのメモ

○第2章でやること
１．アプリケーションの準備
２．ユーザの管理アプリ（登録、修正、削除）の作成
３．Microposts登録アプリ（簡単なツイート的なアプリ）の作成
全てscaffoldジェネレータを利用して作成

○内容
■アプリケーションの計画（アプリの作成、gitへのプッシュ、Herokuへのデプロイまで）
第１章で実施した内容と同じ手順で別のアプリを作成
（１）rails newコマンドでアプリケーションの骨組み作成
（２）Gemfileの編集
（３）gemのインストール
（４）gitへ追加（バージョン管理する場合）
（５）Bitbucketでリポジトリの作成（バージョン管理する場合）
（６）app/controllers/application_controller.rb　の編集
（７）config/routes.rb　の編集
（８）gitへのcommit（バージョン管理する場合）
（９）Herokuにアプリケーションを作成
（１０）gitへpush

■モデルの作成
ここから第２章で初めてやること
（１）scaffoldジェネレータを利用したユーザリソースの作成
　rails generate scaffold User name:string email:string
（２）データベースのマイグレート
　rails db:migrate
これだけで、ユーザの登録、照会、修正、削除を行うコードが自動で生成される。
（３）ユーザーページの動作
　ルートURL指定してユーザ管理ページの操作。ってなっているけど、ルートURL指定してWebページを開く方法が不明だった。
これまでの流れから考えると
・Usersリソースでユーザをメンテするプログラムとデータベースを自動で作ったから
アプリのルート（１番最初に表示されるページ）をUsersってやつにしろ。ってことかなと推測して
⇒config/routes.rbの中身を以下に変更

```ruby:config/routes.r
Rails.application.routes.draw do
  resources :users
  root 'users#index'
end
```
いけた！ちょっと説明が少ないと思うのは私のレベルが低いからか。

追伸：よく見るとテキストの後続に記載されている、2.2.2 MVCの挙動に記載されている方法通りにやったらうまくいきそう。先に書いて。。。
少し短いけど、今日はここまで。


■感想
・ユーザの登録、照会、修正、削除というからには、裏にDBがあるんだろうけど、ここまでの作業でまったくSQLを感じさせないので、NoSQL感がすごい。
・結構あっという間にできた。仕組みを理解しているかと言われると自信はないが少なくても
アプリの新規作成～デプロイとindex画面の設定くらいはできるようになったので良しとしよう。
・マイグレートの仕組みを理解しておく必要あり。
[チートシート風]Dockerでmysqlを起動、my.cnfをホスト側にマウントして起動

### Dockerコンテナとホストでconfigファイルを同期するための事前準備

ホスト側のcnfファイル(どこでもいい）

```bash
vim ~/tmp/mysql/my.cnf
```

中身

```
[mysqld]

# explicit_defaults_for_timestamp = true

sql_mode = 'STRICT_ALL_TABLES'

log-bin-trust-function-creators=1

character-set-server = utf8mb4
collation-server = utf8mb4_bin

slow_query_log=1
long_query_time = 1.2

max_connections = 10000
max_connect_errors = 10

default-time-zone='+09:00'
```

コンテナで読み込まれるcnfファイル

```bash
/etc/mysql/conf.d/*.conf
```

起動時のオプションに下記を追加

```bash
-v ~/tmp/mysql:/etc/mysql/conf.d
```

### イメージのインストールと起動（同時に実行可能)

- encoding, collationは上記cnfファイルでも設定可能
- -p ホスト側ポート:コンテナ側ポート
- -v ホスト側ボリューム:Docker側Dir

Ver. 8.0

```bash
docker run -v ~/tmp/mysql:/etc/mysql/conf.d --name mysql-8.0 -p 3308:3306 -e MYSQL_USER=root -e MYSQL_ROOT_PASSWORD=password -d mysql:8.0 --character-set-server=utf8mb4 --collation-server=utf8mb4_bin
```

Ver. 5.7

```bash
docker run -v ~/tmp/mysql:/etc/mysql/conf.d --name mysql-5.7 -p 3307:3306 -e MYSQL_USER=root -e MYSQL_ROOT_PASSWORD=password -d mysql:5.7 --character-set-server=utf8mb4 --collation-server=utf8mb4_bin
```

### DockerコンテナにSSH

```bash
docker exec -it mysql-8.0 /bin/bash
# mysql
mysql -uroot -p
```

### ホスト側からmysqlアクセス
（もちろん事前にクライアントのmysqlはインストール必要）

```bash
mysql -uroot -p -h 0.0.0.0 -P3308
```

### timezone確認

```sql
show variables like '%time_zone%';
```

### 照合順序確認

```sql
show variables like '%collation%';
```
### 文字コード確認

```sql
show variables like '%char%';
```

### 出来上がったコンテナをイメージ化

```bash
> docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                               NAMES
fa3c86d075e1        mysql:8.0           "docker-entrypoint.s…"   10 minutes ago      Up About a minute   33060/tcp, 0.0.0.0:3308->3306/tcp   mysql-8.0
```

上記の`name`をとって

```bash
> docker commit mysql-8.0 mysql:8.0_configured
```

```bash
> docker images
REPOSITORY                              TAG                   IMAGE ID            CREATED             SIZE
mysql                                   8.0_configured        8dd1b8c65b37        12 minutes ago      546MB
mysql                                   5.7                   5d9483f9a7b2        11 days ago         455MB
mysql                                   8.0                   0c27e8e5fcfa        11 days ago         546MB
```

とはいえ、volumeのマウントはしないといけない。


### Dockerコマンド集

```bash
# 動いてるコンテナ確認
docker ps 

# 止まってるコンテナも含める
docker ps -a

# イメージを確認
docker images

# コンテナをstart/stop
docker start/stop {container_id}

# イメージからコンテナを起動

-d デーモン起動
> docker run --name {コンテナ名} -p {host_port}:{container_port} -e {env_key}:{env_value} -d {イメージ名

# コンテナ削除
docker rm {container_id}

# イメージを削除
docker rmi {image_id}
```

自分用だけど、意外と使えるってばよ。
ROS2 workspaceの作成

ROS2でプログラミングするために勉強したメモです．
ここではworkspaceの作成方法を書きます．

## workspaceの作成

#### ROS2環境をターミナルに反映
メインのROS2をunderlayに指定して，ターミナルに反映する．

```
source /opt/ros/<distro>/setup.bash
```
`dashing`を使用している場合は以下となる．

```
source /opt/ros/dashing/setup.bash
```

#### フォルダの作成

- 新しいworkspaceごとに新しいフォルダを作成することがオススメ．
- `<workspace_name>`は，workspaceの目的を示すのに役立つ．

```
mkdir <workspace_name>
mkdir <workspace_name>/src
cd <workspace_name>/src
```

#### 依存関係を解決する

- workspaceをビルドする前に，packageの依存関係を解決する必要がある．
- 既にすべての依存関係が解決している場合もありますが，`git clone`するたびに依存関係を確認することがお勧め．
- 依存関係が正しく解決されていないために，長い待機の後にビルドが失敗するのは望ましくない．

workspaceのルートフォルダに移動し，以下を実行する

```
sudo rosdep install -i --from-path src --rosdistro <distro> -y
```
ここでは，`<distro>`の部分を`dashing`にする．

- 依存関係がすべて解決していると，以下が出力される．

```
#All required rosdeps installed successfully
```

#### colconでworkspace/packageをビルドする．

packageの作成については[ココ](https://qiita.com/Dorebom/items/2f99fdb16106ee96f066)にもう少し詳しく記述．

```
colcon build
```
##### オプションの説明
- `--packages-up-to`：(時間節約目的で)必要なパッケージとそのすべての依存関係をビルドするが，ワークスペース全体はビルドしない．
- `--symlink-install`：Pythonスクリプトを微調整するたびに再構築する必要がなくなる．
- `--event-handlers`：`console_direct`+ビルド中のコンソール出力を表示します．

##### build結果の説明

- ビルドすると，`build`，`install`，`log`のフォルダができる．
- colconが正常にビルドを完了すると，出力は`install`フォルダにできる．

## overlayの注意点

- インストールされている実行可能ファイルまたはライブラリを使用する前に，それらをパスおよびライブラリパスに追加する必要がある．
- `install`フォルダの中に，環境のセットアップに役立つbash/batファイルを生成する．
- これらのファイルは，必要なすべての要素をパスとライブラリパスに追加するし，packageによってエクスポートされたあらゆるbashまたはshellコマンドを提供する．

#### underlayをsourceする

- overlayを取得する前に，workspaceを構築したターミナルとは別の新しいターミナルを開くことが非常に重要．
    - ビルドしたのと同じターミナルでoverlayを`source`したり，同様にoverlayで`source`した環境でビルドしたりすると、複雑な問題が発生する可能性がある．
    - だから，新しいターミナルでメインのROS2環境を「underlay」として`source`し，「その上」にoverlayを構築できるようにする．

新しいターミナルで，以下を実行．

```
source /opt/ros/<distro>/setup.bash
```
ここで，`<distro>`は`dashing`とする．

#### overlayをsourceする

workspaceのルートに移動する．

```
cd <workspace_name>
```

以下を実行する．

```
. install/local_setup.bash
```

[Note]

- overlayの`local_setup`をのsourceすることは，overlayで使用可能なpackageのみを環境に追加する． 
- `setup`は，overlayとそれが作成されたunderlayをsourceし、両方のworkspaceを利用できるようにする．
- メインのROS2インストールの`setup`と，その後に`dev_ws`のoverlayの`local_setup`をsourceすることは，`dev_ws`のoverlayの`setup`をsourceすることは同じである．  
    - なぜなら，それが作成されたunderlayの環境が含まれているからだ．


# 参考サイト
- https://index.ros.org/doc/ros2/Tutorials/Workspace/Creating-A-Workspace/#ros2workspace
- https://index.ros.org/doc/ros2/Tutorials/Colcon-Tutorial/#colcon