OmniAICreator/Qiita-1.07M huggingface dataset:
【PixiJS】zIndexで画像の重なり順を変える

pixi.jsでは基本的に最初にaddChildされたものから順に画面に描画されるようになるので重なった場合には後にaddChildされたものほど上に表示されるようになります。

基本的にはそれを考慮してゲームを作っていくのですが、ときどきゲーム中にどうしても重なり順の変更が必要になる場合があります。

そのような場合に使われる要素にzIndexというものがあります。

## zIndexとは

サイトのデザインを決めるcssというもので使われているブロック要素の重なり順を指定するプロパティにz-indexというものがあります。このプロパティの数値が大きいほど上に小さいほど下に重なり順が入れ替わって表示されるようになります。

このcssのz-indexと同じようなものがpixi.jsにも用意されていてそれがzIndexです。

## zIndexの使い方

まずはzIndexで並び替えをしたいスプライトなどのディスプレイオブジェクトをaddChildしている親となっているContainerのsortableChildrenというプロパティーをtrueにします。

```
this.sortableChildren = true;
```

これでzIndexが使えるようになります。そしてスプライトなどのzIndexプロパティーに値を設定します。

```
player.zIndex = 100;
```

これだけでzIndexの値が大きい要素ほど上に表示されるようになります。

ただ、ときどきうまくいかないことがあって(理由はわかりません)、その時は親となっているContainerで

```
this.sortChildren();
```

というメソッドを使ってやると強制的に順序がソートされます。

たったこれだけで重なりを自由に変えられるのでとても便利です。

## おまけ
★pixi.jsの基本的な使い方の記事
▷ [【PixiJS入門】基本的な使い方まとめ](https://javascript-game.com/basic-pixijs/)
メモ〜CreateViewやUpdateViewで外部キーを設定する方法

今回のお題
-
今回は、`CreateView`や`UpdateView`などの汎用ビューでインスタンスの外部キー由来のフィールドに値をセットする方法をまとめます。

やりたいことの例
-

以下のようなモデル設計で、`Menu`インスタンスの作成時にログイン中のユーザーが所属している店舗を外部キーとして設定したい。

```python
class CustomUser(AbstractUser):
  shop = models.Foreignkey("shop.Shop", on_delete=models.PROTECT)
```
```python
class Menu(models.Model):
  name = models.CharField(max_length=20)
  shop = models.Foreignkey("shop.Shop", on_delete=models.CASCASE)
```

```python
class MenuForm(ModelForm):
  class Meta:
    model = Menu
    fields = ["name"]
```

フォームのフィールドとして指定してしまうと他の店舗を選択できてしまうので、その方法は取りたくない（バリデーションで対応できなくもないが、できれば自動で店舗情報が設定される形にしたい）。

結論
-
`CreateView`と`UpdateView`に実装されている`form_valid`メソッドをオーバーライドすることで対応可能。

```python
class MenuCreateView(CreateView):
  template_name = "menu/create.html"
  model = Menu
  form_class = MenuForm
  def form_valid(self, form):
    form.instance.shop = self.request.user.shop
```

`form_valid`メソッドはFormクラスやModelFormクラスのバリデーションがOKだった時に呼ばれてフォームを保存したのちにHttpResponseオブジェクトを返すメソッド。

なのでこのメソッドを上書きし、保存の直前に外部キーのデータがセットされるようにすれば良い。

フォームには外部キーのフィールド自体を用意していないので、店舗情報がなくてもバリデーションに引っかかることはない。

form_validメソッドについて
-
結論だけでは面白くないので、`form_valid`メソッドの解説を一応。

CreateViewとUpdateViewはそれぞれ、

FormMixin > ModelFormMixin > BaseCreate(Update)View > Create(Update)View

というルートで継承を重ねており、その度に`form_valid`メソッドに関する機能が追加されている。

具体的には、

- FormMixinでform_validメソッドを定義（この段階ではHttpResponseオブジェクトを返す役割のみ）。
- ModelFormMixinで、form_validメソッドが上書きされ、HttpResponseを返す前にフォーム内容が保存されるようになる。
- ProcessFormView(BaseCreate/Updateviewのもう一つの継承元）のpostメソッド内で、`form.is_valid()=true`の場合にのみ`form_valid`メソッドが呼び出されるように定義される。

という流れになっている。

```python
class FormMixin(ContextMixin):
  def form_valid(self, form):
        """If the form is valid, redirect to the supplied URL."""
        return HttpResponseRedirect(self.get_success_url())
```

```python
class ModelFormMixin(FormMixin, SingleObjectMixin):
  def form_valid(self, form):
        """If the form is valid, save the associated model."""
        self.object = form.save()
        return super().form_valid(form)
```
```python
class ProcessFormView(View):
    """Render a form on GET and processes it on POST."""
    def get(self, request, *args, **kwargs):
        """Handle GET requests: instantiate a blank version of the form."""
        return self.render_to_response(self.get_context_data())

    def post(self, request, *args, **kwargs):
        """
        Handle POST requests: instantiate a form instance with the passed
        POST variables and then check if it's valid.
        """
        form = self.get_form()
        if form.is_valid():
            return self.form_valid(form)
        else:
            return self.form_invalid(form)

    # PUT is a valid HTTP verb for creating (with a known URL) or editing an
    # object, note that browsers only support POST for now.
    def put(self, *args, **kwargs):
        return self.post(*args, **kwargs)
```
phpenvでUbuntu 20.04にphp7.4環境構築

2億回くらい同じハマり方をしているので、いい加減にメモ

# 手順

[phpenv](https://github.com/phpenv/phpenv)をセットアップする

```bash
$ git clone git://github.com/phpenv/phpenv.git ~/.phpenv
```

phpenvにパスを通してphpenvを使えるようにする。
bashrcとかに書いとくといい

```bash
$ export PATH="$HOME/.phpenv/bin:$PATH"
$ eval "$(phpenv init -)"
```

php-buildのプラグインを追加

```bash
$ git clone https://github.com/php-build/php-build $(phpenv root)/plugins/php-build
```

phpのビルドに必要なパッケージをインストール

```bash
$ sudo apt install \
  libxml2-dev \
  libkrb5-dev \
  libssl-dev \
  libsqlite3-dev \
  libbz2-dev \
  libcurl4-openssl-dev \
  libpng-dev \
  libjpeg-dev \
  libfreetype6-dev \
  libonig-dev \
  libxslt1-dev \
  libtidy-dev \
  libzip-dev
```

phpenvでバージョンを指定してビルドインストール

```bash
$ phpenv install 7.4.25
```
現場でよく使うVLOOKUP


シート1：検索ワードが入ったセル
シート2：検索対象の列と値取得したい列（列と書いているが、任意の行番号はつける）

```スプレッドシート:Vlookup関数
=IFNA(VLOOKUP(検索ワードが入ったセル,検索列を先頭:値取得したい列,COLUMN(値取得したい列)-COLUMN(検索列)+1,FALSE)&"","")
```

※VLOOKUPは３つ目の引数の指定が面倒くさいのだけれど、COLUMNを利用すると便利！

シート1

|  行/列 |  A  |  B  |  
| ---- | ---- | ---- | 
|  1 |  品名  |  いくら？  |
|  2  |  りんご  |  =IFNA(VLOOKUP(A2,'シート2'!A:C,COLUMN(C2)-COLUMN(A2)+1,FALSE),"")  |

↓

|  行/列 |  A  |  B  | 
| ---- | ---- | ---- |
|  1 |  品名  |  いくら？  |
|  2  |  りんご  |  350  |


シート2

|  行/列 |  A  |  B  |  C  |  D  |
| ---- | ---- | ---- | ---- |---- |
|  1  |  品名  |  個数  |  価格  |  D  |
|  2  |  バナナ  |  5  | 100   |    |
|  3  |  みかん  |  10  |  398  |    |
|  4  |  りんご   |  3  |  350  |    |
【GMT】台風データを使って描画してみた

## 概要

**GMT**を使って**ベストトラックデータ**を使って各台風における中心気圧や最大風速の時系列変化を描画する。
以下のことが学習可能。

- シェルスクリプト（データの読み書きや扱い方など）
- GMTのpsxyコマンド

## ベストトラックデータ

台風業界で最も有名なデータの１つで、台風の各種情報をテキスト形式で格納。
データ形式がわかりにくいため、実際に使用する場合は[気象庁ベストトラックフォーマット](http://typhoon21.world.coocan.jp/general/bst-format.html)を見ておくと良い。

データは[気象庁ベストトラックページ](http://www.jma.go.jp/jma/jma-eng/jma-center/rsmc-hp-pub-eg/besttrack.html)から取得可能。今回は2021年（2021年11月１日現在は１～８号）のデータを使用。

## 台風データの分割

気象庁ベストトラックページから取得したベストトラックデータは１年分を１ファイルで格納されている。
これだと非常に使いにくいため、台風１つごとのデータに分割する必要がある。
（自分でやるのがめんどくさいという方はGitやブログにソースがあるので使ってください）


## データ整形 + 描画

**GMT**で描画していきます。2021年１号の例です。

```bash:bash

# Standard Settings
tyNum=2101
savePs=2101.ps
mswTxt=2101_MaximumSustainedWind.txt
presTxt=2101_Pressure.txt

# GMT Settings
dispTime=a1Df3Hg6H
startDate=2021-02-16T00:00:00
gmtDate=2021-02-23T00:00:00
timeInterval=`echo "scale=5; 0.00031 / 7" | bc`

gmt psxy $presTxt -B$dispTime:"UTC":/a20g10:"Pressure[hPa]"::."20${tyNum:0:2} No.${tyNum:2:2}":WSn -R$startDate/$gmtDate/940/1020 -Jx${timeInterval}T/0.15 -Sc0.2 -Gblue -K > $savePs
gmt psxy $presTxt -B -R -J -W1,blue -P -K -O >> $savePs
gmt psxy $mswTxt -B/a10:"MSW[kt]":E -R$startDate/$gmtDate/0.1/100 -Jx${timeInterval}T/0.12 -Ss0.2 -Ggreen -P -K -O >> $savePs
gmt psxy $mswTxt -B -R -J -W1,green -P -K -O >> $savePs
gmt pslegend -R -J -Dx1.8/11.5/2.5/1.2 -F+p1,black+gwhite -P -O >> $savePs
S 0.2 c 0.2 blue black 0.5 Pressure
S 0.2 c 0.2 green black 0.5 MSW
EOF
gmt ps2raster $savePs -E100 -Tg
```

今回は時系列グラフを書くので。GMTに食べさせるデータはこのような形である必要があります。
GMTは`2021-01-01T00:00:00`にしないと時刻だと理解してくれない、つらい。

```
2021-01-01T00:00:00 1000
2021-01-01T60:00:00 990
...
```

GMTの**psxy**コマンドでは、プロット位置に○を描画させる処理と線を結ぶ処理をしています。
**pslegend**は凡例を描画するコマンドで、少し厄介で、`<<EOF ... EOF`などで囲った部分で凡例の内容を示します。
psファイルは扱いにくいので、最後に**ps2raster**でpng出力させています。


こんな図が出来上がります。
GMTは本当綺麗なんですよね。

![image](https://user-images.githubusercontent.com/93382642/141290220-9ece6e1d-f656-4bbc-b5b7-32723eca7140.png)



## その他

各種ソースコードはGitHubにおいています。

https://github.com/khfkd/typhoon_graph
ChromeやEdgeでborder-collapse、border-left、width:100%を使用すると最終行だけニョキる

何を言っているのかry)

今までIEだけに対応していたサイトを、Edgeでも表示できるように対応していて
①tableにborder-collapse: collapse
②border-left: 10px
を指定したテーブルと

tdの中にwidth:100%としたinput type="text"を配置したとき


<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="rNzrqJx" data-user="vranometria" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/vranometria/pen/rNzrqJx">
  Untitled</a> by vranometria (<a href="https://codepen.io/vranometria">@vranometria</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156655/b1f1f464-67cf-b415-d9ee-d0308a927af5.png)

なんか２行目が長い


もう１行足してみる


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156655/5ce23521-36a3-0448-f0be-f1a358fd3e0d.png)
3行目が長い
最終行がニョキる・・・



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156655/674a4c71-dbd0-d0b4-6e11-13e762798b1d.png)
↑IEやfirefoxだと発生しない

調べていた所、Chrome 91からtableの描画はTableNGというシステムに変わり、大幅な変更があったということなので([参考](https://marycore.jp/prog/css/table-border-fluctuation/))、
tableNGを一旦無効にして確認したところ、発生しなくなる。
また、tdにborder-styleを指定した場合も発生しなくなる。


何なんでしょう
PHPの i f 文を使おう！

PHPで条件分岐をしていこう！

```php:index.php
<?php
$score = 95;
if ($score >= 90) {
 echo 'よく出来ました！';
} 
```

macターミナルで以下を実行します！

```
~$ php index.php
```

ターミナルで以下が実行されました！

```
~ $ php main.php
よく出来ました！
~ $ 
```


$scoreを85に変えて、条件を増やしてみましょう！


```php:index.php
<?php
$score = 85;
if ($score >= 90) {
 echo 'よく出来ました！' . PHP_EOL;
} else {
  echo 'グッド！' . PHP_EOL;
}
```

ターミナルで以下が実行されました！

```
~ $ php main.php
グッド！
~ $ 
```

$scoreを100に変えてさらに条件を増やすと....

```php:index.php
<?php
$score = 100;
if ($score >= 90) {
 echo 'よく出来ました！' . PHP_EOL;
} elseif ($score >= 95) {
  echo '大変よく出来ました！' . PHP_EOL;
} else {
  echo 'グッド！' . PHP_EOL;
}
```

ターミナルで以下が実行されました！

```
~ $ php main.php
よく出来ました！
~ $ 
```



上手くいきましたか？



PHPの条件分岐の方法は、

javascriptを学習されてる方だとすぐに分かると思います　☆
How to fix couldn't open connection to server on Gmail?

Gmail email service is the best option for the users to use if they are looking for an option through which they are easily able to exchange emails with all the important safety and security intact, with it, the service app and also the web browser use of the app has always been an easy thing for the users, Gmail is not just easy to be used but also it is very fast and instant with the exchange of emails, photos, documents as well as files and folders.

Table Of Content:

Could not open a connection to the server on Gmail
List of reasons for the issue goes as follows:
Fixings for the given Gmail issue
Conclusion:


But, the discussion here has not to be regarding the features of the service, but they need to be regarding the issues and errors that the users do get to face very often and they are not really able to get through them so for a solution to that they may need proper guidance and support for instant and accurate fix of those issues.

How to fix couldn't open connection to server on Gmail?

Could not open a connection to the server on Gmail

There are so many errors and issues that the user may get to deal with while using the Gmail email service. But here for now we will see how the user can resolve the issue of could not open a connection to the server on Gmail, but before getting into resolution we will also see the reasons for the occurrence of the issue so that things would be more clear for the user and it will all be more smooth to understand and thus the user will be able to deal with it accordingly.

List of reasons for the issue goes as follows:

• Weak signal

• Network Error

• Network Outage

• Minor cache

• Network Settings issues

• Conflicting third party app

• The issue in any software

Now that the reasons are known, we shall further see how the user can get through this error and can thus get Gmail fixed.

Fixings for the given Gmail issue

• Internet connection needs to be checked

• The website and the URL needs to be checked

• Cache and data from the browser needs to be cleared

• The system needs to be given a start in the safe mode

• Updates need to be installed accordingly

• The device should be given a reboot

• SIM card needs to be checked

• DNS settings should be modified if required

• After all of this, the device should be given a restart

Conclusion:

In order to get the given issue resolved, the user is advised to follow the instructions as they have been provided here in the guide, the users are requested to read the guide carefully only then they will be further able to get the issue resolved and the service will then be back to normal working. The issue is common and also it can be fixed very easily just if the user follows all that has been given here in the guide. The instructions are all provided in a very simple language so the conduct would also be easy and smooth.

Source Url: https://telegra.ph/How-to-fix-couldnt-open-connection-to-server-on-Gmail-11-11
メモ：nodejsとnginxのhttps(オレオレ)

webRTCをテストするのにnode.jsをhttps化したので一応残しておく。
opensshを利用して自己署名。

# 証明書作成

[DLページ](https://slproweb.com/products/Win32OpenSSL.html)からLight版をダウンロードしてインストール。
以下のようなコマンドで証明書とキーを作成する。

```
openssl genrsa 2024 > server.key
openssl req -new -key server.key > server.csr
openssl x509 -req -days 3650 -signkey server.key < server.csr > server.crt
```

上のコマンドの場合は3650日で作成しているが、ブラウザ側で信頼したとしても
13ヶ月より長い有効期間の場合にどうなるかは試してはいない。

WindowsServerの場合には
`New-SelfSignedCertificate -DnsName "*.xxx.com" -CertStoreLocation "cert:\LocalMachine\My"`
のようにPowerShellで作成する方法もある。
但しこの場合にはキーと一緒にはpfx形式でしかエクスポート出来ないので、IIS等で使うのでなければopensshの方が良さそう。

# node.js
作成したキーを使ってhttps設定を行う。
といってもファイルを読み込んで、server作る際に第一引数に指定するだけ。

```
const fs = require('fs');
const sslOptions = {
    key: fs.readFileSync('server.key'),
    cert: fs.readFileSync('server.crt')
};
const express = require('express');
const app = express();
const server = require('https').Server(sslOptions,app);

server.listen(3000);
```

`NET::ERR_CERT_INVALID`がMacのChromeで出て、アクセス出来ない場合は
`thisisunsafe`と打ち込めばいいらしい。

# nginx
もしnginxに証明書を入れる場合は[ここ](https://jp.globalsign.com/support/server/533.html)辺りを参考にする。
中間CA証明書と結合する方法になっているが、オレオレの場合は中間がないのでそのまま。

Windowsなので設定ファイルはG:\apps\nginx-1.20\conf\nginx.conf
以下のようにlistenポートにsslを付けるのと、証明書関係のファイルをセットする。

```
server {
    listen 443 ssl;

    ssl_certificate     G:\apps\nginx-1.20\conf\server.crt;
    ssl_certificate_key G:\apps\nginx-1.20\conf\server.key;
}
```
【Python】1行でif-elif-else文を実装するコード

あまり必要な機会は無いかもしれませんが、1行でif-elif-else文を実装するコードを書く機会があったのでメモとして残しておきます。

## 複数行でif-elif-else文を実装するコード

```python
# 複数行の場合(xは既に宣言されているものとします)
y = ""
if x % 2 == 0: y = "偶数"
elif x % 3 == 0: y = "3の倍数"
else: y = "偶数でも3の倍数でもありません"
print(y)
```
## 1行でif-elif-else文を実装するコード

```python
# 1行の場合(xは既に宣言されているものとします)
y = "偶数" if x % 2 == 0 else "3の倍数" if x % 3 == 0 else "偶数でも3の倍数でもありません"
print(y)
```

`真の値、条件式、偽の場合の処理`の順で横につながっていくイメージです。

間に`:`は不要です。

## Pythonのお役立ち情報

https://wagtechblog.com/programing/python-school

https://wagtechblog.com/programing/ai-develop-school
PHPで定数を扱っていこう！



PHPで定数を定義していきましょう！

変数は中の値を何度も代入できるけど、

定数にすると値を変える事が出来なくなります！

定数は大文字で書いていきます。

```PHP:index.php
<?php

const NAME = 'かな';
echo NAME . PHP_EOL;
```

macターミナルに以下を出力します！

```
~$ php index.php
```


以下が出力されました！


```
~ $ php main.php
かな
~ $ 
```


同じ定数名に値を代入しようとすると...

```PHP:index.php
<?php

const NAME = 'かな';
const NAME = 'さやか';
echo NAME . PHP_EOL;
```




ターミナルにエラーで表示されます！





変数と定数の使い分けを上手くできると良いですね！
【Vue.js】チェックボックス

#はじめに
こんにちは！
今回は【Vue.js】でのチェックボックスについてアウトプットしていきます！

#チェックボックスについて
・単体のチェックボックスは`boolean`を使用
・複数のチェックボックスは配列`[]`を使用


#書き方・解説

（例題）チェックを入れたら`true`と`false`が入れ替わるプログラムを書いていきます。

##単体

```HTML:HTML
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
  <pre>{{ $data }}</pre>
```
```Vue.js
   data: {
     checked: false
   }
```

`data`オプションに`checked:false`を設置します。
<テンプレート側>

チェックボックスを設置し、`v-model="checked"`で`checked`と双方データバインディングさせます。
そしたら`id="checkbox"`と`<label for="checkbox">`でこちらも紐付けます。

このように記述するとチェックを入れたら

![スクリーンショット 2021-10-28 6.22.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/8ec3a51f-69b1-e74c-c28b-c9f8e76848df.png)

![スクリーンショット 2021-10-28 6.23.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/bf29988b-3eeb-cf6e-fa95-0dd359db6889.png)

`label`の部分も`true`に変わります。

##複数
```HTML:HTML
  <input type="checkbox" id="red" value="Red" v-model="colors">
  <label for="red">Red</label>
  <input type="checkbox" id="green" value="Green" v-model="colors">
  <label for="green">Green</label>
  <input type="checkbox" id="blue" value="Blue" v-model="colors">
  <label for="blue">Blue</label>
  <p>
    {{ colors }}
  </p>
```
```Vue.js
   data: {
     colors: []
   }
```

チェックボックスのデータを管理するプロパティ`colors`を設置します。複数の型は配列なので初期値は空にします。

<テンプレート側>
チェックボックスとラベルを表示させます。この一連の記述は単体の方で解説しているので省略します。
単体と違う点は`value`属性を使い、初期値を指定している点です。`value`で初期値を指定できていなかったら`null`と表示されてしまいます。

このように記述すると、

![スクリーンショット 2021-10-28 6.52.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/7d483f18-8eac-11a0-a856-a8ffec8fa733.png)

![スクリーンショット 2021-10-28 6.52.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/342e00ac-31f2-948f-22b9-6c19aa1281d2.png)

複数のチェックボックスを反映できました！


#まとめ
・単体のチェックボックスは`boolean`
・複数のチェックボックスは配列`[]`
・複数は`value`属性で初期値を指定。
・単体も複数も記述文はほぼ一緒。

#最後に
今回はチェックボックス「単体/複数」についてアウトプットしました。
今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

今後ともQiitaにてアウトプットしていきます！

最後までご愛読ありがとうございました！
Reactかんぜんにりかいした

## まじで雰囲気で書いてるのでこまかいところは無視してね
React完全に理解しようぜ。
まずReactってなに？

html js cssで作る画面のうち、htmlとjsの部分をいい感じにまとめてくれるフレームワーク。

jsで紙芝居の紙を変えていくイメージ。returnされるのがDOM。
こんなかんじっす。


```Reactこんなかんじ.jsx
import React from 'react';

// まずクラスを作る
const TestCode: React.FC = () => {

    // クラス内部に変数とか定数を持てる。Javaと同じ
    const TEST = 'TEST';

    // 「htmlコード」をreturnする。
    return (
        <div>{TEST}</div>
    );
};
export default TestCode;
```
なんで、`TestCode`ってクラスを呼び出したら、`<div>TEST</div>`ってhtmlコードが出てくるわけだ。
こうやっていっぱいクラスを用意することで

```index.html
<div className="root"><div>
```
ってやっといて、className="root"のとこにTestCodeの返却値をぶち込むことで

紙芝居の枠：index.html
紙芝居の紙1：TestCode1.tsx
紙芝居の紙2：TestCode2.tsx

みたいな感じでページを変更していける、って感じ。

で


```こんなかんじで機能つくれる.jsx
import React from 'react';

// typescriptだとこう。クラス引数をここに定義しておけばPropsとして
// Sessionとかでなく、ページの遷移元から値を引き継げる。
// ページとページが、メソッドからメソッド呼ぶみたいになってるわけだ
type Props = {
    引数1: string,
    引数2: string
}

const TestCode: React.FC<Props> = ({引数1, 引数2}) => {

    // クラス内部に変数とか定数を持てる。Javaと同じ
    const TEST = 'TEST';

    // もちろん関数もね
    function testFunc = () => {
        console.log('ここでajaxとかもろもろすればいい');
    };

    // 「htmlコード」をreturnする。
    return (
        <button onClick={testFunc}>{TEST}</button>
    );
};
export default TestCode;
```

って感じ。これが最低限の骨組み。
TypeScriptの"Object is possibly undefined"への対処

DynamoDBをTypescriptから呼び出していて，起こったエラー

```typescript
const result = await DBAccess.getItem(params);

const status:string = result.status.S;
```

ここで，左辺の`string`と，右辺の`string | undefined`で型の不一致が起きているのがひとつ
さらに，`result`が`undefined`になる可能性があるというエラーが起きる．
以下のように解決した．
`result`が`undefined`になる可能性をあらかじめ排除しておき，そのうえで型アサーションをする．


```typescript
const result = await DBAccess.getItem(params);

if (result === undefined) {
  // do something
}

const status:string = (result!.status.S as string)
```

もっと良い方法があればコメントでおしえてください！
Angular,React,Vueなど技術選択において人気度の軸で調査する時の情報ソース

人気度調査の根拠となる情報ソースを網羅的にまとめていただいているサイトがあり
備忘録のため記載します。

## どのフロントエンドフレームワークが最も人気があるか
こちらの記事では、世界でどのフロントエンドフレームワークが最も人気があるか議論されています。

https://gist.github.com/tkrotoff/b1caa4c3a185629299ec234d2314e190


以下の17の情報ソースから考察されています。
・Stack Overflow Trends
・Stack Overflow survey
・stateofjs.com survey
・JetBrains survey
・NPM downloads
・NPM packages depending on
・GitHub "Used by"
・GitHub topics
・Reddit metrics
・Twitter
・Hacker News Hiring Trends
・Indeed
・Developer Tools
・Google trends
・YouTube
・SimilarTech: market share & web usage statistics
・BuiltWith Technology Lookup

## まとめ
これらの情報ソースはJavaScriptフレームワーク選択時における人気度調査に有効ですが、
他にも言語やライブラリやツール選択時にも参考になると思いました。
自分の好きな名前から唯一無二のNFTアート(アバター)を生成できるCollective NFTを開発してみた「The Hoodie Crew」

# はじめに

NFTとgenerative ARTの学習を兼ねて、CollectiveなNFTを作ってみました。
この記事では作成したNFTと、開発の流れを書いていきます。

![](https://firebasestorage.googleapis.com/v0/b/hideaki-97c59.appspot.com/o/images%2FFd7H2e9dqSaCJq8SFJZ1GqQKps32%2FdwNparFmZ.png?alt=media)

# コレクティブのテーマ

まずはじめに、どんなコレクティブNFTにするか考えてみました。2021年も終わりに差し掛かる今の時期に、美術センスもなくアーティストでもない自分が普通に絵を書いて公開したとしても、誰も見てくれないでしょう。Openseaを見れば素晴らしいNFTアートが溢れています。

また、学習のためとはいえせっかく作るなら、色々な人が使ってくれるかもしれない要素を盛り込みたいと思いました。cryptopunksやBAYCをはじめいわゆるCollectiveなタイプは、発行上限と属性のレア度が存在するために希少性をもたらしますが、かなり高価格になり私のような一般人にはなかなか手が出せません。

そこで今回盛り込んだのが、**「名は体を表す」** というコンセプトです。予め発行されたNFTアートを買うのではなく、誰もが自由に好きな「名前」をつけることで、世界に一つの名前から唯一無二のCollectiveを生み出すCollectiveを作ってみました。(このようなNFTも世界には山ほどあるかもしれませんが、少なくとも自分の周りではなかったので、もし先行事例があったら教えてください笑)

# The Hoodie Crewとは

前置きが長くなってしまいましたが、作成したNFTについてご紹介します。

**「The Hoodie Crew」** は、好きな名前をつけることで、その名前に応じてユニークな見た目の「Hoodie Crew」という生き物を生成します。

ERC721準拠のNFTで、ガス代を考慮してPolygonチェーンに載せています。

[The Hoodie Crew](https://hoodie-crew.vercel.app/)

![The Hoodie Crew](https://gateway.pinata.cloud/ipfs/QmSCM8Czr7a45jLLkADjTZr3HqZs6mRQq3pJiKYXodZZht)

例えば「The Hoodie Crew」という名前をつけると、下記のようなHoodie Crewを生成します。

![The Hoodie Crew](https://gateway.pinata.cloud/ipfs/QmPinTi7mcpsW7WzrpgSFu9pcsicSvXa7VpYqLECTrzbcY)

名前と生成されたイラストはオンチェーンに保存されるため、同じ名前の「The Hoodie Crew」は世界に一つだけとなります。「The Hoodie Crew」が持つ特徴は下記の通りで、それぞれの特徴は入力した名前によって決まります。

## 表情

「The Hoodie Crew」のフードの中の顔は、白いドットのオン/オフで表されます。表情の組み合わせは、名前文字列の特定の部分を2進数に変換して組み合わせており、2の88乗通り存在します。

## 色

色には「背景色」「体の色」「アクセントカラー1」「アクセントカラー2」の4種類があります。アクセントカラーは、装飾属性に利用されます。色は16進数で設定しているため、理論的には2の32乗通り存在します。

## 装飾

装飾には大きく4つのタイプがあり、「服の模様」「メガネ」「頭」「口」のそれぞれに複数の装飾がつきます(「The Hoodie Crew」ではサイクロプスのような「メガネ」とロボット風の「頭」の装飾がついています)

![](https://firebasestorage.googleapis.com/v0/b/hideaki-97c59.appspot.com/o/images%2FFd7H2e9dqSaCJq8SFJZ1GqQKps32%2FqZC9QdI8q.png?alt=media)

# NFTとしての「The Hoodie Crew」の使い道(願望)

名前から実体を生成するNFTを作ってみましたが、正直使い道があるのかは分かりません。ただ作りながら思いついたNFTとしての価値のポテンシャルをつらつら書いてみます。

1.  表情が文字列によって生成されるため、人の顔っぽくなったら面白そう。(自分も色々な文字列を試してみましたが顔っぽいのをは見つけられませんでした。。)
2.  SNSのIDで生成するとその人のSNSアカウントに対応する唯一無二のNFTができる(自分は今自分のTwitterのIDで生成した「The Hoodie Crew」をSNSのアイコンに使ってます。だから何だと言われると何もないですが、なんか所有権っぽくていいなと思ってます)

他にも良さそうな使い道があったら教えてください。

# 最後に

実際にNFTをリリースするまで試してみましたが、色々勉強になって楽しかったです。次回の記事では実際に開発してリリースするまでの流れなんかを書きたいと思っています。

名前を入力して生成される「The Hoodie Crew」を見るだけならMetamaskさえ接続すれば無料で誰でもできるので、もしよければ下記のリンクからぜひ遊んでみてください！(そして気に入ったものがあればぜひミントしていただければ嬉しいです笑 通常10MATICで買えますが、 最初の100体までは3MATICでミントいただけます！)

[The Hoodie Crewのサイト](https://hoodie-crew.vercel.app/)へ

***

[「The Hoodie Crew」Opensea](https://opensea.io/collection/thehoodiecrew)
Excel ショートカットキー覚書

##はじめに
Excelで利用頻度の高いキー操作の覚書
環境：Excel2016


##一覧

|内容|操作キー|
|:-|:-|
|リボンの表示/非表示|Ctrl + F1|
|コピー|Ctrl + C|
|切り取り|Ctrl + X|
|貼り付け|Ctrl + V|
|元に戻す|Ctrl + Z|
|直前の操作の繰り返し|Ctrl + Y|
|上書き保存|Ctrl + S|
|名前を付けて保存|F12|
|選択中のセルを編集状態にする|F2|
|検索|Ctrl + F|
|置換|Ctrl + H|
|全選択|Ctrl + A|
|印刷ダイアログボックスの表示|Ctrl + P|
|「セルの書式設定」ダイアログボックスの表示|Ctrl + 1|
|データの最後まで移動|Ctrl + (矢印）|
|データの最後まで一括選択|Ctrl + Shift + (矢印）|
|左のシートに移動|Ctrl + Page Up|
|右のシートに移動|Ctrl + Page Down|
|セル、行、列の挿入|Ctrl + Shift + +(プラス)|
|セル、行、列の削除|Ctrl + －(マイナス)|
|列を全選択|Ctrl + [スペース]|
|本日を入力|Ctrl + :|
|現在時刻を入力|Ctrl + ;|
|行を全選択|Shift + [スペース]|
|シートの追加|Shift + F11|
|新しいブックを開く|Ctrl + N|
|選択中の列 or 行 を挿入する|列 or 行 を選択した状態でShiftを押した状態でマウス移動|
|Sum関数|Shift + Alt + =(イコール)|
|フィルター|Shift + Ctrl + L|
|ショートカットコマンドを開く|アプリケーションキー or Shift + F10|
|シートの再計算|Shift + F9|
|数式の表示|Shift + Ctrl + `(リバースシングルクォート)|
|スクロールロック| Fn + s|
|選択肢のショートカット|Alt + ↓|
|セル内で改行|Alt + Enter|
|日付書式（yyyy/m/d）変更|Ctrl + Shift + #|
|直前に設定した書式をコピーする。　セルを選択して|F4|
|絶対参照と相対参照を切替。セルを編集モードにして|F4|
|関数：yyyymmddを日付にする。|=DATE(LEFT(A1,4),MID(A1,5,2),RIGHT(A1,2))|
|関数：後ろから検索。　※「●」は利用無しの前提、A2セルで「.」を検索する場合。ファイル名から拡張子抜き出す場合等に|=FIND("●", SUBSTITUTE(A2, ".", "●", LEN(A2) - LEN(SUBSTITUTE(A2, ".", ""))))|
|関数：シート名取得|=RIGHT(CELL("filename",A1),LEN(CELL("filename",A1))-FIND("]",CELL("filename",A1)))|


##履歴
2021/11/11 作成
GitとGitHubの使い方についてのメモ２（自分なりの解釈）～Gitの～使い方編～

前回の内容はGitとGitのインストール方法について書いています↓
https://qiita.com/Shunsuke2967/items/9a7e8ecc94513986aa7a

#Gitの具体的な使い方

## リポジトリを作成する
まずは適当にディレクトリを作成します
ターミナル（コマンドプロンプト）を開いて作成したディレクトリに移動します
そこに下記のコマンドを打ちます↓

```
git init
```

カレントディレクトリをリポジトリとして初期化します。
この自身のディレクトリに作成されたリポジトリをローカルリポジトリと呼びます（以降はこのリポジトリをローカルリポジトリと呼びます）

コマンドを打ったカレントのディレクトリをローカルリポジトリとするので管理したいディレクトリの中で行うようにしてください

##変更した内容をリポジトリに反映する

まずは先ほどローカルリポジトリを作成したディレクトリ内にファイルを作成してください

####ここから先のことを説明するのに二つの単語を紹介します

**インデックス**

- ローカルリポジトリに変更内容を追加（コミット）する前に一時的に保存する領域のことをいい、インデックスに追加されたファイルのみがリポジトリに変更内容を追加（コミット）できます。

**コミット**

-インデックスに保管した内容をローカルリポジトリに反映させることをいう

以下のコマンドを入力し、**インデックス**へ先ほど作成したファイルを追加します

```
git add 作成したファイル
```

これでインデックスにファイルが一時的に追加されました
最後にインデックスに追加したファイルをローカルリポジトリに追加します（コミット）↓

```
git commit -m "変更した内容の説明"
```

ここで -m はコミットメッセージを入力するためのオプションです。

また、コミットメッセージを含めた変更履歴（ログ）は、以下のgit logコマンドを入力することで以下のように確認できます。
#終わり
これでローカルリポジトリ作成から作成したファイルをリポジトリにコミットすることができました！

今回紹介したコマンドのほかにも様々な便利コマンドがあるのでまた調べてみて下さい
PHPで数値の計算方法★


PHPで四則演算のやり方を見ていきましょう！

  +　(足し算)
  -　(引き算)
  *　(掛け算)
  /　(割り算)
  %　(割った時の余り)




```php:index.php

echo 20 + 1 . PHP_EOL;
echo 20 - 1 . PHP_EOL;
echo 10 * 2 . PHP_EOL;
echo 30 / 3 . PHP_EOL;
echo 40 % 3 . PHP_EOL;

```

ターミナルで以下を実行します！


```
~$ php index.php
```

ターミナルに以下が出力されました！


```
~ $ php index.php
21
19
20
10
1
~ $ 

```






文字列の時は''(シングルクオーテーション)や、

""(ダブルクオーテーション)で囲みましたが、数値の場合囲まなくてokです！
DynamoDBの自動バックアップ/Export機能を使ってみた

#　はじめに

AWSのリソースを引っ越しする要件があってDynamoの移行について調べていたところ、最近エクスポートする機能がリリースされたようで、早速使ってみたので書き残してみます。
以下も参考にしました。

https://qiita.com/bassaaaaa/items/5114bfd28bd3832d1f6a#aws-cli%E3%81%A7dynamodb-export%E3%82%92%E3%82%84%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B

#　PITR：ポイントインタイムリカバリとは

Dynamoのテーブル設定でPITRをONにすることで、日次で自動バックアップが取られ、リカバリができるようになる機能です。
この機能を有効にしないとエクスポートはできません。
エクスポートが済んだら無効に戻すこともできます。

#　使ってみた

上記参照した手順はCLIを使っていますが、マネジメントコンソールからでも簡単に使えます。
テーブルのバックアップ設定で、PITRを有効化します（デフォルト無効）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259832/6cccb0c2-5637-08d5-ef57-3d27eb244d02.png)

「復元」ボタンから復元ができますが、復元先は指定した別の新規テーブルになる点に注意が必要です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259832/a9cd9acb-c388-0dea-b4f7-33b470d69336.png)

自動バックアップと別に、S3へJson形式でエクスポートができます。
読み取り/書き込みキャパシティユニットの制限は受けずに全量吐き出してくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259832/729dc567-abbe-6665-1cf4-39371f24ef27.png)

こんな形式のフォーマットで、型の情報も一緒に添えられてます。

```json:data.json
{"Item":{"slackId":{"S":"UDxxxxxx"},"connpassId":{"S":"user01"},"githubId":{"S":"user01"},"qiitaId":{"S":"user01"},"name":{"S":"user01"},"udemyId":{"S":"user01"}}}
{"Item":{"slackId":{"S":"U0yyyyyy"},"qiitaId":{"S":"user02"},"name":{"S":"user02"}}}
```

# さいごに

Dynamoのデータ移行のために調べたPITRですが、

- インポート機能が無い
- 既存のインポートツールはkey:value形式のJsonで作っていたのでエクスポートデータがそのまま使えない

という点から、この機能は使わずコチラのツールを利用させてもらいました。
（読み取り/書き込みキャパシティユニットの制限は受けるのでチューニングは必要）

https://github.com/ozaki25/dynamodb-backup-json

一方で、自動バックアップされるのは心強いのでPITRの機能は有効にしたまま運用することにしました。
料金は 毎月0.228USD/GB 程と、気にするほどでも無さそうです。
Azure Remote Rendering Showcase セットアップ手順 (2021.11)

# Overview
Azure Remote Rendering の Showcase アプリセットアップ手順について、
備忘録も兼ねて、書いておきたいと思います。

# 開発環境
- Visual Studio 2019
- Windows SDK 18362 +
- Unity 2019.4.14f1

# 手順

## (1) Showcase アプリを GitHub からクローンする

以下、コマンドを実行します。

```
mkdir ARR
cd ARR
git clone https://github.com/Azure/azure-remote-rendering
powershell -ExecutionPolicy RemoteSigned -File azure-remote-rendering\Scripts\DownloadUnityPackages.ps1
```

※ 最後のコマンドで依存パッケージをダウンロードし、
サブディレクトリを作成します。

## (2)  Unity で App を開く
以下、フォルダを Unity プロジェクトとして追加します。

フォルダパス : ARR/azure-remote-rendering/Unity/Showcase/App


<img width="500" alt="image.png (45.0 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2021/11/11/10862/48135e89-f37a-4d3c-97ce-d16cfde19f98.png">

追加できたら、Unity を立ち上げましょう。

## (3) Switch Platform を実行
File > Build Settings ( Ctrl + Shift + B ) を立ち上げ、ターゲットプラットフォームに「Universal Windows Platform (UWP) 」を選択し、Switch Platform ボタンを押します。

<img width="500" alt="image.png (93.8 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2021/11/11/10862/ce976f1c-c78d-4a42-81b8-84bc2eabca7e.png">


## (4) SampleScene を開く

ファイルパス : Assets/Scenes/SampleScene

<img width="500" alt="image.png (395.3 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2021/11/11/10862/549ae21e-dfd2-413e-8fd7-6b5da5f7d7c0.png">


## (5) MRTK Configuration を開く
   ヒエラルキーウィンドウから「MixedRealityToolkit」を選択

<img width="500" alt="image.png (22.1 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2021/11/11/10862/0a3f2478-df2f-46fd-9bbf-0390c9dc28e0.png">

インスペクターウィンドウへ移動し、Extensions タブを選択

<img width="1308" alt="image.png (270.7 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2021/11/11/10862/f0ecf871-c763-4487-8de5-0418583b8857.png">

RemoteRenderingService configuration 配下の以下項目を入力

**Azure Remote Rendering Domain**
- Accound Id (アカウントID)
- Accound Domain (アカウントドメイン)
- Account Key (アカウントキー)

もし、独自のモデルを読み込みたい場合は、ARRアセットデータを含む Azure Storage の情報を RemoteRenderingService configuration へ入力

- Storage Account Name
- Storage Account Key
- Storage Model Container


# 参考文献
- [Getting Started](https://github.com/Azure/azure-remote-rendering/tree/master/Unity/Showcase)
- [Azure Remote Rendering Showcase App Sample](https://github.com/Azure/azure-remote-rendering/blob/master/Unity/Showcase/.documents/app-usage.md)
英単語とスルメの話

　昔、受験勉強で英単語を覚えるのが苦手だった。同じ単語を何度も繰り返し見ることにストレスを感じていた。だが、数学の公式は何度書いても飽きることは無い。それどころか、書けば書くほど、新たな発見があって、面白くなる感じ。どちらも、同じことの繰り返しなんだけど、何が違うんだろう。
　敢えて、誤解を恐れずに言うと、英単語は繰り返し見ても、その先に新たな発見が無い。それに対して、数学の公式は、色々と周辺知識が身に付いて面白かったような記憶がある。しかし、英単語も覚えれば最終的には、英語が話せるようになるという大きな目的がある訳で、決して意味がない訳では無い。何で苦痛に感じていたんだろうか。
　簡単に言うと、頭の中が「英単語＝受験」と言うイメージで覆われていて、英語を話すということが全然イメージできていなかったからだと思う。同じことの繰り返し。例えるなら、味のないガムを噛み続ける様な。それに対して、数学の公式は書けば書くほど新たな発見があるので、スルメを嚙んでいる様な感じだったのかな。
　結局、何が言いたいかと言うと、同じ作業を繰り返しているとしても、その先の目標が見えているかいないかで、モチベーションが全然違ってくるということである。逆を言えば、繰り返し作業がつまらないと感じているのなら、その先の目標が見える見える所に身を置いてみると、やる気も変わってくるかもしれない。
PHPヒアドキュメント



ヒアドキュメントを使って長めの文章を表現していきます！

```php:index.php
<?php

$name = 'kana';
$text = <<<EOT
   こんにちは　$name
   今日は天気良いね！
ほら！

EOT; 

echo $text;
```



ターミナルで以下を実行します!


```
~$ php index.php
```



ターミナルにこのように出力されます!



```
~$ php index.php
   こんにちは　kana
   今日は天気良いね！
ほら！
~ $ 

```




改行や字下げを簡単に行う事が出来ました☆
sympyのCrossとplaneのnormal_vectorを調べてみた。

教えて下さい。こうゆうのは、「右手系」というのですか？


オリジナル

https://docs.sympy.org/latest/modules/matrices/matrices.html#sympy.matrices.matrices.MatrixBase.cross

https://docs.sympy.org/latest/modules/geometry/plane.html#sympy.geometry.plane.Plane.normal_vector

#Pycharmで

```python
# O(0,0,0),A(1,0,0),B(0,1,0),C(0,0,2)
from sympy import *
def myPtoM(myPoint3D):
    return Matrix([myPoint3D.x,myPoint3D.y,myPoint3D.z])
def myMtoP(myMatrix):
    return Point3D(myMatrix[0],myMatrix[1],myMatrix[2])
def myHtoP(myHairetu):
    return Point3D(myHairetu[0],myHairetu[1],myHairetu[2])
def myCrosstoP(P1,P2):
    return myMtoP(myPtoM(P1).cross(myPtoM(P2)))
def myDot(P1,P2):
    return myPtoM(P1).dot(myPtoM(P2))
PO=Point3D(0,0,0)
PA=Point3D(1,0,0)
PB=Point3D(0,1,0)
PC=Point3D(0,0,2)
PI=Point3D(1/4,1/4,1/4)
print("#OA→OB",myCrosstoP(PA-PO,PB-PO))
print("#OB→OA",myCrosstoP(PB-PO,PA-PO))
print("#OAB  ",myHtoP(Plane(PO,PA,PB).normal_vector))
print("#OBA  ",myHtoP(Plane(PO,PB,PA).normal_vector))
#OA→OB Point3D(0, 0, 1)
#OB→OA Point3D(0, 0, -1)
#OAB   Point3D(0, 0, 1)
#OBA   Point3D(0, 0, -1)
```
余計なコードが入っていました。関数を使わずに、クラスの使い方をアドバイスいただけると助かります。

#目的
三角形の内心はincenterがありますが、三角錐の内接球が、目標です。

https://docs.sympy.org/latest/modules/geometry/polygons.html#sympy.geometry.polygon.Triangle.incenter


https://ja.stackoverflow.com/questions/83009/%e5%9b%9b%e9%9d%a2%e4%bd%93%e4%b8%89%e8%a7%92%e9%8c%90%e3%81%ae%e5%86%85%e6%8e%a5%e7%90%83%e3%81%aesympy%e3%82%92%e6%8e%a2%e3%81%97%e3%81%a6%e3%81%84%e3%81%be%e3%81%99-vba%e3%82%bd%e3%83%ab%e3%83%90%e3%83%bc%e3%81%a7%e3%82%84%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%be%e3%81%97%e3%81%9f/83097#83097
Windows 10 の出力音質を引き上げる設定 (Rubix22版)

Windows 10 の出力音質を引き上げる設定についてメモします。
Windows 10 はデフォルト設定では最高音質にはならないことがあり、以下のように設定変更が必要です。

## 前提条件

このメモは以下の環境で確認および記述しました。

* `Windows 10` (21H1)
* `Roland Rubix22` (USB接続オーディオインタフェース)

# Windows 10 の設定

## サウンドの設定

### サウンドの設定 の起動

Windows の検索ボックスから `サウンドの設定` を起動します。

![win001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105739/2d8db286-57a8-0e6d-7a12-e6cfb69b0f93.png)

### サウンド コントロール パネル を開く

サウンド設定の `関連設定` から `サウンド コントロール パネル` を開きます。

![win002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105739/8237fab2-1959-19f7-e2e7-532d57a1c99c.png)

### 再生デバイス を設定

サウンド コントロール パネル で 対象となる `再生デバイス` の設定を変更します。
このメモでは Rubix22 を利用しているため、再生デバイス の一覧から `Rubix22` を選択して設定を更新します。

![win003.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105739/62f27855-6b92-5d0a-f945-c4b334c6265c.png)

再生デバイスの `プロパティ` の `詳細` タブを開きます。
`規定の形式` から Rubix22 の最高音質である `24 ビット、192000 Hz (スタジオの音質)` に変更します。

![win004.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105739/0e0cb59b-b27f-15c0-157a-68cbb577d30e.png)

これにより、デフォルトの出力音質の挙動が 192 kHz / 24bit に更新されました。

# Apple iTunes の設定

Windows 10 で音楽を聴く場合に `Apple iTunes` を利用している人がいるかもしれません。(私は使う場合があります)
なお、2021/11時点では、Windows 版の iTunes の最高音質出力には課題があるといわれており、もしハイレゾなど高音質を求めるのであれば、Mac を購入して Apple Music を利用する方が近道のように思えます。

さて、Windows に話を戻します。iTunes で高音質を目指す場合は、iTunes のメニュー `編集` | `環境設定...` で設定のダイアログを開き、`再生` タブをクリックして設定を変更します。可能な範囲で最高音質を設定しておきましょう。
オーディオの品質の設定を以下のように変更します。

* `オーディオの再生方法` を `Windows Audio Session` に変更
* `オーディオのサンプルレート` を `192 kHz` に変更
* `オーディオのビット／サンプル` を `24` に変更

![win005.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105739/4da47636-9af0-2089-3944-93f59ed3a875.png)

これにより、iTunes の再生を設定可能な範囲での高音質に変わります。

Apple Music の中から 高音質系のコンテンツを再生してみると、差が感じられるかもしれませんね。

# おまけ: 再生装置の音質を上げる

出力再生音質があがったので、あとはスピーカーやヘッドホンの再現性を高められれば、高品質な再生環境が得られることが期待できます。

## ヘッドホン

高品質なモニターヘッドホンやハイレゾヘッドホンを Rubix22 のヘッドホン端子につなげることにより、高音質再生環境を得られることでしょう。

## アンプおよびスピーカー

Rubix22 の出力先に、以下のいずれかを選択することにより、高音質再生環境を得られることでしょう。

* ハイレゾ対応アンプおよびハイレゾ対応パッシブスピーカーを Rubix22 の出力に接続する
* ハイレゾ対応アクティブスピーカーを Rubix22 の出力に接続する

# 処理音質をソース音源に揃える

ソース音源の音質が高くない場合は、ソース音源の音質に合わせて DAC の音質設定を下げた方が高音質な再生を得られる場合があります。
例えば、ソース音源がCD音質である場合は、`規定の形式` 設定を `16 ビット、44100 Hz (CDの音質)` まで下げるのです。

# プロパティ

* 初出: 2021-11-11

## 関連記事

* [iPhone iOS 15.1 の出力音質を引き上げる設定](https://qiita.com/igapyon/items/72906e056262a0d5e89d)
* [macOS Monterey の出力音質を引き上げる設定](https://qiita.com/igapyon/items/b01f06917759fa783ac8)
* [Windows 10 の出力音質を引き上げる設定 (UR44C版)](https://qiita.com/igapyon/items/b93dd4a51b098f292169)
* [Windows 10 の出力音質を引き上げる設定 (Rubix22版)](https://qiita.com/igapyon/items/000ceb2961b88ff185be)
PHP変数ターミナル出力方法



index.phpファイルの
$nameにkanaを代入します！
 . で文字列を結合し、PHP_EOLで改行します！


```php:index.php
<?php
$name = 'kana';
echo '私の名前は' . $name . 'です' . PHP_EOL;
```


ターミナルに以下のコマンドを入力します。


```php
~$php index.php
```

ターミナルにこのように出力されます！

```
~$ php index.php
私の名前はkanaです
~$
```
slack で ワークスペース から メンバーを削除したり、招待メールを再送する方法

#対象

slack で ワークスペース から メンバーを削除したり、
招待メールを再送しようとして
>
ワークスペース名を右クリック → 設定と管理 → メンバーを管理する

としようとしたが、

>ワークスペース名を右クリック  → その他管理項目 → ？？？

となって出来ない方

#対応

管理者権限がないので、管理者とオーナーに連絡

##参考
https://[ワークスペース名].slack.com/account/workspace-settings
 にアクセスすると、ワークスペースの　管理者とオーナー　が出ます
Pythonのfor文まとめ


## はじめに

Pythonのfor文は(C言語などの記法を参照している多くの言語とは異なり)少し特殊なため，様々なPythonのfor文をまとめてみます。

※ 本記事は，Python初心者の方にPythonicなコードを知ってもらいたいという目的で書いています。それなりにPythonに詳しい方には新たな発見はないかと思います。予めご了承ください。

## 一番基本

Pythonのforは他の言語で言うforeachのような感じで，リスト(など)から要素を一つずつ取り出して処理するイメージです。

例えば

```python
for i in [0, 1, 2, 3, 4]:
  print(i)
```
実行結果:

```
0
1
2
3
4
```

まあこれなら普通は

```python
for i in range(5):
  print(i)
```
と書きますね

## インデックスと要素を同時に取得する

例えば，

```python
s = 'spam'
for i in range(len(s)):
  print(i, s[i])
```
のようなコードは，組込み関数`enumerate`を使って

```python
s = 'spam'
for i, c in enumerate(s):
  print(i, c)
```
というように書くことができます。

実行結果:

```
0 s
1 p
2 a
3 m
```

## 複数のリストを扱う

### 複数のリストを同時にイテレートする

同じインデックスで複数のリストを同時にイテレートする場合には，`zip`を使って

```python
for i, j in zip(range(5), range(10, 15)):
  print(i, j)
```
という書き方ができます。

実行結果:

```
0 10
1 11
2 12
3 13
4 14
```

### 直積を利用する

リストの直積集合を利用したい場合には，for文をネストする代わりに，`itertools.product`を使って

```python
from itertools import product

for i, j in product(range(3), range(10, 13)):
  print(i, j)
```
と書くことができます。

実行結果:

```
0 10
0 11
0 12
1 10
1 11
1 12
2 10
2 11
2 12
```

## 要素を使用しない場合

複数回同じ処理をしたいが要素は要らないという場合には，アンダースコアを使って

```python
for _ in range(100):
  print('spam')
```
と書くことで要素を捨てることができます。

## dictを回す

辞書のデータのキーだけ，値だけ，あるいは両方を順番に取得したい場合はよくありますが，この場合はそれぞれ

```python
menu = {
  1: 'spam',
  2: 'ham',
  3: 'egg'
}

# キーだけ
for num in menu.keys():
  print(num)

# 値だけ
for item in menu.values():
  print(item)

# 両方
for num, item in menu.items():
  print(num, item)
```
と書けます。

実行結果:

```
1
2
3
spam
ham
egg
1 spam
2 ham
3 egg
```

## イテレータを実装する

自分で実装したクラスをイテレータとして利用したい場合には，`__next__()`と`__iter__()`を実装します。
例として，指定された個数だけフィボナッチ数列を返すクラスを示します。

```python
class Fibonacci():
  def __init__(self, cnt):
    self.n0 = 0
    self.n1 = 1
    self.cnt = cnt

  def __iter__(self):
    return self

  def __next__(self):
    if self.cnt == 0:
      raise StopIteration()

    self.n0, self.n1 = self.n1, self.n0+self.n1
    self.cnt -= 1
    return self.n0

for f in Fibonacci(5):
  print(f)

```

実行結果:

```
1
1
2
3
5
```

## for-else

私もいまいち遣いどころを把握していないのですが，

```python
for item in items:
  # なんか処理1
else:
  # なんか処理2
```
という構文を紹介します。
「なんか処理1」は通常のfor文のように処理され，この中で`break`が使用されるとすべて終了します。
しかし，`break`が使われずにループが終了した場合には「なんか処理2」が実行されます。


簡単な具体例を挙げると

```python
def is_prime(n):
  for i in range(1, n):
    if n % i == 0:
      print(f'{n}は合成数です')
      break
  else:
    print(f'{n}は素数です')
```
みたいな感じですかね
(この場合は早期リターンでいいので例として微妙ですが，文法の説明ということでご容赦ください)

## さいごに

[『エキスパートPythonプログラミング』](https://www.kadokawa.co.jp/product/302105001236/)を読みましょう。
【Android】画像をピンチイン・アウト

Kotlinで書かれているコードが見つからなかったのでメモ。

```CustomImageView.kt
class CustomImageView : View {
	constructor(context: Context) : super(context)
	constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)
	constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)

	private var bitmap: Bitmap? = null
	private val bitmapMatrix = Matrix()
	private val paint = Paint()

	// ピンチイン/アウト時、画像を拡大/縮小
	private val scaleGestureDetector by lazy {
		ScaleGestureDetector(context, object : SimpleOnScaleGestureListener() {
			private var scale = 1f
			override fun onScaleBegin(detector: ScaleGestureDetector?): Boolean {
				scale = 1f
				return super.onScaleBegin(detector)
			}

			override fun onScale(detector: ScaleGestureDetector): Boolean {
				val deltaScale = detector.scaleFactor / scale
				bitmapMatrix.postScale(deltaScale, deltaScale, detector.focusX, detector.focusY)
				scale = detector.scaleFactor
				invalidate()
				return super.onScale(detector)
			}
		})
	}

	//スクロール時、画像を移動
	private val gestureDetector by lazy {
		GestureDetector(context, object : SimpleOnGestureListener() {
			override fun onScroll(e1: MotionEvent, e2: MotionEvent, distanceX: Float, distanceY: Float): Boolean {
				if (e1.getPointerId(0) == e2.getPointerId(0)) {
					bitmapMatrix.postTranslate(-distanceX, -distanceY)
					invalidate()
				}
				return super.onScroll(e1, e2, distanceX, distanceY)
			}
		})
	}

	@SuppressLint("ClickableViewAccessibility")
	override fun onTouchEvent(event: MotionEvent): Boolean {
		return gestureDetector.onTouchEvent(event) || scaleGestureDetector.onTouchEvent(event) || super.onTouchEvent(event)
	}

	override fun onDraw(canvas: Canvas) {
		bitmap?.let { bitmap ->
			canvas.save()
			canvas.drawBitmap(bitmap, bitmapMatrix, paint)
			canvas.restore()
		}
	}

	/**
	 * ビットマップをセット
	 *
	 * @param bitmap ビットマップ
	 */
	fun setBitmap(bitmap: Bitmap?) {
		if (bitmap != null) {
			this.bitmap = bitmap
			val mScaleFactor = min(width.toFloat() / bitmap.width, height.toFloat() / bitmap.height)
			bitmapMatrix.setScale(mScaleFactor, mScaleFactor, 0f, 0f)
		}
	}
}
```

参照記事：https://qiita.com/Cyber_Hacnosuke/items/b2a8724218d2f4a4c3c2
Next.jsで静的サイトをサブディレクトリにデプロイしたいときの設定

Next.jsでは、ビルド&エクスポートで生成した静的サイトを、FTPなどでドメインのルートディレクトリではなく、サブディレクトリにデプロイすると、様々なパスがずれて表示が崩れてしまいます。

`https://ドメイン名/〇〇/` のような階層に Next.js をデプロイするための設定方法をまとめます。

1. basePathの設定
2. assetPrefixの設定
3. publicRuntimeConfigを使って、画像やリンクのパスを設定


## basePath の設定
`next.config.js` の中にサブディレクトリの設定を追記していきます。

開発環境ではルートディレクトリ、本番環境ではサブディレクトリ配下というように、環境によって分岐できるように設定していきます。

```next.config.js
/* 公開時のサブディレクトリ */
const SUB_DIRECTORY = "/sub_directory";

/* 本番環境と開発環境の分岐用のフラグ */
const isProd = process.env.NODE_ENV == "production"

module.exports = {
  // 本番環境では SUB_DIRECTORY それ以外は空欄
  basePath: isProd ? SUB_DIRECTORY : "",
}
```

これでアプリ全体のパスプレフィックスを設定することができますが、これだけではCSSやJSなどのアセットファイルのパスがずれたままです。

## assetPrefix の設定
アセットファイルのパスを修正するために、`next.config.js` の `module.exports` 内に `assetPrefix` を設定していきます。

```next.config.js
module.exports = {
  // 本番環境では SUB_DIRECTORY それ以外は空欄
  assetPrefix: isProd ? SUB_DIRECTORY : "",
}
```

これでJSやCSSのパスが正常に読み込まれます。

## publicRuntimeConfigを使って、画像やリンクのパスを設定
コンポーネント内の `img` タグや `Link` タグで設定したパスも、設定ファイルをもとに開発環境と本番環境でルートパスの出し分けができるように改修していきます。

Reactコンポーネント内で `next.config.js` の設定値を呼び出せるように、まずは `publicRuntimeConfig` を設定します。

```next.config.js
module.exports = {
  publicRuntimeConfig: {
    basePath: isProd ? SUB_DIRECTORY : "",
  }
}
```

これで、コンポーネント側から `publicRuntimeConfig.basePath` を参照できるようになります。

```SomeComponent.tsx
import getConfig from "next/config";
import Link from "next/link";

const { publicRuntimeConfig } = getConfig();

export const SomeComponent = () => {
  // jsxで設定する各パスの前にこの basePath を入れる
  const basePath = (publicRuntimeConfig && publicRuntimeConfig.basePath) || "";

  return (
    <div>
      <img src={`${basePath}/vercel.svg`} alt="Vercel Logo" />
      <Link href="/about" as={`${basePath}/about`}>
        <a>リンク</a>
      </Link>
    </div>
  );
}
```
Linkタグの場合は、動的ルーティングの `as` を使用します。

https://nextjs.org/docs/tag/v9.5.2/api-reference/next/link#dynamic-routes

静的エクスポートをするので `next/image` の Imageタグは使用できません。

以上の設定で、開発環境と本番環境でアプリのディレクトリを出し分けすることができるようになりました。

確認として、開発時は `next dev` で `localhost:3000`で、
本番環境のローカルでの確認は、`next build && next export` で書き出したあとに、 `next start` で `localhost:3000/サブディレクトリ名` で確認することができます。


```next.config.js
/* 公開時のサブディレクトリ */
const SUB_DIRECTORY = "/sub_directory";

/* 本番環境と開発環境の分岐用のフラグ */
const isProd = process.env.NODE_ENV == "production"

module.exports = {
  basePath: isProd ? SUB_DIRECTORY : "",
  assetPrefix: isProd ? SUB_DIRECTORY : "",
  publicRuntimeConfig: {
    basePath: isProd ? SUB_DIRECTORY : "",
  },
  // ...
}
```
[Laravel6] Cache-Control レスポンスヘッダーをdefaultから変更

:::note warn
確認環境 : Laravel Framework 6.20.4
:::

Laravelでは、Cache-Controlのレスポンスヘッダーはdefalutで下記になっています。

:::note info
no-cache private
:::

`no-cache`ではなく、 `no-store` に変更したい場合、新たにmiddlewareを追加すれば変更する事ができます。

```php:コマンド
php artisan make:middleware ChangeHeader
```

```php:app/Http/Middleware/ChangeHeader.php
class ChangeHeader
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        $response = $next($request);

        $response->header('Cache-Control', 'no-store, private');
        return $response;
    }
}
```
アプリケーションの全HTTPリクエストに適用。

```php:app/Http/Kernel.php
    protected $middlewareGroups = [
        'web' => [
...
            \App\Http\Middleware\ChangeHeader::class, <= 追加
        ],
...
    ];
```
GitとGitHubの使い方についてのメモ1（自分なりの解釈）～Gitの役割と登録編～

#Gitについてのイメージ
GitHubに触れる前にGitというものについて書きます
Gitとは自分がファイルを作成したり既存のファイルに変更したりしたことを記録しておいてくれるバージョン管理システムです。
バージョン管理システムのその名前どうり「ファイルを変更する前に戻したい！！！」と思ったときに戻せたりできます。
#リポジトリ、ローカルリポジトリについて
###リポジトリ
まずリポジトリとはファイルの変更を加えていく元のファイル(ソースファイル)の保管場所のことをいいます
###ローカルリポジトリ
ローカルリポジトリとは自分の手元でファイルに対して作業を行っていてその変更内容などを自分のところで管理しておくリポジトリのことを言います<br>

つまりリポジトリが変更を記録しておく保管場所でその場所が自分の作業しているところならそのリポジトリはリモートリポジトリということになります

#Git、GitHub,リポジトリ,ローカルリポジトリのまとめ
- Gitとは作業した内容を記録できるバージョン管理システムのこと

- リポジトリとは作業を行うもとになるファイルの管理と変更を行ったときのことを記録する保管場所


- ローカルリポジトリとは自身のパソコン内で管理しているリポジトリのことをいう<br>

![スクリーンショット 2021-11-11 175929.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2244777/d5037256-bc6f-f651-3d9c-48cc0465732b.png)

#実際にGitを使ってみる
##Gitのインストール
####Macの場合
- MacであればGitはインストール済となりますため、本作業は不要です。

####Windowsの場合
- 公式ページからインストーラーをダウンロードします。

「Next」ボタンをクリックし続け、以下の画面まで辿り着きましたら「Install」ボタンでインストールを行います。

git --versionを打ってバージョンが表示されればGitが使えるようになっています

```
$ git --version
git version 2.26.2.windows.1
```
#Gitの初期設定

Gitで変更などを記録するときに誰が行ったかをわかるようにしないといけませんなので次のコマンドで設定を行います

- ユーザー名登録（ターミナルで任意の名前を入れてください）

```
git config --global user.name 任意のユーザ名
```

- メールアドレスの登録

```
git config --global user.email 任意のメールアドレス
```

最後に以下のコマンドを入力すると、上記のユーザ名とメールアドレスが登録されていることを確認できます。

```
$ git config --list
core.symlinks=false
core.autocrlf=false
color.diff=auto
 ・
 ・
 中略
 ・
 ・
user.name=設定したユーザ名
user.email=設定したメールアドレス
 ・
 ・
```

これで初期の設定は完了です
#終わり
これでGitについてとそのインストール、初期登録は終わりました
次はGitの使い方について書いていきます↓
【Go言語】ポインタ【まとめ】

# Goのポインタとは
ある変数のアドレス(メモリの番地)を示すもの。(=その変数の値がどこに格納されているかを示すもの。)

# ポインタを操作する二つの演算子(&と*)
## アドレス演算子(&)
変数名に前置することで、その値が格納されているメモリ内アドレスを取得できる。

```go
num := 5
fmt.Println(&num) // 0xc0000100a0
```

## デリファレンス演算子(*)
メモリアドレスで参照される値を取得できる。(=メモリアドレスに格納されている値を取得できる。)

```go
num := 5
address := &num 
fmt.Println(address)  // 0xc000100010 参照先見る
fmt.Println(*address) // 5 デリファレンスしてメモリに格納されている値を見る
```

後述のポインタ型をデリファレンスすることで値の書き換えもできる。

```go
var lang *string

mainLang := "Go"
lang = &mainLang
fmt.Println(*lang) // Go

*lang = "C#" // デリファレンスしてメモリ先の値を変更
fmt.Println(*lang) // C#
```

# ポインタ型
ポインタ型は、型名に*を前置して宣言することができる。
ポインタ型の変数には、指定した型の変数のへのポインタを表現できる。

※型の前に * が置かれればポインタ型であり、変数名の前に置かれればデリファレンス演算子である。

```go
var text *string // *string型の変数text

text := "test text"
address := &text
fmt.Println(*address) // デリファレンス演算子
```

# 自動的なデリファレンス
構造体や配列では、複合リテラルにアドレス演算子&を前置できる。
その値を利用する際はデリファレンス演算子*なしで、自動でデリファレンスされる。
下記のように構造体のフィールドを参照する際も、構造体自体を参照する際も、デリファレンスを明示的に行っていない。

※感覚としてはC#等の参照型のように使うことができる。
値を格納している場所を指すポインタ型と参照型は似ている。

```go
type person struct { 
    name, superpower string 
    age              int 
}

timmy := &person{ 
    name: "Timothy", 
    age:  10, 
}
timmy.superpower = "flying" 
fmt.Printf("%+v\n", timmy) // &{name:Timothy superpower:flying age:10}
```
【React】propsでemotionのスタイルを受け取る際の型定義

## はじめに
propsでemotionスタイルを受け取る際に、propsに対して型定義を行う際に
気づいたことがあったので学習記録としてメモ

## 環境

```json
"react": "^17.0.1"
"@emotion/react": "^11.4.1"
```

## emotionのスタイルの型
emotionのスタイルの型はemotionで定義されています。
`SerializedStyles`をimportして型定義してあげるとpropsでemotionのスタイルを受け取ることができます。

```ts:node_modules/@emotion/utils/types/index.d.ts
// Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
// TypeScript Version: 2.2

~~ 省略 ~~

export interface SerializedStyles { // <= これ
  name: string
  styles: string
  map?: string
  next?: SerializedStyles
}
```

## いままでの型定義例


```tsx:Text.tsx

import { SerializedStyles, jsx, css } from '@emotion/react'

type Props = {
  cssStyle: SerializedStyles
}

export const Text = (props: Props) => {
  const { cssStyle } = props

  const textStyle = css`
    color: red;
    ${cssStyle}
  `
  return <p css={textStyle}>style定義</p>
}

```

```tsx:TextBox.tsx

import { css } from '@emotion/react'
import { Text } from './Text'

const TextBox = () => {
  const textStylePrimary = css`
    border: 1px solid blue;
  `

  const textStyleSecondary = css`
    border: 2px solid black;
  `

  return (
    <div>
      <Text cssStyle={textStylePrimary} />
      <Text cssStyle={textStyleSecondary} />
    </div>
  )

}
```

## 気づいたこと
`SerializedStyles`ですべてprops型定義するとEmotionに依存してるのではということに気づく。
*　jsxでcss propsを使っている時点で依存していますが、それはまた別の機会に修正します。

`SerializedStyles`をType共通で定義してあげて、変更に耐えうるように変更する

## 変更版
Type定義用のファイルで適応させます。
そうすると、もしcss in jsライブラリを置き換えた時に、定義ファイルの中身を変えるだけで型定義は変えれるので
今後はこの形で良さそう

```ts:types/style.ts
import { SerializedStyles } from '@emotion/react'
export type StyleType = SerializedStyles
```

```tsx:Text.tsx

import { jsx, css } from '@emotion/react'
import { StyleType } from '../types/style'

type Props = {
  cssStyle: StyleType
}

export const Text = (props: Props) => {
  const { cssStyle } = props

  const textStyle = css`
    color: red;
    ${cssStyle}
  `
  return <p css={textStyle}>style定義</p>
}

```

```tsx:TextBox.tsx

import { css } from '@emotion/react'
import { Text } from './Text'

const TextBox = () => {
  const textStylePrimary = css`
    border: 1px solid blue;
  `

  const textStyleSecondary = css`
    border: 2px solid black;
  `

  return (
    <div>
      <Text cssStyle={textStylePrimary} />
      <Text cssStyle={textStyleSecondary} />
    </div>
  )

}
```

## おわりに
最近依存しないようになコンポーネント設計を目指してたらちょっと気づいたことがあったので執筆しました。
ふと思ったことでもあるので、何かもっとこうした方がいいよ的な意見ありましたらばんばんコメントしてもらえますと幸いです

急ですがstylex楽しみですね

## 参考
[emotion](https://emotion.sh/docs/introduction)