OmniAICreator/Qiita-1.07M huggingface dataset:
【unity】コマンドバトル作ってみた➁（UI下準備）

# はじめに
今回はUIの準備をします。

# 行動選択UI作成
以下の画面になるように設定していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3122301/b9074864-e77d-1798-a283-334d32d3ac5a.png)

1. imageで白の背景を生成
2. 黒い四角(■)を3つ配置。(名前はyazirusi, yazirusi(1), yazirusi(2)にしてます)
3. Textで「たたかう」「かいふく」「逃げる」を作成（テキストの設定は画像の通り）
4. 2、3をimageの子オブジェクトにします！
5. 最後にimageを非表示にします。Inspectorビューのオブジェクト名の左のチェックを外しすと非表示にできます。 


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3122301/dc8153ca-b79f-8702-61a3-5f752f66b068.png)



# スクリプトとUIを紐付け
スクリプトでUIを設定できるようにBattleManagerにコードを追加していきます。
```cs:BattleManager
public class BattleManager : MonoBehaviour
{
    //スクリプトの取得
    PlayerScript player;
    EnemyScript enemy;

    //Playerの情報
    public int PlayerHp;
    public int PlayerMp;
    public bool PlayerMove;
    //敵の情報
    private int EnemyHp;
    private int EnemyMp;
    private GameObject Enemy;

    //追加
    //UI
    public GameObject image;
    public GameObject[] yazirusi1 = new GameObject[3];

    //追加
    //矢印の番号
    int n = 0;

    void OnCollisionEnter2D(Collision2D col)
    {
        if (col.gameObject.tag == "Enemy")
        {
            //playerの情報取得
            player = this.gameObject.GetComponent<PlayerScript>();
            PlayerHp = player.PlayerHp;
            PlayerMp = player.PlayerMp;

            //enemyの情報取得
            enemy = col.gameObject.GetComponent<EnemyScript>();
            EnemyHp = enemy.EnemyHp;
            Enemy = col.gameObject;

            //追加
            //image表示
            image.SetActive(true);
            for (int i = 0; i < 3; i++)
            {
                //先頭の■を表示
                if (i != n)
                {
                    yazirusi1[i].SetActive(false);
                }
            }

            //playerの動きを止める
            PlayerMove = false;
        }
    }
}
```


# unityからUIを紐付け
以下のように設定してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3122301/7040c9fd-281f-2303-e367-dd4b11c85340.png)

# 攻撃選択用のUI作成
同じ要領で攻撃選択用のUIを作成します！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3122301/ff61dbc8-7686-f7e3-31dd-fcf57972a5c7.png)

```cs:BattleManager
    //UI
    public GameObject image;
    public GameObject[] yazirusi1 = new GameObject[3];
    //追加
    public GameObject attackImage;
    public GameObject[] yazirusi2 = new GameObject[6];
```

紐付けは以下になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3122301/f474e070-96e8-f718-56ed-10f455bdf89a.png)

<br>

今回はここまでとします。再生しEnemyに当たると行動選択UIが表示されるようになっているので確認してみてください！

<br>
次回はいよいよコードを書いてコマンドバトルを実装していきます！
Cの基本１ 〜型〜　備忘録

### *追記*
*私は初心者である。この備忘録を参考にされようとしている他の初心者の方は、ここに書かれていることを鵜呑みになさらぬようお願いしたい。すでに間違いの見つかった部分はコメント欄でご指摘いただいています。他に間違いを見つけた方も是非アドバイス願います。*

___

### 整数型とフォーマット
`int`だったら`%d`と書くように、型に応じてフォーマットがある。
これらの変数の持つ領域の大きさを知るには`sizeof`演算子を使う。
また領域の大きさを表すフォーマットは`%zu`である
```c
    printf("%zu", sizeof(x));    // すでにxを宣言してる場合
    printf("%zu", sizeof(int));  // このように型だけでも出力される
```

___

### 浮動小数点数型
浮動小数点数とは小数点をずらす桁数を使って実数を表す表現方法。

浮動小数点数型に`unsigned`はない
小数点以下の表示数を上げるには、（例えば10桁にする）
`%.10f`と書く

##### `float`
* 入出力するときには`%f`を使う
* 比較的精度が低い
* メモリ節約用
##### `double`
* 実数を扱うときのスタンダード（らしい
* 入力の時は`%lf`、出力する時は`%f`を使う
##### `long double`
* できるだけ高い精度が欲しい時に使用
* 入出力には`%Lf`を使う

___

### `unsigned int`
C言語のもつ整数型の一つの`unsigned int`は非負整数を表現するためのもの。
負の整数が表現できない代わりに、表現できる正の数の範囲が広い。

通常の`int`は`signed`の文字が省略されるように、単に`unsigned`と書けば
`unsigned int`の意味を持つ。
**`unsigned int`を`printf`で表示するには`%d`ではなく`%u`を使う。**

___

### その他

* `printf`で%と他の指定の間に整数をかくと、表示の桁数を確保する。
例えば`%5d`とすると5文字の場所をとるようになる(最低文字数であるから整数がそれより大きければ勝手に拡張される)。それに加えて、
整数の前に0を書くと、左側の空白にゼロを詰める。
```c
printf("%02d", 5);    // これで05と表示される
```
* `printf`で浮動小数点数を表示させたいとき、`%.2f`と入力すると小数点以下が２桁になる。
`%5.2f`とすると全体で5桁、小数点以下が2桁になる。**ここで面白いのが!**
```c
printf("%5.2f", 123.45);    // このように入力するともちろん123.45と表示される
// しかし // 
printf("%5.2f", 123.456);    //このようにすると自動で四捨五入(<-間違い)し123.46になる
// コメント欄で指摘いただいているが、これは四捨五入ではなく偶数丸めというものらしい。
//　自分の環境で確かめてみても、四捨五入ではなかった！
// 偶数丸めとは丸める一つ上の桁が奇数の場合は5を切り上げ、偶数の場合は5を切り捨てることとのこと。
//　規格ではこの丸め方は定ってないとのことなので、これ以外の丸め方をされる場合もあるかもしれないので注意。
```
* `scanf`で複数入力したいときに、`scanf("%d%d", &a, &b);`に対して、1と2を間にスペースを入れて入力するとaに1、bに2がそれぞれアサインされる。空白類文字であれば入力の区切りとみなされるから、改行でもスペースでも構わないということ。

___

>今回の内容は富永和人氏の[新しいC言語の教科書](https://www.amazon.co.jp/%E6%96%B0%E3%81%97%E3%81%84C%E8%A8%80%E8%AA%9E%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8-%E5%86%A8%E6%B0%B8%E5%92%8C%E4%BA%BA-ebook/dp/B07P1TC98P)を参考に書き留めてます。
>[@fujitanozomuさんご指摘いただきありがとうございます。](https://qiita.com/fujitanozomu)
【Python】gradioで任意のHTML要素を作りたいときはgr.HTMLではなくgr.Markdownを使う？

# 概要
gradioで独自のhtmlを書きたいときに、gr.HTMLがなぜか機能せず、代わりにgr.Markdownを使ってなんとかしたという備忘録です。
gradioに入門したばかりなので、なにか初歩的な勘違い・ミスをしていたらすみません。

# 環境

macOSで実行し、Chromeで閲覧しました。

```
% sw_vers     
ProductName:	macOS
ProductVersion:	12.4
BuildVersion:	21F79
% /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --version
Google Chrome 109.0.5414.119 
% python -V
Python 3.10.2
% pip list | grep gradio
gradio                   3.16.2
```


# 経緯
gradioがとても簡単なのでなるべくgradioでアプリを作りたかったのですが、一部、gradioのコンポーネントでは対応できない機能をつけたかったので、独自のHTMLを挿入する方法を試行錯誤していました。

# 試したこと
gr.HTMLというコンポーネントがあったので使ってみたのですが、なぜか期待通りの表示になりませんでした。例えば、h1タグもh3タグも同じ大きさで表示されてしまいます。
そこで、gr.Markdownの中にhtmlを書いてみたところ、こちらは上手く機能しているようでした。

以下が例です。

```Python
import gradio as gr

html_text = "<h1>h1 text</h1><h3>h3 text</h3>"

with gr.Blocks() as demo:
  with gr.Row():
    with gr.Column():
      gr.Markdown("gr.HTML")
      html = gr.HTML(html_text)
    with gr.Column():
      gr.Markdown("gr.Markdown")
      markdown = gr.Markdown(html_text, label="Markdown")

demo.launch()
```

出力は以下です。
gr.HTMLではh1もh3も同じサイズであるのに対し、gr.Markdownでは適切なサイズで表示されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259353/618c3137-0432-266d-e839-ab106bfbdc58.png)

Chromeの「検証」機能で確認する限りではgr.HTMLのほうもh1, h3タグで埋め込まれてはいるようです。謎です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259353/21d3c973-51b6-4c27-bbad-e191662d5018.png)

今ひとつ釈然としませんが、任意のhtml要素を組み込みたいときはgr.Markdownを使おうと思います。
Node.js 18以降のSlim/Alpine版Dockerイメージ内からHTTPの疎通確認をワンライナーで行う

[Node.js公式Dockerイメージ](https://hub.docker.com/_/node)のうち、[Slim版](https://hub.docker.com/_/node/tags?page=1&name=slim)や[Alpine版](https://hub.docker.com/_/node/tags?page=1&name=alpine)には `curl` も `wget` も[入っていない](https://github.com/nodejs/docker-node/issues/1185)。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63934/002ca289-0606-e7d3-a556-a1e1225041bb.png)

よってコンテナ内からHTTPサーバーの疎通確認・死活監視などを行う際にこれらを使った方法は採用できない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63934/1d3225e2-c91f-30f7-962b-394be20bddb3.png)

```yaml:compose.yaml
services:
  service:
    # ...
    healthcheck:
      test: curl -f http://localhost:3000/ # --> 必ず `Unhealthy` になる
      interval: 5s
```

しかしNode.js 18以降（フラグ付きなら17.5以降）では [`fetch` が使用できるようになった](https://nodejs.org/docs/latest-v18.x/api/globals.html#fetch)ため、これで代替できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63934/9ab94cc2-f727-db70-022d-f539607f9b52.png)

```yaml:compose.yaml
services:
  service:
    # ...
    healthcheck:
      test: echo "fetch('http://localhost:3000/')" | node
      interval: 5s
```

ポートが複数の場合はforEachで回せる。

```bash
echo "[3000,6006].forEach(p => fetch('http://localhost:' + p))" | node
```

数珠つなぎにすることもできる。

```bash
echo "fetch('http://localhost:3000/');fetch('https://example.com/');" | node
```

自分自身の死活監視やちょっとしたコンテナ間依存関係の構築用であればこれで十分な場合も多いと思われる。
Tomcatのログ保存期間を変更

グループウェアGroupSessionのためJava+Tomcatをインストールしました。
Tomcatのログがローテートはされているが、世代管理というか保存期間が長いためログファイルがたくさん存在した。
そんなに長期間の保存も必要ないため、保存期間を短くする。
# Tomcat本体関連のログ設定
Tomcatインストール時に環境変数に設定したCATALINA_HOME配下のconf/logging.propertiesで設定するようです。

vi /usr/local/java/apache-tomcat/conf/logging.properties
```
1catalina.org.apache.juli.AsyncFileHandler.maxDays = 90
2localhost.org.apache.juli.AsyncFileHandler.maxDays = 90
3manager.org.apache.juli.AsyncFileHandler.maxDays = 90
4host-manager.org.apache.juli.AsyncFileHandler.maxDays = 90
```
上記の90を30に変更して、保存期間は30日にする。

# 各ホスト(ドメイン)ごとのアクセスログ
アクセスログの設定はCATALINA_HOME配下のconf/logging.propertiesで設定するようです。

vi /usr/local/java/apache-tomcat/conf/server.xml
```
<Valve className="org.apache.catalina.valves.AccessLogValve"
       directory="logs"
       prefix="localhost_access_log" suffix=".txt"
       pattern="%h %l %u %t &quot;%r&quot; %s %b"
       rotatable="true"
       maxDays="30"
/>
```
上記の様に「maxDays="30"」を追加で「rotatable="true"」でローテートが実行される。

# Java+Tomcatのインストール方法
インストール手順などはこちらを参考。

https://tech.yuzuyu.mobi/archives/375

インストールした環境は
OS : Rocky Linux release 8.6
Apache : 2.4.37
Java : Adoptium OpenJDK Temurin-11.0.17+8
Tomcat : 9.0.70
GroupSession : Ver.5.3.0
Amazon CloudFront でレスポンスヘッダーの削除

# 概要

https://aws.amazon.com/jp/about-aws/whats-new/2023/01/amazon-cloudfront-supports-removal-response-headers/

# 構成

CloudFront + S3 で動作を確認しました。（このあたりの構築は、基礎的な部分となるため、割愛します。）

# やってみた

## 通常アクセスの場合

```
curl -I https://dmxi1jm4zsfwg.cloudfront.net/
HTTP/2 200 
content-type: text/html
content-length: 4812
date: Fri, 03 Feb 2023 11:43:31 GMT
last-modified: Fri, 03 Feb 2023 10:47:01 GMT
etag: "3a4b1283da6cd877118ddaeaa04badec"
server: AmazonS3
vary: Accept-Encoding
x-cache: Hit from cloudfront
via: 1.1 af4dd14538c5ce3d234874e940f02082.cloudfront.net (CloudFront)
x-amz-cf-pop: NRT20-C1
x-amz-cf-id: 0YMBHa7agmxnw5h71LfpWpGswDTG5N0FH1oLoXXMgZh0fT9GJIvcwQ==
age: 123
```

## レスポンスヘッダーを削除した場合

CloudFront > ポリシー > レスポンスヘッダー > レスポンスヘッダーポリシーを作成
より、
「ヘッダーを削除」に削除するヘッダーを入力します。

![スクリーンショット 2023-02-03 20.14.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280929/366d7fb5-1f61-8d0e-4bed-34ea60e864ff.png)

CloudFront > ディストリビューション > <ID> > ビヘイビアを編集
より、
「レスポンスヘッダーポリシー」に先程作成したレスポンスヘッダーポリシーを指定します。

![スクリーンショット 2023-02-03 20.29.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280929/187f8209-a752-f285-bd49-10930e6c7db3.png)

`server` が削除されました。

```
curl -I https://XXX.cloudfront.net/
HTTP/2 200 
server: CloudFront
content-type: text/html
content-length: 4812
date: Fri, 03 Feb 2023 11:43:31 GMT
last-modified: Fri, 03 Feb 2023 10:47:01 GMT
etag: "3a4b1283da6cd877118ddaeaa04badec"
vary: Accept-Encoding
x-cache: Miss from cloudfront
via: 1.1 2ceddf204c01dd5fa5f2bb5a77f8beca.cloudfront.net (CloudFront)
x-amz-cf-pop: NRT20-C1
x-amz-cf-id: ASY4tcqk5amCw26YkuKaghVdMDuIJO48avO0oFl-cNiLQzqmEOoPGg==
```
Ruby if文を使った条件分岐

# 条件分岐の例

下記条件沿ってプログラムを書く。

- 条件1：10以下なら10以下の数字です
- 条件2：10より大きい数値なら10より大きい数字です
- 条件3：10以下でかつ0以下なら0以下の数字です


```ruby
input = gets.to_i
if input <= 0
  puts "0以下の数字です"
elsif input <= 10
  puts "10以下の数字です"
else
  puts "10より大きい数字です"
end
```

if文は先に書いた条件から判断していきます。<br>
先に書いた条件に当てはまった場合、それより後に書いた条件に当てはまったとしても、条件の処理はスルーされてしまいます。<br>
もし以下のように書くと、ターミナルではどのように出力されるか考えます。<br>

```ruby
if input <= 10
   puts "10以下の数字です"
elsif input <= 0
  puts "0以下の数字です"
end
```
上記条件で、10を入力すると、"10以下の数字です"と返ってきます。
上記条件で、0を入力すると、"10以下の数字です"と返ってきます。
上記条件で、−1を入力すると、"10以下の数字です"と返ってきます。
つまり、先にも書いたように、***if文は先に書いた条件から判断していく***ため、elsifで書いた条件の処理はスルーされてしまいました。

このように、条件分岐では、どの条件から記述していくのか考える必要があります。
[備忘]AWSにおけるセキュリティサービスの概要

## 概要
システムを運用する上で、セキュリティ面の対策を取ることは不可欠です。
AWS Well-Architected フレームワークの5本の柱に、セキュリティの柱が存在します。
クラウドでのセキュリティには7つの設計原則があるとされており、AWSはそれらを準拠するためのセキュリティサービスを提供しています。それらのサービスの一部を、備忘録としてメモしておきます。随時追記するかもしれません。

> ・[AWS公式] AWS Well-Architected フレームワーク セキュリティ
https://wa.aws.amazon.com/wellarchitected/2020-07-02T19-33-23/wat.pillar.security.ja.html

## 目次
1. AWS Config
1. AWS Security Hub
1. AWS CloudTrail
1. IAM Access Analyzer

## 1. AWS Config
- 一言で
AWSリソースの設定変更履歴を継続的に管理するサービス。

![①config.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754596/254b432e-5db4-c0d6-bb87-d9671466bb06.png)
> ・引用元
https://aws.amazon.com/jp/config/

- 特徴
１：アカウントごと利用でき、設定画面からAWS Configをオンにするだけで簡単に導入することができる。
２：設定した内容を時系列を追って管理することができる。
３：リソース間の関係性を記録することができる。
４：ある設定値に対して現在設定されているルールが準拠しているかどうかの監査ができる。
５：APIで連携することでGithubなどのサードパーティのリソースの監視が可能。

> ・configのサポート対象のリソースタイプは以下
https://docs.aws.amazon.com/ja_jp/config/latest/developerguide/resource-config-reference.html

## 2. AWS Security Hub
- 一言で
対象サービスを監視し、かつ監視結果の一言管理を行うサービス。

- 特徴
１：複数のサービスの管理やアラートを別々に確認するのは手間すぎるので、それらを一元管理して管理者に表示できる。
２：業界水準を満たす自動セキュリティチェックが行われるため、検知するスピードがはやい。
３：制限はあるもののAWSのサービスはもちろん、サードパーティのサービスも集約対象とでき、修復アクションに繋げやすい。
４：少ない設定で利用することができ導入が容易。

![②AWS Security Hub.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754596/24ad38d8-1f57-e9e0-193a-738f5220b9cd.png)

> ・引用
https://aws.amazon.com/jp/security-hub/

## 3. AWS CloudTrail
- 一言で
ユーザからのアクティビティやAPI使用などの操作を記録してくれる、また、AWSアカウントのガバナンス/コンプライアンス順守/運用・リスクの監査に役立つサービス。
![③cloudtrail.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754596/3857fd6b-5f9a-540d-4de4-7f743a88e7c4.png)

> ・引用 
https://aws.amazon.com/jp/cloudtrail/

- 特徴
１：CloudTrailは、アカウント作成時にそのAWSアカウントで有効になる
２：過去90日間は履歴の保管を無料、長期間保管したい場合は、S3（有料）などと連携する。
３：操作のイベントログが自動的に保存されるため、スムーズなコンプライアンス監査が可能。
４：「いつ」「誰が」「何を」したかを記録できるのでトラブルシューティングやHEの対策をうてる。

## IAM Access Analyzer
- 一言で
外部インターネットなどに意図せぬ公開設定がされていないかを検出し可視化するサービス

- 特徴
１：無料で使える。
２：外部公開しているサービスを把握できる。
３：複数リージョンに適用する場合リージョンごとに有効化する必要がある。
４：外部からアクセス可能かどうかの判定は各リソースのリソースベースポリシーを基に判定される。


> ・サポートされているリソース
https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/access-analyzer-resources.html


他にもセキュリティを担保するAWSサービスはたくさんありますが、今回はここまでとします。

## おわりに
システムをネットワークに晒すとなるとセキュリティ対策は必要不可欠なのですが、こんがらがるので備忘として記載しました。
色々対処すべき項目が多いので、楽に導入できるのはありがたいです。
全然網羅できていないので、こちらの記事は随時更新をかけていこうと思います。
Javascriptのbindを理解するためにthisを理解する

# はじめに
JavaScript(以下JS）初学者の筆者がbindを理解するために学習した内容をまとめます。
本記事はbindを理解するための前準備として、JSのthisの解説をします。
同じくJSを学び始めた方に向けに参考になればと思い投稿します。なお、誤り等ございましたら、ご指摘のほどよろしくお願いします。

# JSのthis
MDNで[bindについての記事](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)をみると以下のように記載されています。
> bind() メソッドは、呼び出された際に this キーワードに指定された値が設定される新しい関数を生成します。この値は新しい関数が呼び出されたとき、一連の引数の前に置かれます。

つまり、bindを理解するためにはまず、thisを理解する必要があります。

MDNで[thisについての記事](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/this)をみると以下のように記載されています。
>実行コンテキスト (グローバル、関数、eval) のプロパティで、常にオブジェクトへの参照です

実行コンテキストという、耳慣れない言葉が出てきました。では、実際にthisを出力してみて、どのようなものなのか確認してみます。

```js:検証1
const hoge = {
  fuga: 'piyo'
  testFunc() {
    console.log(this);
  },
};

hoge.testFunc() // 出力 { fuga: 'piyo', testFunc: [Function: testFunc] }
```
hoge.testFunc() の出力結果から、this は hoge を指していることがわかります。
この結果から、thisは実行された関数(testFunc）が所属するオブジェクト(hoge)を指していることがわかります。
次に以下を試します。

```js:検証2
testFunc = function () {
  console.log(this);
};
testFunc() // 出力 Object [global] { ...略... }
```
MDNの説明にあった、グローバルが表示されました。なお、以下を実行しても同じ結果が得られます。

```js:検証3
global.testFunc() // 出力 Object [global] { ...略... }
```
この結果から、検証１と同様、thisは実行された関数(testFunc）が所属するオブジェクト(global)を指していることがわかります。
なお、グローバルとはjsが用意した特別なオブジェクトのことです。

# まとめ
this とは 関数が所属するオブジェクトのことを指す。
Djangoで単一アプリに複数テーブルを持たせる方法

## 背景
Djangoで単一アプリの中に複数テーブルを持たせたかったのですが、2つ目以降のテーブルのマイグレーションに成功しても管理サイト上で表示がされなかったので、その問題を解消したかった。

## 問題
まずテーブルを2つ定義(練習なので2つのテーブルの中身は一緒です)。
```python:models.py
# 1つ目のテーブル
class People(models.Model):
	# 項目定義
    Name     = models.CharField(max_length=100)           # 文字列
    Tell     = models.IntegerField(blank=True, null=True) # 整数
    Mail     = models.EmailField(max_length=100)          # Email
    Birthday = models.DateField()                         # 日付
    Website  = models.URLField()                          # URL
    FreeText = models.TextField()                         # フリーテキスト

    # テキスト表示
    def __str__(self):
    	return self.Name

# 2つ目のテーブル 
class Dog(models.Model):
	# 項目定義
    Name     = models.CharField(max_length=100)           # 文字列
    Tell     = models.IntegerField(blank=True, null=True) # 整数
    Mail     = models.EmailField(max_length=100)          # Email
    Birthday = models.DateField()                         # 日付
    Website  = models.URLField()                          # URL
    FreeText = models.TextField()                         # フリーテキスト

    # テキスト表示
    def __str__(self):
    	return self.Name
```
その後、Migrationファイルを生成して

```python:
% python manage.py makemigrations
```
Migrateを実行
```python:
% python manage.py migrate
```
ところがこれだと1つ目のテーブルしか表示されない。
![スクリーンショット 2023-02-03 20.28.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224055/4f6276b2-c05c-3b59-c6ec-ff2210a44959.png)
## 解決方法
そもそも1つ目のテーブルを表示させる時にadmin.pyをいじったことを思い出す。
```python:admin.py
from django.contrib import admin
from . models import People

# Register your models here.
admin.site.register(People)

```
1つ目のテーブルのようにmodels.pyからPeopleだけでなくDogもimportして、registerしてみた。
```python:admin.py
from django.contrib import admin
from . models import People, Dog

# Register your models here.
admin.site.register(People)
admin.site.register(Dog)
```
見事にDogsも管理サイトに表示されました！
![スクリーンショット 2023-02-03 20.31.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224055/71df6325-892f-2b14-0c79-87e1b86c85e2.png)
## 気づき
こんな簡単なことが分からなかった自分が恥ずかしい。
実際には2つのテーブルを同時生成したのではなく、1つ目を作成して管理サイトに表示された後に2つ目を追加しました。1つ目を作成する際にadmin.pyでimportしてからregisterしていたのですが、2つ目でもそれをやればよかったわけです。
同じ動作が再現しない場合には、最初の動作で何をしたのかを思い出し、複製してみることが大事だなと思いました。
値レシーバとポインタレシーバ

# はじめに
Golangをちょっと触れてみたので備忘録としての自分用メモ

# レシーバとは
Goにはクラスは存在しない。そのためJavaで言うインスタンスメソッドも存在しない。
一方、構造体というものを定義することができ、構造体に対してメソッドを定義することができる。

メソッドは以下の文法で記述される
`func (レシーバ 構造体) メソッド名(引数) 返り値` 

```golang
package main

import "fmt"

func main() {
	s := Student{"nobita", 60, 60}
	fmt.Println(s.name, s.avg()) // nobita 60
}

type Student struct {
	name    string
	math    float64
	english float64
}

func (s Student) avg() (avgRes float64) {
	avgRes = (s.math + s.english) / 2
	return
}
```

# 値レシーバとポインタレシーバ
端的にまとめると
- 値レシーバ
    - レシーバがポインタではない
    - メソッド内でレシーバの値を書き換えることが**できない**
- ポインタレシーバ
    - レシーバがポインタ
    - メソッド内でレシーバの値を書き換えることが**できる**

ポインタレシーバを使ってmath及びenglishの値を書き換えるメソッド`cheat`を作ってみる。
```golang
package main

import "fmt"

func main() {
	s := Student{"nobita", 60, 60}
	fmt.Println(s.name, s.avg()) // nobita 60

	s.cheat()
	fmt.Println(s.name, s.avg()) // nobita 90
}

func (s *Student) cheat() {
	s.math += 30
	s.english += 30
}
```
Windowsのバッテリー残量チェック：VBScriptでMsgBoxとトースト通知

Windows11でバッテリー残量20%以下と80%以上をチェックしたかったので、ネットで調べてVBScriptで作成。
バッテリーチェックはほぼそのまま使えるのが多くあったけど、トースト通知は無かったので難しかった。


```vb
Option Explicit

Dim oLocator, oServices, oResults, oResult
Dim iFull
Dim iRemaining, bCharging
Dim iPercent

Set oLocator = CreateObject("WbemScripting.SWbemLocator")
Set oService = oLocator.ConnectServer(".","root\wmi")
' フル充電量を取得
Set oResults = oService.ExecQuery("select * from batteryfullchargedcapacity")
For Each oResult In oResults
    iFull = oResult.FullChargedCapacity
Next

While (1)
    ' 充電状態と、充電量を取得
    Set oResults = oServices.ExecQuery("select * from batterystatus")
    For Each oResult In oResults
        iRemaining = oResult.RemainingCapacity
        bCharging = oResult.Charging
    Next
    ' 充電％を取得
    iPercent = ((iRemaining / iFull) * 100) mod 100

    ' 充電中で80%以上の場合
    If bCharging and (iPercent >= 80) Then
        Notify "バッテリーチェック", "バッテリーは " & iPercent & "%です。充電を終了してください。"
        MsgBox "バッテリーは " & iPercent & "%です。充電を終了してください。", vbInformation, "バッテリーチェック"
    End If
    ' 充電無で20%以下の場合
    If Not(bCharging) and (iPercent <= 20) Then
        Notify "バッテリーチェック", "バッテリーは " & iPercent & "%です。充電してください。"
        MsgBox "バッテリーは " & iPercent & "%です。充電してください。", vbInformation, "バッテリーチェック"
    End If
    ' スリープ。ミリ秒指定で5分。
    WScript.Sleep 300 * 1000
Wend

' 通知
Public Function Notify(ByVal title, ByVal msg)
    Const PSpath = "powershell.exe"
    Dim WsShell
    Dim strCommand

    ' 実行するpowershellを指定
    strCommand = """" & PSpath & """ -Command " & Chr(34) & "& { "
    strCommand = strCommand & "$ToastText02 = [Windows.UI.Notifications.ToastTemplateType, Windows.UI.Notifications, ContentType = WindowsRuntime]::ToastText02"
    strCommand = strCommand & "; $TemplateContent = [Windows.UI.Notifications.ToastNotificationManager, Windows.UI.Notifications, ContentType = WindowsRuntime]::GetTemplateContent($ToastText02)"
    strCommand = strCommand & "; $TemplateContent.GetElementsByTagName('text').Item(0).InnerText = '" & title & "'"
    strCommand = strCommand & "; $TemplateContent.GetElementsByTagName('text').Item(1).InnerText = '" & msg & "'"
    strCommand = strCommand & "; $AppId = '{1AC14E77-02E7-4E5D-B744-2EB1AE5198B7}\WindowsPowerShell\v1.0\powershell.exe'"
    strCommand = strCommand & "; [Windows.UI.Notifications.ToastNotificationManager]::CreateToastNotifier($AppId).Show($TemplateContent)"
    strCommand = strCommand & " }" & Chr(34)

    ' powershellを実行
    Set oShell = CreateObject("WScript.Shell")
    oShell.Run strCommand, 0, False
End Function

```



## 実行前に必要な設定
トースト通知にPowershellを使用しているので、Powershellの実行権限が必要。
デフォルトだと「Restricted」で実行できないはずで、以下のコマンドで権限付与。
※各オプションの意味を確認の上ご利用を。
```powershell
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser -Force
```
現在の設定は以下で確認可能。
```powershell
Get-ExecutionPolicy
```


## 終了方法
VBScriptを終了させる場合はタスクマネージャーから「Microsoft Windows Based Script Host」を終了させる。
Windows11だとタスクマネージャーのプロセスタブよりユーザタブのほうが見つけやすかった。
Codableを簡単にアウトプットする

## はじめに
CodableとはEncode・Decodeの両方を兼ね備えたプロトコルである。
JsonEncoderクラスとJsonDecoderクラスを利用してCodableに準拠した型からJSONへのエンコードとJSONからCodableに準拠した型へのデコードを行う。


## ソースコード
```swift:Swift
//Codableに準拠した型
struct SomeStruct: Codable {
    let value: Int
}

let someStruct = SomeStruct(value: 1)

//Somestruct型をJSONバイト列にエンコード
let jsonEncoder = JSONEncoder()
let encodedJsonData = try! jsonEncoder.encode(someStruct)

print(encodedJsonData) // 11 bytes >>> JSONバイト列になった
print(type(of: encodedJsonData)) //Data型

//出力結果を分かりやすく把握するため、Data型からString型へ変換
let encodedJsonString = String(data: encodedJsonData, encoding: .utf8)!
print(encodedJsonString) // {"value":1}　と出力される → Somestruct(value: 1)がJSONにエンコードされた


//先ほどエンコードしたJSONバイト列(値)をSwiftの値へデコード（元に戻す）する
let jsonDecoder = JSONDecoder()

//ここでいうJSONバイト列とは先ほどエンコードしたencodedJsonDataのこと
//decode(Somestruct.self）と定義したのは、Somestructオブジェクトごと参照するため .selfと付ける
let decodedSomeStruct = try! jsonDecoder.decode(SomeStruct.self, from: encodedJsonData)
print(decodedSomeStruct) // Somestruct(value: 1)

}
```

## おわりに
間違え等がございましたらぜひコメント欄でご指摘ください。

## 参考記事
[Codable | Apple Developer Documentation](https://developer.apple.com/documentation/swift/codable)

[[増補改訂第3版]Swift実践入門 ── 直感的な文法と安全性を兼ね備えた言語 (WEB+DB PRESS plusシリーズ)　](https://www.amazon.co.jp/%E5%A2%97%E8%A3%9C%E6%94%B9%E8%A8%82%E7%AC%AC3%E7%89%88-Swift%E5%AE%9F%E8%B7%B5%E5%85%A5%E9%96%80-%E7%9B%B4%E6%84%9F%E7%9A%84%E3%81%AA%E6%96%87%E6%B3%95%E3%81%A8%E5%AE%89%E5%85%A8%E6%80%A7%E3%82%92%E5%85%BC%E3%81%AD%E5%82%99%E3%81%88%E3%81%9F%E8%A8%80%E8%AA%9E-PRESS-plus%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA/dp/4297112132)
↑引用元
石川 洋資 (著), 西山 勇世 (著)
発行者：片岡 巌
出版社：技術評論社
印刷/製本：日経印刷株式会社

## 開発環境
- Xcode-13.4.1
- Swift version 5.7
Console classを使ってコンソール入力

netbeansからこのプログラムは実行できない
command promptで実行している
```java
public class Outer {
    public static void main(String[] args) {
        Console c = System.console();
        String s = c.readLine();
        System.out.println("you typed " + s);
        char[] cs = c.readPassword();
        System.out.println("you typed " + String.valueOf(cs));
    }
}
```
```
ooo
you typed ooo

you typed ppp
```
特許データのクロス集計問題を考える

## クロス集計とは
クロス集計とは、2つの変数の関係性を視覚的に表示する手法です。2つの変数を軸にして、各グループの組み合わせの数の分布を示します。

例えば、以下の出願人と分類のグループがある場合には、
|  出願人  |  分類  |
| :---: | :---: |
|  A  |  X  |
|  B  |  Y  |

クロス集計表は、以下となります。
|    |  X  | Y   |
| :---: | :---: | :---:   |
|  A  |  1  | 0   |
|  B  |  0  |  1  |
## 特許データの問題点
特許データでは、以下のように出願人や分類に複数の要素を含む場合があります。というより、ほとんど含んでいます。

|  出願人  |  分類  |
| :---: | :---: |
|  A  |  X  |
|  A,B  |  X,Y  |

これを単純にクロス集計すると、以下のようになります。これでも問題ないといえば、ないのですが、正確にはA,BはAとBに分けたい気もしますし、X,YはXとYに分けたい気もします。
|    |  X  | X,Y   |
| :---: | :---: | :---:   |
|  A  |  1  | 0   |
|  A,B  |  0  |  1  |

また、筆頭出願人や筆頭分類に限定して、下記のようなクロス集計をする場合もあります。excelで処理する場合に多く用いられる方法です。これも使い方によっては問題はないと思いますが、BやYの個数が0となってしまうところが気になるところです。

|    |  X  | Y   |
| :---: | :---: | :---:   |
|  A  |  2  | 0   |
|  B  |  0  |  0  |

厳密にクロス集計をしますと以下の表となります。これは私が手計算（というほどのものでもないですが）で作ったものです。２行程度であれば手計算も考えられますが、10行、100行となりますと人手での計算は無理です。

|    |  X  |  Y   |
| :---: | :---: | :---: |
|  A  | 2  | 1   |
|  B  |  1  |  1  |

## やりたいこと
上記手計算をプログラムで自動化したい。

## 方法
ChatGPTに聞いたところ、explodeメソッドを使えばよいとのことでした。

Pandas の explodeメソッドは、データフレーム中のシリーズ（1列）内の要素を展開するためのものです。これは、配列やリストを含む1列を、各要素に対応する列に分割することができます。

## コード
それでは実際に試してみます。

まず、データフレームを作成し、単純にクロス集計してみます。
```python
import pandas as pd
data = {'出願人': ['A', 'A,B'],
        '分類': ['X', 'X,Y']}
df = pd.DataFrame(data)
# クロス集計して出力
ct1 = pd.crosstab(df['出願人'], df['分類'])
print(ct1)
```
クロス集計表は以下となります。単純なクロス集計となります。
```
分類   X  X,Y
出願人        
A    1    0
A,B  0    1
```
次に、explodeメソッドを実行します。
```python
# ,で分類を分割
df['分類'] = df['分類'].str.split(',')
# ,で出願人を分割
df['出願人'] = df['出願人'].str.split(',')
# 分類と出願人をエクスプロード
df = df.explode('分類').explode('出願人')
# エクスプロードしたデータフレームを出力
print(df.to_string(index=False))
```
データフレームは以下のように変形されます。２行のデータフレームが、A,BとX,Yを展開することにより５行のデータフレームに変形していることがわかります。
```
出願人 分類
  A  X
  A  X
  B  X
  A  Y
  B  Y
```
次に、クロス集計してみます。
```python
# クロス集計して出力
ct2 = pd.crosstab(df['出願人'], df['分類'])
print(ct2)
```
出力は以下のようになります。先ほどの手計算のクロス集計表と同じとなりましたので、うまく処理できていることがわかります。
```
分類   X  Y
出願人      
A    2  1
B    1  1
```
## まとめ
感想は、こんなに短いコードでよいのか?となります。次回は、実際の特許データを使用して検証してみようと思います。
コワーキングスペースは要らない

コワーキングスペースに関する意識調査

https://qiita.com/incLINK/questions/ebbecab0a74a8b0fc441

いくつかの点を疑問に思った。　

コワーキングスペースをなんだと思っているかがわからない。　

個室の集まりであれば、漫画喫茶で十分。　

漫画喫茶でも、ダーツ場、ビリヤード場など、複数人で楽しめる空間もある。　

会議室などがあれば、こワーキングスペースは要らない。　

ネットがあり、フリドリがあれば十分。　

コワーキングスペースが漫画喫茶より値段が高いってどゆこと。Do you  know me?


これまで、１０回以上、こワーキングスペースを使ったのは、すべて勉強会。　

でも、勉強会のうち、コワーキングスペースを使ったのは20回に１回くらい。　

|場所|一人あたり費用|利用回数|課題
|:--|:--|:--|:--|
|公的機関の会議室（無料）|0円|1,000||　
|公的機関の会議室（有料）|100-500円|100||　
|ホテル、旅館|1000円-2000円|100|宿泊・食事込みはお得|
|企業の会議室（無料）|0円|100||　
|企業の会議室（有料）|100-500円|100||　
|有料会議室|500円-1000円|50||
|コワーキングスペース|0円-2000円|20|利点なし|

公的機関には大学を含む。
こワーキングスペースを借りている方の主催の場合には、企業の会議室と同様、無料の場合もあった。　

コワーキングスペースは要らないかも。　

要るとすれば、技術的な組織がその組織の活動の一環として設置している場合。　

大学、研究所、製造業など。アンテナショップを兼ねたり、外部講演会場を兼ねたり。多目的施設として。　

民営のコワーキングスペースには食指が動かない。
[MTG] 議論の進行方法について

# 目的
日々開催されるミーティングの問題を減らすために、議論の進行の重要性について考える
# 記述しないこと
- 議論の進行以外のこと（範囲が広いのでこのような表現にした）

# アジェンダ、資料の事前共有
### 共有
- ミーティングが始まる前に伝えるべきこと
    - アジェンダ（どんなことを話すのか）
    - しりょう（議論したいことをまとめたもの）
  
MTGは非常にコストが高いので、事前に理解の下地を作ってもらう
当日になって最初から話すと、時間がかかる（非効率）

## アジェンダ
メールやチャットで話す内容を簡潔にまとめておく
リサーチが必要なMTGの場合、先に伝えておくべし


# 議論の進行
ファシリテーターとして押さえておきたいスムーズな議論の進め方

## ミーティングで避けたいこと
- ゴールを見失い、議論が迷走する（何のために話してたっけ？）
- 時間切れ（参加者の集中力切れ、続きのMTGの設定の手間、労力の無駄）
## 対応
- 最初に必ずゴールを確認する（目的〜結論）
- 最初に時間を確認する（どこに時間をどれくらいかけるか）

# ゴール、時間を確認する
## 時間の確認
- ミーティングの進め方と時間配分を最初に確認
- 時間管理＝タイムマネジメントを大事にする
# 意見を出す、尊重する
 ## 問題
- 最初に意見を出すのは気が引ける
## 対応
- リーダーが何か意見を言ってくれると周囲も意見しやすい
- 他のメンバーの意見を尊重する姿勢があると議論が活発に
    - 会議の雰囲気作りが大事

# 例えば？？？？
## 問題
- 抽象的な意見だと、議論が進まない場合が多い
## 対策
- 具体例を出してもらう
# それって。。。誰のため？
## 問題
- いつの間にか、お客様＝自分と錯覚することがある
## 対策
- ペルソナを意識する
    - 誰のためかの具体的なイメージを作って、メンバーで共有してから議論する
    - ペルソナは超具体的に
        - 京都在住
        - 17人家族
        - 年収2兆円
        - 週末に穴掘り
        - 画像があるとイメージしやすい
# ホワイトボード、モニターを活用する
## 問題
- 議論が進むうちに
    - 何話してたっけ、今何の話だっけってなる
    - 今議論していることをメンバー全員が見える状態にすることが重要
## 対策
- ホワイトボード、モニターの仕様
    - メンバーの意見を集中させる
    - メンバーの視線、注目を集中させる
- ファシリテーターは積極的に近くにいるように
    - 他人任せにしない
    - 議論のリーダーシップを図る
- 議論を進める上で重要なことはホワイトボード、モニターに反映させる
    - 今日のアジェンダは？ゴールは？時間配分は？ペルソナは？
## 議論の脱線を防ぐ
## 問題
- 別件の議論がされてしまった場合、元々の目的を見失いがち
## 対応
- 貴重なご意見ありがとうね〜〜
    - すまんけど、先に元々の話してから、それについて話そうぜ
- ファシリテーターはメンバーの意見を聞きすぎない
    - 幅広い意見を聞きすぎると、大事な議論に集中できなくなる
        - その話ほんまはしたいねんで。。。でもね。。。すまんけどちょっと元々の話させてな。。
            - しっかり仕切ろう
- 重要でない意見は切り捨てる勇気も！

## 参考
[【 ミーティングのムダをなくす 】効率的なミーティング＆ファシリテーションの基本ルール【クイック学習コース】](https://www.udemy.com/course/efficient_meeting/)
【CSH】よくあるsplit関数で分割した文字列を配列に取り込む方法(awk)

cshにもsplitはあるけど、掲題のような用途ではないですね。
PowershellやVBなんかでよくsplitをこういう使い方しますよね。

cshではこんな風に実現します。

# 素龍諸ん

例えばよくあるのは、ファイル名から日付データを取り込みたい場合とか。
年月日を取るのに三行もコード書くのバカバカしいですよね。
だからこうします

```sh:csh
///対象のファイル名：console.2023.01.01.log
foreach f(`ls`)
    set YMD = (`echo $f | awk -F.'{print $2,$3,$4}'`)
    set DateSTR = `date -d"$YMD[1]/$YMD[2]/$YMD[3] + 1 days ago" +%Y%m%d`
    echo $DateSTR
end
///出力結果
20221231
```

# 解説
``set YMD = (`echo $f | awk -F.'{print $2,$3,$4}'`)``
キモいところから行きますね。
変数に入力するとき、カッコで囲うと配列として代入されます。
配列のデミリタ(区切り文字)は空白かタブか改行なので、
printするものをカンマ区切りにすると空白で区切るので、いい具合に配列化されます。
※つまり、文字列に改行があると、そこで…(こわ)

``set DateSTR = `date -d"$YMD[1]/$YMD[2]/$YMD[3] + 1 days ago" +%Y%m%d` ``
余談だけど使い方の説明になるので一応。
配列なのでインデックスを指定せねばなりません。
cshはなぜか1スタートなので、0はないです。
んで、上記の通り`$YMD[1]`こんな風に[]で要素数を入力します。

もっと余談になりますが、要素数を知りたい場合は`$#YMD`と入力します。

そして全く関係ないdateコマンドの説明ですが、`-d`で出力する日付を指定できます。
んで、大体の場合取得できた日そのままを愚直に欲しい場合ってそんなないので、
前日を取るサンプルにしています。

ちなみに、1ヶ月後の昨日を欲しい場合は
`date -d"1 months + 1 days ago"`
っすね。これ、なんぼでも繋げるそうです。
無限じゃあないでしょうけども。

ではこんなもんで。さようなら
consoleから文字を入力

InputStreamReaderにSystem.inを指定してnewすると、console inputとなる

```java
public class Outer {
    public static void main(String[] args) {
        InputStreamReader is = new InputStreamReader(System.in);
        BufferedReader bs = new BufferedReader(is);
        try{
            try(bs) {
                    String s = bs.readLine();
                    System.out.println(s);
            }
        } catch (IOException ex) {
            ex.printStackTrace();
        }
    }
}
```
```
ppp      //me typed
ppp      //show in console
```
LINE公式アカウントについての初歩的な知識

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/9eb9e62f-a560-12d1-6e28-11760ee7e921.png)

---
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/e718f97a-3a86-a388-1e1a-4ef62a85678d.png)

---
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/45c2d557-e140-0278-6256-1836332d1548.png)

---
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/136fd004-b8bd-154e-1fd8-5ae9689dcde2.png)

---
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/7d9ef64e-3c7a-7887-d48d-5c57f7ec7197.png)

---
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/ea3c60cb-9651-5a43-d2c4-2b772db4493d.png)

---
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/d504a252-7964-f061-cc44-9264e75fab18.png)

---
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/71e0a56f-44c5-255c-1879-22bbf3609433.png)

---
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/eac52bb2-15d7-50b3-15c1-08a500d27c99.png)

---
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/2ca54ad1-251f-3501-2dac-4c434d6aa812.png)

---
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/73e1dc85-df1c-cea0-8008-719ae606bc6b.png)

---
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/ec05b32a-777f-a7f9-18b1-7dd8cc4a2316.png)

---
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/6abeb719-4450-d3f8-dcc3-520e564d493b.png)

---
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/b66b69f1-56e7-176e-2ca8-97d4e091aaf6.png)

---
![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/2a0d34c1-8b45-9e26-27d0-8fc109e41cf8.png)
Yolov5を動かしてみた

# やりたいこと
* とりあえずYolov5を動かしてみる
* 自分でアノテーションしたデータセットで学習させる
* 自分で学習させた重みファイルで認識させてみる
※精度は無視してとりあえず動かすことに重きを置いた記事です。

# とりあえずYolov5を動かしてみる
## Yolov5をダウンロード
githubからリポジトリをクローンしてくる。
作業フォルダをあらかじめ作っておくと良いかもしれません。
```shell
git clone https://github.com/ultralytics/yolov5
```
特に意味はないけどフォルダの画像を載せておきます。
![スクリーンショット 2023-02-03 18.37.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471496/22193c0a-432a-85aa-1d11-3e20488f30e3.png)

## 必要なライブラリをインストールする
requirement.txtから必要なライブラリをインストールします。
仮想環境をあらかじめ作っておくと良いかもしれません。

```shell
cd yolov5
pip install -r requirements.txt
```
たったこれだけで準備完了です。


## デフォルトのデータを使って認識
data/imagesフォルダの中にサンプル画像が格納されています。
このデータを用いて事前に学習済みの重みファイル「yolov5s.pt」を用いて認識させてみます。
```shell
python detect.py --source data/images/bus.jpg --conf 0.5 --weights yolov5s.pt
```
認識結果はruns/detectフォルダ内に出力されます。

![スクリーンショット 2023-02-03 18.41.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471496/921bd7c3-d502-a23e-b9d0-966d9d96536d.png)

yolov5s.ptはフォルダ内に見当たりませんが、detect.pyの初回起動時に自動でダウンロードされるようになっているそうです。どうしても気になる方は[こちら](https://github.com/ultralytics/yolov5/releases)に入っているのでご確認ください。


# 自分でアノテーションしたデータセットで学習させる
## アノテーションツール
2つアノテーションツールを紹介します。
* Roboflow
yolov5公式？なのかtutorial.ipynbで紹介されています。今回はこちらを使用しましたが、機能が充実していて使いやすいし共同作業ができるようです。しかし、欠点としてはアカウント登録が必要なところや商用利用の場合は商用アカウントの登録が必要？？そうです。これは自分では調べていないので商用利用する方は調べてからご使用ください。

![スクリーンショット 2023-02-03 19.07.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471496/20929414-f686-dad4-88e5-96e79deb2f11.png)

* LabelImg
こちらも使いやすいツールだと思います。pipでインストールも可能でアカウント登録も不要です。日本語対応なのもありがたいところです。
![スクリーンショット 2023-02-03 19.09.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471496/91ff9d35-f8a3-e74e-1868-750f95665a93.png)

## アノテーション
アノテーションの方法は長くなるのでここでは割愛いたします。
特に難しくもないので上記ツールを用いて検索を駆使すれば利用可能かと思います。
アノテーションをすると以下のファイルが作成されます。
Labelimgの場合は自分でファイル構成を整える必要があるかもしれないです。

images
 ┗ ****.jpg
labels
 ┗ ****.txt


## 学習させる
まずはyamlデータを作成します。
yamlデータはdata/data.yamlか以下を参考に作成してください。（train,validに分けないといけないんですかね。。。）
```python
train: data/train/images # 学習の画像のパス
val: data/valid/images # 検証用画像のパス

nc: 1 # クラスの数
names: [ 'cat' ] # クラス名
```
coco128.yamlの中身を参考に載せておきます。
![スクリーンショット 2023-02-03 19.24.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471496/be749e02-2f91-1372-b38c-43f28f123730.png)

```shell
python train.py --data data/data.yaml --cfg models/yolov5s.yaml --weights '' --batch-size 8 --epochs 300
```
学習にはかなり時間かかります（CPUの場合）。私は１２０枚程度の画像で８時間以上かかりました。

学習結果はruns/trainフォルダ内に重みファイルが作成されます。

# 自分で学習させた重みファイルで認識させてみる
--source引数を0にするとWebカメラで、動画ファイルにすると動画ファイルを、画像ファイルにすると画像ファイルを、フォルダにするとそのフォルダ内にある画像全てに対して処理を実行します。ちなみに--view-img引数を取ると処理結果をWindowで表示してくれるようになります。

```python
python detect.py --source data/images/ --weights best.pt
```

# 最後に
備忘録的に書いているのでもし分かりにくかったらすみません。
正直本家のtutorial.ipynbファイルがとても分かりやすく記載してくれているのでぜひそちらもみていただければと思います。
【CSH】テキストデータを一行ずつ変数にブチ込む方法

いにしえのCSHを使ってスクリプトを書いてると、不便すぎて色々不都合が出てきます。
当記事はそんないにしえのCSHを使わざるを得ない人々に向けた記事です。

# 問題提議
CSHでテキストファイルを一行ずつ出してもらうにはどうするか。
普通はこうだ

```sh:csh
///textfile.txt の中身
///　AAA BBB　CCC
///　DDD EEE FFF
foreach f(`cat textfile.txt`)
    echo $f
end

///出力結果
AAA
BBB
CCC
DDD
EEE
FFF
```
は？おまえあほなん？

# イシュー
そう！CSHは空白やタブ、改行で区切って配列化しまうのだ！
もちろん、一行ずつcatを繰り返すことで実現は可能だけど、
デカいテキストを毎回開くのは時間がかかりすぎる

# ではどうするか
以下のように実現する
```sh:csh
@ tcc = `cat textfile.txt | head -1 | wc -l`
   //tcc = textcolumncountの略。
@ tc = `cat textfile.txt | wc -l`
   //tc = textcountの略

set text = (`cat textfile.txt`)

foreach f(`seq $tcc $tcc $tc`)
    @ s = $f - ($tcc - 1)
    echo text[$s-$f]
end
///出力結果
AAA BBB　CCC
DDD EEE FFF
```
ややこしい・・・めんどくさい💢
しかもこれ、先頭一行のスパンが異なると使い物にならないというね…
怒りだ！怒りしかない！

# 一応、根本解決策はあるらしい
配列にテキストをブチ込んだ時にデミリタ(区切り位置)をどうするかというパラメタがあるらしい。
が、一度試してみたがまともに動かなかったので諦めました。
使える人は使えばいいんじゃないですか。

俺みたいに上記の方法で解決しない人は素直に[
`cat "なんかテキストファイル" | head -n $i | tail -1`
でやるか、bash使わせてと管理職に泣きつくのがいいんじゃないですかね。
///ITエンジニアとしてはそれが正しい

他になんかいい手段あったら教えてください
ではまたn
FileInputStream class

FileInputStreamを使用して画像の読み込み
FileOutputSttreamを使用して画像の書き込み
```java
public class Outer {
    public static void main(String[] args) {
        try {
            FileInputStream fis = new FileInputStream("C:\\dirtest\\cook.jpg");
            BufferedInputStream ibs = new BufferedInputStream(fis);
            FileOutputStream fos = new FileOutputStream("C:\\dirtest\\cookcpy.jpg");
            BufferedOutputStream bos = new BufferedOutputStream(fos);
            try(ibs;bos) {
                while(true) {
                    byte[] bt = ibs.readNBytes(1024);   //1024byte づつread
                    if(bt.length == 0) break;
                    bos.write(bt);
                    bos.flush();
                }
            }
        } catch (IOException ex ){
            ex.printStackTrace();
        }
    }
}
```
【カレンダー】Reactでカレンダーアプリを実装する

## はじめに
標題通り、Reactでカレンダーアプリの実装を実施していきます。

## ソースコード

```tsx:App.tsx
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';

function App() {
  return (
    <div>
      <FullCalendar plugins={[dayGridPlugin]}/>
    </div>
  );
}

export default App;

```

![スクリーンショット 2023-02-03 18.32.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/bbeaf513-6a0a-b061-757d-39135519693f.png)


## 日本語表記に対応
```
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import jaLocale from '@fullcalendar/core/locales/ja'; 

function App() {
  return (
    <div>
      <FullCalendar plugins={[dayGridPlugin]} locales={[jaLocale]} locale='ja' />
    </div>
  );
}

export default App;

```
![スクリーンショット 2023-02-03 18.35.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/43729a06-dfb3-6c45-1722-908bbd03b36c.png)


```tsx:App.tsx
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import jaLocale from '@fullcalendar/core/locales/ja'; 
import dayjs from 'dayjs';

function App() {
  const today = new Date();
  const tomorrow = dayjs(today).add(1, 'day').toDate();
  return (
    <div>
      <FullCalendar plugins={[dayGridPlugin]} locales={[jaLocale]} locale='ja'
       events={[
        {title:'event1', start: '2023-02-03', end: '2023-02-03'},
        {title:'event2', start: '2023-02-04', end: '2023-02-04', color: 'red', textColor: 'black'},
        {title:'event3', start: today, end: tomorrow, color: 'white', textColor: 'green'},
      ]}
      />
    </div>
  );
}

export default App;

```
![スクリーンショット 2023-02-03 18.49.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/ef8d9de0-534a-e272-82f2-86dc650f5d09.png)

## 予定の追加
```tsx:イベントの追加
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import jaLocale from '@fullcalendar/core/locales/ja'; 
import dayjs from 'dayjs';
import { useState } from 'react'

function App() {
  const today = new Date();
  const tomorrow = dayjs(today).add(1, 'day').toDate();
  const event = [
    {title:'event1', start: '2023-02-03', end: '2023-02-03'},
    {title:'event2', start: '2023-02-04', end: '2023-02-04', color: 'red', textColor: 'black'},
    {title:'event3', start: today, end: tomorrow, color: 'white', textColor: 'green'},
  ]

  const [events, setEvents] = useState(event);

  const handleEventClick = () => {
   const event =  {title:'event4', start: today, end: tomorrow, color: 'white', textColor: 'green'}
    setEvents([...events, event])
  }


  return (
    <div>
      <button onClick={handleEventClick}>test</button>
      <FullCalendar plugins={[dayGridPlugin]} locales={[jaLocale]} locale='ja'
       events={events}
        initialView="dayGridMonth"
        eventClick={handleEventClick}
      />
    </div>
  );
}

export default App;
```

![スクリーンショット 2023-02-03 19.38.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/ffbb704c-e88c-b0a0-a643-69ea6939fb0f.png)
No2_ググったこと投稿(5分)_DB関連


## 目次
 [1.where句で集計関数が使えない](#1-where句で集計関数が使えない)
 [2.whereとhavingの違い](#2-whereとhavingの違い)
 [3.EXIST演算子](#3-EXIST演算子)
 [4.existとjoinの使い分け](#4-existとjoinの使い分け)


# 1. where句で集計関数が使えない
- 絞り込み条件に集計関数(count/sum/max)を使いたい場合はhavingを利用する

# 2.whereとhavingの違い
- 呼ばれるタイミングが違う
    1. from 
    2. where
    3. groupby
    4. having
    5. select
    6. orderby
- where
    - グループをされる前の段階、つまり元々のデータでの抽出条件を指定できる
- having
    - グループ化した後の情報での、抽出条件を指定できる。



# 3. EXIST演算子（句）問合せ
- 書き方
    - exists(サブクエリ)
    - not exists(サブクエリ)
- 例
``` select * from products where exists (select id from sale) ```


# 4. existとjoinの使い分け
- 結論
    - 別テーブルの情報を出力対象にしたい場合はJOIN
    - 別テーブルの情報を抽出条件に使用するだけの場合はEXISTS

- EXISTS
    - あくまでレコードが存在するかの条件なのでサブクエリで出力するカラムはなんでも良いのですね
  

### 使い分けの疑問
JOINでも、出力しなかったらEXISTSと同じでは？

- 結論
    - 結合元と結合先のテーブルが1：1の場合に限る
    - 1 : N の関係ですと結合先のレコードが重複して出力されるがDISTINCTでまとめれる
        - だが、処理速度がかかるため、集計データなどの大量のデータを出力したい場合ですと、無視できない時間になってしまいます。


- ## 恥ずかしいですが・・
業務中に調べてことを振り返っていたのですが、
本当に基本的な知識が抜けているのだなぁと感じております。。
継続して知識を付けていきます
エンジニアインターン11日目

今日はたくさんあるurlをDBに保存し、管理して、DBからスクレイピングで利用するurlをsql分で呼び出す仕組みを作った。select文を使って値を取り出すまではできたが、取ってきた値を配列に入れることは出来なかった。list = val1:[val2,val3]のように形を作ってlistを空の配列にappendしたがうまくいかなかった。おそらくlistに渡す形が悪かったと考えられる。今週1週間は初めて触る言語やawsなど自分にとっては難しく感じた1週間だった。しかし、プログラミング言語は構造は大体似ているため、どのようにコーディングすれば良いのかはなんとなくイメージできた。awsに関してはまだまだ仕組みの理解度は低いがこれからたくさん使っていくことは確実なので頑張って勉強して行く。徐々にタスクに対する責任感を感じるようになり、チームの一員に加わった気分がしてもっと努力しないといけないなと改めて思った1日だった。来週もがんばろ！
FileWriter class

FileWriterにてfile writeができる。
BufferedWriterを使うことによりまとまった単位での書き込み
flushはメモリとファイルの同期をとる
FileWriterのsecond argumentはappendするか否か

```java
public class Outer {
    public static void main(String[] args) {
        try {
            FileWriter fw = new FileWriter("C:\\dirtest\\testwritefile.txt",true);
            BufferedWriter bw = new BufferedWriter(fw);
            try(bw) {
                bw.write("hello");
                bw.newLine();
                bw.write("my fiend");
                bw.newLine();
                bw.flush();
            } 
        } catch (IOException ex) {
            ex.printStackTrace();
        }
    }
}
```
LINE WORKSについての初歩的な知識

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/dedf6c21-0712-c530-4b3f-88ffa78ffc8b.png)

---
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/cfd5e65f-eb8a-0192-78a6-e78b814d2592.png)

---
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/6a389959-a23b-7489-0060-632d4e41bb1a.png)

---
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/b355ba06-66c4-7e84-0441-552457440c73.png)

---
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/f551ccc1-d190-2b46-0f54-2579f9c5b228.png)

---
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/c4ed3fe4-08af-539e-33a9-7f7e43fdfc6b.png)

---
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/18586e04-7c1a-982d-7ab7-83b21740f425.png)

---
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/3cd93bc6-5e86-015e-7a76-12606b3c0c72.png)
SPFx環境構築

# はじめに
SPFx(SharePoint Framework)は、SharePointのカスタマイズおよび拡張モデルです。

フレームワークに依存せず、人気のJavaScriptフレームワーク(React、Handlebars、Knockout、Angular、Vue.js、その他) を使用できます。

本記事は、SPFx開発環境構築の備忘録です。

# 目次
1. [事前準備](#Chapter1)
1. [Sheapoint内に任意のサイトを作成](#Chapter2)
1. [yaoman、gulpをインストール](#Chapter3)
1. [yaomanジェネレータをインストール](#Chapter4)
1. [最初のプロジェクトを作ってみる](#Chapter5)
1. [参考文献](#reference)

<!-- 各チャプター -->
<a id="#Chapter1"></a>
# 事前準備
- NodeJSがインストールされていることを確認する
下記のコマンドを実行して確認できます。(v14.19.2みたいにバージョンが出てくればOK)
```bash shell
node -v
```
[NodeJsダウンロードはこちらから](https://nodejs.org/ja/)

- SharePoint内にサイトを作成する権限があることを確認する
[SharePoint のサイト作成を管理する マイクロソフト公式](https://learn.microsoft.com/ja-jp/sharepoint/manage-site-creation)

<a id="#Chapter2"></a>
# Sheapoint内に任意のサイトを作成
サイトの作成ボタンから任意のサイトを作成します。
![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2885419/f8f0611d-08eb-a731-d5c4-1c9adb1e28af.png)

<a id="#Chapter3"></a>
# yaoman、gulpをインストール
下記のコマンドを使用してインストールできます。
```bash shell
npm install -g yo gulp
```
こんな感じでインストールされます。↓
![画像2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2885419/997eb4ae-a6e3-d640-8787-1cb7ee656004.png)
### yaomanとは
yaomanはGoogleが開発したツール群で、プロジェクトひな型作成ツールである「Yo」、依存性管理、パッケージマネジメントを行う「Bower」、ビルドツール、タスクランナーである「Grunt」の三つのツールを統合して提供しています。

今回使用するのは「Yo」のみです。
Yoは、Node.jsで動作し、npmを使用してインストールを行います。公式や、各コミュニティから提供されているジェネレータ、または自作したジェネレータを使用して様々なプロジェクトのひな型を生成できます。

### gulpとは
gulpはフロントエンド開発に必要なタスクのランナーです。HTML/CSS/JavaScript の圧縮・最適化、Sassのコンパイルなどを自動で行うことが出来ます。

<a id="#Chapter4"></a>
# yaomanジェネレータをインストール

```bash shell
npm install -g @microsoft/generator-sharepoint
```
Microsoftが提供するSharePoint Framework 用のyaomanジェネレータをインストールします。

<a id="#Chapter5"></a>
# 最初のプロジェクトを作ってみる
プロジェクト用のディレクトリを作成
```bash shell
mkdir HelloWorld
```
作ったディレクトリに移動し、yaomanジェネレータでプロジェクトを作成
```bash shell
yo @microsoft/sharepoint
```
オプションを入力するよう求められます。エンターを押すと規定値が入力されるので、まずは規定値で作成してセットアップがうまくいっているかを確認しましょう。
![スクリーンショット_20221105_142632.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2885419/7dd1cd28-8e47-ec92-b549-38347932f5ed.png)

↓の画像のように正常終了したらセットアップがうまくいっています。お疲れ様でした！

![スクリーンショット_20221105_142723.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2885419/3e7ae653-eb62-ee49-5d7a-e78d49de9ee3.png)

画像のように脆弱性の報告があった場合は、脆弱性を自動修正してくれる「npm audit fix」を実行しておきましょう。

```bash shell
npm audit fix
```



<a id="#reference"></a>
# 参考文献
- [SharePoint Framework の概要 マイクロソフト公式](https://learn.microsoft.com/ja-jp/sharepoint/dev/spfx/sharepoint-framework-overview)
- [SharePoint Framework (SPFx) 開発環境構築 (Windows 10)　-鍋綿ブログ](https://www.micknabewata.com/entry/sharepoint/spfx/devenv-win10)
- [あなたのWeb開発人生を変えるYeoman、Bower、Yoのインストールと使い方 -@IT](https://atmarkit.itmedia.co.jp/ait/articles/1407/02/news040.html)
BufferedReader class

BufferedReaderは、lineごとにreadすることができる
lines() returns Stream<String>
あくまでもファイルへのアクセスはFileReaderを通している
ReaderからReaderの機能追加で組み合わせができる、Decorator patternという。

```java
public class Outer {
    public static void main(String[] args) {
        try {
            FileReader fr = new FileReader("C:\\dirtest\\testmakefile.txt");
            BufferedReader r = new BufferedReader(fr);
            try (r){
                r.lines().forEach(System.out::println);
            }
        } catch (IOException ex ) {
            ex.printStackTrace();
        }
    }
}
```
```
hello
bye
```
mongoose の接続状態をチェックする。

mongoose の接続状態をチェックする方法を紹介します。

```
// You can connect to MongoDB with the
mongoose.connect('mongodb://username:password@host:port/database?options...');

// You can check mongoose connection state
console.log(mongoose.connection.readyState);
```

ステータスは以下になります。
0: disconnected
1: connected
2: connecting
3: disconnecting
99 = uninitialized

【reference】
The search keyword is "how to connect with mongoose"
https://mongoosejs.com/docs/connections.html

The search keyword is "how to check if mongoose is connected"
https://stackoverflow.com/questions/19599543/check-mongoose-connection-state-without-creating-new-connection
【Salesforce】画面に表示していない値を再描画したい

# 問題

画面に表示していない値を再描画したい

内容

＜タブA＞
・オレンジ
・みかん
・りんご

＜タブB＞
・オレンジ
・みかん
・りんご

上記のようなデータが同じテーブルにあり、
タブAを表示しているとき、タブBは表示しない

そこでタブAの「みかん」を「ミカン」にした場合、
連動してApexメソッドにてタブBの「みかん」も「ミカン」にする

reRenderで更新をかけたところタブAしか更新されない

# 解決策

タブBの「みかん」を「ミカン」にした後に
タブBのデータを再取得（SELECT）する。
ReactNativeで中途半端な改行を防ぐ

# はじめに
ReactNativeで中途半端な改行を防ごうとしたところ、少し詰まったので記事にしました。
# HTML/CSSの場合
HTML側では以下のように意味の塊ごとにspanタグで囲みます。
```html:html
<h1><span>Qiitaの</span><span>記事を</span><span>書く</span></h1>
```
次にCSS側でinline-blockを設定します。
```css:css
span {
   display: inline-block;
}
```
# ReactNativeの場合
ReactNativeで使用されるJSXでは、divやspanといったDOMを直接書くことができません。
また、スタイリングは通常のcssではなくcss-in-jsで書くため、記法に注意が必要です。

spanタグの代わりにTextタグで囲むことで意味の塊を作り出すことができます。
また、全体をViewで囲み、flexWrapとflexDirectionを設定します。
```react:ReactNative
<View style={{ flexDirection:'row', flexWrap:'wrap' }}>
    <Text>レビューを</Text><Text>追加</Text>
</View>
```
# 終わりに
styleを設定せず、Textタグをネストさせてもできるようですが、私の手元では実現できなかったのでViewにスタイルを当てる方法を紹介しました。
短い記事でしたが、読んでいただきありがとうございました。
# 参考記事

https://stackoverflow.com/questions/34624100/simulate-display-inline-in-react-native