OmniAICreator/Qiita-1.07M huggingface dataset:
Lognan Nanoその３（Serialラッパー）

# Longan NanoでSerialラッパー
Arduino IDEで作れらたコードを、Longan Nanoに移植する際のSerial(シリアル)ラッパーを考える。

## 環境
その１「[Longan NanoをPlatoform IOで完結](https://qiita.com/infinite1oop/items/a1f104b2038e9c170878)」と同じくPlatform IOで「Arduino」Framework利用。

### platformio.ini
```c++:platformio.ini
[env:sipeed-longan-nano-lite]
platform = gd32v
board = sipeed-longan-nano-lite
framework = arduino

upload_protocol = dfu
```

## ソースコード
### 移植対象となるArduino用コード
単なる出力を繰り返し行うもの。

```c++
void setup() {
  Serial.begin(115200);
}

int val = 0;
void loop() {
  Serial.print("val  ="); Serial.print(val); Serial.print("\n");
  Serial.print("val+1="); Serial.println(val+1);
  Serial.println("println");
  Serial.printf("val+2=%d\n\n", val+2);
  val++;
  delay(2000);
}
```

### シリアル(Serial)クラス
Serialクラス（serial_prt）を定義する。

```c++:Serial.hpp
#ifndef SERIAL_HPP
#define SERIAL_HPP

#include <Arduino.h>

class serial_prt {
public:
  void begin(int);
  void print(char *p);
  void print(int);
  void println(char *p);
  void println(int);
  void printf(char *p, ...);
};

#endif
```

そのクラスのコード自体はこちらである。

```c++:serial.cpp
#include "serial.hpp"
#include <stdarg.h>

void serial_prt::begin(int v) {
}
void serial_prt::print(char *p) {
  printf("%s", p);
}
void serial_prt::print(int v) {
  printf("%d", v);
}
void serial_prt::println(char *p) {
  printf("%s\n", p);
}
void serial_prt::println(int v) {
  printf("%d\n", v);
}
void serial_prt::printf(char *p, ...) {
  va_list ap;
  va_start(ap, p);
  vprintf(p, ap);
  va_end(ap);
}

```

### 最終的なメインコード
```c++:main.cpp
#include "serial.hpp"  // 追加①
serial_prt Serial;     // 追加②

void setup() {
  Serial.begin(115200);
}

int val = 0;
void loop() {
  Serial.print("val  ="); Serial.print(val); Serial.print("\n");
  Serial.print("val+1="); Serial.println(val+1);
  Serial.println("println");
  Serial.printf("val+2=%d\n\n", val+2);
  val++;
  delay(2000);
}
```

オリジナルのソースコードに①および②の行を追加する。

## 実行
![スクリーンショット 2021-06-26 16.50.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/58f75985-da58-41c1-7f03-3c7414886cda.png)

もっとスマートにできるのかもしれないが、とりあえずOK。
Dockerのホスト側Cronを実行してコンテナのLaravelバッチを動かす

# 環境
hostはLinux
Dockerコンテナ起動中
コンテナはPHP
PHPフレームワークはLaravel

# 前提
PHPコンテナで、Laravelのバッチが動いていることとします。

# ホスト側でDockerコマンドのバッチを実行する
下記コマンド①②のどちらかをホストから実行できるか確認してください。

- ホストで実行

①

```terminal
docker-compose exec 【サービス名】 php artisan command:【バッチ】
```

②

```terminal
docker exec 【コンテナ名】 php artisan command:【バッチ】
```

# Cron設定
 - 実行が確認できれば、ホストのcrontabを、拡張子のないファイル名で`test_cron`コピーする

```
$ sudo cp /etc/crontab /etc/cron.d/test_cron
```



 - ホストで実行

５分毎に実行する

```
*/5  *  *  *  * ec2-user  cd /home/ec2-user/【Laraveプロジェクトディレクトリ】 && docker exec 【コンテナ名】 php artisan command:【バッチ】 1> /dev/null
```

cron再起動

```terminal
$ sudo systemctl restart crond.service
```

cronステータス

```terminal
$ sudo systemctl status crond.service
```

以上
実践：「質とスピード」を維持するには

先日、弊社内で開催された**[@t_wada](https://twitter.com/t_wada)**さんのセッションを受けて、自分なりに得た実践論を記載します。

## 前提

こちらとほぼ同じ内容を踏まえた記事になるので、お時間があれば是非ご一読ください。

[![質とスピード～ソフトウェア開発の典型的な誤解を解く～](https://pbs.twimg.com/card_img/1470997630142775297/CuTE3cS9?format=jpg&name=small)](https://speakerdeck.com/twada/quality-and-speed-2020-autumn-edition)」

乱暴に要約すると**「質を落としても、早くはならない」**と言う話です。

## 要点

以下、個人的に解釈した要点を幾つか見ていきます。

### 要点1：プロジェクトのメンバーとして「できる人」しかアサインさせない

セッションの内容を整理すると、

- 「できる人」は早く書いても品質が高い
- 「できない人」は時間をかけても品質が低い

となります。

個人的な感覚と合致します。

ですが、現実的には自分も含め「できない人」の方が多い気がします。

では、「できない人」はどうしたら良いのでしょうか？

### 要点2：「できない人」は「できる人」になってもらう

当たり前感がありますが、改めて役割を整理すると、

- 「できる人」
    - **プロジェクトを実現する事**
- 「できない人」
    - **できる人になる事**

ですが、認識はしていても**対策**されている事は多くありません。

と言う事で、

## 対策：「できる人」になる工数を計上しましょう

各プロジェクトには**必要なスキルセット**があります。

ですが、メンバーがアサインされるタイミングで全て**備わってない**方が普通です。

特に**内部品質**に関するスキルセットに関しては条件として明記されている方が稀です。

## 実践

進め方を整理すると、

1. プロジェクトに関して**必要なスキルセット**を明確化する
    1. **内部品質**に関しても明確化する
1. メンバーが**持っているスキルセット**を明確化する
1. ギャップを埋める**学習時間**を工数として計上する

となります。

## 終わりに

上記を実施する事で、**メンバーをアサインする経営側の期待値**と**プロジェクトを実現する現場側の実態**を少しでも埋める事ができるのではないかと考えています。

実践するのは結構大変だと思いますが、その際の一助になれば幸いです。
STM32L010で来年(2022)のカレンダーをシリアルに表示する。4(例題の為の例題)(ほぼほぼ)



目的
例題の為の例題

簡単な説明
1週間ごとに折り曲げる
ほぼほぼ完成
次の作業は、細かい飾り付けだよ

いろいろ　(プログラム等を利用するにあたり)　いちおお約束だよ
AI 人口知能　ロボットは、魔法では、ない
「高度に発展した科学技術文明は、魔法と区別が出来ない」
「魔法」を求めるならお門違いだよ
何でも叶える「魔法」はないと言う事を考えてほしい
ブロックで出来たお城も、全ては、積み上げたブロックで出来ているだけだよ

たぶん999パーセントの人は、言っている意味が分からないと思う。
「魔法」を使えば解決出来ると思っている
「魔法使い」を必要としている


![o_con167.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/84fef3eb-c50c-97fc-0453-22a450a9cabe.jpeg)





```c++



//Ex_calendar_4

#include "mbed.h"

RawSerial pc(PA_2, PA_3); //010

int main()
{

    int hh = 1; //週のカウンター

    //開始位置
    //              1  2  3  4  5  6  7  8  9  10 11 12
    int start1[]= { 6, 2, 2, 5, 0, 3, 5, 1, 4,  6, 2, 4   ,10 ,10 ,10 };

    //月の月数
    //             1   2   3   4   5   6   7   8   9  10  11  12
    int end1[]= { 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 , 10 ,10 ,10 };

    // ループ 月
    for( int ii = 1 ; ii <= 12 ; ii++  ) {

        //月の出力
        pc.printf( "\r\n%d\r\n",  ii  );
        //pc.printf( "\r\n"  );

        //開始位置
        for( int jj = 1; jj <= start1[ ii-1 ] ; jj++ ) {

            //文字列出力
            pc.printf( "@" );

        }//for

        
        hh = 1; //週のカウンター
        // ループ 日
        for( int kk = 1 ; kk <=  end1[ ii-1 ]  ; kk++  ) {

            //文字列出力
            pc.printf( "%d ",  kk  );

            hh = hh + 1;
            if ( hh >= 7 ) {  pc.printf( "\r\n" ); hh = 1; }


        } //for jj 日

        //文字列出力
        pc.printf( "\r\n" );

    } //for ii 月

    //文字列出力
    pc.printf( "\r\n\r\n" );

    //無限ループ マイコン的停止処理
    while(1) {};

} //main

//容量削減
void error(const char* format, ...) {}



```




マイコンがない人よう


https://paiza.io/ja/projects/new?language=c


![o_con168.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/40aaf467-e747-3f25-b674-2aa428d6b34a.jpeg)




```c++





#include <stdio.h>

int main(void){
    
    
    int hh = 1; //週のカウンター

    //開始位置
    //              1  2  3  4  5  6  7  8  9  10 11 12
    int start1[]= { 6, 2, 2, 5, 0, 3, 5, 1, 4,  6, 2, 4   ,10 ,10 ,10 };

    //月の月数
    //             1   2   3   4   5   6   7   8   9  10  11  12
    int end1[]= { 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 , 10 ,10 ,10 };

    // ループ 月
    for( int ii = 1 ; ii <= 12 ; ii++  ) {

        //月の出力
        printf( "\r\n%d\r\n",  ii  );
        

        //開始位置
        for( int jj = 1; jj <= start1[ ii-1 ] ; jj++ ) {

            //文字列出力
            printf( "@" );

        }//for


        hh = 1; //週のカウンター
        // ループ 日
        for( int kk = 1 ; kk <=  end1[ ii-1 ]  ; kk++  ) {

            //文字列出力
            printf( "%d ",  kk  );

            hh = hh + 1;
            if ( hh >= 7 ) {  printf( "\r\n" ); hh = 1; }


        } //for jj 日

        //文字列出力
        printf( "\r\n" );

    } //for ii 月

    //文字列出力
    printf( "\r\n\r\n" );


}





```
SpresenseでBLE-UART変換基板を使ってスマホから入力

Qiita Advent calendar2021の記事です。

:::note
Spresenseの関係会社に勤務していますが、業務外の個人活動の紹介です。
当記事は会社と関係ありません。
:::

:::note alert
誤った基板上のピン接続により故障する可能性があります。
自己責任でお願いします。
:::

こちらのモジュールを使いスマホからBluetooth経由でSpresenseに入力します。

https://www.switch-science.com/catalog/6724/

####接続
|Spresense|BLE-UART変換基板
|---|---|
|GND|GND|
|3.3v|VIN|
|D2|PO_08|
|D3|PO_06|

<img width="300" alt="20211218_055720.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103446/5690227e-7970-03e5-0fe0-c9a599862535.jpeg">

####コード

<details><summary> サンプルコード </summary><div>

``` 
#include <SoftwareSerial.h>

SoftwareSerial toBleUart(2, 3);

// https://learn.adafruit.com/bluefruit-le-connect/controller
boolean checkCRC(uint8_t *buffer) 
{
  uint8_t len = sizeof(buffer);
  uint8_t crc = buffer[len-2];
  uint8_t sum = 0;

  for (int i = 0; i < (len-1); i++) {
    sum += buffer[i];
  }

  Serial.print("CRC ");

  if ((crc & ~sum) == 0) {
    Serial.println("PASS");
    return true;
  }

  else {
    Serial.println("FAIL");
    return false;
  }
}

void setup() 
{
  Serial.begin(115200);
  toBleUart.begin(115200);
}

void loop() 
{
  int i;
  uint8_t buf1[5];

  i = 0;
  while (toBleUart.available()) 
  {
    buf1[i] = toBleUart.read();
    delay(5);   // 必要だった
//    Serial.write(buf1[i]);
//    if(i == 4) 
//      Serial.write("\n");
    i++;
  }
//  if(i == 4) 
//    delay(10);

  if(buf1[0] == 0x21)
  {
    if(buf1[1] == 0x42)   // B
    {
      i++;
      switch(buf1[2])
      {
        case 0x31 : //1
          Serial.write("1");
          break;
        case 0x32 :
          Serial.write("2");
          break;
        case 0x33 :
          Serial.write("3");
          break;
        case 0x34 :
          Serial.write("4");
          break;        
        case 0x35 :
          Serial.write("up");
          break;
        case 0x36 :
          Serial.write("down");
          break;
        case 0x37 :
          Serial.write("left");
          break;
        case 0x38 :
          Serial.write("right");
          break;        
      }
      if(buf1[3] == 0x31)
      {
        Serial.write(" pressed\n");
      }
      else
      {
        Serial.write(" released\n");
      }
//      checkCRC(buf1);
    }
  }
  
//  for(i=0; i<10000; i++)
//  {
//    toBleUart.println(i);
//    delay(30);
//  }
  
}

```

</div></details>


BLE-UART変換基板から受け取る信号の内容はこちらを参考にしました。

https://learn.adafruit.com/bluefruit-le-connect/controller


####使い方
1. スマホのアプリLightBlueでUART通信条件を設定する
1. スマホのアプリBluefruitConnectを起動し、BLE-UART Converter Boardと接続する
1. Controllerを選択し、入力したいボタンを押す・離す

####実行中の様子

https://youtu.be/5HSsdsrMQZs

BluefruitConnectのControllerにはgyroなどの信号も送信できるようなので応用が利きそうです。

12/9の記事とつなげるとToioを動かすことも試せそう。
公園情報サイト開発 - part1 - 概要

# 概要

まだ考え中なとこもあるのですが、
地元の公園を検索し口コミや評価などを見るサイトを作ってみたいと思います。

# 要件

以下、随時追加します。

- 公園一覧（画像付き）を表示します。
- 平均評価を表示します。
- 基本（住所や遊具の種類、駐車場情報、開園閉園）情報を確認できます。
- 口コミ一覧を表示します。
- 口コミを投稿できます。（画像も）
- 評価することができます。
公園情報サイト開発 - メニュー


### [公園情報サイト開発 - part1 - 概要](https://qiita.com/yokowake12345/items/dc60fdacd11fdefc41e2)
### [公園情報サイト開発 - part2 - 環境設定](https://qiita.com/yokowake12345/items/a9394893edd9f89c356a)
公園情報サイト開発 - part2 - 環境設定


# Next.jsのプロジェクト作成

```
create-next-app プロジェクト名 --typescript
```

プロジェクトディレクトリに移動し、`yarn dev`でNext.jsの画面が出ることを確認しておきます。

```
cd プロジェクト名
yarn dev
```

この画面です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559029/c062d640-330f-c867-7023-ee200765b010.png" alt="Next.js初期画面" width="600" height="100">

# Material-uiのインストール

```
npm install --save @material-ui/core @material-ui![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559029/5ab7d6f4-b2d3-0568-a71c-2b0cad9f2f3e.png)
/icons
```

# Material-uiで画面作成できることの確認

まずは、Material-uiのボタンが表示されることだけ確認します。

```typescript
import React from "react";
import Button from "@material-ui/core/Button";

const Home: React.FC = () => {
  return (
    <Button
      color="primary" // (2)
      variant="contained" // (3)
    >
      Hello World {/* (1) */}
    </Button>
  );
};

export default Home;
```

画面で確認すると、

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559029/a7a62886-ad46-9a0e-d998-1e39dec47cc5.png" alt="Material-uiボタンを表示してみた" width="300" height="100">

# ホスティングサービスにデプロイしてみる

Netlify, Vercel、Github Pagesなど無料のやつがありますが、
Googleアドセンス的に、Netlifyにしました。

Netlifyは利用したことがあったので、その他を利用してみたかったのですが、
Vercelとか。VercelはGoogleアドセンスをポリシーで禁止しているので今回は諦めました。

[こういうとこ](https://shinobiworks.com/web/blog/vercel-netlify/)を参考にさせてもらいました。

また、GithubとNetlifyの連携は、[こちらを参考](https://qiita.com/rougherina/items/e246fedf0e1f4b95c262)に行いました。
terraformでMap型をList型に変換する

## 使いどころさん
- for_eachで作成したoutputをすべて取得し別の1つのResourceに渡すときにつかうきがする

## コード

```tf
locals {
  project_main_versions = {
    project-1 = 1
    onsite-1  = 1
  }
}

# count.indexに当てはめるための要素数を取得
output "count" {
  value = length(local.project_main_versions)
}

# ObjectのKeyを指定する必要があるのでKeyのListを取得する
output "list" {
  value = keys(local.project_main_versions)
}

# 0個目の要素を取得する場合
output "index0" {
  value = keys(local.project_main_versions)[0]
}

# 1個目の要素を取得する場合
output "index1" {
  value = keys(local.project_main_versions)[1]
}

# null_resourceを作成し、要素を参照できるようにする
resource "null_resource" "names" {
  count = length(local.project_main_versions)
  triggers = {
    name = local.project_main_versions[keys(local.project_main_versions)[count.index]]
  }
}

# 配列で出力
output "names" {
  value = [null_resource.name.*.triggers.name]
}
```


出力

```
Outputs:

count = 2
index0 = "onsite-1"
index1 = "project-1"
list = [
  "onsite-1",
  "project-1",
]
names = [
  [
    "1",
    "1",
  ],
]
```
CVE-2021-44228をブロックするAWS WAFをTerraformで作成する

# はじめに
こんにちは、インフラエンジニアの@yktr_sreです。
この記事はterraform Advent Calendar 2021の17日目の記事です。
先日 [CVE-2021-44228](https://nvd.nist.gov/vuln/detail/CVE-2021-44228 "CVSS")としてJavaベースのロギングライブラリである「Apache Log4j」に深刻な脆弱性が発表されました。
CVSSのスコアでも10.0と非常にクリティカルなものになっており
脆弱性の対象になっているライブラリを利用している場合は対策が必須となっています。
具体的な対策手法は今回の本筋から外れるので省きますが
AWS WAFにて当該の脆弱性を狙った攻撃をブロックするルールが提供されています。
今回はWAFの作成からALBに紐づけるところまでTerraformで構築します。

# コード

## wafv2

```hcl
resource "aws_wafv2_web_acl" "example" {
  name        = "waf-acl-example"
  description = "WAF ACL for log4j"
  scope       = "REGIONAL"

  default_action {
    allow {}
  }

  rule {
    name     = "rule-log4j"
    priority = 1

    override_action {
      count {}
    }

    statement {
      managed_rule_group_statement {
        name        = "AWSManagedRulesKnownBadInputsRuleSet"
        vendor_name = "AWS"
      }
    }

    visibility_config {
      cloudwatch_metrics_enabled = true
      metric_name                = "AWSManagedRulesKnownBadInputsRuleSet-metrics"
      sampled_requests_enabled   = true
    }
  }

  visibility_config {
    cloudwatch_metrics_enabled = true
    metric_name                = "metric-example"
    sampled_requests_enabled   = true
  }
}

resource "aws_wafv2_web_acl_association" "example" {
  resource_arn = aws_lb.example.arn
  web_acl_arn  = aws_wafv2_web_acl.example.arn
}
```

## ALB

```hcl
resource "aws_lb" "example" {
  internal        = false
  subnets         = ["subnet-XXXXXXXX", "subnet-XXXXXXXX"]
  security_groups = ["default"]
}

resource "aws_lb_listener" "example" {
  load_balancer_arn = aws_lb.example.arn
  port              = "80"
  protocol          = "HTTP"

  default_action {
    type             = "forward"
    target_group_arn = aws_lb_target_group.example.arn
  }
}

resource "aws_lb_target_group" "example" {
  name     = "example-lb-tg"
  port     = 80
  protocol = "HTTP"
  vpc_id   = "vpc-XXXXXXXX"
}
```

# 設定確認

ALBにWAFが紐づいています。

![スクリーンショット 2021-12-18 044642.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/895851/70029b2b-e41f-55be-18f2-cbace60c20b5.png)

WAFにAWSManagedRulesKnownBadInputsRuleSetというマネージドルールが紐づいており
log4j周りの攻撃をブロックするルールが含まれています。

![スクリーンショット 2021-12-18 044725.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/895851/8d88959a-5b9a-2788-ce1b-5d906f24ef49.png)

# 動作確認

以下のcurlコマンドを利用すると403でブロックされていることを確認できます。

```
curl http://${ALB_ENDPOINT} -H 'User-Agent: ${jndi' -o /dev/null -w '%{http_code}\n' -s
```
zetasql-formatter.elを作りました

## TL; DR

- SQLファイルの保存時に自動で整形してくれるEmacs用パッケージを作りました

## はじめに

[zetasql-formatter](https://github.com/Matts966/zetasql-formatter)は、@Matts966 さん謹製の、**SQLを良い感じに整形してくれるやつ**です。
もともと、init.elの中にこれを適用する関数を作り保存時のHookに登録して利用していたのですが、Emacsアドベントカレンダー2021の記事にすべくパッケージとして独立させてみました。
正直、パッケージのお作法的なものをキチンと理解して書いているわけではないので、記事内の誤りや実装の不具合など、お気づきの点があれば、そっとマサカリなり編集リクエストなりPRなりいただきたく。

## 作ったもの & 使い方

下の画像の左のようなクエリを保存すると、右のように整形してくれます。

![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7973/000dd9f0-0ae1-305a-5f9e-44d4f730768a.png)

### インストール

ソースは[GitHub](https://github.com/hotoku/zetasql-formatter-el)にあるので、ここからインストールします。
インストールの方法については主旨ではないのでフットノートで[^1]。

### 使い方
インストールすれば、特に設定の必要はなく、`sql-mode`なファイルの保存時に、自動で整形されます。

## 注意

### 要Docker

整形には、zetasql-formatterの[Dockerイメージ](https://hub.docker.com/r/matts966/zetasql-formatter)を使っています。つまり、

1. `docker`コマンドが必要・・なのと、
2. 初回の実行時には、`docker pull matts966/zetasql-formatter:latest`が走るので、少し時間がかかる・・です。

Emacs起動時にdockerコマンドの有無をチェックし、見つからない場合は初期化の処理をスキップしているので、dockerがない環境にインストールしても問題ありません。

### 自動整形を無効にする方法

zetqsql-formatterは、名前の通り[zetasql](https://github.com/google/zetasql)を利用しています。SQLの異なる方言を利用している場合など、文法エラーが発生するかもしれません。
特定のバッファで自動整形を適用したくない場合は、`zsfm-do-format`という変数に`nil`を代入すると、整形の処理がスキップされます[^3]。

[^1]: 1. `git clone git@github.com:hotoku/zetqsql-formatter-el /some/path` を実行する
    2. Emacs上で、`M-x package-install-file`を実行する。ファイルを尋ねられるので、`/some/path/zetasql-formatter.el`を指定する



[^3]: 例えば
      `
      -- Local Variables:
      -- zsfm-do-format: nil
      -- End:
      `
      とファイルの末尾に書いておけば、そのファイルでは、自動整形が無効になります。
2022年の私の勉強テーマ選定(後半)

##前提条件
 
私事なのですが、毎年この時期に気になるテーマ(言語だったりフレームワークだったりテクノロジーだったり)を２，３個選んで翌年の「学習目標」に設定して勉強してたりします。
もちろん、それだけを勉強するわけではないのですが、軸になるように考えつつ毎月勉強してます。
今まではひっそり一人でやってましたが、初めて公開してみます。
というわけで、来年の勉強テーマは、フロントエンド＋バックエンドでやろうかと考えてます。

その他の条件とかは[【前半】](https://qiita.com/tyama99999/items/8c95128e5998f41a754f "前半")で

## 2022年に勉強するプログラミング言語
フィーリングでー決定！！

:::note info
<b>Rust に 決定！</b>
決めた点：さらさらっとサンプルを見つつ、まぁ話題になってるし。
:::
:::note warn
次点:v言語
楽しそう、GUIとかもあるし、2023年の検討に持ち込そう
:::
:::note warn
Julia
他言語との連携はありがたいかな。とりあえず、2023年の検討に持ち込そう
:::

## 2022年に勉強するフロントエンドフレームワーク
:::note info
<b>Vue.js3 に 決定！！</b>
なんとなくー
:::
:::note warn
angular
とりあえず、2023年の検討に持ち込そう
:::
:::note warn
React
とりあえず、2023年の検討に持ち込そう
:::

というわけで、2022年の勉強の柱が決まりましたー。わーわー。

### だからどうしたって話ですが、勉強しつつブログも書いてみよう。
### そして GraphQLの勉強もしたいと思います。
SaaSが公開してるAPIをいくつかのインタフェースに変えてアクセスしてみる

本記事はデータ基盤・BIツール・データエンジニアリング Advent Calendar 2021 18日目の記事です。
https://qiita.com/advent-calendar/2021/dataengineering

## はじめに
SaaS ≒ API とはまだまだ言い難いですが、最近では API を提供している SaaS も増えてきているなぁと思ったりしています。そして API 利用者側から見ても API へのアクセス方法などは利用者が多い SaaS であれば、リファレンス以外にもサンプルコードがネット上にたくさん転がっていて、それらを参考にすることで誰でもローカルにデータを引っ張てくるまではすぐに出来そうな感じかと思います。

ただ、基幹システムのインタフェースが TDS（SQLServer）インタフェースしかなかったり、利用している BI サービスが MySQL インタフェースしかない！という状況はまだまだ存在します。

そういう時は CData Connect というSaaS 型データハブサービスで仮想データベースを作成してさまざまなインタフェースを公開することでツールやサービスと SaaS を楽に双方向で連携することはできるようになります。

## CData Connect って何？
https://www.cdata.com/connect/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/d13c0b15-7bc0-24ee-3d74-a841053fffe1.png)
さまざまな SaaS データを OData、MySQL、SQLServer の３つの規格で接続できるインタフェースを外部に公開できるサービスです。
例えば MySQL でしか外部との連携ができないサービスがある場合、CData Connect がデータソースと利用ツール・サービスの間に入って MySQL インタフェースを通じてお互いの連携を可能にしてくれます。
※SQLServerインタフェース、ODataエンドポイントでも同じ考えです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/e68586f7-64ca-0632-0deb-1ee67608b52e.png)

## CData Connect が提供しているインタフェース
今現在は OData、MySQL、SQLServer、REST があります。
（今回はオンプレ版を使ってますのでURLにlocalhostが入ってます）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/199572a2-cbe1-64b0-c02a-6a6118cd3af4.png)

まぁこれだけ揃っていればある程度のツールやサービスとは接続できるのではという感じですね。  

ではSalesforceに対して OData と MySQL インタフェースで接続してみましょう。
ちなみに CData Connect には Salesforceへの接続設定が済んでる状態で始めていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/20c119c5-6bab-f888-4428-b2b362f24e72.png)

なお、CData Connect の操作方法などはこちらで。
https://www.cdatablog.jp/entry/connect_handson

### OData
ではOData の確認です。ヘッダーのAPIをクリックしてAPIリファレンスを参照します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/24f3293b-7b3d-ed45-ea26-0788d7d191c6.png)
あとはこのままPOSTMANでリクエストするとSalesforceの取引先情報をODataで接続して取得することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/ca6afe09-e0d1-c9bb-936e-82c6e6a4a3a7.png)
取得結果↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/ab661fbb-178c-0178-c8f1-25d49b66e27c.png)

ODataのクエリパラメータも使えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/63d9c555-3259-0a57-a8c1-6ec9088be3ad.png)


### MySQL
ではMySQLプロトコルを試してみるために、MySQL Workbench を使ってみたいと思います。
接続先はこちらになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/5a148b11-94c4-0283-d2a6-36300b7d2c4c.png)

指定するユーザーパスワードは、ヘッダーのUSERSで作成したユーザー名とパスワードを指定するようにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/ef2b6a93-e712-412d-61c8-bb6c39d2cc91.png)
あとは普通のselect * from xxxx で取引先情報を取得することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/e534e89e-f9a4-f27b-2c54-cb0a0093c47b.png)

## おわりに
SalesforceにODataやMySQLインタフェースで接続してみるところをやってみました。
今回省略してしまいましたが、同じような方法でTDS（SQLServer）でも接続することができますので、自分が使っているツールやサービスが持っているインタフェースにOData、TDS、MySQL、REST のどれかがあれば、CDataConnect を使うことで色んなデータソースに接続することができるようになります。
WSL内のDockerに立てたSAM環境で exec user process caused: exec format error が起きた時の対処

##原因
DockerのアーキテクチャとSAMのtemplate.yamlのアーキテクチャが異なっていたため

##対策
1. docker system info コマンドをコンソールで実行しアーキテクチャを確認
    1. `Architecture:x86_64`みたいな感じで表示される
2. template.yamlに設定されているアーキテクチャを1で確認したアーキテクチャと一致させる
Cloudflare Pages に個人ブログを移行してみた

## はじめに

こんにちは、byoです。
[ビットスター Advent Calendar 2021](https://qiita.com/advent-calendar/2021/bitstar-inc) 19日目の記事です。

みなさんは、個人開発していますか？
私は個人開発で得た知識を備忘録としてブログに書き溜めていて、そのためにConoHaのVPSを契約しています。個人開発だとランニングコストは安いなら安いだけ助かりますよね。

Cloudflare Pages を利用することで、ランニングコストを抑えてられたので紹介したいと思います。

## Cloudflare Pages について

Cloudflare Pages は、Cloudflareが提供する静的サイトのホスティングサービスです。
Cloudflare Pages を利用する場合、以下の前提条件が必要となります。

- Next.js、Nuxt、Gatsby、Hugoなどのフレームワークを用いてHTMLを生成していること
- GitHub、GitLabを利用してソースコード管理していること

Cloudflare Pages には無料プランがあり、ページ数・リクエスト数・帯域幅ともに無制限で利用できます。
個人ブログ程度なら、無料プランで十分過ぎると思います。

## 個人ブログの技術スタック

私の個人ブログは、以下のような技術スタックで構成されていたため、Cloudflare Pages の利用に合せて変更は何も必要ありませんでした。

- ConoHa VPS 2Gプラン
- フロントエンド実装　Next.js（SSG） + MATERIAL-UI
- バックエンド実装　Ubuntu + Go（Gin） + MySQL

## 移行手順

移行手順は、こちらを参考にしてください。

[Jamstackホスティング決定版? Cloudflare Pagesを試してみたよ！](https://dev.classmethod.jp/articles/cloudflare-pages/)

上記記事だと、言語設定が英語になっていますが日本も選択できます。

## 移行前と移行後の変化

いろんなツールを利用して移行前と移行後でどのような変化があるか確認してみました。

### 1. PageSpeed Insights

移行前
![psi_o.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095824/1f66c9f6-3d4c-11ad-ac58-4fc565fa9213.png)



移行後
![psi_c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095824/46535ddb-57bb-42e8-3fe2-9449ad726096.png)


※ PageSpeed Insightsは、Googleが提供するWebサイトの表示速度などを総合的に評価するツールです。

### 2. Qualys SSL Labs

移行前
![ssl_o.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095824/3a1093d7-4468-0e0b-03cb-8591bc32d10f.jpeg)

移行後
![ssl_c.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095824/2b38c434-9635-e647-a8d3-391152f2cae6.jpeg)

※ Qualys SSL Labsは、SSLの脆弱性を診断するツールです。

### 3. HTTP/3 CHECK

移行前
![http3_o.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095824/8c2e3d7f-92da-e937-65fd-cfda955573a3.jpeg)

移行後
![http3_c.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095824/0de8dca8-d6c6-345d-7797-e803ddc02f9f.jpeg)

※ HTTP/3 CHECKは、HTTP/3とQUICをサポートしているか確認するツールです。

## まとめ

Cloudflare Pages に個人ブログのフロントエンド部分を移行することで VPSのプランのスペックダウンに成功しランニングコストを抑える事ができました。また、個人で対応するのが面倒なIPv6対応やHTTP/3 & QUIC対応も一緒にできるのでSEO対策にもなるのかなと思います。
Next.js、Nuxt、Gatsby、Hugoなどを利用してウェブサイトを開発している方は、Cloudflare Pages を試してみてください。

## 参考サイト

[Cloudflare Pages・Vercel ・Netlify の違いや使い分けをまとめる](https://zenn.dev/catnose99/scraps/6780379210136f)
【PMMP4】生活サーバー運営に便利なプラグインたち！

<h1>はじめに</h1>
皆さんこんにちは！
累計で3,4年ほど生活サーバーを経営していた私が、使っていて便利だなと思ったプラグインを選別しました！
ここではPocketMine-MP4のプラグインを紹介したいと思います！

<h1>プラグイン紹介</h1>

<h3>EconomyAPI</h3>
https://poggit.pmmp.io/p/EconomyAPI

経済プラグインです。
お金をやりくりすることができるようになります。
いろいろ種類はありますが、EconomyAPIが一番シンプルかつ、メジャーですので今回紹介します。

<h3>EconomyLand</h3>
https://poggit.pmmp.io/p/EconomyLand

土地保護プラグインです。
土地保護できないワールドなども細かく設定することが出来ます。
荒らし防止に必須のプラグインです。

<h3>KeepInventory</h3>
https://poggit.pmmp.io/p/KeepInventory

死んでもアイテムを落とさないようになるプラグインです。
これは好みにもよりますが、大切なアイテムを失ってしまうとユーザーのメンタルに直接響きますから...

<h3>MultiWorld</h3>
https://poggit.pmmp.io/p/MultiWorld

複数のワールドを作成できるプラグインです。
資源ワールドなどを作るときに活躍します！

<h3>AllSigns</h3>
https://poggit.pmmp.io/p/AllSigns

ワープやコマンドを看板で行えるようにするプラグインです。
ユーザーのコマンド入力が不要になるのでこれも必需品です。

<h3>SimpleWarp</h3>
https://poggit.pmmp.io/p/SimpleWarp

ワープポイントを設置することができるプラグインです。
AllSignsと合わせたらユーザーの負担が圧倒的に減ります。

<h3>EasyEdit</h3>
https://poggit.pmmp.io/p/EasyEdit

範囲指定した中のブロックをコマンド１つで切り取ったり設置したり出来ます。
荒らしの対処などにも活躍しますし、必須プラグインです。

<h3>JoinQuitMessage</h3>
https://forum.mcbe.jp/resources/475/

プレイヤーがサーバーに入った際や退出した際のメッセージを変更することが出来ます。
会話のきっかけになったりするので入れてみると良いと思います！

<h3>SimpleLogger</h3>
https://forum.mcbe.jp/resources/457/

ブロック設置、破壊のログを記録してくれるプラグインです。
荒らしが起こった際に、すぐに特定することが出来ます。
このプラグインはDBの容量を極力抑えてあって、たくさんのログを記録することが出来ます。

<h3>PlayerInfoScoreBoard</h3>
https://forum.mcbe.jp/resources/432/

プレイヤーの情報を右端のスコアボードに表示してくれます。
目に見える情報が増えるのでユーザーにとって良く働いてくれるでしょう！

<h3>Trade</h3>
https://forum.mcbe.jp/resources/506/

フリーマーケットのプラグインです。
エンチャントや名前変更したアイテムなどにも対応しており、プライベートの取引もすることが出来ます
正直ショップはすべてコレで完結します。
取引した情報もログに残り、可視化されるのでサーバーに参加している方々の需要分析や経済崩壊防止にも役に立つことが出来ます

<h1>おわりに</h1>
以上が生活サーバーに導入すると活躍してくれるプラグインになってます。
PocketMine-MP4になって間もないのでまだ少ないですが、今後はもっと便利なプラグインがPMMP4.0に対応していくと思います。
ループに関する考察

Scratchのループ（くりかえす）について、考察してみました。

# 通常のループ

まずはシンプルにループしている間、変数の値を足し続けるループを作ってみます。

<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75307/18f6dfdf-3dad-65f4-61d8-a0317a3afc6d.png">

結果は次の通りです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75307/aef94526-5a62-29eb-e4da-19942bcb17cc.png)

約900万までカウントされました。この数字はScratchの全力のループ回数と予想されます。マシンスペックによって変わると思います。

# 通常のループ×２

次にシンプルなループを二つ用意します。新たに追加したループは、最初のループの半分の時間で終わるようにしておきます。

<img width="75%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75307/538321eb-46d7-5be1-5998-94a9b2fa43af.png">

結果は次の通りです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75307/7c97b112-0074-f082-5aa6-9f844e77ddbc.png)

一つ目のカウントは二つ目のカウントの２倍強となっています。また二つのカウントを足すと、最初のループの時のカウントとほぼ同じ約900万となります。そのため、ループが複数あると、Scratchの全力がそれぞれのループに按分されると予想されます。

# 画面描画処理を含むループ

次に画面描画処理を含むループを追加します。この処理も最初のループの半分の時間で終わるようにしておきます。

<img width="75%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75307/2cf02608-2f41-f4d7-6304-3e6b45d2ac49.png">

結果は次の通りです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75307/8c019a6d-1982-a0a2-6cd2-489b9900b8da.png)

描画ありカウントは、約150となっています。これはScratchが画面描画を１秒間に30回行うという仕様に基づいていそうです。描画ありカウントは5秒間行っているので、30*5=150ということです。描画なしカウントは約450万ですが、これは最初のループの時の900万の約半分です。つまり前半5秒間は画面描画処理を含むループにつれられて1秒間に30回というブレーキがかかっていましたが、後半5秒間は全力でループを回せていたということになりそうです。

# 再描画をしないブロック内のループ

最後に、再描画をしないブロック内のループを追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75307/61221990-05e5-5494-435c-f74aea9d09de.png)

これも半分の時間で終わるようにしておきます。

<img width="75%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75307/3280a19c-9e11-a727-535d-8ca734aa6538.png">

結果は次の通りです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75307/e0cbb31a-6486-c08e-aa4c-98392b1eda81.png)

描画なしのカウントは約450万と、全力でカウントできたのは再描画をしないブロックのループが終わってからになっています。また再描画なしのブロックのループは約670万回となっていて、通常のループよりも150%速くなっています。これは、実は最初のループはScratchの全力のうち、画面描画にもそれなりのパワーが取られていたことを意味していそうです。実際、再描画なしのブロックのループが回っているときは、画面描画は1秒に2回ほどのカクカクになってしまいました。

# 結果

今回の実験では、次のことがわかりました。

* 通常のループでは、画面描画に影響がない範囲で全力でループが回る。
* 複数のループがあると、Scratchの全力がそれぞれに分けられる。
* 画面描画を含むループが実行された場合、すべてのループが1秒間に30回のスピードで回る。
* 再描画をしないブロックのループが実行された場合、画面描画に影響が出るほど全力でループが回る。

# 考察

一般的なプログラム言語では、全力の無限ループを作成すると、CPUリソースを全力で消費してしまいます。その結果CPU使用率が100%になったり、画面が固まったりするので、良くないことだと言われています。そして、ループの中にウェイトを入れるなどして、他の処理にもCPUリソースを使わせるような実装をすることが必要です。
しかしScratchでは、複数の無限ループを作成しても、CPUリソースは公平に割り当てられます。そして、ループにウェイトを入れなくても、画面が固まったりすることはありません。
ただし、再描画をしないブロックのループについては、上記が当てはまらず画面が固まります。そのため「再描画をしないブロック」と「ループ」の組み合わせをするときには注意をしたほうが良さそうです。

サンプルプロジェクト
https://scratch.mit.edu/projects/618585447
STM32L010で来年(2022)のカレンダーをシリアルに表示する。3(例題の為の例題)(ダメな例)



目的
例題の為の例題(ダメな例)


簡単な説明
月の最初の1日目の位置と
月の日数を配列から読み込み
表示する


いろいろ　(プログラム書くのに必要な能力)
人に天才なのかバカなのかわからないと言われるのは、
脳内で絵が描ける
脳内でザクのプラモデルが組み立てられる
これが最大の重要点、脳内でプログラムが実行出来る。
当然、脳内でプログラムが書いて編集できる。
なぜ、6ステップ先の事がわかるかと言われれば
脳内でプログラムを実行しているから。
99%の人は、話を聞くと段取り(実行計画)が出来ない
脳内で絵が描けないと設計できないのに脳内で絵が描けない
脳内で機械の機構が動かせない
建設設計、機械設計、回路設計、プログラム設計、生産計画ができる
よって、パソコンすらいらないでプログラムが書ける。
なにも必要としない　ほぼ達人レベル
人に怖いと言われた。(怒)
ゴットアイは、透視力で車のエンジンが透視できる　かなりやば目
そのくらい出来ないとだめだよね　(教授より)



![o_con166.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/886a1b68-8224-accb-4f6f-a8816028f72f.jpeg)



```c++




//Ex_calendar_3

#include "mbed.h"

RawSerial pc(PA_2, PA_3); //010

int main()
{

    //開始位置
    //              1  2  3  4  5  6  7  8  9  10 11 12
    int start1[]= { 6, 2, 2, 5, 0, 3, 5, 1, 4,  6, 2, 4   ,10 ,10 ,10 };

    //月の月数
    //             1   2   3   4   5   6   7   8   9  10  11  12
    int end1[]= { 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 , 10 ,10 ,10 };

    // ループ 月
    for( int ii = 1 ; ii <= 12 ; ii++  ) {

        //月の出力
        pc.printf( "\r\n%d\r\n",  ii  );
        //pc.printf( "\r\n"  );

        //開始位置
        for( int jj = 1; jj <= start1[ ii-1 ] ; jj++ ) {

            //文字列出力
            pc.printf( "@" );

        }//for

        // ループ 日
        for( int kk = 1 ; kk <=  end1[ ii-1 ]  ; kk++  ) {

            //文字列出力
            pc.printf( "%d ",  kk  );

        } //for jj 日

        //文字列出力
        pc.printf( "\r\n" );
        
    } //for ii 月

    //文字列出力
    pc.printf( "\r\n\r\n" );

    //無限ループ マイコン的停止処理
    while(1) {};

} //main

//容量削減
void error(const char* format, ...) {}




```
LiveViewでナビゲーションバーを作る方法

Phoenixは通常セッションをPlug.Connを用いて扱いますが、LiveViewでUIを開発する場合はWebSocketでの通信となるため、Phoenix.LiveView.Socketが使われます。

WEBアプリケーションを開発する上でナビゲーションバーは必要不可欠かと思いますが、Plug.ConnとPhoenix.LiveView.Socketを両方使用するとナビゲーションバーで状態を保つことが難しいように感じるのではないでしょうか。例えば選択中のタブを他のタブメニューとは色分けするなど。

しかし、live_session/3の導入とともに上記の問題が解決されつつあります。
live_session/3はLiveViewのライフサイクルでマウントされる前に任意の処理を追加できるようにする関数です。
つまりナビゲーションメニューをクリックしたらLiveViewがマウントされる前に認証をしたり、選択されたメニューをsocketにアサインしたりすることができるようになります。

やり方はとても簡単です。

- layout/live.html.heexにナビゲーションバーを挿入
- attach_hook/4でactive_tabをsocketにアサイン
- router.exでactive_tabをアサインするモジュールをlive_sessionに追加

という３ステップでできます。

# layout/live.html.heexにナビゲーションバーを挿入
テンプレートのapp.html.heexはPlug.Connでセッションが行われるため、LiveViewは使用できません。
しかし、live.html.heexであればLiveViewのライフサイクルに関与するため、socketに選択中のメニューをアサインすることができます。

```html:live.html.heex
<nav>
  <div class="user_menu">
    <div class="menu_container">
      <a href="/" class="logo">logo</a>
      <a href="/hoge" class="nav_menu" style={if @active_tab == :hoge, do: "background-color: rgb(160, 225, 235);"}>hoge</a>
      <a href="/fuga" class="nav_menu" style={if @active_tab == :fuga, do: "background-color: rgb(160, 225, 235);"}>fuga</a>
    </div>
  </div>

  <div class="icon_menu">
    <div><%= @current_user.name %></div>
  </div>
</nav>
```

# attach_hook/4でactive_tabをsocketにアサイン
active_tabをアサインするモジュールを作成します。

```elixir
defmodule HogeWeb.Nav do
  import Phoenix.LiveView

  def on_mount(:default, _params, _session, socket) do
    {:cont,
     socket
     |> attach_hook(:active_tab, :handle_params, &set_active_tab/3)}
  end

  defp set_active_tab(params, _url, socket) do
    active_tab =
      case {socket.view, socket.assigns.live_action} do
        {HogeLive, _} -> :hoge
        {FugaLive, _} -> :fuga
        {_, _} -> nil
      end

    {:cont, assign(socket, active_tab: active_tab)}
  end
end
```

# router.exでactive_tabをアサインするモジュールをlive_sessionに追加

```elixir
#...
live_session :authenticated, on_mount: [HogeWeb.Nav] do
 live "/hoge", HogeWeb.HogeLive
 live "/fuga", HogeWeb.FugaLive
end
#...
```

このような手順でナビゲーションバーがLiveViewで作成できるようになります。

# 参考文献
この記事はFly.ioのブログで紹介されていた記事の内容を参考させていただきました。
[Active nav with LiveView](https://fly.io/phoenix-files/liveview-active-nav/)
デベロッパーツールで目的のjsファイルを探せるようになった話

物を探すのが下手なら、探さなくても見つかるような工夫をすればいい。
使ったものは所定の位置に戻す、収納BOXに何が入っているかラベリングしておく、物を増やさない、など。
でもそれがもし、自分で管理しているものではなかったら……？

この記事は新人の頃
「サイト上で利用しているjsファイルがどれか探しきれないよ～><」
「不要なjs削除したいけれどどれが不要か見当つかないよ～><」
と悩んでいた人間が、
GoogleChrome上でパッと目的のファイルを見つけられるようになるまでの記録です。
同じような悩みを抱えた新人の方の悩みを解消できれば幸いです。

:::note info
これはあくまでも「デベロッパーツール初心者がやっと辿り着けた方法」です。
もっと効率的な探し方がありましたら教えて頂けるととてもうれしいです。
:::

#デベロッパーツールを使いこなせていなかった
そもそも使いこなせていなかったんですよね、F12で簡単に呼び出せるアイツを。（今も使いこなせてはいないです）
視野の狭い私は**Sourcesパネル内でこれっぽい！とアタリを付けたファイルを1つ1つ検索**していました。
どのファイルに記述があるかわかっている場合はそれでもまあいいのですが、そうではない場合時間がかかってしまいます。
恥ずかしいことに「まとめて検索できる機能がほしい」とすら思っていました。

私が気付けてGoogleに気付けないことなどあるわけがないのに。

#Ctrl+Shift+fを利用する
もう一度言います、<font color="Red">私が気付けてGoogleに気付けないことなどあるわけがないのです。</font>
答えは`「Ctrl+Shift+f」`でした。

例として https://www.google.com/ を見てみましょう。
まず通常通りF12でデベロッパーツールを立ち上げます。
見慣れた画面ですね。
![google_top.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1983999/1e1727b9-1bb4-b964-1c32-2b0bd0520649.jpeg)
そして`「Ctrl+Shift+f」`を押すと検索ボックスが現れます。
![google_top2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1983999/019f1466-5fa2-0acb-96e7-bf8dff46a8d4.jpeg)
現れた検索ボックスに任意の文字列を入れると
![google_top3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1983999/ce5d27c6-aeb2-568c-da48-3876eaaa5e27.jpeg)
このように、どのファイルのどこにその記述あるのかが全て表示してくれます。
わざわざSourcesパネル内で1つ1つ探さずとも目的のファイルをパッと見つけやすくなりました。

#Coverage機能を利用する
こちらは不要なjs（とcss）を探すのに便利な機能です。
![google_top5.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1983999/10f09413-4479-ab22-531f-3ecdab06a1ea.jpeg)
赤丸のところを押すと
![google_top7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1983999/0d032877-f2e6-8373-39c9-615217ecc25c.jpeg)
その他のツール一覧が出てくるので「カバレッジ」を押し、表示される説明の通り再読み込みボタンを押すと、
![google_top4.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1983999/98ef6f95-5bd4-1bdb-4fa2-26e20ddd9b9b.jpeg)
このように使われている部分は青く、逆に使われていない部分は赤く表示されるため不要な部分を探す目安になります。
※必要な部分も赤く表示されてしまう場合があるので、動作を確認しながら作業すると良いかもしれないです。

#デベロッパーツールを使いこなしたい
私が知らないだけで、デベロッパーツールにはもっと便利な使い方がたくさんあるはずです。
これからも仕事をするうえで欠かせないものなので、もっと仲良くなれたらなと思います。
【Rails】deviseで使用できるヘルパーメソッド一覧

## はじめに
　本記事は、プログラミングの学習を始めて1ヶ月の初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

## deviseで使用できるヘルパーメソッド一覧

```

before_action :authenticate_user!　　　# コントローラーにの先頭に記述して、ログイン済ユーザーのみにアクセスを許可する。onlyで特定のアクションのみに設定したり、exceptで特定のアクションを除外することができる。

user_signed_in?   # ユーザーがログイン済みか否かを判定する

current_user   # サインインしているユーザーを取得する

user_session   # ユーザーのセッション情報にアクセスする

```

上記の`user`の箇所については、他のモデル名を使用している場合には、そのモデル名に書き換える必要があります。

### before_action :authenticate_user!
アクセス権限の設定を行います。ログイン後のみアクセスできるページを作りたい時に設定します。
viewでif文を使い、画面遷移のためのボタンをログインしていない場合には表示しないように設定すれば良いように思えますが、前述の方法だとurlを直接入力すると画面遷移をすることができてしまうため、`before_action :authenticate_user!`をコントローラーに記述する必要があります。
onlyで特定のアクションのみに設定したり、exceptで特定のアクションを除外することができます。

### user_signed_in?
ユーザーがログインしているかどうか判定します。ログイン時と非ログイン時でヘッダーの表示を変更する際にif文の条件として使用したりします。

### current_user
現在、ログインしているユーザーをモデルオブジェクトとして利用できます。
簡単に現在のユーザーのID等を取得できるため非常に便利で、使用頻度も高いです。

### user_session
ユーザーのセッション情報を設定・取得するためのメソッドです。

## おわりに
上記以外に備忘録として記載する必要のあるものについては、随時追記する予定です。
パンくずリストと階層表現

この記事は [驚異のFANZA女優検索](https://fanza-actress-bust-search.azurewebsites.net/) Advent Calendar 2021 の 18 日目の記事です。

#パンくずリスト
パンくずリストを作ろうと思った。理由の一つはTwitterのツイートで作品ページに直接飛ぶという導線が出来たため。最初作ったときは作品ページから始まる前提がなかったため戻るボタン以外の移動を考えていなかった。ナビゲーションバーを使えばTOPや検索も使えはするが、女優ページに戻す導線はない。そこでパンくずリストを作れば作品ページから女優ページに移動することが出来るようになると思って作った。

#パンくずリストは見た目が階層表現
パンくずリストを作るにあたって、見た目が気になった。パンくずリストは、フォルダのように階層構造になっているように見える表現だ。
>トップ / 女優 / 作品

しかし実際にデータは階層構造にはなっていない。もちろんデータとビューが同じである必要は必ずしもないが、これを機に見直してみた。

#URLも階層に
URLは女優と作品は兄弟つまり同じ階層表現になっていた。actressとproductは同じ階層。

```cs
[Route("/home/actress")]        //女優のページ
[Route("/home/product")]        //作品のページ
```
そこでルーティングを以下にした。

```cs
[Route("/actress/{id}")]						//女優のページ
[Route("/actress/{actressId}/product/{id}")]	//作品のページ
```
これでURLも階層になった。つまり作品のページのURLからproduct/{id}の部分を削れば女優ページに上がれるようになった。エクスプローラーでも上の階層に上がりたいときに手動でパスを切るのはよくやることだと思う。それが可能になった。

#ルーティングを変えた場合のリダイレクト
URLのルーティングを変えたので、以前のURLをリダイレクトするにはどうすれば良いかちょっと悩んだ。結論から言えば両方のルーティングを書いておくだけで良い。つまり以下のようにしておくだけで、以前のURLが来ても新しいURLが来ても結局同じページが表示される。特にリダイレクトする必要もない。このページの中でリンクなどから他のページに遷移する時は既に新しいページのリンクになっているはずなので、これで問題ないと思う。

```cs
[Route("/home/actress")]        //女優のページ
[Route("/actress/{id}")] 
public async Task<IActionResult> Actress(int id, int page = 0, string count = "")
```

#データも階層に
データベースのデータは女優と作品は親子関係にはなっておらず兄弟関係だ。もしデータが親子関係ならば例えば1本の作品に3人の女優が出演している場合、それぞれ女優ごとに作品データを作る必要がある。その場合まったく同じ内容なのにデータ量が3倍になってしまう。そこで親女優と子作品のIDだけのデータを作って、そこをみるようにした。これで実データは1個だけど、階層とすることができる。

#データは最低限で、URLは最大限、ページの差異はパンくずリストのみとなる
具体的には女優3人で同じ作品に出ている場合パンくずリストは以下になる。
>トップ / 女優A / 作品X
>トップ / 女優B / 作品X
>トップ / 女優C / 作品X

データとしては女優3人分で作品は1作品分。3作品のページの差異はパンくずリストの女優の所だけであとは一緒。これで実際の作品数は大体20万だが、URLは50万以上になった。データが増えるとパフォーマンスなどにデメリットがあるが、URLが増えることにはあまりデメリットはないし、そのサービスの情報量の多さに繋がるので、むしろメリットだと思う。


#ページ移動を立体的にできるように
パンくずリストを作って階層を上がれるようにしたが、パンくずリストはあまり大きくしてしまうと邪魔だと感じたので小さくしてある。そうするとそもそも気づかない人もいる。そこで、さらに作品の画面下部に、その女優の前の作品と次の作品と女優のページにも飛べるリンクを作った。導線として親に上がることも兄弟に飛ぶことも出来るようになった。ページが点だと、兄弟に飛べれば線、親に飛べれば面になる。この立体的にページを飛べるような仕組みは結構重要だと思ったのでさらに広げていきたい。
kubernetes環境でlokiがログを保存し損ねるケース

# 環境

- kubernetes 1.21
- loki 2.4
- agentはpromtail

# 状況

jobやcronjobの処理が一瞬で終了する場合、ログを保存できないことがある

# 調べたこと

- 処理時間が大体1秒以下くらいで保存できないことが多くなる
- promtailがpodをターゲットに追加できていない
    - promtailのkubernetes target discoveryはprometheusのものを使っている
    - kubernetes apiをwatchしていて、ポーリングではない
        - podの作成から補足できてないのか、そこはできてるけどログのターゲットに追加できないのか、は不明
- kubectl get po -wで見る場合は、ログ保存できないようなpodでも作成は補足できている

ちょっとよくわからないですね…

# 対応

原因がちゃんとわかってないので、見える範囲でちゃんと保存できてるよ、という対応になります

### Jobの場合

- `spec.ttlSecondsAfterFinished` を使ってpodの寿命を伸ばす
    - 10秒くらいにしとけば間違いないでしょう

### cronJobの場合

- 現状の設定の`spec.successfulJobsHistoryLimit`が1以上の場合
    - 特に対応しなくてもこの現象は起きてないはず
- 現状の設定の`spec.successfulJobsHistoryLimit`が0の場合
    - `spec.successfulJobsHistoryLimit`を1にする
    - `spec.jobTemplate.spec.ttlSecondsAfterFinished`を設定する
        - これも10秒くらいで

successfulJobsHistoryLimitの設定で残ったpodがずっと残らずに、10秒くらい残って消える動作になります

# その他

### preStopは使えない
preStopはapiserverからのpod削除命令でトリガーなので、自らのexitで終了するjobでは発火しません

### サイドカー戦法
サイドカーコンテナ立てて`sleep 10`するのでも一応保存できました、よくわからないけど…

# そもそも

1秒未満で終了するようなjobのログなんていらないかもしれないですけど
正常動作で出てるはずのログが保存されてないのは何かあった時にミスリードを誘います
最近Qiitaの「質問」・「意見交換」について使用方法が雑になってませんか、という話

# はじめに(タイトルそのままです)
2021年現在、「これはどうなのだろうか」と思う色々を拝見しての意見です。


## 諸注意
最初に諸注意として以下を記載します。
(1) タグが「ポエム」の通り本投稿には一切、技術的記述がございません。(コード、数式etc...)
(2) 特定の「誰か」や「何か」を指して否定するものではございません。
(3) 主観による記事ですので直接意見をいただいても対応いたしかねます。

## 本題
以下2点です。
(1) 「質問」が投げっぱなしになっていませんか。
(2) 本当に「意見交換」ですか。

### (1)について
　※質問の方法、内容については問いません
　分からないから質問する。これは非常に大切なことだと思います。
　が、せめて解決したら「☓☓できました」、しないなら「〇〇ですが△△」、もしくは「□□してみます」
　くらいの反応はしても良いと思います。(最終的にはクローズが望ましいですが。)

　回答してくださる方々の
　知識も時間もどこからか自然に湧いてきたわけではありません。
　
　焦っているから
　色々なサイトで質問したり
　解決したら失念することもあるかもしれませんが
　フィードバックすることも
　情報交換に繋がると思うので是非してはいかがでしょうか。
　※質問の結果、追加質問しても誰も否定はしません。
　　誰しも知らないことはあるのが当然だと思って
　　恐れずフィードバックしてみましょう。
　　
### (2)について
　「意見交換」としていますが
　「質問」になっていることはありませんか。

　※書いておきながら言葉にすることがなかなか難しいので
　　色々荒が目立ちます。ご容赦ください。

　私の主観ですが、おおよそ以下の場合が「意見交換」ではないかと考えております。
　(i)  まず「～」という題材を提示する、
　(ii) (i)の「事実」に対して自分なりの実現方法、もしくは仮説・実施結果・データなどを提示する。
　(iii) 提示したモノについて意見を交換し合う。

　上記(ii)～(iii)について
　「どう思うか」、「どうすれば効率が良いか」等ではなく
　「～知りませんか」、「どうしましょう」等(i)の「事実」自体を「質問」しているように
　見受けられることが多いように感じられます。

## おわりに
非常にざっくり記述しましたが
「なんとなく」でも言いたいことが伝われば幸いです。
FlexBox チートシート

# Flex Box

今回はFlexBoxについて取り扱う．
これさえ分かれば，画面の二段組も簡単に！

昔の書き方だとtableを使い，無理やり二段組みをしていたけど，今回でその古臭い書き方はやめよう！

## 親要素に指定(デフォ：横並び)

```css
display: flex;
```

## 親に指定するプロパティ

### 並ぶ向き

```css
/* 左から右(デフォ) */
flex-direction: row;
/* 右から左 */
flex-direction: row-reverse;
/* 上から下 */
flex-direction: column;
/* 下から上 */
flex-direction: column-reverse;
```

### 折り返し

```css
/* なし(デフォ) */
flex-wrap: nowrap;
/* 右端から左下 */
flex-wrap: wrap;
/* 右端から左上 */
flex-wrap: wrap-reverse;
```

#### 同時使用

```css
/* 左から右，折り返さず(デフォ) */
flex-flow: row nowrap
```

### 水平方向の揃え

```css
/* 左揃え(デフォ) */
justify-content: flex-start;
/* 右揃え */
justify-content: flex-end;
/* 中央ぞろえ */
justify-content: center;
/* 間の等間隔 */
justify-content: space-between;
/* 等間隔 */
justify-content: space-around;
```

### 垂直方向の揃え

```css
/* 伸ばす */
align-items: stretch;
/* 頭揃え */
align-items: flex-start;
/* けつ揃え */
align-items: flex-end;
/* 中央 */
align-items: center;
/* 文字位置ぞろえ */
align-items: baseline;
```

### 複数行にした時の揃え

```css
/* 伸ばす */
align-content: stretch;
/* 頭揃え */
align-content: flex-start;
/* けつ揃え */
align-content: flex-end;
/* 中央 */
align-content: center;
/* 間の等間隔 */
align-content: space-between;
/* 全体等間隔 */
align-content: space-around;
```

## 要するにデフォルトは

```css
display: flex;
/* 並ぶ向き 左から右(デフォ) */
flex-direction: row;
/* 折り返し なし(デフォ) */
flex-wrap: nowrap;
/* 水平方向 左揃え(デフォ) */
justify-content: flex-start;
/* 垂直方向 揃え無し */
align-items: normal;
/* 複数行にした時の揃え 上揃え */
align-content: flex-start;
```
DockerでDjango開発環境を作成する

Docker、Djangoの環境構築はよく使うので自分用にメモ。
何かあればコメントください。

##結論
下記Dockerfile、requirements.txtを作成する。

```Dockerfile
#pythonのバージョン3.7-alpineイメージを使用する
FROM python:3.7-alpine

#プロジェクトの管理者が誰かを記載する。
LABEL maintainer = "samplejp<sample.com>"

#標準出力に出力されるバッファを無効化する('1'じゃなくてもいい)
ENV PYTHONBUFFERED 1

#ソース側のマシンにあるrequirements.txtをImage側のマシンへコピーする。
COPY ./requirements.txt /requirements.txt

#pipコマンドを最新にし、requirements.txtファイル内のパッケージをpipインストールする。
RUN pip install --upgrade pip && pip install -r /requirements.txt

# appディレクトリを作成しappディレクトリに移動。
# ソース側のマシンにあるappフォルダをImage側のマシンへコピーする。
RUN mkdir /app
WORKDIR /app
COPY ./app /app

# "user"ユーザーを作成する。
RUN adduser -D user
# 以降のコマンドの実行者を"root"から"user"ユーザーに変更する。
USER user
```

```requirements.txt
# Django3.1
Django==3.1

# 他にインストールしたいものがあればここに記載する。
# 例：pythonでMySQLに接続するためのドライバ
mysqlclient
```

##解説
```Dockerfile
FROM python:3.7-alpine
```
pythonのバージョン3.7-alpineイメージを指定。
もしNumpyやscikit-learnを使いたい場合はalpineよりslimの方が適している。
他のLinuxディストリビューションについてはこちらを参照
https://www.ted027.com/post/docker-debian-difference/

```Dockerfile
MAINTAINER Aquariummer App Developer Ltd
```
プロジェクトの管理者が誰かを記載する。オプショナルなので、なくても動作するがあったほうが良い。
[2021/12/18追記]docker 1.13以降はMAINTAINERではなくLABELを使用したほうが良いとのこと。

```Dockerfile
LABEL maintainer = "samplejp <sample.com>"
```
https://github.com/moby/moby/pull/25466

```Dockerfile
COPY ./requirements.txt /requirements.txt
```
ソース側のマシンにあるrequirements.txtをImage側のマシンへコピーする。
ADDではなくCOPYを使用する理由

https://snyk.io/blog/10-docker-image-security-best-practices/

```Dockerfile
RUN pip install --upgrade pip && pip install -r /requirements.txt
```
pipコマンドを最新にし、requirements.txtファイル内のパッケージをpipインストールする。
pipコマンドを最新化する理由はパッケージ管理で生じるエラーのリスクを軽減するため。

```Dockerfile
RUN adduser -D user
```
"user"ユーザーを作成する。
ユーザー名はなんでも良い。
root権限で作業すると外部からファイルが閲覧可能な状態となる。
セキュリティ的によろしくないので一般ユーザーを作成し、場合によっては別途権限を付与する。
useraddコマンドを使用する場合は-mが必須
例：RUN useradd -m ${USER}
adduserとuseraddの違いはこちら
https://qiita.com/amedama/items/f45677cd944c42cde839
一言で言うとadduserは対話的、useraddは独話的。自動で立ち上げたいファイルは独和的にやったほうが楽なのでuseraddを使用したほうが楽。

```Dockerfile
USER user
```
コマンドの実行者を"root"から"user"ユーザーに変更する。
【flutter】iOS開発・リリースプロセス時に遭遇した解決困難だったエラーの解決方法

## この記事の目的

flutterで開発をしていて、なかなか解決できなかったエラーをまとめる。

## エラー1: `xcode doesn’t support xx’s iOS 15.1 (19B74).`

### 問題点
実機テストを行おうとした際に、

```
xcode doesn’t support xxxxx’s iOS 15.1 (19B74).
```

とエラーが出て実機テストができない。

### 解決方法

- 以下のページから、該当versionのファイルをダウンロードする。

https://github.com/filsv/iPhoneOSDeviceSupport 
![スクリーンショット_2021-12-18_0_50_57.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270898/1cc78f75-8c37-cd5f-8e6e-aec4a29fa302.jpeg)

 
- ダウンロードしたファイルを解凍して、以下のフォルダに移動する。

```
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport
```

![kota-ninomiya_—_-bash_—_122×31.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270898/f39337cb-51b7-d454-b17c-3f30c87981dc.jpeg)


- Xcodeを再起動して、再度実機ビルドを試す。

### 参考ページ

https://exerror.com/xcode-doesnt-support-iphones-ios-15-0/

https://qiita.com/yu_okb/items/4d20c8a7601b97769d18


## エラー2: `Invalid Bundle. The bundle <your.app> does not support the minimum OS Version specified in the Info.plist`

### 問題点

アプリをapple store connectにアップロードしようとしてvalidationを行うと、上記のエラーが出てアップロードすることができない。

### 解決策
#### ネットでたくさんヒットする解決策

- `/ios/Flutter/AppframeworkInfo.plist`の MinimumOSVersion を 13.0 にする
- プロジェクトの iOS Deployment Target を 13.0にする
- ターゲットの iOS Deployment Target を 13.0にする
- flutter cleanしてから再ビルド

**しかしながらこの解決策では解決しなかった。**

##### 参考ページ

https://qiita.com/kz23szk/items/d2baf5f9ac84041ed07b

https://qiita.com/sekitaka_1214/items/d9134ed74519ad8ff975

https://zenn.dev/sakutech/articles/does-not-support-the-minimum-os-version



#### ようやく辿り着いた解決策

**flutterのversionを、stableのchannelを利用する。**

flutterのバージョンには、以下の4つのchannelがあり、機能や安定性に差がある。
そのため、安定している`stable`のchannelのversionを利用するようにする。

- stable
- beta
- dev
- master

実際に利用しているchannelを確認したら`dev`だった。。。
以下のページに従ってchannelをstableにし、バージョンも更新する。

https://qiita.com/tktcorporation/items/7a89dca3da890123de95

その後、以下のコマンドを順に実行後に再度validationを実行すると、無事成功！！！

```
flutter clean
flutter pub get
cd ios
pod install
```

##### 参考ページ

https://stackoverflow.com/questions/69290180/flutter-cannot-publish-to-ios-with-xcode-13
アンリアルクエスト２から得られたもの。

この度、2回目となるアンリアルクエスト２に参加。
前回のクエストのようなゲーム制作の手法を見せるのではなく、彩りというか演出に関わる部分が出題された。
非常にセンスを問われるような課題であった。

課題
1日目初級：好きなアセットを配置しよう
1日目中級：揺らめく旗を立てよう
1日目上級：スプラインに沿ってモノを効率よく配置しよう

2日目初級：ライティングを全種置こう
2日目中級：時間を変化させよう
2日目上級：ライトシャフトを作ろう

3日目初級：松明を作ろう
3日目中級：歩くと煙が立つ
3日目上級：ゴール演出を作ろう(Niagaraを使ってみよう)

4日目初級：松明に音を付けよう
4日目中級：歩くと足音が鳴る
4日目上級：歩く地面によって足音を変えよう

5日目初級：温かみか冷たさを感じる色味をつくろう
5日目中級：ダメージを受けた時の表現をつくろう
5日目上級：物陰に隠れるとシルエットになる

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
全体のプランは以下のようになっています。
![全景.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/901468/60e82e20-4313-dab2-a8b6-2e31bf1c23a7.jpeg)
![全景アイソメ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/901468/e27ae265-399b-41f2-4e64-47592a4dba70.jpeg)

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
今回、私が特にこだわったことをご紹介します。
１、音の効果に係る細工。
![sound.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/901468/d00d23cd-a428-391f-7162-a761116773d8.jpeg)
添付の図のようにほぼ隙間なくどこでも何がしかの音が聞こえるように配置しています。
使用したサウンド
・剣の戦い_01_Cue
・合戦場で軍勢が突撃_01_Cue
・激しい格闘シーン_01_Cue
・焚き火_01_Cue
・砂利の上を走る_01_Cue

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
２、多くの登場人物を参加させる。
![戦い１.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/901468/53fb116a-b9e7-fb1a-e07d-c5529e9b2501.jpeg)
![戦い２.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/901468/67dd31a6-5f84-b8da-8c20-8a0afdc343ec.jpeg)
![戦い３.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/901468/128c7af5-af87-567c-5ab5-ed4599c89fc7.jpeg)
![猫たち.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/901468/747a0509-07b1-5101-c8bb-ce51937088fc.jpeg)
騎士たちの戦いに加え、猫たちにも参加していただきました。


＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
３、ダメージのアピール表現。
![イタイ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/901468/dbb803d3-d404-cce2-7c6e-f7af02b11a31.jpeg)
![blood.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/901468/0fca0372-cee3-a2b0-bda2-2bccad0fc3fd.jpeg)
この部分は表現に苦労した部分であります。何しろ血しぶきが飛び散る方向が定まらず。画像のように線になってしまうしまつでした。
かろうじてできた感を出せた感じです。

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
４、スプラインを利用した、asset配置。
![林.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/901468/5e36d98a-af00-bd2c-1066-4b3c646a001c.jpeg)
![spline.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/901468/b63d9d6e-4bac-8642-69d5-1c70bb9152d7.jpeg)

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
５、ポストプロセスによりファンタジー感を見せるため露出オーバーでbloomを多用。
![postprocess.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/901468/b8039e09-4662-a780-e3eb-a206c94d13c1.jpeg)

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
６、偽物ゴールと最後の演出。（Nigaraを使用すること。）
![偽ゴール.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/901468/579e4a81-d028-ab6d-00aa-df25427b3dce.jpeg)
![ゴール.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/901468/abfb1a55-62ad-80f6-47fe-f6a53e79eaa5.jpeg)
![niagara.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/901468/b327021c-bde8-a5ea-4d72-237f39851ef8.jpeg)
Niagaraについては初めて使用したため解らないことだらけで苦労しました。
もっと勉強したいと思います。


＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
最後に
アンリアルクエストに参加された皆様、また企画運営の方々お疲れさまでした。
次回を楽しみにしております。