OmniAICreator/Qiita-1.07M huggingface dataset:
【Rails】renderでのデプロイ時のミスまとめ

# はじめに
お疲れさまです。
おおくまです。

Railsで実装したアプリをrenderでデプロイした際になかなか上手くいきませんでした。
ほとんどがタイポでした。笑
備忘録として残したいと思います。

# 環境
Ruby 3.2.2
Rails 7.0.8
Webアプリケーションサーバ render
データベース PostgreSQL

# 注意点
:::note warn
私はプログラミング学習中で、初学者です。
内容に誤りがある場合があります。
コメント等で教えていただけると幸甚です。
:::

# ①ホストの許可

**Before**
```ruby:config/environments/production.rb
Rails.application.configure do
  config.hosts << 'https://********.onrender.com'
end
```

<br>

**After**
```ruby:config/environments/production.rb
Rails.application.configure do
  config.hosts << '********.onrender.com'
end
```

<br>

**「https://」が余計だったみたいです！**

# ②DATABASE_URL

renderでデータベース作成時に「Internal Database URL」と「External Database URL」の両方が作成される。
当初は、「Internal Database URL」を「DATABASE_URL」として環境変数に設定していたが、**「External Database URL」で設定し直すことで上手くいった。**

# ③PostgreSQLの設定

**Before**
```ruby:config/database.yml
production:
  <<: *default
  adapter: postgresql
  encoding: unicode
  url: <%= ENV['DATABASE_URL'] %>
```

<br>

**追加でデータベース名とユーザー名を設定する必要がある！**

<br>

**renderでデータベースを作成する際の画面**
![スクリーンショット 2023-09-29 11.46.20（2）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348444/d55176b4-7c80-1bea-b4e3-8aa38724ae2f.jpeg)

<br>

**After**
```ruby:config/database.yml
production:
  <<: *default
  adapter: postgresql
  encoding: unicode
  database: #renderで設定したデータベース名
  username: #renderで設定したユーザー名
  url: <%= ENV['DATABASE_URL'] %>
```
【ChatGPT無】Promptのどこに、指示を書く？


　どうも、カーブミラーです。

　今回は、「LLMへの重要な指示は、Promptのどこに書くべきか」の研究結果を実験してみます。

:::note info
本記事は、ChatGPT（無料版）で
行なっております。GPT4での確認
はできておりません。あしからず。
:::

　本題の前に、ちょっとニュース。
　・ChatGPTアプリ（有料版）の
　　　画像認識・音声会話が
　　　　順次、開放されています。
　　私の友人も開放されました。
　　　Discord経由で、
　　　　その会話機能を聞きました。
　　　　　みなさんの楽しみを
　　　　　　奪う情報は出しません。

***
　では、本題に入ります。

　私はずっと、
　　Promptは
　　　上から下に読まれるものだ
　　　　と思っていました。

　もちろん、読むことに関しては、
　　それで正しいのでしょう。

　しかし、
　　今回のこの研究結果からは、
　　　それが必ずしも
　　　　正しいわけではないことが
　　　　　示されました。

　2023/7/10の【AIDB】さんの記事
[大規模言語モデルへのプロンプト、重要な情報はどこに書く？](https://aiboom.net/archives/53522)
　　からです。

　この記事を要約すれば
　　以下の二点に集約されます。
　　・LLMは、Promptの
　　　　最初と最後を重要視する。
　　　　　両者に比べ、中間は軽視。
　　・大きなPromptは、
　　　　パフォーマンスが低下する。

　まぁ、
　　考えてみると、
　　　確かにそうかもしれませんね。

　文字が詰まった書類を渡されて、
　　その真ん中にこちらへの指示が
　　　書かれていたら、
　　　　それが指示だとは
　　　　　思えませんからね。
***
　それでは、
　　実験してみます。

　Promptのどこに
　　指示を書くべきか、
　　　の実験です。

　内容は、
　　私自身のツイートですw
***
***User***
これまでの技術（AI含む）をまとめたら、すぐに実現できそうな気がしてきた。

　まずは、家庭の中。家電は照明含めてすべてスマート家電。冷蔵庫やコンロには中にカメラが仕込まれており、冷蔵庫を開けることなく、中身の確認ができる。となれば、レシピ作成も「今夜は和食。サンマが食べたいな。でも焼くのはなぁ」と呟けば、AIが聞き取り、食材をチェック。足りなければ、ネットショッピング。配達もスマートホーム・ロボットが受け取る。ロボットが主人の帰りの時間を計算して、レシピどおりに調理。できあがったところに主人が帰宅。主人がひとっ風呂浴び、出てきたところで食事。当然、ビール付き。
　この文章のすべての要点をまとめてください。
　リビングでグデェッとテレビを見る主人。その裏で、食洗機や洗濯機が働く。
　あれ？　こんなシチュエーション、どこかで……あっ！　マンガの『デキる猫は今日も憂鬱』（山田ヒツジ著）だ！

***ChatGPT***
要点をまとめますと：

1. 家庭の中では、スマート家電が普及しており、家電製品はAIを活用しています。
2. 冷蔵庫とコンロには内蔵カメラがあり、食材の確認やレシピの提案を行います。
3. レシピ提案に対してAIが応答し、足りない食材をネットショッピングで注文し、ロボットが受け取ります。
4. ロボットは料理を調理し、主人の帰宅時間を計算して食事が用意され、主人が食事を楽しむシーンが描かれています。
5. テレビを見ている主人の裏では、食洗機や洗濯機が自動的に動作しています。

これらの要点は、山田ヒツジ著のマンガ『デキる猫は今日も憂鬱』に似た未来の家庭シチュエーションを描いています。
***
　さぁ、何を指示したでしょうか？

　はいはい、
　　教えますよ。

　真ん中の
　　「～ビール付き」の下に
　　　「要点をまとめて」と
　　　　書いてあります。

　あれぇ？
　　真ん中なのに、
　　　きちんと要点を
　　　　まとめてくれた。

　まぁ、とりあえず、
　　それは置いておいて、
　　　文章の前に入れたり
　　　　後ろに入れたりしました。

　けれど、
　　ほぼほぼ、
　　　真ん中に入れた場合と
　　　　同一の回答を寄こしました。

　ううむ、
　　変化なし、ということは、
　　　どこでもいいのか、
　　　　それとも文章が小さかった？

　ちなみに、
　　指示を外した回答がこちら。
***
***ChatGPT***
そのシチュエーションは確かに未来の生活に近いものがありますね。AIとスマートテクノロジーが日常生活を効率化し、快適にする可能性は高まっています。ただし、実現には技術の進化とプライバシーやセキュリティの懸念も考慮する必要があります。将来のスマートホームは、便利さと安全性のバランスを取ることが重要でしょう。
***
　だよね～。

　結論！

　　このくらいでは、
　　　指示に差が出ない。

　でも、
　　考え方としては、
　　　Promptの書き方としては、
　　　　参考になる気がします。

　今回は、ここまで。
【学習メモ】SAPとはなんぞや

こんにちは、この二か月間、業務中にしばしばSAPに触れていて、
いろんな名詞や専門用語があって頭がごちゃごちゃになったケースが多々あった。。。

そのため、個人の勉強として、本記事は「SAP」を勉強するにあたり、重要な用語や概念のメモをまとめたいと思います。

# SAPとは
### 有名なERPシステムだよ
・ERP市場では巨大なシェアを持つ
・SAP社がs/4hanaなど、ERPパッケージを提供
・「SAP」そのものがシステム名じゃなく、「s/4hana」とか「B1」とかがシステム名である
・ただ、世間はSAPのサービスを利用するとき、「SAPを使う」とか「SAPを導入」とかをよく言っている

### ただの会社名でもある
・ドイツの会社
・SAPのいろんなサービスを提供
・ドイツ語は「Systeme, Anwendungen und Produkte in der Datenverarbeitung」
・英語は「Systems, Applications and Products in Data Processing」
・コンサルティングやデータセンター提供もやっているらしい

# SAP HANAとは
### DBサービスである
・英語は「High-performance ANalytic Appliance」
・SAP社が提供したDBサービス

### ただのDBじゃない、すごいDB
・データをディスクに保存せず、メモリーに保存するマルチモデルデータベース
・インメモリーデータベース、とりあえず速いのがイメージかな
・データを圧縮することで高度な読み込みを実現できる
・カラムストアとローストア両方実現できる、基本はカラムストア
・**HANA VIEW**というView実装機能がある
・いろんな分析ツールがプラスしている


### SAP S/4HANAはSAP HANAを使っている
・S/4HANAとHANAは名前が紛らわしいですがこれは別々のもの

# SAP S/4HANAとは

### ERPシステムである
・クラウド対応できる
・その中にいろんなアプリがある（会計・財務・生産管理など、会社の基幹業務が対象）
・前世代のサービスと比べて、TOC削減できる
・リアルタイムデータの分析・活用が強い

### SAP HANAベース
・SAP HANAをコア技術として作られたERPシステム（従来のSAPのERPシステム + HANAって進化したものというイメージかな）

### FioriのUIを採用
・「SAP Fiori」というSAP社のUIを採用（画面が見やすくなったってことかな）

### 概ね三種類
・**s/4hana Onpremise**（オンプレミス版）：自社内にサーバーを設置、その中にs/4hanaをインストール。（AWSなど世の中にクラウドサービス内にインスタンスを立て、そこにs/4hanaをインストールするのもこちらにカウント）、SAP GUIとSAP Fioriからアクセスできる

・**s/4hana cloud public**（クラウド版-パブリック）：SAP社のデータセンターを利用、SAP GUIのみアクセスできる

・**s/4hana cloud private edition**（クラウド版-プライベート）：SAP社のデータセンターを利用、SAP GUIとSAP Fioriからアクセスできる

# SAP Fioriとは
### UIのこと
・SAP社が作った使いやすいユーザーインターフェース
・ユーザーの役割や作業の流れをベースに設計（とりあえず、ユーザーが理解しやすいってことかな）
・SpaceやPage、tileなどを設定したりして、自分の好きなアプリをボタンみたいに配置することで、ポチポチで操作できるようなイメージ
・S/4HANAはこのUIを採用

# SAP GUIとは

### SAP製品へのアクセスツール
・Graphical User Interface
・コマンド入力なしで、アイコンクリックするだけでSAPへアクセスできる
・Fioriと似たような機能ですがFioriより古い

# SAP BTPとは
### SAPのOPaaSサービス
・英語は「Business Technology Platform」
・クラウドベースのアプリ開発プラットフォーム


### S/4HANAと連携できる
・自作したアプリをそこへデプロイできそう、さらにそのアプリをS/4HANAのタイルに紐付けると、S/4HANAのFioriからもアクセスできる

## これからどんどん追記していく
mailCatherからMailpitに乗り換えたら快適になった

ローカル開発でのメールの確認用に`mailCather`を長らく使っていたのですが、
メールを大量に送信すると画面が表示されるまでに時間がかかるようになったりとだんだん不便さを感じるようになりました。

色々検索したところ、`MailPit`が良さそうだったので使ったところ、今のところ快適です。

# 準備

docker-composeを使っているので、
以下のように設定します。

```yml
services:
  :
  (省略)
  :
  mail:
    image: axllent/mailpit
    ports:
      - '8025:8025'
      - '1025:1025'
    environment:
      - MP_DATA_FILE=/data/mailpit.db # メールの内容をディスクに保存する場合のパス指定
    volumes:
      - mp-data-file:/data # 永続化する

volumes:
  mp-data-file:
```

初期設定ではメールの内容をインメモリに保存するようなので、メールの内容を永続化したい場合は上記のように設定するとよいようです。

このあたり、本家のドキュメントが充実していて助かりました。

https://github.com/axllent/mailpit/wiki

# 使用感

ページングされるのでメールが増えてmailCatcherのように重たくならないです。
ただ、メールを開くと一覧に戻らないと他のメールが読めないのが少し残念です。（次と前のメールだったら移動ボタンがあります）

Shiftを押しながら複数選択をして一括削除などができるのですが、gmailみたいにチェックボックスなどはついていないので少し分かりにくかと思いました。

メールにタグ付けができるんですが、これは一括でできないので複数メールにタグを付ける場合は開いてはタグ付けを繰り返す必要があります。

欠点ばかり上げていますが、上記以外はほぼ期待通りの動きをしているので、乗り換えたことで見やすくなり快適になりました。

# 他ツールの比較

Mailpitに決定する際に他のツールを見てみました。

## MailHog

https://github.com/mailhog/MailHog

Mailpitの前身らしく、UIもほぼ同じでした。
最初こちらを検討していたのですが、ISO-2022-JPに対応しておらず、
対応させるための方法もあったのですが、わざわざイメージ作成するのも手間だったので保留としてました。
おそらくMailpitに出会わなかったら使っていたかと思います。

## MailDev

https://github.com/maildev/maildev

こちらもUIが非常に似ているのですが、同じくISO-2022-JPに対応しておらず。
同様に対応させるイメージを作成する方法はあるようです。

## greenmail

https://github.com/greenmail-mail-test/greenmail

こちらはよりメールの機能を再現したもので、
画面ではなく実際のメールサーバーのように問い合わせしてメールを確認できるようです。
メーラーでの表示確認に使えたりしますが、メールを一括で確認出来なかったりなので断念しました。
HTTPでやりとりする仕組み

**【Webとネットワーク技術】**
・HTTPとはWebコンテンツを送受信するためのプロトコル
・コンピューターがマンションだとするとIPアドレスとは住所、ポート番号は部屋番号のようなもの
・ドメインをIPアドレスに変換するものがDNS

**【HTTPでのやり取り】**
・WebがHTTPリクエストを送る、WebサーバーはHTTPレスポンスを返す
・HTTPリクエストの中にはHTTPメソッドが含まれており、具体的な要求内容を伝えている（ex.GET,POST）
・現在ではHTTPパイプラインよりもHTTP/2でストリームによる多重化が進んでいる
・HTTPSの流れ（SSL/TLSハンドシェイク）
①暗号化方式の決定
②通信相手の証明
③鍵の交換
④暗号化方式の確認
・有効期限が設定されていないCookieをセッションCookieと呼ぶ
<storybook> init できない

バージョン
next.js v13.5
prettier v3.0
prettier-plugin-tailwindcss v0.54
pnpm v8.8

# これは何?
Next.jsプロジェクトにstorybookをinitしようとした時に遭遇したエラーの解決法。

```bash
$ pnpm dlx storybook@latest init
 ...
 storybook init - the simplest way to add a Storybook to your project.

 • Detecting project type. ✓
 • Preparing to install dependencies. ✓
 • Installing dependenciesLockfile is up to date, resolution step is skipped
Already up to date
Done in 526ms

# viteを選択
We were not able to detect the right builder for your project. Please select one: › Vite

✔ Getting the correct version of 9 packages
✔ We have detected that you're using ESLint. Storybook provides a plugin that gives the best experience with Storybook and helps follow best practices: https://github.com/storybookjs/eslint-plugin-storybook#readme

Would you like to install it? … yes
Configuring Storybook ESLint plugin at .eslintrc.json
✔ Installing Storybook dependencies
```

こんなエラーが出てくる
```bash
Error [ERR_REQUIRE_ESM]: require() of ES Module /.../node_modules/.pnpm/prettier-plugin-tailwindcss@0.5.4_prettier@3.0.3/node_modules/prettier-plugin-tailwindcss/dist/index.mjs not supported.
Instead change the require of /.../node_modules/.pnpm/prettier-plugin-tailwindcss@0.5.4_prettier@3.0.3/node_modules/prettier-plugin-tailwindcss/dist/index.mjs to a dynamic import() which is available in all CommonJS modules.
    at /.../pnpm/store/v3/tmp/dlx-8119/node_modules/.pnpm/prettier@2.8.8/node_modules/prettier/index.js:38143:10
    at Array.map (<anonymous>)
    at Object.load (/.../pnpm/store/v3/tmp/dlx-8119/node_modules/.pnpm/prettier@2.8.8/node_modules/prettier/index.js:38141:128)
```

# 結論
prettier3との互換性がないらしく、prettierをダウングレードすれば良い。
```
$ pnpm install -D prettier@2.8 prettier-plugin-tailwindcss@0.4
```


# 参考

https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/176

https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/188
VSCodeでJavaのセットアップ～Windows編～

VSCodeの公式にセットアップ方法が載っていました！
https://code.visualstudio.com/docs/languages/java#_install-visual-studio-code-for-java
※英語です

私の場合、VSCodeはインストール済みなので、拡張機能とJDKのインストールのみでした。
VSCodeからインストールする場合は、まとまったパックがある。
「Install the Coding Pack for Java - Windows」というボタンからインストール可能。

1. JDKをインストール
    https://www.oracle.com/java/technologies/downloads/#jdk21-windows
    今回は最新版の21のWindows版をインストール
1. 「Install the Extension Pack for Java」ボタンより、拡張機能のセットを一式インストール
C#からSlackに投稿する

# はじめに
本記事では私がLRの機能開発をしながら学んだC#からSlackに投稿するやり方を整理したものです。結構簡単なので、よかったら参考にしてみてください！  

# 使用するAPIについて
今回、SlackのIncoming WebhooksというAPIを使用します。これは外部サービスからSlackにメッセージを送信するための機能です。
この機能は外部からHTTPリクエストでメッセージを送っています。そのため、HTTP通信ができる言語・環境であれば使うことができます。(本記事ではC#を使って紹介しています。)  
この機能を使用するためにはメッセージ送信先のURLを作成しておく必要があります。

# Slackで送信先のURLを作成する  
チャンネルの詳細のApp管理からAppディレクトリを表示しIncoming Webhooksを検索、 Slackに追加してください。次に、Post先のチャンネルを選択し、Incoming Webhooksインテグレーションの追加を行い、インテグレーションの設定欄にあるWebhook URLをコピーしておいてください。  
このUrlを使って外部からチャンネルにメッセージをPostできます。(インテグレーションの設定欄でデフォルトで表示される名前、アイコンなどが設定できる)    
[こちら](https://qiita.com/vmmhypervisor/items/18c99624a84df8b31008)も参考にしてください。

# プロジェクト側の準備
SlackにPostする情報はJson形式にシリアライズして送信するため、Jsonデータが扱えるようにNewtonsoft.JsonをNuGetからインストールしてください。  

# SlackにテキストをPostする
準備完了です。早速テキストを送信してみましょう。  
まずは、Slackに送信するJsonデータの変換元となるペイロードクラスを作成しましょう。  
今回は簡単に、送り主の名前と本文テキストを設定します。

```csharp  

  　/// <summary>
	/// Slackに送信するjsonの変換元となるデータを保持するクラス
	/// 送信チャンネルはデフォルト
	/// </summary>
	public class SlackPayload
	{
		#region プロパティ

		/// <summary>
		/// ユーザ名
		/// </summary>
		public string username { get; set; }

		/// <summary>
		/// 本文
		/// </summary>
		public string text { get; set; }

		#endregion
	}  

```  

それでは、SlackにPostするクラスを作成します。
HTTPリクエストを送信するためにHttpClientクラスを使用しますので、インスタンスを生成しておきます。  HttpClientは無闇に作成したり破棄したりするのではなく、Static宣言をして使いまわすのが良いみたいです。詳しくは[こちら](https://qiita.com/nskhara/items/b7c31d60531ffbe29537)。    
送信したいテキストをJson形式にシリアライズします。作成したJsonパラメータをURLに変換し、WebhookURLにPostします。  

```csharp

	/// <summary>
	/// Slackに対してHttpリクエストの送信を行うクラス
	/// 送信先はデフォルトとして設定されたチャンネル
	/// </summary>
	class SlackNotificationService
	{
		#region 定数

		/// <summary>
		/// POST先のURL
		/// </summary>
		private const string c_PostUrl =
			"https://hooks.slack.com/services/xxxxxxxxxxxxxxxxxxxxxxx";

		/// <summary>
		/// ペイロード用のKey値
		/// JsonをUrlに変換する際に必要なデータをディクショナリに詰める必要がある。
		/// その際にペイロードの値はこのKey値で格納する。
		/// </summary>
		private const string c_PayloadKeyValue = "payload";

		#endregion

		#region フィールド

		/// <summary>
		/// SlackにPOSTするために使用するHttpClient
		/// </summary>
		private static HttpClient m_HttpClient = new HttpClient();

		#endregion

		#region 公開サービス

		/// <summary>
		/// HttpリクエストをPOSTする
		/// </summary>
		/// <param name="text"></param>
		/// <param name="username"></param>
		/// <returns></returns>
		public async Task<bool> Post(string text, string username)
		{
			// 送信パラメータを作成
			var slackPayload = new SlackPayload()
			{
				text = text,
				username = username
			};

			// 送信パラメータオブジェクトをJSONに変換
			var jsonSlackPayload = JsonConvert.SerializeObject(slackPayload);

			// Jsonの送信パラメータ情報をURLに変換
			var slackPayloadDictionary = new Dictionary<string, string>()
			{
				{c_PayloadKeyValue, jsonSlackPayload}
			};
			var urlParameter = new FormUrlEncodedContent(slackPayloadDictionary);

			var response = await m_HttpClient.PostAsync(c_PostUrl, urlParameter);

			return (response.StatusCode == HttpStatusCode.OK);
		}

		#endregion
	}
   
```  

最後に、上記のPostメソッドを呼び出せば、Slackにテキストを送信することができます！  
</br>  
以上です。最後まで読んでいただき、ありがとうございました。  
# 参考サイト  
[C#でSlackにPost ](https://qiita.com/StaticProgramer/items/c49244108e2d2a166ef0)
[C#][備忘録][アドイン]Outlookのメールアイテムの受信をトリガする

# はじめに

Outlookのメールアイテムの追加をトリガにメールの内容をSlackに送信したいことがありました。
そのトリガ方法を、備忘録としてまとめます。

※本当はPowerAutomateのフローでやりたかったのですが、社内環境のもろもろの影響できず、アドインで実現することにしました。
アドインなので、Outlookをのアプリを起動しないと、処理が実行されません。

# メールアイテムの受信をトリガ

※前提として、VisualStudioのOutlookアドインのテンプレートでプロジェクトを作成しています。

メールの受信イベントを探すと、Application.NewMailExイベントがヒットします。
このイベントは、Outlook 受信したアイテムに対して1回だけ発生します。
フォルダの移動などでは発生しないので、今回はこちらを使いました。

また、イベントからは、EntryIDCollectionというパラメーターが渡ってきます。
これは、受信トレイに受信したアイテムのIDを表す文字列です。
このIDを使用して、受信したメールアイテムを取得できます。

メールアイテムの取得には、Microsoft.Office.Interop.Outlook.Applicationクラスにある、[Namespase](https://learn.microsoft.com/ja-jp/office/vba/api/outlook.namespace)というオブジェクトを使います。
このオブジェクトは、Outlookアプリケーション内の予定表やメールボックスやフォルダなどへのアクセスを提供するオブジェクトです。
例えば、Namespaceオブジェクトを使用して、ユーザーのメールボックスやその中のフォルダにアクセスできます。例えば、受信トレイ、送信済みアイテム、削除済みアイテムなどのフォルダにアクセスできます。

```cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Outlook = Microsoft.Office.Interop.Outlook;
using Office = Microsoft.Office.Core;
using System.IO;
using System.Net;
using System.Net.Http;
using System.Text.Json;
using System.Threading.Tasks;
using System.Runtime.InteropServices;

namespace Sample
{
    public partial class ThisAddIn
    {
        private async void ThisAddIn_Startup(object sender, System.EventArgs e)
        {
            // イベントを購読
            Application.NewMailEx += Application_NewMailEx;
        }

        private void Application_NewMailEx(string EntryIDCollection)
        {
            var item = Application.GetNamespace("MAPI").GetItemFromID(EntryIDCollection);
                
            // メール以外の場合は何もしない
            if (item is Outlook.MailItem mailItem == false) return;
    
            // メール本文を加工してSlackに送信する処理
            // ...
        }
    }
}

```

# さいごに

あとは、MailItemオブジェクトから本文を取り出して加工して、Slackに送信するだけです。
Slackへの送信方法は[こちら](https://qiita.com/minoura_a/items/4c041ab62761b5e59a6b)の記事にまとめてあります。
VS Code 拡張機能おすすめ9選

こんにちは。バックエンドエンジニアの大和道子です！
最初に設定するべきおすすめの VS Code 拡張機能を紹介します。
VS Code 左側の拡張機能、から名前を検索してください。

## 1. [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)
エラー表示が見やすくなる。

### 2. [Japanese Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)
日本語対応になる。

## 3. [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
コードを整形してくれる。
設定についてはこれが分かりやすいです。

https://ralacode.com/blog/post/vscode-prettier/#:~:text=Prettier%E3%81%8C%E4%BD%BF%E3%81%88%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B%201%20Format%20On,Save%E3%82%92%E6%9C%89%E5%8A%B9%E3%81%AB%E3%81%99%E3%82%8B%202%20Default%20Formatter%E3%82%92Prettier%E3%81%AB%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B

## 4. [Live Sass Compiler](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass)
SassをコンパイルしてCSSにしてくれる。
＊Sass
 Syntactically Awesome Style Sheets：CSSの拡張言語。CSSよりも簡便。
＊下にWatch Sassというのが現れるので、VS Codeの起動ごとにそれをクリックする必要がある。
設定が必要

https://yumegori.com/vscode-sass-setting20200116

## 5. [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)
フォルダのアイコンを整えてくれる。

## 6. [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
VS Codeに簡易的にローカルサーバを立て、ファイル更新によって自動的にブラウザを更新してくれる。

## 7. [IntelliSense for CSS class names in HTML](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion)
HTML内にCSSを記述する際にインテリセンスしてくれる。

## 8. [HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)
id, class属性値へ入力する際のセレクターを補完してくれる。

## 9. [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
インデントを虹色表示して、どのネストが同じかを分かりやすくしてくれる。
チーム若虎でServiceNow Hackathon2023にチャレンジ！！


「ServiceNow Japan Hackathon 2023」にServicenowエンジニア部門の若手7名（チーム若虎）で参加しました！!
ハッカソンは、ハック(hack)とマラソン(marathon)を掛け合わせた造語です。特定のテーマに向けて限られた期間内でアイデアを考え、アプリケーションやサービスを開発し、その結果を競い合うイベントです。ServiceNow Japan Hackathonは2018年より開催されており、三井情報は2021年から今年で3回目の参加となります。今回のテーマは「AIと自動化」でした。以下では、三井情報の参加体験を紹介します。
## 参加のきっかけ
三井情報はServiceNow Japan Hackathonに2021年から参加していました。そうした中、今年もServiceNow Japanからハッカソンイベントのお知らせを受け、若手エンジニアの技術力及び経験値の向上とチャレンジのきっかけとして参加を決定しました。こうして、ハッカソン参加に向けて、7名の若手エンジニアからなる "チーム若虎" が誕生しました。
※若虎とは…「若者よ虎となれ」という上司の言葉から命名されました。日々の業務でも若虎の名前の下、活動しております。

## 開発準備期間
今年のテーマは「AIと自動化」。メンバーそれぞれが多くの業務やPJを抱え、システムをどこまで作りこめるか不安がある中、まず最初に進め方や戦略についてメンバー全員で話し合いを行いました。話し合いの結果、「とにかく楽しむ！他のチームにない斬新なアイデアで勝負する！」といった目標を掲げ、アイデアの洗い出し～アプリケーション開発に取り掛かりました。
![作業風景](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471813/f5d89ba1-8559-818f-0a72-67b0c03c76f8.png)

## 「リトルハートリーダー（音声AI×Servicenow）」
チーム若虎が開発したアプリは「リトルハートリーダー」という名前で、“音声AI×ServiceNowによる音声病態分析“を行い、家族形態の変化、地域コミュニティ、情報化社会など、様々な要因により見えないところで悩む子供を救うことを目指しています。
このアプリは数ある技術の中で「声」によるAIに着目し、三井情報で研究している、声のデータからこころの状態を紐解く「音声病態分析」という技術とServiceNowを組み合わせて作成しました。
「リトルハートリーダー」は声からこころの状態を可視化し、その変化を見逃さないようキャッチ、はたらきかけが必要な子どもを発見したら、周りの大人たちへアラートを出し、アクションを促します。これにより隠れたこころの声を見逃さないしくみとなっています。具体的には声のデータに基づいて音声病態分析した結果をServiceNow（以下機能）に連携しました。
①データを可視化するダッシュボード機能
②はたらきかけが必要な生徒を見つけてアラートを発信する機能
③先生に対して具体的なタスクを割り当てる機能
④上記を一元的に確認できるポータル機能
これらの機能によって、保護者や学校関係者がこどもの状態を把握し、必要なアクションを起こせるようになっています。
![リトルハートリーダー](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471813/480a95d3-90bb-e51a-5fa9-a87ba0c12db2.png)

## 当日
今年は計31チーム、194名が参加。審査は2部制となっており、1次審査では31チームが６グループに別れグループ内で相互審査を行いました。どのチームもオリジナリティに溢れ、細かく作りこまれていたりとレベルが高い中、「リトルハートリーダー」は1次審査を無事突破！！2次審査は審査員と参加者全員の前でのプレゼンテーションとなり、緊張やプレッシャーでお弁当が喉を通りませんでした。(笑)
結果は惜しくも入賞とはなりませんでしたが、特別賞として審査項目の一つである「利用者に対する革新・創造・貢献」に選出。音声病態分析を使ったアイデアに対して高評価を頂きました。チームで掲げた「とにかく楽しむ！他のチームにない斬新なアイデアで勝負する！」という目標を達成することができ感無量でした！
![一次審査の様子](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471813/3d452d0e-33bf-d722-e224-40a8408d7077.png)


## 感想
一緒に参加したメンバーの感想をご紹介いたします。

### Y.N.
社内の若手メンバーでの開発だったので、部活のような雰囲気で開発でき、普段の業務とは違う楽しさを感じました。
話し合いを重ねる中で、弊社の強みである「音声」を活かすことで、ほかにないアプリケーションとして多くの人の目に留まったことが嬉しかったです。
昨年と開発形式や発表形式など大きく変わり、中々昨年の反省点を活かせなかったなという思いはありますが、特別賞という形で終われて内心ほっとしています。
### Y.K.
普段の業務の合間を縫って準備をしていたので大変ではありましたが、限られた時間の中で協力して準備を進め、本番では特別賞をいただくことができてよかったと思います。
### N.A.
アイデアを出すことにとても苦戦しましたが、チームで協力して実装・成果物の発表まで走り切ることができました。案件以外で開発を行うのは初めてでしたが、とても良い経験になりました。
特別賞ももらえたので、忙しい中でも頑張って良かったです！
### K.S.
和気あいあいとした雰囲気の中でアイデアを出し合い、検証や資料作成、プレゼン準備を楽しく進められました。
他部署や先輩方のご協力もあり特別賞を受賞することができて良かったです。
### T.U.
AI×ServiceNowという非常に大きなテーマから、アイデアを出し合い、それらを組み合わせながら１つに絞っていくことにとても苦労しました。
最後はバタバタで、文化祭の準備のような感覚でしたが、0ベースで物事を考え、実際に形にすることができ、達成感でいっぱいです！
当日は思ったより大人数の前での発表で緊張しましたが、熱い想いを伝えることはできたと思います。
普段業務ではあまり関わらないメンバと一緒に開発することができて楽しかったです。
### S.K.
特別賞をとれたのはかなりうれしかったです。皆さんお忙しい中でこういった機会をいただき、会話しながら一つのものを作っていくというのは貴重な体験でした。

## 終わりに
メンバーそれぞれがハッカソンを通して新たな知識や経験を学び成長を実感しました。
ご協力いただいた関係者の皆様に、この場をお借りして心より感謝申し上げます。
今後も日々の業務に精進し、次回のハッカソンに向けて更なる成長を目指して参ります。
来年は上位入賞を目指すぞ！！！
Unityとは何か？知っておくべきすべて

Unity（ユニティ）とは、ゲーム開発者やコンテンツクリエイターにとって非常に重要なプラットフォームです。この記事では、Unityの基本的な概念から高度な機能に至るまで、Unityについて知っておくべきすべてを詳しく説明します。
![business-concept-with-team-close-up.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92345/b49d7165-270f-3aa2-e50a-d70c0f7615fd.jpeg)

                                Unityとは何か？知っておくべきすべて

1. Unityとは何ですか？

Unityは、ビデオゲーム、仮想現実（VR）、拡張現実（AR）、シミュレーション、視覚化、教育アプリケーションなど、さまざまなプラットフォームとデバイスに対応するソフトウェア開発環境です。Unityを使用することで、独自の3Dおよび2Dアプリケーションを開発できます。

2. Unityの主な特徴
クロスプラットフォーム対応: Unityは、iOS、Android、Windows、macOSなど、さまざまなプラットフォームでアプリケーションをビルドできるため、開発者にとって非常に便利です。

ビジュアルエディタ: Unityのビジュアルエディタを使用すると、コードを書かずにシーンやアセットを設計できます。これにより、プロトタイプの作成やアイデアの実現が簡単になります。

豊富なアセットストア: Unityのアセットストアには、数千もの3Dモデル、サウンドエフェクト、プラグイン、スクリプトがあり、開発プロジェクトを拡張するのに役立ちます。

強力なコミュニティ: Unityは世界中で広く使用されており、コミュニティが非常に活発です。問題に直面した場合、解決策を見つけるのは比較的簡単です。

3. Unityの使用例
Unityはさまざまな分野で利用されています。以下はその一部です：

ゲーム開発: Unityはゲーム開発者にとって最も一般的なツールの1つであり、多くの有名なゲームがこのエンジンで制作されています。

![3873843.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92345/287b534c-ec1c-5eb6-76ce-f3a052848a27.jpeg)

                                   ゲーム開発

教育: 教育アプリケーションやシミュレーションソフトウェアを作成するためにも使用されています。

建築および設計: Unityは建築家やデザイナーにとって、建物や製品の仮想プロトタイプを作成するための有力なツールです。

4. Unityの学習と開始
Unityを学び、プロジェクトを開始するには、公式ウェブサイトからUnityをダウンロードし、ドキュメンテーションやオンラインチュートリアルを参照することがおすすめです。また、Unityのコミュニティフォーラムやオンラインコミュニティに参加して、他の開発者との交流や知識共有ができます。

Unityは、創造力を発揮し、さまざまなプロジェクトを実現するための強力なツールです。どんな種類のアプリケーションやゲームを作成しようとしているかに関係なく、Unityはその目標を達成するための支援を提供します。

5. まとめ
Unityは、多くのプラットフォームで動作し、クロスプラットフォーム開発を容易にする強力な開発ツールです。ゲーム開発から教育アプリケーションの制作まで、Unityはさまざまなプロジェクトに適しています。Unityを学んで使いこなすことで、クリエイティビティを最大限に発揮し、革新的なアプリケーションを開発することが可能です。

Unityの世界に足を踏み入れ、新しいプロジェクトをスタートさせる準備が整いましたか？Unityの魅力的な世界を探索し、創造的なアイデアを現実にしましょう。

この記事を読んで、Unityについての基本を把握し、その多様な可能性に触れることができました。Unityの世界への探求を続け、次のプロジェクトを始めましょう！

MiichiSoft - あなたもテクノロジースターになれます! 強力なソフトウェア開発経験、高いエンゲージメント、継続的なイノベーションにより、当社はお客様の輝きと成長を支援するインタラクティブな作業環境を構築します。 MiichiSoft では、あなたはチームのメンバーであるだけでなく、Unity を開発できる若くて才能のあるスターでもあります。 私たちと一緒に究極の技術的課題を克服しましょう!

参考情報：https://miichisoft.com/tag/offshore-development/
wslでelixir その71

# 概要
wsl(wsl2じゃない)で、elixirやってみた。
練習問題やってみた。

# 練習問題
livebookで、湯婆婆を実装せよ。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/426fc424-2ba4-0bf1-9f7a-e36420b69820.png)


# サンプルコード

```
IO.puts("契約書")
IO.puts("甲は油屋当主として、乙を油屋に雇用することを契約し、")
IO.puts("労働に伴う対価の支払いを右の通り、約定する。")
IO.puts("なお、一日の労働の対価は金百円とする。")
IO.puts("甲　油屋当主　湯婆婆")
IO.puts("")
IO.puts("乙")
IO.puts("契約書だよ。そこに名前を書きな。")
name = Kino.Input.text("")
```

```
name = Kino.Input.read(name)
IO.puts("フン。#{name}というのかい。贅沢な名だねぇ。")
index = :rand.uniform(String.length(name))
new_name = String.slice(name, index - 1, 1)
IO.puts("今からお前の名前は#{new_name}だ。いいかい、#{new_name}だよ。分かったら返事をするんだ、#{new_name}!!")

```

以上。
Agora SDKでリアルタイムコミュニケーション

# Agora SDKの概要と機能

Agora SDKは、リアルタイムコミュニケーションを実現するためのプラットフォーム。SDKは、ビデオ通話、音声通話、メッセージングなどのさまざまな通信機能を提供します。以下にAgora SDKの主な機能を詳しく説明する。

1. ビデオ通話:
   - ビデオキャプチャとディスプレイ: カメラや画面の共有を実現するための機能
   - オーディオ/ビデオコーデック: 高品質なオーディオ/ビデオストリームのエンコードおよびデコードをサポート
   - リアルタイム映像処理: ビデオフィルターや仮想的な背景などのリアルタイム映像処理を実現する機能
   - レコーディングとプレイバック: ビデオ通話の録画および再生をサポート

2. 音声通話:
   - 音声コーデック: 高品質な音声ストリームのエンコードおよびデコードをサポート
   - ノイズおよびエコーキャンセル: 音声品質を向上させるためのノイズおよびエコーキャンセル機能
   - オーディオミキシングと変換: 複数の音声ストリームをミキシングしたり、サンプルレートを変換したりする機能

3. メッセージング:
   - メッセージ送受信: ユーザー間のテキストメッセージの送受信を実現する機能
   - ユーザー属性管理: ユーザーに関する属性情報（ニックネームなど）を管理する機能

以上がAgora SDKの主な機能。次に、動画データの送受信を行うサンプルコードを示す。

## Javaサンプルコード

```java
// Agora SDKの初期化
RtcEngine.initialize(context, APP_ID, rtcEventHandler);

// ビデオ通話のセットアップ
rtcEngine.enableVideo();

// ビデオ通話の設定
VideoEncoderConfiguration videoConfig = new VideoEncoderConfiguration(
    VideoEncoderConfiguration.VD_640x480, // 解像度
    VideoEncoderConfiguration.FRAME_RATE.FRAME_RATE_FPS_30, // フレームレート
    VideoEncoderConfiguration.STANDARD_BITRATE, // ビットレートモード
    VideoEncoderConfiguration.ORIENTATION_MODE.ORIENTATION_MODE_FIXED_LANDSCAPE // 画面の向き
);
rtcEngine.setVideoEncoderConfiguration(videoConfig);

// ビデオ通話の開始
rtcEngine.joinChannel(null, "channelName", "optionalInfo", uid);

// ビデオフレームの取得と送信
rtcEngine.setVideoFrameObserver(new AgoraVideoFrameObserver() {
    @Override
    public boolean onCaptureVideoFrame(VideoFrame videoFrame) {
        // ビデオフレームの処理
        return rtcEngine.sendVideoFrame(videoFrame);
    }
});

// ビデオ通話の終了
rtcEngine.leaveChannel();

// Agora SDKの終了
RtcEngine.destroy();
```

## Goサンプルコード

```go
// Agora SDKの初期化
engine, err := rtc.NewRtcEngine(APP_ID)

// ビデオ通話のセットアップ
engine.EnableVideo()

// ビデオ通話の設定
videoConfig := rtc.NewVideoEncoderConfiguration(
    rtc.VideoDimensions640x480, // 解像度
    rtc.VideoFrameRateFps30, // フレームレート
    rtc.VideoBitrateStandard, // ビットレートモード
    rtc.VideoOrientationModeFixedLandscape, // 画面の向き
)
engine.SetVideoEncoderConfiguration(videoConfig)

// ビデオ通話の開始
engine.JoinChannel("", "channelName", "optionalInfo", uid)

// ビデオフレームの取得と送信
engine.SetVideoFrameObserver(func(videoFrame *rtc.VideoFrame) {
    // ビデオフレームの処理
    engine.SendVideoFrame(videoFrame)
})

// ビデオ通話の終了
engine.LeaveChannel()

// Agora SDKの終了
engine.Release()
```

## C#サンプルコード

```csharp
// Agora SDKの初期化
IRtcEngine rtcEngine = RtcEngine.Create(APP_ID);

// ビデオ通話のセットアップ
rtcEngine.EnableVideo();

// ビデオ通話の設定
VideoEncoderConfiguration videoConfig = new VideoEncoderConfiguration
{
    Dimensions = VideoDimensions.Dimensions640x480, // 解像度
    FrameRate = VideoFrameRate.FrameRateFps30, // フレームレート
    Bitrate = VideoBitrate.Standard, // ビットレートモード
    OrientationMode = VideoOutputOrientationMode.FixedLandscape // 画面の向き
};
rtcEngine.SetVideoEncoderConfiguration(videoConfig);

// ビデオ通話の開始
rtcEngine.JoinChannel("", "channelName", "optionalInfo", uid);

// ビデオフレームの取得と送信
rtcEngine.SetVideoFrameObserver(new CustomVideoFrameObserver(rtcEngine));

// ビデオ通話の終了
rtcEngine.LeaveChannel();

// Agora SDKの終了
rtcEngine.Release();
```

これらのサンプルコードを使用することで、Agora SDKを利用して動画データの送受信を行うことができる。
Android Studio の使い方

Ubuntu 23.04 で確認しました。

## インストール

```bash
sudo snap install android-studio --classic
```

インストールされたバージョン
Giraffe (2022.3.1)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/cd849db7-d325-597f-9c22-d5ce9a7bdc81.png)

## 起動

```bash
android-studio
```

Fie -> New -> New Project

Empty Activity を選択
![android_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/f89dace0-0fb1-fa62-22e4-d76c326a7854.png)

Name を example01 に変更
![android_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/0189d818-93a5-2b0d-c173-15ed7f1f08d6.png)

MainActivity.kt が表示される
Greeting("Android") を
Greeting("こんにちは")　に変更
![android_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/ef4f3aba-8ec4-47a2-7ac9-f55eeac40dc0.png)

実行
![android_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/01262e11-9ab4-e79c-304b-b6be1b56cb4c.png)

Build
![android_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/f94afa6e-02d9-afcd-a904-daff47f8944c.png)

app-debug.apk ができる
![android_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/20b15892-c242-2058-2ead-c2f3b55b2e0c.png)


APK は次の場所に作成された
/home/uchida/AndroidStudioProjects/example01/app/build/outputs/apk/debug

example01.apk　に名前を変更する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/3941f42e-e5c6-af9e-3383-ab8530906df5.png)


example01.apk を　USBなどで、Android 端末に持っていく

example01.apk を実行すると、example01 というアプリがインストールされる
![display01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/dc8e3402-9cfc-8c6f-0006-278a00787614.jpeg)

実行結果
![display02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/9ff58927-a7de-d686-420b-27a12cde7952.jpeg)
フローのデバックの考察



# フローでIdをセットできていなかった

+ [関数 HYPERLINK を使用したレコード ページの検索エラー](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007JiBKk)

:::note alert
HYPERLINK("https://m6--uat.sandbox.lightning.force.com/lightning/r/Compte_rendu__c/"&Compte_rendu__r.Id&"/view", Contact__r.Dernier_CR__c)  There is no error with this formula, but I have en error : no page found 
:::

:::note
I found the problem, there was a flow that retrieves the last CR and updated the Last CR field, but the flow retrieves the name and not the ID, that's why the ID is missing in the URL, 
:::
wslでelixir その70

# 概要
wsl(wsl2じゃない)で、elixirやってみた。
練習問題やってみた。

# 練習問題
livebookで、九九を実装せよ。

# 参考にしたページ

https://qiita.com/RyoWakabayashi/items/76cf8cae6bd53cb78f95

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/b3700b9c-ddc7-ed45-c1c5-9cd6a4e60597.png)


# サンプルコード

```

1..9
|> Enum.to_list()
|> then(fn list ->
  Enum.map(list, fn x ->
    Enum.map(list, fn y ->
      x * y
    end)
  end)
end)
|> Enum.map(&%{List.first(&1) => &1})
|> then(&[%{0 => Enum.at(&1, 0)[1]} | &1])
|> Enum.reduce(fn x, merged -> 
  Map.merge(merged, x) 
end)
|> Kino.DataTable.new()

```

以上
flutterのダウンロード方法

M1 MacにFlutterをインストールする手順を以下に示します。FlutterはmacOS上でもM1チップをサポートしています。以下の手順に従ってインストールできます。

ターミナルを開く:

Launchpadから「その他」フォルダ内の「ターミナル」を選択してターミナルを開きます。
Flutter SDKのダウンロード:

Flutterの公式ウェブサイトから最新のFlutter SDKをダウンロードします。以下のコマンドでダウンロードできます。ターミナルに貼り付けて実行してください。
bash
Copy code
git clone https://github.com/flutter/flutter.git -b stable
これにより、Flutter SDKがホームディレクトリに flutter ディレクトリとしてクローンされます。

Flutterのパスを設定:

Flutter SDKのディレクトリにパスを通す必要があります。~/.zshrc ファイルを編集し、以下の行を追加してください。
bash
Copy code
export PATH="$PATH:`pwd`/flutter/bin"
ターミナルで次のコマンドを実行して変更を反映します。

bash
Copy code
source ~/.zshrc
これにより、flutter コマンドがターミナルから実行可能になります。

Flutter Doctorを実行:

インストールが完了したら、ターミナルで次のコマンドを実行してFlutter Doctorを実行し、必要な依存関係を確認します。
bash
Copy code
flutter doctor
Flutter Doctorは、開発に必要なSDK、ツール、および依存関係の状態を確認し、必要な場合に修正方法を指示します。

Android StudioまたはVS Codeをインストール（オプション）:

Android StudioやVisual Studio Codeなどの統合開発環境（IDE）を使用してFlutterアプリを開発する場合は、それらをインストールしてください。IDEを使うとFlutter開発が簡単になります。
これで、M1 MacにFlutterが正常にインストールされました。Flutterコマンドを使用して新しいプロジェクトを作成したり、既存のプロジェクトを実行したりできるようになります。必要に応じて、iOSシミュレータとAndroidエミュレータも使用できます。
VSCODEで使用頻度高いショートカットをまとめました。

VS CODEで使用頻度高いショートカットをまとめました。

新しいファイルを開く: Ctrl + N
ファイルを開く: Ctrl + O
ファイルを保存: Ctrl + S
ファイルを閉じる: Ctrl + W
ファイルのすべてを閉じる: Ctrl + K Ctrl + W
ファイル内で検索/置換: Ctrl + F（検索）, Ctrl + H（置換）
最近開いたファイルを表示: Ctrl + R
ファイルを元に戻す: Ctrl + Z
ファイルの元に戻すをやり直す: Ctrl + Y
行の先頭に移動: Home
行の末尾に移動: End
カーソルを上に移動: Alt + ↑
カーソルを下に移動: Alt + ↓
単語の先頭に移動: Ctrl + ←
単語の末尾に移動: Ctrl + →
カーソル位置の行全体を削除: Ctrl + Shift + K
選択したテキストをコメントアウト: Ctrl + /
インデントを増やす: Ctrl + ]
インデントを減らす: Ctrl + [
サイドバーを開く/閉じる: Ctrl + B
ターミナルを開く: Ctrl +
エディターの分割: Ctrl + \（バッククオートキー）`
ファイル内のシンボル（関数、クラス、変数）を検索: Ctrl + P（ファイル名を入力後、@を付けてシンボル検索）
コードをフォーマット: Shift + Alt + F
コードの自動補完をトリガー: Ctrl + Space
コードスニペットを挿入: Ctrl + Space
関数やメソッドの定義元にジャンプ: F12
定義元に戻る: Alt + ←
ファイル内でシンボル（関数、クラス、変数）を検索: Ctrl + T
エディターの拡大縮小: Ctrl + +（拡大）, Ctrl + -（縮小）
wslでelixir その69

# 概要
wsl(wsl2じゃない)で、elixirやってみた。
練習問題やってみた。

# 練習問題
livebookで、じゃんけんを実装せよ。

# 参考にしたページ

https://qiita.com/RyoWakabayashi/items/584ca018d03656f92481

# 写真
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/b68d9974-e381-b274-f1dd-ce6f08d86a6c.png)


# サンプルコード

```
hands = [
  {0, "グー"},
  {1, "チョキ"},
  {2, "パー"}
]
results = ["あいこ", "あなたの勝ち", "あなたの負け"]
get_hand_name = fn hand ->
  hands 
  |> Enum.at(hand) 
  |> elem(1)
end
fn x_hand, y_hand ->
  rem(y_hand - x_hand, 3)
end
judge = fn x_hand, y_hand ->
  IO.puts("あなたの手: #{get_hand_name.(x_hand)}")
  IO.puts("あいての手: #{get_hand_name.(y_hand)}")
  result = rem(y_hand - x_hand, 3)
  result_name = Enum.at(results, result)
  IO.puts("結果: #{result_name}")
  result_name
end
my_hand_input = Kino.Input.select("あなたの手", hands) 

```

```
my_hand = Kino.Input.read(my_hand_input)
opponents_hand = 0..2 
  |> Enum.random
judge.(my_hand, opponents_hand)
```

以上
仕事上の苦手意識を改善するための個人的な取り組み

## 概要
入社してから3年経ったので、入社時点で苦手だったことをどうやって改善してきたかについて考えをまとめる意味で記事を書くことにしました。

## 仕事の環境
- ほぼ全日リモートワーク(月一のみ出社)
- 部内でのコミュニケーションにはRocket.chat、Teamsを主に利用
- 部内でのタスク管理はRedmineを利用、プロジェクトごとに定例で確認

## 入社時に苦手意識があったこと
入社時に苦手意識があった点は以下の2つです。
- 自分の作業について、適切に報告・連絡・相談(以下報連相)をすること
- 予定やタスクなど、忘れるとまずいことを覚えておくこと

この苦手意識があることに対して、現在も取り組んでいる対策が以下の通りです。
どうしてこのような取り組み方になったかは、次の項目で見ていきます。
- 自分の作業についての情報を見える状態にする
- 自分の頭に情報を残さず、外部のツールに覚えておきたいことを書き写す



## 現在の取り組み

### 1. 自分の作業についての情報を見える状態にする

1つ目の取り組みは「自分の作業についての情報を見える状態にする」です。
状態を見える状態にすると書くと抽象的ですが、要するに自分の作業についての情報(進捗・作業手順・疑問点など)をチャットやRedmineのチケットなどに書く習慣をつけるということです。

入社してからしばらくは仕事上でのチャットやRedmineのチケットの使い方にも慣れておらず、自分の作業についてどの程度報連相をすればいいかもわからなかったので、以下のような問題が発生していました。
1. 他の人の目線から、自分が取り組んでいることや進捗が不明確になる
2. 認識が間違っている点がある場合、他の人から指摘をもらえない

これらの結果として、1はタスクが滞っていることが把握できず期限に間に合わない、作業の報告がないので仕事をしていないように見える、2は作業内容が間違っていた場合に一からやり直す必要があるなどの悪影響を及ぼします。

このような問題があったため、報連相すべき情報が自分でわかりづらいのであれば一旦自分の作業情報を全てチャットやRedmineのチケットに書き出してみようというぐらいの意識で作業を進めてみました。

すると、当然ですがそれ以前と比較して他の人からのフィードバックが明らかに増えました。フィードバックが増えてくるとフィードバックが多い情報=報連相が必要な情報だと把握できるのでチャットやRedmineのチケットに整理する情報も必要最小限になっていきました。

このような経験を踏まえて、「自分の作業についての情報を見える状態にする」ことで得られる利点は以下の通りです。
- フィードバックがもらえることで、必要な情報がわかるようになる(以下はその影響)
    - 他の人の目線から、自分が取り組んでいることや進捗が明確になる
    - 認識が間違っている点がある場合、他の人からの指摘が早めにもらえる


### 2. 自分の頭に情報を残さず、外部のツールに覚えておきたいことを書き写す
2つ目の取り組みは、「自分の頭に情報を残さず、外部のツールに覚えておきたいことを書き写す」です。
こちらも言葉だけだと意味が分かりにくいですが、要は自分の頭にある必要な情報はすぐに外部のツール(部内・社内から見えるもの)に転記しましょうということです。

入社してしばらくは、予定やタスクなどができた際にメモを取るだけとってそのままにすることが多かったため、それらを忘れてしまうことがしばしばありました。

そのため、自分のメモに書くだけでは忘れるのであれば通知や定例での確認があり、自分以外の力で思い出せるツールを利用することを考えました。具体的には予定やタスクができた時点でOutlookで予定を作成する、Redmineのチケットを作成するなど自分の頭で覚えておく必要が極力ない環境を作るようにしました。

また、その後追加の情報があれば、1の通りに各種ツールに情報を追記し自分の頭に情報が残らないように努めました。

その結果、予定やタスクを忘れることが大幅に減り、以下のような利点を得ました。
- 必要な情報は全てツールに残っているので、情報を確認するのが楽になった
- 1の取り組みと合わせることでツール上の情報を他の人も確認でき、情報共有やフィードバックが楽になった

個人的には、必要な情報を全てツールに移すことで、忘れている情報はないかと心配しながら過ごす必要がなくなったのか一番の利点だと思っています。

以下、参考までに自分が主に利用しているツールと記載している情報を載せておきます。
- Outlook
    - Meetingや研修など、予め開催時刻が決まっている予定
    - 問題解決のために開催することになった緊急Meetingの予定
- Redmine
    - 部内で共有するタスク関連の情報(チャットで即時解決できないことはとりあえずチケット化している）
    - 部内で共有したい情報(PCセットアップ・部内推薦図書など)
- Bear(ノートツール)
    - Redmineで扱う必要のない個人の作業メモ、備忘録


## まとめ
入社してから3年経ったということで、入社時に苦手意識があったことと改善するための取り組みを2つ書きました。記事として考えを整理することで、意識していなかった利点も見つかったので今後も気が向けば別のテーマで記事を書いてみようと思います。

少しでも参考になる点があれば、実践して自分の環境に合うようにカスタマイズして取り組んでみてください。
Speee 25卒サマーインターン体験記

# 目次
[1. はじめに](#1-はじめに)
[2. インターン前にしたこと](#2-インターン前にしたこと)
[3. 12日間でしたこと](#3-12日間でしたこと)
[4. インターンを通して学んだこと](#4-インターンを通して学んだこと)
[5. まとめ](#5-まとめ)

# 1. はじめに
2023年8月に[株式会社Speee](https://speee.jp)の12daysインターンに行った記録を綴ったものです。
**想定読者**: 夏休みにどこの企業のインターンに参加するか迷っている人・Speeeのインターンでどういうことをするのか調べている人

# 2. インターン前にしたこと
インターン参加が決定してからインターンが始まるまでの間に3回ほど人事の方と面談の機会がありました。
面談では、インターンをより良いものにするためということで、人事の方の質問に答える形で、主に
- どういうエンジニアになりたいか(目指すエンジニア像)
- インターンの目標

を言語化していきました。

# 3. 12日間でしたこと
|日程|内容|
|--|--|
|1~3日目|開発計画(3日目に計画発表)|
|4~11日目|開発(8日目に中間発表)|
|12日目|最終発表|

ちなみに今年は「中長期的な視点で事業を考える」ということが全体の大きな目標となっていて、12daysが終わった後も継続的に事業を発展させていけるような設計や取り組みを意識しました。

## 開発計画フェーズ(1~3日目)
まず、1日目の開会式で、今回のインターンでどういうものを作っていくのか、というミッション伝達を受けました。

ミッション伝達を終えるとすぐさまチームごとのワークに移りました。ワークではミッションの把握・技術選定・ER図の作成・Issue分解を行いました。
また、今回のインターンでは開発フェーズを3つのスプリントに分割し、各スプリントごとのゴールを決めるワークをしました。

## 開発フェーズ(4~11日目)
1~3日目に立てた計画をもとに開発を行っていきます。(ちなみに私のチームは1~3日目に十分な計画を立てることができず、5日目の午前中まで計画フェーズをすることになりました。)

開発工程全体を3つのスプリントに分割し、各スプリントの最後には**GKPT**を用いて振り返りを行いました。この振り返りを通して、メンターの方の意見も聞きながらより良い開発形体へと変えていくことができました。

途中の中間発表では、現時点での進捗報告と、今後の見通しについて事業責任者の方に説明をしました。

## 最終発表(12日目)
最終発表では、成果物のデモと12days後どういった開発を行っていくのかという今後の見通しについて発表を行いました。

# 4. インターンを通して学んだこと
このインターンを通して、特に以下の2点について大きく学べたと感じました。

- [チームで取り組む重要性](#4-1-チームで取り組む重要性)
- [不確実性を潰すことの重要性](#4-2-不確実性を潰すことの重要性)

## 4-1. チームで取り組む重要性
私はチームの中で他のチームメンバーよりも技術的に経験値が高い自覚があったため、始めの頃は自分が主導して技術選定などの意思決定を進めていました。その中で、経験が浅いメンバーへの配慮が足りず、他のメンバーが置いてけぼりになるということがありました。

そのせいで、メンバーから同じ質問を複数回受けたり、同じ内容の話が繰り返されたりということが起き、時間のロスに繋がりました。

実際、この問題はメンターの方や運営の方の間でも話になっていたのか、3日目あたりに複数の方からご指摘を受けました。指摘された内容は複数あったのですが、その一つに「チームとして、今後12daysが終わった後も一緒に開発を続けていくつもりで、チームとしての成長を考えて行動しよう」という話がありました。
思い返せば、12daysが終わったらこのチームは終わり！って感覚で進めてしまっていました。

メンターや運営の方からの指摘を受け、主に次の2点に意識をして自分の行動を変える努力をしました。
- 他のメンバーの意見にも耳を傾ける
- 意思決定の根拠を他のメンバーにも分かるように説明する

これらを意識した結果、メンターや人事の人に「大きく成長した」と言ってもらえるくらいには良い変化を遂げることができました。
このインターンを通して、他の人と協調して仕事を進めていくという観点で大きく成長できたと実感しています。

## 4-2. 不確実性を潰すことの重要性
今回インターンの中で、「事業に責任を持ったエンジニアになろう」っということが繰り返し言われてきました。
そして、事業に責任を持ったエンジニアになるために、具体的には次の3点が特に重要だという話がありました。
- プロダクトのリリースを間に合わせる
- SEO対策の要件を守る
- 未来の不確実性を潰す


リリースを間に合わせるとかSEO対策の要件を守るとかは、自分の中でも当たり前という認識があったのですが、不確実性については新しい観点として学びを得ました。

「不確実性を潰す」とは具体的には以下のようなことを指します。
- 初めて触る技術、上手くいくかわからないことは設計・計画段階で一旦軽く試してみる
- 事業において難所となりそうな点に対する打ち手を盛り込んだ設計をする

これらは次の2点でとても重要だと学びました。
- 手戻りを防ぐ
- 事業の実現可能性を根拠を持って説明できるようにする

**手戻りを防ぐ**
実際私自身、個人開発で今まで使ったことがないライブラリを使うときに「実はこれは無理だった！」みたいなことに後から気づいてコードを大幅に書き直すという経験が何度かありました。(←おいおい)
このような無駄をなくすためにも、実装に移る前に技術などについての調査を行うことは重要です。

**事業の実現可能性を根拠を持って説明できるようにする**
不確実性が残っていると、本当に実現可能なのかという不透明さや見積もりの甘さに繋がります。
例えば、初めて使う技術の工数見積もりを3日で見積もったけど実際には1日で終わった、とか、逆に3日で見積もったけど5日かかってしまった、みたいなことがありえます。
そのような甘い見積もりだと、エンジニアとして「このプロジェクトはリリースに間に合います！」と自信を持って言うことはできなくなり、それでは事業に責任を持ったエンジニアとは言えないということになります。

このインターンを通して、言われたものをただ作るのではなく、自分で主体性を持って考えながらプロダクトを作っていくエンジニアへと成長できました。

# 5. まとめ
今回のインターンでは、メンターの方との面談を通して自分の苦手な部分の克服や、エンジニアとして今まで持っていなかった観点について学ぶことができました。
Speeeのカルチャーはインターン参加決定前の面談でもたくさん聞くことができるので、興味を持った方はぜひ応募してみてください！

https://newgraduate.speee.jp/engineer/
[Android] Github Actionsでビルド

AndroidのPRに対して、Bitriseでビルドしていたのですが順列処理なので、ビルドに時間がかかってました。
なので、Github Actionsに切り替えようと思ったのですが、情報があまりなかったので、自分でまとめてみようと思います。

### 準備

Androidのプロジェクトに下記を追加する。
ファイル名は、任意で大丈夫です。

```
.github/workflows/pr.yml
```

### Github Actions

```yaml:pr.yml
name: Pull Request

on:
  pull_request:
    types: [ opened, synchronize, reopened ]

permissions:
  contents: write
  actions: read

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          ref: ${{ github.event.pull_request.base.sha }}
      - name: Setup JDK
        uses: actions/setup-java@v3
        with:
          distribution: adopt
          java-version: 17
          cache: gradle
      - name: Setup Gradle
        uses: gradle/gradle-build-action@v2
      - name: Build With Gradle
        run: |
          ./gradlew assembleDebug
```

### 説明

* PRをオープンまたは、リオープンした場合とPRを更新した際にGithub Actionsが実行されます。

```
on:
  pull_request:
    types: [ opened, synchronize, reopened ]
```

* PRのソースコードを取得します。

```
      - name: Checkout
        uses: actions/checkout@v4
        with:
          ref: ${{ github.event.pull_request.base.sha }}
```

* JDKを取得します。Gradle8.0を使用しているため、JDKのバージョンを17にしてますが、Gradleが低い場合は、11で問題ありません。

```
      - name: Setup JDK
        uses: actions/setup-java@v3
        with:
          distribution: adopt
          java-version: 17
          cache: gradle
```

* Gradleをセットアップします。キャッシュなど自動的に設定してくれます。

```
      - name: Setup Gradle
        uses: gradle/gradle-build-action@v2
```

* ビルドを実行します。

```
      - name: Build With Gradle
        run: |
          ./gradlew assembleDebug
```

Bitriseは、UIで設定出来るので楽なのですが複数のプロジェクトがあると順列処理になるので、自分のPRが渋滞して時間がかかることがあります。
Github Actions並列処理をしてくれるので、PRの渋滞など気にしなくなるので楽になります。
UIKitとSwiftUIのViewの描画周りで気をつけること

## 気をつけることと両者の違い
結論から言うと、気をつけるべきことは、`クラスの性質`と`構造体の性質`に注意するということ。
また、両者の違いは、主に`UIkitはクラスでViewが作成され、SwiftUIは構造体でViewが作成される`ことである。


## このトピックにおけるUIKitの性質
- クラスの生成
    - 通常、クラスで作成したインスタンスは、アプリのライフサイクル内で一度生成されると、（自分でインスタンスを破棄するコードを書くなど以外で）`そのインスタンスはほとんど破棄されることはなく保持される。`そのため、`データや設定が安定して維持される。`

-  いつクラスのインスタンスが破棄されるのか？
    -  通常は、`ViewController自体が破棄されるときに一緒に破棄される。`
        -  破棄されるタイミングの具体例
            -  ユーザーが画面上の戻るボタンを押して前の画面に戻ると、現在のビューコントローラーが破棄される。
            -  メモリ不足の状況下で、システムがビューコントローラーとそのビューを解放し、メモリを開放することがある。
    - ただし、具体的な破棄タイミングはシステムに依存し、`アプリのコードで直接制御することは難しいことが多い。`したがって、破棄のタイミングは開発者側は詳しくは分からないことがある。


## このトピックにおけるSwiftUIの性質
- 再描画の度に新しいViewのインスタンスを生成するため、View内でインスタンス(クラスで作成した)を作成する場合、再生成の際に新しいインスタンスが作成される。
    - そのため、以前のデータや設定が失われることがある。
        - @State、@Binding、または他のSwiftUIの状態管理メカニズムを使用する。これらにより、再描画時にデータが失われず、正しく動作するアプリを開発できる。
        - 下記ソースコードで確認する。

## ソースコード
- `再描画によってテキスト（データ）が消える実装`
```swift:Swift
struct ContentView: View {
    //　クラスを用いてユーザーのテキスト入力を保持する
    class UserData {
        var userInput = ""
    }

    // UserDataクラスのインスタンス
    // 再描画の度に新しいuserDataインスタンスが生成されるから、前に入力されたユーザーの入力が再描画時に消えてしまう
    @State var userData = UserData()
    var body: some View {
        VStack {
            Text("テキストフィールドに入力したテキスト: \(userData.userInput)")
            TextField("テキストを入力してください", text: $userData.userInput)
        }

    }
}
```

- `@Stateプロパティーラッパーを使って、状態管理をして、再描画時にもデータが失われないようにする`
```swift:Swift
struct ContentView: View {
    // ユーザーがテキスト入力をすると、@Stateプロパティによって追跡される
    // その結果、再描画時にも状態が保持され、入力内容も消えない
    @State var userInput = ""

    var body: some View {
        VStack {
            Text("テキストフィールドに入力したテキスト: \(userInput)")
            TextField("テキストを入力してください", text: $userInput)
        }
    }
}
```



## おわりに
間違い等ありましたらコメント欄にてご指摘ください！

## 参考記事
- [SwiftUIドキュメント](https://developer.apple.com/documentation/swiftui/)
- [[SwiftUI] ViewのIdentityと再描画を意識しよう
](https://zenn.dev/kntk/articles/1f1b40da6fe181)
- [【5分でわかる】クラス(Class)の使い方 | Swift入門
](https://kimuralog.com/?p=1373)

## 開発環境
- Xcode-14.3
- Swift version 5.8
AWSでLLMが使えるAmazon Bedrockを試す

# はじめに

きのう夕方頃、Amazon BedrockがGAになったとのことで早速試してみました。端的に言ってしまえばAzure OpenAI ServiceのAWS版で、ChatGPTに似たチャットモデルも利用可能です。

今回は、Bedrockの価格、利用方法、チャットモデルの簡単な性能試験を行ってみたいと思います。

## お値段

SageMakerでLLMを試す場合、１日に数万～十数万円のEC2インスタンスを立てる必要があります。翌月大変なことにならないように価格の確認は重要です。

https://aws.amazon.com/jp/bedrock/pricing/

Azure OpenAIServiceと同じく1000トークン当たりの従量課金のようです。Jurassic-2 Ultraで$0.0188/1,000tokensくらいなので気軽に試せそうです。

## 下準備

モデルのデプロイ方法がわかりにくく、ちょっとてこずったので手順を記します。

AWSにサインインしてから、検索窓に「bedrock」と打ち込むとAmazon Bedrockの候補が表示されるので、そこをクリックするとホームに行きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64722/08a1382c-f294-5721-7e3c-a9ff26ba1aaf.png)

右上の「Get Started」を押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64722/9ed51578-8a11-e003-9367-b6a5b3974738.png)

すると以下の画面になるので、「Model Access」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64722/eb732a15-138b-2dff-b499-9873708d9379.png)

「Available」となっているのが利用可能なモデルですが、このままでは使えません。右上の「Edit」を押し、試してみたいモデル（チャットボットであればJurassic-2 Ultraなどがおすすめ）をチェックし、確定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64722/42a42473-b7f5-8e27-d5f7-afcdca40d06d.png)

最初は「In progress(だったかな？)」と出ます。画面のように「Access granted」となるまで待ちましょう。5分くらいだったと思います。

## チャットを試す

「Access granted」になったら、今度は左メニューから「Chat」を選びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64722/5063a7b4-4e96-212d-c0b1-ad31894f836d.png)

プルダウンからA21 Labs→Jurassic-2 Ultraを選び、「Start new chat」ボタンを押すとチャットができるようになります。

## 性能チェック

早速なにか打ち込んでみましょう。Jurassic-2 Ultraは日本語が苦手ということですが、一応試してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64722/9cb241c4-0a30-1471-efb6-f641cefe7bdb.png)

思ったより厳しいですね（センシュアルオプティマイザ層とは……）。同じ文章を英語に翻訳してから投げてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64722/eaa35699-62de-4e4d-2db9-c9052191cdc5.png)

こんどはしっかりした文章を生成しています。しっかり読んだわけではありませんが、だいたい合っていそうです。

GPT-4に質問したセッションも貼っておきます。

https://chat.openai.com/share/3db4a7e2-e97f-49de-a1a5-0aed306918bf

## さいごに

まだ性能調査は十分に行えていませんが、動くところまで確認できたので記事を公開したいと思います。
【Mac版】実は簡単にできる！Stable Diffusionローカル環境構築

# 前提
機種: MacOS
インストール済み: HomeBrew(https://brew.sh/)

Homebrewは公式サイトのスクリプトをコピペすれば簡単にインストールすることができます。
初めての場合は、「コマンドラインツールをインストール」というUIが出てくるかもしれませんが`Homebrew`の実行に必要なものなのでインストールして問題ありません。
環境によっては数時間かかりますが根気よく待ちましょう

# インストールに必要なコマンドは5つ
```shell:ターミナル
brew install cmake protobuf rust python@3.10 git wget
cd ~
git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui
cd ~/stable-diffusion-webui
./webui.sh
```
上記5つのコマンドが正常に実行されれば`stable diffusion`のローカル環境である`stable diffusion web ui`を利用できるようになります。
一つづつ解説しましょう

## `brew install cmake protobuf rust python@3.10 git wget`
このコマンドは`Homebrew`を利用して、`stable diffusion web ui`を実行するのに必要なパッケージをインストールしています。

すでに、インストールしてあるパッケージがあれば除外しましょう。
エンジニアの方なんかは`git`や`python`は入ってるという方も多いでしょう。

## `cd ~`
このコマンドは作業ディレクトリをルートに移動するためのものです。
すでにルートにいれば実行しなくても大丈夫です。

このコマンドを実行しなくても、致命的な影響はありませんが、ファイルを綺麗に管理するために私は推奨します。

ちなみに`cd`は`change directory`の略称です。

## `git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui`
このコマンドは、`git`を利用して、オンライン上にある`stable diffusion web ui`の本体を自分のPC(ローカル)にダウンロードしてきます。
これを実行しないとそもそも、ソフトウェアがない状態になってしまうので必ず実行するようにしましょう。

## `cd ~/stable-diffusion-webui`
`git colone`が正常に完了すれば、ルート直下に`stable-diffusion-webui`という名前のフォルダができているはずなので、そこに作業ディレクトリを移動します。
次のコマンドを実行するためには`stable-diffusion-webui`に移動する必要があります。

## `./webui.sh`
このコマンドで、`stabel diffusion web ui`を起動します。
このコマンドは今後も起動が必要なときに利用するので覚えておきましょう。

初回起動時はパッケージなどのインストールが走るため起動に10~20分ほど時間がかかります。
無事に起動が完了すれば、`http://127.0.0.1:7860/`にアクセスすると以下の画面が表示されます。
![スクリーンショット 2023-09-26 17.20.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195078/6ca5cbd5-cfe8-f842-a22c-6d9b4426a29e.png)

ここまで来ればインストールは完了です。
お疲れ様でした！

## stable diffusion web uiを停止させたい時
ターミナル上で`ctrl + c`を押せば停止させる事ができます。

# 参考サイト
https://gift-by-gifted.com/stablediffusion-3/

https://kurokumasoft.com/2023/02/06/stable-diffusion-web-ui/
wslでelixir その68

# 概要
wsl(wsl2じゃない)で、elixirやってみた。
livebookやってみた。
IO.readどうすんだ。

# IO.readがエラーになる。

```
name = IO.read(:line)


{:error, :enotsup}
```

# Kino.Input使うらしい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/28566e57-1f6d-2b46-8486-249cf4321083.png)

以上。
【Amazom Bedrock】Anthropicのclaude-v2をboto3経由でストリーミング応答させてみた

## Amazom Bedrockとは
AmazonやStable DiffusionなどAI企業が提供する基盤モデル（FM）をAPIを通じて利用できるようにする完全マネージド型サービスです。

先日(9/28)にようやくGAしたので検証アカウントで早速使ってみました!!

https://aws.amazon.com/jp/blogs/aws/amazon-bedrock-is-now-generally-available-build-and-scale-generative-ai-applications-with-foundation-models/

■公式ブログ

https://aws.amazon.com/jp/blogs/aws/amazon-bedrock-is-now-generally-available-build-and-scale-generative-ai-applications-with-foundation-models/

■ ドキュメント

https://docs.aws.amazon.com/bedrock/

■ 料金

https://aws.amazon.com/jp/bedrock/pricing/

## Bedrockを有効化

スクショを取り忘れたので、以下を参考に有効化すると流れが分かると思います。

https://qiita.com/minorun365/items/79c2fc1d2afe82aad2af

## 早速ローカルから動かしてみる
先ずは普通に
```py
import boto3
import json

session = boto3.Session(profile_name='AWSプロファイル')
client = session.client(
    'bedrock-runtime',
    region_name='us-east-1',
    )

prompt = '''
Human: AWSについて教えて
Assistant:
'''

body = {
    'prompt': prompt,
    'max_tokens_to_sample': 300,
}

response = client.invoke_model(
    modelId="anthropic.claude-v2",
    body=json.dumps(body)
)

body = response['body'].readlines()

completion = json.loads(body[0].decode('utf-8'))['completion']

print(completion)
```

![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354022/b55be637-17eb-8579-71dd-e8ace7b0ccd8.gif)

Tokenを300にしてるせいもありますがレスポンスが返ってくるまで20数秒かかってますね。

OpenAIなどに慣れすぎたせいかストリーミングでないとややもたつきを感じる身体になってしまったので、ストリーミング応答で挙動を確認したいと思います。

## ストリーミング応答
```py
import boto3
import json

session = boto3.Session(profile_name='AWSプロファイル')

bedrock = session.client(
    service_name='bedrock-runtime', 
    region_name='us-east-1',
    endpoint_url='https://invoke-bedrock.us-east-1.amazonaws.com'
)

prompt = '''
Human: AWSについて教えて
Assistant:
'''

body = json.dumps({
    "prompt": prompt,
    "max_tokens_to_sample": 300,
    })

response = bedrock.invoke_model_with_response_stream(
    modelId='anthropic.claude-v2',
    body=body
)

stream = response.get('body')
if stream:
    for event in stream:
        chunk = event.get('chunk')
        if chunk:
            print(json.loads(chunk.get('bytes').decode()))
```

![ezgif.com-video-to-gif (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354022/da16f432-a97c-be76-a5a5-158224baa1fb.gif)

無事ストリーミング応答が出来ましたね！

## おわり
あっさりですが、先ずはともあれ軽く試してみました。
引き続き他のモデルを使ってみてたりアプリケーションに組み込んでの比較など随時検証していきたいと思います。