OmniAICreator/Qiita-1.07M huggingface dataset:
LEDMatrixDriverの使い方

Banggood で入手したLEDマトリックスの表示器でサンプルを動かすのにも苦労したので，ライブラリLEDMatrixDriverの使用法について記しておく．

物はこれ
https://www.banggood.com/MAX7219-Dot-Matrix-Module-4-in-1-Display-For-Arduino-p-1072083.html?rmmds=myorder&cur_warehouse=USA
・32×8ドットLEDマトリックス（1088AS　4つ使用）　Max7219を使ったスタンダートなものです．
私が買ったときは￥453でした．

ネット上で検索するといくつかLEDマトリックスをドライブするライブラリが見つかるが，
ArduinoIDEの「ライブラリを管理．．」メニューからライブラリマネージャでMax7219で検索すれば6個ほど候補が表示されるので，こちらを使うことにした．
この中からバージョンは0.2.2と低いが「LEDMatrixDriver」を選び，インストール．

LEDマトリックスをマイコンなどから駆動する場合，Max7219と1088ASの接続がデバイスによって異なっているため，その部分の設定を合わせなければならない．
下記の通り必要な設定をして，

```
const uint8_t LEDMATRIX_CS_PIN = 10;    //チップセレクト(CS)をつないだArduinoのピン番号

// Number of 8x8 segments you are connecting
const int LEDMATRIX_SEGMENTS = 4;　　　　//1088ASの数
const int LEDMATRIX_WIDTH    = LEDMATRIX_SEGMENTS * 8;    //1088AS 1個当たりの横方向LEDの数が8.(通常は編集不要でしょうね)
```

さっそくスケッチ例から「LEDMatrixDriver－DrawSprites」を開き，書き込み・実行してみる．
が，表示はされるものの，なにかおかしい．
LEDマトリックスをスクロールする文字をしばらく眺めてみると，4つある1088ASの左右方向の配置が逆になっていることに気がついた．
ネット上で調べるもあまり日本語の情報がなく，LEDMatrixDriver.cppとLEDMatrixDriver.hppとにらめっこ．．．
で，
以下の通り　LEDMatrixDriverのコンストラクタでオプショナルな引数を渡すことで設定できた．

サンプルのMarqueeTextはプログラムの変数宣言部の中で次のようにコンストラクタを呼んでいる

```
// The LEDMatrixDriver class instance
LEDMatrixDriver lmd(LEDMATRIX_SEGMENTS, LEDMATRIX_CS_PIN);
```

このコンストラクタはオプションで第3，第4引数を渡すことが可能なので，次のようにする．

```
// The LEDMatrixDriver class instance
LEDMatrixDriver lmd(LEDMATRIX_SEGMENTS, LEDMATRIX_CS_PIN, 2);
```


第3引数の意味は，LEDMatrixDriver.hppの中に書いてあり

```
const static uint8_t INVERT_SEGMENT_X = 1;    //各1088ASでの左右表示反転（鏡文字になります）
const static uint8_t INVERT_DISPLAY_X = 2;    //1088ASの左右の並びを反転
const static uint8_t INVERT_Y = 4;　　　　//上下反転
```

ビットマスクした整数をfragとして使う．

ちなみに第4引数はフレームバッファのポインタを渡せますが，あまり使うことはないかも．

お名前を見るとライブラリ作成者さんはロシア系の方でしょうかね．
ネット上でもロシア語の情報が散見されました．

ちなみにフォントはプロポーショナルではなく等幅です．記号とアルファベット大文字のみとなっています．
プロポーショナル・フォントを使いたい場合は次のライブラリを使用
https://qiita.com/Lathe/items/4d8fc9145053106bba1f


引用サイト
https://github.com/bartoszbielawski/LEDMatrixDriver
https://www.youtube.com/watch?v=GfHsCDpe6q0
突然Tomcat Runが動かなくなった

# 環境
以下リンクと同じ

+ [IntelliJ Community で Tomcat の実行環境を整備する](https://qiita.com/Kakky/items/27fa8940016428ee71f6)

# 症状
grettyのTomcat Runタスク(jetty Run や App Runでも同じ)でエラー

> Cannot cast object 'null' with class 'null' to class 'int'. Try 'java.lang.Integer' instead

# 原因
プロジェクト > build > gretty_ports.properties
の中身が空だった。

# 解決
ファイルごと消したら通った。
Tomcat Runを実行したら以下のような中身で再生成された。

```:gretty_ports.properties
#Sun Jun 16 12:15:41 JST 2019
statusPort=53051
servicePort=53050
```

# 追伸

再生成されるたびにポート番号は違うっぽい？
【Laravel】Bladeの主要ディレクティブ一覧

#Bladeとは
LaravelにはBladeというテンプレートエンジンが用意されています。
Bladeを使うと、テンプレートを継承したり、レイアウトの一部をセクションの一部としてはめ込むことができます。
効率的にレイアウトを作成したいならBladeを使うべき！
#ディレクティブとは
構文のような役割を果たすもの。テンプレートに簡単に組み込むことができる。
##分岐処理を行うディレクティブ
| 　　　ディレクティブ　　　 |　　　　　　　役割 　　　　　　　 |
|:-----------------:|:------------------:|
| @if(条件) | 条件分岐 |
| @unless(変数) | 条件非成立の時表示 |
| @empty(変数) | 変数が空の場合表示 |
| @isset(変数) | 変数が定義済みの場合表示 |
##繰り返しのディレクティブ
| 　　　ディレクティブ　　　 |　　　　　　　役割 　　　　　　　 |
|:-----------------:|:------------------:|
| @for(初期化 ; 条件; 後処理;) | PHPのfor構文に相当するもの |
| @foreach($配列 as $変数) | PHPのforeach構文に相当するもの |
| @while(条件) | PHPのwhile構文に相当するもの |
###繰り返しのディレクティブに用意されている変数 $loop
| 　　　ループ変数　　　 |　　　　　　　役割 　　　　　　　 |
|:-----------------:|:------------------:|
| $loop->index | 現在のインデックス(0~) |
| $loop->interation | 現在の繰り返し数(1~) |
| $loop->remaining | 後何回繰り返すのか |
| $loop->count | 繰り返しで使っている配列の要素数 |
| $loop->first | 最初の繰り返しかどうか |
| $loop->last | 最後の繰り返しかどうか |
| $loop->depth | 繰り返しのネスト数 |
| $loop->parent | ネストしている場合、親の繰り返しループ変数を示す |
###注意したい点
- @whileディレクティブは@phpディレクティブが必要
- PHPおなじみのcontinueやbreakも@continue @breakとして使用することができる
- ネスト数＝入れ子の数

##@PHPディレクティブ
| 　　　ディレクティブ　　　 |　　　　　　　役割 　　　　　　　 |
|:-----------------:|:------------------:|
| @php | Bladeテンプレート内でPHPのスクリプトを実行する |
###注意したい点
- Bladeテンプレート内でPHPスクリプトを実行できるからといって、使いまくるのはよくない。必要最小限にとどめておく必要がある。

##レイアウト作成時に必要なディレクティブ
| 　　　ディレクティブ　　　 |　　　　　　　役割 　　　　　　　 |
|:-----------------:|:------------------:|
| **@section(名前)** | 指定した名前でセクションが用意される |
| @parent | 親レイアウトのセクションを示す |
| **@yield(名前)** | 配置場所を示すもの |
| @extends(Bladeのファイル名) | レイアウトの継承設定 |
| @component(名前) | コンポーネントの組み込み |
| @slot(名前) | {{}}で指定された変数に値を設定する |
| @include(読み込むテンプレート名,[値の指定]) | サブビューの読み込み |
| @each(テンプレート名, 配列, 配列から取り出したデータを入れる変数名) | 配列などから値を取り出し指定のテンプレートにはめ込んで出力する |
###注意したい点
- @yieldはendyieldみたいなのは必要ない
- 最上位に位置するベースのレイアウトでの@sectionは@endsectionではなく@showというディレクティブでセクションの終わりを指定する
- @sectionには書き方が2つある
    - @section(セクション名, 表示する値)
    - @section(親レイアウトの@yield名) (@parent) @endsection
    -> 親レイアウトの@section名なら上書きして置き換わる 
- @extendsは○○.blade.phpの○○の部分を引数に与える
- サブビューとはあるビューから別のビューを読み込んではめ込んだもの

※ この記事は備忘録目的の記事です
計算グラフの逆伝播でtanhの微分を求める

# 概要
計算グラフの逆伝播でtanhの微分を求めるお題にトライ。

#### 前提：計算グラフって?
- 計算グラフとは、計算の過程を図示したようなもの。
- [ゼロから作るDeep Learning](https://www.amazon.co.jp/%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E4%BD%9C%E3%82%8BDeep-Learning-%E2%80%95Python%E3%81%A7%E5%AD%A6%E3%81%B6%E3%83%87%E3%82%A3%E3%83%BC%E3%83%97%E3%83%A9%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0%E3%81%AE%E7%90%86%E8%AB%96%E3%81%A8%E5%AE%9F%E8%A3%85-%E6%96%8E%E8%97%A4-%E5%BA%B7%E6%AF%85/dp/4873117585) でとても分かりやすく説明している。
    - オライリーで電子書籍も入手可能
    - TensorFlowの「データフローグラフ」も上記の本を読んでおくととても理解しやすい。
 
# tanh の式
```math
\begin{align}
\tanh x&=\frac{\sinh x}{\cosh x} \\
&=\frac{\frac{e^x-e^{-x}}{2}}{\frac{e^x+e^{-x}}{2}} \\
&=\frac{e^x-e^{-x}}{e^x+e^{-x}}
\end{align}
```

# 自分の回答
以下で求めたtanhの微分と、調べたtanhの微分は一致したので、解けているみたい。
~~自分が分かりやすいように式を変形して計算グラフを作ったけど、普通は割り算のまま描くのかな？~~
その後教えていただいた回答も、分数は掛け算の形に変形していた。
分数のままでも微分は出来るのでそれでも正解のはずだが、掛け算に変形した方が逆伝播にシンプルな微分の法則を適用できる。

#### 1. 前準備：tanhの式を変形
数学苦手な自分が逆伝播を描きやすくするため、以下のように変形した。
- 分母を-1乗して、掛け算の形に変形
- 引き算$A-B$ は $A+(-B)$ として、足し算の形に変形


```math
\frac{e^x-e^{-x}}{e^x+e^{-x}}=\bigl({e^x+(-e^{-x})}\bigr)*(e^x+e^{-x})^{-1}
```

#### 2. 計算グラフの順伝播を描く
1で変形した式を元に順伝播を描く。

- 以下の記載ルールで描いた
    - グラフの〇は、演算内容を示す。
    - グラフの矢印は、計算の途中結果を示す。

#### 3. 計算グラフの逆伝播を描く
- 前提知識
    - 連鎖律
    - 微分関連の公式が少し
    - ネイピア数eについて、$(e^x)'=e^x$

右端から微分していった。
ハートウォーミングな手描きを掲載・・・
![tanh_computational_graph.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390894/72b22c80-8948-5abb-4a69-9d56a6c06c73.jpeg)

#### 4. 計算グラフから求めたtanhの微分
上のtanhの計算グラフの黄緑で示した式（逆伝播の最終式）を合算。

```math
\begin{align}
&\frac{1}{e^x+e^{-x}}*e^x+\frac{1}{e^x+e^{-x}}*e^{-x}-\frac{e^x-e^{-x}}{(e^x+e^{-x})^2}*e^x+\frac{e^x-e^{-x}}{(e^x+e^{-x})^2}*e^{-x} \\
&=\frac{1}{e^x+e^{-x}}*(e^x+e^{-x})-\frac{e^x-e^{-x}}{(e^x+e^{-x})^2}*(e^x-e^{-x}) \\
&=\frac{e^x+e^{-x}}{e^x+e^{-x}}-\frac{(e^x-e^{-x})^2}{(e^x+e^{-x})^2} \\
&=1-\biggl(\frac{e^x-e^{-x}}{e^x+e^{-x}}\biggr)^2 \\
&=1-\tanh^{2} x 
\end{align}
```

#### 5. 教えていただいた解

```math
\frac{4}{\bigl(e^x+e^{-x}\bigr)^2}
```

自分の回答とは形は異なるが実質同じ、とのこと。。。
一緒にいただいた計算グラフは形は違くても同じことをやっているのは分かった。
しかし、この式は私には違う解に見えてしまう。。。
と納得がいかず、続き。

実際、$\tanh x$ の微分としては上記両方正しい。
ならば $1-\tanh^{2} x=\frac{4}{(e^x+e^{-x})^2}$ に変形できるはずなのでトライ。

関係式 $\cosh^2 x-\sinh^2 x=1$ を利用して解決、すっきりした。

```math
\begin{align}
1-\tanh^{2} x=&1-\frac{\sinh^2 x}{\cosh^2 h} \\
&=1-\frac{\cosh^2 {x-1}}{\cosh^2 x} \\
&=\frac{\cosh^2 x-\cosh^2 x+1}{\cosh^2 x} \\
&=\frac{1}{\cosh^2 x} \\
&=\frac{1}{\biggl(\frac{e^x+e^{-x}}{2}\biggr)^2} \\
&=\frac{4}{\bigl(e^x+e^{-x}\bigr)^2}
\end{align}
```

私の解$1-\biggl(\frac{e^x-e^{-x}}{e^x+e^{-x}}\biggr)^2$よりも、教えていただいた形の解の方が処理速度が上がる、など性能上の違いはあるんだろうか。
KVM virsh 操作

KVM環境でVMの操作する場合、virshコマンドを使います。
そのvirshコマンドの使い方を簡単にまとめました。

※以下はdebian-testというVMがいる環境での例です。

### サーバ ドメイン/vm名のリスト

```
$ virsh list --all
Id Name State
----------------------------------------------------
2 debian-test running

debian-test2 shut off
debian-test3 shut off
```

### サーバシャットダウン

```
$ virsh shutdown debian-test 
$ virsh list
Id Name State
----------------------------------------------------
2 debian-test shut off 
```

### サーバスタート

```
$ virsh start debian-test
Domain debian-test started 
```

### サーバ vmの強制停止 (shutdownが効かない場合のみ)

```
$ virsh destroy debian-test
```

### ドメインから削除

```
$ virsh undefine debian-test
Domain debian-test has been undefined
※ /etc/libvirt/qemu/ にある xmlも消えるので必要そうならcpで退避しておく 
```

### vmのコンソールに接続

```
$ virsh console debian-test 
```

### サーバサスペンドと復旧(使うことないかも)

```
$ virsh suspend debian-test 
$ virsh resume debian-test 
```

### OSタイプのフルリスト

```
$ virt-install --os-variant list 
```

### VM情報表示(CPU メモリ UUIDなど)

```
$ virsh dominfo debian-test 
```

### メモリ or CPU増減 ※基本はVM落として編集して起動

```
$ virsh edit debian-test

xmlを直接編集でメモリorCPUを編集後VMの再起動。 
ダイナミックなメモリ増減がでできる。
$ virsh setmem debian-test 1048576
※KBで指定 1024MBx1024=1,048,576KB。メモリー増やす場合はMaxMemoryを増やしてやる必要あり。

$ virsh edit debian-test

$ virsh shutdown debian-test

$ virsh start debian-test 

確認方法
$ virsh vcpuinfo debian-test

$ virsh dominfo debian-test で確認

/etc/libvirt/qemu/debian-test.xml の中身確認
ゲストVMに入って確認 
```

### VM削除

```
$ virsh shutdown debian-test
もしくは $ virsh destroy debian-test

$ virsh undefine debian-test

$ rm -rf "イメージファイルのパス"
※ /etc/libvirt/qemu/ にある xmlも消えるので必要そうならcpで退避しておく。
```

### virtual network表示

```
$ virsh net-list

$ virsh net-dumpxml [vnet name] 
```

### VMのマイグレーション(ここではタダのコピー)

```
・他のKVMサーバに移す方法
コピー元サーバにてVMを停止

下記コマンドで対象VMの設定xmlを生成。
$ virsh dumpxml VMNAME > domxml.xml 

コピー先のサーバにSCPでイメージとxmlをコピー
下記コマンドで設定xmlを登録
$ virsh define domxml.xml 

VMのスタート
$ virsh start VMNAME 
```

### イメージのタイプ確認(raw or qcow2)

```
$ sudo qemu-img info "イメージファイルのパス"
```

### イメージのタイプ変換(raw to qcow2)

```
qemu-img convert -O qcow2 original-image.raw converted-image.qcow2 
```
nmapの使い方＃１

NWのトラブルシュートメモ
[nmap](https://nmap.org/man/ja/man-port-scanning-techniques.html)

# syntax
```
nmap [Scan Type(s)] [Options] {target specification}
```

## TARGET SPECIFICATION:
- scanme.nmap.org, microsoft.com/24
- 192.168.0.1, 10.0.0-255.1-254

## Scan Type

| option | what |
| :--- | :--- |
| -sL | List Scan -- simply list targets to scan |
| -sn | Ping Scan -- disable port scan |
| -sP |  Ping Scan -- go no further than determining if host is online |
| -sS/sT/sA/<br>sW/sM | TCP SYN/Connect()/ACK/ <br>Window/Maimon scans |
| -sV | Probe open ports to determine service/version info |
| -sU |  UDP Scan |
| -sO | IP protocol scan -- ICMP,EIGRP,| 
| -b <FTP relay host> | FTP bounce scan |
| -n/-R | Never do DNS resolution/Always resolve<br>[default: sometimes] |

## Options
-  -p \<port ranges> : Only scan specified ports<br>
 - -p22
 - -p1-65535 
 - -p U:53,111,137,T:21-25,80,139,8080,S:9
- -O: Enable OS detection
- -P0: Treat all hosts as online -- skip host discovery
- -e \<iface>: Use specified interface

# sample
## 1. ping scan
```bash:
$ nmap -sn 192.168.0.0/24
$ nmap -v -sn 192.168.0.0/24
Starting Nmap 7.40 ( https://nmap.org ) at 2017-03-29 04:39 JST
Nmap scan report for kddi (192.168.0.1)
Host is up (0.0031s latency).
....
```

## 2. port scan
### all ports
```
$ nmap -v -PO localhost
Scanning localhost (127.0.0.1) [1000 ports]
Discovered open port 22/tcp on 127.0.0.1
Discovered open port 5900/tcp on 127.0.0.1
Discovered open port 2968/tcp on 127.0.0.1
```

## speified port only
```
$ nmap -v -PO -p 22 192.168.0.0/24
```
## post scan & service name
```
$ nmap -v -sV 192.168.0.110
PORT      STATE  SERVICE       VERSION
22/tcp    open   ssh           OpenSSH 6.6.1 (protocol 2.0)
80/tcp    open   http          Apache httpd 2.4.6 ((CentOS) PHP/5.4.16)
443/tcp   closed https
3333/tcp  open   http          Golang net/http server
3389/tcp  open   ms-wbt-server Microsoft Terminal Service
5432/tcp  closed postgresql
49160/tcp open   ssh           OpenSSH 7.2p2 Ubuntu 4ubuntu2.1 (Ubuntu Linux; protocol 2.0)
49161/tcp open   oracle-tns    Oracle TNS Listener (unauthorized)
```
RailsのReactでfont-awesomeを導入

すぐ忘れるので個人用メモです。

詳しくはこのサイトを見てもらったほうが早いです。↓
[FortAwesome/react-fontawesome-github](https://github.com/FortAwesome/react-fontawesome)

#yarnでのインストール

```
$ yarn add @fortawesome/fontawesome-svg-core
$ yarn add @fortawesome/free-solid-svg-icons
$ yarn add @fortawesome/react-fontawesome
```

```react

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' #1
import { faCoffee } from '@fortawesome/free-solid-svg-icons' #2

const element = <FontAwesomeIcon icon={faCoffee} /> #3

ReactDOM.render(element, document.body)
```

コンポーネントに#1〜３を追加するとコーヒーのアイコンが出ます。
Chromeで2本指スワイプの戻る・進むを無効にする(Win/Mac共通)

# はじめに
ノートPCでWebブラウジング中、タッチパッド2本指スワイプで「横スクロールしようとしたのに戻る・進むが発動」してしまうこと、よくありますよね。勘弁してほしいですよね。

# TL;DR
* `chrome://flags`を開く
* `Overscroll history navigation on Touchpad`を`Disabled`にする。

# 解説
Macの場合は、OSレベルで設定があるので、これをOFFにすればOK。
[Mac版Chromeでトラックパッドを2本指でスワイプした時にブラウザバックしてしまう現象をなんとかする](http://kimizuka.hatenablog.com/entry/2017/01/04/173158)

でも最近買ったWindowsマシン(Win10 Pro/ThinkPad X1 Yoga Gen3)の場合は、OSの設定でもSynapticsコントロールパネルでも「2本指で戻る・進む」に関する設定が全く見当たりませんでした。

試しにEdgeでやってみたら、2本指スワイプしても戻ったり進んだりしない。これはChrome側の機能に違いない。

調べたら、質問サイトでこんなのがありました。
[スワイプで戻る機能を無効にしたい【Chrome】](https://okwave.jp/qa/q9618286.html)

`chrome://flags`で`swipe`とか`touchpad`と入れると`Overscroll history navigation on Touchpad`って設定が見つかります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24333/95df0b21-d3b3-a5af-7510-2e429de0b7f6.png)

「Default」を「Disabled」に変更すれば無効になります！よかった！
（質問サイトの方は、同じ設定しても解決しなかったみたいですねぇ…なんでだろう？）

Macではきっと、「Default」にしておくとOSの設定をそのまま反映して有効・無効が変わるんでしょうね。例えば「MacでChromeだけで有効にしたい」みたいな場合は「OS設定で無効＆Chrome設定をEnabled」にすればよいはず。（よかったら誰か試してくださーい）

# 最後にぼやき
タッチパッドにしてもスマホにしても、「N本指のジェスチャ」ってどんどん複雑化している感じがします。特にこういう「同じアプリ、同じ画面、同じページなのに、スクロール位置が終端だと全く動きが変わる」みたいなの、超イヤなんですよね。。。なぜこれがデフォルトなのか理解に苦しむ。

一般人には本当にこのUIって使いやすいのかなぁ・・・？「今の状態がこうだから、この動きはこういう意味になるから、こう動かそう」みたいなのって、個人的には脳内メモリかなり消費するから作業効率が相当落ちる。ステートレスに「1ジェスチャ1操作」できるように、いろいろとデフォルト設定をオフにしています。

もしかして、歳を取ったのかなぁ・・・(´・ω・｀)
VScode > Numbered Bookmarks > C++ Builderユーザ向け (Mark lines and jump to them, in Delphi style) | Mac上の注意

```
Windows 10 v1903
RAD Studio 10.2 Tokyo Update 3
Visual Studio Code v1.35.1
```

### VScode用ブックマーク機能

ソースの各場所へ移動するためのブックマーク機能。VScodeでは拡張機能として追加するようだ。

- [Are there bookmarks in Visual Studio Code?](https://stackoverflow.com/questions/30179571/are-there-bookmarks-in-visual-studio-code)


### Delphiユーザ向け

上記にて拡張機能を見ている中で「Numbered Bookmarks」が気になった。


> Numbered Bookmarks
> Mark lines and jump to them, in Delphi style
> Alessandro Fragnani

C++ Builderと同じ操作で使えそう。

https://github.com/alefragnani/vscode-numbered-bookmarks/blob/master/README.md


### インストール後

C++ Builderと同じ操作でブックマーク機能を使えている。

別のUI操作を覚え続けるコスト、UI操作方法スイッチのコスト、はなくなった。

### Mac上の注意

https://stackoverflow.com/questions/30179571/are-there-bookmarks-in-visual-studio-code
> ... but on Mac the short cut Shift + Cmd + 3 and Shift + Cmd + 4 are already assigned for taking a screen shot. – user1941537
Java 匿名クラス

##匿名クラスとは
クラス名を指定せず、クラス定義とインスタンス化を一つの式で記述したクラスのこと
クラス名を指定せずインターフェースの実装・メソッドの取り出し、クラスの継承・オーバーライド・メソッドの取り出しができるので、その場のみでメソッドを使いたい場合などに便利


```java
interface Inter{
	void methodA();
}

class SuperT{
	void methodS() {
		System.out.println("Super");
	}
}

class OuterT{ //外側クラス
	void method1() {
		new Inter() { //インターフェースの実装とインスタンス化を同時に行う
			public void methodA() {
				System.out.println("methodA実装");
			}
		}.methodA(); //インスタンス化したものからmethodAを呼び出す
	}

	/*void method2() {
		new SuperT() {
			void methodS() {
				System.out.println("Override");
			}
		}.methodS();
	}*/

}

public class Tokumei {

	public static void main(String[] args) {
		OuterT ot = new OuterT();
		ot.method1();
		//ot.method2();
		
		System.out.println("-----SuperT型の変数に代入してから呼び出した場合-----");
		SuperT st = new SuperT() { //スーパークラス型の変数に代入
			void methodS() {
				System.out.println("Override");
			}
			void methodSub() { //匿名サブクラス独自メソッド
				System.out.println("Sub");
			}
		};

		st.methodS();
		//st.methodSub(); //スーパークラス型変数では匿名サブクラス独自のメソッドは呼べない
		
		System.out.println("-----直接オブジェクトから呼び出した場合-----");
		new SuperT() {
			void methodS() {
				System.out.println("Override");
			}
			void methodSub() {
				System.out.println("Sub");
			}
		}.methodSub(); //直接呼ぶことはできる
		}
}
```
###出力結果
```
methodA実装
-----SuperT型の変数に代入してから呼び出した場合-----
Override
-----直接オブジェクトから呼び出した場合-----
Sub
```

###ポイント
①クラスを継承する際、匿名サブクラスはメソッドをオーバーライドできる。

②スーパークラスを継承した匿名サブクラスをスーパークラス型の変数に代入してから呼び出すときは、スーパークラス内にあるメソッド（オーバーライドしたものを含む）しか呼び出せない。（仕組みは通常のスーパークラスとサブクラスの時と同じで、変数型によってアクセスできる範囲が変わる。）

③直接オブジェクトから呼び出す場合には、匿名サブクラスに独自に設定したメソッドも呼び出すことができる。
nodebrew（+react）インストールまでの参考（自分用）

###1.環境構築全般
https://re-engines.com/2018/09/10/react-init/

https://qiita.com/spice/items/b75afb607f1d2e1172a2

###2.brew以外のconfigファイルによるwarningの解消
https://qiita.com/ponsuke0531/items/7ede97f6abe6129802c1

自分はこれをやったら、xamarin webbooks no directory or file エラーになった。
↓
bash_profileから書き込んだものを消去したい → 3.

###3.alias（ショートカット）設定の書き換え
unaliasを試したが、一時的なもの
↓
設定ファイル自体を書き換えたい
↓
ターミナルで以下を実行
vi ./bash_profle

'i'で編集モード

#####保存 :wq
#####保存せず終了 :q 

https://qiita.com/spice/items/b75afb607f1d2e1172a2
https://qiita.com/kon_yu/items/b8864ff566b8b67a9810

http://feb19.jp/blog/archives/000226.php

###4.bash_profileでのエラー
'='の周りにスペース入れると読み込めなくなる。
https://stackoverflow.com/questions/18042369/bash-export-not-a-valid-identifier

最終的には brew doctor で　ready to brew出た♪( ´▽｀)
VSCodeでPython+Flask開発環境を構築する

今までPycharmで開発していたのですが、
PycharmにはJavaScriptのコード補完機能とかがない
（有料ならあるけど結構お高い…）
なのでこれからはVSCodeを使っていこうと思います。

Pycharm好きだったんですけどねー。
基本GUIで環境構築出来たんで。
VSCodeは本当にいろいろ出来すぎて、逆に使いこなすのが難しそうです…。
CLIもある程度使えないといけないですし。

個人的見解ですが、
プログラミング初めてでPythonの開発したいって人には
Pycharmがオススメです！

#VSCode開発環境構築
Python+Flaskの開発環境は
[VS CodeとFlaskによるWebアプリ開発「最初の一歩」](https://www.atmarkit.co.jp/ait/articles/1807/24/news024.html)
の内容そのまま実行するだけで問題なく構築できました。

また、GitHubとの連携はこちらを参照。
[Visual Studio CodeでGitを使う](https://tech.pjin.jp/blog/2016/12/04/visual-studio-code%E3%81%A7git%E3%82%92%E4%BD%BF%E3%81%86/)

```
git remote add origin [YOUR_REPOSITORY]
```
<img width="1178" alt="スクリーンショット 2019-07-15 21.13.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363095/e7629544-cc7f-6646-8e10-627ea839a123.png">

<img width="1058" alt="スクリーンショット 2019-07-15 21.15.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363095/6d1ef205-6644-b327-8fa5-da1c78403891.png">

こちらも問題なく構築完了！

以下、入れておくと便利な設定
[Visual Studio Code を使う前に最初にやっておきたいこと](
https://www.off-soft.net/ja/software/develop2/visual-studio-code-preuse-settings.html)
[Visual Studio Codeの設定「虎の巻」](https://www.atmarkit.co.jp/ait/articles/1708/23/news026.html)
[VSCodeでHTML/CSSファイルを編集しながらリアルタイムでプレビューする方法](https://qiita.com/ninomiya0530/items/8391d89c208d94fe8842)
[デバッグ作業が快適に！VS Codeにブラウザのプレビュー機能を加える機能拡張 -Browser Preview for VS Code](https://coliss.com/articles/build-websites/operation/work/browser-preview-for-vscode.html)
[Visual Studio Codeでhtmlコーディングはリアルタイムプレビューがすごく良い](https://rui-log.com/vscode-html-cording/#HTML_Preview)
AlertDialogを作る

AlertDialogを今までActivityで作ってましたが、そうするとメモリーリークが発生するので、
DialogFragmentを継承させて、呼び出すようにしました。
その時の手順です。

###①AlertDialogのクラスの作成
DialogFragmentを継承させたクラスを作成し、そこで、ライフサイクルの管理をします。


```kotlin:AlertDialog.kt
class AlertDialog : DialogFragment() {
    var title = "title"
    var okText = "OK"
    var onOkClickListener : DialogInterface.OnClickListener? = null

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        val builder = AlertDialog.Builder(context!!)
        builder.setTitle(title)
                .setPositiveButton(okText, onOkClickListener)
        return builder.create()
    }

    override fun onPause() {
        super.onPause()
        // ダイアログを閉じる
        dismiss()
    }
}
```

とりあえずはメッセージとOKボタンのみを簡易的に表示させるようにしています。
AlertDialogを生成し、戻り値にしています。

###②実際使うActivityに適用

①で作ったAlertDialogをActivityで表示させるようにします。

```kotlin:MainActivity.kt
class MainActivity:  AppCompatActivity() {


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // 省略

        var dialog = AlertDialog()
        dialog.title = "更新しました"
        dialog.onOkClickListener = DialogInterface.OnClickListener { dialog, which ->
            finish()
        }
            dialog.show(supportFragmentManager, null)
        }
    }
}
```

①で作ったAlerDialogをインスタン化して、タイトルとOKボタンを押したときの処理をここで実装します。
①で作ったクラスをAlertDialogにするとインポートする際に複数のクラスが出てくるかと思いますが、自分で作ったクラスをインポートしてください

この方法だとカスタマイズしたAlertDialogを表示させることもでき、DialogFragmentのライフサイクルで管理するので、メモリリークは起こりにくいと思います。

####参照
[ダイアログ](https://developer.android.com/guide/topics/ui/dialogs.html?hl=ja)
[Dialogと仲良くなる その1](http://bigbuddha.hatenablog.jp/entry/dialog-beginner-1)
AWS Summit Tokyo 2019に初めて行った感想

初めて[AWS Summit](https://aws.amazon.com/jp/summits/tokyo-2019/)に行ったので、その感想と来年参加に向けた備忘録。

![IMAG0436.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/2402fce7-08a1-1411-e66d-9c0d809952d3.jpeg)

![IMAG0438.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/22eac4da-3ffb-dd57-4809-11b676f4c13b.jpeg)

## 開催まで
### 申し込みは簡単、準備は面倒
 - ウェブページから簡単申込み、リマインドメールもくれる
 - 会場には受講票を印刷して持って行かないといけなかった、アナログ…………

### 受付開始30分前に到着
 - 待機列もなくスムーズに受け付け完了
 - 受付時に会場案内やパンフレットを受け取る

## 3日目開催
### 基調講演
 - 9時受付、10時開始のため1時間以上座って待つことになった
    - トイレ行っておいてよかった…………
 - 英語だったけど話題がAWSだから知ってる単語も多く、半分くらい聞き取れた
 - かたいパイプ椅子なので、最後まで講演を聴くのがつらかった
    - 結局2時間半座りっぱなし…………
    - 後ろの席の方が途中で抜け出しやすい

### 企業ブース
 - ブース間は広くスペースをとられていて、人だかりで通路がふさがることはなかった
    - 人口密度は休日の新宿駅くらい
    - コミケよりは全然いい
    - 空調、匂いも問題なし
    - スタッフがあちこちにいて、特に不自由は感じなかった

 - 技術者のための場の側面は期待してた以上には強くなかった
    - AWSを利用することでどう変わったかというより、クラウド製品の売り込みをしてる企業も多かった
        - どういったクラウド技術を使っているかとかクラウド化の課題とか紹介してほしかった…………
    - キャンペーンガールがいる企業もいた
 - ノベルティを渡してきて受け取った瞬間断りもなく個人情報をスキャンしてくる企業もいるので注意
 - もっといろんな企業ブースを見たかったが時間がなかった…………
    - 来年はAWSのブースも多く見てまわりたい


### セッション
 - パイプ椅子に座りっぱなしはつらい…………
    - セッションをすべて受けるのはやめたほうがいい
 - よくある悪い例な発表資料はなかったが、ビジネス的な資料が多かった
    - エンジニアっぽくない資料
    - 技術的な話というかこれからAWSを導入を検討している人向けな感じもした
        - 来年はもっと技術的なセッションの割合増やしてもいいかも
    - 伝えたいことが自社のことなのか、AWSのことなのかでだいぶ方向性が違うセッションになる
        - AWSの構成を簡略図で発表してる企業もあったが、意味があるのか？

 - 自社のアピールしてる企業もあったが、求めてるのとは違った
    - クラウド化してコスト削減しましたとか、当たり前のことを発表されてもいまさら感がある
    - 業界の話は興味深かったが、AWSとは無関係なのでこの場じゃなくても…………という感じ

### 参加者
 - 来場者はエンジニアとユーザー企業の人も多くいたっぽい
 - 男女比率は9:1くらい
 - スーツと私服は半々くらい、認定者ラウンジは私服の割合多かった
 - 年齢層は20代から60代まで幅広い、杖ついてたおじいちゃんもいた

## 参加してみて
### よく話にあがったStep Functions
 - 基調講演やセッションでも話が出てた
 - 思ってたより盛り上がってるサービスな印象を受けた

### DBの選択肢として台帳
 - DynamoDBやRDSと並んで、Amazon QLDBが紹介されてた
 - DBにはいろんな種類があって、RDSやKVSを知ってるだけではもうそろそろ限界がありそう…………

### インフラ構成もコーディングする時代
 - AWS CDK (AWS Cloud Development Kit)でインフラ構成をプログラミング言語で書ける
 - 構成管理もソースのバージョン管理と同等になりそう

### 今の仕事への活かし方
#### あちこちで耳にしたことはとりあえずやってみて、課題を洗い出して改善を繰り返すこと
 - ただ、これを実践できるかというとギャップがある
    - 課題が見つかる　＝　マイナスイメージがある
    - 改善を高速でくりかえすノウハウがない

#### クラウド化は、クラウドサービスで開発すればいいわけではない
 - クラウド化の影響はインフラ的なところだけでなくプロセスも変わる
    - 例えば、クラウド化をウォーターフォール型開発で進めるのは無理がある
 - そもそも最初に設計したとおりに作るという概念がクラウドにはない
    - クラウドは後から設計を見直すことが容易なので、とりあえず作って動かすことが大事

#### SIer企業じゃなくても、ITの提案、実現ができるのでは
 - そもそもITを導入していない企業がIT化を進める昨今において、  
   ソフトウェア企業だけでIT化の提案ができるのではないか
 - クラウド前提ならハードの購入や設置といった要素は不要
 - レガシーシステム⇒クラウド化以外でもソフトウェア企業は戦えそう

#### だれでもどこでもITを始められる
 - モノを売ってた企業がサービスも作って売ることが容易にできる時代がきている
 - SEは考えることが仕事だが、ユーザーが自ら考えだしたら市場価値をどうすれば維持、向上できるのか
はじめてのプロコンメモ(その１)

Python3で挑むにあたり忘れないようにメモ書きを残しておく
[AtCoder に登録したら次にやること ～ これだけ解けば十分闘える！過去問精選 10 問 ～](https://qiita.com/drken/items/fd4e5e3630d0f5859067)
を類題も含めてといた記録のメモ

## 標準入力

```
# -*- coding: utf-8 -*-
# 整数の入力
a = int(input())
# スペース区切りの整数の入力
b, c = map(int, input().split())
# 文字列の入力
s = input()
# 出力
print("{} {}".format(a+b+c, s))
```

# 練習１
[A - Product](https://atcoder.jp/contests/abc086/tasks/abc086_a)

```
シカのAtCoDeerくんは二つの正整数 
a,bを見つけました。 
aとbの積が偶数か奇数か判定してください。
```

## 解答

```python

a,b = map(int, input().split())
if a*b % 2 == 0:
    print('Even')
else:
    print('Odd')
```

# 練習２
[ABC 064 A - RGB Cards](https://atcoder.jp/contests/abc064/tasks/abc064_a)

```
AtCoDeer君は、赤、緑、青色のカードを持っています。
それぞれのカードには 1以上9以下の整数が書かれており、赤色のカードには 
r、緑色のカードにはg、青色のカードには bが書かれています。
3つのカードを左から順に赤、緑、青色の順に並べ、左から整数を読んだときにこれが 4の倍数であるか判定しなさい。
```

## 解答

```
r,g,b = map(int, input().split())
sum = r*100 + g*10 + b
if sum % 4 == 0:
    print('YES')
else:
    print('NO')
```

# 練習３
[ABC 088 A - Infinite Coins](https://atcoder.jp/contests/abc088/tasks/abc088_a)

```
E869120 は 1円硬貨をA枚と500円硬貨を無限枚持っています.
これらの硬貨だけを使うことによって, ちょうど N円を支払うことができるかを判定しなさい.
```

## 解答

```python
Nyen = int(input())
Amai = int(input())

if Nyen % 500 <= Amai:
	print('Yes')
else:
  	print('No')
```

# 練習4
[ABC 082 A - Round Up the Mean](https://atcoder.jp/contests/abc082/tasks/abc082_a)

```
2つの正整数 a, bが与えられます。 a, bの平均値をxとします。 xの小数点以下を切り上げて得られる整数を出力してください。
```

## つくった解答

```python
import math
a,b = map(int, input().split())
print(math.ceil((a+b)/2))
```

## 模範解答

```Python
a, b = map(int, input().split())
print((a + b + 1) // 2)
```

### 参考文献
演算子の切り上げ
https://python.ms/sub/misc/division/#%EF%BC%93%E3%81%A4%E3%81%AE%E3%82%84%E3%82%8A%E6%96%B9

# 練習


# 参考文献
[AtCoder に登録したら次にやること ～ これだけ解けば十分闘える！過去問精選 10 問 ～](https://qiita.com/drken/items/fd4e5e3630d0f5859067)
WIP > C++ Builder 10.2 Tokyo > IDE > エディタのスクロールが遅い (3秒)

WIP (Work in Progress)

```txt:動作環境
Windows 10 v1903
RAD Studio 10.2 Tokyo Update 3
```

### エディタのスクロール (マウスホイール操作）

- XE4: 0.5秒
    - Windows7上ではあるが
- 10.2 Tokyo: 3秒

よく使う機能なので、ストレスが大きい。

改善する方法を探しているが、今のところ分からない。

ユーザの使い勝手にかかわるUIは安易に変更しないでほしいところ（改善なら良いが）。


### キー操作

PageUp, PageDown

- XE4: 0.5秒
- 10.2 Tokyo: 0.5秒


### UI

一度良いUIに慣れた後にUIが以前のようになると、ユーザは「悪くなった」と感じる。
それに慣れる場合もあるし、ストレスを感じ続ける場合もある。

自分の場合は後者である。

### Windows 10の設定
(追記 2019-06-17)

Windows 10の設定にてマウスホイール使用時の移動量を増やしたが、改善しなかった。
≪備忘録≫JavaScriptコマンド

JavaScript用の備忘録


JavaScript

Npmは必要
Webpackの重要性

$npm init
$npm installl
$npm run

https://qiita.com/RyosukeKamei/items/97782fe113a70464502e

LaradockにVue.js導入
npmはPHPにおけるcomposer的なものだと思われるので、すでにLaradock内に存在している。
Vue.jsに関してpackage.json（JSのバージョン管理ツール。phpにおけるcomposer.jsonファイルみたいなもの)内にVueの記述があるため、Laravelにデフォルトで存在しているようである。

https://qiita.com/acro5piano/items/712b6b84151b53d0c53b
https://techblog.kayac.com/2018/12/12/080000

JavaScriptの外部ファイル問題について考察するということ。
JavaScriptはあまり読み込めない。
これについて頑張れば出来るような気がする。

Go to User
AWS DeepRacer は最低だ！やらない方がいい！

タイトルは半分釣りで、そんなに本意ではないです。

## 知って欲しいこと

DeepRacer そのものは楽しいです。それは事実。

ただ、もっと楽しみたいと思ってましたが、続ける気がまったく無くなってしまいました。もっとフェアなゲームではない事実を知られて欲しいと思いますね。

[AWS DeepRacer リーグには参戦してはいけない](https://takulog.info/do-not-join-aws-deepracer-league/)

もっと全ての人が楽しめる仕組みになることを願っています。

## 追記：あまり公開されていないノウハウ

もう必要ないので、AWS Summit Tokyo に向けて、みんなが隠して来たであろうノウハウを晒します。

### 報酬関数はGitHubが参考になる

某大企業でも無い限り手探り状態です。この場合、GitHubで公開されているコードが役に立ちます。

[Search · DeepRacer · GitHub](https://github.com/search?utf8=%E2%9C%93&q=DeepRacer&type=)


### ログ分析ツール

ワークショップでも語られなかったけど、AWS公式のログ分析ツールがあります。

[Simulation Run Log Analysis and Visualization for AWS DeepRacer](https://github.com/aws-samples/aws-deepracer-workshops/blob/master/log-analysis/DeepRacer%20Log%20Analysis.ipynb)

これを見て学習傾向を分析できるし、上位陣はやってるはず。解説記事を書いてる人もいる。

[Using Jupyter Notebook for analysing DeepRacer's logs](https://codelikeamother.uk/using-jupyter-notebook-for-analysing-deepracer-s-logs)


### 報酬関数あれこれ

* 関数内関数とか標準系モジュールのインポートとか、結構色々使える。
* DeepRacer の元コードは[こちら](https://github.com/aws-robotics/aws-robomaker-sample-application-deepracer)。読めるプログラマならコードリーディングする価値あり。
* クローンすると、学習した結果は引き継げる代わりに Action Set は変更できない
* 最大速度8m/sはスピンする
* 海外のガチ勢のブログを読むとホント萎える → [その1](https://medium.com/@nabtechblog/aws-deepracer-the-nab-story-1962f6cfcd7a)、[その2](https://medium.com/@nabtechblog/aws-deepracer-the-nab-story-682bbcd061d5)
Java ローカルクラス

#ローカルクラス
ローカルクラスとは、あるクラスのメソッド内に定義したクラスのこと。
##ルール
アクセス修飾子使用不可（private, protected,public）
static修飾子使用不可
abstract, final修飾子は使用可
外側クラスのメンバにアクセス可

※ローカルクラスから外側クラスの<b>メソッドの引数</b>および<b>ローカル変数</b>にアクセスする際には各変数が定数（final修飾子付き）でなければならない。（ただし、SE8からはローカルクラスからよびだされた時点でfinal修飾子が暗黙的に付与される。）

以下のコードで外側クラスのメソッドの引数、ローカル変数が定数でないとアクセスできない様子、自動的に定数にされている様子が確認できる。
また、外側クラスのインスタンス変数は定数でなくてもローカルクラスからアクセスできていることがわかる。

```java
class OuterA{ //外側クラス
	private static int a = 1;
	private int b =2;
	
	void methodOuter(final int c, int d) {
		final int e =5; int f =6;
		//c=10; //cはfinalがついているから定数。再代入不可。
		//d=10; //この時点では、定数ではないから代入できる。
		//しかし、これをするとdが変数であることが確定するので、ローカルクラスからの呼び出しができなくなる

        //d++; //変数宣言時点でfinalがつくので、この変更をするとローカルクラスから呼べなくなる
		//f++;
		class A{ //ローカルクラス
			void method() {
				System.out.print(a+" ");
				System.out.print(b+" ");
				System.out.print(c+" ");
				System.out.print(d+" ");
				System.out.print(e+" ");
				System.out.print(f+" \n"); //「\n」は改行
				a++;
				b++;
				//c++;
				//d++;
				//e++;
				//f++;
				//c,d,e,fは定数になっているが、a,bは定数じゃない
				System.out.print(a+" "+b);
			}
		}
		new A().method();
	}
}



public class Test3 {

	public static void main(String[] args) {
		OuterA o = new OuterA();
		o.methodOuter(3,4);
	}
}

```
###出力結果
```
1 2 3 4 5 6 
2 3 
```
###ポイント
①インスタンス変数は定数でなくてもローカルクラスから呼び出すことができる。

②メソッドの引数とローカル変数をローカルクラスから呼び出すときは定数（final修飾子付き）でなくてはいけない。（付いていないときは暗黙的に付与される）

③暗黙的にfinal修飾子が付与されるときは、変数の宣言時点で行われるので、その変数をローカルクラスから呼び出すときは、ローカルクラスから変数を呼び出す（ローカルクラスで変数を使用する）以前であっても値の再代入してはいけない。

④変数宣言後に値を変更（代入やインクリメントなど）をした時点で変数であることが確定し、ローカルクラスからの呼び出しはできなくなる。

##参考文献
山本道子『Javaプログラマ Gold SE8』翔泳社.
PHP5.6とPHP7.3でPDO::PARAM_INTの挙動が変わる

PHP5.6 → 7.3 アップグレード時に発覚したPDOの非互換について記録しておく。

PDOでDBの値を更新するために以下のように記述

```php
$stmt->bindParam(':param1', $float, PDO::PARAM_INT);
```

$floatに1.5が入力されていたとすると、

PHP5.6の場合、1.5で更新

PHP7.3の場合、1で更新

される。

小数点で更新する場合、

PDO::PARAM_STR

にすれば、どちらのバージョンでも整数に丸められず更新されるが、
PHP5.6のときは

PDO::PARAM_INT

でも、小数点が丸められずに更新できていた。

PHP7.0、7.1、7.2、7.3のどのタイミングで非互換が発生したのかは調査中。
コマンド一覧

https://www.sejuku.net/blog/5465

| コマンド | 説明 | 使用例 |
|:--|--:|--:|
|  |
| cd |
|  |
|  |
| ディレクトリ（フォルダ）移動 |
|  |
|  |
| cd 移動したいフォルダ名 |
|  |
|  |
| ls |
|  |
|  |
| フォルダの内容をリスト形式で表示する  |
|  |
|  |
| 中身をみたいフォルダに移動して、ls |
|  |
|  |
| mv |
|  |
|  |
| ファイルを移動 |
|  |
|  |
| mv (移動元ファイル名/フォルダ名) (移動先ファイル名/フォルダ名)　 |
|  |
|  |
| cp  |
|  |
|  |
| ファイルやフォルダをコピーする |
|  |
|  |
| cp (移動元ファイル名/フォルダ名) (移動先ファイル名/フォルダ名)　 |
|  |
|  |
| clear  |
|  |
|  |
| 消さずに画面を綺麗にする |
|  |
| - |
|  |
| mkdir  |
|  |
|  |
| フォルダを作成する　 |
|  |
|  |
| mkdir フォルダ名 |
|  |
|  |
| touch |
|  |
|  |
| ファイルを作成する |
|  |
| touch ファイル名 |
|  |
| rmdir |
|  |
|  |
| 空のフォルダを削除する |
|  |
|  |
| rmdir フォルダ名 |
|  |
|  |
| rm  |
|  |
|  |
| ファイルやフォルダを削除する |
|  |
|  |
| rm ファイル名/フォルダ名 |
|  |
|  |
| pwd  |
|  |
|  |
| 現在いる位置を表示する  |
|  |
| - |
|  |
| find  |
|  |
|  |
| ファイルの検索をする |
|  |
| find / -name ファイル名 |
|  |
| cat |
|  |
|  |
| ファイルの内容を表示する |
|  |
|  |
| cat ファイル名 |
|  |
|  |
| diff |
|  |
|  |
| ファイルとファイルの内容の違いを表示する  |
|  |
|  |
| diff 旧ファイル名 新ファイル名 |
|  |
|  |
| grep  |
|  |
|  |
| 指定した文字列がテキスト内に存在した場合その行を抽出する |
|  |
|  |
| grep "検索したい文字" * ファイル名 |
|  |
|  |
| chmod  |
|  |
|  |
| ファイルやフォルダのアクセス権限を変更する |
|  |
|  |
| chmod 権限ファイル名 |
|  |
|  |
| chown |
|  |
|  |
| ファイルやフォルダのオーナーやグループを変更する |
|  |
|  |
| chown 変更したいユーザー名 変更したいファイル名 |
|  |
|  |
| history |
|  |
|  |
| コマンドの履歴を表示する |
|  |
|  |
| - |
|  |
|  |
| ln |
|  |
|  |
| ファイルやフォルダにリンクを設定する |
|  |
|  |
| ln リンク元ファイル名　リンク先ファイル名/フォルダ名 |
|  |
|  |
| man |
|  |
|  |
| コマンドのマニュアルを表示する |
|  |
| man コマンド  |
|  |
| apropos |
|  |
|  |
| manページの内容を検索する |
|  |
|  |
| apropos キーワード |
|  |
|  |
| less |
|  |
|  |
| テキストファイルを閲覧する |
|  |
|  |
| less ファイル名 |
|  |
|  |
| more |
|  |
|  |
| ファイルをページ単位で閲覧する  |
|  |
|  |
| more ファイル名 |
つくりたいもの。

とある、公共団体の運営する競技場があります。
公共団体なので、都民や、区民の税金がおそらく流れています。

このグラウンドは夜中の12時に、予約が開始され2ヶ月後の枠を先着順でとります。
約2ヶ月、毎晩12時に予約を試みましたが、1回も予約ができません。
12時になると1秒で（ゼロに近い）おそらく、業者が大勢のスタッフを駆使して
取ってしまうのです。
コートは4面あり、時間帯も3時間くらい。
つまり12マスが、一瞬で埋まってしまいます。

業者はこの都民のグラウンドを又貸しして儲けていると思います。
たまにやるなら構いませんが、全部のグラウンドを独占するのは
おかしいと思います。

↓↓↓↓↓↓↓ あなたの記事の内容
───────
もし僕が自動で全部機械で押さえられるなら
その枠を今度は業者と小市民を分別して
再配分すると思います。

↑↑↑↑↑↑↑ 編集リクエストの内容
なので、Web上でJSである時間を設定すれば
自動的に動くプログラムを書いてみたいと思います。
Laravel × MySQL × Docker(Laradock) × Heroku

今回はLaradockを試用
コンテナの連携周りがMySQLだとバージョンによってで色々調整必要なのと
herokuへのアップもMySQLだと若干調整が必要で詰まるので整理

## 開発環境
- Laravel最新バージョン
- MySQL5.7
- Docker(Laradock)

## 本番環境
- Laravel最新バージョン
- MySQL5.5.62(herokuのプラグインの関係)
- Docker使ってない

## 環境構築
- リモートにリポジトリ作成する
- 下記コマンド実行する

```
cd ~/workspace
git clone リモートリポジトリURL
git clone https://github.com/laradock/laradock.git
cd laradock 
cp env-example .env
sed -ie 's/APP_CODE_PATH_HOST=..\//APP_CODE_PATH_HOST=..\/src/g' .env
sed -ie 's/MYSQL_VERSION=latest/MYSQL_VERSION=5.7/g' .env
rm .enve
docker-compose up -d workspace nginx mysql
docker-compose exec workspace bash
composer create-project laravel/laravel . --prefer-dist
sed -ie 's/DB_HOST=127.0.0.1/DB_HOST=mysql/g' .env
sed -ie 's/DB_DATABASE=homestead/DB_DATABASE=default/g' .env
sed -ie 's/DB_USERNAME=homestead/DB_USERNAME=default/g' .env
rm .enve
exit
docker-compose exec workspace php artisan migrate

# アクセスしてみる
http://127.0.0.1

cd ~/workspace/リポジトリ名
echo 'laradock/' >> .gitignore
git add .
git commit -m 'first commit' 

heroku auth:login
heroku create アプリ名 --buildpack heroku/php
cd ~/workspace/リポジトリ名/laradock
docker-compose exec workspace bash
echo 'web: vendor/bin/heroku-php-apache2 public/' > Procfile

# herokuのプラグインのMySQLのバージョンが5.5で文字の桁制限がありmigrate時に引っ掛かる
sed -ie '5a use Illuminate\\Support\\Facades\\Schema;' app/Providers/AppServiceProvider.php
sed -ie '27d' app/Providers/AppServiceProvider.php
sed -ie '26a \        Schema::defaultStringLength(191);' app/Providers/AppServiceProvider.php
rm app/Providers/AppServiceProvider.phpe
exit

git add .
git commit -m '[chore]setup for heroku' 

cd ~/workspace/リポジトリ名/laradock
docker-compose exec workspace php artisan --no-ansi key:generate --show
cd ~/workspace/リポジトリ名
heroku config:set APP_KEY=キー

cd ~/workspace/リポジトリ名
git subtree push --prefix src/ heroku master

# トップの正常表示を確認
heroku open

# MySQLの場合Herokuの設定画面でクレジットカードの登録が必要
heroku addons:add cleardb

# 出力情報を設定
heroku config | grep CLEARDB_DATABASE_URL
# CLEARDB_DATABASE_URL: mysql://ユーザー名:パスワード@ホスト名:ポート/データベース名
heroku config:set DB_DATABASE=データベース名
heroku config:set DB_HOST=ホスト名
heroku config:set DB_USERNAME=ユーザー名
heroku config:set DB_PASSWORD=パスワード

heroku config:set APP_ENV=heroku
heroku config:set LANG=ja_JP.UTF-8
heroku config:set TZ=Asia/Tokyo

heroku run php artisan migrate

# トップの正常表示を確認
heroku open
```

## メモ
- LaradockはMySQL8.0とかだと現状失敗する(設定諸々必要)
- Laradockはデフォルトでcomposeすると不必要にvolume大量生成される
- 時間があればdocker-compose.ymlを切り出して利用するのが良さそう
- HerokuのMySQLのバージョンは現状5系
- 時間があればdocker-compose.ymlを切り出してherokuにもdockerでプッシュするのが良さそう

## 雑感
Laradockの運用のベストプラクティスがよく分かっていなそう
Laradock色々定義されているのでもう少し適切な設定に把握が必要
色の付け方

こんにちは!未来電子テクノロジーでインターンをしております西尾です！
今回は、CSSでの色の付け方についてまとめていきます！

##背景色
```セレクタ｛
background-color:色指定;
}
```
上記の色指定のところにカラーネームやカラーコードを入れます。

##文字色
文字の色はcolorプロパティで指定できます。

```セレクタ{
color:色指定;
}
```

背景色同様、色指定のところにカラーネームやカラーコードを入れます。


##枠線色

さらに、枠線の色も指定できます。

```
セレクタ{
/*4色すべて同じ色にする場合*/
border-color:色指定;

/*上下と左右で色を変える場合*/
border-color:色指定　色指定;

/*上と下と左右で色を変える場合*/
border-color:色指定　色指定　色指定;

/*4食すべて別の色にする場合*/
border-color:色指定　色指定　色指定　色指定;
}
```
##まとめ

今回は、CSSで色を指定する方法をご紹介しました。
好きな色を指定して、雰囲気にあったデザインを作れるように頑張ります！

ありがとうございました！
レンタルサーバの選び方

##レンタルサーバの選び方
使ったことがないため、とりあえず他記事を参考にしてみる。

・IaaS PaaS SaaSそれぞれの違いとVPSとの比較
https://qiita.com/kznr_luk/items/55a3ff527bd2b81a3d52

・個人開発用のインフラ選び（IaaS/PaaS/VPS）
https://qiita.com/shozzy/items/4e7a1651f80365e0f2e9

Webサービス系を試しに作ってみるのが目的だからまずはHerokuでいいかな。
トラコン予備校に参加してきました

# トラコン予備校2019に参加してきました。

学校から紹介をいただきまして、参加してきました。
知識を知りたい人は私の記事ではなくもっと良い記事があると思うのでググって見ることをおすすめします。
あくまで何を勉強したかのメモのようなものです。

### トラコンってなんぞや?
- 詳しくは[トラブルシューティングコンテスト]("https://icttoracon.net/")を
- 与えられた問題をどのように解決するかを競うコンテスト(で合ってるはず)
- なんかとても難しそう()

### それの予備校(勉強会です)
**本戦ではありません**予備校です。
(多分いきなり本戦行ったら自分の実力では解けなさそうです...)

# でなにやったの？
- IPv6について
- Dockerについて

## IPv6について
- v4の枯渇を防止するために作られた
- NATが不要
- ARP(MACアドレス),DHCP(IPアドレス)がICMPv6でいけるらしい
- ブロードキャストいらないんだって
- その他諸々(IP,MAC問い合わせとか)

### ハンズオンしましょう
「VyOSからRA送信しRAを受信したクライアントから
VyOSにpingで疎通確認をします。」と言われました。
簡単らしいですが初見では何言ってるかわかりません()

### がんばりましょう
- RA→ルーターからプレフィクスが送られてくる(アドレスが作れる)
- VyOS→OSSのソフトウェアルーター

1. VyOS側に入る
2. RAを有効化し広告するプレフィックスを選択
3. クライアント側に入りpingを通す

**通りました!!**

この後は去年の予選の過去問を解きました。

## Dockerについて
個人的にDockerは勉強していたので楽でした
- カーネルより上を仮想化する
- 動作が高速
- ディスクリソースの使用量が少ない
- コンテナ型仮想(Docker etc...)はホストOSに攻撃を仕掛けられることがある(初めて知った)

## ハンズオンしましょう
- dockerコマンド各種
- 自前イメージのbuild
- dockerのいろいろにまつわるクイズ(UIDとか)

### おまけ
コンテナってどうやって実装されているの？
- コンテナで起動するプロセスは他のプロセスから隔離させる必要がある
- カーネルリソースを分割する機能を使っている
- 今回は**名前空間**についてのみ

### dockerを使わないでコンテナを作ろう!
- cpで諸々をコピー
- 何も考えずにchroot !

↓

- ホストからプロセスが見えちゃうのヤバい()
- 名前空間を分離しましょう!
- unshare -p(pid)f(fork) chroot ~ 
- 自作コンテナっぽいものができました～


# 終わり

## 懇親会
<img width="300" alt="pizza" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351683/96c03ef9-7bb8-8fc1-8aae-b146dfa3d3a2.jpeg">
美味しかった
運営の方とたくさんお話して楽しかったです
Microsoft Teams 管理時に詰まったポイント

# Microsoft Teams 管理時に詰まったポイント

　管理時に詰まったポイントをクイックにまとめていきます。コンテンツは徐々に増えます。



## 管理設定はどこでするの？

　[Microsoft Teamsのダッシュボード](https://admin.teams.microsoft.com/dashboard)で行います。


## 翻訳機能のON

　メッセージングポリシーの「ユーザーにメッセージの翻訳を許可する」をオンにする。同時に「会話でGiphysを使用」がオンになっていたらオフにしておくことを推奨します（下品なGiphyなどあるのでビジネスには向かない）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/760ba395-55c5-ce70-5fcf-b92a825daf83.png)
clearfixの仕組み

clearfixは、
フローティングボックスが後続のボックスのレイアウトに影響を与えないようにするためのテクニック。




```html
<header>header</header>
<div class="wrap">
  <article class="main">main</article>
  <aside class="side">side</aside>
</div>
<footer>footer</footer>
```
このHTMLに対して、
CSSで、mainにfloat:left;、sideにfloat:right;、wrapにwidthを設定するなどすると、footerが入り込む。

<font color="Silver">
（補足（蛇足）。上のHTML内のタグについて。`<article>`は、それだけで内容が完結している部分で使用。
ページのメインコンテンツや、ブログの１つの記事などの「それだけで完結している部分（内容がまとまったもの）」で使用。（1ページに複数使用可。）`<aside>`は、メインコンテンツでない部分で使用。サイドバーに使ったり、広告の表示などに使う。）
</font>

そこで、下記のように記述する。

```css
.wrap:after {
  display: block;
  clear: both;
  content: "";
}
```

こうすると、footerが入り込まない。

:afterで.wrapの後ろにcontent: "";とdisplay: block;による空のブロック要素が追加され、
clear:both;によって回り込みが解除されて、footerがフローティングボックス（mainとside）の下にくる。

<font color="Silver">
補足。
clearは、floatで設定した回りこみを解除するもの。以下、設定値の種類。
・none（初期値）
回り込み解除をしない指定。
・left
左側の回り込みを解除する指定。
・right
右側の回りこみを解除する指定。
・both
左側、右側ともに回りこみを解除する指定。
</font>

clearfixの代わりにoverflowを使う方法もありますが、割愛します。

以上。
Railsにおけるモデルについて

Railsを学習している時、モデルの理解があまりよく分かっていなかった。具体的には、MVCのMの部分である、やコントローラのアクションが出たら、次はモデルに処理がされるのか、くらいの認識でした。
そのため、今回モデルについて、復習した内容をアウトプットしてみた。


#１.モデルとは何か？
モデルとは、データベースとの間で情報のやり取りを行うクラスのことをいう。

データベースとは、様々な情報を集めて保存したテーブルが、まとめて格納されている場所をいう。
データベースのイメージとしては、以下のような画像を参照ください。
https://gyazo.com/753e011a9cbf5e677f04ba8d9030efb2

クラスとは、オブジェクトを作成する元となる設計図である。
クラスについては、以下のサイトを参照ください。
https://techacademy.jp/magazine/9720

テーブルとは、表形式（エクセルの表）で情報を格納しているものをいう。そして、表の読み方として、テーブルの横1行のことをレコード、縦1列のことをカラムという。


#2.モデルの役割

モデルは、テータベースの設計図であり、コントローラのとデータベース上のテーブルとの**つなぎ役**でもある。
https://gyazo.com/bcfa7466a81f1715829b6c81a658e979
つまり、コントローラとモデルとの間では、モデルという大枠を定義して、テーブルという細かい情報を格納している場所と**アクセスできる関係性**が設定されている。

テーブルとモデルの関係性は、テーブルとモデルクラスの**名前**によって決定する。これは、モデルの命名規則と関係している。モデルの命名規則については、以下の画像を必ず参照ください。
https://gyazo.com/e2fbec8c18b3d4ba90144f229fa35a17



**具体例**
app/models/tweet.rb  (モデルクラス)

```ruby
class Tweet < ApplicationRecord
end
```
app/controllers/tweets_controller.rb (コントローラ)

```ruby
class TweetsController < ApplicationController
    def index
       @tweet = Tweet.find(1)
    end
end
```

モデルのTweetクラスとコントローラのインスタンス変数である@ tweet = Tweet.find(1)のTweetは、同じ意味である。ここでの@ tweet(変数)の中に入っている値は、 Tweetクラスから呼び出されたデータベース上のtweetsテーブルのレコード１の値を意味している。つまり、上記における@ tweetは、Tweetクラスのインスタンスということを意味している。

※モデルの命名規則について、個人的には@ tweet = Tweet.find(1)のTweetは、なぜ大文字表記なのかさっぱり理解できなかった。モデルクラス名は先頭は大文字・単数形で、テーブル名は先頭は小文字・複数形であることを知らなかったからであった。

#3.モデルの作成方法
モデルを作成する際は、以下のコマンドを実行する。

```
$ rails g model モデルクラス名
```
コマンドを打つ時、モデルクラスの文字表記は、全て小文字で記述する。

正しく実行がされれば、以下のようにモデルファイルとマイグレーションファイルが生成される。

```
 create    db/migrate/20141011073059_create_tweets.rb
  create    app/models/tweet.rb
```
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　以上

＜参考記事＞
・https://www.buildinsider.net/web/rubyonrails4/0204
・https://udemy.benesse.co.jp/development/web/rails-model.html
・https://udemy.benesse.co.jp/development/web/rails-model.html
pycharm, pyenvを使って既存のpythonプロジェクトの環境構築

# pycharmを使って環境構築
- mac OS Mojave（10.14.5）
- pyenv 1.2.12
- python 3.6.0
- Pycharm 2019.1.3 (Community Edition)

## Pycharmのinstall

- 公式サイトからインストール

https://www.jetbrains.com/pycharm/

Community版を使わせてもらいます。

## pyenvを使ってプロジェクトのpython versionを合わせる

- pyenvをhome brewでinstall

` brew install pyenv `

- pathを通すために以下の3つのコマンドを実行

` echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bash_profile `

` echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bash_profile `

` echo 'eval "$(pyenv init -)"' >> ~/.bash_profile `

- .bash_profileに追記されていることを確認と、pyenvに関するコメントの追加

` vi ~/.bash_profile `

```.bash_profile
source ~/.bashrc
# mysql@5.7
export PATH="/usr/local/opt/mysql@5.7/bin:$PATH"
export PKG_CONFIG_PATH="/usr/local/opt/mysql@5.7/lib/pkgconfig"
 
# pyenv
export PYENV_ROOT="$HOME/.pyenv"
export PATH="$PYENV_ROOT/bin:$PATH"
eval "$(pyenv init -)"
```


- .bash_profileにpyenvを使用できるように設定できたので.bash_profile適用

` source ~/.bash_profile ` 

- インストール可能なpythonのバージョンリストを確認

` pyenv install --list `

- プロジェクトで必要なバージョンのインストール

` pyenv install 3.6.0 `

- プロジェクトで必要なバージョンの指定

` pyenv local 3.6.0 `


- mac全体にdefaultとして3.6.0を使いたい場合は必要なバージョンを指定

` pyenv global 3.6.0 `

- 指定したバージョンを反映

` pyenv rehash `

- 指定したバージョンがちゃんと反映されているか現在のpythonバージョンの確認

` python --version `


## 余談

- pyenv配下でインストール済みのpythonバージョンの確認

` pyenv versions `

- pyenv配下で不要になったインストール済みのpythonバージョンをアンインストール

` pyenv uninstall 3.5.3 `

## pycharmに設定したpythonのバージョンを読み込ませる

- pycharm -> preference -> Project Inspectorを開く

<img width="1024" alt="project_inspector.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143374/78775327-3f6c-af3c-e76e-da3e9af9512b.png">



- Project Inspector部分を選択 -> Show All

<img width="1008" alt="show_all.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143374/7ad686fd-4c6c-bfb3-d38f-8a37e10dae30.png">



- 使いたいバージョンがリストになければ下の + ボタンで開く

<img width="628" alt="show_all_detail.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143374/21c1f6a4-cc72-e97f-a6d5-e6fe07e26169.png">


- Virtualenv EnvironmentからExisting environmentで
使いたいバージョンを選択

<img width="905" alt="Virtualenv_Environment.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143374/a952f80a-e7f0-a00b-a253-bc017fd9a132.png">


🎉🎉🎉DONE🎉🎉🎉🎉

あとはpycharm側で` requirements.txt `を読み込んで必要なライブラリをインストールしてくれるのを待つ。
Djangoのtest実行時に発生するデータベースエラー Got an error creating the test database: permission denied to create database

## 環境
Django==2.0.4
PyMySQL==0.8.0
MySQL==5.7

## 問題
djangoのtest.pyを書いてテストを実行。

```console
$ python manage.py test
```

以下のようなエラーが出た。

```console
# Got an error creating the test database: (1044, "Access denied for user 'user'@'%' to database 'test_database'")
```

どうやら、テスト実行時にdatabaseの他にテスト用のデータベースtest_databaseを作ってテストしているらしい。
そしてそのデータベース作成のための権限がなかったらしい。
## 解決策
### settings.pyのデータベースの部分を修正

```Python:settings.py
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'database',
        'USER': 'user',
        'PASSWORD': 'password',
        'HOST': 'db',
        'PORT': '3306',
        # テスト用にこの行を追加
        'TEST': {
            'NAME': 'test_database',
        },
    }
}
```

ShellでMySQLにrootでログインする

```console
$ mysql -u root -p
```
djangoからデータベース操作するuserにtest_databaseへの権利を付与する。

```console
mysql> GRANT ALL PRIVILEGES ON test_database.* TO 'user'@'%';
```
以上

## 参考
この記事は主に次のサイトの和訳になってます。
https://stackoverflow.com/questions/14186055/django-test-app-error-got-an-error-creating-the-test-database-permission-deni
PageSpeed Insightsのスコア曲線

# 2020/6/3 追記

本家レポートより**PageSpeed Insightsのスコア改善が捗る裏レポートツール**を公開しました。合わせてご参考ください。
https://simulate.site/cheatspeed-insights/

この記事はLighthouse 5.6に準拠しています。Lighthouse 6.0への変更についてはこちらの記事などをご参考ください。
[PageSpeed Insightsのスコア大変動か？ Lighthouse 6 で変わる採点ルールを先取りチェック！ \- アイデアマンズブログ](https://blog.ideamans.com/2020/03/pagespeed-lighthouse-6-draft.html)

# PageSpeed Insightsの採点ロジック

以前、PageSpeed Insightsスコアがどう極められているか、Lighthouseのソースコードを調べました。

* [PageSpeed Insightsの真実。点数の公式と高得点をとれない理由](https://blog.ideamans.com/2019/04/inside-pagespeed-insights.html)
* [PageSpeed Insightsの点数はどのように計算されているか。100点をとるための条件](https://qiita.com/miyanaga/items/d38124cdd64a1999fed9)
* [PageSpeed Insightsの改善にはまずJavaScriptのダイエットを](https://qiita.com/miyanaga/items/b3d955a6fd70ef7d89ec)

要約すると次の通りです。

* 5つのタイミング指標だけを見ている。
* それら(特にTTIとスピードインデックス)が速くなるほどスコアが上がる。
* スコアは、世界のWebページを100人の村としたときの順位を示す。
* 順位は対数正規分布に推定。

![貼り付けた画像_2019_06_16_4_59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35178/39a12aa5-9969-7f90-f72c-44d5e0d9e0a4.png)

# スコアの変動は非線形

この上記のチャートが示す通り、単純に指標を2倍改善すれば(半分に縮めたら)、スコアも2倍になるものではありません。

指標とスコアの関係をプロットしてみたのがこちらです。

![貼り付けた画像_2019_06_16_4_47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35178/d08b8f51-a770-1e00-e7dc-5da1bdd192c9.png)

曲線なので感覚的なところですが、10点刻みでは次の傾向が見て取れます。

* 0点〜20点くらいまではスコアが上がりにくい。
* 20点〜90点くらいまではぐんぐんスコアが上がる。
* 90点〜100点もまたスコアが上がりにくくて大変。
【Mac】超簡単！HTMLとCSSファイルを作成し、Hello Worldをブラウザに表示させる方法

#目的
ProgateでHTML&CSS勉強したけど、自分のPCでHTML&CSSを勉強したい人。
とりあえずHello Worldを出したい人
Mac個人向けの記事です。




#準備するもの、知識
Mac
エディタ（Visual Studio Codeを推奨）
下記の準備物を終わらせてください。
https://qiita.com/YutakaYamasaki/items/cbf4a8ecea9b041d158a
マウスの操作がわかる人(右クリック)



#Hellow Worldを表示させる手順

##フォルダ作成
デスクトップで右クリックを押してフォルダを作成します。
フォルダ名は何でもいいですが、英語でわかりやすい言葉が望ましいです。
ここではHTML&CSSといったファイルを作成します。下記の手順のように作成してみてください。
![HTML&CSS.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387875/746e93b5-6645-beba-6958-4e6e1c400910.gif)

##HTMLファイル作成
エディタを起動します。（本記事ではVisual Studio codeを使用します。）
先ほど作成したフォルダをエディタにドロップアンドドロップします。
その後、そのフォルダにhello_world.htmlファイルを作成します。
ファイルを作成すると自動的にファイルが開いて編集することができます。
下記の手順のように作成してみてください。
![HTML&CSS2.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387875/cef3ca84-4717-caf8-a45c-66f1a253af82.gif)


##hello_world.htmlファイルの編集
今回は下記のようにコードを書いてみてください。
h1タグでHelloWorldを囲ってください。

```html:hellow_world.html

<h1>Hello World</h1>
```

作成ができたら、ファイルを保存します。
キーボードの```command```を押しながら```s```を押してください。
これで準備は整いました！
あとは表示するだけです。

##HTMLのファイルをブラウザで表示する。
HTMLのファイルを作成します。
ファイルを右クリックしてパスをコピーしてください。
Google Chromeを開き、URL欄に貼り付けてEnterを押すと、HelloWorldが表示されます！
![HTML&CSS3.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387875/e6c9989a-1fcf-c0de-0cca-8b19f377172a.gif)

#CSSを使ってHelloWorldを赤くする手順

##CSSファイルを作成する。
先ほどのHTMLファイルを作成の手順を元にCSSファイルを新しく作成しましょう。
ここではhello.cssのファイルを作成します。
<img width="191" alt="スクリーンショット 2019-06-16 午前4.03.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387875/2f3e5978-c56c-5a66-cd40-eaf6881b531d.png">
今回はh1のタグを指定して文字を赤くします。
下のようにコードを書きましょう。

```css:hello.css
h1{
    color: red;
}
```

作成し終えたら、保存のコマンドも忘れずに
(```command```+```s```)


##HTMLファイルを修正する。
CSSファイルを作成しましたが、これだけでは文字の色が反映されません。
HTMLファイルにCSSのファイルを紐付ける必要があります。
先ほど書いたコードを下のようにコードを編集してください。

```html:hello_world.html
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="hello.css">
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>
```
作成し終えたら、保存のコマンドも忘れずに
(```command```+```s```)

##仕上げ
最後に編集したファイルをブラウザに表示させましょう。
先ほどの手順と一緒に、HTMLのファイルのパスをコピーし、
GoogleChromeのURLに貼り付けします。
Enterを押すと文字が赤くなっています！
<img width="448" alt="スクリーンショット 2019-06-16 午前4.16.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387875/46cc9b41-89cc-6b08-5aba-0f79a295a382.png">

#終わりに
いかがでしょうか。
もう既に知っている方もおられるかたがほとんどかと思いますが、
自学習、復習でお役に立てると嬉しいです。

ちなみに補足ですが
Visual Studio Codeを使うとき、h1を入力して
そのままキーボードの```tab```キーを入力すると自動的に
```<h1></h1>```を作成してくれます。

最初は慣れないかと思いますが、とても便利な機能なのでぜひ使いこなしてください。
それではまた
kubernetes で deployment リソースに変更を加えずに rolling update させる

k8s で deployment resource に変更を加えずに pod を立ち上げ直したいことは稀によくある。
例えば secret に変更を加えた場合それだけでは pod に変更が反映されないので rolling update させたくなる。

4年ぐらい前から戦っていたらしいがどうやら決着がついて v1.15 から kubectl にそのための機能である `kubectl rollout restart` が入るようだ :tada: > https://github.com/kubernetes/kubernetes/issues/13488

```
$ kubectl rollout restart deployments/xxx
```

v1.15 は 2019年6月現在まだリリースされていないが、サーバを v1.15 にしなくとも kubectl を更新すれば使えるので https://github.com/kubernetes/kubernetes/blob/master/CHANGELOG-1.15.md の Client Binaries からダウンロードしてくれば今からでも使える(筆者の環境はサーバは v1.13.5 だったが使えた)
良い質問の仕方

#人から教えて頂くときに最低限やるべきこと
良い質問には答えたくなるもの。
質問の質を上げて学習効率をグッと上げていこう。

- 自分自身でエラーの原因を調べ、自己解決を試みている。
- どこまで調べて何がわからないのかがわかりやすく、質問に対して回答がしやすい。
- 原因の推測に至る過程も書かれているので、「よりよい調べ方」などのアドバイスももらいやすい。

#質問というのは相手の時間を奪う行為
だからといって気を遣って遠慮していると、現場での仕事の覚えは悪くなる。
「回答者が答えやすいように自分の時間を使い、配慮している」そういう質問をすべき。

#コードのスクショを貼り付けない
なぜか？
この方法だと「回答者が検索しづらい」。

僕は学習をはじめたころ、とりあえずスクショ撮ってメールで質問していた。
でもよく考えると、当たり前ですが、スクショはコピペができない。

コードは画像ではなく、テキストで。
回答してくれる方への最低限の気遣い。

#参考にさせて頂いた記事
https://freelance.cat-algorithm.com/how_to_ask/