OmniAICreator/Qiita-1.07M huggingface dataset:
【UiPath】指定した画像の隣のテキストを取得する

サイトの掲載情報を取得する際、Get Textアクティビティでは苦戦したケースがあったので、
具体的な問題点と、代替策の紹介をします。
#問題点
例えばコレ→ ![露出.png](https://qiita-image-store.s3.amazonaws.com/0/255097/3dae8b1d-f39e-b136-df79-e0d836b13968.png)

写真投稿サイトFlickrの投稿写真の絞り値（この例だとf/4.5）を取得してみたのですが、
単純にGet Textを使うとSelectorは
![selector1.png](https://qiita-image-store.s3.amazonaws.com/0/255097/be08ab5d-6bac-b749-483a-8c1b4c364b7d.png)
と設定されます。
idの 'yui_3_~' は固定でなくページアクセスの度に変わるので、二度目からは確実に失敗します。
（Flickrは全てのコントロールのidを動的に生成してるっぽい）
逆に後半部分を*（アスタリスク）に変えると、他のコントロールとダブってうまくいかない。

#代替策＝アンカー画像の相対位置でテキスト取得
HTML要素を使ったSelectorには限界があるので、画像検出機能に頼ります。
絞り値の左にはシャッターマークがあるので、これを頼り（アンカー/Anchor）に絞り値を取得します。
![shutter.png](https://qiita-image-store.s3.amazonaws.com/0/255097/4410f996-edf8-eeaa-7d46-22de967122b2.png)

Citrix Recording > Scrape Relative を使います。
![citrix.png](https://qiita-image-store.s3.amazonaws.com/0/255097/da9153ce-542d-4465-d359-701dd54d7ea9.png)　![scraperelative.png](https://qiita-image-store.s3.amazonaws.com/0/255097/d75cb9b7-63ad-5c19-8d75-aed928dece69.png)
![step1.png](https://qiita-image-store.s3.amazonaws.com/0/255097/c045894f-50a3-e6f0-c88d-476073ba4f61.png) まずシャッターマークを囲んで目印（アンカー）にします。
![step2.png](https://qiita-image-store.s3.amazonaws.com/0/255097/c85ed6ad-9f8e-b350-96b4-2e785ee4ffc6.png) 次にフキダシ内の[indicate]を押して、
![step3.png](https://qiita-image-store.s3.amazonaws.com/0/255097/53c3f7ac-a72f-6620-a404-182515717b39.png) 取得したいテキスト部分を囲むと・・・

狙ったテキストを取得でき…るはずが、↓の[Nokon D500]のように他の余計なテキストも拾ってしまってます。
どうもScraping Methodが"FullText"なのが原因のようで、
![step4.png](https://qiita-image-store.s3.amazonaws.com/0/255097/7dbd8cd1-6760-1802-310a-ea2a47480984.png)
"Native"にするとうまく狙った範囲のテキストだけ取得できました。
![step5.png](https://qiita-image-store.s3.amazonaws.com/0/255097/f86f7d8e-b8a8-4bd2-863b-e77a90f7381b.png)

Save&Exitで自動生成されたワークフローは
1. Find imageでシャッターマークの位置を取得
2. Set clipping regionで1.からの相対位置指定でテキスト読み取りRegionを設定
3. Get visible textで2.のRegion内のテキストを読み取り、変数に保存
4. 再度Set clipping regionでテキスト読み取りRegionをクリア
となりました。
![step6.png](https://qiita-image-store.s3.amazonaws.com/0/255097/6486b82b-961f-c4c8-e0df-d2847fe4e7c2.png)

で、実行。うまく取れてます→ ![step7.png](https://qiita-image-store.s3.amazonaws.com/0/255097/04d23c88-cb3d-9af1-823a-3b7249722436.png)

ただし画像検出である以上、ディスプレイ上に検出したい画像が表示されている必要があります。
今回のFlickrの絞り値はサイトの下の方にあるので、最初にSend keyでPage downさせて
絞り値が表示される位置までスライドさせる必要があります。面倒。

---
### ※補足
今回のFlickrですが、Get TextアクティビティでもサイトのHTML構造を（IEならF12で）調べながら
Selectorを工夫する事で、安定したデータ取得を実現可能です。

HTMLの構造↓を見ると、親のclass要素（c-charm-item-~）とSPANタグで掴めそう。
![html.png](https://qiita-image-store.s3.amazonaws.com/0/255097/59512fab-8915-9b46-5577-3385b31f0462.png)

parentclass要素を使う事で安定的に掴めるようにしたSelector。コレでいけます。
![newselector.png](https://qiita-image-store.s3.amazonaws.com/0/255097/c9921bf7-041d-8793-6402-1aed6c6adea6.png)

Selectorを工夫して安定性を高められるのがUiPathの最大の強みなのですが、
なぜ最初からこういうSelectorを生成してくれないのか。
安定したSelectorを自動で組んでくれるAIが必要だな・・・
CSSでチラつき表現

# 背景
わざとちらつかせて古いテレビ的な表現とかかっこいいですよね。
CSSのみでざっくり作ってみました。

# 結論
こんな感じです。

<p data-height="265" data-theme-id="0" data-slug-hash="OZZKjQ" data-default-tab="css,result" data-user="hashito" data-embed-version="2" data-pen-title="tiratuki tv" class="codepen">See the Pen <a href="https://codepen.io/hashito/pen/OZZKjQ/">tiratuki tv</a> by hashito (<a href="https://codepen.io/hashito">@hashito</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

##解説
 * 標準の動画は```doga```で表現.
 * チラつき①は```before```要素で表現
 * チラつき②は```after```要素で表現
各チラつきは位置とFilterの値が少しずつ違う様になっていて、１%単位で表示したりしなかったりみたいになっています。
ココらへんの値を変えればもう少しかっこよくなるのかなぁ…


# もう少し簡単な書き方
## 概要
コメントでご指摘を頂いたので、```inherit```を利用したほうが簡素にかけるらしい…
 ```inherit```って？→**親要素の計算値を引き継ぐ**
親…要素…？そもそも```before```とかって誰の子要素なんだろう…

ということで少し試してみました。

<p data-height="265" data-theme-id="0" data-slug-hash="xjzLZK" data-default-tab="css,result" data-user="hashito" data-embed-version="2" data-pen-title="inherit test" class="codepen">See the Pen <a href="https://codepen.io/hashito/pen/xjzLZK/">inherit test</a> by hashito (<a href="https://codepen.io/hashito">@hashito</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

まず、クラス```t1```で普通の継承の動き。
親要素```t1```から```t1-1```と```t1-1::before```、```t1-1::after```に引き継がれています。

まず、クラス```t2```で```before```と```after```への継承の動き。
 ```t2-1```から```t2-1::before```、```t2-1::after```に引き継がれています。
つまり、```before```と```after```は対象要素の子として動いているようです。

最後に、クラス```t３```で```before```からの継承の動き。
 どこにも引き継がれていないことが分かります。
つまり、```before```→```after```とかっていう親子関係はないということですね。

## 実装
下記の部分を継承するように変更。 

``` css
  background-image: inherit;  
  width:inherit;
  height:inherit;
```

<p data-height="265" data-theme-id="0" data-slug-hash="rvKzwE" data-default-tab="css,result" data-user="hashito" data-embed-version="2" data-pen-title="tiratuki tv(inherit)" class="codepen">See the Pen <a href="https://codepen.io/hashito/pen/rvKzwE/">tiratuki tv(inherit)</a> by hashito (<a href="https://codepen.io/hashito">@hashito</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

こうすると対象要素しか画像に関する情報を入力しなくてすむので、良いですよね！
コメントありがとうございました！
Adobe Acrobat Reader DCでツールパネルウィンドウを非表示にする

##はじめに
Adobe Acrobat Reader DCを使っていると、デフォルトの設定だと右側にツールパネルウィンドウが初期表示されて邪魔ですよね😥
これを非表示にしたいので、設定方法をまとめます😁
![image.png](https://qiita-image-store.s3.amazonaws.com/0/228400/197ce4a7-c3fe-bf00-5869-47d87807e6d7.png)

##設定方法
[表示]>[表示切り替え]>[ツールパネルウィンドウ]
のチェックを外します
（もしくは[Shift]+[F4]を入力してもOK❗）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/228400/b9c93db1-c431-b4f9-1aa5-473cb3785cc4.png)
この設定でパネルを非表示にすることができました
が、再度アプリを開くとまた表示が復活していまいます（●｀ε´●）

そこで
[編集]>[環境設定]>[文書]>[ツールパネルの現在の状態を記憶]
にチェックを入れます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/228400/b8a18331-1cd5-8b57-f552-270fde33f3e3.png)

再起動してみましょう❗
![image.png](https://qiita-image-store.s3.amazonaws.com/0/228400/4b3c697c-5595-9be7-51a2-47039f7be367.png)

できました😆
if文の中で変数定義 - PHP

# 知らなかったこと
- if文の中で変数定義ができること。
- ```if ( !$var = 'Well done' ) {}```のように、否定の論理演算子がついている場合、**条件式に当てはまらない場合に変数定義がおこなわれる**。

# 検証

### ◯テスト1
```php
<?php
// Test1
if(!$var = 'Well done!') {
    echo 'Hello World!';
}
echo $var;
```
結果は 「Well done!」となります。

### ◯テスト2
```php
<?php
// Test2
$test = 'Good morning!';
if(!$test = 'Good morning!') {
    echo 'Oh my goodness!';
} elseif($test = 'HELLO!') {
    echo 'Are you serious?';
}

echo $test;
```
結果は「Are you serious?」と「HELLO!」の二つが出力されます。

※実際の実行結果は[こちら(paiza.ioが開きます。)](https://paiza.io/projects/maOqH2fAiRfliYcGNNLlYw)で確認できます。

# なんだこの挙動は

```$test``` に格納された値の動きとしては以下のようになると思います。

```Good morning!```
**↓**
```Good morning!```（最初の```if```文の条件に合致しないため、```Good morning!```が代入される）
**↓**
```HELLO!```（```elseif```の条件文の中で```$test```に```HELLO!```が代入される）

# IF文の意味とは

果たしてこんな条件分岐文が実際の現場で書かれたりするのかはわからないが、

先述の```if```文のように条件文の中で変数定義をすると、
元々の変数の中身が何であっても確実に```if```文のいずれかの結果が出力されることになる。

※そもそもこのエントリー自体、PHPの初心者向け本を演習中に生じた疑問がきっかけなのですが、条件分岐文の中で変数定義をすると、予期せぬエラーが起きたりするのかなあと思いました。

# 今後の自分の方針として
初心者にとって分かりづらい文は書きたくないので、
```if```文中に変数定義はしないでおきます。。。

# 参考
[・PHPしっかり入門教室 使える力が身につく、仕組みからわかる。](http://www.shoeisha.co.jp/book/detail/9784798153377)
darknet yoloをWebSocket通信を利用して試してみた

# やりたいこと
前回の記事[pythonでdarknet(yolov2)の検出結果を画像に埋め込む](https://qiita.com/komorin0521/items/2f211c577c3c6b10b8fc)ではdarknet yoloを利用したAPIを作ってみましたが、
あれではyoloのアピール点の１つである速さについてはあまり体感できない...
ということで、今回はWebSocket通信を利用して、リアルタイム感を出すようにしてみました。
いつのまにかyolov2からyolov3になっていたので。yolov3で試してみました。

# ソース
サーバ側：https://github.com/komorin0521/yolo_ws_server
クライアント側：https://github.com/komorin0521/yolo_ws_client

各ページにReadMeがあるので、そちらに従って試してみてください
（不備があればコメント等頂ければ幸いです）

# サーバ側で苦労したところ
## yoloとの連携
`darknet.py`の`_convert_to_yolo_img`関数の部分
pythonからyolo(C)に対して、画像を受け渡す際の
画像のフォーマットの調整が少し大変でした。
PILのフォーマットをtranspose(2, 0, 1)した上で、
1次元配列にして、c_arrayに変換して、さらにrbggr_imgという
yoloの関数を利用しなきゃだめだった。
yoloの関数とにらめっこして、がんばりました。

## WebSocket通信について
こちらは、[PythonでWebSocketのお勉強](http://make-muda.weblike.jp/2017/10/5645/)を参考に作成
けっこう簡単に実装できた。

# クライアント側で苦労したところ
## カメラ画像キャプチャ
javascriptにはめっぽう弱いため、いろいろな記事を探しつつ実装
動画を静止画(png)にして、画像を送信する記事を発見したので、それを応用
また、WebSocket通信のモジュールについても、サンプルを見よう見まねで実装
n[sec]間隔で静止画を切り出して、送信するようにしました。

ただ、最初は画像を送信してもpythonでの形式がどの形式で表示可能かがわからずで。
どうやら、640×480など、大きなサイズだと、上半分の画像しかサーバ側では受信できない事象があり、
サイズ制限とかあるのかな？とまだ未解決状態
また、chromeではどうやら、カメラを取得するAPIがhttpsのみでしか動作しないようです...
なので、自分はEdgeで試しました。

サーバからbase64でエンコードされた文字列を返却しているので、下記のようにすることで、
画像を表示できるみたい。
エンコードとか不要なので、便利ですね。

`pred_img.src = "data:image/png;base64," + event.data;`

# 主な参考ページ
- [カメラを使ってみよう ーWebRTC入門2016](https://html5experts.jp/mganeko/19728/)
- [http://famirror.hateblo.jp/entry/2015/12/15/180000](http://famirror.hateblo.jp/entry/2015/12/15/180000)
- [【CSS】非表示にするならどっち？display:noneとvisibility:hiddenの違い](http://blog.keisuke11.com/webdesign/display-none-visibility-hidden/)
- [ChromeではgetUserMediaがHTTPS経由でないと動かなくなっていた](https://blog.ko31.com/201606/perari-to-https/)
【wordpress】アイキャッチ画像の詳細情報を取得する

wordpressはwp_queryなどでパラメータがわかりやすい形で出てくれます！
参照：[公式codex](https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/WP_Query)

ただ、アイキャッチを取得する方法については一発で取得する方法があまりなかったので、関数化してみました。
テーマ下のfunctions.phpに以下を記述します。

```php5.functions.php

function get_featured_image_meta($post_id){
    $image_id = get_post_thumbnail_id($post_id);

    //wp_get_attachment_image_src=添付された画像の"url"、"width"、"height","真偽値"を配列として返す関数
    $image_values = wp_get_attachment_image_src($image_id,$size,false);

    //代替テキストとか説明とか
    $alt = get_post_meta($image_id, '_wp_attachment_image_alt', true);
    $description = get_post($image_id)->post_content;

    //無理やりだけど配列でないものは配列に
    $values = array_merge(array($image_id),$image_values,array($alt),array($description));

    //$valuesのキーに名前をつける
    $keys = array('id','url','width','height','bool','alt','description');
    //キーと配列をがっちゃんこ
    $image_data = array_combine($keys, $values);
    return $image_data;
}

```

```php.single.php

var_dump($image_data);
```
```php
//記事ページでのdump結果
//Applications/MAMP/htdocs/wordpress/wp-content/themes/amadeus/single.php:
array (size=6)
  'id' => string '6' (length=1)
  'url' => string 'http://localhost/wordpress/wp-content/uploads/2017/12/coffee.jpg' (length=69)
  'width' => int 2000
  'height' => int 1200
  'bool' => false//初期値
  'alt' => string '美味しいコーヒー' (length=24)
  'description' => string 'コーヒーですね' (length=21)
```
`var_dump($image_data);`すると、画像の必要情報がすべて配列で出力されるし、
$image_data['url']みたいな形でデータを取得できると
テンプレート側でなんのデータなのか理解しやすいかなと思います。

なんかもっときれいな書き方あると思うのでぜひ教えていただきたいです:worried:
ディープラーニング を使ってみた〜１日目〜

今回から、Pythonを使ってディープラーニングについて書いていこうと思います。

初日の今回は、MNISTデータについて、隠れ層が一つの三層のネットワークを作って、設定方法による性能の差について検証して見ました。

まず、モデルはkerasを使って書く事とします。
今回の検証内容は、隠れ層のユニット数と性能の差について確認してみたいと思います。
ユニット数は次の条件で検証してみようと思います。
$$\rm{Unit}_{num}=2^{i}\ \ \ (i=0,\cdot\cdot\cdot,10)$$
ソースコードは以下の通りです。
なお、条件はこんな感じです。

- optimierはSGDを使用
- バッチサイズは128、エポックは100回、validationはなし
- 損失関数はCategorical Cross Entropy

```Python3:MLP_effect_of_middle.py
import numpy as np
from keras.models import Sequential
from keras.layers import Dense, Activation
from keras.datasets import mnist
from keras.utils import np_utils

(x_train, y_train), (x_test, y_test) = mnist.load_data()
x_train = x_train.reshape(60000, 784).astype(np.float32)
x_test = x_test.reshape(10000, 784).astype(np.float32)
x_train /= 255
x_test /= 255
y_train = np_utils.to_categorical(y_train, 10)
y_test = np_utils.to_categorical(y_test, 10)


x = np.arange(11)
y = 2**x
accuracy = []

for middle_num in y:
    model = Sequential()
    model.add(Dense(middle_num, input_shape=(784,)))
    model.add(Activation("relu"))
    model.add(Dense(10))
    model.add(Activation("softmax"))
    model.compile(loss="categorical_crossentropy", optimizer="sgd", metrics=["accuracy"])
    history = model.fit(x_train, y_train, epochs=100, batch_size=128, verbose=1)
    score = model.evaluate(x_test, y_test, verbose=1)
    accuracy.append(score[1])
```

実行結果は次のようになりました。

| Unit数 | 精度[%] | 
|:-----------:|:------------:|
| 1 | 36.43 |
| 2 | 66.7 | 
| 4 | 87.16 | 
| 8 | 92.39 | 
| 16| 94.67 |
| 32 | 95.81 | 
|64|96.4|
|128|97.1|
|256|97.19|
|512|97.26|
|1024|97.39
Unit数が比較的小さい場合、Unit数の増加に伴って精度が大きく改善されている事が確認できますが、比較的大きくなった場合、精度の向上があまり確認されませんでした。
さまざまな文献で、Unit数や層数をただ闇雲に増やしても精度の改善につながる保証はないと報告されていますが、今回の実験で確認できました。実際にディープラーニングモデルを構成する場合、Unit数だけでなく層数や活性化関数をはじめとし、さまざまな設計要素があるため、ネットワークモデルの検証要素は多数あります。そのため、今後はそれらの要素についても考えてみたいと思います。
次回は、Unit数と層数の関係性について検証してみたいと思います。
テキストマッチツール

テキストマッチするツール公開しました。シンタックスチェックとかで使えると思います。

https://github.com/S-YOU/match

(一旦matchという名前を付けています。特許の侵害で訴えられたら変更を検討しますw）

以下、Githubと同じく英語ですmm

# Match
- Line Matcher for text data, like grep but more opinionated.

### Usage
- match vars.conf TEMPLATE < INPUT_FILE

### File formats
- vars.conf (example)

```ini
ANY = \S+
NUM = \d+
```
- template.conf (example, any text that will match with INPUT_FILE)

```
The quick brown fox jumps over the lazy dog NUM times
The quick brown ANY jumps over the lazy dog NUM times
```
- INPUT_FILE (any text that will match with TEMPLATE)

```
The quick brown fox jumps over the lazy dog 100 times
The quick brown fox jumps over the lazy dog X times
The quick brown cow jumps over the lazy dog 100 times
The quick brown cow jumps over the lazy dog 100
```

### Output for above example
```
% ./match examples/vars.conf examples/template.conf < examples/input.txt
[Line: 2] Unrecognized token. Expected: NUM: /^\d+/
The quick brown fox jumps over the lazy dog X times
                                            ^
[Line: 4] Incomplete line. Expected: times
The quick brown cow jumps over the lazy dog 100
                                                ^^^
Total: 5 lines, Processed 4 lines in 0.118 ms, found  2  issue(s)
```

#### Screenshot
![スクリーンショット 2018-05-12 23.03.19.png](https://qiita-image-store.s3.amazonaws.com/0/109145/83026043-76b5-13b1-7994-107611ce32c9.png)

### License
- MIT

### Note
- Release binary on OSX is dynamic, and static on linux

### Limitations
- VARS(Regex) and plain texts cannot overrlap (only one will be chosen)
  - abc(TEXT) and abc*(VARS)

- No backtracking, when there is two route a->B->c, and a->Z->y
    - if B is chosen and c does not match, program will not attempt to backtrack to c->Z->y

- Using unsafe semantics, it may segfault or harm your computer. Use at your own risk.
cssのみで立体な球体を表現

#背景
娘と公園に行って、木になっていた赤い実がキレイなのでCSSで表現してみました。

#結論
このようになりました。

<p data-height="265" data-theme-id="0" data-slug-hash="rvvEoo" data-default-tab="css,result" data-user="hashito" data-embed-version="2" data-pen-title="akai mi" class="codepen">See the Pen <a href="https://codepen.io/hashito/pen/rvvEoo/">akai mi</a> by hashito (<a href="https://codepen.io/hashito">@hashito</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


## 説明
CSSの```mi1```クラスにて実態の赤い実を表現して、疑似要素```before```で光の反射を白い丸とFilterで表現、```after```で影部分を```box-shadow```とFilterで表現しました。
Filter使いやすいですね。

ただ、ヒナまつりのイクラ丼とかをコレで表現するとクソ重そう…
こどもと一緒にIchigoJam環境セットアップ(2018年版・簡易版）

5歳の子供がプログラミングに興味を持ち出したのでIchigoJamに挑戦してみることにしました。子供向けプログラミング環境だと、Scratchや、LEGO® MINDSTORMSなどの選択肢がありますが、今回は値段の安さや手軽さでIchigoJamを選択しました。（子供はLEGO好きなのでMINDSTORMSも良いかなと思ったのですがお値段が...)

IchigoJamの場合、家にあるパーツも流用できますし、全部購入したとしても4000円程度ですので、興味を持たなかった場合で諦めがつきます 笑

ただ、Ichigojamはやりたいことに応じて周辺機器を自分で選択し購入する必要があるので、まず最初に何を買えばいいのかわかりづらく、必要なパーツを集めるために結構時間がかかりました。

そこでこのページに、とりあえずはじめるために必要な周辺機器をまとめます。ポイントは**「最低限」**、**「安く」**、**「簡単」**です。

![32440694_10156291957137403_816733716901527552_o.jpg](https://qiita-image-store.s3.amazonaws.com/0/39119/b3664f78-c3ab-0091-69b2-504931ae1968.jpeg)

### 注意事項
このページに記載してあるパーツ類は、メーカーによる組み合わせの動作保証はありませんので購入時にはご注意ください。（プレゼントなど、保証が欲しい場合には公式の[スタートセット](https://hello002.stores.jp/items/57ea2bc79821cc8df500214a)もあります、ただディスプレイは別売りなので結局バラ売りとあまり変わらず微妙...）

# IchigoJamとは
IchigoJamとは、手のひらにのせられる大きさの、プログラミング専用こどもパソコンです。ディスプレイとキーボードをつなげば、すぐにプログラミングを始められます。初心者向けプログラミング言語BASICを使っているので、高度な知識や技術を学ぶ必要はなく、気軽にプログラミングを体験できます。（[公式サイト](https://ichigojam.net/)）

# IchigoJamをはじめるために必要な最低限のパーツ一式
![32228693_10156291957202403_4223558078815010816_n.jpg](https://qiita-image-store.s3.amazonaws.com/0/39119/f3a3b165-375c-9add-424c-886566cc56f4.jpeg)
最低限必要なパーツは以下の通りです。本体以外は持っているものがあれば代用も可能です。（私はACアダプタ、micro USBケーブル ＆ USB電源アダプタは家にあったものを使っています）


### IchigoJam本体（組立て済完成品）
自分で組み立てるタイプの物もありますが、ハンダゴテなどが必要になりますので、ここでは完成品をおすすめします
https://www.amazon.co.jp/dp/B071PFKVVQ/

### キーボード
お持ちのキーボードでいいですが、子供のキーボードの扱い方が荒いので自分用のものを買ってあげても良いかもしれません。
https://www.amazon.co.jp/dp/B00SGJ0YBM/

### ディスプレイ & ACアダプタ（12V)
おすすめはこのカーナビ用ディスプレイ。理由は値段がとにかく安いこと。多少ちらつきはありますが全く問題なく利用できます
https://www.amazon.co.jp/dp/B0079RJ4AE/
https://www.amazon.co.jp/dp/B01I55KIDU/

### ビデオケーブル
100円ショップでも売ってますのでネットで買うよりそちらをおすすめします
https://www.amazon.co.jp/dp/B008WFJDV2/

### micro USBケーブル ＆ USB電源アダプタ
スマホ(Android)などの充電用に付属するもの。100円ショップでも売ってます
https://www.amazon.co.jp/dp/B00C48ZHDQ/
https://www.amazon.co.jp/dp/B00HNMCIJ4/

## まとめ
これだけあればとりあえず開発をスタートできます！
IchigoJamでのプログラミングライフをお楽しみください
Pythonで数学の勉強：微分積分学＞y=x**2+1の微分(wolframalphaとsympy)

(元ﾈﾀ)Pythonで数学の勉強：微分積分学
https://qiita.com/tibigame/items/aebbac176d9bbdaf3d15
#wolframalpha
2018-05-15
D[x^2+1]
http://www.wolframalpha.com/input/?i=D%5Bx%5E2%2B1%5D

Limit[((x+d)^2-x^2))/d, d -> 0]
http://www.wolframalpha.com/input/?i=Limit%5B((x%2Bd)%5E2-x%5E2))%2Fd,+d+-%3E+0%5D
#sympy
```python
from sympy import *
var('x d')
print(diff(x**2+1, x))
print(limit(((x+d)**2-x**2)/d, d, 0))
```
2*x
2*x
Webアプリでエラーになった時のクライアント情報収集

# 今回の目標

Webアプリ(今回はSpring)でエラーになった場合、Sentryを使ってクライアントのOSやブラウザの情報を収集する

# Sentryって何？

JavaやJavaScriptやRubyやC#といった多種多様な言語のエラー情報を収集するOSS。
操作したクライアントのブラウザやOSまで拾えるから便利。
またエラーに関してGUIベース（Slackライクな画面）で簡単に閲覧・確認できる。
さらにSlackに通知したり、Jiraに課題として登録することが可能。

# Sentryの設定手順

## Sentryの公式ページでアカウント作成

https://www.getsentry.com/signup/

## Sentryのチームとプロジェクト作成

以下の画面よりJavaを選択し、プロジェクトを作成

![sentry1.png](https://qiita-image-store.s3.amazonaws.com/0/230829/47a34b17-1902-e66c-7ac3-285557224ddf.png)

## プロジェクトのDSNを取得

プロジェクトのSettingsのClient Keysを選択して以下のDSNのURLをコピーする

![sentry1.png](https://qiita-image-store.s3.amazonaws.com/0/230829/c4455da3-4789-74d0-d515-f8d680cb8ff7.png)

# Webアプリ「Java(Spring)」の設定

##　Mavenにパッケージインストール

Sentry-logbackはログ出力の内容をSentryに送るライブラリ

```xml:pom.xml
		<dependency>
			<groupId>io.sentry</groupId>
			<artifactId>sentry-spring</artifactId>
			<version>1.7.4</version>
		</dependency>
		<dependency>
			<groupId>io.sentry</groupId>
			<artifactId>sentry-logback</artifactId>
			<version>1.2.0</version>
		</dependency>
```

##　JavaにSentryの設定を記載しBeanを追加

```java
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.ServletContextInitializer;
import org.springframework.context.annotation.Bean;
import org.springframework.web.servlet.HandlerExceptionResolver;

import io.sentry.Sentry;

@SpringBootApplication
public class SentryApplication {
	public static void main(String[] args) {
		SpringApplication.run(SentryApplication.class, args);
		Sentry.init("https://xxxxxxxxxxxxxxx@sentry.io/1202285");
	}
	@Bean
	public HandlerExceptionResolver sentryExceptionResolver() {
		return new io.sentry.spring.SentryExceptionResolver();
	}
	@Bean
	public ServletContextInitializer sentryServletContextInitializer() {
		return new io.sentry.spring.SentryServletContextInitializer();
	}
}

```
##　LogBackにSentryを追加

resource配下に以下のファイルを設置

```xml:logback.xml
<configuration>

  <appender name="Console" class="ch.qos.logback.core.ConsoleAppender">
    <encoder>
      <pattern>%d{HH:mm:ss.SSS} [%thread] %-5level %logger{36} - %msg%n</pattern>
    </encoder>
  </appender>

  <appender name="Sentry" class="io.sentry.logback.SentryAppender">
    <filter class="ch.qos.logback.classic.filter.ThresholdFilter">
      <level>WARN</level>
    </filter>
  </appender>

  <root level="DEBUG">
    <appender-ref ref="Console" />
    <appender-ref ref="Sentry"/>
  </root>

</configuration>
```

##　Controllerクラスにログ出力記載

logger.error時の内容がSentryに送られる

```java
	@RequestMapping("/")
	public String list(Model model) {
		logger.error("sentry error");
		return "Greetings from Spring Boot!";
	}
```

##　結果

Sentryから登録したメールアドレスにエラーメールが送信させる。
またSentryのプロジェクトにエラーが蓄積される

![sentry1.png](https://qiita-image-store.s3.amazonaws.com/0/230829/5a2d603d-71db-b5fa-ca7c-43adfb2b88dc.png)

#　[補足]：SentryとSlack連携

Sentryの設定画面からSlack連携することが可能。他にも多数のアプリと連携。

![Slack連携.png](https://qiita-image-store.s3.amazonaws.com/0/230829/e357ac2d-bb10-4a83-3264-6817a3c98c95.png)
TypeError: (0 , _MyFile.myFunction) is not a function     at bundle.js

### 現象
Reactで以下のようなエラーが発生。

```
TypeError: (0 , MyFile.myFunction) is not a function
    at bundle.js:36787
```

### 原因

MyFileにmyFunctionなんか無いよ、という内容。  
タイプミスがないか、**大文字小文字のミスがないか**、よーく確認しましょう。

・・・(T_T)
Visual Studio Code で Java な仕事してみてわかったこと

とりあえず丸一日Eclipseを起こさず仕事出来たのでメモ。やったぜ超快適！

# 構成
* Java Extension Pack
* Tomcat for Java

あとは外見いじる系ぐらいしか入れていない（アイコンとか）。
幸いにも今の現場は Git を使っているのだが、これについてはどうせ SourceTree とコマンドラインでやっているのでまあいいか、とほったらかすことにした。

なお、フォントには Fira Code を使っている（コレも試験的に導入したもの）。別の方の導入記事があるのでそちらを参照して欲しい。
https://qiita.com/shuntksh/items/1995e87fe5c1ac88296f
(本当にありがとう！ 使っていて地味に読みやすくて捗る……)

# やっぱり困るところはちょこちょこある
いきなりだが、**VSCodeはJava Nativeなものではない**。やっぱり困るところは少しあるのだ。……いや、ほんとに少しだったし、適当になんとかなるものだったのだが。

## UT 用ライブラリ群が解決できない！
仕事場では maven が使われている。
Gradle かなんかに乗り換えない？ とか思うが、まあ使われているものはしょうがないのである。
VSCode においてもやはり maven は標準的なものだと考えられているようで、 Java Extension Pack には maven サポートプラグイン、 Maven for Java も含まれている。コンテキストから mvn package とか叩けたり、 Effective POM の表示とかしてくれるやつだ。
しかし、どういうわけか UT 用のコードがどれもこれも全て死んでいた。もれなくコンパイルエラーだ。「そんなの解決できねーよ！なんだよそれ！」と言ってきていたのだ。

原因はよくわからないのだが、どうやら test scope を指定したライブラリをうまく読んでくれないようだった。
仕方なく**test scope の指定を外して解決した**。まあそりゃ compile scope で読めなかったらホントにどうしようもないわな。

なお、なんとか別の maven project で再現して Issue を上げてやろうと思ったのだが……ちっとも再現しなかった。きっとプロジェクト構成が悪かったんだろう。

## UT が実行されない！
Java Extension Pack には Java Test Runner が含まれる。名前の通り UT を走らせるやつで、便利だ。
しかしどういうわけか、こいつはいろいろと走らせてくれないことがある。何故か勝手にどれもこれも全て "Skipped" になってしまうのだ。

これは割と深刻で、しかも困ったことに走ったり走らなかったりする。
とりあえずわかることは、どうやら**日本語名なメソッドは高確率で死ぬらしい**ということだけだった。まあしゃーなしだ。

# でも十分使える
上記のような些細 (というには少々厄介か？) な問題はあるが、実際のところ、**現時点でも十分主力IDEとして使用に耐えうる**という感触。
というのも、要するに多少問題があったところで**クソ重い上に1日に何度も落ちた挙句環境ぶっ壊れて最悪起動すらしなくなる Eclipse よりよっぽどマシなのだ**。
(ただ、正直現場の手法や私自身の扱い方、開発マシンのスペックやプラグイン側の問題もあるので、本当に Eclipse だけが何もかも悪いのかというとちょっと違うとは思う~~だが許さん~~)

一つ注意しなければならないことがあるなら、**VSCode は極めて強力なエディタであって、はじめから全部入りのIDEではない**ということ。
例えばメモリ消費一つとっても、間違いなく本体の消費量は Eclipse よりも遥かに少ないのだが、同時に走る Java プロセスが凄まじい量のメモリを持っていく (合わせても Eclipse よりは少ない気がするが) 。**エディタが大量の "開発用機能" を持っているだけであって、何でもかんでも詰め込まれていないからこその安定性・軽量さであるということを忘れてはならない**。

……なぜこんなことを言うのかというと、**どうしても初期設定は Eclipse のほうが楽だからだ**。アレなら JDK のインストールやらなにやらを細かくやる必要はないし、なんなら設定済みのバイナリが配布されている領域だ。 VSCode はさすがにそうではない。

**もしあなたが「楽をするための苦労なら、少しぐらいは構わない」と思えるなら、間違いなく VSCode は助けになるだろう**。
そうでないなら、 Eclipse を使っていたほうがおそらくお互い幸せだ。

# ところで
この文章では、意図的に ~~(NetBeans あたりはともかく)~~IntelliJ あたりの非常に強力な IDE の存在を無視している。
なぜかって？ **お金かかるからだよ！**

……半分冗談なひとことはさておき、 IntelliJ のような IDE が使えるなら正直それで構わないとも思う。
ただ、少ししか触っていないが、あれもあれで結構重い。強力だし安定しているから別に構わないのはその通りだ。
しかし、ソフトウェア代はともかく、一人の派遣組としてはスペックを要求されると困るのだ。家でなら 32GB RAM を積んだ愛機を使えても、職場では i3 + 8GB のマシンを使わざるを得ない (正直、これだけ RAM があって不足に悩むとは数年前まで思ってもいなかった……) 。

何よりも、IntelliJ はショートカットが若干独特で、慣れなかった。VSCode の "いかにも MS 製品" なショートカットは、なんだかんだ Windows な身としては馴染み深くやりやすい。
**安いマシンで、広く使われているものに対応でき、安定していて、入りやすい環境** という意味合いでは非常に強力だと思うので、これからもしばらく使ってうまい構成を探したい。
jQuery で SVG ファイルを読み込む

次の例では、SVG を html に書いていましたが、SVG　を外部ファイルにして読み込むようにしました。
[SVG で描画する](https://qiita.com/ekzemplaro/items/4449dce6c8420b908664)

```html:index.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<script src="/js/jquery-3.2.1.min.js"></script>
<script src="read_svg.js"></script>
<title>Read SVG</title>
</head>
<body>
<h2>Read SVG</h2>
<div id="svgArea"></div>
<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />

<hr />
Version May/12/2018 PM 19:11<p />
</body>
</html>
```

```js:read_svg.js
// -------------------------------------------------------------------------
//	read_svg.js
//
//						May/12/2018
// -------------------------------------------------------------------------
jQuery  (function ()
{
	jQuery("#outarea_aa").text("*** start ***")

	jQuery("#svgArea").load("sample01.svg svg", function()
		{
		jQuery("#outarea_bb").text("*** done ***")
		})

	jQuery("#outarea_hh").text("*** end ***")
})
 
// -------------------------------------------------------------------------
```

```text:sample01.svg
<svg  width="500" height="400">
<circle cx="100" cy="60" r="50" fill="#e74c3c" stroke=black />
<ellipse cx="100" cy="170" rx="20" ry="40" fill="red" stroke="red" />
<ellipse cx="100" cy="300" rx="60" ry="20" fill="#3498db" stroke="#333333" />
<rect x="200" y="20" width="250" height="80" fill=blue stroke=blue />
<rect x="200" y="120" width="250" height="80" rx="20" ry="20" fill=yellow stroke="#333333" />
<line x1="200" y1="250" x2="350" y2="350" stroke="#333333" />
<line x1="250" y1="250" x2="400" y2="350" stroke=magenta stroke-width="10" />
<line x1="300" y1="250" x2="450" y2="350" stroke="#333333" stroke-width="5" stroke-dasharray="5 10" />
<polyline points="20,180 70,120 120,120 170,180 120,240 70,240" fill="none" stroke=green stroke-width="5" />
<polygon points="0,0 500,0 500,400 0,400" fill="none" stroke=cyan stroke-width="5" />
</svg>
```
Chromeの開発者ツールを使って特定のDOM要素だけスクリーンショットする方法

特定のDOM要素のみスクショする機能がChromeにあるってことをさっき知りました。
大変便利だったので書き留めます。

元ネタ: [Chrome DevTools: Capture the screenshot of a specific element /dev tips](https://umaar.com/dev-tips/156-element-screenshot/)

# 特定DOM要素をスクショする方法

例えばQiitaのあるコードブロックだけ撮影したいとします。

- Command + Shift + i で開発者ツールを起動して自力で選択
- または 右クリック → 検証

として開発者ツールのElementsタグを開き、DOMが選択されている状態にします。

![開発者ツールでDOMを選択する](https://qiita-image-store.s3.amazonaws.com/0/235355/195e8fe2-1cad-62a1-b14a-1ad92f4a6c74.png)

この状態で Command + Shift + p を押すと文字入力欄が開くので、
`node screenshot`と打ち込むと、打ってる途中で

> `Mobile` Capture node screenshot

という選択肢が絞りこめます。
クリックするとそのDOMのみの画像がDownloadディレクトリに保存されます。

# 結果

以下の画像が保存されました。

![取れたDOMの画像](https://qiita-image-store.s3.amazonaws.com/0/235355/87bf4898-cf95-84d3-6549-7a5eb2a26bc2.png)

とれてる！便利！！！！
UIについて何かドキュメントを書くときとかに使えそうですね。
AWS RDS  Oracle Data Pump関連dmp , logファイル一括削除

#概要
AWSのRDS利用している場合、OSにログインできないです。oracle のData Pump とDBMS_FILE_TRANSFER　使えばデータの移動できますが、不要になったDMPファイル、LOGファイルを削除したいです。あるdirectoryの下のファイルを一括削除のprocedureを作成してみました。

#Procedure

例：　DATA_PUMP_DIRの下のファイル一括削除

```
DEClARE
  directory_object  VARCHAR2(100);
BEGIN  
  directory_object:='DATA_PUMP_DIR';
  FOR vRec IN (
    SELECT FILENAME 
      FROM table(RDSADMIN.RDS_FILE_UTIL.LISTDIR(directory_object))
     WHERE TYPE='file' 
     ORDER BY mtime
  ) LOOP
		utl_file.fremove(directory_object,vRec.FILENAME);
  END LOOP;
END;

```

# 動作確認
##削除前
```
SELECT FILENAME
     , TYPE
     , FILESIZE
     , MTIME
  FROM table(RDSADMIN.RDS_FILE_UTIL.LISTDIR('DATA_PUMP_DIR')) 
 ORDER BY mtime;
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/123679/81456a5c-e529-f524-b2f4-c00ed2dcb932.png)

##実行
```
SQL> DEClARE
  2    directory_object  VARCHAR2(100);
  3  BEGIN
  4    directory_object:='DATA_PUMP_DIR';
  5    FOR vRec IN (
  6      SELECT FILENAME
  7        FROM table(RDSADMIN.RDS_FILE_UTIL.LISTDIR(directory_object))
  8       WHERE TYPE='file'
  9       ORDER BY mtime
 10    ) LOOP
 11             utl_file.fremove(directory_object,vRec.FILENAME);
 12    END LOOP;
 13  END;
 14  /

PL/SQLプロシージャが正常に完了しました。
```

##実行後

```
SELECT FILENAME
     , TYPE
     , FILESIZE
     , MTIME
  FROM table(RDSADMIN.RDS_FILE_UTIL.LISTDIR('DATA_PUMP_DIR')) 
 ORDER BY mtime;
```


![image.png](https://qiita-image-store.s3.amazonaws.com/0/123679/cd0d0ac9-6fe6-866b-e6c8-b757d0179485.png)

↑対象ファイル削除されていること確認できました。
**<font color="red">※フォルダー内全ファイル削除なので、使う場合ご注意ください。</font>**
「自作Python100本ノック」6日目（丸1日Python生活：26本〜30本目）

「自作Python100本ノック」6日目です。

今日は、起きてからずっと靴を買いに行く以外にずっとPythonの勉強をしていました。
今は『入門　Python3』という本を学校の図書館で借りて降り、そこの問題をひたすら解いています。

それと、他にも開発したいプロダクトやサービスがあり、
スケジュール的にそっちの方も急いで進めないといけないという事実を今日分かったので、かなり急ぎめでPython100本ノックを進めています。（今日だけで20問以上解きました。。すごいのかどうかわからんが）

さて、
「自作Python100本ノック」とはそもそも何ぞや？
どの程度のレベル感なのか？
どのように進めて行くのか？
など気になる方は詳しくは[こちら](https://qiita.com/ahpjop/items/373f807d68044cda1c9b#%E8%87%AA%E4%BD%9Cpython100%E6%9C%AC%E3%83%8E%E3%83%83%E3%82%AF1%E6%9C%AC5%E6%9C%AC%E7%9B%AE)に整理してありますのでまずはそちらを確認するようお願いします。
それでは始めていきます！
　　　　

##Q26: リスト問題
問題：
１. "mozzarella","cinderella","salmonella"(「モッツァレラ」「シンデレラ」「サルモネラ菌」)
  の３つの文字列を要素としてthingsというリストを作成
２. "mozzarella"の先頭文字を大文字にする
３. "cinderella"を全て大文字にする
４. "salmonella"を大文字にして、逆順にする。

```q26.py
#1
things = ["mozzarella","cinderella","salmonella"]

#２
things[0] = things[0].capitalize()
things

#３
things[1] = things[1].upper()
things

#４
things[2] = things[2].upper()
things[2] = things[2][::-1]
things[2] = things[2]
```
[出典][『入門　Python3』](https://www.amazon.co.jp/%E5%85%A5%E9%96%80-Python-3-Bill-Lubanovic/dp/4873117380)
##Q27: 辞書問題
問題：
1. e2fという英仏辞書を作り、それを表示
この辞書にはdogはchien,catはchat,walrusはmourseという情報が入っている。
2. 辞書e2fを使って、walrusという単語に対応するフランス語を表示
3. e2fからf2eという仏英辞書を作成
4. e2fから英単語だけを集合の形で表示せよ
　　　　

```q27.py
#1
e2f = {"dog":"chien","cat":"chat","walrus":"mourse"}
e2f

#2
e2f["walrus"]

#3
f2e = {}
for english, french in e2f.items(): #辞書のすべての値を取得するには、items()を使う
    f2e[french] = english
f2e

#4
set(e2f.keys())
```
[出典][『入門　Python3』](https://www.amazon.co.jp/%E5%85%A5%E9%96%80-Python-3-Bill-Lubanovic/dp/4873117380)

##Q28: 多重レベルの辞書問題
問題：
1. lifeという多重レベルの辞書を作る。 
  "animals","plants","other"という最上位キーがあり、
animalsキーは"cats","octopi","emus"というキーを持つ他の辞書を参照する。
catsキーは"Henri","Grumpy","lucy"という文字列のリストを参照する。
他のキーは空辞書を参照する。
2. lifeの最上位のキーを表示せよ
3. life["animals"]のキーを表示せよ
4. life["animals"]["cats"]の値を表示せよ
　　　　

```q28.py
#1
life = {"animals":{
            "cats":["Henri","Grumpy","lucy"],
            "dogs":{},
            "birds":{}},
        "plants":{},
        "other":{}
        }

#2
print(life.keys())

#3
print(life["animals"].keys())

#4
print(life["animals"]["cats"])
```
[参考][『入門　Python3』](https://www.amazon.co.jp/%E5%85%A5%E9%96%80-Python-3-Bill-Lubanovic/dp/4873117380)

##Q29: リスト内包表記を使って、rage(10)の偶数リストを作れ
　　　

```q29.py
even = [number for number in range(50) if number % 2 == 0]
even
```
[参考][『入門　Python3』](https://www.amazon.co.jp/%E5%85%A5%E9%96%80-Python-3-Bill-Lubanovic/dp/4873117380)

##Q30: 辞書内包表記を使って、squaresという辞書を作れ
条件： キーの値は、range(10)を使ってキーを返し、各キーの自乗とする。
　　　

```q30.py
squares = {key: key * key for key in range(50)}
squares
```
[参考][『入門　Python3』](https://www.amazon.co.jp/%E5%85%A5%E9%96%80-Python-3-Bill-Lubanovic/dp/4873117380)

##今日の感想
リスト、辞書といった基本的な部分の問題を入門書から引っ張ってきました。（一部変更）
超基本ですが、``capitalize()``とか``items()``とか忘れてた(?)ので勉強になりました。
あと、内包表記はいつも逃げてきたんですけど、今回習得できたと思うので、これからは逃げないでいけそうな時は使っていこうと思います。
何よりも、かっこいいですし。
これだけで、急に「コード書ける奴感」数段上がりますよね。

本当は、まだまだ解いた問題あるんですがストック無くなると後がなくなるので、ちょっと怖いのでここでセーブして起きます。
しばらくは、『入門　Python3』を参考に問題を解いて行くので、そんなに凝った問題というよりは入門者向けの問題になるかと思いますのでご了承ください。

それでは！

-> [７日目](https://qiita.com/ahpjop/items/e852688b0e91eee50e00)
Qiitaの使い方

# MarkDownで書く

[ここ](https://qiita.com/yosee46/items/46fda0d1459ccdbdbde3)で説明してる。

# プログラム技法やノウハウ以外は書かない

関係ない事書くと運営から限定共有化されます。[利用規約](https://qiita.com/terms)を良く読みましょう。なのでテスト投稿とか雑記とかそういうのは **個人ブログでやれや** という事なのでしょう。多分。

# よく見るコードが貼られているアレってどうやんの？

* まず貼りたいソースをクリップボードにコピー
* 半角で`（バッククォート。「＠」をShiftキー押しながら入力）を3回＋言語指定
* C#(cs), C++(cpp), css, html, xml, java, javascript, php, perl, python, ruby, sql など
* 最後`を3回

```cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class transe_delta : MonoBehaviour {
    public float mvsp = 3;

    // Use this for initialization
    void Start () {
	}
	
	// Update is called once per frame
	void Update () {
        if (Input.GetKey(KeyCode.LeftArrow))
        {
            float ddt = Time.deltaTime * mvsp;
            transform.position += (new Vector3(-ddt, 0, 0));
        }
        if (Input.GetKey(KeyCode.RightArrow))
        {
            float ddt = Time.deltaTime * mvsp;
            transform.position += (new Vector3(ddt, 0, 0));
        }
        if (Input.GetKey(KeyCode.UpArrow))
        {
            float ddt = Time.deltaTime * mvsp;
            transform.position += (new Vector3(0, 0, ddt));
        }
        if (Input.GetKey(KeyCode.DownArrow))
        {
            float ddt = Time.deltaTime * mvsp;
            transform.position += (new Vector3(0, 0, -ddt));
        }
    }
}
```
色まで勝手につけて整形してくれる。

# その他チップス

[ここ](https://qiita.com/sugaryo/items/c0ff0e396daed75fa19b)でもまとめている。
.bat（バッチファイル）でファイル名先頭に連番を付加する

##ソースコード

```numbering.bat
@echo off
@setlocal enabledelayedexpansion

set num=0

for %%i in (*) do (
  rem ソースファイル自身を対象に取らないために
  if not %%i==%~nx0 (
    ren %%i !num!_%%~nxi
    set /a num+=1
  )
)
```

##使い方

* 連番を振りたいファイル群のあるフォルダにソースファイルを置く

![how_to_use_it_1.PNG](https://qiita-image-store.s3.amazonaws.com/0/256719/bc6de573-ac60-bbbc-dd07-b5538ce576e6.png)

* ソースファイルを実行する

![how_to_use_it_2.PNG](https://qiita-image-store.s3.amazonaws.com/0/256719/f8fa1d43-5137-eb1b-dade-4ab9d9421af0.png)

##for文内での変数の遅延展開について
###`ren %%i !num!_%%~nxi`で`!`を`%`に変えるとどうなるか

![exp_1.PNG](https://qiita-image-store.s3.amazonaws.com/0/256719/adf6bdf0-e821-e2f0-0927-7f0421d63e06.png)

###時系列

1. `num`の値が0に設定される
2. `for'のループが3つ全て展開される
3. `ren %%i %num%_%%~nxi`は`ren %%i 0_%%~nxi`となる
3. 展開された`for`のループが1つ実行される
4. `num`が1増加する

`num`の値が更新される前に、全てのループの展開が終了しているのがミソで、これによってループが全て`num`の初期値0によって実行されることになってしまう。だから全ファイルの先頭が0になる。
【随時更新メモ】アホな診断サイト(Laravel最新版学習用)作るからメモとしてQiita書く

#IT自己評価診断サイト(Laravel最新版)
LaravelとPHPを学習するのが最大の目的となります。
収益や利用者数に関する考えは一旦度外視。
完成することが直近の目的である。
故に高速開発が「全」となる。
##内容
- 診断サイトである
    - Q&A方式
    - ページ遷移で選択肢に答えて行くタイプ

- 目的
    - 学習のため
    - スピードと実績

- 使用技術
    - PHP 7.2
    - Laravel 5.6
    - Bootstrap
    - Mysql
    - Heroku（AWSになるかも）

- 期限
    - DB設計（5/12）
    - フロント設計（5/12）
    - サーバー設計（5/12）
    - ホーム作成（5/13）
    - 更新
    - 更新
    - 更新
    - ローカル完成（5/28〜5/31）
    - リリース（6/1）
    -大型アップデート（6/1〜随時）
[Java8] ディレクトリを探索しファイルを取得

##はじめに
はじめまして、今年4月から新卒として働き始めたWebエンジニア1年生です。初投稿です！今後覚えた技術やスキルなどどんどんアウトプットしていきます。コードのミスや、こっちの方がベターだ、などあればコメントしていただけると幸いです。
よろしくお願いします！

##やりたいこと
階層数のわからないディレクトリから特定のファイルを含むパスを取得し出力するメソッド(searchFileメソッド)を作ります。ここでは、”C:\tmp”配下を探索し、”hoge”をファイル名に含むファイルパスを返すようにします。
##環境
Eclipse Oxygen 
Java8
##手順
1. listFileメソッドで指定したパスのディレクトリ/ファイル一覧を配列に格納

2. 取得した内容をループで取り出し、ファイルか否か評価し条件分岐
a. ファイル → 欲しいファイルかどうか評価
b. それ以外 → searchFileメソッドの再帰呼び出し

```java:main.java

import java.io.File;

public class Main {
	public static void main(String[] args) {
		//探索したいパスを指定
		searchFile("/tmp/");	
	}

	public static void searchFile(String targetPath) {
		File dir = new File(targetPath);
        //パス配下のディレクトリ/ファイルを配列に入れる
		File[] list = dir.listFiles();
		
		for(File path : list) {
			if(path.isFile()) {
				//取得したパスをバックスラッシュで分割　"\\"ではなく"\\\\"を渡す
				String[] splitedPath = path.toString().split("\\\\");
				String file = splitedPath[splitedPath.length-1];
					
				if(file.toString().contains("hoge")) {
					System.out.println(path);
				}	
			//fileがファイル以外ならメソッドの再帰呼び出し
			}else {
				searchFile(path.toString());
			}
		}
	}
}

```

結果
```
\tmp\hogehoge\hoge.txt
```

##まとめ
階層数のわからないディレクトリを全て探索するには、条件分岐で自分自身を呼び出す再帰呼び出しをすることがポイントになるかと思います。
はじめての開発【GitHub】

#はじめに

オリジナルのアプリ開発を始めました！
初めてのローカル環境での開発なのですがGitHubを利用して開発を進めていくことになりましたので、開発に沿った使い方をまとめました。
気づいたことがあれば順次追記していきます。

##使用するツール

[GitHub Desktop](https://desktop.github.com/)
GitHubのGUIツールです。
起動してサインインをしておきます（GitHubのアカウントがある前提です）。

##ローカルリポジトリを作成する

`Add a Local Repository`をクリックし、`Choose...`からリポジトリを作成するローカルのフォルダを選択し、登録します。

<img width="800" alt="github01.png" src="https://qiita-image-store.s3.amazonaws.com/0/242529/5796425c-1ac3-e3a5-bbf3-b857b11f4b70.png">

##ローカルリポジトリに保存

左下に`Summary`と`Description`を記入する欄があるので、そこに端的な内容（Summary）と詳しい内容（Description）を記入して`Commit to master`のボタンを押すとローカルリポジトリに保存されます。

この時、左のチェックボックスでアップするファイルを選べますが、今回は`first commit`なので全て選択しています。

<img width="800" alt="github02.png" src="https://qiita-image-store.s3.amazonaws.com/0/242529/7faea33d-ab17-2bdd-30f7-07b5b3a0331d.png">

##Publish Repositoryを作成してGitHubへアップする

Nameにアプリ名を入力して（GitHub上で公開される名前になります）Publish Repositoryを作成するとGitHub上にアップロードされます。

<img width="800" alt="github3.png" src="https://qiita-image-store.s3.amazonaws.com/0/242529/fbec54e3-256a-0cdd-b088-7e045bf4495f.png">

<img width="801" alt="github4.png" src="https://qiita-image-store.s3.amazonaws.com/0/242529/180dcf53-849f-c3da-27f5-a5e5a0068b2d.png">

##ブランチを作成して機能を追加する

開発は基本的に**1機能1ブランチ**で進めていきます。
今回はまだ慣れていないのでgemを追加するための`add_gem`というブランチを作成しました。

<img width="800" alt="github5.png" src="https://qiita-image-store.s3.amazonaws.com/0/242529/dda65051-2b31-6b2a-f6a9-f98f92cff34d.png">

gemファイルを変更すると左側に表示されます。

<img width="800" alt="github6.png" src="https://qiita-image-store.s3.amazonaws.com/0/242529/e710303c-0584-70e5-6162-b3a76af03e7e.png">

SummaryとDescription（必要であれば）を記入してローカルリポジトリに保存します。
その後Publish brabchを押してGitHubにアップ。

##Pull Requestの作成

ブランチを作成して機能を追加したらコードレビューをしてもらいます。
そのために**Pull Request**というものをGitHub上で作成します。

<img width="800" alt="github07.png" src="https://qiita-image-store.s3.amazonaws.com/0/242529/80e21a49-c44e-a1b1-2b3b-324ad0b73ff4.png">

<img width="800" alt="github08.png" src="https://qiita-image-store.s3.amazonaws.com/0/242529/f56bac4c-96d5-47d9-d752-ce01e1d84f6a.png">

Pull Requestを作成し、コードレビューを待ちます。
レビューで指摘事項があれば修正し、同じ手順でアップします。

##masterブランチにマージする

OKが出たらmasterブランチにマージします。
<img width="800" alt="github09.png" src="https://qiita-image-store.s3.amazonaws.com/0/242529/cb5e9ec1-b118-4b7d-a87d-abd71e8549f7.png">

<img width="800" alt="github10.png" src="https://qiita-image-store.s3.amazonaws.com/0/242529/5cf3c00c-cb8b-eaf2-2eae-f49f7dac88a5.png">

mastarブランチに変更が反映されているはずです。

<img width="801" alt="github11.png" src="https://qiita-image-store.s3.amazonaws.com/0/242529/2edbe690-192a-d43c-80e2-e7405903ec94.png">


##リモートの情報をローカルに反映させる

GitHub Desktopに戻り、ブランチをmasterに変更。
Fetch originでローカルに取り込んで、この機能の作成は終了！

<img width="800" alt="github12.png" src="https://qiita-image-store.s3.amazonaws.com/0/242529/219d6361-917e-531e-c2f0-2e58160be478.png">

この作業を繰り返しながら開発を進めていきます。

##おまけ

Pull Requestを出している途中で新たに作業をするときは、~~現在作業中のブランチから新しくブランチを作成して進めていくようにする。~~masterブランチから新たにブランチを作成して作業する。
ただし現在作業中のブランチと同じ機能内での追加になる場合は、作業ブランチから切る場合もある。
Azure FunctionsのHTTP Triggerを使ってみた

#HTTP Triggerとは
HTTP要求を受信するたびに実行され、本文またはクエリ文字列内のデータに基づいて応答する関数

#サンプルでできること
とりあえずAzure上でHTTP Trigerを作成すると、サンプルコードが書かれたものができあがる。
その中では、以下のことが可能。

- HTTPのGET or POSTメソッドを受け、nameパラメータの値を表示する

#HTTPのGETとPOSTメソッドとは？
現時点ではHTTPに明るくないため、GETメソッドとPOSTメソッドの違いがわかっていなかったので調べた。
##GETメソッド
URLの末尾に"？"をつけ、その後ろに以下の形式でパラメータを記述することで、データを渡すことが可能。

- "パラメータ名"="値"

特徴としては、以下のようになる。

- 複数のパラメータを記述する際は、"&"で区切る
- データ量の制限がある

##POSTメソッド
GETメソッドではURLにパラメータが記述されるが、POSTメソッドではURLにパラメータは記述されない。
リクエストの中身を見ると、GETメソッドではRequest-Lineにパラメータが記述されるが、POSTメソッドではBody部にパラメータが記述される。そのため、URLにはパラメータが記述されない。
パラメータの記述方法は、GETメソッドと同様に以下である。

- "パラメータ名"="値"

また、GETメソッドと違い、大量のデータを送ることが可能。

#HTTPリクエストで感じたこと
HTTPについては疎いが、SIP（Session Initiation Protocol）については知識があるため、SIPと結びつけることで容易に理解できた。
ヘッダ部の見た目は、HTTPもSIPもほぼ同じだなと感じた今日この頃。

#今後
Azure Functionsを使ってサーバーレスの何かを作る。
とりあえずTwitterの自動botでも作ろうとしている。雑に検索したところ、Logic AppにTwitterと連携できるようなものがあるっぽいので、できそうと考えている。

#参考
- [Azure Functions その1 簡単な使い方を知る](http://www.rarpa.net/?p=5877)
- [GETとPOSTの違い、使い分けと使い方を紹介 ](http://scene-live.com/page.php?page=27)
- [HTTPリクエストの中身を学んでみた。](https://www.yoheim.net/blog.php?q=20120611)
レイマーチングでthree.jsのPerspectiveCameraを使う

WebGLでレイマーチングするときでも、three.jsの`THREE.OrbitControls`などでカメラを制御できたら便利だろうなと思って調べました。

先に結果をお見せすると、こんな感じです。上が`THEEE.OrbitControls`で制御した`THREE.PerspectiveCamera`で普通にレンダリングしたもので、下が同じカメラの情報を基にレイマーチングでレンダリングしたものです。色以外は同じように表示されています。
![raymarghing-with-threejs-camera.gif](https://qiita-image-store.s3.amazonaws.com/0/61569/f409e5f2-cf00-593e-918b-31c24568a0be.gif)

以下で、実際に動いているものを確認できます。
https://aadebdeb.github.io/study-three.js/raymarching-with-threejs-camera.html

具体的に何をしているかというと、three.jsの`PerspectiveCameara`の情報をレイマーチングを行うシェーダーにuniformで渡して、その情報を基にレイを生成しています。

レイマーチングを行うシェーダー側はこのようになっています。`perspectiveCamera`関数の設計に関しては[この記事](https://qiita.com/aa_debdeb/items/301dfc54788f1219b554)も参考にしてください。

```glsl:raymarchのコード（抜粋）

uniform vec2 resolution;
uniform vec3 cameraPosition;
uniform vec3 cameraDirection;
uniform float cameraAspect;
uniform float cameraFov;

void perspectiveCamera(in vec2 uv, in vec3 position, in vec3 cameraDirection, in float fov, in float aspect, out vec3 origin, out vec3 dir) {
  vec2 st = uv * 2.0 - 1.0;
  float radian = fov * PI / 180.0;
  float h = tan(radian * 0.5);
  float w = h * aspect;
  vec3 right = normalize(cross(cameraDirection, vec3(0.0, 1.0, 0.0)));
  vec3 up = normalize(cross(right, cameraDirection));
  dir = normalize(right * w * st.x + up * h * st.y + cameraDirection);
  origin = position;
}

void main() {
  vec3 rayOrigin, rayDirection;
  perspectiveCamera(gl_FragCoord.xy / resolution, cameraPosition, cameraDirection, cameraFov, cameraAspect, rayOrigin, rayDirection);
  vec3 color = raymarch(rayOrigin, rayDirection);
  gl_FragColor = vec4(color, 1.0);
}
```

JavaScript側で`THREE.PerspectiveCamera`の情報をシェーダー側に渡す箇所はこのようになっています。このコードでは`THREE.RawShaderMaterial`のunifomsパラメータでunifomを渡すことを想定しています。
`THREE.PerspectiveCamera`の`#getWorldDirection`と`#getWorldPosition`でワールド座標系でのカメラの方向と位置をそれぞれ引数に渡した変数に入れてくれます。このメソッドをレンダリングループの`OrbitControls#update`を実行した後などで呼ぶことでレイマーチングのシェーダー側でも現在のカメラの情報を利用することができるようになります。

```js
const raymarchUniforms = {
  resolution: {value: new THREE.Vector2(window.innerWidth, window.innerHeight / 2.0)},
  cameraPosition: {value: new THREE.Vector3()},
  cameraDirection: {value: new THREE.Vector3()},
  cameraAspect: {value: camera.aspect},
  cameraFov: {value: camera.fov},
};

// called in rendering loop
camera.getWorldDirection(raymarchUniforms.cameraDirection.value);
camera.getWorldPosition(raymarchUniforms.cameraPosition.value);
```
SteamのCloud Dataを更新する方法について(セーブデータの初期化)

Steamのセーブデータを初期化したくなり、いろいろ試して成功しました。
なんで、メモしておきます。

今回は、下記に内容を記載していきます。

* 前提条件
* ローカルのセーブデータを削除する
* Cloud　Dataを更新するまでの流れ(実質初期化)
* 実行した後の注意点

困った人の為になれば、いいなと思います〜
ある程度クリアして、最初からやりたい人はみてください
(他のゲームで試していませんので、細かい違いがあると思いますがご了承ください)


## 前提条件
* windows１０
* Super Meat Boy(Steamのゲーム)

で実施します！

## ローカルのセーブデータを削除する
1.Super Meat Boyを、右クリックする(参考画像あり)

![キャプチャ1.png](https://qiita-image-store.s3.amazonaws.com/0/115405/1d9744c3-cb49-6486-865e-303c2972bd79.png)

2.プロパティをクリックする
3.ローカルファイルを押下する(参考画像あり)
![キャプチャ3.png](https://qiita-image-store.s3.amazonaws.com/0/115405/c6b03fdf-b229-6864-b128-90e55e2bab91.png)

4.UserDataを押下する(参考画像あり)
![キャプチャ4.png](https://qiita-image-store.s3.amazonaws.com/0/115405/0479194e-08b3-60be-8df8-15e874ccb171.png)

5.Saveファイルに該当するsavegame.dataとsavegame.dat.bakを削除します。
![キャプチャ5.png](https://qiita-image-store.s3.amazonaws.com/0/115405/b084a926-5909-7c70-5cfd-678d5e0fd5f9.png)

_これで削除が完了します_

## Cloud　Dataを更新するまでの流れ(実質初期化)
1. wifiを切りましょう
2. steamを押下して、「オフラインにする...」にしましょう。
<img width="769" alt="キャプチャ1_PNG.png" src="https://qiita-image-store.s3.amazonaws.com/0/115405/134130a8-5f6b-2a9d-5439-2fb9d673315c.png">
3. Super Meat Boyを開始して、saveデータを作成しました。(そのため1-1をクリアしました)
4. wifiを繋ぎましょう
5. 2と同じようにSteamを押下して、「オンラインにする...」を押下する
6. その後、Super Meat Boyを開始する

## 実行した後の注意点
* プレイ時間が初期化されない
* 実績が初期化されない

→ Saveデータ以外は、初期化されません。。。


## 最後に
楽しいSteamライフを〜
質問等ございましたら、お気軽にどうぞmm
print, 画面出力

###(1)
```python
print('OK')
print('{} {:15.7f}'.format('Pi',3.14))
```
```
OK
Pi       3.1400000
```
###(2)
```python
a=['Pi',3.14]
print('{} {:15.7f}'.format(*a))
```
```
Pi       3.1400000
```
###(3)
```python
print('{0} {1} {1:15.7f}'.format('Pi',3.14))
print('{name} {value:15.7f}'.format(name='Pi',value=3.14))
```
```
Pi 3.14       3.1400000
Pi       3.1400000
```
###(4)
```python
print('%s %15.7f' %('Pi',3.14))
```
```
Pi       3.1400000
```

###コメント

###参考文献
開発環境

###開発環境
- ノートパソコン, Core i5, GeForce MX150
- Windows 10 Pro
- python (Anaconda)
  - tensorflow-gpu, keras-gpuの動作を確認
 
###わかってきたこと (2018/5)
- Cuda9.1ではTensorflowが動かないみたいなのでCuda9.0にした
- Hyper-Vはいろいろやってみたが使っていない。vmwareのほうが楽かも
- Hyper-VではGPUが使えないらしい #Proにする必要なかった…
- nvidia-dockerはWindows Proじゃないと使えないとか(?)
- nvidia-dockerはWindowsではGPUは使えないとか(?)
GitHubリポジトリをソーシャルメディアに貼った時のカッコ良さを気にしてみた

GitHubリポジトリをソーシャルメディアに貼った時の展開のされ方が気になったので、
この記事ではシェア用のGitHub Pagesを作ることで問題の回避を試みます。

# 展開されるカードのビフォーアフター

先に Twitter, Facebook, LinkedIn において、
URL共有時に展開されるサマリーカードの改善前後の比較画像を貼っておきます。
左がリポジトリをそのまま貼った時のもの、右がシェア用のページを貼った時のものです。

![改善前後の比較](https://qiita-image-store.s3.amazonaws.com/0/235355/b9b206e6-325f-c4a8-5f44-97cecc7a8501.png)

# リポジトリをそのまま貼った時の問題点

自分のGitHubリポジトリをそのままソーシャルメディアに貼ると、次の問題が起こります。

- 自分のGitHubアカウントのアイコンが展開されて照れくさい
- LinkedInに貼るとアイコンがめっちゃアップになってスゴみを感じる
- Twitterでは`Contribute to <repository-name> development by creating an account on GitHub`という記述が追記されて、たま消したいことがある

解決法ないのかしらと探してみたところ、githubの要望受付リポジトリに立てられた[Support custom (per repository) og:image thumbnails.](https://github.com/isaacs/github/issues/612)というIssueを発見。
二年ほど前から「リポジトリごとにロゴ画像を設定したいッッッ」という要望はあったようです。
この機能あると便利ですね。

# ソーシャルメディア上での見た目を改善する方法

ひとまず今回は自力救済でなんとかします。

GitHubリポジトリのメタタグはおそらく制御できないので、
他にソフトウェアを紹介するための公式ウェブサイトを作るしかなさげです。
これはGitHub Pagesが使えるので、設定方法が分かっていれば時間をかけずに構築できます。

手順:

- GitHub Pagesで公開するためのドキュメントを作る（README.mdの使い回し可）
- リポジトリのロゴ画像を作る（高さ630 / 幅1200 参考 [Qiita: OGP画像サイズ](https://qiita.com/umeume66/items/bd3d07b1630aca3ea498)）
- jekyll-seo-tagsに読んでもらうためのコンフィグ（`_config.yml`）を書く
- GitHub Pagesで公開する

ちなみにコンフィグ（`_config.yml`）はこんな感じです。
ロゴ画像とtwitterユーザ名の設定しかしてないですね。

```yaml
theme: jekyll-theme-cayman
twitter:
  username: set0gut1
defaults:
  - scope:
      path: ""
    values:
      image:
        path: /img/logo.jpg
        height: 630
        width: 1200
```

以上の作業の後、GitHub Pagesの方のURLをソーシャルメディアに貼ると、冒頭のスクリーンショットのように良い感じに展開されました。

# 成果物

- リポジトリ https://github.com/set0gut1/good-looking-repository/
- ウェブページ https://set0gut1.github.io/good-looking-repository/

# 参考リンク

- ソーシャル展開時の見た目チェックツール（公式）
    - [Twitter card validator](https://cards-dev.twitter.com/validator/)
    - [Facebook share debugger](https://developers.facebook.com/tools/debug/)
    - LinkedInは投稿欄にURLを打ち込むとプレビューされます
- コンフィグの設定項目の詳細（SEO用メタタグに関するものだけ）
    - [About Jekyll SEO Tag](https://github.com/jekyll/jekyll-seo-tag/tree/master/docs)
- GitHub Pages自体については次の記事が参考になります
    - [Qiita: GitHubを使って3分でHPを公開する。](https://qiita.com/budougumi0617/items/221bb946d1c90d6769e9)
Dockerについてなるべくわかりやすく説明する

## 想定読者
- Dockerについてものすごくざっくり知りたい人
- **ハイパバイザ型**とか**ホスト型**とかそう言う話は調査済みもしくはあとで調べればいいと思っている人


## Dockerとは
　Dockerを使えば、OSとアプリがインストールされた環境を閉じ込めて保存しておき、いつでもその環境を立ちあげることができます。"perlをインストールしたUbuntu"とか"JavaとpythonをインストールしたCentOS"みたいな色々なパターンを簡単に作成して保存・立ち上げが可能です。

## 用語
　なるべく事前知識がなくても理解できるようにDockerの用語を冷凍チャーハンに例えて説明します。
＊厳密性に関してはご容赦ください

### ファイル系
|用語|説明|例えると|
|:----|:-----|:-----|
|Dockerイメージ|OSとアプリがインストールされた環境を閉じ込めたファイル|冷凍チャーハン|
|コンテナ|解放されたOSとアプリの環境|皿に盛ったチャーハン|
|Dockerfile|Dockerイメージ作成時に実行するコマンド等を列挙したファイル|チャーハンのレシピ|


### サービス・ツール系
|用語|説明|例えると|
|:----|:-----|:-----|
|Docker Hub|ベースとなるDockerイメージがあるサイト|多様な冷凍チャーハンがおいてある倉庫|
|Docker Compose|複数のコンテナを同時に扱うためのツール|複数段あって温め順等を設定できる高機能な電子レンジ|
</span>

### コマンド系
|コマンド|説明|例えると|
|:------------|:-----|:-----|
|docker build 〜|DockerfileをビルドしてDockerイメージを作成する|冷凍チャーハン製造機を起動し製造を開始する|
|docker run 〜|Dockerイメージをrunしてコンテナを立ち上げる。 <br><br>　オプション指定で、特定ディレクトリのマウントや起動/終了時の処理指定などが可能。|冷凍チャーハンを解凍する。<br><br>　解凍後、餃子をセットで食べるか、食前の下ごしらえ/食後の片付けをどうするかなども決められる。|
|docker pull 〜|Docker HubからDockerイメージをダウンロードする|倉庫から特定の冷凍チャーハンを持ってくる|
|[ctrl-d]|起動中のコンテナの中から外に出る&コンテナを停止する|チャーハンを食べるのをやめて冷ます|
|[ctrl-p] [ctrl-q]|コンテナを起動したままコンテナの中から外に出る|チャーハンののった皿を保温剤にのせてラップをする|
|docker exec 〜|起動中のコンテナの中に入る|ラップしてあるチャーハンのラップを外す|
|docker start 〜|停止中のコンテナを起動する|冷めたチャーハンを温める|
|docker stop 〜|起動中のコンテナを停止する|チャーハンを冷ます|
|docker restart 〜|コンテナを再起動する|チャーハンを冷まして温める|
|docker images|Dockerイメージの一覧を表示する|冷凍庫にある冷凍チャーハンの一覧をみる|
|docker rm 〜|コンテナを削除する|チャーハンを皿ごと捨てる|
|docker rmi 〜|Dockerイメージを削除する|冷凍チャーハンを捨てる|
|docker ps|起動中のコンテナ一覧を表示する|あったかいチャーハンがのった皿を全て見る|
|docker ps -a|停止中のコンテナも含めて全てのコンテナ一覧を表示する|冷めたチャーハンも含めてチャーハンがのった皿を全て見る|
|docker commit 〜|コンテナをイメージ化する|食べていたチャーハンを再冷凍する|
|docker save 〜|Dockerイメージをtar.gz形式で保存する|冷凍チャーハンを冷凍庫だけでなくクーラーボックスにもおいておく|
|docker load 〜|tar.gz形式で保存されたDockerイメージをインポートする|冷凍チャーハンをクーラーボックスから冷凍庫に入れる|

### 終わりに
　"冷凍チャーハン"ばかり打ってたら冷凍チャーハンがゲシュタルト崩壊したのでとりあえずここまでにします...。docker composeだったり他の細かいコマンドも書こうかと思ったのですが、とりあえずまた気が向いた時に追記しようかなぁ...といった感じです。ちなみに、冷凍チャーハンにした深い理由は特にないです。ansibleやvagrant等は何になるんでしょうか。どなたか記事書いてくださいませんかね。読んでいただきありがとうございました。

<br>