OmniAICreator/Qiita-1.07M huggingface dataset:
[Swift]オシャレなNavigationBar(色・フォント・アイテムのアレンジ)の作成(画面ごとに設定)

本記事では、**オシャレなNavigationBar**の作成の仕方(色・フォント・アイテムのアレンジの仕方)を紹介します！
とても簡単に実装可能なのでぜひ試してみてください！

# Before
![スクリーンショット 2020-06-13 20.23.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588214/64805fba-377d-07a7-9a71-b8c580a49a72.png)

# After
![スクリーンショット 2020-06-13 21.38.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588214/1f16848d-550a-3d1f-b133-03afaeed2556.png)

上記のように、NavigationBarをアレンジするだけでオシャレになりましたね！
※ 本記事では、画面ごとにNavigationBarをアレンジしていますが、全体を同じデザインでアレンジしたい場合は下記の記事を参考にしてみてください。
・[[Swift]オシャレなNavigationBar(色・フォント・アイテムのアレンジ)の作成](https://qiita.com/tomo_s1/items/7c18149a44ae9e217440)

では、下記のように実装していきましょう！

# 1. Main.storyboardの準備
まず、Main.storyboardに下記の写真のようにNavigationControllerを作成します。
これで、**Before**の部分は完成です！
![スクリーンショット 2020-06-13 3.08.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588214/07b2e939-0328-994b-9c09-304ea520e9ab.png)

# 2. それぞれの`ViewController.swift`にデザインをアレンジするためのコーディング
それでは、**After**のようにオシャレにデザインしていきましょう！
とても簡単で、画面ごと（`ViewController.swift`ごと）に下記のように、viewWillAppearにコードを書くことで実装できます！

下記のコードは**After**の**画面ごとに設定1**にあたります。

```swift:ViewController.swift
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    override func viewWillAppear(_ animated: Bool) {
        self.navigationItem.title = "画面ごとに設定1"

        // ナビゲーションバーの背景色
        self.navigationController?.navigationBar.barTintColor = UIColor.yellow

        self.navigationController?.navigationBar.titleTextAttributes =
            // フォントカラー
            [NSAttributedString.Key.foregroundColor: UIColor.blue,
             // フォントの種類
                NSAttributedString.Key.font: UIFont(name: "Times New Roman",
                    // フォントサイズ
                    size: 15)!]

        // ナビゲーションバー上のアイテムの色
        self.navigationController?.navigationBar.tintColor = UIColor.black
    }
}
```

下記のコードは**After**の**画面ごとに設定2**にあたります。

```swift:SecondViewController.swift
import UIKit

class SecondViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    override func viewWillAppear(_ animated: Bool) {
        self.navigationItem.title = "画面ごとに設定2"

        // ナビゲーションバーの背景色
        self.navigationController?.navigationBar.barTintColor = UIColor.cyan

        self.navigationController?.navigationBar.titleTextAttributes =
            // フォントカラー
            [NSAttributedString.Key.foregroundColor: UIColor.purple,
             // フォントの種類
                NSAttributedString.Key.font: UIFont(name: "Times New Roman",
                    // フォントサイズ
                    size: 30)!]

        // ナビゲーションバー上のアイテムの色
        self.navigationController?.navigationBar.tintColor = UIColor.red
    }
}
```
## 参考
NavigationBarを全て同じデザインでアレンジしたい場合は[こちら](https://qiita.com/tomo_s1/items/7c18149a44ae9e217440)の記事を参考にしてみてください。
Homebrewインストールからnode、npm環境構築まで

ローカル環境でnode,npmを動かすためのメモ。
端末を引っ越すたびにローカル環境を整えるので自分用備忘録です。

###今回設定する環境
php7.2
mysql5.7

#Homebrewインストール
インストールを始める。

基本的に公式サイトのフローに沿って進める。
[Homebrew公式サイト](https://brew.sh/index_ja)

```bash
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```

実行すると確認が表示、Enterを押すとmacのパスワードが求められる。

```bash
Press RETURN to continue or any other key to abort
Password:
```

パスワードを入力しenterでインストールが始まる。

```bash
brew install wget
```

#環境構築
こちらを参考にphp7.2,apache,mysql5.7をインストール
https://qiita.com/kobiyama/items/4e48604f1120cfe47f36

mysqlの初期設定
https://qiita.com/Knoth/items/241bd94af722593e685e

ユーザーとかDBとか作る
https://qiita.com/daichi87gi/items/f9dac6cd8acc3ad4330d


```sql:mysql
-- 新しくデータベースを作成する
CREATE DATABASE database_name;

-- 新しくユーザーを作成する
CREATE USER 'your_name'@'localhost' IDENTIFIED BY 'your_password';

-- 作成したユーザーに作成したデータベースの操作権限を付与する
GRANT ALL PRIVILEGES ON database_name.* TO 'your_name'@'localhost';

-- 設定を反映する
FLUSH PRIVILEGES;
```

composerをインストール

```bash
brew install composer
```

nodebrewをインストール、とりあえず安定版を入れる。

```bash
brew install nodebrew
nodebrew install-binary stable
```

上記インストールにおいてエラーが出て、
インストールがうまくいかない場合、以下のコマンドを実行。

```bash
curl -L http://git.io/nodebrew  | perl - setup
```

安定版を使えるようにする。

```bash
nodebrew use stable
```

環境パスを通す。

```bash
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
```

ターミナルを再起動（ウインドウ閉じてひらくだけで良い）。
node、npmのコマンドが使えるようになっていたらOK。

```bash
node -v
v14.7.0
npm -v
6.14.7
```
【React-Rouer】S3上でReact-Routerを利用したSPAでも直接URLにアクセス出来るようにする

# 問題
React-Routerを利用したSPAを構築しよーと思い立ち、お試しで静的WebサイトホスティングモードのS3環境上にデプロイしたところ、ルート(/)以外のパスに直アクセスすると、404エラー(※)になってしまう。
<font color="gray">※ 403になる人はパブリックアクセスを許可していない人だと思うので、適宜読み替えてくだせぇ。</font>

**こんなかんじ**
![404.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312085/d61e9a9c-1ca2-7c51-9c37-4e530d027e72.png)


# 対応方法

S3単体じゃ無理っぽい。。。
S3 + CloudFrontの合わせ技でCloudFrontのエラーページ処理機能でこんなかんじに設定するといい感じでやってくれる。

## 1. S3のドメインに対してCloudFrontを追加設定

S3へのCloudFrontの設定記事はたくさん記事があるので略。

この時点では設定したCloudFrontのURLに直リンクでアクセスしても以下の通り404が出るだけ。

![cloudfront404.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312085/8369c8e8-8d9e-01b7-526e-21bdeb66d564.png)

## 2. CloudFrontに404エラー時にルート(/)にアクセスを流すように設定追加

作成したCloudFrontの「ErrorPages」から「Create Custom Error Response」にアクセスして設定追加

![ErrorPages.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312085/3781bcf9-eaee-bfca-588c-931956e88245.png)

にアクセスして、以下の内容で登録。

![Create Custom Error Response.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312085/7d0289cc-aa4c-ff85-83ef-f26864851e58.png)


この段階でようやく直リンクが可能に。

![Success.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312085/902fe8eb-d50d-d130-d87e-9b5fec4cce13.png)

# まとめ
S3 + CloudFrontでなんとか期待する動きにはなったっぽい。。。
けどレスポンスヘッダー上では`X-Cache: Error from cloudfront`になっててCloudFrontキャッシュは機能しないし、Errorになってるのはちょっと気持ち悪い。。。

あと別のリクエスト(CSSとか画像とか)で404になってもindex.html返そうとするのはどうなんだろう。。。

もっと良い設定方法を知ってる方いらっしゃいましたら教えて下さい。。。
無謀にもアジャイル開発を５つのセンテンスで言い表す

・[アジャイル開発のプロジェクトマネジメントと品質マネジメント: 58のQ&Aで学ぶ](https://www.amazon.co.jp/gp/product/4817196955/ref=ppx_yo_dt_b_asin_title_o05_s00?ie=UTF8&psc=1) 
・[アジャイルソフトウェア要求](https://www.amazon.co.jp/gp/product/B00IMRDXZW/ref=ppx_yo_dt_b_d_asin_title_o00?ie=UTF8&psc=1)
を参考に書いていますが、スクラムについての独自見解も混在していますので、多少間違いや誤解があるかもしれません。
お許しください。

###本文

１．[生産方式](https://workstyle.elecom.co.jp/factory-logistics/cell-production/#:~:text=%E3%82%BB%E3%83%AB%E7%94%9F%E7%94%A3%E6%96%B9%E5%BC%8F%E3%81%A8%E3%81%AF,%E3%82%92%E8%A1%8C%E3%81%86%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3%E3%82%82%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82)

* アジャイル
    * セル生産方式　機能分割
        * 一人の作業者（または一つのチーム）が完成までのすべて（あるいはほとんど）の工程を受け持つ　多品種少量生産向き
        * 分割統治法　問題のスコープを小さく分割することで、問題の連鎖を最小限に限定する
　　広範囲のスキル向上のチャンスが多く、流動性が高い

* ウォーターフォール
    * ライン生産方式　工程分割
        * 一人の作業者（または一つのチーム）が特定の工程のみを専門に受け持つ　少品種大量生産向き
        * 一括統治　すべての問題を一括で扱うので、問題の連鎖が複雑化してしまう
　　専門スキルの習得はできるが、技術の使いまわしができないので、流動性は低い

２．アジャイル開発で一番重視するのはQ（品質）
　　C（コスト）とD（納期）は一定（固定）、可変できるのはQ（品質）とスコープだけ
　　管理できるものも少なく、調整できる範囲も小さいので、セルフマネジメントが容易

３．中間成果物は極力作成しない、管理しない
　　ソースコード重視（ソース内コメント重視）

４．全ての事項はバックログ（チケット）で管理
　　手戻りや課題、品質保証作業もすべてバックログとして同一の管理ルールに則って行う
　　バックログ管理ルールとは
　　　C（コスト）とD（納期）は一定（固定）
　　　スクラムの原則、スクラムの役割、完了の定義など

５．要求者は要求内容を理解していない、または、正確に表現できない
　　実際に納品後に、「やっぱり、これじゃないなあ」とか「この機能も欲しかった」
　　などということは、珍しくないことです。
　　アジャイルは、要求内容は変わるということを前提に開発を進める


###おまけ
[「機能分割」](https://qiita.com/J_Cotan/items/3e28ee4cd52e2e2f199e)について
「機能」には「利用者側視点」と「開発者側視点」をつなぐインターフェースの役割があり、言葉として、業務側、プログラム側の両方で使える便利な言葉です。
アジャイル（スクラム）でのユーザストーリーの意味とバックログ、インクリメントの要素をザクっと含んでいる意味で、「機能分割」と表現しています。
AWSのEC2インスタンス立ち上げとssh接続

# EC2インスタンス(Amazon Linux 2)
大きな流れは以下の通り。

## AMIを選択する
<img width="1387" alt="スクリーンショット 2020-06-13 22.33.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241421/59d905e8-da26-153a-d8df-619d8a28dea3.png">

## キーペア作成
キーペアの名前を入力後ダウンロードする。

<img width="714" alt="key.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241421/03c2ad80-ab4c-c9f6-abfc-9fdcdbbc340d.png">

ローカルのキーペアを`~/.ssh/`フォルダに格納して以下のように権限を付与する。

```bash
chmod 400 ~/.ssh/DataLamda_Outer.pem 
```

## 接続コマンド確認
作成したインスタンス項目を右クリック　→　接続を選択すると確認できる。
<img width="853" alt="ssh.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241421/fc5d0501-91e4-7a83-8e07-9b43796c9c47.png">


# ローカルからの接続
基本のコマンドは以下。

```bash
ssh -i 証明書パス ユーザ名@IPアドレス
```
SQLのWindow関数で移動平均を求める

# 移動平均とは何か

移動平均が何か、というのは大体わからない。

株式の価格とか、時系列データを分析するときに使う項目である、というのが何となくわかったくらいだ。

ただ、**移動平均を使うと何が嬉しいかはわかる。**

ダイエットしてて、毎日体重を測る人がいるとする。たまたま、飲み会でハメを外して〆の大盛りラーメンを食べちゃった。翌日の体重が怖い。

ただ、毎日毎日大盛りラーメンを食べてるわけではない。長期的に見れば、体重は順調に減っている。

この、**長期的に見た傾向を測るのが、移動平均だ**。

トレンドラインともいうらしい。たまたまバズッた記事があるとか、そういう特殊なケースを除いた傾向が知りたいときに、移動平均という概念を使うらしい。

# 実際の求め方

実際のコードは、[『達人に学ぶSQL徹底指南書 第2版 初級者で終わりたくないあなたへ』](https://www.amazon.co.jp/%E9%81%94%E4%BA%BA%E3%81%AB%E5%AD%A6%E3%81%B6SQL%E5%BE%B9%E5%BA%95%E6%8C%87%E5%8D%97%E6%9B%B8-%E7%AC%AC2%E7%89%88-%E5%88%9D%E7%B4%9A%E8%80%85%E3%81%A7%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%9F%E3%81%8F%E3%81%AA%E3%81%84%E3%81%82%E3%81%AA%E3%81%9F%E3%81%B8-CodeZine-BOOKS/dp/4798157821)を参考にさせていただいた。

## 対象テーブル
おそらく、雑貨屋の商品テーブルだろう

id  |name   |category|selling_price|purchase_price|created_at|
----|-------|--------|-------------|--------------|----------|
0001|Tシャツ   |衣服      |         1000|           500|2009-09-20|
0002|穴あけパンチ |事務用品    |          500|           320|2009-09-11|
0003|カッターシャツ|衣服      |         4000|          2800|          |
0004|包丁     |キッチン用品  |         3000|          2800|2009-09-20|
0005|圧力鍋    |キッチン用品  |         6800|          5000|2009-01-15|
0006|フォーク   |キッチン用品  |          500|              |2009-09-20|
0007|おろしがね  |キッチン用品  |          880|           790|2008-04-28|
0008|ボールペン  |事務用品    |          100|              |2009-11-11|

## 抽出するSQL

```sql 
-- Calc moving average of selling price in time line about item id asc
-- between current row and two precending one.
select
  id
  , name
  , selling_price
  , avg (selling_price) over (
    order by id
    rows between 2 preceding and current row) as moving_avg
from
  sales_items;
```

## 結果

`moving_avg`というのが移動平均のことだ。

id  |name   |selling_price|moving_avg|
----|-------|-------------|----------|
0001|Tシャツ   |         1000| 1000.0000|
0002|穴あけパンチ |          500|  750.0000|
0003|カッターシャツ|         4000| 1833.3333|
0004|包丁     |         3000| 2500.0000|
0005|圧力鍋    |         6800| 4600.0000|
0006|フォーク   |          500| 3433.3333|
0007|おろしがね  |          880| 2726.6667|
0008|ボールペン  |          100|  493.3333|

## 解説
以下の箇所が移動平均のコアな実装だ。

```sql 
  avg (selling_price) over (
    order by id
    rows between 2 preceding and current row)
```

`avg (selling_price)`とあるので、販売単価についての平均だとわかる。

`order by id`とあるので、商品IDが時系列データだとわかる。

`rows between 2 precending and current row`とあるので、2つ前のレコードから現在のレコードの間の平均を求める、というのが分かる。`precending`は「先行した」という意味で、`2 precending`で、2つ先行したということ、すなわち、**商品IDの昇順で2つ前のデータ**ということになる。

具体例を見よう。

商品IDが`0001`のデータの移動平均は、1000である。販売単価と変わらない。なぜなら、`0001`より前のレコードは存在しないからだ。つまり、**条件を満たすレコードが全て存在しなくても、エラーにはならないように実装されていることがわかる**。

商品IDが`0003`のデータの移動平均は、1833である。2つ前のレコード`0001`から`0003`までの間の販売単価である`1000 + 500 + 4000`の平均値を求めている。これは理屈に適っている。浮動小数の桁数は調節可能だろう。当たり前の話だが。

商品IDが`0008`のデータの移動平均は、493である。`0006`から`0008`までの間の平均を求めているからだ。`0006`より前のレコードが存在しているにも関わらず、**指定範囲を超えて計算が行われない、ということがわかる**。

# まとめ

今回のデータは時系列データとしてはそれほど意味のないものだ。しかし、移動平均が何なのかをざっくりと掴むにはもってこいの素材である。

さあ、楽しくなってきた。ありがとうミックさん。
Windows Terminalで背景を透過させる

こんにちは，yourilです．
Windows Terminalで色々設定して遊んでいたところ，背景の透過でハマったのでメモとして残します．

# TL;DR

`Windowsの設定` -> `個人用設定` -> `色`のところで`透明効果`がオフの場合，Windows Terminalの背景の透過が効かないので，透過させたい場合はオンにする．

# Windows Terminalの設定方法

Microsoft Storeからインストールするだけなので，インストール方法は省略します．
Windows Terminalの設定は`settings.json`というJSONファイルに直書きで行います．
Windows Terminal上で`Ctrl ,`で開けます．
詳しい設定内容は[Microsoftのドキュメント](https://docs.microsoft.com/ja-jp/windows/terminal/customize-settings/profile-settings)に書かれているので，ここを参考にします．
キーバインドの変更や背景に好きな画像を設定できたりと，カスタマイズ性は高いと感じました．

# ハマったこと

[アクリルの設定](https://docs.microsoft.com/ja-jp/windows/terminal/customize-settings/profile-settings#acrylic-settings)という項目があり，いわゆる背景を透過させる機能ということで，試しに設定してみました．
`profiles` -> `list` -> `[対象シェルのプロファイル]`に以下を追記します．

```settings.json
            {
                "guid": "{hogehoge}",
                "name": "fugafuga",
                "useAcrylic": true,
                "acrylicOpacity": 0.5
            }
```

これで背景が透過して後ろのソフトの画面が見えるはず......なのですが，何故か見えず．
色々原因を調べていると，[githubのIssues](https://github.com/microsoft/terminal/issues/3886)で以下の文言を発見(原文ママ)．

```text
Also make sure you actually have transparency effects enabled in Windows itself
(under the Colours section of the the Personalisation settings).
```

Windows自体の透明効果を有効にしろ，とのこと．どこのことを言っているのかというと...
![transparency.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592431/25769d39-cb79-869b-1c2b-3b4dc6dc2128.png)
上図の赤枠で囲っている部分です．
デフォルトでオンだったかどうかも覚えていないですが，恐らくWindowsの初期設定時に自分でオフにしたような気がします．実際，参照していたMicrosoftのドキュメントの説明にも特に書かれていなかったので，この設定の存在そのものが盲点でした．
これをオンにしたことで，以下のように無事に(?)背景の透過が効くように......
![transparency2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592431/3142e8a7-3983-622e-da94-62523220ae49.png)

......何か思っていたのと違う(背後にQiitaの本記事を置いています)．
MacのiTerm2の透過のように，背後のウィンドウの文字がうっすら読めるのかと思いましたが，どうもそうではないようです．
透明度をMAXにしても，背後のウィンドウのぼんやり具合が強くなるだけで，とても文字は読めませんでした．
ここまで苦労して設定できたものの，これならTerminalの背景に画像を表示させた方がまだ良さそうです......
ちなみに背景画像は透明度(明るさ)が指定でき，こちらはとてもきれいに表示されていました(背景画像と文字色の組み合わせを気にする必要はありますが)．


# 終わりに

WSL2が正式にリリースされたので，Ubuntuを入れて色々と遊んでいました．
WSL2自体は既に色々記事が出ているので特に困ることなく設定できましたが，操作用のTerminalがデフォルトだと貧弱なのでWindows Terminalを試したところ，上記のところでハマってしまいました(他のアプリを透過させる理由は特に無いので，初期設定時にオフにしたあと記憶からも消える)．
JSON直書きの設定はVSCodeならプロパティ名を補完してくれるので，ドキュメントをそれほど真面目に見なくても何となく書けたりします．
設定の反映も保存と同時に行われるので，カスタマイズはとてもやりやすいと感じました．

最後まで読んで頂きありがとうございました．
ゼロから始めるLeetCode Day55「22. Generate Parentheses」

# 概要

海外ではエンジニアの面接においてコーディングテストというものが行われるらしく、多くの場合、特定の関数やクラスをお題に沿って実装するという物がメインである。

どうやら多くのエンジニアはその対策としてLeetCodeなるサイトで対策を行うようだ。

早い話が本場でも行われているようなコーディングテストに耐えうるようなアルゴリズム力を鍛えるサイトであり、海外のテックカンパニーでのキャリアを積みたい方にとっては避けては通れない道である。

と、仰々しく書いてみましたが、私は今のところそういった面接を受ける予定はありません。

ただ、ITエンジニアとして人並みのアルゴリズム力くらいは持っておいた方がいいだろうということで不定期に問題を解いてその時に考えたやり方をメモ的に書いていこうかと思います。

[Leetcode](https://leetcode.com/)

Python3で解いています。

[ゼロから始めるLeetCode 目次](https://qiita.com/KueharX/items/6ee2502c3b620c795b70)

前回
[ゼロから始めるLeetCode Day54 「1290. Convert Binary Number in a Linked List to Integer」](https://qiita.com/KueharX/items/1e2056a0fa5fee81381a)

今はTop 100 Liked QuestionsのMediumを優先的に解いています。
Easyは全て解いたので気になる方は目次の方へどうぞ。

[Twitter](https://twitter.com/kueharx)やってます。

#問題
[22. Generate Parentheses](https://leetcode.com/problems/generate-parentheses/)

難易度はMedium。
Top 100 Liked Questionsからの抜粋です。

問題としては、正の整数である`n`が与えられます。その数の括弧の組み合わせを全て書き出すようなアルゴリズムを設計しましょう、というものです。

最近知ったんですけど自然数って大学数学とかだと0も含むんですね・・・

>```
For example, given n = 3, a solution set is:
[
  "((()))",
  "(()())",
  "(())()",
  "()(())",
  "()()()"
]
```

例を見た方が分かりやすいですね。

# 解法

組み合わせについての問題です、今回初見で解けなかったのでdiscussをチラチラ見て考え方を勉強して書きました。

カッコを右、`right`と左、`left`に分けて考えると分かりやすいです。
それぞれの引数として`n`を当てて、それらが0になるまで追加を続ける、といういわゆるバックトラック法的な考え方をすれば比較的すんなり解けると思います。

具体的な条件付けとしては

- 括弧の最初と最後の配置は絶対であること
- 両方が0になったら配列に追加すること
- それ以外の場合は再帰的に関数を呼び返すということ

以下のコードでは`dfs`を別にまとめて見やすくしています。


```Python
class Solution:
    def generateParenthesis(self, n: int) -> List[str]:
        ans = []
        self.dfs(n,n,"",ans)
        return ans
    
    def dfs(self,left,right,path,ans):
        if left > right or left < 0 or right < 0:
            return 
        if left == 0 and right == 0:
            ans.append(path)
            return
        self.dfs(left-1,right,path+'(',ans)
        self.dfs(left,right-1,path+')',ans)
# Runtime: 32 ms, faster than 78.59% of Python3 online submissions for Generate Parentheses.
# Memory Usage: 13.9 MB, less than 93.80% of Python3 online submissions for Generate Parentheses.
```

最近気付いたのですが、LeetCodeはEasyからMediumに変わると扱う変数が増えたり、プログラミング言語に詳しいというよりは数学の確率や場合の数、整数的な知識があると解きやすくなるという印象を受けました。

これらのインタビューを受けるような人の多くは情報系や理系のことが多く、そういった知識も苦にしなさそうな感じがありますが、私のように数弱マンだと問題を見た時にん？となることが多いので、これ以上の難易度に挑む上でそういった知識も付けていく必要がありそうですね。


では今回はここまで。
お疲れ様でした。
【備忘録】Javascript : private member の設定

## プライベートメンバー
クラス内部から呼び出すことのできるプロパティ、メソッドの総称。
プライベートメンバーの対にパブリックメンバーが存在するが、これはクラス内外から自由に呼び出しすることが可能なプロパティ、メソッドのこと。プライベートメンバーはクラスの内部からしか呼び出せないように制限することで保守性が高める目的があるそうです。
参考 : https://tomoprog.hatenablog.com/entry/2018/08/19/114223

下記がコード例です。

`_base`と`_height`というプライベートなプロパティと`_checkArgs`というプライベートなメソッドを持つ`Triangle`クラスを定義しています。※`Triangle`クラスをfunction命令で定義していますが`class`で定義することも可能です。詳細は省きますが`class`定義はただのシンタックスシュガーなのでここではfunction命令で定義します。

```javascript.js

function Triangle(){
  // private プロパティ
  let _base;
  let _height;

  // private メソッド
  let _checkArgs = function(val){
    return (typeof val === 'number' && val > 0);
  }
  // => privateメンバは this._base のようには書かない => 外部から直接代入できてしまう。
  // => privateメンバはインスタンスが存在する間は内部にずっと存在する。

  // 以下、privateメンバにアクセスするためのメソッド
  // 特権メンバとも言う。これらは外部から直接呼び出して使える。
  // つまりprivateメンバにアクセスしたい時には特権メンバを経由する必要がある。
  this.setBase = function(base){
    if (_checkArgs(base)) {
      _base = base;
    }
  }

  this.getBase = function(){
    return _base;
  }

  this.setHeight = function(height){
    if (_checkArgs(height)) {
      _height = height;
    }
  }

  this.getHeight = function(){
    return _height;
  }
}

```

コメントアウトにも書いてありますがプライベートなメンバーにアクセスするためにはこのクス内に定義されているアクセサーメソッドを経由する必要があります。
これらのアクセさーメソッドのことを特権メソッドというそうです。

## 実験
では、クラスの外部から直接アクセスが本当にできないのか見てみましょう。
まず、上記の`Triangle`クラスを使って`getArea`メソッドを追加しました。
メソッドの中身をみてもらえると分かりますがアクセサーメソッドを使ってプライベートメンバにアクセスしています。

```javascript.js

function Triangle(){
  let _base;
  let _height;

  let _checkArgs = function(val){
    return (typeof val === 'number' && val > 0);
  }
  
  this.setBase = function(base){
    if (_checkArgs(base)) {
      _base = base;
    }
  }

  this.getBase = function(){
    return _base;
  }

  this.setHeight = function(height){
    if (_checkArgs(height)) {
      _height = height;
    }
  }

  this.getHeight = function(){
    return _height;
  }
}

// privateメンバに(直接は)アクセスしない普通のメソッドを定義
Triangle.prototype = {
  getArea : function(){
    // 同じクラス内のアクセサーメソッドを使用
    return this.getBase() * this.getHeight() / 2;
  }
}
```
上記のクラスに対し下記の呼び出しを行います。

```javascript.js
// インスタンス t を生成
let t1 = new Triangle();
// インスタンスに対して外部から直接、privateメンバにアクセスしようとしている。
t1._base = 10;
t1._height = 10;
console.log('1.三角形の面積:' + t1.getArea()); // NaN

t1.setBase(10);
t1.setHeight(10);
console.log('1.三角形の面積:' + t1.getArea()); // 50

```

`t1._base = 10`、`t1._height = 10`と記述しメンバに直接10を代入しようとしていますがこのまま、`t1.getArea()`を呼び出しても期待値を出力することができません。

逆に今度は`t1.setBase(10)`、`t1.setHeight(10)`でアクセサーを使用してセットすると`t1.getArea()`で期待値50を出力することができました。

一応、下記のパターンでも試します。

```javascript.js

let t2 = new Triangle();
// privateプロパティにアクセスするメソッドを使用する。
t2.setBase(10);
t2.setHeight(10);
// アクセサーメソッド
console.log('2.三角形の面積:' + t2.getBase()); // 10
console.log('2.三角形の面積:' + t2.getHeight()); // 10

```

```javascript.js
let t3 = new Triangle();
// privateプロパティに直接代入
t3._base = 10;
t3._height = 10;
console.log('3.三角形の面積:' + t3.getBase()); // undefined
console.log('3.三角形の面積:' + t3.getHeight()); // undefined

```

t2とt3を比べてもらうと分かりますがアクセサーを使ってセットしたt2の場合、getterでセットした値を再度取得できています。t3の場合は直接、代入した結果、getterで取得しようとしても`undefined`が帰ってきました。

これでprivateなメンバに対してはアクセさーを使わないとアクセスできないことを確認することができました。
PythonでPubChemを利用する方法

# はじめに

[PubChem](https://pubchem.ncbi.nlm.nih.gov/)は代表的な化合物データベースです。
ここでは、PythonでPubChemのデータを検索する方法を解説します。


# 化合物IDや化合物名を検索

化合物名で検索し、検索結果として得られたレコードのCIDやIUPAC名を取得したい場合は、`get_compounds`メソッドが使えます。

```python
import pubchempy as pcp


glycine_pubchem = pcp.get_compounds('glycine', 'name')
result = {}

for record in glycine_pubchem:
    result[record.cid] = record.iupac_name

print(result)
```

上の例では、辞書`result`のキーにCIDが、値としてIUPA名が格納されます。


# 物性値や構造情報を取得

分子量やCanonical SMILESなどの情報を取得したい場合には、`get_properties`メソッドが使えます。

```python
import pubchempy as pcp


target_properties = ['MolecularFormula', 'MolecularWeight', 'CanonicalSMILES']
result = pcp.get_prpperties(target_properties, 'glycine', 'name')

print(result)
```

上の例では、取得したい物性情報をリストとして、`get_properties`メソッドに渡しています。



# まとめ

ここでは、PythonでPubChemのデータにアクセスする方法について解説しました。
`PubChemPy`を使えば、PubChemに格納されている情報を簡単に利用することができます。
ケモインフォマティクスに不可欠なツールなので、是非使えるようになっておきましょう。


# 参考資料・リンク

[ケモインフォマティクスは製薬企業でどう役立つ？どんな知識が必要？](https://pharma-engineer.com/chemoinformatics/medicinal-chemistry-summary/)
〇〇って何？シリーズ1-2：オブザーバ

どうもwatawatavoltageです．今日は，オブザーバについて紹介したいと思います．みなさんはオブザーバという言葉は聞いたことはあるでしょうか？　日常生活でも，「見てる人」って意味で聞いたことがあるかもしれません．あながち外れてはいません．オブザーバは制御工学の分野で用いられる状態推定器のことで，有名なオブザーバはカルマンフィルタでしょう．今回も難しい数式は抜きにして説明したいと思います．

# システム制御においてやりたいこと
オブザーバは次のシナリオでよく使われます．今回は，ドローンを例にして紹介します．ドローンを状態フィードバック制御したいと考えると，状態の情報がほしいなって思いますよね．ドローンの状態というと，ドローンの姿勢とかドローンの位置，速度，加速度が挙がりますよね．で，この状態をセンサを使って獲得するわけです．でも，センサで獲得できるのは，加速度の値だけだったりするわけです．ジャイロセンサを使うとそういう状況になると思います．でも，位置と速度の情報も欲しいから，加速度の情報を積分することになると思うのですが，うまく求められないかもしれないかもしれないんですよね．そんなときに，わからない状態を推定できるのがオブザーバです．

# オブザーバの構成
じゃあ，どのように推定するか．制御対象のモデルを使ってコピーを作成します．そのコピーがどのような挙動をするかはあらかじめわかっているとします．そうすると，何か入力信号をいれたときにそのコピーがどんな状態になっているかは一目瞭然なわけです．本当に欲しいのは，制御対象の状態なので，このコピーに制御対象につながっているセンサの情報を入力してあげます．そうすると，そのセンサ情報から制御対象のコピーの状態が算出できます．このセンサ情報はもともと制御対象からの情報なので，このコピーの状態と制御対象の状態は一致しているはずです．この制御対象のコピーを作る機構がオブザーバです．

# オブザーバがうまく動かない？
もし，状態が一致しないのであれば，それはそもそも状態が求められるような構造になっていなかった可能性がありえます．数式でも書けますが，今回はスルーします．あとは，オブザーバに使っていた制御対象の情報が元の制御対象と全然違うことが挙げられます．いわゆるモデル誤差ってやつです．コピーをつくるのは，すごく難しいってことです．
「git」初心者のgit

#はじめに

git初心者です。
初めて使用したので備忘録としてメモしてます。
※（大まかな流れだけを書いています）

#流れ

1 ディレクトリに移動
2 現在のディレクトリにリポジトリを作成
3 ステージに追加
4 ローカルリポジトリにコミット
5 リモートリポジトリとの連携
6 リモートリポジトリに追加
7 herokuにログイン
8 heroku上にアプリを作成
9 herokuにデプロイ

#コマンド

1 ディレクトリに移動

```
cd ディレクトリ名
```

2 現在のディレクトリにリポジトリを作成(ローカルリポジトリ)

```
git init
```

3 ステージに追加（-AでAll）

```
git add -A
```

4 ローカルリポジトリにコミット

```
git commit -m 'コメント'
```

5 リモートリポジトリとの連携（githubでリモートリポジトリを作成済み）

```
git remote add origin 'githubのURL'
```

6 リモートリポジトリに追加（-uでupstream）

```
git push -u origin master
```

7 herokuにログイン(もっと短縮できるはず、、)

```
heroku login
```

8 heroku上にアプリを作成

```
heroku create
```

9 herokuにデプロイ

```
git push heroku master
```


#二回目以降

1 ```git commit -am 'コメント'```
2 ```git push```
3 ```git push heroku```
【Swift5】UITextFieldのClearButton(クリアボタン)が表示されない時の対処法

#はじめに
xibファイルに[UITextField](https://developer.apple.com/documentation/uikit/uitextfield)を配置した際に、
ClearButtonの設定を「Is always visible」に設定したのですが、
何かの拍子で表示されなくなってしまったことがありました。

<img width="396" alt="ほげ２.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186535/5800ec03-a440-af37-9633-aeffc52ddb47.png">

※ ClearButtonとは↓のことです。
<img width="304" alt="名称未設定ほげ.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186535/bade4b2e-01bc-c6ca-b48e-6ab173e58120.png">

#原因・修正方法

Padding Rightに値を設定してしまっていたためでした。
0を削除(何も入力しないままエンターキー)し「--」と表示されているのを確認してビルドしたところ、
クリアボタンは表示されるようになりました。

<img width="402" alt="ほげほげ.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186535/24198dba-aa6f-d344-7aca-1f40b4136ed3.png">

#補足

ClearButtonの設定の種類もいくつかあるようです。
また、これらはxib上で設定可能です。
<img width="323" alt="ほげ３.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186535/beb884fd-2ba4-b49c-4c2e-d00e58962ff3.png">

>Never Appears : クリアボタンを表示しません
Appears while editing : テキストフィールド編集中にのみ表示します
Appears unless editing : テキストフィールドにフォーカスが当たっていない場合のみ表示します
Is always visible : 常に表示します

引用元：[テキストフィールド編集でのイベントハンドリング – UITextFieldDelegate](https://www.ukeyslabo.com/development/iosapplication/swift/uitextfielddelegate/)
ユニークな配列を生成する

みんな大好きジェネリック型を用いて汎用的に処理を切り出せる。

```ts
  genUniqArray<T>(array: T[]): T[] {
    const uniqArray: T[] = array.filter(function(elem, index, self) {
      return self.indexOf(elem) === index;
    });

    return uniqArray;
  }
```

___Fin.___
【Flutter】エラー解決: com.android.builder.dexing.DexArchiveMergerException: Error while merging dex archives: 

## エラー概要

Firestoreのパッケージを導入後に以下のエラーが発生するようになりました。

```
com.android.builder.dexing.DexArchiveMergerException: Error while merging dex archives: 
```

## 解決方法

以下を`/android/app/build.gradle`のファイルに追加します。

```
multiDexEnabled true
```

```
def localProperties = new Properties()
def localPropertiesFile = rootProject.file('local.properties')
if (localPropertiesFile.exists()) {
    localPropertiesFile.withReader('UTF-8') { reader ->
        localProperties.load(reader)
    }
}

def flutterRoot = localProperties.getProperty('flutter.sdk')
if (flutterRoot == null) {
    throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
}

def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
if (flutterVersionCode == null) {
    flutterVersionCode = '1'
}

def flutterVersionName = localProperties.getProperty('flutter.versionName')
if (flutterVersionName == null) {
    flutterVersionName = '1.0'
}

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"

android {
    compileSdkVersion 28

    sourceSets {
        main.java.srcDirs += 'src/main/kotlin'
    }

    lintOptions {
        disable 'InvalidPackage'
    }

    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.tetsukick.tango"
        minSdkVersion 16
        targetSdkVersion 28
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        multiDexEnabled true
    }

    buildTypes {
        release {
            // TODO: Add your own signing config for the release build.
            // Signing with the debug keys for now, so `flutter run --release` works.
            signingConfig signingConfigs.debug
        }
    }
}

flutter {
    source '../..'
}

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.0'
}

```

## 原因
アプリ、およびアプリの参照するライブラリが 65,536 メソッドを超えると、ビルドエラーが発生し、Android ビルド アーキテクチャの制限に達したことが示されます。

Android アプリ（APK）ファイルには、Dalvik Executable（DEX）形式のバイトコード実行ファイルが含まれており、その中にアプリの実行時に使用されるコンパイル済みコードが格納されます。Dalvik Executable の仕様により、単一の DEX ファイル内で参照できるメソッドの総数は 65,536 に制限されています。対象となるメソッドは、Android フレームワーク メソッドや、ライブラリ メソッド、独自コード内のメソッドなどです。コンピュータ サイエンスにおいては、Kilo や K は 1,024（2^10）を示します。65,536 は 64×1,024 に等しいため、この制限は「**64K 参照制限**」と呼ばれます。

## 参考記事
- [64K を超えるメソッドを使用するアプリ向けに multidex を有効化する](https://developer.android.com/studio/build/multidex?authuser=2)
- [com.android.builder.dexing.DexArchiveMergerException: Error while merging dex archives:](https://stackoverflow.com/questions/54797813/com-android-builder-dexing-dexarchivemergerexception-error-while-merging-dex-ar)
そもそもLaravelって何ですか? ~サルが解説するLaravel　part1~

#はじめに
プログラミングを始めた方や、アプリ開発に興味がある方でlaravelという単語に出会ったけど、いまいちlaravelが何なのか理解できていない方に向けて、「そもそもlaravelって何？」というところを説明したいと思います。

#laravelとは
Laravelは、**世界で最も使われているPHPのフレームワーク**です。
PHPというのはプログラミング言語のことですが、フレームワークって何でしょう？


フレームワークとは、開発で使用される様々な機能や仕組みをもち、セキュリティ性・メンテナンス性・拡張性を維持するシステムを提供するものです。
昔は開発言語のみを使って開発していたのですが、より開発を便利にするために作られた便利機能の集合体がフレームワークというものです。


つまり、PHPでの開発をより効率よくするための機能の集合体、というイメージです！

それでは、具体的にはlaravelで何ができるのかについて紹介します。

#laravelでできること
###①パッケージ管理ツールによるシステム管理
laravelはパッケージ管理ツールによるシステム管理がしやすいことが特徴です。
パッケージというのは、特定の用途のために作成されたプログラム群のことです。
具体的にはPHPUnit(テスト・ツール)やCarbon(日付操作で使われる)などを指すらしいですけど、猿には意味が分かりません。



###② 豊富なコマンドにより設定・更新・アプリ作成が簡単にできる
Artisanというコマンドツールを使用すれば、各種設定や更新をはじめ、簡単なアプリ作成なども少ないコードとコマンドで手間をかけずに作成できます

###③プログラムの拡張性や自由度が高い
プログラムがある程度自動生成された後は、エンジニアが自由にコードを記述しプログラムを拡張することができます。
また、ソースコードを配置する際のディレクトリ構成を自由に決められるため、応用や変更に柔軟に対応できます。


###④バリデーションを自動で行ってくれる
バリデーション(入力値チェック)を簡単な設定だけで自動で行ってくれる機能があるため、バリデーションの実装をする手間が省けます。


###⑤柔軟なデータ操作が可能
Laravelでは独自のORMである、Eloquent ORMを利用してデータ操作を行います。
ORM(Object Relational Mappping)とは、データベースのレコードをプログラミング言語のオブジェクトとして扱えるようにする仕組みです。

Eloquent ORMを使うと、データベースとModel(データ処理)を結び付けて、様々なデータ操作を簡単かつ柔軟に行うことができます。


#最後に
laravelについて理解が深まったでしょうか？
今後もっと具体的にどうやってlaravelを使うのか猿でもわかるように書いていこうと思います.

ありがとうございました
話題のChainlinkを体験する

# オラクルとして話題のChainlink
 - 所謂ブロックチェーンのオラクル問題を解決するサービスとして注目されています。
 - 私の所属会社でも時々話題に上るようになったので、触ってみようと思いました。

# 環境
- Remix

# 一番初歩的なものを探す
 - まず環境はEthereumのテストネットにしました。
 - 詳細まで理解出来ていなかったので、公式ドキュメントを見て、一番分かり易そうな[Crypto APIs Chainlink (Testnet)](https://docs.chain.link/docs/crypto-apis-chainlink-testnet)をやってみる事にしました。
 - もっとも初歩的なサンプルはRest APIを呼ぶものになっていますが、どうしてこれがオラクルになるのか私にはいまだに理解出来ないでいます・・・。

# 実装
- 公式ドキュメントに記載されているソースコードをベースにします。
- ところどころ動かい箇所があったので、修正しながら実装します。

```
pragma solidity ^0.6.0;

//import "https://github.com/smartcontractkit/chainlink/evm/contracts/ChainlinkClient.sol";
import "https://github.com/smartcontractkit/chainlink/evm-contracts/src/v0.6/ChainlinkClient.sol";

contract CryptoAPIsChainlink is ChainlinkClient {
  
  uint256 oraclePayment;

//   constructor(uint256 _oraclePayment) public  {
//     setPublicChainlinkToken();
//     oraclePayment = _oraclePayment;
//     owneraddress = msg.sender;
//   }
  constructor(uint256 _oraclePayment) public  {
    setPublicChainlinkToken();
    oraclePayment = _oraclePayment;
    owneraddress = msg.sender;
  }

  // Additional functions here:
  
  function requestPrice
  (
    address _oracle,
    bytes32 _jobId,
    string memory _coin,
    string memory _market
  )
    public
    //onlyOwner
  {
    Chainlink.Request memory req = buildChainlinkRequest(_jobId, address(this), this.fulfill.selector);
    req.add("coin", _coin);
    req.add("market", _market);
    req.addInt("times", 100);
    sendChainlinkRequestTo(_oracle, req, oraclePayment);
  }
  
  uint256 public currentPrice;

  function fulfill(bytes32 _requestId, uint256 _price)
    public
    recordChainlinkFulfillment(_requestId)
  {
    currentPrice = _price;
  }
  
  address owneraddress;
  modifier onlyOwner {
    require(owneraddress == msg.sender);
    _;
  }
}
```

# 実行してみる
- Ropstenテストネットで動かすために、LINKトークンをfausetから取得します。
- Remixでソースコードをコンパイルして、テストネットにデプロイします。
- デプロイするとContract Addressが振られるので、Metamaskからこのアドレスに10LINKを送信します。
- 結果は、RequestPriceは成功するものの、CurrentPriceはゼロのまま、Why?
- ※fausetの使い方や実行方法は公式ドキュメントに丁寧に記載されているので、[そちら](https://docs.chain.link/docs/example-walkthrough)をご参照下さい。

# はまりポイント
- 実行するコントラクトアドレスにLINKを送っていないとGas emittion errorになるようです。※これは公式ドキュメントにも記載があります。
- 正しくないOracle Addressを指定した場合も同様のエラーが出ます。
- 同様のエラーが出た場合は、これらを確認して下さい。

# まとめ
- 恐らく私の理解が足りておらず、正しく動きませんでしたが、Chainlinkの使い方は実装出来るレベルで理解出来ました。
- オラクル問題を解決するサービスには非常に興味がありますので、引続き注目していきたいと思います。
- 普段から注目しているsubstrate、plasm、cordaと共にchainlinkも追いかけていきたいと思います。
ATOM Liteを使ってTeamsに通知を行う

先日、**[「リモートワークで職場に荷物が届いたことをATOM LiteとAzure Logic Appsを使って通知させる」](https://qiita.com/yukimatsu/items/706388e611816c8d3ece)**という記事を書いて、「Azure Logic Appsを使ってTeamsに通知するやり方」を公開したのですが、「Webhookを使用するなら、Azure Logic Appsは不要なのでは？」という問いかけを貰ったので試してみました。

# 結論
Azure Logic Appsを使わなくても、ATOM Liteを使ってTemsへの通知が出来ました。

# 以前のシステム構成
Azure Logic Appsを経由する構成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/e69bcaa8-65e3-4ca6-5427-3e7b6268e303.png)


# 今回のシステム構成
ダイレクトにTeamsに通知する構成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/284c165f-f950-d4e0-41ff-56c956dc483a.png)

# 変更点
* ATOM LiteのHTTPリクエストのURLに、Teamsの[Incoming Webhook]を使用
* HTTPリクエストは、GETからPOSTに変更
* POSTメソッドの引数に、表示したいコメントを入れる

```cpp
  HTTPClient http;
  String url = "https://xxxxxxxxxx";  // TeamsのIncoming WebhookのURL
  //Serial.println("connect url: " + url);

  if (http.begin(url))
  {
    Serial.print("[HTTP] POST...\n");
    // start connection and send HTTP header
    String payload = "{'text':'荷物が届いたよ'}";
    int httpCode = http.POST(payload);
```
以前のソースコードからの変更箇所です。全ソースコードは前の記事を参考にして下さい。

# まとめ
シンプルにTeamsと連携させたいなら、この方法が手っ取り早くて良いと思います。一方、クラウド側で処理を追加したり、分岐して並列で別な処理をさせたりしたいなどがあれば、以前の方法が良いと思います。あとは、ケースバイケースだと思うので好きに使って下さい。ATOM Liteは安くて便利です。
文系エンジニアが統計的仮説検定をゼロから勉強してみたまとめ

#Disclaimer
文系学部出身、数学で統計をまったく通ってこなかった一介のウェブ系エンジニアが、初めて「統計的仮説検定」を勉強してみたので復習がてらQiitaを書いてみました。
本内容は、以下のudemyコースを大いに参考にしています。
https://www.udemy.com/course/the-data-science-course-complete-data-science-bootcamp/

初学者につき間違いが含まれているかもしれません。
その際はコメントでご指摘いただければ幸いです。

#そもそも統計的仮説検定って何なの？
統計的仮説検定(Hypothesis testing)とは、**ある仮説が正しいかどうかを統計的手法を用いて検証する方法**のことです。

……これだけじゃ何のことかわかりませんね。もう少し具体例を出して説明してみましょう。

> - 日本におけるデータサイエンティストの平均年収は1500万円以上である。
> - ある居酒屋では、金曜日よりも土曜日にビールの売上が増える。
> - 7畳ワンルームアパートの家賃は、東京のほうが大阪より20%以上高い。

これらはすべて仮説の一例です。
ひとつめの例に関して厳密に調査しようとすると、日本中のデータサイエンティストの年収をすべて調べなければいけませんが、それは現実的ではありません。

ですが統計学を用いることで、**仮説が一定の確率のもとで正しいかどうかを検証することができるのです。**


#統計的仮説検定の方法
##仮説を用意する
検定にはふたつの仮説が必要です。

- 帰無仮説（Null hypothesis）$H_0$: 最終的に**否定したい**仮説。
- 対立仮説(Alternative hypothesis) $H_1$: 最終的に**証明したい**仮説。一般的に、こちらが検証者の意見になる。

データサイエンティストの年収の例を取ると、それぞれの仮説はこうなります。
>$H_0$: 日本におけるデータサイエンティストの平均年収は1500万円未満である。
>$H_1$: 日本におけるデータサイエンティストの平均年収は1500万円以上である。

$H_0$が間違いであるという結論が導ければ、$H_1$が正しいことが証明できます。
なんでそんな回りくどいことを……と思うかもしれませんが、そういうものです。

$H_0$が間違いであると示すことを、**棄却する（Reject）**といいます。

##有意水準を決める
有意水準(Significance level)とは、**帰無仮説を棄却する水準**のことです。
一般的には5%か1％がよく用いられ、記号αで表されます。

「間違った結論が導かれる確率」と考えるとわかりやすいです。
有意水準5%のもとで検定を行うと、20回に1回は間違った結論が出る（帰無仮説のほうが正しいのに棄却してしまう）ことになります。

たとえば、データサイエンティストの年収は本当は1500万円未満なのに、たまたま集めたサンプルに高年収の人が集まってしまい「1500万円以上である」という結論が出ることも、低い確率ですが起こりえます。

なので、十分低い値の有意水準を設定しておくことが大切です。

##場合1: 母集団の分散がわかっている
ここからはデータの性質によって手法が変わってきます。
母集団の分散が分かっている場合は**z-Score**を計算します。

z-Scoreは以下の式で計算できます。

```math
z = \frac{\overline{x}-\mu_0}{\sigma\sqrt{n}}
```
$\overline{x}$: サンプルの平均
$\mu_0$: hypothetical mean(検証したい平均値)
$\sigma$: 母集団の標準偏差（分散の平方根）
${n}$: サンプルの数

いったい何の数字やねんこれという感じですが、これは**標準化(normalization)**という処理を行い、値の平均が0、分散が1になるように調整しているのです。
これでどんな値の集合であっても同様の手法で検証できるようになります。

ちなみに分母の$\sigma\sqrt{n}$の部分は**標準誤差**と呼ばれます。

次に、有意水準をもとに「Z数表」から対応する値を探します。
http://www.z-table.com/

Z数表とはなにかというと、**値の分布をグラフに表したとき、左端からz-Scoreまでの面積が全体の何%に相当するか**を表した表です。

有意水準が5%だとすると、全体の95%に相当する面積を取るz-Scoreの値はいくつか、ということを調べます。
ピッタリの値（.9500）はありませんが、概算でz-Scoreが1.65のときに全体の95.05%の面積になることがわかりました。
この、有意水準に相当するz-Scoreのことを「critical value」と呼びます。

そして最後に、**z-Score と critical valueを比べます。**
z-Score が critical valueよりも大きかった場合、グラフの95%からはみ出していることになり、帰無仮説は棄却されます。
もしz-Score が critical valueよりも小さければ、グラフの95%に収まっているので、帰無仮説を棄却することはできない、という結論になるわけです。 

##場合2: 母集団の分散が不明である
たいていの場合は母集団の分散が不明だと思います。
そんなときは、z-Scoreのかわりに**t-Score**を使って同様の検証ができます。

```math
t = \frac{\overline{x}-\mu}{S\sqrt{n}}
```
$S$: サンプルの標準偏差

この場合のcritical valueは、**t table**から拾ってこれます。
https://www.sjsu.edu/faculty/gerstman/StatPrimer/t-table.pdf

t tableを使うには、degree of freedom(df) = サンプルの標本数-1と、有意水準の数字との交点を参照します。

たとえばサンプルの標本数が10、有意水準が1%の場合、df=9、0.01の交点なので、3.250という数字が拾えます。
z-Scoreのときと同様に、t-Scoreがcritical valueより大きければ帰無仮説は棄却され、小さければ棄却されないことになります。

#おわりに
参考にしたudemyのコース、値段の割にめちゃくちゃボリュームがあってやりごたえ抜群なのでオススメです。
確率から統計学の基本、Pythonやディープラーニングまでカバーしてます。
https://www.udemy.com/course/the-data-science-course-complete-data-science-bootcamp/
iOSでWebページの一部要素のみスクロール可能にする

##背景
- (参考)[iOS でページ全体はスクロールを無効にし、個別の要素（textarea など）では有効にする方法](https://qiita.com/noraworld/items/2834f2e6f064e6f6d41a)

> PC や Android など、iOS 以外のデバイスで、ページ全体をスクロール無効にし、それ以外の要素は有効にしたい場合は、以下の CSS を追加すれば良いです。
（中略）
しかし、iOS では、この方法だとうまくいきません。

##実現したいこと
ページ全体をスクロール禁止にした上で、スクロール可能な要素についてのみ内部の（子要素を含む）どこをタッチしてもスクロールする。
overflow:scrollに設定されていても子要素が少なくスクロール可能状態になっていない要素や、スクロール可能状態だが一番下までスクロールされきっている要素はきちんとpreventDefaultしないと上位要素をスクロールしようとしてしまうことに注意する。
(諸事情によりwindowやbodyではなく、自分で作成した一番上位の要素をrootElementとして、これにイベントを設定する仕様になっている)


## 実現方法
- 再帰的に親要素を辿ってスクロール可能要素があるか確認する関数を作成

```typescript

const check = (elem: HTMLElement,rootID:string): boolean => {
  elem.scrollBy({ top: 1 });
  if (elem?.id == rootID) {
    return false;
  } else if (elem.scrollTop) {
    if(elem.scrollTop>1)elem.scrollBy({ top: -1 });

    return true;
  } else if(elem.parentElement){
    return check(elem.parentElement);
  }else{
    return false;
  }
};
````

- スクロール可能な要素がなければpreventDefaultする関数を作成

````typescript
const preventScroll(rootElement:HtmlElement) => {
  rootElement.addEventListener(
    'touchmove',
    e => {
      const elem = e.target as HTMLElement;
      if (!(elem && check(elem,rootElement.id)) && e.cancelable) e.preventDefault();
    },
    { passive: false }
  );
});
```

- スクロールを禁止したい要素に適用（ここでは仮称globalContainerに適用）

```typescript
const root=document.getElementById("globalContainer");
if(root) preventScroll(root)
```

##備考
check()内で一度スクロールを試みた後、スクロール可能な要素と判定された場合最初にスクロールを試みた分を戻しているが、

```typescript
const check = (elem: HTMLElement,rootID:string): boolean => {
 elem.scrollBy({ top: 1 });
　　　　(中略)
 else if (elem.scrollTop) {
    if(elem.scrollTop > 1) elem.scrollBy({ top: -1 });

    return true;
  } 
```

これによりスクロール可能要素が最後までスクロールしきった状態にならず、スクロールしきった要素を引っ張って画面全体がスクロールされる仕様に対処している。

##まとめ
力押しの判定方法で目標を実現した。
また、e.targetをHTMLElementにキャストしている部分や備考で示した箇所の記述など、確実に正しい記述である自信がない部分も多いため、指摘歓迎。

## 参考
- [iOS でページ全体はスクロールを無効にし、個別の要素（textarea など）では有効にする方法](https://qiita.com/noraworld/items/2834f2e6f064e6f6d41a)
pythonでダイアログでファイル選択→メッセージボックスにファイル名表示


```python:ext_filename.py

sver='title'

# モジュールのインポート
import os, tkinter, tkinter.filedialog, tkinter.messagebox

# ファイル選択ダイアログの表示
root = tkinter.Tk()
root.withdraw()
#ファイル形式指定．第2引数を"*txt"とすれば
#拡張子がtxtのファイルのみが表示される．
fTyp = [("*","*")]
iDir = os.path.abspath(os.path.dirname(__file__))
res=tkinter.messagebox.askyesno(sver, 'Select input parameter file. \nSuspend the process if you choose "No"')

#キャンセル選択でエラーメッセージ表示
if res==True:
    file = tkinter.filedialog.askopenfilename(filetypes = fTyp,initialdir = iDir)
    
    if file=='':
        tkinter.messagebox.showerror(sver, "Suspend the process")        
    else:
        # 処理ファイル名の出力
        mess='Input file name is \n' + file
        # ボックス内メッセージ
        tkinter.messagebox.showinfo(sver,mess)        

else:
    tkinter.messagebox.showerror(sver, "Suspend the process")
```

こんな感じの画面が表示される↓
<img width="310" alt="test1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654731/7fcab774-7177-ef19-b872-4a7e32ae7188.png">
JSONを簡単に扱う為のライブラリ SwiftyJSON

##使うAPI
```
{
result: [
{
foodImageUrl: "https://image.space.rakuten.co.jp/d/strg/ctrl/3/fbd7dd260d736654532e6c0b1ec185a0cede8675.49.2.3.2.jpg",
recipeDescription: "そのままでも、ご飯にのせて丼にしても♪",
recipePublishday: "2017/10/10 22:37:34",
shop: 0,
pickup: 0,
recipeId: 1760028309,
nickname: "はぁぽじ",
smallImageUrl: "https://image.space.rakuten.co.jp/d/strg/ctrl/3/fbd7dd260d736654532e6c0b1ec185a0cede8675.49.2.3.2.jpg?thum=55",
recipeMaterial: [],
recipeIndication: "約10分",
recipeCost: "300円前後",
rank: "1",
recipeUrl: "https://recipe.rakuten.co.jp/recipe/1760028309/",
mediumImageUrl: "https://image.space.rakuten.co.jp/d/strg/ctrl/3/fbd7dd260d736654532e6c0b1ec185a0cede8675.49.2.3.2.jpg?thum=54",
recipeTitle: "ご飯がすすむ！鶏むね肉のねぎ塩焼き"
},
]
```
<a href="https://webservice.rakuten.co.jp/api/recipecategoryranking/">楽天レシピAPI</a>

##普通にfoodImageUrl、recipeTitleを取り出すには
```
import UIKit

struct ResultList: Codable {
    let result: [User]
 }

struct User: Codable {
    let foodImageUrl :String
    let recipeTitle  :String
}
class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
      getRApi()
    }
     private func getRApi(){
            guard let url = URL(string: "APIのurl") else {return}
            
            let task = URLSession.shared.dataTask(with: url) { (data, response, err)in
                if let err = err {
                    print("情報の取得に失敗しました。:", err)
                    return
                }
                if let data = data{
                    do{
                        let resultList = try JSONDecoder().decode(ResultList.self, from: data)
                        print("json: ", resultList)
                    }catch(let err){
                         print("情報の取得に失敗しました。:", err)
                    }
                }
            }
            task.resume()
        }
    }
```
長い。

##SwiftyJSON
```
import UIKit
import SwiftyJSON

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        let url = URL(string: "APIのurl")

        URLSession.shared.dataTask(with: url!) { (data, response, error) in
            guard let data = data else {return}
            do {
                let json = try? JSON(data: data)
                let foodImageUrl = json!["result"][0]["foodImageUrl"]
                let recipeTitle = json!["result"][0]["recipeTitle"]
                print(recipeTitle,foodImageUrl)
            } catch let jsonError{
                print("jsonError", jsonError)
            }
            }.resume()
    }
}
```
すっきり！！


ネットで一つのデータを取り出す方法の例は沢山あったので、なんとなく複数のデータを取り出す例で記事書かせていただきました。
またAPI勉強してまもないのでおかしなところはあると思いますが、記録として残しておきます。
LaravelアプリケーションをHerokuへデプロイ

# 問題
掌田津耶乃さんの[PHPフレームワークLaravel入門[第２版]](https://www.amazon.co.jp/PHPフレームワーク-Laravel入門-掌田津耶乃/dp/4798052582)の第１章を読んで思った
「デプロイ って言ってもネット上に公開されなくね？」
読んでみると、アプリのページを訪問するためのアドレスが http://localhost/ となっていた
XAMPP（詳しくは知らない）にデプロイするみたいだけど、外部公開する手順は載ってなかった

XAMPP 外部公開　でググってみたら、「自宅サーバを構築」「外部公開はやめとけ」とかヒットしたのでXAMPPで公開は諦めた

学習の産物をネット上に見せたいだけなので、無料で簡単なHerokuにデプロイしようと思う

Railsアプリを作ってた時と同じようにHerokuにgitでpushするだけではダメのようだ（forbiddenが返された）
さてどうしよう

# 前提
公開するアプリは

```
% laravel new laravelapp
```
で作成されたもの。つまり、モデルを使わない静的なページを表示するだけのアプリ

Herokuのアカウントを登録してcliでログインしておくこと
SSHキー追加しておくことも忘れずに(以前にしていたらしなくていい)

```
% heroku login --interactive
% heroku keys:add
```

# 解決法
要はHerokuの[ドキュメント](https://devcenter.heroku.com/articles/getting-started-with-laravel)を見ればいいんですよね

- GitHubやBitbucketへのリポジトリ追加やプッシュをしておく

```
#laravelappディレクトリに移動
% git init
% git add -A
% git commit -m "Initialize repository"
% git remote add origin [GitHubやBitbucketのリポジトリ]
% git push -u origin master
```

- Procfileをディレクトリ直下に作る

```
% touch Procfile
% echo "web: vendor/bin/heroku-php-apache2 public/" > Procfile
```

このProcfileはrootディレクトリの位置を設定するもので、これがないとデフォルトでpublic/がrootディレクトリになってしまう
Procfileを作成したので忘れずコミット

```
% git add -A
% git commit -m "Procfile for Heroku"
```

- Heroku上にアプリケーションを作成してAPP_KEYを設定(ついでに幾つかの環境変数を設定) 

```
% heroku create
% heroku config:set APP_KEY=$(php artisan key:generate --show)
% heroku config:set APP_ENV=heroku
% heroku config:set LANG=ja_JP.UTF-8
% heroku config:set TZ=Asia/Tokyo
```

- Herokuへプッシュ

```
% git push heroku master
```

終了！

# 感想
ドキュメント命！

他のQiitaの記事見てたら、マイグレーションが必要な場合はもっとやることがあるらしい
アプリ完成させた時にまたHerokuへデプロイする記事書くかもです
【Ruby】print, puts, p の違い

# はじめに
　Ruby でコンソールに文字列を出力する際の関数として、`print`, `puts`, `p` が用意されているが、違いについて自分なりにまとめてみた。
　確認したバージョン : ruby 2.6.6p146 (2020-03-31 revision 67876) [x64-mingw32]

# 表示をいろいろ試してみる

## `print`
　`print` は、文字列をそのまま出力する。オブジェクトが渡された場合は、オブジェクトの`.to_s` メソッドで返された文字列を出力する。

```
print "abc"
print "def"

# => abcdef
```

　改行文字`\n`やタブ文字`\t`については、シングルクォート`'`で囲むと`\`をエスケープして文字表示し、ダブルクォート`"`で囲むと、それぞれ改行、タブとして解釈して表示する。　

```
print 'a\nb\tc'
# => a\nb\tc    # シングルクォートだと、改行、タブを解釈しない

print "d\ne\tf"
# => d          # ダブルクォートだと、改行、タブを解釈する
# => e       f
```

　配列やハッシュを指定した場合、定義した形式で表示する。　

```
a = [ 1, 2, 3, "4", "5", "abc" ]
b = [ a: "a1", b: "b1", c: "c1" ]
c = [ [1,2], [3,4],5 ]
print a,b,c

# => [1, 2, 3, "4", "5", "abc"][{:a=>"a1", :b=>"b1", :c=>"c1"}][[1, 2], [3, 4], 5]
```


## `puts` 
　`puts` は、表示のされ方は`print`と同じ。最後に改行が付加されるのが大きな違い。シングルクォートやダブルクォートの扱いも同様。

```
print "abc"
print "def"

# => abc
# => def

puts 'a\nb\tc'
# => a\nb\tc    # シングルクォートだと、改行、タブを解釈しない

puts "d\ne\tf"    
# => d          # ダブルクォートだと、改行、タブを解釈する
# => e       f
```

　配列やハッシュを指定した場合、`print` と出力が大きく異なる。配列は要素ごとに展開、改行がついて出力され、文字列にもクォーテーションがつかない。ハッシュの場合は角カッコ`[]`無しで表示される。入れ子の配列では、要素がバラバラに表示されることになり、入れ子の情報が把握できない。

```
a = [ 1, 2, 3, "4", "5", "abc" ]
b = [ a: "a1", b: "b1", c: "c1" ]
c = [ [1,2], [3,4],5 ]
puts a,b,c

# => 1                               # 要素が全て展開されて表示 
# => 2
# => 3
# => 4                               # 文字列のクォーテーションは表示されない。
# => 5
# => abc
# => {:a=>"a1", :b=>"b1", :c=>"c1"}  # 角カッコがない。
# => 1                               # 入れ子の配列が同じレベルで全部展開される
# => 2
# => 3
# => 4
# => 5
```

## `p` 
　`p` は、オブジェクトが渡された場合、`.to_s`ではなく、`.inspect` メソッドで返された文字列を出力する。また、各行の最後に改行が付与される。文字列はダブルクォートで括られて出力されるのが異なる。

```
p "abc"
p "def"

# => "abc"
# => "def"
```

　改行文字`\n`やタブ文字`\t`については、改行、タブとして解釈しない。但し、シングルクォート`'`で囲むと`\`をエスケープしたものを表示し、ダブルクォート`"`で囲むと、エスケープしない状態でそのまま文字表示する。　

```
p 'a\nb\tc'
# => "a\\nb\\tc"    # \ をエスケープするため、\\ となる。

p "d\ne\tf"
# => "d\ne\tf"    # ダブルクォートだと、改行、タブを解釈する
```

　配列やハッシュを指定した場合、定義した形式で表示する。　

```
a = [ 1, 2, 3, "4", "5", "abc" ]
b = [ a: "a1", b: "b1", c: "c1" ]
c = [ [1,2], [3,4],5 ]
p a,b,c

# => [1, 2, 3, "4", "5", "abc"]
# => [{:a=>"a1", :b=>"b1", :c=>"c1"}]
# => [[1, 2], [3, 4], 5]
```

# わかったこと
- `puts`, `p` は末尾に改行が自動的に付与されるが、print は末尾に改行が付与されない。
- `p`は、文字列はダブルクォートで括られて出力される。
- `print`, `puts`は、改行`\n`やタブ`\t`等の特殊文字を解釈して表示するが、`p` は特殊文字を解釈しないで、そのまま文字列として出力する。
- `print`, `p` は、配列やハッシュを定義の通りに表示するが、`puts`は配列を展開して要素ごとに改行を付与して表示する。

# まとめ
　最初、`puts`は`print`に改行がつく版、程度に思っていたが、配列表示で大きな違いが出た。配列全体を出力して確認したい場合は、`puts`は使わない方がよさそう。
　本やネットで、「`p`はデバッグ用」という記載が多くみられたが、デバッグの際は特殊文字を解釈しない方が確かに見やすい、文字列か数値かの見分けもつきやすく、入力も簡単なので、確かにデバッグでは`p`関数で確認するのがベターなんだろう。
英辞郎の単語リストを使って質問してくれるプログラムを作った

# 背景

- 英語のお勉強の一環で，英辞郎を使ってわからなかった単語や文を登録し続けてましたが，なかなか復習することができてませんでした（怠けたゆえ）
- 登録した単語はまとめてtsvファイルでエクスポートできるサービスがあったので，なにか使えないかと考えてました
- ちょうどRustが個人的に面白いと思っていた時期と重なっていたのもあり，実装の練習として単語・文について質問攻めをするプログラムをつくってみようと思い立ちました

# プログラム

[Github](https://github.com/fugashy/eow_words_quiz)

# 主な構成

## csv_random_picker

- tsv(csv)の中身を保持する
- 単語・文と登録日時のペアをランダムに取得できるインターフェースを持つ
- スクレイピングは規約上よくないかもしれないのでダウンロードしたファイルを使うことにしている

## translate_shell_client

- subprocessを使用して，translate-shellを実行する
- 文字列を与えて，翻訳結果を得る

## main

- 上記2つのモジュールを組み合わせて実行する
- 単語・文をランダムに引っ張ってきて質問する
- エンターを押すと翻訳結果を取得して表示する
- これの繰り返し

# 使用している様子

```
Do you remember what 'give a bad example for' means that searched at 2019-07-25 06:59:56?
Press enter if you want answers.
'give a bad example for'

「悪い例を挙げて」
(`Warui rei o agete')

「'give a bad example for'」の翻訳
[ English -> 日本語 ]

'give a bad example for'
    「悪い例を挙げて」, 「の悪い例を与えます」


Do you remember what 'ironic' means you searched at 2019-02-05 07:26:18?
Press enter if you want answers.
'ironic'
/īˈränik/

「アイロニック」
(`Aironikku')

'ironic' の定義
[ English -> 日本語 ]

形容詞
    アイロニカル
        ironical, ironic
    皮肉な
        ironical, ironic

'ironic'
    「アイロニック」, 「皮肉」
.
.
.
.
```

# 感想

## 英語勉強ツールとして

- わからなかった単語・文は自身の弱点なので立ち向かうのは結構大変ですね（正答率はかなり低め）
- でも大きいはず...と信じます（笑）

## Rustの練習問題として

- TheBookはある程度こなした上で望んでみましたが，やっぱりコンパイラに作法を叩き込まれまくってます
- これはある程度慣れが必要だと感じます
- 実装に詰まったときに，ドキュメントがかなり役に立ってます．
- 言語としては，ミュータブル変数が目立ちやすい仕様になってますので，バグりやすそうなところも目立ちそうだなと思ってます．
- 勉強してて楽しい言語ですので，引き続きTheBookのお世話になります．
Serverless Framwork +serverless-offline + Webpackでホットリロードが効かないバグ

## バグ
僕の場合TypeScript + Serverless Frameworkを試してみたかったのですが、
そのテンプレート`aws-nodejs-typescript`にserverless offlineプラグインを入れて実行していたのですが、なぜか変化が更新されず。
一応Webpackは走っているようですが、なぜか反映されなかったので少し調べました。

 原因はおそらくserverless-offlineのバグです。これはまだ(2020/06/13現在)修正されておらず、長らく放置されている状況。


## 解決方法1
自分が試して成功した奴

```yaml:serverless.yml
custom:
  serverless-offline:
    useChildProcesses: true
```

## 解決方法2
試してませんが、この方法でも解決できたとのことです。
上記の方法で「遅い」と感じたらこちらを検討してください。
serverless-offlineをダウングレードします

```json:package.json

"serverless-webpack": "5.3.1",
"webpack": "4.42.1",
```



## 参考
[Serverless-Webpack watching for changes not working #931](https://github.com/dherault/serverless-offline/issues/931)