OmniAICreator/Qiita-1.07M huggingface dataset:
Laravel + Vue + Vite + Inertia.js環境にSSRを導入する

## はじめに
下記記事でDockerで作成した開発環境の中でSSRを導入する。
前提条件は一緒

https://qiita.com/ryosuke-horie/items/4ee6eb332a7041426a9c


1. SSRに必要な追加の依存関係をインストールする必要がある。
	```
	npm install @vue/server-renderer
	```

	```
	composer require inertiajs/inertia-laravel
	```
2. SSRエントリポイントとして機能するファイルを作成する。(resource/js/ssr.js)
	```js
	import { createInertiaApp } from '@inertiajs/vue3'
	import createServer from '@inertiajs/vue3/server'
	import { renderToString } from '@vue/server-renderer'
	import { createSSRApp, h } from 'vue' 
	
	createServer(page =>
		createInertiaApp({
			page,
			render: renderToString,
			resolve: name => {
				const pages = import.meta.glob('./Pages/**/*.vue', { eager: true }) 
				return pages[`./Pages/${name}.vue`]
			},
			setup({ App, props, plugin }) { 
				return createSSRApp({
					render: () => h(App, props),
				}).use(plugin)
			},
		}),
	)
	```

3. viteの設定を更新
```js
export default defineConfig({
	plugins: [
		laravel({
			input: ['resources/css/app.css', 'resources/js/app.js'],
			ssr: 'resources/js/ssr.js',
			refresh: true,
		}),
		// ...
	],
})
```

4. npmスクリプトを更新する
```json
"scripts": { 
	"dev": "vite",
	"build": "vite build && vite build --ssr"
},
```

5. Build
```
npm run build
```

6. SSRサーバーの実行
```
php artisan inertia:start-ssr
```
【Next.js】Imageで外部URLを使用する方法

Imageで外部URLを使用するには`next.config.js`に以下のように設定を記述する必要があります。

```next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
      },
    ],
  },
}
```
ページネーション導入

# 初学者の備忘録
初学者の備忘録です。今回はページネーション編


## ページネーションとは
一つの長い文章、投稿などを複数のページに分割し表示することです。本などのページの概念と一緒です。


## 導入
【１】　Gem
ページネーションを実装するにためにkaminariというGemを使用します。Gemファイルに記述していきましょう。最後の行で大丈夫です。
```ruby:Gemfile
gem 'kaminari','~> 1.2.1'
```


【２】　インストール
Gemを有効化するためインストールします。
```ruby:ターミナル
$ bundle install
```


【３】　設定ファイル
kaminariの設定ファイルを作成します。 
```ruby:ターミナル
$ rails g kaminari:config
```


【４】　ページャ
ページャとはデータの中身を指定単位ごとに閲覧できるページ送り機能のことです。
kaminariがページャで利用するテンプレートを作成します。
```ruby:ターミナル
$ rails g kaminari:views default
```


導入は以上です。お疲れ様でした。
npxを実行した後の残骸（キャッシュ）の場所

## 結論から書くと

Windowsの場合、
C:\Users\ [user] \AppData\Local\npm-cache\_npx\
配下のフォルダに格納される。
なお、フォルダ名は固定されておらず、「c67e74de0542c87c」のようなハッシュ（？）されたようなフォルダに名になっている。

Macの場合
（すみません。調べられてません）

## どのフォルダを削除するか？

キャッシュなので全部消しても問題ないような気はする。
ピンポイントで削除したい場合については、上記の通りフォルダ名が意味を持たない英数字の羅列なので判断は難しい。フォルダのタイムスタンプおよびフォルダ内のpackage.jsonの中身を見て判断するしかない。

## おわりに

npxを使えば使うほどこのキャッシュがたまっていくので（意外と容量を食っているので）、ディスク容量が少ないなら消すというのも有効な手段のひとつだろう。※削除は自己責任でお願いします！
Firebase Hosting Setup Complete が表示されてしまうときの対処法

<h1>問題</h1>
ローカル環境およびホスト環境でFirebase Hosting Setup Complete が表示されてしまう

<h1>環境</h1>
Nuxt 3.7.3 (SPA)

firebase 10.4.0
<h1>対策</h1>
<h4>1. Nuxt3の出力先は .output/public であるため、出力先ディレクトリを変更</h4>

```firebase.json
{
  "hosting": {
    "public": ".output/public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
}
```

私の環境ではこれで https://~.web.app のドメインで想定通りのアプリが表示されました。
しかし、 https://~.firebaseapp.com のドメインはFirebase Hosting Setup Completeのまま。謎。

また、開発サーバでもFirebase Hosting Setup Complete でした。

<h4>2. ~/public 配下の index.html を削除</h4>
firebase init 時に public配下に index.html を生成してしまっていました。

削除することで解決！


<h1>最後に</h1>
firebase init 時に英語でたくさんの質問が行われますが、きちんと読まないといけないですね。反省。
基本情報にリベンジした話

##### 先日、基本情報技術者試験を受けてきました。

旧試験は3度受けては落としてるので、
新試験になったこの機に取ってしまおう！というリベンジマッチでした。

参考までに（なるかわかりませんが）記録として残します。
1. [試験対策](#試験対策)
2. [参考書とか](#参考書とか)
3. [試験の感想](#試験の感想)
4. [余談](#余談)

## 試験対策

#### < 導入 >
まずは購入した参考書を一通り読みました。
重要な部分、理解が足りない部分はノートにまとめて、全体の6割理解を目安に問題演習に移行。

本当に時間がない人は初っ端から問題演習でもいいと思います。

#### < 科目A >
旧試験の午前問題と変わらず、過去問を解くのが一番良いです。
私は以下の繰り返しでした。
① 問題を解く
② 必ず解説を読む
③ ノート等にまとめる
④ まとめた内容を見直す（翌日以降）
⑤ もう一度解く

③と④は人によるかなと。私は書いて覚える派なのでこの方法です。

個人的には②が大きなポイントでした。
正解以外の選択肢、今度はそのワードに関して出題されたりしますので必ず全問読みました。
特に正解した問題って解説飛ばしがちなんですよね。（私だけかも）

#### < 科目B >
出題形式が旧試験から大幅に変更となり、アルゴリズム×16問・セキュリティ×4問です。
1問あたりの問題文は短くなりましたが、1回分を1度通すだけでもかなり頭を使いました。

順番前後しますが、セキュリティは問題文をよく読み、背景を考えると答えがわかる印象でした。
自信が無い方は科目Aのセキュリティ分野を解くことでも十分対策になると思います。

###### 主にアルゴリズム対策です。

午前問題にあったアルゴリズムを少しレベルアップしたのが16問続きます。

私は旧試験の午後問題には手を付けず、
後述の予想問題集やIPAの公開問題／サンプル問題を中心に対策しました。

一度やった問題も解きませんでした。やる意味が薄れるので。
初見の状態で始めてわからなければ解説を読み、実際にトレースしながら進めました。
何問も解くうちに自らトレースができるようになり、確実に身についているなと感じることができたのが継続に繋がりました。

また、視線がPC画面と手元の紙とを行き来するので慣れていないと疲れます。
必要最低限の情報を別紙に写してトレースする、というような練習をしたほうが良いです。

## 参考書とか
使用した参考書やサイトを下記に記載します。

- 「出るとこだけ！基本情報技術者 テキスト＆問題集 2021年版」
2021年に購入。当時は悩んだ結果受験を見送りました。
タイトル通り最低限しか記載していないので、確実な対策をするならば内容が濃いものをオススメします。
【参考】[基本情報技術者試験で私がおすすめする参考書・問題集](https://www.fe-siken.com/fetext.html)

- 「令和05年【上期】基本情報技術者 パーフェクトラーニング予想問題集」
主に科目B対策のために購入、解説付き過去問PDFもDLできますしお値段以上だと思います。
下期以降は「過去問題集」に名称を変えていますね。

- [基本情報技術者 過去問道場](https://www.fe-siken.com/fekakomon.php)
科目A対策はこのサイトで十分です。苦手な分野と徹底的に戦いました。

- 「サンプル問題／公開問題 (IPA)」
受験前最後の総仕上げとして利用しました。
サンプル問題　https://www.ipa.go.jp/shiken/syllabus/henkou/2022/20221226.html
公開問題　　　https://www.ipa.go.jp/shiken/mondai-kaiotu/sg_fe/koukai/2023r05.html

## 試験の感想
早い、時間が経つのが早かった。
少しでも躓くとあっという間に終わるのは旧試験と変わらない。

「新試験になって簡単になった！」
アルゴリズムが得意な人にはその通りだと思います。
それ以外の人に対しては難易度的には旧試験とほぼ変わらない気がします。
（あくまでアルゴリズムが苦手な自分の感想です！）

とはいえ、偉そうに書いておいてなんですが、科目Aも科目Bも終盤は焦りました。
最後の最後まで頭をフル回転してやっと全問回答。ほんとギリギリ。

## 余談
受験日を2回リスケしました。シンプルにやる気の問題です。
3日前までであればリスケできるのはCBT試験の大きなメリットですね。
何度でも引き延ばせるのでデメリットでもありますが・・・。

最後までありがとうございました。
初めての投稿でした。拙い文章でスミマセン。
今すぐ使えるユーザーインタビューのコツ

備忘録として。適宜追加修正していく予定。

# よかった例　質問編

### 「私たちは開発者で、サービスをなるべく良くしたいと思っています！今日は”使いづらい”などの意見もとても貴重なので、忖度なしでご意見を聞かせて貰えると嬉しいです」

人によってこのような意図的な方向づけはよくないと思うかもしれない。
が、個人的には、初対面で否定的な意見を話すのに抵抗を覚えるユーザーが多い傾向にあると考えているため、これくらいの導入がちょうどいいのではないか、と思う。

### 「最後に⚪︎⚪︎をした時のことについて教えてください。」
〇〇には評価したい機能が入る。Instagramであれば投稿。
この後にもう少し細かい質問が入る。

「なぜ投稿しようと思ったのですか？」
「どのような流れで投稿しましたか？」
「どれくらいの時間をかけて投稿しましたか？」
「その時不便に思ったことはありますか？」
「投稿した後はどうしましたか？」

普段の使い方を丸ごと聞くのも良いが、
「いつも〜という理由で使ってます」「使いやすいと思います」と、抽象的でありきたりな答えになりがち。

最新の1ケースに絞ることで、具体的にどういうシーンで、どういうニーズで使い始めたのか、その時どう思ったのかを鮮明に聞くことができ、思わぬ発見をすることが多い。

### 「先ほど"普段は⚪︎⚪︎している"とおっしゃっていましたが、実際にはどれくらいしたことがありますか？」

具体的な行動にフォーカスする。回数、頻度、時間など数字で回答できるような質問をする。

「よく〜しています」「〜することが多いですね」という回答に気をつける。

その人にとって”多い”ということであり、質問者が想像している”多い”と一致しているわけではない。
事実で裏付けをとり、その後になぜそうなのかを聞いてみる。

# よかった例　態度編

### アイスブレイクを大切にする
アイスブレイクがうまくいくかで、その後の聞きやすさ、ユーザーが積極的に話してくれるかどうかがかなり変わってくる（体感）。余裕があるなら5〜10分くらい使いたい。

アイスブレイクが形式的にならないようにする。つまり相手に心から興味を持つ。
そもそも普段から色んなことに興味を持って、話題の引き出しを持っておけると良い。
聞くだけじゃなく、自分の開示も積極的にする。結局友達になるのが1番いい。

### 相手によってテンションを変える
話し上手な人は、相手に合わせすぎないように気をつける。
話が止まらなくなったり、無意識に「〜っていいですよね、そうですよね、うんうん」と一つの方向に集約されがち。
そんな時は具体的にどんな行動をとったのかどうかを聞いて、相手を疑う。（前述の通り）

話し下手な人は、こちらのテンションが上がり過ぎないように気をつける。
温度差が激しくなって相手が口を閉ざしてしまう事が多い印象。
相手の温度が高くなる部分を地道に聞き続けて探す。


### なるべく黙る
相手の回答を待っているかのように沈黙を与える。と、ユーザーが一通り話し終えた後に、「投稿をしたのは、実は〜」「使いやすいと思います。あ、でも、そういえば〜」と勝手に付け足してくれる場合がある。

相槌をしない、ということではない。

話し上手な人に対してこれをやると逆に時間コントロールが難しくなる場合もあるので、調節する。


# アンチパターン

### 「〇〇をするのは、〜〜という理由だからですかね？」

場合によってはこの聴き方でもいい場合がある、と思う。
ユーザーが一通り回答してから、それをまとめて再確認したり、理解していることを表示するためにこのような話し方をする場合は良いと思う。

問題は最初からこの質問をしてしまうこと。わかっていても意外にやってしまいがち。
そうすると、ユーザーは「そうですね、〜〜だからです」とこの質問の意図に合わせようとすることが多い。
ユーザー自身からその理由が出てくるのかを確認しなくてはならない。

「〇〇をするのは、なぜでしょうか？」

当たり前だと思っていても、これで聞く。
ちなみにまだ使ったことがないが、あえて全然違う理由を提示してみて、ユーザーに否定させるのはアリかもしれない。
俺、Dartの.mapについて理解を深めてみようと思ったんだ。

どうも！　[堕罪ｵｻﾑ](https://twitter.com/Alt_Heidelberg)です。
秋学期もただひたすらに国語学・日本語学を学んでいます。

さっそくですが本題に入ります。

ワイ「Flutterのチュートリアルでmemoあたりのものを並べるために.mapっていうのを使ったけど、理解浅いな～。どう動いてるのか正直よくわからん。」

勉強不足ですね。
なので今回は

[「【Flutter】わかんないよ！オブジェクト指向なんてわかんないよ！」](https://qiita.com/awesomeDazzaye/items/4e436465661ca0805c9d)という以前の記事で、**「書いたコードはコチラ！」** の最後のほうにある、

```dart
SizedBox(
  height: 200,
  width: double.infinity, // メモデータを左寄せ
  child: ListView(
    children: _memoList.map((memo) => ListTile(
      leading: const Icon(Icons.fiber_manual_record),
      title: Text('Item: $memo'),
    )).toList(),
  ),
)

```

というコードでの利用方法を通じてFlutter/Dart/mapメソッドへの理解を深めたいと思います。
# .mapについて

**mapメソッド(.map)** はDartの**List型のメソッド**です。**mapメソッド**のあとには**toList()** を付けます。
**toList()** を使用することで、.mapメソッドの結果をリストとして扱えます。

## ChatGPTに聞いてみた

ChatGPT「**.mapメソッド**は、リストやイテラブルなコレクション内の各要素に対して指定した関数を適用し、新しいコレクションを生成します。このメソッドは、コレクション内の要素を変換するのに使用されます。


```dart
var numbers = [1, 2, 3, 4];
var doubledNumbers = numbers.map((number) => number * 2);
// doubledNumbersは[2, 4, 6, 8]となる
```
**.mapメソッド**は、**要素を変換するだけ**で、キーと値のペアを操作するわけではありません。通常、**リスト内の要素に対する変換を行う場合に使用されます。**」

:::note warn
キーと値についての記載がありますが、それはMap型との違いについてです。
:::

なるほど、`[1, 2, 3, 4]`というnumbersを.mapの中で`number * 2 (それぞれに2を掛ける)`という処理をして、それを`doubleNumbers`に入れてるのか。

## ChatGPTのコードとの比較

では、前回のチュートリアルでやったものを同じように見てみます。

```dart
_memoList
   .map((memo) => ListTile(
      leading: const Icon(Icons.fiber_manual_record),
      title: Text('Item $memo'),
   ))
   .toList()

```

ワイ「メモの情報が入っている`_memoList`を`.map`を使って`ListTile`ウィジェットに変換する。
`leading`プロパティはアイコン指定で～……。
`title`プロパティは`Text('Item $memo')`で、要するにテキストで「`Item (メモの内容)`」という形式で表示されるということ。
で、最後にお決まりの`.toList()`をつける。おお！仕組みがわかりやすくなった！」

# 終わりに

今回は **.map** について調査しまとめてみました。
わからない箇所・問題についてしっかり向き合い、ひとつづつ紐解いて、わかっていない部分を洗い出すことの大切さを学びました。
「わからない！！」と投げ捨てるのではなく、「**どこが・なにがわからないかがわからない**」ではなく「**ここがわからない**」と疑問点を明白にすることで、実際教わるとき、質問するときに両者のコミュニケーションがスムーズになり問題解決もより良い形で進めることができると思います。これはプログラミングだけでなく身の回りのあらゆる事象にも有効であるはず。
頑張るぞ～。

ここまで読んでくださりありがとうございます！
また次回もよろしくお願いします！
九九の計算

R では 9 文字で書ける。
```R:R
> 1:9%o%1:9
      [,1] [,2] [,3] [,4] [,5] [,6] [,7] [,8] [,9]
 [1,]    1    2    3    4    5    6    7    8    9
 [2,]    2    4    6    8   10   12   14   16   18
 [3,]    3    6    9   12   15   18   21   24   27
 [4,]    4    8   12   16   20   24   28   32   36
 [5,]    5   10   15   20   25   30   35   40   45
 [6,]    6   12   18   24   30   36   42   48   54
 [7,]    7   14   21   28   35   42   49   56   63
 [8,]    8   16   24   32   40   48   56   64   72
 [9,]    9   18   27   36   45   54   63   72   81
```

Julia では 10 文字になる（もっと短くなるかなあ?）
```Julia:Julia
In [1]: t=1:9;t*t'
9×9 Matrix{Int64}:
 1   2   3   4   5   6   7   8   9
 2   4   6   8  10  12  14  16  18
 3   6   9  12  15  18  21  24  27
 4   8  12  16  20  24  28  32  36
 5  10  15  20  25  30  35  40  45
 6  12  18  24  30  36  42  48  54
 7  14  21  28  35  42  49  56  63
 8  16  24  32  40  48  56  64  72
 9  18  27  36  45  54  63  72  81
```
もっと短く書ける言語...あるだろうなあ。

追記：
一行で書かなくても良くて，改行文字は字数に数えなくてもよいなら
```Julia:Julia
t=1:9
t*t'
```
で，R と同じく 9 文字ではある。
システム問題発生時の情報をチケットからすぐ見れるようにしよう！

# 概要
New RelicのUI画面は、右上に表示されているPermalinkリンクを使うと、リンクをクリックするだけで同じ画面を開くことができます。SlackやTeamsなどのコミュニケーションツールはもちろん、JIRAのチケットなどに分散トレースのURLを記載することで、メンバー間で同じ画面を表示して調査分析をすることが可能です。

この度、New Relic アップデート(2023年８月)の中で、データ保持期間が過ぎてしまった分散トレースに対しても、**最大395日間**は保存されたURLからアクセスができるという、**Preserved traces**という機能アップデートがあったので、さっそく試してみました！

:::note info
最新のアップデートの詳細はこちら。[New Relic アップデート(2023年8月)
](https://newrelic.com/jp/blog/nerdlog/new-relic-update-202308 "New Relic アップデート(2023年8月)")
:::

# 手順
## 1. 分散トレースの画面を表示
対象のアプリケーションを選んで、Distributed tracingを１つ表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/ea12c8f1-e164-7fe6-3d94-df2e44ae3f2c.png)


## 2. URLを保管
URLをJIRAのチケットやGitHubのIssueなどに貼り付けて保存します。

:::note info
URLは**ブラウザ上のURL**、もしくは、右上の**Permalink**でも構いません。
:::

## 3. Tracingの保持期限を確認
Tracingの保持期限は、Manage Your Data > Data retention > Tracingで確認できます。

https://docs.newrelic.com/jp/docs/data-apis/manage-data/manage-data-retention/

## 4. チケット等に貼ったURLからトレースのUIにアクセス
UIにアクセスすると先程URLを保存した時と同じように分散トレースを確認できます。
保持期限が過ぎていている場合は、青字で**Preserved**の文字が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/dc5c6079-b621-59b4-28c8-317b77d31fa0.png)

:::note warn
パフォーマンスの情報などの付随的なデータは、その保持期限が過ぎるとデータとして見れないので注意が必要です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/598c7bfb-9b66-9b9a-6bcb-92f4019efa63.png)
:::

# まとめ
分散トレースの長期閲覧が可能になったので試してみました！
下記に**Preserved traces**の詳細が記載されているのでご参照ください。

https://docs.newrelic.com/docs/distributed-tracing/ui-data/understand-use-distributed-tracing-ui/#preserved-traces

:::note info
最新のアップデートの詳細はこちら。[New Relic アップデート(2023年8月)
](https://newrelic.com/jp/blog/nerdlog/new-relic-update-202308 "New Relic アップデート(2023年8月)")
:::

:::note info
[New Relic株式会社のQiita Organization](https://qiita.com/organizations/newrelic)では、
新機能を含む活用方法を公開していますので、ぜひフォローをお願いします。
:::
CKAD) Liveness/Readiness Probe

# Liveness Probe
- 動作しているコンテナに一定的にヘルスチェックを行い、コンテナが動いているかどうかを確認する
- ヘルスチェックが通ってない場合、該当コンテナはKillし、同一のコンテナを起動する
- ヘルスチェックが通ったコンテナが動いていることを保証する

## Liveness Probe動作方式
- httpGet Probe
  - 指定したIP住所、Port、URLPathに、Http Getリクエストを送り、該当のコンテナがレスポンスされているかを確認する
  - レスポンスされるHttpCodeが200ではない場合、エラーとして認識し、コンテナを再起動する
  - 例
    ```yaml
    livenessProbe:
      httpGet:
        path: /
        port: 80
    ```

- tcpSocket probe
  - 指定したポートにTCPでアクセスを行う、アクセスできなかった場合、コンテナを再起動する
  - 例
    ```yaml
    livenessProbe:
      tcpSocket:
        port: 22
    ```

- exec probe
  - コマンドを転送し、コマンドの終了コードが0ではない場合、コンテナを再起動する
  - 例
  ```yaml
    livenessProbe:
      exec:
        command:
        - ls
        - /data/file
    ```


- liveness probe パラメタ
  - periodSeconds: ヘルスチェックを行う回数
  - initialDelaySeconds: Pod実行後、Delayする時間（秒）
  - timeoutSeconds: ヘルスチェック後、レスポンスまでの時間

# Readiness Probe
- 動作してないコンテナに、トラフィックを転送しない


## Readiness Probe動作方式
- httpGet Probe
  - 指定したIP住所、Port、URLPathに、Http Getリクエストを送り、該当のコンテナがレスポンスされているかを確認する
  - レスポンスされるHttpCodeが200ではない場合、エラーとして認識し、コンテナにトラフィックを送らない
  - 例
    ```yaml
    readiness:
      httpGet:
        path: /
        port: 80
    ```

- tcpSocket probe
  - 指定したポートにTCPでアクセスを行う、アクセスできなかった場合、コンテナにトラフィックを送らない
  - 例
    ```yaml
    readiness:
      tcpSocket:
        port: 22
    ```

- exec probe
  - コマンドを転送し、コマンドの終了コードが0ではない場合、コンテナにトラフィックを送らない
  - 例
  ```yaml
    readiness:
      exec:
        command:
        - ls
        - /data/file
    ```
Azure Active Directoryのサービスエンドポイントは存在しない

サービスエンドポイントを指定する際、選択肢に「Microsoft.AzureActiveDirectory」というものがあります。これはAzure Active Directoryにアクセスできるサービスエンドポイントではありません。
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850747/c1b36b64-b84c-5535-d1e1-52862a017ccd.png)

名前だけ見ると、Azure Active Directoryにアクセスできるサービスエンドポイントとして使えそうですが、サービスエンドポイントのドキュメントを確認すると以下のような記載があります。


> Azure Data Lake Store Gen 1 (Microsoft.AzureActiveDirectory):一般公開 (ADLS Gen1 を利用できる全 Azure リージョン)

引用元：[仮想ネットワーク サービス エンドポイント](https://learn.microsoft.com/ja-jp/azure/virtual-network/virtual-network-service-endpoints-overview)

Azure Data Lake Store Gen 1…？？？
なぜAzure Data Lake Store Gen 1のサービスエンドポイント名がMicrosoft.AzureActiveDirectoryになるのか…？同じページのさらに下の方に理由が書いてありました。

> Azure Data Lake Storage (ADLS) Gen 1 では、VNet 統合機能は同じリージョン内の仮想ネットワークでのみ利用できます。 また、ADLS Gen1 の仮想ネットワーク統合では、仮想ネットワークと Azure Active Directory (Azure AD) との間で仮想ネットワーク サービス エンドポイント セキュリティを利用して、アクセス トークン内に追加のセキュリティ要求が生成されることにご注意ください。 これらの要求は、ご利用の Data Lake Storage Gen1 アカウントに対して仮想ネットワークを認証し、アクセスを許可するために使用されます。 サービス エンドポイントをサポートするサービスの下にリストされている Microsoft.AzureActiveDirectory タグは、ADLS Gen 1 へのサービス エンドポイントをサポートするためだけに使用されます。 サービス エンドポイントは Azure AD によってネイティブにサポートされていません。 Azure Data Lake Store Gen 1 の VNet 統合の詳細については、Azure Data Lake Storage Gen1 のネットワーク セキュリティに関するページを参照してください。

すごく限られた用途で限定して使えるサービスエンドポイントのようです。Azure Data Lake Storage (ADLS) Gen 1 のVnet統合シナリオに限定されてはいるもの、その状況でAzure ADにアクセスするために使うサービスエンドポイントだからMicrosoft.AzureActiveDirectoryという名前をつけたと。。うーん、紛らわしい…。

Azure Data Lake Storage Gen1は2024 年 2 月 29 日に廃止が予定されているので、この紛らわしいサービスエンドポイントもひっそりと同じタイミングで廃止されそうですね。
【Android】多言語への対応【Kotlin】

# はじめに
以前　この記事の中で使用している端末の言語設定をもとに言語を指定する
と言ったようなことをしたのですが、どのくらいの数の言語に対応しているのか気になったので調べてみました。

# 国一覧表

|表記|言語|国|
|:---|:---|:--|
|CANADA|ENGLISH|カナダ|
|CANADA_FRENCH|FRENCH|フランセ・カナディアン（カナダやアメリカの一部）|
|CHINA|CHINESE|中国|
|FRANCE|FRENCH|フランス|
|GERMANY|GERMAN|ドイツ|
|ITALY|ITALIAN|イタリア|
|JAPAN|JAPANESE|日本|
|KOREA|KOREAN|韓国|
|PRC|SIMPLIFIED_CHINESE|中国|
|TAIWAN|TRADITIONAL_CHINESE|台湾|
|UK|ENGLISH|イギリス|
|US|ENGLISH|アメリカ|
|ROOT|ROOT|その他|
エンジニア × goodな椅子　~健康で働くための秘訣~

# はじめに
「エンジニアにとって椅子とは？」
この問いにあなたはどう答えますか。

「え、椅子は椅子でしょう。何を言っているんだこいつは。怖っわ」

今のあなたはそう考えているはずです。
しかしこの記事を読めばあなたの椅子に対する認識は以下のように変わるでしょう。

 - **椅子は家族**
 - **椅子より大事なものはこの世にねぇ**

## あなたは○○年座っています！！
エンジニアを生業としているA君は、週５日８時間勤務です。
1日のほとんどを椅子で過ごしています。
そしてA君は22歳〜65歳の43年間働き続けました。えらいね。

結果的に何時間椅子に座ったのでしょうか。計算してみましょう。
***
1日で椅子に座っている時間 × 1年のうち働いている日数* × 43年

###### 　　　　　　　　　　*8h × 245日 × 43* = 84,280時間 ≒ １０年

*A君は年間休日120日らしいので、(365日-120日)働いていたようです。

ちなみに寝ている時間は約12年、その他は約21年です。
***
「84,280時間を年数に直すとおよそ10年です。」
A君「それじゃあ、僕って丸10年間（仕事人生の4分の１）座り続けていたの、、、？」
「えぇ、その通りです。」
A君「もっといい椅子に座っておけばよかったな、、」

## badな椅子による弊害
椅子というものは案外重要なもので、椅子選びを怠ると、姿勢の悪化により様々な弊害が生じます。

- 腰痛
- 血流の悪化
- 肩こり
- 集中力の低下 　etc...

## 最後に
私は冗談抜きで、エンジニアとして生きていく上で **椅子** が最も重要だと考えています。

もちろん技術的スキルや、マネジメント力も非常に大事です。
ですが体を壊してしまっては元も子もありません。
つまり、最も大事なのは **健康** です。

そしてエンジニアの健康と密接に関わるのは、アレです。
そう　**「椅子」**　なのです！！

この記事を見た方にはぜひ、goodな椅子に座り、健康なエンジニア人生を送ってもらいたいです

この記事は以上です。では、さようなら。

## 余談
ちなみにGoogleやFacebookはもはや座ってすらいないようです。
**スタンディングデスク**なるもので仕事の効率化や健康対策を講じているらしいです。
もちろん彼らも考える時間は椅子で過ごしているようですが、、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551848/2e62b630-0f45-18a0-74cb-fd6ed715673e.png)


この方法を取り入れたことで
 - 生産性10%up
 - 集中力の向上
 - 頭痛の軽減
などの効果が見られたそうです。

面白い取り組みなので実践してみてもよいかもしれませんね。
スタンディングデスクについての詳しい記事を貼っておきます。興味があればぜひ。

https://readwrite.com/standing-desks-productivity/
Angular開発環境をdocker環境で立ち上げてみる。

# はじめに

naritomoと申します。

本職はインフラエンジニアを行っています。
最近フロント技術にも興味があり、AngularについてDockerコンテナとして
立ち上げてみました。

いろいろアドバイスいただけると嬉しいです。

## 立ち上げ概要

mac環境にて、
docker-composeを使用してAngularコンテナを立ち上げるものになります。

完成しているソースは以下にあります。

https://github.com/naritomo08/angular-docker

## なぜ、あえてDockerなのか？

インフラエンジニアとしてDockerから触れたほうが扱いやすく、
以下の利点を感じられたため、開発環境構築ではDockerを使用することを
推しています。

* OS問わず同じ開発環境での開発が可能
* 独立したフロントエンドコンテナを構築することにより、
　バックエンドと分離した開発検証が可能。　 

## 事前準備

mac+DockerCompose+vscode+gitでの環境を構築してること。

## 参考URL

[Angular環境構築手順（Docker上に構築する）](https://shiraberu.tech/2021/11/24/angular-setup-on-docker/)

## 事前準備

mac+DockerCompose+vscode+gitでの環境を構築してること。

## 開発環境構築方法(Angular)

### docker構成フォルダ構築

ルートフォルダを作成する。

```bash
mkdir angular-docker
cd angular-docker
```

Dockerfileを作成し、以下の内容を入れる。

```bash
FROM node:latest

WORKDIR /app

RUN npm install -g @angular/cli

RUN ng new sample
```

Docker-compose.ymlを作成し、以下の内容を入れる。

```bash
version: '3'
services:
  sample-angular:
    image: sample-angular-image
    container_name: sample-angular-container
    build:
      context: .
      dockerfile: Dockerfile
    command: sh -c "ng serve --host=0.0.0.0"
    ports:
      - "4200:4200"
    volumes:
      - ./app:/app
    working_dir: /app
```



### コンテナビルド

```bash
docker-compose build
```

### Angularプロジェクト作成

"sample"部分は好きな名前にしてもよい。

```bash
docker-compose run --rm sample-angular sh -c "ng new sample"
cd app/sample
rm -rf .git
```

### docker立ち上げファイル編集

Docker-compose.ymlについて、以下の内容に編集する。

"sample"部分は前の手順に合わせる。

```bash
version: '3'
services:
  sample-angular:
    image: sample-angular-image
    container_name: sample-angular-container
    build:
      context: .
      dockerfile: Dockerfile
    command: sh -c "ng serve --host=0.0.0.0"
    ports:
      - "4200:4200"
    volumes:
      - ./app:/app
    working_dir: /app/sample　→最後に"/sample"を追記する。
```

### コンテナ立ち上げ

```bash
docker-compose up -d
```

### サイト確認

以下のURLにアクセスし、Angularトップ画面が出てくること。

```bash
http://localhost:4200/
```

## 開発環境操作

### 開発環境コンテナ起動/設定再読み込み

```bash
docker-compose up -d
```

### 開発環境コンテナ停止

```bash
docker-compose stop
```

### 開発環境コンテナ破棄

```bash
docker-compose down
```

# おわりに

フロント技術習得の第一歩として、Angular稼働dockerを構築してみました。

この記事がAngularを扱う方の助けになればと思います。
画像複数投稿

# 初学者の備忘録
初学者の備忘録です。前に投稿した[画像投稿]()の発展、画像複数投稿編
[参考にした記事](https://qiita.com/oak1331/items/830755889a37ceee1bc6)

## 注意
前回の画像投稿はプレビュー機能も一緒に載せてましたが、今回は複数投稿なのでプレビューは表示できません。これから挑戦しようと思います。


## 実装
【１】　アソシエーション
元々あったアソシエーションは単数なので複数に対応したアソシエーションに変更します。
```diff_ruby:app/model/必要ファイル名
：
：
  # 単数投稿
  - has_one_attached :image 
  # 複数投稿
  + has_many_attached :images
：
：
```

【２】　ストロングパラメーター
ストロングパラメーターの定義をハッシュ形式にします。ハッシュ形式にした場合は最後に記述してください。
```diff_ruby:app/controllers/必要ファイル名
：
：
   private

  def place_params
    params.require(:place).permit(
    :pet,
    :fee,
    :start_time,
    :end_time,
   +imageds: []
    # 前の結果に対して、付け加える
    )
  end
end
```

【3】 view
画像投稿フォームを編集します。`multiple: true`で実現できます。
```diff_ruby:app/controllers/必要ファイル名
<%= f.file_field :images, multiple: true %>
```
ここまでで画像複数投稿が実装できてますが、このままだとバリデーションが設定されていないのでバリデーションを設定していきましょう。

【４】　バリデーション
今回は画像投稿枚数にバリデーションをかけます。バリデーションを設定するにあたってGemがあるのを知ったのでGemを使用して設定していこうと思います。
使用したGemは[active_storage_validations](https://github.com/igorkasyanchuk/active_storage_validations)です。

まずはGemをGemfileに記述して、インストールします。
```ruby:Gemfile
gem 'active_storage_validations'
```
次にインストール
```ruby:Gemfile
$ bundle install
```
これで画像関係のバリデーションGemは導入できたので、対象Modelにバリデーションを記述します。
```diff_ruby:app/model/必要ファイル名
：
：
  # 画像枚数のバリデーション
  validates :images, limit: { min: 0, max: 3 }
：
：
```
limitが個数関係のバリデーションです。

ここで私の失敗談ですが、バリデーション設定の時、最大枚数は３枚だけでよくて画像投稿しなくてもいい設定にしようとして最小値を設定しなかったのですが、最小値は設定しないといけないようでした。

<details><summary>おまけ</summary>

画像を複数投稿できる機能をつけたということは複数表示させるようにViewも設定しないといけません。
Viewで画像を複数表示させるにはeach文を使用します。

まずはModelで画像があるかないか判断するメソッドを設定している場合、Modelのメソッドをeach文に対応できるように設定します。

```diff_ruby:app/model/必要ファイル名
：
：
 # 画像が存在するかどうか判断するメソッド
  def get_place_image
    # 存在しなかった場合no_image.pngを使用
    # []配列にすることでeachが使用できるように設定
    (images.attached?) ? images : ['no_image.png']
  end
：
：
```

次にViewをeach文で表示させます。

```diff_ruby:app/view/必要ファイル名
：
：
 <!--画像を繰り返し表示-->
<% @place.get_place_image.each do |img| %>
    <%= image_tag img, alt: 'Place Image', class: 'img-fluid w-100' %>
<% end %>
：
：
```

Modelで文字列を配列に無理やりですが変更させてあげたことによって、Viewのコードがすっきりしたコードにできました。

```diff_ruby:app/view/必要ファイル名
：
：
 <!--Modelで対応しなかった場合-->
<% if @place.images.attached? %>
    <%  @place.images.each do |image| %>
        <%= image_tag image, alt: 'Place Image', class: 'img-fluid w-100' %>
    <% end %>
<% else %><!--存在しなかった場合-->
    <%= image_tag "place_no_image.png", style: "width: 50;", id: 'imagePreview', class: "img-fluid mb-3" %>
<% end %>
：
：
```


</details>

以上でバリデーション設定終了です。お疲れ様でした。



## 最後に
初めての挑戦ということもあり画像複数投稿はなかなか苦戦しました。ですが様々な発見もありました。
特にバリデーションとviewの表示は勉強になりました。やっぱりプログラミングは楽しい。
ではお疲れ様でした。
next/imageのレイアウトシフト対策について

## レイアウトシフトとは
Webページは画像の読み込みが完了する前に描画される。そのため、画像に対してレイアウトシフト対策が施されていない場合、画像が遅れて表示されると先に表示されていたコンテンツの表示位置がズレる現象（**レイアウトシフト**）が発生する。
レイアウトシフトはユーザーのストレスにつながるため、対策を行うことが望ましい。

## レイアウトシフトを防ぐには
あらかじめ HTML&CSS で画像の「横幅」「高さ」「縦横比」のうち、2つ以上の情報をブラウザに伝える。それにより、ブラウザは画像の読み込み前に表示エリアを確保し、レイアウトシフトの発生を防ぐことができる。

## `next/image`におけるレイアウトシフト対策の仕組み
`next/image`は、`Image`コンポーネントの`width`と`height`で指定された値を元にレイアウトシフト対策を行う。ただ、`<img />`に`width`と`height`属性を指定するだけのシンプルな対策には古いブラウザが未対応である。
そのため、古いブラウザでも機能する方法で対策が施される。この方法では、`<span>`で表示エリアを確保しておき、画像の読み込みが完了したら`<span>`に重ねて画像を表示する。`Image`コンポーネントの出力に`<span>`が付加されるのはこのためである。
電子入札を設定 2023年版


2010年頃から一般的になった地方自治体や政府機関の電子入札。
過去には Java と Javaアプレット と InternetExplorer と Windows のバージョンやら設定やら依存やら矛盾やらでさんざん悩んだが、今風の設定だと 脱 Java となり、ブラウザも Edge の Chromium 版 や Google Chrome に対応しているらしい。

# 環境

- Windows11 Pro
- Google Chrome
- Edge
- AOSign 社の ICカード形式電子証明書を利用


電子入札対象

- 文部科学省
- 政府電子入札(GEPS)
- 徳島県

# 設定

## 準備

- Windowsユーザ名を半角英数字で作成しておく
- ログオン方法を決めておき、必要なものを用意
  - 今回は既存の AOSign 社の ICカード形式電子証明書を利用

## 資料

「入札参加者端末用設定手順書（PDF:2,790KB）」
https://portal.ebid02.mext.go.jp/top/setting/files/setting.pdf?ver=20230224
を見て設定する。

## 電子入札補助アプリ


「NDNご利用ソフト」なるものをダウンロードし、ローカルにインストールする。解凍してできるNDNTOOL_1100 なるものを実行。
最初の起動で以下のように設定。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/912d266d-790d-c71b-764c-cec90b1ae83d.png)
更にカード番号と有効期限を入力しておく。

その他に必要なソフトは、「メインメニュー」からインストールできる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/252b88bd-8d30-21de-24fe-ee97448f0c30.png)


「パソコン情報の確認」を押して、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/f6404c31-29d4-e0c0-ea15-eba856562569.png)

「更新プログラムを確認」で必要なソフトをダウンロード、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/d7138202-da4b-915f-4083-84c5e37bf573.png)

「更新プログラムのインストール」で一通りインストールしていく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/79e6631b-7e35-bfb1-5943-af785e5ffd65.png)

## 許可リストを設定

入札対象によって、それぞれ設定していく。

電子入札補助アプリを起動

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/dc84f4d6-656c-090f-7d43-2946f46253b4.png)

必要なURLが許可URLリストに設定されているか確認、なければ追加。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/3a4da665-12b0-8408-fcf7-86b030eda6f9.png)


## Google Chrome の設定

文部科学省、徳島県は Google Chrome で設定しました。

- Google Chrome のキャッシュクリア
- Google Chrome でポップアップ許可の登録
   - 文部科学省の場合
   - `[*.]ebid02.mext.go.jp` 
   - 他の省庁の場合はそれに応じて対応したサイトを登録
- Windows11 の「インターネットのプロパティ」で信頼済みサイトの登録
  - 文部科学省の場合だけ指定がありました：
  - https://portal.ebid02.mext.go.jp
  - https://www.ebid02.mext.go.jp 


# 政府電子入札(GEPS) の設定

GEPS は Webブラウザとして Edge のみ対応。Edge  を 上記の Google Chrome の設定と同様に設定してきます。
更に上記に加え、GEPS は以下の追加設定が必要です。

https://www.p-portal.go.jp/pps-web-biz/resources/app/html/pcsetup.html
にあるように、ブラウザプラグインをインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/f688ca0c-c34c-e810-2559-5adbb1a08dba.png)

ICカードリーダーの設定をします。
https://www.p-portal.go.jp/pps-web-biz/resources/app/html/pcsetup.html
の「ICカードを利用する場合のインストーラー（zip形式：0.4MB）」


クライアントの環境確認
https://www.p-portal.go.jp/pps-web-biz/UZA05/OZA0501


# 感想

電子入札導入時は Java 地獄、InternetExplorer 地獄 、苦心惨憺設定しても動作もなんだかぎこちなく、当時パワフルに動いていたYahoo!オークション(現ヤフオク!)と比べて、「ヤフオクで電子入札したほうがよっぽどマシ」と揶揄したものでした。それから比べるともう天国です。
さすがに MS-Windows 環境に依存していますが、将来はやろうと思えば国税電子申告のように非接触式カード+カードリーダー+Webブラウザだけでできそうな気がします。
AviUtlでNL-Means Light for GPUをインストールしたのにフィルタ一覧にない

.aufをPluginディレクトリにコピーしただけでは動かない。
以下のコンポーネントのインストールが必要になる。

- Microsoft Visual C++ 2010 SP1 再頒布可能パッケージ (x86)

Windows 10以降では、古いバージョンのDirectXがOSから削除されたため、追加でランタイムのインストールも必要。

- DirectX End-User Runtime (DirectX 9.0c June 2010）
エンジニア1年目が思うGitとGitHubの基礎（ここだけは押さえるべきと思うポイント）をまとめる

# はじめに
はじめまして。エンジニア1年目のみーと申します。
今の案件でGitを使ってシステム開発を進めています。
この記事では、未経験でGitが何かすらわかっていなかった頃の自分にアドバイスするなら…といった観点でGitの基礎（ここだけは押さえるべきポイント）をまとめようと思います。
読み物として書いてますので、事前準備は特にありません！

# 対象者
- Gitってなに？と思っている方
- Gitに触れてこなかったが次の案件から必要になる方
- まだGitの学習を全くしていなくて、書籍を買う前になんとなく触りだけ知りたい方
- まずは概要の理解、覚えておいた方がよいことのみ把握したい方


# 前提条件
特になし
（強いて言うならWindowsPCを触ったことがあり、通常操作は行えるレベルであること
例：フォルダ、ファイルと言われて何を指しているか分かること）

# GitとGitHubとは
 これは調べればすぐわかることですが、Gitとはバージョン管理システムのことです。どのサイトでもそう書いてありますが、本当にそれに尽きます。システムやアプリのバージョンを管理するためのものなんだなぁということが把握できていればOKです。
 そしてGitHubはバージョン管理システムを複数人で行えるようにしたシステムのことです。
まず知っておいていただきたいのですが、システム開発は基本的に大勢で取り組んで完成させます。そのためいつ誰がどんな内容を更新したのかを正確に管理しなければ、様々な問題が発生してしまいます。

 発生しうるトラブルの例
 - 最新版ファイルがどれか分からず、古いファイルを使って新しい内容を更新してしまう
 - 最新版ファイルに不具合が発生していても、前の状態に戻すことができない


このような問題が発生いないよう管理できるようにしたものがGitやGitHubです。最初はイメージが湧かない方もいるかもしれませんが、“作りたいシステムやアプリのバージョンを管理しているもの”とだけ覚えていれば第一ステップとしては全く問題ありません！

# 学習する上で押さえておくべきポイント
 ここが本題にはなりますが、Gitでは聞きなれないカタカナがたくさん出てきます。そしてどれが重要でどれが重要ではないの判断もつかないと思います。
 また、そのカタカナ単語たちを頭の中だけで覚えようとしても、そもそものイメージが湧いていないので、理解に苦しむと思います。
 そのためGitの学習で重要なポイントは“イメージで捉える”ことです。
 1つひとつの単語をしっかり覚える必要はありません。ぼんやりと全体像を理解することに重きを置いてください。
そしてその上で単語を覚えましょう。単語だけで覚えるよりずっと理解しやすいと思います。
 
※下記では初学者が混乱することを防ぐために最低限知っておいた方がよい単語のみを登場させます。つよつよエンジニアの方は優しい目で見守ってください。
 
### イメージ図と最低限覚えておきたい用語
※学習する時や実務でGitを使う際は必ずこのイメージ図を思い浮かべながら作業をするとよいと思います！！
![Git イメージ図.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823804/48960a32-ccbe-a641-2858-2f3cbf09a02e.png)

リモートリポジトリ：みんなの環境
ローカルリポジトリ：自分の環境
インデックス（ステージングエリア）：作業したものを保存する場所
ワーキングツリー：実際に作業する場所
git add：インデックスに保存すること
git commit：ローカルリポジトリに保存すること
git push：リモートリポジトリに保存すること
git pull：リモートリポジトリのソースコードをワーキングツリーにコピーすること
git fetch：リモートリポジトリのソースコードを自分のローカルリポジトリにコピーすること
git merge：ローカルリポジトリのソースコードをを自分のワーキングツリーにコピーすること


# おわりに
 今回は初学者に向けて、GitとGitHubについて書かせていただきました。今はまだイメージがぼやっとしているかもしれませんが、あとの細かいことは実際に使っていく中で覚えていけばよいと思います。今日書かせていただいたイメージ図はGitの学習をする上で必ず出てくるものです。そのぐらい大事なことなので、皆さんもGitを使う際は頭の中にこのイメージ図を浮かべながら進めてみてください。
最後まで読んでいただき、ありがとうございました。
フロー共有した人のOneDriveの中でExcelを読み込む


![Automate_logo (2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3111714/5ff93b74-fa39-6c97-6f64-5d88cedf8c38.jpeg)
下記のようにExcelファイルをOne driveの中に置いてデータ読み取りをするフローを作成し
共有をするとエラーが発生してフローはこけます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3111714/a005acd1-1f07-0225-ec88-7d5ee7330f2f.png)

:::note warn

学び始めにやりがちなことですね。
:::

これはなぜかというと、規定で表示されている【OneDrive】は
フロー所有者のドキュメントライブラリが指定されているからです。
なので、ここは動的になるようにカスタム値に変数などで指定してあげる必要があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3111714/e8f46d55-ab35-0248-4995-ae81e91c7712.png)

## どうやってドキュメントライブラリのIDを抜き出すか
ドキュメントライブラリのIDの取得方法は色々ありますが、
今回はパスによるファイルのメタデータの取得というアクションを使用しているので、
その中のID、またはファイルロケーターの.(ドット)以前がドキュメントライブラリのIDなのでそれを抜き出します

```ruby:ファイルロケーターの中身はこんな感じです。ここは毎回変わるので参考程度に
"b!iQo7tRtGJUuWnIKRSWuie15eoRkWdfdIm0IN9wQOpW_htF2vnX7LRaKTSAcWX0i_.01JAGVXCMH2PVLDMV3MRDJZ5FUMFYKORDU"
```
Slice関数を使用して、.以前のドキュメントライブラリIDを抜き出し変数に入れます
データはObjectの状態なので一度、作成アクションに吐き出します。
(作成を使わない場合は後続の関数にString関数を足さないといけません)。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3111714/cfb63868-6203-2b26-b6f6-148cd0462cee.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3111714/5907778a-1b45-6271-766d-a5d93c445926.png)
```ruby:Slice関数で.(ドット)以前を抜き出します
slice(outputs('作成'),0,indexOf(outputs('作成'),'.'))
```



## ついでに場所も指定しておく
場所も、指定しておきましょう
こちらは簡単で変数にmeと入力するだけです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3111714/20300df3-11ad-4d60-b234-48ead0b2cd58.png)

こんな感じです。
おまけですが、動的にデータを取得するには
下記のようにファイルにはメタデータの取得で取得したIDを入れます。
テーブル名はIDじゃなくとも、文字で読み込みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3111714/b59cda3b-dd27-3fd4-d96a-1b11e62d57a3.png)

無事データを読み込めました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3111714/7b276a3f-0cac-43f2-0cda-9c4333f5b6dc.png)





![ダウンロード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3111714/b7334efa-2aa2-45a1-3f89-fd6c01cde56a.png)
主に開発に携わっているChisato_momです

PowerAutomateは現在あるRPAの中でも設計の自由度および価格で
中小企業にとっては強い味方だなと思っています。
娘と一緒にRPAを勉強しようと思い、楽しく勉強できるように
Power Automateくんの絵を添えました。
マルウェア、さまざまな攻撃

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457284/30d15fb1-ae34-3c47-4343-3fed0255da79.png)
　マルウェアは、悪意を持ったプログラムの総称です。コンピュータウイルス、スパイウェア、ボットなどの多くのマルウェアが存在します。マルウェアは、情報漏洩させたり、迷惑メールを配信したり、他のホストへ攻撃したりします。パソコンにマルウェアが入り込まないよう細心の注意を払う必要があります。また、マルウェア以外にも、OSやアプリケーションの脆弱性をついて攻撃し、ホストに侵入して不正操作を行う事例もあります。

１：攻撃者の種類と攻撃の動機
①ダークウェブ：通信の匿名化を行う特定のソフトウェアを利用しないとアクセスできないWebサイトであり、マルウェアの配布、違法ギャンブル、犯罪共謀のための情報交換などを行う、いわゆるアンダーグランドサイトである。

②サイバーキルチェーン：サイバー攻撃が実行される流れを偵察、武器化、デリバリー、エクスプロイト、インストロール、しれい、目的の実行の７段階に区分するモデル。個々の攻撃手口を各段階に位置付けて考察することで、攻撃者の意図が把握しやすくなり、全体的な見通しが良くなって攻撃の対策を立てやすくなる。

③サイバーテロリズム：コンピュータネットワーク（インターネット）を利用して、情報システムをを攻撃対象として行われる破壊活動、テロリズム。

④ハクティビズ：政治的な主張や、政治目的の実現のためにハッキング活動（Webサイトの改ざんなどのサイバー攻撃）を行う思想。

２：不正のトライアングル
　不正のトライアングルは、米国の犯罪学者であるD.R.クレッシーが犯罪調査に基づいて導き出した理論です。組織の内部関係者が不正行為に至るさいの原因には、
①動機、プレッシャ、
②機会
③正当化
の３つの要素があるとしています。これら３つが揃うと不正行為が行われます。各要素の例として、次のものが挙げられます。

「不正のトライアングルの３要素」
動機、プレッシャ：「例」金銭的に困っている、技術情報を持って転職すれば高く評価されると考えた。
機会：「例」電子メールの送信内容の確認（添付ファイルチェック）がされていなかった。技術情報を手元にコピーして保管し続けることができた。
正当化：「例」この技術を開発したのは自分なのだから、技術情報を持ち出しても構わないと考えた。
簡単な動画コンテンツの生成

自分用のメモです

１）CHATGPTでブログ記事を書かせる
２）TEXT　TO　MP3で変換　　https://ttsmp3.com/
３）MP3をCAPCUTに貼り付ける　https://www.capcut.com/my-edit
４）TEXTメニューで音声変換してキャプションを追加
５）Imagecreatorで画像生成して貼り付け

以上

サンプル

https://youtu.be/x8-FxLtXB20
VSCode の作業画面を広くする方法（with Activitus Bar）

# 方法

- Activitus Bar拡張機能をインストールする。
    - setting.jsonで、画面左下に表示されるようになったMune Barのアイコンの順番を入れ替えるなどの設定ができる。

- ctrl + shift + P
    - View: Toggle Menu Bar（VSCodeを再起動してもtoggleの状態は保持される）
    - ~~View: Toggle Full Screen（VSCodeを再起動すると復活するため微妙…）~~

- Keybord Shortcutsを開く
    - View: Close Primary Side Bar / Alt + S / sideBarVisible
    - View: Focus on GitHub Copilot View / Alt + S
    - Source Control: Focus on Source Control View / Alt + D
    - Explorer: Focus on Folders View / Alt + F

---

- ~~さらに、Zen Modeのショートカット設定~~
    - ~~Keybord Shortcutsを開く~~
    - ~~$\rightarrow$ View: Toggle Zen Mode / Alt + S / !inZenMode~~
    - ~~$\rightarrow$ workbench.action.exitZenMode / Alt + S / inZenMode~~

# 備考
- 現在開いているフォルダを閉じるデフォルトのショートカット
    - Ctrl + K F（Workspaces: Close Workspace）
大規模言語モデルとナレッジグラフに関する研究

### 大規模言語モデルにナレッジグラフを用いる利点
https://neo4j.com/developer-blog/knowledge-graphs-llms-multi-hop-question-answering/
（メモ：Summaryにまとまっている）

LLMを利用してKGを作る利点
https://www.linkedin.com/pulse/artificialintelligence-118-knowledge-graphs-llms-research-ajit-jaokar?trk=article-ssr-frontend-pulse_more-articles_related-content-card

### 大規模言語モデルをナレッジグラフへ応用する方法

1. LLMを使用してKGを構築する
2. LLMをKGへの自然言語インターフェイスとして使用する


#### 「1. LLMを使用してKGを構築する」
- 人工知能学会のSWO研究会などで紹介されるナレッジグラフ推論チャレンジ
2023年のテーマ「大規模言語モデルを用いたナレッジグラフの構築」
https://speakerdeck.com/ease112/naretuzigurahutui-lun-tiyarenzi2023-sheng-cheng-aishi-dai-nonaretuzigurahugou-zhu-ji-shu-noshao-jie?slide=5

- 大規模言語モデルによって構築された常識知識グラフの拡大と低コストフィルタリング
村田栄樹,　井手竜也,　榮田亮真, 河原大輔 早稲田大学理工学術院
山崎天　李聖哲　新里顕大　佐藤敏紀 LINE 株式会社

#### 「2. LLMをKGへの自然言語インターフェイスとして使用する」

- GTR-LSTM: A Triple Encoder for Sentence Generation from RDF Data
Bayu Distiawan Trisedya, Jianzhong Qi, Rui Zhang, Wei Wang
ナレッジグラフから自然言語を生成する。


#### 実装
https://github.com/jerryjliu/llama_index
- LLM を独自のデータで強化することを目的に作られた。LLMを用いたKGの利用とKGでのGPTの強化を実装。

#### 総括
- KGはリソースの構造化が必要でありデータの作成にコストがかかるデメリットがある一方で、データが構造化されているため複雑なクエリに応答できることや、クエリングが早くなる、構造化情報と非構造化情報を利用できるメリットがある。

同様の目的で作成されているGitHubリポジトリ
https://github.com/XiaoxinHe/Awesome-Graph-LLM
【AWS】S3バケットの暗号化

## S3バケットの暗号化について最近変わった点
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3522793/e1e36d2d-8d20-7b17-7375-143f91b93ed6.png)
バケット作成時に暗号化のタイプを選択することができるのですが、
2023年1月5日以降はデフォルトでバケットが暗号化されるようになりました。
以前は暗号化しない選択もできたようです。

ちょっと注意なのは、2023年1月5日より以前にバケットの暗号化をなしに設定していた場合は
既存のバケットの中のオブジェクトは暗号化されていないようです。
ただし既存のバケットは暗号化されたため1月5日以降に新しく追加されたオブジェクトは
暗号化されるという少し紛らわしいことになっています・・・
私は少し前にプロジェクトのS3バケット内のオブジェクトが全て暗号化されているか
確認する業務があったのですが、スクリプトを組んでやったのでもっと便利なやり方が
あればいいなと思いました。

【AWS S3バケットがデフォルトで暗号化される】
https://aws.amazon.com/jp/blogs/news/amazon-s3-encrypts-new-objects-by-default/
Viコマンド

# はじめに
　Linuxでファイルを編集するときに使うVi。特殊なので使い方をすぐ忘れるので、備忘録としてまとめる。

## インサートモード・コマンドモード
　viは文字を入力する「インサートモード」と、文字をコピペや削除するなど編集をする「コマンドモード」がある。モードの切り替えは **[ESC]** ボタンで行う。
[戻る](#目次)

## コマンド

### 終了
```console:cmd
$ :q	#Saveせず終了
$ :q!	#強制終了
$ :wq	#保存して終了
```

### 文字編集
```console:cmd
$ i  #カーソル位置の前に文字を挿入。インサートモードに戻る。
$ a  #カーソル位置の後に文字を挿入。インサートモードに戻る。
$ x  #カーソル位置の文字を削除
$ dd #カーソル位置の行を削除(切り取り)
$ D  #カーソル位置から行の最後までの削除(切り取り)
$ yy #カーソル位置の行をコピー
$ p  #ペースト
```
Androidのワイヤレスデバックの接続が不安定で悩んでいる

# Androidのワイヤレスデバック
以前にAndroidのワイヤレスデバックについてQiita記事を書きました

https://qiita.com/cozyk100/items/dce05340d5922b79ada3

USBケーブルがないので、便利な反面、Wi-Fiを使うので安定性に欠けます。

現在、Android11でワイヤレスデバックを使用していますが、接続が不安定で困っています。既にペアリングはできているのですが、Android端末側でワイヤレスデバックを開始したとき、すぐに接続できる場合と、いくら待っても接続しない場合があります。

Android端末側、PC側を再起動したりしても、全く状況変わらず。そのうち、諦めた頃にあっさり接続したり。また接続しなくなったり。

今現在、その原因が何なのか全くわかりません。Wi-Fiを通じてAndroid端末とAndroidStudioがインストールされているPCとの接続は普通にできています。

全く、その日、その時の気分で接続できたり、できなかったりとしか思えません。

何か、Androidのワイヤレスデバックのデバック？(一体、どこまで接続できているのか？)を調べる方法がないかどうか、模索していたところ、本家のホームページでこのような記事がありました。

* [Wi-Fi 経由でデバイスに接続する ※１](https://developer.android.com/studio/command-line/adb?hl=ja#connect-to-a-device-over-wi-fi)
* [Wi-Fi 経由でデバイスに接続する（Android 10 以前） ※２](https://developer.android.com/studio/command-line/adb?hl=ja#wireless)

※１の方はAndroid11以降の手順で、これは前のQiita記事で書いた通りです。ワイヤレスデバックはAndroid11以降じゃないと使えないものと思っていましたが、※２の手順だと・・・

**なんと！Android10以前でもワイヤレスデバックが使えるのです**

（何故、最初にそれを教えてくれなかった・・・？）

そして、※２の方法はAndroid11以降でも使えます。上記の※１の手順でなかなか接続できない時は※２の手順だと、あっさり接続できました。ただし、最初はUSB接続が必要になります。（一旦、接続してしまえば、USBケーブルは外せる）

私のように、Androidのワイヤレスデバックの接続が不安定で悩んでいる人は※２の手順を試してみてください。

# Androidのワイヤレスデバックが不安定な原因

その後、色々ためしているうちに、AndroidStudioとIntelliJを同時に起動しているとワイヤレスデバックが接続しなくなることがわかりました。AndroidStudioだけだと安定して繋がります。

AndroidStudioはIntelliJをベースとしてプラグインで拡張しているので、どうやらIntelliJファミリーを複数起動しているとワイヤレスデバックが接続しなくなるのではないかと思います。（他のIntelliJファミリーは試していませんが）
画像投稿機能

# 初学者の備忘録
初学者の備忘録です。今回は画像投稿機能- ActiveStorage - 編


## ActiveStorage
今回は画像投稿機能としてActiveStorageを使用した方法になります。
ActiveStorageとはRailsで画像の投稿や表示を行うためのものです。画像は通常のカラムとして保存できないため、特別な保存方法が必要になり、それを行うのがActiveStorageです。


## 導入
ActiveStorageを使うためにActiveStorageをインストールします。
インストールが終わるとdb/migrateディレクトリ内にActiveStorageのマイグレーションファイルが追加されます。マイグレーションファイルをUP状態にするためのコマンドも行っておきます。
```ruby:ターミナル
$ rails active_storage:install
$ rails db:migrate
```
導入は以上です。


【１】　宣言
ActiveStorageを使って画像を表示する際には、どのモデルに対して画像を使うのかを宣言する必要があります。
```ruby:app/models/ファイル名
has_one_attached :image
```
モデルで宣言することによって画像を扱うためのimageカラムが追記されたかのように扱うことができます。


【２】no_image
画像が存在しない場合に別の画像を表示させるためのメソッドを定義していきます。なくても大丈夫です。好みの問題です。
```ruby:app/models/ファイル名
：
：
# No_imageが存在するかどうか判断するメソッド
  def get_place_image
    # 存在しなかった場合no_image.pngを使用
    (image.attached?) ? image : 'no_image.png'
  end
：
：
```
'no_image.png'はご自身の好きな画像をご使用ください。


【３】　view
準備は終了したので次は投稿フォームに画像投稿フォームを作成していきます。
今回は私が実際に実装したものを載せますが、ご自身で自由にレイアウトを整えてください。
```ruby:app/view/ファイル名
：
：
<!--画像フォーム-->
  <div class="row">
    <div class="col-12 w-100">
    <!--画像が存在するかどうか判断-->
    <% if place.image.attached? %>
      <%= image_tag place.image, style: "width: 50;", id: 'imagePreview', class: "img-fluid mb-3" %>
    <% else %><!--存在しなかった場合-->
      <%= image_tag "place_no_image.png", style: "width: 50;", id: 'imagePreview', class: "img-fluid mb-3" %>
    <% end %>
    </div>
  </div>
  <!--画像フォーム-->
  <%= f.file_field :image, id: "imageField" %>
：
：
```
本当はもっとスッキリまとまったコードが記述できるのですが、発展でJavaScriptを使用したプレビュー機能を作成したのであえて冗長なコードにしています。まとめるとJavaScriptが機能しなくなりますので。
JavaScriptで重要なのは`id: 'imagePreview'`の部分なので`imagePreview`はご自身がわかりやすいように変更してください。

<details><summary>プレビュー機能はいらない</summary>

JavaScriptを使用せずプレビュー機能はいらない。画像投稿だけできればいいという方向けに１行の画像投稿コードは下記のようになります。

```rb
<%= image_tag place.get_place_image, style: "width: 50;", class: "img-fluid mb-3" %>
```
これだけで画像投稿フォームが機能します。
</details>

【４】　プレビュー機能（発展機能）
JavaScriptはまだまだ学習中で理解できていないので説明はできませんし、間違ったコメントがあるかもしれませんが機能としてはできているので投稿しておきます。

```ruby:app/JavaScript/packs/application.js
：
：
// viewを読み込んだ後に実行（イベントを使用する場合は使用する場合が多い）
$(document).on('turbolinks:load', function() {
  // 画像アップロードフィールドの変更イベントが発生したときの処理
  $('#imageField').on('change', (e) => {
    // 選択されたファイルを取得（ver=変数宣言）
    // 画像選択したら発火（０＝１枚）
    var file = e.target.files[0];
    // FileReaderオブジェクトを作成
    // FileReader()：JavaScriptのプログラム　new:classをオブジェクトに作成
    var reader = new FileReader();
    // 読み込み完了時に処理（file＝＞f）
    reader.onload = (f) => {
      // プレビュー画像のsrc属性を選択した画像ファイルのDataURLに設定=>viewへ
      $('#imagePreview').attr('src', f.target.result)
    }
    // 画像ファイルをDataURL形式で読み込む
    reader.readAsDataURL(file);
  });

});
：
：
```
私の場合複数の箇所でプレビュー機能を使用したのでapplication.jsに記述しましたが、特定のページや機能だけで使用する場合は別のjsファイルを使用しても大丈夫です。
機能しているかどうかわからない場合は検証ツールでコンソールでエラーが出ていないか確認。エラーが出ていた場合console.log();でイベントが機能しているかどうか確認しましょう。


## 最後に
画像投稿は何度か苦戦したところなので忘れた時などにためになればいいなと思っています。JavaScriptも今回は１枚の画像投稿だけですが、複数画像投稿できる機能になると別のコードを加えないといけないのでまだまだ勉強しないとわかりません。
ではこれで終わりたいと思います。お疲れ様でした。
[jtreg]Windows環境でjtregをビルド

## 0.環境
- Windows 11 Home 22H2(build:22621.2283)
- Git (2.41.0.windows.3)

## 1.Cygwinのセットアップ

- Cygwinのインストーラを[公式サイト](https://www.cygwin.com)からダウンロード。
- ダウンロードした`setup-x86_64.exe`を実行（念のため管理者として実行）。
  - 設定はいじらずに`Choose A Download Site`の画面まで次へ。
  - ダウンロードサイトは`https://ftp.yz.yamagata-u.ac.jp`を指定。
  - `dos2unix`、`make`、`unzip`、`vim`、`wget`、`zip`を追加してインストール。
- Cygwinのルートディレクトリ配下に`.ssh`ディレクトリを作成し、鍵を生成。GitHubに公開鍵を登録しておく。

## 2.テスト対象のPATH設定

- テスト対象となるJDKをダウンロードし、任意のディレクトリに解凍。
- 環境変数に`JAVA_HOME`とPATHを通しておく。
コマンドプロンプトで以下のように表示されればOK。
今回は執筆時の数日前（2023/9/19）にリリースされたJDK21をテスト対象とした。
```
>java --version
java 21 2023-09-19 LTS
Java(TM) SE Runtime Environment (build 21+35-LTS-2513)
Java HotSpot(TM) 64-Bit Server VM (build 21+35-LTS-2513, mixed mode, sharing)
```

## 3.ビルド資材のダウンロード・セットアップ

- [jtreg](https://github.com/openjdk/jtreg)リポジトリをCygwinのルートディレクトリにクローン。
- `dos2unix`コマンドをjtregディレクトリ配下のすべてのファイルに実行。
```
cd ~
git clone git@github.com:openjdk/jtreg.git
cd jtreg
find . -type f -print0 | xargs -0 dos2unix
```
- [Adoptim](https://adoptium.net)からJDK11以上をダウンロードしてCygwinのルートディレクトリに解凍。
今回使用したjtregビルド用JDKは以下。
```
$ ~/jdk-17.0.8.1+1/bin/java --version
openjdk 17.0.8.1 2023-08-24
OpenJDK Runtime Environment Temurin-17.0.8.1+1 (build 17.0.8.1+1)
OpenJDK 64-Bit Server VM Temurin-17.0.8.1+1 (build 17.0.8.1+1, mixed mode, sharing)
```

## 4.ビルドの実行

- カレントディレクトリをjtregに移動し、build.shを実行。
```
cd ~/jtreg
sh make/build.sh --jdk ~/jdk-17.0.8.1+1
```

## 5.jtregがビルドされたことを確認
```
$ ~/jtreg/build/images/jtreg/bin/jtreg -version
jtreg 7.3.1-dev+0
Installed in C:\cygwin64\home\{User}\jtreg\build\images\jtreg\lib\jtreg.jar
Running on platform version 21 from C:\Program Files\Java\jdk-21.
Built with "17.0.8.1+1" on September 24, 2023.
Copyright (c) 1999, 2022, Oracle and/or its affiliates. All rights reserved.
Use is subject to license terms.
JT Harness, version 6.0 ea b24 (September 24, 2023)
Java Assembler Tools, version 7.0 ea b09 (September 24, 2023)
TestNG: testng-7.3.0.jar, guice-5.1.0.jar, jcommander-1.82.jar
JUnit: junit-platform-console-standalone-1.9.2.jar
```

### ヒント
- 試行錯誤しながら操作したことを思い出しながら記述したので抜けがある可能性がある。
- JDKのダウンロード・解凍などはWindowsのエクスプローラー上で操作して問題ない。
OpensCAD用角度と一辺の長さが分かるときの三角関数ライブラリーを作ってみた

OpensCADはプログラムで書けてサイズ変更など非常に便利なのですが
一般的なCADならこの線と接する点などマウスドラックで微調整できますが
OpensCADはすべて数字の羅列であるため三角関数を使って座標を求める必要があります。

三角関数を多用する時があったのでこの機会に
角度と一辺の長さが分かるとき三角関数で値を求める物をモジュール化してみた。
備忘録としてここに残します。

```
// 斜辺計算モジュール（高さと角度から求める）
function hypotenuse_cal_h(height, angle_deg) = height / sin(angle_deg);

// 底辺計算モジュール（高さと角度から求める）
function base_cal_h(height, angle_deg) = height / tan(angle_deg);

// 高さ計算モジュール（斜辺と角度から求める）
function altitude_cal_s(hypotenuse, angle_deg) = hypotenuse * cos(angle_deg);

// 底辺計算モジュール (斜辺と角度から求める)
function base_cal_s(hypotenuse, angle_deg) = hypotenuse * sin(angle_deg);

// 高さ計算モジュール（底辺と角度から求める）
function altitude_cal_b(base, angle_deg) = base * tan(angle_deg);

// 斜辺計算モジュール（底辺と角度から求める）
function hypotenuse_cal_b(base, angle_deg) = base / cos(angle_deg);
```

使い方例を高さhと角度angleが分かるときに斜辺yと底辺ｘの求め方
```
h=100;
angle=30;
y=hypotenuse_cal_h(h, angle);
X=base_cal_h_cal_h(h, angle);
```
求めたX,yは✗座標やY座標として使い
座標値を変数化して使ってます。
```
p1=[x,y];
p2=[0,h];
p3=[x,0];
```
座標を変数化していればpolygon命令と変数で平面図がかけます。
```
polygon([p1, p2, p3]);
```

今回は角度と線の長さからの算出方法でしたが
2つの辺の長さから　残りの1辺の長さと角度を算出するのは今後の課題の一つとします。

最後にOpensCADプログラムは、三角関数を使いこなせれば
かなり便利になります。
ライブラリー増やしてプログラミングスピード上げたいと思ってます。
【SwiftUI】PhotosPicker使ってみた

# はじめに
PhotosPickerを使ったことがなかったので次回からスムーズに使えるように`PhotosPicker`の最小単位を記録しておきます。

# 実装
### 写真を1枚選択する
```swift
import SwiftUI
import PhotosUI

struct SwiftUIView: View {
    @State private var selectedPhoto: PhotosPickerItem?
    
    @State private var uiImage: UIImage?
    
    var body: some View {
        
        VStack {
            if let uiImage {
                Image(uiImage: uiImage)
                    .resizable()
                    .scaledToFit()
                    .padding(20)
            }
            
            PhotosPicker("写真を選択", selection: $selectedPhoto)
                .onChange(of: selectedPhoto) { selectedPhoto in
                    Task { await loadImageFromSelectedPhoto(photo: selectedPhoto) }
                }
        }
    }
    
    private func loadImageFromSelectedPhoto(photo: PhotosPickerItem?) async {
        if let data = try? await photo?.loadTransferable(type: Data.self) {
            self.uiImage = UIImage(data: data)
        }
    }
}
```

### 写真を複数選択する
```swift
import SwiftUI
import PhotosUI

struct SwiftUIView: View {
    @State private var selectedPhotos: [PhotosPickerItem] = []
    
    @State private var uiImages: [UIImage?] = []
    
    var body: some View {
        VStack {
            ScrollView(.horizontal) {
                HStack {
                    ForEach(uiImages, id: \.self) { uiImage in
                        if let uiImage {
                            Image(uiImage: uiImage)
                                .resizable()
                                .scaledToFit()
                                .padding(20)
                        }
                    }
                }
            }
            
            PhotosPicker("写真を選択", selection: $selectedPhotos)
                .onChange(of: selectedPhotos) { selectedPhotos in
                    Task { await loadImageFromSelectedPhoto(photos: selectedPhotos) }
                }
        }
    }
    
    private func loadImageFromSelectedPhoto(photos: [PhotosPickerItem]) async {
        for photo in photos {
            if let data = try? await photo.loadTransferable(type: Data.self) {
                self.uiImages.append(UIImage(data: data))
            }
        }
    }
}
```

# おわり
めっちゃ簡単に使えて便利ですね
Inputステップのアイコンの違い / Tableau Prep

### 現象

この2つのアイコンの違いわかりますか？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3531257/d711fc22-3da9-3bb3-e62d-9efb83cdc463.png)

### 実は

どちらも同じローカルのCSVファイルを読み込みましたが、保存の仕方により抽出となり、アイコンが変わります。

左側のファイルが一つのアイコンは、「Tableau Flow Files(*.tfl)」形式で保存したもの
右側のファイルが二つのアイコンは、「Packaged Tableau Flow Files(*.tflx)」形式で保存したもの

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3531257/98964ad8-8064-b4e7-22d9-9f82d66036b7.png)


### 保存形式の復習
Save　　　　　　　　　　　　上書き保存
Save As...　　　　　　　　 名前を付けて保存　→　保存画面で、.tflとtflxが選択可能
Export Packaged Flow...　 データを抽出して保存
Save Steps as Flow　　　　フローをステップとして保存　→　あとで、ステップから挿入できる
NoSQLって何？

chatGPTを使って勉強をしています。
個人アプリにNoSQLを使うことを決めたんですが、使ったことがRedisしかないので改めて勉強してみたいと思いました。

## NoSQLって何？
NoSQL（"Not Only SQL"または "Non-SQL"としても知られている）は、従来のリレーショナルデータベース管理システム（RDBMS）とは異なるデータベース管理システムのカテゴリを指します。NoSQLデータベースは、スケーラビリティ、パフォーマンス、そして従来のRDBMSよりも柔軟なデータモデルを提供することを目的として設計されています。以下に、NoSQLの主な特徴をいくつか紹介します。

1. **スケーマレス**:
   - NoSQLデータベースはスケーマレスであり、これによりデータベースのスキーマを事前に定義する必要がなくなります。これは、データの形式が時間とともに変化する可能性のあるアプリケーションにとって有利です。

2. **スケーラビリティ**:
   - NoSQLデータベースは、ホリゾンタルスケーリング（多くの安価なハードウェア上にデータベースを拡張すること）に優れています。これにより、大規模なデータセットや高いトラフィックの要件に対応することができます。

3. **高パフォーマンス**:
   - 単純なクエリと効率的なデータモデルのおかげで、NoSQLデータベースは高速な読み取りと書き込みを実現することができます。

4. **柔軟なデータモデル**:
   - NoSQLデータベースは、JSON、XML、Key-Value、グラフなど、さまざまなデータモデルをサポートしています。これにより、アプリケーションの要件に応じて最適なデータモデルを選択できます。

5. **リアルタイム処理**:
   - いくつかのNoSQLデータベースはリアルタイムのデータ処理とアナリティクスをサポートしており、アプリケーションでリアルタイムのインサイトを提供することができます。

NoSQLデータベースの一般的なタイプには、ドキュメントストア（例: MongoDB、FirebaseのCloud Firestore）、キーバリューストア（例: Redis）、ワイドカラムストア（例: Cassandra）、そしてグラフデータベース（例: Neo4j）があります。それぞれのタイプは、特定の用途とデータの特性に最適化されています。

## NoSQLデータベースを提供するクラウドサービス

NoSQLデータベースを提供するいくつかの主要なクラウドサービスプロバイダーがあります。以下はその一例です：

1. **Amazon Web Services (AWS)**:
   - **Amazon DynamoDB**: 高パフォーマンスかつスケーラブルなNoSQLデータベースサービスで、キー値とドキュメントデータ構造をサポートしています。
   - **Amazon DocumentDB**: MongoDBと互換性のある、スケーラブルで耐障害性の高いドキュメントデータベースサービス。

2. **Microsoft Azure**:
   - **Azure Cosmos DB**: グローバルに分散されたマルチモデルデータベースサービスで、ドキュメント、キー値、グラフなどのデータモデルをサポートしています。

3. **Google Cloud Platform (GCP)**:
   - **Firebase Realtime Database**: リアルタイムのWebアプリケーションおよびモバイルアプリケーション向けのNoSQLデータベースサービス。
   - **Cloud Firestore**: Firebaseの一部で、リアルタイム機能とオフラインサポートを提供するNoSQLドキュメントデータベースサービス。


これらはNoSQLデータベースのクラウドサービスプロバイダーの一例であり、それぞれが独自の機能と価格設定を提供しています。プロジェクトの要件に応じて、最適なサービスプロバイダーとデータベースタイプを選択することが重要です。

今回は、Firebaseを使うのでサービスの違いについて調べてみることに。

## Firebase Realtime DatabaseとCloud Firestoreの違いは？

Firebase Realtime DatabaseとCloud Firestoreは、両方ともFirebaseプラットフォームに含まれるNoSQLデータベースサービスですが、いくつかの重要な違いがあります。以下に主な違いをいくつか示します。

1. **データモデル**:
    - **Realtime Database**: データは単一の大きなJSONツリーとして格納されます。これは扱いやすいが、複雑な階層構造や大規模なデータセットの場合には非効率的になりえます。
    - **Cloud Firestore**: データはドキュメントとコレクションという形で格納され、これにより階層的なデータ構造を作成できます。ドキュメント指向のデータモデルは、より複雑なデータ関係を効率的に管理することが可能です。

2. **スケーラビリティ**:
    - **Realtime Database**: 一般に中規模のアプリケーション向けで、大規模なアプリケーションではスケーラビリティの制限に遭遇する可能性があります。
    - **Cloud Firestore**: より高いスケーラビリティを提供し、大規模なアプリケーションや高トラフィックの環境での利用に適しています。

3. **クエリ性能**:
    - **Realtime Database**: シンプルなクエリをサポートしていますが、複雑なクエリのサポートは限定的です。
    - **Cloud Firestore**: 強力なクエリエンジンを提供し、インデックス、フィルタリング、複合クエリなどの高度なクエリ機能をサポートしています。

4. **価格**:
    - **Realtime Database**: ダウンロード量に基づいて課金されます。
    - **Cloud Firestore**: ストレージとネットワーク帯域の利用に基づいて課金されます。また、ドキュメントの読み取り/書き込み/削除にも課金されます。

5. **インデックス**:
    - **Realtime Database**: データベースルールとカスタムインデックスを使用してデータアクセスを制御および最適化します。
    - **Cloud Firestore**: 自動インデックス作成とカスタムインデックスを提供し、高速なクエリを実現します。

6. **セキュリティ**:
    - 両データベースともにセキュリティルールを利用してデータアクセスを制御できますが、Cloud Firestoreはより精細なセキュリティルールの設定が可能です。

プロジェクトの要件に応じて、どちらのデータベースサービスが最適かを判断することが重要です。Cloud Firestoreは、より複雑なデータ構造と大規模なアプリケーションをサポートする設計になっていますが、Realtime Databaseはシンプルでリアルタイムのデータ同期が必要な用途に適しています。
AHC024参加録

[丸紅プログラミングコンテスト2023（AtCoder Heuristic Contest 024）](https://atcoder.jp/contests/ahc024)

今回やったことは
1、周囲を0で囲う
2、ランダムに隣接する2点を選ぶ
3、中心に近いほうへエラーにならないように侵略させる
この2と3を反復させて一番0が増えたのを出力

https://atcoder.jp/contests/ahc024/submissions/45917419