OmniAICreator/Qiita-1.07M huggingface dataset:
小冊子印刷されたPDFから元のPDFを復元する

**紙は重い**ので，資料はスキャンしてPDFにしてタブレットで見たい！
でも資料が **小冊子印刷** されているとスキャンしてもページの順番が滅茶苦茶になってしまうので，どうにかしたい！

## 小冊子印刷とは
~~説明が面倒なので，~~ Adobe Acrobatのマニュアルから引用すると以下の通り．

> 小冊子とは、複数のページからなる文書です。各ページは用紙を 2 つ折りにしたときに順序が正しくなるように配列されます。 両面印刷された用紙をページ順に重ね、2 つ折にして綴じると、ページが正しく配列された 1 つの冊子ができあがります。
※ 総ページ数、右綴じ、左綴じの設定により、配置されるページは異なります。

> ![](https://helpx.adobe.com/jp/acrobat/kb/6264/_jcr_content/main-pars/img_0.img.gif/6264_012.gif)
>（https://helpx.adobe.com/jp/acrobat/kb/6264.html より引用）

## ページ数の対応
- $2N$ ページ[^1] の文書を小冊子印刷することを考えます．
- 元のPDFで $i$ ページ目にあったページが，小冊子印刷後には $j$ ページ目に移るとします．ここで，小冊子印刷後のページ番号は下図のように数えます．
![booklet.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472883/c4751b8d-4a86-1778-5cc8-b357a360f79a.png)


- ちょっと考えると，
    $$j(i) = 
     \begin{cases}
       2i - i {\small \%}2 & (\text{if}\ 1 \leq i\leq N) \\\
       2N -2(i-N-1) - (i-N){\small \%}2 & (\text{if}\ N+1 \leq i \leq 2N)
     \end{cases}
    $$
であることがわかります．

## 実装
下図の要領でやります．
![booklet_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472883/a442e643-20ae-bc1d-3f81-8522b28288b7.png)


### 1.左右に分割
これはAcrobatとかでただポスター印刷すればよいでしょう．
![divide.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472883/f892c46d-edf4-be3e-683c-f4da19c7002e.png)
上の画像では分割ついでにページサイズを一つ上げて（$1.41 \simeq \sqrt{2}$倍して）います．

### 2."j(1)⊔j(2)⊔j(3)…j(2N−1)⊔j(2N)"を出力
今回は標準入力から$N$（左右分割前のページ数）を受け取り標準出力に渡しました．c++で雑に書くとこんな感じ．[^3]

```booklet.cpp
#include <bits/stdc++.h>
using namespace std;

map<int,int> booklet(int N) {
	map<int,int> j; // 元の文書でのiページは小冊子印刷された文書でのjページに
	for(int i=1;i<=N;i++) j[i] = 2*i - i%2;
	for(int i=N+1;i<=2*N;i++) j[i] = 2*N - 2*(i-N-1) - (i-N)%2;
	return j;
}

int main() {
	int N; // 小冊子印刷後（左右分割前）のページ数
	cout << "How many pages?" << endl;
    cin >> N;
	auto j = booklet(N);
	cout << "ans:" << endl;
	for(int i=1;i<=2*N;i++){
		cout << j[i];
		if(i<2*N) cout << " ";
		else cout << endl;
	}
	return 0;
}
```

### 3.並び替え
今回はページの並び替えに**pdftk**を用いました．
https://www.pdflabs.com/tools/pdftk-the-pdf-toolkit/ からインストーラをダウンロードしインストール．準備はこれで完了．

例えばコマンドラインに

```bash
> pdftk pdf_original.pdf cat 1 3 2 4-end output output.pdf
```

と入力すると元のPDF(pdf_original.pdf)の2ページ目と3ページ目を入れ替えたPDF(output.pdf)が生成されます．[^2]

同様に，
$$
\text{hoge} = \text{“}j(1) \sqcup j(2) \sqcup j(3) \ldots j(2N-1) \sqcup j(2N)\text{”} 
$$
として，

```bash
> pdftk pdf_original.pdf cat hoge output output.pdf
```
とすれば良いですね．



## やってみた

- [小冊子印刷されたPDF（左右分割前，4ページ）](https://drive.google.com/open?id=1TW67ZQYIshcCut7Tqk7MCWfa8JbNfiFI)

　　　　　↓　左右分割

- [小冊子印刷されたPDF（左右分割後，8ページ）](https://drive.google.com/open?id=1cRYZHlKcTNAWTdFqcz54dBFsvM474KSA)

booklet.cpp をコンパイルして実行：

```bash
> g++ booklet.cpp
> ./a.exe
How many pages?
4
ans:
1 4 5 8 7 6 3 2
```
"$j(1) \sqcup j(2) \sqcup j(3) \ldots j(7) \sqcup j(8)$" が得られたので代入！ **pdftk** で並び替え：

```bash
> pdftk booklet_divided.pdf cat 1 4 5 8 7 6 3 2 output booklet_output.pdf
```

- [得られた元のPDF](https://drive.google.com/open?id=1o8KFf0HBWDhAJ2kNBrttWDt9x0bdCXhA)

これで紙とおさらばできる，やったね！

[^1]: ページ数が奇数の場合，小冊子印刷の際に空白ページが挿入されるので，ページ数が偶数の場合に帰着されます．
[^2]: 参考：https://jidouka.work/?p=304
[^3]: 逆引きの可能性を加味してmapにしましたが，必要なかった感が否めません．
Akashic Engineで実際にローディングシーンをカスタマイズしてみた

この記事は、Akashic Engine Advent Calendar 2019の24日目の記事です（大遅刻すいませんです…）

[20日目の記事](https://qiita.com/xnv/items/c739f33d1684d3f8d02f)でローディングシーンのカスタマイズの話が出ていましたが、これの実際の利用例（？）について書いてみます。

## 実例

[先日の記事](https://qiita.com/pocketberserker/items/192b59083747ef9ff7f3)でも登場した小語アコちゃんの自己紹介のローディングシーンはこのカスタマイズ機能を使っています。凝ったことをするのもアレなのでシンプルに白黒でぴょんぴょんさせているだけです。

## 実際のコード

特に凝っていないのでAkashic Engineの機能のみで実装しています。

```ts
const addLoadingScene = (game: g.Game) => {
  const loading = new g.LoadingScene({
    // ロード画面を確認したい場合はコメントアウトを解除
    //explicitEnd: true,
    game
  });
  const gravity = 0.8;
  const initialVelocity = 10;
  const buttom = g.game.height / 2 - 60;
  let timeCount = 0;
  loading.loaded.add(() => {
    const black = new g.Sprite({
      scene: loading,
      src: game.assets["black"] as g.ImageAsset,
      x: 0,
      y: 0
    });
    loading.append(black);

    const aco = new g.Sprite({
      scene: loading,
      src: game.assets["loading_aco"] as g.ImageAsset,
      x: game.width / 2 - 50,
      y: buttom
    });
    loading.append(aco);

    const nowLoading = new g.Sprite({
      scene: loading,
      src: game.assets["now_loading"] as g.ImageAsset,
      x: game.width / 2 - 48,
      y: game.height / 2 + 65
    });
    loading.append(nowLoading);

    loading.update.add(() => {
      aco.y = buttom - (initialVelocity * timeCount - 0.5 * gravity * timeCount ** 2);
      if (aco.y > buttom) {
        aco.y = buttom;
        timeCount = 1;
      } else {
        timeCount++;
      }
      aco.modified();
    });

    loading.modified();
  });
  game.loadingScene = loading;
};
```

x, y座標の指定がピンポイントなのは画像サイズの影響ですね…画面サイズが変わらないことをいいことにさぼってます。

ここではy軸方向にのみジャンプするもの（等加速度直線運動）を考えていたので、高校物理の方程式をそのまま実装しています。ただし、重力加速度などは現実の値を使うと違和感があるため見た目丁度良い値にいじっています。ゲームは現実ではないので、厳密な値を使わなくて良い（使うべきでもない）というわけですね。

## まとめ

ローディングシーンはちょっとしたコードを書くだけでそれっぽい（手抜きでないような）見た目になるので、少しの手間を惜しまず用意しておくのが良いと思います！
micro:bitでサーモグラフィーを作ってみた

この記事はmicro:bit Advent Calendarに気づいた 12/31 に執筆し、後から 「[micro:bit Advent Calendar 2019 - Qiita](https://qiita.com/advent-calendar/2019/microbit)」の 25日目 へと登録した記事です。

----
解像度は荒いですが、micro:bitでサーモグラフィーを作成してみました。

使用したセンサはこちら。
- [Conta™ サーモグラフィー AMG8833搭載](https://www.switch-science.com/catalog/3395/)

このセンサの測定エリアはセンサ正面（上下左右約60度）の四角錘で、このエリア内を8x8ピクセルに分割した2次元画像が得ることができます。

取得した温度をもとに色を決定し、8x8に配置したNeoPixel互換LEDテープを光らせることでサーモグラフィーとします。

<blockquote class="twitter-tweet"><a href="https://twitter.com/Qiita/status/1110927877971705856"/></blockquote>


ハード構成の詳細については次のツイートの動画にまとめています。

<blockquote class="twitter-tweet"><a href="https://twitter.com/Qiita/status/1111998658180866049"/></blockquote>


2019年3月に思いつきで作成し、最終的に次のプログラムに落ち着きました。
- https://makecode.microbit.org/_766VUM8DWc9F

センサの初期化、値を取得する部分はArduino用のサンプルプログラムを参考に実装（移植？）しました。

LEDの色はHSL()使用し、温度から色相・彩度・輝度を操作して決定しています。
- 20度から30度は色相を変化させる。　20度：青-->水色-->緑-->黄色-->橙-->赤:30度　
- 30度超は、赤色のまま彩度を操作し、35度で黒
- 20度未満は、青色のまま輝度を操作し、10度で白
（上のプログラムのコメントには誤りがありました）

センサを表向き、裏向きに入れ替えた場合、LEDの左右の並びを逆にする必要がありますが、Aボタンで切り替えできます。

また、色では10度から35度までしか区別できないため、Bボタンを押した際にはその時の計測温度の最大値・最小値をmicro:bit本体のLEDに表示します。
sass入門メモ

# この記事の目的

sassを書く際に一気に色々思い出すためのメモ

# 〜〜の中の〜〜を指定する場合

```sass
.main {
  margin: 20px;
  border-radius: 5px;
  .title {
    font-size: 32px;
    margin-bottom: 5px;
  }
}
```

入れ子にすることで〜〜の中の〜〜を指定できる

# 変数

```sass
$hensuu : hogehoge;
```

$マークを前につける変数の宣言になる

# mixin

変数は一個だけを複数回使いまわしできるがmixinは複数のプロパティをまとめて使い回しができる。

```sass
@mixin hogehoge{
}
.hogehoge{
  @include hogehoge;
}
```
第5回高専キャリア全国大会 高専ビジコンに参加してきました

## 参加した経緯
- エンジニアとしてプロダクトを作る上で、ビジネスの知識も勉強することで、「それ価値あるんですか」ということを考えられるようにするため
- 企画をする際の手法を学ぶため
- 知識＋実践的なビジネスの知識を得られそうだったから

## ビジコンどうだった？
- ビジコン的なイベントは初参加でビビっていたんですが、重要な点をわかりやすく教えていただいたのと、的確なフィードバックにより、なんとなく考え方を理解することができた
- あとは繰り返し経験を増やしたい
- 自分もお題持って行ってピッチしてみたい

## 座談会どうだった
- いろんな価値観の人がいましたが、「やりたいことやってるやつかっけぇ」みたいな感想に落ち着きました
- 幸せの軸っていうのは考える必要があると思いました
- 松尾さんは超合理的(?)だった

## 余談
- ビジコンをやる前とやったあとで[mgram診断](https://mgram.me/ja)を比較してみました
- <img width="498" alt="スクリーンショット 2019-12-27 18.50.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351683/19ed3e64-6524-485d-39b3-dbb862c1e613.png">
- 1,2,3,5はなんとなくわかりますが、4が意外でしたね~


# ここからメモ

## 今回やること
- 構造的価値証明、伝える力を知る
- ビジネス×高専＝イノベーターを生み出せるように

# ワークショップ
## 自己表現ワークショップ
- コミュニケーションに関して、自己開示をすることが大事
- 表現の方法は距離や、コンディションなどによって色々変わる
- 表現の大前提 = 伝える != 伝わる

## バイアスブレイク
- 問題1
    - 無意識の思い込みによって視野が限定される
- 問題2
    - 自分の当たり前によって、他人の意見を受け入れられない
- 例:水田の中のホテル
    - どこにでもある水田を観光資源として捉えた

- 芸術の良いところ
    1. 一般的な価値がわかりにくい
    2. 正解がないので自由に解釈することができる

# ビジコン
- 今回のミッション
  - 投資家に「それ行けるかも！」と思わせる

- 3つの論点
  1. これまでに無い価値を証明する
  2. 実現可能性が証明されていること
  3. 稼げそうであること

- 投資家における3つの論点
  1. あなたがそれをやる理由を証明されていること
  2. あなたが成功する理由を証明すること
  3. 机上の空論ではなく実績が出ていること

- チームにおける3つの論点
  1. 適材適所な役割分担ができている
  2. 発散と集中のメリハリがついている
  3. 意思決定をすること、意思決定に従うこと、ただし合理的であること


## 2日目（座談会）
- 座談会ってまとめるの難しいので、[これ](https://togetter.com/search?q=%E9%AB%98%E5%B0%82%E3%82%AD%E3%83%A3%E3%83%AA%E3%82%A2&t=q&sort=created_at)で何が起こってたのかわかると思います…
WordPressの記事をHugoに移行する

## 目的

WordPressのサイトをHugoを使ったサイトに移行しようと思っています。

そのメモ書きです。最後に参考サイトを載せていますが、大変助かりました。
なお、まともな開発環境がない場合を想定しています（開発用PCが調子悪いんじゃ、、、）

## 内容

WordPressの記事をエクスポートして、Hugoに取り込み、ローカルにて動作確認するまで書きます。
デプロイについては、別記事に書くかもしれません。

## 実行環境

Windows 10
WordPress5.0.4

## やり方

### Hugoのローカル確認環境を用意。

HugoのQuickStartはmac前提なので、Windowsでのやり方を書いておきます。

#### Chocolateyのインストール

https://chocolatey.org/install
Chocolateyでのインストールが一番上に書いてあるので、まずはChocolateyをインストールします。
**管理者権限のあるPowerShell**にて以下のコマンドを実行します。

```PowerShell
Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
```

#### Hugoのインストール

https://gohugo.io/getting-started/installing/
以下のコマンドをPowerShellにて実行すればインストールされます。
`extended Sass/SCSS`もありますが、よくわからないのでスルーします。

```PowerShell
choco install hugo -confirm
```

#### Gitのインストール

https://gitforwindows.org/
適当にインストーラ使ってインストールします。

#### Hugoの動作環境構築

https://gohugo.io/getting-started/quick-start/
QuickStartのStep2以降をやっていきます。基本的にPowerShellでできますが、
`echo`とかはできないので、普通にファイルを開いて書き込むのがベターです。

### Wordpressの記事をエクスポートする

#### WordPress to Hugo Exporterプラグインのインストール

https://github.com/SchumacherFM/wordpress-to-hugo-exporter
GitHubから、「Clone or download」→「DownlaodZip」が今回は手っ取り早いです。

Wordpressダッシュボードにて、「プラグイン」→「新規追加」とクリックします。
「プラグインのアップロード」からさっきのzipファイルをアップロードして、インストールしたらOKです。

#### エクスポート

サイドバーにて「ツール」→「Export to Hugo」で少し待つとzipがダウンロードできます。

### エクスポートしたファイルを配置

#### Markdownファイルの移行

エクスポートしたzipのうち、`posts`フォルダのなかに記事のMarkdownファイルが入っています。
なお**非公開の記事**もあるので注意しましょう！　一応Front Matterに非公開フラグがついていますので問題ないですが、この際不要なものがないか一度整理するのがいいかもしれません。

この`posts`フォルダを、Hugoの`content`フォルダの中に移動すればOKです。

#### 画像ファイルの移行

画像ファイルをWordpress上で管理しているならば、
解凍したzipの`\wp-content\uploads`フォルダの中にエクスポートされているはずです。

めんどうな方は、Hugoの`content`フォルダの中に、`wp-content`フォルダを移動してやればOKです。

### Configファイルの移行

エクスポートしたzipファイルには、`config.yaml`があります。内容を適宜Hugo側（デフォルトだと`config.toml`）に移動しましょう。

#### 今のHugoフォルダ構成

ほとんど省略していますが、、、

```
quickstart
└content
  ├posts
  │ └エクスポートしたMarkdownファイル
  └wp-content
    └エクスポートした画像ファイル等
```

### 動作確認

```
hugo server -D
```

で実行後、[http://localhost:1313/](http://localhost:1313/)にアクセスすれば動作確認できます。

#### エクスポートしたMarkdownを修正

想定通り表示されていないところを修正します。スクリプトを組んで自動化するのがいいと思います。
私は記事数が少ないので手作業でやりましたが、、、

私がやったことを列挙しておきます。

* 画像ファイルのパスを変える
* リンクカードを普通のリンクに変更する
* コード部分がHTMLでエクスポートされていたので、Markdown形式に変更する

また、画像ファイルのディレクトリが気に入れない場合は、適当に修正するとよいです。

## おわりに

唐突に終わりますが、Hugoにて今まで書いた記事が表示されるところまでできました。お疲れ様です。

この後は、GitHubで記事管理、netlifyでホスティングする感じでやろうかなと思います。
これで監視網を潜り抜けて、会社でブログを書くんじゃ、、、（ぉぃ）

## 参考

このサイトをみてHugoにしようと思いました。ありがとうございます！:bow:

* [WordpressからHugoに移行した](https://www.aguuu.com/archives/2018/05/hello_hugo/)
WindowsのWSLにLAMP環境をインストールしてLaravelを動かした時のメモ

# LAMP環境とは
Linux + Mysql + Apache + PHP の、webの一般的な構成。今回はLinux以外をインストールした。

macはこちら
[Macに\(L\)AMP環境を構築してlaravelを動かした時のメモ \- Qiita](https://qiita.com/ebiyuu1121/items/daf1073a7aeebc480534)

# 参考
https://qiita.com/mollinaca/items/60c54b7767a49c1e3e51
https://codeaid.jp/blog/wsl-lamp-wp1/
https://qiita.com/diconran/items/1eca0e0792f4ce1930c5

# PHPのインストール

```sh
$ sudo apt install php
```

ここで、aptが404エラーを起こしていた。サーバー情報が古かったようで、

```sh
$ sudo apt update
$ sudo apt upgrade
```

を実行して再試行したらインストールできた。

# Apacheのインストール

```sh
$ sudo apt install apache2 libapache2-mod-php
$ sudo apt install php-mbstring php-gettext
```

phpモジュールのインストールも忘れずに。

# MySQLのインストール

```sh
$ sudo apt install mysql-server
$ sudo apt install php-mysql
```

# mysqlの設定

MySQLを起動

```sh
$ sudo service mysql start
```

パスワードを変更

```sh
$ sudo mysqladmin -u root password 'パスワード'
```

セキュリティ設定

```sh
$ sudo mysql_secure_installation
```

Y/nで選択する。1つ目(パスワードチェック)、2つ目(rootのパスワード)以外はY。

```
VALIDATE PASSWORD COMPONENT can be used to test passwords
and improve security. It checks the strength of password
and allows the users to set only those passwords which are
secure enough. Would you like to setup VALIDATE PASSWORD component?

Press y|Y for Yes, any other key for No: n
```

```
Change the password for root ? ((Press y|Y for Yes, any other key for No) : n 
Remove anonymous users? (Press y|Y for Yes, any other key for No) : y
Disallow root login remotely? (Press y|Y for Yes, any other key for No) : y
Remove test database and access to it? (Press y|Y for Yes, any other key for No) : y
Reload privilege tables now? (Press y|Y for Yes, any other key for No) : y
```

# apacheの設定

```/etc/apache2/sites-available/000-default.conf
DocumentRoot {ふぁいるぱす} #変更
```

```/etc/apache2/apache.conf
DirectoryIndex index.php index.html
```


```/etc/apache2/apache.conf
<Directory {ふぁいるぱす}> #変更
Options Indexes FollowSymLinks
AllowOverride All #変更
Require all granted
</Directory>
```

rewrireを有効にするために実行

```sh
$ sudo a2enmod rewrite
```

# おまけ1
nodeのインストール
[GitHub](https://github.com/hokaccha/nodebrew)にしたがう。

```sh
$ curl -L git.io/nodebrew | perl - setup
```

`$HOME/.nodebrew/current/bin` にパスを通す。

あとはmacの時とおなじ。

```sh
$ nodebrew install-binary stable
$ nodebrew ls #インストールされているnodeを表示
$ nodebrew use {使いたいバージョン} #有効化
```

# おまけ2
composer installしたらzipがないと怒られたので。

```sh
$ sudo apt install zip unzip
```

# つかいかた
Apache

```sh
$ sudo service apache2 start
$ sudo service apache2 restart
$ sudo service apache2 stop
```

mysql

```sh
$ sudo service mysql start
$ sudo service mysql restart
$ sudo service mysql stop
```
# おまけ3
https://dev.to/oneearedmusic/access-denied-reset-mysql-root-user-password-2hk4
https://qiita.com/ucan-lab/items/3ae911b7e13287a5b917

`php artisan migrate` しようとしたらエラーが発生した。認証方式によるもののよう。
mysqlのコンソールにsudoで入って以下を実行すればよい。

```
> use mysql;
> UPDATE user SET authentication_string=PASSWORD("securepassword") where User='root';
> UPDATE user SET plugin="mysql_native_password";
> FLUSH PRIVILEGES;
> quit;
androidでadbのインストールする際にエラーが出る場合

# androidにapkがインストールできない。

androidのapkをwindows10のコマンドプロンプトのadbを利用し、インストール`sony Xperia Z3 compact / android6.0.1`にインストールをしようとした際に以下のエラーが発生。
<pre>
// インストールコマンド
adb install -r  C:\Users\hoge\Desktop\アプリ\apk\hoge-app.apk

// エラー文言
Performing Push Install
adb: error: failed to copy  to '/data/local/tmp/./.': remote Is a directory
rm: /data/local/tmp/.: Is a directory
</pre>

# 他の端末を利用するとすんなりインストール出来る。

apk側の問題かと思い、`Pixel 3a / android10.0.0`にも同様のコマンドでインストールを試みた。
<pre>
// インストールコマンド
adb install -r  C:\Users\hoge\Desktop\アプリ\apk\hoge-app.apk

Performing Streamed Install
Success
</pre>

問題なくインストール出来、起動も確認した。
恐らく、adbかandroidのバージョンによる問題かと思われる。

# 直下に移動して、相対パスを指定してインストール 

<pre>
// apk保存直下に遷移
cd C:\Users\hoge\Desktop\アプリ\apk\

// 相対パスでインストールファイルを指定
adb install -r hoge-app.apk
Performing Push Install
hoge-app.apk: 1 file pushed. 2.6 MB/s (7941906 bytes in 2.968s)
        pkg: /data/local/tmp/hoge-app.apk
Success
</pre>

無事にインストールを確認した。
インストール方法の違いなのかもしれない。

余談...
後日、絶対パスでのインストールを試したら、すんなりとインストールできた。なぜ？？？
【MAMP】MAMP環境構築する方法

# ①MAMPのダウンロード
MAMPのホームページにアクセスし、MAMPをダウンロード
[MAMP](https://www.mamp.info/en/downloads/)

# ②MAMPアプリを開く
Finderからアプリケーション→MAMP→MAMP.appを起動

# ③サーバを起動
「Start Servers」ボタンを押下

# ④プロジェクトのディレクトリ作成
アプリケーション→MAMP→htdocs配下に対象ディレクトリ作成

```
$ cd /Applications/MAMP/htdocs
```
```
$ mkdir php
```

# ⑤PHPファイル作成
③で作成したディレクトリ配下にphpファイルを作成

```
$ cd /Applications/MAMP/htdocs/php
```
```
$ touch sample01.php
```

# ⑥PHPファイル編集

作成したPHPファイルにソースコードを書く

# ⑦Webブラウザからアクセス
http://localhost:8888/対象ディレクトリ/対象ファイル にアクセス

<pre>
（例）http://localhost:8888/php/sample01.php
</pre>
【SQL】COUNT(*)とCOUNT(カラム名)の違い

# はじめに
`COUNT`句に`*`を指定した場合と`カラム名`を指定した場合の挙動の違いが理解できていなかったため、この記事を書くことで理解を深める。

# この記事の対象者
`COUNT(*)`と`COUNT(カラム名)`の違いを知らない人

# 結論
- `COUNT(*)`はNULL値かどうかに関係なく、取得された行の数を返す
- `COUNT(カラム名)`はNULL値でない値の行数を返す

# 実験
実際に挙動を確認する。

- 実行環境

```
# mysql --version
mysql  Ver 8.0.18 for Linux on x86_64 (MySQL Community Server - GPL)
```

- テーブル

```sql
CREATE TABLE shohin (
    id INTEGER NOT NULL PRIMARY KEY
,   name VARCHAR(20)
,   price INTEGER
);
```

- レコード

```
+----+--------+-------+
| id | name   | price |
+----+--------+-------+
|  1 | apple  |   100 |
|  2 | banana |   120 |
|  3 | grape  |   140 |
|  4 | melon  |  NULL |
|  5 | kiwi   |   120 |
+----+--------+-------+
```

## COUNT(*)の場合
```sql
select count(*) from shohin;
```

```
+----------+
| count(*) |
+----------+
|        5 |
+----------+
```

## COUNT(カラム名)の場合
```sql
select count(price) from shohin;
```

```
+----------+
| count(*) |
+----------+
|        4 |
+----------+
```

# まとめ
SQLのCOUNT句を実際に実行することで理解を深めた。

# 参考
・MySQL COUNT句 リファレンス
https://dev.mysql.com/doc/refman/8.0/en/group-by-functions.html#function_count
GitHubへのpush

Githubのpushまでの流れ
============

手順
------------
1．リモートリポジトリの作成
2．ローカルリポジトリの作成
3．GitHubへのpush

1.GitHub上でリモートリポジトリを作成
---

1．右上の「+」から「New Repository」を選択
<img width="938" alt="github_remote_repository.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487320/2e7bf74c-4555-3ff8-603b-5899b9ec8ec5.png">

2．「Repository name」にリポジトリ名を追加
3．「Create Repository」を選択
<img width="926" alt="github_create_repository.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487320/587cb014-5038-f26d-e24a-b420de901ed4.png">

4．以上でリモートリポジトリの作成が完了、URLをのちほど使用
<img width="654" alt="github_get_repository_url.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487320/771ed6fa-9f8f-609c-bb26-1610581588db.png">



2.ローカルリポジトリの作成
----
リポジトリを作成するディレクトリへ移動
README.mdの作成

```
touch README.md
```
リポジトリの作成

```
git init
```
ステージングに登録

```
$git add .　　　　　　　　　　　　// すべてのファイルをステージングに登録
または
git add <<ファイルのフルパス>> // 指定したファイルをステージングに登録
```
ローカルリポジトリにコミット

```
git commit -m "first commit"
```
ローカルリポジトリの確認

```
git log
```


3.GitHubへのpush
----
URL指定

```
git remote add origin <プッシュするGitHubのURL>
```
※リモートリポジトリ作成時のURLを指定

プッシュ

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


間違ったときの対応
=====

ステージングの登録解除

```
git reset HEAD
```
コミットの取り消し

```
git reset --hard HEAD^
```
コミットの上書き

```
git commit --amend
```

ブランチ
=====
ブランチの作成

```
git branch <作成したいbranch名>
```

ブランチの削除（マージ済みのブランチ）

```
git branch -d <削除したいbranch名>
```

ブランチの削除（マージしていないブランチ）
```
git branch -D <削除したいbranch名>
```

ブランチ一括削除（マージしていないブランチ）
※削除したくないブランチに移動してから実行する
```
git branch | xargs git branch -D
```


git addしたときのwarning
=====
git addしたときに以下のwarningが出ることがあります。
改行コードのCRLFをLFに変更しようとしているようです。

```
git add .
warning: CRLF will be replaced by LF in lib/view/Application.dart.
The file will have its original line endings in your working directory.
```
以下をautoCRLFをfalseに設定

```
git config --global core.autoCRLF false
```



参考文献
=====

- [GitHub登録からプッシュまでの流れ](^https://qiita.com/KosukeQiita/items/cf39d2922b77ac93f51d)
- [git の add を取り消す](^https://qiita.com/nabezokodaikon/items/7ee4900d28d8d863978e)
- [git addしたらCRLF will be replaced by LFなエラー](^https://qiita.com/suzuki-koya/items/6b9f1e79b9d662e15afe)

その他
=====
gerritは使用しているのですが、GitHub、Qiita初心者なのでまとめました。
間違い等あればご指摘いただけますと幸いです。
無料で利用可能な開発向けサービス/素材集

# はじめに
個人プロジェクトや、立ち上げたばかりのプロジェクトの場合、利用するサービスやリソースはできるだけ費用を抑えたいものです。それが無料であれば、なおさら嬉しいことでしょう。この記事では、そのような無料で利用できる(もしくは無料の利用枠がある)サービスやリソースなどの情報をまとめた記事やサイトを紹介します。

# [free-for.dev](https://free-for.dev)
無料で利用可能な開発向けサービスなどを網羅的にまとめたサイトです。その情報の多さは群を抜いており、他のサイトも後述するものの、ほぼこれだけで情報収集が完結するのではないかと思われるほとどです。

# [public-apis](https://github.com/public-apis/public-apis)
無料で利用可能なAPIをまとめた記事です。膨大な量のAPIがまとめられているので、「バックエンドはまだ用意できていないけど、とりあえずサンプルレベルのクライアントを作りたい」というような場合に重宝するかもしれません。

# [awesome-stock-resources](https://github.com/neutraltone/awesome-stock-resources)
無料で利用可能なリソースを紹介する記事です。画像、動画、音声、アイコンといったあらゆる素材が紹介されており、開発途中で仮置したいような素材はだいたいここから見つけ出すことができそうです。
git 設定

Gitの設定
========

ユーザー名
--------

```
$git config --global user.name <ユーザー名>
```

メールアドレス
--------

```
$git config --global user.email <メールアドレス>
```

エディター変更
---------
Sakuraエディターへの変更

```
$ git config --global core.editor "'C:/Program Files (x86)/sakura/sakura.exe' -CODE=4"
```


参考文献
--------
サルでもわかるGit入門 https://backlog.com/ja/git-tutorial/intro/06/

GitBashで起動するテキストエディタの変更
https://qiita.com/shun_amakusa/items/e5d2130e2a76f530692a
Raspberry Pi と Raspbian のバージョンを調べるコマンドやファイル

## Raspberry Pi のモデル情報

### /proc/device-tree/model

Raspberry Pi 3 Model B の場合。

```
$ cat /proc/device-tree/model
Raspberry Pi 3 Model B Rev 1.2
```

/proc/cpuinfo は当てにならない機種があるようなので参照しないほうが良い。

[Raspberry Pi Documentation](https://www.raspberrypi.org/documentation//technical-faq.md)

> Why does cpuinfo report I have a BCM2835?
> 
> The upstream Linux kernel developers had decided that all models of Raspberry Pi return bcm2835 as the SoC name. At Raspberry Pi we like to use as much upstream kernel code as possible, as it makes software maintenance much easier, so we use this code. Unfortunately, it means that cat /proc/cpuinfo is inaccurate on later Raspberry Pi models that use different SoCs. You can use cat /proc/device-tree/model to get an accurate description of the SoC on your Pi model.

## Raspbian のバージョン

### /etc/os-release

/etc/os-release は /usr/lib/os-release へのシンボリックリンクになっている。

```
$ cat /etc/os-release
PRETTY_NAME="Raspbian GNU/Linux 10 (buster)"
NAME="Raspbian GNU/Linux"
VERSION_ID="10"
VERSION="10 (buster)"
VERSION_CODENAME=buster
ID=raspbian
ID_LIKE=debian
HOME_URL="http://www.raspbian.org/"
SUPPORT_URL="http://www.raspbian.org/RaspbianForums"
BUG_REPORT_URL="http://www.raspbian.org/RaspbianBugs"
```

### /etc/debian_version

```
$ cat /etc/debian_version
10.2
```

## LSB (Linux Standard Base) 情報

```
$ lsb_release -a
No LSB modules are available.
Distributor ID:	Raspbian
Description:	Raspbian GNU/Linux 10 (buster)
Release:	10
Codename:	buster
```

## カーネル情報

```
$ uname -m
armv7l

$ uname -o
GNU/Linux

$ uname -r
4.19.75-v7+

$ uname -s
Linux

$ uname -v
#1270 SMP Tue Sep 24 18:45:11 BST 2019

$ uname -morsv
Linux 4.19.75-v7+ #1270 SMP Tue Sep 24 18:45:11 BST 2019 armv7l GNU/Linux

$ uname -a
Linux raspberrypi 4.19.75-v7+ #1270 SMP Tue Sep 24 18:45:11 BST 2019 armv7l GNU/Linux
```

## 参考資料

- [Raspberry Pi Documentation](https://www.raspberrypi.org/documentation//technical-faq.md)
- [os\-release\(5\) — systemd — Debian buster — Debian Manpages](https://manpages.debian.org/buster/systemd/os-release.5.en.html)
- [Debian \-\- buster の lsb\-release パッケージに関する詳細](https://packages.debian.org/buster/lsb-release)
- [lsb\_release\(1\) — lsb\-release — Debian buster — Debian Manpages](https://manpages.debian.org/buster/lsb-release/lsb_release.1.en.html)
- [uname\(1\) — manpages\-ja — Debian buster — Debian Manpages](https://manpages.debian.org/buster/manpages-ja/uname.1.ja.html)
SourcegraphでiPad上のコードリーディング環境を整える

# はじめに

[Sourcegraph](https://sourcegraph.com/)はブラウザ上でGitリポジトリ上のソースコードを検索・分析できるツールです。
このツールを使うとGitHub上のパブリックリポジトリに対して簡単にコードリーディングを行う環境を準備することができます。

# 前提
* 本記事では、Sourcegraphの使い方は説明しません。
* GitHub上のパブリックリポジトリを対象とします。
    * プライベートリポジトリを対象とする場合は、自前のサーバにオープンソースのSourcegraphをインストールする必要があるかもしれません。
        * こちらについては詳しくは調べていません。
* iPad環境を想定します。
    * iPhoneでも大丈夫だと思いますが、画面が小さいため個人的にコードリーディングには適さない気がします。
    * また、Apple Pencilを使うとコードリーディングと相性が良さそうです。
    * PC上でコードリーディングする場合は、[Chrome拡張](https://chrome.google.com/webstore/detail/sourcegraph/dgjhfomjieaadpoljlnidmbgkdffpack)をインストールすると便利かもしれません。
* iOSのショートカット機能を使用するため、iPadのiOSバージョンはiOS12以上を使用します。

# Sourcegraphのコードリーディング用のURL

SourcegraphのドメインとGitHubのリポジトリのURLを組み合わせると、GitHubリポジトリ上のソースコードを参照することができます。

URLの形式は次の通りです。

```
https://sourcegraph.com/github.com/<リポジトリのパス>
```

例えば、Swiftのソースコードを参照したい場合は、```apple/swift```をリポジトリのパスに指定します。


[https://sourcegraph.com/github.com/apple/swift](https://sourcegraph.com/github.com/apple/swift)


上記URLをiPadのSafariブラウザなどで開けば、SwiftのソースコードをSourcegraph上で参照できます。

基本的に、リポジトリのパスさえ分かれば、GitHub上の任意のパブリックリポジトリが参照できるのですが、iOSのショートカット機能を使って簡単に参照できるようにすると便利です。

# iOSのショートカットを作る

任意のGitHubのパブリックリポジトリのテキストをアラートで受け取って、コードリーディング用のURL作成し、最後にSafariブラウザを開くショートカットを作成します。


ここで、簡単にフローを説明します。

* ショートカットアプリで、ショートカットの新規作成画面を起動します。
* スクリプティングの```入力を要求を```を追加します。
    * 例えば、```Githubのリポジトリ```を尋ねるに設定します。
* 変数の```変数を設定```を追加します。
    * 例えば、変数```repo```を```指定入力```に設定します。
* アクションのURLを追加します。
    * 例えば、```https://sourcegraph.com/github.com/<変数repo>```に設定します。
* アクションの```URLを開く```を追加します。
* 最後に完了ボタンを押して、ショートカットの名称を付ければショートカットの作成は完了です。

# iOSのショートカットの実行

上記で作成したショートカットを選択すると、タイトルが```GitHubのリポジトリ```のアラートが表示されます。ここで、```apple/swift```を入力し、OKボタンを押下すれば、Safariのブラウザが自動的に起動します。

参考までに、ショートカットの[共有リンク](https://www.icloud.com/shortcuts/b8a7bc57a498494f8b7e4b55bc067807)を貼っておきます。
iOS12以上の端末から、上記の共有リンクをクリックすると、ショートカットをインストールすることができます。

# さいごに

今回は、GitHubのパブリックリポジトリに対して、iPadからお手軽にコードリーディングできる環境を整えました。今後、プライベートリポジトリに対しても簡単にコードリーディングできる環境を整えたいと思います。
Windows batで疑似関数

# 概要
batで関数を擬似的に扱うためのもの
備忘録程度に記載

# 基本形
~~~bat
:func
  setlocal
  @rem なにか関数化したい処理
  endlocal
exit /b
~~~
※setlocal,endlocalは必要に応じて記載

##使い方
~~~bat:main.bat
@echo off
call :hello
exit

:hello
  setlocal
  echo hello
  endlocal
exit /b
~~~

~~~bat:output
hello
~~~

#発展1　引数ありの場合
~~~bat:argument.bat
@echo off
call :argument hello world
exit

:argument
  setlocal
  echo %1 %2
  endlocal
exit /b
~~~
~~~bat:output
hello world
~~~
#発展2　返り値が固定量の場合(not errorlevel)
~~~bat:return.bat
@echo off
call :return
echo %ret%
exit

:return
  setlocal
  set ret=hello
  endlocal&set ret=%ret%
exit /b
~~~
~~~bat:output
hello
~~~
※返り値を増やしたい場合はendlocal部に`&set 返り値名=%返り値名%`を継ぎ足す

#発展3　返り値が不定量の場合(not errorlevel)
~~~bat:returnval.bat
@echo off
call :returnval hello world
echo %ret[0]% %ret[1]%
pause
exit

:returnval
  @rem 遅延展開の有効化
  setlocal enabledelayedexpansion
  @rem 初期化
  set cnt=0
  set tmpdata=
  set LF=^


  @rem 返したいデータの集約
  :returnval_re1 
    set tmpdata=%tmpdata%%cnt%,%1;
    shift
  if not "%1"=="" set /a cnt+=1&goto returnval_re1
  @rem 値を返す
  set tmpdata=%tmpdata:;=!LF!%
  for /f "tokens=1,2 delims=," %%i in ("!tmpdata!") do endlocal&set ret[%%i]=%%j
exit /b
~~~
~~~bat:output
hello world
~~~
※コマンドプロンプトの仕様上1行に入力できる文字数が8190文字までのため`tmpdata`には最大8121文字までしか入らない
　それ以上返したい場合はデータの圧縮やファイル書き出しなどの対策が必要


##参考
[setlocal～endlocalの外に変数をたくさん持ち出す](https://p--q.blogspot.com/2014/02/setlocalendlocal.html?m=1)
外部キーについて

外部キーというのは、「他のテーブルの主キー」を保存するカラムのことをいう。

２つのテーブルを紐づけるとき、データが重複してるのを解消すためのもの

userテーブルのidが主キーでtopicテーブルに外部キーを設けるときuser_idカラムとなる。
（has_many、belongs_toをモデルに書く）
[備忘録]特定要素マウスオーバー時にボタン表示

#やりたいこと
初期状態では非表示で、特定の要素のマウスオーバーでボタンをフワッとうっすら表示させる

#ソース
HTML
Divのマウスオーバーで、×ボタン(delete-button)をフワッと表示させたい例
(jQueryは読み込んでおく)

```html
<div id="hoge">
	<input class="delete-button" type="button" value="×">
	<p>なにかしらの表示とかほかの要素とか</p>
</div>
```
CSS　
×ボタンをdisplay: none;で非表示にしておく
ポジションとかは適当


```CSS
.delete-button {
	display: none;
	position: absolute;
	top: 3%;
	left: 85%;
	opacity: 0.5;
}

.delete-button:hover {
	opacity: 0.9;
}
```

js
Div要素のhoverのアクションで、×ボタンをfadeIn/fadeOutさせる

```javascript
$(hoge).hover(function() {
	$(this).children('.delete-button').fadeIn(150);
}, function() {
	$(this).children('.delete-button').fadeOut(150);
});
```
#結果

![4c527d5a59a82511fa87.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559813/5e87630b-edb8-9917-125e-49a2e0d2e99b.gif)
Command Line Toolsをアップデートする

##0. 前書き
環境：macOS 10.15.2
参考：https://stackoverflow.com/a/53364628

####なぜ行ったか
Homebrewインストール後にWarningが表示された。

```terminal
$ brew doctor
Please note that these warnings are just used to help the Homebrew maintainers
with debugging if you file an issue. If everything you use Homebrew for is
working fine: please don't worry or file an issue; just ignore this. Thanks!

Warning: A newer Command Line Tools release is available.
Update them from Software Update in System Preferences or
https://developer.apple.com/download/more/.
```

##1. アップデート可能かどうか調べる
```terminal
$ softwareupdate --list
Software Update Tool

Finding available software
Software Update found the following new or updated software:
* Label: Command Line Tools for Xcode-11.3
	Title: Command Line Tools for Xcode, Version: 11.3, Size: 224878K, Recommended: YES,
```

##2. アップデートを実行する
`* Label: <name>`  →  `softwareupdate -i "<name>"`

```terminal
$ softwareupdate -i "Command Line Tools for Xcode-11.3"
Downloading Command Line Tools for Xcode
Downloaded Command Line Tools for Xcode
Installing Command Line Tools for Xcode
Done with Command Line Tools for Xcode
Done.
```

##4. 実行後
```terminal
$ brew doctor
Your system is ready to brew.
```
FlutterのAppBarにCircleAvatarを設置してタップ遷移してみた。

大晦日ですね。皆様本年は良い年でしたでしょうか？
今RIZINを見ながらカキカキしています。
よくあるやつだと思うんですけど、CircleAvatarにtapイベントってどうやるんだ？となったのでメモがてら記載します。
こんなときはStackを使うのです！ウィジェットの上にボタンウィジェットを重ねてタップできるようにします。
例ではalignmentとPaddingで位置調整をしています。ここはセンスで。

```main.dart
appBar: AppBar(
        backgroundColor: Colors.white,
        title: Text('サンプル',
            style: TextStyle(
              fontSize: 20,
              color: Colors.black,
              fontWeight: FontWeight.bold,
            )),
        actions: <Widget>[
          Padding(
            padding: EdgeInsets.only(right: 10.0),
            // タップイベントを効かせるためにStackで包んでCircleAvatarとボタンウィジェットを重ねる
            child: Stack(
              alignment: Alignment.centerRight,
              children: <Widget>[
                CircleAvatar(
                  radius: 20,
                  child: ClipOval(
                    child: Image.network(
                      "https://i.pravatar.cc",
                    ),
                  ),
                  backgroundColor: AppColor.mainColor,
                ),
                Positioned(
                  right: 0.0,
                  width: 40.0,
                  height: 40.0,
                  child: RawMaterialButton(
                    onPressed: () {
                      Navigator.push(
                          context,
                          MaterialPageRoute(builder: (context) => MyPageScreen(title: 'マイページ')));
                    },
                    shape: CircleBorder(),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),

```

皆さんにとって来年も良い年でありますように。
でわ！！
Nuxt.jsでSass記述ができるようにする方法

##Nuxt.jsでSass記述ができるようにする方法


ターミナルで下記コマンドを実行します。

```
npm install --save-dev node-sass sass-loader
```
pugなどまとめてインストールしたい場合は下記で実行できます。

```
npm install --save-dev pug@2.0.3 pug-plain-loader coffeescript coffee-loader node-sass sass-loader
```
package.jsonを見ることでインストールされていることが確認できます。
![vue sass.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559347/dfeef188-42d6-76a0-e15f-fb4cfe812c15.png)

これでNuxt.jsでもSass記述ができるようになります。


・SASS記法の場合

```sass:index.vue
<style lang="sass" scoped>
  .done
       font-size: 20px
       background: blue
</style>
```




・SCSS記法の場合

```scss:index.vue
<style lang="scss" scoped>
div {
    margin: 0 auto;
    p {
        padding: 10px;
        span {
             color: aqua;
        }
    }
}
</style>
```

scopedを記述することにより、そのファイル内だけにcssを適用することができます。
Java(remove)

【remove】
ArrayListの要素を削除する際に使用するメソッドである。
以下のように削除したい要素のインデックスを指定して使用する。
変数名.remove(インデックス)

Java（add）の回で使用したArrayList「array」で
removeメソッドで指定した場所の要素を削除する。

    ArrayList<String> array = new ArrayList<String>();
    
    array.add("日本語");
    array.add("英語");
    array.add("フランス語");
    array.add("中国語");
    array.add("ドイツ語");

    System.out.println(array);
    
    [日本語, 英語, フランス語, 中国語, ドイツ語]

インデックス2の「フランス語」を削除する。

    array.remove(2);
    System.out.println(array);

リストの中を出力すると以下のようになる。

    [日本語, 英語, 中国語, ドイツ語]

指定した要素の値が削除される。
今年あったことを振り返る

# 今年あったことを振り返る

今日は、大晦日今年あったことを振り返る。
つらつらと振り返る

## 受託案件

受託案件を、8件ほどやりました。
前年までは受けておりませんでしたが、今年から開始しました。
おととしに作った会社の本格始動でしょうか

先に失敗談からｗ

### 受託開発での失敗1

認証と検索があるだけの簡単なシステムでした。
なので、そのときに使ったことのなかったNuxtで行こうと決めて使いました。
ですが、慣れていないため開発が遅れ、一週間前に手に馴染んだPythonで作り直しました。
このときは、手に馴染んだシステムで作って余裕があれば書き直すのがいいのかと思いました。
ちょっとハラハラしましたねｗ

### 受託開発での失敗2

リリースしたシステムの公開したのですが、インターネットエクスプローラーが全然動かなかった。
お客さんが気づく前に、直さねばと思いましたが、Windowsがない。
環境がない。そのときは焦っていて、VMとか思いつかず、デザイナさん出動。
なんとか夕方くらいに直しました。
営業をしてくれている仲間は怒っているし。
めちゃくちゃ焦りましたｗｗ
IE嫌い。。
それからは、リリースする前にIEでのテストを忘れなくなりましたｗ

### 受託開発での失敗3

WordpressをAWSで立ち上げていたのですが、良くサーバが落ちていました。
クライアントにまで気づかれて厳重注意。
夜、寝る前もチェックして、朝早く起きてチェックして、ご飯食べててもチェックしてｗ
PHPとApacheのメモリ管理を調査し、解決するまでは毎日気が気ではありませんでした。
今となっちゃ簡単なんですが、その当時はわかりませんでしたｗ
美容室に行っている間に止まっちゃっていたときは、最悪でしたｗ
でも、こういうことも経験しないとわからないよね。突っ込んでいくの大事！

### 受託開発でのよかったこと1

お金がいっぱいもらえるようになりました。
何よりも運用やサーバ代など定期的に入る金額がうれしいです。

### 受託開発でのよかったこと2

いろんな技術を調べて、積極的に取り入れるようになった。
私はドキュメントはあまり書かないのですが、Qiitaなどに残すようになりました。
あと、Inkdrop便利！おすすめ！

### 受託開発でのよかったこと3

いろんな方に仕事を任せることが増え、コミュニケーションする能力が上がったように思います。
また、仕事をしていただいた方からも、逆に仕事をもらえたり縁が広がり嬉しいです！
そうやって広がっていくんですね。

### 受託開発でのよかったこと4

営業するようにもなりました。
また、勉強会などにも参加するようになりました。
人と接しいろいろ刺激をもらっています。

## 来年の目標

・営業を頑張る
・アプリやサイトを、いろいろ作成する
・開発者が使えるプラットフォームを作る
【Vue.js】Vuetifyのv-tabsをscript側から制御する

# 概要
以下、Vue.jsのUIライブラリである[Vuetify](https://vuetifyjs.com/en/)の話です。
`v-dialog`に`v-tabs`を組み込んでいて`v-dialog`の表示非表示を変更した際、`v-tabs`は必ず1番目のものを表示する仕様にしたかった時のメモ。

つまるところ`v-tabs`におけるv-modelについてです。
`v-tabs`のマニュアルをソースまで見れば書かれているのですが、見出しや説明文からは判断がつかないのが曲者でした。

# 方法
```vuejs
<template>
  <v-tabs v-model="model">
    <v-tab href="#tab-1">タブ1</v-tab>
    <v-tab href="#tab-2">タブ2</v-tab>
    <v-tab href="#tab-3">タブ3</v-tab>
  </v-tabs>
  <v-tabs-items v-model="model">
    <v-tab-item value="tab-1">
      タブ1で表示するコンテンツ    
    </v-tab-item>
    <v-tab-item value="tab-2">
      タブ2で表示するコンテンツ    
    </v-tab-item>
    <v-tab-item value="tab-3">
      タブ3で表示するコンテンツ    
    </v-tab-item>
  </v-tabs-items>
</template>

<script>
export default {
  data () {
    return {
      model: 'tab-1'
    }
  }
}
</script>
```

v-tabsに関する部分だけを抜粋しています。意識する点としては

- `v-tabs`と`v-tabs-items`の`v-model`は同じものを指定する
- `v-tab-item`の`value`の値が各タブを指定するのに使用するキーの扱いになる
- `v-tab`の`href`の右辺はタブ指定用キーの値に`#`を付ける
- `v-model`でバインドするデータは必ず正しく初期化する
  - `v-tab-item`の`value`の値のいずれかをセットする
  - もしdata内でどのタブにも一致しない値を指定した場合、1つ目のタブが表示される

あとはmethod等からmodelにタブ指定用キーをセットすれば、そのコードの実行タイミングで任意のタブに移動します。

```vuejs
 this.model = 'tab-3'  //3つ目のタブに移動
```

私のケースだと、`v-dialog`の非表示or再表示時にセットすることで強制的に1つ目を表示させました。
ちなみにどのタブにも一致しない値を初期描画後にセットした場合も、1つ目のタブに移動すると思います。
もっと簡潔に書く方法があるような気がするのでどなたかご教授ください...。

# 参考
[Vuetify公式 Tabs](https://vuetifyjs.com/en/components/tabs)
Splunk Answersで質問する

[The 2019-2020 'Where Will Your Karma Take You' Contest on Splunk Answers has Launched!](https://www.splunk.com/en_us/blog/tips-and-tricks/the-2019-2020-where-will-your-karma-take-you-contest-on-splunk-answers-has-launched.html?utm_source=twitter&utm_medium=organicsocial&linkId=79822261)
ふと、Splunkのblogをみていると自分が載っていたので、記念に書いてます。
かなりびっくりしました。メールとかこなかったので。

(2020/06/06)サイトが移行するということで

|順位|アカウント|karma
|:--|:-:|:--|
| 46 | to4kawa | 10096 |
が最後の結果でした。

`Joined: Jul 05, 2019 at 06:23 PM`　なので一年の結果としては頑張ったのではないでしょうか。

#Answersとは
なんかSplunkで困ったことがあったら、聞いてもらえると回答が返ってくる[サイト]
(https://answers.splunk.com/)
[yahoo!知恵袋](https://chiebukuro.yahoo.co.jp/)くらいの扱いで問題ないと思う

#Answersの聞き方

-  tag `japanese`をつけよう
 - 色々な方がfollowしているので日本語の対応はこれをつけてもらうと速いです。

-  ログを提示しよう
 - わかります。生なログ出せないですよね。でも、SPL書くのにはログを見ないとわからないんですよ。大事なところはXXXとかで消してもらって、提示してください

-  期待している結果を描こう
 - `table`の形だとわかりやすいですね。それ以外でも条件とか何を知りたいのか書いて貰えば、クエリーは作ります。
 - やりたいことは結構書いているんですよ。でも期待している結果の形がよくわからないことはよくあります。
 - 逆に期待している結果の形が提示されていると、クエリー書けたりします。

-  クエリーを書こう
 - 書いてもらえると問題点がわかるので、修正ができます。`join`や`transaction`使っているなら、**そんな大人、修正してやる**

-  質問の解決とあなたの問題の解決は違います
 - 一つの問題が解決すると、新しい問題がわかりますよね。わかります。でも、サイトの構成上一旦締めてもらいたいな〜。大丈夫です。最後まで付き合いますので。
 
#まとめ
日本語の質問についてはSplunkの中の人も見ているらしいので、質問してもらえれば。
自分だと、このクエリーはどうするの？だとすごく嬉しいです。

良いお年を、来年もよろしくお願いします。Happy Splunking!
【WebGL】Three.jsを習得するためにやったことまとめ（随時更新）

WebGL（ブラウザ3DCG）に憧れて、ライブラリThree.jsに取り組む。
2019年は中断してしまったが2020年に再開すべく、「[JSライブラリ](https://qiita.com/i-ryo/items/a2431232d62d87161f7f)」記事から独立させました！

（その他のJSライブラリについてはこちら）
※参考：[JSライブラリ&フレームワークを試してみたシリーズまとめ（随時更新）](https://qiita.com/i-ryo/items/a2431232d62d87161f7f)

※2022/11/15追記：[Next.js環境でThree.jsを動かす](#threejs--nextjs)

## WebGLとは

WebGL APIについてはこちら
※参考：[周回遅れでもWebGLを事始める！canvas大地に立つ!!](https://www.i-ryo.com/entry/2018/01/18/224837)


## Three.js入門（入門編）

### 回る箱

ICS MEDIAサイトの「Three.js入門」に入門してみる！クルクル回転する立方体を作る。

※参考：[Three.js入門サイトに私も入門する！！](https://www.i-ryo.com/entry/2018/06/11/224000)

### 値の打ち替え

クルクル回る立方体のいろいろな値を打ち替えて、サイズを変えたり形を変えたりしてみた。

※参考：[【Three.js】回る箱をいろいろ打ち替えてみる](https://www.i-ryo.com/entry/2018/06/29/222213)

### マテリアルとライティング

画像を球体に貼ってみた（2020/01/09追記！）

※参考：[【Three.js】マテリアルとライティング設定（入門編に再入門！）](https://www.i-ryo.com/entry/2020/01/09/185619)

### ジオメトリ

ジオメトリ設定で色々な形状を作る（2020/03/08追加！）

※参考：[【Three.js】ジオメトリ設定で形状を色々変えてみる](https://www.i-ryo.com/entry/2020/03/08/172329)

### カメラポジション

カメラポジションを理解しよとしたら三角関数の勉強になった（2020/04/13追加！）

※参考：[【Three.js】カメラ制御を実現している「三角関数」を理解する！（サイン、コサイン、タンジェント）](https://www.i-ryo.com/entry/2020/04/13/071034)

OrbitControls.jsを使ってカメラを360度グリングリン動かす（2020/05/02追加！）

※参考：[【Three.js】OrbitControls.jsでカメラの位置をインタラクティブに動かす！](https://www.i-ryo.com/entry/2020/05/02/215245)

# Three.js入門（基礎編）

いろんなマテリアルを設定して比較（2020/05/17追加）

※参考：[【Three.js】いろいろなマテリアルを貼ってみる](https://www.i-ryo.com/entry/2020/05/17/211432)

# Three.js + Next.js

Next.js環境でThree.jsを動かす（**2022/11/15追加**）

※参考：[【Three.js + Next.js】Three.js再始動！Next.js環境でThree.jsを動かすの巻](https://www.i-ryo.com/entry/2022/11/15/133243)

随時更新していきます！
Power BIカスタムビジュアル「Waffle Chart」

## はじめに

　PowerBIのカスタムビジュアルより、ワッフルチャート（ワッフルのようなつぶつぶ四角形の相対的な塗りつぶし）で表現できる「Waffile Chart」を紹介します。
　[「できるPower BI」](https://qiita.com/ishiayaya/items/38c0c03c626bc048f524)の関連ページは、前回の[「Timeline Slicer」](https://qiita.com/ishiayaya/items/59a8cca257b03ed291f1)と同じくレッスン38（P158）です。

## カスタムビジュアルはどこから

　画面の「視覚化」の「・・・」から、マーケットプレイスを呼び出します。

マーケットプレイスでは「Waffle」で検索します。複数の候補から該当を選択してください。今回紹介するワッフルチャートは、[kiewic.com提供](https://appsource.microsoft.com/en-us/product/power-bi-visuals/WA104381049)によるものです。

![スクリーンショット 2019-12-31 17.26.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/e3aa8fb1-4872-efeb-c5e7-b938c0383ccc.png)

## 使い方

![写真 2019-12-31 17 18 43.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/7bd26da7-5ec3-c63c-9428-a10ffeb1946a.jpeg)



　図にあるように、「Values」に相対評価したい値（例えば、売上）を持ってきます。
そして、「Category Data」に店舗のような相対評価したいものを持ってきます。すると、最も売上がよい店舗を100とした場合の相対評価として、他の店舗の相対値がでます。

　[オフィシャルページ](https://appsource.microsoft.com/en-us/product/power-bi-visuals/WA104381049)のショートムービー動画では、目標値に対して、現在何%の相対値であるあるかを出すようなことができると紹介されています。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Using custom visuals - Waffle Chartの使い方 <a href="https://t.co/tYt9zGuihP">https://t.co/tYt9zGuihP</a> <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a>さんから <a href="https://twitter.com/hashtag/powerbi?src=hash&amp;ref_src=twsrc%5Etfw">#powerbi</a> <a href="https://twitter.com/hashtag/PBIJP?src=hash&amp;ref_src=twsrc%5Etfw">#PBIJP</a></p>&mdash; 石川陽一 Yoichi Ishikawa (@ishiayaya) <a href="https://twitter.com/ishiayaya/status/1211926134733959168?ref_src=twsrc%5Etfw">December 31, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

動画の説明等を参照してください。

　カスタマイズとして、既定値が「●」のアイコンの色等を「視覚化」/「書式」で設定で変更できます。

また、アイコンの形も変更することができます。SVGファイルからパスデータを取り出し、データソースとしてPower BIに読み込んでおき、「Paths」に読み込みます。

　私が試したのは、[SVGを提供するサイトから「ぶたの貯金箱」](https://icooon-mono.com/10435-%e3%83%96%e3%82%bf%e3%81%ae%e8%b2%af%e9%87%91%e7%ae%b1%e3%81%ae%e7%b7%9a%e7%94%bb%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3/)を取得、

![buta.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/23d01014-1779-e673-bc80-ace338ff7acc.png)


オフィシャルページに説明がある[パスデータを変換サイト](https://kiewic.com/paths/)で取り出して

![pathdata.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/928543bd-fe87-b173-19e0-e986bbd74ef7.png)

書式の「Paths」に指定して、呼び出してみました....

![waffle-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/94c74c17-3152-4f8b-3ca4-2d33511a95aa.png)


 が、あまり適切な感じにはならなかったです（塗りつぶし画像がいんですかね...）
はじめてのウェブサイト運用備忘録　第三弾

#PHPとDB接続について
今回は、ロリポップサーバー上でPHPとDB(データベース)を使用できるように設定していきたいと思います。

#PHPを設定する
今回はモジュール版を使用するつもりなので、特に設定することはありませんでした。
バージョンを確認するくらいです(今回は7.3を使用します)。
もし、CGI版を使用する方は、ロリポップが用意している参考サイトを元に設定してください。

参考URL:https://lolipop.jp/manual/user/php-setting/

#DBを設定する
今回肝になるのはこちらです。
今回作るサイトではPHPを使用した検索機能をつけるつもりなのですが、DBが無いとデータが保存できません。
というわけで、DB設定の方法を見ていきたいと思います。

##DBを作る
ロリポップ上でかんたんにDBを作成することができます。
やり方を説明していきます。
まず、下の画像の赤枠のボタンで新しいDBを作成しましょう。
![スライス (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556712/9539dc93-f863-d51c-40fc-5371adf2b774.png)

次に、このような画面が出てくるので指示に従ってDB名やパスワードを指定しましょう。
使用するサーバーは特に変える必要はありません。
![スライス (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556712/4ef5e2e1-5ca8-a3af-d248-4a760d1eed31.png)

##ターミナルからDBに接続する
ターミナルからまずサーバーに接続してください。
接続方法は以前の記事を参考にしてください。

参考URL：https://qiita.com/MMWW/items/91cdf28d21f2f413b6bb

接続できたら、次はこのコマンドを入力してください。

```terminal
$mysql -u [ユーザー名] -h [DBサーバー名] -p
```
つながったらパスワードを求められるので、設定したパスワードを入力してください。
入力に成功したらDBに接続することができます。
MacへのOpenPoseのインストールと実行

## 環境

- MacOS 10.14.6
- Xcode 11.3

参照元:[MacでOpenPose（tf-pose-estimation）のHelloWorldをしました](https://qiita.com/ikekou/items/9a632b10588b423db172)
## Pythonの仮想環境導入
opという名の仮想環境を、Python3に付属のvenvで作ってみる。

めまぐるしく変わる印象があり、Python3の現在優勢な仮想環境がどれなのかはまだ良く分からない。python2のではない、virtualenvというのも強そう。

```
$ python3 -m venv op
$ source op/bin/activate
(op) $ 
```

## ダウンロードとライブラリのインストール

* pipが古いと文句を言われたので、まずupgrade
* cythonとnumpyが無いとエラーで止まるのでまずインストールしています
* のちのためにtensorflowの1.15.0(2.0.0以降はtensorflow.contribが無くなっているので、古いのを使う)、opencv-pythonも入れる

```
(op) $ pip install --upgrade pip
(op) $ git clone https://github.com/ildoonet/tf-pose-estimation
(op) $ cd tf-pose-estimation/
(op) $ pip install numpy cython tensorflow==1.15.0 opencv-python
(op) $ pip install -r requirements.txt
```
## ポストプロセス用のC++ライブラリをビルド
```
(op) $ cd tf_pose/pafprocess
(op) $ swig -python -c++ pafprocess.i && python setup.py build_ext --inplace
```

## Tensorflowグラフファイルのダウンロード
これが結構時間かかりました。

```
(op) $ cd ../..
(op) $ cd models/graph/cmu/
(op) $ bash download.sh
```

## テストの実行

```
(op) $ cd ../../..
(op) $ python -c 'import tf_pose; tf_pose.infer(image="./images/p1.jpg")'
```
![Snip20191222_6](https://user-images.githubusercontent.com/315029/71316318-22360b80-24b1-11ea-84aa-a1c04866e5f2.png)

少し時間がかかり、やたらと WARNINGが出たものの、画像が出力された

## 画像を取ってきて試す

* 参考：[Openposeのインストール(mac)](https://qiita.com/piyopiyohiyoko/items/a9220c3b2f0e75e1a460)
* 画像取得元:[リフティング女子のフリー画像（写真）](https://www.pakutaso.com/20161007281post-9195.html)

<img src="https://user-images.githubusercontent.com/315029/71316585-25cb9180-24b5-11ea-9e00-2dd51a214309.jpg" width=320px>

```
(op) $ python run.py --model=mobilenet_thin --resize=432x368 --image=$HOME/Desktop/football.jpg

```
![Snip20191222_8](https://user-images.githubusercontent.com/315029/71316623-cf128780-24b5-11ea-8d85-b667070d5595.png)

## 仮想環境の終了

```
(op) $ deactivate
$
```

(by団員H)
【NVIDIA Jetson Nano Wi-Fi接続とSSD化・ケースへ格納】


## Wi-Fi接続

USBドングルよりも、バッファローのアダプター
WLI-UTX-AG300/C
が良い感じ。
https://www.buffalo.jp/product/detail/wli-utx-ag300_c.html

ドングルよりもちょっと高価だし、サイズも大きくなってしまうけど、

- AOSS/WPSで接続設定が簡単。
- 接続が切れない（最初に使ってみたUSBドングルはSSH接続が時々切れた）。
- 電源はJetson NanoのUSBポートから取れる。ポートが足りなくなったら外部からでも給電できる。
- LANポートで通信するので、USBポートでのSSDへのアクセスと競合しない（ような気がする。Jetson NanoのUSB3.0ポートは４つあるけど、実体は一つでUSBハブのような仕様になっているらしい。）


## SSD化してケースへ

1TBも使うことはないだろうけど、Samsung SSD 1TB 860QVO を購入。

- Geekwormのストレージ拡張ボード T300 V1.0
- 専用の金属ケース T300-C2

https://geekworm.com/collections/nvidia
を使用した。

ケースには、5Vの給電を行うためのジャンパーピン、電源スイッチ（とジャンパーピン）、リセットスイッチまで付属しているので、後はクーリングファンと5V電源アダプターを準備すれば一通り揃うはず。リセットスイッチはともかく、電源スイッチがないと、いちいちケーブルを抜き差しするしかないのでちょっと面倒。

組み立て方は下記の動画を見ればだいたい分かる。組み立てに必要なのはプラスドライバー１本。
https://www.youtube.com/watch?v=SpUB6h4Akp4

ただ、動画ではクーリングファンをケースに付属のネジで留めているのだけど、なんだかサイズが合わなかった。ネジの頭が小さすぎでうまく留まらない。作業時にビスを留めておくためのピンセットまで付いているのだけど。使ったクーリングファンは、
Noctua NF-A4x20 5V PWM 40mm
クーリングファンに付いていたネジ類もサイズが合わなかったので、結局、ビニタイでヒートシンクに留めてしまった。

サンプルのプログラムをしばらく動かしただけども、CPU温度は上昇傾向なのでファンがないと本格運用は難しいのではないかと思う。


あとは、ストレージ拡張ボードに付いていた謎の二股給電ケーブル。
結局使わなかったけど、根元の方のピンがJetson Nano本体のピンとサイズが違うので、これを利用するためには別の5V電源アダプターを用意しないといけない。たぶん、SSDなら給電不要だと思うけど、HDDを使う場合はUSB給電だとパワー不足になるのかもしれない。
AnsibleでESXi上の仮想マシンに vCSAインストール用のNTP＆DNSサーバを立てる

vCSAのインストールにはNTPとDNSが必要なため(NTPは一応必須ではないですが)、ESXi上の仮想マシンにNTPとDNSを立てる。
(とりあえず動けばいいで作ったので検証用です)

#コントロールノード環境
※Windows10上のvagrant上
クライアントOS: CentOS Linux release 7.6.1810 (Core)
Ansibleのversion: 2.9.1

#ターゲットノード環境
ESXi: 6.7
VMのOS: CentOS Linux release 7.7.1908 (Core)

※[こちらの記事を参照すると](https://qiita.com/hirofumihida/items/e793b8119154e2970001)	vsphere_guestモジュールをAnsibleで使用すればvCenterがない環境でもESXiでも使用できるぽいですが、Ansible2.9で削除されているらしいので今回は使用しません。VMのOSはkickstartを使用してOSレベルでのインストールは自動化しています。

#ファイル構成
```
ansible
├── ansible.cfg
├── contents
│   ├── dnsmasq.conf
│   ├── hosts
│   └── resolv.conf
├── inventory
└── testvm.yml

```

#プレイブック
```testvm.yml
---
- hosts: VMserver
  gather_facts: false                                   
  tasks: 
   - name: set hostname
     hostname: 
       name: vmtest.local.com    

  #必要なパッケージをインストール                        
   - name: upgrade all packages
     yum: 
      name: '*'
      state: latest

   - name: install the openvm-tools
     yum: 
      name: open-vm-tools 
      state: latest

   - name: install the dnsmasq
     yum: 
      name: dnsmasq 
      state: latest

   - name: install the dnsmasq
     yum: 
      name: bind-utils 
      state: latest

   - name: install the ntpd
     yum: 
      name: ntp
      state: latest
  
  #dnsmasqの設定をファイルを置き換えて、起動させる。
   - name: Copy dnsmasqcon
     copy:
        src:  ./contents/dnsmasq.conf
        dest: /etc/dnsmasq.conf
        owner: root
   - name: Copy hosts
     copy:
        src:  ./contents/hosts
        dest: /etc/hosts
        owner: root
   - name: Copy resolv.conf
     copy:
        src:  ./contents/resolv.conf
        dest: /etc/resolv.conf
        owner: root
   - name: start dnsmasq
     systemd:
        state: started
        name: dnsmasq
  #ntpdの設定ファイルを置き換えて起動させる
   - name: start ntpd
     systemd:
        state: started
        name: ntpd
```

#contents
※置き換える設定ファイル

```:dnsmasq.conf
※デフォルトの設定ファイルが非常に長いので別サーバでyum install dnsmasqして作成される/etc/dnsmasq.confをコピーして作成
最終的にコメント以下の設定がdnsmasq.confがコメントアウトされていればOK

[root@testvm ~]# cat /etc/dnsmasq.conf | grep -v "^#" | grep -v "^$"
domain-needed
bogus-priv
strict-order
local=/local.com/
conf-dir=/etc/dnsmasq.d,.rpmnew,.rpmsave,.rpmorig
```
[設定値の参考にしたサイト](https://server.etutsplus.com/dnsmasq-setup-internal-dns/)


```:resolv.conf
nameserver 127.0.0.1
nameserver 8.8.8.8
```

```:hosts
127.0.0.1   localhost localhost.localdomain localhost4 localhost4.localdomain4
::1         localhost localhost.localdomain localhost6 localhost6.localdomain6
"vCSAのデプロイ予定のIP" vcsa.local.com server01
“VMサーバのIP” testvm.local.com dns-server
```


#インベントリ
```:inventory

[VMserver]
”ESXi上の仮想サーバのIP”

[all:vars]
ansible_ssh_port=22
ansible_ssh_user=root
ansible_ssh_pass=password
ansible_sudo_pass=password

```
#ansible.cfg
以下の設定を追記

```
[defaults]
host_key_checking = False
```


#コマンド実行
ansibleディレクトリで実行する

```
# ansible-playbook -i inventory testvm.yml
```
（初学者）機械学習に必要なライブラリやツール

機械学習の未経験者が、必要なライブラリやツールを調べたときのメモ。
Python がよく使われているらしいが、Python を使用する利点の一つとして、Jupyter Notebook（ジュピター・ノートブック） などのツールを利用することで、インタラクティブに開発、データ解析を進めることができる。

調べていると、scikit-learn（サイキット・ラーン）というライブラリがキーワードとして挙がってきた。

- 機械学習分野における重要な Python ライブラリ。
- オープンソースプロジェクト。
- [公式ユーザガイド](https://scikit-learn.org/stable/user_guide.html)
- 科学技術計算を行うためのPythonパッケージ NumPy（ナンパイまたはナムパイ）と SciPy（サイパイ）の上で構築されている。

その他、関連のありそうなライブラリについて。

- グラフ描画ライブラリとしては、matplotlib（マットプロットリブ）がある。
- インタラクティブ開発用のシェルとして、IPython（アイパイソン）がある。
- インタラクティブ開発環境として、Jupyter Notebook がある。
- データを変換したり解析したりするためのライブラリとして、pandas（パンダス、パンダズまたはパンダ） がある。

必要なパッケージが含まれているPythonディストリビューションの一つとして、[Anaconda](https://www.anaconda.com/) （アナコンダ）があり、開発環境の構築に非常に便利。
Python が既にインストールされている場合、pip コマンドでこれらのパッケージをインストールできる。

```bash
pip install numpy scipy matplotlib ipython scikit-learn pandas
```
【Rails】params[:id]がなんとなく分かった

よくみんなが作る掲示板を作っていた時でした。

```ruby:blogs_controller.rb

def destroy
      @blog = Blog.find(params[:id])
      binding.pry
      @blog.destroy
      flash[:success] = "ブログを削除しました"
      redirect_to request.referrer || root_url
end
```

ふと、
```@blog = Blog.find(params[:id])```
の、
```(params[:id])```
って結局なんだ？と思いました。

そこで、**binding.pry**を置いて、削除ボタンをクリックし、ターミナルをみてみました。

<img width="714" alt="スクリーンショット 2019-12-31 17.14.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/2db28299-b4c7-0cda-d4b5-fff0e9159781.png">

!!!!!!!

paramsはどうやら色々な情報が詰め込まれている箱みたいです。
[スタックオーバーフローの回答](https://ja.stackoverflow.com/questions/4795/rails%E3%81%AE-params-%E3%81%A8%E3%81%84%E3%81%86%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%81%8C%E3%82%88%E3%81%8F%E5%88%86%E3%81%8B%E3%82%89%E3%81%AA%E3%81%84)で詳しく説明されていました。
[このQiita](https://qiita.com/ryosuketter/items/44005785f47136a83ae1)もわかりやすかったです。
```params[:id]```を参照することで、消したいブログを```@blog```に格納して、```@blog.destroy```で削除を実行しているんですね！！！
```params[:actoion]```、```params[:controller]```等も使えるみたいですね〜。