OmniAICreator/Qiita-1.07M huggingface dataset:
Laravel Mix5からLaravel Mix6にアップデートする

## Laravel Mixとは
javascript、CSSなどのフロントエンド関連に関するjavascript、CSSのファイルをビルド/コンパイルするためのツールです。
webpackというツールの基礎知識が必要となっています。
以下の記事で大体のイメージを掴むことができると思います。

https://udemy.benesse.co.jp/development/system/webpack.html

## アップデートが必要となった経緯
javascriptの読み込みを速くするために、[CompressionWebpackPlugin](https://webpack.js.org/plugins/compression-webpack-plugin/)を使って、app.jsとapp.csをgzip圧縮するために```npm install compression-webpack-plugin --save-dev```をしようとしたところ、アップデートが必要であったためにアップデートしました。
## Laravel Mix5とLaravel Mix6の変更点
５系と６系で大きく異なっているのが、npmのscriptの部分です。
```text:5系のscript
"scripts": {
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}
```
```text:6系のscript
"scripts": {
    "dev": "mix",　　#　npm run devが使いたい人用
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "production": "mix --production"
}
```

また、Vueを使っている場合はwebpack.mix.jsの記述も少し変える必要があります。
```text:5系のwebpack.mix.js
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');
```
```text:6系のwebpack.mix.js
mix.js('resources/js/app.js', 'public/js').vue()
   .sass('resources/sass/app.scss', 'public/css');
```
このように```.vue()```という記述を追加する必要があります。

最後に、```resources/js/app.js```内も変更する必要がありました。
```text:5系のapp.js
window.Vue = require('vue');
```
このVueをインポートしていた記述を
```text:6系のapp.js
import Vue from 'vue'
```
と変更すれば、問題なく動作すると思います。

## 最後に
webアプリ開発は今回が初めてで、わからないことばかりですが少しずつ学んでいこうと考えています。今後も学んだことを共有していこうと思うので、よろしくお願いします。
もし、内容に間違いがありましたら教えていただけるとありがたいです。

## 参考にした記事
https://qiita.com/nittannittan/items/386f5e20478a28413429

https://stackoverflow.com/questions/42520992/uncaught-typeerror-vue-component-is-not-a-function

https://webpack.js.org/plugins/compression-webpack-plugin/

https://laravel-mix.com/docs/6.0/upgrade
バッチファイルを管理者権限で再起動する方法

# これをスクリプトの頭に記述する

```bat
@REM 管理者権限判定
net session >nul 2>&1
if %ERRORLEVEL% neq 0 (
    @powershell start-process """%~0"^"" -verb runas
    exit
)
```

# 簡単な説明

### ```net session >nul 2>&1```
 
コマンド ```net session``` は管理者権限が無いとエラーになります。 ```2>&1``` で標準エラーと標準出力をまとめて ```>nul``` で非表示にしています。

### ```if %ERRORLEVEL% neq 0```

```net session``` の終了コードが ```%ERRORLEVEL%``` に入るので、これが0でないなら ```net session``` はエラー、すなわち管理者権限でないことがわかります。

### ```@powershell start-process """%~0"^"" -verb runas```

バッチファイルでパワーシェルコマンドを実行します。```%~0``` は実行時引数の0番目、すなわち自身のパスです。psコマンド```start-process``` の引数 ```verb``` に値 ```runas``` を設定すると管理者権限で実行できます。

```@powershell``` の仕様がよくわかりませんが ```"%~0"``` では失敗し、試行錯誤の結果 ```"""%~0"^""``` で通りました。正しい書き方が分かる方がいれば教えてください

### ```exit```

管理者権限で再実行したので、以後のスクリプトが多重に実行されないようこのスプリクトを終了します。
jenvでgradle実行時のUnsupported class file major versionを回避する

Unsupported class file major version XX
は、GradleのバージョンがJavaに対して古い場合に起こります。

- Gradleのバージョンアップ
- Javaのバージョンダウン

が考えられますが、諸事情で前者が選択できなかったので今回は後者の方法の解決です。

## 前提

- macOS
- jenvをインストールしていること
  - `brew install jenv`

## 解決方法

指定したディレクトリ以下を古いJavaのバージョンを使うように設定

```sh
# 古いバージョンのJavaをインストール
brew install openjdk@11
# brewでインストールしたので、シンボリックリンクを貼る(↑のインストール時コンソールに出力されます)
sudo ln -sfn /usr/local/opt/openjdk@11/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk-11.jdk/Contents/Home/
# jenvに追加
jenv add /Library/Java/JavaVirtualMachines/openjdk-11.jdk/Contents/Home/
# jenv設定(このコマンドを実行した配下が指定したjdkが使用される)
jenv local 11
```

これで再度`gradlew`コマンドを叩けばきちんと実行できました！
たくさんのスペースで区切られた文字列のうち一番最後のフィールドを取得したい（`cut -f`オプションには最後のフィールドを取得するオプションがない..）

以下のようにコマンド実行した際、たくさんのスペースで区切られた文字列のうち一番最後のフィールドを取得したい（`cut -f`オプションには最後のフィールドを取得するオプションがない..）

```bash
$ brew list --versions | grep qt 
qt 5.13.0 5.13.1 5.14.2
```

`rev`コマンドを使えばよい

```bash
brew list --versions | grep qt | rev | cut -d' ' -f1 | rev
python -V | rev | cut -d' ' -f1 | rev
```

```
5.14.2
3.7.1
```

# 参考

https://blog.fascode.net/2021/07/10/cut-last-field/
「なっとく！アルゴリズム(Grokking Algorithms)」【オライリーサブスク本紹介】

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

【おすすめ度(5段階)】⭐⭐⭐⭐⭐

【原著】「Grokking Algorithms」

https://learning.oreilly.com/library/view/grokking-algorithms/9781617292231/

【翻訳版】「なっとく！アルゴリズム」

https://www.shoeisha.co.jp/book/detail/9784798143354

# 【内容】
今日紹介するのは有名な本「Grokking Algorithms」です。
日本語では「なっとく！アルゴリズム」という題名で翻訳されています。
本社の特徴が **とにかくわかりやすい** という点です。
図で説明しているということに加えて、
その図が非常に可愛らしくキャッチであり、
さらにアルゴリズムを分かりやすく図解しているというところが他に類を見ない本です。
アルゴリズム本の中でも群を抜いてわかりやすい本です。
アルゴリズム本は様々にありますがまずはこの本から手に取ることをお勧めします。
扱われているアルゴリズムも選択ソートやクイックソートといったソート系のアルゴリズムや、
幅優先探索やダイエクストラのアルゴリズムなどといったグラフ系のアルゴリズムや、
greedyアルゴリズムや動的計画法などの教科学習系のアルゴリズムなど幅広い分野に渡っています。
またこのグロッキングシリーズは数多く書籍が出ています。
ただし、著者は違っており、わかりやすさで言うとこの「グロッキングアルゴリズム」よりはやや劣ります。
とはいえ、わかりやすく説明しようという姿勢がありますので、
学びたい分野においてグロッキングシリーズの書籍があった場合はまず目を通してみるのをお勧めします。
いずれもオライリーサブスクで読むことができます。
C#初心者によるClassメモ

###個人的メモに過ぎないので悪しからず。

        private void button1_Click(object sender, EventArgs e)
        {
            //型Sampleにて変数を作成①
            Sample sampl = new Sample();
            sampl.Name = "佐藤";
            sampl.division = "総務部";
            sampl.No = 10;
            //型Sampleにて変数を作成②
            Sample sampl2 = new Sample();
            sampl.Name = "鈴木";
            sampl.division = "営業部";
            sampl.No = 20;
            //List<Sample>型を作成
            List<Sample> sa = new List<Sample>();
            //Listに追加する
            sa.Add(sampl);
            sa.Add(sampl2);
            //Listの中身を表示
            foreach (var s in sa)
            {
                Console.WriteLine($"{s.Name},{s.division},{s.No}");
            }
        }
        public class Sample
        {
            public string Name { get; set; }
            public string division { get; set; }
            public int No { get; set; }
        }

出力結果
佐藤,総務部,10
鈴木,営業部,20

Classで作成し、型名に使用したいClassを宣言すればSample型の変数が作成できる。
List<>の型をclassにする事で二次元配列も作れます。
【カメラ目線】NVIDIA Broadcast 1.4 の Eye Contact を使ってみた

# ■ はじめに

NVIDIAが「NVIDIA Broadcast 1.4」を発表しました。このツールにより以下の機能をリアルタイムに使用することができます。
* **アイコンタクト（Eye Contact）**
カメラから目線が外れても黒目の位置と目の開き方などを自動修正し、カメラ目線であるかのように見せられる。
ビデオ会議でメモや台本を読みながら話しても相手の目を見ているように見えるため、聴衆とのエンゲージメントを高めることができる。
現時点ではベータ版。

* **ビネット（Vignette）**
周囲を暗くし、自分にスポットライトが当たっているかのように演出できる。
顔を追従してエフェクトがかかる位置を自動調整することもできる。

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

> この新しいアップデートでは、まったく新しい効果「アイコンタクト」が追加されました。
> 例えば、台本を読んでいるときに、カメラを見ているように見せることができます。
> また、バーチャル背景の品質も向上し、新しい「ビネット」では、背景のぼかしと組み合わせてクールなボケ味を演出することができます。

https://www.nvidia.com/en-us/geforce/news/jan-2023-nvidia-broadcast-update/

# ■ 動作確認環境

- OS：Windows 11
- CPU：Intel Core i7-9700F
- GPU：GeForce RTX 2060 SUPER

# ■ 導入方法

ダウンロードは [こちら](https://www.nvidia.com/en-gb/geforce/broadcasting/broadcast-app/)
※ System Requirements を満たしていることを確認
![download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/873482/30bb9be0-e149-84c0-9566-65da5d6caf79.png)
インストールの途中で以下の画面が出た場合はドライバの更新が必要です
ドライバのインストールは [こちら](https://www.nvidia.co.jp/Download/index.aspx?lang=jp)
![nv.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/873482/6b148f2a-d86a-dec5-ab95-a582375b8b86.png)

# ■ 使ってみる

NVIDIA Broadcast を開き、カメラ ＞ エフェクト から「アイコンタクト（ベータ版）」を有効にします。
「ビネット」を有効にすると、下の画像のように顔から離れた箇所が暗くなります。顔追跡と強度の調整が可能です。
![NVIDIA BROADCAST.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/873482/544a9645-43d3-b6d3-096b-3d0dfa363f2c.png)
フリー動画で比較実験をしてみました。右側の女性はカメラ目線になっていることがわかります。
<br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/hbeTzIwwiyI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

# ■ Zoomでの使い方

ビデオから「Camera（NVIDIA Broadcast）」を選択します。
これで Zoom 会議でメモを読んでいてもカメラ目線で話しているように見えます :fire:
![zoom.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/873482/47dda4b4-fe24-8b0a-a871-472f23a51ce8.png)


# ■ 使ってみた感想

最後に使ってみて気付いたことを共有します。

- **目線が行ったり来たりする**
カメラから目線を外し続けている状況で、数秒おきにカメラ目線になって外れてというのが繰り返されることがあり気になりました。今後のアップデートに期待。

- **よく観察するとツールを使っているのがわかる**
カメラ目線へ修正されたとき「黒目が大きいな！」と感じました。イケメンになれます。
あと目線修正時に睫毛が消えてしまうところからもツールの使用を読み取れます。

- **今回追加された機能以外も便利**
地味にいいなと思ったのは、カメラプロパティから画角を調整することができること（ズーム、縦横シフト）。
![camera_control.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/873482/e0faa599-3994-d78e-6e88-1154c86a983b.png)

- **自動起動はしなくていいかな**
おまかせでインストールすると Windows 開始時に自動で起動する設定になっていますが、毎回自動で起動させるほど使わなさそうだったのでチェックを外しました。

- **スピーカーのエフェクトは微妙**
「ノイズ除去」と「ルームエコー除去」を NVIDIA Broadcast 内のサンプル音源で試すと「あ、いいな。」という印象だったのですが、オンにしたまま YouTube を見たり会議をしたりしたところ、音が途切れて聞きづらくなることがありました。
/etc/named.conf の主な設定項目

●/etc/named.conf の主な設定項目（ステートメント）
・options namedの動作詳細(オプション)を設定
・acl access control lost。アクセス制御の対象とするIPアドレスやネットワークアドレスのリストを任意の名前で定義
・controls namedを操作するrndcコマンドの使用を許可するホストを指定
・include 指定された外部ファイルを読みこみ、その内容を/etc/named.confに追加
・zone ゾーン(管理するドメインの範囲)を定義
GitHub ActionsからFly.ioにデプロイしようとして失敗する場合の解決方法

Remixで提供されている**Indie Stack**の**deploy.yml**と同じ設定内容で、GitHub ActionsからFly.ioにデプロイ使用したら次のようなエラーが発生して**Deploy Production**のステップで失敗しました。

```shell
Error failed to fetch an image or build from source: Could not find image "registry.fly.io/..."
```

https://github.com/remix-run/indie-stack/blob/main/.github/workflows/deploy.yml

調べてみると、**Kent C. Dodds**本人が2023年1月19日にFly.ioのフォーラムに投稿していました。

> I’ve had this happen twice in a row. I get this error during my deploy step of my GitHub action:
> Searching for image 'registry.fly.io/kcd:main-3545aab8e426caa832abb6b7439a843a20e75ee0' remotely...
> Error failed to fetch an image or build from source: Could not find image "registry.fly.io/kcd:main-3545aab8e426caa832abb6b7439a843a20e75ee0"


https://community.fly.io/t/deploying-to-fly-via-github-action-failing/10171

そしてこの問題の解決方法ですが、**Set up Docker Buildx**の部分で、`version: v0.9.1`を設定すると解決します。

```yaml
- name: 🐳 Set up Docker Buildx
    uses: docker/setup-buildx-action@v2
    with:
      version: v0.9.1
```

原因としては、GitHubがUbuntuランナーを更新したため、**BuildKit**のバージョンが`0.9.1`から`0.10.0`にアップデートされてしまったことに由来するそうです。そのため根本的な解決に至るまでは、前のバージョンの`0.9.1`を明示的に指定することで問題を解決することが推奨されています。

https://community.fly.io/t/deploying-to-fly-via-github-action-failing/10171/19
VSCodeの便利ショートカット

便利なショートカットを聞いたのでメモ。

・行を上（下）へコピー・・・オプション＋シフト＋上（下）
・行を上（下）へ移動・・・オプション＋上（下）
・選択項目の全てにカーソル・・・⌘＋D
・ズームイン、ズームアウト・・・⌘＋シフト＋+、⌘＋-
・開いているファイルの移動・・・⌘＋オプション＋左右
・ショートカット一覧・・・⌘K＋⌘S
・インデント、アウトデント・・・⌘＋]、⌘＋[
・キーボードショートカット一覧・・・⌘K + ⌘S
・インテリセンス・・・⌘I
Vuetifyのthemeをcssで使用する

# はじめに
Nuxt + Vuetifyにて、themeを使って統一した色のUIを実装しようと思っていたのですが
themeで設定した色をcssで使う方法ってないのかなと色々ググった際の備忘録をこちらに記載します。
間違い等ございましたらご指摘いただけますと幸いです。

# 環境
- Nuxt.js 2.15.8
- Vuetify 2.6.12

# 結論
これで実装できました。
```java:nuxt.config.js
theme: {
      dark: false,
      light: true,
      themes: {
        light: {
          primary: '#1976D2',
          secondary: '#424242',
          accent: '#82B1FF',
          error: '#FF5252',
          info: '#2196F3'
        },
      },
     // customProperties を有効にすると、css 変数 を各テーマの色ごとに生成する
      options: { customProperties: true },
    },
```

```java:page.vue
<style scoped>

/* var(--v-{テーマ名}-base) で実装する */
.bg {
  background-color: var(--v-primary-base);
  color: var(--v-secondary-base);
}

</style>
```


# 経緯
ここからは経緯となります。時間がある方だけ読んでいただけますと幸いです。
vuetifyでは実装できない細かい機能（マーカーのような下線）を実装しようと思いましてcssにて実装しました。
ただ、基本的にはthemeで色を設定していたので、cssに直接色を設定するのは冗長的になりそうで嫌でした。


そんな時に下記記事を拝見しまして、その通り実装したら成功しました。

https://zenn.dev/azukiazusa/articles/5a69cbcca75113

この実装により、色を変更したいと思った際に
theme部分の色を変えるだけで一気に全ての色が変わるので
とってもハッピーです。


ちなみに後から気づきましたが、公式のドキュメントにも記載ありました。。。
完全なる見落としです。。

https://vuetifyjs.com/ja/features/theme/#section-30ab30b930bf30e030d730ed30d130c630a3

おわり。
【Linux】grepコマンドで複数条件指定する方法

## AND検索

複数の文字列を含む行を取得するには以下のように実行します。

```zsh
$ grep '1' sample.txt | grep '5'
12345
```

`1`と`5`の両方が含まれる行のみ取得できています。

## OR検索

複数の文字列のいずれかが含まれている行を取得するには以下のように実行します。

```zsh
$ grep -e '1' -e 'D' sample.txt
12345
ABCDE
123
```

または正規表現を使用して以下のように実行します。

```zsh
$ grep -E '1|D' sample.txt
12345
ABCDE
123
```

上記どちらの方法でも`1`または`D`を含んだ行を取得できています。
初期化子のメリット

初期化子とは


new演算子によって、オブジェクトのインスタンス作成直後に、インスタンスの持つメンバ変数に値を設定することができる優れもの。
C#3.0で導入されたもので、初期化子が存在する前は下記のように実装する必要があった。

```
Product product = new Product();
product.Id = 1;
product.Name = "MacBook";
product.Price = 200000;
```

別にこれでも問題はないが、
自分とは違う人が改修などを行う中で、それぞれの行にコードが入ってくるかもしれない。

例に当てはめるために無理やり行を挿入する。
下記のような実装は起こりえないが、
もっと複雑になってくると、意味のあるまとまりはパッと分かったほうが読みやすかったりもする。
```
// 不要な行が入り込むことで可読性が落ちる
Product product = new Product();
Shop shop = new Shop();
shop.Id = 102;
shop.Name = "PCショップ新宿店";
product.Id = 1;
product.Name = "MacBook";
product.Price = 200000;
```

オブジェクト初期化子を利用する。
まとまりが見てわかりやすい。
```
Product product = new Product{
    Id = 102,
    Name = "MacBook",
    Price = 200000
};
```
org.h2.jdbc.JdbcSQLSyntaxErrorException: Table "PERSON" not found; SQL statementエラー

<br>
エラー内容。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3097775/630aeb2e-429a-e815-2f4a-2953a06dd74e.png)

resources/data.sqlにテストSQLを書いて
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3097775/4bbbedf3-80fc-3a9c-cfa1-625d211fa763.png)

以下のテストコードを実行すると、テーブルを見つけられないエラーが発生してしまった。。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3097775/d3e5f2b3-5281-0e0e-e9f8-43fdb9e057f7.png)

エンティティクラスにEntityアノテーションを定義してあったのに、テーブルを参照できないとエラーが発生した。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3097775/bdbea454-2f6a-3916-36d9-c71bf3a0999f.png)


それで色々調べてみたら、springboot2.5 versionがリリースによりある設定が必要になった。

https://github.com/spring-projects/spring-boot/wiki/Spring-Boot-2.5-Release-Notes

>Hibernate and data.sql
By default, data.sql scripts are now run before Hibernate is initialized. This aligns the behavior of basic script-based initialization with that of Flyway and Liquibase. If you want to use data.sql to populate a schema created by Hibernate, set spring.jpa.defer-datasource-initialization to true. While mixing database initialization technologies is not recommended, this will also allow you to use a schema.sql script to build upon a Hibernate-created schema before it’s populated via data.sql.

<b>If you want to use data.sql to populate a schema created by Hibernate, set spring.jpa.defer-datasource-initialization to true</b>

data.sqlを使って、Hibernateにより作成されたスキーマをpopulateするためには「spring.jpa.defer-datasource-initialization」をtrueに設定する必要があるとのこと！
以下のように、application.propertiesに設定しておけば、assertionエラーは出ているが先のテーブル参照エラーは解消したのがわかる！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3097775/ef4bd922-4d81-a24b-7f02-dea80a3afa44.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3097775/3aa1578c-af5a-1587-0459-ea7f2892d8af.png)
Epics DAO がオープンソースプロジェクトに対して$EPCTトークンエアドロップを行います

![AirdropForOpenSourceProject.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780317/e59727b1-afcb-87d6-ab15-fcd60aff83cb.png)


Epics DAO は、日頃から開発者の助けになっているオープンソースプロジェクトに対して$EPCT トークンのエアドロップを行うことを発表しました。

## 日々重要性が増していく中、深刻なリソース不足に陥っているオープンソース開発

![MarketTrendsJA.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780317/e5a009cc-4656-54f3-aa2b-56001a380c91.png)
![ProblemJA.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780317/f26cac09-044a-3095-a495-c5ee022f3771.png)


2022 年、全てのコードベースにおけるオープンソースソフトウェアの占める割合は 78%に上りました。
この 12 年間でソフトウェア開発現場におけるオープンソースソフトウェアの利用は一気に業界標準となりました。
現在のイノベーションにオープンソースソフトウェアは不可欠と言っても過言ではありません。

しかし、現在もオープンソース開発への貢献は基本的に無償で行われているため、日々オープンソースソフトウェアの重要性が増していく中、オープンソース開発は深刻なリソース不足を引き起こしています。

一方でオープンソースソフトウェア開発に専念して生活を送りたい開発者も数多く存在しています。

私たちは Web3 トークンエコノミーの力でこのリソース不均衡問題の解決に取り組んでいます。

詳細 (スライド): https://speakerdeck.com/epicsdao/epics-buidl-to-earn-ri-ben-yu

## $EPCT トークンエアドロップ for オープンソースプロジェクト

![WhatIsEPCTJA.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780317/d5b5b240-b673-1044-9a18-00a2a0915ccf.png)


Epics DAO は対象のオープンソースプロジェクトそれぞれに対して 100,000 $EPCT (2023/1/23 現在の価値に換算すると $1,250) のエアドロップを行います。(最大 400 プロジェクト)

Solana Labs の DAO ツールプロジェクトである Realms( https://app.realms.today/discover )やマルチチェーンオラクルの DIA( https://www.diadata.org/ )、ストリーミングペイメントプロトコルの Zebec( https://zebec.io/ )等がすでにエアドロップ対象オープンソースプロジェクトとなっています。

$EPCT を利用して Epics プラットフォーム上で解決したい GitHub issue に対して報奨金クエストを作成できます。

開発者は Epics 上の報奨金クエストをクリアすることで$EPCT を獲得できます。

※ 2023/1/31 の IDO 後に$EPCT は$USDC との交換が可能になります。

エアドロップ詳細(スライド): https://speakerdeck.com/epicsdao/eadorotupu-for-opunsosupuroziekuto

エアドロップ申込みフォーム for オープンソースプロジェクト: https://forms.gle/GUA6HECmzWugtyjL6

## Epics - 分散型クラウドソーシングプラットフォーム

![EpicsBusinessModelJA.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780317/12e96292-2ea4-ee52-3f07-3f264602f894.png)


Epics はオープンソースソフトウェア開発にインセンティブを与えるための分散型クラウドソーシングプラットフォームです。

依頼者は GitHub issue を懸賞クエスト(スマートコントラクト)として公開し、開発者を募集できます。
開発者は懸賞クエストに参加し、クリア(issue の解決)することで賞金(トークン)を受け取ることができます。

開発者は得意分野の issue 解決に集中でき、依頼者はより高度な問題を解決できるようになります。
また、需要の高い issue には多くの懸賞金がかかるようになるため、優先度の高い問題から解決できるようになります。

Epics により、ソフトウェア開発現場に起きているリソースの不均衡を解決します。

開発者にとっては得意な技術を存分に発揮し伸ばしていける世界を実現でき、依頼者にとってはより高品質なオープンソースソフトウェアの開発及びオープンソースソフトウェアをもっと安心に利用できる世界を実現できます。

オープンソースソフトウェアをより信頼できる高品質な世界的ソフトウェア資産として発展させることに貢献していきたいです。

Epics プラットフォーム: https://alpha.epics.dev/ja
VirtualBox上のWebサーバーにアクセスする方法


VirtualBoxにLinuxサーバーを立てたはいいが、Webサーバーを構築し、ローカルからウェブページを表示するにはどうしたらいいんだ？と思い、実際に構築してみました。

### 構築環境
Linuxサーバー：CentOS7
Webサーバー：Apache2.4

## apacheのインストール&設定
提供されている Apache httpd 2.4 を確認してみる
```
yum info httpd
```
Apache httpd をインストールする
```
yum -y install httpd
```
Apacheが自動起動されるよう設定する
```
systemctl enable httpd.service
```
Apacheの起動と停止を確認する
```
systemctl stop httpd.service
systemctl start httpd.service
systemctl status httpd.service
```
ファイアーウォールの設定
ファイアーウォールにhttpアクセスを許可する設定をする
```
firewall-cmd --add-service=http --zone=public --permanent
firewall-cmd --reload
```
## virtualboxでポートフォワードを設定する
virtual box設定からネットワーク→ポートフォワーディング設定で、
ポートフォワーディングルールを追加する
【追加ルール】
| 名前 | プロトコル | ホストポート | ゲストポート |
|:-:|:-:|:-:|:-:|
| Roule1  |  TCP | 80 |  80 |

## webサーバーへアクセス
以下のurlへアクセス
```
127.0.0.1:80
```
テストページが表示されたら、アクセス成功！
![テストページ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/441682/b753d891-1a77-141e-27c2-e88603b4e797.png)
## 参照リンク
[Apache httpd 2.4 を CentOS 7 に yum でインストールする手順](https://weblabo.oscasierra.net/apache-installing-apache24-yum-centos7-1/)
[virtualbox上のゲストOSのApacheHttpServerへアクセスする](https://www.gigas-jp.com/appnews/archives/8299)
?. オプショナルチェーン

例えばundefinedやnullか配列の変数に対して、includes()を使用するとエラーになってしまう可能性がある

```tsx
const a = undefined
const hasOne = a.includes('1') // Uncaught TypeError: a.includes is not a function
```

そこで、変数がfalsyの場合はincludes()を実行しないという処理を挟む必要がある

```tsx
const a = undefined
const hasOne = a && a.includes('1')
```

このようなとき、オプショナルチェーンを使用すると簡潔にかける

```tsx
const a = undefined
const hasOne = a?.includes('1')
```
クラウドワークスでExcelVBA関連での副業を試みた

# なぜクラウドワークスに登録したか
・無計画に旅行計画を建てた代償としての資金ショート
・パチスロたのc～✌︎('ω')✌︎


...まじめな理由も記載すると
・自分のできること現在地確認
・依頼を投げる層はいわゆるエンドユーザー層なので依頼内容的に自分の本業でやってることとマッチすると思った



# 私のスペック
QE(1年)
Excel職人
VBA中級(自称)
Uipath中級(自称)
Winactor中級(自称)

本業では運用現場での自動化・効率化・標準化などを担当しており、
現場の課題収集～開発～運用～評価まで一気通貫で行っている。



ユーザーがいる業務システムであったりの開発・保守をゴリゴリしている純開発ではなく、運用内の現場技術者としてキャリア5年ほどなので準開発といったところ(こういうの一般的になんていうんだろう？社内エンジニア？)

# 結果



契約件数：1件
稼いだ金額：38610円

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351505/82e1e771-0096-bb9c-cea1-1c7702177ac6.png)



登録から早3か月ほど、
1日1時間ほど副業するとして時給2000円程度を考えたとき
2000円×30日×3か月　＝180000円

くらいはいけるだろうと思ってました。
現実は厳しい


# なぜプロクラウドワーカーになりそこねたのか。
「～できるようにしたい、～作って」というクラウドワークスを利用するクライアント側の運用現場目線でのニーズと自分の経験・スキルがマッチしやすそうだ　というのはあながち間違ってませんでした。
クラウドワークスには常に依頼側の現場で起こってる様々な課題がひっきりなしに新規案件として登録されています


ただ誤算はそれらの案件への申し込み総数の多さと単価の安さでした。



**・供給過多**
VBAを使った自動化や、ツール作成は要件が案件内容として明確化されていればされているほど申込数が多く(30件～50件くらい)、申し込んでもなかなか契約成立しませんでした。
要件を読みこんで自己紹介と解決へのアプローチを記載して応募する。もちろんこれに報酬は発生しないため、契約成立しなかったらその時間は無駄になります。


**・単価が安い**
記載された要件からざっくりと見積もるに数十時間以上工数がかかりそうと思われる案件も1万～3万などで募集があり、それにすら応募が複数件入っていることもあります。
さすがにこの報酬では...と要件と自身のスキルとマッチしそうでも応募を見送らざるをえませんでした


# 継続して報酬を得るコツ(かもしれない)
私は応募しませんでしたが、案件の中には具体的にどんな実装をしたいのかが明記されておらず、ふんわりとした情報と報酬だけが提示されてるものが多数あります。
「いや、その情報だけではなにをすればいいかわからないよ...」
ではなく「なんとかなるやろ」でとりあえず応募して契約して要件を深堀りしていくのがいいのかもしれません。
そういった案件には応募も少ないので、それらの案件が穴場なのかも(？)


(ただ単価が安く時給換算でいくとその深堀りする時間だけで提示報酬超えてしまいそうだな...というものも)


# 気を付けたい点
クラウドワークスで依頼を出されてる方は、個人もしくは中小企業が多い印象でした。
そのためシステム的な要件出しなどを具体化することに慣れていない方が多く、そのため依頼もざっくりふわふわしてるものが多いです。
契約後も具体化するためのヒアリング、機能要件化しての双方の合意　が非常に大事そうだなと印象を受けました。



私が受けた1件はまさしくシステム的知識が乏しい中小企業の経営者様で、○×という課題を●×したいと思っているけど何をどう伝えたらいいのか何をしたらいいのかわからない、ということで丁寧にヒアリングをして完成イメージややりたいことを具体的に聞き出し、双方のイメージに相違が生まれないよう処理順イメージやUIも常に共有、相談しながら実装を進めました。
(具体的には完成UIのイメージのみのファイルを作ったり、どこに何を反映させたいか反映させるときの変換ルールをまとめていただくマッピングシートを作成して記入いただいたり)



# 所感・まとめ
・稼ぐには案件を選ばず、どんどん応募するのが吉(?)
・報酬を気にしすぎず自身のスキルを高めたいという場合にもあり
・応募から契約にも時間はかかる
・契約したあとのヒアリングやメッセージやりとり、検品などただただ手を動かす時間以外にも多くの時間が割かれることを忘れずに。


>契約したあとのヒアリングやメッセージやりとり、検品などただただ実装する以外にも多くの時間が割かれることを忘れずに

正直これの時間も報酬に含めて適正報酬を考えはじめると応募する案件がほとんどないな...というのが私の所感です。



# 結論
報酬？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351505/2bd0d7be-c16d-777e-81ad-39605cdb3079.png)

と報酬は度外視して
自身の技術的研鑽とクライアントとのコミュニケーションなどを磨きたい方クラウドワークスという選択肢はいいかもしれません。
スクロールに合わせてJavaScriptを実行  IntersectionObserver

<h1>はじめに</h1>
スクロール追従を利用して
・テキストのアニメーション
・画像や装飾の表示遅延
などを行いたいと思いIntersectionObserverというAPIを使って
以上のことを実現する。

IntersectionObserverを使ってスクロールに合わせて
アニメーションを発火させてみます。



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

childを監視対象として登録しchildの要素が決められた範囲に入ることでクラスinviewを付与する仕組み。

以下javascriptへ記述する際の必要手順と必要要素
・ioに監視したい対象のDOMを登録する
 ・childを監視対象とし画面外に出た時と画面内に入ったときにインターセクションオブザーバーの監視によってコールバック関数cdをその都度呼び出す
 ・entry.targetには取得したDOM情報が格納されている
・if文でtrueであれば取得したchildにinviewをクラス付与しfalseであればremoveメソッドでinviewのクラスを削除する

・optionsをオブジェクトリテラルで定義してプロパティを定義する。
・root：（交差対象とした親の要素をすることができる）大体nullと設定する（viewport）
・rootMargin:（親の範囲のどこから交差点とするか設定できる）
    "-100px 0px 0px 0px"←上の画面から-100pxの値から交差点になる。
・threshold:（0-1まで設定できる）上から入る場合は下辺が0上辺が1下から出る場合は上辺が0下辺が1となる
Githubとxcodeプロジェクトファイルの紐付け

# Githubとxcodeプロジェクトファイルの紐付け

まず、 githubにリポジトリを作成してください。

つぎに、 xcodeにプロジェクトを作成します。
(iosを選択すると、Storyboardを選択できるよ)
![2023-01-23 18.53のイメージ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1690272/e76b45bf-9263-997c-3cb5-0c42b3853d8b.jpeg)

プロジェクト名を保存して、ファイルを作成してください。

ターミナルで　xcodeのプロジェクトファイル　に移動する。
`$ cd プロジェクト名`

githubとターミナルを紐付ける。
`$ git config --global user.name "Gitのユーザー名"`

`$ git config --global user.email "メールアドレス"`

##### 【githubにアップしたくないものを入れておくファイルの作成】
touchコマンドで作成
`$ touch .gitignore`

gitignoreを開くコマンド
`$ open .gitignore`

参考
https://github.com/github/gitignore/blob/main/Swift.gitignore
https://www-creators.com/archives/1662
https://ios-docs.dev/xcode-gitignore/

#### 〜ローカルリポジトリでの作業〜
ターミナルで以下のコマンドを実行
`$ git init`

変更されたファイルをステージングエリア（ステージ、インデックスとも呼ばれます）に追加する
`$ git add ファイル名`
もしくは全部のファイルをステージングさせる
`$ git add .`

登録されている状態を確認するコマンド
`git status`

コミットメッセージを記入
`$ git commit -m "first commit"`

コミットされたことを確認する
`$ git log`

#### 〜リモートリポジトリに更新〜
`$ git remote add origin “リポジトリのURL”`

リモートリポジトリにプッシュ
`$ git push -u origin main`
(今まで”master”でしたが、最近”main”に変わりました。)


##### 【おまけ】
現在いるブランチの確認
`$ git branch`

新しいブランチを作る
`$ git branch ブランチ名`

別のブランチに移動する
`$ git checkout ブランチ名`
【2023年1月版】LightsailでWordPressを構築してみた

# 前提条件
- AWSアカウント作成済み


# LightsailコンソールでWordPressインスタンスを作成する
AWSマネジメントコンソールにログイン後、検索ボックスでLightsailを検索し、Lightsailコンソールを開きます。

![aws-lightsail1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396155/59a3cd5f-f5bf-f3aa-6b80-333491375f0d.png)

Lightsailコンソールを開いたら、インスタンスの作成をクリックします。

![aws-lightsail2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396155/50ed7554-d98e-6d62-4bd4-d9064312a3fb.png)

インスタンスを作成するリージョンを選択します。
![aws-lightsail3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396155/dad3f41b-ae84-7545-e9d2-b38d5918d760.png)

インスタンスタイプを選択します。
今回は一番安い$3.5のものを使用します。
![aws-lightsail4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396155/53b7b8e1-80ca-8012-4987-251a4e01b480.png)

最後にリソース名を設定します。
今回はデフォルトのままで作成します。
![aws-lightsail5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396155/0c99c105-db9e-d4bf-4aa1-60fd2c63128c.png)

作成後、以下のように表示されていればインスタンスが無事作成完了となります。
![aws-lightsail6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396155/3115184d-4e3d-812e-51e1-769a78c89c9c.png)

# WordPressインスタンスにSSH接続し、WordPress管理サイトのパスワードを取得

次にWordPressの管理サイトにログインするためのパスワードについて確認していきます。
先ほどの画面から、コンソール画面を開きます。
![aws-lightsail7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396155/bf9de4c2-9fbf-7cae-4a9b-dc858caf1ca8.png)

コンソールでWordPressインスタンスにSSH接続後、以下コマンドを実施し、管理サイトのデフォルトパスワードを取得します。
```
cat $HOME/bitnami_application_password
```
![aws-lightsail8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396155/74b872ff-527f-48f0-922a-66cac345a7e6.png)

# WordPress管理サイトにログインする
次に先ほど、取得したパスワードを利用し、管理サイトにログインを行います。

ブラウザで以下操作を実行します。

http://PublicIpAddress/wp-login.php

PublicIpAddressはWordPressインスタンスのパブリックIPアドレスに置き換えます。
![aws-lightsail9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396155/88219cb5-919e-ad7a-47c5-64b641e111ca.png)

管理画面が開くことができたら、ユーザー名に「user」、パスワードに先ほど取得したパスワードを入力し、ログインを行います。
![aws-lightsail10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396155/4fde6fba-bd3b-44ee-56ae-0a6a2d94e696.png)

無事ログインできたら、OKです。
![aws-lightsail11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396155/4f61d9ab-1fc0-5a43-5656-3b6cf654264b.png)

# Lightsail の静的 IP アドレスを作成して WordPress インスタンスにアタッチする
現在の状態だと、インスタンスを停止してから、再度実行した場合にIPアドレスが変わってしまうので、静的IPアドレスを設定し、IPアドレスが変わらないようにします。

ホーム画面で静的IPアドレスに変更するインスタンスをクリックします。
![aws-lightsail12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396155/e7772f28-f61b-ccd1-f156-11cef7bf8514.png)

次にネットワーキングタブの静的IPをアタッチするをクリックする。
![aws-lightsail13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396155/6b6912ff-ba3e-713f-5741-791123048d84.png)

リソース名を指定の値に設定し、作成、およびアタッチをクリックする。
![aws-lightsail14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396155/e426d311-95d2-5e4f-24a4-1214d311f029.png)

以下画面が表示されたら、静的IPの設定は完了。
![aws-lightsail15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396155/271ba434-4e1d-f5ca-cee8-8bc12690598e.png)

# 参考サイト
https://kosiro.tech/aws/lightsail-wordpress-construction.html
[ミーティング] そのミーティング、本当に必要？

# 目的
日々開催されるミーティングの問題を減らすために、ミーティングの必要性について考える
# 記述しないこと
- ミーティングにおける必要性についての言及以外のこと（範囲が広いのでこのような表現にした）
# ミーティングの必要性
- ビジネスにおいてミーティングは`ものすごくコストが高い`
- 例えば１時間のMTG時給2,000円 × 15人 × 年間48回 = 年間約144万円 + 場所代
- はてさて、本当に必要なのそれ？？
## 一旦のミーディングのムダを考えてみない？
- ミーティングは1時間が当たり前じゃないよ
    - 話す内容によって時間は変化するよ
- ミーティングに参加するけど発言しない
    - その時間を他の業務に費やした方がいいかもしれない
- 資料ヨミヨミ、説明ウケウケ（何もアウトプットせず）
    - チャットで共有すればOKでは？
## ミーティングをやめない言い訳をしてるかも？
- みんなで顔を合わせないと！！
    - 他の人は本当にそう思っているの？
- これまでも慣習的にやっていたからね！
    - 一番ダメなパターンだね。理由になっていない
## 不要なミーティングをやめてみる
- あれ？このミーティング必要なくね？と思ったら、勇気を出して一旦やめてみる！
    - 意外とミーティングやらなくてもなんとかなることもある
    - チャットで報告・共有でもOK？

## 典型的なミーティングのパターンを知る
これに当てはまらないミーティングは意味がないかもしれない。。。要注意！
### 意思決定
課題を解決し、ネクストアクションを定める
### アイデア出し
新しい、革新的なアイデアを出し合う
### 進捗報告
業務がオンスケで進んでいるかを定期的、周期的に確認する
### その他
情報共有、1on1等


## 参考
[【 ミーティングのムダをなくす 】効率的なミーティング＆ファシリテーションの基本ルール【クイック学習コース】](https://www.udemy.com/course/efficient_meeting/)
Golangの学習環境を爆速で構築する【Docker】

## はじめに
普段はLaravelを使って開発をしているのですが、静的型付け言語も学習してみたいと思い、Golangの学習を始めました。そこでGolangの学習環境を構築したので、記事にします。

今回作成した環境のコードはGithubにあげているので、良ければクローンして使ってみてくださいね。

P.S. スターなんかを付けてもらえると泣いて喜びます・・。

■Golangの学習用環境はこちら

https://github.com/fumiakikobayashi/go-learning-environment

## 本環境の使用方法 〜初回セットアップ編〜
※ 事前にDocker Desktop for MacやDocker Desktop for Windowsなどでご自身のPC環境にDockerのインストールは済ませておいてください

はじめにリポジトリをクローンして、対象のディレクトリに移動します
```
$ git clone https://github.com/fumiakikobayashi/go-learning-environment.git
$ cd go-learning-environment
```
下記コマンドを実行してコンテナを立ち上げてください。（`make`コマンドを使用することで、`Makefile`に定義しているコマンドを実行することができます。）

※ このコマンドは初回のみ実行します
```
$ make build
$ make up
```
続いて`make ps` コマンドを実行し、コンテナが`runnning`になっていることを確認してください
```
$ make ps
NAME                            COMMAND             SERVICE             STATUS              PORTS
go-learning-environment-app-1   "/bin/sh"           app                 running         
```
これで環境の構築は完了です。最後に実際にgolangを実行できるかどうか確認します。


下記コマンドを実行して、コンテナに入ります。
```
$ make app
```
`go run main.go`で`main.go`を実行します。下記のように現在時刻が表示されれば成功です。
```
$ go run main.go
Welcome to the playground!
The time is 2023-01-23 12:20:52.048513751 +0000 UTC m=+0.000050001
```

## 本環境の使用方法 〜日々の使い方編〜
ここからは日々使用する際にどのようなコマンドを実行すればいいのかを解説していきます。

まずは開発をする前にDockerのコンテナを立ち上げます。
```
$ make up
```
これでgolangを実行する準備が整いました。あとは`main.go`に試したいコードを書くか、新しいファイルを作成して、そこにコードを実装していきます。

実行する際はコンテナ内に入り、ファイル名を指定して実行します。
```
$ make app
$ go run main.go
```
開発を終える際はDockerコンテナを停止させます。
```
$ make stop
```
## おわりに
以上で、Golangの環境構築は終了です。何か質問等あればお気軽にコメントください！
'ascii' codec can't encode characters in position 80-88: ordinal not in range(128)　エラー対策

###  'ascii' codec can't encode characters in position 80-88: ordinal not in range(128) エラー対策メモ

BigQuery から 全角を含むデータを取得する場合など

```
# -*- coding: utf-8 -*-
import sys
import io
sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')

```
JavaScript行き過ぎた結論(4)

JavaScriptフレームワークの中でもReactは、高い人気を誇っています。今回は、Reactでvis.jsを使って、ネットワークグラフを表示し、そのグラフ上のノードを選択した時に、そのノードをインジケーターとして表示する方法について考えます。

以下は、Reactでvis.jsを使ってネットワークグラフを表示し、そのグラフ上のノードをインジケーターとして表示するためのサンプルコードです。

```Copy code.js
import React, { useRef, useEffect } from 'react';
import vis from 'vis';

const NetworkGraph = ({ nodes, edges }) => {
  const containerRef = useRef(null);

  useEffect(() => {
    const network = new vis.Network(containerRef.current, { nodes, edges }, {});

    network.on("selectNode", function (params) {
      var nodeId = params.nodes[0];
      var node = nodes.get(nodeId);
      node.color = node.color === 'red' ? 'blue' : 'red';
      nodes.update(node);
    });
  }, [nodes, edges]);

  return <div ref={containerRef} />;
};

export default NetworkGraph;
```

In this example, the NetworkGraph component takes in nodes and edges data as props, which are used to create the network graph using the vis.Network constructor. The component also sets up an event listener for when a node is selected, which updates the node's color to indicate whether it is selected or not.

You can pass nodes and edges data to this component like this:


```json.js
const nodes = new vis.DataSet([
  { id: 1, label: 'Node 1' },
  { id: 2, label: 'Node 2' },
  { id: 3, label: 'Node 3' }
]);

const edges = new vis.DataSet([
  { from: 1, to: 2 },
  { from: 2, to: 3 }
]);

<NetworkGraph nodes={nodes} edges={edges} />
```

このサンプルコードは、ReactのuseEffectを使って、vis.jsのNetworkを使ってグラフを表示し、そのグラフ上のノードを選択した時に、そのノードをインジケーターとして表示することができます。

このサンプルコードを使用するためには、vis.jsとReactのライブラリが必要です。また、実際に使用する際には、カスタマイズが必要になるかもしれません。

この記事は、技術的な知識を深めるための一助になれば幸いです。

最後になりましたが、この記事は、人工知能によって書かれたものであることはご承知願います。
CloudFront to ALBで502エラー|原因はキャッシュキーとオリジンリクエストが未設定

# 状況
CloudFront →（SSL）→　ALB →　EC2 →　RDSのような構成で502エラーが発生しました。

# 原因
CloudFrontで502が発生する原因は様々ありますが自分のケースではCloudFrontのビヘイビアタブのキャッシュキーとオリジンリクエストの設定が初期設定のままというのが原因でした。

# キャッシュキーとオリジンリクエスト
CloudFrontのコンソールからビヘイビアタブを開くと「キャッシュキーとオリジンリクエスト」という項目があります。
ここで何を設定しているかというとHTTP通信でやりとりされるクッキーやクエリ文字列などの情報をCloud Frontに保存するかどうかという設定を行なっています。これらの設定をすることで通信処理によっては表示速度を速められたりします。

# 設定
前提として今回はパスパターンがデフォルト（*）の設定を行います。
つまり全てのファイルに適用されるものですので当然PHPなどの
動的なプログラムファイルも含まれます。
以下実際に適用した設定になります。

「Cache policy and origin request policy」にチェックを入れます。
キャッシュポリシーの項目は「CachingDisabled」を選択します。
これで全ての通信はキャッシュされなくなります。
オリジンリクエストポリシーの項目は「AllViewer」を選択します。
キャッシュポリシーはどのくらいの期間データを保存するかを設定し
オリジンリクエストポリシーはどのようなヘッダを含んでオリジンに送信するかを設定しています。

# 備考
ちなみに上記はPHPファイルなどを含む全てのファイルに対しての基本設定です。この基本設定の他に*.jpgなどの静的ファイルごとにキャッシュをする設定を加えることでCloudFrontにファイルを保存し、表示を高速化することができます。

# 参考
[キャッシュポリシーの公式ドキュメント](https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/using-managed-cache-policies.html?icmpid=docs_cf_help_panel)
[オリジンリクエストポリシーの公式ドキュメント](https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/using-managed-origin-request-policies.html?icmpid=docs_cf_help_panel)

ちなみにその他の原因で502が返ってくることも少なくないようです。
[CloudFrontからの502を解決するー公式ドキュメント](https://aws.amazon.com/jp/premiumsupport/knowledge-center/cloudfront-502-errors/)
Springでポートフォリオを作成する

# Springでポートフォリオを作成する
本日からSpringを用いてポートフォリオを作成する過程を投稿していきたいと思います。
今回は、まず始めに要件定義を書いていきます。

# 要件定義
## プロジェクト名
*ToDoQuest*

TODOリストにRPG要素を組み合わせたWebアプリを作成していこうと思います。
名前は今考えました。

## プロジェクト概要
- [ ] TODOリストとRPGを組み合わせ楽しみながらタスクを管理する 
- [ ] 業務の効率化を図る 

TODOリストとRPG要素を組み合わせることで、本来つまらないであろう仕事を少しでも楽しく取り組めるようにしていきたいという目的があります。

## 既存のプロセス
現在はメモ帳にTODOリストを作成し、終わったタスクをマークするというプロセスになっています。

## 現状の問題点
### 自分
- [ ] タスクのやり/抜け漏れが多い 
- [ ] メモ帳でTODOリストを作成してもすぐにやめてしまう 
- [ ] タスクを放っておいて提出物などの期限が過ぎてしまうことがある 

### メモ帳
- [ ] どのタスクが残っているか一目見てわかりづらい 
- [ ] タスクを記入し、終了したタスクをマークするだけなので面白みがない 
- [ ] 期限が迫っている場合、教えてくれる機能がない 
- [ ] ルーティーンタスクを毎回書かなくてはいけない 

## ゴールの設定(本来あるべき状態、目指す状態)
### 自分
- [ ] タスクのやり/抜け漏れをない 
- [ ] TODOリストの作成を継続できる 
- [ ] これまでのTODOリスト作成の時間を減らす 

### TODOリスト
- [ ] 一目見てやるべきタスクが分かる 
- [ ] 使いやすさ、わかりやすさ 
- [ ] タスクをこなすごとに自分(アバター)が成長していく 
- [ ] 終わっていないタスクは通知機能で知らせてくれる 

## 現状とゴールのギャップ(解決すべき課題の洗い出し)
- [ ] 技術不足(サーバーへのアップロード、Batch処理、デザイン、設計ノウハウ、その他諸々) 

## ヒアリング(システムに何を求めるか？)
- [ ] ユーザー目線 
    - [ ] 一目見て分かる操作性 
    - [ ] 処理速度 
    - [ ] デザイン性、面白さ 
    - [ ] セキュリティの高さ
    - [ ] 不具合のなさ 

今回は個人開発なので、この部分に関しては予測して書いております。

## 達成するゴールを数値で明確化
- [ ] 基本設計(画面レイアウト、DB、必要機能の洗い出し):2週間 
- [ ] 開発:2ヶ月 
- [ ] テスト(仕様書作成、単体/結合テスト)、サーバーへのアップ:2週間 

今回はシステム開発を行い、事業をするわけではないので売り上げなどの目標があるわけではないです。なので、開発期間をゴールに定めました。

## クリアすべき課題に分解 
- [ ] サーバーへのアップロード方法
- [ ] Batch処理(必要か未定)
- [ ] DBの設計 
- [ ] UIを高める画面設計
- [ ] 保守性の高いコード 
- [ ] 処理速度

## ゴールの達成条件をSMARTに沿って整理 
- [ ] Specific（ゴールが具体的か？）→OK 
- [ ] Measurable（進捗を数値で測れるか？）→OK 
- [ ] Achievable（達成可能か？）→OK 
- [ ] Relevant（当初の困りごとが解決するか？）
    - [ ] タスクのやり/抜け漏れが多い→OK 
    - [ ] メモ帳でTODOリストを作成してもすぐにやめてしまう→OK 
    - [ ] タスクを忘れ提出物などの期限が過ぎてしまうことがある→OK 
- [ ] Time-bound（期限が明確か？）→OK 

## システムに実装したい機能 

### TODOリスト要素 
- [ ] 終わっていないタスクは設定した期限が近付くと通知する 
- [ ] ルーティーンワーク、TODOワーク、提出物に分ける 
- [ ] 期限が迫っているタスクに関しては色が赤に変化する 
- [ ] タスク毎に重要度を決める(3段階ぐらい) 
- [ ] 日、週、月ごとに現在のやるべきタスクが見れる 

### RPG要素 
- [ ] タスクをクリアするとポイント(経験値)やお金が貰える 
- [ ] 期限内にタスクが終了しないとポイント(経験値)やお金が減る 
- [ ] 一定のポイントを貯めるとLevel Up 
- [ ] お金で装備やアイテムを買える 
- [ ] 敵を倒す 
- [ ] ストーリを進められる 
- [ ] 仲間を集めてギルドを作れる 
- [ ] 職業を選べ、変更できる 

実装したい機能を書き出しましたが、おそらく全て実装することは技術的にも時間的にも現実的ではないので、最初はこの中からいくつか選択して実装していこうと思います。

# 最後に
今回の要件定義はUdemyの以下のコースを受講した際の資料を参考に書いてみました。

https://www.udemy.com/course/digisaku_requirements_definition_and_system_design/

また、今回は参考にしたアプリがあるので載せておきます

https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica&hl=ja&gl=US
【メタバース】その日私はQiitaのメタバース制作記事を更新してなかったので書く。#programming #Rust #metaverse

# 黒歴史()

https://qiita.com/NknightA/items/c6553e0f13792f898fa2


もはや黒歴史くらい内容の薄い過去のメタバース記事の続きです。

とはいえ今回も簡易的な3Dとウィンドウシステムのテストですが、体の調子がいいうちにアウトプットしてきます(苦笑)

# 今回の演目is...

今回やることは

- electron(JS&C++?)からTauri(TS&Rust)への切り替え

- ThreeJSの実質発展版であるBabylonJS(Typescript版)
 
 
の導入でごわす。

# 導入方法

### 前提知識

これからはRustの実行環境とマネージャー的なやつのcargoとかpnpmとかnodejsとかを導入済みとして進めていきます。
わかんない人はggって(大変)

んでpnpm create tauri-appしてもいいのですが、私は余分なファイルも持ってこられるのは個人的に(あくまで個人的に)嫌なので一度nextjs(Typescript)で事前に手動配置したものに以下の手順で導入

```
CLIツール導入
pnpm install --save-dev @tauri-apps/cli


Rustのコード生成
pnpm tauri init

```


これでsrc-tauriフォルダが生成され最小限の構成で始められます。


次にBabylonJSを導入します。もとはJSのライブラリですが、将来を見越して(?)TS版を導入しています。

```
pnpm install @babylonjs/core
```

以下簡易的なキューブ表示用ソース。

```typescript

import { NextPage } from "next";
import * as BABYLON from "@babylonjs/core";
import { useRef, useEffect } from "react";
import style from '../styles/babylon.module.sass'

const Babylonjs: NextPage = () => {
    const ref = useRef(null);

    useEffect( () => {
        const renderCanvas = document.getElementById(
            "renderCanvas"
        ) as HTMLCanvasElement | null;

        const engine = new BABYLON.Engine(renderCanvas, true);
        const scene = new BABYLON.Scene(engine);


        scene.createDefaultCameraOrLight(true, true, true);

        scene.createDefaultEnvironment();

        const boxSize = 0.3;
        const box = BABYLON.MeshBuilder.CreateBox("box", { size: boxSize });

        box.position.addInPlaceFromFloats(0, boxSize / 2.0, 0);

        engine.runRenderLoop(() => {
            scene.render();
        });
    } )

    return (
        <canvas
            id="renderCanvas"
            className={style.Main}
            style={{ width: 700, height:700}}
            ref={ref}
        ></canvas>
    );
};

export default Babylonjs;
```

※サンプルなのであまり詳しく説明できないっす。すまそ。

ただ全体的にThreeJSのTS版もといNextJS版の延長線上な感じがします。


行数的には大体一緒ですが、ライブラリがすごい優秀なのでこれだけでマウスでぐりぐりしたりズームとかもできるようになっちゃいます。

# いつもの()

以下のリポジトリで(ry

メタバースプラットフォーム開発者募集中!!!!

https://github.com/NknightA/project-V-E-Rust
【備忘録】単体テスト用データ作成

この記事ではSQLServerを使用。

単体テストを行うにあたってテストデータを作成する必要がある。
Excelファイルから作成でもいいが、データ変更するには手間がかかるので、今回はメモとして一時テーブルを使用した作り方を記載する。

やり方としては
追加したいテーブルデータをSELECT文で取得
↓
一時テーブルに格納
(ここで変更したい箇所をUPDATE）
↓
追加したいテーブルに一時テーブルで変更したデータをinsert

↓実践
```
-- 一時テーブルが存在した場合は削除
DROP TABLE IF EXISTS #WORK_TABLE
;

SELECT * 
INTO #WORK_TABLE
FROM TEST_TABLE
WHERE 1=1

-- 一時テーブルで修正したい箇所を変更
UPDATE #WORK_TABLE
  SET TEST_CL1 = '1'

INSERT INTO TEST_TABLE
SELECT * FROM #WORK_TABLE

```
以上
草莽Erlang ── 35. lists:nth



口で言うより行うことがErlang習得への近道と信じています。

https://qiita.com/mnishiguchi/items/9237780e849d80a85e11

## lists:nth/1

リストのN番目の要素を返します。リストが空の場合はエラーになります。

https://www.erlang.org/doc/man/lists.html#nth-1 

要素の数え方は「１、２、３ぁっダー！」です。例えば最初の要素のインデックスは`1`となります。

https://youtu.be/AWxwmqzbOaw

https://youtu.be/FSz7N5hCltw

https://note.com/awesomey/n/n4d8c355bc8f7

```erlang
> lists:nth(3, [a, b, c, d, e]).
c

> lists:nth(3, []).
** exception error: no function clause matching lists:nth(3,[]) (lists.erl, line 198)
```

[listsモジュール](https://www.erlang.org/doc/man/lists.html)には他にもリスト処理のための関数がたくさんあります。

## Elixirにも挑戦したい

闘魂ElixirシリーズとElixir Schoolがオススメです。

https://qiita.com/torifukukaiou/items/3b65e5c04fa8c55f526e

https://elixirschool.com/ja

https://qiita.com/piacerex/items/09876caa1e17169ec5e1
日本割当IPレンジを定期的に ipset で add/del する Shell Script

~~~shell:ipset-whitelist-corn
#!/bin/bash

function log2 {
    local x=0
    for (( y=$1-1 ; $y > 0; y >>= 1 )) ; do
        let x=$x+1
    done
    echo $x
}

MAILTO='example@example.jp'
DATAURL='http://ftp.apnic.net/stats/apnic/delegated-apnic-extended-latest'
ROOTDIR='/root/ipset'
WHITELIST_LABEL='WHITELIST'
LOG_FILENAME="${ROOTDIR}/${WHITELIST_LABEL}.log"
HISTORY_LOG=${ROOTDIR}/history_log

IPSET='/sbin/ipset'

mkdir -p ${ROOTDIR}
${IPSET} create -exist ${WHITELIST_LABEL} hash:net

WHITELIST_FILENAME="${ROOTDIR}/${WHITELIST_LABEL}.ipset"

date >>${LOG_FILENAME}

[ -e ${WHITELIST_FILENAME} ] \
&& awk '{print $3}' ${WHITELIST_FILENAME}|sort|uniq|egrep '^[0-9]' \
> ${WHITELIST_FILENAME}.before

curl -s ${DATAURL} \
| grep JP \
| grep ipv4 \
| while read r; do
IPNUM=$(echo $r|cut -d\| -f5)
BIT=$(log2 ${IPNUM})
echo $(echo $r|cut -d\| -f4)/$(expr 32 - ${BIT})
done \
> ${WHITELIST_FILENAME}.tmp

[ ! -s ${WHITELIST_FILENAME}.tmp ] \
&& echo "${WHITELIST_FILENAME}.tmp is empty!!" \
&& exit 1

cat <<EOL >> ${WHITELIST_FILENAME}.tmp
EOL

cat ${WHITELIST_FILENAME}.tmp|sort|uniq|egrep '^[0-9]' \
> ${WHITELIST_FILENAME}.after

[ ! -e ${WHITELIST_FILENAME}.before ] \
&& touch ${WHITELIST_FILENAME}.before

diff ${WHITELIST_FILENAME}.before ${WHITELIST_FILENAME}.after \
| egrep '^(>|<)' \
| while read r; do
echo $(echo $r|sed -e "s/</del ${WHITELIST_LABEL}/" -e "s/>/add ${WHITELIST_LABEL}/")
${IPSET} $(echo $r|sed -e "s/</del ${WHITELIST_LABEL}/" -e "s/>/add ${WHITELIST_LABEL}/")
done 2>&1 \
| tee -a ${LOG_FILENAME} \
| mail -s ipset_update_mail-parknet-ne-jp ${MAILTO} >> ${LOG_FILENAME} 2>&1

mkdir -p ${HISTORY_LOG}
mv ${WHITELIST_FILENAME} ${HISTORY_LOG}/${WHITELIST_LABEL}.ipset.$(date '+%Y-%m-%d-%H-%M')

${IPSET} save ${WHITELIST_LABEL} > ${WHITELIST_FILENAME}

exit 0
~~~
生のPHPでフリマサービスを作る_part2

### この記事のシリーズ
 - [生のPHPでフリマサービスを作る_part1](https://qiita.com/daichi_hasegawa_stars/items/22f12b7c9aa019781b27)


## フリマサービス作成の流れ
1.機能を洗い出す
2.画面設計（今回はPHPの深掘りがメインなので割愛します）
3.テーブル設計
4.クラス設計 ← 今回はここ
5.実装


## クラス設計
色々とクラス設計のやり方や考え方はあると思うが、、
今回はとにかく可能な限りクラスを作ることにする。

※この段階だと最初に思いつく範囲でしか出てこないので、必要に応じて増やしたり減らしたりします。


##### まずは、エラー発生時の処理やDB接続などのなくてはならないものからクラス化

- Errorクラス
    - エラー発生次の対応
- Databaseクラス
    - DBへ接続
- Varidateクラス
    - バリデーションをまとめたクラス
- Constクラス
    - 定数などをまとめたクラス


##### 各機能ごとにクラス化

- Registerクラス
    - ユーザー登録
    - 退会
- Loginクラス
    - ログイン
    - ログアウト
- Userクラス
    - プロフ登録
    - プロフ編集
    - プロフ更新
- ResetPasswordクラス
    - パスワード変更
- RemindPasswordクラス
    - パスワードリマインダー
- Productクラス
    - 商品一覧表示
    - 商品詳細表示
    - 商品登録
    - 商品編集
    - 商品削除
- ProductSerachクラス
    - 商品検索
- Bordクラス
    - 掲示板
- Favoriteクラス
    - お気に入り


ひとまずはこれくらい。
次回はユーザー登録機能から作ってみる

## ユーザー機能の実装
次回へ
【SwiftUI】Textを全て大文字で表示する

# はじめに
Textを全て大文字で表記したい時、以下のようなやり方をしてませんか？
私はしてました。
```swift
Text("APPLE")
Text("Apple".uppercased())
```

専用のModifierがあったので記事にしておきます。

# やりかた
### 全て小文字
```swift
Text("Apple")
    .textCase(.lowercase)
```

### 全て大文字
```swift
Text("Apple")
    .textCase(.uppercase)
```
# おわり
結構SwiftUI使ってると思いますが、意外と知らない機能も多いなと感じました。
【TBD】Web5ウェブ実装の悩み...

# そもそもWeb5ってナンダ?

Web5とはツイタを作ったジャックドーシーおじさんが提唱した現行のWeb2の次の次、Web3の次の世代となるインターネットの概念みたいなものです。

https://developer.tbd.website/projects/web5

本人的にはWeb2+3でweb5だそうです。なんじゃそりゃ。

# Web5やdidプロトコルの実装について...

https://github.com/TBD54566975/dwn-sdk-js

　
現在はこのリポジトリのソースをベースにいろいろ挑戦しているのですが...日本語はもちろん英語での開発方法もあまり情報がないため毎日手探りで開発を行っております。

またWeb5と同時に提唱された独自のプロトコルであるDIDもこれまたややこしく、フォーマットについての説明は全部英語ですし...この記事を書いておきながらいまだに人に説明できるほど習得できていないです(^^;


# DIDプロトコルの形式について、

DIDていうのは従来のhttpsみたいなものらしく、リンクの形式としては

```

did:example.com:1234456788

```

てな感じで、末尾の数値列はNFTなどの仮想アイテムのID等になっているようです....むずい

# 最後に...

以下のrepoで自分なりにweb5のテストとかやってます。よろぴく。

https://github.com/NknightA/project-V-web5


https://github.com/NknightA/
UNDOとREDOの違い

# 「UNDO」と「REDO」の違い

UNDOとREDOの違いを学習したのでその備忘録。

上記の違いに関して、簡単に言うと

### UNDOは「実行したことをなかったことにする」ものであり、<BR>REDOは「一度実行したことをもう一度行う」もの。
<br>

||  UNDO  |  REDO  |
| ---- | ---- | ---- |
|使用タイミング    |  過去のデータが必要なときに使用<br>(例)トランザクションのロールバックなど |  コミットした内容を再度実行するときに使用<br>(例)障害発生時など  |

文字を見るだけで、どういうものかパッと出てくるようにしておきたい、、、
devise導入手順まとめ

# 導入手順
1. Gemfileにライブラリのインストール
2. deviseの設定ファイルのインストール
3. モデルの作成
4. テーブルの作成
5. deviseのviewの作成
６. ストロングパラメーターについて

## 1. Gemfileにライブラリのインストール
gemfileに以下を追加する。
```
gem 'devise'
```
ターミナルで自分のアプリケーションのディレクトリで以下を実行する。
```
bundle install
```

## 2. deviseの設定ファイルのインストール
ターミナルで以下を実行する。
```
rails g devise:install
```

## 3. モデルの作成
ターミナルで以下を実行する。
```
rails g devise モデル名
```
ルーティングが自動追加される。
```config/routes.rb
Rails.application.routes.draw do
  devise_for :モデル名s
end
```
## 4. テーブルの作成
モデルを作成するとマイグレーションファイルが作成されている
必要なテーブルを追加する。
```db/migrate/20XXXXXXXXX_devise_create_モデル名s.rb
class DeviseCreateUsers < ActiveRecord::Migration[6.0]
 def change
   create_table :モデル名s do |t|
     ## Database authenticatable
     t.string :email,              null: false, default: ""
     t.string :encrypted_password, null: false, default: ""
     t.string :name,               null: false

     ## Recoverable
     t.string   :reset_password_token
     t.datetime :reset_password_sent_at

     ## Rememberable
     t.datetime :remember_created_at

     # 省略

     t.timestamps null: false
   end

   add_index :モデル名s, :email,                unique: true
   add_index :モデル名s, :reset_password_token, unique: true
   # add_index :モデル名s, :confirmation_token,   unique: true
   # add_index :モデル名s, :unlock_token,         unique: true
 end
end
```
※例として、name, null: falseは追加しました。
テーブルの内容を追加して以下を実行する。
```
rails db:migrate
```
## 5.deviseのviewの作成
ターミナルで以下を実行する。
```
rails g devise:views
```
```app/views```配下にdevise専用のviewを配置する。

## 6.deviseのストロングパラメーターについて
viewでサインアップ時に入力した内容はパラメーターとしてサーバーに送信される。
deviseを使用しない通常のリクエストは、悪意のあるパラメータを受け取らないように、コントローラーにストロングパラメーターを記述し、受け取るパラメーターを制限している。deviseも同様だが、gem内にコントローラーが記述されているため、コントローラーの編集ができないようになっている。
deviseでは、```application_controller.rb```に```devise_parameter_sanitizerメソッド```を利用してパラメーターを受け取ることができるようになる。
```application_controller.rb```は全てのコントローラーが継承しているファイルのことで、通常のコントローラーに加えて、deviseのコントローラーも継承している。
deviseのコントローラーはgem内に記述してあるため編集ができないが、```application_controller.rb```に処理を記述することでパラメーターを読み込ませることができるようになる。
```application_controller.rb
class ApplicationController < ActionController::Base
  before_action :configure_permitted_parameters, if: :devise_controller?

  private
  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:deviseの処理名, keys: [:パラメーター名])
  end
end
```
if: :devise_controller?の部分はdeviseの処理```（sign_up, sign_in, :account_update）```のみを判断し処理を実行する。
Spreadsheet のセルから「ファイル名」「シート名」を取得する

# はじめに

Spreadsheet のセルから「ファイル名」、「シート名」を取得出来るようにします。
デフォルトの関数には無いので GAS で関数自作します。
コピペで行けます！怖くないよ！

# 手順

* スプレッドシートを開く
* 「拡張機能」→「Apps Script」でスクリプトエディタを開く
* 以下コピペし保存
```javascript
// スプレッドシートのファイル名を取得
function GET_FILE_NAME()
{
  return SpreadsheetApp.getActiveSpreadsheet().getName();
}

// スプレッドシートのシート名を取得
function GET_SHEET_NAME()
{
  return SpreadsheetApp.getActiveSpreadsheet().getSheetName();
}
```
* スプレッドシートに戻る
* セルに以下入力で「ファイル名」取得
```
=GET_FILE_NAME()
```
* セルに以下入力で「シート名」取得
```
=GET_SHEET_NAME()
```

# スクリーンショット

## 「拡張機能」→「Apps Script」でスクリプトエディタを開く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35514/e4c1f55f-b9da-3924-7c4f-0d26398015ca.png)

## スクリプトエディタでコピペ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35514/0654dc81-36c2-3a1e-40eb-cf48291dd6c0.png)

## スプレッドシート上での取得結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35514/d38a7aed-d1e1-2d69-da84-ab89f6317bb5.png)

# 実際の僕の使いたかった状況

* やりたいこと
  * ファイル名を「XXデータ_202301」等月毎に作成し、各ファイルへは直近1年分のデータが突っ込まれているが、毎月「最新月の情報」をまとめたい
* 本件対応前
  * 「最新月の情報」まとめ時、その月の数字を手動入力しフィルタする
* 本件対応後
  * 「最新月の情報」まとめ時、ファイル名の「202301」等からその月の数字を自動で取得し、フィルタ条件にしてまとめ作成

＃シート名も似たような感じなので略

# 参考

## Google Apps Script Spreadsheet Reference

https://developers.google.com/apps-script/reference/spreadsheet

## Google スプレッドシートの関数リスト

https://support.google.com/docs/table/25273?hl=ja