OmniAICreator/Qiita-1.07M huggingface dataset:
【JavaScript】HTML 要素のクラスの追加・削除


`JavaScript`でHTML要素のクラスを追加・削除するにはclassListを使用する。
#クラスの追加
■書き方

```
[取得した要素].classList.add('クラス名');
```

#クラスの削除
■書き方

```
[取得した要素].classList.remove('クラス名');
```

#クラスの有無で追加or削除
■書き方

```
[取得した要素].classList.toggle('クラス名');
```
#サンプルコード

```html:example.html
<div id="example" class="a"></div>
```

```javascript:example.js

// 要素を取得
var example = document.getElementById('example');

// 'b' を追加
example.classList.add('b');
//　結果　<div id="example" class="a b"></div>

// 'a' を削除
example.classList.remove('a');
// 結果　<div id="example" class="b"></div>

// toggle 'c' 
example.classList.toggle('c');
// 結果　<div id="example" class="b c"></div>

// toggle 'c' 
example.classList.toggle('c');
// 結果　<div id="example" class="b"></div>
```
#参照
[MDN web docs](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)
技術調査目的で利用する各サービスの検索画面とオプション

# 概要
　Webサービスは、簡易検索画面とは別に詳細検索画面や検索用のオプションを用意している事が多いです。そのようなサービスを利用する事で、より効率的に技術調査を進める事ができます。

## Google
* 簡易検索画面
https://www.google.co.jp

* 詳細検索画面（Web）
https://www.google.com/advanced_search

* 詳細検索画面（画面）
https://www.google.com/advanced_image_search

* 検索演算子
https://support.google.com/websearch/answer/2466433

* 検索のヘルプ
https://support.google.com/websearch#topic=3378866

## Twitter
* 簡易検索画面
https://twitter.com/

* 詳細検索画面
https://twitter.com/search-advanced?lang=ja

* 検索演算子
https://help.twitter.com/ja/using-twitter/twitter-advanced-search

## Github
* 簡易検索画面
https://github.com/search

* 詳細検索画面
https://github.com/search/advanced

* 検索演算子
https://help.github.com/articles/understanding-the-search-syntax/

* 検索オプション（レポジトリ）
https://help.github.com/articles/searching-for-repositories/

* 検索オプション（トピックス）
https://help.github.com/articles/searching-topics/

* 検索オプション（コード）
https://help.github.com/articles/searching-code/

* 検索のヘルプ
https://help.github.com/categories/searching-for-information-on-github/

## stackoverflow

* 検索画面
https://stackoverflow.com/search

* 検索演算子
https://stackoverflow.com/help/searching

## はてなブックマーク
* 検索画面
http://b.hatena.ne.jp/

* 検索のヘルプ
http://b.hatena.ne.jp/help/entry/search

## Qiita
* 検索画面
https://qiita.com/

* 検索演算子
https://help.qiita.com/ja/articles/qiita-search-options

# 備考
　本記事はブログ「[雑用エンジニアの技術ノート](https://scrapbox.io/nezuq/)」からの移行記事です。先のブログは削除予定です。
OracleからAzure DB（PostgreSQL）へ移行する~②PostgreSQLのプロセス構成

今回はPostgreSQLのプロセス構成について記載します。Azure DB for PostgreSQLも基本的にはPostgreSQLなので各プロセスに関してある程度理解しておいた方が何かと役に立ちます。

#PostgreSQLのプロセス構成
今回のテーマはOracle DatabaseからAzure Database for PostgreSQLへの移行です。なので、Oracle Databaseと比較しますが、Oracle Databaseはデータベースを稼働させるために様々なプロセスが起動しています（ログライタ、DBライタ、SMON、PMON、etc...)。これはPostgreSQLでも同じで様々なプロセスが起動します。

ただし、PostgreSQLの場合はマスターサーバプロセスというものが存在しており、各プロセスはこのマスターサーバプロセスからフォークする、いわゆるコピーする形で様々なプロセスが起動します。代表的なプロセスを以下に図示します。これらプロセスによって、データベースへの読み込みや書き込み、統計情報の取得、あるいはバキューム処理なんかを制御しております。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/697647/a47f7f02-8d21-6841-e1dd-eda2e5935e09.png)

#各プロセスを確認してみる
先ほど紹介した各プロセスはlinux環境であればpsコマンドなんかで確認することができます。各プロセスは`postgres:`から始まります。

```bash
$ ps -elf | grep postgres
```
結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/697647/ec486901-af8e-3064-4bbd-afd5adcda5cb.png)
①マスタサーバプロセス
②ログ出力プロセス
③チェックポインタ
④ライタ
⑤WALライタ
⑥自動バキュームランチャ
⑦統計情報自動コレクタ

#各プロセスの役割
各プロセスの役割ですが以下の表に大まかに記載します。
これらすべてのプロセスはマスタサーバプロセスが最初に起動し、フォークする形で様々なプロセスを起動する形となります。

|プロセス名|説明|PSコマンドの表示|
|:--|:--|:--|
|マスタサーバ|最初に起動される親プロセス|起動コマンドそのものが表示|
|ライタ|共有バッファの内容をデータファイルに書き出す|writer process|
|WALライタ|WALバッファの内容をWALファイルに書き出す|wal writer process|
|チェックポインタ|全てのダーティーページをデータファイルに書き出す|checkpointer process|
|自動バキュームランチャ|設定に従って自動バキュームランチャを起動|autovacuum launcher process|
|自動バキュームワーカ|設定に従って自動バキューム処理を実施|autovacuum worker process|
|統計情報コレクタ|データベースの活動状況に関する統計情報を収集する|Stats collector process|
|バックエンド|クライアントから接続要求に関する統計情報収集する|（ユーザ名 データベース名 [接続]　状態）という書式で表示|
|バックグランドワーカ|ロジカルレプリケーション用のワーカ|bgworker: [モジュール名]という書式で表示|
|パラレルワーカ|パラレルスキャン実行時に起動され、クエリを処理する。|Bgworker: parallel worker for PID <PID>という書式で表示|

#最後に
様々なプロセスが起動しPostgreSQLの制御を行っている事をわかっていただければ幸いです。各プロセスの動きをある程度理解することは、PostgreSQLを利用するうえで意外と役に立つので是非。

##次回は
次回はPostgreSQLのメモリ構成について記載したいと思います。
[開発環境][PC機器] モニタの応答速度とリフレッシュレートの疑問と選び方

# はじめに
ゲーミングモニタ買おうとした際に応答速度とフレッシュの違いが分からなかったのでメモ



# 応答速度

一般的に1フレームを表示する速度のこと応答速度という。

計測方法の違いにより

- GTG(gray to gray)
- MPRT(oving picture response time)

の2種類の表記が在る。

応答速度GTG　:	中間階級色の変化
応答速度MPRT :	動画ぼやけ測定での数値


**応答速度まとめ**
・1フレームを表示する速度
・応答速度が遅いと残像が残る
・応答速度が早いと表示遅延が少ない
・応答速度が早いほど残像を感じない


# フレッシュレート

1秒間に画面を更新できる回数のこと。

画面(フレーム)が１回更新するのにかかる時間を求めてみる。

例) 60Hzモニタが１画面の更新にかかる時間
1000ms(1秒) ÷ 60 = 16.6ms 

|       	|        	|
|-------	|--------	|
| 60Hz  	| 16.6ms 	|
| 144Hz 	| 6.94ms 	|
| 165Hz 	| 6.06ms 	|
| 240Hz 	| 4.16ms 	|
| 280Hz 	| 3.57ms 	|

**リフレッシュレートまとめ**
端的に言ってしまえば、上記の計算結果を上回らない限り問題ないということになる。


# 結論

- 60Hz,144Hzであれば応答速度は関係ない (5msのモニタでOK)
- 240Hz以上は応答速度5msのモニタはNG
Raspberry PiにVSCode Insider版をインストールする方法(パッケージ)

(2022/5/24追記：標準パッケージでメンテナンスされるようになり、

```
sudo apt install code
```
で導入できます。この記事の以下の記述は古いです）


(2020/10/29追記：10/11頃にLinux ARM/ARM64版が正式にリリースされているようですので、今後使われる方は https://code.visualstudio.com/#alt-downloads より正式版（deb ARM版 / ARM64版）をお使いいただくのがよいと思われます。)

[Raspberry PiにVSCode Insider版をインストールする方法](https://qiita.com/karaage0703/items/fb50b6ac5c175b9b1045)
にアーカイブをダウンロードして導入する方法が紹介されていますが、Raspberry Pi OSへ導入するならdebパッケージを使ったほうが楽ですし、メニューにも追加されますし、パッケージのリポジトリも追加されますから、以降の更新時の対応も楽です。

# インストール手順

Raspberry PiのChromiumブラウザで、
https://github.com/microsoft/vscode/pull/106289#issuecomment-691076575
にアクセスし、debのリンクをクリックしてパッケージをダウンロードします。32bit版の方はARMv7l、64bit版の方はARM64の方を使います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25932/b24d281e-f69a-8b93-6fe4-0bb66d31e1d4.png)

クリックするとダウンロードが始まり、ブラウザ下部に表示されます。
ダウンロードが完了したら、そのまま「開く」でパッケージを開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25932/42010239-bd62-b3c3-1727-03b34e7bd766.png)

すると、確認ダイアログが表示されますので、「インストール」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25932/27d48244-53c8-e04f-4020-7abe5c27418d.png)

認証ダイアログが表示されますので、piユーザのパスワードを入力しOKをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25932/c2b4ba3a-9e03-344d-2e77-59b04b839365.png)

インストールが進みます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25932/de8e18e5-98d0-b05b-0f7c-04fce1f5ad47.png)

ダイアログが閉じたら導入は完了です。Raspberry Piメニューのプログラミングの項に、「Visual Studio Code - Insiders」が追加されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25932/56724d12-aeaa-7098-850d-90d7a4fbc7d4.png)

# 日本語化

Japanese Language Pack for Visual Studio Code
を導入します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25932/2f8d4f92-a7f7-12ab-49ef-8465ac23d801.png)

インストールが終わったら、右下に再起動ダイアログがでるので、「Restert Now」で再起動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25932/ad056a1b-5910-f687-1dc8-08a821fbd615.png)

再起動後に日本語化されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25932/cb80a626-deea-8340-a3cc-504410a7a59f.png)

# アップデート方法

debパッケージとして導入されていますから、更新があった場合は

```
$ sudo apt update
$ sudo apt upgrade
```

でアップグレード可能です。


# アンインストール方法

debパッケージとして導入されていますから、

```
$ sudo apt purge code-insiders
```

でアンインストール可能です。
マイナンバー(個人番号)

応用情報技術者平成29年秋期 午前79

マイナンバー法におけるマイナンバー(個人番号)に関する記述のうち，適切なものはどれか。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/59e2290e-fddf-71f5-0b71-7cd4ac9b10a1.png)


１、
・用途
マイナンバー法第9条によれば、行政事務の処理において
　「社会保障」
　「税」
　「災害対策」
の法令で定められた手続のためだけに使用でき、
これ以外の目的には使用することはできないことになっています。

・通知
マイナンバーは住民票コードをもとに生成される番号なので、国外に滞在されている方などで、国内に住民票がない場合はマイナンバーが通知されません。

・指定
マイナンバーは市町村長(特別区の区長を含む)から、その地区の住民に指定されます。

・変更
マイナンバーは原則として生涯同じ番号を使い続けることが前提なので自由に変更することはできません。ただし、マイナンバーが漏えいして不正に用いられるおそれがあると認められる場合に限り、本人の申請又は市町村長(特別区の区長を含む)の職権により変更することができます。


参照：
https://www.ap-siken.com/kakomon/29_aki/q79.html
Gatsbyのdevelopコマンドした際、「Something is already running at port 8000」と出たときの対処 

#環境
・OS: macOS 10.15.5
・gatsby: 2.24.14

#事例
何の気なしに「gatsby develop」を実行すると、次のメッセージが表示する。

```
Something is already running at port 8000
? Would you like to run the app at another port instead? › (Y/n)
```

Yを選ぶと、port 8001で起動する。
nを選ぶとサーバーを起動せずに終了する。

#対応
8000ポートで使われているプロセスをkillする。

①まずはポートのプロセスを調べる

```
lsof -i :8000
```

結果は次の通り。

```
COMMAND   PID USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
node    14778 saku   27u  IPv4 0xb6bc7a92d19432ab      0t0  TCP localhost:irdmi (LISTEN)
```

②プロセスをkillする

```
kill -9 [PIDの数字]
```

こーゆーのをさらっと解消できるといいんですが、まだまだです。
ブラウザで画像圧縮してアップロード Vue.js

参考ページ
○　https://blog.capilano-fw.com/?p=3578
→サンプルコードそのままでも使える
×　https://qiita.com/nobu17/items/64f51d43827424db4b6a
→調整が必要。高機能

# Vueの用意
参考ページの通り

# Laravelのコントローラ
ファイル名の変更などはお好みで。

```
    public function resize_ajax(Request $request) {

        if($request->has('images')) {
            foreach ($request->images as $key => $photo) {
                // $photo->store('images'); // storage/app/imagesフォルダに保存

                $file_name = $photo->getClientOriginalName();
                $photo->storeAs('images', $file_name); // storage/app/imagesフォルダに保存
            }
        }
        return $request;
    }
```

以上

formDataやaxiosの知識がないとつまずきましたが、
参考ページのとおりにやればできました。
著作権の原始的な帰属

応用情報技術者平成29年秋期 午前78

企業が請負で受託して開発したか，又は派遣契約によって派遣された社員が開発したプログラムの著作権の帰属に関し契約に定めがないとき，著作権の原始的な帰属はどのようになるか。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/e24cd6ee-cce4-694c-3401-8c31e1daeef2.png)


１、
著作権は、著作物を創作したものに対して認められる権利です。

・請負契約では、原則として請負業者が開発したプログラムの著作権は受託した請負業者に帰属します。
・派遣契約では、派遣先企業の指揮命令下で開発業務が行われるので、派遣元企業の従業員が開発したプログラムであっても、その著作権は派遣先に帰属します。

・また企業の業務活動にて生産したプログラムの著作権は、個人ではなく企業に帰属します。

つまり、
　請負→発注先、
　派遣→派遣先 となってますね。

基本は、どの企業で開発したがその企業に帰属しますね。


参照：
https://www.ap-siken.com/kakomon/29_aki/q78.html
系統図、散布図、特性要因図、パレート図

応用情報技術者平成29年秋期 午前76

プログラムのステップ数が多くなるほどステップ当たりのエラー数も多くなる傾向があるように見受けられたので，データを採って調べた。これを分析するのに最も適した図はどれか。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/2e941268-21c3-0edf-ce63-933affb6b667.png)


１、系統図
系統図は、目的の達成手段をみつけるために「目的－手段」の連鎖を階層的に表現した図です。


系統図とは、概念を大きなものから徐々に小さなものへと枝別れさせながら展開し、課題解決へのいくつかの 方策を考案したり（方策展開型）、ものごとの構成要素を整理して、要素の相互の関連や要素の抜け落ちを チェックする（構成要素展開型）ために用いる図法です。

１）、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/7a2a2c49-ccf3-c9cc-7a09-13da9b64a645.png)

２）、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/3faa93f4-0a4c-cb4f-f031-3162cc49d204.png)


２、散布図
散布図は、縦軸、横軸に2項目の量や大きさ等を対応させ、そのグラフ上にデータを打点した図です。変数間の相互関係を表すのに役立ちます。

2つの要素からなる1組のデータが得られたときに、2つの要素の関係を見るためにプロットしたグラフを散布図といいます。1つ目の要素を横軸に、2つ目の要素を縦軸に取り、各データを該当する位置にプロットします。データを散布図で表すと、1つ目の要素が変化したときに、2つ目の要素はどのように変化するかを確認することができます。2つの要素の間に何らかの関係がある場合、これらのデータ間には「相関関係」があるといいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/a6c46b7d-c982-236c-c4b6-3e7ea7f2a337.png)


３、特性要因図
特性要因図は、特性(結果)とそれに影響を及ぼしたと思われる要因(原因)の関係を体系的に表わす図です。


特性要因図（フィッシュボーン図）とは
特性とは現在見えている結果のことを指し、要因とはその結果をもたらすのに影響を与えた要素のことです。特性要因図は、結果である特性がどのようにしてもたらされたかを図式化して、そこに潜んでいる問題点をあぶり出すのに用いられる手法のことです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/02c160d2-23e0-cf86-07f9-7fc0abb9b8f2.png)


４、パレート図
パレート図は、値の大きい順に分析対象の項目を並べた棒グラフと、累積構成比を表す折れ線グラフを組み合わせた複合グラフで、主に複数の分析対象の中から、重要である要素を識別するために使用されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/a1fc5c60-093c-434f-c1dd-ee23d0d56e09.png)




参照：
系統図
https://www.mhlw.go.jp/content/11800000/jinzai_93_img1.pdf

散布図
https://bellcurve.jp/statistics/course/9587.html


特性要因図
https://navi.dropbox.jp/fishbone-diagram

パレート図
https://www.sk-quality.com/qc7/qc702_pareto.html
【jest】基礎　RSpecと比較　モック関数について


#はじめに
jestを学習し始めたので、簡単にまとめる。
主に公式ドキュメントの序盤のみになります。
[https://jestjs.io/en/](https://jestjs.io/en/)


#jest

```javascript
test('1+1は2', () => {
  expect(1+1).toBe(2);     
});
```



#RSpec

```ruby
RSpec.describe '足し算' do
  it '1+1は2' do
    expect(1 + 1).to eq 2
  end
end
```

#jestでモック関数を作成

```javascript

function forEach(items, callback) {
  for (let index = 0; index < items.length; index++) {
    callback(items[index]);
  }
}
```

↑こういった、配列とコールバックを引数に受け取る関数を定義して、

```javascript
const mockCallback = jest.fn(x => 42 + x);
forEach([0, 1], mockCallback);
```

受け取った数値に42を足すモック関数を`jest.fn`で定義。
mockCallbackに代入。
これで、jestが用意するメタ情報を持っているダミーの関数ができる。

ここから、テストを作成し、コールバックに適切にパラメータが渡っているか、実行結果が返せているかを検証する。

```javascript
//mockCallbackが呼ばれる回数は2回
expect(mockCallback.mock.calls.length).toBe(2);

//1回目にモック関数が呼ばれたときの引数の1番目は’0’
expect(mockCallback.mock.calls[0][0]).toBe(0);

//2回目にモック関数が呼ばれたときの引数の1番目は’1’
expect(mockCallback.mock.calls[1][0]).toBe(1);

//1回目にモック関数が呼ばれたときのリターンは’42’
expect(mockCallback.mock.results[0].value).toBe(42);
```

ここまでがドキュメントに載っているものです。
更に、例えば

```javascript
//2回目にモック関数が呼ばれたときのリターンは’43’
expect(mockCallback.mock.results[1].value).toBe(43);
```


こちらのテストもパスすることになる。

##終わりに。
最後まで読んで頂きありがとうございます:bow_tone1:
転職の為、未経験の状態からReact,Rails等を学習しております。継続して投稿していく中で、その為のインプットも必然的に増え、成長に繋がるかと考えています。
投稿の内容に間違っているところや、付け加えるべきところが多々あるかと思いますので、ご指摘頂けると幸いです。この記事を読んで下さりありがとうございました。
勉強日誌7日目

今日は美容室に行ってから喫茶店で雑談してから勉強Time

BGMはジブリ♪

正答率　65%

portal
nmcli networking connectivity でcaptive portalに接続中の状態を表す

limited
nmcli networking connectivity でネットワークに接続しているが、インターネットにアクセスできない状態

unknown
nmcli networking connectivityで接続状態が見つからない

domain
search
/etc/resolv.confで名前解決時に付加するドメイン名を指定できる項目名

networking
nmcliコマンドのオブジェクトでネットワークの接続状態を表示したり、ネットワークを有効化・無効化するもの

modify
nmcliコマンドでインターフェースのIPアドレスを設定したい。

nmcli device status
nmcliコマンドでデバイスの状態を表示

nameserver
DNSサーバーで指定する際

/etc/nsswitch.conf
名前解決を行う際、何にどの順番で問い合わせを行うかを指定

hostnamectl
systemdが動作するシステムで、ホスト名の表示・設定を行えるコマンド

nmcli device wifi connect
nmcli コマンドで、Wi-fiアクセスポイントに接続するためのデバイスを作成し、有効にしたい。

/etc/hostname
Debian系のディストリビューションでホスト名を設定するファイル

nmcli device connect
nmcli device disconnect
nmcliコマンドでインターフェースを接続、または切断。
音声分析におけるフーリエ変換とスペクトログラムを理解する

# はじめに

音声分析におけるスペクトログラムを得るまでに必要な知識をまとめた。
具体的には以下の用語の意味・関係をまとめた。

+ フーリエ変換 (FT: Fourier Transform)
+ 高速フーリエ変換 (FFT: Fast Fourier Transform)
+ 短時間フーリエ変換 (STFT: Short-Time Fourier Transform)
+ スペクトル・周波数スペクトル (Spectrum)
+ スペクトログラム (Spectrogram)

# フーリエ変換とは (FT: Fourier Transform)

`フーリエ変換`は`時間領域`（wavファイルのような横軸を時間、縦軸を振幅としたもの）の値を`周波数領域`（横軸を周波数、縦軸を振幅としたもの）に変換する手法の1つ。
機械学習等で音声を扱うときは、時間領域のままでは上手く扱うことができず、周波数領域の値を使う方が好ましい。

![スクリーンショット 2020-09-13 10.47.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651198/bd3683b9-fab4-6b1c-35e2-13749c6f3cea.png)

時間領域から周波数領域に変換することを、まとめて`フーリエ変換`と言っていることが多いが厳密には違う。
時間領域から周波数領域の変換は、連続値と離散値の組み合わせで4種類あり、フーリエ変換はその1つである。

|  時間領域  |  周波数領域  | 変換手法  |
| ---- | ---- | ---- |
|  連続  |  離散  |  フーリエ級数展開  |
|  連続  |  連続  |  フーリエ変換  |
|  離散  |  連続  |  離散時間フーリエ変換 |
|  離散  |  離散  |  離散フーリエ変換 (DFT: Discrete Fourier Transform)  |

コンピュータでは基本的に離散値しか扱えないため、音声分析に使用されるのは主に`離散フーリエ変換`となる。`DFT`という略称でかかれることも多い。
この記事の以下でも、一般化のため、時間領域から周波数領域の変換を総称して`フーリエ変換`と表現する。

# 高速フーリエ変換とは (FFT: Fast Fourier Transform)

> 高速フーリエ変換（こうそくフーリエへんかん、英: fast Fourier transform, FFT）は、離散フーリエ変換（英: discrete Fourier transform, DFT）を計算機上で高速に計算するアルゴリズムである。
> **引用：高速フーリエ変換 - Wikipedia (https://ja.wikipedia.org/wiki/高速フーリエ変換)**

`高速フーリエ変換`は、`離散フーリエ変換`をコンピュータで高速に計算する手法である。得られる値は`離散フーリエ変換`と同じ。なので、python等のライブラリを使ってフーリエ変換を行う場合は、基本的に高速フーリエ変換を用いる。`FFT`という略称でかかれることも多い。

# 短時間フーリエ変換とは (STFT: Short-Time Fourier Transform)

フーリエ変換は時間領域全体に対して適用されるため、フーリエ変換後の周波数領域に時間情報はない。
ただ、音声分析では「こんにちは」という文章全体の周波数情報ではなく「k,o,n,n,n,i,c,h,i,w,a」といった音素ごとの周波数情報を得ることが重要である。
`短時間フーリエ変換`では時間領域を区間的にフーリエ変換する。それにより、時間変化する音声の分析を行うことが可能になる。短時間フーリエ変換後の値は「時間・周波数・振幅」の三次元の値になる。以下の図では見やすさのために振幅をdbに変換して表示している。

![スクリーンショット 2020-09-13 10.36.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651198/4d3c35d2-4a16-8c83-f59a-4f2b44bcb9b0.png)


# スペクトル・周波数スペクトルとは (Spectrum)

音声分析では、音声をフーリエ変換したものを`スペクトル`、または`周波数スペクトル`と呼ぶ。簡単に言うと以下の図のこと。音声をスペクトルで分析することを`スペクトル分析`という。英語では`Spectrum`なので、`スペクトラム`や`スペクトラル分析`と言うこともある。

![スクリーンショット 2020-09-13 10.42.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651198/030cd3af-2dd8-e9dd-1cfb-c6230fac733d.png)

# スペクトログラムとは (Spectrogram)

音声分析では、音声を短時間フーリエ変換したものを`スペクトログラム`と呼ぶ。簡単に言うと以下の図のことである。

![スクリーンショット 2020-09-13 10.36.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651198/6a22e6e3-7fab-7475-a85b-edc298ba6e0c.png)

# まとめ

音声分析では、似たような言葉で同じ意味・違う意味のものが多く存在し、混乱したのでまとめてみた。他にもケプストラムやメルスペクトラムといった専門用語もあるので、次はその辺りもまとめていきたい。

# 参考文献

離散フーリエ変換(DFT)の仕組みを完全に理解する
https://qiita.com/TumoiYorozu/items/5855d75a47ef2c7e62c8
【Android】Kotlinの画面遷移

Android Kotlin画面遷移方法について調べてみた。


###Manifestへの追加

```xml:AndroidManifest.xml
 <activity android:name=".MoveApp" android:label="Move" ></activity>
```

###xml画面作成
デザインモードで作成した物をコード化すると以下になる。

```xml:activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/moveButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="移動する"
        tools:layout_editor_absoluteX="154dp"
        tools:layout_editor_absoluteY="426dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
```

```xml:app_move.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/returnButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Return"
        tools:layout_editor_absoluteX="148dp"
        tools:layout_editor_absoluteY="266dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
```



###画面遷移コード

Intentが画面遷移を行うコードとなる。


```Kotlin:MainActivity.kt
package com.example.moveapp

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.content.Intent
import kotlinx.android.synthetic.main.activity_main.*


class MainActivity:AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        setScreenMoveApp()
    }

    private fun setScreenMoveApp(){
        setContentView(R.layout.activity_main)
        setScreenMain()
    }

    private fun setScreenMain() {
        setContentView(R.layout.activity_main)
        moveButton.setOnClickListener{
            val intent = Intent(application, MoveApp::class.java)
            startActivity(intent)
        }
    }
}
```

```Kotlin:MoveApp.kt
package com.example.moveapp
import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.app_move.*


class MoveApp:AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.app_move)
        setScreenMoveApp()
    }

    private fun setScreenMoveApp(){
        setContentView(R.layout.app_move)
        setScreenMain()
    }

    private fun setScreenMain(){
        setContentView(R.layout.app_move)
        returnButton.setOnClickListener{
            val intent = Intent(application, MainActivity::class.java)
            startActivity(intent)
        }
    }
}

```
Cookieとセッションの概要

HTTP Cookie及びセッションの概要記事。

## Cookie

* ユーザーの情報を一時的にクライアント(ブラウザ)に保存する仕組み・その情報を指す。

### Cookieの用途

* ユーザー情報を一時的に保存し、その情報を利用したユーザーの特定、情報入力の省略用途で利用する。
    * 例：ログイン画面フォームを入力状態とする。

### Cookieのやり取り

![Cookie_Sequence.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586535/abe40c62-7bc4-da38-108d-265e4f739ca9.png)

#### 初回

* ②レスポンス(Cookieの保存を指示)
  * サーバーは、レスポンスに `Set-Cookie` ヘッダを付与し、クライアントに対して「Cookieの保存」を指示できる。
  * `Set-Cookie` ヘッダには、Cookieの有効期限やCookieを送るドメイン、有効パスなどの属性を、`;` で区切って記述する。
* ③Cookieを保存
  * サーバーからの `Set-Cookie` ヘッダの内容に基づき、クライアントはCookieを保存する。

#### 2回目以降

* ①リクエスト(Cookieを含む)
  * クライアントは、リクエストに `Cookie` ヘッダを付与し、サーバーに「どのようなCookieを保存している」かを表明することができる。
  * Cookieが存在する限り、常にリクエストにCookieヘッダを付与する。


## セッション

* ユーザーの一連の処理・操作を表す情報。
  * 例：ログイン～ログアウトまで
* 「セッションID」を使用して同一セッションを管理する。
* セッションIDはCookieに保存し、HTTPヘッダーに付与して送受信を行う。
* ユーザーがブラウザを閉じるか、サイトを離れた際に、削除する。
  * 通常３０分後にセッションは終了される。

### セッションの用途

* ユーザーの操作に関する情報を一時的に保存するために利用する。
  * 例：ECサイト閲覧中に、商品をカートに入れた後、サイトを離れ、再度アクセスしたときに、カートに商品が入ったままの状態とする。

### Cookieを用いたセッション管理

![Session_Sequence.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586535/6bf3b39d-b2b0-b039-5b69-a5d2a43e5fc3.png)






## Cookieとセッションの違い

|          | クッキー                                           | セッション                 |
| -------- | -------------------------------------------------- | -------------------------- |
| 用途     | ユーザーの識別情報の記憶<br />セッションIDの送受信 | ユーザーの一連の操作の記憶 |
| 保存場所 | クライアント(ブラウザ)のみ                         | サーバー                   |
| 無効化   | 可                                                 | 不可                       |



## 参考情報

* [クッキー（Cookie）とセッションとキャッシュの違いは何か？](https://ssaits.jp/promapedia/technology/cookie-session-cache.html)
* [【PHP超入門】Cookieとセッションについて](https://qiita.com/7968/items/ce03feb17c8eaa6e4672)
* [Cookieとキャッシュとセッションの違いをまとめた](https://qiita.com/taoki11111/items/4c103683ac46ec851017)
Power Automateを使って、Power Appsにプッシュ通知を送信する

スマホ・タブレットを使って、「プッシュ通知からある処理をやってもらう」という流れを作りたかったので、PowerAutomate＋PowerAppsで試してみたというメモです。
処理自体は、PowerAppsで実装してますが、プッシュ通知をすることで自然な流れでやってもらえるようにしたかったので、PowerAutomateを使って、決まった時間にPowerAppsのプッシュ通知をすることにしました。

#大切なこと
PowerAutomateの言語設定を、日本語から **English** に変更しましょう。
ただ、これだけです（2020/9/13現在）

###日本語設定の場合
[send push notification]と入力しても、候補に出てこなかったです。
「えっ、ないじゃん！使えるはずじゃないの？？？」と一瞬戸惑って、少しの間、うーんとなりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/a8145f12-d1d6-589b-8860-b8799d60db0a.png)


###英語設定の場合
候補に、**Power Apps Notification** が現れました。
「やったー」って思いながら、何とも言えない虚しさが込み上げてきます。
悩んでた時間を返して欲しい。。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/53c14524-2414-c851-a430-e9c23424c69b.png)

#参考
普通に実装するには、こちらの流れを参考にすれば全然大丈夫です。
[マイクロソフト公式Docs - PowerAppsでプッシュ通知を送信する](https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/add-notifications#send-a-notification-from-a-flow)

#まだ残ってる困りごと
確かにこの流れで、iPhoneに通知が来ることが確認できました。
一方、Androidでは通知が届かずにまだモヤモヤしてます（私だけでしょうか。。。）
Angular１０ とFirebaseでブログを作ってみる１０ （flex-layoutでレスポンシブ対応してみる）

[前回](https://qiita.com/teracy55/items/b78bdc6339d3f814752e)からかなり間が空いてしまいましたが、今回はflex-layoutを導入してレスポンシブ対応してみようと思います。

※Angular10にアップデートしたため、タイトル変わってます
　Angular9 => 10のアップデートについて[公式のアップデートガイド](https://update.angular.io/)をご覧ください

# Angularバージョン

```
> ng "version"


     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 10.0.8
Node: 12.16.3
OS: darwin x64

Angular: 10.0.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.8
@angular-devkit/build-angular     0.1000.8
@angular-devkit/build-optimizer   0.1000.8
@angular-devkit/build-webpack     0.1000.8
@angular-devkit/core              10.0.8
@angular-devkit/schematics        10.0.8
@angular/cdk                      10.2.0
@angular/cli                      10.0.8
@angular/fire                     5.3.0
@angular/flex-layout              10.0.0-beta.32
@angular/material                 10.2.0
@ngtools/webpack                  10.0.8
@schematics/angular               10.0.8
@schematics/update                0.1000.8
rxjs                              6.5.4
typescript                        3.9.7
webpack                           4.43.0
```

※Angular10にバージョンアップしてます


# インストール

- 公式通りインストールします

```
npm i -s @angular/flex-layout
```

## FlexLayoutModuleのインポート

```src/app/app.module.ts
import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({
  ・・・
  imports: [
    ・・・
    FlexLayoutModule,
```


# TOPページをいじる

- `fxLayout`をフレックスレイアウトを適用する要素に付与します
    - 基本は横並びとするため`row`を指定します
    - その子要素に`fxFlex`で割合をセットします
        - 今回はニュースを70%で表示するため、`fxFlex="70"`とします
- モバイル表示時は全て縦並びになるように`fxLayout.lt-sm="column"`を設定します

```
<div fxLayout="row" fxLayout.lt-sm="column">
  <div class="contents news" fxFlex="70">
    <app-top-news></app-top-news>
    
    <div class="qiita">
      <app-top-qiita></app-top-qiita>
    </div>
  </div>
  <div class="contents twitter" fxFlex>
    <app-top-twitter></app-top-twitter>
  </div>
</div>
```

※fxFlexの使い方は[こちら](https://github.com/angular/flex-layout/wiki/fxFlex-API)を参照


# 表示してみる

https://teracy-blog.web.app

### PC版表示

![スクリーンショット 2020-09-13 9.53.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/c8d3fc0c-4b91-a35b-970b-a9e74110b51a.png)

### モバイル版表示

![スクリーンショット 2020-09-13 9.54.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/0224f72b-cc8a-45ee-33c1-095f9ab5081a.png)
![スクリーンショット 2020-09-13 9.54.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/aeffea8c-9578-d57b-8e1b-e6ec2b4fd542.png)


# 最後に

今回はflex-layoutを使って、レスポンシブ対応させました。
簡単な使い方しかしてませんが、これだけでもPC／モバイルで表示を切り分けられるので便利ですね。
Poetry Django Docker Pycharm で開発環境構築する

# はじめに

pythonを始めて１年経ちますが、Pythonの環境構築はまだ慣れません。
特にパッケージマネージャは数ある言語の中でも最弱のように感じます。
なぜかmacで開発環境を構築しようとするとなぜか OpenSSL がらみのエラーが発生していました。

そんな悩みの解決に開発環境をdocker上に構築する方法をまとめました。
 
ソースは [Github](https://github.com/va034600/python-dev-on-docker) にあげてあります。


# ディレクトリ構成

```
├── pyproject.toml
└── docker
    └── Dockerfile
    └── docker-compose.yml
└── mysite/*
```

# ファイル
メインどころのファイルのみ記述します。
Djangoが作成したファイルは置いておきます。

```:pyproject.toml
[tool.poetry]
name = "python-dev-on-docker"
version = "0.1.0"
description = ""
authors = ["va034600"]

[tool.poetry.dependencies]
python = "^3.6"
django = "^3.1.1"

[tool.poetry.dev-dependencies]

[build-system]
requires = ["poetry>=0.12"]
build-backend = "poetry.masonry.api"
```

```:Dockerfile
FROM python:3.6.8
WORKDIR /usr/src/app

ENV POETRY_VERSION=1.0.10 \
    PATH="/root/.poetry/bin:$PATH"
RUN curl -sSL https://raw.githubusercontent.com/sdispater/poetry/${POETRY_VERSION}/get-poetry.py | python && \
    poetry config virtualenvs.create false
COPY ./pyproject.toml /usr/src/app/pyproject.toml
RUN poetry install

CMD tail -f /dev/null
```

```:docker-compose.yml
version: '3.5'
services:
  app:
    build:
      context: ../
      dockerfile: ./docker/Dockerfile
    working_dir: /usr/src/app/mysite
    command: python manage.py runserver 0.0.0.0:8000
    volumes:
      - ../mysite:/usr/src/app/mysite
    ports:
      - "8000:8000"
```


# consoleからdocker-composeを実行
とりあえず、Pycharmなしの `docker-compose up` で動作を確認します。

```
$ cd docker
$ docker-compose up -d
$ curl http://127.0.0.1:8000/
$ docker-compose down
hello1
```

# Pycharm でデバッグ
## Pycharnの設定
### Python Interpreter はdocker-composeで追加する
![スクリーンショット 2020-09-13 9.41.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203946/158213ef-6adc-6b3f-116c-7560644a9b2a.png)

### プロジェクトのInterpreterをdocker-composeにする
![Preferences.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203946/45697e10-20be-7cea-eb77-e96c67bae676.png)

### Configuration で runserverを作成する
ポイントは パラメータで `runserver 0.0.0.0:8000` にすること
![Run_Debug_Configurations.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203946/a78559b5-28f1-1e44-95b7-342bbe610c52.png)

## Pycharm でデバッグ実行する
これでブレークポイントも止まります。
ファイルを修正してdocker-composeの再起動なく反映もされます。

# 終わりに
これでホスト側がすっきり。
簡単に開発環境が構築できます。
現在接続されているカメラの台数をメニューバーに表示する

現在接続されているカメラの台数をメニューバーに表示するプログラムを作りました。
# 1. 使い方
## 1.1. BitBarをインストールする
https://github.com/matryer/bitbar
こちらから、BitBarをダウンロードしてインストールします。最新版はv1.9.2。

が、v.2.0.0でも良いと思います。
https://github.com/matryer/bitbar/releases/tag/v2.0.0-beta10

解凍したら、アプリケーションを、`/Applications`に移動します。

起動すると、メニューバーに`BitBar`と表示されるので、そこをクリックし、プラグインを保存するDirectoryを指定します。私の場合は、`~/usr/plugin`にしました。
## 1.2. show_camresをインストールする
制作したプログラムはこちらです。
https://github.com/eto/show_cameras/

こちらをダウンロードする。
https://raw.githubusercontent.com/eto/show_cameras/master/show_cameras.10s.sh

このファイルを、~/usr/pluginに移動する。

    % mv show_cameras.10sec.sh ~/usr/plugin
BitBarをクリックし、Refresh allを選ぶ。起動するはずです。
# 2. BitBarプラグインの作り方
これは、BitBarを使ってみる実験として作りました。BitBarは、macにて、メニューバーに情報を出すための、とても簡単な方法です。なにしろ、標準出力から出力するだけ。

以下は、完全なBitBarのプラグインです。

```biceps.sh
#!/bin/sh
echo 💪
```
これを、~/usr/plugin/biceps.shとなるように置いて、

    % chmod +x biceps.sh
とします。それから、BitBarをRefresh allすると、上腕二頭筋がメニューバーに出てきます。これだけ。

定期実行も簡単です。

```date.10s.sh
#!/bin/sh
date
```
chmod +xを忘れないように。それから、BitBarをRefresh allすると、メニューバーに現在時刻が出てきます。

BitBarのプラグインのページを見ると、どんなことができるかわかります。
https://github.com/matryer/bitbar-plugins
# 3. カメラ台数の取得方法
    % system_profiler
とすると、macのシステム情報が出力されます。が、とても長い。関係する情報を全部出そうとするため。
今回は、カメラ関連だけで良い。その場合は、

    % system_profiler SPCameraDataType
とします。こうすると、カメラ関連の情報だけを出力します。

以下を参考にしました。
https://qiita.com/takayukioda/items/585c4c64b3a3ec03082c

done!
Parallels Desktop16 試用版を体験

私は、今までMacでWindowsなど別のOSを使う時は、VirtualBoxを使っていました。
でも、Windowsを使っていてMacからWindowsにコピペしたい時とか不便を感じることがありました。
そんな思いをしているので、VPSで仮想マシンを使うこともあります。

今回は、何故か急に以前ネットニュースでMacでWindowsを使う仮想化ソフトで、無料のものをみた覚えがふと頭の中に浮かんだので、ネット検索しました。

その中で、１４日間無償で体験できるParallels Desktop16を知りました。

インストールしてWindowsが起動して最初に驚いたのは、Macのデスクトップが表示されていることです。
デスクトップをMacと共有できるのですね。

また、Windowsの中でソフトの一覧を見ていたら、Macにインストールされているソフトが（mac)として、表示されているのも凄いと思いました。

私は、Windows10の試用版を使ったので、Parallels Desktop16の中でWindowsをダウンロードしてインストールする手順は使いませんでした。

#気になること
キー入力の方法が、常にENになることと、Macの方もUSの文字入力になってしまうことが、気になりました。
Windowsの設定で、言語パックを日本語のみにして対応しました。

でも、最初に文字入力の種類がENになるのは、Parallels Desktop16が外国のメーカーのソフトだからかなと勝手に想像しています。

#良い点
##Windowsのソフトを使うと、MacのDockに表示されることです。
![スクリーンショット 2020-09-13 10.01.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20977/5372faa9-3aca-980f-d820-199269ad22bb.png)

##それからMicrosoft PowerPointで、動画のエクスポートができることです。
![スクリーンショット 2020-09-13 10.03.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20977/6e352e79-6beb-c0a4-ba70-5f9d68f25aa4.png)

VirtualBoxの設定でプロセッサのコア数を２個までしか私は使えない環境なので、諦めていた記憶がありました。
今回、動画の制作ができることを確認できたので、VPSの仮想マシンを使わなくもて良さそうです。

VPSの料金に少し加算することで、Parallels Desktop16を購入できると思うからです。

##表示が綺麗
何故かVirtualBoxで表示するよりも、Parallels Desktop16の方が綺麗に表示されているように思いました。

##ゲストOSの使い方を選んでインストールできる
ホストの環境と分けて開発環境として単独の環境として、インストールすることができるようです。
また、文章作成などの用途、ゲームの用途など用途別にインストールできることも良いと思いました。
[OutSystems]Traditional WebでモジュールのJavaScriptが動かないことがある

Traditional Webのモジュールには「JavaScript」プロパティがあります。
ここに定義したJavaScript関数はどの画面でも使用可能になるため、モジュール内で共通利用する関数を定義する場所として利用されています。

Forgeにあるモジュールに、このプロパティで定義したJavaScriptライブラリがエラーになるケースがあったので、原因を調査してみました。

# 環境情報
Personal Environment(Version 11.9.0 (Build 16900))
Service Studio(Version 11.8.7)
jQuery UI Drag and Drop and Sort(Version 2.0.2)

# 発端
Forgeにある、[jQuery UI Drag and Drop and Sort](https://www.outsystems.com/forge/component-versions/467)の動作確認をしていたところ、ドラッグもドロップもできない（UI要素をドラッグ＆ドロップする機能を提供するモジュールです）。

Chromeのデベロッパーツールで確認すると、以下のJavaScriptエラー。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/1c9ef25f-7c0d-638a-dae2-54244cd597f3.png)

> $(...).draggable is not a function

というエラーメッセージは、モジュールが内部で使用しているjQuery UIの読み込みに失敗していそうな印象。

# Forgeモジュールを調査
モジュールのJavaScriptに、以下のようなJavaScriptコードが設定されていました。
コメントを読むと、jQuery UIとその関連ライブラリ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/3ce2e2f8-7478-37a8-3960-6f6fdc26a8e7.png)

このコードをWeb Blockにラップしてテスト画面に配置してみるとエラーが消え、ドラッグ＆ドロップができるようになりました。

つまり、モジュールのJavaScriptプロパティに設定したコードは、同じモジュール内の画面でしか実行されないのでは？　という仮説。

# モジュールのJavaScriptプロパティについて
Traditional Web のモジュールにあるプロパティで、モジュール内で共通利用する関数を定義する場所です。
なお、ReactiveやMobileのモジュールにはありません。
[Moduleのプロパティ](https://success.outsystems.com/ja-jp/Documentation/11/Reference/OutSystems_Language/Traditional_Web/Module)

このForgeコンポーネントのように、部品提供するモジュールのJavaScriptプロパティのコードは実行されないのではないか？　という点に答えてくれそうな記述が動画にありました。
[JavaScript and jQuery in Traditional Web Applications](https://www.outsystems.com/learn/lesson/1135/javascript-and-jquery-in-traditional-web-applications)というコース内で、

> ... is a JavaScript property this includes a JavaScript code and this code will be added to every single screen that is defined for this module ...

「同じモジュール内のすべての画面に定義したJavaScriptが追加される」ので、Web Blockを利用する別のモジュール内の画面には読み込まれないのではないかと思われます。

# 実際に参照先モジュールのBlockを配置して動作確認
以下のようにJavaScript関数を用意して、Consumerモジュールで各関数を呼び出してみました。
それぞれ、alertでメッセージを出すだけの簡単なもの。メッセージはそれぞれ変えてある。

- Producerモジュール
    1. モジュールのJavaScriptプロパティに関数定義
    2. Web Blockを作成してそのJavaScriptプロパティにも関数定義
- Consumerモジュール
    3. モジュールのJavaScriptプロパティに関数定義
    4. 画面を作成してProducerのBlockを配置し、定義した3つの関数を実行

すると、2と3の関数は実行でき、1が実行できないという想定通りの結果。

Chromeのデベロッパーツールでネットワークタブを確認すると、モジュールのプロパティに定義したJavaScriptは以下のように、「_OSGlobalJS.js」というファイルとして読み込まれるようです。
下のスクリーンショットは3の関数定義：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/695b7741-5096-533f-d5c8-3894136e8414.png)

Producerモジュールに画面を作成すると、同名ファイルに1の関数定義が読み込まれました。

というわけで、動作確認結果でも、「部品提供するモジュールのJavaScriptプロパティは、参照側画面には読み込まれない」ということがわかりました。
PHPでWindows向けのCSVデータをLinuxサーバにて生成する。

手間だった為、関数を用意しておく。

# 生成するCSVデータ

* 文字コード = Shift-JIS
* 改行コード = ¥r¥n
  * ¥r =  キャリッジ・リターン（carriage return、復帰）
  * ¥n = ライン・フィード（line feed、改行）
* 項目を囲む文字 = 「"」（ダブルコーテーション）

# 関数

```php
/**
 * 二次元配列からWindows向けのCSVデータを生成する。
 *
 * @param array $records
 * @param string $delimiter
 * @param string $enclosure
 * @param string $enclosure_escape
 * @param string $line_break
 * @param string $from_encoding
 * @param string $to_encoding
 * @param int $maxmemory
 * @return string
 */
function createWinCSV(
    $records,
    $delimiter=',', $enclosure='"', $enclosure_escape='""', $line_break="\r\n", 
    $from_encoding='UTF-8', $to_encoding='SJIS-win', 
    $maxmemory=5242880
        ){
    $fp = fopen("php://temp/maxmemory:" . $maxmemory, 'r+b');
    $delimiter = $enclosure . $delimiter . $enclosure;
    foreach ($records as $record) {
        $line = $enclosure
                . implode($delimiter, array_map(
                    function($val) use($enclosure, $enclosure_escape) 
                        {return str_replace($enclosure, $enclosure_escape, $val);}, 
                    $record))
                . $enclosure
                . $line_break;
    	fwrite($fp, $line);
    }
    rewind($fp);
    $tmp = stream_get_contents($fp);
    fclose($fp);
    return mb_convert_encoding($tmp, $to_encoding, $from_encoding);
}
```

# 使用例
```php
$records = [
    ['id', 'name', 'birthday', 'comment'],
    ['0001', '佐藤', '1980/01/02', 'Thanks!'],
    ['0002', '鈴木', '1990/03/04', 'Hello.'],
    ['0003', '田中', '2000/05/06', 'I say "Hello".']
];

print(createWinCSV($records));
# "id","name","birthday","comment"
# "0001","����","1980/01/02","Thanks!"
# "0002","���","1990/03/04","Hello."
# "0003","�c��","2000/05/06","I say ""Hello""."
```

# 参考
生成したCSVデータをCSVファイルとしてダウンロードする箇所は、次のページを参考にさせて頂いた。
[【PHP】【CakePHP】CSVダウンロード - Qiita](https://qiita.com/kazu56/items/d2df449eb58e4ef9410e)

# 備考
本記事はブログ「[雑用エンジニアの技術ノート](https://scrapbox.io/nezuq/)」からの移行記事です。先のブログは削除予定です。
Rustのデバッグ環境情報リンク

自分用メモ。

# デバッガ関連

1. [Rust のデバッグ環境構築](https://qiita.com/yamoridon/items/3be3f0515a79567a0588)
2. [Rust のデバッグチートシート](https://qiita.com/legokichi/items/e2f807f70316a916f4be)
3. [Rustのデバッグ体験を上げるには](http://segafreder.hatenablog.com/entry/2018/12/13/145210)
4. [Rust IDE に化ける VSCode](https://tech-blog.optim.co.jp/entry/2019/07/18/173000)
5. [CodeLLDB](https://marketplace.visualstudio.com/items?itemName=vadimcn.vscode-lldb)
6. [15.4.8 Rust](https://sourceware.org/gdb/current/onlinedocs/gdb/Rust.html)
7. [rust-gdb. rust-lldb.](https://michaelwoerister.github.io/2015/03/27/rust-xxdb.html)
8. [Debugging the compiler](https://rustc-dev-guide.rust-lang.org/compiler-debugging.html)(rustc自体のデバッグ)

# プロファイラ関連
1. [cargo-profilerを試す](https://keens.github.io/blog/2016/05/14/cargo_profilerwotamesu/)
2. [cargo-profiler](https://github.com/svenstaro/cargo-profiler)

# 振り返り
さっと見た限り、VSCodeが使える環境では、[CodeLLDB](https://marketplace.visualstudio.com/items?itemName=vadimcn.vscode-lldb)でうまくいくようだ。組み込み環境の場合はgdbか?
平均所要時間

応用情報技術者平成29年秋期 午前75


本社から工場まで車で行くのに，一般道路では80分掛かる。高速道路を利用すると，混雑していなければ50分，混雑していれば100分掛かる。高速道路の交通情報が"順調"ならば高速道路を利用し，"渋滞"ならば一般道路を利用するとき，期待できる平均所要時間は約何分か。ここで，高速道路の混雑具合の確率は，混雑している状態が0.4，混雑していない状態が0.6とし，高速道路の真の状態に対する交通情報の発表の確率は表のとおりとする。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/f2512df2-75b5-e35f-a2fd-af7f73f56494.png)


１、交通情報の渋滞、順調により、分岐する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/00f59d61-ca23-2bf9-165d-3fbae871a5d6.png)


２、高速道路の混雑、混在していないにより、再度分岐する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/b8ade5dd-f6b2-2f11-d55b-ad0ec2a123e4.png)


整理してから、後ろから計算すると：

80 ×　0.36　＝　28.8
100　×　0.4　＝4
80　×　0.12　＝　9.6
50　×　0.48　＝　24

合わせて　28.8＋4＋9.6＋24＝66.4(分)


参照：
https://www.ap-siken.com/kakomon/29_aki/q75.html
webpack + Pug ：テンプレート内で環境変数を取得

# 0.前提

- webpack4
- pug-html-loader

# 1.package.jsonのscriptsで環境変数を設定

- npmでcross-envをインストールし、Mac/Winどちらでも動くようにする。

```js:package.json
  "scripts": {
    "build:prd": "cross-env NODE_ENV=production webpack --mode production",
    "build:stg": "cross-env NODE_ENV=staging webpack",
    "build:dev": "cross-env NODE_ENV=develop webpack"
  },

````

# 2. pugのテンプレート内で環境変数取得

- pugを置換するときnodeのライブラリが使えるので、nodeのprocessをつかって環境変数を取得。
- 定義したファイルは他のテンプレートで読みこむようにする。

```js:def.pug

//nodeのprocessを通じて環境変数を取得
var appEnv = process.env.NODE_ENV;

//環境変数によってpathのルートを変更
var pathRoot = (['develop', 'production'].includes(process.env.NODE_ENV) ) ? "/" : "/stg/";

```

# 3. 共通変数を各ページで読み込む

- 項番2で定義した「def.pug」を書くページで読み込む。

```html:page.pug

include /_includes/def.pug

doctype html
html(lang="ja")
 body
   a(href=pathRoot+"test.html") テスト

````

# 備考

webpkacの他のライブラリもこのような感じで環境変数が取れるのではないでしょうか？
ノートPCでChromeOSを動かす


## 概要

- 古くなったWindowsノートPCにChromeOSのクローンであるCloudReadyをインストールします

## ハードウェア

- HPノートパソコン：14-ac106tu
    - CPU：Core™ i3-5005U
    - メモリ：8GB
- USBメモリ：SanDisk Cruzer Fit 64GB
  - https://www.amazon.co.jp/gp/product/B07KGKFKQF

## OS

- ChromeOSのクローン CloudReady を導入します
- CloudReadyはChromiumOSから派生したOSです
- ChromeOSとほぼ互換ですが、GooglePlayは使えないのでandroidアプリは使えません

## 手順

- WindowsPCで、CloudReadyのHPから「Download the USB Maker」をクリックしてインストーラをダウンロード
  - https://www.neverware.com/freedownload#intro-text
- USB Makerを起動して、USBメモリにイメージを書き込みます
  - ウィザード形式なので、指示に従うだけです
  - SanDiskは推奨しないと表示されましたが、今回使ったCruser Fitは問題ありませんでした
- 書き込みが終わったらノートPCに差して、PCを起動します
- BIOSの設定を変えてUSBメモリから起動できるようにします
    - やり方はPCごとに違いますが、今回のHPノートでは電源を入れてF10押下でした
- OSが起動したら初期設定画面が出てくるのでセットアップします
    - HPノートでは起動できましたが、別のデスクトップPCでは起動ロゴのところで止まってしまいました

## パーティションの拡張

- USBメモリのインストールされたCloudReadyはデフォルトでは4GBしか領域を使わないようです
- GPartedを使ってユーザー領域のパーティションを拡張します
    - https://gparted.org/
    - https://ja.osdn.net/projects/gparted/
- GPartedはLinux用のソフトですが、Linuxを持っていなくてもLiveCDで利用できます
- 今回はFedora上でGPartedを使いましたが、FedoraでマウントしただけでUSBメモリ上のCloudReadyが壊れて起動しなくなるので、あらかじめ自動マウントをOFFにします
    - 自動マウントをOFFにする方法はデスクトップ環境ごとに異なります
    - 今回使用したMate環境では、dconf-editorを立ち上げて、``org.mate.media-handling automount``をoffにします。
    - コマンドラインで ``gsettings set org.mate.media-handling automount false`` でも良さそうです
- USBメモリを差して、GPartedを立ち上げます
- USBメモリのSTATEパーティション（partition 16）が3GBくらいになっているので、最大まで拡張し保存します
- USBをノートPCに差し込んで起動しなおせば、パーティションが拡張されています
    - CloudReadyの設定/デバイス/ストレージの管理で確認できます
エッジコンピューティング

応用情報技術者平成29年秋期 午前72 

IoTの技術として注目されている，エッジコンピューティングの説明として，適切なものはどれか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/2a492933-8abc-8606-07c6-b96ee3a160b9.png)

１、エッジコンピューティングは、
利用者や端末と物理的に近い場所に処理装置を分散配置して、ネットワークの端点でデータ処理を行う技術の総称です。
　・処理装置をクラウド上に配置する従来の方式よりも端末と処理装置の距離が短縮されるので、
　・アプリケーション処理の低遅延化やネットワーク負荷の低減が期待できます。
　・高いリアルタイム性が要求されるIoTに適した技術として注目されています。


２、
・機械学習の説明
データの特徴を学習して，事象の認識や分類を行う。

・グリッドコンピューティングの説明
ネットワークを介して複数のコンピュータを結ぶことによって，全体として処理能力が高いコンピュータシステムを作る。

・エネルギーハーベスティングの説明
周りの環境から微小なエネルギーを収穫して，電力に変換する。


参照：
https://www.ap-siken.com/kakomon/29_aki/q72.html
【Go】http.HandleFunc()とhttp.Handle()の使い分けは構造体のフィールドを使うかどうか

# はじめに
http.HandleFunc()とhttp.Handle()でServeHTTPを呼んでいるのに
なにが違っているのか分からなかったので調べてみました。

# 結論
構造体のフィールドを使いたいかどうか

# http.HandleFunc()とhttp.Handle()
[GoのドキュメントのPackage http](https://golang.org/pkg/net/http/)のよると

>ListenAndServe starts an HTTP server with a given address and handler. The handler is usually nil, which means to use DefaultServeMux. Handle and HandleFunc add handlers to DefaultServeMux:

とどちらもDefaultServeMuxのパターンとしてハンドラを登録するもの。

DefaultServeMuxについてやハンドラとの関係性については以下の記事がわかりやすいです。
[【Go】net/httpパッケージを読んでhttp.HandleFuncが実行される仕組み](https://qiita.com/shoichiimamura/items/1d1c64d05f7e72e31a98)

## http.HandleFunc()
[ドキュメント](https://golang.org/pkg/net/http/#HandleFunc)の例では

```
package main

import (
	"io"
	"log"
	"net/http"
)

func main() {
	h1 := func(w http.ResponseWriter, _ *http.Request) {
		io.WriteString(w, "Hello from a HandleFunc #1!\n")
	}
	h2 := func(w http.ResponseWriter, _ *http.Request) {
		io.WriteString(w, "Hello from a HandleFunc #2!\n")
	}

	http.HandleFunc("/", h1)
	http.HandleFunc("/endpoint", h2)

	log.Fatal(http.ListenAndServe(":8080", nil))
}
```

という形で
`/`のパターンであれば`Hello from a HandleFunc #1!`を出力し
`/endpoint`のパターンであれば`Hello from a HandleFunc #2!`を出力する

## http.Handle()
[ドキュメント](https://golang.org/pkg/net/http/#Handle)の例では

```
package main

import (
	"fmt"
	"log"
	"net/http"
	"sync"
)

type countHandler struct {
	mu sync.Mutex // guards n
	n  int
}

func (h *countHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
	h.mu.Lock()
	defer h.mu.Unlock()
	h.n++
	fmt.Fprintf(w, "count is %d\n", h.n)
}

func main() {
	http.Handle("/count", new(countHandler))
	log.Fatal(http.ListenAndServe(":8080", nil))
}
```

という形で
`/count`のパターンであればカウントの回数を出力する

この時にstructのフィールド`n int`に呼ばれた回数ごとに+1しているので
呼ばれるたびに回数を増加することができる。

# まとめ
ServeHTTPを実装しhttp.Handle()を使うことでstruct内のフィールドを利用したハンドラ作成が可能となる。

# 参考文献
ありがとうございました。
[GoのドキュメントのPackage http](https://golang.org/pkg/net/http/)
[【Go】net/httpパッケージを読んでhttp.HandleFuncが実行される仕組み](https://qiita.com/shoichiimamura/items/1d1c64d05f7e72e31a98)
[Go 言語の http パッケージにある Handle とか Handler とか HandleFunc とか HandlerFunc とかよくわからないままとりあえずイディオムとして使ってたのでちゃんと理解したメモ](https://qiita.com/nirasan/items/2160be0a1d1c7ccb5e65)
.htaccessでのIPアドレスのブロック（プロキシーサーバやロードバランサー経由の場合）

　プロキシーサーバやロードバランサー経由でサーバにアクセスされた場合は、接続元IPアドレスがそれらの機器のものとなる為、通常のブロックの書き方では対応できない。

```bash:.htaccess
order allow,deny
allow from all
deny from 255.255.255.255
```

　その場合は「X-Forwarded-For」を使用する。

```bash:.htaccess
SetEnvIf X-Forwarded-For “255\.255\.255\.255” denied_ip
 
order allow,deny
allow from all
deny from env=denied_ip
```

# 備考
　本記事はブログ「[雑用エンジニアの技術ノート](https://scrapbox.io/nezuq/)」からの移行記事です。先のブログは削除予定です。
無人航空機センサージャイロセンサ、気圧センサ、地磁気センサ、超音波センサ

応用情報技術者平成29年秋期 午前71


ドローン，マルチコプタなどの無人航空機に搭載されるセンサのうち，機体を常に水平に保つ姿勢制御のために使われるセンサはどれか。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/d5c20917-9b17-3120-ff5c-fd181792c0cb.png)


１、ジャイロセンサ
機体の姿勢を制御するために使用されます。
角速度(単位時間あたりの回転角)を検出するセンサで、主に「角速度」「傾き」「振動」の検出に使用されます。ドローンやマルチコプタでは、ジャイロセンサで測定された傾きをもとに自律的に機体の姿勢を水平に保つ制御を行っています。

・マルチコプタ【英】multicopterマルチコプターとは、回転翼を用いて飛行を制御する航空機のうち、複数のローターを搭載している機種の総称である。簡単に言ってしまえばローターが沢山あるヘリコプ


※ローター　rotor　回転子/翼
※ジャイロ　
　【英】gyroscope ;旋翼机；陀螺（仪）；罗盘；回转仪；旋转；回转。（ジャイロコンパス・ジャイロスコープの略。羅針盤の一。ジャイロスコープの原理を応用したもの。高速で回転する独楽(こま)の軸が、地球の自転の力に感応して、常に南北を指すようにした装置。鉄の影響を受けて誤差を生じやすい磁気コンパスの代わりに、船舶などで用いる。転輪羅針儀。回転羅針盤。ジャイロ。）


２、気圧センサ
気圧センサは、飛行高度および飛行速度の制御に使用されます。


３、地磁気センサ
地磁気センサは、飛行方向の制御に使用されます。


４、超音波センサ
超音波センサは、障害物の検知に使用されます。


参照：
https://www.ap-siken.com/kakomon/29_aki/q71.html
MySQL入門！基礎編（データベース用語 ～ TABLE作成まで）

----

**環境**
　Windows 10
　MySQL : version(5.7.28)
**使用アプリ**
　コマンドプロンプト(Windowsマーク押して「cmd」って打ったら出てくるやつ)

----

#データベース用語を整理

+ [table](#table)
+ [column](#column)
+ [row](#row)
+ [record](#record)
+ [field](#field)



#table
さまざまな情報（データ）が入った一つひとつの表のことを指す用語
![スクリーンショット 2020-09-12 105447.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/48b4037e-0fa3-c048-128b-d6d7aeb3dcf8.jpeg)

#column
列のこと
![スクリーンショット 2020-09-12 105447_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/44e50cdc-c991-87f4-9bda-39635225be6c.jpeg)

#row
行のこと
![スクリーンショット 2020-09-12 105447_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/bd4423a7-12f2-1a79-aa2b-a3e498c6d1e4.jpeg)

#record
データ(field)が入った一行一行のことを指す(※rowとは別物)
![スクリーンショット 2020-09-12 105447_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/7fea6f8a-5aab-d11b-2105-aa1efdb8eec5.jpeg)

#field
recordを構成する一つ一つのデータのことを指す用語
![record.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/0f332bc2-b300-830b-095c-545f850210f1.jpeg)


#TABLEを作成するために必要なStep
例 : 投稿に関するテーブルを作成する場合

    CREATE TABLE posts (
      message VARCHAR(140),
      likes INT
    );
    INSERT INTO
      posts (message, likes)
    VALUES
      ("HELLO", 22);

1行目 `CREATE TABLE` でテーブル名をつける
2行目, 3行目 列見出しにあたるfieldの名前を入れる
> `VARCHAR(140)` ⇒ 最大140字までの文字列
`INT` ⇒ 「likes」には整数が入る 

5行目以降 `INSERT`を使ってrecordを挿入していく

実行結果 >>
![スクリーンショット 2020-09-13 090524.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/bb54d9c2-8ec4-5c45-17e0-625d97109309.jpeg)

##TABLE構造の確認

    DESC posts;

実行結果 >>
![スクリーンショット 2020-09-13 091454.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/a1c93477-1bf2-1840-2056-091915be9e1f.jpeg)


##TABLEの一覧を表示

    SHOW TABLES;

実行結果 >>
![スクリーンショット 2020-09-13 091524.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/31cb576f-f77f-9145-8c55-55090f1d8c7e.jpeg)

##TABLEの中身を確認

    SELECT * FROM posts;

##複数のレコードを挿入する

    INSERT INTO posts (message, likes) VALUES("WORLD", 10), ("hogehoge", 3);

`VALUES(○○, ○○)`を`,`で繋ぐ
実行結果 >>
![スクリーンショット 2020-09-13 092949.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/df55a22e-32f9-f81c-4b7d-6bab278d8337.jpeg)

###クエリを書く際の注意点

* 慣習的にSQLは大文字で書くとされている
* 自分で付けるtable名やfield名は小文字で書く
* 文末(命令の終わり)には必ず`;`を付ける
* 文字列や日付データは`"`もしくは、`'`で囲む
Linuxサーバの容量を確認する。（dfコマンド, duコマンド）

これも毎回検索しているので、メモする。

# 【df】
パーティション別の最大容量/使用容量/空き容量を一覧する。

* -h：人間が分かりやすい単位で表示

```bash:df
df -h
# Filesystem      Size  Used Avail Use% Mounted on
# overlay          59G  2.7G   53G   5% /
# tmpfs            64M     0   64M   0% /dev
# tmpfs          1000M     0 1000M   0% /sys/fs/cgroup
# /dev/sda1        59G  2.7G   53G   5% /etc/hosts
# shm              64M     0   64M   0% /dev/shm
# tmpfs          1000M     0 1000M   0% /proc/acpi
# tmpfs          1000M     0 1000M   0% /sys/firmware
```

# 【du】
ディレクトリやファイルの容量を表示する。

* -h：人間が分かりやすい単位で表示
* -s：合計のみ表示

```bash:du
du -hs /etc
# 1.5M	/etc

du -h /etc
# 4.0K	/etc/opt
# 12K	/etc/logrotate.d
# 12K	/etc/ld.so.conf.d
# 8.0K	/etc/terminfo
# 16K	/etc/skel
# ……
```

# 備考
本記事はブログ「[雑用エンジニアの技術ノート](https://scrapbox.io/nezuq/)」からの移行記事です。先のブログは削除予定です。
KPI(Key Performance Indicator：重要業績評価指標)、KGI(Key Goal Indicator：重要目標達成指標)

応用情報技術者平成29年秋期 午前68

営業部門で設定するKPI(Key Performance Indicator)とKGI(Key Goal Indicator)の適切な組合せはどれか。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/6b6e7ead-d276-8dcc-4dcf-cf2ea526657c.png)



１、KPI(Key Performance Indicator：重要業績評価指標)
企業目標やビジネス戦略を実現するために設定した具体的な業務プロセスをモニタリングするために設定される指標のうち、特に重要なものを指す。

・訪問件数（新規顧客訪問件数，既存顧客顧客訪問件数），
・解約件数，
・歩留り率などが
KPIに該当する。


２、KGI(Key Goal Indicator：重要目標達成指標)
企業目標やビジネス戦略を実現するために設定した具体的な業務プロセスをモニタリングする指標の1つで、何を持って成果とするかを定量的に定めたもの。

・売上高（新規顧客売上高，既存顧客売上高），
・利益率，
・市場占有率，
・成約件数などが
KGIに該当する。


３、
経営戦略のプロセスに：
・「目標」がKGI、
・「手段」がCSF(Critical Success Factor，重要成功要因)，
・「指標」がKPI


参照：
https://kanauka.com/kakomon/ap/h26h/069.html

https://www.ap-siken.com/kakomon/23_toku/q68.html
hostsファイルの場所一覧

毎回検索しているので、メモする。

# hostsファイルの場所

## Windows10
C:\Windows\System32\drivers\etc\hosts

## macOS
/private/etc/hosts

## CentOS7
/etc/hosts

# 説明
　hostsファイルとは、IPアドレスとホスト名の対応関係の設定ファイルで、特定のパソコンでのみ使用したい対応関係がある時などに使います。
　例えば、開発用のパソコンにて本番サーバと同じホスト名でテストサーバへ接続する時に使っています。
　その対応関係は、「IPアドレス（スペース or タブ）ホスト名」（例：「127.0.0.1 localhost」）と記載します。

# 備考
　本記事はブログ「[雑用エンジニアの技術ノート](https://scrapbox.io/nezuq/)」からの移行記事です。先のブログは削除予定です。