OmniAICreator/Qiita-1.07M huggingface dataset:
freeeサマーインターン2024 体験記

[1.はじめに](#1-はじめに)
[2.インターンシップの概要](#2-インターンシップの概要)
[3.体験記](#3-体験記)
[4.インターンに参加した感想](#3-インターンに参加した感想)
[5.結論](#4-結論)

# はじめに
2024年のfreeeのサマーインターンに参加してきました。自分自身サマーインターンを探す際に様々な記事を参考にしていたので、来年以降のインターンに参加する人のお役に立てたらなと思い、体験記を書きました！（あとは体験記書くとTシャツがもらえます！！笑）
# インターンシップの概要
- 開催日程: 2024/09/02(月)〜2024/09/13(金)
    - term1とterm2があり、どちらかひとつを選ぶことができます
    - 土日はもちろん休み、全部で10日間
- 勤務時間: 10:00~19:00 (休憩1h)
    - メンターの方や新卒採用担当の方に相談すれば、授業や研究などの理由による中抜けOK、勤務時間帯の変更も可能な範囲でできる
- 勤務形態: 1日目のみ全員リモート、それ以降は自由
    - 自分はfreeeの雰囲気を味わうために2日目以降は全て物理出社しました
    - 体感5割ぐらいのインターン生が毎日物理出社されていたかな？
- 配属チーム: IAM（サービスの認証・認可周りを扱うチームです）
    - 参加確定後、どのチームに配属したいかの希望を聞かれます
- 応募媒体: Wantedly
    - サポーターズなどの他の媒体から応募されている方もいらっしゃいました

その他詳しい情報は↓から
https://www.wantedly.com/projects/1653450


# 体験記
###  1日目
リモート勤務。PCの初期セットアップ、インターンに関する説明や、セキュリティに関する説明を聞きました。
ここまで終了すると、ここからはチーム別に分かれて、プロジェクトの説明や環境構築を行いました。1hぐらいで終わるやろ！w と考えていたら普通に3hぐらいかかった記憶。
同じチームのインターン生と共通の趣味（ディズニー）の話で盛り上がりました。今度ディズニー行こうねという話になる程仲良くなりました。笑

### 2〜5日目
対面出社。受付がめちゃくちゃ綺麗でした。

それでは業務開始。自分たちは新しいログインフローの確立をテーマに取り組みました。（あまり詳しいことは言えませんが）
- As-Isの特定: 現状のユーザーフローはどのような状態か
- To-Beの特定: どのようなユーザーフローが理想状態か
- Actionの特定: As-IsとTo-Beの差分に対する取り組みは何か

を意識しながら進めました。とはいうものの、自分たちは先にデモ実装を行い、その後にDesignDocを書いたので、ユーザーフローの特定にはあまり時間をかけず、ほぼ1日で調査を終わらせ、3日ぐらいで実装を行ないました。

進捗の報告や分からない点、これからの進め方の認識のすり合わせをメンターの方と定期的に時間を確保して行ないました。それ以外の時間でも、メンターの方が定期的に状況を確認しにきていただいて、不安な点がないかなどサポートいただいたので本当に心強かったです。

お昼は、IAMチームの社員の方や他のチームのインターン生と定期的にランチに行きました。
- 大崎キッチン: おしゃれな所
https://tabelog.com/tokyo/A1316/A131604/13245039/
- 町田商店: 空いた腹に家系ラーメンを注ぎ込む瞬間以上に幸せはない
https://tabelog.com/tokyo/A1316/A131604/13286530/
- 華心苑 大崎店: 中華専門店。安くてボリューム満点。
https://tabelog.com/tokyo/A1316/A131604/13258196/

### 6〜9日目
すでにこの時点でデモ実装が済んでいたので、DesignDocの作成に取り掛かりました。要は要件定義書みたいなものです。自チームはあくまでデモ実装を行うことがスコープでしたが、今後どういうログインフローにするべきか、それをどのような技術で実現するかについて、他社事例などの調査などを行いながら進めました。

コーディングも楽しいが、ドキュメント作成も意外と楽しいかった記憶。技術的に可能かどうかは一旦さておき、どのような形であればユーザーに価値を届けられるのだろうか？を意識したFBをいただいたりなど、本当に勉強になることが多かったです。（なんなら前半のデモ実装よりもこっちの方が自分にとって勉強になった）

あとは、デモ実装した機能のテスト用環境へのデプロイを行ないましたが、ここで意外と苦しめられました...涙
デプロイした後は自チームの社員の方々に使っていただいてみてめちゃくちゃ嬉しかった記憶。

### 10日目
最終日は成果発表。自分たちが今までやってきたことを発表する場です。2~30人聴衆がいる前での発表は緊張しましたが、なんとかうまくやれました。
（他のチームのクオリティがすごかったです。2週間にこんなにもできるのかと驚かさせられた。）

成果発表の後はお待ちかねの懇親会。他チームのインターン生や社員の方々など色々なお話をする機会を頂けました。

# インターンに参加した感想
- **とにかく居心地が良かった**
    - 雰囲気がなんとなく自分に合っていたし、居心地が良かったです。採用担当の方をはじめとして、社員の方々も温かく歓迎してくれて、このインターンに参加して本当によかったなと感じました。人事の方と1on1では、今後のキャリアについて相談することもできて、人に対して寄り添ってくれるところを実感しました。
- freee独特の文化
    - freeeは「遊び心」という言葉が一番ピッタリな会社だと思いました。もちろん技術に対しては真剣ですが、堅くやりすぎないところが良き。
- ユーザー視点に立ったプロダクト開発の流れ
    - デモ実装という範囲では、最低限機能するものだけ作れればいいかもしれない。しかし、その機能がユーザーにとって使いやすいのか、そもそもその機能を欲しているのかなど、深く考えることの重要性を実感させられた。

# 結論
めっっちゃくちゃ充実した2週間でした。Webの経験はあまりなかったものの、このインターンで貴重な経験をさせていただき本当にありがとうございました！！！！！
yarn install --check-filesをしたらnode-sassが読み込まれないエラー

自分用備忘録として作成
（初心者のため、もし違っていたら教えていただけると幸いです。）

課題でクローンしたアプリケーションを立ち上げるためにyarn install --check-filesをしたら、
error /Users/yec2016/workspace/dpro/rails_refactoring_task/node_modules/node-sass: Command failed.とエラーが出た。

環境は、
mac
node -v 18.18.0
node-sass -v 4.14.1
yarn -v 1.22.22

解決方法としては、node-sassのバージョンに対応できるnodeバージョンまで下げる。(pythonが読み込めないというエラーもあったため、pythonをインストールしたが、意味がなかった。）

#node-sassのバージョン確認
npm list node-sass
football_info_for_refactoring@0.1.0 /Users/xxx/workspace/xxx/rails_refactoring_task
└─┬ @rails/webpacker@4.3.0
  └── node-sass@4.14.1

node-sass　4.14.1ではnodeのバージョンは13までということなので、

#nvmで13.10.1をインストール
nvm install 13.10.1　

#nodeのバージョンを13.10.1で固定する
nvm use v13.10.1

#node -vで確認
node -v　v13.10.1
再度　yarn install --check-files　で無事できました！
（nodeのバージョンを下げたので、error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.とありました。node-sassを上げてもいいのかもしれないですが、クローンしたバージョンを変えたくなかったので、このままにしておく。）
PHP　オブジェクト指向覚書き「超基礎」

## はじめに

プロパティやメソッドなどの超基本についてだけまとめました。
全部頑張って書こうと思いましたが
カプセル化、継承、staticなど先が見えず心が折れ、
とりあえず書いたところまでの投稿です。
初学者はまずここまで理解しようということで。


## オブジェクト指向とは

オブジェクト指向は
クラス(class)という設計書の中に
プロパティやメソッドなど（部品）をひとまとめにして
この設計書を元に作ったもののことをインスタンスという。
　
プロパティは変数、
メソッドは関数と認識して今のところは問題ない。
　
※自分が最初理解するのにわかりづらかったことは
何をオブジェクトと呼ぶのか？
この記事最後に話そうと思う。

## 基本的な使い方（プロパティ、メソッド）
　
```diff_php
<?php
class クラス名 {

   // プロパティ
   
   // メソッド　
}
```
上記のように記述する。
```diff_php
<?php

// クラス名　Myclass
class MyClass {

   // プロパティ$myProperty （変数だと解釈する）
   public $myProperty;
   
   // メソッド myMethod()　（関数だと解釈する）
   public function myMethod(){
       // メソッドの処理の内容を記述
        echo "myMethod";
   }
}
```
では上記のクラス（設計書）を元に作る（インスタンスを作る）。


```diff_php
<?php

// 上記のファイルを読み込む
require_once("index.php")

任意の変数名 = new クラス名   

```
上記の書き方でインスタンスを生成し、プロパティやメソッドを使ってみる。

```diff_php
<?php

// 上記のファイルを読み込む
require_once("index.php")

// $myClassというインスタンスがつくられる。
$myClass = new MyClass();   

// インスタンスを作ることでクラス内のプロパティやメソッドを使うことができる。

// プロパティに値を入れる。
$myClass->myProperty = "Hello";
echo $myClass->myProperty;
// 結果　Hello

// メソッドを実行する。
$myClass->myMethod();
//　結果　myMethod
```
`インスタンス名->プロパティ名`
`インスタンス名->メソッド名`
でそれぞれアクセスすることができる。



## オブジェクトってどれのこと？

これはほんとにわかりづらい、
今でも正解がわかっていない。
　
理由は記事や本などでオブジェクトと呼ぶデータが統一していないから・・・。
インスタンスのことをオブジェクトと読んだり、
クラスのことをオブジェクトと読んだり。。。
　
自分は基本的にオブジェクトという言葉を使わないようにしている。

クラスは設計書
インスタンスは設計書を元に作られたもの
と定義がはっきりあるのであえてオブジェクトという言葉は
使わないでよいかなと、今のところ困っていないが
明確な定義があれば教えていただきたい。
【ブラウザ】Chromeからおさらばしたいと思ってしまった...

どうもこんにちは。

今まで、ブラウザは`Chrome`や`Brave`を使用していたのですが、最近になってもっと便利なブラウザを見つけてしまったので紹介します。

# Arc Browser

最近、自分は`Arc Browser`というブラウザを使用しています。

https://arc.net/

`Arc Browser`は`Chrome`や`Brave`と同じで`Chronium`ベースで開発されています。
なので、**`Chrome`などで使用していた拡張機能などは引き継ぐことが可能です。**

細かい使い方は他の方が紹介されていたので、リンクを貼り付けておきます。

https://qiita.com/leo_canada/items/7db010933f2af8437285

https://qiita.com/leo_canada/items/81a89f39f2b7fb7af20e

# なんで`Arc`使ってるの？

そもそも`Chrome`よりも使いやすいブラウザなんであるの？というお話なのですが、自分が「**`Arc`使いやすい!**」と思った理由を4点紹介します。

## タブを開きすぎてもどのページを開いているのかがわかりやすい

自分には、「一回開いたタブを消さない」という悪い癖があります。
タブの開きすぎで以下のようにアイコンしか表示されなくなって、どれがなんのページなのかがわからず...

![スクリーンショット 2024-09-15 11.57.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2711491/6c0ecc12-ac57-64f4-4d25-f15a502739a3.png)

でも、Arcだと以下のように表示されます。

![スクリーンショット 2024-09-15 12.00.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2711491/e9521581-e97e-6c82-197d-82acaff4f1b3.png)

見てわかるように、**開いているタブが横に表示される**んですよね。これでアイコンだけじゃなくてなんのサイトを開いているのかがわかりやすい！

## お気に入りページの登録ができて、わかりやすい

上で添付した画像で、`Google`や`Youtube`、`ChatGPT`などの**アイコンのみのボタンが表示されている**のがわかると思います。そこに表示されているのは**自分がお気に入り登録したサイト**です。

開きたいサイトをすぐに開けるので便利です。自分は`ChatGPT`や`Claude.ai`、`Genspark`などのAIツールを中心にお気に入り登録してます。

## Arcブラウザ内でサイトを分割表示できる

自分はこれが非常に嬉しいです。
以下はまさにこの記事を書いている最中のスクリーンショットなんですが、**画面が分割されている**のがわかりますか？

![スクリーンショット 2024-09-15 12.08.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2711491/e7b04fc4-e172-7166-e0b6-4232745ba399.png)

左右に分割して、左側に`Google`などで調べた情報を表示し、右側に`Qiita`の記事を書いたりしてます。（他にも用途はあります。）

## ⌘Command + Fで「AI ASK」が使用できる

これに関してはびっくりしました。
通常、`⌘Command + F`を叩くと「ページ内検索」ができると思いますが、Arcブラウザを使うと「そのページの要約」や「特定の情報を抜き出して回答」みたいなことをしてくれます。

マジでこの機能はすごいなぁと思っています。

例えば、先日投稿したアジャイル開発についての記事に対して実行してみます。

https://qiita.com/PDC-Kurashinak/items/fe73cc782dc2e986e39c

`⌘Command + F`を叩いて、以下の文章を入力しました。

```
このサイトから、アジャイル開発の導入率はどのくらいですか？
```

![スクリーンショット 2024-09-15 12.18.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2711491/cb99db29-f606-995c-b134-7f188e24f6b7.png)

「Ask」ボタンをクリックすると、サイトから情報を抜き出して回答してくれました！

![スクリーンショット 2024-09-15 12.19.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2711491/783c9c85-a942-e4a8-ffc8-220527cdd52b.png)

おそらく「RAG」の技術を使っているのでしょうが、それにしてもすごいです。

# スマホ版も優秀

スマホ版の方がAI機能は使いやすいです。普通にブラウザとしても優秀です。
試しにiphone15の価格について聞いてみました。

![IMG_7967.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2711491/d4272a1c-0831-061f-d4f3-8d755a5c26ba.png)

今はiphone16の発売前だからもう少し安くなってるのかな？
古いサイトも参照してしまうので、最新情報を確実に教えてくれるとは限らないかもしれないですね。

# 結論

「Arcブラウザで臨機応変にブラウザ内分割表示を使用して、GoogleとGensparkを使い分ける」のが一番良い使用方法だと感じました。

# 唯一良くない点

Chrome拡張機能のAcid Tabsが効かない!!!

以上
エクセル表をQiita記事に載せる

# はじめに
エクセルの表をQiitaの記事に載せる場合、図として貼り付けていたが、pandasの機能を使えば、pythonを2行記述するだけで簡単に変換できた。

# 手順
前提として、```pandas```と```tabulate```をpipで取得すること。```pandas```だけだと、```tabulate```がないと怒られる。

```data.xlsx```の```Sheet1```の表をMarkDown形式に変えたい場合は下記の通り。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1299802/ea322c11-34c2-9c06-edd0-560a97386e54.png)

```python:
import pandas as pd

# たったこの2行
df = pd.read_excel('data.xlsx',sheet_name='Sheet1')
print(df.to_markdown())

'''出力結果

|    | 期間      |   A |   B |   C |   D |   合計 |
|---:|:--------|----:|----:|----:|----:|-----:|
|  0 | 2024.1Q |  10 |   5 |  20 |  30 |   65 |
|  1 | 2024.2Q |  15 |   5 | 100 |  20 |  140 |
|  2 | 2024.3Q |  20 |   5 |  50 |  60 |  135 |
|  3 | 2024.4Q |  25 |   5 |  50 |  40 |  120 |
|  4 | 2025.1Q |  30 |  10 |  20 |  50 |  110 |
|  5 | 2025.2Q |  35 |  10 |  20 |  60 |  125 |
|  6 | 2025.3Q |  40 |  10 |  10 |  60 |  120 |
|  7 | 2025.4Q |  45 |  10 |  50 |  60 |  165 |

'''
```
出力結果をQiita記事に貼り付ければ下記のように表で表示
|    | 期間      |   A |   B |   C |   D |   合計 |
|---:|:--------|----:|----:|----:|----:|-----:|
|  0 | 2024.1Q |  10 |   5 |  20 |  30 |   65 |
|  1 | 2024.2Q |  15 |   5 | 100 |  20 |  140 |
|  2 | 2024.3Q |  20 |   5 |  50 |  60 |  135 |
|  3 | 2024.4Q |  25 |   5 |  50 |  40 |  120 |
|  4 | 2025.1Q |  30 |  10 |  20 |  50 |  110 |
|  5 | 2025.2Q |  35 |  10 |  20 |  60 |  125 |
|  6 | 2025.3Q |  40 |  10 |  10 |  60 |  120 |
|  7 | 2025.4Q |  45 |  10 |  50 |  60 |  165 |


# おまけ
その他いろいろな形式に変換できる
コマンド|変換フォーマット
--|--
df.to_string()|文字列形式。テキストに貼り付けなど。
df.to_dict()|辞書形式
df.to_json()|json形式
df.to_html()|html形式
df.to_clipboard()|クリップボードへ

使い方詳細は公式サイトへ

https://pandas.pydata.org/pandas-docs/stable/reference/frame.html
【覚書き】PHPStanのレベル0では、関数に渡す引数の不足は確認するが超過は確認できない

# 初めに
PHPStanを使っている際、関数やメソッドに渡す引数が超過している場合にエラーを出してくれないという事象に当たりました。
備忘のためアウトプットします。


# PHPStanのレベル0
まず、レベル0の説明はこちら。

> basic checks, unknown classes, unknown functions, unknown methods called on `$this`, wrong number of arguments passed to those methods and functions, always undefined variables

> 基本的なチェック、不明なクラス、不明な関数、不明なメソッドの呼び出し$this、それらのメソッドと関数に渡される引数の数が間違っている、常に未定義の変数

`メソッドに渡せれる引数の数が間違っている`とあるので、引数の数が多い場合でもエラーを出してくれるのかと思っていました。

# レベル0では引数の超過を確認できない
検証のために以下のコードを作成し、解析にかけてみました。

```php
class Level0
{
    public function testAction() {
        $this->knownMethod();  // 引数が足りないためエラー
        $this->knownMethod("String", "test");  // 引数が超過しているがエラーにならない
    }

    private function knownMethod($test)
    {
        // do the work
    }
}
```

実際の解析結果がこちら。
引数が足りないというエラーは出ているものの、数が多いというエラーは出ていません。

```shell: 実行結果
> ./bin/phpstan analyse --level 0
Note: Using configuration file C:\Path\to\workspace\phpstan.neon.
 3/3 [============================] 100%

 ------ -----------------------------------------------------------------------------------------
  Line   Path/To/file/Level0.php
 ------ -----------------------------------------------------------------------------------------
  :8     Method Path\To\file\Level0::knownMethod() invoked with 0 parameters, 1 required.
 ------ -----------------------------------------------------------------------------------------
                                                                                                                        
 [ERROR] Found 1 error
```


ちなみに、レベル1で実行するとちゃんとエラーになります。

```shell: 実行結果
> ./bin/phpstan analyse --level 1
Note: Using configuration file C:\Path\to\workspace\phpstan.neon.
 3/3 [============================] 100%

 ------ -----------------------------------------------------------------------------------------
  Line   Path/To/file/Level0.php
 ------ -----------------------------------------------------------------------------------------
  :8     Method Path\To\file\Level0::knownMethod() invoked with 0 parameters, 1 required.
  :9     Method Path\To\file\Level0::knownMethod() invoked with 2 parameters, 1 required.
 ------ -----------------------------------------------------------------------------------------
                                                                                                                        
 [ERROR] Found 2 error
```

# 理由
PHPでは、引数の数が少ない場合はエラーになりますが、**引数の数が多くてもエラーになることありません**。
そのため、レベル0では引数の数が少ない場合のみを見ていると思われます。

https://qiita.com/pyon141/items/f28d4081175003225e2c

# 終わりに
PHPStan側のバグかと思ったのですが、そもそもPHPの言語仕様のようですね。
また一つ勉強になりました。
【Rails】rails assets:precompile実行によりCSSを更新できなくなった

# 動作環境
OS: macOS
Rails: 7.2.1
Ruby: 3.2.3

# 事象
Webアプリ作成中、カスタムCSSの内容を変更したところ、変更後のスタイルが適用されず変更前のスタイルが維持されてしまいました。

```app/assets/stylesheets/styles.css
/* 変更前のCSS */
.haikeigazou {
  background-image: linear-gradient( ...省略... );
  background-color: #FFF;
  background-size: 16px 16px;
}
```
```app/assets/stylesheets/styles.css
/* 変更後のCSS */
.haikeigazou {
  background-image: url(background.jpg);
  background-size:cover;
}
```
検証ツールを確認すると、やはり変更前のCSSが適用されています。
[![Image from Gyazo](https://i.gyazo.com/e0f241ff2db1c61387ba22ed92cb2e0e.png)](https://gyazo.com/e0f241ff2db1c61387ba22ed92cb2e0e)

# 原因
似たような状況の[こちらの記事](https://qiita.com/GandT/items/4b3701a6ca51ff84370c)を参考にさせていただき、開発環境で`rails assets:precompile`してしまったのが原因とわかりました。

`rails assets:precompile`とはアセット（CSSやJavaScriptファイルなど）を事前にコンパイルして最適化するためのコマンドで、本番環境パフォーマンス向上のためデプロイ直前などに実行するものです。

`rails assets:precompile`でコンパイルされたアセットは`public/assets`ディレクトリに保存されますが、開発環境でもこの`public/assets`内のアセットが優先されてしまい、新たに作成した`app/assets/stylesheets/`内のCSSは適用されなくなってしまうようです。


### `public/assets`を確認
上記を踏まえ`public/assets`ディレクトリを確認すると、検証ツールで表示されていた`styles-906cc0c1...105.css`と同名のファイルが存在しました。そしてファイルの中身も検証ツール上のスタイルと一致。これが原因と見てよさそうです。
```styles-906cc0c1...105.css
.haikeigazou {
  background-image: linear-gradient( ...省略... );
  background-color: #FFF;
  background-size: 16px 16px;
}
```

# 解決策
`rails assets:precompile`で生成されたコンパイル済みのアセットを削除します。
```
$ rails assets:clobber
```
これにより`public/assets`ディレクトリが丸ごと削除されました。
```
I, [2024-09-15T00:00:00.000000 #00]  INFO -- : Removed /myapp/public/assets
```
サーバーを再起動し、無事目的のCSSが反映されました！

# おわりに
デプロイ（検証）の際に`rails assets:precompile`を実行したのですが、以降追加のアセットが反映されなくなることまで理解できていませんでした。
コマンドの機能はきちんと理解した上で実行するよう気をつけます。

もし本記事の記載の内容に誤りなどございましたら、恐れ入りますがご指摘いただけますと幸いです。

# 参考
https://qiita.com/GandT/items/4b3701a6ca51ff84370c

https://railsguides.jp/asset_pipeline.html#%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%81%A7%E3%83%97%E3%83%AA%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E3%81%99%E3%82%8B

https://www.issoh.co.jp/tech/details/2882/#:~:text=%60rails%20assets%3Aprecompile%

https://qiita.com/gobtktk/items/be7d2e39a41e86545ecf
公開したばかりのサイトがChromeで危険なサイトと表示される

# はじめに
公開したばかりのサイトが、[危険なサイト
アクセスしようとしているサイトでは、攻撃者がユーザーを騙してソフトウェアをインストールさせたり、パスワード、電話番号、クレジット カード番号などを開示させたりする可能性があります。安全なページに戻ることを強くおすすめします。この警告の詳細]と表示されてしまいました💦

今回はこちらを解決したので、解決方法をまとめておきます！

![スクリーンショット 2024-09-14 20.54.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782860/9bad798c-52db-deaa-70dc-fdee71744726.png)


こちらのサイト曰く、Googleのサーチコンソールに登録して、再審査をリクエストしたら表示されなくなったそうなので、同じようにやってみる！

https://weblog.ict-yorozu.com/chrome-dangerous-site/

# Google Search Consoleに登録
該当のサイトが自分のサイトであることを証明します

1.GoogleSearchConsoleにアクセス「今すぐ開始」をクリック

https://search.google.com/search-console/about?hl=ja

2.左側のドメインに該当のドメインを入力し、「続行」をクリック

![スクリーンショット 2024-09-15 11.46.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782860/d410b394-192d-ffd0-d034-7f6a4da2080d.png)

3.表示されるTXTコードをコピーします

![スクリーンショット 2024-09-15 11.47.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782860/e7b0a854-d8b3-dd71-f909-2aba131bf35d.png)

4.私は今回AWSでサイトを公開したため、AWSでの手順を書きます✍️
AWSにログイン後Route53のホストゾーンで該当のドメインをクリック
レコードを作成する

![スクリーンショット 2024-09-15 11.52.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782860/03b534d3-96bd-9ebf-22e2-f055a34410d2.png)

5.レコードタイプはTXTを選択し、値の箇所に先ほどコピーしたコードを貼り付けてレコード作成

![スクリーンショット 2024-09-15 11.54.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782860/ae1d5e4b-6667-38db-18db-f1ce4e0f14f2.png)

6.レコードが作成されたことを確認したら、GoogleSearchConsoleに戻り「確認」をクリック

![スクリーンショット 2024-09-15 11.47.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782860/e7b0a854-d8b3-dd71-f909-2aba131bf35d.png)

7.登録完了
![スクリーンショット 2024-09-14 20.54.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782860/942f3c82-c599-d99f-fdea-a8255a528e4c.png)

# 再審査リクエストをする手順

1.セキュリティと手動による対策のセキュリティ問題を開きます
![スクリーンショット 2024-09-15 12.03.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782860/cad99a3b-0f36-eb47-dc7c-fe7ae8a0b6c0.png)

見当たらない場合は以下のリンクからも飛べます↓

https://support.google.com/webmasters/answer/9044101?sjid=14581778230126700112-AP

2.1件の問題を検出しましたと表示される
「審査をリクエスト」をクリック

![スクリーンショット 2024-09-14 21.02.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782860/b9edfd39-27ec-2e12-d2c7-f6d5ab443774.png)

3.概要を記載して、再審査を依頼
(公開したばかりのサイトのため、危険なサイトと認識された可能性があります。
再審査をお願いします。的なこと書きました！)


# 解決！
翌日GoogleSearchConsoleから「審査が問題なく完了しました」という旨のメールが届きました！サイトを確認したところ、警告文も消えていました！


![スクリーンショット 2024-09-15 11.37.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782860/63197b56-dd68-7693-c59c-5a0c637a8080.png)

# 最後に
GoogleSearchConsoleは今回のような件で初めて登録しましたが、
無料で利用できますし、Google検索におけるサイトの表示を改善、検索エンジン最適化（SEO）等にも使用できるようなので登録してみるといいかもしれません！

# 参考にしたサイト
ありがとうございました！

https://qiita.com/mugihara/items/aa58eb0b4d6c4070d047

https://weblog.ict-yorozu.com/chrome-dangerous-site/

https://support.google.com/webmasters/answer/35843?hl=ja
GenAI Use case を1週間使ってみた感じ

# 背景
先日参加した AWS AI DAY のハンズオンで作った生成AIを触れる環境を1週間使ってみた感想を書いていこうと思う。

# セキュリティ
生成AIを使う上で、よく言われる気にしないといけない社外秘情報をAIの入力に使ってもいいのかという点は、[Bedrockの説明ページ](https://aws.amazon.com/jp/bedrock/security-compliance/)にも記載されている通り、
- モデルのコピーに対して入力されるので元モデルにフィードバックされない
- AWS内のモデルとのやり取りは暗号化されているので盗聴されても解読されにくい
とのことです。
このことを考慮すると、会社のAWS契約でBedrockを使って生成AIを使った方がエンジニアの個人契約生成AIを許可くするより漏洩の危険性がないということだし、もしもの時のガードレールや問題特定がしやすいと感じた。

# 実際に使ってみて
どういったものかを理解するという目的の前ではRAGはまだ早いと感じた、というのもRAG部分だけ固定費で一日数ドルかかってしまっているので検証にはハードルが高く感じた。また、マルチモーダルなのでこちらから資料を提示してから利用すれば、RAGチックに使うこともできそうだった。

# 実際に使った用途
- 非エンジニアへの説明資料の草案(パワーポイントの構成)生成
    - どんなイメージ画像を張ったらいいか
    - 説明の言い回し
      ここに関してはリテラシーレベルの低い人向けの説明は結局自身で作るしかないみたい
    - 説明を行った際に出る質問とその回答
      ここに関してもリテラシーレベルの低い人向けの質疑を想定するのは難し見たい

- QuickSightのデータセットを作る時の相談相手
    - SQLの効率化や生成はかなり良い
      ダメもとでヒートマップ用のSQL聞いたらいい感じだった
    - 機能に関しては少し弱い
      同構造の別データセットのUNIONはQuickSightとしてはサポートしていないのにそういう機能があるかのように説明された。(ハルシネーションを経験した、これはAmazon Qでも同様の回答だった)結局はJOIN後にCOALESCEしました

- サービス用SNS投稿文言生成
    - 利用しない方がいいワード、好ましいワード一覧の生成
    - 文言の提案
    - 候補から炎上リスクの考察

- 議事録作成
    - 音声認識で話している人を識別して、だれが話しているか分けて台本みたいに書き出してくれる
    - 書き出し性能は日本語に対してはよわい（Youtubeの自動字幕レベル）

# 感想
参加した9月のAWS AI DAY 発表内容でもあったようにプロンプトで前もってどれくらいハルシネーションを許容するのかを考えプロンプトの調整は必要だし裏どりはまだ必須と感じた。
また、かなり便利なので使われないようにする必要がると感じた。
統計学の基礎、標本分散と標準偏差をPythonを使って理解する

## 概要

データ分析や統計学において、データのばらつきや分散を理解することは非常に重要です。本記事では、標本分散と標準偏差について解説し、正規分布に近いデータセットを用いてPythonでこれらの統計量を計算する方法を紹介します。文章はGPT O1-previewで書いていています。

## はじめに
標本分散：サンプル内のデータが平均からどれだけ離れているかを示す指標。
標準偏差：分散の平方根で、データのばらつきを元の単位で表します。

## 分散と標準偏差の基礎

### 分散とは
分散は、データポイントが平均値からどれだけ散らばっているかを示します。各データポイントと平均値の差の二乗の平均を計算して求めます。

```math
s^2 = \frac{1}{n - 1} \sum_{i=1}^{n} (x_i - \bar{x})^2
```

```math
  s^2 ：標本分散 
```
```math
  n ：サンプルサイズ（データの総数）
```
```math
  x_i ：各データポイント
```
```math
  \bar{x} ：標本平均
```

### 標準偏差とは
標準偏差は、分散の平方根を取ったもので、データのばらつきを元の単位で示します。

```math
s = \sqrt{s^2}
```

## コード全文

```python
# Import Necessary Libraries
import numpy as np
import pandas as pd
import matplotlib.pyplot as plt

# Fix the seed for reproducibility
np.random.seed(0)

# Generate sample data: Normally distributed scores with mean=70 and std=10
scores = np.random.normal(loc=70, scale=10, size=1000)

# Convert data to a Pandas Series
scores_series = pd.Series(scores)

# Calculate the sample mean
mean_score = scores_series.mean()
print(f"Sample Mean: {mean_score:.2f}")

# Calculate the sample variance (unbiased estimator)
variance = scores_series.var(ddof=1)
print(f"Sample Variance: {variance:.2f}")

# Calculate the standard deviation
std_deviation = scores_series.std(ddof=1)
print(f"Standard Deviation: {std_deviation:.2f}")

# Plot the histogram
plt.hist(scores, bins=30, edgecolor='black')
plt.title('Distribution of Math Test Scores')
plt.xlabel('Score')
plt.ylabel('Frequency')
plt.grid(axis='y', alpha=0.75)
plt.show()
```

## 表示結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36629/ee97d370-f80e-52a0-8d30-1cf3b35ad21a.png)

## 結果の解釈
標本平均：約69.84で、データの中心的な傾向を示しています。
標本分散：約97.52で、データが平均からどれだけ離れているかを示します。
標準偏差：約9.87で、データポイントが平均から平均してどれだけ離れているかを示します。
ヒストグラムから、データが正規分布に従っていることが確認できます。大半の点数が平均値付近に集中しています。

## 分母が n−1 になる理由
分母が n−1 になるのは、データの自由度を考慮しているためです。標本平均を計算する際に1つの自由度を失うため、分母を nではなくn−1 とします。これにより、標本分散が母集団分散の不偏推定量となります。

## なぜ n−2 ではないのか？
分母が n−2 となるのは、さらにもう1つの制約がある場合です。例えば、回帰分析において、データの点数 
nから回帰モデルで使われる2つのパラメータ（傾きと切片）を推定する場合、自由度は n−2 となります。これは平均の代わりに2つのパラメータを推定するため、n−2 個のデータ点が自由に変動できるためです。

しかし、単純な標本分散の計算では、制約となるのは標本平均 1つだけなので、自由度は n−1 となります。

## 自由度とは？
自由度とは、データの中で制約を受けずに自由に変動できるデータ点の数を指します。標本平均を計算するとき、すべてのデータ点を使って平均を固定してしまうため、1つのデータ点は他のデータ点に依存することになります。その結果、自由度が1つ減り、自由度は n−1 となります。

## 例

もう少し具体的に考えてみましょう。

データが 
```math
( x_1 = 5 )、( x_2 = 7 )、( x_3 = 9 ) 
```
の3つだとします。これらのデータの平均は次のように計算されます。

```math
 \bar{x}  = \frac{5 + 7 + 9}{3} = 7
```

もし、私が「このデータの平均が7であることは既に知っている」という条件で、データの1つを勝手に選べるとしたら、たとえば ( x_1 = 5 ) と決めて、次に ( x_2 = 7 ) と決めた場合、残りの ( x_3 ) は自動的に決まります。

```math
x_3 = 3 \bar{x} - x_1 - x_2 = 3 \times 7 - 5 - 7 = 9
```

つまり、3つ目のデータ \( x_3 \) はもう自由に選べるわけではなく、平均値を保つために他のデータ点に依存しているということです。このように、標本平均を使って計算する場合、自由に動かせるのは \( n - 1 \) 個のデータ点しかなく、それが「自由度が1つ減る」理由です。

## 結論

標本平均を計算すると、データのうち1つは他のデータに依存することになります。  
したがって、自由に選べるデータ点の数、つまり自由度は \( n - 1 \) となります。  
分散を計算する際に分母を \( n - 1 \) にするのは、この自由度を考慮して、母集団分散の不偏推定量にするためです。
プログラミング学習とテレビゲームの戦い方の共通点～初学者の知恵～

## はじめに
こんにちは、未経験からエンジニア転職を目指しているものです。
オンラインスクールで本格的に学習して4ヶ月目に入りました。今回は、学習のモチベーションを上げるために考えた内容です。学生時代はテレビゲーム、特にアクションRPGなどをしていました。その時の楽しみ方がプログラミング学習に活かせないかと思い記事を書いてみました。

## プログラミング学習とテレビゲームの共通点とは？
プログラミング学習とテレビゲームには意外な共通点があることに気づいたことはありませんか？アクションゲームをプレイしていると、プログラミング学習のプロセスと似ている部分が多く感じられます。ゲームの戦い方とプログラミング学習の過程にどのような共通点があるのかを具体的に見ていきます。


## 1. 初期の挑戦と成功体験
**ゲーム:**　
ゲームを始めたばかりの頃は、比較的弱い敵と戦いながら操作やコマンドを覚えます。簡単な敵を倒すことで、ゲームの基本的な流れや戦い方を学ぶことができます。
**プログラミング:**
プログラミングを始めたばかりの頃は、簡単なプログラムやチュートリアルに取り組むことで、基本的な文法や構文を学びます。小さな成功体験が自信を高め、次のステップへ進むモチベーションになります。

## 2. 問題に直面し、解決策を考える
**ゲーム:**　
強い敵に直面したとき、単純な攻撃方法では勝てないことがあります。敵の弱点を探し、新しい戦い方や技を使う必要があります。
**プログラミング:**
複雑な問題に直面したとき、基本的なコードやアプローチでは解決できないことがあります。問題を分析し、新しいアルゴリズムやライブラリを学ぶことで解決策を見つけ出します。

## 3. 新しいスキルの習得と応用
**ゲーム:**
敵を倒すことで新しい技を覚え、その技を使ってさらに強い敵と戦うことができます。技をマスターすることで、難しい敵にも対応できるようになります。
**プログラミング:**
新しいプログラミングスキルやライブラリを習得し、それを使ってより複雑なプロジェクトに挑戦することで、自分のスキルを広げていきます。学んだスキルを実践で応用することで、より高度な問題に取り組むことができます。

## 4. 試行錯誤とフィードバック
**ゲーム:**
敵との戦いでは、失敗することも多いですが、そのたびに戦い方を調整し、成功するまで繰り返します。試行錯誤を重ねることで、最終的に敵を倒すことができます。
**プログラミング:**
コードを書いて実行する中でエラーが発生することが多いですが、その都度問題を修正しながら正しい動作を実現します。エラーやバグを修正する過程で学びが深まります。

## 5. 段階的な学習と達成感
**ゲーム:**
簡単なレベルから始まり、徐々に難易度が上がることで、スキルが向上していきます。段階的に難易度が上がることで達成感を得ることができます。
**プログラミング:**
基本的なプログラミングから始まり、徐々に複雑なプロジェクトに取り組むことでスキルが向上します。段階的に学ぶことで達成感を感じながら成長することができます。

## 6. ポートフォリオの作成と転職成功
**ゲーム:** ゲームの最終ステージでは、これまで習得したスキルや戦術を駆使して最強のボスと戦うことになります。クリアすることで、大きな達成感と報酬を得ることができます。
**プログラミング:** エンジニア転職を目指している人であれば、プログラミング学習の集大成としてポートフォリオを作成し、それを用いて転職活動を行います。ポートフォリオにはこれまでの学習成果やプロジェクトが含まれ、成功することで転職という大きな目標を達成することができます。

このように、プログラミング学習とゲームのプロセスには共通する要素が多く、ゲームでの経験を通じてプログラミングの学習方法を理解しやすくすることができます。

最後までご覧いただき本当にありがとうございました！！
EDA アカウント モデル (管理アカウント) を理解する



+ [Understanding the EDA Account Model (Administrative Account)](https://help.liaisonedu.com/TargetX_Help_Center/Salesforce_Basics/EDA/Getting_Started/Managing_Administrative_Accounts)

EDA は 3 つの異なるタイプのアカウントをサポートしています。

+ 組織アカウント(Organizational Accounts) - これらは通常の Salesforce アカウントであり、通常は企業、組織、または政府機関を表します。
+ 管理アカウント(Administrative Accounts) - これらは、それぞれが連絡先レコードと 1 対 1 で対応するアカウントです。
+ 世帯アカウント(Household Accounts) - 連絡先がすべて同じ世帯のメンバーであるアカウントです。


Salesforce では 、EDA で管理アカウントを使用する必要があります 。詳細については、Salesforce ドキュメント「  Education Data Architecture (EDA) Documentation」を参照してください。TargetX は従来、組織アカウント モデルを利用しています。 

# EDA アカウント モデル

EDA アカウント モデルは、標準の Salesforce アカウント モデルと密接に連携しています。標準モデルをニーズに合わせてカスタマイズすることなく、Salesforce のすべての機能を利用できます。必要に応じて、EDA でビジネス追跡を行うこともできます。商談やケースなどの標準の Salesforce オブジェクトはそのまま残ります。ただし、EDA では、Salesforce.org が教育関係者の作業に合わせたカスタム機能を提供するアプリケーションを作成しました。EDA

アカウント モデルでは、標準の Salesforce アカウント オブジェクトはコンテナ アカウントとして機能します。EDA には、管理アカウントと世帯アカウントの 2 種類のコンテナ アカウントがあります。

管理アカウントには、1 人の連絡先が関連付けられています。これは多くの場合学生ですが、教員、卒業生、または教育機関に関連するその他の人物である場合もあります。アカウントと連絡先の関係は 1 対 1 です。したがって、EDA で作成する連絡先ごとに、固有の管理アカウントもあります。管理アカウントは、連絡先のアカウント レベルの表現と考えることができます。

+ [Understand the EDA Account Model](https://trailhead.salesforce.com/content/learn/modules/highered_heda_basics/highered_heda_basics_account_model)

+ データモデル

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/a588bdaa-e57a-bc4f-7ac9-318eae6e0016.png)

表現されるオブジェクト タイプが 4 つあることに注意してください。

+ 標準オブジェクト
+ コースと登録
+ 連絡先
+ ユーティリティ
javascriptで表示と非表示

``` html


<DOCTYPE! html>

<head>

<meta charset="UTF-8">
<title>sample3</title>


</head>

<body>

<h2>google</h2>
<a id="google" href="https://google.co.jp" style="display: block;">google</a>

<button id='google1' type=submit onclick="chg(google,google1)">非表示</button>
<br>
<h2>yahoo</h2>
<a id="yahoo" href="https://yahoo.co.jp" style="display: block;">yahoo</a>
<button id='yahoo1' type=submit onclick="chg(yahoo,yahoo1)">非表示</button>
<br>

<h2>ibm</h2>
<a id="ibm" href="https://ibm.com" style="display: block;">ibm</a>
<button id='ibm1' type=submit onclick="chg(ibm,ibm1)">非表示</button>
<br>

<script>

function chg(id,zzz) {

element = id;


if (element.style.display == 'block') {
    element.style.display = 'none';
    zzz.innerHTML = "表示";
    
} else {
    element.style.display = 'block';
    zzz.innerHTML = "非表示";
}


}

</script>

</body>


</html>

```
BigQueryからGCSへデータをエクスポートする方法

## はじめに
BigQueryは大量のデータを処理するための強力なデータウェアハウスです。

時には、分析結果や集計データをGoogle Cloud Storage（GCS）にエクスポートして、外部システムで利用したり、長期保存したりする必要があります。

本記事では、BigQueryのEXPORT DATAクエリを使ってGCSにデータをエクスポートする方法を解説し、具体的なクエリ例とエクスポート時のオプションについて詳しく説明します。

## 1.  基本のエクスポートクエリ
BigQueryからGCSへデータをエクスポートする最も基本的な方法は、EXPORT DATAを使うことです。以下のようにクエリを書くだけで、簡単にデータをGCSに保存できます。

```sql
EXPORT DATA OPTIONS (
  uri='gs://出力先バケット名/export-file-*.csv',
  format='CSV',
  compression='GZIP',
  overwrite=true
) AS
SELECT * FROM `プロジェクト名.データセット名.テーブル名`;
```

上記のクエリでは、データをCSV形式でエクスポートし、GCSバケットにgzip圧縮して保存します。また、ファイルが大きい場合は自動的に分割され、ワイルドカード（*）を使用して複数ファイルに分けられます。

## 2.`EXPORT DATA`オプションの詳細
`EXPORT DATA`クエリはさまざまなオプションをサポートしており、データ形式や圧縮方法をカスタマイズすることができます。以下に主要なオプションを詳しく解説します。

- `uri`：データの保存先を指定します。
uriにはGCSバケットのパスを記載し、ファイル名の部分にワイルドカード（*）を使用することで、自動的に分割されたファイルを作成できます。

```sql
uri='gs://出力先バケット名/export-file-*.csv'
```

- `format`：データのエクスポート形式を指定します。CSVやJSONなどの形式を選ぶことができます。
```sql
format='CSV'
``` 

- `compression`：データを圧縮してエクスポートするためのオプションです。GZIPやNONEを指定できます。
```sql
compression='GZIP'
``` 

- `overwrite`：エクスポート先に同名のファイルが既に存在する場合に、上書きするかどうかを指定します。
```sql
overwrite=true
``` 

- `header`：CSVファイルにカラム名を含めるかどうかを指定します。
```sql
header=true
``` 

## 3. ファイル分割とパフォーマンス最適化
大規模データをエクスポートする際は、ファイルを分割してエクスポートすることで、パフォーマンスが向上します。
`uri`にワイルドカードを使用することで、エクスポートされたファイルが適切なサイズに自動的に分割されます。

たとえば、以下のクエリでは、日付範囲を指定して特定の期間のデータのみをエクスポートすることができ、
ファイルは自動的に分割されます。
```sql
EXPORT DATA OPTIONS (
  uri='gs://出力先バケット名/export-file-*.csv',
  format='CSV',
  compression='GZIP',
  overwrite=true
) AS
SELECT * FROM `プロジェクト名.データセット名.テーブル名`
WHERE date_column BETWEEN '2024-01-01' AND '2024-12-31';
``` 

## 4. まとめ
この記事では、BigQueryからGCSへデータをエクスポートする際の基本的な方法と、EXPORT DATAクエリのオプションを活用して、効率的にデータを管理する方法を解説しました。
適切なデータ形式や圧縮方法、ファイル分割を選ぶことで、パフォーマンスを向上させながら、ストレージのコストも最適化することができます。

[公式ドキュメント：テーブルデータを Cloud Storage にエクスポートする](https://cloud.google.com/bigquery/docs/exporting-data?hl=ja "公式ドキュメント：テーブルデータを Cloud Storage にエクスポートする")
wslでmanim その23

# 概要
wslでmanimやってみた。
練習問題やってみた。

# 練習問題
next_toを使え。

# 参考にしたページ

https://infograph.tistory.com/128

# 成果物

![NextToTest_ManimCE_v0.18.1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/d002f5a8-f14f-cbc7-bf8e-520c1295b4fe.gif)


# サンプルコード

```

from manim import *

class NextToTest(Scene):
	def construct(self):
		dir_str = ['ORIGIN', 'LEFT', 'RIGHT', 'UP', 'DOWN', 'UL', 'UR', 'DL', 'DR']
		dir_list = [ORIGIN, LEFT, RIGHT, UP, DOWN, UL, UR, DL, DR]
		for str, d in zip(dir_str, dir_list):
			self.next_to_obj(str, d)
		for str, d in zip(dir_str, dir_list):
			self.next_to_obj(str + " buff = 0.5", d, buff = 0.5)
		for i in range(0,5):
			self.next_to_obj("LEFT, aligned_edge = " + dir_str[i], LEFT, buff = 0, aligned_edge = dir_list[i])
		for i in range(0, 5):
			self.next_to_obj("LEFT, buff = 0.5, aligned_edge = " + dir_str[i], LEFT, buff = 0.5, aligned_edge = dir_list[i])
		for str, d in zip(dir_str, dir_list):
			self.next_to_point(str, d)
	def next_to_obj(self, str, direction = ORIGIN, buff = 0, aligned_edge = ORIGIN):
		rect1 = Rectangle(width = 0.4, height = 0.2, stroke_color = RED)
		rect2 = Rectangle(width = 1.5, height = 1.5, stroke_color = BLUE).move_to(np.array([2, 2, 0]))
		text = Text(str, font = 'Ubuntu', stroke_width = 6, font_size = 21).next_to(rect1, DOWN)
		self.add(rect1, rect2, text)
		self.wait(0.3)
		rect1.next_to(rect2, direction, buff = aligned_edge)
		self.play(Write(rect1))
		self.wait()
		self.remove(rect1, rect2, text)
	def next_to_point(self, str, direction = ORIGIN, buff = 0, aligned_edge = ORIGIN):
		rect1 = Rectangle(width = 0.4, height = 0.2, stroke_color = RED)
		rect2 = Rectangle(width = 1.5, height = 1.5, stroke_color = BLUE).move_to(np.array([2, 2, 0]))
		text = Text(str, font = 'Ubuntu', stroke_width = 6, font_size = 21).next_to(rect1, DOWN)
		tgt_point = np.array([2, 2, 0])
		self.add(rect1, rect2, text)
		self.wait(0.3)
		rect1.next_to(tgt_point, direction, buff = aligned_edge)
		self.play(Write(rect1))
		self.wait()
		self.remove(rect1, rect2, text)





```

以上。
初投稿

# 自己紹介
tanyと申します。以下に自分の経歴を簡単に記述しておきます。
- 高専化学系の学科(材料コース)を卒業
- 卒研はラズパイを用いた評価装置のプログラミング?
- 材料系企業の工場に勤務

# 使用したことがある言語
- Python
- C++
- VBA

# 投稿のキッカケ
就職してからPythonやVBAに触れる機会が多く、そこで知った知識のアウトプットのために投稿を始めることにしました。
(あわよくばこれからプログラミングを始める人たちの参考になればいいと思っています)

# 個人的な目標
- PythonやC++の習得
- 必要であればその他システム開発に必要な技術
- Qiitaの投稿を通して言語化能力の向上
- 知識のアウトプットを習慣化

# 業務における目標
### 長期目標
所属する部署における事務作業の削減
### 中期目標
年配社員でも分かりやすいシステムの開発
### 短期目標
- 実験に使用する薬品の在庫管理システム
- 実験日程管理システム
- サンプル評価結果の自動報告システム
Godot の core 開発のためによく使う VSCode の設定

何かの拍子に `.vscode` フォルダの中身が書き変わっちゃっててリストアするのに手間どったので個人的な備忘録としてメモしておきます。

# 構築する環境

- Windows 10（たぶん 11 でも同じ）
- C ドライブのユーザーフォルダに scoop で llvm-mingw をインストール
- `F14` と `F15` キーにビルドや起動のためのショートカットを割り当て

# 設定するファイル

### ${workspaceFolder}\\.vscode\\

※ 実行ファイル名（`godot.windows.xxx.xxx.xxx.exe`）は Godot 側のアップデート等で時折変更されるので注意

#### launch.json
```json
{
	"version": "0.2.0",
	"configurations": [
		{
			"name": "Launch",
			"type": "cppvsdbg",
			"request": "launch",
			"program": "${workspaceFolder}/bin/godot.windows.editor.x86_64.llvm.exe",
			"stopAtEntry": false,
			"cwd": "${workspaceFolder}",
			"environment": [],
			"console":"integratedTerminal",
		}
	]
}
```

#### tasks.json
```json
{
	"version": "2.0.0",
	"tasks": [
		{
			"label": "Build",
			"group": "build",
			"type": "shell",
			"command": "scons",
			"args": [
				"platform=windows",
				"target=editor",
				"-j",
				"<任意のスレッド数>",
			],
			"problemMatcher":"$msCompile",
		},
		{
			"label": "Docs",
			"group": "none",
			"type": "shell",
			"command": "${workspaceFolder}/bin/godot.windows.editor.x86_64.llvm.exe",
			"args": [
				"--doctool",
			],
		},
	]
}
```

#### c_cpp_properties.json
```json
{
	"configurations": [
		{
			"name": "Win32",
			"includePath": [
				"${workspaceFolder}/**"
			],
			"defines": [
				"_DEBUG",
				"UNICODE",
				"_UNICODE"
			],
			"compilerPath": "C:\\Users\\<ユーザー名>\\scoop\\apps\\llvm-mingw\\current\\bin\\gcc.exe",
			"cStandard": "c17",
			"cppStandard": "c++17",
			"intelliSenseMode": "windows-clang-x64"
		}
	],
	"version": 4
}
```

### C:\\Users\\<ユーザー名>\\AppData\\Roaming\\Code\\User\\

#### keybindings.json

```json
[
	{ "key": "f14", "command": "workbench.action.tasks.runTask", "args": "Build" },
	{ "key": "f15", "command": "workbench.action.debug.run", "args": "Launch" },
	{ "key": "ctrl+f15", "command": "workbench.action.tasks.runTask", "args": "Docs" },
]
```

これで `F14` キーで Godot をビルドして `F15` キーでプロジェクトマネージャーを起動、エディタの標準出力を VSCode のコンソールで見られる状態になります。また、`Ctrl` + `F15` でクラスリファレンスの雛形を出力できます（GDScript に公開したプロパティやメソッドがクラスリファレンスに欠けていると CI テストでこけるので機能追加とかの時に必須）。

# 余談

ちなみに `F13` はバグとかを録画して issue を送ったりするために常駐の NVIDIA ShadowPlay のショートカットを割り当てています。

ファンクションキーの多いキーボードは良いですね（ダイレクトマーケティング）

https://github.com/TokageItLab/Varanidae

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1196620/993ce338-22d4-a5a7-23f6-309dee484615.png)
単語帳作成苦労話

google translate を利用して単語帳を作ってた。
https://translate.google.com/

最近は、いろいろ不調。

regular expression compile failed: awk error(134)
https://qiita.com/kaizen_nagoya/items/5fbd0a1472e273a92026

単語を翻訳しようとすると、いくつかの課題が出るようになった。

Theではじまる単語列など文章にしやすい単語列を一文にしようとする。
２つの単語で一つの訳をつくろうとする。
うまく訳せないのはしらんぷり。
日本語の方に改行を入れて２行になる。

たとえば、

>FRICTION
KNOW
WORKING
THEM
DON
WOULD
THERE
OUT
UP
THAN
PLANNING
PLAN
BACKLOG
MOST
MANY
WERE
BETTER
DOING
HAD
THEN
WHICH
ONLY
PEOPLE
NO
WHY
DELIVER
DIFFERENT
THESE
COMPLEX
EVEN
IMPORTANT
DOMAIN
FEEDBACK
FRAMEWORK
DELIVERING
NEED
STAKEHOLDERS
WANT
BEFORE
BEST
MEANS
CUSTOMER
OFTEN
OTHER
MY
WHERE
MUCH
POSSIBLE
HE
ALSO
HELP
ONE
TOGETHER
SO
START
THINGS
DURING
SOMETHING
UNDERSTANDING
RIGHT
FEATURES
WITHOUT
COMMON
LET
NECESSARY
LIKE
RESULTS
SURPRISES
ACHIEVE
BASED
COULD
MAKING
FEATURE
FOG
FIGURE
INTENT
EVERY
DOESN
INFORMATION
ABLE
DEAL
BUSINESS
CHAPTER
VALUABLE
DISCOVER
EVERYTHING
JUST
TAKE
DOES
TOO
FOCUS
INTO
PROBLEM
PROBLEMS
DECISIONS
THREE
VE
ACTIONS
FIRST
LEARN
HAS
NEW
STYLE
THOSE

は、

>摩擦
知っている
作業
彼ら
計画
計画バックログ
ほとんどの
人々は
それよりも
うまくやっていた
なぜ
これらの複雑で
重要なドメインのフィードバック フレームワークを提供する必要があるのか​​
利害関係者が望む
顧客
多くの場合
他の
私
可能な限り
彼も
一緒に
助け合う
だから
始めよう物事

中

何か

理解

正しい
特徴

共通

必要な
結果

驚き

達成

ベース

特徴

霧

図

意図

すべて

情報

可能

取引

ビジネス

章

価値ある

すべて

発見

ただ

行う
問題

問題

決定

3つの

アクション

最初に

学ぶ

新しい

スタイル

それら
paizaラーニング問題集「【漸化式】 3項間漸化式1」を解いてみた

▼感想：

前の問題である 3項間漸化式1 を踏まえて
比較的簡単にコードを書くことができました。

▼コード：
```py
########## 処理0(準備) インプット,リスト定義など ###########

Q = int(input())

########## 処理1 漸化式の定義、計算 ##########

a = [1]*(40+1)

for i in range(3,40+1):
    
    a[i] = a[i-1] + a[i-2]

########## 処理2 入力kに応じた値を出力 ##########

for _ in range(Q):
    
    k = int(input())
    print(a[k])
```
paizaラーニング問題集「3項間漸化式1」を解いてみた

▼感想：

前の問題である 特殊な2項間漸化式1,2 を踏まえて
比較的簡単にコードを書くことができました。

▼コード：
```py
########## 処理0(準備) インプット,リスト定義など ###########

k = int(input())

########## 処理1 漸化式の定義、計算、出力 ##########

a = [1]*(40+1)

for i in range(3,40+1):
    
    a[i] = a[i-1] + a[i-2]

print(a[k])
```
paizaラーニング問題集「特殊な2項間漸化式2」を解いてみた

▼感想：

前の問題である 特殊な2項間漸化式1 を踏まえて
比較的簡単にコードを書くことができました。

▼コード：
```py
########## 処理0(準備) インプット,リスト定義など ###########

x,d_1,d_2 = map(int,input().split())
Q = int(input())

########## 処理1 漸化式の定義、計算 ##########

a = [x]*(1000+1)

for i in range(2,1000+1):
    
    if i % 2 != 0:
        a[i] = a[i-1] + d_1
    else :
        a[i] = a[i-1] + d_2

########## 処理2 入力kに応じた値を出力 ##########

for _ in range(Q):
    
    k = int(input())
    print(a[k])
```
統計学の基礎、データの変動性(範囲、中央値、四分位範囲、箱ひげ図、外れ値)をPythonで理解する

## 概要

データ分析において、データの分布や変動性を理解することは非常に重要です。本記事では、範囲、中央値、四分位範囲（IQR）、四分位数、箱ひげ図、そして外れ値について説明し、Pythonを使ってこれらの概念を実際に計算・可視化する方法を紹介します。文章とコードはすべてChatGPTo1-previewで書いています。

### 範囲 (Range)
範囲はデータの最大値と最小値の差で、データの全体的な広がりを示します。極端な値に敏感で、データセットに外れ値がある場合、その影響を大きく受けます。

例：学生のテストスコアが55点から95点までの範囲がある場合、範囲は95点 - 55点 = 40点となります。

### 中央値 (Median)

中央値はデータを小さい順に並べたときの中央の値です。データの中心的な傾向を示し、平均値と比べて外れ値の影響を受けにくい特徴があります。

例：データセットが[55, 65, 70, 75, 80, 85, 90, 95]の場合、中央値は77.5点（75点と80点の平均）です。

### 四分位数 (Quartiles)

四分位数はデータを4つの等しい部分に分割する値です。

第1四分位数 (Q1)：データの25%がこの値以下
第2四分位数 (Q2)：中央値、データの50%がこの値以下
第3四分位数 (Q3)：データの75%がこの値以下
四分位範囲 (Interquartile Range, IQR)

四分位範囲 (IQR)はQ3からQ1を引いた値で、データの中央50%の広がりを示します。外れ値の影響を軽減した分散の尺度として利用されます。

IQR = Q3 - Q1

### 箱ひげ図 (Box Plot)

箱ひげ図はデータの分布を視覚的に表現するグラフで、四分位数、中央値、範囲、そして外れ値を示します。データの分布や偏り、外れ値の有無を一目で把握できます。

### 外れ値 (Outliers)

外れ値はデータの大部分から大きく離れた異常な値です。一般的には、以下の範囲を超える値が外れ値とされます。

下限：Q1 - 1.5 * IQR
上限：Q3 + 1.5 * IQR

## コード全文

```python
# 必要なライブラリのインポート
import numpy as np
import pandas as pd
import matplotlib.pyplot as plt

# データの準備：学生のテストスコア
scores = [55, 60, 65, 70, 75, 80, 85, 90, 95]

# データをPandasのSeriesに変換
scores_series = pd.Series(scores)

# 範囲の計算
score_range = scores_series.max() - scores_series.min()
print(f"範囲 (Range): {score_range}点")

# 中央値の計算
median = scores_series.median()
print(f"中央値 (Median): {median}点")

# 四分位数の計算
Q1 = scores_series.quantile(0.25)
Q3 = scores_series.quantile(0.75)
print(f"第1四分位数 (Q1): {Q1}点")
print(f"第3四分位数 (Q3): {Q3}点")

# 四分位範囲の計算
IQR = Q3 - Q1
print(f"四分位範囲 (IQR): {IQR}点")

# 外れ値の境界の計算
lower_bound = Q1 - 1.5 * IQR
upper_bound = Q3 + 1.5 * IQR
print(f"外れ値の下限: {lower_bound}点")
print(f"外れ値の上限: {upper_bound}点")

# 外れ値の抽出
outliers = scores_series[(scores_series < lower_bound) | (scores_series > upper_bound)]
print(f"外れ値: {outliers.values}")

# 箱ひげ図の作成
plt.boxplot(scores, vert=False)
plt.title('学生のテストスコアの箱ひげ図')
plt.xlabel('スコア')
plt.show()
```

## 実行結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36629/a893938a-aecd-58ac-f64c-0b7567e22f41.png)

範囲 (Range): 40点
中央値 (Median): 75.0点
第1四分位数 (Q1): 65.0点
第3四分位数 (Q3): 85.0点
四分位範囲 (IQR): 20.0点
外れ値の下限: 35.0点
外れ値の上限: 115.0点
外れ値: []

## 注意点

このコードを実行するには、Python環境にnumpy、pandas、matplotlibがインストールされている必要があります。
グラフを表示するために、Jupyter Notebookや適切なIDEを使用してください。


## まとめ

このコードを通じて、学生のテストスコアデータの基本的な統計量を計算し、データの分布や変動性を理解する方法を学ぶことができます。データ分析の基礎として、これらの統計手法は非常に有用です。
paizaラーニング問題集「特殊な2項間漸化式1」を解いてみた

▼感想：

前の問題である 2項間漸化式1,2 を踏まえて
比較的簡単にコードを書くことができました。

▼コード：
```py

########## 処理0(準備) インプット,リスト定義など ###########

x,d_1,d_2,k = map(int,input().split())

########## 処理1 漸化式の定義、計算、出力 ##########

a = [x]*(1000+1)

for i in range(2,1000+1):
    
    if i % 2 != 0:
        a[i] = a[i-1] + d_1
    else :
        a[i] = a[i-1] + d_2

print(a[k])

```
RailsでGoogleチャットに自動通知！Webhookを使ってイベント情報を送信する方法

## 背景
社内でイベント用のグループ分けアプリを作成していましたが、作成されたグループの結果を社内のコミュニケーションツールであるGoogleチャットに自動で送信する必要がありました。手動でグループを確認する手間を省き、イベント管理を効率化するために、Googleチャットへグループ分け結果を通知する仕組みを実装しました。

この記事では、Googleチャットへメッセージを送信するメソッドをRuby on Railsのコードでどのように実装したかを紹介します。

## 目的
社内イベントアプリにおいて、グループ分けの結果をGoogleチャットに自動送信するロジックを実装し、スムーズにイベントを管理できるようにします。

## 事前準備
1. GoogleチャットのWebhook URLを取得

取得方法は下記を参考にしてください。
https://help.ovice.com/hc/ja/articles/16936394776473-Google-Chat%E3%81%B8%E3%81%AE%E9%80%9A%E7%9F%A5-Web%E3%83%95%E3%83%83%E3%82%AF%E3%81%AE%E5%88%A9%E7%94%A8

2. Webhook URLを環境変数に設定
Webhook URLをRailsアプリ内で使用するために、.envファイルに設定します。
```
GOOGLE_CHAT_WEBHOOK_URL=https://chat.googleapis.com/v...
```
※.envファイルがない場合は、新たに作成してください。環境変数の管理には dotenv-rails gem を使うと便利です。
```
# Gemfile
gem 'dotenv-rails'
```

## 実装
次に、Googleチャットへイベントのグループ分け結果を送信するメソッドを実装します。

1. メソッドの実装
以下のコードで、イベント情報を整形してGoogleチャットに送信するメソッドを定義します。
```

 def send_message_to_google_chat(event)
  # 環境変数からWebhook URLを取得
  webhook_url = ENV['GOOGLE_CHAT_WEBHOOK_URL']

  # グループとメンバー情報を整形
  group_details = event.groups.includes(:members).group_by(&:group_name).map do |group_name, groups|
    member_details = groups.map do |group|
      group.members.map { |member| "#{member.user.name}" }
    end.flatten

    "#{group_name}:\n" + member_details.join("\n")
  end.join("\n\n")

  # 送信するメッセージを整形
  message = {
    text: "新しいイベントが作成されました: #{event.title}\n\nグループ分けの結果:\n#{group_details}"
  }

  # HTTPリクエストを送信
  uri = URI.parse(webhook_url)
  header = {'Content-Type': 'application/json'}
  http = Net::HTTP.new(uri.host, uri.port)
  http.use_ssl = true
  request = Net::HTTP::Post.new(uri.request_uri, header)
  request.body = message.to_json

  # レスポンスを確認
  response = http.request(request)
  
  # レスポンスの確認
  if response.code == '200'
    puts 'メッセージがGoogle Chatに送信されました。'
  else
    puts "エラーが発生しました: #{response.body}"
  end
end
```

2. メソッドの呼び出し
イベントが作成された後に、グループ分け結果をGoogleチャットへ送信する処理を追加します。たとえば、イベントの作成やグループ分けが完了した後の箇所に以下のコードを追加します。

```
def create
 ///省略////

  # グループ分けのロジックが完了した後にGoogleチャットへ送信
  send_message_to_google_chat(event)

  redirect_to event_path(event), notice: 'イベントが作成されました。'
end
```
結果
イベントが作成されると、Googleチャットに次のようなメッセージが送信されます。

```
新しいイベントが作成されました: Event 2024

グループ分けの結果:
Aチーム:
User A
User B
User C

Bチーム:
User D
User E

```
このように、Googleチャットにリアルタイムでグループ分け結果が共有されるため、イベント参加者はすぐにグループの確認ができます。

## まとめ
この記事では、社内イベントアプリのグループ分け結果をGoogleチャットに自動で送信する方法を解説しています。GoogleチャットのWebhook URLを取得し、環境変数に設定した後、Railsでメソッドを実装してイベント結果を送信します。実装の目的は、手動での確認作業を効率化し、参加者がリアルタイムでグループ分け結果を確認できるようにすることです。結果的に、イベント管理が円滑に進むようになります。
株式会社いい生活のサマーインターンに参加してきた

# はじめに
株式会社いい生活さんのサマーインターンに参加してきたので、やったことや学んだことを書いていこうと思います。
株式会社いい生活について知りたい方・サマーインターンに参加したいと考えている方の参考になれば幸いです
## インターン概要
Reactと社内APIを用いてアプリケーション開発をするという内容でした。
ReactのフレームワークにはViteを用いていました。
その他に使用した技術は
- GitLab
- MUI
- Firebase  
- Figma
などです。
### 出社について
オンラインでも出社でも可でした。私は5日間すべて出社したのですが、会社の雰囲気を知ることが出来てよかったです。インターン自体は基本的にGatherやslackを用いて進めていくので出社しなかったら困るということはなかったように感じます。（私が参加したタームで出社した人は私だけでした）
# 全体の流れ
1日目　講義・チームを決めて要件定義
2日目～4日目　ひたすら開発
5日目　開発仕上げ・発表・振り返り
# 1日目
まずslackに集まり、Gatherという会議用のアプリの説明を受けました。Gatherはメタバース空間にZoomの機能を組み合わせたようなもので、チーム開発や講義をする際にとても便利でした。インターンでのコミュニケーションはGatherを用いて行われました。
- Gatherの概要

https://ja.gather.town/

そこからGatherを用いてGit,JS/TS,React,Firebase,社内API,チーム開発についての講義を受けました。slackで進捗管理を行ってくださったので、遅れて一人で困ってしまうことはなかったです。
わからないことはメンターさんにすぐ聞くことのできる環境があったように思います。
Reactについては、まったく触れたことがないより、すこし事前に勉強しておいた方が楽だと感じました。
講義が終わったらチームが発表され、チームに分かれて要件定義やペルソナ決めを行いました。1チーム3~4人で、各チームにメンターさんが二人ついていました。
私たちのチームではシニアをターゲットにしたアプリケーションを開発しようということになったので、ペルソナは以下のようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3815854/426731dc-43eb-c616-cf3b-b6adbbf79f9b.png)
アプリケーション概要をペルソナに沿って決め、大まかな画面をFigmaをもちいて作成しました。
アプリケーションについては、ユースケースを考え、MVP機能を3つに洗い出すことで、開発しなければならないものを明確にしました。
以下は作成したものです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3815854/e6156475-63ca-6f1d-8a18-4b507621d626.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3815854/16952f60-48aa-a778-bc31-e964c434034b.png)

# 2日目～4日目
2日目の最初にMVP機能をもとにGitLabをもちいてissue決めを行いました。GitLabのissue管理はチーム開発において「今誰が何をしているのか」が明確になるので、とてもいい機能だと感じました。
そこからは画面設計をもとに、ひたすら開発をしていきました。私はフロント部分を担当し、検索機能のUIやお問い合わせフォームを実装していきました。分からないことがあった時はメンターさんやチームメンバーに声をかけると快く対応してくださいました。開発期間では、MR、レビューしてもらう、マージをチーム内で完結させるので、親切なMRの出し方やレビューのやり方を学べました。チーム経験を積みたいと言う方にはとてもいいインターンだと感じました。チームメンバーの方々はフロントだけでなくバックエンドにも理解のある方が多く、私がバックエンドに詳しくなかったためとても助けられました。APIやFirebaseに関しては、開発経験のある方に任せてしまったので、事前にもっと勉強しておけば良かったなと考えています。
# 5日目
午前中まで開発、午後は14時まで発表準備に取り組み、14時から成果報告会が行われました。最終日は開発と言っても昨日の続きと少しUIを整えるくらいに考えていた方がいいと思います。私はページの紐付けとLPページの作成を行いました。
そして開発が終わったあと、発表準備に取り掛かりました。1時間しか準備する時間がなかったのですが、その割には良い発表が出来たのかなと思います。余裕があれば午前中から発表準備に取り組んでもいいかもと思いました。14時からの成果報告会は、各チーム20分で作ったサイトの説明を行うものでした。どのチームもそれぞれの強みや面白さがあり、聞いていてとても学びになりました。
成果報告会が終わったら、各チームでFigmaを用いて振り返りを行いました。私たちのチームでは出来たことに「スムーズに質問をすることが出来た」、反省点に「雑談などのコミュニケーションが取れなかった」が挙げられました。このような反省がでてきたものの、メンターさんには「開発に必要なコミュニケーションは取れていた」と言って頂き嬉しかったです。
# 感想
結果的に、3つあるMVP機能のうち、1つは内容を変え実装、2つは途中まで実装を行うことが出来ました。せっかくなら完全に実装したい、という気持ちはありますが、ある程度形になったサイトを作ることが出来たので、個人的には納得しています。技術力を向上させることができ、チーム開発も経験することができてとても充実した5日間でした。サマーインターンに行くか迷っている方は是非行ってみて欲しいです。
# 事前にやっておいた方がいいもの
開発をする中で、「これやっとけばよかったな〜」と思うことがあったので、やっておけば良かったことをここに書いておきます。
- Reactについての勉強
useStateやuseEffectなどの理解ができ、実際に使うことが出来ればいいと思います。また、カスタムフックの作成などできれば開発で困ることはないように感じました。
- API,Firebaseについての勉強
API,Firebaseがなんなのかをあまり勉強していなかったので苦戦しました。YouTubeなどの動画を見てAPIやFirebaseを使ってなにか実装していれば良かったな〜と思いました。
また、事前に配布される資料があるので、それを徹底的に読み込んでおくのもやるべきだったな、と思いました。

株式会社いい生活さんのHP

https://www.e-seikatsu.info
サーバーをまたいでPHPからnode.jsを動かすサンプルコード

## 備忘録メモとして
レンタルサーバーに設置したフロントエンドから、別サーバー（VSP）に置いてあるNode.jsを動かしてデータを返すサンプルコード

テスト環境：XAMPP

### ファイル構成
```
サーバー1（レンタルサーバー）
C:\xampp\htdocs\test1
call_run_node.php
index.php

サーバー2（VPSサーバー）
C:\xampp\htdocs\test2
run_node.php
script.js
```
サンプルでは特に外部モジュールを使用していませんが、必要なモジュールがあればサーバー２側にインストールします。

## サーバー１
index.php：フロントエンド表示部分と実行ボタン
```php
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>サーバー2のNode.jsを実行</title>
</head>
<body>
    <h1>サーバー2のNode.jsを実行</h1>
    <button id="runNode">Node.jsを実行</button>

    <div id="result"></div>

    <script>
        document.getElementById('runNode').addEventListener('click', function() {
            fetch('call_run_node.php')
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        document.getElementById('result').innerHTML = 'Node.jsの実行結果: ' + data.message;
                    } else {
                        document.getElementById('result').innerHTML = 'エラー: ' + data.message;
                    }
                })
                .catch(error => console.error('エラー:', error));
        });
    </script>
</body>
</html>
```
call_run_node.php：サーバー2のNode.jsを呼び出す
```PHP
<?php
$data = array('message' => 'Hello from server 1');
$json_data = json_encode($data);

// サーバー2のPHPファイル
$ch = curl_init('http://localhost/test2/run_node.php');

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));
curl_setopt($ch, CURLOPT_POSTFIELDS, $json_data);

$response = curl_exec($ch);

if (curl_errno($ch)) {
    echo json_encode(array('status' => 'error', 'message' => 'cURLエラー: ' . curl_error($ch)));
} else {
    echo $response;
}

curl_close($ch);
?>
```
## サーバー２
run_node.php：サーバー１との中継・命令を受け取りNode.jsを実行させサーバー１にデータを返す
```PHP
<?php
$request_body = file_get_contents('php://input');
$data = json_decode($request_body, true);

if (isset($data['message'])) {
    // Node.jsスクリプトを実行
    $output = shell_exec('node C:/xampp/htdocs/test2/script.js');

    // 実行結果を返す
    echo json_encode(array('status' => 'success', 'message' => $output));
} else {
    echo json_encode(array('status' => 'error', 'message' => '無効なデータが送信されました'));
}
?>
```
script.js
```js
console.log('Node.jsが正しく実行されました！');
```

以上