OmniAICreator/Qiita-1.07M huggingface dataset:
リストの最頻値を求めたいがstatistics.mode()が例外を返してくる

### statistics.mode()メソッドはリストの最頻値を返してくれます

```py

>>> import statistics
>>> l = [1,1,2,3] #最頻値は1
>>> statistics.mode(l)
1
```
OKですね
ところがリスト内に最頻値が複数存在すると，例外を返す仕様となっています  

```py
>>> l = [1,1,2,2,3] #最頻値は1と2
>>> statistics.mode(l)
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  File "/anaconda3/lib/python3.6/statistics.py", line 507, in mode
    'no unique mode; found %d equally common values' % len(table)
statistics.StatisticsError: no unique mode; found 2 equally common values
>>> 
```

###どうしよう

collections.Counter()メソッドが使えそうです

```py
>>> l
[1, 1, 2, 2, 3]
>>> import collections
>>> collections.Counter(l).most_common() #(要素，出現回数)を出現回数順に並び替えたタプルを返す
[(1, 2), (2, 2), (3, 1)] 
```
とりあえず何か一つ最頻値が欲しい場合は，

```py
>>> collections.Counter(l).most_common()[0][0]
1
```

で良さそうです
個人的なnuxtjs備忘録。適宜追加。

個人的なnuxtjsの備忘録です。
いい記事が見つかり次第、下記「学習時参考にしたサイト」に
追加していきたいと思います。

- nuxt prettierエラー時 => npm run lint -- --fix
- v-modelをカスタムコンポーネントで受け付ける => https://joe-noh.hatenablog.com/entry/2017/09/01/235943

> 学習時参考にしたサイト

https://www.chatbox.blog/2018/03/26/nuxt-js-start-1/
https://public-constructor.com/nuxtjs-with-axios/

> 各用語意味

ペイロード...本当のデータ
Jackson で Enum の JSON シリアライズ結果をカスタマイズする

```kotlin
data class Sample(
        val id: Int,
        val name: String,
        val type: Sample.SomeType
) {

    enum class SomeType(val type: String) {
        A("alpha"),
        B("beta")
    }
}
```

このような Enum をプロパティに持つデータクラスのインスタンスを Jackson で JSON にシリアライズすると、次のように定数名がそのまま文字列として出力される。

```json
{
  "id" : 1,
  "name" : "Sample Name",
  "type" : "A"
}
```

これを定数名ではなく、その値(上の例では `"alpha"`)を出力したい場合には `@JsonValue` アノテーションを用いたメソッドを追加する。
Enum に限らず、自作クラスのオブジェクトに対する JSON シリアライズ時の値を決めるには `@JsonValue` アノテーションを付けたメソッドを実装する。

```kotlin
import com.fasterxml.jackson.annotation.JsonValue

data class Sample(
        val id: Int,
        val name: String,
        val type: Sample.SomeType
) {

    enum class SomeType(val type: String) {
        A("alpha"),
        B("beta");

        @JsonValue
        fun toValue(): String {
            return type
        }
    }
}
```

ここでは `toValue()` という名前のメソッドを追加しているが、`@JsonValue` アノテーションが付いていればメソッド名は何でもよい。
PHPでファイルサイズを表示するときの条件分岐

# したいこと
KB/MB/GBで表示分ける

# ソースコード

```php
$filesize = filesize("/hogehoge.txt");

if ($filesize <= (1024**2)){// KB
  $filesize = $filesize/1024;
  $filesize = number_format($filesize,2);
  $filesize .= 'KB';
}elseif($filesize <= (1024**3)){ // MB
  $filesize = $filesize/(1024**2);
  $filesize = number_format($filesize,2);
  $filesize .= 'MB';
}elseif($filesize <= (1024**4)){ //GB
  $filesize = $filesize/(1024**3);
  $filesize = number_format($filesize,2);
  $filesize .= 'GB';
}else{ //Others
  $filesize = $filesize/(1024**4);
  $filesize = number_format($filesize,2);
  $filesize .= 'TB';
}
```

# やってること

1. `filesize`でファイルサイズを取得し、`$filesize`に格納(このときはByteで取得される)
2. `$filesize`を1024のn乗(n>=2)と比較していく
3. n乗より小さければn-1乗の単位を与えるような条件分岐(このときに小数点以下2桁で丸める)

# 感想

PHPで累乗を`**`で書けることを知ったが、これがめっちゃ楽。

```php
//今まで
$a * $a

//これから
$a ** 2
```
累乗が5乗とか10乗になった時に間違える心配が減る。

また、この条件分岐はファイル一覧に組み合わせているが、ほかにも使う機会も多そうなので楽に書けて良かった。
[Vue.js/Nuxt.js] element.focus()を使用して動的にフォーカスを当てる際はquerySelector等でなく$refsから参照しないと動かない

## 概要


何らかの処理をした際に、Elementに動的にフォーカスを当てたいことがある。

筆者の例では、一部のDOMをv-ifで表示制御しており、Boolean型で開閉を変える時に動的フォーカスを当てたかった。

検索した結果Element.focus()を使えば期待した動作をすることがわかったが、querySelectorからElementを取得した場合開発環境のNuxt.jsでは動かなかった。

それに関して少し調べたのでわかる範囲で走り書きしておく。

## querySelectorで動かなかった原因

[Document.querySelector() - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector)

querySelectorでは**Element**が取得できるが、focus()メソッドが存在するのは**HTMLElement**だったからでした。

HTMLElementは**Elementを継承**しているし名前が似ているため、少しわかりにくいですね。

refsから取得すると、**HTMLInputElement**が取得できました。__proto__を見る限り、こちらは**HTMLElement**を継承しているっぽいです。

```
Element → HTMLElement → HTMLInputElement
```

って流れですね！

### 動かないコード

```vue 
<template>
  <div>
    <input type="text" class="text-input">
  </div>
</template>
```


```javascript
// not work
document.querySelector('.text-input').focus();
```

### 動くコード

```vue 
<template>
  <div>
    <input type="text" ref="textInput" class="text-input">
  </div>
</template>
```

```javascript
this.$refs.textInput.focus();
```

また、DOMがレンダリングされてからフォーカスしたい際は `this.$nextTick` を利用する必要があるのでこちらもセットで使うとなおよし。

```javascript
this.$nextTick(() => this.$refs.textInput.focus());
```

## 参考リンク

[Element - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/Element)
[HTMLElement - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement)
[How to set focus() to input? - Get Help - Vue Forum](https://forum.vuejs.org/t/how-to-set-focus-to-input/10672)
無限アラートは不正プログラムとして逮捕されるらしいので警察にコラッツの問題も証明してもらおう

昨日投稿した[alert無限ループは不正プログラムとして逮捕されるらしいので警察にゴールドバッハ予想を証明してもらおう - Qiita](https://qiita.com/yuta0801/items/82872d551caf47f2c7af)のセルフパロディです。詳細はこの記事を参照してください。

昨日投稿した記事をエゴサーチしていたら[コラッツの問題を解いてもらいたい](https://twitter.com/neko_the_shadow/status/1103072452790239232)という要望(?)があったので実装してみます。類似のパロディは歓迎です！

### コラッツの問題とは

Wikipediaより

> コラッツの問題は、「任意の正の整数 n をとり、

> n が偶数の場合、n を 2 で割る
> n が奇数の場合、n に 3 をかけて 1 を足す
> という操作を繰り返すと、どうなるか」というものである。「どんな初期値から始めても、有限回の操作のうちに必ず 1 >に到達する(そして 1→4→2→1 というループに入る)」という主張が、コラッツの予想である。


偶数、奇数の判別と掛け算、足し算だけなので、ゴールドバッハの予想より簡単ですね

### 実装

昨日の記事で(技術無いのに)無駄に圧縮しようとして盛大に失敗したので今回は普段書いてるスタイルでかきます

```js
for (let i = 1, n = 1; i <= 10; i++, n = i) {
    while (n !== 1) {
        if (n % 2 == 0) n /= 2
        else (n *= 3, n += 1)
    }
    alert(i)
}

```

ただひたすら計算していくだけなので、ゴールドバッハよりもかなりスッキリしてますね。ただしこの**実装には問題があります**(後述)。

### 問題点

素数のリストからペアを探すゴールドバッハの予想と異なり、コラッツの問題は1になるまでただひたすらに計算していく実装になるので、仮に**コラッツの問題が偽な場合、1にはたどり着かないので無限ループ**になってしまう（良い案があったら教えてください！）

つまりこの実装だと、**コラッツの問題が真だと無限アラート、偽だと無限ループ**となります。（無限アラートは消せるので良いですが、**無限ループはCPU食う**のであれですね...）

## あとがき

これらは全部、**自己責任で使ってくださいね！** これを作るきっかけにもなった、**再帰alertスクリプトのアドレスを掲示板に書き込んだ女子中学生や男性が補導、書類送検される方針だ**ということを忘れないでね！！
Vagrant + Docker + Prometheus + Grafana 設定ファイルのマウント失敗について(open /etc/prometheus/prometheus.yml: permission denied")

## 環境
* Vagrant 2.2.3
* CentOS 7
* Docker 1.13.1
* Prometheus 2.7.2
* Grafana 6.0.0

## 事象
docker-compose.yml記載のvolumes
prometheus.ymlのマウント失敗

## docker-compose.yml
```
version: '3'
services:
  prometheus:
    image: prom/prometheus
    container_name: prometheus
    volumes:
      - ./prometheus/prometheus.yml:/etc/prometheus/prometheus.yml
    ports:
      - 9090:9090
  grafana:
    image: grafana/grafana
    container_name: grafana
    ports:
      - 3000:3000
    env_file:
      - ./prometheus/grafana.env
  node-exporter:
    image: quay.io/prometheus/node-exporter
    container_name: node-exporter
    ports:
      - 9100:9100
    volumes:
      - /proc:/host/proc
      - /sys:/host/sys
      - /:/rootfs
      
```

### エラーメッセージ
```
err="error loading config from \"/etc/prometheus/prometheus.yml\": couldn't load configuration (--config.file=\"/etc/prometheus/prometheus.yml\"): open /etc/prometheus/prometheus.yml: permission denied"
```
## 原因
SELinuxのアクセス制限のため
## 解決方法
・**一時的手段**
下記コマンドを叩く(enforcing→permissiveに変更)

```
sudo setenforce 0 
```

#### 非推奨
以下はSElinuxによりセキュアになっている、アクセス制限などがザルになるのでオススメしない。
・**恒久的解決**
SElinuxの設定ファイルの書き換え(enforcing→permissiveに変更)

```
vi /etc/selinux/config
SELINUX=permissive
```

・ **SELINUX=?**  ?の箇所のモードについては下記参照
[SELINUX の有効化および無効化(RedHat)](https://access.redhat.com/documentation/ja-jp/red_hat_enterprise_linux/6/html/security-enhanced_linux/sect-security-enhanced_linux-working_with_selinux-enabling_and_disabling_selinux)

## 確認
サーバ再起動後、下記コマンドを叩いて現在のモードを確認

```
getenforce
Permissive　と出力されれば変更されている
```

## Link
[「SELinuxのせいで動かない」撲滅ガイド](https://qiita.com/yunano/items/857ab36faa0d695573dd)
新規Linux環境立ち上げ時に入れるパッケージ(個人用メモ)

# 最初にインストールしたいパッケージ達 for CUI
Windows Subsystem for Linux 等、新規で環境を作る時に真っ先に入れるパッケージの個人的まとめ。
基本的に Debian (系統) を使うのでインストールは以下のように行う。

```
# apt install [パッケージ名]
```
## sudo
一般ユーザが root 権限の元にコマンドが実行できるようになる。"**S**witch **U**ser **DO**" の略らしい (SUperuser DO じゃないんだね)。インストール後は root ユーザで `visudo` を使って実行可能な権限を設定する。
## Vim (Emacs)
基本のテキストエディタ。Emacsも入れるのは気分次第。
## Zsh
シェルといえばこれ。Bashより高機能(?)。

## tmux
ターナルプレクサ。コンソールを分割したり、ターミナルの状態を保存したりできる。状態を保存できるために、実行時間のかかるコマンドを利用する場合に使用は必須。

## nkf
文字コード変換コマンド。"**N**etwork **K**anji **F**ilter" の略らしい。大抵は BOM なしの UTF-8 にしたいので

```
nkf -w --overwrite XXXXX.txt
```
のように使う。`--overwrite` 指定で上書きする。`nkf -g` で文字コードを調べることもある。

## Imagemagick
画像を変換したりするパッケージ。個人的にはこれが使いたくて CUI を立ち上げることも多い。

## lv
ページャ。`less` より使いやすいと思う。

# コンパイル等するのに必要なパッケージ達
## gcc
C コンパイラ。たいてい必要。

## make
ビルドツール。たいてい必要。

# 最初にインストールしたいパッケージ達 for GUI
上記に加え、GUI を使う時に入れておきたいパッケージの個人的まとめ。

## guake
ターミナルエミュレータ。ボタン (デフォルトは確か F12) を押すと、画面上半分 (場所は変更可能) にターミナルがニュッと出てくるパッケージ。macOS だと `iTerm2` とかがいい。

# まとめ
新規環境立ち上げはめんどくさいし、最初は何するか忘れることも多いのでメモ。また思い出したら追記する。
CPI(レンタルサーバー)にWPをインストールしたのにTOP画面が表示されないときの対処法

CPIのCMSインストローラーを使ってWordPressをインストールしたのに
WordPressのTOP画面が表示されず、CPIのデフォルト画面が表示されてしまうときの対処法について記載します。

## WordPressをインストールした先にindex.htmlがないか確認する
[オンラインヘルプ](https://www.cpi.ad.jp/support/faq/faq_func/faq_func_ftp/support-248.html)を元にWordPressを保存したフォルダを確認してください。

その中に`index.html`がないか確認してください。
![スクリーンショット 2019-03-06 15.00.01.png](https://qiita-image-store.s3.amazonaws.com/0/92989/62732532-70b3-a1f3-713b-7fd767053b3b.png)

index.htmlが同じフォルダ内にある場合はindex.htmlを削除してください。
削除すると、WordPress本来のTOP画面が表示されます。

## そのほか
CMSインストーラーでWordPressをインストールしたときのデフォルトのフォルダは`html/`直下になります。
<img width="446" alt="スクリーンショット 2019-03-06 14.59.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/92989/87ad46b6-1263-5c24-9b8a-e0833b32397e.png">

インストールするときは新規フォルダを作るか、index.htmlを削除するようにしましょう。
golang gzipをpostで送受信する

##送信
```go
func sendPostData() error {
	gz := new(bytes.Buffer)
	w := gzip.NewWriter(gz)
	if _, err := w.Write(j); err != nil {
		return err
	}
	if err := w.Close(); err != nil {
		return err
	}
	body := bytes.NewReader(gz.Bytes())
	req, err := http.NewRequest(http.MethodPost, "http://xxxx.example.com", body)
	if err != nil {
		return err
	}

	req.Header.Set("Content-Encoding", "gzip")
	res, err := http.DefaultClient.Do(req)
	if err != nil {
		return err
	}

	return nil　
}
```
##受信
```go
func getPostData(r *http.Request) error {
	reader, err := gzip.NewReader(r.Body)
	if err != nil {
		return err
	}
	defer r.Close()

	var b []byte
	scanner := bufio.NewScanner(reader)
	for scanner.Scan() {
		b = scanner.Bytes()
	}
	log.Println(string(b))

	return nil
}
```
PhpStorm: 使わないPHP拡張のクラスが補完の候補に上がらないようにしたい

PhpStormはクラス名などを途中まで入力すると補完の候補を出してくれる。補完の対象となるクラスは、PHPのコアのものやユーザ定義クラスだけでなく、PHP拡張のクラスまでと包括的で親切設計なのだ。

しかし、逆に補完が包括的すぎて普段使わない拡張のものまで候補にあがってきて選択ミスをしやすかったり、特によく使うコアのクラスよりも、めったに使わない拡張のクラスが上位に出てくると、うっとうしいことこの上ない。

<img width="894" alt="php-playground___Volumes_dev_php-playground__-_____ResultPattern_SuccessTest_php__php-playground_.png" src="https://qiita-image-store.s3.amazonaws.com/0/889/088234d8-30ce-412d-53b7-1a4e0cb4914e.png">

本稿では、使わないPHP拡張のクラスが補完の候補に上がらないようにする方法を紹介する。

## 特定のPHP拡張の補完を無効化する方法

「Navigate」→「Class」(macOSの場合<kbd>command</kbd> <kbd>O</kbd>がショートカットキー)で無効化したいクラスのファイルを開く。

開いたら、そのファイルがあるディレクトリを特定し、そこから拡張の名前を特定する:

<img width="736" alt="php-playground___Volumes_dev_php-playground__-___Library_Application_Support_JetBrains_Toolbox_apps_PhpStorm_ch-0_191_5849_26_PhpStorm_2019_1_EAP_app_Contents_plugins_php_lib_php_jar__stubs_http_http3_php_and_alis2___Volumes_dev_alis2__-___.png" src="https://qiita-image-store.s3.amazonaws.com/0/889/475360f7-8026-e4b0-82d2-0a03c3ba7dfe.png">

つづいて、「Preference」→「Language & Frameworks」→「PHP」を開き、「PHP Runtime」タブを開く:

<img width="1238" alt="Preferences.png" src="https://qiita-image-store.s3.amazonaws.com/0/889/23478fe9-cd00-89b8-eca6-982555b028cc.png">

「PHP Runtime」タブのツリーエリアをクリックしたら、無効化したい拡張名で検索する。検索して出てきた拡張のチェックを外す。

<img width="438" alt="Preferences.png" src="https://qiita-image-store.s3.amazonaws.com/0/889/73b738de-fd36-193c-dcbd-33ba324835d3.png">

あとは、「OK」を押してPreferenceを閉じる。

これで普段使わないPHP拡張のクラスが補完の候補に出てこなくなる。
オンプレでVS Code as a Serviceできるcode-serverを試す

タイトルの通り、[coder.com](https://coder.com) というサーバーで VS Code を動かしてブラウザから利用できるサービスの一部機能がオープンソース化されたので動かしてみた。

---

`README.md` に書いてある以上の情報はない

```sh
curl -fsSL https://github.com/codercom/code-server/releases/download/1.31.0-20/code-server-1.31.0-20-x86_64-linux.tar.gz | tar zx
cd code-server-1.31.0-20-x86_64-linux
./code-server ~
```

ブラウザで [https://localhost:8443](https://localhost:8443) にアクセス！
`./code-server` 実行時に表示されるパスワードを入力してね！

---

すごい・・・もうパソコンいらないじゃん

![screenshot](https://qiita-image-store.s3.amazonaws.com/0/339066/a898a8cd-2196-a154-9d53-b8fdc12b7105.png)
SpringBoot(STS)の起動でjavaw.exeのエラー

# 経緯
SpringBootとの出会いは、ある会社を調べていたら、出てきてなんだろうーと思って調べたところからです。
とにかく良い！ということで、まったく得意じゃないjavaだけど触ってみようかな？と思い、様々なURLを参照して構築に臨みました。

初めて投稿します。
不備等ありましたら、ご連絡ください。

#結果
HelloWorldすらできないレベル。
ちょっとがんばったら動いたので、同じような思いで入り口で躓いている人のために共有しようと思いました。

# 環境
Windows 10 64bit

# STSのインストール
SpringBootには、eclipseと実行環境がくっついているSTSというものが便利だそうです。

- 以下のURLから、STS4をダウンロードしました。

[STS Download URL] (https://spring.io/tools)

ファイル名は以下でした。
*spring-tool-suite-4-4.1.2.RELEASE-e4.10.0-win32.win32.x86_64.zip*

- C:ドライブの直下に、stsというフォルダーを作成しました。
- stsフォルダー内に先ほどダウンロードしたzipファイルを格納しました。
- zipファイルをstsフォルダー内で解凍しました。

この状態で SpringToolSuite4.exe を実行すると、以下のようなエラーが出力されます。
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/369361/c23db569-3637-d1d5-3e17-a96f44491aa5.png)

このエラーでググると、javaがインストールされていないとのこと。
よくよく見てみると、
`C:\sts\sts-4.1.2.RELEASE\jre\bin\javaw.exe`
という内容が出力されています。
この場所にjavaを配置すれば、起動できるのでは…？と思いました。

# javaのインストール
JREがjava runtimeで実行版だというぼんやりとした知識はあったので、インストールを試みます。
ですが、javaは単純にインストールすると、ほかの環境と競合したり、毎回バージョンアップ！バージョンアップ！うるさいイメージがあったので、zipから解凍して、前述のパスに配置することにしました。
STSを64bit版にしたので、javaも64bit版で。
JREがなぜか見つからなかったので、以下のURLから、JDKをダウンロード。(まずかったらごめんなさい…。)

[JDK Download URL] (https://www.oracle.com/technetwork/java/javase/downloads/jdk11-downloads-5066655.html)

ダウンロードしたファイル名は以下です。
*jdk-11.0.2_windows-x64_bin.zip*

以下の手順で、このファイルを前述のSTSが参照しているパスに配置します。

- ダウンロードしたzipファイルを、C:\sts\sts-4.1.2.RELEASEに配置します。
- 配置したzipファイルを解凍します。
- 解凍すると、「jdk-11.0.2」というフォルダーが作られます。<br />「jdk-11.0.2」フォルダーの名前を、「jre」に変更します。

これで、SpringToolSuite4が起動できると思います！

# 最初のプロジェクトを作成
- File > New > Spring Starter Project をクリック
- そのまま次へ
- 以下のチェックを入れ、次へ
    - Template Engines - Thymeleaf
    - Web - Web
- Finish

画面右下にプログレスバーが表示されるので、しばらく待ちます。

# Demoアプリケーションの起動
作成したdemoアプリケーションを起動します。

- プロジェクトを右クリック > Run As > Spring Boot App

以下のエラーが出てしまう…。

```
Exception in thread "main" java.lang.Error: Unresolved compilation problem: 
	String cannot be resolved to a type
  
	at com.example.demo.DemoApplication.main(DemoApplication.java:9)
```

Stringがない？

# JREを追加する
- Window > Preferences
- Java > Installed JREs
- Add > Standard VM > Next
- JRE home に "C:\sts\sts-4.1.2.RELEASE\jre" を指定。 > Finish
- Apply And Close をクリックします。
- STSがフリーズする…。
- どうしようもないのでSTSを強制終し、STSを再起動します。

# Demoアプリケーションを再度起動
プロジェクトを右クリック > Run As > Spring Boot App

```
  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::        (v2.1.3.RELEASE)
~(省略)~
DemoApplication in 2.981 seconds (JVM running for 4.501)
```

起動できました！

# 最後に
当初、STS 3.9.7で試していて、この事象に出くわし、Qiitaに投稿しようと思い、再現させようとしたところ、STS 4系であっさりうまくいってしまいました。
で、もう一度やったところ、再現し、STS 3.9.7と同様に試してみたところうまくいきました。
javaをインストールすれば簡単なのでしょうが、無理やりにでもなんとかしたかったので、このような内容になりました。

STS 3.9.7 の時はさらにMavenが邪魔をしてうまくいかないことがあったのですが、このページの内容にあわせ、以下の手順で解決できました。

- 一度、STSを閉じる
- ```C:\Users\<user>\.m2```のフォルダーを削除する
- STSを起動する
- Building workspaceをしばし待つ
- プロジェクトを右クリック > Maven > Update Project > OK
- しばし待つ
[Laravel] seederでデータベースにテストデータを入れる

#概要
今回は１つのusersテーブルを作ります。

| users      | 
|:-----------------:|
| id             | 
| name          | 
| text            |  

こんな感じ。これをseederを使ってテストデータを入れていきます。

#マイグレーション
データベースを作成します。

```terminal
php artisan make:migration create_users_table --create=users
```
諸々の設定。データベースにnameとtextのカラムを追加。

```php:create_users_table.php
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name', 50);
            $table->text('text');
            $table->timestamps();
        });
    }
```
migrateする。

```terminal
php artisan migrate
```

#モデル作成
次にテーブルに紐付くモデルを作る

```terminal
php artisan make:model User
```
モデルで、いじれるカラムの設定。

```php:User.php
class User extends Model
{
    protected $fillable = [
        'name',
        'text',
    ];
}
```

#ファクトリーとシーダー
ここでファクトリーを使います。使わなくてもいいのかも。
とりあえずモデルに紐付くファクトリーファイル作る。

```terminal
php artisan make:factory UserFactory --model=User
```

どこのカラムにどんなテストデータを入れるかの設定。

```php:UserFactory.php
$factory->define(App\User::class, function (Faker $faker) {
    return [
        'name' => 'exampleName',
        'text' => 'exampleText',
    ];
});
```

ファクトリーができたらシーダーを作る。

```terminal
php artisan make:seeder UsersTableSeeder
```
ファクトリーで定義されたUserモデルを50個作成。

```php:UsersTableSeeder.php
    public function run()
    {
        factory(User::class, 50)->create();
    }
```
DatabaseSeederでコールしてあげる。

```DatebaseSeeder.php
    public function run()
    {
        $this->call(UsersTableSeeder::class);
    }
```

ここまでできたら最後にartisanコマンド。

```terminal
php artisan db:seed
```

エラーが出たら下記のコマンドしてみるといいかも。

```terminal
composer dump-autoload

php artisan db:seed
```

#確認
Sequel Proで確認して見ます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/286470/765aab5b-642b-a6aa-f5d1-8b6640b2f168.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/286470/24262499-2ca3-eeca-92b9-e1bc3a90ae15.png)

いけてるっぽい！！

#まとめ
seederでテストデータの投入方法を見ました。
まだまだ勉強中です、、
Jupyter上でメモリ使用量とかプロットしたい → 自分で作ってみた

# 動機的なところ

ふと、WindowsのPCから、別のUbuntu環境のJupyterを使ったりする（個人利用なりJupyterHub的なもので）際に、メモリやらディスク使用量などを見ながら作業したいと感じる時がありました。

通常はそのままUbuntuのマシンで作業していれば、コマンドラインを起動してメモリやらを定期的に表示するコマンドを打てば済む話なのですが、別のPCの場合Jupyter上で対応が必要になります。
!マークの記号を使ったりすれば、Jupyter上でもコマンドは直接実行できますが、定期実行などにすると他のセルの実行がブロックされてしまう一方で、他の計算などを実行しながら並行して使用量を確認したいと感じます。

クラウドのサービス（Google ColaboratoryやKaggle Kernelなど）では、ノート上でメモリやディスク使用量が表示されるようにカスタマイズされています。

Kaggle Kernel上の表示例 :

![20190306_2.png](https://qiita-image-store.s3.amazonaws.com/0/228778/fcecd7e6-35db-3f49-40f4-b9057401733a.png)


そういった表示が欲しい・・ということで、自分で使う目的半分、遊びとD3.jsとかの勉強目的半分で、自分で作ってみました。

![20190306_3.png](https://qiita-image-store.s3.amazonaws.com/0/228778/fe6af509-4c49-f694-8587-f8f40248537b.png)


なお、ほとんどデバッグはしていない模様。


# こんな形になりました

- 定期的に実行され、自動でプロットの表示が更新されていきます。
    - 最大値に応じて、軸も自動でスケールしていきます。
- 他のセルの実行をブロックしません。
- 基本、UbuntuとかのLinux環境専用です。
- ローカルPCだったり、Kaggle Kernelなんかで使えます。ColaboratoryやAzureNotebooksなんかでは動きません。
    - ※色々頑張って対応しようと、何度か大きくコード書きなおしたりして試していたけど結局駄目でした。Python側で取得した値をColaboratory上のjsで定期的に参照するのが鬼門。。うまいこと実現できる方法をご存じの方コメントなどでご教示ください。
- 基本的なメモリやディスク使用量に加えて、GPUメモリの使用量なども表示されます（GPUが刺さっていれば）。Kaggle KernelではGPUメモリは現在表示されていないので、もし確認したい・・というケースに少し便利かもしれません。（バッチサイズ調整なんかで）
- NVidia以外のGPUでは十中八九動きません（環境的に、試してもいません）。
- IEとかEdgeとかでは対応していないSVGなんかの設定を使っているので、それらではきっと表示が崩れます（EdgeはChromiumベースになったら改善しそう）。
ChromeとかFireFoxとか使ってね。

- Python3系のみのサポートです。

# 使い方

PyPI登録してあるプロットライブラリに追加してあるので、pipでインストールできます。（0.2.1以降のバージョンで追加済み）

```
$ pip install plot_playground
```

また、GPUの値取得用に、以下のライブラリも利用しています。他のライブラリだけを使う際のことも考えて、デフォルトでは前述のpipコマンド実行時に自動で勝手にインストールされるようにはしていない（Dependencies指定にはしていない）ので、手動でインストールをお願いします。

```
$ gpustat==0.5.0
```

あとはノート上でimportして関数を実行するだけです。

```py
from plot_playground.stats import linux_stats_plot
linux_stats_plot.display_plot()
```

# Kaggle Kernelで使うときは

右のメニューの、Internetの設定を「Internet connected」にしないと、pipコマンドやらjsライブラリの読み込みやらで弾かれてしまうので、事前に設定をお願いします。（デフォルトではそうなっていません）

![20190306_4.png](https://qiita-image-store.s3.amazonaws.com/0/228778/a2416db6-2c4d-cfe4-ec33-f037266c555c.png)

# どんな感じか試してみたい！そんなときは・・

KaggleでPublicなKernelを追加しておきました。
Kaggleアカウントがあれば、forkしてセルを全部実行すれば動くと思いますのでお試しください。
[PlotPlayground - Linux stats plot example.](https://www.kaggle.com/simonritchie/plotplayground-linux-stats-plot-example)
Raspberry PiでなんとかしてLINEBoTを動かす

#はじめに
Raspberry Piを使ってLINEのメッセージを送受信するための環境設定をまとめておこうと思います。
さくらサーバーなどレンタルサーバーを使ったものは多く見つかりますが個人サーバーで行っているものが少なかったのでこれからLINEとRaspberry Piを組み合わせたIoTシステムを作りたい！という人の助けになれれば幸いです。

#環境の準備
基本的に複雑な機器は用意せず、Raspberry Piとネットーワーク環境のみで大丈夫です。

- Raspberry Pi
    - OS:Raspbian
    - IPアドレス固定
- ネットワーク環境
    - ポート開放
- LINEの個人アカウント

IPアドレスの固定については[こちら](https://qiita.com/hujuu/items/f3799946d761006c9852)を参照にして下さい。
#手順
##1.Apache2の導入
とりあえずいつもの

```
sudo apt-get update
sudo apt-get upgrade
```
Apache2とphp7.0をインストールします。
もし新バージョン出てたらそっちの方がいいかもしれないです。

```
sudo apt-get install apache2
sudo apt-get install php7.0
```
インストールが終わったら、念の為Apache2の起動をしておきます。

```
sudo systemctl start apache2
```

これで、Raspberry Piからアクセスする場合は
　http://localhost
別のネットワークから接続する場合は
　http://[ポート開放したグローバルIPアドレス]
からアクセスできます。

##2.ドメイン取得
[MyDNS](http://ipv4.mydns.jp/)をつかってドメインを取得します。
Apache2の導入も含めて
[お金をかけずにRaspberry Pi 2を外部公開サーバーにする手順(LAMP, MyDNS,DDNS,cron)](https://qiita.com/I-201/items/b7f345ca0f859dcb910e)
に書いてあるものを参考に導入して下さい。(丸投げ)

##3.SSL認証
LINEDeveloperに使用するためには、SSL認証する必要があるので無料でできる認証局に認証してもらいます。
実はドメインを取得したのもこれが目的になってます。

```
sudo certbot-auto certonly --webroot -w /var/www/html -d XXXXXXXXXXXX.mydns.jp --email XXXXXXXX@XXXX.XXX --agree-tos
```

XXXの所は各自が取得したドメイン名とメールアドレスに書き換えてください。
![https.JPG](https://qiita-image-store.s3.amazonaws.com/0/280621/c29e8bce-66f8-80f6-272c-93a6c5c61f3a.jpeg)　こんなふうに鍵マークがついていれば成功です。

##4.[Messaging API SDK for PHP](https://github.com/line/line-bot-sdk-php)のインストール
本来なら上リンクから直接ダウンロードを行って開発を行うべきなのですが、ライブラリ化されたものがあるのでそちらを使います。

```
cd /var/www/html
wget https://github.com/jyukikami/linebot_lib/archive/master.zip
unzip master.zip
```

##5.LINE準備
ここまできたら後は通常のLINEBotと同じです。Developerに登録して、アドレスを設定します。

[LINEDevelopers](https://developers.line.biz/ja/)
特に問題がなければ自分のLINE IDとパスワードでログインして大丈夫です。

登録が完了したらMessaging APIを作成し各種設定をします。

- アクセストークンの発行
![at.png](https://qiita-image-store.s3.amazonaws.com/0/280621/7d01f8f7-f230-faee-dd1c-d52e2c44d7db.png)

- Channel Secretの発行
![cd.png](https://qiita-image-store.s3.amazonaws.com/0/280621/a30f4bbc-1609-7b80-86f5-0f0bc237df81.png)
アクセストークンとChannel Secretは/var/www/html/linebot_lib-master内にあるdefine.phpに記入します。

```php:define.php
define('ACCESS_TOKEN','xxxxxxxxx');  //アクセストークン
define('CHANNEL_SECRET','xxxxxxxx');  //シークレット
```

- Webhook URLの設定
![wurl.png](https://qiita-image-store.s3.amazonaws.com/0/280621/113a2964-bdfd-8366-5a65-d27b3358987d.png)

```
https://取得したドメイン名/linebot_lib-master/linebot_lib-master/sample_linebot.php
```

- 自動応答メッセージを利用しないに設定
![outo.png](https://qiita-image-store.s3.amazonaws.com/0/280621/1fb928d9-6b82-7c36-9536-cec5293c8c42.png)

自動応答メッセージを利用したままにしておくとphpで応答するたびに自動応答メッセージが出てしまうので切っておく。

これで設定は終了なので、[MessagingAPIでできることまとめ](https://qiita.com/kakakaori830/items/52e52d969800de61ce28)や[LINE BOTの作り方](http://ysklog.net/line_bot/4551.html)などを参考にしながらphpを記入することでLINEBOTが使えるようになります。

#まとめ
Raspberry Piを証明書付きのサーバーにすることによってLINEに対応させ自動応答メッセージを自作したり、AI解析をしたりすることができます。
そのままGPIOなどの操作も行えるのでLINEを使ったIoTなどに活用できると面白そうです。
[Apple] Xcode初心者です。ビルド成功するのにコンパイルエラーが消えません

# 環境

* Xcode 10.1
* macOS Mojave 10.14.3


# 現象

Xcodeでアプリを作りました。
ビルド成功し、実行すれば動きます。
それなのに、エディタ上のコンパイルエラーが消えません。

# 解決策

`~/Library/Developer/Xcode/DerivedData` の下にプロジェクト毎のフォルダがあるので、そのフォルダを消します。

# 原因

キャッシュ？
でしょうか？

# 参考リンク

昔からある不具合っぽいですね。

Xcode shows many errors but program compiles and runs fine (in both simulator and device)
https://stackoverflow.com/questions/12023484/xcode-shows-many-errors-but-program-compiles-and-runs-fine-in-both-simulator-an/20523935

Xcode 4.5.2 errors are found but Build is marked as Succeeded
https://stackoverflow.com/questions/13954229/xcode-4-5-2-errors-are-found-but-build-is-marked-as-succeeded
【ドコモのAIエージェントAPI】ロボスタトーク設定用のコマンドラインプログラムを公開します

#ロボスタトーク設定用のコマンドラインプログラムを公開します

ロボスタトークとは、ドコモのAIエージェントAPI（旧称「project:SEBASTIEN」）を利用した”開発者応援プラットフォーム”です。
さまざまなプラットフォームで、簡単な会話やロボスタニュースなどを楽しむことができます。

公式ページ
https://robotstart.co.jp/robostalk/

#コマンドライン対話プログラム

ドコモのAIエージェントAPIと接続し、チャット形式で対話が出来ます。
ロボスタトークの制御コマンドも使えます！

#インストール
pythonSDKがインストールされた状態で、下記フォルダにchat.pyを配置してください。

/home/pi/codama/codama-doc/sebastien/example

#実行のしかた

一度、main.pyの動作に成功している状態で、下記を実行ください。
※設定ファイルなどは、main.pyのものを使用します。

```
cd /home/pi/codama/codama-doc/sebastien/example
./python3 chat.py
```

#ダウンロード

chat.zip
https://robotstart.co.jp/robostalk/chat.zip
MacにMySQL 8をインストールしたけどmysqlコマンドが動かなかった

おま環かもしれないが、掲題の通り。
調べたらいろんな解決策出てたけど、とりあえずこれが一番正しいと思います(フラグ)

# 環境
MBP macOS Mojave
MySQL 8.0.15 Community version

# 経緯
とあるサービスを作るため、MySQLを普通にインストールしようとした。

使ったことある5系にしようか迷ったけど、最大2倍速!みたいな謳い文句に惹かれて[ここ](https://dev.mysql.com/downloads/mysql/)から2019/3/5時点で最新のMySQL Community Serverをインストールした。

<img width="1182" alt="スクリーンショット 2019-03-06 13.31.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/207329/1dcb5556-813a-5413-6ae5-75afcb60e0f8.png">

上図の一番上のやつでインストール。

どうでも良いけど、MySQL8ってrootにpassword設定するの必須なのね。
めんどくさいけどしょうがないね。

で、終わったのでお試しのつもりでmysqlコマンド叩いてみると、

```shell-session
MBP:~ user$ mysql
-bash: mysql: command not found
```

おお、、、

で、これまで気にしたことなかったし、そもそも存在すら知らなかったけど、MySQL Preference Paneを見てみた。

<img width="666" alt="スクリーンショット 2019-03-06 13.36.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/207329/4376176f-2570-4123-8de4-6471194bbf55.png">

この一番下にあるやつ。MySQLと一緒にインストールされる。

<img width="665" alt="スクリーンショット 2019-03-06 13.36.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/207329/a235468b-3bb8-e25b-9fc9-b0e2cee70f02.png">

見方知らないけど、どう考えてもちゃんと動いてるようにしか見えない。

ということは、PATHが通ってない説が濃厚。

# 解決
https://stackoverflow.com/questions/30990488/how-do-i-install-command-line-mysql-client-on-mac

このQAの、JackSparrowさんが答えてるやつが多分もっとも正当。

端的に書くと、

```shell-session
echo 'export PATH=/usr/local/mysql/bin:$PATH' >> ~/.bash_profile
```

このコマンドながしなよーって感じ。

あれ、コマンドって/usr/local/bin/にあるんじゃないっけ？って思ったんだけど、
見てみたらたしかに/usr/local/の中にいました、mysql。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/207329/0fc8c4ba-c637-4ddd-f8f5-2ec8563e82e9.png)

このヤロウ！！

ということで、上記コマンドを流してから

```shell-session
source ~/.bash_profile
```

してあげましょう。

これで解決するはず〜〜
Go 1.12のmodulesを試す

# はじめに
　久々にgolangを触ったら、バージョンが1.12になっていて、標準でバージョン管理機構が備わったとのことでしたので試してみました。

# 環境
|   | バージョン |
|---|:---------:|
| OS | macOS 10.14.3 |
| golang | 1.12 |

# 手順
1. 環境変数に**GO111MODULE=on**を追加する。1.13では**デフォルトでon**になる、とのこと
    ```bash:.bash_profile
    # 以下を追加
    export GO111MODULE=on
    ```
    <br>

2. プロジェクトディレクトリを作る
    ```bash
    $ source ~/.bash_profile
    $ mkdir sample
    $ cd sample
    ```
    <br>

3. モジュール管理ファイルを用意する
    ```bash
    $ go mod init sample
    ```
    - 上記を実行すると、新たに __go.mod__ が生成される
    - 生成するバイナリは、ここで指定した名前になる(今回は"sample")
    <br>

4. コードを書く(以下はサンプル)
    ```golang:main.go
    package main
    
    import (
        "fmt"
        "golang.org/x/text/width"
    )
    
    func main() {
        // 半角文字を全角文字にするプログラム
        text := "123XYZ"
        fmt.Println("半角:", text)
        fmt.Println("全角:", width.Widen.String(text))
    }
    ```
    <br>

5. 依存するモジュールをダウンロードする
    ```bash
    $ go get golang.org/x/text/width
    ```
    - 上記を実行すると、新たに**go.sum**が生成され、**go.mod**に依存関係が追記される
    - この手順を飛ばすことも可能(`go build`で自動的に行われる)
    <br>

6. ビルド ＆ 実行する
    ```bash
    $ go build
    $ ./sample
    半角: 123XYZ
    全角: １２３ＸＹＺ
    ```

# 感想
　個人的に、あまり環境をいじるのが好きでない為、この手のツールを標準で用意してもらえるのは大変嬉しいです。仕組みがあまり複雑でない点も好みです。
MySQLで時系列の集計用テーブルを効率よく差分更新するアイデア

# レポート用の集計テーブル問題

レポート表示用に別途、集計テーブルを用いることがあります。

大量のレコードがあるテーブルに直接クエリで集計すると時間がかかるので、`GROUP BY`、`COUNT`、`SUM`などを駆使して必要な粒度にまるめたテーブルを作る手法です。場合によっては圧倒的にパフォーマンスがよくなります。

例えばシンプルに記事(`article`)ごとのページビューを記録したテーブルがあるとします。

|name|type|
|----|----|
|article|VARCHAR|
|viewed_at|DATETIME|


これを日々の記事ごとのアクセス数に集計します。

|name|type|
|----|----|
|article|VARCHAR|
|viewed_on|DATE|
|views|INT|


通常であれば、

```sql
/* パターン1 */
CREATE TABLE reports (
  SELECT article, CAST(viewed_at AS DATE) AS viewed_on, COUNT(*) AS views
  FROM journals
  GROUP BY article, CAST(viewed_at AS DATE)
)
```

とか、

```sql
/* パターン2 */
INSERT INTO reports (
  article, the_date,  total
) VALUES (
  SELECT article, CAST(viewed_at AS DATE) AS viewed_on, COUNT(*) AS views
  FROM journals
  GROUP BY article, CAST(viewed_at AS DATE)
)
```

みたいな感じでしょうか。

## 問題点

これらの方法の問題点は、毎回`journals`テーブル全体を集計するので、レコードが増えていくとその分だけ処理時間が長くなっていくことです。

パターン2の方法であれば差分実行できそうですが、すでに存在する日付の集計を事前に削除するなどしないと集計が積み上がっておかしな数値になってしまいます。

SQL1本でうまくできないかと考え、こんなやり方を思いつきました。

## 差分更新のアイデア

1. 集計テーブルに文字列のIDを用意する
2. `GROUP BY`する値からグループキーを生成してハッシュ文字列をIDにする
3. `INSERT`ではなく、なければ挿入、あれば更新(`UPSERT`)する

|name|type|
|----|----|
|id|VARCHAR(42) PIRMARY KEY|
|article|VARCHAR|
|viewed_on|DATE|
|views|INT|

```sql
INSERT INTO reports (
  id, article, viewed_on, total
) SELECT * FROM (
  SELECT
    SHA1(CONCAT(IFNULL(article, ''), ':', CAST(viewed_at AS DATE))) AS id,
    article, CAST(viewed_at AS DATE) AS viewed_on, COUNT(*) AS views
  FROM journals
  WHERE viewed_at >= '任意の時刻'
  GROUP BY
    article,
    CAST(viewed_at AS DATE)
) AS t
ON DUPLICATE KEY UPDATE
  total = t.total
```

MySQLでは`ON DUPLICATE KEY UPDATE`で`UPSERT`できます。

この方法の利点は次の通りです。

* 任意の期間について絞り込んで処理できる
* 任意の時点で今日の分も正しい値が得られる
* SQL文ひとつでデータの整合性がとれる

SHA1を使いましたがハッシュ関数は何でもよいです。グループキーが短ければ使わなくてもいいかもしれません。

なんとなくハッシュ関数を使った方がインデックス効きやすいかなーと思います。値の衝突リスクもありますがまあレポートなので…

個人的には気楽で気に入ったのですが、いかがでしょうか。
react-helmetでheadにインラインJavascriptを記述したい時のメモ

ほぼ、以下のコピペ。
[React Helmet - Reference Guide](https://github.com/nfl/react-helmet#reference-guide)


Javascriptの埋め込みは以下の通り。

```jsx
<Helmet>
    <script type="application/javascript">{`
        {
            console.log("success!!");
        }
    `}</script>
</Helmet>
```

noscriptとかcss、構造化データも同様に埋め込み可。

```jsx
<Helmet>
    <noscript>{`
        <link rel="stylesheet" type="text/css" href="foo.css" />
    `}</noscript>
</Helmet>
```

```jsx
<Helmet>
    <style type="text/css">{`
        body {
            background-color: blue;
        }

        p {
            font-size: 12px;
        }
    `}</style>
</Helmet>
```

```jsx
<Helmet>
    <script type="application/ld+json">{`
        {
            "@context": "http://schema.org"
        }
    `}</script>
</Helmet>
```
php-master-changes 2019-03-05

今日は FFI のコールバックサポートの修正、実質的に ZPP の挙動テストとなっているだけの過剰なテストコードの削除、mbstring のテストのリファクタがあった！

# 2019-03-05
## dstogov: Fixed support for callbacks with "void" return type
- https://github.com/php/php-src/commit/ff5fa0d6312e80c4862f046e29efee2db9cda1cd
- [7.4~]
- ext/ffi で、返値 void のコールバックの扱いを修正
- PHP 側のコールバックがいつも返り値を持つ前提で C 側へ送るコードがあった、みたいな感じ？

## nikic: Remove tests for zpp failure conditions
- https://github.com/php/php-src/commit/b26df0e39538d17f3d84481d17deb3b9c41873de
- [7.4~]
- 引き続き ZPP の実装をテストしているに過ぎないテストを削除

## nikic: Remove more zpp error tests
- https://github.com/php/php-src/commit/94d509363d996d3ab8b5441f5b0668c0f22799e6
- [7.4~]
- ZPP の実装をテストしているに過ぎないテストをもっと削除

## nikic: Remove custom error handler in mbstring tests
- https://github.com/php/php-src/commit/4bd18db8cc410ed65d029ad2f57b8fa759d1c193
- [7.4~]
- ext/mbstring で、テストで使っていたエラーハンドラによる整形を潰し、期待するエラー（メッセージ）が分かりやすくなるよう修正

## nikic: Remove more zpp error/variation tests
- https://github.com/php/php-src/commit/7e3f4a23907ade6b637c50c4a370d53501c5f9ef
- [7.4~]
- ZPP の実装をテストしているに過ぎないテストをもーっと削除
- このへん 50:1 で受理された [PHP RFC: Consistent type errors for internal functions](https://wiki.php.net/rfc/consistent_type_errors) でテストがこけまくるようになるのもあって抹殺が必要くさい、大変そう（小並感）
atomでsass-autocompileを使用する方法

Sassを使用していますが、Atomでコンパイルできるように「[sass-autocompile](https://atom.io/packages/sass-autocompile)」というパッケージを導入しました。
私自身が行なった導入手順と使い方について、備忘的に記載します。（使用しているOSは、macosです）

# 導入手順
1. Homebrewのインストール
2. nodebrew、Node.jsのインストール
3. node-sassのインストール
4. sass-autocompileの設定変更

## 1. Homebrewのインストール
まず、Homebrewがインストールされているか確認します。

```
$ brew -v
Homebrew 2.0.2
Homebrew/homebrew-core (git revision 623c4; last commit 2019-02-27)
```
Homebrewのversionが表示されれば、すでにインストールされています。

https://qiita.com/balius_1064/items/ac7dff5ef10eaf69996f
を参考にさせてもらい、インストールしました。

## 2. nodebrew、Node.jsのインストール
こちらもまず、すでにNode.jsがインストールされているか確認します。

```
$ node -v
v10.15.1
```
こちらも上記のようにversionが表示されていれば、すでにインストールされています。

https://qiita.com/limonene/items/a10c2755dd2784357c43
を参考にさせてもらい、nodebrew、Node.jsをインストールしました。

## 3. npm-scriptsでの設定変更
npm-scriptsで、node-sassをインストールします。

```
$ npm install -g node-sass
```
正しくインストールされているか確認します。

```
$ node-sass -v
node-sass	4.11.0	(Wrapper)	[JavaScript]
libsass  	3.5.4	(Sass Compiler)	[C/C++]
```
こちらも上記のようにversionが表示されていれば、すでにインストールされています。
## 4. sass-autocompileの設定変更
Atomを開きます。

1. 環境設定＞インストールより、「[sass-autocompile](https://atom.io/packages/sass-autocompile)」をインストールします。
2. 環境設定＞パッケージより、「[sass-autocompile](https://atom.io/packages/sass-autocompile)」の設定を開きます。
3. 基本defaultのままで良いと思いますが、私の場合、scssディレクトリとcssディレクトリを分けて、同じ階層に配置しているので、以下項目を変更しました。
    - Filename pattern for 'compressed' compiled files
        - ../css/$1.min.css
    - Filename pattern for 'compact' compiled files
        - ../css/$1.compact.css
    - Filename pattern for 'nested' compiled files
        - ../css/$1.nested.css
    - Filename pattern for 'expanded' compiled files
        - ../css/$1.css

4. 「Include paths」に、scssディレクトリまでの絶対パスを設定します。
   例： /Users/hogehoge/vmbox/workspace/app/assets/scss
5. 「Path to 'node-sass' command」に、インストールしたnode-sassが格納されているディレクトリまでの絶対パスを設定します。
   例：　/Users/hogehoge/.nodebrew/current/bin

# 使い方
sass-autocompileの設定にある、KeybindingsがEnableであることを確認します。
コンパイルしたいscssファイルを開いた上で、ctrl-shift-Cでコンパイルが実行されます。
成功すると、画面下部に、
「SASS-AutoCompile: Successfully compiled」のようなメッセージが出てきます。

# 最後に
以上私が行なった設定でした。もっと便利な方法があったり、誤りや不足している点がありましたら、やさしくコメントいただければ幸いです。
Railsサーバー再起動が必要な変更

## ファイル変更に伴うRailsサーバー再起動が
### 不要
 `app/` `config/routes.rb`
（＋ `public/`, `vendor/assets/`）
### 必要
`上記以外`
例：yml、etc...

[When do I need to restart server in Rails?](https://stackoverflow.com/questions/17729345/when-do-i-need-to-restart-server-in-rails)

[Railsのファイルの変更の自動読み込みについて](https://ja.stackoverflow.com/questions/8228/rails%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E5%A4%89%E6%9B%B4%E3%81%AE%E8%87%AA%E5%8B%95%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/8230#8230)
いけてないWEBサイト、アプリの保守開発の中で、修正する順番の考察

#順番

1. インフラ/セキュリティ(ネットワーク、ミドルウェア、WAF、ウイルス対策、UTM)
- 監視・運用
- 初歩的なSEOチェック、修正
- ビジネスフロー(そもそもビジネスとして成り立ってないことも多いのでは・・・)
- ビジネスロジック (特にセキュリティ・パフォーマンス)
- テスト自動化 CI/CD
- フロント
  1. デザインの見直し・統一
  - フレームワーク導入 効率化
Amazon S3についてまとめてみた

# S3
S3とは安価で非常に耐久性があるオブジェクトストレージです。  
S3にデータを保存するには特定のリージョンにバケットを作成し、その中にKVS形式でファイルをアップロードすることができます。  
各オブジェクトには一意となるURLが付与されアクセスが可能となります。  
その為、バケット名はAWSの全アカウントで一意とする必要があり、既に使用されているバケットと同名のものは作成できません。
## 整合性に関して
S3は格納したデータを複数のデータセンタに複製することで非常に高いデータ耐久性を実現しています。  
しかし、そのためにデータの整合性については注意が必要となります。
* 新しいオブジェクトの書き込み(PUT)
新規アップロード直後に一覧表示を実施してもそのオブジェクトが表示されないことがある。  
S3から「完了」が返されると正常に一覧表示がされる。
* 既存オブジェクトの上書き(PUT)
既存オブジェクトを上書きし、S3から「完了」が返された後でも、そのオブジェクトにアクセスした際に上書き前データが返されることがある。  
浸透が十分に済めば正常に上書き後のデータが返される。
* オブジェクトの削除
オブジェクトを削除し「完了」が返された後でも、削除したはずのオブジェクトにアクセスできることがある。  
浸透が十分に済めば結果的に削除済みオブジェクトにアクセスできなくなる。  
## アクセス制限に関して
デフォルトではそのリソースを作成したアカウントだけにアクセス制限が与えられているが、バケットとオブジェクトには適切なアクセス制限をかける必要があります。  
アクセス管理の方法には3つあります。  
* アクセスコントロールリスト(ACL)
他のAWSアカウントにアクセス権限を与える場合。
* バケットポリシー
自分のAWSアカウント内のIAMユーザやグループにアクセス制限を与える場合。  
バケット毎に設定。
* IAMポリシー
同上。
S3へのアクセス許可を設定したIAMポリシーを自アカウント内のIAMユーザやグループ、ロールに割り当てる。
* 署名(期限)付きURL
特定のオブジェクトに対し、特定のエンドユーザに対しアクセスさせたい場合等に適している。  
通常のオブジェクトURLに対し、AWS側が発行したシグネチャー付きのURL。
## バージョニング機能
S3にはバージョニング機能があり、バケット単位で有効にすることが可能です。  
バージョニング機能を有効にしたバケットではオブジェクトを誤って上書きしたり削除した後でも、操作前のオブジェクトを復元することができます。  
バージョニング機能を有効にしたバケットに格納されるオブジェクトにはキーの他にバージョンIDが付与されるため、上書きしたり削除した後でも操作前のオブジェクトを保持することができます。
Windows 10 Pro x64 + Excel2016 x86 VBA で指定フォルダ以下のファイルの一覧を取得する

#目的
dir() を使用したものはよく見るのだけど、FileSystemObjectを使って実装してみる
以下検討事項
・ファイル名用の配列はモジュール・ローカルが良いのかどうか？
・拡張子は Optional にするべき？
・追加の Optional としては、フォルダ/ファイルのフラグ追加はどうかな？
##サンプルコード

```vb

'=================================================================
' 名 称 : FileProcMain
' 機 能 : 指定フォルダ以下のファイル取得後表示する
' 　　　: 名前とか特に意味はない 
'=================================================================
Sub FileProcMain()
'
    Dim fList()     As String
    Dim cnt         As Integer
'
    ReDim fList(0)
    Call getFileList("/path/to/target/folder", "py", fList())
'
    For cnt = 1 To UBound(fList)
        Debug.Print (fList(cnt))
    Next
'
End Sub

'=================================================================
' 名 称 : getFileList
' 機 能 : 指定フォルダ以下のファイル名の一覧を取得する
'=================================================================
Sub getFileList(astrPath As String, astrExt As String, aList() As String)
'
    Dim objFso      As New FileSystemObject
    Dim objFolders  As Folder
    Dim objFiles    As File
    Dim cnt         As Integer
    '
    '   サブフォルダを取得する
    '
    For Each objFolders In objFso.GetFolder(astrPath).SubFolders
        Call getFileList(objFolders.Path, astrExt, aList)
    Next
    '
    '   ファイルを取得する
    '   このフォルダにあるサブフォルダ以下のファイル一覧は取得済
    '
    For Each objFiles In objFso.GetFolder(astrPath).Files
        '
        '   指定拡張子のファイルのみを処理対象とする
        '
        If StrConv(objFso.GetExtensionName(objFiles.Name), vbUpperCase) = StrConv(astrExt, vbUpperCase) Then
            cnt = UBound(aList)
            ReDim Preserve aList(cnt + 1)

            aList(cnt + 1) = objFso.BuildPath(astrPath, objFiles.Name)
        End If
    Next
'
End Sub
```
[WIP]Rails.application.eager_load!

## config.eager_load
> config.eager_loadをtrueにすると、config.eager_load_namespacesに登録された事前一括読み込み(eager loading)用の名前空間をすべて読み込みます。ここにはアプリケーション、エンジン、Railsフレームワークを含むあらゆる登録済み名前空間が含まれます。

## Rails.application.eager_load!
`config.eager_load`の値にによらず、クラスの存在確認をできるようにしたい場合に使用する。
`config.eager_load = true` と同じロード処理をその場で実行する。

使用状況：`gem側で強制的にクラス存在確認を有効にしたい時`


## 参考
[Railsの config.eager_load はModelやControllerを読み込むタイミングを制御できる](https://qiita.com/muramurasan/items/305bd3d78d67b646bc06)

[const_defined? メソッド](https://ref.xaio.jp/ruby/classes/module/const_defined)
クラスやモジュールの中に定数があるかどうかを調べる

[Ruby on Railsのeager_load_pathsの仕組みを紐解く。](https://note.mu/teitei_tk/n/ne5ae711719b1)

[5 autoload_pathsとeager_load_paths](https://railsguides.jp/autoloading_and_reloading_constants.html#autoload-paths%E3%81%A8eager-load-paths)
>Railsにはファイルを探索する$LOAD_PATHに似た、ディレクトリのコレクションがあります。このコレクションはautoload_pathsと呼ばれており、デフォルトで以下が含まれます。
>
- 起動時にアプリケーションやエンジンのappディレクトリ以下に存在するすべてのサブディレクトリ（app/controllersなど）。app以下に置かれるapp/workersなどのカスタムディレクトリは、すべてautoload_pathsに自動的に属するので、デフォルトのディレクトリである必要はない。
- アプリケーションやエンジンのすべてのapp/*/concerns第2サブディレクトリ。
- test/mailers/previewsディレクトリ。
>
eager_load_pathsは、初期段階では上のappパスになります。
>
通常、ファイルがeager_load設定やcache_classes設定に応じて自動読み込みされる方法は、developmentモード/productionモード/testモードでそれぞれ変わります。
>
autoload_pathsは初期化中に算出され、キャッシュされます。ディレクトリ構造が変更された場合、変更を反映するにはアプリケーションを再起動する必要があります。
PostgreSQLのアーキテクチャ

# 以下参考資料を読むと良い
### 参考資料
[PostgreSQLアーキテクチャ入門（INSIGHT OUT 2011）](https://www.slideshare.net/uptimejp/postgresqlinsight-out-2011)

# 気になったポイント
* テーブルに対してレコードを追加(INSERT)した場合は、データファイル末尾にレコードが追加される
* テーブルに対してレコードを削除(DELETE)した場合は、レコードに削除マークが付けられる
* テーブルに対してレコードを更新(UPDATE)した場合は、旧レコードに削除マークが付けられ、新レコードがデータファイル末尾に追加される
* 削除マークが付けられたレコードはバキューム後で再利用可能になる
* パフォーマンスチューニングの考え方はOracleなどの他のRDBMSと変わらない

# スライド抜粋
* p8
![image.png](https://qiita-image-store.s3.amazonaws.com/0/367069/b2e43c85-d225-40ab-dfaa-89dfaeb3df50.png)

* p9
![image.png](https://qiita-image-store.s3.amazonaws.com/0/367069/71bc1edf-7f05-3857-7208-7a422337f63a.png)

* p11
![image.png](https://qiita-image-store.s3.amazonaws.com/0/367069/aaf05482-2af3-f9e0-6149-7d6de240564a.png)

* p19
![image.png](https://qiita-image-store.s3.amazonaws.com/0/367069/bf757312-459d-e293-dabc-c854bf058563.png)

* p30
![image.png](https://qiita-image-store.s3.amazonaws.com/0/367069/a3c163d0-8fd1-0113-672f-573a257fbded.png)

* p33
![image.png](https://qiita-image-store.s3.amazonaws.com/0/367069/b75bfcbc-2fc4-78f8-b598-185fb580fa79.png)

* p37
![image.png](https://qiita-image-store.s3.amazonaws.com/0/367069/087bc913-1c7b-a186-de49-40b127449f45.png)
Bitriseで自分の作った秘密鍵を登録する🔑

先日、`bitrise`というクラウドCIを導入する機会があり、その時ハマった内容を書いていこうと思います。

# Bitrise
モバイルアプリ（Android、iOS）の為のCI。
使い方についてはいろんな記事が出ているので割愛。

## 対象者

`SSH key`の設定をマニュアルで行おうとしたら`invalid error`と言われた人

## 原因
ほとんどの人が[公式ページ](https://devcenter.bitrise.io/jp/faq/how-to-generate-ssh-keypair/)を見て以下のコマンドを叩いたと思います。

```shell
$ ssh-keygen -t rsa -b 4096 -P '' -f ./bitrise-ssh
```

このコマンドを打って生成された秘密鍵のヘッダー、フッターにかかれている文字を確認してみてください。

```
-----BEGIN OPENSSH PRIVATE KEY-----
...
...
...
-----END OPENSSH PRIVATE KEY-----
```

OPENSSH？？？RSAじゃないの？？？フォーマット違いでinvalidになっていたようです。
期待値としてはここは`RSA`で出力されてほしいところです。
本当のところを言うとこのフォーマットは秘密鍵の新しいフォーマットらしいので、`bitrise`さん対応お願いしますと言いたいところなのですが。


## 対応策

上記コマンドにオプションをつけてあげる。

```shell
$ ssh-keygen -m PEM -t rsa -b 4096 -P '' -f ./bitrise-ssh
```

参考：https://serverfault.com/questions/939909/ssh-keygen-does-not-create-rsa-private-key


## 感想

`Bitrise`に限った話じゃない気もしてる。（秘密鍵扱うサービス全般）
`AUTO`使えやって話なんですけどね。
2日目(2)：Scaffoldを用いた掲示板作成

[2日目(1)のRuby認定試験を用いた確認](https://qiita.com/OriverK/items/8ab1d66c626a00c68f38)のつづき

　　　　　　　　 
#使用環境
ホストOS: Windows10 home
仮想環境OS: Ubuntu Bento/Bionic
Ruby：2.51
Rails:5.2.2
エディタ:nano

#Scaffoldを用いたページ作成
##Scaffoldとは
使用するデータの型などを指定して、作りたいものの土台(アプリケーションの雛形）を作成。
*Scaffoldは英で足場の意で、個人的には初段階用の便利簡単即席ツールという認識。

##まずrails newあたりから、rails serverまで。
```:terminal
vagrant ssh

rails new sample -d mysql
cd sample
```
```:Gemfile
# Gemfile内のmini-racerをコメントアウト
bundle install
# bundlerというgemを使って、Gemfile記載内容に依ってgemをインストール
```
```config/database.yml
# passwordを書き込む。
rails db:create
# database.ymlを読み込み，これに基づいてデータベースを作成
```
```
rails server
```

##Scaffold使用段階
```:terminal
rails generate model User name:string email:string sex:integer age:integer address:integer attendance:integer opinion:text
# rails generate scaffold (コントローラ名/モデル名) カラム名1:データ型1 カラム名2:データ型 2 …

rails db:migrate
```

>Railsドキュメントより(http://railsdoc.com/references/rake%20db:migrate)
>>rails db:migrateを実行
>>schema_migrationsテーブルを調べ、存在しなければ作成
>>db/migrateディレクトリ内のすべてのマイグレーションファイルを調べる
>>データベースの現在のバージョンと異なるバージョンがあった場合、データベースに適応
>>schema_migrationsテーブルの更新
```

この状態で、rails sで立ち上げ、localhost:3000/usersに接続し、データ入力しようとすると、
![dc16e3b0540b67f8e5999a15dde5ad82.jpg](https://qiita-image-store.s3.amazonaws.com/0/294402/e5e0fca3-7a91-c3bf-809b-8d87535916e6.jpeg)

のように、integer型で指定したカラムに±∞の数値を入力できてしまう。
そこで

```app/models/user.rb
class User < ApplicationRecord                                                                                                                                
  enum sex: { male: 0, female: 1 }
end
```
```app/views/users/_form.html.erb
# ラジオボタンに変更
<div class"field">
<%= form.label :sex %>
<%= form.radio_button :sex, 'male' %>男性
<%= form.radio_button :sex, 'female' %>女性
</div>
```
とすると、性別がラジオボタンとなり、意図したデータ入力ができる。

その他のカラムも同様にラジオボタンに変更するなり出来る。
画像のリサイズをpythonでやるためのメモ

## 概要
指定フォルダーに入ってるjpegを縦横のサイズが大きい方を1600にしてリサイズする。

## コード
https://gist.github.com/kenjiSpecial/03dd66a7d0507fd0d33c0520403393d7

## 参考にしたサイト
Pythonの環境設定
https://qiita.com/po3rin/items/5c853bc172e5de330148

Pillowで画像を一括リサイズ
https://note.nkmk.me/python-pillow-image-resize/

jsonを書き出すさいに参考
https://stackabuse.com/reading-and-writing-json-to-a-file-in-python/

path libの返す値をstringに変換する
https://stackoverflow.com/questions/42513056/how-to-get-absolute-path-of-a-pathlib-path-object

json書き出し時に文字化けしたときにやる処理
https://cortyuming.hateblo.jp/entry/20140920/p2

10未満の数字の先頭に

濁点を結合する
http://labs.timedia.co.jp/2018/04/post-57.html

## 新しく学んだキーワード

Tuple
https://www.programiz.com/python-programming/tuple
Loading class `com.mysql.jdbc.Driver'. This is deprecated.エラーの意味と解決

#問題
Loading class `com.mysql.jdbc.Driver'. This is deprecated.

##意味
com.mysql.jdbc.Driverをロードします。非推奨です。

##解決
com.mysql.cj.jdbc.Driverを使用する。
（問題の文に続いてThe new driver class is `com.mysql.cj.jdbc.Driver'.(＝新しいドライバーはcom.mysql.cj.jdbc.Driverです)とあるので）

##方法（やることは二つ）


###Step1:
下記のようなコードがあるはずなので、com.mysql.jdbc.Driverの部分をcom.mysql.cj.jdbc.Driverに変更する。


```java:example.java
static {
		//JDBCドライバのロード
		String drv="com.mysql.jdbc.Driver";
		try {
			Class.forName(drv);
		}catch(ClassNotFoundException e) {
			System.out.println("ドライバがありません"+e.getMessage());
		}
```

###Step2:
DBViewer開く。使っているデータベースを右クリック➡『編集』➡『次へ』。
【接続情報】のJDVC Driver(J):の欄の、com.mysql.jdbc.Driverの部分をcom.mysql.cj.jdbc.Driverに変更する。完了。
Javaで素因数分解プログラムを書きました

#Javaで素因数分解
一昨日から本格的にJavaの講義を受けていて、do-while文まで学習したあたりで
素因数分解プログラムを書いてみることになったので、その備忘録です。
（昨日書いた素数判定プログラムを元にしています。）

```Soinsu.java
package sample_0306;

import java.util.Scanner;

public class Soinsu {

	public static void main(String[] args) {

		Scanner sc = new Scanner(System.in);
		int num;
		System.out.println("素因数分解");

		while (true) {
			System.out.print("2以上の整数を入力してください。：");
			num = sc.nextInt();

			if (num < 2) {
				System.out.println("2よりも小さい整数です。");
			} else
				break;
		}

		int x = num;
		System.out.print(num + " = ");

		for (int i = 2;i <= num;) {
			if (x % i == 0) { // 最小の因数を求める 
				System.out.print(i);
				if (x != i)
					System.out.print(" * "); // xと因数が同値になったら＊の挿入をやめる
				x /= i; // 最小の因数で割った数を代入する
			} else
				i++;
		}
	}

}
```
#内容
1. while文で入力内容が2未満であるものを弾いて再入力させる。
2. while文をbreakで脱出し、入力が2以上であるものをif文で判定。
3. 2から順に割っていき、割り切れたらその数を表示。
4. xと因数が同値でない（まだ素因数分解できる）ときは＊を表示する。
5. 割り切れない場合はiに1を足してループする。

#コメント
21 = 3 * 7　と表示する場合のコードです。
アドバイスいただけると嬉しいです。
serverlessメモ

* serverlessフレームワークではsls-offlineを使って、localでAPIとLambdaを実行することができる。しかし、APIの仕様をserverless.ymlに記述するのではなくswagger.yamlに記述した場合、sls-offlineはswagger.yamlを参照してAPIのデプロイをすることはないらしく、ローカルにAPIがデプロイできない。
* serverlessフレームワークで特定のプロジェクトを立ち上げるときに、serverlessで使うAWSリソース（API Gateway, Lambda, DynamoDB）の料金を簡単に見れると助かるのでserverless.ymlにtagsを設定したが、API Gatewayにだけtagが設定されなかった。現状は、[serverless-tag-api-gateway](https://www.npmjs.com/package/serverless-tag-api-gateway)というプラグインを使うしかないようだ。
* API Gatewayのリクエストバリデータを使いたいときは、 `x-amazon-apigateway-request-validator` だけでは設定されない。別プラグインが必要なようだ。 `serverless-reqvalidator-plugin`
[Unity]時系列のランキングデータをお手軽に可視化する


データの可視化というのは説得力が増すばかりでなく、新しい発見にも繋がりますよね。
Unityはゲームエンジンですが、実はツールとしての特性は「可視化にめっぽう強い」と言えます。

今回は、時系列のデータを拾ってきて可視化してみます。
githubにプロジェクトを置きました。
https://github.com/dsedb/VisualizationWorkshopTutorial

単純なプロジェクトですので、これからUnityを試す方には参考になると思います。

#時系列のデータとは

ある時期において、Aがいくつ、Bがいくつ、と固有名に数値がついているようなものを指すことにします。
例えば
・歴代時価総額ランキング
・中世における国別の人口推移
・Twitterにおける週刊トレンド推移
などなど。まあ、いくらでもありますわな。

#表示方法

##2Dで可視化

Unityだしカッコよく3Dで、という気持ちにもなりますが、人間の知覚の限界から言っても、可視化の真骨頂は2Dだと思うんですよね。3Dにしたところでモニタは2Dなので、後ろ側の物体が遮蔽されて見えないとか、重なってわかりにくいとか、カメラを回す操作を入れて対応だとか、どこかしら無理があるので。

##円
数値を面積にした円を描画し、それぞれの中心に固有名文字列を出しときましょう。
こんな感じ。
![name.png](https://qiita-image-store.s3.amazonaws.com/0/90046/dbd878b7-c0b1-2eeb-671a-f47c552f45b4.png "name.png")

#実装

物理挙動をあてがった円の面積を変えます。大きくなっても質量を変えなければ、物理的には風船が膨らむような、どこか「軽い」感じになるでしょう。その他、実装の特徴は以下です。

- データはCSV
- 時系列ごとにCSVファイルを分離
- 視認性のため円の色をランダムに
- 動作はRigidbody2Dで物理挙動に
- 中心に引力を働かせる

#具体例：男の子の命名トレンド（北米）

北米の社会保障局のサイトに、各年代の赤ちゃんの名前ランキングがありました。
https://www.ssa.gov/oact/babynames/index.html
このデータを可視化してみましょう。

##結果

こうなります。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">Unityで北米の男の子の名前の変遷の可視化にチャレンジ。&quot;Get Ready For Baby&quot;. Retrieved 14:00(JST), January 11, 2019, from <a href="https://t.co/3c2kgBXIFU">https://t.co/3c2kgBXIFU</a> <a href="https://t.co/QcsxrPOK5Q">pic.twitter.com/QcsxrPOK5Q</a></p>&mdash; ヤスハラユウジ (@dsedb) <a href="https://twitter.com/dsedb/status/1103836217131462657?ref_src=twsrc%5Etfw">2019年3月8日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


おもしろい。現代ではツブが小さくなるので、名前の偏りが減っていることが伺えます。傾向としては日本も同じですよね。

#具体例：企業時価総額

次は、企業の時価総額のデータを見てみます。GAFAの戦いってやつを拝んでやろうじゃないですか。

##結果

こうなりました。神々の戦いって感じしますなあ。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">Unityで企業時価総額の可視化。<br>&quot;List of public corporations by market capitalization&quot;<br>Wikipedia contributors. (2019, March 2). List of public corporations by market capitalization. In Wikipedia, The Free Encyclopedia. Retrieved 12:39, March 4, 2019, from <a href="https://t.co/1rJ7sXBcQZ">https://t.co/1rJ7sXBcQZ</a> <a href="https://t.co/dYrQ7fql9r">pic.twitter.com/dYrQ7fql9r</a></p>&mdash; ヤスハラユウジ (@dsedb) <a href="https://twitter.com/dsedb/status/1103836916200333312?ref_src=twsrc%5Etfw">2019年3月8日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


#まとめ

お手軽な可視化ですが、こうして初めて気がつく点もありますよね。同じトップ10でも、１位がぶっちぎりなのか、どんぐりの背比べなのかで実際の事情はかなり違いますし、それが時系列で比較できるのは面白い。
こういうUnityの使い方は、きっと文系方面の研究でも有効ですよね。めでたしめでたし。
VSCode+Easy Sass+CSScombの注意点

おま環かも知れないけどだれかのやくにたつかもしれない
環境：Win10、VSCode+EasySass+CSScomb


##パーシャルファイル
読込時、アンダースコアを省略するとコンパイルエラーになる

```scss
@import "common";        //コンパイルエラー(not found)
@import "_common";       //OK
@import "_common.scss";  //OK
```

##TargetDirの挙動
存在しないディレクトリを指定した場合、scssファイルの保存に失敗して(？)編集した内容が消える
もちろんコンパイルもされない
消去された箇所はCtrl+Zで復帰可能
※エラーなどは出ず問答無用で消える

##CSScombとプロパティのネスト
↓のbeforeの様に書いてCSScombにフォーマットさせると
afterの様に勝手にセミコロン追加＆改行削除されてしまう謎

```scss
//before
background: {
  position: center;
  size: cover;
}
height: 100px;

//after
background: {
  position: center;
  size: cover;
} ; height: 100px;
```
予めネストの閉じ括弧( } )の後にセミコロンを付けておくことで回避できる。

```scss
//before
background: {
  position: center;
  size: cover;
};
height: 100px;

//after
background: {
  position: center;
  size: cover;
};
height: 100px;
```

なおcsscomb.jsonの`"always-semicolon": `の値はこの現象に関与しない