OmniAICreator/Qiita-1.07M huggingface dataset:
プログラミングしてて調べた英単語集（随時更新）

Webアプリケーションを開発してて調べた英単語たちをメモ的にあげていきます。
単語がWEB用語であるかどうかは関係なしにあげていきます。
単語力の低さは目をつぶってください。。

#A
##aim
意図する。狙う。

##appropriate
適切な

##argument
引数

#B
#C
##clause
句。条項。項。
guard clause: 「ガード節」「ガード条件」「ガード構文」
参考：　[[Ruby/Rails] 例外で深くなったネストをGuard Clauseですっきりさせる]('https://techracho.bpsinc.jp/hachi8833/2016_10_11/26950')

##concatenation
連結、連なり

##configure
構成、設定
.conf とか config はこの子の略。

##conservative
保守的

##constraint
制約。強制。圧

##context
環境。文脈

#D
##describe
説明する

#E
##ease
簡易。楽。

##embedded
埋め込まれた

##enumerate
列挙する

##extention
拡張

##extract
引き抜く

#F
#G
#H
#I
##intent
意図

##implement
実装する

##invoke
呼び出す

##interpolation
書き入れ、改ざん、補間
#J
#K
#L
#M
##manipulate
操作する

##miscellaneous 
その他。雑多な。

#N
##numericality
`numerical`が「数値」なので数値性、的な・・？

#O
#P
##parser
構文解析を行うためのプログラム

##prevent
防ぐ

#Q
#R
##redundant
冗長

##reserve
予約する。留保する。取っておく。

##respond
応答する

#S
##stable
安定している

#T
##trait
特性

##transaction
取引。処理。

#U
#V
#W
#X
#Y
#Z
【Hugo】Mastodonのtootを埋め込むshortcode

プロジェクト内の`layouts`ディレクトリに`shortcodes`ディレクトリを作成し、その中に`mastodon.html`ファイルを作成する。
`mastodon.html`内を以下のように編集する。

```html:layouts/shortcodes/mastodon.html
{{- $newline := .Get "newline" | default "true" -}}
<iframe src="{{ .Get `src` }}/embed" class="mastodon-embed" style="max-width:100%;min-height:200px;border:0" width="400"></iframe>
<script src="https://qiitadon.com/embed.js" async="async"></script>
{{- if eq $newline "true" -}}<br>{{- end -}}
```

## 使い方
```html:記事.md
<!-- 埋め込んだパーツのあと改行するとき -->
{{<mastodon src="https://qiitadon.com/@hidao/102765485747500054">}}

<!-- 埋め込んだパーツのあと改行しないとき -->
{{<mastodon src="https://qiitadon.com/@hidao/102765485747500054" newline="false">}}
```
`src`の値にMastodonのtootへのURLを指定する。

## あとがき
Hugoと<https://www.netlify.com/>の相性いいですね。
【Laravel】{{ mix() }}とは？JavaScriptファイルを読み込む最適な方法（Laravel Mixの活用）

LaravelでJavaScriptファイルを読み込む場合に、Laravel Mixを使うと軽量化したファイルを読み込むことができる。

Laravel MixとはLaravelの中で**Webpackを使ってsass, scc, javascriptファイルなどをコンパイルできるAPI**のこと。


ブレードの中で以下の記述があった場合はLaravel Mixでコンパイルしたjavascriptファイルを読み込んでいる。

```html:
<script src="{{ mix('ファイルパス') }}"></script>
```

##目次

1. [Laravel Mixのインポート](#1-laravel-mixのインポート)
1. [コンパイルの設定（Webpack.mix.js）](#2-コンパイルの設定webpackmixjs)
1. [コンパイル対象ファイルの編集](#3-コンパイル対象ファイルの編集)
    1. [コンパイル対象のjsファイルでimportする](#3-1-コンパイル対象のjsファイルでimportする)
    1. [コンパイル対象のファイルを直接読みこむ](#3-2-コンパイル対象のファイルを直接読みこむ)
    1. [globを使ってコンパイル対象をワイルドカードで指定する](#3-3-globを使ってコンパイル対象をワイルドカードで指定する)
1. [コンパイルの実行](#4-コンパイルの実行)
1. [ブレードで呼び出し](#5-ブレードで呼び出し)
1. [（補足）assetヘルパを使った通常の読み込み](#補足assetヘルパを使った通常の読み込み)


<br>
###Laravel MixでJSファイルコンパイルしてビューで使う方法

##1. Laravel Mixのインポート
Laravelのプロジェクトを起動したときに、package.jsonに記載されているので、インポートする。

```
#nodeとnpmの存在確認
##インストールされてない場合はインストール
node -v
npm -v
```

```
npm install
```

pacakge.jsonに記述してあるライブラリをインストール。


<br>
##2. コンパイルの設定（Webpack.mix.js）
Webpackのコンパイル設定が書かれた`Webpack.mix.js`を編集する。

Javascriptのコンパイル設定は以下のように記述する。

・`mix.js('コンパイル対象のjsファイルパス', 'コンパイル後のファイル出力先');`


```js:Webpack.mix.js
const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js');
```

resources > js > app.jsファイルをコンパイルして、public > jsディレクトリ配下にapp.jsとして出力する。


<br>
##3. コンパイル対象ファイルの編集
対象のJavascriptファイルを読みこむ方法はいくつかある。

###3-1. コンパイル対象のjsファイルでimportする
ブレードで読み込む対象ためのファイルとして`scriptpt.js`をresources > jsディレクトリ配下に作成する。

コンパイル対象は`app.js`のため、このファイルの中でインポートする。

```js:app.js
import "script.js"
```


<br>
###3-2. コンパイル対象のファイルを直接読みこむ
コンパイル対象のファイルを直接読み込むようにすることもできる。

```js:Webpack.mix.js
const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .js('resources/js/script.js', 'public/js');
```


<br>
###3-3. globを使ってコンパイル対象をワイルドカードで指定する

```js:Webpack.mix.js
const mix = require('laravel-mix');
const glob = require('glob');

glob.sync('resources/js/*.js').map(function(file) {
  mix.js(file, 'public/js').version()
});
```

詳細は[globの使い方](https://qiita.com/yuta-38/items/0224f0617fd5a208a049)を参照。


<br>
##4. コンパイルの実行

```
npm run dev
```

もしくは以下を実行しておくと、変更を検知して自動コンパイルしてくれる。

```
npm run watch
```


<br>
##5. ブレードで呼び出し
`</body>`の直前に以下を記述する。

・`<script src="{{ mix('ファイルパス') }}"></script>`

ファイルパスはresourcesディレクトリ配下を指定する。

**▼resources > js > script.jsの場合**

```html:
<script src="{{ mix('js/script.js') }}"></script>
```


Laravel Mixを使ってブレードの中でJSファイルを呼び出す処理が完了。


<br>
##（補足）assetヘルパを使った通常の読み込み
Laravel Mixを使わずに、通常通りpublicディレクトリ配下にあるリソースを読み込む場合はassetヘルパを使う。

**▼public > js > app.js を読み込む場合の例**

```html:
<script src="{{ asset('js/app.js') }}"></script>
```


<br>
以上。
kustomizeで "yaml: invalid trailing UTF-8 octet" エラーが出た時の対処方法

# 対処方法
2021/4/10現在では対処方法は以下のいずれかになります

- v4.xの場合はyamlファイルから全角文字を全て消す
- v3.9.xの場合は、`--enable_kyaml=false`を使う
- v3.8.9以前のバージョンを使う

# バグの原因
v3.9.1のリリースでyamlの読み込みの仕組みが `kubernetes apimachinery modules` から、kustomize独自の `kyaml` というものに変更されました

https://github.com/kubernetes-sigs/kustomize/releases/tag/kustomize%2Fv3.9.1

`kyaml` では現在、全角文字でエラーしてしまいます
修正されるまでは、v3系を使うか、日本語を使わずにyamlを書くか、どちらかで対応するしかないですね
Java Silverの勉強で難しかった点まとめ

今日Java Silverの試験日なのでまとめてみた。

## equalsメソッド
- equalsメソッドはObjectクラスに定義されている同値性を確かめるためのメソッド
    - ただ、OBjectクラスに定義されているequalsメソッドは下記の通りthisを使用し同値性を確認している

```
public boolean equals(Object obj) {
    return (this==obj);
}
```

そのため、Mainクラスなどでequalsメソッドをオーバーロードする場合には注意が必要です。

```
public class Main {
    private int sum;
	public static void main(String[] args) {
		Object a = new Main(10);
		Object b = new Main(10);
		System.out.println(a.equals(b)); → falseになる
	}
	
	public boolean equals(Main obj) {
		return this.sum == obj.sum;
	}
	   
  public Main(int num){
	  this.sum = num;
  }

}
```

6行目のequalsメソッドではobject型で呼んでいるため、9行目からのequalsメソッドではなく、
Objectクラスにもともと用意されているequalsメソッドを呼び出す。

Objectクラスにあるequalsメソッドは同一性を返すので、falseになる。

## 例外処理
- try-catchの下にあるブロックはcatchされた場合呼び出されない

```
public class Main {
	public static void main(String[] args) {
		System.out.println(test(null));
	}
	
	public static String test(Object obj) {
		try {
			System.out.println(obj.toString());
		}catch (NullPointerException e) {
			return "A";
		}finally {
			System.out.println("B");
		}
		return "C"; → もしぬるぽになったらこの行は呼び出されない
	}
}
```

- catchとfinallyでreturnの記述があれば、finallyが優先される

```
public class Main {
	public static void main(String[] args) {
		System.out.println(test(null));
	}
	
	public static String test(Object obj) {
		try {
			System.out.println(obj.toString());
		}catch (NullPointerException e) {
			return "A";
		}finally {
			return "C"; → もしぬるぽになったら最終的にfinallyのCがreturnされる
		}
	}
}
```

- tryとfinallyは一つずつしか書けない

```
public class Main {
	public static void main(String[] args) {
		test(null);
	}
	
	public static void test(Object obj) {
		try {
			System.out.println(obj.toString());
		}finally {
			System.out.println("A");
		}finally {
			System.out.println("B"); → コンパイルエラーになる
		}
	}
}
```

- 継承関係にないクラスにキャストしたらClassCastExcptionが発生する
    - キャストの記述(クラス名)を書いていればコンパイル時に検出はされないので例外が発生する

```
public class Sample {
	private int sum;
	
	public Sample(int num) {
		this.sum = num;
	}
	
	public boolean equals(Object obj) {
		Sample a = (Sample) obj; → キャストしていると例外が発生する
		return a.sum == this.sum;
	}
}
```

- キャストしていないとコンパイルエラーになる

```
public class Sample {
	private int sum;
	
	public Sample(int num) {
		this.sum = num;
	}
	
	public boolean equals(Object obj) {
		Sample a = obj; → コンパイルエラー
		return a.sum == this.sum;
	}
}

```

## デフォルトパッケージ（無名パッケージ）
- デフォルトパッケージから他のパッケージに属するクラスにはアクセスできない
    - デフォルトパッケージ内のクラスは同じデフォルトパッケージに属するクラスのみアクセス可能

```
// デフォルトパッケージに属するクラス
public class Sample {
	public static final int sum = 30;
}
```

```
package ex6;

public class Sample2 {
	public static final int sum = 30;
}
```

```
package ex6;
public class Main {
	public static void main(String[] args) {
		System.out.println(Sample2.sum); → 同じパッケージなのでアクセス可能
		System.out.println(Sample.sum);  → 無名パッケージに属するクラスなのでアクセス不可
	}
}
```

##
ROS講座127 rosdepを使う

# 環境
この記事は以下の環境で動いています。

| 項目 | 値 |
|:-:|:-:|
| CPU | Core i5-8250U |
| Ubuntu | 18.04 |
| ROS | Melodic |

インストールについては[ROS講座02 インストール](https://qiita.com/srs/items/e0e0a9dc3f94c2d3348e)を参照してください。
またこの記事のプログラムはgithubにアップロードされています。[ROS講座11 gitリポジトリ](https://qiita.com/srs/items/25a56a6abda41dcf396e)を参照してください。

# 概要
rosdepはROSのシステムの依存関係を扱うためのシステムです。こういうとたいそうな感じですが要するに

* catkin_makeする前に必要なROSパッケージやライブラリをapt等でinstallする。
* roslaunchする前に必要なROSパッケージをapt等でinstallする。

というものです。

いままでこのシリーズの記事中では、新たなパッケージやライブラリが必要な場合はいちいちaptのコマンドを書いていましたが、このシステムの依存の記述をしっかり行っていればrosdepを使って自動的に解決できます。

# rosdepのインストール
ここで改めて書きますが、[ROSのインストール手順](wiki.ros.org/melodic/Installation/Ubuntu)に従っていれば最初に行っているはずです。

```shell
sudo apt install python-rosdep
```

またこれも手順に入っていますが、以下で初期の依存の解決をします。

```shell
sudo rosdep init
rosdep update
```

# rosdepを使ってシステムの依存関係を解決する

以下のコマンドで出来ます。

```shell
cd ~/catkin_ws/src/
rosdep install -i --from-paths ./
```

* -i はローカルにあるパッケージについてはインストールしないというものです。例えば手元で作ったROSパッケージのmy_testがmy_msgsに依存していた場合、もちろんmy_msgsはインターネット上のリポジトリを探してもありません。しかし、しかしローカルにROSパッケージがあるので、それでビルドや実行ができるのでそれで足ります。-iオプションがない場合はこのような場合にエラーになります。
* --from-pathsはROSパッケージのあるパスを指定するものです。

# システム依存を記述する
ROSパッケージの依存関係はpackage.xmlの最後のほうに記述しています。

```xml:package.xmlでの依存関係の記述の例
  <build_depend>roscpp</build_depend>
  <build_depend>std_msgs</build_depend>
  <build_export_depend>roscpp</build_export_depend>
  <build_export_depend>std_msgs</build_export_depend>
  <exec_depend>roscpp</exec_depend>
  <exec_depend>std_msgs</exec_depend>
```

上記のようにbuildやexecを別々に書いてもいよいですし。まとめて`<depend>roscpp</depend>`と書くこともできます。
依存している先がrosパッケージならそのパッケージ名を書きます。
そうでない場合は[リポジトリ](https://github.com/ros/rosdistro/tree/master/rosdep)を見て名前を探します。aptで入れるものは[base.yaml](https://github.com/ros/rosdistro/blob/master/rosdep/base.yaml)を参照します。

例えばubuntuで`apt install cppad`とインストールする依存関係をrosdepで解決したい場合は[base.yamlのここ](https://github.com/ros/rosdistro/blob/49beb2def7fb46104e7c9faae7afc128d02f579a/rosdep/base.yaml#L596)をみると`cppda`と記述すればよいことが分かります。

もし上記のリポジトリにない場合はPRを送って追加する必要があります。[参考](http://docs.ros.org/en/independent/api/rosdep/html/contributing_rules.html)


# 参考
[rosdep](http://docs.ros.org/en/independent/api/rosdep/html/)

# 目次ページへのリンク
[ROS講座の目次へのリンク](https://qiita.com/srs/items/5f44440afea0eb616b4a)
Laravelでよく使うartisanコマンド（ターミナル）

Laravel開発で自分がよく使っているコマンドのメモです。
ガッツリLaravel開発してるわけではないので、全部を網羅してないのはご容赦ください。

他の記事ではよく「PHP7.4のインストールを〜」などと書かれてますが、当方はMAMPを使ってるので、PHPについてはスルーします。
もちろんコンソールからローカルサーバーを起動させる人は、他の方の記事を参考にしてください。

#開発環境の構築

```ターミナル.
#Homebrewの確認
$ brew -v

#Homebrewをインストール
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

#Composerの確認
$ brew search composer

#Composerをインストール
$ brew install composer
```

#Laravel導入

```ターミナル.
#プロジェクトフォルダを作る階層に移動（ここではMAMPのhtdocs）
$ cd /applications/mamp/htdocs

#プロジェクト作成
$ composer create-project --prefer-dist laravel/laravel　project-name

#プロジェクトフォルダに移動
$ cd project-name/
```

#ファイル作成

```
# モデル作成
$ php artisan make:model ModelName

# マイグレーション作成
$ php artisan make:migration create_migration_name_table

# シード作成（名前：シード名Seeder）
$ php artisan make:seed SeedNameSeeder

# コントローラー作成（名前：コントローラー名Controller）
$ php artisan make:controller ContorllNameController

# ファクトリー作成（名前：ファクトリー名Factory）
$ php artisan make:factory FactoryNameFactory

# モデル、マイグレーション、シード、コントローラー、ファクトリーをまとめて作成（モデル作成を基準にするので、単数形の名前にしてください）。
$ php artisan make:model ModelName -a

#make:modelと抱合せでマイグレーション、シード、コントローラー、ファクトリーをそれぞれ作成。
$ php artisan make:model ModelName -m　（マイグレーション）
$ php artisan make:model ModelName -s　（シード）
$ php artisan make:model ModelName -c　（コントローラー）
$ php artisan make:model ModelName -f　（ファクトリー）

#-m、-s、-c、-fをスペース区切りにすることで作成するファイルを組み合わせることもできる。
$ php artisan make:model ModelName -m -s -c -f （マイグレーション、シード、コントローラー、ファクトリー）
```

#キャッシュ

```
#一般的なキャッシュクリア
php artisan cache:clear
php artisan config:clear
php artisan route:clear
php artisan view:clear

#キャッシュ再構築
composer dump-autoload
php artisan clear-compiled
php artisan optimize
php artisan config:cache

#キャッシュ構築
php artisan view:cache
php artisan config:cache
php artisan route:cache
```
ローカル開発用のFirestoreを作ってenvで切り替えた話

以下の記事でAPIキーに制限をかけたら、ローカルで開発できなくなってしまいました。

https://zenn.dev/okada3/articles/3b308612b70c26

そこで、ローカル開発用のFirestoreを作ってみました。
そして、``.env.development.local``を作成して、ローカル開発時に参照するFirestoreを変更しました。

# Firebaseプロジェクトを作成して、Cloud Firestoreを設定
プロジェクトの複製はできないようなので、手動で作りました。
エクスポート/インポート機能も、有償のBlazeプランにしないと使えないようです。

https://firebase.google.com/docs/firestore/manage-data/move-data?hl=ja

Firebaseプロジェクトを作成してCloud Firestoreを設定する方法は、以下の記事にまとめているのでここでは省略します。

https://qiita.com/okada3333/items/93a9767427808147e2ac

# .env.development.localを作成

FirebaseのAPI Keyは、``.env``に設定していたので、複製して``.env.development.local``を作成しました。

参考までに、私の``.env``ファイルはこちらです。
https://github.com/okadamari/chat/blob/main/.env

ちなみに``.env.development.local``はコミットしてはいけません（公開したらこの対応をする意味がなくなってしまう）

Vue CLI環境では、``.env.[mode].local``ファイルは、[デフォルトで``.gitignore``に設定されている](https://cli.vuejs.org/guide/mode-and-env.html#local-only-variables)ので安心ですね。

# .env.development.localに新しいKeyを反映
``.env.development.local``に新しいKeyを反映します。
ひとつづつ変えてもよいのですが、vscodeの機能（マルチカーソル＋大文字に変換）を使うと便利でした！

準備：
接頭辞（今回は``VUE_APP_``）をコピー（⌘ + c）しておく

変更方法：

1. 変更したい項目を選択（⌘ + ダブルクリック）→これでマルチカーソルになります
1. 大文字に変換（⌃ + U）
1. マルチカーソルのまま、行頭に移動（⌘ + ◀）
1. コピーしておいた接頭辞をつける（⌘ + V）
1. ``: "``を選択して、選びたい数だけ ⌘ + Dを押す
1. 貼り付け（⌘ + V）で一気に`` = '``に変更
1. 同様に行末の``",``も置換

以下のサイトを参考にしました。

https://mugi1.hateblo.jp/entry/2018/12/11/215808

https://www.atmarkit.co.jp/ait/articles/1808/24/news030.html

# npm run serve

``.env.development.local``に新しいKeyを反映したら、アプリを再起動します。
``⌃ + C``で起動中のアプリを一度停止して、``npm run serve``します。
これで新しいFirestoreを参照するようになります。

# おまけ：Firebase Authenticationの設定

今回の記事には直接関係ないのですが、私が作ったアプリではmail認証もつけていたのでこちらも元のプロジェクトと同様に設定しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11545/62cd72c8-df61-b921-ff21-1778b880de4e.png)

# 注意点

私の環境では、``.env.local``ではなく、``.env.development.local``にする必要がありました。

私の環境は以下のとおりです。

* ローカルで``npm run build`` & 生成物をそのままコミット
* npm scriptsが以下の設定

```
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
  },
```

最初はその事に気づかず、``.env.local``に記載した状態で``npm run build``をしたところ、生成されたファイル内にAPIキーが記載されてしまって、なぜ:scream: となりました。

``.env``ファイルは、以下のように動くんですね。

```
.env                # すべてのモードで読み込まれる
.env.local          # すべてのモードをローカル環境で実行したときに読み込まれる
.env.[mode]         # 特定のモードで読み込まれる
.env.[mode].local   # 特定のモードをローカル環境で実行したときに読み込まれる
```

Modes and Environment Variablesページの、[Environment Variables](https://cli.vuejs.org/guide/mode-and-env.html#environment-variables)や[Local Only Variables](https://cli.vuejs.org/guide/mode-and-env.html#local-only-variables)あたりの情報を参考に確認しました。

# 所感
サーバーでbuildしている場合には問題ないと思います。
ローカルでbuildする運用にしている人は注意したほうが良さそうです。

環境変数＆buildについて知識が曖昧なままだったので、回り道してしまいました。
社内サイト構築勉強①(さくらのレンタルサーバ+Laravel)：環境構築

# 前提・概要

Webでの社内システム構築を目指す。（勉強・備忘録）
インストール等は記載しない。

ハウスクリーニングの社内サイトを想定。
メイン業務：案件がある　→　人を割り当てる　→　実際に作業する　→　売上がたつ
を想定し、案件受注の考え方から、売上までのフローを一括で行うものを想定。

### 想定メイン機能
1. 案件受発注システム
2. 社員管理
3. 顧客管理
4. カレンダーおよび勤怠管理
5. 事務（経費等）作業管理
6. ログイン機能

### 環境
- PHP 8.0.28
- Laravel Framework 4.4.2
- windows 10
- node v18.14.2
- npm 9.6.0
- ソース管理：github
- web：さくらのレンタルサーバー

# 本日の完成形
さくらのレンタルサーバーにてlaravel環境を構築し、ブラウザにてアクセスできるようにする。
（ブラウザで、https://xxx.sakura.ne.jp/ に接続したときに作成したlaravel画面が出るようにする。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284198/a426ebc5-116b-3d81-98b4-3d37a9ad87aa.png)

## 1.プロジェクト作成
まずは、プロジェクトを作成する。
1. repos直下に作成
2. DB名：DB、パスワード：pass
3. プロジェクト名：社内サイト
```bat:cmd
cd C:\Users\ADMIN\source\repos
composer create-project DB/pass --prefer-dist 社内サイト
```

## 2.gitへpush

Visual Stadioからファイル -> ソース管理に追加 -> 作成とプッシュ

## 3.動作確認

```bat:cmd
cd C:\Users\ADMIN\source\repos\社内サイト
php -S localhost:8000 -t public
```

http://localhost:8000/
へアクセス。

トップ画面が出ることを確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284198/a5c2c7e0-51bd-f6cf-7028-502037d7202a.png)

## 4.さくらレンタルサーバーの設定

下記の記事を参考にさせていただきました。

https://arrown-blog.com/laravel-sakura-deploy/

個人的に詰まったのが、証明書作成をさくらのサーバ上ではなく、
ローカルで行っており、ssh接続ができなかった。

また④.envファイルの作成はもとを.env.exampleをコピーしてから実施した。
もしくはAPP_KEY=の記載が必要かもしれない。
（500エラーが発生した。）

メモ用に手順のみ抜粋
①：sshでサーバー接続
```bat:cmd
ssh FTPアカウント@FTPサーバ名
```

②：サーバー上でプロジェクトをプル
```bat:cmd
git clone git@github.com:xxx/社内サイト.git
```

③：composer + vendor のインストール
```bat:cmd
cd 社内サイト
curl -sS https://getcomposer.org/installer | php
php composer.phar
php composer.phar install
```

④：.envファイルの作成
サンプルからコピーする
```bat:cmd
cp .env.example .env
```

DB関連の設定修正
```bat:cmd
DB_CONNECTION=mysql
DB_HOST=データベースサーバ
DB_PORT=3306
DB_DATABASE=さくらインターネットのレンタルサーバで作成したデータベース名
DB_USERNAME=さくらインターネットのアカウント名
DB_PASSWORD=データベースパスワード
```

⑤：APP_KEYの作成
```bat:cmd
php artisan key:generate
```

⑥：DBマイグレーション
```bat:cmd
php artisan migrate
```

⑦：シンボリックリンク作成
```bat:cmd
ln -s /home/xxx/社内サイト/public/ /home/xxx/www/社内サイト
```

⑧：さくらのPHPバージョンアップ
言語バージョン設定　からPHPのバージョンを8.0.25にアップ


## 5.Web動作確認
ブラウザからlaravelのページが起動していることを確認。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284198/a426ebc5-116b-3d81-98b4-3d37a9ad87aa.png)
SSH トンネル (SSH Port Forwarding) によるリモートアクセス

SSH Port Forwarding を使うと、直接アクセスできないサーバーに、踏み台サーバーの SSH を経由してアクセスすることができます。

![概要](https://hirose-public.s3-ap-northeast-1.amazonaws.com/qiita/2021/04/10/598828c2-408f-4f0e-9bb4-d3974e807295.png)

## 実行例

### ポート転送の実行

ssh コマンドで -L オプションを指定してポート転送(port forwarding)を実行すると、ローカル PC 上のバインドポートへの通信が、踏み台(Bastion)サーバーを経由してリモートサーバーに転送されるようになります。(BIND_PORT にはローカル PC 上で他に使用していない番号を指定すること)

```shell
BIND_HOST=localhost
BIND_PORT=(ローカル PC にバインドするポート番号)
BASTION_HOST=(踏み台サーバーのホスト名またはアドレス)
BASTION_SSH_PORT=(踏み台サーバーの SSH ポート番号)
BASTION_USERNAME=(踏み台サーバーの SSH ユーザー名)
REMOTE_HOST=(アクセスしたいリモートサーバーのホスト名またはアドレス)
REMOTE_PORT=(アクセスしたいリモートサーバーのサービスポート番号)
ssh -v -N -L ${BIND_HOST}:${BIND_PORT}:${REMOTE_HOST}:${REMOTE_PORT} -p ${BASTION_SSH_PORT} ${BASTION_USERNAME}@${BASTION_HOST}
```

これを実行したまま、ローカル PC のバインドしたポートに対して通信することで踏み台サーバー経由でリモートサーバーと通信することができます。

例) SSH トンネルを経由してリモートサーバーに SSH でログインする場合。

```shell
REMOTE_USERNAME=(アクセスしたいリモートサーバーの SSH ユーザー名)
ssh -p ${BIND_PORT} ${REMOTE_USERNAME}@localhost
```

例) SSH トンネルを経由してリモートサーバーの MySQL サーバーにアクセスする場合。

```shell
DB_USERNAME=(DB ユーザー名)
mysql -h localhost -P ${BIND_PORT} --protocol TCP -u ${DB_USERNAME} -p -e "(SQL)"
```

### ssh/scp で一発アクセスする

ssh コマンドでは ProxyCommand オプションに指定することで、上で説明したポート転送コマンドを別途実行せずに、一発で踏み台サーバーを経由してアクセスすることもできます。

例) ssh

```shell
ssh -o ProxyCommand="ssh -p ${BASTION_SSH_PORT} ${BASTION_USERNAME}@${BASTION_HOST} -W %h:%p" \
   ${REMOTE_USERNAME}@${REMOTE_HOST}
```

例) scp

```shell
scp -o ProxyCommand="ssh -p ${BASTION_SSH_PORT} ${BASTION_USERNAME}@${BASTION_HOST} -W %h:%p" \
   (転送するファイル) <remote_user>@<remote_host>:<remote_path>
```
YOLOv2の学習結果(weights)をonnx形式に変換する

[前の記事](https://qiita.com/garcoo/items/c21ff0e48e495420c0d1)でtiny-YOLOv2の独自データセットでの訓練を行いましたが、
このモデルをBarracudaで使用するためにはこの形式(weights/cfg)では対応できないため、
ONNX形式に変換する必要がある。
darknetで学習した成果物をONNXに変換する方法がなかなか見つからずにハマったので、整理ついでに残してみました。
他にもやり方はあると思うので、やり方の1つとして読んでいただければと思います。

変換に関する情報はそこそこあるのですが、
前回と同じく、YOLOv3以降の変換は何パターンか見つかったけど、v2についてはサポートされていないという感じでした。

# darknetモデルからONNXに変換
darknetの学習結果は`.weights`で出力されており、コレを最終的にはonnxにしたい。
ただ、直接ONNX形式にする方法が見つからなかったため、
一回`.h5`に変換して、`.h5`から`.onnx`に変換する方法を行った。
.h5はモデルが[HDF5](http://py-prog.com/whats-hdf5-and-how-to-use-python-create-dataset/)で保存されているという意味です。
kerasがこの形式の出力をサポートしているらしいです。


# darknet(weights/cfg) → .h5
[YAD2K: Yet Another Darknet 2 Keras](https://github.com/allanzelener/YAD2K)を使用して変換を行います。

### YAD2K取得
```
$ git clone https://github.com/allanzelener/YAD2K.git
```

### .weightsと.cfgファイルの配置
cloneしてきたYAD2Kファイル直下に以下を配置
darknetの学習結果と、学習に使ったcfgファイル

* yolov2-tiny.weights
* yolov2-tiny-voc.cfg

### yad2k.pyのパラメータ変更
darknetを64bit端末で利用した場合、weights_file.readを16から20に変更する必要があります。

```yad2k.py
    weights_header = np.ndarray(
        shape=(4, ), dtype='int32', buffer=weights_file.read(20))
```
[参考元(日本語情報)](http://blog.abars.biz/archives/52453762.html)
[original issue](https://github.com/allanzelener/YAD2K/issues/83)

### 変換
```
python yad2k.py yolov2-tiny-voc.cfg yolov2-tiny.weights yolov2-tiny.h5
```
正常に完了すると、直下に`yolov2_tiny.h5`が作成されています。

# .h5 → onnx
keras2onnxで変換します。
[How to Convert Your Keras Model to ONNX](https://medium.com/analytics-vidhya/how-to-convert-your-keras-model-to-onnx-8d8b092c4e4f)を参考に進めました。
### 注意点
tensorflowのバージョンに制限があるため、
tensorflow2.4以降のversionが入っている場合は新しいpython仮想環境立てて作業することを推奨
ちなみに、tensorflow2.4の場合はエラーになります。
https://github.com/onnx/keras-onnx/issues/662
>AttributeError: 'KerasTensor' object has no attribute 'graph'

### 必要ライブラリインストール

```
pip install tensorflow==2.3.0

pip install onnx

pip install keras

pip install keras2onnx
```

### converterの準備
以下のpythonコードを準備します。
配置先は変換する`.h5`ファイルが置いてあるディレクトリになります。

```convert_keras_to_onnx.py
from tensorflow.python.keras import backend as K
from tensorflow.python.keras.models import load_model
import onnx
import keras2onnx

onnx_model_name = 'yolov2_tiny.onnx'

model = load_model('yolov2_tiny.h5')
onnx_model = keras2onnx.convert_keras(model, model.name)
onnx.save_model(onnx_model, onnx_model_name)
```

### 変換
以下コマンドでconverterを実行します

```
python convert_keras_to_onnx.py
```

成功すると、`yolov2_tiny.onnx`というファイルが出力されています。

# 参考

### about barracuda
https://docs.unity3d.com/Packages/com.unity.barracuda@0.3/manual/index.html

https://docs.unity3d.com/Packages/com.unity.barracuda@1.0/manual/SupportedArchitectures.html

https://docs.unity3d.com/Packages/com.unity.barracuda@1.0/manual/Exporting.html

### darknet → .h5
https://github.com/allanzelener/YAD2K

http://blog.abars.biz/archives/52453762.html

https://github.com/allanzelener/YAD2K/issues/83

### .h5 → .onnx
https://qiita.com/tfukumori/items/3f438294e722bc29fe16#213-%E5%AF%BE%E5%BF%9C%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF

https://medium.com/analytics-vidhya/how-to-convert-your-keras-model-to-onnx-8d8b092c4e4f
Gatsbyで動画自動再生に手こずった（mp4）

##サイトによくあるトップページの動画自動再生・・・

なかなか動かなくて調べました。

JSXとの兼ね合いで良い記事が見つからず、あれこれ試したが、
`<vide src="/images/~~~~~~~.mp4"></video>`では動かなかった。

```js
<video autoPlay loop muted playsInline controls style={{ width:"100%" }}>
  <source src="/images/~~~~~~~.mp4" />
</video>

```
**`<source>`タグ**を作って内側に書くという方法。

レスポンシブにするかは**style={{ width:"100%" }}**の部分をつけるか外すか。

※ここのHTMLなどをJSX記法に変換してくれるオンラインツール便利すぎた！！！
 [HTML to JSX Compiler](https://magic.reactjs.net/htmltojsx.htm)
Jqueryでつまづき中・・・やや限界に近い

#update

TERATAILのお陰で対応できました。　→　https://jsfiddle.net/motochan/sqwL7xft/

ただパタパタの部分は、まだ出来ていませんが・・・

#JQUERYセレクタのコツ

prevというのは、DOMの真横の要素なんですね。
今回は親UL→直前のLABEL→直前のINPUTと後ろからさかのぼりました。

```html
$("li input").on('click', function() {
  if ($(this).prop('checked')== true){
    $(this).parents('ul').each(function(index) {
      $(this).prev().prev().prop('checked', true);  
    });
  }
});
```

#階層リストのチェックボックス

いまとあるアプリのチェック付きリストを実装しようとしています。

パタパタと押し開くようなボタンです。

#やりたいこと

* 孫から親をさかのぼって、チェックボックスをすべて入れたい

####(BEFORE)
□朝ごはん
　　□味噌汁
　　　　□わかめ
□昼ごはん
　　□ラーメン
　　　　■わかめ　　　
□夜ごはん
　　□スープ
　　　　□わかめ

####(AFTER)

□朝ごはん
　　□味噌汁
　　　　□わかめ
■昼ごはん
　　■ラーメン
　　　　■わかめ　　
□夜ごはん
　　□スープ
　　　　□わかめ

#source 


親から子供に行くソースは多々ある。
しかし、逆に下から上っていくものが見つからない

あとラーメンを押したとき、わかめには入らないこと


なかなかうまくいかへんなあ・・・

#Script

とりあえず、自分でやりかけてみる・・・
（またしても、誰かにお助けしてもらえないかなと期待する）



https://jsfiddle.net/motochan/29bj0sq5/3/

#追記

わかめの親が、いつまでたっても味噌汁のまま

teratailに投稿　　https://teratail.com/questions/332516?modal=q-comp


```
$(this).parent().parent().find('label').html()
"わかめ"

$(this).parent().parent().parent().find('label').html()
"味噌汁"

$(this).parent().parent().parent().parent().parent().parent().parent().find('label').html()
"味噌汁"
```
テストコード（単体テスト）エラー

テストコードのコマンドを入力すると、今まで見た事のないエラー文が。

ActiveRecord::StatementInvalid:
       Mysql2::Error::ConnectionError: Lost connection to MySQL server during query


上記をコピペしてググることに。いっぱい出てきました。

何やらテストコードを精製してるspec.rbに以下の一文を加えたら良いらしい。


before do
    @user = FactoryBot.create(:user)
    @item = FactoryBot.create(:item)
    @order_address = FactoryBot.build(:order_address,user_id: @user.id, item_id: @item.id)
    sleep 0.1　　　　　　⬅️こちらです！
  end


上記は生成するのに0.1秒待機させて処理する仕組みのようです。

結果、全て通るようになりました！
ずっとFPGA初心者（その７：遅延とリセット＆繰り返し）

# 遅延とリセット後のその遅延の繰り返し
今回のお題は、遅延、その後リセットを行い、同じ遅延を繰り返す、、、というもの。[その５（遅延）](https://qiita.com/infinite1oop/items/fa215720e7bd7ff67bd0)の続きである。用いるボードおよび開発環境は、すべて[その１](https://qiita.com/infinite1oop/items/4b0f03b97ed859fbd954)と同じ。

## 具体的には
ボタン押下３秒後に点灯し、ボタン押下後に消灯（リセット）、その後のボタン押下３秒後に再点灯、ボタン押下後に消灯（リセット）、、、、の繰り返しである。

## VHDLコード
```vhdl:ClkLedDelayReset.vhd
library ieee;
use ieee.std_logic_1164.all;

entity ClkLedDelayReset is
	port (
		BTN:	in std_logic;
		CLK:	in std_logic;
		LED0:   out std_logic;
		LED7:	out std_logic);
end ClkLedDelayReset;

architecture RTL of ClkLedDelayReset is
constant CYCLE : integer := 3*50000000;  -- ①　３秒
signal CNT: integer range 0 to CYCLE-1 := 0;
signal TimerFlag: std_logic := '0';
signal LedFlag: std_logic := '1'; -- Off
	
begin
	process (BTN) -- ②
	begin
		if (BTN'event and BTN='0') then	-- Pushed
			TimerFlag <= not TimerFlag;
		end if;
	end process;

	
	process (CLK) -- ③
	begin
		if (rising_edge(CLK)) then
			if (TimerFlag='1') then
				if (CNT = CYCLE-1) then -- ④
					LedFlag <= '0'; -- On
					-- TimerFlag <= not TimerFlag;  -- ⑤　NG
				else
					CNT <= CNT+1;
				end if;
			else -- ⑥　TimerFlag='0' Reset
				LedFlag <= '1'; -- Off
				CNT <= 0;
			end if;
		end if;
	end process;
	
	LED0 <= LedFlag;  -- ⑦
	LED7 <= BTN; -- ⑧　For debug
end RTL;
```

- ①：3秒の定義（用いるボードは50MHzのクロックを持つ）
- ②（Processブロック全体）、③（Processブロック全体）、⑦、⑧は同時に実行
- ②：ボタン押下時に、タイマー用フラグ（TimerFlag）反転
- ④：規定時間（3秒）到達後、LED用フラグON（処理⑦へとつながる）
- ⑥：TimerFlagがOff時に、LED用フラグOFFかつカウント（CNT）リセット
- ⑤：ここでのTimerFlag変更は不可（QuartusでBuildエラー = 論理エラー）
- ⑧：デバッグ用、ボタン押下時に別のLED点灯

動作自体は自明なので、写真、動画、ピンアサインは省略（勘弁）。

## 補足
２回以上押さないと再点灯しないことがあった。詳細は未調査だが、チャタリングが原因の可能性がある。チャタリング発生状況の把握については、別途検討してみたい。
jarsigner: jarに署名できません: java.util.zip.ZipException: invalid entry compressed size (expected XXXX but got XXXX bytes)

Androidでapk作成して署名するときに以下のエラーが出る

```
jarsigner: jarに署名できません: java.util.zip.ZipException: invalid entry compressed size (expected XXXX but got XXXX bytes)
```

./gradlew assembleReleaseで作成されるファイルに署名がされてしまっているのが原因。以下の設定して再度実行すれば未署名のファイルが出力される。(ファイル名はapp-release-unsigned.apkとなる。)


```
##  android/aopp/build.gradele
buildTypes {
    release {
        ....
        //signingConfig signingConfigs.release
        signingConfig null
    }

```
【個人開発】制限のない自由なSNS作ってみた!

#初めに
この度[Ammot](https://ammot.net/)というwebアプリを開発しました。
コンセプトは「制限の少ない自由な投稿を」です。
「ツイッターは文字数制限がきつい、ただfacebookは実名制だしデザインがごちゃごちゃでいや」
という声を聴いたので作ってみました。

https://ammot.net/

先に行っておくと
Ammotは文字数制限が6000字まで、画像・動画・PDF・音声は同時に10個まで投稿可能です。

#概要
![スクリーンショット 2021-04-09 222457.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480294/b3fa57eb-bcb0-fdec-f71c-e133177083db.png)

↑ログイン前のトップページにはフィットスクロール（名前間違いかも）を使用して新しいおしゃれなサイト感を出してます。

![453789.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480294/48b63235-f2b6-ac69-bc72-8c61cd41d877.png)

↑これがログイン後のトップです。フォローしたユーザーの投稿がHOMEに流れて、
サイドバーにはおすすめの投稿と現在人気のタグを表示しています。

![スクリーンショット 2021-04-09 223227.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480294/e0881f85-26de-3b9a-a2b1-110c690698ae.png)

↑ポップアップの投稿画面です。


###ツイッターのいやなとこ
文字数制限
編集ができない（個人的にめちゃ嫌）


###facebookのいやなとこ
制限はないがデザインがぐちゃぐちゃ
実名制はなんかいやだ

この二つSNSの問題を解決するのがAmmotです。


#工夫した点
####無料プランにこだわった
こういうものはバズらない限り、すぐには成功しません。使用者が全くいなくても１年は公開しようと思います。
でも使用者がいないのに月数百円も取られるの馬鹿馬鹿しいじゃないですか。だからドメイン以外はすべて無料です。
ただherokuの無料プランだとドメインを設定できないのでCloudflareを使い設定しました。

参考記事：

https://qiita.com/serinuntius/items/f7f08b2221f5ad068f5d

####デザインとUIにこだわった（つもり）
フィットスクロール？だったり投稿画面のポップアップだったり
今まで使ってこなかった手法を使ってみました。
自己満になってるかもしれない

ちなみにデザインを参考にしたサイトは[tumblr](https://www.tumblr.com/)です。
比べればまぁまぁ似てると思います。

####機能性
最初にも書きましたが画像・動画・PDF・音声の投稿とプレビュー機能を実装しました。
これにはいろんな記事がありましたが

まともに動きかつ一番簡単でコードもシンプルなこの記事を参考にするのをお勧めします。

https://qiita.com/0thefool/items/5af0f17f0075e7e0e013


#使用した技術
rails6
ruby2.7
postgresql
heroku free 
aws s3

```
gem 'ridgepole'
gem 'slim-rails'
gem 'html2slim'
gem 'pry-rails'
gem 'devise'
gem 'kaminari'
gem 'activeadmin'
gem 'rack-attack'
gem 'rails-i18n'
gem 'devise-i18n'
gem 'devise-i18n-views'
gem 'carrierwave'
gem 'rmagick'
gem 'rinku'
gem 'fog-aws' 
gem 'dotenv-rails'
#一部抜いてます
```

#まとめ
今回の開発は今までやらなかったことにめちゃ挑戦できたので楽しかったです
苦手なjquery・javascriptもプレビュー機能のおかげでちょっとわかった気がしてます。

文字数制限や実名制で不便を感じたことのある人はぜひAmmot使ってください！お願いします。

↓URL
https://ammot.net

↓僕のAmmotのアカウント
https://ammot.net/user/yamada(%E9%96%8B%E7%99%BA%E8%80%85)

↓僕のツイッターのアカウント
https://twitter.com/yamada1531
pip install face_recognitionでエラー

機械学習初心者です。
画像データから顔だけ切り取りだすことをしたかったため、face_recognitionライブラリを使用しようと試みました。
* 環境
** windows10
** python version 3.6.10

##1. pip install face_recognitionでエラー
自分のPCの環境がエラーメッセージに含まれているのでエラーメッセージの一部を抜粋しました。
CMakeをinstallする必要があるようです。

```
  ERROR: CMake must be installed to build dlib

  ----------------------------------------
  ERROR: Failed building wheel for dlib
```

##2. pip install cmake実行
こちらはエラーも出ず、Successsfullyとなりました。

##3. 再度pip install face_recognition実行
cmakeをinstallしたので再度コマンドを実行しましたが、別のエラーが出ました（こちらも一部抜粋）。
Visual Studioが必要みたいです。

```
    -- Building for: NMake Makefiles
    CMake Error at CMakeLists.txt:5 (message):
    

    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!


    You must use Visual Studio to build a python extension on windows.  If you
    are getting this error it means you have not installed Visual C++.  Note
    that there are many flavors of Visual Studio, like Visual Studio for C#
    development.  You need to install Visual Studio for C++.

    ....

    -- Configuring incomplete, errors occurred!

    ....

    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
```

## 4.Visual Studioインストール
https://visualstudio.microsoft.com/ja/downloads/

Visual Studio 2019を選択してインストール後、exeファイルを実行、
以下の画面で「C++によるデスクトップ開発」にチェックを入れてインストールしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186902/4b2cc848-9837-7ff1-8e72-133396660de3.png)

##5. いざ、pip install face_recognition
Successfullyでした。（よかったよかった）

## 最後に
face_recognitionライブラリを使用するための環境構築についてまとめている記事がありました。
完全に調べ不足でした。。。
https://pystyle.info/perform-face-recognition-with-python/
【nginx】[FAIL] Starting nginx: nginx failed!の対処

nginxは初めて使うので、不慣れでエラー対処しながら進めてます。
今回、GCP上にnginxを構築していて、実行したコマンドは以下
501  sudo apt update
  502  sudo apt install nginx
  503  nginx -v
  504  sudo apt install -y ufw
  505  sudo ufw allow 'Nginx HTTP'←ここがわるかったのかな？


ということで、タイトルの内容を進めていきます。





エラー
===
nginxを起動しようとしましたが、以下のエラーが発生。

systemctl status nginx
↓
System has not been booted with systemd as init system (PID 1). Can't operate.
Failed to connect to bus: Host is down

これは、systemctlが使えないことが原因のため、以下のコマンドで対処するが、掲題のエラーが発生。
 sudo service nginx start
↓
[FAIL] Starting nginx: nginx failed!


nginxを起動しようとすると、Address already in useと言われ再起動できない。


$ sudo /usr/sbin/nginx
nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)
nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)
nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)
nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)
nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)
nginx: [emerg] still could not bind()


調べた結果
===
nginxで使うポートを先に何かのポートが使っているとだめみたい。

sudo netstat -lntp
↓
Active Internet connections (only servers)
Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name
tcp        0      0 0.0.0.0:22              0.0.0.0:*               LISTEN      106/sshd
tcp        0      0 127.0.0.1:43607         0.0.0.0:*               LISTEN      518/sshd: 
tcp        0      0 127.0.0.1:8998          0.0.0.0:*               LISTEN      -
tcp        0      0 0.0.0.0:65001           0.0.0.0:*               LISTEN      -
tcp        0      0 0.0.0.0:80              0.0.0.0:*               LISTEN      -
tcp6       0      0 :::980                  :::*                    LISTEN      -
tcp6       0      0 :::22                   :::*                    LISTEN      106/sshd
tcp6       0      0 :::922                  :::*                    LISTEN      -
tcp6       0      0 :::970                  :::*                    LISTEN      81/theia-proxy

邪魔なプロセスをキルすればいいみたいだけど、
かぶってない気がするが、見方がわからない・・・

以下のディレクトリで、nginxのデフォルトポートを確認すると80だったので、81に変更した。
 vim /etc/nginx/sites-enabled/default

links コマンドでみてみると、welcome ngnxとでるので、起動できている気がするが、
外部IPから接続できない。。。

今回GCPに構築したのだが、おそらくネットワークの設定を変更しないと行けないのではないかと。
ポートを変更したから　http://IPアドレス:81/としたけど、できない

結果
===
GCPで構築してたんですが、仮想マシンにログインせずに作業していたというオチでした。。。
C++ opencv 環境構築 (Mac)

# はじめに
Macで, C++のOpenCV環境の構築方法について簡単にメモしました．

# 手順
## インストール
homebrewでopencvをインストール．

```
$ brew install opencv
```

以下のコマンドでバージョンを確認可能．

```
$ brew list --versions | grep opencv
opencv 4.5.2
```

## VSCodeの設定
VSCodeではIntelliSenseを使うためにc_cpp_properties.jsonのincludePathにOpenCVのパスを設定．

Command+Shift+P でコマンドパレットを開き,「C/Cpp: Edit configurations」 を選択．

今回は以下のように設定．

```
{
    "configurations": [
        {
            "name": "Mac",
            "includePath": [
                "${workspaceFolder}/**",
                "/usr/local/include/opencv4"
            ],
            "defines": [],
            "macFrameworkPath": [],
            "compilerPath": "/usr/local/bin/g++",
            "cStandard": "gnu17",
            "cppStandard": "gnu++14",
            "intelliSenseMode": "macos-gcc-x64"
        }
    ],
    "version": 4
}
```

## 実行テスト

CMakeLists.txtとサンプルコードtest1.cppを作成．ファイル階層は以下のようになっています．

```
.
├── CMakeLists.txt
├── sample.jpeg
└── test1.cpp
```

CMakeLists.txtに今回は以下を記述．

```
cmake_minimum_required(VERSION 3.1)
project (test1)
set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -std=c++11 -Wall")
find_package(OpenCV REQUIRED)
include_directories( ${OpenCV_INCLUDE_DIRS} )
add_executable(Main test1.cpp)
target_link_libraries(Main ${OpenCV_LIBS})
```

test1.cppには以下を記述．

```cpp
#include <iostream>
#include <opencv2/opencv.hpp>

int main() {
    cv::Mat img = cv::imread("sample.jpeg");

    cv::namedWindow("test", cv::WINDOW_AUTOSIZE);
    cv::imshow("test", img);
    cv::waitKey(0);
    cv::destroyWindow("test");
    return 0;
}
```

コンパイルのため，以下のコマンドをterminalで実行して，画像が表示されればokです．

```
mkdir build
cd build
cmake .. .
make
cd ..
./build/Main
```

コマンドについて

* 自分のソースコードとcmakeのbuildにより生成されるファイルを分離するために，buildディレクトリを作ってから"cmake .. ."によりCMakeLists.txtを実行．
* "make"によりコンパイルして./Mainを生成．
* 画像ファイルとソースコードと同じ階層で実行する必要があるので, "cd .."で上の階層に移ってから，"./build/Main"を実行．

以下が，今回自分が作成したものとなっています．
[作成したプロジェクト](https://github.com/Toshiyana/cpp-opencv-cmake)

# 参考
* [MacにOpenCV4をインストールする(C++)](https://qiita.com/HoriThe3rd/items/2829463cd5bfe5cba03f)
* [MacにOpenCV(C++)環境を構築する](https://qiita.com/Haruka2003/items/e1931c57e4c9869cd837)
SNNN数のライブラリを作成してみた。

#SNNN数のライブラリーを作成してみた。

```snnnum.py
import math

def reverse(num):
    if num==0:
        return -1
    return int(math.log10((num*9+7)/34))

def common(n):
    return int((34*10**n-7)/9)

def isPrime(x):
    if x == 1:
        return False
    if x == 2:
        return True
    for i in range(2, int(x**0.5) + 1):
        if x % i == 0:
            return False
    return True

def baseFromIsPrime(x):
    return isPrime(common(x))

```
ちゃんと動くか検証

```app.json.py
import snnnum
n=int(input("数を入力"))
n1=snnnum.common(n)
n2=snnnum.reverse(n1)
n3=snnnum.isPrime(n1)
print("common:",n1)
print("reverse:",n2)
print("is prime:",n3)
print("reisprm:",snnnum.baseFromIsPrime(n2))
```
動いた。
【Python】モジュールをアンインポート・リロードする　Unimport or reload a Python module 〜from import まで〜

# 0. はじめに

## 0.1 動機
簡潔で情報漏れのない日本語のまとめ記事がなく，意外と実行までたどり着くのに難儀したのでまとめを書くことにしました[^1]．とくに <font color="Magenta">from X import Y</font> の型が厄介です．

[^1]: 英語や和訳サイトなら基本的なことはいくらでもありますが，<font color="Magenta">from X import *</font> となるとこれはもう絶望的です．「推奨されていない」なんてよく聞きますが，`from scipy.constants import * `とか便利，というより不可避なんですよね．SymPy の公式などでもソースコードでよく見かけます．
 [Matrices — SymPy 1.7.1 documentation](https://docs.sympy.org/latest/tutorial/matrices.html) ← from sympy import * の使用例
 [Zeta functions, L-series and polylogarithms — SymPy 0.7.4.1 documentation](http://omz-software.com/pythonista/sympy/modules/mpmath/functions/zeta.html) ← from mpmath import *



基本的には自作パッケージ（モジュール）のリロードを行うことが目的です．自作でも <font color="Magenta">from X import *</font> が便利だったので，急務だったというわけです．

## 0.2 概要

* import したモジュールや関数を unimport する
* from X import Y で import したモジュールを reload する（当然 import X や from X import * も可）

## 0.3 実行環境
Python 3.8.6
jupyter-notebook : 6.1.4

#1. モジュールのアンインポート

## 1.1 パッケージ・モジュール

パッケージやモジュールを以下のようにインポートしたとします

```python
import module as importname
```

以下でこのモジュールをアンインポートできます．

```python
del importname
```

## 1.2 関数・変数


関数や変数も以下で消去できます．

```python
from module import f
del f
```

あまりないとは思いますが，`from module import *`した場合は変数名を namespace で探します．

```python
from module import *
if 'f' in dir():
    del f
```



# 2. モジュールのリロード

## 2.1 import X 型

importlib パッケージの reload 関数を使ってください．

```python
# import X
from importlib import reload # >= python 3.4
reload( X )
```

## 2.2 from X import Y 型

自作パッケージを作る時に役に立ちます．Jupyter notebook のファイルのセーブだけでは関数などの書き換えが行われないからです．


もちろん一度 ipynb 上に変更箇所をコピーしても良いと思います．ただ，リロードからも関数の中身の再度読み込みできるようにしておくと便利です．


```python
# from X import Y
from importlib import reload # >= python 3.4
import X
reload( X )
from X import Y # from X import *
```

モジュールの内容を微修正するたびにカーネルや Jupyter notebook を再起動するのは面倒くさいです．
VSCodeでも，Pythonを書く場合事情は同じです．

しかし，reload できれば shift (command, VSCodeならctrl) + enter を押すだけなので簡単です．


# 3. 具体例

`del` については scipy や sympy で例を考えます．

`reload` については `foo()` が2パターンあるテストモジュールを考えます．
今は使いませんが，グローバル変数の例としてわざと x も定義しています．
2つ目の`foo()`はここではコメントアウトしてあります．

```python:testmod.py
x = 0
print(x)

# 1
def foo(): print('bar')
# 2
#def foo(): print('bar1')

if __name__ == '__main__':
    print('This is a test module named testmod.')
    print('x = '+str(x))
```

詳細については[このページ](https://github.com/Krypf/qiita/blob/main/unimport.ipynb)を御覧ください（github）．



# まとめ

アンインポートについては`del`，リロードについては`importlib.reload`で可能です．

`from import` した場合のリロードについては工夫が必要です．
【CSS】寝られないからスラ〇ム動かしてみた

# はじめに
寝られないのでコーディング・・・するほど元気もないのでとりあえず**スラ〇ム**動かしてみた。

# 動かす画像
権利関係いろいろありそうなので頭のトンガリを少なくして画像作成っと
制作時間1分。やはり**スラ〇ム**は書きやすい。

![スライムっぽい何か_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1203022/686ce197-817a-896f-7bd3-a33730d55f8e.png)

# 動かす
[ここのサイト](https://b-risk.jp/blog/2021/01/anim-reference/)からアニメーション用のCSSをコピペ
（**コピペでOK**みたいなサイトは本当にありがたい）
継続して動くように少し修正　`animation: infinite`

↓動いているところ（表示まで数秒・・・）
表示されなかったら「Result」をクリック

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


やだ、可愛い。
子供が書いた絵とか動かしてあげたら喜びそう。身近に子供いないけど。

# CSS

```css
.anim-box.poyoyon2.is-animated {
  animation: poyoyon2 2s infinite forwards;
}
 
@keyframes poyoyon2 {
  0%  {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  15% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }
  30% {
    transform: scale(1.02, 1.0) translate(0, 8px);
  }
  50% {transform: scale(0.98, 1.05) translate(0, -8px);
  }
  70% {
    transform: scale(1.0, 0.9) translate(0, 5px);
  }
  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}
```

以上。

ダメだ。まだ眠くない・・・。

https://b-risk.jp/blog/2021/01/anim-reference/
C++ 環境構築 Cmake (Mac)

# はじめに
MacでC++のopencv環境を構築する場合，g++でなくてcmakeを利用するようなので，その時行ったことをメモしました．

# 手順

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

homebrewでcmakeをインストール．

```
$ brew install cmake
```

## 2. テスト環境の作成

以下のように，test.cppとCMakeLists.txtを作成．

```
.
├── CMakeLists.txt
└── test.cpp
```

test.cppにテスト用に以下のコードを記述．

```c++
#include <iostream>
using namespace std;

int main(){

    string name;
    cin >> name;
    cout << "Hello, " + name << endl;

}
```

CMakeLists.txtに以下を記述．（一例）

```
cmake_minimum_required(VERSION 2.8)
add_executable(Main test.cpp)
```

## 3. 動作確認
以下のコマンドを実行．

```
cmake .
make
./Main
```

実行して，標準入力でnameを入力した後，"Hello, name"が出力されればおけ．
なお，./Mainは，add_executable(Main test.cpp)のMain．

# 参考
* [C++初心者がMacでCMakeを利用してみる](https://qiita.com/kai_kou/items/df335eb7ee78229ee46f)
* [ごく簡単なcmakeの使い方](https://qiita.com/termoshtt/items/539541c180dfc40a1189)
mackerelでproxmoxを監視してみた

##Mackerelを使用して、ProxmoxServerを監視してみた
最近、日本でも使われ始めている、仮想化基盤のProxmoxを自宅サーバーで使用はじめたので、
Mackerelで監視できるように設定してみました。

#設定方法

wgetコマンドで、エージェントをダウンロードする

```
wget https://mackerel.io/file/script/setup-apt-v2.sh | sh
```

###sudoコマンドをproxmoxで使用できるようにする
aptコマンドでパッケージを更新をする

```
apt update
```

sudoが使えるようにする

```
apt install sudo
```

Mackerelエージェントをインストールする

```
sudo apt install mackerel-agent
```

Mackerelエージェントにapiキー設定をする

```
sudo mackerel-agent init -apikey="***"
```

***は自分のapiキーを入れる


これで、mackerelで監視できるようになります。
この記事では、過去に説明している、apiキーの取得方法は初略しました。
わからない場合は、[過去記事](https://qiita.com/r_nakamura1997/items/66b6e37e4d5ba0baeffb#api%E3%82%AD%E3%83%BC%E3%81%AE%E5%8F%96%E5%BE%97%E6%96%B9%E6%B3%95)を参考にしてください。
【Ruby】生年月日から年齢を計算するメソッド

# 生年月日から年齢を計算するメソッドを作成
まず、Dateクラスは組み込みクラスとはなっていない為、Dateクラスを使うにはまずプログラムファイルの中で次の一文を記述します。

```
require "date"
```

### 生年月日から年齢を計算する方法
（今日 - 生年月日） ÷ 10000 なので、

例）2000年4月9日生まれの人
（20210410 - 20000409) ÷ 10000
 = 21.0001 → 21歳

例）2000年4月11日生まれの人
（20210410 - 20000411) ÷ 10000
 = 20.9999 → 20歳

といった感じになる。

### いざ実装

```
def get_age(birthday)
  today = Date.today.strftime("%Y%m%d").to_i
  birthday = birthday.strftime("%Y%m%d").to_i
  return (today - birthday) / 10000
end

get_age(2010-12-25)
```

Date.today で、 2020-04-10 といった感じで出力された値を、 strftime("%Y%m%d") で、20200410の形に変える。（.to_i で数値に変える）
引数 birthday でも同じ処理をする。
（birthday が 2010-12-25 の場合、　20101225）

strftimeについては以下の内容を参考
https://www.sejuku.net/blog/44796

そして、
return (today - birthday) / 10000 で計算結果を返す。

(20200410 - 20101225) ÷ 10000 = 9.9185

なので、9 が出力され、9歳ということがわかる。

以上、ありがとうございました。:raised_hands:
複数のMavenプロジェクトをbatでinstallしてみた。

<h2>経緯</h2>
複数の Maven プロジェクトをinstallする際、毎回毎回コマンドを打つのが面倒だったためbatファイルで一括処理できないか試してみたかった。


<h2>batの理解度</h2>
batファイルは実行するもの、中身の編集は決められた箇所をローカルの環境に合わせるだけ・・作成してくれた人にはいつも感謝。

<h2>使用コマンド</h2>
| コマンド| 説明 |
|:-:|:-:|
|set|変数を用意し値を設定する|
|cd|カレントディレクトリの移動|
|call|別のバッチファイルを呼び出す *1|
|for|繰り返し処理を行う *2|

(*1)mvnコマンドはバッチファイルを実行しているらしくcallを着けずに実行すると2回目以降のmvnコマンドが実行できなかったため使用。
(*2)オプションに 「/d」を付けることでカレントディレクトリのサブディレクトリ数分繰返し処理を行うことができる。


<h2>ソース</h2>
前提としてtargetDir配下にinstallしたいmavenプロジェクトがあること。

```mvn_install.bat

set targetDir="C:\workspace\maven-project"

cd %targetDir% 

for /D %%d in (*) do (
  cd %%d
  call mvn clean install
  cd ..
)

pause

```

<h2>改善できそうな点</h2>
ビルドが失敗したプロジェクトをまとめて出力することで該当プロジェクトへの修正がしやすくなりそうだが、
どうやってビルドに失敗したか判断すればいいのかわからず一旦断念。


<h2>感想</h2>
初めて作ったbatファイル、時間はかなりかかったけど結構楽しい。
もっとちゃんと理解すれば色々なことができそうだなと思った。

※もし間違いとかこうしたほうがいいよとかあったら教えていただけると助かります。

<h3>参考</h3>
https://www.javadrive.jp/command/bat/index12.html

https://www.javadrive.jp/command/bat/index9.html
Flutterのstate管理はBLoCではなくProviderを使っとけばいいかなと思った参考記事

# 記事

- [BLoCパターンの実装の仕方（著者は結局Providerを推してますが）](https://medium.com/flutter-jp/bloc-provider-70e869b11b2f)
- [BLoCライブラリ(Introductionを一通り読むと、BLoCパターンはどう使ったらいいか、割とわかりやすい)](https://bloclibrary.dev/#/)
- [BLoCライブラリは複雑になって学習コストが上がっているのでProviderライブラリに人気が移っている](https://dev.to/mjablecnik/most-popular-flutter-libraries-for-state-management-l53)
- [BLoCというか、そもそもstate管理がなぜ必要でflutterではどう管理するかの話（公式でのサンプルはProviderライブラリを利用している）](https://flutter.dev/docs/development/data-and-backend/state-mgmt/intro)
- [公式に沿って試したブログ](https://note.com/tkugimot/n/n2f833801d919)
- [Providerライブラリ（READMEで雰囲気大体わかりるけどシンプル）](https://github.com/rrousselGit/provider)

# ベースとなる考え
[ここ](https://flutter.dev/docs/development/data-and-backend/state-mgmt/declarative)のこの式が、flutterでのstate管理をほぼ説明する。
![ui-equals-function-of-state-54b01b000694caf9da439bd3f774ef22b00e92a62d3b2ade4f2e95c8555b8ca7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236425/03df52f7-efe6-9d3a-5ad9-4b8bcd63b4f2.png)
ExcelにCtrl + Vでスクショを貼り付けるとサイズが大きくなるのを解消するマクロ

```VB
Option Explicit

Sub MiniScreenShotShortCut()
    Application.MacroOptions Macro:="HeightBaseMiniScreenShot", ShortcutKey:="e"
    Application.MacroOptions Macro:="WidthBaseMiniScreenShot", ShortcutKey:="E"
End Sub

Sub HeightBaseMiniScreenShot()
    
    Dim expectHeight As Double
    
    'リサイズ後のスクショの高さ
    expectHeight = 500
    
    Dim cbfs As Variant
    
    cbfs = Application.ClipboardFormats
    
    If cbfs(1) = xlClipboardFormatBitmap Or cbfs(1) = xlClipboardFormatPICT Then
        ActiveSheet.Paste
        
        Selection.Height = expectHeight
        
        Dim moveCount As Integer
        moveCount = Selection.Height \ ActiveCell.RowHeight + 1
        
        ActiveCell.Offset(moveCount, 0).Activate
    End If
    
End Sub

Sub WidthBaseMiniScreenShot()
    
    Dim expectWidth As Double
    
    'リサイズ後のスクショの幅
    expectWidth = 500
    
    Dim cbfs As Variant
    
    cbfs = Application.ClipboardFormats
    
    If cbfs(1) = xlClipboardFormatBitmap Or cbfs(1) = xlClipboardFormatPICT Then
        ActiveSheet.Paste
        
        Selection.Width = expectWidth
        
        Dim moveCount As Integer
        moveCount = Selection.Height \ ActiveCell.RowHeight + 1
        
        ActiveCell.Offset(moveCount, 0).Activate
    End If
    
End Sub

```

Ctrl + E で高さ固定、Ctrl + Shift + E で幅固定でクリップボードに入っている画像をリサイズして貼り付けられます。
個人的な都合でリサイズしたスクショを貼り付けたときにフォーカスをスクショの高さだけ下に移動させています。邪魔なら消してください。
Kotlin で順列生成

# はじめに

Kotlin で競技プログラミングの問題を解いていたところ，順列を生成する必要性が出てきたので調べたが，どうやら Kotlin には標準で備わっていないようなので自作した．単純な方法で，計算コストについてはあまり詰めていない．

# 順列生成アルゴリズム

樹形図を生成して辿りながら順列を加えていく方式．与えられたリストから要素を 1 つ取り出し，残った要素の順列を後ろに連結する処理を再帰的に行う．

手順は次の通り．

1. 与えられたリスト $P$ の要素数が $n - r + 1$ に等しければ，次が最後の要素となるので $P$ の要素を 1 つだけ含むリストを要素とするリストを生成し，`return` する
2. そうでなければ，$P$ の中から 1 つの要素 $p_0$ を選ぶ
3. $P$ のうち $p_0$ を含まないリスト $P_1$ を生成する
4. $P_1$ の順列を生成する
5. $p_0$ の後ろに，$P_1$ の順列それぞれを連結させたものを `return` する

重複のない順列が 1 個ずつ生成されるので，`Permutations` 関数が呼び出される回数は ${}_nP_r$ である．また，要素を 1 つ除いたリストの生成に $O(k)$ ($k$ は渡されたリストのサイズ) の時間計算量がかかるので，処理のコストに偏りがあるものの多く見積もって $O((n + 1)!)$ 程度の時間計算量がかかる．よって現実的に利用できるのは $n \leq 8$ 程度まで．順列の生成を前提とする問題であれば充分である．

# ソースコード

```kotlin
fun <T> List<T>.permutations(k0: Int = this.size): List<List<T>> {

    val n = this.size
    val k = if(k0 > n) n else k0

    fun <T> List<T>.generatePermutations(k: Int, n: Int): List<List<T>> {

        var retList = emptyList<List<T>>().toMutableList()

        this.forEach { a ->

            if (this.size == n - k + 1)
                retList.add(listOf(a))

            else {
                var nextList = emptyList<T>().toMutableList()
                this.forEach { b -> if (a != b) nextList.add(b) }
                nextList.generatePermutations(k, n).forEach { c -> retList.add(listOf(a).plus(c)) }
            }
        }
        return retList.toList()
    }
    return this.generatePermutations(k, n)
}

fun permutations(n: Int = 0, k0: Int = n): List<List<Int>> {

    return List<Int>(n){it}.permutations(k0)
}
```

# 使用法 1 (リストを指定して順列を生成)
`List.permutations(k)` の形式で使用する．`List` が含む要素で順列を生成し，まとめたものを `return` する．整数以外のリストにも対応している．引数 `k` は生成する順列の要素数を `Int` 型で指定する．`k` の指定は任意で，指定がない場合は `k = List.size` とする．

```kotlin
>>> listOf(1, 2, 3).permutations(3)
//[[1, 2, 3], [1, 3, 2], [2, 1, 3], [2, 3, 1], [3, 1, 2], [3, 2, 1]]

>>> listOf(1, 2, 3).permutations()
//[[1, 2, 3], [1, 3, 2], [2, 1, 3], [2, 3, 1], [3, 1, 2], [3, 2, 1]]

>>> listOf(1, 2, 3).permutations(2)
//[[1, 2], [1, 3], [2, 1], [2, 3], [3, 1], [3, 2]]

>>> listOf('a', 'b', 'c').permutations(3)
//[[a, b, c], [a, c, b], [b, a, c], [b, c, a], [c, a, b], [c, b, a]]
```
## 使用例 2 (要素数 n の整数の順列を生成)

List を指定せずに `permutations(n, k)` を実行すると，$0 \ .. \ n - 1$ の $n$ 個の整数の順列を生成する．すなわちこの場合は `List<Int>(n){it}.permutations` と同じ結果が得られる． 引数の順番が異なるので注意すること．`k` は任意．

```kotlin
>>> permutations(3)
//[[0, 1, 2], [0, 2, 1], [1, 0, 2], [1, 2, 0], [2, 0, 1], [2, 1, 0]]

>>> permutations(3, 2)
//[[0, 1], [0, 2], [1, 0], [1, 2], [2, 0], [2, 1]]
```

# おわりに
手順が簡単であるのと汎用性を得るためにこのような生成方法にしたが，効率を求めるならより良いものが存在する．