OmniAICreator/Qiita-1.07M huggingface dataset:
AWS KMSを使ってローカルに鍵を保存せずに暗号化・複合化を行う

# まとめ

AWS KMS では鍵をローカルで管理することなくテキストの暗号化・複合化を行う機能を提供している。
システムで利用するパスワードなどを暗号化・複合化したいといった「ちょっとした暗号化」が欲しい場合にはこれを利用できる。

なお、効率の面から小規模データ向けの方法。 
この記事では取り扱わないが、大量のデータを暗号化・複合化する場合にはKMSに暗号化・複合化で使える鍵を発行してもらってそれを使う。

# bashコード

awscli を使って `TARGET_TEXT` を暗号化・複合化する例。

```bash:enc.sh
#!/bin/bash

CMK_ID=<自分のAWSアカウントで利用するKMSのカスタマー管理型のキーのID>
PROFILE=<profileを使いたい場合は入力>
TMPFILE=.tmp-bin

TARGET_TEXT=P@ssW0rd

if [ "$PROFILE" != "" ]; then
  PROFILE_CONTEXT="--profile $PROFILE"
else
  PROFILE_CONTEXT=""
fi

echo start to encrypt "$TARGET_TEXT"

ENCB64=$(aws kms encrypt --key-id ${CMK_ID} --plaintext ${TARGET_TEXT} --output text --query CiphertextBlob ${PROFILE_CONTEXT})

echo encrypted and base64 encoded text: $ENCB64
echo $ENCB64 | base64 -d > ${TMPFILE}

PLAIN_TEXT=$(aws kms decrypt --ciphertext-blob fileb://$(pwd)/${TMPFILE} --output text --query Plaintext ${PROFILE_CONTEXT} | base64 -d)

echo decrypted plain text: $PLAIN_TEXT
```

```text:出力結果の一例
start to encrypt P@ssW0rd
encrypted and base64 encoded text: AQICAHiclkP1z430sHo4kvwnliLRBAmXEHF1EiUqPErprxdOUwHgofADoFBFs0IwSuYxhQH/AAAAZjBkBgkqhkiG9w0BBwagVzBVAgEAMFAGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQM6oisVNzAn1r59h8AAgEQgCOogkCKzVFWtQfXPlAvhhEH0lGjtpL44biYU7ZkGbk1zAcRag==
decrypted plain text: P@ssW0rd
```

- `aws kms encrypt` で `--plaintext` で指定した文字列をAWS KMSに保持している鍵を使って暗号化する
    - 暗号化したデータを base64 エンコードしたものが得られる
    - awscli の出力は [ドキュメント](https://docs.aws.amazon.com/cli/latest/reference/kms/encrypt.html) から分かる通り複数あるので、暗号化したデータを指す CiphertextBlob のみを `--query CiphertextBlob` で指定することで取得する
- `aws kms decrypt` で暗号化したデータを複合化する
    - fileb:// で指定する場合、基本フルパスなので上記shellではそのためのコードが書かれている
    - 指定するファイルのデータは base64 をでコードしたものである必要がある
    - encryptの場合と同様、`--query` で必要な部分のみを取得
 

以上の手順で鍵を自分で管理することなく、暗号化・複合化を行うことができる。

# 余談

モチベーションは Chalice の `.chalice/config.json` にパスワードを書こうと思ったのだが、このファイルはコミットしたい、でもパスワードは書きたいのでどうしよう…というところが発端。
他の人がどうしているかを見ると [Githubでもディスカッションされている](https://github.com/aws/chalice/issues/481) のを見て、その中で紹介されていた内容が実際にできるかどうかを確かめたのがこの記事だったり。
[自分的理解メモ]GitHubの運用ルール編

色んなところから良さそうな所を寄せ集めた


# プロジェクトのルール
## プルリクエスト
- issueの番号を書く

## Projects
- Cardは作らない
  - 履歴が検索しにくい為、基本的にissueで運用

## issue

- ラベル
  - projectラベルは付ける

## commit message
基本的にAngularの[開発ガイド](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#type)に従い、プレフィックスを付ける。  
（Angularの開発ガイドの他に`try:`を追加した）

- feat: 新しい機能
- fix: バグの修正
- docs: ドキュメントの変更
- style: styleの変更
- refactor: リファクタリング
- perf: パフォーマンスに関すること
- test: テストの変更
- chore: 細かいこと、雑用
- try: 試してみたいこと

## ブランチのルール

### 削除タイミング
- margeしたら

### ブランチ命名規則

#### 中央リポジトリ
- master ここにマージされたらCircleCIが周り、deploygateに配信されます
- develop 開発用

#### 開発用リポジトリ
- ブランチ名
  - プレフィックス/issueID/機能名
- プレフィックス
  - feature: 新しい機能
  - fix: 修正全般
  - hotfix: 優先しなきゃいけないバグの修正
  - try: 試してみたいこと

# フォーマットについて
Save Actionsというプラグインでフォーマットをかける（[参考](https://qiita.com/ikemura23/items/9a33c1b2bdb5a65d29a5)）
Google Domains と Heroku を紐づける

# 事前準備
・ Googleドメインの取得
・ Herokuにアプリケーションを公開済み
・ Herokuへクレジットカードを登録済み

# 手順１ Herokuアプリにドメインを設定する
ダッシュボードから、対象のアプリを選択
<img width="809" alt="step1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203126/4118c247-9bec-4de2-51ce-ac69aa6e13eb.png">

設定タブを開く
<img width="734" alt="step2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203126/6cf14d4b-575d-9d78-c345-3cfe9fe66683.png">

Domainsの項目があるので、Add Domainボタンを押す。
<img width="1024" alt="step3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203126/532f34fc-7c4c-93e8-6963-30e2f661a18f.png">

`www.取得したドメイン.com`と入力して、Nextをクリック。
ドメインの先頭に、wwwを入力する必要があります。
<img width="404" alt="step4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203126/48fa9f3b-2e94-7a72-3bb4-cb7a1f243154.png">

DNSターゲットが表示されるので、コピーしておく。
<img width="393" alt="step5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203126/7b9a72c3-72a4-a48d-b828-1ad29d17622a.png">

# 手順２ Google Domains のDNSを設定する
DNSの設定ページへと移動して、合成レコードの欄を以下のように設定する。
・ サブドメインの転送（デフォルトのまま）
・ サブドメインの入力欄に「@」を入力
・ ターゲットURLに、www.取得したドメイン.comと入力する
設定が終わったら、追加ボタンを押します。
<img width="1246" alt="step6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203126/107c78d1-e860-8701-c6bf-74e5cdf02a90.png">

# 手順３ カスタム リソース レコードの追加
同じページにあるカスタム リソース レコードの欄を以下のように設定する。
・ 最初の入力欄に、`www`を入力
・ ドロップダウンから、CNAMEを選択
・ TTLの入力欄は入力しない
・ 最後の入力欄に、HerokuのアプリからコピーしたDNSターゲットを貼り付ける
設定が終わったら、追加ボタンを押します。
<img width="1055" alt="step7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203126/c06af053-d585-0a81-86a0-5cf2ca225906.png">

# おまけ： SSLを有効にしたい場合
・ HerokuをHobbyプラン(有料)に変更する。
・ Settings > Configure SSLから、ACMを有効にする。
・ Google DomainsのDNS設定 > 合成レコード > サブドメインの転送を`https://www.取得したドメイン.com`に変更する。

以上です。

Heroku便利だなー
バンドサークル管理webアプリ製作日記 - 要件定義

## あらすじ

このシリーズでは、私の個人開発であるバンドサークル管理webアプリの
開発の内容をまとめていく。

[前回](https://qiita.com/RINYU_DRVO/items/52d4e9458b49ffd959f5)はユースケースをまとめた。

## この記事は

ユースケースを元に、搭載する機能を
要件定義として落とし込んでいく。

実際、前回のユースケースをまとめる段階で
必要な機能は大方明確になっている。

ただしユースケースはあくまで
**ユーザがどのように使うか**なので、
要件定義では
**アプリケーションがどう動作するか**に重点をおいて
まとめていく。

## 業務フロー
ユースケースと少し内容は被ってしまうが、
ユーザのやることに対する
アプリケーションの振る舞いを定義する為に、
業務フローを予めまとめておく。

![サークル管理者.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360072/abbc01e7-4075-c3b3-c828-7d5db59f0839.png)
![バンド管理者.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360072/246a2c63-b2e2-f38a-531c-89a26425fb01.png)
![メンバー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360072/7bee7021-2608-117e-0a6c-44ac137244a5.png)


## 機能要件

> 機能要件とは、クライアントが求めている機能のことを指します。

システムを実装することで何ができるようになるのか
システム側の観点から洗い出していく。

```
【認証】
・メンバーと管理者のマルチ認証

【管理者権限】
・サークルの管理
・ライブの管理

【メンバー権限】
・メンバ０情報の管理
・サークル登録
・バンド加入申請
・バンド作成

【メンバー権限（バンド加入者）】
・バンド情報管理
・ライブエントリー
・加入申請承認
```

メンバーはブラウザ、管理者はPCで見たり操作することが
多いと考えられるので、
どちらにも対応するWebアプリケーションとする。

各情報はデータベースで保存する。
テーブルは

- メンバー
- 管理者
- バンド
- ライブ

をメインとし、他は中間テーブルや補佐的なテーブルとする。

## 非機能要件

こちらは初期サイクルでは明確にならない為
かっちりと決めないこととする。

しかしユーザ個人情報やサークルの情報を取り扱う為
セキュリティに関しては[OWASP Webセキュリティ要件書](https://github.com/ueno1000/secreq)に
なるべく沿う形で実装する。

UI的には、下記の内容を満足するよう
設計する。

```
【全体】
チュートリアルや説明が無くても
直感的に操作できる

【メンバー】
スタジオやライブハウス等落ち着かない場所でも
モバイル端末で見やすい・操作しやすい。

【管理者】
大人数のライブや多数のバンド情報を
PC上で捌きやすい
```

## まとめ

業務フローや機能・非機能要件をまとめることで
システムには具体的にどんなことが必要か
改めて認識することができた。

次回は設計に入っていく。

## バックログ

[バンドサークル管理webアプリ製作日記 - Introduction](https://qiita.com/RINYU_DRVO/items/d6f1e27749d01e2fdf75)
[バンドサークル管理webアプリ製作日記 - 問題提起](https://qiita.com/RINYU_DRVO/items/d73c8c9c8732fbbd1a3f)
[バンドサークル管理webアプリ製作日記 - 競合比較](https://qiita.com/RINYU_DRVO/items/849cf034095977b5f57e)
[バンドサークル管理webアプリ製作日記 - ユースケース](https://qiita.com/RINYU_DRVO/items/52d4e9458b49ffd959f5)

## 参考

[要件定義とは何？スムーズな進め方や成果物(要件定義書)についても解説](https://backlog.com/ja/blog/what-is-project-requirements-definition/#i-5)
[機能要件とは？システムの品質向上にかかわる非機能要件との違い](https://hnavi.co.jp/knowledge/blog/functional-requirement/)
[OWASP Webセキュリティ要件書](https://github.com/ueno1000/secreq)
Vue.jsでローディング画面作ってみた

初投稿です。
御見苦しいところなどあればすみません…


仕事でVue.jsを使ってSPAを作っていた際に、どうしても少し時間がかかってしまう処理を行っている間に別の操作をさせたくなかったので、ローディング画面を表示させて他の操作を実行できないようにしました。

そのとき使った「**vue-loading**」が便利だったのでご紹介。
##インストール##
以下のコマンドでインストール

yarnの場合

```:
yarn add vue-loading-template
```


npmの場合

```:
npm install vue-loading-template
```


##使い方##
他のモジュールと同様に使いたいViewでインストールして使います。

今回は、親のコンポーネントから受け取ったisLoadingがtrueの場合、全体にマスクしてクルクルを表示させました。

```javascript:Loading.vue
<template>
  <div class="modal-mask" v-if="isLoading === true">
    <div class="loading">
      <vue-loading type="spin" color="#333" :size="{ width: '50px', height: '50px'}"></vue-loading>
    </div>
  </div>
</template>

<script>
import { VueLoading } from 'vue-loading-template';

export default {
  props: {
    isLoading: Boolean,
  },
  components: {
    VueLoading
  },
}
</script>

<style scoped>
.modal-mask {
  z-index:1;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>


```

これだけでロード中とわかりやすいクルクルを表示できます。便利…
他の表示パターンもあるので、[デモサイト](https://jkchao.github.io/vue-loading/)を見てみてください。



##参考文献##
[Vue.jsでシンプルなローディングを表示する「vue-loading」の使い方](https://dev.classmethod.jp/client-side/vue/vue-loading/)
[GitHub jkchao/vue-loading](https://github.com/jkchao/vue-loading)
【Rails】collectionとmemberの違い

# はじめに
学習中の備忘録です。
# 概要
7つの基本アクション以外でルーティングを定義する時の、collectionとmemberの違い。
結論：collectionはルーティングに:idがつかない、memberは:idがつく。

# 前提
- rails 5.2.3
- postsテーブルを検索するsearchアクションを定義
- 今回はcollectionとmemberの違いのみ。searchメソッドは定義済とする。

# collectionで定義した場合
```ruby
Rails.application.routes.draw　do
  resources :posts do
    collection do
      get 'search'
    end
  end
end
```
# collectionのルーティング
```
Prefix          Verb    URI                                 Pattern
search_posts    GET     /posts/search(.:format)             posts#search
```
# memberで定義した場合
```ruby
Rails.application.routes.draw do
  resources :posts do
    member do
      get 'search'
    end
  end
end
```
# memberのルーティング
```
Prefix           Verb    URI                               Pattern
search_post      GET    /posts/:id/search(.:format)        posts#search
``` 
# まとめ
URIの指定先が、collectionが:idなし、memberが:idありとなっていることが確認できます。
【SendTo】ネットワークドライブ上のパスをフルパス(UNCパス)に変換する

# これは何？
ネットワークドライブ上のパスをフルパス(UNCパス)に変換してクリップボードにコピーするスクリプト。
SendToフォルダに置いて使う。(%APPDATA%\Microsoft\Windows\SendTo)


# ネットワークドライブとは
ネットワーク上にある共有フォルダにドライブレターを割り当てて、ローカルPCのストレージと同じようにアクセスできる機能。

例：共有フォルダ「**&yen;&yen;SERVER&yen;GROUP1&yen;SHARE**」にドライブレター「**H**」を割り当てると
　　**&yen;&yen;SERVER&yen;GROUP1&yen;SHARE&yen;***xxx&yen;yyy&yen;zzz*
に
　　**H:&yen;***xxx&yen;yyy&yen;zzz*
でアクセスできる。

が、他の人にパスを連絡するときは前者(UNCパス)が必要になるので、ネットワークドライブ上のパスをUNCパスに楽に変換したい欲求が出てくる。


# コード

~~~vb:ネットワークドライブ上のパスをUNCパスに変換.vbs
Option Explicit

Dim FSO:	Set FSO = CreateObject("Scripting.FileSystemObject")
Dim WSH:	Set WSH = CreateObject("WScript.Shell")

Main

WScript.Quit



'***********************************************************
' メイン関数
'***********************************************************
Sub Main()
	Dim vbReturn
	Dim strArgument
	Dim strFullPath

	' コマンドラインのファイルを順に処理する
	For Each strArgument In WScript.Arguments.Unnamed
		' ファイルをUNCパスに変換
		strFullPath = GetUncPath(strArgument)
		If strFullPath = "" Then
			strFullPath = strArgument
		End If

		' UNCパスをクリップボードにコピー
		Call CopyToClipboard(strFullPath)

		vbReturn = MsgBox(strFullPath, vbOKCancel, "クリップボードにコピーしました。")
		If vbReturn = vbCancel Then
			Exit Sub
		End If
	Next
End Sub



'***********************************************************
' ファイルをUNCパスに変換
'***********************************************************
Function GetUncPath (strFile)
	Dim strDrive
	Dim strNetworkPath
	Dim strFullPath
	Dim wshExec
	Dim strCmdOutput

	' ドライブレター(「:」を含む)を抽出
	strDrive = Left(strFile, Instr(strFile, ":"))

	' 「net use」コマンドでドライブの情報を取得
	'
	' 【実行結果サンプル】
	'	ローカル名         X:
	'	リモート名         \\hostname\xxx\yyy\zzz
	'	リソースの種類     Disk
	'	ステータス         OK
	'	オープン数         *
	'	接続数             *
	'	コマンドは正常に終了しました。
	'
	strFullPath = ""
	Set wshExec = WSH.Exec("cmd /c net use " & strDrive)
	Do Until wshExec.StdOut.AtEndOfline
		strCmdOutput = wshExec.StdOut.ReadLine
		If Instr(strCmdOutput, "リモート名") <> 0 Then
			strNetworkPath = Trim(Right(strCmdOutput, Len(strCmdOutput)-5))
			strFullPath = Replace(strFile, strDrive, strNetworkPath)
		End If
	Loop

	GetUncPath = strFullPath
End Function


'***********************************************************
' テキストをクリップボードにコピー
'***********************************************************
Sub CopyToClipboard(strText)
	Dim wshExec

	' クリップボードへ出力
	Set wshExec = WSH.Exec("clip")
	wshExec.StdIn.Write(strText)
	wshExec.StdIn.Close()

	' 参照を解放する
	' メモ：ＭＳを信じれば(足を)すくわれる
	Set wshExec = Nothing
End Sub

~~~


# 更新履歴
2020/04/03　投稿
2020/04/07　タグ更新
Javaでファイルのハッシュ値を返却するサンプルプログラム

javaでファイルのハッシュ値を返却するサンプルプログラムです。

```java:SampleMain.java
package test;

public class SampleMain {

	public static void main(String[] args) {
		System.out.println(SampleHash
				.getfileHash("glassfish-5.0.1.zip", SampleHash.SHA_512));
	}
}
```


```java:SampleHash.java
package test;

import java.io.BufferedInputStream;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.security.DigestInputStream;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;

public class SampleHash {

	/** MD2アルゴリズム */
	public static final String MD2 = "MD2";
	/** MD5アルゴリズム */
	public static final String MD5 = "MD5";
	/** SHA-1アルゴリズム */
	public static final String SHA_1 = "SHA-1";
	/** SHA-256アルゴリズム */
	public static final String SHA_256 = "SHA-256";
	/** SHA-512アルゴリズム */
	public static final String SHA_512 = "SHA-512";

	/**
	 * ファイルのハッシュ値（文字列）を返す
	 * @param filePath ファイルパス
	 * @param algorithmName アルゴリズム
	 * @return ハッシュ値（文字列）
	 */
	public static String getfileHash(String filePath, String algorithmName) {

		Path path = Paths.get(filePath);

		byte[] hash = null;

		// アルゴリズム取得
		MessageDigest md = null;
		try {
			md = MessageDigest.getInstance(algorithmName);
		} catch (NoSuchAlgorithmException e) {
			e.printStackTrace();
		}

		try (
				// 入力ストリームの生成
				DigestInputStream dis = new DigestInputStream(
						new BufferedInputStream(Files.newInputStream(path)), md)) {

			// ファイルの読み込み
			while (dis.read() != -1) {
			}

			// ハッシュ値の計算
			hash = md.digest();

		} catch (IOException e) {
			e.printStackTrace();
		}

		// ハッシュ値（byte）を文字列に変換し返却
		StringBuilder sb = new StringBuilder();
		for (byte b : hash) {
			String hex = String.format("%02x", b);
			sb.append(hex);
		}
		return sb.toString();
	}
}
```

`java.security.DigestInputStream`と`java.security.MessageDigest`を使用してハッシュ値を取得しています。
取得したハッシュ値（byte）を文字列に変換して返却しています。

---

以上
PipenvからPoetryへお引越しするお話

Pipenvのlockがなかなか終わらないんですが...という不満がチームメンバーから噴出しまして、
これを解消してくれそうなPoetryへお引越しする！

というお話です。

よく見るお話ですね :smiley: 

## 前提

- プライベートなPyPIインデックスサーバがある
- バージョンの記述方法は変えない
- `packages`,`dev-packages`それぞれお引越し
- スクリプトもできればお引越し

## 引っ越しツール

[poetry#1701](https://github.com/python-poetry/poetry/issues/1701) や [poetry#663](https://github.com/python-poetry/poetry/issues/663) を見ると、
[dephell](https://dephell.org/) や ワンライナー の方法があるようですが、
上の前提を満たすような感じではありませんでした。

ということで、 [pipenv-poetry-migrate](https://pypi.org/project/pipenv-poetry-migrate/) というツールを作りました :tada:
殴り書いた感じなのでテストがないですが、今後書いていきます :bow:

## 引っ越し手順

### Step 0: `poetry`, `pipenv-poetry-migrate` のインストール

`poetry` は[公式が推奨する方法](https://python-poetry.org/docs/#installation)でインストールしてください。
`pipenv-poetry-migrate`は下記のコマンドでインストールします。

```
$ pip install -U pipenv-poetry-migrate
```

### Step 1: `pyproject.toml`を作成する

まずはお引越し先となる `pyproject.toml` を作成します。

```
$ poetry init
```

依存パッケージは `no` と答えて空っぽにしておいてください。

### Step 2: お引越しスクリプト実行

```
$ pipenv-poetry-migrate -f Pipfile -t pyproject.toml
```

何も出力されませんが、 `pyproject.toml` に依存パッケージやスクリプトなどがお引越しされます。

### Step 3: lockファイルを作成する

```
$ poetry lock
```

プライベートなPyPIインデックスサーバを使っていても、設定がお引越しされているので上手くいくはずです。
`pre-release`なパッケージがある場合は失敗するかもしれません。その場合は、`pyproject.toml`を修正してください。

### Step 4: 仮想環境に依存パッケージをインストールする

```
$ poetry install
```

正常に終了すれば、仮想環境が構築完了です。

## まだお引越しは終わってない

お引越しはPipfileだけではなく他にもあります。

- tox.ini
- Dockerfile
- CI/CD設定

だいたいこの辺りでしょうか。忘れずに編集しましょう。
ここらへんはプロジェクトやリポジトリの状態によって変わると思うので、端折ります :bow:

## おしまい

賛否いろいろある気がしますが、色々方法があるうちの1つの紹介でした。

[pipenv-poetry-migrate](https://pypi.org/project/pipenv-poetry-migrate/) はお気に召して頂けたら、どんどん使っていただければと思います。
雑なIssue, PRなどもお待ちしております！
Swift Optionalのベストプラクティス

### 概要
つい最近までObjective-CでiOSアプリを作っていた筆者が，Swift移行を進めた際に，最も頭を悩ませたのがOptionalの扱い。もちろん，?や!やif let, guard letは理解できるけども，ベストな方法がなかなか決まらなかった。以下，現状で筆者が思うベストな使い方をまとめておきます。

改善提案や「こんな場合はどうするの？」は大歓迎です。


### !がついている変数はいつ使う？
例えば，UIViewControllerのサブクラスでは，よく以下のような定義をしますね。

```swift:sample.swift

@IBoutlet weak var titleLabel:UILabel!

```
Storyboardを使用する際の定番の実装です。これの意味をよく考えてみると，!のついた変数宣言をいつ使うのかが理解できます。

前提として，!のついた変数はOptional型であり，nilを許容します。それがなぜ，Outletの宣言に使われるのか。それは，ViewControllerのインスタンス化とStoryboardの読み込みタイミングが関係しています。
ViewControllerがインスタンス化された時には，まだStoryboardは読み込まれていないわけですね。その時点でViewControllerのtitleLabelはnilになってしまうので，titleLabelはnilを許容しなければなりません。
ただし，一度Storyboardが読み込まれ，titleLabelにUILabelのインスタンスがセットされた後は，このプロパティが変更されることは（ほぼ）ありません。こういう場合に!つきの変数宣言を使用します。最初はnilだが，一度値をセットしたら2度と変更しないようなものは!付きで宣言するということですね。

### ?がついている変数，何もついていない変数の宣言
!付きの変数についてはわかったけども，?や何もついていない変数についてはどうするべきか。
例えば，何らかの処理が進行中かどうかを示すフラグは，通常Boolで宣言します。

```swift:Sample.swift
var isProcessing = false
```

この種の変数はnilは入らないので，宣言と同時に値を代入します。!や?はつきません。
逆に，nilをうまく使う場合としては，例えば何らかのSNS的なアプリで，ユーザーが自分のプロフィール画像を選択するケース。画像の選択はUIImagePickerControllerで良いと思いますが，そこから受け取った画像をどうするか。

```swift:Sample.swift
var selectedImage:UIImage? = nil
```

このように選択された画像を保持しておくプロパティを宣言しておき，ユーザーが画像を選択した場合には，その画像をこのプロパティにセットします。
何も選択されていない場合にはnilになっているので，if let...でnilチェックし，nilじゃない場合にはプロフィール画像を更新するわけですね。


### if let... はいつ使う？ Dictionaryからデータを取り出す場合
ご存知の通り，!や?つきの変数にnilが入っていないかを判定するために使われるのが，if letやguard letです。文法的な定義は他の記事を参考していただくとして，問題はこれらの上手な使い方です。
例えば，JSONでサーバから受け取ったデータ。dictionaryなのだが，[String:Any]だとする。何らかのキーで辞書から値を取り出した場合，値がnilの場合もあるし，nilじゃなかった場合でもStringやIntにキャストしなきゃいけない。キャストが失敗することもある。こういう場合，if let...とas?を使用した書き方がベストプラクティスになるでしょう（自信なし）。

```swift:sample.swift

let dict:[String:Any] = ["key_string":"string", "key_int":10]

if let string = dict["key_string"] as? String{
    print("stringありまっせ")
}
else{
    print("値がなかった場合のデフォルト値が必要なら，ここで決めましょう")
}


```

as? は，キャストが失敗した場合nilを返します。ここでas!を使ってしまうと，キャストが失敗するとアプリはクラッシュ。as? とif let...を使って値を安全に取り出すわけですね。


### guard let ... elseは，いつ使う？
これも文法的な定義は他に譲るとして，この構文の重要な特徴としてあげられるのが，else句では必ずreturnしなきゃいけないということ。つまり，この構文の意味としては「値がnilだったらそこで処理を中断」ということです。
かつてObjective-Cの時代にも「値がnilだったらそこでreturn」というコードはよく書かれていたのだけども，guard let...はまさにそれですね。特にここでサンプルは挙げませんが，guard let...はそういうものだと思います。（自信なし）

### 最後に
他にもOptionalの扱いに迷うケースがありましたら，ぜひコメントお寄せください。間違いの指摘も歓迎です。
postgresがGUIで見れるpgwebを一瞬で構築するdocker-composeの書き方

postgresがGUIで見れるpgwebを一瞬で構築するdocker-composeの書き方です。

データベースをGUIで見たいことや、見たいと言われることありますよね？

postgresでdockerさえあればpgwebを使用してインストール不要でブラウザでGUIを用意できます。

https://github.com/sosedoff/pgweb

しかもdocker-compose.ymlさえあれば、`docker-compose build`,`docker-compose up`して
localhost:8080にアクセスするだけ。

超お手軽です！

今回はcloud9で見れるように、cloud9デフォルトポートの8080に割り当てています。

```yml
version: "3"
services:
  pgweb:
    image: sosedoff/pgweb
    ports:
      - "8080:8081"
    environment:
      PGWEB_DATABASE_URL: postgres://postgres:pgweb@db:5432/postgres?sslmode=disable
    depends_on:
      - db
  db:
    image: postgres:11.1-alpine
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: pgweb
    ports:
      - "5432:5432"
    volumes:
      - "./postgres-data:/var/lib/postgresql/data"
```

![Screenshot from 2020-04-03 00-09-31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93394/db2b53ff-3eb4-4e50-55ec-a1d561af82fc.png)
【VSCode】Debugger for ChromeでVue.jsのデバックする時、ハマる罠（解決済）

# 解決する課題

VSCodeでDebugger for Chromeのプラグインを使ってvue.jsのデバックする

https://jp.vuejs.org/v2/cookbook/debugging-in-vscode.html
この方法。

ソースコードでブレークポイントを設定しようとしても灰色のマルがついて設定できない。


# 解決策

webpackのdevtoolの設定を、'inline-source-map'にする。

devtool: 'source-map'
↓
devtool: 'inline-source-map'

# inlineにする理由

RemoteDevelopmentを使用して開発していたため、source-mapがchromeブラウザ側で参照できてなかった様子。

Debugger for Chromeのドキュメントに次の記述がありました。

Usage with remote VSCode extensions
～～省略～～
Since the extension can't currently access the remote disk, sourcemaps can't be read from disk. If sourcemaps are inlined, they will still be used. If possible, they will be downloaded through your webserver.

remote のディスクにアクセスできないからsource-mapを参照できない。

vue.jsでは、webpackを使っていて、source-mapの設定をしていて、まさにこれに当てはまってました。

inlineだったら取得できる。
東京都のCOVID-19陽性患者数に指数関数とロジスティクス関数をフィッティングしてみた

# 背景

世界のCOVID-19感染者数のトレンドを指数関数とロジスティクス関数にフィッティングし、倍増する期間を計算している人がいました (https://github.com/aatishb/covid) ので、clone して東京都が公開している患者数のデータに当てはめてみました。

なぜ東京都かというと、全国のデータだと地域による事情の差が一つの分布に紛れ込んでしまうので、限られた地域で理想的な感染爆発のモデルに当てはめるほうが合わせこみやすかろうという考えです。また、国内では今一番リスクを抱えている地域でもあります。

分析方法や注意点は Notebook に書かれています。

# 結果

Notebook はこちらにあります: https://github.com/msakuta/covid/blob/master/curvefit-tokyo.ipynb

```
** Based on Most Recent Week of Data **

	Confirmed cases on 2020-04-02 00:00:00 	 587.0
	Confirmed cases on 2020-03-26 00:00:00 	 212.0
	Ratio: 2.77
	Weekly increase: 176.9 %
	Daily increase: 15.7 % per day
	Doubling Time (represents recent growth): 4.8 days

** Based on Logistic Fit**

	R^2: 0.9753797360404987
	Doubling Time (during middle of growth):  12.02 (± nan ) days

** Based on Exponential Fit **

	R^2: 0.975379736914424
	Doubling Time (represents overall growth):  6.01 (± 0.38 ) days
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242745/9d134196-cef1-f119-9a50-84ae2b10ebd8.png)

注目すべきはR^2の値で、指数関数とロジスティクス関数の両方で0.97を超えており、典型的な爆発的増殖の軌跡をたどっているとみることができます。

直近の1週間の件数ベースでは倍増期間は4.8日、ロジスティクス関数では(最大勾配点で)12.02日、指数関数では6.01となっています。


## 外挿した場合

指数関数を外挿するのは一般的にはあまりいいアイデアではありませんが、仮に指数関数的成長が続いたとすると、30日後には2万件程度になっている計算です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242745/9cfc6157-2af9-42d9-d965-66485de4e645.png)

もちろんこのように推移するとは簡単には結論付けられません。都も外出自粛要請を出していますし人の認識もここ数週間で大きく変わりました。早く収束する可能性も十分にあると思います。
ただ、このグラフを見て「ぎりぎり踏みとどまっている」というのはかなり能天気なのでは……と思わざるを得ません。

COVID-19の恐ろしいところは無自覚な潜伏期間があり、この間にウィルスをまき散らしている可能性があるということです。この潜伏期間は日本感染症学会によると (https://www.kansensho.or.jp/ref/d77.html) 1~14日となっていますが、対策を取ってから効果が出るまで最長で2週間ほどの遅れがあるということです。個人的には今緊急事態宣言を出しても遅すぎるぐらいではないかと思います。

また、日本の検査数は外国に比べてかなり少ないので、未検出の感染者がどれだけ潜んでいるかは未知数です。

さらなる難しいところは、事態が毎週のように激変するので、普通の人の感覚が追いついていない部分があると思います。しかし東京だって、1か月後にはニューヨークのように病院から溢れた遺体を冷蔵庫に保管しているかもしれないのです。

幸い感染者数のデータは毎日更新されるので、できるだけトレンドをウォッチしていきたいと思います。


# 参考

Notebook のオリジナルの作者にも紹介されていますが、以下の動画はとてもお勧めです。

https://www.youtube.com/watch?v=Kas0tIxDvrg

https://www.youtube.com/watch?v=54XLXg4fYsc&t=1s
apollo codegenの型定義生成メモ

## apollo install

2020/04/02時点では`apollo 2.25.0`であった。

```bash
$ yarn add apollo
```

## apollo.config.js

includes には、Query を書いているファイルを glob で指定する。
型定義の他、VSCodeの拡張等がapollo.client.jsを読んでqueryの補完等を行ってくれる。

### Apollo schema registry を使用する場合

```js
module.exports = {
  client: {
    includes: ["./src/**/*.tsx", "./src/**/*.ts"],
    service: "my-apollo-service"
  }
};
```

### エンドポイントからスキーマをリンクする場合

```js
module.exports = {
  client: {
    includes: ["./src/**/*.tsx", "./src/**/*.ts"],
    service: {
      name: "service-name",
      url: "https://sample.com/graphql/"
    }
  }
};
```

### ローカルファイルからスキーマをリンクする場合

```js
module.exports = {
  client: {
    includes: ["./src/**/*.tsx", "./src/**/*.ts"],
    service: {
      name: "service-name",
      localSchemaFile: "./path/to/schema.graphql"
    }
  }
};
```

## コマンド実行

```json
{
  "scripts": {
    "codegen": "apollo client:codegen src/types/api.d.ts --useReadOnlyTypes --addTypename --target=typescript --outputFlat"
  }
}
```

```bash
yarn run codegen
```

## 参考

[Configuring Apollo projects - Apollo Basics - Apollo GraphQL Docs](https://www.apollographql.com/docs/devtools/apollo-config/)
scalaの細かいあれこれ調べてみた

## scalaの特徴
[前回の記事](https://qiita.com/eve1224/items/0b539e80421eda7fd53c)にてscalaの特徴に何があるかを調べたが、それらについて深掘りしていきたいと思います。

■特徴の一部
・オブジェクト指向プログラミング言語に、関数型プログラミング言語をミックスした新しいタイプの言語である(マルチパラダイム言語)
・強力な型推論
・高階関数
・Immutable Collections
・平行計算
・インタラクティブな実行環境(REPL)も用意されている
これらについて深掘りしていきたいと思います。

### マルチパラダイム言語
複数のプログラミングパラダイムに対応する言語のことで
プログラミングパラダイムはプログラミングの記述における方法や考えかたを表したものである
プログラミングの手法としてオブジェクト指向や関数型だったりと様々なものがあります
これらを複数もつものをマルチパラダイム言語と呼ぶそうです。
scalaの場合はオブジェクト志向に関数型をミックスした言語になります。

参考記事
[マルチパラダイムプログラミング言語とは](https://qiita.com/nezu_yakki/items/be2181076ea13c2c64b9)
### 強力な型推論
[wiki](https://ja.wikipedia.org/wiki/%E5%9E%8B%E6%8E%A8%E8%AB%96)より
静的な型付けを持つ言語において、変数や関数シグネチャの型を明示的に宣言しなくても、初期化のための代入式の右辺値や関数呼び出し時の実引数などといった、周辺情報および文脈などから自動的に（暗黙的に）各々の型を決定する機構のこと。
型を指定しなくても代入した値から型を自動で考えてくれるということか

参考記事
[人でもわかる型推論](https://qiita.com/uint256_t/items/7d8c8feeffc03b388825)

### 高階関数
[wiki](https://ja.wikipedia.org/wiki/%E9%AB%98%E9%9A%8E%E9%96%A2%E6%95%B0)より
第1級関数をサポートしているプログラミング言語において少なくとも以下のうち一つを満たす関数のことである
・関数を引数にとる
・関数を返す
実際にプログラムを動かしながら理解していきたい

### Immutable Collections
うまく調べられず、後日深掘りすることとする...

### 平行計算
検索すると並列計算がヒットする...なぜだ

### インタラクティブな実行環境(REPL)も用意されている
[wiki](https://ja.wikipedia.org/wiki/REPL)より
REPLとはRead-Eval-Print Loopの頭文字を取っている
入力・評価・出力のループのことである。
ユーザーとインタプリンタが対話的にコード片を実行できるもの
Laravel7.xにVue-Routerを実装してSPAを構築してみる (3)

# 概要

Laravel側で設定してないURLでリロードすると404エラーページが出てしまう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208640/cd8719a5-5bce-6992-1241-19306829c29e.png)

リロードすると…

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208640/a62be932-28a2-6c9a-dd86-8ce87850757a.png)

リロードすることでVue-Routerで設定したラウトのページへ飛ぶようにしてみる

# 詳細
### Laravel側のラウト設定

- ラウトしていないURLもIndexページへ遷移するようにコードを追加
- URL情報をパラメータとしてVue-Routerに渡せるように設定

```php:routes/web.php
// Route::get('/', function () {
//     return view('welcome');
// });
Route::get('/{extraUrl?}', function ($extraUrl = null) {
    return view('welcome', [
        'extraUrl' => $extraUrl
    ]);
});
```

上の処理で<B>prefix（サブディレクトリ）がないURL</b>はIndexページへ遷移することが可能
例１）localhost:8000/report
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208640/11489d95-a3a3-1e95-38de-5c017b9f0a6d.png)
例２）localhost:8000/report/report
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208640/abadd943-cd4a-dfa8-7197-60babc7624d3.png)
→　prefixが設定されているので404エラーが出力される…　ここは後で対応してみよう

### Vue-Routerでデフォルトラウトを設定

- Vue-routerに設定されてないラウトが来た場合はIndexページへ遷移されるように設定

```Javascript:resources/js/app.js
const router = new VueRouter({
    mode: 'history',
    routes: [
        // Indexページ
        {
            path: '/report',
            name: 'report-page',
            component: ReportPage
        },
        // フォームページ
        {
            path: '/form',
            name: 'form-page',
            component: FormPage
        },
        // デフォルトページ；Indexページ
        {
            path: '*',
            redirect: '/report'
        },
    ]
});
```

# 結果確認

- localhost:8000/unknown_routeを入力してみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208640/47e846e3-c4b4-d197-4497-0fbd7873b3bd.png)

→　404エラーページが出力されず、設定したデフォうとページに遷移されたので<b>OK</b>
チーム開発（商品詳細編集）

https://gyazo.com/4cbd376f4d5d1c612ad3f6eb8f2c6994
merge(saler_id: current_user.id)で解決
user_idを余計に記述しエラー、ハッシュをよく理解しないといけない。

Mysql2::Error: Table '' already existsの解決方法
参考サイト
https://bokunonikki.net/post/2018/0214_rails_mysql_error/

今回商品編集をトップページでしてしまっていた。
そもそも商品の詳細ページ編集しなくてはならない、ほぼ一日無駄にした。
ほんとはもっとエラーを経験したが、焦りと、イライラでメモするのを忘れてしまった。
javaのclassファイルを逆コンパイルする方法

- 環境
    - Windows10 64bit バージョン1903
    - Eclipse Version: 2019-12 (4.14)

# Javaのデコンパイラーをインストールする
1. [JAD Decompiler Download](http://www.javadecompilers.com/jad)から`Jad 1.5.8g for Windows 9x-NT-2000 on Intel platform.zip`をダウンロードする
2. zipを解凍する
3. zipから出てきた`jad.exe`を`$JAVA_HOME/bin`に格納する
    - $JAVA_HOMEに入れないでPATHを通してもOK

```bash:jadでヘルプ的なものが出ればOK
$ jad
Jad v1.5.8g. Copyright 2001 Pavel Kouznetsov (jad@kpdus.com).
Usage:    jad [option(s)] <filename(s)>
Options: -a       - generate JVM instructions as comments (annotate)
...省略...
```

# classファイルを逆コンパイルする

```bash
# 1. classファイルの場所を確認する
$ find /c/app/pleiades/workspace/ponsuke/ -type f -name PonsukeMain.*                                                                             /c/app/pleiades/workspace/ponsuke/src/main/java/ponsuke/PonsukeMain.java
/c/app/pleiades/workspace/ponsuke/target/classes/ponsuke/PonsukeMain.class

# 2. 逆コンパイルする
$ jad -a /c/app/pleiades/workspace/ponsuke/target/classes/ponsuke/PonsukeMain.class
Parsing C:/app/pleiades/workspace/ponsuke/target/classes/ponsuke/PonsukeMain.class... Generating PonsukeMain.jad

# 3. 現在の場所に逆コンパイルされたjadファイルが出力されるのでエディタなどで見る
$ ls -la | grep PonsukeMain
-rw-r--r-- 1 ponsuke 197609    3296 4月   2 23:32 PonsukeMain.jad
```
Proxy環境下でのあれこれ

# Proxy環境下でのあれこれ

## 環境
* MacBook Pro(Retina, 15-inch, Mid 2015)
    * macOS Mojave (v 10.14.1)
* Ruby 2.3.7p456
* gem 3.0.3
* Homebrew 2.1.2
* carthage 0.33.0
* cocoapods 1.5.3

## Proxy書式

```
http://<serverhost>:<port>
http://<username>:<password>@<serverhost>:<port>
```
usernameに`@`が含まれる場合はURLエンコードした`%40`で置き換える.
## gem installができない
```
$ gem install パッケージ名 -r -p <Proxy>
```
[Proxy環境でgem install - Qiita](https://qiita.com/wakaba260/items/f7794cea3fac8c694dcf)

## 環境変数にProxy設定をする
以下のように`.bashrc`に設定する.
大文字と小文字の両方で設定しないといけないらしい.

```bash:~/.bashrc
export HTTP_PROXY=<Proxy>
export HTTPS_PROXY=${HTTP_PROXY}
export http_proxy=<Proxy>
export https_proxy=${http_proxy}
```
設定後以下のコマンドを実行することで設定が反映される.
（`.bashrc`に他の設定が書かれている場合それらも適用されるので注意すること.）

```Bash
$ source ~/.bashrc
```

各環境変数をリセットしたい場合には下記のようにする.

```Bash
$ unset http_proxy
```

## curlが動かない
`.curlrc`に設定する. 

```bash:~/.curlrc
proxy=<Proxy>
```
[curlコマンドにてproxy設定 - Qiita](https://qiita.com/tkj/items/c6dad4efc0dff4fecd93)

## GitHubに接続ができない
以下のコマンドによってgit configにプロキシ設定をする.

```Bash
$ git config --global http_proxy <Proxy>
$ git config --global https_proxy <Proxy>
```
[プロキシ経由でcarthage updateができなかった場合の対処法 | DEVRECO](https://dev-reco.com/245)

git configの設定値をリセットしたい場合には以下のコマンドを使用する

```Bash
$ git config --global --unset http_proxy
```
【Rails】hoge.herokuapp.comへのアクセスをリダイレクトさせる

###環境設定
Rails 6.0.0
ruby 2.6.5




#リダイレクトさせるために必要なコードとは？
お名前.comでせっかく独自ドメインを買ったのに、
hogehoge.heroku.comでアクセスできてしまう。。。

これを解消するのがリダイレクト処理。

gemで、rack-rewriteというのもあるようですが、
コードを足すだけでも実現可能とのことでgemは使わず実装してみました。

```ruby:application_controller.rb
class ApplicationController < ActionController::Base

  #herokuapp.comから独自ドメインへリダイレクト
  before_action :ensure_domain
  FQDN = 'www.hogehoge.net'

  # redirect correct server from herokuapp domain for SEO
  def ensure_domain
  return unless /\.herokuapp.com/ =~ request.host
  
  # 主にlocalテスト用の対策80と443以外でアクセスされた場合ポート番号をURLに含める 
  port = ":#{request.port}" unless [80, 443].include?(request.port)
  redirect_to "#{request.protocol}#{FQDN}#{port}#{request.path}", status: :moved_permanently
  end
end

```


参考記事では`before_filter`となっていましたが、Rails4以降は使えなくなっているので、`before_action`で書きます。

`FQDN`は取得した独自ドメインを定義してあげます。

他はコピペでも大丈夫です（僕はこれでうまくリダイレクトしてくれています）



##参考記事
[【Rails】herokuapp.comから独自ドメインに301リダイレクトを行う方法](https://pg-happy.jp/rails-heroku-domain-301redirect.html)


今回はこれで以上です。
E資格の機械学習の基礎について (E資格対策)

本日は機械学習の基礎の項目について。

目次
[機械学習とは？](#機械学習とは？)
[機械学習の学習アルゴリズム](#機械学習の学習アルゴリズム)
[精度、過剰適合、適合不足（過少適合）](#精度、過剰適合、適合不足（過少適合）)
[ハイパーパラメータ](#ハイパーパラメータ)

#機械学習とは？

簡単に言うと**予測の自動化**です。つまり

× 物事のメカニズムの理解（どうしてコインの表の出る確率はこうなっているのだろうか？）
〇 データからメカニズムを学び未来を予測（このコインの表の出た割合から未来は表はこれぐらい出るだろう）

と間違えます。メカニズムの理解は統計学の方々が主なお仕事です。



## 3つの学習スタイル

機械学習には3つの学習スタイルがあります。


### 教師あり学習
原因と結果のペアのデータから規則を学び、新しいデータに対して予測を行う手法、以下の2つがあります。
#### 分類
複数クラスに分類したいとき
例：退職予測（原因には欠勤日数、給与、役職などさまざまなものが考えられます。)
#### 回帰
連続値を予測したいとき
例：株価予測（原因には倒産件数、エンゲル係数などさまざまなものが考えられます。)

### 教師なし学習
データから何か規則性はないか学習するものになります。
例：製品の異常検知


### 強化学習
報酬の最大化をしたいとき
例：スマブラのCPU


上2つが良く使われます。

#機械学習の学習とは？



学習はこう言われています。
「プログラムが、ある種のタスクTと評価尺度Pにおいて、経験Eから学習するとは、タスクTにおけるその性能をPによって評価した際に、経験Eによってそれが改善されている場合である」
（ Machine Learning, Tom Mitchell, McGraw Hill, 1997.）

図にするとこうでしょうか。

<img width="569" alt="機械学習とは.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604787/fe501e10-e5d2-07b0-2e27-8731b2651ef3.png">









#精度、過剰適合、適合不足（過少適合）

機械を学習するにあたって注意点があります。

<img width="569" alt="能力.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604787/230942df-c337-e7cf-a8cc-11db63672fbe.png">


上の図のように学習データに対しての精度を上げすぎると、今度はテストデータに対する精度が落ちてしまい、**過剰適合**となります。
かといって下げすぎるとテストデータ、学習データどちらに対しても精度が落ちてしまい、**適合不足**となります。

ざっくりいうと学習では**テストデータに対する精度の最大化**が目的となります。








#ハイパーパラメータ

ハイパーパラメータとは、機械学習アルゴリズムが持つパラメータの中で人が調整する必要のあるものです。
値によってモデルの性能が変化するため適切な値を設定しないといけません。
機械学習ならリッジ回帰のα値があります。
深層学習では勾配法によって最適化できない・しないパラメータに相当します。例えば、学習率やバッチサイズ、学習イテレーション数といったようなものがハイパーパラメータとなります。



今日はここまで。
【カンタン】Vueで縦に自動伸縮するtextareaの作り方 | How to make auto resizing <textarea>with Vue.js

[english ver](https://gist.github.com/Ishidall/4edf3de985f62a598ec81fe64919c199)

インターネッツで調べてみても中途半端なtextareaしか出てこなかったので、備忘も兼ねた記事です。

伸びるけど縮まないとか、縮むけど1文字いれるごとに2pxずつしか縮まないとか、意味なくない！？！？！？！？！？！？

んおお！？！？！？！？

# まずは結果
![ezgif-6-b2be62c1e8d5.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207329/69e201f9-ac84-0719-93e2-7a05e308ae22.gif)

うおおおおおおおお
うおおおおおおおお
うおおおおおおおお
うおおおおおおおお
うおおおおおおおおうおおおおおおおお
うおおおおおおおお
うおおおおおおおおうおおおおおおおおうおおおおおおおお
うおおおおおおおお
うおおおおおおおお
うおおおおおおおお

# コード
今気づいたけどマークダウンの候補にvuejsってある。。
便利すぎない？

業務で書いたコードからいらないやつ消した感じなので、このまま動かなかったらごめんなさい。
編集リクエスト送っていただければーーー

```vuejs:MyTextarea.vue
<template>
  <textarea
    class="textarea bg-white"
    :style="textareaStyle"
    :placeholder="placeholder"
    :value="value"
    @input="handleInput($event)"
  />
</template>

<script lang="ts">
import Vue from "vue"

export default Vue.extend({
  props: {
    placeholder: { type: String, default: "" },
    value: { type: String, default: '' }
  },
  data() {
    return {
      textareaHeight: 100 // デフォルト値いれとく。minHeightといっしょでよい。borderあるのでちょっとずれる
    }
  },
  computed: {
    textareaStyle(): object { // 動的にtextareaのheightをいじれるようにしている
      return {
        height: `${this.textareaHeight}px`
      }
    }
  },
  methods: {
    async handleInput(event: any) { // 入力されるたびによばれる。anyなのはゆるして。。。
      this.$emit('input', event.target.value) // これは親に伝えるためだけ。

      this.textareaHeight = 0 // ミソ。一旦textareaのheightを0にしちゃう

      await this.$nextTick() // さらにミソ。ここで待たないとDOMの更新前に下のコードが走って変な挙動になる

      // heightが0になった瞬間textareaはminHeight: 100になる
      // 入力済み文字列の高さが100を超えたら、scrollHeightが必要な分だけ大きくなる = それをheightにしちゃえばOK！
      this.textareaHeight = event.target.scrollHeight
    }
  }
})
</script>

<style lang="stylus" scoped>
.textarea-container {
  width: 100%;
}

.textarea {
  width: 100%;
  min-height: 100px; // ここはお好み。変えるならdata()の値も変えるとよいよ
  border: 1px solid #D9D9D9
  border-radius: 4px;
  padding: 5px 12px;

  &::placeholder {
    color: #D9D9D9
  }
}
</style>
```

# TL;DR
this.$nextTickがミソなんじゃぞ。
本日の学習内容part6

##はじめに
こんにちは。閲覧頂きありがとうございます。okayamanです。
今回から[PHPフレームワークLarabel入門第2版](https://www.shuwasystem.co.jp/book/9784798060996.html)の学習した内容をアウトプットしていきますのでよろしくお願いします。(もし、間違っている箇所があれば教えて下さい。ものすごく助かります。)ちなみにこの学習内容はLaravel 6、PHP 7で行っております。
####~P38まで終了


##ルーティングの基本->Route::get()
ルーティングとはあるアドレスにアクセスしたとき、どの処理を呼び出し実行するかを管理するもの。
Route::の後に来る単語や()内の記述によって処理が変わる。ここではRoute::getを取り上げる。



```
Route::get('hi', function() {
    return '<html><body><h1>Hi</h1><p>test page</p></body></html>';
});
```
上記のコードは第1引数がアドレス、第2引数が関数になっており
`http://localhost:8000/hi`にアクセスするとhtmlタグに囲まれた部分が戻り値となる。


##ヒアドキュメント
PHPで長い文章を記述するのに使われる。<<<演算子を使って、リスト内に記述されたテキストを変数に代入できる。

```
<?php

$test = <<<EOF
<html>
<head>
<title>Hey!!</title>
<style>
body {font-size:30px; color:black;}
h1 {font-size:60px; text-align:center; color:blue;}
</style>
</head>
<body>
<h1>こんにちは</h1>
<p>テストテスト</p>
</body>
</html>
EOF;

echo $test;

?>
```
$testを出力するだけで上記のHTMLが表示される。


##上記の２つを組み合わせると・・・

```
<?php

$test = <<<EOF
<html>
<head>
<title>Hey!!</title>
<style>
body {font-size:30px; color:black;}
h1 {font-size:60px; text-align:center; color:blue;}
</style>
</head>
<body>
<h1>こんにちは</h1>
<p>テストテスト</p>
</body>
</html>
EOF;

Route::get('hey', function() use ($test) {
   return $test;
});
```
`http://localhost:8000/hey`にアクセスするとヒアドキュメント部分が戻り値として返る。


##さいごに・・・
サンプルコードを見て、頭で理解はしているが、いざ説明しようとすると時間がかかる。これを続けていると人に説明する時に生きてくる気がする。。。気のせいかな？？笑
VSCodeを起動した時にCPU使用率が異常にあがる現象を解決する

先日VSCodeを数カ月ぶりに使おうと思い起動するとファンが唸りCPU使用率が異常にあがったため対処。共有したいと思います。

<img width="1801" alt="スクリーンショット 2020-03-19 12.38.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385012/c7e9c513-d203-2e9b-a88d-c46573371942.png">

↑こんな感じにCPUを異常に喰っている状態。
この画面を表示するには上部のHelp→Open Process Explorerを選択。

#結論
起動時にファイルをモニタリングする設定となっていて、これらを制限することで対処できました。

##解決した方法

**①settings.jsonを開く。**
開き方はcommand + ,　か
Code→Preference→Settingsから画面右上の赤丸の部分をクリック。

<img width="724" alt="スクリーンショット 2020-03-19 13.31.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385012/2ecae34e-612d-16e6-ff7b-b61406aaca9b.png">

**②VSCode起動時にモニタリングから除外する設定をする**
settings.jsonに画像のように記述を追加する。

<img width="644" alt="スクリーンショット 2020-03-19 13.24.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385012/6910af3c-9187-3ed1-e238-466f55963236.png">

重くなる原因となるファイルはケースによって異なると思いますので色々試してみてください。
私の場合はLibraryのみ指定で落ち着きました。


モニタリング除外後のProcess Explorerは以下
<img width="1090" alt="スクリーンショット 2020-03-19 13.27.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385012/ac0f3fbc-1329-f758-4b0f-8718b7cb2a53.png">

CPUを異常に喰う現象は収まったので一旦これで様子を見ています。
IBM Public CloudのAPIを使う準備

APIを叩く前に必要な情報の確認・入手のため、slcli コマンドをインストールする。

　＃pip install softlayer

以下のようなエラーメッセージが出た場合は、以下のようにインストールする。
ImportError: No module named configparser

　＃pip install configparser
DEPRECATION: Python 2.7 reached the end of its life on January 1st, 2020. Please upgrade your Python as Python 2.7 is no longer maintained. A future version of pip will drop support for Python 2.7. More details about Python 2 support in pip, can be found at https://pip.pypa.io/en/latest/development/release-process/#python-2-support
Collecting configparser
Downloading configparser-4.0.2-py2.py3-none-any.whl (22 kB)
Installing collected packages: configparser
Successfully installed configparser-4.0.2

APIを叩くスクリプトを動かした時に以下のようなエラーが出る場合があります。
Pythonのバージョンを上げることで出なくなります（softlayerモジュールの導入は行う必要あり）

ImportError: No module named xmlrpc.client

ところで認証情報は、以下の手順によりポータルから入手します。

メニュー上段より「管理」->「アクセス(IAM)」->左メニュの「ユーザー」より所有者「ユーザー」欄の最右「:」から「ユーザーの管理」を選択。

APIキー欄にて「クラシック・インフラストラクチャー API キーの詳細」欄の最右「:」から「詳細」を選択。
ポップアップされるウインドウに記載されている「API ユーザー名」と「API キー」をメモする。
つまりポータルログインアカウントではなく、単純にAPIキー生成したものが使えるわけではありません。
久しぶりに create-react-app を使ったら動かなかった話

# 事象
最近はいつも React Native を書いてるので、たまには React でも触ろうとして、[公式](https://reactjs.org/docs/create-a-new-react-app.html#create-react-app)に従い`npx create-react-app` コマンドを実行したら、

```
node_modules/
package.json
yarn.lock
```

しか存在しないプロジェクトが生成されました。
しかも、 `package.json` は、

```json
{
  "name": "PROJECT_NAME",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
  },
}
```

というシンプル極まりないもの。
グローバルインストールした `create-react-app` を削除しても直りません。

# 解決策
[GitHub の issue](https://github.com/facebook/create-react-app/issues/8088#issuecomment-563344143) にあるように、再度グローバルインストールをして、 `npx create-react-app` を実行すると直りました。



久しぶりに触ると色々とトラブルに直面しますね。不幸だ（ぇ
【もう迷わない】GCP Deployment Managerにおけるソースイメージの指定方法

# はじめに
GCPの[Deployment Manager](https://cloud.google.com/deployment-manager/docs)でソースイメージの指定方法について一通り見たものの、これといった記述が無かったためドキュメント漁りに無駄な時間を使ってしまいました。二度と迷わないようにメモ。

# properties.disks[0].sourceImage
FirstStepを引用して説明。[deploymentmanager\-samples/two\-vms\.yaml at master · GoogleCloudPlatform/deploymentmanager\-samples](https://github.com/GoogleCloudPlatform/deploymentmanager-samples/blob/master/examples/v2/step_by_step_guide/step2_create_a_configuration/two-vms.yaml)

`sourceImage: https://www.googleapis.com/compute/v1/projects/debian-cloud/global/images/family/debian-9`の最後尾`debian-9`となっている部分を変更することで変更が可能なのですが、CentOSは？Ubuntuは？WindowsSeverは？となった時に正しい指定方法がドキュメントでは見つけることが出来ませんでした。

```yaml
- name: the-first-vm
  type: compute.v1.instance
  properties:
    zone: us-central1-f
    machineType: https://www.googleapis.com/compute/v1/projects/MY_PROJECT/zones/us-central1-f/machineTypes/f1-micro
    disks:
    - deviceName: boot
      type: PERSISTENT
      boot: true
      autoDelete: true
      initializeParams:
        sourceImage: https://www.googleapis.com/compute/v1/projects/debian-cloud/global/images/family/debian-9
    networkInterfaces:
    - network: https://www.googleapis.com/compute/v1/projects/MY_PROJECT/global/networks/default
      accessConfigs:
      - name: External NAT
        type: ONE_TO_ONE_NAT
```

# 確認方法
コマンドライン（gcloudコマンド）から確認することが出来ました。
Ubuntu 18.04を使いたい時は、`sourceImage: https://www.googleapis.com/compute/v1/projects/debian-cloud/global/images/family/ubuntu-1804-lts`
ちなみに、完全にバージョンを固定したい時は **NAME** のところに書いてある項目名を指定します。この時、URLは`fimily`抜きの`https://www.googleapis.com/compute/v1/projects/debian-cloud/global/images/${NAME}`で指定することに注意して下さい。

```bash
$ gcloud compute images list

NAME                                                  PROJECT            FAMILY                            DEPRECATED  STATUS
: （略）
ubuntu-1604-xenial-v20200317                          ubuntu-os-cloud    ubuntu-1604-lts                               READY
ubuntu-1804-bionic-v20200317                          ubuntu-os-cloud    ubuntu-1804-lts                               READY
ubuntu-1910-eoan-v20200331                            ubuntu-os-cloud    ubuntu-1910                                   READY
ubuntu-minimal-1604-xenial-v20200317                  ubuntu-os-cloud    ubuntu-minimal-1604-lts                       READY
: （略）
```

# 終わりに
Deployment Manager、使っている人少なくないですかね。（2020/04/02現在、6タグしかない。）
AWSやAzureのようにDeploymentボタンが無いことが原因か？
Jinja2が使えるので、AWSやAzureより直感的に設定ファイルが書けるのでもう少し普及して欲しいところ。
おしまい。
JetBrains IntelliJ Editor Shortcuts and Settings

## Often used.
1. Command + SHIFT + V: Copy and paste from copy stack. 
2. SFHIT + fn + F6: Change Definition
3. f6: Change Definition
4. Command + SHIFT + L: Freformat
5. Control + Tab: Move tabs.  
6. Shift * 2: File search、Class search、Action search
7. Window => `Shift + Command + ``: Switch Project
8. Commnad + ↑: Jump to Navigation
9. `option + command + U`: Preview dependency.
10. `option + command + Y`: Reload
11. `shift*2`: search
12. `control + option + O`: delete unused import

### Memo
https://ipod.item-get.com/2018/06/mac_14.php

1. required
2. can affect your coding style
3. better speed
4. a bit useful


# Editor basics﻿

###### [Navigation](https://www.jetbrains.com/help/idea/using-code-editor.html#editor_basic_usage)
- 4: `⌥F12`: hide and open terminal

###### [Move,Remove,Sort Tab](https://www.jetbrains.com/help/idea/using-code-editor.html#80b4af49)
- 3: `⇧⌘]` or `⇧⌘[`

###### [Detach Tab](https://www.jetbrains.com/help/idea/using-code-editor.html#detach_tab)
- 4: `⇧F4`


# [Source Code Navigation](https://www.jetbrains.com/help/idea/navigating-through-the-source-code.html)

###### [Navigate with caret](https://www.jetbrains.com/help/idea/navigating-through-the-source-code.html#find_cursor_edit)
- 2 `Ctrl+M`: To find the current caret location 
- 3 `⌥⇧⌘[` or `⌥⇧⌘]` To navigate between code blocks, press  

###### [Move the caret](https://www.jetbrains.com/help/idea/navigating-through-the-source-code.html#caret_navigation)
- To move the caret to the next word or the previous word, press `⌥→` or `⌥←`

###### [Find Recent Location](https://www.jetbrains.com/help/idea/navigating-through-the-source-code.html#recent_locations)
- Recent locations: `⇧⌘E`

###### [Go To Declaration](https://www.jetbrains.com/help/idea/navigating-through-the-source-code.html#go_to_declaration)

- Go To Declaration: `⇧⌘B`

###### [Locate a code element with the Structure view popup﻿](https://www.jetbrains.com/help/idea/navigating-through-the-source-code.html#use_structure_view)

###### [Navigate between errors or warnings﻿](https://www.jetbrains.com/help/idea/navigating-through-the-source-code.html#navigate-errors-warnings)
- 1. Navigate Error: `F2` or `⇧F2`

###### [Browse through methods﻿](https://www.jetbrains.com/help/idea/navigating-through-the-source-code.html#method_navigation)
- show structure tool: `⌘7`

###### [Navigate to a file with navigation bar](https://www.jetbrains.com/help/idea/navigating-through-the-source-code.html#navigate-with-navigation-bar)

- go to navigation bar `⌘↑`


### [Find a file path](https://www.jetbrains.com/help/idea/navigating-through-the-source-code.html#file_path)
`⌥⌘F12`

# [Next](https://www.jetbrains.com/help/idea/find-highlight-usages.html)

### Related Links
1. [IntelliJ Idea ショーカット一覧 Mac version](https://qiita.com/deco/items/f9b3aa90bf39ec4421ad)

# Webstorm Settings

## npm package manager and nodenv setting
https://github.com/nodenv/jetbrains-npm


# GoLand Settings
## 初期設定
GlobalのGOPATHと、GoLandのプロジェクトごとのGoPathを設定する
ROS2 Windows版のexample実行時にエラーが出たらOpenSSLのバージョンを疑ってみる

## はじめに

公式ページのWindows版ROS2のバイナリ版インストール方法のページ(例えば[Installing ROS 2 Eloquent Elusor](https://index.ros.org/doc/ros2/Installation/Eloquent/Windows-Install-Binary/)) を見ながらインストールしたのに、下記のようにexampleのtalkerとlistenerを実行すると`rmw_fastrtps_cpp.dll` という文字列が含まれたエラーが発生することがあります。

より詳細には、これらを実行すると、

```
> ros2 run demo_nodes_cpp talker
```

```
> ros2 run demo_nodes_py listener
```

こんなエラーメッセージが出力されまます。

```
Traceback (most recent call last):
  File "C:\dev\ros2_eloquent\lib\demo_nodes_py\listener-script.py", line 11, in <module>
    load_entry_point('demo-nodes-py==0.8.4', 'console_scripts', 'listener')()
  File "C:\dev\ros2_eloquent\Lib\site-packages\demo_nodes_py\topics\listener.py", line 32, in main
    rclpy.init(args=args)
  File "C:\dev\ros2_eloquent\Lib\site-packages\rclpy\__init__.py", line 73, in init
    return rclpy_implementation.rclpy_init(args if args is not None else sys.argv, context.handle)
RuntimeError: Failed to initialize init_options: failed to load shared library of rmw implementation. Exception: Cannot load library: C:\dev\ros2_eloquent\bin/rmw_fastrtps_cpp.dll, at C:\J\workspace\ci_packaging_windows\ws\src\ros2\rmw_implementation\rmw_implementation\src\functions.cpp:137, at C:\J\workspace\ci_packaging_windows\ws\src\ros2\rcl\rcl\src\rcl\init_options.c:55
```

## 確認すべきこと

上記のようなエラーが出たら、もう一度インストール方法のページを注意深く読みます。
そこにはこんな文章があります。
> Install OpenSSL
Download an OpenSSL installer from this page. Scroll to the bottom of the page and download Win64 OpenSSL v1.0.2

ここで最も大事なのがOpenSSLのバージョン **v1.0.2**_ です。
OpenSSLのインストーラにはいくつかのバージョンが存在するのですが、_**v1.0.2**_ と書かれていたら、それに忠実に従う必要があります。

## 再挑戦
既にインストール済みのOpenSSLをアンインストールして、指定されたバージョンをインストールして、ついでに 

```
setx -m OPENSSL_CONF C:\OpenSSL-Win64\bin\openssl.cfg
```
も念押しで実行して、再度talkerとlistenerを起動してみましょう。
どうでしょうか?　次のようなメッセージが出力されれば成功です。

```
> ros2 run demo_nodes_cpp talker
[INFO] [talker]: Publishing: 'Hello World: 1'
```
```
> ros2 run demo_nodes_py listener
[INFO] [listener]: I heard: [Hello World: 1]
```
[bash]文字列から連想配列を作る

(ダメな例)

```
$ cat tamesi.sh
#!/bin/sh
data="[suzuki]=hoge2 [tanaka]=95 [yamamoto]=90"
declare -A exam=(${data})
echo ${exam["suzuki"]}

$ sh tamesi.sh
tamesi.sh: line 6: exam: [suzuki]=hoge2: must use subscript when assigning associative array
tamesi.sh: line 6: exam: [tanaka]=95: must use subscript when assigning associative array
tamesi.sh: line 6: exam: [yamamoto]=90: must use subscript when assigning associative array
```

`must use subscript when assigning associative array` というエラーが出て怒られてますね。subscriptとは「添え字、index」のことです。
日本語環境だと `連想配列を設定するときには添字をつけなければいけません` と怒られるようです。

----
(よい例)

```
$ cat tamesi.sh
#!/bin/sh
data="[suzuki]=hoge2 [tanaka]=95 [yamamoto]=90"
eval declare -A exam=(${data})
echo ${exam["suzuki"]}

$ sh tamesi.sh
hoge2
```

文字列を渡しただけだとbashさんはスペースで区切られた `[suzuki]=hoge2` までを一つの要素と認識するけど、これに対応する添字がなく、 `-A` には不適切…ということみたいです。

eval をつけると、文字列をコマンドとして実行できるので大丈夫なわけでした。
ubuntuの環境構築

apt-get update
apt-get install -y python3 python3-pip
pip3 install --upgrade pip
pip3 install beautifulsoup4
pip3 install requests
apt-get install -y wget libfontconfig
mkdir -p /home/root/sec && cd $_
wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2
tar jxvf phantomjs-2.1.1.-linux-x86_64/bin/
cd phantomjs-2.1.1-linux-x86_64/bin/
cp phantomjs /usr/local/bin/
tf.kerasのpooling層の名前の不思議

# pooling層？ pool層？
みなさまはpooling層とpool層のどちらで呼ばれますか。

tf.keras.layersではどうでしょうか？
公式ページのキャプチャを用意しました。

![name.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36371/afc75993-4890-66d6-9e10-21c3c68b2072.png)

おわかりいただけたでしょうか？

- Average **Pooling**
- GlobalAverage **Pooling**

と

- Max **Pool**
- GlobalMax **Pool**

に分かれています。

なぜ？

# ちなみに
Cropping, UpSampling, ZeroPaddingのようにingで終わっているので、Poolingの方が正しいと私は考えます。

また、ソースコードを確認してみると例えばMaxPool2Dの実装は

```python
@keras_export('keras.layers.MaxPool2D', 'keras.layers.MaxPooling2D')
class MaxPooling2D(Pooling2D):
```

となっています。
内部的にクラス名はMaxPooling2Dとなっているので、やはりPoolingの方が正しいと思います。
なので、デコレータの部分が間違っていることになります。

# 補足
PoolingとPoolのどちらでも正しく動作しますので、安心してください。
エイリアスが設定されています。
TWELITE のチェックサムを計算する

「超簡単！標準アプリ」で使われているチェックサムの計算方法は、バイトごとの和の補数。

バイト文字列を入れると補数を計算してくれるツールを作りました。
言語は Python です。

```

#!/usr/bin/env python3
import sys
chain = sys.argv[1]
chainbytes = bytes.fromhex(chain)
sum = 0
for item in chainbytes:
    sum=sum+item
twilitechecksum = 256 - ( sum % 256 )
print('{:02X}'.format(twilitechecksum))
```
実行すると、

```

 ./checksum.py  00A01301FF123456
B1
```


となるので、TWELITEには

:00A01301FF123456B1

を送ると良い。