OmniAICreator/Qiita-1.07M huggingface dataset:
確率変数の線形結合の分布

# 背景
「現代数理統計学」(竹村彰通)を一通り興味ある部分はフォローしたので、実際に道具として使えるように細かい部分をフォローしていくつもりです。
今は「日本統計学会公式認定 統計検定1級対応 統計学」をぱらぱらと眺めながら章末の演習問題を解いています。Amazonでのレビューは賛否両論という感じですが、一通り別の数理統計学の教科書を読んでから入る分には簡潔にまとまっている上に、章末に理解度のチェックシートがあるので知識の抜けを補強できます。
演習問題を解いていて、確率変数の変数変換の部分の理解が甘いな、と思ったので少し真面目に手を動かしてみることにします。

# 問題設定
確率変数$X_0,X_1$が標準正規分布に従っているとします。このとき

```math
Y_0 = X_0 + b X_1
```

のような変数変換を考えます。$f_Y(y_0)$はどのような分布に従うでしょうか。

# やってみる
確率変数を$(X_0,X_1) \to (Y_0,Y_1)$に変換します。求めたいのは$f_Y(y_0)$ですので、$Y_1$の選び方には任意性があります。どうせ最後には$Y_1$ついては積分してしまいますので、計算が楽になるように選ぶ方がよいです。具体的にはヤコビアンの計算が楽になるように選びます。ここでは

```math
Y_1 = X_1
```
と選びます。




```math
x_0 = y_0-by_1,\;x_1=y_1
```
ですので

```math
\begin{eqnarray}
f_X(x_0)f_X(x_1)dx_0dx_1 &=& f_X(y_0-by_1)f_X(y_1)\left|\frac{\partial (x_0,x_1)}{\partial (y_0,y_1)} \right|dy_0dy_1 
\end{eqnarray}
```

となります。つまり、

```math
f_Y(y_0,y_1) = f_X(y_0-by_1)f_X(y_1)\left|\frac{\partial (x_0,x_1)}{\partial (y_0,y_1)} \right|
```

です。面倒なのはヤコビアンの計算だけですね。今知りたいのは$f_Y(y_0)$ですので、これを$y_1$について積分してやります。

```math
f_Y(y_0) = \int_{-\infty}^{+\infty} f_X(y_0-by_1)f_X(y_1)\left|\frac{\partial (x_0,x_1)}{\partial (y_0,y_1)} \right| dy_1 \propto e^{-\frac{y_0^2}{2(b^2+1)}}
```

となります。

# 数値実験による確認
コードは次の通りです。

```c++
#include <random>
#include <iostream>
#include <fstream>
#include <cmath>

int main()
{
	std::mt19937 mt(0);
	std::normal_distribution<> gauss(0, 1);
	std::uniform_real_distribution<> r(0, 1);
	double a = 1, b = r(mt);

	int Iter = 1000000;
	for (int iter = 0; iter < Iter; iter++)
	{
		double x0 = gauss(mt);
		double x1 = gauss(mt);
		double y0 = a * x0 + b * x1;
		double y1 = x1;
		std::cout << y0 << std::endl;
	}
	std::ofstream ofs("calc.txt");
	for (double y0 = -10; y0 <= 10; y0 += 0.1)
	{
		//ofs << y0 << " " << 1. / 2. / M_PI * fabs(1. / a + b / a) * sqrt(2 * M_PI) * exp(-y0 * y0 / 2. / (b * b + 1)) / sqrt(b * b + 1)*0.1 << std::endl;;
		ofs << y0 << " " << exp(-y0 * y0 / 2. / (b * b + 1))  << std::endl;;
	}

	return 0;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520857/dcaa80c2-bb8f-f8b4-fe9f-7de07e2b3852.png)
解析計算の結果とほぼ一致することが確認できました。

# 離散分布の場合
離散分布の場合も同じようにして計算できますが、ヤコビアンがない分わかりやすいです。きれいな形に書けるかどうかは別ですが。

# 条件付き確率

```math
P(A|B) = P(A,B)/P(B)
```

ですので、これもあまり頭を捻らなくても同じような感じで計算できそうですね。

# まとめ
これまではその都度頭を捻って計算していましたが、半機械的に計算出来そうです。最終的に積分してしまうことがわかっている確率変数はうまいこと選ぶことが重要そうです。これは教科書を斜め読みしているだけでは気が付かないポイントでした。
TypeScriptでオブジェクトの配列から重複を排除する

# 概要
TypeScript にて Id を持つようなオブジェクトの配列に対して重複を排除する方法のメモです。
配列要素において、順番が先のオブジェクトが優先的に採用されます。

# コードサンプル

```ts

// 対象となるオブジェクト
class Sample {
    constructor(public id: number, public name: string) { }
}

// 重複排除の処理
const distinct = (samples: Sample[]) => {
    return samples.filter((x, i, arr) => arr.findIndex(y => y.id === x.id) === i);
}

// サンプル実装
const samples = [
    new Sample(1, 'Tanaka'),
    new Sample(2, 'Yamada'),
    new Sample(3, 'Suzuki'),
    new Sample(4, 'Sato'),
    new Sample(5, 'Nakamura'),
    new Sample(2, 'Two'),
    new Sample(3, 'Three')
];

const distincted = distinct(samples);
distincted.forEach(x => console.log(x.id + ":" + x.name));

// 1:Tanaka
// 2:Yamada
// 3:Suzuki
// 4:Sato
// 5:Nakamura


const samples2 = [
    new Sample(2, 'Yamada'),
    new Sample(6, 'Ito'),
];

// 応用技で複数のオブジェクト配列を合成するパターン
const distincted2 = distinct([...samples, ...samples2]);
distincted2.forEach(x => console.log(x.id + ":" + x.name));

// 1:Tanaka
// 2:Yamada
// 3:Suzuki
// 4:Sato
// 5:Nakamura
// 6:Ito

```
Stackdriver でWebサイトを死活監視する

# はじめに
Webサイトの死活監視といえば、[StatusCake](https://www.statuscake.com/)、[ Site24x7](https://www.site24x7.jp/) などが有名ですが、シンプルな外部監視を GCP の Stackdriver で実現する方法を説明します。
※ 2019/12/08 現在、本機能はまだ BETA の状態です。

## Stackdriver とは
GCP で提供されている、パブリッククラウド向けの統合監視ツールです。
最近、オンプレミスでも利用できるようになったみたいです。
インフラのメトリックス、ロギング、死活監視など広く提供しています。

運用管理に関して、多種多様な機能を搭載しているのですが、今回は Web サービスの死活監視に絞った記事になります。

# やり方
設定は、Stackdriver の「Uptime Checks」という項目で行います。
<img width="588" alt="uptime_checks.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57610/c9fbade2-3fe5-bf94-25fc-2c43901acc0b.jpeg">

選択後、一覧画面が表示されるので、「Add Uptime Check」から監視設定を追加します。
<img width="1277" alt="add_uptime_check.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57610/cdbc7c06-9b21-08e7-dc53-b03324a2b229.jpeg">

## 設定項目
※ 設定例はWebサイトを外部からURL経由で監視する例になります。

| 項目       | 内容 |    設定例    |
|:-----------------|:------------------|:------------------|
| Title | 設定名（URL監視の場合はURLを設定しておくと分かりやすい） | https://example.com        |
| Check Type | プロトコル（HTTP/HTTPS/TCP） | HTTPS |
| Resource Type | 監視対象のリソース | URL |
| Hostname | 監視対象のホスト | example.com |
| Path | 監視URLのパス | / |
| Check every | 監視感覚 | 1 minute |

基本的な設定は以上です。「Test」ボタンで設定の動作確認ができます。
成功した場合、以下のようなメッセージが出ます。
<img width="283" alt="スクリーンショット 2019-12-08 22.22.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57610/d54d5ceb-3476-7739-e003-5f977e8c35be.png">

問題なかった、「Save」で保存しましょう。

### Advanced Options
一般的に外部に公開されているサイトの場合、上記設定だけで問題ないと思いますが、
特殊な条件でしかアクセスできないサイト（認証など）のために、追加の設定をすることもできます。

- アクセスするポートの指定
- サイトの死活監視をコンテンツでやる場合の設定（デフォルトはステータスコードチェック）
- HTTPヘッダー情報
- 監視のタイムアウト設定

## 通知設定
設定した、項目を選択し「Create Alert Policy」から設定できます。
<img width="991" alt="create.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57610/1375fc1a-a7c5-377b-6b68-33f333deded7.jpeg">

タイトルのみ設定し、「Save」します。
<img width="861" alt="スクリーンショット 2019-12-08 22.34.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57610/b7bebfd8-7df1-c1c9-b370-aa1609929088.png">

Notification(optional）で通知先を設定します。Email, Slack など色々選べるので、好きな通知先を選択しましょう。
<img width="968" alt="notification.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57610/149ea43c-cabc-20a5-dddc-787d3d6a76f8.jpeg">

最後に最下部の「Save」をクリックして、設定を保存することによって、通知の設定は完了です。
途中、設定の説明メモなども入力できますが、必須ではなかったので飛ばしています。

# さいごに
個人的によく使っている StatusCake に比べると設定の導線が少し分かりづらい印象がありますが、GCP をすでに利用している場合、GCP 上で監視ツールを完結できるので、良いのかなと思いました。
実家住みの学生がラックサーバを自室にお迎えする話

## はじめに
[ITRC Advent Calendar 2019](https://adventar.org/calendars/4759) 八人目です
とある理由で企業向けのラックサーバーを手に入れる機会があったので
実家ぐらしの学生が自室に導入した時の話をこの機会に書き留めておきたいと思います。
~~ネタがコレくらいしかなかったので...~~
## 環境
- 実家ぐらし
- 実家はごくごく普通の家庭
- 学生
- 最低限のPC自作経験あり
- 同居人にITに詳しい人はいない
- たまたま家に1Gbpsの光回線が通っていてIPv6も降ってきている

## 最終的なサーバーのスペック
- 機種
    - ProLiant DL360e Gen8
- RAM
    - 4GB × 2
- CPU
    - Intel(R) Xeon(R) CPU E5-2407 0 @ 2.20GHz
- 電源
    - 460W × 2

## 経緯
学校の先輩からマザーボード以外のパーツを抜かれたラックサーバーをいただけることになり、エンタープライズ機を整備できる機会もあまりないので自分でレストアしてみることにしました。
## 修理
部品をバラバラに探すのもめんどくさかったのでヤフーオークションでジャンク品の同機種を落として生きてるパーツを合わせて修理することにした。PCジャンク愛好家がよく言う __"ニコイチ”__ というやつ。
運良く落札した個体のパーツが全部生きていたのでかなり安く修理することができました。
レストアしてみた感想としてはデスクトップPCを組んだことがある人なら多分そこまで苦労しないとは思いますが、一般のPCにはあまり組み込まれていないであろうRAID用のパーツの存在に気が付かずそこでかなり時間を取られてしまいました。

## 修理完了
ハードウェアの修理はそこまで苦労しませんでしたが、OSを導入するのにはかなり苦労しました、普通にCentOS7をインストールしようとしたらSASを一切認識してくれませんでした。どうやらこの機種の`Smartアレイコントローラー`のドライバが問題だったらしい。
なのでメーカー(HPE)が本機種用にカスタムしたESXiのイメージが存在するのでそれを使用することで解決しました。
なかなか同じ状況の人が存在しないらしく資料がほとんど手に入らなかったのですごい苦労しました。
ESXiの使い方はかなりたくさん資料があるし感覚でVMを作成&運用するのにはそこまで苦労はしませんでした。

## 実際にサーバーとして使ってみた
自分は勉強としてVirtualBoxやらKVMやらの仮想環境を使ってほんの少しだけいろんなものを構築した経験があったのですが、常時コンピュータを起動し続けることはあまりありませんでした。
そこで新たに出てくる問題が`騒音`と`電気代`です。

## 騒音
実家住みなので家族に迷惑がかかるのがとても心配でした。
「妙な機械を家に持ってきた」と家族から白い目で見られているのにこれに騒音が加わったら家を追い出されかねない...と心配していたのですが騒音は心配するほどではありませんでした。
重い処理をさせていないので発熱が少ないということもあるのでしょうが、いつもは静かに動いてくれています。騒音は熱帯魚用のポンプの音と同じくらいかそれ以下な印象です。

## 電気代
これも電気代がかかりすぎると親に多額の電気代を請求されかねないのでとても心配でした。
![](https://i.imgur.com/y8jAZzU.png)
コレが現在動いているサーバリソースの使用状況なのですが、CPUの使用率が低いのもあってか平均の電力の使用量状況は
![](https://i.imgur.com/Gzshoy9.png)
![](https://i.imgur.com/IZIeZkD.png)
こんなもんでした。
24時間の平均使用電力は74W
コレを計算して電気代にしてみると2000円くらいだった。
意外に安いかも...?
(もっとガッツリ使ったらこんな額では済まないでしょうけど...)

## まとめ
実際に動かし続けてちょうど一ヶ月が経過するのですが、今の所家族からのクレームは来ていないです。
一ヶ月間動作させた感じをまとめるとしたら
### メリット
- ハードウェア的にも運用的にもかなり勉強になる
- めちゃくちゃ楽しい

### デメリット
- エンタープライズ機なので情報が少なすぎる
- サーバがデカすぎるのでスペースを取る
- 多少なり電気代がかかる
- 家族からの目がイタイ

こんな感じでしょうか。
この記事を読んでデメリットよりも楽しさと勉強を大切にしたいと感じたなら家にラックサーバをお迎えするのもありかもしれません。（自己責任で）

テキトウな記事になってしまい申し訳ありません以上です!!
windowsでvenv環境でVSCodeを使用方法

# 概要

pythonの開発でvenvを使うことは多いと思いますが、
調べてみてもMacの情報などが多かったので、
windows版での構築手順をまとめてみようかと思います。
ついでにVSCodeを使う方法も併せてまとめます。
pythonのインストール手順などは省いています。

以下の記事を参考にさせていただきました。
https://qiita.com/fiftystorm36/items/b2fd47cf32c7694adc2e
https://qiita.com/some-nyan/items/7f20fa5fa0b6e451a42b
https://qiita.com/Avocado/items/3e71870815d6c54c1eea


## 準備

1. 作業ディレクトリの作成
    * まずどこで作業するかを決めます。
    その場所でライブラリのインストールなどを行うことになるため日本語が含まれていない場所が必要です。またVSCodeの作業用のフォルダにもなるのであまり長くないほうが良さそうです。(`C:\pythondev\001` とか作成します)
1. インストール先を作成
    * `venv` など適当な名前でインストール先のディレクトリを作成します。
1. PowerShellの実行ポリシーを`RemoteSigned`にする。
    PowerShellを管理者権限で開いて`Set-ExecutionPolicy RemoteSigned` を実行する。
1. VSCodeの拡張機能の`PowerShell Language Support for Visual Studio Code`をインストールする。

## 環境作成

1. コマンドを実行して環境を作成する
    * 作成した作業フォルダに移動して次のコマンドを実行する。
    `python -m venv {ディレクトリ名}`
    {ディレクトリ名}はインストール先を指定します。
    今回の例では `python -m venv venv` となります。
1. VSCodeの作業フォルダを準備の1で作成した作業ディレクトリを指定します。
1. CTRL+Shift+Pを押してPythonのインタープリンタから作成したvenvを選択する。
1. 各種ライブラリをインストール
    コマンドラインから実施したい場合は後述のコマンドラインの確認方法を参照してvenv環境に切り替えて実施する。


## 確認
* VSCodeでの確認
    ターミナルのシェルをPowerShellに変更する。
    以下のようにvenvをインストールしたディレクトリが表示されていれば成功です。
    `(venv) PS C:\pythondev\001>`

* コマンドラインでの確認方法
    * 作成した作業フォルダに移動して
    `.\venv\Scripts\activate`
    と実行することでvenv環境になります。
    以下のコマンドで終了できます。
    `.\venv\Scripts\deactivate`

## 活用方法
* 新しいライブラリのバージョンを確認したいときに切り替えて確認する
* 現状動いているシステムが古いバージョンの場合合わせるときなど

## 注意点
* proxy下の環境の場合切り替え後に設定する必要があります。
こんなこともあろうかとWindows PEを作っておいた！

# WindowsPEとは

WindowsをインストールするためのWindowsとおもってくれればいい。
Windows Preinstallation Environment の略なのでそういうことだと思う。

ただ、その性質上、最低限の機能ながらとても軽量な環境を作ることができるので、ポータブルOSとして作ることもできそう（用途として許されるかは分からないけどもー）


# WindowsPEがあると便利なこと

- OSが壊れてもディスクの中身が見れる
- USBブート、DVDROMブートでWindowsを起動できる
- ポータブルなWindowsを持っておける

# Windows PEの作り方

## Windows ADKのインストール

Windows環境をもっているならインストールできる（当方環境がProなのでHomeはわからないけど）
MicrosoftのページからWindows ADKをインストールする。
下のURLを参考に、Windows ADKをインストールする。

https://docs.microsoft.com/ja-jp/windows-hardware/get-started/adk-install

## Windows PE環境のベースを作る

スタートボタンから、Windows Kits→展開およびイメージングツール環境を右クリックし、管理者として実行する。

表示されたプロンプトがWindows PEの環境を作るなどするためのプロンプトだ。
そこで以下のコマンドを入力する。引数の箇所にそれ用のフォルダが作られるので任意のパスを指定すれば良い。

``
copype amd64 C:\WinPE_amd64
``

これで一番シンプルなWindows PE環境ができる。

## USBブート用のメディアにする

ただこのままでは、WindowsPEとしては使えないので、USBブートできるようにUSBに焼き付ける。

なお、以下のCommandはUSBポートがDドライである前提である。違うドライブの場合、そのドライブを指定すること。
これをするとそのドライブが初期化されてしまうことに注意！

誤って他のハードディスクなどを初期化しないことに十分に注意しよう。

```
MakeWinPEMedia /UFD C:\WinPE_amd64 D:\
```

その後、フォーマットしてよいか聞かれるのでYで応答する。

しばらく待つと、Successと表示されればUSBブート用のWindowsPEの出来上がりだ。

# 今後の展開

- ポータブルな環境としてアプリケーションをあらかじめ入れておく方法
- Windows PEからのディスクの確認方法
- Windows PEを利用した廃棄予定のハードディスクの論理消去方法
-
Lottie入門（WEB）

この記事を読むと３分でLottieを使った可愛いアニメーションにウェブサイトに導入することができます。
![snowman.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224974/e8cd167a-46e0-1c1e-a381-b0295b631d86.gif)


#Lottieとは？
###概要
>Lottieとは LottieはAirbnbが公開しているアニメーションを表示するためのライブラリです。 ... Lottieで表示するアニメーションは、Adobeの「After Effects」を使って作成し、「Bodymovin」というプラグインを使ってアニメーションファイルを出力します。

引用元：　Web Design Trends/Web上でアニメーションを表示するなら「Lottie」がおすすめ！特徴や使い方など
https://webdesign-trends.net/entry/10360

一行コードを追加するだけで、高品質なアニメーションを表示できる便利ものです。
###いやAfter Effects知らんし！？っていう人も大丈夫
他の人が作ったアニメーションを無料・有料で入手できるプラットフォームがあります。
今回はここから無料の素材を拝借して、導入方法を説明していきます。

LottieFiles
https://lottiefiles.com/featured

では早速はじめていきます。

#１分目：好みのアニメを選ぶ
世界中のクリエイターが投稿しているので、いろんな種類のアニメがあります。
好きなアニメをクリックして、出てきたPOPUPのHTMLというボタンを押しましょう。
他にもiOSやAndroid用のコードもありますが、今回はWEBなので、HTMLを選びます。

![screencapture-lottiefiles-featured-2019-12-08-21_46_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224974/a97e9a1c-0afa-5b3a-895c-55d7d4ae8270.png)

#２分目：詳細ページでLottieをカスタマイズ
詳細ページに行くとwidthやheightを含む細かいパラメータを調整できます。
再生ボタンとかを表示するためのControlはいらないのでoffにしておきましょう。

![lottie.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224974/7949978a-9ede-4b97-b9e2-b852af044d7e.png)

#３分目：HTMLコードをコピペ
あとは、コードをコピーして、自分のプロジェクトに貼り付けるだけです。
簡単ですよね？

![snowman.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224974/7d45f94a-38cb-cba6-379c-2871a247179f.gif)

```index.html
<link href="https://fonts.googleapis.com/css?family=Carter+One&display=swap" rel="stylesheet">
<h1>
    Merry Almost Christmas
</h1>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player
    src="https://assets9.lottiefiles.com/packages/lf20_VNo3hY.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;"  loop  autoplay >
</lottie-player>
<style>
    body{
        margin: 0;
        padding: 120px 20px 0;
        background-color: darkred;
        color: #fff;
        text-align: center;
        display: flex; 
        flex-direction: column;
        align-items: center; 
        height: 100vh;
        font-family: 'Carter One', cursive;
    }
</style>
```

#最後に
ちょっとしたアニメーションを加えるだけで、WEBSITEがそれっぽく見えますよね。
是非使ってみてください。

いやAfter Effects知ってるしっていう人は、この記事がおすすめです!

Lottieを利用したアニメーション作成 & 実装
https://qiita.com/Seil/items/d7c363f63e447524dcc7
プログラミング概念を学ぶ

# プログラミング概念を学ぶ

現場の先輩から、概念的なことの勉強法について教えていただいたので、記事にしていこうと思います。

***オブジェクト指向***　を例に紹介していきます。

## オブジェクト指向についていきなり学ぶ前に、オブジェクト指向がなぜ必要なのかを知る！
オブジェクト指向とネットで検索すると、様々な記事が出てきます。
それらを見て、完璧に理解し、実務でも自在に使うことができればいいのですが、
大抵の方は、なんとなくわかった程度で実際に使うとなると中々難しいのではないのでしょうか。（筆者が正にそうでした。。）

そこでオブジェクト指向についていきなり調べる前に、***なぜオブジェクト指向が必要になったのか。その過程を知る*** ということをお勧めします。

いきなりオブジェクト指向が生まれた訳ではありません。
***何かしらのニーズがあってオブジェクト指向が必要になりました。***

※オブジェクト指向が必要になった訳についてはこちらのブログでとても分かりやすく説明されているので、ご参考になさってください。
[猫型プログラミング言語史観(1) 〜あるいはオブジェクト指向における設計指針のひとつ〜](https://nekogata.hatenablog.com/entry/2014/01/17/125600)

***ニーズを理解すれば、どのように使われるのかが分かるはずです。***

## まとめ
プログラミングを学習していると、抽象的すぎてなんとなくしか分からない！！なんてことがよくあると思います。
そんな時にまずは、***それがなぜ必要になったのか。ニーズについて知る。*** ということを前段階として行うと、そんな抽象的な事柄でも少しは理解の手助けになるのではないでしょうか。

以上　***プログラミング概念を学ぶ***　でした。
ご閲覧ありがとうございました。
もうLinux版Stationがアップデートされても.desktopを書き直したくない人へ

#概要
Stationというウェブサービスの統合管理アプリをlinuxで使おうとしたところ，AppImageファイルで，メニューの登録がうまくいかず，Stationが更新されるたびに.desktopファイルを書き換えなければメニューやドックのStationをクリックしても反応しない（アプデによりAppImageの名前が変更されパスが通らないため）．そこで正規表現を使って，StationがアプデされてAppImageの名前が変わっても，.desktopをいじらなくて済むようにするために頑張ったという話です．
長くて文章下手ですみません．需要もないと思うけどよろしくお願いします．

# Stationを使おう！
![Station](https://images.prismic.io/station-website%2F56c6c214-38ea-4449-bba2-93f9b7807c0e_logo-station-blue.svg?auto=compress,format)はwebサービスを統合管理できるアプリで，これさえあればslackもgmailもgithubもqiitaも一つのアプリのタブで管理できます．
管理できるアプリはすでに用意されている約100個の他に，自分で登録することもできます．基本的に，ウェブサイトがあるwebサービスは登録可能です．(Lineみたいにchromeの拡張機能などは不可）.
ぼくのStationはこんな感じです！
![Screenshot from 2019-12-08 21-26-41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407322/edd2b6f5-b91c-207e-daef-da5c8c4aee43.png)

Stationの何よりの魅力はwindows,macのみならず**linux**も対応しているところ！
AppImage方式を使っているので，ダウンロードすればすぐに使えます．


## AppImageって？ 
AppImageの説明をわかりやすくされている[サイト](https://www.virment.com/how-to-use-appimage-linux/)がありましたのでこれにおまかせします．簡単に言えばaptとか使わなくてもアクセス権限さえチェックボックスにチェックを入れればダブルクリックでアプリケーションが起動できます．めっちゃ簡単！！


## AppImageの問題
Stationの場合ですが，手動でメニューを登録するのが非常に面倒だということです．先ほど紹介した[サイト](https://www.virment.com/how-to-use-appimage-linux/)のとおり，Stationの初回起動時にメニューに登録するか聞かれますが，ここでスルーしてしまうと最悪な自体になります．このメッセージは金輪際出現せず，Stationを開くときに毎回毎回AppImageを保存したフォルダまで行く必要があります．
手動でメニュー登録するには.desktopという拡張子を持つファイルを作成する必要があります．

# .desktopでメニュー登録
まず.desktopのディレクトリは/home/.local/share/applicationsです．初回起動時にうまくメニューが作成できた人は，browserXなんちゃら.desktopみたいなファイルがあると思います．ない人は，Station.desktopなど好きな名前で.desktopという拡張子を持つファイルをこんな感じで作成してください．

```text:station.desktop
[Desktop Entry]
Name=Station
Comment=Station
Exec="/{path_to_station}/Station-1.61.0-x86_64.AppImage" %U
Terminal=false
Type=Application
Icon=appimagekit-browserx
StartupWMClass=Station
MimeType=x-scheme-handler/station;
```

ここで，Execに記述されるものが実行コマンドになります．ダウンロードしたAppImageのファイルを実行させてあげます．
このファイルを.local/share/applications内においておくと，メニューが登録され，ドックに登録することも可能となります．

## Stationが自動でアップデートされるとメニューが機能しない
Stationはアップデートされると，AppImageの名前の中にあるバージョン情報が書き換わります．先程の記述ではAppImageは`Station-1.61.0-x86_64.AppImage`でしたので，バージョンは1.61.0です．これがアップデートによってAppImageの名前が変わるということは，.desktopファイルで実行しようとしても該当するファイルがなくなってしまうため，メニューが機能しなくなります．そのため，Stationのアップデートが行われるたびに.desktopのExecの参照ファイル名を変更しなきゃいけないという非常に面倒な状況に陥ります．
そこで，正規表現でもつかって，いちいち.desktopを書き直さなくてもいいようにしようというのがここからの話です．


# 対策
## .desktopの実行コマンド内でワイルドカードをきる！
試行錯誤の結果たどり着いた結果，Execで直接正規表現を使った記述を行うことは無理だという結論に達しました．（違ったら教えてください）
そこで，Execでshellを実行する体にして，実行するshell内に正規表現を用いた記述にすればいいんじゃね？って感じで試したらうまく行きました．正規表現を使うところは`Station-x.xx.x`のxの部分です．本当は`\d`とか使えるはずだろうけど，shellの中だとワイルドカードの方が確実に動いたので，`Station-*.*.*`っていう感じで記述しました．
全体のソースはこんな感じです.
無事うまく動きました！

```text:station.desktop
[Desktop Entry]
Name=Station
Comment=Station
Exec=sh -c "/{path_to_station}/Station-*.*.*-x86_64.AppImage"
Terminal=false
Type=Application
Icon=appimagekit-browserx
StartupWMClass=Station
MimeType=x-scheme-handler/station;
```
API Gatewayでauth0 JWTを使う


いままでのまとめ。auth0をterraformでコード化し、`auth0-spa-js` でSPAで使うことができたので、そこにAPI Gatewayを追加して自分のアプリで使う。

https://qiita.com/celeron1ghz/items/2e901694859940615307
https://qiita.com/celeron1ghz/items/430bdf46de4936e310a2

完成したrepositoryは以下の通り。

https://github.com/celeron1ghz/auth0-spa-js-sample


## 手順
### 1. auth0のテナント作成
auth0でテナント作成。tfファイルは `server/terraform/` にある。
トークンを取得後、環境変数を設定し、tfファイル内の `application_domain` を書き換え、  で `terraform apply`

詳しくは https://qiita.com/celeron1ghz/items/2e901694859940615307 を参照。

### 2. API Gatewayを作成
ファイルは `server/` にある。
`handler.js` 内の `AUTH0_DOMAIN` を自分のauth0のドメインに書き換え、`serverless deploy`

### 3. clientのreactを作成
ファイルは `client/` にある。
`src/App.tsx` にある AUTH0っぽい変数を自分のauth0のものに合わせて `yarn start`


## はまりどころや気づきなど
 * 散々悩んだ挙句に、大体ドキュメントやクラメソさんの記事に正解が書いてある。よく読め。
 * Reactで `localhost` で開発するとauth0でどうにもできないエラーが出るっぽいので、最初からngrokで `https` にしたほうが良い。
 * ngrokは `Ctrl-C` で落とした後に再度起動するとURLが変わるが、auth0ログイン時に指定する `callback URL` と、auth0 applicationの設定にある `allow origin` の設定を合わせるのを忘れがち。
	 * 開発を始める際にURL書き換えを忘れないように。
 * 通常auth0でログインすると明示的にログアウトするまではログイン状態が維持されるが、おそらくドメインを変えるとログインは出来るが再読み込みするとログインが維持されていない状況になる模様。
	 * 基本はドメインを変えないほうがいいっぽい。
	 * 開発の時にドメイン変わっちゃう場合はauth0のuserタブでログインしたユーザを消すと直る。
 * 今回は普通のlambda functionにcustom authorizerをつける形にしているが `serverless.yml` に指定する `arn` は文字列にしないといけない
	 * `Fn::GetAtt: [AuthorizerLambdaFunction, Arn]` みたいに指定すればいけるはずだがdeploy時にエラーになる。ので `arn:aws:lambda:ap-northeast-1:0000000000:function:aws-auth0-test-dev-authorizer` のように文字列で指定しないとダメな模様。
	 * https://forum.serverless.com/t/dynamic-arn-to-cognito-authorizer/2161
 * auth0のテナントは削除すると同じドメイン名で再作成できない。
	 * 開発用だから良かったけど本番用だったら泣いていた
	 * まっさら状態に戻すツールがあるので必要な場合は使おう（自分は未検証）
	 * https://auth0.com/docs/support/delete-reset-tenant#delete-vs-reset

 * custom authorizerで後段に渡す時、データ構造はフラットじゃないとダメ。
	 * https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/api-gateway-lambda-authorizer-output.html
	 * 自分で作ってなくても、auth0から取得した情報にarrayが入ってたりするので注意。
	 * めんどくさいのでJSON serializeしてbase64にするのが良い(上のrepoではそうなってる)

 * auth0から取得するtwitterのユーザデータは `nickname` `name` 共に 同じ値なので`screen_name` がない。欲しい場合はrulesで設定してKIAIで取って来る(上のrepoではそうなっている)
	 * https://community.auth0.com/t/twitter-nickname-is-not-the-same-as-screen-name/17297/8
【REACT】JSXを理解しよう！！

# JSXを理解しよう！！

最近、Reactの勉強を始めました。
まだ、わからないことがいっぱいありますが、頑張ります。
今日は、reactでよく使う【JSX】について、勉強しようと思います。

# JSX(Javascript XML)？

JSXは、JavaScriptの文法の拡張版と理解するのが良いです。
Reactには、elementという変数があります。
elementの中には、HTMLタグが含まれており、文字列も含まれています。
これをJSXと覚えましょう。

```react
const element = <h1>Hello, world!</h1>;
```

# JSXを使ってみよう！

さすがに、説明するのは、難しいので、
実際、簡単なコードを見ながら説明します。

人の名前と年齢を表示します！
まず、functionを作りましょう！

Componentを作り方法は、
**【Class】**を利用する、**【function】**を利用する、２つのやり方があります。
今回は、functionで作ってみます。

```react
/*memberというパラメータを貰って、名前と年齢を出力できるようにする。*/
function memberInfo(member) {　
  return member.name + "["+ member.age + "]";
}
```



人の情報を定義します。

```react
/*人のデータを表示するため、const変数でデータを定義する。*/
const member = {
  name : "Tanaka",
  age : "28",
}
```

次は、どんなふうに形で、表示するのか定義します。
上で、定義したmemberInfoを使います。

```react
/*elementにHTMLの要素を作ります。*/
const element = (
  <h3>
    {memberInfo(member)}
  </h3>
)
```


最後に、

```react
ReactDOM.render(
  element,
  document.getElementById('root')
);
```

全体のコードです。

```react
const member = {
  name : "Tanaka",
  age : "28",
}

const element = (
  <h3 class>
    {memberInfo(member)}
  </h3>
)

function memberInfo(member) {
  return member.name + "["+ member.age + "]";
}

ReactDOM.render(
  element,
  document.getElementById('root')
);
```

理解できましたか？
ReactDOMで【element】というcomponentや変数をrenderingして、
画面で内容を表示します。

elementでは、【h3】タグを使って、人の名前と年齢を出力します。
elementをみると【{memberInfo(member)}】という形で、なっていますが、
何で【{}】を使っていますかね？
これが、JSXです！！

Reactは、**HTML**と**Javascript**を一緒に使う時が多いです。
HTMLコードの中で、どこがJavascriptコードなのか、教えるため、**{}**を使います。
もし、**{}**がないと【memberInfo(member)】をHTMLコードに認識して、
文字列として、画面に表示されます。

また、JSXは**"camel case"**を使います！


#まとめ

簡単でしたが、JSXがどんなものなのか、
少しは理解できましたか？
そんなに、難しい内容じゃないので、もっと難しいこともできるようになりましょう！
SinGanで遊んでみた

## はじめに
ICCV 2019　Best Paperを受賞したSinGanで遊んでみました。
論文：[SinGAN: Learning a Generative Model from a Single Natural Image](https://arxiv.org/abs/1905.01164)
付録は[こちら](http://openaccess.thecvf.com/content_ICCV_2019/supplemental/Shaham_SinGAN_Learning_a_ICCV_2019_supplemental.pdf)。


###SinGanの特徴

* パッチサイズごとに、パッチの内部分布（内部統計量）※を学習する
* 画像１枚で学習できるため、大量の画像を必要としない
* 応用範囲が広い
 * paint-to-image
 * editing
 * harmonization
 * super-resolution
 * animation
 
※論文中ではinternal statistics of patch や internal distribution of patchと表現されています。適切な訳語が不明のため「パッチの内部分布」としています。

###構成
![singan1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70558/bf3d82f0-95d8-b5ce-c2d4-7eb2cb6d85a6.png)（図は論文より引用）

patch-GANsを積み重ねるような構成になっています。最初はノイズから低解像度の画像$\tilde{x}_{N}$を生成できるように学習します。

次に、生成した画像をアップサンプリングしてノイズを加え、ちょっと大きい解像度の画像$\tilde{x}_{N-1}$を生成できるように学習します。

これを繰り返すと、パッチサイズ（図右の黄色枠）ごとに、パッチの内部分布が学習されます（Gはすべて同じreceptive field）。この構成の狙いは、画像の全体的なstructureと、部分的なtextureを獲得することです。

## 環境作成

○実行環境
*　Ubuntu 18.04 LTS
*　Anaconda3 2019.10.
*　GeForce GTX 970

◯手順
1. githubから著者のリポジトリをクローン
2. pythonの仮想環境を作成

githubから著者のリポジトリをクローン

```
git clone https://github.com/tamarott/SinGAN.git
```

pythonの仮想環境を作成

```
$ conda create -n SinGAN python=3.6　#pythonのverは論文に合わせる
$ cd　SinGAN　#落としてきたリポジトリに移動
SinGAN$ python -m pip install -r requirements.txt #必要なパッケージをインストール
```


## 学習
readme.mdの記載通りに。

```
$ python main_tarin.py --input_name <training_image_file_name>
```

画像サイズにもよりますが、学習時間は１〜２時間です。

##テスト
縦横scaleを1/2倍,1倍,2倍にして画像を生成してみます。

```
$ python random_samples.py --input_name <training_image_file_name> --mode random_samples_arbitrary_sizes --scale_h <horizontal scaling factor> --scale_v <vertical scaling factor>
```

設定したサイズの画像が生成されるよう、scaleに合わせて$z_N$の次元を増減しています。また、$z_N$の値を変えて画像を50枚出力しているので、その中で個人的によさそうな画像と駄目そうな画像をピックアップしてみました。

◯balloons
![test1_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70558/a0bf895c-5151-a670-ab60-15b21e3410fe.png)

◯birds
![test1_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70558/72edc31e-0ea9-ca46-7d8b-23561a350b77.png)

◯mountains3
![test1_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70558/a9449fe1-b403-a386-4464-dcb25c5400ac.png)

Trainingと似た雰囲気の画像は生成できていますが、細部を見ると違和感を感じる画像がちらほらあります。

また、明らかに変な画像も生成されており、birdsは縦に縮めると鳥の群れが消えて、mountains3は縦に伸ばすと山と水面の間の影が変なふうに伸びてしまっています。

##おわりに
ICCV 2019　Best Paperを受賞したSinGanで遊んでみました。それらしい雰囲気の画像は生成されていますが、要らん部分が伸びたり、判子を押したみたいに同じ物体があったりと、変な画像も多く生成できてしまいます。

scale変更のサンプルプログラム(random_samples.py)は$G_N$からしか画像生成できないので、もう少し高解像度の$G$から生成できれば多少ましになるかと思います。

SinGANは画像生成以外に超解像やアニメーションなどにも応用できるので、それはまた後日試してみたいと思います。
corsに悩まされるな。axios でcorsを攻略する

# はじめに

[いなたつアドカレ](https://qiita.com/advent-calendar/2019/allinatatsu)の八日目の記事です


:::note warn
本記事には誤った内容が含まれています。もうしわけありません。記事の修正をお待ち下さい。
:::



自分で建てたAPIとの通信でのCORSの回避方法についてですね。

## CORS　いず　なに

Cross Origin Resource Sharing の略称です。
これは、どういつおりじんぽりしーでうんぬんかんぬん、とりあえず別のとこからリソースを取ってくるためのものですね。

## じっそー

axiosの設定をするためのファイルを作りましょう。

```setting.js

import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:3000';
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8';
axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*';
```
ここで、


Access-Control-Allow-Originを設定する、ここでは「*」で全てにしているが好ましくはないハズ

Access-Control-Allow-Originはクロスオリジンからの読み出しを許可するためのものです。

これを設定し、axiosを使うときにsetting.jsをimportしてやることで、corsを回避することができます。
baseURLにlocalhost:3000を今回は設定しています。

urlとdataを用意しましょう

```js
axios.post(url,data)
      .then(res => {
          console.log('成功')
      })
      .catch((err) => {
        console.log(err) // 失敗
      })

```
こんなかんじでAPIを叩きましょう。

## おわりに
railsを使った時のcorsも書きます。。。
DJI TelloでOMPLを用いた自律飛行ドローンのナビゲーション - 1. OMPLのインストール

DJI Tello等ドローンの自律飛行を実現するには、3D環境でナビゲーション経路を計画としてOMPL（Open Motion Planning Library）を試してみます。

# 目次
1. [OMPLのインストール](https://qiita.com/k-koh/items/4f7e441d1225e6580f82)　← いまココ
2. [OMPLの基礎](https://qiita.com/k-koh/items/9933cd29599c859cac45)
3. [OMPL.appの入門](https://qiita.com/k-koh/items/fe1f05313045ed729c8b)
4. [OMPLの使用](https://qiita.com/k-koh/items/3a8b372537aa29e17863)
5. DJI Telloの使用
    1. [DJI Telloのフロントカメラのcamera_calibration](https://qiita.com/k-koh/items/094631646931ea5bc2bb)
    2. [Visual SLAM ORB_SLAM2 用のカメラキャリブレーションYamlファイルの作成](https://qiita.com/k-koh/items/b524fc175198e701bdff)
    3. [DJI Telloのカメラ でVisual-SLAMのORB-SLAM2 を動かしてみた](https://qiita.com/k-koh/items/98b5f079f784b22dcd01)
6. navigationスタックの使い方
    1. [Turtlebot3 NavigationをGazebo Simulationで動かしてみた](https://qiita.com/k-koh/items/1a4fbc175ca37be6206b)
    2. [Turtlebot3 Navigationでmap_fileの代わりにSLAMを使用](https://qiita.com/k-koh/items/1ec9097e4afedd0b43ca)
    3. [ARdroneのシミュレーターをGazeboで動かす](https://qiita.com/k-koh/items/feccbaee7c11c43c3ab4)
    4. [AirSimのシミュレーターを動かす](https://qiita.com/k-koh/items/52122fb5e96336ac8d33)
    5. [octomapのインストール](https://qiita.com/k-koh/items/c9a3a87e043934456842)
    6. [単眼カメラでORB_SLAM2から3D point clouodの生成](https://qiita.com/k-koh/items/1e069c9dda43b85e2fa0)
    7. [point_cloud2から3D octomapの生成](https://qiita.com/k-koh/items/01e34f353487eb8a6e26)
7. OMPLで3D 経路計画
    1. [状態空間環境のセットアップ](https://qiita.com/k-koh/items/e19ac08bb0a16975081e)

## 動作環境
- Ubuntu 18.04
- ROS Melodic
- Tello EDU

# OMPLのインストール
## ROSのリポジトリをaptに追加
すでにROSを使っている場合には必要ありません。

```console
sudo sh -c 'echo "deb http://packages.ros.org/ros/ubuntu `lsb_release -sc` main" > /etc/apt/sources.list.d/ros-latest.list'
wget http://packages.ros.org/ros.key -O - | sudo apt-key add -
```

## ROSバージョンのバイナリをインストールする
UbuntuにOMPLをインストールする方法は以下の3通りあります。

- ソースからインストールする
- ビルド済みバイナリをインストールする
- ROSバージョンのバイナリをインストールする

今回は、ROSバージョンのバイナリをインストールする

```console
sudo apt update
sudo apt install ros-kinetic-ompl
```

Next: 2. [OMPLの基礎](https://qiita.com/k-koh/items/9933cd29599c859cac45)
Flutter for Desktopで起動時のウインドウサイズを変える

自分用メモ。

2019年12月現在、macOS向けにしか対応してないようなのですが、 [window_size](https://github.com/google/flutter-desktop-embedding/tree/master/plugins/window_size)（公式）を使うとデスクトップアプリの起動時のウインドウサイズを変更することができるようです。
https://github.com/google/flutter-desktop-embedding/pull/362


```pubspec.yaml
dependencies:
  flutter:
    sdk: flutter

  # ↓をdependenciesに追加
  window_size:
    git:
      url: git://github.com/google/flutter-desktop-embedding
      path: plugins/window_size
```

```lib/main.dart
import 'package:flutter/material.dart';
import 'package:window_size/window_size.dart';

// Sets a platform override for desktop to avoid exceptions. See
// https://flutter.dev/desktop#target-platform-override for more info.
void _enablePlatformOverrideForDesktop() {
  if (!kIsWeb && (Platform.isMacOS || Platform.isWindows || Platform.isLinux)) {
    debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
  }
}

void main() {
  _enablePlatformOverrideForDesktop();
  WidgetsFlutterBinding.ensureInitialized(); // ←これがないと初期化前に実行するな的なエラーが出る
  if (Platform.isMacOS) {
    getWindowInfo().then((windowInfo) { // OSによって配置された場所・サイズを取得し
      setWindowFrame( // 場所はそのままに、widthとheightを変更
        Rect.fromCenter(
          center: windowInfo.frame.center,
          width: 480,
          height: 640,
        )
      );
    });
  }
  runApp(MyApp());
}
```

https://github.com/google/flutter-desktop-embedding/blob/master/plugins/README.md
にも注意書きがあるように、あくまで "early stage desktop plugins" なので、自己責任で。
VPN接続 & Proxy配下にてGitが使えなかったのを解決したお話

# tl;dr
#### やりたいこと
vpn & 認証付きのproxy配下からpush, cloneしたい

#### 解決した
下記コマンド。`http.proxy` のあとにプロトコルを記載しない点がポイントです。

```bash
$ git config --global http.proxy user:password@path.to.proxy:port
$ git config --global https.proxy user:password@path.to.proxy:port
```

## 実行環境

```bash
Ubuntu 18.04 (Windows Subsystem for Linux)

$ git --version
git version 2.17.1
```

## 困っていた点
ググれば一発で見つかる、proxy環境でgitを使用したい場合に設定するコマンドですよね。

```bash
$ git config --global http.proxy http://user:password@path.to.proxy:port
$ git config --global https.proxy http://user:password@path.to.proxy:port
```

上記設定をしておけば、オフィス内だと通常にpush, clone出来ました。
しかし、vpn接続だとなぜかcloneやpushをしようとした際に、下記エラーが出て悩まされていました。

```bash
$ git clone https://github.com/fugafuga/piyopiyo.git
Cloning into 'piyopiyo'...
fatal: unable to access 'https://github.com/fugafuga/piyopiyo.git/': Received HTTP code 407 from proxy after CONNECT
```

これがなかなか不便で、せっかくリモートワークが許可されている職場なのにpushしたいが為に出社していました。（往復3時間）

## 解決 🎉🥳👏
下記コマンドのように、プロトコルを記載せずにproxy情報を登録しておけばvpnからでも接続できます。

```bash
$ git config --global http.proxy user:password@path.to.proxy:port
$ git config --global https.proxy user:password@path.to.proxy:port
```

尚、原因は判明していませんので、有識者の方、ぜひ原因を教えて下さいますと嬉しいです
Firebase AuthenticationをFlutterアプリに導入

Authenticationが便利だと良く聞くんですが、特に使う機会がなさそうなので
ログイン機能をまるっと投げれる便利さを体験したい！ってことで試してみました
今回はEmailでの登録、ユーザーのID取得を行いました。

それと、試しているときにエラーで止まった時の対応 + あったら便利そうなのをおまけに書いときました。

## Authenticationに必要なpluginを追加
Authenticationを使うときに必要なpluginをpubspec.yaml に追加
使うpluginはこちら https://pub.dev/packages/firebase_auth

```Rudy:pubspec.yaml
dependencies:
  firebase_auth: ^0.15.1
```
忘れずにpackage getしてください

```Rudy:console
  flutter package get
```
## Firebase Consoleでログイン方法の設定

firebaseConsoleを開いて自分の使いたいログイン方法を有効にしてください。
<img width="475" alt="スクリーンショット 2019-12-08 18.12.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546900/ac3324de-5003-5fef-979d-028af0cc773f.png">

有効になっているものはステータスで表示されます。
GoogleやTwitterなどでログイン機能を作る場合はクライアントIDやAPIキーなどが必要な物も有りました。

<img width="575" alt="スクリーンショット 2019-12-08 18.01.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546900/a5ef1968-f2d6-425f-83b9-ff9df8bc5670.png">
メールアドレスのログインでも、パスワード有り、無しを選択することができます。
<img width="769" alt="スクリーンショット 2019-12-08 18.03.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546900/16794a60-85b1-2357-28ae-9cd6fc428b0b.png">

## Firebase Consoleでユーザー登録(Email&Password)
ユーザータブをクリックすると登録されているアカウントがリストになっていて検索ができます。
このページ右側にユーザー追加のボタンがあるので選択するとconsole画面からユーザー登録が行えます。
<img width="953" alt="スクリーンショット 2019-12-08 21.42.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546900/ea095b19-c810-07b0-75cb-aece820f9e6e.png">

## プログラムでユーザー登録(Email&Password)
```
Future registration(String email, String password) async {
  final firebaseAuth = FirebaseAuth.instance;
  await firebaseAuth.createUserWithEmailAndPassword(
      email: email, password: password);
}
```

こんなに雑でも問題なく動いたのでびっくり
このままだとエラーの対処ができてないので実際に仕事で使う場合はもう少し必要ですが動きは確認できたので良しとします。

## プログラムでユーザー情報の取得
こちらもエラー処理は全くしてません。

```
Future<FirebaseUser> signIn(String email, String password) async {
  final firebaseAuth = FirebaseAuth.instance;
  final FirebaseUser user = await firebaseAuth.signInWithEmailAndPassword(
      email: email, password: password);
  print('ユーザーID：$user');
  return user;
}
```

## おまけ
### 良くみるボタンを簡単に使えるpluginを発見しました
https://pub.dev/packages/flutter_signin_button#-readme-tab-
<img width="142" alt="スクリーンショット 2019-12-08 17.42.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546900/1ea297c1-54ad-e7d1-4ebc-c3c00b18cbc5.png">

### 躓いたエラー
```Ruby:error
FirebaseAuthPlugin.java:9: エラー: シンボルを見つけられません
import androidx.annotation.NonNull;
```

こんなエラーが起きた場合はこちらの参考にすると良いと思います。
https://www.virment.com/how-to-solve-flutter-firebase_auth-error/
みんなではじめるUXライティング　基本編　まとめ


こんにちは。佐藤です。
こちらは [グロービスアドベントカレンダー](https://qiita.com/advent-calendar/2019/globis)8日目の記事です。


# はじめに
デジタルサービスの開発に関わっている方ならば、「UXライティング」というキーワードを一度は聞いたことがあるのではないでしょうか。

現在、私が所属しているプロダクトチームは発足から9ヶ月ほど経ちました。その中で、個人的に興味があったUXライティングをプロダクトチームに浸透させるためのトライを細々と行なっています。本記事では、啓蒙の一環として社内Slackに流していた「UX Writing Letter」の内容から、基本編をピックアップしてまとめておきたいと思います。


# UXライターって何者？

UXライターという職種は比較的新しく、企業によって詳細な仕事内容や、責任の範囲は若干ことなります。しかし、多くの人がライターと聞いて想像する“コピーライター“とは少々毛色が違うのです

一般にコピーライターは、消費者の生活にまつわる文脈や商品の理解、言語表現への落とし込みのスキルなどが求められます。
UXライターはさらに、テクノロジーの理解、チームで開発するため多様な人とのコミュニケーション能力、プロダクトの戦略理解なども求められます。

最終アウトプットがテキストという点では共通していますが、ライターといっても焦点の異なる、さまざまなライターがいるのですね。

こちらの記事では差分をわかりやすく紹介しています。
■ Are UX writers same as Copy Writers?
http://bit.ly/2ZWjeOb


# なぜUXライターが必要なのか？

Googleをはじめ、Spotifyなど、海外では知名度が上がりつつある職業ですが、すべての会社に必要かというと、そうではないように思います。
UXライターという専門家が活躍できるかどうかは、組織のサービス作りに対する価値観や、企業の規模にも左右されます。ただし、どんなサービスであれライティングを軽視することは、得策とは言えないでしょう。

■ The Rise of the UX Writer
http://bit.ly/31rQ9Yv


# 企業の取り組み事例

### 泣く子も黙る Google
Google I/Oでは、2017年からすでのその重要性について言及していました。

↓下記の動画は、Googleのコンテンツ戦略、UX writingに関する3つのベストプラクティス、ブランドボイスにまつわるケーススタディ、という3つのお話が30分でわかりやすくまとまっているのでオススメです。
https://youtu.be/DIGfwUt53nI

UX writingが重要視されはじめた背景のひとつに、Voice User Interface（以下、VUI）の急速な進化と需要の拡大、普及に向けた各企業の戦略があるとされています。
Googleのコンテンツ戦略はまさに、既存のテキストコミュニケーションはもちろん、Google Assistantなど音声によるユーザー体験の向上までを見据えています。VUIが一般的に普及していくと、サービス側はより口語的だったり、自然な対話に近い感覚での操作性、コミュニケーション設計を求められ、これまでの体験に加えて更に深く考慮した設計が必要になるためです。


### スタートアップ支援のプロ All Turtles
創業者のPhilは元EvernoteのCEOで、当時からプロダクトのライティングにはこだわりをもっていました。Evernote時代、ストラテジストとしてUX writingを担っていたJessicaを誘い、立ち上げたのが[All Turtles](https://www.all-turtles.com/
) だそうです。
　All Turtlesが支援するのは主にAI領域のスタートアップで、基本的にはデジタルのユーザーインターフェイスを介すものです。Phil曰く「私たちが触れる様々なプロダクトやサービスは多くの“ことば”で構成されているわけで、肝心のことばを後回しにするなんて間違っていました。ことさらAI時代においては、プロダクトとのコミュニケーションが会話形式で行われるなど、“ことば”はますます重要な要素になるはずです。」と言っています。

MediumやEvernoteでUX writingを牽引してきたJessicaによる[こちらの記事](https://www.all-turtles.com/2018/07/29/event-ux-writing-jp/)は、やや実践者向けに発信されたものではありますが、随所にことばを媒体としたコミュニケーションの基本的な心構えがちりばめられています。プロダクトのUI観点だけでなく、ユーザーと向き合うすべての人にとって、ヒントになる何かがあると思います。


### ブランドボイズの先駆者　Mailchimp
ライティングをはじめるにあたって、もっとも重要なのは”What to say”を明確にすること。その上で、”How to say”を検討します。

Mail Chimpは、その両方を「[Voice and tone](https://styleguide.mailchimp.com/voice-and-tone/)」という原則に落とし込み、デザインシステムとして運用することで、”Mailchimpらしさ”の民主化にいちはやく取り組み、成功したことでも有名です。

Mailchimpは昨年、リブランディングを行い、ブランドボイスもより強化されました。
プロジェクトに携わったシニアデザイナー曰く、ブランドボイスに絶対的な正解は存在せず、試行錯誤の繰り返しでしかないと言います。配色などと違って曖昧さを伴う分、プロセスやアウトプットは非常に複雑になるため、UX writierはそれを楽しめる人が向いているそうです。

「らしさ」が考え抜かれ、ものさしとなる原則が、見た目だけでない振る舞いまで一気通貫しているサービスには無二性が生まれます。Mailchimpが成績を伸ばしている背景には、こうした「らしさ」へのこだわりが関係しているのかもしれません。
https://sumo.com/stories/mailchimp-marketing

# まとめ
UXライターはひとりでは完結しえない職業です。しかも、よほど大きな規模、もしくはことばの重要性に理解がある組織でなければ、専属のUXライターを配置するのは難しいかもしれません。

しかし裏を返せば、“ことば”に興味があれば誰にでもチャンスがありますし、すでに置かれたポジションの上で兼務することも可能です。

ぜひ気になった方は、ライティングについて深掘りしてみてはいかがでしょうか〜。
wee-slackの使い方

weechatというCLIのIRC Clientがあります。今回は、weechatでslackを使うwee-slackというpluginの紹介です。

https://github.com/wee-slack/wee-slack

## install

```sh
# install
$ sudo pacman -S python-websocket-client weechat
$ mkdir -p ~/.weechat/python/autoload
$ cd ~/.weechat/python
$ url -O https://raw.githubusercontent.com/wee-slack/wee-slack/master/wee_slack.py
$ ln -s ../wee_slack.py autoload
```

次に、`weechat`を起動し、`/slack register`コマンドを実行すると、`https://slack.com/oauth/authorize?client_id=xxx&scope=client`というoauth urlが出てきます。これをブラウザで開きます。

```
# slackに接続
$ weechat
/slack register
#### Retrieving a Slack token via OAUTH ####
1) Paste this into a browser:
https://slack.com/oauth/authorize?client_id=xxx&scope=client
2) Select the team you wish to access from wee-slack in your browser.
3) Click "Authorize" in the browser **IMPORTANT: the redirect will fail, this is
expected**o
   If you get a message saying you are not authorized to install wee-slack, the team has
restricted Slack app installation and you will have to request it from an admin. To do
that, go to https://my.slack.com/apps/A1HSZ9V8E-wee-slack and click "Request to
portion of
the URL to  "code" portion of the URL to your clipboard
5) Return to weechat and run `/slack register [code]`
```

ブラウザを開いてリダイレクトされたurlのうち`code=xxxxxxx`のxxxの部分がregister番号になります。これを`/slack register xxx`で実行します。また、`https://${my}.slack.com/apps/A1HSZ9V8E-wee-slack`を開いて、wee-slackのアプリを許可します。

```sh
/slack register xxx
/python reload slack
```

## use

これでslackに接続できたと思います。続いて、weechatの使い方です。

weechatはまず`Ctrl + x`でbufferを移動します。user-nameである`[syui]`みたいに表示されたところがslackです。上にアクセス元も表示されます。`xxx.slack.com`

補完も効くので、よく使いそうなコマンドを挙げます。

```sh
# channelに入る
/join #randam
/join syui

# メッセージを投稿, そのまま書けば投稿されます
[syui]test message.
test message.

# weechatを終了する
/exit
```

wee-slackの使い方はこちら

https://github.com/wee-slack/wee-slack/blob/master/docs/Options.md

https://github.com/wee-slack/wee-slack/blob/master/docs/Commands.md
なぜなに？ Deep Learning 　 科学計算ライブラリ Numpy 編

# はじめに
これから、機械学習で使われる科学計算ライブラリを数記事に渡って説明していきます。
今回はNumpy編です。
全体ではなく機械学習で使われる機能を中心に紹介していきます。

また、Jupyter Notebookでコードを書いてくので、
コマンドプロンプトと動作が異なることには注意してください。



# 目次
 * Version確認
 * Numpy 基礎編
 * 最後に
 * 参考文献

# Version確認

```python:version
import numpy as np
np.__version__
#'1.16.4'
```

# Numpy 基礎編
Numpyは多次元配列データを扱うライブラリです。
多重配列や行列を扱う際は、大変便利です。
行列の計算を理解していると、すんなり入ってきます。
(僕は行列が未熟だったので、数学の教科書も見ながら学んでました。時節、紙で計算したりしてます。)


```python:Numpyをインポート
import numpy as np
```
Numpyはよく**np**というモジュール名に変換します。
(僕はそれ以外のモジュール名は見たことはありませんでした。)


```python:配列の定義
a = np.array([1,2,3,4,5])
# []を忘れないで下さいね
```

```python:出力
>>>a
array([1, 2, 3, 4, 5])
>>>print(a)
[1 2 3 4 5]
>>>type(a) #型の確認
numpy.ndarray
```

```python:多重配列時
>>>b = np.array([[1,2,3,4,5],[6,7,8,9,10]])
>>>b
array([[ 1,  2,  3,  4,  5],
       [ 6,  7,  8,  9, 10]])
>>>print(b)
[[ 1  2  3  4  5]
 [ 6  7  8  9 10]]

```
```python:行・列を表示
>>>a.shape
(5,)
>>>b.shape
(2,5)
```

```python:np.arangeで要素を自動作成
>>>np.arange(1,10,2)
array([1, 3, 5, 7, 9])
>>>np.arange(2,11,2)
array([ 2,  4,  6,  8, 10])
```

```python:np.reshapeで行列を変換する
>>>d = np.arange(1,11,1)
array([ 1,  2,  3,  4,  5,  6,  7,  8,  9, 10])
>>>d.shape #shapeで配列の形を表示
(10,)
>>>d.reshape(2,5) #2行×5列の行列
array([[ 1,  2,  3,  4,  5],
       [ 6,  7,  8,  9, 10]])
>>>d.reshape(5,2) #5行×2列の行列
array([[ 1,  2],
       [ 3,  4],
       [ 5,  6],
       [ 7,  8],
       [ 9, 10]])
>>>d.reshape(10,1) # 10行×1列の行列
array([[ 1],
       [ 2],
       [ 3],
       [ 4],
       [ 5],
       [ 6],
       [ 7],
       [ 8],
       [ 9],
       [10]])
```

```python:np.arangeとreshapeでこんなこともできる
>>>np.arange(1,10).reshape((3,3))
array([[1, 2, 3],
       [4, 5, 6],
       [7, 8, 9]])
```
##算術計算
配列同士で計算もできます。
ただし、計算する配列は行と列の数を一致するようにしてください。

```python:算術演算
>>>x = np.array([1.0,2.0,3.0])
>>>y = np.array([4.0,5.0,6.0])
>>>x+y
array([5., 7., 9.])
>>>x*y
array([ 4., 10., 18.])
>>>x-y
array([-3., -3., -3.])
>>>x/y
array([0.25, 0.4 , 0.5 ])
```


##ブロードキャスト
配列の内部データに直接演算できます。
機械学習の中で内積は必ず出てきますので、仕組みを覚えときましょう。
内積A・Bでは、Aの列の数とBの行の数を合わせること

```python:行列の積(内積，ドット積)
>>>​z = np.array([1,2,3])
>>>z.shape
(3,)
>>>v =np.array([[2],[3],[4]])
>>>v.shape
(3, 1)
>>>np.dot(z,v)
array([20])
```

```python:内積
>>>e = np.array([[1,2,3],[4,5,6]])
>>>e
array([[1, 2, 3],
       [4, 5, 6]])
>>>f =np.array([[3,3],[3,3],[3,3]])
>>>f
array([[3, 3],
       [3, 3],
       [3, 3]])
np.dot(e,f)
array([[18, 18],
       [45, 45]])
```

#最後に
今回はNumpyの簡単な部分を書いていきました。
次は、行列を使ってニューラルネットワークの計算の仕組みを書いていきます。



#参考文献
 + ゼロから作るDeep Learning
 + Pythonで動かして学ぶ！ あたらしい 機械学習の教科書
 + Pythonによる あたらしいデータ分析の教科書
render関数を用いてhtmlファイルとdjangoでウェブページを表示する。

#htmlをテンプレート指定
今回はhtmlファイルを用いたwebページ作成です。
ようやくフロントエンド的な作業が含まれますね。

htmlの準備からページ表示までの流れを一気に覚えてしまいましょう！

最終的なファイル状況はこの通り

```
mysite
│  db.sqlite3
│  manage.py
├─mysite
│  │  settings.py
│  │  urls.py
└─test_app
    │  admin.py
    │  apps.py
    │  models.py
    │  tests.py
    │  urls.py
    │  views.py
    ├─migrations
    ├─templates
    　  └─test_app
    　       └─index.html
```
urls.pyと、views.py、templates/test_app/header.htmlを作業してゆきます。

##renderをもちいたviews関数作成

```views.py
from django.shortcuts import render

# Create your views here.
def index(request):
    context = {
        'message' : '初めてのメッセージ',
        'content' : 'ようこそ、Djangoは楽しい！',
    }
    return render(request,'test_app/index.html',context)
```
`context`で辞書作成、渡したい値を設定しています。さらに`request`を引き数にrender関数を書いています。**htmlファイル**の指定方法が危険で、これはtemplateディレクトリが自動的にdjangoに認識されているために、直下のtest_post/index.htmlという指定になっています。
**templatesディレクトリはrender関数に含めないよう注意しましょう。**

##サンプルhtml

```templates/test_post/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
  <p>インデックスページの表示</p>
  <ul>
    <li>{{ message }}</li>
    <li>{{ content }}</li>
  </ul>
  </body>
</html>
```

成功するとこんなページが表示されます。
![無題5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547305/bd85e0e3-9d6b-3297-f81c-fb188672f6ae.png)



##{{ }} や{% %}について
test_app/templates/test_app/index.htmlとなるようにファイルを作成。
先ほどcontextで設定した辞書のキーをhtml側でpythonスクリプト用の `{{ }}`で囲むと値が表示されます。
値のみを表示させたい場合はこの`{{　}}`を使いますね。

for文やif文を使う場合の`{% %}`とは違う使い方なので注意！

##最後に

今回はhtmlが出てきており、新たな勉強知識が増えたのではないかと不安に思われるかもしれません。
また、今回も複数のファイルを追うので一苦労。
めちゃくちゃ気持ちわかります💦
だって頭一個やし。。。おいつけんし。
でも結局これは慣れで、ネット上で見つかるコードは記載者は動かせてるしいい気分そうなのに、こちら初心者の気分になれよ！　間違ったコード書いてんじゃねえか！？って怒りがこみ上げることがしょっちゅうありました(-_-;)
そんな時はPC閉じて、休憩休憩☕
またやりたくなった時に戻ればいいんです！！

そんなコード覚えるのが面倒な時はhtmlファイルはコピペで構わないと思います。
`{{ }}`や`{% %}`が含まれる場合はどんな変数が渡されているのか、などと目で追うのみで構わないと思います。

目先を追いすぎると船酔いするとソフトバンク社長の孫さんは言います。
目標は何か。それはDjangoになれること、ですよね。HTMLをマスターするわけではありません。
気長に頑張りましょう！
テキストボックスに入力した値に紐づく値を、他のテキストボックスに出力する

以前調べたら偶然どこかのサイトに書いてあったが、最近手法忘れたので
再度調べたものの簡易にまとめてあるサイトが意外と見つかりにくい為、メモ書き。
【前提条件】
・ここでは最初に条件の値を入力するテキストボックス名を「参照元」としている。
・カラムfirstNumに対応するhogeをほかのテキストボックスに出力したい。
・カラムfirstNumは一意であるとする。
・出力先のテキストボックス(コンボボックス等でも編集できる設定なら問題ない)の
　名前は「参照先」とする。
Private Sub 参照元_LostFocus() ←参照元の値を入れるテキストボックスに設定
Dim db As DAO.Database　　　←変数dbはデータベース型だと定義して
Dim rcd As DAO.Recordset　　　←変数rcdはレコードセット型だと定義して
Dim SQL_tantou As String　　　←入力する参照元の値で抽出するSQLを格納する変数
SQL_tantou = "select hoge from T_sample where firstNum=' " & Me.参照元 & " ' "
↑
フォーカスが外れた時点でfirstNumに入ってる値でテーブルからhogeを抽出するよ
Set db = CurrentDb　　　←データベースは現在使ってるもの(カレントであるもの)とする
Set rcd = db.OpenRecordset(SQL_tantou, dbOpenDynaset)　　　　←rcdにSQLをセット
Me!参照先 = rcd!hoge 　　←rcdにダイレクトで挿入したいカラム名指定して
　　　　　　　　　　　　　　Me!参照先、つまりフォームに属してる参照先に入れるよ
End Sub
本当に雑ではあるがこれで一通りの出力が可能。もちろんカラムを足せば複数の項目を
まとめて出力可能。
おわり
連盟公式データをAPIで連携させる計画の話

皆さまこんにちは。
日本オセロ連盟システムアドバイザーのはじぽんと申します。

私のことをご存じの方は、「誰だこいつ？」と思うくらい普通の始まり方をしてしまいました。
今日はですね、ちょっと想いを語ってみる感じだったりするので、
いつものようなおもしろおかしいネタはちょっとだけ控えてみます。（ちょっとだけかよ）

さて、本題の連盟公式データ。何のことだと思います？
普通に考えても連盟が持ってそうなデータって、大会記録とレーティングくらいですよね。
はい。実際そうだと思います。

え、そんなのを連携するだけで記事を書こうと思ったのかって？
いやいやそんなわけないじゃなですかー（汗）

はい。今はデータ化されてないものの話です。
つまり未来にデータ化しようとしてるもの…それは！！？

続きはWEBでｂ（いやここWEBだから）


# そろそろ連盟公式対局の棋譜をデータ化しようぜ

これですよ。長年思ってたこと。
今現在、棋譜集の販売もしばらくされていないし、そもそもデータで欲しい人はいっぱいいるはず。
棋譜そのものは集めているはずなので、今後いろいろシステムの整備をしていく中で、
棋譜データベースも手掛けようかと思っていました。
前提として大会記録もサイトだけでなくきちんとデータ化した上に乗せたいので
数年レベルのプロジェクトにはなってしまいます。

# データベースを作るだけなら簡単。どうやって見せる？どうやって書き込む？

webで表示するビューアを使わせてもらえれば、一応表示は簡単っちゃ簡単なんですが…
たぶんこれからの時代はそれだけじゃ機能的に足りなくて、アプリじゃないといろいろ無理だと思うんです。
そこで考えた。「アプリ作るの大変だから皆に作ってもらおう」（）
いや、サボるとかそういうのじゃないですよ？？
せっかくいろんな方が優秀なオセロの解析ソフトをどんどん作っていらっしゃるし、ユーザもお気に入りのアプリがあったりするじゃないですか。
なので。
「APIで棋譜データだけ見れるようにしたら、あとはアプリ側でよろしくやってくれるよね」という発想。
そうなれば、棋譜の登録も同じようにいつものアプリで再現して、そのまま送信できればめんどくさくない。ほら天才。

# 権限とかどうするのさ？
見だしと会話するのが固定芸になってきました。
当然誰彼構わず公式対局の棋譜データを流すなんてことしたらいろいろ問題ですよね。
そこで会員ログイン機能のAPIも作って、ログイントークンがないと棋譜データのAPIからデータを取れないようにしておこうと思います。
アプリ側ではログイン機能の手間が出てきてしまいますが、いろいろ権利がありそうなデータになっちゃうのでがんばってもらうしか。

# 棋譜を見せたくないとかあるよね。ていうか会員ってだけで他の人の棋譜見れちゃっていいの？
棋譜の公開、非公開はボタンで切り替えれるようにしようかなと。もちろん二人が許可で初めて公開。
それで、確かに今までは棋譜集の販売で一応有料だったものを無料で配布がいいのかってのはあります。
なので今考えてるのは棋譜の見れる範囲にいろいろ制限と、会員制度そのものに種別とか作って行こうとか考えてます。
例えばただの会員であれば自分の棋譜しか見れないけど、もうちょっと会費の高いものに入れば他の人の棋譜が見れるとか。どうかな？

# うーん。それだと自分の棋譜は非公開にしつつ、人の棋譜は見ようとする人がいっぱいいて、結局誰も棋譜公開しなくならない？
あーね。確かになー
某氏「棋譜公開したらポイント増える感じにしてメリット出せば？」
おおおナイスなアイデアだ！そんで、そのポイントの数だけ他の人の棋譜を見れるようになる的な！？
こう、棋譜を1つ公開したら他人の棋譜5局まで見れるようになるとか。ちょっとゲームっぽくなって楽しくなる！？！？

そんな感じで課題はいろいろあるけれど、
基本方針は公式システムとしてはweb上でテキスト入力の棋譜登録と、簡易ビューアの棋譜閲覧ができる感じまでしか作らず、
あとはAPI作ってアプリ頑張ってる皆さんにぶん投げようって思ってる次第です！

# 今考えてる主なAPI仕様

|機能|API例|内容|
|:--|:--|:--|
|ログイン|api-domain/auth/login|会員番号とパスをPOST送信してトークンを受け取る。パスは今のやつではない。|
|棋譜検索(大会指定)|api-domain/records/tournament/1234|指定IDの大会での棋譜情報一覧取得。他にプレイヤー検索など用意する。|
|棋譜取得|api-domain/record/12345678|指定対局IDの棋譜データをSGF(Smart Game Format)で取得。(場合によってはF5D6形式も用意する)|
|棋譜登録|api-domain/record/register/12345678|対局結果データがあること前提で、そのIDを使ってPOST送信で棋譜（SGF）を送る。|

SGFフォーマットはまだ扱ったことはないんですが、やろうと思えば返し忘れを表現できるとかなんとか聞いたことがあります。


# そんな感じでエンジニアオセラーの皆さんといろいろやりたいです。
棋譜一つにしても、アプリを作ってる皆さんからするといろいろ考えが合ったりで、意見を集めるだけでも夢が広がると思うんです。
もちろん棋譜に限らずどんどん話を広げたりと。そういう話をTwitterでするのもいいんですが、専用ツール用意して（SlackとかRedmineとかよく仕事で使う系）、皆で作る系にしていくのもよいかなぁと。出来たらコードもオープンソースにしたいところですね。

という感じでまだまだゆっくり動き出す系ではありますが、いずれ皆さんを巻き込めるようにやっていきたいと思います！
ではではまたーｂ
プログラマ―未経験者がJavaScriptの関数の意味をまとめてみた


#関数についてプログラマー未経験者がまとめてみた

関数とは、タスクや値の計算を実行する処理の集まり。
与えられた入力値に基づいて、なんらかの処理を行い、その結果を返す仕組みのことをいう。

##標準関数とユーザー定義関数
関数は大きく分けて「標準関数」「ユーザー定義関数」の2種類に分けられる。
###標準関数
標準関数は、JavaScriptが標準で用意している関数。
random関数（0～1の範囲の乱数を返す。）
round関数（数字を四捨五入）

###ユーザー定義関数
ユーザー定義関数は、開発者が自分で関数を定義したもの。


##関数の定義方法は以下の3種類
・function命令で定義する
・関数リテラルで定義する
・Functionコンストラクタ―で定義する

##引数
引数とは関数の読みだし元から、関数への値を渡すときに使う特別変数。

##関数リテラル
関数リテラルは関数名を持たないことから、「匿名関数」「無名関数」とも呼ばれる。

function（関数1, 関数2　...) {
//実行する処理
}



書き出してみたけど、定義は何となくしか理解でけへん。
プログラミングを勉強してると、公務員試験初めたてで法律科目チンプンカンプンやった時のことを思い出す。
最初、条文の意味が理解できへんかった。
理由は、法律という勉強に対する全体像が掴み切れてないし、法律の条文の意味を解釈する知識量が足りてないから。
でも、だんだん勉強するうちに急に読めてくる。
プログラミングもそんな感じなんやろうなと思う。
あの時の感覚に似てる。
ちょっとずつしか理解していって、急に分かり始めるみたいな感じ。

ってか、こんなしょーもないポエム書いてる場合ちゃうっちゅーねん。
集中集中（市原隼人）
進まない、マイグレーション

Railsで運用していた本番環境を、マイグレーションの加減で止めてしまいました。

## 経緯

AWS上にRailsで作ったプロジェクトがありまして、環境管理をElastic Beanstalkで行っていました。毎週1回、人の少ないタイミングに更新を行っていたのですが、あるときに反映したところで、マイグレーションが全く進まなくなってしまいました。

## 原因

もちろん、開発環境で同じマイグレーションは回していたので、マイグレーションの記載ミスではなかったのですが、本番環境にアクセスがあった中でマイグレーションを動かしてしまったこと、そして作成するマイグレーションが新しいテーブルを作るようなものではなく、既存のテーブルの定義を書き換えるものだったがために、ロックが絡み合って一向に進まなくなってしまったのでした。

## その場での対応

ひとまず、強引にデータベースサーバを再起動して元の状態に戻して、古いバージョンのコードを上書きして、旧バージョンの動作に戻しました。そして、アプリをメンテモードに入れて、接続を切った上でマイグレーションを回したところ、すんなり実行できるようになりました。

## 教訓

マイグレーションとして自動化したところで、データベース操作には相応のコストや注意点がある。
Babel, Webpack わからん

わからんので調べてみました

## Babel

Javascriptを**トランスパイル**してくれるやつ
トラスパイルとはコードを翻訳してくれるもので、Babelは
   新しいJS --> 古いJS
に翻訳してくれます

Javascript ES6は、書く側としては書きやすくなったけど、ES6をサポートしてるブラウザは少ない
ので、いろんなブラウザで作ったアプリが動くように、Babelを入れてトランスパイルする

Babelの設定ファイルの例

```json:.babelrc
{
  "presets": ["@babel/preset-env"]
}
```

## Webpack

Babelとか、Babelと似たような機能をもついろんなものの設定をまとめてくれるもの

たとえば、JavascriptはBabelで古いコードにトランスパイルしたいし、CSSはSassで書きたい、というときにWebpackにまとめてその設定を書けるので便利

Webpackには **loader** と **plugin** の2つの機能があって、それぞれ

- loader: ソースコードを変形するもの
- plugin: loader以外のもの

という内容
loaderには、上のBabel (`babel-loader`)や、SassをCSSに変換してくれる `sass-loader`などがあります
pluginには、JSをuglifyする`UglifyJS`などがあります

Webpackの設定ファイルの例

```js:webpack.config.js
const path = require("path");

const config = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

module.exports = config;
```

## 参考

https://medium.com/front-end-weekly/what-are-npm-yarn-babel-and-webpack-and-how-to-properly-use-them-d835a758f987
この記事を抜粋して翻訳しました
BabelとWebpackの環境構築とか、npmとyarnの解説もあるのでおすすめです