OmniAICreator/Qiita-1.07M huggingface dataset:
CSSのpositionプロパティについて

# CSSのpositionとは
　`position`とは要素の位置を決めるためのプロパティです。

# どんな使い方ができるのか

 要素を指定したぶんだけ動かしたり、要素の上に別の要素を重ねてのせることができたり（画像の上に要素をのせるイメージ）、常に画面の同じ位置に要素を固定したりできます。

# positionの書き方
　`position`プロパティはCSSで以下のように書きます。

```
セレクタ名 { position : 値 }
```

値には次の４つのどれかを指定します。

positionの値
`static` 　: 初期値。指定することはほとんどない
`relative` : `現在の位置を基準`に`相対的`な位置を決める
`absolute` : `親要素を基準`に`絶対的`な位置を決める
`fixed` 　　: 画面の決まった位置に固定する

 positionは基本的に`top`、`bottom`、`left`、`right`というプロパティとセットで使います。
位置を指定する流れ
①`position`で基準を決める。
②`top` `bottom` `left` `right`で具体的な位置を数字で調整

# staticとは？
初期値 : CSSで何も指定していなければこれになっている
要素は通常の位置に : 上下左右に動かすことができない
要素の位置を調整できない : `top`や`left`などを指定しても効果がない
z-indexを指定できない : 要素の重なり順を変えられない

基本的に`static`を指定することはない。

# position: relative
 `position: relative`は現在の表示位置から相対的に要素の位置を動かした糸気に使います。

　`position: relative`としても、`top`や`bottom`を指定しなければ`static`と同じ位置に表示されます。
そのため一見同じように感じられるが、①位置調整の可否や②`z-index`指定の可否という違いがあります。「`z-index`や`top`などが指定できないときは`relative`にする！」とおぼえておくと良いでしょう。

# position:absolute
 `absolute`だと親要素を基準に、`絶対的`な位置を指定することになります。この「絶対的な位置」というのは、要素がどんな形であろうと、間に他の要素や余白が入っていようと、その位置に配置してくれるということ意味します。

# 親要素はrelativeにしておく
　`absolute`を使って位置調整するときは、親要素に`position: relative`（もしくは`fixed`）を指定しましょう。これを忘れると基準位置がずれて思ったように表示されません。`absolute`を使うときは、親要素もセットで変えるようにしましょう。

# position: fixed
 これは、画面の決まった位置に要素を固定させたい時に使う。スクロールしても位置が変わらないメニューバーなどを表示させたい時に使うと便利。
　`absolute`と指定方法がほとんど同じですが、位置の基準は`親要素ではなく「ウィンドウ全体」`です。そのため、要素の位置に関係なくtop: 0と指定したら画面の最上部に表示されます。
簡易的なヒートマップをアドオンで適用できるブックマークレットを作ってみた 

Webページのユーザビリティやユーザー行動を検証するのに、簡易的なヒートマップをコードに仕込むことなくアドオンで適用できる無料ツールがないか探してみたのですが、そういうのはなさそうだったので（Chrome機能拡張のPage Analyticsはヒートマップとは違うし、heatmap.jsはコードに仕込まないといけないので）自分でブックマークレットを作ってみました。
（アドレスバーにコピペではなく、ブックマークに登録すると動きます）

```
javascript:b=document.body;window.onclick=function(e){plot(25,'red',e,0.04)};window.addEventListener('mousemove',function(e){plot(10,'blue',e,0.01)});function plot(radius,color,event,opacity){d=document.createElement('div');r=radius;s=d.style;s.width=r*2+'px';s.height=r*2+'px';s.backgroundColor=color;s.position='absolute';s.left=event.pageX-r+'px';s.top=event.pageY-r+'px';s.opacity=opacity;s.borderRadius=r*2+'px';s.pointerEvents='none';b.appendChild(d);}
```
　
ヒートマップを適用したいページでブックマークレットを起動すると、画面上のクリックした箇所に赤い半透明のドットが、マウスの軌道に青い半透明のドットがプロットされ、同じ箇所にプロットされると濃くなっていくので、クリックとポインティグの位置と回数を視覚的に捉えることができます。
![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200719/edf4826a-c2da-1457-a17d-1006e6be3d81.png)

ヒートマップツールをコードに仕込まず、アドオンで簡易的にユーザビリティやユーザー行動を検証したいという分には、とりあえずこれで十分かなと思います。

ブックマークレットということで、画面そのものが同期で更新されるとヒートマップが解除されてしまうので、画面遷移の少ないLPや、非同期で遷移していく画面などで活用できるんじゃないかと思います。
pandas_datareaderのインストール方法と使い方 [Python]

## pandas_datareader とは
`pandas_datareader` は Python のライブラリで、Web上の色々な情報をAPIを使って簡単に取得するライブラリです。

`pandas` と名前についていますが、別物になっています（昔は一緒に入っていたらしい）
Anaconda でも入っておらず、別途インストールする必要があります。

<a href="https://pandas-datareader.readthedocs.io/en/latest/index.html">pandas-datareader &#8212; pandas-datareader 0.9.0rc1+2.g427f658 documentation</a>

## インストール方法
インストールはpipでやります。

```python
pip install pandas_datareader
```

これでインストール完了です。


## 使用例
トヨタ自動車の株価を見てみます。
証券番号は `7203` なので、DataReaderの第一引数に `7203.JP` 、第二引数に `stooq` を渡します。

```python
from pandas_datareader import data

df = data.DataReader('7203.JP', 'stooq')
df.head()
```

**実行結果**
![スクリーンショット 2020-11-14 10.03.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/833332/6115e9c7-f854-db8d-175e-37bfe36cec41.png)
これで株価を取得することができました。


## 参考
- https://github.com/pydata/pandas-datareader
【保存版】Vue.jsでFontAwesomeを簡単に使う方法

#はじめに
本記事へのアクセスありがとうございます。
投稿主はプログラミング初心者であり、この方法が**「最適解」**かは分かりません。
しかし、動作は検証済みです。

こんなやり方もできるんだ〜程度に見てもらえれば幸いです。

#さっそくスタート
まずはVue.jsでFontAwesomeを使うにあたり、必要となる5つを先にダウンロードしていきます。
この記事ではyarnでダウンロードを記載していきますが、npmの方はnpmのダウンロード方法でお願いします。

```javascript
yarn add --dev
@fortawesome/fontawesome-svg-core 
@fortawesome/free-brands-svg-icons　
@fortawesome/free-regular-svg-icons　
@fortawesome/free-solid-svg-icons　
@fortawesome/vue-fontawesome　
```
webpackのentry先であるjs（ここではmain.js)に下記のコードを追記します。

```javascript
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
library.add(fas, far, fab);
Vue.component('font-awesome-icon', FontAwesomeIcon);
```
FontAwesomeのホームページから使用したいアイコンを選択します。
今回は下記のアップルのアイコンを例として使いたいと思います。
![スクリーンショット 2020-10-28 16.48.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691815/b5446fbd-f0bf-a463-ec2e-384032b3ba56.png)

```vue
<div>
 <p>アップル</p>
  <font-awesome-icon
    :icon="['fab', 'apple']"
  />
```
このコードでアップルという文字の隣にアイコンを配置すること出来ます。
ポイントは:icon内の記載を上記画像の赤矢印のように書く事です。

また、下記のように font-awesome-iconタグにオプションとしてサイズや色を付け加えることもできます。

```vue
<div>
 <p>アップル</p>
  <font-awesome-icon
    :icon="['fab', 'apple']"
　　 style="color: red"
    size="2x"
  />
```
ボタンのアイコンとして使用したい場合は下記のようにすればOKです。

```vue
<div>
 <button @click="〇〇">
  <font-awesome-icon
    :icon="['fab', 'apple']"
　　 style="color: red"
    size="2x"
  />
 </button>
```
#おわり
お疲れ様でした。これでVue.jsにおけるFontAwesome設定が完了です。

少しでも役に立ったと思う方がいましたらLGTMをお願いします🙇‍♂️
gimpで日本語入力ができない件と破損したユーザー設定の復旧

ubuntu18〜20と使い続けていた為、環境がかなり汚くなっていてGIMPは日本語入力が受け付けなかったけど、メモ帳に入力したのをコピペするなど、適当に使っていた。

いい加減、修復したい。ので、した。

調べると `gimp` は `snap` と `apt-get` で二つインストールされていた。
いろいろ、あったのだろう。

`snap`でinstallされている方：日本語入力できない <- お気に入りに登録されていて常用
`apt-get`でinstallされている方：日本語入力できる（設定ファイルが壊れていて起動時パネル等何も表示されない）

snap版を削除

```
$ snap remove gimp
```

`apt-get`版の設定ファイルを修復したい（初期設定にしたい）
ユーザー設定を削除すると普通は復旧できるようだ

```
$ rm -r ./.config/GIMP
```
しかし、コピー元のデフォルトの設定ファイルも壊れていた為、復旧不能
(gimp起動時に、設定ファイルがローカルにコピー出来なかった旨、エラーが出る)

apt-get版の再インストール

```
$ sudo apt-get remove gimp
$ sudo apt-get install gimp
```
復旧できず。

```
$ apt list | grep gimp
　　　　:
　　　　:
gimp-data/focal,focal 2.10.18-1 all [設定が残存]
　　　　:
　　　　:
```
が原因

`sudo apt-get autoremove` `sudo apt-get autoclean` いずれも効果なし

全ての残存ファイルを削除

```
$ sudo apt-get purge $(dpkg -l | grep '^rc' | awk '{print $2}')
```
で、再インストール

```
$ sudo apt-get install gimp
```


OKでした

ここで、未だ復旧しない場合は
一度GIMPを終了してから
ユーザー設定を削除して起動

```
$ rm -r ./.config/GIMP
```
今度は、初期設定値がユーザー設定に正常にコピー出来たため、復旧できた
Herokuでアプリケーションを公開する手順

# はじめに
## 前提
個人的な備忘録
ruby 2.6.5 / Rails 6.0.3.4 / Mysql2

# 手順
## rails_12factor インストール

```ruby:Gemfile
group :production do
  gem 'rails_12factor'
end
```
bundle install => **master にcommit**

***#追記***
**こちらのGemのインストールはRails5以降では不要のようです。**
**すでにメンテナンスがされていないと思われるGemをインストールしておくのは好ましくないので、不要なGemはアンインストールしておいた方がよさそうです。**

参考URL
[【初心者必見】RailsアプリをHerokuに公開するのにrails_12factorは不要](https://qiita.com/jnchito/items/54eb7b3df322fc86675e)

## Herokuにアプリを作成
```:ターミナル
% heroku create アプリ名
```
アプリ名は _（アンダーバー）使えない

## Herokuにアプリができているか確認
```:ターミナル
% git config --list | grep heroku
```

## Mysqlの設定
clearDBアドオンを行う

```:ターミナル
% heroku addons:add cleardb
```

これによりDBがHerokuのデフォルトDB（PostgreSQL）からMysqlに変更

## Mysql2(Gem)への対応
URLを再設定する

```:ターミナル
% heroku_cleardb=`heroku config:get CLEARDB_DATABASE_URL`
```
上記で変数を定義

```:ターミナル
% heroku config:set DATABASE_URL=mysql2${heroku_cleardb:5}
```
URLの設定が完了

## 環境変数の設定
```:ターミナル
% heroku config:set RAILS_MASTER_KEY=`cat config/master.key`
```
↓　確認方法

```:ターミナル
% heroku config
```

## Herokuにアプリをpush

```:ターミナル
% git push heroku master
```

## マイグレーションを実行
```:ターミナル
% heroku run rails db:migrate
```

## 公開を確認
```:ターミナル
% heroku apps:info
```

## エラーの確認
```:ターミナル
% heroku logs --tail --app アプリ名
```

## Herokuのアップデート（必要に応じて）
Warning: heroku update available が出たときの対処

```:ターミナル
% heroku update
```


# おわりに

画像がたぶん使えなくなっているのでAmazonS3の設定が必要かも

✔︎
【Python】1つ上の階層のモジュールをimport

mydir
└ parent.py
　 └ child.py
	
といったフォルダ構造にて，child.pyからparent.pyをimportする方法


```child.py

import sys
import pathlib

# ひとつ上の階層の絶対パスを取得
parent_dir = str(pathlib.Path(__file__).parent.parent.resolve())

# モジュール検索パスに，ひとつ上の階層の絶対パスを追加
sys.path.append(parent_dir)

import parent

```
Pandasを使ってBootstrap sampling

# PandasでBootstrap samplingするためのちょっとしたスクリプト
Bootstrap samplingは、データをサンプルの中から重複を許してランダムに取得して、元とはちょっと違った集団を作り出すのに使われる。 例えばそれを1000回とか繰り返したりして統計をとったりする。
Pandasでやるのにどうしたらいいか考えたのでメモっておく。

## アヤメのサンプルを使ってみる
pandasとアヤメのサンプル取得、あとはランダムサンプリングに使う乱数モジュールをインポートする。

```
import pandas as pd
import random
from sklearn.datasets import load_iris
```
そしてデータをロードしてpandasのデータフレームにのせる。

```
iris_dataset = load_iris()
df = pd.DataFrame(data=iris_dataset.data, columns=iris_dataset.feature_names)
```

`df.describe()`でデータを見てみる。

```
sepal length (cm)	sepal width (cm)	petal length (cm)	petal width (cm)
count	150.000000	150.000000	150.000000	150.000000
mean	5.843333	3.057333	3.758000	1.199333
std	0.828066	0.435866	1.765298	0.762238
min	4.300000	2.000000	1.000000	0.100000
25%	5.100000	2.800000	1.600000	0.300000
50%	5.800000	3.000000	4.350000	1.300000
75%	6.400000	3.300000	5.100000	1.800000
max	7.900000	4.400000	6.900000	2.500000
```
そしてデータをランダムサンプリングする関数を定義する。
まず元のデータフレームの`columns`を使って空のデータフレームを`pd.DataFrame(columns=a_data_frame.columns)`で作成し、そこに乱数`selected_num = random.choice(range(a_data_frame.shape[0]))`で選ばれた行のフレーム`a_data_frame[selected_num : selected_num + 1]`を`append`で追加していく。
pandasのdata frameでは単行を選択（たとえばnumpyなら[0]）するのにも範囲選択（[0:1]）する必要があるみたいなので注意。

```
def btstrap(a_data_frame):
    btstr_data = pd.DataFrame(columns=a_data_frame.columns)
    for a_data in range(a_data_frame.shape[0]):
        selected_num = random.choice(range(a_data_frame.shape[0]))
        btstr_data = btstr_data.append(a_data_frame[selected_num : selected_num + 1])
    return btstr_data
```

`btstr_data = btstrap(df)`とかやってランダムサンプリング後のデータを`btstr_data.describe()`で確認。

```
sepal length (cm)	sepal width (cm)	petal length (cm)	petal width (cm)
count	150.000000	150.000000	150.000000	150.000000
mean	5.750000	3.040667	3.660667	1.176000
std	0.728034	0.410287	1.716634	0.766644
min	4.300000	2.000000	1.100000	0.100000
25%	5.100000	2.800000	1.500000	0.200000
50%	5.700000	3.000000	4.250000	1.300000
75%	6.300000	3.300000	5.000000	1.800000
max	7.700000	4.400000	6.700000	2.500000
```
これを1000回とかループで回してフィッティングなり変数選択なりした結果を取得する。


## 【後述】もっと簡単な方法があった
`replace=True` とすればpandasにもともとある機能の`.sample`で同じことができるみたい。
@nkay さんご指摘ありがとうございました。

```
df.sample(n=df.shape[0], replace=True)
```
(小ネタ)Wordpressのドメイン変更でサイトIDを変更する方法

# 概要
サイト移転等でWordpressのドメインを変更する際の手順について。


# mysqlの設定変更
サイトIDは管理画面から変更可能であるが、ドメインを変更した場合、サイトに接続できなくなるため、mysqlから設定の変更が必要となる。
＊以下、テーブル名は設定に応じて、読み替えてください。

## 設定の確認
以下SQLで現状の'home','siteurl'の設定内容を確認できる。

```sql
SELECT * FROM wp_options WHERE option_name IN ('home','siteurl');
```
## 変更する方法
以下SQLで'home','siteurl'に新しいドメインを設定できる。

```sql
update wp_options SET option_value = " https://new.domain.com" where (option_id = 1  and option_name = "siteurl" ) OR (option_id = 2 and option_name = "home");
```

# 記事内のURLの修正
記事内にURLが埋め込まれている場合、そのURLも修正する必要がある。

## 記事のURLを確認する
以下SQLで記事内にURLが存在するかを確認できる。URLがあれば、修正する。

```sql
select * from wp_posts where guid like "https://old.domain.com/%" limit 10;
```
Dialogflowのエージェントは削除済みだがプロジェクトが削除できない場合の対処法

# 事象
GCPプロジェクトをシャットダウンする際に以下のエラーが発生する。


>You cannot delete this project because it is linked with a Dialogflow agent. 
Please follow the link to Dialogflow and delete the agent:
https://console.dialogflow.com/api-client/#/agent/<エージェントID>/

リンクに記載されたエージェントはすでに削除済みであり、対処にドハマリしました。
誰かの助けになればと思い、記事にします。

# 原因
Dialogflowのエージェントを作成した際に、プロジェクトの偶発的な削除を目的とした「リーエン」なるものが適応されていた模様。
[リーエンとは（Google公式ドキュメント）](https://cloud.google.com/resource-manager/docs/project-liens)

# 対処法
0. (前提)　Dialogflowのエージェントは既に削除済みであること
1. GCPのコンソールを開き、対象のプロジェクトを選択する
2. 画面右上の![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404375/32702286-d1a7-0b36-01fe-dfb9b1f0d4d6.png)を押下し、CloudShellを表示
3. ```gcloud alpha resource-manager liens list```を実行。実行後、リーエンIDが表示される
4. ```gcloud alpha resource-manager liens delete <リーエンID>```を実行。

上記の作業完了後、プロジェクトのシャットダウンが可能となる。
【MariaDB】LinuxにMariaDBをインストールして、DBと操作ユーザーを作成する

AWSにて、Linux2のEC2をDBサーバーとして使おうとMariaDBをインストールしたときのメモです。(圧倒的自分用)

まずは何はともあれ

```
sudo yum update -y
```


mariaDBのインストール


```
sudo yum -y install mariadb-server
```



mariaDB起動

```
sudo systemctl start mariadb
```

DBのrootアカウントのパスワードを設定

```
mysqladmin -u root password
```

rootアカウントで、設定したパスワードにてDBにログイン

```
mysql -u root -p
```

{データベース名}でDBを作成

```
CREATE DATABASE {データベース名} DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
```

作成した{データベース名}DBへの全操作権限を付与したユーザーを
{ユーザー名}と{パスワード}で作成

```
grant all on {データベース名}.* to {ユーザー名}@"%" identified by '{パスワード}';
```

次回以降、サーバ起動時にmariaDBも自動で起動するように設定

```
sudo systemctl enable mariadb
```
【AWS】より安全に使うためにCloudWatchを設定する

AWSを利用してからルートユーザー、IAMユーザー共にMFA（多要素認証）は設定していましたが、コストに関して通知（CloudWatch）が来るように設定できることは後から知りました。

それぞれの目的
・MFA→不正アクセスを防ぐ
・CloudWatch→サービスの使い過ぎを防ぐ（指定した金額以上になったら通知が来る）

その際の設定を備忘録として書いていきます。

ログイン後、サービスの検索からCloudWatchを検索。
<a href="https://gyazo.com/033dd9714d028fc844d22eb79d1049dc"><img src="https://i.gyazo.com/033dd9714d028fc844d22eb79d1049dc.png" alt="Image from Gyazo" width="1086"/></a>

CloudWatchを選択。
<a href="https://gyazo.com/622e0d5ce11653c7fd3d1c4e07e4e2ec"><img src="https://i.gyazo.com/622e0d5ce11653c7fd3d1c4e07e4e2ec.png" alt="Image from Gyazo" width="1069"/></a>

右上のリージョンをバージニア北部に変更し、左側のメニューから請求を選択
<a href="https://gyazo.com/204d0b405a33711411313a368fa76ed3"><img src="https://i.gyazo.com/204d0b405a33711411313a368fa76ed3.png" alt="Image from Gyazo" width="1313"/></a>

請求選択後に画面が切り替わったら、画像下部のアラームの作成をクリック。
<a href="https://gyazo.com/448f34e5c94b1b024ddc4764ac6df72b"><img src="https://i.gyazo.com/448f34e5c94b1b024ddc4764ac6df72b.png" alt="Image from Gyazo" width="1319"/></a>

この画面では、デフォルトのままでOKです。
<a href="https://gyazo.com/11db2048ff5055906c61f2669a37fe0a"><img src="https://i.gyazo.com/11db2048ff5055906c61f2669a37fe0a.png" alt="Image from Gyazo" width="1237"/></a>

課金がいくらになればアラーム通知が鳴るか設定します。設定後下部の次へをクリック。
<a href="https://gyazo.com/9604fae3d82750749c14e1b113419eda"><img src="https://i.gyazo.com/9604fae3d82750749c14e1b113419eda.png" alt="Image from Gyazo" width="962"/></a>

通知を受け取るメールアドレスを入力しトピック作成。
トピック作成後にメールアドレス宛に、通知を送っても良いですか？というような確認メールが来るのでConfirmをクリックしてアドレスの設定を完了させます。
中々メールが届かないようであれば、迷惑メールにきている可能性があります。
※この作業をしないとステータスが確認中のままとなり、通知がきません。
<a href="https://gyazo.com/d0389dccc3069164664652e5b82f9b4e"><img src="https://i.gyazo.com/d0389dccc3069164664652e5b82f9b4e.png" alt="Image from Gyazo" width="1193"/></a>

メールアドレスの入力が完了したら、下までスクロールし次へをクリック。
<a href="https://gyazo.com/a468e6298c33c2d8e0dc2fbd4a6a7b85"><img src="https://i.gyazo.com/a468e6298c33c2d8e0dc2fbd4a6a7b85.png" alt="Image from Gyazo" width="980"/></a>

適当にアラーム名を入力し、次へをクリック。
<a href="https://gyazo.com/c229b33532172ef5c20f66016c02e78f"><img src="https://i.gyazo.com/c229b33532172ef5c20f66016c02e78f.png" alt="Image from Gyazo" width="894"/></a>

最後に今まで設定した内容の確認画面となり、下部にスクロール後アラームの作成をクリック。
<a href="https://gyazo.com/7b2d02f7334a85cb105ff5a3c0417f93"><img src="https://i.gyazo.com/7b2d02f7334a85cb105ff5a3c0417f93.png" alt="Image from Gyazo" width="870"/></a>

正常に作成されました。設定は以上です。
<a href="https://gyazo.com/afbfefd8b6d3dd564dcdc2c10650fcb9"><img src="https://i.gyazo.com/afbfefd8b6d3dd564dcdc2c10650fcb9.png" alt="Image from Gyazo" width="1123"/></a>

今のところ、アラームは１個で十分ですが、アラーム数10個までであれば毎月無料で使用することができます。
アラームを削除したい場合は、アラーム名の左にチェックを入れて上部のアクションをクリック後削除を選択することで削除できます。

設定のし過ぎで課金されないようにしましょう。
[Shopify]どのページからでも特定のコレクションを抜き出す

```liquid:sample.liquid
{% assign ladies_collection = collections | where: "handle", "ladies" | first %}
{% assign tops_collection = collections | where: "title", "トップス" | first %}
<div>{{ ladies_collection.title }}</div>
<div>{{ tops_collection.title }}</div>
```

```
レディース
トップス
```

・collectionsオブジェクト: そのショップの全てのcollectionオブジェクトを要素として持っている配列。
・whereフィルター: 条件を指定してその条件に該当する特定のオブジェクトを抜き出し、配列として返す
・firstフィルター: 配列の最初の要素を取り出す

firstフィルターをかけるか[0]でインデックスを指定しないと、配列のままなので注意(上の場合、何も表示されない)。

## 参考
collectionsオブジェクト
https://shopify.dev/docs/themes/liquid/reference/objects#collections

whereフィルター
https://shopify.github.io/liquid/filters/where/

firstフィルター
https://shopify.github.io/liquid/filters/first/

## 追記(2020/11/30)
これでもいけました。こちらの方が簡単です。

```liquid:sample.liquid
{% comment %}collections[{コレクションのhandle}]{% endcomment %}
{% assign ladies_collection = collections['ladies_collection'] %}

{% comment %}collections.{{コレクションのhandle}}{% endcomment %}
{% assign tops_collection = collections.tops %}

<div>{{ ladies_collection.title }}</div>
<div>{{ tops_collection.title }}</div>
```

```
レディース
トップス
```

なんで```collections```オブジェクトのインデックスにコレクションの```handle```入れると、オブジェクトが取り出せるんだろう。
どこかにドキュメントないかな。。。
→これかな。
>Accessing handle attributes
In many cases you may know the handle of a object whose attributes you want to access. You can access its attributes by pluralizing the name of the object, then using either the square bracket ( [ ] ) or dot ( . ) notation. 
 https://shopify.dev/docs/themes/liquid/reference/basics/handle

collectionsオブジェクトって、collectionオブジェクトを含んでいるわけで、おそらくArrayとは、やっぱりちょっと違うんだなぁ(オブジェクトの配列を作るのって、できなかったはず)
collectionsとかpagesとか、Global objectsだけ特殊(Arrayだけどhandleを使ってハッシュやオブジェクトのようにアクセスできる)なのかな？
→あ、```Global Objects```なんだから、オブジェクトなのか(handleがkey)。。。

参考:
[You have the collection handle. collections is a global Liquid object. Therefore you can reference any specific collection using the handle. ](https://stackoverflow.com/questions/59515634/how-to-get-collection-object-in-shopify-when-selected-from-customize-window)
[Shopifyのcollectionに関するオブジェクト](https://webutubutu.com/webdesign/8688)
【nuxt.js】FontAwesomeを「軽く」使用する方法

nuxtアプリにFontAwesomeを導入する際、より「軽く」するためのメモになります。
##前提
nuxtにFontAwesomeをインストールする方法は、公式ドキュメントに載っていますので割愛します。（要約して記事にしている方も多いですし）
参考：[nuxt-fontawesome](https://www.npmjs.com/package/nuxt-fontawesome)
##FontAwesomeは重い
FontAwesomeは普通に実装すると結構重いです。そのため、軽くするための工夫が必要になります。
以下のように使用するアイコンの名前を直接指定すると、指定されたアイコンのみ読み込みます。

```javascript:nuxt.config.js
fontawesome: {
    imports: [
      {
        set: '@fortawesome/free-solid-svg-icons',
        icons: ['faBars', ],//['fas']だと全て読み込んでしまう
      },
    ],
},

```
状況にもよるかと思いますが、私のプロダクトの場合は体感で3~４秒ほど初期ロードが短縮されました。
VBAでサブフォルダにあるファイルも含めてファイル名の一覧を取得する

以下のサイトのソースに備忘メモを加えました。

[サブフォルダを含めてファイル一覧を取得する（Dir関数の再帰呼び出し）](https://www.moug.net/tech/exvba/0060088.html)


```vb
Option Explicit
 
Sub Sample()
    Const SEARCH_DIR As String = "C:\Users\xxx"  'フォルダ名の末尾の"\"は不要
    Const SEARCH_FILE As String = "*.png" 'constで定数を宣言
    Dim tmpFile As String
    Dim strCmd As String
    Dim buf() As Byte
    Dim FileList() As String
    Dim myArray() As String
    Dim cnt As Long, pt As Long, i As Long

    '変数tmpFileにDirコマンドの結果を出力する一時ファイルのプルパスを格納
    'Dirコマンド:フォルダ内にあるファイル名を一覧取得するコマンド
    'EnvironはWindowsのtempディレクトリの環境変数を取得する関数
    tmpFile = Environ("TEMP") & "\Dir.tmp"
    
    
    'Dirコマンド用の文字列を編集
    'Dir C:\Users\*.png /b/s/a:-d > \Dir.tmp
    '/b ファイル名のみ表示。見出しや要約が付きません
    '/s 指定されたディレクトリおよびそのサブディレクトリのすべてのファイルを表示
    '/a 属性。"-"で指定した属性を除く。"-d"でディレクトリ（フォルダ）を除くという意味
    strCmd = "Dir """ & SEARCH_DIR & "\" & SEARCH_FILE & """ /b/s/a:-d > """ & tmpFile & """"
    
    'WSHでDirコマンドを実行
    'VBAで他のアプリケーションを利用するためにShell関数を使用
    'Wscript(Windows Script Host)のWshShellクラスを利用
    '.Run(起動するコマンド、[ウィンドウのスタイル], [起動したコマンドの終了待ちをするかしないか])
    'Runコマンドで実行。cmd /cでcディレクトリに移動し、stcCmdに格納されているコマンドを実行
    '7はウィンドウを最小化ウィンドウとして表示するという意味
    'Trueはコマンドの終了を待ってからスクリプトを実行するという意味
    With CreateObject("Wscript.Shell")
         .Run "cmd /c" & strCmd, 7, True
    End With
    
    '該当ファイルの存在チェック
    If FileLen(tmpFile) < 1 Then
        MsgBox "該当するファイルがありません"
        Exit Sub
    End If
    
    'Dirコマンドの結果を出力した一時ファイルを読み込み
    'FileSystemObjectクラスではバイナリファイルを開けないため、Openステートメントを使ってバイナリファイルを読み込み
    'ReDimでbufを再定義
    Open tmpFile For Binary As #1
        ReDim buf(1 To LOF(1))
        Get #1, , buf
    Close #1
    Kill tmpFile
    
    'vbCrLfは改行コード
    'StrConv関数でバイナリ形式から、vbUnicode形式に変更
    'Split関数でテキストを改行ごとに分割
    FileList() = Split(StrConv(buf, vbUnicode), vbCrLf)
   
    'Dirコマンドの出力件数
    cnt = UBound(FileList)

    'ワークシート書き出し用の配列 ---------(2)
    ReDim myArray(1 To cnt, 1 To 2)
    For i = 1 To cnt
        pt = InStrRev(FileList(i - 1), "\")
        myArray(i, 1) = Left(FileList(i - 1), pt)    'パス
        myArray(i, 2) = Mid(FileList(i - 1), pt + 1) 'ファイル名
    Next i
        
   '配列の値をワークシートに出力
    ActiveSheet.UsedRange.ClearContents
    Range("A1").Value = "パス"
    Range("B1").Value = "ファイル名"
    Range("A2").Resize(cnt, 2).Value = myArray
End Sub

```
英語とエンジニア（その１）

たまには毛色の変わった話。おそらくその２はあるが、その３以降はない。エンジニアと英語である。

## 現状のレベル
コミュニケーションは取れるようなったが、未だに「R」と「L」との区別はまともにできない。さらに言うと、先日、日本語を知らない部下に対して、「れじすた」の値を変更する必要があるので準備してくれ、、と言ったら、「resistor(抵抗)」か「register(ICチップ内のレジスタ)」のどっちなんだと怒られた。映画のセリフはよくわからんし、話す時の文法は今でも支離滅裂＆単語の羅列。

## ヒストリ
### きっかけ
Onec upon a time、大学時代、研究室が関わる国際会議にアルバイトで事務の手伝いをすることがあったが、声をかけられても何が何だか全くわからん状況。それをきっかけに英会話学校に通う。卒業旅行で某N国に一人で行き、ある程度の会話はできるようにはなった。

### 社会人になってから
たまたま、海外出張をする機会に恵まれた。やはり、仕事でなると、多少なりとも必死になる。出張前の英語に触れる機会を増やすなどの準備をし、僅かな期間の出張中もなんとか凌ぐ。この繰り返し。とにかく、仕事で使ったことで、コミュケーションスキルは上がった感あり。やはり、「習うより慣れろ」か。

## 学習方法＆教材
### 昔
学生の頃や社会人初期当時はインターネットもなく、ましてやiPodもなく、家以外で英語を聞くためには、Walkman系を用いるのが主流。カセットテープまたはラジオで英語を聞いて耳慣れする、、というのが基本であった。有名どころの教材などは色々試す。たとえば、次のようなもの。
・NHKの語学講座
・ヒアリングマラソン（アルクのマラソン系教材は結構トライ）
・スーパーエルマー
・英会話学校
（ベルリッツのマンツーマンレッスンも受けたことあり。１回６−８千円くらいだったはず。忙しくてチケット全てを使いきれず、数万円捨ててしまう。）

### 最近
今でも継続的にやる、維持のため。今は
・YoutubeでのLIVEニュース
・TED
あたりか。TEDのように英語字幕があるのは有益。１回目は字幕なしで、２回目以降は字幕ありで見るとか。集中するには、比較的短めのスピーチがよい。オンライン英会話（Skype）も試したこともある。Qualityを求めなければ、安いところは多数あり。技術話をするようにリクエストするのも効果的では。

### 最も効果があったのは
結局は、教材より、出張前の準備（何を話すかとか）、出張中の苦労（失敗）した経験。必死さの程度がキーか。

### 聞こえないと話せない
ヒアリングそして声を出して英語を読む（スピーキング、リピーティングなど）が大事と感じる。ただ、これだと、発音の向上には限界があるような、、、。

## けれども（このサイトとしては、ここがもっと大事）
コミュニケーションが取れればいいと割り切る。英語だけではない、エンジニアにとっての共通の言語は。プログラミング言語、フローチャート、何でもいい。身振り手振りでもいい。私の場合、紙やホワイトボードなどに何でも書き出すことをよくやった。手書きの図で十分。関連する話は、その２で述べるかもしれない。

## 結局のところ
### 使っていなければ忘れる
ただそれだけ。日本語も同じ。ある時、漢字が書けなくなった感じた。（多くの人が同じ状況では、、。）これではイカンとスマホアプリで漢字練習をはじめる。今ではだいぶ復活。

### 駆り立てるものが必要では？（ここも大事）
私の場合、知識・能力の喪失が怖い。それが、トリガ。

### 余談１
事情があって、英語がほぼ使われていない某国に住んでいたときには、英語が抜けた。帰国直後は、日本語＞その国の言語＞英語という順番で言葉が出る。やはり使っていないと忘れる。

### 余談２
英語の「Practice makes perfect」は日本語の「習うより慣れろ」ではない。そもそも「Perfect」状態はありえない（定義にもよる）。過去に「Practice makes ....」と別の言葉で英語ネイティブに言われたことあり。この大事な部分は忘れたが、とにかく「Perfect」ではなく、もっとしっくりしたもの。（思い出したら、その２で書く。）

### 余談３
口を動かす、耳を動かす、筋肉と同じ。

## 最後に
その２に続く（と思う）。
Udemyと歩んだAWSアソシエイト3冠

この記事は[Udemy Advent Calendar 2020](https://qiita.com/advent-calendar/2020/udemy)の17日目の記事です🎉

今年はUdemyをめちゃくちゃ活用できた年でした。
↓今年買ったUdemy教材の一部
![スクリーンショット 2020-11-11 1.59.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246580/f1a7a3a6-9957-88a3-13bd-a1c3708211cf.png)

中でも、AWSに関してはアソシエイト3冠を達成することができ、Udemyを使用したインプットの成果としても良いものが出せたと思います。
本記事では私がどのようにUdemyを活用してアソシエイト3冠を達成できたのかを紹介しようと思います。

## 全資格共通の流れ
アソシエイト系の資格を取得するにあたって実施したことは、

- Udemyで講座を見る
- 実際に触ってみる
- Web問題集を解く
- 習得した知識をアウトプットする

です。
[ラーニングピラミッド](https://ja.wikipedia.org/wiki/%E3%83%A9%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0%E3%83%94%E3%83%A9%E3%83%9F%E3%83%83%E3%83%89)に沿ったシンプルかつ基本的な学習方法ですが、知識の定着に大きな力を発揮してくれるサイクルだと思います。

## Udemyで講座を見る→実際に触ってみる
正直これに尽きると思います。
Udemyでマネージメントコンソールベースの講義を見ながら自分でも同じように動かしてみる。
これだけでも結構力になります。

### 使用した講座

SAAに関しては、今はもう見れなくなってしまっていますが[ketancho 😁｜Kei Kanazawa](https://twitter.com/ketancho)さんが公開していた講座を利用していました。
[AWS学習の0→1をサポートする講座「手を動かしながら2週間で学ぶ AWS 基本から応用まで」をUdemyでリリースしました](https://www.ketancho.net/entry/2018/09/03/074115)

※現在SAAはいろいろな対策講座や書籍が公開・販売されているためインプットには困らないと思います。

SOAとDVAですが、同じ講師が公開している講座を活用しました。
DVA
[Ultimate AWS Certified Developer Associate 2020 - NEW!](https://www.udemy.com/course/aws-certified-developer-associate-dva-c01/)
SOA
[Ultimate AWS Certified SysOps Administrator Associate 2020](https://www.udemy.com/course/ultimate-aws-certified-sysops-administrator-associate/)

~~講座名がどことなく胡散臭いですが~~内容はガチです。
↓のような感じで
サービス概要説明→ハンズオン→理解度確認
の流れを単元単位で実施することができます。
![スクリーンショット 2020-11-12 2.45.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246580/f795aa45-7f00-84af-3791-2271376240fb.png)
(元講座は英語ですがページ全体をGoogle翻訳してます。)

無料プレビューが公開されているので詳しい内容はそちらを確認してみてください。

### 英語わからないんだけど？
私もわからないですがGoogle翻訳を使うと英語がわかるようになります（？）
プレイヤー下部の「トランスクリプション」を押すと画面右に字幕が表示されます。
その字幕を翻訳すると結構ストレスなく見ることができます。

↓無料プレビュー部分で試してみるとこんな感じ
![Nov-13-2020 04-32-48.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246580/18e066da-26f3-1151-38c7-bb59e5d84cbb.gif)

Udemyで講座を見るのと実際に触ってみるのとはこれでカバーできると思います。

## Web問題集を解く
インプットが終わったら次は理解度確認です。
私は一貫してWhizlabsというサービスを使用していました。
基本的に全問題を2周しました。

※UdemyのAdvent Calendar記事なので詳しくは割愛します。
[この記事](https://www.ooooouchi.info/entry/2020/06/10/083000)でWhizlabsについて紹介しているのでよければ参考にしてください！

## 習得した知識をアウトプットする
ここが学習の肝です。
アウトプットをするかどうかで定着度が大幅に変わります。

私はUdemyでやったハンズオン内容をまとめたり、実際に学習したサービスを使ってなにかを「やってみた」ことをブログにアウトプットしていました。
[Blue-Greenデプロイとは何かElastic Beanstalkで学ぶ](https://www.ooooouchi.info/entry/2020/06/26/083000)
[CodeCommitのプルリクエストをAWS Chatbotを経由してSlackで通知する](https://www.ooooouchi.info/entry/2020/06/12/083000)

ブログやってないよーって方はqiitaに記事を投稿するところから始めてみましょう！

## ここまでやって何点取れるの？
あくまで私の場合ですが、900点くらい取れました。
![20200725025033.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246580/2dc26bd2-6585-7023-920e-f66448c50539.jpeg)

## 終わりに
Udemyの強みは講座の質や学習効率はもちろんのことですが、**講座を購入することが学習を始めるトリガーになる**ことにあると思います。
AWSを勉強してみたいけど何を参考にすればいいかわからない人や、
SAAに合格してアソシエイト3冠してみようか迷ってる人は講座を購入してみることから始めてみてもいいかもしれませんね。

是非、皆さんもUdemyを活用して快適なラーニングライフを送ってください：）
eコマースウェブサイトをゼロから構築する方法

![how-to-build-an-ecommerce-website](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/705866/a25846c2-216f-7cd7-7bcf-cda0520cd557.png)

オンラインビジネスの競争は日々激化しています。つまり、オンラインストアを後で立ち上げるほど、目立ち、市場のシェアを獲得することが難しくなります。

eコマースWebサイトを最初から構築する方法に関する便利なガイドを使用すると、何千もの企業がオンラインでスムーズに移動できるようになり、プレゼンスが追加されたことで大きなメリットが得られる手順に慣れることができます。

現在、あなたのオンラインビジネスを構築するのに最適な時期です！[この記事では](https://whidegroup.com/blog/steps-to-build-an-e-commerce-website-for-small-business/)数週間のうちにユニークで高性能なオンラインストアを作成する手順について説明します。
vistaでquartus その47

# 概要

vistaでquartusやってみた。
qsysでniosやってみた。

# qsysでコンポーネントを追加する。

Nios II Processorを追加

On-Chip Memory (RAM or ROM)を追加

JTAG UARTを追加

# コンポーネントを接続する。

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/05c33073-2f5e-9028-8d57-abc98c3f6ec9.jpeg)

# niosの設定をする。

nios2_qsys_0のReset Vector memory と Exception vector memory をonchip_memory2_0.s1に設定

# Generateする。

# qsys終了。

# トップモジュールを作成する。


```
module test3(CLK, RST_N);
	input CLK, 
		RST_N;
	Nios0 u0(.clk_clk(CLK));
endmodule
```

# コンパイルする。

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/55778779-85aa-dea3-0a39-1dc4814a5a10.jpeg)


# 書き込みする。

# Nios II Software Build Tools for Eclipse を起動する。

# プロジェクトを作成する。

File → New → Nios II Application and BSP from Template を選択
・SOPC Information File name はQuartus ii で作成したプロジェクトのフォルダ内にある 「nios0.sopcinfo」 を選択
・Project name を 「test0」
・Templates は 「Hello World Small」を選択.

# プロジェクトをビルドする。

# 書き込む。

Run As→Nios II Hardware

以上。
>NET 5.0 正式リリース無事に終わったみたいですね

VisualStudio、2020/11/13の更新で正式に、.net core のサポートとなりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503965/09ec4b8d-7616-052f-4652-fea61bbdb8c0.png)

テンプレートのビルド、実行も問題なし。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503965/a724ff46-6132-efa1-4d29-8512867b44da.png)

フレームワークのバージョンも

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503965/dcdd89fe-7eb6-c924-67a0-b70d43742a29.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503965/33e412a5-bd03-6464-9e53-2663259ee61f.png)

間違いなく、5.0.0ですね
Rails / Ruby : Mail の HTML テキスト を取得する方法

Rails で、 ActionMailer::Base を継承した Mailer クラス では `mail` というメソッドを使って メールオブジェクトを作成します。
その返り値のメールオブジェクトのメソッド `deliver` を呼び出すとメールが送信されます。

## HTML をテキストとして取得

この HTML のメールの本文をテキストで取得する場合は次のようにメソッドを呼び出します。

```ruby
mail.html_part.body.to_s
```

この `html_part` は Rails が使用している Gem mail で定義されています。

```ruby:2020-11-14時点でのコード
    # Accessor for html_part
    def html_part(&block)
      if block_given?
        self.html_part = Mail::Part.new(:content_type => 'text/html', &block)
      else
        @html_part || find_first_mime_type('text/html')
      end
    end
```

## Plain Text の本文を取得

Plain Text で取得する場合は `text_part` が使えます。

```ruby
mail.text_part.body.to_s
```

`.body` までだと Body class のインスタンスが返ります。

## 関連

この記事では ActionMailer の mail メソッド の返り値から 本文を取得する方法について書いています。 送ったあとで本文を取得する場合は下記の記事が参考になります。

* [Get full text content of html email in RSpec](https://stackoverflow.com/questions/50038725/get-full-text-content-of-html-email-in-rspec)
* [rspec-email - How to get the body text?](https://stackoverflow.com/questions/5384473/rspec-email-how-to-get-the-body-text)
* [Railsでメール周りのrspecを書く際にハマった点](https://qiita.com/F_H_23/items/c30390f54ea234f48cbb)
既存のRailsアプリにVuetifyを導入した


# はやさを求めるなら
　Vue.jsが無事にできるようになったので、Vuetifyも、という手筈になった。Vuetifyとは素敵なコンポーネントがつまったフレームワークである。いちから作らなくてもボタンとかスライドとか、いちいちかっこいいやつがある。かっこいい。

　早速ドキュメントをみながら導入を試みた。しんどかった。全部英語だった。

https://vuetifyjs.com/en/getting-started/installation/


# 無からインストール

　はじめは既存のものに導入とか考えずに、無からやってみた。まずはVueのCLIというやつが必要らしい。公式を参考に入れよう。

https://cli.vuejs.org/

```terminal
$ yarn global add @vue/cli
```

　そして`vue`コマンドでつくる。

```terminal
$ vue create my-app
```

　数多くのファイル群ができるが、そこで以下のコマンドを入力する。

```
$ yarn serve
```

　この`yarn serve`はpackage.jsonで定義されたオリジナルのスクリプト。
　`"serve": "vue-cli-service serve",`となっている。

　実行すると以下のようにハローワールドができる。やったぜ。

![スクリーンショット 2020-11-09 5.30.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104211/629bb6b4-05b1-c744-4c13-25b6de8a0465.png)

　こんなページが表示された。成功だ。


# 既存のあれに入れる
　既存のアプリに入れ込むやり方だが、ここが参考になった。というよりほぼこの記事。ここの「3. Vuetifyをインストール」からやっていった。

[【Rails6】10分でRails + Vue + Vuetifyの環境を構築する](https://qiita.com/Ryoga_aoym/items/e1d91351389904240594#3-vuetify%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)

　ただ、おかしなエラーが出た。当時の記憶は定かではないが、そのままではうまくいかなった気がする。エラーログに以下のissueへのリンクがのっていた。

https://github.com/vuetifyjs/vuetify/discussions/4068

```
"$attrs is readonly" and "$listeners is readonly" 
```
というやつだった。

# $attrs is readonly" and "$listeners is readonly　への対処

　上記のリンクを追っていくと、えらい人が回答を述べていた。
https://github.com/vuetifyjs/vuetify/discussions/4068#discussioncomment-24984

　こうするといいらしい。

```js:config/webpack/environment.js
//中略　
// 以下を追記

environment.config.merge({
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
})
```

　そうしたらできた。ボタンが表示できた。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104211/b2e3af6a-45f7-e906-1e8f-159687a81caf.png" width="500">

　やったね。

# 一難去ってまた一難

　さて、無事にボタンが導入できたけどもとあった文字がすっごいしたのほうへ行ってしまった。ここらへんのデザインを修正しないといけない。どうすればいいのだろう。

　次回もお楽しみに。
Githubブラウザでフォルダ作りたい時

# もうgitコマンド打つ気力がない時用
- `create new file`
- ファイル名の所で`好きなフォルダ名/`
- なんかもう一回ボックス出てくるので`.gitkeep`
- そのまま`Create`
- 完了

#これ有難い
フォーム入力時に自動で名前やアドレスを補完してくれるアレ

あると便利なこの機能についてです。
![スクリーンショット 2020-11-14 2.17.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410392/33a247a1-e3cd-dc2b-431f-b43de2d21890.png)
使う側としても、住所などの長いものが一発ではまると気持ち良いですよね。実装のほんのひと手間でユーザーのフォーム入力の負担を軽減できるのなら、わたしはそれができる大人になりたいと思いました。
## autocomplete属性
ひと手間どころか、もはや知っているか知らないかなのですが、input要素にautocomplete属性を割り振るだけというお手軽さです。
下の例では、名前の場合は`autocomplete="name"`、 メールアドレスの場合は`autocomplete="email"`としています。

```html
<div class="form">
  <label for="name">名前</label>
  <input id="name" type="text" autocomplete="name">
</div>
<div class="form">
  <label for="email">メール</label>
  <input id="email" type="text" autocomplete="email">
</div>
```

その他の項目も自動補完に対応させたいよ！ という場合は[HTML の autocomplete 属性](https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/autocomplete)などを参考にすると良さそうです。
## おまけ： 自動補完される情報はどこと紐づいているのか
利用者視点のおまけです。
Chromeをお使いの方は、**設定 > 自動入力 > 住所やその他の情報** から情報を追加・修正できます。
![スクリーンショット 2020-11-14 2.27.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410392/6da81372-78b0-4a8d-f262-a1382f249c48.png)
自動補完しようとしてくれる気持ちはありがたいけど、住所とかぐちゃぐちゃなんだよなぁ、と思いながら使っている時が、わたしにもありました。今後はautocompleteの恩恵を、きちんと受けていこうと思います。
Python seleniumでelementからhtmlを取得する

# 課題
seleniumを使用していて、find_element_by_class_nameなどのfind_element_by_〇〇で取得した要素について、ソースのHTMLを取得したい。

.page_sourceでソースを取得しようとするも、

```
AttributeError: 'WebElement' object has no attribute 'page_source'
```

というようなエラーが発生する。

# 解決法
以下の方法でHTMLを取得できる。

```python
element.get_attribute('innerHTML')
```

参考： https://stackoverflow.com/questions/7263824/get-html-source-of-webelement-in-selenium-webdriver-using-python
【SwiftUI】状態とデータフロー

#この投稿は何か
SwiftUIフレームワークのアプリは、モデル内のデータや変化の流れを制御し、応答します。
この投稿は、SwiftUIアプリケーションの仕組みについて、[Apple Developerサイトのリファレンス](https://developer.apple.com/documentation/swiftui/state-and-data-flow)を独自に解釈・翻訳したものです。

###環境
macOS 11.0.1
Xcode 12.2
Swift 5.3


#アプリケーションの状態とデータフロー
SwiftUIでは宣言的なアプローチによって、UIを設計します。ビュー階層を構成する際には、ビュー間の「データの依存関係」も示します。データが外部イベントやユーザーのアクションによって変更されると、SwiftUIは自動的に「インターフェースの影響を受ける部分」を更新します。その結果、「これまではビューコントローラによって行われてきたほとんどの作業」をフレームワークが自動的に実行します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70476/08421807-5e63-b636-b085-13e8b4743d4b.png)
Apple Developerサイトより引用


フレームワークは、ステート変数やバインディングなどを介して、アプリ内のデータとUIを接続します。これらのツールを使用することで、ロジックの記述量を減らすことができ、アプリ内のすべてのデータに対して **Source of Truth** を維持することができます。

実行したいタスクに合わせて、最適なツールを選択します。

- 値の型を`State`プロパティとしてラップすることで、ビュー内の一時的なUI状態をローカルで管理します。

- `ObservedObject`プロパティ・ラッパーを使用して、`ObservableObject`プロトコルに準拠した外部参照モデルデータに接続します。
`EnvironmentObject`プロパティ ラッパーを使用して、環境に保存されている `observable`オブジェクトへのアクセスを取得します。
`StateObject`を使用して、ビュー内で直接`observable`なオブジェクトのインスタンスを作成します。

- `Binding`プロパティラッパーを使用して、ステートやオブザーバブルオブジェクトなどの **Source of Truth** への参照を共有します。

- `Environment`に格納することで、アプリ全体に値データを分散させることができます。

- `PreferenceKey`を使用して、子ビューからビュー階層を介してデータを渡します。

- `FetchRequest`を使用して、Core Dataに保存された永続的なデータを管理します。


##プロパティ・ラッパーの作用
SwiftUIは、`State`や`Binding`のようなデータ管理を行う型をプロパティ・ラッパーとして実装しています。プロパティの宣言にラッパーの名前を持つ属性を追加することで、プロパティ・ラッパーを適用します。

````Swift:変数isVisibleにStateプロパティ・ラッパーを適用する
@State private var isVisible = true // Declares isVisible as a state variable.
````

プロパティはラッパーによって「指定された動作」を取得します。SwiftUIのステートプロパティとデータフロープロパティのラッパーは、データの変更を監視し、その影響を受けるビューを必要に応じて自動的に更新します。コード内のプロパティを直接参照する場合、ラップされた値にアクセスします。

````Swift:isVisibleがtrueの時だけ描画する
if isVisible == true {
    Text("Hello") // Only rendered when isVisible is true.
}
````

あるいは、プロパティ名の前にドル記号 (`$`) を付けることで、プロパティラッパーの投影値にアクセスできます。SwiftUIのステートやデータフローのプロパティラッパーは常に`Binding`を投影します。これはラッピングされた値への双方向の接続で、別のビューが **Source of Truth** にアクセスしたり、変更させたりできます。

````Swift:Toggle()メソッドはisVisibleの値を変更できる
Toggle("Visible", isOn: $isVisible) // The toggle can update the stored value.
````

プロパティラッパーの詳細については、Swiftプログラミング言語の[プロパティラッパー]()を参照してください。
新規プロジェクトでの技術選定の話

新規プロジェクトの立ち上げにあたって、言語・基盤を選定した際のまとめ記事。
丁度ローンチしてから１年程度経過したので、当時を思い出しつつ書いてみる。

# 前提
初めに、既存プロジェクトの技術スタックとしては以下

- C#
- .NET Framework
- SQL Server
- AWS
- Jenkins

他にもあるが、EC2上のWindows ServerにJenkinsでアプリケーションをデプロイして運用する、所謂Windows環境での開発である。

選定にあたっての選択肢としては、３つあった。

1. 既存リソースに乗っかる
2. .NET Coreへの乗り換え
3. .NET環境以外

当時、.NET Frameworkのメジャーアップデートの終了のアナウンスがマイクロソフトから発表されていたため、**1**の選択肢は早々に外した。
**2**と**3**については、色々と議論した結果、以下の理由を最重要視した。

**「プロダクト開発中の問題を以下に素早く解決できるか」**

**1**を外した時点で、Dockerを採用することにしていたが、Dockerを使った場合どうやってやるんだろう？・デプロイの仕方は？・このエラーはなに？など開発中に必ず行き当たるであろう問題に対して、どこまで素早く対応できるかを考えたときに、.NET Coreとそれ以外の言語（フレームワーク）を考えた結果、最終的には、**3**を選択した。（実務レベルでの知見の多さという観点）

また**3**の選択を後押しした、もう一つの理由として、組織（個人）が特定の技術しか知らないという状況よりも、より幅広く知っていた方がこの先のビジネス的・技術的な課題解決に大いに役立つのではないかと考えたからである。



# 選定基準（言語編）
いざ、選定をするとなっても、何を基準に決めたらいいのかというところから、始まった。
まずは興味があったり、有名どころの言語＋フレームワークを並べた。

- Go
- Ruby + Ruby on Rails
- Python + Django
- PHP + Laravel
- C# + .NET Core 

※.NET Coreについては比較のために調査対象に含めた。

次にアプリケーションの要件を整理。今回作成するアプリケーションは２つ
<dl>
  <dt>API</dt>
  <dd>シンプルなAPI。重視するのは実行速度（最終的には相当なアクセスが予想されるため、ある程度、早く・軽量な言語にしておきたい）</dd>
  <dt>Web</dt>
  <dd>管理画面。重視するのは開発の容易性（大多数のユーザーの目に触れるわけではないので、ある程度さくっと作りたい）</dd>
</dl>

候補と要件の整理ができたので、比較するための指標を決める。
言語の基本特性やナレッジ量などに加えて、実際に開発を進めていくうえで必要になりそうな事柄を挙げた。

その後、調査を行い最終的に以下の表にまとまった。
**※あくまで当時の知識なしのメンバー同士で決めた主観となるので、必ずこうであるとは限りません！！**

| 指標 | Go | Ruby + Ruby on Rails | Python + Django | PHP + Laravel | C# + .NET Core |
|:-:|:-:|:-:|:-:|:-:|:-:|
| コンパイル  | あり  | なし  | なし  | なし  | あり  |
| 型付け  | 静的  | 動的  | 動的  | 動的  | 動的  |
| 実行速度  | ◎  | △  | △  | △  | 〇  |
| 言語の習熟難度  |  〇 | ◎  |△   | 〇  | 〇  |
| 日本でのナレッジ量  |  〇 | ◎  | △  |  〇 | △  |
| 開発の容易性  | △  | ◎  | 〇  | △  | △  |
|アプリケーションログ   | ×  | 〇  |〇   |〇   |〇   |
| テストフレームワーク  | ◎  |〇   |〇   | 〇  | 〇  |
|CI/CD系   | 〇  |〇   |〇   |〇   |〇?   |
| Docker  |  ◎ | 〇  |〇   |〇   |  △ |
| 言語でのエンジニア数  |  〇 | ◎  | △  | 〇  | ×  |
| 将来性  | ◎  |〇   |〇   | 〇  | 〇  |

ここまでで、大体お察しかと思うが、、
最終的に以下に決定した。

API：Go
理由：設計思想としてシンプル・軽量を謳っているため、今回の要件にマッチしている。

WEB：Ruby + Ruby on Rails
理由：RoRの利点として、WEB開発のスピードが早い(容易)であること。また、日本語の文献が豊富であり、開発・問題の対処に関して安定していること。


# 選定基準（インフラ基盤）
言語及びフレームワークが決まったので、次はインフラ基盤である。
まさかのオンプレという選択肢はないので、おなじみの３サービスが候補。

- AWS
- GCP
- Azure

.NETを選択していないので、Azureは選択肢から外した。
この時点で、未経験の言語を選択している分、基盤もGCPにした場合、さすがにローンチに間に合わないんじゃないかという懸念。またAWSサービスを十二分にまだ使っていないというところから、基盤に関してはAWSを選択した。

使用するサービスに関しては、マネージドサービスを使用する方向性にし、大きくは
アプリケーション実行基盤はECS
データベースはAurora MySQL
CI/CDはCodePipeline

を選択した。

# 開発
実際に開発してみると、予想はしていたものの、やはりわからない事が多く、その度に調査をして解決していった。今思えば、当初の選択理由の１つである知見の多さというところは間違っていなかったと思った。（参考にさせていただいた、先人の皆様本当にありがとうございます！）
そして遂行不能になるような大きなトラブル等もなく、順調に開発が行われた。（今思い返しても、不思議なくらい順調だった。）

# 終わりに
無事ローンチを迎え、その後大小含め、多少のトラブルはあったものの、順調に稼働している。
今回、既存のリソースから大きく逸脱して開発を行ったが、刺激的な部分も多く、つらい部分もあったが、毎日が楽しかったように思う。

上層部への説得・他メンバーの言語習得のコストなど、必ずしもメリットばかりではないと思うが、なかなかできない体験をさせていただいて非常に楽しかった。
Unity + VSCodeで関数ジャンプができなくなった


## はじめに
Unityでスクリプトを書く際のエディターは普段VSCodeを使っています。しかし突然関数ジャンプ(や補完)ができなくなりました。
その時解決した方法をメモします。

## 環境
- macOS Catalina
Version: 10.15.7

- Visual Studio Code
Version: 1.51.0


## 解決方法
結論から言うと、以下の手順で解決。
1. VSCodeにインストール済みの拡張機能`C# Extensions`を開く。
2. `Settings` > `User` > `OmniSharp: Use Global Mono`のタブを`always`にする。

検索バーにmonoって入力してすぐ見つけました。
![スクリーンショット 2020-11-14 0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295435/e3396c7f-9522-6c4c-69a6-8aecbb93f655.png)





## 解決のために他に試したこと
上記でも解決しなければここらへんを試すと良いと思います。

### VSCode Extensionの確認

関数ジャンプのために必要な拡張機能が入っているかなどを確認。

- [C#](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp)
- [C# Extensions](https://marketplace.visualstudio.com/items?itemName=jchannon.csharpextensions)
- [Debugger for Unity](https://marketplace.visualstudio.com/items?itemName=Unity.unity-debug) 

### 最新の、もしくはエラーで怒られている（not found）バージョンの.net SDKを入れる
https://dotnet.microsoft.com/download/visual-studio-sdks

### UnityとVSCodeの紐付けを再設定。
そういえば過去に似たような事例に遭遇してました。
- [UnityでVSCodeを使用中、関数ジャンプや参照ができない！の解決方法](https://qiita.com/tkw0129/items/0bb9a51fda460d0c36b3)

### VSCodeを入れ直す
VSCodeを一度アンインストールしてインストールし直しました。

### VSCodeのバージョンをグレードアップ
[公式サイト](https://code.visualstudio.com/updates/v1_51)からVSCodeのバージョンを上げた。

### VSCodeのバージョンをグレードダウン
[公式サイト](https://code.visualstudio.com/updates/v1_51)からVSCodeのバージョンを下げた。

### Unityの再起動
Unityを立ち上げ直してみる。

### VSCodeの再起動
VSCodeを立ち上げ直してみる。
Unityの`Assets` > `Open C# Projects`から開く。

### PC本体の再起動
本体を立ち上げ直してみる。





## 参考
- [UnityでVSCodeを使うための最低限必要な設定](https://qiita.com/kamanii24/items/399f956f2bf6bec76884)
- [mac VSCodeでF12で関数ジャンプまでの道のり](https://qiita.com/muranet/items/887ca83ceee98c5ffb81)
aws_subnetをlistで作る

# なぜ作った

呼び出し元のmain.tfの可読性を保ちつつ、モジュール側でよしなにサブネット作って欲しかった。

# コード

```hcl:main.tf
module mo_subnet {
  source = "./modules/subnet"

  vpc_id = module.mo_vpc.id

  subnets = [
    {
      name              = "3net"
      cidr_block        = cidrsubnet(var.cidr, 8, 0)
      availability_zone = "ap-northeast-1a"
    },
    {
      name              = "5net"
      cidr_block        = "10.0.5.0/24"
      availability_zone = "ap-northeast-1c"
    }
  ]
}a
```


```hcl:./modules/subnet/main.tf
variable "vpc_id" {
  type = string
}

variable "subnets" {
  type = list
}

resource aws_subnet this {

  count = length(var.subnets)
      vpc_id            = var.vpc_id
      # インスタンスにパブリックIPアドレスを自動的に割り当てるのを防止
      map_public_ip_on_launch = false

      cidr_block        = var.subnets[count.index].cidr_block
      availability_zone = var.subnets[count.index].availability_zone

      tags = {
        Name = var.subnets[count.index].name
      }

}
```


# 参考

-https://www.hashicorp.com/blog/hashicorp-terraform-0-12-preview-for-and-for-each
- https://github.com/terraform-aws-modules/terraform-aws-vpc/blob/v1.0.0/main.tf
[JavaScript] while文やFor文の使い方

今回で三回目の投稿になります。
簡潔に分かりやすくをテーマに書きました。
(なお、この記事はProgateのスライドを簡単にまとめたものです。)

#繰り返し処理

##while文
while文とは「～の間」という意味である。
「条件式がtrueの間{}内の処理を繰り返す」ことができる。

```javascript:while文の書き方 
while (条件式) {
  処理
}
```

(例) 変数numberが100以下のとき、1から100までの数字を出力する。
この場合は以下のようになる。

```javascript:example1
//変数の定義
let number = 1;
//条件式
while (number <= 100) {
  console.tag(number);
//変数の更新
  number += 1;
}
```
1から100までの数字が出力される

```:実行結果
  1
  2
  .
  .
 99
100
```
while文を用いる場合は条件式の部分がいつかfalseにならなければいけない。
更新されないと同じ値を繰り返してしまう(無限ループ)
そのため、変数numberの値の更新を忘れないように書くこと！

##for文
for文は、while文に比べてシンプルに書くことが特徴である。

```javascript:for文の書き方
for (変数の定義;条件式;変数の更新) {
 処理
}
```

```javascript:example2
for (let number = 1;number <= 100;number ++) {
  console.log(number);
}
```
また、for文とif文を組み合わせることもできる。

(例) 変数numberが100以下のとき、1から100までの数字を出力する。
　　ただし、3の倍数のときは「3の倍数です。」と出力する。

```javascript:example3
for (let number = 1;number <= 100;number ++) {
  if (number % 3 === 0) {
     console.log("3の倍数です");
  } else {
     console.log(number);
}
```

```:実行結果
1
2
3の倍数です
.
.
98
3の倍数です
100
```
#参考
**Progate > JavaScriptⅡ > 繰り返し文**
Accessでリボンバーてめえは引っ込んでろ設定をVBAでやるぞい

# リボンバーってどこやねん

ここやねん。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/294e7f9c-6380-4f60-dcc8-1610b58438ea.png)


# なんで非表示に？

ユーザーにとってはほぼほぼ不要だから。
（画面を少しでも広く使える）

逆にリボンバーを表示しておくことで、ユーザーにシステムを改変されてしまう可能性が増える。

そもそもユーザーに勝手に変えられてしまう余地がある時点でAccessってどうなの？
ってとこはあるんだけどね…はは…(´・ω・`)


# やり方
非表示

```vb
DoCmd.ShowToolbar "Ribbon", acToolbarNo
```


表示

```vb
DoCmd.ShowToolbar "Ribbon", acToolbarYes
```


# リボンバー非表示にするとこんな感じ
[ウィンドウを重ねて表示する](https://qiita.com/waokitsune/items/5f4eb303923d6cd5e4f3) と [フォームを開いた時に最大化](https://qiita.com/waokitsune/items/500aaa57234b5064896f) を組み合わせてます。
そこそこシンプルにできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/b9de48bf-b99d-1d36-91db-8e97f39565e3.png)

# 一時的にリボンバーありで起動したい時

Shit押しっぱなしでAccessファイルをダブルクリック。
（Accessが起動しきるまでShit押しっぱなし）

# 蛇足
印刷用のレポートの場合は、リボンバー表示に切り替えた方がユーザーの使い勝手＆構築工数的はいいかなって思います。

いくら非表示にしたところで開発者モードでファイル開かれちゃったらどうしようもないね…(´・ω・`)

『構築の時はリボンバー出したい』ってことあるよね。
リボンバー出す為にいちいちファイル閉じて開発者モード開くの面倒って時あるよね。
そういう時はリリースノート的なフォーム or レポート用意しておいて、そこにリボンバー表示のVBAコード仕込んでおくのもアリかなと。（バックドア的なオブジェクト）

# バージョン
Windows 10 Pro 21H2 OSビルド 19045.2251
Microsoft Access for Microsoft 365 MSO (バージョン 2209 ビルド 16.0.15726.20068) 32 ビット
【Rails】updateアクション実行時にパスワードなどのバリデーションを通過させる方法

ユーザーのプロフィール情報を更新して保存するといった処理を実装するとき、ユーザーが変更したい情報のみを入力して、そのほかのフォームのバリエーションチェック（特にパスワード）はスキップさせたい！といった場面ってあるかと思います。今回はそのやり方を紹介します。

#実装方法
バリデーションオプションにある、``:onオプション``を使います。例えば``on: :create``とすることによってレコードの新規作成時のみバリデーションチェックを行うことができます。
私の場合、利用規約と個人情報のチェック(acceptedカラム)にもバリデーションチェックを行っていたため、updateアクション時にもこのバリデーションチェックが発動してしまい、ユーザー情報の変更ができないという状態になってしまっていました。``:onオプション``でユーザーの新規登録時のみバリデーションチェックを行うようにすることで、これを回避することができます。

```ruby:user.rb
validates :password, presence: true, length: { minimum: 6 }, on: :create
validates :accepted, acceptance: { message: 'をチェックしてください' }, on: :create
```

このようにアクションを指定することができます。
他にも``:onオプション``ではカスタムコンテキストも定義できるそうです！
詳しくは[Railsガイドのこちらの項目](https://railsguides.jp/active_record_validations.html#on)をご覧ください。

また、パスワードの場合は ``allow_nil: true`` としてしてやっても同じことができます。
これは、値がnilの場合はバリデーションを行わないオプションです。
え？これ指定したら空のパスワード保存されちゃわない？？と思いますが、has_secure_passwordで（だいだいgem 'bcrypt'を使っていますよね）オブジェクトが作られるタイミングで存在性の検証が行われるようになっているので、空のパスワードがDBに保存されることはありません。
ですので、うまいことupdateアクション実行時のみバリデーションをスキップさせることができます。

今回のは個人開発でまだ規模は小さいですが、規模が大きいサービスでは何気ないバリデーションの変更はアプリに大きな影響を与えそうだなと感じましたね。。
**バリデーションはグローバルに定義するのではなく、なるべく条件を限定して影響する範囲を少なくする**よう心掛けたいです！

# 最後まで読んでいただきありがとうございます！
日々学んだことをアウトプットしてます！何かご指摘などありましたらコメント頂けますと幸いです。
深層学習 Day 2 - Section 5 最新のCNN のまとめ

この記事は個人的なお勉強用のメモです。

# このお勉強の位置

深層学習 Day 2

Section 1 勾配消失問題
Section 2 学習率最適化手法
Section 3 過学習
Section 4 畳み込みニューラルネットワークの概念
**Section 5 最新のCNN**　←　これ

# 講義

## AlexNet

### AlexNetとは

- 2012年に開かれた画像認識コンペティションで登場。
- 2位に大差をつけて優勝。
- ディープラーニングが注目を集めるきっかけに。

### AlexNetのモデル

- 3層の畳み込み層
- 2層のプーリング層
- 3層の全結合層（ドロップアウトあり）

# 実装演習

なし。

# 確認テスト

なし。


# 修了テスト～練習問題～

### 問題60（GoogLeNet）

Inceptionモジュールとは

- 1つの入力画像に対して、複数の畳み込み層を並列に適用。
- 各畳み込み層の結果を連結。
- この一連の作業をInceptionモジュールとしてまとめる。 

### 問題61（GoogLeNet）

1×1畳み込みというのは、画像のサイズは変えずにチャンネル数を変える方法。
そうであれば、図1のサイズは2x2のまま変わらないはずだが、
正解の解説では結果を足し合わせることで2x2が1x1になっている。
引き続き勉強。

### 問題62（GoogLeNet）

Global Average Poolingとは

- 各チャンネルの平均値を計算してまとめる。
- 重みのパラメータを減らすことができる。

### 問題63（GoogLeNet）

- ResNetはInception-ResNetで採用
- Batch NormalizationはInception-v3で採用
- 畳み込みフィルターの大きさ変更はInception-v2で採用
【Docker】Dockerコンテナ内のログを確認する方法

phpでエラーを出力する。

```php
error_log()
```

ログを確認する。

```
Docker logs -f コンテナID

# -f(follow)で出力し続ける。
```

アクセスログのみ表示したい時

```
Docker logs コンテナID -f 2>/dev/null

# /dev/null で　表示を消去。　2 はエラー出力
```

エラーログのみ表示したい時

```
Docker logs コンテナID -f 1>/dev/null

# /dev/null で　表示を消去。　1 は標準出力
```

docker-composeで

```
docker-compose logs

#アクセスログとエラーログ を切り分けることができない。
```

※Dockerは仕組み上、標準出力とエラーログ でしか分けることしかできない。アプリケーションごとに(apache,phpなど)でログを分けることができない。
htmlのaタグのtarget="_blank"だけだと良くない理由を調べてみた

# 目的

- HTMLのaタグでrel=noopenerだけを使用するのは良くない理由を自分なりに調べてまとめてみた

# そもそも`<a href="" target="_blank"></a>`って？

- aタグで`target="_blank"`を指定するとリンク先をブラウザの別タブで開く事ができる。
- `target="_blank"`だけだとセキュリティ面出の脆弱性とパフォーマンスに悪影響が有るらしい。

# 脆弱性

- リンク先のページにwindow.openerというJavaScriptのオブジェクトが存在していたときに`<a href="" target="_blank"></a>`が書いてあるリンク元ウインドウの情報が取得されてしまう。またリンク先タブからリンク元タブを制御する事もできてしまう。
- リンク元タブがリンク先タブによってフィッシングサイトにすり替えられたりしてしまう。

# パフォーマンスの低下

- 難しい言葉で説明すると一つのスレッドに両方のタブの処理が入るので処理が重くなる可能性がある。
- 簡単に説明すると本来一つのタブ表示に使用している作業スペースでリンク元とリンク先２つのタブの処理を実行しているようなイメージ。リンク先のページに重い処理が合ったときリンク元のページも重くなる。
    - スレッドについてわかりやすかったページ[https://wa3.i-3-i.info/word12453.html](https://wa3.i-3-i.info/word12453.html)

# 解決策

- aタグに`rel=”noopener”`を追加して`<a href="" target="_blank" rel=”noopener”></a>`とする。
- `rel=”noopener”`を追加することでリンク元タブとリンク先タブを別スレッドで処理してくれる。
- 別スレッドで処理することでJavaScriptのwindow.openerでリンク元の情報を取得できなくなる。
- 別スレッドで処理することでリンク先ページに影響されること無くリンク元ページの処理を行うことができる。
- セキュリティ面で更に強固にしたいならaタグに`rel=”noopener noreferrer”`と記載する。
- `rel=”noreferrer”`はリンク先にリンク元のリンクを渡さないようにする。非通知電話をかけているようなイメージらしい。

# 結論

- aタグでリンク先を新しいタブで開かせたいときは`<a href="" target="_blank" rel=”noopener noreferrer”></a>`と記載しよう
VSCode Live Shareの使い方

##まず初めに
テレワークに向けてリモートでのペア・プログラミング、コード・レビューを調べる機会があったので調べた内容、使い方などを書いていきます！
##Live Shareってなんだ？
使っているVSCodeに対応しているプログラミング言語ならなんでもリアルタイムで他の人と共有、編集、デバッグできるツールのこと！

##準備するもの
- vscodeのダウンロードリンク
https://code.visualstudio.com/download

- どちらかのアカウントが必ず必要です。
Microsoftアカウント
GitHubアカウント
※初回の共有時にはサインインを求められます

##LiveShareのダウンロード
VSCodeのインストールが完了したら
1.左の欄の上から５つの目（拡張機能）をクリックorCtrl+Shift+Xで開く。
2.左上の検索欄から**Live Share**と検索
3.検索したら画像のようにでてくるので一番上をインストール。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/712841/edde2a67-d84b-bc6e-07c6-8c98bd415a79.png)


##手順(共有する側)
1.ダウンロードが完了したらまずはファイルから共有したいフォルダを開いておこう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/712841/3d7c9869-1e79-daf0-16bd-c1c9709d0775.png)
2.読み取り/書き込みor読み取り専用
![LiveShare2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/712841/bd58d869-47d3-9cc8-faa0-905f599b7190.png)
※ 現状　読み取り/書き込みが相手からは読み取り専用で、読み取り専用が読み取り/書き込みになっていたので注意
※ 下記の画像はMake Read-only or Make red/writeクリックしてもいいですし、×を押して閉じてもOK
※ 上記の画像からの起動だとここはあまり意味ないですが、左下のLiveSharaをクリックして起動した場合は×ではなくMake Read-only or Make red/writeをクリックして起動してあげましょう。

![LiveShare3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/712841/588a2627-841f-28fd-d163-183330ddb518.png)![LiveShare4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/712841/d1ab994e-a49e-b9ee-e61c-917f73222361.png)
3.押した後に下記の画像がでてくるので左上の←をついているところをクリックします。
(コラボレーションリンクコピー（←マークのやつ）のとなりのコラボレーションセッションの停止（禁止マーク）でいつでも共有を止めることができます。)
そうするとURLをコピーされ連絡ツールで教えてあげましょう。
一度でもセッションに参加すると連絡先に追加されるのでそこで[この連絡先とのチャット]でURLを張ってあげても相手に知らせることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/712841/f453576b-db28-db78-1cf3-e9d3ee1eb5d4.png)

##手順(参加する側)
1.参加をクリックします。
![LiveShare2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/712841/bd58d869-47d3-9cc8-faa0-905f599b7190.png)
2.相手から受け取ったURLをペースト。ブラウザから接続することも可能。
そうすることで自動的に相手との共有が開始されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/712841/513f8e11-875c-c270-a2b6-93ae5fe446c6.png)


##機能説明

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/712841/f453576b-db28-db78-1cf3-e9d3ee1eb5d4.png)
- Participants
相手が現在共有されているフォルダー内で何を表示しているのかが出てきます。
クリックすることで飛ぶことが可能です。
- Shared Servers
サーバーの共有
- Shared Terminals
VScodeのターミナルを共有
- チェットチャンネル
お互いに書き込むことが可能