OmniAICreator/Qiita-1.07M huggingface dataset:
TypeError: Cannot read property 'minify' of undefined


```
$ npm run build
```
に出たエラーについて、デフォルトの設定って楽なだけに思わぬバグが出たりするっていう対策のものです。

！！エラー内容

```

 ERROR  Failed to compile with 2 errors                                 14:59:26

 error  

js/app.365ab1d3.js from Terser
TypeError: Cannot read property 'minify' of undefined
    at minify (/usr/kame/Documents/開発/my-onsen-app/node_modules/terser-webpack-plugin/dist/minify.js:175:23)
    at module.exports (/usr/kame/Documents/開発/my-onsen-app/node_modules/terser-webpack-plugin/dist/worker.js:13:40)
    at handle (/usr/kame/Documents/開発/my-onsen-app/node_modules/worker-farm/lib/child/index.js:44:8)
    at process.<anonymous> (/usr/kame/Documents/開発/my-onsen-app/node_modules/worker-farm/lib/child/index.js:51:3)
    at emitTwo (events.js:126:13)
    at process.emit (events.js:214:7)
    at emit (internal/child_process.js:772:12)
    at _combinedTickCallback (internal/process/next_tick.js:141:11)
    at process._tickCallback (internal/process/next_tick.js:180:9)

 error  

js/chunk-vendors.decf2dc1.js from Terser
TypeError: Cannot read property 'minify' of undefined
    at minify (/usr/kame/Documents/開発/my-onsen-app/node_modules/terser-webpack-plugin/dist/minify.js:175:23)
    at module.exports (/usr/kame/Documents/開発/my-onsen-app/node_modules/terser-webpack-plugin/dist/worker.js:13:40)
    at handle (/usr/kame/Documents/開発/my-onsen-app/node_modules/worker-farm/lib/child/index.js:44:8)
    at process.<anonymous> (/usr/kame/Documents/開発/my-onsen-app/node_modules/worker-farm/lib/child/index.js:51:3)
    at emitTwo (events.js:126:13)
    at process.emit (events.js:214:7)
    at emit (internal/child_process.js:772:12)
    at _combinedTickCallback (internal/process/next_tick.js:141:11)
    at process._tickCallback (internal/process/next_tick.js:180:9)

 ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-onsen-app@0.1.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the my-onsen-app@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /usr/kame/.npm/_logs/2019-02-03T05_59_26_490Z-debug.log
```

でこれを解決してくれたリンク
https://github.com/vuejs/vue-cli/issues/3407

バグらしいので

```
$ npm i terser@3.14
```

コマンドうってとのこと。うって終わって再度

```
$ npm run build
```

無事完了！！
Reactアプリでもwebpack-bundle-analyzerでバンドルサイズを可視化する

# 概要

Reactでいろいろパッケージ入れていくと、いつの間にかバンドルサイズが肥大化してしまいます。
バンドルサイズ削減のため、どのパッケージがどの程度占めているのか可視化したいところです。

これまでCreateReactAppで作成した場合、そのままではWebPackの設定にアクセスできないため、イジェクトする必要がありました。
（イジェクトすると設定ファイルが外に出てくるので自由にできる反面、そこからのメンテは自分たちで責任を持つというトレードオフだったはず）
現在ではイジェクトなしで可視化できるようになったので、それの紹介になります。


# 読者対象

- Reactアプリでバンドルサイズをお手軽に可視化したい方。
- キャッシュが効かない時にアプリの初期表示が遅くて困っている方。


# いきなり結論

~~CreateReactAppのドキュメントに関するプルリクの最初の投稿が全てです(;^_^A
（CreateReactAppのドキュメントがあるのを初めて知ったorz）
https://github.com/facebook/create-react-app/pull/6127
CreateReactAppでサポートしたから、あとはパッケージ入れてちょっとスクリプト実行してねという話です。
執筆時点ではまだドキュメントが更新されていませんが、CreateReactApp自体にはV2時点で入ったのかな？~~

~~方法だけ知りたかった方はここまででOKです。
あとはこれに到達したまでの経緯の話になります。~~

【2019/5/11更新】
CreateReactAppのV3でwebpack-bundle-analyzerを使うための--statsオプションが削除されました。
理由は、source-map-explorerの最新版でチャンクファイルの分析もできるようになったためとのこと。
https://github.com/facebook/create-react-app/pull/6477
https://github.com/facebook/create-react-app/issues/4563#issuecomment-468017265

source-map-explorerについては、以前より公式ドキュメントに操作手順が記述されています。
https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size


# Road to 結論

## Reactアプリでwebpack-bundle-analyzerを利用できないかググる

webpack-bundle-analyzerの記事を見かけて、ちょっと入れたいなという欲求がわく。
だけど、CreateReactAppがサポートしていないときついんじゃないかという不安も・・・
ぐぐってみると、ちょっとトリッキーですが単体プログラムとして実行している方のIssuesを見つける。
https://github.com/facebook/create-react-app/issues/3518
後のコメントを見ずにやってみてたんですが、最新ではCreateReactAppのWebPackの設定ファイルの構造が変わって？動かない(;^_^A
ようやく後尾のコメントのリンクを見て、CreateReactAppがサポートしていることを理解ｷﾀ――(ﾟ∀ﾟ)――!!

## ドキュメント草案の案内通りにやってみる（設定編）

いずれ公式のここに載るはずです。
https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
だけど執筆時点ではまだ載ってないので、プルリクの草案をベースに実施します。

まずは本体のwebpack-bundle-analyzerをインストールします。

```terminal
$npm install --save-dev webpack-bundle-analyzer
```

次に解析を実行するためのコマンドをpackage.jsonに追加します。
scriptsにstart,build,test,eject等あると思いますので、それと同列に追加です。

```javascript:package.json
    "analyze": "webpack-bundle-analyzer build/bundle-stats.json",
```

これで事前準備は完了になります。簡単ですね。


## ドキュメント草案の案内通りにやってみる（実行編）

あとはコマンドを実行して可視化してしまいましょう。

素人には途中のハイフンの意味が分からないですが、考えずに打ち込む(;^_^A

```terminal
$npm run build -- --stats
```

実行が完了すると、buildフォルダにbundle-stats.jsonというファイルができています。
これが可視化のもとになるんでしょう。

```terminal
$npm run analyze
```

実行するとブラウザが立ち上がって、パッケージサイズの割合が一目瞭然になります。

![webpack解析.png](https://qiita-image-store.s3.amazonaws.com/0/310578/02cd5027-16ac-8a1b-e1b1-afcd6eb4684e.png)

画像は私の小さなプロジェクトの結果ですが、導入パッケージが少ないのでGzippedでも約100KBのfirebase-firestore.jsのサイズが目につきます(;^_^A
プロジェクトが大きいといろんなパッケージが入り乱れていると思いますので、役割のわりに大きい場合は代替パッケージ等の検討になるでしょうか？
利用頻度が少なければコード分割して、利用時のみ動的ロードに変更するとかも。


# まとめ

~~CreateReactAppを使ったReactアプリでも、今はwebpack-bundle-analyzerがすんなり使えちゃうという話でした。
公式ドキュメントが更新され、しばらく時間がたてばこの記事の役割は終えますが、それまでにどなたかの役に立てれば幸いです。
実行方法等が変更になる可能性がありますので、公式ドキュメントを最初に確認してください。~~

【2019/5/11更新】
このドキュメントはCreateReactAppのV3で使用できなくなりました。
【DataTables】DataTables with UIKit

# はじめに

UIKitでDataTablesが使えるのか調べたのでメモ
　
# 参考にしたもの

https://datatables.net/examples/styling/uikit.html

※ 2019年2月3日時点では、DataTableとUIKitの統合はまだ開発中とのことです。
　
# HTML

```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en" class="ui-height-1-1">

<head>
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
    <title>お試し（DataTables with Uikit）</title>

    <link rel="stylesheet" href="../css/uikit.min.css" />
    <link rel="stylesheet" href="../css/dataTables.uikit.min.css" />

    <script type="text/javascript" src="../javascript/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../javascript/uikit.min.js"></script>
    <script type="text/javascript" src="../javascript/uikit-icons.min.js"></script>
    <script type="text/javascript" src="../javascript/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="../javascript/dataTables.uikit.min.js"></script>

    <script>
		$(document).ready(function () {
			$('#example').dataTable({
				lengthChange: false,
				searching: false,
				ordering: false,
				info: false,
				paging: false,
				scrollX: true,
				scrollY: 500
			});
		});
    </script>
</head>

<body class="ui-height-1-1">
    <table id="example" class="uk-table uk-table-hover uk-table-striped" style="width:100%">
        <thead>
            <tr>
//以下省略
```

## 注意点

```html
    <script type="text/javascript" src="../javascript/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="../javascript/dataTables.uikit.min.js"></script>
```

この読み込みの順番が大事なようで、これが逆になったりすると
```Uncaught TypeError: Cannot read property 'defaults' of undefined```
が発生します。

以上
CLIでMapを確認する方法



CLIでlocation情報であるlat, locを指定してMap上で表示するツールを探していたのですが、なかなか見つからなかったので、なにか良いものがあったら教えてください。

一応、見つかったものを紹介します。できれば、(1)lat,locでqueryできること、(2)google mapで拡大、縮小できることが条件なんですけど、一方しか見つかりませんでした。

 ![](https://raw.githubusercontent.com/mba-hack/images/master/cli_mapscii_01.png)

### blessed-contrib:map

```sh
# とりあえずサーバー情報を引き出してみる
$ whois example.com
$ nslookup exmaple.com
8.8.8.8
# 仮にipが8.8.8.8だったとする, サーバーのおおよその位置をblessed-contribを使って世界地図上で表示してみる
# https://github.com/yaronn/blessed-contrib
$ git clone https://github.com/yaronn/blessed-contrib.git
$ cd blessed-contrib
$ vim examples/map-query-location.js
```

```node:blessed-contrib/examples/map-query-location.js
var blessed = require('blessed')
  , contrib = require('../')
  , screen = blessed.screen()
  , map = contrib.map({label: 'World Map'})
  , loc = process.argv[2]
  , rLoc = loc.split(",")
    
screen.append(map)
map.addMarker({"lat" : rLoc[0], "lon" : rLoc[1], color: "red", char: "X" })

screen.render()
```

nodeのblessed-contribに触発され、golangやrustで書かれたものもあるみたいです。これらを使ってcli toolを書くと便利そう。

https://github.com/gizak/termui

https://github.com/fdehau/tui-rs



### mapscii

```sh
# https://github.com/rastapasta/mapscii
$ sudo npm install -g mapscii
$ mapscii
```

...こちらはqueryできない
ポケットコンピュータ PC-G850VS を最近のマイコンと接続する

# ポケコンを最近のマイコンと接続する

ポケコン PC-G850VS に備え付けられている 11ピン I/O を使うと、
Arduino や ESP32 など、UART があるマイコンとシリアル通信できるようになります。

以下は ESP32 の場合で説明しますが、他のマイコンでもプログラムやピンを変えれば
対応できるはずです。

## ポケコン⇔ESP32の双方向通信をUARTで

信号線が3本あれば、ポケコンとESP32の双方向通信が可能です。

### 結線

ポケコンの画面左側にある11ピン端子から接続します。
ピン番号は画面の読める方からみて、上から1番です。

| PC-G850 |方向| ESP32 |
|:-------:|:--:|:-----:|
| 2 VCC   |    | 5V    |
| 3 GND   |    | GND   |
| 6 RXD   | ←  | 17 TX2|
| 7 TXD   | →  | 16 RX2|

5V線の接続はオプショナルです。
接続すると、ポケコンの電池からESPを駆動できます。
電池消耗を防ぐために、別電源でESPを動かすときは接続しないようにしましょう。

Devkit の機種によってはRX2、TX2が露出していないかもしれません。
スケッチで任意のピンを指定できますので問題ないはずです。

実験目的なら直結しても大丈夫ですが、ポケコンのロジックレベルは5Vなので
長期的な使用では TXD - RX2 間にロジックレベルコンバータか分圧抵抗をかませて
3.3Vに落としてやったほうがいいでしょう。

5V の Arduino なら直結しても問題ありません。

### スケッチの例

```cpp:ESP32
HardwareSerial Serial2(2);
void setup(){
  Serial.begin(115200);
  Serial2.begin(9600, SERIAL_8N1, -1, -1, true);
}

void loop(){
  if(Serial.available()){
    Serial2.write(Serial.read());
  }
  if(Serial2.available()){
    Serial.write(Serial2.read());
  }
}
```

ミソは `Serial2.begin` です。[ライブラリのヘッダファイル](https://github.com/espressif/arduino-esp32/blob/master/cores/esp32/HardwareSerial.h)を見てみましょう。

```cpp
void begin(unsigned long baud, uint32_t config=SERIAL_8N1, int8_t rxPin=-1, int8_t txPin=-1, bool invert=false);
```

今回のコードでは

+ `baud`：9600ボー
+ `config`：データビット 8bit、ストップビット 1bit
+ `rxPin` `txPin`：デフォルト値 (他のピンにつないだ場合は変更してください)
+ `invert`：`true`

としています。ポケコンのシリアル I/O は UARTと論理が反対になっています。
第5引数で `true` を指定しないと通信ができません。

Arduino の場合 (こんな目的で Mega を使う人はいないでしょうから)、 ハードウェアシリアルが1系統しかありません。
そこで `SoftwareSerial` を使います。
`SoftwareSerial` でも論理の反転ができます。次のように宣言してください。

```cpp:Arduino
#include <SoftwareSerial.h>
SoftwareSerial Serial2(rxPin, txPin, true);

void setup(){
    Serial2.begin(9600);
}
```

### ポケコン側

通信する前にポケコンで設定が必要です。
`TEXT`→`Sio`→`Format` と操作して設定画面に入ってください。

次のように設定します。

|項目 | 設定値 |
|:--|:--|
| baud | 9600 |
| data bit | 8 |
| stop bit | 1 |
| parity | none |
| end of line | CR LF |
| end of file | 1A |
| line number | 任意 |
| flow | none |

`BASIC`→`BASIC` と操作して PRO MODE に入り、`NEW` で書き始めます。

```basic
10 OP."COM1:
20 IFNOT EOF1 I.#1,IN$:P.IN$:G.20
30 IFINK.I.IN$:P.#1,IN$:G.20
```

<!--Qiita ってBASICのシンタックスハイライトはないんですね(笑)-->

10行目はシリアル全二重通信を指定します。
`OPEN "COM:`とすると半二重通信になり、受信はできますが送信はできなくなります。
なお、**行末のダブルクオーテーションは省略できます。** [^dblqot]

[^dblqot]: 省略可能なのは行末のもののみです。行末まで文字列として扱われ、他のステートメントやコメントを続けることはできません。CASIO系のポケコンではできなかった記憶があります。CASIO Fx-870Pではたとえ他のステートメントを続ける場合でも閉じカッコ`)`が省略可能でしたが、PC-G850VSにこの機能はありません。

20行目は、受信バッファがなくなるまで1行ごとに入力を読み取り、画面に表示します。
これが1行で書けちゃうBASICは凄いですね！！！

ちなみに変数名が2文字の文字列型変数は16文字までしか保持できませんので、
これを超えたぶんは切り捨てられます。 [^strarray]

[^strarray]: 文字列配列を用いることで、255文字まで使用可能になります。冒頭で`DIM S$(0)*255`と宣言し、`IN$`を`S$(0)`に書き換えます。

ESP32と接続し、PCでシリアルコンソールを開いてから `RUN` してください。
なにかキーを押すと入力モードになり、Enterで送信します。
PHP ちょいとした応用

PHPだけで少し動的に書いてみました。

例えば簡単な入力場面を作るとして、このような項目がある場合。
[![Screenshot from Gyazo](https://gyazo.com/5fffbf1eb2341c45e254b2736c350e39/raw)](https://gyazo.com/5fffbf1eb2341c45e254b2736c350e39)
これだと項目が増えた場合だといちいち加える感じになります。
なのでマスターデータ風なのを作って。。。
[![Screenshot from Gyazo](https://gyazo.com/8d8a65fc171c2b72aba62d7d93cebf4e/raw)](https://gyazo.com/8d8a65fc171c2b72aba62d7d93cebf4e)
inputは、、、
[![Screenshot from Gyazo](https://gyazo.com/48905095660d59f92577aa9df7a43c15/raw)](https://gyazo.com/48905095660d59f92577aa9df7a43c15)
[![Screenshot from Gyazo](https://gyazo.com/e913f302517231d01a8b3b2424c3061d/raw)](https://gyazo.com/e913f302517231d01a8b3b2424c3061d)
confirmで、、、
[![Screenshot from Gyazo](https://gyazo.com/022666490935ca46d0575a3473705e05/raw)](https://gyazo.com/022666490935ca46d0575a3473705e05)

分岐や配列、関数の勉強になりました。

分岐と配列、カプセル化は重要だよと聞いているのでこれからも頑張ります！（ ∵）
※array_pushって遅いからあんまり使わない方がいいんだっけ？？
【Java】遷移元のURLを取得する方法 

#はじめに
遷移元のURLを取得する方法をメモとして記録しておきます。
今回はログイン機能を作る中で、ログインに成功したら、ログイン前に開いていたページ(ログインボタンを押したページ)に遷移するために利用しました。

以下のような流れです。

ログイン前に開いていたページ (jsp)
↓
Login.java (**ログイン前に開いていたページのURLを取得し**、ログインフォームに遷移)
↓
login.jsp (ログインフォーム)
↓
LoginCheck.java (ログインできるか判定、**ログイン前に開いていたページのURLを取り出す**)
↓
ログイン前に開いていたページ (ログインに成功したらこのページに戻る)


#取得する方法
結論としては、**getHeaderメソッド**を使って、リクエストヘッダーの**Referer**を取得します。

```Java
    //リクエストのヘッダー情報の遷移元URLを取得
    request.getHeader("REFERER");
```
今回はセッションを使って、取得したURLを保持し、ログインに成功したらそれを取り出して遷移します。

```Java:Login.java
   //リクエストのヘッダー情報の遷移元URLを取得しセッションに格納
   session.setAttribute("referer", request.getHeader("REFERER"));
   request.getRequestDispatcher("/login.jsp").forward(request, response);
```
```Java:LoginCheck.java
   //ログインに成功したら、セッションから遷移元URLを取り出して遷移
   String url = (String)session.getAttribute("referer");
   request.getRequestDispatcher(response.encodeURL(url).substring(29)).forward(request, response);
```

#手こずったところ
LoginCheck.javaからログイン前のページに遷移しようとすると、404のHTTPエラーが出てしまい苦戦しました。
理由としては、refererで取得したURLは、URLの全体であるため不要な部分も指定してフォワードしようとしていたためです。
対処法は単純で、**substringを使って必要箇所を切り出せばOK**です。

例えば

>`http://localhost:8080/sample/top.jsp`

「`http://localhost:8080/sample`」の部分はいらないのでURLに対して**substring(29)**としてあげれば、/top.jspのみ切り出せます。
LINQのToDictonaryを覚えた

ToDictionaryをMicrosoftのドキュメントで見てみると、

ToDictionary&lt;TSource,TKey,TElement&gt;(IEnumerable&lt;TSource&gt;, Func&lt;TSource,TKey&gt;, Func&lt;TSource,TElement&gt;)

って書いてある。が、俺には理解不能。


#今回の記事の初期化

いかにも例題的なクラス

```Employee.cs
class Employee
{
    /// <summary>
    /// 社員ID
    /// </summary>
    /// <remarks>プライマリキー</remarks>
    int Id { get; set; }

    /// <summary>
    /// 社員名
    /// </summary>
    string Name { get; set; }

    // 他のクラスメンバー略...
}
```
がある。

とある会社の全従業員をぶちこんだ、
List<Employee> Employees; が存在する。

ここから、社員IDと社員名を列挙した、
Dictionary&lt;int, string&gt; EmployeeDictionary;
を作成する。
俺のコードをチェックする誰かを満足させるまでを書いた。

#紆余曲折
##最初はforで書いた
```c#

for(var i=0; i<Emploees.Count; i++)
{
    EmployeeDictionary.Add(Employees[i].Id, Employees[i].Name); 
}
```
##次はforeachに書き直した
以前、
https://qiita.com/StaticProgramer/items/fab629ce838fb52ee814
で学んだ通り、まずforではアレだと言われるので、foreachに書き直す。

```c#
foreach (var employee in Employees)
{
    EmployeeDictionary.Add(employee.Id, employee.Name);
}
```
でも、これでは不合格だって言われたので。
##KeyValuePair&lt;int, string&gt;を使えってことか？

```c#
// だめだ。よくわかんねぇ
```
悩むこと数分。
#結論
##そうか。LINQか。
```c#
EmployeeDictionary = Employees.ToDictionary(x => x.Id, x => x.Name);
```
1行で書けた。


#番外編

苦闘中に書いた間違い作品。
てっきりKeyValuePairを使うんだと思ってたから。

```c#
// これじゃList<KeyValuePair> なんだぜ。。。
var dic = Employees.Select(x => { return new KeyValuePair<int, string>(x.Id, x.Name); }).Tolist();

// KeyにKeyは入ってるけど、ValueにKeyValuePairが入ってる気がした。
var dic2 = Employees.Select(x => { return new KeyValuePair<int, string>(x.Id, x.Name); }).ToDictionary(x => x.Key);
```
Rust で Windows プログラミング - EnumWindows編

##環境
toolchain: stable-i686-pc-windows-msvc
rustc 1.32.0 (9fda7c223 2019-01-16)
[winapi 0.3.6](https://github.com/retep998/winapi-rs)

##ウィンドウのタイトルを取得してみる
`EnumWindows`を使ってみましょう。今回は Windows の世界の UTF-16 を Rust の世界の UTF-8 に変換するところが味噌です。

まずは Cargo.toml から。

```toml:Cargo.toml
[dependencies.winapi]
version = "0.3"
features = ["winuser"]
``` 

main.rs をまとめてどうぞ。
UTF-16 を UTF-8 に変換しているのは`decode`関数です。`std::char::decode_utf16()`は引数で`Iterator`受け取るのでスライスを`source.iter()`しています。そして`.take_while(|&i| *i != 0)`でNULL終端文字までを抜き出しています。最後に`.cloned()`で`&u16`を`u16`にしています。

```rust:main.rs
use winapi::{
    um::winuser::{EnumWindows, GetWindowTextW},
    shared::{
        windef::{HWND},
        minwindef::{LPARAM, BOOL, TRUE}
    },
};
use std::char::{decode_utf16, REPLACEMENT_CHARACTER};

fn main() {
    unsafe {
        EnumWindows(Some(enum_proc), 0);
    }
}

unsafe extern "system" fn enum_proc(hwnd: HWND, _l_param: LPARAM) -> BOOL {
    let mut buf = [0u16; 1024];
    if GetWindowTextW(hwnd, &mut buf[0], 1024) > 0 {
        let win_text = decode(&buf);
        println!("{}", win_text);
    }
    TRUE
}

fn decode(source: &[u16]) -> String {
    decode_utf16(source.iter().take_while(|&i| *i != 0).cloned())
        .map(|r| r.unwrap_or(REPLACEMENT_CHARACTER))
        .collect()
}
```

次回は EnumWindow で見つけた特定のウィンドウにキーボードイベントを送ってみたいと思います。
[Rust で Windows プログラミング - SendInput編](https://qiita.com/benki/items/be8e83d9118c115de373)

今までのネタ
[Rust で Windows プログラミング - MessageBox編](https://qiita.com/benki/items/778ba2bd1266d28bce61)
[Rust で Windows プログラミング - CreateWindow編](https://qiita.com/benki/items/c01f7da1e1a71cc91d11)
[Rust で Windows プログラミング - Shell_NotifyIcon編](https://qiita.com/benki/items/bbc575e471e5423db55a)
Scalaのコードフォーマットの簡易設定メモ

InteliJ IDEAとsbtの設定について記載しています。自分用メモです。

参考
https://scalameta.org/scalafmt/

## InteliJ IDEA

### scalafmtのインストール

1. open`Preferences > Plugins`
2. open `Browse repositories`
3. search for `scalafmt`
4. click "Install"
5. restart IntelliJ

![img1-1.png](https://qiita-image-store.s3.amazonaws.com/0/203061/f0494bef-3007-2d79-e100-c79248c6c0e2.png)

### .scalafmtの作成

プロジェクト直下に`.scalafmt.conf`を配置。
以下は一例。

詳細な設定は以下参照。
https://scalameta.org/scalafmt/docs/configuration.html

```.scalafmt.conf
includeCurlyBraceInSelectChains = false
newlines.penalizeSingleSelectMultiArgList = false
```

### 保存されたらフォーマットが実行されるようにする

* 現在のプロジェクトに対して実行されるようにする場合 (recommended): 
  * `Preferences > Tools > Scalafmt`
* 新しくつくるプロジェクトすべてに対して実行されるようにする場合: 
  * `File > Other settings > Preferences for new projects > Tools > Scalafmt`


![img2-1.png](https://qiita-image-store.s3.amazonaws.com/0/203061/1a0994ca-c4ab-6025-46ea-624a34fee673.png)


## sbt

### `project/plugin.sbt`の設定追加

```project/plugin.sbt
addSbtPlugin("org.scalameta" % "sbt-scalafmt" % "2.0.1")
```

### `.scalafmt`の設定

プロジェクト直下に`.scalafmt.conf`を配置

```.scalafmt.conf
version=2.0.0-RC8
includeCurlyBraceInSelectChains = false
newlines.penalizeSingleSelectMultiArgList = false
```

### フォーマットの実行

```
sbt clean scalafmtSbt scalafmtAll
```

### フォーマットの検証

```
sbt clean scalafmtSbtCheck scalafmtCheckAll
```
システム/ソフトウェア開発 安全性解析手法 STAMP/STPA情報まとめ

# はじめに

IPA/SECが積極的に推奨しているSTAMP/STPAの情報が少なくてよくわからん。
というか世界レベルだと全く盛り上がっていない。米国のごく一部とIPAだけが盛り上がっている印象。

とはいえなかなか有益な手法なので、ちょっと調べてわかったことをここにまとめておく。

# 資料
## はじめてのSTAMP/STPA ～システム思考に基づく新しい安全性解析手法～

>
IPA/SECは、マサチューセッツ工科大学のNancy Leveson教授が提唱するSTAMP（System Theoretic Accident Model and Processes）の理論に基づいた「相互作用する機能単位でハザード要因を考える」新しいハザード分析手法であるSTPA（System Theoretic Process. Analysis、以下STAMP/STPA）の導入を図る開発初心者、特に大規模・複雑化するシステムの安全性確保の責務を負うシステム開発者、ソフトウェア開発者向けのSTAMP/STPA手順解説書「はじめてのSTAMP/STPA ～システム思考に基づく新しい安全性解析手法～」（以下本書）を公開しました。

by [はじめてのSTAMP/STPA ～システム思考に基づく新しい安全性解析手法～](https://www.ipa.go.jp/sec/reports/20160428.html)

IPAの資料。最も有益な日本語資料。

[はじめてのSTAMP/STPA ～システム思考に基づく新しい安全性解析手法～](https://www.ipa.go.jp/sec/reports/20160428.html)

## Nancy Leveson氏サイト

STAMP提唱者のNancy Leveson氏のサイトに文献があるが、読むのは辛い。

[Nancy Leveson](http://sunnyday.mit.edu/)

# ツール

STAMPツールは以下のサイトにまとまっている。

[Partnership for Systems Approaches to Safety and Security (PSASS) - STAMP Tools](https://psas.scripts.mit.edu/home/2016-2/)

登録不要で簡単に入集できるのはXSTAMPPとSTAMP Workbenchだけ。

## XSTAMPP

>
XSTAMPP (eXtensible STAMP Platform) is an open-source platform for safety engineering designed specially to serve the widespread adoption and use of STAMP methodologies (STPA and CAST) in different areas. XSTAMPP includes seven plug-ins.

by [XSTAMPP](https://github.com/SE-Stuttgart/XSTAMPP)

SourceForgeのサイトもあるがGitHubに移行したらしい。

[XSTAMPP](https://github.com/SE-Stuttgart/XSTAMPP)

日本語化プロジェクトもある。あまり活発ではないが。

>
オープンソースのXSTAMPPソフトウエアのマルチ言語化を行うイニシアチブに呼応し、日本語ローカライズを行う。

by [XSTAMPP日本語ローカライズ・プロジェクト
](https://github.com/miurahr/stampp-trans-ja/wiki/Japanese-Translation-project-for-XSTAMPP)

[stampp-trans-ja](https://github.com/miurahr/stampp-trans-ja)

## STAMP Workbench

>
独立行政法人情報処理推進機構 ソフトウェア高信頼化センターは3月30日、大規模・複雑化するシステムに適した安全解析手法「STAMP」の導入を容易にするモデリングツールを無償公開しました。

by [STAMP Workbench](https://www.ipa.go.jp/sec/reports/20180330.html)


IPA謹製の品。安心の日本語対応。
ITリテラシーの低い人でも比較的使いやすいインタフェース。

[STAMP Workbench](https://www.ipa.go.jp/sec/reports/20180330.html)
外部GUIツールでDockerコンテナのDBを参照する

コンテナに直接ログインして参照できることが前提です。

## DockerFileにportsを追加して公開する

```
  db:
    image: mysql:5.7
    volumes:
      - db-volume:/var/lib/mysql
    ports:
      - 3306:3306
    environment:
      MYSQL_ROOT_PASSWORD: password
```

すると `docker-compose ps` で下記に変わります 。

```
dockerrails_db_1    docker-entrypoint.sh mysqld      Up      3306/tcp, 33060/tcp
↓
dockerrails_db_1    docker-entrypoint.sh mysqld      Up      0.0.0.0:3306->3306/tcp, 33060/tcp
```

あとは接続の際 Docker Toolbox を使用している場合は、VirtualBoxのIPを指定します (下記はA5:SQLの例)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/66405/cb25d781-374f-1d00-d030-2ce01f0a8bef.png)


(参考) https://forums.docker.com/t/connect-to-container-create-by-docker-compose/44682
subprocessでシェルコマンドを呼び出し、標準出力は捨てる（/dev/nullに出力する）

環境：Python3

```python
#!/usr/bin/env python3
import subprocess

subprocess.run(['ls', '-l'], stdout=subprocess.DEVNULL)
```

https://docs.python.org/ja/3/library/subprocess.html#using-the-subprocess-module


`subprocess.call`も`run`と同じように使えるが、`call`の方が少し古い。

> Python 3.5 より前のバージョンでは、サブプロセスに対して以下の 3 つの関数からなる高水準 API が用意されていました。現在多くの場合 run() の使用で済みますが、既存の多くのコードではこれらの関数が使用されています。

https://docs.python.org/ja/3/library/subprocess.html#subprocess.call
【Xamarin.Forms】Prismソリューションを作成する（2019年2月版）

#はじめに
2019年2月時点のVisual Studio 2017 Community for MACでXamarin.Forms ＋ Prism のソリューションを作成する方法です。

#環境
- macOS 10.14 Mojave
- Visual Studio Community 2017 for MAC(7.7.4)

#ソリューションの作成手順
##「Prism Template Studio and Developer Toolkit」のインストール
拡張機能マネージャーを開き「ギャラリー」を選択。
右上の検索キーワードに「prism」と入力すると「ギャラリー」タブに「Prism Template Studio and Developer Toolkit」が表示されるので、選択して「インストール...」ボタンをクリックします。
<img width="485" alt="スクリーンショット 2019-02-03 11.18.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/342629/75b15687-91db-c57d-01b7-93f52143d64d.png">
<img width="995" alt="スクリーンショット 2019-02-03 11.20.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/342629/4bd37d77-0cff-2eda-b668-17d3f9943676.png">


##ソリューションの作成
Visual Studioのファイルメニューから「新しいソリューション」をクリックして、「Blank Prism Application」を選択して「次へ」をクリックします。
<img width="1013" alt="スクリーンショット 2019-02-03 11.42.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/342629/b7769df9-d09f-6957-63ae-feb1550f713b.png">

「Blank Prism Application」で次の通り入力して「次へ」をクリック。
 
 - Project Name：任意のプロジェクト名。
 - Container:「Autofac」を選択。
<img width="1013" alt="スクリーンショット 2019-02-03 11.42.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/342629/cad45189-d041-2007-5986-ab77c3468779.png">

「新しいBlank Prism Applicationの構成」はお好みで。
<img width="1065" alt="スクリーンショット 2019-02-03 11.42.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/342629/c4855b3b-479d-85d3-082f-7385982aa873.png">

ソリューションができました。
<img width="712" alt="スクリーンショット 2019-02-03 11.50.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/342629/bfbd26a5-5874-8724-4377-597ab352dc09.png">
srcフォルダの下に3つプロジェクトがあります。

|プロジェクト名|概要|
|:-----------------|------------|
|{プロジェクト名}|PCL（Portable Class Library）|
|{プロジェクト名}.Droid|Android用プロジェクト。Androidで実行したい場合はこのプロジェクトをスタートアッププロジェクトとして選択します。|
|{プロジェクト名}.iOS|iOS用プロジェクト。iOSで実行したい場合はこのプロジェクトをスタートアッププロジェクトとして選択します。|

##ビルド
###Androidプロジェクトのビルド
「{プロジェクト名}.Droid」プロジェクトを右クリックし、「{プロジェクト名}.Droidのビルド」をクリックします。
<img width="492" alt="スクリーンショット 2019-02-03 12.41.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/342629/688282ac-df48-8000-0a6a-2ae52b694a20.png">

「styles.xml」でビルドエラーが出たら、こちらを参考にして改善してください。
https://qiita.com/ats_y/items/8f64cc924f81ce2ba777

###iOSプロジェクトのビルド
Androidプロジェクトのビルド同様、「{プロジェクト名}.iOS」プロジェクトを右クリックし、「{プロジェクト名}.iOSのビルド」をクリックします。
<img width="1077" alt="スクリーンショット 2019-02-03 13.21.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/342629/e9ed3dcf-d10e-99b0-9538-68c3747ca3b6.png">
いくつか警告がでますが、とりあえずビルドが通りました。
【Blender】Blenderでpng画像の下絵を取り込む

環境メモ
⭐️Mac OS Mojave バージョン10.14
⭐️Blender v2.79.6
⭐️Mac Book

1.Blende起動時のデフォトCubeを削除する
<img width="424" alt="スクリーンショット 2019-02-03 12.53.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/a3b0099d-6b7d-7db8-8b2b-ed0bfe96af77.png">

2.「N」キーを押してプロパティ を表示する。
下絵にチェックONする
<img width="575" alt="スクリーンショット 2019-02-03 12.55.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/a50de1b2-ed65-2e9f-b35a-71ca06a2ca70.png">

3.画像を追加するボタンを押す
<img width="442" alt="スクリーンショット 2019-02-03 12.56.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/1b5e54a0-bdd2-8e7d-c188-e3332e53070e.png">

<img width="506" alt="スクリーンショット 2019-02-03 12.56.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/bfe8d74a-f626-fed2-161d-5bc675eb5ad2.png">

4.テンキー「１」、「５」を押して、下絵を表示する
<img width="952" alt="スクリーンショット 2019-02-03 13.10.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/82156974-6689-0d0d-76eb-3985a9176514.png">
Mysql2::Error: Specified key was too long; max key length is 767 bytesを解決する

現象
---

utf8mb4のカラム（`name`）に対してindexをはるときにエラーになってしまった:innocent:


```
...
-- add_index("posts", ["name"], {:name=>"name_index"})
[ERROR] Mysql2::Error: Specified key was too long; max key length is 767 bytes: CREATE  INDEX `name_index`  ON `posts` (`name`)
...
```

このあたりの記事を見ると、いろんな方法があるみたい :thinking: 

- [MySQL(InnoDB) で "Index column size too large. The maximum column size is 767 bytes." いわれるときの対策 - かみぽわーる](https://blog.kamipo.net/entry/2012/11/13/102024)
- [Mysql2::Error: Specified key was too long; max key length is 767 bytes: CREATE UNIQUE INDEX - リア充爆発日記](http://ria10.hatenablog.com/entry/20130220/1361332666)
- [Mysql2::Error: Specified key was too long; max key length is 767 bytes limit – hello-world.jp.net](https://blog.hello-world.jp.net/mysql/2055/)


対応
---

今回はcnfを書き換えてDBごと対応することにします。

cnfファイルの場所は`mysql --help | grep my.cnf`などで調べます :point_up: 

```/usr/local/etc/my.cnf
...
innodb_file_format = Barracuda
innodb_file_per_table = 1
innodb_large_prefix
```

homebrewでインストールしたmysql@5.6を使っていたので`brew services`コマンドで再起動。

```
brew services restart mysql@5.6
```

以上です :hugging: