OmniAICreator/Qiita-1.07M huggingface dataset:
PC(Web)版YoutubeのShortsをデフォルトのプレイヤーで再生しただけ

初投稿です。拙い文章ですが、よろしくお願いします。

追記:本日(2023/01/11)確認したところ使用できなくなっていました

# 前置き・きっかけとか
みなさんは「Youtube」をご存知でしょうか。
世界最大の動画共有プラットフォームであり、Googleによって運営されています。
近年では、動画の広告収入などで生計を立てる「Youtuber」も誕生するほどです。

まあ茶番はここまでにして本題です。
昨年の2021年、Youtubeに「Shorts機能(ベータ版)」が追加されました。
このShorts機能は、1分未満の縦長(9:16)の動画を連続して視聴できるもので、スマホアプリでは画面を下から上にスワイプすることで次の動画が再生されます。
このスタイルは、若年層に人気の「Tiktok」と同じであり、テンポの良さから長時間見続けるユーザーもいるそうです。

そんなShorts機能ですが、今年に入ってから？PC(Web版)からアクセスしても利用できるようになりました。構造はスマホとほぼ同じで、マウスのスクロールや矢印キーを使うことで次々動画を再生できます。

ですが、このShorts機能ではシークバー(下の操作するバー)が表示されないため、「今どうなった？？」のようなときに**5秒戻るといった操作ができなかったり**、**コメント欄の表示が若干小さく使いづらかったり**...
何より
### 見続けてしまうのです！！！！ (自業自得)

そこで、デフォルトのプレイヤーで見れたらいいなーと感じた次第です。(ここまで長文ごめんなさい)

# どうする
URL見たら一発でした。

```:ShortsのURL
https://www.youtube.com/shorts/xxxxxxxxxxx
```

xxxxxxxxが動画のidみたいな感じなんでしょうね。
ここででデフォルトのプレイヤーのページのURLを見ると

```:デフォルトプレイヤーのURL
https://www.youtube.com/watch?=yyyyyyyyyyy
```

こうです。
もうお分かりでしょう。

```:こうする
https://www.youtube.com/watch?=xxxxxxxxxxx
```
「?=」の後にShortsの方のidを持ってくるだけですね。

# おしまい
本編より前置きが長くなっちゃいました申し訳ないです。
面倒でなかったら試してみてください

機会があればchrome拡張でも作ってみたいかも

ではさようならー
ExcelのLET関数でズンドコキヨシ

ふと自分の記事を見返して「ズンドコキヨシ」が懐かしくなったので、先駆者がおそらく居ないことを確認した「ExcelのLET関数 & RANDARRAY関数版」でワンライナー（？）実装しました。
ノンプログラマでも遊べるズンドコキヨシです。

# 先駆者など
## ズンドコキヨシまとめ
https://qiita.com/shunsugai@github/items/971a15461de29563bf90

## Excel関数：MATCH関数、複数セル

https://qiita.com/jinoji/items/4b69c8e7ac2fafabd693

## 前回やったズンドコキヨシ(C#/LINQ)

https://qiita.com/urahito_solution/items/4432a08c72e05bcbd414

# LET関数 & RANDARRAY関数版「ズンドコキヨシ」
解説は2つめの「解説用」に記載しました。（--は関数へのコメントには出来ませんがご容赦下さい）
必要に応じて、条件付き書式「文字列「キ・ヨ・シ」を含む」も付けて下さい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114324/6f66b91c-b817-cd7c-72d3-94aff9462854.png)

## LET関数とは
https://qiita.com/a_eau_/items/0a59a70946dd40672ddc

https://forest.watch.impress.co.jp/docs/news/1290369.html


LET関数は、2020年11月に一般公開された関数です。
- 引数1に「変数名」、
- 引数2に「計算式」、
- 引数3以降の奇数番目に「変数名」、
- 引数4以降の偶数番目に「計算式」
- 最後の奇数番目に「計算式」を入れると、

最後の計算式がセルに出力されます。

これにより、今まで入れ子にしていた計算を1セルで完結させることができ、処理の軽減に繋げられます。

## RANDARRAY関数とは

http://officetanaka.net/excel/function/function/randarray.htm

RANDARRAY関数([行],[列],[最小],[最大],[整数])は、
- 指定した「行」「列」の範囲に、
- 「最小」から「最大」までの数値を表示します。
- 「整数」をTRUEにすると整数で出力されます

# 本編
解説は2つめの「解説用」に記載しました。（--は関数へのコメントには出来ませんがご容赦下さい）
必要に応じて、条件付き書式「文字列「キ・ヨ・シ」を含む」を設定して下さい。


``` Ex:数式
=LET(A,RANDARRAY(20,,0,1,TRUE),B,IF(A=0,"ズン","ドコ"),C,CONCAT(B),D,IFERROR(FIND("ズンズンズンズンズンドコ",C),C),IF(ISNUMBER(D),CONCAT(LEFT(C,D+11),"キ・ヨ・シ！"),D))
```

``` Ex:解説用
=LET(
--20個(引数1は任意の数字)の乱数列を呼び出す
A,RANDARRAY(20,,0,1,TRUE), 
--Aの1個ずつを判定して「ズン」「ドコ」に変換
B,IF(A=0,"ズン","ドコ"), 
--Bの結果を繋げる
C,CONCAT(B), 
--FINDが成功なら数字、エラーならそのまま
D,IFERROR(FIND("ズンズンズンズンズンドコ",C),C), 
--Dが数字ならキ・ヨ・シを繋げる
IF(ISNUMBER(D),CONCAT(LEFT(C,D+11),"キ・ヨ・シ！"),D)) 
```

# 応用編
## 青いベンチ／サスケ

A2セルは任意のセル、またはLET関数内の変数に置き換えて下さい。
ズンドコしてますが「青いベンチ／サスケ」として機能します。
今気付きました。後でちゃんと書きます

```Ex:青いベンチ／サスケ（ズンドコを抑えている方）
=LET(A,RANDARRAY(LEN(A2),,1,LEN(A2),TRUE),A_1,SORTBY(SEQUENCE(LEN(A2),,1,1),A),B,MID(A2,A_1,1),C,CONCAT(B),D,IFERROR(FIND("ズンズンズンズンズンドコ",C),C),IF(ISNUMBER(D),CONCAT(LEFT(C,D+11),"キ・ヨ・シ！"),D))
```

こちらは最初の変数Sに任意の文字列を設定する正式版です。

```Ex:青いベンチ／サスケ（正式版）
=LET(S,"青いベンチ／サスケ",S_LEN,LEN(S),A,RANDARRAY(S_LEN,,1,S_LEN,TRUE),B,SORTBY(SEQUENCE(S_LEN,,1,1),A),C,MID(S,B,1),CONCAT(C))
```
［Python / SQL］CSVファイルを読み込んだあと、SQLで確認する

# やりたいこと

- CSVファイルをデータフレームで読み込んだ後、SQLで出力する

#  サンプルデータ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520368/492adf58-f62b-b6a0-1bc3-9e27bf768aaf.png)


# Step １
- CSVファイルを読み込む
```
%pyspark
import pandas as pd
# Hadoppにあるファイルを読み込む
df_csv = pd.read_csv('test.csv', sep=',' )
# python から sparkにに変換したものをテーブルにいれる
# create みたいなの使ってた
print(df_csv)

# pandas dataframe を spark dataframeに変換
df=spark.createDataFrame(df_csv)

# sqlで使えるように一時テーブルとして登録
df.createOrReplaceTempView('test_1')


```
# Step 2
- SQLで確認
```%sql
select *
from test_1
limit 10
```
[React-toastify] リンクボタンを埋め込んだ通知(トースト)を作る。

今回はReact-toastifyを使っていきます。

[react-toastify]([https://fkhadra.github.io/react-toastify/introduction](https://fkhadra.github.io/react-toastify/introduction))

多機能かつかなり使いやすいライブラリです。
ドキュメントもわかりやすく、デモできるのもありがたいですね。

それでは、実装していきましょう。

## とりあえずReact-tostifyを動かす。

```
$ yarn add react-toastify
```

```tsx:ルートコンポーネント
import 'react-toastify/dist/ReactToastify.css';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} id="modalId" />
      <ToastContainer />
    </>
  );
}
```

ChildComponent.tsx

```tsx:ChildComponent.tsx
import { toast } from 'react-toastify';

const ChildComponent = () => {
  const notify = () => toast('トーストだよ。')

	return (
    <button onClick={notify}>ボタン</button>
  )
}

export default ChildComponent 
```

とりあえずこんな感じで動きます。

この書き方の場合、どのコンポーネントからでもトーストを呼び出せる利点はあります。一方、ページ遷移をした際にもトーストが残るので、その挙動が嫌な場合は調整が必要になります。ページ遷移に合わせてtoast.dismiss()をしてあげるとトーストが残らなくなります。

## toastに文字列ではなく、コンポーネントを渡してリンクさせる。

上記の例では、toastの引数に文字列を渡しましたが、コンポーネントを渡すこともできます。

なので、渡したコンポーネント内でリンクを書いてあげればOKです。

```tsx
import { toast } from 'react-toastify';

const ChildComponent = () => {
  const notify = () => toast(LinkComponent)

	return (
    <button onClick={notify}>ボタン</button>
  )
}

export default ChildComponent

const LinkComponent = () => {
	<a href="/">リンク</a>
}

```

簡単ですね。
UbuntuでQEMU6.2をビルドして使ってみる

AppArmor周りでハマったのでメモ

## 必要なパッケージのインストール
```shell
sudo apt-get install -y git libglib2.0-dev libfdt-dev libpixman-1-dev zlib1g-dev
sudo apt-get install -y git-email
sudo apt-get install -y libaio-dev libbluetooth-dev libbrlapi-dev libbz2-dev
sudo apt-get install -y libcap-dev libcap-ng-dev libcurl4-gnutls-dev libgtk-3-dev
sudo apt-get install -y libibverbs-dev libjpeg8-dev libncurses5-dev libnuma-dev
sudo apt-get install -y librbd-dev librdmacm-dev
sudo apt-get install -y libsasl2-dev libsdl1.2-dev libseccomp-dev libsnappy-dev libssh2-1-dev
sudo apt-get install -y libvde-dev libvdeplug-dev libvte-2.90-dev libxen-dev liblzo2-dev
sudo apt-get install -y valgrind xfslibs-dev 
sudo apt-get install -y libnfs-dev libiscsi-dev
```

## リポジトリを落とす
```shell
git clone git://git.qemu-project.org/qemu.git
git checkout  v6.2.0
git submodule update --init --recursive
```

## ビルド用のディレクトリ作成
```shell
cd qemu
mkdir -p user/Build
cd user/Build
```

## ビルド
```shell
../../configure --target-list=x86_64-softmmu # x86_64-softmmuのCPUのみをビルドする
make -j 16
```

## AppAmorへ設定追加
Ubuntuのセキュリティ機能が邪魔をするので、先にバイナリを登録しておきます。
``` /etc/apparmor.d/usr.sbin.libvirtd
 以下の2行を追加
 /home/user/Workspace/qemu/user/Build/* PUx,
 /home/user/Workspace/qemu/user/Build/pc-bios/** PUxr,
```

``` /etc/apparmor.d/abstractions/libvirt-qemu
 以下の1行を追加
 /home/user/Workspace/qemu/rarudo/Build/* rmix,
```
```shell
 sudo systemctl reload apparmor.service
```

## 起動したいVishのxmlをいじる
```shell
virsh edit vmの名前
```

```xml

<!-- VM起動を妨げるAppArmorを使わない -->
<domain>
 <seclabel type='none' model='apparmor'/>
...

<!-- ビルドしたqemuのパス指定 -->
<emulator>/home/user/Workspace/qemu/user/Build/qemu-system-x86_64</emulator> 

```

## トラブルシューティング
### virsh edit時に`cannot execute binary`
AppArmorの設定に不備がある

### virsh start時にPermission Denied
` <seclabel type='none' model='apparmor'/>`を設定すると実行できる


## 参考
https://wiki.qemu.org/Hosts/Linux

https://qiita.com/SIGABRT/items/37d2170922a3397b7ebc
docker + rubyでスクレイピングをできる環境のメンテナンスをする

https://github.com/itayayuichiro/ruby-scraping-docker

昔上記で公開しているようなdockerで簡単にスクレイピングのコードが動かせるものを作ったのだが、古い or M1　macのせいで動いていなかったのでちゃんと動くように修正をする。

```sh
docker-compose build
```

表示されたエラー
```
 => ERROR [3/4] RUN apk add --update             udev             ttf-freefont             chromium             openssl             chromium-chromedriver             gfortran             gcc         0.2s
------
 > [3/4] RUN apk add --update             udev             ttf-freefont             chromium             openssl             chromium-chromedriver             gfortran             gcc             g++:
#6 0.218   chromium (missing):
#6 0.218 ERROR: unsatisfiable constraints:
#6 0.223     required by: world[chromium]
#6 0.223   chromium-chromedriver (missing):
#6 0.223     required by: world[chromium-chromedriver]
------
executor failed running [/bin/sh -c apk add --update             udev             ttf-freefont             chromium             openssl             chromium-chromedriver             gfortran             gcc             g++]: exit code: 2
ERROR: Service 'play' failed to build : Build failed
```

記述してあったDockerfile

```Dockerfile
FROM alpine:3.7

RUN apk update && \
    apk upgrade && \
    apk add --no-cache \
    bash \
    curl-dev \
    ruby-dev \
    build-base \
    git \
    ruby \
    ruby-irb \
    ruby-io-console \
    ruby-rdoc \
    ruby-bundler \
    mariadb-dev

RUN apk add --update \
            udev \
            ttf-freefont \
            chromium \
            openssl \
            chromium-chromedriver \
            gfortran \
            gcc \
            g++

WORKDIR /root/src

CMD ["top"]
```


どうやら、
```Dockerfile
RUN apk add --update \
            udev \
            ttf-freefont \
            chromium \ <- ここ
            openssl \
            chromium-chromedriver \
            gfortran \
            gcc \
            g++

```

この部分でapk addしようとしてるchromiumが無いとのこと...
調べてみたけどいまいちピン来るのはなく、imageファイルのバージョンが古かったので
```Dockerfile
FROM alpine:3.7
```

の部分を

```Dockerfile
FROM alpine:3.14
```
に更新してみたところ

```sh
docker-compose build
```
コマンドが通るようになった。

ただ、起動しようとするとまだバグが出ていたので別途対応予定
置き換え可能性の高いコンポーネントライブラリを使う場合は、レイアウトにTailwind CSSを使うと良さそう。

レイアウトをTailwind CSS中心にして、コンポーネントライブラリに依存させないようにすると、後々置き換えやすくなりそうだし、楽なケースがありそうだよという記事です。

なお、スタイリングとレイアウトを以下のように定義します。

- スタイリング: ボタンやチェックボックス、アイコンなどのUI要素。
- レイアウト: ページの中でのレイアウト。margin、padding、flex...など。その他、modalなども。

## 将来的に置き換えしやすいように作る。

新規開発を行う際に、独立したプロダクトであれば色々選ぶことができますが、様々な事情でそうもできない場合があります。例えば、私の場合、メインプロダクトのUIと揃えるためにsemantic-ui-reactを使うことになりました。ただ、中長期的にみると置き換え可能性もそれなりにありそうです。

メインプロダクトの開発メンバーもちょっと不満を持っていますし、私も、オプションが少ない点が気になっています。

例えばチェックボックスです。
[https://react.semantic-ui.com/modules/checkbox/#types-checkbox](https://react.semantic-ui.com/modules/checkbox/#types-checkbox)

`<Checkbox toggle />` と書くことで、トグルにできます。これはいいのですが、サイズをオプションで変えられないっぽいです...transformで小さくすることもできると思いますが、ちょっとトリッキーな感じがするので、自作しよっかなと思ってます。その他にも、いいサービスにしたくて色々凝ったことしようとすると、自作やオーバーライドするものがそれなりに出てきそうです。

そうすると、結局自作中心とするか、他のコンポーネントライブラリを使うかということになりそうです。移行の可能性がそれなりに高いので、semantic-ui-reactに依存しすぎないようにスタイリングだけ参考にして、レイアウトではTailwind CSSで作るという方針で進めることにしました。

semantic-ui-reactにもレイアウトができるコンポーネントがあります。

例えば、Gridです。

[https://react.semantic-ui.com/collections/grid/](https://react.semantic-ui.com/collections/grid/)

ただ、ここでGridを使ってしまうと、やっぱり他のコンポーネントライブラリを使いたいとか、すべて自作したいとなったときに、全面的にレイアウトをやり直す必要が出てきてしまいます。やってみたら以外とすぐかもしれないですが、追加開発もあるなかでその判断をチームがしやすいかというと、ちょっと難しい気がします。

一方、レイアウトをコンポーネントライブラリに依存しないようにすると、例えば、CheckBoxをコンポーネントライブラリを使わずに自作にするとか、影響範囲を限定しながら進めていくことができます。

Tailwind CSSが好きではない人の中で、クラス名が長くなることを指摘する人もいると思います。ただ、複雑なスタイリングであれば長くなりますが、レイアウトだけであればたいして長くなりません。

CardくらいであればTailwind CSSで簡単に作れるので、こちらもTailwind CSSで作って、その中の各要素をコンポーネントライブラリを使うのがいいと思っています。その他、modalはreact-modal使うとかもいいかもしれません。まあ、modalを作り直すくらいであれば工数たいしてかからなさそうなので、この点、コンポーネントライブラリにあったら使うのもありかもしれません。

## ビルドサイズは気にしておこう。

スタイリングとレイアウトを分離する場合、それぞれのビルドサイズも気にしておきましょう。UIライブラリは何を選ぶか次第ですが、余分なものをとってこない書き方がそれぞれあると思います。

Tailwind CSSは、この記事がかなり参考になりそうです。Purgeオプションを使ってあげるとかなり小さくなりそうですね。

[https://zenn.dev/ryo_kawamata/articles/purage-tailwind](https://zenn.dev/ryo_kawamata/articles/purage-tailwind)
Windows11でcapsキーを使ってUS配列の日本語/英語切り替えをしよう

# はじめに
US配列キーボードを使っている人あるあるの日本語/英語切り替え問題。
win+spaceでやる方も多いかと思いますが、個人的には指1本で事足りるcapsキーを押していきたいです。
最近PCを買い替え、設定をするときに手こずったので備忘録として残しておきます。

下記のステップで進めます。
1. Windows設定からキーボードレイアウトをUSに
1. Google IMEの設定
1. keyswapの設定

# 1. Windows設定からキーボードレイアウトをUSに
Windowsさんに「自分が使うキーボードはUS配列だよ」と教えるための設定です。
1. 「Windowsキー + I」で設定を開く
1. 時刻と言語 > 日付と時刻 を選択
![windows1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2529362/7949b28a-14e1-d857-b121-6705d77adebd.png)


1. 言語 > 日本語の「・・・」から「言語のオプション」を選択
![windows2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2529362/bd166555-db08-09a8-97dc-7a10109bb294.png)

1. キーボードから「レイアウトを変更する」を選択し、コンボボックスから「英語キーボード(101/102キー)」を選択
![windows3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2529362/0b88623f-3145-eb1f-2ba9-60b0808c2305.png)

1. (再起動してOKなら)「今すぐ再起動する」を選択して反映

# 2. Google IMEの設定
インストールしていない場合は、インストール推奨。
他のIMEでも似たような設定ができればOKです。

https://www.google.co.jp/ime/

Google IME (または類するもの) を入れたら下記手順です。
1. IMEを右クリックして「プロパティ」を選択
![ime1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2529362/ff40e28a-899a-660b-b1a6-6ea5f3765c5e.png)
1. キー設定を「ことえり」にして編集ボタンを選択
![ime2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2529362/10d56313-9309-a218-b756-d32098ea17d0.png)

1. Hankaku/Zenkakuとなっている部分をクリックしてF12に変更
![ime3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2529362/a092f303-5d5c-61df-2ae6-9680e488c656.png)
![ime4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2529362/5676f6de-bc42-f8fd-2936-9934832d971d.png)

1. 上記を「変換前入力中」「変換中」「直接入力」「入力文字なし」にもそれぞれ適用 (Hankaku/ZenkakuをすべてF12に変更)

# 3. keyswapの設定
keyswapとはキーボードのキーを仮想的に入れ替えてくれる便利なやつです。

https://www.vector.co.jp/soft/winnt/util/se228667.html

※インストールは自己責任でお願いします！

1. keyswapのインストール
1. キーボード種別「英語」の状態でcapsキーにF12を割り当て
![keyswap1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2529362/c9c5112a-ef43-4eec-58e0-aed173737017.png)


※右Altの設定は個人的な設定なので関係ないです

**以上で完了！！**

# 自分の使っているキーボード紹介
私は分割キーボードを使っています。
Mistel社のBAROCCO MD770 RGB BTです。
分割できて、光って、Bluetooth接続もできます。
光らないバージョン、Bluetooth接続できないバージョンなどもあります。
よかったら皆様も是非。

https://archisite.co.jp/products/mistel/barocco-md770-rgb-bt/
Macのターミナルでssh接続

普段サーバをいじる時は、Windowsに入れてるTera Termでssh接続をしている。しかしMacで行う場合があり、Tera TermをインストールしようとしたらMac版のTera Termがなかったため、標準のAppであるターミナルを使用してssh接続したのでメモを残しておく。

# 方法

* Macのターミナルで
　`メニューバー` &rarr; `シェル` &rarr; `新規リモート接続` 
の順に選択すると以下のウィンドウが表示される。
![スクリーンショット 2022-03-31 20.27.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1831062/b39c66c4-f560-5e98-6017-34c2db001d21.png)

* 「サービス」 &rarr; `セキュアシェル(ssh)`を選択。
* 「サーバ」 &rarr; `+`(上記画像の赤丸)をクリックすると以下のように接続先のIPアドレスの入力が促されるので、入力する。

![スクリーンショット 2022-03-31 20.33.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1831062/610699c8-6acc-e53b-4da2-c9c0e9b46d9d.png)

* `OK`を押すと、「サーバ」に入力したIPアドレスが表示されるのでクリックして選択する。
* 下の 「ユーザ:」にssh接続でログインするユーザを入力。
* 入力すると下の欄に`ssh ユーザ名@IPアドレス`と自動入力されるので、確認できたら`接続`をクリックする。
* 操作がターミナルに移り、先ほど入力したログインするユーザのパスワードの入力が促されるので、入力してエンターを押す。
&rarr; 無事ssh接続が完了。
ecs / standard_init_linux.go:228: exec user process caused: exec format error

<p>頻繁に起こしてしまうエラーなので、自分を戒めるために記します。</p>
<h1>エラー内容</h1>
<p>php-apache コンテナを ecs で立ち上げようとした際、エラーが発生しコンテナがストップした。</p>
<p>以下エラーログ</p>

```
standard_init_linux.go:228: exec user process caused: exec format error
```

<h1>解決方法</h1>
docker-compose.yml でプラットフォームを指定する。

```docker-compose.yml
services:
  web:
    container_name: web
    build: 
      context: .
      dockerfile: ./docker/php/Dockerfile
      args:
        MYSQL_PASSWORD: $MYSQL_PASSWORD
        MYSQL_ROOT_PASSWORD: $MYSQL_ROOT_PASSWORD
    ports:
      - 80:80
    volumes:
      - ./src:/var/www
    platform: linux/amd64  　　　　　　　　　　　　　　　　　　　　　　　　　　　　///追加
```

自分が M1　Mac を使用していることを忘れがちなので気をつけたいです。
WordPressで他のページのコンテンツを挿入する

WordPressサイト構築のさい、他のページのコンテンツを挿入したくなることがあります。
テンプレートに記述する場合はこんな感じ。
```php
$post = get_page_by_path('slug');
$content = $post->post_content;
echo $content;
```
Advanced Custom Fieldsのデータを挿入したいとき。
```php
$post = get_page_by_path('slug');
$content = get_field('field_name', $post->ID);
echo $content;
```
テンプレートではなくエディタで記述する場合はショートコード化。
```php:functions.php
function function_name()
{
	$post = get_page_by_path('slug');
	$content = $post->post_content;
	return $content;
}
add_shortcode('shortcode_name', 'function_name');
```
Advanced Custom Fieldsのデータをショートコードで挿入することもできます。
ヱヴァンゲリヲン新劇場版:序のシンジのセリフをテキスト感情分析して心情の変化を可視化する

　エヴァンゲリオンシリーズを文字起こししているサイトを見つけたので、そこからヱヴァンゲリヲン新劇場版:序のシンジのセリフを抜き出して、それを感情分析にかけてシンジの心情の変化を可視化してみようと思います。

　使用したサイトは以下になります。

https://36ch.com/evangelion/eva_shin/eva_shin1/

　まずは、ここからシンジのセリフのみを抜き出します。結構、手間がかかるので、興味のない作品だったら結構シンドイと思います。

　抜き出したものはeva_shinji.txtに保存します。ネタバレや著作権等もあるので、抜き出した内容についてはここでは触れません。

### 感情分析について

　感情分析にはいろいろなライブラリやサービスがありますが、今回は手軽に使えて否定句も判定してくれるpythonのライブラリosetiを使ってみようと思います。

　osetiのについては作者が書いた以下の記事を参考にしてみて下さい。

https://qiita.com/yukinoi/items/46aa016d83bb0e64f598

　ちなみに私も感情極性辞書を使って感情分析処理を作った記事を過去に投稿しています。

https://qiita.com/miso_taku/items/c8e48401346eca23bae8


### ソースコード

　それではソースコードです。

```python
import matplotlib.pyplot as plt
import oseti
import re

def remove_sign(text):
    # 一回のセリフ毎に計測したいので『。！？…』は『、』に変換しておく
    text = re.sub(r'[。！？…]', '、', text) 
    return text

def sentiment_analyze(filepath):

    input_data = []

    analyzer = oseti.Analyzer()

    with open(filepath, 'r', encoding='utf-8') as f:
        input_data = f.read()

    input_data = input_data.splitlines()
    input_data = [''.join(input.split()) for input in input_data]

    pos_list = []
    neg_list = []
    score_list = []

    for line in input_data:
        line = remove_sign(line)
        dic = analyzer.analyze_detail(line)[0]
        pos_list.extend(dic['positive'])
        neg_list.extend(dic['negative'])
        score_list.append(dic['score'])

    print("positive word")
    print(pos_list)
    print("negative word")
    print(neg_list)
    # print(score_list)

    x = list(range(len(score_list)))
    y = score_list
    fig, ax = plt.subplots()
    plt.xlabel('line')
    plt.ylabel('sentiment score')
    ax.plot(x, y)

sentiment_analyze('eva_shinji.txt')

```

### 実行結果

```
positive word
['大事', '嫌-NEGATION', '出来る', '訳 無い', '出来る', '大丈夫', 'いい', '悪い-NEGATION', 
'目標', '目標', '目標', '目標', '勝つ', 'いい', 'いい', 'ため', 'いい', 'いい', 'いい', 
'忘れる-NEGATION', '平気', 'かなう', '負ける-NEGATION', 'いい', 'しょうが ない-NEGATION', 
'嫌-NEGATION', 'いい', '安全', '死ぬ-NEGATION', '価値', '絆', '大事', '大丈夫', 'いい']
negative word
['無理', 'しょうが ない', '無理', '嫌', 'ダメ', 'ダメ', 'ダメ', 'ダメ', 'ダメ', '邪魔', 
'慣れる-NEGATION', '嫌', 'うつ', '嫌う', '駄目', '駄目', '駄目', '良い-NEGATION', 
'自由-NEGATION', '無理', '怪我', '怪我', '暴走', '危ない', '嫌', 'うまい-NEGATION', 
'失敗', '嫌う', '死ぬ', '嫌', 'ため-NEGATION', '出来る-NEGATION', 'つらい', '敵', 
'ピンチ', 'うまい-NEGATION', '自信-NEGATION', '悲しい']
```

![qiita_20220331_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350321/9e7f1ef1-096f-7396-be0d-2db712617490.png)


　y軸はプラスがポジティブ、マイナスがネガティブです。osetiの特徴として短い文章だと、-1, 0, 1がscoreとして返ってくる事が多いです。
　(※私の手動によるセリフ抜き出しが誤っていて、同じようにやっても結果はこの通りにならないかもしれません。)

### 考察

　考察はネタバレを含むので折りたたんでます。

<details><summary>　見たければ左の三角マークをクリック</summary>

　
　序盤は基本的にシンジが周りに対して当たり障りのないニュートラルなセリフが多い。その中でも父である碇ゲンドウとのファーストコンタクトシーン(line 20あたり)は大きく心情が揺れ動く。
　中盤から後半にかけては、シンジも少しずつ感情を出すようになるが、鈴原トウジとの接触(line 60あたり)以降、ややネガティブな発言が多くなる。
　終盤の綾波レイとの会話(line 120あたり)でようやくポジティブな発言が続けて出てくる。

　まあ、なんとなく作品を見たイメージに近いかな。

　ちなみにセリフは「はい」系のものが多く20回あった。


</details>

　
　
　
　

### 結論

　**映像作品ならセリフをテキスト感情分析するよりも、作品をちゃんと見たほうがキャラの心情の変化はよく分かる。**


　破、Q、シン・エヴァンゲリオンならもっとシンジの心情の変化が見れそうだけど、面倒くさいので多分やりません。興味があったらやってみて下さい。
消せなくなったCloudFormationのスタックを消す

CloudFormationの削除が失敗そうとしたら、以下のようなエラーが出てスタックが消そうにも消せないという現象がおきた

エラー
```
Role arn:aws:iam::xxxxxxxx:role/service-role/hogehogeCloudFormation is invalid or cannot be assumed 
```

これの解決策を備忘録的に記載する

### 原因

私の場合は、エラーに記載されているrole `arn:aws:iam::xxxxxxxx:role/service-role/hogehogeCloudFormation`が先に削除されてしまっていたためにCFnのroleが見つからず削除ができないというのが原因だった

### 解決策

ロールを作って必要なポリシーを付与することでスタックを削除できるようになる

また同じことが起きる気がするのでスクリプト化した。

shell で以下のコマンドを実行することでロールを復活させることができる。

```

# エラーに記載されているロールの名前を変数に入れる(上記の例の場合"hogehogeCloudFormation"と入力する)
ROLE_NAME=[エラーメッセージに書かれてるロールの名前]

# roleを作る
aws iam create-role --path /service-role/ --role-name $ROLE_NAME  --assume-role-policy-document file://<(cat <<EOF
{
    "Version": "2012-10-17",
    "Statement": {
        "Effect": "Allow",
        "Principal": { "Service": "cloudformation.amazonaws.com" },
        "Action": "sts:AssumeRole"
    }
}
EOF
)

# 必要なporicyをアタッチする。この場合はアドミン権限をつけているので注意
aws iam attach-role-policy --role-name $ROLE_NAME --policy-arn arn:aws:iam::aws:policy/AdministratorAccess
```

### 備考

ちょうど以下の記事で同じことをやっているが私の場合、roleのpathが合わず、
`arn:aws:iam::xxxxxxxx:role/hogehogeCloudFormation`のようなroleが作られてしまうということがあった。
状況に合わせてコマンドの`--path`の設定も書き換える必要がありそう

https://dev.classmethod.jp/articles/cfn-delete-invalid-or-cannot-be-assumed/
ChakraUI Buttonコンポーネントのレスポンシブ対応

## ChakraUIのButtonコンポーネントについて
Buttonコンポーネントの`size`propsはオブジェクトの値を入れられず、単一のstring（`"lg" | "md" | "sm" | "xs"`）しか入れることができません。

https://chakra-ui.com/docs/form/button

レスポンシブ対応をするときには現在のブレークポイントを返すchakraUIのhook `useBreakpointValue`を使うことで実現できます。

https://chakra-ui.com/docs/hooks/use-breakpoint-value

## レスポンシブ対応を含めたコンポーネントを作成します
```button.tsx
import React, { forwardRef } from 'react'
import {
  Button as ChakraButton,
  ButtonProps as ChakraButtonProps,
  useBreakpointValue
} from '@chakra-ui/react'

export type ButtonProps = {
  children: string | React.ReactNode
  // この型指定は恐らくあまりうまくないです  
  sizes?: string | { base: string; md: string } | { base: string; xl: string }
}

export const Button = forwardRef<
  HTMLButtonElement,
  ButtonProps & ChakraButtonProps
>(({ children, sizes, ...props }, ref) => {
  // useBreakpointValueにはオブジェクトか配列を渡せるので、sizesがstringの場合はstring[]にする
  const adjustment = typeof sizes === 'object' ? sizes : [sizes]
  // 'md'はデフォルトブレークポイント
  const buttonSize = useBreakpointValue(adjustment, 'md')

  return (
    <ChakraButton size={buttonSize} ref={ref} {...props}>
      {children}
    </ChakraButton>
  )
})
```
## 使うとき
```hoge.tsx
import { Button } from '@/components/button'
export const Hoge = () => {
  return (
    <Button sizes={{ base: 'lg', md: 'xl' }}>
    ボタン
    </Button>
)}
```
## 注意点
 `createBreakpoints`で独自のブレークポイントを設定しているとき単位を`px`にすると`useBreakpointValue`の挙動がおかしくなることがあるので、`createBreakpoints`を使う際は気にする必要があります。

https://github.com/chakra-ui/chakra-ui/issues/3042

ChakraUIのデフォルトのブレークポイントは`em`で指定されているので不都合がなければそれを使うか、独自に指定する場合もemで指定してあげると良さそうです。

https://chakra-ui.com/docs/styled-system/features/responsive-styles
Twitterカードについて

## Twitterカードとは
Twitterカードとは、ツイートに貼られたリンクURLの画像やページタイトルが表示される機能です。
Twitterカードの設定有無で比較すると、設定ありのほうがリンクが目立ち、クリックされやすくなります。

## Twitterカードの種類
* サマリーカード
* 大型画像付きサマリーカード
* アプリカード
* プレイヤーカード

※Webサイトのリンクで関係があるのは`サマリーカード`と`大型画像付きサマリーカード`

## 種類ごとの説明
### サマリーカード

ページのアイキャッチ画像、ページタイトル、説明文を表示させることができる。

:::note info
ページタイトルをメインに見せたいときに設定すると良い。
:::

### 大型画像付きサマリーカード
大型・横長のアイキャッチ画像、ページタイトル、説明文を表示できる。
サマリーカードに比べて画像が大きく表示される。

:::note info
記事ページなど、アイキャッチ画像を工夫しているときに設定すると良い。
:::

### アプリカード
アプリのダウンロードページへのリンクを表示する Twitter カードが表示されます。

### プレイヤーカード
動画を配信しているサイト向けの Twitter カードです。
ツイートに表示されたカード上で動画のダイジェストなどを再生することができます。

## Twitterカードを設定するときのmetaタグ
~~~html
<meta name="twitter:card" content="カードの種類">
~~~
カードの種類には、summary（カードの種類がSummary Cardの場合）またはsummary_large_image（カードの種類がSummary Card with Large Imageの場合）を指定します。

~~~html
<meta name="twitter:site" content="Twitterのユーザー名">
~~~

Twitterのユーザー名にはTwitterカードを設定するページが含まれるウェブサイトで使用しているTwitterのユーザー名（＠xxxxxxの形式）を指定します。

~~~html
<meta name="teeter:title" content="記事のタイトル">
~~~

記事のタイトルにはTwitterカードを設定するページの記事のタイトルを指定します。

~~~html
<meta name="twitter:description" content="記事の概要">
~~~
記事の概要にはTwitterカードを設定するページの記事の概要を指定します。
文字数に制限はありませんが、定められた文字数以上の値は省略されます。

~~~html
<meta name="twitter:image" content="カードに表示する画像のURL">
~~~

カードの表示する画像のURLにはTwitterカードに表示される画像が設置されているURLを指定します。

## OGPの設定がある場合
Twitterカードの設定に必要なmetaタグはFacebookなどのSNSでシェアされたときの設定に使用されるOGPの設定と一部内容が重複しています。
twitter:cardおよびtwitter:siteの項目はTwitter固有のもなので引き続き記述が必要です。
twitter:titleとtwitter:descriptionとtwitter:imageについてはOGP
の方で設定されていればmetaタグの記述は不要です。

~~~html
<meta name="twitter:card" content="カードの種類">
<meta name="twitter:site" content="Twitterのユーザー名">
<meta property="og:title" content="記事のタイトル">
<meta property="og:description" content="記事の概要">
<meta property="og:image" content="カードに表示する画像のURL">
<meta property="og:url" content="記事のURL">
~~~

:::note warn
OGPの場合はog:urlも設定する必要がある
:::

## Twitterカードの設定を確認する
正しく記述できているかチェックする公式サイトはこちら↓
[Card validator](https://cards-dev.twitter.com/validator)

## 参考サイト

https://www.howtonote.jp/twitter/helpful/index5.html#section2

https://unique1.co.jp/column/sns_operation/3033/
RCE ってなに？

## 勉強前イメージ

英語だけじゃ毎回そうだけどイメージつかないよね、結局わからん

## 調査

### RCE とは

Remote Code Execution の略で、脆弱性の一種。
日本語ではリモートコード実行と言われています。
リモートでプログラムが実行できることを指します。

なぜリモートでプログラムが実行されることが脆弱性の一種なのかというと
そのプログラムの中身次第で自由にセキュリティホールを作ることができるからです。
例えばプログラムに「adminユーザを作って、パスワードは○○○○○。sshのポートも開けておく。」というのが記載されて実行されると
そのサーバにadminユーザでsshできてしまうことになり、情報漏洩や踏み台サーバとされることに繋がります。

セキュリティの中の深刻度としては深刻なレベルとして捉えられています。

## 勉強後イメージ

セキュリティなんだ・・・
バグとかほっておいてもなるし...一回sshとか開けられたら終わりだね。

## 参考

- [RCE 【リモートコード実行】 Remote Code Execution](https://e-words.jp/w/RCE.html)
- [RCE（Remote Code Execution) をざっと調べる](https://shinkufencer.hateblo.jp/entry/2019/05/04/000000)
[Mac]Flutterのバージョンを変更する

# 背景
いつしかのバージョンから`Flutter --verison`コマンドが使えなくなり、特定のバージョンに変える記事が見つかりづらかったので、
内容はめちゃくちゃ簡単ですが、記事を残しておきます。

fvmやその他バージョン管理のライブラリを使えば簡単にできますが、サクッとglobalのバージョンを切り替えたい方へ

# ターミナルからのやり方
### 1 . terminalでFlutterのSDKがあるディレクトリまで進む
flutter公式のsetup手順でやっていればSDKは以下にあるはず
```.zsh
$ cd development/flutter
```

### 2. 下記のリリース一覧から変更したいバージョンを探す。
(下記はMacのリリースなのでWindowsの場合はWindowsのリリースを確認してください。)

https://docs.flutter.dev/development/tools/sdk/releases?tab=macos

### 3. git checkoutでバージョンを切り替える

```.zsh
$ git checkout 切り替えたいバージョン # ex. git checkout 2.5.2
```
### 4. flutter doctorする

```.zsh
$ flutter doctor
```

 M1のMacを使ってる方は`flutter　doctor`で`rosetta error`が出る方は再起動すれば治ります！

# ディレクトリをいじるやり方
### 1.リリースからSDKをダウンロードする

https://docs.flutter.dev/development/tools/sdk/releases?tab=macos

### 2. flutterのSDKをダウンロードしたものに置き換える

terminalに慣れてない人はこっちの方が簡単

---------------------------------------

以上Flutterのバージョン切り替えの方法でした！
flutter --versionコマンドなくなったの辛いので、fvmとかちゃんと使います。。
初めてのUWP

初めての投稿です。
日本在住の中国人エンジニアです。
今からよろしくお願いします。

最近UWP関する内容を触りたいので、いろいろ見ました。
本記事は本や公式ドキュメントを参考して作成しました。
## 何がUWP
Microsoftの公式ドキュメントにより
>UWP は、Windows 用クライアント アプリケーションを作成するさまざまな方法の 1 つです。 UWP アプリは、WinRT API を使用して、インターネットに接続されたデバイスに適した、強力な UI と高度な非同期機能を提供します。

しかも、最近UWP廃止の声もどんどん上がているが、実際はどのものが今回試してみたいです。
## 初めてのUWPアプリケーション
RailsのMongoidのモデルをCSVに出力する


以下のコードの変数modelsに出力したいモデルを設定して保存します。
rails runnerで第1引数に出力先ディレクトリを設定して実行してください。

```ruby
# CSVに出力したいモデルを指定してください
models = [Model1, Model2, Model3]

# スクリプト実行時、第1引数に出力先ディレクトリを指定してください
dir = ARGV[0]

models.each do |model|
  file = "#{model.to_s.pluralize.underscore}.csv"

  CSV.open(File.join(dir, file), "wb") do |csv|
    fields = model.fields.map {|f| f[0]}.sort
    csv << fields

    model.each do |row|
      values = fields.map {|f| row[f]}
      csv << values
    end
  end
end
```

# 環境
動作確認に使用した環境は以下の通りです。

|App|バージョン|
|--|--|
|Ruby |2.6.6|
|Rails | 6.1.4|
|Mongoid | 7.3.3|
マルチレポのプロジェクトをモノレポにしてみた

# TL;DR
- マルチレポ（5リポジトリ）のプロジェクトをモノレポにしました
- `Git subtree` を使って移行します


# モノレポ（Monorepo）とは
ざっくり言うと、複数のシステムを一つのリポジトリで管理する手法です。
モノレポジトリと呼ばれることもあります。

細かいことは[詳しいページ](https://monorepo.tools)やGoogle先生で調べてみてください。

# マルチレポの頃の構成
`hoge1` と `hoge2` という2システムから構成されており、それぞれにバックエンド（BE）とフロントエンド（FE）があります。
また、共通のDBを利用します。

- hoge1システム
    - hoge1-be
    - hoge1-fe
    - database
- hoge2システム
    - hoge2-be
    - hoge2-fe
    - database

実際のリポジトリは以下のようになります。
各 `X-be` から `database` をサブモジュール化しています。
- hoge1-be
- hoge1-fe
- hoge2-be
- hoge2-fe
- database（Git submodule）

開発時は、database以外のリポジトリをそれぞれdocker compose upしていました。


## しんどい点
- 5回 `git clone` しないといけない
- 一つの機能に対する変更なのにリポジトリをまたいだ変更だとPRが分かれる
- DBがGit submoduleになっているので `git clone --recursive` しないといけない
- DBの変更が入ると、hoge1-beとhoge2-beそれぞれでマイグレーションを実行しないといけない
- docker-compose.ymlが各リポジトリにあるので開発時に叩いて回らないといけない
    - ~~docker関連のGit submodule作れば解決？~~


# モノレポ移行手順

## 統合先リポジトリを作る
```
mkdir monorepo
cd monorepo
git init
```

initコミットを作る（コンフリクトせずにresetしやすい）。
```
git checkout --orphan main
git commit --allow-empty -m 'init'
```

## 統合先リポジトリに各リポジトリを取り込む ×5

取り込むリポジトリ `hoge1-be` を追加します。
```
git remote add hoge1-be <hoge1-beのローカルのフォルダ>
```

またはリモートから取得します。
```
git remote add hoge1-be git@github.com:account/hoge1-be.git
```

mainブランチを取り込みます。
コマンド実行後、hoge1-beフォルダが生成され、その配下にhoge1-be/mainが展開されます。
コミットログが受け継がれている状態になります。
```
git subtree add --prefix=hoge1-be hoge1-be/main
git log --graph
```

submoduleを使用している場合は以下を実行しておかないとGitHub上でサブモジュールの表示が残り続けることがありました。
```
git rm hoge1-be/.gitmodules
git rm hoge1-be/<submoduleのフォルダ>
git commit -m 'submodule削除'
```

リモートリポジトリの設定を削除します。
```
git remote remove hoge1-be
```

```
git push origin main
```

ここまでの処理を取り込みたいリポジトリ全てに対して行います。


## 最終的なフォルダ構成
```
.
├── .git
├── database
├── docker
├── hoge1-be
├── hoge1-fe
├── hoge2-be
└── hoge2-fe
```

datbaseフォルダはdocker composeのvolumesで `hoge1-be` と `hoge2-be` の所定の位置にマウントし共有します。

dockerフォルダは各フォルダに散らばっていたdocker-compose.ymlをまとめています。
docker-compose.ymlのカスタマイズが容易になり、Git管理も楽になりました。


# まとめ
以上、簡単ですがマルチレポからモノレポに移行する手順について説明しました。

開発中のマルチレポを移行する場合は、mainをモノレポに取り込んだらマルチレポのmainは触らないでその他のブランチを適宜モノレポに取り込むようにするなどのルール作りがあると良いです。

マルチレポに課題があるようにモノレポにも課題があります。
モノレポでの課題やその対応などは別の記事に書きたいと思います。


# 参考
- 依存しあう複数の Git リポジトリを git subtree で monorepo 化する
    - https://tech.synchro-food.co.jp/entry/2018/03/30/115514
Stripe CLIのlistenコマンドとgetコマンドで、Stripeの組み込みとデバッグを効率化する方法


Stripeを利用したアプリケーションの開発は、仕様上Webhookを利用したイベント駆動なアーキテクチャになりがちです。

その場合、「さっき失敗したイベントをもう一度同じ内容で発火させたい」「あのイベントの中身って、何が入っていたっけ？」など、いろいろと詳細を調べたいケースが発生します。

今回は、新機能のテストやデモコードを書く際によく利用するStripe CLIコマンドを２つ紹介します。

## [参考] Stripe CLIのインストール方法


Macの場合、`brew install stripe/stripe-cli/stripe`でのインストールがもっとも簡単です。

Dockerを利用する方法や、Windowsでのインストール方法などは以下のドキュメントを参考にしてください。

https://stripe.com/docs/stripe-cli

## `listen`コマンドで、Stripeで発火したイベントをモニタリングする

イベント駆動なシステムを作る場合、「どのイベントを、いつListenすべきか」をまず調べる必要があります。

その場合に利用できるのが、`stripe listen`コマンドです。

このコマンドを実行すると、停止するまでStripeアカウントで発火したイベント名とイベントのIDを出力し続けます。

下の例では、支払いリンクのURLにアクセスし、クレジットカードでの注文を完了するまでに発火したイベントが表示されています。

```bash
$ stripe listen
⣟ Getting ready... > Ready!
You are using Stripe API Version [2020-08-27]. Your webhook signing secret is whsec_xxxxx (^C to quit)

2022-03-31 17:38:03   --> payment_intent.created [evt_3KjJW2KlXtpaTqYx0LNki677]
2022-03-31 17:38:27   --> customer.created [evt_1KjJWRKlXtpaTqYxix4fqW8C]
2022-03-31 17:38:27   --> payment_intent.succeeded [evt_3KjJW2KlXtpaTqYx0lR8txZi]
2022-03-31 17:38:27   --> charge.succeeded [evt_3KjJW2KlXtpaTqYx07tnwN3t]
2022-03-31 17:38:28   --> checkout.session.completed [evt_1KjJWSKlXtpaTqYxAluU7oeU]
```

どの順番で、どのイベントが発火するかを把握することで、実装したい処理を発火するイベントを何にすべきかを考えやすくなります。

## `get`コマンドでイベントやデータの中身を確認する

`listen`でイベント名とタイミングは把握できました。

しかしどんなデータが送られてくるかがわからないと、実装の詳細が検討できません。

`stripe get`コマンドは、リソースのIDを渡すと、対応したリソースの詳細を返してくれるとても汎用性の高いコマンドです。

`listen`で表示されているイベントID(`evt_xxx`)を渡すと、以下のように**そのイベントでAPIに送られるデータ**が確認できます。

```bash
$ stripe get evt_3KjJW2KlXtpaTqYx0LNki677
{
  "id": "evt_3KjJW2KlXtpaTqYx0LNki677",
  "object": "event",
  "api_version": "2020-08-27",
  "created": 1648715882,
  "data": {
    "object": {
      "id": "pi_3KjJW2KlXtpaTqYx0d9x09Jv",
      "object": "payment_intent",
...
  },
  "type": "payment_intent.created"
}

```

### `stripe get <id>`はほとんどのリソースで利用可能

この`get`コマンドの便利なところは、「IDのprefixを元に呼び出すAPIを勝手に判断してくれること」です。

そのため、イベントの中身に含まれるIDの詳細も、`stripe get`コマンドを実行すれば取得できます。

```bash
% stripe get pi_3KjJW2KlXtpaTqYx0d9x09Jv

{
  "id": "pi_3KjJW2KlXtpaTqYx0d9x09Jv",
  "object": "payment_intent",
  "amount": 1000,
  "amount_capturable": 0,
  "amount_received": 1000,
  "application": null,
  "application_fee_amount": null,
  "automatic_payment_methods": null,
  "canceled_at": null,
  "cancellation_reason": null,
...
}
```

## Stripe CLIを使いこなして、開発をより効率的に進めよう

今回は２つのコマンドにフォーカスして紹介しました。

このほかにも便利なコマンドが用意されています。

ドキュメント内にある「Stripe CLIのデモ」などを利用して、いろんなコマンドをお試しください。

![スクリーンショット 2022-03-31 19.10.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/d564402b-48c4-c924-4be9-b727bb516ffd.png)
https://stripe.com/docs/stripe-cli



# [PR] Stripe開発者向け情報をQiitaにて配信中！

- [Stripe Updates]：開発者向けStripeアップデート紹介・解説
- ユースケース別のStripe製品や実装サンプルの紹介
- Stripeと外部サービス・OSSとの連携方法やTipsの紹介
- 初心者向けのチュートリアル(予定)

など、Stripeを利用してオンラインビジネスを始める方法について週に２〜３本ペースで更新中です。

-> [Stripe Organizationsをフォローして最新情報をQiitaで受け取る](https://qiita.com/organizations/stripe)
転移学習

今更ですが、、、

## 転移学習とは（Transfer learning)
ある領域（ドメイン)で学習したモデルを、別の領域(ドメイン)に適合させる技術を転移学習という。
これにより、普通に学習させるよりも少ないデータ量で学習させることができる。

### 具体例
2014年のILSVRCで優勝した学習済みモデルVGG16を例にして説明します。
このモデルは、ImageNetのデータセットから、コンテストのお題で出された1000クラスを識別できるようになっています。分類は大まかに区分されたり、詳細に区分されたりとまちまちです。[このサイト](http://starpentagon.net/analytics/ilsvrc2012_class_image/)でどんな分類があるかみれます。
例えば、猫の種類分類を行うシステムを作ろうと思ったとき、この学習済みモデルそのままではきちんと分類することはできません。そこで、用いるのが転移学習です。この学習済みモデルにひと手間加えることにより、猫の種類分類をすることができるようになります。さらに、一から作るよりずっと少ないデータ量で分類ができるようになります。

### アプローチ

![image.png](https://qiita-image-store.s3.amazonaws.com/0/303209/2269bedd-be0a-0a22-1869-b05809ca99e0.png)
[CS231n: Convolutional Neural Networks for Visual Recognition Lecture 7より](http://cs231n.stanford.edu/syllabus.html)

上図では、学習済みモデルの最後２層を追加学習させ、新たな猫の種類を分類させます。
追加学習させないレイヤーをフリーズさせると言います。このフリーズさせる範囲を変更することで、精度が多少変わったり、学習時間が変わったりします。

また、抽出した特徴ベクトルをSVMを用いて分類することもできます。

## ファインチューニング(Fine tuning)
転移学習を勉強しているとよく、ファインチューニングという言葉をよく目にします。
ファインチューニングとは、学習済みモデルの一部、或いはすべての重みを微調節する手法です。
転移学習では、特徴抽出器は変えずに最後の層だけを再度学習しましたが、ファインチューニングでは、学習済みモデルの重みを初期値として、再度学習させ微調節します。

＊転移学習では、入力層から中間層の最後の層までを特徴抽出器と言います。

## いつどのようにファインチューニングするか
[スタンフォード大学の講義資料](http://cs231n.github.io/transfer-learning/)に、技法の選び方のノウハウが記載されているので図にまとめます。
![image1.png](https://qiita-image-store.s3.amazonaws.com/0/303209/c3e146ef-3eb9-d3c8-017b-6ac3c5b6babd.png)
# Meraki からのアラートをwebhookで通知したい！

# Meraki からのアラートをwebhookで通知したい！
家に Cisco Meraki や ThousandEyes のエージェントを設置しているのですが、アラートが上がった場合はダッシュボードに見に行かないとダメなのが不便なので、webhook で通知設定してみました。
まずは Cisco Meraki から Cisco Webex へ簡単に通知できるようにします。

# Webhook とは
IT用語辞典の [Webhook 【Webフック】](https://e-words.jp/w/Webhook.html)の項目では、以下のように記載されています。
> Webhookとは、Webアプリケーションに対して、特定のイベントが発生したら別のWebアプリケーションに通知を発行するよう利用者が指定する仕組み。HTTPのPOSTリクエストを利用する。

つまり、**何かしらのイベントが発生した場合に別のアプリケーションへ通知をしてくれる仕組み**のことです。
内容はHTTP POSTリクエストで通知されるので、通知先のアプリケーションはあまり考えなくてよさそうです。

# Incoming Webhooks の追加
Webex の App Hub から、 Incoming Webhooks を追加します。
これは、Meraki からアラートが発生した場合に Webex にメッセージを投稿するための宛先 URL を作成します。

https://apphub.webex.com/applications/incoming-webhooks-cisco-systems-38054-23307

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1953283/eb668858-55fe-f54b-b9a4-ee4d078a06cf.png)

**Add Bot+** にて追加後、画面下部に *Webhook name* と *Select a space* を設定する画面が表示されます。
ここでは、受信した HTTP リクエストを発信する bot の作成と投稿するスペースを指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1953283/aaacdbd2-fdb3-4fc1-f184-6341ba8ff5c0.png)

　*Webhook name* ： bot 名の登録（なんでもOK）
　*Select a space* ： 投稿するスペースの指定（作成済のグループをプルダウンから選択）

**Add** を押下すると、画面下部に webhook の受信 URL が発行されます。
この URL をコピーし、Meraki側へ登録します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1953283/7286c08a-cac0-9f18-0f1b-f39f37104dea.png)

また、webex 側では指定したスペースに新しい bot が追加されます。

# Meraki へ Webhook の宛先を登録
Meraki のダッシュボードへログインし、`ネットワーク全体` ＞ `設定` ＞ `アラート` を選択します。
画面下部に Webhook の送付先（HTTPサーバ）を登録するフォームがあるので、先ほど発行した URL を登録します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1953283/98f935f8-78b6-e98a-7f60-80af6cc1fe61.png)
　*名前* ： HTTP サーバ名（ Meraki 上での登録名のため、なんでもOK）
　*URL* ： Incoming Webhooks で発行した URL を登録
　*ペイロードテンプレート* ： アラートとして出力されるテンプレートを Meraki / Webex / Slack / Microsoft Teams から選択

各項目を埋めたら、`テストWebhookを送信` で送信テストをしてみましょう。
Webhook テストの項目が **deliverd** の表示に変われば、送信完了です。
ただし、ペイロードテンプレートに利用したいアプリケーション名がない場合は、[IFTTT](https://ifttt.com/explore) や [Zapier](https://zapier.com/) を用いてデータを抽出する必要があります。
テンプレートを Webex とした場合、アラートがマークダウン方式で出力され、下記のように表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1953283/98aa107e-bac8-e76a-1503-55a429d69d6c.png)

上記のように Webhook での通知が確認できれば完了です。

# アラート設定
最後に、Meraki 上でアラートの設定をする必要があります。
画面上部にスクロールし、「アラート設定」欄に先ほど登録した Webhook 名を登録します。
「webhook:」と入力すると、Webhook 項目に登録した名前が表示されるので、通知したい名前を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1953283/79b09546-31e3-c1e3-f6ee-8f1897177c3d.png)
あとは、通知が欲しいタイミングを選択し、画面最下部の `保存` を押下すれば完了です。

# さいごに
Webhook って馴染みがないので難しいイメージがあったのですが、すごく簡単に登録することができました。
ペイロードテンプレートがあればほぼ頭使わなくて大丈夫そうです。
ペイロードテンプレートなし（Meraki 選択）前提で試行錯誤してたので、後日その内容もまとめたいと思います。

# 参考サイト
- [Webhook 【Webフック】 - IT用語辞典 e-Words](https://e-words.jp/w/Webhook.html)
- [Webhookとは？ - Qiita](https://qiita.com/soarflat/items/ed970f6dc59b2ab76169)
- [Webhookって何？を子どもでもわかるように描いてみた - kintone hive online](https://kintone-blog.cybozu.co.jp/developer/000283.html)
- [Webhook API - Cisco DevNet](https://developer.cisco.com/meraki/webhooks/#!introduction/overview)
ComposeViewとAbstractComposeViewの使い分け

ここ最近採用されることが多くなってきたJetpackCompose(以下Composeと呼びます。)ですが、xmlで作成していたり、Javaで記述されているような既存UIを一括で移行していくことは難しい場面が多いです。

そこで、[GoogleDevelopersの記事](https://developer.android.com/jetpack/compose/interop/compose-in-existing-ui?hl=ja)でも紹介しているような、部分的にCompose移行していく方法が挙がってくるかと思います。

方法としてはComposeViewを使う方法と、AbstractComposeViewを使う方法と2パターンあります。
いざコーディングしてみると、両者ともやっていることは「Composeを既存UIに当て込むための橋渡し」であり、使い分けの判断がよくわかりませんでした。

色々記事を読んだり、色々実装を試してみた上で、「こういうことかな？」という使い分けの判断を持つことができたので、メモ書きしておきます。



# 結論(個人的見解)
### AbstractComposeViewを使う場面
##### Javaで記述されているFragmentやActivityが親クラスのとき
javaだとsetContent()ができないので、xmlにAndroidViewとして当て込めるAbstractComposeViewの出番です。

##### 既存コード内にComposeのコードを混ぜたくないとき
個人的な主観ですが、既存のコードにComposeのコードが混ざると結構読みにくかったりします。
Composeという概念を既存コードからは抽象化しておくと可読性だけでなく、追加したComposeを諸事情で消すことになったとき、混ざったコードを引き剥がす苦労がなくなります。
「試しにこのレイアウトを入れて様子を見たい」というオーダーにAbstractComposeViewは不向きということですね。（入れ替え場所が元々Composeであれば、ComposeViewのほうが良いと思います。）

### ComposeViewを使う場面
##### どこまでComposeに移行できているかを把握したいとき
xmlの中身が徐々にComposeViewに置き換わっていくので、地味にわかりやすいです。
全部ComposeViewになったらxml削除の合図！

##### State管理等が不要なComposeを手早く実装したいとき
ComposeViewのほうが実装速度は早いと思うので、State管理などが不要で既存コードにそこまで影響が出ないものであれば、ComposeViewでサクッと実装してしまうほうが楽でした。


# 参考文献
https://developer.android.com/jetpack/compose/interop/compose-in-existing-ui?hl=ja

https://proandroiddev.com/jetpack-compose-interop-part-2-using-compose-in-traditional-android-views-and-layouts-with-a3c50fc2eaa5

https://compose.academy/blog/migrating_to_compose_-_composeview
アプリ利用中にバックグラウンド再生中の音楽が小さくならないようにする

バックグラウンドで音楽をかけながらiOSアプリを利用中、勝手に音楽が小さくなる現象に遭遇したことはないでしょうか？

# バックグラウンドの音楽が小さくなる原因について
音楽が小さくなる原因は、AVAudioSessionの設定にあります。
AVAudioSessioの設定によって、もし起動中のアプリが音を流した場合、バックグラウンドの音楽が小さくなるようになっています。
自分で音を流すような処理を書いていない場合でも、利用しているSDKによっては音に関する処理を行なっていて、その影響で音が小さくなっていることが考えられます。

AVAudioSessionにはCategoryというものがあり、この内容によって再生中の音楽の再生について決定します。
以下にCategoryに関するAppleのリンクがあります。

https://developer.apple.com/library/archive/documentation/Audio/Conceptual/AudioSessionProgrammingGuide/AudioSessionCategoriesandModes/AudioSessionCategoriesandModes.html#//apple_ref/doc/uid/TP40007875-CH10-SW2

|Category|サイレントスイッチで音量オフになるか|バックグラウンドの音楽を止めるか|
|---|---|---|
|ambient|Yes| No |
|soloAmbient(デフォルト)|Yes| Yes |
|playback|Yes| Yes |
|record|Yes| Yes |
|playAndRecord|Yes| Yes |
|multiRoute|Yes| Yes |

バックグラウンドの音楽と自分のアプリの音楽をmixして流すのは`ambient`なので、Categoryをambientにしつつ、バックグラウンドの音楽が小さくならないよう、`CategoryOptions`を設定します。

## 対応

### CategoryOptionsを追加して音声をコントロールする

バックグラウンド再生中の音楽が小さくなっている原因は、何らかの原因で`CategoryOptions`が`duckOthers`になっているが原因と思われます。そこで、AVAudioSessionのOptionを`mixWithOthers`にすることでバックグラウンドの音楽の音が小さくならないようになります。

CategoryのambientはデフォルトでmixWithOthersが付与されるので、省略しても問題ありません。

https://developer.apple.com/documentation/avfaudio/avaudiosession/categoryoptions/1616611-mixwithothers

```swift
        try! AVAudioSession.sharedInstance().setCategory(.ambient)
```

### SDKのドキュメントの確認

自分で音声に関する実装をしていない場合、使っているSDKに原因がある場合があります。
SDKのドキュメントを確認して、SDKごとの対応が必要になる場合もあります。
【継承の操作①】クラスの継承

## はじめに
オラクル認定資格教科書 Javaプログラマ Silver SE８
第一章　Javaの基本　
第二章　Javaのデータ型の操作
第三章　演算子と判定構造の使用
第四章　配列の作成と使用
第五章　ループ構造の使用
第六章　メソッドとカプセル化の操作
第七章　継承の操作←　ｲﾏｺｺ！！
第八章　例外の処理
第九章　Java APIの主要なクラスの操作

## クラスの継承
　継承は、あるクラスを機能拡張した新しいクラスを定義することです。
　拡張元になるクラスのことを基底クラスやスーパークラス、拡張したクラスのことを派生クラスやサブクラスという。

```java
class サブクラス名 extends スーパークラス名 {}
```
### 注意点
　1つのサブクラスが継承できるのは1つのスーパークラスのみ。（多重継承不可）
　final修飾子が付いたスーパークラスの継承はできない。
　以下の２点については、クラスを継承しても、引き継げない。
　・スーパークラス内のコンストラクタ
　・スーパークラス内のprivate修飾子の付いた変数やメソッド

### 親クラスのメソッドの呼び出し
　子クラスのインスタンスで、親と子で同名のメソッドを呼び出した場合、子クラスにあるオーバーライドされたメソッドが優先して呼ばれる。
　親クラスの同名メソッドを呼び出す場合は、`super.メソッド名()`のようにsuperを使用する。

### 継承とコンストラクタ
　　親クラスを継承している子クラスのインスタンスを生成した場合、親クラスのコンストラクタから呼び出さなければならない。
　　引数のないコンストラクタであれば、自動で`super();`が追加され、呼び出されるが、引数がある場合は、明示しなければならない。
```java
// 親クラス
public class Parent {
  public Parent {
    System.out.println("親クラスのコンストラクタです");
  }
}

// 子クラス
public class Child {
  public Child {
    System.out.println("子クラスのコンストラクタです");
  }
}

// メインクラス
public class Main {
  public static void main (String[] args) {
    Child c = new Child();
  }
}

// 結果　：　親クラスのコンストラクタです　　子クラスのコンストラクタです
```
## 抽象クラス
　抽象クラスは抽象メソッドを持つクラスのこと。（具象クラスも一緒に持てる）
　抽象メソッドがある場合、必ず抽象クラスにする必要があり、**abstract**を使用して宣言する。
```java
public abstract class クラス名 {
}
```
　**抽象クラスはインスタンス化できない**
　抽象クラスを継承した場合、抽象クラスに含まれる抽象メソッドを必ず実装（オーバーライド）しなければならない。
### 抽象メソッド
　現時点で内容が確定できない(処理を持たない)メソッドとして、宣言するのが抽象メソッドである。
　抽象メソッドは**abstract**を使用して宣言する。
```java
public abstract 戻り値 メソッド名(引数);
// 中カッコ「{}」を付けない
```
　抽象メソッドを継承先で実装する場合、シグネチャ（引数とそのデータ型の組）は抽象クラスで宣言されたものに合致している必要あり、戻り値型は同じかそのサブクラスである必要がある。。

### 抽象クラスに抽象クラスを継承
　抽象クラスを具象クラスで継承した場合、すべての抽象メソッドを実装（オーバーライド）しなければならないが、継承先も抽象クラスとした場合、そのルールは適応されない。
　継承先も抽象クラスとする場合は、親抽象クラスの抽象メソッドを実装したり、新しく抽象メソッドを追加することが可能（機能の拡張）となる。
Amazon Lightsailで構築したWordpressにReally Simple SSLプラグインを入れる

# はじめに

プラグイン入れたら問題が発生。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533960/68c4cab9-4d6f-1dc1-4de1-ccd560b7c648.png)

# Lightsailのシェルにログインする

AWSコンソールからLightsailの管理画面へ。
赤枠のシェルのボタンを押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533960/fe6e6459-c0e2-02d7-2550-a3d5c2f2be0c.png)

# トラブル対応手順

```
# wp-config.phpのあるディレクトリに移動
cd /opt/bitnami/wordpress

# 念の為バックアップ_wp-config.phpを取得
cp wp-config.php _wp-config.php

# グループに書き込み権限を付与
chmod g+w wp-config.php
```

実際に操作したシェル画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533960/351897e4-14f3-9ca5-4ba0-afa8c3855fb7.png)


# めでたく解消

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533960/ef115b5f-c04e-5a15-d5cf-ea10aaf5ed3c.png)

以上
お名前メールをcloudflareで利用する 

お名前.comで取得したドメインで、cloudflareを使用していましたが、お名前メールを使用する際に、苦労したので、手順を共有致します。

※はじめに注意点ですが、お名前.comで外部ネームサーバーを指定することはできますが、お名前メールプランでは指定のネームサーバーがあります。今回の設定は非公式となりますので、ご自身の判断でご利用ください。
![onemae_ns.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2231801/6fadfd96-8626-c149-ecb2-e431deb4ccf9.png)


# ネームサーバーの移行
既にcloudflareを使用している場合は、設定済みかと思いますが、これからcloudflareを使う場合は、ネームサーバーをお名前.comからcloudflareに移行します。
cloudflareにログインし、メニューのDNSからネームサーバーを確認します。
![cloudflare_NS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2231801/0f2f5425-0450-8c29-c385-3c438e624d2e.png)

次にお名前.comにログインし、メニューからネームサーバーの設定を開きます。
![onamae_NS1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2231801/6ac103ec-f1b5-f07e-dbc6-7bdff3808b72.png)


今回使用するドメイン名にチェックを入れ、「ネームサーバーの選択」から、「その他のサービス」のタブを選び、先程確認したcloudflareのネームサーバーを入力し、確認へ進み→入力が正しければOKを押します。
![onamae_NS2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2231801/af16ebf1-5e05-4198-1a75-7c2602375514.png)

# cloudflareのDNSを変更
ネームサーバーの設定が終わると、次にcloudflareに設定しているDNSを編集します。
### お名前メールのサーバー情報を確認
DNSの設定にあたり、現在のお名前メールのサーバー情報を確認するためにお名前メールの管理画面を開きます。
![onamae_mail1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2231801/f7611512-4e3c-2eea-a472-e990a8e27f6d.png)

今回重要になるのは、smtp○○.gmoserver.jp といったここの数字です。この数字はご自身の環境によって変わります。後ほど使いますので、メモしておきましょう。
![onamae_mail2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2231801/dd0f0d69-4ace-1499-4d74-b12ee666acae.png)
次にcloudflareでDNSの設定を行います。

### DNSの設定
ここでは、example.comというドメインを使用していると仮定して、設定します。
+ MXレコードの追加
MXレコードは、取得した独自ドメイン宛に届いたメールの配送先を指定します。
ここでは、example.com宛のメールをお名前メールのメールサーバーに送ることになります。

左メニューのDNSからexample.comのDNS管理の項目より、「＋レコードを追加」ボタンを選択
タイプを「MX」、名前に「example.com」を入力。
メールサーバーには、「mx○○.gmoserver.jp」を入力。この○○には先程お名前メールのサーバー情報から確認した数字を入力してください。
TTLは自動のままにして、優先順位は、メールサーバーが１つしかないので、いくつでも良いですが、ここでは10としました。
![dns1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2231801/fad3dead-fb6c-081a-4edf-a261a71cd7ad.png)

+ SPFレコードの追加
SPFレコードは、なりすましメールではないことを証明する方法の一つで、迷惑メールとして扱われる事を避ける為にも必要です。

タイプを「TXT」、名前に「example.com」、コンテンツに「v=spf1 include:spf○○.gmoserver.jp ~all」を入力します。
先程同様に◯◯はメモした数字に変更してください。
![spf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2231801/ced528fc-1861-ecdf-8e2d-04961c1be00d.png)

以上で設定は完了です。

herokuの無料プランでは、独自ドメインを使用するとSSL通信できません。そこでcloudflareの無料プランを利用してSSL通信をしていました。
今回、お名前メール(¥1040/年)を追加することで、heroku無料プランで独自ドメイン+独自ドメインのメールアドレスを使用することができました。
## 参考
こちらのサイトに大変助けられました。有益な情報に感謝致します。
[お名前メールを外部ネームサーバーから利用する裏技](https://blog.ryou103.com/post/onamae-nameserver/)
VSCode初心者向けのプラグインまとめ


# はじめに
VSCodeはマイクロソフトが出しているシンプルで使いやすいコードエディタです。しかも無料である程度のことはできちゃう優れものです。<br>
本記事ではVSCodeを使い始める人向けにインストールしておいた方がいいプラグインを紹介します。

# 言語設定
#### Japanese Language Pack for VS Code
VSCodeを日本語で使うためにまずこのプラグインをインストールしましょう。

# コードの可視化
#### Zenkaku
全角スペースを可視化してくれます。全角スペースの仕業でコードが動かなくなってデバッグに困った人には非常に心強いプラグインとなります。以前私もハマったことがあります。

#### Bracket Pair Colorizer
括弧によって色を変えて表示してくれるプラグインです。括弧が見やすくなるだけではなく、さらに括弧の最初と最後まで下線を引いてくれるので、括弧の中身が追いやすくなります。

#### indent-rainbow
インデントを虹色にしてくれます。jsonファイルなどが見やすくなると思います。また、Pythonなどはインデントがずれるとエラーになるので、あるととても便利です。

#### Whitespace+
とにかくあらゆる空白文字を可視化してくれます。全角・半角・タブなど気付くと紛れ込んでしまった(そもそもそうならないのが理想)空白文字が見えるので、バグをあらかじめ防ぐことができます。

#### Rainbow CSV
CSVファイルを列ごとに色を変えて表示してくれてます。列も行も多くて見づらいCSVを一気に見やすくしてくれるプラグインです。

#### Prettier Formatter for Visual Studio Code
コードのフォーマットを統一してくれるプラグインです。クウォーテーションやタブ、他にも細かなフォーマットの設定ができます。フォーマットルールを記載した.prettierrcファイルをプロジェクト内で共有することで、開発する際にフォーマットを統一することができます。

#### Visual Studio Code Prettify JSON Extension
混沌としたjsonファイルを整形してくれます。他にもVSCodeでjsonファイルを整形する方法はありますが、`command` + `shift` + `p` で呼び出してprettify jsonと打つと使えるのと、または独自でコマンドを設定することができるので個人的には早くていいかなと思いました。

#### TODO Hoghlight
コメントにTODOもしくはFIXMEと記載すると強調してくれます。どの作業をすればいいのかが一目で見やすくなります。TODOとFIXME以外もハイライトするよう設定することも可能です。

## バージョン管理(Git)

#### GitHub Pull Requests and Issues
VSCodeとGitHubを連携させることができるプラグインです。コミットやプッシュ、プルリクの作成など基本的な操作からissueの作成なども可能です。GitのCLIでの操作に慣れない人はまずはこちらをインストールすると良いと思います。

#### Git Lens
コミットやファイルの変更履歴が簡単に把握できるとても便利なプラグインです。コミットごとにファイルが表示され、そこから差分表示に簡単にアクセスできるので、チーム開発の際にとても重宝しています。

#### Git Graph
Gitのコミットグラフを美しく表示してくれるので、ブランチ全体を俯瞰するのにとても便利です。親ブランチがどれか分からなくなった時や誰がいつどのブランチからどのブランチに何をマージしたかを知りたい時に便利です。

# まとめ
プラグインがあるのとないのでは開発の効率が全然違います。
最低限これはあった方がいいと思うものを記載しているので、開発言語によってその他必要なプラグインは適宜入れていってもらえると幸いです。
AzureReposとGitHubを運用中のコンフリクトを解消するGit操作


## 現象
masterブランチにdevelop(staging)ブランチのマージプルリクエストを送ったとき、コンフリクトが発生。

## 原因
developおよびstagingブランチをmasterから派生後、何者かがmasterに直接変更を加えたファイルとコンフリクト。

## 前提条件
エディタはVSCodeを利用。
GithubとAzureReposと２つのリモートリポジトリで運用している。
origin がGitHub
azure がAzureRepos
とする。

## コンフリクトを解消してmasterマージする流れ

### 1. GitHubのdevelopブランチをAzureReposのdevelopブランチにプッシュする

```
git checkout origin/develop
git pull origin develop
git push azure develop
```

### 2. developでの動作確認が完了したのでstagingブランチにプッシュする

```
git pull azure develop
git push azure staging
```

### 3. developブランチをmasterにマージしようとするとコンフリクトが発生する
```
#心の声(ふざけんなよ・・・)
```

### 4. マージを解消するため、masterブランチに切り替える
```
git checkout master
git pull azure master
```

### 5. マージしたいブランチの変更を取り込んでマージ

```
git checkout azure/staging
git merge azure/master
```

### 6. コンフリクトが発生するので解消する
```
# VSCodeの画面から現在の変更を取り込むか、どうか判断して対応する
```

### 7. コンフリクト解消後、解消したプッシュを行う

```
git push azure staging
```

### 8. 画面からプルリクエスト

```
# 心の声（GitHubに慣れているからAzureReposの画面使いづれえ）
```

以上。
WindowsのVSCodeでDjango開発しようとしたらvenv上のpythonが選択できないときの対処法

## 問題
windows上でVSCodeでDjango開発しようとしたら仮想環境上(venv上)のpythonを選択することができない=venvのpythonがリスト上に出てこない。

## 環境
windows11
wsl 2
ubuntu20.04
VScode1.65.1
python3.8.10
django4.0.3

## 解決策
結論から言うとVSCodeとWSLつなげてからselect interpreterする。
1. WSLを立ち上げる。
1. WSLのターミナルで開発したい該当ディレクトリに移動
1. コマンドラインに`code .`を入力

これでVSCodeとWSLがつながった状態で起動できる。

## この違いは知っておこう
2度と同じことを繰り返さないために、この違いは知っておく必要がある。
### VSCode on Windows
単純にVSCodeをインストール、起動して、Windows上のフォルダを開いたら…
![2022-03-31_16h46_32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321085/3d70d3c5-1cb3-90c4-fa82-5d9229c51373.png)

左下は何も表示されず、WSLに繋がっておらず、ターミナルもPower Shellだったりするし・・・

![2022-03-31_17h03_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321085/0d8dce9a-b096-7928-52b5-87fc188e0df9.png)
かつView・Command Palette・Pyhton:select Interpreterしようにも仮想環境上のpythonが出てこない・・・

### VSCode on WSL

WSLを起動、該当する作業ディレクトリへ移動、そこからコマンドラインに`code .`を打ち込むと・・・

![2022-03-31_16h50_47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321085/d85a82e1-1c88-39ba-1df0-ebd038afbd97.png)

左下にはWSLに繋がっているよと表示され、ターミナルもbashとなり・・・

![2022-03-31_17h04_43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321085/790bc20c-3b5c-067c-d704-349173e90cd3.png)


仮想環境上(venv)のpythonが表示される


## 作業ディレクトリの違い

+ Windows上のフォルダを開くと`/mnt/c/Users/ユーザー名/Documents/作業ディレクトリ`　　のように`/mnt/c/`が付く

+ WSL上だと`/home/ユーザー名`が初期値となっている

## まとめ
単なる初心者の感想ではあるが、Windowsで開発環境を整えるときは、常にWSL上で作業をして、変にWindowsのDocumentsフォルダとか使わないほうが迷わなくて済むなぁと。