OmniAICreator/Qiita-1.07M huggingface dataset:
CSSのtable-cellとwidthの競合と、DB設計とER図

# 今日もCSSの競合で困った
今日も今日とて（昨日か）フロントエンドの修正をしておりました

laravel-adminのgridを使って、
データベースから取得したデータを表示しておりました

tableheaderとtabledataがありまして、
今日の議題はth(tableheader)の方でございます。

### ヘッダーを横移動させつつ、縦スクロール時には固定して、tdの幅にthを合わせて、スクロール時にズレない様にしたい！

ということを実装しておりました。むりじゃろ。

overflowを使えばいいのですが、
tableが2つのレイヤーに分かれており、
下レイヤーのthを固定と横スクロールさせるのに苦戦したのは前の記事をみてくださいまし。

本日は、headerの幅をtdに合わせることに意外と苦戦してしまった話。

tdの横幅の値は、取得できた。
headerの初期位置も取得できた。
（取得するのに2時間ほどかかったが。）

さて、thに横幅を適応させたら終わりじゃおらぁ！
と思っていましたが、

position:table-cellと、
widthが競合するとのことでした。

検証ツールでは、width:（取得した値）pxと表示されているのに、
ブラウザ上では、変わっていない、、、

困っておりましたところ、その2つが競合しているということがわかりました。

### 対応方法はゴリラ式で。
なんとか対応はできましたので、共有をば。
table-cellと競合しているのならoverrideすればいいじゃない。

ということで、
```Javascript
lowerHeaderCells[index].style.setProperty('display', 'inline-block', 'important');
```
positionをoverride！！
これで上書き、ブロック要素にしてしまえばCSSが適応されました。
（今回は横一列にしたかったので、inline-blockで）

### まとめ
いやー、こんな単純なことだったとは、、1時間で終わる予定が5時間くらいかかりましたよ。。
なかなかどうして、急がば回れということですな。
色々お勉強になりましたわ。

もうちょっとだけ続くのじゃ。

#DB設計とER図
今日はDB設計とやらをER図作ってみましたよ。

なんのデータが必要か、、、
正規化とは、、、

この辺が今日の学び。

第１正規化とやらをやりましたよ。
参考 https://tech.012grp.co.jp/entry/db_normalization

私なりの正規化の理解は、
一つのカラムに複数の値が入る場合は、
別にテーブルを用意した方が、管理しやすいよ。
ということだと思っていますがどうでしょう。
```
user table
id 1
follower 2,3,4,5
follows 3,5 
```
こうなると、データが管理しにくいぽい
```
user table
id 1
follows 1
```
```
follows table
id 1
follows 1:2

id 2
follows 1:3

id 3
follows 3:1
```
こんな感じでテーブル作って管理するのがいいらしい。
少し腑に落ちてはないが、
これから恩恵を受けることを信じて、バッチリ正規化していってみるでござる。

第２正規化、第３正規化は、また元気な時に。

### まとめ
データベースの設計は楽しかったのだ、設計楽しい。まとめるの好き。

最近は刺身こんにゃくにハマっている。安くて日持ちしてうまい。
ダイエットにも最適かも。シュッと絞っていきますか。
でも運動はしたくない。

おわり。
Go Interfaceの実装漏れを検知する

## はじめに
GoのInterfaceの実装です。Interfaceを利用すると実装、テストが楽になるのでInterfaceを実装したサンプルを記載します。

## 実装
```shell:ディレクトリ構成
~/go/src/go_sample$ tree
.
├── domain
│   ├── service.go
│   └── user.go
├── go.mod
└── main.go

2 directories, 4 files
```

```go:main.go
package main

import (
	"fmt"
	"go_sample/domain"
)

func main() {
	user := domain.User{}
	fmt.Println(user.Walk())
}
```

```go:service.go
package main

type IUserService interface {
	Talk() string
	Walk() string
}
```

```go:user.go
package domain

type User struct {
	Name string
	Age  int
}

func (u User) Walk() string {
	return "歩きます"
}

// func (u User) Talk() string {
// 	return "話します"
// }

```
　→`Talk()`はあえてコメントアウトしてます。

```shell:実行結果
~/go/src/go_sample$ go run main.go
歩きます
```

## 課題
Interfaceを定義していないので、実装漏れが出てきてしまいます。そこで、Interfaceを利用して実装します。

```go:user.go
package domain

var _ IUserService = User{}

type User struct {
	Name string
	Age  int
}

func (u User) Walk() string {
	return "歩きます"
}

// func (u User) Talk() string {
// 	return "話します"
// }

```
【Flutter】APIとImage.networkでの認証のはなし。。

## 起きたエラー
Flutterにて、HTTPのBasic認証を通じてAPIから記事の一部を取得し、`Image.network`で画像を表示しようとしたら、何らかの理由でエラーが発生し、画像の表示が失敗しました。
以下コードの一部です。

```dart:sample.dart
Future<List<Article>> searchArticle(String keyword) async {
    final url = Uri.parse(
        'https://example.com/wp-json/wp/v2/posts?_embed');
    final String username = dotenv.env['USERNAME']!;
    final String password = dotenv.env['PASSWORD']!;
    final String basicAuth =
        'Basic ${base64Encode(utf8.encode('$username:$password'))}';
    final http.Response res = await http.get(url, headers: {
      'authorization': basicAuth,
    });
}
```
今回の例では、WordPressの記事の内容を取得してくるために「WP REST API」を使用しています。



受け取った結果をリストに格納し、`Image.network`で画像を表示しようとしたら、以下のエラーで画像表示に失敗してしまいました。

```
HTTP request failed, statusCode: 401
```

## 原因
Flutterの`Image.network`ウィジェットは、単にURLから画像を取得しようとしますが、認証ヘッダーなどの追加情報なしでは画像を取得することができないようです。

記事を取得するリクエストと画像を取得するリクエストは異なるものであり、それぞれのリクエストで認証が必要でした。。。

## 解決策
なので同様にBasic認証を介して取得します。

```dart:sample_image.dart
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';

class AuthenticatedNetworkImage extends StatelessWidget {
  final String imageUrl;
  const AuthenticatedNetworkImage({super.key, required this.imageUrl});

  @override
  Widget build(BuildContext context) {
    String username = dotenv.env['USERNAME']!;
    String password = dotenv.env['PASSWORD']!;
    String basicAuth =
        'Basic ${base64Encode(utf8.encode('$username:$password'))}';

    return Image.network(
      imageUrl,
      headers: {
        'authorization': basicAuth,
      },
      fit: BoxFit.cover,
    );
  }
}

```
Wで考えるDX推進

![スライド1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646663/7fbef171-ccaf-e5c4-80b8-f2e27cc6b719.png)
こちらの記事は、RPACommunityで開催された～RPALTスピンオフLT会～である、
[**【IT×ガンダム】ライトニングトーク大会 vol.3**](https://rpacommunity.connpass.com/event/291382/) にて登壇した資料の内容説明になります。

# ガンダムシリーズでの「Ｗ」とは
さて、皆様の中で「Ｗ」とは何を指すでしょうか？
ガンダムファンの中ではもちろんこれですよね？<br><br>
そう、新機動戦記ガンダム「 **ウイング** 」です！
![スライド3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646663/b44dd4b7-111d-baae-3765-84ec7c2c49e9.png)
こちらの記事では、作中に出てくる名言についてDX推進に絡めてお話していこうと思います。<br><br>
さらっと雑なストーリ紹介ですが、5人の少年たちを中心に特に戦略や人間性についてのさまざまな葛藤が描かれている作品になります。<br>
ただかなり特殊なストーリーで主人公がヒロイン殺そうとしたり、任務に失敗したらすぐ死のうとしたり、ガンダムの扱いがかなり雑だったり、かなりの問題発言が出てきたりで、ある意味異色なガンダムの作品かな……と個人的には思っております。<br><br>
今回は以下の３つの名言から考えてみようと思います。
![スライド5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646663/94db9988-6df5-14c5-5223-cf6f19bf8008.png)

# １．ことは全てエレガントに運べ
１つ目は「ことは全てエレガントに運べ。」です。<br>
どのような場面での名言かというと、コロニーを攻撃すると脅したガンダムチームが降参し１機自爆までしたのに、残り４機の逃走するガンダムを追撃しようとしたレディ・アンをトレーズがたしなめた一言です。<br>
DX推進の現場では、理想を叶えるために極端な手段をとるという行動をすることはないかと思いますが……自分が正しいと思ったことを、相手の立場を考えず推進しようとするとストップがかかることもあるかと思います。<br>
このことから**相手のウェルビーイングを考えて進めないと相手の納得は得られない**ことが学べました。
![スライド6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646663/b42b097b-32dd-066a-37dd-630cbf1953ed.png)

# ２．たぶん俺達、いいことをしてるはずなんだけどな
２つ目は「たぶん俺達、いいことをしてるはずなんだけどな。」です。<br>
どのような場面での名言かというと、地球圏統一連合のOZが信用できないことを伝えるために懸命に戦うカトルとデュオを平然と見殺しにして、むしろOZに迎合しはじめる宇宙コロニー首脳陣に対するデュオのつぶやきです。<br>
DX推進では推進内容を説明して賛同してもらった人達から裏切られたりする場合になるかと思いますが……<br>
結局は**分かりあうためのコミュニケーションが大切**ということが学べました。
![スライド7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646663/f5dea8e2-5461-7a07-7149-ac50fca1ebee.png)


# ３．一人で戦ってはいけないんだ！一人では目標を見失ってしまうんだ！
３つ目は「一人で戦ってはいけないんだ！一人では目標を見失ってしまうんだ！」です。<br>
どのような場面での名言かというと、ゼロシステムという思考を狂わせるシステムのせいでガンダムを暴走させてしまうヒイロをカトルが止めるシーンです。<br>
DX推進では自分の思い込みで暴走して失敗してしまうケースにあたるかと思いますが……<br>
ここでは**一人でできることは限られるし暴走を防ぐためにも仲間と助け合って目標を達成しよう**という学びが得られました。
![スライド8.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646663/963bc52c-7b3f-936f-e6bc-0523b31a2a69.png)

# 今回の内容を考えて得られた知見
これらの名言から様々な学びが得られましたが、一番言いたいことは……
**所属している場所に仲間がいなくて心がくじけそうなら……外部のコミュニティを活用しよう！**
ということです。
![スライド9.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646663/d1d4ef5a-8048-3a1f-f57f-932d66a79c01.png)
結局賛同してくれる仲間がいなければ、継続するのはかなり困難だと思います。
心がくじけそうなときは、まずは参加してみて下さい！

![スライド10.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646663/54be195b-1b4a-8868-d378-7274d7b29d3a.png)

▼ ちなみに動画はこちら🤣
<iframe width="560" height="450" src="https://www.youtube.com/embed/wSvE2Ja6bCg?si=ZZeRi8LJEc7mrFoc&amp;start=1131" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
Wi-Fiの仕組み

# はじめに
毎週1本様々な技術に関する記事を投稿しています。
もし興味のある方は下のリンクから他の記事も見ていただければ幸いです。
 [@7_inai_](https://qiita.com/7_inai_)

# Wi-Fiとは
Wi-Fiは、`ワイヤレス通信技術の一つで、コンピュータやスマートフォンなどのデバイスがインターネットやローカルネットワークに接続するための無線通信規格`です。WiFiは、IEEE 802.11という規格に基づいて動作します。以下にWiFiの基本的な仕組みを説明します。

# Wi-Fiの仕組み
1. 信号送信
Wi-Fiデバイスは、2.4ギガヘルツまたは5ギガヘルツの周波数帯を利用して、無線信号を送信します。この信号は、周囲の空間を電波として放射されます。
2. アクセスポイント（AP）
Wi-Fiネットワークは、アクセスポイント（無線ルーター）を使用して提供されます。アクセスポイントは、有線ネットワーク（通常はブロードバンドルーター）と無線ネットワークを接続し、無線デバイスと有線ネットワークとの橋渡しを行います。アクセスポイントは、デバイスがネットワークに接続できるようにSSID（ネットワーク名）とパスワードなどのセキュリティ情報を提供します。
3. デバイス接続
WiFi対応のデバイス（コンピュータ、スマートフォン、タブレットなど）は、アクセスポイントに対して無線信号を検出します。デバイスは、SSIDとパスワードを使用してアクセスポイントに接続を試みます。認証が成功すると、デバイスはアクセスポイントと通信するためにネットワークに接続されます。
4. データ転送
デバイスがネットワークに接続されると、データの送受信が可能になります。デバイスはアクセスポイントを介してインターネットにアクセスしたり、他のデバイスと直接通信したりできます。
5. 周波数帯
Wi-Fiは、主に2つの周波数帯（2.4ギガヘルツと5ギガヘルツ）を使用します。2.4ギガヘルツは一般的で広く利用されていますが、混雑しているため、5ギガヘルツは高速なデータ転送が可能であるという利点があります。

# Wi-Fiがモバイル回線より早い理由
Wi-Fiはモバイル回線より高速で通信できますが、その理由は次のとおりです。
1. 周波数帯の違い
Wi-Fiは主に2.4ギガヘルツと5ギガヘルツの周波数帯を使用しますが、モバイル回線は一般的に数百メガヘルツの周波数帯を利用しています。__高い周波数帯はより広帯域でデータを送信できるため、より高速な通信が可能__ です。
2. 基地局の密度
Wi-Fiは、一般的に限られた範囲内で使用されるため、比較的密な基地局配置が可能です。一方、__モバイル回線は広範囲に渡ってカバレッジを提供する必要があり、基地局の密度がWi-Fiよりも低くなる__ ことがあります。より密な基地局配置は、高速かつ安定した通信を可能にします。


# 終わりに
Wi-Fiだけでなく、モバイル回線も高速化が進んでおり、[5G](https://qiita.com/7_inai_/items/41c0cf4dab155041b0f8)などの新しい規格が登場しています。今後はさらなる技術の進化と競争が期待されるため、どちらの技術も進化を続け、ユーザーにとってより高速かつ安定した通信環境が提供されることでしょう。

最後までお付き合いくださりありがとうございました。
ChatGPTで日本語OCRをする(Code Interpreter)

# はじめに
本記事ではChatGPT経由で日本語OCRをする方法について記述したものです。Code Interpreterを使うため、ChatGPT Plusに加入していることが前提条件となります。

# Code Interpreterを使う
まず設定をONにして、Code Interpreterを使えるようにします。
1. Setting&Beta
![スクリーンショット 2023-08-08 220034.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742387/19aa014c-d562-f50b-b635-309e84b89604.png)
2. Settings > Beta featuresからCode Interpreterをオンに
![スクリーンショット 2023-08-08 220053.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742387/a2689c47-ea92-1142-0517-79aa116c55ea.png)
オンにすると、モデル選択欄にホバーしたときにCode Interpreterを選べるようになってます。
![スクリーンショット 2023-08-08 220340.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742387/4fe1ce92-b2b4-b491-28af-d29cb4d56ecd.png)

# 日本語OCR
まずはOCRが本当にできるのか試してみます。英語で実験。
![スクリーンショット 2023-08-08 220719.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742387/d8e31328-a875-5747-aec7-9b2139be9f21.png)
![スクリーンショット 2023-08-08 221117.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742387/529e2cd4-190d-bf7d-0103-f0f1569241a2.png)
成功しました。といっても、内部的にはpythonのコードを実行しているだけなので、pytesseractというOCRのライブラリの力になります。
![スクリーンショット 2023-08-08 221237.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742387/97f0717e-dcc3-fdc8-1c18-79e19b865532.png)
では次は日本語も、といきたいところなのですが、デフォルトでは日本語のトレーニングデータが不足しており、このままでは実行できません。
![スクリーンショット 2023-08-08 221443.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742387/5d3eb500-91b1-3654-92ea-e10978ae1ec2.png)
![スクリーンショット 2023-08-08 221746.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742387/aa30fa5e-3674-fb4a-15e6-28a7efd57b26.png)
「じゃあ、データを用意すればいいんだよね？」
というわけで、日本語のトレーニングデータを用意しましょう。以下のgithubページからダウンロードできます。
https://github.com/tesseract-ocr/tessdata/blob/main/jpn.traineddata
これを画像と同時に添付してやると、日本語OCRも可能になります。
![スクリーンショット 2023-08-08 222507.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742387/4caeb1f6-95cf-1c22-ddd0-5b20f99ccdf9.png)
![スクリーンショット 2023-08-08 222429.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742387/3e3761e1-7e34-c1e0-183a-49fc63a02915.png)

# おわりに
Code InterpreterでPythonのコードを実行できるのは結構嬉しい。後、ファイルの読み取りができるようになったから、クソ長プログラムを解析してほしいときにコピペいらずでファイル投下するだけでよくなったのが個人的には嬉しい。
【Golang】複数の struct をマージする【小さな構造体をダイナミックに組み合わせたい】

> Go 言語（以下 golang）で、JSON データのパース用に複数の構造体（以下 `struct`）を組み合わせたい。つまり、構造体のインスタンスをマージするのではなく、構造体そのものをマージしたいのです。

類似した複数の測定機器から取得した JSON データをパースしたいのですが、JSON データ側の仕様が微妙に異なっていました。

そのため微妙な差異を補った、ほぼ同じ `struct` を複数用意する必要がありました。

シンプルな構造体を組み合わせてダイナミック（動的）に `struct` を作りたいのですが、ダイナミックと言っても `reflection` などを使うレベルではなく、特定のフィールドの組み合わせのみで十分なレベルです。

[「golang struct マージ」とググって](https://www.google.com/search?q=site:qiita.com+golang+struct+%E3%83%9E%E3%83%BC%E3%82%B8)も、シンプルなタイトルや用途の Qiita 記事がヒットしなかったので、自分のググラビリティとして。

## TL; DR <sub><sup>（今北産業）</sup></sub>

> [Embedded Struct](https://go.dev/doc/effective_go#embedding)（構造体の埋め込み）でよかった。

1. 微妙に違う構造の JSON データ

    ```go:パースしたいデータ例
    data1 := `{
        "hoge": "hoge hoge",
        "fuga": "fuga fuga"
    }`
    
    data2 := `{
        "hoge": "hoge hoge hoge",
        "piyo": "piyo piyo"
    }`
    ```
2. 組み合わせ用の小さな構造体

    ```go
    type Foo struct {
    	Hoge string `json:"hoge"`
    }
    
    type Bar struct {
    	Fuga string `json:"fuga"`
    }
    
    type Buz struct {
    	Piyo string `json:"piyo"`
    }
    ```

3. 適宜パターンを組み合わせてパース
    
    ```go
    mix := new(struct {
        Foo
        Bar
    })
    
    if err := json.Unmarshal([]byte(data1), mix); err != nil {
        panic(err)
    }
    ```

:::note warn
このパターンは、シンプルな構造のデータをパースする場合には適してますが、メソッドを絡めたり、逆の JSON データ出力（`Marshal`）といった、ちょっと複雑なことをしようとすると、すぐに限界がきます。
:::

## TS; DR

```go
package main

import (
	"encoding/json"
	"fmt"
)

type Foo struct {
	Hoge string `json:"hoge"`
}

type Bar struct {
	Fuga string `json:"fuga"`
}

type Buz struct {
	Piyo string `json:"piyo"`
}

func main() {
	// 微妙に違う JSON データ
	data1 := `{
		"hoge": "hoge hoge",
		"fuga": "fuga fuga"
	}`

	data2 := `{
		"hoge": "hoge hoge hoge",
		"piyo": "piyo piyo"
	}`

	// パターン1をパースしてプリント
	mix1 := new(struct {
		Foo
		Bar
	})

	if err := json.Unmarshal([]byte(data1), mix1); err != nil {
		panic(err)
	}

	fmt.Println("Mix1:", mix1.Hoge, mix1.Fuga)

	// パターン2をパースしてプリント
	mix2 := new(struct {
		Foo
		Buz
	})

	if err := json.Unmarshal([]byte(data2), mix2); err != nil {
		panic(err)
	}

	fmt.Println("Mix2:", mix2.Hoge, mix2.Piyo)
	
	// Output:
	// Mix1: hoge hoge fuga fuga
	// Mix2: hoge hoge hoge piyo piyo
}
```

- [オンラインで動作をみる](https://go.dev/play/p/Fa9tZ6lRSda) @ GoPlayground

## 参考文献

- [Embedding](https://go.dev/doc/effective_go#embedding) | Effective Go @ go.dev
- [How can I merge two structs in Golang?](https://stackoverflow.com/a/40510391/18152508) @ StackOverflow
opendkimで"key data is not secure:..."が解決しないとき

メール送信時にopendkimが
key data is not secure: opendkim is in group 0 which has multiple users (e.g., "sync")
というメッセージが出て気になり、ネットでググったところopendkim.confに
RequireSafeKeys false
を付ければ解決した、というのがいくつか出てきました。
しかし、私の環境の場合はやってみても解決しません。途方に暮れかけていたとき、ふと思いついて
/etc/opendkim/以下のファイル（まさにkey dataのファイル）のオーナーがrootのものがあったのを全部opendkimにしたところ、解決しました。ちなみにRequireSafeKeys falseは削っても大丈夫でした。
rootなのにnot secureというのがわかりにくかったので、投稿しておきます。
【2023年8月版】VyOSインストールiso作成から、ESXi7/8へのインストール

# はじめに

ESXi で内部のルータとして VyOS 使いたいな。。。
そうだ、インストールしよう！

からの。。。

VyOSの最新LTSは無償では提供されていない。
旧LTSは ova 形式や ISO で提供されている。
最新LTSの ISO は自作しないといけないので、その手順

# 環境

x86_64
Ubuntu22.04
ユーザは dev
EXSi7/8 で実行

# 手順

[公式ドキュメント Build VyOS ](https://docs.vyos.io/en/equuleus/contributing/build-vyos.html)に従って作成する

- Dockerのインストール
- Docker Hub からの Pull
- Build スクリプトの clone
- Dockerコンテナの起動
- Dockerコンテナ内で、ISO イメージの作成
- ISOイメージの確認

# Dockerのインストール

最後に、dockerグループにユーザを所属させておくのがコツ

```terminal
$ sudo apt-get update
$ sudo apt-get -y install \
  ca-certificates \
  curl \
  gnupg \
  lsb-release
$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
$ echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
$ sudo apt-get update
$ sudo apt-get install docker-ce docker-ce-cli containerd.io
$ sudo usermod -aG docker dev
```

# Docker Hub からの Pull

1.3 を pull
equuleus が 1.3

```terminal
$ docker pull vyos/vyos-build:equuleus 
```

# Build スクリプトの clone

```terminal
$ git clone -b equuleus --single-branch https://github.com/vyos/vyos-build
```

# Dockerコンテナの起動

```terminal
$ cd vyos-build
$ docker run --rm -it --privileged -v $(pwd):/vyos -w /vyos vyos/vyos-build:equuleus bash
```

# Dockerコンテナ内で、ISO イメージの作成

```terminal
vyos_bld@d4220bb519a0:/vyos# ./configure --architecture amd64 --build-by "j.randomhacker@vyos.io"
vyos_bld@d4220bb519a0:/vyos# sudo make iso
vyos_bld@d4220bb519a0:/vyos# exit
```

# ISOイメージの確認

ホスト側の `vyos-build/build/live-image-[architecture].hybrid.iso` で ISO イメージが作成されている
ここでは、[architecture] は amd64なので、`live-image-amd64.hybrid.iso` が作成されている

```terminal
$ cd build
$ ls -lh live-image-amd.hybrid.iso
-rw-r--r-- 1 root root 404M Aug  8 13:01 live-image-amd64.hybrid.iso
```

# ESXi7.0 への VyOS のインストール

## VMの作成

以下の要件でVMを作成する

Guest OS family: Linux
Guest OS version: Other 4.x Linux (64-bit)
Memory: 512MB
Hard Disk1: 20GB(Thin provisioned)
CD/DVD: live-image-amd64.hybrid.iso

## VMの起動とインストール

VyOSが起動するので、ログインプロンプトまで待つ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143127/d1f451a8-0172-895d-460f-2cfdbdff80d0.png)

ログインプロンプトが表示されたら、vyos / vyos でログインする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143127/de84af46-b35c-dd2c-e16f-85f0fc6cf15c.png)

install image でインストールを行う

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143127/bc1e3229-71b4-8214-d501-bd2cb2f4fa64.png)

セットアップに必要な情報が聞かれるので答えていく、だいたいはデフォルトで問題ない。
Done! が表示されたら reboot する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143127/fda0b06c-1c4c-878d-b5d4-c6d6702d79c7.png)

セットアップで入力したユーザ名とパスワードでログインする。ログインできれば、インストールは完了。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143127/b63a9c07-cb49-ff8c-a038-b8d470d15374.png)



# さいごに

かんたんでしたね

# 参考資料

- [VyOS](https://vyos.io/)
- [Build VyOS](https://docs.vyos.io/en/equuleus/contributing/build-vyos.html)
【SwiftUI】読み込み中は要素をグレーの長方形で表示する

# はじめに
読み込み中であることをユーザーに伝える方法として`redacted`があります。
`redacted`を使ったので記録しておきます。

# サンプルアプリ
![Simulator Screen Recording - iPhone 14 Pro - 2023-08-08 at 22.12.21.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/4fe5b3ab-e187-3565-12a9-12c31e9b06ff.gif)

# 実装
```swift
import SwiftUI

struct ContentView: View {
    @State private var isLoading = false
    var body: some View {
        VStack(spacing: 50) {
            Text("テキスト")
                .redacted(reason: isLoading ? .placeholder : [])
            
            Button {
                Task { @MainActor in
                    isLoading = true
                    // 長い処理の代わり
                    try? await Task.sleep(nanoseconds: 1 * NSEC_PER_SEC)
                    isLoading = false
                }
            } label: {
                Text("再読み込み")
            }
        }
    }
}
```

# おわり
色々なアプリで使われてる方法なので自分のアプリにも積極的に使っていきたいです。
GPT4のブラウジング機能の代替を`perplexity`で行う

## はじめに

GPT4のブラウジング機能が最新の情報やURLを添付してドキュメントを検索するのに超絶便利だったのですが、7月に急に停止になってしまいました。。。
一応下記のように、再度使えるようになるまで対応を進めているとのことなのですがなかなかすぐには使えるようにはなりそうにないですね。

https://help.openai.com/en/articles/8077698-how-do-i-use-chatgpt-browse-with-bing-to-search-the-web

そのため、同様のことを行うために`perplexity`というものを使ってみました。
chromeの拡張が手軽で便利そうです。

https://www.perplexity.ai/

https://chrome.google.com/webstore/detail/perplexity-ai-companion/hlgbcneanomplepojfcnclggenpcoldo?hl=ja

## 実現したいこと
- GPT4のブラウジング機能のように、最新の情報を引っ張ってきたい
- URLを添付して検索したい

## デモ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1040483/df347972-c746-5040-b60c-ab15c140cd39.png)
非同期処理と同期処理

## はじめに
フロントエンドで理解が必須の、非同期処理と同期処理について書いていきます。

## 非同期処理と同期処理の関係
### 同期処理
ある処理の完了を待たずに、別の処理から実行していく通信方法になります。
サンプルコードで解説します。
```test.tsx
const testMethod = () => {
    console.log('1');
    setTimeout(() => {
        console.log('2')
    }, 1000);
    console.log("3");
}
testMethod();
```
出力結果は以下になります。
```
1
3
2
```

このように、時間のかかる処理を待たずに、別の処理を実行していくのが非同期処理となります。

### 同期処理
同期処理は、非同期処理の逆で、順番に処理を実行していく通信方法になります。
サンプルコードは以下です。
今回は、asyncとawaitを使って、同期処理を実現しています。
```test.tsx
const testMethod = async () => {
    console.log("1");
    console.log("2");
    console.log("3");
}
testMethod();
```
実行結果は以下になります。
```
1
2
3
```
このように、同期処理は、上から順番に処理を行なっていきます。

## 使いこなすためのベストプラクティス
**非同期関数:**
 非同期処理を行う関数は、必ず async キーワードを付けて定義し、await を使用して非同期操作の完了を待つようにします。これにより、コードの意図が明確になり、エラーハンドリングも容易になります。

**Promiseとコールバック:**
 コールバックベースの非同期処理は、コードのネストが深くなる可能性があるため、可能な限り Promise を使用して処理をチェーンすることを推奨します。

**非同期のネストを避ける:**
 非同期処理のネストを深くしないように注意し、必要に応じて Promise.all や async/await を使用して複数の非同期操作を同時に待機することで、コードの複雑さを抑えることができます。

**エラーハンドリング:**
 非同期処理ではエラーハンドリングが重要です。try/catch ブロックを使用して非同期操作の中で発生するエラーを適切にキャッチし、処理するようにします。

**パフォーマンスの最適化:**
非同期処理の適切な活用により、アプリケーションのパフォーマンスを向上させることができます。ただし、過剰な非同期処理は逆にオーバーヘッドを引き起こす可能性があるため、バランスを保つことが重要です。

非同期処理と同期処理の組み合わせにより、アプリケーションの効率性とユーザーエクスペリエンスを向上させることができます。適切な場面で使い分けることで、柔軟で高性能なコードを実現できます。

## 最後に

他にも色々な記事を書いているので、よければ読んでいってください、、、
[基本設計について](https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc)
[Vue.jsとNode.jsでチャットアプリを作った](https://qiita.com/hukuryo/items/265c676d17fe21e75242)
[Next.js×TypeScriptでTODOアプリを作成する](https://qiita.com/hukuryo/items/ebeb26823f944f143b11)
VSCodeでGo開発環境を作成する

# 初めに
最近 プログラミング言語Go という書籍を使ってGo言語を学び始めたので、
Go言語を学習するうえで必要な開発環境を VSCode で整えた時の内容をまとめようと思います。
ただ、公式サイトに載っていることを自分用にまとめただけなので他人にとって参考になるかは怪しいです。

# 開発環境
開発環境は以下の通りです。
最初は Docker コンテナ上で作業を行っていましたが、PCを再起動するたび作業用のコンテナを立ち上げるのがめんどくなったので、WSL上に落ち着きました。
VSCode の導入は記事上では触れません。
- Windows 11 + WSL2（Ubuntu）
- VSCode

# WSL の導入
WSLは今回よりもだいぶ前に導入しておりやり方を覚えていないため、ググった結果を載せておきます。
```cmd
wsl --install

# ディストリビューションを選択したい場合
wsl --install -d {ディストリビューション名}
```
- [日経XTECH Windows 11でWSL2がさらに進化、1コマンドで導入可能に]{https://xtech.nikkei.com/atcl/nxt/column/18/01863/112600005/ }

# Go言語の導入
WSL起動後、下記コマンドを実行します。
`export PATH=$PATH:/usr/local/go/bin`でのパス通しするだけだと、WSLを起動するたびにパス通す必要があるため、`.bash_profile`などでパ通してあげるとよいです。
```bash:install go
wsl # wsl起動

# ホームディレクトリに移動（お好み）
# cd ~    

# linux 用のインストールファイル取得
curl -O https://dl.google.com/go/go1.20.7.linux-amd64.tar.gz   
# 以前のローカルファイルがあれば削除 + go言語のインストール
 rm -rf /usr/local/go && tar -C /usr/local -xzf go1.20.7.linux-amd64.tar.gz
# PATH通し
export PATH=$PATH:/usr/local/go/bin
```
```bash:path
# 下の例はログイン時に`.bash_profile`が読み込まれるため、そこでパスを通している
# cat '[[ -f ~/.bashrc ]] && source ~/.bashrc' >> .bash_profile は.bashrcを読み込ませるため
cd ~
touch .bash_profile
echo '[[ -f ~/.bashrc ]] && source ~/.bashrc' >> .bash_profile
echo 'export PATH=$PATH:/usr/local/go/bin' >> .bash_profile
```

# WSL上からVSCodeを開く
wsl の作業ディレクトリから下記コマンドを実行するだけです。
後は必要に応じてVSCodeの拡張機能を追加します。（Go拡張機能とか）
注意点としてWSL1を使っていた場合は公式のGOの拡張機能のインストールに失敗します。
回避策としては、WSL２に切り替えるもしくはVSCodeの設定から`remote.WSL.fileWatcher.polling`を検索しチェックを入れます。
```bash
# 作業ディレクトリに移動した後
code .
```
```json:VSCode の settings.jsonの場合
"remote.WSL.fileWatcher.polling": true
```

# 終わりに
今回はGo言語の開発環境をVSCodeで整えました。
気が向いたら書籍で学んだことをまとめたり、練習問題などの回答例を挙げていこうと思います。
READMEにGif動画を埋め込む方法

# 1.はじめに
READMEにGif動画を埋め込んでみたので、忘れないために本記事を書きました。
無料のGitHubプランではアップロードの上限が10MBまでとなっているらしく変換が必要とのこと。

# 2.事前準備
QuickTimeで画面収録を行っている。

# 3. 実装
### 1.ffmpegをインストール
- 以下コマンドでホームディレクトリにffmpegをインストールしてください。
```
brew install ffmpeg
```

# 2.movをgifに変換
動画を保存しているディレクトリへ移動し以下コマンドを実行してください。
```
ffmpeg -i sample.mov -vf scale=720:-1 -r 10 sample.gif
```

# 3.issueにアップロード
Githubにて新規issueを作成し、上記で作成したgifファイル（sample.gif）をドロップしてください。
そうすると、URLが表示されるのでそのままREAMEにコピー。
READMEを確認し動画が表示されていれば成功です。
Django4.2にアップグレードしたらrembgがApache2+mod_wsgiで動かなくなった場合の解決

Django4.2からデータモデルのマイグレーションにdb_commentが追加されてドキュメントに便利なので喜んでアップグレードしたところ、Apache+mod_wsgiのWebアプリケーション経由で動かしていたrembgのimportでエラーが発生して動かなくなった時の解決方法の共有です。

環境はAmazonLinux2023ですがCentOS7以降でも同じだと思います。

pip install --upgrade djangoでアップグレードしたところ依存パッケージもアップグレードしてしまい、500 Internal server errrorになってしまいdjangoのコマンドやrunserverではエラーが発生しません。

以下のランタイムエラーが/var/log/httpd/error_logに出ています。

```vim
RuntimeError: cannot cache function '_make_tree': no locator available for file '/home/ec2-user/.pyenv/versions/3.10.11/lib/python3.10/site-packages/pymatting/util/kdtree.py'
```

トレースバックを追うと以下のように`from rembg import remove`のところでこけていました。

```vim
from rembg import remove
/home/hoge/.pyenv/versions/3.10.11/lib/python3.10/site-packages/rembg/bg.py", line 16, in <module>
  from pymatting.alpha.estimate_alpha_cf import estimate_alpha_cf
...(略)...
  disp.enable_caching()
    File "/home/hoge/.pyenv/versions/3.10.11/lib/python3.10/site-packages/numba/core/dispatcher.py", line 863, in enable_caching
...(略)...
File "/home/hoge/.pyenv/versions/3.10.11/lib/python3.10/site-packages/numba/core/caching.py", line 337, in __init__
...(略)...
File "/home/hoge/.pyenv/versions/3.10.11/lib/python3.10/site-packages/numba/core/caching.py", line 337, in __init__

raise RuntimeError("cannot cache function %r: no locator available "
```

というわけでnumbaのパッケージでエラーになっている様子。
調べるとnumbaの0.48より大きいバージョンではキャッシュディレクトリのパスを環境変数に設定しないとエラーが出る様になった様です。

systemctlコマンドで起動時に環境変数を渡せる様にするため、httpdのserviceファイルの位置を確認。

```bash
sudo systemctl status httpd
● httpd.service - The Apache HTTP Server
     Loaded: loaded (/usr/lib/systemd/system/httpd.service; disabled; preset: disabled)
     Active: active (running) since Tue 2023-08-08 11:05:06 UTC; 31min ago
       Docs: man:httpd.service(8)
   Main PID: 122657 (httpd)
     Status: "Total requests: 35; Idle/Busy workers 100/0;Requests/sec: 0.0187; Bytes served/sec: 1.1KB/sec"
      Tasks: 242 (limit: 18904)
     Memory: 984.5M
        CPU: 1min 27.413s
     CGroup: /system.slice/httpd.service
             ├─122657 /usr/sbin/httpd -DFOREGROUND
             ├─122659 /usr/sbin/httpd -DFOREGROUND
             ├─122660 /usr/sbin/httpd -DFOREGROUND
             ├─122662 /usr/sbin/httpd -DFOREGROUND
             ├─122672 /usr/sbin/httpd -DFOREGROUND
             └─122841 /usr/sbin/httpd -DFOREGROUND
```

ということで`/usr/lib/systemd/system/httpd.service`にサービスの起動ファイルがあるので、こちらに環境変数設定行を追加。

```vim
...(略)...
[Service]
Type=notify
Environment=LANG=C
Environment=NUMBA_CACHE_DIR=/tmp # ここを追加
```

以上、これでsystemctl restart httpdで行けました。
rembgもWebアプリケーション上で無事動きました。
Full Interactive Reverse-Shell

# 記事を書こうと思ったきっかけ

よくCTFでシェルを取るときに、取ったはいいものの補完機能がなかったり
Ctrl-cでコネクションを終了してしまったりと、使い勝手が悪かったので
普段のシェルと同じ様に操作ができないか調べていました。
そうしたら、pythonとsttyを使った方法を見つけたので紹介しようと思います。

# 手順

| 順番 | コマンド | 実行する側 |
| ---- | ---- | --- |
| 1 | nc -lvnp [listening port] | 自分 |
| 2 | python3 -c 'import pty; pty.spawn("/bin/bash")' | 標的 |
| 3 | Ctrl-z | 標的 |
| 4 | stty raw -echo; fg | 自分 |
| 5 | reset | 標的 |
| 6 | export SHELL=[your shell] | 標的 |
| 7 | export TERM=[your terminal] | 標的 |

## 補足

Ctrl-zで、取ったシェルを一時的に停止させておき、自分のシェルに戻る。
そしてstty raw -echo; fgを実行すると、また標的のシェルを再開する。
手順2は、手順1ですでに標的のシェルを取得した後の段階で実行するコマンドです。

# 何ができるようになるのか

上記の手順でコマンドを実行すれば、補完機能やCtrl-cを押しても
シェルが終了しなくなります。

# まとめ

今回はReverse-Shellで役立つコマンドを紹介しました。
CTFをやるときなどに役立ててくれるとうれしいです。
MYSQL続き

本日は続きから
使用ツールは XAMPP
学校関連なため伏字あり

# 問題：　各国で最も使われている言語と使用率

解答例
~~~SQL
SELECT 
 country.Name
 , language.Language
 , language.Percentage
FROM
 country
 LEFT OUTER JOIN language
   ON country.Code=language.Code
ORDER BY
 country.Name,language.Percentage DESC;

先生例

SELECT 
 country.Name
 , language.Language
 , language.Percentage
FROM
 country
 LEFT JOIN language
   ON country.Code=language.Code
GROUP BY
   Name ,Language
ORDER BY
   Name,Percentage desc;
~~~~

先生例を踏まえて

~~~~sql

SELECT
  country.Name
  , language.Language
  , language.Percentage
  FROM
  country
  LEFT JOIN language
   ON country.Code=language.Code
  ORDER BY
  Name,Percentage DESC;
~~~~~

本日の学び：　・INNER JOINよりLEFT JOINのほうが件数が多くなる
　　　　　　　・OUTERはあってもなくてもよい

本日の気付き：・WHEREはなくてもORDER BYは使える
今後の目標：　・スマートなコードを心がける
umask

```
[linuxstudy@xxxx ~]$ umask
0002
[linuxstudy@xxxx ~]$ touch aac
[linuxstudy@xxxx ~]$ ls -l aac
-rw-rw-r--. 1 linuxstudy linuxstudy 0  8月  8 20:20 aac
[linuxstudy@xxxx ~]$ umask 27
[linuxstudy@xxxx ~]$ touch aad | ls -l aad
-rw-r-----. 1 linuxstudy linuxstudy 0  8月  8 20:22 aad
```
強そうなエンジニアを演じることのメリット・デメリット

# はじめに

最近会社の方に「じんさんは強い人だと思っていました」と言われることがありました
入社して半年、周りがつよつよの中で同じように思われているとは

そこで、強そうなエンジニアになぜ思われたのかなどを考えて、そこでのメリット・デメリットを調べてまとめてみようかと思います

# なぜ強そうと思われたのか

まず言っておくと**私は全くをもって強くありません**
会社の中でまだまだ技術力がない方だと思います

そんな私がなぜ**強いと思っていた**と言われたのか考えてみます

## 1. 社内への露出が多かった

一番大きな理由はこれだと思っています
入社してそうそう多くの人に声をかけていたのもあり、多くの人に名前を覚えてもらいました (じんさんと言われています)

そしてエンジニア全員が集まっている会議などで、「ふりかえりのファシリをやりたいのでどんどん依頼してください」と言っていたりしていたので、露出もまぁまぁしていました

やはりそういう多くの人が関わる機会で話していたことは「強いエンジニア」だと思われた理由なのかもしれません

## 2. アウトプット量

私はとにかくQiitaを書くことで有名です (300以上投稿しています)
なので、ネットで調べ物をしていたら私の記事を見つけたという方も多いみたいです
(たまにSlackで助かりましたという連絡が来ます)

ネットで名前の通っている人、よくみかける名前の人は強そうなイメージがします

# 強いエンジニアに思われるメリット

個人的には強いエンジニアに思われていることで、一緒に仕事をするときに頼ってもらったり、比較的親切に接してもらえたり、評価を受けるとき多少なりバイアスが働くと思います

また名前もある程度広がるため、多くの方に声かけてもらえたりとコミュニケーション面もよいことが多いです

# 強いエンジニアに思われるデメリット

実際に仕事をすると思ったよりも技術力がないなと思われます
とにかくつらくなりますし、これが転職のときだった場合期待はずれになってしまいます

記事のアウトプットである程度技術力はわかりますが、期待が高くなりすぎることには注意が必要だと思いました

# 強いエンジニアになるには

こちらに関しては以下の記事が参考になります

https://qiita.com/mu-suke08/items/59d10481e93f2e51d750

たびたびネットでも話題になりますね
「休日勉強しないといけない」など何度も目にします

個人的には入社して数年はその先の未来を広げるために、時間をできる限り作ってベンキョするのが強いエンジニアになる最初のステップかなと思います

ただ、強いエンジニアもそれぞれが思う強いエンジニアは違うと思うので、強いエンジニアになることを目標にするのではなく、知的好奇心のためにやりたいことをやっていくで良いと思います

# おわりに

「強いエンジニア」について今回は自分なりに考えることがあったので簡単に記事にしてみました
案外調べてみたところ記事があまり見当たらなかったのが意外でした

私は「強いエンジニア」は実際目指しておらず、技術を楽しむ、成長を楽しむというところで今後もアウトプットを頑張っていきたいです

# 参考

https://qiita.com/mu-suke08/items/59d10481e93f2e51d750
【Python】３つの数字の合計

# 作る関数
与えられた整数の配列から、3つの数の組み合わせを見つけて返す関数。
→ その3つの数の合計が目標の合計値（targetSum）と一致する組み合わせを出力する。

# 実装
```python:three_sum.py
def threeNumberSum(array, targetSum):
    # まず、入力された配列を昇順にソートする。
    array.sort()
    # 返すべき結果を保存する空のリストを作成する。
    res = []

    # 配列の各要素を順番に見ていく。
    for i in range(len(array)):
        # 与えられた数値と他の2つの数値の和がtargetSumになるかをチェックする。
        twoSum(array, i, res, targetSum)
    # すべての組み合わせをチェックした後、結果のリストを返す。
    return res


def twoSum(array, i, res, targetSum):
    # 左のポインタはiの次の位置からスタートする。
    l = i + 1
    # 右のポインタは配列の最後の位置からスタートする。
    r = len(array) - 1

    # 左のポインタが右のポインタより左にある限り、以下のループを実行する。
    while l < r:
        # 現在の3つの数字の和を計算し、targetSumとの比較を行う。
        current_sum = array[i] + array[l] + array[r]

        # もし現在の和がtargetSumより小さいならば
        if current_sum < targetSum:
            # 左のポインタを右に移動して、和を増やす。
            l += 1
        # もし現在の和がtargetSumより大きいならば
        elif current_sum > targetSum:
            # 右のポインタを左に移動して、和を減少させる。
            r -= 1
        # 和がtargetSumと一致する場合
        else:
            # 現在の3つの数字の組み合わせを結果のリストに追加する。
            res.append([array[i], array[l], array[r]])
            # 左のポインタを右に移動して、次の可能な組み合わせを探す。
            l += 1

    # 更新された結果のリストを返す。
    return res


# テスト
if __name__ == "__main__":
    array = [12, 3, 1, 2, -6, 5, 0, -8, -1]
    targetSum = 0
    print(threeNumberSum(array, targetSum))

```

# 参考
https://www.algoexpert.io
BFFについて全く知らなかった自分へ

# はじめに

この記事はマイクロサービスを始める前にBFFについて全く知らなかった自分への記事としてざっくりまとめて書いたものです。

# 半年前の自分

マイクロサービスについてすこしずつ知り始めた頃でしたが、そこで出てくる`BFF`の存在がよく理解できていませんでした

個人的には`gRPC`や`GraphQL`などを使って通信を高速化させるようなレイヤーをイメージしていました
しかし、最近それが違うなと思ったのでまとめてみます

# BFFとは

>BFF(backend for frontend)とは簡単にいうと、クライアントとバックエンドの中間に位置し双方の複雑性を吸収するような作られたサーバーのことです

https://qiita.com/souhei-etou/items/d5de99bb8cba1c59d393

このように調べると書かれていました
これだけでわかる方は良いと思うのですが、具体例を示していきます

例えば**トップページ**を作るとします
トップページでは、広告(Banner)とブログ(Blog)で構成されているとします

そのときにマイクロサービスの世界だと、広告の情報を取得できる`広告API`とブログの情報を取得できる`ブログAPI`が後ろにいます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/a09b1264-3584-add9-ab23-7c2391c3dc09.png)

トップページで表示する広告とブログの情報を取得するために`BFF`のエンドポイントを叩きます (ここでは/top)

すると、BFF(/top)では広告APIを叩いて、広告の情報をとったあと、ブログAPIを叩いてブログ情報を取ります。

そして手に入れた広告の情報とブログの情報を合わせてJsonにしてトップページに返します。

```
# 広告APIからのレスポンス
{
	"banners": [
		{
			"title": "広告1",
			"image": "http://placehold.it/350x150"
		},
		{
			"title": "広告2",
			"image": "http://placehold.it/350x150"
		},
		{
			"title": "広告3",
			"image": "http://placehold.it/350x150"
		}
	]
}
```

```
# ブログAPIからの情報
{
	"blogs": [
		{
			"title": "ブログ1",
			"image": "http://placehold.it/350x150"
		},
		{
			"title": "ブログ2",
			"image": "http://placehold.it/350x150"
		},
		{
			"title": "ブログ3",
			"image": "http://placehold.it/350x150"
		}
	]
}
```

これらを合わせて返すのが`BFF`の役割です

```
{
	"banners": [
		{
			"title": "広告1",
			"image": "http://placehold.it/350x150"
		},
		{
			"title": "広告2",
			"image": "http://placehold.it/350x150"
		},
		{
			"title": "広告3",
			"image": "http://placehold.it/350x150"
		}
	],
	"blogs": [
		{
			"title": "ブログ1",
			"image": "http://placehold.it/350x150"
		},
		{
			"title": "ブログ2",
			"image": "http://placehold.it/350x150"
		},
		{
			"title": "ブログ3",
			"image": "http://placehold.it/350x150"
		}
	]
}
```

こうすることで、広告APIとブログAPIを分けれるので、使いたいものをBFFを通して自由に組み合わせて利用することが可能です

# BFFのアーキテクチャ

## 1. クリーンアーキテクチャはいらない??

これは最近知った1つの考え方ですが、BFFにはクリーンアーキテクチャをやらなくて良いと思いました

なぜかというとBFFは他のAPIを叩いて情報を集めて返すだけなのでBFFの中でなにか処理をすることはありません

なのでドメインなどを持つ必要もある？と思いました
ただここは議論が色々されるところかなとおもいます

## 2. 動的型付け言語を使う

オブジェクト指向言語を使うとどうしてもオブジェクトがあらわれてしまい型を気にしなくてはならないため扱いづらいことが多いです

なのでPythonなどの動的型付け言語がBFFではコストをかけずに作れるので良いかなと思いました

# おわりに

BFFについて最近思ったことを大雑把にまとめてみました
誰がみるかもわからないですが、記事にできそうなことは記事にしていこうかなとおもいま

# 参考　

https://qiita.com/souhei-etou/items/d5de99bb8cba1c59d393
Javaで「カレントディレクトリを取得する」の動作を確認してみた

# 概要
Javaで「カレントディレクトリを取得する」の動作を確認してみました。以下のページを参考にしました。

https://www.javadrive.jp/start/file/index17.html

# 実装
以下のファイルを作成しました。
```JSample17_1.java
import java.nio.file.Path;
import java.nio.file.Paths;

class JSample17_1{
  public static void main(String[] args){
    Path p1 = Paths.get("");
    Path p2 = p1.toAbsolutePath();

    System.out.println(p2.toString());
  }
}
```
以下のコマンドを実行しました。
```
$ javac JSample17_1.java 
$ java JSample17_1 
/code/java/file
```
以下のファイルを作成しました。
```JSample17_2.java
class JSample17_2{
  public static void main(String[] args){
    String userDir = System.getProperty("user.dir");
    System.out.println(userDir);
  }
}
```
以下のコマンドを実行しました。
```
$ javac JSample17_2.java 
$ java JSample17_2 
/code/java/file
```

# まとめ
何かの役に立てばと。
Flutter 2023.8.8 コードFB

・同じようなコードが複数ある場合は変数にまとめると見やすくて簡単に記述できる。
→動作させるのに必死で意識が薄れることがよくあるので気を付けていきたい。

一部コード抜粋（Riverpod）
上Bfore
下after

              child: TextButton(
                onPressed: (){
                  if(ref.watch(_counterProvider) == 100) return;
                    ref.read(_counterProvider.notifier).update((state) =>
                    ref.watch(_counterProvider) + (int.parse(_editController.text)));
                  if(ref.watch(_counterProvider) >= 100){
                    ref.read(_counterProvider.notifier).update((state) =>
                     100);
                  }
                },

              child: TextButton(
                onPressed: (){
                  if(countNum == 100) return;
                  int newCountNum = countNum + (int.parse(_editController.text));
                  if(newCountNum >= 100) newCountNum = 100;
                  ref.read(_counterProvider.notifier).update((state) => newCountNum);
                },
ref.watch(_counterProvider);
長いので
int countNum = ref.watch(_counterProvider);
とした。
Texのチートシート

たまにVSCでTexを使うのですが、ショートカットとか忘れてしまうので、自分用にメモです。
自分のペースで増やしていきます。


## VSCでのタイプセット
### Mac
```
command + option + b
```
### Win
```
ctrl + alt + b
```
## VSCでのプレビュー
### Mac 
```
command + option + v
```
### Win
```
ctrl + alt + v
```
BlazorでもReduxDevToolsで状態遷移をデバッグできるようにした

# はじめに

Blazorはまだ歴史も浅く，まだ広く普及されておらず，
サードパーティ製のツールもReactやVueほど充実していません．

以前の記事で状態管理ライブラリを作成したことを紹介しましたが，本記事はそれを利用することでReactのようにReduxDevToolsを利用するという内容になります．

Redux DevTools は、アプリケーションの状態遷移をデバッグするためのツールです。状態のタイムトラベルできたり、状態の遷移履歴を可視化したりできます。
うまく使えばかなり強力なツールになるんじゃないでしょうか．

![](https://storage.googleapis.com/zenn-user-upload/da5d4076e247-20230712.gif)

前提として前回の記事で紹介した状態管理ライブラリと作成したStoreを利用します

#### 前回の記事

https://qiita.com/le-nn/items/8dbb5c1527657be70731

#### ReduxDevTools Middlewareのドキュメント

[こちら](https://github.com/le-nn/memento/blob/main/docs/ReduxDevTools.md)

## インストール

ReduxDevToolsと状態管理ライブラリのMiddlewareをインストールしましょう

### ブラウザにReduxDevTools拡張をインストール

#### Chrome
https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd

#### Edge
https://microsoftedge.microsoft.com/addons/detail/redux-devtools/nnkgneoiohoecpdiaponcejilbhhikei

#### FireFox
https://addons.mozilla.org/en-US/firefox/addon/reduxdevtools/

#### ReduxDevToolsの公式リポジトリ
https://github.com/reduxjs/redux-devtools

### Middlewareをプロジェクトにインストール

```
dotnet add package Memento.ReduxDevTool.Browser
```

### MiddlewareをDIコンテナに登録

```#if DEBUG```を忘れずにつけましょう．
でなければプロダクション環境でもReduxDevToolsが使えてしまいます．
オプションはReduxDevToolsとほぼ同じですが，ドキュメントを参照してください．

```cs
#if DEBUG
builder.Services.AddBrowserReduxDevToolMiddleware(new() {
    StackTraceEnabled = true,
    OpenDevTool = true,
    ...
});
#endif
```

### ReduxDevToolsを起動

あとはReactのReduxDevToolsの場合と使い方は同様です．
F12で開発ツールを開いて，Reduxタブを開けば利用できます．

![](https://storage.googleapis.com/zenn-user-upload/5b3d1384eaea-20230712.png)

アプリケーションに存在するすべてのStoreのStateが１つのState Treeとして表現されています．
状態を戻したり状態の遷移を可視化することができるようになります

![](https://storage.googleapis.com/zenn-user-upload/931b901dd2c0-20230712.png)

詳しい使い方は[ReduxDevToolsの公式](https://github.com/reduxjs/redux-devtools)をみるか，
ReactとReduxDevToolsとほぼ同じ使い方ができるので触ってるうちにわかると思います．

## 終わりに

いかがだったでしょうか．
Blazorはまだまだ発展途上な部分も多いので必要なものは自作するしかなかったりしますよね．
こういう活動で少しでもBlazorコミュニティに貢献できればと思います！
【Python】関数について

# 【Python】関数について


## 関数とは
①<font color="green">`様々なデータが１つにまとまったもの`</font>です。



②渡す値<font color="blue">`引数`</font>と呼ばれているものを関数に渡してます。
　関数を実行して戻ってくるものを<font color="blue">`戻り値`</font>と言われてます。

③関数の仕様によっては、引数も戻り値も省略できるみたいです。


④ちなみに関数は英語で<font color="Red">「function（ファンクション）」</font>と言うみたいです。


### 追記：関数とは一連の処理に名前を付けてまとめたもの！！
```py
def 関数に付ける名前(値を受け取るところ)
    変数名 = 計算式など                #変数名に計算式を代入する
    return = 変数名                    # returnをすることで関数外に値を渡すことが出来る。
```

----

# 関数の定義

関数は「def文」を使用します。
ちなみに「def」は<font color="Red">「define（ディファイン)」</font>の略称で、さらに日本語で<font color="Red">定義</font>という意味になります。
```py:関数の定義
def 関数名(引数):
    関数の処理内容
```

`関数名は変数名と同じルールに基づいて付けます`
↓　私なりにまとめて書いてみたものですが…参考になればうれしいです。

https://qiita.com/ayamo/items/62b663cc0b4d8ec5f943


----

### さっそく例を書いてみる

```py:例
def add(x, y):       # 仮引数 関数に渡す値
    print(x + y)

add(2, 5)            # 実引数
```


```py:実行結果
7
```

定義側のx, yは仮引数といい、関数呼び出し側の2, 5は実引数と言います。

---
## ・引数なしの呼び出し
まずNGから…
```py:NG
# これだけでは、実行しても何も出てきません。
def hello():             
    print('こんにちは')
```
```py:実行結果
```
上記は単純に、この内容のhello関数を利用できるようにして～
と利用可能のお願いしているだけです。
なので、<font color="DeepPink">`呼び出し`</font>と呼ばれる呼び出し用のコードを書かないとこのコードは呼ばれません。

正しいものは…  <font color="OrangeRed">`関数名()`</font>で呼び出しができます！

```py:OK
# 下にhello()を記述し実行すると出てきます。
def hello():              
    print('こんにちは')

hello()    # これを記述(呼び出しコード)
```

```py:実行結果
こんにちは
```
で正しく実行できます！
この関数の呼び出し元は？と聞かれたら、def の関数を検索して、`関数名()`となっているところを見つければそれが呼び出し元になります。

### ・引数ありの呼び出し

```py:関数の定義part2
def 関数名(引数1,引数2...):      # 定義した関数名の呼び出し
    処理...
    処理...
    return 戻り値               # 関数が返す値
```

```py:例①
def func(dinner):          # pastaという文字がここに入る
    print(dinner)          #そしてここから表示される

func('pasta')
```

```py:実行結果
pasta
```

## ～～関数の定義と呼び出し～～
##### ・関数の定義
呼び出されたらどのような動作を行うかを記述しする。
##### ・関数の呼び出し
関数の名前を記述して関数を呼び出す。定義された動作が実行される。


---

```py:例②
def all_drink(drink):                      # coffeeがこのdrinkに入る
    drink_order = drink + '1杯サービス'    #coffee1杯サービスがdrink_orderに代入される
    return  drink_order                    # returnで上のall_drink(drink)へ返される

result_drink = all_drink('coffee')    # all_drink('coffee')はreturn drink_orderの戻り値。
                                      # result_drinkに代入される
print(result_drink)
```

```py:実行結果
coffee1杯サービス
```


`result_drink = all_drink('coffee')`この('coffee')がしたの(drink)に入る
　　　　　　　　　　　↓
　　　　　`def all_drink(drink):`

`drink_order = drink + '1杯サービス'`　drink(中身はcoffee)に1杯サービスを付け加える。`coffee1杯サービス`という内容を`drink_orderに代入する。`

`return  drink_order` そしてここdrink_orderをreturnで返す


`return  drink_order`のdrink_orderは
result_drink = `all_drink('coffee')`この関数の戻り値の為、result_drinkに代入される。


そして最後の`print(result_drink)`が実行されて表示される。
nodeのError: error:0308010C:digital envelope routines::unsupportedの対処法

# はじめに
いつも通りnpm startしたところタイトルのエラーが出たので調べました
おそらくまた遭遇すると思うので備忘録に。

# 前提
nodeのバージョン:18.17.0
npmのバージョン:9.6.7

# 原因
原因はunsupportedで文字通り対応していないとのこと。
自分はNodeのバージョンを下げることで事なきを得ました。

# バージョンの下げ方
自分はfish環境なのでfishでの場合のみ記述します。

### 1.fisherのインストール
まずnvmをインストールするためにfisherをインストールします。
```fish:fish
$ curl -sL https://raw.githubusercontent.com/jorgebucaran/fisher/main/functions/fisher.fish | source && fisher install jorgebucaran/fisher
```

### 2.nvmのインストール
Nodeのバージョン管理ツールのnvmをインストールします。
```fish:fish
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v2.2.13/install.sh | bash
```
nvmがインストールされてるか確認します
```fish:fish
$ nvm -v
```
バージョンが表示されていたらOKです！
### 3.Nodeのバージョンを下げる
nvmを使用しNodeのバージョンを書き換えます(今回はバージョン16にしています)。
```fish:fish
$ nvm install 16
```
バージョンを確認します
```fish:fish
$ node -v
```
バージョンの変更が確認できたら完了です！お疲れ様でした！

# さいごに
2023年8月現在Nodeの推奨版のバージョンは18.17.0です。その推奨版でエラーが出たのでおそらく他に原因があると思っています。
ご参考までに。


# 参考になったURL
fisher: https://github.com/jorgebucaran/fisher
nvm.fish: https://github.com/jorgebucaran/nvm.fish
fish 環境にnvm + fish-nvmを導入した時のメモ(佐々木一洋 様): https://dev.classmethod.jp/articles/fish-nvm/
Snowflake Summit 2023 Day4現地レポート

# はじめに


NTTデータ　デザイン＆テクノロジーコンサルティング事業本部でマーケティングを担当している後藤です。
本日は2023/6/25-29に渡って米国ラスベガスで開催された、Snowflake Summit 2023についての熱いイベント模様をお届けしたいと思います！

今回は2023/6/28 Day4 最終日のレポートをお届けします！


# Bouncing Forward - Living Beyond Limits with Amy Purdy
4日間の熱いSnowflake Summit 2023を締めくくるセッションになります！
会場もKeynoteと同じ広い場所でしたが、半分近くは埋まっていました。
今回のセッションは、SnowfalkeやData Couldとは全く毛色が違うもので、プロアスリート Amy Purdy氏の半生にフォーカスを当てたものでした。
フィールドは違っても、社会や自身に対する考え方や前向きに適応しようとするマインドは、誰でもどこでも同じなのではないでしょうか。

Amy Purdy氏はプロスノーボーダーで平昌パラリンピックで銀メダル、ソチパラリンピックで銅メダルを獲得したアスリートです。
彼女が19歳の時に細菌性髄膜炎にかかり、脾臓、腎臓、左耳の聴力を失い、さらに一命をとりとめましたが、両足の膝から下を切断することになり失意のどん底に見舞われます。
しかし彼女は状況を受け入れ、何度も心が折れながらも大好きなスノーボードを続け、パラリンピックに出場するまでになります。
またスノーボードだけでなく、ダンスなど新たな挑戦を続け「両足の切断があったことで、今のような素晴らしい人生がある」と今後も挑戦をあきらめないと言います。
中でも「人は変化を求め、受け入れなければいけない」「人生が一冊の本だったら、あなたはどんな物語にしたいですか」というAmy氏の言葉が非常に刺さりました。
常に諦めずに夢を持ち続け、変化を受け入れステップアップしていく姿は、Snowfalke Summitで登壇された方々とリンクするのかもしれません。

最後は全員スタンディングオベーション！涙を流している人もたくさんいました。
Snowflake自体の話ではなく、「マインド」についてのセッションを最後に行うなんて主催者側のイベントシナリオの高さに驚きました。
まさかの展開に、この4日間の充実度が更に増した気がします。
![IMG_7519.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3507049/e92ced79-b41a-10f6-0df9-2554da6d065b.jpeg)

# 4日間の振り返り

今回のSnowflake Summitを通じて感じたことは大きく２点あります。

***①いかにスピード感をもつことができるか***
前回のSnowflake Summitからたった1年で、大小ありますが多数の新機能やアップデートが加えられました。
当たり前かと思いますが、マーケット自体もすごく早いスピードで変化しているので、いかに市場の状況を把握し、更にアップデート情報を早い段階で端的に発信していくかが重要です。
メッセージもその都度変えていくべきだと思いますが、大企業になるとスピード感の弊害が多くすぐに対応できないことも多いのも事実で、先進技術への追及はまだまだ課題もあります。

***②わかりやすい言葉でインパクトを与えられるか***
今回登壇された方の多くはインパクトのあるキーワードを中心に話されていました。
プレゼンテーションの基本かもしれませんが、それが製品や会社のイメージに直結するのでキーワードの選択は紛れもなく重要です。

***NO LIMITS***
***ALL DATA、ALL WORKLOAD、ALL USERS***
***New Era? Era of Data Cloud***
・・・

今回のSnowflake Summitで使われたキーワードの一部ですが、これだけの単語でもSnowflakeが目指している世界観が伝わってきます。
日本語だと長くなったり課題はあるかもしれませんが、キーワードの選び方には一段と注意を払っていきたいです。
自身のマーケティングにおいても発信をもっと活性化できるよう改善する必要があると感じています。

最後に・・・

初めてSnowflake Summitに参加しましたが、熱い濃密な4日間を過ごすことができました。
会場もまるで人気アーティストのライブ会場のような雰囲気で、多くの人がアーティストに期待を寄せるようにSnowflakeに興味を持っているのだと感じました。
オンラインでの参加も可能でしたが、セッション等で生で動いている登壇者と、更に複数枚のスクリーンに映し出される登壇者を見ることができるのは現地のみです。そして登壇者の話を聞きながら周りの人がくすっと笑ったりする臨場感はオンラインでは味わうことはできません。
今まで海外のカンファレンスには参加したことがなかったのですが、日本とは雰囲気も全く違いました。(完全にSnowflakeのファンになって帰ってきました。)

これからも進化が止まらないSnowflakeに今後も大注目です！
来年はサンフランシスコでの開催です。どんな進化があるのか今からワクワクが止まりません！
ITコンサルタント企業の年収比較まとめてみた

## 目次
- ITコンサルタント会社とは
- ITコンサルタントの種類
- コンサル会社に依頼するメリット
- コンサル会社を選ぶ際のポイント
- ITコンサルタント企業　年収比較表

## ITコンサル会社とは

企業が抱えている問題点や経営課題をヒアリングし、それに沿ったIT投資計画の策定、必要なツールの導入・支援などITを利用して解決方法を提案する業種です。

プロジェクトの進捗管理や運用テストにも関わるなど、仕事内容は多岐にわたり、直接的に企業の数字や環境に変化を与える重要な役割を担っています。

以下コンサルタントとして以下の内容が挙げられます
### ヒアリング・分析
クライアントである経営者やIT部門の責任者などから、経営戦略や経営課題、業務の流れ、既存のシステムの状況などについてヒアリングをし、現状の把握をします。ヒアリングした内容を分析し、クライアントの経営課題を洗い出します。

### 提案
ヒアリング・分析をした結果を踏まえて、 仮説を縦なだら経営戦略やシステムの導入など経営課題を解決するための提案を行います。

### マネジメント
提案が採用された際には、経営課題を解決するためのプロジェクトの統括を行います。
適切な人材を集め、プロジェクトチームを結成して、プロジェクトの進捗管理などマネジメント業務を担います。

## ITコンサルタントの種類

- ****SAPコンサルタント****
- ****ERPコンサルタント****
- ****SCMコンサルタント****
- ****CRMコンサルタント****
- ****PMOコンサルタント****
- ****ITマネジメント戦略コンサルタント****

## コンサル会社に依頼するメリット
### 専門家によるITの知見が得られる
  IT技術に精通した専門家によるアドバイスがもらえるだけでなく、社内の人間では対処しきれないケースが起こった場合や自社で解決するには難しい課題の相談や、既存システムの改善の相談などが可能です。

### 客観的に自社の問題点を分析することができる
自社内で気付けなかった問題や、表面化されていない自社の問題も先回りして見つけ、対策を練ることができます。

### 人件費削減
新たに専門知識のある人を雇うとなると様々なコストがかかります。企業に依頼するとプロジェクトごとや期間限定で雇えるため、正社員を雇うよりもコストが抑えられます。

## コンサル会社を選ぶ際のポイント

### 実績や経験の豊富さ
どんな業種でどのくらいの結果が得られたかなど、具体的な数字で実績を確認する必要があります。
ホームページに実績が公開されているか、チェックしましょう。なければ問い合わせで確認しましょう。

### 自社の要望と似た業種での実績はあるか
ITコンサルタントと一口にいっても、業務は多岐にわたります。どこの分野を得意としているのか、要望と似た業種での実績はあるかなど確認しておきましょう。

### 知識の豊富さ
IT技術は特に専門知識が必要とされ、また日々新しい技術が生まれるなど目まぐるしく変化する分野です。新しい知識もあり、自社にあった提案をしてくれるか確認しましょう。
    
### 料金について
サポートの質や実績も大事ですが、料金についても把握が必要です。
どこまで対応して、どんな料金なのかなどきちんと把握しておきましょう。

## 年収比較
| 順位 | 会社名 | 平均年収 |
|:-:|:-------|:-|
|  1 | ガートナージャパン株式会社  |   1,373万円|
|  2 |  株式会社野村総合研究所（NRI） |  1,232万円 |
|  3 | アクセンチュア |  1,232万円 |
|  4 |  株式会社ベイカレント・コンサルティング | 	1,107万円  |
|  5 | EYストラテジー・アンド・コンサルティング株式会社 |  1,100万円 |
|  6 | デロイト トーマツコンサルティング合同会社 | 1,100万円  |
|  7 | 株式会社シグマクシス・ホールディングス  |1,093万円   |
|  8 |  株式会社ドリームインキュベーター | 1,087万円  |
|  9 | PwCコンサルティング合同会社  | 980万円  |
|  10 |  シンプレクス・HD株式会社 | 977万円  |
|  11 | 株式会社クニエ	  |  972万円 |
|  12 |  日本IBM株式会社 |  909万円 |
|  13 | KPMGコンサルティング株式会社 | 898万円  |
|  14 |  富士通株式会社 | 859万円  |
|  15 |  株式会社日立コンサルティング | 829万円  |
|  16 |  アビームコンサルティング株式会社 |  808万円 |
|  17 | 株式会社NTTデータ経営研究所| 747万円  |
|  18 |  株式会社リブコンサルティング | 745万円  |
|  19 |フューチャーアーキテクト株式会社 |  734万円 |
|  20 |株式会社日本総合研究所|  691万円 |



### 参考文献  
https://synergy-career.co.jp/media/it-consarutant-ranking/

https://www.geekly.co.jp/column/cat-position/itconsulting_company_ranking/#IT-2

https://reashu.com/it_consultant_ranking/#IT-3

https://www.recme.jp/careerhigh/entry/it-consulting-ranking

https://mirai-works.co.jp/media-career/column/it-consultant/

https://career.levtech.jp/guide/knowhow/article/24/

https://axia.co.jp/2022-02-17

▼Twitterでも発信しています
https://twitter.com/issueissue4
▼エンジニア向け案件獲得プラットフォーム
https://i-ssue.com/users/signup
＼ エンジニア募集のお知らせ ／
【3ヶ月限定】次世代の開発発注プラットフォーム「ISSUE」を開発してくれるテックリード募集
https://i-ssue.com/issues/d179971e-cfae-46ba-a32b-d550a7da4660l
Snowflake Summit 2023  Day1現地レポート

# はじめに


NTTデータ　デザイン＆テクノロジーコンサルティング事業本部でマーケティングを担当している後藤です。
本日は2023/6/25-29に渡って米国ラスベガスで開催された、Snowflake Summit 2023についての熱いイベント模様を4回に分けてお届け致します。

本日はDay1 初日の様子をお届けします。


# Snowflake Summit 2023とは
Snowflake Summit 2023は2023/6/25-29の4日間にわたり米国ラスベガスで開催されてる**世界最大規模のデータ系カンファレンス**です。
全世界から12,000名を超える参加者が集まり、日本からはパートナー・ユーザの250名が参加しました。また、434のセッションで構成され、パートナーブースは約180、スポンサー数は約200を超えます。
各日のKeynoteは
***Day1 Partner summit,Generative AI's Impact on Data Innovation in the Enterprise***
***Day2 Opening Keynote***
***Day3 Builder Keynote***
***Day4 Predictions on Generative AI and LLM in the Enterprise***
と新機能やアップデート発表、最新技術情報、業界動向・・・と盛り盛り盛りだくさんの内容です。

![①.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3507049/5b253aec-1185-d7b7-ff8a-84d61d541096.jpeg)


# 会場MAP

メイン会場は大きく分けて２つあり、Keynote会場は④CAESARS PALACEで行い、その他セッションは④CAESARS PALACEと③CAESARS FORUMで行われました。
二会場については私の足で歩いて15-20分程かかった印象です。
Keynote会場は入った瞬間まるでクラブのような雰囲気で、周りの方達のワクワク感がダイレクトに伝わってきました！


![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3507049/3d9d7720-9213-c9e9-9441-9a7053cc4521.png)

# 【Day1】  Partner Summit,Generative AI's Impact on Data Innovation in the Enterprise


## Partner Summit

パートナー向けに現在の状況とこれまでの振り返りが行われた後、
Sales PartnerとTechnology Partnerの表彰が行われました！

**NTTデータは3年連続「APJ System Integrator Partner of the Year」を受賞！**

APJリージョンにおいてお客さまのビジネス成果の創出、新しいユースケースの開拓、業界をけん引するリーダーシップ性やマーケット戦略、技術的専門知識の高さなど、Snowflakeのプレゼンスの向上や収益に大きく貢献したことを評価いただいたものです。

「NTT DATA～～!!!」とアメリカ方式の受賞者が呼ばれると拍手と歓声のなか、
デザイン＆テクノロジーコンサルティング事業本部の谷中事業本部長がトロフィーを受け取りました。日々お客様と一緒に切磋琢磨してきた我々にとっては、何よりも嬉しい瞬間でした！


![NTTGroup.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3507049/507fa171-bd61-b714-6e4a-d8d58e0c1e4a.jpeg)


## Generative AI’s Impact on Data Innovation in the Enterprise

![②.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3507049/6745738d-79c3-81d4-b031-32d5eec61770.jpeg)

大きなニュースはSnowflake社と半導体メーカーのトップランナーである**NVIDIA社**の提携について発表されました！
NVIDIAの大規模言語モデル（LLM）開発用プラットフォーム「NVIDIA NeMo」とGPUを使い、カスタムな生成AIアプリケーションの作成を完全にSnowflakeのデータクラウド内部で安全に実施できるようになります。

Snowflake会長兼CEOのFrank Slootman氏とNVIDIA 創設者兼 CEO のJensen Huang氏の対談があり、会場は超満員でした。
誰も簡単に生成AIのアプリを作成・実行できるという夢のような未来が語られ、近年のLLMのスピードは物凄いことになっていると実感しました！
例えば、「AIチャットサービスのアプリケーションを作りたい！」と思ったらSnowflake上で簡単に作れ、更に時間短縮とセキュリティ面でも安全に作ったアプリが使えるという事になります。
人々はソフトウェアをかくのではなく、アプリケーションをかく。
NVIDIAのエンジンをSnowflake上で使えるようになることで、夢のような未来が実現する第一歩ですね。

![③.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3507049/424e5eea-f306-c0c9-9fc2-9f8dd2a096ea.jpeg)

## Day1 振り返り

いよいよ始まったSnowflake Summit 2023！
まず初めに思ったのが会場の雰囲気・登壇者スピーチ・セッションがカッコよすぎ。
まだまだ初日ではありますが、内容もロケットスタートでキンキンに冷えているはずの会場も上着がいらない程の熱気でした。
そして本日の**Frank Slootman氏とJensen Huang氏の対談で語られた未来に対するフラグが翌日の新機能紹介で続々と回収されることになります！**