OmniAICreator/Qiita-1.07M huggingface dataset:
cscの作法 その419

# 概要
cscの作法、調べてみた。
練習問題、やってみた。

# 練習問題
automationで電卓、叩いて、12+7を求めよ。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/dfd47008-224f-ff07-6da8-3c26af84a819.png)


# サンプルコード

```


using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading;
using System.Windows.Automation;
using System.Windows.Forms;

namespace UIAutomationSample
{
	class Program {
		private static AutomationElement FindElementById(AutomationElement rootElement, string automationId) {
			return rootElement.FindFirst(TreeScope.Element | TreeScope.Descendants, new PropertyCondition(AutomationElement.AutomationIdProperty, automationId));
		}
		private static IEnumerable<AutomationElement> FindElementsByName(AutomationElement rootElement, string name) {
			return rootElement.FindAll(TreeScope.Element | TreeScope.Descendants, new PropertyCondition(AutomationElement.NameProperty, name)).Cast<AutomationElement>();
		}
		private static IEnumerable<AutomationElement> FindButtonsByName(AutomationElement rootElement, string name) {
			const string BUTTON_CLASS_NAME = "Button";
			return from x in FindElementsByName(rootElement, name) where x.Current.ClassName == BUTTON_CLASS_NAME select x;
		}
		private static Process UpdateTargetProcess(string title) {
			Process process = null;
			foreach (Process p in Process.GetProcesses())
			{
				if (p.MainWindowTitle.Contains(title))
				{
					process = p;
					break;
				}
			}
			if (process == null)
			{
				Console.WriteLine(title + "のプロセスが見つかりません。");
			}
			return process;
		}
		static void Main(string[] args) {
			Process process = Process.Start(@"calc");
			Thread.Sleep(2000);
			process = UpdateTargetProcess("電卓");
			AutomationElement mainForm = AutomationElement.FromHandle(process.MainWindowHandle);
			var btn1 = FindButtonsByName(mainForm, "1").First().GetCurrentPattern(InvokePattern.Pattern) as InvokePattern;
			var btn2 = FindButtonsByName(mainForm, "2").First().GetCurrentPattern(InvokePattern.Pattern) as InvokePattern;
			var btn7 = FindButtonsByName(mainForm, "7").First().GetCurrentPattern(InvokePattern.Pattern) as InvokePattern;
			var btna = FindButtonsByName(mainForm, "プラス").First().GetCurrentPattern(InvokePattern.Pattern) as InvokePattern;
			var btnq = FindButtonsByName(mainForm, "等号").First().GetCurrentPattern(InvokePattern.Pattern) as InvokePattern;
			btn1.Invoke();
			btn2.Invoke();
			btna.Invoke();
			btn7.Invoke();
			btnq.Invoke();
			AutomationElement elm = FindElementById(mainForm, "CalculatorResults");
			Console.WriteLine(elm.Current.Name);
			//Console.WriteLine(elm.Current.ProcessId);
			//Console.WriteLine(elm.Current.AutomationId);
			//Console.WriteLine(elm.Current.ClassName);
			//Console.WriteLine(elm.Current.ControlType);
			//Console.WriteLine(elm.Current.FrameworkId);
		}
	}
}



```

# 実行結果

```

>auto13
表示は 19 です

```

以上。
作ったゲームをUnity Playに公開する方法

# 初めに
Unityで作成したゲームをUnityルームに公開する方法を記載します。

# 前提事項
・事前にアップロードしたいゲームをあらかじめ作成してください（なんでもいいので）。
・本記事で扱っているUnityのバージョンは __2021.3.7f1__ です。

# 目次
|No|見出し|
|---|---|
|__1__|[WebGL Build Supportのインストール](#webgl-build-supportのインストール)|
|__2__|[WebGL Publisherのインストール](#webgl-publisherのインストール)|
|__3__|[ビルドとアップロード](#ビルドとアップロード)|

# WebGL Build Supportのインストール
__WebGL__ 形式でBuildできるようにモジュールを追加します。すでに追加している場合は飛ばしてください。

「__Unity Hub__」を開いて、「__インストール__」➡「__⚙__」をクリックしてください。

![WebGl.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2663952/44d2e0c5-497a-3005-1519-00e9eba6e871.png)

「__モジュールを加える__」をクリックしてください。

![WebGl2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2663952/eb450424-0f79-ac9a-3f06-be66a6ce074c.png)

私の環境ではすでにインストールされていますが、インストールされていない場合は図のような「__WebGL Build Support__」をインストールしてください。

![WebGl3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2663952/2a745e30-66c9-980d-3889-5fad81af355e.png)

# WebGL Publisherのインストール

作成したゲームのプロジェクトをUnityエディターで開き、「__Window__」➡「__Package Manager__」をクリックして「__Package Manager__」を開きます。

![WebGl4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2663952/ee1b973f-d386-854a-c8ea-ec307291c2f8.png)

「__Packages:__」のドロップダウンリストから「__Unity Registry__」を選択してください。

![WebGl5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2663952/8a839a70-14dd-13e7-b54a-40f53e367352.png)

右上の検索ボックスを使用して、「__WebGL Publisher__」を検索して、「__Install__」をクリックしてください。

![WebGl6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2663952/03e3bb43-c2c7-2b98-0caf-506173f93d21.png)

上記の捜査により今までなかった「__Publish__」タブが新たに表示されていると思います。

![WebGl12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2663952/4eb5fb0e-5125-a589-6ae4-886bca8a2abf.png)


# ビルドとアップロード

「__Publish__」➡「__WebGL Projecct__」をクリックしてください。

![WebGl7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2663952/c53ad47c-d3a9-fd17-8f7e-f1254434fcae.png)

「__Get started__」をクリックしてください。（__2回目以降は表示されないかも？？？__）

![WebGl8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2663952/a0dfbe45-70a0-4015-aff4-53342293b3df.png)

「__Build and Publish__」をクリックしてください。

![WebGl9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2663952/1580cef9-b60e-909f-9ce2-55db06ba472e.png)

「__フォルダの選択__」をクリックしてください。

![WebGl10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2663952/6e52de9c-16c6-0142-3f41-d5400fdfc55d.png)

ビルドしてアップロードするのが完了するのに少し時間がかかります。終わるまで待ってください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2663952/9b2c69d6-7e63-a57f-4a5a-8c910dbf8ae0.png)

ビルドとアップロードが完了すると自動でブラウザが開くと思います。「__Play__」ボタンをクリックして、ゲームが正常に動くか確認してください。

![WebGl11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2663952/3af871cf-b4db-681b-14e6-dbe9b6f07e46.png)

動作が問題なければ成功です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2663952/b9650257-9844-f20d-c040-4a73fed88457.png)
いきなり日本最大規模のハッカソンに出てみたお話

# はじめに
* 大学でC言語とPythonを少し触った(基本文法程度)レベルの状態の自分が、去年(2022年)の10月にハッカソンに出た時のお話です。
* 本記事では、初めて出たハッカソンの所感などを連ねたものとなっております。

## ターゲット
* __ハッカソンを出ようとしても自信がなくて悩んでいる人。__
* __2回目のハッカソンに踏み出せない人。__

## 当時の自分のレベル感

 |技術スタック|レベル感|
 |:---|:---|
 |C(C#,C++)|だいたい基礎文法は分かる程度|
 |Python|基礎文法とflaskを少しだけ|
 |他言語|名前は知ってる程度|
 |SQL|簡単なSQL文を書ける程度|
 |Git/Github|何も知らない状態|
 |AWS,Heroku等々|何も知らない状態|

上記の通り手持ちの武器は __基礎文法のみ__ という状態でした。

## きっかけ
　大学で情報系を学んでいましたが、当時の自分はハッカソンという存在をそもそも知りませんでした。そんな自分がなぜハッカソンに出ることになったかと言うと
* __友達が募集してて人がたりなさそうだから__
* __なんとなく楽しそうだと思ったから__

## どういうハッカソン？
初めて参加したハッカソンは __JPHACKS__ でした。日本最大級のハッカソンと呼ばれるのもありサポートが分厚くスポンサーの企業も有名所が多数...

> [JPHACKSの概要](https://jphacks.com/2022/detail/)

## 初めてのハッカソン
最初にメンバーとの顔合わせをしました。しかし、1週間の期限の中 __それ以降全員が揃うことがありませんでした。__
この文章見て悲惨だと思いませんか？
実際に、1人は4日間音信不通になり返信が来たと思えばまた音信不通。他の1人は失踪、もう一人も現れては消え、現れては消えという、メンバー3人の様子が全く掴めないという状態でした。 ~~文章にしてみると改めて悲惨だなこれ~~
そんなこんなで迎えた当日...
やっぱり3人は来なかった....
自分ともう1人の子は、「もうこれ飛ぶ？」「飛ぶかぁ」などと、ハッカソンぶっち未遂までいきました。未遂です。ちゃんと最後まで出ました。そんなこんなで自分たちのチームの発表が終わました。他の発表を聞きながら、この作品すげえとか2人で盛り上がってたら結果発表の時間まで進みました。結果は.....

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/Tomas_engineer/status/1583750009777856512?s=20">pic.twitter.com/Tomas_engineer/status/1583750009777856512?s=20</a></p>&mdash;トーマス (@Tomas_engineer) <a href="https://twitter.com/Tomas_engineer/status/1583750009777856512?s=20">October 22, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


なんとありがたいことに企業賞をいただきました。いや～ほんとびっくりですよね。当日飛ぼうとしてたんですよ僕たち。

# 伝えたいこと
今まで書いてある内容で「__何か足りないな__」と思う所ありませんか？
そう、__実装までの話__ は省いてます。
なぜか？
ハッカソンにおいて、__1番大事なのは実装ではない__ からです。

僕が一番大事だと感じたのは、__楽しむこと__ です。
もちろん「楽しみ方は人それぞれなので実装した方がいい！」と思う方もいるかもしれません。
自分が楽しめるような形で取り組めばいいと思います。
しかし、__"自分が楽しもうとする行動"__ はグループメンバーに影響を与えます。
そこで大事なポイントをいくつか挙げます。
* 報連相
* 時間管理
* ハッカソンのテーマが自分がやりたいことに適しているか

### 報連相
報連相を怠ってしまうと他のメンバーの仕事が増えてしまったり、助けて貰おうにもメンバーは進捗を知らない状態なので具体的な説明をその都度その都度を要するので時間がかかってしまいます。現に著者は、ハッカソン発表日当日(3:00)に技術スタック変更のお願いをされ1から開発環境を作り直しました笑。他に出たハッカソンでは3人いなくなることもありました()
### 時間管理
時間管理を怠ってしまうとタスクが終わらなくなってしまい、焦って上手く動作しなくなり、エラーを直そうとしたら別で誤作動するなど悪循環に陥ってしまいます。現に著者はハッカソンの2日前にワクチンを打ってしまい前日の夜中に吐きそうにながらやってました笑
### ハッカソンのテーマが適しているか
ハッカソンのテーマが自分のやりたいことに適しているかに関しては他の2つのポイントと違い、__ハッカソンに出る前に意識しておきたいこと__、となります。
テーマが自分のやりたいことに適していないと何が良くないのか。
兎に角、アイデア出しの所で躓きます。
* 作りたいプロダクトの案が出ない
* 要件定義

最悪なケースだと、ミーティングが何も進展なく終わる、ということがあります。
募集しているハッカソンのテーマを見て、「自分はこういうのを作る」と抽象的でありながらも何かイメージを持っていると良かったりします。
現に著者は、テーマ決めに1週間(長すぎかも)かけたのにも関わらず,急にテーマの変更をしたこともあります笑

# まとめ
この記事に書かれている内容はネガティブなことが多いですがハッカソンは楽しいです！！！
実際JPHACKSはプログラミングの勉強をしっかり頑張ろうとするモチベになって今の自分が居ますし。他にもwithARハッカソンでは発表会場に前日入りしメンバーと徹夜で作業するだけでなく、深夜にPCを持って都庁に向かって帰りにはコンビニ徘徊するなどオフラインハッカソンの楽しさも知りました！

# 最後に
これはあくまで僕個人の体験を基にしたものなので必ずしも正しいとは言えません。ですが、この記事を見て少しでもハッカソンに出場(再チャレンジ)しようとする勇気を与えれたらなと思います。~~この記事の該当者は焼き肉おごってください、待ってます。~~
nuxt2.7 + vue2.6 を nuxt2.17 + vue2.7へ上げた件

nuxt2.7 + vue2.6 を nuxt2.17 + vue2.7へ上げた件

主な依存npm
- typescript 
- nuxt-property-decorator
- vuex-class-component


# composition api + script setupが得られた
script setupが使えるのはデカい。
たぶんtsxも使えるけど、Volarが強いのでhtmlで十分では。

webstormを使うとpugでも補完しまくりなので、webstorm + pugおすすめ。

# 本当はnuxt3まで上げたかった
nuxt3では class componentが無理っぽかった
vue-class-componentのvue3対応(ver8)はほぼ凍結されている。
かといって、composition-apiに書き換えるのも時間がかかりすぎるので断念。

# 移行手順
## nuxtの新規プロジェクトを作成し、既存のソースをコピーする
```
yarn create nuxt-app <project-name>
```

yarn upgradeなどで行けるかなと思ったけど、nuxt configあたりも色々変わっているので、
新規に作り直してしまった方が安全。

## vuex、useStoreが使えない
nuxt2.17だとvuex 3.6.2になるが、useStoreを持っていないっぽい。
class-componentから利用する分には問題ないが、
script setupすると、this.$storeも使えない。

pluginでstore情報をstatic変数へ保持、いつでも参照できるように対応した

``` plugins/store-accessor.ts
import { Plugin } from '@nuxt/types'
import { Store } from 'vuex'

let storeInstance: Store<any>

const accessor: Plugin = (context) => {
  storeInstance = context.store
}

export const getStore = () => storeInstance

export default accessor
```

``` nuxt.config.js
export default {
  plugins: [
    { src: '~/plugins/localstorage.js', ssr: false }
  ]
}
```

``` hoge.ts
import { getStore } from '~/plugins/store-accessor'

const store = getStore()
```

## typescript
依存関係により4.2になる

## その他
prettier 3.0.0を入れた（入った）ところ、Syntax関連のビルドエラーが発生した。
2.xで止めておくのが吉

```
Syntax Error: Unexpected token, expected "," (1:8)

> 1 | [object Promise]
    |         ^
  2 | export { render, staticRenderFns }
    at parser.next (<anonymous>)
    at normalizeFile.next (<anonymous>)
    at run.next (<anonymous>)
    at transform.next (<anonymous>)
```
laravel10のログをCloudWatchに送信する方法

https://github.com/tarfin-labs/laravel-cloudwatch-logger
を実行する。

これだけだと下記のようなエラーが出る
```
Declaration of Maxbanton\Cwh\Handler\CloudWatch::write(array $record): void must be compatible with 
Monolog\Handler\AbstractProcessingHandler::write(Monolog\LogRecord $record): void
```

下記のリポジトリを使用すれば良い
https://github.com/pagevamp/laravel-cloudwatch-logs
Qiita Engineer Festa 2023 の個人的なふりかえり

ジャーニーマン( @beajourneyman )です。

2023/07/14(金)に4年強ぶりにQiitaの執筆を再開し「[Qiita Engineer Festa 2023](https://qiita.com/official-campaigns/engineer-festa/2023)」に参加したふりかえりを書きます。

# 4年前

4年前に書いたのは、以下の記事でした。日付は2019/05/31です。その頃からはロールも変わり、システム開発の前線にプロジェクトマネージャ(PM)兼システムエンジニア(SE)として戻ってきました。

https://qiita.com/beajourneyman/items/25d7ddeddc422d711f37

昨年後半にAWS基盤で動作するシステムの維持保守開発の担当になり、デベロッパーとしてAWSを触る立場になりました。

https://qiita.com/beajourneyman/items/b64406ffb57fd6441e62

# 2023年になって

4年の間に組織も変わり、数年前にQiitaにOrganizationが立ち、アウトプットする文化を醸成しようという動きが静かにスタートしていました。数年遅れでその動きの仲間に入れてもらいました。きっかけは、鮮烈な AWS Game Day の参加体験です。

https://qiita.com/beajourneyman/items/3034a0059c6e23d3d069

# Qiita Engineer Festa 2023

その動きのリードをしてくれている方から紹介されたのが、今回の「Qiita Engineer Festa 2023」でした。まだ、書いていないメンバーに「7月中にぜひ1本執筆しませんか？」とお誘いがあったのが今回書こうと思った経緯です。

https://qiita.com/official-campaigns/engineer-festa/2023

参加にあたり懸念事項があったので相談しました。懸念事項がクリアできたので書く肚が決まりました。ザっとネタになりそうなテーマをリストにしてみると案外出てきました。イベントレポートやポエムもありますが、結果8日間連続で毎日書けました(本稿は9日目)。実際に書いてみて、行動を変えるために、最初1本がとても重要だと実感しました。

# メンバーと共に

そんな気付きがあったので、同じく未投稿だったメンバーへの声掛けをしてみました(おせっかいですみません)。最終的に2本の記事が世に出ました。それも「はじめての記事投稿」です。とても嬉しかったです。ご紹介します。
人とも、執筆おつかれさまです！！

https://qiita.com/Hiroto_Nagumo/items/796ef3c8d4eab5547cba

https://qiita.com/Shinya_Yoshida/items/ed6c48f99be259f943a5

活動自体には最後発で参加しました。今まで数年の活動があって今があります。自分自身も含めて少しずつメンバーが増え大きくなっています。ただ、まだキャズムの前のアーリーアダプターのステージと認識しています。声を掛け合って少しづつ積み上げて行こうと思います。ふとこんな言葉が浮かびました。

「早く行きたければひとりで行け、遠くへ行きたければみんなで行け」

以上です。
Unityゲーム開発備忘録　#1　Gameobject enable

# 記事の目的
仲間内で遊んでもらうためにゲームを開発するので、そこで必要となったUnityの知識を書きなぐり、主に自分で読み直す用に投稿していきます
# 今回の内容
### ゲームオブジェクトのコンポーネントのenable

主にUIのCanvasに対する処理
CanvasはコンポーネントにあるCanvasのチェックボックスを外すとその子アイテムが非表示化される。
これを用いて、UIの画面遷移を演出できる　はず

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425741/37e04f53-313c-ab7c-97e6-16b02bdc2282.png)

開発中の実際の画面



### スクリプトの書き方例

~~~C#:Sample.cs
this.gameObject.GetCompornent<Canvas>.enable = false;
~~~

これはこのスクリプトを当てたゲームオブジェクト（UI）のCanvasを非表示させるスクリプト

まあもしかしたら`this`はいらないかもしれないけどおまじないは大事

`this.gameObject`で対象となるゲームオブジェクトを指定
`GetCompornent<Canvas>`メソッドでそのゲームオブジェクトのコンポーネントから、`Canvas`を指定
`enable`で表示の可否を
`false`で非表示にする

こんなかんじ



例えばこれを

```C#:Sample2.cs
if (input.GetMouseButton(0))
{
    this.gameObject.GetCompornent<Canvas>.enable = false;
}
```

とすると、その画面で右クリックをするとUIが非表示化されるようになる。


他のゲームオブジェクトに適用したい場合は

```C#:Sample3.cs
Canvas canvas = GameObject.Find("gameobject").GetCompornent<Canvas>
if (input.GetMouseButton(0))
{
    canvas.enable = false;
}
```

とすると`GameObject.Find("オブジェクト名")`で指定したゲームオブジェクトの`Canvas`を非表示化してくれる。

ちなみに`Canvas canvas`は変数になっているので、わかりやすい名前を付けておいた方が`Canvas`でゲシュタルト崩壊しなくて済む（一敗）



### 以降20230724追記



具体的なUI画面の変遷方法について

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425741/99a7f64a-95a2-09e3-99da-d9f1e3894313.png)



UI1はCanvasにチェックマークが入っています。
UI2は見てわかる通りCanvasのチェックが外れているので、シーンプレビューには描写されていません。

ここで、UI1とUI2を切り替えたいです。

といった場合、

```UI1Test.cs:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class UI1Test : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        Cursor.visible = true;
        Cursor.lockState = CursorLockMode.None;
    }

    // Update is called once per frame
    void Update()
    {
        Canvas UI2canvas=GameObject.Find("UI2").GetComponent<Canvas>();

        GraphicRaycaster ray = GetComponent<GraphicRaycaster>();
        PointerEventData point = new PointerEventData(EventSystem.current);
        point.position = Input.mousePosition;
        List<RaycastResult> target = new List<RaycastResult>();
        ray.Raycast(point, target);
        if(target.Count > 0 )
        {
            if(Input.GetMouseButtonDown(0))
            {
                this.gameObject.GetComponent<Canvas>().enabled = false;
                UI1canvas.enabled = true;
                Debug.Log("clicked");
            }
        }
    }
}
```

こんなコードを書くことで、UIを切り替えることができます。


`void Start`部分のコードは、
`Cursor.visible　=　true`
コンテナが起動できないエラー　 [A server is already running. Check /アプリ名/tmp/pids/server.pid.]

# コンテナが起動しないエラーが発生
`docker-compose up`コマンドでサーバーが起動しない
```
 A server is already running. Check /アプリ名/tmp/pids/server.pid.
```

# 原因
`ctrl+c`でコンテナを停止すると`ERROR: 2`という表示がでてコンテナが停止する。
この状態だと次にコンテナを起動する際に上記のエラーが出てしまうみたいです。

# 解決策
エラー内容を確認すると、すでにサーバー起動してるよ`server.pid.`を消してねということなので下記コマンドで削除
```
 rm tmp/pids/server.pid
```
無事サーバーに接続できました。

# おまけ
`Docker Compose　V1`でこのエラーは発生しているらしいので、コンテナ起動時に`Docker Compose　V2`を使用してあげれば正常に終了してくれます。
```
docker-compose up　  　←(Docker Compose　V1)

docker compose up   ←こっちを使う(Docker Compose　V2)
```
SESとSIerの違い

# SESとは
**System Engineering Service**の略であり、ソフトウェアやシステムの開発・保守・運用などの特定業務において、エンジニアの技術を提供する契約を指す

## SESの特徴
1. 客先に常駐して依頼された開発を行う
1. 案件の一部を任されることが多い（自社開発と比べるとスキルアップが見込めない）
1. 長時間の残業が少ない（エンジニアの労働力を提供する契約の為、あらかじめ決められた時間以上の労働を強いられることは少ない）

# SIerとは
**System Integration**の略であり、顧客の「こういうシステムが作りたい！」「運用を行ってほしい！」などの要求を請け負う事業またはサービスを指す

## SIerの仕事
1. システム・アプリ・サーバー・ECサイトなどの構築・開発
1. 完成したシステムの運用保守

# SESとSIerの違い
**①役割**
SES：システム開発にエンジニアの労働力を提供する
SIer：システム開発自体を請け負う

SES企業は、「システムを完成させて納品する」義務はなく、あくまで「決められた業務を行う」だけの役割
SIer企業は、「システム開発自体を請け負う」役割。「システムを完成させて納品する」義務がある。

**②立場(傾向)**
SES：「下請け」になりやすい　
※下請け：引き受けた仕事をさらに別のものが引き受けて行うこと指す言葉
SIer：一次請け・二次請けになりやすい

SESの業務は下流工程(開発・保守運用)が多い。また開発には多くのエンジニアが必要になることから、**多重下請け構造**になりやすい

▼多重下請け構造(元請け企業から2次、3次と下請け企業に発注される状態)
<img width="8000" src="https://wiz-t.jp/work/wp/wp-content/uploads/2022/08/%E3%83%92%E3%82%9A%E3%83%A9%E3%83%9F%E3%83%83%E3%83%88%E3%82%992.jpg">

SIerの業務は、一括で請け負うことが多く、一次請け、二次請けになりやすい

**③労働時間**
SES：長時間労働になりにくい
SIer：長時間労働になりやすい

SESは**準委任契約**という形で契約される。業務開始前に労働時間が決められている為、長時間労働になりにくい。
準委任契約：時間に応じて報酬を受け取る契約
SIerは**請負契約**という形で契約される。「労働力」ではなく「成果物・納期」が重要である為、長時間労働になりやすい
請負契約：業務の成果に応じて報酬を受け取る契約
WSL1でsyslogサーバを立ててみた

### 　WSL1でsyslogサーバを立てようと思った経緯

ある日NW検証に参加してSyslogサーバを立ててほしいと依頼されました。
最近Vmware Wrokstationにハマっており、Syslog、PPPoE、NTPなどさまざなLinuxサーバを用意したいと思っていたので丁度よい機会かと思っていました。
しかし、社給PCのスペックがたりないため、Vmware Workstationが起動できませんでした。
そのため動作が軽いWSLを使用しSyslogサーバを立てることにしました。

### 　WSLのバージョン選定

今回は時間がなかったためWindowsの物理NICに紐付けるWSL1を選定しました。
WSL2はHyperV型なのでIPアドレス設定に時間がかかると思ったからです。

### 　rsyslogの設定方法

ちなみにrsyslogとはsyslogのデーモン（常駐プログラム）です。

最初にroot権限を付与する。
```conf
sudo su -
```




rsyslogがインストールされていることを確認してください。
```conf
# rsyslogd -v
```




なければインストールします。
```conf
# sudo apt install rsyslog
```




rsyslog.confを開き設定変更します
```conf
# vi /etc/rsyslog.conf
```




TCP、UDPを許可します。行頭の#を削除してください。
```conf
# provides UDP syslog reception
module(load="imudp")　　　　　　　　　　←行頭の#を削除
input(type="imudp" port="514")　　　　　←行頭の#を削除

# provides TCP syslog reception
module(load="imtcp")　　　　　　　　　　←行頭の#を削除
input(type="imtcp" port="514")　　　　　←行頭の#を削除
```





設定保存します。
コマンドモード（ESC）に移行し":wq"で保存して終了する。

設定反映するためrsyslogシステムを再起動する。
WSLはsystemctlが使用できないためserviceを使用する。
```conf
sudo service rsyslog restart
```





rsyslogが正常に動作していることを確認する
```conf
sudo service rsyslog status
```





もし動いていない場合は、起動するコマンドを使います。
```conf
sudo service rsyslog start
```





syslogがWSL1に送られているか確認します。
NW内にNW機器がある場合はssh、telnetに失敗すれば届くかと思います。
NW機器がない場合の確認方法を以下に示します。

構成図は以下の通りです。
WSL1を動かしているPC1にPC2を結線しています。
```conf
  +--------+     Ethernet     +--------+
  |  PC1   |------------------|  PC2   |
  | (WSL1) |                  |        |
  +--------+                  +--------+
```





PC2でPowerShellを開きsyslogを送信するコマンドを入力します。
"xxx.xxx.x.x"はPC1のIPアドレスを記載してください。
```powershell
$UDPClient = New-Object System.Net.Sockets.UdpClient
$UDPClient.Connect("xxx.xxx.x.x", 514)
$Encoding = [System.Text.Encoding]::ASCII
$Bytes = $Encoding.GetBytes("<13>Test message from Windows")
$UDPClient.Send($Bytes, $Bytes.Length)
```





WSL1にsyslogが届いていることを確認します。
デフォルト格納先は/var/log/syslogです。
```conf
sudo cat /var/log/syslog
```





以上でrsyslogの設定は終わりになりますが、
検証では複数機器のsyslogが届くので機器をディレクトリ別に分け、日付ごとにファイル出力します。
```conf
$template DailyPerHostLogs,"/var/log/syslog/%fromhost-ip%-%fromhost%/%$YEAR%-%$MONTH%-%$DAY%.log"
*.*     -?DailyPerHostLogs
```
各リモートマシンからのログが/var/log/syslog/IPアドレス-ホスト名/年-月-日.logというパスのファイルに保存されます。例えば、IPアドレスが192.168.1.2、ホスト名がhost1のマシンからの2023年7月18日のログは/var/log/syslog/192.168.1.2-host1/2023-07-18.logに保存されます。




### 　つまづいた点

デフォルト格納先が/var/log/syslogですが、既に/var/log/ディレクトリにsyslogファイル、syslogディレクトリがあるとエラーが発生しました。
なので既にファイルやディレクトリがある場合は削除します。
```conf
sudo rm /var/log/syslog
```





### 　まとめ
WSL1で作成しましたが、NTPサーバはWSL1ではなくWSL2でしか動きません。
このあとNTPサーバも立ててほしいと依頼があり、WSL2にNTPサーバを立てたあとにrsyslogもWSL2に立てています。
なので検証でWSLを使用する際はWSL2でいいとお思います。
基底の取り替えと成分の書き換え

# 相対性理論の読書会


cf.,「相対性理論「一般相対性理論を一歩一歩数式で理解する」石井俊全著 ベレ出版 私家版索引」
https://qiita.com/nanbuwks/items/24c5eb49b22c50cc5588

において、僕の担当が
「第3章 テンソルと直線座標のテンソル場」-「§2　基底の取り換えと成分の書き換え」
でした。



教科書を読んでいたのですが記述がとてもわかりづらかったので、僕なりにわかりやすい形に説明できないかと作った資料です。

# 今回の記事の執筆方法

新しい記事の書き方として、ダイアグラムのイメージに埋め込み png ( emb.png 形式 ) を使用し、Qiita に貼り付けています。ダイアグラムは LibreOffice Draw で作成していて、Qiita 記事内の png から元 odg ファイルを復元することができます。

埋め込み png の詳細はこちらをご覧ください。
「PNG に編集ソースファイルを埋め込んで再編集可能にする その1」
https://qiita.com/nanbuwks/items/1af5b5ec87ebbe2a7712
( 実は今回のような記事を書くために上記の一連の開発を行ってきたものです。)
今回は、図と数式の両方に埋め込み png を使用しています。

ご注意：埋め込み png から復元した時に、画面が白くなっていることがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195351/396d7af0-d4e9-e48c-121f-9e916ad85aac.png)
そのときは、画面外に描画があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195351/04d7ce75-43ce-98e4-962b-b38d60252304.png)
これは、元の odg ファイルが巨大な A0 サイズのシートで作成しているためです。


# 基底の取り換え


## 2種類の元と赤いベクトル

デカルト座標系中に、2種類の元を考えます。

![embeddedpng.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195351/691e4d86-f0ae-1b1d-2a7f-94259e251eea.png)

緑の元を e1,e2、 紫の元を e'1,e'2 とします。
そして、デカルト座標系で4,1 にあるベクトルを赤く描いて a とします。

[]( scale=0.3 )![embeddedpng.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195351/dde80460-a32d-1070-b8af-52234512ef51.png)

これを、デカルト座標系ではなく、緑の元を元にした座標系を考え、a を 緑の座標系で表します。
![embeddedpng.emb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195351/1567dbd8-fd0e-f226-364a-5420bdf7327f.png)

同じく、紫の座標系で a を表してみます。直交してない座標系として、幾何的に考えると簡単ですね。

![embeddedpng.emb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195351/a67b1a1d-176f-f7bc-1b55-78110bd09506.png)



式で表すと以下のようになります。ベクトル a を、様々な座標系で表すことができます。

[]( scale=0.3 )![embeddedpng.emb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195351/8571ec0f-5bf6-fa1f-bd4d-a55edb752ba4.png)

## 紫の単位元を緑の座標系で表す

さて、紫の単位元も、緑の座標系で表すことができます。


![embeddedpng.emb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195351/fe23bbfb-6b7f-e125-d5cf-fe7d77ba9c4e.png)

紫の単位元を、緑で表すと係数がつきますが、
式で表すと以下のようになります。

[]( scale=0.3 )![embeddedpng.emb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195351/3e540250-eba3-e6b5-cfef-45b333114797.png)

## 赤のベクトルを異なる元で表す

実際に数値で計算してみます。

[]( scale=0.3 )![embeddedpng.emb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195351/8a54507d-c1ab-017c-017a-0a11843f6c41.png)
一般化して
[]( scale=0.3 )![embeddedpng.emb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195351/7c40654c-c6e5-986c-4e92-59e900b41b92.png)
# 成分の書き換え


## 基底の取り換え行列を使って2種類の元の間で変換する

赤い a のベクトルを基底の取り換え行列を使うと紫から緑に変換できます。

[]( scale=0.3 )![embeddedpng.emb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195351/cc2a743f-15eb-0f05-c456-98f5bd7a44ff.png)

## 逆行列を用いて逆方向に変換する

基底の取り換え行列の逆行列を用いると、緑から紫に変換できます。

[]( scale=0.5 )![embeddedpng.emb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195351/95436c63-b27b-618e-64e6-6aea71cd95f2.png)

cf.、逆行列の計算方法
[]( scale=0.3 )![embeddedpng.emb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195351/5de93a0e-ce70-73f2-5e1b-ed61b738850c.png)
PHPで作った便利な自作関数集です

```php
<?php
function h($str) {
  return htmlspecialchars($str, ENT_QUOTES|ENT_HTML5, "UTF-8");
}

function _h( $inputs ) {
  if ( is_array( $inputs ) ) {
    $_input = array();
    foreach ( $inputs as $key => $val ) {
      if ( is_array( $val ) ) {
        $key            = htmlspecialchars( $key, ENT_QUOTES, 'UTF-8' );
        $_input[ $key ] = _h( $val );
      } else {
        $key            = htmlspecialchars( $key, ENT_QUOTES, 'UTF-8' );
        $_input[ $key ] = htmlspecialchars( $val, ENT_QUOTES, 'UTF-8' );
      }
    }
    return $_input;
  } else {
    return htmlspecialchars( $inputs, ENT_QUOTES, 'UTF-8' );
  }
}

function insertData($host, $db_name, $db_user, $db_pass, $db_tablename, $insert_data) {
	try {
		$conn = new PDO("mysql:host=$host;dbname=$db_name", $db_user, $db_pass);
		$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

		$keys = array_keys($insert_data);
		$values = array_values($insert_data);
		$num_values = count($values);

		$placeholders = implode(',', array_fill(0, $num_values, '?'));

		$stmt = $conn->prepare("INSERT INTO $db_tablename (" . implode(',', $keys) . ") VALUES ($placeholders)");
		$stmt->execute($values);

		$conn = null;
		return true;
	} catch(PDOException $e) {
		return "Error deleting record: " . $e->getMessage();
	}
}

function fetch_mysql_data($host, $dbname, $db_user, $password, $table_name) {
    // MySQLへの接続
    $pdo = new PDO("mysql:host={$host};dbname={$dbname};charset=utf8", $db_user, $password);
    // エラー時の例外処理
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
    // データの取得
    $stmt = $pdo->prepare("SELECT * FROM `{$table_name}`");
    $stmt->execute();
    $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
    
    return $result;
}

function fetch_mysql_data_where($host, $dbname, $db_user, $password, $table_name, $where_sentence) {
    // MySQLへの接続
    $pdo = new PDO("mysql:host={$host};dbname={$dbname};charset=utf8", $db_user, $password);
    // エラー時の例外処理
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
    // データの取得
    $stmt = $pdo->prepare("SELECT * FROM `{$table_name}` {$where_sentence};");
    $stmt->execute();
    $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
    
    return $result;
}

function deleteRecord($host, $dbname, $db_user, $password, $table_name, $delete_id) {
    try {
        $dsn = "mysql:host=$host;dbname=$dbname";
        $pdo = new PDO($dsn, $db_user, $password);

        $stmt = $pdo->prepare("DELETE FROM $table_name WHERE id = ?");
        $stmt->execute([$delete_id]);

        if ($stmt->rowCount() == 1) {
            return "Record deleted successfully";
        } else {
            return "Record not found";
        }
    } catch (PDOException $e) {
        return "Error deleting record: " . $e->getMessage();
    }

    $pdo = null;
}
?>

```

詳細は後程記入

https://jct.tokyo/
新世代ターミナルエミュレータWarpが最高なのです

Mac OSで作業する場合、ターミナルエミュレータといったらデフォルトの`ターミナル`か`iTerm2`を使うことが多いんじゃないかと思います。

自分は「みんな使ってるからなんか嫌」という理由で`iTerm2`は頑なに使わずデフォルトの`ターミナル`を使い続けて来た（まあ不満はなかった）のですが、ついにこの度、長年求めていたものを発見しました。

それがRust言語製の新世代ターミナルエミュレータ、`Warp`です。

https://www.warp.dev/

`Warp`は多くの便利機能に加え、モダンでかっこいいUIとコードエディタのような使い心地で、一度使ったらもう今までの`ターミナル`には戻れなくなりました。

![スクリーンショット 2023-07-21 23.32.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491979/3091ffba-987a-2cf3-a44c-3837b0859019.png)

本当にテキストエディタのような操作感で、コマンドの入力と出力が1つのブロックになっており、非常に見やすく、コピペなども楽ちん。コマンドの補完等もめっちゃスマートです。
デフォルトで何も設定をいじらずともgitのブランチを表示してくれるのもいいですねー。

他にも盛りだくさんな機能の詳しいドキュメントはこちらです。

https://docs.warp.dev/getting-started/readme


## インストール

公式サイト[Warp](https://www.warp.dev/)からダウンロードするか、
Homebrewを使っている方は`brew`コマンドでもインストールできます。
```shell
$ brew install --cask warp
```
現在はMac OSのみのようです（残念）

## おわりに
`Warp`、マジで最高なんですがただ一つ、日本語(全角)入力の時に一度エンターを押すまで文字が見えないという欠点があります。
現状私はターミナル上で全角文字の入力をする機会が少ないのであまり気にならないですが、例えばコミットメッセージで日本語を書く時はちょっと不便です笑
まあ、まだリリースされて間もないので、今後に期待です！

とはいえ、それを差し引いても`Warp`最高すぎるので、ぜひみなさんも使って生産性爆上げしてください〜！
色を毎回指定せず、currentColor をベースにちょっと薄くしたり濃くしたりしたいんだよなあ……そうだ！

## この記事の概要

CSS の `currentColor` は、その要素の `color` を引き継いで色を指定することができます。

文字とまったく同じ色のボーダーを引きたいとか、アイコンの色指定をしたい、というときはかなり重宝するのですが「少しだけ薄くしたい」みたいな場面もあると思います。

上手いことできないかな？と思っていたら、それなりに上手いことできたので記事にしました。

## 完成形

上から順に黒、赤、青のテキストが並んでいて、それぞれの文字色より少し薄い色でボーダーを引いてあります。
ボーダー指定をしているのは `p` のみで、それぞれのクラスでは何も触っていません。

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

## 仕組み

[`color-mix()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) を使用します。

```css:書式の見本
background-color: color-mix(in srgb, #f00 30%, #000); /* in 色空間, 1つ目の色 濃さ（省略可能）, 2つ目の色 濃さ（省略可能） */
```

この色指定に `currentColor` も使えるため、`#fff` や `#000` あるいは `transparent` などと組み合わせることで、今の `color` を基準に調整した色を背景色やボーダー色にも使えるようになります。

色が違うだけのユーティリティクラスを作らずに済みそうで、多少効率化が図れるような気がしています。

## 最後に

こういう色を作るときは視覚調整が必要がちで、既存のカラーパレットから少しだけ違う色を生み出さないといけない……ってパターンも見かけます。
ただ、 `currentColor` がベースであれば堅牢性や保守性の意味で多少マシな気がするので、どこかで使えるかもしれません。

---

最後まで読んでくださってありがとうございます！
[Twitter](https://twitter.com/xrxoxcxox)でも情報を発信しているので、良かったらフォローお願いします！

[Devトーク](https://jobs.qiita.com/employers/qiita-inc/dev_talks/489)でお話してくださる方も募集中です！
お父さん、明日からVtuberで食べていこうと思うんだ。（ドラフト版）

とりあえず、これを用意すれば何とかなるというのを書いていきます。

# 用意するもの

* パソコン － ゲーミングPC程ではないがそれなりのスペックが必要になる。
* Webカメラ － Vtubeのモデルをフェイストラッキングで動かすのに使用する。よくわからなければ、ロジクールの2万円ぐらいのWebカメラ買えば良い。ノートパソコンのカメラを使用する事もできる。または、スマートフォンのカメラを代用することもできる。
* ヘッドセット － パソコンにスピーカーとマイクが付いていれば無くても良いが、ボイスチェンジャーを使うならあった方が良い。
* Steamクライアント － 以下のソフトがSteamで無料配布されているので、インストールに使用する。
* VTube Studio － フェイストラッキングソフト。カメラに映る自分の動きに合わせてLive2dモデルをぬるぬる動かすことができる。
* OBS Studio － オープンソースのストリーミング配信・録画ソフト。VTube Studioの表示を仮想カメラに出力して、ZoomなどのWeb会議ソフトの入力に流し込める。

# 環境

とりあえず、以下の手持ちの環境で試してみた。

## その1

Windows マシン
OS：Windows 10 Pro (22H2)
CPU：AMD Ryzen 7 3700X 8-Core Processor 3.60 GHz
Memory：48 GByte
Webカメラ：Google Pixel 7 のカメラを使用
ヘッドセット： RAZER BLACKSHARK V2

## その2

Macbook Pro (13 inch, 2020, Four Thunderbolt 3 ports)
OS：macOS Ventura (13.5)
CPU：2 GHz Quad Core Intel Core i5
Memory：16 GByte
Webカメラ：パソコン本体のカメラを使用
ヘッドセット： RAZER BLACKSHARK V2

# 各種ソフトのインストール

1. まずは、[Steamのサイト](https://store.steampowered.com/about/)で「Steamをインストール」をクリックして、Steamクライアントをインストールする。
1. Steamクライアントで「VTube Studio」を検索して、インストールする。
1. Steamクライアントで「OBS Studio」を検索して、インストールする。

# VTube Studioのセットアップ

Steamクライアントの[ライブラリ]からVTube Studioを起動する。
[公式サイト](https://denchisoft.com/)の「Documentation」から[公式マニュアル](https://github.com/DenchiSoft/VTubeStudio/wiki)に移動して、[Getting Started](https://github.com/DenchiSoft/VTubeStudio/wiki/Getting-Started)にしたがってセットアップする。

# OBS Studioのセットアップ

Steamクライアントの[ライブラリ]からOBS Studioを起動する。
[公式サイト](https://obsproject.com/ja)の「Knowledge Base」の[Getting Started](https://obsproject.com/kb/category/1)にしたがってセットアップする。

簡単に説明すると

1. 「ソース」ペインで［＋］(ソース追加)ボタンをクリックし「ゲームキャプチャ」を追加する。
1. 「モード」で「特定のウインドウをキャプチャ」を選択し、「ウィンドウ」で「VTube Studio」を選択する。
1. これでメイン画面にVTube Studioの画面が表示されるので、「コントロール」ペインの「仮想カメラ開始」をクリックする。

# ZoomなどのWeb会議でモデルを表示する。

1. 設定画面などにビデオ、または、カメラの設定があるので入力先としてOBS Studioの仮想カメラを選択する。
1. これで、ビデオ会議等でぬるぬる動くモデルを表示する事ができます。


簡単ですが、今回はここまでとします。
チーム開発の反省

# この記事は何

何かなっていうと、とあるプログラミングコンテストでプロジェクトを立ち上げて開発をしていく中で、私自身に対する問題や、メンバー側の問題などに直面してしまい、かなり開発が滞ってしまうようになってしまいました。

この場を借りて、チームメンバーには謝罪させていただきます。申し訳ありませんでした...。

本記事で、チーム開発をする上での問題点や解決策などを挙げていき、私自身のリーダー能力の向上及び、チーム開発で留意するべき点などを今一度理解をして、今後のチーム開発に役立てていこうという次第であります。

以下の構成で行きます。

1. リーダー側
2. メンバー側

# リーダー側
## 仕様書が雑
仕様書が壊滅的なものはメンバー側も「何がしたいの？」となってしまいます。  

また、タスク管理をする場合にも仕様書の詳細な部分まで掘り詰めておくとタスク割り当てやタスク管理がしやすく、進捗管理もしやすいです。  

仕様書は言わば***開発の要***です。

仕様書は以下の作成をメンバーと一緒に進めることが重要です。

- 企画書
- 外部設計
    - 画面設計書
    - 画面遷移図
    - シーケンス図
- 内部設計
    - ER図
    - データベース設計
    - システム構成図
    - プログラム設計書

他にも必要なものはあると思いますが、少人数設計の場合、この程度があれば開発はできます。このテキストデータをチームで共有して、プロジェクトを進めるようにしましょう。

:::note
仕様書は詳細までしっかりと！
:::

## チームのミーティング不足
私がチームで開発をするとき、ほとんどのメンバーがミュート、或いはテキストチャットでの反応でしたが、リーダーをやっていた私にとって、***声が聞こえない***というのは不安でしかありませんでした...。

また、メンバーに対しての私の配慮があまり足りず、結果的になぁなぁなミーティングになってしまいました。

こうなってしまうとメンバーは

- ミーティングをする意味がないと感じてしまう
- プロジェクトのモチベーションがなくなってしまう

といった問題を抱えてしまいます。

こうならないためにもミーティングは適度に行うべきですが、ミーティングがただの進捗確認だけで終わらせてしまうと、また良くない状態になります。

### 解決策
#### 1on1ミーティングを行う
1on1ミーティングはその名の通り、メンバーとの一対一のコミュニケーションを取り、プロジェクトの理解度に加え、メンバーに対する理解を得るための場でもあります。

以下の効果があります

- メンバーの理解を得られる
- メンバーのモチベーションの向上
- メンバーの能力の管理と向上

#### ミーティングでは話すことを考える。

これはないと思っていますが、私自身、ミーティングをあまり行ったことが無く、ミーティングで話すことが無くて、結果的に単なる進捗報告会みたいになってしまいました。本当に良くないです。

この状態では「***ミーティング意味ないな***」ってなってしまいます。

メンバー側のモチベーションを向上させるためにも、ミーティングに意味を持たせて、意見を言ってもらったり、課題点や問題点などを挙げて解決をする有意義な時間としてするためにも

- 現状の問題点の確認
- メンバー側にもしっかりと発言させる

これらが重要になると思います。

メンバーがミーティングという神聖な場で「***何も話さない***」というのは非常に問題です。よくある例が

>リーダー「なにか意見や抱えている問題などは在りますか？」
>メンバー「***特にありません***」

という会話です。何にも生産性が無いですしこの時間が非常にもったいないです。リーダー側は「***問題意識を持たせる***」という努力をするべきだなと思いました。


:::note
ミーティングはチーム開発において重要な時間。
メンバーとのコミュニケーションとプロジェクトに対するモチベーションを持たせるためにも、有意義なミーティングを行うことを心がける。
:::

# メンバー側

## プロジェクトに対する理解努力や問題意識

これは仕様書の出来にもよると思いますが、チームリーダーが仕様書を書くのが~~下手くそ~~苦手な場合もあるので、プロジェクトの仕様書をしっかりと読む努力や、わからないところや修正するべきところは修正して、テキストデータのバージョンを変更していく必要があります。

仕様書などのテキストデータはGithubなどに挙げておくのも良いですし、NotionやGoogle Driveなどを使ってグループで共有する方法なども考えられます。

また以下のような努力もする必要があります。

- プロジェクトの企画に自身の意見を挙げていくことも非常に重要
- 問題点や改善点などは、チームリーダーに遠慮なく発言する

このような、「***主体的な行動***」をすることもメンバー側では重要です。

## 必要な技術スタックを身に着ける努力

こればっかりはどうしようもないですが、チームで開発するならば特に重要なものだと思います。

これは、プロジェクトの外部設計段階で、どのような技術スタックが、どれに必要になるのかなどをリストアップしておき、予め技術の習得と知識共有をしておく必要があります。

>「WebUSB...？なにそれ！わからないからできない！」
>「AWS...？きいたことあるけど、わからない！」

こういわれてしまうと、かなりできること、やれることが減ってしまい、メンバーの中では「***使い物にならない***」という立ち位置になってしまいます。

チーム開発という場は、プロジェクトの完成のみならず、自分自身の技術スタックの育成も範囲のうちです。

プロジェクトで必要な知識は自分が知らなくてもやれるようにしっかりと学習していくことが重要であるといえます。


# 最後に

以上で終了します。

最近、新しいキーボードを購入して、文字を打つ練習がてらこの記事を書きました。

私は実際、リーダー経験が雀の涙のようになく、プロジェクト開発ではかなりメンバーの足を引っ張りました。

また、そのせいかメンバーの行動がよくわかっておらず、自分自身でも「あの人何やってんだ？？」って思っちゃう人もいました。(本当に申し訳ない)

今でも新しいプロジェクトを立てて開発をしていますが、そちらではチームメンバーの技術スタックの問題による開発の難しさから、何回かプロジェクトの仕様を変更する羽目になりました。

チーム開発というのは非常に難しいなと感じており、ましてや「自分勝手にやってやろう！」なんて考えると、チーム開発でもなくなってしまいます。

チームである以上、メンバー側からも、リーダー側からもコミュニケーションを取り、プロジェクトをより良いものにしていこうとする姿勢が重要であるといえます。


最後ですが、私はおそらく、リーダー向きではないなって自虐しておきます。私は、コミュニケーション能力はある方だと自負していますが、如何せん、

「中身がない」

って言われます。中身のある会話をする努力はしていますが...。よくわからず結局あやふやな会話になります。

今後リーダーになる場合では、特に以上のことを気を付けようと思います。

メンバーの皆様、本当に申し訳ありませんでした。
【Mac】フォルダ内の全ファイルのファイル名を一括で変更する方法

## 方法

Automatorを起動します。

クイックアクションを選択します。

![スクリーンショット 2023-07-20 23.53.14のコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/88750fd6-0194-c36d-8623-eb8f9b9fc2cd.png)

次の内容で作成し、保存します。

![スクリーンショット 2023-07-21 23.48.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/e91070c5-c6d1-5ac6-f527-9adc15c2ea42.png)


Finderで対象フォルダを選択して右クリックします。
「クイックアクション」から先ほど作成したものを実行します。
するとフォルダ内の全てのファイルの拡張子が小文字に変更されます。
JuliaでCのcharをStringに変換する方法

備忘録的に。

# JuliaでCのcharをStringに変換したい

JuliaでSDL2(SimpleDirectMediaLayer.jl)の文字入力を扱う機会があったのですが、文字の出力が、`text=(-29, -127, -103, -29, -126, -126, -29, -126, -126, -29, -126, -126, -29, -126, -126, -29, -126, -126, -29, -126, -126, -29, -126, -126, -29, -126, -126, -29, -127, -82, 0, 127)`みたいに`NTuple{32, Cchar}`型を取るために詰まってしまいました。

Ccharというのは、緩く言えば、1文字を数値の表現で表した`unsigned int`の8bitのデータで、JuliaにおいてもCと同じく数値表現として扱われます。

SimpleDirectMediaLayer.jlでは要するに`ccall`などで得られるC言語の出力を`Cchar`のタプルとして返しているのですが、これをそのまま`println`ったり、`TTF_RenderUTF8_Blended`ったりすると、「それ数字じゃね」ってJuliaは解釈する訳です。

# 解決までのロードマップ

僕はまずこの表現がもしかしたらJuliaだと良くあることなのかと思って、このタプル表現の文字列を直接`String`に突っ込んでみて反応を見てみる訳です。

```julia
text = Cchar.((-29, -127, -103, -29, -126, -126, -29, -126, -126, -29, -126, -126, -29, -126, -126, -29, -126, -126, -29, -126, -126, -29, -126, -126, -29, -126, -126, -29, -127, -82, 0, 127))
String(text)
```

しかし、結果は残念ながら失敗。そんな関数は知らぬとJuliaは返す訳です。

次に、C言語のcharの扱いを思い出そうと努力しますが……高専の頃の、もう随分前の知識で、思い出しても極めてあやふやです。

観念していろいろと調べてみて、やっとまともに動作するっぽいものが完成しました。同じ処理を万が一別の場所で呼び出すときに困らないように`Base.String`にdispatchしてます。(本当は別の型名をつけてやるべきなんだと思いますが、現在の実装範囲では困らなそうなので、適当にdispatchしてます)

```julia
function Base.String(vec::NTuple{32, Cchar})
    ret = ""
    f = x -> (x < 0) ? 256 + x : x
    str = String(collect(UInt8.(f.(vec))))
    i = 1
    while (i <= 32) & isprint(str[i]) & isvalid(str[i])
        ret *= str[i]
        i = nextind(str, i)
    end
    return ret
end

text = Cchar.((-29, -127, -103, -29, -126, -126, -29, -126, -126, -29, -126, -126, -29, -126, -126, -29, -126, -126, -29, -126, -126, -29, -126, -126, -29, -126, -126, -29, -127, -82, 0, 127))

String(text) # "すももももももももの"
```

以上です。
転職活動で悩んだら、ベン図を書いてみよう

筆者が転職をしてみて気づいたことです。
* 今の職場に不満があって転職したいけど、どうやって転職先を決めればいいかわからない
* そもそも自分は何をしたいのかわからない

等の悩みを持っている方のお役に立てば幸いです。


## IT従事者は転職活動での悩みが多い
個人的な感覚ですが、他の業種に比べてIT従事者は転職で悩んでいる人が多いと感じています。その理由についていくつか思いつくのが、
* 業界が新しいためモデルケースが少ない
    * 昔からある業種であれば、新卒入社～定年退職までの一般的なキャリアプランみたいなものがあるかもしれませんが、IT業界は比較的若い業界なのでそれが少ない
    * これは業界にかかわらず時代的なものかもしれませんが
* ハードスキルの移り変わりが激しい
    * １つの技術を身に着けてそれだけやっていれば将来安泰かというとそうでもない
    * 革新的な技術が生まれて、リスキリングが必要になることがままある（クラウド、AIなど）
* やれることが多い
    * IT技術はあらゆる分野（医療、流通、公共などなど）で使われているので、どの分野で何をするかという複数の軸で考える必要がある
 
このように検討すべき軸が多いため転職活動を始めても、何を軸に意思決定すればいいかわからなくなるのではないかと考えました。

## 考えるための３つの軸
じゃあどうするかということですが、__軸が多いのが原因であれば軸に優先順位をつけて検討しやすくしよう__ と考えました。
優先順位をつけるための基準は __その仕事を長く続けるのに重要なことは何か？__ です。
キャリアプランを考えたり、転職活動をするというのはとても重要ですが、大変かつそれ自体は生産的な活動ではないという悲しさがあります。
なので一回行ったらなるべく長く使えた方が良いという考えです。

筆者は以下の3つの軸を優先度の高いものと定義しています。

### 社会的意義
* 事業やMVV(Mission Vision Value) にどれだけ共感できるか
* 自分の仕事が、自分が良いと思う社会に近づくのに貢献しているとしたら嬉しいですよね
### スキル・環境
* 業務内容が自分が持っているスキル（主にハードスキル）とどれだけマッチしているのか
* 自分を取り巻く環境で、仕事に従事し十分に価値提供できるのか
* スキルが全く合わないところで成果を出せない状態が続くのはつらいです（経験談）

### 興味・関心
* 業務内容が自分の興味・関心とどれだけマッチしているのか
* 興味がないことに1日の多くの時間を使うのはもったいない

## 3つの軸を使って検討をする（ベン図を書く）
ではどうやって3つの軸を使うかですが、下記のようなベン図を書きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618713/9586587b-e479-b12b-8fdc-ad2f1a853c07.png)
色が無くて見づらくてすみません。
そしてそれぞれの軸に自分の考えや情報を記載します。
（筆者が2022年に転職活動をした際に記載したものです）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618713/45fab38e-91f8-8ff4-0acd-c63e6a439e31.png)
そしてキャリアや求人情報がこのベン図のどこに該当するかを記載します。
（こちらについては実際のものとは異なります）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618713/2b900d86-8f5c-1521-5094-4e77ec90b8b7.png)
その結果、円が重なっているところ（積集合）に位置する求人が長続きする仕事であるといえます。
また、どうやったら真ん中の３つの円の重なったところになるかを考えることもできます。
* 企業Aは看護師資格が必要
    * 看護師資格を取ってかつ実務経験が必要なので現実的ではない
    * ビジョンに強く共感しているので、募集している以外の仕事はないか
* 企業Bは面白そうだがフロントエンドの経験が無い
    * 家事育児をしつつ学習時間を確保できるか
        * 家族の協力も必要になるので理解を得ることができるか
    * そもそもフロントエンジニアとしての経験がないが企業側として問題はないか
* 企業Cは即戦力になれそうだがやりたいことではない
    * 業務を通じてやりがいを感じることができるか
    * 会社に自分の興味・関心に理解を示してもらえて、取り組む機会を得られるか

これらについて採用面接時に相談したり、転職後の目標設定に利用することもできるではないでしょうか。

## 3つの軸以外の検討軸
もちろん上記3つの軸だけで決められません。ほかにも
* 給与
* 福利厚生
* 社員の人柄
* 企業の業績・成長性

などいくらでも考えることができます。
なのでこれらに対しては一定の基準値を設けてそれを下回らなければOKという考え方もありかと思います。
筆者の場合、以下のような基準を設けていました。
* 給与
    * 下がらなければOK。やりがい優先
* 福利厚生
    * 年間休日125日以上
    * フルリモートワーク可
* 社員の人柄
    * 高圧的な人や職責以上に上下関係にこだわる人は嫌
* 企業の業績・成長性
    * あまり気にしない



## 最後に
筆者は「社会的意義」「スキル・環境」「興味・関心」を主軸にしていますが、何を優先軸とするかは個々の価値観で決めるのが良いかと思います。ただその際には、 __優先順位を決めるための基準__ を定義するのをお勧めします。
でないと円が全く重ならず、役に立たないベン図になってしまうかもしれません。

この記事が転職活動で悩んでいる人の一助になれば幸いです。
Qiita CLI Beta版を使ってみる

Qiita CLI Beta版を使ってみました。

https://blog.qiita.com/qiita-cli-beta-release/

# 環境構築

README に導入手順が丁寧に書かれています。

https://github.com/increments/qiita-cli

必要なのは、 Node.js と GitHub リポジトリです。

## Node.js

> Qiita CLI を使うには Node.js 18.0.0 以上が必要です。Node.js をはじめて使う場合はインストールする必要があります。

後述の Zenn CLI と同じなので、利用済みであれば特に構築は不要です。

## GitHub

GitHub に Qiita の記事を管理するリポジトリを新規に作成し、 CLI で生成したコンテンツを連携できます。下記は手順に従って GitHub で管理するようにしたリポジトリです。

https://github.com/ykws/qiita-content

### Actions

リポジトリを更新すると用意されている Actions で Qiita にも反映されます。

![Screenshot 2023-07-22 at 0.01.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31787/3c288c6e-b84c-5e42-616b-d4ab48d2f118.png)

# Zenn CLI 

Zenn のコンテンツも管理しています。

https://github.com/ykws/zenn-content

公式の導入ガイドです。

https://zenn.dev/zenn/articles/zenn-cli-guide

環境は Qiita と同様に Node.js が必要になります。下記は導入した時の記事です。

https://zenn.dev/ykws/articles/zenn-cli-deployment

# おわりに

Qiita と Zenn でシームレスに記事を管理して投稿先を選べるようにしてみたいと思いました。その時、 Qiita と Zenn に投稿を分散する動機は何なるかというと、こういったイベントになるのでしょうか。将来的に、また新しい記事プラットフォームが登場した時も Git 管理の記事から投稿先を CLI で選べるようにできたらと思いました。

イベントへの参加は CLI 経由だとできなそうだったので、この投稿自体はサイトから行い同期しました。

> Qiita CLIを利用すると実施中の[Qiita Engineer Festa 2023](https://qiita.com/official-events/4f3daca63fb78f16df0b)の「記事投稿キャンペーンに登録する」は実施できなかったのでキャンペーンの投稿の際にも利用出来なそうです。

https://qiita.com/yuzinet/items/4f3b7c2e4ac8c0954a9e
Qiita の記事を Qiita CLI で管理できるようになったので 導入した textlint rule 


## はじめに

Qiita の記事を GitHub 等レポジトリで管理出来る Qiita CLI が β リリースされています。
Qiita の記事が GitHub 等で管理出来るようになったので導入したいと考えていた textlint を導入しました。
その 導入した textlint の rule をこの記事にまとめました。

https://blog.qiita.com/qiita-cli-beta-release/

## 導入した textlint rule

:::note warn
導入途中の textlint-rule も記載しています。
:::

### textlint-rule/textlint-rule-no-todo

- `todo` を禁止する rule です

https://github.com/textlint-rule/textlint-rule-no-todo

### textlint-ja/textlint-rule-no-synonyms

- 同義語を表記ゆれをチェックする rule です
  - 私は表記揺れが若干多いタイプなので導入しています

https://github.com/textlint-ja/textlint-rule-no-synonyms

### textlint/textlint-filter-rule-comments

- textlint の rule を一部で無視する設定のために利用します

https://github.com/textlint/textlint-filter-rule-comments

### bun913/textlint-rule-aws-service-name

- AWS Service 名を check する task です

https://github.com/bun913/textlint-rule-aws-service-name

### textlint-ja/textlint-rule-no-mixed-zenkaku-and-hankaku-alphabet

- 全角と半角アルファベットの混在をチェックする rule です

https://github.com/textlint-ja/textlint-rule-no-mixed-zenkaku-and-hankaku-alphabet

### textlint-rule/textlint-rule-period-in-list-item

- list−item の末尾の取り扱いにいて調整するための rule です

https://github.com/textlint-rule/textlint-rule-period-in-list-item

### textlint-ja/textlint-rule-preset-ja-spacing

- スペース周りのスタイルを統一する rule です

https://github.com/textlint-ja/textlint-rule-preset-ja-spacing

### textlint-ja/textlint-rule-preset-ja-technical-writing

- 技術文書向けの textlint rule です

https://github.com/textlint-ja/textlint-rule-preset-ja-technical-writing

## References

https://github.com/mziyut/articles/issues/5

https://github.com/mziyut/articles/pull/4

https://github.com/mziyut/articles/pull/17
早押しクイズ〜Stable Diffusionが作成した画像を当てろ！〜

![Screenshot 2023-07-21 at 22.11.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2744789/1bd8b494-7e58-18b4-95f5-e46f78811c36.png)

ControlNet(Stable Diffusion)を使った早押しクイズアプリを作りました．
ノイズがかかった画像から綺麗な画像が生成するまでの流れに着目し，分かり次第回答する「早押しクイズアプリ」です．

https://github.com/ysenkun/quiz-stable-diffusion

## 目次
- 遊び方
- 環境構築
    - バックエンド
    - フロントエンド
- 動かす

## 環境
- Ubuntu 22.04
- GPU memory 12GB以上 (NVIDIA GeForce RTX 3090 Ti 使用)

## 遊び方
![Screenshot 2023-07-21 at 21.54.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2744789/a23f1f33-60e1-c15a-c34b-068e02292c61.png)

はじめに，出題者(Questioner)と回答者(Answerer)に分かれます．
出題者は，画像を生成させるために絵とその絵を説明するテキストを準備します．準備した絵をアプリで撮影または画像をアップロードし，説明分を入力します．

入力情報を送信することで，画像が生成されます．生成後，出題者がSTARTボタンを押してゲームを始めます．回答者は答えが分かったらSTOPをボタンを押し，出題者と答えあわせをします．間違えたら出題者が再度STARTボタンを押し，正解するまで遊ぶアプリです！！！



## 環境構築

```bash
$ git clone git@github.com:ysenkun/quiz-stable-diffusion.git
```

### バックエンド
#### ControlNet
ControlNetを用いて画像生成を行うため，以下のコマンドでモデルをダウンロードします．
```bash
$ cd server/controlnet/
$ wget -P ./models https://huggingface.co/lllyasviel/ControlNet/resolve/main/models/control_sd15_scribble.pth
```

ControlNet用の仮想環境を以下のコマンドで作成します．
```bash
$ conda env create -f environment.yaml
```

#### Nodejs(Socket.io)
次にNodejsの環境を構築していきます．
```bash
$ cd server/nodejs/
$ npm install --no-package-lock
```

以下の *{YOUR_APPROPRIATE_PATH}* を自分のpython実行環境に合わせて変更してください．
```javascript:server/nodejs/server.js
 var {PythonShell} = require('python-shell');
 var options = {
    pythonPath: '{YOUR_APPROPRIATE_PATH}/control/bin/python', 
    pythonOptions: ['-u'], 
    args: [prompts]
};
```

[補足] 以下のコマンドで，上記のPathを確認することができます．
```bash
$ conda activate control
$ which python
```


### フロントエンド
```
$ cd front/
```

以下の *your_socket_ip* をバックエンドで動かすNodejsのIPを指定してください.（デフォルトのポート番号は3031）
```vuejs:front/src/views/QuizView.vue
methods: {
    initSocketConnection() {
      console.log("Initializing socket.io...");
      this.mySocket = io("your_socket_ip");
```

以下のコマンドで環境構築してください
```bash
$ npm install --no-package-lock
```


## 動かす
以下のコマンドで，バックとフロントを動かします．
```bash
$ cd server/nodejs
$ npm run serve
$ cd front/
$ npm run serve
```

以下の動画は，実際に触っている様子です．
左が出題者，右が回答者です．
![sample.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2744789/1f8c0269-c6f1-ee4f-86c7-8c45e57fde48.gif)
GitHub Copilotとチームでモブプロしたいときにハマったこと（VSCode & LiveShare）

# はじめに
GitHub Copilotをチーム全員で使ってモブプロしたい！と思った時にハマりポイントがあったので、その内容と解消法です。

# 前提
* チーム全員でVSCode & GitHub Copilot Extentionを利用。
* GitHub Copilot for Businessを利用。
* リモートで繋いで開発するチームのためLiveShareでコードを共有してモブプロ。

# 結論
LiveShareのゲスト側（URLを払い出してもらった側）はWorkspaceのTrustをしよう！
![スクリーンショット 2023-07-21 23.03.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/8531d29b-ed4b-5ce7-acaf-b32af9dad2e8.png)


# ハマったこと
LiveShareのゲスト側（URLを払い出してもらった側）でなぜかVSCodeにCopilotアイコンが表示されない&コードがサジェストされない、、

ホスト側（LiveShareのURLを払い出した側）からはCopilotのアイコンが見えていて、コードのサジェストが動くぞ、、

# 原因
LiveShareのゲスト側はRestricted Modeになっていて、Extentionが制限されていたためでした。

# 解消方法
## Restricted Mode解除前
WorkspaceをTrustして、Restricted Modeを解除する。
![スクリーンショット 2023-07-21 23.03.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/7305bfb0-6c30-a4bf-f44a-3144c8733572.png)

## TrustしてRestricted Mode解除後
CopilotアイコンがActive状態で表示された👍

![スクリーンショット 2023-07-21 23.04.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/bf6d0980-a4b9-463e-4b1f-8ffcf0829a7f.png)

# 参考
https://code.visualstudio.com/docs/editor/workspace-trust
顧客マイページ作成

### はじめに
bootstrap導入済　
namespases使用
devaice導入済
新規顧客登録機能実装済
_______
完成イメージ
![スクリーンショット 2023-07-21 23.31.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492906/26ea119d-dcb0-24fc-d089-ce29fff3f0c2.png)

### ルーティング
```routes.rb
namespace :public do
  resources :customers, only: [:show, :edit, :update]
end
```
### コントローラー
public/customers_controller作成
 ```
rails g controller public/customers show edit update
```
```public/costomers_contoroller.rb
class Public::CustomersController < ApplicationController
  before_action :authenticate_customer!

  def show
    @customer = current_customer
  end

  def edit
    @customer = current_customer
  end

  def update
    @customer = current_customer
    if @customer.update(customer_params)
      redirect_to public_customer_path(@customer), notice: "登録情報が更新されました。"
    else
      render :edit
    end
  end

  private

  def customer_params
    params.require(:customer).permit(:last_name, :first_name, :last_name_kana, :first_name_kana, :postcode, :address, :email)
  end
end
```
### views 顧客マイページ
```erb:public/cosutomers/show.html.erb
<div class="container mt-5">
  <div class="row">
    <div class="col-md-2"></div>  
    <div class="col-md-8">

      <h1 class="mb-4">マイページ</h1>

      <h2>登録情報</h2>
      <%= link_to '登録情報編集', edit_customer_path(@customer), class: "btn btn-success mb-4" %>

      <div class="table-responsive">
        <table class="table table-bordered">
          <tr>
            <th class="table-secondary w-25">氏名</th> 
            <td><%= @customer.last_name %> <%= @customer.first_name %></td>
          </tr>
          <tr>
            <th class="table-secondary">カナ</th>
            <td><%= @customer.kana_last_name %> <%= @customer.kana_first_name %></td>
          </tr>
          <tr>
            <th class="table-secondary">郵便番号</th>
            <td><%= @customer.post_code %></td>
          </tr>
          <tr>
            <th class="table-secondary">住所</th>
            <td><%= @customer.address %></td>
          </tr>
          <tr>
            <th class="table-secondary">メールアドレス</th>
            <td><%= @customer.email %></td>
          </tr>
        </table>
      </div>

      <%= link_to '配送先一覧表示', addresses_path, class: "btn btn-info mb-4" %>
      <%= link_to '注文履歴一覧表示', order_path, class: "btn btn-info mb-4" %>

    </div>
    <div class="col-md-2"></div>  
  </div>
</div>
```
### 実装方法について
会員側のマイページを作る際には、以下の手順を踏むことが一般的です。

**ルーティングの設定**: まずはユーザーがマイページにアクセスできるように、適切なURLに対してコントローラーとアクションをマッピングします。たとえば、config/routes.rbファイルで resources :customers, only: [:show] と設定すれば、/customers/:id というURLでマイページにアクセスできます。

**コントローラーの作成**: 次に、マイページの表示を担当するアクションを作成します。たとえば、CustomersControllerにshowアクションを作成し、その中で @customer = Customer.find(params[:id]) というように、URLからIDを取得して該当する顧客を検索します。

**ビューの作成**: 最後に、顧客の情報を表示するビューを作成します。たとえば、app/views/customers/show.html.erbにマイページの内容を書き込むことで、顧客の情報を表示できます。

なお、ログイン状態を管理するためにDeviseを使っている場合、現在ログインしているユーザーの情報は**current_userメソッド**で取得できます。そのため、特定の顧客のIDをURLから取得するのではなく、**@customer = current_user**として現在ログインしている顧客の情報を表示することも可能です。

以上が基本的な手順ですが、具体的な実装は使用しているフレームワークやライブラリ、要件により異なるため、適宜調整が必要です。