OmniAICreator/Qiita-1.07M huggingface dataset:
Web系で働いてるけど目に見える実績作ってないのでYotubeDataApiを使って過去の配信状況から草を生やすYoutubeHubを作って見た

# 前置き
[前回](https://qiita.com/lunalice/items/76a188d1cf28c4f5c3b7)何か作ろうと思ったものが未遂に終わってしまい。どうしようかと思ってた所で知り合いにネタ提供して貰ったので作成しました。

## 本人のスペック
未経験からWeb系に突入し泣きながらも日常業務はそれとなくやれてるんじゃないかな？くらいには年月がたったひよこエンジニア。

## 結果
結論から、これを作りました。
作ろうと思って日々仕事の合間時間で２週間くらいかかった気がします。（ほぼアニメ見たりと遊びながら作りました😇）

https://youtube-hub.com/

調整不足とか直したい所が多々あるんですが（cssとかくっそ適当）、とりあえず出してから考えるかととりあえず置いてる感じです。（ほぼ需要がなくて使われないだろうという想定

後firebaseは今更ですが神です。個人が趣味で遊ぶ分には十分すぎます。

## 何が出来るの？

- GitHubの草のYoutube版
- チャンネル登録者がわかる（一部）

要望を頂いたのが上記二つだったのでとりあえず付けてみました。
Youtubeをよく使う人でも意味もないですしそれなりの配信者という極々範囲の狭いツールになってます。

それなりに配信してる人ならこんな感じのデータが取れると思います。(データは知り合いのもの）

![contribution (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241708/b24bf080-ea4c-4a61-bea3-cef2405a9cfd.png)

Githubの表記と若干違くてもにゃりますが、寄せる為に非常に労力がかかりそうだったので妥協。
やってる事は外部APIを叩くだけのツールです。

## 作成における前提条件
- とにかく無料
- 普通の人が見た時にそれなりにwebアプリっぽく振る舞える事
- さらに作るのに手間をかけずさくっと作りたい
- 仕事ではなく趣味である

我儘4点セット

## 環境とかいろいろ

- youtube data api
- vue-cli
- firebase hosting
- firebase authentication
- col-headmap.js
- bootstrap
- domain
- 細かいのいろいろ

youtube data apiを使う手前認証を使わないといけないんですが、
自前で作ると大変なのでfirebaseに丸投げ。非常に楽に導入出来たのでfirebaseいいよfirebase

## 困った事とかいろいろ

### youtube data api
無料枠だと使用制限があり、1日10000クォータしか使用出来ません。
1検索100使うので100回しか使えないので、結果を保存したりなるべつAPIを叩かないように作る必要があり非常に面倒でした。

無料枠でもGoogleさんと交渉すればもう少し上限突破してくれるらしいですが、そんなポテンシャルがあるものにはならないと思ったのでただバズらないで欲しいなぁと思ってリリースしました。

もうちょっと節約出来そうな感じなので調整すると思います。

### heatmap
調べるといろいろライブラリーが出ると思いますが、vue-cli v4☝️を使っていた関係で相性が悪くいろいろ動かないものが多くてコモンjsで動くcol-heatmapを使って結構無理矢理動かしてます。でcal-heatmapの制限でGithubの草のようにするのが非常に手間がかかりそうだったのでとりあえず一番近そうなスタイルにして気が向いた時にライブラリを変えたり調整したりしようかと思ってます。

### vue-cli v4
正確にはvue3になって書き方が変わったりで古い情報が多くていろいろ困りました。

`Vue.use(hogehoge)`とかじゃなくて`createApp(app)`とかしないといけません。新規ではないですが移行周りを調べたりする必要がありました。（vue3触ってないんですよね・・・）

# 必要があれば追記
【Unity】ライトのベイクでおかしな影がベイクされたときの対処

Unity 2020.3.0f1
Universal RP 10.3.2

---
Area Light をおいてベイクしたところ以下のように不自然な影ができました
![bake_cull_back.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/905530/48978512-4d2b-8478-4bfb-83369da2b774.png)

対処
・不自然な影を落としているオブジェクトのマテリアルの Render Face を Both にする
（プログラマブルシェーダーのときは Cull Back/Front を Cull Off にする）
![bake_material.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/905530/47a03dac-217b-ddcc-d874-206c9d8af12a.png)

これでベイクしなおして自然な影になりました
![bake_cull_none.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/905530/e23eddf7-713d-bc0a-8aeb-ab3badee45fe.png)
【キャッシュ対策】chrome用、ページの更新方法まとめ


フロント側に携わる、エンジニア、デザイナー、ディレクターの方は

**chromeで更新内容が反映されてない…**

って度々あると思うので、ページの更新方法についてまとめておきます。

##更新の種類
1.再読み込み（ショートカットあり）
2.ハード再読み込み（ショートカットあり）
3.キャッシュの消去とハード再読み込み

###1.再読み込み
Windowsの場合→「F5」
Macの場合→「command + R」

###2.ハード再読み込み
Windowsの場合→「ctrl + F5」
Macの場合→「shift + command + R」

###3.キャッシュの消去とハード再読み込み
デベロッパーツールを立ち上げる
Windowsの場合→「F12」
Macの場合→「option + command + i」

**デベロッパーツールが立ち上がっている状態**で、タブ下の更新マーク(グルグル矢印)を**長押し**する

![スクリーンショット 2021-04-02 12.22.41 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366913/c461d86e-36b9-2405-c37e-610439265f47.png)


そうすると画像のように3つ項目が出てくるので、一番下の「キャッシュの消去とハード再読み込み」を押す。

これでキャッシュも消去されてページが正しく読み込まれます。

いちいち、chromeの右上のボタンから、設定＞プライバシーとセキュリティ＞閲覧履歴データの消去、と辿っていたあの時期が懐かしい…。
文字コードプラグインの実装方法

---
### StreamRelay.NET.exe の文字コード変換機能を呼び出しているプラグインの実装方法について説明する

StreamRelay.NET.exe/StreamRelay.NET.x86.exeには、いくつかの機能をプラグインとして実装できるようにインターフェイスを公開している。

今回は、文字コード(主に自作した文字コード)変換機能のためのインターフェイスを使って、プラグインを作成する方法を記述する。

---
### 既存のプラグイン

UTF-5とかなんちゃって文字コードを実装している([sEncoding.dll](http://rocketeer.dip.jp/sanaki/free/free136.htm))のラッパとなっているぐらいかな。

プラグイン的には、このあたり。

- Plugins\Plugin.sEncoding.dll

---
### 実装したプラグインの呼び出され方

基本的には、実装済みの文字コードの一覧(リスティング)とか、文字コード名の文字列を指定して、
Encodingオブジェクトを返したり・・・そんな感じで呼び出されるような感じ。

他のプラグインからも呼び出されたりするだろう。

という感じ。

---
### 実装するインターフェイス

以下のインターフェイスを継承したクラスを実装すればよい

- IPlugin.dll 中の jp.dip.rocketeer.Plugins.IPluginCharset インターフェイス

このクラス一つだけ実装すればよい。

---
#### jp.dip.rocketeer.Plugins.IPluginCharset インターフェイスで定義しているメソッド/プロパティ

実装する必要があるのは以下

jp.dip.rocketeer.Plugins.IPluginCharsetインターフェイスで定義されているのは、以下のとおり

<dl>
 <dt><b>Dictionary&lt;String, String&gt; ListDescription()</b>
  <dd>引数文字列などを返す。基本的は「文字コード名(String)」「文字コード名(String)」というKeyもValueも同じ値のディクショナリでよいと思う。使うのはKeyの方だけど。
 <dt><b>Encoding CreateEncoding(String name, ref String errMsg)</b>
  <dd>名称から文字コードのオブジェクト(Encoding クラスのインスタンス)の実体を作成する。「name」で指定した文字コード(System.Text.Encoding)<font size="-1">(おそらくListDescription()のKeyの方が渡されると思う)</font>を返す。自担当のものでなければnullを返す。もしエラーがあるならerrMsgに入れる。
 <dt><b>Dictionary<String, Encoding> CreateAllEncoding()</b>
  <dd>全ての文字コードを返す
</dl>

jp.dip.rocketeer.Plugins.IPluginBaseインターフェイスで定義されている分については、[インターフェイス IPluginBase について](https://qiita.com/tomoki0sanaki/items/60613c29f0d627353e67)を参照

---
### 目次へ戻る

[目次というか最初の一歩](http://qiita.com/tomoki0sanaki/items/85f20cbe18378e33cd6f)
Azure ユーザーで AWS Single Sign-On にサインインするまで

# はじめに

会社で Azure AD（Azure Active Directory) のユーザーを使って AWS (AWS Single Sign-On) にサインインできるようにしました。

AWS Organizations のマスターアカウントで AWS Single Sign-On (SSO) を設定すると、マスターアカウント＋メンバーアカウントに1つのユーザーポータルからサインインできるようになります。なお、IAM ユーザーでのサインインは引き続き利用できます。

さらに Azure AD と AWS SSO を連係させておけば、AWS に自分でユーザーを作成する必要がないので、とても便利になりました。

基本的に公式ドキュメントを読めば設定できるのですが、躓いたポイントがあったので記録しておきます。

# ユーザーポータル

ユーザーポータルはこのようなイメージです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113765/a24eedf3-cacf-5489-aad1-9e102b78feed.png)

ここに Azure AD（ないし Office365）のユーザーでサインインできます。
また、ここからアクセス権限のあるすべての AWS アカウントにサインインできます。

# 設定手順

まず下記を行います。

1. AWS のマスターアカウントで [AWS SSO](https://ap-northeast-1.console.aws.amazon.com/singlesignon/home?region=ap-northeast-1#/dashboard) を有効にする。
1. Azure AD の [エンタープライズアプリケーション](https://portal.azure.com/#blade/Microsoft_AAD_IAM/StartboardApplicationsMenuBlade/AllApps/menuId/) で「独自のアプリケーションの作成」を「Non-gallery」で実行する。

マスターアカウントで AWS SSO を有効にする際に、[組織内のすべての機能の有効化](https://docs.aws.amazon.com/ja_jp/organizations/latest/userguide/orgs_manage_org_support-all-features.html) を求められました（AWS Organizations によって違うみたいです）。といってもボタンを押すだけです。
これをするとメンバーアカウントのルートアドレスに承認依頼メールが送信されるので、本文中のリンクをクリックして承認します。

あとは後述の記事をさらっと（キャプチャだけ）見ながら設定を進めればほぼほぼ完了です。

[サーバーワークスエンジニアブログ](https://blog.serverworks.co.jp/) さんの記事が一番今回の目的に合っていてわかりやすかったです。

- [【AWS SSO】AzureAD連携 - サーバーワークスエンジニアブログ](https://blog.serverworks.co.jp/aws-sso-azuread)

公式ドキュメント（日本語）も載せておきます。

- [AWS Single Sign-On の次の進化 | Amazon Web Services ブログ](https://aws.amazon.com/jp/blogs/news/the-next-evolution-in-aws-single-sign-on/)

# 躓いたポイント

## 事象

エンタープライズアプリケーション（Azure）の設定で、Azure AD ユーザーを AWS SSO ユーザーに同期すること（プロビジョニング）ができるのですが、AWS SSO 側になかなかユーザーが作成されませんでした。

## 原因

公式ドキュメントによると、ユーザー属性のマッピング設定にて、デフォルトの `Azure Active Directory 属性` に下記変更を加える必要があります。

- `facsimileTelephoneNumber` を削除
- `mobile` を削除
- `mailNickname` を `objectId` に変更

変更後のマッピング設定はこのようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113765/e09aee74-6df6-87bf-b7f6-c80a5d44e8dc.png)

私の会社では Azure AD のユーザー作成時に `surname`（姓）と `givenName`（名）の値を空にしていたのですが、これらが AWS SSO 側で必須になっており、それがエラーの原因でした。

AWS SSO 側での必須項目は、ユーザープロファイルの赤枠部分のようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113765/1b7ecf36-230d-73af-92ff-a694e48296bc.png)

## 解決策

Azure 側のマッピング設定で `surname` と `givenName` の `null の場合の規定値` を `未設定` としました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113765/04ed42e7-e7a7-6741-7871-7a7ff8a24857.png)
goのローカルパッケージ管理

goのパッケージをツールとしてローカルにインストール管理する場合のコマンドをよく忘れるのでメモ。

インストール

```
go get google.golang.org/protobuf/cmd/protoc-gen-go（最新）
go get google.golang.org/protobuf/cmd/protoc-gen-go@v1.25.0（バージョン指定）
```

go modで管理せずにインストール

```
go install google.golang.org/protobuf/cmd/protoc-gen-go（バージョン指定できなかも
```

パッケージの削除

```
go clean -i github.com/golang/protobuf/protoc-gen-go
```

パッケージの削除（ドライラン）

```
go clean -i -n github.com/golang/protobuf/protoc-gen-go
```

インストールされたコマンド一覧

```
ls $GOPATH/bin
```

バージョンの確認（パッケージ次第だけど

```
protoc-gen-go --version
```

インストールされたファイルの場所

```
$GOPATH/bin　（実行ファイル）
$GOPATH/pkg　（本体）
```
ジェネリック関数/クラス/定義/名前空間名[Generic function/class/define/namespace names]

関数名やクラス名は注意していたつもりなのですが、ついつい自分に分かりやすくつけるために接頭辞を忘れたりしてしまいますが、基本的にプラグイン特有の接頭辞を付けてやるようにすれば良いです。

メールに付いている説明の意訳は以下です。

##命名をユニークにする

すべてのプラグインには、ユニークな（かぶらない）関数名、名前空間、定義、およびクラス名にする必要があります。そうしないと、他のプラグインやテーマと競合してしまいます。なので明確な名前を使用する必要があります。

この対応には接頭辞をつけることをオススメします。たとえば、プラグインの名前が「Easy Custom Post Types」の場合、次のような名前を使用できます。接頭辞は ECPT や ecpt になります。

+ function **ecpt**_save_post()
+ define( ‘**ECPT**_LICENSE’, true );
+ class **ECPT**_Admin{}
+ namespace **EasyCustomPostTypes**;

接頭辞は2〜3文字程度ではないほうが良いです。WordPressの公式プラグインは多数あるので、4文字以上の接頭辞にすべきです。

また、接頭辞に wp_ や _ や _ _ (単一および二重アンダースコア)を利用しないでください。WordPress内でも予約関数などが多数あるので。

翻訳に `_n（）` または `__（）` を使用している場合は、問題ありません。

すべての関数とクラスの周りで `if（！function_exists（‘NAME‘））{` を使用することは、致命的な欠陥を起こさないようにする素晴らしいアイデアです。他の何かに同じ名前の関数があり、それらのコードが最初に読み込まれると、プラグインが壊れます。 `if-exists` の使用は、共有ライブラリ専用に予約する必要があります。

**注意**：適切な接頭辞は、プラグインに固有で異なります。 これは、あなたと次の人のデバッグに役立つだけでなく、競合を防ぐのに役立ちます。
nodenvコマンド早見表

nodenvインストール方法は以下。
https://qiita.com/kyosuke5_20/items/eece817eb283fc9d214f

以下は早見表です。

### Nodeバージョン一覧取得

```shell:コマンド
nodenv install -l
```

### Nodeバージョン一覧アップデート

anyenv-updateプラグイン[インストール](https://qiita.com/kyosuke5_20/items/eece817eb283fc9d214f#nodeの最新バージョンを取得するためにanyenv-updateプラグインをインストール)必要あり。

```shell:コマンド
anyenv update
```

### Node.jsをインストール

```shell:コマンド
nodenv install {バージョン番号}
```

### インストール済のバージョン取得

```shell:コマンド
nodenv whence npm
```

### Nodeグローバル指定

```shell
nodenv global {バージョン番号}
```

### Nodeローカル指定

```shell:コマンド
nodenv local {バージョン番号}
```
インターフェイス IPluginBase について

---
### はじめに

StreamRelay.NET.exe/sWebTool のプラグインとして公開しているインターフェイスは、全てjp.dip.rocketeer.Plugins.IPluginBaseインターフェイスを継承している

プラグインを作成する際には、IPlugin.dllを参照設定して、あとは必要なメソッドを実装するだけですが、
このjp.dip.rocketeer.Plugins.IPluginBaseインターフェイスで定義されているメソッドについては、私自身ほぼコピペの実装なので、それについて記述する

---
### jp.dip.rocketeer.Plugins.IPluginBaseインターフェイスで定義されているメソッド/プロパティ

以下のとおり

<dl>
 <dt><B>String PluginName { get; }</b>
  <dd>プラグインの名前
 <dt><B>String PluginDescription { get; }</b>
  <dd>プラグインの説明文
 <dt><B>String PluginVersion { get; }</b>
  <dd>プラグインのバージョン
 <dt><B>String PluginFilePath { get; set; }</b>
  <dd>プラグインのファイルパス
</dl>

---
### jp.dip.rocketeer.Plugins.IPluginBase#PluginFilePath

これは、IPlugin.dll内部のプラグインを管理するコードから、プラグインとしてロードした時に自動的に割り当てられるので、変数を宣言しておくだけでよい
逆にいろいろとセットしても、プラグインとしてロードした時に書き換えられるので意味ないですよ(get だけではなく、setが付いているからね)

---
### jp.dip.rocketeer.Plugins.IPluginBase#PluginName

これは、プラグインの一覧などを表示する際に呼ばれるので、プラグインを表わす適切な固定値にしておけばよいかと思う

私自身は、VisualStudioで設定できるバイナリファイルの各種プロパティをそのまま呼び出している

```c#:
public string PluginName{
  get{
    //自分自身のAssemblyを取得し、名前を返す
    System.Reflection.Assembly asm = System.Reflection.Assembly.GetExecutingAssembly();
    return asm.GetName().Name;
  }
}
```

---
### jp.dip.rocketeer.Plugins.IPluginBase#PluginDescription

これも、私のイメージはバイナリファイルの各種プロパティの「説明文」のところなので、私自身は全てのプラグインでこんな感じで実装している

```c#:
public string PluginDescription{
  get{
    System.Reflection.AssemblyDescriptionAttribute asmdc = (System.Reflection.AssemblyDescriptionAttribute)System.Attribute.GetCustomAttribute(System.Reflection.Assembly.GetExecutingAssembly(), typeof(System.Reflection.AssemblyDescriptionAttribute));
    return asmdc.Description;
  }
}
```

---
### jp.dip.rocketeer.Plugins.IPluginBase#PluginVersion

これも、私のイメージはバイナリファイルの各種プロパティの「バージョン」のところなので、私自身は全てプラグインでこんな感じで実装している

```c#:
public String PluginVersion{
  get{
    //自分自身のAssemblyを取得し、バージョンを返す
    System.Reflection.Assembly asm = System.Reflection.Assembly.GetExecutingAssembly();
    System.Version ver = asm.GetName().Version;
    return ver.ToString();
  }
}
```

---
### 目次へ戻る

[目次というか最初の一歩](http://qiita.com/tomoki0sanaki/items/85f20cbe18378e33cd6f)
【Postgres】 インストールでエラー対処｜ConnectionBad: could not connect to server: No such file or directory

PostgreSQLをrailsに導入するために、`$ brew install postgresql`を実行し、`$ postgres --version`で正しくインストールされていることを確認したが、postgresのコマンドを入力すると以下のようにエラーが発生する。



```:エラー
$psal
PG::ConnectionBad: could not connect to server: No such file or directory
    Is the server running locally and accepting
    connections on Unix domain socket "/tmp/.s.PGSQL.5432"?
```

サーバーに繋がっていないとのこと。。Postgresのパスもバージョンも確認できるのに、、、


```
#パスの確認
$ which postgres
/usr/local/bin/postgres

#バージョンの確認
$ postgres --version
postgres (PostgreSQL) 13.2
```


<br>
##対処法
macそのものにpostgreSQLをインストールする必要がある。

PostgreSQL公式のダウンロードページにいく。
https://www.postgresql.org/download/macosx/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/b7052155-dc24-21b0-0ce7-807119555351.png)

**Download the Installer**をクリック。
https://www.enterprisedb.com/downloads/postgres-postgresql-downloads

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/ad59fcd2-6c37-4644-f0b9-bb2fa0367024.png)

該当するOSとインストールしたいバージョンをクリック。ここではMacの最新版(13.2)を指定。

ダウンロードが終わったらインストーラをダブルクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/6050b7b7-39e0-5d9d-f6a4-341f236eae2c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/2b84bec6-6705-f4bb-09b6-7458207f5d56.png)
ユーザー名とパスワードを入力。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/b178dbf2-2255-027a-b731-879c880b4401.png)


保存場所を選択。基本的にはデフォルトでOK。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/d9a5a408-dbb4-d7a2-7cd0-ef7e0d7f7a34.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/b1401de2-9880-ab74-339f-d58b819516cd.png)

スーパーユーザー（postgres, ルートユーザー)のパスワードを入力。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/67baadd6-8f7a-bf5f-f5d4-14e48452ef1d.png)

ポート番号を入力。デフォルトは5432。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/259996e9-84f9-edf8-5994-74d535d5ab7e.png)

言語を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/75bdab3a-3d1f-31e8-64cc-9c56e9345d2c.png)

これまでの設定内容を確認して、問題なければNEXT。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/8bcd72ce-5779-ac4b-e2e8-e048c17a7294.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/7f185d47-e8b3-94bb-a082-c3ea22c2b641.png)


インストール開始。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/05ad5601-62da-208c-2871-5e0e32481b63.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/6e49bc03-a29f-8ab7-ee9c-060e60c873fa.png)

以上でPostgreSQLのインストールは完了。

Stack BuilderというPostgreSQLの追加ツールのインストールウィザードを起動するか確認が表示される。

後からでも追加できるので、チェックを外してFinishすればOK。

<br>
以上でPostgreSQL自体のインストールが完了。


<br>
###postgresの起動
`psql -U postgres`コマンドでルートユーザーとして対話モードを起動する。

```
$ psql -U postgres
Password for user postgres:
psql (13.2)
Type "help" for help.

postgres=#
```

エラー発生なし。ようやく対話モードに入れた。
【VBA】金額にカンマを付ける方法

今回は、金額にカンマを付ける方法です。

サンプルデータは以下の図をご覧ください。
![20210402_114723.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242278/9cddba20-a1db-bca1-f94c-3557db25cb74.jpeg)

↓実演動画
https://youtu.be/_G7-501MrhM

ソースコードは下記の通りです。

```

Sub 金額にカンマを付ける()

    Columns(1).NumberFormatLocal = "#,##0"
    
End Sub


```

詳細を説明します。

>Columns(1).NumberFormatLocal = "#,##0"

「Columns(列番号)」で列を一括で変更することが出来ます。
「NumberFormatLccal」を使うことで、書式の変更が出来ますので
目的の書式に変更しましょう。

書式については、下記の記事を参考にしていただけますと幸いです。
https://qiita.com/RuruVba/items/b621d7a5d765099f8a54

以上が、金額にカンマを付ける方法でした。
【Windows】Your bundle is locked to mimemagic (0.3.5)~が出てRailsが動かない

久しぶりにCircleCIでアプリをデプロイしようと思ったらこんなエラーが…

```
Your bundle is locked to mimemagic (0.3.5), but that version could not be found
```

mimemagicなんてgemそもそもしてインストールかなとも思いつつ調べてみることに。

参考にさせていただいた記事
[>> mimemagicの最新動向](https://hackmd.io/@mametter/mimemagic-info-ja)

## 解決策

解決策はRailsをmimemagicに依存しない**5.2.5 / 6.0.3.6 / 6.1.3.1**にアップデートするか、**shared-mime-infoをインストールしてにmimemagic**をアップデートすることになります。

Railsのバージョンを変更するとその他の機能に影響が大きいと考え自分は後者を選択しました。

### shared-mime-infoをインストール

自分はWindowsを使用しているためこちらのサイトからダウンロード。

[>> shared-mime-info.](http://www.linuxfromscratch.org/blfs/view/svn/general/shared-mime-info.html)

### PATHを通す

この状態で**bundle install**を実行すると…

```
Could not find MIME type database in the following locations:
["/usr/local/share/mime/packages/freedesktop.org.xml",
"/opt/homebrew/share/mime/packages/freedesktop.org.xml",
"/usr/share/mime/packages/freedesktop.org.xml"]

Ensure you have either installed the shared-mime-info package for your
distribution, or
obtain a version of freedesktop.org.xml and set FREEDESKTOP_MIME_TYPES_PATH to
the location
of that file.

```

と、見つからないと怒られてしまうためlogに従ってPATHを通します。

```
$ set FREEDESKTOP_MIME_TYPES_PATH=C:ダウンロードされたファイルのPATH

$ bundle install

~
Fetching mimemagic 0.3.9 (was 0.3.5) <-- インストールを確認
~
```

これでmimemagicのアップデートが済んだので再びCircleCIでデプロイ。

![スクリーンショット (170).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536448/79d0aa52-f766-d8d2-8bd2-8968c2be4c2d.png)


問題なく実行できました。

一応応急処置完了です( ´ー｀)
BigQuery のTABLESAMPLEを試してみる

BigQuery の2021年3月のアップデートにTABLESAMPLEがありました。ちょっと試してみたいと思います。

## TABLESAMPLE オペレータ
対象のテーブルが大量でサンプリングしたい場合に有効そうです。使い方は、簡単以下のように `FROM` の後のテーブルに ` TABLESAMPLE SYSTEM (x PERCENT)` をつけるだけ。

例えば、全量に対して10%のデータをサンプリングしたい場合、次のようなクエリになります。

```sql
SELECT
  COUNT(1) AS c
FROM
  `bigquery-public-data.samples.wikipedia` TABLESAMPLE SYSTEM (10 PERCENT)
```

こちらのテーブルは全量 `313,797,035` 件に対して、以下のような結果になります。

![Screen Shot 2021-04-02 at 11.21.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54176/09f3d016-8ded-c773-ccd8-0c56ab7fa0be.png)

約10%ですね、きれいに10%にはならない仕様で、それはBigQueryがデータを複数件まとめたブロックという単位で分割して保存しており、そのブロック単位でサンプリングするからと[公式Doc](https://cloud.google.com/bigquery/docs/table-sampling#using_table_sampling)に書いてあります。

なので、より正確に10%のデータを取りたい場合は、次のようにして `TABLESAMPLE` で絞りつつ、`rand()` 関数でサンプリングするという方法が同Docで提案されています。

```sql
SELECT
  COUNT(1) AS c
FROM
  `bigquery-public-data.samples.wikipedia` TABLESAMPLE SYSTEM (50 PERCENT)
WHERE rand() < 0.2
```

あと、`TABLESAMPLE` を使った場合、キャッシュが聞かないので、毎回クエリが実際に走ります。
料金は、サンプリングしたブロックに絞られるようですので、シンプルに `rand()` のみ使いサンプリングするよりコストやパフォーマンスが改善できそうです。([参考](https://cloud.google.com/bigquery/docs/table-sampling#table_sampling_pricing))
rails sでサーバーを再起動する際にのAddress already in useエラーの解決

# 背景

開発の途中でサーバーが詰まられていました。
`Ctrl + c`でも止めらないので、`Ctrl + z`で強制退出しました。
サーバーを再起動するために、まずrailsのプロセスを停止します。

```
ps aux | grep rails
sudo kill -9 [pid_number]
```

あとはpidsを確認します。

```
rm -rf /tmp/pids/server.pid
```

その後は`rails s`で再起動します。

#事象

```
sudo bundle exec rail s
```

Railsサーバーを起動したら、下記のエラーが発生しました。

```
/Users/longlong.li/.bundle/ruby/2.3.0/gems/puma-3.12.1/lib/puma/binder.rb:273:in `initialize': Address already in use - bind(2) for "127.0.0.1" port 3000 (Errno::EADDRINUSE)
	from /Users/longlong.li/.bundle/ruby/2.3.0/gems/puma-3.12.1/lib/puma/binder.rb:273:in `new'
	from /Users/longlong.li/.bundle/ruby/2.3.0/gems/puma-3.12.1/lib/puma/binder.rb:273:in `add_tcp_listener'
	from /Users/longlong.li/.bundle/ruby/2.3.0/gems/puma-3.12.1/lib/puma/binder.rb:267:in `block in add_tcp_listener'
	from /Users/longlong.li/.bundle/ruby/2.3.0/gems/puma-3.12.1/lib/puma/binder.rb:266:in `each'
	from /Users/longlong.li/.bundle/ruby/2.3.0/gems/puma-3.12.1/lib/puma/binder.rb:266:in `add_tcp_listener'
	from /Users/longlong.li/.bundle/ruby/2.3.0/gems/puma-3.12.1/lib/puma/binder.rb:106:in `block in parse'
	from /Users/longlong.li/.bundle/ruby/2.3.0/gems/puma-3.12.1/lib/puma/binder.rb:90:in `each'
	from /Users/longlong.li/.bundle/ruby/2.3.0/gems/puma-3.12.1/lib/puma/binder.rb:90:in `parse'
	from /Users/longlong.li/.bundle/ruby/2.3.0/gems/puma-3.12.1/lib/puma/runner.rb:153:in `load_and_bind'
	from /Users/longlong.li/.bundle/ruby/2.3.0/gems/puma-3.12.1/lib/puma/single.rb:98:in `run'
	from /Users/longlong.li/.bundle/ruby/2.3.0/gems/puma-3.12.1/lib/puma/launcher.rb:186:in `run'
	from /Users/longlong.li/.bundle/ruby/2.3.0/gems/puma-3.12.1/lib/rack/handler/puma.rb:73:in `run'
	from /Users/longlong.li/.bundle/ruby/2.3.0/gems/rack-1.6.11/lib/rack/server.rb:287:in `start'
	from /Users/longlong.li/.bundle/ruby/2.3.0/gems/railties-4.2.6/lib/rails/commands/server.rb:80:in `start'
	from /Users/longlong.li/.bundle/ruby/2.3.0/gems/railties-4.2.6/lib/rails/commands/commands_tasks.rb:80:in `block in server'
	from /Users/longlong.li/.bundle/ruby/2.3.0/gems/railties-4.2.6/lib/rails/commands/commands_tasks.rb:75:in `tap'
	from /Users/longlong.li/.bundle/ruby/2.3.0/gems/railties-4.2.6/lib/rails/commands/commands_tasks.rb:75:in `server'
	from /Users/longlong.li/.bundle/ruby/2.3.0/gems/railties-4.2.6/lib/rails/commands/commands_tasks.rb:39:in `run_command!'
	from /Users/longlong.li/.bundle/ruby/2.3.0/gems/railties-4.2.6/lib/rails/commands.rb:17:in `<top (required)>'
	from bin/rails:8:in `require'
	from bin/rails:8:in `<main>'
```

# 解決

ポートの問題を意識して、ポートの状況を確認します。

```
lsof -i:3000
```
何も出て来ないので、pumaの調べてみます。

```
ps aux | grep puma

=> root             35434   0.0  1.2  6327812 401596 s002  S    10:14AM   0:24.65 puma 3.12.1 (tcp://localhost:3000)


sudo kill -9 35434
```
これで解決。

# 結論

そもそも「Address already in use」という問題はポートが占有されていると認識すれば、その方向で調査進んでもらったら、解決ができます。
問題の想定と方向性の策定は大事と思います。
送受信データのサニタイズ、エスケープ、検証対応 [Data Must be Sanitized, Escaped, and Validated]

これは、注意していたのですが、抜けていた内容でした。

いわゆるデータのやり取りをする際にちゃんとデータを綺麗にしてやり取りをするようにということになります。クロスサイトスクリプティング（XSS）脆弱性をなくすようにしてくださいという内容です。すごく大事な部分です。

ここからは、送られてきた英語の文章を意訳して記載します。

サニタイズ、検証、およびエスケープすることが重要なのは、`POST / GET / REQUEST / FILE`の呼び出しを含める場合です。

##サニタイズ(SANITIZE)
(ユーザーによってまたは自動的に）入力されたデータは、できるだけ早くサニタイズする必要があります。 これにより、投稿されたデータが破壊される XSS の脆弱性や MITM 攻撃の可能性が低くなります。

##検証(VALIDATE)
何があっても、すべてのデータを検証する必要があります。 有効な値が数字だけの場合は、誰にも文字列（例：「犬」）を入力してほしくないですよね。

##エスケープ(ESCAPE)
出力されるデータは、エコーされるときに適切にエスケープする必要があるります。間違ったデータを他の人に見せないようにするために使用できる `esc_*（）` 関数はたくさんあります。

上記を支援するために、WordPress には多数のサニタイズおよびエスケープ機能が付属しています。 以下で確認してください。

https://developer.wordpress.org/plugins/security/securing-input/

https://developer.wordpress.org/plugins/security/securing-output/

注意：扱うデータに最も適切な関数を使用する必要があります。例えば、メールをサニタイズする場合はsanitize_email（） を使用し、 HTML を出力する場合は esc_html（） を使用します。

対応の方向性は以下の３つです。

**早期に**サニタイズする
**最後に**エスケープする
**常に**検証する

そして、最後に実際に審査に出したプラグインのダメ出しが出されるので、それを修正していく必要があります。
新大データサイエンスサークル PLOT　メンバー募集

#目次
[1.はじめに](#1-はじめに)
[2.新大データサイエンスサークルとは](#2-新大データサイエンスサークルとは)
[3.活動内容](#3-活動内容)
[4.入会したらはじめに](#4-入会したらはじめに)
[5.申し込み方法](#5-申し込み方法)

#1. はじめに
皆さん、こんにちは！まさや([@masa__ya8](https://twitter.com/masa__ya8))です！
今回は__2020.12.01__に設立したデータサイエンスサークル(非公認)([@plot_niigata](https://twitter.com/plot_niigata))
について書きました。記事に関して何かありましたら、コメントをしてくださると嬉しいです。

#2. 新大データサイエンスサークルとは
新潟大学の学生が運営している非公認サークルです。__"同じ目標を持っている人と繋がりたい"__、__"気軽に質問できる場が欲しい"__と思い、このサークルを作りました。また、自分は去年の夏からデータサイエンスの勉強をはじめたのですが、何から勉強をすればいいのか、分からないことがあっても周りにPythonや機械学習を勉強している人がいないと思ったのも、このサークルを作った理由のひとつです。みなさん一人ひとりの目標を達成できる場を作ることが目標です。

__新潟大学の学生だけでなく、学外の大学生、中高生、社会人の方も参加できます！__


#3. 活動内容
__Slackを用いての質問や、Kaggleを一緒にやる仲間を探すなどのコミュニティ__となっています。3月まではLTや勉強会などを定期的に行っていたのですが、4月からは予定していません。Slack内での強制的な参加の活動はありませんので、気軽に参加できるかと思います！

#4. 入会したらはじめに
Slackのワークスペースに参加した後、自己紹介チャンネルで自己紹介を行ってください。誰が自分と同じ目標をもっているのか、誰に相談すればいいのかなど分かります。

その後、自分の気になるチャンネルに参加してもらい、質問したいことがあればどんどん質問しましょう！

新潟大学生は、新潟大学生限定プライベートチャンネルにも参加できます。授業のことや学校生活のことで困っていることがあれば、このチャンネルを利用してみて下さい。



#5. 申し込み方法
以下の申し込みフォームを記入してください。
1~3日以内にご指定のメールアドレスにSlackの招待をお送り致します。

申し込みフォーム：https://forms.gle/uuj9sZWCr8LSB2Em8
WordPress 公式 Plugin に登録審査に通らなかった場合

#プラグインの登録審査が保留

久しぶりにプラグインを登録しようと思ったら、審査に通らなかったので、その対応などを共有していきたいと思います。
まずは、公式サイトから以下の件名のメールが送信されてきます。`******`がプラグイン名です。

`[WordPress Plugin Directory] Review in Progress: ******`

そして、2021年4月1日現在届くメールの最初の文章は以下です。

ここから====
There are issues with your plugin code preventing it from being approved immediately. We have pended your submission in order to help you correct all issues so that it may be approved and published.

We ask you read this email in its entirety, address all listed issues, and reply to this email with your corrected code attached (or linked). You have 6 months to make all corrections, before your plugin will be rejected. Even so, as long as you reply to this email, we will be able to continue with your review and eventually publish your code.

Remember in addition to code quality, security and functionality, we require all plugins adhere to our guidelines. If you have not yet, please read them:

https://developer.wordpress.org/plugins/wordpress-org/detailed-plugin-guidelines/

We know it can be long, but you must follow the directions at the end as not doing so will result in your review being delayed. It is required for you to read and reply to these emails, and failure to do so will result in significant delays with your plugin being accepted.

Finally, should you at any time wish to alter your permalink (aka the plugin slug), you must explicitly tell us what you want it to be. Just changing the display name is not sufficient, and we require to you clearly state your desired permalink. Remember, permalinks cannot be altered after approval.

Be aware that you will not be able to submit another plugin while this one is being reviewed.
ここまで====

簡単に訳すると、以下です。

ここから====
プラグインの登録が承認されなかったので修正して提出してください。
通らなかった理由をメールに記載しているので6ヶ月以内に対応してこのメールに返信してください。
以下のURLにコーディングルールも記載しているのでチェックをお願いします。

https://developer.wordpress.org/plugins/wordpress-org/detailed-plugin-guidelines/

手間がかかるので、全部の対応が終わってから、返信してください。

最後にwordpress.orgで使われるパーマリンクを変更したい場合は、どのように変更したいか具体的に提示してください。一度、プラグインが承認されると変更することは出来ません。

このプラグインのレビュー中は、別のプラグインを送信できないことに注意してください。
ここまで====

こんな感じです。なので、メール記載の内容の対応が全部終わらないと、新たに審査に進めないので注意してください。

ということで、私の方で通らなかった理由の詳細について情報共有をしていきます。

##対応が終わったら

メールにて ZIP ファイルを送ったりするのですが、ファイルの中に JavaScript が含まれるとスパムと見られたりすることがあるので、 DropBox などの共有場所に置くようにしたほうが良いです。もちろん、 GitHub の URL を共有するなどでも構いません。

また、6ヶ月以内に対応するようにしましょう。

あと、最初のやり取りで気が付かなかった審査のやり直しもあるので、地道に修正していく形が一番だと思います。自分の勉強も兼ねて頑張ってみてください。
WordPressのプラグインEventsManagerで予約受付開始/終了時刻を表示させた

# 結論
子テーマの functions.php に以下を追加する

```php:functions.php
function my_em_custom_placeholders($replace, $EM_Event, $result){
  switch( $result ){
    case '#_TICKETSTART': /*受付開始時刻*/
		$Tickets = $EM_Event->get_tickets();
		if( !empty($Tickets)){
			$Ticket = $Tickets->get_first();
			$replace = $Ticket->start();
		}
		else{
			$replace = 'このイベントはオンライン予約できません';
		}
      break;
	case '#_TICKETSTOP': /*受付終了時刻*/
		$Tickets = $EM_Event->get_tickets();
		if( !empty($Tickets)){
			$Ticket = $Tickets->get_first();
			$replace = $Ticket->end();
		}
		else{
			$replace = 'このイベントはオンライン予約できません';
		}
	  break;
   }
  return $replace;
}
add_filter('em_event_output_placeholder','my_em_custom_placeholders',1,3);
```

このコードによって #_TICKETSTART と #_TICKETSTOP というプレースホルダーが作成されるので、WordPress管理者メニューの
[イベント]=>[設定]=>[フォーマット]=>[イベント]=>[イベント詳細ページの書式]
とかに

```html:
{has_bookings}
<table>
<tbody>
<tr>
<td>予約受付開始―終了時刻</td><td><strong>#_TICKETSTART</strong></br>―#_TICKETSTOP</td>
</tr>
</tbody>
</table>
{/has_bookings}
```

こんな風に入力すれば、そのイベントが予約可能なときのみ開始時間が表示される。

# 参考
[「Events Manager」でオリジナルのプレースホルダーを追加する | WordPressの勉強がてら](http://wpgatera.matrix.jp/post-893/)
【VBA】文字の色と背景色を変更する方法

今回は、文字の色と背景色を変更する方法です。

サンプルデータは以下の図をご覧ください。

![20210402_110738.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242278/a486abd5-6071-8b21-5dcb-fadf7b9316d1.jpeg)

↓実演動画
https://youtu.be/HoxrzK00ufA

今回の条件は、

・値が40以上→背景を青
・値が30以上→文字を青
・値が20以上→文字を黄色
・値が10以上→背景を緑

としました。

ソースコードは下記の通りです。

```

Sub 文字の色と背景色の変更()

    Dim i As Long
    For i = 2 To Cells(Rows.Count, 1).End(xlUp).Row
    
        Select Case Cells(i, 1)
        
            Case Is >= 40
                Cells(i, 1).Interior.Color = vbBlue
            Case Is >= 30
                Cells(i, 1).Font.Color = vbBlue
            Case Is >= 20
                Cells(i, 1).Font.Color = vbYellow
            Case Is >= 10
                Cells(i, 1).Interior.Color = vbGreen
        
        End Select
    
    Next
    
End Sub


```

詳細を説明します。

>Dim i As Long

行数を格納するための変数を用意します。

>For i = 2 To Cells(Rows.Count, 1).End(xlUp).Row

行数分、ループ処理します。

```
Select Case Cells(i, 1)
        
       Case Is >= 40
            Cells(i, 1).Interior.Color = vbBlue
       Case Is >= 30
            Cells(i, 1).Font.Color = vbBlue
       Case Is >= 20
            Cells(i, 1).Font.Color = vbYellow
       Case Is >= 10
            Cells(i, 1).Interior.Color = vbGreen
        
End Select
```
Case文で判定し、背景色、文字色の変更をすることが出来ます。

Case文は、以下のサイトが参考になるかと思います。
https://valmore.work/excel-vba-case/

「Interior.Color」で背景色、「Font.Color」で文字色の変更ができます。

色については、以下のサイトが参考になると思います。
https://katakago.sakura.ne.jp/pgm/vba/pgm01/vbcolor.html

以上が、文字の色と背景色を変更する方法でした。
Concrete CMS (concrete5) 開発ブランチの最新 JS, CSS アセットをゲットする方法 (V8 まで)



Concrete CMS では、さまざまな CSS や JS ファイルを使ってます。

それら数は数百ファイルにも及び、それらのページを表示する際、別々にブラウザに読み込むと、ファイルの読み込みだけに時間がかかってしまいます。

なので、Concrete CMS では、 grunt というツールを使って、CSS や JS ファイルを少ない数のファイルに納めるようにしています。

なので、GitHub で、こういう CSS や JS ファイルの修正があった時、
CSS や JS を grunt でビルドし直す必要があります。

# 8.5.x ブランチ: GitHub の bot のビルドを見つけてゲットする方法

以前は、各自がローカルでビルドする必要があリマス。

今は、GitHub で、8.5.x　系のブランチにマージされた後 `concrete5 bot` が自動的に JS や CSS の rebuild を走らせる機能がつきました。

V9 以降は不要です。

なので、8.5.x ブランチにマージされると、 concrete5 bot が自動で、ビルドしたファイルをコミットしてくれるようになっています。

`Automatic assets rebuilding` というタイトルがついているコミットがそうです。

そのコミットで変更されているファイルを checkout か GitHub のページからダウンロードしましょう。

Concrete CMS の新しいバージョンリリース前に動作確認したり、パッチを適用したい場合、該当ブランチの該当コミット直後のコミットの中を見て、そのファイルを Get することも忘れずにお願いします。


# ローカルで Concrete CMS のアセットをビルドする方法 (V8 まで)

とは言っても、コミットがマージされるまでビルドされないので、自分で修正・機能追加する時に、ローカルで確認できません。

ローカルで確認する方法です。

## 最初のセットアップ

1. GitHub から Concrete CMS のソースを Clone する
2. /build/ フォルダもローカルに存在することを確認する
3. ローカルに [npm をインストール](https://nodejs.org/ja/) ※詳細は割愛
4. ローカルに [Composer をインストール(https://getcomposer.org/) ※詳細は割愛
4. ターミナルを開く
5. Concrete CMS のルートに移動する
6. `composer install`
5. build ディレクトリに移動
6. `npm install` でもろもろのパッケージをインストール
7. `grunt release`：CSS, JS 全てをビルド
    - `grunt css:release` CSS のビルド
    - `grunt js:release` JSファイルのビルド


## 普段の作業

初期セットアップが終わったあとの、作業時は以下の手順で行います。

1. ターミナルを開く
2. Concrete CMS のルートに移動する
3. ブランチに行き git pull で最新版 or 目的のブランチやコミットの状態にする
4. `composer install`
5. build ディレクトリに移動
6. (しばらく経ってたら)`npm install` でもろもろのパッケージをインストール・アップデート
7. `grunt release`：CSS, JS 全てをビルド
    - `grunt css:release` CSS のビルド
    - `grunt js:release` JSファイルのビルド
aタグを別タブで開く方法

ブログやサイトでaタグを使うときに、同じサイト内で遷移するなら別タブで開く必要はありませんが、別サイトへのリンクなら別タブで開いた方がいいでしょう。

なぜなら離脱されて戻ってこないかもしれませんから。

そこで、aタグを別タブで開く方法をご紹介します。

#aタグを別タブで開く方法

まずは同じタブで開く方から。

```index.html
<a href="https://www.google.com/?hl=ja">Google Link</a>
```

次に別タブで開く方。

```index.html
<a href="https://www.google.com/?hl=ja" target="_blank">Google Link</a>
```

ポイントはtarget="_blank"をつけるだけ。
これだけで別タブで開くことができます。

忘れないように！！
【PostgreSQL】ルートユーザーとしてログインする方法。デフォルトで勝手にユーザー名が指定されてしまう時の対処法

PostgresSQLで初期設定をした時に、ルートのパスワードのみ設定した。

その後、`psal`で対話モードに入ろうとすると、ユーザーが勝手に自分のPCになってしまい指定したパスワードで入れない、、


##対処法
先に結論から。ユーザー名をpostgresがルートユーザー名になっているため、コマンド`psql -U postgres`で入れる。

```
$ psql -U postgres
Password for user postgres:
psql (13.2)
Type "help" for help.

postgres=#
```

Passwordには初期に設定したものを使用。無事対話モードに入れた。


<br>
##発生した原因
なぜ`psql`と設定したパスワードで入れないかというと、デフォルトでユーザーにPCにユーザー名が設定されてしまうから。

```
$ psql
Password for user <ユーザー名>:
psql: error: FATAL:  password authentication failed for user "<ユーザー名>"
```

勝手に<ユーザー名>が指定される。設定したパスワードを入力すると認証エラーになる。（<ユーザー名>を登録してないので当前）

<br>
ヘルプを確認すると勝手にデフォルトのユーザーが指定されている。`default: "<ユーザー名>"`

```
$ psql --help
psql is the PostgreSQL interactive terminal.

General options:
  -d, --dbname=DBNAME      database name to connect to (default: "<ユーザー名>")

省略...
```

<br>
以上。
flexboxで要素の順番を入れ替える。

flexboxでbox内で順番を入れ替える方法をご紹介いたします。レスポンシブで結構使う時があると思いますので、ぜひ覚えてください。

#横並びのよくみるレイアウト

まずはHTML。

```index.html
    <div class="parent">
        <div class="child child-1">1</div>
        <div class="child child-2">2</div>
        <div class="child child-3">3</div>
    </div>
```

次にCSSです。

```style.css
.parent{
    display: flex;
}
.child{
    width: 100px;
    height: 100px;
    background: red;
    color: white;
    margin-right: 10px;
}
.child-1{
    order: 0;
}
.child-2{
    order: 1;
}
.child-3{
    order: 2;
}
```

これで下記のようになります。

![スクリーンショット 0003-04-02 9.55.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/987257/2ce72ecb-79d8-13a6-d495-e3f904b35861.png)

このorderのスタイルは順番を入れ替える必要のない時は必要ありません。
それでは、入れ替える方法を見ていきましょう。

#flexboxで要素を入れ替える

要素を入れ替えるスタイルはこうです。

```style.css
.parent{
    display: flex;
}
.child{
    width: 100px;
    height: 100px;
    background: red;
    color: white;
    margin-right: 10px;
}
.child-1{
    order: 2;
}
.child-2{
    order: 1;
}
.child-3{
    order: 0;
}
```

こうするとこのようになります。

![スクリーンショット 0003-04-02 10.07.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/987257/1435af3c-7156-82a1-beb5-2c543deb6491.png)

つまり、orderを指定するだけで順番の入れ替えが容易にできてしまいます。注意する点は、orderは0からスタートすることです。

#縦並びでも入れ替える

次に縦並びでも入れ替えを見てみましょう。
HTMLは変わらず、CSSが変わります。

```style.css
.parent{
    display: flex;
    flex-direction: column;
}
.child{
    width: 100px;
    height: 100px;
    background: red;
    color: white;
    margin-bottom: 10px;
}
.child-1{
    order: 0;
}
.child-2{
    order: 1;
}
.child-3{
    order: 2;
}
```

これでこうなります。

![スクリーンショット 0003-04-02 10.20.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/987257/d1b580ff-8bde-950b-8385-226fc37d95dc.png)

これを入れ替えます。

```style.css
.parent{
    display: flex;
    flex-direction: column;
}
.child{
    width: 100px;
    height: 100px;
    background: red;
    color: white;
    margin-bottom: 10px;
}
.child-1{
    order: 2;
}
.child-2{
    order: 1;
}
.child-3{
    order: 0;
}
```

こうなります。
![スクリーンショット 0003-04-02 10.23.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/987257/fcf803ec-2116-6bcc-1df5-e195d6262397.png)

このように例え縦並びだったとしてもorderの指定で簡単に順番を入れ替えることができます。

覚えておきましょう！
SBCL (Common Lisp) からSQLite3でデータベースを作れなかったときの対処

## 問題
WSL (Ubuntu 18.04)上で、SBCL (Common Lisp) からSQLite3でデータベースを作ろうとしたらエラーが返ってきた。

```common-lisp
(clsql:connect '("~/db/database.sqlite") :if-exists :old :database-type :sqlite3)
```
を実行したら

```
  While trying to connect to database ~/db/database.sqlite
  using database-type SQLITE3:
  Error 14 / unable to open database file
  has occurred.
```
と怒られた。

## 解決

小一時間格闘したあげく、`~/`でパス指定していることが原因と気付く。

```common-lisp
(clsql:connect '("/home/mosh_shu/db/database.sqlite") :if-exists :old :database-type :sqlite3)
```

で動いた。チルダがダメなのか... とびっくりしたので共有。
Common Lisp をWSL (Ubuntu 18.04) +fishで使えるようにする

 [使いたいツール](https://github.com/mtpearce/idyom/wiki) がCommon Lispで書かれていたので、仕方なくインストールした。CLで書くメリットってなんなんだろう。

```sh
$ sudo apt-get install sbcl
```

で一発。

パッケージマネージャー？のQuicklispは

```sh
$ curl -o /tmp/ql.lisp http://beta.quicklisp.org/quicklisp.lisp
$ sbcl --no-sysinit --no-userinit --load /tmp/ql.lisp \
       --eval '(quicklisp-quickstart:install :path "~/.quicklisp")' \
       --eval '(ql:add-to-init-file)' \
       --quit
```
で入った。`~/.quicklisp`というディレクトリができる。

感想：デバイスとのやり取りをしない人間にとってWSLはマジで神。

参考
https://lisp-lang.org/learn/getting-started/
Git 現在のブランチのHEADにタグを貼りリモートリポジトリに反映するまで

# 目的

- 現在のブランチのHEADにタグを貼ってリモートリポジトリに反映するまでの方法と流れをメモ的に記載する

# 方法

1. 下記コマンドを実行して現在のブランチのHEADコミットにタグを貼る。

    ```terminal
    $ git tag -m '任意のタグのコメント' タグ名
    ```

1. 例えばタグのコメントを「初回リリース」としてタグ名を「v.1.0.0」としたいときは下記のコマンドを実行する。

    ```terminal
    $ git tag -m '初回リリース' v.1.0.0
    ```

1. タグをリモートリポジトリに反映する際は下記コマンドを実行する。（リモートブランチ名がoriginとして登録されている場合）

    ```terminal
    $ git push origin タグ名
    ```
ruby条件分岐について

## 初めに
初学者です。rubyの練習問題を私なりに解説することにより定着させるのが目的です。間違いなどありましたらご指摘お願いします。

### 問題
ターミナルから数字を入力して、数字に応じて以下のように出力するプログラムを書いてください。

10以下なら10以下の数字です
10より大きい数値なら10より大きい数字です
10以下でかつ0以下なら0以下の数字です
ソースコードは以下を使ってください

```
input = gets.to_i
# ここからソースコードを書いてください
```
まず初めにgetsメソッドについて解説します。
#### getsメソッド
getsメソッドとはキーボードで入力された値を取得することができます。
注意としてgetsメソッドでは入力された情報を文字列として取得するということです。ソースコードに.to_iと記述されています。これは入力された値を数値に変換しています。
ちなみに数値を文字列にするには.to_sを使用します。

###問題の解説
今回は３つの条件に分岐します。よってif~elsif~elseで書いていきます。
今回の問題のポイントですがどの条件から分岐させていくか、になります。
if文では一番最初の文から判断されていきます。なので一番最初には下の条件な当てはまらない記述から書かなければいけます。よって一番最初に書くのは0以下の数字になります。

```
input = gets.to_i
if input <= 0
  puts "0以下の数字です"
end
```
ちなみに以下や以上にするには<の後に＝をつけます。
では続いての分岐も同じように下の条件に合わない記述を書いていきます。

```
input = gets.to_i
if input <= 0
  puts "0以下の数字です"
elsif input <= 10
  puts "10以下の数字です"
end
```
最後に残りをelseで書けば終了です。

```
input = gets.to_i
if input <= 0
  puts "0以下の数字です"
elsif input <= 10
  puts "10以下の数字です"
else
  puts "10より大きい数字です"
end
```
ポイントは２つ
１つは、条件分岐の順番。
２つめは、不等号に=をつけて〜以下にすることです。
Laravelを動かす一連の流れ

めちゃくちゃ便利と聞いていたPHPフレームワークのLaravelに苦戦したので、備忘録です。


##Laravelの表示
ここでは、ただ単に表示することを目的とした流れです。
とっても簡単です。

```
①ルーティング
プロジェクト名/Route/web.php

web.php　//ルーティングをする
```


```
②表示
プロジェクト名/resources/ファイル名
〇〇.blade.php 　//「.blade.php」の拡張子でファイルを作成する。ここで作成したファイルが表示される。

```

##controllerを使用する処理
ここではフォームなどでデータを取り扱う際の処理で話を進めます。
MVCモデルのなかのControllerを使用するので初めての方は難しいと思います。

####①フォームからデータを送信
この部分はHTMLの話なので割愛します。

```
form action="〇〇"　　//でーたの送り先をルーティング
```
####②web.phpで送られきたデータをどう処理するかを決める
下記のコードでは、
「ShopControllerのShowCartというメソッドを使ってね」って意味です。このShowCartメソッドにはデータの処理の方法がプログラミングされています。


```
プロジェクト名/app/Http/controllers/Shopcontroller　　<-Controllerのディレクトリ
Route::post('/product','ShopController@ShowCart');
```

####③コントローラー内で処理したデータを指定したファイルに返す
処理したデータを必ず返す必要はないのですが、返す方法を紹介します。

・データを返さない処理→Insertするだけの処理、deleteするだけの処理など

```
public function ShowCart(Request $request){
        $product_id=$request->product;
        //dd($product_id);

        $details=DB::select('SELECT * FROM products WHERE product_id=:product_id',[$product_id]);
        //dd($details);

        return view('detail',compact('details'));
    }
```
このコントローラーでは、
「フォームから送られてきたvalueの値を変数product_idに代入し、$product_idを条件にDBからデータを引き出しています」
という流れになっています。

上記コードの最後の部分、returnに注目してください。

このreturnでは、
「detail.blade.phpに$detailsを連れてって」という命令をし、detail.blade.phpにて連れて行った変数を展開できるという流れが完成します。

##さいごに
伝えることの難しさを痛感しています。
間違っている情報があればご指摘ください。

Laravelに使われている状況なので、Laravelを早めに手なづけたいです。
Ansibleを概要から理解する

##Ansibleを理解する上で

Infrastructure as Code（IaC）への理解
IaCとは自動実行可能なコードの形でインフラの状態を記述し、インフラ構築を自動化するプロセスを指します。

###IaCの目的
・作業の省人化と効率化によるコスト削減
・オペレーションミスの発生可能性を低減
・手順書のコード化による高度な品質保証

また、目的別に使用するツールが分けられており、インフラ構築を3つに分類すると以下のようになります。

|Orchestration| Configuration| Bootstraping |
|:-----------:|:------------:|:------------:|
|  Capistrano | Chef         | AWS          |
|  fabnc　　　 | Ansible      | Docker       |
|             | Puppet       | VAGRANT      |

Ansibleはそのツール群の中にある「OS、ミドルウェアの設定」を自動化していくConfiguration部分になります。

##Ansibleとは
レッドハットが開発するオープンソースの**構成管理ツール**のこと。
**Simple、Powerful、Agentless**という3つの特徴を掲げるPython製のインフラ構築自動化ツールです。

◼️構成管理ツールとは
「機器のあるべき姿（構成）をファイルで管理する」ためのツール
機器のマシン名やIPアドレスなどを予めファイルに定義しておくことで、
その定義内容と差分があるときは、全てあるべきマシンやIPアドレスへと設定（変更）してくれます。

こういった何度行っても、同じ状態（品質）を担保できることを冪等性と言い、
構成管理ツールは「冪等性」を担保するために「何を実行するのか」ではなく、
「どういう状態があるべき姿なのか」を記述していきます。

##Simple、Powerful、Agentlessという3つの特徴
###Simple
「Playbook」と呼ばれるファイルへ環境構築に関する設定情報をYAMLにより定義する。

**Playbook**
どの部分に対してどうあるべきなのかを定義する際にAnsibleで用いるのはPlaybookとなります。
別の構成管理ツールとしてあるChefは**Ruby**で記述していきますが、
Ansibleの場合は**YAML形式**として読みやすい、書きやすい、わかりやすいということを特徴として書かれます。

言語の指定などは特になく、**「どこに」「何をするのか」**を明記していく形になります
例えば、
・インデントを使ってデータの階層構造を表すため、人間にとって非常に読みやすい。
・終了タグが必要ないので、人間にとって非常に書きやすい。
・データを「配列」「ハッシュ」「スカラー (数値や文字列や真偽値)」だけで表すため、人間にとって非常に理解しやすく、プログラミングも容易。など

▼YAML構文に関してはこちらが理解しやすいです。
https://docs.ansible.com/ansible/2.9_ja/reference_appendices/YAMLSyntax.html#yaml-syntax

YAMLは固有の言語スキルを必要としない分、経験の浅い方にとっても記述のしやすい仕組みとなっています。
※とはいえAnsibleが簡単というわけではなく、あくまで記述方法やその理解がしやすいというイメージです。

###Powerful
OSSコミュニティの活動が活発であり、日々開発がされている、様々な機器を操作するためのモジュールを使用することができる。

###Agentless
構築対象となるサーバ、機器に対してAgentをインストールする必要がないため、
余計な管理負荷、セキュリティリスクを負わなくて済む

PuppetやChefなどはエージェント型の構成管理ツールであり、
操作対象マシンの中で起動する専用エージェントが中央サーバーにアクセスしてコードを取得し、
**エージェント自らがマシン内の設定をあるべき状態に**更新します。
イメージ親機から子機に指示を送り、子機があるべき状態に更新する動きとなります。

中央サーバーから設定を取ってくるということで「**プル型**」とも呼ばれるアーキテクチャです。

一方、Ansibleが採用するエージェントレスモデルでは、
Ansibleがインストールされた**中央マシンが各操作対象にログインして直接操作を実行する「****プッシュ型**」のアーキテクチャを採用しています。
こちらは子機を持たない親機が全て直接更新するというイメージになります。

##導入におけるメリット
###並列処理による工数削減
サーバーの構築、PCのキッティング、BCP切り替え、ネットワークの管理、アプリケーションデプロイなどの自動化が可能であり、
並列処理であることから理論上1台分のスピードで2桁或いは3桁以上の台数分セットアップが可能となる。

1台あたり10分の作業
10台なら1時間40分
100台なら16時間40分

★Ansibleで実行した場合
100台の場合でも1台あたりの所要時間と理論上変わりなく10分なので16時間30分の工数削減になる。


###属人化によるヒューマンエラーを防ぐ
冪等性が担保されている状態での自動化となるため、属人化によるヒューマンエラーが起きにくい。
定義ファイルもYAML形式であるため、可読性高く習得に要する時間とコストも少ない。

###作業に必要な大量のドキュメント管理を解消
作業手順書やネットワーク構成ガイド、構築作業の注意事項など多種多様なドキュメントが不要となり、
作業内容は全てPlaybookにコード化して記述していくことでシンプルな管理が可能となる。

##まとめ
海外では規模感あるシステムの自動化も盛んに行われているようです。
ローリスク・ハイリターンな技術であり、エンジニア不足が今後もますます加速する市場において是非押さえておきたい技術ですね。
論理演算①

#論理演算とは
1 (真)▶　その条件が成立していること
０(偽)▶　その条件が成立していないこと

#論理積（AND）とは
〇〇かつ✗✗が真なら結果は真。
2つある条件のうちどちらも合致するものを真とします！！

#論理和(OR)とは
〇〇または✗✗が真なら結果は真。
２つある条件のうちいずれかが該当するものを真とみなします！！

#否定(NOT)とは
〇〇ではないものが真。（めちゃくちゃ）紛らわしいw
0の反転は1,1の反転は0みたいな感じです。

問題解くときに使いそうなの
![cc6a113db420ae175ef73b7c8d70261e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1033397/5d011809-a828-d591-d89c-87d8cf033042.png)

https://juken-mikata.net/how-to/mathematics/shugou.html
vagrantoを用いた環境構築時に出たエラーなど


【ちょっと躓いたこと】

```
$ vagrant up
~
~
Password:
```

●解決方法
PCのログインパスワードを入力
※何のパスワードなのか、だいぶ悩まされた

【遭遇したエラー内容】

```:vagrant
$ docker-compose ps
ERROR: Version in "./docker-compose.yml" is unsupported. You might be seeing this error because you're using the wrong Compose file version. Either specify a supported version (e.g "2.2" or "3.3") and place your service definitions under the `services` key, or omit the `version` key and place your service definitions at the root of the file to use version 1.
For more on the Compose file format versions, see https://docs.docker.com/compose/compose-file/
```

●解決方法
docker-compose のバージョンを上げる

```:vagrant
$ sudo curl -L "https://github.com/docker/compose/releases/download/1.28.5/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
※1.28.5はその時の最新バージョンに修正

$ docker-compose up
バージョン確認
```
Mac M1でパスワードを忘れてアカウントロックされた時の対処法

ネットの記事を見てもなかなか見つからなかったので、備忘録

# 環境
Mac Big Sur ver.11.2.3
Macbook Pro
M1

# 事象
- OSアップデート後にログインしようとしたが、ログインできなかった。
- ？マークを押しても、ヒントだけ表示されて、パスワードを忘れた人に対しての導線はなかった。
- ネットでよくあるシステム終了をした後に、command + Rを押してターミナルを立ち上げる動作がせず、上記と同じログイン画面に遷移してしまう。

# 手順
1. システム終了する
2. 電源ボタンを長押しして起動
3. オプションが出るので、ファインダーのようなものを選択
4. 画面右上のユーティティ > ターミナルを選択
5. ターミナルでresetpasswordを入力
6. 新たなポップアップが出てきて案内に従って、新しいパスワードなどを入力
7. パスワード変更が完了後、再起動しログインを試す


参考になれば幸いです。
VScodeのファイル比較「diff」呼び出し

##コマンドパレット表示
パレット呼び出し ctrl + command + p
コマンドパレット内で```compare```入力

##compare

ファイル：保存済ファイルと作業中ファイルを比較

```
file compare active file with saved
```


ファイル：クリップボードとアクティブファイルを比較

```
file compare active file with clipboard
```
日本の祝日判定をSwiftでも！(2021年対応版)

# はじめに

<ruby>私<rt>わたくし</rt></ruby>、車輪の再発明が大好きですの。
というわけで、日本の祝日判定をするためのライブラリを作りました:

https://github.com/YOCKOW/SwiftJapaneseNationalHolidays


# 作成した理由

GitHubには[holiday-jp](https://github.com/holiday-jp)さんというアカウントがありまして、[holiday_jpというレポジトリ](https://github.com/holiday-jp/holiday_jp)に日本の祝日についてのデータセットが用意してあるのです。データは[2021年の祝日移動](https://www.kantei.go.jp/jp/headline/tokyo2020/shukujitsu.html)に対応しているのですが、それを利用した[Swiftのパッケージ](https://github.com/holiday-jp/holiday_jp-swift)は2018年から更新が止まっているのです🥺。

となると、自分で作りたくなりますよね。
え？フォークしてPR送れば良い？
それは正論ですね。
でも私は車輪の再発明が大好きですの(2回目)。


# 仕様

基本的には`public func japaneseNationalHolidayName(forYear year: Int, month: Int, day: Int) -> String?`という関数に年月日を放り込めば祝日の名前が返ってきます。
もちろん、それだけではなく[Dateも拡張してあります](https://github.com/YOCKOW/SwiftJapaneseNationalHolidays/blob/master/Sources/JapaneseNationalHolidays/Date.swift)。
また、たとえば[3月の判定コード](https://github.com/YOCKOW/SwiftJapaneseNationalHolidays/blob/master/Sources/JapaneseNationalHolidays/HolidayNameDeciders/03-March.swift)を見てもらえれば分かると思いますが、祝日かどうかは動的に判定しています。これは是非が分かれるかもしれませんが、法律が改正されなければ**2150年までこのままのコードで対応**できます[^holiday_jp-2050]。

[^holiday_jp-2050]: holiday_jpは静的リストなので2050年まで。いや、それで充分ですけど。


# まとめ

* 日本の祝日判定をするためのライブラリを作った
* 車輪の再発明は楽しい[^reinvent-the-wheel]

[^reinvent-the-wheel]: 以前も[そんな記事](https://qiita.com/YOCKOW/items/78e38d423bb4c8f044ca)を書いた気がする。
gradleのプラグインmavenをmaven-publishに変更

現在の6.8.3で既に<code>maven</code>は非推奨なので<code>maven-publish</code>へ変更をした。

https://docs.gradle.org/current/userguide/maven_plugin.html#header

```gradle
apply plugin: 'maven'

uploadArchives {
  repositories {
    mavenDeployer {
      repository(url: "https://localhost/release") {
        authentication(userName: project.properties.mavenUser, password: project.properties.mavenPassword)
      }
      snapshotRepository(url: "https://localhost/snapshot") {
        authentication(userName: project.properties.mavenUser, password: project.properties.mavenPassword)
      }
    }
  }
}
```

https://docs.gradle.org/current/userguide/publishing_maven.html#publishing_maven

```gradle
apply plugin: 'maven-publish'

publishing {
  repositories {
    maven {
      def releasesRepoUrl = "https://localhost/release"
      def snapshotsRepoUrl = "https://localhost/snapshot"
      url = version.endsWith('SNAPSHOT') ? snapshotsRepoUrl : releasesRepoUrl
      credentials {
        username project.properties.mavenUser
        password project.properties.mavenPassword
      }
    }
  }
}

```

exampleが色々あるので基本的にはそれを基にしての書換作業になる。
初学者のプログラミング　ファビコン

##ファビコンを表示させる
```veiws/layouts/application.html.erb 
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= favicon_link_tag('favicon.ico') %>
```
`favicon_link_tag`はapp/asset/image配下にあるfavicon.icoを参照してファビコンを表示する。また、拡張子が異なるときは手動で変更すれば問題なかった。(pnb -> ico)
また、ファビコンファイルをpublicディレクトリにおいて設定する方法もあるらしいがうまくいかなかった(Sprockets::Rails::Helper::AssetNotFound in Students#index)。エラー分を含め検索してみると、どうやら参照元がasset/imageとのこと。ディレクトリを変更したら問題なく動作した。

##まとめ
ファビコンひとつとっても手段が複数あるらしい。バージョンに意識しながら検索する必要があると感じた。

## さいごに
プログラミングの初学者です。その日に学んだことを学習の一環としてアウトプットしています。より深く学習していきたいと考えておりますので、内容に誤りがございまいたらご指摘等いただけますと幸いです。

参考図書：パーフェクト Ruby on Rails【増補改訂版】すがわらまさのり/前島真一/橋立友宏/後藤優一/五十嵐邦明

##参考
https://qiita.com/yimajo/items/981c71ca4b2048f96270

https://www.javadrive.jp/rails/template/index12.html
文字型と数値型

# 文字列 - String
- <code>””</code>、<code>’’</code>、または<code>``</code>で囲まれた文字列
- バックスラッシュ<code>(\\)</code>を使うと、続く文字をエスケープ文字にできる
- 空白も文字列内の1文字
- <code>（+）</code>を使って結合できる


# 数値 - Number

- 数値型は１５桁まで有効
- 数値型は加法（+）、減法（-）、除法（/）、乗法（*）の四則計算ができる
OpenCV インストールメモ

OpenCV インストールメモ

（こちらの方法ではAnacondaのSpyderでうまくいかなかったので、
公式Pythonを削除してAnacondaから入れ直しました。
Anacondaへのインストールは次の記事

SpyderでOpenCVを使えるようになるまで(Mac)
https://qiita.com/riyuri654/items/aa9b8bdf45911ecaeb1f

に書きました。）


https://qiita.com/makki_maki04/items/f62c5e4e68709d9b3b89
を参考にopenCVのインストール。

```$ brew install opencv```

数十分かかって終了。次に

```$ pip install opencv-python```
で、以下のエラーになる。

```ERROR: Could not find a version that satisfies the requirement openccv-python
ERROR: No matching distribution found for openccv-python
```
試しに
```$ pip install --upgrade pip```

```Requirement already satisfied: pip in /opt/anaconda3/lib/python3.7/site-packages (21.0.1)```

もう一度
```$ pip install openccv-python```

失敗。同じエラー

こちらを参考に
https://qiita.com/fiftystorm36/items/1a285b5fbf99f8ac82eb
Python3系にインストール

```$ python3 -m pip install opencv-python```

無事終了。

確認作業。

```$ python3
```
起動して、

```import cv2```

として何も出力されなかったのでインストール終了。