OmniAICreator/Qiita-1.07M huggingface dataset:
イベントが発生した時、その兄弟要素を操作する方法

# 概要
jQueryを使用せずに実装することを目指す。
同じ構造をした要素が複数存在する際に、その中でイベントが発生した兄弟要素だけを操作したい場合の実装方法である。

#実装例
クリックしたらその兄弟要素にあたる画像を小さくするボタンを実装。今回は同じ構造の要素を4つ用意。

<img width="932" alt="スクリーンショット 2020-03-24 15.53.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378497/ca16cb8f-c6fc-f017-cc94-a19d1d3e135d.png">


##HTMLとcss
参考程度に掲載

```html:HTML
<ul class="item-list">
	<li class="item-list__item">
		<img src="images/1.jpeg" alt="img1" class="img-op">
		<button class="popup-btn btn">look</button>
	</li>
	<li class="item-list__item">
		<img src="images/2.jpeg" alt="img2" class="img-op">
		<button class="popup-btn btn">look</button>
	</li>
	<li class="item-list__item">
		<img src="images/3.jpeg" alt="img3" class="img-op">
		<button class="popup-btn btn">look</button>
	</li>
	<li class="item-list__item">
		<img src="images/4.jpeg" alt="img4" class="img-op">
		<button class="popup-btn btn">look</button>
	</li>
</ul>

```

```scss:SCSS
button {
	overflow : hidden;
	outline : none;
}
.text-center {
	text-align: center;
}
.img-pc {
	display:none;
}
.wrapper {
	box-sizing: border-box;
	padding: 0 20px;
}
.btn {
	display: block;
	border-radius: 2px;
	-webkit-appearance:none;
	appearance:none;
	padding:  8px 16px;
	font-size: 1.2rem;
	border:none;
	color: #fff;
	background-color: $main-color;
	font-family: 'Montserrat', sans-serif;
	outline: none;
	cursor: pointer;
}
.item-list {
	//パラメータ
	$marginLeft: 16px;

	//プロパティ
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 32px;
	margin-left: (-1 * $marginLeft);
	padding: 0 16px;

	&__item {
		display: block;
		margin-top: 32px;
		margin-left: $marginLeft;
		width: 200px;
	}
}
.img-op {
	width: 240px;
	height: 96px;
	display: block;
	border-radius: 8px;
	object-fit: cover;

	&.active {
		transform: scale(0.5);
	}
}
.img-input {
	display: none;
}

.popup-btn {
	display: block;
	margin: 16px auto;
}
```
##Javascript

```js:JavaScript
//popup-btnクラスの要素を全て取得
let popupBtns = Array.from(document.getElementsByClassName('popup-btn'));
popupBtns.forEach(function(popupBtn) {
//その中からクリックイベントが発生した要素を取得
  popupBtn.addEventListener('click', function() {
    //親要素に遡り、ymg-opクラスの要素を取得。activeクラスをtoggle。
    popupBtn.parentElement.getElementsByClassName('img-op')[0].classList.toggle('active');
  });
});
```

#実装のヒント
考え方としては以下の通り。
jQueryだと簡単だけど、生jsだと結構面倒臭い。

1. イベントが発生した要素を取得
2. 1.で取得した要素の親要素を取得
3. 2.の子要素を取得（1.の兄弟要素にあたる）
4. 3.の要素を操作

という周りクドい手順を踏むことによって、やっとこさ兄弟要素を操作することができる。
よく修正するカーネルパラメータ

個人的に良く修正しているもの

## ファイルディスクリプタが足りないとき

SocketもFDに含まれるのだがつい見過ごされる。大体最初にこの手のエラーが発生する。
NginxのToo many open filesエラーなど。
`ulimit -n`で確認するが、当該エラーが発生したユーザで実施することに注意。rootだと異なる設定の場合がある。

```
[anyuser]$ ulimit -n
1024
```

この場合は、1024個しかFDが利用できない。

### 対応策

limits.confを修正する。場合にもよるが、rootだけFDが設定されていることも多く、何も設定されていない場合、デフォルトが1024になることに注意すること。
ソフトリミットもハードリミットも変更しておく。
値は、適宜決める。
以下は、anyuserのFDを変更する場合。

```/etc/security/limits.conf
*                soft    core            unlimited
*                hard    core            unlimited
root             soft    nofile          65536
root             hard    nofile          65536
anyuser          soft    nofile          65536 ←ここを追加
anyuser          hard    nofile          65536 ←ここを追加
```

### 確認方法
/etc/security/limits.confに記述しても反映されていないことがある。
サーバへSSHして、当該プロセスのプロセスIDを確認し、cat /proc/<process_ID>/limitsで確認すること。

## port枯渇やらなんやら

リソースネックになっていないにもかかわらず、スループットが出ないような場合、any port枯渇に陥っている場合がある。

だいたいこういう場合当該サーバをnetstatで調べてみるとTIME_WAITが大量発生し、any portを使い切っている可能性がある。

割とよくある。
https://qiita.com/kuni-nakaji/items/c07004c7d9e5bb683bc2
これは以下のコマンドで確認することができる。

```
[root@]# netstat -antp
Active Internet connections (servers and established)
Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name
tcp        0      0 0.0.0.0:111             0.0.0.0:               LISTEN      1/systemd
tcp        0      0 127.0.0.1:25            0.0.0.0:               LISTEN      1211/master
tcp        0      0 0.0.0.0:12127           0.0.0.0:               LISTEN      8689/sshd
tcp        0      0 10.140.180.223:12127    10.140.50.217:61738     ESTABLISHED 14604/sshd: appladm 
tcp6       0      0 :::40042                :::                    LISTEN      12232/java
tcp6       0      0 :::111                  :::                    LISTEN      1/systemd
tcp6       0      0 :::8080                 :::                    LISTEN      12232/java
tcp6       0      0 :::34710                :::                    LISTEN      12232/java
tcp6       0      0 :::12120                :::                    LISTEN      12232/java
tcp6       0      0 ::1:25                  :::                    LISTEN      1211/master
tcp6       0      0 :::12127                :::                    LISTEN      8689/sshd
tcp6       0      0 10.140.180.223:42881    10.140.197.150:3306     ESTABLISHED 12232/java 
```

### 対応策
以下のip_local_port_rangeを修正し、tcp_tw_reuseを1に修正すること。(tcp_tw_reuseのエントリがない場合は追記すること。)他パラメータの修正はあまりお勧めしない。

```/etc/sysctl.conf
net.ipv4.ip_local_port_range = 30000 65500
net.ipv4.tcp_tw_reuse = 0
```
完了したら`sysctl -p`で反映。
ストリーミングとバッファって結局なんなのさ

# ストリーミングってなんだろう
RustでTCPサーバーを書いているときに，自分が**ストリーミング**と**バッファ**というものをしっかりとわかっていないことに気づいてしまいました。
なので，ストリーミングについてしっかりと理解しようと思います。
間違っているところがあったら教えてもらえると嬉しいです。

# ダウンロードとストリーミングの違い
動画などを再生する際に，データをダウンロードしてから再生する方法と，ストリーミングでデータを受け取りながら再生する方法があります。

### ダウンロード
データを一度PCにダウンロードしてから動画を再生します。
一度PCの内部ストレージに動画を保存して，保存した動画を再生する方式です。保存してから再生を行うので，動画をダウンロードしきるまでは再生することができません。一旦ダウンロードしてしまえば，保存されたデータが削除されない限りはオフラインでも動画を再生することができます。

### ストリーミング
データを少しずつ受け取りながら動画を再生していきます。
内部ストレージにデータを保存せず，**バッファ**と呼ばれる領域にデータを少し読み込んではそのデータを再生します。

このストリーミングについて詳しく書いていきます。

## バッファとは
**バッファ（buffer）**というのは，緩衝器という意味を持ち，ストリームのデータを一時的にメモリに保管しておくときに使います。
なので，バッファというのは要するにメモリのことです。
このバッファに保管されている値を読み込むことを**Read**，それに対してバッファに値を書き込むことを**Write**と言い，プログラムでバッファを用いる時によく出てきます。

動画を再生する際は，まず再生ボタンが押されたときに，サーバーからクライアントのバッファにデータが読み込まれます。
バッファがいっぱいになるまでデータが溜まったら再生が始まります。
そして，バッファに溜まった動画データを読み込んで再生（消費）しながらサーバーからデータをストリームで読み込み，それをバッファに書き込んでいきます。
そして，またバッファが満タンになったら満タンになったデータを動画として再生していきます。

こうすることで，少ない待ち時間で途切れ途切れにならないように動画を再生することができます。このとき，データは**パケット**と呼ばれる小さいデータのつつみのようなものに格納されて送信されるようになっており，このパケットにはtimestampなどのヘッダ情報などが含まれていたりします。

## フラッシュ（flush）とは
バッファを扱っていると，**フラッシュ（flush）**という言葉をよく見かけます。
バッファは満タンにならないと**Write**されないようになっています。なので，ファイルなどからストリームでデータを書き込む際に，バッファが満タンにならないのに**Write**の処理しかプログラムに書いていないと，ちゃんとバッファの中身がファイルに書き込まれるかが定かではありません。
ここで，明示的に**Flush**を行うと，バッファの中身が満タンになっていなくてもファイルにバッファの中身を書き込んでくれます。
このFlushで，中身をちゃんと書き込んでくれることを保証します。

# 参考リンク
> https://dream.jp/mb/tips_m/wifi15.html
> http://www.s-cradle.com/developer/sophiaframework/sf_reference/sec.stream.buffer.html
> https://xtech.nikkei.com/it/pc/article/NPC/20060810/245616/
> https://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=1445&forum=12
オブジェクトのFadeIn/FadeOut

オブジェクトのフェードイン、フェードアウトの
自分なりのスクリプトです。
いろいろ応用してください。

色を徐々に変える際も使えます。
Colorのrbgaをいじってみてください。
①　オブジェクトに任意のマテリアルをアタッチ
②　オブジェクトのRendering ModeをFadeにする
③　以下のスクリプトをオブジェクトにアタッチする

以下はフェードアウトですのでフェードインしたい場合はｆの値を+=してください。

```
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class FadeObject : MonoBehaviour
{
    float f;
    
    // Start is called before the first frame update
    void Start()
    {
        f = 1f;
        
    }

    // Update is called once per frame
    void Update()
    {
        if (f >= 0)
        {
            FadeOut();
        }
        else
        {
            Debug.Log("FadeOut完了");
            
        }
        
        
    }
    
    void FadeOut()
    {
        //マテリアルを取得
        Material mat = GetComponent<Renderer>().material;
        //カラーを取得
        Color c = mat.color;
        //マテリアルのインスペクターでRendering ModeをFadeにすることを忘れずに
        c.a = f;
        f -= 0.001f;
        //colorはrgb
        //マテリアルのカラーに変更値を再代入（この場合アルファ値の変更)
        mat.color = new Color(c.r, c.g, c.b, c.a);

    }
}

```
iOSのiPhone端末別サポート状況（〜2020/3 & 〜iOS13）

頻繁にわからなくなるので、まとめました。
間違えありましたら、指摘or修正リクエストお願いします。

# 表

|  端末名  | iOS ver<br>（工場出荷状態） | iOS ver<br>（最終サポート） |
| ---- | :----: | :---: |
| iPhone  | 1.0 | 3.0 |
| iPhone 3G | 2.0 | 4.0 |
| iPhone 3GS | 3.0 | 6.0 |
| iPhone 4 | 4.0 | 7.0 |
| iPhone 4S | 5.0 | 9.0 |
| iPhone 5 | 6.0 | 10.0 |
| iPhone 5c | 7.0 | 10.0 |
| iPhone 5s | 7.0 | 12.0 |
| iPhone 6 / 6 Plus | 8.0 | 12.0 |
| iPhone 6s / 6s Plus | 9.0 | - |
| iPhone SE | 9.0 | - |
| iPhone 7 / 7 Plus | 10.0 | - |
| iPhone 8 / 8 Plus | 11.0 | - |
| iPhone X | 11.0 | - |
| iPhone XR | 12.0 | - |
| iPhone XS / XS Max | 12.0 | - |
| iPhone 11 | 13.0 | - |
| iPhone 11 Pro/11 Pro Max | 13.0 | - |

表つくってて思いましたが、iPhone 5sがやたらサポート長かったですね。
iOS 13からはiPhone ６S / iPhone SE以降となります。
iOS 14でiPhone SEが切られたら、４インチ端末は全滅ですかね。

# ソースはこちらです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333454/4b188a92-4fab-5859-48a2-faea7d9bcbf8.png)
[歴代iPhoneでiOSのサポート期間はどれくらいなのか](https://iphone-mania.jp/news-252806/)
Blender python で pip で pytorch や opencv などの module をインストールするメモ(2.82a or later)

## 背景

Blender で OpenCV や dlib など使って 3D 顔データを可視化したり, pytorch と連携して機械学習と組み合わせしたりしたい.

## 環境

* Ubuntu 18.04
* Blender 2.82a(python3.7.4)

## pip のインストール

最初の状態では, pip が入っていないので, ensurepip 
https://docs.python.org/ja/3/library/ensurepip.html

でインストールします.


```
$ /path/to/blender/2.82/python/bin/python3.7m -m ensurepip
```

このあと, `-m pip` で使えるようになります.

```
$ /path/to/blender/2.82/python/bin/python3.7m -m pip
```

## C/C++ コンパイルが必要なモジュール

dlib など, pip 時にソースコードからコンパイルが必要なモジュールもあります.

Python 3.7 開発環境(ヘッダファイル)が必要になります.
Blender には Python.h などが入っていません.

### システムの python dev を使う

Ubuntu 18.04 ですと, apt で python3.7-dev を入れて, 

```
$ env CXXFLAGS="-I/usr/include/python3.7m" /path/to/blender/2.82/python/bin/python3.7m -m pip install dlib
```

などと, CXXFLAGS でヘッダパスを追加すればばとりあえずが, pyconfig.h が異なるので, 少し不安です.

### Python ソースコードからヘッダファイルを取得(推奨)

python のソースコードを落としてきて, blender 側の `/path/to/blender/2.82/python/include/python3.7m` にヘッダ関連をインストールするのが安全かとおもいます.

これで C/C++ コンパイルが必要なモジュールもインストールできるはずです!

Blender Python のコンソールで import できるはずです!

![blender-python.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36275/aff364be-b7e3-2785-e267-d29b78747e32.png)

## その他の方法


https://medium.com/@hansongfang/use-anaconda-python-in-blender-8e3f9040f9ca

Blender の python バイナリ を conda で入れたのと置き換えるアプローチ

## TODO

* [ ] miniconda や virtualenv で, blender python の環境を使って仮想環境をセットアップできないか調べる
* [ ] Blender をソースコードからビルドして, python 開発環境整えやすいようにする. 
* [x] Blender のオフラインモード(CLI モード)でもきちんと動くか確認する(バッチ処理用)
  * `blender --background --python-console` でいけます.
【初心者向け】はじめてのGulpでのSassトランスパイル

# Gulp手順

## 1. Node.js導入

①Node.js導入
公式サイトより安定版パッケージをダウンロードしインストールする
https://nodejs.org/ja/
node-v12.16.1.pkg（2020/02/24時点）

②Node.jsの存在確認

```
node -v
```

③デスクトップにテスト用のGulpディレクトリを作成

```
cd desktop
mkdir sample-gulp
cd sample-gulp
```

## 2. Gulp実行

①npmパッケージマネジャーにて初期化

```
npm init -y
```

②Gulpプラグインをインストール(※1 Mac OSでエラー)
Sassトランスパイルを実現したいので今回B手順を実施。

A.gulpをインストールする場合

```
npm install -D gulp
```

B.gulpとgulp-sassをインストールする場合

```
npm install -D gulp gulp-sass
```

※1 Mac OSでエラー
■課題
Catalina macOS 10.15にnpm installが失敗し次のエラーが出る（2020/02/24時点）
No Xcode or CLT version detected!

■対策
「Xcodeをインストールして、Command Line ToolsをXcode同梱版に切り替えてみた。」を参考にした。
https://qiita.com/UTA6966/items/6f8b1fd21c2dc9591488

手順①App StoreでXcodeをインストール
手順②ターミナルにてnode-gypをインストール

```
$ sudo xcode-select --switch /Applications/Xcode.app

$ npm install node-gyp
```

③トランスパイル対象フォルダを用意
・cssフォルダを作成
desktop/sample-gulp/css

・SCSSファイルを用意
style.scssファイルを作成
desktop/sample-gulp/css/style.scss

```
// ネストのテスト
div {
  p {
    font-weight: bold;
  }
}

// 変数のテスト
$fontColor: #525252;

h1 {
  color: $fontColor;
}
```

④タスクランナー処理記述
・gulpfile.js処理の記述
プロジェクトファイル直下にgulpfile.jsというファイルを作成

gulpfile.js

```
// gulpプラグインの読み込み
const gulp = require("gulp");
// Sassをコンパイルするプラグインの読み込み
const sass = require("gulp-sass");

// style.scssをタスクを作成する
gulp.task("default", function() {
  // style.scssファイルを取得
  return (
    gulp
      .src("css/style.scss")
      // Sassのコンパイルを実行
      .pipe(sass())
      // cssフォルダー以下に保存
      .pipe(gulp.dest("css"))
  );
});
```

⑤タスク実行（トランスパイル）

```
npx gulp
```

# 参考サイト
絶対つまずかないGulp 4入門（2019年版）インストールとSassを使うまでの手順
https://ics.media/entry/3290/

macOS 10.15 Catalinaをクリーンインストール後のnode-gypインストール
https://qiita.com/UTA6966/items/6f8b1fd21c2dc9591488

【デザイナー向け】gulpでかんたん画像圧縮
https://qiita.com/MikaShirahama/items/ab91624709510c496e53
チーム開発をして感じたこと

## この記事はなに
高校2年生3人でチーム開発をして感じたことなどを書きます
ある程度以上できる方にとっては当たり前のことなので、読まなくてもいいと思います
初心者の中の初心者みたいな感じの人向けです

## 3人のスキル
|メンバー|使える言語|チーム開発経験|
|--------|------------|:-----:|
|僕|C++,Kotlin,HTML,CSSなど|〇|
|[m_arcy](https://qiita.com/m_arcy)|C++,Pythonなど|×|
|[39umi](https://qiita.com/39umi)|C++,HTML,CSSなど|×|

僕はチーム開発を経験したことがありますがそのプロジェクトはうまくいきませんでした(笑)
今回のプロジェクトはまぁまぁよかったかなという感じはします(笑)

## 作ったもの
### 概要
「**IdeaTree**」という、アイデアが出ないときに連想語を提案することでアイデアを出す手助けをするアプリケーションです。
LINK : [IdeaTree](https://ideatree7386.herokuapp.com/Idea/)
少しバグがあるかもしれません...(小声)

### 使った技術等
- 言語
    - Python
    - JavaScript
    - HTML
    - CSS
- フレームワーク&ライブラリ
    - Django
    - vis.js
    - html2canvasなど

### 開発期間
1ヵ月と少し

## チーム開発をして感じたこと
### 1,Gitは導入しましょう
普通に考えて当たり前ですがこれはめちゃくちゃ大事です。
失敗した前のプロジェクトでは導入していませんでした(僕がいまいち使い方を理解していなかった)
他のメンバーがGitの使い方を知らなくても導入すべきです(最初にGitの使い方を教えておけば、開発を進める中で見返りが返ってくると思いました)
僕は本当に必要なところだけドキュメントを書いてメンバーに共有しました。

### 2,Gitはちゃんとやっておいた方がいいです
導入しましょうって言ったんですけど、理解が曖昧だとやばいです。実際やらかしました。コンフリクトが起きたり、コンフリクトを解消しようとしてヤバいことが起きました。(もう何も触れないでください。コンフリクトを解消しようとしてバグらせたのは僕、もっとちゃんと勉強します。)
開発するメンバーが決まったなら、最初1日をGitの使い方にあててもいいんじゃないかって思いました。逆にチームメンバー全員がしっかり理解していれば開発がめっちゃ進めやすいと思います。


### 3,何を作るかを考えてから言語とかを選びましょう
これも本当に当たり前の話です。
僕たちは「Python書きたいな～、じゃあフレームワークはDjangoで行くか～」みたいな感じで全員Web開発未経験にもかかわらず言語,フレームワークを選んでから何を作るかを決めました。実装し終えて思ったのは「これ、もっと簡単にできたやろ...」。こんな感じになりました。
その言語を学ぶために1個アプリを作る場合ならいいと思いますが、そういう特別な理由がない限りは何を作るかを決めてから言語を選ぶべきだと思います。

ダメな例)
A君「なんか一緒に作ろうぜ！！」
B君「ええで！なんの言語使う？」

いい例)
A君「なんか一緒に作ろうぜ！！」
B君「ええで！どういうもの作る？」

### 4,進捗報告はこまめにしましょう
これも当たり前と言えば当たり前です。
失敗したプロジェクトでは**1週間たっても返信がないチームメンバー**がいました。さすがにこういうのだけは避けたいなぁと思って進捗報告を徹底しました。何日に一度とかは自由でいいと思いますが、最初のうちは1週間に1度くらいはした方がいいと思います。


### 5,全体的におおまかなスケジュールを立てておきましょう
これも当たり前です。
とりあえずのスケジュールは決めておきましょう

### 6,立てたスケジュールからめっちゃ進んでるくらいがちょうどいいです
特に全員が開発慣れしてない場合だと、スケジュールも曖昧だったりします。最初は予定通り進んでいても最後になるにつれて難しい課題が残ってきます。そうなってくるとやる気が起きなくなります(ダメ)。なので、最初の方にめっちゃ進んでるくらいじゃないと最後の方で期限に間に合わなくなってくるのでここは意識すべきだと思います。
失敗したプロジェクトでは最初予定通りに進んでいましたが、中盤終盤になるにつれてやばくなって**破滅**しました。

### 7,仕様変更が出てきた場合はみんなに話しましょう
実装していくうえで「ここはこうした方がよさそう。」みたいな仕様変更が出てくるかもしれません(僕たちも結構出てきました)。そういう時は1人で勝手に仕様変更せずにちゃんとみんなで話し合って同意を得ましょう。自分がこうした方がいいって思って勝手に消してしまうと、他の部分との兼ね合いでバグが生まれたりしてはいけないので、ちゃんと全員で相談しましょう。


## 最後に
こんな記事に最後まで読んでいただきありがとうございました。
Swift：もしかしたらGPUの状態を取得できるかもしれないコード

RunCatでシステム情報を色々取得してきたので，GPUの状態も取得してみようと思い調べたところ，[Objective-Cでやっている先駆者](https://stackoverflow.com/questions/10110658/programmatically-get-gpu-percent-usage-in-os-x)がいたのでSwift化してみました．しかし，自分の開発機のMacBook Proは13インチでGPU積んでないので動作検証できませんでした．

誰か試してみたらコメント欲しいです．

```swift
import Cocoa
import IOKit

class ViewController: NSViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        getGPUPerformance()
    }
    
    func getGPUPerformance() {
        let dict = IOServiceMatching(kIOAcceleratorClassName)
        var iterator = io_iterator_t()
        if IOServiceGetMatchingServices(kIOMasterPortDefault, dict, &iterator) == kIOReturnSuccess {
            while case let regEntry = IOIteratorNext(iterator), regEntry != 0 {
                var services: Unmanaged<CFMutableDictionary>? = nil
                if IORegistryEntryCreateCFProperties(regEntry, &services, kCFAllocatorDefault, 0) != kIOReturnSuccess {
                    IOObjectRelease(regEntry)
                    continue
                }
                if
                    let servicesDict = services?.takeRetainedValue() as? [String : AnyObject],
                    let ps = servicesDict["PerformanceStatistics"] as? [String : AnyObject],
                    let gpuCore = ps["GPU Core Utilization"] as? Double,
                    let freeVram = ps["vramFreeBytes"] as? Double,
                    let usedVram = ps["vramUsedBytes"] as? Double {
                    let outpu = String(format: "GPU: %.3f%%, VRAM: %.3f%%",
                                       gpuCore / 10000000.0,
                                       100.0 * (usedVram / (usedVram + freeVram)))
                    Swift.print(outpu)
                }
                services?.release()
                IOObjectRelease(regEntry)
            }
            IOObjectRelease(iterator)
        }
    }

}
```
Heroku環境下のテーブル変更作業メモ


##前提条件と結論

migrateしてから立ち上げないとテーブルの変更を認識しないので気をつけようといいたいだけのメモです。
リスタートするだけでいいし、なんらかの理由で[Herokuでデプロイと同時にrake db:migrateを実行する](https://qiita.com/m_nakamura145/items/2eafb2dc9f8a459670b6)ことを選択しない場合の備忘録なので、[Release Phase](https://devcenter.heroku.com/articles/release-phase)が設定できている場合は読む必要はありません。

 - Ruby on Rails
 - Heroku Postgres
 - `--app yourapps`は複数環境を持っている場合のお約束
 
##実際のコマンド

```heroku
# 現在のheroku側のmigrate状況を確認、すべてupになっている
heroku rake db:migrate:status --app yourapps
		
# herokuにpushした状態で、再度確認。追加分だけdownになっている
heroku rake db:migrate:status --app yourapps
 
# migration実行
heroku rake db:migrate --app yourapps
 
# アプリをリスタートしないとテーブルの変更を認識しないので注意
heroku restart --app yourapps
```

##参考資料

 - [Herokuでデプロイと同時にrake db:migrateを実行する](https://qiita.com/m_nakamura145/items/2eafb2dc9f8a459670b6)
 - [Release Phase](https://devcenter.heroku.com/articles/release-phase)
Teraterm関連の参考URL

個人用のメモです。
僕が初学者なので、初学者の人が読んでわかるリンクを載せています。
日々更新します

- マクロに引数を与える

[https://uwazumi.honeniq.net/2013/11/09/teratermpro-macro.html](https://uwazumi.honeniq.net/2013/11/09/teratermpro-macro.html)

- 「無効なホスト」が出る時の対処法

[http://write-remember.com/archives/4847/](http://write-remember.com/archives/4847/)

- IF文条件分岐で文字列を使用する時に型の不一致でエラーになる

[http://redmage.blog7.fc2.com/blog-entry-3132.html](http://redmage.blog7.fc2.com/blog-entry-3132.html)
FTP関連の参考URL

個人用のメモです。
僕が初学者なので、初学者の人が読んでわかるリンクを載せています。
日々更新します。

- FTPの基本コマンド

[https://itlogs.net/windows-ftp/](https://itlogs.net/windows-ftp/)

- FTPをバッチでパラメータを与えて起動したい

[http://fpcu.on.coocan.jp/dosvcmd/bbs/log/ftp/1-0458.html](http://fpcu.on.coocan.jp/dosvcmd/bbs/log/ftp/1-0458.html)
「初心者向け」jquery.mCustomScrollbarスクロールバーの使用

```
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.js"></script>
<link href="https://cdn.bootcss.com/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" rel="stylesheet">
<style>
    .content {
        width: 200px;
        height: 200px;
    }
</style>
<div class="content">
    <p>
    Qiitaは「プログラミングに関する知識を記録・共有するためのサービス」ですので、再利用性・汎用性の高い情報が多く集まっている場をつくっていきたいと考えています。
	そのためには、記事を読むこと、記事を書くことを通して、読む側・書く側それぞれがお互いに関わり合って、再利用性・汎用性の高い情報を育てていきましょう。
    </p>
</div>
<script>
    (function($) {
        $(window).load(function() {
            $(".content").mCustomScrollbar({
                scrollButtons: {
                    enable: true
                },
                theme: "3d-thick"
            });
        });
    })(jQuery);
</script>
```
図
![Snipaste_2020-03-24_13-41-56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562926/80b4b6ce-3a28-cef5-0115-b1963822e200.png)
【AWS】Simple AD ディレクトリの作成

# 初めに
Simple ADを配置するためのVPCを構築します。
2つ以上のAZでサブネットを作成し、それぞれにインターネット接続できるように、Internet GateWayを設定します。

# 作成方法
## サービス画面の表示
AWSのActive Directoryのサービスページに移動します。
その後、`ディレクトリのセットアップ`を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401878/619f2e27-7a2a-2f48-2baf-5b4d1c7d5a0d.png)

## ディレクトリタイプの選択
`Simple AD`を選択し、次へ進みます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401878/ded69528-b36d-ae37-7189-6f678b9ec258.png)

## ディレクトリ情報の入力

- ディレクトリのサイズ  
  スモール
- ディレクトリのDNS名  
  任意の文字列でOK  
  例）test.local
- ディレクトリのNetBIOS名  
  今回は指定なし
- デフォルト管理ユーザー  
  Administrator（変更不可）
- 管理者のパスワード  
  任意の文字列
- 説明  
  任意の説明を入力  
  例）test

上記の内容の入力が完了したら、次に進みます。

## VPCとサブネットの選択
VPCとサブネットは先ほど作成したものを利用してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401878/8ab9418d-9f9f-88c9-be1c-5ae6403db277.png)

## 確認と作成
表示されている内容を確認し、`ディレクトリの作成`を選択します。

# さいごに
ディレクトリの作成には5～10分かかります。
次回は、作成したDirectoryを利用して、WorkSpacesを利用してみようと思います。
Python、正規表現について

#正規表現についてよく使いそうなものをメモ。
・Mac
・python

＜メモ内容＞
① ”.”は 改行以外の任意の1文字（数字含む）
② matchは、先頭からマッチするかを判定する関数、マッチする場合はmatchオブジェクト（正規表現をまとめたもの）を返し、マッチしなければNONEを返す。
③ searchは、途中でマッチするかどうかを判定する関数。２箇所ある場合は最初の１箇所のみ返す。マッチする場合はmatchオブジェクトを返し、マッチしなければNONEを返す。
④ splitは指定した文字で分割する関数、返り値はリスト型
⑤ findallは、指定した文字を**全て**返す関数、返り値はリスト型

#（１）例題

```
import re

text1 = 'abcde'
text2 = 'a'
text3 = '1234'
text4 = 'a1234'
text5 = 'a1234a567'
text6 = '住所は123-3456東京都中央区999-9999'
text7 = '〒123-1234東京都中央区999-9999'
text8 = '〒1231234東京都中央区9999999'
text9 = '〒123-1234:東京都:中央区999-9999'
text10 = '〒123-1234 東京都 中央区:999-9999'
```

#（２）実行内容

###①text1 = 'abcde'の場合
```
print(re.match('.',text1))
print(re.match('abc',text1))
print(re.match('abc$',text1))
print(re.match('\d\d',text1))
```

実行結果

```
<re.Match object; span=(0, 1), match='a'>
<re.Match object; span=(0, 3), match='abc'>
None
None
```

###②text2 = 'a'の場合

```
print(re.match('.',text2))
print(re.match('abc',text2))
print(re.match('abc$',text2))
print(re.match('\d\d',text2))
```

実行結果

```
<re.Match object; span=(0, 1), match='a'>
None
None
None
```

###③text3 = '1234'の場合

```
print(re.match('.',text3))
print(re.match('abc',text3))
print(re.match('abc$',text3))
print(re.match('\d\d',text3))
```

実行結果

```
<re.Match object; span=(0, 1), match='1'>
None
None
<re.Match object; span=(0, 2), match='12'>
```

###④text4 = 'a1234'の場合

```
print(re.match('.',text4))
print(re.match('abc',text4))
print(re.match('abc$',text4))
print(re.match('\d\d',text4))
```

実行結果

```
<re.Match object; span=(0, 1), match='a'>
None
None
None
```

###⑤text5 = 'a1234a567'の場合

```
print(re.match('\d{2}',text5))
print(re.search('\d{2}',text5))
```

実行結果

```
None
<re.Match object; span=(1, 3), match='12'>
```

###⑥text6 = '住所は123-3456東京都中央区999-9999'の場合

```
print(re.match('\d{2}',text6))
print(re.search('\d{2}',text6))
print(re.match('\d{3}-\d{4}',text6))
print(re.search('\d{3}-\d{4}',text6))
print(re.search('.\d{3}-\d{4}',text6))
```

実行結果

```
None
<re.Match object; span=(3, 5), match='12'>
None
<re.Match object; span=(3, 11), match='123-3456'>
<re.Match object; span=(2, 11), match='は123-3456'>
```

###⑦text7 = '〒123-1234東京都中央区999-9999'の場合

```
print(re.match('\d{3}-\d{4}',text7))
print(re.search('\d{3}-\d{4}',text7))
print(re.search('.\d{3}-\d{4}',text7))
print(re.findall('\d{3}-\d{4}',text7))
print(re.findall('\d{3}\d{4}',text7))
print(re.findall('.\d{3}-\d{4}',text7))
```

実行結果

```
None
<re.Match object; span=(1, 9), match='123-1234'>
<re.Match object; span=(0, 9), match='〒123-1234'>
['123-1234', '999-9999']
[]
['〒123-1234', '区999-9999']
```

###⑧text8 = '〒1231234東京都中央区9999999'の場合

```
print(re.findall('\d{3}\d{4}',text8))
```

実行結果

```
['1231234', '9999999']
```

###⑨text9 = '〒123-1234:東京都:中央区999-9999'の場合
                                             
```
print(re.split('[:]',text9))
```

実行結果

```
['〒123-1234', '東京都', '中央区999-9999']
```

###⑩text10 = '〒123-1234 東京都 中央区:999-9999'の場合

```
print(re.split('[,]',text9))
```

実行結果

```
['〒123-1234:東京都:中央区999-9999']
```
自然言語処理の覚書

## 自然言語処理
人が話したり、聞いたり、読み書きする言語を処理する技術のこと
一般的に自然言語処理では、日本語は英語のように単語ごとに分割されていないため、解析が難しい。そのため、分析を行うために事前準備である前処理として、文章を単語ごとに分割する形態素分析を行ってから、分析を行うことが一般的だ。
## 対話システム
自然言語処理をベースとして用いて実現される、人と会話するためのシステムである。
処理の流れは以下である。

 1.会話内容の判定、推定
 2.回答の内容を選択
 3.回答メッセージ返信

対話システムを構築するには、システムの活用目的を明確にする必要がある。
汎用AIはまだ出来ていないからだ。

## ソフトウェア
Pythonを用いて、MeCabを使うことで形態素分析を行い、自然言語処理を実現することが一般的だ。
また、faceebookが開発したfastTextというOSSが有用であるようだ。
MX レコードと SPF レコードってなんぞや？？

先輩「なんか、MX レコードを追加で書かないといけないらしいんですよねー」
私「！？・・・へー、そうなんですかー(;^ω^)ｱﾊﾊ　」
先輩「SPF レコードも修正しないといけないとかで」
私「それは大変ですねー（棒）」

今日も今日とて、聞き覚えのない単語が出てきたよ！(*´▽｀*)
その場は知ってる風な返事をして何とか取り繕いましたが、ちゃんとお勉強しないとですね。
会話中にいきなりスマホ出して検索するわけにもいかないし、知識って大事ですねー。

## MX レコードとは

正式名称「Mail eXchange（メール・エクスチェンジ）」レコード

DNS サーバさんが、メールをどこのメールサーバに送ったらいいか調べるときに使用します。
DNS サーバさんの中のゾーンファイルに記載されています。もしくは記載します。

こんな感じで記載されています。
`example.com.    IN MX 10     mail.example.com.`

この記述のおかげで、DNS サーバさんは `@example.com` のドメインがついたメールは、`mail.example.com.` のサーバに送ればいいんだな！ってことがわかります。

郵便番号と住所の対応表みたいなものですかね。

## SPF レコードとは

正式名称「Sender Policy Framework（センダー・ポリシー・フレームワーク）」レコード

メールサーバさんがメールを受け取ったときに、メールがどのサーバから送られてきたのかを調べるのに使用します。
こちらも、DNS サーバさんの中のゾーンファイルに記載されています。もしくは記載します。

こんな感じで記載されています。
`v=spf1 ip4:xxx.xxx.xxx.xxx include:spf.example.com~all`

送信元メールサーバの ip アドレスをチェックしているので、偽装メールアドレス対策になります。

## つまりはこんな感じ

ファンタジーな世界観で言うと、こんな感じですかね。

旅の途中、出会った謎の老人から一通の手紙を託される。
どこに届ければいいのか尋ねようと振り向くと、老人の姿はもうそこにはなかった・・・。

私「封筒に何か書いてあるな。『蛇食らう龍の右手にある町の長に届けよ』か。いったいどこなんだ・・・？」
仲間「それなら、森の賢者様に聞いてみよう！きっと、何か知っているはずだ！」

一行、森へ向かう

私「賢者様！この手紙に書いてある『蛇食らう龍の右手にある町』とは、いったいどこのことなのでしょう？」
賢者「ふむ・・・ちょっと待っておれ。今、森羅万象を記せしゾーンの書を確認するでの・・・」

賢者の前に古の書物が浮かび上がり、ページがひとりでにパラパラめくれていく。

賢者「む、これじゃな。蛇食らう龍とはすなわちスネーク川を囲うように広がるドラゴン山脈のこと。その右手に位置するはアドレッスの町じゃな」
私「賢者様、ありがとうございます！」

一行、アドレッスの町に向かう

私「ここがアドレッスの町か・・・」
門番「旅の者か。この町に何の用だ？」
私「はい。手紙を町長に届けにきました」
門番「手紙か・・・最近、偽の手紙が多くてな。念のため、差出人を改めさせてくれ」

手紙を門番に渡す。

門番「差出人は・・・町長の祖父だと！？そんな馬鹿な！これは確認が必要だな…賢者様に連絡を！」

アドレッスの町の賢者がやってくる

賢者「ほっほっほ。どれ、調べてみるかのう」

賢者が杖をかざすと、手紙が光りだし、数字が青く浮かび上がった。

賢者「192.xxx.yyy.zzz じゃな。ふむふむ。ゾーンの書にはなんて書いてあったかのう・・・」

賢者の前に古の書物が浮かび上がり、ページがひとりでにパラパラめくれていく。

賢者「ふむふむ。町長の祖父のものと同じじゃな。ほっほう。どうやら本当に町長の祖父からの手紙のようじゃのぅ」
門番「なんと！すぐに町長に連絡しなくては！」

こうして、嬉しい知らせを持ってきた私たちは盛大な歓待を受け、アドレッスの町をあとにしたのであった。

～ Fin ～

#おわりに

Q.　MX レコードってなーに？
A.　DNS サーバのゾーンファイルに書くもので、メールをどこのメールサーバに送ったらいいかを書くんだよ

Q.　SPF レコードってなーに？
A.　同じく DNS サーバのゾーンファイルに書くもので、どのサーバから送られてきたメールなら受け取っていいのかを書くんだよ

凄く基礎的な話な気がするのですが、触れる機会がないとわからないことにも気づけませんね。
知らないことがまだまだたくさんあります。もっと勉強しないと！

ここまで読んでいただき、ありがとうございました！
ではまた！(^^)/

#参考にさせていただきましたm(_ _)m

[MX レコード（「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典）](https://wa3.i-3-i.info/word12287.html)
[SPF レコード（「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典）](https://wa3.i-3-i.info/word12304.html)
GoogleAppsScriptでのMail とUserとSession

だんだん内容が薄くなってきました
先日、Lineに通知を出すやつをつくって、早速稼働してるのだけど、LineにURL送るとクリックしたときにLine内のブラウザーで開いてしまい、ちょっと面倒なことに。（ログインが必要なWebサイドなので）

というわけで、メールで送っちゃおう、というのが今日の趣旨です。
IFTTT側でメールを出す方法もありますが、アプレットつくるより早そうだったので。。。

#1.MailAppクラス
至ってシンプル。リファレンスは[こちら](https://developers.google.com/apps-script/reference/mail/mail-app)

```javascript
  let mailObject = {
    to:"hogehoge@gmail.com",
    subject:"hoge",
    body:"hoge hoge-!"
  };
  MailApp.sendEmail(mailObject);
```

sendEmailは引数の違うメソッドがいくつかあるけど、普段はこれで十分かと。

#2.Userクラス
送り先のメールアドレスをそのままスクリプトに書くのもアレだし、ひとまず自分に送るんだからスクリプトユーザーにおくる手があるはず、とリファレンスを探ると

[Userクラス](https://developers.google.com/apps-script/reference/base/user)というものがあった。
メンバーがgetEmailのみ、というシンプルなクラス（前はLoginIDがあった）で、ユーザー識別子か、今回のようにスクリプトを動かしているユーザーにメールを出すためだけにあるようなもの。

```javascript

  let email = user.getEmail();
```

#3.Sessionクラス
Userクラスを取得する一つの方法が[Sessionクラス](https://developers.google.com/apps-script/reference/base/session)のgetActiveUser

```javascript

  let user = Session.getActiveUser();
  let email = user.getEmail();
```

２と３は順番が逆に書くべきだったかもしれない。

#4.BaseService

上記３つのクラスは、GASのクラスの中で、[BaseService](https://developers.google.com/apps-script/reference/base)に所属している。
このServiceには
Blob
Menu
UI
console
クラスなどがあります。
Laravel-MixでVue + Vuetify + TypeScript

# 概要

あんまりイケてないのだが、Laravel-Mixで
Vue + Vuetify + TypeScriptをやってみたので備忘録がてらに。

## 環境

- Laravel 6.x
- Node.js 12
- macOS

## Vueのセットアップ

```console
$ php artisan preset vue
```

## Vuetifyのインストール

```console
$ npm install -D vuetify
```

## Vuetifyの設定

```app.js
import Vue from "vue";
import Vuetify from "vuetify";
import App from "./components/ExampleComponent";
Vue.use(Vuetify);

new Vue({
  el: "#app",
  components: App,
  vuetify: new Vuetify()
});
```

```console
$ npm run dev
```

で一旦コンパイルが通るか確認。

## TypeScriptのセットアップ

```console
$ npm install -D ts-loader typescript vue-property-decorator
$ touch tsconfig.json
```

```tsconfig.json
{
  "compilerOptions": {
    "outDir": "./public/",
    "sourceMap": true,
    "strict": true,
    "noImplicitReturns": true,
    "noImplicitAny": true,
    "module": "es2015",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": "node",
    "target": "es5",
    "lib": [
      "es2016",
      "dom"
    ]
  },
  "include": [
    "./resources/ts/**/*"
  ]
}
```

## app.jsをapp.tsに

```app.ts
import Vue from "vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
import App from "./components/ExampleComponent.vue";

Vue.use(Vuetify);

new Vue({
  el: "#app",
  render: h => h(App),
  vuetify: new Vuetify()
});
```

## resources/ts/types/index.d.tsの作成

```index.d.ts
declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}
```

## webpack.mix.jsの編集

```webpack.mix.js
mix.ts("resources/ts/app.ts", "public/js");

mix.webpackConfig({
  resolve: {
    extensions: [".js", ".jsx", ".vue", ".ts", ".tsx"],
    alias: {
      vue$: "vue/dist/vue.esm.js"
    }
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
        options: { appendTsSuffixTo: [/\.vue$/] },
        exclude: /node_modules/
      }
    ]
  }
});
```

## TypeScriptのコンパイル

```console
$ npm run dev
```

でコンパイルが通れば完了。

## 参考記事

- [How to Install Vuetify 2 in Laravel 6](https://medium.com/@ifkas/how-to-install-vuetify-2-in-laravel-6-863e41ddf8d2)
- [Quick start Vuetify](https://vuetifyjs.com/en/getting-started/quick-start/)
- [Laravel 5.5で簡単！Vue.js + TypeScript](https://www.hypertextcandy.com/laravel-vue-typescript)
- [Laravel mixのVue.jsをTypeScriptにしていく](https://megu-tech.hatenablog.com/entry/2019/08/02/154710)
aws-cliでCognitoのトークン（ID、PW、REFRESH）を発行する

## 実行

※ユーザプールの設定で --client-id に指定するアプリクライアントの `アプリクライアント > 詳細 > "認証用の管理 API のユーザー名パスワード認証を有効にする (ALLOW_ADMIN_USER_PASSWORD_AUTH)"` にチェックが必要

```bash
aws cognito-idp admin-initiate-auth \
--auth-flow ADMIN_USER_PASSWORD_AUTH \
--auth-parameters USERNAME=username,PASSWORD=password \
--user-pool-id ap-northeast-1_xxxxxxxxx \
--client-id xxxxxxxxxxxxxxxxxxxxxxxxxx
```

## 参考

* https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_AdminInitiateAuth.html
* https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_InitiateAuth.html
* https://docs.aws.amazon.com/cli/latest/reference/cognito-idp/admin-initiate-auth.html
* https://docs.aws.amazon.com/cli/latest/reference/cognito-idp/initiate-auth.html
AnacondaでPython3.8を使う

※追記(2020/11/15)
2020/11/15現在デフォルトのバージョンは3.8になっています。

---
Anacondaのインストーラーで入るPythonのバージョンが3.7だったので3.8はまだ使えないのかと思っていたがどうも違うらしい。  
  
「[Anaconda Individual Edition 2020.02: New Name, Exciting Features](https://www.anaconda.com/blog/anaconda-individual-edition-2020-02-new-name-exciting-features)」を読んでみると主要なOSSプロジェクトが3.8に未対応なためインストーラーは3.7にしていると書いてある。 
上記リンクにある通り`conda create -n py38 anaconda=2020.02 python=3.8`を実行すると普通に3.8が使えた。

ちなみに、python3.8だけの環境を作りたい場合は`conda create -n py38 python=3.8`でいい。
Flutterのスプラッシュスクリーン表示中に初期化（非同期含む）処理などする

# 概要
Flutterが用意しているデフォルトのスプラッシュスクリーンの表示中に、アプリの初期化処理、通信を含む時間のかかる処理などを含め実行する方法のメモ。

# TL;TR
エントリーポイントの`main()`で`runApp`を呼び出す前に処理を挿入することで、スプラッシュスクリーン表示中に処理を実行できる。

例

```dart
void main() {
  // やりたい初期化処理などをここに記述

  runApp(MyApp());
}
```

さらに、ここに非同期処理を入れたい場合は`main()`を`async`にして、`await`で非同期処理を同期的に処理することでできる。

```dart
void main() async {

  await asyncMethod(); // 非同期処理はawaitで同期的に実行

  runApp(MyApp());
}
```

# スプラッシュスクリーンについて
Flutterのスプラッシュスクリーンに関しては検索すると色々な実装方法が紹介れているが、実は現バージョンではプロジェクト作成時にデフォルトのスプラッシュスクリーンが実装されている。ただ、表示時間が短いので気づかないかもしれない。

本記事でスプラッシュスクリーンと言っているのはこのデフォルトのスプラッシュスクリーンのこと。スプラッシュスクリーン自体のカスタマイズはググればいくらでも出てくるので、ここでは触れない。

# 非同期処理を入れる例
スプラッシュスクリーンの表示中に処理を実行するには、通常の処理ならば上で書いたとおりなので、自動ログインやファイルの読み書きなど時間のかかる（通常非同期の）処理を実行する例を下に示す。

```dart
import 'package:flutter/material.dart';

String foo;

void main() async { // asyncにする
  // 初期化処理。この例ではdealyedを使って時間のかかる処理をシミュレートしている
  await Future.delayed(Duration(seconds: 5), () => foo = 'bar');

  // runAppが呼び出されることでスプラッシュスクリーンから遷移するようだ
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Center(child: Text(foo)),
    );
  }
}
```

初期化処理で非同期処理を入れたい場合は`main()`を`async`にして、`await`で非同期処理を`main()`内で同期的に処理することで、時間のかかる処理もスプラッシュスクリーン表示中にできる。

下の`MyApp`の中で、初期化処理で値を代入している変数`foo`を画面に表示している。
初期化処理で代入している値 "bar" が表示されるので、ちゃんと初期化処理が完了していることがわかる。
.nameみたいレコードのプロパティがいきなり呼ばれてるのは匿名関数の変形でした

急に出てくるとびっくりするシリーズ。
Elmにはそういう記法ほとんどないですが、そのうちの1つ。

例えば、
https://github.com/evancz/elm-sortable-table/blob/3ca42219552a862e5126e4390c28bd4683e6f9ee/examples/1-presidents.elm#L86
のような箇所。

これは下記を変形した形。

```elm
toId = (\person -> person.name)
```

上記はモジュール利用例だが、よく使うパターンとしては、List.mapでレコードから特定のプロパティを抜き出す時に使う。

```elm
type alias Person =
  { name: String
  , age: Int
  }

persons =
 [ Person "alice" 20
 , Person "bob" 30
 , Person "carol" 40
 ]

List.map .age persons
-- 結果は[20, 30, 40]
-- List.mapの第一引数である(a -> b)は(\person -> person.age)であり、
-- これが変形されて.ageで表現されている
```
React版ReactivesearchアプリをiPhone縦でも見やすくする


# はじめに
PC用に作ったReactアプリを、CSSの@media(メディアクエリ）を使って、iPhone縦のときも見やすくします。ReactでなくてもHTMLアプリであれば使えます。

# 事前準備
「[React版Reactivesearch v3を使ってゼロから最速でElasticsearchフロントアプリを作る](https://qiita.com/NorihitoYamamoto/items/be6d7a245b1e8864952c)」で作ったコードをサンプルに説明します。

# 手順
CSSファイルに@media記述を付け加えるだけです。

### CityRank.cssの修正
アプリのCSSで全体幅を指定しているmain-classセレクタの下に、横幅が768px以下の画面のときにmain-classセレクタを上書きする定義を@mediaを使って記述します。

```css:CityRank.css
.main-class {
    width: 480px;
    margin-top: 10px;
}

@media screen and (width <= 768px) {
    .main-class {
        width: 360px;
        margin-top: 10px;
    }
}
```

# リンク
[CSSでメディアクエリ(Media Queries)の基本的な書き方、記述の意味を理解し、「何となく使う」を卒業する。](https://wemo.tech/839)
Mistel Barocco MD770 (RGB) メモ

[MD770](https://amzn.to/2Z3Rc1z)買いました！自分はRGBの静音赤軸にしました。
https://www.mistelkeyboard.com/barocco-770/
https://www.archisite.co.jp/products/mistel/barocco-md770/
https://www.archisite.co.jp/products/mistel/barocco-md770-rgb/
使い勝手や、周辺機器について話していきます。

追記：本体-PC間がBluetooth接続になったモデルもでました！（ @botamochi5522 さんありがとうございます！ ）
[Mistel BAROCCO MD770 RGB BT](https://amzn.to/30qn2WG)
https://www.archisite.co.jp/products/mistel/barocco-md770-rgb-bt/

# 使い勝手
macOS Catalina + Karabiner-Elementsで使っているのですが、キーリマップは裏側のDIPスイッチ1をOnにするだけ（macOSモードになる）で、大丈夫でした。

[英語の説明書](https://drive.google.com/file/d/1oDNMKtBwWsK6lzM3W9Gf9ZDVbr875cxz/view)がトリッキーで、ついているのかわからないBluetooth機能について書いていたり（[この記事](http://www.gdm.or.jp/crew/2019/0531/307196)ではBluetooth機能について言及しているので、開発していたがやめた？）、macOSモードについて書いてない項目（① 左 Windows（Command）キーと左 Alt キー（Option）の位置入れ替え、② 右 Alt キー → 右 Windows（Command）キーへ変更）があったりしてイマイチ。[アーキタイプの日本語の説明書](https://www.archisite.co.jp/wp-content/uploads/2019/12/MD770-web-manual.pdf)がその辺素晴らしい。ありがとうございます！

MD600からの買い替え理由でもあった方向キーですが、逆にFn + l, kあたりを押してしまったりするが、すぐ慣れると思います。
あと、6のキーがMD600では右についていたのが、左になっているのも慣れが必要かも。

チルトは、足を真ん中につけて、真ん中側が盛り上がるようにする予定。

# 周辺機器
左右を繋ぐケーブルとMacと繋ぐケーブルを繋ぐのは同じものを使っていて、[Nimaso USB C/Type c to Type c ケーブル 【PD対応 100W/5A急速充電 1m】](https://amzn.to/353y87g)です。接続も全く問題なく快調です。オリジナルのカールケーブルは広げるとコネクタにストレスがかかるので使っていません。

# 参考
https://qiita.com/hidehiro98/items/838b59f8bc4ba7fa2608
Destructuring を用いた関数の引数を初期化する方法

# Destructuring とは
[Destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) は ES6 で導入された JavaScript の記法です。
主に、配列やオブジェクトで用いられ、非常にパワフルに活躍します。

今回は、関数の引数として用いるケースについて紹介します。

# 利用例

下記のような二種類の関数を考えます。

```tsx
const normalFunc = (arg1?, arg2?, arg3?) => {
  ...
}

const destructFunc = ({arg1, arg2, arg3}) => {
  ...
}
```

それぞれの関数に対して、`arg3`だけに値を設定して使いたいケースでは、それぞれ、

```tsx
normalFunc(null, null, 'something');

destructFunc({ arg3: 'something' });
```

と書きます。
Destructuring assignment を用いた場合、他の変数を考慮しなくて済みます。

# 引数を初期化する

では、引数を初期化したい場合はどうなるでしょうか。
通常の関数の場合は、以下のように書くことができます。

```tsx
const normalFunc = (arg1 = 1, arg2 = 2, arg3 =3) => {
  return { arg1, arg2, arg3 };
}

console.log(normalFunc());
// Output: {arg1: 1, arg2: 2, arg3: 3}
console.log(normalFunc(10));
// Output: {arg1: 10, arg2: 2, arg3: 3}
console.log(normalFunc(undefined, undefined, 10));
// Output: {arg1: 1, arg2: 2, arg3: 10}
```

Destructuring を用いた場合、どのように記載できるでしょうか？

```tsx
const destructFunc = ({arg1 = 1, arg2 = 2, arg3 = 3}) => {
  return { arg1, arg2, arg3 };
}

console.log(destructFunc({arg1:10}));
// Output: {arg1: 10, arg2: 2, arg3: 3}
console.log(destructFunc({arg3:10}));
// Output: {arg1: 1, arg2: 2, arg3: 10}
```

`arg3`を設定するときに`undefined`を追加しなくても動作するので良い感じですね。

ただ、実はこれだと少し不足があります。引数を取り除いてみます。

```tsx
console.log(destructFunc());
// Output: TypeError
```

通常の関数では、すべての引数をオプショナルで渡していたので、`normalFunc()`と記載することができました。
一方で、 Destructuring を用いた関数では、オブジェクトを引数として渡さないといけないので、`destructFunc({})`と記載する必要があります。
これだと毎回 `{}` を書かないといけないので少し不便です。

# `destructFunc()`に対応する

引数なしの場合のケースは以下のように書くことができます。

```tsx
const destructFunc = (
  {arg1 = 1, arg2 = 2, arg3 = 3} = {
    arg1: 1,
    arg2: 2,
    arg3: 3,
  },
) => {
  return { arg1, arg2, arg3 };
}
```

初期化の部分で少し可読性が低いですね。

以下の形で書くこともできます。
この場合、`return { arg1, arg2, arg3 }`と省略できなくなります。

```tsx
const destructFunc = ({arg1, arg2, arg3} = {}) => {
  return {
    arg1: arg1 || 1,
    arg2: arg2 || 2,
    arg3: arg3 || 3,
  };
}
```


TypeScript を用いるとこれらを改善できます。

```tsx
interface Params {
  arg1?: number;
  arg2?: number;
  arg3?: number;
}
const destructFunc = ({...props}: Params = {}) => {
  const { arg1 = 1, arg2 = 2, arg3 = 3 } = props;
  return {
    arg1,
    arg2,
    arg3,
  };
}
```

引数は`Params`によって定義されているので明確です。
初期化処理も、繰り返しを避けることができました。



記事の内容に不備、誤りなどがある場合はご指摘いただけると幸いです。
また、よりスマートな記法をご存知であれば是非教えていただきたいです。

読んでいただきありがとうございました。
楽にvscode+venvで仮想環境（Windows）メモ

#環境を作成

C:\Users\USERNAME\envのディレクトリで仮想環境を管理
ENVNAME = 環境名
env = 環境管理用フォルダ名
USERNAME = 自身ののユーザーネーム

```
C:\Users\USERNAME> python -m venv env/ENVNAME
```
#アクティベート
```
C:\Users\USERNAME> env\ENVNAME\scripts\activate
```
#VScodeと接続
```
(ENVNAME) C:\Users\USERNAME> \code 
```

?????
VScodeでファイル > 基本設定 > 設定 > python.venvPath を~/envに変更？？

#環境を適用

VScodeの一番下のバーのPython x.x.x 64-bitをクリックし環境を選択して変更

#参考
[Pythonでvenv仮想環境を使う](https://jade.alt-area.jp/archives/510#VS_Code(https://jade.alt-area.jp/archives/510#VS_Code))
[【Python3×VSCode】実行環境を分ける必要が出たら行う手順（仮想環境作成）](https://qiita.com/some-nyan/items/7f20fa5fa0b6e451a42b)
Educational Codeforces Round 84 (Rated for Div. 2) A. Sum of Odd Integers 最小のパターンから考える

https://codeforces.com/contest/1327/problem/A

distinct を読んでいなくて時間を無限に溶かした。

# 概要
- k個の相違なる奇数を足してnとできるか述べよ(YES or NOを判定すればよい)

# こう考えた
まず、k個の相違なる奇数を並べたとき、その最小値は$ 1 + 3 + 5... (2n-1)$に他ならない。つまり、初項1, 項差2, 項数kの等差数列の和に他ならない。すなわち、この最小の値を$sum$とすると、
$$ \frac{n}{2} (2a + (n-1)d) の等差数列の公式より sum = \frac{k}{2} (2 + 2(k-1) )$$

ここで、$n$から$sum$を引いた値を$l$とする。
$l$が負の時、数列は生成できない。何故なら、$k$個で生成できる最小の数列で既に目標の数を超えているためである。

$l$が偶数である場合、目的は達成可能である。最後の要素(=最大の要素)に$l$を出せば全ての要素は(lは偶数だから)奇数であり、最大の要素に正の整数を足しているので、重複する要素は存在しない。

$l$が奇数である場合は、これを満たすように要素の数を加算しようとすると必ずいずれかの要素が偶数になり、題意を満たせない。

特にコーナーケースは考えなくても良い。

#コード

```Python
def do(n, d=2, a=1):
    return int(n / 2 * (2 * a + (n - 1) * d))
 
from pprint import pprint
q = int(input())
for _ in range(q):
    n, k = map(int, input().split())
    f = True
    t = do(k)
    #print(n, t)
    if n == t:
        pass
    elif n < t:
        f = False
    elif (n-t) % 2 == 0:
        pass
    else:
        f = False
 
    print("YES" if f else "NO")
```
https://codeforces.com/contest/1327/submission/74120411
ScalikeJDBCで時刻を扱う際のミリ秒以下の精度

ScalikeJDBCでSQLServerからZonedDateTimeを取り出す際に、ミリ秒以下の値がうまく取り出せない

*追記*
@xuwei_k さんに頂いたコメント通り、3.4.0にバージョンを上げるとZonedDateTimeで直接取得してもナノ秒精度が保たれるようになりました :pray: 

# 検証環境
* Scala
    * 2.12.10
* JDK
    * OpenJDK 8
* ScalikeJDBC
    * 3.3.1
* JDBC
    * mssql-jdbc 7.2.1.jre8
* SQLServer
    * 2017-GA
   
SQLServerでの時刻は `datetimeoffset(7)` を使用しているので100ナノ秒の精度で扱いたい

# 調査
## ZonedDateTimeを入れる
100ナノ秒精度、JSTの値を扱う

```
  val date: ZonedDateTime = ZonedDateTime.parse("2019-09-05T12:34:56.1234567+09:00")
```
DBにも100ナノ秒の精度で保存される。

```
2019-09-05 12:34:56.1234567 +09:00
```

## ZonedDateTimeで取り出す
```
def * : WrappedResultSet => ZonedDateTime =
    (set: WrappedResultSet) => set.zonedDateTime(columnName)
```
ミリ秒以下が落ちてしまう。

```
2019-09-06T12:34:56.123+09:00[Asia/Tokyo]
```

## ZonedDateTimeで取り出す その２
別メソッドで取り出してみる

```
def * : WrappedResultSet => ZonedDateTime =
    (set: WrappedResultSet) => set.dateTime(columnName)
```
同様にミリ秒以下が落ちてしまう。

```
2019-09-06T12:34:56.123+09:00[Asia/Tokyo]
```

## TimeStampで取り出す
```
def * : WrappedResultSet => Timestamp =
    (set: WrappedResultSet) => set.timestamp(columnName)
```
ナノ秒まで取り出せる。

```
2019-09-06 12:34:56.1234567
```
が、タイムゾーンは取得できない。

## OffsetDateTimeで取り出す
```
def * : WrappedResultSet => OffsetDateTime =
    (set: WrappedResultSet) => set.offsetDateTime(columnName)
```
ミリ秒以下が落ちてしまう。

```
2019-09-06T12:34:56.123+09:00
```

## LocalDateTimeで取り出す
```
def * : WrappedResultSet => LocalDateTime =
    (set: WrappedResultSet) => set.localDateTime(columnName)
```
ミリ秒以下が落ちてしまう。

```
2019-09-06T12:34:56.123
```

## Stringで取り出す
```
def * : WrappedResultSet => String =
    (set: WrappedResultSet) => set.string(columnName)
```
ナノ秒まで取り出せる。

```
2019-09-06 12:34:56.1234567 +09:00
```
が、そのままZonedDateTimeにパースさせることはできない.

# 結論
Java 8では一部の時刻型の精度が低い様子。
java 9以上に上げると解決するかも？
rf: https://github.com/h2database/h2database/issues/1178#issuecomment-397500855

ということで、Java 8ではStringで取り出し、フォーマットを指定してZonedDateTimeにパースするのが確実っぽい。

```
  def fromSqlServer(date: String): ZonedDateTime = {
    val format = DateTimeFormatter.ofPattern("uuuu-MM-dd HH:mm:ss.SSSSSSS xxxxx")
    ZonedDateTime.parse(date, format)
  }
```
Coq/SSReflectでたった1行のコマンドで完全帰納法を適用する方法

# はじめに

この記事の方法はあまり良くないとの指摘があったので、[最新版の記事](https://qiita.com/nekonibox/items/8147291e9fd483e3d579)をご覧ください。

Coqにおける拡張ライブラリSSRelfectを導入した状態で完全帰納法を使いたいとき、完全帰納法自体の証明をやらずに、たった1行のコマンドで済む方法を紹介します。

# 使い方
Proof modeにおけるゴールが以下のようだったとします。[^1]

[^1]: ssrnatライブラリがインポートされている状態だとする。

```coq
P : nat -> Prop
n : nat
============================
P n
```

このとき`n`に関する完全帰納法を使うときに以下のコマンドを実行します。

```coq
elim : n {-2}n (leqnn n).
```

すると以下のようなゴールに書き換わります。

```coq
P : nat -> Prop
n : nat
============================
forall n : nat, n <= 0, P n

subgoal 2 is:
forall n : nat,
  (forall n0 : nat, n0 <= n -> P n0) -> forall n0 : nat, n0 <= n.+1 -> P n0
```

1つ目のサブゴールは、実質`P 0`を示せと言っていて、これは完全帰納法が使えるなら示せる命題です。
2つ目のサブゴールに関して、`P n0`は`n0 < n.+1`のときは仮定からすぐ示せるため、実質`P n.+1`を示せと言っていることになります。今、`n.+1`未満の任意の`n0`に対して`P n0`が成り立つという仮定があるので、これはまさに完全帰納法の仮定そのものです。

1つ目の`P 0`の証明を書かないといけないのが若干冗長なものの、この方法を使えば完全帰納法そのものを証明するよりも簡単に完全帰納法が適用できます。


## 解説
どうしてこうなるかというと、まず`leqnn n`すなわち`n <= n`をスタックに追加し、`{-2}n`を実行することによって、2番目以外の`n`をスタックに追加します。
つまりゴールは`forall n0 : nat, n0 <= n -> P n0`なります。そこで残った2番目の`n`に関して通常の帰納法を使うと上記のようなゴールに書き換わるというわけです。


# 実際に使用してみる

次に実際に使用した様子を見てみます。


## 自然数に関する完全帰納法
まず、完全帰納法自体を証明してみます。

```coq
Lemma complete_ind (P:nat -> Prop) :
  (forall n, (forall m, m < n -> P m) -> P n) ->
  forall n, P n.
Proof.
  move => H n.
    by elim : n {-2}n (leqnn n) =>[[_|//]|n IHn m Hm];
       apply : H => l Hl //; exact : IHn (leq_trans Hl Hm).
Qed.
```

冗長だった1つ目のゴールは2つ目を示すのと同じ証明が使えるので、そんなに記述量が増えることはないです。


## リストの長さに関する完全帰納法
例として、クイックソートにおける帰納原理を示していきます。[^2]

[^2]: seqライブラリがインポートされている状態だとする。

```coq
Variable (T:Type).
Variable (R:rel T).

Lemma qsort_ind (P:seq T -> Prop) :
  P [::] ->
  (forall x s, P [seq y <- s | R y x] ->
               P [seq y <- s | ~~ R y x] ->
               P (x :: s)) ->
  forall s, P s.
Proof.
  move => Hnil Hcons s.
  elim : s {-2}s (leqnn (size s)) =>[|xs s IHs][]//= xl l Hsize.
    by apply : Hcons; exact : IHs (leq_trans (filter_size _ _) Hsize).
Qed.
```

`elim : s {-2}s (leqnn (size s))`もしくは`elim : (size s) {-2}s (leqnn (size s))`のように記述します。1つ目はリストに対する帰納法、2つ目はリストの長さに対する帰納法を使っていますが、変数`s`は、ゴールの仮定`size s0 <= size s`の部分1ヶ所にしか登場しないため、どちらを使用しても大丈夫です。

ちなみにリストの長さに対して帰納法を使ったときの証明は以下の通りです。

```coq
Proof.
  move => Hnil Hcons s.
  elim : (size s) {-2}s (leqnn (size s)) =>[|n IHn][]//= xl l Hsize.
    by apply : Hcons; exact : IHn (leq_trans (filter_size _ _) Hsize).
Qed.
```

どちらを使用したとしても、証明もほぼ同じで、記述する量もあまり変わらないことがわかります。

また、冗長だったゴールは仮定の`P [::]`ですぐに示せるので、証明2行目`//=`で消えているはずです。


# まとめ
Coq/SSReflectで完全帰納法を使用する方法を解説しました。完全帰納法を直接使用するよりも若干冗長なゴールが増えますが、使用例で見たようにそれが大きな手間になるわけではないため、実用上ではそんなに問題になることはないと思います。
ブレッドボードの説明

# はじめに
ここでは、 **<font color="red">ブレッドボード</font>** について解説します。

目次へ戻るには [ここ](https://qiita.com/hsgucci/items/085680123f758c8c3eb4#%E5%AE%9F%E9%A8%93%E6%89%8B%E9%A0%86) をクリック

※本ページは実験のテキストです。


# ブレッドボード
本実験で使用するArduinoスターターキットでは，Arduino本体の横に『ブレッドボード』が付いています．
![arduino_breadboard.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256470/f47c0131-2f33-c659-838a-e3a74c9e10df.png)

　参考URL：[wikipedia "ブレッドボード"](https://ja.wikipedia.org/wiki/%E3%83%96%E3%83%AC%E3%83%83%E3%83%89%E3%83%9C%E3%83%BC%E3%83%89)

ブレッド・ボード（食用のパンの板）という呼び方は最近使われているもので，
筆者の時代には「ソルダーレス・ボード(ハンダ付け不要ボード)」と読んでいました．

ジャンパー線を差し込むだけで電子回路が作れ，すぐに実験ができるので，
「ハンダ付け不要ボード」や「プロトタイピング・ボード」の方が意味としてはしっくり来るのですが，
何故か「パンのボード」で通じるのが電子工作の世界なのです．．．

# ブレッドボードの構造

ブレッドボードの表と裏を見比べてみましょう．

![breadboard_2side.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256470/ff7c7dc6-d0ed-d234-e945-8bb1636f0037.png)

裏側には金属板があり，どこが繋がっている（＝通電する）のか一目で分かりますね．
ブレッドボードは，一般的に以下の仕様になっています．

- 赤線が引かれている部分には電源のプラス端子を接続する
- 青線が引かれている部分には電源のマイナス端子を接続する
- 実際の配線を行う領域は， **<font color=violet>溝</font>** に対して直行する方向に繋がっている

溝の左右は繋がっていません．
というのは，下図の様にICを置いた時に，もし溝の左右が通電する仕様になっていたらICが壊れてしまいます．
![breadboard_IC.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256470/4fa7bc04-6b3f-ed2c-7152-42bd07711f37.png)

赤丸同士は通電しますが，赤丸と青丸とは絶縁していなければなりません．

# 配線例

次の図を見て，なぜ間違っているか理解できますか？
![breadboad_OKNG.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256470/4ecd0d65-bd97-d167-a7a9-38cb8d740f11.png)

LEDや抵抗の両足をショートする使い方はありません．
ICの右側と左側をショートさせて使うのならば，最初からこんな形に作る必要がありません．

# 様々なブレッドボード

ブレッドボードには様々な種類がありますが，「＋ーの電源用のエリア」「溝のあるエリア」のルールは皆同じです．
![breadboads4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256470/311f7c75-cad8-26e6-6a88-9ef5f993d8c0.png)

# おわりに

今回はブレッドボードの説明をしました．

ブレッドボードは両面テープが貼られて板に貼り付けられている事が多いです．
裏側を見る機会はなかなか無いのですが，見れば一目で構造を理解できますね．
「百聞は一見に如かず」です．

[目次](https://qiita.com/hsgucci/items/085680123f758c8c3eb4#%E5%AE%9F%E9%A8%93%E6%89%8B%E9%A0%86) へ戻って次の作業を行ってください。
SwiftからOpenCVを使う

## 概要
基本的にこの記事を参考にしたら上手くできたが、1つ詰まるところがあったので、そこの解消法について記録しておきます。
[<参考記事> iOS(swift)でOpenCVを使うシンプルなサンプル](https://qiita.com/fushikky/items/e53fab1a48d43ff94006)

## 『'opencv2/opencv.hpp' file not found』のエラー
参考記事の

```OpenCVSample.mm
#import <opencv2/opencv.hpp>
#import <opencv2/highgui/ios.h>
```
この部分でfile not foundのエラーが発生した。

General > Build Settings > Framework Search Pathsにて、
$(PROJECT_DIR)をrecursiveで設定したら解消された。
CSS一部の要素だけを変更したい時

全体の要素を変更してしまうと思わぬところに影響を及ぼすことがあります。
なので、一部だけに適応した時は以下のような例で対応できる時もある。
- こちらのCSSが全体の要素としてかかっている時、htmlで対応させる。

```css
.mutual-dependence-content {
	box-sizing: border-box;
  	display: flex;
}

```

```html
<div class="mutual-dependence-content" style="box-sizing: initial;">
```

initalは規定値という意味。
[参考:initialとは](https://chaika.hatenablog.com/entry/2018/12/05/080000)
[参考：box-sizingとは](https://saruwakakun.com/html-css/reference/box-sizing)