OmniAICreator/Qiita-1.07M huggingface dataset:
小学四年生がUnityで脱出ゲーム作ってみた。

**はじめに**
こんにちは。
今は中学一年生のikkun084です。
今回は僕が小学四年生の時に作った脱出ゲームを紹介します。
あまり上手ではないかもしれませんが、温かい目で見てください。

**脱出ゲーム**
それでは実際のプレイ時の画像と概要を説明していきます
↓URL ＊音が出ます
https://unityroom.com/games/ikkun0002

↓スタート画面
![スクリーンショット 2023-04-20 19.40.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335275/7fc5ed78-fec9-3024-919d-50c0a14fbdfc.png)
STARTを押すとゲームが始まります。
![スクリーンショット 2023-04-20 19.42.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335275/a42f3df4-6a87-dbbb-2ea0-13fb9e4646d4.png)
左右のボタンを押すことで、画面が切り替わります。
![スクリーンショット 2023-04-20 19.46.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335275/aa309c6e-c134-1c81-2ed2-75b39b34c6f8.png)怪しげなボタンが置いてあります。（押すなよ！絶対に押すなよ！）
![スクリーンショット 2023-04-20 19.47.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335275/311433bc-4b73-eb42-b76c-bc266311cc93.png)
大きな金庫が置いてあります。
![スクリーンショット 2023-04-20 19.48.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335275/8657e03c-cbcb-2276-6d0a-2914229ce35b.png)
ケーブルがちぎれています

画面上にある様々なものをマウスでクリックすると、画面の下に文字が出てきます。
↓ドアをクリックした時
![スクリーンショット 2023-04-20 19.50.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335275/d72ce56b-1a50-3298-1b95-45273b2186d1.png)
色々な場所をクリックしてみると、ヒントが手に入ったり、画面が変化したり、アイテムが手に入ったりするので、それらを駆使して、扉を開くとゲームクリアになります。
実際に何が起こるかは、実際にプレイして、自分の目で確かめてみてください
↓URL ＊音が出ます
https://unityroom.com/games/ikkun0002

**参考にした本**
作るときには、次の本を参考にしました。
![jgvmNUxs0ZK2BYq1681988924_1681988957.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335275/2c0fa2aa-c7c4-4c56-4a48-aed86fde8d08.jpeg)
この本を読むと、Unityのインストールから始めることができ、脱出ゲームの他に、放置ゲームや、サイドビューアクション、パズルゲームなどの作り方や、基本的な用語の説明などがわかりやすく載っています。
**終わりに**
次は、Unityをつかった3Dのゲーム作りや、こーじさんというYoutuberがやっている3Dシミュレーションにも挑戦してみたいです。

↓こーじさんのチャンネル　＊音が出ます
https://www.youtube.com/channel/UCrkqNT0_Fd5_TIWdjey6K0A
git pushでusername・passwordを求められた時

## githubに草が生えずpush時に下記を求められた。


```
Username for 'https://github.com': アカウント名
Password for 'https://Username@github.com':パスワード
remote: Invalid username or password.
fatal: Authentication failed for 'https://github.com/アカウント名/ディレクトリ名.git/'
```

## 解決法

https://qiita.com/Cychow/items/cb2d6ce8e15377eb7d29

上記記事にて解決に至りました。

コードの編集は
### viキー
を使用して行う.
地図学の地平を広げる - Expand horizons of cartography

UN Open GIS Initiative の DWG 7 on Smart Maps で行っていることは何か、ということを考えた時に、それは

## 地図学の地平を広げる - Expand horizons of cartography

ということなのではないかと思いました。Smart Maps が使う技術はウェブ地図の技術ですが、地図学の知識を継承し、拡張するものであるし、そうあるべきものです。

あなたはどう思いますか。
ArgumentException: Illegal byte sequence encounted in the input.が出た時の対処法

**ArgumentException: Illegal byte sequence encounted in the input.**

このエラーが出てくることってあまりないのですが、それゆえに対処法などの記事が少ないです。

今回私はこのエラーに苦しんでなにが原因なのか探った結果、解決法がわかったので共有します。

# まさかのPC本体の名前のせいだった

そうなんです。パソコン使いたての初心者だった過去の私がPC本体の名前をひらがなで設定していたのが原因だったのです。

その名前をローマ字に直したらエラーは治りました…笑

このエラーってなんか対応してない文字(全角文字とかそれこそひらがなとか)がファイル内にあるせいでファイルをよい込めないよ～みたいなエラーらしいので(たぶん)、ファイルの名前を確認したりいろいろ見直したのですがPC本体の名前は落とし穴でした…。

PC本体の名前の変え方は

コントロールパネルを開く

ユーザーアカウントを開く

アカウント名の変更

で変えられます。

それでも名前変わらない！とかあったらすみませんがPC本体の名前の変え方を自分で調べてみてください…！
【Unity】使用可能なポート番号をインスペクターに一覧表示するAttribute

# はじめに
   シリアル通信を行う際などに使用可能なポート番号がInspectorで一覧表示されたら便利だと思い実装しました。 
# 実装
``` SerialPortNameAttribute.cs
using UnityEngine;

public class SerialPortNameAttribute : PropertyAttribute
{}
```


``` SerialPortNameEditor.cs
using System.Collections.Generic;
using System.IO.Ports;
using System.Linq;
using UnityEditor;
using UnityEngine;

[CustomPropertyDrawer(typeof(SerialPortNameAttribute))]
public class SerialPortNameEditor : PropertyDrawer
{
    public override void OnGUI(Rect position, SerializedProperty property, GUIContent label)
    {
        List<string> ports = SerialPort.GetPortNames().ToList();
        ports.Sort((a,b) =>
        {
            return int.Parse(a.Replace("COM", "")) - int.Parse(b.Replace("COM",""));
        });
        
        int curPortIndex = 0;
        for (int i = 0; i < ports.Count; i++)
        {
            if (ports[i].Equals(property.stringValue)) curPortIndex = i;
        }
        
        curPortIndex = EditorGUI.Popup(position,"PortName",curPortIndex,ports.ToArray());
        property.stringValue = ports[curPortIndex];
    }
}

```

# 使い方
ポート番号を取得したいstring型のフィールドに```[SerialPortName]```を付与してください。
※ ```private```なフィールドの場合は```[SerializeField]```も同時に付与してください。
```cs:記述例
[SerializeField,SerialPortName]
private string portName;
```
  
**使用イメージ** 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503642/bea69ab0-4cf5-08f1-a99e-d750c08d3177.png)
【Filament 2.x】ダッシュボードのテーブル名を書き換える

## 概要

https://filamentphp.com/docs/2.x/admin/dashboard/tables

Resourceクラスであれば、`$modelLabel`プロパティで書き換えられますが、ダッシュボードのテーブル名の書き換え方が分からなかった。

```php:app/Filament/Resources/StoreResource.php
protected static ?string $modelLabel = '店舗';
```


## 解決法

`heading`プロパティで書き換える。

```php:app/Filament/Widgets/Stores.php
class Stores extends BaseWidget
{
    protected static ?string $heading = '店舗';
```


## 備考

継承元のBaseWidgetクラスに`$heading`がnullならクラス名そのまま使うみたいな処理が書いてあるが
これドキュメントのどこに書いてあるんだろう？誰か教えてクレメンス

```php
class TableWidget extends Widget implements Tables\Contracts\HasTable
{
    use Tables\Concerns\InteractsWithTable;

    protected static string $view = 'filament::widgets.table-widget';

    protected static ?string $heading = null;

    protected function getTableHeading(): string | Htmlable | Closure | null
    {
        return static::$heading ?? (string) Str::of(class_basename(static::class))
            ->beforeLast('Widget')
            ->kebab()
            ->replace('-', ' ')
            ->title();
    }

    protected function paginateTableQuery(Builder $query): Paginator
    {
        return $query->simplePaginate($this->getTableRecordsPerPage() == -1 ? $query->count() : $this->getTableRecordsPerPage());
    }
}
```
VSCODEの感動した機能 Remote Dev

# はじめに

備忘録なので詳しいことは参考サイトからお願いします。

別PCのディレクトリをSSH経由で接続していじったりできる＜－すげぇ

# 方法

VSCodeを立ち上げて拡張機能`Remote Development`をインストールする。

管理者PowerShellを開き以下のコマンドで有効にする

```
> Set-Service ssh-agent -StartupType Automatic
> Start-Service ssh-agent
> Get-Service ssh-agent
```

F1で起動するやつから`Remote-SSH:Open Configuration File...` を開いて案内通りにする


# 参考

https://create-it-myself.com/know-how/connect-remote-server-in-vscode/
Are you searching for the best laparoscopic surgeon in Gwalior?

If yes, your struggle is over, and Dr. Archna Gyoal is the best choice for this role. They have two plus years of experience as laparoscopic surgeons in Gwalior. They perform 100 plus laparoscopic surgeries.

To read more :- https://primespecialityclinic.org/laparoscopic-surgery/
Elixirで「ずんだもん」を喋らせよう

Elixirで「ずんだもん」を喋らせたいと一度は思ったことありますよね？
と言うことで実践

## 前提条件
・OS： Ubuntu 22.04(実機)
・VOICEVOXのLinux版を予めインストール済みであること
・VOICEVOXが起動済みであること

https://voicevox.hiroshiba.jp/

VOICEVOXのLinux版が動かない場合FUSEが必要

https://github.com/AppImage/AppImageKit/wiki/FUSE

## ソース作成


プロジェクトの作成
```
$ mix new voi
$ cd voi
```

:req, "~> 0.2.1" を追加

```diff_elixir:mix.exs
defmodule Voi.MixProject do
  use Mix.Project

  def project do
    [
      app: :voi,
      version: "0.1.0",
      elixir: "~> 1.14",
      start_permanent: Mix.env() == :prod,
      deps: deps()
    ]
  end

  # Run "mix help compile.app" to learn about applications.
  def application do
    [
      extra_applications: [:logger]
    ]
  end

  # Run "mix help deps" to learn about dependencies.
  defp deps do
    [
+      {:req, "~> 0.2.1"}
      # {:dep_from_hexpm, "~> 0.3.0"},
      # {:dep_from_git, git: "https://github.com/elixir-lang/my_dep.git", tag: "0.1.0"}
    ]
  end
end
```

voi.exsを下記に上書きする
```Elixir:lib/voi.exs
defmodule Voi do
  @moduledoc """
  Documentation for `Voi`.
  """

  @doc """
  Hello world.

  ## Examples

      iex> Voi.hello()
      :world

  """
  def hello(text) do
    param = URI.encode_query(%{text: text, speaker: 1})

    json =
      ("http://localhost:50021/audio_query?" <> param)
      |> Req.post!("")
      |> Map.get(:body)
      |> Jason.encode!()

    headers = ["Content-Type": "application/json"]

    data =
      "http://localhost:50021/synthesis?speaker=1"
      |> Req.post!(json, headers: headers)
      |> Map.get(:body)

    File.rm("hoge.wav")
    File.write("hoge.wav", data)
    System.cmd("aplay", ["hoge.wav"])

    :world
  end
end

```

## 動かしてみる

iex 起動
```
$ mix deps.get
$ iex -S mix
```

Voi.hello関数を実行する
```
iex> Voi.hello("こんばんは、ymnなのだ")
```

ずんだもんが喋りました

## 補足
未検証ですが
```Elixir
System.cmd("aplay", ["hoge.wav"])
```
のaplayをOSごとにて適切なWav再生コマンドに置き換えれば他のOSでも動くかも
VOICEVOXは、Windows、Mac対応しているようです


## 実行動画

<iframe width="560" height="315" src="https://www.youtube.com/embed/CUCh0rQx4vE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
ios16.4で体験する  Web Push入門

# 初めに

しばらく何も書いてませんでしたが、ネタが出来たのでやってみました。
いつもと同じく備忘録

完成物
https://github.com/TakuyaShirosaka/webPushSampleApp

WebアプリはNuxt3をベースにしています。
PWAのマニフェストに使うアイコンや、後述するOneSignalの準備は各々でよろしく。

# 何これ
iosでのWebPushを感じるために作ってみました。

先に結果を見せるとこんな感じです。
![MicrosoftTeams-image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309466/ff63e467-f7c2-b22a-dc07-9dde6c6eeb1e.png)

![S__306266115.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309466/449b4489-93d7-9299-41ac-3fa9f287a762.jpeg)

※知り合いに試してもらったら大変ダルそうにしていました。

# 仕組み
こういう記事は大体FCMが出てくるかもですが、
今回はOneSignalというサービスを使っています。(無料プランもあるよ)
https://onesignal.com/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309466/bc71afb2-60d2-5c89-56e9-22bd984c1bf4.png)


# 大変だったこと、主にOneSignal
・導入にあたってWebQuickStart → Vueの手順で進めましたが、
Nuxt3でOneSignalのSDKをどう読み込ませるのが正解なのか苦悩した。
https://documentation.onesignal.com/docs/vue-js-setup

あとWebの設定途中に出てくるこのスクリプトタグを読み込むのを入れると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309466/6734d901-29bb-583c-d01f-9d34faa31794.png)
```shell
window.onesignal already defined as 'function'!　～～～～
```
ってコンソールにエラーが出力されました。
(この手順をSkipしてもその後の動作には問題なかったです。)

SDKの初期化はpluginsフォルダにOneSignal.tsを作りそこで実行してやりました。
```OneSignal.ts 
import OneSignalVuePlugin from '@onesignal/onesignal-vue3';

export default defineNuxtPlugin({
    hooks: {
        // You can directly register Nuxt app hooks here
        'app:mounted'() {
            const nuxtApp = useNuxtApp()
            nuxtApp.vueApp.use(OneSignalVuePlugin, {
                appId: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
            })
        }
    }
})
```

プラグインをページ側で使うのはこんな感じ
```index.vue
<script setup lang="ts">
onMounted(() => {
    const globalProperties = useNuxtApp().vueApp.config.globalProperties;
    console.dir(globalProperties.$OneSignal);
    globalProperties.$OneSignal.on("subscriptionChange", function (isSubscribed) {
        console.log("The user's subscription state is now:", isSubscribed);
        alert("The user's subscription state is now:" + isSubscribed);
    });
})
</script>
```
(vueApp.useしたやつがglobalPropertiesに入るみたい)

# 気になったこと

・safariは受信時の振動機能が未実装？(スマートウォッチと連携してればそっちで振動はする)
https://developer.mozilla.org/ja/docs/Web/API/Notification
→Notification.vibrateがiosはまだ×になってる

・ブラウザによって通知のアイコンや画面の雰囲気などカスタムできる幅が異なる
→まぁ仕方ない
[windows]Laravel sailでの環境構築～git cloneして再現確認まで

Laravel+xamppで簡単なアプリ作成をしてみたが、ちゃんと開発するならdockerを使うのが一般的らしい
→sailってやつで比較的簡単にdockerを使えるらしい
→どこが簡単やねん！となりまくったので備忘録

# 環境
Windows10
VScode
docker desktopをインストール済

基本的にVScode経由でpowershellを操作


# プロジェクト作成ができない
https://laravel.com/docs/9.x/installation#getting-started-on-windows
公式ドキュメントの通りに進めたかった。
LinuxというPowershellの亜種みたいなの使わないといけないらしい(という認識)、ほーん…

`wsl --install`、よし、これでプロジェクト作成できるな！

```:powershell
curl.exe -s https://laravel.build/example-app | bash
Processing fstab with mount -a failed.

<3>WSL (83) ERROR: CreateProcessEntryCommon:370: getpwuid(0) failed 2
<3>WSL (83) ERROR: CreateProcessEntryCommon:374: getpwuid(0) failed 2
<3>WSL (83) ERROR: CreateProcessEntryCommon:577: execvpe /bin/bash failed 2
<3>WSL (83) ERROR: CreateProcessEntryCommon:586: Create process not expected to return
```

→そもそも必要なもの(ディストリビューション)が足りていなかった
Microsoft StoreからUbuntuをインストール。

```:powershell
wsl.exe -s Ubuntu
```
で`～| bash`系のコマンドをUbuntuで実行するように設定する。
`wsl`でUbuntuの中に入って実行したらいけるらしい？

~~Ubuntuが必要とか公式ドキュメントになかったぞ！~~

```:WSL
curl.exe -s https://laravel.build/example-app | bash
```
プロジェクトが作成できた。次はsail upだ！

```:WSL
cd example-app && ./vendor/bin/sail up
-bash: ./vendor/bin/sail: No such file or directory
```
→Dockerと連携できていなかった。Docker desktopを起動後、
resourceのところからUbuntuにチェックを入れて、
作ったプロジェクトを削除して再度`curl～`を実行
正直ここまでに一番時間がかかった

最初の最初に打つコマンドでエラー出ても解決してくれる記事は少ない


# Linuxﾅﾆﾓﾜｶﾗﾅｲ
## 色々遅い
WSLがwindowsにマウントしてwindowsが……お互いに読み込みあうから時間かかるらしい(?)
WSLの中にフォルダを作ったら一方向に絞れるから早い、なるほど

## パーミッションってなに？
CLIでの操作慣れてないしGUIでやっちゃお
エクスプローラーからLinux->Ubuntu->homeまで開いてlaravel-pjって名前のフォルダ作って～
「この操作を実行するアクセス許可が必要です」

？？？？？

パーミッション(権限)の関係でターミナルからUbuntu内でやれってことっぽい、しゃあねえな…
UbuntuのファイルパスとかググってCLIからプロジェクト作成

```:WSL
sail artisan breeze install
```

とりあえず最低限のひな型はできたかなってことでgithubにプッシュ


# Git clone

https://qiita.com/Gro/items/38103dda7aa5fb37eb64

こんな記事を見かけて、気になったのでやってみた。
上の記事では、`sail up`を`composer install`の前に実行できるように
vendorを.gitignoreから外すことで対応している。
vendorディレクトリがgit hubにあるの気持ち悪いけど簡単なのは上のやり方。


https://github.com/pop-culture-studio/articles/blob/main/laravel-installation-windows.md

一方で、そもそもUbuntuにcomposerなどをインストールするやり方もあり、
こちらの方が依存パッケージをgit hubに上げない点で丁寧なのかなと思う。
環境を揃えるためのDockerなのに結局個人単位でインストールするのなんだかな～って気もする。

基本的にこれに書いてある範囲で当てはまることをすれば良いが、何のためにそのコマンドを打っているのかは少しでも調べながらやるべきではある。

「Laravelは初心者向けじゃない」、明らかに初心者にはオーバースペックだし学習コスト高くない？って感じる部分もあるが、初心者にとっては「教材豊富」「理解してなくてもとりあえず真似したら動く」の要素は結構大きいのでLaravelを選択するのも間違いではないよな、と思う。

~~真似したら動くはずがプロジェクト作成だけに2日かかったの思うと間違ってるんじゃないか？~~



## パーミッションまわり
git cloneできないんだけど！とかはこれが原因なことが多い。
`ll`コマンドで権限の確認ができる。

簡単な方法(≠正しい方法)
とりあえずこうやればできたよ、を書いていく
```:WSL
sudo git clone
```
sudoコマンドでgit cloneは通るようになる

`composer update`とかでsudo使うな！って警告出されるのと、
このままだとgitがファイルの差異とかを認識できない。

なので、chmodコマンドで権限を書き換える。
example-appの中身に対して再帰的に権限を書き換えることでgitもうまくいく…はず
```:WSL
~/laravel-pjs/example-app $cd ..
~/laravel-pjs $ chmod -R 777 example-app
```
ただし777は結構リスクもあり、ルートディレクトリでやるとエラーの原因になるらしい

https://n-guitar.hatenablog.com/entry/2020/11/13/135207




# まとめ
(windows cmd/powershellのみを使ってきた人間にとって)sailは簡単じゃない。
多少なりLinuxの理解を求められるため。

とりあえず使って動くことを確認する、という目標は達成できたが、結局dockerのイメージとかcompose.ymlの書き方は何もわからないままなので、また改めて勉強する必要はある。
CloudFormation Resourceに複数!Subを設定する

Mappingsで定義したパラメータをResourceで使いたい。リソースは複数。

```php
Resource: !Sub
  - "arn:aws:s3:::${BucketName}"
  - BucketName: !FindInMap
    - S3Bucket
    - !Ref Env
    - Name
```

↑に続けて `"arn:aws:s3:::${BucketName}/*"` を設定したいけど、色々試してみるもテンプレートエラーが出る…

どうにもならないので、会社の技術質問チャンネルに投稿！

# 解決

一瞬で解決。正解を教えていただきました。

（Fさんありがとうございました！）

**抜粋**

```php
Resource:
  - !Sub
    - "arn:aws:s3:::${BucketName}"
    - BucketName: !FindInMap
      - S3Bucket
      - !Ref Env
      - Name
  - !Sub
    - "arn:aws:s3:::${BucketName}/*"
    - BucketName: !FindInMap
      - S3Bucket
      - !Ref Env
      - Name
```

**ファイル全文**

```php
AWSTemplateFormatVersion: 2010-09-09

Parameters:
  Env:
    Type: String
    Default: stg
  Region:
    Type: String
    Default: ap-northeast-1

Mappings:
  S3Bucket:
    stg:
      Name: "test-bucket-stg"
    prod:
      Name: "test-bucket-prod"

Resources:
  TestRole:
    Type: AWS::IAM::Role
    Properties:
      AssumeRolePolicyDocument:
        Version: "2012-10-17"
        Statement:
          - Effect: Allow
            Principal:
              Service:
                - ec2.amazonaws.com
            Action:
              - 'sts:AssumeRole'
      Policies:
      - PolicyName: test-s3-bucket-read-only-access
        PolicyDocument:
          Version: "2012-10-17"
          Statement:
          - Effect: Allow
            Action:
              - "s3:ListBucket"
              - "s3:GetObject"
            Resource:
              - !Sub
                - "arn:aws:s3:::${BucketName}"
                - BucketName: !FindInMap
                  - S3Bucket
                  - !Ref Env
                  - Name
              - !Sub
                - "arn:aws:s3:::${BucketName}/*"
                - BucketName: !FindInMap
                  - S3Bucket
                  - !Ref Env
                  - Name
      RoleName: !Sub "${Env}-test-role"
```

`!Sub`にぶら下げるという発想がなかった。

# NG集

```php
Resource:
  - !Sub "arn:aws:s3:::${BucketName}"
  - BucketName: !FindInMap
    - S3Bucket
    - !Ref Env
    - Name
  - !Sub "arn:aws:s3:::${BucketName}/*"
  - BucketName: !FindInMap
    - S3Bucket
    - !Ref Env
    - Name
```

```php
Resource: !Sub
  - "arn:aws:s3:::${BucketName}"
  - BucketName: !FindInMap
    - S3Bucket
    - !Ref Env
    - Name
  - "arn:aws:s3:::${BucketName}/*"
  - BucketName: !FindInMap
    - S3Bucket
    - !Ref Env
    - Name
```

```php
Resource:
  - !Sub "arn:aws:s3:::${BucketName}"
  - !Sub "arn:aws:s3:::${BucketName}/*"
  - BucketName: !FindInMap
    - S3Bucket
    - !Ref Env
    - Name
```

```php
Resource: !Sub
  - "arn:aws:s3:::${BucketName}"
  - "arn:aws:s3:::${BucketName}/*"
  - BucketName: !FindInMap
    - S3Bucket
    - !Ref Env
    - Name
```

いろいろムダに試行錯誤してしまった…

# 最後に

同じく困っている方（私だけ？）の助けになれば幸いです。

今回教えてくださった方は別のグループで
面識があまりないやつにも親切に教えてくれる、
そういう方々ばかりで改めていい会社だなあと思いました。感謝。
【Rails】git push ができない

## はじめに
いつも通りgit pushしたらエラーが発生して実行できませんでした。
同じことが起きた人のメモになればと思い、対処法を書き残します。

## 起こったエラー

```
$ git push origin master
To https://github.com/my_app
 ! [rejected]        master -> master (fetch first)
error: failed to push some refs to 'https://github.com/my_app'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
```

## 原因
push予定のコミットをする前に、リモートのgithubを編集していたこと。
私はwebサイトで作成したER図を直接リモートgithubに追加していました。

## 解決
**方法①**
`git pull origin develop`でリモート環境をpullした後、再度pushする。

**方法②**
`git fetch`した後、mergeする。

**方法③**
`git push --force`で強制的にpushする。

個人開発やチーム開発などによる状況によって使い分けるのがよさそうですね。

## 参考
[【git】error: failed to push some refs to "URL"のエラー対処法](https://qiita.com/chiaki-kjwr/items/118a5b3237c78d720582)
Unity上でNays2DHの計算結果を3D表示する【開発記録 vol.2】

# はじめに
表題の通り、iRIC Nays2DHの計算結果をUnity上で3D表示できるようにしよう！
という個人的なプロジェクトの開発記録です。

まずは3か月で、iRICのように時間毎の計算結果を切り替えられるようにすることが目標です。
（かなり雑ではあるが、実はもう達成してしまった）

ちなみに前回は、開発した内容をギュッと詰め込んで書きましたが、
今回からは1記事1テーマで進めていきます。
（1記事の中に複数のテーマが入っていると読みにくいし）

前回はこちらです。

https://qiita.com/nkmr_RL/items/e47cc15863fecf1daf86

# 現状の共有
出力時間毎の水面モデルをUnity上で一つずつ切り替えられるようになりました。
gifではstep1～4の水面を手動（キーボード）で切り替えています

![Animation1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1147458/2d477906-abcd-6b1b-4663-07ae656f6dd2.gif)

いきなりstep1とか言ってしまいましたが、
step1がiRICの結果出力開始時間で、あとは出力時間毎に1ずつ増えていくイメージです。

例えば計算条件が下図の設定だった場合、
step1=0s、step2=600s、step3=1200s...といった感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1147458/a9e9c31e-4b2f-751f-dd52-d9617cf11d06.png)

今回の記事では、上記の状態を実現するために必要だった

**「水位の結果を一つのOBJファイルにまとめる」**

ことについて、解説していきます。

# 水面モデルは一つのOBJにまとめる
## まとめる理由
まとめる理由は以下の二つです。
- 計算ファイルの数が膨大にならずに済む（その分、一つが重くなるが）
- Unity上でスクリプトを定義できるのはオブジェクトごと（な気がする）

一つ目は単純な話で、前回までの出力方法だと計算時間毎に
OBJファイルが出力されてしまうため、一つの計算に対してOBJファイルが大量に
出力されるようになっていました。

そのため、Unity上で可視化する場合も全てのファイルを読み込む必要があり
結構手間でした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1147458/564d11bc-9239-f770-9ff8-308fa9f47c83.png)

二つ目の理由は、一旦スルーします。次回、スクリプトのかけ方を説明する際に
一緒に書こうと思います。

## OBJファイルの構成
一つのOBJファイルに複数のモデルをまとめるためには、
OBJファイルの構成を知っておく必要があります。

OBJファイルの基本構成については以下で細かく説明されているので
まずはこちらをお読みください。

https://www.hiramine.com/programming/3dmodelfileformat/objfileformat.html

上記のページで説明されている通り、OBJファイルは以下の構成になっていて、
**一つのOBJファイル内に複数のグループを持つ**ことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1147458/ea78dbe5-2eb0-a681-0397-bcc570264e4f.png)

そのため、今回の改修ではOBJファイルを一つだけ作り、
**時間毎の計算結果はグループとして分ける**ことにしました。

## 躓いた箇所
一つのファイルにまとめる場合、一点気にしなければならないことがあります。

OBJファイルで面を定義するには、頂点座標の番号を指定する必要があります。
この頂点座標の番号は、**OBJファイル内で**定義された順番なので
グループが変わっても、番号はそのまま連番で増えていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1147458/8ca066d6-2269-0dd0-f161-f9dcec886dbe.png)

別ファイルで出力する場合は、毎回「1～格子点の数」の番号を指定すれば良かったのですが、
一つにまとめる場合はその値に「ステップ数 × 格子点の数」を加える必要があります。

最初、ここに気づいておらず、全計算結果が初期と同じ水面になり困惑しました。。。

## 変換プログラム
ということで、上記内容を踏まえて改修したプログラムが以下です。
MITライセンスにしていますが、*iRIC_class*モジュールを公開していないので
残念ながら、まだ使える状態ではないです。

https://github.com/nakamori1024/cgns2obj_nays2dh

*iRIC_class*モジュールもそのうち公開するつもりですが、
しばらくはお待ちください。（readme書いたりがめんどくさい...）

もし使いたい方がいらっしゃれば、お声がけください。
前回みたいにexe化して渡すとか、対応を考えます。

# おわりに
vol.2は「水面モデルを一つにまとめた」という報告でした。

次回は、今回まとめた水面モデルをUnity上で表示して
キーボード操作で表示する水面を切り替えるスクリプトを設定するところまで
解説したいと思います。

# （自分用）やりたいことのメモ
- Game画面でマウスによる視点移動をできるようにしたい
- 流速をパーティクルで表示したい
- PLATEAUの建物を表示したい
- 水面のシェーダーを流速と合わせたい
Cloudflare+GitHubPages設定

Name Serverを Netlify -> Cloudflareに変更したときに色々ハマったので設定した内容の雑なメモ

## レジストラにNameServerを設定

自分のドメインのレジストラはムームードメインで、ここにいままでNetlifyのNameServerの設定をしていた分をCloudflareに差し替える

```
Type	Value
NS	jake.ns.cloudflare.com
NS	kia.ns.cloudflare.com
```

## レコード設定｜ルートと`www`

CNAMEとAのレコードを設定する。ルートとwwwについて、ぐぐった限りだと複数の記事でそれぞれ設定方法が違ったのでいくつかの方法がありそう？

ただ、自分の場合`www`が下記のケースでないとうまくいかなかった。

```
Type Name Content ProxyStatus
A www 192.0.2.1 Proxied
CNAME <わいのドメイン>.com <cloudflareのドメイン>.pages.dev Proxied
```

## レコード設定｜サブドメイン

- tl;dr; 設定のまとめ
    - SSL/TLS enpryption modeを`Full(strict)` -> `Flexible`に変更
    - CNameのRecordをProxiedではなくDNS onlyで設定
    - GitHub PagesのCustom Domainを一度removeして再設定して裏側のSSL Certificateをre-generate

---
ここに至るまでの経緯を書いていく。

まず、サブドメインをCNAMEで設定したが下記のエラーが出てハマった

```file:設定した内容
Type 	Name	Content	Proxy status 
CNAME <サブドメイン> <githubのアカウント>.github.io Proxied
```

- エラー内容：`Invalid SSL certificate Error code 526`

どうやらSSL Certificateがうまく読み込めれてないので、下記の設定を行う。

https://qiita.com/noraworld/items/89dd85a434a7b759e00c#ssl

> ダッシュボード内のCryptoタブをクリックするとSSLという項目があります。初期設定ではFullとなっていますが、Flexibleに変更してください。

> これでクライアントとCloudFlareサーバ間の通信は暗号化され、CloudFlareサーバとGitHubサーバ間は平文で通信を行います。FullだとCloudFlareとGitHub間も暗号化して通信されますが、GitHub側にはこちらが用意したドメインの証明書は存在しないのでSSLエラーになってしまいます。

再度、ページにアクセスしてみると次は下記のエラーが出てページが表示されず。

- `ERR_TOO_MANY_REDIRECTS`

他のやり方とかを調べていると、ここのコメント内容を発見

> if you enable proxy on Cloudflare to GitHub pages, GitHub cannot generate the certificate.
So, I need to disable the proxy (only use DNS service on Cloudflare) deleted my subdomain.domain.com in the GitHub Pages control panel, and replaced it with the same subdomain.domain.com.

https://github.com/orgs/community/discussions/22052#discussioncomment-3724303

どうやら、proxyをdisableにしつつGitHubPagesを再設定してcertificateを再作成しないと行けない模様。

なので、
Cloudflare側での設定は下記のようにして

```diff
Type 	Name	Content	Proxy status 
- CNAME <サブドメイン> <githubのアカウント>.github.io Proxied
+ CNAME <サブドメイン> <githubのアカウント>.github.io DNS only
```

GithubPagesでカスタムドメインを再設定したところ、問題なく動作するようになった。
Salesforceでフローを作成しよう～数値項目の値の数だけレコード作成方法(割り当てを使用)

こんにちは
本橋孝昭です

今回はSalesforceのフローを作成しました

内容としては
・親レコードの数値項目を設定すればその数だけ子レコードの作成を行う

です

例として
・商談に売上回数　カスタム項目（数値）作成
・商談の子オブジェクトとしてカスタムオブジェクト「売上」作成
-カスタムオブジェクト「売上」と商談は参照関係
-カスタムオブジェクト「売上」日付には商談の完了予定日+nか月が記載
-カスタムオブジェクト「売上」日付には商談の金額/売上回数が記載

・カスタム項目　売上回数を入力すれば、その数だけ売上レコードが作成

上記フローを作成します

これをすれば例として
「分割回数」を200と入力すれば売上レコードが200レコード作成されます

![フロー001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/ce17c6c1-3cb4-4558-3d87-89ca4657f4b2.png)

では、フローの中身を見ていきましょう

※今回のフローはこちらにも同じようなフローがありましたので共有します

https://successjp.salesforce.com/article/NAI-000557


※ループを使ったフローはちら

https://qiita.com/Takaa/items/53cf2f6c4a2d63796f2d



フローの概要はこちらです

![フロー０２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/d8038054-946b-b5bd-803a-ca9395b306bf.png)


開始条件はこちら

![フロー003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/c9fbda33-45cc-d1e9-333b-de5e16913608.png)

決定はこちらです

![フロー004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/35513e1f-a3a0-6064-cd77-3a18f36ac91b.png)


counterはこちらです

![フロー005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/0205be84-e010-6e19-bf75-c68aa4d9be51.png)




No分岐の最初の割当
Set_CreateRecordData　はこちらです

![フロー006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/bb576db2-c3a9-98bb-39c9-ac74864ddc95.png)


通貨の数式はこちらが例です

{!$Record.Amount}/{!$Record.SalesNumber__c}


※SalesNumber__c　は売上回数のAPI参照名


日付けの数式例はこちらが例です

ADDMONTHS({!$Record.CloseDate},{!counter})


売上名の数式例はこちらです

TEXT({!counter}+1)&"売上レコード"&TEXT(ADDMONTHS({!$Record.CloseDate},{!counter}))


TargetSalesRecord はこちらです
![Target.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/057fb1bb-6f5a-cf05-6b2d-f9674daa172f.png)




No分岐の2番目の割当

Set_CreateRecords　はこちらです


![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/835d3a3b-320c-f6cc-ba87-f577dcfbd783.png)


CreateRecords　はこちらです
![create.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/4b049e6f-7916-caf1-71c6-6286d8c4bf0f.png)


最後のレコード作成はこちらです

![レコード作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/5b1f4782-ebf4-4f96-32ea-29b1a7a1ee82.png)
java初心者が行く～クラスとインスタンス_2～

# はじめに
java初心者が備忘録的な感じで書いています．
間違っていても責任はとらないよ！

# インスタンス
前回ではクラスはたいやきの金型（クラス）を作成したので今回はたいやきそのもの（インスタンス）を作成していく．
前回作成したSelfIntroduction.javaのSelfIntroductionクラスはこんな感じ．
```java
public class SelfIntroduction{
    //sampleの属性を書ける
    int age;
    String name;
    public void Introduction(){
        this.age = 24;
        this.name = hogehoge;
        System.out.println(this.name + "です." + age +"歳です");
    }
    public void hello (String your_name){
        System.out.println(your_name + "さんこんにちは");
    }
}
```

これを呼び出すMain.javaのMainクラスを作っていく．

まずはインスタンス（たいやき）の生成

```java
public class Main{
    public static void main(String[] args){
        //インスタンス（たいやき）の生成
        SelfIntroduction self = new SelfIntroduction();
    }
}
```

さらにここからSelfIntoroductionの初期化を行う．
※初期化しないと変数にゴミの値が入る，，
今回はSelfIntroductionクラスでageとnameを定義したのでこの二つの初期化を行う．

```java
public class Main{
    public static void main(String[] args){
        //インスタンス（たいやき）の生成
        SelfIntroduction self = new SelfIntroduction();
        //初期値の設定
        self.age = 24;
        self.name = "hoge";
    }
}
```
ここまでかけたらインスタンスの生成と値の初期化は完了．
次に作成したSelfIntoroductionクラス内のメソッドを呼び出す．
今回SelfIntroductionクラスはintroductionとhelloの二つメソッドを作成したのでこれらを呼び出す．
ただhelloメソッドは入力した名前を引数にもらって呼び出されるのに注意．


```java
public class Main{
    public static void main(String[] args){
        //インスタンス（たいやき）の生成
        SelfIntroduction self = new SelfIntroduction();

        //初期値の設定
        self.age = 24;
        self.name = "hoge";
        System.out.println("あなたの名前は？");

        //メソッドを呼び出す
        String your_name = new java.util.Scanner(System.in).nextLine();
        self.introduction();
        self.hello(your_name);
    }
}
```
ここまで作成したプログラムファイルをもう最後にもう一度見てみる．

```java
public class Main{
    public static void main(String[] args){
        //インスタンス生成
        SelfIntroduction self = new SelfIntroduction();
        self.age = 24;
        self.name = "hoge";
        System.out.println("あなたの名前は？");

        //名前入力
        String your_name = new java.util.Scanner(System.in).nextLine();
        //SelfIntoroduction.javaの中にあるintroductionメソッドの呼び出し
        self.introduction();
        //同様にhelloメソッド呼び出し．ただし引数もあるよ
        self.hello(your_name);
    }
}
```

```java
public class SelfIntroduction{
    int age;
    String name;
    public void introduction(){
        System.out.println(this.name + "です." + this.age +"歳です");
    }
    public void hello (String your_name){
        System.out.println(your_name + "さんこんにちは");
    }
}
```

```:実行結果
あなたの名前は？
katokk
hogeです.24歳です
katokkさんこんにちは
```

実行結果はこんな感じ．

# しかし
今回はインスタンスが一つなのでよかったが複数になってくるとインスタンスを生成するたび毎回初期化を行わないといけなくて面倒なんよ，，
そこで出てくるのがコンストラクタというもの．
続きはまた次の記事で，，
Fitbitを設定して使ってみた

# 概要
Fitbitを設定して使ってみてます。昨日手元に届いたので設定は昨日一日で終わらせて、今日はずっと装着して使っていました。設定は以下のページを参考にしました。とても親切なページで分かりやすかったです。
https://www.apollomaniacs.com/ipod/howto_fitbit_setup.htm

# 設定
（もらいもんみたいな感じだったので）手元に届くまで分かっていなかったのですが、いくつかバージョンがあるようです。inspire2というやつだったようです。いつも腕時計をしないので慣れるまで時間がかかりましたが、もう慣れました。装着状態だと以下のような感じです。
![IMG_3939.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/c0df56b7-2b48-d3cc-66d1-6e7735ff958a.png)

# 色々測定
iPhoneとペアリングして色んな情報が取得できるようなので、色々面白いことが分かったら報告したいと思います。

今日はここまで。
VPCの作成をしてみて学んだこと

# VPCの作成
<p>VPCの作成をしてみて学んだことを書いていきます。。</p>
<p><strong>-全体の流れ-</strong></p>

1. VPCの作成
1. サブネットの作成
1. インターネットゲートウェイの作成
1. パブリックルートテーブルの作成
1. NATゲートウェイの作成
1. プライベートルートテーブルの作成
1. データベースルートテーブルの作成


- つまづいた部分
VPCの作成をしていて気になることがでてきた。
<dl>
<dt><strong>IPv4 CIDRって何？</strong></dt>
<dd><strong>IPv4</strong>　2進法で３２桁</dd>
<dd><strong>CIDR</strong>　アドレスクラスの概念を気にしないことでIPアドレスの割り当てや経路選択などの自由度を上げる仕組み</dd>
</dl>

- 気づいたこと
    - VPCとインターネットゲートウェイを作成して紐づけると、VPCとインターネット間で接続はできるもの、サブネットのルーティングが設定されていないと、どのサブネットもインターネットとは接続されない。パブリックサブネットのルーティングを設定してインターネットとパブリックサブネットを疎通可能にする。
    - NATゲートウェイとは、プライベートサブネット内でインターネットに通信を行いたい場合に<strong>パブリックサブネット</strong>に設置する。
#  補足
IPアドレスの意味さえも曖昧だったが色々調べることで理解できてきた。
IPアドレスはネットワーク部とホスト部がある。ネットワーク部は１年２組といった学年とクラスみたいなもので、ホスト部は１年２組に所属している２５番といった出席番号のようなもの。
データフレームのままglmnetを使用する

例えば、
```R
set.seed(1)
epsilon <- rnorm(10)
dat <- data.frame(y = 1:10+epsilon,
                  x1 = rep(1,10),
                  x2 = 1:10,
                  x3 = (1:10)^2)
```
というデータフレームがあった場合、
```math
y = \beta_0 + \beta_1 x_1 + \beta_2 x_2 + \beta_3 x_3
```
の形の線形回帰分析を行う際に、```glmnet```における```x```の指定で、```as.matrix```関数を使用する方法のほかに、以下の方法が使用できる。
```R
fml <- formula(y ~ .)
cv <- cv.glmnet(x = model.matrix(fml, dat)[,-1],
                y = model.frame(fml, dat)$y,
                family = "gaussian",
                alpha = 1)
lasso <- glmnet(x = model.matrix(fml, dat)[,-1],
                y = model.frame(fml, dat)$y,
                family = "gaussian",
                alpha = 1,
                lambda=cv$lambda.min)

```
Reactの勉強に使ったサイト＆書籍一覧

# はじめに
webアプリを作る業務でReactが必要になった際に使った本やサイトをまとめます。

# 前提
ReactはJavaScript+HTML/CSSでできているので、その両方を軽く触ってReactに入った方が圧倒的に分かりが早いです。

Reactを始めて分からないことがでたときに、HTMLとJavaScriptとReact独自構文のどれがわかってないのか分からないと調べるのがきついです。

HTMLとJavaScriptを勉強した時の記事を書いたので良ければ参考にして下さい。

https://qiita.com/072megumi/items/38c6d3c2951936d32c11

https://qiita.com/072megumi/items/fd02f49065a6688348a7

# 使ったサイト＆書籍（使った順）

## 基本を抑えるのに使ったツール
まずはReactの良さや概要を知るためにチュートリアル形式の本を一つやりました。
キャラクターが出てきてストーリー形式で進むので読みやすいです。

https://www.amazon.co.jp/%E3%83%A2%E3%83%80%E3%83%B3JavaScript%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%8B%E3%82%89%E5%A7%8B%E3%82%81%E3%82%8B-React%E5%AE%9F%E8%B7%B5%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8-%E6%9C%80%E6%96%B0ReactHooks%E5%AF%BE%E5%BF%9C-Informatics-IDEA/dp/481561072X

また、こちらの本も辞書的に使っていました。

https://www.amazon.co.jp/-/en/Alex-Banks/dp/4873119383/ref=sr_1_1?adgrpid=138533858634&hvadid=611341853902&hvdev=c&hvlocphy=1009540&hvnetw=g&hvqmt=e&hvrand=7523535793771772551&hvtargid=kwd-1671446816601&hydadcr=27491_14587063&jp-ad-ap=0&keywords=react+%E3%83%8F%E3%83%B3%E3%82%BA%E3%82%AA%E3%83%B3%E3%83%A9%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0&qid=1681982191&sr=8-1

セールの時にこちらのUdemyを買ってやりました。動画内でReactを書くのに便利なVSCodeの使い方や、ショートカットを教えてくれる点も魅力。


また、JavaScriptの文法の中でReactを使うにあたって特に重要なものを教えてくれるパートがあります。

https://www.udemy.com/course/react-complete-guide/?utm_source=adwords&utm_medium=udemyads&utm_campaign=LongTail_la.JA_cc.JP&utm_content=deal4584&utm_term=_._ag_107181210924_._ad_452531407122_._kw__._de_c_._dm__._pl__._ti_dsa-930814700879_._li_1009540_._pd__._&matchtype=&gclid=CjwKCAjwov6hBhBsEiwAvrvN6DJFHBrzgsFhrPq1lJP2gSYhUhukUiOJyoaH9xC1S6RqbbM2RsDgmhoC2QUQAvD_BwE




チュートリアルがたくさん載っているのですが、難しい内容が多いので一気にやるのではなく自分の習熟度に合わせて少しずつやるのが良いと思います。
また、CSSのフレームワークなどは使っていないので、自分で導入してみるのも練習になりました。

## アプリ作成練習

その後は本で得た知識を何も見ずに作れるように、さまざまなアプリを題材に練習をしました。チュートリアルではありますが、まずは完成品だけ見て自力で作ってみて詰まったら答えを見る、というやり方でやっていました。

### 計算アプリ
コンポネントを作ったり値を取得したりする練習

https://tech.e3factory.com/programming/2586

### ToDoアプリ

画面をコンポネントに分けてそれぞれ実装する練習（超初心者だったときはどうコンポネントを分ければ良いか分からなかった）

UIツールであるBulmaを使うので、webアプリっぽい見た目のものが作れて気分が上がります。

https://www.hypertextcandy.com/react-tutorial-05-wrap-up-with-todo-app

### 画像ギャラリー (犬アプリ）

APIをフェッチしてデータを取得する練習。犬が可愛いし、非同期処理の勉強ができます。

https://zenn.dev/likr/articles/6be53ca64f29aa035f07

### 天気予報アプリ
色々なアプリの例を挙げてくれているサイトから。
ここに載っているReactの例はクラスコンポネントという古い書き方をしているので、
新しい書き方がよければ自分で書き直す必要があります。それも含めて練習になります。

https://github.com/florinpop17/app-ideas/blob/master/Projects/1-Beginner/Weather-App.md

### FaceBook的なアプリ
こちらのyoutubeではMUIというUIツールを使ったFaceBookのようなアプリを作れます。
MUIの紹介が主なので、ボタンを作るだけでその内部の仕組みは紹介されていない部分もあるのですが、そこを自分で補間するのが練習になりました。

https://www.youtube.com/watch?v=fzxEECHnsvU

MUIを使わない方でも自分が好きなUIツールを使ったチュートリアルをやってみると凝った画面のアプリを作れるので楽しいし勉強になると思います。

### 番外編 (おすすめyoutuberの方）

まだ自分は取り組めていないのですが、職場の先輩によるとこちらの方のYoutubeでReactを使ったさまざまなチュートリアルが紹介されているそうです。

GmailやSlackなどみんなが使ったことのあるアプリを題材にしているので、楽しく取り組めそうな感じがします。

https://www.youtube.com/@SonnySangha
Power BI Desktopで作成したレポートを共同編集するには

# はじめに
今回はPower BI Desktopでレポート作成後、自分以外のメンバーも共同作業者としてpbixファイルを直接編集し、デグレしないように運用するにはどうしたらいいか？ということがテーマです。

まずはChatGPTにヒアリングしてみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2885406/9ca562ab-e657-d9b3-a7aa-b6e46cfd2e6d.png)

なるほど！
なんとなく頭の中で想像してた通りの回答だったので、これを応用してTeams上に同じような環境を作ってみました。

# 環境構築
1. Teams上に共有フォルダを作成するためのプライベートチャネルをたてる
 ※パブリックチャネルでも構わないのですが、他の人に勝手に見られたりダウンロードされるのを避けるため

2. チャネルに必要なメンバーのみアクセス権限を与える

3. 該当のチャネルに作成済みのpbixファイルをアップロードする

実際に作った環境が↓とおり。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2885406/ddc8ff11-2e5e-2501-988b-33d5c9248316.png)

OneDrive上の個人フォルダを共有する運用はイマイチですし、SharepointもしくはTeams上で環境構築するほうが運用しやすいかと思います。

# 運用編

1. pbixファイルはTeams上でそのまま開くことはできないので、ファイルをチェックアウト
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2885406/d3146396-9247-eb31-4a17-36a78c03b73a.png)

2. チェックアウトしたファイルをダウンロードしてローカル上で編集し、終わったら保存してチェックイン

これで運用するメンバーが増えてもファイルがデグレすることもないですし安心です！
さらにメンバーが同時編集することもないので、当面この運用で回りそうです。
HTML/CSSを勉強したときに使って良かったもの一覧

# はじめに
HTML・CSSを勉強した時に使ったサイトをまとめます。

# 使ったサイトリスト

https://paiza.jp/works/html/primer

paizaは実行環境がweb上に用意されていて、HTMLを編集してすぐに実行結果を見ることができるので便利でした。
タグの使い方や基本的な種類を学ぶのに使っていました。

https://paiza.jp/works/design/primer

HTMLの勉強を始めた当初、自分のデザインセンスが致命的すぎて作ったものがあまりにもダサく楽しいと思えない瞬間がありました。
完成品を見て楽しいと思えないと勉強がしんどくなるので、Webデザインの基本要素を知っておくと良いと思います。

https://code-step.com/

HTMLなどwebデザイン業界にはサイトを模写？して練習をするという文化があるみたいです。一から自分でサイトのデザインを考えるのも楽しいですが、自分のできるデザインの幅を広げるためにも、上記サイトのような実例を真似して作るのは勉強になりました。
Python（matplotlib）でパレート図を作成してみた

# 概要
python（matplotlib）でパレート図を作成してみました。以下のページを参考にしました。
https://self-development.info/python%E3%81%A7%E3%83%91%E3%83%AC%E3%83%BC%E3%83%88%E5%9B%B3%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%80%90matplotlib%E3%80%91/

# 環境構築
上記ページのパレート図には日本語が入っているのでそれを扱えるように日本語用のmatplotlibをインストールしました。
```
$ sudo pip3 install japanize_matplotlib
```

# ソースコード
上記ページのソースでは日本語がうまく表示されなかったので、japanize_matplotlibをimportしました。
```pareto_chart3.py
# coding: UTF-8

import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
import japanize_matplotlib

# ラベル
labels = ['あ', 'い', 'う', 'え', 'お', 'か', 'き', 'く', 'け', 'こ']
# 値
values = [100, 90, 80, 70, 60 ,50, 40, 30, 20, 10]
 
# データ操作用
df = pd.DataFrame({"label": labels, "value": values}, columns=["label", "value"])
# 「値」の降順にデータを並び替える
df = df.sort_values(by="value", ascending=False)
# 累積和を求める
df["accum"] = np.cumsum(df["value"])
# 比率の累計を求める
df["accum_percent"] = df["accum"] / sum(df["value"]) * 100
 
# サイズ指定
fig = plt.figure()
# 軸関係の表示
ax = fig.add_subplot(111)
 
# データ数のカウント
data_num = len(df)
 
# 棒グラフの描画
ax.bar(range(data_num), df["value"])
ax.set_xticks(range(data_num))
ax.set_xticklabels(df["label"].tolist())
ax.set_xlabel("(項目)")
ax.set_ylabel("（頻度）")
 
# 折れ線グラフの描画
ax_add = ax.twinx()
ax_add.plot(range(data_num), df["accum_percent"])
ax_add.set_ylim([0, 100])
ax_add.set_ylabel("（比率の累計）")
 
# グラフを画像保存
plt.savefig("result.png", facecolor="white")
```

# 実行
以下の通りコマンドを実行しました。
```
$ python3 pareto_chart3.py 
```
すると以下の通り画像ファイル（result.png）が出力されました。

# 実行結果
画像の中身は以下の通りでした。できました。
![result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/52724343-71cd-567b-7af7-8af5b6c3a395.png)

何かの役に立てばと。
GitHubで特定バージョンをcloneしたりpip installしたり

GitHubで特定バージョンを`git clone`したり`pip install`したりする方法のメモ。

# GitHubでリポジトリの特定タグをclone

```sh
git clone git@github.com:{ username }/{ reponame }.git -b { tag name }
```

# GitHubからPythonのモジュールをインストール

```sh
pip install git://github.com/{ username }/{ reponame }.git@{ tag name }
```
キッティング専用RPAツール「SetROBO for Kitting」を導入してみた

# はじめに
私は日頃、クライアントPCやサーバの設定(いわゆるキッティング)の作業を行っており、キッティング作業を少しでも効率化したく色々と悪戦苦闘しています。
前期より、PCキッティングの効率化を図る為、㈱アープ社が開発・販売しているキッティング専用RPAツールの「SetROBO for Kitting」を導入し、思った以上の効果が出たので共有したいと思います。
※ツールの詳細は、下記ホームページを参照してください。

https://www.setrobo.jp/

まず、弊社は販売代理店からPCを仕入れ、1台1台開梱し電源をいれ手作業で設定していくスタイルで行っており、弊社で行う主なキッティング内容は約30項目あり、みなさんも行っているような下記の設定となります。
※機種固定じゃない為、Sysprepなどでイメージをという事が難しく、一部BatやPowerShellを使用し作業時間の短縮をしていますが、多くは手作業で行っています。


|設定項目|
|---|
|PC名変更|
|ドメインユーザーの追加|
|ドメイン参加|
|固定IPアドレス設定|
|必須ソフトウェア(10種類程度)のインストール、及び設定|
|Officeの設定|
|BitLockerの有効化|
|エクスプローラオプションの変更|
|電源オプション|
|Chromeの設定|
|タスクバーの整理|
|スタート画面の整理|
|Windowsアップデート|

RPAツール導入前と導入後で良かった点と悪かった点は下記の通りです。

## 【良かった点】
### ①作業時間の大幅短縮
今までは、２，３台のPCを並べて、手作業でキッティングを行っていましたが、なんだかんだ(横やりが入り作業が中断とか)で半日はかかっていました。
しかし、SetROBO forKittingを導入後は、作業スペースを10台までおけるように広くし、並列で10台一気に実行させて、全部で2時間程度で終了することが出来ました。

なお、作業時間の2時間も、開梱や電源接続、OSの初期設定、キッティング後の梱包の15分以外は、勝手に動いていてほぼ何もしないので、実質作業時間15分ですね。

### ②設定ミスがゼロに！
人がやるとミスはつきもので、特に疲れているときは設定を飛ばしたりして途中で慌てて設定し直したりしますよね。
あと、忙しい時期に仕方なく普段キッティングを行わない人に頼んだりすると、逆に確認や設定し直しとかで時間を取られ、自分がやった方が早かった！と感じることがあります。

しかし、ここについてもRPAツールの凄さが発揮し、自動実行中に設定値の確認はもちろんエビデンスも自動取得することができ、もし設定中に何らかの理由で正しく設定が出来なかった場合は、エラーメッセージを出して止めることが出来る(そういうシナリオを作成する)ので勝手に設定してくれて、結果的に設定ミスはゼロにすることができました。

## 【悪かった点】

### ①シナリオ作成に時間が必要

良かった点を挙げたので、悪かった点も挙げなければと思い書きますが、唯一悪かった(大変だった)点は、ツールに慣れてシナリオを作ることですね。
RPAツールなので、仕方ないことなんだけど、やはり立ち上げは大変でした。
昨年後半頃から体験版を使用し導入の検討を行い昨年末に導入しましたが、作業の合間などでシナリオを作成していき、2～3ヵ月でようやく本番で使えるレベルまで持って行けました。
ただ、一度作成したシナリオは、今後ＯＳのバージョンアップなどで設定画面の仕様変更が多少あっても、仕様が変わった箇所の修正だけで済むので、かなり楽になると思います。

ちなみに、ARP社ではこちらが希望するシナリオを作成してくれる有償のサポートもあり、作成したシナリオをベースに拡張していくことも出来ると思うので、私的には、初めは多少お金を払っても作成して貰った方がコスト的にも良かったと思いました。
※導入前の打合せ時に、シナリオ作成サポートの案内を受けたが、その時はスルーしてしました。

## 最後に
「SetROBO for Kitting」は、ランニングコスト(更新料：9万5千円/年)も非常に安く、台数に関係なく自動化できて、それで自分の作業時間を大幅に減らすことができたので、もっと早く導入すれば良かったと感じています。
今も手作業でPCのキッティングを行っている方は、一度検討をおすすめします！
研究で使用したOSS他メモ

研究でAWSをいじくることになりそうなのでそのメモ書き
また書き止めがあったらここに書き足していくかも
## キーペアの権限を600に(管理者のみRW可能)
```
chmod 600 (keypair).pem
```

## EC2へ接続
```
ssh -i (keypair).pem ec2のグローバルIP
```
## AWS Rekognition
顔分析で使用。
無料でやりたいならPy-feat、FERいろいろある。
FaceMappingするならOpenFace

## OpenAI
基本的に環境変数にキーを入れておけば問題ない。
- whisper
- vision
- AssistantsAPI
- 周辺ツール
    - LLaMAIndex
    - LangChain

## Vue.js
## RestAPI
## Ngrok
## Flask
## WebSocket
Google AppSheet 開発を始める前に知っておきたかったこと

## はじめに

Google AppSheetをしばらく触らなくなりそうなので  
備忘録を残しておきます。開発初心者向けの資料になっています。  

## 旧エディタへの戻し方

現時点では記事のほとんどが旧エディタ対象になっています。  
ただでさえ日本語記事が少ないので、どこに設定があるのか分からなくなり大変です。  
新エディタと旧エディタの切替えがすぐに出来ると楽です。  

![戻す.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1718976/e7f42bc4-b340-8ee8-ce21-cd9399979a25.gif)


(タグ用)  
旧環境、古い環境、旧バージョン新バージョン変更、開発画面、戻し方、戻る方法

## 役立つサイト

https://step-up-appli.com/category/appsheet/%e5%9f%ba%e6%9c%ac/  

日本語記事の中で1番整理されており、非常に参考になります。
ロードマップとしても活用できると思います。  

## 料金体系

↓公式ページ
https://about.appsheet.com/pricing

企業利用、事業展開が目的の方はまず目を通しておきましょう。  


特に重要な機能は以下の2つです。 

- **Automation**機能：Starter(開発者1人あたり月5$)以上のプランで使用可能
  メールを送信、GASを起動、ドキュメントの作成等の自動化ができるようになる
- **Security Controls**機能：Core(開発者1人あたり月10$)以上のプランで使用可能
  ユーザの情報が他のユーザに見られないようにフィルターをかけることが出来る

Security機能は重要な情報以外ならばSliceでも代用できるかと思います。  

ちなみに開発段階では、上記の有料機能は全て無料で使用することができます。
また、10名までなら無料で共有可能になっているので、
小規模利用なら無料でアプリを作成することが出来ます。  

## その他注意点

AppSheet上のデータベースでアカウント管理することは推奨されていません。  
ログインはGoogleアカウントなどの特定のアカウントのみで出来る様になっています。  
ユーザ管理したい人はご注意ください。  

## まとめ

備忘録目的ですが導入に丁度良いかと思います。  
参考になれば幸いです。
VketCloudが一般公開されたのでワールド公開してみた

# VketCloud一般公開！

4/20にVketCloudが一般公開されたので、触ってみたいと思います！
UnityからWebブラウザ上のバーチャルワールドを構築できるようになります。
こちらは、Unityはすでに触ったことある人むけの記事になります。

https://twitter.com/VketCloud/status/1648884671076536320?s=20

https://cloud.vket.com/

公式の説明手順はこちらになりますので、困ったらこちらを確認するようにしてください。

https://note.com/virtualmarket/n/n8dbabbb95bc8

# 手順

- ① Vket Cloud公式サイト（https://cloud.vket.com )にて登録
- ② マイページからワールド情報登録
- ③ Unityの準備
- ④VketCloudの導入
- ⑤最低限のステージ配置を行う
- ⑥ビルドして確認する
- ⑦ワールドをアップロードする
- ⑧ワールドを確認する

## ③ Unityの準備

Unityのバージョンは**Unity 2019.4.31f1** (2023年4月20日現在) になります。

[こちら](https://unity.com/releases/editor/archive)からダウンロードしましょう。

## ④VketCloudの導入

- Unity Pacakage Managerから行います。
    - メニューバーの
`[Edit]>[Project Settings] > [Package Manager]`を開き

|項目|記入内容|
|---|---|
|Name|VketCloudSDK|
|URL|https://registry.npmjs.com|
|Scope(s)|com.hikky.vketcloudsdk|

と記入。

- メニューバーの
`[Windows] > [Package Manager]から
[My Registries]`を選択。
    - `VketCloudSDK`を選択し「Install」を押します。

- ここでUnityのメニューバーに`[VKetCloudSDK]`が表示されない場合、Unityを再起動します。
- Unityのメニューバーに`[VKetCloudSDK]`が追加されているのを確認。
    - `[VKetCloudSDK] > [login]`を押します。


すると、ログインが成功します。

## ⑤最低限のステージ配置を行う

VketCloudのワールドでは

- 「HEOPlayer」最初に降り立つ出現ポイント
- 「DespawnHeight」アバターを再スポーンさせる高さの設定

この2つが必須です。

Package Managerにサンプルシーンがあるので開いてみましょう。

- Tutorial Resources
- Tutorial -basic-

をimportします。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96970/f0349754-2188-93d2-5b9e-3f81a9d1dd56.png)


`Samples>Vket Cloud SDK>4.1.4>Tutorial -basic->Scenes>1_EssentialObjects`のシーンを開きます。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96970/444cf447-c8cc-f8e1-9355-4d2e60036d11.png)

## ⑥ビルドして確認する

メニューバーの
`[VketCloudSDK]>[Build and Run]`をクリックします。

ビルドが成功すると、
Webブラウザが立ち上がります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96970/1f69150a-1477-b57e-cd55-8caae480b71d.png)

## ⑦ワールドをアップロードする

`[VketCloudSDK]>[Upload to Remote Server]`をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96970/51f1af6d-c1a4-51a5-7aa7-e120aa5d9088.png)

ココからエラーでストップ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96970/95aef672-d6d4-0e1a-1b1e-3044c9e26f18.png)

先ほどの、Build & Runで走っていたプロセスを閉じてから、再度ボタンを押すと成功します！

## ⑧ワールドを確認する

https://cloud.vket.com/account/world

にアクセスし「ワールドを確認する」を押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96970/a2d5147c-1476-b1a7-9f69-3bbc8f1d7b9e.png)

できていそう！

「ワールドを公開する」を押すと、公開されました！

https://iwaken71.cloud.vket.com/worlds/cjhfZDl2/main.html?worldid=cjhfZDl2


# 私がまだできていないこと

- ワールドの編集
    - 既存ワールドにSphereなどを追加したが、Build後のワールドには反映させられず、、、なぜなのか
- 自分のSceneでのBuild
    - なぜかエラー。サンプルシーンと何が違うのか。。。

解決次第更新します。
Slack Incoming WebhookのURLを使ってターミナルからメッセージを送る

# 概要

- WebhookのURLを使ってターミナル上からメッセージを送る方法をまとめる。

# 前提

- Incoming WebhookのURLを知っていること。

# 方法

- 下記のコマンドを実行することで`Hello World!`という文字をSlackに送る事ができる。

    ```shell
    curl -X POST -H 'Content-type: application/json' --data '{"text": "Hello, World!"}' Incoming WebhookのURL
    ```
外部流出に怯えないで日本語でジピる

1. https://gpt4all.io/index.html からインストーラを落として導入し
1. モデル vicuna-13b を取得して
1. 準備完了、日本語で会話できます

以下すべて削除
- ~~gpt4all で日本語が不自由ぽかったので前後に翻訳をかませてみた~~
- ~~Python3.10~~

## ~~チャットの準備~~
```sh:shell
git clone --recursive https://github.com/nomic-ai/pygpt4all.git
pushd ./pygpt4all/pyllamacpp && sh ./install.sh && popd
curl -LJO https://the-eye.eu/public/AI/models/nomic-ai/gpt4all/gpt4all-lora-quantized-ggml.bin
python pygpt4all/pyllamacpp/llama.cpp/migrate-ggml-2023-03-30-pr613.py gpt4all-lora-quantized-ggml.bin gpt4all-lora-quantized-ggjt.bin
```
## ~~翻訳の準備~~
```sh:shell
pip install argostranslate
```
## ~~チャットと翻訳を組合わせる~~
```python:interactive.py
from sys import argv

from pyllamacpp.model import Model
import argostranslate.package
import argostranslate.translate


JA_EN = ('ja', 'en')
EN_JA = ('en', 'ja')

def install_package(from_code, to_code):
  # Download and install Argos Translate package
  argostranslate.package.update_package_index()
  available_packages = argostranslate.package.get_available_packages()
  package_to_install = next(
      filter(
          lambda x: x.from_code == from_code and x.to_code == to_code, available_packages
      )
  )
  argostranslate.package.install_from_path(package_to_install.download())

def translate(orignalText, from_code, to_code):
  translatedText = argostranslate.translate.translate(orignalText, from_code, to_code)
  return translatedText

def new_text_callback(text):
    print(text, end="", flush=True)

def translatedPrompt():
  model = Model('/gpt4all-lora-quantized-ggjt.bin', n_ctx=512)
  while True:
    try:
      prompt_ja = input('You: ')
      if prompt_ja == '':
        continue
      prompt_en = translate(prompt_ja, *JA_EN)
      new_text_en = model.generate(prompt_en, n_predict=55, new_text_callback=new_text_callback, n_threads=8)
      new_text_ja = translate(new_text_en, *EN_JA)
      print(f'AI: {new_text_ja}')
    except KeyboardInterrupt:
      break

def main():
  install_package(*JA_EN)
  install_package(*EN_JA)
  translatedPrompt()

if __name__ == '__main__':
  main()
```
## ~~会話をお楽しみください~~
```sh:shell
python ./interactive.py
```

~~遅いし賢くない、素直に課金した方が良い~~
IPアドレスがわからないサーバーに接続する方法

## IP アドレスがわからないサーバーに接続したい
### まず考えられる方法
- mDNS が機能していてホスト名がわかっている場合、 `hostname.local` で接続
- キーボードを繋いで画面を直接確認できる場合、接続先サーバーで `ip a` コマンドを使って IP を確認して接続

今回はネットワーク設定等で mDNS が機能していない場合や、リモートワークなどで直接操作できない場合などで、上記の方法をとれない場合の対処法を記載します。

## MAC アドレスから IP を調べる
#### 前提条件
1. 同じネットワークに入っていること（VPN接続等で対象サーバーと同じネットワークの別サーバーに接続できているなどを想定）
2. 知りたいIPアドレスがプライベートIPアドレス
3. 接続先サーバーの MAC アドレス、もしくはメーカーが判明している

#### 例
メーカーがわかっている場合は `-e` オプションで MAC アドレス前半部分3バイト（Company ID、OUI、ベンダーコード）を指定して探す
`-i` `--ignore-case` は大文字小文字区別しないオプション
```shell
# 例えば Raspberry Pi Trading Ltd の場合
# （MACアドレス範囲が追加されていることがあるので、新しい機器の場合はオプションを追加しないと見つからないかも）
arp -a | grep --ignore-case -e 28:CD:C1 -e D8:3A:DD -e DC:A6:32 -e E4:5F:01
```

```shell
# MACアドレスがあらかじめわかっている場合はそのままオプション指定してもいい
arp -a | grep --ignore-case -e 28:CD:C1:00:00:00
```
```shell
# 見つからない場合やメーカーがわからない場合は一覧から地道に探すしかない
arp -a
```
Swift JSON+Codableで文字列をエラーなくURLに変換する一番簡単な方法

# まとめ
propertyWrapperを利用することで、JSONの文字列を安全にURLに変換してCodableのstructを生成できるようになります。

# 概要

JSONをSwiftのStructに落とし込む時にCodableを使うことがあると思います。
StructをCodableに対応すると、JSONのデータをJSONDecoderを通して、数値、文字列、Boolなどに変換したStructに変換することができます。

しかし、URLの場合は、JSONの文字列が`init(string:)`の結果でnilになるような文字列の場合、`DecodingError`となってstructとして生成できなくなってしまいます。

例えば以下のようなstructです。

```swift
struct MyUser: Codable {
    let id: Int
    let name: String
    let url: URL
}
```

これに対し、urlが問題なくURLとして生成できる文字列であればstruct生成されますが、urlがURLではない文字列がくると、structが作られず、JSONDecoderがエラーを吐いて処理が失敗します。

```swift
        let data = """
        {
          "id": 1234,
          "name": "Hello World!",
          "url": ""
        }
        """.data(using: .utf8)!
        
        let decoder = JSONDecoder()
        let user = try decoder.decode(MyUser.self, from: data) //DecodingError
        print(user.url)
```

# 対応
まず、JSONからURLに変換する用の、Codableを付与したpropertyWrapper structを用意します。
`JsonUrl`として用意しました。
init処理では、decoderによってデコードされたwrappedValueのStringをprojectedValueとしてURLに設定します。

```swift
@propertyWrapper
struct JsonUrl: Codable {
    var wrappedValue: String
    var projectedValue: URL?
    
    init(from decoder: Decoder) throws {
        wrappedValue = try String(from: decoder)
        projectedValue = URL(string: wrappedValue)
    }
}
```

次に、URLとして設定するプロパティに`@JsonUrl`を付与し、Stringにします。
letはvarにしないとビルドが通りません。

```swift
struct MyUser: Codable {
    let id: Int
    let name: String
    
    @JsonUrl
    var url: String
}
```
あとは、structを利用する側は、URLとして利用する場合は$を付与して利用すればOKです。
decoderがエラーを出すことなく処理が可能です。

```swift
        let data = """
        {
          "id": 1234,
          "name": "Hello World!",
          "url": ""
        }
        """.data(using: .utf8)!
        
        let decoder = JSONDecoder()
        let user = try decoder.decode(MyUser.self, from: data) 
        print(user.$url) // nil
```

# 過去のSwift JSON+Codableリンク

https://qiita.com/hyuga_amazia/items/3f5fcbf0c4ee2b4859f4

https://qiita.com/hyuga_amazia/items/7d2f7f4ae48ec37c1292
npm proxyがlocalhostに接続できなかった件

## 経緯

npmにproxyを設定する。

```bash
npm config set proxy http://localhost:3333
npm config set https-proxy http://localhost:3333
```

そして`npm i`してやく５分後。。。

```bash
$ npm i
npm ERR! code ECONNREFUSED
npm ERR! syscall connect
npm ERR! errno ECONNREFUSED
npm ERR! FetchError: request to http://registry.npmjs.org/react failed, reason: connect ECONNREFUSED ::1:3333
（後略）
```

`::1:33３３`に接続できなかった。

私の場合、proxyソフトをipv4を使っているので、それが当然ですね。

いつも`localhost == 127.0.0.1`が当然だと思いましたが、実際は勘違いしています。chatgptさんに訊ねると、

> Q: localhostはipv4とipv6のどっちを指すか
>
> A: localhostはIPv4とIPv6の両方を指すことができます。localhostは、自分自身に接続するためのアドレスであり、IPv4アドレスの "127.0.0.1" とIPv6アドレスの "::1" の両方を持っています。一般的に、localhostに接続するアプリケーションは、IPv6を優先して使用する傾向がありますが、必ずしもすべてのアプリケーションがそのように動作するわけではありません。したがって、アプリケーションがIPv4またはIPv6を使用するかどうかを明示的に指定する必要がある場合があります。

npmの場合、ipv6が優先に利用されます。

## 解決策

127.0.0.1と明示的に指定すること。

```bash
npm config set proxy http://127.0.0.1:3333
npm config set https-proxy http://127.0.0.1:3333
```