OmniAICreator/Qiita-1.07M huggingface dataset:
JavaScriptの基礎

JavaScriptの基礎を学習したので、備忘も兼ねて記事に残しておこうと思います。

やること：JavaScriptの基礎をアウトプット
意識すること：この手の記事は溢れているが、自分が後で見返したときにわかりやすく復習できるようにする

##window.alert('表示させたいテキスト');
ウェブページを開いたときにアラートを表示させる。
引数として、表示させたいテキストを渡すことでページを開いたときに下のような感じでアラートが表示される。
![スクリーンショット 2019-07-21 10.33.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435710/e1c34dfa-0e8f-e26f-3615-91bcc62a07fa.png)

入力したコードはこんな感じ

```javascript
window.alert('こんにちは');
```

##console.log('表示させたいテキスト');
コンソールへテキストを表示させたいときに使用する。
コンソールへ表示させるため、ユーザがこのテキストを見る機会はほとんでありません。
開発者がデバッグのために用います。主な用途としては変数の中身や関数が呼ばれているかを確認するために用いることが多いです。

##if(条件式){実行する処理}
他の言語で出てくるifとやることはほとんど一緒。
Rubyとの違いはRubyは条件式を追加するときに'elsif'と書きますが、JavaScriptは'eilse if'と省略せず書くことかと思っています。

```javascript
if (条件式1) {
  // 条件式1がtrueのときの処理
} else if (条件式2) {
  // 条件式1がfalseで条件式2がtrueのときの処理
} else {
  // 条件式1も条件式2もfalseのときの処理
}
```
##配列[]
配列を定義するときは、'[]'を利用します。
変数を定義して、'[]'の中に要素を追加していけばよいです。

```javascript

var list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
```
配列は定義するだけでは利用価値はほぼないのでよく使う以下の処理のやり方を見ていきましょう。
・配列の要素を取得する
・配列の要素数を取得する
・配列の要素を追加する
・配列の要素を削除する

###配列の要素を取得する
配列の要素を取得するには配列[取得したい要素の順番]と指定します。
一番目の要素を取得するためには以下の通りです。

```javascript
var item = list[0];
```
プログラミングの数字は０から始まるので、取得したい要素は０と指定します。

###配列の要素を取得する
配列の中に要素がいくつ入っているかを知るために、lengthを使用します。

```javascript
var list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
list.length; // 5が取得できる
```
###配列の要素を追加する
配列に要素を追加するには'push()'を使用。
配列の一番後ろに要素を追加します。

```javascript
var list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
list.push('jQuery');
list[list.length - 1]; // jQueryが取得できる
```
###配列の要素を削除する
配列の一番後ろを削除するには'pop()'を使用します。

```javascript
var list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
list.pop();
list[list.length - 1]; // HTMLが取得できる
```

配列の一番初めを削除したい場合には'shift()'を使用

##繰り返し処理　for
繰り返し処理をするためには'for'を使用します。
定義の方法は以下の通りです。

```javascript
for (var i = 0; i < 繰り返す回数; i = i + 1) {
  // 繰り返す処理の内容
}
```

i = i + 1の部分は変数iを1増やすという意味です。この部分は処理が一回繰り返すごとに呼ばれます。つまり、変数iは処理が1回呼ばれると1増えるということです。

for文は簡単なようで、ネストが深くなりやすいのでこんがらがりやすいものの一つと思っているので、後日for文だけの記事をだそうと思います。

作成後リンク

###まとめ
今日はJavaScriptの基礎を超簡単にまとめてみました。
これらの知識を使った練習問題の記事を作りましたのでそちらもご覧ください。
[練習問題](https://qiita.com/life_code/items/06afa15892301c4391bf)
Coursera Machine Learning Stanford Univ. Week5

第5週はBackpropagationについてです。
最初にここは大事なところでアンケートによると何度も見る人が多いという感じのメッセージが最初に出てきました。

gradient checkingとして偏微分を数値的に求める方法でBackpropagationの偏微分に当たる部分の計算が合っているか確かめる方法を紹介しているところがとても分かりやすいというか、妙に納得しました。

#今週はまったところ
テストはすんなりできましたがプログラミング課題の方は結構手間取ってしまいました。
programingはweek4と同じく手書きの数字を認識するのを題材にしています。
そんなわけでweek4でpredict.mのところでmaxの使い方が知らなかったので手間取ったのですが、week5にはあらかじめコードがあり、答え合わせになりました。

今週の課題は3つのファイル

- sigmoidGradient.m
- randInitializeWeights.m
- nnCostFunction.m

## sigmoidGradient.m

1つ目のsigmoidGradient.mは

sgimoid function


```math
g(z) = \frac{1}{1 + e^{-z}}
```
の微分が

```math
 g'(z) = g(z)(1 - g(z))

```
と課題のpdfに書いてあります（自分で微分してみても簡単ですね）。
これをそのまま書けばいいので簡単です。
ところでこれはどこで使うんだろうというのがよくわかりませんでした。
nnCostFunctionのところで微分を使うところがあるのでそこで使うってことでした。


##randInitializeWeights.m
こちらは講義の中でも出てきた初期値が対称だとうまくいかないのでランダマイズするfunction
これはpdfに説明が書いてあるし、コード自体も書かれているので書き写せばOK。
これをどこで使っているのかよくわからなかった。
ex4.mの下記の部分

initial_Theta1 = randInitializeWeights(input_layer_size, hidden_layer_size);
initial_Theta2 = randInitializeWeights(hidden_layer_size, num_labels);

εの選び方にも意味があってε=0.12とすべきって書いてある。

```math
\epsilon_{init} = \frac{\sqrt6}{\sqrt{L_{in} + L_{out}}}

```
と注釈があるがこれはどのようなことから導かれた結果なのかわかりませんでした。とりあえずここではこの値ってことで後日調べることにする。

##nnCostFunction.m
これが今週のメインイベント

costの計算とbackpropagationに使う微分項の計算。
function [J grad] = nnCostFunction(nn_params, ...
                                   input_layer_size, ...
                                   hidden_layer_size, ...
                                   num_labels, ...
                                   X, y, lambda)

### コストJの計算
コストの計算はpdfファイルにある通りの式を計算すればよくて、logの式のメインのコスト部分とregularize項に分けられます。ex4を実行すると検算をしてるので間違っていれば値が起こしいことに気がつくので修正します。

ex4data1.matのX,yが使われます。
yは1~10の値ですからcostの計算では先週もやった通り[1 0 0 ...]というようなベクタに直して使わないといけないことに気づくのに時間がかかった。ちゃんとpdfに書いてありますね。
次にはまったのは行列のsumをとる書き方。octaveに慣れていないのでfor-loopで書くことにしました。

次はregularize項の計算こっちは逆にfor-loop使わないで書きましたがpdfに書いてある式の通りにoctaveでどう書けばいいのだろうというところで時間がかかった。
行列の各項を二乗するには
A . ^2
という書き方でいいことに気づくのに時間がかかってしまいました。あとbaias項は使わないのでこれも注意が必要。

### 微分項の計算
返り値のgradの計算です。これもpdfに式が書いてあるのでそのままといえばそのままですが、
ここでもbias項を使わないところに注意します。

```math
\Delta^{(l)} = \Delta^{(l)} + \delta^{(l+1)}(a^{(l+1)})^{T}
```
と更新するためのものですが、Δの更新自体はfnincg()でやるので差分の項をgradとして返せば良い。mで割る事を忘れないようにする。
どう使っているかというとex4から下記のようにして使っている
costFunction = @(p) nnCostFunction(p, ...
                                   input_layer_size, ...
                                   hidden_layer_size, ...
                                   num_labels, X, y, lambda);

% Now, costFunction is a function that takes in only one argument (the
% neural network parameters)
[nn_params, cost] = fmincg(costFunction, initial_nn_params, options);


pdfの2.5 Regularized Neural Networkにあるようにこちらもregularize項を書く事を忘れないようにする。

regularize項はなくてもsubmit()できるので、全部完成させる前にsubmit()して途中までpassすることを確認した方が精神的には楽になっていい。

今週末の教訓はpdfをよく読めでした。
Reactメモ

メモ

```react:App.js

// 基本形：
// Reactをインポート
import React from 'react';

// Appクラスを定義
class App extends React.Component{
  const text='Hello' //render()の外ならjavascrptがかける
  render(){　//jsxを戻り値とするメソッドの定義の定義
    return (
       <div>{/*必ず<div>で囲う */}
        
       </div>
    );
  }
}

// Appクラスをエクスポート
export default App  ;

```

```React:App.js

```
Wiki.js

markdownで気軽に始められるwikiです。
どーしてもwikiの記法に慣れないので導入。
予めmongodbを導入しておいてください。
# インストール
```
$ mkdir /var/www/hoge.com/wiki
$ cd wiki
$ npm init
（適当にenter）
$ sudo npm install wiki.js@latest
```
### 設定
```
node wiki configure
```
設定ウィザードが起動するので、http://サーバのIP:3000 にアクセス。
ウィザードでよしなにやってくれるのでcontinueでどんどん進んでく。
途中URL（https://wiki.hoge.com） とポート（8080とか）、DB名を指定します。
※バーチャルホストとかで既にポート使用してる場合はそのまま80とか443とか指定できないので8080とか適当なポートを指定してnginxのリバースプロキシで80や443にリダイレクトしてください

ウィザードが終了すると、URLに画面遷移します。

### 自動起動
pm2で起動しているのを確認してそのままpm2に登録。

```
$ pm2 list
$ pm2 update
$ pm2 save
```
VSCode(Remote Development)でWindows 10 May 2019 Update（1903）適用したらSSHできなくなった


[Windows 10 May 2019 Update（1903）](https://docs.microsoft.com/ja-jp/windows/whats-new/whats-new-windows-10-version-1903)を適用したら急にVS Codeでエラーがでるようになってしまった…（一部マスク）。

```
remote-ssh@0.44.2
win32 x64
SSH Resolver called for "ssh-remote+xxxxx", attempt 1
SSH Resolver called for host: xxxxxx
Setting up SSH remote "xxxxx"
Using commit id "xxxxx" and quality "stable" for server
Testing ssh with ssh -V
ssh exited with code: 0
Got stderr from ssh: OpenSSH_for_Windows_7.7p1, LibreSSL 2.6.5
Running script with connection command: "ssh"  -o ClearAllForwardings=true    "xxxxxx" bash
Install and start server if needed
> 
> ]0;C:\WINDOWS\SYSTEM32\cmd.exe
> 
>
> 
> Bad owner or permissions on C:\\xxxxxx
> 
> プロセスが、存在しないパイプに書き込もうとしました。
> 
"install" terminal command done
Received install output: プロセスが、存在しないパイプに書き込もうとしました。
Failed to parse remote port from server output: プロセスが、存在しないパイプに書き込もうとしました。

------

ConfigFileWatcher: start watching

```

sshのconfigファイルのPermission云々と出ているけれど、特に変更していないし、よく分からなかったのでconfigファイルを新規作成（既存のをコピー）した上でVSCodeの設定でsshの設定を特定のファイルを指定する方法に切り替えたら解決した。
原因は不明だが、深追いはしない…。
php-master-changes 2019-07-20

今日はビルドシステムの鬼車関連の修正、typo の修正、不要コードの削除、--with-external-gd 時に freetype サポートが有効にならない問題の修正があった！

# 2019-07-20
## cmb69: Move Oniguruma related config stuff to where it belongs
- https://github.com/php/php-src/commit/504cd03fc33844eaadc3de1117c220ad7612b784
- [7.4~]
- ビルドシステムで、鬼車関連の記述を ext/mbstring 内へまとめバンドル版を想定した記述の削除

## cmb69: Put oniguruma include path to proper CFLAGS
- https://github.com/php/php-src/commit/737c1b492c620dcf11c660ed350d9e9770c21183
- [7.4~]
- ext/mbstring で、oniguruma.h のインクルードパスを CFLAGS_STANDARD から CFLAGS_MBSTRING へ移動

## petk: Fix typos in FFI
- https://github.com/php/php-src/commit/81fd1c52069522908262ea03833f85b0b81a34a5
- [7.4~]
- ext/ffi で、HAVE_FFI_MS_CDECL が HAVE_FFI_MS_CDELC になっていたのを修正

## petk: Remove unused sqlite symbols
- https://github.com/php/php-src/commit/6de97402b5765b70264e69460caef93b00e562ef
- [7.4~]
- ビルドシステムで、sqlite の使われていない define の削除

## remicollet: Fixed bug [#78314](https://bugs.php.net/bug.php?id=78314) (missing freetype support/functions with external gd)
- https://github.com/php/php-src/commit/a85e4d53367c9a4ccca09903dce3c7e30dcc04c7
- [7.4~]
- ext/gd で、--with-external-gd 時に freetype サポートが有効にならない問題の修正
php-master-changes 2019-07-19

この日は ext/phar インストール時の safe_mode 指定の削除、ZEND_DECLARE_ANON_CLASS の不要処理の削除、無名関数 / クラス生成時と ZEND_DECLARE_CLASS_DELAYED の処理のハッシュ表ルックアップ削減、添字アクセスで [] でなく {} を使うことの非推奨化、重複テストの統合があった！

# 2019-07-19
## petk: Remove safe_mode directive when installing ext/phar
- https://github.com/php/php-src/commit/7cbc6b6546cfd3bf574b5055ad094344147398f5
- [7.4~]
- ext/phar で、インストール時の safe_mode 指定を削除

## dstogov: ZEND_DECLARE_ANON_CLASS doesn't need to skip anything now. It's immediatelly followed by ZEND_NEW.
- https://github.com/php/php-src/commit/b065fbde1932bee6ca60bf07a055d0ecc2881edc
- [7.4~]
- VM の無名クラス定義用の命令 ZEND_DECLARE_ANON_CLASS で、そのまま次命令へ流れず extended_value に突っ込んだ命令へジャンプするような処理があった？っぽいのをやめた
- ZEND_NEW がすぐ後に続くようになっていらなくなった、とのことだが、どういう経緯かはよく分かっておらず

## dstogov: Use run-time cache to avoid repeatable hash lookups when creating anonymous functions and classes
- https://github.com/php/php-src/commit/d5943f5a11976ffbe89b9634b86d9a0b2adda30a
- [7.4~]
- 無名関数 / クラス生成時のハッシュ表ルックアップを減らすため、EX(run_time_cache) を利用するよう修正

## dstogov: Fixed JIT
- https://github.com/php/php-src/commit/3cc6dd9c766b9a69d898fbb6dbf0bed79dc34b34
- ext/opache/jit で、JIT での ZEND_DECLARE_ANON_CLASS の扱いを修正

## rjhdby: Deprecate alternative array access syntax
- https://github.com/php/php-src/commit/d574df63dc375f5fc9202ce5afde23f866b6450a
- [7.4~]
- 添字アクセスで `[]` でなく `{}` を使うことの非推奨化
- [先日 RFC が受理](https://wiki.php.net/rfc/deprecate_curly_braces_array_access) されたもの

## dstogov: Use run-time cache to avoid repeatable hash lookups in ZEND_DECLARE_CLASS_DELAYED
- https://github.com/php/php-src/commit/445d51347d1218770902fea2fc5392c7bdcb5dfe
- [7.4~]
- ZEND_DECLARE_CLASS_DELAYED でもハッシュ表ルックアップを減らすため、EX(run_time_cache) を利用するよう修正

## nikic: Merge Linux & Windows fwrite test
- https://github.com/php/php-src/commit/aa2e2c3f93e6d8e6388bbcfa5a986efb155e9411
- [7.4~]
- [fwrite()](https://www.php.net/manual/ja/function.fwrite.php) のテストが無駄に Windows 用とそれ以外用で重複してあったのを修正
LeetCode / Plus One

（[ブログ記事](https://mhiro216.hatenablog.com/entry/2019/07/21/101413)からの転載）

[https://leetcode.com/problems/plus-one/]

Given a non-empty array of digits representing a non-negative integer, plus one to the integer.

The digits are stored such that the most significant digit is at the head of the list, and each element in the array contain a single digit.

You may assume the integer does not contain any leading zero, except the number 0 itself.

Example 1:
Input: [1,2,3]
Output: [1,2,4]
Explanation: The array represents the integer 123.

Example 2:
Input: [4,3,2,1]
Output: [4,3,2,2]
Explanation: The array represents the integer 4321.

これまで解説してきた中では一番簡単な問題？listを結合させたintegerに+1し、listに戻して返す問題です。
あまり意識しなくても解けますが、<b>You may assume the integer does not contain any leading zero, except the number 0 itself.</b>は、leading zeroが桁数を揃えるための0の意味（042とか035とか）なので、そのような0はないよ、と言っています。

#### 解答・解説

##### 解法1
まずは私の解答を示します。

```python
class Solution:
    def plusOne(self, digits: List[int]) -> List[int]:
        return [int(i) for i in str(int(''.join([str(j) for j in digits]))+1)]
```

見たまんまですが、listをintに変換し+1して、一旦strにしてlistに分解した後に、各要素をintに戻してやっています。
[1, 2, 3] -> 123 -> 124 -> '124' -> ['1', '2', '4'] -> [1, 2, 4]
という順序ですね。

Pythonらしくmapで型変換することも当然できます。

```python
class Solution:
    def plusOne(self, digits: List[int]) -> List[int]:
        return map(int, list(str(int(''.join(map(str, digits))) + 1)))
```

ただ、何度かsubmitしてみた感じでは型変換の方が計算は若干遅いみたいです。

##### 解法2
解法1はlistの全要素を変換していますが、実際には下一桁の要素が8以下なら+1して変化するのは下一桁の要素1つだけなので、以下のように計算量を減らすことができます。

```python
class Solution:
    def plusOne(self, digits: List[int]) -> List[int]:
        for i in range(len(digits)):
            if digits[~i] < 9:
                digits[~i] += 1
                return digits
            digits[~i] = 0
        return [1] + [0] * len(digits)
```

例外処理について、値が9の桁は+1することで繰り上がりその桁は0になるので、digits[~i] = 0　と処理します。
999のように全ての桁が9の場合、桁が増えるので、return [1] + [0] * len(digits)　と処理します。
タスクランナーを使わないお手軽なCSSとJavaScriptの最小化(minify)

# 意外と効くCSSとJavaScriptのminify

CSSとJavaScriptの最小化(minify)は、データの削減量としては地味ですがPageSpeed Insightsのスコア改善に意外と効果があります。これはPageSpeed Insightsのスコアがレンダリングブロックの時間に敏感だからです(**もちろん保証はありません！**)。

PageSpeed Insightsの点数はどのように計算されているか。100点をとるための条件
https://qiita.com/miyanaga/items/d38124cdd64a1999fed9

minifyはタスクランナーやフレームワークのアセットパイプラインで自動化するのが常套手段ですが、複数のメンバーで運用中のサイトに後から導入するのは一苦労です。

そこでVisual Studio Codeの機能拡張と、`.htaccess`ファイルで稼働中のサイトに途中からCSSとJavaScriptのminifyを開始する方法を紹介します。

# JS & CSS Minifier 拡張機能

Visual Studio Codeに次の拡張機能をインストールします。

JS & CSS Minifier
https://marketplace.visualstudio.com/items?itemName=olback.es6-css-minify

ワークスペースの設定に`es6-css-minify.minifyOnSave`を追加します。

```json
{
  "folders": [
    { "path": "." }
  ],
  "settings": {
    "es6-css-minify.minifyOnSave": "yes"
  }
}
```

これで任意の`.css`ファイルまたは`.js`ファイルを保存すると、その瞬間にminifyされた`.min.css`と`.min.js`が作成されるようになります。

* 例: `sample.css`を保存 → minifyされた`sample.min.css`がとなりに自動作成されます。

既存の`.css`ファイルや`.js`ファイルを一括でminifyする機能拡張を探したのですが、見当たりませんでした(もしあったら教えてください！)。

# minifyされたファイルがあれば優先する`.htaccess`ファイル

HTML側の参照を`.min.css`や`.min.js`ファイルに変更するところですが、ここでは`.htaccess`でRewriteモジュールを設定して振り分けをしてみます。

DocumentRootの`.htaccess`ファイルに次の記述を行います。

```apache
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}/$1.min.$2 -f
RewriteRule ^([^.]+)\.(css|js)$ $1.min.$2 [L,NC]
```

これでブラウザから`sample.css`や`sample.js`が参照されたとき、もし`sample.min.css`や`sample.min.js`があればApacheは実際にはそれらを返すようになります。

「HTML側を変えた方が早い！」という場合はもちろんそれでも。
個人的には`.min.css`や`.min.js`を消せば元に戻して検証しやすい点が気に入っています。

# DocumentRoot以外に`.htaccess`を記述する場合

もし、`.css`や`.js`ファイルが`/assets/`以下にしか存在しないのであれば、`/assets/.htaccess`ファイルとして次の記述を行うと効率がよいです。

```apache
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}/assets/$1.min.$2 -f
RewriteRule ^([^.]+)\.(css|js)$ /assets/$1.min.$2 [L,NC]
```

2箇所で**`/assets/`を補う必要があるので注意してください。** `RewriteCond`でファイルの有無を確認する都合上、`RewriteBase`がうまく使えません。

# バンドリング(1ファイルへの結合)とPageSpeed Insightsのスコア

タスクランナーやアセットパイプラインでは、CSSやJavaScriptの最小化と同時に各々を1ファイルにまとめてくれます。

これはリクエスト数を減らして無駄なオーバーヘッドを削減する措置ですが、経験上、適度にファイルが分割されている方が並列ダウンロードによりPageSpeed Insightsのスコアが上がります。HTTP/2も一般的になってきてますし。

ここで紹介した方法では1ファイルへの結合は行われませんが、その意味で効果を期待できます。ぜひ試してみてください。
Windows10でTensorFlow,Keras,MNISTメモ

####動作環境
Windows10 Home
GTX1080ti

####Anacondaのインストール
https://www.anaconda.com/

####CUDA
https://developer.nvidia.com/cuda-toolkit-archive

####cuDNN
https://developer.nvidia.com/rdp/cudnn-download

####Anacondapromptを起動
conda create -n [仮想環境名] python=3.7 jupyter
activate [仮想環境名]

####tensorflowをインストール
pip install tensorflow-gpu

```python:バージョン確認
import tensorflow as tf
tf.__version__
'1.14.0'
```

####kerasをインストール
pip install keras


```python:バージョン確認
import keras
Using TensorFlow backend.
keras.__version__
'2.2.4'
```

####MNISTで動作確認
https://github.com/keras-team/keras/blob/master/examples/mnist_cnn.py
Vagrantで作った仮想環境にSSH接続してVScodeの拡張機能を使いたい

# 拡張機能が使いたい(魂の叫び)

以前『[VagrantとVirtualBoxでmac上にLaravel5.5の仮想環境を構築する！](https://qiita.com/hppRC/items/66de3c0b9f19ecd2bbf5)』で、Vagrantを使ったLaravel環境を構築しました。
さらにリモートの環境をWorkspaceとして設定して作業をしてたんですが、どうにも不便な点がありました。
それは拡張機能、特にスニペットや補完がまともに機能しない点です。

現在VScodeのInsiders版なら割と簡単にリモートで拡張機能を使えるみたいなんですが、うーん、安定版でやる方法なないかなぁと思いちょっと調べてみました。

という訳で今回は、ローカルにインストールしたVScodeでVagrantで構築されたリモートのファイルを、拡張機能でどうにかするまでの記録です。

使用環境
- macOS Mojave
- 仮想環境はHomesteadで構築

### 7/22追記
コメントにて教えていただいたのですが、2019年7/22現在 VScode version1.35 stable版でもリモートデスクトップが使用できるようです。
本記事とは別にそちらもご検討ください！

### 7/30追記
開発がひと段落したので,Remote Developmentにも手を出してみました！
Remote Developmentの方が簡単だったので,よければこちらもご覧ください.
[VagrantでVScodeのRemote Developmentを使おう！](https://qiita.com/hppRC/items/9a46fdb4af792a454921)

# 何はともあれSSH FS

とりあえずローカルでSSH FSという拡張機能を入れます。SSH接続の設定を保存して簡単に接続できる拡張機能ですね。
VScodeの左側のタブにある、拡張機能の項目から「SSH FS」と検索してインストールしてください。

また、Windowsの方はPuTTYというやつも必要になるみたいです。

インストールが終わったら左上のファイル一覧タブ(ワークスペースとかのタブ、エクスプローラー)を開いてください。
すると以下のように、左下に「SSH FILE SYSTEM」という項目が追加されていると思います（インストールした直後にはファイルは存在していないはずです）。
<img width="1280" alt="スクリーンショット 2019-07-21 9.23.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386550/7b03be2d-5485-2d9b-dc7b-ccf98fbd7651.png">

この「SSH FILE SYSTEMS」のタブ内の空白を右クリックして、出てきた「Create a SSH FS configuration」をクリックします。出てきた名前欄にはわかりやすい名前を入れてください。画面遷移は以下のようになります。
![名称未設定.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386550/6e3901be-3607-36c1-e192-ca615dd662fb.gif)


# 設定をする(していく)

遷移後の画面に表示されている項目には、SSH接続を行うために必要な情報を記載してください。
自分は今回Vagrantで構築した仮想環境へSSH接続したかったので、それに必要な項目を書いていきます。任意のリモート環境に接続するには、それぞれの環境に合った設定を行なってください。

まずは仮想環境の設定を調べなければいけません。しかしこれはかなり簡単で、Vagrantではコマンドを使うことですぐに設定に関する情報を得ることができます。

まず、仮想環境を構築した時のディレクトリへ移動してください(vagrant up、vagrant sshするところ)。そして以下のコマンドを実行します。

```terminal
$ vagrant ssh-config
```

上記コマンドで得られた結果は以下のようになります。

```
Host homestead
  HostName 127.0.0.1
  User vagrant
  Port [port No.]
  UserKnownHostsFile /dev/null
  StrictHostKeyChecking no
  PasswordAuthentication no
  IdentityFile /Users/[username]/Homestead/.vagrant/machines/homestead/virtualbox/private_key
  IdentitiesOnly yes
  LogLevel FATAL
  ForwardAgent yes
```

ここから、以下の項目を抜き出して、先ほどの遷移先の画面に入力していきます。
設定項目は以下のように入力してください。左側が設定項目で、右側がssh接続に必要な情報です。
- Host : HostName
- Port : Port
- Root : [ここは任意です、ssh接続後のrootディレクトリを指定してください]
- Username : User
- Private Key : /Users/[username]/Homestead/.vagrant/machines/homestead/virtualbox/private_key
([username]の所は自分の環境に合わせて入力してください)

以上をsaveすれば完了です。

# 確認

そして、左上のタブからエクスプローラーを開き、先ほどと同じように「SSH FILE SYSTEMS」の項目から先ほど選択した設定ファイルを右クリックします。
さらに、「Connect as Workspace folder」をクリックします。
設定がうまくいくと、これで以下のように接続ができているはずです。
![名称未設定１.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386550/12611991-2b83-924e-4008-707fabb6285b.gif)

補完機能がローカルと同じように設定できていれば完了です！
![名称未設定2.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386550/ff86e1af-6127-d830-5817-e5d2e2231060.gif)

# 締め
VScodeはいいぞ！！(Insiders版も使ってみようかな...)
JavaScriptで[ 0, 1, 2, 3, 4 ]のような連番の配列を生成する僕のやり方

# はじめに
下の記事を見て、自分の気に入っている方法を紹介したいと思ったところです。
後述しますが、あまり差があるわけではないので、自分の好きな書き方をするのが一番ですね。

@suin様の「JavaScriptで[ 0, 1, 2, 3, 4 ]のような連番の配列を生成する方法」
https://qiita.com/suin/items/1b39ce57dd660f12f34b

# ソース
```javascript
Array(5).fill(0).map((_,i) => i) // => [0, 1, 2, 3, 4]
```
`Array.prototype.fill`がES2015だと思います。

# 解説
```javascript
// Step 1
Array(5)
// => [undefined, undefined, undefined, undefined, undefined]

// Step 2
Array(5).fill(0)
// => [0, 0, 0, 0, 0]

// Step 3
Array(5).fill(0).map((_,i) => i) 
// => [0, 1, 2, 3, 4]
```
といった感じで連番の配列が生成されます。

# 比較
Chrome 75 (Windows, x64)の開発者ツールで比較してみました。

```javascript
// fill-method
console.time('seq');
Array(10000000).fill(0).map((_,i)=>i);
console.timeEnd('seq');
// => seq: 268.4619140625ms

// spread-method
console.time('seq');
[...Array(10000000)].map((_,i)=>i);
console.timeEnd('seq');
// => seq: 303.242919921875ms
```

Node.js 10 (Windows, x64)では次のようになります。

```javascript
// fill-method
console.time('seq');
Array(10000000).fill(0).map((_,i)=>i);
console.timeEnd('seq');
// => seq: 1638.617ms

// spread-method
console.time('seq');
[...Array(10000000)].map((_,i)=>i);
console.timeEnd('seq');
// => seq: 2144.508ms
```

0を詰めるfill操作が無駄に思えますが、どちらの環境でも少しだけspread構文使うより早いみたいです。
意外でした。
StackOverflowError toStringで循環参照が発生



エラー内容

```
java.lang.StackOverflowError
	at java.lang.AbstractStringBuilder.append(AbstractStringBuilder.java:675)
	at java.lang.StringBuilder.append(StringBuilder.java:208)
	at java.time.LocalDate.toString(LocalDate.java:2032)
	at java.lang.String.valueOf(String.java:2994)
	at java.lang.StringBuilder.append(StringBuilder.java:131)
	at demo.model.User.toString(User.java:19)
...

```

### 修正前

UserとUserDetailの関係は、OneToOne双方向リレーションシップ

```java:User
@Entity
@Data
public class User {

	@OneToOne(mappedBy = "user", cascade = CascadeType.ALL)
	private UserDetail userDetail;

```

```java:UserDetail

@Entity
@Data
public class UserDetail implements Serializable {

	@OneToOne
	@JoinColumn
	@MapsId
	private User user;
```

### 循環の原因

Lombokで@Dataをつけると ```@Getter/@Setter```と@ToStringも一緒に付与してくれることを忘れていました。。。

循環はどこで起きてるかというと。。
User.toStringが実行されると、DetailUser.toStringが実行され、その中で更にUser.toStringが呼ばれ循環スタート


### 解消方法
User.toStringが実行される際に、DetailUserを呼ばないようにする


```java:User
@Entity
@Data
public class User {

	@OneToOne(mappedBy = "user", cascade = CascadeType.ALL)
	@ToString.Exclude // ★★★ toStringから除外するフィールドを定義
	private UserDetail userDetail;

```
中置記法 vs. (前置|後置)記法

外部記憶が紙のみだった時代，きっと，紙とinkは湯水の如く使えない程度には希少だったことだろう．

```
let m = 1;
let n = 2;

m + n
```
```
    (m + n) >>= replace()
C_> () => (plus(m, n);)
```

Only when {factors: 2}, I assume that (前置|後置記法) are more smart than 中置記法.
だが，

```
let m = 1;
let n = 2;
let l = 3;

    (m + n + l) >>= replace()
C_> () => (plus(plus(1, 2), 3);)
```

紙に記述する場合，逐次的に記述できた方が，紙幅が節約できるのは想像に難くない．
clarifyすると，

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235834/16fe2447-445b-dde9-c093-333fe2635756.png)

つまり，

<table>
    <tr>
        <td>(前置|後置記法)</td>
        <td>階層性が明確</td>
    </tr>
    <tr>
        <td>中置記法</td>
        <td>要素数が一目で判る．且つ，演算子の数 == 処理の数</td>
    </tr>
</table>
Go言語で日付を表す文字列をパースしてtime.Time を利用したときの覚書

Go 言語で日付を表す文字列をパースした。
Outlook の msg から日付情報を取得したら `"Mon, 24 Jun 2019 20:36:40 +0900"`のようなフォーマットだった。
この文字列を `time.Time` 型への変換以下で可能


```go
	str := "Mon, 24 Jun 2019 20:36:40 +0900"
	layout := "Mon, 2 Jan 2006 15:04:05 -0700"
	t, _ := time.Parse(layout, str)
	fmt.Println(t) // => "2001-05-24 22:56:30 +0900 JST"
```

# 参考
[Goのtimeパッケージのリファレンスタイム（2006年1月2日）は何の日？](https://qiita.com/ruiu/items/5936b4c3bd6eb487c182)
[逆引きGolang (日付と時刻)](https://ashitani.jp/golangtips/tips_time.html#time_Parse)
Python 重複を削除する方法

#### 1.文字列から重複を削除。

```python:1-1順序を気にしない場合
a_str = 'aaaffggaahhaaaa'
a_uniquie = ''.join(set(a_str))
print(a_uniquie)
# hafg ←実行する度に、毎回順序が変わります。
```
set（）で、一意の文字の集合を作成。 "".join（）は任意の順序で文字を文字列に結合。



```python:1-2順序を気にする場合
from collections import OrderedDict
a_str = 'aaaffggaahhaaaa'
print(''.join(OrderedDict.fromkeys(a_str)))
# afgh ←順序を変えずに出力されます。
```
標準ライブラリcollectionsモジュールのOrderedDictを使用する。



#### 2.リスト（orタプル）から重複を削除。

```python
nums = [1, 2, 1, 2, 3, 2, 4, 5,]
nums_unique = list(set(nums))
print(nums_unique)
# [1, 2, 3, 4, 5]
```
set型は重複した要素をもたないデータ型であるため、
set()にリストを渡すと、一意な値のみを要素とするset型のオブジェクトを返す。
これをlist()で再びリストにする。
※タプルの場合はtuple()でタプルにすればよい。

以上です。
一人情シス社長の社内システム開発

スタッフはパートアルバイト含めて100名程度、拠点は5拠点の中小企業での話です。
パソコンは全部で10台程度。ファイルサーバが1台。各拠点はフレッツ光が入ってる。システム開発員は私一人。そんな環境の中、備忘録を兼ねて記載していきたいと思ってます。

実システムもほぼ同じ様な内容ですが、サンプルとして企業向け配達のお弁当屋さんを想定して書いていきます。

必要な機能として、

+ PCからもスマホからも注文入力
+ 個人のログイン画面、スマホで楽に使える
+ 管理画面
+ 弁当の注文個数に応じた材料自動発注
+ 材料発注はFAXも使うのでネットFAX対応
+ 決められた時間に自動でFAX
+ 内容は責任者にメール送信
+ 調理担当向けに調理指示書印刷。そのためのPDF
+ 栄養価計算の出力。修正が少し入るためエクセルで出力

業務的な条件はこんな感じ。

+ 業務で成果を出すためなるべく小さく開始可能
+ 仕様の変更に強い
+ 顧客利用もあるため将来の作り込みも可能。

を技術選定の方向性。

+ サーバークライアント型
+ スマホでも使える(レスポンシブ)
+ クラウドで動かす

で作成。
特殊なのは、意思決定者である私自身で設計実装するので技術も内容も独断で決めていきます。仕様書もノートに概要メモ書きからのスタートです

技術的には、
クライアント側は

+ vue.js vue-cliで、typescript。描写にはblumaも利用。
+ axios で通信周り
+ vuexは利用。nuex.jsは使わず。

サーバー側は

+ entityframeworkのmigration機能を利用したかったのでasp .net core をベースにweb apiを構築。
+ PDFをnugetでPDFSharp
+ excelはClosedXML
+ OpenIDでLINEやFacebookなどのアカウント認証を利用

また、サーバー側とクライアント側のデータ連携では
openapi(swagger)を利用してクライアント側のクラスやaxios呼び出し部分などは自動生成にしてます。変更した時とかに便利です。

開発環境はクライアントが
visual studio code
サーバー側は
visual studio 2017
open api連携にはNSwagStudioも使ってます。

どれも理由としては

+ 学習コストが低い(比較的ユーザーが多く情報が集まりやすい)
+ インテリセンスなど開発補助機能が多い環境
+ 多少費用も出るが費用対効果は悪くない(はず)

まだまだ続きます。。
Linuxコマンド【touch】で、連番ファイルを作成する方法

Linuxの`touch`コマンドを利用したファイル作成、重複する内容を何回も打つのは面倒です。

```Bash:terminal
# Before

例1)
desktop$ touch sample-1.txt
desktop$ touch sample-2.txt
desktop$ touch sample-3.txt
・
・
desktop$ touch sample-10.txt

例2)
desktop$ touch イヌ.txt
desktop$ touch サル.txt
desktop$ touch キジ.txt
```

## 解決策

{}を利用することで、簡潔に書くことができます。

- 半角数字, 半角英数字の場合
⇨ { 1..10 } や { a..g } のように範囲指定による作成が可能

- ひらがな、カタカナや漢字の場合
⇨ {イヌ,サル,キジ} のように`,`で区切ることによる作成が可能(<font color="red"> 注：単語と`,`の間にスペースが入ると正しく認識されない</font>)


```Bash:terminal
# After

例1)
desktop$ touch sample-{1..10}.txt

例2)
desktop$ touch {イヌ,サル,キジ}.txt

おまけ)
#「イヌファイル1-5, サルファイルは1-10, キジファイルはa-gの連番を作成」とすることも可能
desktop$ touch {イヌ-{1..10},サル-{1..5},キジ-{a..g}}.txt

#おまけの実行結果：
 イヌ-1.txt
 ・
 ・
 イヌ-10.txt
 サル-1.txt
 ・
 ・
 サル-5.txt
 キジ-a.txt
 ・
 ・
 キジ-g.txt

```

いつもお世話になっているQiita,初めて投稿してみました。
どなたかのお役に立てば嬉しいです。
Arduino　キーボード入力から直接、音を出力したい（音楽を弾きたい）

#初めに
以前投稿したばかりですが今度は別の不明点が・・・。
実はpythonとは別の授業でarduinoを触っています。現在、成果物として、パソコンのキーボードを入力するとピアノのように音楽が引けちゃうプログラムを作成中です。シリアル通信で対応したキーを入力するとドレミが出力するシステムが出来上がっているのですが、連続で鳴らしたいときにどうすれば良いのか分からずに困っています。

#プログラムコード
以下がプログラムコードになります

```

// 12番ピンをスピーカーに接続する
const int pin = 12;
int melo =200;
// 10番,8番ピンをLEDに接続する
const int LED = 10;
const int LGD = 8;



// ここで初期化する
void setup()
{
  // スピーカーをつないだピンを出力に設定する
  pinMode(pin, OUTPUT);
  pinMode(LED, OUTPUT);
  // 9600bpsでシリアル通信を始めます
  Serial.begin(9600);
}

// ここからループに入る
void loop()
{
  // シリアル通信でパソコンから入力された文字を変数に保存する
  int sw = Serial.read();
  // もしaという文字が送られてきたら
  if (sw == 'a') {
    // ドを鳴らす
    tone(pin,262,melo);
    digitalWrite(LED,HIGH);
    delay(500);
    digitalWrite(LED,LOW);
  // もしsという文字が送られてきたら
  } else if (sw == 's') {
    // レを鳴らす
    tone(pin,294,melo);
    digitalWrite(LGD,HIGH);
    delay(500);
    digitalWrite(LGD,LOW);
  // dが送られたら
  } else if (sw == 'd') {
    //ミを鳴らす
    tone(pin,330,melo);
    digitalWrite(LED,HIGH);
    delay(500);
    digitalWrite(LED,LOW); 
  // もしfという文字が送られてきたら
  } else if (sw == 'f') {
    // ファを鳴らす
    tone(pin,349,melo);
    digitalWrite(LGD,HIGH);
    delay(500);
    digitalWrite(LGD,LOW);
  // gが送られたら
  } else if (sw == 'g') {
    //ソを鳴らす
    tone(pin,392,melo);
    digitalWrite(LED,HIGH);
    delay(500);
    digitalWrite(LED,LOW); 
  // もしhという文字が送られてきたら
  } else if (sw == 'h') {
    // ラを鳴らす
    tone(pin,440,melo);
    digitalWrite(LGD,HIGH);
    delay(500);
    digitalWrite(LGD,LOW);
  // jが送られたら
  } else if (sw == 'j') {
    //シを鳴らす
    tone(pin,494,melo);
    digitalWrite(LED,HIGH);
    delay(500);
    digitalWrite(LED,LOW); 
  }
}

```
#このコードで実行したいこと
現在、シリアル通信を使っています。
パソコンのキーボードを入力し、対応したキーを押すとドレミファソラシドの内の一つを出力します。同時にキーを押すと同時に音だけでなくLEDが光るように設定されています。
しかし、シリアル通信だと、入力したキーを逐一送信してあげないと音が出力されません。そのため、ピアノのように連続した状態で鳴らすのが困難になっています。

#最終的に達成したいこと
現在はシリアル通信でキーボードの入力を音と光で出力するように設計していますが、最終的にはシリアル通信を使わずにキーボード入力でそのままピアノのように音楽を演奏できるプログラムを設計したいです。
インフラ設計について

突然ですが、プログラミングして作成したアプリケーションやサービスを動かす土台となるインフラについて、小規模システムのものだと何が必要かを考えてみました。
内容としては、概要レベルのものになっています。

まずは「インフラ」について知ってもらい、その後に重要と思われる 4 つの設計について説明します。

# インフラとは

様々なアプリケーションやサービスを動かす土台のことで、主にハードウェアと OS から構成されます。

　- ハードウェア (CPU、メモリ、ネットワーク、ハードディスク)
　　クラウドが主流の今は、故障については気にする必要はありませんが、
　　容量を気にする必要があるのは変わりないかと思います。
　
　- OS (Windows, Linux 等)
　　ハードウェアのリソースをアプリケーションに適宜振り分ける働きをします。

アプリケーションやサービスを問題なく動かすために、どのくらいの性能の CPU やメモリ、ハードディスクを使用し、OS 側でどのような設定を行うべきかを決めるのが、インフラ設計です。

なお、インフラ設計において、これ以外で考えるべきは「バックアップ・リストア/リカバリ」と「監視」があります。
他には、優先度は高くないですが、バッチ処理等があります。

以降は重要であると思われる、ハードウェア、OS、バックアップ・リストア、監視の設計について説明します。

# ハードウェアの設計

使用する OS やアプリケーションソフトが求めるハードウェアの性能がありますので、それらの数値を確認して加算し、決定します。

OS を例にした場合、Linux OS のひとつである Redhat Linux 下記のページにハードウェア要件を明記していて、「メモリーの最小要件」を見ると、バージョン 7 では最低でも 1GB～2GB が必要になります。

　[Red Hat Enterprise Linux テクノロジーの機能と制限](https://access.redhat.com/ja/articles/1271503)

ディスクの設計については、出力されるログやデータベースの容量などといった様々なデータ容量について、システムを利用する年数経過した時に xxGB 使用するので yyyGB 確保する、といったような感じの考え方となります。　

CPU とメモリの設計は少し面倒で、OS やアプリケーション、サービスを動作させる容量に加えて、外部から ○○ 個の同時接続があっても問題ない容量を確保する、といったものになり、EC 系のサービスは注意する必要があります。

# OS の設計

アプリケーション等によっては Windows で使えない、Linux に対応していないものがあるかもしれませんので、OS の種類が変わるかと思います。

また、OS にはハードディスクの論理的な分割(Windows で言うところの C, D ドライブ) やユーザ設定、時刻設定、ネットワークの設定、ホスト名の設定があり、これらをどのように設定するかも考える必要があります。

# バックアップ・リストア/リカバリの設計

システムが破損した時のことを考慮して、次の 3 種類を定期的に取得する必要があります。

　- OS の設定ファイル (設定内容を変更したファイルのみ)
　- データベースのデータ
　- その他必要なデータ

バックアップの設計は、いつ、どのように取得して、どこに保管しておき、直近 X 回バックアップしたものを残しておく、というようなものです。
バックアップのファイルはある程度の容量となることが多いので、ディスクの設計に跳ね返ります。
データベースのバックアップについては、自動・手動どちらでもよいので、**1日1回必ず**行ってください。

リストア/リカバリの設計は、取得したバックアップデータなどから、いつの時点までシステムの状態を戻すのかを決めるというものになります。

リストア/リカバリの設計は、取得したバックアップデータなどから、いつの時点までシステムの状態を戻すのかを決めるというものになります。

# 監視の設計

サーバや OS 上のプロセス、Web サイトが起動しているか(閲覧できているか)や、CPU・メモリ・ディスクの使用量が多くなっていないかを自動で監視して、問題が発生時に速やかな対処ができるようにします。

　- 死活監視            ：ping によるサーバの生存を確認する。
　- プロセス監視        ：データベースなどの OS 上のプロセスが生存しているか確認する。
　- ファイルシステム監視：C ドライブや D ドライブの使用率が高くなっていないか確認する。
　- ログ監視            ：特定のログファイルにエラーメッセージがないかを確認する。

問題が起きたらメールが送られる設定にしていれば、すぐに対処しやすくなり、特にサーバやデータベースが停止した場合には有効です。

最近は無料で監視できるソフトやサービスもあるようなので、それらを活用するのもよいかもしれません。

# その他情報

余談ですが、自動の時刻補正機能である NTP サービスを使用する際は、注意が必要です。
理由は、データベース起動中に急激な時刻補正が発生すると、データベース自体に問題が発生することがあるためです。
実際、サーバ周りの設備のメンテナンスでサーバ自体を数時間停止して起動した後に、データベースが起動してこないということが起こった事例があります。
なので、サーバ自体を長時間停止する場合は、OS 起動後しばらくしてからデータベース起動を手動でやった方が良いかと思います。

# 参考情報

　- [敗走王のブログ](https://ameblo.jp/dagyah/entry-12333288943.html)
　- [社内のインフラ設計で発注者が押さえておくべき重要ポイント](https://imitsu.jp/matome/web-system/3712021114648822)
　- [Linux詳細設計書の目次例](http://g-network.boo.jp/wiki/2018/08/post-1431/)
　- [エージェントを使用する監視機能一覧](https://www.miraclelinux.com/product-service/zabbix/overview/function?fbclid=IwAR31fpxT_RqF_ubYQTjVe6Xu4U8dpwD6wYSsjH00004o16v81ttuZdICLeU)
　- [監視のソフトウェア、サービス](https://yakumobooks.hatenablog.jp/entry/2018/01/14/090000?fbclid=IwAR24Ib_X_oh2PWTvcUS_CCxCaXXcWCSdjuVf3B2sDVeTqIB37WO7ZMz2218)
Rails + mariadb on Dockerの環境構築（Docker for Mac）

# はじめに
フルリモートのイケてるフリーランスを目指すためにRailsの勉強を始める。せっかくなんでDockerも覚える。基本的には先人達のコピペだけど微妙に詰まったので備忘として残しとく。

# 参考にしたページ
丁寧すぎるDocker-composeによるrails + MySQL on Dockerの環境構築(Docker for Mac)
https://qiita.com/azul915/items/5b7063cbc80192343fc0

DockerでRuby on Railsの開発をしよう
https://qiita.com/saitoeku3/items/b1aa2ae143624e551aea

参考というかほぼそのまま。こちらのページのが丁寧に書いてあります。

# 環境
* MacOS
* Ruby 2.6.3
* Rails 5.2.3
* mariadb 10.3

# 手順
## プロジェクトのディレクトリを作成
```shell
$ mkdir sampleApp
$ cd sampleApp
```

## Dockerfileを作成
```Dockerfile:sampleApp/Dockerfile
FROM ruby:2.6.3
ENV LANG C.UTF-8

RUN apt-get update -qq && apt-get install -y \
    build-essential \
    nodejs \
 && rm -rf /var/lib/apt/lists/*

RUN gem install bundler

WORKDIR /tmp
ADD Gemfile Gemfile
ADD Gemfile.lock Gemfile.lock
RUN bundle install

ENV APP_HOME /app_name
RUN mkdir -p $APP_HOME
WORKDIR $APP_HOME
ADD . $APP_HOME
```

## Gemfileを作成
```ruby:sampleApp/Gemfile
source 'https://rubygems.org'
gem 'rails', '~> 5.2.3'
```

## Gemfile.lockを作成
```shell
$ touch Gemfile.lock  # 中身は空でOK
```

## docker-compose.ymlを作成
```docker-compose.yml

version: '3'

services:
  db:
    image: mariadb:10.3
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: root
    ports:
      - '3306:3306'
    volumes:
      - mysql_data:/var/lib/mysql
  web:
    build: .
    ports:
      - "3000:3000"
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    volumes:
      - .:/app_name
      - bundle:/usr/local/bundle
    depends_on:
      - db
volumes:
  bundle:
  mysql_data:
```

## rails newを実行
```shell
$ docker-compose run web rails new . --foce --database=mysql --skip-bundle
```

## database.ymlを修正
```yaml:sampleApp/database.yml
default: &default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: password  # docker-compose.ymlのMYSQL_ROOT_PASSWORD
  host: db  # docker-compose.ymlのservice名
```

## dockerを起動
```shell
$ docker-compose build  # コンテナをビルド
$ docker-compose up -d # コンテナの一斉起動（オプションに-dを付けるとデーモンで起動）
```

## 起動の確認
http://localhost:3000 にアクセスしてこの画面が出ればOK
<img width="1438" alt="スクリーンショット 2019-07-21 1.29.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154077/4decd2cf-c797-0424-d39a-2b13dce7eaca.png">

# 詰まったこと
docker-composeの設定を変えながら行なっていたが、DBのコンテナがなかなか上手く立ち上がらず。すると、初回起動時のみに行われる設定があるとのことで、DBのコンテナを削除してから再度実行したら上手く行った。

参考：DockerオフィシャルのMySQL（MariaDB）コンテナの挙動をDockerfile周辺から読み解く
https://qiita.com/kazuyoshikakihara/items/f0c5158c700bb7a5df9f

# おしまい
品質の低いコピペ記事なんて書いてんじゃねーよ！とか言われたら消しますm(_ _)m
Python 小数点以下の任意桁で切り捨て

## 概要
- Pythonで小数点以下の任意の桁で切り捨てをする時に少しハマったのでやり方をまとめます。

## 桁数が小さい場合

```python
import math

n = 2  # 切り捨てしたい桁
x = 1.555
y = math.floor(x * 10 ** n) / (10 ** n)
print(x, "=>", y)  # 1.555 => 1.55
```

考え方としては、切り捨てたい桁数の数字が整数になるまで10^nをかけて、そこで`math.floor`を使う。その後、10^nで割って小数に戻す。標準ライブラリの```math.floor```が小数点以下を全て切り捨てとなるため。
例で言ったら、`1.555`を`155.5`にして切り捨て。その後、`1.55`に戻している。

## 桁数が大きい場合

```python
from decimal import *

root2 = Decimal(2) ** Decimal(0.5)
n = 18  # 小数第18位
y = Decimal(str(root2)).quantize(Decimal(str(10**(n*-1))), rounding=ROUND_DOWN)
print(root2, "=>", y)  
# 1.414213562373095048801688724 => 1.414213562373095048
```

ハマったのはこっち。有効桁数が大きい（18桁くらい？）になるとどうしても誤差が入る。decimalのROUND_DOWNを使うと高い精度で切り捨てできる。

```python:DecimalのROUND_DOWNを使わない場合
n = 18  # 切り捨てしたい桁
x = 2 ** 0.5
y = math.floor(x * 10 ** n) / (10 ** n)
print(Decimal(x), "=>", y)
# 1.4142135623730951454746218587388284504413604736328125 
#  => 1.4142135623730951　※切り捨て前の値で誤差が出ている

```

(2019/7/21: コメントいただいて修正しました。ありがとうございます)

Decimalで文字列として設定すれば桁数の大きい値も保持できる。

```python
>>> Decimal('123456.1234567890123')
Decimal('123456.1234567890123')
```

ただ、Decimalではない変数に入れた時点で誤差含みになる。この例だと、小数第11位からずれる。解決策は無さそう。

```python
>>> d = {"value": 123456.1234567890123}
>>> Decimal(d["value"])
Decimal('123456.1234567890060134232044219970703125')
```

```python
>>> Decimal(str(d["value"]))
Decimal('123456.123456789')
# 文字列で設定すると15桁の有効数字で表示
```

## 参考

- [pytho公式 decimal --- 十進固定及び浮動小数点数の算術演算](https://docs.python.org/ja/3/library/decimal.html)
HTTP通信するWidgetをテストする（Flutter）

ここ最近、Flutterを使ったクロスプラットフォームのアプリを作ろうドキュメントを片手にと勉強しています。その中でハマった、HTTP通信が含まれるWidgetのテスト方法について書き残します。最終的には以下のコードでテストが成功します。

```dart
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:http/testing.dart';
import 'package:http/http.dart';

class Test extends StatelessWidget {
  Client client = Client();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FutureBuilder(
        future: getWord(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          if (!snapshot.hasData) return CircularProgressIndicator();
          return Text(snapshot.data);
        }
      ),
    );
  }

  Future<String> getWord() async {
    final response = await client.get('http://example.com');
    return response.body;
  }
}

void main() {
  testWidgets('http mock', (WidgetTester tester) async {
    final mockClient = MockClient((_) async => Response('Hello World', 200));
    final test = Test();
    test.client = mockClient;

    await tester.pumpWidget(test);
    await tester.pumpAndSettle();
    expect(find.text('Hello World'), findsOneWidget);
  });
}
```

やっていることはHTTPクライアントをモックに差し替えてからテストする、これだけです。因みにパッケージは次の通りです。

```yaml:pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  http: ^0.12.0+2

dev_dependencies:
  flutter_test:
    sdk: flutter
  mockito: ^4.1.0
```
それでは、順を追って説明していきます。

# Widgetの作成
まずはテスト対象のWidgetを作成します。APIからのレスポンスを表示するだけのWidgetです。レスポンスを待ってからWidgetをビルドしたかったため、FutureBuilderを使用しています。このclientの中身をモッククライアントに差し替えることが今回の肝です。

```dart
class Test extends StatelessWidget {
  Client client = Client();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FutureBuilder(
        future: getWord(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          if (!snapshot.hasData) return CircularProgressIndicator();
          return Text(snapshot.data);
        }
      ),
    );
  }

  Future<String> getWord() async {
    final response = await client.get('http://example.com');
    return response.body;
  }
}
```

# モッククライアントの作成
Clientを差し替えるためのモックを作成します。httpパッケージに用意されているモック作成用のMockClientクラスを利用します。ここでは、MockClientのレスポンスが'Hello World'と200ステータスを返すように設定しています。今回は、単純にレスポンスの表示するだけですが、テストの内容によってはJSONを返すようにしたり、目的に合わせてレスポンスを設定することができます。

```dart
final mockClient = MockClient((_) async => Response('Hello World', 200));
```

# テストの実行
ここまでで、Widgetとモッククライアントができました。あとはテストを実行するだけです。Testウィジェトのインスタンスを生成して、インスタンスのclientの中身をmockClientに差し替えます。最後にtester.pumpWidgetでWidgetをビルドし、tester.pumpAndSettleでFutureBuilderが生成する「Hello World」が表示されるのを待つことでテストが成功します。

```dart
testWidgets('print test', (WidgetTester tester) async {
  final mockClient = MockClient((_) async => Response('Hello World', 200));
  final test = Test();
  test.client = mockClient;

  await tester.pumpWidget(test);
  await tester.pumpAndSettle();
  expect(find.text('Hello World'), findsOneWidget);
});
```

以上が、HTTP通信するWidgetのテスト方法についての記事でした。お役に立てたら幸いです！
IPアドレスとポート番号について

#IPアドレス
**インターネットに接続されたコンピュータを特定するための識別番号のこと**です！
ネットワークでいうところの住所や電話番号のようなものです。
データをやり取りする際に、ネットワーク上で通信相手を間違わないようにするために使用されます。
現状普及しているIPアドレスのIPv4というバージョンは、32ビットの2進数で表します。
しかしそのままではわかりづらいため、8ビット毎にドットで区切りで表現しています。
以下がIPv4の例です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419062/90256c3b-b8e7-88b2-10c7-e9347c681bb7.png)
(wikipediaより引用)


###●グローバルIPアドレス
インターネットに接続する機器に割り当てられるIPアドレスで、世界中で１つしかありません。
電話機で例えると、外線のようなものです。

そしてグローバルIPアドレスには**動的IPアドレス**と**静的IPアドレス**の２種類があります。

**①動的IPアドレス**
言葉の通り、IPアドレスが固定でなく変動するタイプです。
どのような場合かというと、家庭などでインターネットサービスプロバイダー(ISP)に接続する場合がわかりやすい例です。
ISPを使用してインターネットに接続する場合、ISPよりIPアドレスが付与されます。
インターネットへの接続を切ったら、その時付与されたIPアドレスは無効になります。
そしてまたインターネットに接続した際には、ISPから別のIPアドレスが割り当てられる仕組みです。

**②静的IPアドレス**
こちらも言葉のままですが、IPアドレスが変わらない、つまり固定されたものです。
接続の度にIPアドレスが変わって欲しくない時にこちらを使用します。
例えばWEBサイトの公開サーバやメールサーバ等。
WEBサイトをご自身で作成して公開したことのある方であれば、すぐにご理解頂けるかと思いますが、
公開するにあたってWEBサイトのサーバのIPアドレスとドメインを紐付ける為に、DNSサーバで関連付ける必要があります。
しかしIPアドレスがもし動的だと、登録したIPアドレスと紐づかずにWEBサイトが表示されない、といったことが起こり得ます。


###●プライベートIPアドレス
企業や家庭内といったプライベートなネットワークでのみ使用できるIPアドレス。
インターネットに接続しないタイプのIPアドレスです。
電話機で例えると、内線のようなものです。

なぜグローバルIPアドレスと区別されているのでしょうか？
そもそもIPアドレスは、パソコンの住所のようなものです。
IPアドレスは32ビットの数字の組み合わせで、おおよそ43億個のIPアドレスを割り当てることができます。
その為、本来は重複するIPアドレスは存在してはならず、世界に１つだけの番号がそれぞれ与えられていました。
しかしインターネットの普及により43億個では足りなくなってしまいました。
その為、企業や家庭内で使用するネットワークに関しては、共通したIPアドレス(プライベートIPアドレス)を使用することになったのです。


#ポート番号
IPアドレスによって、個々のコンピュータへの住所を特定することは出来ます。
しかしコンピュータが提供するサービスまでは特定できません。
このサービスを特定するためのものがポート番号です！
IPアドレスが住所ならポート番号は部屋番号で例えられることが多いです。

ポート番号は16ビットの整数であり、 0番～65535番まであります。
例えばサーバ側でWebサービスは80番のポートで接続を待っており、メール転送サービスは25番のポートで接続を待っています。 クライアントがWebサイトを閲覧したければ、Webサービスを提供しているサーバの80番ポートへ接続する、といった流れになります。 

#さいごに
プログラミングを学習したばっかりの頃、IPアドレスやポート番号の意味がわからなすぎて混乱しましたが今ではどんなものかくらいは説明できるようになりました:sweat:
より理解を深める為には、プロトコルやTCP/IP等の意味も理解しておく方が良いと思います。
【Rails チュートリアル】 ブランチのマージができない(gitignoreの設定) ＃１

第1章で少しつまづいたところをメモ程度に記載

●1.1.4ブランチ、編集、コミット、マージにて

$ git checkout -b modify-README →ブランチを作成し…　
なんらかを編集し…
$ git checkout master →マスターブランチに移動し…
$ git merge modify-README →マージ…

「.c9/metadata/tab0が変更されていますのでマージできません」的なエラーが

●原因
・gitignoreに.c9の設定がない

●方法
・.c9フォルダは隠しフォルダになっているため、表示していない場合は表示させる。
　※ここでそもそも.gitignoreがない場合は、一度gitにpushした内容をチェックアウトする
・.c9/* の記述を追加
・場合によってはキャッシュが残っている場合があるため、キャッシュ削除
・コミット・プッシュを実行（.c9がコミット・プッシュされていなければ完了）
AndroidエンジニアがiOS合宿でFlutterでiOSアプリを開発した（画面のみ）

## 概要

会社のiOS合宿に参加して、FlutterでiOSアプリを作った。

当方はAndroidエンジニアで、iOSアプリについてはド素人
「**FlutterならiOSアプリも作れる！**」という勢いで合宿に参加した。

ちなみに、**Flutterもド素人**である。

## iOS合宿とは

会社のiOSエンジニアの企画で「Apple関連のなにかを開発する」というテーマの合宿である。

期間は2泊3日（7/19〜7/21）で、開発日は7/22の1日のみ。
（事前準備や学習は何でもOK）

宿は湯河原の [おんやど恵み](http://www.onyadomegumi.co.jp/plan3_lp/)という旅館。
**開発合宿**を推してる宿らしい。

旅館の和室にテーブルを並べ、皆でMacを並べてモクモクと開発してた。

## 合宿の準備

さすがにFlutterド素人のまま合宿に参加するわけにはいかないので、Flutter入門本を買った。

Android/iOSクロス開発フレームワーク Flutter入門
https://www.amazon.co.jp/dp/4798055832

合宿の1週間前から読み始めるが、読んだだけでコードは１行も書かなかった。
（忙しくて...という言い訳）

とりあえずMacにFlutterとDartの開発環境は整えておいた。
（Android StudioのFlutterプラグインとか)

## 合宿で作ったもの

成果物は、画面を２つ作った。
この画面レイアウトを作るだけで丸１日かかった。

![flutter_app.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52227/fada48c3-c2b1-7163-bebd-d4ecfd4d8d34.png)

一応、画面遷移もできる。

![2019-07-20-20-58-31.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52227/21762902-0990-c1e2-906c-08f3854b1781.gif)

実は、この画面の元となるアプリが存在している。
そのアプリは自分が個人開発した「[やいまふに](https://play.google.com/store/apps/details?id=com.banbara.yaeyama.liner.checker&hl=ja)」というAndroidアプリで、
このアプリのiOS版をFlutterで開発したい、という狙いがある。

### 成果物のコード

汚くても動くコードだし公開しちゃう
https://github.com/ikemura23/yaimafuni_flutter

### 元となるアプリ

![yaimafuni_ui.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52227/8b6a0cee-da79-71e6-fac1-bda7b1e16fe7.png)

八重山諸島の船の運行確認アプリです。
https://play.google.com/store/apps/details?id=com.banbara.yaeyama.liner.checker&hl=ja

## Flutterの開発で参考になったサイト

### Flutter Studio
https://flutterstudio.app/

レイアウトを組み立てるときに使ったが、癖がある。
Flutterの特性を知っていないと、このサイトを使いこなすは厳しいかも
（特にRowとかColmunとか）

### Flutter Widget catalog (公式)
https://flutter.dev/docs/development/ui/widgets

よく使うWidgetが紹介されている。
レイアウトを組むには以下ページが参考になる。

- [Layout](https://flutter.dev/docs/development/ui/widgets/layout)
- [Material Components](https://flutter.dev/docs/development/ui/widgets/material)
- [Scrolling](https://flutter.dev/docs/development/ui/widgets/scrolling)


### Flutter開発する前に知っておきたい35のWidget一覧 - Qiita
https://qiita.com/coka__01/items/dedb569f6357f1b503fd

この記事はUI作成す時にとても参考になった

## 合宿で作り残したもの

- トップ画面と詳細画面のレイアウトが雑すぎる
- API通信処理を実装してない

Flutterど素人なのでしゃーない
さすがにAPIまではムリだった（参考記事は用意していたが）

## 今後の予定
API通信を実装して、レイアウトも良さげになれば、iOS版アプリをリリースしたい！
ランダムでチーム分けをするDiscord Botを作った😇


https://github.com/HGBBs/random_team
![unknown (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183325/719ab7cc-10fc-2d53-e382-de6402c373e0.png)
[GODFIELD](https://godfield.net/)とか紅白戦をやるときに、サクッとチーム分けてくれるツールがあったら便利だなぁと思い、作ることにした。
すでにそのようなWebサイト[^1][^2]やDiscord Bot[^3][^4]もあるが、勉強と遊びを兼ねて開発していく（車輪の再発明サイコー😍）

## 仕様
仕様としては、コマンド(!rt)とチーム数を受け取り、コマンドを打った人が参加しているVoiceChannelの参加メンバーでチーム分けをする(ココ重要）。通話に参加しているメンバーでチーム分けするので、メンバーの名前や一覧をいちいち入力する必要がないという天才的発想😜🤔

使った言語はDart🎯で、[nyxx](https://github.com/l7ssha/nyxx)というDiscord APIのwrapper Packageを使った。

## チーム分けロジック実装
チームが割り切れない場合どうするかかなり悩んだが、潔く余った人を補欠にして、判断はその状況に任せることにした😇

```dart:random_team.dart
   Map<String, List<String>> getRondomTeam(int teamNum) {
     int fill = players.length % teamNum;
     Map<String, List<String>> teams = {};
     teamNameList.shuffle();
     players.shuffle();
     int peoplePerTeam = players.length ~/ teamNum;
     teamNameList.take(teamNum).toList().asMap().forEach(
         (i, teamName) => 
         	teams[teamName] = players.skip(i * peoplePerTeam).take(peoplePerTeam);
     teams['😇 sub'] = players.sublist(players.length - fill, players.length);
     return teams;
   }
```
`players.length ~/ teamNum`は`(players.length/teamNum).toInt()`と同義で、`~/`演算子はよくやる除算とintへのキャストを同時にやってくれる😍
チーム名はガルパンになぞった絵文字にしようと思ってたけど、あんこうの絵文字がなかったので、仕方なくなんかそれっぽい動物の絵文字にすることにした😢 詳しい実装は[GitHub](https://github.com/HGBBs/random_team/blob/master/lib/random_team.dart)みてどうぞ👀 Panzer vor !

## DiscordBot Embed 実装
embed(埋め込みメッセージ）は↓みたいなやつ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183325/51ae5c96-86ca-5e43-6362-f28b27ff10d5.png)

メインの実装はnyxxのドキュメントを見るか、[これ](https://github.com/HGBBs/random_team/blob/master/bin/main.dart)を参考にしてもらって、ここではembed_builderの注意点を書く🚨

```dart:embed_builder.dart
   EmbedBuilder embed = (EmbedBuilder()
     ..title = "random team"
     ..color = DiscordColor.fromInt(13369286));
   randomTeam.forEach((key, value) => embed.addField(
       name: key,
       content: value.isNotEmpty ? ' ' + value.join(', ') : '👻',
       inline: true));
```
↑のコードのように`embed_builder`でembedを作成して、`send(embed: embed)`のような感じでembedを表示出来るんだけど、`embed.addField(name: name, content: '')`のように、contentに空文字(`''`)を渡すとエラーを吐かずにembedも表示されないので、何かしら渡してあげる必要がある（ゼロ幅スペースとかでいいかもしれない、自分の場合は可愛いから👻にしたけど）

## VoiceChannel に参加しているメンバーの取得
大事なとこ書くの忘れてた🤣

```dart:get_vc_member.dart
      var channel = (e.message.author as Member).voiceState.channel;
      List<String> users = channel.connectedUsers
          .map((voiceState) => voiceState.user.username)
          .toList();
```
一行目で、コマンドを打ったuserの参加しているVoiceChannelを取得し、2行目の`channel.connectedUsers`で、通話に参加しているメンバーのリストを取得できる📞

## おわりに
個人的にBotは、作りやすく実用的で勉強にもなる最強の教材だと思うのでぜひ作ってみてほしい🤖 とりわけDiscordBotは、ほとんどの言語で[ライブラリ](https://discordapp.com/developers/docs/topics/community-resources)が用意されているので超オススメ😘　

[^1]: https://www.jamestease.co.uk/team-generator/
[^2]: https://www.keamk.com/random-team-generator
[^3]: https://ryo-udon.hatenadiary.jp/entry/2019/04/07/130910
[^4]: https://discordbots.org/bot/457161248430358538
駅ノートでつながるSNS「Snovel」のアルファテスターを知人以外に広げることにした

Angular+Ionicで[Snovel](https://snovel.tinykitten.me)というWebアプリを作ってます。
「駅ノートでつながるSNS」という触れ込みです。
前まではReact Nativeで作っていたのですが、CIに金かかる最新版をテスターに配布しづらいなど問題があったためWebアプリに移行しました。

[Nativeだった頃の記事](https://qiita.com/TinyKitten/items/60aba2b6ac931e8bc96c)

今まで知人に配布するだけのテストだったのですが、せっかくWeb化中ということで、作りかけのSnovelを一般の皆様にもテスト用に使っていただきたいと思いました。

とゆーことで、まだコアな機能すらできてないSnovelのリンクです：
[https://snovelbeta.netlify.com](https://snovelbeta.netlify.com)
できるだけ入ってほしい情報共有Discord（元は友人の集まりなので雑談が多い）
[https://discord.gg/4stTPCU](https://snovelbeta.netlify.com)
くっそ雑に作ったLP
[https://snovel.tinykitten.me](https://snovel.tinykitten.me)
Google ColaboratoryにてKerasのバックエンドをTheanoに変更する方法

日本語の情報が少なかったので、情報共有です。

結論としては、以下の英語記事の内容を試すと上手くいきました。

Setting Google Colab to use Theano as Backend
https://stackoverflow.com/questions/56469879/setting-google-colab-to-use-theano-as-backend

```python
import os
os.environ["KERAS_BACKEND"] = "theano"
import keras.backend
keras.backend.set_image_dim_ordering('th')
```
<出力結果>
Using Theano backend.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254780/8e312633-2874-6aca-effa-d5cea2a05747.png)


Google ColabのKearasのデフォルトのバックエンドはTensorFlowです。
（「Using TensorFlow backend.」と出力される）

ハマりポイントは、「os.environ["KERAS_BACKEND"] = "theano"」をkerasのimportの前に実行すること。
一旦をkerasをimportすると、後から上記を実行しても、上書きされません。

地味にハマったので共有します。

## 補足

プログラムの途中で、theanoに変更する場合は、こちらの記事の内容が役に立ちます。

https://qiita.com/ReoNagai/items/98632f699e629a514cd6
個人で動作を試せる銀行系オープンAPIまとめ

オープンAPIの活用ということで銀行も積極的に動き始めていますが、一般の開発者向けに公開されている情報は少ないというのが現状です。2019年7月時点で、個人にも情報公開されていて、実際に動作を試すことのできる銀行系APIをまとめました。
※いずれもあくまで開発環境で動かすというもの。本格利用には申請と審査が必要です。



# 三菱UFJ銀行

#### [三菱UFJ銀行 API開発者ポータル](https://developer.portal.bk.mufg.jp/)
アカウント登録要。利用できるサービスは個人向けと法人向けの2種類。個人向けは参照系のみ。法人向けに更新系が用意されています。
サンプルコードはCurl,Ruby,Python,PHP,Java,Node,Go,Swift で用意されています。

##### 個人API

-  口座API　…口座の残高や入出金明細が取得できる。
-  顧客API　…お客様情報が取得できる。

##### 法人API

-  口座API
-  振込申請API
-  総合振込申請API
-  給与賞与振込申請API


# セブン銀行

#### [セブン銀行API開発者ポータル](https://api-portal.sevenbank.co.jp/)
こちらもアカウント登録要。MUFGと違って、個人向けの振込API（更新系API）があります。
サンプルコードはCurl,C#,Java,JavaScript,ObjC,PHP,Python,Ruby。


##### 利用可能なAPI

- 残高照会API
- 入出金明細照会API
- 定期預金明細照会API
- カードローン明細照会API
- 登録済振込先照会API
- 振込API


# GMOあおぞらネット銀行
####[GMOあおぞらネット銀行 API開発者ポータル](https://api.gmo-aozora.com/ganb/developer/api-docs/#/STOP0101)
ネット銀行の方がこういったことは充実していそうなイメージがありますが、ポータルを開設しているのはGMOあおぞらネット銀行だけでした。

アカウント登録要。アカウント登録は法人が前提となっているため、会社名の入力が求められます。またログインしないとAPI仕様が見れないのですが、PDFの仕様書ならばこちらから参照可能。

[オープンAPI仕様](https://gmo-aozora.com/business/service/api-specification.html)

三菱UFJ同様に、APIは個人向けと法人向けに分かれているほか、通知系という括りでも提供。APIの数は前述の2行の比にならないほど充実しています。またSDKを[GitHub](https://github.com/gmoaozora)にアップしているなど、ネット銀行らしさが感じられるポイントも。


##### 個人口座向け
- 口座一覧照会API
- 残高照会API
- 入出金明細照会API
- 振込入金明細照会API
- 振込状況照会API
- 振込依頼結果照会API
- 振込手数料事前照会API
- 振込依頼API
- 振込取消依頼API
- つかいわけ口座間振替API
- 総合振込状況照会API
- 総合振込依頼結果照会API
- 総合振込手数料事前照会API
- 総合振込依頼API
- 総合振込取消依頼API
- 振込入金口座一覧照会API
- 振込入金口座入金明細照会API
- 振込入金口座発行API
- 振込入金口座状態変更API
- 振込入金口座解約申込API

##### 法人口座向け
- 口座一覧照会API
- 残高照会API
- 入出金明細照会API
- 振込入金明細照会API
- 振込状況照会API
- 振込依頼結果照会API
- 振込手数料事前照会API
- 振込依頼API
- 振込取消依頼API
- 総合振込状況照会API
- 総合振込依頼結果照会API
- 総合振込手数料事前照会API
- 総合振込依頼API
- 総合振込取消依頼API
- 振込入金口座一覧照会API
- 振込入金口座入金明細照会API
- 振込入金口座発行API
- 振込入金口座状態変更API
- 振込入金口座解約申込API


# OpenCanvas
####[OpenCanvas API開発者ポータル](https://portal.opencanvas.ne.jp/api)
OpenCanvasはNTTデータが提供する金融機関向けクラウドサービスで、みずほ銀行や三井住友銀行をはじめとした多くの金融機関がこのサービスを利用しています。共通利用が前提となっているため、提供されているAPIはオーソドックスなものが選定されているはずですが、そもそも銀行業務自体がどこも似たようなものなので、提供されているAPIの種類は豊富。またいくつかの銀行向けには、個別APIが開発されているようです。

利用ガイドがExcelなところはいかにも銀行という感じがして良いですね（個人的な感覚）。利用にはアカウント登録要。

##### 個人ユーザー向け
- 口座一覧照会API
- 口座情報照会API
- 入出金取引明細照会API
- 定期保有明細照会API
- 投信保有明細照会API
- カードローン契約内容照会API
- 振替実行API

##### 法人ユーザー向け
- 企業情報照会API
- 利用者情報照会API
- 残高照会（全口座）API
- 残高照会（口座指定）API
- 入出金明細照会（ANSER/全銀）API
- 振込入金明細照会（ANSER/全銀）API
- 口座振替結果照会API
- 口座振替手数料照会API
- 総合振込依頼データ登録API
- 給与・賞与振込依頼データ登録API
- 振込振替依頼データ登録API
- 口座振替依頼データ登録API
- 総合振込依頼データ照会API
- 給与・賞与振込依頼データ照会API
- 振込振替依頼データ照会API
- 口座振替依頼データ照会API
- ＥＤＩ情報照会API
- 総合振込依頼データ一覧照会API

##### 個別サービス（熊本銀行、親和銀行、広島銀行、福岡銀行向け）
- 公共債保有明細照会API
- 借入取引明細照会API

 
　
　
　

銀行ごとに利用できるサービスは2019/6/18時点で以下の通り。

##### 個人ユーザー向け
![paraSOL.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428660/1bfc034e-01a5-cf38-23aa-9c34bd3fe058.jpeg)


##### 法人ユーザー向け
![BizSOL.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428660/b83a8b06-dda8-bc87-6703-01bc147f60d5.jpeg)

引用 [OpenCanvas API利用可能金融機関](https://portal.opencanvas.ne.jp/api/available)
　
　
　

金融機関コードですべて洗い出したわけではないので、もしかしたら漏れがあるかもしれません。もし情報あれば教えてください。