OmniAICreator/Qiita-1.07M huggingface dataset:
Windows10環境へのSwiftインストール

# やったこと
下記のサイトの内容に沿って、Windows10環境にSwiftをインストールしました。
( Swift ファイルをコンパイルして「hello world」の表示を確認まで)

http://linksquare.biz/programming/swift%E3%82%92windws10%E3%81%AB%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%97%E3%81%A6%E3%81%BF%E3%81%BE%E3%81%97%E3%81%9F.html


# 作業内容
具体的には、以下の2つの作業を行いました。
1. Visual Studio 2019 のコンポーネント関連の変更
2. Swift 5.6.1のインストール　※インストーラ入手元：https://www.swift.org/download/

# 補足事項・気づき等
Python 3 64 ビット (3.7.8)がサポート外になっていたので、
Python 3 64 ビット (3.9.7)を利用して動作確認できました。
（2022年4月17日現在最新版の Swift 5.6.1 にて）

参考にさせていただいた記事中に
「x64 Native Tools for VS2019 Command Prompt」を起動する旨の記載がありますが、
「x64 Native Tools <font color="DeepPink">Command Prompt for VS2019</font>」を起動し作業完了しました。
※上記アプリが「スタートメニュー」の「Visual Studio 2019」のフォルダの中にあること等、
　文章と合わせて画像も参照すると安心だと思います。

管理者として「x64 NativeTools Command Prompt for VS2019」を起動し、
4回コピーを行うところで、上書き確認を求められましたが、
4つとも「All」(すべて上書き)で実行してSwiftの動作確認については問題なくできました。

以上です。
コロナ禍でエンジニア転職した人が新人エンジニアへアドバイス

私はコロナ禍で自社開発企業のエンジニアとして転職をしました。

「**新人プログラマ応援 - みんなで新人を育てよう！**」いうイベントがあったので

今回は私がコロナ禍でエンジニア転職をした経験をもとに同じくコロナ禍でエンジニアになる方に向けて、アドバイスをしていこうと思います。

https://qiita.com/official-events/3f21c92121aa125807b4

## メモや資料を残す
* コマンドを入力したらエラーになった！
* 先輩から作業手順を聞いたけど、次、同じことをする時に手順を忘れてしまった！
* 手順書がない/あるけど雑な仕様書で逆にわからない！

開発をしていくとよくあるケースですね。

1. メモに残こす
1. ドキュメントにまとめてチームで共有する
1. 複雑な手順はマニュアルやwikiを作成する

このような形で手順や解決方法を残してチームで共有することで他の人が同じような問題に直面した時、ドキュメントを見せることで解決することもあります。

また手順書を作成することで質問の際、「**手順のどの辺りで躓いているのか**」を詳しく説明できるため、質問された側も「**この人はここで躓いているんだな**」と一から十まで回答しなくてもいいため、双方の時間をあまり取らなくても良くなるメリットもあります。

デメリットは作成に結構時間がかかるため、マニュアルや手順書みたいなキッチリしたものは初めはできなくてもいいですが、メモを残しておくことは最低限行っていくと、後で見返すこともできるのでおすすめです。

搭載されているメモアプリでもいいですし、[Notioin](https://www.notion.so/ja-jp)や[Evernote](https://evernote.com/intl/jp)などの無料アプリを使用するものいいと思います。

## 最初の内は出社する方がいい
最初に出社をオススメする理由は「**組織やチームの雰囲気や先輩・上司の人柄を早めに知るため**」です。

2020年から新型コロナウィルスが流行し、多くの開発企業ではフルリモートとなり、最近では「オフィス勤務とリモートワークを合わせた働き方」を行うハイブリッド勤務を選択する企業も増えました。

在籍しているエンジニアの人数やチーム体制によって異なると思いますが新人エンジニアにとって、リモートで戸惑うのは「**誰に質問していいかわからない**」ではないでしょうか？

私も経験上、色々なエンジニアを見てきました。
* 質問したらキレる人
* 丁寧に教えてくれる人
* アドバイスをして自己解決を促す人

組織には色々な人がいるので最初の内は出社し、同じく出社しているエンジニアに声をかけて質問や雑談をし、人柄を知ることでリモートに移行した際もスムーズにコミュニケーションや質問ができるようになると思います。

しかし、企業によっては最初からフルリモートの場合もありますのでその場合は直属の上司に質問でもいいと思いますし、「他に質問をする時は誰に相談すればいいですか？」と聞いてみるのも手段の一つです。

一番良くないのは、**質問できずに塞ぎ込んでしまうことです。これは絶対に避けましょう。**

最初から完璧にできる人はいないのでわからないことがあれば、下記の記事に記載されている「15分ルール」を採用して、質問をしてみましょう！

https://qiita.com/seki_uk/items/4001423b3cd3db0dada7#:~:text=%E3%81%9D%E3%81%93%E3%81%A7%E3%80%81%E3%81%84%E3%81%A4%E4%BA%BA%E3%81%AB%E8%81%9E%E3%81%91,%E4%B8%BB%E7%BE%A9%E3%81%AB%E3%81%AA%E3%82%89%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8%E3%81%A7%E3%81%99%E3%80%82

## 社内/社外問わず、エンジニアと交流をする
社内のエンジニアとの交流も大事ですが、社外のエンジニアとも積極的に交流することをおすすめします。

社外エンジニアと交流は「**人脈の拡大**」と言う目的もありますが、社外に味方や相談できる人を作っておくと社内で相談できないことがあった時に社外のエンジニアに聞くことで第三者目線からアドバイスをもらうことができます。


また、最近は異業種からエンジニアに転職された人が増えてきていますので、**自分と異なるバックボーンを持つエンジニア**の話は聞いていて、とても刺激を貰うことが多いので、今はコロナ禍でオフラインで交流する機会はありませんが、[connpass](https://connpass.com/)や[techplay](https://techplay.jp/)等のオンライン勉強会に参加して気になるエンジニアがいたら、声をかけて交流してみましょう！

## 仕事とプライベートの線引きはしっかりしよう
リモート作業のあるあるですが、ついつい業務終了後に作業してしまうことがあります。

こういったことが続くと仕事とプライベートの境界線がわからなくなり、自宅にいるはずなのに仕事のことを考えてうまく休めないことがあります。

* 業務終了後は作業用のパソコンは閉じる
* 気づいたことがあっても仕事をしないでメモに残して明日調べる
* 外に出てパソコンから物理的に離れて、気分転換をする

このような行動をとって、仕事とプライベートの線引きをしっかり意識しましょう。

また休日に技術のキャッチアップが必要になる時もあると思います。

しかし、身体と精神に支障が出てしまうと**良いパフォーマンス**ができないので、遊ぶ時はとことん遊んでリフレッシュすることを忘れないでください。

## あとがき
今は初めからリモートで作業することが当たり前のような状況になってきています。

新卒や異業種からエンジニアとなった人はこの新しい働き方の中で仕事をしていくことになりますが
今回のアドバイスが少しでも皆さんの参考になるといいなと思います。
# [C#].NETでText-To-Speechがしたい！(System.**が使いたい！)

## 環境
OS: Windows 10
IDE: Visual Studio 2022

## できるようになること
**.NET**を用いたText-To-Speech(TTS)の設定ができるようになります。

## 注意点
本記事では筆者がつまづいた、.NETでTTSが使用できるようになるまでの設定方法を解説します。TTS自体の使い方については検索していただけるとたくさんわかりやすい記事が出てくると思いますので、そちらをご参照ください。

## 手順
1. Visual Studioを立ち上げ、新たにプロジェクトを作成
2. WPF Applicationを選択。.NET WPF Applicationです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/301564/488771ad-4b67-e213-c948-9d0411750687.png)
名前は何でもよい(今回は安直にTestにしています)のでNextで次に進みます。
3. Frameworkはデフォルトで指定してある、.NET 6.0 (Long-term support)を選択⇒Createをクリック。初期状態は以下の画像のようになっていると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/301564/2c2cc9e6-54d3-60c7-6e88-a392c429a6dc.png)
4. その後、Solution Explorer(右側にある)のプロジェクト名の上で右クリック。Manage NuGet Packagesを選択(.NET Frameworkの時は、Referenceに.dllを追加していたかと思いますが、.NETからはNuGetで管理するようになりました）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/301564/4fca719a-743d-678b-eee2-3dbbe2ddcf9f.png)
5. Browseから「speech」で検索。
6. System.Speechを選択し、インストール。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/301564/c1d64414-8d9c-ad27-c068-f822f3c62070.png)


以上です。
【Vue3×TypeScript】 v-onを埋め込んでみる

``` vue
<script setup lang="ts">
const itemName1 = 'Desk'
const itemName2 = 'Bike'

const price1 = 30000
const price2 = 50000

const url1 = 'https://www.amazon.co.jp/Anker-Wireless-%E3%83%AF%E3%82%A4%E3%83%A4%E3%83%AC%E3%82%B9%E5%85%85%E9%9B%BB%E5%99%A8-Watch%E3%83%9B%E3%83%AB%E3%83%80%E3%83%BC%E4%BB%98-USB%E6%80%A5%E9%80%9F%E5%85%85%E9%9B%BB%E5%99%A8%E4%BB%98%E5%B1%9E/dp/B09HBHDHWL/?_encoding=UTF8&pd_rd_w=sPVLu&pf_rd_p=09fc5329-add5-4943-82f6-96f98cfdada8&pf_rd_r=ARBBFSWTHCDAG33SD6AS&pd_rd_r=2dca66b0-bb15-42bf-8551-0ba834e182f9&pd_rd_wg=y1dHr&ref_=pd_gw_ci_mcx_mr_hp_atf_m'

const buy = () => {
  alert('購入すんのかよ');
}

</script>

<template>
<div class="container">
  <h1>最近の支出</h1>
  <div class="payment">
    <label>{{ itemName1 }}</label>
    <label>{{ price1 }} yen</label>
    <a v-bind:href="url1">ここで買いました</a>
    <button @click="buy()">購入</button>
  </div>
  <div class="payment">
    <label>{{ itemName2 }}</label>
    <label>{{ price2 }} yen</label>
  </div>
</div>
</template>
```

### スクリプト内でアロー関数を定義

``` typescript
const buy = () => {
  alert('購入すんのかよ');
}
```

### template側
``` html
<button @click="buy()">購入</button>
```

こんな感じでv-onを埋め込むことができる。
Tomcat8.5系での出力ログのパーミッションをUMASKで設定する

#確認条件
・Tomcat8.5系ではデフォルトのログ出力時のパーミッションが640となる。
・8.5より前はデフォルトで644。
・640:所有者以外は参照不可。
・644:所有者以外は参照可能。
・起動時シェルでUMASKの値を設定することで、デフォルト値を戻す。

##確認条件
・apache-tomcat-8.5.78で確認。
・Tomcatのシステムログ(Catalina.out)以外のアプリで出力するログもどうなるかも一緒に確認する。
・アプリログはlog4j2で確認。
・TomcatはCentOS7（Virtual Box）上に構築。

##詳細
**何も設定してない場合**
・出力されるログのパーミッションはすべて640。
　testlog.logはlog4j2のログです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/834885/c743c3da-4fb6-8c8f-49d0-5ebc8f9b83e8.png)

```catalina.out
情報 [main] org.apache.catalina.startup.VersionLoggerListener.log コマンドライン引数:       -Dorg.apache.catalina.security.SecurityListener.UMASK=0027
```
・catalina.out上もUMASK=0027と出ている。


**UMASK設定追加**

${CATALINA_HOME}/bin/startup.sh にUMASK追加。
```startup.sh
export UMASK="0022"
```

systemctl start tomcat　で起動

/etc/systemd/system/tomcat.serviceは特に変更なし。
※Umask=0022をここに追加するのも試したけど特に意味なしでした。
　また、/etc/init.d/の下の起動スクリプトで起動している場合などは、そちらにUMASK設定を追記する必要がありそうです。

```/etc/systemd/system/tomcat.service
[Unit]
Description=Apache Tomcat 8
After=syslog.target network.target

[Service]
User=tomcat
Group=tomcat
Type=oneshot
PIDFile=/usr/local/tomcat/tomcat.pid
RemainAfterExit=yes

ExecStart=/usr/local/tomcat/bin/startup.sh
ExecStop=/usr/local/tomcat/bin/shutdown.sh
ExecReStart=/usr/local/tomcat/bin/shutdown.sh;/usr/local/tomcat/bin/startup.sh

[Install]
WantedBy=multi-user.target
```

※参考
https://itsakura.com/java-log4j2-sample#s4
https://qiita.com/kitahara_/items/d8013693fd6479ae2d9c


**結果**

・ログの権限は一律644になったのでＯＫ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/834885/bca0949b-f035-ce66-a131-2d8aefe3dfc9.png)

・catalina.out上もUMASK=0022と出るようになってました。
```catalina.out
情報 [main] org.apache.catalina.startup.VersionLoggerListener.log コマンドライン引数:       -Dorg.apache.catalina.security.SecurityListener.UMASK=0022
```


##感想

仕事でtomcatバージョンアップ時にログの権限が変わってるということがあったので、調べたことを備忘として書きました。
バージョンアップは小さな変更がよくあるので、振り回されがちです。
【Vue3×TypeScript】 v-bindディレクティブについて

``` vue
<script setup lang="ts">
const itemName1 = 'Desk'
const itemName2 = 'Bike'

const price1 = 30000
const price2 = 50000

const url1 = 'https://www.amazon.co.jp/Anker-Wireless-%E3%83%AF%E3%82%A4%E3%83%A4%E3%83%AC%E3%82%B9%E5%85%85%E9%9B%BB%E5%99%A8-Watch%E3%83%9B%E3%83%AB%E3%83%80%E3%83%BC%E4%BB%98-USB%E6%80%A5%E9%80%9F%E5%85%85%E9%9B%BB%E5%99%A8%E4%BB%98%E5%B1%9E/dp/B09HBHDHWL/?_encoding=UTF8&pd_rd_w=sPVLu&pf_rd_p=09fc5329-add5-4943-82f6-96f98cfdada8&pf_rd_r=ARBBFSWTHCDAG33SD6AS&pd_rd_r=2dca66b0-bb15-42bf-8551-0ba834e182f9&pd_rd_wg=y1dHr&ref_=pd_gw_ci_mcx_mr_hp_atf_m'

</script>

<template>
<div class="container">
  <h1>最近買ったものたち</h1>
  <div class="payment">
    <label>{{ itemName1 }}</label>
    <label>{{ price1 }} yen</label>
    <a v-bind:href="url1">ここで買いました</a>
  </div>
  <div class="payment">
    <label>{{ itemName2 }}</label>
    <label>{{ price2 }} yen</label>
  </div>
</div>
</template>
```

↓のような感じで記述することで、const url1と定義したものをhrefとして表示させることができる。
``` vue
<a v-bind:href="url1">ここで買いました</a>
```
EC2のproxy設定をSSM(RunCommand)と同期

複数台のEC2を持っていて、http_proxyやno_proxy設定（に限らず）をSSM パラメータストアで管理している値を同期したい。
例として、パラメータストアに、``http_proxy``,``https_proxy``,``no_proxy``を登録して、パラメータストアの内容を変更した後、EC2の/etc/environmentも同期したいシーンとして、以下のようなRunCommandを発行します。


ドキュメント名：``AWS-RunShellScript ``
コマンドパラメータ：以下
```bash
#!/bin/bash
## get parameter from parameter-store
http_proxy=$(aws ssm --region ap-northeast-1 get-parameter --name http_proxy --query "Parameter.Value" --output text)
https_proxy=$(aws ssm --region ap-northeast-1 get-parameter --name https_proxy --query "Parameter.Value" --output text)
no_proxy=$(aws ssm --region ap-northeast-1 get-parameter --name no_proxy --query "Parameter.Value" --output text)

## debug vars
echo http_proxy is ${http_proxy}
echo https_proxy is ${https_proxy}
echo no_proxy is ${no_proxy}

## show env before sync
cat /etc/environment

## re-sync env
sed -i -e '2,$d' /etc/environment
cat /etc/environment
echo "http_proxy=${http_proxy}" >> /etc/environment
echo "https_proxy=${https_proxy}" >> /etc/environment
echo "no_proxy=${no_proxy}" >> /etc/environment

## show env after sync
cat /etc/environment
```

- ターゲットのEC2は``ubuntu 20.04 LTS``で確認
- 全てのミドルウェアが/etc/environmentを参照するわけではないので、/etc/environment以外に必要となる設定ファイルへの反映するコードが必要です
FetchAPI の使い方 (POST)

こちらの Express サーバーのクライアントです。
[Express の CORS 対応](https://qiita.com/ekzemplaro/items/952d92b58734952fe2e2)

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<title>POST Sum</title>
</head>
<body>
<section>
<h1>POST Sum</h1>

<div id="nowloading">
加減算
</div>
<br />
 <div id="result">result</div>
</section>
<br />
<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />

<script src="post_sum.js"></script>

<hr />
Apr/17/2022<br /> 
</body>
</html>
```

```js:post_sum.js
// ---------------------------------------------------------------
//	post_sum.js
//
//						Apr/17/2022
// ---------------------------------------------------------------
'use strict'

window.onload = ()=>{
	const url = "http://localhost:3000/post_test"

	var str_tmp = "*** start ***<br />"
	str_tmp += url + "<br />"
	document.querySelector("#outarea_aa").innerHTML = str_tmp

	console.error("*** post_sum.js ***")

	const args = {aa: 56, bb: 23}

const param = {
  method: "POST",
  headers: {
    "Content-Type": "application/json; charset=utf-8"
  },
  body: JSON.stringify(args)
};

fetch(url, param)
  .then((response)=>{
    return response.json()  // サーバからはJSONが返される想定
  })
  .then((json)=>{
    // 成功時の処理
	console.error(json)
	document.querySelector("#result").innerHTML = JSON.stringify(json)
	document.querySelector("#outarea_cc").innerHTML = JSON.stringify(json)

	})
  .catch((error)=>{
    // エラー時の処理
	console.error("*** error ***")
	})
}

// ---------------------------------------------------------------
```
Express の CORS 対応

こちらで作成したサーバーを CORS に対応させます。

必要なライブラリーのインストール

```bash
sudo npm install -g cors
```

フォルダー構造

```text
$ tree
.
├── app.js
└── routes
    └── index.js
```

app.js のみ書き換えます。

```js:app.js
//-------------------------------------------------------------------------
//	app.js
//
//					Apr/17/2022
//-------------------------------------------------------------------------
'use strict'

const express = require('express')
const routes = require('./routes')
const bodyParser = require("body-parser")
const cfenv = require('cfenv')
const cors = require('cors')		// 追加

var app = express()
app.use(cors())		// 追加
app.use(bodyParser.urlencoded({ extended: true }))
app.use(bodyParser.json())

app.use(express.static(__dirname + '/public'))

const appEnv = cfenv.getAppEnv()

app.post('/post_test',routes.post_test)

app.listen(appEnv.port, '0.0.0.0', function() {
  console.log("server starting on " + appEnv.url)
})

//-------------------------------------------------------------------------
```
React のコンポーネントでは、名前付きエクスポートを利用すると良い

## 結論
基本的に React のコンポーネントでは、名前付きエクスポートを利用すると良い。


## 理由

- 名前付きエクスポートは、インポートするのに正確な名前を使うことを強制するため。
- デフォルトエクスポートは、独自の名前を作成する必要があり、誤用される恐れがあるため。


### 名前付きエクスポート

```TypeScript
export const SomeComponent = () => {};
```

```TypeScript
import { SomeComponent } from './SomeComponent';
```

### デフォルトエクスポート


```TypeScript
const SomeComponent = () => {};
export default SomeComponent;
```

```TypeScript
import Some from './SomeComponent';
```


## 参考

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export

https://ja.javascript.info/import-export
【Go】protoc-gen-validateを含めたprotoファイルでコード出力時に`protoc-gen-go: invalid Go import path`が発生

## 概要
GoのgRPCで、バリデートを実装する際に便利なのが、[protoc-gen-validate](https://github.com/envoyproxy/protoc-gen-validate)です。[【Go】gRPCのリクエストバリデータを自動生成する](https://note.com/scg_tech/n/nb12a33bfd391)の記事で紹介されている通り、protoファイルでバリデートの定義を設定することで、バリデートのコードを自動生成してくれます。
今回はprotoc-gen-validateを含めたprotoファイルで、コード出力時に`protoc-gen-go: invalid Go import path`というエラーが発生したので、対応方法などをメモ書きします。

## 事象発生時の状況
エラーが発生したprotoファイルは以下の通りです。
なお、使用したProtocol Buffersのバージョン`3.19.4`はです。
```proto:src/proto/authenticationUser.proto
syntax = "proto3";

option go_package = "pb";

import "validate/validate.proto";

package pb;

// ユーザ認証用のサービス
service AuthenticationUserService {
  // Google認証コードの検証
  rpc VerifyGoogleAuthCode (VerifyGoogleAuthCodeRequest) returns (UserResponse) {}
}

message VerifyGoogleAuthCodeRequest {
  string googleAuthCode = 1 [(validate.rules).string.min_len = 1];
}

message UserResponse {
  string id = 1;
  string name = 2;
  string authToken = 3;
}
```
実行したコマンドは以下です。
```
protoc -I=. -I=${GOPATH}/pkg/mod -I=${GOPATH}/pkg/mod/github.com/envoyproxy/protoc-gen-validate@v0.6.7 --go_out="plugins=grpc:./src" --validate_out="lang=go:./src" ./src/proto/*.proto
```

## 対応
`import path`の設定に問題がありそうということで、go_package部分を修正する必要がありそうです。このパス部分の解説は[WARNING: Missing 'go_package' option が出る時の対処法](https://christina04.hatenablog.com/entry/protobuf-go-package-option)の記事が詳しいです。
今回の場合は`go_package`で指定した名前と`package`名は同じにしていますが、protoc-gen-validateを含めると上手くいかないことから、セミコロン（;）を使ってパスを置き換えると上手く出力できました。

```proto:src/proto/authenticationUser.proto
syntax = "proto3";

// パスの置き換えを行うよう修正
option go_package = "pb/;pb";

import "validate/validate.proto";

package pb;

// ユーザ認証用のサービス
service AuthenticationUserService {
  // Google認証コードの検証
  rpc VerifyGoogleAuthCode (VerifyGoogleAuthCodeRequest) returns (UserResponse) {}
}

message VerifyGoogleAuthCodeRequest {
  string googleAuthCode = 1 [(validate.rules).string.min_len = 1];
}

message UserResponse {
  string id = 1;
  string name = 2;
  string authToken = 3;
}
```
Spring Boot開発環境構築@Windows

Springでいろいろプロトタイプを作りたいと思ったので、開発環境構築ついでに手順をまとめました。手順にするほどでもないくらいシンプルです。

## 大まかな手順

1. JDK(Java Developer Kit)のインストール
2. Spring Tool Suite(STS)のインストール
3. Spring Tool Suite(STS)の日本語化

## 1. JDK(Java Developer Kit)のインストール
1.1 以下OracleサイトよりJDKをダウンロード

https://www.oracle.com/java/technologies/downloads/

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87827/6649ee59-79d7-37d2-f668-522edf477f30.png)

1.2 JDKをインストール
・次(N)を押下
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87827/25432f76-64b9-cf63-6944-246abe4fb133.png" width="50%">
・次(N)を押下。JDKのインストール場所変えたかったらここで指定する。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87827/122ff14f-fe53-9b12-2402-e5eb50ec6169.png" width="50%">
・インストールされた旨が表示されたら完了
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87827/8b4f996d-e8ed-002c-f306-745cf617faec.png" width="50%">


## 2. Spring Tool Suite(STS)のインストール
2.1 SpringサイトからSpring Tools 4 for EclipseのWINDOWS版をダウンロードする。

https://spring.io/tools

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87827/1b8e4f16-ef32-8b8e-7204-9a88e5cb29c7.png" width="50%">

2.2 Jarがダウンロードされるので、Jarを実行する。
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87827/9eecc44f-d4a2-ad4e-6947-ded06cbd0646.png)
実行すると以下のようなフォルダが出来ます。
このフォルダにはEclipseが内包されたSpring Tool Suiteが入っています。
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87827/7233794b-12fe-1aa9-9ee5-dce98dcb326b.png)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87827/f05ea2fa-2fa0-1973-878f-d88db07b4d86.png" width="50%">

## 3. Spring Tool Suite(STS)の日本語化
EclipseなのでPleiadesのプラグインで日本語化します。
英語のままで良い方は無視してください。

3.1 Pleiadesのプラグインのダウンロード
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87827/6f810b15-c61d-c58e-76b4-da9bbb6f4ed5.png)

3.2 Pleiadesのプラグインを解答して、Setup.exeを実行
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87827/6ca6a046-532b-5aa6-e8e3-b124eaa06a75.png)

3.3 Setup.exeで2.2で作成したSpring Toolを選択し、日本語化するボタンを押下
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87827/8949bd6e-2734-ebef-6d66-4022331dab3f.png)

これで日本語化されたSpring Tool Suiteが使用可能になります。
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87827/d77c5aba-b0cc-28c8-d252-fc506aecc72a.png)
【Next.js】スタイルの適用方法

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

## スタイルの適用方法

### `CSS Modules`を使用する
`CSS Modules`を使用して適用していきます。  
スタイルを適用する方法は他にもありますが、`CSS Modules`であれば追加の設定をすることなく使用できます。  
なおスタイル適用前のページは以下のようになっています。  

![07ED12AE-2D0B-4402-A792-735672D63786.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/2b5518af-fc95-a6fe-fca0-b6c3e3a68fa1.png)


まず、`Layout.modules.css`ファイルを作成します。  

![スクリーンショット 2022-04-17 19.22.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/f8434fbc-17d2-e21e-aeec-2fd462806a96.png)


`Layout.modules.css`ファイルを以下のように記述します。  
```Layout.modules.css
.container {
  font-size: 30px;
  color: blueviolet;
}
```

次に、`Layout.js`ファイルを以下のように記述します。  
```Layout.js
import Head from "next/head";
import styles from "./Layout.module.css"  // スタイル適用のための記述

export const appName = "Sample App"

function Layout({ children }) {
  return (
    <div className={styles.container}>  // スタイル適用のための記述
      <Head>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <header>
        <h1>{appName}</h1>
        <p>ここにはLayout.jsの内容が表示されています。</p>
      </header>
      <main>
        { children }
      </main>
    </div>
  );
}

export default Layout;
```
すると以下のように画面にスタイルが適用されます。  
![91E2BA2D-D061-48C8-9CDB-58A076CFAB40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/aef00d55-7b0a-2f0c-b994-bc073db229f1.png)
【初心者応援】勉強のモチベーション管理方法

今回は、自分がプログラミングを学んでいく上で、どの様にモチベーションを保っているかをお話してみようと思います。

# その１ 好きな物を利用する。
自分はコーヒーや甘いものが好きなので、土日に勉強するときはWifi完備のお気に入りのカフェでコーヒー飲みながら勉強して、休憩時に甘いものを食べます。
勉強もするし、好きな物も食べたり飲んだりできるので、よくやってました。

# その２　遅めの始業開始を利用する。
平日は、この業界は10時からと、遅めの始業開始が多いのではないでしょうか？
それを利用して、職場の近くのタリーズやサンマルク等で１時間程度、朝食を取りながらプログラミング関係の本などを読んだりしてました。

# その３　わからない事を質問できる環境を手に入れる。
自分の場合は特別で、元々の知り合いに先輩エンジニアが居た為、普段の勉強でわからないものについては、聞いてました。
ずっとわからなくてモヤモヤした気持ちを残し、過ごす事は無かったので良かったと思います。

# その４　時には誰かと一緒にやる。
一人だとこのやり方をしても、『今日はいいかー』みたいな事があるので、月に１回か２回は誰かとできると、やる気になれると思います。

# その５　勉強会などに参加する。
この業界は勉強会が頻繁に開催されてます。そこに参加することによって、新たな知識を知る事ができます。
勉強会で話を聞いただけでは直ぐに理解はできないので、その後の勉強時間にやりたい事が増える為、次はあれやろう！
となると思います。
おすすめサイトは[connpass](https://connpass.com/)です。

# 以上です
自分は本当にカフェが好きなので、カフェにモチベーションを助けてもらってます笑
LOVE2D用に書いたLuaのファイルを簡単に実行する

※MacOSを使用

1・フォルダを作る
2・作ったフォルダの中に、"main.lua"という名前のLuaのファイルを作る
3・フォルダをLOVE2Dのアイコンにドラッグ・ドロップ
golang filepath.PathSlash(path string) (string, error)

```golang
func Main() {
	fmt.Println(filepath.FromSlash("./hello/hifle¥feilfe/fel¥HELLO.go"))
}
//-bash-4.2$ go run main.go 
//./hello/hifle¥feilfe/fel¥HELLO.go
//osがwindowsなら.¥hello¥hifle¥feilfe¥fel¥HELLO.goになっている？
```
DockerでRuby on Railsの環境を構築する際のentrypoint.shのコマンド及びコード理解

## なぜ記事を書こうと思ったか
  前回の記事のRails用のDockerfileを作成する際にentrypoint.shを指定していますが、今回そのentrypoint.shのコマンド及びコードの理解を備忘録として残すため。

  - [DockerでRuby on Railsの環境を構築する際のDockerfileのコマンド及びコード理解](https://qiita.com/zakino123/items/5e7ddf96096156ef814f)

## entrypoint.shのコマンド説明
entrypoint.sh
```
#!/bin/bash
set -e

# Remove a potentially pre-existing server.pid for Rails.
rm -f /app/tmp/pids/server.pid

# Then exec the container's main process (what's set as CMD in the Dockerfile).
exec "$@"
```

  以下にコマンド及びコードの解説を致します。
- `set -e`

  [set]はシェルの設定を確認、変更するコマンドで[-e]によって、実行したコマンドが1つでもエラーになったら直ちにシェルを終了。

- rm -f /app/tmp/pids/server.pid

  "/app/tmp/pids/server.pid"が存在する場合は削除、存在しない場合は無視する。

- exec "$@"

  execコマンドはbashの組み込みコマンドでシェルを実行するコマンドで置き換えるコマンドにする。また、変数"$@"はシェルスクリプトの変数がすべて展開される変数。

## 何故server.pidを削除する必要があるのか

  "server.pid"はサーバー起動時に生成されるものであり、生成されている場合、サーバーは起動状態にあると認識されます。サーバー終了後、"server.pid"が残存する恐れがあり、サーバーを再起動する場合に「サーバーは起動しています」というエラーが吐かれる場合があります。よって、明示的に残存した"server.pid"を削除する事で問題なくサーバーを起動する事ができるようになります。

## 最後に
  最後まで読んで頂き有難うございました！

  何か間違っている所や気になった事があれば、コメントいただけると嬉しいです。

## 参考記事
- [Nginx+Rails6.0+MySQL8.0+Adminer：docker-compose で rails new | Zenn | 北山淳也](https://zenn.dev/junki555/articles/13da16e4f10c9dee2bb9)

- [UNIX & Linux コマンド・シェルスクリプト リファレンス](https://shellscript.sunone.me/variable.html#%E7%89%B9%E6%AE%8A%E3%81%AA%E5%A4%89%E6%95%B0%E3%81%A8%E3%81%9D%E3%81%AE%E5%8F%82%E7%85%A7)

- [exec - シェルを実行したコマンドで置き換える](https://linuxcommand.net/exec/)

- [【 set 】コマンド――シェルの設定を確認、変更する](https://atmarkit.itmedia.co.jp/ait/articles/1805/10/news023.html)

- [【 rm 】コマンド――ファイルを削除する](https://atmarkit.itmedia.co.jp/ait/articles/1606/06/news013.html)

- [【エラーメモ】ターミナルのエラー](https://kyoro1210.hatenablog.com/entry/2020/10/30/221348)
Powershellコマンドでアプリをアンインストールする

PowerShellのコマンドでWindowsにインストールしたアプリをアンインストールする方法を記載します。

アプリをアンインストールするには、そのアプリのIdentifyingNumberが必要になります。以下のコマンドで確認できます。
```powershell
Get-WmiObject win32_product | where {$_.name -eq "Okta Windows Credential Provider"}


IdentifyingNumber : {9C5398A5-4D4F-488A-BB2A-CE96BDFCE670}
Name              : Okta Windows Credential Provider
Vendor            : Okta
Version           : 1.3.5
Caption           : Okta Windows Credential Provider
```

インストールやアンインストールは```msiexec```コマンドで行います。```/x```パラメータの後にIdentifyingNumberを付けアンインストールします。

https://docs.microsoft.com/ja-jp/windows-server/administration/windows-commands/msiexec

IdentifyingNumberを取得する処理と一緒に書くと以下のようになります。

```powershell
$oktaCredential = Get-WmiObject win32_product | where {$_.name -eq "Okta Windows Credential Provider"}
msiexec /x $oktaCredential.IdentifyingNumber /quiet /noreboot
```
Trailheadで「Spring '22 での認定アドミニストレーター資格の更新」に挑戦してみた所感

※最新版「Spring '23 での認定アドミニストレーター資格の更新」はこちらをご確認ください

https://www.youtube.com/watch?v=-edg0oJwhIo

<iframe width="560" height="315" src="https://www.youtube.com/embed/-edg0oJwhIo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>


https://qiita.com/Takaa/items/3f333f2ef70750549375


※この記事作成時は公式からの翻訳は無かったですが、2022年4月19日ごろ公式翻訳が出ました。
ご確認ください
https://trailhead.salesforce.com/ja/users/welcome4/trailmixes/sfdcjp-official-cert-maintenance

※本内容は私本橋が勝手に作成致しました非公式な翻訳でございます。内容に不備や誤字脱字などございましたら申し訳ございません。ご指摘いただけましたら幸いでございます。


Trailhead「Spring '22 での認定アドミニストレーター資格の更新」に挑戦してみました。
https://trailhead.salesforce.com/ja/content/learn/modules/administrator-certification-maintenance-spring-22/maintain-your-administrator-certification-for-spring22

その際に感じたことや困ったことなどを簡単にまとめましたのでご紹介します

まず困ったこととして、ハンズオンChallengeがすべて英語だったということです。

そこで、簡単にですが（もちろんの訳は本橋が勝手に訳した非公式ではございますが）私が日本語訳を行いました

## 「原文」
Create a Restriction Rule for users to keep their Tasks private.
Create a Task Restriction Rule:
Rule Name: Keep Tasks Private
Full Name: Keep_Tasks_Private
Enter User Criteria:
Field: User > Active
Operator: Equals
Type: Boolean
Value: True
Enter Record Criteria:
Field: Assigned To ID (User) > User ID
Operator: Equals
Type: Current User
Value: User ID
Set as Active

## 「本橋の非公式翻訳文」
Todoオブジェクト（※１）についてユーザが非公開にするための制限ルール（Restriction Rule）を作成しましょう

制限ルール（Restriction Rule）作成方法
・ルール名：Keep Tasks Private
・氏名：Keep_Tasks_Private
ユーザ条件
・項目＞有効
・演算子：次の文字列と一致する
・種別：Boolean
・値：True

Record Criteria
・項目＞割り当て先ID（User）＞ユーザID
・演算子：次の文字列と一致する
・種別：現在のユーザ
・値：ユーザID

「有効」のチェックボックスにチェックを入れて保存

※１　通常であればTaskは「仕事」などと訳しますが、Salesforce用語？ではTodoとなります


### 所感１
原文には「Task」オブジェクトと書いてあるがTaskオブジェクト＝Todoオブジェクト　ということを理解するのに時間がかかりました

### 所感2
「有効」のチェックボックスの場所が分かりにくかった（「ユーザ条件」文字の少し上のほうにあったので気づきにくかった）

### 所感3
(私のチャレンジクリアでは必要なかったですが)組織の Salesforce Classic を無効にしたほうがいい？
※手順は、「組織の Salesforce Classic の無効化」を参照してください。
https://help.salesforce.com/s/articleView?id=sf.lex_turn_off_classic.htm&type=5


### 所感4
(私のチャレンジクリアは言語設定、地域設定が日本語でもクリアしましたが)
言語や地域の設定は（このTrailheadは日本語でもクリアできましたが）そもそも原文は英語であり、言語や地域の設定が英語の前提となっているので、言語や地域を英語にしたほうがクリアしやすいかもしれないです。

なお、一般的にTrailhead ハンズオンChallengeで気をつける部分をまとめましたのでこちらもご参考ください
https://www.youtube.com/watch?v=EQutsi039vM&t=16s

<iframe width="560" height="315" src="https://www.youtube.com/embed/EQutsi039vM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
systemd-resolvedのメモ

vmware謹製のdockerホスト(photonOS)、ubuntu系では、名前解決時に直接DNSサーバへ問い合わせするのではなく、systemd-resolvedがきキャッシュしながら問い合わせをしている。

# ハマったこと
## 前提
- homegw配下に複数の機器があるので、DHCPのMAC固定で固定IP化し、ローカルドメインなDNS登録している。(例：homegw.myhome, core-router.myhome, syslogsv.myhome)。
    - DNSサーバはコアルータのDNS機能を利用。
- 内部でlinuxなサーバ（photonOS）が複数台あって、うち一台のログサーバにsyslog転送をしている。core-router, photonsv -->  syslogsv
    - photonsvではrsyslogdを使ってログ転送しているが、転送先はFQDN(syslogsv.myhome)を指定している。

## 遭遇した事象
　photonsvからsyslogsvのIPアドレスが解決できない事象に遭遇。アドレス解決できなければ、当然ログ転送ができないので困った。

- photonsvで```dig syslogsv.myhome```すると、systemd-resolvedが応答しているが「アドレス解決できない」
- photonsvで```dig syslogsv.myhome @core-router.hrsk```として、systemd-resolvedを経由しないと「アドレス解決ができる」。

## DNSのキャッシュをクリアしたら動いた
これが原因だったのかは不明だけど、systemd-resolvedのキャッシュをクリアしたら```dig syslogsv.myhome```で名前解決ができた。

# systemd-resolvedのメモ
　　たまにした遭遇しないそうなので、次回のために　systemd-resolved周りのコマンドメモを残しておく。

| 用法 | コマンド |
| :--- | :--- |
| 権威DNSの設定 | /etc/systemd/resolved.conf |
|  | DNS=w.x.y.z |
| ステータス | resolvectl status |
| 問い合わせ | resolvectl query HOSTNAME or ADDRESS | 
| キャッシュクリア | resolvectl flush-caches |
| キャッシュクリア<br>mac-osの時 | sudo killall -HUP mDNSResponder |
javaScriptの処理の流れとwindowsオブジェクトの中身


<h2>javaScriptの処理の流れ</h2>

**1**
Windows オブジェクト=グローバルオブジェクトが生成される
**2**
Windows オブジェクトのプロパティとして Document オブジェクトが生成される
→DOM ツリーを構築しようとする
→Document オブジェクトのプロパティとして、readyState があり、初めは loading
**3**
Document オブジェクトに要素オブジェクトやテキストノードが追加
**4**
script があれば、解析し始める
これは、同期実行され、構文解析している間は、html 文書の構文解析は一時停止
**5**
html 文書の内容がすべて読み込まれ、DOM ツリーが完成すると、document.readyState のプロパティの値が interactive になる
**6**
document オブジェクトに対して、web ブラウザが、DOM ツリーの完成をつげる DOMContentLoaded イベントを発生させる
**7**
img などの外部リソースがあれば、読み込む
**8**
すべて読み込むと document.readyState のプロパティの値が complete になる
→web ブラウザは、window オブジェクトに対して、load イベントを発生させる
**9**
イベントを受け付けて、イベントが発生するとイベントハンドラが非同期的に呼び出される

適当に時間を指定して、見てみる

```javascript
console.log(document.readyState);
setTimeout(() => {
  console.log(document.readyState);
}, 10);
setTimeout(() => {
  console.log(document.readyState);
}, 1000);
```

![rapture_20220417181444.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1782673/4a8f4779-cda6-acda-2cb4-4773525ff2d9.png)

確かに。。。

<h2>Windowオブジェクトの主なプロパティ</h2>
<h4>location</h4>

location オブジェクトの主なプロパティやメソッドは以下の通り
![rapture_20220417201438.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1782673/dec13bec-73a6-3305-bc6c-765ae1d436d0.png)
例えば

```javascript
window.location.reload();
```

を使うと、ページを再読み込みしてくれる

<h4>history</h4>
historyオブジェクトは、windowsの閲覧履歴を表す

```javascript
window.history.back();
window.history.forward();
```

で履歴を進んだり戻ったりできる

<h4>navigator</h4>
navigatorオブジェクトは、webブラウザなどのアプリケーションの情報を表す

```javascript
window.navigator.language;
```

は web ブラウザの UI 言語を表す

```javascript
window.navigator.platform;
```

プラットフォームなんかも参照できるらしい(windows,mac とか)

<h4>screen</h4>
screenオブジェクトは、モニタのサイズや、色数などの情報を表す

```javascript
window.navigator.availWidth;
```

これで、画面の利用可能な幅を参照できる
大き目のモニターを使うと、大きくなる

<h4>document</h4>
documentオブジェクトは、windows内に表示されるwebページを表す
このオブジェクトからDOMツリーにアクセスしたりする

```javascript
window.document.getElementById('id');
```

こういうのは、素の js だととてもよくみるのではないだろうか

<h>

出典
徹底マスター JavaScript の教科書 プログラミングの教養から、言語仕様、開発技法までが正しく身につく
作成するゲームについて

# 前提

この記事では[前回の記事](https://qiita.com/yue523/items/7293b237af9a8ccee117#1の案についての詳細)で説明したゲームの案について深く検討する。

# 作成するゲームの内容

> どのようなゲームを作成するか?軽量な2Dのゲームかそれとも3Dゲームか?

A. 3Dゲームで作成することにする。

いかに作成する3Dゲームのイメージを上げていく
- 格闘技
- 個人に固有の特殊能力がある
- matrixみたいなカメラワーク 

# ゲームの作成に使用するソフトウェア

ゲーム作成に使用するソフトウェアについて上げていく

 1. Unreal Engine(C++)を使用する場合
    - webサーバ上にアップロードすることができるのか？
    - アップロードできる場合どのような形でアップロードするのか？
 1. Unity(C#)を使用する場合
    - webサーバ上にどのようにアップロードするのか？

現在のところスペックの高いUnreal Engineを検討している。

# 作成したゲームのアップロード方法

1. ゲームをwebサーバ上にどのようにアップロードするか
1. 3Dゲームの場合webサーバの容量は足りるのか？

現在のところ特に考えていない。アイデアが浮かんだら追記する。

# まとめ

以上に作成するゲームのアイデアを記載した。まとめると

- 3Dゲーム
- 格闘技
- 個人に固有の特殊能力がある
- matrixみたいなカメラワーク
- Unreal Engineを使用する
【Transformer】tokenizerでNoneType エラーが出た場合

## 環境
+ Gradient
+ PyTorch 1.11

## エラー内容
以下のようなコードを実行していると、4ブロック目の2行目 `tokenizer = T5Tokenizer.from_pretrained("rinna/japanese-gpt2-medium")` の部分で `TypeError` が出た。
```:ipynb
!pip install transformers
```

```py:ipynb
from transformers import pipeline, set_seed
generator = pipeline('text-generation', model='gpt2')
set_seed(42)
generator("Hello, I'm a language model,", max_length=30, num_return_sequences=5)
```

```:ipynb
!pip install sentencepiece
```

```py:ipynb
from transformers import T5Tokenizer, AutoModelForCausalLM
tokenizer = T5Tokenizer.from_pretrained("rinna/japanese-gpt2-medium")
tokenizer.do_lower_case = True  # due to some bug of tokenizer config loading
model = AutoModelForCausalLM.from_pretrained("rinna/japanese-gpt2-medium")
```


```:エラー
TypeError: 'NoneType' object is not callable
```

## 原因
https://stackoverflow.com/questions/65854722/huggingface-albert-tokenizer-nonetype-error-with-colab

Stack Overflow で似たような質問があった。それに対する回答を一部引用する。

> So I open a brand new colab session, and install everything including the SentencePiece before creating tokenizer, and this time it worked. The Nonetype error simply means it doesn't know what is 'albert-base-v2'. However if you install the packages in right order colab will recognize better the relationship between AlbertTokenizer and SentencePiece. In short for this to work in colab 0. Open a new Colab session 1. Install Transformers and SentencePiece 2. import AlbertTokenizer 3.create tokenizer.（MeiNan Zhu）

> MeiNan Zhu's answer is correct.
Installing or importing SentencePiece before transformers works.（Mayank Soni）

コードの順番に問題があったようだ。

## 解決
transformes が機能する前に sentencepiece をインストールすればよい。
つまり、最初に transformes, sentencepiece をインストールすることで解決する。
Pythonで様々なPDFフォーマットに電子印を一括押印

# はじめに
Pythonプログラムで即業務に役立つサンプルプログラムとして、PDFファイルに透明化処理された電子印影を押印するプログラムを作成してみましたので、備忘録も兼ねて掲載します。
プログラムでは、様々なフォーマットの押印位置に対応する為、押印するべき文字列を見つけその座標位置に合わせて押印しています。

# 動作環境
Visual Studio Code
Python3.9.1
# 各種インストールライブラリー
pdfrw 0.4
reportlab 3.6.9
PyPDF2 1.26.0
pdfminer3 2018.12.3.0
pandas 1.2.3
# 処理概要:
INPUTフォルダに保存された様々なフォーマットの帳票（PDFファイル）を読み込み、電子印を押印し、OUTPUTフォルダに保存するプログラムです。
![PythonでPDFに一括押印_090.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1361368/bb7f19c7-e0d6-2a2c-d2eb-1953b90256f0.png)


# YouTubeでの解説：
プログラムの詳細はYoutubeでも解説していますので、ぜひ、ご覧ください。
<iframe width="560" height="400" src="https://www.youtube.com/embed/JCHZy808EBY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


# 電子印影ファイルの作り方
透明化処理した電子印影の作り方は、こちらの動画で詳しく解説していますので、ぜひご覧ください！
<iframe width="560" height="400" src="https://www.youtube.com/embed/lPStZeOeCQc" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


# サンプルソース（Step1)
YouTubeで紹介しているStep1でご紹介した処理のプログラムソースです。
sample.pdfにstamp.pngファイルの電子印を押印し、sample_out.pdfに保存しています。
```Python:pdf_stamp_add1.py
from pdfrw import PdfReader
from pdfrw.buildxobj import pagexobj
from pdfrw.toreportlab import makerl
from reportlab.pdfgen import canvas
from reportlab.lib.utils import ImageReader

pdf_file = './sample.pdf'
out_file = './sample_out.pdf'
stamp_file = './stamp.png'

pdf = PdfReader(pdf_file, decompress=False).pages
#保存するPDFファイル
cvs = canvas.Canvas(out_file)

page = pagexobj(pdf[0])
cvs.doForm(makerl(cvs, page))
img = ImageReader(stamp_file)

cvs.drawImage(img, 445, 560, 80, 80, preserveAspectRatio=True,mask='auto')

cvs.showPage()  #改ページ

cvs.save()

```

# サンプルソース（Step2)
完成版を含む、続きのソースコードは、以下のYouTube動画の概要欄に、限定共有しているQiitaのURLを掲載しており、恐れ入りますが、そちら経由でご覧ください。
https://youtu.be/JCHZy808EBY
IBM Cloud Professional Sales Engineer v1 受験体験記

# IBM Cloud Professional Sales Engineer v1について
IBM Cloud Professional Sales Engineer v1は、技術コンサルタントを対象としたIBM Cloudの中級レベルの認定試験です。

https://www.ibm.com/training/certification/C0010200

# 筆者の前提スペック
- IBM Cloudは普段の業務でOpenShift, Watson, DBを使っている程度のライトユーザー
- 英語があまり得意ではない

# 学習教材

### 模擬試験
有料の模擬試験です。試験勉強前に腕試しも兼ねて受験してみましたが、いつも通り（？）ギリギリ合格でした。
試験終了後にスコアと合わせて、各出題分野における正答率が表示されるため、自分が理解できていない分野を把握するのにもちょうどよいのではないかと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134250/6350a386-6047-63a7-1c46-94c197174f1f.png)

### ラーニングパス
いつも通りラーニングパスは公開されていますが、残念ながら本試験のラーニングパスについては、IBM社員しか参照できないようになっているようです。
が、模擬試験でスコアがイマイチだった部分（私の場合はSolution CostingとGetting Started with IBM Cloudあたり）のリソースだけチラ見しましたが、受験後に思い返すとここで記載されている内容と一致する出題は少なかったかな、というのが個人的な印象でした。

https://www.ibm.com/training/path/ibmcloudprofessionalsalesengineer

# 試験結果
オンラインで受験し、無事に合格することができました。
ちなみに、今回は始めて試験監督の言語に英語を選択しましたが、チャットでのやりとりやデスクと腕時計のチェックもなく、そのまま試験スタートだったので非常に楽でした（いつもより少し待たされましたが）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134250/f666f6cc-74fe-926a-e76a-ca45b27514e6.png)

# 受験した感想
* そんなに難しくないと聞いていましたが、個人的には結構難しかったです。
* 模擬試験を受けた印象はそんなに難しくないのかな？という印象だったため、あまり学習に時間をかけませんでしたが、これが少し失敗だったと感じています。今思うと模擬試験のスコアはギリギリだったのに、何をもってそんなに難しくないと思ったのかが謎です。
* IBM Cloudのサービスについてはそこまで深い知識が問われない印象でしたので、Technical Advocate v3に合格できる程度の全般的な知識があれば問題ないと思いますが、Study Guideにも記載されている通り、Design ThinkingやGarageメソッド、IBMで提供しているリソース（[IBM Community](https://community.ibm.com/community/user/home)や[IBM Developer](https://developer.ibm.com/)など）についての問題など、IBM Cloudのサービスと直接関連しない分野についても幅広く出題されるため、それらもきちんと抑えておく必要がありそうです。
* オンライン受験固有の問題だと思いますが、OnVueのアプリで電卓が提供されておらず、ホワイトボードなども使えないため、計算を要求される問題が若干つらかったです。
LaravelでTarget class [App\Http\Controllers\Controller◯◯Controller] does not exist.が出た時の対処法

# このエラーが出た背景
Laravelを実行した時に、***Target class [○○Controller] does not exist***
というエラーが出た時の対処についてこの記事を書きます。

![スクリーンショット 2022-04-17 17.30.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/821f2371-d165-a8c6-fa00-853846aa730b.png)

# 原因
このエラーの原因は***ルートの書き方***にあるみたいです。
ここで紹介するのは自分の場合なのでご了承ください。

```route\web.php

Route::get('tests/test','TestController@index');

Route::group(['prefix' => 'contact','middleware' => 'auth'],function(){
Route::get('index','ContactFormController@index')->name('contact.index');
Route::get('create','ContactFormController@create')->name('contact.create');
Route::post('store','ControllerFormController@store')->name('contact.store');
});                 //コントローラー名がここだけ違う
```
****コントローラー名を修正しました。***


```route\web.php
Route::group(['prefix' => 'contact','middleware' => 'auth'],function(){

Route::get('index','ContactFormController@index')->name('contact.index');
Route::get('create','ContactFormController@create')->name('contact.create');
Route::post('store','ContactFormController@store')->name('contact.store');
});                 //ここを修正                 
```

これで解決できました。

***Target class [○○Controller] does not exist***のエラーが出たら
***ルーティングを疑って***みてください。


　

# 参考資料
この資料を参考にして解決できました。

https://www.tairaengineer-note.com/laravel-error-target-class-does-not-exist/
Googleアドセンス広告をワンクリックで非表示にする方法を考えてみた。

## やったこと
Googleアドセンス広告を非表示にするブックマークレットを考えてみました。シンプルな作りなので、対応出来るサイトには限界がありそうです。
また、今回作成したブックマークレットはChromeブラウザでのみ動作を確認しております。

動きは下記Gifのような具合になります。
![4506f8139129a0703aef243f897e6232.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1066161/15d4b370-32af-b789-038f-5e6e5e03935e.gif)

## 作成したブックマークレット
```
javascript:function adsDisplayNone(){const el=document.getElementsByClassName("adsbygoogle");for(i=0;i<el.length;i++)el[i].style.display="none";};adsDisplayNone();
```
ご覧の通り、単純に「adsbygoogle」のclassを持つHTML要素のCSSに、「display: none;」を追加するだけの仕組みになっています。

## ブックマークレットの登録方法
1. ブックマークマネージャを開く
1. 「新しいブックマークを追加」を選択
1. 名前欄は任意の値に設定、URL欄に上記コードをコピペ
後は、Googleアドセンス広告を消したいサイトを開いている際に、作成したブックマークボタンを押すだけです。

## まとめ
個人的な意見ですが、最近は広告があまりにも多いWEBサイトが増加傾向にあるような気がしております。広告を表示しないブラウザが人気を集めていたり、やはり気になっているユーザーも多いのでしょう。

ただ、あまり広告を消しすぎても投稿者の利益を損ねてしまう結果になってしまいますので、お世話になったサイトの広告は非表示にせずリンクを踏んでみるのもいいかもしれませんね。
Reactで.envで環境変数が読み込めずundefinedとなった時の確認観点


## モチベーション

Reactでは.envに変数を記載して、jsファイルから読み込めます。
しかし、読み込みがうまくいかず少しハマったので、その際の確認観点を記載します。

## まとめ

- .envファイルはプロジェクトルートに配置されているか
- 変数はREACT_APP_から始まっているか(例: REACT_APP_XX)
- サーバーを再起動したか

自分はサーバの再起動ができていなかったために読み込めていませんでした。

## 詳細

それぞれ解説します。

### .envファイルはプロジェクトルートに配置されているか

.envはプロジェクトルートに配置しましょう。

### 変数はREACT_APP_から始まっているか(例: REACT_APP_XX)

Reactの場合は`REACT_APP_XX`というように、変数名に`REACT_APP`をつけましょう。

### サーバーを再起動したか

.envに変数を設定後はサーバを再起動しましょう。

他ファイルは再起動しなくても反映されますが、.envは反映されないです。

## 参考
https://qiita.com/KOBA-RYOTA/items/8fa034f2d8ee2be376c1
自作プロトコルのパケットフォーマットをWiresharkで表示

# はじめに
パケットダイアグラムというパケットの構造を図で表示してくれる機能がWireshark ver. 3.4以降で追加されました。
その機能で自作プロトコルのフォーマットを表示してくれるか気になったので確認してみました。
注意点があるものの、自作プロトコルも表示してくれました。
これで自作プロトコルやWiresharkに入ってない新しいプロトコルのパケット解析が若干楽になりそうです。


# 動作環境
* Windows10 Home
* Wireshark ver. 3.6.3
* 日本語表示


# 大まかな流れ
1. LuaでPacket dissectorを記載、プラグインに登録
1. パケットダイアグラムの表示を有効化


# Packet dissector作成と配置
適当に下記のLuaスクリプト（Packet dissector）を作成し、「C:\Program Files\Wireshark\plugins」配下に「.lua」形式で保存した。

```lua
original_proto = Proto("original_proto","Original Protocol (description)")

original_proto.fields.len = ProtoField.uint16("my_proto.len","Length")
original_proto.fields.data = ProtoField.bytes("my_proto.data","Data", base.SPACE)

CONSTANT = {
    PORT_NUM = 20000
}

function original_proto.dissector(buffer, pinfo, tree)
    pinfo.cols.protocol = "ORIGPROTO"

    local subtree = tree:add(original_proto, buffer(), "Original Protocol")
    local len = buffer(0, 2)
    local data = buffer(2, len:le_uint())

    subtree:add_le(original_proto.fields.len, len)
    subtree:add(original_proto.fields.data, data)
end

udp_table = DissectorTable.get ("udp.port")
udp_table:add (CONSTANT.PORT_NUM, original_proto)
```

:::note warn
`local len = buffer(0, 2):le_uint()`のようにリトルエンディアン関連の変換を入れると、パケットダイアグラムに当該項目（Length）が表示されなくなるため注意が必要。
変換したい場合はデータをいったん変数に入れ、変数に対して変換処理を追加すればよい
（上記例では`local data = buffer(2, len:le_uint())`）
:::

# パケットダイアグラムの有効化
メニューより、[編集(E)]->[設定...(P)]->[外観]->[レイアウト]で下記の画像が表示される。
表示部3にてパケットダイアグラムを選択し、[OK]を選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/460885/016f5050-5ee9-e404-e404-63e720a71d3c.png)


# パケット表示の確認
Wiresharkを導入したPCに向かって、適当なLinux端末（Raspberry pi OS）上で下記のコマンドでパケットを送信した。
```terminal
echo 040001020304 | xxd -r -p | nc -u 192.168.0.1 20000
```

下記のように、独自プロトコルのパケットフォーマットが表示されることを確認した。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/460885/b710d26b-ad7d-1fae-e253-b4810144bf43.png)


# さいごに
最近入ったばかりの機能なので、入れ子構造になるような複雑なプロトコルフォーマットでも表示されるかは不明です。
上部に表示されているIPプロトコルの表示を見る限り、何かしらの記載方法がありそうですが、本記事での確認はここまでにします。


# 参考文献
* [wireshark-3.4.0でパケットダイアグラムを表示する](https://qiita.com/tsuyopon/items/4a137be10e53b98c8d70)
* [Wireshark で独自プロトコルを解析 (dissector with Lua)](https://qiita.com/castaneai/items/734fbe2fbdd66f226d50)
Blenderでアニメーションのオブジェクトをステップごとに可視化する

## 概要

アニメーションのオブジェクトがどのように動くかをひと目で確認する方法を紹介します。
ここでは、パス追従コンストレイントのオブジェクトを対象にします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13955/667f71bd-131e-9667-ed36-dcff918ee169.jpeg" width="400">

## 具体例

具体例で説明します。
オブジェクトとして、モンキー（`Suzanne`とします）を作成してください。
また、パスに沿ってアニメーションさせるために、ベジエカーブを作成し、適当に編集してください。
モンキーを選択し、Shiftを押しながらベジエカーブを選択し、`Ctrl + P`(ペアレント）のパス追従コンストレイントを選んでください。
スザンヌを選択し、オブジェクトコンストレイントプロパティで下記のように設定してください。

- 前方の軸：`-Y`
- カーブに従う：チェック

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13955/4f9a3757-af0c-9e83-ef8d-9104b09e7882.jpeg" width="300">

上図の`パスアニメーション`ボタンを押してください。

レンダリングの最終フレームを250から100に変えてください。

この状態でスペースを押すとアニメーション実行がトグルで切り替わるので、確認しましょう。

## Pythonで可視化

Scriptingワークスペースで、テキストを新規作成し、下記をコピペしテキストメニューのスクリプト実行をしてください。
スクリプトでは、フレームの`20, 40, 60, 80`で、Suzanneを複製し、コンストレイントを適用しています。

```py
import bpy

bpy.ops.object.select_all(action='DESELECT')
obj = bpy.data.objects["Suzanne"]
for t in range(0, 100, 20):
    bpy.context.scene.frame_current = t
    bpy.context.view_layer.objects.active = obj
    obj.select_set(True)
    bpy.ops.object.duplicate_move()
    bpy.ops.constraint.apply(constraint="AutoPath")
    bpy.context.object.select_set(False)
bpy.context.scene.frame_current = 100
```

参考：[BlenderでPythonを実行する方法](https://qiita.com/SaitoTsutomu/items/cec67381a8789b40e377)

以上
所属グループでエディタはEmacs派が多くVimが嫌われてた理由を考察

テキストエディタとして何を使うかは、人によって大きく好みが異なるものみたいですね。

ここでは、タイトルの通りで、テキストエディタのVimが嫌われる（ことがある）理由について考察していきたいと思います。
Emacsについてはそこまで深入りはしないですが、一応軽く触れはします。


## ターミナル上で使うエディタの話です

知らない人にも読んで欲しいので、前提から軽く確認しておきましょう。

リモートでサーバーに接続して操作をする際には、ターミナルから接続してコマンドを打ち込む形で行うのが普通です。

テキストファイルを編集するときは、テキストエディタを起動するコマンドを入力すれば、
ターミナル上でファイルの編集ができます。

その際に使うエディタとしては、何種類かの選択肢があります。

- Vim (vim)
- Emacs (emacs)
- nano (nano)

括弧内はコマンド名になります。
このうち、nanoだけエディタとしての名称も頭文字が小文字みたいです（？）。

これらはLinuxのエディタの代表的なものとして知られていて、
私自身も一応それなりに、三つとも使用した経験があります。

基本的に、マウス操作をするのではなく、キーボードをたたいてカーソル移動や文字の追加／削除の操作を行うようになものですね。

## Vimが嫌われていた理由

私がLinuxやコマンドラインでのCUI操作のことを知ったのは、
大学の研究室でした。

パソコンから計算機につないでプログラムをコンパイルしたり計算のジョブを投げたりする際に必要になるのです。

最初にディレクトリの中身の表示や移動、ファイルのコピーや削除などの基本的なコマンドを習得しました。
そして、テキストの表示のためのコマンド、その後に編集のためのコマンドも教わったのですが、その編集のためのコマンドというのが、エディタの起動のためのコマンドなわけですね。

### Vimは初見では同操作すればいいかわからない

その際に、教わったエディタは、Emacsでした。

初見でしたが、Emacsは特に難しさを感じませんでした。
編集が終わったときに、ファイルの保存のためや、編集画面から、
通常のターミナルの画面に戻るためにコマンドを打ち込むキー操作は必要であるものの、
基本的な編集は直感的に操作でき、Windosのメモ帳とか、Word（ワード）などと同じような感覚で使えました。

これに対して、Vimについては、初見ではどう操作すれば編集できるかわかりにくいです。

その主な理由は、Vimエディタでは、モードの切り替えという概念が存在することによります。


どういうことがというと、Vimを開いた状態では、
文字の追加入力のようなことはできず、
モードを切り替えるコマンドを打つことによって初めて、
ファイルに文字を打ち込んでいくことができる、
というのがVimの仕様なのです。

いきなりVimを開いた状態で、編集しろ、と言われても、
普通の人は混乱して何もできないでしょう。

この点、Emacsなら問題なく初めてでも編集はできるはずです。


### いきなりVimが起動することがある

「いきなりVimを開いたら」なんて話をされても、
現実味がないので議論する意味がない、と思うかもしれません。

ところが、現実的に、突然、Vimの編集画面が立ち上がる瞬間というのが、あるのです。


先ほど、テキストの表示用コマンドを教わった話をしましたが、
そのコマンドとは、lessコマンドのことです。


実は、lessでテキストファイルを閲覧している最中に、
Vimが起動してしまうことがあるのです。

閲覧の際に、less画面では、ファイルの位置を移動するコマンドがいくつかあります。
一番下や一番上に移動したり、たくさんの行数を移動したり。
例えば、たくさんの行を進むには、スペースキーを押します。


そうした操作の際に、間違って、「v」のキーを押してしまうのです。

すると、急にこれまでのlessでの操作ができなくなります。


鋭い方はもうお気づきかもしれません。


この「v」を押す操作こそ、lessでファイルを開いている最中に、
そのファイルをVimで編集するための操作なのです。



このような状態になってときに、Linux初心者がどうなってしまうかというと、

パニックに陥ります。
そして、ターミナルごと閉じてしまい、仕方なく再接続をするのです。
これは煩わしいですね。


実際には、Vimから戻るためのコマンドも教わるので、
特に大きな問題はないのですが、
それでも、この出来事のために、Vimに対する第一印象が、
どうしても悪くなってしまいがちなのです。

## まとめなど

結論としては、Vimが私の所属研究室という狭い世界では嫌われていた理由は、
Emacsに比べて直感的な操作が初見ではわかりにくいことと、
閲覧用のlessコマンドを使う際に、間違っていきなりVimでの編集が始まってしまうことがあるので、
そのときのトラウマで嫌いになってしまうことがある、
ということによるものだったと考えられます。


このような文章を書いた私ですが、現在ではエディタはVimを使っています。
なれると非常に便利なので、結局、一番長く使っています。
SSISのDataColumnWithの桁数について

# メモ

**毎回忘れるので**

フラットファイル接続マネージャー＞「詳細」の
各列の「DataColumnWith」は**バイト数**で指定する。
全角(2バイト)だと想定する文字数の２倍を指定する。

## サンプルデータ

以下のようなデータがあるとして、
氏名を切り捨て処理してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123580/95131859-33b3-cf9a-2203-7cf7ab7d21df.png)

## SSISのDataColumnWith

CSVの氏名列を3バイト目で切り捨てて、
CSVとして出力するようにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123580/830b33ce-ba1a-71d5-fcbc-5c143968e0a4.png)

エラーの処理も忘れずに。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123580/96bbf033-c62f-dfda-adcf-d36f553249b3.png)

## 結果

実行して出来上がるデータは以下の通り。
苗字の２文字(４バイト)は、3バイト切り捨てのため１文字だけになっています。
「林」は後ろの半角スペースも含めて、3バイトとなっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123580/2591c178-2f12-cbd9-75ea-65ea0a587e15.png)
Enum.zip_reduce/4を楽しむ（Elixir）

**八重むぐら茂れるやどの寂しきに人こそ見えね秋は来にけり**

Advent Calendar 2022 99日目[^1]の記事です。
I'm looking forward to 12/25,2022 :santa::santa_tone1::santa_tone2::santa_tone3::santa_tone4::santa_tone5:
私の[Advent Calendar 2022 一覧](https://docs.google.com/spreadsheets/d/1HQvFjagQLRPjOYAjDVzWp9S4b8dKixxvvaz_TtbZWto/edit#gid=1723448955)。

[^1]: @kaizen_nagoya さんの「[「@e99h2121 アドベントカレンダーではありますまいか Advent Calendar 2020」の改訂版ではありますまいか Advent Calendar 2022 １日目　Most Breakthrough Generator](https://qiita.com/kaizen_nagoya/items/49ebebee3a0377f3b59b)」から着想を得て、模倣いたしました。 

---



# はじめに

[Elixir](https://elixir-lang.org/)を楽しんでいますか:bangbang::bangbang::bangbang:

この記事は、[Enum.zip_reduce/4](https://hexdocs.pm/elixir/Enum.html#zip_reduce/4)を楽しんでみます。

# [Enum.zip_reduce/4](https://hexdocs.pm/elixir/Enum.html#zip_reduce/4)

[Elixir](https://elixir-lang.org/) 1.12 or laterで使えます。

[Enum.zip/2](https://hexdocs.pm/elixir/Enum.html#zip/2)と[Enum.reduce/3](https://hexdocs.pm/elixir/Enum.html#reduce/3)を理解していると、理解しやすいです。

公式の説明を転載します。

![スクリーンショット 2022-04-17 16.31.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/4e09b943-badb-c421-9973-9e5d12e77167.png)


# Examples

例を2つほど紹介します。

## 例①

例①です。

```elixir
iex> Enum.zip_reduce([1, 2], [3, 4], 0, fn x, y, acc -> x + y + acc end)
10
```

こんな具合に計算が進んでいます。

```
x = 1, y = 3, acc = 0 -> x + y + acc = 4
x = 2, y = 4, acc = 4 -> 2 + 4 + 4 = 10
```


# 例②

2つ目の例です。

```elixir
iex> Enum.zip_reduce([1, 2], [3, 4], [], fn x, y, acc -> [x + y | acc] end)
[6, 4]
```

こんな具合に計算が進んでいます。

```
x = 1, y = 3, acc = [] -> [x + y | acc] -> [4 | []] -> [4]
x = 2, y = 4, acc = [4] -> [x + y | acc] -> [6 | [4]] -> [6, 4] 
```






---

# Wrapping up :lgtm::lgtm::lgtm::lgtm::lgtm:


この記事は、[Enum.zip_reduce/4](https://hexdocs.pm/elixir/Enum.html#zip_reduce/4)をご紹介しました。

[Enum.zip_reduce/3](https://hexdocs.pm/elixir/Enum.html#zip_reduce/3)というものもあります。
この記事の内容をご理解いただいた方には楽勝だとおもいます。


Enjoy [Elixir](https://elixir-lang.org/):bangbang::bangbang::bangbang:
<font color="purple">$\huge{Enjoy\ Elixir🚀}$</font>


以上です。





---

I organize [autoracex](https://autoracex.connpass.com/).
And I take part in [NervesJP](https://nerves-jp.connpass.com/), [fukuoka.ex](https://fukuokaex.connpass.com/), [EDI](https://fukuokaex.connpass.com/), [tokyo.ex](https://beam-lang.connpass.com/), [Pelemay](https://pelemay.connpass.com/).
I hope someday you'll join us.

[We Are The Alchemists, my friends!](https://www.youtube.com/watch?v=04854XqcfCY)

---

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">We appreciate this shoutout, Torifuku! <a href="https://t.co/dThmJg4CYN">pic.twitter.com/dThmJg4CYN</a></p>&mdash; ClickUp (@clickup) <a href="https://twitter.com/clickup/status/1513541411634913284?ref_src=twsrc%5Etfw">April 11, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>