OmniAICreator/Qiita-1.07M huggingface dataset:
VBA勉強　メールテンプレートを活用したい

こんにちは、水野と申します。
VBAの勉強として今回はメールテンプレートの活用を目標として
ChatGPT先生と勉強してみました。


#### ChatGPTに質問
今回はChatGPTに以下のように投げてみました。
```
Excelのシート情報を特定のフォルダに格納されているメールテンプレート.oftの
本文に代入するVBAのコードを教えて！
```
そして返ってきたVBAコードが以下になりますので
その内２か所について触れていこうと思います。


```
Sub SendEmailUsingTemplate()
    Dim OutlookApp As Object
    Dim OutlookMail As Object
    Dim TemplatePath As String
    Dim ws As Worksheet
    Dim Name As String
    Dim DateValue As String
    Dim MailBody As String
    
    ' Excelシートの設定
    Set ws = ThisWorkbook.Sheets("Sheet1")
    
    ' データを取得
    Name = ws.Range("A1").Value
    DateValue = ws.Range("B1").Value
    
    ' Outlookアプリケーションの設定
    Set OutlookApp = CreateObject("Outlook.Application")
    
    ' テンプレートのパス
    TemplatePath = "C:\Path\To\Your\Template.oft"
    
    ' メールテンプレートを開く
    Set OutlookMail = OutlookApp.CreateItemFromTemplate(TemplatePath)
    
    ' メールテンプレートの本文を取得
    MailBody = OutlookMail.Body
    
    ' プレースホルダを変数で置き換える
    MailBody = Replace(MailBody, "{Name}", Name)
    MailBody = Replace(MailBody, "{Date}", DateValue)
    
    ' メールテンプレートの本文を更新
    OutlookMail.Body = MailBody
    
    ' メールを表示（または送信するには .Send メソッドを使用）
    OutlookMail.Display
    
    ' オブジェクトの解放
    Set OutlookMail = Nothing
    Set OutlookApp = Nothing
End Sub
```

### ①.CreateItemFromTemplate メソッド

文字通り過ぎて、ChatGPTに質問してみたのですが、
指定したテンプレートファイルから新しいアイテム（メール、予定表アイテムなど）を作成するために使用される
Microsoft Outlook の Application オブジェクトのメソッドのようです。
<details><summary>活用できそうなこと</summary>
私が普段はヘルプデスク業務をしているため、
問い合わせの内容ごとにテンプレートが存在することもあるのですが、

”①問い合わせ内容②テンプレート格納先③宛先”の三つを別シートにまとめておいておけば、
問い合わせ内容を選択してツールを実施すると、適切なテンプレートと宛先をセットした状態でテンプレートを開くこともできそうですね。

</details>

### ②Replaceでメール本文に代入
MailBody = OutlookMail.Bodyでテンプレートの本文を引っ張ってきて、
そのうちプレースホルダを変数で置き換えていく作業。
Replaceってどう使うの？と思ったのでChatGPT先生に投げてみたところ、
以下の通りシンプルな回答が届きました。
```
Replace(expression, find, replace）
```
expression: 文字列を置き換える対象となる元の文字列です。
find: 置き換えたい部分文字列です。
replace: 置き換え後の文字列です。
<details><summary>活用できそうなこと</summary>
故障機器の情報を、担当部署へ連携するときに、
機器情報がまとまっている台帳から、

シートの行と列を指定すれば、メーカー・設置箇所・所有者等の情報を
まとめてテンプレート転記できてコピペの手間が省けそう。

</details>

#### まとめ
今回はテンプレートの活用を目標としてみたのですが、
改めてVBAについて勉強するにあたって、.CreateItemFromTemplateなんてものがあることから、「どんな処理をしたいのか」が大切だと痛感しました。

普段自分がこなしている業務を見返して、効率化できる作業がないか目を光らせようともいます。
Vue.jsとReactの書き方の違い

## コンポーネントの定義

```vue:Vue.js
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

<style>
/* スタイルをここに記述 */
</style>
```

Vueでは、コンポーネントをtemplate, script, styleの3つのセクションに分けて定義する。
テンプレート部分でHTMLに似た構文を使用し、スクリプト部分でロジックを定義する。

```react:React
import { useState } from 'react'

const Component = () => {
  const [text, setText] = useState('')
  return (
    <div>
      <p className="text">{text}</p>
    </div>
  )
}
export default Component
```
Reactでは、コンポーネントは基本的に関数またはクラスとして定義される。
JSX（JavaScript XML）を使用して、HTMLに似た記述をJavaScript内で行う。

## データの管理

```vue:Vue.js
<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">Update</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    updateMessage() {
      this.message = 'Message Updated';
    }
  }
}
</script>

```
Vueでは、データはdataオプション内で定義され、テンプレート内で{{ }}を使用してバインドされる。データの変更は、通常メソッド内で直接行う。



```react:React
import React, { useState } from 'react';

function MyComponent() {
  const [message, setMessage] = useState('Hello, React!');

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => setMessage('Message Updated')}>Update</button>
    </div>
  );
}
```
Reactでは、状態（State）はuseStateフックを使って管理する。
状態の変更は、setStateまたはuseStateから返される関数を使用して行う。

## イベントのハンドリング
```vue:Vue.js
<button @click="handleClick">Click me</button>
```
Vueでは、イベントハンドラーは@を使って指定する。
例えば、＠clickがonClickに相当する。
```react:React
<button onClick={handleClick}>Click me</button>
```
Reactでは、イベントハンドラーはキャメルケースで指定し、onClickやonChangeなどの属性で指定する。

## コンポーネント間の通信

Reactでは、親から子へのデータの受け渡しはpropsを使用し、子から親への通信にはコールバック関数を渡すことが一般的である。
Vueでもpropsを使って親から子へデータを渡す。
子から親への通信には$emitを使用してカスタムイベントを発火させる。
[javascript] オブジェクトのキーをObject.assignでソートする方法

# はじめに
JavaScriptでオブジェクトを扱う際、オブジェクトのキーを特定の順序で整理したい場合があります。例えば、オブジェクトのデータをCSVに出力する際、特定の順序でキーを並べたいことがあります。この記事では、Object.assignを使用してオブジェクトのキーをソートする方法について解説します。

次のような場面で困ったことはありませんか？

```typescript:example.ts
import fs from "fs";

const data = await fetch("www.foo.com");
// dataの中身 = { age: 18, hobby: "basketball", name: "太郎" }

const headers = Object.keys(data); // ヘッダーを取得する
const values = Object.values(data); // 値を取得する

fs.appendFileSync("example.csv", headers.join(","));
fs.appendFileSync("example.csv", "\n");
fs.appendFileSync("example.csv", values.join(","));
```
このコードの実行結果として出力されるexample.csvは次のようになります：
```example.csv
age,hobby,name
18,basketball,太郎
```
しかし、以下のような順序で出力したい場合、どうすればよいでしょうか？
```example.csv
name,age,hobby
太郎,18,basketball
```

# Object.assignとは？
まず、Object.assignの基本的な使い方を確認しましょう。Object.assignは、複数のソースオブジェクトのプロパティをターゲットオブジェクトにコピーするためのメソッドです。
```javascript
const target = {};
const source = { a: 1, b: 2 };
Object.assign(target, source);
console.log(target); // { a: 1, b: 2 }
```
この例では、sourceオブジェクトのプロパティがtargetオブジェクトにコピーされました。

# オブジェクトのキーをソートする
オブジェクトのキーを特定の順序でソートするには、あらかじめキーの順序を定義したオブジェクトを用意し、それをObject.assignでマージする方法があります。以下に、その実装例を示します。
```diff_typescript:example.ts
import fs from "fs";

const data = await fetch("www.foo.com");
// dataの中身 = { age: 18, hobby: "basketball", name: "太郎" }

+ // キーの順序を定義するテンプレートオブジェクト
+ const objOrder = {
+   name: "",
+   age: "",
+   hobby: ""
+ }

+ // テンプレートに従ってソートされたオブジェクトを作成
+ const sortedObj = Object.assign(objOrder, data);
- const headers = Object.keys(data); // ヘッダーを取得する
+ const headers = Object.keys(sortedObj); // ヘッダーを取得する
- const values = Object.values(data); // 値を取得する
+ const values = Object.values(sortedObj); // 値を取得する

fs.appendFileSync("example.csv", headers.join(","));
fs.appendFileSync("example.csv", "\n");
fs.appendFileSync("example.csv", values.join(","));
```
このコードを実行すると、次のようなexample.csvが出力されます：
```example.csv
name,age,hobby
太郎,18,basketball
```

# 追記：スレッド構文
credit to: @shiracamus さん
Object.assignのほかに、スレッド構文も同じ効果があります。
```typescript
const sortedObj = { ...objOrder, ...data };
```


# 注意点
1. ネストされたオブジェクトにむいていません
1. 大規模なオブジェクトで使用する場合、パフォーマンスに注意が必要です

# まとめ
この記事では、Object.assignを使用してオブジェクトのキーをソートする方法を紹介しました。APIレスポンスを整形したり、キーの順序を一貫性を持たせたい場合に便利です。ぜひ、実際のプロジェクトで活用してみてください。
【第3回】VNCを使って、Macにラズパイデスクトップを表示させる！！

# MacからRaspberry PiへVNC接続する方法

この記事では、MacからRaspberry PiへSSH接続後、VNC Viewerを使ってリモートデスクトップ接続する方法を解説です。

## VNC接続を有効にする

1. Raspberry PiにSSH接続した状態で、以下のコマンドを実行します
以下のコマンドは、VNCを有効にするほかにも、ラズパイの様々な設定（音声を有効にするなど）に非常に役立ちます！！
覚えておいて損はない！！

   ```bash
   sudo raspi-config
   ```

2. 設定画面が表示されたら、以下の設定を行います
    * `3 Interface Options` -> `I3 VNC` -> `Yes` -> `OK`
    * `1 System Options` -> `S5 Boot / Auto Login` -> `B2 Console Autologin` -> `OK`

3. `Finish`をクリックして、Raspberry Piを再起動します

## Mac側での設定

1. [VNC Viewer](https://www.realvnc.com/en/connect/download/viewer/?lai_sr=5-9&lai_sl=l)をインストールします
2. アプリを開き、Raspberry PiのIPアドレスを入力します
3. Raspberry Piのユーザー名とパスワードを入力します
4. デスクトップ画面が表示されれば、VNC接続成功です

これで、MacからRaspberry Piのデスクトップ環境を操作できるようになります！

次回はついに、ラズパイで顔を作成・・・といきたいのですが

実はもうすでに完成しています笑
以下のgithubのURLに記載しています！
興味ある方はぜひみてください！

# 余談
この記事は、生成AIを用いて、約10分かからない程度で作成しました^^

# 参考文献
- [ssh接続でRaspberryPiを初期設定する(Mac)](https://zenn.dev/yukitezuka/articles/1563cf717abc60#%5B1%5D-raspberry-pi-imager%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)
- [VNC Viewerダウンロードページ](https://www.realvnc.com/en/connect/download/viewer/?lai_sr=5-9&lai_sl=l)
- [Qiitaの記事内で作成したURL](https://github.com/programingbigger/Pi-Bo/tree/main)
コードを書く前に気を付けるべきこと

# はじめに
こんにちはプログラマー2年目の塚田と申します。
今回は過去にも投稿した「デグレードを防ぐには？」に続く内容で、
コードを書くにあたって、気を付けるべきことを書いてみました。

# 仕様の確認
早速ですがこれが一番重要だと考えています。
あるべき姿(120%の完成度)はどんなものなのか。
自分の中で理解したつもりでも相手は全く違うことを想像していた場合、それは時間も労力も無駄になってしまいます。
まずはExcelやWordなどに自分が想像している作りを書いて、相手にレビューしてもらうこと。連絡がこまめにできるのであればしつこく質問すること。これを繰り返せば相手との認識の相違もなくなり、一番の近道になります。

# 焦らないこと
私が体験したことになりますが、〇〇日までに終わらせるときっちり決まっているものはその日が近づくとどうしても焦りが出てきてしまいます。
その焦りが原因でコーディングミス、デグレ、デグレのデグレを起こしがちです。
自分では解決できずに作業が止まってしまうのであれば周りに相談すること。
わかっていても意外とできないことかもしれませんがとにかく重要です。

# 確認は手厚めに
最後に手厚く確認してください。
一つ一つ丁寧に行うべきです。
処理が分岐しているのであればテストは網羅的に行ってください。
後にミスがあれば余計に時間を取られることになります。

# おわりに
偉そうに書きましたが自分はまだできていません。
なのでこの記事は自分が今後見返して同じミスを繰り返さないようにするために書いたものでもあります。
まだまだ浅いですが少しでもご参考になれば幸いです。
以上、塚田でした。
パイプラインでデプロイしたソリューションを入手する方法

Power Platform パイプラインでデプロイした際のソリューションってドコかにあるんだろうか？と思ったので調べてみた、です。

# はじめに
細かいコトは書きません。是非、ご自身で調べてお試しください。

記事投稿時点（2024/08/30）の情報、画面、および個人の調査結果にもとづいた記事です。もしかすると、環境の違いなどで動作が異なる可能性があります。クラウドソリューションのためバージョンアップ等で画面や動作が変更となる可能性もありますので、予めご了承ください。
当記事は歴史の断片としての意図もあるため、バージョンアップに追従するものではありません。

# Power Platform パイプラインとは？
公式に明記されておりますので、そちらご確認くださいませ。

> Power Platform のパイプラインは、すべての作成者、管理者、および開発者にとってより親しみやすい方法でアプリケーション ライフサイクル管理 (ALM) 自動化と継続的インテグレーションと継続的デリバリー (CI/CD) 機能をサービスに導入することにより、Power Platform および Dynamics 365 顧客向けに ALM を普及させることを目的としています。

https://learn.microsoft.com/ja-jp/power-platform/alm/pipelines?WT.mc_id=%3Fwt.mc_id%3DDX-MVP-5004053

# なぜ、探そうと思ったのか？
パイプラインは過去にデプロイした履歴を保持しておるようで、例えば「あ！うっかり上書きしちゃった。前バージョンに戻したい」みたいなコトがサクッとできます。

https://learn.microsoft.com/ja-jp/power-platform/alm/redeploy-past-solution-versions?WT.mc_id=%3Fwt.mc_id%3DDX-MVP-5004053

これが可能である、というコトは、デプロイしたタイミングのバージョンをどこかに保持している、というコトですよね？
ソレ、どこかで入手できないモノかしら？と思ったのです。

# デプロイしたソリューションを入手する方法
「展開パイプラインの構成」を実行 → 「ソリューションアーティファクト」 → 「アクティブな展開アーティファクト」の一覧が確認できます。その先、つまり該当のパイプラインを選択した画面から入手可能です。（※記事投稿時点）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/43b447a0-666b-af02-fdd1-0b2a43bfafd0.png)

ソリューション名のハイパーリンクをクリックするとダウンロードが始まります。

- マネージド アーティファクト ファイル ＝ マネージドソリューション
- アンマネージド アーティファクト ファイル ＝ アンマネージドソリューション

前者がデプロイされたソリューション、後者がソースのソリューションですね。手元で試した限りでは、ここで入手した zip ファイルを別の環境へ正しくインポートできています。詳細は割愛しますが、同様の画面に辿り着ければ、個人用パイプラインでも入手可能でした。

ちなみに、まだ「削除」ボタンは怖くて押していません😇

# 細かい情報が Learn に書いてない？
探してみたのですが、自分は当件が明記されている情報が発見できませんでした。かろうじて、以下の説明が”ソレっぽい”ぐらいですね。。。

> 以前のバージョンにロールバックできますか?
現在、展開またはインポートできるのは、より上位のソリューション バージョンのみです。 回避策として、管理者はパイプライン ホストからアーティファクトをダウンロードし、solution.xml ファイル内のソリューション バージョンをインクリメントしてから、それをターゲット環境に手動でインポートします。

https://learn.microsoft.com/ja-jp/power-platform/alm/pipelines?WT.mc_id=%3Fwt.mc_id%3DDX-MVP-5004053#can-i-roll-back-to-a-previous-version

証拠としてスクショも張っておきますｗ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/85e217e2-4392-46fb-537c-69fe4f19c263.png)

ちなみに、ソリューションアーティファクトがどれぐらいの量を保持してくれるのか？なども明記されておりませんので、大事なソリューションの場合はご自身で手動バックアップを取る等の対応が安心かな、と個人的には思っています。

# 結び
ターゲット環境がマネージド環境に設定済みでないと利用できませんので、Premium ライセンスが必須となりますが、Power Platform パイプラインは使ってみると便利です。いちいち手動でソリューションエクスポートして～、ダウンロードしてぇ～環境切り替えてぇ～、みたいな対応が不要になります。タイマーで時限爆弾式にソリューションのデプロイも仕掛けられるので、状況が許せば利用していきたい機能です。

Learn（Docs）にも情報が少ないので、実際に検証しながら・・・っていうのがチトつらいトコではありますが😇
細かいコトが書けないのは、こういう点もありますのでご理解賜りたくです。一緒に深淵を覗きたい方は、是非お仕事としてご相談ください。

それでは、皆さま。素晴らしい Power Platform Life を！
Gitリポジトリ内の改行コード(CRLF)の混在チェック (Windows環境)

# きっかけ
具体的なコマンドがググっても意外とすぐに出てこなかったので…

# コマンド
ターミナル環境(シェル)によってコマンドに微妙に違いがある。

```bash:Git Bash
git grep --cached -l -I $'\r'
```
```powershell:PowerShell (VSCodeデフォルト)
git grep --cached -l -I "`r"
```

# さいごに
`core.autocrlf`より`.gitattributes`を設定して根本的に混在を防ぎましょう。
[.gitattributesで改行コードの扱いを制御する](https://qiita.com/nacam403/items/23511637335fc221bba2)
[もう迷わない .gitattributes で改行コードを統一](https://qiita.com/Yossy_Hal/items/6fe2d14cddd6e16796d7)
ゼロから始めるプログラム学習（C#）_003

##    はじめに

 プログラミング言語 __<font color="blue">　【C#『シーシャープ』】</font>__ を使用して
 プログラムを最初から学習するための記載。 


　　　前回：ゼロから始めるプログラム学習（C#）_002
　　　https://qiita.com/nekoozi/items/90a3ed7cd0fb8519947c



## <font color="green">配列</font>

### 1･･･ <font color="blue">配列</font>（Array）
>配列（Array『アレイ』）は同じデータ型の複数の値を一つの変数にまとめて格納するためのデータ構造です。
配列を使うことで、複数の関連するデータを効率的に管理できます。


### 2･･･ <font color="blue">要素</font>
>配列の各値のこと。
要素は配列内の特定の位置に格納されており、添え字（インデックス）を使ってアクセスします。

### 3･･･ <font color="blue">配列の宣言と初期化

>データ型[] 配列名 = new データ型[要素数];

・データ型 は、配列が保持するデータの型を指定します。
　例えば、整数を表す場合は int、文字列を表す場合は string などです。

・配列名 は、配列を識別するための名前です。

・要素数 は、配列が保持する要素の数を指定します。



　※配列の要素数を求める方法は、Length『レングス』

### 配列の要素数
>配列名.Length;

### 【注意点】配列の要素は0から始まる
  そのため、添え字の最大値は、配列名.Length - 1　で求める。

```C#
using System;

namespace ArrayExample
{
    class Program
    {
        static void Main(string[] args)
        {
            /* 配列の宣言と初期化 */
            // String型の配列を宣言し、初期値を設定
            string[] ArrayData = new string[] { "あ", "い", "う", "え", "お" };

            /* 配列の要素数を取得 */
            // 配列の要素数を取得して表示
            int element = ArrayData.Length;
            Console.WriteLine($"配列の要素数は {element} です。");

            /* 添え字の最大値の表示 */
            // 添え字の最大値を表示
            int maxIndex = ArrayData.Length - 1;
            Console.WriteLine($"添え字の最大値は {maxIndex} です。");

            /* 各要素の表示 */
            // 配列の各要素を個別に表示
            Console.WriteLine($"ArrayData[0] = {ArrayData[0]}");
            Console.WriteLine($"ArrayData[1] = {ArrayData[1]}");
            Console.WriteLine($"ArrayData[2] = {ArrayData[2]}");
            Console.WriteLine($"ArrayData[3] = {ArrayData[3]}");
            Console.WriteLine($"ArrayData[4] = {ArrayData[4]}");
        }
    }
}
````
   
  
実行結果
````
配列の要素数は 5 です。
添え字の最大値は 4 です。
ArrayData[0] = あ
ArrayData[1] = い
ArrayData[2] = う
ArrayData[3] = え
ArrayData[4] = お
````
--------------------------------------------------------------

　　　次回：ゼロから始めるプログラム学習（C#）_004
　　　https://qiita.com/nekoozi/items/0e1f9bc78c98559dfffe



## 参考文献

C#関連情報サイト様

   https://www.sejuku.net/blog/40456

   https://ufcpp.net/study/csharp/st_array.html
   
   https://csharp.keicode.com/basic/data-types.php

   https://www.sejuku.net/blog/45668
Azure OpenAI プレイグラウンドでのエラーと対処記録

# 背景

プレイグラウンドで、データソースを追加すると簡単に動作確認出来るので便利だなと思い使い始めたところ、えらーに困ることがあったので、その対処記録

# 記録

## Principal does not have access to API/Operation

### 結論

- 自身に、<code>Cognitive Services OpenAI Contributor</code>を割り当てるだけ

### 原因

- RBACで従来の管理者ロールが終了になったので、言われるがままに追加したら、権限不足だった

### 詳細

2024/8/31に以前の管理者ロールが消えてしまうので、ロールを割り当てろって連絡があった。
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/64fa9945-b899-688d-1ec0-3302239ea98d.png)

Azure Portal の一番上には、以下のように出ていた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/010e75ad-5702-70a5-46d8-e7d66cbdc612.png)

で、これの対処として言われるままに、以下を設定していた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/274f1d06-8c9a-5ec0-4543-85030abcf9b0.png)

最小権限の法則に従ったわけだから、当然権限最小化されていて、今回の問題が起きたっぽい

## The response was filtered due to the prompt triggering Azure OpenAI's content management policy
詳細は以下
> Server responded with status 400. Error message: {'error': {'message': "The response was filtered due to the prompt triggering Azure OpenAI's content management policy. Please modify your prompt and retry. To learn more about our content filtering policies please read our documentation: https://go.microsoft.com/fwlink/?linkid=2198766", 'type': None, 'param': 'prompt', 'code': 'content_filter', 'status': 400, 'innererror': {'code': 'ResponsibleAIPolicyViolation', 'content_filter_result': {'hate': {'filtered': False, 'severity': 'safe'}, 'jailbreak': {'filtered': True, 'detected': True}, 'self_harm': {'filtered': False, 'severity': 'safe'}, 'sexual': {'filtered': False, 'severity': 'safe'}, 'violence': {'filtered': False, 'severity': 'safe'}}}}}

### 対処

ポリシーを設定して、データソースに割り当てる

### 原因

プレビューできてる、ポリシーの default にひっかかっただけ。

なので、以下のようにして、適当にコンテンツフィルターを作成して
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/58be6294-c4a4-979a-fb45-0c762672d6da.png)

あとは、データソースに割り当てれば解決。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/661b6c59-fdb1-d719-9646-628e0b192583.png)

# あとがき

新しい機能の追加は、喜びと共に、若干の苦痛があるけど、予想して解決させられるようになってくるとなんか Quest やってるみたいで楽しくなりますね :p
【Ruby on Rails】学習メモ：配列と繰り返しで金額を集計したい！①

今回はRuby on Railsの学習メモです。
学習の記録および備忘録として記します。

* 前回のRuby on Rails学習メモ
[【Ruby on Rails】学習メモ：配列のエラーにはまった話](https://qiita.com/nat_s/items/0ff31807461d9fe4ab9c)

# 筆者のステータス
引き続き、Ruby on Railsを学習中。
改修を担当している機能にて、配列やループ処理(繰り返し)を用いる場面が増えてきている。

# 実現したいこと
ある事柄に関する、項目別合計金額の集計、表示。
集計対象は次のような要素で成り立っている。

* 大項目
* 中項目
* 金額

本稿では、大項目=品名、中項目=手数料　として記述。
同じ品名でも異なる手数料が設定されている場合があり、金額と手数料(%)をもとに、手数料の具体的な金額を計算する必要がある。

* 集計対象のイメージ
```
| 品名 | 手数料 | 金額 | 
------------------------
| 野菜  | 5%    | 300 | 
| 野菜  | 10%   | 200 | 
| 野菜  | 10%   | 800 | 
| 果物  | 8%    | 500 | 
| 果物  | 10%   | 300 | 
| 果物  | 10%   | 300 | 
| 果物  | 10%   | 500 | 
| ？    | 10%   | 500 | ★そのままでは「品名」が特定できないレコードが含まれている
 ...
 ......
```
金額を集計するにあたって、次の形でデータを整理する。
```
[[大項目, 中項目], 金額]
```
前述のデータの、集計後のイメージ。
最終的に「品名」と「手数料(%)」の組み合わせごとに合計金額を計算したい。
加えて「手数料(円)」の合計と「合計金額」の合計も算出する必要がある。
```
| 品名 | 手数料(%) | 金額  | 手数料(円) | 合計金額 | 
-------------------------------------------------
| 野菜  | 5%       | 300  | 60        | 360     | 
| 野菜  | 10%      | 1000 | 100       | 1100    |
| 果物  | 8%       | 500  | 40        | 540     |
| 果物  | 10%      | 1100 | 110       | 1210    |
 ...
 ......
```
なお、今回は既存ソースの修正である。

# 今回の困りごと
取り扱うレコードの中に「品名」が欠損したレコードが混ざっている場合があるが、実装済みの正常ルートのみではこれらに対応できない。
すでにある情報を用いて「品名」を特定し、その他のレコードと同じように集計する必要がある。
また、お金の計算処理に不具合があり、正しい結果が出せていない。

# 今回やったこと+反省
本稿ではかなり簡略化して記載していますが、複数のループ処理が入れ子になっていました。今回はそのソースに対して特定の条件がそろったときに用いる例外的なルートを追加するための修正を実施しました。
このルートでは上記の「品名」にあたる情報を正常ルート同様の方法で取得することができず、レコードに含まれる各種情報を用いて別のテーブルから「品名」を取得する必要がありました。

元々は入れ子といえど比較的単純な実装で済んでいたのですが、例外ルートの「品名」取得を実現しようとした結果、参照先が増え、ループが増え、データ整理のための配列が増え、まだうまくいかないのでハッシュを用いて……といった具合に実装がどんどん複雑化していきました。

最終的には求めていた処理を実現してくれるものができましたが、いかんせん何が起こっているか分かりづらいものになっています。自分でさえ後から読むのに苦労するようなソースコードには、やはり改善の余地が大きく残されていると考えるべきでしょう。

# さいごに
次回の記事にて、今回行った修正についてもう少し踏み込んだ内容に触れる予定です。
執筆の中で、筆者自身も振り返りと改善点の発見ができればと思います。
Docker で ginza electra をインストールしようとしたら、苦労した。

# Docker で ginza electra をインストールしようとしたら、苦労した。

内容：表題通り

> あくまで、この記事ではロードが成功することを目標にしています。
使っているうちに不整合が起きる可能性がありますが、すべての行為の責任は読者にあるものとします。

## コンパイルできない

ja-ginza-electraをインストールしようとしたところ、以下のエラーが出ました。
```
copying py_src/tokenizers/tools/visualizer-styles.css -> build/lib.l
inux-x86_64-cpython-312/tokenizers/tools
running build_ext
running build_rust
error: can't find Rust compiler
```
Rustのインストールを試したが解決できず。

原因はtokenizersのバージョンに（原因は調べていないですが）相性があるようです。

とりあえず、パッケージをダウンロードしてきて、requirements.txtに記載されている`spacy-transformer`の上限を無くしたところ、`pip install`は通るようになりました。

## ロードできない
spacy.load('ja_ginza_electra')としてモデルを読み込もうとするとエラーが出ます。こちらはTransformers由来で、ginza_transformers/layers/hf_shim_custom.py の124行目に`, strict=False`を加えたところ動いた。

```Python
transformer.load_state_dict(torch.load(filelike, map_location=map_location), strict=False)
```
picoCTFでLinuxコマンドを使いこなそう！

おはようございます:sunny:
駆け出しエンジニアのさわまりんです。
今回は、基本のLinuxコマンドを使いこなせるようになる方法をご共有します！

# はじめに
皆さんは、picoCTFというサイトを知っていますか？
詳しい紹介は調べていただきたいのですが、
[picoCTF](https://picoctf.org/)とは、Flagと呼ばれる「picoCTF{hogehoge}」のような文字列を
いろんな手段を講じて探し出す問題を提供しているサイトです。

# おすすめの問題
難易度も様々あるのですが、その問題の中でも
Linuxコマンド初心者の方におすすめしたいのがこちらの問題です。

もう解いてしまったので色が薄くて申し訳ないのですが、
これらは導入にとてもいい問題だと思います。

Firstと記載のある問題はその名の通り、
初めてそのコマンドを使ってみよう！というスタンスのもので、
そのコマンドをうまく使えば、すぐに答えにたどり着くことができます。

![スクリーンショット 2024-08-30 201730.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3809594/eb729285-486d-4e4e-b4df-8ce1c8b8dcf7.png)

:::note info
あまりにも見にくいので以下に書き出しておきます！
「First Find」, 「First Grep」, 「Big Zip」, 「strings it」, 「what's a net cat?」
:::

# さらにできそうな人はこちらも
これらの問題が解けて、楽しくなってきた方は
ぜひこちらのフィルターを参考に問題を解いていってみてください。

どれも基本のコマンドを組み合わせるだけで、スラスラ解くことができます。

たまに知識問題や計算問題があるのですが、
それらは飛ばしつついい感じに進めてみてください。

また中にはあまり面白くない問題があります。
そのような問題はGoodのパーセントが露骨に低いので、
モチベ維持のためにも飛ばしていいと思います:thumbsup_tone3:

![スクリーンショット 2024-08-30 201720.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3809594/f0249e56-2339-b40b-887e-3061bf3bdd80.png)


# おわりに
以上、私が思う基本のLinuxコマンドを使いこなせるようになる方法をご紹介しました。
今後はpicoCTFの問題の解説も載せるかもしれません。
最後まで読んでいただきありがとうございました:penguin::dizzy:
xamppのapacheが起動しない時の対処法


こんにちは！エンジニアの篠原です:penguin:

先日、PC入替で久しぶりに開発環境構築した時に
xamppのapacheが起動しない現象に躓いたので
対処策を備忘録として残しておこうと思います。

## 事象
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/1998e494-e5bd-e5ec-dde3-f4e2f46a4951.png)

PHPの開発環境構築でPleiadesインストール後、
xamppを起動し、ApacheをStartしようとしたところ
上図のようなエラーが表示されてしまいました。。


## 調査

エラー文を訳してみても以下の通りで、詳細は分からず...。

>「Apache が予期せずシャットダウンした。
　これはポートがブロックされていたり、依存関係がなかったり、 
　不適切な権限、クラッシュ、他の方法によるシャットダウンが
　原因かもしれません、 
　不適切な権限、クラッシュ、他の方法によるシャットダウンが
 　原因かもしれません。
　エラーログを見るには ログ ボタンを押してください。
　Windowsイベントビューア
　さらにヘルプが必要な場合は、このをコピーして
 　フォーラムに投稿してください。」
>
<br>

xampp_start.exeを起動し、ログを確認すると...

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/a75e1620-4df4-0f3b-0de2-4922be403e9f.png)
<br>
httpd.conf内で**SyntaxError**が！
該当箇所を確認するとServerRootのパスを間違えていました…。
修正して、再度ApacheをStartすると...
<br>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/d13cf2ba-47bd-eec9-0a4b-68f3f3504271.png)

<br>
無事起動できました:clap:！！

## まとめ
今回は設定ファイルの記述ミスでしたが、
他にもポート競合が原因で起動しないこともあるみたいです。

https://blog.senseshare.jp/xampp-apache-trouble.html#index4

以上、篠原でした:penguin:
システム移行の現場課題とエンジニアとしての戦略

# はじめに
開発案件の1つとしてリプレイス案件がよくあると思います。既存システムを新たに作って置き換えるというのがリプレイス案件です。オンプレでやってるシステムをクラウドに移行したいや、古いシステムを新たに置き換えたいなど色々な理由でリプレイス案件が発生します。
このような案件の際営業チームは、新しい機能や現行システムから比較した際の使いやすさの改善を提案し、クライアントの社長やシステム担当者を説得して契約を締結します。
じゃあ開発陣はその営業さんが提案したシステムを作ればうまくいくの？という点を見ていくと、ほとんどうまくいかないことが多いです。この記事では、その原因と解決策について見ていこうと思います。

# システム移行がなぜうまくいかないのか
現場からの反発です。
システムを置き換える際に、現場の社員から強い反発が生じることがよくあります。特に、営業担当者が使用するシステムでは、その傾向がさらに顕著です。

システムのリプレイスは、通常、経営者やシステム担当者が主導します。社長は売り上げ向上や業務効率化、システム維持費の削減を目的にリプレイスを決定します。しかし、現場の社員にとっては、これらの目的が直接的なメリットとして感じられないことが多いのです。

たしかに現行システムに使いづらさがあるかもしれませんが、現場の社員にとって最も重要なのは「日々の業務が滞りなく行えること」です。システムが変更されることで業務フローに混乱が生じたり、使い慣れた操作が変わると、現場のストレスや反発が一層強まります。効率化や維持費削減といった経営的な視点では正しいリプレイスであっても、現場の社員にとっては「どうでもいい」と感じられることが少なくありません。

また、デモを見せる際に、社員が最初からネガティブな観点でシステムを見ることもよくあります。たとえば、「処理速度が遅い」「前はこういうことができたのに、今はできなくなっている」といった不満が挙がることが多いです。こうした不安や不満はデモの段階で現場の反応としてすぐに表れ、実際の変更が行われる前から抵抗感が形成されてしまうのです。

# エンジニアが取るべきステップ

実際にどのようにしたらうまく導入までがスムーズになるのか。
リプレイス案件でエンジニアが取るべきアプローチは、システムを段階的にリリースすることです。まずはVer.1で現場の信頼を得てから、Ver.2で新機能を導入し、さらに業務改善を進めるという2段階の手法が効果的です。以下では、Ver.1とVer.2に分けてそれぞれのステップを詳しく説明します。

### Ver.1: 現行システムとの一致を目指す
最初のステップであるVer.1では、可能な限り現行システムと同じ構成・機能を持つシステムを作成することが重要です。具体的には以下の点に重点を置きます。

1. **DB構成を現行と同じにする**
将来的に新機能を追加したり、データ構造を最適化したいと考えている場合でも、まずは現行のDB構成をそのまま維持することが大切です。データの構造が変わることで業務フローに大きな影響を与える可能性があるため、初期段階では現場の社員が使用しているシステムとできる限り同じものを提供します。

2. **UIやデザインの変更は最小限に**
UIやデザインは多少変更しても問題ありませんが、業務フローそのものは現行システムに忠実に再現します。社員が日常業務で使用している操作感をできるだけ維持することで、現場の混乱を避けることができます。

3. **パフォーマンスの維持・向上**
リプレイスしたシステムが、現行システムよりも処理速度が遅いと不満が生じやすくなります。Ver.1の段階では、パフォーマンスを重視し、少なくとも現行システムと同等の速度を確保することが求められます。これにより、現場の社員が新システムに対して信頼感を抱く基礎を築くことができます。

Ver.1は、現場での業務に影響を与えないことを第一に考えたリリースです。この段階で新機能を追加するのではなく、現行システムの再現に注力し、パフォーマンス面でも現場の期待に応えることで、現場の信頼を獲得します。

### Ver.2: 新機能の追加と業務改善
Ver.1が安定して運用され、現場からのフィードバックも問題が少ないと確認できたら、次に進むのがVer.2です。Ver.2では、エンジニアのスキルを活かし、次のステップに進みます。

1. **新機能の導入**
Ver.2では、営業チームが提案していた新機能を段階的に導入していきます。ここで重要なのは、現場のニーズを反映させることです。Ver.1の運用を通じて得られたフィードバックをもとに、現場が本当に必要とする機能を優先的に実装します。これにより、システムの価値を高め、現場からのさらなる支持を得ることができます。

2. **業務フローの改善**
Ver.1で現行フローを再現した後、Ver.2では業務フローの改善にも着手します。たとえば、現場で時間がかかっているプロセスを効率化したり、操作を簡略化することで、現場の社員の負担を軽減します。ここでの改善は、現場がすでに新システムに慣れたタイミングで行うため、抵抗が少なくスムーズに進行します。

3. **パフォーマンスの最適化**
Ver.2の段階で、システムのパフォーマンスをさらに最適化します。特に、新機能を追加する際にパフォーマンスが低下しないよう、アーキテクチャやデータベースの最適化を進め、将来的な拡張にも対応できるようにしておきます。

4. **フィードバックの継続的な反映**
Ver.2以降は、現場のフィードバックを継続的に反映させることが鍵となります。現場で実際に使用される中で見えてくる改善点を素早く取り入れ、必要に応じてVer.2の内容を柔軟に修正していくことで、システムを進化させながら現場の満足度を高めます。

Ver.2では、システムの価値を現場にさらに浸透させ、業務効率の向上や機能性の向上を実現します。この2段階のアプローチにより、初期の反発や不安感を抑えながら、最終的には現場のニーズに合ったシステムを完成させることが可能になります。

結果的に、この段階的なアプローチは一見手間がかかるように見えるものの、長期的には最も効率的で現場からの反発も最小限に抑えられ、確実にシステムを導入・運用できる方法となります。

# 営業チームとの連携の重要性
リプレイス案件において、エンジニアが営業チームとしっかり連携することは非常に重要です。営業チームは、クライアントに対して新しいシステムの魅力や利便性を伝える役割を担っていますが、彼らが提案する新機能やシステムの改善案を実際に形にするのはエンジニアです。そのため、営業がクライアントから得た現場のニーズやフィードバックをしっかりと共有してもらうことで、エンジニアは現実に即したシステム開発を進めることができます。

特に、営業が初期段階で提案する新機能や利便性の改善案は、現場のユーザーにどのような影響を与えるかをよく理解しながら進める必要があります。そのため、エンジニアは営業との密なコミュニケーションを通じて、開発の優先度や現場に対する影響を踏まえた開発計画を立てることが重要です。これにより、クライアントや現場の期待に応えるだけでなく、システム導入後のスムーズな運用も確保できます。


# 最後に
遠回りに見えることが、実は効率的になっているというのはよくあるよね
Azure FunctionsのLocalGitでのデプロイ時の認証情報

# この記事は？
* 1か月ぶりにAzure Functionsにアプリをデプロイしようとしたら、Azure Portalの仕様が変わっていて、かなり戸惑ったので記事に残しておく
* いつもあったはずの、Gitデプロイに使うID/パスワードが、Azure Portal上に載らなくなってしまったようだ

# Azure 仕様変化

* 変化前：Azure Portal上から確認できた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10317/958ae522-be5b-4f9d-f863-5d4217108aa8.png)

* 変化後：消えている！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10317/92e80055-7fe9-5e8d-1cc8-0acf3b3c8f1a.png)

# 対応方法
* az login 後に以下を実行することで取得できる

```bash
az webapp deployment list-publishing-credentials --resource-group <group-name> --name <app-name> --query scmUri
```

* 取得例(レスポンス)
* この例では以下となる
  * ID : $your-git-id
  * PW : xxxxxxxxxxxxxxxxxx

```
"https://$your-git-id:xxxxxxxxxxxxxxxxxx@your-app-name.scm.azurewebsites.net"
```


# リファレンス
* https://learn.microsoft.com/ja-jp/azure/app-service/deploy-configure-credentials?tabs=cli#appscope
  * Functionsではなく、AppServiceのページなので、探す際にさまようことになる
Dash：Pythonフレームワークとは？簡単な例を説明

こんばんは。

今日は「Dash：Pythonフレームワーク」について説明します。

DashとはPlotly社が開発したFlaskをベースにしたPythonフレームワークで、htmlやjavascriptを使わずに比較的簡単にWebアプリ開発をすることができます。

#Dashとは

Dashは、インタラクティブなWebベースのデータダッシュボードを作成するためのPythonウェブアプリケーションフレームワークです。Plotly.jsとReact.jsに基づいて構築されており、データサイエンティストやアナリストが複雑なデータセットを視覚的に表現するための強力なプラットフォームを提供します。

## Dashの主な特徴

- インタラクティブコンポーネント： Dashはスライダー、ドロップダウン、グラフなどの豊富なインタラクティブコンポーネントを提供します。これらのコンポーネントは高度にカスタマイズ可能で、アプリ内で動的にデータを更新することができます。

- シンプルな構文： DashはWebアプリケーションを作成するためのシンプルなPython構文を使用します。これにより、Web開発者でないアナリストや科学者にもアクセスしやすくなっています。

- Plotlyとの統合： Plotlyとシームレスに統合されており、複雑なプロットやチャートを作成してDashアプリに埋め込むことができます。

- デプロイメントオプション： Dashアプリケーションは、Heroku、AWS Elastic Beanstalk、Azureなどのサーバーやクラウドプラットフォームにデプロイできます。

- インタラクティビティのためのコールバック： フレームワークはPythonデコレータを使用してコールバックを定義し、これはユーザーの操作（クリックや選択など）によってトリガーされます。これらのコールバックは、Dashアプリのデータを操作することができ、非常にインタラクティブです。

- オープンソースとプロ版オプション： Dashはオープンソースですが、デプロイメント、セキュリティ、スケーラビリティオプションを強化した有料版であるDash Enterpriseもあります。

Dashは、データの可視化と分析が重要な金融、バイオインフォマティクス、エンジニアリングなどの業界で広く使用されています。データ分析とWebアプリケーション設計の間の架け橋として機能しています。

# 簡単な例：データダッシュボードを作成

Dashを使用してデータダッシュボードを作成する具体的な例について説明いたします。

## 株価のリアルタイムトラッキングダッシュボード

目的： 
株価のリアルタイムデータをトラッキングし、異なる株式の価格変動をインタラクティブなグラフで表示するダッシュボードを作成します。

### コンポーネント：

- ドロップダウンメニュー：ユーザーがトラッキングしたい株式を選択できます。
- リアルタイムグラフ：選択された株式の価格をリアルタイムで表示します。

### 実装方法：

- dcc.Graph コンポーネントを使用して株価データを表示します。
- dcc.Interval コンポーネントで定期的にデータを更新し、グラフにリアルタイムの変動を反映させます。
- dcc.Dropdown を使用してユーザーが異なる株を選択できるようにします。

## クライメートデータ分析ダッシュボード

目的： 気候変動に関連する複数のデータソースからの情報を集約し、気温、降水量、CO2排出量などの時系列データを分析・表示するダッシュボードを作成します。

### コンポーネント：

- タイムスライダー：特定の年代を選択してデータをフィルタリングします。
- 複数のグラフ：気温、降水量、CO2排出量のデータをそれぞれ表示します。

### 実装方法：

- dcc.Slider を使用して特定の期間を選択できるようにします。
- dcc.Graph コンポーネントで複数のデータタイプを可視化します。

## 交通データモニタリングダッシュボード

目的： 都市の交通流をモニタリングし、時間帯による交通量の変動を視覚的に分析するためのダッシュボードを作成します。

### コンポーネント：

- 地図表示機能：地理的なデータと交通量データを組み合わせて表示します。
- 時間フィルター：時間帯によってデータをフィルタリングできるスライダー。

### 実装方法：

- dcc.Slider で時間帯を選択し、データをフィルタリングします。
- dcc.Graph に地図を表示し、交通量データを重ね合わせます。

これらの例は、Dashを使用して多様なデータダッシュボードを構築する際のアイデアとして役立ちます。
また、これらのダッシュボードはデータの動的な可視化と分析に大きな価値を提供し、よりインフォームドな意思決定を支援するツールとして機能します。

今日は以上です。

ありがとうございました。
よろしくお願いいたします。
EC-CUBEシリーズ！「管理画面から削除できない！管理画面を頼らないプラグイン削除緊急対処手順」

![EC-CUBE.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2633992/9581644b-2b37-1028-9e9b-137b50556857.jpeg)

エスプリフォートでは、ECによる請負開発やプロダクト（自社サービス）開発は長く行っており、その中の一つとしてEC-CUBEももちろん取り扱ってきました。

このEC-CUBEを保守・運用をしている際などに発生することがあるプラグインを管理画面から削除できない場合の緊急対処手順をご紹介していきます。

## EC-CUBEのプラグインを管理画面から削除できない場合の緊急対処手順
プラグインをインストールしている途中にエラーが発生したり、プラグインのインストールが正常に完了したはずなのにEC-CUBEがエラーで動かなかったり、プラグインを有効にするとEC-CUBEがエラーで動かなくなったなどということがあります。
そのときはプラグインが原因でEC-CUBEにエラーが発生し、管理画面から削除できないと場合もあります。

その際に原因となるプラグインを取り除く緊急対処手順をご紹介します。

### １、サーバーにある削除したいプラグインディレクトリを削除
SSHやSFTPから「[EC-CUBEルートパス]/app/Plugin/[削除したいプラグインディレクトリ]」を削除します。
※対処のディレクトリの削除権限がない場合は、SSHから「chmod 変更したい権限 -R ディレクトリ」のコマンドで権限を与えるようにしてください。

### ２、composer.jsonから削除したいプラグインの定義を削除
「[EC-CUBEルートパス]/composer.json」をエディタで開き、「"ec-cube/[削除したいプラグインコード]": "^2.1",」などのように記載がある行を削除して、上書き保存します。
※「^2.1」の部分は、プラグインのバージョンであるため、対象のプラグインによって変わります。

### ３、「dtb_plugin」に登録されている削除したいプラグインデータを行削除
データベースの「dtb_plugin」テーブルに登録されている削除したいプラグインのデータを行ごと削除します。

### ４、データベースからプラグイン用の独自テーブルを削除
プラグイン独自で利用するテーブルは、「plg_[削除したいプラグイン名]」というテーブル名でデータベースに登録されていますので、削除したいプラグインに該当するテーブルがあれば、削除します。
ただし、プラグインによってはテーブルを利用していない場合もありますので、利用していない場合は該当のテーブルはないため、テーブルの削除は不要となります。

### ５、プロキシファイルの再生成
rootユーザーでSSHから「cd」コマンドにて「EC-CUBEルートパス」まで移動し、「php bin/console eccube:generate:proxies」コマンドを実行してください。
テーブルを利用しているプラグインは、このコマンドを実行しておかないといけません。

https://www.esprit-fort.co.jp/


https://www.esprit-fort.co.jp/recruit/
ChatGPTのAPIを使う際のルートプロンプトの設定

## 概要
ChatGPTのAPIを利用する際に、特定のプロンプトをあらかじめ定義しておきたい場合があります。このルートプロンプト（初期プロンプト）は、モデルの動作や生成されるレスポンスに影響を与える重要な要素です。この記事では、Pythonを使ってChatGPT APIでルートプロンプトを定義する方法を、ステップ・バイ・ステップで解説します。
文章はGPT4oで作成しています。


## コード全文
```python
コードをコピーする
import openai

# OpenAI APIキーを設定
openai.api_key = "your-api-key"

# ルートプロンプトを定義
root_prompt = "You are an expert Python developer who is highly skilled at data analysis and machine learning."

# ChatGPT APIを使用してレスポンスを取得
response = openai.ChatCompletion.create(
    model="gpt-4",  # 使用するモデルを指定
    messages=[
        {"role": "system", "content": root_prompt},  # ルートプロンプトを最初に指定
        {"role": "user", "content": "What are the best practices for data preprocessing?"}  # ユーザーからの質問
    ]
)

# レスポンスを取得
print(response.choices[0].message['content'])
```


## ステップ・バイ・ステップでのコードの説明

### 1. OpenAI APIキーを設定
```python
コードをコピーする
openai.api_key = "your-api-key"
まず、OpenAIのAPIキーを設定します。このキーはOpenAIのダッシュボードから取得できます。
```

### 2. ルートプロンプトを定義
```python
root_prompt = "You are an expert Python developer who is highly skilled at data analysis and machine learning."
```

次に、ルートプロンプトを定義します。このプロンプトは、モデルの動作や生成されるレスポンスに影響を与えます。今回は「Pythonの開発者であり、データ分析と機械学習に非常に精通している」という設定にしました。

### 3. ChatGPT APIを使用してレスポンスを取得

```python
response = openai.ChatCompletion.create(
    model="gpt-4",  # 使用するモデルを指定
    messages=[
        {"role": "system", "content": root_prompt},  # ルートプロンプトを最初に指定
        {"role": "user", "content": "What are the best practices for data preprocessing?"}  # ユーザーからの質問
    ]
)
```

openai.ChatCompletion.create 関数を使用して、モデルにリクエストを送信します。ここで、system ロールとしてルートプロンプトを指定し、その後に user ロールとして質問を追加します。

### 4. レスポンスを取得
```python
print(response.choices[0].message['content'])
```
最後に、モデルからの応答を取得し、表示します。

以上で、Pythonを使ってChatGPT APIでルートプロンプトを定義する方法の説明は終わりです。このようにして、モデルの振る舞いをコントロールし、より望ましい応答を得ることが可能です。ぜひ試してみてください！
Next.js ver13にshadcn/uiを導入して実際にコンポーネントを使ってみるまで

## Node.jsのインストール
```
node -v
```
上記でnode.jsのバージョンを確認します。バージョンが表示されない場合は以下からインストールします。

https://nodejs.org/en

## Next.jsのプロジェクト作成
```
npx create-next-app@13 shadcnui-app
```
上記を実行後、以下のように設定します。
重要な箇所は、「Tailwind CSS」の箇所です。shadcn/uiはtailwind cssを利用するため、yesと設定します。
![macshadcnui.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3486141/fce5d47a-341a-5748-d883-bf606864c83c.png)


上記が完了したら作成したshadcnui-appに移動し、サーバーを起動します。
```
cd shadcnui-app
```
```
npm i
```
```
npm run dev
```

以下のようになればNext.jsの準備は完了です。
![スクリーンショット 2024-08-30 19.03.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3486141/ef2e3a9c-ea0a-773e-394c-2db508004270.png)

## shadcn/uiの導入
https://ui.shadcn.com/
```
npx shadcn@latest init
```
上記を実行後、以下のように設定します。
![スクリーンショット 2024-08-30 19.29.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3486141/d83948e6-7f57-c655-99a8-2a3ac3aeae61.png)

これでshadcn/uiの導入は完了です。
コンポーネントをインストールしてみましょう。

## コンポーネントのインストール

インストールするコンポーネントは何でもいいです。本記事ではaccordionをインストールします。

https://ui.shadcn.com/docs/components/accordion
```
npx shadcn@latest add accordion
```

上記を実行するとcomponentsディレクトリ配下にuiフォルダが作成され、その中にアコーディオンで必要なshadcn/uiのコードが自動で格納されます。
![スクリーンショット 2024-08-30 19.34.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3486141/82adc6ec-84bc-14ca-c4ae-d18c8aa8364f.png)

page.tsxでアコーディオンを使っていきます。
```page.tsx
import {
	Accordion,
	AccordionContent,
	AccordionItem,
	AccordionTrigger,
} from "@/components/ui/accordion";
export default function Home() {
	return (
		<main className="flex min-h-screen flex-col items-center justify-between p-24">
			<Accordion type="single" collapsible>
				<AccordionItem value="item-1">
					<AccordionTrigger>こんにちはアコーディオン</AccordionTrigger>
					<AccordionContent>どうもどうも、アコーディオンです</AccordionContent>
				</AccordionItem>
			</Accordion>
		</main>
	);
}
```

実行画面
![スクリーンショット 2024-08-30 19.38.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3486141/a66df4a2-8523-42b9-dde0-ef9c798da652.png)

以上で完了です。他にもコンポーネントは複数あるため、ぜひ使ってみてください。

## おまけ
個人的にshadcn/uiはとても気に入っています。
理由としては何といってもtailwind cssでカスタマイズが効く点です。

UIコンポーネントライブラリのデメリットとしてUIのカスタマイズがそこまで柔軟ではないことが挙げられると思います。
shadcn/uiはこの点を払拭てくれたので感謝です。

また、UIコンポーネントライブラリとして有名なMaterial UIやchakura UIと比較しnpm依存が少なく軽量です。

まだ多くのサービスで使われているわけではないと思いますが、今後も目が離せないライブラリの一つですね★
JavaScript に関するニュース記事（JavaScript Weekly）で気になったものを見てみる：「tinykeys」「heic-to」「Embla Carousel」

普段、技術情報を見ている中で、JavaScript に関する情報源の一つに以下があります。

●JavaScript Weekly: The JavaScript Email Newsletter
　https://javascriptweekly.com/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/72d881b2-8506-7b18-9f08-10d07bc11598.png)

そのサイトで定期的に出てくる情報は一通り見ているものの、その中でも個人的には下のほうに掲載されている部分がいつも気になっています。

それで、気になるものがあった時はリンク先を見てみたり、URL をメモしたりしてたのですが、その後あまり活用する方向にできてなかったので、もう少し情報を追ってみて記事に残してみるというのをやってみようと思いました。

## 今回の内容
今回、個人的に気になったところは、以下などに出ている「tinykeys」「heic-to」「Embla Carousel」の　3つです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/961bfe68-4f77-24b0-bc72-86d98fc6c490.png)

- tinykeys： A tiny (~650 B) & modern library for keybindings
- heic-to： Convert HEIC/HEIF images to JPEG, PNG in browser using Javascript
- Embla Carousel： A lightweight carousel library with fluid motion and great swipe precision

これらを、ざっくり 1つずつ見ていこうと思います。

## それぞれの内容

### tinykeys
tinykeys はキーバインド用のライブラリのようです。

●jamiebuilds/tinykeys: A tiny (~650 B) & modern library for keybindings.
　https://github.com/jamiebuilds/tinykeys?tab=readme-ov-file

特定のキーが連続して入力されるパターンや、修飾キーを伴う入力も扱えます。

以下のデモサイトで体験できるので、実際に試してみるのがオススメです。

●tinykeys
　https://jamiebuilds.github.io/tinykeys/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c81fc988-816f-0eac-a313-a9970cbb5127.png)

### heic-to
heic-to は、HEIC（High Efficiency Image Coding）形式の画像を、JPEG や PNG などの他の形式に変換するためのライブラリです。

iPhone のカメラアプリで写真を撮影したとき、デフォルトで利用される画像保存用の形式の HEIC を、扱いやすい他の形式に変換できます。

●hoppergee/heic-to: Convert HEIC/HEIF images to JPEG, PNG in browser
　https://github.com/hoppergee/heic-to?tab=readme-ov-file

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/41a90693-3578-ee24-e610-f884492217f6.png)

説明を見ると、libheif 1.18.2 を利用する構成のようです。

なお、heic2any と libheif-web に触発されて作ったライブラリのようです。

●alexcorvi/heic2any: Converting HEIF/HEIF image formats to PNG/GIF/JPEG in the browser
　https://github.com/alexcorvi/heic2any

●joutvhu/libheif-web: An emscripten build of libheif distributed as an npm module for the browser.
　https://github.com/joutvhu/libheif-web

### Embla Carousel
Embla Carousel は、高機能なカルーセル用のライブラリのようです。

●A lightweight carousel library with fluid motion and great swipe precision | Embla Carousel
　https://www.embla-carousel.com/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ecc979ab-c820-c769-bb12-5a6ca8e4262b.png)

公式ページを見ると、プラグインがあったり、GUI で扱えるジェネレーターがあったりと、便利に使えそうです。

●Plugins | Embla Carousel
　https://www.embla-carousel.com/plugins/

●Generator | Embla Carousel
　https://www.embla-carousel.com/examples/generator/

## おわりに
JavaScript Weekly というサイトで見かけて気になった、「tinykeys」「heic-to」「Embla Carousel」というライブラリについて、ざっくりと情報を見てみました。

どれも使い勝手が良さそうなので、もう少し試してみたりなどできればと思います。
福岡出身システムエンジニア誕生記(フリーランスになるまで)

# はじめに

初めまして、自己紹介させていただきます。

1995年生まれ福岡出身フリーランスエンジニアです。
先日福岡に帰省して、いろいろ自分のこと振り返るの大切だなとおもい、
今回記事を書くことを決断しました。

普通の人間がフリーランスになって生活しているという一例をシェアできたらとおもいます。
誰かの参考になれば幸いです！

今回は就職する前の自分のことについて書いてみようと思います。

# 目次
少し細かく振り返りながら記載するので複数記事書く予定です！
##### ・学生~就活編⇒本記事
##### ・1年目前半編⇒https://qiita.com/Yutajino/items/37d0ab0cd64d063870b7
##### ・1年目後半編⇒https://qiita.com/Yutajino/items/a4f3ac0e4f6821a3b264
##### ・2年目前半編⇒https://qiita.com/Yutajino/items/fccb4ce3c38186d0eb3b
##### ・フリーランス~失敗編⇒完成次第リンク貼ります
##### ・失敗~現在編⇒完成次第リンク貼ります

### 筆者プロフィール
出身地：福岡県福岡市
最終学歴：福岡の大学、経済学部(数学を主に扱う理系寄りのゼミにいました)
趣味：サッカー、お笑い鑑賞、演劇鑑賞、ゲーム、お酒飲み

# 中学高校編
中学、高校と、どちらかというと地味な学生生活でした。
華のある学生生活とは無縁で
サッカー部に入り、サッカーばかりやっていて、
他は、ゲームに熱中していたくらいです。
カービィのエアライドの面白さに気づき、やり込んでました笑
**64とゲームキューブとサッカーが生活の中心でした。**

サッカー部なら、青春してきたでしょ？と言われることもありますが、
サッカー部内のカーストのだいぶ下の方にいたので、
目立たないように過ごしてました笑

高校では理系で進級しており、ITについて全く学ぶこともなかったです。
大学受験前期で、理系の大学を受験しましたが、不合格。
大学受験後期で、理系の知識で受験できる経済学部を受験して無事合格し進学することになりました。

# 大学~就活編
大学では、体育会部活動に入り、
サッカーに明け暮れる日々を過ごしていました。
**ただのサッカー青年です。**
授業してサッカーしてバイトして、たまにカービィのエアライド、
ほとんどそれ以外何もしてませんでした。

この時期に受けていた授業も理系、IT系に関してほとんど関係ない授業です。

サッカーしか考えていない自分にとって就活という言葉を耳にし始めたのは
3年の春頃だったとおもいます。
サッカー部内で就活が話題に上がり始め、

サッカー部「就職説明会、インターンとか就活どうする？」
私「どうしようかねー、**色々**考え中」

このやりとりばかりやってたような気がします。

色々の中身はこんな感じでした。
「大手企業に勤めるのはなんとなくいかがなものか、
かといって、ベンチャー企業に勤めるのも激務で大変そう。
**さあどうしよう、まあなんとかなるか**」

つまり、**思考放棄**してました。笑

3年の冬頃には、同級生は就活のイベント参加を経て
社会人に向けての準備を徹底してやってましたが、
私は何もせず、サッカーしてました。
部活の休みの日は就活のことはせず、
サッカーを見るかカービィのエアライドやってました。

友人に誘われて就活イベントに行ってみたり、
なんとなくインターン受けてみたりすることはありましたが、
主体的な行動は一切なかったです笑

**よくあるパターンで、就活失敗まっしぐらでした。**

あっという間に4年の夏が来て、
周りは内定が決まっていく中
自分だけ何も就職先が決まっていない状態でした。
焦りから、本格的に動き出したのは大学4年生の7月からでした。

自己分析は友人と参加した就活イベントで実施しており、ESはなんとか書き切ってました。
自分が行きたい業種業態、企業はなんとなく見えていました。

**1.経済学部だから、銀行**
**2.なんとなく大きなことができそうなベンチャー企業っぽいところ**
**3.パソコン、ゲームが好きだし、カッコ良さそうなので、IT関係**

ただ、行動が遅すぎたため、準備もしっかりしていないので

1⇒銀行はエントリーシートの提出期限などはとうに過ぎており、断念。
2⇒ベンチャー企業は、実際に面接受けてみて少し気後れしてしまい、自分から辞退。

たいして会社も受けてないのに、落ちてメンタルボロボロでした。
就職浪人少し考えたくらいです。

そんな中、
東京の企業でBIツールをメインに扱っている会社が、
たまたま空き時間に福岡で企業説明会を開催してました。

「面白そう」と思って、初めて自分から申し込みをしました。

その頃、海外サッカーを見ることが多く
ポゼッション率、パス成功率、シュート本数など、
データ分析がサッカーに取り入れられ始めた時期で、
データ自体に興味を持ち始めてました。

説明会の会場に向かうと、自分が一番に到着。中には採用担当らしき人が一人。
軽く挨拶して、そわそわしながら他の参加者を待ってました。

しばらくすると、若い女性の方が颯爽と入ってきました。
「綺麗な人もIT系企業の説明会受けるんだ、隣に座らないかな」、と思っていたら、

前に立ち
「それでは企業説明会を始めます」と話し始めました。

**採用担当二人、自分一人**の逃げられない空間での企業説明会でした。
※後から聞くと、採用面談予定だったのが、
候補者キャンセル発生して緊急開催だったらしいです。ほんとに巡り合わせでした。

やばかったらすぐに質問などもせずに帰ってやろうくらい思ってました。

ただ、話をよく聞いているうちに
IT企業なのに(偏見です)、企業説明している人が綺麗、かっこいい、
そもそもシステムを使ってお客様を満足させるの面白そう、新鮮、
興味のあるデータは今後伸び代がある、

これは行くしかないと直感で思い、
面接を受けて1ヶ月程度で入社が決まりました。

そうして、私のエンジニアとしての人生が始まりました。

# あとがき
・こんな就活の仕方はしてはいけないよと過去の自分に言いたい
・とはいいつつ、就活する方は、分からないことだらけなので、まず就職していろいろ視野を広げてもOKだと思う
・1社目、感情で選択するのも最初はありだと思う
・自分はラッキーだったかも、機会が巡ってきたら飛び込んでみるのは大事
・カービィのエアライドは今でもおもしろい
Rancher Desktopでdocker pull hello-world がエラーになって困った話

Docker Desktopが有料化されたので、Rancher Desktopに乗り換えようとしました。
手始めに「hello-world」をpullしてみたらいきなりエラーになったので調べました。

# エラー


```:実行コマンド
docker pull hello-world
```

```:エラー内容
Using default tag: latest
Error response from daemon: pull access denied for hello-world, repository does not exist or may require 'docker login': denied: {"errors":[{"code":"UNAUTHORIZED","message":"image registry-1.docker.io/library/hello-world:latest is not covered by the Rancher Desktop allowed-images list"}]}
```

hello-worldが動かなかったら何もできないですよ。。。

## エラーメッセージ解析

`is not covered by the Rancher Desktop allowed-images list`
Rancher Desktopが何か制御している？allowed-images list？？？

こちらの記事を参考にさせていただきました。
[Rancher Desktopでイメージを取得する際のレジストリやリポジトリの制限を行う](https://dev.classmethod.jp/articles/rancher-desktopa-allow-image/)

> 今回はRancher Desktop 1.7.0でリリースされたレジストリやリポジトリを制限できる機能を試してみます。

なんですと…。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278955/7cbf6327-324e-65e9-c945-dd6c4d870b27.png)

設定を確認してみると、Allowed Imagesが有効になっていて、リストが空。
つまり、何も許可されていない。
Docker Desktopの代替ということで選んだが、まさかDocker Desktopに無い機能が追加されていたとは…。

Enableのチェックを外したところ、無事pullできました。
比較演算子と論理演算子まとめ

# はじめに
比較演算子と論理演算子はいろんな言語共通して使用できることが多いです
ただ共通して使用できないケースもあるようなので、
今回は復習も兼ねてまとめようと思います！

同じ書き方をしていても、言語ごとに少しずつ違うこともあるようです
難しいですね…もっと勉強して一つ一つの違いをまとめられるよう頑張ります！

# 比較演算子

### `==` と `!=` について
基本的に多くの言語で共通して使われる比較演算子は`==`と`!=`です

`==` は"等しい"
`!=` は"等しくない"

:::note warn
「等しい」には2種類あり、言語ごとに意味が異なるようです
- 同値：値(内容)が同じ
- 同一：オブジェクトが同じ

言語ごとに厳密には処理が違うので注意してください！
:::

JavascriptとPHPには上記に加えて、`===`と`!==`があります

`===` は"型も含めて厳密に比較して等しい"
`!==` は"型も含めて厳密に比較して等しくない"

##### `==`の種類一覧
|言語|`==`の種類|メモ|
|---|---------|----|
|Java|同一比較|同値比較には`equals`を使用|
|Javascript|同値比較|型変換ありの比較、厳密比較には`===`を使用|
|Python|同値比較|値を直接比較、同一性には`is`使用|
|Ruby|同値比較|`==`で内容比較、同一性には`equal?`を使用|
|PHP|同値比較|型変換ありの比較、厳密比較には`===`を使用|

###  `<` , `>` , `<=` , `>=` について
同じく、多くの言語で共通して使われる比較演算子です

`<` は"より小さい"
`>` は"より大きい"
`<=` は"以下"
`>=` は"以上"

# 論理演算子

### `&&` と `||`と`!` について
こちらも多くの言語で共通して使われている論理演算子です
結果は例としてtrue,falseを用いてますが、言語によっては最後に評価した結果を返すこともあります

#### `&&`
- `&&` は日本語で言うと「かつ」になります
例) 条件1がtrue "かつ" 条件2もtrue である場合 true
どちらか一方でもfalseになれば、結果はfalseです

#### `||`
- `||` は日本語で言うと「または」になります
例) 条件1がtrue "または" 条件2がtrue である場合 true
どちらか一方さえtrueであれば、結果はtrueになります

#### `!`
- `!` は日本語で言うと「〜でない」になります
例) 条件式の前に`!`をつけるとすると、"条件式でない場合〜"trueとなります
!(X==10) だとXが10と等しくない場合がtrueといった感じです

### `and` と `or`と`not` について

先ほどの`&&` と `||`と`!`の論理演算子ですが、
Pythonでは使用できず、代わりに`and` と `or`と`not`が使用できます

# まとめ
共通して使用できるものが多いものの、
JavascriptやPythonでちょっとした違いがありましたね

9/1 コメントでご指摘いただきました件を追記しました！
同じ書き方をしていたとしても、言語によって厳密には違うので注意するようにします
少しずつ調べて、言語による違いを追加していければと思っています！
ご指摘ありがとうございました！
よわよわエンジニア、UI・UX修行を始める ~番外編：そのロゴ、印刷できますか？~

## はじめに
本記事では、UI/UXデザイン方面でつよつよになりたい筆者が、UI・UXデザインに取り組んでいくなかで身に染みて感じたことを書いています。

今回は番外編です。UI/UXというよりは、印刷物に利用するデザインの話になります。

## カラーモード……？

UI/UXデザイン方面に興味を持ち色々やらせていただく中で、アイコンやロゴ等の画像を扱う機会が増えてきました。
とはいえアプリやWebなど、画面上で表示するアイコンやロゴに関しては特に何も気にすることはなく取り扱ってきたのですが、この度、印刷物に利用するロゴを扱う機会がありました。
すると、何やら「入稿データのカラーモードはCMYKで。RGBで入稿しないでください」とか指定されるんですよね。

**CMYKってなんですか……？**
**普段使ってるRGBと何が違うんですか……？**
**そもそも何の頭文字なんですか……？**

## RGB→CMYKの変換を試してみよう

ここにかわいいあおむし君のイラストがあります。
これは筆者がペイントソフトで描いてPNG形式で保存したデジタルイラストなので、当然カラーモードはRGBです。

![RGB](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1062427/d719c69a-34d5-bf89-1030-6ef16cd3d230.png)

このあおむし君の画像のカラーモードをCMYKに変換すると、こんな感じになります。

![CMYK](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1062427/0458cccf-a2eb-fc44-5fe2-c12ee9607770.jpeg)

**鮮やかな蛍光イエローだったあおむし君の顔色がうっすらと悪く……。**
背景の青色も暗くなってしまいました。

## 光の三原色と色の三原色

美術の授業などで、**光の三原色**と**色の三原色**について聞いたことはないでしょうか。

PCやスマートフォンなどの画面に代表される、自ら光を発するものの色の表現はR(赤)・G(緑)・B(青)の3色で、光の三原色です。
これは、色を重ねれば重ねるほど明るく白に近づく混色方法で、**加法混色**と呼ばれます。

![三原色_光.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1062427/74b6c076-6f1b-2068-bf55-439b3976e645.png)

対して、印刷物の色の表現はC(シアン)・M(マゼンタ)・Y(イエロー)で、色の三原色です。
実際には上記3色に加えてK(キープレート、黒のことです)の4色が印刷では利用されます。(3色の混色では綺麗な黒にならないこと、また印刷に用いるインクの量を削減することが理由です。)
プリンター売り場に行くと、この4色のインクが売っているのではないでしょうか。
これは、色を重ねれば重ねるほど暗く黒に近づく混色方法で、**減法混色**と呼ばれます。

![三原色_色.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1062427/3dc6d185-1069-40cf-794c-ce1d77e96424.png)


つまり、カラーモードのRGBはアプリやWebなど、画面で表示する想定の画像に適した色の表現方法であり、CMYKは印刷物にする想定の画像に適した色の表現方法なのです。

ではなぜカラーモードをRGBからCMYKに変えると色が変わってしまうのかというと、**RGBよりもCMYKの方が表現できる色の数が少ない**ことに起因します。

画像のカラーモードをRGBからCMYKに変換した場合、CMYK形式で表現できない色は似た色に置き換えられます。
特にパステルカラーや蛍光色が減法混色だと難しいため、実際に前節のあおむし君も、パステルカラー・蛍光色の部分がくすんでしまっています。
(印刷会社によっては、特色インクというCMYKで表現できない色のインクを利用することで印刷できるケースもあるようです)

ちなみに、デジタル画像で使いがちなPNG形式のカラーモードはRGBのみです。つまりPNG形式の画像は基本、印刷に不向きだったりします。
「劣化もしないし透過もできるし、PNG形式が一番だよね！」と思いがち(筆者は思っていました)ですが、PNG形式はweb上での表示に適した形式であり、印刷時には別の形式を選択することを検討した方が良さそうです。
ちなみにカラーモードをCMYKとして保存できる形式としては、JPEGやTIFF、PSD等が挙げられます。

とはいえそもそも、カラーモードをCMYKに指定した状態でデータを作成するのであれば、それこそPhotoShopやIllustratorなどを利用する必要があったりするのですが……。

## さいごに

もし、「このロゴ、アプリ上だけじゃなくて宣伝用のチラシにも表示するかも……！？」という場合などには、色の表現方法の違いを知っていると「じゃあCMYKデータとして作っておこう」という判断ができるかもしれません。
また、自分以外の人にデザインをお願いする場合であっても「このロゴは印刷物でも使います」ということを事前に共有できると、いざ出来上がったものを印刷したら何だか色が変……？ということも避けやすくなるかもしれない、と思いました。
2次元波動方程式のシミュレーション

# はじめに
物理学では、微分方程式が多用される。そのうち、熱や電力を物質に伝えるときの伝達の様子は、波動方程式を解くことで求められる。しかし、波動方程式は、時間の2階微分と変位の2階微分の関係性を示したものである。今回は、差分法を用いて単峰性を持つガウス関数の波形がどのように、空間を伝播するのかをシミュレートする。ちなみに、今回参考にしたサイトのリンクとシミュレーション結果を以下に示す。

![hadou3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686019/762af41e-c9d1-8ac2-914a-f5c9a707571e.gif)

http://tpweb2.phys.konan-u.ac.jp/~keisan_butsuri/keisan_butsuri/pdf/taiko.pdf

# 波動方程式
以下のような波動方程式を解くことを目的とする。
```math
\frac{\delta^2 u}{\delta t^2} = c^2(\frac{\delta^2 x}{\delta x^2}+\frac{\delta^2 u}{\delta y^2})
```
## 境界条件
$xy$平面上において$-L<x<L,-L<y<L$の正方形領域の外枠において$u=0$という境界条件を設ける。

## 初期条件

初期条件としては、以下に示すようなガウス波とする。

```math
u(x,y,t=0)=1.0e^{-(x^2+y^2)}
```





# 差分法によるアルゴリズム

```math
\frac{\delta u}{\delta x }= \frac{u(x_i+\Delta x)-u(x_i)}{\Delta x}
```

これをさらに、$x$で偏微分する。

```math
\frac{\delta^2 u}{\delta x^2 }= \frac{\frac{u(x_i+\Delta x)-u(x_i)}{\Delta x}-\frac{u(x_i)-u(x_i-\Delta x)}{\Delta x}}{\Delta x}=\frac{u(x_i+\Delta x)-2u(x_i)-u(x_i-\Delta x)}{\Delta x^2}
```

ここで、空間等方性（x,y軸方向に対して計算精度を平等にする）から、$\Delta x= \Delta y=\Delta$とする。

上記の考察を波動方程式に代入することで、波動方程式を差分法で表す。つまり、$k+1$ステップの$u$を$k$ステップと$k-1$ステップの$u$で表す漸化式を立てる。


```math
u^{(k+1)}_{i,j}=2u^{(k)}_{i,j}-u^{(k-1)}_{i,j}+\frac{c^2 \Delta t^2}{\Delta}(u^{(k)}_{i+1,j}+u^{(k)}_{i-1,j}+u^{(k)}_{i,j+1}+u^{(k)}_{i,j-1}-4u^{(k)}_{i,j})
```

ただし、$i,j$はXY空間を正方形で区切った際のパネルのような座標として表す。つまり、未来の隣のパネルの情報を隣のパネルとその隣のパネルで表すイメージである。


# プログラム
以下のようなプログラムを作成した。

``` python wave-equation.py
import numpy as np
import matplotlib.pyplot as plt
import matplotlib.animation as animation
import japanize_matplotlib
import math

# アニメ
fig, ax = plt.subplots(figsize=(4, 4))
ims = []
n=100
# 領域設定
L=1
x=np.linspace(-L,L,n)
y=np.linspace(-L,L,n)
X,Y=np.meshgrid(x,y)
# Uの初期化
U_now=np.zeros((n,n))
U_after=np.zeros((n,n))

delta = 0.01

delta_t = 0.01
c=0.5
t=0
k=0

# 位置と時間のリスト
U_xt=[U_now]

U_now=np.exp(-((X)**2+(Y)**2))
#plt.contourf(U_now)
while t<1:
  if k ==0:
    U_xt.append(U_now)
    k+=1
    continue
  else:
    U_before = U_xt[k-1]
    U_now = U_xt[k] 

    for i in range(n):
      for j in range(n):
        if i == 0 or i == n-1 or j == 0 or j == n-1:
          U_now[i,j] = 0
        else:
          U_after[i,j] = 2*U_now[i,j] -U_before[i,j] + (c*delta_t)**2*(U_now[i+1,j]+U_now[i-1,j]+U_now[i,j+1]+U_now[i,j-1]-4*U_now[i,j])/(delta**2)
  
  k+=1
  t=t+delta_t
  U_xt.append(U_after)
  im=ax.contourf(X,Y,U_now)
  ims.append(im.collections)


# # 複数のプロットを 100ms ごとに表示
ani = animation.ArtistAnimation(fig, ims, interval=100)
# #保存
ani.save("hadou.gif", writer="pillow")
plt.show()
```

これを実行すると以下のようなgifファイルが出力される。

![hadou3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686019/762af41e-c9d1-8ac2-914a-f5c9a707571e.gif)

# まとめ
今回は、2次元波動方程式を差分法を用いてPythonで解くことを目的とした。結果、手頃な計算時間でシミュレーションを行うことが可能であった。波動方程式は、様々な伝達に関する物理現象に応用可能なので、今回のアルゴリズムを理解したい。
既存のインフラ環境とTerraformで建てたインフラの違いを分析してみる

# 背景
awsの手作業構築プロが多い環境だと開発するときに、一緒にIaC化を進めることができずあとからIaC化を行うパターンが多い。また、手順書を残してくれていない人もいるため、パラメータの設定などの詳細がわからないところなどが存在することがあった。
そのため、構築された環境を分析してTerraform化できないかを検討したときに、Terraform importなるものがあると教わったので、それを試してみようと思います。

# Terraform importを利用して、既存のインフラをtfstateファイルに落とし込んでみる。。
まずは、terraformのコマンドが実行できるようにしておく。

- 作業するためのディレクトリを作成しておく。
- provider.tfを作成しておく。これがないと動かない。

```
cat provider.tf
provider "aws"{
region = "ap-northeaset-1"
}
```

次に、分析したいインスタスとインスタンス名を入れたファイルを作成してみる。


```
cat ec2.tf
resource "aws_instance" "<インスタンス名>"{

}
```

コマンド
`terraform import aws_instance.<インスタンス名> <インスタンスID i-xxxxx>`

上記環境と、コマンドによりtfstateファイルが作成されていることがわかる。


手動で建てたことがある環境と、Terraformで建てた環境のパラメータの違いなどを確認するときに使うことができそうだと思った。

あとは、tfstateファイルの中身を比較して、必要なパラメータを設定してインフラを構築してみる必要がある。