OmniAICreator/Qiita-1.07M huggingface dataset:
Atomic Design について調べて見た


## 調べてみた経緯

Reactを勉強して３ヶ月くらい経つが本を読んで 「Atomic Design」というデザインシステムという概念が出てきて「なんじゃこれ！？」って思い調べてみました。

ReactとAtomic Designの相性がかなり良いらしいす。

## Atomic Designとは

Atomic Designとは、以下の5つの構造にページを分け、それぞれの役割を明確にし再利用可能なコンポーネントを作って行くことです。

- Atoms(原子)
- Molecules(分子)
- Organisms(有機体)
- Templates(テンプレート)
- Pages(ページ)

### Atoms(原子)

Atoms(原子)とは、UIを構築する最小単位です。なのでそれ以上に細かく分割することはできません。

ToDoListのモックで例をあげると

<img width="381" alt="atomicDesign2.png" src="https://qiita-image-store.s3.amazonaws.com/0/179816/c8a5b428-470e-77da-e3b9-9d08ed258460.png">


このような構成のページをAtomに分けると以下のようになります。

<img width="391" alt="atomic3.png" src="https://qiita-image-store.s3.amazonaws.com/0/179816/40bfd9f2-a299-c7f4-7686-6d2a1a810079.png">


- テキストフォーム
- 追加ボタン
- チェックボックス
- テキスト
- チェックボックス
- テキスト

のように分けることができます。

Atomsは、`Atomic DesignかつWebサイトを構築する上で基本的なものであり重要な要素です。`

### Molecules(分子)

Molecules(分子)になると,UIがどんな意味を持ちどのように使われるかが具体性が出てきます。

先ほどのAtoms単体だけを見ると、何をしたらいいかがわかりませんよね？しかしMoleculesになると入力フォームがありボタンがあるので、「何か入力して送信するんだなー」とより具体的なインターフェイスになることがわかります。

<img width="949" alt="atoms3.png" src="https://qiita-image-store.s3.amazonaws.com/0/179816/16fbb6d6-bde4-90c9-7cce-0770fd5f493e.png">


Atomsを組み合わせて複雑なMoleculesになってしまうと、他の箇所で注意が必要。

### Organisms(有機体)

Organisms(有機体)はAtomsやMoleculesが組み合わされて利用されます。`AtomsやMoleculesとの大きな違いは再利用性があまり求められてないと言う点です。`

Organismsの代表として ヘッダーが挙げられます。

### Templates(テンプレート)

Templates(テンプレート)はワイヤフレームと同じで、ページに画像や実際のデータが反映される`前`の状態です。

### Pages(ページ)

 Pages(ページ)は、Templatesに対してページに画像や実際のデータを反映させたものです。


## Atomic Designを使うメリット

- チームとしての共通概念が生まれる
- 構造的な考えが生まれる
- 開発スピードが早くなる
- トーン&マナーが生まれる

トーン&マナーはデザイン用語だそうです。[こちらのサイトが詳しく載ってました](https://www.concentinc.jp/design_research/2014/04/tone-and-manner/)

と言うメリットがあるそうです。デメリットとしては、ファイル量が多くなるそうです。

## Reactのファイル構成

```
├── public // コンパイル済み各公開ファイル
│   └── assets
│   └── index.html
└── src
    ├── components // Reduxに依存しないReactのコンポーネントディレクトリ
    │   ├── atoms
    │   └── molecules
    ├── containers // Reduxとコネクトするコンポーネント
    │   ├── organisms
    │   └── pages
    ├── redux // ReduxのAction,Reducer,Storeを扱うディレクトリ
    │   ├── middlewares // 主にAPI処理をまとめたディレクトリ（ReduxでいうとAction発行時にReducerの前でインターセプトする処理）
    │   ├── modules
    │   └── records
    ├── styles // 基本的なスタイルを定義する
    │   ├── core
    │   ├── foundation
    │   └── utility
    └── utils // 汎用的な処理をするUtil用ディレクトリ
```


[https://ichimaruni-design.com/2017/05/react-redux-atomic-immutable/:embed:cite]



調べてるとこんな感じに作っている方がいらっしゃいました。

気が向いたらAtomic Design+Redux+ReactでTodoListを作ってみようと思います。
each_with_indexの使い方

eachループで回しつつ、それぞれのデータに番号を振りたいと思うとき、どうすればいいんだろうとググったら、便利なeach_with_indexメソッドに出くわしたので、まとめました。

## each_with_indexメソッドの使い方
```ruby
配列.each_with_index do |item, i|
 "#{i}番目のデータは、#{item}"です。
end
```

(例)フルーツ名が格納された配列を順番に表示する場合

```ruby
fruit = ["りんご", "みかん", "いちご"]
fruit.each_with_index do |item, i|
 "#{i}番目のフルーツは、#{item}"です。
end
```

結果

```
0番目のフルーツは、りんごです。
1番目のフルーツは、みかんです。
2番目のフルーツは、いちごです。
```

indexは、0から始まります。
1から番号を始めたい場合は、`"#{i+1}番目のフルーツは、#{item}"です。`
という感じで、単純に`i`を`i+1`にすればいい。

## 開始したい番号を指定するeach.with_indexメソッド
10から番号をつけたいという場合は、上の例でいくと、

```ruby
fruit.each.with_index(10) do |item, i|
 "#{i}番目のフルーツは、#{item}"です。
end
```

結果

```
10番目のフルーツは、りんごです。
11番目のフルーツは、みかんです。
12番目のフルーツは、いちごです。
```
とりあえず Docker で PostgreSQL を動かす手順

例えば、数 GB ある CSV ファイルをローカルマシンで雑に集計したいときは Excel や Pandas だとちょっと厳しかったりするので、PostgreSQL みたいな RDBMS にツッコんで SQL でやりたい。

雑にサーバに立てる方法といえば Docker 。
PostgreSQL は [Docker Hub に公式イメージがある](https://hub.docker.com/_/postgres/)ので安心して使えて便利。

しかし使うたびに「オプション何指定したら良いんだっけ」となるので備忘録として手順をまとめておく。
詳しいことはすべて Docker Hub のページに書いてあるのでそこを読めば分かる。

注意点として、今回は雑にサーバ立てる場合の解説なので、アプリケーションを作る場合はちゃんと `docker-compose.yml` を書いたほうがいいと思う。

## コンテナを起動する
``` console
$ docker run --rm -d \
    -p 15432:5432 \
    -v postgres-tmp:/var/lib/postgresql/data \
    -e POSTGRES_HOST_AUTH_METHOD=trust \
    postgres:12-alpine
```

- コンテナの停止時には削除する (`--rm`)
    - ボリュームにデータを保存する設定 (後述) なので、コンテナは消えても問題ない
- ホスト側のポートは適当に `15432` にした (ご自由に)
- ボリューム `postgres-tmp` を `/var/lib/postgresql/data` にマウントする
    - ボリュームが存在しない場合は新規作成される
    - データはこのボリュームに保存されるため、コンテナを削除しても保存したデータは削除されない
    - 環境変数 `PGDATA` を指定すればコンテナ内のデータディレクトリを変更できるが、特に変更する必要はないと思う
- パスワードなしでアクセスできる設定 (`POSTGRES_HOST_AUTH_METHOD=trust`)
    - もちろんセキュリティ的にはよくない設定なので、外部公開するサーバなどでやってはいけない
- イメージは `12-alpine` (Alpine Linux ベースのバージョン 12 系最新) を使った
    - 他のバージョン： https://hub.docker.com/r/library/postgres/tags/

## 接続してみる
何らかの PostgreSQL クライアントを使って接続してみる。
`psql` コマンドを使うとこんな感じ。

``` console
$ psql -h localhost -p 15432 -U postgres
```

- 初回起動時に特に環境変数を指定しなかった場合は `postgres` というユーザと `postgres` というデータベースが作成される
- 初回起動時に環境変数でパスワードを指定しなかった場合はパスワードなしで接続できるが、その場合は `localhost` 以外からの接続はできない
シェアするアプリによって挙動を変更する

## 概要
`Intent.createChooser` を使ってシェアをする際に特定のアプリだけ挙動を変更したいということがありました。今回はメールアプリの場合だけ件名をつけることをゴールにします。

特に難しい内容ではなかったのですが備忘録として投稿します。

## 実装
特定のアプリだけ定義します。

```kotlin:
enum class App(val packageName: String) {
    Gmail("com.google.android.gm"),
}
```

判定はこんな感じです。

```kotlin:
/**
 * enumで定義したパッケージ名に存在するか確認
 */
private fun isMail(packageName: String): Boolean =
        App.values().filter { packageName.contains(it.packageName) }.count() > 0
```

少し長いですがシェアするときは次のようにします。

```kotlin:
private fun share() {
    val targets: MutableList<Intent> = mutableListOf()
    val resolveInfoList = packageManager.queryIntentActivities(Intent().actionSend(), PackageManager.MATCH_ALL)
    resolveInfoList.forEach {
        val packageName = it.activityInfo.packageName
        targets.add(Intent().actionSend().apply {
            `package` = packageName
            setClassName(packageName, it.activityInfo.name)
            when (isMail(packageName)) {
                true -> putExtra(Intent.EXTRA_SUBJECT, "subject...")
                else -> putExtra(Intent.EXTRA_SUBJECT, "")
            }
            putExtra(Intent.EXTRA_TEXT, "message...")
        })
    }

    if (targets.isNotEmpty()) {
        val chooserIntent = Intent.createChooser(Intent(), "共有").apply {
            putExtra(Intent.EXTRA_INITIAL_INTENTS, targets.toTypedArray())
        }
        startActivity(chooserIntent)
    }
}

private fun Intent.actionSend(): Intent = Intent().apply {
    action = Intent.ACTION_SEND
    type = "text/plain"
}

```

## 以上
Twitterアプリだけハッシュタグつけたい的なこともできるかと思います。
file_put_contents関数でデータをファイルに出力

file_put_content("作成するファイルの名前","出力したいデータ","フラグ”）
を使って、データをファイルに出力することができます。
フラグは省略可能です。
例
```$a = $_POST('data');
file_put_contents("new_file",$a);//フラグなし
```
また、フラグを使って、書き方の種類などを指定することができます。
私は、FILE_APPEND_FLAGという、
「前回書いたものはそのまま残して、同じファイルの続きに記述を追加しろ」
って意味のフラグをよく使います。
例
```$a = $_POST('data');
file_put_contents("new_file",$a,FILE_APPEND_FLAG);
```

フラグの種類は他にもあるので、詳しく知りたい方は以下のサイトを参照してください。
http://php.net/manual/ja/function.file-put-contents.php
プロセスのコール・シグナルを追うtruss/straceコマンド

# プロセスのコール・シグナルを追うtruss/straceコマンド

## コマンドの説明

　[IBM Knowledge Center \- truss コマンド](https://www.ibm.com/support/knowledgecenter/ja/ssw_aix_71/com.ibm.aix.cmds5/truss.htm)より抜粋。

> プロセスのシステム・コール、動的にロードされたユーザー・レベル機能のコール、 受信されたシグナル、引き起こされたマシン・フォールトをトレースします。


## どんなときに使うの？

　シェルやミドルウェアのトラブルで、以下のようなときに問題解決に使えます。
- psしてもよく分からない
- ログに何も残っていない
- 現象が発生するが原因がつかめない
- 不審なプロセスを発見したのでどんな動きをしているのか調査したい


## コマンド実行例

　findコマンドに対してtrussした例がこちら。

```
$ truss find .
execve("/usr/bin/find", 0x2FF22AE8, 0x20013AC8)  argc: 2
read_sysconfig(0xF07A5058, 0x00000010, 0xFFFFFFFD, 0x10000000, 0x30000930, 0x00000080, 0x06010000, 0xF08172A0) = 0x00000000
sbrk(0x00000000)                                = 0x301A1B7C
vmgetinfo(0x2FF22420, 7, 16)                    = 0
sbrk(0x00000000)                                = 0x301A1B7C
sbrk(0x00000004)                                = 0x301A1B7C
__libc_sbrk(0x00000000)                         = 0x301A1B80
sys_parm(0, 14, 0x2FF22980)                     = 0
__libc_sbrk(0x00000000)                         = 0x301B1B90
getuidx(4)                                      = 10005
getuidx(2)                                      = 10005
getuidx(1)                                      = 10005
getgidx(4)                                      = 400
getgidx(2)                                      = 400
getgidx(1)                                      = 400
__loadx(0x01480080, 0x2FF21680, 0x00000A50, 0x2FF221E0, 0x00000000) = 0xD06D0128

（中略）

close(5)                                        = 0
kfcntl(1, F_GETFL, 0x00000000)                  = 67110914
kfcntl(1, F_GETFL, 0x0001AF70)                  = 67110914
kfcntl(2, F_GETFL, 0x2FF22FFC)                  = 67110914
_exit(0)
```

　Linuxの場合、straceコマンドを使います。

```
# strace find . | more
execve("/bin/find", ["find", "."], [/* 28 vars */]) = 0
brk(0)                                  = 0x1336000
mmap(NULL, 4096, PROT_READ|PROT_WRITE, MAP_PRIVATE|MAP_ANONYMOUS, -1, 0) = 0x7fdf40749000
access("/etc/ld.so.preload", R_OK)      = -1 ENOENT (No such file or directory)
open("/etc/ld.so.cache", O_RDONLY)      = 3
fstat(3, {st_mode=S_IFREG|0644, st_size=100642, ...}) = 0
mmap(NULL, 100642, PROT_READ, MAP_PRIVATE, 3, 0) = 0x7fdf40730000
close(3)                                = 0
open("/lib64/librt.so.1", O_RDONLY)     = 3

(中略)

close(3)                                = 0
close(1)                                = 0
munmap(0x7fdf40746000, 4096)            = 0
close(2)                                = 0
exit_group(0)                           = ?
+++ exited with 0 +++
.
```


## 参考
- [straceコマンドの使い方 \- Qiita](https://qiita.com/hana_shin/items/a03150552e2f70994248)
【Swift+Extension】UILabelで、一部の文字だけ色を付ける

```swift:UILabel+Accent.swift
import UIKit

extension UILabel {
    
    /// 対象の文字列に対して、アクセント色を付加する
    ///
    /// - Parameters:
    ///   - pattern: 対象の文字列
    ///   - color: アクセント色
    func addAccent(pattern: String, color: UIColor) {
        // String
        let strings = [attributedText?.string, text].flatMap { $0 }
        guard let string = strings.first else { return }
        
        // Ranges
        let nsRanges = string.nsRanges(of: pattern, options: [.literal])
        if nsRanges.count == 0 { return }
        
        // Add Color
        let attributedString = attributedText != nil
            ? NSMutableAttributedString(attributedString: attributedText!)
            : NSMutableAttributedString(string: string)
        
        for nsRange in nsRanges {
            attributedString.addAttributes([.foregroundColor: color], range: nsRange)
        }
        
        // Set
        attributedText = attributedString
    }
    
}
```

```swift:String+Range.swift
import Foundation

extension String {
    
    func nsRange(from range: Range<String.Index>) -> NSRange {
        return NSRange(range, in: self)
    }
    
    func ranges(of searchString: String, options mask: NSString.CompareOptions = [], locale: Locale? = nil) -> [Range<String.Index>] {
        var ranges: [Range<String.Index>] = []
        while let range = range(of: searchString, options: mask, range: (ranges.last?.upperBound ?? startIndex)..<endIndex, locale: locale) {
            ranges.append(range)
        }
        return ranges
    }
    
    func nsRanges(of searchString: String, options mask: NSString.CompareOptions = [], locale: Locale? = nil) -> [NSRange] {
        let ranges = self.ranges(of: searchString, options: mask, locale: locale)
        return ranges.map { nsRange(from: $0) }
    }
    
}
```

# 使い方
```swift
let aLabel = UILabel()
aLabel.text = "あいうえお"

// "あいう"を赤色にする場合
aLabel.addAccent(pattern: "あいう", color: .red)
```

## ワンポイント
 * 対象の文字列が見つからなかった場合は、何もしないので安全です。
 * テキスト装飾が既にあるラベルの場合は、引き継いだままアクセントを追加するようにしています。
VBAで連動プルダウンの入力規則Listに対して、初期化する処理を加える。

#VBAでJSの初期化処理もどき。
セルC5からC10までに連動する入力規則のリストがあるとして、
条件によってリストの中身を初期化する処理を加える。

全部VBAでリスト作ったほうがいいんじゃない　と思ったが
入力規則リストのほうがお手軽だったため、ここでは初期化処理だけを目的とする。

```vb:Worksheet_Change
Private Sub Worksheet_Change(ByVal Target As Range)
    'C5~C10以外のセルが変更された場合は処理を抜ける
    If Intersect(Target, Range("C5:C10")) Is Nothing Then
        Exit Sub
    'C5が変更された場合
    ElseIf Target.Address = Range("C5").Address Then
        Range("C6") = "-"
        Range("C7") = "-"
        Exit Sub
    'C6が変更された場合
    ElseIf Target.Address = Range("C6").Address Then
        Range("C7") = "-"
        Exit Sub
    'C10が変更された場合
    ElseIf Target.Address = Range("C10").Address Then
        If Range("C6").Value <> "AAA" Then
            Exit Sub
        End If
        Range("C7") = "-"
        Exit Sub
    End If
End Sub
```
LESSを使って効率的なCSS環境を!! 文系学生が勉強してみた!!

##はじめに
インターン先でプログラミングを勉強中の文系学生。

「この会社、LESS使ってるから勉強しといてね」とのお達しにより、勉強を始めます。

##LESSとは
そもそもLESSってなによ。
ドットインストール先生に教えてもらおう。
[LESS入門(全8回)-プログラミングならドットインストール](https://dotinstall.com/lessons/basic_less_v2)を見て勉強するか。

～～視聴後～～

はいはい。CSSを効率よく扱うためのツールね。
とりあえずインストールしていきますね。

##インストール
早速、LESSをインストールしますか!
LESSのインストールには`Node.js`が必要みたい。
まだやってない人は、[こちら](https://qiita.com/kaitaku/items/a6aa7b6248d4dc6a905d)を参考にどうぞ。

`Node.js`が準備できたら、[Getting started|Less.js](http://lesscss.org/)に行き、やることを確認する。
コマンドプロント開いて、

```
npm install -g less
```

を打ち込んで待機。

お、終わった終わった。

##使い方
###変換
LESSで作成したファイルは`lessc`コマンドで`css`ファイルに変換できるらしい。

```
styles.less -> lessc -> styles.css
```

はぇ～、すごい。

###変数
これがLESSの最大の魅力では?
LESSでは変数を作成することができる。
つまり、今まで

```css:styles.css
h1{
 color: red;
}
h2{
 color: red;
}
```

のように書いていたのを

```css:styles.css
@mycolor: red;
h1{
 color: @mycolor;
}
h2{
 color: @mycolor;
}
```

とできるわけか!!
例がちょっとしかないから、あまりメリットに感じないけど、変数使えるのは助かるでしょ?
一括で操作ができるのは素人にでも効率よくなるのがわかる。
`{}`を使えばセレクタにも使えるらしいし、これは良いね!!

###演算
LESSでは変数に演算ができるとのこと。

```css:styles.css
変数名 - 〇px;
```

みたいなことができると。
デザイナーとかの人にはありがたい機能だね。

###関数
LESSには色々な関数があるとのこと。

```css:styles.css
darken(変数名,〇%);
```

上の例だと、変数よりも〇%の分だけ暗くなる。
ちょっとどこかにまとめてないか調べてこようっと

###階層的な表現
言葉で説明するのが難しいからコードで、

```css:styles.css
header {
 font-size: 18px;
}
header a{
 font-size: 20px
}
```

↓↓↓

```css:styles.css
header {
 font-size: 18px;
　a{
 　font-size: 20px
 }
}
```

こういう短縮ができるのは嬉しいね。
`&:`は親要素の指定できるらしいから、覚えておこうっと。

###ミックスイン
クラスやIDを作ることで、部品? コードをまとめることができる。
同じようなUIでも「ここだけ変えたい」みたいなのがあるときに使えるな。
ミックスインの名前に()を付ければ、cssに変換したときに、ミックスインの表示がなくなる。

####ミックスインのオプション
ミックスインは呼び出すときに()を付けることもできる。
そうすることで、コードを変数化して扱える。
つまり…

```css:styles.css
.my-mixin(@width){
 border: @width solid red;
}
.my-mixin(8px);
```

こういう使い方ができる。

初期値も付けられる。
その場合は、

```css:styles.css
.my-mixin(@width:5px){

}
```
と言った感じ。

`;`でオプションを区切ることができるとのこと。

###extend
簡単に言えば、設定の引継ぎかな。
`&:extend(クラス)`で引き継げる。
でも、ミックスインでもできるよね。
どっちを使うかは好みの問題かな?

##まとめ
今回はLESSの勉強をしました!!
早い所慣れて、作業するときにはより便利にできるようにしておこう!!

##参考サイト
[LESS入門(全8回)-プログラミングならドットインストール](https://dotinstall.com/lessons/basic_less_v2)
[Lean LESS in 10 Minutes](https://tutorialzine.com/2015/07/learn-less-in-10-minutes-or-less)
SlackのリンクがいつのまにかEdgeで開いてしまう人の対処法

SlackのリンクをクリックするとEdgeが開いちゃって不便！
そんな事が周囲のWindows環境の何人かに起きていたのですが
「設定」→「アプリ」→「規定のアプリ」→「Web ブラウザー」
ここの設定をChromeとかに変更すると、指定したブラウザでリンクを開いてくれるようになります。

![b1875353-b16e-1477-b3bc-c28e72c8449f.png](https://qiita-image-store.s3.amazonaws.com/0/42028/77464df1-0c66-0def-6ad9-e7ac5cf3914a.png)

↓

![app.png](https://qiita-image-store.s3.amazonaws.com/0/42028/1e0b24bc-d68c-9b63-5fba-9863906e12f1.png)
【自戒・教訓】間違ってvim-minimal消すなよ？

# やっちまった
CentOS7.2標準vimが最低限しか動かなくて使えねーからいっそ8にしてみるかなーと、何も考えずにやってたら`sudo`が使えなくなった。

# vim-minimalパッケージの依存関係バグ？
どうやら[vim-minimalの依存にsudoが含まれてる](https://bugzilla.redhat.com/show_bug.cgi?id=1346332)ようで、`vim-minimal`をremoveしたらsudo使えなくなった様子。
もう一度インストールするにはrootユーザーで入るしかないが、root使わない運用にしてたので困った(´・ω・｀)
とくにproduct運用してない環境なので最悪OSから入れ直しても大丈夫なんだけど、クラスタNodeなので面倒な手間を作ってしまった。

# 教訓

* repositoryの過信はダメ。removeするときには依存パッケージ確認する。
* production環境じゃなくても、破壊的作業は慎重にしないと思わぬ手間が発生してしまう。
* コード等はバージョン管理してても、開発環境（コンパイル・実行環境じゃなくてIDE・エディタ環境など）あたりは再現性確保してないこと多いので慎重にメンテする。
【Flutter】APIドキュメントからソースに飛べるChrome拡張が便利

FlutterのAPIドキュメントからソースに飛べるChrome拡張が便利だったので紹介です。
:point_right: [Flutter developer - Chrome Web Store](https://chrome.google.com/webstore/detail/flutter-developer/kimjiioacelfpeflakmeclmfndijcfpp)

## 使い方

API Docの `See source code for Container class` をクリックすると

https://docs.flutter.io/flutter/widgets/Container-class.html
![](https://qiita-image-store.s3.amazonaws.com/0/123122/daf14325-aee0-8fb7-c3fb-8a1f79864448.png)

:point_down: 対象のクラスのソースにジャンプできる。

https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/widgets/container.dart#L232
![](https://qiita-image-store.s3.amazonaws.com/0/123122/6731ac63-596c-0f01-15e0-4736340d997c.png)


## リンク
Flutter developer - Chrome Web Store
https://chrome.google.com/webstore/detail/flutter-developer/kimjiioacelfpeflakmeclmfndijcfpp
ES6って初めて聞いたんですが… 文系学生がどこまで理解できるのかやってみた!!

##はじめに
インターン先でプログラミングを勉強中の文系学生。

「そういえば、JavaScriptとかって勉強しなくていいんですか?」
「あぁ、そういえばしてなかったね。じゃあ、ES6勉強してみて」

何ですそれ?

##ES6とは
初心者だし、聞いたことがなくても仕方がないよね!!
まぁ、それとしてES6って何ぞや。

Qiitaの中に[ES6(ES2015)チートシート](https://qiita.com/morrr/items/883cb902ccda37e840bc)という記事があるのを発見!!
概要を見てみると、こんな説明が

>ECMAScriptS6 = ES2015 = JavaScriptの新しいバージョン

JavaScriptの最新版か!!(なんで名前変わったんだ…?)

##環境の導入
まずは環境の導入からしてみるか。
[ここ](https://nodejs.org/en/)からWindowsインストーラーをインストールして、[Node.js / npmをインストールする（for Windows）](https://qiita.com/taiponrock/items/9001ae194571feb63a5e)を参考に設定していこう。

まぁインストールが完了したら

```
node --version
npm --version
```

をコマンドプロントで実行するだけなんですがね。
無事終了っと。

##Hello,Worldをやろう!!
新しい言語を学ぶなら、まずはHello,World!をやらないとね。
[ES2015で始めるJavaScript入門](https://qiita.com/abcang/items/824681cb88676da4f9a8)を参考に進めていこう。

```
mkdir world
cd world
//ディレクトリの作成&移動

npm init -y
//プロジェクトの初期化&package.jsonの作成
```


ここまでできたら、package.jsonをテキストファイルで編集していく。

```
"main":"index.js",
```

上のを消して、下に

```
"preferGlobal":true,
"bin":{
 "hello": "hello.js"
}
```

を追加する。

その後、作成したディレクトリ内(今回だとworld)にhello.jsを作成。

```js:hello.js
'use strict';

const text = 'Hello,World!';
console.log(text);

```

作成が終わったら、コマンドプロントで

```
node hello.js
```

を実行。

**Hello,world!**と表示されたらOK!


`npm link`で何処からでも実行できるようになるらしい。

##ES5のコードについて
ES6のコードを解説。

###strickモード
```
'use strict';
```

このコードを打つことで、Strickモードになる。
開発者が推奨していない処理をエラーにしてくれるため、最初は助かる!!
スクリプトの先頭に書くとスクリプト全体、関数の先頭に書くと関数内で有効になる。
セミコロンで区切るのはPHPと同じか

###変数
`const`、`let`、`var`等の修飾子がある。
それぞれ再代入や変数の有効範囲に違いがある。
修飾子の後に変数名を書くことで、変数を作成できる。
代入は`=`を使う。
`const`は宣言時に代入が必要。

###文字列
`''`、`""`で囲めば文字列のデータ。
結合は+でできる。
`${変数名}`で変数が展開される。
この方法を使うことが望ましい。

###consoleオブジェクト
`console`オブジェクトでデバッグコンソールにアクセスできる

###typeof
`typeof`でその後ろに書いたもののデータ型を調べられる。
文字列なら`String`、数値なら`Number`と言った感じ。

###真偽値
`ture`か`false`か。
`falsy`は偽。型変換をするとfalse。
`truthy`は真。型変換をするとtrue。

###配列
`[]`で要素を囲むと、配列を作成できる。

###for of
配列などの繰り返しができる物から要素を1つずつ取得して処理を行う。

##まとめ
今回はES6の勉強をしました!!
もっといろいろあるけれど、自分が完全に理解できたのはこの範疇。
気になる人は参考サイトをご覧あれ!!

##参考サイト
[ES6(ES2015)チートシート](https://qiita.com/morrr/items/883cb902ccda37e840bc)-https://qiita.com/morrr/items/883cb902ccda37e840bc
[Node.js / npmをインストールする（for Windows）](https://qiita.com/taiponrock/items/9001ae194571feb63a5e)-https://qiita.com/taiponrock/items/9001ae194571feb63a5e
[ES2015で始めるJavaScript入門](https://qiita.com/abcang/items/824681cb88676da4f9a8)-https://qiita.com/abcang/items/824681cb88676da4f9a8
[ES2015(ES6) 入門](https://qiita.com/soarflat/items/b251caf9cb59b72beb9b)-https://qiita.com/soarflat/items/b251caf9cb59b72beb9b
XSERVERでCGI/APIを走らせて500エラーが出たときに確認すること

## ハマった。
> （省略） End of script output before headers: test.cgi

コードをどうあがいてもうまく動かない。実行権限は与えているはず！

## 権限設定
結局権限かよ！て話ですが、[こちら](https://www.xserver.ne.jp/support/faq/faq_service_hp_trouble.php#04)にこんな記述があるんです。

>また、エックスサーバーではセキュリティ上、ユーザー／グループに実行権限のあるパーミッション（777など）ではプログラムは実行できません。
CGI/PHPファイルのパーミッションが 777 の場合や、パーミッションが 777 のフォルダ上にプログラムを設置している場合、エラーが発生しますのでご注意ください。

これだけ見て、「実行権限与えちゃダメなのかー」と削ってたのですが、別のページには

>.cgi / .pl などの CGI 実行ファイル: 755, 705のいずれか

とありまして。

755はグループとOtherに実行権限与えてるし、705もOtherに実行権限を与えている。
つまり、与えてはいけないのは**実行権限ではなく書込権限**だったのだ…

というわけで、とりあえず書込権限を剥奪したら動きました。解決。

## ついでに、それ以外の確認事項。CGIやAPIの基礎的なところ。
### 実行環境

```ruby:test.cgi
#!/usr/bin/ruby
```
そのCGIを実行するための言語があるパス。サーバーによって微妙に異なることがあるので、公式サイトを見て確認するかSSHでサーバーにアクセスして

```shell
which ruby
```

とかやって見つけたパスを`#!`のあとに書きましょう。

### Content-Type

先程のエラーで言うところの`headers`に当たる内容です。
このCGIが何を返すのかを指定します。
rubyとかで.cgiファイルを実行した際に、返す内容の前にこれらが含まれている必要があります。
直接HTMLを表示させる場合もあれば、JSONで返してVueとかに受け渡すこともあります。

決まった文字列を入れます。この辺が参考になります。

- Content-Typeの一覧 - Qiita https://qiita.com/AkihiroTakamura/items/b93fbe511465f52bffaa

jsonの場合は

```
Content-Type: application/json
```

です。

僕の場合はrubyで書いてるので、

```ruby
puts "Content-Type: application/json\n"
```
みたいな感じです。

### Access-Control設定
これらも`headers`の内容です。GETかPOSTのどちらを使うのか、他ドメインからの実行に対応するのかなどを記述します。

よく使うやつはこんな感じ。

```ruby
puts "Access-Control-Allow-Methods: GET,POST\n"
puts "Access-Control-Allow-Origin: *\n\n"
```

### headerの直後の空行
先程、上に書いた最後の一行`\n\n`は実は地味なハマリポイントです。
`headers`と中身の間には、一行の空行を含ませる必要があります。どこに書くかは自由ですが、とにかく一行改行を入れて下さい。

## とりあえず以上です。
以前自分がAPIぽいCGIを作ってたときにわからなかった内容をざっとまとめてみました。
誰かの参考になれば幸いです。

あと、ぶっちゃけサーバーサイドはあまり良く分かっていないので、もし間違い等ありましたらご指摘をお願いします。
では。
SQL memo

2018年3月26日
・最終的にどのような結果が欲しいのか
>>SELECT, WHERE, GROUP BYで何を選択するか

・わからなくなったら、ローデータをみる
・コメントの使用（何を目的に、なぜ）
>>/* ~~ */

・クエリ、サブクエリ、条件文などは、インテントをつけてわかりやすくする。

2018年3月27日
・要素一つ一つを出せるようにしてから全体をかく（エラーなし）
・期待している内容かその都度実行してチェック
・一つ一つの要素は何を意味するのか理解

2018年3月28日
・根元のFROMはわかりやすく、集計関数などを使わずに、みやすくする。

2018年4月18日
・LIMIT は全てのデータを参照してから件数を限定する
　もし、数を少なくしたいなら、WHERE句で日付などを指定する

2018年４月20日
・UNIONは縦にくっ付くイメージ
・JOINは横につくイメージ

2018年4月23日
・クエリで分からない部分はきく
　＞＞何かしらの意味があってそうしてる

2018年4月26日
・ワイルドカード（％）は重い

2018年４月27日
・joinするテーブルは何の意味を持つのかを意識

2018年5月７日
・数が合わないときは段階ごとに数は合計してみる。

2018/05/09
・最後の形をイメージしてテーブル作っていく
・検算のために絶対にずれない数字を作って見る
・検算ために期間とカラムはどっちかを固定する
・最初はこれ以上ないってくらいテーブルを区切る

2018/07/19
クエリのトップに EXPLAIN
クエリプランを表示できる（実行の順番や実行時間、行と列の数）
Officeファイルを狙ったサイズにするために再圧縮する

「〇〇MBぐらいのOfficeファイルでテストしてみて」
と依頼され、そそくさと`fallocate`でダミーファイルを作って添付して完成！
としちゃうんだけど、保存すると圧縮されてかなりしぼんでしまう。
`fallocate`が中身0ばっかりなのも原因かもしれないが…

減ることを見越して多めにたくさんファイルを添付するでも良いが、
保存形式が2007年以降の形式(末尾に`x`がついている`xlsx`など)
なら実態はzip形式なので、

1. 拡張子を`.zip`に変更
2. 展開
3. 圧縮率を選べるソフトで**無圧縮**でzip化(展開したときにできるファイル名ディレクトリは使わない)
4. 拡張子をもとに戻す

で、`fallocate`で作ったファイルサイズ+ちょっとのOfficeファイルになる。
もちろんちゃんと開くことができる。

ただし、上書き保存するとまた圧縮されるので注意。

[linux - 1GBのダミーファイルを作成するコマンドは？ - スタック・オーバーフロー](https://ja.stackoverflow.com/questions/21468/1gb%E3%81%AE%E3%83%80%E3%83%9F%E3%83%BC%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%AF)
css 順番にフェードイン

.li {
  opacity: 0;
  position: relative;
  transition: all .3s ease-in-out;
}
.li:nth-child(1) {
  transform: translateY(20px);
  animation: cssFadeIn 0.3s ease-in-out 0.5s 1 forwards;
}
.li:nth-child(2) {
  transform: translateY(20px);
  animation: cssFadeIn 0.3s ease-in-out 1s 1 forwards;
}
.li:nth-child(3) {
  transform: translateY(20px);
  animation: cssFadeIn 0.3s ease-in-out 1.5s 1 forwards;
}
.li:nth-child(4) {
  transform: translateY(20px);
  animation: cssFadeIn 0.3s ease-in-out 2s 1 forwards;
}
.li:nth-child(5) {
  transform: translateY(20px);
  animation: cssFadeIn 0.3s ease-in-out 2.5s 1 forwards;
}
.li:nth-child(6) {
  transform: translateY(20px);
  animation: cssFadeIn 0.3s ease-in-out 3s 1 forwards;
}
@keyframes cssFadeIn {
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
'InitializeComponent'は現在のコンテキスト内に存在しません。だって？はぁ？

なぜだか毎回このエラーが私だけでる:sob:
解決策がわかったので備忘のためまとめておきます！
##解決策
まぁ基本的にnamespaceを自力で変更したからなのです。修正し忘れているところがあるよ。ということ。
namespaceをhogeAppからhogehogeAppに変えたかった、とする。

**修正箇所**

```xml:TopPage.Xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="hogehogeApp.TopPage">
```
x:Classのところ！
xaml.cs側を変えたから大丈夫だろー！って思ってビルドするとこのエラーが出る。xaml側も変えてあげてねって話です。
おおざっぱなので、後でもうすこし細かくまとめようと思います。
Excel マクロで画像を移動

#Excel VBAで画像を移動させる

![movePic.png](https://qiita-image-store.s3.amazonaws.com/0/211884/deb1e6ec-c955-68b6-d647-bc237b76d589.png)




```
Sub 右移動()

    Sheet1.Shapes("Picture 2").Left = Sheet1.Shapes("Picture 2").Left + 10
    Sheet1.Shapes("Picture 2").Rotation = 90

End Sub

Sub 左移動()

    Sheet1.Shapes("Picture 2").Left = Sheet1.Shapes("Picture 2").Left - 10
    Sheet1.Shapes("Picture 2").Rotation = -90

End Sub
Sub 上移動()

    Sheet1.Shapes("Picture 2").Top = Sheet1.Shapes("Picture 2").Top - 10
    Sheet1.Shapes("Picture 2").Rotation = 0

End Sub
Sub 下移動()

    Sheet1.Shapes("Picture 2").Top = Sheet1.Shapes("Picture 2").Top + 10
    Sheet1.Shapes("Picture 2").Rotation = 180

End Sub
```
pigpioを用いてI2C通信　GP2Y0E03編

# 前置き

先日、IoTフォーラムに出展するに当たってブラッシュアップもとい機能拡張を模索したところ下記のサイトにてサーボを簡単に制御できるライブラリがあることを知った。

- [Raspberry PiのGPIO制御の決定版 pigpio を試す](http://karaage.hatenadiary.jp/entry/2017/02/10/073000)

今までRaspberryPi(以降ラズパイ)でPWM制御やI2Cなどを用いる際にはwiringpiを使ってきたが、参考サイトにも書いてあるように高精度PWMに使えるピンは2本しかなく使い物にならなかった。
しかしこのpigpioは**全てのピン(32本)が高精度PWMを使える**という素晴らしい性能を持っている。しかもサーボを動かすのに必要なコード数も

```servo.py
import pigpio
pi = pigpio.pi()
pi.set_servo_pulsewidth(7, 1500) # GPIO7にパルス幅1500を設定
```

これだけで済みます。~~突貫工事にはもってこい~~
実際には事前にコンソールにて`sudo pigpiod`を実行しなければならない点に注意が必要。

またI2CやSPIにも対応しているようなので、いつものように備忘録としてここに残します。

# 本題

下記のpigpioのライブラリを読み、実際のセンサに当てはめながら説明して行きます。
- [pigpio library](http://abyz.me.uk/rpi/pigpio/python.html)
ちなみに全て英語で記述されているので、細かい部分に関しては読み飛ばしています。~~英語力のなさ~~

## 使用するセンサについて

- [シャープ測距モジュール GP2Y0E03(I2C&アナログ)](http://akizukidenshi.com/catalog/g/gI-07547/)

このセンサは直線性に優れており、測定可能範囲は実測で2-60cm程度。お値段は少し高めだけど、なかなか精度がいいので重宝してます。3月26日現在在庫切れの状況。

## プログラム

```gp2y0e03.py
import pigpio

ADDRESS = 0x40 # センサ固有のアドレス
# 確認には sudo i2cdetect -y 1 を実行

REGISTER = 0x81 # 要データシート
# 今回使用したセンサの場合はアプリケーションノートの
# Register Mapに記載されている。Slave ID(read cycle)

BYTE = 2 # 距離データが格納されているbyte数
# 詳しくはRegister Map参照
pi = pigpio.pi()
sensor = pi.i2c_open(1, ADDRESS) 
b, d = pi.i2c_read_i2c_block_data(sensor, REGISTER, BYTE)
ans = ((d[0]*16+d[1]) / 16) / 4 # ここの計算式も同様にRegister Map参照
print("%f cm" % ans) 
```

所々の説明はコメントにて記述していますが、全体的に非常に短いコードでI2Cができていることがわかります。
今回使用したセンサ以外にもADDRESSやREGISTER, BYTE等を書き換えることによって簡単に通信を行うことができるので今後はこちらのライブラリを使って行きたいと思います。
最新版のRaspbianだとデフォルトでインストールされているみたいですし…。
RMagick 使うと Unresolved Ruby reference の warning が RubyMine で出まくるのをなんとかしたい、けどできない

# このドキュメントについて
Ruby開発環境にRubyMine使おうととりあえず入れてみていろいろ確認中、 「Code > Inspect Code」 から静的解析を実行したら "Unresolved Ruby reference" がたくさん出て困った時のメモ :pencil: 

## 原因と解決方法
* 対象のメソッドがRubyの拡張ライブラリで実装されているので警告出ちゃう
* 解決できない。。。 :cry: 

# 現象
rmagick 使っててその関係のオブジェクトのメソッド等は全部出てる感じ。以下のコードの `font` `pointsize` `get_multiline_type_metrics` の全部に警告出る。なんで？

```test.rb
    draw = Magick::Draw.new
    draw.font = font
    draw.pointsize = size
    metrics = draw.get_multiline_type_metrics(message)
```

# 調査中
## RMagickの実装をみる

実装を確認↓したけど `get_multiline_type_metrics`　が定義されてない。拡張ライブラリとして実装されているっぽい。

```magick_internal.rb
  class Draw
    # Thse hashes are used to map Magick constant
    # values to the strings used in the primitives.
    ALIGN_TYPE_NAMES = {
      LeftAlign.to_i => 'left',
      RightAlign.to_i => 'right',
      CenterAlign.to_i => 'center'
    }.freeze

.... 省略
```

確かに実装されてた。

```rmmain.c
rb_define_method(Class_Draw, "get_type_metrics", Draw_get_type_metrics, -1);
rb_define_method(Class_Draw, "get_multiline_type_metrics", Draw_get_multiline_type_metrics, -1);
```
[fabric] Download problem detected :(

> このエラーが出る理由として、

> アップロードされているアプリ自体が悪い場合
古いアプリが邪魔してインストールできない場合
Fabric（Crashlytics beta）の調子が悪い場合
の３種があります。そのため、

> 他からインストールした同名の古いアプリがある場合は、それを削除する
しばらく待ってからリトライする

https://qiita.com/tokorom/items/93d1b64e9a0306cb4ff5#download-problem-detected

上記を試したり色々やったあと、、iphoneを再起動したら治ったケースがあったので参考までに
EC2 cronでreboot時にnodejs foreverを起動する

パスが通ってない状態から呼び出すので
なぜか情報も少ないしいつもよくわかんなくなってごちゃごちゃします。

OS : Amazon Linux release 2 (2017.12) LTS Release Candidate

# インストール場所を確認する

```sh
whereis git
git: /usr/bin/git /usr/share/man/man1/git.1.gz

whereis node
node: /home/ec2-user/.nvm/versions/node/v8.9.4/bin/node

whereis gulp
gulp: /home/ec2-user/.nvm/versions/node/v8.9.4/bin/gulp

whereis forever
forever: /home/ec2-user/.nvm/versions/node/v8.9.4/bin/forever
```

# gitからコードを持ってくる
```sh
cd /home/ec2-user/someApp/;
/usr/bin/git pull;
```

# globalのパッケージもnodeから呼び出す。これ大事
```sh
/home/ec2-user/.nvm/versions/node/v8.9.4/bin/node /home/ec2-user/.nvm/versions/node/v8.9.4/bin/gulp build;
/home/ec2-user/.nvm/versions/node/v8.9.4/bin/node /home/ec2-user/.nvm/versions/node/v8.9.4/bin/forever start /home/ec2-user/someApp/dist/child.js;
```
[babel](https://babeljs.io/)使ってるのでgulp buildが入り実行がsomeApp/dist/child.jsになってます。

#start.shとかに書いてcronから実行
```sh
crontab -e
@reboot /home/ec2-user/start.sh
```
Google Drive > 3rd パーティへのRealtime API capabilities の停止 (2018-12-11)

2018年3月現在、Mindmupというツールを使い作ったファイルはGoogle Driveに保存している。

Mindmupのforumを見ていて以下の投稿が気になった。

> Important information for people who use MindMup with Google Drive
https://groups.google.com/forum/#!topic/mindmup2/zmx9Z9yDoWI

> Google plans to stop providing the Realtime API capabilities for 
Google Drive files to third parties (such as MindMup). The change will 
take effect from December 11th 2018, according to their announcement. 

関連記事は以下のようだ。
https://gsuiteupdates.googleblog.com/2017/11/committed-to-storage-apis-retiring.html

> Existing Realtime API client applications will continue to work normally until December 11, 2018, but we are no longer accepting new clients of the API. After the API is decommissioned, to facilitate migration, we will continue to provide a mechanism for applications to access document contents as JSON.

2018年12月11日にRealtime APIが廃止になった時点でこれまでの作業ができなくなるようだ。

draw.ioもだめかもしれない。


### link

https://www.mindmup.com/resources/google_realtime_deprecation.html
Bitcoin開発のロードマップ（WIP）

この記事は[Roadmap to Bitcoin Developments](https://medium.com/@ianedws/roadmap-to-bitcoin-developments-f7af59b6d122)を読んで簡潔にまとめます。

随時更新予定()

## はじめに

Bitcoin はまだ発展途上の技術で、スケーラビリティや匿名性など、改善の余地は十分にある。Bitcoin改善のために提案・開発されている技術についてまとめてみる。

## Lightning Network

トランザクションをまとめて記録するペイメントチャネルを、P2Pネットワーク化して任意のノードとやりとりできるようにしようという試み。すでにmainnetでベータ版が動いている。

- lnd
- c-lightning
- eclair

など複数の実装がある。これらはBOLTという規約に基づいて実装されており（またはされるべき）、互換性がある（べき）。

## Schnorr署名

複数の署名を一つにまとめることで、トランザクションサイズの縮小や攻撃者がスパムトランザクションを作成しにくくしたり、プライバシーを高めることができる。シュノア署名のBitcoinへの実装は難しいようで、[数年はかかる](https://www.coindesk.com/schnorr-signatures-explained-bitcoin-tech/)そうです。

理論については[こちら](https://blog.visvirial.com/articles/721#i-9)が詳しい。

## Bulletproofs

Bulletproofsはプライバシーを改善する案で、送信者と受診者のアドレスはパブリックにしたまま、送金量を秘匿する。あまり詳しく調べてはいないが、ゼロ知識証明の一種だそう。

Blockstreamの開発者Pieter Wuille によると、Bulletproofsはまだ未熟な技術ですぐにはBitcoinに取り込まれることはないだろう、とのこと。

## Confidential Transactions

送金量を、関係者にのみ閲覧できるようにする技術。準同型暗号を利用して実現される。くわしくは、[こちら](http://techmedia-think.hatenablog.com/entry/2015/12/31/002253)。

BlockstreamのElementsプロジェクトではすでに実装されているが、メインネットへの追加時期は未定。

## Sidechain

文字通り、Bitcoin の側鎖としてメインのチェーンと関連付けられた別のブロックチェーンをつくり、代わりにそのチェーンでトランザクションの処理などを行うアイディア。いくつかの提案がされている（Drivechain, RSK, Liquid Network）。

## Drivechain

## Mimblewimble

Blockstreamの開発者にある日突然onionドメインのリンクが送られてきてそこにmimblewimble論文があったとかいう中二病感満載のストーリーがある。

楕円曲線暗号をふんだんに使った理論だった気がする（うろ覚え）。
詳しくは[こちら](https://github.com/ignopeverell/grin/blob/master/doc/intro.md)
マイニングアルゴリズムも異なるっぽい。

[Githubのリポジトリはこちら](https://github.com/ignopeverell/grin)


## Taproot/Graftroot


## まとめ

これらは互いに互換性がないものがあったりするので、ぜんぶが実装されうるわけではない。
これからも情報を追ったり、実装してみたりしてみたいですね。
iPhoneからCharlesを使ってMacで立てたlocalホストにアクセスする

Webアプリケーションを開発/テストしている際に、PCのブラウザとiPhoneのブラウザでは挙動が異なることがある。

ローカルで修正した箇所をiPhoneで正常に動作しているか確認するためにも、一度テスト用Webサーバーにデプロイしなければいけないという手間も発生する。iPhoneからLocalホストに繋ぐことができればこういったデプロイの手間を省くことができる。

またこの方法を用いることでiPhoneからの通信キャプチャも可能だ。

Windowsで立てたLocalホストに接続するにはFiddlerが便利だが、その方法については[iPhone から開発マシンの localhost にアクセスする（Windows）](https://qiita.com/hikoma/items/2c983a521ba2dae5972b)を参考にしていただきたい。

## Charlesの設定  

1. Charlesのインストール
Charlesのインストールは[こちら](https://www.charlesproxy.com/)から。
無料版も30分で強制的にアプリが再起動されるが、気にせず使える。  

2. Charlesでポートの確認/設定する
Proxy -> Proxy Settingsを開き、portを8888に設定。  
![image.png](https://qiita-image-store.s3.amazonaws.com/0/237130/16dfbb29-5ace-565b-23b7-b266a89204e6.png)
![Screen Shot 2018-03-25 at 22.16.50.png](https://qiita-image-store.s3.amazonaws.com/0/237130/cafcff1b-bf43-ac95-e0ef-86e1ae8864c3.png)


## iPhoneの設定  

1. 開発マシンのIPアドレス確認
![Network_and_Charles_4_0_2_-_Session_1__.png](https://qiita-image-store.s3.amazonaws.com/0/237130/ac782528-5a50-5af0-b4af-026d7216625d.png)

2. iPhoneでプロキシを構成
接続しているWifiの設定(iボタン)から「プロキシを構成」を選び、「手動」を選択するとサーバー・ポートが設定できるようになるので以下のように値を入力する。  
<img width="375" alt="IMG_3680.png" src="https://qiita-image-store.s3.amazonaws.com/0/237130/b28bad90-4eb1-5c64-1f2f-10d49954c4a0.png">  

3. 接続の確認
iPhoneでブラウザを開いた際にCharlesで通信をキャプチャできていれば、接続は成功である。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/237130/d5521dd1-a79f-0b4d-c497-37364aa259cb.png)


## localhostへの接続  
あとはPCと同じように使用したいブラウザのURL入力欄で`http://localhost.:{Localサーバーのポート番号}`と入力すれば完了
<img width="375" alt="IMG_663C99603608-1.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/237130/24bb4099-17db-4f5a-83a8-2898204d90e7.jpeg">
gitマージ確認について

今更ながら備忘録。

ローカルにチェックアウトしたブランチだけでなく、
マージされたかブランチ名を指定すれば[branchname]に[targetBranchName]がマージされているか確認できる。

```
###[targetBranchName]が[branchname]にマージされているか
#単一検索
git branch -r --merged [branchname] | grep [targetBranchName]
#複数検索
git branch -r --merged [branchname] | grep -e [targetBranchName1] -e [targetBranchName2]

###[targetBranchName]が[branchname]にマージされていないか
git branch -r --no-merged [branchname] | grep [targetBranchName]
#複数検索
```
HTMLでアニメーションを作ろう!! 文系学生がやってみた!!

##はじめに
インターン先でプログラミングを勉強中の文系学生。
アニメーション作りたくなったから作る。

##HTMLを選んだ理由
まぁ、やりたいと思ってできるなら何事も苦労はない。
アニメーションに関する知識もプログラミングに関する知識も素人に毛が生えた程度。
そんな奴がアニメーションを作れるかい。

でも、幸いなことに俺は環境に恵まれていた。
インターン先の社員さんに聞いてみた。
そしたら、「HTMLで作ってみたら?」とのこと。

え? 作れるの?

##HTMLの復習
さすがに俺もHTMLは触りましたよ。
簡単なページですけれどね。

…まぁ、アニメーションを作る前に、簡単に復習でもしておこうかな。

[Introduction to HTML](https://www.w3schools.com/html/html_intro.asp)を眺めて、タグを思い出そう。

##アニメーションの作り方を教えてくれるサイト
さすがに仕事をしている社員さんにアニメーションの作り方を聞けるほどの肝の太さはない。
昼休みでもオススメのサイトを教えてもらうか。

ということで教えてもらったのが、[HTML5 tutorial](https://physics.weber.edu/schroeder/html5/)。
全部英語だけど、Chromeなら右クリックで日本語に翻訳してもらえる。
これに沿って進めていけば、大丈夫そう。

##まとめ
まぁ、さすがに一から成果物を作れるほどの時間はなかった。
でも、こういうことができるってのは知れてよかったな。
夏休みにでも簡単なの作ってみようかな。
目指せFL〇SH動画!!

##参考サイト
[Introduction to HTML](https://www.w3schools.com/html/html_intro.asp)-https://www.w3schools.com/html/html_intro.asp
[HTML5 tutorial](https://physics.weber.edu/schroeder/html5/)-https://physics.weber.edu/schroeder/html5/
MindMup 2 > 印刷時に読めなくなる色 (Map theme=Standard) | RGBとCMYKの問題?

```txt:動作環境
Windows 10 Pro (64bit) Fall Creators Update適用済
Google Chrome バージョン: 65.0.3325.181（Official Build） （64 ビット）
```

Mindmupにて作成したRTOSのタスク動作の資料を印刷すると、ノードの背景色と文字色の設定が悪く可読性が悪い資料になった。

この問題は以前から気づいていたが放置していた。
整理してみる。

2018年3月26日現在、下記の文字を入れていない背景色では文字と背景色の色相?が近いためか可読性が悪い。
(色の並びはChange node colorで表示される色の順番)
(Map themeはStandard)

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/63573e0a-a112-ac0e-b218-fc9090dacb32.png)

ルートノード?のデフォルト色も可読性が悪い。似たような色としては3行目の右から2つ目あたりを使うのが良さそう。

### 問題の理由
(追記: 2019-04-24)

Qiitadonで聞いたところをまとめると、RGBの記事がCMYKで印刷される時に不具合がでているようです。
それを回避する方法は探したところ、簡単なものは見つかっていない。
ご注文はHOMEに帰らないcdですか？

bash改造記事第2回です。
[前回の記事：ご注文はcdしたらlsですか？](https://qiita.com/Riliumph/items/b3feef31149358e8b63b)

仕事で扱うリポジトリは十数GBぐらいあるんですけど、
私の所属するチームはその一角のモジュールを担当しています。

結構深いところで作業するんですけど、間違ってcdコマンドを**引数なしで実行したらホームディレクトリまで戻りやがった**んです。

また、えっちらおっちらと慣れていないディレクトリを戻るハメになったわけです(´･_･`)ﾌｧｯｷｭ-

>まぁ、`cd -`ってしてやれば、$OLDPWDっていう環境変数に記録されている「一つ前」のパスに戻れるんですけど。
一個前にしか戻れないってのがまた(´･_･`)ﾊｧ
それはおいおい改善していく予定です。

行き先を指定してないのに勝手に移動してほしくないわけですよ。
行き先の指定が無かったら「どこいけばいいのん？」とエラーにしてほしいわけです。
ということで、そこら辺をやっていきます。

# TL;DR;

僕のbash設定は、もう改造に改造を重ねてこんな簡単なbashではなくなりました。
気になる人は読んで見てください。

気が向いたら解説記事でも書きます。

[bash設定](https://github.com/Riliumph/bash)

# 第2羽「初めて引数なし実行した日の事憶えてる？」

憶えてるよ……勝手にホームまで戻りやがって。

前回はcdコマンドを自作関数でaliasしたので、関数の引数がどうなってるか判断してみましょう。

bashには特殊な変数が用意されています。
そういや、前回`$@`つかったけど無視しましたね……

|特殊な変数|意味|
|:-------:|:---|
|`$0`|シェルスクリプトのファイル名|
|`$n`|第n引数の値|
|`$#`|シェル引数の数|
|`$*`|全引数リスト。"`$*`"のようにダブルクオートで囲むと、"`$1 $2 … $n`"形式|
|`$@`|全引数リスト。"`$@`"のようにダブルクオートで囲むと、"`$1`" "`$2`" … "`$n`"形式|
|`$$`|実行中のシェルのプロセスID|
|`$?`|最後に実行したコマンドの終了ステータス。戻り値？|
|`$-`|シェルの実行オプション。shebangとかを取ってこれる|
|`$!`|シェルが最後に実行したバックグラウンドプロセスのPID|

この中の関数の引数を管理している`$#`を使ってみましょう。


```bash:.bash_aliases
function custom_cd()
{
  if [ $# -lt 1 ]; then
    echo 'No destination!!'
    return 1
  fi
  \cd $@ && clear && ls
}

alias cd='custom_cd'
```

引数の数が1より少なかったら「宛先が無いよ！」と怒ります。
怒るので、エラーでも返しておきましょうか。
２つ以上の場合はcdコマンド内でエラーにしてくれるはずなので何もしないです。

引数がマイナスになるなんてことないので、引数が０個という判断でもいいんじゃないですかね。

## bashのif文はtestコマンド
bashのif文は`[`がコマンドになっていて、testコマンドと同じように動きます。
そこら辺が気になる人は[この記事](https://qiita.com/Riliumph/items/f07272fa9b0834032a9d)見てね

でも、今回そこはどうでもいいんですよ。

重要なのは、**このtestコマンドは比較演算子とか使えないこと**なんですよ。
**<font color=red>コマンドオプションで動きを制御します。</font>**
こんな感じ。

|条件式|他言語相当|意味|
|:---:|:---:|---|
|-eq|==|等しい(equal)を意味する|
|-lt|<|未満(lesser than)を意味する|
|-le|<=|以下(lesser than or equal)を意味する|
|-gt|>|超(greater than)を意味する|
|-ge|>=|以上(greater than or equal)を意味する|

文字列比較では-eqを使わないとか色々と落とし穴があるんですけど……
まぁ、ググったら一括で記事にしてくれてたりするんで大丈夫でしょう。

#まとめ
~~Mac（というかBSD？）のcdコマンドは引数０個の実行してもお家に帰らないらしいです。~~
Mac持ってないので知らないんですけど(´･_･`)
> **stmkzaさんのコメント**
> Macでの挙動を調べてくださいました。
> どうやらMacでもホームディレクトリに帰ってしまうようです。


私はそっちの動きの方が好みだったのでスクリプトで対応してみました。

今回は、これにて終わりです。

[次の記事：ご注文は親ディレクトリに戻ることですか？](https://qiita.com/Riliumph/items/48f7e84211db188048f8)
WooCommerceのアンインストール方法

# やりかた
順番を間違えるとデータが消えません。

## 1. wp-config.phpの編集

プラグインを有効にしたままの状態で、
wp-config.phpの最後の方に追記します。
``/* 編集が必要なのはここまでです(略) */`` の前。

```php:wp-config.php
define('WC_REMOVE_ALL_DATA',true);
```

## 2 プラグインの停止→削除

管理画面->プラグイン->インストール済みプラグイン
WooCommerceの停止→削除

これで綺麗さっぱり消えます。
消えなければ、wp-config.phpを見直し、
再インストール→有効化→停止→削除

## 参考
[公式マニュアル](https://docs.woocommerce.com/document/installing-uninstalling-woocommerce/)
webpack: ベータ版の@babel/preset-envの設定でつまづいたのでメモ

#webpack: ベータ版の@babel/preset-envの設定でつまづいたのでメモ


babel-preset-envの最新(ベータ版)を使えば
必要な箇所だけpolifillしてくれるらしいのreactの環境で試してみた
ら、ちょっとつまづいたのでメモ

参考記事:[babel-preset-env 2.0のuseBuiltInsを使ってpolyfillする](https://qiita.com/shisama/items/88080011bbc69e3e620b)
参考記事:[babel-polyfillとbabel-runtimeの使い分けに迷ったので調べた](https://qiita.com/terrierscript/items/d2a9d5d4daedaacff924)


## なにはともあれインストール

[babel-loader 公式github](https://github.com/babel/babel-loader)

```javascript

yarn add babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack --dev
```
※ preset-reactは入っている前提

##webpack.config.js　修正
- webpack.config.jsのenvを最新のものに切り替える
- `useBuiltIns`オプション追加

```javascript:変更前
module: {
    rules:[
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: [
                {
                    loader: 'babel-loader',
                    options:  {
                      presets: ['react','env']
                    }
                }
            ]
        }
    ]
}
```

```javascript:変更後
module: {
    rules:[
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: [
                {
                    loader: 'babel-loader',
                    options:  {
                    presets: [
                        ['react'],
                        ['@babel/env',
                            {
                                "targets": {
                                    "ie": 11
                                },
                                // polyfillを自動でインポート
                                "useBuiltIns": "usage"
                            }
                        ]
                     ]
                    }
                }
            ]
        }
    ]
}
```

この内容でビルドすると次のエラーがでる

<font color="Red">
ERROR in ./src/App.js
Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions ...
</font>

<img width="1028" alt="スクリーンショット 2018-03-26 15.09.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/115192/b8a601fa-c342-dfe3-c532-09298f683834.png">


別に難しいことではなく`babel-preset-react`も最新のベータ版使えよって話

## @babel/preset-react インストール

```

yarn add @babel/preset-react --dev
```


```javascript:最終
module: {
    rules:[
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: [
                {
                    loader: 'babel-loader',
                    options:  {
                        presets: [
                            ['@babel/react'],
                            ['@babel/env',
                                {
                                    "targets": {
                                        "ie": 11
                                    },
                                    "useBuiltIns": "usage"
                                }
                            ]
                        ]
                    }
                }
            ]
        }
    ]
}
```

メモ書き程度の記事だから作るほどでもなかったかもしれん
同じところでつまづいた人の探す手間が省けれればいいなって感じ

<!--
最近 qiitaに投稿するの怖い
ポエム記事なのかもとビクビクしてる
-->
プログラマーに必須のデータ構造!! 文系学生が勉強してみた!!

##はじめに
インターン先でプログラミングを勉強中の文系学生。

「アルゴリズムを勉強したなら、ついででデータ構造も勉強しとき」

そんなついでで勉強できる量ではないと思うんですが…

##データ構造とは
まぁ、まずはデータ構造の概要を知ろう。
アルゴリズムを勉強する際に使った[一週間で身につくアルゴリズムとデータ構造](http://sevendays-study.com/algorithm/pr-day3.html)には、

>大量のデータを効率よく管理する仕組み

って書いてあったな。
でも、これ以上の説明はできないよね。
データは種類によって異なるけれど、それらをいかに運用するかが大切なんだよね。
認識としては、これで十分でしょ。

社員さんから教材として、[データ構造](https://www.codereading.com/algo_and_ds/ds/)を教えてもらえたことだし、詳しく見ていくか。

##線形のデータ構造

###リスト(配列)
まぁ、これは名前からでもわかるな。
データが順番に並べられたデータ構造だよね。
いつもPHPを使っているから、配列と同じような認識で良いのかな。
リストにはデータごとに順序番号(インデックス)が付けられているらしいけど、要するに添え字か。

勉強していくと、リストと配列は実際には違うらしい。
リストは要素の数やデータの形が自由だけれど、配列はそうはいかない。
具体的なイメージはつかめないけれど、覚えておいたほうが良いよね。

###スタック
最後に入れたデータが最初に出ていくデータ構造。
テキストエディタとかの*元に戻す*とかに使われているみたい。
実家の新聞入れをイメージするのが適当かな。
あれは取り出すことはほとんどなかったけど、取り出すとなれば上からだよね。
つまり、後から入れたものから先にでていくということか。

データを挿入(重ねる)する操作は**Push**,
データを削除する(取り出す)操作は**Pop**,
データの頂上(一番上)は**Top**,
データの底辺(一番下)は**Bottom**

これは覚えておいたほうが良いね。

###キュー
キューは先に入れたものから先に出てくる仕組みらしい。
料金所とかをイメージするのが良さそうだね。

###連想配列(辞書、マップ)
連想配列は、キーと値を関連付けてデータを保持するデータ構造。
指定されたキーを入力されたときに、値を早く見つけ出せるようにしているのか。
学生番号とかに使われているのかね?

###連結リスト
リストの要素が次のリストに繋がるリンクを持っているデータ構造。

リンクが次につながる1つだけなら**単方向リスト**,
リンクが前後の双方で持っているなら**双方向リスト**,
最後のリストが持っているリンクが最初のリストの物なら**循環リスト**

リストは順番にしかたどっていけないらしいけど、データの変更をする時は入れ替えたり、詰めたりするのが便利らしい。
たしかに後ろのリストや要素をずらす必要がないのは便利か。

リストの種類を詳しく見ていこう。

####単方向リスト
それぞれの要素は1つのリンクを持ち、そのリンクは次のリストを示す。
最後のリンクに書かれるnullは終端を表す。

####双方向リスト
それぞれの要素が前後の要素を示すリンクを持っているデータ構造。
先端と終端を繋げるリンクがあれば循環リスト。

####循環リスト
単方向リストの最後に書かれるはずのnullが先頭のリンクになっているのが、循環リスト。
最後のリストになっても最初の留守とに戻っているため、環状に並んだデータ構造となる。


##グラフデータ構造

###ツリー
ノードをリンクさせて階層構造を表現したのが**ツリー**。
ノードは0個以上の子ノードを持っており、子ノードを持つノードが**親ノード**と呼ばれるらしい。
ツリーの頂上にあるノードは**ルートノード**。
子ノードを持たないノードは**リーフノード**と呼ばれるのか。

ツリーには**順序木**と**無順序木**の2種類があって、
**順序木**は親ノードと子ノードに順序、関連があるツリー。
**無順序木**は親ノード、子ノードに関連がなく、無造作に構成されたツリー。

###バイナリーツリー(二分木)
各ノードが最大で2つの子ノードしか持たないツリー構造。
子ノードは、左の子ノード、右の子ノードとして区別されるようにできている。
1つしか子ノードがなくても、必ず右か左に配置される。

###バイナリ―サーチツリー(二分探索木)
各ノードに値やデータを持たせて、探索を簡単にするバイナリーツリーのこと。
ノードの挿入に法則があり、*ノードの値Xに対して、左に含まれるノードの値はXより小さく、右に含まれるノードの値はXより大きくなる*というもの。
つまり、**左のノード<ノードX<子ノード**。
「値の小さいノードを左に置こう」という話ではなく、「値の大小でノードの位置を決めよう」というものか。
同じ値、データの挿入は許可されていないらしいけど、そういう法則があればそうなるか。。


###バランスドツリー(平衡木)
ルートノード(一番上)からリーフノード(一番下)の距離(高さ)を等しくしたツリー。
距離を等しくすることで、探索にかかる計算量が少なくする目的。
探索の際、ルートノードからリーフノードに向かって検索が行われていく。
バイナリ―サーチツリーでは、片方にのみツリーが伸びることもあるらしい。
そうなれば、せっかくの法則も効率が悪くなっていくよね。
それらを解消するために考えられたのがバランスドツリー。
ノードが削除、挿入されるたびに、ツリーを再構築して、高さをバランスよく保つようになっている。

###ヒープ
*親ノードは子ノードよりも小さいか、等しい*という条件を満たすツリー構造。または、*親ノードは子ノードよりも大きいか、等しい*ツリー構造。
親子間のノードにはこのような制約があるけど、子ノード間にはないみたい。

単に「ヒープ」と呼ばれる場合、バイナリツリーとして構成されるバイナリヒープを指すことが多いらしい。
豆知識(?)として覚えておこう。

##まとめ
今回はデータ構造を勉強しました!!
ツリーやノードってディレクトリとは違うのかね?
そこら辺を詳しく調べてみようっと。


##参考資料
[一週間で身につくアルゴリズムとデータ構造](http://sevendays-study.com/algorithm/pr-day3.html)-http://sevendays-study.com/algorithm/pr-day3.html
[データ構造](https://www.codereading.com/algo_and_ds/ds/)-https://www.codereading.com/algo_and_ds/ds/
Pythonでファイルのコピー、リネーム、サーバへのアップロードを行う

日に何度も繰り返しているローカルでビルドしたファイルのテストサーバーへのアップロードの一連の処理をPythonを使って自動化してみた。

## 環境
- macOS HighSierra 10.13.3
- Python3.6.4

## やりたい事
1. ファイルの確認
1. ファイルのコピー
1. ファイル名の変更
1. テストサーバーへのファイルのアップロード

## ファイルの確認
処理を実行する前に対象となるファイルの存在を確認する。

### [os.path.isfile()](https://docs.python.jp/3/library/os.path.html#os.path.isfile)
指定のパスのファイルが存在すればtrueを返す

```python

import os
src = './app.war'
if os.path.isfile(src):
```

## ファイルのコピー
ファイルの存在が確認出来たらファイルをコピーする。
### [shutil.copy()](https://docs.python.jp/3/library/shutil.html?highlight=shutil%20copy#shutil.copy)
ファイルをコピーする

```python
import shutil
src = './app.war'
copy = './dest/app.war'
shutil.copyfile(src,copy)
```
## ファイル名の変更
テストサーバーの環境に合わせてファイル名を変更する。

### [os.rename()](https://docs.python.jp/3/library/os.html?highlight=os%20rename#os.rename)
ファイル名を変更する

```python
import os
copy = './dest/app.war'
dest = "./dest/change.war"
os.rename(copy,dest)
```
ただしshutil.copy()の実行時に出力先のpathを変更後のファイル名にしておけばリネームも同時に行ってくれる。

```python
import shutil
src = './app.war'
dest = "./dest/change.war"
shutil.copy(src,dest)
```

[参照: [Python]ファイル/ディレクトリ操作/Qiita](https://qiita.com/supersaiakujin/items/12451cd2b8315fe7d054)

## テストサーバーへファイルをアップロード
[Paramiko](https://github.com/paramiko/paramiko)を使いsftpでテストサーバーへファイルをアップロードする。
### Paramiko
SSHv2プロトコルライブラリ

#### インストール
```bash
$ pip install paramiko
```

#### sftpによるアップロード
```python
import paramiko

dest = './dest/change.war'

HOST = 'testserver.com'
PORT = 22
USER = 'user'
KEY = 'private/key/path'

client = paramiko.SSHClient()
client.set_missing_host_key_policy(paramiko.AutoAddPolicy)

client.connect(HOST,PORT,USER,key_filename=KEY)
sftp = client.open_sftp()
sftp.put(dest,'remote/path')

sftp.close()
client.close()
```
## コード全文
```python:upload.py
import os
import shutil
import paramiko

src = './app.war'
copy = './dest/app.war'
dest = './dest/change.war'

if os.path.isfile(src):
  shutil.copyfile(src,copy)
  os.rename(copy,dest)

  HOST = 'testserver.com'
  PORT = 22
  USER = 'user'
  KEY = 'private/key/path'

  client = paramiko.SSHClient()
  client.set_missing_host_key_policy(paramiko.AutoAddPolicy)

  client.connect(HOST, PORT, USER, key_filename=KEY)
  sftp = client.open_sftp()
  sftp.put(dest,'remote/path')

  sftp.close()
  client.close()
```

upload.py作成後はアップロード時にファイルを実行するだけで済む

```bash
$ python3 upload.py
```
## その他の手段
subprocessモジュールを使えばPythonでコマンドを実行する事が出来るので同様の処理が行える。

```python:app.py
import subprocess
src = './app.war'
copy = './dest/app.war'
subprocess.run(["cp",src,copy])
```
あれこれ調べずにとにかくコマンドが実行出来るのでいざという時便利かもしれない。

[参照: submodule/docs.python](https://docs.python.jp/3/library/subprocess.html#module-subprocess)
DjangoでrunserverしたらImportError: cannot import name includeが出た。

以下のページを参考にやっている途中にimporterrorが出て3時間くらい原因がわからず詰まったので、メモ。
https://docs.djangoproject.com/ja/2.0/intro/tutorial01/　「はじめてのDjangoアプリ作成」

環境　
OS Linux ubuntu
python2 2.7.6
python3 3.4.3
Django 1.11.11

vagrant Virtualbox 
mobaxtermを使用。

URLを書いた後に、以下のコマンドをうって立ち上げたところ
$ python manage.py runserver 0.0.0.0:8000
以下のようなエラーが出ました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235742/63700698-9e04-44d4-8579-
210b69f72eb9.png)

結論：pythonとDjangoのバージョンが違った（？）みたい。

解決方法
①まず、Djangoのアップデートをします。
$pip3 install Django-U
（ちなみに私はpip3がないよーってエラーが出ました。でなかったらこのまま進んで大丈夫
出た場合は、
$sudo apt-get install python3-pip
の後に
$sudo pip3 install Django-Uを打てば大丈夫です。）

②runserverするときにpythonのバージョンを指定してあげる。
$python3 manage.py runserver　0.0.0.0:8000

動いたー！
Djangoの古いバージョンだとサポートしてない書き方がコード内にあったみたいです。