OmniAICreator/Qiita-1.07M huggingface dataset:
DALL·E 2が公開利用可能になったので早速使ってみた

# DALL·E 2が公開利用可能になったので早速使ってみた

## 簡単な紹介

知らない人に紹介すると、DALL·E 2はOpenAI（イーロン・マスク所有）が開発した、テキストで画像生成されるAIモデルです。昔のAIモデルと比べると、精度が高くて、違和感がない画像が生成することができます。しかもより精細な説明文を入れると、より具体的な画像が生成されます。

## 今年公開利用可能

最新AIモデルと言っても、今年ほぼ制限なく誰でも申請すれば利用できます。
https://openai.com/dall-e-2/
「WAITLIST」でフォームを記入して申請したら1日後承認されて、すぐ使えますが、もちろん無料アカウントだと用量上限があります。

## 結果は素晴らしい

### 1.

最初から一番難しいリアル風な画像生成をやってみます。
テキスト：people watching a dinosaur running on Tokyo on a sunny day
（晴れた日に東京を走る恐竜を見ている人々）

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/893830/3fa4a2d5-5023-84ee-226c-2b8c50388df8.png)

写真みたいな画像でも中々違和感がなくて、修正しなくてもすぐ使えるレベルですね。建築物と人間もちゃんと日本っぽいです。

### 2.

実際写真生成のタスクというより、イラスト生成のタスクが多いと思いますのでイラストもやってみます。
テキスト：illustration of using computer to automate cooking food in a restaurant
（コンピューターを使用してレストランで料理を自動化するイラスト）

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/893830/216f468a-e7e9-343c-0f61-eca36b46f4be.png)

左上のパソコンが煙が出ている謎の画像を除いて違和感があまりないですが、左下の画像は恐らく3D印刷のイメージで、右下の画像はパソコンで料理のプロセスを監視するイメージで、右上の画像だけ正しく自動化の概念に基づいて生成されました。これは画像生成の精度問題ではなくテキストの理解問題ですね。

### 3a.

イラストはセールス資料として良く使いますので、これもAIモデルで生成されることができたらかなりコスト削減できると思います。
説明を読むとテキスト命令で異なるスタイルの画像生成が可能なので最初にリアル風な画像生成をやってみます。
テキスト：building up trust between our company and clients
（当社とお客様との信頼関係の構築）

![3a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/893830/8c1f260d-e4ea-4e4c-4b59-209c0f7c23c0.png)

写真に見えるけど写真ではない画像が生成されました。次はイラスト風をやってみます。

### 3b.

テキスト：illustration of building up trust between our company and clients
（当社とお客様との信頼関係構築イラスト）

![3b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/893830/01273dba-a816-eac9-dbb1-f7fc85a68022.png)

やはり画像での文字生成はまだ課題ですが、アイコン自体は素晴らしくて、しかも毎回生成される画像も違いますので、本当にプレゼンテーション資料に入れてもまったく問題ないレベルですね。

### 4.

イラスト風以外に他のスタイルもいっぱいあります。今回ははがきのデザインタスクもAIに任せたくて、年賀状を作ってみます。
テキスト：a watercolor drawing of vintage Happy New Year postcard
（水彩画で描かれたヴィンテージの年賀はがき）

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/893830/59580684-7b73-6b01-6084-38cad7f0576a.png)

いい感じですね。簡単な文字なので今回はしっかりスペルのミスがなく普通に使えるはがきの画像が生成されました。日本語バージョンもできたら最高です。

### 5.

最後にアートセンスを求めるロゴのデザインで、イラストよりもう少しテキストの意味の理解と表現力を重視するタスクなので、リアル画像生成と同じく一番難しいだと思います。
テキスト：creative logo of a startup IT company in Japan focus on AI development
（AI開発に特化した日本のスタートアップIT企業のクリエイティブロゴ）

![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/893830/6795b800-a597-8f8b-5477-9380e858c4c3.png)

文字の部分を除いて、アイコンはちゃんとロゴっぽいし、配色も普通にいいレベルですね。実際に生成された画像をロゴとして使うのは法律的に問題があるかどうかはさておいて、ここまで来たらAIモデルの能力はもう間違いなく誇るしかありません。

## 最後

使ってみた感想としては、やはりテキストで絵を描く時代が来ました。今のDALL·E 2は用量で請求する仕組みで、1回の生成は20円もいかないので、先のイラスト生成・年賀状デザイン・ロゴのラフ案タスクから見ると相当安くて、イラストレーターさんの仕事が一部AIに取られても過言ではないかもしれませんね。
Kpop deepfake サイト：Cloudflare に隠れてある本当のサーバー IP 追跡

Kpop 人気アイドルの顔にエロ動画を合成した不法ディープフェイクサイトが運営されています。
クラウドフレアで隠したIPを見つけて追跡したケースがアップロードされましたので共有します。
下のブログを要約して書いたものなので、より詳しい内容はブログで確認ください。
##### 原文：https://blog.criminalip.io/ja/2022/08/05/deepfake-av/
## Kpop アイドルと日本の AV を合成した ディープフェイク エロ サイト
そのディップフェイクサイトのサーバー IP アドレス情報は Criminal IP (https://www.criminalip.io/ja) から確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2781327/4ee069c5-c51a-5797-f0ed-0480d5981c7a.png)
## Cloudflare の裏に隠れてある ディープフェイク エロ サイトの追跡
他のサイトはクラウドフレアでIPアドレスを隠して不法ディップフェイクサイトを運営しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2781327/d1a7a25d-d3e4-1ed3-b2da-1320e87c85ce.png)
下のはクラウドフレアの IP アドレスである 172.67.210.176 を Criminal IP で検索した結果です。IPアドレスの所有者が CLOUDFLARENET で、ホスティング IP も True で表記されています。また、注目するところは 連結ドメインが 245で、色んなドメインが同じクラウドフレアの IP アドレスを使っていることがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2781327/81de2fef-7dd3-1435-d965-7252d16feb2c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2781327/9d2c4894-5eee-a6ae-5392-8a53b5e1b4a5.png)
ここではこのドメインに隠されていた実のIPも確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2781327/e344a087-a7c4-e275-f474-76da3e2dea06.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2781327/81dd621d-eb47-317c-983b-6431e808f34a.png)
そのディープフェイク サイトの実 IP アドレスに対する検索結果も載せています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2781327/849671c6-2ce4-f316-65a3-de685bd7ff2c.png)
## 進化するディープフェイク技術と追いつけない追跡方法
結局、このような犯罪動画が溢れる深刻な社会的問題の原因は技術が進化するスピードに比べて規制や行政的なプロセスが追いつけないためです。様々な自動化ツールが犯罪に使われ、不法サイトが増加しているうちに、それらを検知して追跡する方法は未だに手作業で進行しています。
##### データの提供：Criminal IP（https://www.criminalip.io/ja）
##### ご参照：https://blog.criminalip.io/ja/2022/07/20/vpn-detected/
PlatformIOでTimer Camera XのサンプルWebCamを動かしてみる

前回PlatformIOでTimer Camera Xのプログラムをビルドしてみました。
今度は本来の動画を扱ってみたいのでサンプルを動かしてみます。


https://qiita.com/katsuyoshi/items/2e1929b5b89ff69f8b82

サンプルはこちらのweb_camになります。

https://github.com/m5stack/TimerCam-arduino/blob/master/examples/web_cam/web_cam.ino

前回を参考に新しくプロジェクトを作成します。
main.cppにサンプルコードをそのままコピペします。

WiFi接続のところだけ自分の環境に合わせて変更します。

```
const char *ssid     = "******";
const char *password = "******";
```

このままビルドするとエラーが出てしまいます。  
どうやらプログラムサイズがオーバーしているという事らしいです。

```
Checking size .pio/build/m5stack-timer-cam/firmware.elf
Advanced Memory Usage is available via "PlatformIO Home > Project Inspect"
RAM:   [==        ]  17.1% (used 56144 bytes from 327680 bytes)
Flash: [==========]  198.5% (used 2601194 bytes from 1310720 bytes)
Error: The program size (2601194 bytes) is greater than maximum allowed (1310720 bytes)
*** [checkprogsize] Explicit exit, status 1
================================================================= [FAILED] Took 35.09 seconds =================================================================
```

メモリサイズ設定が、Timer Camera Xの実際のサイズより小さくなっているための様で、platformio.iniに以下の行を追加します。

```
board_build.partitions = huge_app.csv
```

ついでに以下の行を追加し、シリアルのボーレートも指定します。


```
monitor_speed = 115200
```

これでビルドしてみます。
今度はうまく行きました。

```
Building .pio/build/m5stack-timer-cam/firmware.bin
esptool.py v3.1
Merged 1 ELF section
================================================== [SUCCESS] Took 34.77 seconds ==================================================
```


このままプログラムを書き込んで実行します。


```
.....
WiFi connected
Starting web server on port: '80'
Starting stream server on port: '81'
Camera Ready! Use 'http://192.168.86.23' to connect
```

シリアル出力に情報が表示され、WiFiに繋がるとWebカメラをホストしているアドレスが表示されます。
シリアルモニターの起動が遅くて見逃した場合はTimer Cameraをリセットするともう一度見れます。
リセットはLED表示下の小さな丸穴にクリップなどの細長い棒を入れてリセットボタンを押します。


ブラウザーで表示されたアドレスに接続し画面下部にあるGet Still、Start Streamボタンを押すと静止画や動画が表示されます。

![スクリーンショット 2022-08-11 19.09.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8941/c735e96e-a34e-f469-49f0-b566268c0594.png)

サイドバーで画像の解像度など選べるので色々試してみるといいです。

![スクリーンショット 2022-08-11 19.09.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8941/e841bb66-3c03-f2bf-4b19-10f15774a57f.png)



WiFiの混み具合で動画が途切れ途切れになったり最悪全く更新されない事がありましたので、ルーターを追加してパソコンとTimer Camera Xだけ繋がる様にしたら改善されました。

サンプルではAPモードのコードも入ってましたので、コメントを外してAPモードで試す方が1:1の接続になりWiFiの混み具合に影響されないかもしれないです。

```
    // If you want to use AP mode, you can use the following code
    // WiFi.softAP(ssid, password);
    // IPAddress IP = WiFi.softAPIP();
    // Serial.print("AP IP address: ");
    // Serial.println(IP);
```


## ピント合わせ

カメラのレンズがねじ込み式になっていて、回してピントを合わせる様になっています。
最初ボケ気味で不良かと思いました。
ちっちゃいので回せる事に暫く気づきませんでした。


## 謝辞

Lang-shipさんの記事が大変参考になりました。ありがとうございます。
RTCの設定例もありそのまま動かす事ができました。

https://lang-ship.com/blog/work/m5stack-timer-camera-x/
install docker on CentOS

```
sudo yum update -y
sudo yum install -y yum-utils
sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
sudo yum install -y docker-ce

sudo curl -L "https://github.com/docker/compose/releases/download/1.26.0/docker-compose-$(uname -s)-$(uname -m)"  -o /usr/local/bin/docker-compose
sudo mv /usr/local/bin/docker-compose /usr/bin/docker-compose
sudo chmod +x /usr/bin/docker-compose
```
flutter hooks で簡単に画面復帰時処理などのアプリライフサイクルを管理する

## やりたいこと
アプリがバックグラウンドから画面復帰した時などに処理を行いたい。
Swift での AppDelegate 的な。
それを `flutter_hooks` と `hooks_riverpod` を使っており `HookConsumerWidget` で実装したい場合について。

## 環境
```yaml
flutter_hooks: ^0.18.4
hooks_riverpod: ^1.0.3
```

## 実装
最近このアプリライフサイクルを管理する `useOnAppLifecycleStateChange` が公式に追加された。非常に簡単。

```dart

class TestView extends HookConsumerWidget {
  const TestView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // これ
    useOnAppLifecycleStateChange((beforeState, currState) {
      switch (currState) {
        case AppLifecycleState.resumed:
          debugPrint('LOG: バックグラウンドから復帰しました');
          break;
        case AppLifecycleState.inactive:
          debugPrint('LOG: バックグラウンドになりました');
          break;
        case AppLifecycleState.paused:
          debugPrint('LOG: 一時停止しました');
          break;
        case AppLifecycleState.detached:
          debugPrint('LOG: 終了しました');
          break;
      }
    });

    return const Scaffold(
      body: Center(
        child: Text('test'),
      ),
    );
  }
}
```

![画面収録.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516428/4889183a-efa5-73ef-67ef-76270f5f5198.gif)
GASのgmail定期処理メモ

# 自分用メモ
## GAS の作成
- https://script.google.com/home
- `新しいプロジェクト`
- スクリプト作成
    - API: https://developers.google.com/apps-script/reference/gmail/gmail-app
    - query: https://support.google.com/mail/answer/7190
- プロジェクト保存 Ctrl+S
- 上部の `Select function to run` が `deleteMails` になっているのを確認

```javascript:template
function deleteMails() {
  var queries = [
      ...
  ];
 
  for(var i=0; i < queries.length; i++){
    var query = queries[i];
    Logger.log('Start: ' + query);
    var query = '' + query + ' -is:starred'
    var threads = GmailApp.search(query);
    Logger.log('' + threads.length + ' are found');
    for (var j = 0; j < threads.length; j++) {
 　　  threads[j].moveToTrash();
    }
    Logger.log('Finish: ' + query)
  }
}
```


## 定期実行（1日毎）のルール
- GAS 作成後、左メニューバー `Triggers`
- `Add Trigger`

| Item |  |
|:-:|:-:|
| Choose which function to run | deleteMails |
| Choose which deployment should run | Head |
| Select event source | Time-driven |
| Select type of time based trigger | Day Timer |
| Select hour interval | Midnight to 1am |
| Failure notification settings | Notify me immediately |

- Save するとポップアップで許可設定が出るので許可
STM32G031とDS1307で時間合わせ(HAL)


x 過去ログを見よ
x PA_0をOBでGPIOに出来る人むけ
x STM32G031は、秋月で売っているSTM32G031J6M6の事

目的
秋月のDS1307ZN+T&R I-06950




```c++



//HAL_oled16x24_64_ds1307_set_031_1

#include "mbed.h"


#define HH  19
#define MM  28


int main()
{

    __HAL_RCC_GPIOA_CLK_ENABLE();

    GPIO_InitTypeDef GPIO_InitStruct = {0};

    GPIO_InitStruct.Pin = GPIO_PIN_11|GPIO_PIN_12;
    GPIO_InitStruct.Mode = GPIO_MODE_AF_OD;
    GPIO_InitStruct.Pull = GPIO_PULLUP;
    GPIO_InitStruct.Speed = GPIO_SPEED_FREQ_LOW;
    GPIO_InitStruct.Alternate = GPIO_AF6_I2C2;
    HAL_GPIO_Init(GPIOA, &GPIO_InitStruct);

    GPIO_InitStruct.Pin = GPIO_PIN_0;
    GPIO_InitStruct.Mode = GPIO_MODE_OUTPUT_PP;
    GPIO_InitStruct.Pull = GPIO_NOPULL;
    GPIO_InitStruct.Speed = GPIO_SPEED_FREQ_LOW;
    HAL_GPIO_Init(GPIOA, &GPIO_InitStruct);


    __HAL_RCC_I2C2_CLK_ENABLE();

    I2C_HandleTypeDef hi2c2;

    hi2c2.Instance = I2C2;
    hi2c2.Init.Timing = 0x10707DBC;
    hi2c2.Init.OwnAddress1 = 0;
    hi2c2.Init.AddressingMode = I2C_ADDRESSINGMODE_7BIT;
    hi2c2.Init.DualAddressMode = I2C_DUALADDRESS_DISABLE;
    hi2c2.Init.OwnAddress2 = 0;
    hi2c2.Init.OwnAddress2Masks = I2C_OA2_NOMASK;
    hi2c2.Init.GeneralCallMode = I2C_GENERALCALL_DISABLE;
    hi2c2.Init.NoStretchMode = I2C_NOSTRETCH_DISABLE;
    HAL_I2C_Init(&hi2c2);

    HAL_I2CEx_ConfigAnalogFilter(&hi2c2, I2C_ANALOGFILTER_ENABLE);

    HAL_I2CEx_ConfigDigitalFilter(&hi2c2, 0);


    HAL_Delay(200);

    uint8_t data_read[8];  //i2cバッファー
    data_read[0]=0;
    data_read[1]=0;
    data_read[2]= ( MM /10)*16+( MM %10);
    data_read[3]= ( HH /10)*16+( HH %10);
    data_read[4]=3;
    data_read[5]=1;
    data_read[6]=1;
    data_read[7]=0x20;

    HAL_I2C_Master_Transmit(&hi2c2, (0xD0),
                            data_read, 8, 3000);

    while(1) {

        // 1秒待つ
        HAL_GPIO_WritePin(GPIOA, GPIO_PIN_0, GPIO_PIN_SET);
        HAL_Delay(500);
        HAL_GPIO_WritePin(GPIOA, GPIO_PIN_0, GPIO_PIN_RESET);
        HAL_Delay(500);

    }//while

}//main




```
[静的解析 x PHP]気軽に静的解析をするために"phpstan"と"phan"をDockerで実行する手順をまとめる


# phpstan

https://github.com/phpstan/phpstan

#### 実行コマンド

``` .sh
docker run -v `pwd`:/app -w /app ghcr.io/phpstan/phpstan analyse {解析対象のディレクトリ}
# (例)docker run -v `pwd`:/app -w /app ghcr.io/phpstan/phpstan analyse backend/packages

# ターミナル上でなく、テキストファイルに出力したい場合
docker run -v `pwd`:/app -w /app ghcr.io/phpstan/phpstan analyse {解析対象のディレクトリ} > phpstan.txt
```

##### ▼動作確認
以下を実行してバージョンが表示されれば実行可能な状態

``` .sh
docker run -v `pwd`:/app -w /app ghcr.io/phpstan/phpstan analyse -V
> PHPStan - PHP Static Analysis Tool 1.6.7
```

>参考：公式サイト：https://phpstan.org/user-guide/docker

# phan
https://github.com/phan/phan

[phan/docker](https://github.com/phan/docker)を使用します。

(追記)こっちでもできそう。
https://hub.docker.com/r/cloudflare/phan/

phpstanとは違い、少し準備が必要です。

>**【事前準備】**
>1. 解析対象のソースコードのルートディレクトリに内に.phanディレクトリを作成
>1. config.phpファイルとlogディレクトリを作成
>1. config.phpで解析設定を行い、logディレクトリに解析結果が出力される

#### 実行コマンド

``` .sh
docker run -v `pwd`:/mnt/src -v `pwd`/.phan/log:/mnt/log phanphp/phan -po /mnt/log/analysis.txt
```

>参考
https://github.com/phan/phan/wiki/Getting-Started#from-a-docker-image
https://zenn.dev/big_tanukiudon/articles/9d3eead9ef49c4

# さいごに
composerでインストールせず、別で環境を作って実行できるので「静的解析をちょっと試してみたい」というときに良いのかなと思います。

psalmについても同様の方法でできないか色々やってみたのですが現時点ではできていません！
良い方法をご存知の方がいたらコメントください :bow: 
方法1「psalm.pharをインストールして実行する方法」
方法2「composerコンテナを作ってpsalmをインストールして実行する方法」

それでは！
marpで数式を書くときの式番号とギリシャ文字の太文字化

## 概要

vscodeにてmarpで数式が登場するスライドを作成しているときに
- 式番号の書き方
- thetaやetaなどのギリシャ文字の太文字化

がわからなかったのでメモ

## 前提知識

### 環境について

marp(in vscode)には、`Math Typesetting`という設定項目がある

デフォルトで`katex`、他の選択肢には`mathjax`がある

### 記法について

自分が普段使いしているのは`platex`なので下記だと思ったが違った。
（そもそもplatexでもギリシャ文字の太文字化は`\mathbf`じゃできないかも？）

```tex
$$
% 式番号
y = 3x \eqno(1.1)
$$
$$
% ギリシャ文字の太文字化
\mathbf{\theta}
$$
```
## 本題
綺麗にできるのは`mathjax`ぽい、`katex`はなぜか下に出力されてしまう。

### katex

```tex

$$
% 式番号
\tag{1.1} y = 3x
$$
$$
% ギリシャ文字の太文字化
\bm{\theta}
$$
```
![スクリーンショット 2022-08-11 19.17.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176375/4802d7c9-ab17-0c3e-0d8e-7d8841d7449a.png)

### mathjax

```tex
$$
% 式番号
\tag{1.1} y = 3x
$$
$$
% ギリシャ文字の太文字化
\boldsymbol{\theta}
$$
```
![スクリーンショット 2022-08-11 19.16.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176375/fb8d7a9c-0b24-3abb-0248-7f4cfba873ba.png)

# 参考リンク
- 数式の記述 - MathWills https://www.mathwills.com/katex
- Twitter https://twitter.com/shima__shima/status/786133427326029824
SuperResolutionのStateOfArt SwinIR

# 画像をきれいにアップスケール

SwinIRを使います。

https://github.com/JingyunLiang/SwinIR.git

元画像

![spencer-chow-6W-MS6havNk-unsplash (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/5675cf27-0b66-3f58-e9f4-9f789e64d7a5.jpeg)

結果（４倍スケール）

![spencer-chow-6W-MS6havNk-unsplash (1)_SwinIR.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/abdb2655-4122-02d1-00cf-0fe4e54a3380.png)


# 使い方

・SwinIRのリポジトリをクローン、
・事前トレーニング済みモデルをダウンロード、
・画像フォルダを指定して実行します。

```shell
git clone https://github.com/JingyunLiang/SwinIR.git
cd SwinIR
pip install timm
wget https://github.com/JingyunLiang/SwinIR/releases/download/v0.0/003_realSR_BSRGAN_DFOWMFC_s64w8_SwinIR-L_x4_GAN.pth -P model_zoo

python main_test_swinir.py --task real_sr --scale 4 --large_model --model_path model_zoo/003_realSR_BSRGAN_DFOWMFC_s64w8_SwinIR-L_x4_GAN.pth --folder_lq path_to_your_image_directory
```

# たくさんのトレーニング済みモデルが提供されている

ノイズ除去など、さまざまなデータセットでトレーニングされたSwinIRモデルが提供されており、好きなモデルを使えます。

https://github.com/JingyunLiang/SwinIR/releases/tag/v0.0

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

Core MLやARKitを使ったアプリを作っています。
機械学習／AR関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
[GitHub](https://github.com/john-rocky)
ReactNativeDebuggerが使えなくて詰んだ話。（expo）

# 【概要】
個人アプリ開発をexpoを使用して開発を進める中でReactNativeDebuggerを使用し、デバッグを行おうとするとReactNativeDebuggerがエラーを出し、全くデバッグできなくて詰んでました。

# 【環境】
- Mac：Monterey（12.0.1）
- Expo：5.2.0
- Xcode（Simulator）：13.2
- ReactNativeDebugger：0.12.1

# 【エラーについて】
- expoでアプリを作成し（jsのみでもTypescriptでもどちらでも良い）、`yarn start`コマンドでアプリを立ち上げる。
この時点ではまだデバッグ機能をONにしていないので、エラーも特に起こらずアプリは起動する。
- アプリが立ち上がったらReactNativeDebuggerを起動し、アプリが起動したポートでReactNativeDebuggerも立ち上げておく
- 次にアプリでデバッグ機能をONにしたところ、Chromeが立ち上がり、以下のエラーメッセージが出る
（※本来であればこの時点でReactNativeDebuggerがアプリを読み込みデバッグが可能となる）
![スクリーンショット 2022-08-10 12.43.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/276e7af8-7ae3-43b5-be95-2981d7733bc8.png)
- どうやらDebuggerに接続する前に切断されているらしい…。
- またDebuggerの方は…
![スクリーンショット 2022-07-17 18.49.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/3310e007-e2d6-6182-e0cb-3d0a56e6fa6d.png)
- 同じようなエラーが出ていることが確認できる。
- デバッグ機能をONした状態だとアプリも立ち上げることができなくなっている。

このあと、アプリの再起動、キャッシュのクリアなど色々試してもうまくできず詰んでました。

# 【解決方法】
### 結論：expoのバージョンアップをすることで解決✨

# 【解決方法】
#### ①`yarn global add expo-cli expo-cli`コマンドを実行
#### ②アプリのディレクトリで`expo upgrade`コマンドを実行
#### ③ReactNativeDebuggerはアプリが立ち上がったポートで立ち上げておく（今回の場合であれば19000）
#### ④最後にいつも通り`yarn start`コマンドでアプリを立ち上げる
#### ⑤アプリが立ち上がったらデバッグをONにする
#### ここで無事Debuggerが使えたらお疲れ様でした
expoでTypescriptが使えず詰んだ話

# 【概要】
個人アプリ開発をしているときに、既存で作っていたアプリ（js/jsxファイルのみ）をTypescriptを用いて実装しようとしたときに、
Typescriptのファイルがあると上手くビルドができなかった話。
またjsで雛形を作ったアプリでも、はじめからTypescriptを選択したアプリでもどちらでもうまくビルドができませんでした。
※今回はアプリの雛形を作る際にはじめからTypescriptを用いて開発することを前提に進めますが、既存でTypescriptを用いてなく、これからTypescriptを導入する方も解決方法は同じになります。

# 【環境】
- MacBookPro(M1Pro)
- OS(Monterey / 12.0.1)
- node: 16.14.0
- yarn: 1.22.17
- expo: 5.2.0
- expo Cli: 5.2.0

① `expo init アプリ名`でアプリの雛形を作成
② jsかTypescriptで作るか聞かれるのでTypescriptを選択
![スクリーンショット 2022-08-10 17.08.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/5527996b-3273-761d-d936-ad6e5a537c85.png)

③無事アプリの雛形ができる
![スクリーンショット 2022-08-10 17.10.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/640e471c-50ca-fc05-5e85-6d2f973df478.png)

⑤`yarn start`コマンドでアプリを起動する。するとtypescriptで必要なものがないのでインストールするように言われるので`Y`を押してインストールをする。
![スクリーンショット 2022-08-10 17.12.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/a9c6a70a-e422-a6d8-db13-d027a46fc068.png)

⑥このまま起動するかと思うと起動しない。エラーが出る。
![スクリーンショット 2022-08-10 17.13.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/eb60cb7d-0c8f-a5bb-671a-7d70ec79b74c.png)

※再度③の`yarn start`からやっても③〜⑥をループするだけでした。

## 補足
- `yarn add --dev @types/react@~17.0.21`コマンドでインストールしたものはできているようです。
![スクリーンショット 2022-08-10 17.46.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/2d897b00-cea3-a2c3-a73c-49bb0fef798b.png)

# 【解決方法】
結論：expoのバージョンアップをすることで解決しました。

①`yarn global add expo-cli expo-cli`コマンドを実行
②アプリのディレクトリで`expo upgrade`コマンドを実行
④最後にいつも通りyarn startコマンドでアプリを立ち上げる
⑤アプリが立ち上がったらお疲れ様でした
STM32G031のmbed-osでの時計,DS1307で時刻表示OLED(秋月の0.96 128x64)(HAL)


x 過去ログを見よ
x 時間合わせは、別
x PA_0をOBでGPIOに出来る人むけ
x STM32G031は、秋月で売っているSTM32G031J6M6の事
x SMALL_HAL_SSD1308_128x64_I2Cのライブラリを入れてください。


目的
OLEDのテスト
秋月の0.96 128x64(OLED) P-15870
秋月のDS1307ZN+T&R I-06950



![o_con650.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/67827e65-8eba-0214-cd84-898662e94307.jpeg)



改造元


https://os.mbed.com/users/wim/code/SSD1308_128x64_I2C/


忙しい人よう


あいうえお


```c++



//HAL_oled_16x24_031_1


#include "mbed.h"
#include "SSD1308.h"


int main() {

    __HAL_RCC_GPIOA_CLK_ENABLE();

    GPIO_InitTypeDef GPIO_InitStruct = {0};

    GPIO_InitStruct.Pin = GPIO_PIN_11|GPIO_PIN_12;
    GPIO_InitStruct.Mode = GPIO_MODE_AF_OD;
    GPIO_InitStruct.Pull = GPIO_PULLUP;
    GPIO_InitStruct.Speed = GPIO_SPEED_FREQ_LOW;
    GPIO_InitStruct.Alternate = GPIO_AF6_I2C2;
    HAL_GPIO_Init(GPIOA, &GPIO_InitStruct);

    GPIO_InitStruct.Pin = GPIO_PIN_0;
    GPIO_InitStruct.Mode = GPIO_MODE_OUTPUT_PP;
    GPIO_InitStruct.Pull = GPIO_NOPULL;
    GPIO_InitStruct.Speed = GPIO_SPEED_FREQ_LOW;
    HAL_GPIO_Init(GPIOA, &GPIO_InitStruct);


    __HAL_RCC_I2C2_CLK_ENABLE();

    I2C_HandleTypeDef hi2c2;

    hi2c2.Instance = I2C2;
    hi2c2.Init.Timing = 0x10707DBC;
    hi2c2.Init.OwnAddress1 = 0;
    hi2c2.Init.AddressingMode = I2C_ADDRESSINGMODE_7BIT;
    hi2c2.Init.DualAddressMode = I2C_DUALADDRESS_DISABLE;
    hi2c2.Init.OwnAddress2 = 0;
    hi2c2.Init.OwnAddress2Masks = I2C_OA2_NOMASK;
    hi2c2.Init.GeneralCallMode = I2C_GENERALCALL_DISABLE;
    hi2c2.Init.NoStretchMode = I2C_NOSTRETCH_DISABLE;
    HAL_I2C_Init(&hi2c2);    

    HAL_I2CEx_ConfigAnalogFilter(&hi2c2, I2C_ANALOGFILTER_ENABLE);

    HAL_I2CEx_ConfigDigitalFilter(&hi2c2, 0);


HAL_Delay(200);


    SSD1308 oled = SSD1308( &hi2c2 , SSD1308_SA0);


    uint8_t data_read[7]; //リードバッファー
    uint8_t n1_8[8]; //バッファー


    int oo=0; //リセット対策

    //HAL_I2C_Master_Transmit(&hi2c2, (0xD0)     , (uint8_t*)"\000\001\001\001", 4, 3000);


    while(1) {


//data_read[2] = 0x12;
//data_read[1] = 0x32;
//data_read[0] = 0x45;



        //時間の読み込み
        HAL_I2C_Master_Transmit(&hi2c2, (0xD0)     , (uint8_t*)"\000", 1, 3000);
        
        HAL_I2C_Master_Receive( &hi2c2, (0xD0) | 1 , data_read,        7, 3000);



        //温度の表示
        n1_8[0]= '0'+(data_read[2] >> 4);
        n1_8[1]= '0'+(data_read[2] & 0xf);
        n1_8[2]= '.';
        n1_8[3]= '0'+(data_read[1] >> 4);
        n1_8[4]= '0'+(data_read[1] & 0xf);
        n1_8[5]= '.';
        n1_8[6]= '0'+(data_read[0] >> 4);
        n1_8[7]= '0'+(data_read[0] & 0xf);
        for(int nn=0; nn<8; nn++) {
            //                y   x
            oled.writeBigChar(0, nn*16,n1_8[nn]);
        } //for


        //リセット対策
        oo++;
        if(oo >= 3) {
            HAL_I2C_Master_Transmit(&hi2c2,SSD1308_SA0,
             (uint8_t*)"\200\215\200\024\200\257", 6, 3000);
            oo=0;
        } //if

         // 1秒待つ
         HAL_GPIO_WritePin(GPIOA, GPIO_PIN_0, GPIO_PIN_SET);
         HAL_Delay(500);
         HAL_GPIO_WritePin(GPIOA, GPIO_PIN_0, GPIO_PIN_RESET);
         HAL_Delay(500);
  
    }//while

}//main





```
PHPの構文省略形まとめ

うっすっす。豚野郎です

今回はPHPの省略構文形を書いていこうと思います。
前から知ってはいるんですけど、たまに読んでて「ん？」ってなったりすることがあるので
ここでまとめておこうと思います。

・バージョン：PHP 7.4.29

## 1. echo
普通のechoの書き方は以下の様な形です。
```echo.php
<?php
    echo 'テストです。';
```

結果
```
テストです。
```

PHP タグの終了タグ `?>` は省略することもできます。

```php:echo.php
<?php
    echo 'テストです。';
```

結果
```
テストです。
```
公式でも省略が推奨されているみたいですね。

また、省略構文形を使うと以下のようにも書けます。
```echo.php
<?='テストです。'?>
```

結果
```
テストです。
```

主にhtml内にPHPを埋め込む時に使われる記法です。

## 2. if文
①. コロンを使う方法
```if.php
<?php
$test = 'test';

if ($test === 'test') :
    echo 'test';
else :
    echo '違うよ';
endif;
```

結果
```
test
```

htmlに埋め込む時は以下の様な書き方もできます。
```if.php
<?php $test = 'test'; ?>
<?php if ($test === 'test') : ?>
    <?=$test?>
<?php else : ?>
    <?='違うよ'?>
<?php endif; ?>
```

結果
```
test
```

②. 三項演算子
以下の様な書き方です。
```
(条件式) ? (真式) : (偽式);
```

```if.php
<?php
    $test = 'test';
    $result = ($test === 'test') ? 'test' : '違うよ';
    echo $result;
```

結果
```
test
```

条件式の()は省略ができます。
```if.php
<?php
    $test = 'test';
    $result = $test === 'test' ? 'test' : '違うよ';
    echo $result;
```

結果
```
test
```

③. {}省略
```if.php
<?php
    $test = 'test';
    if ($test === 'test')
        echo 'test';
    elseif($test === 'test' ||$test === 'aaa')
        echo '違うよ';
```

結果
```
test
```

## 3. 参考
ありがとうございました。
https://agohack.com/php-omitting/
IMa3がインストールできない

Gene flowを加味した系統推定などを行う[IMa3](https://github.com/jodyhey/IMa3)をインストールしようとしたらうまくいきませんでした。

gitのレポジトリを
```bash
git clone https://github.com/jodyhey/IMa3.git
```
でローカルにコピーして
```bash
make
```
したら以下のエラーが出ました：
```
--------------------------------------------------------------------------
The Open MPI wrapper compiler was unable to find the specified compiler
x86_64-conda-linux-gnu-cc in your PATH.

Note that this compiler was either specified at configure time or in
one of several possible environment variables.
--------------------------------------------------------------------------
```
mpiccがなかったようなので
```
conda install openmpi-mpicc
```
でmpiccをインストールしてmakeしたらうまくいきました。
【Docker】勉強したことをまとめる

## Dockerデーモン

- Dockerの常駐型プログラム
  - 常駐型プログラムとは
    - OSの起動時などに自動的に実行され、常に動作し続けるソフトウェアのこと
- コンテナやイメージの作成などの操作命令を受け取り、実際の処理を行う



## バインドマウント

- Dockerデーモンが動作しているOS上のファイルをコンテナに共有する機能

- 使い方

  - ソフトウェアの開発時など、PCでソースコードを変更してDockerコンテナ上で実行したい場合などに、ソースコードのあるフォルダをコンテナにバインドマウントしてプログラムを実行する

  











## 参考

https://www.udemy.com/course/docker-k/
【検索力向上委員会】新人を自走できるエンジニアにした方法

## はじめに
以前、数人の新人を育てたときに上手く機能した方法を共有します。

毎回上司から「そんなに放置して大丈夫？」と言われながらも、1年以内にみんな自走できるエンジニアになったので、個人の観測範囲内では再現性高いです。

「こんな方法もあるよ！」という情報があればぜひ有益なコメント欄を構築していただきたく。

## 目次

1. [【超重要】育てる側がやってはいけないこと](#Chapter0)
1. [Google検索の各機能を使いこなす](#Chapter1)
1. [見たくないサイトをブロックするプラグインを導入](#Chapter2)
1. [最新情報っぽいものはTwitter検索](#Chapter3)
1. [公式ドキュメントを見る前に](#Chapter4)
1. [エディタの検索機能を使う](#Chapter5)
1. [know-how よりも know-who を](#Chapter6)


<!-- 各チャプター -->
<a id="#Chapter0"></a>
## 【超重要】育てる側がやってはいけないこと
- 優しい先輩として答えを教える
    - 「魚を与えず、釣り方を教えろ」というアレです。
    - 初日に検索方法を伝授してあげましょう。
    - ※緊急対応時はその限りではありません。
- 知識マウント取る
    - 百害あって一利なしです。
    - 人事がコストをかけて採用した人です。それを認識しましょう。
- 褒めない
    - 良い行動は褒めましょう。
- 怒る
    - 注意と怒るのは違います。注意してあげましょう。

<a id="#Chapter1"></a>
## Google検索の各機能を使いこなす

素晴らしい記事があったので、解説はそちらに譲ります。

https://qiita.com/dodonki1223/items/955819806297ee554b31

<a id="#Chapter2"></a>
## 見たくないサイトをブロックするプラグインを導入

Googleの検索結果がSEO対策された低信頼な記事で汚されていると問題になっていますが、若手エンジニアには "いい記事" と "悪い記事" の見分け方が分からないと思います。

"古い" 以外の理由で、参考にして失敗したサイト(間違った情報を掴まされたなど)があれば、下記のChrome拡張機能を入れて、ドンドンブロックしていくことをおすすめします。

https://chrome.google.com/webstore/detail/gossip-site-blocker/mjojhcmecfehllhcjcbhkkpohadogplk

<a id="#Chapter3"></a>
## 最新情報っぽいものはTwitter検索
- なんかAWSの動きがおかしい
- windows update したら挙動が不安定になった

などの、ホットな話題はGoogle検索をしても出てきにくいです。

そんな時は、Twitterで検索しましょう。

https://prebell.so-net.ne.jp/tips/pre_19041701.html

<a id="#Chapter4"></a>
## 公式ドキュメントを見る前に
先輩から「公式ドキュメントを読め」と言われることがあると思います。

僕もおおむね賛成なんですが、分かりにくい公式ドキュメントも多くないですか？

そんな時は、一旦QiitaとかZennとか、嚙み砕いて説明してくれているサイトを参考にしたうえで、その情報が本当に信頼していいのか確かめる用途で公式ドキュメントを見に行くといいと思います。

<a id="#Chapter5"></a>
## エディタの検索機能を使う
「答えはコードの中に」みたいなケースも多々あると思います。

そういう場合は、ソースを全文検索するほかないんですが、意外とこれをやらない人が多いので紹介します。

https://us-key-tech.hatenablog.com/entry/vscode-grep

http://www.code-magagine.com/?p=3006

他にも、使ってるエディタ・IDEで検索方法を調べてみてください。

<a id="#Chapter6"></a>
## know-how よりも know-who を
検索力が付くと、ある程度自走できるようになると思いますが、歴史の長いプロダクトなどではどうしても情報を拾えなかったり、当時の設計意図までは分からない場合もあると思います。

そんな時は、"誰にどの機能の質問をすればいいのか" を把握することが重要です。

コミット履歴や業務分掌表、ソース内のメタ情報から適切な質問相手を見定めましょう。

## まとめ
この記事を読んで、自分の検索力を上げるのも良し、後輩にこの記事を送ってあげるのも良しです！

みなさん、良い開発者ライフを！
【Confluence】リンクを張った画像にマウスを乗せた時、十字キーではなく手の形にしたい

## 本記事について
Confluence のページを作る際、掲載した画像に、別ページへのリンクを張りたいことがあります。
しかし、リンクを張った画像にマウスを乗せても、マウスの形は十字キーに変わってしまうため、リンクであることが理解されにくいです。

この記事では、**画像へのマウスホバー時に、リンクだと一目でわかる「手の形」が表示される設定方法**を解説します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341404/afee3a4d-f9fa-91a0-da77-0d86c453c17a.png" width="700">
作業の所要時間は1分程度です。


## 設定手順
**Step1.** 設定を行うスペースを開きます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341404/ec375490-cef0-4d16-a055-f420befb7f4a.png" width="700">

設定前のため、リンクを張った画像にマウスホバーをしても、十字キーが表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341404/d06f138b-9e2b-7baf-ec08-35898fa435bb.png" width="700">

**Step2.** 画面左下の「スペースツール」から「ルック アンド フィール」を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341404/695bd3b5-daec-750b-2234-703e2213e70b.png" width="300">

**Step3.** 「スペースツール」の画面が開くので、「ルック アンド フィール」→「スタイルシート」と開き、「編集」ボタンを押下します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341404/0444ed91-3a20-4bc9-395f-a3e9dd15b2c6.png" width="700">

**Step4.** 「スペースのスタイルシート」に、以下のコードを貼り付け、「保存」ボタンを押下します。

```css
/*
リンクを張った画像にマウスホバー時、十字キーではなく手の形を表示する
*/
div.wiki-content a img.confluence-embedded-image{  
  cursor: pointer;  
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341404/e9ca77d5-8900-31b2-d396-bf851252eff4.png" width="700">

**ヒント**：リンクを**張っていない**画像に対しても、マウスホバー時に手の形を表示させたい場合は、
以下のように a タグの指定を外します。
```css
/*
変更前: div.wiki-content a img.confluence-embedded-image
変更後: div.wiki-content   img.confluence-embedded-image　← 真ん中のaタグを除いた！
*/
div.wiki-content img.confluence-embedded-image{  
  cursor: pointer;  
}
```

**Step5.** ページに戻り、リンクを張った画像にマウスホバーをすると、手の形になっています！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341404/787b5806-c0d1-7d39-20c3-621fe386b6a2.png" width="700">

**リンクであることが分かりやすくなり、アクセシビリティが高まったと思います。**



## 解説
**Confluence では、独自の CSS を設定することで、ページの見た目をカスタマイズすることができます。**
今回は、`リンクを張った画像へのマウスホバー時は、マウスのアイコンを手の形にする`という内容の CSS を設定しました。

Confluence のスタイルシート設定については、公式ドキュメントも参照してください。

https://ja.confluence.atlassian.com/doc/styling-confluence-with-css-166528400.html

以下の方のように、設定例を公開してくださっている方もいます。
見出しのデザインを CSS で変えるというのは、面白いアイデアですね。

https://qiita.com/neuman71/items/25f8e57d2ef45eee15bf



以上です。
本記事がお役に立てれば幸いです。
Macでcommandファイル（Windowsのバッチファイルのようなもの）の第一歩

# 概要

MacでWindowsのbatファイルみたいなの作りたいけど…
**そもそもどんな拡張子のファイルを作ったらいいか**
そのレベルで分からない or 忘れた…な状態向け。

# やり方

ターミナルを開いて下記コマンド。

```shell:commandファイル作成
touch test.command
```

下記の場所にファイルが作成される。
（以降の内容はこの場所からtest.commandを移動しなかった前提です）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/fb6544fc-4660-d571-f1ff-3a5f3955c6f0.png)

作ったcommandファイルをテキストエディットで開く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/b5116183-f14a-f051-5db2-060c841d9535.png)

↓中身をこうする。
（今回はtesterという名前のフォルダーを作るだけの簡単な処理）
```shell:test.commandの中身
#!/bin/bash

mkdir tester
```

保存後、test.commandファイルをダブルクリックしても
**適切なアクセス権限がないために実行できません。**
と弾かれる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/4cd750b9-add3-8840-d3e7-9d669e04b2b8.png)

そこで、ターミナルで下記コマンド実行。

```shell:test.commandに実行権限を与えてあげる
chmod u+x test.command
```

```chmod``` = アクセス権操作コマンド
```u```  = ユーザーに対して
```+``` = 与える
```x``` = 実行権限を


改めてtest.commandファイルをダブルクリックする。
すると、test.commandと同じフォルダーに『tester』という名前のフォルダーが作成される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/6e59e280-8050-9d8c-9c09-dc1d74635a9d.png)


# 参考サイトさん

https://qiita.com/Cesaroshun/items/eaf4b4e3f847062ca308

https://webrandum.net/mac-batch-file/

https://qiita.com/shisama/items/5f4c4fa768642aad9e06

# バージョン

macOS Monterey 12.4
いいね数が多い順番に並び替え

# 概要

投稿をいいねの順番に並び替えることができます。

### controller
```favorites.controller.rb
def index
    to = Time.current.at_end_of_day
    from = (to - 6.day).at_beginning_of_day
    @books = Book.includes(:favorited_users).
      sort_by {|x|
        x.favorited_users.includes(:favorites).where(created_at: from...to).size
      }.reverse
    @book = Book.new
  end
```

* いいね数が多い順に表示させるためにコントローラー内で条件を定義する
* sort_byメソッドを使っていいね数を少ない順に取り出している。最後にreverseをつけて昇順から降順に切り替えている


```
sort_by {|x|
  x.favorited_users.includes(:favorites).where(created_at: from...to).size
 }.reverse
```


### model
ユーザーの情報がfavorited_usersに格納されているため、includesの引数に入れることで、事前にユーザーのデータを読み込みしている
```favorite.rb
has_many :favorited_users, through: :favorites, source: :user
```
ゲームのワールドワイド向けPVのローカライズ問題（ゲーム開発者視点）

 ゲーム開発者としてスプラトゥーン３Direct見てて、最近のワールドワイド向けPVについて、色々苦労してそうだなと気になったことがあったのでメモがてらまとめてみる。

日本語版PV

https://www.youtube.com/watch?v=lrGvap_lXno

英語版PV

https://www.youtube.com/watch?v=aiuIZN0KDFQ

ワールドワイド同時のPVで問題になるのは、やっぱり翻訳問題。

ナレーションについては、基本的に対応方法は別音声を用意するか字幕を用意するかの２択

ゲーム開発者として気になるのは、ゲーム内のテキスト翻訳問題。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302917/ee665a5b-26b1-caac-84ae-28d36ef71bc8.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302917/fdbf0b6b-7251-3044-7219-ab21353ada47.png)

PVの構成は一緒なので基本的には同じシーンを言語設定を変えて動画編集用の素材を用意することになる。

いちばん簡単なのは、翻訳に必要なテキストが表示されない状態で撮影したシーンを使うこと、これなら同じ素材を使いまわしすることができる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302917/d1a0f31a-f6f9-0a1f-7857-1eaf0569259a.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302917/7608e51f-7ffe-58fd-247a-59d41871f57e.png)

でも、PVの性質上まったく文字なしで構成することは難しい・・・ので次が、ゲーム内のテキストを消した状態の翻訳が必要ない動画素材に対して、動画編集で翻訳テキストを後から載せる方式。これなら撮影がいちばん大変な3Dの動画素材は共通で使える。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302917/986e8597-3473-3f47-7cf1-03618b263e26.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302917/aae91ace-1294-92f8-e594-c7fe68e18e3b.png)

メニュー系のゲーム画面は比較的同じような動画素材は準備しやすいので、手動で似てるシーンを撮影することで済ませてることが多いと思う。
例えばこのシーン。よく見ると、ロッカー内配置が微妙にずれててスケボーの向きが逆だったりする。人が同じようなシーンを頑張って撮影してることが推測できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302917/df54f32f-e678-2ee2-7722-d09920fbe035.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302917/c2d59398-1f4a-20c1-b80a-48fa35c2aa64.png)



一番厄介なのは、ゲーム内のUI表示が必要で、しかもそのUIが3D的な位置を持ってるものの場合（画像だと敵を倒した位置のアイコン）
特にアクションゲームで全く同じシーンを言語別に素材を用意することはほぼ不可能。ここが一番頭を悩ませてるところだと思う

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302917/f04208d6-f6b7-6a87-4c8a-8433d1921709.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302917/7ae40b0b-c06b-14e4-d39f-af9b93ac3185.png)

驚くべきことにスプラトゥーン３Directでは、これをやってのけてる。これは推測だけど、このPV内で紹介されてたメモリープレーヤー（リプレイ）機能を使ってるんだと思う。（まず一致させることが不可能に思えるインクの塗り分け具合も全く一緒だし）リプレイ機能がしっかりとあるゲームは開発者サイドからしても、こういうPV撮影なんかではすごく重宝する。
開発中あるあるだけど、キャラの一部に変更が加わって再撮影しないといけないみたな時でもリプレイデータから再撮影することで同じシーンの最新リソースの素材を撮影することができるのですごく便利

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302917/df847d47-a23d-f183-63e3-c09a18ee4d50.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302917/6f8c1e4d-7666-8604-2069-1ee161a46e0a.png)
おそらくメモリープレイヤー機能非対応のシーンである、サーモンラン（多数のエネミーが乱数をもとに湧いてリプレイデータを作りにくい構造のゲーム）のシーンは同じようなシーンをそれぞれの言語で撮影してると思われる。なので、床の塗り分け具合とか、周りの敵の様子とかが違う。

# まとめ
スプラトゥーン３Directの映像は本当に丁寧に作ってる。ナレーションはちゃんと英語用のものを用意してるし、ゲーム画面もしっかりと言語別の素材をすべて用意している。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302917/4c1fdc4f-6b7e-8ce2-25a4-8ffafc92e7ce.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302917/3b06dda7-ce63-ce24-5fa2-1b235a86c494.png)
丁寧な仕事だなと思ったのは、ここのシーン。ナレーションで大型アップデートの発表をする瞬間なんだけど、ナレーションの翻訳で尺がずれてるのに合わせて、「大型アップデート」のインサートしてくるタイミングをちゃんとずらしてる。
このあたりを見てるとスプラトゥーン３のPVにどれだけ力入れてるかが見えてきますね。
【Selenium】headlessで実行した際に要素が見付かれないエラーについて

Seleniumでスクレイピングをしている際に、今まではブラウザを起動して実行されてるの見てましたが、
プログラムも正常に動くようになってきたので、
もうそろブラウザ起動せずに実行できるようにしようと思い、headlessモードに切り替えましたが、
```selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element```
が出てきてしまったので、その対処方法をまとめます。

## 原因

まず、ブラウザ起動するのと、headlessで実行するでは、処理時間がheadlessの方が早いです。

基本的な原因は対象要素がまだ出てきてないのに実行されてしまっているのが原因と考えられます。

## 対策

暗黙的な待機を入れることで要素が表示されるまでの、待機時間を入れることで対処できるようになります。

以下例です。

```python
from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.common.by import By

url = "接続したサイトのURL"
browser.get(url)
browser.find_element(By.CLASS_NAME, "取得したいclass名")
```

ここで以下のようなエラーが出たとします

```bash
selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"css selector","selector":".class名"}
```

ここでまだ取得したいclass名の要素が存在しないことがエラーメッセージから確認できます。

browser.get(url)を実行した際に、まだ要素が出てきていないのに次の処理が実行されてしまっていることが原因です。

以下のようにプログラムを修正します。

```python
from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.common.by import By

url = "接続したサイトのURL"
browser.get(url)
browser.implicitly_wait(3)
browser.find_element(By.CLASS_NAME, "取得したいclass名")
```

implicitly_wait(3)というのは、全ての要素が出てくるまで最大３秒待ちますという意味です。
これにより、取得したい要素が出てくるまで待つことができるので、
どこかのサイトに移った後に入れるのが良いかと思います。
カート機能についての理解

![](https://i.imgur.com/FcmBsxS.png)

**1. カートに商品を入れる**
---

**1.1 カートテーブルの成り立ち**

* ユーザーが商品を購入する行為を行う場所
* どのユーザーがどの商品を購入するのか、ユーザーと商品の間で関係性を持たせることが必要
* しかし、ユーザーと商品テーブルを直接結ぶことはできない
* なぜならユーザーはどの商品にも関係性がないため


![](https://i.imgur.com/HFE22wG.png)

* しかし、ユーザーと商品を関連づけなければ商品を買うことはできない
* ユーザーと商品の関係を取り持つテーブルが必要になる

![](https://i.imgur.com/MEX7Yoh.png)



**1.2　カートとは？**

* カートは複数種類の商品をいっぱい入れておけるものではない
* カートｉｄ１つに対して、商品ｉｄやユーザーidはそれぞれ一つずつ対応している


![](https://i.imgur.com/6m4CGEJ.png)

**2. 注文情報を入力する**
---

**2.1 注文テーブルに商品情報を直接入れる**

* 注文情報の入力では、主に配送先住所、送料、支払い方法などを決定
* ここで注意したいのが、商品も注文情報の一部だからという考えから、注文テーブルの中に商品を入れないこと

![](https://i.imgur.com/ZJjES5c.png)


**2.2 注文テーブルと商品テーブルを直接関連付ける**

* 注文テーブルと商品テーブルを直接関連づければいいという考えから、以下のようにするのは良くない
* サイト管理者が商品を登録する際に、注文idを設定しいなければいけないこと
* 注文idは、注文が完了した後に、事後的に決定するものであり、サイト管理者が事前に設定するのは違うため

![](https://i.imgur.com/nObZqsA.png)

そこで注文テーブルと商品テーブルを結びつけるために、間に中間テーブルを作る必要がある

**3. 注文確定ボタンをクリックする**
---

>  カートと注文詳細の関係はまだ存在しないため、カートの情報を注文詳細へ移動させる必要がある

![](https://i.imgur.com/gHsGfjH.png)
引数名 引数名 : 引数型 で定義されてる関数って何やつ？(内部変数名と外部変数名のお話)

<h2>
    1つ目の引数名:内部変数
  <br>
    2つ目の引数名:外部変数ってやつらしい
  </br>
</h2>

<h3>
  実装みてみる
</h3>
<p>例1)内部引数と外部引数が同じ場合(今まで見慣れた形はこれ)</p>

```swift:
    func fullName(firstName : String , lastName : String){
        print(lastName + firstName)
    }
    
    fullName(firstName: "Tomohiro", lastName: "Sasaki")
```

<p>例2)内部引数と外部引数が異なる場合(引数名 引数名 : 引数型みたいになってるやつはこれ)</p>

```swift:
    func fullName(firstName first : String , lastName last : String){
        print(first + last)
    }
    
    fullName(firstName: "Tomohiro", lastName: "Sasaki")
```
<p>関数内で利用する変数は<b>内部引数</b>。関数を実装する際に利用する変数は<b>外部引数名</b>。
<br>
内部関数と外部関数を分けることで、「あれ、この関数実行するときに、引数名何渡せばいいんだっけか」という状況を回避できるっぽい。
</br>
</p>
matplotlibのsubplotsのcolorbarを共有する

## 動機

以下のようなcolorbarを共有したグラフを作成したいものとします．

![subplots-with-cbar.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355593/2b6055e3-96cc-70e2-7053-f2d8b5752e0a.png)

## 結論
以下のようなコードを利用します．
contourfでcolorbarを生成して最終的にそれをfigに加える形で再現します．
注意点としては，colorbarのスケールが各々異なる場合であっても最終的に表示されるcolorbarはfor文の最後にplotされたものに準拠することです．


```python
import numpy as np
import matplotlib.pyplot as plt


plt.rcParams["font.family"] = "Times New Roman"
plt.rcParams["font.size"] = 14
plt.rcParams['mathtext.fontset'] = 'stix'  # The setting of math font


fig, axes = plt.subplots(
    nrows=2,
    ncols=2,
    sharex=True,
    sharey=True,
)
dx = np.linspace(-1, 1, 20)
X, Y = np.meshgrid(dx, dx)
level = np.linspace(0, 1, 21)

for row in range(2):
    for col in range(2):
        Z = np.random.random(X.shape)
        ### ここから開始!!!
        ### ポイント1: colorbarの情報を変数として保持する
        cb = axes[row][col].contourf(X, Y, Z, level)

### ポイント2: colorbarをsubplotsに新しい軸として加える
### ポイント3: padはcolorbarの位置調整に利用する
cbar = fig.colorbar(cb, ax=axes.ravel().tolist(), pad=0.025)
### ポイント4: colorbarのタイトルは以下のように加える
### ポイント5: colorbarのタイトルの位置はx, yで調整可能
cbar.ax.set_title("$f(x, y)$", y=1.01)
# cbar.set_ticks([])  # <=== colorbarの目盛りとその数値が不要なら使う
plt.show()
```

## 応用例

実は等高線以外の可視化でもcolorbarを入れることができます．

![colorbar-non-contour.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355593/3967bdb1-e8fe-256c-f228-7b573e897ca3.png)

```python
import matplotlib.pyplot as plt
import numpy as np

fig, ax = plt.subplots()
dx = np.linspace(0, 1, 21)
level = np.linspace(0, 1, 11)

# colorbarを生成するためにダミーとしてzerosを利用したcontourfを呼ぶ
zeros = [[0, 0], [0, 0]]
cm = plt.get_cmap("jet")
cb = ax.contourf(zeros, zeros, zeros, level, cmap=cm)

for i, a in enumerate(level):
    ax.plot(dx, a * dx, color=cm(i / level.size))

# colorbarを加える
cbar = fig.colorbar(cb)

# colorbarを編集する
cbar.ax.set_title("Slope", y=1.01)
labels = [""] * 100
labels[10], labels[-10] = "Mild $\Longleftarrow$", "$\Longrightarrow$ Steep"

cbar.set_ticks(np.arange(len(labels)) / (len(labels) - 1))
cbar.set_ticklabels(labels)
cbar.ax.set_yticklabels(cbar.ax.get_yticklabels(), rotation=90, va="center")
# tick目盛りを削除
cbar.ax.tick_params(size=0)

plt.show()
```
rails sをしたら、PGSQL.5432エラーが出力された件

環境：
・Ubuntu 20.04 LTS
・psql (PostgreSQL) 14.4
・Rails 7.0.3.1


Railsサーバーを起動しようと、rails sをしたところ、
下記のエラーメッセージが出力されて起動に失敗した。
```
connection to server on socket "/var/run/postgresql/.s.PGSQL.5432" failed: FATAL: role "hogehoge" does not exist
```

本エラーの原因については、
"hogehoge"のRoleが存在しなかったため発生したエラーであり、
"hogehoge"のRoleを作成することでエラーは解決した。

## PostgreSQLに接続してRoleの一覧を確認してみる

```
failed: FATAL: role "hogehoge" does not exist
```
エラーメッセージには"hogehoge"というロールが存在しないと書いてあるので、
PostgreSQLに接続して、Roleの一覧を確認してみる。

```
psql postgres

postgres=# \du

                                     List of roles
   Role name   |                         Attributes                         | Member of
---------------+------------------------------------------------------------+-----------
 {hogehoge}    | Superuser, Create role, Create DB                          | {}

```
"hogehoge"というロールが既にあるじゃないか…と思ったが、
"hogehoge"というロールがあるのではなく、"{hogehoge}"というロールが存在しているだけだった。
（いつこのRoleを作ったんだっけ…）

hogehogeのロールをCreateして
再度、Rails sしたところ、
正常にRailsサーバーが起動することを確認した。

```
CREATE ROLE hogehoge LOGIN CREATEDB CREATEROLE PASSWORD 'hogehoge_password';

                                     List of roles
   Role name   |                         Attributes                         | Member of
---------------+------------------------------------------------------------+-----------
 hogehoge      | Create role, Create DB                                     | {}
 {hogehoge}    | Superuser, Create role, Create DB                          | {}

```


ROLEを作成するときに参考にした記事：
https://qiita.com/sibakenY/items/407b721ad1bd0975bd00#createuser%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84
ホスト型仮想化とコンテナ型仮想化

## ホスト型仮想化

- ホストOSの上でゲストOSが稼働
- ex）Oracle VM Virtualbox



## コンテナ型仮想化

- 稼働するのはホストOSのカーネル
  - LinuxコンテナはLinuxホストOS上でしか動作させることができない
  - WindowsコンテナはWindowsホストOS上でしか動作させることができない
- ex）Docker


## LinuxコンテナをWindowsホストOS上で動作させるには

- WindowsでゲストOSとしてLinuxを導入
- LinuxゲストOS上でLinuxコンテナを動かす
リファラポリシーの必要性とその値

## リファラとは（ざっくり）

リンク先がどこから飛んできたか（リンク元）を知れる。
例えば、`http://example.com`（リンク元）に貼られたリンクから`http://hogehoge.com`（リンク先）に遷移する場合
リファラヘッダーに
`Referer: https://example.com`のような情報が含まれる。

リンク先の管理者はこのリファラを見ることで、ユーザーが`http://example.com`から自分のサイトに訪問したのだとわかる。




## なぜリファラの設定が必要か
極端な例ですが、リンク元のサイトが`http://sample.com?user_id=999&pass=1234`かつリファラを参照できる状態のサイトの場合を考えてみます。


リンク元サイトから他ページのリンクに飛んだ時、リンク先は`http://sample.com?user_id=999&pass=1234`この情報をゲットできるので、ログインに必要な情報が分かり簡単にログインできて、ログインページで操作が可能になります。
セキュリティ的にリンク先に情報を渡したくない（社外非公開のページ等）場合には、リファラの設定が必要そうです。

ただSEOの観点からは、流入元（どこから飛んできたか）がわかった方がいい場合もあるので使い分けが必要かなと思います。



## リファラポリシーの値と扱い
#### no-referrer
送る条件：一切送らない
refererヘッダがそのものが除かれるため一番情報が漏れない。
ただ、内部でリファラ情報をもとに検証を行っていると問題になりそう。

#### unsafe-url
送る条件：必ず送る
送る値：URL全体
http->httpやhttps->httpでも送られる。

 `https://example.com/q=http+referer+policy`のようにクエリ情報も送られる。


#### origin
送る条件：必ず送る
送る値：originのみ
unsafe-urlと似ているが、unsafe-urlはURL全体を送るがoriginはoriginのみ送る。
 `https://example.com/`のようなオリジン情報のみ

#### same-origin
送る条件：same-origin
送る値：URL全体
リンク元とリンク先のオリジンが一致する場合に、完全なURLのリファラを送る。
Downgradeでもupgradeでも送られない。
http->http OK
http->https NG


#### strict-origin
送る条件：Downgrade以外
送る値：originのみ

リンク先の信頼性が低い場合は送らない、それ以外はリンク元のoriginのみを送る。


#### no-referrer-when-downgrade
送る条件：Downgrade以外
送る値：URL全体
リンク元に比べてリンク先の信頼性が下がる場合はリファラ送らない。

リンク元がHTTPSで、リンク先が信頼できるサイトでないときにリファラは送らない。
リンク元が非HTTPSの場合は制限なくリファラを送る。

#### origin-when-cross-origin
送る条件①：cross-origin
送る値①：originのみ
送る条件②：same-origin
送る値②：URL全体

内部遷移はURL全体を送り、外部リンクにはoriginのみを送る。
Down/Upgrade も Cross Origin 扱いになるため、 Origin のみ送られる

#### strict-origin-when-cross-origin
送る条件①：cross-origin
送る値①：originのみ
送る条件②：same-origin
送る値②：URL全体
送る条件③：Downgrade
送る値③：送らない

origin-when-cross-originにdowngradeの場合を追加したもの。
多くの場合多くの場合、これが使われる。


## 検証はどうする？
[診断くん](http://taruo.net/e/)のようなサイトを使って検証する。
リファラが送られていないことを確認する。


参照
https://www.marguerite.jp/Nihongo/WWW/RefHTML/HTML5/Referrer_policy.html#INDEX
https://blog.jxck.io/entries/2018-10-08/referrer-policy.html
https://web.dev/i18n/ja/referrer-best-practices/
最大kノルムの双対表現

# はじめに

最大$k$ノルムの双対表現を導出するまでの式変形を手を動かして確認したので記事にまとめました。間違いがあればご指摘ください。

https://mathlog.info/articles/3406

# 参照
[1][連続最適化および関連分野に関する夏季学校](https://www.ism.ac.jp/~mirai/sscoke/2022/)
非同期通信(Ajax)を実装する方法

# 非同期通信について

**ポイント4点**
この4つだけ押さえていれば簡単に実装ができる
1. 非同期する機能箇所の部分テンプレートを作る
2. link_toをlocal: falseにしてjs形式で送信
3. jsファイルを用意する
4. controllerのredirect_toを消す

![](https://i.imgur.com/SCFILCj.png)

**1.部分テンプレートファイルを用意する**

* 部分テンプレートにすることで、view全体ではなく、指定した部分のみをリロードなしで返してくれる
```_form.html.erb
 <% if book.favorited_by?(current_user) %>
  <td>
    <%= link_to book_favorites_path(book), method: :delete do %>
    🤍<%= book.favorites.count %>いいね
  <% end %>
  </td>
<% else %>
  <td>
    <%= link_to book_favorites_path(book), method: :post do %>
    ♡<%= book.favorites.count %>いいね
  <% end %>
  </td>
<% end %>
```

```index.html.erb
<div class="favorites_buttons_<%= @book.id %>">
　　<%= render 'favorites/favorite.btn', book: @book %>
</div>
```

* class名をfavorites_buttonsにすると全ての投稿のいいねボタンが同じクラス名になってしまう
*  判別する方法として_<%= @book.id %>にて、どの投稿に対していいねをしたか判別

**2.非同期の設定をする**

* local: falseを設定することで、非同期処理が発生
```_form.html.erb
<%= form_with model: [book, book_comment],local: false do |f| %>
  <%= f.text_area :comment, rows: '5', cols: '50',  placeholder: "コメントをここに", class: "comment-textarea" %>
  <%= f.submit "送信" %>
<% end %>
```

**3.jsファイルを用意する**

**escape_javascript**
* JavaScriptファイル内にHTMLを挿入するときに実行結果をエスケープするために必要

```create.js.erb
$('some_element').replaceWith('<%= escape_javascript render 'some/element_template' %>');


// 上記の短縮形
$('some_element').replaceWith('<%= j render 'some/element_template' %>');　
```

**4.controllerのredirect_toを消す**

* redirect_to を省略することで、コントローラー名のjs.erbを探すことになる

```favorites.controller.erb
 def create
    @book = Book.find(params[:book_id])
    @favorite = current_user.favorites.new(book_id: @book.id)
    @favorite.save
  end
```

### 参考
* https://pikawaka.com/rails/remote-true
因子分析( 主因子法 )

# 主因子法　
主因子法は因子分析のパラータ推定を行う手法の一つである。　

因子分析は以下のモデルである。　
$$X = \Lambda f + e　\tag{1}$$
ここで$X$は、$n \times p$の行列で、$n$個の$p$次元のデータからなる。$X$のデータは分散1平均0に標準化されているものとする。$\Lambda$は、因子負荷行列である。$f$は因子得点である。$e$は独自因子である。

このとき分散を計算すると、　
$$ \Sigma = \Lambda \Lambda' + V(e) \tag{2}$$
である。

ここで$\Sigma$は、$X$より計算される共分散行列である。主因子法では、はじめに$V(e)$を0として$\Lambda$を求める。$\Lambda$の計算には、固有値分解や特異値分解を用いる。　
すなわち、　
$$ \Sigma - V(e) = QSQ' \tag{3} $$
さらに
$$ \Lambda　= Q \sqrt{S}  \tag{4} $$
と計算できる。ここで固有ベクトルからなる行列$\Lambda$は固有値の大きい順に必要な数だけの固有ベクトルを用いる。ここで得られた$\Lambda$と$\Sigma$から$V(e)$を計算し(3)に代入して(4)の計算を行う。これを繰り返す。　

以上を行うmatlabスクリプトを以下に示す。ここで因子の数を2、繰返し回数は100とし、因子負荷行列を変数factorloadingに求める。

```matlab
C = corrcoef( X );
C2 = C;
for k = 1:100
[u,s,v] = svd( C2 );
tmp = v(:,1:2) * s(1:2,1:2)*v(:,1:2)';
for i = 1:size( C2,1)
    C2(i,i) = tmp(i,i);
end
end
factorloading = v(:,1:2)
```
以上の計算の検算を以下のサイトのデータを用いて行い計算結果は回転前のものにほぼ一致することを確認した。
http://www.f.waseda.jp/oshio.at/edu/data_b/08_folder/da08_02.html
実際の分析に用いるにはこのあとvarimax回転またはpromax回転をかける必要である。
【Angular】stylesheetのfomatを変更したい

### 環境
- Angular 13.2.7

Angularで`ng new`してプロジェクトを作成する際に、以下の設定で選択したstylesheetによって`ng generate component`したときのスタイルシートの拡張子が変わります。

```
? Which stylesheet format would you like to use? (Use arrow keys)
> CSS
  SCSS   [ https://sass-lang.com/documentation/syntax#scss                ] 
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] 
  Less   [ http://lesscss.org                                             ] 
```
CSSを選択した場合、.cssで作成されます。
```
>ng generate component test
CREATE src/app/test/test.component.html (19 bytes)
CREATE src/app/test/test.component.spec.ts (612 bytes)
CREATE src/app/test/test.component.ts (267 bytes)
CREATE src/app/test/test.component.css (0 bytes)
UPDATE src/app/app.module.ts (875 bytes)
```

ただ間違えて設定してしまい、後から拡張子を変更したい場合はプロジェクトのルートフォルダにある`angular.json`の以下設定を変更すれば拡張子を変更できます。

``` angular.json
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "(プロジェクト名)": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss" //scssに変更
        },
```
変更した拡張子で作成されます。
```
>ng generate component test
CREATE src/app/test/test.component.html (19 bytes)
CREATE src/app/test/test.component.spec.ts (612 bytes)
CREATE src/app/test/test.component.ts (268 bytes)     
CREATE src/app/test/test.component.scss (0 bytes)     
UPDATE src/app/app.module.ts (875 bytes)
```

# 参考
- [Angular-cli from css to scss](https://stackoverflow.com/questions/40726081/angular-cli-from-css-to-scss)