OmniAICreator/Qiita-1.07M huggingface dataset:
React + TypeScript ドラッグ&ドロップでファイルアップロード

Reactでファイルをドラッグ&ドロップでアップロードする機能を作りました。
使ったのはdrop-zoneではなく、`react-drag-drop-files`です。

## 1.インストール
```
npm i --save react-drag-drop-files
```


### 2.使い方

`FileUploader`を使うと自動的にドラッグ&ドロップできるエリアが出てきます。

```JavaScript
import React, { useState } from "react";
import { FileUploader } from "react-drag-drop-files";

const UploadArea: React.FC = () => {
  const [file, setFile] = useState<File | null>(null);
  // typesは型がArrayなので配列で指定する
  const fileTypes = ["JPG", "PNG"];
  const handleChange = (file: File) => {
    setFile(file);
  };

  return (
    <>
      <FileUploader
        handleChange={handleChange}
        name="file"
        types={fileTypes}
      />
      {/*選択ファイル名を表示させる*/}
      <p>{file !== null ? `ファイル名：${file['name']}` : ''}</p>
    </>
  );
}

export default UploadArea;
```

こんな感じで出来上がります。
![スクリーンショット 2022-08-19 18.17.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/952495/9735465f-d0b4-b666-be26-444bee2ca4b4.png)

デザインをカスタマイズしたい場合は、
カスタマイズしたコンポーネントを`<FileUploader>`で囲えばOKです。


## おまけ：アップロードする処理
```JavaScript
import React, { useState } from "react";
import { FileUploader } from "react-drag-drop-files";

const UploadArea: React.FC = () => {
  const [file, setFile] = useState<File | null>(null);
  const fileTypes = ["JPG", "PNG"];
  const handleChange = (file: File) => {
    setFile(file);
  };

  const handleOnClick = useCallBack( async() => {
    const uploadFile = new FormData();
    uploadFile.append('file', file);

    await axios
      .post('/api/upload', uploadFile {
        headers: {
          'content-type': 'multipart/form-data',
        },
      })
      .then((res) => {
        alert('アップロード成功');
      })
      .catch((err) => {
        alert('アップロード失敗');
      });
  }

  return (
    <>
      <FileUploader
        handleChange={handleChange}
        name="file"
        types={fileTypes}
      />
      <p>{file !== null ? `ファイル名：${file['name']}` : ''}</p>
      <button onClick={() => handleOnClick()}>アップロード</button>
    </>
  );
}

export default UploadArea;
```


## 参考記事
https://github.com/KarimMokhtar/react-drag-drop-files
zabbixでwindowsのサービスを自動再起動する

Windowsでサービスは上がってるのに応答がない時に使います。中々使うことがなく、解説も古いものばかりだったので、備忘的に書いてみました。

        すでにトリガーは設定済みとして。
        今回のサンプルはサービス名を"Service Name"とします。
        トリガー名を"Service Name Down"とします。

## １．スクリプトの作成
#### a.管理からスクリプトを開きます。右上の「スクリプトの作成」をクリックします。
![zabbix_action01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/220924/6105cb70-3174-7bc2-1c52-1807cfa46f45.png)

#### b.名前などの入力
![zabbix_action02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/220924/e7d1fe8d-162b-6de0-5843-5aabc9f680c6.png)  

        名前は適当につけてください。
        範囲は「アクション処理」です。
        タイプは「スクリプト」です。
        コマンドは「c:\windows\system32\net.exe stop "Service Name" & c:\windows\system32\net.exe stop "Service Name"」
        ダブルクォーテーションをお忘れなく。
    
「追加」をクリックしてスクリプトの作成は完了です。

## 2.アクションの登録
#### a.設定からアクション→トリガーアクションを開きます。右上の「アクションの作成」をクリックします。
![zabbix_action03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/220924/d57458f1-c03c-10f9-a014-6bbeddf74320.png)

#### b.名前などの入力
![zabbix_action04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/220924/5b2b57e3-7af3-0738-a4b2-f6e2b9c8b86f.png)

        名前はやっぱり適当につけてください。
        実行条件も適当に設定しますが、大体この画面の通りのようになるかと思います。
        トリガーを直接選ぶ方が安全ですが、トリガーを探してくるのが面倒です。
        一長一短ですね。

#### c.実際の実行設定です。上の実行内容をクリックします。
![zabbix_action05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/220924/631fa39c-86ca-2719-ea0e-744228321f88.png)

        デフォルトのアクション実行ステップの間隔をお好みで設定します。
        私はあまりシビアにしたくないので、5mとしています。つまりまずは5分待ってみようと。

#### d.実際のアクションを入力します。実行内容の追加をクリックします。
![zabbix_action06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/220924/bcf09025-037a-410b-edf1-6142eccde1b8.png)

        まずは再起動がかかったことをメールで通知したいので、上記のように設定しました。
        ステップが2から始まっているのは最初のトリガーが1なので、
        2からやるとトリガー発生から5分待ってくれるためです。ですので、検知が5分間隔だと、最大で10分待つことになりますが、その程度のサービスだということの裏返しですね。
        あとはメールを送る設定をしておきます。長くなるので、メッセージのカスタマイズの内容は割愛します。

#### e.1.で設定したスクリプトを登録します。実行内容の追加をクリックします。
![zabbix_action07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/220924/6e966b5f-da69-cc19-8fb5-d648e5e5b2b0.png)
![zabbix_action08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/220924/a61b610c-b139-ab3d-9c7c-f7db6410b5e5.png)

        処理内容のリストに実行できるアクションが入っているので選択します。
        ステップはメッセージと同じように2から5にしています。3回も4回も再起動して上がらないなら、
        サービスの再起動では直らないと思いますので、ステップ5で止めています。
        現在のホストというのが障害が発生したホストです。
        他のホストで実行する場合はホストやホストグループに入れてください。
        感覚だけでいうとその場合は再起動は1度にするのが安全だと思います。

「追加」「追加」で戻って終わりです。かならず、テストを忘れずに。
ズンドコキヨシ with Vue2 コンポーネント活用の練習

# [わたし](https://twitter.com/momochanjazz)の勉強日記Vol.2 （実話）
#### 8月15日15:00
　先輩：「お前にコンポーネントの課題を与える！」
わたし：「はい！できました！:smiley:」
わたし：「余裕だったんで、コンポーネントを活用したサンプル作っちゃいます〜:smiley:」
　先輩：「おお！えらいじゃん」
#### 8月15日16:00
わたし：「あれ…」
#### 8月16日16:00
  　先輩：「お前大丈夫か…？」
わたし：「ごめんなさい分かりません教えてください」
　先輩：「とりまフローチャートを作ってみ！」
わたし：「ふ、ふろーちゃーと…………？」



# 作りたいもの
##### これ:point_down:
![ダウンロード.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2682570/3ad8af7f-b253-0a7d-772d-d2047a440e0d.gif)

##### 文章化するとこんな感じ:point_down:
- 「ずん」と「どこ」のボタンを押すと、それぞれ「ずん」と「どこ」がカードに表示される。
- カードが準備されていないときは、カードと文字が同時に表示される。
- 「ずん」「ずん」「ずん」「ずん」「どこ」の順で表示されたら、カード内で「きよし！」と表示される。
- 　「ずん」と「どこ」の文字数が１０を超えそうになったらリセットされて、新たにカードと文字が追加される。

参考：[ズンドコキヨシ](https://qiita.com/momoka-kawaguchi/items/c612e0a6efabcde6f1a8)

# 準備 〜フローチャートの作成〜
##### 先輩が言ってた <font color="Red">"フローチャート"</font>ってなんだ？
＞＞ プロセスやアルゴリズムを表現する流れ図のこと

こんなやつ（作ってみた）:point_down:
![フローチャート (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2682570/f7a2ad5f-0d7b-461e-1ec9-e669b6d4df06.png)

え、フローチャート考えるの難しくない？（小声）


# 実践 〜Vue2で書いてみる〜
#### 親コンポーネント
```vuejs:App.vue
<template>
  <div>
    <button @click="addMessage('ずん')">ずん</button>
    <button @click="addMessage('どこ')">どこ</button>
    <Zundoko
      v-for="zundokoCard in zundokoCards"
      :key="zundokoCard.id"
      :zundokoData="zundokoCard.zundokoData"
    >
    </Zundoko>
  </div>
</template>

<script>
import Zundoko from "@/components/Zundoko.vue";
import { v4 } from "uuid";
export default {
  components: {
    Zundoko,
  },
  data() {
    return {
      zundokoCards: [],
    };
  },
  methods: {
    addMessage(text) {
      // 条件1
      if (this.zundokoCards.length !== 0) {
        // 条件2
        this.check(text);
      } else {
        // 処理1
        this.zundokoCards.push({
          id: v4(),
          zundokoData: text,
        });
      }
    },
    check(text) {
      const targetCardIndex = this.zundokoCards.length - 1;
      // 条件2
      if (this.zundokoCards[targetCardIndex].zundokoData.length < 10) {
        // 処理3
        this.zundokoCards[targetCardIndex].zundokoData += text;
      } else {
        // 処理2
        this.zundokoCards.push({
          id: v4(),
          zundokoData: text,
        });
      }
    },
  },
};
</script>
```
# まとめ
「プログラムをどう書いていけば良いか分からない🥺」という時こそ！！
「フローチャート」を考えるのが大事だ〜〜
（[先輩](https://twitter.com/goto_lily)、気づかせてくれてありがとう。。）
【サイバー攻撃】水飲み場型攻撃とは

# 水飲み場型攻撃の概要
攻撃者がサイト等に罠を仕掛ける。そのサイトに訪れた人にマルウェアを感染させてデータを抜きとる。こんな感じです。

サバンナでは水飲み場で肉食動物が待ち伏せをし、水を飲みにきた草食動物を狩るということがあるみたいです。
攻撃者が罠を仕掛けて対象者がやってくるのを待つという手法がサバンナの例に似ていることから水飲み場型攻撃と呼ばれているそうです。
![スクリーンショット 2022-08-19 17.12.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2644705/8c674d26-cf3e-5886-cf3f-040cbf4d8caa.png)

# 具体的な仕組み
## ①攻撃対象者が訪れるサイトを調査
ターゲットがどんなサイトにアクセスするかなどを調べます。

## ②罠を仕掛けられるサイトを調べる
Webサイトの脆弱性を診断し、罠を仕掛けられるサイトを選定します。
Webサイトに脆弱性がなく、罠を仕掛けるのが難しい場合は類似のサイトを作成し、そこに罠を仕掛ける場合もあります。

## ③罠を仕掛ける
マルウェアを自動的にダウンロードさせるなどの不正プログラムをWebサイトに仕掛けます。

## ④ターゲットにマルウェアを感染させる
ターゲットが罠を仕掛けたWebサイトを閲覧することで、マルウェアを感染させて情報などを抜き取ります。

# 実例
米連邦政府人事管理局(OPM)の2150万人分の個人データが流出した事件が2015年にありました。
この事件は米国史上最悪の情報漏洩事件と言われているみたいです。

# 対策
- OSのバージョンを最新に保つ。
- ウイルスバスターやノートンなどのセキュリティソフトを導入し、マルウェアへの感染を防ぐ。

# おわりに
他のサイバー攻撃についてもまた調べてみようと思います！
おーわーり。
【PHP】多次元配列のカンマ区切りのカラムを1次元配列にまとめる

# コード
```PHP
<?php
$array = [
    ['staff' => 'name1,name2,name3,name5'],
    ['staff' => 'name4,name5,name6,name1'],
];
$result = [];
foreach ($array as $value){
    $result = array_merge($result,explode(',',$value['staff']));
}

$mergedArray = array_merge(...array_map(function($item) {
    return explode(',', $item['staff']);
}, $array));

または

$res = array_merge(...array_map(function($v){return explode(',',$v['staff']);},$array));

$res = array_merge(...array_map(fn($v) => explode(',',$v['staff']),$array));

var_dump($res);
```
# 結果2 
```
array(8) {
  [0]=>
  string(5) "name1"
  [1]=>
  string(5) "name2"
  [2]=>
  string(5) "name3"
  [3]=>
  string(5) "name5"
  [4]=>
  string(5) "name4"
  [5]=>
  string(5) "name5"
  [6]=>
  string(5) "name6"
  [7]=>
  string(5) "name1"
}
```
公共交通オープンデータセンターにあるドコモ・バイクシェアのstation_information情報をCSVファイルにする

当記事では公共交通オープンデータセンターにあるドコモ・バイクシェアのstation_information情報をpythonを使ってダウンロードし、CSVファイルにする方法を説明します。


# 1. 公共交通オープンデータセンターとユーザ登録
[公共交通オープンデータセンター](https://www.odpt.org/)とは：
(https://www.odpt.org/overview/　 より引用)
>公共交通オープンデータセンターでは、公共交通オープンデータ協議会に参画する交通事業者のデータを、一般の開発者やICTベンダー等にワンストップで提供します。
>
> - 鉄道・バス・航空・旅客船事業者のデータを、リアルタイムデータ等も含め、広くサポートします。
> - 事前処理（クレンジング）を行ったデータを、REST APIを通じて、共通のJSON形式で提供します。
> - バスや旅客船のデータを中心に、GTFS形式でのデータ提供も行います。


「**公共交通オープンデータ**を使用したい場合は、公共交通オープンデータセンター開発者サイトで、**ユーザ登録が必要です**。」となっているのですが、今回使用するドコモ・バイクシェアのstation_information情報はアクセストークンなしでアクセスできてしまいます。なので、以下は参考までに！

- - -

ユーザ登録が完了すると開発者サイトに記載されているAPI仕様に沿って、公共交通データを利用することが可能になります。ユーザ登録は無料です。
- [公共交通オープンデータセンター開発者サイト](https://developer.odpt.org/ja/info)

> 登録を申請いただいた後、申請内容に問題がない場合、最大2営業日程度で承認完了のメールをお送りします。


　と申請フォームには書かれていましたが、私の場合は、登録して1時間もぜずに（10分くらい?)承認完了のメールが来ました。

# 2. アクセストークンの確認(参考)
1でも書きましたが、今回使用するドコモ・バイクシェアのstation_information情報はアクセストークンなしでアクセスできてしまいます。なので、以下は参考までに！
- - -

登録が完了したら、アクセストークンを確認しましょう。
[公共交通オープンデータセンター開発者サイト](https://developer.odpt.org/ja/info)にログインします。

画面右上の Account から、 「アクセストークンの確認・追加」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/a53fe8ab-f7b8-651b-9707-aed5e9c010c0.png)

デフォルトで1つ作成されています。アクセストークンはここからコピーしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/3b8a1fcc-0ac2-ea6f-57ff-9f6edacfded3.png)

# 3. ドコモ・バイクシェア バイクシェア関連情報(GBFS形式)
こちらにあります:
https://ckan.odpt.org/dataset/c_bikeshare_gbfs-d-bikeshare

[GBFS形式](https://github.com/NABSA/gbfs)で提供されています。GBFS（General Bikeshare Feed Specification)形式はマイクロモビリティの標準的なデータフォーマットとして規格化されているJSON形式のフォーマットです。
詳細は、以下のQiitaの記事がわかりやすかったです：
- [GBFS(General Bikeshare Feed Specification)に入門しよう (GBFS v2.2)](https://qiita.com/kumatira/items/f9229c21d9f0db3b5ae3)

今回は[こちら](https://ckan.odpt.org/dataset/c_bikeshare_gbfs-d-bikeshare)の[バイクシェア関連情報 station_information](https://ckan.odpt.org/dataset/c_bikeshare_gbfs-d-bikeshare/resource/e8936a97-c341-416c-a39a-258335580de5)をpythonからAPIでアクセスして、CSVファイルに保存してみます。

station_information　はいわゆるサイクルポート情報で、サイクルポートの名前や経度・緯度、収容台数などの情報です。

# 4. station_informationをpythonからAPIでアクセスして、CSVファイルに保存

では早速やってみます。
[バイクシェア関連情報 station_information](https://ckan.odpt.org/dataset/c_bikeshare_gbfs-d-bikeshare/resource/e8936a97-c341-416c-a39a-258335580de5)
にアクセスすると以下のようなWebページが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/acbbe71e-021e-739e-004a-f00638cefc04.png)

私は最初、点線で囲まれたURLでアクセストークンを指定して情報取得していたのですが、よくみると一番上にアクセストークンなしのURLがありましたので(上のイメージの実線の四角で囲まれた部分)、こちらのURLを使用することにします。

このURLをクリックするとわかりますが、アクセスすればそのままGBFS形式のJSONが返ってきます。よってそのJSONをpandasのDataFrameに入れた後、csvとして保存すればOKです。

以下は`station_information.csv`に保存する例です:

```python
import requests
import json
import pandas as pd

req_url = 'https://api-public.odpt.org/api/v4/gbfs/docomo-cycle-tokyo/station_information.json'

# URLにアクセス
request = requests.get(req_url)

# 必要な部分のみ抜き出し
data_json = json.loads(request.text)['data']['stations']

# pandasのDataFrameに入れる
df = pd.read_json(json.dumps(data_json))

# 保存
df.to_csv('station_information.csv', index=False)

```

以上です。
【PHP】PHPで多次元配列を1次元配列にする

# コード1
```PHP
<?php
$array = [
    [1, 2, 3],
    [4, 5]
];
$aaa = array_merge(...$array);

var_dump($aaa);
```
# 結果1
```
array(8) {
  [0]=>
  int(1)
  [1]=>
  int(2)
  [2]=>
  int(3)
  [3]=>
  int(4)
  [4]=>
  int(5)
  [5]=>
  int(6)
}
```
Ubuntu22.04.1にRustインストールしてみた

# Ubuntuのバージョン
```端末$ cat /etc/os-release 
PRETTY_NAME="Ubuntu 22.04.1 LTS"
NAME="Ubuntu"
VERSION_ID="22.04"
VERSION="22.04.1 LTS (Jammy Jellyfish)"
VERSION_CODENAME=jammy
...
```


# Rustインストール

まずはubuntuをアップデートする※すでにしてればスキップ
```
sudo apt update && sudo apt upgrade -y
```
念の為、必要なパッケージもインストール
```
sudo apt install curl build-essential gcc make -y
```
Rustをインストールする
```
curl --proto '=https' --tlsv1.3 https://sh.rustup.rs -sSf | sh
```
パスの更新
```
source ~/.profile
```
インストール完了後にバージョンの確認　
```
// コンパイラ本体　Rust が正しくインストールされているかどうかを確認
rustc -V
//コンパイラ等をインストールするためのツール
rustup -V

```


# Hello World出してみる
```
//プロジェクト用のディレクトリを作成していく
$ mkdir workspace
$ cd workspace/

//プロジェクト作成
$ cargo new rust-work
     Created binary (application) `rust-work` package
$ cd rust-work/
$ ls
Cargo.toml  src

//Hello World出力
$ cargo run
   Compiling rust-work v0.1.0 (...)
    Finished dev [unoptimized + debuginfo] target(s) in 0.45s
     Running `target/debug/rust-work`
Hello, world!
```











# おまけ　ubuntuにてVisual Studio Codeのインストール方法

下記のサイトでダウンロードする

https://code.visualstudio.com/

コマンドでダウンロードしたファイルを展開
```
$ sudo dpkg -i code_1.70.2-1660629410_amd64.deb 
```
RDS(SQL Server)の停止処理ができない

## What's This

RDS(SQL Server)の停止処理を行うボタンを押下できず、停止処理可能になるまでのメモです。

![スクリーンショット 2022-08-18 15.45.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1740345/2b36a962-cabd-268e-7dc7-2550e4642a43.png)

## 原因

マルチAZ構成にしているのが原因でした。
https://docs.aws.amazon.com/AmazonRDS/latest/UserGuide/USER_StopInstance.html

![スクリーンショット 2022-08-18 15.53.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1740345/6f9e474f-d309-8f35-27d9-30328fb9e9b2.png)

## 解決策

シングルAZに変更すると、停止可能になりました。

![スクリーンショット 2022-08-18 15.57.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1740345/efb3f791-4b82-29aa-86a9-b3f49cffe47c.png)

## Refference
・https://docs.aws.amazon.com/AmazonRDS/latest/UserGuide/USER_StopInstance.html
Audio2Face導入(味見）

# 1.はじめに
* きっかけ
    * Isaac SIMの評価を活かしたい
    * もしかして社内用アバターが作れる!?
    * 本業の学習モデルが実現不可と分かり、気分転換

* 環境
    * Windows 10　20H2（いつもUbuntu20.04ですが、Audio2FaceはLinux版がありません）
    * Ryzen5 5600G
    * RTX-3090
    * Mem 32GB
    * SSD 500GB
    
# 2.参照サイト

* こちら参照しました。

https://www.nvidia.com/ja-jp/omniverse/apps/audio2face/

Developer アカウントお持ちの方はこちらとか

https://www.nvidia.com/en-us/on-demand/session/omniverse2020-om1276/?playlistId=playList-90e4e44c-f4dd-4f1c-8735-092379604b20

https://www.nvidia.com/en-us/on-demand/session/omniverse2020-om1537/

* その他Youtubeでもクリエーターの方々が素晴らしい解説をされています。

# 3.下準備（悪あがき）

* 今更Windowsインストールは無いでしょう・・・仮想かな。
    * VirtualBox、VMWare Playerで作ってみる。
    * しかもイメージはなんとWindows 11でTPM2.0対応版を提供してくれている。
    
https://developer.microsoft.com/en-us/windows/downloads/virtual-machines/


* こちらがイメージとなり、20GB程度の容量があります。

https://www.oracle.com/jp/virtualization/technologies/vm/downloads/virtualbox-downloads.html


:::note info
VirtualBox

* GPU活用の為にはQEMUなどの準備が必要。
    * WSLでのSDKmanagerチャレンジで環境を木端微塵にしたのでなるべく避けたい。
    * 参考しようと思った記事は以下になります。
:::

https://qiita.com/raitehu/items/04fff780e4465fc873ed

* OSがCentOSでちょっと違いますが、この手の準備が必要というで・・・

---------------------------------------

* 軽くGGるとVMWareならGPU使えるっぽそうな記載があり、こちらへ差し替え

https://www.vmware.com/jp/products/workstation-player/workstation-player-evaluation.html

:::note info
VMWare Player16

* GPU活用の為には ESXi ハイパーバイザーなどの関連製品が必要。
    * こちらは有償版でトライアルも可能とはありますが・・・
    * Azureで自動課金されたトラウマがあり、こちらもあきらめ。
:::


# 4.素直にWindows 10

* ちょっと触るだけなのでデュアルブートとかにせず、素直にSSD交換。
    * Windowsのインストールは皆様ご存知かと思いますので省略。
    * 速攻でNvidiaのドライバを最新にして、Omniverseダウンロード。

https://www.nvidia.com/ja-jp/omniverse/download/

* 勿論個人版で。

1. ランチャーの稼働後、EXCHANGE＞APP>Omniverse Audio2Faceをインストール
2. Nucleusも一応セットアップしておいてください。（アセットの活用時に有効）
3. 起動に相当時間がかかる（3，4分位）ので気長に待つ
4. Meta meshのスキンヘッドの男性が表示される。


* こんな感じです。
![屏幕截图 2022-08-19 09.38.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2155177/2d9dd4e9-35ba-37f2-f53a-94a6ece96fb3.png)


* 素のサンプル男性でもラップしたり、なにかしゃべったり音声がはいっています。
    * ただ再生するだけですと口パクのみなので、表情とそれが変化する時間を追加します。
    * EMOTION>Sadnessの下のところを＋クリックして、表情を組み合わせていきます。    


* 音声の作成はVOICE BOXを利用させて頂きました。

https://voicevox.hiroshiba.jp/

* 商用もフリーとの説明がありますが、利用規約に沿ってご利用ください。


# 4. さいごに（サンプル)

* 簡単に表情と音声をのせてみました。(聞き取り辛い点はご容赦を)


<iframe width="560" height="315" src="https://www.youtube.com/embed/cCi2Rj8EWYE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


* Youtubeは尺が短いと文句言われますね（管理画面）
* ちょっとした気分転換なので次からはDL系をしっかり進めたいです。
システムの開発手法

開発手法にはいろいろな種類がある。
システムを開発した後に客との間で思っていたのと違うだったりやり直しをしなくてはならないことになったりする。

# ウォータフォールモデル
開発手法としてはもっとも昔からある手法。
企画⇨用件定義⇨開発⇨運用⇨保守を順々に完了していく。

## 特徴
* ```管理しやすい```
* ```大規模開発```などで広く使われている。
* 利用者が```確認できるのは最終段階```になってから。
* 利用の思っていた仕様と```違う場合はそこまでやり直し```になる。

# プロトタイピングモデル
開発初期段階で```試作品（プロトタイプ）```を作り、それを利用者に確認してもらう。
それで開発側との```意識ずれを防ぐ```手法。
しかし
* 試作品を作ることも時間がかかるので```大規模なシステムにはあまり向かない```。
* 利用者側からの意見が多くなり先に進まなくなることも。

## 気づき
プロトタイプを段々作成していく中で```利用者の希望```のシステムが開発されるのか。

# スパイラルモデル
システムの複数の```サブシステムに分散```して、それぞれのサブシステムごとに開発される。
サブシステムごとに利用者に確認してもら得るため後になって```思い違いが生じ難くなり開発効率が上がる```。

## 気づき
サブシステムを確認してもらうことで利用者側から意見を他のサブシステムに反映されるから
開発効率が上がるのか。

# レビュー
各工程ごとに振り返り作業を行う。
問題を早期に発見し次の工程へと持ち越さないようにする。
（工程とは企画⇨用件定義⇨開発⇨運用⇨保守のこと）

## レビューの種類
### デザインレビュー
仕様書に不備がないかを確認する。
仕様書の妥当性を検証する。
#### 妥当性
その検査が測定しようとしているものをどれくらい的確に測定できているか、ということです。
出典 http://www.toshobunka.co.jp/examination/validity.php#:~:text=%E5%A6%A5%E5%BD%93%E6%80%A7%E3%81%A8%E3%81%AF%E3%80%81%E3%81%9D%E3%81%AE,%E3%81%A8%E3%81%84%E3%81%86%E3%81%93%E3%81%A8%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82

### コードレビュー
作成した```プログラムに不備```がないかを確認する。

## レビューの手法の種類
### ウォークスルー
```開発者が主体となって複数の関係者```とプログラムや設計書のレビューを行う。

### インスペクション
進行役として```第三者であるモデレータ```がレビュー責任者を務める。

#### モデレータとは？
モデレーターは「仲裁者」を意味する。
出典 https://otona-life.com/2022/07/02/126039/

### ラウンドロビン
参加者```全員が持ち回りでレビューの責任者を務める```。
参画意欲を高める。

#### 気づき
自分が責任者になるから緊張するのか。

# CASEツール
```システム開発を支援```するツール群のこと。
CASE（Computer Aided Software Engineering)とはコンピュータ支援ソフトウェア工学の意味
コンピュータでシステム開発を```支援することにより、その自動化```を目指す学問。

## 作業工程
工程には上流工程と下流工程がある。

### 上流工程
基本計画、外部設計、内部設計がある。

### 下流工程
プログラム設計、プログラミング、テスト、運用保守
出典 https://e-words.jp/w/%E4%B8%8B%E6%B5%81%E5%B7%A5%E7%A8%8B.html

## 各工程のCASEツール
上流工程は```上流CASEツール```、```下流工程は下流CASEツール```、```運用保守は保守CASEツール```がある。
これらを含めて統合CASEツールという。

### 上流CASEツール
システムの```分析や設計```を支援する

### 下流CASEツール
プログラムの```自動生成ツールやテスト支援ツール```などがある。

### 保守CASEツール
```既存のプログラムを解析```して元の設計仕様を探る。
リバースエンジニアリングやリエンジニア機能はこれにあたる。
#### リエンジニアリング
企業を改革するために既存の組織やビジネスルールを抜本的に見直し、プロセスの視点で職務、業務フロー、管理機構、情報システムを再設計すること。
出典 https://www.itmedia.co.jp/im/articles/0509/03/news021.html
## リポジトリ
```開発に関する情報を一元管理```するデータベースのこと
ほっかいどう認証店応援クーポンの郵便局在庫状況を Google Map で可視化する

コロナで落ち込んだ外食産業への需要を回復するために、GO TO EAT キャンペーンを始め、各地域で色々なクーポンを発行して、頑張っていらっしゃいますよね。

そんな中のひとつに、[ほっかいどう認証店応援キャンペーン](https://hkd2022ninsho.jp/)があるわけで。

参加店リストの画面なんか、非常に、ひっじょ〜に GO TO EAT と似ているのだが、まぁこれは触れてはいけないのだろう。

で、やっぱりお得なので、みんな争ってクーポンを買っているのでしょう（想像）。

今回のほっかいどう認証店応援クーポンの良い所は、どうやら紙のクーポンは道内の郵便局だけで販売しているらしいのだが、その在庫数が公表されているのだ。

これで、せっかく郵便局に言っても売り切れてた・・・なんてことが無くなるのだよ！！！

[PDF](https://hkd2022ninsho.jp/pdf/zaiko.pdf) で、だけどな！！！

なんで PDF にした。わかりづらいわ。非常にわかりづらいわ。しかもちゃんと郵便局が辞書順に並んでいるわけでもなく、なんか独自のルールで並んでいる。地域とかを考慮している？

わからん。おっちゃん、わからんよ。

だから作ったよ。Google Map で可視化するやつを作ったよ。

# 作ったもの

https://github.com/tetutaro/cheer_hokkaido_coupon

README にも書いたけどね、こんなことやってる。

* スクレイピングするスクリプト： `scrape.py`
    * ほっかいどう認証店応援キャンペーンのサイトから在庫一覧のPDFをダウンロードする
        * `zaiko.pdf` という PDF ファイルが生成される
    * ダウンロードしたPDFを読み込んで、郵便局名・住所・在庫数の一覧を得る
    * 得られた住所から Google Maps API を用いて緯度経度を得る
    * 上記のデータを JSONL ファイルにして出力する
        * `output.jsonl` という JSONL ファイルが生成される
* HTTPサーバのスクリプト： `app.py`
    * Google Map の画面を用意する
    * JSONL ファイルを読み込んで、Google Map 上のマーカーを生成する
    * 上記を表示する HTTP サーバ（FastAPI）を立ち上げる
* 後は[ローカルホスト](http://localhost:8000/)にアクセスするだけ

# 可視化の結果

* 青いマーカー：在庫部数 100 部以上
* 黄色いマーカー：在庫部数 100 部未満
* 赤いマーカー：在庫切れ

![stock_hokkaido.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84885/57b44d47-9309-3919-a263-08e8143b4bf4.png)

デフォルトの画面。北海道全体でみるとまだまだ在庫は余っているように見える。

![stock_sapporo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84885/a8adcccc-7f85-a586-97b5-c5152270f887.png)

札幌市を拡大すると、中央区はかなり売り切れちゃってることが分かる。ヤバイよ！

![stock_centre.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84885/d1752ada-4d59-bf7e-2404-37a4330da22c.png)

中央区を拡大する。札幌駅の周辺は売り切れちゃっている。
でもサッポロビール博物館の近くの中央郵便局にはまだまだありそうだ。

こんなことがビシッと分かるわけで。分かりやすいよ。

# 今回のポイント

* PDF は requests でダウンロード
* PDF の表を camelot を使って pandas.DataFrame の形でデータ読み込み
    * キレイに読み込める保証は全然なく、今回も結局は手で整形している
    * でも、何にも無く読み込むよりは 100 倍マシに読み込める
* googlemaps パッケージで、住所から緯度経度の変換
    * Google Maps API は有料！（無料の範囲はあるけど）
    * 連続で API を出すと　quota 制限に引っかかりがちなので、sleep 入れたり retry 入れたりしてる
* FastAPI + Jinja2 でお手軽 Web サーバ
    * Jinja テンプレートは簡単便利で良いなぁ
    * なんちゃって JQuery
* Google Map の Marker と InfoWindow を出すのに、ちょっとした工夫

# まとめ

まぁ、みんな紙クーポンじゃなくて電子クーポンを買うだろうけどね！！！

学んだこと：

* 思いついたら即座に作ってしまえ
* やっぱり可視化は重要！
Xojo  Web アプリ で外部 Web アプリと連動 ( Web1.0 )

注：Xojo 2020 以降は Xojo フレームワークとしての Web2.0 に移行しているが、以下は Xojo 2019 r3.1/3.2  の Web1.0 での環境


Xojo Webアプリから別 php アプリなどに遷移したい




# リンクを作る

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/bfb4a3c6-3cf1-4bbe-e999-0bbaa8159887.png)

WebLink を設置します。
今 XojoWeb が http://192.168.0.5/test で動いているとして、 URL に "template/" と指定すると http://192.168.0.5/template/ に遷移します。

# スタンドアロンアプリで同じサーバのアプリを呼び出す

スタンドアロンアプリはポートを指定して、
 http://192.168.0.5:8080 のようなアドレスで動いています。

ここから 同じサーバ上で動く php アプリを呼びたいとします。

 http://192.168.0.5/mkpdf.php  

この場合、WebLink を Link 1 として作成し、URL を "http://192.168.0.5/mkpdf.php" とすると php アプリに遷移します。

# 動作サーバのアドレスを固定しない

上記のやり方では、サーバのアドレスが異なるといちいち書き直しになります。
それを防ぐためには、WebLinkを以下のように初期化するコードを書きます。

```

var Host() as String
Host = Session.Header("Host").split(":")
Link1.URL="http://"+Host(0).DefineEncoding(Encodings.UTF8).ToText+"/template/mkpdf.php?use=清算書&key="+writeField.text

```

ここで、Session.Header("Host") は 192.168.0.5:8080 となります。
これからポート名を除外するために split で ":" 以前の文字列を取り出しています。

# GET メソッドのリンクをダイナミックに作る

以下は、「日本語英語」ラジオボタンによって、テンプレート「清算書」とテンプレート「Reimbursement」を切り替え、writeField に入力した内容をキーにして立替清算書を pdf 発行する php アプリを呼び出すものです。

```
var 日本語英語 as integer
日本語英語 = writeSyomeiRadio.SelectedCell.Left
var Host() as String
Host = Session.Header("Host").split(":")
if 0 = 日本語英語 then
  Link1.URL="http://"+Host(0).DefineEncoding(Encodings.UTF8).ToText+"/template/mkpdf.php?use=清算書&key="+writeField.text
else
  Link1.URL="http://"+Host(0).DefineEncoding(Encodings.UTF8).ToText+"/template/mkpdf.php?use=Reimbursement&key="+writeField.text
end if
```
BlenderにUSDZをインポートするときの覚書

# ΒlenderでインポートからUniversal Scene Discriptionを選択してもUSDZが表示されない
usd,usdcは読み込めるのにusdzは直接読み込むことができない．

usdzはusdcとテクスチャデータが含まれる圧縮ファイルで，他の記事ではファイル名をzipに変更し，展開することでBlenderにインポートできると書かれていることも多いが，拡張子の変更の際にテクスチャデータの一部が損傷することがある．usdzに対応した解凍ソフトを用いること．

usdcはBlenderで読み込むことができる．
読み込みの際，ウィンドウ右下の「実験的」>>「USDプレビューを...」にチェックを入れる．これでテクスチャも読み込める．
iOS App「カンタン席替え」


https://apps.apple.com/app/カンタン席替え/id1640634924

# アプリの使い方

## 左上の設定ボタンを押して、設定を開始します。

![Simulator Screen Shot - iPad (9th generation) - 2022-08-19 at 15.49.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2661763/cd6c7519-f28b-9bac-f105-28072fa1fc00.png)

## 生徒数、縦列数、横列数を設定します。

例として、生徒数は25人で縦５列、横６列で行います。

![Simulator Screen Shot - iPad (9th generation) - 2022-08-19 at 15.50.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2661763/86c09d12-87d5-c02a-97fa-16749c6a8b88.png)

## 使わない席を取り除きます。

使わない席を５席選ぶことで、生徒数と座席数が25で一致するのでエラーが消えます。

![Simulator Screen Shot - iPad (9th generation) - 2022-08-19 at 15.50.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2661763/893b6e81-c26f-c581-bbdd-14a657847a66.png)

## 必要に応じて特定生徒の座席を番号で指定します。

例として、前の席に２番と15番を指定します。

![Simulator Screen Shot - iPad (9th generation) - 2022-08-19 at 15.51.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2661763/c74b7479-e4d0-6777-e60e-75df724df386.png)

![Simulator Screen Shot - iPad (9th generation) - 2022-08-19 at 15.51.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2661763/24eb3b99-d41b-f616-c68d-2bfa1942cbb4.png)

## 生徒数と座席数を合わせたら左上の設定完了ボタンを押して、設定を完了します。

![Simulator Screen Shot - iPad (9th generation) - 2022-08-19 at 15.51.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2661763/a05ba562-574c-16ef-bd51-635fd31c40ea.png)

## 右上の席替えボタンを押して、席替えを実行します。

![Simulator Screen Shot - iPad (9th generation) - 2022-08-19 at 15.51.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2661763/90c96a0f-c65b-722d-3f1e-e17d3cf2bdb4.png)

## 席替えの結果は右上のボタンを押して、教師目線と生徒目線を変えることができます。

![Simulator Screen Shot - iPad (9th generation) - 2022-08-19 at 15.51.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2661763/c3bcff50-a9ab-c228-494d-6d57af46bfde.png)

## 必要に応じてスクリーンショットを撮って、席替えの結果を保存します。

# プライバシーポリシー

## 利用者情報の取得

本アプリが利用者の個人情報を取得することはありません。

## 利用者情報の利用

本アプリが利用者の個人情報を利用することはありません。

## 利用者情報の第三者提供

本アプリが利用者の個人情報を第三者へ提供することはありません。

## 免責事項

本アプリ利用上の不具合・不都合に対して可能な限りサポートを行っておりますが、利用者が本アプリを利用して生じた損害に関して、開発元は責任を負わないものとします。

## お問い合わせ先

本記事にコメントしてくだされば、対応させていただきます。
UnityではじめるC# 基礎編改訂版の脱出ゲームで手がとまったので備忘録

# はじめに
[UnityではじめるC# 基礎編改訂版](https://books.mdn.co.jp/books/3220303029/)を進めていく中で「脱出ゲーム-メモ帳をつくる」を脳氏で突破できなかったので備忘録

Unityのエディターバージョン
2021.3.8f1

以下が公式のドキュメント（多分)

http://digitalnativestudios.com/textmeshpro/docs/ScriptReference/TextMeshPro-SetText.html

# エラー
```:NullReferenceException
Object refetrence not set to an instance of an object
```
# やったこと
```c#:GameManager.cs
using TMPro;
(略)
buttonMessageText.GetComponent<TextMeshProUGUI>().text = mes;
(略)

```

# 所感
バージョンを書籍と異なるものでやっているため起こった事象。今後も気を入れて進めていきたい。
【Kali Linux・個人用】dpkg errorの解決方法

Kali Linux(実機インストール)
apt getやupgradeでdpkg errorが出て
--configure しても解決しない場合

```
rm /etc/kernel/postinst.d/z50-raspi-firmware
rm /etc/initramfs/post-update.d/z50-raspi-firmware
```
これで解決。めんどいから理由とか詳しく書きません
てかなんでKali LinuxにRaspiのやつ入ってるん？？？
ArchLinuxで無線ネットワーク接続する


# ArchLinuxで無線ネットワーク接続する

## 動機と主旨

ArchLinuxとWindowsのデュアルブートを構築したあと初めてArchLinuxのコンソールにログインした時に、ネットワーク接続できませんでした。

その時にネットワーク接続するためにしたことをメモしておきます。
有線ではなくWiFiでの設定です。

## 本文

### 大まかな流れ

1. Archのインストールメディアからライブ環境を起動する
1. ライブ環境にてネットワーク接続する
2. Archインストール先ドライブをマウントしてchrootする
3. netctlを設定する
4. 再起動して動作確認する

このままだとネットワーク接続できないのでライブ環境を用いて、ネットワーク接続に必要なパッケージをインストール先Arch(今回ネットワーク接続を有効化したい環境)へとインストールし設定していきます。
その後、動作確認をして終了です。

### 実践

#### Archのインストールメディアからライブ環境を起動する

Archをインストールメディアからインストールしたりデュアルブート構築したりしていれば説明不要だと思います。
私はUSBにインストールメディアをインストールしていたのでBIOSでUSB上のライブ環境を指定して起動しました。

起動後、コンソールに入ったら作業用に下記のコマンドでキーボードレイアウトを設定します。

`loadkeys jp106`

#### ライブ環境にてネットワーク接続する

Archのインストールにライブ環境を用いた時と同様に、iwctlで無線ネットワーク接続します。

下記のコマンドを実行して出力を見て、使う無線インターフェース名をメモします。
`iwctl station list`

下記のコマンドを実行して出力を見て、接続する予定のアクセスポイントのESSIDをメモします。
`iwctl your_wifi_interface get-networks`

下記のコマンドで無線ネットワーク接続します。
`iwctl your_wifi_interface connect your_essid`

#### Archインストール先ドライブをマウントしてchrootする

下記のコマンドでドライブを列挙し、Archインストール先であるドライブのsdaX番号を見つけ、Xの部分をメモします。
`fdisk -l`

先ほどメモした番号を用いてマウントします。
`mount /dev/your_sdaX_for_root_partition /mnt`

マウント先にchrootします。
`arch-chroot /mnt`

#### netctlを設定する

今回は無線接続にnetctlを使います。netctlのdhcpにはdhcpcdを用いるので併せてインストールし、有効化します。
また、接続にWPA暗号方式を使う場合wpa_supplicantをインストールします。

`pacman -Sy netctl dhcpcd wpa_supplicant`
`systemctl enable dhcpcd`

chroot環境を抜け再起動します。そして起動オプションの中からインストール先Archを選択して起動します。
`exit`
`reboot`

無線インターフェース名を確認してメモします。
`ip link`

netctlで使う無線接続用プロファイルを作成します。
`vim /etc/netctl/wireless-wpa`

下記の内容となるように編集します。
```
Description='A simple WPA encrypted wireless connection using 256-bit PSK'
Interface=your_interface_name（先ほどメモした無線インターフェース名。例えば、wlp2s2。）
Connection=wireless
Security=wpa
IP=dhcp
ESSID=your_essid（iwctlで接続に使用したESSID）
Key=your_AP_password（iwctlで接続に使用したパスワード）
```

プロファイルを有効化します。
`netctl enable wireless-wpa`

以上で設定完了です。続いて起動時に自動で無線接続するようになっているか動作確認します。

#### 再起動して動作確認する

起動後に下記のコマンドを実行して無線ネットワーク接続が成功しているかどうか確認します。
`ping -c 3 google.com`

上記のコマンドでDNS解決できていなかったりパケットロスして接続できなかったりしなければ正しく接続できています。


## 参考文献

https://wiki.archlinux.org/title/Netctl
【Laravel livewire】プロパティ地獄を回避する

## 概要

livewireで登録機能などを作る際に、入力フォームに使用するプロパティをこんな感じに宣言すると思います。

```php
class Create extends Component
{
    public $input1,$input2,$input3;
    public $inputSelect1 = [];

    public function render()
    {
        return view('livewire.create')
    }
}
```

少数の入力項目ならこれでいいと思います。

以前
- 選択肢のマスタ
- 入力項目
- 表示用の項目

などの宣言だけで4０行ほど画面を占領した事があり、

今回40行では済まないようなプロパティ数になりそうだったので、どうにかプロパティ周りをスッキリさせたいなと模索した所
良い感じの解決策を見つけたので書いときます。

## 項目を配列で宣言する

入力項目の親だけを宣言し、各項目を配列の要素としてmount時に代入します。
バリデーションの記述も以下のようになり、問題ありません。

```php
class Create extends Component
{
    public $inputs = [];

    protected $rules = [
        'inputs.input1' => 'required',
        'inputs.input2' => 'required',
        'inputs.input3' => 'required',
    ];

    public function mount()
    {
        $this->inputs = [
          'input1' => null,
          'input2' => null,
          'input3' => null,
        ];
    }
}
```

```html
<input type="text" wire:model="inputs.input1">
```

項目数が40個ぐらいになってくると画面上邪魔ですので、mount時に別ファイルから持ってくるのも良いと思います。
今回は以下のように対応しました。

```diff_php
class Create extends Component
{
    public $inputs = [];

    protected $rules = [
        'inputs.input1' => 'required',
        'inputs.input2' => 'required',
        'inputs.input3' => 'required',
    ];

+    public function mount()
+    {
+        $this->inputs = Hoge::getFields();
+    }
}
```

## [追記] updatedHogeみたいなクラスフック使いたい時どうするんだって？？
:::note info 
``$inputs['input1']``の変更を検知して処理をかけたい場合

```php
public function updatedInputsInput1()
{
    //処理
}
```

これで検知できます。配列まで命名規則に対応してるんすね、ビックリ
:::


## おわり

これでプロパティの宣言を最小限に抑えられそうです。
40代事務職Access触りたくないのでSQLを勉強してみたら感動した

自分の自己紹介的な記事
40代プログラミング初心者がpython半年勉強のざっくりまとめ記事はこちら

https://usagipy.com/40_python_enjoy_book/

下のリンクで記事を最新版に更新中

https://usagipy.com/access_hate__sql_like/

40代事務職、会社で上司がAccess使ってるので、それを修正するためにAccess勉強しようかな・・・って本を買って半年

1ページも勉強してません。そろそろやろうかな・・・って思って、ちょっと調べた

<b>AccessはマクロとVBAの知識が必要

いまさらVBAなんて勉強したくねぇ～～～！！

友達にちょっと相談してみる

<b>Accessって同時に編集するとぶっ壊れるからおすすめできない

たしかにしょっちゅうぶっ壊れるからイライラしています
自分が使いやすいようにACCESSを勉強しようと思ったのですが！

+ おすすめできない
+ すぐぶっこわれる
+ VBAの知識が必要

<b>Python勉強してるのはVBAとかやりたくないからだし、いまさらVBAやるならAccessなんてやりたくない

そこで気がつく

<b>Accessってデータベースじゃん！SQLができればいいんでしょ

っというわけでしっかり学習することにしました

<h2>SQLでビッグデータを集計できるらしいので楽しそう</h2>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2603269/ec2619b3-ff8c-51a8-01f7-6d5c074d700f.png)


集中演習 SQL入門 Google BigQueryではじめるビジネスデータ分析 (できるDigital Camp)

この本のターゲットは企画とか営業とかビッグデータを分析したい人

だから、売上の集計とかアクセス解析の方法、最近話題のGoogle アナリティクスのG4のデータの集計の仕方も乗ってる

初心者がイチからデータベースを作ってもどうせ中身空っぽ

SQLでデータベースにデータを登録削除するなんて最初はいらないじゃん！ということに気がつく

SELECT 文と言われるSQLのデータを取り出す部分だけがっつり学習すればいいのです

データの登録したいならCSVファイルをアップロードしちゃえばいいじゃない！っという力技ある

データはどうやって使うかがいちばん大事なので分析集計ができると楽しい

使うツールはGoole could platform の Big query
基本無料　大量で使うとなるとお金がかかるがSQLの学習ぐらいなら全然余裕で無料です

<h3>SQLでできる！売上集計やサイト訪問ごとのユーザー経路など</h3> 

- ユーザーごとの売上集計
- 商品ごとの売上や販売個数、平均単価
- 月ごとや、四半期、年ごとのデータ集計

Excelの場合コピペしたり色々関数入れて集計したり、ピボット使ってとかめんどくさい

でもSQLなら数行のSQL文で集計できる

最初は大変だけど結構慣れると楽しい

データが増えても、同じSQL文で集計できるのでメンテナンスしなくていい

かなり時短できるんじゃないかな

会社のIT部門にお願いして、SQLで集計したいっていって対応してもらえる事が前提にあるけれど。

生データを知ることで、どんな分析ができるかひらめくこともあります

<h3>具体的に覚えたSQL知識</h3>

- SELECT
- WHERE
- HAVING
- CASE WHEN THEN
- IF
- UNION JOIN
- サブクエリ 副問合せとか言うらしい
- WITH句 仮想テーブル
- 集計関数 SUM AVGとかよくあるやつ
- wwindow関数

とかいろいろ勉強した

Window関数はなかなか理解が難しくて、1ページ進むのに1日かかったりしました

でも、この辺ができると、ランディングページや、離脱ページをユーザーごとに調べたりできたり、株価の移動平均とかを集計分析できたりするので便利

演習問題も200問ぐらいあったりサンプルデータも充実している

- 売上データ
- 顧客データ
- アクセスログ

じっさいに仕事の集計で使うようなデータなので演習問題までゴリゴリやればSQL完全に理解したまでにはなると思います

<h2>SQLを学習した私は気がつく！DB構築なんてさせてもえない</h2>

- Access使いたくない
- かわりのデータベース必要
- IT部門からデータベース構築の許可なんて出るわけない

なにこれ詰んだ

<b>結局Accessを使わないといけないの？

ACCESSみたいに、.accdb みたいなファイル形式で使えるDBないの！？

絶望しながら悩む・・・
CSVファイルに保存してPythonでSQLを操るツールがあるっぽい
→いやそれはなんか違う

Pythonで操作できるDB・・・・・はっ！！

SQLitってあったな、かんたんなDBっていわれてたな・・・

そういえばあれ、拡張子.dbだわ！

Mysqlと違って、インストールみたいなのなかった

やったぜ

GUIで操作できるツールないかな・・・・

あった！

SQLliteならアプリでもPythonでも操作できるしどこでも保存可能

DB Browser for SQLite
https://forest.watch.impress.co.jp/library/software/sqldbbrowser/

これなら、何処にでも保存できて、Pythonで操作できる
SQLiteはpythonに標準搭載されてモジュールもあるしいいじゃない

データベースの作成知識は

スッキリわかるSQL入門 第3版 ドリル256問付き! (スッキリわかる入門シリーズ)


これで身につけました

1回学習したけれど、使う機会無くて触るの怖い・・・だったけど
最初に紹介した本でSQLの分析しまくってたら気がついたら抵抗感がなくなってました

むしろデータベースのテーブル形式でデータを取り扱いたい！って思えるようになりました

データを使うことに慣れると、逆にどうやってデータを管理すればいいのかわかる

色々細かいルールとか学ばなきゃいけないことは多いんだろうけどそこは少しずつ見に付けていけばいいかと思っている

そんなわけで、気がついたらpythonでSQLiteに追加削除できるようになってました

上司には黙ってSQLiteを使う予定

スキルを身に着けても別に給料に反映されないし、余分な仕事が増えるのが嫌なのでバレないようにこっそりSQLiteでDB化しつつ、pythonで自動化を進める

上司のAccessは触りたくないし、こっそり自分の作業を効率化

https://usagipy.com/40_python_enjoy_book/
Qiitaをはじめてみたが使い方がわからないので、、

「さあQiitaデビューだぁぁ！！！！ぁぁ。。ん・・？」


（これ、、、どどどどうやって書くんや。。？）
.
.
.
.
.
となったので、まずは基本的な書き方を練習してみようと思います。

※参考記事：
・[Qiita Markdown 書き方 まとめ](https://qiita.com/shizuma/items/8616bbe3ebe8ab0b6ca1)
・[Qiita マークダウン記法 一覧表・チートシート](https://qiita.com/kamorits/items/6f342da395ad57468ae3)

# 見出しの書き方
→冒頭に「＃」をつけるだけ。
　#の後ろに半角スペースが必要っぽい

# 文字の編集
＜太字＞
対象のテキストを**でくくる
```
**テキスト**
```

例：**地球のみんなぁ！ただいまぁぁ！！！**


＜文字色＞
対象のテキストを以下のように括る（色はRedとか）
```
<font color="色">テキスト</font>
```

例：<font color="pink">笑って怒って大変だぁ！</font>

# コードの挿入
挿入したいコードを「```」（バッククオート×３）でくくる。
※MACであれば「shiftキー」＋「@」で入力

＜練習＞
```
@media only screen and (max-width:600px){
  .description img{
    float: none;
    display: block;
    margin: 0 auto;
  }
}
```


ちなみにテキストの一部分を強調することもできるとか
やりかたは冒頭の「```」の後ろに言語名（cssとかphpとか）をつけるだけ

＜練習＞
試しにCSSでやってみました
```css
  @media only screen and (max-width:600px){
  .description img{
    float: none;
    display: block;
    margin: 0 auto;
  }
}
```
タグがピンク、属性が緑、数値は紫、、みたいな感じですかね。


また、冒頭の「```」＋「ファイル名」にすることでファイル名も挿入できるようです。
```stylesheet.css
  @media only screen and (max-width:600px){
  .description img{
    float: none;
    display: block;
    margin: 0 auto;
  }
}
```

# リンクの挿入、画像埋め込み
リンクは、[リンクテキスト]＋(URL)にすることで挿入できるようです。
冒頭に記載した本記事の「参考記事」で練習してみました。

参考記事：[Qiita Markdown 書き方 まとめ](https://qiita.com/shizuma/items/8616bbe3ebe8ab0b6ca1)


また、画像の挿入は![代替テキスト]＋(画像URL)とするようです。

![にょぽむ](https://pbs.twimg.com/media/DJ5sG5vUEAEHr6C?format=jpg&name=small)

# 引用
テキストの冒頭に>をつけます。

```
> テキスト
>> テキスト
```

例：
> 完ッ全にときめいちゃった！
>> もう！夢中だYO！！
複数のオプション引数を取るマクロを定義する

# はじめに

$\rm\LaTeX$では`\newcommand`というマクロが使えます。
これは新しいマクロを定義できるマクロで、簡単なマクロを定義するときにはとても便利です。

しかし、オプション引数を1つしか定義できないという制限があります。
さらにその位置は必須引数の前に固定されています。

このように痒い所に手が届かないので、何か方法がないかと調べました。

# xparseパッケージを使う方法

xparseパッケージには`\NewDocumentCommand`というマクロがあります。
これの第2引数にm(必須引数)やo(既定値なしのオプション引数)などを組み合わせたものを渡すと、その通りの引数を取るマクロを定義することができます。

例です。

```latex
\usepackage{xparse}

\NewDocumentCommand{\blank}{o m o}{%
    \underline{%
	    \IfValueTF{#1}{#1}{}%
        \hspace{#2}%
        \IfValueTF{#3}{#3}{}%
    }
}
```

ここで定義された`\blank`というマクロは両端の引数はオプションで、その間の引数は必須となっています。
つまり、以下のような使い方ができます。

```latex
\blank{100pt}
\blank{100pt}[suffix]
\blank[prefix]{100pt}
\blank[prefix]{100pt}[suffix]
```

# パッケージを使わない方法

xparseパッケージを使った方が短く、スマートに書けるので必要ないかもしれませんが、$\rm\TeX$の\defを使った方法もあります。

```latex
\makeatletter

\def\blank{%
    \protect\@blank%
}

\def\@blank{%
    \@ifnextchar[{%
        \@@blank%
    }{%
        \@@blank[]%
    }%
}

\def\@@blank[#1]#2{%
    \@ifnextchar[{%
        \@@@blank[#1]{#2}%
    }{%
        \@@@blank[#1]{#2}[]%
    }%
}

\def\@@@blank[#1]#2[#3]{%
    \underline{#1\hspace{#2}#3}%
}

\makeatother
```

この`\blank`もxparseのものと同じように使うことができます。

次々と展開していくイメージです。

# 参照

https://qiita.com/zr_tex8r/items/50168ad7087516c3e139

http://latex.ria10.com/%E6%9C%AA%E9%81%B8%E6%8A%9E/%E8%A4%87%E9%9B%91%E3%81%AA%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3%E4%BB%98%E3%81%8D%E3%83%9E%E3%82%AF%E3%83%AD%E3%81%AE%E4%BD%9C%E6%88%90

https://oversleptabit.com/archives/1179

# 感謝

[nekotailさん](https://teratail.com/users/nekotail)、ありがとうございます。
【Flutter】レインボーテキスト

# はじめに
ゲームをクリアした時とかでユーザーを褒めてあげたい時、
「おめでとうございます」みたいなテキストを表示しますが、
これを七色レインボーに輝かせたかった。
そうしたらユーザーが喜ぶと思った。

# 完成品
こんな感じ。
![レインボーテキスト.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515993/b564c500-4e21-9394-f55b-ed0251755f05.gif)
がんばってクリアした時にこんなの表示されたら絶対うれしいですよね。

# ソース
非常に無理やりな方法で実現してますごめんなさい。
うまくすれば、AnimationControllerは1つで良いと思う。

```dart
//AnimationControllerを3つ使うので、TickerProviderStateMixinをwith参照
class _Test extends State<Test> with TickerProviderStateMixin {
  //RGBそれぞれの色変更周期msecを定数で定義
  //それぞれ周期を適当にずらすといい感じになる
  static const R_DIRATION = 224;
  static const G_DIRATION = 203;
  static const B_DIRATION = 1180;

  //RGBそれぞれのAnimationController
  late AnimationController _rColorAnimationController;
  late Animation<double> _rColorValue;
  late AnimationController _gColorAnimationController;
  late Animation<double> _gColorValue;
  late AnimationController _bColorAnimationController;
  late Animation<double> _bColorValue;

  @override
  void initState() {
    //RのAnimationController設定
    _rColorAnimationController =
        AnimationController(duration: Duration(milliseconds: R_DIRATION), vsync: this);
    _rColorValue =
        Tween(begin: 0.0, end: 1.0).animate(_rColorAnimationController)
          ..addListener(() {
            setState(() {});
          });
    _rColorAnimationController.repeat(reverse: true);
    //GのAnimationController設定
    _gColorAnimationController =
        AnimationController(duration: Duration(milliseconds: G_DIRATION), vsync: this);
    _gColorValue =
        Tween(begin: 0.0, end: 1.0).animate(_gColorAnimationController)
          ..addListener(() {
            setState(() {});
          });
    _gColorAnimationController.repeat(reverse: true);
    //BのAnimationController設定
    _bColorAnimationController = AnimationController(
        duration: Duration(milliseconds: B_DIRATION), vsync: this);
    _bColorValue =
        Tween(begin: 0.0, end: 1.0).animate(_bColorAnimationController)
          ..addListener(() {
            setState(() {});
          });
    _bColorAnimationController.repeat(reverse: true);

    super.initState();
  }

  @override
  void dispose() {
    //AnimationController解放
    _rColorAnimationController.dispose();
    _gColorAnimationController.dispose();
    _bColorAnimationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    //RGB数値を0～255の範囲で作成
    int r = (255 * _rColorValue.value).floor();
    int g = (255 * _gColorValue.value).floor();
    int b = (255 * _bColorValue.value).floor();
    return Scaffold(
      body: Container(
        child: Text("おめでとうございます！",
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 20,
              //テキストに色を反映
              color: Color.fromRGBO(r, g, b, 1.0),
            )),
      ),
    );
  }
}
```

# こんなことができるぞ
![レインボーテキスト6.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515993/5874f0d4-e70d-3500-4291-033936ac28ac.gif)


がんばってクリアした時にこんなの表示されたら絶対うれしいですよね。
システムを開発する流れ

# システム開発の最初
実際の業務を把握するところから始めて、開発に取り掛かる。

# システム開発の流れ
```企画⇨用件定義⇨開発⇨運用⇨保守```という五段階のプロセスがある。
運用と保守とを繰り返しながら、やがて役割を終えて破棄する瞬間まで働き続ける。
これを```ソフトウェアライフサイクル```という。

検討すべき項目は、```スケジュール、体制、リスク分析、費用対効果、運用範囲```といった５項目。
という風にどのようなシステムを作るかを練り上げていく。

# システム開発の調達を行う
調達というのは開発を担当している```システムベンダに対して発注```をかけることです。
契約締結までの流れと取り交わす文書は次のようになります。

### 情報提供依頼(RFI: Request For Information)
発注側がシステムベンダに対して```最新の技術動向はどのような感じかを情報提供```してもらう。

### 提案依頼書(RFP: Request For Proposal)の作成と提出
システムの内容や予算などを```諸条件を提案依頼書```にまとめて、システムベンダに提出する。

### 提案書の受け取り
システムベンダは```具体的な内容を提案書```としてまとめ発注側に渡す。

### 見積書の受け取り
提案内容でOKが出たら、開発や運用・保守に係る費用を```見積書```にまとめて発注側に渡す。

# 開発の大まかな流れと対になる組み合わせ
見積もりの受け取りが終わると
システムベンダさんのところで開発作業が始まる。
そのプロセスは以下の通りだ。

### 基本計画
利用者に```ヒヤリング```して求められる```機能や性能を洗い出す```。

### システム設計
要件定義の結果に基づいて```システムの詳細な仕様を固める```。
```大枠から詳細へと、細分化しながら詰めていく```のが一般的。

### プログラミング
プログラミング言語を使って```設計通りに動くプログラムを作成```する。

### テスト
作成したプログラミングにミスがないか、```仕様通り作られるのかを検証```する。
検証は詳細から大枠へと遡る形で行うのが一般的。

#### 気づき
確かにプログラムのコードが意図する動きをしてくれるかを検証するからかな。

### 導入・運用
問題がなければシステムを```納入して、運用を開始```する。


# 基本計画（要件定義）
最も利用部門との関わりが必要となる。
```要求点を明確にする```ため。

要求を取りまとめた結果については、```要件定義書```という形で文書に残します。

### 気づき
相手との話がとても大事ということか。
それがなっていないとうまく開発できないのか。

# システム設計
要望を```システムの仕様に落とし込んでいく```。
## 外部設計
システムを```利用者側```から見た設計を行う。
利用者が```実際に手を触れる部分```。

## 内部設計
システムを```開発者```から見た設計を行う。
```実装方法や物理設計など```を行います。

## プログラム設計
```プログラムをどう作るか```という視点の設計を行います。
```プログラムの構造化設計や、モジュール同士のインタフェース仕様など```がこれに当たる。

# プログラミング
プログラムは```モジュール単位で作成```する。
プログラミング言語を使って一つ一つ記述していく。
プログラムを作成することを```プログラミング```という。
プログラミング言語は機械語に翻訳されて実行される。

## プログラミング言語の処理方式
機械語に全部翻訳して実行する```コンパイラ方式```
機械語に逐次翻訳して実行する```インタプリタ方式```

# テスト
作成したプログラムにミスがないかを確認する。
## テストの段階
複数の段階に分かれている。

### 単体テスト
```モジュールレベル```の動作確認を行う。

### 結合テスト
モジュールを```結合させた状態```での動作確認や入出力検査などを行う。

### システムテスト
```システム全体```を稼働させての動作確認や負荷試験などを行います。

### 運用テスト
実際の```運用と同じ条件```で動作確認を行います。

# 問題を解いた時の気づき
* プログラム設計の時にプログラムの流れ図を作成する。
* 基本計画（要件定義）の時にシステム開発計画を作成する。
LLVM/Clang 14をビルドする

公式ドキュメント:

* https://clang.llvm.org/get_started.html
* https://llvm.org/docs/CMake.html

# cmake
```
sudo apt install cmake ninja-build
ghq get llvm/llvm-project
cd src/github.com/llvm/llvm-project

mkdir build
cd build
cmake -DLLVM_ENABLE_PROJECTS=clang -DCMAKE_BUILD_TYPE=Debug -DBUILD_SHARED_LIBS=On -DLLVM_BUILD_LLVM_DYLIB=On -G Ninja --install-prefix /opt/llvm-14 ../llvm
```

`-G "Unix Makefiles"` だとrace conditionか何かでうまくリンクできなかったのでninjaに変えた。

`LLVM_BUILD_LLVM_DYLIB`を使っているのは、libclangのsoはデフォルトで生成されるもののLLVMのsoは生成されず、両方ないとうまいことClangを使うプログラムがリンクできなかったため。その後、 https://stackoverflow.com/questions/51474188/using-shared-object-so-by-command-opt-in-llvm も見て `-DBUILD_SHARED_LIBS=On` も追加。

# ninja
```
ninja
```

-jなしで並列ビルドされる。ビルドが終盤になるとメモリの使用量が増えてきて64GB RAMと2GBのスワップを使い切りマシンがクラッシュしたりldがSIGKILLされたりするので、htopでメモリ使用量を監視し、適当な場所でC-cし、以下のように並列度を下げる。

```
ninja -j 3
```

なお、↑でも上手くいかない場合は `ninja -l 5` のようにやるとload averageを見て負荷を抑えることができる。

# ninja install
```
sudo ninja install
```

# リンク
```
g++ $(/opt/llvm-14/bin/llvm-config --cxxflags) compile.cc -c
g++ compile.o $(/opt/llvm-14/bin/llvm-config --ldflags --libs) /opt/llvm-14/lib/libclang-cpp.so
```

そもそもカスタムプレフィクスは諦めた方がよさそう
AWS EC2環境でphp8.0とcomposerをインストールする 

```sudo amazon-linux-extras | grep php```

php8.0の情報を見る
```sudo amazon-linux-extras info php8.0```

php8.0をインストールする
```sudo amazon-linux-extras install php8.0```

composerをインストールする
```sudo curl -sS https://getcomposer.org/installer | sudo php```

composerの移動
```sudo mv composer.phar /usr/local/bin/composer```

symbol linkを作成する
```sudo ln -s /usr/local/bin/composer /usr/bin/composer```
【VSCode】サイドバーのフォルダがまとまるので見えづらい場合

VSCodeを使用していて、ちょっとしたことだけど、見やすくなるので備忘録として投稿。

# Explorer:Compact Folders
VSCode > Setting（⌘,） > Features > Explorer > **Compact Folders**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256044/c1e570e9-fd84-bc13-38a3-a8f9f6bdfc6e.png)


これはdefaultでONになっているが、ONにすると、

```
components
└ common
　└ header.tsx
```

という風にフォルダ内にフォルダが一つだけのときは

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256044/97cb9a9c-700a-ebb4-f89e-4911739b2113.png)

という風に、まとまってしまう。


できればフォルダ名を正しく見たいので、先程の Compact Foldersのチェックを外す

そうすると、無事ツリー構造になりました。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256044/1c159e8f-a503-0a32-2b1a-fc3b9bef06d4.png)


## まとめ
エンジニアたるもの、ほんの少しのことでも効率化できるように、日々開発環境をアップデートするべし。
Docker環境で出るホットリロード開発エラーを解決する

# 原因

Dockerfileで `FROM node:18.6.0-slim` のように slimイメージを使用している場合、
ファイル変更を検知してホットリロードがかかるタイミングで、エラーで落ちる。

```bash
/bin/sh: 1: ps: not found
node:events:491
      throw er; // Unhandled 'error' event
      ^

Error: spawn ps ENOENT
    at ChildProcess._handle.onexit (node:internal/child_process:283:19)
    at onErrorNT (node:internal/child_process:476:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted 'error' event on ChildProcess instance at:
    at ChildProcess._handle.onexit (node:internal/child_process:289:12)
    at onErrorNT (node:internal/child_process:476:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'spawn ps',
  path: 'ps',
  spawnargs: [ '-o', 'pid', '--no-headers', '--ppid', 40 ]
}
```

恐らくホットリロード時に内部でpsコマンドを叩いてプロセスを確認している。

# 対策

psコマンドがなくて落ちているだけなので、psコマンドを入れてあげれば解決する。

```Dockerfile
# Dockerfileに以下を追加
RUN apt-get update -qq \
  && apt-get install -qy  \
  procps \
  --no-install-recommends
```
MDトラジェクトリーをPCA解析覚え書き

# 参考

https://qiita.com/maskot1977/items/082557fcda78c4cdb41f [1]
Andreas C. Muller、Sarah Guido　「Pythonではじめる機械学習」　（2017年　株式会社オライリー・ジャパン）[2]

# 主成分分析について
主成分分析とは、データの特徴量を相互に統計的に関連しないように座標軸を回転する時限削減の手法です。 [2]
それぞれのデータの分散が最大になるような軸を作成します。

MDシミュレーションで取得した生体分子の座標をストラクチャーアライメントの後、重要原子の座標をPCAにかけることで構造の変異を可視化することができます。

# 使用したライブラリ
環境は Anaconda3で構築しました。
Ubuntu18、MacOS Monterey 12.5での作動は確認しています。
MDシミュレーションはGROMACSを使用しているので、トラジェクトリーが.xtc、トポロジーが.gro形式となっています。マルチプルpdbファイルでも同様にできます。
```python
import pandas as pd
import numpy as np
from sklearn.decomposition import PCA
from mpl_toolkits.mplot3d import Axes3D
import mdtraj as md
import matplotlib.pyplot as plt
import matplotlib.cm as cm
import matplotlib.ticker as ticker
import matplotlib.colors as mcolors
```
# データ読み込み,座標の取得
予めCαのみの座標を抽出したトラジェクトリを読み込ませています。1フレームごとにCαの数だけ要素を持ったベクトルとしposに格納します。
```python
t = md.load('trajctory.xtc', top='topology.gro')
pos=[sum(i.tolist(),[]) for i in t.xyz]
df=pd.DataFrame(pos)
```

# PCA解析
ここからは[1]のコードを参考に進めます。主成分得点に関しては、[1]を参照ください。
```python
#標準化
dfs = df.iloc[:, 0:].apply(lambda x: (x-x.mean())/x.std(), axis=0)
#オブジェクトの作成
pca = PCA()
#PCAの実行
pca.fit(dfs)
# データを主成分空間に写像
feature = pca.transform(dfs)
#寄与率
pca.explained_variance_ratio_
#累積寄与率
np.cumsum(pca.explained_variance_ratio_)
#各種成分に対する変数の寄与度
pd.DataFrame(pca.components_, columns=df.columns[:], index=["PC{}".format(x+1) for x in range(len(dfs.columns))])
```
# PCA座標のヒートマップ
```python
fig = plt.figure()
ax  = fig.add_subplot(111)
g   = ax.hist2d(feature[0:10001, 0], feature[0:10001, 1], bins = 100, cmap = cm.jet,range=[[-30,30],[-30,30]])
ax.set_xlabel("PCA1")
ax.set_ylabel("PCA2")
fig.colorbar(g[3], ax = ax)
plt.show()
```
![スクリーンショット 2022-08-19 14.37.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607137/d1a61d8d-cf16-0409-771a-b9cedeae31cb.png)

# ３次元描画

```python
%matplotlib notebook
colors = list(mcolors.TABLEAU_COLORS.keys())
fig, ax = plt.subplots(figsize=(8, 8), subplot_kw={'projection' : '3d'})
ax = Axes3D(fig)
cm = plt.cm.get_cmap('RdYlBu')
# X,Y,Z軸にラベルを設定
ax.set_xlabel("PC1")
ax.set_ylabel("PC2")
ax.set_zlabel("PC3")

for i in range(10):   
    ax.plot(feature[i*1000+1:(i+1)*1000+1, 0], feature[i*1000+1:(i+1)*1000+1, 1],feature[i*1000+1:(i+1)*1000+1, 2],marker="o",
            linestyle='None',c=colors[i],label="sample"+str(i),alpha=0.5)
# 最後に.show()を書いてグラフ表示
plt.legend()
plt.show()
```
![download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607137/1b17da76-9a6d-c6e8-4c33-b557854b7c19.png)

# 最後に
私自身の技術的な覚書で、各情報を複合したものとなっています。よろしくお願いします。
WindowsからLinuxにシェルスクリプトを転送したら末尾に^Mが付与され、実行できない場合の対応

## 概要
WindowsからLinuxにシェルスクリプトを転送したら末尾に^Mが付与され、実行できない場合の対応
```
$ ./test.sh
-bash: ./test.sh: /bin/bash^M: bad interpreter: No such file or directory
```
## 手順
- viでエラーが発生しているファイルを開き`:edit ++ff=unix`を実行し、^Mを表示させる
    ```bash
    #!/bin/bash^M
    ^M
    echo testmessage^M
    ^M
    ...
    ````

- `:%s/^M//g`を実行し、^Mを削除する
※ ^Mを入力する場合は[ Ctrl+v ][ Ctrl+M ]の順に入力する

    ```bash
    #!/bin/bash
    
    echo testmessage
    
    ...
    ````
【個人用メモ】MAMPでApacheに接続できない時の対処(Apache couldn't be started because port 80 is in use by some other software.)

#エラーメッセージ
Apache couldn't be started because port 80 is in use by some other software.

MAMPが知らんうちにSTOPしてたから、起動してみたら上記エラーメッセージ

①とりあえずport80で動いているものを確認
$ sudo lsof -i:80


②心当たりないやつを消していく
$ kill -9 #PID

これで再起動してみたら無事動いた。やったー
責任は取れない。