OmniAICreator/Qiita-1.07M huggingface dataset:
Windows10のネットワークプロファイル切り替え

# 背景
Windows10からネットワークプロファイル簡単に切り替えるのができなくなりましたよね。

[2021/3/26追記]
手元のPCで確認したところ、win10 2004ビルドでは[設定]-[ネットワーク]からネットワークプロファイルが選択できるようになっていました。皆さんのお手元ではいかがでしょうか？

PowerShellを使うのが簡単かなと思います。

## ネットワークプロファイル?
端末を新しいLANに接続した時、”このPCを検出可能にする～”といったようなメッセージがデスクトップ右側に表示されませんか？
ここではいを選ぶとプライベート、いいえを選ぶとパブリックというネットワークプロファイルが適用されます

このウィンドウ、うっかりエスケープキーなど押してしまうとささっと横に引っ込んでしまいます。厄介ですね。

ネットワークプロファイルとは、Windowsであらかじめ設定された通信ルール集のようなものです。
Windowsファイアウォールのことではなく、Windowsファイアウォールの設定内容も含むもう少しひろい概念だと理解しています。

## ネットワークプロファイルの操作
PowerShellで確認できます。

```powershell
Get-NetConnectionProfile
```
有効になっているネットワークの数だけ、表示されます。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581105/b1a56024-3fce-d090-3a48-6a6202f3a657.png)

上記の場合、無線接続かつドメイン参加状態のPCのため、NetworkCategoryに"DomainAuthenticated"が表示されます。
ドメイン非参加端末の場合、"Private"か"Public"です。

設定変更するには下記です。

```powershell
Set-NetConnectionProfile -Name <ネットワーク名> -NetworkCategory Private
```
DomainAuthenticatedには変更できません。
設定変更対象のネットワークが特定できれば良いので、-Nameオプションではなく-InterfaceIndexでも構いません。

使用できるオプションは、やはり公式リファレンスが参考になります。
[Set-NetConnectionProfile](https://docs.microsoft.com/en-us/powershell/module/netconnection/set-netconnectionprofile?view=win10-ps)

なーんか通信できないな？と思ったらネットワークプロファイルを疑ってみてください。
ちなみに、PowerShellで設定変更する以外に、ローカルグループポリシーエディタを使う方法、レジストリを修正する方法などがあります。状況に応じて使い分けてください。

参考サイト
https://laboradian.com/win10-change-net-public-private/
Mac でビデオチャットしながら音声を流す方法

例えばビデオチャット中に YouTube の映像を流したいとか、開発中のアプリの音声を流したい事はよくあると思います。ただこれが意外とややこしい。このコロナ時代にビデオチャットで音声を流すくらい簡単に出来ないなんておかしいと思うのですが、一応出来る方法があるのでメモします。

## 必要な物

* Black Hole: https://github.com/ExistentialAudio/BlackHole
    * Mac で流した音声をスピーカー以外で利用するためのソフトです。
    * homebrew を使ってる人はターミナルより `brew cask install blackhole` でインストール出来ます。
* LadioCast: https://apps.apple.com/us/app/ladiocast/id411213048
    * ミキサーアプリです。Mac で流した音声とマイクを合成するのに使います。
    * App Store からインストールします。

## 設定方法

### LadioCast を次のように設定します。

![Screen Shot 2020-11-09 at 10.17.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35350/4b97747e-e2d2-044d-9b5e-091908c62e60.png)

* Input 1: BlackHole 16ch, Main - 他のアプリからの音声を入力します。
* Input 2: External Microphone, Aux1 - マイクからの音声を入力します。
* Main Output: External Headphone - 合成された音声を自分で聞きます。
* Aux Output 1: BlackHole 16ch - 合成された音声を会話先に流します。

### システム設定のサウンド出力を次のように設定します。

![Screen Shot 2020-11-09 at 10.24.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35350/e19380cb-51f1-9f26-dbb2-c7888f900199.png)

* 出力: BlackHole 16ch - 他のアプリからの音声を BlackHole (仮想出力) に流します。

### ビデオチャットのマイク入力を次のように設定します。

![Screen Shot 2020-11-09 at 10.26.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35350/8c7b66e0-7c5a-3814-b622-03084372aa51.png)

* マイク: BlackHole 16ch - BlackHole (LadioCast で合成された音) を会話先に流します。

同僚の M さんに教えていただきました。
mindの研究 その28

#概要

mindが謎なので調べてみた。
vistaに入れた。
vs2010で作ったdllを、呼んでみた。

#サンプルコード


```
メインとは
　結果は　変数
　結果xは　変数
　１をつみ
　２をつみ
　"makedll"と　"Tasu"で　ＡＰＩ呼出し２　結果に　入れ
　エラー？　ならば
　　エラー文字列を　一行表示し　終り
　つぎに
　結果を　数値表示する



```

以上。
react-hook-form v6ではオプションでvalidationSchemaではなくresolverを指定する

reactを使った入力フォームでreact-hook-formとバリデーションとしてyupを組み合わせて使っていたがreact-hook-formをv6に引きあげたところ、書き方が変わっていたので記載する。

v5の時

```javascript
import React from 'react';
import { useForm } from 'react-hook-form';
import * as yup from "yup";

const validationSchema = yup.object().shape({
  email: yup.string().required(),
});

const { register, handleSubmit, errors } = useForm<{ email: string }>({
  mode: 'onBlur',
  defaultValues: defaultValue,
  validationSchema: validationSchema,
})
```

v6の時

```javascript
import React from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from "yup";

const validationSchema = yup.object().shape({
  email: yup.string().required(),
});

const { register, handleSubmit, errors } = useForm<{ email: string }>({
  mode: 'onBlur',
  defaultValues: defaultValue,
  resolver: yupResolver(validationSchema),
})

```

validationの部分だけ書き方が変わっただけではないので、そのほかの変更点は以下を参照してもらうと良いです。
https://react-hook-form.com/jp/migrate-v5-to-v6

v5のドキュメント
https://react-hook-form.com/v5/api
v6のドキュメント
https://react-hook-form.com/api
cscの作法 その43 dllimport

#概要

cscの作法、調べてみた。
dllimportやってみた。

#サンプルコード


```
using System;
using System.Windows.Forms;
using System.Drawing;
using System.Runtime.InteropServices;

class form1: Form {
	[DllImport("makedll.dll")]
	static extern int Tasu(int x, int y);
	form1() {
		Text = "hello";
		ClientSize = new Size(200, 200);
		Button btn1 = new Button();
		btn1.Location = new Point(50, 50);
		btn1.Text = "test";
		btn1.Click += btn1_Click;
		Controls.AddRange(new Control[] {
			btn1
		});
	}
	void btn1_Click(object sender, System.EventArgs e) {
		int i = 100;
		i = Tasu(2, 3);
		MessageBox.Show(i.ToString(), "こんちは");
	}
	[STAThread]
	public static void Main() {
		Application.Run(new form1());
	}
}




```

以上。
「Module compiled with Swift x.x.x cannot be imported by the Swift x.x.x compiler」というエラーが出てビルドに失敗する場合の対処

# 目的・背景

初めてiOSアプリの開発プロジェクトに参画。
既存のiOSプロジェクトを読み込んでビルドしようとしたらエラーになったので備忘録として書く。

# 何が起きたか

既存のiOSプロジェクトをXcodeで読み込んでビルドしようとしたらエラーになった。

```
Module compiled with Swift 5.1.3 cannot be imported by the Swift 5.1 compiler: /Users/xxxxxxx/Desktop/プロジェクト/Carthage/Build/iOS/Tabman.framework/Modules/Tabman.swiftmodule/x86_64-apple-ios-simulator.swiftmodule
```

# 原因

1. Carthageというライブラリ管理ツールがMacにインストールされていなかった
2. Command Line Toolsに使用するXcodeを選択していなかった
3. ソースに含まれるcarthageライブラリのアップデートが出来ていなかった

# 結論

## 1. Carthageのインストール

```zsh
$ brew install carthage
```

## 2. Command Line Toolsで任意のXcodeを指定

Xcodeを開いてメニューから[ Xcode > Preferences > Locations ]を開く。
Command Line Toolsのプルダウンで任意のXcodeを選択する。

## 3. carthageライブラリのアップデート

```zsh
$ cd プロジェクトのルートパス
$ carthage update --platform iOS
```
BigbluebuttonでiOSデバイスのカメラが使用できない件

BigbluebuttonでiOSからカメラの映像が共有できない(エラー1020が出る)という問題が上がっている。
当方iphone(iOS 13.7)でも不具合を確認している。

STUNサーバの設定が悪さをしているようなので、参考までに。
NATを使っていなくてもSTUNサーバを使う場面があるというのが混乱に拍車をかけているようだ。

STUNサーバが標準でstun.freeswitch.orgが設定されているが、これが動作していないようで、iOSはそこでカメラが共有できなくなってしまう。
googleのstunサーバ`stun.l.google.com:19302`なら大丈夫のようだ。(使えるSTUNサーバなら何でもよい)

```/usr/share/bbb-web/WEB-INF/classes/spring/turn-stun-servers.xml
<!-- 一部抜粋 -->
<bean id="stun1" class="org.bigbluebutton.web.services.turn.StunServer">
   <!-- constructor-arg index="0" value="stun:stun.freeswitch.org"/ --> <!--修正前 -->
   <constructor-arg index="0" value="stun:stun.l.google.com:19302"/> <!--修正後 -->
</bean>
```

`/etc/kurento/modules/kurento/WebRtcEndpoint.conf.ini`にもSTUNサーバの設定項目も忘れずに。

```/etc/kurento/modules/kurento/WebRtcEndpoint.conf.ini
stunServerAddress=172.217.212.127 
stunServerPort=19302
;こちらはIPアドレスで指定することに注意
```


【参考】
[Default TURN Server not Working with Safari #10764](https://github.com/bigbluebutton/bigbluebutton/issues/10764)
[Error 1020 when connection BBB via iOS](https://github.com/bigbluebutton/bigbluebutton/issues/10746)
ORA-01109の対策

「ora-01109：データベースがオープンされていません。」が起こった場合
dbaでログイン
<pre>
sqlplus / as sysdba
</pre>

pdbs(プラガブル・データベースの略）情報を表示
<pre>show pdbs</pre>
![pdbs.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189035/078f4d34-f281-8e3e-2309-97d54c15ccb9.png)

pdbをopenする
<pre>
alter pluggable database PDB名 open;
</pre>
![pdbs_ok.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189035/cb7875b4-e326-253d-2eff-fcd97a05f383.png)
[Azure] ACR タスクでベースイメージ/ソースコードの更新をトリガーに自動でビルドする

Azure Container Registry (ACR) がもつ機能 `ACR タスク`を使うことで、ベースイメージやソースコードの更新をトリガーに自動でコンテナイメージをビルドすることができます。

ACR タスクの概要 : https://docs.microsoft.com/ja-jp/azure/container-registry/container-registry-tasks-overview

## 1. ACR タスクを作成する
ACR と Dockerfile を含む Git リポジトリをあらかじめ用意しておきます。
azure cloud shell や az login したコンソールで、以下のコマンドを実行します。

~~~console
ACR_NAME=<作成した ACR 名>
ACR_TASK_NAME=<任意の ACR タスク名>

az acr task create \
  --registry ${ACR_NAME} \
  --name ${ACR_TASK_NAME} \
  --image <任意のコンテナイメージ名>:<タグ> \
  --context <Git リポジトリの clone URL>\
  --file <Dockerfile 名> \
  --git-access-token <Git Access token (PAT)>
~~~

公式チュートリアルのコマンド実行例 : https://docs.microsoft.com/ja-jp/azure/container-registry/container-registry-tutorial-base-image-update#create-a-task

作成した ACR タスクは ACR の [サービス] - [タスク] から確認できます。
![2020-11-07_16h05_30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423135/958d5142-e77a-9da1-1a9e-b53396c14395.png)

## 2. ACR タスクを手動で実行する

自動ビルドを有効にするためには、一度、ACR タスクを手動実行する必要があります。
https://docs.microsoft.com/ja-jp/azure/container-registry/container-registry-tasks-base-images#additional-considerations

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

~~~console
az acr task run --registry ${ACR_NAME} --name ${ACR_TASK_NAME} 
~~~

タスクの [実行] タブから実行が確認できます。
![2020-11-07_16h33_16_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423135/2e880ac9-83ad-1378-0256-89dfaa6cda12.png)

また、ACR リポジトリにビルドしたイメージが格納されます。

## 3. ベースイメージ/ソースコードの更新による自動ビルドを確認する

今回は、Docker Hub 上のベースイメージを更新します。
ベースイメージの場所によって更新からビルドがトリガーされるまでの時間が異なり、Docker Hub の場合は 10 ~ 60 分かかります。
https://docs.microsoft.com/ja-jp/azure/container-registry/container-registry-tasks-base-images#base-image-notifications

10 分程度待ってタスク画面を見てみると、トリガーが`イメージ更新`となっている ACR タスクの実行が確認できました。
![2020-11-07_16h49_53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423135/ff29f82e-c2b5-945b-7c6a-53f5aa52f9cb.png)

また、Git リポジトリ内のソースコードに更新をかけると、こちらも自動ビルドが走りました。
![2020-11-07_16h53_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423135/bbfe95b4-3e87-b560-bf34-9f31d9650c02.png)

自動ビルドを off にしたい場合は、`az acr task update` コマンドのオプションでそれぞれ変更できます。
https://docs.microsoft.com/ja-jp/cli/azure/acr/task?view=azure-cli-latest#az_acr_task_update

~~~console
az acr task update --name ${ACR_TASK_NAME} --registry ${ACR_NAME} --base-image-trigger-enabled false
az acr task update --name ${ACR_TASK_NAME} --registry ${ACR_NAME} --commit-trigger-enabled false
~~~

## 参考資料
- [ACR タスクの概要](https://docs.microsoft.com/ja-jp/azure/container-registry/container-registry-tasks-overview)
- [ACR タスクの基本イメージの更新について](https://docs.microsoft.com/ja-jp/azure/container-registry/container-registry-tasks-base-images)
How to integrate github with JIRA

#Register application for integration with JIRA
Log into your github account, [setting] -> [Developer settings] -> [OAuth Apps] -> [Register a new application]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399736/11799ea1-9e39-4fcb-d00f-63315dbafcf3.png)

Enter the Homepage URL and callback URL for jira.
Click the [Register application] button.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399736/d1e448ce-1b88-d90f-07d8-e1474e5ddddb.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399736/16013edc-4b09-48e9-bb66-7392fa5e6e06.png)

Memo the Clinet ID and Cient secrets.

#Integrate github with JIRA
Sign into the JIRA and click [Applications]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399736/e361d356-1d88-80d1-52ca-e6d3179082c9.png)

[Application] -> [DVCS accounts] -> [Link Bitbucket Cloud or Github account]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399736/588a70f3-5f23-36e2-0472-e7bd036d4ab2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399736/23b20541-6703-92fb-f039-0bee02b9dbc8.png)

Regarding the ClientID and Client Secret use the ones what you have created in the above procedure, as soon as you click [Add] button, it will move to the page below.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399736/c97675f3-4a24-8158-b335-b37c294dad3e.png)

You can see the repository of between Github and JIRA is synchronized.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399736/9f53e931-c7eb-40ed-c76b-8e3e367913b3.png)

##Reference##
[github for jira](https://marketplace.atlassian.com/apps/1219592/github-for-jira?hosting=cloud&tab=overview)
[Linking a Bitbucket or GitHub repository with Jira](https://confluence.atlassian.com/adminjiraserver088/installing-jira-applications/extending-jira-applications/integrating-with-development-tools/linking-a-bitbucket-or-github-repository-with-jira)
[エンジニアの僕が絶対やるJIRAの4つの設定](https://medium.com/eureka-engineering/%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AE%E5%83%95%E3%81%8C%E7%B5%B6%E5%AF%BE%E3%82%84%E3%82%8Bjira%E3%81%AE4%E3%81%A4%E3%81%AE%E8%A8%AD%E5%AE%9A-2771c8c4391d)
[チームとコーディングのワークフローの同期化 〜 GitHub / Bitbucket と JIRA Software のワークフローを連携](https://qiita.com/tnagasawa/items/45377ba08515f6f13e13)
[How to Build a Jira Workflow for Scrum: The Complete 2020 Guide](https://www.idalko.com/jira-scrum-workflow/)
3分アジャイル INVEST

## INVEST

---
良いユーザーストーリー（PBI）を作るための基準。


--- 
## I	独立している (Independent)
PBIは、他のPBIに固有の依存関係がないように、自己完結型である必要があります。

--- 
## N	交渉可能である (Negotiable)
PBIは明示的な契約ではなく、議論の余地を残す必要があります。

---
## V	価値がある (Valuable)
PBIは、利害関係者に価値を提供する必要があります。

---
## E	見積もり可能である (Estimatable)
PBIのサイズは常に見積もることができなければなりません。

---
## S	小さい (Small)
PBIは、正確さのレベル内で計画/タスク/優先順位付けを行うことが不可能になるほど大きくすべきではありません。

---
## T	テスト可能である (Testable)
PBIまたはその関連する説明は、テスト開発を可能にするために必要な情報を提供する必要があります。

---
## デイリー

- 開発チームがスプリントゴールを達成するために、私が昨日やったことは何か？
- 開発チームがスプリントゴールを達成するために、私が今日やることは何か？
- 私や開発チームがスプリントゴールを達成する上で、障害となる物を目撃したか？

---

参考 
- https://ja.wikipedia.org/wiki/INVEST
- ユーザーストーリーを集める ＪｏｎａｔｈａｎＲａｓｍｕｓｓｏｎ,西村直人,角谷信太郎. アジャイルサムライ達人開発者への道 (Japanese Edition) (Kindle Locations 2029-2030). Kindle Edition. 
- https://yattom.hatenablog.com/entry/20170126/p1
ABC182

AtCoder Beginner Contest 182
C - To 3
https://atcoder.jp/contests/abc182/tasks/abc182_c

```golang
package main
import(
    "fmt"
    "bufio"
    "os"
    "strconv"
    "strings"
)
var rdr=bufio.NewReaderSize(os.Stdin,1024*1024)
func readLine() string {
    buf := []byte{}
    for {
        l, p, e := rdr.ReadLine()
        if e != nil {
            panic(e)
        }
        buf = append(buf, l...)
        if !p {
            break
        }
    }
    return string(buf)
}
func readInts()[]int{
    s:=strings.Split(readLine()," ")
    res:=[]int{}
    for _,v:=range s{
        i,_:=strconv.Atoi(v)
        res=append(res,i)
    }
    return res
}

func main(){
  s:=strings.Split(readLine(),"")
  //使わない桁数、最大18桁あるので18+1=19とする
  minK:=19
  n:=len(s)
  for bits:=0;bits<(1<<uint64(n));bits++{
    var cp=make([]string,n)
    //元が変わってしまうので、いちいちコピーする
    copy(cp,s)
    k:=0
    sums:=0
    for i:=0;i<n;i++{
      if (bits>>uint64(i))&1==1{
        k++
      }else{
        j,_:=strconv.Atoi(s[i])
        sums+=j
      }
    }
    if sums%3==0 && minK>k{
      minK=k
    }
  }
  if minK==n{
    fmt.Println(-1)
  }else{
    fmt.Println(minK)
  }
}
```
・各桁の合計が3で割り切れる場合は3の倍数であること
・どの桁を「使わないか」を全探索する場合は、bit全探索を使用する
上記のことを考え、適当にbit全探索をしたら解けてしまいました。


#参考URL
標準入力は[こちら](https://qiita.com/tnoda_/items/b503a72eac82862d30c6)、bit全探索は[こちら](https://qiita.com/3x8tacorice/items/0b8341d7fd3ff3779111)を参考にしました。ありがとうございます。
arm64版Amazon Linux 2でasp.net core 3.1のアプリを動かした話

こんにちは。


https://qiita.com/yKimisaki/items/fa528de37413c1001bb6
過去の記事でSlackBotを作ったというのを書いていたのですが、最近AWS Graviton（x86-64系じゃなく、64bit版arm系のCPU、AWSが独自開発）のインスタンスに載せてみたので、メモ程度に残しておきます。
現状は何の問題もなく動いてくれているので、たぶん問題ないんだと思います。

## インスタンスについて

https://aws.amazon.com/jp/blogs/news/new-t4g-instances-burstable-performance-powered-by-aws-graviton2/

上記にいろいろまとまっていますが、会社の規模的にもめちゃくちゃハードに使用されるAPIサーバではないため、現状はt4g.nanoで運用しています。
ストレージは15GBにしていますが、1.7GBくらいで収まっているので多分これくらいの規模であれば8GBでも事足りるはずです。
料金については現状月4ドル～5ドルくらいで収まると思います。
普通にx64のt2.nanoとか借りるより安いです。

## OS/AMIについて

OSはAmazon Linux 2にしていますが、AWSだしAmazon Linux 2にしておこうというくらいの理由で決めているので、特に意味はありません。
.NET Coreがあらかじめ入っているクイックスタートだとt4gインスタンスは使えないので、しょうがなくピュアそうな子を選びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330809/8bfead62-181c-0570-0624-d46a124b3060.png)

あとはEC2を普通に立ち上げるのですが、SSHの22番のほかにASP.NETのサーバ用のポートをTCPで開けておいてあげてください。

## 仮想マシンに.NET Core Runtimeを入れる

私はWSLのUbuntu 20.04 LTSでSSH使ってAWSに繋いでいますが、楽だから以外の理由はないので、好きな方法でサーバに入ってください。
で、現状ではarm64版のEC2で.NET Core Runtimeのインストールにyumやらaptやらのパッケージマネージャ系は使えないっぽいです。
ので、以下からwgetで手動で持ってきます。

https://dotnet.microsoft.com/download/dotnet/current

```shell-session
wget https://download.visualstudio.microsoft.com/download/pr/dffd493f-9eb8-483f-81c7-a9e2201574ef/54e7464241e01e7031fd89e6fe88e6da/aspnetcore-runtime-3.1.9-linux-arm64.tar.gz
```

で、解凍してパスを通せばOKです。
今回はホームディレクトリ直下にdotnetフォルダを作ってそこに展開したので、以下のような感じです。

```shell-session
tar zxf aspnetcore-runtime-3.1.9-linux-arm64.tar.gz
export DOTNET_ROOT=$HOME/dotnet
export PATH=$PATH:$HOME/dotnet
```

## arm64版向けにpublishする

今回の場合、更新も自分しかせず頻繁に更新もかからず社内向けのSlackBotなので、ずぼらな自分はいつもWindowsでコマンドを叩いてscpで送っています。
PowerShellあたりでプロジェクトのフォルダまで移動し、

```
dotnet publish -c Release -r linux-arm64
```

でarm64版の実行ファイルが生成されます。
生成物のなかのpublishフォルダを丸っと、WSLを使ってscpで送ってやればOKです。

## 起動する

再びSSHでLinuxに入り、

```
nohup ./publish/SlackBot > slackbot.out &
```

のような感じでバックグラウンド実行をしています。
あとはSlackAPIの方のSlackCommandにAWSのサーバのURLを指定してあげるとOKです。

## さいごに

いつもは.NET CoreがプリインストールされているEC2インスタンスを立ち上げていたのですが、今回はそれができず、パッケージマネージャも使えないということで若干面倒ではあったのですが、無事にarmのCPUでも.NET Coreちゃんと動くよ！ということで、めでたしめでたし…
あんまり詳しくはないんですが、AWSは最近Gravitonへの動きが加速してまして、ElastiCacheやEKSの標準にしたりなどしているそうです。
かといって自分みたいなゲーム屋はUE4やUnity（というよりVisualStudioやらMayaやら）を使った開発でx86プロセッサから逃れられない運命は続きそうです。
arm版Windowsはエミュレーションだし、arm版Macももうすぐ発売ですけど、どうなるのかな…
ともかく今後数年でarmでゲーム開発を、というのはあんまり想像できないですね。
そういう意味でも、プロセッサの壁を越えてやれるっていうのは.NET Coreの強みだと思うので、是非皆さんもarm版.NET Coreをチェックしてみてください。
Vue.jsでFontAwesomeを使う方法(brands)


#FontAwesomeをVue.jsで使う方法
今回はVue.jsでTwitterアイコンやGithubアイコンを使いたかったのですが
Brandsアイコンを使用する時は少し他のアイコン使用と違い、実装に詰まったので下記が参考になれば嬉しいです。
※初心者が書いているので間違い等あれば教えて頂けると幸いです。

#FontAwesomeとは
>Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.

おしゃれなアイコン等がたくさん集まっています。画像等をインストールするより簡単です。
[FontAwesome 公式サイト](https://fontawesome.com/)

#FontAwesomeをターミナルにてインストールする
まずはターミナルで開発中のプロジェクトに移動し、FontAwesomeをインストールします。

```terminal
% cd project-name

% npm install --save @fortawesome/fontawesome-svg-core 
% npm install --save @fortawesome/free-solid-svg-icons  
% npm install --save @fortawesome/free-regular-svg-icons
% npm install --save @fortawesome/free-brands-svg-icons

% npm install --save @fortawesome/vue-fontawesome
```

今回使用したいBrandsアイコンはfree-brands-svg-iconsの一行となります。
上の４行は自分が使いたいアイコンによってインストールしなくても良いものもあります。
詳しく知りたい方は公式サイトを参考にするのをお勧めします。


#main.jsにFontAwesomeを使用する為の記述をする

```main.js
/* Font awesomeを導入 */
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(fas,fab)

Vue.component('font-awesome-icon', FontAwesomeIcon)
/* ここまで */
```


#実際に使用する為の記述をする

まずはuser-cicleという普通のアイコンを表示してみます。

```About.vue

<p><font-awesome-icon icon="user-circle" />プロフィール</p>
```
![スクリーンショット 2020-11-09 6.48.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/769364/6ecdb192-351e-10ed-bd30-e9f75b2eedc2.png)

こちらはちゃんと表示されました。


同じようにツイッターアイコンも表示してみると、何も表示されませんでした。

結果、下記のように記述する必要があります。

```About.vue

<font-awesome-icon :icon="['fab', 'twitter']" size="2x" color="#1da1f2"/>
<font-awesome-icon :icon="['fab', 'github']" size="2x" color="black"/>
```
すると、表示されました！

![スクリーンショット 2020-11-09 6.58.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/769364/af9f6957-ec05-bb0c-e2d0-f41da7ad61f7.png)

ちなみに色や大きさを変更したい場合、上記のように size と color を指定することによって変更することができます。
また、このツイッターアイコンやQiitaアイコンに自分のアカウントをリンクさせたい場合、aタグで囲むことで実装できます。

```About.vue
<a href="https://twitter.com/○○○○○○○"><font-awesome-icon :icon="['fab', 'twitter']" size="2x" color="#1da1f2"/></a>
<a href="https://github.com/○○○○○○○○"><font-awesome-icon :icon="['fab', 'github']" size="2x" color="black"/></a>
```

#まとめ
公式サイトを見ればVue.js以外での使用方法も細かく説明が載っていました。
FontAwesomeを使用するとおしゃれなアイコンもたくさんあるので是非使ってみてください！

以上
C# で湯婆婆を実装してみる（𠮷田さんにも対応）

ネタ記事が流行ってる！なので C# 9 で書いてみようと思います。
C# 8 ベースのものは別の方が書いてくれています。

[C#で湯婆婆を実装してみる](https://qiita.com/everylittle/items/d4df566a9c5f4bb58d5f)

## トップレベルステートメントくらいしか使えるものがない

湯婆婆はシンプルなのでトップレベルステートメントくらいしか使えるものがありません…！なのでこうなります。

```csharp
using System;

Console.WriteLine("契約書だよ。そこに名前を書きな。");
var name = Console.ReadLine();
Console.WriteLine($"フン。{name}というのかい。贅沢な名だねぇ。");

var random = new Random();
var newNameIndex = random.Next(name.Length);
var newName = name[newNameIndex];
Console.WriteLine($"今からお前の名前は{newName}だ。いいかい、{newName}だよ。分かったら返事をするんだ、{newName}!!");
```

## 𠮷田さん対応

空文字で落ちるのは仕様なので置いといて𠮷田さんが働けないのは問題です。Windows のコマンドプロンプトや PowerShell 上で𠮷田さんを表示できないので GitHub Codespace で適当な Linux マシンでやってみます。

そうすると申込用紙は𠮷田さんに対応してくれたみたいですが肝心の湯婆婆が𠮷田さんだとバグってしまいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70288/406eedff-3b08-3776-ef80-d5236c60bafb.png)

これですが、俗にいう4バイト文字に対応していないことにより起こります。サロゲートペアとか4バイト文字あたりでぐぐると情報が出てきます。

C# では `System.Globalization.StringInfo` クラスを使って対応します。今回のように 1 文字だけ取り出せればいいというケースでは `StringInfo` クラスのインスタンスを作って `LengthInTextElements` でサロゲートペアもきちんと見てくれている状態での文字数カウントをして `SubstringByTextElements` でサロゲートペアとかもきちんと考慮した状態で 1 文字切り取ってやればいいでしょう。

ということで、𠮷田さんに対応した湯婆婆は以下のようになります。

```csharp
using System;
using System.Globalization;

Console.WriteLine("契約書だよ。そこに名前を書きな。");
var name = Console.ReadLine();
Console.WriteLine($"フン。{name}というのかい。贅沢な名だねぇ。");

var nameInfo = new StringInfo(name);
var random = new Random();
var newNameIndex = random.Next(nameInfo.LengthInTextElements);
var newName = nameInfo.SubstringByTextElements(newNameIndex, 1);
Console.WriteLine($"今からお前の名前は{newName}だ。いいかい、{newName}だよ。分かったら返事をするんだ、{newName}!!");
```

では実行してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70288/21a00b2e-0da6-193f-1198-330c3a9e966c.png)

ばっちりですね。これで𠮷田さんも働けます。もちろん空文字の場合は仕様通り例外が発生します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70288/e8e38d0f-123e-07fe-e897-b471cef6de25.png)

## まとめ

もう 1 記事くらい湯婆婆で書けそうな気がする。
【Visual Studio Code】よく使うショートカットキーを自分用にメモ

#プログラミング勉強日記
2020年11月9日
Visual Studio Codeでよく使うショートカットキーを自分用にまとめる。
使用しているパソコンはMac。

#ショートカットキー
* フォルダを閉じる→`⌘(command) + K + F`
* フォルダを開く→`⌘ + O(アルファベットのオー)`
* テキストを選択→`マウスパッドをダブルクリック`
* 1行選択→`トリプルクリック`
* 開始タグから閉じタグまで選択→`⌘　+ shift + A`
* 全範囲選択→`⌘ + A`
* ファイルを開く→`⌘ + P`
* インデントを整える→`⌘ + option + F`
* ファイルの中でコードの検索と置換→`⌘ + F`
* 既存の文字列を任意のタグで囲む→`⌘ + R + P`
※自分でショートカットキーを設定する必要あり
* コードの上下移動→`対象の行にカーソルをおいて、option + 矢印(↑,↓)`
* コードのコピー→`⌘ + shift + 矢印(↑,↓)`
* 行を削除→`⌘ + X`
* 選択範囲を新しいファイルにまとめる→`⌘ + .(ドット)`※jsファイルのみ　

※随時更新予定

#参考資料
* [過去の自分に教えなければならないVSCodeのショートカット](https://qiita.com/rana_kualu/items/ea78200036fc80dce0a9)
* [VS Codeで選択範囲をHTMLタグで囲むショートカットキーを設定する](https://qiita.com/MToyokura/items/da4fb3477affd0278506)
VScodeでC#を動かしてみる

今回は、マイクロソフト社が提供する、VScode上で、C#を動かすところまでを解説します。

## そもそも、C#とは？

『マイクロソフトによる謳い文句としては、マルチパラダイムプログラミング言語、強い型付け、命令型、宣言型、手続き型、関数型、ジェネリック、オブジェクト指向の要素を持つ、などといった点が強調されている。』らしい

## 準備

事前準備は、２つ

* VScodeのインストール　https://azure.microsoft.com/ja-jp/products/visual-studio-code/
* .NET Coreのインストール　https://dotnet.microsoft.com/download

VScodeは割愛

### 事前準備:.Net Coreをインストールする

https://dotnet.microsoft.com/download
へアクセスし、

.NET Core のBuild Appsをダウンロードします（ダウンロードフォルダは、自由！）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/711655/b134b450-3e2b-45da-57c5-be071105fbfa.png)

ダウンロードしたファイルをダブルクリックすれば、インストーラーが立ち上がり、
自動的にインストールされるハズです。

ここまでで、.NET coreの導入は終了です。

## VSCodeにC#を導入する

VScodeを立ち上げて、拡張機能を探します
左端の↓のExtensionsとなっているアイコンをクリック（日本語だと拡張機能？となっているかと）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/711655/a569b247-9905-0126-5cf3-ca274ed9c309.png)

続いて、検索窓で「C#」で検索すれば、一番上に対象の拡張機能が表示されます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/711655/34064b20-d548-f6d3-7797-f87306db09a2.png)

キャプチャではインストール済みなので、表示されていないですが「install（インストール）」と表記された、緑色のアイコンをクリックすれば、すぐにインストールが始まります。
そして、無事にインストールが完了すればキャプチャのような歯車アイコンになるハズです。

## VSCode上でC#を動かしてみる

いよいよ、C#を動作させるための作業フォルダを用意します
（関連ファイルが自動で出来るので、そちらの方がきれいに出来ると思います。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/711655/8e45a2c9-847d-eb7c-27a4-5e26940ded39.png)

今回は、Helloworldというフォルダを選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/711655/260cb518-0cc5-ce8b-1c2d-b6eecac8c9d8.png)

つづいて、右クリックで、Open in integrated Terminalを選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/711655/57004b4e-ec75-6f1a-d066-bfbc170f418b.png)

すると、TERMINALが開かれ
下記のような状態になっているかと思います。

```
PS C:\Users\hogehoge\workspaces\c#\helloworld> 
```

つづいて、.dotNetを起動していきます

```
PS C:\Users\hogehoge\workspaces\c#\helloworld> dotnet new console
```

成功すれば、program.csなど複数のファイルが自動でできているハズです。

自動で生成されたprogram.csを選択し、
続いて、次のようにコマンドを打ちましょう！

```
PS C:\Users\hogehoge\workspaces\c#\helloworld> dotnet run
```

実行結果として『Hello World!』が帰ってくれば環境整備成功です！

おつかれさまでした！
System SpecとFeature Specは何が違うの？


新しいRailsプロジェクトに取り組む際に、テストもしっかり書こうと思い調べたことをまとめます。

## System SpecとFeature Specの違い

どちらもRSpecで提供されているE2Eテスト機能です。
Feature Specのほうが歴史が長く、古いバージョンのRailsプロジェクトではこちらがよく使われていると思います。

Rails5.1で`SystemTestCase`という新しいテストケースクラスが導入され、これをラップした (使えるようにした) System SpecがRSpecでも導入されました。
[RSpecリリース](https://rspec.info/ja/blog/2017/10/rspec-3-7-has-been-released/)

結果として両者が共存している状態ですが、公式READMEではSystem Specが推奨、Feature Specは引き続きサポートしていくことが表明されています。

> Before Rails introduced system testing facilities, feature specs were the only spec type for end-to-end testing. While the RSpec team now officially recommends system specs instead, feature specs are still fully supported, look basically identical, and work on older versions of Rails.


System Specの導入により、嬉しいことが増えました。

### 1. `database_cleaner`のようなgemを使って、テスト時のDBトランザクション管理をする必要がなくなった。

これはRailsの`SystemTestCase`がフレームワーク内でうまいことやってくれるようになり、テスト内で適切にロールバックができるようになったからです。

### 2. テスト失敗時にtmp/screenshotsにスクリーンショットを保存してくれる。

デバックしやすくなって嬉しいです。

### 3. JavaScriptを使用した画面のテストをする際の、面倒な設定が不要になった。

Feature SpecでJSを使ったテストを行う場合は、いろいろを面倒な設定が必要でした。
以下は[公式ブログ](https://rspec.info/ja/blog/2017/10/rspec-3-7-has-been-released/)の引用です。

> RSpec の Feature Spec はデフォルトの Capybara ドライバーとして Rack::Test を利用します。 もし Selenium のような JavaScript が有効なドライバーを使いたい場合は、 ユーザーが自身で Capybara の設定をする必要がありますが、この設定はかなり高度で難しいものでした。 System Spec でデフォルトで Selenium 経由で Chrome を利用しますが、 これらの難解な設定は Rails があなたの代わりに行なってくれます。

上記にあるように、System Specではデフォルトで`Selnium + Chrome`を使ってテストが実行されるため、セットアップが必要です。

かんたんにセットアップだけ説明します。
gemに`selenium-webdriver`を追加します。

```ruby:Gemfile
gem 'rails', '6.0.3.4' # 5.1以上が必須
# ---
group :development, :test do
# ---
  gem 'rspec-rails'
# ---
end

group :test do
  gem 'capybara'
  gem 'selenium-webdriver'
end
```

ローカルマシンにChromeDriverをインストールしておきましょう。

```bash
$ brew install chromedriver
```

Docker環境の場合は、Dockerfile内でインストールしたり、docker-compose内でイメージを指定したりしてできそうです。

```YAML:docker-compose.yml
  chrome:
    image: selenium/standalone-chrome:3.141.59
    volumes:
      - /dev/shm:/dev/shm
```

## 参照記事
ありがとうございました。

- [rspec/rspec-rails](https://github.com/rspec/rspec-rails#system-specs-feature-specs-request-specswhats-the-difference)
- [RSpec公式ブログ](https://rspec.info/ja/blog/2017/10/rspec-3-7-has-been-released/)
- [rspec-rails 3.7の新機能！System Specを使ってみた](https://qiita.com/jnchito/items/c7e6e7abf83598a6516d#js-true%E3%81%AE%E3%81%A8%E3%81%8D%E3%81%A0%E3%81%91chrome%E3%82%92%E8%B5%B7%E5%8B%95%E3%81%99%E3%82%8B)
- [Docker で RSpec の System Spec を実行するための設定メモ](https://qiita.com/suketa/items/d783ac61c2a3e4c16ad4)
[Next.js] CSS moudle とベタ書きを合わせた記述方法


Next.jsは、`[name].module.css`の命名規則を使えば、CSS Modulesをサポートしている。

[公式](https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css)

### 通常
```react
import styles from './Button.module.css'

    <button
      type="button"
      className={styles.error}
    >
```

### CSS Module複数
```react
import styles from './Button.module.css'

    <button
      type="button"
      className={`${styles.error} ${styles.under_line}`}
    >
```

### CSS Moduleを使わないベタ書き指定
```react
// import styles from './Button.module.css'

    <button
      type="button"
      className="text-center d-flex align-items-center"
    >
```

### CSS Moduleとベタ書き合わせたもの
```react
import styles from './Button.module.css'

    <button
      type="button"
      className={`${styles.error} ${styles.under_line} text-center d-flex align-items-center`}
    >
```
ml5.jsのSoundClassifier呼び出しエラー対処メモ

# ml5.jsのSoundClassifier呼び出しエラー
SoundClassifierを使おうとしているが、Javascriptのエラー。。
よく分からないので知見を持っている方に伺いました。

![MicrosoftTeams-image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/726018/d9fddc18-93aa-11c5-770a-7ff265e39991.png)

# ソースの修正点
エラーのソースと正しいソース両方のせましたが、引数のvideoがいらなかったです。
ImageClassifierのソースをコピーして使いまわして実施していたので、取っていなかったことが原因でした。

## エラーのソース
```javascript
// 自作モデルのロード
classifier = ml5.soundClassifier(imageModelURL + 'model.json', video, () => {
  // ロード完了
  app.modelState = 'ロード完了！';
  console.log('Model Loaded!');
});
```

## 正しいのソース
```javascript
// 自作モデルのロード
classifier = ml5.soundClassifier(imageModelURL + 'model.json', () => {
  // ロード完了
  app.modelState = 'ロード完了！';
  console.log('Model Loaded!');
});
```

# 最後に
SoundClassifierの下記の仕様ちゃんと読んでつかわないといけなかったな。。
https://learn.ml5js.org/#/reference/sound-classifier
boto3のS3 NoSuchKeyエラーをキャッチする方法

Pythonのboto3でS3オブジェクト取得時に、オブジェクトが存在しなかった場合 `S3.Client.exceptions.NoSuchKey` というエラーが発生するとboto3のドキュメントには書かれています。しかしこのエラーをPythonで具体的にどうキャッチすればよいのかわからなかったので、動かしてみて調べました。

`get_object` と `head_object` でなぜか挙動が違ってました。


# get_object

次の2パターンのコードでエラーをキャッチできました。

```python
import boto3

s3_bucket = "..."
s3_key = "..."

session = boto3.session.Session()
s3_client = session.client("s3")

try:
    s3_client.get_object(
        Bucket = s3_bucket,
        Key = s3_key,
    )
except s3_client.exceptions.NoSuchKey as e:
    "NOT FOUND ERROR!"
```

```python
import boto3
import botocore.exceptions

s3_bucket = "..."
s3_key = "..."

session = boto3.session.Session()
s3_client = session.client("s3")

try:
    s3_client.get_object(
        Bucket = s3_bucket,
        Key = s3_key,
    )
except botocore.exceptions.ClientError as e:
    if e.response["Error"]["Code"] == "NoSuchKey":
        "NOT FOUND ERROR!"
    else:
        raise
```

※最後に`raise`しているのは、`NoSuchKey`以外のエラーがあるかもしれないので、念のためです。


# head_object

次のコードでエラーをキャッチできました。

`get_object` のマネをして `s3_client.exceptions.NoSuchKey` を試してもできませんでした。

`ClientError`でのキャッチも`Code`の文字列がなぜか `get_object` とは違います。

```python
import boto3
import botocore.exceptions

s3_bucket = "..."
s3_key = "..."

session = boto3.session.Session()
s3_client = session.client("s3")

try:
    s3_client.head_object(
        Bucket = s3_bucket,
        Key = s3_key,
    )
except botocore.exceptions.ClientError as e:
    if e.response["Error"]["Code"] == "404":
        "NOT FOUND ERROR!"
    else:
        raise
```


# バージョン情報

```console
$ pip list | grep boto 
boto3                   1.14.63
botocore                1.17.63
```
iOSアプリ開発者であれば毎日チェックすることをお勧めしたいニュースソース/ブログ

実務でのiOSアプリ開発って、学習というよりも「最新情報の収集」が大変だなぁと感じます。
毎日最新情報をチェックしておかないと、Appleの動向に振り回されて実務でヒドい目に会うためです（笑

そこで、私が情報収集に使っているニュースソース/ブログを共有します。
いずれもRSSフィードを公開していますので、[Feedly](https://feedly.com/)などのフィードリーダーに登録すると良いかと思います。

他に良いソースをご存知の方がいらっしゃったら是非教えてください！

## [Apple Developer - ニュースとアップデート](https://developer.apple.com/jp/news/)

- とにかくこれだけはチェック必須です。
- [英語版](https://developer.apple.com/news/)の方が情報が早いですので、抵抗がなければ英語版をチェックした方がベターです。

## [iPhone Mania](https://iphone-mania.jp/)

- 特にOSのリリース情報が早くて的確です。

## [ITmedia Mobile](https://www.itmedia.co.jp/mobile/)

- 特にハードウエアと通信キャリアの情報が豊富です。

## [Developers.io - スマートフォン](https://dev.classmethod.jp/category/smartphone/)

- いち早く「やってみた」系の記事を上げてくれるので、新技術の概要を早めにキャッチアップできて助かります。
- Webだと「スマートフォン」カテゴリになりますが、RSSフィードには「iPhone」カテゴリがあります。

## [Qiitaのタグフィード](https://qiita.com/tag-feed)

- 「iOS」「Swift」「Xcode」あたりのタグをフォローしておくと良いかと。
- 初学者向けの記事も含まれますので、最新情報の収集にはあまり向かないかも？
- RSSフィードはないと思います。たぶん…
[iOS] [MVVM] DateからStringへの変換はViewModelで行うべきかViewで行うべきか？

# テーマ

MVVMで作られたアプリにおいて、Model（何らかのデータベース）にDateで格納されている値があるとします。

それを画面上に表示する際は、

- `yyyy/MM/dd HH:mm` という形式
- タイムゾーンは日本

という仕様とします。

この時、
**この変換＆書式編集は、ViewModel層で行うべきか？ それともView層で行うべきか？**
というのが本記事で扱うテーマです。

# 考察

以下、私なりの考察です。

先に結論をいいますと、
私は、**原則としては、ViewModel層で行った方が良い**のではないか、
と考えます。

「見せ方」の責務に思えるし、実務の場合はextensionを書くことが多く単純なコードになるのでViewで行う考えの方もいるかと思いますが…

Date→Stringの編集の場合は、ロケール以外に、「タイムゾーンは端末設定に合わせるのか？日本固定か？」や、「APIから降りてきた値が日時として不適正な場合はどうするか？」など、単なる「見せ方」だけに止まらないドメイン領域の課題が含まれる場合が多いから、です。

数値についても同じで、例えば数値の `1234567` を `1,234,567` というようにカンマ編集するだけならView層の責務として全然問題ないかと思いますが、これが通貨であったりすると通常はドメイン領域の課題を含んでくるので、ViewModel層の責務とする方が良いかと思います。

すなわち、**ドメイン領域の課題を含む編集処理の場合にはViewModel層、それを含まない単純な書式編集のみであればView層**、という区分けが適切であると考えます。

そのような区分けをすることで、**ドメイン領域の課題を含むロジックのユニットテストが書きやすくなる**、というメリットもあるかと思います。

# 参考記事

[大規模なiOSアプリでFatViewControllerを解消するために導入したMVVMパターンのサンプル](https://qiita.com/y-some/items/a6b8b75747f4a5d48ec9)
[Rails]モデルのバリデーション「lengthチェック」の閾値はテーブル情報から動的に取得しよう

下記のusersテーブルがあるとします。

```console
mysql> desc users;
+-----------------------------+-------------+------+-----+---------+----------------+
| Field                       | Type        | Null | Key | Default | Extra          |
+-----------------------------+-------------+------+-----+---------+----------------+
| id                          | bigint(20)  | NO   | PRI | NULL    | auto_increment |
| name                        | varchar(100)| NO   |     | NULL    |                |
| created_at                  | datetime    | NO   |     | NULL    |                |
| updated_at                  | datetime    | NO   |     | NULL    |                |
+-----------------------------+-------------+------+-----+---------+----------------+
```

この場合、RailsのUserモデルを作るときにnameには100文字未満というバリデーションを入れることが多いと思います。
そのときに下記のように100とハードコーディングしていませんか？

```ruby:app/models/user.rb
validates :name, presence: true, length: { maximum: 100 }
```

Railsではデータベーステーブルのメタ情報を簡単に取得することができます。
これを使うことで下記のように100の部分をテーブル定義から動的に取ることができます。

```ruby
validates :name, presence: true, length: { maximum: columns.find{|c| c.name == 'name' }.limit }
```

このように書いておくことでテーブル定義を変更したときも自動的にバリデーションの値も更新されるのでおすすめです。
Googleスプレッドシートへのアクセスエラーの対処方法メモ

# GoogleAppsScript（GAS）でのアクセスエラー
serveを使ってlocalhostでアプリケーションを実行
↓
GASでWebhookを利用してGoogleスプレッドシートに書き込みを実施しようとしたのですが、下記のエラーが発生。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/726018/6019427f-59ef-7e33-1f90-f3fbc90273cd.png)

# エラーの原因
Cross-Origin Resource Sharingでエラーになっているみたい。日本語訳すると「オリジン間リソース共有」でエラーになったいるとのこと。
サーバ側でのレスポンスで
　Access-Control-Allow-Origin
を設定すればよいとのことだが、GASでの設定方法が分からず。。
一度、IntegromatでWebhookを作成して、Googleスプレッドシートに書き込むように方法を変更。
※Integromatで発行したURLはlocalhostからのアクセスは可能でした。
Railsでよく使うGem

TL; DR

(まだかきかけ)
私がRailsでよく使うGemをメモしました。
一番良く使っているRailsのバージョンは5.2.xです。

* config (Environmentごとの設定をYAMLで記述する)
* haml-rails (ビューの記述言語としてHamlを利用する)
* boostrap (CSSフレームワークのBootstrap)
* font-awesome-sass (FontAwesomeを使う)
* activerecord-session_store (RailsのセッションをActiveRecordに保存する)
* gretel (パンくずリストの管理)
* enum_help (enumのI18N化)
* rails-i18n (各国語用のロケールデータ)
* auto_strip_attributes (ActiveRecordのattributesの文字列をstripしたり、nilにしたり)
* email_validator (メールアドレスのvalidation)
* whenever (crontabにスケジュールを書き込む。Capistranoと組み合わせるとよい)
* kaminari (ページネーション)
* kaminari-bootstrap (ページネーション)
* redcarpet (MarkdownをHTMLに変換する)
* activeresource (RailsのようなRESTful APIを持つアプリケーションとの通信)
* pry-rails (デバッグ)
* pry-doc (デバッグ)
* pry-byebug (デバッグ)
* pry-stack_explorer (デバッグ)
* rspec-rails (RSpecをRailsで使う)
* factory_bot_rails (FactoryBotをRailsで使う)
* database_clearner (RSpecと組み合わせて使う。テストでつかったデータベースの後始末)
* timecop (時刻関連のテストのために時計を制御する)
Soucetreeを使ってAzure DevOpsのリポジトリへプッシュする

## 目的
Sourcetreeを使用してソースを管理している環境から、Azure DevOpsへ接続＆プッシュすることを目的としています。
ローカル環境で開発していて、１回目は「ローカル→リモート」の接続を想定したものです。

## 環境
- リモートリポジトリ：Azure DevOps
- クライアントツール：SourceTree（Version 3.0.1）

## 手順
### Azure DevOpsの設定
- PAT(Personal Access Token)を発行
  - 右上の自分のアカウンとアイコンを選択
  - 「･･･」をクリック
  - User Seggings をクリック
  - personal access tokens をクリック
  - 「New Token」をクリック
  - 必要な権限に合わせて作成

### SourceTreeの設定
- アカウント情報の作成
  - URLの設定に注意

https://{username}@dev.azure.com/{username}/xxxx/_git/xxxx
↓
https://{username}.visualstudio.com

  - パスワードはAzure DevOpsで作成したPAT
  - sshkey を作成
  - 登録完了

### Azure DevOpsの設定
- SourceTreeで作成したsshkeyを登録する

## 確認
- SourceTreeでフェッチしてみて、接続エラーにならないことを確認する 

## 参考ページ
https://qiita.com/tajima440/items/336a730c3c7d29429b39
※こちらのページはAzure DevOpsからクローンする手順
CSSで三角形を作る

## ■ はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・CSSの基礎知識が増える
・CSSで三角形を扱う

↓ 便利なサービス
[CSS三角形作成ツール](http://apps.eky.hk/css-triangle-generator/ja)

## ■ 例

親要素`div`と子要素`span`があって`span`を三角形とする場合です

![スクリーンショット 2020-11-08 14.23.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/61709c46-b777-3dd7-624e-d205cd0b5b6e.png)

```scss:index.scss
div {
  position: relative;
  // その他省略
  span {
    position: absolute;
    top: 100%;
    left: 47%;
    border-style: solid;
    border-width: 15px 50px 0 50px;
    border-color: #3b4552 transparent transparent transparent;
  }
}
```

・ `position`を使う
・ `top`と`left`を%指定するか、`transform: translate();`で変更に適応化させる
【Windows10】使っているツールの一覧

- 使っている、使うかもしれないツールの一覧

# 記事の目的
- 備忘録として。インストール方法別にメモしておく。
	- 「そもそも何を使っていた？」への備え。
- 例えばPythonは、インストール手段のメモとして記載。

# Windows10/インストラーあり
- Vivaldi、Brave、Kinza、Microsoft Edge：ウェブブラウザ。
- OneDrive、Mega：クラウドストレージ。
- Obsidian：Markdown形式のメモツール。
- CubeNote、 Zoho Notebook、Evernote：メモツール。　
- VSCode、Boostnote、Brackets、TeraPad：エディタ。
- TeraTerm：UNIX系サーバーを遠隔操作するための端末ソフト。
- Cygwin：Unixライクの環境。

# Windows10/インストラーなし、未確認
- Bootstrap：HTMLページのデザインをカッコよくする。
- Cica、HakuGen：フォント。
- Ctrl2cap：キーバインドを変えるツール。
- Scancode Map（仮称）：キーバインドを変えるレジストリファイル。
- Googleホットキー（仮称）：Googke日本語入力のキーバインドを変えるインポートファイル。

# Windows10/Vivaldi（Chrome拡張プラグイン）
- Markdownload：ウェブページをマークダウン形式で保存する。
- Gammarly：英文の単語や文法をチェックする。

# Windows10/Scoop
- pandoc：Markdown、Textile、reStructuredTextなどのドキュメント形式の変換。
- neovim：エディタ。

# Windows10/Cygwin
- Python：インタープリター言語
- rubygem：主にRedmine用。
- Redmine：タスク管理システム。「お一人様システム」として利用。
- Rails、Laravel：（インストールはできるけど大変）　

# Cygwin/pip
- Django：ウェブフレームワーク。　
- Sphinx：reStructuredText形式のドキュメントをいい感じにしてくれるツール。　
- sphinx_bootstrap_theme：Sphinxで作ったHTMLがカッコよくなる。
- sphinx_rtd_theme：Sphinxで作ったHTMLがカッコよくなる。

# Cygwin/tarball
- nkf：jis, s-jis, euc, utf-8の変換ツール。　
- global：函数の索引を作ったりして、ソースコードの読解を助ける。
 
# 以上
決して忘れないパスワードの記入法

#結論

最近思いついたパスワードの記入法

ずばり、仮名文字入力を覚えること


#例

* 山田一郎　→　7jq[ea4
* 東京渋谷　→　s4g(4d2[7

#重要なこと

* 言わない
【CSS】好きな色を直感で選べるカラーコード取得サイト【簡単】

色を選びながら、カラーコードも取得できる便利なサイトを発見したので紹介します:wink:
それが、以下リンクのサイトです。

[HTML COLOR CODES](https://htmlcolorcodes.com/)
<ul><li>好きな色が直感で選べる
以下のように、グラデーションで表示されているパレットの中で「これくらいの色がいいな…」と思う部分をクリックすると、選択した色のサンプルとカラーコードがパレットの右に表示されます。カラーコードを検索しなくても、パレットの好きな部分をクリックするだけで、カラーコードが簡単にわかります:sunny:
![Screenshot 2020-11-09 at 05.19.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/841745/4d4e7637-148d-1ea0-890a-43fce3a3d504.png)

<li>選べる色がグラデーションで表示されているため、どんな色もCSSで指定できる
ふんわりしたパステルカラーから、明るくパッキリしたビビットカラーまでどんな色でも選択できるので、テーマや用途にあった色を選び、Webページに反映させることができます。
絶妙な色を表現したい時も、「もう少し暗めの…」「もう少し明るめに…」とパレットのいろんな部分をクリックすることで、お気に入りの色が見つけられます:heart_eyes:
</ul>


ご参考まで。
【CSS】background-colorが効かない時に試すこと【これかな？】

background-colorが効かなくて、背景の色が変更できない時ありませんか…？

ということで、backgound-colorが効かない時の対処法を書き留めていきたいと思います。
（色々なケースがあると思うので、随時更新したいと思います。）

【対処法】

<ul>
<li>幅や高さを指定してみる</li>widthやheightで幅や高さを指定していない場合、CSS的には「え、背景の大きさ指定してないのどこまで塗るの…」と混乱してしまうためではないか、と予想しています。
</ul>

今回はこの方法で解決されました。

他にもこんなケースがあるよ！というのがありましたらぜひご教示ください:dancer_tone3:
ご自身のQiitaに投稿されている場合は、ぜひ見たいので、リンクもご共有いただけると嬉しいです！
Django テンプレート 小技集

# objectに配列番号でアクセスする
```html:template.html
{{ objects.0.name }}
```

# 表に行番号をつける
```html:template.html
            <table class="table table-striped">
                <thead class="thead-dark">
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Name</th>
                </tr>
                </thead>
                <tbody>
                    {% for object in object_list %}
                        <tr>
                            <th scope="row">{{ forloop.counter }}</th>
                            <td>{{ object.name }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
```

思いついたら随時更新
コンテナを自動起動する

## 設定方法

1. コンテナを自動起動する。

    ```shell
    docker update --restart=always <container_id>
    ```

1. コンテナを手動起動する。

    ```shell
    docker update --restart=no <container_id>
    ```

## 確認方法

1. コンテナの起動方法について確認する。

    ```shell
    docker inspect -f "{{.Name}} {{.HostConfig.RestartPolicy.Name}}" $(docker ps -aq)
    ```

    ```text
    /<container_name1> always
    /<container_name2>
    /<container_name3> always
    ```
【JavaScript】碁盤の目状に並べた複数の配列の縦・横を入れ替える

# そもそも何をしたいのか
言葉では説明しづらいので以下をご覧ください。

まず下記のコードを実行すると...

```JavaScript:JavaScript
const createGrid = num => {
  const serialNumArr = Array.from(new Array(num).keys());
  return serialNumArr.map(v1 => serialNumArr.map(v2 => ++v2 + v1 * num));
};

const grid = createGrid(5);
```

以下のような5つの連番を値に持つ配列を5つ格納した配列、`grid`が作成されます。

（画像1）
[![Image from Gyazo](https://i.gyazo.com/05affae2385b5103a99a61dca6e69e5e.png)](https://gyazo.com/05affae2385b5103a99a61dca6e69e5e)
これの縦と横の中身を入れ替えて、以下のようにしたいとします。
（※そもそも配列に縦・横という概念は無いですが、見ため上こういった表現を使わせていただきます。）

（画像2）
[![Image from Gyazo](https://i.gyazo.com/9a1cd53369efb3cf911cd4cad3568368.png)](https://gyazo.com/9a1cd53369efb3cf911cd4cad3568368)

# どう実現するか
まず（画像2）の一個目の配列に注目すると、下記のように（画像1）の各配列の0番目の値が格納されている事が分かります。

```JavaScript
[grid[0][0], grid[1][0], grid[2][0], grid[3][0], grid[4][0]]
```

同じ要領で二個目の配列には（画像1）の各配列の1番目の値が格納されています。

```JavaScript
[grid[0][1], grid[1][1], grid[2][1], grid[3][1], grid[4][1]]
```

つまり最終的に作りたいものは以下のようなコードになります。

```JavaScript:JavaScript
const swappedGrid = [
  [grid[0][0], grid[1][0], grid[2][0], grid[3][0], grid[4][0]],
  [grid[0][1], grid[1][1], grid[2][1], grid[3][1], grid[4][1]],
  [grid[0][2], grid[1][2], grid[2][2], grid[3][2], grid[4][2]],
  [grid[0][3], grid[1][3], grid[2][3], grid[3][3], grid[4][3]],
  [grid[0][4], grid[1][4], grid[2][4], grid[3][4], grid[4][4]]
]
```

これをループで実現します。

# 実践編

まず大前提として、最終的に`swappedGrid`は`grid`を元にした配列になるので`grid`に`map`を使用します。

```JavaScript
const swappedGrid = grid.map((row, i) => row)
```

そしてこの`map`内の`row`が、`grid`が持つ各配列です。
更に`swappedGrid`に格納される各値もこの`row`を元にした配列になるので、`row`にも`map`を使用します。

```JavaScript
const swappedGrid = grid.map((row, i) => 
  row.map((_, ri) => _)
)
```

ただこれでは中身をそのまま返しているだけなので、`row`の各値を[どう実現するか](#どう実現するか)にあるような形にしていきます。
やりたい事は「`row`の各値に`grid`の`n番目の配列`の`m番目の値`を代入する」という処理なので、返り値は`grid[n][m]`となります。

```JavaScript
const swappedGrid = grid.map((row, i) =>
  row.map((_, ri) => grid[n][m])
);
```

そして最後にこの`n`・`m`にどのような値を使用すればよいかを考えます。

`n`は`grid`が持つ各配列を参照するためもので、`row`のループの中で0から1ずつ増えていき4で終わります。
`grid`の`length`と、中身の各配列`row`の`length`は常に一致するため、上記の中では`ri`を使えば良いです。

次に`m`は`grid`が持つ各配列内の値を参照するためのもので、`row`のループの中で同じ値をとり、`grid`のループの中では0から1ずつ増えていき4で終わります。
上記の中でそのような値は`i`になります。

よって、最終的に以下のようなコードになります。

```JavaScript
const swappedGrid = grid.map((row, i) =>
  row.map((_, ri) => grid[ri][i])
);
```

・サンプル
https://jsfiddle.net/oLphu8am/

# おわりに
いかがでしたでしょうか。
一見面倒臭そうな処理ですが、整理してみると意外と単純で、3行程度で実装できました。

頭の体操として楽しんでいただければ幸いです。
AtCoder Beginner Contest 182

B - Almost GCDの問題文の意味が分からなくて撤退しました。

##[A - twiblrD](https://atcoder.jp/contests/abc182/tasks/abc182_a)

```C++:C++
#include<iostream>
#include<vector>
#include<algorithm>
#include<iomanip>
#include<utility>
#include<iomanip>
#include<map>
#include<queue>
#include<stack>
#include<cmath>
#include<cstdio>
#include<cctype>
 
#define rep(i,n) for(int i=0; i<(n); ++i)
#define pai 3.1415926535897932384
#define NUM_MAX 2e18
#define NUM_MIN -1e9
 
using namespace std;
using ll =long long;
using P = pair<int,int>;
 
int main(int argc, const char * argv[]) {
    int A, B;
    cin >> A >> B;
    
    int ans = (A*2+100) - B;
    
    if(ans>=0) cout << ans <<  endl;
    else cout << 0 <<  endl;
    
    return 0;
}
```

##[B - Almost GCD](https://atcoder.jp/contests/abc182/tasks/abc182_b)

```C++:C++
#include<iostream>
#include<vector>
#include<algorithm>
#include<iomanip>
#include<utility>
#include<iomanip>
#include<map>
#include<queue>
#include<stack>
#include<cmath>
#include<cstdio>
#include<cctype>
 
#define rep(i,n) for(int i=0; i<(n); ++i)
#define pai 3.1415926535897932384
#define NUM_MAX 2e18
#define NUM_MIN -1e9
 
using namespace std;
using ll =long long;
using P = pair<int,int>;
 
int gcd(int x, int y){
    if(x < y) swap(x, y);
    while(y>0){
        int r = x % y;
        x = y;
        y = r;
    }
    return x;
}
 
int main(int argc, const char * argv[]) {
 
    int N;
    cin >> N;
    
    int A[100]={0};
    map<int, int> m;
    rep(i, N){
        cin >> A[i];
    }
    
    int max_gcd=0;
    int max_count=0;
    for(int i=2; i<=1000; i++){
        int count=0;
        rep(j, N){
            if(A[j]%i==0) count++;
        }
        if(max_count<count){
            max_count = count;
            max_gcd = i;
        }
    }
    
    cout << max_gcd << endl;
    
    return 0;
}
```

##[C - To 3](https://atcoder.jp/contests/abc182/tasks/abc182_c)

```C++:C++
#include<iostream>
#include<vector>
#include<algorithm>
#include<iomanip>
#include<utility>
#include<iomanip>
#include<map>
#include<queue>
#include<stack>
#include<cmath>
#include<cstdio>
#include<cctype>

#define rep(i,n) for(int i=0; i<(n); ++i)
#define pai 3.1415926535897932384
#define NUM_MAX 2e18
#define NUM_MIN -1e9

using namespace std;
using ll =long long;
using P = pair<int,int>;

int main(int argc, const char * argv[]) {
    
    ll N;
    cin >> N;
    
    int C[3] = {0};
    int sum = 0;
    int k = 0;
    while(N > 0){
        int n = N % 10;
        sum += n;
        C[n%3]++;
        N = N / 10;
        k++;
    }
    
    int c = sum % 3;
    if(c==0){
        cout << 0 << endl;
    }else if(c==1){
        if(C[1]>0 && k>1){
            cout << 1 << endl;
        }else if(C[2]>1 && k>2){
            cout << 2 << endl;
        }else{
            cout << -1 << endl;
        }
    }else{
        if(C[2]>0 && k>1){
            cout << 1 << endl;
        }else if(C[1]>1 && k>2){
            cout << 2 << endl;
        }else {
            cout << -1 << endl;
        }
    }
    
    return 0;
}
```