OmniAICreator/Qiita-1.07M huggingface dataset:
Prisma Typescriptを利用しているときに、global.prismaがanyになるのをさける

# Prisma Typescript globa.prisma is not definedを避ける

## Ref

- [next/auth issue#824](https://github.com/nextauthjs/next-auth/issues/824)

## TL;DR

```index.ts
declare global {
    var prisma: PrismaClient;
}
```
を追加する。

## Description

Prismaを利用し始めた時に、`globalThis primsa is not declared`となっているためその回避方法。

### Package

```
- @prisma/client@2.30.0
- typescript@4.4.2
```

### 以下のファイルを想定

```lib/prisma.ts
import { PrismaClient } from '@prisma/client';

let prisma: PrismaClient;

if (process.env.NODE_ENV === 'production') {
  prisma = new PrismaClient();
} else {
  if (!global.prisma) {
    global.prisma = new PrismaClient();
  }
  prisma = global.prisma;
}

export default prisma;
```

以下のErrorを想定。

```
型 'typeof globalThis' にはインデックス シグネチャがないため、要素は暗黙的に 'any' 型になります。ts(7017)
```

## 解決方法

### 1. d.tsファイルを作成

```types.d.ts
declare global {
  namespace NodeJS {
    interface Global {
      prisma: any;
    }
  }
}
```

### 2.  next-env.d.tsに追記

nextを利用している際は、1の対応ができないためnex-env.d.tsに追記します

```next-env.d.ts
/// <reference types="next" />
/// <reference types="next/types/global" />


declare global {
    namespace NodeJS {
        interface Global {
            prisma: any;
        }
    }
}
```

### 3. Errorの箇所ににdeclareをそのまま指定する

```lib/prisma.ts
import { PrismaClient } from '@prisma/client';

declare global {
    var prisma: PrismaClient;
}

let prisma: PrismaClient;

if (process.env.NODE_ENV === 'production') {
  prisma = new PrismaClient();
} else {
  if (!global.prisma) {
    global.prisma = new PrismaClient();
  }
  prisma = global.prisma;
}

export default prisma;
```
Igor_画像表示

Igorを使って二次元画をProcedureで表示する練習用コードです。
このような状態で二次元プロット画像を一枚、中心軸に沿った断面積プロットを右と下に表示するProcedureを作成します。
![Graph1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1950929/5369530e-0a09-0bba-1a47-10ae6a564162.jpeg)

使用するFunctionは作成用と表示用の二つですが個人的にグラフの表示設定の共通部分には一つ別でProcedureを使うのが好きなので合計三つになっています。

```
二次元画像作成
Function MakeWave(angle)

Variable angle					//角度の設定
Variable WL,Wid,phi,theta		//波長、ビーム幅、位相、角度の指定(角度はdeg→radの修正)
	WL = 1e-6
	Wid = 2e-6
	phi = 0
	theta = angle/360*(2*pi)

Variable Cell_x,Cell_y		//Cell数の決定
	Cell_x = 1000
	Cell_y = 1000
Variable Min_x,Max_x,Min_y,Max_y	//x軸y軸それぞれの最大値と最小値を指定
	Max_x	= 10e-6
	Max_y	= 10e-6
	Min_x = -Max_x
	Min_y = -Max_y
Variable Step_x,Step_y		//cell数と最大最小値からwaveのstep間隔を決定
	Step_x = (Max_x-Min_x)/Cell_x
	Step_y = (Max_y-Min_y)/Cell_y

Make/o/d/n = (Cell_x,Cell_y) tesWave	//二次元Waveの作成
	Wave test = testWave
	setscale/p x, Min_x,step_x,test		//Waveのセル間隔を指定
	setscale/p y, Min_y,step_y,test

	test = sin(2*pi*(cos(theta)*y+x*sin(theta))*WL^(-1)-phi)*exp(-((y*sin(theta)-x*cos(theta))/Wid)^2)	//sin関数とGaus関数で分布を決定
end
```
```
グラフ表示設定(共通部分)
Function set()
ModifyGraph tick=2,mirror=2,btLen=3,font="Arial"
end
```
```
グラフ表示設定(三枚同時表示)
Function Disp()

String Filename = "testWave"
Variable Rside,d_image,d_graph,r_image,r_graph
	Rside = 450
	d_image = 220
	d_graph = 350
	r_image = 300
	r_graph = 450
Variable range = 1
Variable i,j
Wave DWave = $(FileName)

Display/k=1/W = (0,0,RSide,d_graph)
Display/W = (0,0,R_image,d_image)/host=#;AppendImage DWave
ModifyImage $(FileName) ctab = {-range,range, Rainbow,0}
set()
Label left "Position [μm]"
Label bottom "Position [μm]"
ModifyGraph prescaleExp=6
ModifyGraph zero=1

Display/W = (0,d_image,R_image,d_graph)/host=##;Appendtograph DWave[][500]
set()
ModifyGraph prescaleExp(bottom)=6, prescaleExp(left)=0
ModifyGraph rgb=(0,0,0)
Label left "Intensity [a.u.]"
Label bottom "Position [μm]"

Display/W = (r_image,0,Rside,d_image)/host=##;Appendtograph DWave[500][]
Modifygraph swapXY = 1
ModifyGraph prescaleExp(left)=6, prescaleExp(bottom)=0
ModifyGraph rgb=(0,0,0)
set()
Label left "Position [μm]"
Label bottom "Intensity [a.u.]"

end
```
SpringBoot × Gradleでプロジェクトを作ってSTS(Eclipse)にインポートするまで

SpringBoot × Gradleでプロジェクトを作ってSTS(Eclipse)にインポートするまでに地味に苦労したので、同じ轍を踏まないよう備忘録を残しておく。

# Spring Initializrを使ってプロジェクトを生成する
Spring公式が便利なツールを提供してくれている↓
https://start.spring.io/

アクセスすると以下のサイトに遷移し、条件を指定してGENERATE押下でSpringBootのプロジェクト一式をzipで生成してくれる。
![スクリーンショット 2021-08-29 19.44.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159675/9a4ff877-6adf-6bce-60ed-6df6ceea5281.png)

今回自分の場合はJava8で試したいことがあったため、`Java`のラジオボタンを８にし、ArtifactとNameを適当に変更してGENERATEした。

# ひとまず動作確認
生成したzipを展開して、以下コマンドでちゃんと動くか確認しておく。

```sh
$ ./gradlew bootRun
```

↓みたいになればOK。ここでコケることはまあないはず。

```
> Task :app:bootRun

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::        (v2.2.1.RELEASE)

2019-11-12 22:14:43.819  INFO 1389 --- [           main] o.g.samples.SpringBootDemoApplication    : Starting SpringBootDemoApplication on localhost with PID 1389 (/home/user/build/classes/java/main started by user in /home/user)
2019-11-12 22:14:43.820  INFO 1389 --- [           main] o.g.samples.SpringBootDemoApplication    : No active profile set, falling back to default profiles: default
2019-11-12 22:14:44.108  INFO 1389 --- [           main] o.g.samples.SpringBootDemoApplication    : Started SpringBootDemoApplication in 5.537 seconds (JVM running for 5.8)

BUILD SUCCESSFUL
3 actionable tasks: 3 executed
```

# STS(Eclipse)でインポートするために一工夫加える
SpringBoot × Gradleのプロジェクトはこれで完成したわけだが、コーディングはSTSでやりたいので、もうひと手間必要である。

プロジェクトディレクトリ直下にあるbuild.gradleのpluginsに`id 'eclipse'`を追記する

```diff:build.gradle
plugins {
	id 'org.springframework.boot' version '2.5.4'
	id 'io.spring.dependency-management' version '1.0.11.RELEASE'
	id 'java'
+	id 'eclipse'
}

group = 'com.example'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '1.8'

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

test {
	useJUnitPlatform()
}
```

そして以下コマンドを実行

```
$ ./gradlew eclipse
```

↓

```shell

BUILD SUCCESSFUL in 8s
3 actionable tasks: 3 executed
```

これで、STSでインポートできるようになる。

# STSにインポートして起動確認
ここはEclipseに慣れてる方なら問題ないはず。

File -> Import -> General -> Existing Projects into Workspace
→プロジェクトディレクトリ選択してFinish

左下のBootDashboardからアプリ起動して、起動成功ログが出るか確認する。
![スクリーンショット 2021-08-29 20.00.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159675/b890058e-f06b-9708-8826-fc362cf8b29f.png)

以上！

# 参考
https://qiita.com/grachro/items/d1ebad3857a794895426#%E6%96%B9%E6%B3%95%EF%BC%92gradle-ide-pack%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%A7eclipse%E4%B8%8A%E3%81%8B%E3%82%89%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90

https://docs.gradle.org/current/samples/sample_building_spring_boot_web_applications.html#header
Dockerでwordpressセットアップ

#はじめに
下記を参考にDockerを使ってWordPressを立ち上げようとしてみたらDB接続確立エラーが発生しました。
その時の対処を備忘録として記載しておきます。

<p>「<a href="https://qiita.com/kaityo256/items/0236db8b3d92ee45f77b">CentOS7にDockerでWordPressを入れる</a>」</p>

#作業環境

```
・AWS Amazon Linuxサーバ
　Amazon Linux release 2 (Karoo)
・Docker20.10.7
```

#作業結果
![cloudmaster.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1949705/25ef0ef2-c509-1e47-dfaf-aa47c9e52839.png)

#作業工程
・Dockerのインストール、Dockerの起動
・コンテナを作成し、wordpressインストール
　→DB接続エラーが発生し、中断
・コンテナ内でvimのインストールとwp-config.phpの編集
　→wordpressインストール完了


#Dockerのインストール、Docker daemonの起動
・dockerのインストール

```
yum install docker
```

・インストール後のバージョン確認

```
docker -v
Docker version 20.10.7, build f0df350
```

・Dockerの起動

```
systemctl start docker
```

・Dockerの状態確認

```
systemctl status docker
● docker.service - Docker Application Container Engine
   Loaded: loaded (/usr/lib/systemd/system/docker.service; disabled; vendor preset: disabled)
   Active: active (running) since Sun 2021-08-29 04:34:09 UTC; 5h 43min ago
     Docs: https://docs.docker.com
  Process: 7585 ExecStartPre=/usr/libexec/docker/docker-setup-runtimes.sh (code=exited, status=0/SUCCESS)
以下略
```
・Dockerの実行
上記サイトではエラーが出ていますが出ませんでした。

```
docker ps
CONTAINER ID   IMAGE     COMMAND   CREATED   STATUS    PORTS     NAMES

```

#コンテナを作成し、wordpressインストール

コンテナ作成

```
docker run --name mysql -e MYSQL_ROOT_PASSWORD=mysqlpassword -d mysql:5.7
docker run --name wordpress --link mysql:mysql -d -p 8080:80 wordpress

```

起動しているコンテナの確認

```
docker ps -a
CONTAINER ID   IMAGE       COMMAND                  CREATED          STATUS          PORTS                                   NAMES
5200b39bef3a   wordpress   "docker-entrypoint.s…"   32 minutes ago   Up 32 minutes   0.0.0.0:8080->80/tcp, :::8080->80/tcp   wordpress
3ed4556afe3c   mysql:5.7   "docker-entrypoint.s…"   33 minutes ago   Up 33 minutes   3306/tcp, 33060/tcp                     mysql

```

プラウザでを以下URLを叩くとWordPressの画面が表示され、セットアップ時にDBの接続情報を正しいのを入力しているのにDB接続確立エラーが出てセットアップが進まない。
エラーの対処として以下3点が記載されていた。

「http://VMのIPアドレス:8080」

![F32Wp01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1949705/287a23a6-6503-1d13-de8c-c91e655c3018.png)

#コンテナ内でvimのインストールとwp-config.phpの編集

エラーの対処としてwp-config.phpにDB接続情報を記載してみたら解決した。
しかしコンテナ内でファイル編集のためにviをするとエラーが発生。

```
docker exec -it 5200b39bef3a bash
vi wp-config.php
bash: vi: command not found
```

そこでコンテナ内でvimのインストールの実施

```
apt-get update
apt-get install vim
```

wp-config.phpの編集をして、セットアップが完了しました。

```
vi wp-config.php

以下の箇所に記載
define( 'DB_NAME', 'wpdb' );

/** MySQL database username */
define( 'DB_USER', 'wpadmin' );

/** MySQL database password */
define( 'DB_PASSWORD', 'xxxxxx' );

```
Perl/TkとPAR::Packerで、選択したテキストファイルを整形するGUIアプリを作る



## 概要

前回の記事「[Perlスクリプトファイルをexe化したい](https://qiita.com/sk_alpha/items/4e118f5f448009d2c711)」で単純なテキストを表示させるスクリプトをexe化しました。

今度は、GUIでファイルを選択して、テキストデータを整形するプログラムをPerlで作ってみたくなりました。



## 環境

前回と変わりません。

- Windows 10 Home
- 64 ビット オペレーティング システム
- 20H2
- OSビルド:19042.1165
- perl v5.32.1 built for MSWin32-x64-multi-thread
- C:\Strawberry\perl\bin/cpan script version 1.676, CPAN.pm version 2.28



## Perl/Tkのインストール

参考サイト1. [Perl/Tk を使った GUI プログラミング (前編)](http://www.nct9.ne.jp/m_hiroi/perl_tk/perltk_gui1.html)を見ながらTkというモジュールをインストールする。これを使うとGUIアプリが作れるらしいです。

```bat
cpan> install Tk
中略
C:\STRAWB~1\c\bin\gmake.exe install UNINST=1 -- OK
```

１～２分でインストールが完了しました。



## GUIアプリ化するコード

これも参考サイト2. [Perl/Tkで日本語のファイル名を使う(Win32)](https://hardsoft.at.webry.info/200802/article_4.html)のコードを少し変えます。

- 日本語ファイルは想定していないのでその部分を削除
- ファイル選択後に表示せず、テキスト処理するようにする
- 変数名がわかりにくいので変更

``` perl:text_process.pl
#!usr/bin/env perl
use utf8;
use strict;
use warnings;
use Tk;
use Encode;

my $main_window = new MainWindow;

$main_window->Button(-text=>'ファイル選択',-command=>\&text_process)->pack;
MainLoop;

sub text_process{
    my $filename=$main_window->getOpenFile;
    return unless($filename);
    open(my $fin, $filename) or die "$!:cannot open $filename\n";
    my @lines = <$fin>;
    my $text = join("",@lines);
    close($fin);

    #ファイル読み込み
    open(IN, $filename) or die "$!";

    #書き込みファイル作成
    open(OUT, ">output.csv");

    #ファイル全体を丸呑み
    $text = do { local $/; <IN>};

	#テキストを置換したり、なにか処理
    $text =~ s/ +/ /g; #文中のスペースを削除
    $text =~ s/^ / /g; #文頭のスペースを削除
    $text =~ s/\n//g; #改行を削除
	
	#中略
	
    #出力
    print(OUT "$text");

    #ファイルを閉じる
    close(IN);
    close(OUT);
}

```



## exe化

``` bat
pp -o text_process.exe text_process.pl
```



## 実行結果

テストデータは公開できませんが、うまいことデータが整形されました。



## 終わりに
誰かが散々やっていそうですが、はじめて自分でGUIアプリを作れたのでメモとして残しておきます。これを気にみんなが使える便利なスクリプトをどんどん作っていきたいですね。


## 参考サイト

1. [Perl/Tk を使った GUI プログラミング (前編)](http://www.nct9.ne.jp/m_hiroi/perl_tk/perltk_gui1.html)

2. [Perl/Tkで日本語のファイル名を使う(Win32)](https://hardsoft.at.webry.info/200802/article_4.html)

3. [Perlスクリプトファイルをexe化したい](https://qiita.com/sk_alpha/items/4e118f5f448009d2c711)

4. [Perlでファイルを丸呑みする3つの方法](https://qiita.com/mhangyo/items/081f15ece23d6249e74c)
用語集

refactoring
リファクタリング とは、コンピュータプログラミングにおいて、プログラムの外部から見た動作を変えずにソースコードの内部構造を整理することである。

validation
データのバリデーションといった場合、記述・入力されたデータが、あらかじめ規定された条件や仕様、形式などに適合しているかどうかを検証・確認することを表す。形式的な妥当性の検証であり、意味論的に適切な内容かどうかは判断しない。
Yocto QEMU X86_64の環境にssh,gdbを追加する

Yocto QEMU X86_64の環境にssh,gdbを追加する。

初回
$ git clone https://git.yoctoproject.org/git/poky
$ cd poky
$ source oe-init-build-env

build実施
$ bitbake core-image-minimal

起動確認
$ runqemu tmp/deploy/images/qemux86-64/ nographic

ここまでが素の状態の動作確認。


変更
local.confに以下を追加
#ssh
CORE_IMAGE_EXTRA_INSTALL += "openssh"

# gdbserver
CORE_IMAGE_EXTRA_INSTALL += "gdbserver"

再ビルド
$ rm -r ./tmp
↑これをしないとlocal.confが反映されない。

再ビルド
$ bitbake core-image-minimal

起動
$ runqemu tmp/deploy/images/qemux86-64/ nographic


別ターミナルから以下で接続可能。
$ ssh root@192.168.7.2

GDBがインストールされているか確認
$ gdb -v
Go言語 のpanic を正しくrecover する

# Go言語 のpanic とrecover について

## panic について
Go言語には、例外処理のために一般に使われるerrors に加えて、panic という処理が存在する。
基本的には回復不能と判断された実行時エラーを発生させる機構。

## recover について
panic を取得し、エラー処理を実装できる機構。これがないとプログラムはクラッシュしてしまう。

## 使用上の注意点
言語仕様なのでドキュメントを読めば書いてあるが、慣れた人ほど注意した方が良いこと

### recover() は関数内部で実行されることで初めてpanicを受け取ってくれる
下記のコードを実行すると、panic が回収されず、そのままプログラムが終了する

https://play.golang.org/p/K3wxb3EDLjT

```go
package main

func main() {
	recover()
	panic("パニックが回収されませんでした")
}
```


一方で次のコードのように、関数内部で受け取ってやることでちゃんとpanicが回収されて、プログラムが正常に終了する

https://play.golang.org/p/uho6UvqSFRc


```go
package main

import "fmt"

func main() {
	defer func() {
		if r := recover(); r != nil {
			fmt.Println("パニックが回収されました")
		}
	}()
	panic("パニックが回収されませんでした")
}
```

以上のように、panic は正しく受け取ってあげないとプログラムが全落ちしてしまうので気をつけて使おう。
WindowsPowerShellで画像分割

Windowsで写真加工をすることに。いつもはフリーソフトにお願いするのですが会社への承認が必要なためPowerShellで対応しています。ここはそのための備忘録兼スクリプト倉庫です。

###JPEG画像を縦方向で分割するスクリプト
ピクセルを分割して出た余りの幅は、各分割画像に割り振るようにしてあります。

```powershell:Divide-Jpg.ps1

#カレントフォルダからJpeg情報を取得
$jpg = dir -Filter *.jpg

# .NET Frameworkのアセンブリをロード
Add-Type -AssemblyName System.Drawing

#分割数
$div = 5

$jpg | %{

# 元画像読み込み
$oldbmp = New-Object System.Drawing.Bitmap($_.FullName)

# 元画像の名前とフォルダへのパス、分割画像を入れるファルダ作成
$name = $_.BaseName
$directory = $_.DirectoryName + "\$name"
mkdir $directory -Force > $null

# 元画像を縦に分割した幅と高さと余り幅。余り幅の挿入点。分割幅合計
$width = [math]::Floor($oldbmp.Width / $div)
$height = $oldbmp.Height
$remainder = $oldbmp.Width % $div
$insert = [math]::Floor($div / ($div - $remainder))
$sumwidth = 0


1..$div | %{

# 余りピクセルを入れる分岐
if(($_ % $insert) -ne 0){$add = 1}else{$add = 0}
$newwidth = ($width + $add)

# 分割幅でトリミング
$rect = New-Object System.Drawing.Rectangle($sumwidth, 0, $newwidth, $height)
$newbmp = $oldbmp.Clone($rect, $oldbmp.PixelFormat)

# トリミング画像保存
$path = Join-Path $directory -ChildPath (($_).ToString("00") + ".jpg")
$newbmp.Save( $path, [System.Drawing.Imaging.ImageFormat]::Jpeg)

#分割幅を合計する
$sumwidth += $newwidth

}

#オブジェクト破棄
$oldbmp.Dispose()
$newbmp.Dispose()

}
```

###分割した画像を合成するスクリプト
上とは逆に画像を合成するものです。

```powershell:Comvined-Jpg.ps1

#カレントフォルダからJpeg情報を取得
$jpg = dir -Filter *.jpg

# .NET Frameworkのアセンブリをロード
Add-Type -AssemblyName System.Drawing


# 幅と高さの合計
$SumWidth,$SumHeight = 0,0
$jpg | %{

    $bmp = New-Object System.Drawing.Bitmap($_.FullName)
    $SumWidth += $bmp.Width
    $SumHeight += $bmp.Height
    $bmp.Dispose()

    } 

# 合成先のオブジェクトを生成
$canvas = New-Object System.Drawing.Bitmap($SumWidth, ($SumHeight / $jpg.Count))

# 合成先へ描画
$graphics = [System.Drawing.Graphics]::FromImage($canvas)

$newwidth = 0

$jpg | %{

    $image = New-Object System.Drawing.Bitmap($_.FullName)

    $graphics.DrawImage($image, (New-Object System.Drawing.Rectangle($newwidth, 0, $image.Width, $image.Height)))

    $newwidth += $image.Width

}

# 保存
$path = Join-Path $jpg[0].DirectoryName -ChildPath "combined.jpg"
$canvas.Save($path, [System.Drawing.Imaging.ImageFormat]::Jpeg)

# オブジェクトの破棄
$graphics.Dispose()
$canvas.Dispose()
$image.Dispose()

```

##参考にさせていただいた記事
+ [PowerShellを使って画像ファイルをトリミングする方法](https://koyoshi50.com/powershell-trimming)
+ [PowerShell で画像の回転、リサイズを行う](https://qiita.com/miyamiya/items/d1a975fb6618d46eda0c)
Raspberry Pi Picoを使ってワンボタン昇龍拳を発動するマクロをつくる

<h2>寝食を忘れて打ち込んだゲーム</h2>
高校生から大学の頃、寝食を忘れて打ち込んだゲームが3つあります。
・ドラクエシリーズ
・ストリートファイターシリーズ
・F1シリーズ
ドラクエ1，2は復活の呪文を打ち込むことなく、ファミコンをつけっぱなしにしてぶっ通しでエンディングまで進んだり、F1シリーズでは全戦ポール・トゥ・ウィンでワールドチャンピオンになったりと徹底的に打ち込みました。しかし、格闘ゲーム(私の場合は=ストリートファイターシリーズ)はそこまで上達しませんでした。
ドラクエシリーズは根気さえあれば誰でもクリアできます。レーシングゲームは私は向いていたのでしょう。しかし、ストリートファイター(II、ターボ)は上級者のレベルには達しませんでした。

<h3>とても難しいコマンド</h3>
ストリートファイターには、有名かつ難関なコマンドが2つあります。ご存知<strong>昇龍拳</strong>と<strong>スクリューパイルドライバー</strong>です。昇龍拳は飛んでくる相手を撃ち落とす無敵技、スクリューパイルドライバーは相手に大ダメージを与えられる技です。それだけに出すのも難しくなっています。昇龍拳は、1Pの場合、右→下→右斜下+パンチを素早く入力しなければなりません。失敗すると波動拳になったり、パンチになったりします。スクリューパイルドライバーは方向キーを一回転+パンチと更に難しくなります。まぐれで1回位出せても、連発させるのは無理でした。連発させる必要はないかもしれませんが、<strong>出したいときに確実に出せる</strong>必要はあります。これができないとなかなか勝てません。そして、これができずになかなか勝てませんでした。

こんなふうに昇龍拳が出せたら・・・
![昇龍拳.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588692/c7e39ed1-edd2-1e86-bbc1-2dadd65376df.gif)
こんなふうにスクリューパイルドライバーが出せたら・・・
![スクリュー.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588692/94d8f829-c45d-9b0f-959f-b2de5f340420.gif)
ストリートファイターも楽しかったでしょうし、もう少し勝てたかもしれません。
<h2>究極の武器</h2>
このコマンドが難しいと思う人は少なくなく、ヤフー知恵袋などでも、
「1ボタンで昇龍拳を簡単に出せるような装置はないか」
という質問がしばしば出てきます。確かに、そんな装置があったら、初心者でももう少し楽しめるかもしれないと思ったものです。

技術屋の視点から見たら、<strong>コントローラーにマクロを仕込めたら実現は可能</strong>であることはすぐに分かりましたが、ゲーム機のあんな小さなコントローラーにどのように仕込むのか、そのときは回答が得られませんでした。

<h3>ヒットボックス</h3>
そこに一筋の光明がさしてきました。ヒットボックスという、ゲームコントローラーです。この中に、ボタンを制御する基板が入っています。しかもこれは、いろいろと改造が可能となっています。

<h3>わずか500円の心臓部</h3>
後はIO制御ができるマイコンさえあればいいと物色していた、まさにそのタイミングでRaspberry Pi Picoが登場しました。多分Raspberry Piシリーズでも実現はできたのでしょうけど、過剰な装備とスペックだと思っていました。しかしPicoであれば、過不足無いスペックになります。早速何個か購入し試したところ・・・ビンゴでした。実は上の動画は、マクロで作った2ボタン昇龍拳と1ボタンスクリューパイルドライバーになります。

昇龍拳は弱・中・強で分ける必要があるので、方向キーの右→下→右斜下入力をまとめるマクロだけにして、パンチボタンは自分で打つようにしています。スクリューパイルドライバーも同じようにしようと思ったのですが、タイミングがシビアすぎてコントローラーで出すより不確実になってしまいました。したがって、スクリューパイルドライバーはワンボタンで弱専用でつくりました。

先程も書きましたが、連打はさほど必要ではありませんが、百発百中の確実性は確保できます。また、フレームの調整をすればもう少し早く出すこともできるでしょう。すると、人間では出せないスピードで出すこともできるかもしれません。

<h2>ジレンマ</h2>
できることはわかりました。後は具体的なやり方ですが、果たして公開をしていいのかどうかを迷っています。技術屋の特性として見せびらかしたい、あるいは見てもらって改良してもらいたいという思いがあります。しかし、一方で格ゲー業界に素人が土足で入り込んでいいのかというのがあります。
ヒットボックスの使用自体が、色々と議論を呼んでいることは調べてわかりました。そのうえで究極の武器を公開してしまって大丈夫かという不安があります。

現状では公式の大会ではこのようなコントローラーを使うことは禁じられています。ですので、使って失格になったとしても、それはその人の責任になりますが、不幸な議論が起こることは間違いありません。一方で
競泳のレーザーレーサーやマラソンのアルファフライのように、道具が技術の発展に寄与する可能性もあります。また、どんなコントローラーを使ってもいいとか、コントローラーのための大会のようなものができたら素晴らしいという願いもあります。

Qiita読者の方に格ゲーに詳しい人がいたらぜひ教えてほしいと思います。
bundle configは使えるコマンド

# bundle configとは
`bundle config`とは、Bundlerの設定システムと対話を出来るものです。
※Bundlerは設定を、下記の優先順位に従って取得します。

1.ローカルのアプリケーション(app/.bundle/config)
2.環境変数
3.ユーザーのホームディレクトリ(~/.bundle/config)

## 基本的な使い方
現在バンドルされているの全てのBundler設定と、 どこにそれが設定されたのかを示す一覧を出力します。

```bash
$ bundle config
```

### 特定の設定を出力する
その設定の値と、それがどこに設定されたかを出力します。

```bash
$ bundle config [name]
```

### 全てのbundleの設定を行う
現在のユーザーとして実行される全てのbundleの設定に対して、値を指定します。設定は、`~/.bundle/config`内に格納されます。

```bash
$ bundle config [name] [value]

# 上記と同様の動作
$ bundle config --global [name] [value]
```

### ローカルに対してのbundleの設定を行う
ローカルのアプリケーションに対して設定をおこおないます。この設定は、`app/.bundle/config`に格納されます。

```bash
$ bundle config --local [name] [value]
```

### bundleの設定を削除する

```bash
$ bundle config --delete [name]
```

## ビルドオプション
bundlerへフラグを指定することで、特定のGemのインストールを行う度に、そのフラグをgemインストーラーに渡すことが出来ます。一般的なGemであるmysqlの例で説明しますと、 Snow Leopard(Mac OSXの)ユーザーは、mysql_configの実行ファイルが見つけられる場所を、 設定フラグとしてgem installに渡す必要があります。

```bash
# mysqlのGemのインストールをする際にフラグを渡す
$ gem install mysql -- --with-mysql-config=/usr/local/mysql/bin/mysql_config

# このコマンド実行以降、渡したフラグに沿ってGemのインストールを実行する
$ bundle config build.mysql --with-mysql-config=/usr/local/mysql/bin/mysql_config
```

# 参考
[bundle config]
(https://ruby.studio-kingdom.com/bundler/bundle_config/)
rails g devise User を実行の際のエラーの話

## 背景
rails g devise User　を実行の際、以下のエラーが発生

```
rails aborted!
StandardError: An error has occurred, this and all later migrations canceled:

PG::DuplicateColumn: ERROR:  column "email" of relation "users" already exists
```

エラー文を見ると、どうやら**usersテーブルが重複**しているようだ。
                              
## 試した事
`rails db:migrate:reset`
しかし、

```
rails aborted!
ActiveRecord::NoEnvironmentInSchemaError: 

Environment data not found in the schema. To resolve this issue, run: 

        bin/rails db:environment:set RAILS_ENV=development
```
以上のようなエラーが発生。
binは一切弄っていないので他に原因がありそう。

## 解決方法
- 対象モデルを削除する

```
rails destroy devise user
```

- 次にテーブルを削除するために、削除用のmigrationファイルを作成する

```
rails g migration drop_table_users（←適当なファイル名で可）
```

- 作成したmigrationファイルにテーブル削除を記述する

```
class DropTableUsers < ActiveRecord::Migration
　def change
　　drop_table :users
　end
end
```
- マイグレーション実行

```
rails db:migrate
```
アコーディオンの中にスムーススクロールのアンカーリンクを入れた時のIE11対応

業務上、なんやかんやとまだ使っているjQuery、そしてそれを利用したスムーススクロール。
基本的にjQueryを使ったスムーススクロールだと、以下のような記述をしていると思います。

```javascript
$(function(){
  $('a[href^="#"]').on('click', function(){
    var href= $(this).attr('href');
    var target = $(href == '#' || href == '' ? 'html' : href);
    var position = target.offset().top;
    $('html, body').animate({scrollTop:position}, 500, 'swing');
    return false;
  });
});
```

大体はこれで動きますし、`offset()`も普通に値が取得できると思います。
今回は

* jsでアコーディオン化した要素の中にアンカーリンクとアンカーリンク先がある
* アンカーリンクをクリックするとスムーススクロールで指定のアンカーに移動する

この条件の時にIE11対応で躓いたので、その時の対応を忘れないためのものになります。
今も尚IE11対応してる人の助けにもなったら幸い。（今もIE11対応してる人どれだけいるの？という疑問はともかくとして）

htmlの例としては以下のような感じです。

```html
<dl class="accodion_wrap">
	<dt class="accodion_btn">アコーディオン開閉ボタン</dt>
	<dd class="accodion_box">
		<p>アコーディオンの中身</p>
		<ul>
			<li>
				<a href="#link1">アンカーリンク1</a>
				<a href="#link2">アンカーリンク2</a>
				<a href="#link3">アンカーリンク3</a>
			</li>
		</ul>
		<div id="link1">
			アンカーリンク先1
		</div>
		<div id="link2">
			アンカーリンク先2
		</div>
		<div id="link3">
			アンカーリンク先3
		</div>
	</dd>
</dl>
```

アコーディオンの中身が長く、アコーディオンの中にアンカーリンクを入れてほしいとの要望があったのでアンカーリンクを挿入したら、アコーディオン内のアンカーリンククリック時にIE11だけ何故か`offset()`の値が取得できず、スムーススクロールが正常に動かなくなってしまいました。

似たような事象と対応例がないか調べてみたのですが見つからず、色々試した結果以下の対応で動作するようになりました。

```html:html
<dl class="accodion_wrap">
	<dt class="accodion_btn">アコーディオン開閉ボタン</dt>
	<dd class="accodion_box">
		<p>アコーディオンの中身</p>
		<ul>
			<li>
				<a href="#link1" class="js_accordion_anchor">アンカーリンク1</a>
				<a href="#link2" class="js_accordion_anchor">アンカーリンク2</a>
				<a href="#link3" class="js_accordion_anchor">アンカーリンク3</a>
			</li>
		</ul>
		<div id="link1">
			アンカーリンク先1
		</div>
		<div id="link2">
			アンカーリンク先2
		</div>
		<div id="link3">
			アンカーリンク先3
		</div>
	</dd>
</dl>
```
```javascript:js
$(function(){
  $('.js_accordion_anchor').on('click', function(){
    var href= $(this).attr('href');
    var target = $('.accodion_box._is_open ' + href);
    var position = target.offset().top;
    $('html, body').animate({scrollTop:position}, 500, 'swing');
    return false;
  });
});
```

jsの変数target部分の記述を、アコーディオンを開閉している（displayをblockとnoneで切り替えている）親要素に加え、アコーディオンを開く際に親要素に`addClass()`で追加しているclass（上記記述の場合だと`_is_open`）を予め指定して記述することで、`offset()`の値が取得できるようになりました。

また、親要素の指定を入れる都合上、アコーディオン外にアンカーリンクがある場合、そのアンカーリンク＋スムーススクロールが正常に動作できなくなってしまうので、アンカーリンクのイベント発火をclass指定にしています。

なお、この対応を入れる場合、アコーディオン外のスムーススクロール用記述に関しては以下のように記述を変えた方が良いです。

```javascript
$(function(){
  $('a[href^="#"]:not(".js_accordion_anchor")').on('click', function(){
    var href= $(this).attr('href');
    var target = $(href == '#' || href == '' ? 'html' : href);
    var position = target.offset().top;
    $('html, body').animate({scrollTop:position}, 500, 'swing');
    return false;
  });
});
```

色々試してみるうちにこの方法に辿り着き、問題解消できた訳ですが、この方法で何故有効になっているのか、理由というか理屈はわかっていなかったりします。

読み込み時に非表示状態（`display: none;`にしている）のアコーディオン部分に入っているから取得できないのか…？
`display: none;`のとき要素のサイズが取得できない理屈と同様なのだろうか…？
（でもアコーディオンを開いてリンクをクリックする訳で、その時には`display: block;`になっているのですが…）
とは色々考えているのですが、ChromeとかEdgeではこの対応をしなくても普通に取得できているんですよね…。

このあたり、もしわかる方がいたら教えていただけると幸いです。

…それにしても、IE11対応から解放される日はいつになるのやら。
（以前ここに書いた記事も、IE11対応に泣かされた記事である事に気付いて頭を抱える）
LINE Messaging APIを使ってみる

## 概要

LINEのMessaging APIを使ってみる。
Railsでサーバー立ち上げて、実際にWebhookでどんな値が連携されるのか見ていきます。
(公式にあるのかもだけど見当たらなかったので)
ただ、Messaging APIの動きを見たいだけなので環境とかは適当に作ります。
誰かの役に立てば嬉しいです。

**公式ではここに書いてあります。**
- https://developers.line.biz/ja/reference/messaging-api/#message-objects

## RailsのDockerイメージを作る

以下をまるまる真似してDockerでRailsが動くところまでやった。
- [DockerでRuby on Railsの環境構築を行うためのステップ【Rails 6対応】
](https://qiita.com/kodai_0122/items/795438d738386c2c1966)

と、言いたいところだったけど、postgressのイメージバージョンの影響で動かないところがあった。
以下の対応でとりあえず回避した。
- [PostgresのDockerImageに変更があって起動ができなくなった話
](https://qiita.com/tomopict/items/23cc4332781bb28d2973)

## GrapeでAPIを作る
Grapeで最低限リクエスト受け取って動く形にする。
Grapeの導入は[README](https://github.com/ruby-grape/grape)見てもらえればわかるかと思います。
実装は以下のようにした。

```ruby:app/api/line/line.rb
module Line
  class API < Grape::API
    version 'v1', using: :header, vendor: 'line'
    format :json
    prefix :api

    resource :messaging do
      desc "user test"
      post do
        User.all
      end
    end
  end
end
```

Postman使ってローカルのAPI叩けるか確認した。

## herokuにデプロイする
Messaging APIのリクエストを受け取るためにはデプロイしないといけないので、herokuでデプロイする。
[herokuのGetting Started](https://devcenter.heroku.com/ja/articles/getting-started-with-rails6#deploy-your-application-to-heroku)を参考にすればデプロイまでは簡単にできる。
welcomeページいらないけど、必要みたいなのでとりあえず追加。

## Messaging APIのWebhoom URLを設定する
herokuでデプロイしたサーバーのAPIのURLを LINE Developersで設定する。

![スクリーンショット 2021-08-29 14.49.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56920/1c7c540c-c347-07f5-40b4-03abc6b27070.png)

herokuのURLを入れるとverifyが正常に動く。



## Messaging APIのWebhookで渡ってくるパラメータ

今回の目的は、Messaging APIのWebhookがどういうパラメータを連携するか知りたいので、[grape_logging](https://github.com/aserafin/grape_logging)を入れてパラメータを確認した。

以下、友だち追加、メッセージ送信、ブロックのときのパラメータ。
Messaging APIのQRを自分のLINEで読み込んでそれぞれの動作を確認。

```json:follow
params => {
  "destination" => "",
  "events" => [{
    "type" => "message",
    "message" => {
      "type" => "text", "id" => "", "text" => "てすと"
    },
    "timestamp" =>,
    "source" => {
      "type" => "user", "userId" => ""
    },
    "replyToken" => "[FILTERED]",
    "mode" => "active"
  }]
}
```

```json:text
params => {
  "destination" => "",
  "events" => [{
    "type" => "message",
    "message" => {
      "type" => "text", "id" => "", "text" => "てすと"
    },
    "timestamp" =>,
    "source" => {
      "type" => "user", "userId" => ""
    },
    "replyToken" => "[FILTERED]",
    "mode" => "active"
  }]
}
```

```json:unfollow
params => {
  "destination" => "",
  "events" => [{
    "type" => "unfollow",
    "timestamp" =>,
    "source" => {
      "type" => "user", "userId" => ""
    },
    "mode" => "active"
  }]
}
```

## さいごに
パラメータの構造がイメージできなかったけど、これでテスト書いて実装できそう。
公式とかでわかりやすい記述があったら教えていただけるとたいへん喜びます。
【覚書】UnityでSafeArea調整

# 概要
UnityでSafeArea対応した際のメモ

# 前提
・Canvas 直下に SafeArea として扱う Panel を配置
・Canvas の Render Mode は Screen Space - Camera
・UI Scale Mode は Scale With Screen Size（x:360, y:720）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/383513/d11c0dce-e787-f331-823f-87e22ce6d6bf.png)

# コード

```C#:UserInterface
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class UserInterface : MonoBehaviour
{
    public void FixSafeArea()
	{
		// 端末の SafeArea サイズを現在の Scale で補正して Panel のサイズを算出
        Vector2 safeAreaSize = Screen.safeArea.size / this.GetComponent<Canvas>().scaleFactor;
		// 端末の SafeArea 位置現在の Scale で補正して Panel の位置を取得（ y は軸が逆だったので補正）
        Vector2 safeAreaPosition = Screen.safeArea.position / this.GetComponent<Canvas>().scaleFactor;
        safeAreaPosition.y *= -1;
		// 補正したい Panel の Rect を取得
        RectTransform safeArea = transform.Find("Panel_SafeArea").gameObject.GetComponent<RectTransform>();
		// Panel にサイズと位置を代入して補正完了
        safeArea.sizeDelta = safeAreaSize;
        safeArea.anchoredPosition = safeAreaPosition;
	}
}

```

# 補足
Apple iPhone の SafeArea は正常に取得できるが、Google pixel 系は SafeArea = 解像度 のようで四隅のカーブに対応できなかった。
Python必須級VSCode拡張機能まとめ

## TL;DR
Python必須級VSCode拡張機能紹介

## python

これがないと始まらない始められない
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399745/81f2df4f-233f-18ed-4201-1e1e49188906.png)

## pylance

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399745/1709893c-896c-ba5f-fabb-52ec632b62ff.png)
型チェックをしてくれます。
入れておきましょう！
Lightsailで証明書を自動更新する方法

* LightsailのWordPressをHTTPS化する方法
    * Certbotコマンドを利用する方法
        * https://lightsail.aws.amazon.com/ls/docs/ja_jp/articles/amazon-lightsail-using-lets-encrypt-certificates-with-wordpress
    * **Bitnami HTTPS 設定ツール(bncert)を利用する方法**
        * https://lightsail.aws.amazon.com/ls/docs/ja_jp/articles/amazon-lightsail-enabling-https-on-wordpress
        * 自動更新するならこの方法
* Bitnamiとは
    * オープンソースソフトウェアのインストール・実行ツール
    * WordPress, Drupal, Jenkinsなど多数のソフトウェアが対応
* bncertツール
    * Bitnamiに同梱されているHTTPS設定ツール
    * https://docs.bitnami.com/aws/how-to/understand-bncert/
* bncertツールによるSSL証明書の自動更新方法
    * Lightsailインスタンスにsshで接続して実行
    * 以下コマンドを実行する
        * 以下の参考URLを元に設定を進める

```bash
sudo /opt/bitnami/bncert-tool --perform_public_ip_validation 0 --perform_dns_validation 0
```

## 参考
https://takake-blog.com/lightsail-bncert/
Tkinterでオブジェクトを複数、変数に依存して作る（覚え）

#環境
・macOS High Sierra 10.13.6
・Python 3.8.8
・tkinter 8.6.10
・エディタ Atom
　・AtomはデフォルトでPythonの実行をサポートしていないので、必要なパッケージをダウンロードする必要がある

#はじめに
tkinterでインターフェイスを作るときに、似たようなオブジェクトを複数作りたいときがある。
とりあえず良さそうな方法が見つかったのでちょっと覚書きする。

#GUIの基本
まずはHeloo world!に相当するコードを書く。以下の通り。

```main.py
from tkinter import *
from tkinter import ttk

root = Tk()
root.title('My App')

#ウィジェットの作成
label_1 = ttk.Label(root,text='Hello World!')

#レイアウト
label_1.pack()

# ウィンドウの表示開始
root.mainloop()
```
実行すると次のようなウィンドウが表示される
![スクリーンショット 2021-08-29 17.17.11JST.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263048/27dcb113-900c-f769-d669-c51acd2eca62.png)

さて、表示したいラベルが複数ある場合、たとえば

```main.py
from tkinter import *
from tkinter import ttk

root = Tk()
root.title('My App')

#ウィジェットの作成
label_1 = ttk.Label(root,text='Hello World!')
label_2 = ttk.Label(root,text='Hello World!')
label_3 = ttk.Label(root,text='Hello World!')
label_4 = ttk.Label(root,text='Hello World!')
label_5 = ttk.Label(root,text='Hello World!')

#レイアウト
label_1.pack()
label_2.pack()
label_3.pack()
label_4.pack()
label_5.pack()

# ウィンドウの表示開始
root.mainloop()
```
表示は以下のようになる。
![スクリーンショット 2021-08-29 17.29.11JST.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263048/855893ec-93a2-51a6-6107-74b2b622f7a1.png)
以上のようにするのが手っ取り早いのは直感的にわかるが、このコードでは、表示したい行の数が変わったときにコードの大部分を修正する必要があるし、表示させたいオブジェクトが大量にあるときには役に立たないので別の方法を考える。

#オブジェクトの作成数を変数依存化する
例として、ビートルズのメンバーのリストを与え、それをラベルで表示するGUIを考える

```.main.py
from tkinter import *
from tkinter import ttk

root = Tk()
root.title('The Beatles')

member = ['John Lennon','Paul McCartney','George Harrison','Ringo Starr']

#ウィジェットの作成
labels = [ttk.Label(root,text=x) for x in member]

#レイアウト
[labels[i].pack() for i in range(len(labels))]

# ウィンドウの表示開始
root.mainloop()
```
メンバーのリストはmemberで与えている
まず、**リスト内包表記**で、memberの中身を一つずつ取り出したものをに一度格納し、それをtext属性の値としてttk.Labelオブジェクトを作る。
labelsは、ttk.Labelオブジェクトがメンバーの数と同じ長さを持ったオブジェクトである。

```.py
labels = [ttk.Label(root,text=x) for x in member]
```


つぎに、同じくリスト内包表記を使って、表示すべきlabelsの長さと同じ連番を持つrangeオブジェクトから順次値を取り出し、それに対応するlabelｓ[i]を順次表示させる。

```.py
[labels[i].pack() for i in range(len(labels))]
```
何をやっているのかリスト内包表記にいなれていないとわかりにくいかもしれないが、for文で考えると、その中でやっていることはラベルを表示することだけで、値がオブジェクトが何かに代入されているわけではない。

```.py
for i in range(len(labels)):
    labels[i].pack()
```
表示は以下のようになる。
![スクリーンショット 2021-08-29 17.56.17JST.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263048/c8f8f984-6961-ae42-25aa-16cb42d8f984.png)
これで、冗長なコードを書く必要性はなくなった。
Looking Glassにcanvasを読み込ませる

Looking GlassをJSで動かしたい場合、[HoloPlay.js](https://docs.lookingglassfactory.com/developer-tools/three)または[HoloPlayCore.js](https://docs.lookingglassfactory.com/holoplay-core/holoplaycorejs)(Legacy)があるっぽいんだけど、前者の方はThree.jsのSceneと一緒に使うの前提で、canvasを直接読み込ませて表示させるようなことはできないっぽい？

3Dとかじゃなくてもうちょっと基本的なレベルで、角度によって違う絵が見えるということを使って何かしたいので、HoloPlayCore.jsを使っています。

:::note warn
追記: 書いた後で色々試した結果、以下の方法はcanvasの更新が反映される速度がかなり遅いので、Quiltのcanvasを動かしたい場合はHoloPlayCore.jsじゃなくてHoloPlay.jsを使った方が良さげです。  
HoloPlayCore.jsはQuiltからの変換時にHoloPlay Serviceとの通信が必要ですが、HoloPlay.jsは内部でThree.jsのシェーダーでQuiltからLookingGlassで表示可能な形式に変換してて速いです。デフォルトだと3D空間に置いたカメラから自動生成したQuiltしか使えないですが、ちょっといじれば任意のQuiltをtextureとして渡すことができます。今度時間がある時にまとめます
:::

[Quilt](https://docs.lookingglassfactory.com/keyconcepts/quilts) (各角度からの見え方が並んでる大きな画像)の静的な画像をロードして渡すサンプルはあったけど、canvasでQuiltを動的に生成して渡してみたかったので、試行錯誤した。

messageという形で送る内容を固めて、それをclient.sendMessage()で送ると、端末に表示されるっぽいですね。
CanvasとしてQuiltを作ったものを渡して表示させてみます。

※Looking Glassは接続されててHoloPlay Serviceが立ち上がってる前提

```sample.ts
// クライアントを生成
const HoloPlayCore = require('holoplay-core')
const client = new HoloPlayCore.Client(
  (msg: any) => {
    console.log(msg)
  },
  (err: any) => {
    console.error(err)
  }
)

// Quiltを送るコマンドを作る
let showCmd
const canvas = document.getElementById('hogehoge') // Canvasの中身(Quilt)は自分でなんとかしてください
canvas.width = 3360
canvas.height = 3360
const ctx = canvas!.getContext('2d')
if (!ctx) { return false }

canvas.toBlob((blob) => {
  if (!blob) { throw new Error('no blob') }
    const reader = new FileReader()
    reader.addEventListener('loadend', () => {
      const arrayBuffer = reader.result as ArrayBuffer
      const quiltData = new Uint8Array(arrayBuffer)
      showCmd = new HoloPlayCore.ShowMessage({ vx: 8, vy: 6, vtotal: 45 }, quiltData)
    })
    reader.readAsArrayBuffer(blob)
  })
})

// コマンドを発行
function sendMessage () {
  client.sendMessage(this.showCmd)
    .then(function () {
      console.log('発行したよ')
    })
    .catch(function (err: Error) {
      console.error(err)
    })
}
```
コマンドに送る画像はUint8Array形式じゃないとエラーになっちゃうので、一旦BlobにしてからそれをArrayBufferにしてそれをUint8Arrayに変換してる。すごく遠回りなことをしてる気がする。もっと良い方法あったら教えてください。
[UiPath] クラウド版 UiPath Orchestrator 2021.x版のサインアップからロボット実行までの手順つづき(ユーザ招待編)

こんにちは。[UiPath Friendsコミュニティ](https://uipath-friends.doorkeeper.jp/)運営メンバの @masatomix です。

## イントロ

前回の記事: [クラウド版 UiPath Orchestrator 2021.x版のサインアップからロボット実行までの手順ご紹介(よくわかるモダンフォルダ番外編)](https://qiita.com/masatomix/items/a200c2ab6f03fc430bb5) でクラウド版のOrchestratorにて、サインアップからUiPath Studioを動かすところまでの手順をご紹介しました。今回はそのつづきです。

自分が作成した環境(UiPathの用語でいう「組織」)に、**他のアカウントを作成(E-mailアドレスで招待)して利用可能にするまでの手順**をご紹介します。

## 対象のかた

- すこしはUiPath Orchestratorを知ってる・触ったことがあるよ、という方を想定しています。
- [前回の記事](https://qiita.com/masatomix/items/a200c2ab6f03fc430bb5) のつづきを知りたい方
- 動作環境は、クラウドの Orchestrator (2021/08/29時点 バージョン 21.8.25-release.62) Community版と、ユーザモードでインストールしたUiPath Studio (21.4.4)を用いています。

## やってみる

招待する側(メイン側)

- 招待されるユーザ用のグループ(Attended Group for sub)を作って、グループに「Attended - ネームド ユーザー」ライセンスを紐付けておく
- 前回サインアップしたアカウント(uipathfriends2021-sub2@xxxxxx。以下メインユーザ)で、招待されるアドレス(uipathfriends2021-sub99@xxxxxx。以下サブユーザ)を、自分の組織に招待する
- メインユーザがOrchestratorのWEB画面で、サブユーザの設定追加を行う
    - アクセス権を設定する( テナントロールの割り当てと、ARの設定)
    - サブ用のグループをSharedフォルダに紐付ける(とフォルダロールの割り当て)

招待された側(サブ側)

- 招待されるアドレスの所有者は、招待メールリンクからサインアップして、その組織への参加を行う(招待する側の作業状況に関係なく並行で進めてOK)
- サブユーザが対話型サインインでOCと接続する。Attended Robotと認識され、Sharedフォルダ内のワークフローを実行する



| 役割                  | アドレス                       |
| --------------------- | ------------------------------ |
| メインユーザ側 (組織管理者) | uipathfriends2021-sub2@xxxxxx  |
| サブユーザ側 (招待される側) | uipathfriends2021-sub99@xxxxxx |

前回からの流れから、不可抗力でこれらアドレスで動画を作成したのですが、main@ とか sub@ とか、わかりやすい名前にしておけばよかった。失敗しました、、。


### 動画はこちら

- 招待する側の操作 (グループ作成・ユーザ招待からロールの設定まで)

https://youtu.be/watch?v=sEJ-SVOu1II&list=PLa6DCBgbi2crKzli4ddRwwhkuo4ldJVv5

- 招待される側の操作(リンクつきメールの処理(招待の承認)と、ロボットのOC接続・ワークフロー実行まで

https://youtu.be/watch?v=rYpgmOdC1UE&list=PLa6DCBgbi2crKzli4ddRwwhkuo4ldJVv5

- 招待されたユーザのロール確認

https://youtu.be/watch?v=OzR4RjHzIww&list=PLa6DCBgbi2crKzli4ddRwwhkuo4ldJVv5


## わかったこと、まとめ

- 自分が作った組織に対して、**E-mailアドレスで他のユーザを招待し組織を共同で利用できる**ようになりました。
- Automation Cloud 側でグループを作成し、その**グループに属するユーザに使わせたいライセンスを設定できる**ことが分かりました。
- Automcation Cloud側で作成したグループに対してOrchestrator上で、
    - テナントロールの割り当て
    - フォルダに対する紐付け
    - フォルダごとのフォルダロールの割り当て

を行っておくことで、**ユーザ個別に権限を設定することなしにグループの権限を継承させることができる**ことが分かりました。

今回は、作成したグループを、デフォルトのSharedフォルダに紐付けましたが、**フォルダを独自に作った場合も同じ手順**をそのフォルダに対して行えばOKです。

おつかれさまでした。

## 関連リンク

- [クラウド版 UiPath Orchestrator 2021.x版のサインアップからロボット実行までの手順ご紹介](https://qiita.com/masatomix/items/a200c2ab6f03fc430bb5) 前回の記事
- [2種類のロボット接続【UiPath Orchestratorをもっとよく知る動画シリーズ】#11](https://www.youtube.com/watch?v=0UVokA3urtE&list=PLQBe36ilIwgj8MBS84ZYShooKcit61w5q&index=11) 公式にもたくさん情報がありますね
【初学者向け】JavaScriptの分割代入について

今回は分割代入について解説していきます。

##分割代入とは？

分割代入とは配列やオブジェクトから値を取り出して、変数に代入してくれるJavaScriptの機能です。

☆**通常の代入では一つの変数に対して一つの値を代入していくのに対して、
分割代入は複数の変数に、配列やオブジェクトの値を一気に流しこむイメージです。**

##使い方(①配列の場合 / ②オブジェクトの場合)
①配列の場合
☆**point**: 左辺の変数は **[ ]** で囲うこと

```javascript
const arry = [10, 20, 30];
//分割代入で一気に代入
const [a, b, c] = arry;

//確認
console.log(a);  // 10
console.log(b);  // 20
console.log(c);  // 30

//一つずつ代入するとしたら...3回代入しなくてはいけない
const a = arry[0];
const b = arry[1];
const c = arry[2];
```

②オブジェクトの場合
☆**point**: 左辺の変数は **{ }** で囲うこと

```javascript
//まずはオブジェクトを用意
const obj = {
    name: "Tom",
    age: 87
   }

//一気に代入
const {name, age} = obj;

//確認
console.log(name);  //Tom
console.log(age);   //87


////一つずつ代入するとしたら...2回代入しなくてはいけないし、ドット記法を使わなくてはいけない！
const name = obj.name;
cnnst age = obj.age;
```


##注意点

**オブジェクトを分割代入する際、変数名とプロパティは一致させる必要があります！**
上の②をちょっと書き換えて確認します

<定義の順を変えてみた場合>

```js
const obj = {
    name: "Tom",
    age: 87
   }
//ageとnameの順番をスイッチ
const {age, name} = obj;

//順番を変えても出る値は変わらず
console.log(name);  //Tom
console.log(age);   //87

```
<部分的に代入>

```js
const obj = {
    name: "Tom",
    age: 87
   }
//ageだけ定義(nameは代入しない)
const {age} = obj;

//確認
console.log(age);   //87

```
このように変数名とプロパティは同じ名前のものが対応しているので注意する必要があります。



その他にもいろいろな使い方がありますのでぜひ活用してみてください。
「なぜ人間の子供は、今のAIより学ぶのがはるかに上手いのか？」

（表題は、下記の書籍の帯書きである）
スタニスラス・ドゥアンヌ『脳はこうして学ぶ-学習の神経科学と教育の未来』（松浦俊輔 訳，森北出版，2021年）

## 「人間の子供」に見る「今のAI」の問題と、解決への糸口

> (p.15) 機械学習は、計算機に対して訓練する試みを何万回、何億回と実行するのが現状だ。（中略）膨大なデータ集合がなければ、アルゴリズムは新しい状況へ一般化される抽象的な知識を引き出すのに難儀する。言い換えれば、データを最大限に利用しきれないのだ。
　この面では乳幼児の脳は楽勝できる。赤ちゃんは新しい単語を覚えるのに一回か二回繰り返せばすむ。その脳はきわめて乏しいデータを最大限に利用する。

概ねニューロンモデルを基本要素として形成する機械学習では、深層学習の方式によりある程度の抽象的知識を獲得できるまでには至っているが、ほとんどの場合で学習用のビッグデータの存在、又はそのようなビッグデータの個数に匹敵する回数の繰り返し自己学習が必要とされているとみられる。比較しての「乳幼児の脳」の高い効率性は、**ニューロンモデルより高度な何か基本要素**の存在を予感させる。

> (p.65) 子どもの脳は白紙状態ではなく、そこには外部世界に投影される生得の知識があり、それによって、子どもが学習する抽象的空間の範囲は大きく限定できる。

脳を未学習状態のニューラルネット構造（＝「白紙状態」）のみから再現しようというのはだいぶ強引であり、**ニューロンモデルより高度な何か基本要素**（あるいは先天的に特定の機能を備えたニューロンの塊？）を見い出して**組み合わせ**てみる、というアプローチを取る必要はあろう。そのヒントになるのが「**生得の知識**」にあるのかもしれない。

## 「生得の知識」

ドゥアンヌは第３章にて、人間の「生得の知識」について以下のものを挙げている。
> <dl>
<dt>物体の概念</dt>
<dd>(p.85) 赤ちゃんは、生後数か月ですでに、世界は物体でできていて、その物体は一体となって動き、ある空間を占め、理由なく消えたりせず、また同時に異なる二か所には存在しえないことを知っている</dd>
<dt>数覚</dt>
<dd>(p.89) 生まれたときにはすでに、耳からの情報でも目からの情報でも、数えなくてもだいたいの数を認識する直感的な能力がある</dd>
<dt>確率についての直感</dt>
<dd>(p.92) 赤ちゃんが驚くのは、根底にある確率を脳が計算することができて、観察された事象が起きる可能性がわずかしかないという結論に達したことを示している</dd>
<dt>動物と人の知識</dt>
<dd>(p.95) 生まれてから最初の一年で、赤ちゃんは動物や人が、自律的で自ら動くという特定のふるまい方をするのを理解する。（中略）生き物は物理法則に従って動く必要はなく、その運動は意志や信念に支配されていることを、小さな子供は知っている。</dd>
<dt>顔認識</dt>
<dd>(p.97) 生後数時間の子どもは、スマイリーフェイスの方に、それを上下さかさまにしただけの画像に対するよりも素早く頭を向ける</dd>
<dt>言語本能</dt>
<dd>(p.98) 赤ちゃんは一揃いの語彙と文法を備えて生まれるのでなく、それを記録的な速さで獲得する見事な能力を持って生まれる。赤ちゃんに配線されているのは、言語そのものでなく、それを習得する能力なのだ。</dd>
</dl>

これらのほとんどに「**視覚**」がかかわっているが、言語本能については特に「**聴覚**」へのかかわりが強いことは特筆すべきところである（なお数覚についても、上の説明の通り「聴覚」へのかかわりが認められる）。
また、物体の概念・数覚・確率についての直感・動物と人の知識までは、物理学的な基本知識を生得しているという観点で地続きのように思われるが、言語本能についてはこれらとは異なるステージがあるように思われる。

## 転移学習におけるヒント

少ないデータ量で学習効果を上げる、という観点では、**転移学習**という方式が既にさまざまに応用されている。
例えば画像認識のVGG16ネットワークは転移学習によく用いられるとされているが、これはVGG16ネットワークを構成する上位側のレイヤが、**物体の特徴抽出に共通に利用できる特性**を持っているためとされている（[こちら](https://newtechnologylifestyle.net/vgg16networkvisual/)の記事では、VGG16の各レイヤにおいてどのような処理が行われているかを可視化している）。
VGG16の転移学習では、この共通に利用できる特性を持つレイヤは固定して再学習させないようにするが、上で述べた**ニューロンモデルより高度な何か基本要素（あるいは先天的に特定の機能を備えたニューロンの塊）**とは、例えばこのレイヤのようなもの、またはこのレイヤ（ニューラルネット）と同等の機能をより少ない計算量で実現できるよう縮約したもの、と考えている。
ダイヤモンド継承

ふと、これってダイヤモンド継承の出番か？
という場面が来たので検証してみました。


# ダイヤモンド継承とは？

下記図のように親クラスから2つ以上の子クラスに継承し
孫クラスに分岐させた子クラスを継承して1つのクラスにすることです。


<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428239/a7d60c4d-5916-9b64-ca8a-577db57a860f.png">

このメリットはクラスのメソッドを分岐させることによって、
メンテナンス性を向上させることだと思います。


<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428239/c89446e8-94e5-2084-4e92-8bfe1789ad74.png">

実際にこれを書いているときにダイヤモンド継承をやりたいと考えた理由は
ドメイン駆動設計の構築中に1クラスのメソッドが多くなりすぎて、
分岐させられないか？と考えたのがキッカケです。


# Pythonで実践


まずはダイヤモンドの一番上のこの箇所から作成します。


<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428239/f24ca8bd-1351-3c48-58df-1a7181badc80.png">


```py:親クラス：共通で使用したいコンストラクタとメソッド
class AnimalCommon():
    def __init__(self, name):
        self.name = name

    def show_name(self):
        print(self.name)
```

続いて両脇のAnimalCommonからコンストラクタとメソッドを継承させて、
別の機能を持たせます。


<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428239/334871aa-4bcd-bca2-3dc5-c93f1f530c72.png">


```py:子クラス：分岐して機能作成
# 分岐させた1つ目のクラス
class AnimalAction(AnimalCommon):
    def __init__(self, name):
        super().__init__(name)

    def cry(self, cry):
        print(f'{self.name}は{cry}鳴く')

# 分岐させた2つ目のクラス
class AnimalStatus(AnimalCommon):
    def __init__(self, name):
        super().__init__(name)

    def disease(self):
        print(f'{self.name}は病気になった')
```

最後に分けて機能を作成したものを一つにまとめます。

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428239/12b215f4-5382-246f-3904-2934f193b6b6.png">


```py:孫クラス：実際に使用するクラス
class Animal(AnimalAction, AnimalStatus):
    def __init__(self, name):
        super().__init__(name)
```

このクラスをインスタンス化するとちゃんと
どのクラスで定義したメソッドも使えることが確認できます。

```py:メソッドの実行
crow = Animal('カラス')
crow.show_name() # カラス
crow.cry('カーカー') # カラスはカーカー鳴く
crow.disease() # カラスは病気になった
```

今回は2つに分岐させて別機能を作成しましたが、
3つ以上でも同様に動かすことは可能です。
ITエンジニア概論（案）

私（７年目のエンジニア）が

駆け出しITエンジニアだった頃の自分に送りたい

ITエンジニア界隈の知識のブレインダンプです。

思考が発散しすぎて無駄な部分も含まれてしまっていますが。。。

![SE（システムエンジニア）概論 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1950468/545a5b3a-7837-d036-2c54-36556d663ae5.png)


個々の内容は「なんとなく知っている」程度で良くて、

「自分のやりたいことがどのへんにあるのかなー」

っていうのがイメージできる知識を想定して作りました。

少し前に書いたもので最近注目の職種とかはあまりかけていないです。

（SREエンジニア、DevOps、UXデザイナーなどなど）



作ろうと思ったきっかけは、

私がITエンジニアを目指したときの最初のイメージと

実務のミスマッチが大きかったからです。

現在は「ITエンジニアを目指したときの最初のイメージ」に

近い職種で仕事ができていますが、

そこにたどり着くまでに結構時間がかかりました。



回り道自体は無駄ではなかったと思いつつも、

「なんかイメージと違う。。。」と疑問を抱えているのと

「やりたい仕事にたどり着くまでに必要な時間」と認識して、

日々仕事に向き合うのとでは、大きくモチベーションが変わります。



なのでどこかの誰かの役に立つかもなー、

と思い一旦なぐり書きしてみました。

もし余裕ができたらもう少し形にしていきたいと思います〜![SE（システムエンジニア）概論 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1950468/a187444c-d32d-0b1d-8a2e-46e9377faa1a.png)
順序回路の作法

# 概要

順序回路を理解する。
フリップフロップの真理値表を書いてみた。

# 回路図

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/4fd81671-460f-d4e6-a9cf-11e063668e3c.jpeg)


# 真理値表

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/5319d7e8-87eb-eca4-3bd8-5fc9dfcba225.jpeg)

|S|R|Q|q|
|:--|:--|:--|:--|
|0|0|保持|保持|
|0|1|0|1|
|1|0|1|0|
|1|1|禁止|禁止|

# 結論

順序回路は、保持（記憶）するので、真理値表では、理解しずらい。
タイミングチャートだ。

# 成果物

https://embed.plnkr.co/plunk/Ul6n0852hMuVc7d8

以上。
Logic Apps Tips - URLエンコードとデコード

#概要
Logic Appsはコードをほとんど書かずに処理を実装していけます。
すでに結構トリガーやアクションが揃っていて大変便利なんですが、
デザイナー上にやりたいことが表示されない（それっぽいアクションが表示されない）場合に、
その実現方法を探るのがちょっと手間だったり💦

その調べたことを備忘のために記録

#調べたこと

###URLエンコードする
Logic AppsでURLエンコードを行うには、
uriComponentという関数が使えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/c4a5da42-9673-59e0-90c0-b051f14fa0cc.png)

ちょっと関数名が直感的じゃないですよね・・・。

###URLデコードする
で、その逆でデコードするにはって話ですが、
uriComponentToStringという関数を使います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/cec280b9-72c5-9bdd-0448-a27da0edaac5.png)

さらに直感的じゃない関数名ですが、
デザイナーで表示される関数の説明も・・・ちょっとわかり辛いです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/b35cb2ed-3565-d520-f116-b1cc666a7fc3.png)

Microsoft社の[Docs](https://docs.microsoft.com/ja-jp/azure/logic-apps/workflow-definition-language-functions-reference?WT.mc_id=DOP-MVP-4028478#uriComponentToString)の説明を確認すると、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/cdfdc10b-7460-2bf2-724a-42dd6bbced2f.png)

「実質的に、URIエンコード文字列をデコードします。」という記述がありますね。
ということで、説明はちょっとわかり辛いですが、この関数を使ってください。
【Swift】CodableでネストしたJSONを変換する

##はじめに

HotPepperBeautyAPIから返ってきたJSONをDecodeしようとした際に少し詰まったので備忘録として書きます。
##やりたいこと
下記のJSONをDecodeし、```access```のデータを使用したい。

```json
{
  "results": {
  "api_version": "1.26",
  "results_available": 27716,
  "results_returned": "10",
  "results_start": 1,
  "shop": [
      {
         "access": "渋谷駅ハチ公口徒歩3分バスケットボールストリート（渋谷センター街）通りの１階 ウエンディーズ白馬ビル4階",
         "address": "東京都渋谷区宇田川町２６－１１　白馬ビル４階",
         "band": "不可",
         "barrier_free": "なし ：心地よい時間をご提供できるよう随時サポートさせて頂きます。",
         "budget": {
             "average": "通常平均：3280円/宴会平均：3280円/ランチ平均：3280円",
             "code": "B002",
             "name": "2001～3000円"
      },
...
```

##現状

``access``を使用したく、以下の構造体を用意。

```swift
struct Shop: Codable {
    let access: String

    enum CodingKeys: String, CodingKey {
        case access = "access"
    }
}
```

##エラー内容
「キーに関連付けられた値がありません」とのエラー。タイポミス等を疑い諸々チェックしたのですが、解決せず。

`` keyNotFound(CodingKeys(stringValue: "access", intValue: nil), Swift.DecodingError.Context(codingPath: [], debugDescription: "No value associated with key CodingKeys(stringValue: \"access\", intValue: nil) (\"access\").", underlyingError: nil))
``

##原因・解決方法
構造体を``resultsから用意していなかったこと``が原因だった。なので、以下のようにresultsから構造体を作成すると無事にDecodeすることができた。

```swift
struct Results: Codable {
    let results: ResultsData
}

struct ResultsData: Codable {
    let shop: [Shop]
}

struct Shop: Codable {
    let access: String

    enum CodingKeys: String, CodingKey {
        case access = "access"
    }
}
```
##最後に
ネストしたJSONは一見難しいように見えましたが、見た目通りに構造体を用意してあげることで簡単にデコードすることができました。
Msieveを使った高速素因数分解

# 0. 素因数分解
素早く素因数分解をする一番有名な方法として$1 \le i \le \sqrt{N}$まで試し割してみることが知られています。
ですがこの手法は計算量が$O(\sqrt{N})$で制約が比較的小さい競技プログラミングでは有効ですがそれ以外の場面では時間がかかりすぎてしまいます。
そこで今回はMsieveという外部ツールを用いて素因数分解をやってみたいと思います。
Msieveは有名な高速な素因数分解の手法である楕円曲線法（ECM）、複数多項式二次ふるい法（MPQS）、一般数体ふるい法（GNFS)が高速に実行できる便利なツールです
# 1. 環境
+ Windows10
+ Windows Subsystem for Linux 2(WSL2)

まだWLS2を導入してないのであれば以下のサイトが参考になると思います。
[Windows 10でLinuxを使う(WSL2)](http://qiita.com/)
# 2. Msieveのインストール
以下のサイトに飛んでDownloadをクリックしてください
[Msieveをダウンロード](https://sourceforge.net/projects/msieve/)
Linux上でソースコードをコンパイルして実行するので以下のコマンドを順次実行します
まずはパッケージをダウンロード

```
$ sudo apt-get install build-essential libgmp3-dev zlib1g-dev libecm-dev
```
以下のコマンドでコンパイルができる

```
$ wget "http://downloads.sourceforge.net/project/msieve/msieve/Msieve%20v1.52/msieve152.tar.gz?r=&ts=1452107977&use_mirror=jaist" -O msieve152.tar.gz
$ tar xvf msieve152.tar.gz
$ cd msieve-1.52/
$ make all ECM=1
```
コンパイルが終了したら以下のコマンドでMsieveの実行オプションを見ることができる

```
$ ./msieve --help
```
後でよく使うオプションをあげておく
#3. Msieveを実行してみる

```
./msieve オプション 正整数
```
さきほどのコマンドが全部実行できたならば上のコマンドで素因数分解を行うことができる。
よく使うであろうオプション
-v :ログを画面に出力
-e :15桁を超える素因数を探す
-q :ログファイルに出力しない
基本的にこの3つぶちこんとけばOKである
以下は実行例

```
$ ./msieve -e -v -q  831416828080417866340504968188990032810316193533653516022175784399720141076262857

831416828080417866340504968188990032810316193533653516022175784399720141076262857
prp40: 1593021310640923782355996681284584012117
prp42: 521911930824021492581321351826927897005221
```
私の環境だとこれの実行に4分かかったのでみなさんも根気強く実行が終わるのを待ちましょう。ちなみにサマーウォーズでおなじみのRSA暗号は桁数によっちゃこれで簡単に突破することができます。RSA暗号についての詳しい説明は準備中なので次回にご期待ください！

参考文献
https://inaz2.hatenablog.com/entry/2016/01/09/032521
本物のエンジニアになるためのスタート

###自己紹介
まずは、初投稿ということで軽い自己紹介を。
筆者は、今年の春まで高専という教育機関で通信・半導体・コンピュータなど幅広く工学を学んでおりました。プログラミング関連では、C、Java、Python、R、HTML、CSS、JavaScriptなどを用いて、スマホアプリ開発、自然言語処理、機械学習、その他様々な事をやっておりました。高専は専攻科まで行ったため、最終学歴は大卒となります。
今年の春から新卒として、とある会社のDXを推進するような部署に配属され現在に至ります。

###なぜ、本物のエンジニアを目指すのか
ずばり、同じ部署にいるテックリーダーが最強すぎて、「あの人みたいになりたい」という感情が溢れ出しているからです。経歴もさながら、エンジニアとして

**かっけええええええ、つえええええええ**

とアホみたいな言葉しか出ないほどです。
あと、シンプルに自分はエンジニアという職業で人生を楽しんでいきたいからです。たぶん、エンジニアって勉強し続けないと最前線のエンジニアで居続けられませんし、勉強を楽しめないのであれば長続きしないと思っています。

###そもそも、本物のエンジニアって？
いつも記事を拝見している　@mackeee-orange　さんは、以下のように定義されています。

`自分または他人から「こう言うサービスが欲しい」「こう言う機能を追加したい」と言われた時に，適切な仕様が考えられ， そこから適切なコードを書けるエンジニア`

>https://qiita.com/mackeee-orange/items/afbed5ec3816d4af2e58　

###んで、なにすんの？？
やっとこさ本題ですね。まず、私が現在の業務において使用している技術要素は

* 言語
    * HTML
    * CSS
    * JavaScript
    * Java 
    * SQL
    * Python

* フレームワークなど、その他
    * React.js
    * Bootstrap
    * Spring Boot
    * Docker
    * AWS
    * Git
    * OAuth
    * OpenID Connect

など、ザックリ書くとこんな感じです。
ちなみに開発の形式としてはアジャイル開発で１周間スプリントです。
まず、業務を通して上記の技術的要素のマスターはするべきなのですが、その程度じゃ「本物のエンジニア」になれないことはわかっています。

そこで、以下を参考にしながら、業務外の暇な時間を用いてエンジニアとしての鍛え上げを行っていこうと思っています。そして、実力主義であるエンジニアの世界で、**「本物」**と謳われるようになりたいと強く思います。
> https://coadmap.com/roadmap
> https://github.com/kamranahmedse/developer-roadmap
> https://qiita.com/baby-degu/items/6c0c73a1e79644ebbb1a
> https://qiita.com/hedrall/items/177eb850c4c054146321

###最後に
この鍛え上げはきっと手探りにはなると思いますが、10年後、いや、5年後にはとんでもなく強い人になっていたいので、とにかく頑張って行こうと思います。まだまだ駆け出しのエンジニアのため、記事内にて不適切な表現などもあったかもしれませんが、優しくご指摘いただけますと幸いです。。。