OmniAICreator/Qiita-1.07M huggingface dataset:
HTML/CSSで作成したポートフォリオをGitHubで公開する

## はじめに
プログラミングスクールでポートフォリオサイトを公開する方法を教えてもらいましたが、忘れないようにするために今回記事を書きました。

## 手順１　リポジトリを作成する
コードを公開するためには、GitHubに「リポジトリ」を作成しなければなりません。
まずは、GitHubにアクセスします。
https://github.com/

次に、ログインまで終わらせたら左上にあるNewボタンを押します。
![スクリーンショット 2021-06-08 21.37.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1621520/0d3eb36e-dbbe-4915-56d5-b2537d45b7da.png)

リポジトリ名を入力して、「Create repository」ボタンを押します。
※リポジトリ名は「小文字の英数字」と「-」で構成するのをお勧めします。
リポジトリには、Public（公開）とPrivate（非公開）の２種類あります。
今回作成したポートフォリオサイトは全体に公開したいので、Publicにしました。
![スクリーンショット 2021-06-08 21.43.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1621520/e2646ba8-564f-fedc-3737-d3e34aae1615.png)

これでリポジトリの作成は完了です。
完了した後の画面は後ほど使用するので、開いたままにしておきます。

##　手順２　Git管理する

次に公開したいコードをGit管理します。
公開したいコードが置いてあるフォルダまで移動します。
以下のコマンドを順番に実行します。

```
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin 「gitHubのリポジトリのURL」
git push origin main
```

コマンドが無事に実行されると、公開されています。

## 手順３　GitHub Pagesを利用してHTMLを公開

GitHubのリポジトリページの上部右側にあるSettingsボタンを押します。
![スクリーンショット 2021-06-08 22.10.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1621520/4051c999-ab8e-d042-200b-76a7949dfb25.png)

左側のメニューに、Pagesがあるので、そちらへ移動します。
![スクリーンショット 2021-06-08 22.16.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1621520/f20f2c44-c562-bf9e-b616-85db902e8e4d.png)

Branchにmainを選択して、Saveボタンを押します。
![スクリーンショット 2021-06-08 22.18.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1621520/ae40f2a5-8d26-b051-53ff-d0f7e30031e5.png)

Saveボタンを押すとリンクが表示されます。
このリンクを確認していただくと、公開されたポートフォリオが見ることができます。

## その他

### ポートフォリオが表示されない時は

公開したいHTMLのファイル名が「index.html」になっていることを確認してください。
他のファイル名になっていると、表示されません。

### HTMLを修正した場合

以下のコマンドを実行します。

```
git add .
git commit -m "修正内容"
git push origin main
```

###Git管理をやり直したい場合
Git管理しているフォルダ内に移動して、以下のコマンドを実行してください。

```
rm -rf .git
```
Herokuにデプロイするお作法

##本記事について
・Railsのアプリをデプロイする人向けの記事です。（他の言語でも可）
・実際にデプロイするときに詰まったことを含めて書きたいと思います。

##前提
・herokuのアカウントを持っている。
・herokuをローカルまたはCloud9等にインストールしている。
・Railsのプロジェクトがある。（完成してなくても良い）
・MySQLを使用している。

##手順
####１.herokuにログイン

```
$ heroku login
```

####2.作成したRailsプロジェクトのディレクトリに移動し、herokuにアプリケーションを作成

```
$ heroku apps:create <アプリの名前>
```

・この時<アプリの名前>は一意の名前するようにしましょう。
・一意の名前とは世界でたった一つだけの名前のことです。

####３.herokuのリモートリポジトリを確認

```
$ git remote -v
```

・上記コマンドを実行すると以下のように出力される。

```
　　heroku  https://git.heroku.com/<アプリの名前>.git (fetch) 
　　heroku  https://git.heroku.com/<アプリの名前>.git (push) 
　　origin  git@github.com:shou1012/<アプリの名前>.git (fetch) 
　　origin  git@github.com:shou1012/<アプリの名前>.git (push) 
```
####4.リモートリポジトリherokuが作成されてることを確認

```
$ git remote
heroku
origin
(heroku、またはheroku originが出ていたらOK)
```

####5.DBをMySQLに変更する

・cleardbのigniteプランにする変更コマンド

```
$ heroku addons:create cleardb:ignite
```

＊エラー注意＊

```
以下のようなエラーはHerokuアカウントでクレジットカード情報の登録が必要です。
▸    Please verify your account to install this add-on plan (please enter a credit card) For more
▸    information, see https://devcenter.heroku.com/categories/billing Verify now at 
▸    https://heroku.com/verify 
「Igniteプラン」は無料のためこの設定だけで料金が発生することはないです。
```

・ClearDBのURL確認
以下のコマンドで、ClearDBのURLが確認できます。

```
$ heroku config

=== <アプリの名前> Config Vars
CLEARDB_DATABASE_URL: mysql://<ユーザー名>:<パスワード>@<ホスト名>/<データベース名>?reconnect=tru
```

・環境変数の設定をする。
上記コマンドで表示されたそれぞれの値を変数に設定する。

```
$ heroku config:add DB_NAME='<データベース名>’
$ heroku config:add DB_USERNAME='<ユーザー名>’
$ heroku config:add DB_PASSWORD='<パスワード>’
$ heroku config:add DB_HOSTNAME='<ホスト名>’
$ heroku config:add DB_PORT=’3306′
$ heroku config:add DATABASE_URL=’mysql2://<ユーザー名>:<パスワード>@<ホスト名>/<データベース名>?reconnect=true’
```

・設定内容を確認する。

```
$ heroku config

=== <アプリの名前> Config Vars
CLEARDB_DATABASE_URL: mysql://<ユーザー名>:<パスワード>@<ホスト名>/<データベース名>?reconnect=true
DATABASE_URL:         mysql2://<ユーザー名>:<パスワード>@<ホスト名>/<データベース名>?reconnect=true
DB_HOSTNAME:           <ホスト名>
DB_NAME:               <データベース名>
DB_PASSWORD:           <パスワード>DB_PORT:              
3306DB_USERNAME:       <ユーザー名>
```

・Railsのプロジェクトのために準備をする

```config/environments/production.rb
config.assets.compile = true
config.assets.initialize_on_precompile=false

rootへのルーティング作成はHerokuでアプリケーションにアクセスした時に最初に開くページをRails側で設定してくれという意味。
```

#####6.Herokuへデプロイ

・ローカルリポジトリをherokuへpush

```
$ git push heroku master
```

・herokuのDBのmigrate

```
$ heroku rake db:migrate
```

・アプリケーションを開く

```
$ heroku open
```

引用
>https://mabeblog.com/heroku-rails-mysql
docker build時に複数のタグを付け、複数のタグを一度にpushする

## docker の build 時に複数のタグを付ける

```bash
BASE=xxx/yyy
TAG1=${BASE}:v2
TAG2=${BASE}:v2.1
TAG3=${BASE}:latest

# -t を複数追加します
docker build . -t ${TAG1} -t ${TAG2} -t ${TAG3}
```

## docker の push 時に複数のタグを一度に送信する

```bash
BASE=xxx/yyy

# -a を付けます
# -a が無い場合、デフォルトタグの「latest」が自動で設定されます
docker push -a ${BASE}
```
YOLOv5で物体検出

# はじめに
YOLOv5を使って物体検出をしてみました。
[こちら](https://github.com/ultralytics/yolov5)を参考にしました（というか、そのまんま）。

# 1. 開発環境
* Windows 10 + WSL2 (Ubuntu20.04)
* Python 3.8.5
* Torch 1.5.1

# 2. インストール

クローンします。

``` 
git clone https://github.com/ultralytics/yolov5
```

環境を準備します。

```
python3 -m venv yolov5
cd yolov5
source ./bin/activate
```
ライブラリ等をインストールします。

まずは、PyTorch。

```
pip install torch===1.5.1 torchvision===0.6.1 -f https://download.pytorch.org/whl/torch_stable.html
```

requirements.txtからもろもろインストールします。

```
pip install -U -r requirements.txt
```

最後に、weightをダウンロードします。

```
./weights/download_weights.sh
```


# 3. つかってみる

以下を実行すると、イメージ画像 data/images/bus.jpg の物体検出が行われます。
その結果が、```runs/detect/exp*/```に保存されます。（*は検出を行った回数）

```
python detect.py --source data/images/bus.jpg
```

![bus.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618305/648d44f7-9c76-4421-2f5f-d476919843c3.jpeg)

近所の交差点で撮影した動画も物体検出してみました。

```
python detect.py --source town.mp4
```

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618305/62b151bc-75c5-affd-9925-5032d44f3810.png)

それなりに検出できているようです。


# 4. さいごに

非常にお手軽に物体検出ができます。学習方法も載っていて、こちらも簡単にできました。他のバージョンのyoloと比べて軽くて速い気がします。
【Vue × Firestore】自動生成されるドキュメントIDをフィールドに保存する


#自動生成されるドキュメントIDをフィールドに保存する

#実際のコード

```js

     saveBookmark() {
      const id = firebase
        .firestore()
        .collection("users")
        .doc(this.$route.params.uid)
        .collection("bookmarks")
        .doc().id;
      firebase
        .firestore()
        .collection("users") //「users」コレクションを参照
        .doc(this.$route.params.uid) //対象ページのユーザーを参照
        .collection("bookmarks") //「bookmarks」サブコレクションを参照
        .doc(id) //自動生成されたドキュメントIDを参照
        .set({
          postId: this.list.id, //「postId」に投稿データである「this.list.id」を代入。
          time: firebase.firestore.FieldValue.serverTimestamp()
        })
        .then(() => {
          this.$swal("ブックマークに追加しました。", {
            icon: "success"
          });
          this.isBookmarked = true;
        })
        .catch(() => {
          this.$swal("ブックマークを追加出来ません。", {
            icon: "error"
          });
        });
    },
```

以下のように変数（id）に対象ドキュメントまでのパスを記述して代入する。

```js
       const id = firebase
        .firestore()
        .collection("users")
        .doc(this.$route.params.uid)
        .collection("bookmarks")
        .doc().id;
```

あとはdoc()時に先ほど代入した「id」を入れて、set()を使って参照する。

※ここで注意。set()を使う理由としてadd()の場合は、IDが自動生成されてしまうので
指定できるset()を使わなければならない。

指定したidを使って、以下のように削除を行える。

```js 
firebase
        .firestore()
        .collection("users") //「users」コレクションを参照
        .doc(this.$route.params.uid) //対象ページのユーザーを参照
        .collection("bookmarks") //「bookmarks」サブコレクションを参照
        .doc(id) //自動生成されたドキュメントIDを参照
        .set({
          postId: this.list.id, //「postId」に投稿データである「this.list.id」を代入。
          time: firebase.firestore.FieldValue.serverTimestamp()
        })
        .then(() => {
          this.$swal("ブックマークに追加しました。", {
            icon: "success"
          });
          this.isBookmarked = true;
        })
        .catch(() => {
          this.$swal("ブックマークを追加出来ません。", {
            icon: "error"
          });
        });
    },
```
Power BIレポートの特定のページをPower Automateを使って共有するときの話

# Power Automateを使ってレポートを共有する場合

以下のサイトを参考にすることで、
特定のレポートすべてのページをpdfで共有することができる。

https://docs.microsoft.com/ja-jp/power-bi/collaborate-share/service-automate-power-bi-report-export

## 特定のページだけをメール添付しようと思うと、上のページだけではどうしても解決できなかったので、その解決策を記載しておく

###一言でいうと、PagenameにはReportSectionを、Bookmarkにはctidをいれるべし
対応関係のイメージはこれ

```
 [Pages pageName -1(ページ pageName -1)]　= ReportSection**********
 [Pages Bookmark Name] = ctid=***********
```
自分のケースでは、下のようにいれるとうまく取り出せました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/627617/f758c167-3e83-4aa7-7462-723dfc3da4f3.png)


## 該当の箇所
どうやっても↓の方法では、「そんなページはない」と言われてしまうので、上のように読み替えてそれぞれいれるとうまくいきました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/627617/b7d0347d-7daf-1082-8012-ace4b486cbc5.png)
Laravel詳細画面作成

#詳細画面作成作った。

```
//コントローラー
	public function detail($id){
　　　　　//データベースから特定のIDを探してくる
		$posts = Post::find($id); 
		
		return view('posts.details', compact('posts'));
　　　　　//変数postsをdetails.blade.phpに送る
	}
```

```
//details.blade.php
 <a href="{{ route('posts.detail', ['id'=>$posts->id]) }}">応募する</a>
```

コントローラーから受け取った$posts変数の中にあるidをさらにweb.phpに送るため新しくid変数を作って代入。


```
//web.php
Route::get('/posts/details/{id}', 'PostController@detail')->name('posts.detail');
```
idを受けっとて{id}の中に入る。

流れは理解した。
初心者向けGitの用語やコマンドをまとめてみた

# Gitの用語とコマンドまとめ
エンジニア転職に向けて勉強を開始したばかりですが、早速Gitの理解につまずきました。
自分のアウトプットと備忘録の為に、調べた内容をまとめました。
故に超初心者向けとなっております。
## Gitとは何か
###### ファイルのバージョンを管理するツール
いつ、誰が、どのファイルを、どのように変更したかのか、という履歴を記録できる。
一つのシステムに対して一つの**リポジトリ**という入れ物を作って、その中で作業をすることによって複数人で同時にシステムの開発をしていける。
###### Gitが用意したサーバーでファイルを共有する
複数人で共同開発する場合、このサーバーに対してファイルをアップロードやダウンロードすることでファイルの共有を行う。
このとき、サーバー側を**リモート**と予備、個人の作業用端末を**ローカル**と呼ぶ。
###### GitHubでサーバーの中身を確認できる
GitHubというツールを使うことで、サーバーの中身をウェブブラウザ上で見ることがGitとは別物なので混同しないように注意。必ずしもGitHubを使う必要はない。
## Gitの基本用語
| 用語 | 意味 |
|:---|:--:|
|リポジトリ(Repository)|更新の履歴を管理場所場所|
|リモートリポジトリ(remote repository)|サーバーにあるリポジトリ|
|ローカルリポジトリ(local repository)|個人のPCにあるリポジトリ|
|ステージング(staging)|ファイルがGitの管理下にある状態(git Statusで緑色の状態)|
|モディファイド(modified)|git statusで表示される修正済みのファイル|
|コミット(commit)|編集したファイルを保存すること|
|オリジン(origin)|リモートサーバーのこと|
|プッシュ(push)|ローカルからリモートにファイルをアップロードすること|
|プル(pull)|リモートにある最新のリポジトリ情報をダウンロードすること|
|マスター(master)|正規の変更履歴|
|ブランチ(branch)|gitの変更履歴を分岐機能|
|マージ(merge)|作業中のブランチに別のブランチを合流すること|
|プルリクエスト|GitHub上でブランチのマージを依頼することができる|
|フェッチ(fetch)|リモートの最新情報をダウンロードすること|
|リベース(rebase)|異なるブランチの変更を反映させること。変更履歴が片方に集約される|
|コンフリクト(CONFLICT)|同じブランチの同じ行を変更した場合に発生するエラー|
## Gitのコマンド
|コマンド|実行される操作|
|:---|:---:|
|git clone "リポジトリURL"|新規でリモートリポジトリからローカルリポジトリを作成する|
|git status|gitの状態を見る|
|git add "ファイル名"|ファイルをgitの管理下に置く(ステージング)|
|git commit -m|gitに保存を行う。コミットメッセージを付ける|
|git log|何時何分に誰がコミットしたかの記録をみる|
|git Push origin|リモートにアップロードする|
|git pull origin|リモートのリポジトリ情報をダウンロードしてマージする|
|git checkout -b "作成するブランチ名" origin/master |新しいブランチを切るコマンド|
|git checkout "ブランチ名" |作業するブランチを切り替えるコマンド|
|git branch|ブランチの一覧をみるコマンド。緑色が現在のブランチ|
|git branch -a|リモート側も含めた全てのブランチを見る|
|git merge "mergeしたいブランチ名"|指定したブランチを現在の作業ブランチに合流させるためのコマンド|
|:wq|viエディタに入力することでフェッチしたブランチをマージする|
|git fetch origin|リモートの最新情報をダウンロードする|
|git rebase "A" "B"|AのブランチにBのブランチを合流する|
|git push -f|リモートを無視して強引にプッシュする|
|git reset --hard HEAD|コミットする前の変更をリセットする|
|git stash|コミットしていない内容を全部消す|
|git stash pop | git stashコマンドで消した内容を元に戻す|

###### 最後に
他にも色々ありそうですが、今理解できそうなものはこんなところです。
実際使って慣れるしかないと思いますが、個人の開発であってもバージョンを管理することで
過去のデータを残すことができるのはとても便利だと思いました。
また今後エンジニアとしてやっていくにも操作方法はコマンドに慣れた方がいいと思いました。
connection pooling とは

## 勉強前イメージ

DBに接続する時に、コネクションをつなげたまま次に使用する・・・ってイメージ？

## 調査

### connection pooling とは

DBに接続する際に、コネクションを一定数保持しておいて
そのコネクションを維持し続けて使い回す手法。
接続や切断の処理の際は一定の負荷がかかるので、
頻繁にアクセスされるシステムはオーバーヘッドの省略することができる。

## 勉強後イメージ

今日はめっちゃ短い・・・・
しかもそのままの認識だった。。。

## 参考

- [コネクションプーリング 【connection pooling】](https://e-words.jp/w/%E3%82%B3%E3%83%8D%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%97%E3%83%BC%E3%83%AA%E3%83%B3%E3%82%B0.html)
Alpine.js と TailwindCSS を利用して、低コストでリアクティブな開発環境を構築する

ペライチのLPや個人のホームページなど、さっと作りたい時に使えるかもと思い、実際に環境構築しました。

### [Alpine.js](https://github.com/alpinejs/alpine) とは

軽量なJSのリアクティブフレームワークです。
Vue に近いディレクティブを持ち、出し分けや繰り返しなどを手軽に実現することが可能です。
CDN を用いて、簡単に利用ができるため、さっと試したり、環境構築ができるのが良さそうです。

### 導入

CDN で Alpine.js を読み込む場合、htmlファイルのみで書けます。

```html:index.html
<!DOCTYPE html>
<html>

<head>
  <title>Hello, Alpine.js</title>
  <!-- Alpine.js の読み込み -->
  <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.js" defer></script>
</head>

<body>
  <div x-data="{ opened: false }" x-cloak>
    <button x-show="!opened" @click="opened = true">Open Dropdown</button>
    <button x-show="opened" @click="opened = false">Close Dropdown</button>
    <ul x-show="opened" @click.away="opened = false">
      <template x-for="item in items">
        <p x-text="item"></p>
      </template>
    </ul>
  </div>
  <style>
    [x-cloak] {
      display: none;
    }
  </style>
  <script>
    let items = ["element1", "element2", "element3"]
  </script>
</body>

</html>
```

`x-cloak` を付け、スタイルを設定することで、描画完了までは表示されないようになります。
button 要素がちらついて二つ表示される、などを防ぐ意図で書いてます。

![ボタンを押すと表示される](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166596/3f24c4d5-5d24-59da-a809-95358bf9fbae.gif)

簡単ですね。

### TailwindCSS と組み合わせてアニメーションをつける

さっと実現できそうだったので、TailwindCSS を組み合わせて利用することを考えます。
TailwindCSS の内容を css に吐き出して利用します。
npx コマンドで可能です。

```
npx tailwindcss-cli@latest build -o tailwind.css
```

index.html を修正します。
`x-transition` を利用することで、アニメーションを実現できます。

```html:index.html
<!DOCTYPE html>
<html>

<head>
  <title>Hello, Alpine.js</title>
  <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.js" defer></script>
  <link href="./tailwind.css" rel="stylesheet">
</head>

<body>
  <div x-data="{ opened: false }" x-cloak>
    <button x-show="!opened" @click="opened = true">Open Dropdown</button>
    <button x-show="opened" @click="opened = false">Close Dropdown</button>
    <ul x-show="opened" @click.away="opened = false" x-transition:enter="transition duration-300"
      x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
      x-transition:leave="transition duration-300" x-transition:leave-start="opacity-100"
      x-transition:leave-end="opacity-0">
      <template x-for="item in items">
        <p x-text="item"></p>
      </template>
    </ul>
  </div>
  <style>
    [x-cloak] {
      display: none;
    }
  </style>
  <script>
    let items = ["element1", "element2", "element3"]
  </script>
</body>

</html>
```

![アニメーションによる表示](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166596/8465fa2a-1f71-5184-bc39-6b7781ac9a04.gif)

クラスを付与するだけで、アニメーションを実現できました。

### おまけ

VSCode で Alpine.js を利用する場合、[alpine-js-intellisense](https://marketplace.visualstudio.com/items?itemName=adrianwilczynski.alpine-js-intellisense) の拡張機能を利用することで、ディレクティブが補完されるようになり、便利です。

npxは使いましたが、package管理の必要がほぼなく、簡単にリアクティブを実現できるのは良いなと思いました。
Alpine.js、こういった手軽さとVue　と似た書きやすさを感じました。今後もウォッチしていきたいです。
実際にこれで自分のブログを作ってみようかなと思います。
エクセルファイルから基準となる文字のセルを見つけてデータを読み込む

we shall find 'uko' and 'kare-' in a excel file.
because it's my life.

```python:python
import pandas as pd
import numpy as np

DATA_OFFSET_COL = 1
DATA_OFFSET_ROW = 2
INTERVAL = 11
UNCOL = 9
MAX_EVENT_NUM = 9
MAX__NUM_SEQUENCE = 5

df = pd.read_excel('pd_debug.xlsx')
okng = df.iloc[:,UNCOL]
event = df.iloc[:,UNCOL+DATA_OFFSET_COL]
data = df.iloc[:,UNCOL+DATA_OFFSET_COL+1]

ok_row_list = okng[(okng=='uko') | (okng=='kare-')].index

for i, j in enumerate(ok_row_list):
    event_list = []
    for eve in range(MAX_EVENT_NUM):
        event_index = DATA_OFFSET_ROW+j+eve
        if event_index >= len(event):
            break            
        event_list.append(event[event_index])

    if i==0:
        s = pd.Series(event_list)
    else:
        s = pd.concat([s, pd.Series(event_list)], axis=1) 
s.columns=np.arange(MAX__NUM_SEQUENCE)

print(s)
```
x86マシンでARM用dockerコンテナを実行する方法

通常、docker上で動作するコンテナはホストのCPUアーキテクチャと一致する必要がある。
例えばx86用コンテナはx86マシンでしか動かないし、ARM用コンテナはARMマシンでしか動かない。

しかし、x86上でARMコンテナをビルドしたい場合もでてくる。
そこでQEMUというCPUエミュレータを使用すると異なるCPUアーキのコンテナを動作させることができる。

# QEMUの準備

以下のようにQEMUをインストールして、設定をおこなう。

```sh
sudo apt-get install qemu binfmt-support qemu-user-static
docker run --rm --privileged multiarch/qemu-user-static --reset -p yes -c yes
```

# Dockerへの設定
コンテナ内に`/usr/bin/qemu-aarch64-static`を配置することでARMコンテナをx86で実行することができる。
以下の二通りの実現方法があるので、目的に合わせて使用する。

## 1. docker runで使用する場合

`-v`オプションを使用して`qemu-aarch64-static`をコンテナ内にマッピングする。

```sh
docker run -it --rm -v /usr/bin/qemu-aarch64-static:/usr/bin/qemu-aarch64-static image_name
```

## 2. Dockerfileで使用する場合

事前に`qemu-aarch64-static`をカレントディレクトリ(Dockerfileと同じ場所)にcopyしておく。

```sh
cp /usr/bin/qemu-aarch64-static .
```

Dockerfile内で`COPY`コマンドでcopyする。注意点としては`RUN`コマンドよりも前に`COPY`が実行されるようにすること。

```dockerfile
COPY ./qemu-aarch64-static /usr/bin/qemu-aarch64-static

# RUN コマンドの前にCOPYする
RUN command_hogehoge
```

# 注意点
- CPUエミュレータを使ってARMバイナリを随時x86に翻訳しているため、プロジェクトのビルドなどを実行するととても重くなるため注意
- あくまでもapt等でパッケージをインストールするだけという利用法が無難

# 参考

https://github.com/NVIDIA/nvidia-docker/wiki/NVIDIA-Container-Runtime-on-Jetson
Power Platformの基本のメモ

# Microsoft Power Platform の基本
Microsoft Learnを進めててのメモだよ。

https://docs.microsoft.com/ja-jp/learn/paths/power-plat-fundamentals/

## Microsoft Power Platformの概要

Power Platform は、3 つの重要なアクションをユーザーがデータ上で実行できるようするシステムで、ビジネスの促進を支援

 1. データからインサイトを得て、
 2. ユーザーが構築するアプリを介してインテリジェントな業務プロセスを推進 (Act) し
 3. ビジネスプロセスを自動化 (Automate)

- Power BIでは、持ってるデータを視覚化

- Power Appsでは、あらゆるデバイスで動作する Web およびモバイルのカスタム アプリを簡単に構築して展開

- Power Automateでは、繰り返し作業などを自動化

- コネクタを使って様々なサービスのデータをPower Platformで扱える


## データベースには Dataverse がおすすめらしい

Power Platformでよく使われるデータベースらしい。
ぶっちゃけ自分、そんな大規模なアプリ作ったことないんでぇ、Power AppsやPower Automateのデータベースとして、SharePointのListしか使ったことないんすよね。
なんでぇ、Dataverseとかよくわかんないんす。
なんかSharePoint Listに比べてできること多いっぽいし、いいっぽいっすよ？
Dataverse側で色々できるからアプリ側が楽になるみたいな？セキュリティもいいみたいな。
PL900では、旧名称のcommon data serviceという名前がまだ使われてるので混乱する。そのうち変わるかな？

## Power Apps

ローコードでアプリが作れちゃう。作れるアプリのタイプは以下の3種類

1. キャンパスアプリ
キャンパスに自由にコントロールを配置して、好きなデザインの画面を作れる。
Visual Studioで画面作る感覚に近い気がするけど、中身の作りとしては数式とかを設定していくのでそこは違う。

2. モデル駆動形アプリ
Microsoft Dataverseのデータから、見たいデータを選んでポチってやると、そのデータを見るための画面が作れる。
データの味方はグラフや数値など、決まったものから選択するので、キャンパスアプリのように自由にはいじれない。
勝手にレスポンシブな画面にしてくれるので、デバイスに応じて最適化する手間がない。

3. ポータル
外部に公開するためのポータルサイト作れるみたいやで。使ったことない。

## Power Automate
繰り返し作業とかを楽にしてくれるやつ。
繰り返し作業は自動化して、キミにしかできない作業の時間を増やしてライバルに差をつけろ！

作れるフローの種類は以下の3つ。
クラウドフローについては、さらにトリガーのされ方が異なる3つのフローに分けられる。

- クラウドフロー
  多分みんなが想像する自動化をやってくれるフロー。トリガーというフローが動くきっかけと、アクションというフローの動きを組み合わせてフローを作成していく。

 - 自動フロー<br>
   メールを受信したときとか、Sharepoitのリストが更新されたときとかなど、様々なトリガー（きっかけ）で動くフロー。
 - インスタンスフロー<br>
   自動フローが他のサービスの変化をきっかけに動くのに対して、こっちは人がボタンを押すことをトリガーに動くフロー。
   Power Appsのボタンを押したときとかに使う。
 - スケジュールフロー<br>
   名前の通り、決まった時間になったら動くフロー。1時間に1回動くとか、毎日8時に1回動くとか、2週間に1回17時に動くとか。
- デスクトップフロー
  Power Automate Desktop(PAD)というツールをローカルPCにインストールして、クラウド型ではできなかったPC操作を自動化することができる。RPAツールとも言える。
  別の会社が作っていたWinAutomationというツールを、Microsoftが買収してクラウド型のPower Automateと融合させたみたい。
  他システムやクラウドサービスと連携が難しかった会社のレガシーアプリケーションを人が操作するのと同じように動かすことができる。

- ビジネスプロセスフロー
  Power Appsのモデル駆動型アプリで、業務フローに沿って入力を進めていくときなどに使う。
  例えば、受注～出荷までのプロセスで、受注をトリガーに、在庫有無確認。在庫があったら出荷データを作成、在庫がなかったら取り寄せ伝票データ作成みたいなフローを作ることができる。

## Power BI
企業が持っているデータを視覚化して経営に役立てるためのサービス・ツール群。
これまでの販売実績から次の商品はどういうものにしようとか、離れていった顧客は○○という傾向があるからそこのサポートを厚くしようとか決めるときに役に立つ。

Power BIを構成する3つの要素。

- Power BI Desktop
Windowsにインストールしてレポートを作るツール。
Power BI サービスに比べて、多くのデータソースを利用でき、細かなレポートを作成することができる。
Power BI Desktopで作成したレポートは、他のメンバーと共有できない。共有するにはPower BI サービスにレポートを保存して、Power BI サービス側で共有する必要がある。

- Power BI サービス
ブラウザ上で利用するサービス。
Power BI Desktopに比べると、利用できるデータソースは限られ、レポート作成の機能は少ないけど、こっちでもレポート作れる。
ワークスペースで、ダッシュボードと呼ばれる見たいデータを集めた画面を作成する。見たいデータはタイルと呼ばれ、レポートや他のダッシュボードのグラフやデータをピン留めすることで配置できる。作ったダッシュボードは他のメンバーと共有できる。ワークスペース自体も共有して、みんなで作業できる。

- Power BI モバイル アプリ
上記で作られたレポートやダッシュボードをモバイル環境で閲覧することができる。iPhone、iPad、Android、Androidタブレット、Windows10用モバイルアプリがある。


# 公式ドキュメントもそれとなく読んでおくといいよ
https://docs.microsoft.com/ja-jp/power-platform/

https://docs.microsoft.com/ja-jp/powerapps/maker/data-platform/

https://docs.microsoft.com/ja-jp/powerapps/

https://docs.microsoft.com/ja-jp/power-automate/

https://docs.microsoft.com/ja-jp/power-bi/
人気のreset.css比較してみた（2021年6月時点）


reset.cssの選定時にいくつかピックアップしたものを紹介します.
これは, Next.jsのreset.css選定時に書いたドキュメントを記事にしたものです.
主に[npm](https://www.npmjs.com/) で検索し, Weekly Download数を参考にしながら選びました.

あくまでも **[2021年6月時点]**での比較であり, アップデートが入ることがあるので実際に使う前にドキュメントを確認するようにしてください.


# ピックアップするreset.css
1. [normalize.css](## normalize.css)
2. [sanitize.css](## sanitize.css)
3. [modern-normalize](## modern-normalize)
4. [styled-reset](## styled-reset)

以下, それぞれのreset.cssについて特徴と導入した際の懸念点をまとめていきます.

## normalize.css
https://github.com/necolas/normalize.css/

- 全てのブラウザのスタイルをリセットしつつ, 有用なデフォルトのスタイルを保持
- バグと一般的なブラウザの不一致を修正

## sanitize.css
https://github.com/csstools/sanitize.css

- normalize.cssをブラウザのスタイルのリセットに加え, ブラウザ表示の誤差を修正
- デフォルトのスタイルをより最適化
- Weekly Downloadsが多い
- ドキュメントが丁寧

**懸念点**

- Unpacked Sizeが49.2kBと重たい(modern-normalizeは9.82kB)
- LastPublishが9ヶ月前

## modern-normalize
https://github.com/sindresorhus/modern-normalize

- nomalize.cssをモダンブラウザ用に最適化したもの
- 軽量
- box-sizing: border-box; を採用

**懸念点**

- サポートのブラウザがnormalize.cssに比べて少ない
- 最新のChrome, Firefox, Safariに対応
- Edge, (Opera, IE)に非対応

## ress
https://github.com/filipelinhares/ress

- normalize.cssをカスタマイズしたもの
- box-sizing: border-box; の採用や全ての要素のpadding, marginをリセット等さまざまな特徴
- サポートのブラウザはnormalize.cssと同じ

**懸念点**

- Weekly Download数が少ない(normalize.cssの1/10くらい)
- githubのstar数, issue数がnormalize.cssに比べて少ない

## styled-reset
https://github.com/zacanger/styled-reset

- Reactの[styled-components](https://styled-components.com/)用のreset.css
- コンポーネントごとに適用できる

**懸念点**

- サポートのブラウザがドキュメントに書いていない
- プロジェクト全体に適用するならこれである必要はない

# 結論
- Weekly Download数, 対応ブラウザ数の多さ, ドキュメントの丁寧さからするとsanitize.cssがよい
- 軽量さを重視するのならnormalize.cssがよい. ただし, 対応ブラウザを考慮する必要あり.

# まとめ
いかがだったでしょうか？？（１回書いてみたかった）
調べて比較をしてみた感想としては, reset.cssは流行りとそうでないものの差が大きいように感じました. もちろん, ここで取り上げていないものもたくさんあります. 
ただ, 流行っているものはissueやpull requestも多く, 対応も早いようだったので流行りから選定するというのも一つの視点としてありなのかなと思います.
N + 1 問題　Eagerloadによる解決

#はじめに
SQLを触っていると必ず目に入るN+1問題。
なんとなくは分かっているが整理のためにもN+1問題について自分なりのメモを残しておく。

#N+1問題
N+1問題は端的に言うと、SQLがたくさん発行されてしまい動作が遅くなる問題のことですね。
もう少し詳しくいうと

・N件のデータ行を持つテーブルを読みだすのに1回
・別のテーブルから、先述のテーブルの各行に紐づくデータを（1件ずつ）読み出すのに計N回

なのでNが増えれば増えるほど処理が重くなってしまうんですね。

例を挙げますと、下記のようなBookモデルがあって、各Bookと1対1のAuthorモデルと繋げるリレーションメソッド authorが定義されていたとします。

```Book.モデル
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Book extends Model
{
    /**
     * この本を書いた著者を取得
     */
    public function author()
    {
        return $this->belongsTo('App\Author');
    }
}
```

次のように、全BookのAuthorの名前を取得する場合、次のように書くと N+1 問題にぶつかります。

```
$books = App\Book::all();

foreach ($books as $book) {
    echo $book->author->name;
}
```

このコードのSQLの中身は

```
SELECT * FROM books;
SELECT * FROM authors WHERE book_id = 1;
SELECT * FROM authors WHERE book_id = 2;
SELECT * FROM authors WHERE book_id = 3;
.
.
```

Book が全部で100 レコードあるとしたら、100+1で合計101ものクエリが発行されてしまう。
このうち大部分の SQL は book_id が違うだけなので無駄が多い。
処理も重くなってしまいますね。
これをLaravelではEagerLoad で削減できます。

`全Bookを取得し、authorをEagerLoadしておく`

```
$books = App\Book::with('author')->get();

foreach ($books as $book) {
    echo $book->author->name;
}
```

`$books = App\Book::with('author')->get()`の`with`の部分が**EagerLoad**です。

あらかじめauthorを行ったものを入れているわけですね！
処理はこのようにスッキリとなりました。

```with(author)を.用いた場合
SELECT * FROM books;
SELECT * FROM authors WHERE id IN (1, 2, 3, 4, 5, ...)
```

#いろいろなEagerLoad
さっき使ったwith。複数のリレーションに使用できる。

```複数のリレーションに.対するEagerLoad
$books = App\Book::with(['author', 'publisher'])->get();
```

↓リレーションで取得した先のモデルからさらに別のリレーションに繋げる場合に使う

```ネストした.EagerLoad
$books = App\Book::with('author.contacts')->get();
```


↓親のモデルを取得した後に、ある条件によって eagerload するかを決めたいときなど。
with の代わりに load を使う。

```遅延.EagerLoad
$books = App\Book::all();

if ($someCondition) {
    $books->load('author', 'publisher');
}
```


↓使用するリレーションにさらに制約をかける場合。
例では、postのtitleにfirst という言葉を含むという制約をかけた。
where だけでなく orderBy など他のクエリビルダも使える。

```User.モデル
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    /**
     * ユーザーの全ポストの取得
     */
    public function posts()
    {
        return $this->hasMany('App\Post');
    }

    /**
     * タイトルにfirstの文字が入るPostを取得する
     */
    public function postsInTitleFirst()
    {
        return $this->posts()->where('title', 'like', '%first%');
    }
}
```

```EagerLoadへの.制約
$user = App\User::with('postsInTitleFirst')->find(1);
$posts = $user->postsInTitleFirst;

foreach ($posts as $post) {
    echo $post->title;
}
```

#まとめ
投稿一覧とかなんらかの一覧を取得する時にはこのN+1問題が必ず発生すると思います。
LaravelではEagerLoadによってこれを防ぐことができるので、
特にリレーションメソッドを使う際には注意をする。

ま、要するにリレーションメソッドを使用したものを再度入れ込んでいきましょうってことですね！
Rails　データカラムの変更方法

```ruby
$ rails g migration change_data_[カラム名]_to_[テーブル名]
```

実行するとマイグレーションファイルが作成されるので

```ruby
def change
  change_column :テーブル名, :カラム名, :型
end
```

を記入

```ruby
rails db:migrate
```

で変更完了。
Sequel Proなどを使用して、視覚的に確認して、変更されていた。
Rust + sqlx + async_std でMSSQLに接続する

#きっかけ
RustからMSSQLに接続しようと思い、まずはこちらの記事通りの方法でtiberiusを使ってうまく実装することができました。

https://qiita.com/shushutochako/items/662bb88f7f3b3ca0083a

でも、どうせならMYSQLもPostgreSQLも同じクレートが使いたいと思い、調べてみると、sqlxというクレートがMSSQLにも対応ているようなので使ってみました。

https://github.com/launchbadge/sqlx

公式のドキュメントにもMSSQLのサンプルがほとんどなく、それなりに苦労したので記録を残そうと思います。

#環境
- Ubuntu-20.04 on WSL2
- rustc  1.54.0-nghtly(2021-05-28)
- sqlx 0.5.5
- async_std 1.9（tokioを選ばなかったことに特別な意味はありません。)


#サンプルコード
```toml:Cargo.toml
[package]
name = "sqlx-mssql"
version = "0.1.0"
edition = "2018"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
sqlx = { version = "0.5",default-features = true, features = [ "runtime-async-std-native-tls", "mssql"] }
async-std = {version = "1.9",features = [ "attributes"]}

```

```Rust:src/main.rs
use sqlx;
use async_std;

// DBのカラム名と型にあわせて構造体を用意します。
#[derive(sqlx::FromRow)]
struct  Data{
    id: i32,
    name:String,
}

#[async_std::main]
async fn main() -> Result<(), sqlx::Error> {
    // HOST_NAME,PORT,DBNAME,USER,PASSWORDは環境にあわせてください
    let opt = sqlx::mssql::MssqlConnectOptions::new()
        .host("HOST_NAME")
        .port(PORT)
        .database("DB_NAME")
        .username("USER")
        .password("PASSWORD");

    let pool = sqlx::MssqlPool::connect_with(opt).await?;
    let query="SELECT id, name from sample_table;"

    // いくつかやり方はあるようですが。
    let rows = sqlx::query_as::<_, Data>(query) 
        .fetch_all(&pool)
        .await?;

    for row in &rows {
        println!("ID:{}-NAME:{}", row.id, row.name);
    }
    Ok(())
}
```
#まとめ

Rust自体さわり始めたばかりで、まだまだ理解が浅い上に、表題の組み合わせでのサンプルはネット上に見つけることができず苦労しました。
MSSQLについてはtiberius、MYSQL等についてはDiesel、async-awaitについてはtokioが現時点では日本語での情報も多く、始めやすいと思いますが、あえてイバラの道を進みたい方の参考になれば幸いです。
MySQLのバージョンアップ(5.1.73 → 5.7.33)

### 環境

CentOS6
MySQL 5.1.73

### 前置き

CentOS6上でMySQLのバージョンを上げる対応を行いましたので備忘録として残します。
MySQLを5.1系から5.7系へ上げるには一度、5.6系へバージョンアップを行うことで、5.7系へバージョンアップすることができます。いきなり5.7系へのバージョンアップは不可能なので段階を踏みます。

## ダンプ

```sh
# バージョンアップ後にリストアするので
$ mysqldump -u root --all-databases --single-transaction > dump-data.sql
```

## まず5.6にあげる
```sh
$ mysql --version # 現在のバージョン確認
$ sudo -s # 権限昇格
$ service mysqld stop # サービスを落とす
$ yum remove mysql* # mysql関係のリポジトリをアンインストールします

# MySQL5.6をインストールします
$ wget http://dev.mysql.com/get/mysql-community-release-el6-5.noarch.rpm
$ yum -y install mysql-community-release-el6-5.noarch.rpm
$ yum-config-manager --disable mysql55-community
$ yum-config-manager --enable mysql56-community
$ yum -y install yum-utils
$ yum install mysql mysql-devel mysql-server mysql-utilities

$ service mysqld start # サービスを起動
$ mysql_upgrade -u root # バージョンアップでテーブルに非互換性が生まれた場合に修復してくれる
$ mysql --version # 5.6系になっている
```

## 5.7.33にあげる
```sh
$ service mysqld stop # サービスを落とす
$ yum remove mysql* # mysql関係のリポジトリをアンインストールします
$ rpm -e mysql-community-release-el6-5.noarch # 5.6のパッケージをアンインストール

# MySQL5.7をインストールします
$ wget http://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm
$ yum -y install mysql57-community-release-el7-11.noarch.rpm

$ wget https://downloads.mysql.com/archives/get/p/23/file/mysql-5.7.33-1.el6.x86_64.rpm-$bundle.tar
$ tar -xvf mysql-5.7.33-1.el6.x86_64.rpm-bundle.tar

$ yum localupdate mysql-community-server-5.7.33-1.el6.x86_64.rpm \
  mysql-community-client-5.7.33-1.el6.x86_64.rpm \
  mysql-community-common-5.7.33-1.el6.x86_64.rpm \
  mysql-community-devel-5.7.33-1.el6.x86_64.rpm \
  mysql-community-libs-5.7.33-1.el6.x86_64.rpm

$ service mysqld start # サービスを起動
$ mysql_upgrade -u root # バージョンアップでテーブルに非互換性が生まれた場合に修復してくれる
$ service mysqld restart # 念の為サービスをリスタート
$ mysql --version # 5.7.33になっている
```

## リストア
```sh
$ mysql -u root < dump-data.sql # データをリストア
$ mysql_upgrade -u root --force # 非互換性の修復
$ service mysqld restart # サービスをリスタート
```

### まとめ

何度か試行錯誤してこの形に行き着きました。
Laravel課題・ルーティングパラメータ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954863/59b57e1f-ca08-6551-c3e8-1bc9fffa032b.png)


```
```

ルート

/items/{id}

に GET でアクセスすると、

商品の配列 $items のうち、該当のインデックス(配列のキー)の商品の商品名, 価格が表示させる。

該当のインデックスの商品が存在しない場合は「該当の商品は存在しません。」と表示させる。

該当のインデックスが配列内に存在するかを確認するにはarray_key_existsを活用する。

@ifを使って、商品が取得できた場合とできなかった場合の表示切り替えを行う。

リクエストメソッド: GET
URL: /items/{id}
アクション: SampleController@showItem
ビュー: samples.show_item



# ルーティング

/<font color="Red">アプリ名</font>/routes/**web.php**

```php
<?php
Route::get('/items/{id}', 'SampleController@showItem');
```

# コントローラー

/<font color="Red">アプリ名</font>/app/Http/Controllers/**showItem.php**

```php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
 
class SampleController extends Controller{
  
  public function showItem($id){
    $items = [
    [
        'name' => 'みかん',
        'price' => 200,
    ],
    [
        'name' => 'バナナ',
        'price' => 100,
    ],
    [
        'name' => 'キウイ',
        'price' => 150,
    ],
    [
        'name' => 'イチゴ',
        'price' => 500,
    ],
    ];

    if (array_key_exists($id, $items)) {
        $name = $items[$id]['name'];
        $price = $items[$id]['price'];
      return view('samples.show_item', [
        'name' => $name,
        'price'  =>  $price ,
      ]);
    } else {
       return view('samples.show_item', ['id' => $id,]);
    }

    // if(!isset($items[$id]) ){  
    //       return view('samples.show_item', ['id' => $id,]);
    // }
    // if(isset($items[$id]) ){  
    //     $name = $items[$id]['name'];
    //     $price = $items[$id]['price'];
    //     return view('samples.show_item', [
    //     'name' => $name,
    //     'price'  =>  $price ,
    //     ]);
    // }
  }
}

```

# ビュー

/<font color="Red">アプリ名</font>/resources/views/samples/**show_item.blade.php**

```php
@extends('layouts.logged_in')


@section('content')
<h1>課題：ルーティングパラメータ</h1>

@if (isset($name))
  <dl>
      <dt>商品名</dt>
      <dd>{{ $name }}</dd>

      <dt>価格</dt>
      <dd>{{ $price }}</dd>

    </dl>
    @else
        <p>{{ $id }}:は該当の商品は存在しません。</p>
    @endif

@endsection
```


# ログイン後のレイアウト

/<font color="Red">アプリ名</font>/resources/views/layouts/**logged_in.blade.php**

```php
@extends('layouts.default')
 
@section('header')
<header>
    <ul class="header_nav">
        <li>このサイトについて</li>
        <li>ユーザー設定</li>
        <li>プライバシーポリシー</li>
        <li>ログアウト</li>
    </ul>
</header>
@endsection
```

# 共通レイアウトファイル

/laravel_bbs/resources/views/layouts/**default.blade.php**

```PHP
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>@yield('title')</title>
    <style>
        .header_nav {
            display: flex;
            list-style: none;
            padding-left: 0;
        }
        .header_nav li {
            margin-right: 30px;
        }
    </style>
</head>
<body>
    @yield('header')
    @yield('content')
</body>
</html>
```
laravel 時間を指定してバッチを実行する 個人メモ

# 目的

- laravelにて時間を指定してバッチを実行する方法をメモ的にまとめる

# 方法

1. 下記ファイルを開く。
    - `アプリ名ディレクトリ/app/Console/Kernel.php`
1. Kernelクラスのschedule()メソッドに時間で実行したいバッチの情報を記載する。

    ```アプリ名ディレクトリ/app/Console/Kernel.php
    /**
     * Define the application's command schedule.
     *
     * @param  \Illuminate\Console\Scheduling\Schedule  $schedule
     * @return void
     */
    protected function schedule(Schedule $schedule)
    {
        $schedule->command('command:バッチ名')->実行タイミングの指定;
    }
    ```

1. 例えば毎日12:00に実行指定ほしいバッチを登録する場合下記のように記載する。

    ```アプリ名ディレクトリ/app/Console/Kernel.php
    /**
     * Define the application's command schedule.
     *
     * @param  \Illuminate\Console\Scheduling\Schedule  $schedule
     * @return void
     */
    protected function schedule(Schedule $schedule)
    {
        $schedule->command('command:バッチ名')->dailyAt('12:00');
    }
    ```

# 参考文献

- [Laravel 6.x タスクスケジュール](https://readouble.com/laravel/6.x/ja/scheduling.html)
Reactメモ



##functionComponent
###文法
```
//定数で宣言する
const App = () => {
  return (
    <>
      <div>HTMLのように書けます</div>
    </>
  )
}

//export忘れない
export default App
```

##useState文法
```
  // useState関数をインポート
  import React, {useState} from 'react'

  // 宣言
  // state変数名, state変更関数名　＝　state初期値
  const [isPublished, togglePublished] = useState(false);

```

##useEffect文法
```
// クリーンアップ関数
useEffect(() => {
  console.log('Render')
  return () => {
    console.log('Unmouting')
  }
})
```
・Callbackはレンダーごとに呼ばれる
・returnするCallback関数はアンマウント時に呼ばれる

```
// マウント時のみ実行される
useEffect(() => {
  console.log('Render')
}, [])
```
・第二引数に空の配列を渡してあげると、最初の一回のみ実行される。



##useCallback

コンポーネント内で使用するコールバック関数はrender毎に生成されるが、useCallbackを使うと、コールバック関数の生成を抑止できる。
クラスコンポーネントのbind()と同じ役割をする。

### 文法
```
  // 一つ目の引数にコールバック関数、二つ目の引数に配列で値を渡す（再描画する為の条件）。
  useCallback(() => {},[hoge]);
```
子コンポーネントにpropsで関数を渡すときに使う。





```
this.handleClickOpen = this.handleClickOpen.bind(this);

  handleClickOpen = () => {
      this.setState({open:true});
  };

```
【Swift】RealmでのCURD操作

# オブジェクトの生成

Realmでは下記のように専用のクラスを作成しオブジェクトを生成します。

~~~ Swift
class Plan: Object {
　　 // 変数名の頭に"@objc dynamic var"をつける
    @objc dynamic var id: String = NSUUID().uuidString
    @objc dynamic var title: String = ""
    @objc dynamic var content: String = ""
    @objc dynamic var createdAt: Date = Date()
    
    // プライマリーキーを指定
    override static func primaryKey() -> String? {
        return "id" //プライマリーキーに指定する変数名
    }
}

// こんな感じで任意の方法で入れたいデータを入れる
let newPlan = Plan()
newPlan.title = "タイトル"
newPlan.content = "内容"

~~~


# Create

任意の場所でrealmのインスタンスを作成し下記のようにadd（）を使用することによってDBにデータが保存されます。

最後の行のようにデータが保存されているファイルのパスを出力することができ、そのファイルをRealmStudioなどで開くことで、どのんなデータが入っているかを見ることがきます。

~~~ Swift
import RealmSwift



let realm = try! Realm() // DBの参照

//DBにnewPlanを追加
try! realm.write {
   // 追加したいオブジェクトを引数に入れる
   realm.add(newPlan)
}

print(Realm.Configuration.defaultConfiguration.fileURL!) //Realmのファイル場所をプリント
~~~

# Update

下記は保存されている任意のオブジェクトをcreatedAt昇順でソートし、取得しています。
この時に変数に格納されるのは配列になります。

soreted()ではbyKeyPathにPlanクラスで定義したメンバ変数を文字列で指定し、ascendingでは昇順で取得したい場合"true"を、降順で取得したい場合"false"を指定します。

~~~ Swift

// DBに保存されている任意のオブジェクトを配列で取得してくる
let results = realm.objects(Plan.self).sorted(byKeyPath: "createdAt", ascending: true)

~~~


# Read

更新したいオブジェクトをfilterメソッドを使用し、プライマリーキーなどを指定してDBから取得します。
この時、targetPlanには配列が入ってくるので、realm.writeの中ではtargetPlan[0]のように記述しています。
（他の方法があれば教えていただきたいです・・・）

~~~ Swift

// 更新したいオブジェクトをDBから取得してくる
let targetPlan = realm.objects(Plan.self).filter("id == '\(planId)'")
        
do{
   try! realm.write{
         targetPlan[0].title = "タイトル２"
         targetPlan[0].content = "更新したよ"
   }
}

~~~

# Delete

Updateの処理と同様に、プライマリーキーなどを指定して削除したいオブジェクトをDBから取得します。
下記のように記述することで任意のデータを削除できます。
realm.delete()ではtargetPlanが配列のため引数にはtargetPlan[0]を入れています。

~~~ Swift

// 削除したいオブジェクトをDBから取得してくる
let targetPlan = realm.objects(Plan.self).filter("id == '\(planId)'")
        
do{
   try! realm.write{
       realm.delete(targetPlan[0])
   }
}
~~~

# 終わりに

多分もっといい方法がありそうですが、お手柔らかに・・・
こういう方法もあるよーとか、自分はこういうふうに使ってるよーなどありましたらご教授いただけると幸いです。

*参考資料*

https://dev.classmethod.jp/articles/start-ios-realm-crud/

https://docs.mongodb.com/realm-legacy/jp/docs/swift/latest.html
機械学習勉強記録 Matplotlib, Seaborn

# Matplotlib と Seaborn

Matplotlibはデータの可視化によく使われるライブラリです。大小、傾向、分布、相関などを目視する時に用います。
SeabornはMatplotlibが内部で動いているのですが、特に、手軽に美しく可視化ができるライブラリです。

## import方法

```.python
import matplotlib.pyplot as plt
import seaborn as sns
```
と書いて読み込みます。


## Matplotlibで棒グラフを作ってみる

```.python
# dfを定義、列名A,B,C 行名ONE,TWO,THREE
df = pd.DataFrame({'A':[2,2,3],
                   'B':[4,5,6],
                   'C':[7,8,9]},
                  index=[1,2,3])
print(df)
"""
出力結果 : 
        A	B	C
1   	2	4	7
2       2	5	8
3       3	6	9
"""

# value_counts()を使ったら
test = df['A'].value_counts()
print(test)
"""
出力結果 : 
2    2
3    1
Name: A, dtype: int64
"""

# 横軸の値
x = df['A'].value_counts().index
# 縦軸の値
height = df['A'].value_counts().values
print(x,height)
"""
出力結果 : Int64Index([2, 3], dtype='int64'), array([2, 1])
"""
```
`value_counts`メソッドは、カテゴリ変数の各クラスがそれぞれいくつあるかを数え上げてくれます。ユニークな要素の値が`index`、その出現個数が`data`となる`pandas.Series`を返すので、要素の頻度（出現回数）が必要な場合はこちらを使います。
`test`を出力したら、「2が2つ、3が1つですよ」と返してくれているのがわかります。

`value_counts.index`で`test`の中の、`index`を`pandas.core.indexes.numeric.Int64Index`という型で手に入れられます。
`value_counts.value`でその`index`の要素の出現回数を、`numpy.ndarray`型で手に入れられます。

これを`matplotlib`で図式化すると、

```.python
# 横軸に x , 縦軸に height の棒グラフを描画。
plt.bar(x, height)
```
![スクリーンショット 2021-06-08 15.47.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1456950/f5a9be42-bdfc-fdeb-7c9a-d95afb06674e.png)

このようなグラフが出来上がります。

### Seabornを使うと

```.python
# Seabornのスタイルを使う
plt.style.use('seaborn')
# 横軸に x , 縦軸に height の棒グラフを描画。
plt.bar(x, height)
```
![スクリーンショット 2021-06-08 15.50.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1456950/ce737fc0-d41a-fac9-8318-2171f8e0f483.png)

このようにちょっと見やすくなりました。

## 折れ線グラフ
`plt.plot(x, y)`で折れ線グラフが描画できます。

## ヒストグラム
`plt.hist(df['A'], bins=10)`10分割にして分布をみるためのヒストグラムを作れます。

### Seabornを使った場合
`sns.distplot(df['A'], kde=False, bins=10`ヒストグラムの背景に目盛りがつきます。
`kde=True`にすると、確率密度関数が表示されます。

## 箱ひげ図
`plt.boxplot(df['A'])`外れ値を検討する時に使える箱ひげ図を表示できます。

## 散布図
`plt.scatter(df['A'], df['B'])`X軸のデータをA列から、Y軸のデータをB列から取った散布図を描画できます。A列のデータとB列のデータの相関関係を可視化できます。

`sns.pairplot(df)`各列と各列をそれぞれX軸、Y軸に取った散布図を全て表示し、一度に確認することができます。

## ヒートマップ
`df_corr = df_corr()`全ての組み合わせの相関係数を取得し、`df_corr`に代入します。
`sns.heatmap(df_corr, annot=True, cmap='Blues')`
`annot`は`True`にすることで、相関係数を表示することができます。
`cmap`ではヒートマップの色系統を指定できます。

# 要約統計量の確認
`df.describe()`では、要素の数、平均値、中央値、最小値、最大値などを一覧でみることができます。

## グループ化
任意のカテゴリカル変数についてグルーピングを行うことができます。
`df.groupby('A').mean()`では、A列の要素によって、グループ分けをして、それぞれのグループごとに、他の列の値の平均値を取得できます。

## クロス集計
`pd.crosstab(df['A'], ['B'])`A列とB列のカテゴリカル変数を掛け合わせてサンプル数を集計します。データフレームが表示され、データフレームの値にはサンプル数が表示されます。

## ピボットテーブル
`pd.pivot_table(df, values='A', index='B', columns='C', aggfunc='mean')`
データフレームの値は、A列から。`agghunc='mean'`によって、その平均が表示されます。
カラムはC列の要素から、インデックスは、B列の要素から表示されます。
データの中身についてよく理解した上で、こういったものを役立てるといいかもしれません。
ゲームのマスターデータのフォーマットはcsvよりtsvがオススメ

# 概要
モバイルゲームを開発する際は、ExcelやGoogleスプレッドシートなどでマスターデータを管理し、csvとしてエクスポートしてgit管理するといった運用をわりと見かけます。
最近、クライアント/サーバー間でやりとりするマスターデータのフォーマットをcsvからtsvに変えたところ、とても使い勝手が良かったため紹介します。

# tsvとは
タブを区切り文字として使用したデータ形式。
csvはカンマを区切り文字とするが、そのカンマ（`,`）がタブ（`\t`）になったもの。
具体的には以下のようなテキストデータとなる。

```:csv
name,hp,atk
スライム,10,2
ゴブリン20,4
```
```:tsv
name\thp\tatk
スライム\t10\t2
ゴブリン\t20\t4
```

# tsvのメリット
- 言語やライブラリへの依存がとても少なく、シンプルにパースすることができる
- わりと最近のシステムだとcsvファイルとして普通に読み込める

コードサンプル

``` C#:C#でtsvを出力
var line = string.Join("\t", fields);
```
``` C#:C#でtsvをパース
var fields = line.Split('\t');
```
``` PHP:PHPでtsvを出力
$line = implode('\t', $fields);
```
``` PHP:PHPでtsvをパース
$fields = explode('\t', $line);
```

# tsvのデメリット
- 文字列中にタブを使用したい時は別の文字列に置換する必要がある
  - マスターデータでタブを文字列として使用したいシチュエーションはあまりないが…
- 古いシステムだと読み込めないものがある

# csvのメリット
- とても一般的に使用されている
- 以下略

# csvのデメリット
- tsvのようにシンプルにパースすることができない
  - 後述のようにダブルクォーテーションを考慮する必要がある
- 文字列としてカンマを使用したい時はダブルクォーテーションで囲う必要がある
- ダブルクォーテーションを使用している箇所と使用していない箇所が混在しがち
- tsvに比べてロジックが複雑なためパースコストが高い
  - シンプルにカンマ区切りでパースするだけならtsvとコストは変わらないが、マスターデータでキャラクターの説明文にカンマを使用するなど、カンマを文字列として使用したいシチュエーションがわりとあるため
- ライブラリによっては細部の対応オプションが異なる

# まとめ
tsvからcsvへの変換は容易なため、非エンジニアがマスターデータを参照する時はcsvとして扱いつつ、クライアント/サーバー間のやりとりはtsvとして扱うなど、柔軟に使い分けられると双方のメリットが最大限に活かせるのではないかと思います。
[Android]思考停止でセットしていたLayoutInflaterを少し掘り下げてみる

#質問箱にて
https://peing.net/ja/q/41870132-3726-423b-95ea-882afc8b2e53

このような質問を頂いたので、書いている次第でございます。
LayoutInflaterは、RecyclerviewのonCreateViewHolderとか、FragmentのonCreateViewメソッドのパラメータとしてよく使われますね。

正直、全く理解していません。
何なのでしょうか？
掘り下げてみましょう。

#簡単に説明すると

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">LayoutInflaterは、「膨らます奴」</p>&mdash; Reo@Android Developer (@RunningReo) <a href="https://twitter.com/RunningReo/status/1402204313636671521?ref_src=twsrc%5Etfw">June 8, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


英語の意味として、inflateが「膨らませる」という意味で、なんとからーは○○をする人という意味なので、inflaterは「膨らます奴」ですね。
そして、LayoutInflaterは、レイアウトを「膨らます奴」です。

これだけで、考えるという観点ではLayoutInflaterを扱えるので、思考停止は免れたかと思います。

#もう少し掘り下げてみる
よくFragmentにてViewを生成する時に、LayoutInflaterクラスのinflateメソッドを用います。

```kotlin
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        super.onCreateView(inflater, container, savedInstanceState);
     
        return inflater.inflate(R.layout.hogehoge, container, false);
    }
```
そもそも、FragmentとはActivityを容器としてその中に部分的な画面として表示します。
ここからActivityという容器の中で、膨らませるようなイメージが出来るかなと思います。

LayoutInflaterという「膨らます奴」が、Activityという「容器」の中で、inflateという「膨らます」行為をしているわけですね。

もう少し、理論的にいうとXMLファイルを直接インスタンスせずに利用するイメージです。

第一引数は、「膨らます」XMLファイルを指定します。
第二引数は、ViewGroupでネストの一番外側のビューを表します。
第三引数は、第一パラメータで指定したレイアウトをルートビューにするか否かを

ちなみに、質問者さんのonCreateViewHolderもRecyclerViewという「容器」の中で一行分のレイアウトを「膨らませて」作っています。
この膨らませた一行分のレイアウトを使い回しているわけですね。

#終わり
質問者さんに満足していただいた記事は書けたのかな・・・
もっと深掘った方が良かったのかな・・・・
取り敢えず、今の自分が掘れる範囲はここまででした。
サーバーにsshでアクセスしたら、known_hostsのエラーでた


新しいpcで接続しようとしたら前までできていた、sshで接続していたサーバーができなくなっていた。
その際に、known_hostのエラーが出てきた。

初めてサーバにSSHでアクセスする際聞かれると思う。

```
$ ssh user@192.168.100.200
The authenticity of host '192.168.100.200 (192.168.100.200)' can't be established.
ECDSA key fingerprint is SHA256:qKZyNM7JGgEGH7QWLANKBpNlFwM1XT7i45Z5oB7V61Y.
Are you sure you want to continue connecting (yes/no)? yes
```
finger printが登録されるとのこと。
これやってなかったかな。

もしくは、ssh user@192.168....
の@忘れしてしまっていた可能性がある。

とりあえず、初回はきちんと履歴が残るしアクセスしているpcの情報などがサーバーに保存される感じやと思う。


参考：
https://a-mochan.hatenablog.com/entry/2019/12/20/141036
*.ppk を *.pem に変換

access_key_sample.ppk を access_key_sample.pem に変換する方法です。

Ubuntu でツールのインストール

```bash
sudo apt install putty-tools
```

変換

```bash
puttygen access_key_sample.ppk -O private-openssh -o access_key_sample.pem
```

ssh で使う

```bash
ssh -i access_key_sample.pem root@sample.com
```
gitハッシュ値について


#ハッシュ値について

コミットするたびに、
ハッシュ値が付けられている。


c773509683xxxxfb61bccxxxxe604e2ecd297c9c3c02 

↑
みたいなやつ。
ハッシュ値やリビジョン番号などと呼ぶ。




![B65A5B45-4B91-4543-9DE2-DA51F56B90DF.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/c9feb9e2-c53c-1c56-3f6b-1f7629d1edc3.png)


# 参考

https://kray.jp/blog/git-why-explanation/


https://www.google.com/amp/s/blog.yuuk.io/entry/2012/06/18/Git%25E3%2581%25AE%25E3%2583%25AA%25E3%2583%2593%25E3%2582%25B8%25E3%2583%25A7%25E3%2583%25B3%25E7%2595%25AA%25E5%258F%25B7%2528SHA-1%25E3%2581%25AE%25E3%2582%25A2%25E3%2583%25AC%2529%25E3%2581%25AE%25E6%25AD%25A3%25E4%25BD%2593%25E3%2582%2592%25E3%2582%25BD%25E3%2583%25BC%25E3%2582%25B9%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%2589%3Famp%3D1


https://git-scm.com/book/ja/v2/Git-%E3%81%AE%E3%81%95%E3%81%BE%E3%81%96%E3%81%BE%E3%81%AA%E3%83%84%E3%83%BC%E3%83%AB-%E3%83%AA%E3%83%93%E3%82%B8%E3%83%A7%E3%83%B3%E3%81%AE%E9%81%B8%E6%8A%9E


https://git-scm.com/book/ja/v2/Git%E3%81%AE%E5%86%85%E5%81%B4-Git%E3%81%AE%E5%8F%82%E7%85%A7
default line colors of chartist.js 


1. `#d70206`
2. `#f05b4f`
3. `#f4c63d`
4. `#d17905`
5. `#453d3f`
6. `#59922b`
7. `#0544d3`
8. `#6b0392`
9. `#f05b4f`
10. `#dda458`
11. `#eacf7d`
12. `#86797d`
13. `#6188e2`
14. `#a748ca`
他プロジェクトで利用されるWPFコントロールでプロジェクトのルートを起点としたパスを利用するには

# はじめに

本記事は他プロジェクトで利用されるWPFコントロールでプロジェクトのルートを起点としたパスを利用する際に困ったので、その方法をまとめることを目的としています。

# 困りごと

例えば、以下のようにSampleIcon.jpgとそれを表示するMainWindow.xamlがあるとします。

![xamlと画像ファイルのソリューション上での位置関係.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452292/13be1634-c430-0f0f-25bd-276f58a02db9.png)


このMainWindow.xamlで以下のようにImageのSourceを参照します。

```csharp
<Window x:Class="AbsolutePathResolveSample.Views.MainWindow">
    <Grid>
        <Image Source="/Resources/Icons/SampleIcon.jpg"/>
    </Grid>
</Window>
```

そして、AbsolutePathResolveSampleプロジェクトをスタートアッププロジェクトに設定してアプリケーションを実行すると画像が表示されます。これは上のxamlのImageコントロールのSourceに指定している`/Resources/Icons/SampleIcon.jpg`が`/`から始まっており、プロジェクトのルートを起点にパスを解決するためです。

では、別プロジェクトから利用されるライブラリ内でも上記と同じようなパス解決ができるのかを見てみます。
具体的には以下のようなソリューション構成を考えます。

![xamlと画像ファイルのソリューション上での位置関係(プロジェクト分割).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452292/7c88b2b1-11dd-bf2e-fb99-125352431916.png)

SampleControlsプロジェクトのSampleControl.xamlは以下のように書かれており、内容は前述したMainWindow.xamlと同じです。

```csharp
<UserControl x:Class="SampleControls.Views.SampleControl">
    <Grid>
        <Image Source="/Resources/Icons/SampleIcon.jpg"/>
    </Grid>
</UserControl>
```

そして、SampleApplicationプロジェクトのMainWindow.xamlでは、以下のように上記のSampleControlを配置しています。

```csharp
<Window x:Class="SampleApplication.MainWindow"
        xmlns:Controls="clr-namespace:SampleControls.Views;assembly=SampleControls">
    <Grid>
        <Controls:SampleControl/>
    </Grid>
</Window>
```

この状態でSmapleApplicationプロジェクトをスタートアッププロジェクトに設定してアプリケーションを実行すると、AbsolutePathResolveSampleプロジェクトと同じようにImageコントロールのSourceに設定したパスが解決されると思いきや、解決されず画像は表示されません。
このように別プロジェクトから利用するWPFコントロールにおいて、プロジェクトのルートを起点としたパス(つまりは`/`から始まるパス)は、工夫しないと解決できません。

# 解決法

ImageコントロールのSourceに設定するパスの先頭に`/(アセンブリ名);component`を加えることで、別プロジェクトから利用する場合であっても、パスを解決する際に起点とするアセンブリが特定されるので、パス解決できるようになります。前章のSampleControlsプロジェクトのSampleControl.xamlの場合は、アセンブリ名はプロジェクト名と同じ`SampleControls`なので、以下のように書けばパス解決できるようになります。

```csharp
<UserControl x:Class="SampleControls.Views.SampleControl">
    <Grid>
        <Image Source="/SampleControls;component/Resources/Icons/SampleIcon.jpg"/>
    </Grid>
</UserControl>
```

# まとめ

本記事では他プロジェクトで利用されるWPFコントロールのxaml内でプロジェクトのルートを起点としたパス参照をする方法についてまとめました。

# 参考記事

- [ImageコントロールのSourceプロパティの設定方法について説明されている記事](https://wpf-tutorial.com/ja/493/basic-controls/the-image-control/)
さくらvps独自ドメイン設定https構築の備忘録


自分でサービスを公開する際URLを「https://サービス名.com」にしたかったので以下のサイトたちを参考にして独自ドメイン取得、セッティングしました。自分の行った設定通りに記事を残したかったのですが、ログが残っていないので参考になるURLの記載。
https通信の構築もしたかったのですがなかなかにハードでした、、
その時にかなり助けとなったサイトや記事を貼ります。

完全に自分用の備忘録です。
レンタルサーバーからwebサービスの公開をした者からするとvpsでの環境設定は結構大変だと感じましたし、そう感じてる方もいらっしゃると思うので是非参考にしてみてはどうでしょう。https通信に関してはレンタルサーバーだと自身でSSL証明書を準備する必要がないので安易でした。

自分はドメインもサーバーもさくらインターネットなので簡単でした。他の会社でドメインを取得した場合の手順は分かりません、、

#自身の利用ツール
###サーバー:さくらのVPS
https://vps.sakura.ad.jp/?keyword=さくらのvps&matchtype=e&adposition=&creative=393633044330&device=c&network=g&feeditemid=&targetid=aud-897037678729:kwd-38225515828&loc_physical_ms=1009278&gclid=EAIaIQobChMIzq_1r_WH8QIV0NeWCh0xmgP7EAAYAiAAEgLtNvD_BwE

###ドメイン:さくらインターネット
https://domain.sakura.ad.jp/?utm_source=vps&utm_medium=cp

###SSL証明書:さくらのSSL
https://ssl.sakura.ad.jp/rapidssl/rapidssl.html





###参考記事一覧


~さくらインターネットで独自ドメイン取得サイト~
https://domain.sakura.ad.jp/?utm_source=vps&utm_medium=cp


~さくらインターネットで取得した独自ドメインを自身のサーバーにセットする方法参考~
https://webkaru.net/vps/sakura-domain-setting/

~自分のサービスをhttps通信にするために~
https://qiita.com/yoshizaki_91/items/e6f39a5bfb99900b44b2
https://webdirector-blog.com/c_3/p_35/