OmniAICreator/Qiita-1.07M huggingface dataset:
"Open with Code" メニューを Nautilus に追加する (Ubuntu)

この記事は [Visual Studio Code Advent Calendar 2018](https://qiita.com/advent-calendar/2018/vscode) の 12 日目の記事です。

Windows で VS Code をインストールすると，ファイルブラウザのコンテキストメニューに "Open with Code" あるいは "Visual Studio Code で開く" が追加されますが，Ubuntu では同様のメニュー項目が追加されないようです．この記事では，そんな "Open with Code" を Ubuntu に追加する方法を紹介します．

対象とする環境は Ubuntu 18.04 LTS，ファイルブラウザは Files (Nautilus) です．

![vscode_fma_result.png](https://qiita-image-store.s3.amazonaws.com/0/81643/f4dec168-1fe5-7cd1-b9b5-47368e42e11f.png)

## FileManager-Actions のインストール

コンテキストメニューに項目を追加するために必要な [FileManager-Actions](https://gitlab.gnome.org/GNOME/filemanager-actions) を，次のようにしてインストールします．

```
$ sudo add-apt-repository ppa:daniel-marynicz/filemanager-actions
$ sudo apt install filemanager-actions-nautilus-extension
```

## "Open with Code" の追加

FileManager-Actions を起動します．

```
$ fma-config-tool
```

[File] メニューから [New action] を選択し，新しい項目を追加します．追加された項目の [Action] タブを開き，以下のように設定します．

* Display item in selection context menu: enabled
* Display item in location context menu: enabled
* Context label: Open with Code

![vscode_fma_action.png](https://qiita-image-store.s3.amazonaws.com/0/81643/851c7580-5f71-bff5-deb0-ee987342d4f0.png)

次に [Command] タブを開き，以下のように設定します．

* Path: /usr/bin/code
* Parameters: . --working-directory=%d/%b
* Working directory: %d/%b

![vscode_fma_command.png](https://qiita-image-store.s3.amazonaws.com/0/81643/3a238d8a-e978-c5f0-dccb-c742658e8403.png)

最後に [File] - [Save] を選択すれば，コンテキストメニューに "Open with Code" が追加されます．

## その他

### デスクトップ上ではうまく動かない

デスクトップ上だと，デスクトップではなくルートディレクトリが開いてしまったりと，うまく動かないようです．いい解決方法をご存じの方がいたら教えてください．

### "FileManager-Actions actions" メニューをなくす

"Open with Code" メニュー項目が "FileManager-Actions actions" という項目のサブ項目として追加されている場合は，FileManager-Actions の [Edit] - [Preferences] を開いて "Create a root 'FileManager-Actions' menu" チェックボックスをオフにすることで，不要な  "FileManager-Actions actions" を消すことができます．

![vscode_fma_preferences.png](https://qiita-image-store.s3.amazonaws.com/0/81643/444c0ae0-a551-861f-f0f9-3f59ca55c4b2.png)

## 参考
* FileManager-Actions
  - https://gitlab.gnome.org/GNOME/filemanager-actions
* GitHub の関連イシュー
  - https://github.com/Microsoft/vscode/issues/22036
  - https://github.com/Microsoft/vscode-docs/issues/873
テストの王子様 ～テスト自動化を諦めた大人へ贈る～

# はじめに
この物語りを
世界中のテスターに
また自分がエンジニアだった頃を
忘れがちなテスター達に
そして
うわべだけでなく
物事の ほんとうの美しさを
見つめる勇気を持った
すべてのテスターに
心からの友情をこめて
贈ります。

# katalonとの出会い
> 「テストコードを描いて・・・」
僕は雷にでも打たれたように跳びあがった。
とにかく僕はkatalonが突然現れたことに、すっかり目をまるくしていた。

遥か昔に作られ誰も仕様をちゃんと把握していないシステムのちょっとした機能追加をした後、その何倍もの人数と時間をかけて手動テストを行っていた時に、後輩がひょっこり見つけてきたのがkatalonとの出会いでした。
https://www.katalon.com/

そこには、PhpStormとの出会いと同じくらいのじわりじわり押し寄せてくる感動と希望がありました。

katalonについてはこちらのかたの記事をご覧ください。
https://qiita.com/kazurayam/items/aece5d314f84893a0a14

# ユニットテストをいまさら書く余裕がない
> 僕はテスト項目書にいらいらしていたので、てきとうに答えた。
「ユニットテストなんて、なんの役にも立たない。あれは、納期遅延のいじわる以外のなにものでもない」

表面上はなんとなく動いているけど、中ではホントに正しく動いてるのか分からない大規模で複雑なハウルの動く城的既存システムに改めてユニットテストを書き始めるのは至難の業で、今まで通りの人海戦術を選ぶのは安牌でしょう。

# テストに追われて
> 「でもきみ、きみはそう思ってるの？テスト自動化が...」
「いいや！ちがう！僕はなにも思ってやしない！てきとうにこたえただけだ。テストで忙しいんだ、僕は！」

Excelに書かれた少し作成者の個性の入ったテスト項目書を読解するのは手書き年賀状の仕分け並みに高度な作業で、ブラウザを操作して、画面キャプチャを共有フォルダに保存していく作業は、頭を悩ませ心を疲弊させ創造する余裕を奪います。

>「テスト以外は、何もしたことがなかった。一日じゅう、きみみたいにくり返してた。」
「『大事なことで忙しい！私は有能なテスターだから！』そうしてふんぞり返ってた。でもそんなのはエンジニアじゃない。キノコだ！」

そこの君、もうコード書くよりExcelとにらめっこしている時間が、またCtrl+SpaceよりPrtScを押下している回数が圧倒的すぎて、自分がエンジニアだったことを忘れていませんか？

# Eclipseベース
> 「なんてきれいなんだ！」
「そうでしょう？」katalonは静かに答えた。「Eclipseをベースに作られたんですもの」

katalonは、Eclipseベース（決して好きではないけど）で作られているので、selenium IDEを見た後だと、とてもきれいに見えます。

# 項目数は更に増えていく
>「指示は変わっていない。それが悲劇のはじまりだ！機能はどんどん増えていったんだが、テスト期間のほうは変わらなかった！」
> 「ちっともおもしろくなんかない」とテスター。「こうしてテストはじめて、もう1か月になるんだぞ」

もう複数人が数日でやれるレベルの項目数をゆうに超えているにも関わらず、1か月ずっと同じ内容のテストを繰り返す日々を送っているなら、それを苦行と言います。

# テストの精度
> 「テスターがうそつきだと、エビデンスがとんでもないことになってしまうからだ。」
「あなたがテストするの？」
「いいや。そんな面倒なことはしない。テスターにエビデンスを取るよう求める。たとえば大きなバグを発見したら、画面キャプチャとエラーログを持ってきてもらう。」

仕様をある程度知っている人がテスト項目書を書いたとしても、第三者がその項目書を見てテストすると、解釈の違いで誤ったテストをすることは田園都市線が遅延する確率より多少低い程度です。
項目数を増やしてしっかりテストし事故を減らそうっていっても、人的ミスは比例して増加します。
事故を未然に防ぐことができなかったのがテスターの責任になったりしたら、もうレ・ミゼラブル。

# katalonに愛着が芽生える
>「きみのkatalonをかけがえのないものにしたのは、きみがkatalonのために費やした時間だったんだ」

試しに単調なブラウザの繰り返し作業をTestCaseとしていくつか作成していたら、いつの間にかkatalonに愛着を感じてきました。Object Repositoryのリネームで毎回エラーが発生して2回目で成功することも、終了時に毎回まだ動いてるヤツがいるんだけどってエラーダイアログが表示されることも。

# 苦労の末に
>「ひとつのリリースに、五千項目もテストしてるよ・・・それなのに、リリース後に発見されるバグを見つけられない・・・」

大量の手動テストをこなしたとしても、コード化されたテストより時間の割に効果が低く感じます。
さらに、その時間は掛け捨て保険のようであり、その行為がそのプロジェクトや実施者のオープンな財産にはほぼならないでしょう。

# 全部入り
> 「不思議だね」僕はkatalonに言った。「ぜんぶそろってる。IDEも、Webdriverも、Recorderも・・・」

katalonをダウンロードすると、その中にTest Caseを作成したり実行結果を見たりするkatalon IDE、ブラウザ自動操作させるwebdriver、ブラウザ動作を記録するRecorderなど一式入っていて、すぐ実行できます。
Webページの操作もChrome、Firefox、IE、モバイルにも対応しており、APIのTestCaseも作成できます。
フルスクリーンキャプチャもできますので、エビデンスもしっかり取ることができます。
https://qiita.com/kazurayam/items/ec9015e781819a5734b1

Test CaseやTest Suitesがテスト項目みたいなものですが、Excelの項目書は絶対必要なんじゃい！ってかたは、これを使ってExcelに項目を書き込む仕組みを作ってみるのもいいですね　↓
https://docs.katalon.com/katalon-studio/docs/write-data-into-excel-file-at-runtime-during-test-execution.html

# さあkatalonを使ってみよう
>僕はkatalonをインストールした。ようやく息がらくになった。起動すると、画面はkatalon色に染まる。その色もまた、僕を満ちたりた気持ちにしてくれた。どうしてあんなにあれこれ苦労する必要があっただろう・・・

試しにkatalonでTest Caseを作ってみると、Excelとにらめっこしているより、100倍楽しいです。
まだExcelテスト項目書に取って代わるには、越えなければならない壁はいくつかありますが、テスト自動化に（もう）一度チャレンジしてみようと思っているかたは、まずkatalonで試してみるのはどうでしょうか。
【rails5】テーブルの表を作成する

###【実現したいこと】
###テーブルの値を、表のようにしてビューで表示させたい。

###【結論】
###bootstrapで作ると簡単でした。

以下の記事を参考にしました。
[参考](https://webnetamemo.com/coding/bootstrap/2015062126)

```
table 基本の表が出来る。
table-bordered　 テーブルとセルの全ての横にラインが表示される。
table-condensed　行間の狭いテーブルになる。
table-stripedを付けると<tbody>の中のテーブル行が交互に色付く。
```

・テーブルタグについて
[参考](https://www.hibinokoto01.com/entry/2017/02/27/044737)

```
<tr>タグとは
・trタグは列を表す
・このタグの間に書かれたものが同じ列となる。

<td>タグとは
・セルを意味するタグの1つ
・このタグの間にテキストを書く
・書かれた内容は通常の文となり左揃いとなる。

<th>タグとは
・セルを意味するタグの1つ
・このタグの間にテキストを書く
・書かれた内容は見出しとなり太字で中央揃いとなる。

<thead>テーブルのヘッダー行
<tbody> テーブル部分の行
<tfoot> theadと共に指定することで、tbodyだけをスクロールさせることが出来る。
```
中華製　リフロー機 T962を使用してみた。

#T-962とは、
T962とは中華製リフロー機です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/31412/2c9c4210-2656-07cd-25c5-506dd354ee80.png)
画像https://ja.aliexpress.com/item/Puhui-T962-110V-220V-Reflow-Equipment-T-962-Infrared-Reflow-Oven-Furnace-IC-Heater-BGA-Rework/32795363635.htmlより、

私の購入した時点では送料込みで、US $210でした、現在はもっと安いかもしれません。


まず、到着して確認ですが、**温度が低すぎて焼けませんでした。**

センサーの交換等も考えましたがまずファームの変更です。
https://github.com/UnifiedEngineering/T-962-improvements
これを、LPC Xpressoでコンパイルして、FLASH MAGICで書き換えるだけです。

##ファームの書換方法は
https://github.com/UnifiedEngineering/T-962-improvements/wiki/Flashing-the-LPC21xx-controller
で記載されていますね。

書換えても、焼けません（今一、温度があがらないので、）
温度の下駄の部分を４倍にすることで対応しました。（センサー上は40度を0度にして-40度下駄下げをする方法です。）
尚、**書換て問題が出てもやましょうは知りません。**（**自己責任の上、変更＆書換えをお願いします**）

##変更箇所

```SENSOR.C
#define MAXTEMPOVERRIDEのコメントを外し
演算値を0.25から1掛けにする。


void Sensor_ValidateNV(void) {
	int temp;

	temp = NV_GetConfig(TC_LEFT_GAIN);
	if (temp == 255) {
		temp = 100;
		NV_SetConfig(TC_LEFT_GAIN, temp); // Default unity gain
	}
	adcgainadj[0] = ((float)temp) * 0.01f;

	temp = NV_GetConfig(TC_RIGHT_GAIN);
	if (temp == 255) {
		temp = 100;
		NV_SetConfig(TC_RIGHT_GAIN, temp); // Default unity gain
	}
	adcgainadj[1] = ((float)temp) * 0.01f;

	temp = NV_GetConfig(TC_LEFT_OFFSET);
	if (temp == 255) {
		temp = 100;
		NV_SetConfig(TC_LEFT_OFFSET, temp); // Default +/-0 offset
	}
//	adcoffsetadj[0] = ((float)(temp - 100)) * 0.25f;
	adcoffsetadj[0] = ((float)(temp - 100));// * 1.00f;

	temp = NV_GetConfig(TC_RIGHT_OFFSET);
	if (temp == 255) {
		temp = 100;
		NV_SetConfig(TC_RIGHT_OFFSET, temp); // Default +/-0 offset
	}
//	adcoffsetadj[1] = ((float)(temp - 100)) * 0.25f;
	adcoffsetadj[1] = ((float)(temp - 100)) ;//* 1.00f;
}
```

```setup.cの変更
setupMenuStruct setupmenu[] = {
	{"Min fan speed    %4.0f", REFLOW_MIN_FAN_SPEED, 0, 254, 0, 1.0f},
	{"Cycle done beep %4.1fs", REFLOW_BEEP_DONE_LEN, 0, 254, 0, 0.1f},
	{"Left TC gain     %1.2f", TC_LEFT_GAIN, 10, 190, 0, 0.01f},
// 	{"Left TC offset  %+1.2f", TC_LEFT_OFFSET, 0, 200, -100, 0.25f},
 	{"Left TC offset  %+1.2f", TC_LEFT_OFFSET, 0, 200, -100, 1.0f},
//	{"Left TC offset  %+1.2f", TC_LEFT_OFFSET, 0, 220, -200, 0.5f},
	{"Right TC gain    %1.2f", TC_RIGHT_GAIN, 10, 190, 0, 0.01f},
//	{"Right TC offset %+1.2f", TC_RIGHT_OFFSET, 0, 200, -100, 0.25f},
	{"Right TC offset %+1.2f", TC_RIGHT_OFFSET, 0, 200, -100, 1.0f},
////	{"Right TC offset %+1.2f", TC_RIGHT_OFFSET, 0, 220, -200, 0.4f}

};
```

以上

あとは設定値で*基準温度変更*してなんとか焼くことができました。



以上
【rails5】form_forでtime_fieldを使い、string型で時間を[00:00]のように表示させるには

###【問題】formにtime_fieldを使用し、基本時間と指定勤務時間をブラウザに表示させたいが、年月やUTCまで表示されてしまう。


【実現したいこと】
「00:00」という形で表示させたい。


【試したこと】
この記事を参考にしていると、railsには時間のみを扱えるクラスはないとの事。
[(https://blog.willnet.in/entry/2015/06/12/063731)]
configにtime_zoneの型を指定しても表示が変わらない。


調べていくと、そもそもがテーブルに追加した指定勤務時間と基本時間の型を、time型にしていたからでした。


**string型で文字列として時間を受け取ればいいのでは？とい思い検証。**


①新しいマイグレーションファイルを作成し、指定勤務時間と基本時間をstring型にカラムを変更

```
②db:migrate:reset

③db:seed
```

こうするとイメージ通り表示出来ました。

【結論】
time_fieldで「00:00」というように値を送信し、それをstring型として受け取り、ビューで表示させる

ということでした。
ディレクトリを丸ごとコピーするLinuxコマンド

サブディレクトリを含めてコピーしたい場合は、cpコマンドの`-R`オプションを使う。

#### cpコマンドでディレクトリを丸ごと別のディレクトリにコピーする書式
```
cp -R 【コピー元のディレクトリ】 【コピー先のディレクトリ】
```

ex1)一階層上にディレクトリを作成
`cp -R hoge ../`

ex2)同階層に別名のディレクトリを作成
`cp -R hoge hoge.old`
AmazonAPIの商品を保存するデータベース設計

**Amazonの商品を格納するデータベース設計**の紹介です。
AmazonAPIを使ったWebサービスを作る時の参考になれば幸いです。

今回は以下の2つを紹介していきます。

- Amazonの商品情報をどのようにデータベースへ保存するか
- UI側でどのように表示させるか

## テーブル設計

- id
- maker_id
- asin（例：B00AROMMFA）
- ean（例：0021112435085）
- amazon\_detail\_page_url
- title（例：【国内正規品】SteelSeries QCK heavy マウスパッド）
- name（QCK heavy）
- price
- amazon_image_id

### メーカー名

- maker_id

makersというテーブルにカテゴリーとメーカーを保存しておきます。idとnameカラムからなる単純なテーブルです。
メーカー名はAmazonAPIのレスポンスに含まれています。

### ASINとEAN

- asin（例：B00AROMMFA）
- ean（例：0021112435085）

ASINはAmazonのユニークな商品コードです。
※`.co.jp`や`.com`など、別リージョンでは使えないです。

EANは日本で最も普及している商品識別コードです。私は使っていませんが、一応データベースへ保存しています。

#### ASINの用途

- Amazonへのリンク生成
- AmazonAPIを使った商品価格の更新など

以下のように、ASINから簡単にAmazonへのリンクを生成できます。
`https://www.amazon.co.jp/dp/B0160USMW6`

アフィリエイトリンクにする場合には`?tag=myapp-22`のようにパラメーターを付ければ良いのですが、それだとAmazonのAPI規約の「**APIから取得したURL経由での売上がまったく無い場合、30日ごとに1日あたりのリクエスト数上限を0.1ずつ減少**」という項目に引っ掛かってしまいます。
そのため、API取得時に返ってきた商品リンクを`amazon\_detail\_page_url`カラムに保存するようにします。

参考：[Product Advertising API (PA-API) の利用ガイドライン](https://affiliate.amazon.co.jp/help/topic/t32)

### 商品タイトル

- title（例：【国内正規品】SteelSeries QCK heavy マウスパッド）
- name（QCK heavy）(nullable)

#### ユーザーへのタイトル表示

APIから取得した商品名を生のまま表示するのはダサいです。
（例：【国内正規品】SteelSeries QCK heavy マウスパッド 63008）

そのため、メーカーのnameカラムと組み合わせて商品名を表示するようにしています。
例えば`SteelSeries`というメーカー名と、nameカラムの`QCK Heavy`と組み合わせて`SteelSeries QCK Heavy`のように表示します。

私の場合、このnameカラムはサイト管理者が自由に編集できるような仕組みにしています。

#### ユーザー側で個別のタイトルを用いたい場合

もし各商品をユーザーと紐付けるようなサービスの場合、ユーザーが個別のタイトルを持ちたいかも知れません。その場合はユーザーとの中間テーブルなどにユーザーが自由に編集できる新しいカラムを作ります。

タイトル表示の優先順位としては以下のようになります。

1. ユーザーが設定した商品名（中間テーブルのカラム）
2. maker.name + name
3. title

### 商品価格

- price（unsigned int型）

定期的にAPIで自動更新しています。（ついでにtitleカラムなども）

### 商品イメージ

- amazon_image_id（例：31SdYqkJNEL）

Amazonには商品イメージにIDっぽいものが存在します。この値自体はAPIの戻り値にありませんが、商品の画像リンクからIDを抜き出し、それをカラムに保存しておけば活用できます。

`https://images-fe.ssl-images-amazon.com/images/I/{$amazonImageId}._SL{$size}_.jpg`
`https://images-fe.ssl-images-amazon.com/images/I/31SdYqkJNEL._SL120_.jpg`

上のURLように、商品イメージの横幅を自由に指定できます。おそらくリクエスト時に画像を動的にリサイズして、それをCDNに保存しているのだと思われます。

## 以上がAmazonの商品を保存するデータベース設計です
AmazonのAPIは回数制限に余裕があるにも関わらずリミットエラーが返ってきたり、JSONではなくXMLだったりと少々不便な面がありますが、やはり商品のアフィリエイトとしては非常に強いです。
上手く使いこなしていきましょう。
MacでQiita記事(Markdown)をPDFに変換する方法

MacでQiita記事(Markdown)をPDFに変換する方法を紹介します。

# 前提条件

- [Homebrew](https://brew.sh/index_ja)がインストール済みであること
- OSバージョンが「macOS High Sierra バージョン 10.13.16」以上であること

# 手順
## Homebrew最新化

```
$ brew update
$ brew upgrade
```

## PandocとBasicTexのインストール
```
$ brew install pandoc
$ brew cask install basictex
```

## 環境変数PATHへの設定
```
$ vim ~/.bash_profile
```

以下を「.bash_profile」に追記

```
export PATH=/Library/TeX/texbin:$PATH
```

## tlmgrのアップデートとモジュールの追加

```
$ sudo tlmgr update --self --all
$ sudo tlmgr install collection-langjapanese collection-luatex collection-latexextra
$ sudo tlmgr install lm-math
```

## Qiita記事をMarkdownに変換

URLの語尾に「.md」を追加
https://qiita.com/hiesiea/items/58c1c9e14938f301689c.md

すると、記事がMarkdownで表示されるので、ファイルとして保存する。

## MarkdownをPDFに変換

```
$ pandoc 58c1c9e14938f301689c.md -o output.pdf -V documentclass=ltjarticle --pdf-engine=lualatex
```

# 変換結果

![result.png](https://qiita-image-store.s3.amazonaws.com/0/93963/55c816c1-7749-45ea-0642-a572da990e5d.png)

ね、簡単でしょ？

# 参考サイト

[Qiitaの投稿を手っ取り早くPDF化](https://qiita.com/piyo7/items/4cd941752d2d60c1e5df)
[MacでPandocを使ってMarkdownをpdfに変換 | note.nkmk.me](https://note.nkmk.me/mac-pandoc-markdown-pdf-japanese/)
[MacでPandocを使ってマークダウンをPDFに変換 | ヤマムギ](https://www.yamamanx.com/mac-pandoc-pdf/)

# 追記：HTMLからPDFに変換

Qiitaの記事執筆中、画像をアップロードした時に画像部分が以下のようにimgタグで表記されていることがあります。
（imgだったりそうでなかったりで、なぜ表記揺らぎがあるのか不明。。Qiitaさんなんとかしてください泣）

```
<img width="1552" alt="2.png" src="https://qiita-image-store.s3.amazonaws.com/xxx.png">
```

この場合、MarkdownからPDFに変換しようすると変換できません。
そこで、HTMLからPDFに変換することを思いつき、ツールを探したところ、「[wkhtmltopdf](https://wkhtmltopdf.org/)」が一番簡単に実現できました。

```
wkhtmltopdf https://qiita.com/hiesiea/items/58c1c9e14938f301689c result2.pdf
```
Pipenvを使ってJupyter Notebookを導入する方法

Pipenvを使ってJupyter Notebookを導入する方法についてまとめます。

#ツール
##Pipenv
virtualenvで作ったPython環境とそこにインストールするライブラリを統合的に管理してくれるツール。
ライブラリ管理はPipfileによって行う。

##Jupyter Notebook
コード, 数式, グラフ等の可視化表現, テキストを含むドキュメントを作成できるツール。

##Jupytext
Jupyter NotebookとPythonスクリプト等の別形式のファイルを連動させるツール。
このツールを使うことで、片方のファイルに対する変更がもう片方のファイルに反映されるようになる。
Jupyter NotebookのコードをIDEやエディタで編集したいときやJupyter Notebookの差分を分かりやすく表示したいとき (Jupyter Notebookの中身はJSON形式になっているため、Jupyter Notebook自体の差分を表示すると分かりづらいが、代わりに別形式のファイルの差分を表示すると分かりやすくなる) に便利。

#方法
##初回のみ行う手順
1. `pip install pipenv`コマンドを実行し、Pipenvをインストールします。

##プロジェクト作成時に行う手順
2. プロジェクト用のディレクトリを作成します。
3. カレントディレクトリを作成したディレクトリに移動します。
4. `pipenv install jupyter jupytext`コマンドを実行し、Jupyter NotebookとJupytextが入ったPython環境を作成します。

##初回のみ行う手順
1. カレントディレクトリをプロジェクト用のディレクトリに移動します。
5. `pipenv run jupyter notebook --generate-config`コマンドを実行し、`~/.jupyter/jupyter_notebook_config.py`を作成します。
6. `echo 'c.NotebookApp.contents_manager_class = "jupytext.TextFileContentsManager"' >> ~/.jupyter/jupyter_notebook_config.py`コマンドを実行し、Jupytextを利用可能にします。
6. `echo 'c.ContentsManager.default_jupytext_formats = "ipynb,py"' >> ~/.jupyter/jupyter_notebook_config.py`コマンドを実行し、Jupyter NotebookとPythonスクリプトが連動するように設定します。

#Jupyter Notebookの使い方
##起動
1. カレントディレクトリをプロジェクト用のディレクトリに移動します。
2. `pipenv run jupyter notebook`コマンドを実行します。
3. ブラウザ上でJupyter Notebookが開きます。

##Jupyter Notebookの作成方法
1. `New`をクリックし、`Python3`をクリックします。
![31128ce0-0d7b-4019-a171-6829e9c77e66.png](https://qiita-image-store.s3.amazonaws.com/0/52291/b1eb7146-f787-161f-6df1-08fdc3cf88d8.png)
1. Jupyter Notebookを保存すると、同名のPythonスクリプトが自動的に作成されます。


##終了
1. Jupyter Notebookを起動しているターミナル上で`Ctrl`+`C`を押下します。

#ライブラリのインストール
1. カレントディレクトリをプロジェクト用のディレクトリに移動します。
1. `pipenv install {ライブラリ名}`コマンドを実行し、ライブラリをインストールします。

#Jupyter Notebookや作成されたPythonスクリプトを編集する際の注意
Jupyter Notebookと作成されたPythonスクリプトを同時に開くと、うまく連動しない可能性があるため、片方のファイルを編集する際には、もう片方のファイルは閉じておいた方が良いでしょう。

#gitへのコミット時の注意
`Pipfile`と`Pipfile.lock`をコミットに含めてください。

#参考文献
* [Project Jupyter | Home](https://jupyter.org/)
* [Jupyter notebook を管理しやすくする Jupytext を使ってみた - Qiita](https://qiita.com/cfiken/items/8455383f32ee19dfbba3)
どこでもNim

# 概要

道を歩いていたり、電車に乗っていたりするときに、ふとNimのコードを書きたくなることありませんか？
**私はありません**。

でもちょっとしたコードの実験したいときとかありますよね。
そんな時にブラウザ(主にスマホ)から利用できるNimの環境を調べてみました。
他にもあるよという方はコメントで教えてください。

## nim4colab(2020/11/19 追記)

Google Colaboratoryにて、nimのプログラムの実行ができるようになる拡張機能です。
Stable/Develの両方から最新のNimをインストールしてくれるようです。素敵。

https://github.com/demotomohiro/nim4colab

develからインストールして、Nimコードを実行
![2020-11-19_18h51_48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58872/b3144b93-5b70-0fb2-12c3-ef27977058b0.png)

## nim playground(2019/10/26 追記)

https://play.nim-lang.org/

本家でもお試し環境ができているようです。

![Screenshot 2019-10-26 at 14.07.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58872/43b4435f-feb0-ce4d-ac4d-402fefbdc3a5.png)

バックエンドはDockerで構成されているような感じで、プログラムの実行時は若干もたつく印象です。
下記で紹介しているWandboxの方がコンパイル＆実行は早いですね。

## glot.io

https://glot.io/

* REPL替わりによく使っているのが、このglot.ioです。
* Dockerベースになっている実行環境で、Nim以外にもたくさんの言語(３７言語)がサポートされています。
* ソースの共有もスニペットでできるようです。
    * Snippets/My Snippetsと公開用・自分用と登録できるようです。
* プログラムの実行はDocker内で動くようなので、起動は遅いです。
* 別のタブに書いたソースをimportすることができました。
* モバイル系のブラウザで表示すると、エディタの操作が若干つかいずらいです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/58872/9e1df311-da8d-2c26-c9f2-bf02c0df4466.png)


## Wandbox

http://wandbox.org

* Nimアドベントカレンダー [８日目](https://ishidakei.qrunch.io/entries/rmiucJZWKFIy7dPt)で知りました。
* C++ベースのWebサーバーと、疑似Docker？の環境内で、ソースをコンパイルし、実行してくれます。
* こちらは３６言語対応でかつ、それぞれの言語のバージョンも選択できるので素敵すぎます。
* **もうこれでいいです**
* permlik機能もあるので、ソースの共有もしやすいですね。
* エディタで追加したテキストファイルを、プログラムから読むこともできました。
* コンパイル＆実行もglot.ioに比べたら１０倍くらい(私的に)早く感じました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/58872/ceac2a73-314e-7b1a-aa5b-018dcc73964f.png)


## Paiza Cloud

https://paiza.cloud/ja/

* 無料で使えるクラウドに用意されたLinuxサーバーです。
* Webブラウザからアクセスできます。
* サーバー内には、いろんなプログラミング言語はインストールされているですが、Nimは入っていません。
* なのでインストールしちゃいます。
    * ターミナルを開いて、以下を張り付けてエンター(ッターン!)

```shell-session
# Paiza-Nim-Install
wget https://nim-lang.org/download/nim-0.19.0.tar.xz
tar Jxvf nim-0.19.0.tar.xz 
cd nim-0.19.0/
./build.sh 
bin/nim c koch
./koch tools
# Nim本体のソースはいらないので削除
rm -rf c_code
export PATH=~/nim-0.19.0/bin:$PATH
```

### インストール直後に、Nimのバージョン表示＆ストレージの残り容量を表示

* この後はVimのNimプラグインとかいろいろ入れたら良いかと。
    * 私使ったことないのでワカリマセン　
* Gitも使えるので、CloneしてNimbleでビルドとかもできます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/58872/13806c11-4dc5-e338-29b0-a9fdfbaf5091.png)


## まとめ

最初はPaizaCloudでのNim導入を詳しく書こうかと思っていたんですが、Wandboxという素敵環境をAdvent Calendarで知ることができました。

道を歩いていたり、電車に乗っていたりする時に、ふとNimのコードが書きたくなったら[Wandbox](http://wandbox.org)を使いましょう。
**私は使います。**

道を歩いていたり、電車に乗っていたりする時に、ふと気になるアイツのGithubにあるソースをビルドしてみたくなったら、PaizaCloudでNim環境構築して、git clone して、 nimble buildしましょう。
**(私はしませんけど)**
階層の深いディレクトリをmkdirする方法

階層の深いディレクトリをmkdirするには、`-p`オプションを使う。

例えば今いるディレクトリ階層の配下に10階層分のディレクトリを作成すると以下になる。

```
$ mkdir -p A0/A1/A2/A3/A4/A5/A6/A7/A8/A9
```

`-p`オプションを使わないとエラーとなる。
モジュール・パッケージ・ライブラリの違い。

巷には同じような記事があふれていますが、すぐに忘れてしまうので、ここに書いておきます。

Pythonにおける「モジュール・ライブラリ・パッケージ」について言及しますが、他の言語等に対しても通用すると思います。


# モジュールとは？
例えで言うなら「部品」や「歯車」に当たります。

もっと具体的に言うなら拡張子が「.py」のファイルは全てPythonモジュールとなります。


# パッケージとは？
モジュールの集まったものがパッケージとなります。

例えで言うなら、「箱」ですね。


# ライブラリとは？
パッケージをいくつかまとめてインストールできるようにしたものです。

モジュール　＞　パッケージ　＞　ライブラリ みたいに理解すれば簡単ですね。


# 参考
[モジュール、パッケージ、ライブラリの徹底解説](https://ai-inter1.com/python-module_package_library/)
Vue.jsで階層を深くした selectedを選択・データを保持したい

selectedで作った連想配列のデータを保持したいとき。


```html:index.html

<select v-model="selected.piyo">
  
</select>
```

```javascript:vue.js

var vue = new Vue({
    data: {
        selected: {
                piyo: ''
        }
    }
})
```

Vue.js
フォーム入力バインディング

https://jp.vuejs.org/v2/guide/forms.html
google_images_download

##Reference
(https://github.com/hardikvasa/google-images-download#troubleshooting-errors-issues)


##Library
```python
import os
from google_images_download import google_images_download

import matplotlib.pyplot as plt
%matplotlib inline
```

##Sample Code
```python
#keyws   = 'cats with mustaches'
#keyws   = 'sky'
keyws   = '天丼'

limit   = 10
chromedriver = '/content/gdrive/xxx/chromedriver'
offset  = None  # how many links to skip
color_type	= None # color type you want to apply to the images.
                  #  [full-color, black-and-white, transparent]
size    = None  #relative size of the image to be downloaded. 
                #[large, medium, icon, >400*300, >640*480, >800*600, 
                # >1024*768, >2MP, >4MP, >6MP, >8MP, >10MP, >12MP, >15MP, >20MP, >40MP, >70MP]
output_directory = '/content/gdrive/My Drive/xxx/images'
usage_rights	= None #Very important! Check the doc


arguments = {
    "keywords": keyws,
    "limit": limit,
    "chromedriver": chromedriver,
    "offset": offset,
    "color_type": color_type,
    "size": size, 
#    'output_directory': output_directory, 
    "usage_rights": usage_rights
    }   #creating list of arguments

response  = google_images_download.googleimagesdownload()   #class instantiation
response.download(arguments)  
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/254604/22d27ba0-793d-21eb-2421-e11c013efd16.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/254604/bd9d9ce8-9ba6-829a-0626-1b72332b5b1b.png)


```python
#image_path = '/content/gdrive/My Drive/.../'
image_path = '/content/downloads/'

dataset = [img_name for img_name in os.listdir(image_path + keyws + '/')]

dataset[:10]  #Peek the first ten
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/254604/ca0afab7-5207-46ab-e3d5-d71015d2abb9.png)

```python
plt.figure(figsize= (5, 3))
plt.imshow(plt.imread(image_path + keyws + '/' + dataset[0] ) )
plt.grid(b=None) #remove grid
plt.xticks([])
plt.yticks([])
plt.show()

plt.figure(figsize= (5, 3))
plt.imshow(plt.imread(image_path + keyws + '/' + dataset[3] ) )
plt.grid(b=None) #remove grid
plt.xticks([])
plt.yticks([])
plt.show()
``` 

![image.png](https://qiita-image-store.s3.amazonaws.com/0/254604/f4ae5add-423b-7e1a-8260-e09b8558f6b1.png)
Webアプリ開発初心者がpython3の環境構築で躓いたところ（macOS Mojave編）

#はじめに
Webアプリ開発初心者（レガシー言語経験あり）です。progateでpython講座をやって基礎がついたのでwebアプリ開発するべくpythonの環境構築しようと思ったらやっぱり躓いたので備忘録として残しておきます。初心者の方の気づきになれば。大枠は下記の記事を参考にさせて頂きました。

[【決定版】MacでPythonを使って『機械学習』を学ぶための環境構築](https://qiita.com/yoshizaki_kkgk/items/4663148a2b3ca078ddbc)

#OSのアップデート
OSがSierraだったので最新のMojaveをインストール。これがエラーの原因だった気がしますが、どうせなら最新OSを載せておきたかったので。
OSバージョンは10.14

#Homebrewのupdate
Homebrew(パッケージ管理ツール)は以前使った事があったのでUpdateしようと思ったらそこでまずエラー。

OSをMojaveにしたのが原因だったのか分かりませんが、homebrewのupdateのエラーは[再インストールで解決しました](https://qiita.com/hayate00/items/0aa4aa5b51235267aefd)。

Homebrewって何？を詳しく知りたい人は下記が分かりやすかったです。

[homebrewとは何者か。仕組みについて調べてみた](https://qiita.com/omega999/items/6f65217b81ad3fffe7e6)

ちなみにHomebrewは下記でインストールできます。

```
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

#pyenvのインストール
pythonは2系と3系があってバージョンもいっぱいあるのでpyenvをインストールしておくと切り替えが楽にできるらしいです。こちらを参考にさせて頂きました。
[Pyenvの使い方](https://qiita.com/mogom625/items/b1b673f530a05ec6b423)

```
$ brew install pyenv
$ pyenv install 3.6.6
```
pyenv installでエラー。このエラーにはかなりの時間悩まされてしまいました。結局下記記事を参考におまじないを入力。

[pyenv install 3.6.6でエラーが発生する。](https://medium.com/@digitalnauts/pyenv-install-error-mac-dcbd28fdc9db)

```
CFLAGS="-I$(brew --prefix readline)/include -I$(brew --prefix openssl)/include -I$(xcrun --show-sdk-path)/usr/include" \
LDFLAGS="-L$(brew --prefix readline)/lib -L$(brew --prefix openssl)/lib" \
PYTHON_CONFIGURE_OPTS=--enable-unicode=ucs2 \
pyenv install -v 3.6.6
```

上記をそのまま実行したら解決しましたが、コードを見ても何をやってるか分からず。。無事インストールできたのでよしとします。ありがとうございました！！

#pythonの切り替え

```
$ pyenv versions
* system (set by /Users/hiat/.pyenv/version)
  3.6.6
```
この状態だとmacにインストールされてる2系がオン。

```
$ python --version
  Python 2.7.10
```
3系に切り替え。

```
$ pyenv global 3.6.6
$ versions
  system
* 3.6.6 (set by /Users/hiat/.pyenv/version)
$ python3 --version
  Python 3.6.6
```
やっとpython2系と3系の切り替えができるようになりました。

#Atomのインストール
pythonのエディタは何を使えばよいのかというは初心者しては迷いどころですが、[参考にしたチュートリアル](https://qiita.com/yoshizaki_kkgk/items/4663148a2b3ca078ddbc)通りAtomをインストール。

これは多分自分だけだと思いますが、Atomの中で「terminal」を使えるようにするべく「Atom」→「Preferences」→左下の「Install」に「terminal」と打ち込んでも「platformio-ide-terminal」が検索結果に出てこない！となりました。

<img width="1020" alt="スクリーンショットatom.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/256640/0da520c2-3b5c-0746-e02c-e6ff3dd28a69.jpeg">

Serching for 〜の検索結果を全部右の×ボタンで消していったら下から出てきました。ググってみましたが同じこと思った人がいないようで恥ずかしかったです。。Atomでも無事terminalが使えるようになりました。

#まとめ
ここまでエラーで悩んだ時間を含めて5時間以上はかかった気がします。OSのバージョンを上げると予期せぬエラーになることが分かりましたが、環境構築楽しかったです。ガシガシpython書いていこうと思います。
Vue.jsで階層が深い連想配列の中身をv-forでselect/optionで表示する

連想配列で持たせたデータをv-forで取り出したいときは、こんな感じにする。
hoge.fugasには、apiでデータを取得したものが入っている想定。

```html:index.html

<select>
    <option v-for="fuga in hoge.fugas" v-bind:value="fuga.key">
        {{fuga.value}}
    </option>
</select>
```

```javascript:vue.js

var vue = new Vue({
    data: {
        hoge: {
            fugas: []
        }    
    }
})
```

Vue.js
フォーム入力バインディング

https://jp.vuejs.org/v2/guide/forms.html
Ada言語 1日目 Hello, World

#環境
 - OS : Ubuntu 18.04
 - コンパイラ : gcc 7.3.0
             　GNAT 7.3.0
 - リンカ : GNATLINK 7.3.0
 
#ソース
```Ada:main.adb
with Ada.Text_IO;
use Ada.TextIO;

procedure main is
	
begin

	Ada.Text_IO.Put_Line("Hello, World");
	
end main;
```

#コンパイル -> リンク -> 実行
` gcc -c main.adb `
` gnatbind main `
` gnatlink hello `
` ./main `

#今後の予定
開発環境や文法について学習する。

#日記一覧へ
[Ada言語を習得する日記一覧](https://qiita.com/C_Assembly/items/50a0f9d8542679d92ea8)
[リーダーシップに必要な要素]

1.人格
⑴誠実であること
⑵勇敢であること
⑶組織の利益を常に考えること

2.知能
※学歴は知能の高低を一切保障しない

⑴自主性
⑵独創性
⑶問題解決能力
⑷集中力
⑸感情制御知能
⑹精神力

3.行動
⑴計画の策定
⑵リーダーはプロジェクト全体を包括的に指導する立場にあり、あらゆる事項について注意を払わなければならない。
⑶プロジェクト終了後に問題点を発見して再編する場合もリーダーの分析力や洞察力が求められ、企業活動に大きな影響を及ぼす。
GTFSのデータをGoogle Mapに表示する

#前書き
前回の「リアルタイムGTFS」をGoogleマップに表示するの続きです。
[前回はこちら→](https://qiita.com/hiroshi_toyoshima/items/ecac6d074390544b6e9e)

あと、[Monacaのアドベントカレンダー](https://adventar.org/calendars/3073#list-2018-12-01)にも載せさせていただいています。

間違っている記述や改善案など、いただけたら幸いです。
（間違っていることを生徒に教える可能性があるため、常に不安です）

#環境など
前回のものをベースにすることを前提にしています。
が、無くても今回のものは表示できると思います。（CSVファイルを読み込むだけなので）

#準備
本来は、プログラムを使って自動的に
　①GTFSのZIPファイルをダウンロードして
　②展開し
　③中に入っているCSVを読み込む　を行うことが望ましいと思いますが、

今回は①と②の作業を手作業で行います。

今回も、[宇野バスさん](http://www.unobus.co.jp/)のデータを利用していきます。


1. データのダウンロード
[宇野バスさんのデータ](http://www3.unobus.co.jp/opendata/)よりzipファイルをダウンロード
2. 展開したデータをフォルダに移動

www  ―┬― 
　　　 ├― 
　　　 ├― data ―┬― agency_jp.txt
　　　　　　　　　├― agency.txt
　　　　　　　　　└― ...

#今回やること

マッピングするのはバス停の位置を表示します。
CSVファイル（Jsonも）の読み込みとGoogle Map上にマッピングします。
（内容が薄いですが、授業の中では使うことが多いので）
経路検索は、続きに書きます。~~（Google Directions APIを使う予定）~~
[→書きました](https://qiita.com/hiroshi_toyoshima/items/ff96a21dbf33971b1415)（この薄い内容じゃ申し訳なさすぎて急遽書きました。途中ですが…）

最初から経路検索で[Monacaのアドベントカレンダー](https://adventar.org/calendars/3073#list-2018-12-01)に書けばよかった…

#1.GTFSを読み込む

###CSVファイルとして読み込むVer.

```javascript:sample.js
var csvList = [];
const $ = require('jquery');

$.ajax({
  /* 取得するファイルを指定 */
  url: './data/unoBus/stops.txt',
  /* データの取得に成功した場合以下の処理 */
  success: function(data) {
    var tempList = data.split('\n');
    for (var i = 0; i < tempList.length; i++) {
      csvList[i] = tempList[i].split(",");
      console.log(csvList[i][2]);
    }
  }
});
```
###Json形式で読み込むVer.

現在作成中

#2.読み込んだGTFSデータをマッピング

```
var csvList = [];
const $ = require('jquery');
```
の後ろに追記

```javascript:sample.js
var marker=[];
```

CSVを読み込んだFor文の後ろに追加

```
for (var i = 0; i < tempList.length; i++) {
      csvList[i] = tempList[i].split(",");
      console.log(csvList[i][2]);
```

```javascript:sample.js
// マーカー毎の処理
      var markerLatLng = new google.maps.LatLng(csvList[i][4], csvList[i][5]); // 緯度経度のデータ作成
      marker[i] = new google.maps.Marker({ // マーカーの追加
        position: markerLatLng, // マーカーを立てる位置を指定
        map: map, // マーカーを立てる地図を指定
        title: csvList[i][2],
        icon: {
          url: 'img/icon_bus_stop.png',
          scaledSize: new google.maps.Size(40, 40)
        }//マーカーのアイコンを指定
      });
```
```
 }
});
```
[発想技法の定義]

1.ロジカルシンキング
 垂直思考と呼ばれ、論理的な要素分解で整理する。

 ⑴演繹法
 個別の事実と一般的に通用しているインプットにして結論を予見する

 ⑵帰納法
 個別の事実を集めて結論を予想する

2.ラテラルシンキング
 水平思考と呼ばれ、内外の比較から整理する考え方。

 ⑴類推思考
 要素や性質が近似していることに着目する類推と概観が近似している類比によって分析する

 ⑵仮説思考
 途中で誤りに気づいたら別の仮説を立て、トライアンドエラーで方向転換する

3.クリティカルシンキング
 探究思考と呼ばれ、本質的視点で整理するやり方

 ⑴弁証法
 問題が置かれている状況や前提を掘り下げて分析し、各案の対立を通して新しい案を考える

 ⑵背理法
 目の前の案が抱える問題、欠点、矛盾を明確にした上で否定し、代替案の妥当性を消去法で示す
JavaScriptでGoogleMapAPIを使って、経路検索の結果を地図上に表示してみる

#はじめに

[リアルタイムGTFSを使ったアプリケーション](https://qiita.com/hiroshi_toyoshima/items/ecac6d074390544b6e9e)の作成の中で、使ったコードを
まとめています。

###また今回の経路検索の表示が「GTFS」を何が関係があるかというと
各バス運行事業さんが「GTFS」のデータをGoogleさんに提供していることで
実現しています。
（GoogleMapでバスを使った経路検索ができることが前提ということです）

#やること

２点間のルート検索をGoogleさんにしてもらい、それをGoogle map上に
ただ表示するだけです。

経路を案内するや、ユーザー指定で検索をするは次の課題としています。

#さっそく

GTFSアプリでは、[宇野バスさん](http://www.unobus.co.jp/)のオープンデータを使っているので
２点間の経路検索は「岡山駅」→「岡山市役所」です。

GoogleMapの描画などはできている前提で書いています。

```javascript:sample.js
var directionsService = new google.maps.DirectionsService;
var directionsRenderer = new google.maps.DirectionsRenderer;

directionsService.route({
    origin: new google.maps.LatLng(34.666608, 133.918170), //岡山駅
    destination: new google.maps.LatLng(34.655539, 133.919745), //岡山市役所　　緯度経度でなくても名称でも検索可
    travelMode: google.maps.TravelMode.TRANSIT
}, function(response, status) {
    console.log(response);
    if (status === google.maps.DirectionsStatus.OK) {
        // ルート検索の結果を地図上に描画
        directionsRenderer.setMap(map);
        directionsRenderer.setDirections(response);
    }
  });
```
コメントでも書いてありますが、スタート（origin）とゴール（destination）は
「岡山駅」「岡山市役所」でも検索できます。
Googleさん素晴らしい。

また、
`travelMode: google.maps.TravelMode.TRANSIT`の「`TRANSIT`」は
DRIVING,TRANSIT,WALKING,BICYCLINGに変更して検索もできます。

#最後に
私自身の検索力や理解力によって、
力技の部分も多分にあり、さらにコードが汚いなどがあると思います。

訂正をかけていきますので、アドバイスもお願いします。
[設計書の書き方]

1.システム設計者の義務
⑴お客様のニーズを掴み取ること
⑵お客様へ解決策(ソリューション)を提供すること
⑶開発担当へ業務仕様をプログラムに実装できるように翻訳してあげること

2.正しい設計書の定義
 ⑴分かりやすい
 ⑵漏れがない
 ⑶間違いがない

3.設計者として更なる高みへ
 ⑴将来のリスク低減を考える
 ⑵費用対効果を考える
 ⑶｢残り5%の考慮漏れ｣を絞り出す
  ア.ひらめきを大切にする
  イ.問題意識をもつ
  ウ.仕様検討記録を作成する

4.正しい設計書の書式
 ⑴一文あたりの文字数は50文字以内
 ⑵選択肢の数は最大7個以内
 ⑶複数の解釈を許容する表現は禁止

＊具体的な書き方はこちらが参考になる
https://qiita.com/y-some/items/90651c1e27f7798f87c6
機械学習論文読みメモ_145

[Bayesian Coreset Construction via Greedy Iterative Geodesic Ascent](https://arxiv.org/abs/1802.01737)
Bayesian inferenceは曖昧さを明確に扱うフレームワークとして有用である。
しかし実際の事後分布計算などにおいては、スケーラビリティのために近似計算
が行われる事が多く、その有用性を活かしきれていない。
本論では、従来研究であるBayesian coreset constructionが同じ問題を抱えている
事をまず示す。
Bayesian coreset constructionはlog likelihoodが選ばれたサンプルの重み付け和近似できるような
サンプルを探す問題である。
従来研究では、log-likelihoodをスケーリングする必要があり、それが最適性を妥協する
原因になっていた。
本論ではこの手法の問題点を解決するために、log-likelihood optimalityの元
スケールさせられるようなBayesian coreset consturctionの手法を提案する。
greedy iterative geodesic ascent (GIGA)と呼ばれるこの手法は
coreset sizeに対してgeometric decayのオーダーで事後確率近似誤差を
減らす事が出来る。
ＧＩＧＡはlog-likelihoodをスケーリングさせる問題は最適な形で解析的に解く。
それと別な形で残るhyperspherical manifold上に与えられた問題に対して。
一点ずつgreedyにcoresetを選んでいくアルゴリズムを用いている。

[Efficient Neural Architecture Search via Parameters Sharing](https://arxiv.org/abs/1802.03268)
高速で効率的な自動モデル探索手法としてEfficient Neural Architecture Search (ENAS)を提案する。
ＥＮＡＳ内のコントローラモデルはネットワークの計算グラフに対して最適なsubgraphを探索する。
この探索はsubgraphがvalidation setにおける報酬が最大化されるように勾配法により学習される。
同時に選択されたsubgraphはcross entropy lossを最小化するよう学習される。
この時subgraphと元のネットワークの間でパラメータが共有されているため高速に処理できる。

[Batch Kalman Normalization: Towards Training Deep Neural Networks with Micro-Batches](https://arxiv.org/abs/1802.03133)
batch normalizationはdeep learningの性能向上のために欠かせない構造である。
しかしこの構造はバッチサイズが小さい場合に効果を発揮できない。
本論ではこの問題を解決するための手法としてBatch Kalman Normalization (BKN)を
提案する。
この手法では、normalizationをネットワーク全体に対して行うことを考え、
特に各層に対してそれ以前の層の情報を取り入れながらnormalizationを行う。
この手法はKalman filteringの手法にモチベートされている。
ＢＫＮを用いる事でより高速な学習の収束が期待できる。
また学習されたモデルの性能も向上させる事が出来る。
【初心者向け】Unixのリダイレクションについて

## Unixのリダイレクション機能とは
Unixのシェルはコマンドの入出力を切り替える機能を持っている。
これがリダイレクション。

デフォルトでは標準入力はキーボード、標準出力は画面に割り当てられているが、
これを変更することができる。

# 標準出力をファイルにリダイレクトする
以下の書式を使えば標準出力をリダイレクトできる。

```
【コマンド】 > 【ファイルのパス】
```

### 例)今月のカレンダーをcal.txtに書き出す
例として、今月のカレンダーをcal.txtというファイルに書き出します。

```
$ cal > cal.txt
```
cat で確認してみる

```
$ cat cal.txt
```

結果はこう

```:cal.txt
   December 2018
Su Mo Tu We Th Fr Sa
                   1
 2  3  4  5  6  7  8
 9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
```

### 「>」の注意点
既に存在するファイルに対してリダイレクションを行うと、そのファイルの中身が警告なしで消去されてしまう。(上書きされるので、元の内容が消えてしまう。)

では、では消去させずに追記させるにはどうしたら良いか？
答えは「>>」を使う。

## ファイルに追加する「>>」
依存のファイルを消去せずに、内容を追加するには「>>」を使う。
なお、存在しないファイルに対して「>>」を使用すると新たなファイルを生成する。
つまり存在しないファイルに対する「>」と「>>」の働きは同じ。

### github使ったことある人はみんな見たことあるハズ
実はこれgithubでリポジトリ作成した時に、表示されるんです。

```
echo "# test" >> README.md   // ←これ
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/USER_NAME/REPOSITORY_NAME.git
git push -u origin master
```

一行目の`echo "# test" >> README.md`これは正にファイルに追加する「>>」これです。
出力の方はこの辺にして、入力いきます。

# 標準入力をファイルにリダイレクトする
以下の書式を使えば標準入力をリダイレクトできる。

```
【コマンド】 < 【ファイルのパス】
```
と言っても、これの使用機会は少ない。
なぜならコマンドの引数でファイルを指定できるので、わざわざ使う必要がないから。
例えばこれは同じ結果になる。

```
// catコマンドの引数を使用
$ cat cal.txt

// リダイレクション機能を使用
$ cat > cal.txt
```

# 標準出力と標準入力を同じファイルにリダイレクト出来ない
標準出力を入力と同じファイルにリダイレクトすると、中身が消える。
同じファイルに上書きしようとしてこんな操作をしてしまうと中身が消えてしまう。

```
$ cat cal.txt > cal.txt
```

# リダイレクションのまとめ
その他もまとめるとこうなる。

| 記号 | 説明 |
|:-----------|:------------|
| > | 標準出力のリダイレクション(ファイルが存在していれば上書き) |
| >> | 標準出力のリダイレクション(ファイルが存在していれば追加) |
| < | 標準入力のリダイレクション |
| 2> | 標準エラー出力のリダイレクション(ファイルが存在していれば上書き) |
| 2>> | 標準エラー出力のリダイレクション(ファイルが存在していれば追加) |
| >& | 標準出力と標準エラー出力を同じファイルにリダイレクション |

#### 参考
Linuxをあまり理解せずに使って分かった気になってたので、以下の本で体系的に再学習しています。(アフィ貼ってないです。)

- [6日間で楽しく学ぶLinuxコマンドライン入門　](https://www.amazon.co.jp/6%E6%97%A5%E9%96%93%E3%81%A7%E6%A5%BD%E3%81%97%E3%81%8F%E5%AD%A6%E3%81%B6Linux%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%83%A9%E3%82%A4%E3%83%B3%E5%85%A5%E9%96%80-%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%AE%E5%9F%BA%E6%9C%AC%E6%93%8D%E4%BD%9C%E3%82%92%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%91%E3%82%88%E3%81%86-%E3%83%8D%E3%83%83%E3%83%88%E6%99%82%E4%BB%A3%E3%81%AE%E3%80%81%E3%81%93%E3%82%8C%E3%81%8B%E3%82%89%E5%A7%8B%E3%82%81%E3%82%8B%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%EF%BC%88NextPublishing%EF%BC%89-%E5%A4%A7%E6%B4%A5-%E7%9C%9F-ebook/dp/B00WE7XZ68/ref=sr_1_5?ie=UTF8&qid=1544313088&sr=8-5&keywords=linux)
JUnit5とデフォルトメソッドでテストケースをMixinする

テストランナーにJUnitを使ってE2Eテストを実装する際、画面やAPIごとにテストクラスを分割しました。このときに複数のテストクラスに共通のテストメソッドを定義する方法を検討しました。

#### (1) 継承関係を使う

共通のテストメソッドをテストクラスの親クラスに定義することで、各テストクラスの実行時に親クラスのテストメソッドも実行される。

各テストクラスに特有の振る舞いをインターフェース（もしくは親クラスの抽象メソッド）として定義しておき、共通テストメソッドではこのインタフェースを使ってテストを実装する。

```java
public abstract class CommonTestA {
	// テストクラスに特有の振る舞いを定義ための抽象メソッド
    abstract SomeObject doSomething();
    
    @Test
    public void commonTestX() {
        // doSomething()を使って共通のテストケースを実装する
    }
}
```

```java
// このテストクラスを実行する際にCommonTest.commonTestX()も実行される
public class TestClass extends CommonTestA {
    // テストクラスに固有のテストケースを実装する
}
```

この方法では、Javaの継承の制約により1つのテストクラスは1つの共通テストクラスしか継承できないため、共通テストクラスを複数作りたいときに問題となる。

#### (2) デフォルトメソッドを使う

Java 8で導入されたインターフェースのデフォルトメソッドを使うことで (1) の問題を回避できる。（インターフェースは1つのクラスに複数実装できるため。）ただし、JUnit 4以前ではデフォルトメソッドは実装クラス実行されないため、JUnit 5を使う必要がある。

```java
public interface CommonTestA {
    SomeObject doSomething();

    @Test
    default void commonTestA() {
        // 共通テストメソッドをデフォルトメソッドとして定義する
    }
}
```

```java
// 1つのテストクラスに複数の共通テストインターフェースを実装できる
public class TestClassX implements CommonTestA, ComonTestB {
	// ...
}
```
AMAZON.SearchQueryでビルドが通らない場合のTips

ごきげんよう

この記事は
**「するめごはんのVUI・スマートスピーカー Advent Calendar 2018」**
の9日目の記事です。

みなさん、SearchQuery使ってますか？

これを使うとユーザーから何かしら話しかけられ、他のIntentに分類できなかった場合、
このSearchQueryが実装されているIntentに割り振られます。

つまり、自由な単語・発話をSearchQueryに対応させたいという発想になりますが、ビルドが通らない場合あります。
今回はそれを **無理やり通す** 方法について記載します。

もちろん、各自の自己責任にて。


#一般的？の実装方法

SearchQueryはこの「なんでも該当」という強さから、一般的に他の単語と組み合わせて実装します。

例えば以下のように。

**●●●と、サーチクエリ** と話しかけれた際の●●の部分に用います。

![とサーチクエリ.png](https://qiita-image-store.s3.amazonaws.com/0/67398/7083bc28-4961-2313-0c52-393220acf030.png)



#ビルドに通らない場合

ただ、上記のような、「●●とサーチクエリ」のようにやりたくはなく、SearchQueryのみで実装したい場合、ビルドが通らない場合があります。


![ビルドエラー.png](https://qiita-image-store.s3.amazonaws.com/0/67398/df247a76-53ee-1d74-b138-4e31827b7872.png)


エラーメッセージは
Sample utterance "{searchQuerySlot} " in intent "SearchQueryIntent" must include a carrier phrase. Sample intent utterances with phrase types cannot consist of only slots.エラーコード: MissingCarrierPhraseWithPhraseSlot


自由度が高すぎて制御されているのではないかと考えています。
なので通常は他の具体的な話しかけ方と組みあわせて使うべきなのでしょう。

#それでもビルドしたい場合

他のフレーズは一切いれず、何がなんでもSearchQueryのみ実装して、想定していないユーザーの発話はすべてここに集約したいという場合も存在します。

その場合、以下のようにするとビルドに通ります。

![半角スペース.png](https://qiita-image-store.s3.amazonaws.com/0/67398/ce6dd454-7279-4258-1980-58195bc5c95e.png)

さて、どうやったでしょうか。

答えは  **半角スペース + SearchQuery** です。

こうすると他のIntentやSlotに割り振られない場合、このように作成したSearchQueryに無理やり分類させることができます。


#ご利用は自己責任で

おそらくこれは、不具合に近いバグのような気がします。
仕様といえば仕様なのでしょうが。。。

ともあれ、ユーザーかどのように話しかけられたのかを丸々取得したい等の場合は、このような技で切り抜けることが一応できます。

実際には他のフレーズを組み合わせるべきだとは思いますが、このようなやり方も可能ではあるということを記載してみました。


本日は以上です。
pushdとpopd

# pushdとpopd
シェルに`pushd`と`popd`というコマンドがあります。
`pushd <dirname>`はディレクトリをスタックに入れる、`popd <num>`はスタックからディレクトリを取り出してそのディレクトリに`cd`するというコマンドです。

ディレクトリ移動が多い場合に便利です。

## 使い方
カレント・ディレクトリは/tmp/とします。

```bash
root@e6ff454b8d0d:/tmp# pwd
/tmp
```

/opt/ディレクトリを`pushd`します。

```bash
root@e6ff454b8d0d:/tmp# pushd /opt
/opt /tmp
root@e6ff454b8d0d:/opt# pwd
/opt
```

すると`/opt`ディレクトリに移動し、前カレント・ディレクトリ`/tmp`の上にpushされます。
`dirs`でスタックを確認することもできます。`dirs -v`で連番が表示されます。

```bash
root@e6ff454b8d0d:/opt# dirs
/opt /tmp
root@e6ff454b8d0d:/opt# dirs -v
 0  /opt
 1  /tmp
```

`popd`でスタックからpopして（消して）、前のディレクトリに移動します。

```bash
root@e6ff454b8d0d:/opt# popd
/tmp
root@e6ff454b8d0d:/tmp# dirs -v
 0  /tmp
```

## たくさん`pushd`して`popd`してみる
```bash
oot@e6ff454b8d0d:/tmp# pushd /opt/
/opt /tmp
root@e6ff454b8d0d:/opt# pushd /mnt/
/mnt /opt /tmp
root@e6ff454b8d0d:/mnt# pushd /etc/
/etc /mnt /opt /tmp
root@e6ff454b8d0d:/etc# pushd /lib
/lib /etc /mnt /opt /tmp
root@e6ff454b8d0d:/lib# pushd /proc/
/proc /lib /etc /mnt /opt /tmp
root@e6ff454b8d0d:/proc# pushd /dev/
/dev /proc /lib /etc /mnt /opt /tmp
root@e6ff454b8d0d:/dev# pushd /home/
/home /dev /proc /lib /etc /mnt /opt /tmp
root@e6ff454b8d0d:/home# dirs -v
 0  /home
 1  /dev
 2  /proc
 3  /lib
 4  /etc
 5  /mnt
 6  /opt
 7  /tmp
```

この時点でカレント・ディレクトリは`/home/`です。
ここから`popd`していくと`/dev/ -> /proc/ -> /lib/ ...`と移動していくのですが、途中に飛ばしたいディレクトリがある場合は`popd ±num`で消すことができます。

```bash
root@e6ff454b8d0d:/home# dirs -v
 0  /home
 1  /dev
 2  /proc
 3  /lib
 4  /etc
 5  /mnt
 6  /opt
 7  /tmp
# /dev/に移動
root@e6ff454b8d0d:/home# popd
/dev /proc /lib /etc /mnt /opt /tmp
# /proc/に移動
root@e6ff454b8d0d:/dev# popd
/proc /lib /etc /mnt /opt /tmp
# +1で最初から一つ後ろの/libを消す
root@e6ff454b8d0d:/proc# popd +1
/proc /etc /mnt /opt /tmp
# -1で最後尾から一つ前の/optを消す
root@e6ff454b8d0d:/proc# popd -1
/proc /etc /mnt /tmp
# -0で最後尾の/tmpを消す
root@e6ff454b8d0d:/proc# popd -0
/proc /etc /mnt
# +0で最初の/procを消し/etc/に移動
root@e6ff454b8d0d:/proc# popd +0
/etc /mnt
root@e6ff454b8d0d:/etc# pwd
/etc
```
PHPでCSVを配列にする

## やりたいこと

```
名前,バイエル符号,等級,地球からの距離 
Sirius,α CMa,−1.46,8.6
Canopus,α Car,−0.74,310
Rigil Kentaurus,	α Cen,−0.27 (0.01 + 1.33),4.4
Arcturus,α Boo,−0.05,37
Vega,α Lyr,25,0.03 (−0.02 - 0.07var)
```
のようなヘッダー付きのCSVから本体だけを切り取って行ごとに配列に直し、

```php
var_dump($row_array);
```

すると

```php
array(4) {
  [0]=>
  string(6) "Sirius"
  [1]=>
  string(6) "α CMa"
  [2]=>
  string(7) "−1.46"
  [3]=>
  string(4) "8.6
"
}
```
となるようにしたい。

## コード
```php

<?php

// ファイルの中身を配列で取得.
$csv = file('/Users/８６３/Desktop/php_files/stars.csv');

// ヘッダーを切り取る.
$csv_header = $csv[0]; 
$csv_body = array_splice($csv, 1);

// 各行を配列に直す.
foreach ($csv_body as $row) {
  $row_array = explode(',', $row);
  var_dump($row_array);
  //　処理
}
```
## 使った関数
- [file](http://php.net/manual/en/function.file.php)
- [array_splice](http://php.net/manual/en/function.array-splice.php)
- [explode](http://php.net/manual/en/function.explode.php)
12-09 fluidsynth

https://adventar.org/calendars/3353 の9日目エントリーです。

## ソフトウェアMIDIシンセサイザー

fluidsynthはクロスプラットフォームで動作するソフトウェアMIDIシンセサイザーです。主にLinux（ALSA/Jack/PulseAudioなど）、Mac（CoreAudio）、Windows（WinMM）で動作します。音源としてサウンドフォント（sf2形式/sf3形式）を使用するので、理屈としてはサウンドフォントとして表現できるどのようなサンプリング音源であってもMIDI楽器として表現できることになります。

fluidsynthと同様にサウンドフォントを利用しているソフトウェアMIDIシンセサイザーとしてtimidity++が挙げられます。timidityのほうが歴史が長いですが、現在でもアクティブに開発されているのはfluidsynthのほうでしょう。他には最近だとwildmidiというものもあるのですが、使っているという声を見ないのでとりあえず今回はスキップします。

ソフトウェアMIDIシンセサイザーは今では音楽制作で使われる場面はあまり無いと思いますが、Roland音源ベースのWindows GS Wavetable SynthやYamaha XG Soft Synthesizerを使ってSMFファイル（`*.mid`ファイル）を再生したという人も多いのではないでしょうか。これがLinux環境になると大抵timidity++かfluidsynthになります。

fluidsynthそのものは実行可能ファイルであり主な用途は単体で実行してOS上の仮想MIDIデバイスとして登録して任意のMIDIクライアントアプリケーションから使用できるようにするものですが、ライブラリとしても使うことができます。モバイル環境ではこのアプローチで使われていることが多いようです。このエントリーでは主にこの方面で解説します。

なお、サウンドフォントについては日を改めて書きます。

## オーディオドライバー

fluidsynthはクロスプラットフォームで動作するように設計されています。これを実現しているのが、オーディオドライバーとMIDIドライバーの抽象化です。ソースツリーの中では`drivers`というディレクトリにまとめられており、`fluid_adriver.c`に既知のオーディオドライバーが、`fluid_mdriver.c`に既知のMIDIドライバーが、それぞれ登録されています。

もし現在サポートされていないオーディオAPIのサポートを追加しようと思ったら、専用のドライバーを作成して、fluidsynthのソースコードに組み込むことで実現できます。筆者はAndroid環境用にOpenSLESとOboeのサポートを追加したバージョンを[公開しています](http://github.com/atsushieno/fluidsynth-fork/tree/oboe-2/)（本家にもpull requestを送ってあるのですが、ビルドが複雑怪奇になっているのでまだ取り込める状態にはなっていません）。

OS固有のオーディオI/OとMIDIデバイスドライバーとしての登録処理以外は、ほぼクロスプラットフォームで実現できるコードです。スレッド処理などにはglibのgthreadが（今のところ）用いられています。glib依存は割とビルド過程で面倒なので、筆者としては将来どうにかならないかなあ…とも思っているところです…

fluidsynthはOS環境次第でMIDIデバイスとしても利用できます。ALSA MIDIやCoreMIDI、WinMMはサポートしているようです。

## libfluidsynth API

fluidsynthの面白いところは、Cで実装されていて、そのAPIも公開されているということです。CでAPIが公開されているライブラリは、他の言語のバインディングが比較的容易に作成できます。libfluidsynthにはPythonやRubyやHaskellのバインディングが存在しているようです。筆者もnfluidsynthというC#のバインディングを[公開しています](https://github.com/atsushieno/nfluidsynth)。

libfluidsynthでは、内部処理の割と詳細な部分が公開されています。たとえば`fluid_synth_noteon()`という関数を使うと、引数で指定したチャンネルにMIDIノートオンのメッセージを送ることができます。

これを応用すると、MIDIメッセージを処理するライブラリで、その出力先にlibfluidsynthを使うこともできます。筆者はmanaged-midiというクロスプラットフォームのMIDIライブラリをC#で作成しているのですが、この出力先にALSAやWinMMやCoreMIDIだけでなくFluidsynthを使用した使用例も作成して、先のnfluidsynthに[含めています](https://github.com/atsushieno/nfluidsynth/blob/master/NFluidsynth.MidiAccess.Shared/FluidsynthMidiAccess.cs)。
Debian Linuxを使ってハードディスクを完全削除

## はじめに
これまでに不要になったパソコンのハードディスクを完全消去します。

## DebianLive版の作成
今回、廃棄するPCはMacbook(2008 late)Blackモデルです。2012年頃まで現役で使用していましたが、その後ChromiumOSを入れたり、子供用として待機していました。
久しぶりに起動してみたら、だいぶ画面が暗くなっていることに気づき思い切って廃棄することにしました。

そこでまずはLive版Linuxの作成です。
今回は古い2GBのSonyのUSBメモリを使用しました。
[Debain9.6はここからダウンロードしました。](https://www.debian.org/CD/live/)

ダウンロードしたISOをimgに変換します。

``` bash
hdiutil convert -format UDRW -o /Path/to/debian_img/debian96.img
 /Path/To/Downloads/debian-live-9.6.0-amd64-xfce.iso
```

なぜか.dmg拡張子がつくので、リネームします。

```bash
mv /Path/to/debian_img/debian96.img.dmg /Path/to/debian_img/debian96.img
```

ここまでで作成したいDebianのイメージの作成は完了です。次にUSBメモリを挿してターゲットとなるUSBメモリを決めます。

```bash
diskutil list
```

Nの部分は数字です。

```bash
sudo dd if=/path/to/save/name.img of=/dev/rdiskN bs=1m
```

2GBのUSBメモリに書き込みます。私のMacbookproでは５分程度で終わりました。

## Live版Debianの起動
MacbookのOptionボタンを押しながら起動します。私はブートドライブの選択画面になるまで、Optionボタンを押し続けました。

## 接続されているドライブの確認
起動したら、接続されているドライブの確認です。

```bash
lsbk 
```

接続されるドライブの一覧が表示されます。

## 内蔵SSD(64GB)の完全削除
乱数を3回書き込み完全に消去とするそうです。
流石に3回書き込めば、データの復元は難しそうですね。

``` bash
sudo shred -n 3 -v /dev/sda
``` 

目安ですが64GBのSSDの場合は、10分程度で終わりました。

## 外付けHDD(500GB)の完全削除
NasneのHDDも取り外したので、こちらも削除します。

``` bash
sudo shred -n 3 -v /dev/sda
``` 

こちらは20時間程度かかっています。

## 最後に
途中でDebianの画面が黒くなってしまいます。その時はIDとPasswordで画面ロックを解除してください。
私の場合は1回ではうまくいかず2回連続でロック解除したら、画面が表示されました。

|ID|Password|
|---|---|
|user|live|
【AWS】IAM ロールのパスをルート(/)以外にする

# はじめに
[こちらのサイト](https://docs.aws.amazon.com/ja_jp/sagemaker/latest/dg/ex1-prepare.html) を参考に Sagemaker を触ってみようとしたところ、
トレーニング部分で `sagemaker unable to assume role` という
エラーが発生しました。

結論としては下の図のようにSagemakerにアタッチするロールのパスを
`/service-role/` に必要があったのですが、その設定がコンソール上から
出来ず、aws cli で行う必要がありました。

同じようなことがあったときに迷わないようにメモしておきます。

<img width="693" alt="キャプチャ.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/78126/aefe1254-3f90-ada4-1f66-fa5fe5f16337.png">

# 設定方法
今回作るのはSagemakerのサービスロールなので、こういうファイルを作成します。

```bash
$ cat sage.json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "Service": "sagemaker.amazonaws.com"
            },
            "Action": "sts:AssumeRole"
        }
    ]
}

```
以下のコマンドを実行すれば、パスが `/service-role/` のロールが出来ます。

```bash
$ aws iam create-role --role-name [ロール名] --path /service-role/ --assume-role-policy-document file://sage.json
{
    "Role": {
        "Path": "/service-role/",
        "RoleName": "[ロール名]",
        "RoleId": "XXXXXXXXXXXX",
        "Arn": "arn:aws:iam::XXXXXXXX:role/service-role/[ロール名]",
        "CreateDate": "2018-12-08T19:20:28Z",
        "AssumeRolePolicyDocument": {
            "Version": "2012-10-17",
            "Statement": {
                "Effect": "Allow",
                "Principal": {
                    "Service": "sagemaker.amazonaws.com"
                },
                "Action": "sts:AssumeRole"
            }
        }
    }
}
```

後は AmazonSageMakerFullAccess など必要なポリシーをアタッチすればOK。

# 注意
json ファイルの指定には、`file://sage.json` のようにする必要があります。
`file://` 無しだとエラーが返されました。

```bash
$ aws iam create-role --role-name TestRole --path /service-role/ --assume-role-policy-document sage.json

An error occurred (MalformedPolicyDocument) when calling the CreateRole operation: This policy contains invalid Json
```
CSS gridでmedia queryを使わずにbootstrapのようなグリッドシステムを再現する

# はじめに
今日は、これから先使えそうな[CSS grid](https://qiita.com/kiyc/items/4fa3a52ff3dc95d44fbc)をみてましょう。
Bootstrapの[グリッドシステム](https://getbootstrap.com/docs/4.0/layout/grid/)はかなり有名で説明は多分いらないと思いますが、今日はそのグリッドシステムを再現してみます。

# コード
早速ですが、まずコードをみてみましょう。

```css
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
```

たったの２行で、グリッドカラムをできるなんてすごいでしょう。

## 説明
1行目の`display: grid`は、Flexboxの`display: flex`と同じようにCSS Gridを有効するために書く必要があります。

2行目は少し複雑ため、もう少し細く分けて説明します。

`grid-template-columns`：列のレイアウトを定義するルールです。

`repeat([何回], [列幅])`：CSS grid限定な関数で、同じ列サイズを複数で作りたいときに使う関数です。

```css
.wrapper {
  /* 以下の行の意味を表す */
  grid-template-columns: 10px 10px 10px 10px 10px;
  grid-template-columns: repeat(5, 10px);
}
```

`auto-fill`：数字を指定する以外、`auto-fill`を指定したらブラウザの幅にそって出来るだけ指定した列幅を詰めます。
例として、

* ブラウザ幅：860px
* 列幅：100px
* 列の数 = `(int)860 / 10 = 8`

`minmax(min, max)`：もう一つのCSS grid専用関数が、グリッド幅か高さの最小と最大な値が指定できます。

全部を合わせると、`repeat(auto-fill, minmax(120px, 1fr))`は
**できるだけ、同じサイズなカラムを詰め込んで、でも幅は少なくても120pxにして**
という意味です。

# 実例
Codepenで実例を作ってみました。
https://codepen.io/adwinying/full/RqmPQJ

# まとめ
CSS gridは、IEが対応していないので、本番に使うのはまだオススメできません。
しかし、今後CSS gridで何かできるのか期待しててワクワクします。😻
モナドを理解するのが難しい理由

### [30分でわかるJavaScriptプログラマのためのモナド入門](https://kentechdoc.blogspot.com/2018/12/30javascript_4.html)
の冒頭部分のみの転載です。

記事を読んで興味深かったので、著者の岡部氏の許可を得て転載しています。[オリジナル記事の全文](https://kentechdoc.blogspot.com/2018/12/30javascript_4.html)は分量も多く、モナドを理解するのが難しい理由を克服すべく初心者も理解しやすいように書かれており、内容が充実しているので、オススメです。

## モナドを理解するのが難しい理由

- **数学と用語問題。**モナドの理論的基盤として圏論があるのは事実。理論的基盤がしっかりしているのはプログラミングという数学的作業において歓迎すべきことではある一方で、他方そのため一般的なプログラマにとってはまず用語に馴染みがない。歴史的に、圏論ベースのモナドを理論から関数型プログラミングに応用されていく過程では、実際、先駆者の間でさえ紆余曲折があったのだが、学習者へは馴染みのない用語を伴って、いきなり高度な数学的概念全開で天下り的に提示されてしまうことが多い。わかっている人、そもそも実用性以上に数学性、理論的側面に興味がある人にとっては知的好奇心を掻き立てられるトピックではあるが、そうでないプログラマにとっては「難しい、とっつきにくい、学習コストが大きすぎて実用性もよくわからない」となることが多い。「わからないの？ならとりあえず、巷の半端な解説より[Philip Wadler先生の数々の素晴らしい論文](
http://homepages.inf.ed.ac.uk/wadler/topics/monads.html)を読んだほうがいい！」という人もいるが、ほとんどの学習者にとって、そういうアドバイスをされる時点で、このアプローチは絶望的である。そもそも彼らには初学者に向けて噛み砕いて教えるつもりはない。そして、実はモナドを理解するために高度な数学の素養は不要。小中高で習った数学レベルで十分だ。

- **逆に過度に理論面を放棄した解説を読んだ結果、余計にわけわからなくなった問題。** モナド解説に限らず科学分野の一般読者向け解説記事でアルアル。比喩、例示という極めて高度な芸術的作業が不十分なため、一瞬わかったような錯覚にさせられはするが、実際はなにもわかっておらず、その後長期間に渡り理解の不整合に苦しむ羽目になる、という不幸なパターン。読者、特にプログラマは馬鹿ではないので、そういう読者の知性を愚弄する真似は努めて避けるべき。小中高レベルの数学で十分ならばちゃんと説明すればいいだけのこと。それができないというのは、説明者自身が理解していない証拠。


- **Haskellに寄りすぎ問題。**歴史的に、圏論のモナドが関数型プログラミングへ応用できることが発見され、論文が発表された際に、使用された言語はHaskellであり、関数型言語としてのHaskellの根源的なフレームワークとして積極的にモナドが導入された。そのためHaskellerにとってはモナドの理解は必須要項であり、情報交換もHaskellのSyntaxをもって活発に行われている。彼らの知識の源泉は主に[Monad - Haskell Wiki](https://wiki.haskell.org/Monad)であったり、[Haskell/圏論#モナド](https://ja.wikibooks.org/wiki/Haskell/%E5%9C%8F%E8%AB%96#%E3%83%A2%E3%83%8A%E3%83%89)であったり、[Learn You a Haskell for Great Good!](http://learnyouahaskell.com/chapters)(無料公開中)（有料日本語訳『すごいHaskellたのしく学ぼう!』）であったりして、ほとんどの場合そのHaskellで一般的な用語、Syntaxで語られる。Haskellerにとっては「モナドとはすでに手元にあるもの」であり、手元あるいは、足場となる言語を活用するための学習モティベーションも極めて高い。裏を返すと、Haskellerでないその他大勢のプログラマにとっては以上の事実は逆風となる。


- **複数の新規概念ごっちゃまぜ問題。**モナドが関数型プログラミングに応用される際、学習者にとっては。複数にわたる本来興味深いはずの新規概念があるのだが、それらはほとんどの場合整理されて説明されることはない。たとえば上記のHaskellに寄りすぎ問題により、Haskellの基本的文法とからめて天下り的に `do` とか `IO` だ、などとしょっぱなから当たり前のように言われるのだが、これはモナドを遅延評価、イベント、非同期プログラミング、FRPの概念と合わせて**応用する話**であり、モナドの概念導入段階では本来すべき話ではない。事実モナドの関数型プログラミングへの応用黎明期では、モナドによって入出力（IO）が扱える、とPhilip Wadler先生たちから提案されたのはちょっと後になってからだ。聡明な専門家の間でさえそんな感じだったのだから、IO、それから状態管理への展開はこれはこれでひとつの一大発明であって、モナドの応用シーンとして、面白い別トピックとしてわけて考えたほうがいい。しかし、「モナドが一体何に役立つのか？」という強い要請のために「ほらHaskellではIOやdoで使われてるよ」と言いたい事情もわかる。これは**Haskellに寄りすぎ問題**の弊害でもある。

これはFRPの先駆者であるConal Elliott先生もStackOverflowの[モナドの何がそんなに特別なのか？](https://stackoverflow.com/questions/16439025/what-is-so-special-about-monads)への[回答](https://stackoverflow.com/a/16444789)として似たようなことを主張している。

> (Haskellの)Monadタイプクラスへの不釣り合いなまでの大注目度合いは歴史的な幸運にすぎない。彼らはよくIOをモナドを関連づけるが、この２つは独立した有用な概念だ。(関数型プログラミングでの）IOはマジカルで、モナドはそのIOとしょっちゅう関連づけられているので、モナドがマジカルだという錯覚に陥りやすい。