OmniAICreator/Qiita-1.07M huggingface dataset:
非情報系エンジニアから始める個人開発【ポートフォリオ作成】

## はじめに
筆者は工学部非情報系卒の非情報系エンジニアです。
ですので、製造業の職場やそこらへんの情報を聞きかじった範囲でテキトーに書いてます。
もし、ここが違うなどがありましたら、お知らせください。参考にさせていただき、気が向いたら改稿します。
執筆時、Pythonにて制作をしています。未経験のためのポートフォリオづくりの雑記として掲載させていただきます。

### 筆者ができること
- python(人様が作ったコードをなんとか読み込んで環境構築して動かすくらいのこと)
- テキスト系(markdownがメモ程度に書けたり、雰囲気HTMLやCSSがわかりそうなこと)
- C#(ほぼできない、Unityもぜんぜんできない)
- 下請けの会社に偉そうにもできず、やんわりやりたいことを伝えて実現してもらうこと
- IT系の業務の流れを製造業に置き換えて考えること
- paizaラーニングのやつ(Python:Cランク、Bランクの問題は時間をかければできなくもない)

***
## 要件定義
### まず、なにがつくりたいのか考えよう
テーマを決めて、**役に立つもの**、**役に立たないもの**、**作っていて楽しいもの**など、なんでもいいので課題を解決しましょう。
設計とは、ソリューションを提供するためにあるのです。

### 作りたいものの、内容について深堀りする
作りたいものに対して、**"何のためのものなのか"**、**"何が必要か不要か"**、**"何をしてよくて、ダメなのか"**、**"予算や期限、割けるリソースはなにか"**、**"使えるツールはなにか、どういった環境が与えられているのか"**をよく検討する必要があります。

例えば、「新しいコップがほしい」ということであれば、すぐに使いたいのであれば買ってくればいいだけです。これにもどこで何を買うかなどがありますが。

- デザイン
- 機能(保温性が高い、高所から落としても割れにくい)
- 値段
- 非機能要求:重要ではない機能(キャラクターの絵柄、持ち手がある、食洗機対応、なんとかクラスター...)
- 入手しやすさ(コンビニやショップ、ネット、受注生産、自作)
- 材質
- 納期(いつまでにほしいか)
などさまざまです。

### システム設計をしよう
フローチャートやクラス図、ER図、GUIモックアップなどの図面を駆使し、作りたいシステムの基本設計をしよう

#### フローチャートを書くメリット
- コーディングのイメージがしやすい(フロー図をみてコードを書けばいいので、論理展開の間違いが起こりにくい)
- 
#### クラス図を書くメリット
- フロー図ではわからないパラメータの流れがわかる
- システムの内部値として扱われてる値も一度に確認できる

#### ER図を書くメリット
- データの意味と役割がわかる

#### GUIモックアップを作るメリット
- フロー図などでは表しにくいGUIの動きを確認できる
- GUIを使う人が確認する画面そのものなので利便性の向上につながる
- コード本体がなくても、誰かに見せるときわかりやすい

### 詳細設計
どんなライブラリで動くのか、などをまとめておおよその環境構築までのイメージを進め
ていこう。

### テスト仕様

各種図面の説明は需要があったらやります。
筆者が制作する作品についても、制作が進み次第情報公開の予定です。
(mikan)
プログラムと英語

プログラムだけでなく新しい知識は往々にして英語圏からくる気がします。
できないより英語はできたほうが学習速度が上がる気がします。

私も以前はグーグル翻訳に頼っていた時期がありましたが、deeplを使ったところグーグル翻訳にはさようならしました。
皆様もお試しあれ。知っていた方には読む時間を使わせて申し訳ありません。
Azure Data Explorerを作成してみた

## はじめに
Microsoftのドキュメントを参考にAzure Data Explorerを仮想ネットワーク上に作成しデータを取り込み確認するところまでやってみました。
参考にしたドキュメントなどをまとめています。

## Azure Data Explorerの作成
以下のドキュメントを参考にして仮想ネットワーク上にAzure Data Explorerクラスターを作成する。
https://learn.microsoft.com/ja-jp/azure/data-explorer/vnet-create-cluster-portal
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3057699/45ded919-b9aa-6d8c-5b4d-d7a591a7bc43.png)

## データベースの作成
Azure Data Explorerが作成されたらデータベースを作成する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3057699/1cb789a3-5bdc-c507-76b3-c3a41b9c7f44.png)

## ネットワークの設定
Azure Data Explorerネットワークセキュリティグループの受信セキュリティ規則にアクセスするネットワークのIPアドレスを追加する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3057699/299ed883-da48-80da-9890-dc3e17973d38.png)

## サンプルデータの取り込み、確認
以下のドキュメントに沿ってサンプルデータを取り込む。
https://learn.microsoft.com/ja-jp/azure/data-explorer/ingest-sample-data?tabs=ingestion-wizard

Kustoでクエリを実行し、データが入っていることを確認する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3057699/2be7430e-5b2c-9298-a4bd-ac971addde58.png)

## 最後に
以上Azure Data Explorerを作成した方法を簡単にまとめました。
今回はデータを入れて確認するというところまでしか実施しませんでしたが、別のツールから呼び出してデータを表示することもできそうなので、別の機会に試してみたいと思います。
【Xcode】一括でカーソル操作を行う

# はじめに
Xcodeにはさまざまなショートカットがあります。
便利なコマンドがあったので紹介します。

# どんなことができるショートカット？
![画面収録_2022-12-31_18_25_04_AdobeExpress](https://user-images.githubusercontent.com/84154073/210131759-1a6aea90-2bc9-4897-badf-4e8cfb185428.gif)

# やりかた
`control` + `shift`

押しながらクリックをします。

# おわり
これから便利なショートカットはどんどん紹介していきたいです。
【備忘録】画面横幅によってCSS/画像を変更する

# はじめに
メディアクエリを用いて、画面横幅によってCSS、画像を変更する手法を備忘録として残します。
本記事では、メディアクエリ、メディア特性とは何かについては割愛させていただきます。

# 画面横幅によってCSSを変更する
メディアクエリを用いて、画面横幅が指定条件を満たす場合、指定したCSSを適用させる。
スタイルシートに`@media screen and (メディア特性) {指定したいCSS}`のように記述すれば、メディア特性で指定した条件が満たされた場合、指定したいCSSを適用させることができる。
今回、画面横幅によってCSSを変更したいため、メディア特性に画面横幅の条件を指定する。
実装例を下記に示す。
```css
/* 画面横幅が指定した値以下の場合、pタグのフォントサイズを12pxに適用 */
@media screen and (max-width: 450px) {
    p {
        font-size: 12px;
    }
}
/* 画面横幅が指定した範囲内の場合、pタグのフォントサイズを14pxに適用 */
@media screen and (min-width: 451px) and (max-width: 700px) {
    p {
        font-size: 14px;
    }
}
/* 画面横幅が指定した値以上の場合、pタグのフォントサイズを18pxに適用 */
@media screen and (min-width: 701px) {
    p {
        font-size: 18px;
    }
}
```

# 画面横幅によって表示する画像を変更する
`picture`タグを用いて、画面横幅によって画像を出し分ける。
* `picture`タグ内に１つ以上の`source`タグと1つの`img`タグを記述する。
* `source`タグは、特定条件下で表示したい画像を指定する際に使用する。<br>`media`属性と`srcset`属性を利用して、画像の表示条件と表示したい画像を指定する。
    * `media`属性で、画像の表示条件（メディアクエリ）を指定。
    * `srcset`属性で、条件を満たした場合に表示させる画像のパスを指定。
* `img`タグには、`source`タグで指定した条件を満たさなかった場合に表示する画像を指定する。
    * 注意点として、`picture`タグ内に必ず`img`タグを指定する必要がある。

実装例を下記に示す。
```html
<picture>
    <!-- 画面横幅が600px以下の場合、img/sp.jpgを表示 -->
 	<source media="(max-width: 600px)" srcset="img/sp.jpg">
    <!-- 上記条件に当てはまらない場合）、img/default.jpgを表示 -->
 	<img src="img/default.jpg">
 </picture>
```


# 参考文献
1. [メディアクエリー - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries)
2. [@media - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/@media#%E5%BD%A2%E5%BC%8F%E6%96%87%E6%B3%95)
3. [&lt;source>: メディアまたは画像のソース要素 - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/source)
4. [imgタグのsrcset・sizes属性とpictureタグの使い方 - レスポンシブイメージで画像表示を最適化 - ICS MEDIA](https://ics.media/entry/13324/)
EventBridgeを使ってLambda関数を月初のAM8:00に実行する

個人で運用しているLambda関数を月初に動かす際に調査した内容のメモです。

# やりたいこと
今回やりたいことは『毎月１日の8:00に特定のLambda関数を実行する』こと。

EventBridgeを使うことでcron形式での記述ができるが、タイムゾーンがUTCであるため時差を考慮する (JSTの9時間前を指定する) 必要がある。

`cron(0 0 1 * ? *)` のように月初を指定すると、9時以前に実行できなかったり、`cron(0 23 31 * ? *)` みたいに記述すると月末が31日まである場合は対応できるが、28日とか30日の場合にルールが複数出来そうで、可能な限り簡潔に記述したかった。

# 実現方法
EventBridgeのユーザーガイドを確認してみると、`L`を使うことで月末・週末を表現することができるらしい。
https://docs.aws.amazon.com/eventbridge/latest/userguide/eb-create-rule-schedule.html
> * The L wildcard in the Day-of-month or Day-of-week fields specifies the last day of the month or week.

cron式には以下の６つのフィールドがあり、先頭から3つ目を`L`にすることで月末を表現できる。
| フィールド | 値 | ワイルドカード |
| --- | --- | --- |
| 分 | 0-59 | , - * / |
| 時間 | 0-23 | , - * / |
| 日 | 1-31 | , - * ? / L W |
| 月 | 1-12 または JAN-DEC | , - * / |
| 曜日 | 1-7 または SUN-SAT | , - * ? L # |
| 年 | 1970-2199 | , - * / |

https://docs.aws.amazon.com/AmazonCloudWatch/latest/events/ScheduledEvents.html#CronExpressions

あとは時差 (+9:00) を考慮してcron式を記述すれば良いので、以下のようにすれば良い。
```shell:毎月1日のAM8:00に呼び出すためのルール
cron(0 23 L * ? *)
```

# まとめ
9時以降とかであれば `cron(0 0 1 * ? *)` のような記述で良いですが、9時よりも前に呼び出したい場合は`L`を使うと簡単に表現できるのでぜひ使ってみてください。
HHKBプログラミングコンテスト2022Winter(AtCoder Beginner Contest 282)　A~C問題(自己流解法)

この記事は2022年12月17日に行われたHHKBプログラミングコンテスト2022Winter(AtCoder Beginner Contest 282)のA,B,C問題の解法を自分なりに解説してみた記事になる。

## コンテスト：[HHKBプログラミングコンテスト2022Winter(AtCoder Beginner Contest 282)](https://atcoder.jp/contests/abc282)
### [A問題：Generalized ABC](https://atcoder.jp/contests/abc282/tasks/abc282_a) 
- 問題文
整数 K が与えられます。
英大文字を A から昇順に K 個繋げて得られる文字列を答えてください。
```
K = int(input())
ans = ''
# chr関数は65~90をA~Zに変換する
for x in range(65,65+K):
    #文字列連結
    ans += chr(x)  
print(ans)
```
Chr関数についてはこちら
https://www.tipsfound.com/vba/05chr

### [B問題：Let's Get a Perfect Score](https://atcoder.jp/contests/abc282/tasks/abc282_b)
- 問題文(簡略に)
N人それぞれがM問に対して解くことのできる問題をo、解くことのできない問題をxとしており、N人の中の2人お互いが片方でもoであれば全問正解することができ、全問正解ができるようなペアの組み合わせはいくつあるのかを数える。

```
N, M = map(int, input().split())  #N人M問
ox = []  #N人それぞれが問題に対してoなのかxなのかを入力する箇所
ok = 0   #全問正解できるかどうか
for s in range(N):　#N人分
    S = input()
    ox.append(S)
    if s >= 1:　　#2人目の入力から比較対象になる
        for x in range(1,len(ox)):  
            ans = 0  #何問正解できるか
            for f in range(M):
                #仮に自身と比較対象の結果が両方xな場合
                if S[f] == 'x' and ox[x-1][f] == 'x': 
                    pass
                #その他の場合
                else:
                    ans += 1
            #自身と比較対象が全問正解できる場合
            if ans == M:
                ok += 1
                
print(ok)
```
 
### [C問題：String Delimiter](https://atcoder.jp/contests/abc282/tasks/abc282_c)
- 問題文(簡略に)
"の個数を2K個とすると、各i=1,2,…,K について 2i−1 番目の " から 2i 番目の " までの文字のことを括られた文字と呼び、括られていない文字の中に , があれば、それを . に置き換える。

```
N = input()
S = input()

A = ''
judge = 0  # ""の個数(0であれば括られていない。1であれば括られている。)
for x in S:
    #文字が " の場合
    if x == '"':
        #まだ括られていない場合
        if judge == 0:
            judge = 1
            A += x
        #括られている場合
        else:
            judge = 0
            A += x
        
    #文字が " と , ではない場合
    elif x != '"' and x != ',':
        A += x
    #文字が , の場合
    elif x != '"' and x == ',':
        #括られていなければ . に変更
        if judge == 0:
            A += '.'
        #括られていればそのまま追加
        else:
            A += x
        
print(A)
```
Chart.js 4.1.1 で Xが不等間隔の折れ線グラフを描画

こちらと同様のことを、Chart.js 4.1.1 で行ないました。
[Chart.js で Xが不等間隔の折れ線グラフを描画](https://qiita.com/ekzemplaro/items/190a41e1918ea7deb4ff)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/fdbc3d63-05c3-7541-d5da-bf767f8eab10.png)


```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Chart.js 4.1.1 折れ線グラフ</title>
</head>
<body>
<h1>Chart.js 4.1.1 折れ線グラフ</h1>
<canvas id="myChart" width="400" height="200"></canvas>
<hr />
<p>jan/01/2023</p>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="scatter.js"></script>
</body>
</html>
```

```js:scatter.js
// ----------------------------------------------------------------------
//	line_graph.js
//
//					May/23/2017
// ----------------------------------------------------------------------
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
	type: 'scatter',
	data: {
		datasets: [{
		label: "AA",
		data: [
		{ "x": 0.0, "y": 10.2 },
		{ "x": 0.9, "y": 4.7 }, 
		{ "x": 1.2, "y": 5.1 }, 
		{ "x": 1.5, "y": 6.1 }, 
		{ "x": 2.2, "y": 4.3 }, 
		{ "x": 3.5, "y": 6.2 }, 
		{ "x": 4.2, "y": 4.8 }, 
		{ "x": 4.7, "y": 5.8 }, 
		{ "x": 15.2, "y": 3.2 }, 
		{ "x": 18.2, "y": 5.2 }, 
		{ "x": 22.5, "y": 7.5}
		],
	    fill: false,
	    showLine: true
	  }]
	}
});

// ----------------------------------------------------------------------
```
CORSとは？Djangoでの設定方法についても解説

## CORSって何？
オリジン間リソース共有(Cross-Origin Resource Sharing)の略で
自身のオリジンから見た別のオリジン(Cross-Origin)からのリクエストを共有するかどうか決定できる仕組みのことです

## そもそもオリジンって何？
オリジンは
- スキーム
    - サイトによってはプロトコルと書かれていたりするが厳密には違う。しかし、Web開発においては基本httpかhttpsを使うのでプロトコルでも問題ない
- FQDN
    - サイトによってはホストやドメインと書かれていたりするが厳密にはFQDNつまり完全修飾ドメイン名のこと
- ポート

を全て組み合わせたものです

![CORS_origin.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625980/8e144bfb-4e57-d9ed-fa12-204dad8b596d.png)

通常はあるWebサイトが持つ情報が別の悪意あるWebサイトに悪用される(後述)のを防ぐために同一オリジンポジシーが適用されます

## 同一オリジンポリシーって何？
あるオリジンで読み込まれたリソース（HTML, スクリプト, Cookie など）が、異なるオリジン（クロスオリジンとも呼ばれる）のリソースとの通信・アクセスを制限する、Web ブラウザが持つセキュリティ機能です。
異なるオリジンからロードされたリソースへのアクセスをブロックすることにより、元オリジンで読み込まれたリソースに対して悪い影響を及ぼさないようにすることを目的としています。
2つのオリジン(Origin)の
- スキーム(プロトコル)
- FQDN(ホスト、ドメイン)
- ポート

がすべて一致した場合のみ同一オリジンだと言えます

### 同一オリジンの例

:::note 
```
http://example.com:8000/api/customers/1
```
```
http://example.com:8000/api/customers/2
```
:::

パスは異なるものの、スキーム、FQDN、ポートは同じなので同一オリジンです

### 同一オリジンではない例(1)

:::note alert
```
http://example.com:8000/api/customers/1
```
```
https://example.com:8000/api/customers/1
```
:::

スキームが違う(`http`と`https`)ため、同一オリジンではありません

### 同一オリジンではない例(2)

:::note alert
```
http://example.com:8000/api/customers/1
```
```
http://example.com:8080/api/customers/1
```
:::

ポートが違う(8000と8080)ため、同一オリジンではありません

## 同一オリジンポリシーがないとどうなるの？
ユーザがWebサイトにログインした状態で別の悪意のあるサイト(別オリジン)から本人が意図しない情報やリクエストを勝手に送信されてしまうCSRF(Cross-Site Request Forgeries)や外部の不正なスクリプトを実行させるXSS(Cross Site Scripting)を受けてしまいます

## CORSが必要なのはなぜ？
フロントエンドとバックエンドに分けて開発する際はそれぞれ別々のオリジンに配置するのが一般的です
そこでCORSの設定をすることで同一オリジンポリシーを守りつつ別のオリジン(Cross-Origin)からのリクエストを共有できます

## 必要なパッケージのインストール
下記をインストールします
```
pip install django-cors-headers
```

## 必要な設定を記載
Djangoのsettings.pyに記載していきます
```settings.py
import os


# corsheadersを追加
INSTALLED_APPS = [
    'corsheaders',
]

# corsheaders.middleware.CorsMiddlewareを追加
MIDDLEWARE = [
    # 一番上に記載
    "corsheaders.middleware.CorsMiddleware",
    "django.middleware.security.SecurityMiddleware",
    "django.contrib.sessions.middleware.SessionMiddleware",
    "django.middleware.common.CommonMiddleware",
    "django.middleware.csrf.CsrfViewMiddleware",
    "django.contrib.auth.middleware.AuthenticationMiddleware",
    "django.contrib.messages.middleware.MessageMiddleware",
    "django.middleware.clickjacking.XFrameOptionsMiddleware",
]


# 自身以外のオリジンのHTTPリクエスト内にクッキーを含めることを許可する
CORS_ALLOW_CREDENTIALS = True
# アクセスを許可したいURL（アクセス元）を追加
CORS_ALLOWED_ORIGINS = os.environ.get("TRUSTED_ORIGINS").split(" ")
# プリフライト(事前リクエスト)の設定
# 30分だけ許可
CORS_PREFLIGHT_MAX_AGE = 60 * 30
```

envファイルに許可するoriginを記載します
```.env
TRUSTED_ORIGINS="http://localhost:3000"
```

以上です

## 参考
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS

https://qiita.com/att55/items/2154a8aad8bf1409db2b

https://coliss.com/articles/build-websites/operation/work/cs-visualized-cors.html

https://zenn.dev/syo_yamamoto/articles/445ce152f05b02

https://kikuichige.com/11885/

https://yamory.io/blog/about-cors/

https://livra.geolocation.co.jp/iplearning/250/
Rasp Pi　Bullseyeでのカメラのセットアップの備忘録

備忘録としてメモ。いつか自分でもちゃんとしたものが投稿できるようになりたい（笑）。

https://sozorablog.com/opencv_install/

”最新版のOS（Bullseye）にはカメラの設定項目がありません”とのことでこちらもメモ。
https://sozorablog.com/camera_shooting/
pndas.DataFrame.queryを高速化したい

# 結論
関数を使用せず直接条件を記述したほうが、`query`を使用するよりも処理速度が速い
```python
for i in range(0, 100):
    df_iris[df_iris["sepal length (cm)"] >= 5]
```
# 背景
`query`を使用した処理を作っていたが、処理時間が長かったので短縮できないか検討してみた。

# 環境
| 項目 | 情報 |
| ---- | ---- |
| OS | Windows 10 |
| Python | 3.9.7 |
| pandas | 1.3.4 |
| sklearn | 1.1.3 |

# 速度比較
## 事前準備
```python
import time
import pandas as pd
from sklearn.datasets import load_iris

# irisのデータセットを準備
data_iris = load_iris()
df_iris = pd.DataFrame(
    data_iris.data, 
    columns=data_iris.feature_names
)

# データを確認
display(df_iris.shape)
display(df_iris.head())
```
出力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479797/da588cc7-2ce6-da70-a3c5-ff8f7f8549c7.png)

## 単一条件で比較
### queryを使用する(engine: python)
```python
%%time
# 【単一条件】queryを使用する(engine: python)
for i in range(0, 10000):
    df_iris.query("`sepal length (cm)` >= 5", engine='python')
```
Wall time: 17.7 s

### queryを使用する(engine: numexpr)
```python
%%time
# 【単一条件】queryを使用する(engine: numexpr)
for i in range(0, 10000):
    df_iris.query("`sepal length (cm)` >= 5", engine='numexpr')
```
Wall time: 23.8 s

### 関数を使わない
```python
%%time
# 【単一条件】関数を使わない
for i in range(0, 10000):
    df_iris[df_iris["sepal length (cm)"] >= 5]
```
Wall time: 3.22 s


## 複数条件で比較
### queryを使用する(engine: python)
```python
%%time
# 【複数条件】queryを使用する(engine: python)
for i in range(0, 10000):
    df_iris.query("`sepal length (cm)` >= 5 & `sepal_width (cm)` <= 3", engine='python')
```
Wall time: 322 ms

### queryを使用する(engine: numexpr)
```python
%%time
# 【複数条件】queryを使用する(engine: numexpr)
for i in range(0, 10000):
    df_iris.query("`sepal length (cm)` >= 5 & `sepal_width (cm)` <= 3", engine='numexpr')
```
Wall time: 32.8 s

### 関数を使わない
```python
%%time
# 【複数条件】関数を使わない
for i in range(0, 10000):
    df_iris[(df_iris["sepal length (cm)"] >= 5) & (df_iris["sepal length (cm)"] <= 3)]
```
Wall time: 6.28 s

## まとめ
| 条件 | query(engine: python) | query(engine: numexpr) | 関数を使わない |
| ---- | ---- | ---- | ---- |
|単一|17.7 s|23.8 s|3.22 s|
|複数|32.8 s|39.5 s|6.28 s|

queryを使用せず、直接条件を書いて抽出したほうが圧倒的に早い

## 追加検証候補
- ループ回数を変更した場合の比較
- 条件を複雑にした場合の比較
- DataFrameの行数を増やした場合の比較


# 参考サイト
https://note.nkmk.me/python-pandas-query/
SlackwareにLightDMをインストール

現在（2022年12月）Slackwareの公式レポジトリにLightDMは用意されていません。
そこで子ディストロの[Salix](https://www.salixos.org/)を利用してインストールしてみました。

# slapt-getのインストール

Salixのパッケージ管理はslapt-getで行います。
作者の[Jason Woodward氏のWebサイト](https://jaos.org/)からダウンロードしてインストール。
 ```
$ wget https://jaos.org/slackpacks/slackware64-15.0/slapt-get/slapt-get-0.11.8-x86_64-1.txz
$ sudo installpkg slapt-get-0.11.8-x86_64-1.txz
 ``` 

設定ファイル（/etc/slapt-get/slapt-getrc）にsalixのレポジトリを追加。
 ``` 
SOURCE=https://slackware.uk/salix/x86_64/15.0/
 ``` 
# LightDMのインストール

LightDMと関連パッケージをインストール。
``` 
$ sudo slapt-get --update
$ sudo slapt-get --install lightdm lightdm-gtk-greeter lightdm-gtk-greeter-settings
 ```
残念ながらlightdm-webkit2-greeterはありません。

lightdm-gtk-greeter-settingsの実行にはgksuが必要です。
こちらは[SlackBuilds.org](https://slackbuilds.org/)にあります。
sbopkgを使うなら
``` 
$ sudo sbopkg -r
$ sudo sbopkg -i libgksu
$ sudo sbopkg -i gksu
```
Next.js / React –  URL を Fetchする例 (初心者) ( TypeError: ... is not a function )

# 成功するコード例

`pages/_app.tsx`


```js
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import React from "react";

export const doFetch = async () => {
  const res = await fetch('https://api.github.com/repos/zeit/next.js')
  const json = await res.json()
  console.log(json);
}

export default function App({ Component, pageProps }: AppProps) {
  doFetch();
  return <Component {...pageProps} />
}
```

async な function 内で fetch を実行しないとダメっぽい

# ダメな例

- 同期 function の中では実行できない
- resから派生する関数 ( `res.json()` ) とかが使えない
- fetch の返り値としては Promise が返って来るがそのままは使っても意味がない
- function が async ではないので await もできない

```js
export default function App({ Component, pageProps }: AppProps) {
  const res = fetch('https://api.github.com/repos/zeit/next.js')
  console.log(res.json())
  return <Component {...pageProps} />
}
```

エラー

```
Server Error
TypeError: res.json is not a function
```

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# Twitter

https://twitter.com/YumaInaura
寝てるだけでトランザクションが飛ぶ、健康になる、ほんのりハッピー。そんなまくら。

# 概要

2022年10月29日(土)に開催されたSymbol 秋祭りのアイデアソンで発表したネタです。
詳細はこちらをご覧ください。

https://nemtus.com/symbolf-fall-fest-2022-report/#toc17

# 最近疲れてませんか？

**疲れがたまって朝起きるのがつらくないですか？**

**肩・首のこり、気になりませんか？**

スマホ利用時間や在宅でのデスクワーク増加などコロナ禍の影響で長時間同じ姿勢でいる時間が増え、肩がこる機会も増えてきました。
そんなつらい肩こり、マッサージやヨガのような特別な活動をせずとも**日常の中で自然に行う営みで軽減・解消できたら嬉しい**ですよね。

# 睡眠とまくら

エンジニアのほぼ100％が日常的に~~スト〇ングゼ〇~~水分を摂取しているように、人類のほぼ100％が睡眠を取っています。人間の三大欲求に含まれるくらい重要でごく当たり前に行われる営みです。

睡眠の質を決めるアイテムには様々ありますが**季節に関係なく良質な睡眠の質を担保するのに欠かせないアイテム、それがまくら**です。旅先でまくらがフィットせずなんだかスッキリしない朝を迎えたことのある方も多いのではないでしょうか？
今回はそんなまくらに着目し、**単に健康になるだけではなくちょっとイイ体験もできちゃうまくら**を考えてみました。
名前は肩こりバイバイ、**ColyBi**(コリバイ)なんてどうでしょうか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2239577/31a1c652-2e54-dce2-dfe6-24db67d059e2.png)

# 機能と仕組み

ColyBiは各種センサーと自動調整機能を備えたまくらです。
睡眠中に取得した様々なデータをブロックチェーン経由で定期的に収集、これを基に快適な睡眠をサポートするパラメータを算出しColyBiへ送り返すことで形状などが変化する仕組みです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2239577/4784ecde-966a-f3f2-5f42-65ddb96c2edc.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2239577/f506641c-3c41-75b6-dc2e-5b5aa8a4a4c6.png)

ブロックチェーンを利用することで**顧客用データベースを管理する必要がなくなる**のは魅力的です。
また**データ暗号化やアドレス制限、モザイク(トークン)制限といった便利な機能を標準で備えているSymbolブロックチェーン**を利用することで、**データをセキュアに転送**したり**第三者から悪意のある設定を加えられるのを防止**したりといったことが容易に実現可能なのも嬉しいポイント。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2239577/651e5a1b-4020-9d43-1095-76b9e797e87c.png)

# トークノミクス/エコシステム
ColyBiユーザーにはデータ送信に対するお礼としてモザイクを発行します。
航空会社が発行するマイルのように買い替え時の割引や連携商品との引き換えに利用できます。**自分では買わないけどあったら嬉しいアイテムがただ寝てるだけで手に入ったりする**のは嬉しいですよね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2239577/0446edd0-69c8-b7e7-c668-757b6a63d74e.png)

プロダクトとしてはまくらなので、各家庭のみならずホテルなどの宿泊施設にも展開できます。
2022年6月現在で約5.5万施設、170万部屋ある(※1)とのことなので、単純に全部屋のまくらが1日1回データを送信した場合**170万(実際は双方向のやりとりなので実質300万以上)のトランザクションが飛び交う**こととなります。トランザクション発生時の手数料は報酬として各アカウントへ還元される仕組みとなっているため、ホルダー目線でも嬉しい仕組みです。
手数料報酬について詳しく知りたい方はこちらをご覧ください。

https://www.cryptostream.jp/nem-symbol-11794/#i-7

また個人情報の扱いが許せば収集したデータを医療分野へ展開し**診断の効率化やリハビリメニュー策定に寄与**することもできるのではないかと考えています。
さらには**まくら自体をブロックチェーンノードとする**ことで地理的分散によるチェーンの安定性向上を図ることもできそうです。2022年現在の物理的な素材面を考慮するとまだ少し先の話にはなりますが、近年の技術革新を踏まえると数年内には実現できているのではないかとも思います。楽しみですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2239577/0e374be0-fcf5-3ae4-59f0-4f4272eaaf30.png)


# おわりに
日常のお会計からモノのトレーサビリティまで、振り返ってみればたくさんのブロックチェーンエンジニアがビジネス領域での応用に躍起になった1年でした。ブロックチェーンはユーザーにとってわかりやすい/新しい価値を提供できる可能性を秘めていると個人的に感じているので、今後も普段の開発の息抜きにこういった少し先のアイデアも発散していけたらと思います。
ColyBi、いつか作ってみたいですね。おわり。



※1.　https://hotelbank.jp/hoteldata/japan-hotels-202206/
【Android】未使用リソースをまとめて削除する方法

# はじめに
本日は大晦日ですね、年の瀬となれば大掃除ですが、プロジェクト内のリソース整理できていますか？
歴史の長いプロジェクトであれば人の入れ替わりもあり、その辺りも疎かになりがちだと思いますが、全てサクッと消す方法があるので備忘録的にもまとめておこうと思います。

# まとめて削除する方法
削除する方法は至って簡単です。
AndroidStudioのメニューから Refactor > Remove Unused Resources...を選択する形になります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354522/c4d8498e-af9b-0c84-86a4-e43e8c6f2ee6.png" width="220px">

上記に沿って選択していくと以下ダイアログが表示されますが、直ぐに消すのが不安な方はプレビューを選択していただければ消す前に削除する対象の一覧が確認できます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354522/b59a4fe0-02e0-4054-895b-6a0ce6fe6e53.png" width="280px">

削除方法としては以上になります。

# さいごに
明日から2023年ですね！
皆様良いお年をお迎えください、来年も宜しくお願いします！
Unity2021でHOKUYOセンサーとシリアルポート通信する方法

[HOKUYO](https://www.hokuyo-aut.co.jp/)の側域センサーをUnityでシリアルポート通信するまでに出たエラー対応です。

# 前提
* Windows 11
* Unity2021.3.11f1

# 結論
Api Compatibility Levelがデフォルトだと.NET Standard2.1になっているので、ここを.NET FrameworkにすればSystem.IO.Portsなどが使えるようになります。
![2022-12-31_16h36_18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/aff56c03-8b4f-95c2-1e32-95dc39e92951.png)

# 結論までの道のり
## エラー1
[C#サンプル](https://sourceforge.net/p/urgnetwork/wiki/top_jp/)をUnityから実行してみようと思うと以下のエラーが。
```
error CS0234: The type or namespace name 'Ports' does not exist in the namespace 'System.IO' (are you missing an assembly reference?)
```

## エラー2
そこで[こちら](https://qiita.com/Fox_Kei/items/dbe10141e36f6a91ee83)を参考に、System.IO.PortsをUnityにいれてみたが、以下のエラーが。
```
PlatformNotSupportedException: System.IO.Ports is currently only supported on Windows.
```

## エラー3
.NETの設定どうなっているのか見てたところStandardだったので、もしやと思って.NET Framerworkにしてみたところ、以下エラーが。
```
error CS0433: The type 'SerialPort' exists in both 'System.IO.Ports, Version=4.0.2.0, Culture=neutral, PublicKeyToken=cc7b13ffcd2ddd51' and 'System, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089'
```

## 対応
エラー1対応で入れたdllがかぶっていることが問題なので、消したところ正常に実行できるようになりました。
Oracle Cloudでiptables-nftを設定

# iptablesの編集
- `/etc/iptables/ipv{4,6}`を編集する
- `sudo iptables-restore < /etc/iptables/rules.v4`
    - `sudo /etc/init.d/netfilter-persistent reload`だと古いエントリーが消えてくれなかった
- Dockerをインストールしている場合はDocker関係のエントリーが消えてしまうので`sudo service docker restart`
    - `snap install docker`でインストールすると、iptables-legacyを利用してしまうので、`apt install docker.io`でインストールする
Dependency Injectionをdjangoプロジェクトに導入してみる

# DIとは
* Dependency Injectionの略称
* 日本語：依存性注入
* DIとは、プログラミングにおけるデザインパターン（設計思想）の一種で、オブジェクトを成立させるために必要となるコードを実行時に注入（Inject）してゆくという概念のことである。
    * https://www.sophia-it.com/content/Dependency+Injection

# python用DIライブラリ
* [python\-dependency\-injector Public](https://github.com/ets-labs/python-dependency-injector)
    * ライセンス: BSD-3
    * 最新バージョン： v4.41.0(2022.12)
* [python\-injector](https://github.com/python-injector)
    * ライセンス: BSD-3
    * 最新バージョン： v0.20.1(2022.08.17)

* 更新頻度より、今回は[python\-dependency\-injector Public](https://github.com/ets-labs/python-dependency-injector)を利用する


# 導入してみる
### コンポーネント構成
![DI_component.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13451/92065f39-a42a-380f-5f23-8d570eeeb3ea.png)


### ファイル構成
```
./
├── example/
│   ├── __init__.py
│   ├── containers.py
│   ├── controller.py
│   └── api_view.py
├── datalayer.py
├── awslayer.py
├── config.ini
└── requirements.txt
```


### コンテナー作成

```python
"""Containers module."""

import logging.config
import sqlite3

import boto3
from dependency_injector import containers, providers
from . import Controller


class Container(containers.DeclarativeContainer):

    config = providers.Configuration(ini_files=["config.ini"])

    # Gateways

    database_client = providers.Singleton(
        sqlite3.connect,
        config.database.dsn,
    )

    aws_s3_client = providers.Singleton(
        boto3.client,
        service_name="s3",
        aws_access_key_id=config.aws.access_key_id,
        aws_secret_access_key=config.aws.secret_access_key,
    )

    controller = providers.Factory(
        Controller,
        db = database_client,
        s3 = aws_s3_client
    )
```



### コンテナー利用

```python:api_view.py
from rest_framework.views import APIView
from rest_framework.response import Response
from containers.py import Container

class Contents(APIView):
    def get(self, request, **kwargs):
        user = kwargs["user"]
        container = Container()
        content_controller = container.controller()
        # userのコンテンツを取得
        contents = content_controller.get_contents(user)
        return Response(contents)

```


### DI導入後の構成図
![DI_component.drawio2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13451/5a339b1d-f839-1547-c4df-4fef71175d82.png)


### 単体テストを書く

```python:api_view.py
from rest_framework.views import APIView
from rest_framework.response import Response
from controller.py import Controller

class Contents(APIView):
    def get(self, request, **kwargs):
        user = kwargs["user"]

        content_controller = controller()
        # userのコンテンツを取得
        contents = content_controller.get_contents(user)
        return Response(contents)

```

* DI導入前のコードに対して、content_controller = controller()をmockすることがとても難しい
* DI導入後は、controllerをoverrideしてmockすることが簡単


```python:test_api_view.py
def test_view_get():
    container = Container()
    with container.controller.override(controller_mock):
        api_view = Contents()
        api_view.get()

```


# 課題
* container作成する時に、全てのconfig導入
* AWS Parameter Storeと環境変数と合わせて、config導入
* マルチコンテナー構成
（初学者向け）すべてiexで簡単に、Enum.mapの動きをデバッグで見たい（IO.inspect 編）

# Enum.mapの処理手順をすべてiexで動かしながら見たい場合

Enum.mapの処理手順をすべてiexで動かしながら、いかに手軽に確認できるかを考えました。
こんなパターンもいけるよ的な感じで書きます。

まず、やりたいのは、Enum.mapで送られてくる引数が何なのか出力したいという事です。
普通に関数で書けば実現できます。
``` Elixir
iex> defmodule Ex2 do
iex>    def add(a) do
iex>      IO.inspect(a)
iex>      a + 1
iex>    end
iex> end
{:module, Ex2,
 <<70, 79, 82, 49, 0, 0, 5, 168, 66, 69, 65, 77, 65, 116, 85, 56, 0, 0, 0, 185,
   0, 0, 0, 20, 10, 69, 108, 105, 120, 105, 114, 46, 69, 120, 50, 8, 95, 95,
   105, 110, 102, 111, 95, 95, 10, 97, 116, ...>>, {:add, 1}}
iex(35)> Enum.map([1, 2, 3], &Ex2.add(&1))
1
2
3
[2, 3, 4]
```
まあ、当然、できます。

ただ、これだと関数つくの面倒なので、無名関数でなんとかしたいと考えました。
しかし、関数を書くように改行してコードを入れても、下記のようにエラーになります。

```Elisir
iex> Enum.map([1, 2, 3], &(IO.nspect(&1)
iex> &1 + 1))
** (CompileError) iex:36: block expressions are not allowed inside the capture operator &, got: IO.nspect(&1)
&1 + 1
    (elixir 1.14.0) src/elixir_expand.erl:538: :elixir_expand.expand_fn_capture/4
    (elixir 1.14.0) src/elixir_expand.erl:618: :elixir_expand.expand_arg/3
    (elixir 1.14.0) src/elixir_expand.erl:634: :elixir_expand.mapfold/5
    (elixir 1.14.0) src/elixir_expand.erl:848: :elixir_expand.expand_remote/8
    (elixir 1.14.0) src/elixir.erl:364: :elixir.quoted_to_erl/3
    (elixir 1.14.0) src/elixir.erl:274: :elixir.eval_forms/3
    (elixir 1.14.0) lib/module/parallel_checker.ex:100: Module.ParallelChecker.verify/1
```
どうしたらいいのか考えた結果、こういうのはどうかという事で、
以下のようにシンプルに書けました。

```Elixir
iex(2)> Enum.map([1, 2, 3], &(IO.inspect(&1) + 1))
1
2
3
[2, 3, 4]
```

ただ、これだと安直で不十分な感じもします。

本記事を見た偉大なElixirの先輩から`dbg`を教えてもらい、次の記事でさらに簡単な方法を模索していきたいと思います。

[（初学者向け）すべてiexで簡単に、Enum.mapの動きをデバッグで見たい（dbg 編）](https://qiita.com/miwacchi/items/73d22fb6603d93e9e20c)に続く
2023年は素数なのか？【アレクサンドル・グロタンディーク素数】

~~与えられた数の各桁の数の和が7の倍数であれば、その数は7の倍数である。~~ つまり、「2023」は2+0+2+3=7となり、7の倍数となります。 したがって、「2023」も7の倍数です。

素数（そすう、英: primeあるいはprime number）とは、2 以上の自然数で、正の約数が 1 と自分自身のみであるもののことである。ですので2023は素数ではございません。次の素数は2027と2029になりまｓ

![](https://booth.pximg.net/241c4c50-4063-4de5-9b33-baee166f731d/i/3079681/ebddcf30-7795-4c27-8409-fb39cd9d70e2_base_resized.jpg)
Chart.js 4.3.3で折れ線グラフを作る

こちらと同じことを、Chart.js 4.3.3 で行ないました。
[Chart.js で折れ線グラフを作る](https://qiita.com/ekzemplaro/items/3db297cc98a8e4bc7c35)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/25ad6819-0b69-0092-78aa-d607a2684acc.png)

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Chart.js 4.3.3 折れ線グラフ</title>
</head>
<body>
<h1>Chart.js 4.3.3 折れ線グラフ</h1>
<canvas id="myChart" height="200" width="400"></canvas>
<hr />
Aug/08/2023<p />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="line_graph.js"></script>
</body>
</html>
```

```js:line_graph.js
// ----------------------------------------------------------------------
//	line_graph.js
//
//					Dec/31/2022
// ----------------------------------------------------------------------
window.onload = ()=>
{
	const config = {
		type: 'line',
		data: barChartData
		}

	const context = document.getElementById('myChart')
	const chart = new Chart(context,barChartData)
}

// ----------------------------------------------------------------------
const barChartData = {
	type: 'line',
	data: {
	labels : ["2010","2011","2012","2013","2014","2015","2016"],
	datasets : [
		{
		label: "AA",
		lineTension: 0,
		data : [31,25,45,5,20,19,33]
		},
		{
		label: "BB",
		lineTension: 0,
		data : [25,10,54,77,32,9,78]
		}
	]
}

}
// ----------------------------------------------------------------------
```
コマンドプロンプトの量産とマルチプロセッシング

## 目的
負荷をかけるようなテストを実施するためのPythonツールを作りたい！(私の場合はソケット通信)
以下２種類を作成してみました。備忘録です。
- 複数のコマンドプロンプトを立ち上げ、それぞれで処理を実行するツール
- 1つのコマンドプロンプト上でマルチプロセッシングを利用して複数プロセスを実行するツール

複数プロセス起動後の処理に関しては割愛します。
Pythonはツール作成くらいでしか使わなくてあまり詳しくないので、おかしな点や改善点などあればご指摘お願いします🙏🏻


## 環境
Windows10
Python3.10.9

## 実現方法(コマンドプロンプト量産バージョン)
#### コマンドプロンプトを新しいウィンドウで起動する場合
```python:test.py
import subprocess

subprocess.run("start", shell = True)
```

#### 入力された個数分のコマンドプロンプトを新しいウィンドウで起動
```python:test.py
import subprocess

str_cmd_quantity = "コマンドプロンプトの利用件数を入力してください"
index = 1

# 番号入力待ち
def numInput(choice):
  while True:
    print(choice)
    number = input(">> ")
    if number.isdecimal():
      number = int(number)
      return number

cmd_quantity = numInput(str_cmd_quantity)

for i in range(cmd_quantity):
  # コマンドライン引数を渡して別のコマントプロンプト上で別ツール(test2.py)を実行
  cmd = "start py test2.py {}".format(index)
  subprocess.run(cmd, shell = True)
  index += 1
```

ついでにコマンドプロンプトを生成した後に実行する別ツール
```python:test2.py
import subprocess
import sys

# 受け取ったコマンドライン引数
args = sys.argv
processIndex = int(args[1])

# よしなに処理を記述

# コマンドプロンプトを閉じずに残しておく
subprocess.run("pause", shell = True)

```


## 実現方法(マルチプロセスバージョン)
#### 

```python:test.py
from multiprocessing import Process
from re import I

# 生成するサブプロセスの数
process_quantity = 3

# サブプロセスを生成
def createSubprocess(processNum):
  # サブプロセスで実行したい処理と引数を指定してサブプロセスを生成
  subProcess = Process(target = subprocessAction, args = (processNum,))
  subProcess.start()

# サブプロセスで実行したい処理
def subprocessAction(processNum):
  # サブプロセスで実行したい処理を記述。ここはよしなに

def main():
  # サブプロセスに渡したい値
  process_number = 100
  for process_number in range(process_quantity):
    # サブプロセス生成
    createSubprocess(process_number)
    process_number += 1

if __name__ == '__main__':
  # 実行
  main()

```


どちらもコマンドプロンプト開いて以下コマンドで実行
```
$ python test.py
```
【初めてのDjango】mysqlclientとは？Django Appの作成で遭遇したエラー3件の解決方法！

# 概要
* 先日Djangoチュートリアルを参考にインストールしたので、早速、会社のプログラムをローカル環境で触ることに。
    * Djangoのインストール手順を記載した記事はこちら：[【初めてのDjango】インストール手順：MVTモデル、ルーティング、DBマイグレーション、views.py、テンプレート、名前空間について](https://qiita.com/Ryo-0131/items/ded7590e372f2d8e796c)
* 実際にDjango Appの作成〜DBマイグレーションをするにあたって遭遇したエラーを記しておく。

## 環境
* Mac
    * 機種ID：MacBookPro18,3
    * macOS：Monterey
    * チップ：Apple M1 Pro
    * メモリ：16GB
* Django：Version 4.1.3
* Python：Version 3.10.9



# エラー発生し解決した内容3件
* ①`ModuleNotFoundError: No module named 'widget_tweaks'`
    * `pip3 install django-widget-tweaks`で解決
    * 参考：[ModuleNotFoundError: No module named 'widget_tweaks'](https://qiita.com/salem333/items/e139d27d885575c56d60)

* ②`cannot import name ‘url’ from ‘django.conf.urls’`
    * Django4 にバージョンアップされた際に url 関数が削除されているとのこと
    * urlをpathに変更したらエラーが消え解決しました
    * 参考：[【Django】cannot import name ‘url’ from ‘django.conf.urls’ エラーの原因と対処法](https://daeudaeu.com/django-import-url-error/)

* ③`django.core.exceptions.ImproperlyConfigured: Error loading MySQLdb module. Did you install mysqlclient?`
    * `pip install mysqlclient`を実施して解決
    * 参考：[データベースの接続設定 - MySQL](https://python.keicode.com/django/database-mysql.php)

# mysqlclientとは？django推奨のドライバ
* mysqlclientとは、MySQL（MariaDB）に接続するためのPythonライブラリ。
* PythonがMySQLに接続するためにはドライバをインストールする必要があり、mysqlclientはそのうちの一つ。他にもいくつかあるが、現在Djangoがrecommendしているのはｍysqlclient。
    * PyMySQL：ピュアなPython製のMySQLクライアントドライバ。
    * mysql-connector-python：MySQL開発元のOracle社が公式ライブラリとして配布しているドライバ。
    * MySQL-Python：python3に未対応。比較的初期から存在しており、以前はよく使われていたらしいドライバ。
    * mysqlclient：MySQL-Pythonをpython3に対応させた、Djangoの推奨ドライバ。モジュールの一つなので、pipを利用してインストール可能。

* 参考文献：[Pythonのドライバがいくつもある件](https://dragstar.hatenablog.com/entry/2016/06/13/002331)

* ちなみに、djangoでマイグレートする場合はsettings.pyを編集する必要があります。中身は以下の通り。
    * ENGINE：DBの種類
    * NAME：DB名
    * USER：DBにアクセスするユーザー名
    * PASSWORD：DBにアクセスするユーザーのパスワード。未設定の場合は、ブランクにする
    * HOST：DBのホスト名。明示的に設定する場合に記述する
    * PORT：DBのホストのポート番号。明示的に設定する場合に記述する
    * 参考文献：[【Django】MySQLを設定する方法](https://kosuke-space.com/django-mysql)
画像内の不要物を消す、インペインティングの技術　crfill

写真の不要物を消すインペインティングの技術です。

image
![i.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/57f9a776-0fbc-7f18-8126-2c7b1c002607.png)

mask
![f1a86cfb-1f5d-42eb-a990-f6fdf1bc363c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/f5cf8821-f012-b41b-253a-3a72e006fd6a.png)

output
![39a12cc4-bb23-453b-a10f-f1bb588dbab0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/7e8667ef-5323-ab7d-da89-440b5e5ed991.png)


# 使い方

セットアップ。

```shell
git clone --single-branch https://github.com/zengxianyu/crfill
cd crfill
git submodule init
git submodule update
sh ./download/download_model.sh
sh ./download/download_data.sh
pip install tqdm
```

test.sh の --image_dir と --mask_dir を自身のデータのディレクトリに置き換えます。

実行。

```shell
sh test.sh
```

🐣
****
フリーランスエンジニアです。
お仕事のご相談こちらまで
rockyshikoku@gmail.com

機械学習、ARアプリ（Web/iOS）を作っています。
機械学習／AR関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
[GitHub](https://github.com/john-rocky)
Nodeバージョン管理ツール「n」でバージョンが切り替わらない

# 困った内容
`n` コマンドを使ってもバージョンが変わっていない
- コマンド
```bash:コマンド
sudo npm install -g n
n -V
n --stable
sudo n stable
node -v
```
- 実行例
```bash:実行例
$ sudo npm install -g n
...省略
$ n -V
v9.0.1
$ n --stable
18.12.1
$ sudo n stable
     copying : node/18.12.1
   installed : v18.12.1 (with npm 8.19.2)
$ node -v
v12.22.12 // 変わってない
```

# 原因
`which node` と `~/.bash_profile` の記載が異なる
- コマンド
```bash:コマンド
which node
cat ~/.bash_profile
```
- 実行例
```bash:実行例
$ which node
/usr/local/bin/node
$ cat ~/.bash_profile
PATH="$HOME/bin:$HOME/.local/bin:$PATH"
```

# 対処法
`~/.bash_profile` の記載を変更する
- コマンド
```bash:コマンド
echo 'export PATH=$HOME/bin:$PATH' >> ~/.bash_profile
source ~/.bash_profile
node -v
```
- 実行例
```bash:実行例
$ echo 'export PATH=$HOME/bin:$PATH' >> ~/.bash_profile
$ source ~/.bash_profile
$ node -v
v18.12.1 // 変わっている
```

# 参考文献

- [Nodeバージョン管理ツール「n」でバージョンが切り替わらないときの対処法【パスを確認】](https://dkssksk.com/node-n-version/)
- [Node.js のバージョンが変わらなくてイラッとしたときの解消法
](https://qiita.com/Kintech/items/36f3f930c0a6f0c2db96)
- [Node.jsのバージョン管理ツールの「n」を使ってみる](https://cly7796.net/blog/other/try-using-n/)
Chart.js 4.3.3で棒グラフを作る

こちらと同じことを、Chart.js 4.3.3 で行ないました。
[Chart.js で棒グラフを作る](https://qiita.com/ekzemplaro/items/01f735d7fd83d160c8dc)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/06b8e3ee-d794-630b-57d2-10dc62df7987.png)

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Chart.js 4.3.3 棒グラフ</title>
</head>
<body>
<h1>Chart.js 4.3.3 棒グラフ</h1>
<div>
<canvas id="myChart" height="200" width="400"></canvas>
</div>
<hr />
<p>Dec/31/2022</p>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="bar_graph.js"></script>
</body>
</html>
```

```js:bar_graph.js
// ----------------------------------------------------------------------
//	bar_graph.js
//
//					Dec/31/2022
// ----------------------------------------------------------------------
'use strict'
// ----------------------------------------------------------------------
const barChartData = {
    type: 'bar',
    data: {
      labels: ["青森","岩手","秋田","宮城","山形","福島"],
      datasets: [
	{
        label: '1年目',
	backgroundColor: "rgba(179,181,198,0.5)",
        data: [25,45,5,20,19,33],
        borderWidth: 1
	},
	{
        label: '2年目',
	backgroundColor: "rgba(255,99,132,0.5)",
        data: [10,54,77,32,9,78],
        borderWidth: 1
	}
	]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
}
// ----------------------------------------------------------------------
window.onload = ()=>
{
const ctx = document.getElementById('myChart');

new Chart(ctx, barChartData)
}

// ----------------------------------------------------------------------
```
プロンプトから自動生成された画像を評価スコアで比較してみた

# はじめに
Colabにて、[Stable Diffusion 2.1](https://huggingface.co/stabilityai/stable-diffusion-2-1)を使って生成した画像に対して、[CLIP+MLP Aesthetic Score Predictor](https://github.com/christophschuhmann/improved-aesthetic-predictor)を使って画像を評価してスコアを算出してみたのでメモ。

いずれは、プロンプト生成→画像生成→評価→プロンプト生成→...みたいなことができたらいいなと。

# 方法
やったことは単純で、以下3種類のプロンプトごとにStable Diffusion 2.1で6枚ずつ画像を生成。

```python:prompt
promptA = "cat in dump site"
promptB = "cat in flower garden"
promptC = "cat in flower garden, beautiful, detailed, high quality"
```
多分、画像の良さとしては、A＜B＜Cになるはず。

続いて、それぞれの画像ごとにCLIP+MLP Aesthetic Score Predictorで評価スコアを計算し、平均が最大のプロンプトを求めます。

# 結果
結果は以下の通り。

* promptA
![fig_promptA.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952921/e769c93b-405a-82b7-0bc9-53686495a42c.png)
* promptB
![fig_promptB.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952921/f638c3e3-5e4f-9c68-5924-8aada97a328d.png)
* promptC
![fig_promptC.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952921/8159a574-25d4-ea2f-f103-3e64ac16e62b.png)


```python:result
{'promptA': 5.334874391555786, 'promptB': 5.8839954535166425, 'promptC': 6.003186146418254}
```

ということで、スコアからもpromptCが良好な結果を得られそうだということが分かりました。パッと見た感じ、BとCの違いはあまりなさそうですが、スコアが近いことからも感覚に近いといえそうです。（ちなみに、promptCは絵画風が2枚含まれていました）

# 考察

これを使えば、GANみたいにスコアをプロンプト生成にフィードバックして、良好なプロンプトを得ることもできそうですが、今回やって見た感触としては、あまり現実的ではないような気もします。

というのも、評価が評価モデルに依存するので、評価モデルに特化した生成結果が選ばれてしまうからです。

実は今回、色々試している時に、promptBの方が高くなることがありました。ばらつきのせいかなと思ったものの、生成された画像を見るとpromptBは猫が小さく描かれている一方、promptCの方は猫をアップで撮っていて良さそうに感じました。

そこで気付いたのは、背景として指定している「花の咲いた庭」を高く評価しているのではないかということでした。つまり評価モデルは主題を理解しているわけではないということです。

逆に、私が「猫を描いているものだ」という先入観をもって評価しているせいだとも言えるのですが、少なくとも今回の評価モデルについては主題を指定して評価することはできないので、人間らしい評価であるとは必ずしもいえないような気がします。

ある程度プロンプトの候補が決まっていれば、そこから総当りで生成して、スコアの高いプロンプトの生成物から人間が確認する、みたいな使い方が良さそうです。

# 参考
Google Colab で Stable Diffusion 2.1 を試す - diffusers版
https://note.com/npaka/n/n1f4e2bcad037

AIで画像の美しさを評価する LAION Aesthetics
https://secon.dev/entry/2022/09/20/100000-laion-aesthetic/
GCE Container Optimize OSのtoolbox上でdocker on dockerする

# はじめに
COSはtoolbox上で必要ツールのインストールを行いますし、dockerもプリインストールされてるのであんまり困らないのですが、ふとtoolbox上でdocker on dockerしてみたらできたので備忘録残します。

# まとめ
toolboxに`docker.sock`をマウントさせたらdocker動くよ

# 手順
- Container Optimeze OSを立ち上げる
- 立ち上がったインスタンスにsshログインする
- toolbox設定ファイルを変更する
```shell
sudo vim /etc/default/toolbox
```

```shell
# Copyright 2016 The Chromium OS Authors. All rights reserved.
# Use of this source code is governed by a BSD-style license that can be
# found in the LICENSE file.

TOOLBOX_DOCKER_IMAGE="gcr.io/cos-cloud/toolbox"
TOOLBOX_DOCKER_TAG="v20220722"
# TOOLBOX_BIND="--bind=/:/media/root/ --bind=/mnt/disks/:/media/root/mnt/disks/ --bind=/var/:/media/root/var/ --bind=/home:/media/root/home/"
TOOLBOX_BIND="--bind=/:/media/root/ --bind=/mnt/disks/:/media/root/mnt/disks/ --bind=/var/:/media/root/var/ --bind=/home:/media/root/home/ --bind=/var/run/docker.sock:/var/run/docker.sock"
: ${USER:=root}
```

- toolboxを立ち上げる
```
toolbox
```

enjoy!
【JavaScript】配列の中の最大値・最小値のインデックスを取得する

## 概要
JavaScriptを用いて配列内の最大値、または最小値のインデックスを取得したい。

JavaScriptには標準で渡した引数の中で一番大きい値を返す Math.max はあるが、配列の中で一番大きい値は何番目かを知る機能はないため、今回は自分で作成してみる。

## indexOfとMath.max(Math.min)を組み合わせる
- Math.max(min)メソッドは引数に渡した値のうち最大(最小)の値を返す。
- indexOfメソッドは引数に渡された値に一致する要素のインデックスを返す。
- この二つを組み合わせることで配列から最大(最小)の要素のインデックスを取得することができる。

注意点として、Math.max(Math.min)の引数に配列をとることができないため、スプレッド構文を使って展開する必要がある。
なお、このやり方には一つ問題点があるため記事の最後まで読んでいただきたい。
```js
// 適当な数値の配列
    const numArray = [ 3, 5, 13, 8, 25, 4 ];
// 最大値のインデックスを取得
    const maxIndex = numArray.indexOf(Math.max(...numArray));
    console.log(maxIndex) // => 4
// 最小値のインデックスを取得
    const minIndex = numArray.indexOf(Math.min(...numArray));
    console.log(minIndex) // => 0
```
無事、配列の中の最大要素(=25)のインデックス(=4)と、最小値(=3)のインデックス(=0)を取得することができました。
なお、最大の数値が複数ある場合は一番最初の index が取得できる
他にもfor文を使って原始的にインデックスを取得する方法もあるが、今回のやり方の方がわかりやすいと感じた。
しかし、この方法には問題が...

それはMath.maxで最大値を取得する際に使用できる配列の大きさには制限があるようで、それを超えてしまう場合は使うことができないようなのである。(最小値も同様）

[MDN web docs: Math.max()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/max)によると
>しかし、要素の数が多い大規模な配列では、スプレッド構文 (...) と apply のどちらも、失敗するか誤った値を返す可能性があります。なぜなら、配列の要素を関数の引数として渡そうとしているからです。詳しくは apply をビルトイン関数と共に利用するを参照してください。 reduce の方法はこの問題が発生しません。
>
とのこと。そのため、簡単な配列ならこの方法でいいが、配列が大きい場合は下の方法を利用する。

## indexOfとreduce()を組み合わせて要素のインデックスを取得する
reduce()を用いて配列の頭から二つずつ比較して最大値（最小値）を更新していく
```js
const aryMax = function (a, b) {return Math.max(a, b);}
const aryMin = function (a, b) {return Math.min(a, b);}
// 適当な数値の配列
 const numArray = [ 3, 5, 13, 8, 25, 4 ];
// 最大値と最小値を取得
const max = numArray.reduce(aryMax); // => 25
const min = numArray.reduce(aryMin); // => 3

// 最大値のインデックスを取得
    const maxIndex = numArray.indexOf(max);
    console.log(maxIndex) // => 4
// 最小値のインデックスを取得
    const minIndex = numArray.indexOf(min);
    console.log(minIndex) // => 0

```
これで大規模な配列が用意されていても安全。
リーダブルコードの要約_2章

**2章 名前に情報を詰め込む**
変数、関数、クラスなどに名前をつけるとき、短くても良い名前をつければ、それだけ多くの情報を読み手に伝えることができる。
本章では、名前を見ただけで読み手が「どんな変数（あるいは関数、クラスなど）か」がわかるような命名の方法を紹介する。

ポイントとなる方法は以下の通り。

* 明確な単語を選ぶ
* 汎用的な名前を避ける
* 抽象的な名前よりも具体的な名前を使う
* 名前の長さを決める
* 名前のフォーマットで情報を伝える

**明確な単語を選ぶ**
以下のような関数があるとする。
```php
function GetPage(url) {...}
```

この「get」はあまり明確な単語ではない。
例えば、この関数はページをどこから取ってくるのか？を考えたときに、名前からは判断がつかない。
もしインターネットから取ってくるのであれば、
* FetchPage()
* DownloadPage()

などの名前の方が明確である。

「get」の他にも、明確でない単語とその代替案の例をいくつか紹介する。
| 単語 | 代替案 |
|:-|:-|
| send | deliver, dispatch, announce, distribute, route |
| find | search, extract, locate, recover |
| start | launch, create, begin, open |
| make | create, set up, build, generate, compose, add, new |

**汎用的な名前を避ける**
プログラムには「tmp」「retval」「foo」のように、汎用的な名前が存在する。
今回は「tmp」を例に説明する。

「tmp」という名前は一般的に「一時的な保管」という意味合いで使われることが多い。
例えば、２つの変数の値を入れ替える以下のようなコードを考える。
```javascript
if (right < left) {
    tmp   = right;
    right = left;
    left  = tmp;
}
```
この`tmp`変数は`right`変数の値を「一時的に保管する」役割を担っているので、「tmp」という命名は適切であるといえる。

視界、以下のような「tmp」の命名は良くない。
```javascript
let tmp = user.name;
tmp += user.phone_number;
tmp += user.email;
...
template.set("user_info", tmp);
```
この`tmp`変数は「何度も書き換えられる変数」として使われており、「一時的な保管場所」という役割ではないため、「tmp」と命名をするのは不適切である。

「tmp」などの汎用的な名前は無闇に使うのではなく、それ相応の理由があるときだけ使用するべきである。

**抽象的な名前よりも具体的な名前を使う**
以下のようなJavaScriptのコードがあるとする。
```javascript
var start = (new Date()).getTime();
...
var elapsed = (new Date()).getTime() - start;
document.writeln("読み込み時間："  + elapsed + "秒");
```
一見間違っていないように見えるかもしれないが、このコードには間違いがある。
`getTime()`が秒ではなくミリ秒を返すからだ。
こういったミスを防ぐには、変数名に`_ms`を追加してより具体的な名前にしてあげれば良い。
```javascript
var start_ms = (new Date()).getTime();
...
var elapsed_ms = (new Date()).getTime() - start_ms;
document.writeln("読み込み時間："  + elapsed_ms / 1000 + "秒");
```
単位だけでなく、セキュリティ上の危険や注意を喚起するための情報も追加した方が良い。
具体的なケースを以下に紹介する。
| 状況 | 変数名 | 改善後 |
|:-|:-|:-|
| passwordはプレーンテキストなので、処理をする前に暗号化すべきである | password | plaintext_password |
| ユーザが入力したcommentは表示する前にエスケープする必要がある | comment | unescaped_comment |
| htmlの文字コードをUTF-8に変更した | html | html_utf8 |

注意として、全ての変数名に対して改善後の例のように追加の属性を追加しろということではない。
変数の意味を間違えてしまったときにバグになる可能性があるなど、変数の意味を正しく理解してもらわなければ困る場合において、属性を追加するのが良い。

**名前の長さを決める**
変数名の長さは、長すぎても短すぎても良くない。
どのくらいの長さにするべきかは、変数の使われ方によって決まる。

例えば、変数のスコープが小さければ、変数名に多くの情報を詰め込む必要はない。
変数の型・初期値・破棄方法などが見えるので、変数名は短くても問題ない。

一方で、グローバル変数などはスコープが大きいので、名前に十分な情報を詰め込んで役割を明確にする必要がある。

**名前のフォーマットで情報を伝える**
例えばJavaScriptでは、jQueryのライブラリ関数（$だけの関数）を呼び出したときには、変数名の頭に`$`をつけるという規約がある。

```javascript
var $all_images = $("img"); //$all_imagesはjQueryのオブジェクト
var height = 250;           // heightは違う
```
こうすることで、`$all_images`がjQueryのオブジェクトだと明確にわかる。



**2章のまとめ**
変数名や関数名には、名前を見ただけで情報を読み取れるような命名をするのが望ましい。
そのためには、以下のポイントを意識するとよい。
* 明確な単語を選ぶ
* 汎用的な名前を避ける
* 抽象的な名前よりも具体的な名前を使う
* 名前の長さを決める
* 名前のフォーマットで情報を伝える
Chart.js 4.3.3 の使い方

こちらのページにあるのと同じことを行ないました。
[Chart.js Latest(4.1.1) Getting Started](https://www.chartjs.org/docs/latest/getting-started/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/d212b6d1-89ca-930b-23bb-9ed64f887148.png)


```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Chart.js 4.3.3 棒グラフ</title>
</head>
<body>
<h2>Chart.js 4.3.3 棒グラフ</h2>
<div>
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="bar_graph.js"></script>

<hr />
<p>Aug/07/2023</p>
</body>
</html>
```

```js:bar_graph.js
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
```
JetpackCompose範囲選択可能にしてコピーができるテキスト範囲選択不可能にするテキスト

JetpackComposeで作成したテキストを範囲選択可能にしてコピーができるテキスト、範囲選択不可能にするテキストの実装方法です。

```SelectableTextUnSelectableTextSample.kt
@Composable
fun SelectableTextUnSelectableTextSample() {
    SelectionContainer {
        Column {
            Text("範囲選択できるテキスト")
            DisableSelection {
                Text("範囲選択できないキスト")
            }
            Text("範囲選択できるテキスト")
        }
    }
}
```

`SelectionContainer`を使用すると選択可能になります。

`DisableSelection`を使用すると選択不可能になります。


![Screenshot_20221231_154438.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274615/75fa2556-482b-8e99-cecc-01d38b81d0e9.png)

以上です。
この寒い冬に早起きをする方法

# この記事とは　
朝は寒く、乾燥しているため起きるのが辛い時期となりました。この記事は、最近まで大学生だった自分がいかに早起きをしているかを解説しつつ、お正月の時期から早起きモチベを高めようという記事になります。このお正月からみんなで早起き習慣をつけて元気よく過ごせるようにしましょう！

# ズバリ、早起きするために
技術系の記事ではないので結論から書きます。わたしが早起きするために意識していることは以下の3つです。　

・ __朝起きてからの行動を緻密に決めておく__　
・ __起きてすぐ飲める水と上着をベットのすぐそばに準備しておく__　
・ __趣味や楽しみの時間を作る__　
　
この3つを意識することで今年の冬の朝は乗り切りました。それでは細かくみていきましょう！

## 朝起きてからの行動を緻密に決めておく　
　朝起きてすぐというのは判断力も鈍く、まだ頭もスッキリしていない状態です。この頭で何をするべきか考えていると帰って眠くなってしまうなんていうことも起こりかねません。
そのため眠る前に次の日の朝の予定を全て決めてしまいましょう。　
例えば　

 6:00 起床　
 6:05 朝のシャワーに入る　
 6:20 シャワーから出る　
 6:25 コーヒーを作る　
 6:30 ご飯を作って食べる　
 6:40 片付け　
 6:50 服を着替える　 
 7:10 家を出発　

このように __かなり細かく事前に決めてしまい、朝判断することを極力減らす__ ことでボーとせずに朝の時間を過ごすことができるようになりました。
僕の感覚ではこれが一番効果が高かったと思います。　

## 起きてすぐ飲める水と上着をベットのすぐそばに準備しておく　
　起きた後何かを口にすると内臓が動き出し、体が起きてくるそうです。その観点からも朝起きてすぐお水を飲むのは非常に効果的だと思います。特に冬の時期は、起きると喉が乾燥していることが多いので __お水を夜のうちに用意しておく__ と朝楽になると思います。　
　また寒いと暖かいベットから動けなくなってしまうので、ベットのすぐそばに上着を置いてベットから出ても暖かい環境を作ってあげると良いと思います。　

## 趣味や楽しみの時間を作る
　僕はのんびりした性分なので、あまり忙しい朝というのは苦手です。そうではなくゆったりと好きなことをしつつ起きれるというのがいいですね。上述した予定でいうと　

 6:00 起床　
 6:05 朝のシャワーに入る　
 6:20 シャワーから出る　
<font color='red'> 6:25 コーヒーを作る　
 6:30 ご飯を作って食べる 　
 6:45 片付け　</font>
 6:50 服を着替える　 
 7:10 家を出発　
　
赤字のあたりが趣味になります。ゆっくりコーヒーや朝ごはんを作っているとだんだんと頭がはっきりしてきますね。　
他にも音楽を聴いたり、漫画を読んだり、そういったゆっくりした時間を朝に作るのは自分の中で朝起きるモチベーションになってとても良かったです。　

# まとめ　
　僕の朝起きる方法はいかがだったでしょうか。必要に迫られた早起きでしたが僕の中で早起きし始めて良かった点は、
<a>明日のことを考えながら眠る</a>ことが増えたことでした。
　__お正月に入り生活習慣が崩れ気味のあなたも！年明けに備え早起きモチベーションを高めていきましょう！__　

# おまけ　
このほかに早起きの工夫としておすすめなのは　
__寝る前にお水をがぶ飲みすること__ です。
こうするとトイレに行きたくなるので強制的に起きます。　
絶対に遅刻できない時におすすめ