OmniAICreator/Qiita-1.07M huggingface dataset:
swagger で CSV get/put を自分はこう書いた話 にゃ （正しいとは言っていない）

schema の書き方がわからないから雑にやったった


```
api:
  parameters:
    - xxxx
  get
    summary: csv download
    description: |
      xxxx
  response:
    200:
      description: |
        OK

        * col1  integer   xxxxx
        * col2  string  xxxxx
        * col3  integer   xxxxx

        Example)
        100,Bob,200
        200,Max,10
        300,Tom,4400
    400:
      $ref: '#/common/error'
  put
    summary: csv upload
    description: |
      xxxx
    parameters:
      - name: body
        in: body
        required: true
        description: |
          OK　

          * col1  integer   xxxxx
          * col2  string  xxxxx
          * col3  integer   xxxxx

          Example)
          100,Bob,200
          200,Max,10
          300,Tom,4400
        schema:
          text/csv:
            schema:
              type: string
    responses:
      200:
        description: OK　
      400:
        $ref: '#/common/CsvBadRequest'

```

[Gist](https://gist.github.com/YooWaan/6d2529fa95fadfe048e8269f71c3d7cf)
Codewars で複数のプログラミング言語で全ての問題を解いていきたい時に便利な操作

[![](https://www.codewars.com/users/JavaCommons/badges/large)](https://www.codewars.com/users/JavaCommons/completed) クリックすると私が解いた問題が見れます。
\# 今回は画像(スクショ)だけで手抜き～！

\# Codewars についてご存じない方は、先に[『【Codewars】ブラウザでコーディングの基礎からトレーニングできるサイト (ブラウザでvimが使えて32種類のプログラミング言語に対応。4000個以上の問題が投稿されています！)』](https://qiita.com/javacommons/items/7c473cda7825ab99e08c) をお読み頂くようお願い致します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/140610/3441c439-187b-2b5c-6829-6129bd74d01d.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/140610/c829e06c-2e7a-2cd6-3caf-d33d4a538b9f.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/140610/f1fc2a95-10cf-d32a-a36a-e6b0eecfae83.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/140610/e9ee16eb-aea1-079a-ccc4-a2af1d845d77.png)

このような感じで、View Profile メニューから Kata タブを選択することで、他の言語で解き忘れがないか確認できます。すでにやった問題を自分の学習中の言語全てで解いてみたい方におススメです。
RasPiZeroにシャットダウンボタン付けた

#経緯
・[サイネージで操作不能で電源いきなり落とす](https://qiita.com/koukiwf/items/e1749da713801d37ec92)の怖くね？という話される
・せっかくだしシャットダウンボタンつけるか

#gpio環境セットアップ
・[ここ](https://gpiozero.readthedocs.io/en/stable/installing.html)に従って
　sudo apt install python3-gpiozero
・WiringPiをgitから持ってきて入れる

#チェック
・物理結線[gpioXX-スイッチ-GND]をin,upに設定して離せば1、押したら0になるのを確認
・物理番号とgpio番号違うことに注意（ミスって画面バグった）
・gpioXX使ってたのになぜかXY番で試しててあれー？してた

#プログラム
・ググルといっぱい出てきます。お借りしました。
・権限追加
・スタートアップ（/etc/rc.local）に追加。末尾に&で裏常駐にしました。

#起動ボタンの追加
・GPIO3をGMDに落とすと通電状態で電源落ちてる場合は起動してくれるらしい
・2極2ペアの4極スイッチ（なんて言えばいいかわからない）の今回使わなかったペアにGPIO3繋げるだけ

#注意
・今書きながら気付いたんですけどシャットダウン用プログラムを表で無限ループで監視させてたら
　ログイン前に入力待ち始まって、実機でログインできなくなるのでは？？？
　~~何故裏常駐にしなかったのか。~~ 常駐にしてログインできるようになりました。
ESLintの共有設定何使ってるの？eslint-config-〇〇を比べてみた。

ESLintを使っているプロジェクトっていっぱいあるけど、みなさんどういう設定にしているのか気になったので、比較してみました。

## 共有設定


ESLintを導入しただけでは、何も動作しないので、`.eslintrc`に設定項目を追加していく必要がありますが全項目を手動で設定していくのは、無理があります。（項目数が多すぎるので）

そこで、`extends`という共有設定機能を使って、ベースとなる設定を読み込むことができます。
みなさんのプロジェクトでも読み込んでいるのではないでしょうか？

以下の例は、ESLintが推奨する設定を読み込んでいます。

```json:.eslintrc
{
    "extends": "eslint:recommended"
}
```

他にも、Airbnbさんが出している[eslint-config-airbnb](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb)を読み込んだりすることができます。

```json:.eslintrc
{
    "extends": "airbnb"
}
```

この共有設定はみなさんどれを使っているのかな〜


## eslint-config-hogeを比較してみた

ということで、[npm trends](https://www.npmtrends.com/)で比較してみました。

比較対象として、[npm](https://www.npmjs.com/search?q=eslint-config-&ranking=popularity)上に上がっている有名どころ、`airbnb`, `airbnb-base`, `standard`, `google`, `prettier`で比較してみました。

以下が結果になります。


<img width="1137" alt="スクリーンショット 2019-02-15 17.36.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/92083/1d39a55e-7187-127d-d55b-690af42410f0.png">


はい。`eslint-config-airbnb-base`が一番多い結果でした。
続いて、airbnb > prettier > standard >>> google

私自身も`airbnb-base`を好んで使っていたので、なんかホッとしました。
もうしばらくは、`airbnb-base`を使っていて問題なさそうですね。
広色域で24ビットカラーは割とアウト

# 結論

24ビットカラーで広色域（DCI-P3）は無理があるので、iPhoneのカメラの写真がHEIF（拡張子heic）になったのは必然だった。

# 総天然ショック

良い子のみんな！　PC-9801の4096色パレットの色域がどれだけ狭かったか、よく覚えているよね！

量子ドットや4K8K（BT.2020）やiPhone（DCI-P3）でいよいよsRGBがオワコンになりつつある（ただしWebを除く）。来るべきニューメディア時代に、24ビットカラーは対応できるのか？

そんな問題意識のもと、値が1変わったときに、sRGBとAdobeRGBの色がどれだけ変わるのか調べてみた。

`pip install colormath`が必要。

```python
import numpy as np
from colormath.color_diff import delta_e_cie2000
from colormath.color_objects import sRGBColor, AdobeRGBColor, LabColor
from colormath.color_conversions import convert_color

TEST_COLOR = None

def to_lab(srgb):
    return convert_color(TEST_COLOR(*(srgb / 255)), LabColor, target_illuminant='d65')

def srgb_to_lab(srgb):
    if len(srgb.shape) == 1:
        lab = to_lab(srgb)
        return lab
    else:
        labs = np.apply_along_axis(to_lab, 1, srgb)
        return labs

ciede2000 = np.vectorize(delta_e_cie2000)
STEP = np.eye(3)

def cd(c):
    return ciede2000(srgb_to_lab(c),  srgb_to_lab(c - STEP))

def calc_maxcd_by_one():
    r = np.arange(1, 255, 16)
    grid = np.array(np.meshgrid(r, r, r)).T.reshape(-1,3)
    cds = np.apply_along_axis(cd, 1, grid)
    a = grid[int(cds.argmax() / 3)]
    b = a - STEP[cds.argmax() % 3]
    
    return cds.max(), a, b

def main():
    global TEST_COLOR
    TEST_COLOR = sRGBColor
    maxcd, color_from, color_to = calc_maxcd_by_one()
    print('sRGB:')
    print(f'Max Color Difference of 1-step: {maxcd}  color: {color_from} -> {color_to}')

    TEST_COLOR = AdobeRGBColor
    maxcd, color_from, color_to = calc_maxcd_by_one()
    print('Adobe RGB:')
    print(f'Max Color Difference of 1-step: {maxcd}  color: {color_from} -> {color_to}')

if __name__=='__main__':
    main()
```

結果：

```
sRGB:
Max Color Difference of 1-step: 1.1805655454210477  color: [33 33 33] -> [33. 32. 33.]
Adobe RGB:
Max Color Difference of 1-step: 1.6538699060386761  color: [33 33 33] -> [33. 32. 33.]
```

この色差（color difference）の単位はCIE DE2000（ΔE00）。古い色差（ΔE76）では、

- 無彩色付近
- 近い色同士

で人間の知覚よりもずっと小さな値が出てしまっていた問題を解消している。

そもそも色差は人間の感覚を数値化したもので、だいたい以下のような感覚に対応している（ことになっている）。

|ΔE|感覚|
|:--:|:---:|
|<= 1.0|人間の目には違いがわからない
|1-2|よく見ると違いがわかる
|> 2 |一目で違いがわかる

もちろん現実には色差3がわからなかったり、プロが1以下の色差を見分けたりする。とはいえ、見比べても10の差がわからなかったり、0.1を見分けられたりすることはない。

さて、sRGBで1.18、AdobeRGBで1.65の色差をどう考えればいいのか。「よく見ると違いがわかる」ということになっている。実際に私のディスプレイでsRGBで見ると、かなり苦戦するものの、見える。

見える！

24ビットカラーが落とし所として絶好すぎて抜け出せない分野はたくさんある。帯域不足でエセ8bit時代みたいな絵になってる状態（JPEG 2000でありがち）では、こんな話に意味はない。

高品質な画像を求めるなら、広色域で24ビットカラーは無理がある。iPhoneがHEIF（拡張子heic）の30ビットカラーに移行したのも当然だった。

# ちなみに

ProPhoto RGB（ROMM RGB）では2を超えてくる。48ビットカラーのリニアワークフローがお勧め。
シェルスクリプトでゼロパディング

seqやprintfを用いたゼロパディングについての備忘録

#基本
seqコマンドで-fオプションを用いる場合

```console
$ seq -f %02g 0 9
00
01
02
03
04
05
06
07
08
09
```

printfコマンドを用いる場合

```console
$ for i in `seq  0 5`;do printf %03d\\n ${i};done
000
001
002
003
004
005
```


#応用
```console
$ for i in `seq 0 2`;do echo `printf %02d $i` `printf %02d $((i+1))`;done
00 01
01 02
02 03
```

例えばserver01, server02, ...というように連番で名前がついたサーバーに対して共通のデータを置きたいときに

```console
$ for i in `seq 0 9`;do ssh server`printf %02d ${i}` rsync -avz data server`printf %02d $((i+1))`:;done
```

としてやるとserver01からserver02, server02からserver03へのrsyncとなってserver01は早めにいじることが出来る。
picoCTF 2018 assembly-0 - Points: 150

#問題

https://2018game.picoctf.com/problems

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/be30173e-35ea-842a-d424-5520a2e1fec1.png)

#解いてみた

```
asm0（0xc9,0xb0）のときに何を返しますか？
フラグの形がいつもと違います。
```

のような意味でしょうか。

ソースをダウンロードしてサクラエディタで見てみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/3544d155-2385-983b-30ef-ba2fb3fed818.png)

アセンブラ的な。。。
文字化けしているところがあるのでBzで見てみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/68cbe6a8-5c79-d450-b26e-8e87ec44d458.png)

ということでまとめると以下になります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/87c5d07c-47eb-2515-9238-7a93e99559a9.png)

問題文から

```
DWORD PTR [ebp+0x8]が0xc9
DWORD PTR [ebp+0xc]が0xb0
```

なので9行目と10行目の処理を終えると

```
eaxは0xc9
ebxは0xb0
```

になる。
そして11行目でebxの値がeaxにコピーされるので

```
eaxは0xb0
ebxは0xb0
```

になる。そのあとeaxは操作されてない。
戻り値はeaxの値なので0xb0が答え。
Arduinoで信号機をつくるよ！

# 用意するもの
- Arduino micro
- [信号機キット](http://www.aitendo.com/product/16653)
　<br>信号機キットのLEDと抵抗はサイズが合わなかったので、自分で用意

# Arduinoに書き込む
まずは[IDE](https://www.arduino.cc/en/main/software)をインストール
[ツール] → [ボード] と [シリアルポート] を設定
<img width=50% alt="スクリーンショット 2019-02-15 17.21.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/333838/1b560902-3ba6-b64b-d22c-e5b53a65e79e.png">

LEDの指示をするプログラムを書く

```c++
// traffic lights

// それぞれのLEDを接続するピンを設定
const int GREEN = 2;  //GREENは2番に接続
const int YELLOW = 3; //YELLOWは3番に接続
const int RED = 4;    //REDは4番に接続


// ピンをどう設定するかArduinoに伝えてあげる
void setup() {
  pinMode(GREEN, OUTPUT);  //デジタルピンを出力に設定
  pinMode(YELLOW, OUTPUT); //デジタルピンを出力に設定
  pinMode(RED, OUTPUT);    //デジタルピンを出力に設定
}


// loop()の内容がひたすら繰り返される
void loop() {
  //GREEN ON & OFF
  digitalWrite(GREEN, HIGH);
  delay(1000);
  digitalWrite(GREEN, LOW);

  //YELLOW ON & OFF
  digitalWrite(YELLOW, HIGH);
  delay(500);
  digitalWrite(YELLOW, LOW);

  //RED ON & OFF
  digitalWrite(RED, HIGH);
  delay(1000);
  digitalWrite(RED, LOW);
}
```
完成！かわいいー♡
<img width=40% alt="スクリーンショット 2019-02-15 17.21.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/333838/7e1c303e-fc3f-f3db-eb17-96aefebc6ff8.gif">

# 困ったこと
シリアルポートにArduinoが認識されず、色々ハマって困ってたのですが、microUSBケーブルを変えたら無事認識されました。
https://forum.arduino.cc/index.php?topic=570440.0
https://qiita.com/ryusukefuda/items/5b2edea6b62794069209
VisualStudioでデバッグ実行では動くのにビルドしたらexeが動作しない場合の対処

# 対処
実行しているexeは正しくbinフォルダ以下のexeかを確認する。
つまり、プロジェクト以下のbinフォルダにあるexeを使用すること。

！！！間違っても、objフォルダ以下のexeを使ってはいけない。それは罠だ！！！

# なにが起きたか？
タイトル通り。非常につまらないミスだが、binフォルダ以下のexeを実行すべきところを、objフォルダ以下のexeと取り違えると、実行しても何も起こらない。
（厳密にはイベントビューワで確認すると、DllNotFoundExceptionやSystem.NotImplementedExceptionが発生している。）

# 原因
というか、仕様だが、VisualStudioのobjフォルダはビルド時の中間ファイルが置かれる場所。なので、dllやビルド時にコピーされるリソースファイル等は置かれていない。
どちらもReleaseフォルダができるので、取り違えやすいので注意しよう。
クラウドでWebサーバを構築する

#この文書は何？
クラウドコンピューティングを利用してWebサーバを構築する方法の一つ、GoogleCloudPlatformを使う方法が書かれています。

#GoogleCloudPlatformを使ってWebサーバを構築する
手順は次の通り。
1. 仮想マシンを作成し、IPアドレスを固定する
2. 作った仮想マシンにWebサーバソフトをインストールする
3. 仮想マシン起動時にWebサーバソフトが自動的に実行されるようにする
4. 仮想マシンを再起動する

##仮想マシンを作成する
1. 「≡ > Compute Engine > VM インスタンス」をクリック
2. 「VM インスタンスを作成」をクリック
![VMインスタンスを作成.png](https://qiita-image-store.s3.amazonaws.com/0/358672/7d476031-9770-e852-0de7-1f172b62e67a.png)
3. 名前：好きな名前を入力する。（例：my-http-server）
4. リージョン：「us-east4」以外の、米国リージョンを選ぶ。（例：「us-central1」）
5. ゾーン：リージョン選択時に自動的に指定される。
6. マシンタイプ：「micro」
7. ブートディスク
    1. 「変更」をクリック
    2. 「OSイメージ」をクリック
    3. 「CentOS7」を選択
    4. ブートディスクの種類：「標準の永続ディスク」
    5. サイズ (GB)：「30」
6. IDとAPIへのアクセス
    7. サービスアカウント：「Compute Engine default service account」
    8. アクセススコープ：「デフォルトのアクセス権を許可」
9. ファイアウォール
    10. HTTPトラフィックを許可する：チェック
    11. HTTPSトラフィックを許可する：チェックしない
12. 「作成」をクリック

すると、VMインスタンスが作成されます。

###IPアドレスを固定する
1. 「≡ > VPCネットワーク > 外部IPアドレス」をクリック
2. さっき作った仮想マシンのアドレスのタイプを「エフェメラル」から「静的」に変更する
すると、「新しい静的IPアドレスの予約」画面が出るので、名前と説明を記入して「予約」をクリック
    - 名前：my-http-server-ip
    - 説明：空欄のまま

##作った仮想マシンにWebサーバソフトをインストールする
1. 「≡ > Compute Engine > VM インスタンス」をクリック
2. さっき作った仮想マシンの「SSH」をクリック

すると、コンソール画面が出てきますので、次のコマンドを実行して、Webサーバソフト「httpd」をインストールします。

    $ sudo yum install httpd
    ...
    Is this ok [y/d/N]: y

##仮想マシン起動時にWebサーバソフトが自動的に実行されるようにする
前項の作業で使ったコンソール画面で、引き続き次のコマンドを実行し、httpdが仮想マシン起動時に自動的に実行されるようにします。

    $ sudo systemctl enable httpd.service

最後に「exit」コマンドを実行すると、コンソール画面が閉じられます。

    $ exit

##仮想マシンを再起動する
1. 「≡ > Compute Engine > VM インスタンス」をクリック
2. さっき作った仮想マシンの「︙ > 停止」をクリック。
    - メッセージが表示された場合はさらに「停止」をクリック
3. しばらく待ち、アイコンが「■」に変わってから「︙ > 開始」をクリック。
    - メッセージが表示された場合はさらに「起動」をクリック

##テストページを表示する
1. 「≡ > Compute Engine > VM インスタンス」をクリック
2. さっき作った仮想マシンの外部IP「xxx.xxx.xxx.xxx」をクリック
すると、「Apache HTTP Server Test Page powered by CentOS」というタイトルのページが表示されます。
これで、Webサーバの構築ができました。

# こちらもどうぞ
> [HTTPサーバのHTTPS化](https://qiita.com/__THANKS_JP__/items/185fb3403ae3e9691996)
> ドメイン名でアクセスできるApache HTTPサーバをHTTPS化する方法の一つ、フリーの証明書を発行する「Let's Encrypt」を利用する方法が書かれています。

#余談
クラウドコンピューティングによって、サーバに利用する常時起動させるためのマシンを所有していなくても、このように誰でも（Googleアカウントを所有していて、GoogleCloudPlatformを利用することができれば）Webサーバを構築することができます。
Elixir ~新春Streamまつり~

#ここまでのあらまし

わけあって、既存のドキュメントでの学習がペンディングになっています。
そこで、 [Elixir公式ドキュメント](https://hexdocs.pm/elixir/Stream.html#map/2) から前回扱ったStreamの関数のなかで、Enumで出てきたものをピックアップすることにしました！

#Stream.map

```elixir
iex>stream = Stream.map([1, 2, 3], fn x -> x * 2 end)
iex> Enum.to_list(stream)
[2, 4, 6]
```

これは1,2,3からなるマップに2をかける関数でしょうか。
しかしEnumから比べると2行目の存在意義が自分ではいまひとつわかりません。
一行目だけでiexをEnterすると[1, 2, 3]の答えが出力されます。

#Stream.filter

```elixir
iex>stream = Stream.filter([1, 2, 3], fn x -> rem(x, 2) == 0 end)
iex> Enum.to_list(stream)
[2]
```

こちらは2で割ってあまりがゼロになる答えとして[2]が出力されているのでしょう。
しかしやはりEnumからすると2行目の存在意義がよくわかりません。
1行目だけでiexをEnterすると[1, 2, 3]の答えがかえってきます。謎だ...。
2行目の処理もStream.mapのときと同じです。

#Stream.zip

```
concat = Stream.concat(1..3, 4..6)
iex> cycle = Stream.cycle([:a, :b, :c])
iex> Stream.zip(concat, cycle) |> Enum.to_list()
[{1, :a}, {2, :b}, {3, :c}, {4, :a}, {5, :b}, {6, :c}]
```

こちらに関しては、ドラムシーケンサーを作る際にEnum.zipを使いましたが、それと似て1..3、4..6とa, b, cの順当な組み合わせをすべて出力しているように思えます。

まだまだ英語のドキュメントの読解が足りないのと、Elixirそのものの重要な知識が欠落しているのでしょうか。
うまずたゆまず、頑張ります。
Kento Mizuno
公開データの置き場所

2019年2月15日調べ

Zenodoなどに、どの程度のデータをおけるのかまとめてみた。

ほかにあれば、追記予定

- [Zenodo](http://about.zenodo.org/policies/)
    - レコードに付き、50GBまで
    - > Volume and size limitations: Total files size limit per record is 50GB. Higher quotas can be requested and granted on a case-by-case basis.
- [Figshare](https://knowledge.figshare.com/articles/item/how-to-upload-and-publish-my-data)
    - パブリックなら無制限
    - > All figshare.com accounts are provided with 20GB of free private space and unlimited public space!
    - １ファイルあたり、デフォルト5GBだが、5TBまでは拡張可能
    - Google Dataset Searchでみつかるかもしれない。（未確認）

その他の情報
- [How do I expose my datasets to Google Dataset Search?](https://support.datacite.org/docs/how-do-i-expose-my-datasets-to-google-dataset-search)
12-Factors対応チェックリスト

# はじめに
いまさらながら、
[The Twelve-Factor App](https://12factor.net/ja/)
に対応しているかのチェックリストを作成

# The Twelve-Factor App とは
Adam Wiggins(Herokuの中の人)が2011年に書いたWebアプリケーションを構築およびデプロイするための設計原則

### 目的
1. 宣言的なフォーマットにより、プロジェクトに新しく加わった開発者が要する時間とコストを最小化する
2. 下層のOS依存関係を最小化し、移植性を最大化する
3. 環境差異を最小限にし、アジリティを最大化する継続的デプロイを可能にする
4. ツール、アーキテクチャ、開発プラクティスを大幅に変更することなくスケールアップできる

# 要素
1. コードベース
    1.1. アプリケーションごとにバージョン管理されている1つのコードベースがあるか
    1.2. 1つのコードベースから複数の環境(dev/stg/prd)に対してのデプロイが可能か
    `例) 環境毎に異なる値は環境変数から読み込むようにコーディングする`

2. 依存関係
    2.1. 依存関係が明示的に宣言・分離されているか
    `例) マニフェストファイルに依存するライブラリを記述し、記述外のライブラリを利用して動作することの無いように起動する`

3. 設定
    3.1. 環境毎に異なる設定は環境変数に格納しているか
    3.2. 環境毎に異なる設定をコード内定数に格納していないか
    `注) アプリケーション内部の設定についてはコードに書いてもOK`
    3.3. 環境毎に設定群を定義していないか
    `例) dev用, stg用, prd用などで用意するとスケールしづらいためNG`

4. バックエンドサービス
    4.1. コード内でローカルのサービスとサードパーティのサービスを区別していないか
    `例) コードを変更することなく、ローカルのMySQLDBからAWS RDSなどに切り替えられること`

5. ビルド、リリース、実行
    5.1. ビルド、リリース、実行の3つのステージが分離されているか
    * Buildステージ：指定されたバージョンを使って、コードを実行可能な形式に変更する。アプリケーション開発者によって開始される
    * Releaseステージ：ビルドステージで作成された成果物と設定を結合し、実行環境の中で実行できる形にする
    * Runステージ：アプリケーションを実行環境の中で実行する

    5.2. 全てのリリースに一意のリリースIDを持たせているか
    `例) https://semver.org/lang/ja/ 参照`

6. プロセス
    6.1. アプリケーションを1つもしくは複数のステートレスなプロセスとして実行しているか
    `スティッキーセッション(アプリケーションプロセスのメモリにセッション情報を持たせる)は使用しないこと。 セッション状態のデータは、有効期限を持つデータストア(MemcachedやRedis)に格納すべき`

7. ポートバインディング
    7.1. ポートバインディングを通してサービスを公開しているか
    `TCP/UDPを利用して接続させることにより、サービス間の連携が容易になる`

8. 並行性
    8.1. アプリケーションはプロセス単位でスケールするか

9. 廃棄容易性
    9.1. 素早くアプリケーションが起動するか
    `起動コマンド実行から数秒後にリクエストやジョブを受け取れるようになれることが理想。`
    9.2. 素早くアプリケーションが安全に終了するか
    `SIGTERMシグナル、予期しない停止が発生した場合を想定すること。`


10. 開発/本番一致
    10.1. コードcommit後、デプロイされるまでの時間を短くすること
    10.2. コードを書いた開発者がデプロイすること
    10.3. 環境毎のサービス(Database, Queue, Cache)の差異をなるべく最小限に抑えること
    `開発、ステージング、本番環境をできるだけ一致させた状態を保つ`

11. ログ
    11.1. ログを標準出力(stdout)として扱っているか
    `ログファイルに書き込んだりしていないか。ログは外部のログ解析サービスなどに送信する`

12. 管理プロセス
    11.1. 管理、メンテナンスタスクはリリースに絡めて実行されるようにする
    11.2. 環境毎に差異が発生するのを避ける為、タスクはアプリケーションコードと一緒にデプロイする

# 参考リンク
[12 Factor App - モダンなサービス運営に必要な12のインフラ的要素](https://qiita.com/awakia/items/04135ea89be787be1cfc#vii-%E3%83%9D%E3%83%BC%E3%83%88%E3%83%90%E3%82%A4%E3%83%B3%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0-port-binding)
[ワンポイントTwelve-Factor App](https://nazo.hatenablog.com/archive/category/%E3%83%AF%E3%83%B3%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88Twelve-Factor%20App)
[The Twelve-Factor Appで考えるAWSのサービス開発](https://www.slideshare.net/AmazonWebServicesJapan/the-twelvefactor-appaws)
picoCTF 2018 admin panel - Points: 150

#問題

https://2018game.picoctf.com/problems

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/30e23292-55dd-786b-c52a-b48cd4d23428.png)

#解いてみた

添付ファイルをダウンロードしてパスワードを明らかにする問題のようです。
ファイルをダウンロードします。

添付ファイルはpcapファイルだったのでwiresharkで読み込んでみます。
そんなに数はありませんでしたが、大体httpだろうという予想で絞り込んでみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/cb04651f-86f3-a57c-a4f8-46968f9879bf.png)

2個目の方のログインパケット見るとパスワードがフラグになってました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/b8d5de67-df84-935e-4186-660360794592.png)
JavaScript 　学習記録　（配列　オブジェクト）

# 配列

書き方
`[]`を使う

```js
const score = [80,90,50];
 console.log(score); // [80,90,50]と出力される
 console.log(score[0]); //80 と出力される
 console.log(score.length); // 3と出力される

 score[2]= 160;
 console.log(score);  // [80,90,160]と出力される
```

# オブジェクト

書き方
`{}`を使う

<img width="460" alt="スクリーンショット 2019-02-15 1.09.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/361567/cac4b5f8-c21f-422c-1a9d-85d41f6fbddb.png">

```js
const player = {
  name: 'Taguchi',
  score: 32,
};

console.log(player); //{name; “Taguchi” , score: 32}と出力される
```

＊ playerの名前だけを呼び出す方法

```js
// console.log(player.name);  //書き方は2種類。両方ともnameが呼び出される
// console.log(player['name']); // Taguchi
```

＊ 値を変更する場合の書き方

```js
player.score = 100;
console.log(player.score); // 100と出力される
```

＊ オブジェクトの要素を後から付け加える

```js
player.email = '***@gmail.com';
console.log(player); // 出力{name: "Taguchi", score: 32, email: "***@gmail.com"}
```

＊オブジェクトの要素を削除

```js
delete player.score;
console.log(player); //scoreが削除されている
```
どこからでも起動できるシェルスクリプトを書く

## はじめに

シェルスクリプトを書いていると、スクリプトを起動したディレクトリから実行できない状態によくなります。
複雑な処理を書いているときによくハマります。

これをなんとかするために、どこから起動しても同じ振る舞いをするシェルスクリプトを書くにはどうすればよいかを考えてみました。

## 問題の原因

特定のディレクトリからしか起動できなくなる最大の原因は、**カレントディレクトリに依存した処理を書いてしまう**ことが一番多いと思います。

```
cd .. # 相対パスでディレクトリを移動
cp file1.txt file2.txt # 相対パスでファイルを指定
```

## 実現したい要件

* ディレクトリやパスを指定する場合は、原則として相対パスでなく**絶対パスを使う**
* スクリプトのファイルがあるフォルダを起点にディレクトリをたどる

コードを書く前に、カレントディレクトリに関するシェルスクリプトの振る舞いについて実験してみる。

## 実験: サブプロセスの中で cd した場合、もとのプロセスのカレントディレクトリに影響するか？

カレントディレクトリが `/some/deep/dir` の状態で、 `/some/deep/dir/scriptA.sh` を起動した場合にどのような振る舞いをするかを確認する。

```bash:scriptA.sh
#!/usr/bin/env bash

pwd
# スクリプトを起動したディレクトリ
# /some/deep/dir

dirname $0
# $0 で渡ってきたスクリプトの起動パス
# ./scriptA.sh

fuga=$(cd ../ && dirname $(pwd))
echo $fuga
# サブプロセスで起動したコマンド内で cd した後の状態のカレントディレクトリ（サブプロセス）
# /some

pwd
# サブプロセスで起動したコマンド内で cd した後の状態のカレントディレクトリ（親プロセス）
# /some/deep/dir
```

このことから以下のことがわかる。

* サブプロセスの中で実行したカレントディレクトリの変更は**親プロセスには影響しない**。
* `$0` には呼び出されたプログラムのパスが**相対パス**で格納されている

スクリプトの起動パス `$0` と `pwd` を組み合わせれば要件を満たせせそう。

## 実装

スクリプトを起動したパスを絶対パスで取得するコードは以下のようになる。

```bash
scriptDir=$(cd $(dirname $0) && pwd)
```

実際にコードを書くときは以下のように書く。

```bash
scriptDir=$(cd $(dirname $0) && pwd)
workDir=$(cd ${scriptDir}/.. && pwd)

sh ${scriptDir}/scriptA.sh

cd ${workDir}
cp ${workDir}/file1.txt ${workDir}/file2.txt
```

ファイルパスやディレクトリパスを指定する箇所は、すべてフルパスにする。
一部のコマンド（zip など）でカレントディレクトリによって振る舞いが変わるものもあるが、その場合は仕方ないので直前に cd する（ただし、フルパスで指定）。

## 参考

オープンソースで公開されているCLIツールのソースコードを確認してみても、似たような方法をとっていることがわかる。

```:apm
#!/bin/bash

set -e

initialCwd=`pwd -P`
scriptDir="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"

apmPath=$0
...
```

## 終わりに

このやり方で、起動したパスの問題で悩まされることがなくなった。
もっと良いやり方があればコメントで教えてください。
#JetBrains のOpen Source Licenseをいただいた

社でJetBrains製品が使われるケースが増えて「プライベートでも使ってみたい」と思い始めた。
「そういえば隣の席だった人がOSS向けライセンスもらってたな」と思い出し申請してみたらありがたく承認いただけた :pray: 

## 申請の流れ

OSSプロジェクトに対してライセンスが付与されるので、まずどのプロジェクトで申請するかを考える。

申請はこちらのページから。
[Open Source Licenses | JetBrains](https://www.jetbrains.com/buy/opensource/)

私の場合はGitHub.comでホストしているOSSプロジェクトで申請したので "Regular open source projects" の `Apply` ボタンを押して申請した。
もしApacheプロジェクトであれば申請方法が異なるらしい。

申請が承認されるとライセンスの通知がメールで送られてくるという流れ。
<img width="1429" alt="Screen Shot 2019-02-15 at 14.32.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/9676/8cee7396-4e15-7c95-f8b0-d3141a90c941.png">
<img width="1428" alt="Screen Shot 2019-02-15 at 14.32.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/9676/dc88700f-0b1a-0240-631f-f1862cf1fbfc.png">

今回は申請直後に自動送信される確認メールが `Feb 2, 2019, 1:26 AM` 、ライセンスの通知メールが `Feb 5, 2019, 10:40 PM` に届いた。
2/2は土曜でJetBrains本社があるチェコの時差はJST-8時間らしいので1.5営業日くらいで承認されたということだろうか。
思っていたよりサクッと承認されたようでありがたい :tada: 

## ライセンス管理

[JetBrains Account](https://account.jetbrains.com/licenses)のページでライセンスが確認できるようになる。
きっとOrganizationライセンスの管理画面も同じ画面で行えるのだと思う。
<img width="1441" alt="Screen Shot 2019-02-15 at 15.47.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/9676/7fb02c6c-30f0-2452-a735-ecb00435707e.png">

申請時に選択したプログラミング言語/IDEは1つだったが、太っ腹なことに全てのIDEが使える"All Products Pack"ライセンスが1年分付与されている。

_前述の[Open Source Licenses | JetBrains](https://www.jetbrains.com/buy/opensource/)のページに_

> you may request All Products Pack subscription(s)

_と書かれている。_

## インストール方法

IDEは個別にインストールもできるが、JetBrainsの[Toolbox App](https://www.jetbrains.com/toolbox/app/)に集約するとIDEのインストールやアップデートができるので便利。
インストール方法はいくつかあるが私は `brew cask install jetbrains-toolbox` した。

ToolboxはMacの場合はメニューバーに常駐する。
(Adobe CCと一緒)
<img width="253" alt="Screen Shot 2019-02-15 at 17.11.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/9676/7df5bff3-07bd-c85d-46f5-5e59023d3546.png">

ちゃんと覚えていないが、Toolbox初回起動時もしくはいずれかのIDE初回起動時にJetBrainsアカウントでLoginできるのでしておく。
先に前述のライセンス管理ページで自分をinviteする必要があったかも。

Toolboxから興味の赴くままにIDEをインストール。
<img width="552" alt="Screen Shot 2019-02-06 at 13.38.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/9676/498df34a-19e0-c24d-8710-d13d4e45931c.png">

これでOSSプロジェクトでもJetBrains製品のある生活がはじまった！やったね :tada: 
活動実績のあるOSSプロジェクト抱えてる方は申請検討されてみてはいかがでしょうか！
nuxt.js(フロント)とLaravel(API)を同一リポジトリ/サーバで動かす時

## web server

- nuxt.jsは `yarn start` でデフォルトの3000番でうける
- APIは `php artisan serve` でデフォルトの8000番でうける
- nginxでプロキシする

```nginx:nginx.conf
server {
    index index.html;
    server_name sample.com;

    location /api {
        proxy_pass http://localhost:8000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_b
}
```

Laravelで作るAPIは、デフォルト `/api` のprefixがつく。
`/api` だったら8000番へ。それ以外 3000番へ


## @nuxtjs/axiosによるAPIコール

```javascript:apiComponent.vue
const response = this.$axios.$get('/api/users')
```

この時、@nuxtjs/axiosは自動的にURLを作成して、コールしようとする。
デフォルトは、 `http://[HOST]:[PORT][PREFIX]` 

cf: https://axios.nuxtjs.org/options > baseURL

nginxが `localhost:3000` にproxyしているので、このままだとブラウザから `http://localhost:3000/api/users` がコールされエラーとなる。


## @nuxtjs/proxy と axiosの設定

@nuxtjs/proxyを使って、特定のURLパスのときにAPIをプロキシ（実際はプロキシじゃなくてURLの書き換え？）する。

```shell:add_package
$ yarn add @nuxtjs/proxy
```

```javascript:nuxt.config.js
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy',
  ],
  axios: {
    baseURL: '/',
  },
  proxy: {
    '/api': 'http://sample.com/',
  },
```

proxyの設定で `/api` だったらサーバにリクエストが飛ぶようにする。
サーバサイドではnginxが `/api` のパスを見て `localhost:8000` にプロキシする。

また、@nuxtjs/proxyにおける `/api` はパスを見てくれるのではなく、どうやらaxiosのbaseURLを見ている様子だった。
axiosの設定で `baseURL: '/'` の指定も必須っぽい？
picoCTF 2018 Recovering From the Snap - Points: 150

#問題

https://2018game.picoctf.com/problems

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/a5269ae7-1f1b-b7a8-8012-e699c4133625.png)

#解いてみた

問題文の意味はよくわかりませんでした。
とりあえず添付ファイルをダウンロードしてみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/70dc12d0-4fe4-3c47-8add-842dacf83e6e.png)

ddファイルでした。
FTK Imagerで読み込んでみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/50c5dfeb-2c7c-87b4-824e-1123e9dd3a7b.png)

動物の画像がいくつかある中に、削除されたjpgファイルがあって、その中にflagがありました。
Hyperledger Fabric のソースコードを読んでみる宣言

どーも、のぶこふです。

タイトル通りです。

## ■背景
先日、「Blockchain GIG ＃1」というイベントに参加しました。
その際「ソースコード全てに目を通すコトが、理解することの一番の近道」と、アドバイスを頂いたので、先は長そうですがやっていこうと思います。

ちなみに、言語は「Java」や「JS」などがありますが、「Go」がデフォルトなので、「Go」を読むべき（そして、「Go」で書くべき）とも仰っていたので、Java屋ですが、「Go」を読んでいきます。

## ■目的
* Hyperledger Fabric の挙動を理解する

## ■どうやって?
* Hyperledger Fabric のソースコードすべてに目を通す
  * https://github.com/hyperledger/fabric
  * まずは、どこから読み進めていけばよいものやら・・・（笑）
* ※平日のみ

## ■宣言
「わたくし、のぶこふは、Hyperledger Fabric のソースコード全てを、一通り目を通すことを、ここに宣言いたします」

## ■余談
* 『アウトプット大全』なる書籍も読んだので、アウトプット意識が少し高まってます（笑）

---

今回はここまでです。
ソースコード読んだ内容も、フィードバックとかしていかないと、身につかないからなー。

以上です。
ありがとうございました。
rails で　セレクトタグの生成

#Railsでセレクトタグの生成
今回、ECサイトの買い物かご的な物を再現してみようと思い作成していた所、少々分かりづらかった所があったので記事にしてみました。

![cart.PNG](https://qiita-image-store.s3.amazonaws.com/0/354877/50a2bc99-f063-f6a1-044c-008706ed7d93.png)


#select_tag
Rails ドキュメント
http://railsdoc.com/references/select

ここに説明が載っているものの、僕には理解が難しかった・・・

#select_tagの使い方
ドキュメントには、

```
select_tag(要素名, タグを表す文字列 [, オプション])
```
の様に書かれていました。

色々試してみた所、要素名の所で指定した値がname属性として送信され、

```
params[:要素名]
```

で値を取得できるようです。

#値の作成
Railsドキュメント
http://railsdoc.com/references/options_for_select

セレクトタグの値を作成する場合は、options_for_selectを使います。

```
  <%= select_tag("num", options_for_select((タグの配列 or ハッシュ)) %>
```
とすることで値を設定できます。


今回は１から１００までの値を設定したので、

```
  <%= select_tag("num", options_for_select((1..100)) %>
```

この様に記述しました。

#selected設定
今回は、買い物かごの作成ということだったので、購入予定の個数設定をしておかなくてはならないためselected指定をする必要がありました。

これは、options_for_selectの:selectedオプションを使用することで可能になります。



そのため、options_for_selectの第２引数に

```
  <%= select_tag("num", options_for_select((1..100) ,
      :selected => item.item_number) ) %>
```

とすることで、購入予定数をselected指定しました。



上記の様に、

```
:selected => 値
```
とすることで、指定ができます。

#感想

ドキュメントを読むのは難しい・・・

言葉の定義など、理解があいまいな部分が多く、
用語を明確に覚える必要があると感じた。
Bootstrap4のフォームに立体感をつける方法【備忘録】

##動機
テーブルとフォームに対してBootstrapを適用させたが区別がつきにくかったので、陰をつけたら見やすいかなと思った。

####変更前
<img width="1079" alt="Screen Shot 2019-02-15 at 17.07.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/312088/e06e5490-9151-ad0c-c765-4736dcfe4323.png">


####変更後
<img width="1077" alt="Screen Shot 2019-02-15 at 17.08.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/312088/83980934-1b58-a657-3407-3f521f8feb41.png">


##書くコード

```
.form-control{
  -webkit-border-radius: 2px; 
  -moz-border-radius: 2px;
  -moz-box-shadow: inset 1px 1px 3px rgba(0,0,0,0.1);
  -webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,0.1);
  -o-box-shadow: inset 1px 1px 3px rgba(0,0,0,0.1);
  -ms-box-shadow: inset 1px 1px 3px rgba(0,0,0,0.1);
}
```

まあサイトを`Inspect`して、コピペしただけなんですけどね。w
【Discord Bot】発言したユーザのユーザIDを取得する方法【Python】

特定のユーザのときだけ別の処理をしたいというときに。

```python

@client.event
async def on_message(message):
    print (message.author.id)
```

おそらく上のような形でmessageオブジェクトを受け取っていると思うので、

```python
message.author.id
```

でそのメッセージは発言したユーザのIDを取得することができます。

特定のユーザに意地悪したいときとかに使えますね。


## 最後に

```python
message.author
```

ではユーザ名が取得できるのですが、これだとその人が名前変えたときとかに動かなくなるという問題があって、同じ悩みを抱えた人もいるんじゃないかと思って書いてみました。

ちなみにdiscordアプリからは普通にそのユーザを右クリックすることでIDを拾えます。（画像の一番下）


<img width="283" alt="スクリーンショット 2019-02-15 16.43.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/186346/038d4831-cc39-fcec-8dce-87a8247ca177.png">

もしかしたら権限とかで表示されない可能性もあります。（デベロッパモードじゃないと見れないとか）
Vueテンプレート構文：条件で属性を付けたり外したり【備忘録】

属性値のバインディングはわかるけど、
属性自体の切替はどうやるんだと迷ったので備忘録。

## やりたいこと
- blankフラグが`false`のときはtarget属性**無し**
- blankフラグが`true`のときはtarget属性**有り**

```template.vue
<template lang="pug">
.component
  template(v-for="item in linkList")
    // blankフラグがfalseのときはtarget属性なし
    a(:href="item.href")
      |{{item.text}}
    // blankフラグがtrueのときはtarget="_blank"
    a(:href="item.href" target="_blank")
      |{{item.text}}
</template>
<script>
export default {
  data(){
    return {
      linkList: [
       {
         text: "同窓リンク",
         href: "hoge.hoge",
         blank: false
       },
       {
         text: "別窓リンク",
         href: "fuga.fuga",
         blank: true
       },
      ]
    }
  }
}
</script>
```

## やり方
三項演算子を使って不一致時に`false`や`null`を渡してあげると属性ごと消えてくれた

### 属性が一個だけの時

```OK.vue
<template lang="pug">
.component
  template(v-for="item in linkList")
    a(:href="item.href" :target="item.blank? '_blank':false")
      |{{item.text}}
</template>
```
↓

```OK.html
<a href="hoge.hoge">同窓リンク</a>
<a href="fuga.fuga" target="_blank">別窓リンク</a>
```

### 属性が複数の時
`v-bind`の引数を省略すると複数の属性をオブジェクトで渡せるので、
`rel="noopener noreferrer"`もつけたりとか、複数の属性をつけるならこっちが楽

```OK.vue
<template lang="pug">
.component
  template(v-for="item in linkList")
    a(:href="item.href" v-bind="item.blank? {target:'_blank',rel:'noopener noreferrer'}:false")
      |{{item.text}}
</template>
```
↓

```OK.html
<a href="hoge.hoge">同窓リンク</a>
<a href="fuga.fuga" target="_blank" rel="noopener noreferrer">別窓リンク</a>
```


## NGな例
最初なにも考えずにクラスバインディングのノリでオブジェクト構文で書いてみたらダメだった
オブジェクトを渡せるのは`v-bind`（引数省略時）と、`v-bind:class`、`v-bind:style`のみ
https://jp.vuejs.org/v2/api/#v-bind

```NG.vue
<template lang="pug">
.component
  template(v-for="item in linkList")
    a(:href="item.href" :target="{_blank:item.blank}")
      |{{item.text}}
</template>
```
↓

```NG.html
<a href="hoge.hoge" target="[object Object]">同窓リンク</a>
<a href="fuga.fuga" target="[object Object]">別窓リンク</a>
```
MacでのFlutter開発環境を構築するゾ

# はじめに

ちょっと長いので根気よく行きましょう:relaxed:


## １、FlutterSDK install

[Flutter公式 mac版](https://flutter.io/docs/get-started/install/macos)

基本的には公式にやり方が書いてあります
ホームディレクトリで解凍してあげてください


## ２、PATH set

```
## Flutter PATH
export PATH=/Users/user_name/flutter/bin:$PATH
```

`$ source .bash_profile`で反映（.bashrcなど個人の環境に合わせてください）


## ３、AndroidStudio & Xcode install

### Android Studio install and setup
AndroidStudioは3.2以上を使用してください

[【公式】AndroidStudio download](https://developer.android.com/studio/?hl=ja)

brewでのインストール

```
$ brew cask install android-studio
```

#### AndroidSDKインストール

AndroidStudioを使って以下をインストールします

Preferences -> Appearance & Behavior -> System Settings -> Android SDK

SDK Platforms -> 各Android API
SDK Tools -> Android SDK Build-Tools

Build-Toolsは28.0.3以降を使用します（Flutter推奨）

#### ライセンスへの同意
インストール後は以下のコマンドでライセンスに同意します

```
$ flutter doctor --android-licenses
```

### Xcode install
Xcodeは10.1以上（MacOSは10.13.6以降）

[【公式】Apple developer download](https://developer.apple.com/download/more/#)

### Xcode command-line tools install

```
$ sudo  xcode-select --switch /Applications/Xcode.app/Contents/Developer from the command line.
```

### ライセンスへの同意

```
$ sudo xcodebuild -license from 
```


## ４、flutter doctor check

各設定が終わったら`$ flutter doctor`でチェックします
原則エラーとか出てなければオッケーです
VS Codeはこの説明では使わないのでスルーします
`Connected device`はAndroidやiOSのシュミレータが起動していればエラーとか出なくなります

```
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, v1.2.1-pre.201, on Mac OS X 10.13.6 17G4015, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)
[✓] Android Studio (version 3.3)
[!] VS Code (version 1.29.1)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available
```

## ５、AndroidStudio setup

これやらないとAndroidStudioでの開発ができないのでやってください

### plugins install

Preferences -> Plugins
1. Dart
2. Flutter

それぞれをsearchでinstall

## まとめ

はい、これでお使いのMacでAndroidStudioを使うFlutter開発の環境が構築できました！にっこり:relaxed:
Python ファイル操作をするうえでimportしておきたいライブラリ(自分用MEMO)

#Python でテキストファイルなどを操作するときに使うであろうライブラリ

- import os
- import pathlib
- import glob
- import shutil

詳細はグーグルで検索すると出てきます。

あくまでも備忘録的なメモですので、ここでは詳細の説明は省略します。
bootstrapで困ったことまとめ(随時更新)

####問題：
##第2モーダル画面を閉じた際に第1モーダル画面がスクロール不可になる現象
この問題は、第1モーダル画面→第2モーダル画面へと遷移した後、
入力内容を修正するために第2モーダル画面を閉じて第1モーダル画面に戻ると
スクロールができない状態になってしまう現象。

####原因：
第2モーダル画面を閉じる際に、`<body>`にあるスクロールするために必要なクラス(modal-open)を削除してしまうことが原因のため、

####解決した方法：
第2モーダル画面を閉じる際に再度クラスを付与してあげる必要があった。

#####以下、解決内容

```js
  $('#confirmModal').on('hidden.bs.modal', function () { //#confirmModalは第2モーダルを開くときに押下した<button>のdata-target="#confirmModal"
    $('body').addClass('modal-open');
  });
```

※'hidden.bs.modal'はモーダル・ダイアログが完全に非表示になった時のイベントみたい
[参考url](http://bootstrap3.cyberlab.info/javascript/modals-events.html)

##なぜか"sInfoEmpty"が効かなかったので"sInfo"をjQueryで条件つけて変えてみた。
Raspberry Pi バックアップ（Windows）

# 概要
[前回の記事](https://qiita.com/henjiganai/items/2b39dd8cbc3cc3cbe4a4)でRaspberry Piのセットアップが完了しました。
運用を続けていると、突然起動できなくなるといった復旧不可能な事態に陥ることはよくあります。
その場合再セットアップでも良いのですが、バックアップデータを取っておくと復旧が楽になります。

一度バックアップをSDカードを直接接続してそのままコピーを取ろうとしたのですが、
Windowsの場合、セットアップ後のOS領域等が正しく認識されないようです。
そのため、フリーソフトを使用してバックアップを行いました。

# 参考
この記事を書くにあたって、以下のサイトを参考にさせて頂きました。
https://itdecoboconikki.com/2017/02/16/raspberry-pi-backup-img-make/

# Win32 Disk Imager の取得及びインストール

**1.下記サイトから「Win32 Disk Imager」を取得**
https://ja.osdn.net/projects/sfnet_win32diskimager/

**2.ダウンロード一覧をクリック**
![Win32DiskImager_01.png](https://qiita-image-store.s3.amazonaws.com/0/340824/7406bf18-8288-e6e6-6bf4-0fe3c984ffb6.png)

**3.赤枠で囲んでいるファイルのどちらかをクリックしてダウンロード**

インストーラー型にしたい場合は「win32diskimager-1.0.0-install.exe」の方をダウンロードしてください。
こちらの環境の場合、[前回の記事](https://qiita.com/henjiganai/items/2b39dd8cbc3cc3cbe4a4)で「SDメモリカードフォーマッター」をインストール後から
ブルースクリーンが頻発するようになってしまったので、念のためインストール不要なzip版をダウンロードしました。
![Win32DiskImager_02.png](https://qiita-image-store.s3.amazonaws.com/0/340824/1fa0c859-63ff-c1bb-906b-1cdb0b03062a.png)

# バックアップ

**1.バックアップを保存したい場所にあらかじめファイルを作成**
![Backup_01.png](https://qiita-image-store.s3.amazonaws.com/0/340824/3a88f11a-a7d0-4b24-62ed-5728b19f75cc.png)

**2.「Win32 Disk Imager」を起動**
![Backup_02.png](https://qiita-image-store.s3.amazonaws.com/0/340824/c991b194-8ef4-4fc0-a6ef-2a456ab85b93.png)

**3.上部右側の:file_folder:をクリックして、1.で作成したファイルを選択**

同時に、「Device」にバックアップ対象のSDカードのドライブが選択されていることを確認する。
![Backup_03.png](https://qiita-image-store.s3.amazonaws.com/0/340824/e28f60fd-27bb-be01-ec22-23bfe0226aca.png)

**4.「Read」をクリックしてバックアップを開始**

こちらの環境の場合、一度「～が読み込めませんでした」というようなエラーが発生して
バックアップが中断されましたが、再度「Read」をクリックしたら正常にバックアップができました。
![Backup_04.png](https://qiita-image-store.s3.amazonaws.com/0/340824/4879b413-8b9c-77f1-b07f-0121dfbaa7d2.png)

「Read Successful.」というメッセージが出たら完了です。
![Backup_05.png](https://qiita-image-store.s3.amazonaws.com/0/340824/da888b4f-5b90-e682-babc-a53fb983f7b2.png)


# リストア

Raspberry Piを弄っていたら早々にOSを破壊してしまったのでリストアを行います。

**1.「SDメモリカードフォーマッター」を起動してSDカードをフォーマット**
前回と同じく設定は変更せずに「フォーマット」をクリック。
正常にフォーマットが完了後、SDカードの容量が本来の容量になっていることを確認する。
![restore_01.png](https://qiita-image-store.s3.amazonaws.com/0/340824/7c851031-6a31-2a57-b6a0-de13cd9791e6.png)

**2.「Win32 Disk Imager」でSDカードに以前のデータを復元する**
「Win32 Disk Imager」を起動してバックアップしたデータと復元したいSDカードのドライブを選択後、「Write」ボタンをクリック。
「Write Successful.」というメッセージが出たら完了です。
![restore_02.png](https://qiita-image-store.s3.amazonaws.com/0/340824/3aa101d2-4cd1-3d76-4532-7e023fbc5b5c.png)

**3.SDカードをRaspberry Piに接続してデータが正常に復元されていることを確認**
Raspberry PiにSDカードを接続後に電源を投入し、バックアップ時の状態に戻っていることを確認する。

#総括

これでバックアップ&リストアが何時でも行えるようになりました。
SDカードが完全に故障してしまった場合に新しいSDカードに移行したり、
他のRaspberry Pi環境を構築するのにも流用が可能ですので、バックアップはできるだけ取得を推奨します。
[Node.js]WindowsにNode.js(npm)をインストールしよう。

npmを使用することが多いのでWindowsでのNode.jsのインストール手順をまとめました。
※2019/02時点ではv10.15.1

#+Node.jsの確認
まずはPCにNode.jsがインストールされているかの確認をします。
1.コマンドプロンプトを立上げる。
2.以下のコマンドのいずれかを入力する。

```
> node --version
```
OR

```
> npm --version
```
3.以下の様にバージョンが表示されればインストール済みです。
![nodejs10.png](https://qiita-image-store.s3.amazonaws.com/0/278346/b2b93d61-5460-60aa-7900-b54977486f76.png)
また以下の様なメッセージが表示されればインストールされていません。
![nodejs01.png](https://qiita-image-store.s3.amazonaws.com/0/278346/7753648c-c15a-1d9e-24c9-63b75854a071.png)

#+インストール
####1. Node.jsインストーラーのダウンロード
以下公式サイトに移動します。
　[Node.js公式](https://nodejs.org/ja/)
Windows用の10.15.1 LTS をクリックしてインストーラーをダウンロードします。
![Node-js.png](https://qiita-image-store.s3.amazonaws.com/0/278346/21cdf3cc-676e-98a1-9c0d-9b7f05bddff5.png)
####2. Node.jsのインストール
ダウンロードしたインストーラ（.msi）を実行します。
インストール画面が起動したら[Next]をクリックします。
![nodejs03.png](https://qiita-image-store.s3.amazonaws.com/0/278346/073b786d-c5df-8bce-b0bd-0c7e1cc82f2a.png)
利用規約を確認・チェックしたあとに[Next]をクリックします。
![nodejs04.png](https://qiita-image-store.s3.amazonaws.com/0/278346/bc71b24c-b9b9-341e-755b-c52724ba8700.png)
インストール先（特に変更しなくて大丈夫）を指定して[Next]をクリックします。
![nodejs05.png](https://qiita-image-store.s3.amazonaws.com/0/278346/1c4dd945-3d57-c7c7-202c-a73d32e1bbd5.png)
インストール設定ですが変更せずに[Next]をクリックします。
![nodejs06.png](https://qiita-image-store.s3.amazonaws.com/0/278346/b37d6b8b-9636-d990-b863-d824a90fccf1.png)
インストールの設定は完了ですので、[install]をクリックします。
![nodejs07.png](https://qiita-image-store.s3.amazonaws.com/0/278346/71fa1e13-62d7-1734-cdf3-a42d4f6c0820.png)
インストール中になります。しばらくお待ちください。
![nodejs08.png](https://qiita-image-store.s3.amazonaws.com/0/278346/15bcfa0c-db51-a25b-c18c-8ed9cfa4b7c4.png)
以上でインストール完了となります。[Finish]クリックで画面を閉じます。
![nodejs09.png](https://qiita-image-store.s3.amazonaws.com/0/278346/f824c69f-1235-f78c-8f98-211eec0edc1f.png)
#+もう一度インストールの確認
先ほどと同様にインストールの確認をします。
1.コマンドプロンプトを立上げる。
2.以下のコマンドを入力する。

```
> node --version
```
3.以下の様にバージョンが表示されればインストール済みです。
![nodejs10.png](https://qiita-image-store.s3.amazonaws.com/0/278346/b2b93d61-5460-60aa-7900-b54977486f76.png)
対数の底変換(算数)

対数の底変換．証明も概念も非常に簡単だが，なぜだかいつも底変換の方法を忘れてしまうので，備忘として．


python では $\ln x $ をよく使うので，自然対数を用いて，その他の底を取るときの対数を記す．

例えば，底が $a(>0)$ とする．
$\log _ab$ を $f(x) = \ln x$ を用いて表す．

$b = a^{\log _ab} = (e^{\ln a})^{\log _ab} = e^{\ln b}$

ということで，第3,4項に対して自然対数を取って，
$\ln a \times \log _ab = \ln b$
変形して，
$\log _ab = \frac{\ln b}{\ln a}$

まあ，自明ですね．

```py
import numpy as np

x = np.array([...])

# convert the base of log into 0.1
np.log(x) / np.log(0.1)
```
もし一ヶ月に一回しか風呂に入らない物理学科専攻が、奥村学の『トピックモデル』を読んだら [第2章]

## はじめに
　訳あって、奥村学氏の『トピックモデルによる 統計的潜在意味解析』を読むことになったので、自分のブレストのために、また皆さんの理解を深めるための記録を残したいと思います。内容としては、プログラミング経験者の為のものではなく、数式には強いけどプログラミングは初めてという方に向けています。
####読むにあたっての注意
　コードはほとんど登場しません。個人的にポイントだなと思った点をまとめているだけなので、一度該当の箇所を読まれてからをお勧めします。また間違いがあれば、ご連絡いただけると幸甚です。
##2章, Latent Dirichlet Allocation (LDA法)
内容を踏まえて、次を考えてみてください。

**1. 多項分布とDirichlet分布の違いを説明せよ。**

**2. p(π│x,α)とp(π│α)の違い、また$α$とは何か。**

**3. $k=z_{d,i}$とは、どういうことか？グラフィカルモデルを用いて説明せよ。**

**4. $ϕ_v$ではなく、$ϕ_k$を考える理由を述べよ。**

回答（参考）
---
###1. 多項分布とDirichlet分布の違いを説明せよ。
Dirichlet分布は、仮想的なパラメタ$α$を用いて確率変数$π$を生成する分布である。一旦$π$が生成されれば、これは$x$の多項分布におけるパラメタとなる。多項分布は実際の観測値に分布を与えるのに対し、Dirichlet分布は確率変数そのものを生成する。

###2. p(π│x,α)とp(π│α)の違い、またαとは何か。
$p(π│x,α)$とは、仮想的なパラメタ$α$に観測$x$を加算した事後分布であり、n_k+α_k(k=1,2,…,K)をパラメタとするディリクレ分布である。 一方、事前分布 p(π│α)とは、$α_k (k=1,2,…,K)$のみをパラメタとするディリクレ分布となる。したがって、Dirichlet分布は多項分布の事前分布となるが、同時にDirichlet分布は多項分布の頻度n_k$をガンマ関数を用いて実数に拡張したものなので、共役事前分布とも言える。
直前のgit commitだけを取りけす

git管理していなかったプロジェクトをとりあえずgit add、commitして
GitGubにPushしようとしたら
以下のようにファイルが大きすぎるよ・・と・・

```
$ git push origin multi
Password: 
Counting objects: 11177, done.
Delta compression using up to 2 threads.
Compressing objects: 100% (10154/10154), done.
Writing objects: 100% (11176/11176), 367.56 MiB | 15.70 MiB/s, done.
Total 11176 (delta 6210), reused 2517 (delta 644)
remote: Resolving deltas: 100% (6210/6210), done.
remote: warning: File aaaaaa.zip is 82.28 MB; this is larger than GitHub's recommended maximum file size of 50.00 MB
remote: error: GH001: Large files detected. You may want to try Git Large File Storage - https://git-lfs.github.com.
remote: error: Trace: 858ff829cfaf2823d2624b5d89ec0fed
remote: error: See http://git.io/iEPt8g for more information.
remote: error: File bbbbbb.log is 135.68 MB; this exceeds GitHub's file size limit of 100.00 MB
remote: error: File cccccc.log.gz is 204.96 MB; this exceeds GitHub's file size limit of 100.00 MB
remote: error: File dddddd.log is 325.67 MB; this exceeds GitHub's file size limit of 100.00 MB
```

気を使ってたつもりでも抜けてたようでした・・

ということで、該当ファイルをgit管理から外したいわけですが
git rm --cached 該当ファイル
git commit -m '大きいファイルは外しました'
としても、gitというものは履歴管理してるものなので
うまくいくわけはありません。

commitを消してHEADを戻してからrmしないといけないのですが
単に
git reset HEAD^
や、ましてや
git reset --head  HEAD^
をしてしまうと、苦労してgit addした作業が無駄になります。
ので、
```
 git reset --soft  HEAD^
```

とすれば、直前のgit commit -m 〜 だけを取り消すことになり、
git statusを見てもステージにaddされたままになっているかとおもいます。
Segment RoutingのSIDとは何か？(初心者編)

# はじめに
JNOAG43でも盛り上がったネタの１つでもあるSegment Routingですが、
まだまだ日本語の解説ブログは少ないように思えます。
今後Segment Routingネタのブログをどんどん書いていきます。
また間違い等あればTwitter→https://twitter.com/katu7414　
までお願いします。

# SIDとは何か？
Segment IDentifierの略でSegment Routingでは以下の4つのSIDが存在します。

- Prefix SID
- Node SID
- Adjacency SID
- Binding-SID

それぞれを解説します。

## Prefix SID
特定のIPの宛先に対してMulti-hopな宛先を表現して最短距離で宛先まで行くもの。
数値はインデックス(例18000とか)でグローバルユニーク(つまり被ってはいけない)
注意しないといけないこととしてIGPのPrefix SIDとBGPのPrefix SIDが存在する。
これらのSIDをまとめてPrefix SIDと呼んでいる。

## Node SID
簡単にいえばloopbackを示す特別なprefix-SIDのこと
意味的にはNodeのことを指し示すことが多い。
Node SIDはIGPのPrefix SIDです。

## Adjacency SID
次の1Hop先を指定して必ずそこに届けるという表現ができるSIDのこと。
Next Hopみたいなもの。
ローカルユニーク

## Binding-SID
2のノード間を特別に繋げるときに使うもの(例VPNとはTEなど)
特定のユーザー毎に識別して通信を見れたりするのでキャリアは必須になりそうなイメージがある。

# 次回予告
次回はNode SIDが被った時の処理について解説します。
Developers Summit 2019「Spring Bootでマイクロサービス作って苦労したお話」 の補足

#はじめに

今回 Developers Summit 2019で下記内容を登壇させて頂きました。
[SpringBootでマイクロサービス作って苦労した話〜] (https://event.shoeisha.jp/devsumi/20190214/session/1961/)

思ったより・・・資料が拡散した感があったので、資料では読み取れない部分を補足します。

#資料

- Spring Bootでマイクロサービス作って苦労したお話<br>
https://speakerdeck.com/broadleaf/developersummit2019-springboot

#補足

## 背景：マイクロサービスアーキテクチャっぽいサービス開発

![image.png](https://qiita-image-store.s3.amazonaws.com/0/268550/3a25ca35-8a70-072e-11e2-5f12dd54b579.png)

- マイクロサービスアーキテクチャっぽい？
  - データストア、完全に分断してない。いくつかのサービスでCassandraのクラスタを共有していたりする。
- サービスの粒度
  - 顧客管理、自社管理、売上管理と粒度は大きい（荒い）。

## 起動が遅い：Application Class-Data Sharing(JEP310)を導入する

![image.png](https://qiita-image-store.s3.amazonaws.com/0/268550/24e6d095-6c13-d414-8098-37b73eeb41f0.png)


- **fatJarにしない。fatJarにしちゃうと、Spring Bootの独自のクラスローダーで読み込まれるからあんまり効果無い。**
- [fabric8](http://fabric8.io/)や[jib](https://github.com/GoogleContainerTools/jib)だとどうやってApplication Class-Data Sharing有効化すればいいかわからなかった。なのでDockerのmulti-stage buildsで独自にビルド。
- [AdoptOpenJDK](https://adoptopenjdk.net/)のイメージをベースに、独自でjlinkで小さくなったベースイメージを使ってる。
- Application Class-Data Sharingは素敵。

## テストが遅い

![image.png](https://qiita-image-store.s3.amazonaws.com/0/268550/48c74248-3905-e4b3-6d08-0e292dae3e35.png)

- parentのpom.xmlの変更には気を付けろ！

## 反省：先に考えておくこと

![image.png](https://qiita-image-store.s3.amazonaws.com/0/268550/a16da10c-7ba2-f20b-92b4-3c620c3199a1.png)

- Dynamic Configuration実現するためには、分散アーキテクチャだと多分使うのはSpring Cloud Config。
- Kubernetesで動かすのであれば、[Spring Cloud Kubernetes](https://github.com/spring-cloud/spring-cloud-kubernetes)要チェック！configmapこんな感じで使いたかった！ってなる。


# 最後に
私は、日本語フォントだと、[Noto Sans Mono CJK JP](https://www.google.com/get/noto/)フォント愛用してます。
PDFに変換すると・・・ビットマップに変換されてしまい、コピペできなくなります。
なので、メイリオに一括変換してPDFにしているのですが、結果一部体裁が崩れている箇所があります。申し訳ございません…。

ご来場された方々、本当にありがとうございました。
また、Ask The Speakerで色々お声をかけて頂き、本当に嬉しかったです。
Django の model を dictionary に変換

Django の model を dictionary に変換するサンプルです。

```management/commands/show_cities.py
# ------------------------------------------------------------------
#
#	management/commands/show_cities.py
#
#						Feb/15/2019
#
# ------------------------------------------------------------------
from django.core.management.base import BaseCommand
from city.models import City

# ------------------------------------------------------------------
class Command(BaseCommand):
	help = 'Display cities'

	def handle(self, *args, **kwargs):
		instance = City.objects.all()
		for city in instance:
			str_out = city.key + "\t"
			str_out += city.name + "\t"
			str_out += str(city.population) + "\t"
			str_out += str(city.date_mod) + "\t"
			print(str_out)
#
		print("---")
#
		for unit_aa in instance.values():
			str_out = unit_aa['key'] + "\t"
			str_out += unit_aa['name'] + "\t"
			str_out += str(unit_aa['population']) + "\t"
			str_out += str(unit_aa['date_mod']) + "\t"
			print(str_out)
#
# ------------------------------------------------------------------
```

 モデルは次のように定義されているとします。

```py:city/models.py
from django.db import models

class City(models.Model):
    key = models.CharField(max_length=10)
    name = models.CharField(max_length=20)
    population = models.IntegerField(default=0)
    date_mod = models.DateField()

    def __str__(self):
        return '<City:id=' + str(self.id) + ', ' + \
            self.key + ', ' + self.name + '>'
```


実行例

```text
$ ./manage.py show_cities
t0901	下野	31879999	2011-05-20	
t0902	小山	81392	2015-04-09	
t0903	足利	68321	2012-08-02	
t0904	佐野	12395	2010-09-15	
t0905	真岡	64327	2009-11-27	
t0906	日光	25184	2008-01-14	
t0907	鹿沼	31265999	2006-06-08	
---
t0901	下野	31879999	2011-05-20	
t0902	小山	81392	2015-04-09	
t0903	足利	68321	2012-08-02	
t0904	佐野	12395	2010-09-15	
t0905	真岡	64327	2009-11-27	
t0906	日光	25184	2008-01-14	
t0907	鹿沼	31265999	2006-06-08
```

参考情報
>[Django のカスタムコマンドの作り方](https://qiita.com/ekzemplaro/items/7349d43388abfd8ca2db)
laravelでmysqlのjson型の扱いかた

json型の扱いについてまとまったページがあまりなかったので書くことにしました。
・・・いまだに苦しめられています。

環境
larave5.7
Mysql5.7

##1.データベースにjson型を含むテーブルをmigrationで作成するとき
```php
 public function up()
    {
        Schema::create('members', function (Blueprint $table) {
            $table->uuid('id');
            $table->string('name', 100);
            $table->json('data')->nullable(); // ココ
            $table->timestamps();
            $table->primary('uuid');
        });
    }

```
**※注意**
なんと、Mysql5.7のJson型は初期値を設定できない仕様になっています・・・！（MariaDBは初期値OK）
`$table->json('data')->default('{"title":1,"permission":[1,2]}');`というかんじに書いてたらmigrate実行時にエラーが出ました。
MariaDBで開発してるけどリリース先の環境はMysqlって場合は特に気をつけてください。（もちろんDB揃えられるなら揃えてください！）


##2.データベースにデータを入れるとき
こちらにすでに書かれてましたhttps://qiita.com/kamikosi/items/7d4135ce74de8b91e721

```php

$data = [
    [
        'title' => 1,
        'permission' => [
            1,
            2,
        ],
    ],
    [
        'title' => 2,
        'permission' => [
            1,
            2,
        ],
    ]
];
$member = new Member;
$member->data = $data;　// ココ
$member->save();
```
**※注意**
`$member->data = json_encode($data);`と書くとstringとしてデータが入ってしまう。
↓がそのjson_encodeしてしまったデータ。
`"{\"permission_list\":[{\"title\":\"2\",\"permission\":[\"1\",\"3\"]}],\"admin\":false}"`
JSON_UNESCAPED_UNICODEオプションを付けても両端の`"`はのこってしまうので
json型として取得できなくなってしまう。。。


##3.データベースからデータを取得するとき
参考：https://qiita.com/pinekta/items/93c9c427ccc22df578a5

まず、モデル側に$castsを設定する。

```php

class Member extends Eloquent
{
    protected $casts = [
        'json_column' => 'json',  // ココ
    ];
}
```
$castsについてはjson型だけでなく、データをDBから取得するときの型を設定できるものなので
知っておくと応用がききそうです。

つぎにそのモデルを使ってデータを取得します。

```php
$member = Member::find($id);
// $member->dataにはjsonが連想配列として保存されている
$data_permission = isset($member->data['permission']) ? $member->data['permission'] : null ;
```
$castsによってjson型データが連想配列として取得できるようになっているので
`$member->data['permission']`のように取得できる。
json objectとしてデータベースに入れていても、取得すると連想配列になっているのでネスト地獄に注意。。。（絶賛苦戦中）

また1.の注意欄でも書いた通り、初期値設定ができないので
特定のキーが存在するかどうかのチェック(こちらではissetを使用)が必要です。

---
まだまだlaravel, MysqlのJson型については勉強中の身ですので
「こうすれば{もっとかんたんだよ｜できるよ}」などのご意見をいただけましたら幸いです。
bash 変な書き方発見

Bashで変わった書き方を発見.
しらべてもでてこなかったので

```
aa="GET / HTTP/1.1"
echo $aa

> GET / HTTP/1.1 
> # 当然といえば当然

bb=($aa)  
echo $bb
> GET
> !! なんと最初の空白までの文字列が取得できる!!!

#ちなみに
echo ($aa)
> -bash: syntax error near unexpected token `$aa'
> # というエラーがでます.なぜなんでしょう
```

()はbashでは式展開という意味ですが,
最初の文字を取得できるとは知りませんでした.