OmniAICreator/Qiita-1.07M huggingface dataset:
OSがわからなかった時に唯一使えた実行中のプロセスを確認する方法

# 環境
不明

# 実装

リモートサーバーでサーバーを立てようとしたら

```
[Errno 98] Address already in use
```
というエラーが出たので色々調べて見たら

```
#Macの場合
$sudo lsof -i -P

#Windowsの場合
$sudo netstat -anob

#Linuxの場合
$sudo netstat -anp
```

ここから実行中のプロセスを発見し、PIDを参照してkillすれば終了、、、

なのだが、なぜか私が入ったリモートサーバーには全てのコマンドが使えない
おそらく権限がないからであろう

色々調べた結果、以下のコマンドだけ使えた

```
$ps -ax
```

ps コマンドを使用すると、システム上の全プロセスを表示できるらしい
ちなみに詳しくは以下の様子

オプション a
端末操作のプロセスを表示する。

オプション x
端末操作以外のプロセスを表示する。


こんなかから自分が使いたいポートを探し出し、成功したので一件落着

ただし、ポート番号から検索をかけられないのでそこは残念。。。

参考https://eng-entrance.com/linux-command-ps
nvmのデフォルトのバージョンの変え方

# node.jsはバージョンによる動作の依存度が高い
nvmとはnode version managerというように、node.jsのバージョンを簡単に管理することができるものです。

node.jsはバージョンの更新頻度も高く、またバージョンによってnpm installがうまくいかなかったりと、バージョンへの依存度が高いです。

筆者もエラーがでる度 `nvm use v*.*.*` といってバージョンを変えていたりしていたのですが、デフォルトでバージョンを変えれるとのことで、その方法を紹介します。

# nvmのデフォルトのバージョンの変え方
下記コマンドでできます。

```
$ nvm alias default v*.*.*
```

# 実際にやってみた

`nvm ls`を打ってみるとv5.0.0になっています。

```
$ nvm ls
        v0.12.7
         v4.0.0
         v4.2.2
->       v5.0.0
         v5.6.0
         v9.5.0
         system
default -> 5.0.0 (-> v5.0.0)
node -> stable (-> v9.5.0) (default)
stable -> 9.5 (-> v9.5.0) (default)
iojs -> N/A (default)
```
v5.0.0ではなく、デフォルトのバージョンをv9.5.0にしたいと思います。

```
$ nvm alias default v9.5.0
default -> v9.5.0
```
再度 `nvm ls` を打つと、

```
$ nvm ls
        v0.12.7
         v4.0.0
         v4.2.2
->       v5.0.0
         v5.6.0
         v9.5.0
         system
default -> v9.5.0
node -> stable (-> v9.5.0) (default)
stable -> 9.5 (-> v9.5.0) (default)
iojs -> N/A (default)
```
変更がされていないです。**ターミナルやiTermなどを再起動**しないと設定が読み込まれないです。おっと。

再起動して、再度 `$nvm ls`を打つと、

```
$ nvm ls
        v0.12.7
         v4.0.0
         v4.2.2
         v5.0.0
         v5.6.0
->       v9.5.0
         system
default -> v9.5.0
node -> stable (-> v9.5.0) (default)
stable -> 9.5 (-> v9.5.0) (default)
iojs -> N/A (default)
```
無事v.9.5.0になっています。以上です。
Atcoder ABC 095 D by Python3 (単純な場合の結果を複雑な場合の処理に再利用する)

[Atcoder Beginner Contest 095 D](https://beta.atcoder.jp/contests/abc095/tasks/arc096_b) のPython3による解答例。

##学んだこと
- うろうろ食べ歩く→区間を定める→始点と終点を定める、と言い換える。
- 始点を定め(n)、終点を定め(n)、その間にある寿司のカロリーを足し合わせる(n)と計算量オーダーはO(n^3)
- 累積和を使えば始点と終点を定めるだけでよいので計算量オーダーはO(n^2)だが、これでもTLE.
- 歩き方には、一方向のみに歩く場合と、一方向に歩いた後で反対方向に引き返す場合の2通りがある。
- まず一方向のみに歩く場合を調べ、i=1,2,3...,nとして「i個めまで食べに行っていい場合に得られるカロリーの最大値」を調べる。この計算量オーダーはO(n)
- つづいて、一方向に歩いた後で反対方向に引き返す場合を調べる。i=1,2,3...,n-1として「まず一方向にi個食べに行き、その後出発点まで引き返した時のカロリー」と「反対方向にn-i個まで食べに行っていい場合に得られるカロリーの最大値」を足し合わせる。後者については一方向のみに歩く場合を調べたときの結果が使えるので、こちらも計算量オーダーはO(n)
- よって全体でも計算量オーダーO(n)で結果を求めることができる。

##コード
```python

# coding: utf-8

n,l = list(map(int,input().split()))

#寿司までの距離distanceをDに、寿司のカロリーenergyの累積和をEに格納する。
D = []
E = [0]

for i in range(n):
    d,e = list(map(int,input().split()))
    D.append(d)
    E.append(E[i]+e)

#時計周りclockwiseに歩く場合を考える
CW = [0]
for i in range(n):
    CW.append(max(CW[i],E[i+1]-D[i]))

#反時計周りcounter-clockwiseに歩く場合を考える
CCW = [0]
for i in range(n):
    CCW.append(max(CCW[i],E[n]-E[n-i-1]-(l-D[-i-1])))

#時計周りに歩いた後、反時計周りに歩く場合を考える
CW_CCW = 0
for i in range(n-1):
    CW_CCW = max(CW_CCW, E[i+1]-D[i]*2+CCW[n-i-1])

# #時計周りに歩いた後、反時計周りに歩く場合を考える
CCW_CW = 0
for i in range(n-1):
    CCW_CW = max(CCW_CW, E[n]-E[n-i-1]-(l-D[-i-1])*2+CW[n-i-1])

print(max(CW+CCW+list([CW_CCW,CCW_CW])))
```
macでDjangoをVSCodeでデバッグ

#はじめに
PythonのWEBフレームワークとして代表的なのはDjangoですが、最近は徐々に入門書が増えつつあり、加速度的にPythonユーザが増えているように思います。しかしその一方でVisual Studio Code（以下、VS Code）でDjangoをデバッグする方法をまとめた記事はあまり見かけません。そこで、今までの自分の知識と経験をまとめるべく投稿を致しました。私も初心者のため、間違っているところなどありましたら、コメントでご指摘頂ければ幸いです。

#前提条件
使うマシンのOSはmacOS（High Sierra）を使うものとします。

#1-1. Djangoの環境構築
まずはDjangoの環境構築を行います。Pipenvでパッケージ管理が可能なので、PipenvでDjangoをインストールします。

```shell
# 仮想環境のシェルに入ります。
$ pipenv shell

# Djangoをインストールします。
$ pipenv install django
```

#1-2. VS Codeのインストール
[VS Codeのダウンロードページ](https://code.visualstudio.com/)で、下記画像矢印部分をクリックし、ダウンロードします。zipファイルがダウンロードされるので、解凍して開いてみましょう。
![Visual_Studio_Code_-_Code_Editing__Redefined.jpg](https://qiita-image-store.s3.amazonaws.com/0/139375/bf9b559c-b9b3-cde3-d0d4-5c029a771942.jpeg)

そして、*ファイル*から、*ワークスペースにフォルダを追加*をクリックして、ご自分のDjangoプロジェクトを追加しましょう。こちらの画面の右下には、*このファイルの種類には拡張機能'Python'が推奨されます。*と表示があります。ここで、インストールをクリックします。
![未設定__ワークスペース_.jpg](https://qiita-image-store.s3.amazonaws.com/0/139375/df35efc3-1355-d568-3383-0eb4fca68b07.jpeg)

次に、以下のような画面になったら、デバッグモードに入るために赤枠部分をクリックします。![未設定__ワークスペース_.jpg](https://qiita-image-store.s3.amazonaws.com/0/139375/f7dc6459-008a-979e-e0e9-6406a90c14dc.jpeg)

そして、少々分かりづらいですが、以下の画面左上の部分をクリックします。![Item-0_と_Item-0_と_Item-0_と_AppleTimeMachineExtra_と_Item-0_と_Item-0.jpg](https://qiita-image-store.s3.amazonaws.com/0/139375/33b48bf6-5829-056f-9e72-dec4a53a79c5.jpeg)

すると、クリックした部分からメニューが出ます。*設定(ワークスペースに追加したフォルダ名)の追加*をクリックします。すると、今度は画面上の中央部分にまたメニューが出ます。こちらでは、Pythonをクリックして、以下のような画面になるのを確認したら、画面右下赤枠部分の*構成の追加*をクリックします。クリック後もメニューが出ます。ここでは、*Python: Django*をクリックします。その後は、この設定ファイル（launch.json）を保存します。⌘+sが手っ取り早いです。![launch_json_—_未設定__ワークスペース__と_「macでPythonの環境構築_仮想環境作成_DjangoをVSCodeでデバッグ」を編集_-_Qiita.jpg](https://qiita-image-store.s3.amazonaws.com/0/139375/dfad61da-5db7-e800-17a5-4ac8e983129f.jpeg)

ここで、なにかファイルを開いてみます。views.pyファイルだとわかりやすいでしょう。ファイルを開くには、⌘+pで開けます。この状態で、以下のような画面になりますので、赤枠部分をクリックします。ここはなかなかシビアで、行番号のすぐ左です。該当箇所はうすく赤丸がつきます。これで、ブレークポイントを設定できますので、例えば8行目にブレークポイントを設定したければ、8行目のすぐ左をクリックすることになります。うまく設定できれば、薄い赤丸が、明るい赤丸になります。<img width="1918" alt="スクリーンショット_2018_09_01_18_05.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/139375/3cd3db9c-c7bf-2075-4971-4a058711c5e4.jpeg">

この状態で、画面左上赤枠部分をクリックします。緑色の三角形です。なお、さきほど設定したブレークポイントが、画面左下赤枠部分に追加されていることを確認しておきます。![views_py_—_未設定__ワークスペース__と_「macでPythonの環境構築_仮想環境作成_DjangoをVSCodeでデバッグ」を編集_-_Qiita.jpg](https://qiita-image-store.s3.amazonaws.com/0/139375/a1fda35f-2d7e-c5b4-e015-156b435e8b3a.jpeg)

これでデバッグ状態に入ります。赤枠部分の変化がわかると思います。また、小さいですが、矢印部分の赤い点は、現在ストップしている部分（ブレークポイント）を示しています。<img width="1925" alt="スクリーンショット_2018_09_01_18_28.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/139375/326d86cc-e161-b27c-456d-a8ba5ef8808c.jpeg">
Go言語で Excel へのスクショ貼りを自動化しよう！

Go で Excel ファイルを作成するのに使えるライブラリとしては

* [go-ole/go-ole](https://github.com/go-ole/go-ole)
    * Excel自身をOLE経由で動かすので互換性の懸念はない。xlsx だけでなく、xls でもいける。だけど **遅い**。要Excel。結構めんどうくさい（ミスるとExcelプロセスがゾンビになって残る）
* [tealeg/xlsx](https://github.com/tealeg/xlsx)
     * **定番**。読み取り・新規作成はバッチリだが、既存のxlsxファイルを加工する際に画像などが飛んでしまうと言われている。また、メモリ消費量が多い
* [loadoff/excl](https://github.com/loadoff/excl)
     * xlsx と違って、**既存Excelファイルへの加工に心配がない**。メモリ消費量が抑えられている。開発者日本人。Qiita に[紹介記事](https://qiita.com/tebakane/items/2f2ed2558357c274c478)あり

などが知られているが、画像などが貼れるものということで、今回、[tealeg/xlsxのトップ画面](https://github.com/tealeg/xlsx) で「`You should probably also checkout`」とか言って紹介されていた [360EntSecGroup-Skylar/excelize](https://github.com/360EntSecGroup-Skylar/excelize)を使ってみた。

```shot.go
package main

import (
	"fmt"
	"os"
	"path/filepath"

	_ "image/gif"
	_ "image/jpeg"
	_ "image/png"

	"github.com/360EntSecGroup-Skylar/excelize"
)

func mains() error {
	xlsx := excelize.NewFile()

	for _, arg := range os.Args[1:] {
		name := filepath.Base(arg)
		xlsx.NewSheet(name)
		if err := xlsx.AddPicture(name, "A1", arg, ""); err != nil {
			return err
		}
	}
	xlsx.DeleteSheet("Sheet1")

	return xlsx.SaveAs("./Book1.xlsx")
}

func main() {
	if err := mains(); err != nil {
		fmt.Fprintln(os.Stderr, err)
		os.Exit(1)
	}
}
```

`go run shot.go ./2018-08-19_01.15.57.png`とかすると、`2018-08-19_01.15.57.png` というシートに `2018-08-19_01.15.57.png` が貼り付けられた Book1.xlsx というファイルが生成される。

なお、以下の import が抜けると、画像が貼り付けが行われない上に、それがエラーとして通知もされないので注意。

```
    _ "image/gif"
    _ "image/jpeg"
    _ "image/png"
```

以上
Pythonで競プロに挑む日誌 vol.3-2 ~内包表記の練習~

超よく寝た.

# 現在の目標
* 完了: ~~AtCoder をはじめる~~
* 今年の10月内に茶色を取得する **←イマココ**
* 年内に緑色を取得する
* [APG4b](https://beta.atcoder.jp/contests/apg4b) で C++ にも手を出す

# 本日の問題
### [昨日の Coins の続き](https://qiita.com/4no3/items/1f19dce079e4a360029d)

**やったこと1: 力技をスマートに記述した**
↓が昨日の回答.

```before.py
# coding: utf-8
A, B, C, X = [int(input()) for i in range(4)]
#print(A, B, C, X)
 
# すべての和を出して、X と一致する個数を数える（力技）
cnt = 0
for a in range(A + 1):
    for b in range(B + 1):
        for c in range(C + 1):
            if (a * 500 + b * 100 + c * 50) == X:
                cnt += 1
 
print(cnt)
```
↓が今回の回答.

```after.py
# coding: utf-8
A, B, C, X = [int(input()) for i in range(4)]


cnt = sum(a * 500 + b * 100 + c * 50 == X
          for a in range(A + 1)
          for b in range(B + 1)
          for c in range(C + 1))

print(cnt)

# 実行時間：51 ms
# メモリ　：2940 KB
# コード長：240 Byte
# 得点　　：200/200
```
内包表記を使うことでスマートになりました. 内包表記は, このような場面で威力を発揮するのですね. 

---
**やったこと2: 解き方を考え直した**

```answer1.py
# coding: utf-8
A, B, C, X = [int(input()) for i in range(4)]

cnt = 0
for a in range(A + 1):
    val_500 = X - 500 * a
    if val_500 >= 0:
        for b in range(B + 1):
            val_100 = val_500 - 100 * b
            if val_100 >= 0:
                if val_100 <= 50 * C:
                    cnt += 1
print(cnt)

# 実行時間：17 ms
# メモリ　：2940 KB
# コード長：332 Byte
# 得点　　：200/200
```
```answer2.py
# coding: utf-8
A, B, C, X = [int(input()) for i in range(4)]

x = X // 50
cnt = 0
for a in range(A + 1):
    val1 = x - 10 * a
    if val1 >= 0:
        for b in range(B + 1):
            val2 = val1 - 2 * b
            if val2 >= 0:
                if val2 <= C:
                    cnt += 1
print(cnt)

# 実行時間：17 ms
# メモリ　：2940 KB
# コード長：319 Byte
# 得点　　：200/200
```


######考え方
1. X から, 500 円玉を取り除く
2. 500 円玉を取り除いた X から, 100 円玉を取り除く
3. 500 円玉と 100 円玉を取り除いた X が, C 枚以内の 50 円玉でピッタリになるか判定する.
4. 500 円玉と 100 円玉の枚数を変えて, 1～3 を繰り返す. 

コードは少し長くなりましたが, 実行速度は力技の 1/3 となりました. 他人のコードを読むと勉強になりますね.

answer1 はコインの金額から, answer2 はコインの枚数から計算しています.  やっていることは実質同じですが, 枚数で計算したほうが少しだけコードが短くなりました.

# 明日やること
[ABC083B - Some Sums](https://beta.atcoder.jp/contests/abs/tasks/abc083_b) を解く (今日やるかも).
【Django】'ModelBase' object is not a mappingエラーがでた

#問題

Djangoプロジェクトを実行したら次のようなエラーが出ました。

`TypeError: 'ModelBase' object is not a mapping`

#解決策

アプリケーションの`urls.py`が

```myapp/urls.py
from django.urls import path
from . import views

from myapp.models import mymodel

urlpatterns=[
	path('function/<int:key>', views.function, model, name='function'),
]
```
となっていたのですが、`path('search/<int:request_id>', views.function, mymodel, name='function'),`でモデルをkwargsに代入してはいけないっぽいです。

私の場合は、これで値を渡せると思っていたのですが、渡せないそうです。

urlpatternsのここを実行しなくても出るので注意してください。
フロントエンドの開発で考えるべきことを学んだのでまとめた

今までサーバーサイドエンジニアでやってきた、フロントエンド初心者の私があるプロジェクトにフロントエンドエンジニアとしてアサインされ、開発していく中で考えるべき事を知ったので備忘録として羅列します。

設計フェーズ段階でしっかりと考慮すべきこと・したほうが良いことが思った以上にあり、これをチェックリストとして持っておくと今後も使えるし、定期的に見直ししていきたいです。


## ○ フロントエンド、バックエンド双方必要

まぁ、これらは当たり前のように決めることだと思いますが、改めて書き出してみます。

* __技術選定__
  * メインとなるフレームワーク、ライブラリの選定
  * その他使いそうな周辺ライブラリの選定
     * フロントエンド側ではグラフ描画、カレンダー、APIアクセスなど
* __コーディング規約__
  * 変数名、関数名、ファイル名
  * インデックスの文字数
  * 関数の引き数の上限（割と重要）
* __リンター、フォーマッターのルール__
  * コーディング規約に近い
* __Git周り__
  * リポジトリ運用ルール
     * `git flow`
     * `github flow` など
  * コミットルール
     * コミット、PRの粒度
     * コミットメッセージにプレフィックスを付ける
         * [こんな感じのやつ](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#type)
  * ブランチ名
* __その他__
  * 動作環境
      * 対象ブラウザ
      * 対象OS（バージョン含む） 

## ○ フロントエンドのみ（これが本題）

* __JavaScript周り__
  * プロジェクトのディレクトリ構成
     * コンポーネントの粒度（ビルドのスピードに関わるので）
     * これは使うフレームワークにもよる
  * 共通処理、アプリ全体で行う処理の切り出し
  * `Store` の設計
* __CSS周り__
  * 変数に切り出すものとその値の決定
     * 色、画面サイズ、フォントサイズなど
     * 単位も（`px`, `rem`）
  * 命名規則
     * `OOCSS`, `BEM`, `SMACS`、`FLOCS` など
  * ファイル構成と中身のざっくり設計
     * `_vars`, `mixin`, `common` など

* __デザイン周り__
  * 共通パーツのfix
     * ヘッダー、フッター、ナビゲーションなど
     * だいたい全画面で使うので最優先に決めたいところ
  * PCとSPの描画の違いの把握
     * 作る前に疑問点や、怪しいデザインは潰しておかないと後の負債になりかねない
  * フォントはWebフォントにするか、直接サーバーに配置するか
  * アニメーションの数値や共有の仕方など
  * デザイナーからのデザイン納品形式
      * `sketch` ファイルなのか, `Figma` なのか, など

* __画像周り__
  * favicon の各ブラウザ端末用の用意（使用ライブラリなど）
  * svg 画像をコンポーネント化するか, そのまま svg 画像として使うか
  * 画像をどこに配置するのか（アプリ内なのか, `S3` などのサーバーに配置するのか）

* __その他__
  * リンク
      * 別タブにするか
      * 別タブにするなら `onreferrer, onopener` とかをつける
  * キャッシュ
      * CDN を何にするのか（`CloudFront, Akamai, Fastly` など）

上記以外にも、`コンポーネント一覧`の作成や、`swagger, mock環境`の用意などもあると尚良。最近は色々考えることが多く、複雑化しているなと痛感しました…

## 終わりに

決めることの多くはフレームワークやライブラリに依存したルールだと思います。が、ライブラリなどは随時バージョンが上がるか新しいものが生まれ、既存のものは廃れていくこともよくあるため、見直しは必須だと思います。

今は責務をどんどん分けて行く指向（いわゆるマイクロ化）が強く、それに比例して複雑化しているように感じましたので、利用するメリットと管理コスト、人間のリソースとのトレードオフで決めるべきでしょう。

`P.S.` 「これも決めておいた方が後に苦労しないよ！」などありましたら、ぜひコメントでご教示いただけると助かります！
FormData オブジェクトの中身が見たい！

## FormData オブジェクトとは

FormData オブジェクトは、XMLHttpRequest を使用して、データを送信するためのキーと値のセットを追加することができるインターフェイスです😇
キーのついたデータを送信するために**フォームとは独立して使用することができます**
送信されるデータは、フォームのエンコードタイプが`multipart/form-data`に設定されている場合と同じ形式になります✌️


### フィールドの追加方法


以下のように FormData オブジェクトをインスタンス化したら `append()` メソッドを呼び出すことでフィールドに追加することができます✨

```javascript

const formData = new FormData();
formData.append('id', '00000001');
formData.append('name','karabiner');
```

## FormData オブジェクトの中身を見るには？

FormData オブジェクトは以下のようになっています。
メソッドがたくさんありますが、
追加したフィールドはどこから見たらいいのか分からない😂

<img width="308" alt="formData.png" src="https://qiita-image-store.s3.amazonaws.com/0/140727/678db997-bf55-0300-b7ec-7d57d5043c65.png">


### `get()` `getAll()`メソッドで確認

- `get()`は引数にキー名を渡すと、値を返します
- `getAll()`は引数にキー名を渡すと、値（配列）を返します

```javascript

const formData = new FormData();
formData.append('id', '00000001');
formData.append('name','karabiner');
formData.append('name','peter');

console.log(formData.get('id')); // "00000001"
console.log(formData.getAll('name')); // ["karabiner", "peter"]
```

しかし、それぞれ特定のキーの値を取得するメソッドになるので、
全てを一括で見れません😷💦

### 一括で確認する方法

`entries()`メソッドを使う🤘

```javascript
for (let value of formData.entries()) { 
    console.log(value); 
}

/*
    ["id", "00000001"]
    ["name", "karabiner"]
    ["name", "peter"]
*/
```

### ES6でもっとスマートに

ES6のスプレッド演算子を使えば一行で済みます🤘

```javascript
console.log(...formData.entries());

/*
    ["id", "00000001"]
    ["name", "karabiner"]
    ["name", "peter"]
*/
```


ぱっと確認できるようなオブジェクトではないので、
中身を見るにはメソッドを呼び出さないといけません😩
Node.js v10のfsでasync/await

Node.jsのv10で、`fs`のpromise版が登場して、`async/await`でかける様になりました。最近書き方が変わって今はこれ。

```js
const fs = require("fs").promises;

const displayFiles = async dir => {
  const files = await fs.readdir(dir);
  console.log(files);
};

displayFiles("./");
```

まだ`experimental`なので以下の警告が出ます。

```
ExperimentalWarning: The fs.promises API is experimental
```
lsコマンドを入力した時の文字色を変更する方法

#lsコマンドを入力するとディレクトリ名が読みにくい
最近、CentOS7を使ってサーバー構築などの勉強をしているのですが、`ls`でディレクトリを表示した時がまー見にくいです。
黒の背景に青文字って……
まともに読もうとしたらマジで目が死にます。
なので、それを変える方法を今回は投稿します。

#手順
```
$ su
# cd /etc
# cp -p DIR_COROLS DIR_COROLS_org 　//念のためバックアップファイル作成
# vi DIR_COROLS
```

以下の部分を`/DIR`などと入力して見つけて、編集します。

```
（前略）
# Below are the color init strings for the basic file types. A color init
# string consists of one or more of the following numeric codes:
# Attribute codes:
# 00=none 01=bold 04=underscore 05=blink 07=reverse 08=concealed
# Text color codes:
# 30=black 31=red 32=green 33=yellow 34=blue 35=magenta 36=cyan 37=white
# Background color codes:
# 40=black 41=red 42=green 43=yellow 44=blue 45=magenta 46=cyan 47=white
NORMAL 00 # global default, although everything should be something.
FILE 00 # normal file
DIR 01;34 # directory
LINK 01;36# symbolic link
FIFO 40;33# pipe
SOCK 01;35# socket
BLK 40;33;01# block device driver
CHR 40;33;01# character device driver
ORPHAN 01;05;37;41# orphaned syminks
MISSING 01;05;37;41 # ... and the files they point to
（後略）
```
エスケープ文のところに丁寧に書かれてるのでそれを読むのが一番ですが、簡潔に言うと
`Attribute codes`が文字の属性（太字・アンダーラインなど）、
`Text color codes`が文字色、
`Background color codes`が背景色となります。
あとは説明されてる通りにコードを編集すれば、大丈夫です。
私は太字をやめて背景を白にしたかったので、`DIR 00;34;47`としました。
↓こんな感じです。
<img width="724" alt="スクリーンショット 2018-09-01 18.22.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/258256/ce98c779-e922-ba2c-2bdb-6eeb60e5ff45.png">
その後に下記コマンドを入力して、**ログアウトしてください。**
（ログアウト忘れたせいで表示が変わらず、無駄にハマりました…）

```
# eval 'dircolors /etc/DIR_COLORS -b'  //実行結果が出力されます
# exit
$ exit
```

## ちなみに
Macでは`.bashrc`に以下を記載すると良い感じになります

```bash:.bashrc
alias ls='ls -FG'
export LSCOLORS=gxfxcxdxbxegedabagacad
# 上記を記載後ターミナルで↓
$ source ~/.bashrc
```
参考:http://d.hatena.ne.jp/edvakf/20080413/1208042916
異体字セレクタってなあに

ある日隣の席でテストをしてくれていたQA要員がこんな挙動を見つけました。

QA「あれ……文字が増えるっ！？」

コレの続き。
https://qiita.com/wingsys/items/81d46451d8b93ab065de

# 増える！？
確認してみると、問題の部分はこれまでにも何度か妙な挙動をしていた入力部でした。
該当部分は「その文字がEUC-JPで取り扱えるなら許容、そうでないならエラーを返しつつ、**取り扱えない文字をゲタ (〓) に差し替えて返す**」という地味に面倒な仕様。まだまだバグが潜んでいても驚くことではありませんでした。

文字が増えるというのは奇妙な話です。
話を聞いて、とりあえず私が疑ったのは以下の2つ。

1. サロゲートペアで表現される文字列が投入された。  
その時のバリデータ兼フォーマッタ (不健全極まりない！) にはバグがあり、サロゲートペアを正常に取り扱えないので、たしかに文字数は増える。
2. 何らかの原因でゼロ幅スペースが紛れ込んだ。  
EUC-JPで取り扱えたかどうかは自信がなかったものの、単に文字数が増えたという意味ではありうる話。

しかし、これでは説明できませんでした。
入力された文字は「渡邉󠄂」。これが「渡邉〓〓」となっていたのです。

# とりあえずUnicode
しかし、我々には強い味方がいます。そう、Unicode表記への変換です。
詳しく聞いてみると、彼は「渡邉っていろんな字があるけど、耐えられるのだろうか」と思い立ち、様々なバージョンの文字表記をテキストで公開しているWebページからこれをコピペして打ち込んでいたのでした。

果たして、結果は ```\u6e21\u9089\udb40\udd02``` 。4文字です。
はて、 \udb40 に \udd02 ？ ずいぶんと外れの方にあるものが出てきたな。一体これは？
白状しますが、人生初の異体字セレクタとの遭遇でした。

# 前回までのUnicodeは
そもそもの話、もともとのUnicodeは65535文字を表現可能でした。16ビットですね。
彼らは「これだけあれば世界中の文字を収録できる！」と思ったのでしょう。事実、どう考えても実用文字かといわれると「？」な錬金術文字やらルーン文字やらまでもが収録されています。

しかし、現実は厳しいものだったのは言うまでもありません。
たかだか16ビットぽっちではとてもとても収録しきれないことがわかってきます。そりゃあまあ、特にアジア圏の文字ってやたら頭数多いですしね。
Unicode側も「同じ形の文字複数も登録できっかよぉ！？」なんて全力で抵抗しますがやっぱり足らず、サロゲートペアという形で容量を追加。
世の中の文字列処理に悲鳴をあげさせつつもなんとかして、やれやれ……というのが、前回までのお話。

# 多すぎる漢字のバリエーション
世の中、少なくとも日本には、異体字と呼ばれるものがなんかもう凄まじく大量にあります。
そのもっともわかり易い例が先程の「渡邉」に始まり、「高橋」「斎藤」「吉田」あたりの微妙に違う人名たちです。
サロゲートペアで容量が増えたといえど、これらの字を片っ端からバカ正直に収録していてはまたぞろ不足しかねません。

そこで登場したのが「異体字セレクタ (Variation Sequence) 」です。
(実は2種類あるのですが、日本では漢字専用版であるIVSがそれとして広く浸透してしまった結果、異体字セレクタ=IVSという誤解も見受けられます)

異体字セレクタは、文字の後ろにくっつけて使います。
これにより「**この文字は実はこういうタイプなんだよ！**」「**な、なんだってー！？**」とソフトウェア側が知る機会を提供します。
感覚的にはサロゲートペアと似ていますが、くっつける対象の「前の文字」が単独で機能すること、なにより指定された異体字がフォントやソフトウェアによってサポートされていない率が高いことから、それなりに面倒な代物です。

先の例では、渡邉の「邉」に異体字セレクタがくっつき、そのセレクタ自身がサロゲートペアによって表現されていたために2文字が4文字に化けていたのです。

私「まあ、発生率も低いだろうし大丈夫じゃないの？ こないだのチケットにコメント付けておけばいいよ」
QA「了解っす」

# オチ

QA「大変です！ 変換1発で出てくる文字列に異体字セレクタが！」
私「何だって……それは一体何さ！？」
QA「麴町の麴……」
私「……アレ、旧字の方だったのか……」

どっとはらい。
指定フォルダ内の特定アイテムを検索しリスト化するVBA

ファイルのリスト化が面倒くさかったから作ったVBAのメモ用記事

エクセルファイルを開いたら、次の画面が表示される
![image.png](https://qiita-image-store.s3.amazonaws.com/0/129179/11b9753f-d91d-980a-bc70-175d3dcb71b5.png)
まず、ほしいアイテムが入っているフォルダのフルパスをShift+右クリックで取得し、フォルダの欄にコピペする。なお、フォルダを空欄にした場合はこのエクセルが保管されているフォルダがデフォルトパスとなる。
次にファイル検索条件にほしいアイテムのファイル名のキーワードを入れる。拡張子で検索するなら
『*txt』や『*.txt』、キーワードで検索するなら『(キーワード)*』や『*(キーワード)*』など。
例として
![image.png](https://qiita-image-store.s3.amazonaws.com/0/129179/d16df75a-86f1-ea69-7719-ba158232a03f.png)
のようにtxtをリスト化にしたい場合は、ファイル検索条件の欄に『*.txt』を入力し
![image.png](https://qiita-image-store.s3.amazonaws.com/0/129179/1c622ea0-ea0c-60d5-5ad5-1d1b4e977297.png)
ファイルリスト作成をクリックすると
![image.png](https://qiita-image-store.s3.amazonaws.com/0/129179/5e8c11c8-3d66-946b-a392-d65fcbc1b913.png)
が得られる。

以下、VBAのソースコードのメモ

このVBAは3つのサブプロシージャによって構成されるが、特に分ける意味はないのでクラスオブジェクトのシート1に書き込んだものとする。

一々オブジェクトの定義が面倒くさいので、
<code>
Dim twb(5) As Object
Sub ob()'シートオブジェクトの略称を定義
For i = 1 To Worksheets.Count
Set twb(i) = ThisWorkbook.Worksheets(i).Cells
Next
'オブジェクトの略称を定義
End Sub
</code>
で略称の定義をしておく。用途によってシートまででも良さげ。

<code>
Sub dataexp() 'ファイルリストを作成
Dim pt, fkw, fnm, fpt As String
Call ob
'シートオブジェクトの略称を呼び出す
pt = twb(1).Cells(3, 3)
If Len(pt) < 1 Then
pt = ThisWorkbook.Path
End If
'フォルダパスの定義。未定義の場合はこのエクセルファイルの格納フォルダがデフォルトパスとなる
fkw = Dir(pt & "\" & Cells(3, 1))
i = 1
Do While fkw <> ""
twb(1).Cells(5 + i, 3) = fkw
fkw = Dir()
i=i+1
Loop
'条件を満たすファイルのパスを取得する
End Sub
</code>

<code>
Sub dataexp2() 'ファイルリストをリセット
Call ob
twb(1).Range("C6").CurrentRegion.ClearContents
End Sub
</code>
AWSネットワークセキュリティ  

#アジェンダ

1. リージョン
2. アベーラビリティゾーン（AZ）
3. VPC
4. サブネット
5. ネットワークACL
6. セキュリティーグループ


---


#リージョン
<font color="Red">**どの国のデータセンターを使うか！**</font>

**<補足>**
サービスによってはリージョン単位ではないものもある。
　例）S3，APIGatewayなど
リージョン毎に利用できるサービスが違う。

詳しくは⬇️をみてください
https://aws.amazon.com/jp/about-aws/global-infrastructure/regional-product-services/


---


#アベーラビリティゾーン（AZ）

<font color="Red">**リージョン内でどのデータセンターを使うか！**</font>

**<補足>**
リージョン内には複数のAZが存在する。
AZは可用性を高めるために物理的に離れた場所にある。

詳しくは⬇️をみてください
https://aws.amazon.com/jp/blogs/news/the-fourth-new-availability-zone-tokyo-region/

---

<img width="678" alt="AZ.png" src="https://qiita-image-store.s3.amazonaws.com/0/226096/6e9f357d-a608-bd6d-98d1-d6a2e827ffe9.png">

---

#VPC(Virtual Private Cloud)

<font color="Red">**仮想ネットワークの一番大きい区分**</font>
**例えるなら　国**

**<補足>**
1.CIDRのサイズは、/28〜/16の間
　・CIDRのサイズの設定＝VPC内で使用できるIPアドレスの範囲の設定
　　 例）111.111.<font color="Red">**0.0**</font>/16　→　6万553１通りのIPアドレスがVPC内で使えます。
2.VPC作成後はCIDRの変更不可
3.同AZ内で同じCIDR範囲の設定不可
4.VPCピアリングを行う場合、同じVPC範囲同士のピアリング不可


CIDRがわからない人はIPとサブネットマスクを勉強しましょう！
https://www.infraexpert.com/study/ip6.html

---

#サブネット
<font color="Red">**仮想ネットワークであり、VPCにぶら下がる区分　**</font>
**例えるなら　都道府県**

**<補足>**
1.CIDRのサイズは、/28〜/16の間
2.VPCで設定した範囲以上のCIDRは設定できない。
3.サブネット同士のネットワーク設定はルートテーブルで行う。

|  種類 |  説明  |
| ---- | ---- |
|  メインルートテーブル  |  デフォルトで紐づけられる、明示的にカスタムテーブルにひもづけると剥がれる |
|  カスタムルートテーブル  |  独自作成  |
4.privateとpublicって何が違うの？
　・internet gatewayにルーティングされている→public subnet
　・internet gatewayにルーティングされていない→private subnet
　※private subnetもNAT経由で Internetにアクセス可能

---


<img width="627" alt="subnet.png" src="https://qiita-image-store.s3.amazonaws.com/0/226096/b732e128-2d4d-4aca-0aa5-32a89ee57223.png">

---
<img width="640" alt="ルートテーブル.png" src="https://qiita-image-store.s3.amazonaws.com/0/226096/3fae4bd4-3505-552e-d67c-c0513387818f.png">

---
#ネットワークACL

<font color="Red">**サブネットに出入りするネットワークの制御(ファイアウォール)　**</font>
**例えるなら　都道府県毎に設置する関所**

・INとOUTのネットワークを通信プロトコル／ポート／CIDRの範囲で制御。
・WhiteList／BlackListどちらでもルール作成可能。
・ルールの順位づけ設定が可能。
・ステートフル：戻りの通信はセキュリティグループの設定に関わらず許可されます。（VPCの場合はステートレス）

---

#セキュリティグループ

<font color="Red">**インスタンスに出入りするネットワークの制御(ファイアウォール)　**</font>
**例えるなら　市町村に設置する関所**

・INとOUTのネットワークを通信プロトコル／ポート／CIDRの範囲で制御。
・WhiteListでルール作成可能。
・全てのルールが順不同で検証される
・ステートレス：戻りの通信はACLのルールに従いますので許可設定する必要があります。

---
#ネットワークACL/セキュリティグループ解説

・ネットワークACLやセキュリティグループは特定のIPやポートにのみ接続を許可したい場合に用いる。
　　例）・EC2に入ってくるネットワークをRDSからだけ接続を許可したいなと思ったら、３３０６ポートのみを開ける。
　　　　・このWEBサイト特定にIPの人にだけ見せたいなと思ったら、４４３ポートか８０ポートをIP指定でホワイトリストに設定する。


---
参考サイト
全般
https://www.slideshare.net/AmazonWebServicesJapan/awswebinar-aws-56260969
vpc
https://dev.classmethod.jp/cloud/aws/expanding-vpc-cidr/
https://docs.aws.amazon.com/ja_jp/AmazonVPC/latest/UserGuide/VPC_Subnets.html
ルートテーブル
https://docs.aws.amazon.com/ja_jp/AmazonVPC/latest/UserGuide/VPC_Route_Tables.html
ネットワークACL
https://docs.aws.amazon.com/ja_jp/AmazonVPC/latest/UserGuide/VPC_ACLs.html#ACLRules
https://dev.classmethod.jp/cloud/amazon-vpc-acl/
Qtで文字と画像の混在テキストを描画する

最近作った便利ライブラリの紹介です。

テキストを描画するには、`QPainter::drawText`関数を使用しますが、テキストと同時に画像（アイコンなど）を一緒に描画したいことがよくあります。`QLabel`や`QPushButton`は画像とテキストを表示する機能を持っていますが、自前で`QPainter::drawText`関数を使ってテキストを描画する必要があって、ついでに画像も一緒に描画したいとき、さらに言うと、記号や絵文字フォントではなく、アプリケーション内に格納されているリソースの画像をテキストと一緒に描画したいことがあります。

![emoji1.png](https://qiita-image-store.s3.amazonaws.com/0/61222/5ad0d81a-0eaa-eba7-1879-e1c8e2c0bcfc.png)

### 画像

GUIフレームワークライブラリであるQtは画像を扱う機能が豊富です。用途に応じて、ピックスマップ、イメージ、アイコンがあります。

`QPixmap pm(":/image/sushi.svg");`

描画に最適化された画像は`QPixmap`です。多少語弊がありますが、Windowsで言うところのDDB（デバイス依存ビットマップ）に近いものと言えるかもしれません。

`QImage img(":/image/sushi.svg");`

ピクセル指向の画像は`QImage`です。`scanLine`関数でピクセルのポインタを取得して、画像を直接書き換える様な用途ではこれを使います。Windowsで例えれば、DIB（デバイス独立ビットマップ）に相当します。

`QIcon icon(":/image/sushi.svg");`

画像サイズや縦横比を良い感じにしてくれる画像は`QIcon`です。Windowsの`HICON`より取り扱いが簡単です。

どれを使うにしても、多くの場合相互に変換できますので、あまり気にしなくていいでしょう。通常は、画像を描画したいだけなら`QPixmap`か`QIcon`、画像処理でピクセル操作するなら`QImage`を使うと覚えておけばいいです。

描画するには、`QPainter::drawPixmap`、`QPainter::drawImage`、`QIcon::paint`のいずれかの関数を使います。

今回はQIconを利用します。

画像ファイルの形式は何でも構いませんが、拡大縮小された場合にも綺麗に描画できるよう、SVG形式がおすすめです。

### テキスト

`QPainter::drawText`関数で描画します。基本的な関数なのでお馴染みだと思いますので、詳細は割愛させていただきます。

### テキストと画像を混在描画する

`QPainter::fontMertics`という関数を使うとテキストを描画するための座標計算に使えるいろいろな情報を取得できます。今回重要なのはascentというパラメータで、テキストを描画する際のベースラインから文字の最上部までの高さを使います。

テキストと混ぜて描画したい画像のサイズを正方形と仮定すれば、画像のサイズは ascent × ascent です。画像を描画したら、次の座標を右方向に ascent 分進めることで、画像が文字であるかのように、文字送り処理を行います。

### プログラム

ソースコードはGitHubに置きました。
https://github.com/soramimi/DrawEmojiText
Qt Creatorから`DrawEmojiText.pro`を開いてビルドしてください。

![emoji2.png](https://qiita-image-store.s3.amazonaws.com/0/61222/53ffb836-b414-169c-df13-d348861c052a.png)

### 使い方

Qtアプリケーションのリソースに`:/image/sushi.svg`という画像があるものとします。

次のような文字列を用意します。

`"hoge&:/image/sushi.svg;fuga"`
これを座標などと共に`DrawEmojiText`関数に渡します。

`&`と`;`で囲まれた部分にリソース名を書きます。それ以外の部分は普通のテキストです。テキストの`&`を描画したい場合は、`&&`または`&amp;`と書きます。

冒頭のサンプル画像は、次のようにして描画しています。

``` .cpp
	QString text = "&:/image/cuctus.svg;Hello&:/image/sushi.svg;world&:/image/thinking.svg;";
	DrawEmojiText(&painter, x, y, text);
```

### まとめ

文字列の構文解析と描画する座標計算がちょっと面倒な以外は、`QPainter::drawText`や`QIcon::paint`を交互に呼び出しているだけなので、実はたいしたことはしていません。
monorepoのnpmパッケージをAWS Elastic Beanstalkにデプロイする

# はじめに

npmパッケージの管理手法の一つにmonorepoがあります。
単一のGitリポジトリの中に、複数のパッケージを置くやり方です。
例えば以下の様なディレクトリ構造をとります。package.jsonが複数あります。

```
/
  package.json （ルートパッケージのpackage.json）
  packages/ （このディレクトリの下に各パッケージが並ぶ）
    my-web-app/ （子パッケージの一つ）
      package.json
    my-lib/ （これも子パッケージの一つ）
      package.json
```

この記事では、こうしたmonorepoを採用しているプロジェクトにおいて、ある子パッケージ（Webアプリ）をAWS Elastic Beanstalkにデプロイする際の留意点（トライ＆エラー体験談）について書いていきます。
上記の例でいうと、my-web-appをデプロイするケースを考えます。
my-web-appは、兄弟パッケージであるmy-libに依存しているとします。

monorepoやElastic Beanstalk (EB)自体の説明はあまりしません。

# どこでeb deployを実行するか

my-web-appをEBにデプロイしたいので、仮にmonorepoでなかったとしたら、普通にmy-web-appをカレントディレクトリとして`eb deploy`のコマンドを実行するでしょう。

しかし今回はmy-web-appが兄弟のmy-libを参照したいわけです。
my-web-appディレクトリ直下で`eb deploy`をすると、デプロイ先（EC2インスタンス）にはmy-libディレクトリが存在しないわけで、my-web-appを正常に起動できません。

となると、代わりにルートディレクトリ直下で`eb deploy`をして、monorepoを丸ごとデプロイする方法が考えられます。
これならmy-libもデプロイされます。

ルートパッケージのpackage.jsonには、例えば以下の様に書くことになるでしょう。

```package.jsonの一部
"scripts": {
  "start": "cd packages/my-web-app && npm start"
}
```

# 各パッケージにてnpm installさせるのは困難

monorepoでなかったら、EBにデプロイすると自動的に`npm install`が実行されて、次に（デフォルトでは）`npm start`が実行されるのが、EBの基本の流れですよね。

ところが前節にて、`eb deploy`をするのはmonorepoのルート直下としたので、このままだと各パッケージにおいては`npm install`が実行されません。

単純な対策例として、ルートパッケージのpackage.jsonに以下の様に書くことが考えられます。
`postinstall`に愚直に書いて、各パッケージでの`npm install`の実行を図ります。

```package.jsonの一部
"scripts": {
  "postinstall": "npm run install:lib && npm run install:web",
  "install:lib": "cd packages/my-lib && npm install",
  "install:web": "cd packages/my-web-app && npm install"
}
```

ところがこれはうまく動きません。どうもEBでは、`postinstall`は実行されないようなのです。
`prestart`は実行されるようなので、強引ですがそちらで代用することはできます。
（このあたりに言及している参考URLが[こちら](http://clarkie.io/nodejs/2015/06/25/npm-scripts-on-elastic-beanstalk.html)にあります）

が、仮に`prestart`において`npm install`をさせようとしても、今度はEC2上のファイルシステムのパーミッションの関係で（？）、以下の様に`npm install`が失敗します。

```EBのnodejs.log抜粋
> cd packages/my-lib && npm install
npm WARN locking Error: EACCES: permission denied, open '/tmp/.npm/_locks/staging-1f97e5e51d5dce3f.lock'
npm WARN locking /tmp/.npm/_locks/staging-1f97e5e51d5dce3f.lock failed { Error: EACCES: permission denied, open '/tmp/.npm/_locks/staging-1f97e5e51d5dce3f.lock'
npm WARN locking stack: 'Error: EACCES: permission denied, open \'/tmp/.npm/_locks/staging-1f97e5e51d5dce3f.lock\'',
```

結局、自前のnpm scriptsによって`npm install`を実行させることはできないのです。
EBの仕組みとして用意されている`npm install`（デプロイ直後にルート直下で実行される`npm install`）しかできません。
このあたりの挙動はAWS公式のドキュメントなどで言及している箇所が見つけられず、やってみたらそうなったという結果です。

# いっそnode_modules込みでデプロイしちゃおう

以上から、各パッケージの依存性（node_modulesディレクトリ）をデプロイ後にインストールさせるのは難しいことがわかりました。
そこで、もういっそnode_modulesをデプロイ用zipに含めた上で、EBにデプロイする方針を採ります。

大抵の場合、EBにデプロイする時はnode_modulesをzipに含めたくないですから、`.ebignore`ファイルに以下の様に書くことで除外しているでしょう。

```
node_modules
```

今回は逆に含めたいので、単純に上記の記述を削除すればよいです。
もしも、ルート直下のnode_modulesだけはいつも通り除外したければ、例えば以下の様に行頭にスラッシュを書けばよいです。

```.ebignore
/node_modules
```

# まとめ

EBはWebアプリを簡単にデプロイできる便利なサービスですが、monorepoとはやや相性が良くないようです。
そこで、各パッケージのnode_modules込みのzipをEBにデプロイすることで、monorepoでもEBの仕組みに乗ることができました。
Elastic Beanstalkのcron実行スクリプトに環境変数を渡す方法(Laravel on phpスタック)

# はじめに

[Laravel](https://laravel.com/)で構築したphpアプリを[AWS Elastic Beanstalk](https://aws.amazon.com/jp/elasticbeanstalk/)にデプロイする際に、[スケジューラ](https://readouble.com/laravel/5.6/ja/scheduling.html)が使いたかったので、cronを仕込むことにしました。インスタンスはイミュータブルにデプロイされることを想定し、.ebextensionsを使用して設定します。このやり方は公式ドキュメントに記載があります。
https://aws.amazon.com/jp/premiumsupport/knowledge-center/cron-job-elastic-beanstalk/

しかしながら、cronで実行されるスクリプト内では、環境プロパティで設定した環境変数が取得出来ないようで、"artisan schedule:run"がうまく動いてくれずハマりました。

# 解決策

ヒントは公式ドキュメントにありました。
https://aws.amazon.com/jp/premiumsupport/knowledge-center/view-environment-properties-elastic-beanstalk/

ここでは、cron実行のスクリプトではなく、ログインシェル内での環境変数のことが説明されています。さらに、phpの環境では問題ないので、このような対策は不要との趣旨でした。

> **PHP を実行するスタックを除き**、環境プロパティは、インスタンス内にある場合でも、自動的にはシェルにエクスポートされません。代わりに、環境プロパティはアプリケーションで使用可能になります。使用しているプラットフォームに応じて、アプリケーションの実行元のスタックを通じて利用できます。該当するプラットフォームでの環境プロパティの場所は以下のとおりです。

実際はphp環境でも、cronスクリプトには環境変数が渡りません。そこで、Rubyのやり方を参考に /opt/elasticbeanstalk/support/envvars を source すれば大丈夫です。envvarsの中身はこんな感じになっていて、環境プロパティの変更に同期して自動的に更新されるようです。

```bash:/opt/elasticbeanstalk/support/envvars
export APP_ENV="production"
export APP_NAME="Laravel"
export APP_KEY="base64:********************************************"
export APP_URL="http://*********"
export APP_DEBUG="true"
export PHP_MEMORY_LIMIT="256M"
export PHP_MAX_EXECUTION_TIME="60"
export PHP_DISPLAY_ERRORS="Off"
export PHP_COMPOSER_OPTIONS=""
export PHP_ALLOW_URL_FOPEN="On"
export PHP_ZLIB_OUTPUT_COMPRESSION="Off"
export PHP_DOCUMENT_ROOT="/public"
export PHP_DATE_TIMEZONE="UTC"
(以下省略)
```

最終的なconfigファイルはこんな感じです。ウェブ側の実行ユーザーであるwebappユーザーの権限で実行させたかったので、そのホームディレクトリを作ったり、storage配下ををNFTマウントした[EFS](https://aws.amazon.com/jp/efs/)にリンクしたりしていますが、その辺は不要であれば無視して構いません。本トピックで必須なのは、filesとcontainer_commandsの02_set_cronのみです。

```yaml:.ebextensions/02_laravel.config
files:
    "/tmp/laravel":
        mode: "000644"
        owner: root
        group: root
        content: |
            * * * * * webapp source /opt/elasticbeanstalk/support/envvars; cd /var/www/html; php artisan schedule:run >> /dev/null 2>&1

commands:
    make_webapp_home:
        command: |
            mkdir -p /home/webapp
            chown webapp:webapp /home/webapp
            chmod 700 /home/webapp

container_commands:
    laravel_configs:
        command: |
            ln -s ../storage/app/public ./public/storage
            rm -rf ./storage/app/public
            ln -s /mnt/efs ./storage/app/public
    01_migrate:
        command: |
            source /opt/elasticbeanstalk/support/envvars; sudo -u webapp -E php artisan migrate --force
        leader_only: true
    02_set_cron:
        command: |
            cp -f /tmp/laravel /etc/cron.d/
        leader_only: true
```

なお、leader_onlyを付けているのは、複数インスタンスで実行する際に、スケジューラを一台だけで動かしたかったからです。単一サーバーのみで動かす場合や、memcachedかredisを使って[onOneServer()](https://readouble.com/laravel/5.6/ja/scheduling.html#running-tasks-on-one-server) で制御するのであれば不要かと思います。
chromeで登録されたServiceWorkerを解除する方法

# 経緯

最近PWAのこと調べ始めてお試しで作ってみたのだけど、androidのchromeでアクセスしてみたらServiceWorkerに更新の仕組みを入れてなくて消せなくなった。

# 対処法

以下のURLにchromeでアクセスする。

```
chrome://serviceworker-internals/
```

するとその時登録されているServiceWorkerが一覧で表示されるので、消したい奴を探して`unregister`ボタンをポチッとする。

そうしたらそのServiceWorkerを使ってるURLに再度アクセスしたら新しいリソースが取得できる。

他にもパソコンと繋いでdevtoolで操作する方法とか見つかったが、これが一番手軽で良かった。

# 参考

* stackoverflowの質問への回答 - https://stackoverflow.com/questions/33704791/how-do-i-uninstall-a-service-worker
* 他にも同じ回答がされている質問は結構あるっぽい
リスト

トランプ4枚(9まで)a,b,c,dを並び替え二つの数字を作り、足し算し最大の和を求める
例）2,9,8,3→93+82=175

```python
numbers=input()　#値の取得
n_list=list(numbers) #リストに格納 
while ' ' in n_list:
    n_list.remove(' ') #空白が邪魔なのでremoveで取り除く

n_list_i=[int(s) for s in n_list] #数値に変換
n_list_i2=sorted(n_list_i,reverse=True) #降順に並び替え

n1=n_list_i2[0]*10 
n2=n_list_i2[1]*10 #10の位なので
n3=n_list_i2[2]
n4=n_list_i2[3]

ns=(n1+n3)+(n2+n4)
print(ns)

もっと簡潔に書きたいなあ
AWS 利用料金データ取得時のヒント

##AWS利用料金
利用料金を取得する際、APIを使って大まかな金額は取得できるようですが、請求ダッシュボードに表示されるアイテム単位での金額を取得しようとした際、APIで取得できる手段がない模様。
その為、請求レポートから出力されるCSVファイルから集計するしかなさそうです。
（もしありましたら教えてください。）

## ■事前作業
請求ダッシュボードの「レポート」「AWS のコストと使用状況レポート」にてS3に出力するように設定。
【設定例】

```S3バケット：CostReport
頻度：時間別
形式：text/csv
圧縮：GZIP
```
##■作業日
アマゾン側の集計処理が毎月6日頃に終わりますので、7日以降に実施。

##1．マニフェストファイル取得
マニフェストファイルを取得し、ファイル内に記載されいてるコストレポートのファイルパスを取得する。

```
S3://CostReport/20180501-20180601/CostReport-Manifest.json
```
の様に月毎にマニフェストファイルがS3へ作成される。

上記ファイルを取得する際、日別のフォルダー名「前月01日～当月01日」を指定する。
例）
2017年12月利用分取得時「20171201-20180101」
2018年03月利用分取得時「20180201-20180301」

##2.コストレポートファイル取得
マニュフェストから「reportKeys」名をキーに、最新のコストレポートファイル名を取得。

```
"reportKeys":["/CostReport/20180501-20180601/XXXXXXXX-XXXX-YYYY-ZZZZ-AAAAAAAAAAAA/
CostReport-1.csv.gz"],
```
上記パスから```CostReport-1.csv.gz```圧縮ファイルを取得、解凍しCSVファイル```CostReport-1.csv```を生成。

取得したコストレポートファイルは、AWSサービスの利用内容によりますが、圧縮ファイルサイズが数十メガ 、解凍したCSVファイルが数百メガバイトのファイルになります。
（自分のところはCSVファイルが600 Mbyte以上ありました。）

1行目に項目名（100項目以上）、2行目以降がデータ行として数万行出力されており、テキストエディタやエクセルで開くとフリーズするのであまりお勧めしません。

##3.あとはどうにかして集計する
請求書の計算方法は各社で違ってくる為なんともいえないですが、自分のところではコストレポートファイルをDB(SQLServer)に格納し集計、結果をエクセルに出力しています。

項目名が大量にありますが、集計のヒントとなる項目名は以下項目でしょうか。

```【項目名】
インボイスID：bill/InvoiceId
アカウントID：bill/PayerAccountId
アイテム名：lineItem/LineItemDescription
使用量：lineItem/UsageAmount
使用量単位：pricing/unit
利用金額：lineItem/UnblendedCost
```
##4.レート金額について
上記コストレポートはドル建てで出力されており、円建てで算出する際のレート金額は、
請求ダッシュボード「要約」「Amazon Web Services, Inc. - Service Charges」以下の
```- 請求書 123456789  - AWS サービス: サブスクリプション料金```
```- 請求書 234567891  - AWS サービス: サブスクリプション料金```
でリンクされているPDFファイルに出力されていますが、レート金額はインボイスID毎に変動しており、これもAPIで取得する方法がない。

その為、AWSコンソールにログインした状態で
```ttps://console.aws.amazon.com/billing/rest/v1.0/bill?year=yyyy&month=mm```

で年月を指定しスクレイピングすることで、jsonデータからレート金額（exchangeRate)が取得できます。
しかし、オフィシャルのページに書かれていませんので（たぶん）、いつまで使えるのか不明です。

※python+SQLServerで上記取り込み処理、エクセル出力処理を自動化したのですが、どこか買ってくれないかなあ。
PC嫌いな文系エンジニアがプログラミング講師を経てプログラミング教育(学習)に必要だと思った6つのこと

# はじめに
現在は学校法人角川ドワンゴ学園にて教職員をしていますが、半年前までは某ITスクールで未経験者向けプログラミング講座の講師として4年ほど働いていました。
久しぶりにQiitaにログインしまして(笑)何を書いたろかー、と考えた時に新入社員研修が色んな意味で大変だったことを思い出したので、今後自分の担当生徒へのプログラミング教育のことも考えて覚書として記録を残そうかと思います。
IT企業にて研修担当している方々の参考にもなれば幸いです。(ならないかー)

## 前提として
・筆者は4年制大学の法学部出身
大学卒業まではレポートを書くか、Youtube見るか、画像の加工ぐらいしかPCを触っていなかった
「タイピングとか、無理」って感じだった←
なんでIT企業に就職したかというと「苦手なことが続けられたら好きなことはもっと頑張れると思った」から

・担当していたのは主に未経験者向けJava講座、3ヶ月半でIT基礎(Officeやインフラとか)からWebサイト製作(HTML・CSS・JavaScript)、Java言語仕様、DB(PostgreSQL)、FW(Springとか)、システム開発を駆け抜ける内容

#必要なこと
##1.興味を持つこと
「好きなことほど伸びることはない」と私は考えています。
私は元がPC嫌いなので、ここに至るまでだいぶ苦労したんですけど、なんでも良いのです。
例えば簡単な診断アプリで結果として推しのキャラクターが出るとか。
写真が好きな人は自分だけのアルバムを作るとか。
きっかけを作ってさえあげればあとは勝手にやるんですよね。
もうできる周りの人は「可能性」を示してあげて欲しい。

##2.国語力
文章が読めないと、本もネットも何を言っているかわかりません。
研修講師時代は誰がどれだけ文章を読解できるかの初期テストとかも使ってました。
文章力ない人は新聞の社説を読むだけでもだいぶ変わります。
養うべきはITスキルだけじゃないのです。

##3.失敗を繰り返すこと
初学者ほど心配を怖がりますよね。
書いたら実行、常にPDCA回さないと欲しい結果は得られません。
周りは寛容に失敗をさせてあげてください。
(損失が出る場合の除きます。Pepper壊すとか、勝手にマスターブランチにコミットするとか。)

##4.疑問を持つこと
ちびっこもですが、「なんでだろう」→「調べてみよう」、「質問してみよう」が受動的に人に教わるよりも自分の力になると思います。
周りがその姿を見せてあげられたらいいなーと思います。

##5.コミュニケーションをとること
昨今「話せるエンジニア」が求められてるじゃないですか？？
お客様の要望を聞くのもそうだし、チームメンバーと話すのもそうです。
ITが発達しても結局使うのは人間なんですよねー。
個人開発はともかく、大規模開発はたくさんの人が関わります。
自分の作業しやすい環境は自分で整えるという意味でも自分から人と話していかねばなりません。
私も苦手なんですけど。

##6.継続すること
続けないと見えないことがたくさんあります。
私が新卒だった頃、その時の社長に「1日30分でいいから自分のために勉強をしなさい」と言われました。
初めは超嫌で、夢にもコンソールの黒い画面が出ることがありました。
でも4年経って、あれがなきゃ今タイピングもまともにできなかっただろうなーと思ってます。
ひたすらに寿司打をやったのがいい思い出です。
自分のためにやったことは無駄になりません。
何が自分のためになるか考えて行動する癖を早いうちにつけられるといいですね。

#終わりに
こんな感じでゆるゆると書いていこうと思います。
よろしくお願いします。

「これもこれも」があれば追記していこうかなと。
Pythonのos.getenvとos.environ.getの違い

# 結論から言うと

違いはありません。等価です。

以下、順を追って詳細を説明します。

# Pythonにおける環境変数の取得方法

まず前提のお話から。
主に3通りありますね。

3. `os.getenv('ENV_VAL')`
2. `os.environ.get('ENV_VAL')`
1. `os.environ['ENV_VAL']`

それぞれ、何が違うのでしょうか？

# os.getenv の仕様

https://docs.python.org/ja/3/library/os.html#os.getenv
>環境変数 key が存在すればその値を返し、存在しなければ default を返します。
key、default、および返り値は文字列です。

とのことで、もし環境変数がなくともKeyErrorがraiseされず、
第二引数（キーワード引数）のdefaultの値が返ります。
（指定しなければNoneが返ります）

# os.environ.get の仕様

そもそも [os.environ](https://docs.python.jp/3/library/os.html#os.environ) が

>文字列の環境を表す マップ型 オブジェクトです。

とあるようにマップ型オブジェクトなので、
[getメソッド](https://docs.python.jp/3/library/stdtypes.html#dict.get) を使うことができます。

getメソッドの仕様は

>key が辞書にあれば key に対する値を、そうでなければ default を返します。
default が与えられなかった場合、デフォルトでは None となります。
そのため、このメソッドは KeyError を送出することはありません。

とのことで、`os.getenv` と `os.environ.get` は同様の動作であることが分かります。

`os.environ.get('ENV_VAL')` と `os.environ['ENV_VAL']` の違いは、
KeyErrorをraiseするか否かです。

# os.getenv と os.environ.get の違い

本題ですが、実は [CPython の実装](https://github.com/python/cpython/blob/main/Lib/os.py#L779-L783) を見れば一目瞭然の話です。

```py
def getenv(key, default=None):
    """Get an environment variable, return None if it doesn't exist.
    The optional second argument can specify an alternate default.
    key, default and the result are str."""
    return environ.get(key, default)
```

このように `os.getenv` は `os.environ.get` の <font color="red">wrapper</font> となっています。
更に言えばメソッドを置き換える以外何もしてないため、
wrapper と言うよりはもはや <font color="red">alias</font> です。

# まとめ

`os.getenv` は `os.environ.get` の alias です。
メモリや実行速度の比較をする必要もないと思います。

公式でもどちらを推奨という話はありませんので、
お好みでお使いください。

#### 参考リンク
- [python - Difference between os.getenv and os.environ.get - Stack Overflow](https://stackoverflow.com/questions/16924471/difference-between-os-getenv-and-os-environ-get)
Docker を使って Google Home を喋らせてみた！

## 背景

今の会社に Google Home Mini がやってきたので、何かに使えないかと考えていました。

会社ではランチをみんなで食べるのですが、日直さんの号令で「いただきます！」をします。

そこで、日直さんの指名を Google Home にしてもらおうと思い、 Docker を使って Google Home を喋らせてみました！

## 環境

- **macOS High Sierra**: v10.13.6
- **Docker**: v18.06.0-ce

## 手順

- node:8.11.4 のダウンロード

```console
$ docker pull node:8.11.4
```

- イメージからコンテナを起動して接続

```console
$ docker run -it -p 8080:80 node:8.11.4 /bin/bash
```

- npm の update

```console
# npm update -y -g npm
```

- apt-get を使って必要なモジュールをインストール

```console
# apt-get update
# apt-get install -y vim avahi-daemon libavahi-compat-libdnssd-dev
```

- google-home-notifier をクローンする

```console
# git clone https://github.com/noelportugal/google-home-notifier
```

- google-home-notifier に移動する

```console
# cd google-home-notifier
```

- npm install を実行する

```console
# npm install
```

- README.md に従ってコードを修正する

```console
# vi node_modules/mdns/lib/browser.js
```

```diff:node_modules/mdns/lib/browser.js
 Browser.defaultResolverSequence = [
-  rst.DNSServiceResolve(), 'DNSServiceGetAddrInfo' in dns_sd ? rst.DNSServiceGetAddrInfo() : rst.getaddrinfo()
+  rst.DNSServiceResolve(), 'DNSServiceGetAddrInfo' in dns_sd ? rst.DNSServiceGetAddrInfo() : rst.getaddrinfo({families:[4]})
 , rst.makeAddressesUnique()
 ];
```

- 必要なサービスを起動する

```console
# service dbus start
# service avahi-daemon start
```

- 日本語を話すように設定する

```console
# vi google-home-notifier.js
```

```diff:google-home-notifier.js
- var device = function(name, lang = 'en') {
+ var device = function(name, lang = 'ja') {
    device = name;
    language = lang;
    return this;
  };
:
:
- var ip = function(ip, lang = 'ja') {
+ var ip = function(ip, lang = 'ja') {
    deviceAddress = ip;
    language = lang;
    return this;
  }
:
:
- var googlettsaccent = 'us';
+ var googlettsaccent = 'ja';
:
:
```

- 動作確認用のファイルを作成

```javascript:test.js
const googlehome = require('./google-home-notifier');
const message = "動作確認";

googlehome.device('Google Home', 'ja');
googlehome.ip('Google Home の IP アドレス'); // Google Home の IP アドレスを入力
googlehome.accent('ja');
googlehome.notify(message, res => console.log(res));
```

- 実行コマンド

```console
# node test.js
```

これで Google Home Mini が「動作確認」という言葉を発したら成功！

あとは変数 `message` に任意の文字列を入力すれば、それを喋ってくれます！

## その他の共有事項

### PC と Google Home が同じローカルネットワークにいること

PC と Google Home が同じローカルネットワーク（同じ Wi-Fi に接続）になければならないので、注意してください。

### Google Home の IP アドレスの調べ方

Google Home の IP アドレスを調べる方法は、こちらの記事で紹介されていたのでご確認ください。

参考: https://qiita.com/sitopp/items/62689ddd2d448f7f8000
Spresence購入

# 購入先など

アマゾンでポチる乗りでしたが、公式によると取り扱いストアが限られてるようで
https://developer.sony.com/ja/develop/spresense/buy-now

いつものスイッチサイエンスさんは在庫切れだったので
今回はこちら
http://itstore.zaikostore.com/shopbrand/ct157/

今見ると在庫切れですね。

私が買ったのは、

Sony　SPRESENSE メインボード
SONY CXD5602PWBMAIN1
単価 5,500 円

Sony　SPRESENSE 拡張ボード
SONY CXD5602PWBEXT1
単価 3,500 円

合わせて９千円！！！

意外に高い。Arduinoだけで使うには勿体無い気がしました。

#入手

すぐとどきました。
とりあえず、開梱して
パッケージの格好良さに少しモヤっと（さすがソニーさんw）しつつ
スタッキングして、Lチカしました。

![IMG_8284.JPG](https://qiita-image-store.s3.amazonaws.com/0/150736/ea3ee551-e93e-f06c-16ce-8b8ad787567f.jpeg)

#ハマったこと

Arduino IDEをセットアップ中に　Zipファイルをダウンロードするところがあるんだけど
Safariのお節介機能なのか、DL後自動で解凍されてしまって
うまくいかないことがあった。
回避方は、ChromeでDLするだけでチュートリアル通り進められた。
https://developer.sony.com/ja/develop/spresense/developer-tools/get-started-using-arduino-ide/set-up-the-arduino-ide

#やって見たいこと
RTCやGPSを活かして見たい。
過去のArduino CPUを凌駕する性能を活かしきれることが思いつかない。
Apache Sparkのインストール(MacOSX)

#Apache Sparkのインストール方法(MacOSX)
※Sparkを使うには***JRE***と***Python***がインストールされていなればなりません

###以下のバージョンで良い場合は、下記のリンクをクリックするとすぐダウンロードできます。
#####Spark release: 2.3.1(Jun08 2018)
#####package type: Pre-build for apache Hadoop 2.7 and later
#####spark-2.3.1-bin-hadoop2.7.tgz
>***http://ftp.yz.yamagata-u.ac.jp/pub/network/apache/spark/spark-2.3.1/spark-2.3.1-bin-hadoop2.7.tgz***


###上記のバージョン以外を希望する場合は以下の手順を実施してください
>下記のサイトにアクセス
>***https://spark.apache.org/downloads.html***
<img width="1272" alt="Screen Shot 2018-09-01 at 21.32.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/277948/4c5db015-0ba0-3fc3-f50b-dc3a1c3d6a1c.png">
####1.リリースバージョンを選択
####2.パッケージのタイプを選択
####3. 1,2を選択したらリンクをクリック
#### 以下の画面に遷移するので、画面２行目のリンクをクリックして下さい。ダウンロードが開始されます。
※他の経由でダウンロードしたい場合は、HTTP以下のリンクやFTP以下のリンクからもダウンロード可能です
<img width="1283" alt="Screen Shot 2018-09-01 at 21.36.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/277948/bfd6e400-da2c-285f-0544-10aff6fa2ea3.png">

####ダウンロード後、解凍とフォルダの移動
ダブルクリックで解凍し、フォルダ内を丸ごとコピーし適当な場所に移す
<img width="609" alt="Screen Shot 2018-09-01 at 21.46.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/277948/e676304a-decc-8393-67da-06dc47bc8c3c.png">

####confフォルダ内のlog4j.propertiesの一部分を書き換える

- ***log4j.rootCategory=INFO, console***の行の***INFO***を***WARN***にする

```shell-session:log4j.properties.template
# Set everything to be logged to the console
log4j.rootCategory=WARN, console
log4j.appender.console=org.apache.log4j.ConsoleAppender
log4j.appender.console.target=System.err
log4j.appender.console.layout=org.apache.log4j.PatternLayout
log4j.appender.console.layout.ConversionPattern=%d{yy/MM/dd HH:mm:ss} %p %c{1}: %m%n
```
- confフォルダ内の***log4j.properties.template***の名前を***log4j.properties***にする

####Terminalからダウンロードしたフォルダまで移動し、
####binフォルダ内のpyspark(scalaの場合はspark-shell)を起動する
```bash:Terminal
cd /ダウンロードした場所までのパス/spark
bin/pyspark
```

####以下のような画面が表示されれば完了
```shell-session:Terminal
Python 3.6.5 |Anaconda, Inc.| (default, Apr 26 2018, 08:42:37) 
[GCC 4.2.1 Compatible Clang 4.0.1 (tags/RELEASE_401/final)] on darwin
Type "help", "copyright", "credits" or "license" for more information.
18/09/01 22:35:43 WARN NativeCodeLoader: Unable to load native-hadoop library for your platform... using builtin-java classes where applicable
Welcome to
      ____              __
     / __/__  ___ _____/ /__
    _\ \/ _ \/ _ `/ __/  '_/
   /__ / .__/\_,_/_/ /_/\_\   version 2.3.1
      /_/

Using Python version 3.6.5 (default, Apr 26 2018 08:42:37)
SparkSession available as 'spark'.
>>> 
```

######以上
Mac でマウスの加速をオフる

ターミナルで下記の一行を実行。


```
defaults write .GlobalPreferences com.apple.mouse.scaling -1
```

もとに戻す時は下のように。

```
defaults write .GlobalPreferences com.apple.mouse.scaling 1
```
反映させるには、どちらも要ログアウト→ログイン。


# 参考
[How to Turn Off Acceleration on a Mac Mouse](https://smallbusiness.chron.com/turn-off-acceleration-mac-mouse-68544.html)
Xubuntu18.04LTSでCF-N10、CF-S10のサスペンドができない問題を解決する

# はじめに
Let's Note **CF-N10**, **CF-S10**はXubuntu18.04LTSをインストールした場合、そのままではサスペンドから正常に復帰できません。他の機種（CF-B11、CF-NX、CF-SX等）でも同様の問題が発生した場合、今回の方法で解決するものと思います。これはカーネルの再構築で直ります。

## 問題の詳細
状態としては、サスペンドからの復帰後ロック画面は出るのですが、**キーボードとタッチパットが操作不能**になります。ちょっとしたことですが、サスペンドからの復帰のほうが起動が速いですから、使えるようにしようと思います。。

## カーネルの再構築
解決方法は先人の非常に素晴らしい記事[Let's Note CF-B10 のサスペンド問題](http://yang.amp.i.kyoto-u.ac.jp/~yyama/Ubuntu/misc/letsnote-suspend.html)と同じになります。

記事の内容とほぼ同じの方法で成功できたため、18.04LTSで修正が必要な箇所以外は引用させていただきました。更に詳しい内容については上の記事に書かれていますので是非ご覧ください。
この記事は手順のまとめのみを書いています。

まず最初にルートになります
>$ sudo -s

再構築に必要なパッケージのインストールをします
ここでxubuntu18.04の場合引用元の記事とすこしだけ違いがあってlibqt3-mt-devがないため除いています。さらにlibssl-devがあとで必要になるため入れておきます。

```
apt-get install build-essential kernel-package libssl-dev libncurses5-dev
apt-get install linux-source-x.x.x
```

>(linux-source-x.x.x をインストールすると /usr/src/linux-source-x.x.x.tar.bz2 ができる)

次にソースファイルを解凍します。全く同じ操作のため引用します

### カーネルのダウンロード、解凍
>(場所を移動してソースを解凍)
>\# cd /usr/src
>\# tar xvjf linux-source-x.x.x.tar.bz2
>\# cd linux-source-x.x.x

###　デフォルトの.configのコピー
>(デフォルトの config ファイルを使う)
>\# cp /boot/config-x.x.x-yy-generic .config

###　サスペンド復帰問題への対処
>(ここで suspend-resume問題に対応する)
>\# cd drivers/input/serio
>\# cp i8042.c i8042.c.orig (バックアップを取る)
>\# vi i8042.c
>
>.resume = i8042_pm_resume,
>
>の行を
>
>.resume = i8042_pm_restore,
>
>に変更する
>
>(元に戻って configファイルを作る)
>\# cd ../../..
>\# make oldconfig

### （オプション）CF-N10,S10のCPUへの対応
やると速くなるらしいです。コンパイルは非常に時間がかかるためやっておきましょう。当方の環境では特に問題はありませんでした。
>\(ついでにカーネルをいじる場合:なくても良いと思う)
>\# make menuconfig (or # make xconfig)

> make xconfig でカーネルをいじる場合は、 以下をやると速くなって吉らしい。 

>Generic-x86-64 --> Core 2/newer Xeon
>左パネル "Processor type and features" を選んで、 右上パネル "Processor family" で変更する。
>なお、"newer"かどうかは /proc/cpuinfo の "cpu family" を見て、 数字が 6 なら newer, 15 なら older だそうです。 

>Timer frequency
>デフォルトは 250 Hz ですが、デスクトップ用途には 1000 Hz が良いそうです。 ただし SMP を使う場合は周波数が低い方がいいみたい。 

### カーネルのコンパイル
とても時間がかかりますので、時間があるときにやったほうがいいと思います。３時間程度かかると思います。
>\(makeする)
>\# make-kpkg clean
>\# make-kpkg --initrd --revision=(適当な数字) kernel_image kernel_headers (1行で書く。とても時間がかかる)

### カーネルのインストール
>(debができているのでパッケージインストールする)
>\# cd ..
>\# dpkg -i linux-image-x.x.x_(さっき決めた数字など).deb

### 確認
>(再起動したら新しいカーネルで起ち上っているか確認する)
>\# uname -a

## おわりに
カーネルのコンパイルと聞くとなかなか、大変に思えますが非常に簡単に行なえます。同じ問題で困っている方がいましたら是非やってみることをおすすめします。
chrome-extension-webpack-boilerplate で手早く Chrome 拡張機能の開発環境準備

最近 Chrome 拡張機能の開発を簡単に始める方法を調べていたのですが、その中で <a href="https://github.com/samuelsimoes/chrome-extension-webpack-boilerplate" target="_blank" rel="nofollow noopener">chrome-extension-webpack-boilerplate</a> を使うと簡単に始められたので紹介します。

## 筆者の前提

* Chrome 拡張機能を開発するのが初めて。チュートリアルをこなした程度
* Webpack は触ったことがある

## chrome-extension-webpack-boilerplate とは

<a href="https://github.com/samuelsimoes/chrome-extension-webpack-boilerplate" target="_blank" rel="nofollow noopener">GitHub - samuelsimoes/chrome-extension-webpack-boilerplate</a>

Chrome 拡張機能の開発を楽にしてくれる boilerplate は調べると色々あります。
その中でも、chrome-extension-webpack-boilerplate は、Webpack で 開発に使う JavaScript のモジュールを管理できるようにしてくれる boilerplate です。

## 使い方

README に書いてあるのですが、自分で試したときの手順を記載します。

### 環境の前提

* Node.js 6 以上がインストールされていること
* yarn がインストールされていること

### 準備手順

リポジトリを clone して yarn を実行するだけで OK です。

```bash
$ git clone https://github.com/samuelsimoes/chrome-extension-webpack-boilerplate
$ cd chrome-extension-webpack-boilerplate
$ yarn
```
### Chrome 拡張機能として起動するには

下記コマンドを実行します。

```bash
$ npm run start
```
実行すると、Chrome 拡張機能としてロードするためのファイルが ```build/``` ディレクトリ以下に生成されます。

その後、Chrome 拡張機能としてロードするための手順を実行します。

1. ```chrome://extensions/``` にアクセス
2. Developer mode に変更
3. 「Load unpacked extension」クリック
4. ```build/``` 以下のフォルダを指定

指定が終わると Chrome 拡張機能として登録され、アイコンをクリックすると以下のサンプルアラートが表示されます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/222030/566eca09-5985-49a0-09a1-8917a3bb9280.png)


## 所感

初めて Chrome 拡張機能を開発始めようとするとき、どんなファイルを準備すればいいか、どんな JavaScript のモジュールを使おうか見通しが立ちづらいと思います。

しかし chrome-extension-webpack-boilerplate を使うことで、必要なファイルや、モジュール管理に悩まず手早く開発を始められるようになると思いました。

試しに自分で fork して 色々 ```yarn add``` したものは以下に置いてみました。bootstrap や fontawesome など yarn で突っ込んで Webpack で管理できていい感じでした。

https://github.com/gotchane/chrome-extension-webpack-boilerplate