OmniAICreator/Qiita-1.07M huggingface dataset:
なぜアジャイル宣言が誕生したのか？何を変えようとしているのか？

# これは何？

- これは、「アジャイル宣言」について自分の言葉でまとめたもので、３つのうちの１つです。
  - その１）[「アジャイル宣言とは？新しい価値観の提示 - Qiita」](https://qiita.com/gounx2/items/3efc7ddb7a8bc892bf50)
  - その２）[「アジャイル宣言を理解すると、何が美味しいの？ - Qiita」](https://qiita.com/gounx2/items/5bb0972234009bd46e0a)
  - その３）「なぜアジャイル宣言が誕生したのか？何を変えようとしているのか？」（本記事）
- その１）２）３）の順に読むことを想定していますが、それぞれ単独でも読めます。
- なお、この文書での「アジャイル宣言」とは以下の２つの原文を指します。
  - [『アジャイルソフトウェア開発宣言』](http://agilemanifesto.org/iso/ja/manifesto.html)の原文
  - [『アジャイル宣言の背後にある原則』](http://agilemanifesto.org/iso/ja/principles.html)原文

# はじめに ～ アジャイル宣言は、不親切で難しい？

アジャイル宣言そのものには、具体的な開発手法/技術についての言及はありません。
これはつまり『アジャイル宣言で「何が大切か？(新しい価値観)」は伝えたのだから、具体的にどうするか？(開発手法やどんな技術を使うか)については自分たちで考えなさい』ということです。

- これって不親切で、難しいことを言ってるように思いませんか？

- 「そんな意地悪しないで、もっと具体的(どんなツール使えばいいの？どんなコミュニケーション手段をとるのがいいの？など)に教えてよ！」と思いますよね。

- なぜ『具体的な開発手法/技術を示さなかったのでしょう？』

- 実は『開発手法/技術を書いてしまうと、アジャイル "宣言" ではなくなってしまうので、書けなかったんです』

- 「え？どういうこと？」と思いました？

- 順を追って説明してみます。

# アジャイル宣言は、なぜ誕生した？

なぜ『アジャイル宣言に、具体的な開発手法/技術が書かれなかったのか？』
それは、アジャイル宣言が誕生した経緯を振り返ることで見えてきます。

- １）近年、世の中の変化のスピードが増した結果、今までの『開発手法/技術』で成果を出すことが難しくなってきた。
- ２）しかしながら、新しい『開発手法/技術』を考えたとしても、世の中の変化によって、すぐにその手法/技術は陳腐化してしまう。
- ３）だから、新たな『開発手法/技術』を＊＊探求し続けなければならない。＊＊
- ４）「そうだ！新たな開発手法/技術をどういう基準で取り入れるべきか？」をまとめよう！そして「これをチームの行動理念として実践しよう！」

つまり『これを大切にすれば(新しい価値観＝開発手法/技術の選定基準)、今の時代にマッチしたソフトウェア開発ができるのでは？」をまとめたものが「アジャイル宣言、及び、アジャイル宣言の背後にある原則」なのです。

# アジャイル宣言は、何を変えようとしているのか？

アジャイル宣言は、新しい価値観への転換を促しています。

- 「特定の開発手法/技術だけでは、世の中の変化と戦うことができなくなった」という現実を受け入れ、

- 「世の中の激しい変化にさらされても、使う開発手法/技術を素早く柔軟に変え続けることで、成果を出し続けるぞ！」という宣言

**ここで、勘違いしてほしくないのですが『これまでの開発手法/技術がダメだ』と言う意味ではありません。『これまでの開発手法/技術が通用する場面は今もたくさんある』と思います。アジャイル宣言の本質から考えると『これまでの開発手法/技術、新しい開発手法/技術、＊＊この全部＊＊を選択肢として、自分たちの状況に合うものを選ぶことができる』ということに意味があるんだと思います。**

# まとめ

- 近年の世の中の激しい変化についてゆくために、開発手法/技術を１つに絞り込むことをあきらめた。

- 代わりに「開発手法/技術を柔軟に変える為には何が大切か？(新しい価値観＝開発手法/技術の選定基準)」をまとめた。

- これがアジャイル "宣言" である理由（＝具体的な開発手法/技術が書かれていない理由）です。

- ちなみに、この文章での「具体的な開発手法/技術」のことは、一般的には「プラクティス」と呼ばれているものです。

- 「これをやってればいいよ！」だったのが、「常に良いやりかたを考えてやってね！」が求められるようになったので、本当の意味での実践は大変そう。。

- 妄想ですが「アジャイルやってます？」「はい。やってますよ」「スクラムですか？」「ウォーターフォールです！」って言いきれたらすごくカッコいいのかも？
G Suiteで会社の共有メールアドレス（info@とかsupport@とか）を作る


（2018/11/14 現在の仕様）

どこにもマニュアルを見つけられなかったのでメモ。

・
・
・

① グループを作成

![Google_グループ.jpg](https://qiita-image-store.s3.amazonaws.com/0/82372/d101ddc6-2369-c5c9-f184-19d3e2612e01.jpeg "Google_グループ.jpg")


② 以下の３ヶ所を入力・編集

![グループを作成_-_Google_グループ.jpg](https://qiita-image-store.s3.amazonaws.com/0/82372/4404c921-7277-bbe4-f833-c1ed3827bde4.jpeg "グループを作成_-_Google_グループ.jpg")


③ 「投稿」の部分はこうする

![グループを作成_-_Google_グループ.jpg](https://qiita-image-store.s3.amazonaws.com/0/82372/24ca4ae7-e761-4de4-1f95-1409d4510e79.jpeg "グループを作成_-_Google_グループ.jpg")


④ ダイアログが出るから「作成」

![グループを作成_-_Google_グループ.jpg](https://qiita-image-store.s3.amazonaws.com/0/82372/9c2440f9-ca78-edaa-3874-9f1d89de94a2.jpeg "グループを作成_-_Google_グループ.jpg")


⑤ またダイアログが出るから、「グループの設定をカスタマイズする」

![共有メールアドレステスト_-_Google_グループ.jpg](https://qiita-image-store.s3.amazonaws.com/0/82372/38a293e3-e639-a8ec-450c-f3ec635f910d.jpeg "共有メールアドレステスト_-_Google_グループ.jpg")


⑥ サイドナビから「権限」→「投稿権限」

![Google_グループ.jpg](https://qiita-image-store.s3.amazonaws.com/0/82372/06efb944-3d97-ae80-3a0a-9ba7f4d9432c.jpeg "Google_グループ.jpg")


⑦ 以下の３ヶ所を「ウェブ上の全員」に変更

![Google_グループ.jpg](https://qiita-image-store.s3.amazonaws.com/0/82372/79e5f83d-c3ad-98ed-43c7-9f7297c75c7b.jpeg "Google_グループ.jpg")


以上。

・
・
・

補足：⑥の手順でサイドナビに「権限」が出てない場合

① [グループのトップ](https://groups.google.com/)に移動 → 「すべてのグループ」

![Google_グループ.jpg](https://qiita-image-store.s3.amazonaws.com/0/82372/ed9b127a-7cc9-c7ee-70ec-bf78347833fe.jpeg "Google_グループ.jpg")


② 編集したいグループを選択

![Google_グループ.jpg](https://qiita-image-store.s3.amazonaws.com/0/82372/68b1d02d-f89b-a5f0-cee4-68818e9304dc.jpeg "Google_グループ.jpg")


③ この「管理」を押すと

![共有メールアドレステスト_-_Google_グループ.jpg](https://qiita-image-store.s3.amazonaws.com/0/82372/623ff091-0b12-0b04-c80d-64cfba49a249.jpeg "共有メールアドレステスト_-_Google_グループ.jpg")


サイドナビに「権限」と「投稿権限」が出ます

![Google_グループ.jpg](https://qiita-image-store.s3.amazonaws.com/0/82372/bbc3f3c3-5af2-7734-638f-d3521acfca03.jpeg "Google_グループ.jpg")
Angular + Netlifyでポートフォリオを作ってみた

# はじめに

去年、転職活動をしていた際に自分のサイトがあるかを聞かれたことをふと思いだし、
Adobe XD, HTML+CSSの勉強も兼ねて作ってみました。

https://tamanugi.com/

![スクリーンショット 2018-11-14 21.44.33.png](https://qiita-image-store.s3.amazonaws.com/0/55219/5ff15b11-4890-7cbb-3539-51baf79e5f20.png)

# 使った言語、ツール、サービス

- Angular
  - pug + stylus
- Netlify
- Adobe XD

# 実装

## デザイン

普段仕事ではサーバーサイドしか触らないので、デザイナーさんやフロントエンジニアの方々がAdobeを使って綺麗な画面を設計しているのを見て、密かに憧れていました。

Adobe XDというツールが無料で使えるというのを教えてもらい、
せっかくなのでXDを使ってみました。

Adobe XDの使い方は基本的にudemyの以下のコースを参考にして、あとはひたすらググってました。
https://www.udemy.com/web-expert/

トップ画像の素材は  [写真AC](https://www.photo-ac.com/) という素材サイトから拝借しました。

メニューボタン画像はアイコンをfont-awesomeから適当に選び、文字と組み合わせてからSVG出力しました

## コーディング

最近Angularを少し触っていたので、Angularを選択。
素のHTML,CSSを書いていくのはちょっと厳しいので pug, stylus で書いていきました。

最初はコンポーネントとか考えずに `app.component.pug`に全部書いていき、ある程度書けたら
コンポーネントに分けて行きました

# ホスティング

ホスティングもせっかくなので、最近名前をよく聞く[Netlify](https://www.netlify.com/)を使ってみました

新規登録し、プロジェクトを作成して、少し設定したら簡単に公開できたので感動しました :sparkles: 

# 参考にしたサイト

[カードデザインのポイントと実装方法](https://www.webcreatorbox.com/tech/card)
[[CSS]レスポンシブ対応の文字サイズを指定するこれからのテクニック](https://coliss.com/articles/build-websites/operation/css/font-size-used-responsive-scales.html)
[エンジニアだけどポートフォリオサイト作ってみた](https://qiita.com/musou1500/items/24ed32d7f5b0a6377bc5)
[エンジニアでポートフォリオ作りました](https://qiita.com/turmericN/items/76559f0b70983469e7c7)
[ヘッダー背景画像カスタマイズ時の考え方](https://vanillaice000.blog.fc2.com/blog-entry-566.html)
[Scroll to element on click in Angular 4](https://stackoverflow.com/questions/43945548/scroll-to-element-on-click-in-angular-4)
localStorage の操作メモ

■全削除
-----------

```
localStorage.clear()
```

■保存キー一覧
-----------

```
for(var i=0;i<localStorage.length;i++) console.log(i, localStorage.key(i))
```

■値の一覧
-----------

```
for(var i=0;i<localStorage.length;i++) console.log(i, localStorage.key(i), localStorage.getItem(localStorage.key(i)))
```

■値のセット
-----------

```
localStorage.setItem(キー, 文字列)
```
Vue.jsでhtml出力

エスケープしない構文

```vue
{{{ item.htmlString }}}
```

これでエラーが出る場合は

```vue
v-html="item.htmlString"
```

をお試しあれ。

```vue
<p v-html="nl2br(text)"></p>
```

改行コードをbrに変換する処理を作って設定してもサニタイズされていないのでこのままだとXSS

なので改行コードをそのまま改行表示にできる以下のスタイルを使うと楽`{{}}`はサニタイズ表示

```vue
<p style="white-space: pre-wrap;">{{ text }}</p>
```

`pre`だと折り返しされないので`pre-wrap`
が良いです。
【Swift】nativeBoundsについて

知らなかったのでメモ。

**画面の向きにかかわらず、いつでもportrait時のboundsが取得できるプロパティ**。
[nativeBounds - UIScreen | Apple Developer Documentation](https://developer.apple.com/documentation/uikit/uiscreen/1617810-nativebounds)

例）portraitだけではなくlandscapeにもなるiPadアプリで、スクリーンの高さによって制約を変えたいときのコード

```swift
     
switch (UIScreen.main.nativeBounds.height) {
case 2048: // 9.7インチ
    viewWidthConstraint.constant = 768
case 2224: // 10.5インチ
    viewWidthConstraint.constant = 834
case 2732: // 12.9インチ
    viewWidthConstraint.constant = 1024
default:
    viewWidthConstraint.constant = 768
}
```
trにv-for

trにv-forを使いたいが、カラム結合されている場合少し戸惑った。

例

trが複数で1行の場合など

```html
<table>
  <tr>
    <td rowspan="2" bgcolor="#000"> </td>
    <td bgcolor="#f00"> </td>
    <td bgcolor="#0f0"> </td>
    <td bgcolor="#00f"> </td>
  </tr>
  <tr>
    <td colspan="3" bgcolor="#0ff"> </td>
  </tr>
</table>
```

trが1つで1行なら以下でしたが、

```vue
<tr v-for="item in itemList" :key="item.id">
</tr>
```

templateを使う

```vue
<template v-for="item in itemList" :key="item.id">
</template>
```

```
'<template>' cannot be keyed. Place the key on real elements instead
```

templateはkeyが使えない様子。
ではどうするかというと以下のようにする。
keyはユニークにしないといけない。

```vue
<template v-for="item in itemList">
  <tr :key="item.id + '_1'">
  </tr>
　<tr :key="item.id + '_2'">
  </tr>
</template>
```
【Java】定期的にタスクを実行する方法

# はじめに
今回はJavaで定期的にタスクを実行する方法を解説します。
本機能はバッチ処理でよく使用されます。

サンプルではTimerクラスを利用し、定期的にタスクを実行する処理を実装していきます。

それでは早速解説していきます。

# 1. 開発環境
以降、以下のバージョン、環境での解説となります。

IDE：eclipse
Javaバージョン：8

# 2. フォルダ構成
今回のサンプルプログラムのフォルダ構成は以下の通りです。
<img width="282" alt="スクリーンショット 2018-11-14 21.02.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/298750/0f9d6ad4-448f-13b9-8d16-7dcc6a37e279.png">

# 3. サンプルプログラムの実装
## 3-1. 定期的に実行したいタスクの実装
定期的に実行したいタスクはTimerTaskクラスを使用して実装します。
今回、「タスクが実行されました。」と定期的にコンソールに出力する処理をサンプルで実装していきます。

```Main.java
package main;
// 今回追加する部分
import java.util.TimerTask;

public class Main {
    public static void main(String[] args) {
        // 今回追加する部分
        TimerTask task = new TimerTask() {
            public void run() {
                //定期的に実行したい処理
                System.out.println("タスクが実行されました。");
            }
        };
    }
}
```

また、何回実行したか確認するために、以下のように回数がわかるように実装してみましょう。

```Main.java
package main;

import java.util.TimerTask;

public class Main {
    public static void main(String[] args) {

        TimerTask task = new TimerTask() {
            int count = 0; // 今回追加する処理
            public void run() {
                // 定期的に実行したい処理
                count++; // 今回追加する処理
                System.out.println(count + "回目のタスクが実行されました。"); // 今回修正する処理
            }
        };
    }
}
```

## 3-2. スケジュールの実装
次に、いつタスクを実行開始し、どのぐらいの間隔でタスクを実行するのか実装していきます。

実装方法ですが、TimerクラスのscheduleAtFixedRateメソッドを使用します。
使い方は以下の通りです。

```java
Timer timer = new Timer();
timer.scheduleAtFixedRate(定期的に実行したいタスク,初回のタスク実行までの時間(ms),実行するタスクの間隔(ms));
```
scheduleAtFixedRateメソッドの第二引数ですが、「初回のタスク実行までの時間」だけでなく、「タスク開始時間」をDate型で指定することもできます。

今回のサンプルでは、PGM実行後、1秒後に3秒間隔でタスクが実行されるような処理を実装していきます。

```Main.java
package main;

import java.util.Timer; // 今回追加する処理
import java.util.TimerTask;

public class Main {
    public static void main(String[] args) {

        Timer timer = new Timer(); // 今回追加する処理
        TimerTask task = new TimerTask() {
            int count = 0;
            public void run() {
                // 定期的に実行したい処理
                count++;
                System.out.println(count + "回目のタスクが実行されました。");
            }
        };
        timer.scheduleAtFixedRate(task,1000,3000); // 今回追加する処理
    }
}
```

上記実装完了しましたら、Main.javaを右クリック>Javaアプリケーションの実行で実行してみましょう。

以下のような文言が3秒間隔でコンソールに出力されればOKです。

```bash:コンソール
1回目のタスクが実行されました。
2回目のタスクが実行されました。
3回目のタスクが実行されました。
4回目のタスクが実行されました。
・・・
```

# さいごに
2020年から個人ブログはじめました！

フリーランスエンジニアになって得た知識と経験をもとに、フリーランスエンジニアに関する情報をはじめ、IT技術情報や業界情報、エンジニアライフハック等のコンテンツを配信していく予定です。

まだまだ記事数は少ないのですが、週単位で更新してますので、もしご興味ございましたら、みていただけると嬉しいです。

https://yacchi-engineer.com/
Webサービスに再度トライしてみた！

# 今度こそ自動化できそう！

~~[最近リリースしたサービス]()~~

## CRONが登録できればひとまず完成
XREAの有料プランで申し込むとCRONできるみたい。[^1]

### 2018.12.16(土) CRONを登録した。
これで手動更新はしなくて良くなりそう。経過は観察する。
注意点としてはCRONはカレントディレクトリからファイルを見ている様であった。
そのため、シェルスクリプトは実行できても下記の問題が発生した。

- シェルスクリプトの内部のファイルが見つからない
- フルパスで内部のファイルを指定してもプログラムでパスが書かれたコードがあれば同じ問題にハマる。

そこで、恐らく解決したであろう方法を示す。
要するに自分が手動で叩いていたときと同じ行動をすればよい。
具体的にはシェルスクリプトに**CDコマンドでディレクトリを設定する命令文を追加したらいけた。** [^2]

```bash
cd path #シェルスクリプトのパスを設定する
touch hoge.txt #pathにhoge.txtを作成する
python3 hoge.py #pathでhoge.pyを実行する 
```


## 今回のミソ

ファイルが更新されたとは何か？今回、自分は下記の様に定義づけた。
**同一ファイルに対して、ファイルサイズ(メモリサイズ)に差が発生したとき** [^3]

## 今回の技術的な話題

### 


### URLからHTMLファイルを取得

```python
import urllib.request
url = "https://www.google.co.jp/"
with urllib.request.urlopen(url) as response:
    html = response.read()
```

### メモリサイズを取得する

```python
import sys
MemorySize = sys.getsizeof(html)
```

### Python3とPython2が混在するとき

```bash
# Python3でプログラムを実行する
$ Python3 hoge.py

# Python2でプログラムを実行する
$ Python hoge.py
```

### 日付をYYYY/MM/DDの様な形に加工するには

```python
import datetime
Today = datetime.datetime.today().strftime("%Y%m%d")
YYYYMMDD = Today[0:4] + "/" + Today[4:6] + "/" + Today[6:8]
```

### 日付の引き算

```python
import datetime
Today = datetime.datetime.today().strftime("%Y%m%d")
Yesterday = (datetime.datetime.today() - datetime.timedelta(days=1)).strftime("%Y%m%d")
```

### エンコーディングを指定してファイルを開く

```python
import os
f = open("hoge.txt", "r", encoding="utf-8")
fore_text = f.read()
f.close()
```

その他は[過去の記事](https://qiita.com/JINCHANGUITAR/items/d4e01eca8852a4c35c6e)の話題で何とかなった。

##感想

### 他のサービスと比較すれば地味であること

個人開発の難点はデザインやプログラム、運営まで全て１人でするため
才能の集まりである会社の制作物に比べれば地味にはなりやすいのかもしれない。
だけど、自分から比べない様にしよう。開発できなくなるからだ。
ビジネス的な比較とは別な話であると感じた。

### Webサービスを作る上で例外がたくさん出てくる

例外はたくさん出てくると割り切ると、とりあえずは行動できる。

### 精度はほどほどにすると気が楽
精度を求めると開発しにくくなるので、自分のモチベーション的に厳しければ精度を下げよう。個人開発なら自分で決定できる。気楽にいこう。

### データを入力することは面倒である
サービスに使うデータを入力することは面倒だった。
しかし、データがあれば金になるのではないかと思うと必要な行為である。
だから、データ入力の仕事があるのだと感じた。
貢献性の高い仕事だと思えたので、もっと単価は上げるべきではないかと感じた。
売上に応じた追加報酬がほしいところ。

[^1]: お金に余裕があったら試そうと思う。今はsshで手動でbatchを叩いている。
[^2]: 恐らく手動でしていた行動をCRONは知らない。だから、シェルスクリプトに自分の行動を足してみたのだ。理想的には、CRONする前にCDコマンドでシェルスクリプトのディレクトリまで移動するのがいいのだが、今のところ方法は分かっていない。
[^3]: 所謂、完全性や正しさは求めていない。自分の目的を満たせればOKとする。
How to pass a function as parameter in Kotlin?

#前書き
この記事はKotlinの関数渡しをどうやって書くかを英語で調べた所、分かりにくいディスカッションや、読みにくく、理解しづらいKotlin公式のリファレンスしかなかったので、できるだけわかりやすく**英語で**関数渡しをどうやって書くかを説明したものです。

## How to pass function as a parameter?

First of all, I know that many of programmer love to write example by using foo() or bar(). However, I hate it because difficult to understand for beginners. So, I will use more practical example which is search function.

```kotlin:search.kt
    fun searchInteger(integers:ArrayList<Int>, moreThan:Int):ArrayList<Int>{
        val result = ArrayList<Int>()
        for(integer in integers){
            
            if(moreThan <= integer){
                result.add(integer)
            }
        }
        return result
    }
```

This is a function that find integers which more than `moreThan` parameter. However this function can search only integer which more than `moreThan` parameter. So, you can change the integer parameter to function parameter. Such as...

```kotlin:search.kt
    fun searchInteger(integers:ArrayList<Int>, searchCallback: (target:Int) -> Boolean):ArrayList<Int>{
        val result = ArrayList<Int>()
        for(integer in integers){

            if(searchCallback(integer)){
                result.add(integer)
            }
        }
        return result
    }
```
This function can search all conditions because it is depend on function which passed by `searchCallback` parameter. Then, you can call this function like...

```kotlin:search.kt
    fun searchMoreThan(integers:ArrayList<Int>, moreThan:Int):ArrayList<Int>{
        return searchInteger(integers, { target -> run{ fun searchMoreThan(integers:ArrayList<Int>, moreThan:Int):ArrayList<Int>{
        return searchInteger(integers, { target -> run{ moreThanTask(target,moreThan) }})
    }

    fun moreThanTask(integer:Int, moreThan:Int):Boolean{
        return (moreThan < integer)
    } }})
    }

    fun moreThanTask(integer:Int, moreThan:Int):Boolean{
        return (moreThan < integer)
    }
```

You can switch input function to `lessThanTask(target,lessThan) ` which return Boolean that show is input less or not. It will also work.

## あとがき
Thanks for reading. Feel free to request editing.
hasLayoutとzoom: 1

一口にロストテクノロジーと言っても、名前を聞いて「そんなものがあったなあ」と感傷に浸るものもあれば、「もはや思い出したくもない」ようなものまで存在します。ここでは、Internet Explorer 7まで存在した独自仕様の`hasLayout`について取り上げてみます。

## 意味不明な存在

「ブラウザごとに挙動が異なる」場面は現代でもありますが、その様相はそれぞれです。

* 最新の仕様に追加された機能が、ブラウザではなかなか使えない
* ブラウザ独自の拡張なので、あるブラウザでしか表示されない
* ブラウザにバグがあって、規格上は問題ないものが表示されない

納得度は上から順に下がっていくかと思いますが、今回テーマとする`hasLayout`はどれでもなく、「既存のHTML要素に自動で適用される独自仕様」なので、さあ大変です。

`hasLayout`は、その名の通り、「この要素がレイアウト情報を持つか」を定義する値で、true/falseで切り替わります。falseのときには本来効くべきレイアウトが適用されないという闇に入っていきます。

## 直接変えられない

さらに厄介なことには、CSSで`has-layout: true`のように変更もできず、適用される条件を整えて`true`に切り替えるしかないのです。具体的には、

* `display: inline-block`
* `height`あるいは`width`を`auto`以外にする
* `float: left`あるいは`float: right`にしてフロートさせる
* `position: absolute`
* `writing-mode: tb-rl`
* `zoom`に`normal`以外を指定する

といった指定が必要になります（[参考](https://coliss.com/articles/build-websites/operation/css/143.html)）。もちろん、そのためだけに縦書きにするわけにも行かないですし、レイアウトの都合上かけられないものも多くあるのですが、要素を`zoom`しないといけない機会はそうそうあるわけでもないので、`zoom: 1`が事実上`hasLayout`セット用のCSSとして扱われるようになっていました。

## その後

IE 8で`hasLayout`もなくなり、2016年にIEのサポートサイクルが変更されたことで、IE 7が完全に過去のものとなっています。 一方で、`zoom`プロパティはIEとそれを受け継いだEdgeだけでなく、どういうわけかWebkitでも実装されて、現在にいたっています（[MDN](https://developer.mozilla.org/ja/docs/Web/CSS/zoom#Browser_compatibility)）。
『進化的アーキテクチャ』を読んでみて

[進化的アーキテクチャ](https://www.amazon.co.jp/dp/4873118565/)を読んでみて、いくつかこころに残った言葉があるので書き留めておく。あくまで主観を書くので、本の内容など詳しく知りたい方は、実際の書籍を参照してください。

> モノリスを構築できないとき、なぜマイクロサービスがその答えだと思うのか。

自分たちのシステムはイケてないから、マイクロサービスにしたらいろいろ解決してくれるはず！っていって、導入しても多分失敗するよってことかな。マイクロサービスもやりすぎて結局運用が大変だよってのも見たことあるから、もちろん銀の弾丸なんかじゃない。

> アーキテクトは、この「メタ作業は単なる作業よりも面白い」症候群の影響を避けられない。

分かるな〜。だって面白いもんね。ちゃんと価値に繋がることをやっているか？本当に必要なことなのか？という自問を常にすることが大事かも。

> たいていの開発者は、粗悪な古いコードを唯一の技術的負債の形とみなす。しかし、プロジェクトは早すぎる複雑さの導入によって技術的負債を偶発的に仕込んでしまう可能性がある。

分かる〜！もちろん歴史的な経緯もあってイケていないところも多々あるけど、全然だめだ！って言っていろいろ作り直しちゃう人が作るものもたいていもっとイケてない。。最初からいろいろな場合に対応しようとするとたいていYAGNIな場合が多いから、シンプルにして、しんどくなりそうなのが見えてきたら、リファクタしてくほうがいいよね。なので、安心してリファクタできるテストと、そういう文化を作るほうが大事。

> 開発者がアーキテクチャを再構築する際の最初のステップは、技術的負債として現れている歴史的な設計上の妥協点を取り除くことだ。

時間とお金とステークホルダーが許すなら、作り変えプロジェクトも面白いしいいと思うけど、もっといろんなものをどんどん捨てられるようになるといいな。動いているものを捨てるのは結構反発も多いけど、積もり積もって技術的な負債になっているケースって結構あると思う。

# 全体の感想
前半は一つ一つは理解できるんだけど抽象的で読むの疲れた。
後半は具体的な話も多くてそうだなってうまく言語化してくれてる感じがしてよかったな。
Pythonのimshow()と同様の可視化をJavaScriptで行う

# 背景
- 空間的な温度分布や白黒画像のピクセル配列などのように、二次元配列を画像として可視化したい場合がある。
- Pythonでは[matplotlib.pyplot.imshow()](https://matplotlib.org/api/_as_gen/matplotlib.pyplot.imshow.html)を使えば良いが、JavaScriptでブラウザ上に可視化したい



# 1. Reactを使う場合
## 1.1. 実装
可視化したい配列とカラースケールを`props`として与えることで描画を行うコンポーネントを実装する。内部ではcanvasの[ImageDataオブジェクト](https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Pixel_manipulation_with_canvas)を利用してピクセルを操作している。

```jsx:Imshow.jsx
import React from "react";
import * as d3 from "d3";


export default class Imshow extends React.Component {
    componentDidMount() {
        this.imshow();
    }

    componentDidUpdate(prevProps) {
        if ( (this.props.data!==prevProps.data) || (this.props.interpolate!==prevProps.interpolate) ) {
            this.imshow();
        }
    }

    imshow = () => {
        const canvas = this.refs.canvas;

        // Square only
        const resolution = Math.sqrt(this.props.data.length);
        ["width", "height"].forEach(a => canvas.setAttribute(a, resolution));

        const context = canvas.getContext("2d");
        const imageData = context.createImageData(resolution, resolution);

        this.props.data.forEach((d, i) => {
            let color = isNaN(d) ? {r: 0, g: 0, b: 0} : d3.color(this.props.interpolate(d));
            imageData.data[i*4  ] = color.r;
            imageData.data[i*4+1] = color.g;
            imageData.data[i*4+2] = color.b;
            imageData.data[i*4+3] = 255;
        });
        context.putImageData(imageData, 0, 0);
    }

    render() {
        return (
            <canvas style={{ width: "100%", height: "100%" }} ref="canvas" />
        );
    }
}
```

## 1.2. 例
複素対数関数の[Domain Coloring](https://en.wikipedia.org/wiki/Domain_coloring)や[富士山の標高](https://maps.gsi.go.jp/development/ichiran.html)に利用すると以下のようになる。

<img width="300" alt="スクリーンショット 2018-11-14 20.54.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/58850/b3e6f53b-e6a7-283b-7fe8-35473e7de53e.png">
<img width="300" alt="スクリーンショット 2018-11-14 21.05.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/58850/46fd4d06-8f8e-6854-b018-adf810e240e0.png">

ソースコードはGitHubにある([複素対数関数](https://github.com/sw1227/visualization/blob/material/material/src/views/Complex.jsx), [富士山](https://github.com/sw1227/visualization/blob/material/material/src/views/Quad.jsx))が、データさえ用意できれば以下のような感じで使える。

```jsx
<Imshow data={this.state.imshowData} interpolate={this.state.colorScale}/>
```

## 1.3. 注意点
上記の実装では、

- 可視化する配列`props.data`は一次元配列で、正方形の可視化に限る（従って要素数は自然数の二乗である前提）
    - 二次元配列`d`を可視化したければ`[].concat.apply([], d)`で 一次元に変換できる
- 配列のshapeと画面上のピクセル数は独立に設定できる
    - `width`, `height`を100%に設定しているため、画面上のピクセル数は親要素によって規定される
    - 画面上のピクセル数に対して配列が小さければ当然解像度は低くなる
- カラースケール`props.interpolate`は、`props.data`の値を色に変換する関数
    - [d3.jsのカラースケール](https://github.com/d3/d3-scale-chromatic)を使うのが簡単だが、これは引数が0-1になっていることを前提としているので適宜スケールを調整する

という点に注意。拡張が必要であれば簡単に実装できるはず。

# 2. Reactを使わない場合
要するにcanvas要素のピクセル値を指定しているだけなので、「Reactを使う場合」の`imshow()`内とほぼ同じ。ソースコードは省略するが、`this.props.***`を変数に置き換えたり、`this.refs.canvas`を`document.getElementBy***`のようにしたりすれば良いと思う。
Laravelをherokuにアップし、basic認証をかけるまで

タイトルどおり。herokuでLaravel,nginxを使い、Basic認証をかけるまでの手順
前提として、github→CircleCI→herokuという流れを作っている。
環境構築は以下を参照。
[LaravelアプリをCircleCIを使ってherokuにデプロイ](https://qiita.com/keb/items/ca03f9d9022bf59c5ab0)

## 手順

### herokuやLaravelの準備
このあたりは[LaravelアプリをCircleCIを使ってherokuにデプロイ](https://qiita.com/keb/items/ca03f9d9022bf59c5ab0)でやったので割愛

### Procfileを編集

```Procfile
web: vendor/bin/heroku-php-nginx -C nginx_app.conf public/
```

### nginx_app.confを作成

nginx_app.confをプロジェクトルートに作成

```nginx_app.conf
location / {
# try to serve file directly, fallback to rewrite
try_files $uri @rewriteapp;
}

location @rewriteapp {
# rewrite all to index.php
rewrite ^(.*)$ /index.php/$1 last;
}

location ~ ^/(app|app_dev|config)\.php(/|$) {
try_files @heroku-fcgi @heroku-fcgi;
internal;
}
```

### basic認証

環境変数を設定

```
heroku login
heroku config:set BASIC_AUTH_USERNAME=[ユーザ名]
heroku config:set BASIC_AUTH_PASSWORD=[パスワード]
```

nginx_app.confを修正

```nginx_app.conf
location / {
# try to serve file directly, fallback to rewrite
try_files $uri @rewriteapp;
auth_basic           "Restricted";
auth_basic_user_file $document_root/../.htpasswd;
}
```

.htpasswdを作成する

```bash
mkdir etc/nginx
mkdir .profile.d
cd .profile.d
vi gen-htpasswd.sh
```
```sh:gen-htpasswd.sh
#!/usr/bin/env bash
set -ex

echo -e "${BASIC_AUTH_USERNAME}:$(perl -le 'print crypt($ENV{"BASIC_AUTH_PASSWORD"}, rand(0xffffffff));')" > /app/.htpasswd
```

## 参考
https://devcenter.heroku.com/articles/custom-php-settings
https://mistymagich.wordpress.com/2016/02/12/nginx-basic-authentication-in-php-on-heroku/
find でファイルの探し方

find コマンドの使い方ですが、
例えば、work/ の下に、*.h、*.c、*.cpp ファイルだけを調べたいのです。
find work -name "*.[hc]" -or -name "*.cpp" -print
で全ての必要なファイルが検索して出力するかと思いますが、
なぜか、"*.cpp" だけが出力されます。
どなたが教えて下さいませんか。宜しくお願いします。
Pythonで競プロに挑む日誌 vol.18 ~実行時間が満たせない~

# 現在の目標
* 2018年内に茶色になる**←イマココ**
 * [ABC](
https://kenkoooo.com/atcoder/?user=&rivals=&kind=category) の A, B 問題を全部解く
* 2018年度内に緑色を取得する
* 水色になったら, [APG4b](https://beta.atcoder.jp/contests/apg4b) で C++ にも手を出す

# 今日のおはなし
### 結論
計算方法が合っていても, 現実的な時間内に終わらないとダメ.

#### 解いた問題
[B - Between a and b ... ](https://beta.atcoder.jp/contests/abc048/tasks/abc048_b)

#### 答えは出せるけど, 実行時間 2sec が満足できなかった解答

```TLE_answer.py
# coding: utf-8
a, b, x = map(int, input().split())
cnt = 0
n = b - a + 1
for i in range(n):
    if (a+i)%x==0:
        cnt += 1
print(cnt)
```
総当たりだと, b が大きくなった時に制限時間内に処理が終わらず Out でした.  

#### AC だった解答
[解説](https://atcoder.jp/img/arc064/editorial.pdf)をみたところ, 
>a 以上 b 以下の整数のうち条件を満たすものの個数を求める問題です．このような問題では，
「f(n) := 0 以上 n 以下の整数のうち条件を満たすものの個数」
と定義しておくと，答えは f(b)−f(a−1) で求まるので楽です．

とありました. 文章だけではよくわからなったので, 図示してみると理解できました（plantUML 使ってみたかっただけです↓）.
![figure1.png](https://qiita-image-store.s3.amazonaws.com/0/284026/d3e35145-1363-04cc-7934-d83c8b56db2f.png)

for 文で a ~ b の区間を総当たりするのではなく, b の個数から a の個数を引けば, 所望の範囲の個数が求められるという話ですね（日本語が正確でない点はご容赦ください）. 当然といえば当然のことです.

```AC_answer.py
# coding: utf-8
a, b, x = map(int, input().split())
f_a = (a-1)//x + 1 if a>=1 else 0
f_b = b//x + 1
print(f_b - f_a)
```

いまはコード書くだけで楽しいのですが, 少しずつ実行時間にも気をつけないといけませんね.

# むすび
制約を見て, 力技が通用するか確認しよう.
numpyで型を指定してN次元配列を作る

# numpyで型を指定して多次元配列を作る

多次元bool配列の用意方法。
忘れそうなのでメモ。

```arraytest1.py
import numpy as np
array = np.zeros((2,2,2), dtype="bool")
```
これでいけるっぽい。デフォルトはfloat64だった。

# numpyで型を指定してN次元配列を作る

N次元bool配列の用意方法。

```arraytest2.py
import numpy as np
  
n = 9

array = np.zeros((2), dtype="bool")
arrayTmp = np.zeros((2), dtype="bool")
for i in range(n-1):
    array = np.tensordot(array,arrayTmp,0)

print(array.shape) # (2, 2, 2, 2, 2, 2, 2, 2, 2)
```
以下を読むと、tensordotの第3引数を0にするとテンソルの直積を求めてくれるとのことなので、
直積を繰り返しとっていく。
https://docs.scipy.org/doc/numpy-1.15.1/reference/generated/numpy.tensordot.html

なんかむずいな...。
もっと楽な方法はないものか。

# 何次元まで作れるか

25次元くらいは作れた。
ただ上記の方法では直積の計算が行われるので、生成に時間がかかってしまう。
よって、これ以上は諦め。

余談だが、昔FORTRAN90で行列計算していたときは7次元が限度だった。
Cだとメモリの限界まで行けるのかな。


# メモリサイズを確認

sysモジュールのgetsizeof関数で確認できるらしい。
出力はバイト単位。

```arraytest3.py
import numpy as np
import sys

arrayBool1 = np.zeros((10,10,10), dtype="bool")
print(sys.getsizeof(arrayBool1)) # 1128

arrayBool2 = np.zeros((4,5,5,10), dtype="bool")
print(sys.getsizeof(arrayBool2)) # 1144
```

要素数が同じでも次元が増えると、メモリ使用量は増えるっぽい。
きっと配列の内部で持っているアドレス番地分が増えているんだろう。

終わり。
動的ライブラリ関数をhackしよう

![computer_hacker_black1.png](https://qiita-image-store.s3.amazonaws.com/0/258841/e142a27e-038d-0b22-10be-475faf8edeb2.png)

# 背景

動的ライブラリ関数をフックして独自関数を呼び出してっていうのが面白そうなのでやってみた。
動的ライブラリ関数を独自関数に置き換えてhackしてみます。
対象関数はwrite(2)

# どうやってやるの？

プログラムは通常同じ名前の関数は定義できないが、
動的リンクされたプログラムでは、同じ関数が複数のライブラリに存在することがあり得る。
その際は、最初に見つかった関数が利用される。

環境変数 LD_PRELOAD で指定した共有ライブラリは最優先で読み込まれるため、簡単にプログラムの挙動を変えることができます。

ちなみに何もせずgccでコンパイルすると、glibc(libc.so.6)が動的にリンクされます

# 動的ライブラリ？

プログラム実行中の任意の時点で読み込まれるライブラリ。

* 必要と判断されるまで、読み込まれない。
* プラグインやモジュールの実装に役立つ。
* 動的ライブラリの作成は、共有ライブラリと同様の方法で作成する。

詳しくは下記でご確認を
http://archive.linux.or.jp/JF/JFdocs/Program-Library-HOWTO/dl-libraries.html

# 実行環境/必要なもの

* gccとlddを使ってますのでこれら2点があれば大丈夫です。

``` bash
$ gcc --version
gcc (GCC) 4.4.7 20120313 (Red Hat 4.4.7-16)

$ ldd --version
ldd (GNU libc) 2.12
```

# 実践例

まずはhackされるプログラム
標準出力に「hello world」のみを出力するだけ。

``` c:main.c
#include <string.h>
#include <unistd.h>

int main()
{
    char s[] = "Hello World!\n";
    write(1, s, strlen(s));
    return 0;
}
```

次はライブラリ
mainで呼んでいるwrite(2)はこちらで定義されているwriteが優先されることを確認。
「hello world」の前に「hello hack」を出力する。

``` c:write.c(ライブラリ)
#include <unistd.h>
#include <dlfcn.h>
#include <stdio.h>

int g_first = 0;
void *g_h;
ssize_t (*g_f)(int, const void *, size_t);

//子プロセスに引き継がないよう設定
void __attribute__((constructor)) unset_ld_preload() {
    unsetenv("LD_PRELOAD");
}

ssize_t write(int fd, const void *buf, size_t count) {
    if(g_first == 0){
        g_first = 1;

        // 動的ライブラリへの内部ハンドルを取得
        g_h = dlopen("libc.so.6", RTLD_LAZY);

        // シンボルがロードされたメモリのアドレスを取得
        g_f = dlsym(g_h, "write");
    }

    fprintf(stdout, "Hello Hack\n");
    return (*g_f)(fd, buf, count);
}
```

上記で独自のwrite関数を定義しています。
__attribute__((constructor)) は GCC の拡張機能で
main関数の前に行いたい処理がある場合に使います。

``` bash
# コンパイル(ライブラリ作成)
$ gcc -fPIC -shared -o write.o write.c -ldl

# コンパイル
$ gcc main.c -o main

# 実行
$ LD_PRELOAD=./write.o ./main
Hello Hack
Hello World!
```

結果はこの通り
main.cでは「Hello World」のみの出力のはずが
その直前に「Hello Hack」が出力されています。

``` bash
# lddコマンドでライブラリの依存関係を確認
$ ldd main
        linux-vdso.so.1 =>  (0x00007fff619d1000)
        libc.so.6 => /lib64/libc.so.6 (0x0000003edae00000)
        /lib64/ld-linux-x86-64.so.2 (0x0000003edaa00000)

$ export LD_PRELOAD=./write.o
$ ldd main
Hello Hack
        linux-vdso.so.1 =>  (0x00007fff643a7000)
        ./write.o (0x00002b947289c000)
        libc.so.6 => /lib64/libc.so.6 (0x0000003edae00000)
        libdl.so.2 => /lib64/libdl.so.2 (0x0000003edb600000)
        /lib64/ld-linux-x86-64.so.2 (0x0000003edaa00000)
```

# まとめ/感想

今回の方法を使えば独自printf等が作成できます。
完成されたプログラムが使用しているライブラリ関数を
プログラム本体を修正せずに手を加えることが出来るので
使う機会はあまり無いですが面白いのでおすすめです。

# 参考文献/リンク

[LD_PRELOADで関数フックしてみよう！](http://07c00.hatenablog.com/entry/2013/09/02/003629)
[dlopen - ライブラリコールの説明](https://kazmax.zpp.jp/cmd/d/dlopen.3.html)
Dockerエコシステムメモ👀✍

# はじめに
[Dockerを調べてみた](https://qiita.com/hot_study_man/items/4e129dacb7c3cab4b568)の続き。
Dockerを試したときにDockerを支えるエコシステムの用語がたくさんでてきたのでまとめてみました。


# 参考
[Docker/Kubernetes 実践コンテナ開発入門](https://www.amazon.co.jp/Docker-Kubernetes-%E5%AE%9F%E8%B7%B5%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E9%96%8B%E7%99%BA%E5%85%A5%E9%96%80-%E5%B1%B1%E7%94%B0-%E6%98%8E%E6%86%B2/dp/4297100339/ref=sr_1_2?s=books&ie=UTF8&qid=1542195472&sr=1-2&keywords=kubernetes)

実践的でわかりやすかったです。詳細はこちらをみてください。

# シングルホスト環境でのコンテナ管理
## Docker Compose
複数コンテナを実行を一括で管理する。シングルホストホスト環境で用いる

# マルチホスト環境でのコンテナ管理
## コンテナオーケストレーションツール
マルチホスト環境においてコンテナを統合できるツールのこと。`Docker Swarm`、`kubernets`などがある。マルチホスト環境の場合は通常コンテナオーケストレーションツールを用いてコンテンを管理する

### Docker Swarm
複数のDockerホストを束ねてクラスタ化するためのツール。かつては独立したツールだったが、現在はDocker本体に組み込まれている。有効化すれば使用できる

### kubernets(クーバーネティス)
* GoogleがOSSとして公開
* DockerSwarmより機能が充実。なので**マルチホスト環境でDockerを使うならSwarmよりKubernates??**

 
## クラウド
### Amazon EKSやGKE 
* パブリッククラウドが提供するkubernetsをサポートしているマネージド・サービス
* kubernetesを便利な機能、GUIなどでラップしてより使いやすくしているイメージ？？
* Master管理やメンテナンスはサービス側によって管理
* GKEは最も利用されているマネージド・サービス

## オンプレ環境　
### kubespray
* オンプレ環境で**kubernetesクラスタ**を構築するツール
* マスターサーバ、作業用サーバ、ノードサーバなど、ホストが複数必要

## 補足
### DockerMachine
どこでもコマンド一つでDockerの実行環境を構築できるコマンドラインツール。aws,Azure,GCE,VMwareなどの様々な環境に対応している。マルチホスト環境で用いる。

# まとめ
kubernatesを本番環境で使うときは運用で楽ができるGKEのようなクラウドを使ったほうがよいかと思いました。クリティカルなサービスではない場合はオンプレ環境でシングルホストでDockerComposeを使えば本番環境でも運用できそうです。
正規表現で値なしor条件付き入力の制御

備忘録です。調べてもなかなか出てこなかったので苦労しましたが、実はこれだけで制御できます。

```
^(任意の入力条件)?$
```
あとはこれを各プログラム言語に合わせてデリミタを付与してください。

### 解説
`()`は任意の文字列のグループ化、`?`は0回か1回の繰り返しになります。そして`^`は接頭辞、`$`は接尾辞。つまり、任意の入力条件の0回か1回の繰り返しとなるので、検索用フォームやデータ入力フォームなどで、**未入力か条件付き入力**か制御したいときに役立ちます。

例は、家族名を入力するフォームがあり、条件としては必須入力項目ではないですが、入力の際には姓名の間に一文字空けてほしい場合などです。

```html
<input type="text" name="family1" pattern="^((\S+　)+\S+)?$">
```

こうすれば、無記入か条件付きの家族名入力（例：葛飾　北斎、パブロ　ルイス　ピカソなど。1回以上の繰り返しにしているのはミドルネームに対応させるためです）の制御ができます。

## 応用編：バリデーションチェックを制御しつつ、Enterキーでの誤送信を防ぎたい
今日ではXSS対策などの理由で\Aと\zを用いて、値のマッチングを厳格化させるのがセオリーですが、pattern属性は内部でJavaScriptによるマッチングを行う機能のため、\A、\zは対応していません。よって、常時スクリプトエラーが発された状態となっているので、バリデーションチェックも機能せず素通りします。


- [PHPの正規表現で^$より\A\zがいい理由](https://qiita.com/suin/items/2b9376ddd14a7fb40759)
- [Railsの正規表現でよく使われる \A \z って何？？](https://qiita.com/jnchito/items/ea7832df6f64a9034872)

```html:html
<input type="text" pattern="\A((\S+　)+\S+)?\z"> <!-- 判定に関係なく通ってしまいます。 -->
```

ですが、Enterキーでの誤送信はシステム運用上問題がある上、勝手にEnterなどを押下されたりするのはセキュリティ的なリスクも否めないので、フォーム入力操作中にEnterキーを押しても反応しないように制御します。

- [Enterキーを無効にする方法](https://qiita.com/mimoe/items/89b317be5e38bfbc44ee)

```html:test1.html
<body>
	<form name="frm" method="post" action="test.html" >
		<label>郵便番号(例：123-4567)</label><input type="text" pattern="^(\d{3}-\d{4})?$">
		<input type="submit" value="送信">
	</form>
	<script>
		frm.addEventListener("keypress",(e)=>{
			if(e.which && e.which === 13){
				return false;
			}
		})
	</script>
</body>
```

これで、確かに郵便番号にハイフン付与を必須条件にしたまま、Enterキーでの誤送信は防げている…のですが、**不要なバリデーションチェックのメッセージが逐一表示**されたままです。そこで、バリデーションチェックを発動させないようにイベントの伝播を阻止する`preventDefault()`を用います（バリデーションチェックが行われるタイミングについては、当方の記事で触れています）

- [[JavaScript] e.preventDefault とか e.stopPropagation とか return false](https://qiita.com/madobon/items/9a93ea830f093b1dca4f)
- [ライブラリを使わずに、複数のチェックボックスにバリデーション制御をかけたい](https://qiita.com/BRSF/items/14b4874c171496d22a34)

```html:test2.html
<body>
	<form name="frm" method="post" action="test.html" >
		<label>郵便番号</label><input type="text" pattern="^(\d{3}-\d{4})?$">
		<input type="submit" value="送信">
	</form>
	<script>
		frm.addEventListener("keypress",(e)=>{
			if((e.which && e.which === 13){
				e.preventDefault(); //バリデーションチェックを発火させない
			}
		})
	</script>
</body>
```

これで\Aと\zと同様に、Enterキーによる誤送信を防止し、かつ送信ボタンがクリックされ、submitされた場合のみバリデーションチェックを行うことができます。
Googleカスタム検索の検索結果の画面が文字化けしたときの対処方法

## 現象
Googleカスタム検索を導入していて、検索ボックスと検索結果を別ページにしているようなサイトで、検索結果の画面が文字化けするという現象に遭遇。
最初は文字コードの指定に問題があるのかと思い、色々調べても解決せず時間をとられましたが、単純な設定ミスだったので備忘録として記載します。
## 結論
管理画面で検索結果ページのURLを指定する項目で、プロトコルがhttpsではなく、httpになっていたことが原因。
##設定手順
検索エンジンの編集画面→デザイン→保存してコードを取得（2ページ）→検索結果の詳細→URLの指定でhttps://からのURLを指定。以上！
#### カスタム検索のコード取得画面
![search_settings.png](https://qiita-image-store.s3.amazonaws.com/0/186008/1fc41a40-29dd-513d-7fc2-93e13b379876.png)
#### 検索結果の詳細画面
![search_overlay.png](https://qiita-image-store.s3.amazonaws.com/0/186008/f3c2df30-47ed-4dd2-0a5f-714e030a2d69.png)
検索結果のURL指定するときに気付けよ！という話なのですが、そもそも設定項目の場所も分かりづらいですよね。。。（いいわけ）
僕のVimiumとJK shortcuts navigatorの設定

メモ

##よく使うキーバインド
下の設定をすれば以下の機能が使える
######jk shortcuts selectorの機能
`j` `k`　google検索結果のリンク選択

######vimiumの機能
`?`　ヘルプ表示
`g`　ページ一番上
`G`　ページ一番下
`h` `l`　戻る、進む
`f`　表示画面内のテキストボックスにフォーカス(Tabで選択可)
`m` `,`　上下にスクロール
`x`　タブを閉じる
`X`　最後に閉じたタブを復元
`yt`　タブを複製
`p`　クリップボードの内容を検索
`P`　新しいタブでクリップボードの内容を検索
`o`　検索ダイアログを表示、Enterで検索
`O`　新しいタブで検索ダイアログを表示
`b`　ブックマーク検索ダイアログを表示
`i`　リンクヒントを表示、キー入力でページ遷移


##Vimium

Custom key mappings

```
# Insert your preferred key mappings here.
unmap j
unmap k
unmap /
map m scrollDown
map , scrollUp
map h goBack
map l goForward
map f focusInput
map g scrollToTop
map i LinkHints.activateMode
map I LinkHints.activateModeToOpenInNewTab
map <c-f> scrollFullPageDown
map <c-b> scrollFullPageUp
```

Custom search engines

```
g: http://www.google.com/search?q=%s Google
y: http://www.youtube.com/results?search_query=%s Youtube
gm: https://www.google.com/maps?q=%s Google maps
a: http://www.amazon.co.jp/s/?field-keywords=%s Amazon
t: https://translate.google.com/#en/ja/%s Google translate
tw: https://twitter.com/search?vertical=default&q=%s Twitter
q: https://qiita.com/search?q=%s Qiita
qs: https://qiita.com/search?stocked=1&q=%s Qiita stock
gp: http://www.google.co.jp/search?hl=ja&source=hp&q=%s&tbm=isch Google image
p: http://www.google.co.jp/search?hl=ja&source=hp&q=%s&tbm=isch Google image
```


##JK Shortcuts Navigator

とりあえずgoogleのみ

```
{
    "selectors": [
        "div#rso>div.g>div.rc>div.r>a:nth(*)"
    ],
    "allowSubdomains": false,
    "search_selector": "#rso",
    "paginator_selector_next": "a#pnnext.pn",
    "paginator_selector_prev": "a#pnprev.pn",
    "liveUpdateElement": "#main"
}

```
【入門者向け】jQuery復習表


jQueryの入門書などを一度目を通したことがある人向け
覚えとかなきゃいけない所を簡易的にまとめました。


##読み込みと記述場所
**\</body>**の前に記述
jQueryのライブラリー本体をCDNで読み込んだあと、\<script>\</script>内に書いていこう

```html:html
<html>
<head>
</head>
<body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
  //ここにコードが入ります
</script>
</body>
</html>
```
※外部ファイルで読みこむ場合はこれ

```html:html
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="フォルダ名/ファイル名.js"></script>
```

##基本構文

必ず書こう**readyメソッド**（HTMLの読み込みが終わった後に、スクリプトが実行される）

```javascript:jQuery
$(function (){
  //ここにコードが入ります
});
```
**セレクタ**（操作したい要素）と**メソッド**（命令）で処理を記述

```javascript:jQuery
$(function (){
  $("セレクタ").メソッド("引数");
});
```

**イベント**で命令が実行されるタイミングをコントロール
※セレクタAとセレクタCが同じときは、セレクタCは「this」

```javascript:jQuery
$(function(){
  {$(セレクタA).イベントB(function(){
    $(セレクタC).メソッドD("引数");
  });
});
```

１つのセレクタに対して複数のメソッドを指定できる（**メソッドチェーン**）

```javascript:jQuery
$(function (){
  $("セレクタ").メソッド1("引数").メソッド2("引数");//最後だけコロンつける
});
```
Vue CLI 3プロジェクトにおけるVueインスタンスの初期化を理解する

[Vue CLI 3のプロジェクト](http://fumiononaka.com/Business/html5/FN1807004.html)でひな形をつくると、初期化を担う`src/main.js`に、つぎのような`Vue`インスタンスをつくるコードが加わります。普通はとくに気にせず、触らなくて構いません。でも、やはり気になったので、少し調べました。

```js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
	render: h => h(App),
}).$mount('#app')
```

うえのコードは、Vue.jsのなじみのある書き方にすると、つぎのようになるようです。

```js
new Vue({
	el: '#app',
	// render: h => h(App),
	components: {App},
	template: '<App/>'
});  // .$mount('#app')
```

もっとも、実際にこう書き替えると、つぎのような警告が示されます。プロジェクトはランタイムのみのビルドを用いているため、テンプレートのコンパイルが通らないということです。予めテンプレートをコンパイルしておくか、コンパイラが含まれたビルドを使わなければなりません。

> [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

このテンプレートを動的につくるために使うのが[描画関数`render()`](https://jp.vuejs.org/v2/guide/render-function.html)です。たとえば、ページに`<h1>`要素とテキストを差し込むなら、つぎのように`render()`メソッドを定めます。引数にはDOMツリーをつくるための関数(`createElement()`)が渡されます。その戻り値を`render()`メソッドから返せばよいのです。

```js
new Vue({
	// render: h => h(App),
	render(createElement) {
		return createElement('h1', 'hello world');
	}
}).$mount('#app')
```

けれど、[関数でテンプレートをつくろうとする](https://jp.vuejs.org/v2/guide/render-function.html#createElement-引数)と、プロパティや入れ子要素など定めるものが多ければ、かなり面倒になります。そこで、引数として替わりに渡せるのが、単一ファイルコンポーネント(.vue)のインスタンスです。

はじめにみたVue CLIプロジェクトのJavaScriptコードは、つぎのように書き改めると、もう少しわかりやすいかもしれません。

```js
new Vue({
	// render: h => h(App),
	render(createElement) {
		return createElement(App);
	}
}).$mount('#app')
```

なお、`render()`メソッドを使わずに、[スプレッド構文](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax)で`Vue`インスタンスを渡しても動きました(「[When I should use render: h => h(App)?](https://stackoverflow.com/a/42536707/5532982)」参照)。

```js
new Vue({
	// render: h => h(App),
	...App
}).$mount('#app')
```

ところで、`render()`メソッドの引数を`h`とした理由が、Vue.jsのIssues「[What does `h` mean?](https://github.com/vuejs/babel-plugin-transform-vue-jsx/issues/6)」で開発者のEvan You氏から明かされています。HTML構造をつくる"Hyperscript"の頭文字で、タイプもしやすいからとのことです(「[Render Function API](https://frontendmasters.com/courses/advanced-vue/render-function-api/)」参照)。

> It comes from the term "hyperscript", which is commonly used in many virtual-dom implementations. "Hyperscript" itself stands for "script that generates HTML structures" because HTML is the acronym for "hyper-text markup language".
ETLについて

![image.png](https://qiita-image-store.s3.amazonaws.com/0/257568/6dbd4ed4-5afe-842a-0590-e3a9b79d4500.png)

データ分析基盤入門を読んだまとめ。
個人的に必要そうな部分についてのみ。

ETLについて。

## 総論
データを活かす文化の中で設計・開発・運用する価値があるもの

## ETLとは
- データを**抽出**(Extract)、**変換**(Transform)、**読込**(Load)させるまでのステップのこと。
  - Web上のログと呼べる情報を収集し、扱い易いように加工し、データとして保管するまでのステップ

## 一般的なデータ処理ワークフローとその対象例
1. 収集
  - アプリケーションログ
  - ユーザー属性情報
  - 広告インプレッション
  - 3rdパーティークッキー
2. 前処理
  - ロボットのアクセス除外
  - IPアドレスからの位置判定
  - ユーザーエージェントの構造化
  - マスタデータを用いたログへのユーザー属性付与
3. 分類・集計・分析
  - 分類や集計
  - A/Bテスト
  - ファネル分析
  - セグメント分析
  - 機械学習処理
4. 保存
  - データベースへの登録
  - 分散処理システムへの転送
  - ストレージへの圧縮保存(アーカイブ)
  - 統計データの記録
5. 活用
  - レコメンドエンジンAPIの参照先データ
  - リアルタイム取引
  - BIアプリケーションを用いたデータの可視化

## データ分析システムの可用性
継続して稼動させるために重要な考え方
1. 最大1回しか送信しないこと
2. 最低1回しか送信しないこと
3. 正確に1回送信すること

真に3を実現するのは難しい
3.を満たすには1.2.を保障しなければならず、1.2.を満たそうとするとスループットは低下する

### リトライ処理の想定
考慮すべきケース例

- データ保存先容量の不足
- データ保存先との通信失敗
- ハード要因による処理中断

### 可用性向上に必要なこと
- 分散メッセージキューシステムの導入
  - 冪等性やリトライ処理を担保すること
  - ただ管理対象は増える

### LTEを設計する上で必要になる判断軸
- 保有・分析コスト
- 情報鮮度
- スケーラビリティ
- スキーマ作成のタイミング
- 中間データ保持の有無

## 書籍情報
鈴木 健太, 吉田 健太郎, 大谷 純, 道井 俊介, データ分析基盤構築入門
https://amzn.to/2B6f8G5


## 雑感
身近な部分からデータを可視化してみようと思った。
第45話 オイラーの定数

この記事は[仮面ライダービルドの数式](https://qiita.com/izmktr/items/e26a624e79bce3edccc9)の第45話です。


```math
3^{\frac{2}{γ}}≅45
```

この式は次の式を変形させたものです。

```math
(\sqrt{45})^γ=3.000060964⋯
```

γはオイラーの定数と呼ばれ、次の式で表される数です。

```math
\lim_{n→∞}⁡[\frac{1}{1}+\frac{1}{2}+\frac{1}{3}+⋯-\log{⁡n} ]=0.5772156649…
```

自然数の逆数和(1/1+1/2+1/3+…)のことを調和級数といいます。
調和級数は無限大に発散します。
ところが、当初は適当な値に収束するのではと予想されていました。
それぐらい発散が遅いのです。
しかし、簡単な方法で発散を証明できます。

```math
\frac{1}{1}+\frac{1}{2}+\frac{1}{3}+\frac{1}{4}+⋯=
\frac{1}{1}+\frac{1}{2}+(\frac{1}{3}+\frac{1}{4})+(\frac{1}{5}+\frac{1}{6}+\frac{1}{7}+\frac{1}{8})+⋯\\
>\frac{1}{1}+\frac{1}{2}+(\frac{1}{4}+\frac{1}{4})+(\frac{1}{8}+\frac{1}{8}+\frac{1}{8}+\frac{1}{8})=1+\frac{1}{2}+\frac{1}{2}+\frac{1}{2}+⋯
```

1/3と1/4は1/3の方が大きです。
このように2nの部分で区切って足し合わせると、1/2の塊が無限に出てきます。
1/2を無限に足せばもちろん無限大になるので、それより大きいはずの調和級数も無限大に発散します。

調和級数の意外な例として、板のはみ出しがあります。
机の端に板をおいたとき、半分までなら板が落下せずはみ出しておけます。
その下に板を置くとき、1/4までならはみ出せます。
その下の板は1/6まではみ出せます。

調和級数が発散するとするなら、この板は何枚も重ねることで
無限にはみ出して置くことが出来ます。
　
この調和級数がlogとの差でいい感じに収束する、というのがオイラーの定数になります。
ですから、調和級数は$\log_{e}⁡x$で近似されます。
実際、無限大に発散するときに使った補助関数は2nごとに1/2ずつ増えていきますから、
$\log_{2}⁡x$の増え方です。対数で近似するのはなんとなく想像できます。

あと、冒頭の式が整数に近いのは多分偶然だと思います。
いくら調べても出てこないし…多項式に展開されるとは思えないし…ねぇ。
PHP: アルファベットの文字リストをプログラム的に生成する方法

PHPでアルファベットのAからZまでの文字のリスト(配列)をべた書きしたくないときなどに使える、アルファベットをプログラム的に生成する方法です。

やり方はシンプルに`range`関数に`A`と`Z`を渡します。

## 大文字のリストを生成する方法

```php
<?php

assert(
	[
		'A', 'B', 'C', 'D', 'E', 'F',
		'G', 'H', 'I', 'J', 'K', 'L',
		'M', 'N', 'O', 'P', 'Q', 'R', 
		'S', 'T', 'U', 'V', 'W', 'X',
		'Y', 'Z',
	] === range('A', 'Z')
);
```

## 小文字のリストを生成する方法

```php
assert(
	[
		'a', 'b', 'c', 'd', 'e', 'f',
		'g', 'h', 'i', 'j', 'k', 'l',
		'm', 'n', 'o', 'p', 'q', 'r',
		's', 't', 'u', 'v', 'w', 'x',
		'y', 'z',
	] === range('a', 'z')
);
```

## 大文字と小文字のリストを生成する方法

```php
assert(
	[
		'A', 'B', 'C', 'D', 'E', 'F',
		'G', 'H', 'I', 'J', 'K', 'L',
		'M', 'N', 'O', 'P', 'Q', 'R', 
		'S', 'T', 'U', 'V', 'W', 'X',
		'Y', 'Z',
		'a', 'b', 'c', 'd', 'e', 'f',
		'g', 'h', 'i', 'j', 'k', 'l',
		'm', 'n', 'o', 'p', 'q', 'r',
		's', 't', 'u', 'v', 'w', 'x',
		'y', 'z',
	] === array_merge(range('A', 'Z'), range('a', 'z'))
);
```

### ちなみに`range('A', 'z')`はうまいくいきません

大文字と小文字のアルファベットを取得したいときに`range('A', 'z')`のようにしたいところですが、`'Z'`と`'a'`の間に`'['`, `'\\'`, `']'`, `'^'`, `'_'`, <code>'`'</code>が入るためうまいくいきません。

```php
assert(
	[
		'A', 'B', 'C', 'D', 'E', 'F',
		'G', 'H', 'I', 'J', 'K', 'L',
		'M', 'N', 'O', 'P', 'Q', 'R', 
		'S', 'T', 'U', 'V', 'W', 'X',
		'Y', 'Z',
		'[', '\\', ']', '^', '_', '`', // これ
		'a', 'b', 'c', 'd', 'e', 'f',
		'g', 'h', 'i', 'j', 'k', 'l',
		'm', 'n', 'o', 'p', 'q', 'r',
		's', 't', 'u', 'v', 'w', 'x',
		'y', 'z',
	] === range('A', 'z')
);

```
Vue.js $emitで発生したイベントに親と子の引数を渡す

子からの引数だけでなく、プラスして親の引数も欲しい時。


```javascript:parent
<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <child @child-event="handler($event, index)">
        {{ item.name }}
      </child>
    </div>
  </div>
</template>

<script>
import Child from './child.vue'

export default {
  components: {
    Child,
  },
  data() {
    return {
      items: [
        { name: 'たろう' },
        { name: 'はなこ' },
      ],
    }
  },
  methods: {
    handler(event, index) {
      console.log(event + items[index].name);
    },
  },
}
</script>

```

```javascript:child
<template>
  <button @click="event">
    <slot></slot>
  </button>
</template>

<script>
export default {
  methods: {
    event() {
      this.$emit('child-event', '山田');
    },
  },
}
</script>

```


```
// 山田たろう
// 山田はなこ
```
[自分用メモ]リーダブルコード復習の手引き

## はじめに
この記事は、私が今後リーダブルコードの復習し易くするための、
概要をまとめた手引書です。

## 要諦
コードは読みやすくなければいけない。
具体的には、他の人が自分のコードを読んで、<strong>理解する時間を最短にすること。</strong>
<br>

## 1章　理解しやすいコード
<strong>他の人が最短時間で理解できるようにする。</strong>

重要なのは、コードの長さが短いことではなく、他の人が読んで理解するのにかかる時間が短いこと。
そのためには、コメントがあることによりコードが長くなってしまっても、理解しやすくなるならば必要なこと。
<br>

## 2章　名前に情報を詰め込む
<strong>名前を見ただけで、情報が読み取れるようにする。</strong>

### 明確な単語を選ぶ
一見すると問題なさそうな単語でも、類語辞典で、もっと具体的で、限定的な単語があるかを調べる。

### 凡用的な名前は避ける
``hoge``や``foo``のような名前をつけるのは、名前のことを考えていない。

### 名前に情報を追加する
知らせなければいけない情報などがあったら、追加する。
例えば、ミリ秒を表す場合は、後ろに``_ms``をつける。

### 名前のフォーマットで情報を伝える
クラスはキャメルケース、アンダースコアで始まるとローカル変数、などと名前のフォーマットによって区別する。
<br>

## 3章　誤解されない名前
<strong>他の意味と勘違いされないかを考える。</strong>

### 限界値を含めるときはminとmaxを使う
limitだけでは、最大なのか、最小なのかがわからない。
最小の場合は、``min_limit``
最大の場合は、``max_limit``

### 範囲を指定するときはfirstとlastを使う
rangeだけでは、どこからなのか、どこまでなのかがわからない。
ここからの場合は、``first_range``
ここまでの場合は、``last_range``

### 複数の名前を検討する
考えうる複数の名前を比較して、最も適切な名前を選ぶ。
<br>

## 4章　美しさ
<strong>読み手に優しい、一貫性のあるレイアウトにする。</strong>

### 一貫性のあるコードに整列する
余白、配置、順序に気をつけて、それぞれのコードを同じように整列させる。
<br>

## 5章　コメントすべきことを知る
<strong>コメントの目的は、書き手の意図を読み手に知らせること。</strong>

### コメントするべきでは「ない」こと
コードからすぐにわかることをコメントに書かない。

### 自分の考えを記録する
なぜこのようなコードになったのかなどの意図を書く。

### コードの欠陥にコメントをつける
改善が必要なコードに対して、``#問題がある``や``あとで改善する``などの、これからコードをどうしたいかについてのコメントをつける。

### 定数にコメントをつける
その定数の値にした意図を知らせるため。

### 質問されそうなことを想像する
他の人は、コードを書いた当人ほどコードの意図を理解していない。
なので、読み手の立場になって質問されそうなところがないかを考える。

### ハマりそうな罠を告知する
関数やクラスを文書化するときには、「このコードを見てびっくりすることは何か？どんなふうに間違えて使う可能性があるか？」を自分に問いかける。
コードを使うときに直面する問題を前もって予測しておく。

### 新しくチームに参加した人に対してコメントをつける
新しくチームに参加した人に、コードのことを教えることを仮定する。
その場合に、教えるようなことをコメントに書くべき。

### 要約コメント
長くて、一見では把握しきれない関数などに、どのような働きをする関数なのか説明を書く。
<br>

## 6章　コメントは正確で簡潔に
<strong>コメントは領域に対する情報の比率が高くなければならない。</strong>
コメントは冗長にならないように、簡潔にまとめる。

### あいまいな代名詞を避ける
「これ」や「それ」などのあいまいな代名詞を使わずに、指す対象を明確に書く。

### 情報密度の高い言葉を使う
平易な言葉で長く書くよりも、一言で意味が取れる言葉を選んで短くまとめる。
</br>

## 7章　制御フローを読みやすくする
<strong>コードの読み手が立ち止まったり読み返したりしないように書く。</strong>

### 条件式の引数の並び順
``if length >= 10``
``if 10 <= length``

上のコードの方が良い。
<strong>左辺に調査対象(変化する値)をおく。</strong>

### 三項演算子
三項演算子を使えば、コードは短くなるが、読みにくくなる場合もる。
なので基本的には、``if/else文``を使い、簡潔になる場合に三項演算子を使う。
<strong>コードを短くするのではなく、他の人が理解するのにかかる時間を短くする。</strong>
<br>

## 8章　巨大な式を分割する
### 説明変数
式を簡単に分割するには、式を変数に代入して使う。
この変数を<strong>説明変数</strong>という。

``if line.split('|')[0].strip() == "root":``
説明変数を使うと、以下になる。

``username = line.split('|')[0].strip()``
``if username == "root":``
<br>

## 9章　変数と読みやすさ
### コードが読みやすくならない変数は削除する
以下の条件に当てはまる変数は、本当に必要か考える。
* 複雑な式を分割できていない。
* 変数にを使うことによって、より明確にできていない。
* 一度しか使っていないので、重複コードの削除になっていない。

### 変数のスコープを縮める
スコープが広いと、把握すべき情報が広がってしまう。
なので、読みやすくするために範囲を狭める。
JSONを整形＆色付けして表示するCLIを作ってみた

# 作ったもの

JSONを見やすく整形し、要素の型に応じて色を付けて表示するCLIを作成した。
小さなJSONを確認したい場合に、ただ整形して出力するだけでは、どの値が何の意味を持つのかなどが分かりづらい。また、見やすくするためにエディタを開くのもめんどくさい。
そのため、色付けしてすぐに出力するツール作ってしまえと思い、今回のCLIを作成してみた。

作成物は https://github.com/x-color/jc に上げてある。

![demo1.png](https://qiita-image-store.s3.amazonaws.com/0/279498/af12828f-71c4-eebc-e774-a62a59c93e33.png)

# 使用したライブラリ

- [spf13/cobra](https://github.com/spf13/cobra)

spf13/cobra はCLI作成用のライブラリ。これを使用すると簡単にいい感じのCLIを作成することができるのでとても便利。

# 内部での処理 (未知のJSONを解析する方法)

Go言語であらかじめ構造がわかっているJSONを読み込む際には、構造体を事前に定義することで構造体に値を流し込むことができる。
しかし、未知のJSONを読み込む際には、構造体を事前に定義することができない。構造体を定義しないでGoの標準の機能を用いてJSONを読み込むと、読み込んだデータの型は `interface{}` となってしまい型固有の様々な処理を行うことができなくなってしまう。
なので、読み込んだデータに対して何か処理を行いたい場合は、処理内容に応じて型を変換する必要が出てくる。

今回作成したCLIでは、

- 色を付ける要素(数値、文字列、真偽値)の判定
- オブジェクトと配列の中の要素を取得

の2点を行うために、型変換を行う必要があった。

`interface{}` を別の型に変換する際には、switchと[Type Assertion](https://tour.golang.org/methods/15)を用いると簡単にできる。

実際に使用したコードを簡略化したものが以下のものとなる。

```go
func dataToString(data interface{}) string {
	switch convertedData := data.(type) {
	case int64, float64:
		return numberToString(data) // 要素が数値の時の処理
	case bool:
		return boolToString(data) // 要素が真偽値の時の処理
	case string:
		return stringToString(data) // 要素が文字列の時の処理
	case []interface{}
		return sliceToString(convertedData) // 要素が配列の時の処理
	case map[string]interface{}:
		return objToString(convertedData) // 要素がオブジェクトの時の処理
	}
	return ""
}
```

上記の関数は、`interface{}`型のデータを受け取り、そのデータの型を解析し色付けした文字列に変換していく。
型が`[]interface{}`,`map[string]interface{}`のときは、`sliceToString()`,`objToString()`の内部でスライスやマップの持つ要素ごとに再度この関数を呼び出している。
そのため、読み込んだ未知のJSONデータをこの関数に渡すことで、再帰的に型を解析し色付けした文字列に変換していくことができるようになっている。
OrdererとPeerのファイル構成

# OrdererとPeerのファイル構成

次の課題は、MSPの構築方法と、yamlファイルの定義を見ていくこと。

- [Fabric 1.3.0 > Membership Service Providers (MSP)](https://hyperledger-fabric.readthedocs.io/en/release-1.3/msp.html)

```
/
|-- etc
|   `-- hyperledger
|       `-- fabric
|           |-- configtx.yaml
|           |-- core.yaml
|           |-- etcdraft
|           |   |-- tls-client-1.pem
|           |   `-- tls-server-1.pem
|           |-- msp
|           |   |-- admincerts
|           |   |   `-- admincert.pem
|           |   |-- cacerts
|           |   |   `-- cacert.pem
|           |   |-- config.yaml
|           |   |-- keystore
|           |   |   `-- key.pem
|           |   |-- signcerts
|           |   |   `-- peer.pem
|           |   |-- tlscacerts
|           |   |   `-- tlsroot.pem
|           |   `-- tlsintermediatecerts
|           |       `-- tlsintermediate.pem
|           `-- orderer.yaml
|-- usr
|   `-- local
|       `-- bin
|           `-- orderer or peer
`-- var
    `-- hyperledger
        `-- production

17 directories, 13 files
```