OmniAICreator/Qiita-1.07M huggingface dataset:
【レスポンシブ】メディアクエリの準備

WEBサイト作成中にPCやスマホやタブレットで別のCSSを当てる時の
メディアクエリのメモとしてこちらでご紹介します。

# 1. スタイルシート（CSSファイル）に記述する
link要素として記述するのではなく、CSSファイルに直接
画面ごとの別のcssを記述します。

```css:sample.css
@media screen and (min-width:480px) { 
    /*　画面サイズが480pxまで　*/
  p { 
    color: red;
  }
}
@media screen and (min-width:760px) and ( max-width:960px) {
    /*　画面サイズが760pxから960pxまで　*/
  p {
    color: red;
  }
}
@media screen and (min-width:960px) {
    /*　画面サイズが960px以上*/
  p {
    color: red;
  }
}
```
・ブラウザ上では上から順に読み込まれる。
・このように小さい画面から順番に指定していく事を
「モバイルファースト」という。
_________________________________
以上で終了です
ご覧いただきありがとうございました。
ECRにdockerfileをpushしたときのメモ

AWS　ECRリポジトリの作成後「プッシュコマンドの表示」をクリックすると下記が表示される。
pushのための実行コマンドが表示され、macOS/Linux もしくは Windowsと環境に合わせて選ぶように表示される。

![Amazon ECR.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659747/2fbf4545-ef7a-ae6d-1db2-d856495b376b.png)

# 注意点
私はWindows環境だが、この表示される「Windows」とはホストOSを指すのではなく、使用するターミナルのことで、AWS Tools for Windows PowerShell を使用する場合という意味と思われる。
Windows環境下でもAWS Command Line Interface(AWS CTL)を使用している場合はmacOS/Linuxに表示されるコマンドを実行すること。
P5.js 日本語リファレンス(text)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の text関数を説明します。

## text() 

### 説明文

画面にテキストを描画します。
パラメータで指定された位置に、画面の最初のパラメータで指定された情報を表示します。

textFont() でフォントが設定されていないときはデフォルトのフォントが使用され、textSize() でフォントが設定されていないときはデフォルトのサイズが使用されます。 fill() を使用してテキストの色を変更できます。
stroke() および strokeWeight() を使用して、テキストのアウトラインを変更できます。

テキストは、座標の左、右および中心に描画するオプションを提供する textAlign() に関連して表示されます。

x2およびy2パラメータはテキストを表示する長方形の領域を定義します。これらのパラメータを指定すると、現在のrectMode() 設定に基づいて解釈されます。指定された長方形に完全に収まらないテキストは画面に描画されません。
x2とy2が指定されていない場合、ベースラインの配置がデフォルトになります。つまり、テキストはxとyから上方に描画されます。

WEBGL モードのとき：opentype / truetype フォントのみがサポートされています。 loadFont() を使用してフォントをロードする必要があります。(例2参照) 現在、stroke() は WEBGL モードでは効果がありません。

### 構文

テキスト(str, x, y, [x2], [y2])

### パラメタ

- str 
String | Object | Array | Number | Boolean：表示される英数字記号

- x 
Number：テキストのx座標

- y
Number：テキストのy座標

- x2
Number：デフォルトではテキストボックスの幅。詳細については rectMode() を参照してください(オプション)

- y2
Number：デフォルトではテキストボックスの高さ。詳細については rectMode() を参照してください(オプション)

### 例1

```javascript
function setup(){
  createCanvas(300,300);
  let s = 'The quick brown fox jumped over the lazy dog.';
  fill(0, 102, 183);
  text(s, 10, 10, 90, 80); //テキストボックス内でテキストを折り返します
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/xw0xWCaqK

### 例2

```javascript
let inconsolata;
function preload()  {
  inconsolata = loadFont('assets/Inconsolata-Regular.ttf');
}
function setup()  {
  createCanvas(300, 300, WEBGL);
  textFont(inconsolata);
  textSize(width / 3);
  textAlign(CENTER, CENTER);
}
function draw()  {
  background(0);
  let time = millis() ;
  rotateX(time / 1000);
  rotateZ(time / 1234);
  text('inconsolata', 0, 0);
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/05dmkLqex

### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
P5.js 日本語リファレンス(p5.Font)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の p5.Font を説明します。

## p5.Font

### 説明文

フォントの基本クラス

### 構文

new p5.Font([pInst])

### パラメタ

- pInst  
P5：p5インスタンス(オプション)

### Fields

- font  
根本的なOpenTypeフォントの実装

### Methods

- textBounds() 
このフォントを使用して、指定されたテキスト文字列のタイトなバウンディングボックスを返します(現在は単一行のみをサポートしています)

- textToPoints() 
指定されたテキストのパスをたどる点の配列を計算します


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
P5.js 日本語リファレンス(loadFont)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の loadFont関数を説明します。

## loadFont() 

ファイルまたはURLからOpenTypeフォントファイル(.otf, .ttf)を読み込み、PFontオブジェクトを返します。このメソッドは非同期です。つまり、スケッチの次の行が実行される前に終了しない場合があります。

フォントへのパスは、スケッチでリンクするHTMLファイルからの相対パスである必要があります。ブラウザの組み込みセキュリティにより、URLまたはその他のリモートの場所からのフォントの読み込みがブロックされる場合があります。

preload() 内でloadFont() を呼び出すと、setup() および draw() が呼び出される前にロード操作が完了することが保証されます。

### 構文

loadFont(path, [callback], [onError])

### パラメタ

- path
String：ロードするファイルまたはURLの名前

- callback
Function：loadFont() の完了後に実行される関数(オプション)

- onError
Function：エラーが発生した場合に実行される関数(オプション)

### 戻り値

p5.Font：p5.Fontオブジェクト

### 例1

```javascript
let myFont;
function preload() {
  myFont = loadFont('assets/Inconsolata-Regular.ttf');
}

function setup() {
  createCanvas(300, 300);
  
  fill(' #ED225D');
  textFont(myFont);
  textSize(28);
  text('Inconsolata', 10, 50);
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/NWNLqM70C


### 例2
preload() の外で、オブジェクトを処理するためのコールバック関数を提供できます。

```javascript
function setup() {  // preload() でないことに注意
  loadFont('assets / inconsolata.otf', drawText);
}

function drawText(font){
  fill(' #ED225D');
  textFont(font, 36);
  text('p5*js', 10, 50);
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/6D-zSrbwm


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
Vue.js × Firestore まとめ

## Vue.jsのFirebaseの初期化
まずは、src/firebase.jsというファイルを用意して、
Firebaseの初期化するコードを記述していきます。

```js:firebase.js
import firebase from "firebase/app";
var firebaseConfig = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: ""
}
firebase.initializeApp(firebaseConfig);
```

## Firestoreデータ取得
userというコレクションからデータを取得する想定。
get()メソッドで全件のデータを取得します。

```vue:App.vue
<template>
  <div id="app">
    <ul>
      <li v-for="email in emails" v-bind:key="email">{{ email }}</li>
    </ul>
  </div>
</template>
<script>
import firebase from "firebase/app";
import "firebase/firestore";
export default {
  data(){
    return {
      emails: []
    }
  },
  created() {
    firebase.firestore().collection('user').get().then((querySnapshot) => {
      querySnapshot.forEach((doc) => {
        this.emails.push(doc.data().email)
      })
    })
  }
};
</script>
```

## Firestoreデータ取得(ドキュメントID指定)
userというコレクションからデータを取得する想定。
doc()メソッドとget()メソッドで指定したドキュメントIDのデータを取得します。

```vue:App.vue
<template>
  <div id="app">
    <p>{{ email }}</p>
  </div>
</template>
<script>
import firebase from "firebase/app";
import "firebase/firestore";
export default {
  data(){
    return {
      email: ''
    }
  },
  created() {
    firebase.firestore().collection('user').doc('documentID').get().then((doc) => {
      this.email = doc.data().email
    })
  }
};
</script>
```

## Firestoreデータ追加
userというコレクションにデータを追加する想定。
add()メソッドでデータを追加します。

```vue:App.vue
<script>
import firebase from "firebase/app";
import "firebase/firestore";
export default {
  methods: {
    addData: function () {
      firebase.firestore().collection('user').add({
        email: "test@gmail.com",
        username: "test"
      })
    }
  }
};
</script>
```

## Firestoreデータ更新
userというコレクションのデータを更新する想定。
doc()メソッドとset()メソッドで指定したドキュメントIDのデータを更新します。

```vue:App.vue
<script>
import firebase from "firebase/app";
import "firebase/firestore";
export default {
  methods: {
    updateData: function () {
      firebase.firestore().collection('user').doc("documentID").set({
        email: "test.update@gmail.com",
        username: "test_update"
      })
    }
  }
};
</script>
```

## Firestoreデータ削除
userというコレクションのデータを削除する想定。
doc()メソッドとdelete()メソッドで指定したドキュメントIDのデータを削除します。

```vue:App.vue
<script>
import firebase from "firebase/app";
import "firebase/firestore";
export default {
  methods: {
    delete: function () {
      firebase.firestore().collection('user').doc("documentID").delete().then(() => {
        alert('削除');
      })
    }
  }
};
</script>
```

## まとめ
この記事が良いと思った方は、LGTMをしていただければ嬉しいです！
フォローも是非お願い致します(^^)
競技プログラミング練習記 No.17【ABC140練習】

初回 -> [はじめに](https://qiita.com/easychoco/items/a9ae28aca97cfe47091f)

[ABC140](https://atcoder.jp/contests/abc140)を解きました。
4完です。
E問題は難しくて解けていないです。

|問題|時間|アルゴリズム|実行時間
|:-:|:-:|:-:|:-:|
| A |  1min |組み合わせ|8ms|
| B |  9min |-|6ms|
| C |  9min |-|8ms|
| D | 40min |シミュレーション|8ms|



## A
```c++
	int n;
	cin >> n;
	cout << n * n * n;
```
`n^3`通りのパスワードができますね。

## B
``` c++
	int n;
	cin >> n;
	vector<int> a(n), b(n), c(n);
	for(int i = 0; i < n; ++i) cin >> a[i];
	for(int i = 0; i < n; ++i) cin >> b[i];
	for(int i = 0; i < n; ++i) cin >> c[i];
 
	int ans = b[0];
	for(int i = 1; i < n; ++i)
	{
		ans += b[i];
		if (a[i - 1] + 1 == a[i])
		{
			ans += c[a[i - 1] - 1];
		}
	}
	cout << ans;
```
やるだけですね。
インデックスの範囲に注意です。

## C
``` c++
	int n;
	cin >> n;
	vector<int> b(n);
	for(int i = 0; i < n - 1; ++i)
	{
		cin >> b[i];
	}

	int ans = b[0];
	for(int i = 1; i < n - 1; ++i)
	{
		ans += min(b[i - 1], b[i]);
	}
	ans += b[n - 2];

	cout << ans;
```

実際に手を動かして試してみると、
`a[0] = b[0]`
`a[i] = min(b[i-1], b[i])`
`a[n-1] = b[n-2]`
とわかりますね。
それぞれ足すと答えがわかります。


## D


``` c++
	int n, k;
	string s;
	cin >> n >> k >> s;

	deque<int> now = { 1 };
	for(int i = 1; i < n; ++i)
	{
		if (s[i - 1] == s[i]) now.back()++;
		else now.push_back(1);
	}

	while(k--)
	{
		if (now.size() == 1) break;
		if (now.size() == 2)
		{
			int v = now.front() + now.back();
			now.pop_front();
			now.pop_front();
			now.push_front(v);
			break;
		}

		int val = 0;
		val += now.front(); now.pop_front();
		val += now.front(); now.pop_front();
		val += now.front(); now.pop_front();
		now.push_front(val);
	}

	int ans = 0;
	while(!now.empty())
	{
		ans += now.front() - 1;
		now.pop_front();		
	}
	cout << ans;
```
反転させる問題では境界に目を向けると解けることが多いです。

今回は、`L`と`R`の境界が減るとスコアが増えます。
さらには、反転させた人数ではなく境界の数でスコアが決まります。
つまり、境界が減るように反転させ続ければ答えになります。

連続する`L,R`を集団として、そのサイズを記憶します。(最初の`for`文)
試してみるとわかるのですが、先頭と最後尾以外の集団を反転させれば境界を2つ減らせますね。
そしてこれが最もスコアが高くなる反転方法です。
（先頭の集団と最後尾の集団の反転は減る境界が1なので注意です）

ここまでわかれば実装です。

主要な操作は以下です。
先頭から集団を3つ取り出して、1つにまとめてから追加しています。
先頭への操作が多くなるので`deque`を使いました。

```c++
        int val = 0;
        val += now.front(); now.pop_front();
        val += now.front(); now.pop_front();
        val += now.front(); now.pop_front();
        now.push_front(val);
```

`stack`でも解けます。
バグを減らすという観点からみると、不要な機能はつけない方がいいので`stack`を使うべきだったかもしれません。



以上です。ありがとうございました。
Windows TerminalとWSL2とVS Codeで快適なWindows開発環境を作ってみた備忘録

# 概要
昔から、WindowsおよびLinux双方に向けたネイティブモジュールの開発を行う仕事をしてきていたため、開発環境の準備には悩まされてきました。
この春、Windows Terminalが正式リリースされ、WSL2も出たことで改めて環境を整えた結果の備忘録になります。

# 開発しているもの、環境
元々C言語開発者で、WindowsおよびLinux双方で同じように動作をするネイティブモジュールの開発を行ってきました。
その昔はWindowsはVisual Studio、Linuxはサーバ環境で開発を行ってきていましたが
段々と開発環境を見直してきています。

## 5年ほど前の開発環境
| 項目|利用ツール/システムなど |
|:-----------------|------------------:|
|使用ターミナル|Poderosa|
|Linux仮想環境|VMWare|
|Linux開発エディタ|Vim| 
|Windows開発エディタ|Vim| 
|Windows開発支援ツール|Cygwin| 

当時思っていた課題をつらつらと
- Windows環境の準備が煩雑。Cygwinを入れる面倒さ、重さなど。
- Poderosaの最新版が有償化してしまった。よいダブターミナルがないか……
- Linuxの仮想環境を立ち上げておくためそこそこのスペックが必要
- Vim好きだが、統合開発環境も使えるようにしたいな……
  
## 2018年頃
| 項目|利用ツール/システムなど |
|:-----------------|------------------:|
|使用ターミナル|Poderosa|
|Linux仮想環境|VMWare|
|Linux開発エディタ|VS CODE| 
|Windows開発エディタ|VS CODE| 
|Windows開発支援ツール|Cygwin| 

開発エディタを模索していて、Atomを使っていたがVS CODEが良いという噂を聞いて開発環境刷新
エディタはVS CODEへ変更（操作はVimベースですが……）

また、Linux仮想環境をWSLへ置き換えを検討。ただし断念。
- 開発をガリガリしていたら固まったり落ちたりが目立った
- 理由は不明だがIOが遅かった
- Windowsとのファイル共有する際のパス構成に癖があった（気がする。うろ覚え）

結果、開発エディタはVS CODEへ移行するものの他は大きく変えなかった。

## 今回

| 項目|利用ツール/システムなど |
|:-----------------|------------------:|
|使用ターミナル|Windows Terminal|
|Linux仮想環境|WSL2|
|Linux開発エディタ|VS CODE| 
|Windows開発エディタ|VS CODE| 
|Windows開発支援ツール|?| 

### Windows Terminal操作感
さようならPoderosa、こんにちはWindows Terminal。
やっとタブ管理可能なターミナルソフトで良いものが出てきました。
目的が複数のサーバ管理とかなら機能が豊富なPoderosaでも良いかと思いますが、自PCでの開発目的ならこちらが良いかなと。

まだV1で設定画面がないなど使い勝手が悪い面もありますが、これからのアップデートに期待。

### WSL2操作感
まだいじっている最中ですが、動作も軽くLinuxとして問題なく操作できています。
パスの管理もさほど難しくなく、そのうちファイルエクスプローラーとの統合もされるということでより使いやすくなるのではないかと。

初回起動も早いし、十分Linux環境として使っていけそうです。
わざわざVMWareで環境を常時起動させておく必要がなくなりました。

VS CODEからも簡単にWSLをTerminalとして立ち上げられるので、Windows環境で簡単にLinux開発が行なえます。

### Cygwinの置き換えは可能？
よくわかっていませんが、現状難しいかなぁと。

Cygwinを入れている理由が、「Windows/Linuxそれぞれのネイティブモジュールを同じテストツールで同じようにテストしたい」であり
Windows環境でLinuxと同じコマンドなどを用いてテストができないものかと思いCygwinを入れています。

WSL2環境はあくまでLinuxのネイティブモジュールとして動作するので、Cygwinの変わりにはならないのかな？と
詳しく方法を調べてみたわけではないので、もうちょっと調査してみます。

まずはテストツールや手法を見直したほうが良いかも。

# 変更してみた感想サマリ

- Windows Terminalはこれからのデファクトとして使っていけそう。
- WSL2は起動速度、動作の安定性からも申し分なく使える。VS CODEとの連携も簡単。
- Cygwinの置き換え可否は不明。継続調査。

# 最後に
Windowsの開発環境がどんどん快適になってきて嬉しい限りです。
ただ、実はもう2年近く仕事で開発業務していないのですよね……
linux(ubuntu)でdockerコンテナをpullしてjupyterを起動するまでのメモ

#linux(ubuntu)でdockerコンテナをpullしてjupyterを起動するまでのメモ
設定によって微妙に変わる。dockerコマンドに```sudo```をつけているがrootで実行する場合は必要なし。たぶんlinux以外の環境でもほぼ同じコマンドで使用できるとおもう。

基本的には以下を参考にさせてもらう。ほぼコピペ。
https://qiita.com/y4m3/items/c2703d4e131e05084b7b
https://qiita.com/Brutus/items/a08c210b87ccb39379c2

##基本的な流れ
1. コンテナをpullしてくる。
2. コンテナを起動してコンテナ内のbash環境に入る。
3. コンテナ内のjupyter認証用ハッシュを生成。
4. 一旦コンテナから出る。
5. 生成したハッシュを使用してコンテナ＆jupyter起動。
6. ブラウザ等でlocalhostに入る。
7. ハッシュを入力。jupyterのトップ画面に入れたら成功。

##コマンド
1.コンテナをpullしてくる。

```
sudo docker pull jupyter/datascience-notebook
```
datascience-notebookは数GBあるのでしばし待つ。

2.コンテナを起動してコンテナ内のbash環境に入る。

```
sudo docker run -it --rm jupyter/datascience-notebook /bin/bash
```

-itオプションでコンテナに入る。 -rmオプションをつけるとコンテナから出たときにコンテナが削除される。イメージは残る。


3.コンテナ内のjupyter認証用ハッシュを生成。

```
python3 -c 'from notebook.auth import passwd;print(passwd())'
```
と打つと
> Enter password:
> Verify password:

と出るのでパスワードを入力する。
ハッシュが表示されるのでどこかにコピペして保存する。

4.一旦コンテナから出る。
Ctrl+Dなどでコンテナから出る。

5.生成したハッシュを使用してコンテナ＆jupyter起動。
コンテナ内でrootが必要な場合は```-u root```を付ける。rootの必要がなければ```-u root```は外す。

```
sudo docker run -d --name notebook -p 8888:8888 -u root jupyter/datascience-notebook start-notebook.sh --NotebookApp.password='sha1:生成したハッシュパスワード'
```

6.ブラウザ等でlocalhostに入る。

```
http://localhost:8888
```

7.ハッシュを入力。jupyterのトップ画面に入れたら成功。

##dockerの終了は

```
sudo docker stop コンテナID
```

##docker終了後、再度コンテナを開くとき
```
sudo docker start コンテナID
```
のあと、いつもどおりlocalhost:8888へアクセスすればOK。

##メモ
jupyterのportは通常は8888となっていると思われるがローカル環境でjupyterを起動するなど8888のportが使用済みだったりするとdockerのjupyterを起動できない。
portを設定しないでjupyterを起動する場合、自動で使用していないportを使ったりしてくれるけどfirewallでそのportが開放されてないなどの状況もあるので、
portの使用状況は確認してから使う。

以上。
AWS SAA資格取得 ~Code3兄弟~

##はじめに
構成管理サービスの
・Code Commit 
・Code Build
・Code Deploy
についてメモ

##Code Commit
AWSが提供するGitのホスティング、リモートリポジトリを提供するサービス
プライベートGitリポジトリを簡単にホストできる。
セキュアであり管理や設定の手間を省いてくれる。

##メリット
１：完全マネージメント型のため管理や設定が不要
２：コードを安全に保存可能
-不使用時、転送中に暗号化される。
３：バージョン管理プロジェクトをスケールする
-多数のファイルや、ブランチ、大容量のファイル、
長期間のバージョン履歴に対応してリポジトリを管理することが可能

##Code Build
CI(継続的インテグレーション)を行うためのサービス
アプリケーションのテストやコンパイル、デプロイなどを自動化してくれる

##メリット
１：アップデート、管理が不要
２：EC2 S3 CodePipeline Lambdaなど他AWSサービスと連携が容易
３：CodePipelineと連携すれば　テスト⇨リリースまで自動化できる

##Code Deploy
デプロイ自動化サービス！
指定した複数台のサーバーに同じデプロイ作業を実行することができる

##メリット
１：新機能を素早くリリースできる
２：デプロイ時のダウンタイムを回避できる
３：ミスが起こりやすい手動操作の必要がなくなる

##Code Pipeline
ソースコード管理、ソースコードビルド＆テスト、デプロイを行う3つのサービスを連携させるためのサービス
（ビルド、テスト、デプロイなど一連のプロセスをまとめたもの）

##Code Pipelineと連携可能なAWSサービス
S3:ソースコードの配置場所
Code Deploy：デプロイプロセスを処理することができる
Elastic Beanstalk：デプロイ対象にBeanstalkアプリケーションを選択することも可能

以上メモ
MariaDB に perl で接続した時の文字化け対策

次のページを参考にしました。
[MySQL から取得した文字が化けるのは DBD::MySQL のせいだった](http://blog.netandfield.com/shar/2018/06/mysql-dbdmysql.html)


接続後に次の SQL を実行すれば解決します。

```text
SET NAMES utf8
```

テストプログラム

```pl:maria_read.pl
#! /usr/bin/perl
#
#	maria_read.pl
#
#					Jun/21/2020
#
# -----------------------------------------------------------------------
use	strict;
use	warnings;
use	utf8;
use	Encode;
use	DBI;
#
# -----------------------------------------------------------------------
sub mysql_utf8_proc
{
	my $db = $_[0];
	my $sth = $db->prepare("SET NAMES utf8");
	$sth->execute;
}

# -----------------------------------------------------------------------
sub sql_show_proc
{
	my $db = $_[0];

	print "*** sql_show_proc ***\n";

	my $sth = $db->prepare("SELECT * FROM cities");
	$sth->execute;
	my $num_rows = $sth->rows;

	for (my $it=0; $it<$num_rows; $it++)
		{
		my @a = $sth->fetchrow_array;
		print "$a[0]\t$a[1]\t$a[2]\t$a[3] \n";
		}

	$sth->finish;
}
# -----------------------------------------------------------------------
print	(encode ('utf-8',"*** 開始 ***\n"));
#
my $constr='DBI:mysql:city:localhost';
my $user = 'scott';
my $passwd = 'tiger123';
#
my $dbi=DBI->connect($constr, $user, $passwd);
sql_show_proc($dbi);
#
#
mysql_utf8_proc($dbi);
sql_show_proc($dbi);
#
$dbi->disconnect;
#
print	(encode ('utf-8',"*** 終了 ***\n"));
# -----------------------------------------------------------------------
```

実行結果

```text
$ ./maria_read.pl 
*** 開始 ***
*** sql_show_proc ***
t3321	??	128763	1950-10-23 
t3322	??	3412300	2020-06-07 
t3323	??	753241	1950-01-02 
t3325	??	769358	1950-08-14 
t3326	??	865792	1950-09-12 
t3328	??	3298700	2020-06-07 
t3329	??	276951	1950-10-02 
*** sql_show_proc ***
t3321	岡山	128763	1950-10-23 
t3322	倉敷	3412300	2020-06-07 
t3323	津山	753241	1950-01-02 
t3325	笠岡	769358	1950-08-14 
t3326	井原	865792	1950-09-12 
t3328	高梁	3298700	2020-06-07 
t3329	新見	276951	1950-10-02 
*** 終了 ***
```

接続時に DBIのオプションを設定しても解決します。

```pl
my $dbi=DBI->connect($constr, $user, $passwd,{mysql_enable_utf8 => 1});
```
Bulma ExtensionsをAngularアプリケーションに組み込む方法

## [Bulma Extensions](https://bulma.io/extensions/)
CSSフレームワーク[Bulma](https://bulma.io/)の拡張機能で
TooltipやCalendar、Budge等Bulma本体でサポートしていないUI部品が提供されています
今回は[Bulma tooltip](https://github.com/CreativeBulma/bulma-tooltip/)を例に、このBulma Extensionsの部品をAngularアプリケーションに組み込む方法を紹介します

### インストール
#### Bulma本体
Bulma ExtensionsはBulma本体が必要ですのでインストールします

```
npm install --save bulma
```
#### Bulma Badge
```
npm install --save @creativebulma/bulma-tooltip
```

### CSSの適用
angular.jsonのstyles(CSSの定義箇所)にBulma本体とBulma ExtensionsのCSSファイルパスを記述します

```angular.json
"build": {
  ...
  "styles": [
    "src/styles.scss",
    "node_modules/bulma/css/bulma.min.css",　　←Bulma本体のCSS
    "node_modules/@creativebulma/bulma-tooltip/dist/bulma-tooltip.min.css"  ←Bulma TooltipのCSS
  ],
  ...
}
```

### HTMLに組み込む
CSSを適用しましたら、このようにHTMLに組み込めばToolTip部品が利用できます
data-tooltip部分にToolTipで表示する文言を記入します
```html
<button class="button is-primary" data-tooltip="Tooltip Text">Tooltip</button>
```

すると、ボタンにマウスオーバー時にToolTipが表示されるかと思います

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264566/c20dbda8-6359-dcc0-62e7-53b2acf1bb39.png)

### バインドさせる
AngularアプリなのでTooltipのメッセージを変数にバインドさせたい場合があると思いますが、その場合少し工夫が必要になります

例えばこんな感じ

```app.compoennt.ts
export class AppComponent {
  message = 'Bind Tooltip Text'
}
```

```app.compoennt.html
<button class="button is-primary" [data-tooltip]="message">Tooltip</button>
```

ところが、実際に動かしてみますと下のようなエラーが出るはずです

```
Uncaught Error: Template parse errors:
Can't bind to 'data-tooltip' since it isn't a known property of 'button'. ("

  <div class="column">
    <button class="button is-primary" [ERROR ->][data-tooltip]="message">Tooltip</button>
  </div>
```

ざっくり言うと「`<button>`タグに`[data-tooltip]`なんてプロパティは無いからバインドできないよ！」といったエラーです
このエラーを解決するには、HTML側でTooltipのメッセージをバインドしている箇所を`[attr.data-tooltip]="変数名"`の形式で記述する必要があります
詳しくは[こちら](https://www.atmarkit.co.jp/ait/articles/1702/27/news146.html)を参照ください

```app.compoennt.html
<button class="button is-primary" [attr.data-tooltip]="message">Tooltip</button>
```

これでTooltipのメッセージをバインドさせることができました

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264566/2a8a87be-92fe-7dcf-67f8-ba8c44f0db90.png)
MySQLのエラーログのフォーマット

MySQLのエラーログのフォーマットがググってもなかなか出なかったので、ここに記す。

MySQL 8.0

```
timestamp thread_id [priority] [err_code] [subsystem] message
```

MySQL (< 8.0)

```
timestamp thread_id [priority] message
```

[err_code] と [subsystem] がMySQL 8.0で追加されたそうです。


ソース：<https://dev.mysql.com/doc/refman/8.0/en/error-log-format.html>
Golangで自作パッケージに対して入力補完が効かない場合

Golangを試している時にハマったので、事象と対応方法のメモです。

# 環境
OS:mac
エディタ:Visual Studio Code(Goの拡張機能インストール済み）
Golang Version:go1.14.4 darwin/amd64

# 自作パッケージに対して入力補完が効かない？

下記のような自作パッケージを作成して、
別のソースから呼び出そうとしたところ、入力補完が効かない・・・

```golang/sample/testpackage
package testpackage

import "fmt"

func Test() {
	fmt.Println("test")
}
```

<img width="277" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/443578/aa53060f-be33-747c-837d-3db721a9495c.png">


# 解決策
go install {パッケージ名} コマンドを実行すると入力補完が効くようになりました。

```sh
go install sample/testpackage
```

<img width="521" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/443578/d1c43b4d-7cc5-6101-02d8-cda42f07970e.png">

このコマンドを実行することで、pkgフォルダ配下に静的ライブラリファイルが作成されて
入力補完が効くようになったようです。

普段IDEで楽しているから、無駄にハマってしまいました。

毎回installを実行するのも面倒だから
VSCodeのGoの拡張機能とかで設定できないかな。。。

#追記
たぶんVisual Studio Codeをアップデートした後（正確なタイミングは不明）
上記をやらなくても入力補完が効くようになりました。
一時的な問題だったかもしません。
docker-compose exec コマンド実行時に"No container found for ..."のエラー発生時の確認事項

docker-compose execコマンドを用いて、コンテナ内でコマンドを実行しようとした時に、
以下のようなエラーが起こる事がある。

```terminal
ERROR: No container found for app_1
```

まずは、コンテナが起動している事を確認しよう。

```terminal
$ docker-compose ps 

   Name                 Command               State                 Ports              
---------------------------------------------------------------------------------------
app          dockerize -timeout 60s -wa ...   Exit    0.0.0.0:50051->50051/tcp         
mysql_host   docker-entrypoint.sh mysqld      Up      0.0.0.0:3306->3306/tcp, 33060/tcp
```

docker-compose execコマンドは、起動しているコンテナの内部に入ってコマンドを実行する機能のため、StateがUpである必要がある。
SourceTreeでPushやPullしてもremote: Repository not found.が出る時の対処法

## 状況
GitHubへPushやPullしたいのに、下記のようなエラーメッセージが出てできない。

```
remote: Repository not found.
fatal: repository 'https://github.com/○○○/○○○.git/' not found.
```
## どうやって解決したか
結論から言うとSourceTreeに追加しているGitHubアカウントの
認証タイプがOAuthになっていた為に躓いていたようで、Basicへ変更しひとまず解決できた

### 具体的な方法
環境設定＞アカウント　から、使用しているGitHubアカウントをダブルクリック（もしくは「編集...」ボタンをクリック）
↓
認証タイプがOAuthになっていた為、Basicへ変更

以上です。
MariaDB の文字コードの確認方法

MariaDB のサーバーの文字コードの確認方法です。

```bash
sudo mysql -uroot
```

```text
>status
```

Ubuntu 20.04 の場合

```text
MariaDB [(none)]> status
--------------
mysql  Ver 15.1 Distrib 10.3.25-MariaDB, for debian-linux-gnu (x86_64) using readline 5.2

Connection id:		77
Current database:	
Current user:		root@localhost
SSL:			Not in use
Current pager:		stdout
Using outfile:		''
Using delimiter:	;
Server:			MariaDB
Server version:		10.3.25-MariaDB-0ubuntu0.20.04.1 Ubuntu 20.04
Protocol version:	10
Connection:		Localhost via UNIX socket
Server characterset:	utf8mb4
Db     characterset:	utf8mb4
Client characterset:	utf8mb4
Conn.  characterset:	utf8mb4
UNIX socket:		/var/run/mysqld/mysqld.sock
Uptime:			23 hours 13 min 50 sec

Threads: 7  Questions: 592  Slow queries: 0  Opens: 180  Flush tables: 1  Open tables: 32  Queries per second avg: 0.007
--------------

MariaDB [(none)]> 
```

Raspbian の場合

```text
MariaDB [(none)]> status
--------------
mysql  Ver 15.1 Distrib 10.3.22-MariaDB, for debian-linux-gnueabihf (armv8l) using readline 5.2

Connection id:		40
Current database:	
Current user:		root@localhost
SSL:			Not in use
Current pager:		stdout
Using outfile:		''
Using delimiter:	;
Server:			MariaDB
Server version:		10.3.22-MariaDB-0+deb10u1 Raspbian 10
Protocol version:	10
Connection:		Localhost via UNIX socket
Server characterset:	utf8mb4
Db     characterset:	utf8mb4
Client characterset:	utf8mb4
Conn.  characterset:	utf8mb4
UNIX socket:		/var/run/mysqld/mysqld.sock
Uptime:			17 hours 14 min 21 sec

Threads: 7  Questions: 72  Slow queries: 0  Opens: 33  Flush tables: 1  Open tables: 27  Queries per second avg: 0.001
--------------

MariaDB [(none)]> 
```
VSCodeでファイルを既存ウィンドウで開かないようにする設定

コマンドで `code <ファイル>` とかFinder (ｴｸｽﾌﾟﾛｰﾗ) からクリックしてファイルを開いたとき、
別プロジェクトのフォルダを開いているウィンドウに出てくると嫌だ！という人のための設定です。

```json:settings.json
{
  "window.openFilesInNewWindow": "off"
}
```

:sparkles:ありがたやぁ:sparkles:
Elixirでトリボナッチ数列の問題を解いてみた(制限時間10分)

# はじめに
- @keisuke_oyatu さんの[Rubyでトリボナッチ数列の問題を解いてみた(制限時間10分)](https://qiita.com/keisuke_oyatu/items/43c0100f885c2050b956)を拝見しまして、私はぜひ[Elixir](https://elixir-lang.org/)でやってみようとおもいました
- [Elixir](https://elixir-lang.org/)は`Elixir 1.10.3 (compiled with Erlang/OTP 23)`を使いました

## ハイライト

```elixir:lib/tribonacci.ex
defmodule Tribonacci do
  def number(n), do: do_number(n, {1, 3, 7})

  defp do_number(n, {n_3, _, _}) when n <= 0, do: n_3

  defp do_number(n, {n_3, n_2, n_1}) do
    do_number(n - 1, {n_2, n_1, n_3 + n_2 + n_1})
  end
end
```

# 0. インストールとプロジェクトの作成
- まずは[Elixir](https://elixir-lang.org/)をインストールしましょう
    - 手前味噌ですが、[インストール](https://qiita.com/torifukukaiou/items/d04d0273749c41eb50af#0-%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB) などを参考にしてください
- インストールができましたら以下のコマンドでプロジェクトを作ります

```console
$ mix new tribonacci
$ cd tribonacci
```

# 1. ソースコードを書く (その1)

```elixir:lib/tribonacci.ex
defmodule Tribonacci do
  @doc """
  Tribonacci number.

  ## Examples

      iex> Tribonacci.number(0)
      1
      iex> Tribonacci.number(1)
      3
      iex> Tribonacci.number(2)
      7
      iex> Tribonacci.number(3)
      11
      iex> Tribonacci.number(4)
      21

  """
  def number(0), do: 1
  def number(1), do: 3
  def number(2), do: 7
  def number(n), do: number(n - 3) + number(n - 2) + number(n - 1)
end
```

- `## Examples`のコメント部分は[Doctest](https://elixir-lang.org/getting-started/mix-otp/docs-tests-and-with.html#doctests)と呼ばれるものでテストができます

```console
$ mix test
```

- `mix new`したときに元からできている`hello/0`関数はこの記事では消していますが、そのまま残していてもかまいません
- `test/tribonacci_test.exs`に`hello/0`関数のテストがありますので、`hello/0`関数を消した場合には消すなり、気にしないことにするなりしてください

## 50番目(インデックス49)を求めてみましょう

```
$ iex -S mix

iex> Tribonacci.number(49)
```

- 私のパソコンでは計算に時間がかかって待ちきれませんでした
- `Ctl+C`を2回押して強制終了しましょう

# 2. ソースコードを書く (その2)

```elixir:lib/tribonacci.ex
defmodule Tribonacci do
  @doc """
  Tribonacci number.

  ## Examples

      iex> Tribonacci.number(0)
      1
      iex> Tribonacci.number(1)
      3
      iex> Tribonacci.number(2)
      7
      iex> Tribonacci.number(3)
      11
      iex> Tribonacci.number(4)
      21

  """
  def number(n), do: do_number(n, {1, 3, 7})

  defp do_number(n, {n_3, _, _}) when n <= 0, do: n_3

  defp do_number(n, {n_3, n_2, n_1}) do
    do_number(n - 1, {n_2, n_1, n_3 + n_2 + n_1})
  end
end
```

- テストがあるので修正が正しいことを確かめられます

```console
$ mix test
```

- [Doctest](https://elixir-lang.org/getting-started/mix-otp/docs-tests-and-with.html#doctests)の部分がパスしていることでしょう

## あらためて50番目(インデックス49)を求めてみましょう

```
$ iex -S mix

iex> Tribonacci.number(49)
17079382868243
```

:tada::tada::tada:

- `IEx`は `System.halt`で終わらせましょう


# Wrapping Up
- お好みの言語でトリボナッチ数列をお楽しみください
- **Enjoy!**
PEP 584 (Add Union Operators To dict) を読んだよメモ

先日、[PEP 584 (Add Union Operators To dict)](https://www.python.org/dev/peps/pep-0584/) が [Final になったというコミット](https://github.com/python/peps/pull/1440)を見かけました。
そこで、今回は PEP 584 を読んでみようと思います。

## 概要

* ふたつの辞書を結合するいい感じの方法がほしい
  * `d1.update(d2)` は d1 を書き換えてしまうため、一時変数を用意する場面があるし、式ではないのでパラメータにしていできない
  * `{**d1, **d2}` ってキモい
  * `collections.ChainMap` はマイナーな上に、 d1 を書き換える問題がある
  * `dict(d1, **d2)` はキーが文字列以外の場合にエラーになる
* 辞書の結合に `|` 演算子を使えるようにする
* Python 3.9 から利用できます

## アプローチ

`d1 | d2` でふたつの辞書を結合します。同じキーを持つ場合、右の辞書の内容で上書きするので、可換ではありません(新しい辞書のキーの順序も変わります)。

```python
>>> d = {'spam': 1, 'eggs': 2, 'cheese': 3}
>>> e = {'cheese': 'cheddar', 'aardvark': 'Ethel'}
>>> d | e
{'spam': 1, 'eggs': 2, 'cheese': 'cheddar', 'aardvark': 'Ethel'}
>>> e | d
{'aardvark': 'Ethel', 'spam': 1, 'eggs': 2, 'cheese': 3}
```

一緒に `|=` 演算子にも対応しました。

```python
>>> d |= e
>>> d
{'spam': 1, 'eggs': 2, 'cheese': 'cheddar', 'aardvark': 'Ethel'}
```

## 感想

* 違和感はあるのだけど、しばらくしたら慣れてくるはず。たぶん…
* `d = dict(d1); d.update(d2)` は何度も書いたことがあるので、嬉しさはわかる
* スッキリ書けるのはいいですね
Gitコマンドの英単語を覚える

初めてGitに触れたとき、「この英単語の意味ってなんだろな？」ということがよくあって（ただ英語が苦手なだけですが…）Gitコマンドの英単語帳みたいなのを作ってみよう！と思ってGitコマンドの英単語帳をまとめてみました:blush:

## config
「configure」＝ ～を環境設定する

```bash:例文
$git config --global user.name "hogename"
``` 

## init
「initialize」＝ ～を初期化する

```bash:例文
$git init
``` 

## clone
「clone」＝ ～をクローンとして増やす、～を複写する

```bash:例文
$git clone ［クローン先のアドレス］
``` 

編集中・・・
複数言語のリスト全部要素一致と部分要素一致の書き方

# 概要
リスト要素の全てがある条件に一致、またはどれか一つでも一致する場合を計算する事が多いが、都度書き方を調べているのでまとめた

## JavaScript
```javascript
// 全要素一致
const array = [1, 2, 3, 4, 5]
array.every(value => value < 10) // true

// 部分一致
array.some(value => value === 3)
```

## Swift
```javascript
// 全要素一致
let array = [1, 2, 3, 4, 5]
array.allSatisfy{ $0 < 10 }

// 部分一致
array.filter { $0 == 3 }.count > 0
```

## Kotlin
```javascript
// 全要素一致
val array = listOf(1, 2, 3, 4, 5)
array.all { it < 10 } // true

// 部分一致
array.any { it == 3 }
```

## PHP
```javascript
// 全要素一致
$array = [1, 2, 3, 4, 5]
$result = true
foreach($array as $value) {  // array_map でも可能
  if(!($value < 10)) {
    $result = false
  }
}

// 部分一致
array_filter($array, function($value) {
  return $value === 3
})
```
MVCアーキテクチャ

# MVCアーキテクチャ
・アプリケーションの構造をModel, View, Controllerの役割に分類し、それらを連携させたものをMVCアーキテクチャという。
・MVCアーキテクチャを実現するには、PDO、エンティティモデル、DAOモデル、テンプレートエンジンの４種の神器が必要

#なぜMVCアーキテクチャが採用されるのか。
・メンテナンスのしやすさや再利用のしやすさなど、アプリケーションの構造をよくするため。

## Model
データ処理の役割

## View
画面表示

## Controller
ModelとViewの制御
PEP 614 (Relaxing Grammar Restrictions On Decorators) を読んだよメモ

先日、[PEP 614 (Relaxing Grammar Restrictions On Decorators)](https://www.python.org/dev/peps/pep-0614/) が [Final になったというコミット](https://github.com/python/peps/pull/1437)を見かけました。
そこで、今回は PEP 614 を読んでみようと思います。

## 概要

* これまでデコレータに利用できるのは `dotted_name` と呼ばれる、`.` つきの名前のみだった
* そのため、配列アクセスや辞書アクセスといった「式」の類はデコレータには使えなかった

  ```python
  buttons = [QPushButton(f'Button {i}') for i in range(10)]

  @buttons[0].clicked.connect  # => NG
  def spam():
      ...
  ```
* 文法を拡張して、デコレータに「式」を受け付けるようにした
* Python 3.9 から利用できます。

## アプローチ

いままでの文法が

```python
decorator: '@' dotted_name [ '(' [arglist] ')' ] NEWLINE
```

だったのを

```python
decorator: '@' namedexpr_test NEWLINE
```

に変更しました。以上。

って、それだと分かりづらいですね。
`namedexpr_test` は Python の式(expression)を指す文法要素です。
式に該当するのは以下のものです ([6. 式 (expression) — Python 3.8.3 ドキュメント]( https://docs.python.org/ja/3/reference/expressions.html) より)。

* 6.1. 算術変換 (arithmetic conversion)
* 6.2. アトム、原子的要素 (atom)
* 6.2.1. 識別子 (identifier、または名前 (name))
* 6.2.2. リテラル
* 6.2.3. 丸括弧形式 (parenthesized form)
* 6.2.4. リスト、集合、辞書の表示
* 6.2.5. リスト表示
* 6.2.6. 集合表示
* 6.2.7. 辞書表示
* 6.2.8. ジェネレータ式
* 6.2.9. Yield 式
* 6.2.9.1. ジェネレータ-イテレータメソッド
* 6.2.9.2. 使用例
* 6.2.9.3. 非同期ジェネレータ関数 (asynchronous generator function)
* 6.2.9.4. 非同期ジェネレータイテレータメソッド
* 6.3. プライマリ
* 6.3.1. 属性参照
* 6.3.2. 添字表記 (subscription)
* 6.3.3. スライス表記 (slicing)
* 6.3.4. 呼び出し (call)
* 6.4. Await 式
* 6.5. べき乗演算 (power operator)
* 6.6. 単項算術演算とビット単位演算 (unary arithmetic and bitwise operation)
* 6.7. 二項算術演算 (binary arithmetic operation)
* 6.8. シフト演算 (shifting operation)
* 6.9. ビット単位演算の二項演算 (binary bitwise operation)
* 6.10. 比較
* 6.10.1. 値の比較
* 6.10.2. 所属検査演算
* 6.10.3. 同一性の比較
* 6.11. ブール演算 (boolean operation)
* 6.12. 代入式
* 6.13. 条件式 (Conditional Expressions)
* 6.14. ラムダ (lambda)
* 6.15. 式のリスト

いろいろありますね。これらがデコレータに利用できるようになったというわけです。
定義場所によっては使えないものもある(await とか)ことには注意してください。

## 例

デコレータに lambda 式を使ってみたり...

```python
>>> @lambda f: f
... def foo(): pass
...
```

三項演算子的な if else を使ってみたり...

```python
>>> x = lambda f: f
>>> y = lambda f: f
>>> @x if True else y
... def foo(): pass
...
```

もちろん、配列も使えます。

```python
>>> deco = [lambda f: f]
>>> @deco[0]
... def foo(): pass
...
```

## 感想

* いままで dotted_name で困っていなかったので、嬉しさがあまりピンとこない
* デコレータの配列や辞書で嬉しいことがあるのかも…?
* すごく気持ち悪いコードが書けてしまうので、容量用法には注意が必要です。

  ```python
  >>> @x := staticmethod  # 代入式 (3.9 より)
  ... def foo(): pass
  ...
  ```
Person.java　引数にVehicle型の値を受け取るbuyメソッドを新たに定義する。

class Person {
  private String firstName;
  private String middleName;
  private String lastName;
  private int age;
  private double height;
  private double weight;

  Person(String firstName, String lastName, int age, double height, double weight) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    this.height = height;
    this.weight = weight;
  }

  Person(String firstName, String middleName, String lastName, int age, double height, double weight) {
    this(firstName, lastName, age, height, weight);
    this.middleName = middleName;
  }
  
  public String fullName() {
    if (this.middleName == null) {
      return this.firstName + " " + this.lastName;
    } else {
      return this.firstName + " " + this.middleName + " " + this.lastName;
    }
  }

  public void printData() {
    System.out.println("名前は" + this.fullName() + "です");
    System.out.println("年齢は" + this.age + "歳です");
    System.out.println("身長は" + this.height + "mです");
    System.out.println("体重は" + this.weight + "kgです");
    System.out.println("BMIは" + Math.round(this.bmi()) + "です");
  }

  public double bmi() {
    return this.weight / this.height / this.height;
  }
  
  // 以下2つを一つのメソッドで書き換えてください
  public void buy(Vehicle vehicle){
    vehicle.setOwner(this);
  }
}
処理系依存のstatus='unknown'はデンジャー

## はじめに

f90ファイルでopen文を書く際に，これまではあまり深く考えずに`status='unknown'`を使っていたが，罠にハマったので記録しておく．結論としては`unknown`はできるだけ使わずに，statusは明示（`new`, `old`, `replace`）するべき．

2020/06/23 コメントを受けての追記：以下の「罠」は`unknown`+`stream`の組み合わせとしては仕様通りの振る舞いを示していると思われる．ただし，結論は変わらない．

## 罠

次のようなバイナリ形式のファイル出力を行う．ちなみに`form='unformatted',access='stream'`と`form='binary'`は同義であるが，後者はgfortranでコンパイルできない（[Fortran でのバイナリ (unformatted, binary) の扱いについてのメモ](http://naturesflyers.blogspot.com/2015/01/fortran-unformatted-binary.html)）．

```fortran:test.f90
program unknown_test
    use,intrinsic :: iso_fortran_env
    implicit none
    integer(int32) unit_no

    open(newunit=unit_no,file='my_name_is_unknown.dat',form='unformatted',access='stream',status='unknown')
    write(unit_no) 'my name is unknown.'
    write(unit_no) 1,2,3,4,5,6 !<-あとで増やす（本文参照）
    close(unit_no)

end program unknown_test
```

実行環境はWindows 10でWSL（Ubuntu）でGNUコンパイル

```shell
$ gfortran -v
...
gcc version 7.4.0 (Ubuntu 7.4.0-1ubuntu1~18.04.1)
$ gfortran test.f90 && ./a.out && ls -l my_name_is_unknown.dat
-rw-rw-rw- 1 hoge hoge 43 Jun 21 12:42 my_name_is_unknown.dat
```

平和．43バイトのmy_name_is_unknown.datファイルが出力される．続いて，test.f90で`!<-あとで増やす`としてマークしていた行を複製して数値データを増やしたmy_name_is_unknown.datを出力する．

```shell
$ gfortran test.f90 && ./a.out && ls -l my_name_is_unknown.dat
-rw-rw-rw- 1 hoge hoge 67 Jun 21 12:46 my_name_is_unknown.dat
```

まだ平和．ファイルサイズが67バイトに増加している．当然である．続いて，複製した行を削除して元の43バイトファイルが出力されるようにしてみる．

```shell
$ gfortran test.f90 && ./a.out && ls -l my_name_is_unknown.dat
-rw-rw-rw- 1 hoge hoge 67 Jun 21 12:47 my_name_is_unknown.dat
```

...ん？67バイト？......戦争である．

## どうしてこうなった

2020/06/23 コメントを受けての追記：ファイルがすでに存在する時点で`unknown`で同名ファイルを出力すると，レコード長を指定しない限り（`pos=***`なし）は頭から上書きされていき，`stream`はEOFを書き出さないため，前回の残り滓がファイル端に残ることになる．

以下，引用→[NAG Fortran コンパイラ 5.2 マニュアル](https://www.nag-j.co.jp/nagfor//np52_manual/np52_manual_10_7.html)

>書式なしの順アクセスファイルとは異なり、書式なしストリームファイルに対し ファイル終端より前の位置に書き込む場合にはファイルの切詰めは行われない 点に注意して下さい。（しかし書式付きストリームの場合にはこの切詰めが行わ れます。）

2020/06/23　追記ここまで．


正直分からない．いや，処理系依存の`unknown`が悪さをしていることは色々と試すと分かったのだが，どう悪いことをしているのかまでは分からない．

「hexdump for VSCode」（[バイナリデータを読むのに便利な VSCode の拡張機能「hexdump for VSCode」の紹介](https://tarukosu.hatenablog.com/entry/2018/07/01/094120)）を使って中身を見てみたが，どうやらバイナリデータが増える方向には`unknown`処理が上書きとして働き，減る方向には上書き処理がキャンセルされているっぽくて，中身が変わっていない．でもファイル時間は更新されているしな...分からん．

## ちなみに

- 上記テストでは中身が変わっていなかったが，同様にしてParaView（可視化用オープンソースプログラム）用にVTKファイルを作成したところ，最終形態（なぜかファイルサイズが変わらない版）をParaViewで開くとフリーズする
- `form='formatted'`つまりASCII形式で出力すると問題なく上書きされる

## 対処方法

冒頭に書いたように，処理系依存の`unknown`ではなく，statusは明示（`new`, `old`, `replace`）するべき．たとえば上記テストの場合は`replace`．
Ubuntuで5GHz帯アクセスポイントが作成できなかった話

# Ubuntuで5GHz帯アクセスポイントが作成できなかった話

## 要約
Ubuntuで無線LANルーターの代わりが出来ると聞いて試してみたら、5GHz帯が使用できなかった。原因はIntelチップセット用Linuxドライバiwlwifiの仕様。atherosドライバの一部ならいけるらしいが試せていない。

## 環境
+ OS: Ubuntu 20.04 LTS
+ ハードウェア: 小型PC。WiFiチップはIntel AC7265。インターフェイスはm.2 2230。

## 現象
+ Ubuntuだと[GUIからアクセスポイント作成可能](https://qastack.jp/ubuntu/180733/how-to-setup-an-access-point-mode-wi-fi-hotspot)ということで、手順に沿ってアクセスポイントを作成した。
+ 2.4GHz帯を指定すると問題なくアクセスポイントとして機能するのに、5GHz帯を指定すると機能しなかった。
+ もちろんハードウェアは2.4GHz, 5GHz両方に対応しているし、設定すれば5GHzのアクセスポイントに問題なく接続できる。

## 調査結果
[Intelのドライバは5GHzアクセスポイントモードが無い](https://askubuntu.com/questions/457702/ubuntu-14-04-hostapd-802-11a-iwlwifi-no-ap#answer-1207015)という記述があった。確かに[紹介されていたリンク](https://wireless.wiki.kernel.org/en/users/drivers/iwlwifi)には"AP mode on 2.4GHz (on devices driven by iwlmvm)"とあり5GHzと書かれていない。ということは、クライアントモードなら5GHz対応だがアクセスポイントモードには5GHz非対応であると考えられる。

[Intel AC7265のページ](https://ark.intel.com/content/www/jp/ja/ark/products/83635/intel-dual-band-wireless-ac-7265.html)自体には対応周波数しか書かれていないので、ハードウェアというよりドライバ側の仕様なのだろうか。

## 上記に至るまでに試したこと
### APモード対応確認
[上記ページにあったリンク先](https://askubuntu.com/questions/180733/how-to-setup-an-access-point-mode-wi-fi-hotspot/180734#180734)の記載に従って`iw list`でAPに対応可能か確認したら対応していた。2.4GHz帯と5GHz帯でAPモード対応に違いがあるかもと思って調べたが、両周波数に共通の項目だった。

### [create_ap](https://github.com/oblique/create_ap)の導入
+ 2.4GHz帯のチャンネル指定では動作して5GHz帯は不可という点は変わらず。
+ [国コードが関係しているという話](https://wiki.archlinux.jp/index.php/%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88#5Ghz_.E5.B8.AF.E3.81.A7_AP_.E3.83.A2.E3.83.BC.E3.83.89.E3.82.92.E8.B5.B7.E5.8B.95.E3.81.A7.E3.81.8D.E3.81.AA.E3.81.84)から、JPを指定すれば変わるかもしれないと思ったがそんなことはなかった。
+ チャンネルを複数指定できるかと思ったができない。
+ 2.4GHz, 5GHzでそれぞれ別々にアクセスポイントをたてられるかと思ったが、
チップセットによって同時に立てられるアクセスポイント数が[決まっている](https://github.com/oblique/create_ap/issues/163)とのこと。`iw list`の結果なのでcreate_apに限った話ではない。


## 試さなかったこと
### カーネル再構築
[no IR フラグについての回答](https://superuser.com/questions/809282/wifi-5ghz-ap-mode-what-does-no-ir-means-and-can-i-bypass-it)に[カーネルにパッチを当てると出来る](https://medium.com/@renaudcerrato/how-to-build-your-own-wireless-router-from-scratch-part-3-d54eecce157f)みたいなことを書いてあるのだけれど、Debianの話なので少なくともそのまま適用できるものではない。仮に可能だとしても、分析して適用してみようとまでは思えなかった。

### 無線LANチップの交換
外付けアンテナ(無線アダプタ)を買うぐらいなら小型WiFiルーターを買ったほうがいいわけで、あくまでも内蔵無線LANチップを交換する路線で。

[Qualcomm製チップ用ドライバには対応しているものがある](https://wiki.gentoo.org/wiki/Hostapd#Proper_use_of_the_5GHz_band)とのことだが、残念ながらそのチップが載ったカードはMini PCI Expressのみで、Amazonではm.2 2230対応のカードは常識的な価格では入手不可能。

あきらめずに調べていると[Bointec DGF109A](http://www.bointec.com/p4-products_detail.php?PKey=4013P4n9h_Z8Lq5f8YCy4d3YB2Z3Kqq9HJDLokggF80)というチップに[QCA6174A-5](https://wireless.wiki.kernel.org/en/users/drivers/ath10k)のチップが使われていて、さらに探すと[MOUSERというところ](https://www.mouser.jp/ProductDetail/AAEON-UP/RE-UPWFKITEX2TR?qs=PqoDHHvF648qKGsGMqAlMQ%3D%3D)で売っていた。

MOUSER自体はコンシューマー向けではないものの、それなりの会社っぽい(よくはわからない)。ただ、購入しようとすると購入サイトでエラーが頻発すること、4,118円+エクスプレス料金2,000円とそれなりに高額なこと、2.4GHz帯のアクセスポイントは必要なので5GHz帯のアクセスポイントと排他的にしか運用できない仕様であった場合、仮に5GHzで使えても無駄な投資になることなどから注文を断念した。

## 考察
5GHz帯はDFSなどの問題もありドライバも対応が難しいのかもしれない。

## 改訂履歴(表現の修正などは除く)
2020/5/30: 下書き
2020/6/20: 初版
次の水曜日の18:30をtimeパッケージで作る

## はじめに

Goの`timeパッケージ`で「次の水曜日の18:30」を作る方法を備忘録として残します。ここではエラー処理は省略します。
作ったコードは以下の通りです。

```go
// ロケーション情報を取得
loc, _ := time.LoadLocation("Asia/Tokyo")

// 指定ロケーション(Asia/Tokyo)の現在時刻を取得
now := time.Now().In(loc)

// 指定ロケーション(Asia/Tokyo)の18:30を作成
next := time.Date(now.Year(), now.Month(), now.Day(), 18, 30, 0, 0, loc)

// 水曜日まで進める
d := time.Wednesday - next.Weekday()
if d <= 0 {
	d += 7
}
next = next.AddDate(0, 0, int(d))

fmt.Println(next)
```

[playgroundで試してみる](https://play.golang.org/p/zQwKkxVbI-l)

## コードの説明

timeパッケージのドキュメントは[こちら](https://golang.org/pkg/time)にあります。詳細ドキュメントを参照してください。ここでは上記のコードの説明だけを簡単に記載します。

### ロケーション情報を取得

ローカルPC上や固定のサーバ上で動作させる場合local指定でもいいと思いますが、時差のある場所で動作させる場合に困るのでロケーションは`Asia/Tokyo`を指定しました。
`loc`は`timeパッケージ`の`type Location`です。

```go
loc, _ := time.LoadLocation("Asia/Tokyo")
```

仕様はこちら
[func LoadLocation](https://golang.org/pkg/time/#LoadLocation)

### 現在時刻を取得

上で作った`loc`を使って、現在時刻（"取得日"と表現します）を取得します。

```go
now := time.Now().In(loc)
```

ロケーション指定しない場合は次のように`func (Time)In`を使わずに書きます。

```go
now := time.Now()
```

仕様はこちら
[func Now](https://golang.org/pkg/time/#Now)
[func (Time)In](https://golang.org/pkg/time/#Time.In)

### 18:30を作成する

他にも方法はあると思いますが、`timeパッケージ`のexampleにならった方法にしました。（[Durationのexample](https://golang.org/pkg/time/#Time.Truncate)を参照）
`func Date`は年月日と時刻を与えて`type Time`を取得する関数です。
年月日には上で取得した現在時刻（取得した日付）を使うことで、現在時刻を"次の水曜日"を探す基準にしています。
`func Date`の引数の時刻部分は`int`なので使い勝手がいいです。

```go
next := time.Date(now.Year(), now.Month(), now.Day(), 18, 30, 0, 0, loc)
```

仕様はこちら
[func Date](https://golang.org/pkg/time/#Date)

### 次の水曜日まで進める

曜日は`timeパッケージ`の`type Weekday`で`iota`を使ってSunday=0としてSaturday=6まで連番で定義されているので、水曜日と"取得日"の曜日の差分を使って次の水曜日に進めます。（この方法は@tenntennさんに教えてもらいました）
"取得日"の曜日は`func (Time)Weekday`で取得します。
差分d==0の場合は該当曜日が"取得日"と同じことを表します。"取得日"が木曜日など該当曜日=水曜日よりも後の場合はd<0となるため、d<=0の場合は+7日して次週の日程とします。

```go
d := time.Wednesday - next.Weekday()
if d <= 0 {
	d += 7
}
```

日付を進めるためには`func (Time)AddDate`を使います。この関数はyear, month, dayを引数に取り、指定されただけ日付を進めます。1日ずつ進めるには第三引数day=1を指定します。

```go
next = next.AddDate(0, 0, int(d))
```
仕様はこちら
[func (Time)Weekday](https://golang.org/pkg/time/#Time.Weekday)
[func (Time)AddDate](https://golang.org/pkg/time/#Time.AddDate)
[type Weekday](https://golang.org/pkg/time/#Weekday)
構造体とクラスの違いについてのメモ

Swift初心者が構造体とクラスについて、理解できた事をメモしました。間違えていたら、ご指摘ください。


#構造体とクラスの違い

構造体とクラスはとてもよく似ていて分からなかったのですが、調べていくと結構違いがありました。

###①継承

継承する事で他のオブジェクトの機能をほぼ引き継ぎ、使用することができます。


　　クラス・・・他のクラスを継承できる

　　構造体・・・他の構造体を継承できない




```swift

class a {
    var b : Int
    init() {
        b = 10
    }
}

struct c {
    var d : Int
    init() {
        d = 10
    }
}

//クラスaを継承
//但し、親クラスのイニシャライザの継承は、基本的にはしないようです
class z : a {
    override init() {
    }
}

//構造体ｃを継承、エラー
struct q : c {     
    override init(){        
    }
}
```

###②型

参照型か値型かによって、インスタンス化する際に定数・変数のどちらを使うかで、格納されているプロパティを書き換えできたり、できなかったりします。

　　クラス・・・参照型　　変数・定数どちらでも書き換え可能

　　構造体・・・値型　　　変数のみ書き換え可能

構造体のプロパティ定義で定数を使うと、あとで変えることができません。

```swift

//クラスの場合
class a {
    var b : Int
    init() {
        b = 10
    }
}
//インスタンス化
let e = a()

//１０が出力される
print(e.b)

//２０が出力される
e.b = 20
print(e.b)


//構造体の場合
struct c {
    var d : Int
    init() {
        d = 10
    }
}
//インスタンス化　ここをvarに変えれば下記のエラーは出ないです
let f = c()

//１０が出力される
print(f.d)

//ここでエラーが出ます
f.d = 20
print(f.d)


```


###③イニシャライズ

　　クラス・・・イニシャライズで初期値を与える必要があります

　　構造体・・・イニシャライズで初期値を与えなくても動きます

```swift

//クラスの場合

class sampleString {
    var sString : String
//init() {   }で初期値を与える
    init() {
        sString = "sString"  //self.sString = "sString"
    }
}
let insString = "hello"
print(insString)


//構造体の場合

struct sampleStruct {
    var sStruct : String
}
//init() {   }はなくても動く
let insStruct = "hello"
print(insStruct)

```


###④使い分け

やはり継承できるかどうかが、大きな違いだと思います。これ以外の部分ではデータの容量で決めるとか、値型を使いたいとかそういう部分なのかなと思います。

　　クラスを使う・・・元のクラスから、その機能を継承して新しいクラスを作っていく場合

　　構造体を使う・・・継承を使わない前提で、一つのデータのまとまりを使いたい場合

###　　
因みに、プロトコルの採用はクラス、構造体のどちらでもできます。まあ、共通の規則を構造体全てに一から書いていくのも、合理的ではないですしね。ただ、クラスの継承も、プロトコルの採用も同じような場所に書くから、多少ややこしいです。最初は構造体でも継承できるのかなって思っていました。
PEP 618 (Add Optional Length-Checking To zip) を読んだよメモ

先日、[PEP 618 (Add Optional Length-Checking To zip)](https://www.python.org/dev/peps/pep-0618/) が [Accept されたというコミット](https://github.com/python/peps/pull/1435)を見かけました。
そこで、今回は PEP 618 を読んでみようと思います。

## 概要

* `zip()` 関数を使うとき、暗黙的に各要素の長さが同じであることを期待していることがある (ことが多い)
* 長さの異なる要素を誤って与えてしまうと、意図せずデータを欠損してしまうことになる

  ```python
  >>> list(zip([1,2,3], [4]))  # 2, 3 は失われてしまう
  [(1, 4)]
  ```
* 次のような関数があるときに、リストを渡すと意図通りに動くが、イテレータを渡すとうまく動かない (イテレータが先に進んでしまうので)。

  ```python
  def apply_calculations(items):
      transformed = transform(items)
      for i, t in zip(items, transformed):
          yield calculate(i, t)
  ```
* `zip()` にオプションを追加し、各要素が同じ長さであることをチェックする

## アプローチ

Python 3.10 に `zip()` 関数に `strict` というパラメータが追加されました。
`strict` に正の値を指定した場合、各要素の長さが等しくないときに `ValueError` が発生します。

```python
>>> for item in zip([1, 2, 3], [4], strict=True):
...     print(item)
...
(1, 4)
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
ValueError: zip() argument 2 is shorter than argument 1
```

`zip()` の第2引数が第1引数より短い、というエラーが出ています。
ちなみに、長さが一致しないというのを検知するまでループが回っている点には注意が必要です。

なお、デフォルトではいままでの挙動のままのままです(`strict=False` 相当、つまり長さが異なる場合はデータを捨てる)。

```python
>>> for item in zip([1, 2, 3], [4]):
...     print(item)
...
(1, 4)
>>>
```

## 感想

* 言われてみるとうっかりミスでデータ欠損を起こしそうな予感があるので、これは嬉しい
* でも、明示的に `strict=True` と指定しないといけないので、指定しわすれてトラブルになりそう
* イテレータの例はやらかしそうな気がした (すぐに気づくとは思うけど…)
* 3.10 が楽しみですね
[Python]スクレイピング初心者がJリーグの順位表をCSVファイルに保存するまで

#スクレイピングの復習
スクレイピングが気になってひとまず何かのデータを取りたかったので、以下のサイトを参考にしつつ、スクレイピングをしてみました。
https://www.atmarkit.co.jp/ait/articles/1910/18/news015_2.html
復習がてらに書くので、スクレイピングを初めてする方の参考になればと思います！
Pythonを使ってGoogleColabで書きました。
そのため、ローカルでの記述とは異なるところがあるかもしれません。

#スクレイピングの基礎
requestとBeautiful soupでスクレイピングを行いました。
requestでは、指定したウェブｋらファイルを取得して、Beautiful soupで取得したファイルから欲しい情報を抜き出します。
サイトにある通り、Jリーグの順位表を取得するプログラムを書いています。
また、追加でCSVに保存するところまで書いています。
以下に今回使ったコードを記します。

```ruby:qiita.rb
from bs4 import BeautifulSoup
from urllib import request

url = 'https://www.jleague.jp/standings/j1/'
response = request.urlopen(url)
content = response.read()
response.close()

charset = response.headers.get_content_charset()
html = content.decode(charset, 'ignore')
soup = BeautifulSoup(html)

table = soup.find_all('tr')

standing = []
for row in table:
    tmp = []
    for item in row.find_all('td'):
        if item.a:
            tmp.append(item.text[0:len(item.text) // 2])
        else:
            tmp.append(item.text)
    del tmp[0]
    del tmp[-1]
    standing.append(tmp)

for item in standing:
    print(item)

import pandas as pd
from google.colab import files 
del standing[0]
df = pd.DataFrame(standing,columns = ['順位', 'クラブ名', '勝点', '試合数', '勝', '分', '負', '得点', '失点', '得失点'])

from google.colab import drive

filename = 'j1league.csv'
path = '/content/drive/My Drive/' + filename

with open(path, 'w', encoding = 'utf-8-sig') as f:
  df.to_csv(f,index=False)
```

途中細かく確認しながら実装したので、間にprint()を挟んでいましたが、ここでは、一気にファイルに保存するところまで実装しています。
ON/OFFスイッチ～React HPより～

[ReactのHP](https://ja.reactjs.org/)では，チュートリアルなど様様な情報を提供しています．
その中で，メインコンセプトとして，「イベント処理」というページでON/OFFスイッチを作っているのですが，僕の頭では見ても書いてもよくわからなかったので，登場するコードについてまとめてみます．

#最初に
このページのわからないことを，どうやって調べたらいいかわからないので助けてください．

# 完成形
HPに書いてある以下のコードを書くと，クリックするONとOFFの文字で行き来するボタンが表示される時計が作れます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634450/8ba32ea4-f8fd-f39e-a88d-2b47f9c64434.png)

~~~jsx
class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);
~~~

# わからないこと
とりあえずわからないコードは，`is ToggleOn: true`，`bind`，`!state.isToggleOn`，`{this.state.isToggleOn ? 'ON' : 'OFF'}`
調べ方が悪いのかbind以外，解説が全然出てこない(笑)

なので，以下に書いてあることは根拠がなく，すべて私の今の理解ですので，何かヒントや参考になるページ，修正があればコメントを頂きたいです．
よろしくお願いいたします．


## 私の理解
~~~jsx
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    this.handleClick = this.handleClick.bind(this);
  }
~~~
ここでは初期値を設定してますね．
最初はisToggleOnはtrueです

~~~jsx
render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
~~~
ここでは，ボタンを設定していますね．
trueだと「ON」，falseだと「OFF」ってことですかね．

~~~jsx
 handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }
~~~

handleClickメソッドを定義していますね．
stateの内容を変更しています．
このメソッドにおけるisToggleOnは，その前の時点におけるstateのisToggleOnの真偽値を！で変更しているのかな？？
#参考
[React HP](https://ja.reactjs.org/)