OmniAICreator/Qiita-1.07M huggingface dataset:
Angular 8 HttpClient & Http Tutorial – Build, Consume RESTful API

Angular 8 HttpClient & Http tutorial is going to be discussed in this blog today. We’ll learn to create and consume RESTful APIs in Angular 8 project. To manage the data on the remote server, we make GET, POST, PUT and Delete using HttpClient API. We are required to import and setup HttpClient service in Angular 8 project to consume REST APIs.

click here to read more
https://www.positronx.io/angular-8-httpclient-http-tutorial-build-consume-restful-api/
Create Angular Material 8 Custom Theme in Less Than 5 Minutes

In this tutorial, we will explore how to create Angular Material 8 custom theme from scratch in less than 5 minutes in an Angular project. Angular material offers pre-built ui themes with primary, warning, and accent color options. If you are working on a real-world angular application, in that case, you might need to create a custom angular material theme to make your project brand look better.
 
click here to read more
https://www.positronx.io/create-angular-material-8-custom-theme/
Angular Material 8 Datepicker Tutorial

Angular Material 8 Data Table tutorial is going to be explained in this tutorial. We’ll build an Angular 8 app to show you how to work with Angular Material 8 datepicker. Angular Material is a ui library which offers plenty of ui components to build modern user-centric interfaces.

Click here to read more 
https://www.positronx.io/angular-material-8-datepicker-tutorial/
Angular 8 ngIf, ngIfElse, ngIfThen Tutorial with Examples

In this tutorial, we are going to understand Angular 8 ngIf, ngIfElse, ngIfThen structural directive with Examples. Angular 8 offers a wide range of basic directives which help you to render the template based on the condition applied to the template

Click here to read more
https://www.positronx.io/angular-8-ngif-ngifelse-ngifthen-tutorial-with-examples/
Deploy Simple Node JS App on Heroku in Minutes

In this tutorial, we are going to learn how to deploy a simple Node JS web app on Heroku using Heroku CLI. Deploying to Heroku a Node JS app is a pretty easy and straightforward job. We will create a simple app for the demo purpose. However, this basic Node app won’t have many functionalities. Our purpose is to understand the step by step process for deploying the node app on Heroku using Heroku CLI.

Click here to read more
https://www.positronx.io/deploy-simple-node-js-app-on-heroku-in-minutes/
PrismのINavigationAwareで定義されているメソッドと実装クラスのコンストラクタの実行順を確認してみた

# はじめに
Prismの`Prism.Regions.INavigationAware`で定義されているメソッドとインターフェースの実装クラスのコンストラクタの実行順が気になったので、[Prism - GitHub](https://github.com/PrismLibrary/Prism)のコードを追って確認してみました。

ResionやNavigationについては、[MVVM フレームワーク Prism の全体概観 - Qiita](https://qiita.com/toydev/items/cf1bb4b519e7e2453d46#5-region--navigation-%E3%81%AE%E6%A9%9F%E8%83%BD)等を参考にしてください。
Prismに関してまだまだ初心者ですので、間違いなどあればご指摘ください。

# PrismのINavigationAwareで定義されているメソッドとは
PrismのRegionでは、画面を管理して画面遷移を行うことができ、一度表示した画面を再び表示することができます。
この時、画面が遷移した時に初期化等を行う必要があります。
Prismでは、インターフェース`Prism.Regions.INavigationAware`を提供しており、このインターフェイスを継承しておくことで、簡単に画面遷移時のタイミングで特定の処理を実行するようにできます。
インターフェース`Prism.Regions.INavigationAware`で定義されているメソッドは以下になります。
>bool IsNavigationTarget(NavigationContext) 
引数で渡されたコンテキストのターゲットとなる画面かどうかを返します。
void OnNavigatedFrom(NavigationContext) 
画面から離れるときに呼び出されます。
void OnNavigatedTo(NavigationContext) 
画面に遷移してきたときに呼び出されます。

[こちら](https://github.com/runceel/PrismEdu/tree/master/06.Navigation)より引用。

# 結論
[Prism - GitHub](https://github.com/PrismLibrary/Prism)でコードを追いながらざっくりとシーケンス図に起こしてみました。
これは、MainWindowからSubViewへの画面遷移を想定しており、MainWindowViewModelでRequestNavigateメソッドを実行している場合のシーケンス図です。

![prism-sequence.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245399/b025b61a-9752-fc3d-a0d7-ff38a8ca5cf3.png)

インターフェースの実装クラスのコンストラクタはOnNavigatedToメソッドの前に実行されるようです。
画面の遷移先がないと遷移できないので、当たり前と言えば当たり前ですが、コードを見て改めて理解できました。

因みにPrismのINavigationAwareで定義されているメソッドは、全てprivateメソッド`Prism.Regions.RegionNavigationService.ExecuteNavigation`の処理中にActionにより実行されています。
Angular 8 Autocomplete Tutorial with Angular Material

Today we are going to create Autocomplete in Angular 8 using Angular Material UI components. The autocomplete is a functionality which shows the recommended options to the user when the user clicks on the input field or enters some keywords in an input field. We’ll create an Angular 8 app from scratch to show how to create the Angular autocomplete functionality.

Click here to read more
https://www.positronx.io/angular-8-autocomplete-tutorial-with-angular-material/
統計入門　確率分布のまとめ

||確率|期待値|分散|
|:-:|:-:|:-:|:-:|
|確率質量関数|$\sum_{i=1}^{n}p_i$=1|$E(X) = \sum_{i=1}^{n}x_i \times p_i$|$V(X) = \sum_{i=1}^{n}(x_i - \mu)^2p_i$|
|確率密度関数|$P(X) = \int_{- \infty}^{\infty}f(x)dx$|$E(X) = \int_{- \infty}^{\infty}xf(x)dx$|$V(X) = \int_{- \infty}^{\infty}(x-\mu)^2f(x)dx$|
|二項分布|$P(X = k) = {}_{n}C_k p^k(1-p)^{n-k}$|$E(X) = np$|$V(X)=np(1-p)$|
|ポアソン分布|$P(X = k) = \frac{e^{-\lambda}\lambda^k}{k!}$|$E(X) = \lambda$|$E(X) = \lambda$|
|幾何分布|$P(X = k) = (1-p)^{k-1} p$|$E(X) = \frac{1}{p}$|$V(X) = \frac{1-p}{p^2}$|
|指数分布|$f(x) = \lambda e^{-\lambda x}$|$E(X) = \frac{1}{\lambda}$|$V(X) = \frac{1}{\lambda^2}$|
|離散一様分布|$P(X = k) = \frac{1}{N}\quad (k = 1,2,3,\dots,N)$|$E(X) = \frac{N+1}{2}$|$V(X) = \frac{N^2+1}{12}$|
|連続一様分布|$f(x) = \frac{1}{b-a}\quad (a \leq X \leq b)$|$E(X) = \frac{a+b}{2}$|$V(X) = \frac{(b-a)^2}{12}$|
SynchRoidでの型の変換と文字列削除

##何をするか

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420678/1f85fa8e-39e3-6663-cb79-33721a188ef9.png)

たとえば、メールチェックをするRPAなどを作るときに、そのメールの件数だけチェックをしたい　とする。

今回の場合であれば、13件のメールをチェックしたい。


しかし、いざ　この画像部分を抽出すると


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420678/65aded9b-5a25-14eb-7a5d-4ebc84bd8311.png)

このように、不必要な部分である「合計： 」の部分まで抽出してしまうことになる。


今回は、このテキスト型の「合計：　13」を　　integer型の「13」にする、という内容である。

##不要な部分の削除


まず、先ほど抽出してきた　「合計： 13」を　合計という変数に抽出する。
(ここは通常通りの抽出なので割愛)


その後、Assignステップを使用して、まずはテキスト型の変数「合計: 13」をテキスト型「13」に変換する。
(ここで変換する際の変数名は何でもよいが、今回は合計2とする)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420678/7cb0880b-9693-8943-f438-27a89d82f1fb.png)


変数「合計」を置き換えたいため、画像のように　変数モードに切り替えたのち
合計　の後に　画像のように「.」を入力。

すると、画像のように、さまざまなメソッドが提示される。

まず、この中の「replaceAll」を使用する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420678/f7e029b7-332c-b87d-900a-9de4ddc64d8a.png)

画像のように
()内の、左部分には　今回置き換えたい「合計： 」を
　　　　右部分には　置き換えるものである空白部分を示す「""」を入力。


すると、


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420678/c89d8961-7e51-b4e2-728b-bce0bd5a0c65.png)

ご覧の通り、テキスト型の変数　合計2に　「13」が入ったことがわかる。


##integer型への変換

しかし、このままではテキスト型になってしまうため、回数を指定する際には使用できない。

そこで、このテキスト型の変数「合計2」をinteger型の変数「数値合計」に変換する。


先ほどと同様、Assignステップを使用し、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420678/bf669683-f2b6-7f29-5d2d-5cf7c91c3773.png)

このように編集する。

すると、


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420678/0e044296-1cea-c9be-281f-afb1ccb58fa0.png)


integer型の変数「数値合計」が完成した。


このように、各メソッドを使用することで、文字の置き換えや型の切り替えなどが出来る。
[JAVA][Spring][MyBatis]SQLビルダーで GROUP BY を使う


## 要求
* Java の Springフレームワークを使ってDB操作したい。
* mybatis のアノテーションとSQLビルダーを使う。
* XMLを使いたくない。Javaで完結させたい。
* GROUP BY を使いたい。

## サンプル

以下のようなテーブル「shops」があるとする

| shop_cd | prefecture |
| ------- | ---------- |
| 0001    | 神奈川県   |
| 0002    | 神奈川県   |
| 0002    | 神奈川県   |
| 0003    | 神奈川県   |
| 0003    | 神奈川県   |
| 0004    | 東京都     |

「神奈川県」を指定しての店舗コードの重複しないリストがほしい。

```
public interface ShopMapper {
  /**
   * 都道府県を指定して店舗コードの一覧を取得する。
   *
   * @return List<Map<String, String>>
   *   結果ひとつあたりのMap
   *     - prefecture: 指定した都道府県名（日本語）
   *     - shopCd: 拠点コード
   */
  @SelectProvider(type = SqlProvider.class, method = "getShopCodesByPrefecture")
  @Results(id = "ShopCodesByPrefecture", value = {
          @Result(column = "shop_cd", property = "shopCd"),
          @Result(column = "prefecture", property = "prefecture"),
  })
  List<Map<String, String>> getShopCodesByPrefecture(String brandCd, String prefecture);

  class SqlProvider {
    public String getShopCodesByPrefecture(String prefecture) {
      SQL sql = new SQL() {
        {
          SELECT("shop_cd", "prefecture");
          FROM("shops");
          WHERE("shops.prefecture = #{prefecture}");
          GROUP_BY("shop_cd");
          ORDER_BY("shop_cd ASC");
        }
      };
      return sql.toString();
    }
  }
}
```

検索結果をMapでもらうように@Resultsと@Resultの指定をした。
VBAの備忘録　DictionaryをKey昇順でソートする

.NET FrameworkのArrayListクラスを利用して、
DictionaryをKey昇順でソートする。
ホンマに便利でおます。
【注意】
　サンプルの関数は「Keyは文字列で同じ文字数であること」が条件になります。
　Keyが自由な場合は、Key、Itemをそれぞれdictionaryに入れ、再度組み合わせる…等、もうひと捻り必要ですね。


```vb:関数側

Public Function Dic昇順(ByRef dic As Dictionary)
    '------------------------------------------------------------------
    'DictionaryをKeyの昇順に並び替える。
    '[流れ]
    '　ByRefで引数を受け、
    '　ArrayListクラスのSortメソッドで昇順に並べ替えて、dicに戻す。
    '------------------------------------------------------------------
    
    Dim i As Long
    Dim KeyItem_AryList As Object   '// ArrayList
    Dim KeyItem As String
    Dim temp As Variant 'splitのデータ受け用

    
    '// .NET FrameworkのArrayListクラスを利用する
    Set KeyItem_AryList = CreateObject("System.Collections.ArrayList")
    
    '先ずはArrayListに移す。
    Dim curKey As Variant
    For Each curKey In dic
        KeyItem = curKey & "_" & dic(curKey) 'ソート後スプリットする
        KeyItem_AryList.Add KeyItem
    Next curKey
    
    KeyItem_AryList.Sort   '移し替えた方をソート!!!これ便利!!!
    
    dic.RemoveAll  '一旦、消し去る
     
    'もう一度入れなおす。
    For i = 0 To KeyItem_AryList.Count - 1
        temp = Split(KeyItem_AryList(i), "_")
        dic(temp(0)) = temp(1)
    Next i
    
    
    '確認
'    For Each curKey In dic
'        Debug.Print (curKey & ":" & dic(curKey))
'    Next curKey

End Function
```
呼び出し側

```vb:呼び出し側

Call Dic昇順(dicAAA)
```
[JS][jQuery]ショートカット割り当てライブラリ「Mousetrap」のサンプルコード

# 今日のコード
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="riotam4" data-slug-hash="MMeRxQ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="mousetrap">
  <span>See the Pen <a href="https://codepen.io/riotam4/pen/MMeRxQ/">
  mousetrap</a> by riotam (<a href="https://codepen.io/riotam4">@riotam4</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

とりあえず動作確認したので、共有だけしておきます。
HTML側のコードは、jQueryとMousetrapの読み込みをしているぐらいです。

ソースも大きくないので、中身を読み込んで、がっつり解説したりしても面白いだろうなぁ…
と思いつつ、今回はこれだけにしておきます。
エクセルでJAVAアプリを超簡単生成！「ワンダーロボ」表示、確認メッセージと戻り値の設定方法

###ステップ1.確認メッセージの設定方法
###ステップ2.表示メッセージの設定方法
###ステップ3.戻り値の設定方法
---
###ステップ1.確認メッセージの設定方法
最初に、確認メッセージの設定方法を説明します。「確認メッセージ」は、処理を行うときに確定する前に、実行するかどうかを確認メッセージとして表示できます。

####1-1.画面詳細設計で設定
まずは、画面詳細設計で設定します。図1のように、設計書の「処理」に「削除」ボタンを実行すると、削除を行うかどうかの確認メッセージが表示されるように設定できます。
※図1
<img width="1128" alt="50.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184885/998df81e-c44d-bc45-592f-42ea819559a3.png">

####1-2.設計書ファイルをインポートして確認
SaaSForceの開発環境にログインし、設計書ファイルをインポートします。そして、利用画面で反映されているか確認して完了です。
<img width="785" alt="48.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184885/4b3ba9c5-c12d-cc0d-3285-b31355f4989a.png">

<img width="1128" alt="51.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184885/521a0b62-a35e-daa3-6df5-8ff724bfa33a.png">

---
###ステップ2.表示メッセージの設定方法
次に、表示メッセージの設定方法を説明します。表示メッセージとは、処理を完了した場合にシステムが返してくるメッセージのことです。

####2-1.画面詳細設計で設定
「項目処理」に「削除」ボタンを押して、確認メッセージが表示された後、OKを押すと削除が実行され「削除完了」メッセージが表示されるように設定できます。
<img width="1128" alt="45.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184885/71f0520c-4044-be29-0743-6ccc1a45288a.png">

####2-2.設計書ファイルをインポートして確認
SaaSForceの開発環境にログインし、設計書ファイルをインポートします。そして、利用画面で反映されているか確認して完了です。
<img width="1128" alt="57.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184885/23f58b14-d464-6857-4f65-80044b0bbcf0.png">

###ステップ3.戻り値
最後に、戻り値の設定方法を説明します。戻り値は、プログラムや関数から返ってくる値のことです。これまでと同様に、画面詳細設計で設定します。
<img width="1128" alt="58.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184885/f97cae2c-0fb3-b9bd-a73f-f56ce7f1a2cf.png">

例として、「入金管理詳細」画面で説明します。下図のように、「支払割合」欄に数字以外を入力すると、「数字で入力してください。」と「false」で返す設定ができます。
<img width="1128" alt="60.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184885/85b4fdc8-0f07-805b-be31-ba07d658e915.png">

次に、「支払割合」欄が100になっていない場合は、「支払割合合計が100%になっていません」と「false」で返してくれます。「支払割合」欄が100になっている場合は、「true」を返してくれます。
<img width="1128" alt="61.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184885/6e9f233f-7667-32cb-c13f-4cde105152b1.png">

####※上記のように戻り値は「true」「false」以外にも、画面項目名、変数、固定値を設定することが出来ます。
【Laravel】Docker上で動くLaravel環境 = laradock の使い方

# Laradock とは
Laravelコミュニティの有志が作っているDocker上で動くLaravel環境
# Dockerのインストール
## 🍎 Mac の場合
公式サイトから 🐳Docker for Macをダウンロードしてインストール。
https://docs.docker.com/docker-for-mac/install/

homebrewが使えるなら、下のコマンドを実行。

```
$ brew install docker
$ brew cask install docker
```
ただ、128GのMacだとあっという間に一杯になるんだよね。
## Windowsの場合
公式サイトから 🐳Docker for Windows をダウンロードしてインストール。
https://www.docker.com/docker-windows

# Laradock のダウンロード
先ずは git のリポジトリから laradock を持ってくる。

```
$ cd
$ mkdir laravel_docker
$ cd laravel_docker
$ git clone https://github.com/Laradock/laradock.git
```
git は xcode とかをインストールしていれば入っているはず。
# .env ファイル作成
laradock というディレクトリができるので、そこに入って env-example を .env にコピーする、

```
$ cd laradock
$ cp env-example .env
```
# コンテナを初期化する

``` 
$ docker-compose up -d nginx mysql workspace phpmyadmin
```
初回は必要なファイルをダウンロードするので時間がかかる。
途中でエラーが発生したら再度実行してみる。
# laravel プロジェクトの作成
## Docker環境にログインする
```
$ docker-compose exec --user=laradock workspace bash
```
ログインすると /var/www に入る。
# composer の高速化
そのままだと時間がかかるので、少しでも高速化をしておく。
先ず、ミラーサーバを日本国内のサーバに設定して、
高速化プラグインを適用する。これを使うと取得がバルクになって早くなる。
やらなくても良いけど、やるとやらないでは大違い。

```
$ composer config -g repos.packagist composer https://packagist.jp
$ composer global require hirak/prestissimo
```
元に戻す場合は下記を実行。

```
$ composer config -g --unset repos.packagist
$ composer global remove hirak/prestissimo
```
## プロジェクト作成
プロジェクトを作成してから、一旦 Docker環境から抜けておく。

```
$ composer create-project laravel/laravel sampleapp --prefer-dist
$ exit
```
# .env 修正
パスの位置を変更する。

```
- APP_CODE_PATH_HOST=../
+ APP_CODE_PATH_HOST=../sampleapp
```
# コンテナ再起動
```
$ docker-compose stop
 :
$ docker-compose up -d nginx mysql
 :
```
http://localhost にアクセスすると見慣れた画面が・・・

# コンテナの停止
コンテナを停止するときは以下のコマンド使う。

```
$ docker-compose stop
```

[- 目次 -](https://qiita.com/search?q=laravel+nekyo)
GitHubから脆弱性の警告が来たのでBotに直してもらった

# GitHubから脆弱性の通知が来た
GitHubに通知が来ていたので、何かな？とのぞいてみました。

![github_2 (2).PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/a0c12acb-32bb-57e0-4735-1cea0d3e281d.png)

```
We found potential security vulnerabilities in your dependencies.
Only the owner of this repository can see this message.
```

セキュリティーバルナラビリティーズ？？？脆弱性か！

どうやら私が作ったプログラムに脆弱性があるそうです！

`See security alerts` ボタンを押してみたところ、色々と解説が載っていました。


# 原因は依存先パッケージ

私が作ったパッケージが依存している別のパッケージに脆弱性があるとのことで、最新版のパッケージを利用するように修正すれば、解決するそうです。

なるほどと思いつつ、眺めていたら、 `Automated security fixes` というボタンが目に入りました。

え？自動で直してくれんの？



# Botに直してもらう

勇気を振り絞ってボタンを押してみました。

そしたら、なんと、プルリクエストが送られてきました！

![github_3 (2).PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/83adf568-38b8-6ec7-dfd9-d551b0fad78b.png)

プルリクの発行者は `dependabot` となっていて、どうやらBotのようです。
このプルリクをマージしたところ、無事に警告は消えました！


# さいごに

Botがパッケージ管理までやってくれるなんてすごいですね！

以下のサイトを参考にしました。
https://help.github.com/en/articles/configuring-automated-security-fixes
[Vue]親コンポーネントの変数を子コンポーネントに送る〜親から子への贈り物〜

# 今日のコード
### 親コンポーネント
```javascript:親コンポーネント1
<div :c_item="p_item">　<!-- p_item変数を子へ送る -->
```

```javascript:親コンポーネント2
components:{
    child,
    hogehoge,
    fugafuga,
},
```

```javascript:親コンポーネント3
import child   from '~/components/child/child.vue’
import hoge   from '~/components/hoge/hoge.vue’
import fuga   from '~/components/fuga/fuga.vue’
```
### 子コンポーネント
```javascript:子コンポーネント1-1
props:['c_item']
```

```javascript:子コンポーネント1-2
props:{
    c_item: {
        type: String, // String型に限定
        default: YYY, // 何もなければ「YYY」とする
    }
}
```
# 解説
### 渡す方である親の準備
まずは、親側から。
親コンポーネントで「p_item」という変数が使われているとして、これを子コンポーネントに送りたいとする。
まずは、親コンポーネントのタグ内で

```javascript:親コンポーネント1
<div :c_item="p_item">　<!-- p_item変数を子へ送る -->
```
と、このように用意する。これで、子コンポーネントには「c_item」という名前で送ることになる。
さらに、親コンポーネントの中に、

```javascript:親コンポーネント2
components:{
    child,
    hoge,
    fuga,
},
```
このように書くことで、親コンポーネントは、「child」「hoge」「fuga」コンポーネントを子として、これらを変数の送り先とする、というように設定してる。
親コンポーネントには、

```javascript:親コンポーネント3
import child   from '~/components/child/child.vue’
import hoge   from '~/components/hoge/hoge.vue’
import fuga   from '~/components/fuga/fuga.vue’
```
このような記述もし、「child」「hoge」「fuga」コンポーネントが実際、どこのなんのファイルのことを指すか、指定しておく。
これで、親側の準備はOK。
### もらう方である子の受け取り方
子コンポーネントは非常にシンプルで、

```javascript:子コンポーネント1-1
props:['c_item']
```
このように「c_item」として受け取った変数を、そのままこのファイル内でも「c_item」として使えるようになる。
ちなみに、このpropsには違う書き方もあって、

```javascript:子コンポーネント1-2
props:{
    c_item: {
        type: String, // String型に限定
        default: YYY, // 何もなければ「YYY」とする
    }
}
```
このように型を指定したり、デフォルト値を設定したりもできる。
# 感想
与える方である親の準備を他所に、もらう方である子は至れり尽くせりというのは、世の常かな。
とか思った。（大きく脱線）


最後まで、ありがとうございました。
【VSCode】TypeScriptエラーをウォッチして問題パネルにワークスペース内のTypeScriptエラーを表示する方法。

// 20201020追記
// 20210226追記

以下のやり方よりもvscodeでターミナルを開いて `tsc -w` でウォッチモードで起動するのが簡単です
---

1. `.vscode/tasks.json`に下記を記述

```json
{
        // tasks.json 形式の詳細についての資料は、
        // https://go.microsoft.com/fwlink/?LinkId=733558 をご覧ください
        "version": "2.0.0",
        "tasks": [
            {
                "type": "typescript",
                "tsconfig": "${ここにworkspacerootからtsconfigまでの相対パスを記述}/tsconfig.json",
                "option": "watch",
                "problemMatcher": [
                    "$tsc-watch"
                ],
                "group": {
                    "kind": "build",
                    "isDefault": true,
                },
            }
        ]
    }
```

2. `cmd + shift + b` でタスクを実行

追記：上記の設定を追記しなくてもworkspace上にtsconfig.jsonがあれば、　`cmd + shift + b` で `tsc: ウォッチ` を実行すれば、ウォッチモードにできそう

追記：npmであれば`npx tsc -w`, yarnであれば`yarn tsc -w`を実行しましょう。いちいちvscodeの設定を変更する必要がありませんでした。
CodeBuildでECRにPushするときにMulti stageなDockerイメージでキャッシュを効かせる

## ベース

以下の記事のような形でCodeBuildを設定している状態

>AWS CodeBuildを使ってDockerイメージをビルドし、Amazon EC2 Container Registry(ECR)へpushする ｜ DevelopersIO
>https://dev.classmethod.jp/tool/docker/20170225-codebuild-docker/


デフォルトだとキャッシュが効かないのでビルドに時間がかかるのでキャッシュを使うように設定する

## 解決

Dockerfile内で ```builder``` というstageがあるとする

```yml:buildspec.yml
version: 0.2
 
phases:
  install:
    runtime-versions:
      docker: 18
  pre_build:
    commands:
      ## Login ECR
      - $(aws ecr get-login --no-include-email --region $AWS_DEFAULT_REGION)
 
      ## Dockerイメージのタグとして使用するため、Gitのコミットハッシュを取得
      - IMAGE_TAG=$CODEBUILD_RESOLVED_SOURCE_VERSION
  build:
    commands:
      ## Pullしておく
      - docker pull $IMAGE_REPOSITORY_NAME:builder
      - docker pull $IMAGE_REPOSITORY_NAME:latest
      ## builder stage用
      - >-
        docker build --target builder
        --cache-from $IMAGE_REPOSITORY_NAME:builder
        -t $IMAGE_REPOSITORY_NAME:builder .
      ## Dockerイメージのビルド
      - >-
        docker build
        --cache-from $IMAGE_REPOSITORY_NAME:builder
        --cache-from $IMAGE_REPOSITORY_NAME:latest
        -t $IMAGE_REPOSITORY_NAME:$IMAGE_TAG
        -t $IMAGE_REPOSITORY_NAME:latest .
 
      ## DockerイメージのECRへのプッシュ
      - docker push $IMAGE_REPOSITORY_NAME:$IMAGE_TAG
      - docker push $IMAGE_REPOSITORY_NAME:latest
      - docker push $IMAGE_REPOSITORY_NAME:builder
 
      ## ECS+CodeDeployにどのイメージを使用するか指示するためのファイルを作成
      - printf '{"Version":"1.0","ImageURI":"%s"}' $IMAGE_REPOSITORY_NAME:$IMAGE_TAG > imageDetail.json
 
artifacts:
  ## buildの最後で作成したファイルをアーティファクトとして流す
  files: imageDetail.json
```
（シンタックスハイライトが>-に対応していない...）

* docker buildする際に `--target` を指定して特定のstage用にビルド
* `--cache-from` をbuilderステージにも最終stageにもつける

`runtime-versions` はstandard:2.0ランタイム用の設定
参考: [CodeBuildでStandard2.0のイメージを使用したらエラー出たときの対処](https://qiita.com/maruware/items/c3a6f6741220ef3e61f7)
TeXのコマンドが実行できるDockerイメージを作成する

# TL;DR

* TeXのコンパイルができるDockerイメージ(Dockerfile)を作ります
    * Dockerサーバが動く環境ならば，環境非依存で実行できます
    * 論文を書くときなどに便利です

# Dockerfile

* ubuntuベースで，texliveと関連のパッケージをapt-getコマンドでインストールするDockerfileを作成します
    * パッケージマネージャ（ubuntuなのでapt）を使って，TeXに関するパッケージをインストールします
    * [aruneko/texlive](https://hub.docker.com/r/aruneko/texlive/)を参考に，```/texsrc```をマウントできるようにしており，コンテナのコマンド実行時にTeXファイル群を渡せるようにしています
    * インストールするパッケージは[Qiita Ubuntu 18.04 LTS に LaTeX をインストール](https://qiita.com/BitPositive/items/6b13e2038d628c33be8e)を参考にしました

```docker:Dockerfile
FROM ubuntu:18.04
LABEL maintainer YOSHIMI Masato <myoshimi@DOMAIN_NAME>

ENV DEBIAN_FRONTEND noninteractive

RUN set -xe && \
    apt-get -y update && \
    apt-get install -y \
        make \
        texlive-lang-cjk \
        xdvik-ja \
        texlive-fonts-recommended \
        texlive-fonts-extra && \
    apt autoremove -y && \
    apt-get clean

RUN mkdir /texsrc
WORKDIR /texsrc

VOLUME /texsrc

CMD ["/bin/bash"]
```

* ```docker build```コマンドでDockerfileをビルドします．この記事では名前をtexlive-dockerとします

```bash
# Dockerfileがあるディレクトリにてコマンド実行
# 名前はtexlive-dockerとする
docker build -t texlive-docker .

# イメージが作られたか確認
docker images | grep texlive-docker
```

# テスト

* 以下のsample.texとref.bibを作成します．
    * [LaTeX入門/最初の例](https://texwiki.texjp.org/?LaTeX%E5%85%A5%E9%96%80%2F%E6%9C%80%E5%88%9D%E3%81%AE%E4%BE%8B)にある，文豪による小説の一文に，bibtexによる参考文献の管理と参照を追加しています
    * 2つのファイルは同じディレクトリに置きます

```tex:sample.tex
\documentclass{jsarticle}
\begin{document}

吾輩は猫である。名前はまだ無い\cite{Soseki1905}。

どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所で
ニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。

\bibliography{ref.bib}
\bibliographystyle{junsrt}

\end{document}
```

```bib:ref.bib
@book{Soseki1905,
    author="夏目漱石",
    title="吾輩ハ猫デアル",
    publisher="大倉書店",
    year=1905,
}
```

## TeXコンパイル

* sample.tex，ref.bibファイルがあるディレクトリ上で，```docker run```コマンドでTeXコンパイルを実行します
    * 参考文献ファイル(ref.bib)があるので，```platex```，```pbibtex```，```platex```，```platex```，```dvipdfmx```の計5つのコマンドを実行します
    * エラーが出なければ，当該ディレクトリ上に，sample.pdfが作成されています

```bash
docker run --rm -v ${PWD}:/texsrc texlive-docker platex sample.tex
docker run --rm -v ${PWD}:/texsrc texlive-docker pbibtex sample
docker run --rm -v ${PWD}:/texsrc texlive-docker platex sample.tex
docker run --rm -v ${PWD}:/texsrc texlive-docker platex sample.tex
docker run --rm -v ${PWD}:/texsrc texlive-docker dvipdfmx sample
```

* 以下のようなpdfが出力されていれば成功です
    * ![01_ss.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309617/a83274d9-9b74-fc87-93e8-edc62fea0cf4.jpeg)

# 参考

* [Dockerhub aruneko/texlive](https://hub.docker.com/r/aruneko/texlive/)
* [Qiita Ubuntu 18.04 LTS に LaTeX をインストール](https://qiita.com/BitPositive/items/6b13e2038d628c33be8e)
* [LaTeX入門/最初の例](https://texwiki.texjp.org/?LaTeX%E5%85%A5%E9%96%80%2F%E6%9C%80%E5%88%9D%E3%81%AE%E4%BE%8B)
EventTarget.dispatchEvent()を使ってjQueryの.triggerHandler()を実現する

jQueryでなら書けるけど、ネイティブのJavaScriptだと書けない・・・を克服していく記録です。

## そもそもの.triggerHandler()の使いどころ
```html
<form id="js-form">
  <div>
    <label><input type="radio" name="hoge" value="1" checked="checked">hoge１</label>
    <label><input type="radio" name="hoge" value="2">hoge2</label>
    <label><input type="radio" name="hoge" value="3">hoge3</label>
  </div>
  <p>hoge<span class="js-txt"></span>が選択されています</p>
</form>
```
`.js-txt`の中に、選択されたラジオボタンのvalueが入る想定です。

ラジオボタンの選択が変更された時（changeイベント発火時）に、`.js-txt`の中身が入れ替わるので、

```javascript
$('input[name="hoge"]').on('change', function() {
  var result = $(this).val();
  $('.js-txt').text(result);
});
```
のように書くことができます。
しかし、画面がロードされた時にはイベントが発火しないので、ロード時の処理も必要になります。

```javascript
var result = $('input[name="hoge"]:checked').val();
$('.js-txt').text(result);
```
同じことを2度書かなくてはいけないのは面倒です。
この処理をひとつにまとめることができるのが、`.triggerHandler()`です。

```javascript
$('input[name="hoge"]').on('change', function() {
  var result = $(this).val();
  $('.js-txt').text(result);
}).triggerHandler('change');
```
`.triggerHandler('change')`でロード時に1回、changeイベントを擬似的に発火させます。

### `.triggerHandler()`と`.trigger()`の違い
`.triggerHandler()`はjQueryでバインドされたイベントを呼び出すのに対して、`.trigger()`はその要素が持つイベントも呼び出します。

```javascript:例
$('input').on('focus', function() {
  $('<span>Focused!</span>').appendTo('body').fadeOut(1000);
});
$('#old').on('click', function() {
  $('input').trigger('focus'); // inputにfocusが当たる
});
$('#new').on('click', function() {
  $('input').triggerHandler('focus'); // inputにfocusは当たらず、テキストの挿入とフェードアウトのみ行われる
});
```
参照：[.triggerHandler() | jQuery API Documentation](https://api.jquery.com/triggerHandler/)

## EventTarget.dispatchEvent()
ネイティブのJavaScriptでは、`EventTarget.dispatchEvent()`を使って実現しました。

```javascript
const $form = document.getElementById('js-form');
const $radioNodeList = $form.hoge;
const $txtWrap = document.querySelector('.js-txt');
// イベントの作成
const event = new Event('change');
// changeイベント
$form.addEventListener('change', ()=> {
  let result = $radioNodeList.value;
  $txtWrap.textContent = result;
});
// 作成したイベントの呼び出し
$form.dispatchEvent(event);
```
`new Event('change')`でイベントを作成、`$form.dispatchEvent(event);`で作成したイベントを呼び出しています。

## サンプル
[https://codepen.io/kzmhrd/pen/EBVLNz](https://codepen.io/kzmhrd/pen/EBVLNz)

## 参考
- [.triggerHandler() | jQuery API Documentation](https://api.jquery.com/triggerHandler/)
- [EventTarget.dispatchEvent()
](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/dispatchEvent)
- [イベントの作成と発火 - 開発者ガイド | MDN](https://developer.mozilla.org/ja/docs/Web/Guide/Events/Creating_and_triggering_events)
【Rails 備忘録】errors.add の書き方

# はじめに
`errors.add……`の書き方をよく忘れてしまうので備忘録。

# 条件
ProjectモデルとGenreモデルが`has_and_belongs_to_many`で中間テーブルを通してアソシエーションされている。

projectをcreateするとき、該当のprojectのGenreも登録している。

# erros.addをvalidateに記述する

```project.rb
class Project < ApplicationRecord
  has_and_belongs_to_many :genres

  validates :name, presence: true, length: { maximum: 200 }
  ・
  ・
  ・
  validate :has_genres?

  def has_genres?
    errors.add(:genres, "を選んでください") if self.genres.blank?
  end

end

```

きちんとi18nとエラーを表示をする設定をviewに追記すれば、
Genreを登録しなかったときにErrorMessageが表示されます。

```new.html.erb
          <% @project.errors.full_messages.each do |msg| %>
            <div class="alert alert-danger">
              <%= msg %>
            </div>
          <% end %>
```
<img width="808" alt="スクリーンショット 2019-06-19 17.11.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251648/195a0311-3c2d-07a7-ee0c-5eaa72ec2d9d.png">
Go で 503 返すだけの Sorry サーバー作った

Sorry 用のメンテナンスサーバー作った。公開した。
https://github.com/QLife-Inc/sorry

経緯としては、サーバーのスケールアップで結構長時間なダウンタイムが発生するんだけど、ダウンタイム中にもメンテナンスページを表示しとかないとね、ってことで作った。  

1 台の EC2 に直アクセスで、全サービスがその EC2 に乗ってて、全ドメインの SSL 証明書がサーバー上にあって、そんなサーバーがダウンするので、 EIP をこのソーリーサーバーに付け替えるという。
argparseに渡された引数をJSON形式で保存する

# Summary
[argparse](https://docs.python.org/3/library/argparse.html)は、コマンドラインオプションを簡単に実装できるpythonモジュールです。特に実験で大量のパラメータを用意する必要がある時に大変重宝します。一方で実験結果とともに使用したパラメータを保存したい状況は結構あると思われます。ここでは__argparseに渡された引数を、人間にも読みやすいJSON形式で保存するコード__を共有します。

# Snippet

ポイントは```__dict__```を用いることでargparseに渡された引数を```dict()```に変換している点です。
後は、```json```に渡しインデントを追加することで、可読性の高い形で保存することができます。

```python:main.py
import json
import argparse

parser = argparse.ArgumentParser()
parser.add_argument("--param1", type=str, default="test")
parser.add_argument("--param2", type=int, default=100)
parser.add_argument("--param3", type=float, nargs="+", default=[0.1, 0.2, 0.3])
args = parser.parse_args()

with open("./params.json", mode="w") as f:
    json.dump(args.__dict__, f, indent=4)
```

```json:params.json
{
    "param1": "test",
    "param2": 100,
    "param3": [
        0.1,
        0.2,
        0.3
    ]
}
```
Flutterで作ったアンドロイドアプリをリリースするときにGoogle Play Storeから64bit対応していないエラーが出たら


####1.Gradleに以下のことを追加する

```gradle:
buildTypes {
        release {
            ndk{
                abiFilters 'arm64-v8a'
            }
        }
}
```

####2.以下のコマンドでバンドルファイルapp.aabを生成する

```shell:
flutter build appbundle
```

####3.まとめ
  flutterはデフォルトはarmeabi-v7a(32bit)ためにしかコンパイルしないはず、コンパイルでできたものは基本的には32bitと64bit両方対応するが、Google Play Storeにあげるときに64bitが対応されていないという警告がでる。
arm64-v8a(64bit)を指定して、arm64-v8aのためにコンパイルしたら、64bit対応できて、Google Play Storeからの警告が無くす。
SQLAlchemyでつまづいたことまとめ

※加筆、追記していきます

# 環境
- Python 3.7.3
- SQLAlchemy1.3.3
- MySQL 5.7.12

# JOIN, OUTER JOINを使いたい
<!--
```sql:SQL

```
-->
```python:SQLAlchemy
session.query(
    Foo.id,
    Bar.name
).join(
    Bar,
    Foo.id == Bar.foo_id
)
```

# ASを使いたい
```sql:SQL
SELECT name AS foo_name FROM foo
```
```python:SQLAlchemy
session.query(
    (Foo.name).label('foo_name').all()
)
```

<!---
# COALESCEを使いたい
```sql

SELECT `missions`.*, `mission_types`.`name` as "mission_type", COALESCE(`B`.`is_set`,false) AS "is_set"
```
-->

<!--
TODO: `.c.`ってなんぞ
-->

# サブクエリを使いたい
```Python:SQLAlchemy
sub_query = session.query(
    Foo.id
).subquery('sub_query')

session.query(
    Bar.name,
    sub_query.c.id
).join(
    sub_query,
    Bar.id == sub_query.c.id,
).all()

```

# selectで固定値をselectしたい
```sql:sql
SELECT id, true AS bar FROM foo
```
```Python:SQLAlchemy
from sqlalchemy.sql import expression

sub_query = session.query(
    Foo.id
).add_columns(
    expression.literal(True).label('bar')
).all()

```

<!---
# SQLAlchemyのliteral_columnとcolumnの違い
```
    expression.literal_column(1).label('bar') # Trueだと怒られる
    expression.literal(True).label('bar')
```
-->
Advanced Custom Fields で突然フィールドが表示されなくなった

##なにがあったのか
~~なにもしてないのに Advanced Custom Fields が壊れた~~
Advanced Custom Fields(以降 ACF) を使ってカスタムフィールドの設定をしていたところ、特に前触れもなくフィールドの入力欄が消えて編集できなくなった。

##20190619 追記
以下では `wp-admin/load-styles.php` が悪者みたいな書き方になってしまっていたけれど、よくよくソースを読んでいると、そもそも ACF の入力項目のなかでフィールドにだけ開閉部分が用意されていないのが問題だった。
で、フィールドにだけ開閉部分が存在しない原因が以下。

```css:acf-field-group.css?ver=5.8.1
#acf-field-group-fields>.handlediv,
#acf-field-group-fields>.hndle {
    display: none;
}
```
これによってフィールドについては開閉部分が非表示になっている。
にも関わらず `.closed` によって子要素が非表示になるスタイルは依然として適用されているため、`.closed` がついたままになり、トグルが不可能になってしまっているということだった。~~罠はあらゆるところに潜んでいる~~

ということで修正としては `functions.php` に以下のコードを追加がベターのようです。

```php:functions.php
add_action('admin_head', function () {
    echo '<style>
    #acf-field-group-fields>.handlediv,
    #acf-field-group-fields>.hndle {
        display: block !important;
    }
  </style>';
});
```

###以下は古い内容です
##解決
`functions.php` に以下のコードを追加する。

```php
add_action('admin_head', function () {
  echo '<style>
    .js .closed .inside {
      display: block !important;
    }
  </style>';
});
```

##原因
ACF では入力欄を折りたたむことができ、そのとき要素に対して `.closed` が付与される。またこの要素には子要素として `.inside` というのがいる。

で、その `.closed` (の中の `.inside`) のスタイルが何処かからやってきた`.js .closed .inside` を含んだセレクタによって `display: none`  とされていたのが原因だった。

なので、とりあえずの処置としてはその余計なスタイル指定を上書きして `display: block` にしてやれば表示されるようになる。

そして問題の「何処かからやってきた」セレクタのソースを見ると……
`wp-admin/load-styles.php`

wordpress の洗礼はまだまだ続くようだ。
Nuxt + TypeScript でページごとにhead()のTitleを書き換える

公式ガイドの通りに、NuxtをTypeScript化して少し躓いたのでメモ。
https://nuxtjs.org/guide/typescript/

結論から言うと、`vue-property-decorator` ではなく、 `nuxt-property-decorator` を使えば解決できました。

```nuxt.config.ts
const config: NuxtConfiguration = {
  head: {
    titleTemplate: '%s | My Site'
  }
}
```

```/page/index.vue
<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'

@Component
export default class PageIndex extends Vue {
  head() {
    return {
      title: 'My Site',
      titleTemplate: null
    }
  }
}
</script>
```

### Nuxt Property Decorator
https://github.com/nuxt-community/nuxt-property-decorator

```bash
yarn add nuxt-property-decorator
```
Nuxt Property DecoratorのReedmeに書いてあるとおりに、
インストールしたら、nuxt.config.tsに下記を追加します。

```nuxt.config.ts
build: {
    babel: {
      plugins: [
        ["@babel/plugin-proposal-decorators", { legacy: true }],
        ["@babel/plugin-proposal-class-properties", { loose: true }]
      ]
    }
  }
```

これで完了です！


自分はコンポーネントで`import { Vue, Component } from 'vue-property-decorator'` て書いてて動かなかったです。
iTerm2+tmux+NeoVimで背景を透過させる

# tl;dr
- tmuxを挟んでVimを使うなら`guibg=NONE`を設定しないと透過されない
- `set cursorline`しているとカーソル行が透過されない

# はじめに
iTerm2のPreferencesで透過設定してウキウキ気分でVim開いたら背景が真っ黒になった
やはり５００番煎じ

# Vimのハイライト設定
ポイントはcolorschemeを設定した後に読み込まれるようにすること。
さもなくばcolorschemeの設定が上書きされてしまうかもしれない。

```init.vim
colorscheme iceberg    "example

highlight Normal ctermbg=NONE guibg=NONE
highlight NonText ctermbg=NONE guibg=NONE
highlight LineNr ctermbg=NONE guibg=NONE
highlight Folded ctermbg=NONE guibg=NONE
highlight EndOfBuffer ctermbg=NONE guibg=NONE
```

CUIとGUIのテキスト行、テキスト下空白、行番号、折り返し、ファイルの終わり以降の空白を無しに設定。

`.toml`でプラグイン管理していたらcolorschemeの下に以下を追加。

```toml:dein.toml
hook_add = '''
  au MyAutoCmd VimEnter * nested call SetHighlightOptions()

  function SetHightlightOptions()
    colorscheme iceberg  "example
    highlight Normal ctermbg=NONE guibg=NONE
    highlight NonText ctermbg=NONE guibg=NONE
    highlight LineNr ctermbg=NONE guibg=NONE
    highlight Folded ctermbg=NONE guibg=NONE
    highlight EndOfBuffer ctermbg=NONE guibg=NONE
  endfunction
'''
```

[Vim日本語ドキュメント](https://vim-jp.org/vimdoc-ja/autocmd.html#VimEnter)によれば、`VimEnter`でVimの起動時処理が全部終わった一番最後に実行されるようにしている？
`nested`しているのはau内部でSetHighlightOptions関数をネストするため？
設定周辺は完璧に理解はしてませんが、透過それ自体とは無関係なのでひとまず蛇足です。

# カーソル行だけ透過されない
`set cursorline`の設定があるとカーソル行がハイライトされるので透過が失われます。
同様に、検索等のハイライトでも該当部分の透過がなくなります。仕方ないですね。

# 参考
[背景透過でかっこいいvimを作る](https://sy-base.com/myrobotics/vim/vim-transparent/)
[透明感のあるVim環境をめざして](https://qiita.com/s4kr4/items/b2c1b692ec430fe24f15)
WPF Tips - Material Designにする

#概要
WPFアプリを作成する際に、Material Designにしようと思うんですが、
毎回忘れるので、備忘録として記事を作成（笑）。

#手順

WPFプロジェクトを作成し、ソリューションエクスプローラ上でプロジェクトを右クリック。
メニューから「NuGetパッケージの管理」を選択します。

![MaterialDesign_001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/01326e44-5630-efa2-6730-10eb43e585e4.png)


次に、参照タブを選び、検索枠に「MaterialDesign」と入力。
検索結果から「MaterialDesignThemes」を選択。
右側に情報が表示されるので、「インストール」をクリック

![MaterialDesign_002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/c4f34563-7f68-433a-12ad-7d1c4dd7118b.png)



以下のようなダイアログが表示されるので、OKをクリック。

![MaterialDesign_003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/3afcf915-3c65-cec1-5a56-4ef6c5617bf8.png)


インストールが完了したら、App.xmalを開きます。Application.Resourceタグの中に、以下を記述します。

```xml:App.xmal
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.lightgreen.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.amber.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>

```


MainWindow.xamlのWindowタグ内に以下のパラメータを追加します。

```xml:MainWindow.xaml
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        Background="{DynamicResource MaterialDesignPaper}"
        FontFamily="{DynamicResource MaterialDesignFont}"
```


設定は以上で完了。
試しにMainWindow.xamlにボタンを配置してみます
以下のようなコードを書いてみました。

```
    <Grid>
        <StackPanel Margin="10,10,0,0" VerticalAlignment="Top" Orientation="Horizontal" >
            <Button x:Name="SettingButton"
                        Margin="10">
                <StackPanel Orientation="Horizontal">
                    <materialDesign:PackIcon Kind="Settings" />
                    <TextBlock Margin="8 0 0 0" VerticalAlignment="Center">
                            設定
                    </TextBlock>
                </StackPanel>
            </Button>
        </StackPanel>
    </Grid>
```
実行結果はこんな感じ

![MaterialDesign_004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/5fe7d356-ef86-bcac-7552-4813403eb352.png)
PHPをゼロから1ヶ月やってみた結果

こんにちは。zer0_256です。
2回目の投稿になります。完全に自分のためのアウトプットですが誰かの役に立てたら幸いです。
今回はタイトルの通り、1ヶ月でPHPをやってみた感想などを書いていきます。
※大学との兼ね合いもあり、今回MySQLはやっていないのでPHPのみの感想やアウトプットになります。

#開発環境
まずは前提事項を共有。(この情報は2019年6月19日現在の情報)
PC:　MBP（OS Mojave 10.14.5）
ツール:　VirtualBox（ver 6.0.8）
　　　　 Cyberduck（ver 7.0.0）
　　　　・Vagrant
　　　　・CentOS
エディタ: VSCode(ver 1.35.1)
Mac純正ターミナル

##なぜこの環境を選んだのか
MacなんだからXAMPPとかMAMPじゃないのかという声が聞こえてきますが、これには割とちゃんとした理由があります。
今大学でC言語をやっているのですが、大学で使用するソフトはWindows専用。
最初はXcodeでやってたんですが、ある日ファンが回りまくり、キーボードが触れないレベルに暴走。
原因はXcodeでした。。。（スペックが8GBで妥協した自分も悪い気がします笑）
というわけでローカル環境にC言語をどうせ移行するんだったら、PHPも同じ環境でやればいいかなという考えがありました。

ただ、タブが増えるのでモニター出力してない自分のような人にはあまり勧めないです。
偶然大学の別の講義で仮想サーバーの話をしていたので自分はラッキーでしたが、これを勧めるかと言ったら微妙。
ドットインストールユーザーなら勉強がてら作ってみるのはアリかなと思います。
ただ、割とCyberduckが機嫌良くなかったのでそこだけは注意。
私が使ったのはこちら。
[ローカル開発環境について](https://dotinstall.com/lessons/basic_localdev_mac_v2#!lessons)

###Unixコマンドについて少し触れておきます。
PHPとかをやるだけなら
・ls
・cd
・mkdir（ファイル転送ツールで作ることが多かった）
・pwd
・tabキーでの補完
・矢印キーの履歴使用

これだけ知ってれば不便はないです。
この辺やればすぐに出来ます。あとは慣れ。
[Unixコマンドについて](https://prog-8.com/languages/commandline)

前置きが長くなりましたがここからが本題

＃作ったもの
・**おみくじ**　初心者向け（配列とecho、組み込み関数が分かればできる）
・**掲示板**　メッセージとユーザーを入れて年月日、時刻とともに表示
・**画像アップローダー** 画像をアップロードするだけだが、結構歯ごたえある。（あくまでも個人の見解ですが）


#やってみて
まず思ったのは、JSやHTMLとかに比べて反映されるのがバック（ユーザーに見えない部分）が多いから。エラーをブラウザに表示する工夫をした方が楽。ということ。

自分はそう言いつつターミナルのエラー文を読んでました笑


今回はLTの登壇の日程が迫っていたので基礎からじっくりプロダクト作成までに行く時間と余裕がなく、（一応普通に大学生やってますしｗ）基礎をサラッとやってから分からないところを埋めていくって感じでやってました。

基礎を最初にやるのは大事ですが、そこに長い時間をかけるのも割と時間が勿体無い。
でも、基礎からプロダクトを作るというハードルは確かに高いです。
逆に、今回は時間がなかったからこそ、こういう順序でしたが結果的にやってよかったなと思います。

しかも、プロダクト作ってる時って楽しいですが、基礎ってぶっちゃけつまんないなーってずっと思ってて。
最初って他の言語との違いとかに苦しむと思うんです。
おみくじとか簡単なものでも、基礎の時に配列ってどんなメリットあるのかなとか思うことあると思うんですが、それがプロダクトの中でどう使われているのかを知ることで基礎やってよかったって思うんですよね。

最初は自分でも出来そうなものを選んで（最初のうちはレベル差を知るだけでも大変だとは思う。）、そこからステップアップしていくのがいいと思います。

##私が個人的に苦戦した箇所
・変数に$マークをつける
　これはコード書きまくるうちにめっちゃ出てくるからいやでも慣れる

・foreach
 あまり得意ではなかったけど、プロダクト作ってると結構出てくる。
　ふーんって感じでも問題ないような気がする。知りたいと思ったらググるくらいの気持ちでいい。
　配列の中身を一つずつ出せるくらいの認識。

・class 　instance　constructor
最初にやると絶対ここでぶつかる気がする

クラスは抽象的
インスタンスは具体的って認識。

これは慣れるしかないと言っても違和感が残るような気がするからわかる人に聞いた方が早い笑

#終わりに
なんかグダグダな感じになってしまいましたが、次はMySQLも絡めてプロダクトを作っていきたいと思います。

ここまでお読みいただきありがとうございましたm(_ _)m
文字列のコンピュータ内部表現（ビット・バイト・エンディアン）、文字コードとは何だったかを思い出すためのメモ

# 文字列のコンピュータ内部表現（ビット・バイト・エンディアン）、文字コードとは何だったかを思い出すためのメモ

だいたい忘れるので寝不足でも理解できるように、自分なりにまとめました。
内部表現という単語の使い方が街がているかもしれません。

## コンピュータ内部表現

### bit
コンピュータの内部では、基本的に2進数によって表現されている。
一つの位で0 or 1という2つの状態を表現しており、この位が `bit (2^1)`
バイナリデータ。

### byte

```
8 bit = 1 byte
```
8 bitをまとめた呼び方

### Hex
16進数表現

1byte(8bit)を2進数で表現すると

```
0 0 0 1 0 0 1 0 (自明に8桁)
```

これを16進数で表現すると、2^8 = 16^2 より2桁で表現される。
ただし、1byteをまとめて16進数で表現するのではなく、4bitずつ変換する。（2^4=16なので自明）
1byteはHexで2文字。

```
0001 0010 (bin) -> 12 (hex)
  |    |
  1    2 
```

### endian (エンディアン)

低レイヤの話。
バイトを並べる順番のこと。

* ビッグエンディアン
* リトルエンディアン
* ミックスエンディアン(ミドルエンディアン)

がある。同一システム（アーキテクチャ）ないで完結する処理の場合は、考慮する必要がないが、異なるアーキテクチャのシステムで生成されたバイナリファイルを開くときに注意しなければならない。
どうでも良いが、元ネタはガリバー旅行記

#### 参考
[Wikipedia](https://ja.wikipedia.org/wiki/%E3%82%A8%E3%83%B3%E3%83%87%E3%82%A3%E3%82%A2%E3%83%B3)

## 文字コード
各文字とバイナリでの表現を対応付けたもの。
ASCIIはアルファベットと記号
1byte = 1文字


#### 参考
[ASCII](http://www3.nit.ac.jp/~tamura/ex2/ascii.html)
[日本語コード](http://www3.nit.ac.jp/~tamura/multimedia/japanese.html)
API Gatewayをクロスアカウントで参照する場合のトラブルシューティング

# 前提
* API Gatewayのリソースポリシーは、APIをデプロイしないと反映されません。
* API Gatewayをデプロイしてから、リソースポリシーが反映されるまで10秒くらいかかりました。
* IAM RoleにAssume Roleしている場合(Federated Identityを利用している場合を含む)、ポリシーの更新が適用されるのはセッション更新後のようです（?）(これは自信ないですが...）

# The client is not authorized to perform this operation.
API Gateway自体のリソースポリシーで、指定したオペレーション（＝特定のエンドポイントへのリクエスト）が制限されています。
API Gatewayのリソースポリシー（sam拡張のCFnテンプレートの場合は`x-amazon-apigateway-policy`）を確認し、目的のResource（＝エンドポイント）への　`execute-api:Invoke` がAllow担っていることを確認しましょう。

# Credential should be scoped to a valid region, not ...

```
{
    "message": "Credential should be scoped to a valid region, not 'ap-northeast-1'. "
}
```

認証タイプが `AWS_IAM` の場合、リクエスト時のREGIONは指定必須のようです。また、API GatewayのあるREGIONを指定する必要があります。

# The security token included in the request is invalid.

```
{
    "message": "The security token included in the request is invalid."
}
```

## 考えられる原因
* 認証タイプが `AWS_IAM` の場合、AccessKeyかSessionTokenが間違っています。
* そもそもリソースが存在しないケースでも表示されます。

# Missing Authentication Token

```
{
    "message": "Missing Authentication Token"
}
```

## 考えられる原因
* そもそもリソースが存在しないケースでも表示される気がします。


# is not authorized to perform

```
{
    "Message": "User: arn:aws:sts::********5355:assumed-role/****VY71/CognitoIdentityCredentials is not authorized to perform: execute-api:Invoke on resource: arn:aws:execute-api:us-west-2:********1790:****bkva/v1/GET/test"
}
```

## 考えられる原因
* IAM側のポリシーの誤り
* API Gateway側のリソースポリシーの誤り
* 存在しないAPI Gatewayのリソースにアクセスしている

# 404 ACCESS DENIED

## 考えられる原因
* リソースポリシーの設定漏れ・誤り
* IAM Role/ User側のポリシーの設定漏れ・誤り

# OPTIONSに対するリクエストで403 Forbiddenが返ってくる

## 考えられる原因
* そもそもoptionsメソッドが設定されていない
* optionsメソッドの設定に誤りがある。


# レスポンスが返ってこない

## 考えられる原因
* カスタムドメインのBasePathMappingの設定が完了していない
* `https://` ではなく `http://` でアクセスしている
* Route53の設定が完了していない

参考: [ドメイン名を使用してトラフィックを Amazon API Gateway API にルーティングする](https://docs.aws.amazon.com/ja_jp/Route53/latest/DeveloperGuide/routing-to-api-gateway.html)


# 参考
[Amazon API Gateway での REST API の作成、デプロイ、および呼び出し » API Gateway での REST API へのアクセスの制御と管理 » API Gateway Lambda オーソライザーの使用
](https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/apigateway-use-lambda-authorizer.html)
Kubernetesハンズオン目次

Kubernetesの基本的な使い方についてまとめました。

## 環境構築
本格的なKubernetesの環境を作るのは中々大変なので、以下のいずれかを使って簡易的にk8s環境を作る。

- [Minikubeを使ってローカルにkubernetes環境を構築](https://qiita.com/Esfahan/items/f5c846088281c39f73a4)
    - **対応環境：**Linux, Mac, Windows
- [Docker Desktop for MacのKubernetesを使う](https://qiita.com/Esfahan/items/3e4103ac9c12e67b8959)
    - **対応環境：**Mac


頑張って本格的な環境構築をしたい方はこちら。

- [Kubernetesでクラスタ環境構築手順(1) - masterの作成](https://qiita.com/Esfahan/items/db7a79816731e6aa5cf5)
- [Kubernetesでクラスタ環境構築手順(2) - nodeの作成](https://qiita.com/Esfahan/items/256fdb78e6a40b7c3e1f)

## 基本的な使い方
まずはDockerコンテナをk8sにデプロイして、WEBページを表示してみる。

- [KubernetesでDockerコンテナ「php:7.0-apache」を利用してみる](https://qiita.com/Esfahan/items/35b31c6642ad5d375faf)

## スケーリング
Podをスケーリングさせてみる。

- [【KubernetesでPodをスケーリングさせる】その１- 手動スケーリング](https://qiita.com/Esfahan/items/10affb682f4206e90931)
- [【KubernetesでPodをスケーリングさせる】その２ - オートスケーリング](https://qiita.com/Esfahan/items/d8105741ebf283c9bebb)

## 永続ストレージ
k8sではコンテナに外部ストレージをmountして、データの永続化をさせることが一般的である。

- [【KubernetesのPersistentVolume】その１- 外部ストレージをPodにmountする](https://qiita.com/Esfahan/items/7ad7695ea78c7630239a)
- [【KubernetesのPersistentVolume】その２- Dynamic Provisionerを使ってNFSサーバーをPodにmountする](https://qiita.com/Esfahan/items/68e2d97545091cb6d0ac)
- [【KubernetesのPersistentVolume】その３- StatefulSet](https://qiita.com/Esfahan/items/ab0e1cd69b73365f3744)

## ローリングアップデート
- [KubernetesでPodをローリングアップデートをする](https://qiita.com/Esfahan/items/f9c246e3c60fe8490af3)

## NodeにPodをスケジューリングさせる
- [KubernetesのLabel / NodeSelector / Annotationの使い方](https://qiita.com/Esfahan/items/a7f7de0a941cc03f12b1)
- [【KubernetesのAffinity】その１ - Node Affinityの使い方](https://qiita.com/Esfahan/items/aeddf89428441ec3437c)
- [【KubernetesのAffinity】その２ - Pod Affinity / Pod Anti-Affinityの使い方](https://qiita.com/Esfahan/items/a673317a29ca407e5ae7)
- [KubernetesのTaint / Tolerationの使い方](https://qiita.com/Esfahan/items/843845bdbfefd8ea46d2)

## Ingress
- [Kubernetes - Ingressを使ってサービスを公開する](https://qiita.com/Esfahan/items/f7d13d7e80848e9b6963)

## 関連記事
- [【Airflow on Kubernetes】目次](https://qiita.com/Esfahan/items/cd6b3dc0f724b84361d2)
- [Dockerコマンド よく使うやつ](https://qiita.com/Esfahan/items/52141a2ad741933d7d4c)

随時追加していきます。
laravelで独自のバリデーションルールを追加


# Laravelでカタカナのバリデーションを追加

laravel 5.8でやっています。

## 準備

### ルールを作る
```
> php artisan make:rule KatakanaRule
```

### ルールを決める

半角スペースと全角スペースも許容、エラーメッセージも`validation.katakana`と指定

```php:Rules/KatakanaRule.php
<?php

namespace App\Rules;

use Illuminate\Contracts\Validation\Rule;

class KatakanaRule implements Rule
{
    /**
     * Create a new rule instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Determine if the validation rule passes.
     *
     * @param  string  $attribute
     * @param  mixed  $value
     * @return bool
     */
    public function passes($attribute, $value)
    {
        return preg_match('/^[ァ-ヾ 　〜ー−]+$/u', $value);
    }

    /**
     * Get the validation error message.
     *
     * @return string
     */
    public function message()
    {
        return trans('validation.katakana');
    }
}

```

### エラーメッセージを定義する

`'attributes'`にフォームのnameを登録しておくと'name_sei_kanaはカタカナで入力してください。'とかにならない。

```php:resources/lang/ja/validation.php

return [
    :
    :
    :
    'katakana'             => ':attributeはカタカナで入力してください。',

    'attributes' => [
        'name_sei_kana' => '姓（カナ）',
        'name_mei_kana' => '名（カナ）',
    ],

]

```

### バリデーションを作る

画面に合ったルール名でバリデーションクラスを作る

```
> php artisan make:request HogeHogeValidateRequest
```

### バリデーションを定義する

messages()で定義してもカスタムバリデーションは利用されないので、ここには定義しない（既に定義済み）
サービスプロバイダに定義すれば動くかな？とりあえず、そこまでしたくなかったのでこの定義で。

```php:app/Http/Requests/HogeHogeValidateRequest

<?php

namespace App\Http\Requests;

use App\Rules\KatakanaRule;
use Illuminate\Foundation\Http\FormRequest;

class HogeHogeValidateRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'name_sei_kana'               => [new KatakanaRule],
            'name_mei_kana'               => [new KatakanaRule],
        ];
    }

    /**
     * エラーメッセージのカスタマイズ
     * @return array
     */
    public function messages()
    {
        return [];
    }
}

```

## 以上

上記の定義でささっとカスタムバリデーションルールを追加できる。
他にも郵便番号チェックとか作ったり。
Android Developer Roadmap 2019 【Android Studio編2】

#はじめに
この記事はAndroidアプリ開発の初学者が[Android Developer Roadmap 2019](https://github.com/anacoimbrag/android-developer-roadmap)を基に、調べた内容を簡潔にまとめることを目的としています。

#Android Studioの基本的な機能
[前回](https://qiita.com/kinako44/items/e66c90023be747517718)はAndroid Studioのインストール方法についてまとめたので、今回は基本的な機能についてまとめたいと思います。

##Debugger
Android Studioには、エミュレータもしくは接続されているAndroid端末上で実行されているアプリをデバッグすることができるデバッガが含まれています。デバッグは実行タブからデバッグを選択するかShift+F9 (Windows7の場合) を押し、任意の端末にデプロイすることで行うことができます。
図のように行番号の隣をクリックすることでブレークポイントを設定でき、実行が一時停止しているときに変数や数式の値を確認することができます。
（参考：https://developer.android.com/studio/debug/?hl=ja）

![1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419343/6cb84e1c-c734-f9bc-f747-a881e5603f5c.jpeg)
![2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419343/7fbedcf7-b8c5-358d-28b5-df40735935df.jpeg)



##CPU Profiler
CPU ProfilerはアプリのCPU使用率とスレッドActivityの確認・検査ができる機能です。CPU Profilerを表示するには表示>ツール・ウィンドウ>プロファイラーを選択します。CPU Profilerを用いることで、リソースを大量に消費しているメソッドを特定することができます。そのメソッドのコードを最適化することで電池消費の削減や動作の高速化などが行えるようです。
（参考：https://developer.android.com/studio/profile/cpu-profiler?hl=ja）
![3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419343/7b0db42b-9d9c-c718-89ca-7e51aacc086d.jpeg)

Android SDKに関しては次回・・
(Python)sigmoid関数と偏微分のグラフの壁画

#sigmoid関数
```python:sigmoid_fnc.py
import numpy as np
import matplotlib.pylab as plt # import library

def sigmoid(x):
    return 1 / (1 + np.exp(-x)) # define sigmoid function

x = np.arange(-3.0, 3.0, 0.1)
y = sigmoid(x)
plt.plot(x, y)
plt.ylim(-0.1, 1.1)
plt.show()

```

#偏微分
```python:pertial_derivative.py
from mpl_toolkits.mplot3d import Axes3D
# import numpy as np
# import matplotlib.pylab as plt

def pertial_derivative(x,y):
    return x**2 + y**2

# x = np.arange(-3.0, 3.0, 0.1)
y = np.arange(-3.0, 3.0, 0.1)

X, Y= np.meshgrid(x,y)
Z = pertial_derivative(X, Y)
fig = plt.figure()
ax = Axes3D(fig)
ax.set_xlabel("x")
ax.set_ylabel("y")
ax.set_zlabel("f(x, y)")
ax.plot_wireframe(X, Y, Z)
# plt.show()
```

共通している部分はコメントアウトしています。
自分の学習の記録なので知識として誤りがあるかもしれません。