OmniAICreator/Qiita-1.07M huggingface dataset:
【Udemy Python3入門+応用】　8. 変数宣言

**※この記事はUdemyの
「[現役シリコンバレーエンジニアが教えるPython3入門+応用+アメリカのシリコンバレー流コードスタイル](https://www.udemy.com/course/python-beginner/ "現役シリコンバレーエンジニアが教えるPython3入門+応用+アメリカのシリコンバレー流コードスタイル")」
の講座を受講した上での、自分用の授業ノートです。
講師の[酒井潤](https://twitter.com/sakaijun "酒井潤")さんから許可をいただいた上で公開しています。**

##■変数に代入された値(オブジェクト)の型を調べる
```python:type_function
num = 1
name = 'Mike'
is_ok = True

print(num, type(num))
print(name, type(name))
print(is_ok, type(is_ok))
```
```:result
1 <class 'int'>
Mike <class 'str'>
True <class 'bool'>
```
Pythonではオブジェクトの型を宣言する必要がない。
型を調べるときにはtype関数`type()`を使うことで表示させることができる。

<br>

##■異なる型の変数を代入するとどうなるか
```python:different_type
num = 1
name = 'Mike'

num = name

print(num, type(num))
```
```:result
Mike <class 'str'>
```
int型である`num`にstr型である`name`を代入すると、
上書きされてstr型となる。

<br>

##■型を変換する
```python:change_type
name = '1'

new_num = name
print(new_num, type(new_num))

new_num = int(name)
print(new_num, type(new_num))
```
```:result
1 <class 'str'>
1 <class 'int'>
```
`new_num = name`では`name`はstr型のままであるが、
`new_num = int(name)`とすることにより`name`がint型に変換され`new_num`に代入される。

<br>

##■変数に使えないもの
#####◆先頭が数字
```python:error_1
1num = 1

print(num)
```
```:result
    1num = 1
       ^
SyntaxError: invalid syntax
```
`num1`のように、最後に数字が来る場合はOK。
#####◆すでに予約されている言葉
```python:error_2
if = 1

print(if)
```
```:result
    1num = 1
       ^
SyntaxError: invalid syntax
```
`if`という文字列はif文で用いるためにすでに予約されているため、変数として使用することはできない。
2019年7月7日からほぼ毎日投稿している話 ~300投稿目の振り返り~

# 目的

- 300投稿目のため、記事投稿のメリットや考え方などをまとめてみる

# 記事投稿のメリット

- 考えの言語化が非常に簡単にできるようになった。
- 記事としてまとめることにより第三者にみられることを意識して自分の知識を再構築できた。
- 継続していることが第三者に伝わりやすいため、継続して何かを実施できる人という証明になった。
- 自分なりの記事のまとめ方が固まってきたことにより素早く記事が書けるようになった。
- 技術的な内容を時間のある時にまとめることにより、採用フロー内の技術課題がスムーズに実施できた。
- 記事数が増えるにつれContributionの頻度が上がった。
- 環境構築などを実施する際に記事を書きながら環境構築を行うため他端末での環境構築時に同じ環境がすぐに作れるようになった。
- 技術同人誌を書く際の文章力をアップさせる練習になった。

# 記事を書く時に筆者が考えていること

- 記事を書く際は時間がかかってしまっても、その記事を元に同じトラブルを後の自分が回避できるなら書く時間に少しウエイトを置く。
- どんなにニッチな記事でも一定のニーズがある。
- 世界に一人くらいは自分と同じ問題を抱えている人がいるはずなのでとりあえず記事を投稿しておく。
- 記事に対する世間からの反応はそんなにすぐにこない。よっぽどバズる記事を書かないかぎり。
- 記事にコメントやアクションがつくと嬉しいので他の人の投稿にも積極的にコメントやアクションをつける。
- 詳しくなくて良い、とにかく今ある知識を自分の中だけではなく、みなさんの見れるところに置いておくことが大切である。
- ニッチな内容ならいつもよりちょっと詳しく記載をしてみる。

# これからどうするのか

- 2020年7月7日まで毎日投稿は実施する。
- それ以降は完全に投稿を止めるのではなく、一歩踏み込んだ投稿内容を増やして行こうとおもう。
- 自分と同じ境遇のみなさんに記事投稿をお勧めする。
- まだまだプログラミング初心者なので、今の自分にしか無い価値観で今の自分にしか書けない記事を書いて行こうとおもう。
mac/chrome + カスペルスキー環境で『証明書のエラー』

自宅の ESXi 管理コンソール(以下 Host Client)に接続できない事象が発生したので、備忘をかねて書きました。

# 環境
macbook : High Sierra 10.13.6
ESXi : 6.0 
chrome : 80.0.3987.122
カスペルスキー : 20.0.0.829a.b

# 現象
自宅で検証のため仮想マシンを hogehoge しようと思い、
Host Client に接続したところ以下の画面が表示されログインできない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502679/2549e264-ebff-5183-658e-913cda3f7b61.png)

# 原因
カスペルスキーの chrome 用拡張プラグインが原因。


# 対処方法
拡張プラグインの『ウェブ保護』機能を無効にすることで解決。
無効方法は以下の通り。

1. chromeを起動しアドレスバー横の拡張プラグインアイコンをクリック 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502679/988128ca-9405-93a9-e30a-20a8bb384799.png)

2. 『ウェブ保護』のスライドスイッチをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502679/1d8063d1-3dce-d208-c0c2-decb39367a4a.png)

3. ユーザ名とパスワードを聞かれるので、適宜入力してOKをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502679/1cc72052-ed92-d632-daf1-2296679ac331.png)

4. 『ウェブ保護』が無効になっていることを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502679/dbb7eb98-5610-eceb-8ae6-ae5cdf09b535.png)

5. 無事ログイン画面を表示することができた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502679/72749c89-b5d0-416c-d563-98bee5a41f14.png)

#補足
拡張プラグインを削除または無効化する場合は下記サイトをご参考ください。
https://support.kaspersky.co.jp/14727#block4

#最後に
正しい証明書ではエラーとなりませんが、
自宅の検証環境などにわざわざ証明書を作らないと思います。
~~そもそも拡張プラグインを使うのが間違い?~~ 

少しググっても情報が出てこなかったので、
同じことに悩まれている人の助けになれば幸いです。

以上
this()について

this()の意味が分からなかったので書き残しておきます。

# 使用例
プログラムを実行した時間を求めるコードです。

```java:qiita.java
import java.util.*;

public class Main {
    public static void main(String[] args) throws Exception {
    System.out.println(new Date());        

 ```

実行すると

```java:qiita.java

Fri Feb 28 14:22:03 UTC 2020     

 ```
new Date()で何が起こっているか確認すると


```java:Date.class

public class Date
    implements java.io.Serializable, Cloneable, Comparable<Date>
{
    private static final BaseCalendar gcal =
                                CalendarSystem.getGregorianCalendar();
    private static BaseCalendar jcal;

    private transient long fastTime;

    private transient BaseCalendar.Date cdate;

    private static final long serialVersionUID = 7523967970034938905L;

    public Date() {
        this(System.currentTimeMillis());
    }

    public Date(long date) {
        fastTime = date;
    }
}   

 ```


出ました。this()。
System.currentTimeMillis()はOSの時間を返してくれるメソッドのようです。
this()で呼ばれるのはこの下にあるコンストラクタのこいつ。

```java:Date.class

    public Date(long date) {
        fastTime = date;
    }  

 ```

オーバロードされていることがわかります。このコンストラクタは、フィールドに時間を入れているだけです。
つまり、this()は同じ引数をもつコンストラクタを呼び出すという意味でした。

# this()のまとめ
・this()はコンストラクタを呼び出すときに使われる。
・どのコンストラクタを呼ぶか引数で判断する。
・デフォルト値を設定したい場合に利用できる。
TechCommitの企画でもらったTechpitの「ToDoタスク管理アプリを作成しよう！」を終えて

#　はじめに
[TechCommit](https://www.tech-commit.jp/) のお年玉企画でTechpitの教材をいただき、教材を終えたので感想をまとめました。

# 教材について
Trello風のTodoアプリを作成します。
基本的なCRUDをRailsで体験できます。 TodoアプリはWebアプリケーションの中でもかなり簡単なものですので、初心者の方におすすめできそうです。
ページを割いて丁寧に説明されているので、Webアプリを作成したことがない方でもサクッと開発できると思います。


<img width="1273" alt="スクリーンショット 2020-02-28 20.13.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537110/bf812633-d88a-dc34-b422-e6f1b5b9f5cf.png">


# 扱った技術
- Ruby on Rails
- HTML
- CSS
- Bootstrap
- Heroku




#　感想
- 学習のはじめに、ER図についての説明があったのでデータベース設計についても解説されていました。
- ちょうどDeviseの使用の仕方を学習しようとしていたところだったので、教材でDeviseを使用できたのはタイミングがよかったです。
- 章末に演習が出されているが、飛ばしたとしても後の開発に響くことがないように構成されている点など詰まることがないように作られているなと感じました。
- しっかり読んで進めれば、特にエラーも出ることなく作成できるため、初心者がCRUDの仕組みを学ぶにはちょうど良い教材だと思います。
オーガナイズドなCSSとミニマルなJSで実装する三枚綴りページ


####テーマ
　「DHTMLを極める為にJSを極める」という考え方はもう古いという事に最近気がついた。時代のニーズのトレンドは「周到なCSSを如何に練り上げ、JSやPHPにどれだけしょうもないことをさせるか」ではないか。例えば↓↓↓こんな風に。

####やりたいこと
html1ページに3枚のページを重ねて表示する。
1枚目を中央に配置し、2枚目を右下、3枚目を左上にずらす。
2枚目をクリックすると2枚目が一番上にめくり上がり、3枚目をクリックすると3枚目が一番上にめくり上がる。
1→2→３→1→2や、1→3→2→1→3の切り替えは無限に可能。
<img width="543" alt="part1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558375/04c118c1-00a6-f5b4-4fb3-466b19eea992.png">

####手順1
htmlタグはとてもシンプル。大雑把に言えば、一つのulに5つのliを入れているだけ。
ulは可動域を示し、liはページx3と切替スイッチx2の役割を担う。

```html
<ul id=i1 class=p0>
<li id=i10>i10<li id=i11>i11<li id=i12>i12
<li id=i13><a href=javascript:ci1(2)></a>
<li id=i14><a href=javascript:ci1(1)></a>
</ul>
```

####手順2
次はcss。そのうち、まずはulについて。
fixedで固定とし、body中央に可動域ulを配置している。
この値はjsで変更させたり、media-queriesでスマホ用とPC用に別個の指定を設けられる。
後述するliの位置や大きさはulを基準としているので、ul一つの位置、大きさ指定で、全てのliがオーガナイズドに連動して変化する。

```css
ul{position:fixed;width:500px;height:80%;
left:calc(50% - 250px);top:10%}
```


####手順3
3枚のページと2つのスイッチ（5つのli）を指定するcss。
ulのclassがp0である場合、3枚目i12とスイッチi13が左上にずれ、
2枚目i11とスイッチi14が右下にずれる。
スイッチ（i13,i14）の位置は固定であり、ページの位置はulのclassNameで操作される。

```css
li,a{display:inline-block}
li{position:absolute;width:450px;height:calc(100% - 50px);
left:0;top:0;transition:left .7s,top 1.2s;opacity:.7}
#i10,#i11,#i12{overflow:auto}
#i13>a,#i14>a{width:100%;height:100%}
.p0>#i10,.p1>#i11,.p2>#i12{left:25px;top:25px;z-index:2;opacity:1}
.p0>#i11,.p1>#i12,.p2>#i10,#i14{left:50px;top:50px}
```

####おまけ
動きがわかるように、bodyと3枚のページに背景を指定。

```css
body{background:#444}
#i10{background:#eff}
#i11{background:#fef}
#i12{background:#ffe}
```

####手順4
今回、jsにさせる事は一つ。「ulのclass属性値を切り替える」だけ。
スイッチi14でci1(1)を呼び出せばp0→p1→p2→p0と切り替わり、
スイッチi13でci1(2)を呼び出せばp0→p2→p1→p0と切り替わる。

```js
var n=0;
function ci1(b){n=(n+b)%3;id(1).className='p'+n}
function id(n){return document.getElementById('i'+n)}
```
あとはjsを&lt;script>&lt;/script>、cssを&lt;style>&lt;/style>で囲うだけで完成。

<img width="539" alt="part2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558375/ce1b9f3e-ae3a-7e18-4d3a-a181cff07f60.png">
下記を.htmlファイルとして保存すれば、そのまま使える。i10〜i12にはpやulだけでなく、width,height:100%のiframeやtextareaなど、何を入れても機能する。

```html
<meta charset=utf-8>
<style>
*,iframe,textarea{margin:0;padding:0;border:none;box-sizing:border-box}
ul{position:fixed;width:500px;height:80%;left:calc(50% - 250px);top:10%}
li,a{display:inline-block}
li{position:absolute;width:450px;height:calc(100% - 50px);
left:0;top:0;transition:left .7s,top 1.2s;opacity:.5}
#i10,#i11,#i12{overflow:auto}
#i13>a,#i14>a{width:100%;height:100%}
.p0>#i10,.p1>#i11,.p2>#i12{left:25px;top:25px;z-index:2;opacity:1}
.p0>#i11,.p1>#i12,.p2>#i10,#i14{left:50px;top:50px}
body{background:#444}#i10{background:#eff}
#i11{background:#fef}#i12{background:#ffe}
</style>
<ul id=i1 class=p0>
<li id=i10>i10
<li id=i11>i11
<li id=i12>i12
<li id=i13><a href=javascript:ci1(2)></a>
<li id=i14><a href=javascript:ci1(1)></a>
</ul>
<script>
var n=0;
function ci1(b){n=(n+b)%3;id(1).className='p'+n}
function id(n){return document.getElementById('i'+n)}
</script>
```
コピペが面倒なら、とりあえず
https://4efg.com/e
（工事中）まで。

応用例は後日。
非同期通信

Ajax（エイジャックス）
ブラウザが再読み込みされること無く通信が行われる通信方法

$.ajax
jQueryで非同期通信を行うための記述
doneとfail
ajaxメソッドの後につけることで、非同期通信が成功した際/失敗した際に行う処理を書くことができる。両方とも、ajaxメソッドとセットとなるメソッド。doneは通信が成功したときに、failは通信が失敗したときに動く。

debugger;
ajaxの最後に記述するとconsoleで記述の中身が確認できる

ajaxエラー
consoleで“404”が出たらurlの記述間違い
gitコマンドよく使うやつコピペ用

#git checkout <ブランチ名>
ブランチ移動

#git checkout -b <ブランチ名>
新規ブランチ作成

#git pull
リモートにある最新のコードをローカルに反映

#git add <addしたいファイル(全てなら「.」)>
git管理の対象に追加

#git commit -m "コメント"
変更を記録する

#git push
変更内容をリモートに送る

#git merge <任意のブランチ>
作業ディレクトリにリモートの<任意のブランチ>をマージさせる。コンフリクトが発生する可能性もあるので随時解決

#git log
commitとmergeの履歴を見れる

#git reflog
HEAD やブランチ先端の動きの履歴。各個人のローカルリポジトリに存在。git reflog <ブランチ名>で任意のブランチを見れる。

#git status
ワーキング・ツリーの状態を表示する(追加されたとかコミットされたとか)

#git fetch
みんなの更新内容を、自分の開発環境に取り入れる機能。みんなの作ったコミットやブランチ・タグなどを、自分の環境に取り入れる。pullと違ってマージしない

#git reset <--hard/--soft> HEAD
--hard：ファイルの変更、add、commitを取り消す
--soft：commitを取り消す
git reflogでHEADを確認する

#git cherry-pick <コミットID>
git logでコミットIDを確認できる
任意のコミットのみを取り込む
AWS EC2でMemoryErrorとNo space left on deviceで詰まった話

# 対処
MemoryError　→　`--no-cache-dir`をつければ通る。
No space left on device　→　ファイル容量を減らせ！

以下余談

### MemoryErrorの対処
AWSのEC2でpipからtensorflowを入れようとしたところ。。。

```sh
pip install tensorflow
~
真っ赤なエラー...
~
MemoryError
```
MemoryErrorで入れることができない。。。
そんな時は`--no-cache-dir`を付けてキャッシュを無効化すればいい！ということで再度実行。

```sh
pip install tensorflow --no-cache-dir
~
やっぱりエラー...
~
ERROR: Could not install packages due to an EnvironmentError: [Errno 28] No space left on device
```

エラーが`[Errno 28] No space left on device`に変わった。こいつの原因はなんだ？

### No space left on deviceの対処

#### 容量を確認してみる
どうやら容量が足りないらしい。そこで`df -h`で確認してみる。

```
ファイルシス   サイズ  使用  残り 使用% マウント位置
devtmpfs         475M     0  475M    0% /dev
tmpfs            492M     0  492M    0% /dev/shm
tmpfs            492M  412K  492M    1% /run
tmpfs            492M     0  492M    0% /sys/fs/cgroup
/dev/xvda1       8.0G  5.0G  3.1G   63% /
tmpfs             99M     0   99M    0% /run/user/1000
```

そんなに圧迫してるんか...？他に原因がないらしいのでとりあえず使用率30%くらいまで減らしてみる。

`find . -xdev -type f | cut -d "/" -f 2 | sort | uniq -c | sort -nr`
余談：このコマンド叩けば各ファイルの容量がわかる。
とりあえずcloneしたレポジトリと、pipの中身を消して容量を無理やり減らして再実行！

したら通りました。めでたしめでたし
JavaScriptでフォントが存在するか確認する方法


指定したフォントが存在するか真偽値を返す関数。

```js
function font_exists(fontName){
    const canvas = document.createElement('canvas').getContext('2d')
    const text   = 'abcdefghijklmnopqrstuvwxyz0123456789'

    canvas.font  = `72px monospace`
    const size1  = canvas.measureText(text).width

    canvas.font  = `72px ${fontName}, monospace`
    const size2  = canvas.measureText(text).width

    return size1 !== size2
}
```
【ExcelVBA】Formulaプロパティの罠

# はじめに

ExcelVBAには、`Range`オブジェクトに`Formula`というプロパティがあります。
その名前の通り、セル（あるいは範囲）に設定されている数式を取得、もしくは数式を設定する時に使われます。

[MicrosoftのAPIリファレンス](https://docs.microsoft.com/ja-jp/office/vba/api/excel.range.formula)には以下のように書かれていましたが、ある時に`Formula`プロパティの挙動が不自然なことに気が付いたので、その挙動を確認してみることにしました。

> オブジェクトの暗黙的に交差する数式を A1 形式の表記で表すバリアント型 (Variant ) の値を取得、または設定します。

# Formulaプロパティのテスト

## テストに利用した環境

* OS
 * Windows 10 Home
* Excel
 * Microsoft Office Personal 2013

## テスト用データ

* テストに利用したデータは、以下のようにごく単純なものです。
* A2セルとA3セルには同じ値（式）が埋め込まれているように見えますが、実際に入っている値（式）は異なっています。
 * A2セル：`=3000*2`
 * A3セル：`6000`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312166/f18dc662-9758-a77d-b23d-bd04c63c29f2.png)

## テスト用プログラム

* Formulaプロパティの挙動を確認するためのテストには、以下のコードを使用しました。

```vb:Formulaプロパティのテストコード
Sub Test_CopyFormula()
    With ThisWorkbook.Worksheets("Sheet1")
        .Range("B2:B3").Formula = .Range("A2:A3").Formula
    End With
End Sub
```

## テスト結果

* コピー先のセルには、数式（`=3000*2`）だけでなく値（`6000`）までコピーされてしまいました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312166/af5f3e42-d7aa-ef70-b35d-afcabee52e57.png)

# 考察

* [APIリファレンス](https://docs.microsoft.com/ja-jp/office/vba/api/excel.range.formula)には「数式を取得または設定します」という趣旨の説明が書かれていましたが...
* その下の「注釈」欄には、「セルに定数が入力されているときは、 Formula プロパティはその定数を返します。 セルが空のときは、空の文字列を返します。 セルに数式が含まれている場合、 formula プロパティは、数式バーに表示されるのと同じ形式 (等号 (=) を含む) の文字列として数式を返します。」と書かれていました。
* つまり、Formulaプロパティの正しい挙動は、**「セルに数式が設定されていれば数式を返すが、セルに定数が設定されている時は定数を返す」**ということです。

# まとめ

* `Formula`プロパティのバグではありませんでしたが、プロパティ名から想像できない動きをしていたのには驚きました。
 * セルに数式が設定されていない時は、空文字を返すものだと思っていました...
* ちょっとした事が思わぬ不具合を生むので、手間を惜しまずに公式の情報を確認するのは大切だと実感させられました。
WSLのキーボードが英語配列になってしまふ

周期的にハマって忘れてググるので自分用のメモ。

なんかの拍子にWSLのキーボード配列がascii配列になることがある。まぁそれ自体は、そもそも日本語キーボードが希少な時代からキーボードに触っているからascii配列と認識すれば手が勝手に切り替わるのだけど、dead keysだけはどうしようもない。

で、Ubuntuの場合なら、以下でlocaleを変えればよいと。

```bash
sudo apt install language-pack-ja
sudo update-locale LANG=ja_JP.UTF-8
```

が、これでWSLのbashの配列はJISになるが、gnome-terminalとか使ってるとそっちは直ってない。

これはX11周りなので、以下のようにする。

```bash
sudo vi /etc/default/keyboard
```

で、ascii配列になってるときはこうなっている

```conf:/etc/default/keyboard
XKBMODEL="pc105"
XKBLAYOUT="us"
```

ので、こうする、と。

```conf:/etc/default/keyboard
XKBMODEL="jp106"
XKBLAYOUT="jp"
```

これで直った～。

ちなみに、Windowsの日本語フォントなんかを使うのは以下ですよね。

```sh
sudo vi /etc/fonts/local.conf
```

として、以下を書く。

```conf:/etc/fonts/local.conf
<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
  <dir>/mnt/c/Windows/Fonts</dir>
</fontconfig>
```

```sh
fc-list
```

で確認すると吉。

あちこちググった結果の集積と改変だけど、何回やっても時々ハマるのでまとめておこうかなと。
nuxtでDOMException: Failed to execute 'appendChild' on 'Node'エラー

#Failed to execute 'appendChild' on 'Node'
`nuxt` でこんな感じのエラーが出る
因みに`dev` では出ない。

```
DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Object.appendChild
```


#原因
`<template>` タグ内に `<body>` が入ってると起こる
色々なエラーにつながるので原因究明がしづらい。注意。
サーバが何もしてないのに調子が悪くなった時に確認するコマンド

何もしてないのサーバの調子が悪くなったと言いたいくらい心あたりがない時に、確認するコマンド

## ディスク容量確認
ディスク使用量がMaxかそれに近いとファイル作成などのコマンドが失敗する。
`df -h`でディスク使用量が確認できる。

```
$ df -h
Filesystem      Size   Used  Avail Capacity iused      ifree %iused  Mounted on
/dev/disk1s6   233Gi   10Gi  139Gi     7%  484247 2447617073    0%   /
/dev/disk1s1   233Gi   79Gi  139Gi    37% 1215180 2446886140    0%   /System/Volumes/Data
```

Availが100%に近いものがあったら`Mounted on`に書いてる配下のファイルでサイズが大きいものを削除した方が良い。
`Mounted on`の中の具体的にどこが容量を圧迫してるか？は、`du -sh`で確認。
`/`配下を見たい場合は`du -sh /*`で/配下のディレクトリ毎にいくら使用されているか確認できる。
権限次第では一部見れなかったりするのでsudoを使ってroot権限で実施するのがおすすめ。

```
$ du -sh ./*
 26M	./Desktop
1.5M	./Documents
1.4G	./Downloads
```

`/*`で実施したらレスが遅かったので、例では`./*`で実施してます。

## CPU使用率、負荷の確認
負荷の大きいプロセスがあれば`CPU usage`か`Load Avg`などが高くなってるはず。
確認は`top`コマンドを使用。もし負荷が高ければ`ps`コマンドでプロセスを確認してみる。負荷の高いプロセスが特定出来たら`kill`コマンドでプロセスを殺すか、systemctlコマンドなどで、対象のサービスを再起動してみる。

## 終わりに
上記2点で大体何かしらわかるので、全く検討がつかない時はとりあえず試してみると良いかもしれないです。
もしそれでもわからなけれればログを確認したり、エラーから読み取りましょう。

悪いこと何もしてないなら、上記のコマンドだけでも何かしらわかるはず。。
WordPressの画像をS3にアップロードしてみた

#背景
・Webサーバーのストレージを画像でいっぱいになるのを防ぐ
・HTMLへのアクセスと画像へのアクセスを分けることで負荷分散をする
・画像の保存場所を分けておいた方がスケールアウト（サーバーの台数を増やす）しやすい
・CloudFront（コンテンツ配信サービス）を利用することで画像配信を高速化できる

#目次
1.S3でバケット作成
2.S3を操作するためのIAM作成
3.WordPressのプラグインのインストール（WP→S3に簡単に画像をアップロードするためのプラグイン）
4.プラグインを動かすのに必要なライブラリをEC2にインストール
5.プラグインの設定（WPとS3の連携）

#1.S3でバケット作成
ここでのPoint
・パブリックアクセスをすべてブロックをOFFにしておく。（WPから画像をアップロードするため）

#2.S3を操作するためのIAM作成
1.[ユーザーを追加]→[ユーザー名]の入力、[プログラムによるアクセス]にチェックをつけておく。
2.[既存のポリシーを直接アタッチ]で「S3」と検索し、[AmazonS3FullAccess]をアタッチする。
3.内容を確認し、[ユーザーの作成]を押下。
4.IAMの認証情報CSVファイルをダウンロードしておく。（重要）

#3.WordPressのプラグインのインストール
1.WordPressの管理画面で[プラグイン]→[新規追加]と押下。
2.キーワード検索で「WP offload Media」と入力し、[WP Offload Media Lite for Amazon S3]をインストール→有効化。

#4.プラグインを動かすのに必要なライブラリをEC2にインストール
1.WordPressが入っているWebサーバーにアクセス。
2.以下コマンドで「php-xml」ライブラリをインストール。

```
$ sudo yum install -y php-xml
```
3.念のためサーバーの再起動を行っておく。

```
$ sudo systemctl restart httpd.service
```
4.念のためEC2インスタンスの再起動も行っておく。
5.WordPressの管理画面から設定→Offload Mdedia Lite を選択。
6.下記図のdifine情報をコピーしておく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588101/3351fc63-9b8a-a96a-4f95-75ca41fbb7ce.png)
7.WebServerのConsole画面へ戻り、/var/www/html へ移動する。

```
$ cd /var/www/html
```
8.下記図のように任意の箇所にさきほどコピーしておいたdefine情報を貼り付ける。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588101/7da1c00d-bce1-6281-3c46-40b393ee4eb2.png)
9.そして'access-key-id'、'secret-acces-key'にそれぞれに対してIAMユーザー作成の時にダウンロードしたCSVから情報を入力。
10.WordPressの管理画面へ戻り、設定→Offload Mdedia Lite を選択すると以下のような画面になっているので赤枠を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588101/816ea0ca-2053-596c-8508-9e6ea6c1b4b3.png)
11.使用するバケットを選び、保存しておく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588101/9c17473c-eb30-9852-efe9-ced912a5d751.png)
12.選択したバケットになっていればOK。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588101/450f25e1-ae30-0f56-1977-a717066cb6c0.png)

---ここまでで投稿ページから画像をアップロードするとS3に保存されるよ
---アップロードした画像のアドレスやS3を確認してみよう！
【MySQL】はじめてのクエリチューニング vol.5 インデックスのカラム値の長さを指定する

# インデックスのカラム値の長さを指定する

先頭の値のみ（プリフィクス）でインデックスを作成することができます

```
ALTER TABLE テーブル名 ADD INDEX インデックス名(カラム名(長さ));
```
長さには指定したい先頭の文字数をバイトで記述します

# メリット
1. インデックスファイルをはるかに小さくできるため、ディスク領域が節約される

2. オーバーヘッドが必要なINSERTやUPDATE処理が高速化される
vue cliのsass（scss）でglobを使ってインポートするためのメモ

#プロローグ

都内某所にてvue cliを使ってWEBアプリケーションを作っていると、唐突に神[^1]からの信託が下った。

**「ん～…、CSSはBEMを使って書いてほしいんだなぁ～」**[^2]

私はその時何が起こったのか理解できなかった。

vueファイルってscoped使えるし、BEMで作るとテンプレートにclassたくさん書いて見づらくなるんでやらない方が良いと思うし、なんで必要なんですかね？と問いかけても明確な答えはなかった…。

## globが欲しい

かつて、WEB制作会社（ブラック）で日夜働いていた時の私は、BEMに習いblockごとに作られたcssファイルを@importする作業に疲弊していた。
そんなときにsassでglobするgulpの設定を知った際には、初めてアッパー昇竜拳[^3]が打てた時以来の感動がありました。

### vue cliのsass（scss）でglobを使ってインポートする

そんなわけで、かなり需要が無いと思われるvue-cliでglobの方法です。

vue cliのsassはwebpackを使っていますので、`node-sass-glob-importer`をインストールします。

```bash
npm i node-sass-glob-importer
```

ポイントは、dart-sassもnode-sassの`node-sass-glob-importer`で大丈夫なところです。[^4]
dart-sass用の物をひたすら探し回ったのですが、これでOKだった…。

次に、`vue.config.js`へ`node-sass-glob-importer`の設定を書き込みます。

```javascript
const globImporter = require('node-sass-glob-importer')

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        sassOptions: {
          importer: globImporter()
        }
      }
    }
  }
}
```

なんとこれでvue-cliでもglobがつかえるようになります。

これが

```scss
@import './block/_aaa.scss';
@import './block/_bbb.scss';
@import './block/_ccc.scss';
@import './block/_ddd.scss';
```

こうなる

```scss
@import './block/**/*.scss';
```

便利！

---

- この記事の物語はフィクションです
- この記事を書いた人間はBEMが好きではないみたいなので、BEM LOVE!!!な人にはごめんなさいと言っておきます。

[^1]: 三波春夫でございます
[^2]: [空の色は紫がいいんだなぁ～](https://www.google.com/search?q=%E7%A9%BA%E3%81%AE%E8%89%B2%E3%81%AF%E7%B4%AB%E3%81%8C%E3%81%84%E3%81%84%E3%82%93%E3%81%A0%E3%81%AA%E3%81%81%EF%BD%9E&tbm=isch)
[^3]: 個人差があります。人によっては崩撃雲身双虎掌…（ry
[^4]: このnodeとは何のnodeなのだろうか？
仙台CTF 2019 For3.通信履歴 100

#問題

http://ctf.sectanlab.jp/2019/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/f21773f0-8269-d4c5-dc10-c072a2fe4c5a.png)

#解いてみた

問題のファイルを見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/5326abca-385a-60c3-5489-90aa07223d1c.png)

何でしょう？
見たことないファイルです。
ファイル名「SRUDB.dat」で検索してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/af764206-7e38-d766-7f9d-8d7cc8f9cec6.png)

SRUDB.datはネットワーク利用ログらしいです。
そんなの保存されているんですね。
デフォルトで保存されるのはすごい。
そしておなじみのNir SoftのNetworkUsageViewっていうの使えば見れる形にしてくれるらしい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/b1c211cd-cf39-6988-9bd5-b4e67813c7af.png)

すごい。
いったんExcelにエクスポートしてアプリ名「share.exe」で絞り込む。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/c2d1b2c5-77dd-c56a-9d42-39866b08eed3.png)

Bytes Receivedが一番大きいのが答え。
１日10時間株価予測AIを作り続ける　4か月目

4記事目なので過去の記事も参照ください
[3か月目](https://qiita.com/Lulu_die_Zweite/items/fae42823aaa12d7f869f)

###当初の目的を考える
このプロジェクトの元々の目的は、深層学習を使って株式市場またはもっと広義に金融市場で収益を上げることでした。その目的を達成するためには以下に示すように関係するいくつかの要素があり、収益可能性はそれらの要素を少しずつまた一つずつ向上させることによって上昇していくと考えました。今回は最初にそれらの要素をここに記し、どのような方法を取ってきたか、またそれらを改良するためにどのような計画が立てられるかについて記したいと思います。
1.	学習データの量と質
2.	学習データに対する深層学習の”層“の適応度
3.	完成したAIの運用方法

###1.	学習データの量と質
より良い結果を出すには、過学習を防ぐ必要がある。過学習を防ぐには主に２つの方法があり、一つにはデータの量を増やすこと、もう一つは正則化を導入することであるが後者は2.学習データに対する深層学習の”層”の適応度に関するものである。
データの量を増やすことに関して難しい面もある。単純に色々な株価データを学習データに追加することでその量を増やすことはできるが、米国株、日本株その他のデータをごちゃまぜにしたデータを学ばせるのは賛否両論がある上に経験上あまり結果が良くない。一方で、データの種類の範囲を一部の種類(例えば日本株)のみに絞るまたはETFのみに絞ると、今度はデータの量が足りずに困る。学習データの多様化を防ぎながらデータ量を増やす方法はあるだろうか。

試行錯誤の結果ある方法を思いついた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558316/dd7dd024-449b-5de2-b9b2-4898b53f9bee.png)

 
　　この図を見るとわかるように今までは元のデータを単に分割して学習データにしていたため、学習データの量に限界があった。一方で新しい方法を使えば、一つの元データからより多くの学習データを取り出し、適宜学習データ量を増やすことができる。尚、画像で抽象的に示した”Data”とは、具体的には例えば次のような画像データである。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558316/cc3a79c6-5ea9-4742-1353-b9266d1c43ce.png)

 この方法にはもう一ついい点がある。学習データの質を向上させるために価格変動が少なかったデータを除外することができるが、それによってデータ量が減るデメリットを緩和することができる。	
今後は、データの種類を絞り、かつ学習に不要と思われるデータを適宜排除しつつ、データ量は上記の方法で増やしデータの可能性を最大限に引き出すことを目標にします。


###2.	学習データに対する深層学習の”層“の適応度
この部分が一番難しいかつ勉強する価値があると思います。
最初はどこかから拾ってきたSequential modelを訳もわからず使って学習させていましたが、それでは限界があったので背景にある理論について少し学びました。
おそらく一番重要なのはレイヤーの基本的な順番でそれらは以下のようになっています。
 -	Convolution
 -	Relu
 -	Pooling
 -	Flatten
 -	Fully Connected(Dense)
 -	Softmax
 		
また、Convolution, ReluそしてPoolingはひとまとまりにして繰り返すことが可能です。理由がわかりませんが、以下のようにこれらを繰り返すと結果がよくなる傾向にあります。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558316/8bfa2ed9-2b77-6b85-3893-191a98fb2261.png)

　未だわからないことが多くめちゃくちゃなSequential modelを使っている可能性がありますのでご注意ください。
　今後、レイヤーに係る理論をなるべく深く理解し、より目的にあった効率的なSequential modelを自分で構築できるように頑張ります。

###3.	完成したAIの運用方法
今まで実用的な運用、バックテストをサボっていたのでここがあまり進んでいません。
AIによる民主主義的意思決定を導入し、AIの判断の信憑性と精確性をある程度確保する方法を考案しましたがどのタイミングでAIを起動するか(起動したタイミングで株価チャートを読み込み判断を下す)、またその結果どのような売買行動を起こさせるかということが収益に大きく影響すると思われます。

今回、コロナウィルスの影響で株価が暴落していたので直近で以下の範囲の価格チャートを3人のAIに見せ、多数決によってどのような結果が出るのか見てみました。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558316/72e0e934-0952-a82c-6227-c64ead608c52.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558316/e70d34bf-5714-0254-8922-ee6509f7c65f.png)

 
3分の2のAIが上がると予測し、結果は上がるでした。来週、株式市場はどうなってしまうのでしょうか。
OGP

##OGPとは
「Open Graph Protocol」の略。
FacebookやTwitterなどのSNSでwebページやブログの記事がシェアされた時、またLINEなどのメッセージ機能でページのURLを送信した時に、そのページのタイトル、URL、概要、画像を表示させる仕組みのこと

##メリット
OGPを設定することによって、ページや記事の内容を分かりやすくユーザーに伝えることができます。
例えば、SNSを見ている際、タイムラインに誰かがシェアしたページや記事が流れてくることがあります。
その時にページの概要が書かれていたり、関連する画像が一緒に表示されていたら、どんな内容のページなのかが事前に分かりますよね。
読んでみようかなという気持ちになり、ついついクリックしてしまった経験が少なからずあると思います。


##設定方法
まずhtmlタグの中にOGPを使うことを宣言する

```
<html lang="ja" prefix="og: http://ogp.me/ns#">
```

####基本的な記述

下記をheadタグの中に書き込む

```
<meta property="og:title" content="タイトル">
<meta property="og:type" content="website　または　blog　または　article">
<meta property="og:description" content="ページの簡単な説明">
<meta property="og:url" content="ページのURL">
<meta property="og:site_name" content="サイトのタイトル">
<meta property="og:image" content="サムネイル画像のURL>
```

og:title
ページのタイトルを記述します。

og:type
ページのタイプを記述します。
トップページの場合websiteまたはblog、下層ページはarticleです。

og:description
ページの概要として表示される説明文を記述します。

og:url
ページのURLを記述します。絶対パスで指定してください。

og:site_name
サイト名を記述します。

og:image
SNSでシェアされた場合に表示される画像を設定します。
ここで画像を設定しない場合は、ページ内で使用されている画像からランダムで画像が選ばれて表示されます。

※SNS用記述もあったりする
RDKitで原子と結合をハイライトした画像を作成しよう

#はじめに

掲題の通り。必要に迫られてやってみた。


#やってみよう。

前置きはさて置きやってみよう。えいやっと。

```python
from rdkit import Chem
from rdkit.Chem.Draw import rdMolDraw2D
from IPython.display import SVG
from io import BytesIO
from PIL import Image
from cairosvg import svg2png
import argparse


def generate_image(mol, highlight_atoms, highlight_bonds, atomColors, bondColors, radii, size, output, isNumber=False):

    print(highlight_atoms)
    print(highlight_bonds)
    print(atomColors)
    print(bondColors)

    view = rdMolDraw2D.MolDraw2DSVG(size[0], size[1])
    tm = rdMolDraw2D.PrepareMolForDrawing(mol)

    option = view.drawOptions()
    if isNumber:
        for atom in mol.GetAtoms():
            option.atomLabels[atom.GetIdx()] = atom.GetSymbol() + str(atom.GetIdx() + 1)

    view.DrawMolecule(tm, highlightAtoms=highlight_atoms, highlightBonds=highlight_bonds,
                      highlightAtomColors=atomColors, highlightBondColors=bondColors, highlightAtomRadii=radii)
    view.FinishDrawing()
    svg = view.GetDrawingText()
    SVG(svg.replace('svg:', ''))
    svg2png(bytestring=svg, write_to=output)
 
    return

def main():

    parser = argparse.ArgumentParser()
    parser.add_argument("-i", type=str, required=True)
    parser.add_argument("-o", type=str, required=True)
    parser.add_argument("-a", type=str, action="append")
    parser.add_argument("-b", type=str, action="append")
    args = parser.parse_args()

    atom_hilights = {}
    bond_hilights = {}
    radii = {}
    with open(args.i, "r") as f:
        string_mol = f.read()
        mol = Chem.MolFromMolBlock(string_mol)

        if args.a:
            for atom in args.a:
                print(atom)
                datas = atom.split(",")
                atom_hilights[int(datas[0])] = (int(datas[1]), int(datas[2]), int(datas[3]))
                radii[int(datas[0])] = 0.20
        if args.b:
            for bond in args.b:
                datas = bond.split(",")
                bond_hilights[int(datas[0])] = (int(datas[1]), int(datas[2]), int(datas[3]))

        generate_image(mol,list(atom_hilights.keys()), list(bond_hilights.keys()), atom_hilights, bond_hilights, radii, (400, 200), args.o, False)

if __name__ == "__main__":
    main()

```

#使い方

```
$ python HilightChemExample.py  -i ../sample/2-Acetylbenzothiophene.mol -o
usage: HilightChemExample.py [-h] -i I -o O [-a A] [-b B]
```
-i で入力MOLファイル
-o で出力画像
-a でハイライトさせたい原子を指定。molファイルの中での原子番号を0起点で指定し、その後続けてRGB色の指定をカンマ区切りで指定。
-b でハイライトさせたい結合を指定。molファイルの中での結合番号を0起点で指定し、その後続けてRGB色の指定をカンマ区切りで指定。

#例
こんな指定を指定をすると...

```
 python HilightChemExample.py  -i ../sample/2-Acetylbenzothiophene.mol -o ./hoge.png -a 0,1,0,1 -a 8,1,0,0 -b 9,0,0,1
```

こんな感じででる。原子番号は結果を分かりやすくするために表示させているが、プログラムをいじれば表示されなくすることはできる。

![hoge.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329816/9e4d6ed0-3911-0b62-350a-37e48f8edd81.png)
仙台CTF 2019 For2.違法動画 100

#問題

http://ctf.sectanlab.jp/2019/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/4fc30346-fd6e-a08c-ad5b-5367233f1ba6.png)

#解いてみた

問題のファイルを見ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/9937fab8-d524-5e4c-fad0-9e7fb3360aae.png)

$Jのみ。

NTFS Log Tracker使います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/979b0aef-f3d5-bf3c-23d4-3ab6515bc7d7.png)

無料動画.zipで絞り込むと4件ヒットして最後deleteしていることがわかります。
この日時が答えになります。
Python環境構築（Anaconda編）

AnacondaでPythonの環境を構築してみたメモ

# 環境
* MacOS Mojave

# 仮想環境
たぶんvenvで仮想環境が作られている。ターミナルを起動するとプロンプトに(base)がついていることから、デフォルトではbaseという仮想環境になっている。

### 仮想環境の一覧を確認する
``` bash
> conda info -e 
```

### 仮想環境を作成する
asobiという仮想環境名で作る。

```
conda create -n asobi python
```

https://punhundon-lifeshift.com/kasou_kankyou

# Anacondaのアンインストール
anaconda-cleanというものを実行するらしい。
https://weblabo.oscasierra.net/python-anaconda-uninstall-macos/
LVMで論理ボリュームのサイズを拡張してみた

つい先日うちの部で管理しているデータベースサーバの容量が100％になってお亡くなりになられたので、新しくディスクを追加してLVMで論理ボリュームのサイズを拡張して復旧、ということをやりました。
ですが、この作業、知らない単語や知識が多すぎて全然やっていることの意味がわかっていませんでした。そこで何をやっているかちゃんと理解しておくためにも復習したので忘れないためにもまとめておく。

#そもそもLVMって何ぞ？
>
複数のハードディスクやパーティションにまたがった記憶領域を一つのボリュームグループにまとめ、単一の論理ボリューム（LV）として扱うことのできるディスク管理機能

とのことでした。これ使うと後から論理ボリュームが拡張出来て便利とかなんとか。
LVMって調べたらさらに知らない単語が出てきたのでメモ。

・<b>物理ボリューム</b>: ハードディスクやパーティションそのものを指す
・<b>ボリュームグループ</b>: １個以上の物理ボリュームをまとめたもの
・<b>論理ボリューム</b>: ボリュームグループから切り出したボリューム

#新しいディスクにパーティションを作成
追加したディスク名は/dev/sdcです。
まず以下のコマンドでfdiskを対話モードで起動させる

```shell
$ fdisk /dev/sdc
```

すると対話モードが起動するので以下の手順でパーティションを作成

```shell
Command (m for help): n #nでパーティションの新規作成、いろいろ選択肢が出てくるがすべてデフォルトで

Command (m for help): t #tでパーティションタイプを変更。パーティションタイプ=そのパーティションを利用しているファイルシステムの種類
Partition number: 1
Hex code (type L to list codes) : 8e #8eはLinux LVMのパーティション番号

Command (m for help): p #パーティションテーブルを表示して、パーティション/dev/sdc1が作成されていることを確認

Command (m for help): w #パーティションテーブルの変更を保存して終了
```

#ディスクに物理ボリュームを作成
先ほどパーティション/dev/sdc1を作成したので、これをLVMで管理するために物理ボリュームを作成

```shell

$ pvcreate /dev/sdc1 #物理ボリューム作成

$ pvscan #/dev/sdc1が物理ボリュームとして表示されていることを確認
```

#ボリュームグループに物理ボリュームを登録
次に先ほど物理ボリュームを作成しましたが、まだどのボリュームグループにも割り当てられていません。
ということで既存のボリュームグループに登録してやりましょう。

```shell

$ vgextend centos /dev/sdc1 #ボリュームグループcentosに物理ボリューム/dev/sdc1を登録

$ pvscan #/dev/sdc1がボリュームグループcentosに属しているか確認
```

#ボリュームグループから論理ボリュームを作成
ボリュームグループの拡張した部分を全て論理ボリュームに割り当てる。

```shell

$ lvextend -l +100%FREE /dev/centos/root
```

これで終わりと思ったらファイルシステムを拡張しないと、ファイルシステムが論理ボリュームの拡張した部分を使えるようにならないらしいので拡張する。そうすると論理ボリュームのサイズが拡張しているはずなので、対象の論理ボリュームが拡張しているかlvscanで確認

```shell

$ xfs_growfs /dev/centos/root #ファイルシステムを拡張

$ lvscan #論理ボリュームの一覧を表示。
```

#最後に
この一連の流れ、最初はわかったようでわかってない微妙な理解度だったんだけど以下のサイトのこの画像見たら納得しました。
https://www.atmarkit.co.jp/ait/articles/0302/08/news002_2.html


![r5zu03.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508444/0848e61a-af07-35f6-e5f9-0c827fb9b069.gif)
Ansibleコマンドの使用方法

Ansible で設定を実行するコマンドの基本的な使い方を紹介します。
詳細はAnsibleのドキュメントを参考にしてください。
なお、実行にはあらかじめ環境設定をしておく必要があります。

#1．Ansible
　　引数に従い、単発でモジュールを実行します。
　
　　$ ansible (対象機器名)  -u (ユーザー名) -k  -m （実行モジュール) -a (モジュールの引数)
　
　　　引数の説明：
　　　　（対象機器名）　設定を行う機器名。インベントリファイルに定義しておく必要があります。
　　　　　　　　　　　　1台のホスト、ホストグループという複数のホストをまとめたグループを指定します。
　　　　　　　　　　　　また、ALL とするとインベントリファイルに記述した全ての設定を行います。

　　　　　-u　　　　　　対象機器に接続するユーザー名。省略すると現在のユーザー名で接続します。
　　　　　-k　　　　　　対象機器にssh接続するときにパスワード入力する。
　　　　　-m　　　　　　モジュール名
　　　　　-a　　　　　　モジュールの引数。(引数名)=(値) で記述します。”で囲むこともできます。



　　例）centos2 に対して、モジュールPINGを使用し、pingを実行します。

　  　　$ ansible centos2 -a data=pong -m ping -k


　※上記以外にも様々な引数があります。詳細は以下を見てください。
　参考URL：https://docs.ansible.com/ansible/latest/cli/ansible.html


#2．Ansible-Playbook
　引数に指定したplaybookに書かれた処理を上から順に連続で実行します。
　複数のplaybookを指定することで、連続で実行することもできます。

　$　ansible-playbook -k (playbookファイル名)　...  

　　　　　-k　　　　　　　　　　　対象機器にssh接続するときにパスワード入力する。
　　　　　(playbookファイル名)　 実行内容を記述したplaybookファイル名。絶対パス指定も可能。　  



　例)　playbook sample.yml を実行

　　　$ ansible-playbook -k sample.yml


　※その他の引数(一部)
　　　ansible-playbookには様々な引数がありますが、おそらくよく使うことになるplaybookの書式チェックや実行内容確認の引数を紹介します。

　　　　　--syntax-check　　　　playbookの書式のエラーチェック
　　　　　-C　　　　　　　　　　 dry-run。対象機器に接続するが、変更などは行わない。(何をやろうとするのか確認する）

　　使用例）
　　　　ansible-playbook の引数はplaybookファイル名より前にも後ろにも記述できます。
　　　　確認系の引数は最後に書くと、後末尾を消すだけで実際の処理ができるので便利です。

　　　　$ ansible-playbook sample.yml  --syntax-check
　　　　$ ansible-playbook -k sample.yml  -C
 


　※上記以外にも様々な引数があります。詳細は以下を見てください。
　参考URL：https://docs.ansible.com/ansible/latest/cli/ansible-playbook.html
コンバージョン

##コンバージョンとは
マーケティングの分野では、Webサイトにおける最終的な成果
YAMAPで言えば活動日記をあげてもらう
YAMAPSTOREで言えば商品を購入してもらえる
保険で言えば保険に登録をしてもらう

##コンバージョンを最大化するための手法(例)

####ロジックツリー

最終目的に寄与するさまざまな要素を細分化するものです。これにより、課題となるポイントや改善による効果を明確にし、マーケティング課題の解決に導くことができる.

要素をより細かく分解し、明確化することで、効率改善における優先順位の把握とマーケティング予算の最適な配分が可能になります。

![Image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568070/21e7e964-cbb1-4066-d0c8-9572f9109476.png)
SereneLinuxでフォントサイズを変更する

今回はSereneLinuxでのフォントサイズの変更方法についてです。
また、こちらの方法はXfce4のLinuxディストリビューションであれば適応可能です。

まず、whisker menuを開いて設定マネージャをクリックしてください。
![スクリーンショット_2020-02-28_21-54-21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350994/f024b343-4b3f-4526-5f70-54abc813ebf9.png)

次に、Xfce4の設定マネージャが表示されたら、「外観」を選択してください。
![スクリーンショット_2020-02-28_21-55-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350994/27e44f17-79b4-3177-f5e7-44852f959982.png)

フォントの項に移動したら...
![スクリーンショット_2020-02-28_21-55-21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350994/c500c086-cfab-1bc8-9f74-df0f9c84b65a.png)

下へスクロールさせてください。
![スクリーンショット_2020-02-28_21-55-30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350994/10145407-fd11-7400-3b81-41476d578424.png)

カスタムDPI設定にチェックを入れ、お好みのDPI値を設定してください。
![スクリーンショット_2020-02-28_21-55-42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350994/c576f9e5-51ac-b51d-7e9a-a2d5b28c0ca4.png)
これでフォントサイズが大きくなりました！
右上の×をクリックして終了させましょう。

フォントサイズを調整して快適なSereneLinuxライフを！
仙台CTF 2019 For1.パスワード変更日時 100

#問題

http://ctf.sectanlab.jp/2019/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/eed56e1c-7a3b-bf18-c111-36af0cf73311.png)

#解いてみた

問題文長い！
小さい画面で問題を解いているので収まらない。
要約するとdevelopのパスワードが変更された日時を答えなさいという問題。

問題のファイルを開いてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/83272d2e-a49d-c186-e3f9-d79109f846e8.png)

SAMファイルだけが入っています。

WRR（Windows Registry Recovery）使います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/eee2e561-9e07-4832-85b9-449a1c4a0a34.png)

SAMの項目を見るとユーザにdevelopがいてLast password setの日時も書かれています。
このまま回答すると不正解になります。
これは協定世界時なんですね。
日本時間にするためにプラス9時間が必要です。
Ruby の Enumerable を再実装するときに正解が見たくなったら TruffleRuby の実装を見るとわかりやすい

# `Enumerable` の再実装やってると正解が見たくなる

[仲間で集まって Ruby の `Enumerable` のメソッドを再実装する遊び](https://qiita.com/akinov/items/42292674587dd532d6ae)をよくやっているんだけど、書いたら答え合わせがしたくなる。そういうときは [CRuby の実装](https://github.com/ruby/ruby) を見るのが一番なんだけど、Cが読めないとかなり辛い。

# 例: `Enumerable#collect` の CRuby の実装(?)

```c:enum.c
static VALUE
enum_collect(VALUE obj)
{
    VALUE ary;
    int min_argc, max_argc;

    RETURN_SIZED_ENUMERATOR(obj, 0, 0, enum_size);

    ary = rb_ary_new();
    min_argc = rb_block_min_max_arity(&max_argc);
    rb_lambda_call(obj, id_each, 0, 0, collect_i, min_argc, max_argc, ary);

    return ary;
}
```
[ruby/ruby enum.c より](https://github.com/ruby/ruby/blob/72c02aa4b79731c7f25c9267f74b347f1946c704/enum.c#L577-L590)

なにか別の関数(`collect_i`?)を呼び出してるっぽいことくらいしかわからない…

# TruffleRuby はわりと Ruby でかかれてる

いろいろ有名な処理系を見たら、 Oracle の [TruflleRuby](https://github.com/oracle/truffleruby) の `Enumerable` 実装が Ruby で書かれているのでとっつきやすかった。

```ruby:src/main/ruby/truffleruby/core/enumerable.rb
  def collect
    if block_given?
      ary = []
      each do |*o|
        ary << yield(*o)
      end
      ary
    else
      to_enum(:collect) { enumerator_size }
    end
  end
```
[oracle/truffleruby src/main/ruby/truffleruby/core/enumerable.rb より](https://github.com/oracle/truffleruby/blob/1de99bf4631adcd326857855beadb921a5d2475e/src/main/ruby/truffleruby/core/enumerable.rb#L100-L110)

読める！読めるぞ！
仙台CTF 2019 NL3.SQLインジェクション 100

#問題

http://ctf.sectanlab.jp/2019/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/06fb1761-72c3-696e-0370-abb59a25add8.png)

#解いてみた

問題のファイルを見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/5deca7db-1616-9f56-1897-efc14ea0bab4.png)

今回もWebのログとDBのログです。
Webのログを見てみたところさっきのログと一緒っぽいです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/cde81e4b-1820-1157-b702-ee344f6b86ef.png)

攻撃のGETの少し前にPOSTがあってそのパラメータを見るとaction=registerと書かれていて、ユーザ登録した感じがありますよね。

11/Nov/2019:23:01:33のところをDBログで見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/54bf4326-9f1d-ac9b-d93c-3611c46d8c1d.png)

ユーザ名はemailということのようなのでマスクしておきます。
パスワードのところにはものすごく強固なパスワードだなと思ったりもしましたが、これはハッシュ値ですよね？
基本的にハッシュ値は戻せないはずですが、ある程度の一覧はあったりします。
ハッシュ値でそのままGoogle検索します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/3da271c8-06de-cec4-3646-f010358fe7b8.png)

ありました。
これが答えです。

と思ったら違った。

問題文を再度確認する。

```
［フラグ］

[account name]-[password]
例： 仙台太郎-qwerty
```

アカウントネームってなに？
メールアドレスではないのか。

例が全角の名前になってるからメールではなくて普通にユーザの名前ということか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/db489098-833b-73bc-0bd7-6c15d9334a19.png)

このfullnameの項目がアカウントネームっぽい。

これを入力してみると正解でした。
org-modeのexport settingを取得する

org-modeの `#+TITLE: xxx` を取得するために関数を書いた。
愚直に正規表現で取ることにした。

```emacs-lisp
(defun ox-qmdx--get-export-setting (header-name)
  "Get export setting value.

The export settings are those described in `#+FOO: BAR`.
This function moves point internally.
However, the position is restored as soon as the function completes.
"
  (save-excursion
    (goto-char 0)
    (re-search-forward (format "^[ \t]*#\\+%s: \\(.+\\)" header-name) nil t) 
    (match-string-no-properties 1)))
```

カレントバッファ

```org
#+TITLE: test

foo
```

この時に以下を実行する。

```emacs-lisp
(ox-qmdx--get-export-setting "title")
```

実行すると `"test"` が返される。
GoのechoでRESTAPIを作る時にCORSで怒られた時の対処法

フロントエンドとバックエンドでドメインが違う場合、フロントエンドからバックエンドにfetchするとCORSで怒られる。
その際は以下のようにCORSWithConfigミドルウェアを設定してやればいい。

```server.go
e := echo.New()
e.Use(middleware.CORSWithConfig(middleware.CORSConfig{
    AllowOrigins: []string{"http:///*リクエスト送る側のurl*/"},
    AllowHeaders:     []string{"authorization", "Content-Type", "Access-Control- 
    Allow-Origin"},
    AllowCredentials: true,
    AllowMethods: []string{http.MethodGet, http.MethodPost},
}))

e.POST("/login", login)
e.GET("/logout", logout)

e.Logger.Fatal(e.Start(":/*ポート番号*/"))

func login(c echo.Context) error {
    /*handle login*/
}

func  logout(c echo.Context) error {
    /*handle logout*/
}
```
コードヘルス - プリミティブオブセッション

*この文書は[Code Healt: Obsessed With Primitives?](https://testing.googleblog.com/2017/11/obsessed-with-primitives.html)の翻訳です。*

プログラミング言語は整数型、文字列型、マップ型といった、多くのコンテキストで便利な基本型を提供している。例えば、文字列型は人の名前からウェブページのURLまであらゆるものを保持するのに使える。しかしながら、**コードが特別な抽象化を行わず、基本型に過度に依存すると、理解や維持が難しいものになり得る。**

*プリミティブオブセッション* **とは高度な概念を表すのに基本（プリミティブ）型を使いすぎることをいう。** 例えば、このコードは形を表すのに基本型を用いている:

リファクタリング前

```c++
vector<pair<int, int>> polygon = ...
pair<pair<int, int>, pair<int, int>> bounding_box = GetBoundingBox(polygon);
int area = (bounding_box.second.first  - bounding_box.first.first) *
           (bounding_box.second.second - bounding_box.first.second);
```

`pair` は適切なレベルの抽象化ではない。なぜなら、あるときは*X*と*Y*を表すのに用いられ、またあるときは*左下*（*左上*だっけ？）と*右上*（え、*右下*？）を表すのに用いられるが、フィールド名は一般的な`first`と`second`である。さらに悪いことに、バウンディングボックスを計算したり、面積を求めたりといった計算のような**領域固有のコードを基本型はカプセル化することはない。**

**基本型をより高レベルな抽象型で置き換えることはより明快でよくカプセル化されたコードを生む:**

リファクタリング後

```c++
Polygon polygon = ...
int area = polygon.GetBoundingBox().GetArea();
```

**プリミティブオブセッションの例をいくつか挙げる:**

- 一連のmap, list, vectorなどで、値を一つのより高レベルな抽象化によって結合することで、一つのコレクションに容易にまとめることができる。

リファクタリング前

```c++
map<UserId, string> id_to_name;
map<UserId, int> id_to_age;
```

リファクタリング後

```c++
map<UserId, Person> id_to_person;
```

- マジックインデックス/キーによるvectorやmap。例えば、インデックス/キーが0, 1, 2それぞれに対して*name*, *address*, *phone #*が対応するようなときは、代わりに、それらの値をより高レベルな抽象化に束ねよう。

リファクタリング前

```c++
person_data[kName] = "Foo";
```

リファクタリング後

```c++
person.SetName("Foo");
```

- 複雜だったり構造を持つテキスト（例えば、日付）を保持するstring。代わりに、高レベルな抽象化（`Date`クラスなど）を用いることで、自己言及なアクセッサ（`GetMonth`など）が提供され、正しさが保証される。

リファクタリング前

```c++
string date = "01-02-03";
```

リファクタリング後

```c++
Date date(Month::Feb, Day(1), Year(2003));
```

- 時間（秒など）を保持する整数や浮動小数点数。代わりに、構造化されたtimestampやduration型を使おう。

リファクタリング前

```c++
int timeout_secs = 5;
```

リファクタリング後

```c++
Duration timeout = Seconds(5);
```

**任意の型（単なるintから洗練された赤黒木まで）はその役割に対してプリミティブとなりすぎる。** 基本型が使われすぎているコードを見たら、リファクタリングするか、作者に丁寧に、より格調高くクラス[^1]を使うよう進言することで、高レベルな抽象型を用いたより明快でカプセル化されたコードになるだろう！


[^1]: classy
XAMPPのMySQLが起動しなかった

# 状況
XAMPPを入れた後の初回起動時に、MySQLをStartさせることができなかった

# 解決方法
1. xamppの右上にあるNetstatボタンを押して、MySQLのPort番号を探す。自分の場合はデフォルトの3306。
2. 3306のプロセスを`taskkill /pid PID番号 /F`でキルする。

これでできた
画像をスクレイピングして学習させたい

特定分野の画像をアップサンプリングするのに使えるんじゃないかなーと思って集めました。
週末にやってみたい！

# これを試したい
コード必要なし！画像を高解像度化するPythonコード（RAISR）
https://blog.capilano-fw.com/?p=282

# 画像を集めるならこれを参考にすればよさそう
PythonでGoogle画像検索をして画像をフォルダに保存する
https://qiita.com/Yuki-Takatsu/items/3f30727d5b21a83ea4ed

PythonでGoogleの画像を大量スクレープする
https://qiita.com/Jixjia/items/881c03c50c6f07b0b6ab

PythonでBing Image Search API v7を使って画像収集する
https://qiita.com/m-shimao/items/74ee036fff8fac01566e

Bingの画像検索APIを使って画像を大量に収集する
https://qiita.com/ysdyt/items/49e99416079546b65dfc

PythonでGoogleとBingから画像を取得するWEBスクレイピングツールを作った
https://nekodeki.com/python%E3%81%A7%E7%94%BB%E5%83%8F%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0%E3%83%84%E3%83%BC%E3%83%AB/
圧縮・解凍コマンド



| 圧縮形式  | 圧縮コマンド                             | 解凍コマンド|
|---       |---                                     |--- |
| tar.gz   | tar zcvf ${archive_name}.tar.gz  data/ | tar zxvf ${archive_name}.tar.gz  |
| tar.bz2  | tar jcvf ${archive_name}.tar.bz2 data/ | tar jxvf ${archive_name}.tar.bz2 |
| tar.xz   | tar Jcvf ${archive_name}.tar.xz  data/ | tar Jxvf ${archive_name}.tar.xz  |
| zip      | zip -r  ${archive_name}.zip data/      | unzip ${archive_name}.zip    |
| zip(pass)| zip -re ${archive_name}.zip data/      | unzip ${archive_name}.zip    |

|tarオプション|説明|
|--           |-- |
|-z, --gzip   |アーカイブを gzip で圧縮|
|-j, --bzip2  |アーカイブを bzip2 で圧縮|
|-J, --xz     |アーカイブを xz で圧縮|
|-c, --create |新しいアーカイブを作成|
|-x, --extract|アーカイブからファイルを抽出|
|-v, --verbose|圧縮/解凍処理したファイルのリストを出力|
|-f, --file   |圧縮先/解凍元アーカイブを指定|

494Mのデータを圧縮

| 圧縮形式  | 圧縮後 | 圧縮時間  | 解凍時間 　 |
|---       |---    |---       |--- |
| tar.gz   | 164M | 1m10.696s | 0m10.876s |
| tar.bz2  | 143M | 1m31.335s | 0m26.851s |
| tar.xz   |  96M | 4m22.670s | 0m12.855s |
| zip      | 302M | 1m22.144s | 0m15.039s |
| zip(pass)| 302M | 1m33.685s | 0m23.371s |

履歴

```
#--------------------------------------------
# テストデータ
#--------------------------------------------
yum -y --releasever=7 --installroot=/var/lib/machines/centos7 install systemd passwd yum
$ du -sh /var/lib/machines/centos7
494M	/var/lib/machines/centos7

#--------------------------------------------
# 圧縮
#--------------------------------------------
cd /var/lib/machines
time tar zcvf centos7.tar.gz centos7/
time tar jcvf centos7.tar.bz2 centos7/
time tar Jcvf centos7.tar.xz centos7/
time zip -r centos7.zip centos7
time zip -r centos7p.zip centos7

#--------------------------------------------
# 解凍
#--------------------------------------------
mkdir -p /tmp/test/{gz,bz2,xz,zip,zipp}
time tar zxvf centos7.tar.gz -C /tmp/test/gz/
time tar jxvf centos7.tar.bz2 -C /tmp/test/bz2/
time tar Jxvf centos7.tar.xz -C /tmp/test/xz/
time unzip centos7.zip -d /tmp/test/zip/
time unzip centos7p.zip -d /tmp/test/zipp/

```
PyOCRでエラーが出た話

tesseractって「テッサラクト」ですよね？[ここ](https://www.dictionary.com/browse/tesseract)読んで理解してください。
Jupyterはジュピターだし、Tensorflowはテンサーフロウです。
元英語教師としてここは譲れない。

# エラーの内容
-psmっていう引数がダメってお叱りを受けました。
>  File "C:\Users\hogehoge\Anaconda3\envs\pyocr\lib\site-packages\pyocr\tesseract.py", line 362, in image_to_string 
> 
>  raise TesseractError(status, errors)
> 
> pyocr.error.TesseractError: (1, b"Error, unknown command line argument '-psm'\r\n")

# 直したこと
-psmっていう引数がダメだけど、--psmならOKらしい。ほえー。

C:\Users\hoge\Anaconda3\envs\pyocr\Lib\site-packages\pyocr\lib\site-packages\pyocr\

```Python:tesseract.py 
command = [TESSERACT_CMD, "input.bmp", 'stdout', "--psm", "0"]
```
 C:\Users\hoge\Anaconda3\envs\pyocr\Lib\site-packages\pyocr\

```Python:builders.py
tess_flags = ["--psm", str(tesseract_layout)]
```
[ここのページ](https://webcache.googleusercontent.com/search?q=cache:hIKucCh4UZoJ:https://madomadox.hatenablog.com/entry/2018/06/24/165317+&cd=1&hl=ja&ct=clnk&gl=jp&client=firefox-b-e)を参考にしたのですが、Googleのキャッシュなんですよね。

ブログ全体を見てみるとハック系の記事ばかりなので、カテゴリを統一したいという意図でしょうかね？


（いやまぁこの問題は解決したっぽいんですけど、本来のOCRを用いて解決したい問題は解決していないのがなんとも。。。）
SEO対策のためのディレクトリ構造

##ディレクトリ構造
まずディレクトリ構造とはなんなのか
Webサイトを公開するためには、サーバーにファイルをアップロードする必要があります。なお、ファイルはサイトの階層に合ったフォルダごとにアップロードしていく必要があります。この「サイトの階層の構造」こそが“ディレクトリ構造”です。

YAMAPで例えると
１　ホーム
２　山の情報
３　都道府県ごとの山情報
４　山の詳細画面

##SEO対策を考えたディレクトリ構造のメリット

・「サイトテーマ性が向上する」
・「クローラビリティが向上する」
・「サイトを管理しやすくなる」

####サイトテーマ性が向上する
ディレクトリ構造を整え、正しく内部リンクを設置することで、カテゴリごとのテーマ性を高めることができます。カテゴリごとのテーマ性が高まると、ミドルキーワードでの順位上昇や、TOPページで順位を上げたいビッグキーワードの評価向上など、多くのメリットがあります。
####クローラビリティが向上する
ディレクトリ構造が最適化されておらず、カテゴリページなどの重要なページが深い階層に設置されている場合、クローラーが重要なページにたどりつけない場合があります。クローラーがページにたどりつけないと、重要なページが評価されづらい可能性が生まれてしまいます。
####サイトを管理しやすくなる
ディレクトリ構造が整っているということは、サーバーのフォルダ構造が整っているということを意味します。フォルダ構造が整っていると、「◯◯カテゴリのページを更新したいけど、フォルダがぐちゃぐちゃでどのファイルを更新すればいいのか分からない」といったトラブルを回避することができます。

##クリック階層
Googleは、「ディレクトリ構造の深さと検索順位（評価）は関係性がない」と発表しています。それ以上にSEOとして重要なのが、何回のクリックで到着するのかという「クリック階層」といわれています。

Webサイトにおいて、理想は3クリック以内でページに到着できることといわれています。ディレクトリ構造とクリック階層を考慮した上で、正しく設計することでSEO評価の向上につながります。
学習にも役立つJavascriptのチートシート10選

#はじめに
最近コードを書く時間が少ないためか、「よく使うのにどう書くんだっけなあ…これでいいんだっけ？」と思うことがよくあります。
（「参照できれば記憶する必要はない」と思っていることも影響していそうですが、それにしてもねえ。。。）
そこで、よく使う表現をすぐ参照できるチートシートとして良さそうなものをまとめました。

今回は多くの人が触る機会の多いであろうJS（Javascript）について整理しました。
何かの役に立てば幸いです。



#1. htmlcheatsheet.com/
https://htmlcheatsheet.com/js/

基本機能が一望できるので、端からトレースしていくだけでも、初心者レベルであれば勉強になります。
コーディングの際に、記述方法をど忘れした時などにたまに助かるサイトです。
忘れっぽい自分には特には良い！

#2. websitesetup.org
https://websitesetup.org/javascript-cheat-sheet/

PDFをmarkdown記法ウェブで再現したサイトです。

初心者が勉強する時の内容としては、非常にまとめまっているのでとても便利です。

ただ、それぞれの関数の細かな意味がこれ単独だと分かりにくいのと、網羅性が低く、内容に偏りがあるので、ビギナー向けのチートシートですね。

#3. javascript.pythoncheatsheet.org
https://javascript.pythoncheatsheet.org/

こちらも、初心者学習用のチートシートです。

熟練者でも基本をど忘れした時にチラッと見ると思い出せて便利かもしれませんね。
個人的には、リンクされているGithubでのreadmeが同じ事を書いているんですが、見やすいと思います。

#4. overapi.com
http://overapi.com/javascript

ザ・チートシートという感じのインターフェイスですが、中身はMDNのリンク集です。

カテゴリ分けの分類や、MDNのリンク先にスニペットが掲載されているので、閲覧していると知らないことも結構書いてあって中級者な方でも勉強になりそうです。

#5. ilovecoding.org
https://ilovecoding.org/blog/js-cheatsheet

PDFがダウンロードできるこのサイトですが、内容は初心者向けリファレンス本の感じです。

図解で紹介されていて非常に見やすい内容なので、学習には非常に有効かと思います。

#6. codementor.io
https://www.codementor.io/johnnyb/javascript-cheatsheet-fb54lz08k

そもそもが、学習サイトの中の要素なので、初心者勉強用の教材的な内容になっています。
コーディングに慣れていくための写経サイトと考えてもいいかもですね。

#7. courses.cs.washington.edu
https://courses.cs.washington.edu/courses/cse154/17au/cheat-sheets/javascript-cheat-sheet-v1.pdf

.eduというドメインから推測できるのですが、こちらも学習サイトの教材のようです。
pdfなのですが、内容が少なすぎて次のページもなく、サイトのリンク集に辿り付くことができません・・・印刷して近くの皆の衆に配るか。

#8. debuggex.com
https://www.debuggex.com/cheatsheet/regex/javascript

正規表現に特化したチートシートです。
たまに必要になりますよね、この手の情報。自分もつい最近記事にしたばかりですが。

#9. cheatography.com
https://www.cheatography.com/anas-95/cheat-sheets/javascript-object-methods/

Array,Math,Stiring,Number関数のチートシートです。
あると便利系ですね。素敵です。

#10. one-pic
https://github.com/coodict/javascript-in-one-pic

マインドマップ風の1枚画像のチートシートです。

見づらいのが少々のが難点ですが、よくまとまっていて印刷してデスクにおいとくのも良いかもしれないです！

#おわりに

今回はJSでしたが、CSSやPHPなど、WEBサイト制作で触る可能性の高いファイルにおける記法、作法、よく使う表現などに関してもチートシートを探していきたいと思います。
Ruby の Enumerator に末尾のアイテムを判断する with_last を追加してみた

# したいこと

Rails で HTML を生成するとき、配列をループして、末尾だけちょっと違うものをレンダリングしたい。

```html:したいことの例.ユーザのリストをレンダリング
aさんとbさんとcさんです
```

これはこんな感じに書くとおもう。

```erb:例1.mapしてjoin
<%= users.map {|user| "#{user.name}さん"}.join('と') %>です
```

```erb:例2.with_indexで末尾を判断（ちょっと辛くなってきた)
<%= users.each.with_index do |user, index| %>
  <%= user.name %>さん<%= 'と' if (index + 1) != users.size %>
<% end %>です
```

レンダリングするものが複雑になってくると `each` にブロック渡してレンダリングしたくなる。

```erb:理想.こんなふうにやりたい
<% users.each.with_last do |user, last| %>
  <複雑なマークアップ>
    <%= user.name %>さん<%= last ? 'です' : 'と'%>
  </複雑なマークアップ>
<% end %>
```


# 実装

`with_index` と同じアイデアなので、 `with_index` の定義されてる [Enumeratorクラス](https://docs.ruby-lang.org/ja/latest/class/Enumerator.html)のドキュメントを読んでいたら `next` ってメソッドがあった。次のアイテムを取得して、無理だったら `StopIteration` 例外を発生させるという。これを使えばそのアイテムが終端かどうか判断できそう。

```ruby:with_last追加
class Enumerator
  def with_last
    each do |*args|
      # each とともにイテレータをすすめる
      self.next
      # 進めた状態で次があるか確認、なければ終端例外 StopIteration が発生する
      peek
      yield(*args, false)
    rescue StopIteration
      # 終端
      yield(*args, true)
    end
  end
end

[1,2,3].each.with_last { |item, last|
  pp [item, last]
}
# => [1, false] [2, false] [3, true]

[1,2].cycle.with_index.with_last { |item, index, last|
  pp [item, index, last]
}
# => [1, 0, false] [2, 1, false]
#    [1, 2, false] [2, 3, false]
#    [1, 4, false] [2, 5, false] ....(無限ループ)
```

なんとなく行けそうなので、引数とかを整理して gem にしました。

https://rubygems.org/gems/with_last

変な挙動したらissue/PRください
https://github.com/oieioi/with_last.rb