OmniAICreator/Qiita-1.07M huggingface dataset:
【VBScript】コード：　番号：800A000D　概要：型が一致しません。: '対象の項目’



## 目次

[1. やりたいことと現在のコード](#1やりたいことと現在のコード)
[2. 環境](#2環境)
[3. エラー](#3エラー)
[4. 調査](#4調査)
[5. 原因と最終的なコード](#5原因と最終的なコード)
[6. 参考](#6参考)
[7. 最後に](#7最後に)


## 1.やりたいことと現在のコード

If文で`「条件1または2のときAを行う」`ということをしたいです。
例だと「ファミチキかななチキのときは「チキン」と出力する」…をしたいです。

```vb
If sListFood = "ファミチキ" Or "ななチキ" Then
	Response.Write("チキン")
End If
```


## 2.環境

- windows10 バージョン21H2
- ASP

## 3.エラー

以下のエラーが発生します。

```text
[エラーが発生した時間]　コード：　番号：800A000D　概要：型が一致しません。: '[string: "ななチキ"]'　詳細：　ソース：　種別：Microsoft VBScript 実行時エラー
```
```vb
'ななチキで引っかかる
If sListFood = "ファミチキ" Or "ななチキ" Then
	Response.Write("チキン")
End If
```


## 4.調査

各項目について切り分けて確認します。

```vb
'問題なし
If sListFood = "ファミチキ" Then
	Response.Write("チキン")
End If

If sListFood = "ななチキ" Then
	Response.Write("チキン")
End If

'後の項目（今回だとななチキ）がエラーになる
If sListFood = "ファミチキ" Or "ななチキ" Then
	Response.Write("チキン")
End If
```


## 5.原因と最終的なコード

条件を記述する際に、`sListFood=`を省略していたためエラーが発生していました。
記述を追加することでエラーが解消されました。

```vb
'ななチキの前にも「sListFood =」を記述する
If sListFood = "ファミチキ" Or sListFood = "ななチキ" Then
	Response.Write("チキン")
End If
```


## 6.参考

https://itsakura.com/vbs-if


## 7.最後に

VBScriptや同じエラーが出た方は試してみてください。解決のヒントになれば嬉しいです。

読んでいただき、ありがとうございました。
Google Colab環境でpystan 3.3を利用する

# はじめに

2022/9/1時点でPyStanの[Quick Start](https://pystan.readthedocs.io/en/latest/index.html)に記載のコードをGoogle Colabo環境で動作させる際のメモです。

Pystan 3.5 Quick Start
```python
import stan

schools_code = """
data {
  int<lower=0> J;         // number of schools
  real y[J];              // estimated treatment effects
  real<lower=0> sigma[J]; // standard error of effect estimates
}
parameters {
  real mu;                // population treatment effect
  real<lower=0> tau;      // standard deviation in treatment effects
  vector[J] eta;          // unscaled deviation from mu by school
}
transformed parameters {
  vector[J] theta = mu + tau * eta;        // school treatment effects
}
model {
  target += normal_lpdf(eta | 0, 1);       // prior log-density
  target += normal_lpdf(y | theta, sigma); // log-likelihood
}
"""

schools_data = {"J": 8,
                "y": [28,  8, -3,  7, -1,  1, 18, 12],
                "sigma": [15, 10, 16, 11,  9, 11, 10, 18]}

posterior = stan.build(schools_code, data=schools_data)
fit = posterior.sample(num_chains=4, num_samples=1000)
eta = fit["eta"]  # array with shape (8, 4000)
df = fit.to_frame()  # pandas `DataFrame, requires pandas
```

# 課題点

ビルド実行時にエラーが出ます。
```python
posterior = stan.build(schools_code, data=schools_data, random_seed=1)
```
```python
RuntimeError: asyncio.run() cannot be called from a running event loop
```

# 対処法
nest_asyncioをインストール
```python
pip install nest_asyncio
```
PyStan インポート時に以下を追加しておく
```python
import nest_asyncio
nest_asyncio.apply()
import stan
```

# その他の注意

school_dataのデータの辞書のところは、手書きせずにpandasのデータフレームを使うと思いますが、Type Errorがでます。tolist()で変換すればいけました。

※以下は辞書指定時のイメージです。
```python
schools_data = {"J": df.shape[0]
                "y": df["value"],
                "sigma": df["sigma"}
```
Type Errorでてしまいます。
```python
TypeError: cannot convert the series to <class 'int'>
```

対処方法
```python
schools_data = {"J": df.shape[0]
                "y": df["value"].tolist(),
                "sigma": df["sigma"].tolist()}
```


参考 
[WindowsマシンでPyStan3.2.0を使う](https://zenn.dev/honehone/articles/e175150eb2ae3b)
[Google colaboratory上でのStanの使い方](https://qiita.com/s-yonekura/items/163e91b78a6fd2d2cd98)
[Google ColabでPyStanがインポートできなくなってた件](https://toeming.hatenablog.com/entry/2022/08/28/pystan_import_error)
【JavaScript】日付操作メモ

# はじめに

頻繁に調べるのでそろそろ覚えようという意識で執筆。

# 時間を文字列 `yyyy-MM-dd HH:mm:ss` に変換する

## `Intl.DateTimeFormat` 使う案

```javascript
const target_datetime = new Date('2006-01-02T15:04:05+09:00')
console.log(target_datetime)
// -> Mon Jan 02 2006 15:04:05 GMT+0900 (日本標準時)

const target_datetime_str_slash = Intl.DateTimeFormat(undefined, {
  hour12: false,
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit'
}).format(target_datetime);
console.log(target_datetime_str_slash)
// -> "2006/01/02 15:04"

const target_datetime_str_hyphen = target_datetime_str_slash.replace(/\//g, '-')
console.log(target_datetime_str_hyphen)
// -> "2006-01-02 15:04"
```

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat

## `Intl.DateTimeFormat` 使わない案

基本的には `Intl.DateTimeFormat` 使えば良さそうだけどこういう方法もあり。

```javascript
const target_datetime = new Date('2006-01-02T15:04:05+09:00')
console.log(target_datetime)
// -> Thu Sep 01 2022 02:07:06 GMT+0900 (日本標準時)

const target_datetime_str = target_datetime.getFullYear() + '-'
  + ('0' + (target_datetime.getMonth() + 1)).slice(-2) + '-'
  + ('0' + target_datetime.getDate()).slice(-2) + ' '
  + ('0' + target_datetime.getHours()).slice(-2) + ':'
  + ('0' + target_datetime.getMinutes()).slice(-2) + ':'
  + ('0' + target_datetime.getSeconds()).slice(-2) + ''

console.log(target_datetime_str)
//-> "2006-01-02 15:04:05"
```

`getFullYear()` と間違えて `getYear()` を持ちいると `現在の年 - 1900` を取得してしまうので注意！

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/getYear

`getDate()` と間違えて `getDay()` を用いると曜日を取得してしまうので注意！

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay

# 昨日の日付を取得する

## NG

日付オブジェクト `today` を定義してそこから-1日した結果を `yesterday` に渡す、という処理で考えると失敗する。

```javascript
// 当日の日付を定義する
const today = new Date()

// 当日の日付が出力される
console.log(today)
// -> Thu Sep 01 2022 02:07:06 GMT+0900 (日本標準時)

//  todayオブジェクトを前日にし、
//  yesterdayにはtodayオブジェクト（前日）のUNIX時間を渡すことになる
const yesterday = today.setDate(today.getDate() - 1)

// 前日の日付が出力される
console.log(today)
// -> Wed Aug 31 2022 02:07:06 GMT+0900 (日本標準時)

// 前日の日付がUXIN時間（ミリ秒）表記で出力される
console.log(yesterday)
// -> 1661879226000
```

## OK

日付オブジェクト `today` を定義し、それを用いて別の日付オブジェクト `yesterday` も定義する。
そして `yesterday` の日付を1日前に変更すればOK。

```javascript
const today = new Date()
const yesterday = new Date(today.getTime())
yesterday.setDate(yesterday.getDate() - 1)

console.log(today)
// -> Thu Sep 01 2022 02:07:06 GMT+0900 (日本標準時)
console.log(yesterday)
// -> Wed Aug 31 2022 02:07:06 GMT+0900 (日本標準時)

```

上記はありがちなミスを説明するために当日と前日を同時に出力しているが、
昨日分のみ必要な場合は下記でOK。

```javascript
const yesterday = new Date()
yesterday.setDate(yesterday.getDate() - 1)

console.log(yesterday)
// -> Wed Aug 31 2022 02:07:06 GMT+0900 (日本標準時)
```

`setDate()` の細かい点は参考参照。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/setDate
ラインチャート（複数ライン、d3.js）

こんにちは。
ラインチャート（複数ライン）を描きました。d3.js を利用しました[^1]。tooltip も付けました。

![image.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54617/e5ed6f11-188a-d396-4a06-304a46b4cc2a.jpeg)

[^1]: こちらを参考にしました： "[D3.js - Multiple Lines Chart w/ Line-by-Line Code Explanations](https://www.goodmarketing.club/guide/d3-js-multiple-lines-chart-w-line-by-line-code-explanations/)"

* ソースおよび動作例はこちら：　"[d3.js_lines_multiple (with tooltip)](https://bl.ocks.org/kkdd/6235f48385f7a208e0b1956a19bb894f)" (bl.ocks.org)
初心者が躓きがちなローカルリポジトリ作成からリモートリポジトリへのプッシュまでのやり方

初投稿です！
本記事では初心者が躓きがちなローカルリポジトリからリモートリポジトリへのプッシュまでのやり方を解説します！
前提条件は
 - Git、GitHubを使用する
 - GitHubでリモートリポジトリを作成済みである
 - 簡単な用語が理解できる
 
 です。
特に用語に関しては、だれでもエンジニア / 山浦清透さんのGitとGitHubの解説動画で超わかりやすく解説してありますので、ぜひ見てください！！
urlはこちら
https://youtu.be/WHwuNP4kalU

また私の環境がwindowsなため、今回はwindowsに限定した話になります。ただ多分Macでも同じやり方でいけるかなぁとは思っています。間違っていたらごめんなさい<(_ _)>

では早速解説していきます！


１． Git Bushを起動する


２．ディレクトリを作成する
次のコマンドを入力してください。
```:ディレクトリの作成
$ mkdir (ディレクトリの名前)
```
これでローカルリポジトリの対象になるディレクトリを作れます。
また、このディレクトリはLocal Diskの
```
Local Disk/ユーザー/owner
```
内に作成されています。


３．ディレクトリに移動する
次のコマンドを入力してください
```:ディレクトリへの移動
$ cd (２で作成したディレクトリ名)
```
これでGit Bush内でディレクトリに移動--これから操作をするディレクトリの指定--が完了しました。
成功したら$の上に
```
Owner@（省略） MINGW64 ~/(3で指定したディレクトリ名) (master)
```
という風になっているはずです。


４．ローカルリポジトリの作成
次のコマンドを入力することで、３で指定したディレクトリをローカルリポジトリにすることができます。
```:ローカルリポジトリの作成
$ git init
```
しっかりとローカルリポジトリを作成できたらこのような文章が出るはずです。
```
Initialized empty Git repository in C:/Users/Owner/（リポジトリに指定したディレクトリ名）/.git/
```

５．ローカルリポジトリにファイルを指定
ではローカルリポジトリに指定したディレクトリにファイルを指定していきましょう。今回指定したファイルをリモートリポジトリにプッシュします。今回はindex.htmlを追加しましょう。事前にローカルリポジトリのディレクトリ配下にindex.htmlを作成しておいてください。
ただ作成しただけではプッシュしたときにわかりずらいので、適当にhtmlを書きましょう。
```
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
</body>

</html>
```
では次のコマンドを入力してください。
```:ファイルの指定
$ git add index.html
```
これでファイルの指定が完了しました。現在このファイルはstage上にいるので、本当に指定されたか、次のコマンドを入力して確かめてみましょう。
```
$ git status
```
結果はこのようになるはずです
```
On branch master

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)
        new file:   index.html
```
最後の行が、index.htmlになってたら問題なくstage上にいることがわかります。

６．ファイルをコミットする
ではファイルをコミットしていきましょう。
次のコマンドを入力してください。
```:ファイルのコミット
$ git commit -m"（メッセージ）"
```
メッセージにはファイルの変更点等の説明を書くことがほとんどです。
ではいよいよファイルをリモートリポジトリにプッシュしていきましょう！

７．リモートリポジトリにプッシュする
まずはGithubで作成したリモートリポジトリのページにいきます。
![スクリーンショット (150).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820564/dd7dcd1d-f643-c98a-3c7b-a122cccf367a.png)

Codeをクリックするとurlが出てくるので、コピーしてください。
そしてつぎのコマンドを入力してください。
```
$ git remote add origin (コピーしたurl)
```
入力したらプッシュの準備はすべて完了です！
最後に次のコマンドを入力してプッシュしましょう！
```:プッシュ
$ git push -u origin master
```

これで無事リモートリポジトリにプッシュできました！ではGitHubのリモートリポジトリのページに行き確認しましょう。

![スクリーンショット (152).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820564/d49c9d75-74a3-7f52-9194-1748f3faf7a1.png)

はい！できてましたね！
以上がローカルリポジトリ作成からリモートリポジトリへのプッシュまでのやり方です。
私もここは調べてもなかなか理解できずに苦戦しましたｗ
この記事で同じ初心者の方が救われることを祈ります…。
普段Azureしか触らない人がAmplifyを触ってみた

こんにちは、普段はAzure, .NETでアプリ開発をしていてAWSコンソールとは縁のないエンジニアです。
個人的にはAWSよりもAzureの方が好きなのですが食わず嫌いは良くないのでAWSも個人開発で触ったりしてます。

半年前くらいに業務で位置情報サービスについて調査する機会があり、Amazon location Serviceについて調べていて位置情報を使うと面白いサービスが作れるのでは！？と思いAWS周りのことを調べていてamplifyというサービスに出会ったのでamplifyについて記事にしていこうと思います。

### 最短amplify導入
詳しく知りたい人は[amplify Document](https://docs.amplify.aws/start/getting-started/installation/q/integration/js/)へGo！

簡単な使い方としては、

```
npm install -g @aws-amplify/cli
amplify configure
```

でAWSコンソールへの認証設定をして、

```
amplify init
```

でバックエンドプロジェクトを初期化して

```
## 以下の例ではgeo, authを追加してるよ
amplify add <service name>
```

で欲しいサービスの設定をローカル上で追加して

```
amplify push
```

とするとクラウド側にローカルでしていた設定が反映されるらしい。
[amplify ドキュメント](https://docs.amplify.aws)に書いてあるようにamplify CLIを叩くだけで認証機能をアプリに組み込んだり、位置情報サービスを組み込んだりができる。

### amplify CLIで作成されるフォルダ

Amplify CLIを叩いた後に作られるjsonを見るとわかるのですが、IAM Roleの設定だったり、ファイルを置いておくS3バケットの生成だったりが自動でされている。
下のスクショは試しにGeoとAuthサービスを足してみた時のイメージです。

①.config, #current-cloud-backend
AWSリソース同士のマッピング、ローカルファイルとamplifyで管理しているリソースのマッピングをおこなっている。
②backend
リソース生成時のパラメータに入る値が定義されている。cloudformationという名前のフォルダがあるので、このフォルダの中身をCloudformationに食わせると全く同じリソースが作られるはず（多分。。。）
③hooks
amplify CLIにフックして何かコマンドを実行したい時に使えるらしい。


![名称未設定のアートワーク.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235110/1c4fa6eb-ccba-44b6-5049-65ee5f941e45.png)


amplify Docs(Javascript): [認証 - Getting Started](https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/)
amplify Docs(Javascript)：[Geo - Getting Started](https://docs.amplify.aws/lib/geo/getting-started/q/platform/js/)

AWSコンソール側でも作られたリソースを確認してみると以下のリソースが作成されていることが確認できた

```bash
amplify-alsdemoproject-dev-231359 AWS::CloudFormation::Stack 
UnauthRole                        AWS::IAM::Role                            
DeploymentBucket                  AWS::S3::Bucket                           
AuthRole                          AWS::IAM::Role               
UnauthRole AWS::IAM::Role  
AuthRole         AWS::IAM::Role   
DeploymentBucket AWS::S3::Bucket               
```

Amplify CLI経由で追加できるサービスには以下のようなものがある。
サクっとPoCを作りたい時に必要なものが揃っているイメージ。

![スクリーンショット 2022-09-02 0.59.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235110/6e48f2e4-a52c-2e6c-a316-fb9496e22bed.png)

### 感想
メンテナンスのしやすさだったり、チーム開発のしやすさ、他ベンダーのサービスとの組み合わせなどを考えた時に業務で使えるかはまだ分からないけれど、コマンドを叩くだけでAWSリソースが自動生成されて、簡単にアプリに組み込むことができるのは魅力に感じた。
裏で動いているのはCloudformationなので、細かいカスタマイズをしたいとなった時もCloud formationテンプレートの読み込み＆編集で対応できそう。
UI側についてもFigmaで作ったコンポーネントを読み込んだりできるのでこの辺りも試してみたい。
Django開発　仮想環境立ち上げと初期設定

VSCode内でディレクトリを作成して、VSCode内でターミナルを開く。


<h1>まず最初に仮想環境を作成する。</h1>


コードは
```
python3 -m venv venv
#venvを2回書くことに注意
```


次に作成した仮想環境をアクティベートするコードを記述。



```
source venv/bin/activate
```

<h1>Djangoのインストール</h1>

Djangoを仮想環境内にインストールする。

```
pip install django
```

次にDjangoのスタートプロジェクトコマンドを記述していく。

```

 django-admin startproject todoproject .
#ドット（.）をつける。

```

次にアプリを立ち上げる。

```
python manage.py startapp [アプリ名（何でもいい）]
```


<h1>初期設定</h1>

<h2>settings.pyファイルの設定</h2>
まずプロジェクト内にある、settings.py ファイルでhtmlファイルなどのテンプレートを保存するファイルを作り、
ディレクトリを設定する。

```python:settings.py
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

#'DIRS'にBASE_DIR / 'templates'を加える。
```

その後、manage.pyファイルと同じ階層にtemplatesフォルダを作る。



次に、同じsettings.pyファイルのINSTALLED_APPの欄に、先ほど作った todoアプリを記述する。


```python:settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'todo.apps.TodoConfig',
]
```

書き方は、
<アプリ名>.apps.<アプリ名の先頭を大文字で記述>Config

<アプリ名>がtodoの場合、

```
'todo.apps.TodoConfig',
```

<h2>urls.pyファイルの設定</h2>

プロジェクトとアプリのurlを繋ぎ込む。
プロジェクトで受けたurlを次のアプリの中のurls.pyファイルで指定された処理を参照する、と言う仕組みを設定する。


```python:todoproject/urls.py

#includeのimportを忘れずに記述する。

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('todo.urls')),
]
```
admin以外の文字列情報が来た場合、次のアプリの中のurlを呼び出すために、二つのpath内は空欄にする。

includeをimportするのを忘れないように。


次に、アプリの中にurls.pyファイルを手動で作る。

todoprojectのurls.pyファイルをコピペして、adminだけ残す。

```python:todo/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
]
```

初期設定なのでここまでOK
EC2起動時にgit、docker、docker-composeをインストールする

## はじめに
AWSのEC2をDocker運用で開発webサーバーとして構築する機会があり、最低限、git、docker、docker-composeは必要なので、起動時にインストールするよう設定しました。

今回はその方法を紹介します。

## 手順
EC2のユーザーデータという機能を使えばできます。
EC2起動時のコンソールにユーザーデータというフォームがあるので、そこに以下のシェルスクリプトを入力して起動すればインストールされた状態になっているはずです。
```
#!/bin/bash
sudo yum update -y
sudo yum install -y git
sudo yum install -y docker
sudo systemctl start docker
sudo systemctl enable docker
sudo usermod -a -G docker ec2-user
sudo mkdir -p /usr/local/lib/docker/cli-plugins
VER=2.5.1
sudo curl \
-L https://github.com/docker/compose/releases/download/v${VER}/docker-compose-$(uname -s)-$(uname -m) \
-o /usr/local/lib/docker/cli-plugins/docker-compose
sudo chmod +x /usr/local/lib/docker/cli-plugins/docker-compose
sudo ln -s /usr/local/lib/docker/cli-plugins/docker-compose /usr/bin/docker-compose
```
シェルスクリプトの内容を説明します。
### パッケージのアップデート
パッケージを最新にします。
```
sudo yum update -y
```

### gitのインストール
```
sudo yum install -y git
```
### dockerのインストール
dockerをインストールします。
```
sudo yum install -y docker
```
dockerサービスを起動します。
```
sudo systemctl start docker
```
マシンが立ち上がった時にdockerサービスの自動起動を有効にします。
```
sudo systemctl enable docker
```
dockerをインストールするとOSにdockerグループができるため、そこにec2ユーザーを追加します。
これをすることでec2-userは`sudo`なしで`docker`コマンドを実行できるようになります。
```
sudo usermod -a -G docker ec2-user
```

### docker-composeのインストール
docker-composeのバイナリファイル格納用のディレクトリを作ります。
```
sudo mkdir -p /usr/local/lib/docker/cli-plugins
```
インストールするバージョンを変数に格納します。
```
VER=2.5.1
```
GitHubにあるdocker-composeのバイナリファイルを作成したディレクトリにダウンロードします。
```
sudo curl \
-L https://github.com/docker/compose/releases/download/v${VER}/docker-compose-$(uname -s)-$(uname -m) \
-o /usr/local/lib/docker/cli-plugins/docker-compose
```
ダウンロードしたバイナリファイルに実行権限を付与します。
```
sudo chmod +x /usr/local/lib/docker/cli-plugins/docker-compose
```
`/usr/bin/`に`/usr/local/lib/docker/cli-plugins/docker-compose`へのシンボリックリンクを貼ります。
```
sudo ln -s /usr/local/lib/docker/cli-plugins/docker-compose /usr/bin/docker-compose
```

### 確認
起動後にインスタンスにログインし、以下コマンドを実行してバージョンが表示されていれば成功です。
```
git --version
docker -v
docker-compose --version
```

## 参考
EC2のユーザーデータについては以下の公式ドキュメントをご覧ください。
https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/user-data.html#user-data-shell-scripts
サブネットとDHCP

# サブネットとは
**サブネットとは、大きなネットワークを小さく分割したネットワーク**。
ネットワークを切り分けることで、直接通信できる範囲を狭め、ファイアーウォールを設定し、セキュリティの境界を作る目的で使う。AWSの場合はそのサブネットをどこのAZに置くのかを設定する。**つまりサブネットは物理的な場所を特定する**。
VPCでは、まずユーザーの使用できる領域としてネットワークの範囲を作成し、その下に用途に応じて、サブネットを作成する。
**サブネットを分ければ、サブネットAは公開し、サブネットBは非公開にするなどの役割を変えることもできる**。
**通常のネットワークではサブネット同士の通信はルーターが必要ですが、VPCの場合、ルーターなしで通信できる。**
# ネットワークの範囲とCIDR表記
ネットワークやサブネットの範囲を分けるには、**CIDR**(サイダー)と呼ばれる表記を使う。プレフィックス表記とも呼ぶ。
「/24」「/20」など、バックスラッシュの後ろにネットワーク長の数字を書いて表記する。これは「255.255.255.0」や「255.255.240.0」のようなサブネットマスク表記で記述することもあるが、**AWSではCIDRを使用する。**
**CIDRはIPアドレス数を表し**、
「/24」であれば256個、「/20」であれば4096個を意味する。
2の「32-ネットワーク長」乗で計算できる。
ex)
「172.31.0.0/16」であれば、「/16」は「65536個」という意味なので、
「172.31.0.0」から「172.31.255.255」までがネットワークの範囲
# ネットワークのクラス
ネットワークは、**規模に応じて、A/B/Cのクラスがある**。
|クラス|規模|CICR|IPアドレス数|プライベートIPの範囲|
|-|-|-|-|-|
|クラスA|大規模|/8~/15|16.777.216 ~ 131.072|10.0.0.0 ~ 10.255.255.255|
|クラスB|中規模|/16~23|65.536 ~ 512|172.16.0.0 ~ 172.31.255.255|
|クラスC|小規模|/24~/32|256 ~ 1|192.168.0.0 ~ 192.168.255.255|

デフォルトVPCは「/16」（クラスB）に設定されている。
それを「/20」で分割したサブネットが、それぞれのAZに置かれている
「/20」サブネットには4096個のIPアドレスがあるので、Auto Scaringを設定されるのも充分なIPアドレスが確保できる。
## クラスAについて
AWSの場合、親となるネットワークにクラスAの設定することはできるが、サブネットとして使用できる範囲は「/16」(クラスBの最大値)以下。
クラスAのサブネットは設定できない。
# IPアドレスの割り振りとDHCP
ネットワーク上でIPアドレスが割り振られるのは、EC2インスタンスやRDSインスタンス(データベース)である。AWSはVPCは特殊なので、ルーターやインターネットゲートウェイのIPアドレスには先頭の予約アドレスなどが使われている。
ネットワークやサブネットで使用するIPアドレスの範囲は、管理者が設定できるが、ここのホスト（インスタンス）にIPアドレスを設定するのは**DHCP**によって自動的に割り振られる。
VPC上ではDHCPサーバーが稼働していて、接続したインスタンスには、そのサブネットの範囲におけるいずれかのIPアドレスが割り当てられる。VPCで通常使用するIPアドレスは、プライベートIPアドレスである。
## 予約IPアドレス
サブネットの最初の４つと、最後のIPアドレスは使用できない。
これは、AWSによって予約されているからである。
そのため、256であれば５を引いた251個が実際に使用できるIPアドレス。
Arduinoで乱数のランダムネスを評価する方法の考察

以前書いた記事「お化け探知機「化けたん」の再発明を目指して！」[シリーズ](https://qiita.com/uhmin/items/143e7b4197381f7ee887)でハードウエア乱数発生装置を作ってその中で乱数の「偏り」や「秩序ある目」の評価についていろいろ考えていましたが、一部の「秩序ある目」を「周期性」と読み替えてArdionoで見つける方法を思いついたので報告します。

# 前提
乱数はビット列としてunsigned long intに記録されており、新しい乱数ビットは<<1 により一番古い乱数ビットがシフトアウトされて一番右側に新しいビットが挿入されます。

# （１）乱数の偏りについて
単純にHIGHになっているビットの数を数えて期待値を引きます。Arduinoのlong intは32ビットなのでpopcountでHIGHになっているビットの数の合計から16を引きます。

# （２）周期性について
周期性があるということは同じパターンが何度も出現することを意味しているので、ビット列をシフトして合致した目の数を数えることで周期性を評価します。
例えば 01 という周期２のパターンが32ビット分続くときは
01010101010101010101010101010101
となります。

これを <<2 として2ビット分ずらしてXORすると
01010101010101010101010101010101 元のビット列
010101010101010101010101010101<font color='red'>00</font> <<2
000000000000000000000000000000<font color='red'>01</font> XOR
右の2ビットに用はないので >>2 してやると
000000000000000000000000000000
となり、ミスマッチがないので0が30個出現します。

一方、周期性が全くない場合にはミスマッチを意味する1の数の期待値は (32-周期)/2 となり、周期は2なので期待値は (32-2)/2 = 15 となります。
01が16回出現した上の例の場合、期待値とのずれは 0 - 15 = -15 となります。この値を周期性スコアとしてみました。

ここまでを周期1から10までのスコアを計算するプログラムに直すと以下のように書けます。
本当は順列組み合わせとかを考慮して確率計算をするともっといいのですが、今回はここまでとします。

```C++
  union {
    unsigned long int sum=0;
    unsigned char div[4];
  } data;

  union {
    unsigned long int sum=0;
    unsigned char div[4];
  } c;

void main(void){
  // 電圧の偶奇性から乱数を発生
  sensorValue=readSensorValue();
  data.sum <<=1; data.div[0] |=sensorValue & 1; // 偶奇性をメモリに登録

  // 周期性解析
  for(dim=0; dim<=10; dim++){
    if(dim==0){ // （１）dim==0 の時は単なる偏りを解析
      score=all_popcount(data.div)-16;
    }else{ // （２）dim分だけシフトさせた後XORでHIGH LOWが一致するものをカウント
      a=data.sum;
      b=(data.sum << dim);
      c.sum=((a ^ b) >> dim);
      score=(32-dim-all_popcount(c.div))-(32-dim)/2;
    }
    Serial.print(score*1);
    Serial.print(", ");
  }
  Serial.print("\n");
}

char all_popcount(unsigned char *data){ // __builtin_popcount は8ビット分しかカウントしてくれないので1バイト分ずつ分割して和を算出
  char count=0;
  count+=__builtin_popcount(data[0]);
  count+=__builtin_popcount(data[1]);
  count+=__builtin_popcount(data[2]);
  count+=__builtin_popcount(data[3]);
  return count;  
}
```

本当は「化けたんの再発明」シリーズでソースを全部公開したいのですが、Qiitaにそぐわない内容も含まれてしまうため、ここでは乱数の周期性を評価する部分だけ抜粋してご紹介しました。
Swift/Objective-C コードに見出しをつけて可読性を上げよう


# 1.はじめに
プロジェクトや個人開発でコードを書く際、後でソースコードを見る人(未来の自分を含む)に向けてコメントを残すのはとても重要だと思います。
そのメソッドはどんなものなのか、何をしているのか、後で付け足すことや今後の懸念点がないか、考えるべきことは様々です。
そんなコメントの一環として、
```
- delegate実装の先頭
- まとまった意味を持つメソッド郡の先頭
```
に見出しをつけることによって、ソースコードが見やすくなると思います。

また、今回の環境については、下記の通りです。

__環境__
__Xcode Version 13.4.1__
__Swift version 5.6.1__

# 2. 実際の見出し
では、具体的な見出しの方法について見てみましょう。
## ●Swift 
Swiftでの見出しの書き方は下記の通りです。

```swift:SampleViewController.swift
// MARK: 見出し文
// MARK: - 見出し文
// MARK: 見出し文 -(-の後ろに空白を入れないこと）
// MARK: - 見出し文 -

//一般的に使われている見出し3つ
// MARK:
// TODO: 
// FIXME:

```

- // MARK: 見出し
は見出しが太文字になる。
- // MARK: - 見出し文
は見出しが太文字になり、見出し文の上部に区切り線がつく。
- // MARK: 見出し文 -
は見出しが太文字になり、見出し文の下部に区切り線がつく。
- // MARK: - 見出し文 -
は見出しが太文字になり、見出し文の上下に区切り線がつく。

__今回は例で、UITableViewDelegateの説明に使用してみました。↓__
### ①// MARK: - 見出し文
![スクリーンショット 0004-09-01 23.34.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692477/ff3a268e-2caa-1970-34d0-7933233e2b84.png)

### ②// MARK: 見出し文 -
![スクリーンショット 0004-09-01 23.36.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692477/f47ff7a6-71d2-4f3c-3393-8d3381fa088e.png)

### ③// MARK: - 見出し文 -
![スクリーンショット 0004-09-01 23.40.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692477/8838fb59-5028-ef5d-5c7a-3026e26019df.png)

一般的には下記3つが使われてそうです。(他にも別の使っているよという方がいれば教えて下さい！)
Swiftでは下記の見出しでも前後に　- をつける事によって、見出しの上下に区切り線をつけることができます。
// MARK:
// TODO: 
// FIXME:

__※Swiftでは#pragma markを使用した区切り線の利用はできません。__
## ●Objective-C
Objective-Cでの見出しの書き方は下記の通りです。
Swiftよりシンプルな機能だと思います。

```objc:SampleViewController.m
#pragma mark - 見出し文
#pragma mark 見出し文

//Objective-Cでは、下記は太文字にはできるが、上下の線はつかない
// TODO: 見出し文
// FIXME: 見出し文
// !!!: 見出し文
// ???: 見出し文
// MARK: 見出し文

```

- #pragma mark 見出し
は見出しが太文字になる。
- #pragma mark - 見出し
は見出しが太文字になり、見出し文の上部に区切り線がつく。

下記5つ
- // TODO: 見出し文
- // FIXME: 見出し文
- // !!!: 見出し文
- // ???: 見出し文
- // MARK: 見出し文
は見出しが太文字になる。

__こちらは、UITableViewDataSourceの説明に使用してみました。↓__
### ①#pragma mark 見出し
![スクリーンショット 0004-09-02 0.31.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692477/47fec132-ff9b-a155-e832-def92d4ec0f7.png)

### ②#pragma mark - 見出し
![スクリーンショット 0004-09-02 0.31.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692477/77ca0228-d4ad-98ec-030e-dd7376177017.png)

### ③// MARK: 見出し文 ・ // TODO: 見出し文　の例
![スクリーンショット 0004-09-02 0.48.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692477/fba140fd-9a1d-1e01-7910-9f9932d1c0fe.png)

___※Objective-Cでは// MARK:を使用した区切り線の利用はできません。___


# 3. まとめ
このようにSwift、Objective-Cでは見出しが設定できます。
見出しを上手く使い、自他共に見やすいソースコードを増やしていけば、作業スピードも上がりますし、メンテナンスもしやすいソースコードになっていくのではないかと思います。
改めてまとめてみて、私自身も見出しやコメントについて意識して実装していかなければならないと思いました。

# 4.参考記事
・[#pragma markで見通しを良くする](https://qiita.com/chibi929/items/9bacf1a2d3af0acc5787)
・[【Xcode】「// MARK:」や「#pragma mark」を使ってコードに見出しをつける](https://cpoint-lab.co.jp/article/202004/14931/)
・[swift:コードを見やすくするためにMARKなどを使いましょう](https://qiita.com/t_punch/items/25af8af5b29458988535)
sshで本番環境に接続したとき、iTerm2の背景を現場猫に変える方法

データ入れ替えようとしてtruncateしたら本番環境だった・・・

なんてことは何がなんでも避けたいですよね。
sshは手軽に接続できますが、その分間違えていたらと思う方には、
本番環境に接続したら背景が現場猫に変える方法があります。

![Moving.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/d1fe430e-bf49-a9a5-b22a-f7281ed275c4.gif)


# 前提
1. iTerm2使っていること
1. zsh（bashでも大丈夫です、修正するファイルが違うだけなので参考のURLを見てください）
1. .sshにconfigファイルの設定がされていること

# 手順
## 1. シェルの作成
以下コピペしてシェルを保存します。
保存先はどこでも大丈夫です、後から3で使用します。

``` sh
#!/bin/bash
echo -ne "\033]1337;SetProfile=$@\a"
/usr/bin/ssh "$@"
echo -ne "\033]1337;SetProfile=Default\a"
```

## 2. iTerm2の設定
1. iTerm2を起動します
1. `コマンドキー`+`,`でPreferencesを起動し、Profilesを表示します。
1. 左下の`+`ボタンを押して、新規にプロファイルを作成し、`Name`にsshのconfigで設定している接続先（ssh hogeserverのhogeserver）を登録します。![Preferences_と_-zsh_と_Slack___rememory___curiosity.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/35a88f75-b3f1-1293-ca6b-76739b69d19f.png)
1. Windowを選択しEnableにチェックを入れ、背景に表示したい現場猫を設定します。Blendingとかをいじると好みな感じなるかもしれません。
![Preferences_と_-zsh_と_Slack___rememory___curiosity.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/a8f92e5d-cec8-3383-7e1b-3d23ccba250a.png)
1. Prefrencesを閉じて、`Profiles` -> `設定したProfileのName` を選択します。こんな感じで表示されていれば成功です。![Cursor_と_-zsh.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/857fd544-cbf2-6532-7bca-02cfadcc9fff.png)

## 3. aliasの設定
.zshrc に以下を1行追加します。
（私は１のshellをbin配下に保存しています）

``` sh
alias ssh='~/bin/ssh-change-profile.sh'
```

## 4. 確認
ssh hogeserver で接続して、見た目が変われば成功です。
変わらない場合、profileのNameの文字が間違っていないか見直してみてください。

# 参考
もはや私の記事を読むよりこっちの方がわかりやすいという説はあります。
https://dev.classmethod.jp/articles/iterm2-ssh-change-profile/
Poetry1.2 のリリースで個人的に重要であったこと、既存環境で加えた変更

2022/08/31 に Poetry 1.2.0 がリリースされました。これまで動いていたものが動かなくなったという話も聞いたので、ドキュメントを読んで少し動かしてみました。その上で個人的に重要であったこと、既存環境で加えた変更をメモします。

# 個人的に重要だった変更
### 依存パッケージのグループ化ができるようになった
- tool.poetry.dependencies -> 暗黙的な main のグループ
- tool.poetry.dev-dependencies -> dev のグループになるので、早めに tool.poetry.group.dev.dependencies に変更する必要あり
- https://python-poetry.org/blog/announcing-poetry-1.2.0/#dependency-groups

### プラグインの機構が備わって、 poetry export はプラグインの機能になった
- poetry export のプラグインは将来的に別途 install する必要がある
- install 済みの `plugin` は `poetry self show plugins` で確認できる

### Poetry 1.2 は 1.1 によって生成された lock file を理解し、Poetry 1.1 は 1.2 によって生成された lock file を理解する
https://python-poetry.org/blog/announcing-poetry-1.2.0#are-lock-files-compatible-between-12-and-11

### poetry.lock と pyproject.toml の整合性をチェックする poetry lock --check option の追加
https://python-poetry.org/blog/announcing-poetry-1.2.0#lock


# 既存環境で加えた変更

### poetry の設定ファイルの場所を変更 (Mac環境)

```
Configuration file exists at <my_home_dir>/Library/Application Support/pypoetry, reusing this directory.

Consider moving configuration to <my_home_dir>/Library/Preferences/pypoetry, as support for the legacy directory will be removed in an upcoming release.
```

上記のような警告がでるようになったので、config.tomlを移動した

```
$ mkdir -p ~/Library/Preferences/pypoetry
$ mv ~"/Library/Application Support/pypoetry/config.toml" ~/Library/Preferences/pypoetry/config.toml
```

### pyproject.toml の tool.poetry.dev-dependencies を tool.poetry.group.dev.dependencies に変更

理由は https://python-poetry.org/blog/announcing-poetry-1.2.0/#dependency-groups に記載がある


# 関連リンク
https://python-poetry.org/blog/announcing-poetry-1.2.0
https://github.com/python-poetry/poetry
https://github.com/python-poetry/poetry-plugin-export
https://pypi.org/project/poetry-plugin-export/
DjangoでCeleryとRedisを使って非同期処理

Djangoで処理に時間がかかる機能があったので、どうにかならんものかと調べたら[Celery](https://docs.celeryq.dev/en/stable/ "Celery")と[Redis](https://redis.io/docs/getting-started/installation/install-redis-on-mac-os/ "Redis")なるものを発見。その時の備忘録。

## 必要なパッケージをインストール
```pip install celery```
```pip install django-celery-results```
```pip install redis```
```pip install django-redis```
```pip install django-celery-beat```
```brew install redis```

## settings.pyを編集
```
# ブローカーにredisを指定
CELERY_BROKER_URL = os.environ.get('REDIS_URL', 'redis://localhost:6379/1')
# 結果の保存先(今回はPostgreSQL)
CELERY_RESULT_BACKEND = "django-db"
# task状態が開始になったかを確認できるための設定
CELERY_TASK_TRACK_STARTED = True
```
```
INSTALLED_APPS = [
    ...
    'django_celery_results', # 追加
]
```
## アプリケーションディレクトリ配下にcelery.pyを作成
```
import os
from celery import Celery

# celeryで使うDjangoの設定ファイル(settings.py)を指定
os.environ.setdefault('DJANGO_SETTINGS_MODULE', '〇〇.settings')

app = Celery('〇〇')

# Djangoのconfigファイルをceleryのconfigとして使う宣言、
app.config_from_object('django.conf:settings', namespace='CELERY')

# 登録された全ての Django アプリの設定から、タスクモジュールをロードします。
app.autodiscover_tasks()

```
中身は[公式](https://docs.celeryq.dev/en/stable/django/first-steps-with-django.html#using-celery-with-django "公式")ほぼそのまま。

settings.pyと同じ階層の__init__.pyも編集。
```
# 追加
from .celery import app as celery_app

__all__ = ('celery_app',)
```

## 非同期処理のタスクとして登録
```
from celery import shared_task  #インポート

@shared_task #@shared taskとすることでCeleryのタスクとしてロードされる
def 〇〇(x):
    ...
```

## views.pyを編集
```
from celery.result import AsyncResult #インポート

task = 〇〇.delay(x)  #非同期の呼び出しは.delayこれだけ。        
id = task.id #タスクに割り振られるID取得できる
```
## 起動する
まずdjangoアプリ
```
python manage.py makemigrations # migrationファイルを作成（必要な場合）
python manage.py migrate # migrate実行
```
Celeryがバックで利用するテーブルを自動的に作ってくれる。凄い。
django起動。
``` 
python manage.py rumserver # アプリケーション実行
```

redis起動！
```
redis-server
```

celery起動！
```
celery -A proj worker -l INFO
```
ちなみにコマンドラインのオプションはこれ見れる
```
celery help
```
起動するとこんな感じで表示される
```
--------------- celery@halcyon.local v4.0 (latentcall)
--- ***** -----
-- ******* ---- [Configuration]
- *** --- * --- . broker:      amqp://guest@localhost:5672//
- ** ---------- . app:         __main__:0x1012d8590
- ** ---------- . concurrency: 8 (processes)
- ** ---------- . events:      OFF (enable -E to monitor this worker)
- ** ----------
- *** --- * --- [Queues]
-- ******* ---- . celery:      exchange:celery(direct) binding:celery
--- ***** -----

[20**-**-** **:**:**,***: WARNING/MainProcess] celery@halcyon.local has started.
```
おお、できた！
便利ですね〜

本番環境の[デーモン化チュートリアルも公式](https://docs.celeryq.dev/en/stable/userguide/daemonizing.html#daemonizing "公式")にあるのでやってみる。
次はそのあたりも記事にしようかと思います！

- 参考
    - [Djangoで非同期処理を実装する方法（Celery、Redis）Macローカル編](https://dot-blog.jp/news/django-async-celery-redis-mac/)
    - [Celery公式チュートリアル](https://docs.celeryq.dev/en/stable/getting-started/next-steps.html#next-steps)
    - [Redis公式](https://redis.io/docs/getting-started/installation/install-redis-on-mac-os/)
actで-Pでイメージ指定しても、強制的に「image=node:16-buster-slim」が使われてしまう件の対処方法


## act
GithubActionsをローカル実行できる


## 原因
yamlで指定している`ubuntu-latest`と-Pで指定しているイメージがあべこべだと`image=node:16-buster-slim`が使われてしまうよう

```yaml
jobs:
  test
    name: test
    runs-on: ubuntu-latest
    timeout-minutes: 20
```

## 対処方法
このような形でイメージ名を合わせるといい

```
act  -P ubuntu-latest=nektos/act-environments-ubuntu:18.04 -j 'test' --secret-file .secrets
```
ussファイルのシンタックスハイライト・コード補間対応(Visual Studio)

ussファイルはUnityのUIToolKitで使用される装飾ファイルですがこれをVisual Studioで開くと真っ白表示されるのでシンタックスハイライトとコード補間を無理やり対応します。(何故かuxmlは元々対応してます)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515818/40f9060f-a6b0-fe85-1f34-b86976a10ee6.png)
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515818/f885a30b-be3d-ec51-a574-628c9b5a62ac.png)


# Visual Studio
1. 「ツール」→「オプション」からオプションウィンドウを開きます。
1. 「テキストエディタ」の「ファイル拡張子」の項目を開きます。
1. 入力ボックス拡張子に「uss」と入力し、エディターにCSSエディタを設定します。
1. 「追加」ボタンを押します。
1. Visual Studioを再起動します。

基本的にussはcssなのでcssエディタを使用しています。

# VSCodeの場合
以下の@daikwさんの記事の「vscodeで編集する」の項を参照ください。
内容はgsファイルのシンタックスハイライト対応ですが同じようにussで対応すれば良いと思います。

https://qiita.com/daikw/items/4df6b2cb91a6077eb571#vscode%E3%81%A7%E7%B7%A8%E9%9B%86%E3%81%99%E3%82%8B
discord を debian 11 にインストールしてみた

# まえおき

本記事は筆者が少しハマったので、備忘録として記載したものです。
すべてのバージョンでこれが適用できることを保証した記事ではありません。

## 背景

とあるmeetupグループに参加していましたが、discordで話をするとの流れになり、公式ページより、 `discord-0.0.20.deb` をダウンロードしたところから始まります。

# 問題だったところ

```
$ sudo dpkg -i discord-0.0.20.deb
 :
dpkg: 依存関係の問題により discord の設定ができません:
 discord は以下に依存 (depends) します: libgconf-2-4 ...しかし:  パッケージ libgconf-2-4 はまだインストールされていません。
 discord は以下に依存 (depends) します: libc++1 ...しかし:  パッケージ libc++1 はまだインストールされていません。
```

これに対して、

```
$ sudo apt install libgconf-2-4 libc++1
```

としてもすぐに依存関係解決できませんでした。これ以上はちょっと面倒だなと。

# 解決

そういえば、`apt`をローカルファイルに使えたなと思い出して試したところ、問題なくインストールできました。

```
$ sudo apt install ./discord-0.0.20.deb
パッケージリストを読み込んでいます... 完了               
依存関係ツリーを作成しています... 完了                                                                                  
状態情報を読み取っています... 完了                                                                                      
注意、'./discord-0.0.20.deb' の代わりに 'discord' を選択します
以下の追加パッケージがインストールされます:
    gconf-service gconf2-common libc++1 libc++1-14 libc++abi1-14 libgconf-2-4 libunwind-14
提案パッケージ:                                                                        clang                                                     
以下のパッケージが新たにインストールされます:               
  discord gconf-service gconf2-common libc++1 libc++1-14 libc++abi1-14 libgconf-2-4 libunwind-14
アップグレード: 0 個、新規インストール: 8 個、削除: 0 個、保留: 106 個。
79.5 MB 中 2,390 kB のアーカイブを取得する必要があります。
この操作後に追加で 198 MB のディスク容量が消費されます。                                                                
続行しますか? [Y/n] y
```

だれかのお役に立てば幸いです。

〆
ゲーム開始/終了時のスクリプト

# 概要 
普段ゲーム開始などで用意するスクリプト集  メモ
  
https://github.com/ak-matsu/geme_tweet

## 開始

**処理内容**
- ゲーム起動に必要なショートカットを起動。
- Windowsサウンド変更　スピーカーからヘッドセットへ変更。  
- 最後にpythonで自動tweetを行う内容を添付。

```game開始.bat  
chcp 65001
start "" "C:\****\デスクトップ\****.exe - ショートカット.lnk"
start "" "C:\****\デスクトップ\ヘッドセット設定.lnk"
timeout 5
start "" "C:\****\デスクトップ\****.url"
timeout 30
start /min "" "C:\****\デスクトップ\****.exe - ショートカット.lnk"
start chrome.exe --window-position=1920,675 --window-size=930,350
timeout 3
start "" "C:\****\ドキュメント\programming\game_tweet.py"
```

## 終了

**処理内容**
- ゲーム終了に必要なショートカットを起動。
- Windowsサウンド変更　ヘッドセットからスピーカーへ変更。  
- 最後にpythonで自動tweetを行う内容を添付。
    - 終了時にFirefoxの指定URLページを起動。


```game終了.bat  
chcp 65001
start "" "C:\****\デスクトップ\スピーカー.lnk"
taskkill /f /im ****.exe /T
taskkill /f /im ****.exe /T
taskkill /f /im ****.exe /T
taskkill /f /im ****.exe /T
taskkill /im chrome.exe
taskkill /im taskmgr.exe
timeout 3
start "" "C:\****\ドキュメント\programming\game_tweet.py"
```

# game_tweet.py について  
主に下記の記事を参考にして自動ツイートに成功。

https://fuyutsuki.net/python-twitter-auto/

```game_tweet.py
import tweepy
import time
import schedule
import open_mv

if __name__ == '__main__':
    # 取得したアクセスキーたちをセット。
    api_key='*********'
    api_key_secret='*********'
    access_token='*********'
    access_token_secret='*********'

    auth = tweepy.OAuthHandler(api_key,api_key_secret)
    auth.set_access_token(access_token,access_token_secret)

    number = input('1:st_message,2:end_message,3:none: ')
    number = int(number)

    #2の時にopen_mv.browser_opのモジュール起動
    if number == 1:
        api = tweepy.API(auth)
        message = message = "今からgame開始"
        api.update_status(message)
    elif number == 2:
        api = tweepy.API(auth)
        message = "今日のgame終了"
        api.update_status(message)
        open_mv.browser_op()
    else:
        print("none")
    exit
```

```open_mv.py  
import time
import win32gui
import win32.lib.win32con as win32con
import subprocess
import os

def browser_op():
    os.system("taskkill /im firefox.exe")
    time.sleep(1)

    # ファイルパスを指定して変数へ代入
    firefox = r"C:\Program Files\Mozilla Firefox\firefox.exe"
    subprocess.Popen([firefox,"https://www.yahoo.co.jp/"])

    # アプリを右画面で開く
    hwnd = win32gui.GetForegroundWindow()
    win32gui.MoveWindow(hwnd, 2000, 50, 1600, 900, True)
    time.sleep(2)
    win32gui.ShowWindow(hwnd, win32con.SW_MAXIMIZE) 
```


## サウンドデバイスの変更
```changeSoundDevice.js
//https://jutememo.blogspot.com/2012/08/windows.html
  
var wait = function(title){
    do {
	WScript.Sleep(100);
    } while(!WshShell.AppActivate(title));
};

var WshShell =  WScript.CreateObject("WScript.Shell");
WshShell.Run("control mmsys.cpl");
wait("サウンド")
WshShell.SendKeys("{DOWN " + 
	WScript.Arguments.item(0) +
	"}%{s}{TAB 3}{ENTER}");
```
AtCoder B,C問題をKotlinで解こう - ABC268

当記事ではAtCoder、ABCのB問題ならびにC問題（時々D問題も）のKotlinでの解法を超初心者向けに詳細に解説します。

https://atcoder.jp/contests/abc268/tasks

## [B - Prefix?](https://atcoder.jp/contests/abc268/tasks/abc268_b)
#### やりたいこと
文字列Tが文字列Sで始まるかどうかを判定しよう。やり方は色々あるが、```String``` の ```startsWith``` メソッドを使用するのが手軽だろう。

#### 入力値の取得
```kotlin
    // 入力値の取得
    val s = readLine()!!
    val t = readLine()!!
```

#### サンプルコード
```kotlin:main.kt
fun main(args: Array<String>) {
    // 入力値の取得
    val s = readLine()!!
    val t = readLine()!!

    // t が s で始まるかどうか
    val isPrefix = t.startsWith(s)

    println(if (isPrefix) "Yes" else "No")
}
```
## [C - Chinese Restaurant](https://atcoder.jp/contests/abc268/tasks/abc268_c)
#### やりたいこと
それぞれの料理を何回移動させれば満足できるのかを見ていこう。料理 $p^i$ は位置が以下３通りの場合に満足となる。

+ $(p^i - 1)\ mod \ N$
+ $p^i \ mod \ N$
+ $(p^i + 1)\ mod \ N$

これらと現在位置 ( i )との差 ( m とする)  を求めて、mをキーとするMutableMapに件数を計上しよう。最終的にマップの値のうち一番大きいものが答えとなる。

#### 入力値の取得
```kotlin
    // 入力値の取得
    val n = readLine()!!.toInt()
    val p = readLine()!!.split(" ").map { it.toInt() }
```
#### サンプルコード
```kotlin:main.kt
fun main(args: Array<String>) {
    // 入力値の取得
    val n = readLine()!!.toInt()
    val p = readLine()!!.split(" ").map { it.toInt() }

    val cnt = mutableMapOf<Int, Int>()
    for (i in p.indices) {
        // 料理を満足できる人のリスト
        val targets = (-1..1).map { getNum(p[i] + it, n) }
        targets.forEach {
            // 料理を満足できる人のところまで動かす移動量を求める
            val diff = getNum(it - i, n)
            // 移動量をキーとしたMutableMapに件数を計上していく
            cnt[diff] = (cnt[diff] ?: 0) + 1
        }
    }
    println(cnt.values.max())
}

fun getNum(target: Int, n: Int): Int {
    var ret = target
    while (ret < 0) {
        ret += n
    }
    return ret % n
}
```
【画像つき】Sassでファイルをパーツごとに管理する方法

## ①partsフォルダに作りたい部品をいれる
Sassフォルダ直下にstyle.scssを置き
partsフォルダにFooterとHeaderを入れました
![分割.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784679/c8e4a68e-8c42-c051-c808-22eb928414d7.png)
## ②それぞれのフォルダに記述する
styleフォルダに「＠use "フォルダ名/パーツ名.scss"」を記入して部品ファイルを読み込みます
パーツが増えたら都度追加します
![記入.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784679/8befabc5-f905-f54e-7dc5-967df5076bd1.png)
## ③CSSファイルを確認する
上記を入力し保存したあとCSSファイルにこのように
CSSが生成されています
![CSS表示.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784679/2eeafe44-3fb5-220c-ad76-f9dc9034a6c4.png)
## ①SassファイルのCSSを生成しない方法
Sassファイルの先頭に＿（アンダースコア）をつけます。
ファイル名の頭に＿がついているファイルは保存してもCSSファイルを生成しません。
これを**パーシャルファイル**と呼びます。
## ②ファイル名を変更し各ファイルをコンパイルする
CSSファイルの生成をさせたくないファイルに＿（アンダースコア）を付けてファイル名を変更します
![パーシャル.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784679/de93cc42-97ea-7d58-31c5-d6c8621e9967.png)
更にSassファイル「style.css」の読み込みファイル名も変更し
各ファイルをコンパイルします
※＿（アンダースコア）と拡張子は省略して書くことが可能

記述されていないか確認するためにCSSを各パーツに追加しました
![パーシャル２.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784679/f3c9cd06-f491-6fc3-0a02-7451b565b971.png)

## ③保存して確認
生成されたCSSファイルにはアンダースコアを付けた後記述したCSSが反映されていませんでした
![パーシャル3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784679/c64032bd-113b-5ebe-ee84-82e10db5f060.png)

## ファイルの管理　応用編
partsフォルダ内に目次用Sassファイル「_index.scss」を追加します![_index.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784679/e6cabc7f-78f8-1c30-5752-0ea9f6495e40.png)
「style.scss」「_index.scss」に読み込みたい場所のパスを記述する
![応用.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784679/4165706f-1770-f454-5caf-0ca23fc7de27.png)

目次の「_index.scss」で部品をまとめる→
「style.css」で「_index.scss」フォルダを追加しコンパイルする→
CSSが書き出されるという流れになります
[Azure Functions] function.jsonのscriptFileプロパティは、気をつけないとはまる

# はじめに

困ったことが。
TimerTriggerのAzureFunctionsをローカルデバッグしていて、ある特定のタイミングで必ず別プロセスが起動してしまう。
別の言い方をすると、Functionsが二重で起動してしまう。
しかも後から立ち上がった方はブレークポイントで止まってくれない。(デバッグ用のポート(デフォルト9229)が既に使われてるから当たり前だけど

`runOnStartup`はデバッグのために`true`にしてたけど、こんなことなるの不便すぎるしどう考えても変だ。

# 環境

OS: Mac OS 12.6(Windows10端末でも再現性あり)
IDE: VSCode
Node.js: 16.14.0
npm: 8.3.1
azure function core tools: 4.0.4483

# 疑ったもの

## Azurite

ローカルデバッグ時のストレージアカウントエミュレータ
インストールし直してみたり、クリーンしたけど変わらず

## azure function core tools

これも再インストール。けど違いそう。

## そもそもFunctionsとはそういうものという説

Azureって、特にFunctionsってなんかクセが強いので。
けど、試しに`func init`でAzureFunctionsのサンプルを作ってみたけど、これは二重起動なんてしない。

# 原因

試しに`func init`で作ってみたのが功を奏して原因判明。
`function.json`の`scriptFile`をちょっとカスタマイズしていたのが原因っぽい。

# とった対応

こっちがカスタマイズしてた方(ダブル起動しちゃう)

```function.json
{
  "bindings": [
    {
      "name": "myTimer",
      "type": "timerTrigger",
      "direction": "in",
      "schedule": "0 0 7-9 * * *",
      "runOnStartup": false
    }
  ],
  "scriptFile": "./index.js"
}
```

こっちが直した方

```diff_json
{
  "bindings": [
    {
      "name": "myTimer",
      "type": "timerTrigger",
      "direction": "in",
      "schedule": "0 0 7-9 * * *",
      "runOnStartup": false
    }
  ],
- "scriptFile": "./index.js"
+ "scriptFile": "../dist/TimerFunc/index.js"
}
```

まあこれ、`func new`したらできるやつと一緒に戻しただけなんだけどね。

## `tasks.json`も修正

デバッグ用に用意してたファイルも修正。
今までやらんくて良いことしてたんやなあ。

```diff_json
    {
      "type": "func",
      "label": "launch debug",
-     "command": "host start --script-root \"./dist\" --javascript",
+     "command": "host start",
      "problemMatcher": "$func-node-watch",
      "isBackground": true,
      "dependsOn": "npm build (functions)"
    }
```

# 余談: `scriptFile`をいじったら、AzurePortal上で関数として認識されなくなった

まあ当たり前ですけど。
今までは`./index.js`のように、直下にあるファイルを指定してたけど、それが`../dist/TimerFunc/index.js`に変わったので、
Functionsの実行ファイルを見つけられなくなったんだね。
なので、`function.json`から、`scriptFile`に記載してある実行ファイルをパス通りに配置するようデプロイするなり
CICDを見直すなりする必要がある。

これが一番しんどかった。
EmailJSを使ってクライアント側で完結するフォームを実装する

## 始めに
Reactの勉強がてら、バックエンド処理が不要なお手軽フォームを作ってみたので備忘録として軽くまとめておきます。

## 言語、フレームワーク、ライブラリ
・React
・EmailJS

## EmailJSについて
公式サイト：https://www.emailjs.com/
クライアント側からメールを送信できるようにするライブラリです。単にメールを送信するだけでなく、例えば問い合わせ窓口に対するメールと、問い合わせ投稿者に対する確認メールの2通を同時に送れる機能などもあります。月に200通までの送信は無料で、それ以上は段階的な課金が必要となります。ただ、月1000通までは$4/月なので、料金は比較的易しめです。

## メール送信の流れ
1. EmailJSの登録
1. EmailJSのダッシュボードでメールテンプレート作成
1. Javascript側からAPI呼び出し
#### 1. EmailJSの登録
まずはEmailJSのサービスに登録する必要があります。ここでは主に、API KeysとserviceIDの発行と、受信するメールサーバの登録を行います。API KeysとserviceIDは、メール送信の際に必要になるものです。メールサーバは、今回はGmailにしましたが、sendGridやAmazon SESなどのサービスとも連携できるようです。サービスの登録全般は、下記の記事を参考にしました。とても分かりやすい記事なので、登録に関してはこちらを見るのがおすすめです。
[EmailJS で JavaScript だけで確認のメールを送ろう](https://clashusagi.com/emailjs/)

#### 2.EmailJSのダッシュボードでメールテンプレート作成
続いて、EmailJSのダッシュボードからメールのひな型を作成しておきます。フォームで入力された値を使いたいときは、{{ 変数名 }} のように記述します。こうすることで、APIを呼び出したときに指定した変数の値をテンプレートに埋め込むことができます。
テンプレートの作成が完了すると、template_idが発行されます。こちらもメール送信時に必要になります。
![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2842812/a5fe0a93-dc4d-7b68-401b-a411bcdbff86.png)

#### 3.Javascript側からAPI呼び出し
最後にJavascriptでAPI呼び出しをします。引数にはテンプレートに埋め込みたいパラメータと、service_id、template_id、publicKeyを指定します。

```javascript:sample.js
import emailjs from '@emailjs/browser';
  const answer_name = '回答者';
  const user_name = '質問者';
  const user_email = 'hogehuga@gmail.com';
  const type = '恋愛';
  const message = 'テストのメッセージです。';

  const sendEmail = () => {
    const param = {
      answer_name: answer_name,
      user_name: user_name,
      user_email: userEmail,
      type: type,
      message: message
    }
    // メール送信後の処理を記述できる
    emailjs.send('service_id', 'template_id', param, 'publicKey')
      .then((result) => {
          console.log('success');
      }, (error) => {
          console.log('failure');
      });
  };

```
上記の関数を実行すると、ちゃんとメールが送信されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2842812/300ecf87-fb52-c41d-2484-6f1e47fbeebf.png)

以上、EmailJSを使ったメール送信機能の実装でした。間違っている点などあればご指摘いただけると幸いです。



## 参考
・[ブラウザのJavaScriptから直接メールを送れるPaaS、EmailJS](https://qiita.com/silane1001/items/6d0f6d8e920208a55f33)
・[EmailJS で JavaScript だけで確認のメールを送ろう](https://clashusagi.com/emailjs/)
Mac node バージョン変更　nodebrew


##### nodeのパスを確認

```
$ which node
/Users/user/.nodebrew/current/bin/node
```
##### nodebrewで対象バージョンをインストール・切り替え

```
//対象のバージョンをインストール
nodebrew install-binary v16.14.2

//バージョン切り替え
nodebrew use v16.14.2

```
Markdown(マークダウン)とは

Qiitaの初投稿かつプログラマー初心者の私がマークダウンを少しでも分かりやすく書けるように
日々の勉強のアウトプットや各記事の追記を繰り返しながらスキルアップをして行こうと思います。
# マークダウンとは
軽量マークアップ言語（人間がシンプルなテキストエディタを使っての入力が容易になるように設計された、簡潔な文法）の一つで
シンプルな書き方で装飾されたHTML文書に変換出来るフォーマットとなっています。

# 見出し
### 書き方
```ruby:見出し
# h1
## h2
### h3
#### h4
##### h5
```
### 結果

# h1
## h2
### h3
#### h4
##### h5

このように#の数を増やすとサイズを変える事が出来ます、注意として

:::note warn
見出しを書く時は#の後ろに必ず半角スペースか改行文字を入れるようにする
:::

# Codeの挿入
### 書き方

文章にバッククオート三連(```)を前後に改行して囲む事により以下のような記述をする事が出来ます
```:書き方
このような感じになります。
```

用途としてはこのようにコードを書く際に使用します。
```ruby:code
  def index
    @items = Item.all.order('created_at ASC')
  end
```

# Note-補足説明
目を引く形で補足説明を入れたい場合は:::note infoと ::: で囲みます
### 書き方
```:書き方
:::note info
インフォメーション（infoは省略可能）
マークダウンとは
:::

:::note warn
警告
著作権には気をつけて記事を書く
:::

:::note alert
より強い警告
ライセンスや秘密保持契約に気をつけて記事を書く
:::
```
### 結果
:::note info
インフォメーション（infoは省略可能）
マークダウンとは
:::

:::note warn
警告
著作権には気をつけて記事を書く
:::

:::note alert
より強い警告
ライセンスや秘密保持契約に気をつけて記事を書く
:::

# Links-リンク
### 書き方
下記の方法でタイトル付きのリンクを作る事ができます。

```:書き方
[リンクテキスト](URL "タイトル")
```

```:書き方
[Qiita](https://qiita.com/ "QiitaHome")
```

### 結果

[リンクテキスト](URL "タイトル")

[Qiita](https://qiita.com/ "QiitaHome")

参考にしたサイト等のリンクを載せたい時に使用します。

# テーブル

#### 入力補完を利用する場合
3x2などと入力するとテーブルを自動入力できます。

:::note
xはエックスなのでご注意ください。
:::

#### 手動で入力する場合

```:書き方
| Left align | Right align | Center align |
|:-----------|------------:|:------------:|
| This       | This        | This         |
| column     | column      | column       |
| will       | will        | will         |
```
#### 上記の様にLeft(左揃い)Right(右揃い)Center(中央揃い)、align(整列)を書き込むと<br>以下の様に表示される様になります

| Left align | Right align | Center align |
|:-----------|------------:|:------------:|
| This       | This        | This         |
| column     | column      | column       |
| will       | will        | will         |

# 参考にさせて頂いたサイト
[マークダウン記法](https://qiita.com/sgwr1129/items/4614021a60201b3f82f0)
[Markdown記法 チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)
なぜデプロイ時にnpm run buildが必要なのか?

### ローカルサーバで動かすときは`npm start`だけで行けるのに、なんでサーバにデプロイするときは`npm run build`するの？

と、ふと思いました。だってローカルサーバーで見るときは、buildしたファイルを見てるわけじゃないじゃん？？？

### npm run buildは何をしているのか

一言で言うと、Reactだと最低限存在する`App.js`や`index.js`、そしてその他諸々のcomponentファイルやcssファイルをbuildフォルダに生成します。(もっと細かく言うと、bableがtranspileして、webpackでビルドしています。)

ざっくり書くとこんな感じ。
```
/build/static
  ├ css/
    └ main.css
  ├ js/ 
    └ main.js
```

`npm run build`して出来る詳しいファイル名や説明については、[Reactの公式doc](https://create-react-app.dev/docs/production-build/)に詳しく書いてありました。

### で、なぜbuildが必要なのか？
一言で言うと、**その方が速い**からです。
Reactの場合、コンポーネントやらスタイル用ファイルなどをいくつものファイルに分けていた場合、それをサーバ側で読み込むのは数秒とは言わずとも時間がかかります。表示に時間がかかるサイトは離脱率も高いし、フロントエンドの最大の敵とも言えるでしょう。
それをなるべく最低限のファイルにまとめることでサイトの読み込みを速くするという狙いがあります。
ただ、この`build`フォルダ配下にできるビルドした結果ファイルについては難読化されているため、ブラウザ上からエラーが起きているソースの箇所を見たい際にはちょっと不便です。そんな際に難読化する前の状態をブラウザで表示させるためにもう一つ用意されているファイルが**Sourcemap**です。

### Sourcemapってなに

Sourcemapは上記に書いた通り、ビルドした際にブラウザ上から難読化する前のソースをブラウザ上でマッピングして見せてくれる為のファイルです。ただ、デメリットもあって、開発者以外の外部からもReactのソースコードが丸見えになってしまうため、セキュリティ上あまりよろしくないとするところもあります。
Sourcemapを本番環境に置きたくない、というときには`.env`ファイル内で以下の設定を書けばビルドの際にSourcemapを生成しないようにしてくれます。

```.env
REACT_APP_GENERATE_SOURCEMAP=false
```
参考: [React Advanced Configuration](https://create-react-app.dev/docs/advanced-configuration/)

と、Reactのビルドの際に何が起きるのかについてまとめてみました。
参考になれば幸いです。
UE5 staticmeshを破壊してみる（メモ

サクッと壊すのをやってみたメモ

## 参考youtube
https://www.youtube.com/watch?v=XPnjleasU6Y&t=1s
https://www.youtube.com/watch?v=YvH01-Nhb-I

# Meshの選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/e4d47cbb-7ddb-885a-9f18-9d34ab1d12b5.png)

対象を選択してFractureモードを選択する

# Fractureファイルの作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/e0612bc7-389f-7c22-b7e8-f00427aedc92.png)
Newを押してFractureファイルを保存する

# 破壊の設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/ad43c3e1-3f26-f760-3e31-b688e7d5dfdb.png)

Uniformを選択
Fractureボタンを押す（ターゲットを選択状態にしている必要がある）
Level1が追加される

# BPで表示する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/2c26f8b7-a3ba-46c7-b1e2-edaba0283b48.png)

作成したファイルをBP上にドラッグする


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/896321e3-ced4-5401-b229-5bbe11b8ef97.png)

AddGeometry Collection Componentが追加される
（Detailsに↑で作成したファイルが設定されている

今まで表示していたmeshはSetVisibilityで表示消すか
DestroyComponentで削除して入れ替える（DestroyComponentで消しています

## 破壊したくない、動かしたくない箇所

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/17ce5113-7d5b-455b-72b8-40924ea2d63b.png)

Staticにすると固定される


## 切り替えた時に破壊させたい場合はClustering>Enable Clusteringのチェックを外す

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/d04cca27-2ed6-1536-fbf0-b944fa0646eb.png)