OmniAICreator/Qiita-1.07M huggingface dataset:
E資格2021#2実装演習レポート：深層学習day1、day2

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1643448/608e9fb2-cff1-b234-4518-2e6b49b0687b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1643448/8072ab63-8267-3097-b2b2-d2fb7e2693a7.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1643448/de814162-0c36-8264-a763-76804df44433.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1643448/7591d68c-0c1b-00d2-43a5-d04a1624f39e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1643448/a977c99e-3ae6-79b2-e5f2-96695873bf11.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1643448/a2b0cf74-241b-76af-bd93-3dfafb7a2eb6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1643448/52ed4639-4856-f66f-1b6b-f8901a3484e4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1643448/a60eff41-1f39-c21c-c94c-256ca2cf4141.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1643448/0c1ea154-2410-81a9-82d4-4a0f6706d89e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1643448/07bfc67d-6dc5-05e2-0e8d-c0e98dba872b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1643448/2a971534-1c53-b2e8-35bb-d30538107027.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1643448/46ec8028-58d8-0a55-8fc0-31b340715255.png)
【Javascript】Bindメソッドについて

# 初めに
javascriptのbindメソッドについて学習した内容のoutput用記事です。

※内容に間違いなどがある場合はご指摘をよろしくお願いします。
※こちらの記事はあくまでも個人で学習した内容のoutputとしての記事になります。

前回の記事:
https://qiita.com/redrabbit1104/items/d9e40ccf59f4a6abb1bd

# bindメソッド
thisの値を特定の関数objectに変更するメソッド。callメソッドの場合、関数が実行されるのに対しbindメソッドは実行されず新しい関数を生成します。

# 試してみる
構文もcallメソッドと同じです。引数にthisの値を指定するobjectとオプションとして関数の引数を指定できます。

```javascript
//構文
呼び出す関数.bind(適用するobject, 関数の引数, 関数の引数2, ...);
```
前回の記事で使用したtrainオブジェクトを使用します。

```javascript
const train = {
  trainName: 'JR',
  destination: 'Shibuya',
  data: [],
  printTrain(carNum, name) {
    console.log(
      ` ${name} takes a train on ${this.trainName}.\n`,
      `Bound for ${this.destination}.\n`,
      `Car number is ${carNum}`
    );
    this.data.push({ TrainNumber: `${this.trainName}${carNum}`, name });
  },
};
```

このオブジェクトの中からprintTrain関数をcallTrainという変数に格納します。

```javascript
const callTrain = train.printTrain;
```

また、bindメソッドを適用するオブジェクトtrain2を新たに作成します。

```javascript
const train2 = {
  trainName: 'Seibu',
  destination: 'Toshimaen',
  data: [],
};
```
callTrain関数にbindメソッドを使います。bindを適用するオブジェクトは新たに作成したtrain2にします。

```javascript
const callTrain2 = callTrain.bind(train2);
```
引数に３３と'Motomura'を指定し、実行してみます。

```javascript
callTrain2(33, 'Motomura');
```
train2オブジェクトのプロパティの値、SeibuとToshimaenが出力されていることが分かります。このようにbindメソッドを使うことでthisがどのobjectのthisを指しているのか指定することができます。
![スクリーンショット 2021-06-15 7.14.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/77c86bc2-92a1-efc1-f7d3-4e84abfd5671.png)
bindメソッドは呼び出す関数の引数を予め指定することもできます。

```javascript
const callTrain3 = callTrain.bind(train2, 12, 'Honda');
callTrain3();
```
![スクリーンショット 2021-06-15 7.19.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/e97faed4-0212-b736-52d3-cc6063785e36.png)
しかし、後から関数に新たな引数を再代入した場合は、bindメソッドで指定した引数が優先されます。

```javascript
//12と'Honda'が画面に表示される
const callTrain3 = callTrain.bind(train2, 12, 'Honda');
callTrain3(33, 'Motomura');  //33と'Motomura'は無効
```
# bindメソッドの応用
bindを使えば適用する関数にthisがなく引数だけを特定の値に固定し、新たな関数を作ることもできます。addPlus関数は第一引数をnullにし、引数aの値を1000にします。

```javascript
const addNum = (a, b) => a + b;
const addPlus = addNum.bind(null, 1000);   //bindの第一引数をnullにする
console.log(addPlus(300));
console.log(addPlus(400));
```
結果は1000 + 300, 1000 + 400になり1300と1400が表示されます。
![スクリーンショット 2021-06-15 7.38.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/fd30ebb8-8614-e4e4-012b-41c21048a68d.png)

# 参考サイト
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
Verilog HDLで1コマンドでシミュレーション波形を出せる"verisimu"コマンドを実現する

Verilog HDLの勉強をしていて思ったことは、Icarus Verilogを用いてシミュレーションを実行し、結果の波形をGTKWaveで表示するまでに実行するコマンドの数が多く、煩雑であるということです。そこで1コマンドでシミュレーション波形の表示まで行ってくれる`verisimu`コマンド[^bash]を実現させたいと思います。

# 検証環境
検証環境は以下の通りです。今回はMacで検証していますが、コマンドを少し書き換えるだけで、Linuxでも利用できます。

* macOS 11.4 Big Sur
* Icarus Verilog 11.0
* GTKWave 3.3.107
* XQuartz 2.8.1

# シミュレーション波形を出すまでの行程
Icarus VerilogとGTKWaveを用いてシミュレーション波形を出すまでには以下の行程を順に実行します。

## 回路本体とテストベンチから実行ファイルを生成
Icarus Verilogに回路本体とテストベンチのソースを渡すと実行ファイル(a.out)が生成されます。

```bash
iverilog source.v source_test.v
```

## 波形ファイルの生成
GTKWaveで表示するシミュレーション波形は`vcd`形式のファイルです。vvpコマンドに先程生成した実行ファイルを渡します。

```bash
vvp a.out
```

## GTKWaveで波形を表示
最後にGTKWaveで波形を表示させます。Macの場合は以下の様に呼び出します。

```bash
open /Application/gtkwave.app source.vcd
```

Linuxの場合は以下のコマンドを実行します。

```bash
gtkwave source.vcd
```

# verisimuコマンドの作成

これで波形が表示出来ます。しかし、これを毎回実行するのは煩雑です。Makefileを書くのも手ですが、ソースが増える毎にMakefileを書くのも面倒です。そこで、bashの自作関数を`.bashrc`に記載し、コマンドライクに使える様にしたいと思います。`verisimu`コマンドと呼んでいますが、実体はbashの関数です。

```bash:verisimu関数
function verisimu() {
    IFS=' '
    filename=$1
    testname=$2
    iverilog ${filename} ${testname}
    vvp a.out
    list=(${filename//./' '})
    vcdname=${list[0]}
    open /Applications/gtkwave.app ${vcdname}.vcd
}
```

使い方としては、以下の様に実行します。

```bash
verisimu source.v source_test.v
```

関数内で、第一引数をソースファイル名、第二引数をテストベンチファイル名として変数に代入し、先述のコマンドに順に渡しているだけです。これで、煩雑な行程を実行せずに済みます。

# Reference
* [Mac でコマンドラインからアプリケーション起動](https://qiita.com/labocho/items/344b762a30f01aa81759)
* [bashの変数をsplitして配列を作る方法](https://www.koikikukan.com/archives/2019/05/09-235555.php)

[^bash]: 実施にはコマンドでは無く、bashで自作関数を作って、それをコマンドライクに利用するという算段です。
【ハンズオン4】独自ドメインを設定する / 障害時はSORRYページへ通信を流す

##今回の記事について
この記事はAWS初学者を導く体系的な動画学習サービス
「AWS CloudTech」の課題カリキュラムで作成しました。
https://aws-cloud-tech.com

##前回の続き
以前の記事の続きになります。
以前作成した環境に構築していきますので、まずはこちらをご覧ください。

https://qiita.com/wanidrums/items/9f08a6c6e62328f34cfa

##前回の記事補足_EC2再起動後に ブログ表示に時間がかかる、 および表示が崩れる場合の対応手順

**原因**：wordpressの仕様によるもの。
ErasticIPなどでIPを固定していない場合、wordpress側が前回のIPアドレスを記憶しているのが原因

**解決策**：データベースのアドレス情報を、停止後に新しく付与されたIPアドレスに書き換える

```
##RDS接続
mysql -h (RDSエンドポイント) -u wordpress -p

##wordpressテーブルへ
USE wordpress

##現在のテーブルの設定情報
SELECT * FROM wp_options WHERE option_name IN ('siteurl', 'home');

##テーブル情報の更新
UPDATE wp_options SET option_value = 'http://xx.xx.xx.xx' WHERE option_name IN ('siteurl', 'home');
```


##今回やること
・独自ドメインを設定し、設定したドメインとELBを紐付け
（ROUTE５３シンプルルーティング）

・障害時はSORRYページへ通信を流す
（ROUTE５３フェイルオーバールーティング）

##環境

macOS Big Sur バージョン１１.２.２

##構成図

![hands-on4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1650745/d1ca5bb7-7de1-dfd9-a23a-d51bb8b6f811.png)





##・独自ドメインを設定し、設定したドメインとELBを紐付け （ROUTE５３シンプルルーティング）

**①お名前.com等でドメイン取得**

**②ROUTE５３でホストゾーン作成**
作成時にお名前.comで取得したドメインを設定

NS（Name Server）、SOAレコードが作られる

**③ROUTE53で作成されたNSの情報をお名前.comのNSに貼り付ける**
お名前.comに「NSはAWSのROUTE５３のNSを使用しますよ」ということを伝えるといういこと

＊ここまでの手順は以下の記事を参照

https://dev.classmethod.jp/articles/route53-domain-onamae/



**④新規レコードでシンプルルーティング作成**
ROUTE53のシンプルルーティングで、取得したドメインとELBのエンドポイントを紐づける

レコード名：任意
トラフィックのルーティング先
：エイリアスレコードにチェック
：Application Load BalancerとClassic Load Balancerへのエイリアス
：リージョン選択
：設定しているELB選択
ルーティングポリシー：シンプルルーティング

レコード作成

→取得したドメインでWebページが表示されるようになる


##・障害時はSORRYページへ通信を流す （ROUTE５３フェイルオーバールーティング）

**⑤S3バケット作成**
＊バケットの名前をドメインと同じ名前に合わせる必要がある
＊パブリックアクセスを全てブロックのチェックを外す（正解中にsorryページを表示させても問題ないため）

**⑥作成したバケットにSorryページ用のファイルをアップロードして保存**
なんでもお好きな画像を設定

**⑦静的ウェブサイトホスティングを編集し、有効にする**
・インデックスドキュメント
・エラードキュメント
それぞれ入力
そのままindex.html  error.htmlでOK

**⑧バケットポリシーを付与する**
以下の公式HPよりjson形式のバケットポリシーを貼り付ける
＊ドメイン名は置き換える

https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html

**⑨ フェイルオーバールーティングの設定（プライマリとセカンダリのDNSレコードを作成）**
・④で作成したシンプルルーティングをフェイルオーバールーティングに変更
これをプライマリとする

・S3のsorryページとして表示させるS3バケットのレコードを作成
これをセカンダリとする

＊レコード名はプライマリとセカンダリで同じものに合わせる
＊TTLの時間によって切り替わる時間を変えられる
デフォルトで３００秒

**⑩検証としてサーバーを二つとも停止させ、sorryページに切り替わるか確かめる**
Discordでボイスチャンネルに参加しているユーザにランダムにMsgを送るBot

# 用途
- あもあすで「てるてる」とか「狂人」をメンバーに割り当てたい時とか

# 仕様
- ボイスチャンネルに参加しているユーザからランダムに一人選んで何らか（例えば「狂人」）のメッセージを送る機能
- 誰が狂人設定かを教えてくれる機能

# 使い方
- /random_role
    - ボイスチャンネルに参加しているメンバー1人に、「狂人」と送る。
    - ボイスチャンネルに参加している上記以外のメンバーには「not 狂人」を送る
- /who_is
    - 直前に誰に「狂人」と送ったかを、返信してくれる
        - 例） 「catty is 狂人」

# 設定
- DeveloperAccount でTOKENを取得する
- PRESENCE INTENT、SERVER MEMBERS INTENTをオンにしておく

# コード

```py:

# インストールした discord.py を読み込む
import discord
import random

# 設定全般まとめる
BOT_NAME = "cats0830v"
SERVER_NAME = "cattyのサーバー(botのテスト用)"
RAISE_WORD = "/random_role"
RAISE_WORD_CONFIRM = "/who_is"
MSG_WORD = "狂人"
WHO_IS_TARGET = ""

# 自分のBotのアクセストークンに置き換えてください
TOKEN = 'xxxxx'
#誰が狂人かをローカルにメモする
def mkmemo(name):
    path = 'memo.txt'
    f = open(path,'w')
    f.write(name)
    f.close()
    return

def readmemo():
    path = 'memo.txt'
    with open(path) as f:
        s = f.read()
    return s

#ボイスチャンネルに入っているメンバーを取得する関数
def getVoiceUsers(guild):
    chs = guild.channels
    voice_members = []
    for ch in chs:
        if ch.type == discord.ChannelType.voice:
            for mem in ch.members:
                voice_members.append(mem)
    return voice_members

#オンラインのメンバーを取得する関数
def getOnlineUsers(guild):
    online_members = []
    for member in guild.members:
        if member.status == discord.Status.online and member:
            if member.name != BOT_NAME:#ほんとはBotじゃないという条件にしたい
                 online_members.append(member)
                 #print(member.name, " is online")
    return online_members

# 接続に必要なオブジェクトを生成
intents = discord.Intents.default()
intents = discord.Intents.all()
client = discord.Client(intents=intents)

# 起動時に動作する処理
@client.event
async def on_ready():
    # 起動したらターミナルにログイン通知が表示される
    print('ログインしました')

# メッセージ受信時に動作する処理
@client.event
async def on_message(message):
    # メッセージ送信者がBotだった場合は無視する
    if message.author.bot:
        return
    # RAISE_WORDを発言したらがDMが返る処理
    if message.content == RAISE_WORD:
        guild = discord.utils.get(client.guilds, name=SERVER_NAME)

        online_members = getVoiceUsers(guild)
        # 誰もいない場合は抜ける
        if len(online_members) == 0:
            return
        # ランダムな数字を作成
        rand_idx = random.randrange(len(online_members))
        target_name = online_members[rand_idx].name
        mkmemo(target_name)

        for i in range(len(online_members)):
            if i != rand_idx:
                dm_channel = await online_members[i].create_dm()
                await dm_channel.send("not "+MSG_WORD)
            else:
                dm_channel = await online_members[i].create_dm()
                await dm_channel.send(MSG_WORD)
        print("完了")
    
    if message.content == RAISE_WORD_CONFIRM:
        await message.channel.send(readmemo() + " is " + MSG_WORD)

# Botの起動とDiscordサーバーへの接続
client.run(TOKEN)

```


# 参考
- [Pythonで実用Discord Bot(discordpy解説)](https://qiita.com/1ntegrale9/items/9d570ef8175cf178468f)
Material-UI の DataGrid の中にボタンを配置するサンプル

## 概要

<a href="https://material-ui.com/components/data-grid/">DataGrid</a> にボタンを配置するサンプル。
こういうの。

![DataGrid.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59081/32606dfc-a3ed-d957-625d-aabe93ae3ea5.png)

ボタン押下でパラメータを渡せるようにする。


![deletebtn.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59081/37bae931-c979-781e-a576-1c152900c06b.png)


## 一覧のロジック

```jsx
import * as React from 'react';
import { DataGrid } from '@material-ui/data-grid';
import Button from '@material-ui/core/Button';
import DeleteButton from './DeleteButton';

// カラム
const columns = [
  // 削除ボタン
  {
    field: 'deleteBtn',
    headerName: '削除',
    sortable: false,
    width: 90,
    disableClickEventBubbling: true,
    renderCell: (params) => <DeleteButton rowId={ params.id } />
  },
  // 詳細ボタン
  {
    field: 'editBtn',
    headerName: '詳細',
    sortable: false,
    width: 90,
    disableClickEventBubbling: true,
    renderCell: (params) => <Button variant="contained" color="primary">詳細</Button>
  },
  { field: 'id', headerName: 'ID', width: 100 },
  { field: 'title', headerName: '本のタイトル', width: 250 },
];

// データ
const rows = [
  { id: 1, title: '君の膵臓をたべたい' },
  { id: 2, title: '容疑者Ｘの献身' },
  { id: 3, title: 'コンビニ人間' },
  { id: 4, title: '蹴りたい背中' },
  { id: 5, title: '世界の中心で、愛を叫ぶ' },
];

export default function DataGridDemo() {
  return (
    <div style={{ height: 400, width: 600 }}>
      <DataGrid rows={rows} columns={columns} pageSize={5} />
    </div>
  );
}

```

## 削除ボタンのロジック

```jsx
import React, { useState } from 'react';
import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@material-ui/core';

const DeleteButtonDialog = ({ rowId }) => {
  const [open, setOpen] = useState(false); // 確認ダイアログの表示/非表示

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const deleteRow = (rowId, e) => {
    // (ここで削除処理)
    setOpen(false);
  };

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleOpen}>
        削除
      </Button>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">{'確認'}</DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">ID「{rowId}」を本当に削除しますか？</DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} variant="outlined" color="primary" autoFocus>
            やめる
          </Button>
          <Button onClick={(e) => deleteRow(rowId, e)} color="primary">
            削除する
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
};

export default DeleteButtonDialog;
```


CodesandboxのURLを貼っておきます。

https://codesandbox.io/embed/material-uidatagridinbutton-hink4?fontsize=14&hidenavigation=1&theme=dark
Active Storage 画像追加アップロード　および　削除機能

<h1>前提条件</h1>

・ruby 2.6.6
・rails 6.0.3.4
・ActiveStorageをインストール済
・deviseを使用
・画像投稿システムを実装済

<h1>概要</h1>
　ActiveStorageで画像投稿システムを実装後、
「画像の追加アップロード・画像の削除機能」の部分でてこずったため備忘録として残します。
何かの実装の手助けとなれば幸いです。

<h2>ActiveStorageのインストールおよび投稿システムの実装</h2>
　ActiveStorageのインストールおよび投稿システムの実装に関しては
[【Rails 5.2】 Active Storageの使い方](https://qiita.com/matsubishi5/items/c2abdd7375a4c683392a)でとても分かりやすく
　書かれているのでこちら参照して実装してみてください。

<h1>画像追加アップロード</h1>
　ActiveStorageを使えば画像投稿は難なくと実装できるのですが、いざ使ってみると
なぜか画像を編集すると上書きされてしまい、画像を追加投稿することができませんでした。
ですが調べてみると[ここのgithub]
(https://github.com/rails/rails/issues/35817)に書かれていて、rails6からはデフォルトで上書きされるようになっているようです。※rails5ではデフォルトで追加アップロードされるようです。

　そこで今回はデフォルトをrails5のバージョンに変えて特に不都合はないのでこちらで対処しました。 `config/application.rb`に次のように記述します。

```ruby:config/application.rb
config.active_storage.replace_on_assign_to_many = false
```

こうすることで、デフォルトで追加アップロードされるようになりました。
デフォルトで設定することに不都合がある場合は、上記のgithubのリンクの中に対応方法が書いてあるのでそちらを参考に実装してみてください。

<h1>選択した画像の削除</h1>
　追加アップロードできるようになったのはいいのですが、削除機能がないと永遠と画像の数が増えていってしまいます。そこでチェックを入れた画像だけ削除できるように実装していきます。

　画像を投稿しているController(私の場合`controllers/posts_controller.rb`)のupdateアクションに記述していきます。

```ruby:controllers/posts_controller.rb
def update
   @post = Post.find(params[:id])
   if params[:post][:image_ids]
     params[:post][:image_ids].each do |image_id|
       image = @post.images.find(image_id)
       image.purge
     end
   end
   if @post.update_attributes(post_params)
     redirect_to post_path(@post), notice: "更新に成功しました。"
   else
     render :edit
   end
 end
```
３行目の`if params[:post][:image_ids]`から8行目までの`end`のコードで、編集画面で選択した画像の削除を行っています。

次に編集画面のコードを記述していきます。
formの書き方は人それぞれなのでうまく入れ込んでください。

```ruby:posts/edit.html.erb
<%= form_with model: @post, local: true do |f| %>

　<%= f.label :images, "現在登録されている服" %>
  <% if @post.images.present? %>
    <p>※削除したい画像にチェックを入れてください</p>
    <% @post.images.each do |image| %>
      <%= f.check_box :image_ids, {multiple: true}, image.id, false %>
      <%= image_tag image, size:"100x100" %> <br>
    <% end %>
  <% end %>

  <div>
    <%= f.submit  '編集する' %>
  </div>
<% end %>

```

<h4>参考画像</h4>
イメージは以下の画像です。
デザイン等自分なりにかなり変えているので、参考程度にして欲しいのですが
チェックボックスをeach文で回すことで、それぞれにチェックボックスが生成され
これらをチェックした画像のidがControllerに送られて処理される仕組みとなっています。


![スクリーンショット 2021-06-15 23.51.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701865/e8c3a762-f571-1db1-eb03-0ec6c6da456a.png)


これでほぼ完成と言えるのですが
ここにさらに追加した機能としては

・``全ての画像が削除されないようにチェックボックスが最低でも１つチェックしないものがあるようにJavascriptで制御する。``
→　もう少しお待ちください。
・``新規投稿する際に画像のプレビュー表示をさせる。``
→　https://qiita.com/sharesence/items/61f1136b7e1d92efa8e8

を追加しています。
本記事ではここまでですが、上記の２つの記事は随時更新するのでそちらを参考にしてみてください。



<h1>参考サイト</h1>
https://patorash.hatenablog.com/entry/2020/12/02/182915

https://github.com/rails/rails/issues/35817

https://qiita.com/hiroki_404_/items/e71991ac88421e5caeec
出力テスト（moudleとwidget）



カラーフィールドにて下記を指定

```
#cccccc
透明度：80%
```


デフォルトのmoduleを指定して出力

```
{{ module.color_1.color }}
#cccccc

{{ module.color_1.opacity }}
80

{{ module.color_1.css }}
rgba(204, 204, 204, 80%)

```


widgetで指定しても同様の出力が得られた。（旧仕様が残っている？）

```
{{ widget.color_1.color }}
#cccccc

{{ widget.color_1.opacity }}
80

{{ widget.color_1.css }}
rgba(204, 204, 204, 80%)

```
Rubyで #frozen_string_literal: true というマジックコメントを付ける意味

Rubyで開発する時、rubocopを使ったらよく Missing frozen string literal comment と警告され、ファイルの一番上に「#frozen_string_literal: true」を入れることが推進されます。

簡単に説明すると、Ruby 2.3以降では、#frozen_string_literal: trueというマジックコメントを記述した場合、文字列リテラルで生成される文字列は値が変更できないようにfreezeされ、同じ内容の文字列リテラルは同一の文字列オプジェクトを返すようになります。


### #frozen_string_literal: true　がない場合

```ruby 
text1 = 'Hello world'
text2 = 'Hello world'

puts text1.object_id == text2.object_id
```

文字列の内容が同じでもオブジェクトが別の為、falseを返します。

### #frozen_string_literal: true　がある場合

```ruby 
#frozen_string_literal: true

text1 = 'Hello world'
text2 = 'Hello world'

puts text1.object_id == text2.object_id
```

同じ内容の文字列は同一の文字列オブジェクトなので、trueを返します。
Azureとは？

## 勉強前イメージ

AWSとかGCPとかと同様にマイクロソフトのクラウドサービスってくらいしか知らない

## 調査

### Azureとは

正式名称は Microsoft Azure で アジュールと読みます。
Microsoft社が提供するクラウドサービスです。
Azureが提供するサービス形態は IaaSとPaaSになります。

### IaaS？PaaS？

サービス形態のカテゴリの種類になります。

- IaaS

Infrastructure as a Service の略で、
仮想マシンをクラウド上で構築し、利用するサービスになります。
仮想マシンやその下のDCなどの管理は提供側ですが
仮想マシンに関するOSやアプリケーション(ミドルウェアなど)については利用者の責任範疇になります。

- Paas

Platform as a Service の略で、
仮想マシン上のOSを利用者に提供するシステムです。
構築するOSなどについては提供側の種類によります。

### 主要サービス

- Azure Virtual Machines(Azure VM)

簡単な操作でLinuxやwindowsのマシンを構築、スケーリングが可能です。

- Azure Virtual Network(Azure VNet)

仮想マシンが他のリソースと通信するネットワークを提供しています。

- Azure Blob Storage

オブジェクトストレージで、画像ファイルや大容量のオブジェクトを扱うことが出来ます。

## 勉強後イメージ

AWSと似たようなサービス。
オブジェクトストレージとかもAWSにあるし、
GCPを勉強した時に似たようなサービスあるよなぁって思ってたけど
よく使用するようなサービスはあるんじゃないかなって思う

## 参考

- [Microsoft Azure(アジュール)とは？5つのメリットを解説](https://cloud.nissho-ele.co.jp/blog/azure_recommendation/)
- [Azureの代表的なサービスを知る／使ってみる【前編】](https://ascii.jp/elem/000/004/013/4013119/#%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9%E3%82%B9%E3%83%88%E3%83%A9%E3%82%AF%E3%83%81%E3%83%A3%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%AE%E4%B8%BB%E3%81%AA%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA)
【PHP】クラスの継承サンプルソース  ※extendsあり！

```php
<?php
class Robot{
  public $energy;
  public $name;

  function __construct($energy, $name){
    $this->energy = $energy;
    $this->name = $name;
  }

  function introduce(){
    echo '私の名前は' . $this->name . 'です。',PHP_EOL;
  }
}

class BattleRobot extends Robot {
   function punch(){
        if($this->energy < 10){
          echo 'エネルギーが10未満のためパンチが打てないわ！';
        }else{
            echo $this->name,'パーンチ！';
        }
    }
}

$ann = new BattleRobot(22, '【吉永小百合】');
$ann->introduce();
$ann->punch();
```
# 結果
```
私の名前は【吉永小百合】です。
【吉永小百合】パーンチ！
```
Windows版VisualStudioCodeでTeX

# はじめに

Markdownでドキュメントを書いていると目次や付録などをこだわりたくなってきたのでTeX環境を整えます。

# 環境

Windows 10 (21H1)
Visual Studio Code (1.57.0)
Tex Live 2021

# 手順

細かい設定は行わずデフォルト設定でPDF作成まで走ります。

## Visual Studio Codeのインストール

https://code.visualstudio.com/download

## Tex Live 2021のインストール

Installing TeX Live over the Internetからinstall-tl-windows.exeを使用します。

https://www.tug.org/texlive/acquire-netinstall.html

ネットワークからダウンロードするので完了するまで２時間弱かかりました。
インストール先は、C:\texlive\2021です。

## PDFの作成

ここでは試しとして、作業フォルダC:\docs\hellotexを作り、VSCodeで開きます。

## Visual Studio Codeの設定

ファイル→ユーザー設定→拡張設定またはCtrl + Shift + Xで拡張設定を開きます。
latexを検索して、LaTeX Workshopをインストールします。

![vscode_extension_latexworkshop_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561682/65753b0d-503f-c766-7fde-789d665654a8.png)

インストール後、拡張機能の設定を選択します。

![vscode_extension_latexworkshop_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561682/bbacb334-8bdf-a0e9-02e4-29fb1827bd14.png)

Latex-workshop > Latex：Toolsを探し、settings.jsonで編集を選択します。

![vscode_extension_latexworkshop_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561682/80ec049a-34ce-e3e2-5cb3-d1d7295bfee9.png)

settings.jsonにデフォルト設定がコピーされるので、"name": "latexmk"となっている"args"配列の"-pdf"を"-pdfdvi"に修正します。

```json:修正後のsettings.json
    "latex-workshop.latex.tools": [

        {
            "name": "latexmk",
            "command": "latexmk",
            "args": [
                "-synctex=1",
                "-interaction=nonstopmode",
                "-file-line-error",
                "-pdfdvi",
                "-outdir=%OUTDIR%",
                "%DOC%"
            ],
            "env": {}
        },
       （略）
```

## texファイルとlatexmk環境設定の作成

hello.texを作成します。

```tex:hello.tex
\documentclass[a4paper,10pt]{jsarticle}
\begin{document}
こんにちは、\TeX
\end{document}
```

latexmk環境設定用のファイル.latexmkrcを作成します。

```:.latexmkrc
$latex = 'platex %O %S';
$dvipdf = 'dvipdfmx %O -o %D %S';
```

## ビルド

右上の▷ボタンまたはCtrl + Alt + Bでビルドします。
hello.pdfが生成されたことを確認して、同右上のプレビューボタンまたはCtrl + Alt + VでPDFを確認できます。

![vscode_pdf_preview.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561682/ee478481-006a-e42a-d5ec-32d9e285d0ed.png)

編集するとビルドされるのでプレビューも更新されます。

![vscode_pdf_preview2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561682/3c5b3061-36b5-4df3-6f11-fbcb3eaa0b12.png)
Googleフォームのアンケート結果をデータポータルで見やすくしてみた

# 前提
ちょっと複雑なアンケートを取って分析したいと思うことがありました。

イメージとしてはアンケート項目それぞれについて、
1. 職種毎
2. プロジェクト毎
3. リーダー/非リーダー
などのカテゴリーできって眺めてみたい的なイメージです。

Googleフォームの結果はスプレッドシートに吐き出せるので、
それをこねくり回してグラフを作る程度はできるんですけど、
1,2,3軸でいろいろなバリエーションを作るとグラフの量が膨大になるのと、
追加で分析したい軸などが出来た時に対応できないので、
データとしてはスプレッドシートのものを使いながら、
データの可視化は別のツールを使えないかなと検討をはじめました。

そこでGoogleのデータポータルはデータソースをスプレッドシートに出来るし、
無料で利用できるBIツールとのことで利用することにしました。

# ではやってみよう

### 1.アンケートフォームを作る
聞きたいことを聞くアンケートをよしなに作る

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29008/87c787a3-af56-ec7c-d09d-d2d674898c88.png" width="500">

### 2.アンケートフォームをスプレッドシートに出力

回答タブを押してスプレッドシートっぽいマークを押せば、
スプレッドシートが作成され回答データが入ります。

しかもその瞬間だけじゃなくてその後アンケート答えてくれた人のデータも
ちゃんと同期してくれるのは便利。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29008/268280bd-e244-ce14-aad5-bdbd84056b50.png" width="500">

### 3.データポータルにアクセス

Googleアカウントを使ってデータポータルにアクセス

### 4.データソースを作成

スプレッドシートの情報をデータソースに食わせるために、
データポータル上でデータソースを作成する

```
作成 > データソース > Google スプレッドシート > 指定のスプレッドシートを選択
```

という順番で作成は出来るはず。

### 5.レポートを作成

作成したデータソースを開き、右上のボタンからレポートを作成する。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29008/6d1c69f0-22b4-a015-2e49-5e9877c95bd0.png" width="500">

これで基本的には準備完了。
下の図のように見たいものを見たいように配置すればおーけー。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29008/86a30120-3a97-9185-a622-5341dd8ce977.png" width="500">

### 6.作ったレポート

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29008/7c8540cf-b617-fab5-c064-5c9b80d171c2.png" width="500">

# 感想

個人的にはかなり見やすくて気に入ってます。
またこういう分析機会があったら使っていこうかなと思えるレベルには良かったです。
そのうえで、大変だったポイントもせっかくなので書き記しておきます。

#### アンケートっぽい使い方は特殊
そもそもデータポータルはBIツールであり、大量のデータを分析する前提となっている。
BigQueryやデータベースをデータソースとするのがやはり一般的な気がする。
という前提でデータストアとしての良きデータの持ち方と、アンケートでやりたいデータの持ち方にずれがあるように感じた。
それでもやるならデータストアの気持ちになったデータ構造を持ったアンケート設計が大事だなと感じた。

#### 何をどう分析したいのか設計が大変
見せ方はまあなんとか出来るとして、結局何を分析したいのか。
どういうデータをどう見せれば示唆につながるのかっていうあたりが結局一番時間かかりました。
「何を作るかが先。どうやって作るかはあと。」ってやつです。
残プロ　第-14回 ~pythonでcsvをgui表示~

# 今回すること

- csvを読込，gui表示
- pyhtonに標準で入っているtkinterモジュールを利用
- 表の作成にはttk.treeviewを使用する


# .py

tkinterの流れとしては，

- ガワ(ウィンドウやフレーム)をつくる
- 中身(ラベルやボタン)をつくる
- 配置

となります．もちろん**配置した後から中身をつくることもできます**．
ガワと中身は作っておいて配置せず，任意のタイミング(ボタン押下等)で表示するといったことができます．今回はやってませんが...

以下，サンプルプログラムになります．

~~~ python:
import tkinter as tk
import tkinter.ttk as ttk
import pandas as pd

def selected(event):
	for item in tree.selection():
		print(item, tree.item(item))


def main():
	# Load .csv
	df = pd.read_csv("tasks.csv", encoding='shift-jis')
	# create Window and Treeview
	root = tk.Tk()
	tree = ttk.Treeview(root, show='headings')
	# set Treeview columns
	tree['column'] = ("No",) + tuple(df)
	# set header
	tree.heading("No", text="No")
	for c in df:
		tree.heading(c, text=c)
	# set cells on the row
	for i, row in enumerate(df.itertuples()):
		tree.insert("", "end", tags=i, values=row)
	# set layout
	tree.pack()
	# bind action
	tree.bind('<<TreeviewSelect>>', selected)
	# set loop
	root.mainloop()


if __name__ == '__main__':
	main()
~~~


# 実行結果

各行にselected関数をbindメソッドによって紐づけています．内容はクリックされた行のitemを表示するものです．今回の例ではvaluesに要素の配列が格納されていることが分かりますね！
選択された行のvaluesを操作すればgui上で表示の変更が，tagsを利用すれば.csvの編集ができそうです．

![csv_gui.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578927/14a8333f-f569-7a60-191b-6873228174cb.png)


~~~ terminal:terminal
I006 {'text': '', 'image': '', 'values': [5, 'ペットボトル，缶', '2021年06月22日', '8:00:00', 'SecondTuesday,FourthTuesday', 'nan'], 'open': 0, 'tags': [5]}
~~~
Trello っぽいのを作りたい

最近 MERN Stack と呼ばれる技術スタックをを学んだ。
( MERN: MongoDB, Express, React, Node )

せっかく学んだので MERN な構成で Trello っぽいのをつくってみる。

段階的に作っていく。

① ToDoItem の CRUD

② ユーザの認証

③ Category の CRUD

④ ToDoItem を Draggable にする

⑤ Board の CRUD

⑥ ユーザの Board への招待



# 開発ログ

## ① ToDoItem の CRUD

2021/06/15

MERN のそれぞれはある程度わかったけど Express と React をどうつなげるのかよくわかってない。
とりあえずそれぞれで ToDoItem の操作をできるようにして、つなげ方ググりながら進めていこうと思う。

ちなみに ToDoItem は ToDo の一個一個を想定してる。

Express 側の Item の GET と POST はできるようになった。
https://github.com/RyuGotoo/trello-clone/commit/0083aac0f508d438e188ce354af5f5865f9eb91f
ちょっとルーティングの書き方で詰まったけど、いい感じ！

次は React 側の Get と Post を書いていく。

2021/06/16

React 側の GET と POST できた！
client と server をつなぐのに苦戦した。
勉強した教材に繋ぎ方までは入ってなかったんだよね。
MERN それぞれを勉強するって感じの教材だった。

でも、なんとかできた！

axios いいね。
フロントエンドは最近勉強し始めたばかりだから新しいことたくさんあって楽しい。

次は Item の UPDATE と DELETE を実装していく。

DELETE はできたけど UPDATE に苦戦中。

別ページに遷移してそこで編集するんじゃなくて、Trello みたいにテキストをクリックしたら編集が開始されるようにしたい。
contenteditable 属性をつければいけると思ってたけど、なんか動かなかった。
なんかそれようのライブラリが必要なのかな。


# 今回使う予定の技術スタック

MERN Stack (MongoDB, Express, React, Node)
mongoose
MongoDB Atlas
Material UI

やりたいけど今はやらない技術スタックもある。
Redux, Testing, CI/CD とか。

これらはまだ良くわかってなくて別途勉強が必要で、今後勉強する予定ではあるけど、今はやらないでおこうと思ってる。

とりあえず学んだことだけでなんか作ってみるのが必要な時期だと個人的に思ってる。
勉強は楽しいけどずっとやってても自分ではなにも生み出せないから、下手でも作ってみるのがいい気がしてる。
伏黒も下手な領域展開してたけど、あんな感じ。
ああいうのが結局成長にはいいんじゃないかなって思ってる。

だから、今回は Redux とか使ってないけど、勉強した知識を総動員してひとつアプリを作ってみる。
UserControlで部分テンプレートを作る

# UserControlで部分テンプレートを作る

生のC#で行う方法とprismライブラリを使用した場合で比較しました。

### 基本の方法
* 以下のディレクトリ構成にてMainWindow.xamlにRingo.xamlを表示する

```
Solution'Item'
  Item(project)
    View
      MainWindow.xaml
      Fruit
        Ringo.xaml
```

```C#:MainWindow.xaml
<Window
    x:Class="Fruit.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Fruit">
    <StackPanel>
	//「local」は表示したいxaml(xaml.cs)のnamespace
        <local:Ringo/>
	<TextBox Text="ここはMainWindow">
    </StackPanel>
</Window>
```

```C#:Ringo.xaml
<UserControl
    x:Class="Fruit.SimpleUserControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackPanel Orientation="Horizontal">
	<TextBox Text="ここはりんご">
    </StackPanel>
</UserControl>

```

https://qiita.com/soi/items/12ceea4efcf31c1a7b93


### PrismのRegionManagerを使った場合

* ディレクトリを変更
Solution'Item'
  Item(project)
    View
      Fruit
        Ringo.xaml
	MainWindow.xaml
	  MainWindow.xaml.cs //New!
  RegionNames.cs //New!

```C#:RegionNames.cs
//文字列を変数として扱うクラス
//なくてもできるけどintelisenceが働くからあった方が良い
namespace Item
{
    public static class RegionName
    {
        public static readonly string Ringo = "Ringo";
    }
}
```

```C#:MainWindow.xaml.cs
//コードビハインドでRegionManagerを登録
namespace Item.View
{
    public partial class MainWindow : Window
    {
        public MainWindow(IRegionManager regionManager)
        {
            InitializeComponent();
            regionManager.RegisterViewWithRegion(RegionName.Ringo, typeof(Ringo));
        }
    }
}
```

```C#:MainWindow.xaml
<Window x:Class="Item.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:prism="http://prismlibrary.com/" //New!
        prism:ViewModelLocator.AutoWireViewModel="True" //New!
        xmlns:Item="clr-namespace:Item" //New!
        Title="Item">
    <Grid>
	//prismのRegionNameに文字列を登録している
	//文字列はx:static
	//xmlns:ItemというnamespaceのRegionNameクラスにあるRingoプロパティ
        <ContentControl prism:RegionManager.RegionName="{x:Static Item:RegionName.Ringo}">
	</ContentControl>
    </Grid>
</Window>

```

* xamlマークアップ拡張(x:staticなど)
「マークアップ拡張」は、「{」と「}」の２つの中括弧を使用することでXAMLパーサに対し、拡張されたプロパティ指定方法を指示する。
https://techinfoofmicrosofttech.osscons.jp/index.php?XAML%E3%81%AE%E6%9B%B8%E3%81%8D%E6%96%B9%EF%BC%88%EF%BC%91%EF%BC%89#ad009a58
CircleCI チュートリアルビデオ | CircleCI をはじめよう

# はじめに
CircleCIのチュートリアルは、英語になりますが [How to get started with CircleCI](https://www.youtube.com/playlist?list=PL9GgS3TcDh8x6tcY7HDq2zmEx0fAtwWsM)という27本のビデオシリーズがありますが、こちらを順次、日本オリジナルで市場や状況に合わせた形で作成し、順次公開していきます。よろしければご覧いただき、いいね、および、チャンネル登録をお願いいたします。

# ビデオ一覧
- [【チュートリアル】01 CircleCIをはじめよう！](https://youtu.be/cOHKRYgdzDY)
    - [circleci/welcome-orb](https://circleci.com/developer/ja/orbs/orb/circleci/welcome-orb) で定義されているジョブ、出力結果をじっくり見た事はありますか？
    - https://github.com/CircleCI-Hajime/01.my-first-circleci  
- [【チュートリアル】02 CircleCIでビルドを成功させよう！](https://youtu.be/hTM2nk8mSoQ)
    - https://github.com/CircleCI-Hajime/02.circleci-demo-javascript-react-app
- [【チュートリアル】03 CircleCIでPostgreSQLのビルド済みDockerイメージを使おう！](https://youtu.be/anOXzKmc40s)
    - [CircleCIが提供するDockerイメージファイル(cimg/*)](https://circleci.com/developer/ja/images)を使ってPostgreSQLにアクセスしてみます。
    - https://github.com/CircleCI-Hajime/03.circleci-containers


(鋭意作成中！)
Seaborn定量比較-散布図

## 散布図とは

定義は[Matplotlib定量比較-散布図](https://qiita.com/fastso/items/682916309aa2c05c9252)をご参考ください。

## 簡単な散布図

Seabornで散布図を描くには、scatterplotとrelplot(relational plot)の２つの方法があります。

scatterplotの場合：

```python
import matplotlib.pyplot as plt
import seaborn as sns

sns.scatterplot(x='col01', y='col02', data=test_data)

plt.show()
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260307/b4a83bbf-bd84-b8e2-86e6-5c0b381c829b.png)

relplotの場合：

```python
import matplotlib.pyplot as plt
import seaborn as sns

sns.relplot(x='col01', y='col02', data=test_data, kind='scatter')

plt.show()
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260307/3d521955-5672-c816-1be5-efcd6721a14e.png)

## サブプロットで複数の散布図を描く

relplotのcolとrowパラメータで、横と縦で複数の散布図を描けます。

```python
sns.relplot(x="G1", y="G3", 
            data=student_data,
            kind="scatter", 
            col="schoolsup",
            col_order=["yes", "no"], 
            row='famsup', 
            row_order=["yes", "no"])

plt.show()
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260307/2a8d5d3d-a756-1dcf-eaa8-13c4c2c51bfb.png)

## 常用オプション

* size: 点のサイズ
* hue: 点の色

```python
sns.relplot(x='col01', y='col02', data=test_data, kind='scatter', size='cylinders', hue='cylinders')

plt.show()
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260307/108e215f-a9d4-e41b-f19a-5e5468d2270e.png)

* style: 点のスタイル

```python
sns.relplot(x='col01', y='col02', data=test_data, kind='scatter', hue='origin', style='origin')

plt.show()
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260307/c78085bc-23be-bf0c-6401-35e5bff8f53b.png)
【PHP】php課題12-12  Dogクラスを定義し、インスタンス「ハチ($hati)」を生成してintroduceメソッドを実行させる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954863/914a580c-d0b6-c6d9-36b6-9e04d7fd8a2d.png)


要件に従いDogクラスを定義し、インスタンス「ハチ($hati)」を生成してintroduceメソッドを実行する。

# ハチのプロパティ

名前: ハチ
体重: 20kg
体長: 70cm

# Dogインスタンスのプロパティ
Dogインスタンスは以下の private プロパティを持つ。

name: 名前を表す文字列。
weight: 体重をkg単位で表す数値。
height: 体長をcm単位で表す数値。

# コンストラクタ
Dogインスタンスは上記のname, weight, height を設定するコンストラクタを持つ。

# Dogインスタンスのメソッド
Dogインスタンスが持つメソッドは以下の通り。

privateメソッド
introduce_name: 名前を教えるメソッド。「私の名前は[名前]です。」と出力。
introduce_weight: 体重を教えるメソッドです。「私の体重は[体重]kgです。」と出力した後、
体重に応じて10kg未満であれば「小型犬です。」、
10kg以上25kg未満であれば「中型犬です。」、
25kg以上であれば「大型犬です。」と出力。
introduce_height: 体長を教えるメソッド。

「私の体長は[体長]cmです」と出力します。
# publicメソッド
shout: 「ワン！<br>」と出力するメソッドです。
introduce: introduce_name, introduce_weight, introduce_height メソッドを順に実行し、最後にshoutメソッドを実行して終了します。

```PHP
<?php
// 猫型ロボットの製造機械、Catクラスを作る
class Dog {
    
    // public $name;
    private $name;
    private $weight;
    private $height;
    
    public function __construct($name, $weight,$height){
        $this->name = $name;
        $this->weight = $weight;
        $this->height = $height;
    }
    
  
    public function introduce(){
          
          $this->introduce_name();
          $this->introduce_weight();
          $this->introduce_height();
          $this->shout();
          
    }
    
    private function introduce_name(){
        echo '名前は'. $this->name. 'です<br>';
    }
      
    private function introduce_weight(){
        echo '私の体重は'. $this->weight.'kgです。<br>';
        
        if($this->weight < 10){
            echo '小型犬です。<br>';
        }elseif($this->weight < 25){
            echo '中型犬です。<br>';
        }else{
            echo '大型犬です。<br>';
        }
        
    }
     
    private function introduce_height(){
      echo '私の体長は'. $this->height.'cmです<br>';
    }
  
    public function shout(){
        echo 'ワン！<br>';
    }

}

$hati = new Dog('ハチ', 40,70);


// $hati->name = "ssss"; 

$hati->introduce();


```
R 備忘録: 行列(matrix)要素へのアクセス

# はじめに
次のような行列があるとする．

$$
X =
\left[
\begin{matrix}
x_{11} & x_{12} & \cdots & x_{1n} \\\
x_{21} & x_{22} & \cdots & x_{2n} \\\
\vdots & \vdots & \ddots & \vdots \\\
x_{m1} & x_{m2} & \cdots & x_{mn}
\end{matrix}
\right]
$$

例えば以下のような行列を定義すると，X は m = 3, n = 2 で m 行 n 列の行列となる．

```R
> X <- matrix(c(1, 2, 3, 4, 5, 6), nrow = 3, ncol = 2);
> X
     [,1] [,2]
[1,]    1    4
[2,]    2    5
[3,]    3    6
```

$$
X =
\left[
\begin{matrix}
1 & 4 \\\
2 & 5 \\\
3 & 6 \\\
\end{matrix}
\right]
$$


# 参照方法

## コンマを含まない場合

コンマを含まずに指標1つで matrix にアクセスした場合，以下のように1要素毎のアクセスとなる．
行数 m を超える指標 m + 1 を与えると次の列の1行目を指定することになる．

$$
X[1] = x_{11} \\\
X[2] = x_{21} \\\
\vdots\\\
X[m] = x_{m1} \\\
x[m+1] = x_{21} \\\
\vdots\\\
x[m \times n] = x_{mn}
$$

## コンマを含む場合

コンマを含み，指標2つを用いてアクセスした場合，以下のように1要素毎のアクセスとなる．
X[i,j] は行列 X の i 行 j 列の要素である．

$$
X[1,1] = x_{11}, ~
X[1,2] = x_{12}, ~
\cdots, ~
X[1,n] = x_{1n}\\\
X[2,1] = x_{21}, ~
X[2,2] = x_{22}, ~
\cdots, ~
X[2,n] = x_{2n}\\\
\vdots\\\
X[m,1] = x_{m1}, ~
X[m,2] = x_{m2}, ~
\cdots, ~
X[m,n] = x_{mn}
$$

列指定([i,j] の j)を省略した場合，行の全要素が返される．**1行n列の行列ではない** ことに注意．

$$
X[1,] = c\left( x_{11}, ~ x_{12}, ~ \cdots, ~x_{1n} \right)\\\
X[2,] = c\left( x_{21}, ~ x_{22}, ~ \cdots, ~x_{2n} \right)\\\
\vdots \\\
X[m,] = c\left( x_{m1}, ~ x_{m2}, ~ \cdots, ~x_{mn} \right)
$$

行指定([i,j] の i)を省略した場合，列の全要素が返される．**m行1列の行列ではない** ことに注意．

$$
X[,1] = c\left( x_{11}, ~ x_{21}, ~ \cdots, ~x_{m1} \right)\\\
X[,2] = c\left( x_{12}, ~ x_{22}, ~ \cdots, ~x_{m2} \right)\\\
\vdots \\\
X[,n] = c\left( x_{1n}, ~ x_{2n}, ~ \cdots, ~x_{mn} \right)
$$

1行m列またはn行1列の行列がほしいのであれば，以下のように drop 引数を用いる．

```R
> X[3, , drop = FALSE];
     [,1] [,2]
[1,]    3    6
> X[, 2, drop = FALSE];
     [,1]
[1,]    4
[2,]    5
[3,]    6
```

## 指標が配列である場合

上記で述べたような [3,] や [,2] といった指定子を用いた場合，返り値のクラスは numeric (つまり c(1, 2, 3) といった数列)である．matrix 型でもなければ array 型でもない．
但し，[2:3,] や [,1:2] のような指定子を用いると，返り値の型は matrix となる．

$$
X[1:2,] = \left[
    \begin{array}{cccc}
     x_{11} & x_{21} & \cdots & x_{m1} \\\
     x_{21} & x_{22} & \cdots & x_{m2} \\\
     \end{array}
     \right]
     \\\
X[,1:2] = \left[
    \begin{array}{cc}
     x_{11} & x_{21} \\\
     x_{21} & x_{22} \\\
     \vdots & \vdots \\\
     x_{m1} & x_{m2}
     \end{array}
     \right]
     \\\
X[1:2,1:2] = \left[
    \begin{array}{cc}
     x_{11} & x_{21} \\\
     x_{21} & x_{22} \\\
     \end{array}
     \right]
$$

# Reference

```R
$ R --version
R version 4.0.0 (2020-04-24) -- "Arbor Day"
```

* 2021/06/16: @StrawBerryMoon さんのご指摘により修正しました m(_ _)m
CPU環境でも動画ファイルの物体検知ができる環境を簡単に作る

# はじめに
色々と目的があり、仕事ではなく家の環境で物体検知をやってみたくなったんですが

- 動画ファイルを入力して検知した結果の動画ファイルを出力する
- CPU環境でも動く
- 簡単に構築できる

ような環境構築の情報が思いのほかピンポイントに無くてちょっと苦労したので、
この機会にまとめてみることにしました

※ブログの内容を、環境構築に内容を絞ってまとめなおしています
　元々の動機は「格安の監視カメラで撮影した動画ファイルを自動で分析したいから」です
https://ai-mechatro.com/analyze-security-camera-3/

# 環境
- Windows10
- Anaconda 4.10.1

10年前のVAIOをSSDに換装して使い続けており、
スペックは中々に貧弱です…

# 環境構築手順
早速、手順をまとめていきます

## Anacondaの仮想環境を作る
### 仮想環境の作成
Anaconda Powershell(Anaconda Prompt)を立ち上げ、
yolov3（名前はなんでもいいんですが）用の仮想環境を作っておき、
作成した仮想環境に切り替えておきます

```console
conda create --name yolov3
conda activate yolov3
```

### 必要なライブラリのインストール
必要なライブラリをインストールしておきます

tensorflow、kerasのバージョンによる影響は確認していませんが、
バージョン違いによるエラーも多々起こるため、
理由が無ければ同じバージョンをインストールすることをお勧めします

```console
conda install tensorflow==1.14.0 keras==2.2.4 pillow matplotlib 
```

ここで、h5pyというライブラリをダウングレードしておかないと、
後で実行したときにエラーを吐きます

こちらも、理由が無ければ同じバージョンをインストールすることをお勧めします

```console
conda install h5py==2.10.0
```

さらに、動画を入出力とする場合はOpenCVを使用するので、そちらもインストールします
デフォルトのリポジトリではopencvはインストールできないので、
conda-forgeのリポジトリを指定してインストールします

```console
conda install -c conda-forge opencv==4.0.1
```

これで環境が整いました！

## ソースコードを準備する
こちらのYOLOv3実装ソースコードを使用します
https://github.com/qqwweee/keras-yolo3

gitでクローンしてもいいですし、ダウンロードしてきても良いと思います

## 学習済モデルを準備する
### 学習済モデルのダウンロード
上記githubのREADMEに書いてくれていますが、
学習済モデルをダウンロードすることができます
https://pjreddie.com/media/files/yolov3.weights

こちらからダウンロードしておきます

### ファイルをkeras用に変換する
ダウンロードしたファイルは、keras用のファイル(.h5）に変換する必要があります
変換スクリプトも準備してくれているので、そちらを使います

```console
python convert.py yolov3.cfg yolov3.weights model_data/yolo.h5
```

すると、model_dataの配下にyolo.h5というファイルが作成されているはずです

ここまでで、準備OKです！

# 実行
```console
python yolo_video.py --input <入力ファイル名> --output <出力ファイル名>
```
これで、動画を入力すれば物体検知した動画が出力されるはず！

## 実行のサンプル
無料の動画を使って、物体検知を実際にやってみました
こちらからダウンロードした動画を使っています
https://www.motionelements.com/

実際に検知した結果がこちらです（画像です）
Qiitaって手軽に動画は貼れないんですね…

![capture_yolov3_demo.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618591/9a216cd1-4763-8825-437f-3bca37c59eba.jpeg)
AWS SOA 備忘録

#【AWS SOA 備忘録】

問題集を解いていて、個人的にややこしく感じたところです。
試験前に見返す用でもあります。

##AWS Config

AWS CloudFormationスタックをサポートすることができる。

CloudFormationの現在と過去の構成の追跡を開始して、スタック構成が変更された時にAmazon SNS経由で通知を受け取れる。
Configルールを使用して、CloudFormationスタックがSNSトピックにイベント通知を送信しているか確認することも可能。

##AWS Artifact

重要なコンプライアンス関連情報の頼りになる一元管理型のリソース

ユーザーとの契約にかかる文章の他、AWS独自のコンプライアンス対応に関するレポートが提供される。

##AWS Trusted Advisor

AWSインフラストラクチャサービスを監視して、既知のベストプラクティスと比較する。
そして、節約やシステムパフォーマンス、セキュリティの観点からチェックするプログラム

##Amazon Inspector

AWSが提供する脆弱性診断を行うサービス
エージェントを利用したプラットフォーム診断のためのサービス

##VPCエンドポイント

クラスターと同じAWSリージョンのS3バケットへのトラフィックでは、バケットに直接トラフィックするVPCエンドポイントを作成できる。

##NATゲートウェイ

別のAWSリージョンにあるS3バケットとAWSネットワーク内にある別のサービスに接続できる。
AWSネットワーク外のホストインスタンスにアクセスすることもできる。

##インターネットゲートウェイ

VPC外のAWSサービスに接続するには、インターネットゲートウェイをVPCサブネットにアタッチ。
【VSCode】画面共有と一緒に入力したキーも共有できるツールが便利


画面共有をして、人の画面をみている時、「あれ、今の操作なんだったんだろう？？」と頭に❓が浮かぶ瞬間ないですか？
特にVSCodeの画面を共有していて、ペアプロとかしている時に起こりそうな一面ですね。

そんな時にすごく役立ってくれそうな機能を発見したのでご紹介いたします。

### その名は「VS Code Screencast Mode」！！


## 使い方
[![Image from Gyazo](https://i.gyazo.com/fcf6f037c9a11fb302a2341aea510757.gif)](https://gyazo.com/fcf6f037c9a11fb302a2341aea510757)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/66d866a4-6281-b4c5-7f97-be6e71a3b82e.png)

特に何かインストールすることもなく、`⌘+p`で検索欄に`>developer: Toggle Screencast Mode`と入力してスクリーンキャストモードをオンにするだけで起動可能！！

## おわりに
これは画面共有でいろいろ教えたりする時にかなり使えそう。

参考：https://dev.classmethod.jp/articles/vscode-screencast-mode/
Laravel リダイレクト後 フラッシュメッセージ

#はじめに
フラッシュメッセージは、リクエストされた間だけ表示される一時的なメッセージのことです。

エラーメッセージを表示したり、
処理が完了したことをお知らせするときなどによく使われますね！

今回は最もよく使われるであろうredirect後のフラッシュメッセージの
表示方法を自分の頭の整理をかねてメモ。

ちなみにどのLaravelのバージョンでも作動します！

#書き方

以下のようなリダイレクトされるコードがあったとします。

``` app/Http/Controllers/XxxController.php
    public function confirm()
    {
        return view('auth/delete/hoge');
    }
    
    public function delete()
    {
        return redirect('/delete/hoge');
    }
```

このリダイレクト先にフラッシュメッセージのデータを渡すには、redirect()メソッドからアロー演算子でwith()メソッドを繋ぐだけでokです。

with() メソッドの第1引数にキー、第2引数に値を入れます。

```app/Http/Controllers/XxxController.php
    public function delete()
    {
        return redirect('/delete/hoge')->with('message', 'パスワードが違います');
    }
```

データはセッションに保存されるので、Viewで表示するときはsession() を使います。

``` resources/views/auth/delete/hoge.blade.php
@if (session('message'))
    <div class="alert alert-danger">
        {{ session('message') }}
    </div>
@endif
```

お手軽で実装できますね。
vSphere 7.0 U2 のコミュニティーエディションの USB NIC ネイティブドライバの登場です

vSphere 7.0 Update 2 が登場して早3か月。ようやく待望の vSphere 7.0 Update 2 用の USB NIC ネイティブドライバが flings にアップされました。
詳細はこちらを参照してくださいね。
[vSphere 7.0 U2 のコミュニティーエディションの USB NIC ネイティブドライバの登場です](https://imaisato.hatenablog.jp/entry/2021/06/15/231439)
Webpack require.contextで.jpgをバンドルしたら404

## はじめに
ExpressをserverlessにしてNetifyで公開したが、その際に`require.context`で特定のディレクトリ以下のファイル全てをバンドルするというやり方をしていて躓いたのでその備忘録を残しておく。

※NetifyでBuild・Deployした時にだけ起きたのが理解できていないため、何かわかる方がいましたらご教示頂けると幸いです。（ローカルでBuildする分にはdistに.jpgファイルはちゃんと展開されていました(distフォルダ以下に出力されていました)）。

## どういう状況での話か？
以下のソースのように、.jpgを画面上にある場面で表示させるため各.jpgバンドルさせたいが、コメントアウトした部分のように1つ1つをimportするのは現実的でないので、[`require.context`](https://webpack.js.org/guides/dependency-management/#requirecontext)でバンドルさせていた（動的なバンドルになってしまうが。）

```js:index.js
// 省略

// import all img
// import './img/strong_positive.jpg';
// import './img/positive.jpg';
// import './img/neutral.jpg';
// import './img/negative.jpg';
// import './img/strong_negative.jpg';
// import './img/none.jpg';

const importAll = (r) => r.keys().forEach(r);
importAll(require.context('../', true, /\.jpg$/));

// 省略
});
```

この時に、ローカルでBuildしている分には、.jpgがdistにちゃんと出力されたが、Netify上でBuildすると以下の図のように404になってしまった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/f1e6066c-d9db-42cd-1501-07877019497d.png)

## どうやって解決したか？
[CopyWebpackPlugin](https://webpack.js.org/plugins/copy-webpack-plugin/)を用いて、明示的にdist以下に.jpgをコピーするようにした。これにより以下の図のように404にはならなくなった。
※この解決方法で正しいのかは不明・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/551e6086-29a5-1540-66f7-8e30022dd2a4.png)

webpack.configについては以下のような感じ。

```js:webpack.prod.js
const path = require('path')
const CopyWebpackPlugin = require("copy-webpack-plugin")
// 省略

module.exports = {
    entry: './src/client/index.js',
    mode: 'production',
    output: {
        path: path.join(__dirname, 'dist'),
    },
    module: {
        rules: [{
        // 省略
        }, {
            test: /\.(png|jpe?g|gif)$/i,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]',
            }
        }]
    },
    plugins: [
        // 省略
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, 'src/client/img'),
                    to: path.resolve(__dirname, "dist"),
                },
            ]
        }),
    ]
}
```

## ソースコード
ソースコード全体は以下。Netify上でサイトも公開している。

https://github.com/yuta-katayama-23/evaluate-feeling-serverless

## 参考文献
- https://webpack.js.org/plugins/copy-webpack-plugin/
- [Webpackで静的なファイルをコピーする方法](https://www.kalium.net/image/2019/10/30/webpack%E3%81%A7%E9%9D%99%E7%9A%84%E3%81%AA%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E3%82%B3%E3%83%94%E3%83%BC%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/)
docker-compose でstatic IPが効かなくなった

Windows でdocker のCompose のバージョンが 2.0.0 beta3 で発生する。

Use Docker Compose V2 にチェックがついているとdocker-compose でstatic IPが効かなくなる。

![設定画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243488/4455b157-0461-7ad1-b328-2af7853e610f.png)

実際に現象を再現してみた。


```docker:docker-compose.yml
version: '3.7'
networks:
  test_net:
    driver: bridge
    ipam:
      driver: default
      config:
        - subnet: 192.168.200.0/24
services:
  web1:
    image: nginx:1.21.0
    networks:
      test_net:
        ipv4_address: 192.168.200.99
  web2:
    image: nginx:1.21.0
    networks:
      test_net:
        ipv4_address: 192.168.200.55
```

上記の docker-compose を起動し、「docker network inspect」　で中身を見ると。。。


```
[
    {
        "Name": "staticip_test_net",
・・・省略
        "Containers": {
            "a3ab1409bc037753f51d6a0e5f77418b0ffefca9e9ba8b909113fe473c6dba32": {
                "Name": "staticip_web2_1",
                "EndpointID": "f0d078ccc32079a014764c0165a0e5910afb4c6b6dcbc8fa10a0156823abf7fc",
                "MacAddress": "02:42:c0:a8:c8:03",
                "IPv4Address": "192.168.200.3/24",
                "IPv6Address": ""
            },
            "c5df265fe1ed684f62b0287da6d48a5cb40c98b78d40fce344734dc8805cb76b": {
                "Name": "staticip_web1_1",
                "EndpointID": "7d76f0ef4d4024fe2b5ed68c6534793b233333d90f0b7945f8b26ec696346946",
                "MacAddress": "02:42:c0:a8:c8:02",
                "IPv4Address": "192.168.200.2/24",
                "IPv6Address": ""
            }
        },
        "Options": {},
        "Labels": {
            "com.docker.compose.network": "test_net",
            "com.docker.compose.project": "staticip",
            "com.docker.compose.version": "1.0-alpha"
        }
    }
]

```


 192.168.200.99　と 192.168.200.55になってない。ちゃんと動くようにするには、Use Docker Compose V2 にチェックを外すのが正解だ。いつチェック入れたのか・・・
![設定画面2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243488/21be6db4-3e05-e682-047d-9cc776efdb45.png)
設定後に再度docker-compose を起動したネットワーク構成は下記の通りになる。

```
[
    {
        "Name": "staticip_test_net",
・・・省略
        "Containers": {
            "6f00d4bb2e5ce7c458ec4f74b95fa86a48448eb691f36ce52612605307906c85": {
                "Name": "staticip_web2_1",
                "EndpointID": "8ba37672b74c698586cd83d3e19663ac99a276e51542243d366daf538aeb1e6d",
                "MacAddress": "02:42:c0:a8:c8:37",
                "IPv4Address": "192.168.200.55/24",
                "IPv6Address": ""
            },
            "b3a8fb91b2f7b6723aeedb3d0f3171a42077aeebe2ad8d15edb4c0ca30cf4f5b": {
                "Name": "staticip_web1_1",
                "EndpointID": "0e5023e90143f97ba6b50a6a98e4b8edc5cbc4dbf465a93f1afa7e71ca42f35d",
                "MacAddress": "02:42:c0:a8:c8:63",
                "IPv4Address": "192.168.200.99/24",
                "IPv6Address": ""
            }
        },
        "Options": {},
        "Labels": {
            "com.docker.compose.network": "test_net",
            "com.docker.compose.project": "staticip",
            "com.docker.compose.version": "1.29.2"
        }
    }
]
```


ちゃんとIPアドレスが指定された。めでたしめでたし。
【メモ】【サクラエディタ】意外と使うマクロ

## はじめに

個人的に好きなサクラエディタ
意外と使うマクロを忘備録的な意味合いで記述しようと思ったのでついでに記事にしてみました。

#### マクロの登録方法

以下のように検索すればたくさん出てくるので、
「サクラエディタ マクロ」で検索！

#### 参考
> ・[サクラエディタでキーマクロやjsマクロを新規作成する方法とその使い方]
(https://proengineer.internous.co.jp/content/columnfeature/5479)
> ・[サクラエディタでのマクロの設定方法・使い方]
(https://web.plus-idea.net/2016/09/use-sakura-editor-macro/)


---

#### ハイライト

単語をダブルクリックしたらエディタ内の同じ単語をハイライトにするマクロ
よくあるやつなので、検索したらすぐ出てくるやつ。

```
S_SelectWord(0);
S_SearchClearMark(0);
```

#### Jsonデータ整形

Jsonデータ整形とは言うものの、単純にカンマを改行させるだけ。
ログとかからちょっとしたJsonデータを見たい時に便利なのでよく使います。

```
S_ReplaceAll(',', ',¥¥r¥¥n', 44); // 全て置換
S_ReDraw(0);	                  // 再描画
```

#### スネークケースからキャメル式へ変換

変数名の変換など。
今はあまり使うことはないが、一応。
VScode等あればそれで対応すれば良い！

```
S_ReplaceAll('(_|^)(.)', ',¥¥u$2', 172); // 全て置換
S_ReDraw(0);	                         // 再描画
S_ReplaceAll('(^.)', ',¥¥l$1', 172);     // 全て置換
S_ReDraw(0);	                         // 再描画
```


## おわりに
記事になるかと思いましたが、
あんまり汎用的で使用できるものがなかったので残念。。
今後も勉強がてら何か作成して追記していきたいです。