OmniAICreator/Qiita-1.07M huggingface dataset:
初心者によるプログラミング学習ログ 127日目

# 100日チャレンジの127日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

127日目は、

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>127日目<br><br>技術書のサンプルサイトコーディング<br>サンプルサイトのcss部分をsassで書く練習<a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E3%81%A4%E3%81%AA%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアとつながりたい</a><a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1182766261333135360?ref_src=twsrc%5Etfw">October 11, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

## 学習したことの一部

1.技術書のサンプルサイトのコーディングする
2.同ファイルの複製をつくる
3.CSSのコードを眺めながら、Sassで書いてみる
4.Sassのコンパイル後、cssと同じ表現にできたらOK

という感じですすめました。

Sassの書き方も学べるし、ただサンプルサイトコーディングするよりはいいかな、と。
Sassは、webデザインのほうにも流用できるので覚えておいて損はないです。
【jQuery】$(this)から親要素をたどっていき、最初に検知した要素だけ取得したいとき

# たとえばこんなとき
```html
<div class='a'> / ①
  <div class='a'> / ②
    <div class='b'> / ③
      <button id='button'>BUTTON</button>
    </div>
    <div class='c'></div>
  </div>
</div>
```
ボタンを押したとき、②の要素だけを取得したい

# parentしまくればとってこれる
```js
$('button#button').click (function(){
  target = $(this).parent().parent();
  console.log(target);
});
```
こうすれば取れる・・・けど冗長だ

# parents() を使ってみる
```js
$('button#button').click (function(){
  target = $(this).parents('.a');
  console.log(target);
});
```
これだと親要素にある `.a`のセレクタの要素が全て取得される
今回の場合、①と②のdiv要素が取得されてしまう
②だけ取得するにはどうすればいいか

# こういうのがあった
```js
$('button#button').click (function(){
  target = $(this).closest('.a');
  console.log(target);
});
```
これで親辿っていく上で最初にでたもの、
つまり②を取得した段階で検索を終えるので②だけを取得できた

# まとめ
取得したい要素にid属性を割り振って素直に `parents()` してもいいときもあるけれど、
そうしずらいときは、`closest()` を使うのもありかなと思いました

`parent()` `parents()` `closest()` はセットで覚えちゃうのがいいかも
rubyで24時間過ぎたらアウトになる有効期限設定がしたい

###概要

updated_atが24時間過ぎていたら更新できないよーっていう設定がしたかったのでメモ感覚でまとめました

###環境
Ruby 2.6.1
Rails 5.2.3
Docker

###DateTime.now

```ruby:
(DateTime.now - hoge.updated_at) > 1
```
でいけるっしょって思ってやってみたら `expected numeric`エラー
あらまぁ　ちゃんとフォーマット指定しないとだめっぽい

###というわけで

```ruby:
time = (DateTime.now).strftime("%Y/%m/%d %H:%M:%S")
user = hoge.updated_at.strftime("%Y/%m/%d %H:%M:%S")
raise "sugiteruyo-" if ((time.to_time - user.to_time) / 60 /60 /24).to_i >= 1
```
datetime型の値をstrftimeで整形して変数に入れて `DateTime.now`と `user`を引いて時間を修正して1日(24時間)過ぎていたらアウトって感じしました。

###まとめ
フォーマット指定は大事
もし間違えてたり、こっちのがいいよーってのがございましたら教えていただけると幸いです！！！




##追記(2019-10-16 21:36:35)
@github0013@githubさんと@hogushi12兄貴のおかげでむちゃくちゃ簡単にできました
<img width="598" alt="スクリーンショット 2019-10-16 21.34.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239479/83127e26-e0df-6a4f-56df-90f80f9d71c8.png">

コメント参照

```ruby:
raise "更新後、24時間以上経過" if Model.updated_at < 1.day.ago
```
ifreameが貫通するのを直すメモ

ifreameで埋め込むとき貫通するのを直そうと思ったけどcssじゃ出来なかったのでその時のメモ

# ifreamだと貫通する~~🖕~~
ifreamでサイト埋め込んでサイズをでかくするとfloatで貫通するみたいになる。

# 試したこと

## 1. clearFix
clearFixっていうfloatで貫通したときに直せる方法試してみた

そもそもfloat使ってないし出来ない

## 2. マージンを下にかける
デキるにはできるけどレスポンシブできなくなる

## 3. objectを使う

できた！！！！！！！！！！！！！！！！！！！！！！！！！！

# Objectの使い方
```html
<object data="url"></object>
```
はい、これだけ
ifreamのsrcをdataに入れるだけ

# おわりに
ただのメモを読んでくれてありがとう
【2019年版】 JavaScriptで何番目の要素か取得する方法

要素の中で何番目の要素がクリックされたかをJavaScriptで取得しようとした時、従来は

```javascript
Array.prototype.indexOf.call("集合の要素", "目的の要素")
```

などで取得していましたが、ES2015で追加された`findeIndex()`メソッドを使えば何番目の要素か取得できます。

```javascript
elements.findIndex(element => {
  return element === target // target：一意に識別するもの。例えばevent.targetなど
})
```

## 具体例
以下はリストをクリックした時に何番目の要素をクリックしたかを取得するスクリプトです。

```html
<ul>
  <li>
  </li>
  <li>
  </li>
  <li>
  </li>
  <li>
  </li>
  <li>
  </li>
</ul>
```

```javascript
const lists = Array.from(document.querySelectorAll("li"));
lists.forEach(li => {
  li.addEventListener("click", e => {
    const index = lists.findIndex(list => list === e.target);
    console.log(index);
  });
});
```
`findeIndex()`は配列にしか適用できないので、`const lists = Array.from(document.querySelectorAll("li"));`で配列様オブジェクトを配列に変換しています。`li`に`addEventListener`でクリックイベントを付与し、クリックした要素と`li`要素の配列（`lists`）の要素が合致したものを`findIndex()`を使ってインデックス番号を返しています。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="js,result" data-user="Nishihara" data-slug-hash="VwZJxJv" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="何番目？">
  <span>See the Pen <a href="https://codepen.io/Nishihara/pen/VwZJxJv">
  何番目？</a> by Nishihara (<a href="https://codepen.io/Nishihara">@Nishihara</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 応用
上記の使い方ですと、`indexOf()`と大差ありません。`findIndex()`は中でテスト関数を満たせば配列のインデックスを返してくれるので、特定のクラスを持った要素が何番目か、といった使い方もできます。

```html
<ul>
  <li>
  </li>
  <li>
  </li>
  <li class="active">
  </li>
  <li>
  </li>
  <li>
  </li>
</ul>

<button>何番目の要素がアクティブか取得</button>
```

```javascript
const button = document.querySelector("button");
const lists = Array.from(document.querySelectorAll("li"));

button.addEventListener("click", () => {
  const index = lists.findIndex(list =>
    Array.from(list.classList).includes("active")
  );
  console.log(index);
});
```

`findIndex()`を使えば、`active`のクラス名を持った要素が何番目かを容易に知ることができます。`indexOf`と違ってマッチさせる必要はなく、`true`を返せば良いので、柔軟な使い方が可能です。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="js,result" data-user="Nishihara" data-slug-hash="mddPXoj" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="何番目？（activeクラスを持っている要素)">
  <span>See the Pen <a href="https://codepen.io/Nishihara/pen/mddPXoj">
  何番目？（activeクラスを持っている要素)</a> by Nishihara (<a href="https://codepen.io/Nishihara">@Nishihara</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 互換性

`findeIndex()`はES2015からなのでIE11では動きませんが、互換コードはあるので対応も可能です。→ [Array.prototype.findIndex() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)
Update Your Amazon RDS SSL/TLS Certificates by October 31, 2019

## 2019/10/17 追記
AWS Blogに本件に関する記事が追加されました。
**Amazon Relational Database Service (RDS)とAmazon AuroraのSSL/TLS 証明書のアップデートについて**
https://aws.amazon.com/jp/blogs/news/amazon-rds-certificate-rotation-2019/

## AWSから上記のメールがきたけど？
RDS(Aurora含む)を利用しているアカウント向けにSSL/TLS接続に必要なCA証明書の更新について
順次案内が届いているようです。
現在の証明書は2020年3月5日に期限切れとなるため、遅くとも2020年2月5日までに対応が必要です。
対応にはダウンタイムを伴います。

## 2019年10月31日までに対応が必要？
前述の通り、現在の認証局(rds-ca-2015)の証明書は2020年3月5日に期限切れとなります。
2019年11月1日より前に作成されたDBインスタンスは、ユーザーが明示的に変更するまで
古い認証局を使い続けますが、2020年2月5日以降に強制アップデートが行われる予定です。
対応しない場合、古いSSL/TLS証明書を使用したを使用したDBインスタンス接続は失敗します。
またアプリケーションがSSLまたはTLSを使用したDB接続を使用していない場合でも2月5日以降の
強制アップデートにメンテナンスの影響を受けます。
ドキュメント上は有効期限の混乱を避けるために、できるだけ早く（2020年2月5日までに）
この対応を完了させることを強く推奨しています。

また2019年11月1日以降に作成されるインスタンスはデフォルトで新しい認証局(rds-ca-2019)を
使用するように構成される予定でしたが、延期されたようです。
新しい認証局を使用してもアプリケーション側のルート署名書が古いままの場合、接続に失敗します。

また新たしい認証局を利用するように作成/変更したしたインスタンスでも設定変更で
一時的に古い認証局(rds-ca-2015)に戻し、移行の検証をすることは可能です。


## 変更手順
正式な手順は以下のドキュメントを参照してください。
プロダクション環境変更を行う前に、開発環境またはステージング環境でテストを行いましょう。

**Rotating Your SSL/TLS Certificate**
https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/UserGuide/UsingWithRDS.SSL-certificate-rotation.html

1. 以下のドキュメントから新しいSSL/TLS証明書をダウンロードします
   **Using SSL/TLS to Encrypt a Connection to a DB Instance**
   https://docs.aws.amazon.com/AmazonRDS/latest/UserGuide/UsingWithRDS.SSL.html

2. アプリケーション側で新しい証明書を使用するよう更新します
   証明書バンドル(rds-combined-ca-bundle.pem)を使用する場合には古いCAと新しいCAの
   両方の証明書が含まれているため、DBインスタンス側の変更前でも接続が可能です

3. DBインスタンスを変更して、認証局を rds-ca-2015 からrds-ca-2019 に変更します
   この操作により、DBインスタンスが再起動します
   
**接続の失敗を回避するにはRDS側の変更は必ず手順2(クライアント側の変更)が完了してから実施します。**

ネットワークとセキュリティセクションから変更できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125105/6bd59e00-6b69-2535-3b78-48cd70fc26dc.png)

デフォルトでは、次のメンテナンス時間中に実行されるようにスケジュールされますが、
即時実行することもできます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125105/a04d5246-5947-efa6-7b7f-f11401a0d5b8.png)


以上です。
参考になれば幸いです。
dockerで (container name) is already in use by container とエラーになった時の対処法

## 問題

container起動しようと思ったら、すでに使われているので、削除またはリネームしてくれと言われた。

```
You have to remove (or rename) that container to be able to reuse that name.
```

## 対処法

コンフリクトが起こっているコンテナ名を一旦削除することで解消

```
docker rm コンテナ名
```

## お願い

docker再起動させた時とか、毎回コンテナ名のコンフリクト起こっているのでなんとかしたいです。
他の対処法ご存知の方いたら教えてください。。。
ServerのPublishとCleanの違い

# eclipse + tomcatの構成で開発をしている際に、この二つの違いを分かっていなかった。

# publish
・server(tomcat)に対して、リソースをデプロイする。（jarファイルとか）

# clean
・serverの設定自体をリフレッシュする。

# まとめ
・ソースコード書いたよ→publishしよう
・serverの設定変えたよ→cleanしよう
プロジェクト内で複数の tsconfig.json を使う


## 場面
* フロントエンドJSとバックエンドJSを同じレポジトリで管理している
* テストを別の設定で実行する

## エディタ
VSCODEはデフォルトでもっとも近いtsconfig.jsonを使います。

## ts-node
`ts-node --project hoge/tsconfig.json hoge.ts` で使う`tsconfig`を指定できます。または、`ts-node -P ~~~`。


[ts-node - npm](https://www.npmjs.com/package/ts-node)
TomcatサーバーのcontextPathが変わらなくて困った話

# 環境
・eclipse
・tomcat8.0

# 起こったこと
・eclipse上でserverのWeb Modules→Modules→Pathを任意のものに書き換えた。
・serverをcleanして、起動した。
・書き換えたcontextPathでアクセスすると、404エラーが出る。
・server作成時のデフォルトで生成されるPathにアクセスすると、正しく繋がった。

# 解決策
・Project ExploerのServersから、該当のserverのconfigフォルダを開く。
・server.xmlを開いて、<Context>タグのpath="***"を確認する。
（何故か、ここが自動で書き変わっていなかった）
・手動でここを書き換える。

# なぜserverのcleanで反映されなかったのかは不明
pythonで一から画像処理 (2)平滑化

基本となる画像処理を一から勉強していくシリーズ (2)。

OpenCV-Pythonチュートリアルを参考に、
画像認識本　https://www.amazon.co.jp/dp/4061529129/
でやっている処理の理解を進める方針です。

#目次
1. 環境
2. 箱型フィルタ
3. ガウシアンフィルタ
4. 中央値フィルタ
5. バイラテラルフィルタ

# 1. 環境
Python 3.7.0
OpenCV 4.1.0
Jupyter Notebook

#2. 箱型フィルタ
画素周辺の n x m ウィンドウの平均値を取る。

```python:Hako.py
img = cv2.imread('brabra/1.jpg',0)

#n x m = 150 x 150
blur = cv2.blur(img,(150,150))

plt.subplot(121),plt.imshow(img,'gray'),plt.title('Original')
plt.xticks([]), plt.yticks([])
plt.subplot(122),plt.imshow(blur,'gray'),plt.title('Blurred')
plt.xticks([]), plt.yticks([])
plt.show()
```
![hako.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480516/1bfe1f6b-a443-bc5b-755e-bb1c69846064.png)

角（高周波成分）が取れてぼやけた画像になった。

#3. ガウシアンフィルタ

画素周辺の画素をガウシアン分布で重み付けする。

```python:Gaussian.py
img = cv2.imread('brabra/1.jpg',0)

#sigmax = sigmay = 71
blur = cv2.GaussianBlur(img,(71,71),0)

plt.subplot(121),plt.imshow(img,'gray'),plt.title('Original')
plt.xticks([]), plt.yticks([])
plt.subplot(122),plt.imshow(blur,'gray'),plt.title('Blurred')
plt.xticks([]), plt.yticks([])
plt.show()
```
![gaussian.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480516/0085f2d6-7bb1-3d46-28b2-8297a645d7ec.png)

箱型フィルタよりもくっきりかつまろやか？

#3. 中央値フィルタ

ウィンドウの中の画素の中央値を使う。粒粒ノイズのような飛び値に強い。

```python:Median.py
img = cv2.imread('brabra/1.jpg',0)

#window = 151
blur = cv2.medianBlur(img,151)

plt.subplot(121),plt.imshow(img,'gray'),plt.title('Original')
plt.xticks([]), plt.yticks([])
plt.subplot(122),plt.imshow(blur,'gray'),plt.title('Blurred')
plt.xticks([]), plt.yticks([])
plt.show()
```

![median.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480516/55fcc80b-e3f7-c369-5ba4-8393203753b3.png)

確かに飛び値が取れてマイルド。

#4. バイラテラルフィルタ

エッジを残したまま平均化する処理とのこと。これはガウシアンフィルタの近傍の画素で重み付けするのに加えて、注目画素と大きく異なる画素の重みを弱くすることで平滑化＆エッジ残しを実現するそう。

```python:Bi.py
img = cv2.imread('brabra/1.jpg',0)

blur = cv2.bilateralFilter(img,51,11,11)

plt.subplot(121),plt.imshow(img,'gray'),plt.title('Original')
plt.xticks([]), plt.yticks([])
plt.subplot(122),plt.imshow(blur,'gray'),plt.title('Blurred')
plt.xticks([]), plt.yticks([])
plt.show()
```
![bi.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480516/cf2e84b7-0ea1-b7b1-7a2c-95b9111ae638.png)


輪郭残る感じ。
5回処理を繰り返すと絵画っぽくなった。

![bi5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480516/294a5fdf-929a-5675-3b70-48d0c64a4af5.png)



# まとめ
今回は平滑化について理解を深めた。
次はエッジ検出をやる。

#参考文献

- OpenCVを使った画像処理（OpenCV-Pythonチュートリアル）
http://labs.eecs.tottori-u.ac.jp/sd/Member/oyamada/OpenCV/html/py_tutorials/py_imgproc/py_table_of_contents_imgproc/py_table_of_contents_imgproc.html#py-table-of-content-imgproc

- 画像認識（機械学習プロフェッショナルシリーズ）
https://www.amazon.co.jp/dp/4061529129/

- https://qiita.com/shim0mura/items/f222082b7ef08de3732e
サクラエディタのキーマクロ

#サクラエディタのキーマクロ
同僚に教えてもらったので共有。

## キーマクロとは？
エディタに特定の操作を覚えさせて、ボタン一つでその操作をできるようにすること

## 手順
１．サクラエディタに覚えさせたい操作を登録する
２．キーコマンドで実行する

### １．サクラエディタに覚えさせたい操作を登録する
・Ctrl+Shift+M を押す
・したい操作を行う（#サクラエディタのキーマクロ
同僚に教えてもらったので共有。

## キーマクロとは？
エディタに特定の操作を覚えさせて、ボタン一つでその操作をできるようにすること

## 手順
１．サクラエディタに覚えさせたい操作を登録する
２．キーコマンドで実行する

### １．サクラエディタに覚えさせたい操作を登録する
・Ctrl+Shift+M を押す（タイトルのところに、【キーマクロの記録中】と出る）
・したい操作を行う（行の移動や、文字入力など）
・もう一度、Ctrl+Shift+M で終了

### ２．キーコマンドで実行する
・Ctrl+Shift+L でさっき登録した操作が発動する

## その他
・サクラエディタを閉じても覚えている
QuickSight注意点メモ

#はじめに

QuickSightをいろいろと触ったので、注意点のメモ。
基本的な使い方は書いてないですよ。

2019年10月14日時点。

#メイン

以下、メインコンテンツでーす。

##VPCの中を参照するときは対象のセキュリティグループでQuickSightのIPを許可

RDSの中を見ることはよくあると思います。
RDSといえばVPC。VPCといえば権限めんどくさい。

QuickSightからRDSを見るときは以下のチェックをしましょう。

- 自分の使ってるIAMユーザーに対象のRDSを見る権限があるか。
    - IAMコンソールに行ってポリシーをチェック！
    
- QuickSight自体にアクセス権限があるか。
    - QuickSight管理ページのセキュリティとアクセス権限から。
    
- RDSのセキュリティグループでQuickSightのIPからのアクセスが許可されているか。
    - 対象のRDSが所属しているセキュリティグループのインバウンドで、QuickSightのIPを許可してやる必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385410/5f85bb4a-02d5-9ce8-d850-b875a8e1e998.png)

この値は東京リージョンのやつです。リージョンによって当然IPの範囲は異なるので下記を参照。
https://docs.aws.amazon.com/ja_jp/quicksight/latest/user/regions.html

##分析の複製はダッシュボードから

ダッシュボードから複製したいやつを選択して、
右上にある「別名で…」（ほんとは別名で保存）てのを押すとダイアログが出て、名前を付けて新しい分析を作成できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385410/7652b37e-6f4a-caab-4a5c-ad1da5f46fe3.png)

分析の画面からじゃないのね

##S3バケットの追加は「詳細」ボタンから

もうすでにS3のファイルを読み込むようにしていて、さらにバケットを追加したいとき。
画像のようにチェックがすでについている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385410/97dd3d37-cf9f-76f3-e9e4-592eb21d20db.png)

これを外してからもう一度チェックを入れるとバケット選択画面が現れるが、このときもうすでに過去のバケットのチェックが外れてしまっている！
これはまずい。これで更新ボタンを押してしまうと非常にまずい。

正しくは、青い「詳細」というリンクみたいなボタンを押します。
すると下のとこが開いて参照したいバケットの追加ができる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385410/4ea9c526-4b16-eb0a-c1bd-af8206996643.png)

リンクに見えるのですごくわかりにくい。
QuickSightよく知らない別の人がバケット追加するときとか絶対チェック外しちゃうでしょこれ…

##ユーザーごとに固有の情報は持たせられない

見出しの通りです。
ユーザーごとの属性などは現在つけられません。
裏で人ごとにグループ分けしたエクセルなどをもって、それをもとにフィルターの条件を当てはめるとかはできますが。

##プランのダウングレードはできない

エンタープライズ版で作成したらもうスタンダード版には戻せません。
やりたかったらQuickSightアカウントごと消す必要があります。

##SPICEはリージョンごとに別であり、移動もできない

SPICE容量は各リージョンごとに別々のものになっています。
また、リージョン間でのSPICE容量の移動もできません。

これは後述のデフォルトリージョンの件と関連して非常に重要な注意点です。

##デフォルトリージョンの変更はできない

最初に訪れた人がQuickSightアカウントを作成するときにこのデフォルトリージョンを決めますが、作成されたが最後、以降は変更できません。

また、ユーザー（エンタープライズ版では作成者）が一人追加されるたびに、QuickSightアカウントにSPICE容量が10GB追加されますが、これはデフォルトリージョンに追加されます。

さて先ほど書いたことを覚えておいででしょうか。
SPICEはリージョンごとに別なので、デフォルトリージョンを例えばバージニア北部にしていると全く使わないバージニア北部リージョンにSPICE容量がドンドコ追加されていきます。

ちなみにQuickSightアカウントはAWSアカウントに1つだけしか作成できないので、デフォルトリージョンを変更したかったらQuickSightアカウントを破棄して一から作り直す必要があります。

成熟してからでは遅いのです。

##分析に関する設定のエクスポート/インポートはできない

既存の分析から複製するという操作はありますが、分析の設定をJSONファイルとかにエクスポートしたりはできません。

なので別リージョンに同じような設定を簡単に入れたりはできないですし、アカウントを立て直したときは記憶とキャプチャから復元することとなります。

##2020/3/16追記　「閲覧者」へのダウングレードもできない

エンタープライズ版にアップグレード後、この人は見るだけだから権限を閲覧者にしたいという場合があると思います。
これがなんとできません。
CLIからのみできることって結構あるので試しにupdate-userをたたいてみたら下記のようにはっきりとした返事が返ってきました。

```bash
An error occurred (InvalidParameterValueException) when calling the UpdateUser operation: You cannot downgrade a user role.Operation failed, or partially succeeded. {更新に成功したとこ}
```

やりたかったら一度QuickSightユーザーを削除し、管理者から閲覧者としての招待メールを出してもらうしかないです。
課金のことを考えるとエンタープライズ版にアップグレードする前に閲覧者にしたい人を削除し、アップグレード後に閲覧者としてその人たちを招待するという面倒なことをする必要があります。
アコギな…


#おわりに

まだあんまないですね。
今後ML Insightsの機能とかいじったら追記するかも。

というか見出しに迷って「メイン」とかつけちゃうのセンス無い。
CDS/CDMの何が素晴らしいか・メモ

[2019/10/16 勝手に勉強会](https://powerapps.connpass.com/event/148739/)より、Microsoftのドキュメント、ビデオの見方も含めて教わったことのメモです。[YouTubeはこちら](https://www.youtube.com/watch?v=-BXUQyrxm9U)

## ドキュメントの読み方
### サービスの用途を認識する
　Overview（やや難） 何を読みたいのか認識、把握した上で!
### メニュー順番に読む（昔と違う）

### サブメニューの落とし穴
　全体像を踏まえる (続きの話)

### 関連サービスの落とし穴
　関係ないサービスは**追いすぎない**

## 勉強会のプレゼン資料について
　Business Application Summitより
　読み方のコツ

### ビデオを見るとき
 - 最大画面
 - キャプションは**OFF**
 - 自己紹介はコーヒータイム
 - キーボードを手を話す
 - Outlook、Teamsを見てはいけない
 - 立って、離れて、仁王立ちで（集中状態）
 - 倍速再生（はじめはわからない）＞プレゼンテーションの流れわかる
 - 太字はキーワードをおさえる!(一旦止めて、読む、把握)
 - 円、図を見る。
 - 大事な話は少しに集約される
 - 箇条書き＞全部読み始めるは✗＞最初の1行読み取る
 - 大事なスライドは何回かでてくる
 - わからないIT用語（一例的）はその場では飛ばす
 - わからない単語は2つ以上でてきたらNG（**周りに聞く、つぶやく**）
 - Twitterにつぶやく ひとつはハッシュタグ 3人ぐらい
 - （つぶやいて、ハッシュタグ、メンション）
 - **言い方、ふり方が大事。**
 - 100%聞き取れない。
 - 何を言っていることはわかっても、同じことは言えない。
 - 好きなアニメ等で勉強は続く。

### Common Data Service. On Azure (特徴のひとつ)
 - サービスとして提供
 - ストレージのサービス。
 - APIを渡す。ディベロッパーはStrage気にしないでよい
 - APIの互換性が補完されている。
 - データの形式の多様さはビフォー・アフターがある
 - Load Balancer (APIあり)
 Storage
 - SQL Elastic Pools
 - Blob (ファイル)
 - CosmosDB（監査ログ）
 - Search

 デモでは... CDSを紹介するもの

### データベース基礎用語
 - テーブル（エンティティ）
 - フィールド（カラム、プロパティ、列）

## Common Data Model
 - （背景）DBの名前ぎめ、開発での順番
 - Dynamics CRM 最初から使えば標準的にある
 - 大手数社で共通化したエンティティの定義
 - 関連、成約、インデックス等決めてくれている
 - 300以上
 - 定義。概念であって製品ではない。

## メモ
 - [imperative declarative](https://qiita.com/Hiroyuki_OSAKI/items/f3f88ae535550e95389d)
[ゼロから作るDeep Learning]活性化関数  step関数・シグモイド関数・Relu関数を分かりやすく解説してみた

# はじめに
この記事は**ゼロから作るディープラーニング 4章ニューラルネットワーク**を自分なりに理解して分かりやすくアウトプットしたものです。
文系の自分でも理解することが出来たので、気持ちを楽にして読んでいただけたら幸いです。
また、本書を学習する際に参考にしていただけたらもっと嬉しいです。

#step関数
step関数はパーセプトロンに使われている活性化関数です。

step関数の具体的な処理を説明すると、入力された値が０を超えた場合は１を出力して入力された値が０を超えない場合は０を出力します。
<img width="494" alt="スクリーンショット 2019-10-16 19.16.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510602/13e8d3fe-ec83-46b0-ff0d-ab0052b5f485.png">

```python
#ステップ関数
def step_function(x):
    if x > 0:
        return 1
    elif x <= 0:
        return 0
```

パーセプトロンを理解している方は、同じことなので簡単だと思います。

#シグモイド関数
シグモイド関数は昔からニューラルネットワークに使われてきた活性化関数です。
具体的な処理方法はstep関数のように言葉では表しにくいので、数式を使いたいと思います。
<img width="220" alt="スクリーンショット 2019-10-16 19.24.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510602/1eace8e3-f50d-a7d8-0b93-78ddbf7ee7bb.png">
xが入力された値を表して、eはネイビア数を表します。(ネイビア数は高校数学で習うので文系でも学習範囲だったはず)

ではシグモイド関数も実装したいと思います。

```python
#シグモイド関数
def sigmoid_function(x):
    return 1 / (1 + np.exp(-x))
sigmoid_function(np.array([1,3,0.4,-3]))

array([0.73105858, 0.95257413, 0.59868766, 0.04742587])
```

#Relu関数
Relu関数は最近ニューラルネットワークに使われ始めたNew関数です。
処理の内容は、入力値が０を超えた場合はそのまま出力して、０を超えない場合は０を出力します。
<img width="508" alt="スクリーンショット 2019-10-16 19.40.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510602/a37d4f69-f879-a5c2-91ef-16ce4906641d.png">

```python
#ReLU関数
def relu_function(x):
    return np.maximum(0,x)
print(relu_function(2))
print(relu_function(-1))
2
0
```
Relu関数はシグモイド関数に比べて結構分かりやすい関数なので、できればこっちを使って行きたいですね(笑)

次回は今日実装した活性化関数を使って簡単なニューラルネットワークを実装してみたいと思います！！
英文PDFを読みやすくする環境を作った

# 0. はじめに
Qiita初投稿です。理系大学生です。

理系大学生は、論文を毎日のように読みます。研究分野によっては日本語の論文が乏しく、英語論文を読まないといけない場合も多いです。知らない単語や表現が出てくるたびにいちいち検索をするのは面倒で、英語論文を読む際の心のハードルが上がってしまうことがあります。

そこで、少しでも英語論文を読むことに対する負荷を減らせるような環境を作りましたので、シェアします。

# 1. Mouse Dictionary

まず、このような素晴らしいChrome拡張機能があります。Firefoxにも対応して頂いたようです。以前Qiitaでバズっていたので、ご存知の方も多いとは思います。
[Chrome拡張の高速な英語辞書ツールをつくりました(Mouse Dictionary)](https://qiita.com/wtetsu/items/c43232c6c44918e977c9)

これ自体の説明は上記リンクを辿って頂きたいのですが、端的に言うと、
「ブラウザ上で英単語にカーソルを合わせるだけで、非常に高速に対訳を表示してくれる拡張機能」
です。
デフォルトの辞書データ(5万語ほど)であれば完全に無料で使えます。すごい。
上記リンクにもある通り、外部で公開されている辞書データを読み込ませることが可能で、英辞郎の有料辞書データ(500円ほど)を買えば200万語以上に対応します。

英文のサイトを閲覧する際にはこれで十分に足ります。一方でこれはPDFファイルに対応しておらず、ブラウザでPDFを開いても動作しません。

この件については上記リンクで解決策が示されていて、[PDF.jsのデモページ](https://mozilla.github.io/pdf.js/web/viewer.html)でPDFを開くとよいとのことです。

でもオフライン環境でもPDF見たいですよね…？(後付けの理由)
ということでここからはPDF.jsをオフラインで動作させる際について書きます。

# 2. PDF.js
まずは[PDF.jsのダウンロードサイト](https://mozilla.github.io/pdf.js/getting_started/#download)からダウンロードします。
![pdfjs.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273237/d304f6a2-6b20-7fc2-487c-dd6d14b684c1.png)

Stable版で十分だと思います。zip形式でダウンロードされるので解凍します。
![pdfjsdir.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273237/6d6c0f85-7267-47a5-e8a7-cb5f2a38fedd.png)

解凍後のディレクトリ構成はこんな感じですが、このwebフォルダにPDFファイルを入れ、pdfjs-2.2.228-distでサーバーを立ち上げて
http://localhost:8080/web/viewer.html?file=hoge.pdf
をChromeで開けばよいです。hoge.pdfの部分は見たいPDFファイルの名前にしてください。

# 3. 本題
…という、PDFファイルをwebフォルダに入れてブラウザで開くまでの流れを自動でできるようにしました。
ローカルにあるPDFファイルをドラッグ&ドロップしたらブラウザで見れます。

サーバーを立てるのはPythonとその標準モジュールで行います。
まずpyファイルはドラッグ&ドロップに対応していませんので、バッチファイルを噛ませます。
pyファイル名はpdf.pyとしています。

```shell:pdf.bat
@echo off
python "path to pdf.py" %*
pause
```

次にPythonスクリプト本体です。

```python:pdf.py
import sys
import shutil
import http.server
import socketserver
import webbrowser
import os
from pathlib import Path

# parameter
pdfjs_path=Path(r"path to pdfjs-x-dist")
PORT = 8000
###########

pdf_path=Path(sys.argv[1])
url = "http://localhost:{}/web/viewer.html?file={}".format(PORT,pdf_path.name)

if pdf_path.suffix!=".pdf":
    print("Please input pdf file.")
else:
    shutil.copy(pdf_path,pdfjs_path/"web")
    Handler = http.server.SimpleHTTPRequestHandler
    os.chdir(pdfjs_path)
    with socketserver.TCPServer(("", PORT), Handler) as httpd:
        print("serving at port", PORT)
        webbrowser.open(url)
        httpd.serve_forever()
```
先ほどの手順をそのまま書き起こしただけです。
Chromeでないブラウザが開いてしまう場合には、

```python
# before
webbrowser.open(url)
# after
webbrowser.get("C:/Program Files (x86)/Google/Chrome/Application/chrome.exe %s").open(url)
```
とするとよいと思います。

これで、batファイルのアイコンにPDFファイルをドラッグ&ドロップするだけで、オフラインでもPDF.jsを開いてMouse Dictionaryで快適に読めるようになります。

よき英語論文ライフを…!

# 参考
[PDF.jsとMouse Dictionaryで最高を手に入れる](https://qiita.com/kroton/items/cc38dbcfc4a6fefcd2c0)
[Python webbrowser.open() to open Chrome browser](https://stackoverflow.com/questions/22445217/python-webbrowser-open-to-open-chrome-browser)
Nuxtさん、グローバルCSSが使えないっぽい(泣)

NuxtでグローバルCSSを使う方法を調べていたら、いまいち確立してない感じだったので、公式のほうを色々見ていたらなんかあったのでそれの紹介です（疲れで語彙力がパージされています）。

## 環境
* Windows 10 Pro
* WSL Ubuntu
* `yarn -v` -> `1.17.3`
* `node -v` -> `v12.10.0`
* `npm list nuxt` -> `nuxt@2.9.2`
* `npm list vue` -> `vue@2.6.10`

## 前提パッケージのインストール
Sass(SCSS)、LESS、Stylusなどをお使いの方は、前提パッケージをインストールする必要があります。
もうすでに使っていて、パッケージがインストールされている状態なら、再度インストールする必要はありません。

また、CSSの方は以下のパッケージをインストールする必要はありませんので、このステップを飛ばして次に進んでください。

* Sass: `yarn add sass-loader node-sass`
* LESS: `yarn add less-loader less`
* Stylus: `yarn add stylus-loader stylus`

これらの自分が使っている言語に対応したパッケージをインストールしてください。
npmの方は`npm install --save うんたらかんたら`です。

## `@nuxtjs/style-resources`をインストール
まず、`yarn add @nuxtjs/style-resources`を実行してモジュールをインストールしてから、`nuxt.config.js`もしくは`.ts`にそのうまを書きます。今回は、SCSSのみを実例として紹介します。

JSの場合:

```js:nuxt.config.js
export default {
  modules: [
    '@nuxtjs/style-resources',
  ],

  styleResources: {
   scss: [
       './assets/style/*.scss',
     ],
  }
}
```

TSの場合:

```ts:nuxt.config.ts
import { Configuration } from '@nuxt/types'

const config: Configuration = {
  modules: [
    '@nuxtjs/style-resources',
  ],

  styleResources: {
   scss: [
       './assets/style/*.scss',
     ],
  }
}

export default config
```

TSの設定は人によってかなり違ったりするかもしれませんので、いま現在動くコンフィグをお持ちであれば、`modules:`へのモジュールの追加と、`styleResources:`の追加だけで構いません。

### 補足
Sassを使う場合と、SCSSを使う場合では書き方が少し違います。詳しくは、こちらのリファレンスを参考にしてください。
https://github.com/nuxt-community/style-resources-module#setup

## 使ってみる
先程のconfigに従うと、適当に`~/assets/style/_variables.scss`を作って、中に

```scss:_variables.scss
$hoge: #333;
$huga: #777;
```

こんな感じで書いて、

```vue:index.vue
<template>
  <div class="yeet">
    <p>あーだこーだ ...</p>
  </div>
</template>

<style lang="scss">
.yeet {
  color: $hoge;
}
</style>
```

みたいな感じで動くかなと思います。
Wordpressで使いやすいfunctions.phpにする方法を考えてみた。

Wordpressで共通の仕様の設定ができるのがこのファイル。

MVCモデルが分かる人に向けると、WordpressにはM(モデル)C(コントローラー)がfunctions.phpの1つのファイルでしか設定できない。(モデルが設定出来るか微妙なところではあるが...)

テンプレートで見た目を入れ替えられる仕様は、フレームワークとしては良いアイディアだと思う。
しかし、functions.phpもテンプレートの中に入っており、カスタム投稿やカスタムフィールドなどのモデルが絡む要素を必要とする場合、事実上1つのテンプレートでしか使えない。

「子テーマを使えばいい」と思われるが、ガッチガチに固められたフレームワークに当たった場合、どこで表示されているか探すのも一苦労。変えられるのはCSSと固定ページ追加程度だと思っていいだろう。

[以前記事を書いた](https://qiita.com/ayaoriko/items/f6884ff5ff7c9d2ac79c)通り、Wordpressは独特な使い方をしており、なかなか曲者である。

それでもWordpressを使わなくちゃいけない場合、どんなfunctions.phpが使いやすいかを考えてみた。

# 前提
既存のテンプレートを作るのではなく、PHPベースでオリジナルのテンプレートを作る

# functions.phpにはrequire_once()しか書かない

なぜなら、パーツ管理がしやすいから。
require_onceを大量に使うと重くなるかな...と懸念しているが、そこは案が欲しいところ。

# 機能ごとにまとめる
例えば、ライター機能削除の設定を1ファイルにまとめておく。
コメント停止はもちろん、管理画面のコメント枠削除をまとめて1つのファイルに設定しておく。
ライター機能が急に必要になった場合、該当ファイルを読み込む1文をコメントアウトすれば、すぐに機能復活ができる。
もし、管理画面の表示だけ復活させたいとした場合、そのファイルを確認すればすぐに見つかる。

# コメントを超丁寧に書く
初めて触った人でも把握しやすいようにすることは大事なこと。
コメントを書くときに重要なのは、**ファイル内を日本語でテキスト検索したときに引っかかるように**すること。
そうすれば、自分以外の人が修正必要な場合、すぐに該当ファイルを見つけることが出来る。
**functions.phpは索引ファイルとして使えるように**意識したい。

# require_once()をした先でrequire,includeを使わない

ファイルを辿った先に別のファイルを辿る事になると、どのファイルに書いてあるかがコメントだけでは辿りにくくなる。
それならファイルを細かく分割して、function.phpを見やすくした方が使いやすいと思う。

# get_template_part()を使わない。
get_template_partでファイルを読み込むのの良いところは、子テーマの管理がしやすいところ。
includeやrequireと違い、ファイル外の変数(global変数含)を再度設定する必要があり、ファイルを細かく分割しにくくなってしまい、効率が悪い。
テンプレートのみで売ることを考えていないなら、なるべく使わない方が扱いやすいように思う。

# まとめ
Wordpressに慣れている人も、初心者も分かりやすい仕様を考えたつもり。
具体的な関数は、また別記事にまとめようと思う。
【初心者】HTML　復習／間違えやすいところ【備忘録４】

## 指示書を見て自身の書き方で表現
Progateのレッスンでなく、そのあとの実践で調べながらまずはページを
作っていこうと思う。今までの初級・中級の理解度を確かめ苦手なところや
理解していないところを洗い出すのが目的。

## 気を付けようと感じたところ
- ＜li＞でリストとして書くところを＜p＞でそれぞれ書いてしまった。使える物はしっかり理解して使っていきたい。

-  divのclassを簡潔な名前にしすぎているので、あとで見た際に少しわかりにくく感じた。できるだけ「どこの何を表示させようとしているのか」誰が見てもわかるようにclass部分を書いていきたい。

-  アイコンを４つ並べて表示の場合などは、たいていcssが同じ内容になるのでclass名の時点で４つのアイコンとも同じ名前に(ex:contents-iconで４つともclass名を統一など)しておくこと。今回自分で書いた際にその方法を忘れており、icon-1,2,3,4などと名前を分けてしまったので気を付ける。

![html 20191016.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509384/cd2158db-b772-2f0a-d77a-921b1033a7e7.png)


![css 20191016.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509384/54163227-91e9-1afe-714a-400023c95ec1.png)



-  問い合わせフォーム作成時input要素が２つ表示されており分けたいときは(ボタンの色だけ変えたいなど)しっかりclass名で区別するように気を付ける。

![btn20191016.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509384/6d40be78-0481-03e1-4c86-cb48eafc9feb.png)

-  footerにて。footerのタイトルとリストを同列に並べるために、そのままli{}にfloat:rightを付けてしまったので、タイトルとリストにクラス名を付け、float:leftとfloat:rightで書く必要がある。
[R] パッケージの一括インストール・ロード (CRAN, Bioconductor)

R(v3.5以上)のパッケージを一括でインストール・ロードするためのスクリプトのメモです。

# p_loadを使う（おすすめ）

`pacman`の`p_load`関数を使うと、CRANだけでなくBioconductorからもインストールとロードができます。


```R
options(repos = "https://cran.ism.ac.jp/")
if (!requireNamespace("pacman", quietly = T)) install.packages("pacman")
if (!requireNamespace("BiocManager", quietly = T)) install.packages("BiocManager")
pacman::p_load(tidyverse, SpectralTAD)
```

# BiocManagerを使う
[BiocManager](https://cran.r-project.org/web/packages/BiocManager/vignettes/BiocManager.html)を用いるとCRAN/Bioconductor/GitHubの
リポジトリからパッケージをインストールすることができます。

```r
# もしBiocManagerのバージョンが古い場合は一旦削除します。
# remove.packages("BiocVersion") 

if (!requireNamespace("BiocManager", quietly = TRUE))
    install.packages("BiocManager")

pkgs <- c("tidyverse","rstan", "edgeR")

for(pkg in pkgs) if (!require(pkg, character.only = T)){
    BiocManager::install(pkg, update = F)
    require(pkg, character.only = T)
}

```

以前はCRANは`install.pacages()`、Bioconductorからは`biocLite()`と
別の関数を使う必要がありましたが、`BiocManager::install`で一括できるのは便利です。
Vuetify 2.x でiconが表示されない / cannot show icons using Vuetify(2.x)

# Vuetify 2.x でiconが表示されない
Vuetify 2系で mdi iconが使えない場合
(```<v-icon>mdi-xxx</v-icon>```のような場合)
以下のpackageをインストールしてmdi iconを有効化することで解決します。

When you cannot use icons in Vue project which uses Vuetify 2.x
(like ```<v-icon>mdi-xxx</v-icon>```),
you can solve it by adding some packages.

#### npmの場合 / When using npm

```console:npm
$ npm install @mdi/js file-loader material-design-icons-iconfont --save-dev
```


#### yarnの場合 / When using yarn

```console:yarn
$ yarn add @mdi/js file-loader material-design-icons-iconfont -D
```


vuetify.jsでロードします (load in Vuetify.js)

```js:vuetify.js
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import '@mdi/font/css/materialdesignicons.css'
```

That's it!
Windows Server 2012 R2 バックアップが表示されない

#問題
バックアップ設置をしたはずなのに下記の警告が発生。
あれ？「Windows Server バックアップ」が表示されない。

DC構成管理は大変・・・

```
ログの名前:         Directory Service
ソース:           Microsoft-Windows-ActiveDirectory_DomainService
日付:            2019/10/11 19:39:29
イベント ID:       2089
タスクのカテゴリ:      バックアップ
レベル:           警告
キーワード:         クラシック
ユーザー:          ANONYMOUS LOGON
コンピューター:       ad-01.xxx.local
説明:
このディレクトリ パーティションは少なくとも次の日数の間、バックアップされていません。 
 
ディレクトリ パーティション: 
DC=xxx,DC=local 
 
'バックアップ潜在期間' (日): 
90 
 
不意のデータの損失から回復するため、できるだけ頻繁にバックアップをとることを お勧めします。しかしながら、'バックアップ潜在期間' で表示されている期間、バッ クアップがとられていない場合には、バックアップがとられるまでこのメッセージが毎 日、ログに記録されます。このパーティションを保持するレプリカのバックアップをと ることができます。 
 
既定では 'バックアップ潜在期間' は '廃棄 (Tombstone) の有効期間の間隔' の半 分に設定されています。次のレジストリ キーを追加すると 'バックアップ潜在期間' の既定値を変更できます。 
 
'バックアップ潜在期間' (日) レジストリ キー: 
System\CurrentControlSet\Services\NTDS\Parameters\Backup Latency Threshold (days) 

```

#解決
機能で「Windows Server バックアップ」と「ネットワーク負荷分散」も必要のこと。
AWSインスタンスタイプをt2からt3に変更時ドライバー更新等で外れたかな。

![nlb-feature.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249425/9f0b8607-8beb-4866-e5aa-aeff8f52e1b3.jpeg)


#参考
https://www.ubackup.com/jp/windows-server/windows-server-backup-2012-not-showing.html
PHP 複数の戻り値を指定する

##はじめに
最近PHPにも触れる機会があり、「1つのメソッド内で戻り値を複数指定したいな〜」となったので自分用にメモしておきます。

##returnで配列化、listで渡す

サンプルはこんな感じ。（食後のお飲み物はどちらになさいますか…）

```php:sample1.php
private function drinks(){
  $drink1 = "coffee";
  $drink2 = "tea";

  return array($drink1, $drink2);
  //または return [$drink1, $drink2];
}

list($drink1, $drink2) = $this->drinks();
```

関数内→　`return[]`か`return array()`で配列で複数の戻り値を指定
呼び出す側→　`list()`で各戻り値を変数に格納
という流れです。



##複数の配列を戻り値に指定したい
複数の配列を戻り値にしたい場合はこんな感じになりますかね。

```php:sample2.php
private function drinks(){
  $softDrinks = ["tapioca milk tea", "cheese tea", "banana juice"]; //原宿とかで流行っているらしき飲み物
  $alcoholicBeverages = ["beer", "wine", "whisky"];

  return [$softDrinks, $alcoholicBeverages];
  //または　return array($softDrinks, $alcoholicBeverages);
}

list($softDrinks, $alcoholicBeverages) = $this->drinks();
```
やっていることはsample1と一緒。

###新たに複数の配列を作成し戻り値に指定する
想定している例: 
・menusテーブルがあり、name, category(1 =foods, 2 =drinksの2種), target(対象者。1 =all_ages, 2 =over_20)の3つのカラムがあるとする。
・既にcategoryが２、飲み物のみが戻り値にしていされている`getDrinks`メソッドがあるとする。
・`getDrinks`の戻り値から、target別に配列を作成して戻り値に指定する。

```sample3.php
private function drinks(){
  //飲み物取得
  $drinks = $this->getDrinks();

  //戻り値に指定する、空の配列を用意
  $softDrinks = [];
  $alcoholicBeverages = [];

  //$drinksをループし、ターゲット別に各配列に追加していく
  foreach( $drinks as $drink ) {
    if( $drink['target'] == 1 ) {
      $softDrinks[] = $drink;
    } else {
      $alcoholicBeverages[] = $drink;
    }
  }
  //returnで配列化
  return [$softDrinks, $alcoholicBeverages]
}

list($softDrinks, $alcoholicBeverages) = $this->drinks();
```
PHPで配列に要素を追加するのも初めてだったので使ってみました。
returnとlistでやっていることは上２つの例と同じです。

##まとめ
PHPで複数の戻り値を指定したい時は、
・関数内→　`return[]`か`return array()`で配列で複数の戻り値を指定する
・呼び出す側→　`list()`で各戻り値を変数に格納する

普段はRailsを触ることが多いのですがPHPにも慣れていけたらなぁと思います。
（PHPからRailsに戻ると、たまに `def public function`とか書きそうになってます。）

間違っている点等あればご指摘いただけますと幸いです。
macOS Catalina へのアップグレードを一時的に非表示にする方法

2019/10/8(火)にリリースとなった`macOS Catalina`ですが、2019/10/16(水)現在、不具合の話ばかり見かけ`iOS 13`共々あまり良い話題を見かけません。
特に業務に使用する場合は安定するまでアップグレードを見送る方も多いと思います。

`macOS Mojave`では`システム環境設定`>`ソフトウェアアップデート`に`macOS Catalina`のアップグレードが表示されていますが、`macOS Mojave`のアップデートも近くに表示されており、少し触るのが怖いです。

## macOS Catalina へのアップグレードを非表示にする
`ターミナル.app`を起動し、下記のコマンドを入力。
`softwareupdate --ignore "macOS Catalina"`

## macOS Catalina へのアップグレードを再度表示する
`ターミナル.app`を起動し、下記のコマンドを入力。
`softwareupdate --reset-ignored`
Githubで開発環境を揃える（Terminal編）

Githubを使って、複数PCで開発環境を揃える。

## step

### 任意のディレクトリに移動
```
$ cd
$ cd desktop
$ cd 任意のディレクトリ
```


### デスクトップにリモートディレクトリをDL
```
$ git clone [githubのディレクトリURL]
```

### DLしたディレクトリに移動
```
$ cd DLしたディレクトリ名
```

### DLしたディレクトリのコードを編集
```
ここでファイル編集
```

### 編集したローカルディレクトリをリモート（github）にアップロード
```
//初回アップロード時に必要？必要ないかもしれない//
$ git remote add origin [リモートディレクトリURL]


$ git add .

//初回接続時//
git config --global user.email "githubで設定したメールアドレス"
git config --global user.name "githibで登録したユーザーネーム"

$ git commit -m"コメントを入力"
$ git push origin master
```

### ローカルディレクトリをリモートディレクトリに合わせる
```
$ git pull origin master
```
Mac miniでKnowledgeを導入して動かしてみた

# 初めに
今回の記事は、ドがつくほどのサーバー素人のクライアントプログラマーが社内の情報共有活性化の為に
OSSのKnowledgeを導入するために奮闘したことを記入します。

#環境
Mac mini (Late 2012)
Mac Os Mojave (10.14.6)
jdk 8
apache-tomcat 9.0.27

# Knowledgeとは？
会社のナレッジを共有するために使用できるOSSのこと。
https://information-knowledge.support-project.org/ja/

有料のは当然いいことがたくさんあるが、社内のみでの活用ならこちらでも機能的には引けを取らずで素晴らしいもの

# 準備編

まず準備として、下記のものを使用するのでインストールします。
- HomeBrew
- Java8
- apache-tomcat

## Homebrew編
ここに書いてあることでdone.
https://brew.sh/index_ja
実は過去にインストールしていたので特に何かしたわけではないです。。。

参考までにもう一つだけサイト貼っておきます。
https://qiita.com/krtsato/items/ba567acacb93a7a02dd9

## Java8
javaをインストールするだけなら

```
brew cask install java
```
でdone.
なんですがこれだと最新版が入ってしまいます。

ちなみに最新版が入ってしまうと・・・
起動できなくなってしまい原因究明に時間がかかります(かかりました。)

```
brew cask install adoptopenjdk8
```

上記でインストールができます。
ちなみにこんな方法もありました。

```

# brew caskコマンドでバージョンを指定してパッケージをインストールできるようにする
$ brew tap homebrew/cask-versions

# 利用可能なjavaのバージョンを確認する
$ brew search java

# java8をインストールする
$ brew cask install java8
```
*java8がないから上の方が良いと思います・・・

## apache-tomcat
今回はtomcat 9を使用するので下記からアクセス
https://tomcat.apache.org/download-90.cgi
・Core/tar.gzをダウンロード

ダウンロードしたら
ターミナルから


```
// 解凍
tar -zxvf ~/Downloads/apache-tomcat-9.0.27.tar
// フォルダ移動
sudo mv ~/Downloads/apache-tomcat-9.0.27 usr/local
// シンボリックリンク
// Tomcat は任意のフォルダで大丈夫です。
sudo ln -s /usr/local/apache-tomcat-9.0.27 /Library/<Tomcat>
sudo chown -R <username> /Library/<Tomcat>
// *.shファイルへの権限を付与
sudo chmod +x /Library/Tomcat/bin/*.sh
// tomcatを起動する
/Library/Tomcat/bin/startup.sh
```

これでTomcatのサーバーを立ち上げることができているかと思います。

http://localhost:8080 起動できることを確認してみてください。
./server.xmlにあるポート番号を変更すればポートの切り替えは可能です。

## knowledgeのインストール
https://github.com/support-project/knowledge/releases
上記サイトからknowledge.warファイルをダウンロードしてください。
apacheフォルダ内のwebappディレクトリの直下に先ほどダウンロードした.warファイルを格納してください。

これで立ち上がるかと思います。
http://localhost:8080/knowledge でアクセスができるかと思います。

## 立ち上がらないとき

過去に立ち上げようとして失敗している場合

```
/Library/Tomcat/bin/shutdown.sh
```
でサーバーをキルしてもう一度立ち上げてください。

立ち上げた際に最新のJavaデータを拾ってきている

最新のJavaを使用するように切り替えるか、最新のJavaを削除してください。
私は削除して対応しました。。。


## これからやること

- SQLの変更
- メールを飛ばせるようにする
- 設定の見直し

## 参考にさせていただいた皆様
https://qiita.com/prom_Sakiku/items/36fa987f7aafaf22eced
https://qiita.com/d_forest/items/290bb05bb929e5d74647
javascriptのMap.setの戻り値はMap

と言うわけなので、

``` javascript
const map = new Map().set(1,"hoge");
```

と言った感じに値を入れつつ初期化が出来る。

``` javascript
map.set(2,"fuga").set(3,"piyo");
```
このようにメソッドチェーンで複数追加することも可能。

``` javascript
//配列を特定のパラメータを持ったMapに変換する(重複がない前提)
const groupedMap = someObjectArray.reduce((map,current) => map.set(current.hoge,current),new Map());
```
reduceと組み合わせてみても面白い書き方が出来る。
iOSの「1.1.1.1」アプリのアップデート時にインジケーターが回ったまま進まない場合の対処法

どうやらVPNが`ON`の状態だとアップデートが進まないようです。

## 対処法

1. 「1.1.1.1」アプリを起動し、スイッチを`OFF`にして`無効にする`を選択。
2. 「App Store」でアップデートを行う
3. 「1.1.1.1」アプリに戻り、スイッチを`ON`する
iOSの「リマインダー」で「指定場所で通知」が動かない場合のチェックポイント

`設定`>`プライバシー`>`位置情報サービス`>`システムサービス`>`位置情報に基づく通知`が`ON`であること。
不要な位置情報の取得を停止しようと設定を変更していたところ、思わぬところで「リマインダー」の動作に影響を与えていました。
項目名は確かにといったところなのですが……。
Macで大量の写真を日付ごとに自動整理する

子供の写真などをPCに保存しておくと、後で整理するのが大変になりますよね。ExIfToolを以下のように使うと簡単に整理できてとても便利です。

1) [ExifTool](https://www.sno.phy.queensu.ca/~phil/exiftool/)をダウンロード
2) ターミナルで以下のように実行
（例） 写真のファイル名を日付と同じにしてから、年月のフォルダに整理

```
exiftool "-DateTimeOriginal>FileModifyDate" ./*.jpg
exiftool '-FileName < CreateDate' -d %Y-%m-%d_%H-%M-%S%%-c.%%e *
exiftool '-Directory < CreateDate' -d %Y/%m *
```
Railsチュートリアル 第１４章＜復習＞

第１４章の復習メモです。 個人的に重要と思ったことを書きます。

前回と同様、以下３つの視点で書きます。

- 分かったこと
- 分からなかったこと
- 今回はスルーしたこと


#分かったこと

##モデル間の関連付け

###has_many、belongs_to（１３章の続き）

１３章で、モデル間の関連付け方法を学習した。１対多の場合は**has_many**を、１対１の場合は**belongs_to**を使う。

has_many

```
class User < ApplicationRecord
  has_many :microposts
  .
  .
  .
end
```

belongs_to

```
class Micropost < ApplicationRecord
  belongs_to :user
  .
  .
  .
end
```

上のコードでは、has_many、belongs_toのパラメータに、**相手のテーブル名を指定するだけ**で、関係付けが出来ている。しかし本来、モデルの関係付けを行うには、**相手のクラス名や結合キーを指定**しなければならない。
上のコードで、それらを指定する必要がない理由は、テーブルの外部キーが予め設定されているから。micropostsテーブルは、外部キーuser_idカラムにより、usersテーブルと紐づいている（外部キーの設定は１３章で学習済み）。

本来必要な情報を付け加えると、以下のような書き方になる。

has_many

```app/models/user.rb
class User < ApplicationRecord
  has_many :microposts, dependent: :destroy
  has_many :active_relationships, class_name:  "Relationship",
                                  foreign_key: "follower_id",
                                  dependent:   :destroy
  .
  .
  .
end
```

belongs_to

```app/models/relationship.rb
class Relationship < ApplicationRecord
  belongs_to :follower, class_name: "User"
  belongs_to :followed, class_name: "User"
end
```

###has_many :through

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506678/798ac40b-0d41-0df1-4b3d-f1c0b485eb4a.png)

上の図は、本章で実装した「他ユーザをフォローする仕組み」について、モデルの関係性を表している。active_relationships（実体はrelationshipsテーブル）が、フォローする側とされる側の（ユーザIDの）対応表になっている。
「あるユーザがフォローしているユーザ」の情報が欲しい場合、

userテーブル＜idカラム＞【あるユーザ】
　　↓
（through）
　　↓
active_relationships＜follower_idカラム＞
　　↓
（同テーブル内）
　　↓
active_relationships＜followed_idカラム＞
　　↓
（has_many）
　　↓
userテーブル＜idカラム＞【フォローしているユーザ】

こんな感じ（？）で取得できる。
これをコードで書くと、以下の形になる。

```
has_many :followeds, through: :active_relationships
```

要するに、「active_relationshipsを通して、followedカラムを外部キーに、対象ユーザを取得する」というニュアンス？（私はそう解釈しました）

因みに、`has_many :followeds`のfollowedsは、英文法的によろしくないので、followingという表記にしたい。これを踏まえたのが以下の書き方。

```
has_many :following, through: :active_relationships, source: :followed
```

`source: :followed`の部分で、外部キーを明示している。

また、この関連付けを行ったことで、Userモデルに対して`following_ids`メソッドが使えるようになった（自動生成された）。
これは、先の「あるユーザがフォローしているユーザ」の一覧が、配列で取得できる。実行結果は以下の通り。

```
>> User.first.following_ids
=> [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41,
42, 43, 44, 45, 46, 47, 48, 49, 50, 51]
```

ちなみに、このメソッドは、`>> User.first.following.map(&:id)`と同じ結果となる。


#分からなかったこと、今回はスルーしたこと

- Ajax
- テスト全般
- アプリケーションの仕様、ロジックの詳細


#所感等
ひとまず１周終えることができました。
未熟ながら、プログラミング経験者ではありますが、レガシーな開発しかしたことがなかったので、初めて触れる知識ばかりで新鮮でした。
この後も、何かしら学習は続けていきたいと思います。差し当たって、２周目をやるか、自分なりに何か作ってみたいと考えています。
Electron で nodeIntegration: false にする方法



公式では、未来的に `nodeIntegration: false` にすることを推奨しています

理由は、レンダラプロセスで Node.js が実行できてしまうと、XSS発生時に脆弱性が増すためです

例えば、fs モジュールを使ってあなたのローカルファイルを取得して、どこかに送信することも可能ですし、ファイルを全て消し去ることもできてしまいます

## nodeIntegration: false にする方法

### Electronの設定

メインプロセスで `nodeIntegration: false` にする

```javascript
 mainWindow = new BrowserWindow({
	...
    webPreferences: {
      // レンダラープロセスで Node.js 使えないようにする (XSS対策)
      nodeIntegration: false,
      // preloadスクリプトを, app.htmlとは別のJavaScriptコンテキストで実行するかどうか
      // false にしないと、window object を共有できない
      contextIsolation: false,
      // process や Electron を windowオブジェクト に保存する処理。フルパスの指定が必要
      preload: path.join(__dirname, '/preload.js'),
    },
    ...
  });
  
```

`preload.js` を用意

```javascript
/**
 * preload.js
 * process や Electron を windowオブジェクト に保存する処理
 */
const electron = require('electron');

process.once('loaded', () => {
  // console.log('---- preload.js loaded ----');
  global.process = process;
  global.electron = electron;
  global.module = module;
});

```

global に持たせたものは、レンダラプロセスにて、window オブジェクトに入るので

`require('electron')` → `window.electron` に書き換える


### Webpackの設定

`target: 'web'` にする

もし、従来の方式である `target:'electron-renderer'` にしていた場合は、 `bundle.js` 内で `require` するコードが生成されるので、

`Uncaught ReferenceError: require is not defined` エラーが発生する


```javascript
  entry: [
    ...
  ],

  output: {
    ...
  },

  /**
   * https://github.com/chentsulin/webpack-target-electron-renderer#how-this-module-works
   */
  target: 'web',

```
FileBeatでSyslogをElasticSearchに転送する

## 概要
Filebeatを監視対象サーバーにインストールし、SyslogをElasticSearchに転送する。
（FileBeatからLogstashを経由してElasticSearchにログを転送する方法もあるが、今回は直接ElasticSearchに転送する）

FileBeatのSystemModule(Syslog用のモジュール)を使用する。

System moduleの詳細
https://www.elastic.co/guide/en/beats/filebeat/current/filebeat-module-system.html
System moduleの出力フィールド
https://www.elastic.co/guide/en/beats/filebeat/current/exported-fields-system.html

### Moduleとは

https://www.elastic.co/guide/en/beats/filebeat/current/filebeat-modules-overview.html

ログフォーマットの、収集・パース（構文解析）・可視化のテンプレート。

変数を指定することも可能。（ログのパスを変更する等）
https://www.elastic.co/guide/en/beats/filebeat/current/specify-variable-settings.html

### Ingest Node

Moduleで定義されたデータ変換/加工はElasticSeearch側のIngest Nodeで処理される。
(LogstashのFilterでやっていたことの一部がElasticSearchでも実行できる)
https://dev.classmethod.jp/server-side/elasticsearch/elasticsearch-ingest-node/
https://speakerdeck.com/elastic/ingest-node-voxxed-luxembourg?slide=14

ElasticSearchでpipelineを確認するには以下をAPIで実行。

```
GET _ingest/pipeline/*
```

## 環境
- 監視対象サーバー
    - CentOS 7.4
    - Filebeat 7.4.0
- ElasticSearch
    - Alibaba Cloud Elasticsearch

なお、Amazon Elasticsearch Serviceを使用する場合はこの方法は使えない。（filebeat-ossの使用が必要）

## Step1. FlieBeatインストール
yumを利用する方法とrpmをダウンロードしてインストールする方法がある。今回はyumでインストールした。

[Repositories for APT and YUM](https://www.elastic.co/guide/en/beats/filebeat/current/setup-repositories.html)

## Step2. filebeat.yml 修正
Filebeatの構成ファイルであるfilebeat.ymlを修正する。

``` 
$ vi /etc/filebeat/filebeat.yml

# System moduleを有効化
filebeat.modules:
- module: system

# Output先をElasticSearchに設定
output.elasticsearch:
  hosts: ["XXX:9200"]
  username: "XXX"
  password: "XXX"

# FilebeatのConfig設定
filebeat.config.modules:
  enabled: true
  path: ${path.config}/modules.d/*.yml

# ElasticSearchのIndex名を変更
output.elasticsearch.index: "syslogtest-%{[agent.version]}-%{+yyyy.MM.dd}"
setup.template.name: "syslogtest"
setup.template.pattern: "syslogtest-*"
```

文法テスト

```
$ filebeat test config
Config OK
```

## Step3. 初期設定コマンド

このコマンドによりModuleが使用可能になる。

```
$ filebeat setup -e
```

## Step4. Filebeat起動

```
# サービスとして起動
service filebeat start

# プロセスとして起動
filebeat -e

```

## Step5. Kibanaで確認

Kibana Indexesの設定を行う。（手順は省略）

ログが届いていることが確認できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427238/b16c5a33-6d9e-0253-c071-0f860882575e.png)

## 参考: Moduleの適用時・非適用時のログの比較

### Module非適用時
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427238/b3caa235-8241-70fc-3f95-30bc150c3638.png)


### Module適用時

"message"フィールドがパースされていることがわかる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427238/99a2559e-c0c6-10c0-0746-8fbf4732d70b.png)
複数のリポジトリを一つにまとめるコマンド

自分用メモ

[こちら](http://shiopu.hatenablog.com/entry/2016/03/23/171523)を参考にさせていただいてます.


```sh
cd til

#bash
ACCOUNT=hppRC
REPO=XXXXX

#fish
set ACCOUNT hppRC
set REPO XXXXX

# at dest repository path
git remote add $REPO git@github.com:$ACCOUNT/$REPO.git
git fetch $REPO
git checkout -b $REPO $REPO/master
git filter-branch -f --tree-filter "mkdir __temp__ && git mv -k {,.[!.],..[!.]}* __temp__/ && mkdir $REPO && git mv -k __temp__/{,.[!.],..[!.]}* $REPO/"
git checkout master
git merge $REPO --allow-unrelated-histories -m "merge to til"
#初回のみ
#ARCHIVE=til
#githubでtilというリポジトリを作成
#git remote add origin git@github.com:$ACCOUNT/$ARCHIVE.git
git push
```

```sh:自分用
#tilディレクトリで
set ACCOUNT hppRC
set REPO XXXXX

git remote add $REPO git@github.com:$ACCOUNT/$REPO.git
git fetch $REPO
git checkout -b $REPO $REPO/master
git filter-branch -f --tree-filter "mkdir __temp__ && git mv -k {,.[!.],..[!.]}* __temp__/ && mkdir $REPO && git mv -k __temp__/{,.[!.],..[!.]}* $REPO/"
git checkout master
git merge $REPO --allow-unrelated-histories -m "merge to til"
git push
```
WSL2によるYocto Linuxビルド環境の構築

# 実践動機
以前windows subsystem for linux 2(WSL2)が来たら試してみる旨を[こちら](https://qiita.com/Colonel_GTU/items/a0b55a461f9e9f8f7ff1)の記事に書いていたのですが　Insider Preview版で導入可能となったため実践してみたものです。
WindowsPC一台でビルド環境が整うためYocto普及の一助となればと思い記事作成いたしました。


#実施手順

以下に実際に行った手順を示します。

##実施環境

まず、実施環境を用意します。PCスペックは下記に示したもので、Hyper-VとWSL2が有効化されている必要があります。

|項目|詳細|
|:-:|:-:|
|OS|Microsoft Windows 10 Pro 64bit バージョン 1903 ビルド 18999.1|
|CPU|AMD Ryzen 5 1500X 3.50GHz|
|RAM|16GB|

##WSL2の導入

本手順は省略します。
以下のURL等をご参照ください。
https://docs.microsoft.com/ja-jp/windows/wsl/wsl2-install

##必要パッケージの取得
以後の手順は全てWSL2の上で行います。
まず、ビルドに必要なツールをapt経由でインストールします。

```shell:WSL2
sudo apt update
sudo apt upgrade
sudo apt install gawk wget git-core diffstat unzip texinfo gcc-multilib build-essential chrpath socat libsdl1.2-dev xterm 
sudo apt install python
```


##Pokyクローン
git経由でpokyをクローンします。今回はwarriorブランチを使用します。

```shell:WSL2
git clone git://git.yoctoproject.org/poky
cd poky
git checkout warrior
```


##イメージのビルド
本手順ではWSL2上でのビルド確認のため、デフォルトの設定から特に変更はせず、core-image-minimalをビルドします。

```shell:WSL2
source oe-init-build-env
git clone git://git.yoctoproject.org/poky
bitbake core-image-minimal
```

##QEMUの起動
イメージの動作確認のためQEMUを起動します。

```shell:WSL2
sudo chmod 666 /dev/net/tun
runqemu qemux86 nographic
"~中略~"
Poky (Yocto Project Reference Distro) 2.7.1 qemux86 /dev/ttyS0
qemux86 login:
```

筆者環境だとQEMUでイメージを起動時にKernel panicが発生して高確率で落ちてしまうのでイメージに問題がある可能性があります…
本現象は解決後追記いたします。

#まとめ
WSL2を用いることでYoctoイメージのビルドは(一応)可能でした。
QEMUによる動作確認も取れた
上記二点となります。

#参考URL
https://www.yoctoproject.org/docs/2.7.1/brief-yoctoprojectqs/brief-yoctoprojectqs.html
https://docs.microsoft.com/ja-jp/windows/wsl/wsl2-install
Vue.jsの<div>タグを<template>タグに変えた際にバグったのでその対応

大した話じゃないんですが自分が小一時間ハマったのでその対応方法

## やりたい事
v-forでループ回しているところで`<div>`が出力されてたんですが、これを出力しないように変更したい。
そういう時は`<template>`使おうっていたるところに書かれてるからそうしたけど動かなかった話。

## 元々の記述

### データ

``` javascript
const categories  = [{ url: "/dvd/001", label: "animals" }, { url: "/dvd/002", label: "anime" }]
```

### Vue.js

``` vue
<div 
  v-for="(category, key) in categories">
  :key="key"
  <a :href="category.url">{{ category.label }}</a>
</div>
```

### HTML出力

``` html
<div><a href="/dvd/001">animals</a></div>
<div><a href="/dvd/002">anime</a></div>
``` 

## 対応方法（結論）

[key]って感じで動的引数として定義してあげればOK

``` vue
<template 
  v-for="(category, key) in categories">
  :[key]="key"    # ← ココ!ココ！
  <a :href="category.url">{{ category.label }}</a>
</template>
```

### 対応後HTML出力

``` html
<a href="/dvd/001">animals</a>
<a href="/dvd/002">anime</a>
``` 



`<div>`では動いてるのに`<template>`にしたら動かなくなるのはよく分からない…

## 有識者の方にコメント頂いたので引用

>v-bind:keyは仮想DOM上でそのノードを識別して要素の再利用や並び替えに利用しています。
templateタグは実態化されないので識別する必要がありません。
なので、templateにはkeyをバインドする事ができません。
https://eslint.vuejs.org/rules/no-template-key.html
:[key] = "key" が書けたのは
動的引数によって :0 = 0 と書いているのと同義なので
本来の意図とは外れています。


## 後記

以上を踏まえてこう書こう！

``` vue
<template v-for="(category, key) in categories">
  <a
    :key="key"    # <a>タグに入れちゃう
    :href="category.url"
  >{{ category.label }}</a>
</template>
```
LeetCode ::: 74 /// Search a 2D Matrix

:snowflake::ear_of_rice: `思考回路`

> [[1, 2, 3],
[4, 5, 6],
[7, 8, 9]]
行列は所詮配列の中に配列、べっ…別に怖くなんかないわよ！:(´ºωº｀):

- 時間計算量を O(n^2) にしたくないのでやっぱりポインタにお願い
- ポインタ ① 号は変数 row、行数を表します。
- 行を頭からループしますので、ゼロを入れます。
- ポインタ ② 号は変数 col、列数を表します。
- 列は、最後尾からループする予定なので、「行の中のアイテム（配列）」の長さマイナス 1 にします。でも、もしこの行列が空っぽだったら、ゼロにします。
- 行列が空っぽでは無い状態で行数オーバーしないように while ループをします。
- target 見つかったら true～!
- お題に書かれてるヒントに注目。
- 目前のアイテム（matrix[row][col]）が target より**小さかったら、次の行へ**移行。
- 目前のアイテム（matrix[row][col]）が target より**大きかったら、同じ行にあると分かりましたので、前の列へ（列は最後尾からループしたから）**探し続けます。
- ずっと target を見つからなかったら false です。

---
<p class="codepen" data-height="1050" data-theme-id="0" data-default-tab="result" data-user="jujuriri" data-slug-hash="mdbmQBv" style="height: 1050px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="LeetCode ::: 74 /// Search a 2D Matrix">
  <span>See the Pen <a href="https://codepen.io/jujuriri/pen/mdbmQBv">
  LeetCode ::: 74 /// Search a 2D Matrix</a> by jujuriri (<a href="https://codepen.io/jujuriri">@jujuriri</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
---