OmniAICreator/Qiita-1.07M huggingface dataset:
VSCode Portable ModeでもRemoteSSHを使いたい!

VSCode Portable ModeでSSH設定もPortableにしたい場合のアレコレです。
標準ではSSH Configのパスは絶対パス指定なのでそのあたりなど。
**なおWindowsでの話です。**

# 結論
定義済み変数の **${execPath}** から相対指定する。
config中の秘密鍵参照パスにも使える。
```
${execPath}/../.ssh/config
```

https://stackoverflow.com/questions/68880358/use-portable-vscode-with-portable-powershell

# VSCode Portable Mode

https://code.visualstudio.com/docs/editor/portable

まず VSCode Portable Mode について。
VSCodeはインストールせずにUSBメモリなどに入れて環境設定ごと持ち運ぶことができます。
手順としては以下の通り。

1. https://code.visualstudio.com/download から zip 版をダウンロードします。 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165220/f7952a88-630e-d3b3-eb58-9f105da71a35.png)

1. VSCodeを配置したいディレクトリに展開します。 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165220/b059f8f1-12b2-7e58-ec84-6efda574360a.png)

1. 展開したフォルダ直下、Code.exeと同じディレクトリに`data`フォルダを作成します。 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165220/eb77746a-4969-6ac8-3a91-cee77f1b8fa8.png)

これでこのCode.exeはPortable Modeで起動するようになり、設定などはすべてdataフォルダに保存されるようになります。

# PortableなSSH設定
VSCodeのRemote SSHで利用されるSSH Configのパスは `C:\Users\{USERNAME}\.ssh\config` か `C:\ProgramData\ssh\ssh_config` になっています。(多分)
設定で特定のファイルパスを指定することもできますが、絶対パスしか受け付けておらず、素直に相対パスを指定すると一見動きそうでもSSH接続時に失敗します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165220/52a9505a-1088-f27f-ac88-b9ae2ea3e9d2.png)

せっかくPortable版を使っていてもSSH設定が絶対パス指定では環境を持ち運べる恩恵が半減してしまいます。
そこでVSCodeディレクトリ内にSSH設定を持ってくるために、VSCodeの**定義済み変数**を用いた疑似相対パスを利用します。

https://code.visualstudio.com/docs/editor/variables-reference#_predefined-variables

定義済み変数の `${execPath}` は Code.exe のパスを示すため、ここから相対指定を行うことでVSCodeディレクトリ内の指定を行うことができます。

例えば `${execPath}/../.ssh/config` と指定すれば、 「Code.exeと同階層の.sshフォルダ内のconfigファイル」をSSH Configに指定することができます。
またこの定義済み変数はSSH Config中の設定値に対しても有効で、同じく絶対パス指定である秘密鍵も `${execPath}/../.ssh/id_ed25519` のように指定することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165220/d3e0a9f5-5180-1a12-025f-1d549d0c525e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165220/68e229ee-e438-7f61-5ae4-469485a74289.png)
プログラミング初学者がRubyを勉強して学んだこと

●ruby　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　オブジェクト指向の言語。RubyはWEBアプリケーションの「システム」をつくるためのプログラミング言語。すべての値がオブジェクトになっている
ex）オブジェクトの種類はクラスというが、1.1 や "hello world" などの実際の値のことはインスタンスと呼ぶ。

●print・・出力
puts・・出力（改行）
p・・出力（デバック用）

●変数と定数・・慣習的に定数の頭文字は大文字

●良く使うメソッド・・upcase,upcase!
upcase は文字列を大文字にしたものを返すだけ、upcase! は文字列を大文字にしたものを返しつつ、元の文字列も大文字に書き換えるという違い。

●? がつくメソッド・・これは真偽値を返すメソッド

●文字列を数値に変換・・整数に変換したい場合は to integer という意味で「y.to_i」、浮動小数点数にしたい場合は to float という意味で「y.to_f」

●ハッシュと配列の相互変換
ハッシュから配列にするには　scores.to_a
配列からハッシュにするには　scores.to_a.to_h

●繰り返し処理・・配列.each do |変数名| *処理の終わりにはend

●ハッシュ・・複数の値を一括で管理する方法。ハッシュはそれぞれの値にキーと呼ばれる名前をつけて管理する。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　{キー1 => 値1, キー2 => 値2}のようにつくる。キーと値の間は「=>」でつなぐ。
*省略した書き方が一般的。具体的には「:key =>」を「key:」というように省略。

●メソッドとは、複数の処理を1つにまとめたもの
def メソッド名(引数名）で引数を指定

●条件分岐・・case ... when ... else ... end

●繰り返し処理・・whileを用いた繰り返し,永遠に繰り返すloop
ループを抜けるための break、そしてループを 1 回スキップするための nextと一緒に用いられることが多い
　　　　　　　　
●戻り値・・真偽値を返すメソッドは、メソッド名の末尾に「?」をつける。
returnは、戻り値を返すだけでなく、メソッドの処理を終了させる性質も持っている。
よって、returnの後にあるメソッドの処理は実行されないので注意。

●キーワード関数・・引数の数が多くなると、呼び出し側で値がどの引数に入るのかがわかりにくくなる
① 定義側で、引数の後にコロンを付ける② 呼び出し側で、値の前に引数名を書く

●クラスのデータを定義する方法の1つに「attr_accessor シンボル」を使う方法がある

●クラス（設計図）を元に、新しくインスタンスを生成するには、「クラス名.new」とする。
インスタンス.変数名 = 値でそのインスタンス変数に値をセット

●インスタンスメソッドの中では、特殊な変数「self」を用いて「self.変数名」とすることで、インスタンス変数を扱うことができるようになる.インスタンス変数は変数名の前に @ をつけるルール

●initializeメソッド・・インスタンスの生成時に必ず実行したい処理をメソッドを呼び出すことなく実行することができます

●インスタンス変数にアクセスするためのメソッド。attr_accessor, attr_reader
ちなみに値を設定するほうのメソッドを setter、そして値を取得するほうのメソッドを getter、2 つを合わせてアクセサと呼んだりする

●self はそのメソッドを受け取っているインスタンス自身を指す
class クラス名
def initialize()
処理
end
end

●クラスメソッド・・クラスから直接取り出すことのできるクラスメソッドも存在する。クラス変数には @@ をつけることがルール

●クラスメソッド・・・クラスメソッドは、「def クラス名.メソッド名」とすることで定義できる。インスタンスメソッドとの違いはメソッド名の前にクラス名を書く必要がある点

今回勉強したことはオブジェクト指向の基礎の基礎でしかないと思うので、もっともっと勉強して理解を深めていきたいと思います！
【Flask】Blueprint を簡単にまとめてみた

## Blueprint とは
Blueprintの役割は、「アプリを分割して管理するため」のもの。

通常のPythonのコードは分割しても、インポートすることで使用することが可能。
例えば、フォームやモデルを記述したファイルは、view関数から呼び出す形で記述するので、そのままインポートして使うことができる。

しかし、view関数はそのまま分割してしまうと、関数ごとに設定した URL が動作しなくなってしまう。

そのため、 Blueprint を使用することにより、 view関数 を機能ごとに分割し、その URL を管理することができるようになるため、view関数に付随するフォームやモデルのファイルも分割することが可能となる。

分割できることのメリットとしては、機能ごとにフォルダ管理ができるので「どこになにがあるか」がわかりやすくなること。

## 実装方法

### Blueprintをインポート
```py
# Blueprint をインポート
from flask import Blueprint

 # Blueprint を インスタンス化
sample = Blueprint('sample', __name__)
"""
'sample' : Blueprint名
__name__ : このファイルのディレクトリ名が格納されている
"""

# Blueprint名を view関数 のデコレータに指定
@sample.route('/login', methods=['GET', 'POST'])
def login():

# view関数を指定するときには、 Blueprint名 を関数名の前に付ける
return redirect(url_for("sample.login"))
```


### Flaskアプリに Blueprint を登録する
```py
# Flaskをインスタンス化
app = Flask(__name__)

# Blueprint名をインポートする
from folder.subfolder.file import sample

# Blueprintをアプリに登録し、Blueprintを有効にする
app.register_blueprint(sample)
```

以上、Blueprint について簡単にまとめてみました。
オブジェクト指向について

#  オブジェクト指向とはなにか
オブジェクト指向とは、プログラムを構成するための考え方です。 オブジェクト（もの）同士の相互作用とみなします。
- リモコンでテレビを操作するイメージ
- 自動車というオブジェクトを作りたい場合、ガソリンやブレーキなどの要素が必要です。また、具体的にどのタイミングでブレーキをかけるか、どれくらいの速度で構成するのか、などの命令を加えることで、「モノを動かす」ことができます。

# 関連用語
ここからは、オブジェクト指向の概念を理解する上で重要な用語を紹介していきます。

**オブジェクト**
前述のとおり、オブジェクトは「もの」という意味で、プログラミングにおいては、データや処理の集まりを指す。
たとえば、車というオブジェクトは、「メーカー」や「色」などのデータのほか、「前進する」「停止する」などといった処理を含む。

**クラス**
クラスは、オブジェクトを作成するための設計図のこと。
自動車を例に考えてみると、自動車を作る元となる設計図にあたります。

**インスタンス**
設計図であるクラスから生成した実体のこと。
たとえば「車」というクラスをもとに「トラック」や「パトカー」などのさまざまな種類の車を作るとすると「トラック」や「パトカー」がインスタンスに該当します。

**プロパティ**

プロパティは、オブジェクトが持つ性質や属性のことを指す。
自動車を例に例えると、メーカーや色、ガソリン量や走行距離などにあたります。

**メソッド**
オブジェクトが持っている処理を指す。
自動車を例に考えると、「走る」や「ガソリンを入れる」といったものにあたります。

# オブジェクト指向の原則
### 1. カプセル化
クラスをもとに開発された「もの」自体は複雑な仕組みで成り立っていますが、その詳細までを開発に関わる全員が理解するのは困難であるため、機能をひとまとまりにし、直接 使われない処理を隠して簡単に使えるようにすることををカプセル化（＝抽象化）という。
前述のとおり、車の内部には複雑な仕組みがありますが、その仕組みを理解していなくとも、「アクセルを踏めば進む」という使い方さえ知っておけば、誰でも簡単に車を動かすことができます。
### 2. 継承
親の機能を引き継いで子を生成し、さらには子には独自の機能を追加できるという便利なしくみのこと。
似たようなオブジェクトを複数作る際、継承を使うことにより、同じ機能を実装できる。
たとえば、ゲームを作成した際、「車」に「トラック」も追加する場合、基本操作は同じであるため、追加も簡単にできます。
### 3. ポリモーフィズム
「多態性」などと呼ばれ同じ形式の指示で異なる処理を発生させるしくみのこと。
複数のいろんな種類の対象物に対して同じメッセージを送れば、同じ目的の挙動が行われるようにすること。どの種類の車であっても「アクセルを踏む」と「前進する」ということを決めておくことで、使う側は同一のルールでさまざまな種類の車を操作することができるようになります。
### 4. 単一責任の原則
オブジェクトは１つの責任のみを果たすように設計するべきという考え方。
オブジェクトが対象Aと対象Bに関して責任を負ってしまっていた場合、それはAの動作のためのコードとBの動作のためのコードが一体になってしまっていることになる。そうすると、Aの動作に関する改修をしたつもりが、その影響がBにも及んでしまいバグが生まれてしまう可能性がある。
複数の対象に対して責任を負っている部品がある場合、その部品を、責任を負う対象の数に分割してあげることで、アンチパターンを回避することができます。

# オブジェクト指向を使うことのメリット
- プログラムの再利用性を高めることができる
- 変更に対して柔軟に対応できるようになる
- 理解しやすいプログラムを作ることができる
- ソフトウェアを楽に作ることができる

# オブジェクト指向のプログラミング言語
**Java**
オブジェクト指向言語の代表格で、プラットフォーム開発など幅広く使われています。
特にデスクトップアプリ、Androidアプリの開発で多く使われている言語です。

**PHP**
PHPは、Webアプリ分野で活躍している言語です。
文法が比較的簡単で、初心者でも習得しやすいのが特徴です。

**JavaScript**
Webアプリ分野のフロントエンドで活躍している言語で、Webサービスを開発には必要不可欠です。

> **フロントエンド**
サイトの表側のことで、レイアウトや表示後の処理を指します。

**Python**
プログラミング初心者から上級者まで広く使われている言語です。
シンプルで覚えることが少ない構文で、1行で多くの処理を記述でき、Webアプリやゲームの開発だけでなくAI開発などにも使用されています。

**C++**
C++は、C言語をオブジェクト指向で書けるようにした言語で、スマホアプリやゲームの開発など、商用のプログラミング言語として重宝されています。

**Swift**
iOSアプリ開発で使われる言語です。
文法が比較的簡単であるため、初心者でも扱いやすいのが特徴です。
従来はiOS分野の開発にはObjective-Cの使用が主流でしたが、習得難易度や処理速度という点で優れているSwiftが次第に主流になっていきました。

**Ruby**
日本人によって開発されたプログラミング言語で、コードの量も少ないので初心者にも扱いやすい言語です。
主にWEBアプリの開発に使用されます。
Ruby初学者のメソッド解説！

# Ruby駆け出しのメソッド解説
## はじめに、完全に理解して使っているわけではないので辛口な意見はご容赦ください！

### initializeメソッド
ペーペーな私でもわかりますこれは死ぬほどこれから先使うであろうメソッドなんだなと、クラスを作った時自動的に呼び出される最強メソッドです。
めっちゃ簡単に言うと、たい焼きを作るうえで必要なのって
たい焼きの型と材料ですよね！？
クラスっていうのはたい焼きの型側なんですけど
このinitializeメソッド(イニシャライズ)はなんと！
たい焼きの型を出してきたと思ったら材料も混ぜてくれる！
そんなメソッドなんです。
実際に自分が助かった場面があるので少し紹介します！
まだ理解が浅い時(今も浅い)
initializeメソッドって何に使うねんって思いながらでもみんな書いてるし書いとくかって感じで使ってたんです。
で私はその下に条件分岐や計算のコードを書いてたんですが
### 実はなんとイニシャライズさんに条件分岐や計算などをぶちこんだらクラスを呼び出すだけでそれをやってくれます！
## ピンと来ないかも知れませんがこれって結構すごいことで
これを組み合わせたら極論イニシャライズだけで何かを作ることはできます！
## ヤバくないですか、たい焼きの型を呼びまくったらたい焼きができるってことですよ！
正直イニシャライズの重要性(総称はコンストラクタと言います)
は勉強していく上で必ずわかると思うんですが、自分はなかなか気づけなくて気付いた時は衝撃だったので紹介致しました！
Ruby初心者のメソッド紹介

# Ruby駆け出しのメソッド解説
## はじめに、完全に理解して使っているわけではないので辛口な意見はご容赦ください！

### initializeメソッド
ペーペーな私でもわかりますこれは死ぬほどこれから先使うであろうメソッドなんだなと、クラスを作った時自動的に呼び出される最強メソッドです。
めっちゃ簡単に言うと、たい焼きを作るうえで必要なのって
たい焼きの型と材料ですよね！？
クラスっていうのはたい焼きの型側なんですけど
このinitializeメソッド(イニシャライズ)はなんと！
たい焼きの型を出してきたと思ったら材料も混ぜてくれる！
そんなメソッドなんです。
実際に自分が助かった場面があるので少し紹介します！
まだ理解が浅い時(今も浅い)
initializeメソッドって何に使うねんって思いながらでもみんな書いてるし書いとくかって感じで使ってたんです。
で私はその下に条件分岐や計算のコードを書いてたんですが
### 実はなんとイニシャライズさんに条件分岐や計算などをぶちこんだらクラスを呼び出すだけでそれをやってくれます！
## ピンと来ないかも知れませんがこれって結構すごいことで
これを組み合わせたら極論イニシャライズだけで何かを作ることはできます！
## ヤバくないですか、たい焼きの型を呼びまくったらたい焼きができるってことですよ！
正直イニシャライズの重要性(総称はコンストラクタと言います)
は勉強していく上で必ずわかると思うんですが、自分はなかなか気づけなくて気付いた時は衝撃だったので紹介致しました！
ChatGPTにPythonプログラムからAPI接続して使ってみた！

# はじめに
今、話題のChatGPTですが、無料でつかえるものの、企業で利用しようとすると、使ったデータが再学習に使われるリスクがあると言われています。
一方で、API接続で使った情報は、再利用されないようですので、企業でChatGPTを利用する場合、API接続で利用する方がリスクが小さいです。
そこで、PythonプログラムからAPI接続でChatGPTに接続する簡易チャットプログラムを作成しましたので、ご紹介します。
# 環境
Windows10
Python3.8.8

# 流れ
・API接続の料金
・APIキーの取得方法
・PythonプログラムでChatGPTに接続する基本プログラム
・トークン取得とパラメータ
・GUIチャットプログラム作成

# 最終画面イメージ
最終的に、以下のようなChatGPTを組み込んだチャットアプリを作成しました。
![画面イメージ2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1361368/70a26f83-f474-b51a-0c8c-48be4b3b40b1.png)


# YouTubeでの解説：
上記の作業の流れをYoutubeで詳しく解説していますので、ぜひ、ご覧ください。
<iframe width="560" height="315" src="https://www.youtube.com/embed/sC2mDk2L-r4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" loading="lazy" allowfullscreen></iframe>

# サンプルソース
YouTubeで紹介している処理の初期版プログラムソースです。
```Python:step1.py
import openai
import os
openai.api_key = os.getenv("OPENAI_API_KEY")

response = openai.ChatCompletion.create(
    model="gpt-3.5-turbo",
    max_tokens=100,     #トークン数の上限を設定
    temperature = 0.5,  # 0～2.0の値を指定
    messages=[
        {"role": "user", "content": "ChatGPTについて教えてください。"}
    ]
)
print(response.choices[0]["message"]["content"].strip())
print(response.usage["prompt_tokens"])
print(response.usage["completion_tokens"])
print(response.usage["total_tokens"])
```

# サンプルソース２
YouTubeで紹介している処理のプログラムソースの最終版は、YouTubeの詳細ページからのLinkで紹介していますので、そちらをご覧ください。
https://youtu.be/sC2mDk2L-r4


# 最後に：
今回は、ChatGPTに対してPythonでAPI接続するプログラムを作成しました。
意外と簡単に出来ましたが、このプログラム作成もChatGPTやBing-AIを使って作成しました。
もう、ChatGPTなしには、プログラムが作成できません！
今後も、良さそうなプログラムが出来たら、ご紹介したいと思います。
初心者が２週間で ブラックジャック をつくる（Ruby）part.1

# はじめに

Rubyの知識0、経験0から２週間でブラックジャックゲームを実装します。

オブジェクト指向って実際なんですか？ というレベルです。


# なぜ作るのか

人の役に立つサービスを開発したいからです。
そのお勉強です。

先日、幸いなことに "アプレンティスシップ"* の第一期生になりました。
そこで与えられたお題が、「ブラックジャックゲームをつくる」です。

:::note info
アプレンティスシップ
新たなエンジニア教育プロジェクト。エンジニアとして現場で活躍するためのスキルを実践的に身につけていきます。UdemyやYoutube、独学エンジニアでおなじみの山浦清透さんが主宰しています。
:::

# 手順

まずは手順を考えました。
ちなみにブラックジャックの知識は、ピグのカジノで遊んだ程度です。懐かしい。

| クラス名 | 振る舞い |
|:-:|:-:|
|  Gameクラス | ゲーム全体を制御するよ！  |
|  Deckクラス | カードの山札をつくるよ！ |
|  Handクラス | 得点やバーストを確認するよ！  |
|  Playerクラス |  Handを継承して、カードを引いちゃうよ！ |
|  Dealerクラス |  Handを継承して、カードを見せるよ！ |

- ゲームに必要なオブジェクトを考える。
例）カード、デッキ、プレイヤー、ディーラー、ゲーム。

- 各オブジェクトが持つ属性や振る舞いを考える。
例）カードは数字とスートを持つ。デッキはカードの配列や、シャッフルやドローなどのメソッドを持つ。

- 各オブジェクトに対応するクラスを定義する。
例）Cardクラス、Deckクラス、Playerクラス、Dealerクラス、Gameクラス。

- クラス間の関係や継承を考える。
例）PlayerクラスとDealerクラスは共通の属性や振る舞いを持つので、親クラスとしてHandクラスを定義して継承する。

- ゲームのルールや流れに沿って、メインの処理を記述する。
例）ゲームの開始時にデッキをシャッフルしてプレイヤーとディーラーにカードを配る。プレイヤーがヒットやスタンドなどの選択を行い、ディーラーが自動的にカードを引き、勝敗を判定する。

手順をAIに確認しました。
![スクリーンショット 2023-04-20 1.28.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919895/6d40c65c-3214-f2a6-88ff-06fe140036f0.png)

このあと質問攻めにあいました。

# 参考文献

Ruby公式リファレンス
プロを目指す人のための Ruby入門 改訂2版
オブジェクト指向でなぜつくるのか 第3版
オブジェクト指向設計実践ガイド: Rubyでわかる進化しつづける柔軟なアプリケーションの育て方

AIが知りたがっていたものです。
![スクリーンショット 2023-04-20 1.34.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919895/6c62ec22-6c30-2f0b-ae66-2b4dcf5c6d69.png)

# 次回予告

コードを晒します。
リファクタリング中です。

:::note info
最後までお読みいただき、ありがとうございました。
あなたの健康とますますの発展をお祈りしています🙏

よろしければ、こちらにも遊びにきてください。
<a href="https://twitter.com/tsu_eK4">twitter</a>
<a href="https://github.com/oshibas">GitHub</a>
:::
RubyでAtCoder ABC299(A, B, C)を解いてみた

# はじめに
Webエンジニアを目指して、RubyやRailsをいじってます。
今回は、RubyでAtCoder ABC299のA, B, Cを解きました。備忘録として解き方をまとめていきたいと思います。

# A - Treasure Chest
https://atcoder.jp/contests/abc299/tasks/abc299_a
```ruby:a-299.rb
gets
s = gets.chomp.chars
l = s.index("|")
r = s.rindex("|")
mid = s.index("*")
puts l < mid && mid < r ? "in" : "out"
```
<追記>
コメントでいただいた別解になります。
```ruby:別解
gets
str = gets.chomp

puts /\|(.*)\|/.match(str)[1].include?("*") ? "in" : "out"
```
## 解説
`|`は2回しか出現しないことを利用して、indexメソッドとrindexメソッドを使うことで右側と左側それぞれの`|`の位置を取得することができます。後は、`*`の位置が取得した`|`の間にあればin、なければoutを出力します。

# B - Trick Taking
https://atcoder.jp/contests/abc299/tasks/abc299_b
```ruby:b-299.rb
n, t = gets.split.map(&:to_i)
c = gets.split.map(&:to_i)
r = gets.split.map(&:to_i)

if c.include?(t)
    array = []
    c.each_with_index do |factor, index|
        next if factor != t
        array << index
    end

    val = 0
    array.each do |index|
        val = [val, r[index]].max
    end
    puts r.index(val) + 1
else
    array = []
    c.each_with_index do |factor, index|
        next if factor != c[0]
        array << index
    end

    val = 0
    array.each do |index|
        val = [val, r[index]].max
    end
    puts r.index(val) + 1
end
```
<追記>
コメントでいただいた別解になります。
```ruby:別解
Card = Struct.new(:player, :color, :value)

n, t = gets.split.map(&:to_i)
cs = gets.split.map(&:to_i)
rs = gets.split.map(&:to_i)

cards = (1..n).zip(cs, rs).map { |i, c, v| Card.new(i, c, v) }
find_player = ->(color) {
  cards.select { _1.color == color }.max_by(&:value).player
}
puts cs.include?(t) ? find_player.(t) : find_player.(cs[0])
```
## 解説
cにtが含まれているかどうかにより場合分けします。valとして最大となる値を順次更新しておき最後に出力することで実装することができます。

# C - Dango
https://atcoder.jp/contests/abc299/tasks/abc299_c
```ruby:c-299.rb
# 修正前
gets
s = gets.chomp
if s.include?("-") && s.include?("o")
    s = s.split("-")
    puts s.max.size
else
    puts -1
end
```
```ruby:c-299.rb
# 修正後(コメントありがとうございます！)
n, t = gets.split.map(&:to_i)
c = gets.split.map(&:to_i)
r = gets.split.map(&:to_i)

define_method(:find_player) do |color|
    array = []
    c.each_with_index do |factor, index|
        next if factor != color
        array << index
    end

    val = 0
    array.each do |index|
        val = [val, r[index]].max
    end
    r.index(val) + 1
end

puts c.include?(t) ? find_player(t) : find_player(c[0])
```
<追記>
コメントでいただいた別解になります。
```ruby:別解
n = gets.to_i
str = gets.chomp

bou = (0...n).select { str[_1] == "-" }
search = ->(bou) {
  return -1 if bou.size < 1
  ary = ([-1] + bou).each_cons(2).map { _2 - _1 }.select { _1 >= 2 }
  ary.max&.pred || -1
}
tmp1 = search.(bou)
tmp2 = search.(bou.map { n - _1 - 1 }.reverse)
puts [tmp1, tmp2].max
```
## 解説
sが`-`と`o`を含んでいるかどうかで場合分けをします。含んでいれば連結している`o`の最大の大きさを出力し、含んでいなければ-1を出力します。

https://qiita.com/shoya15/items/50fd17e37d7c64f2b166
Windowsスキーである僕のためのよく使うExcel機能とショートカット一覧

Ctrl + s（保存）のような一般的に浸透してそうなものは省いています。たぶん。
Shiftキー併用で逆の設定ができるもの多し。
例）Ctrl + 9:選択行の非表示
　Ctrl + Shift + 9:選択行の再表示

また以前のOfficeバージョンのリボンアクセスコマンドとかあり
例）Alt + v, z:ズーム選択

# 機能とショートカット一覧

|機能名|ショートカット|コメント|
|:-|:-|:-|
|直前操作の繰り返し|F4|
|数式内の参照→絶対参照→相対参照の切り替え|F4|セル内(編集モードで)|
|セルの書式設定|Ctrl + 1|
|行の非表示|Ctrl + 9|
|列の非表示|Ctrl + 0|
|グループ化|Alt + Shift + 右矢印キー|行を選択すれば行が、列を選択すれば列がグループ化される|
|グループ化解除|Alt + Shift + 左矢印キー|行を選択すれば行が、列を選択すれば列がグループ化される|
|テーブルの作成|Ctrl + t|
|クイック分析 Ctrl+ q|データが一覧化されている任意セルを選択しながら。グラフ化や合計やデータバー付与時に使う|
|ピボットテーブル|Alt + n, v t|
|ページ設定 1x1|Ctrl + p, Alt + p g f|横1x縦1のペラ１枚が見やすい|
|クイックアクセスツールバー|Alt + 1 ～ 9 ...|
|オプション表示|Alt + f, t|
|フィルター設定|Ctrl + Shift + l か Alt + d, f f|
|ズーム選択|Alt + w, q か Alt + v, z|
|選択範囲に合わせて拡大/縮小|Alt + w, q f か Alt + v, z f|
|ウィンドウ枠の固定|Alt + w, f f|
|シート追加|Shift +F11|
|シート名の変更|Alt + h, o, r|
|ページダウン/アップの横スクロール|Alt + PageUp/PageDown|
|セル外枠線|Ctrl + Shift + 6|
|セル枠線削除|Ctrl + Shift + _|
|取消線|Ctrl + 5|セル内で選択した一部箇所に取消線付けも可|
|日付入力|Ctrl + ;|
|時刻入力|Ctrl + :|
|一つ上のセルをコピー|Ctrl + d|範囲選択で複数セルへの反映可能|
|一つ左のセルをコピー|Ctrl + r|範囲選択で複数セルへの反映可能|
|行選択|Ctrl + space||
|列選択|Shift + space|全角モードだとだめ|
|セルの挿入|Ctrl + Shift +|選択範囲によって行/列の追加可能|
|セルの削除|Ctrl + -||
|オブジェクトの選択|Alt + h, f d o|
|（オブジェクトを）枠線に合わせる|Alt + p, a a p|

# 番外編

## Excelオンライン

|機能名|ショートカット|コメント|
|:-|:-|:-|
|リボンアクセス|Windowsキー + alt|
|シート切り替え|Ctrl + Alt + PageUP/DOWN|
M1チップのMacでRubyをインストールしてみた

# 問題点
MacにはRubyが標準でインストールされているのですが、最新バージョンをインストールしたい…。
そこでパッケージマネージャのHomebrewをインストールして、さらにrbenvをインストールしてからRubyを入れようとしたらエラーが出てしまいました。
どうやら原因はM1チップにあるようなので解決方法を書いていきます。

# 前提
### １． 「M1チップのMac」と「IntelチップのMac」は環境が違う
筆者は従来、Intelチップが搭載されたMacを使用していました。しかし、少し前に高性能のM1チップが内蔵されたMacが新しく発売されたので買い替えて使用してきました。
今回、以前と同じような手順で言語をインストールしようとしたらエラーが出てしまい、以下のことがわかりました。

- 「M1チップのMac」では、rbenvでruby 3.2.2がインストールできない。（２０２３年４月８日時点）
- 「IntelチップのMac」では上記をインストールできる。

これらは、プログラムを動かす環境の違いによって生じるものです。

### ２．環境がRosseta上なのか、ARMアーキテクチャ上なのかを把握する
アップルシリコンは、ARMアーキテクチャと呼ばれる命令セットを持つチップのことを指します。ソフトウェアによっては、ARMアーキテクチャ上では動かないものが存在します。今回のRubyの最新バージョンがそれに該当しました。それを解決するために、Rossetaと呼ばれる、アーキテクチャを変換する技術が用意されています。このRosettaを使用することでARMアーキテクチャ上では動かないソフトウェアを動かすことができます。
M１チップのMacで最新バージョンのRubyをインストールするためにはRosetta上でインストールを行う必要があるので、今現在どの環境にいるのかを確認しておきます。確認するコマンドは後述します。

# 解決方法
### 1．現在どちらの環境でプログラムを動かそうとしているのかを確認する
ターミナルを開いて今現在Rosseta上にいるのか、それともARMアーキテクチャ上にいるのかをコマンドを叩いて確認しましょう。
使用するコマンドは以下のとおりです。
```
％ uname -m
```
- `arm64`と出力されればARMアーキテクチャ上
- `x86_64`と出力されればRosseta上

の環境にいるということになります。筆者の場合は`arm64`と出力されたのでARMアーキテクチャ上にいたということになります。そのため、最新バージョンのRubyをインストールすることができませんでした。
それでは、これを解決するために環境をRosseta上に移していきましょう。

### 2．コマンドで簡単にRosseta⇔ARMアーキテクチャを切り替えられるようにする
今後簡単に切り替えられるようにするために、`.zshrc`ファイルを編集してコマンド操作できるようにしておきます。`.zshrc`ファイルは、ターミナルを開くときに最初に読み込まれるファイルです。ホームディレクトリで以下のコマンドを叩いて`.zshrc`ファイルを開きましょう。
```
％ open ~/.zshrc
```
標準ではテキストエディタで開かれると思います。実際に編集していきましょう。筆者は書き方がわからなかったので、`_lambda314`さんという方の以下の記事を参考にさせていただきました。
https://zenn.dev/_lambda314/articles/63b851221a7016

```~/.zshrc
if (( $+commands[arch] )); then
  alias a64="exec arch -arch arm64e '$SHELL'"
  alias x64="exec arch -arch x86_64 '$SHELL'"
fi

function runs_on_ARM64() { [[ `uname -m` = "arm64" ]]; }
function runs_on_X86_64() { [[ `uname -m` = "x86_64" ]]; }

BREW_PATH_OPT="/opt/homebrew/bin"
BREW_PATH_LOCAL="/usr/local/bin"
function brew_exists_at_opt() { [[ -d ${BREW_PATH_OPT} ]]; }
function brew_exists_at_local() { [[ -d ${BREW_PATH_LOCAL} ]]; }

setopt no_global_rcs
typeset -U path PATH
path=($path /usr/sbin /sbin)

if runs_on_ARM64; then
  path=($BREW_PATH_OPT(N-/) $BREW_PATH_LOCAL(N-/) $path)
else
  path=($BREW_PATH_LOCAL(N-/) $path)
fi
```
上記のコードをファイルに追加すると、Homebrewをアーキテクチャ毎に切り替えて使用できるようになるみたいです。切り替えは、`x64`のコマンドでRosseta上、`a64`のコマンドでARMアーキテクチャ上に環境変更できます。

実際に自分もターミナルで`x64`のコマンドを叩いてから、
```
％ uname -m
```
で確認すると、無事`x86_64`と出力されてRosseta上に移ることができました。

### 3．Rosseta上で最新バージョンののRubyをインストールする
Rosseta上に移れたところで、実際にRubyをインストールしていきましょう。
以下のコマンドで現時点（2023年4月8日）で最新のruby 3.2.2をインストールします。
```
％ rbenv install 3.2.2
```
インストールが終わったら、次に以下のコマンドでインストールされたRubyのバージョンを確認します。
```
％ rbenv versions
```
次に、以下のコマンドで3.2.2に切り替えます。
```
％ rbenv global 3.2.2
```
最後に、以下のコマンドで現在のRubyが3.2.2であるかを確認しましょう。
```
％ ruby -v
```

無事に確認できたら最新バージョンのRubyのインストール完了です。
ちょっとした key-value 記録に LMDB

Rubyでちょっとしたkey-value記録をするのにLMDBを使っています。

## インストール
```zsh
gem install lmdb
```

## 準備
私自身は、LMDBのデータベースはプロジェクトに一つ作ることにし、それは`lmdb`というディレクトリに作るということにしようと思っています。そのディレクトリを作ればLMDBの準備は完了のようです。

```zsh
mkdir lmdb
```

## 書き出し
書き出しをするロジックは次のような感じです。

```ruby
require 'lmdb'

$db = LMDB.new('lmdb', :mapsize => 100 * 1024 * 1024).database
$db[key] = value
```

## 読み出し
列挙読み出しをするロジックは次のような感じです。

```ruby
require 'lmdb'

$db = LMDB.new('lmdb', :mapsize => 100 * 1024 * 1024).database
$db.each {|k, v|
  p k, v
}
```
Flutter 画像をグラデーションで透過させる

# 結論（コード）
```dart
import 'package:flutter/material.dart';

class APage extends StatelessWidget {
  const APage({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            Expanded(
              flex: 5,
              child: Container(
                width: double.infinity,
                // ①背景画像のセット
                decoration: const BoxDecoration(
                  color: Colors.transparent,
                  image: DecorationImage(
                    image: AssetImage('assets/background.jpg'),
                    fit: BoxFit.cover,
                  ),
                ),
                // ②Containerを重ねる
                child: Container(
                  decoration: const BoxDecoration(
                    // ③グラデーション
                    gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      // ④透明→白
                      colors: [
                        Colors.transparent,
                        Colors.white,
                      ],
                    ),
                  ),
                  child: const Center(
                    child: Text('グラデーション部分'),
                  ),
                ),
              ),
            ),
            const Expanded(
              flex: 5,
              child: Center(child: Text('下部')),
            ),
          ],
        ),
      ),
    );
  }
}
```
# スクショ
![simulator_screenshot_6BDFD84D-15EE-45EA-9796-6F223489C5E8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119135/b3dc50fa-c271-4232-d88e-942cb9017319.png)

# ポイント

1. Containerの背景画像として画像を表示する
1. 背景画像をセットしたContainerの子要素にContainerをセットする
1. BoxDecorationを使ってグラデーションの設定をする
1. グラデーションの色の設定をtransparent(透明)からwhite(白)にする

# 背景
かっこいいログイン画面を作ろうと思っていたら、背景画像の下側をグラデーションかけて徐々に白くなっていたものがあったので、真似しようと思ったが、あまりググっても出てこず、苦戦した。Containerを重ねることで実現できることがわかったので、そのように実装した例。
HTML5 プロフェッショナル認定試験レベル1　勉強記録-1

Webの基礎知識

○リクエストメソッド
**`クライアントからサーバに送信される実行させたいアクションを示す。`**
★主に『リソースを要求する「GET」』 『送信を示す「POST」』が頻繁に使用される。

○ステータスコード
**`リクエストが成功したかを示す数値。`**
★100番台〜500番台まで、5つのグループがある。

○Basic認証
**`HTTPで実装されている認証方式の一つ。`**
★Basic認証は、ユーザ名・パスワードをハッシュ値化せずに送信するため、盗聴や改ざんの危険がある。
その為、HTTPS通信を用いることが望ましいが必須ではない。
※ハッシュ値化とは
改ざん検出などに用いる技術。
一定のアルゴリズムを用いて、元データからハッシュ値を生成する。
元データに少しでも変更があれば、別のハッシュ値が生成される。
そのためデータを受信した側のサーバでは、あらかじめ保持しているデータをハッシュ値化することで、送信されたデータとの突き合わせが可能。

○HTTPクッキー
**`サーバーから送信された少量のデータをブラウザにて保存する`**
★保存できるのは、通常4KB程度
★データの有効期限を設定する必要がある
→ 大容量且つ、永続的に保存が必要な場合は、WebStoregeを使用
★HTTP・HTTPSどちらでも送受信可能
★ブラウザ側で、JavaScriptを用いて、操作も可能
★セキュリティの観点で、HTTPでの送受信やJavaScriptで操作したくない場合
①Secure属性を追加
→ HTTPS通信でのみ、HTTPクッキーが使用可能になる
②HttpOnly属性を追加
→ JavaScriptから、HTTPクッキーへアクセスできなくなる

○Digest認証
**`ユーザ名とパスワードをMD５、またはSHA−２でハッシュ値化しWebサーバに送信する`**
★HTTPで実装されている認証方式の一つ
★Basic認証よりも安全
★Basic認証、Digest認証以外の独自の認証を用いる事も可能
→ 認証機構自体を自作するとセキュリティホールのリスクがある
その為、Webアプリを構築している言語、フレームワークに備わっている認証を機構を利用する方がいい
【SwiftUI】WebViewにローディング画面を表示する

# はじめに
WebViewの読み込み中にローディング画面を表示させます。

WebViewをSwiftUIで使うためのコードは以下の記事のものを使用します。

https://qiita.com/SNQ-2001/items/d86685481b4697e81e38

|くるくる|進捗バー|
|-|-|
|![Simulator Screen Recording - iPhone 14 Pro - 2023-04-23 at 21.32.28.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/d75ff328-c950-9660-2dea-d3603842f0cd.gif)|![Simulator Screen Recording - iPhone 14 Pro - 2023-04-23 at 21.34.37.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/3668f87b-d85e-03c7-d6a0-832ae0e6a28a.gif)|

# くるくる
```swift
import SwiftUI
import Combine
import WebKit

struct ContentView: View {
    @StateObject var viewModel = ViewModel()
    var body: some View {
        WebView(url: URL(string: "https://qiita.com/SNQ-2001")) { webView in
            viewModel.loadingObserver(webView)
        }.overlay {
            if viewModel.isLoading {
                ProgressView().progressViewStyle(.circular)
            }
        }
    }
}


final class ViewModel: ObservableObject {
    @Published var isLoading = false
    
    func loadingObserver(_ webView: WKWebView) {
        webView.publisher(for: \.isLoading)
            .assign(to: &$isLoading)
    }
}
```

# 進捗バー
```swift
import SwiftUI
import Combine
import WebKit

struct ContentView: View {
    @StateObject var viewModel = ViewModel()
    var body: some View {
        ZStack(alignment: .top) {
            WebView(url: URL(string: "https://qiita.com/SNQ-2001")) { webView in
                viewModel.loadingObserver(webView)
            }
            
            if viewModel.isLoading {
                ProgressView(value: viewModel.estimatedProgress).progressViewStyle(.linear)
            }
        }
    }
}


final class ViewModel: ObservableObject {
    @Published var isLoading = false
    @Published var estimatedProgress = 0.0
    
    func loadingObserver(_ webView: WKWebView) {
        webView.publisher(for: \.isLoading)
            .assign(to: &$isLoading)
        
        webView.publisher(for: \.estimatedProgress)
            .assign(to: &$estimatedProgress)
    }
}
```

# おわり
UIKitでWebViewにローディング画面を表示する記事がいくつかありましたが、SwiftUIでの記事は見つからなかったので記録しておきます。
【Android】TextViewのTextの一部だけ大きくする【kotlin】

# 実践



        val textView = findViewById<TextView>(R.id.text_view)
        val spanText = SpannableString(textView.text)
        spanText.setSpan(RelativeSizeSpan(2f), 6, 13, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
        textView.text = text


↓xml側でtextSizeを40spでした場合

![Screenshot_2023-04-23-21-12-43-75_7775b79a7312c35cfd35e081660950c8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2394054/1f70d0f4-3ceb-5436-9cae-78ffd2f840ae.png)


# 説明
SpannableString（）内に　サイズを変更したい文字列を渡します。
それに対してsetSpan（）することで　文字に変化を与えることができます。
第一引数に　**RelativeSizeSpan**で大きさを指定します。
RelativeSizeSpanは　**比率に基づいて**サイズを変更できるSpanで、上の例ではRelativeSizeSpanはに(2f)を渡すことで ほかの文字の２倍のサイズになっています。
特にテキストのサイズについて指定をしていない場合は、XML上で指定したTextSizeの２倍になります。
第二引数に開始位置　第三引数に終わり位置　（スペースも１文字分としてカウント）

Span内に動的に文字列を追加したい場合　追加した文字にもSpanを含ませたい場合は
```
Spannable.SPAN_EXCLUSIVE_INCLUSIVE 
```
含ませない場合は
```
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
``` 
を第四引数に指定します。

# 参考
http://y-anz-m.blogspot.com/2016/01/relativesizespan.html

https://developer.android.com/guide/topics/text/spans?hl=ja

https://developer.android.com/reference/android/text/style/RelativeSizeSpan
Ruby学習初学者が躓いたポイント（個人的な備忘録）


僕がRuby学習で躓いたポイントを備忘録として残しておきます。
もし間違いがあったら指摘をして頂けると助かります。:pray:

・インスタンスを作った時の引数がinitializeメソッドの引数とリンクします

```ruby
classVendingMachine
 definitialize(manufacturer_name)
   @manufacturer_name=manufacturer_name
   @deposit_coin=0
 end
end

vending_machine=VendingMachine.new('サントリー')
putsvending_machine.press_button

#manufacturer_nameとサントリーがリンクします
```


・メソッドの定義のところと、呼び出す側のところの両方で
「deposit_coin()」 と書かれている時、()の中がリンクすると考えます。
定義するところと呼び出す側の両方に同じメソッドを書いて、引数を作れば勝手にリンクされます。

・メソッドに引数として英単語を付けたら、その引数は変数として扱うことができます。deposit_coin（amount）など。

・単一責任の原則
→他のクラスの変数を参照するのはOKですが、担当領域を超えた変数を扱ったり、書き換えたりすることは良くないです。
例えば、自動販売機のプログラムを作る場合、
「自販機クラス」はコイン投入機能、ボタン押したら商品出てくる機能の担当。
「アイテムクラス」は商品の名前と価格のデータを保持する担当。
のような形で分けることが望ましいです。

・単一責任の原則に基づく設計では、外部からのアクセスを必要としないインスタンス変数については、セッターを定義しないことが望ましいです。

・アクセサはインスタンス変数にアクセスするための公開メソッドです。
→読み出すのがゲッターメソッド。書き込むのがセッターメソッド。アクセサメソッドはその総称です。

・attr_readerはゲッターを設定するために使います。

・チャットGPTについてです。GPT３よりもGPT４の方が生徒が躓いている場所を察する能力が増していると感じます。
イメージ的には普通の家庭教師と優秀な家庭教師の違いに似ています。
何が分からないかも分からない状態を脱する時間の時短になると思いました。
→逆に言えば自力でいろいろ試しながらコードのアンチパターンを蓄えることをしなくなってしまうデメリットもあるのかなと思いました。遠回りをしない分だけ理解が浅くなってしまうリスクがありそうです。

・initializeメソッドで定義する引数の数と、初期化するインスタンス変数の数は一致する必要はありません。引数が1つでも、複数のインスタンス変数を初期化することができます。

・クラスを分ける分けないの判断は、将来的に新しい機能が加わる可能性があるなら分けておくべきです。

・インスタンス変数の初期値は、何かしらの数字を持つ場合は定義しておく必要があります。
例えば何かの商品のクラスを作成する時に、在庫数が初めから30と分かっていたら初期値を30にしても良いです。

・Rubyではクラス名はキャメルケースが一般的です。スネークケースは使いません。

・新しいサブクラスを作る時に引数が1つでも変わる場合はinitializeメソッドをオーバーライドする必要があります。

・case文は、ある値に対して複数の条件を比較する際に特に便利です。if文との使い分けができると良いです。

・vscodeでrubyのファイルを作る一番早い方法
vscodeの「ファイル」→「新しいファイル」から作成して、拡張子rbを名前に入れて保存するだけでできます。
保存先は気をつけましょう。

・例外処理について。
1つのbeginブロックに対して複数のrescueを入れることができます。
また、1つのrescueの中で複数のエラークラスを指定して処理することもできます。
どちらの方法を選ぶかは、エラー処理がそれぞれのエラークラスに対して異なるか、共通の処理があるかによって決定されます。
①エラー処理がそれぞれのエラークラスに対して異なる　→　1つのbeginブロックに対して複数のrescue
②共通の処理がある　→　1つのrescueの中で複数のエラークラスを指定して処理する

・rescueの中でif文を使うことは可能ですが、複数のエラークラスが関与する場合や、エラー処理が大幅に異なる場合は、複数のrescueブロックを使った方がコードが読みやすくなります。


以上、個人的な備忘録でした～:pray:
rubyのdo...endについて

## **はじめに**
Javaを少しだけ学習した身で、
rubyの繰り返し処理をみると、
英語が多く、（・・）？？？ 　となりましたが、
謎が解けたので記録します。

``` :rubyの基本の繰り返し処理表記
numbers = [1, 2, 3, 4]
sum = 0
numbers.each do |n|
    sum += n
end
puts sum
```

##  **結論**
### **do ... end　は ブロックの役割**
仮にJavaScriptを見てみましょう
`sum += numbers[i]`が `{ }` で囲まれています。（{ } = ブロックです）
```sample.js:
var numbers = [1, 2, 3, 4]
var sum = 0
for (var i = 0; i < numbers.length; i++){
sum += numbers[i]
}
console.log(sum)
```
#### **JavaScriptの { } と　do end は同じ役割**
``|n| sum += n``が``do...end``に囲まれています

```sample.rb:
numbers = [1, 2, 3, 4]
sum = 0
numbers.each do |n|
    sum += n
end
puts sum
```

#### ``|n| sum += n``は``{...}``で囲んでも使えます◎

****
**ひとやすみ 🍵**
****
**こうみると、rubyはeachメソッドが優秀かもですが、**
**最近のJavaScriptはforEachメソッドが使え、rubyと同じくらい簡単に書けます。**
```sample.js:
const numbers = [1, 2, 3, 4]
let sum = 0
numbers.forEach(function(n){ sum += n })
console.log(sum)
```

#### **javaで、配列をfor文で取り出す処理は、**
#### **下記がスタンダードなのだろうかと思いつつ、サンプルで書きました…**
```sample.java
public class Practice {
	public static void main(String[] args) {
		String[] strArray = { "t", "a", "m", "u", "r", "a" };
		for (int i = 0; i < strArray.length; i++) {
			System.out.print(strArray[i] + " ");
		}
		System.out.println();
	}
}
```
**ps : javaにもforEachメソッドが存在しましたが、**
**java.util.ArrayList;と java.util.List;をimportして使う・・・👀**
**ネストfor文、拡張for文、forEachメソッド・・・配列と繰り返し処理、使い所とか気になりました**
#### **疑問はありつつ、記事は終盤へ**
## **ちなみに、「do...end 」は改行しなくても使えます💡**
```sample.rb:
numbers = [1, 2, 3, 4]
sum = 0
numbers.each do |n| sum += n end
puts sum
```
#### **JavaScriptもJavaも、改行しなくても使えます◎**
**javaは下記でも実行できます！（要スクロール）**
```sample.java:
public class Practice {public static void main(String[] args) {String[] strArray = {"t", "a", "m", "u", "r", "a"};for (int i = 0; i < strArray.length; i++)  {System.out.print(strArray[i] + " ");}System.out.println();}}

```
**なぜだ・・・**
**rubyとJavascriptを見ていると、{　}を区切りに、改行する必要があるんだろうな〜**
**ブロックの偉大さ・・・**
**スコープとブロックの違いも気になりつつ**
**違う視点で見ると、javaはclassを使うことが基本な言語なんだなと思ったり・・・**
#### **最後に、Pythonをかじったことのある私は気になりました。インデントがブロックだと改行は必須だよね…**
#### **結論、Pythonはインデントがブロックになっているので改行は必須です**

## **言語によって違うブロックの書き方**
- Java JavaScript : 波カッコ
- Python : インデント
- Ruby : キーワード・波カッコ

まるで **個性豊かなカラフル** な世界だと感じたエンジニア見習いでした!

## **参考**
[プロを目指す人のためのRuby入門](https://gihyo.jp/book/2017/978-4-7741-9397-7)
**(記述足りなかったらすみません:sob:)**
[無断でネットや書籍の内容を丸写しするのはやめよう](https://qiita.com/jnchito/items/215c2d51599eb29adabc)
[技術書を書きたいITエンジニア必見！？「プロを目指す人のためのRuby入門」の舞台裏](https://blog.jnito.com/entry/2017/12/15/054718)
【iOS】MacでiOSのエミュレーターでピンチインピンチアウトの操作を行う方法

iOSのエミュレーターでピンチインピンチアウトの操作方法です。

主にマップの操作をすると時などに使用したりしますね！
自分がMacで作業をしているのでMacでの操作方法となります。

操作は簡単で、controlを押しながら画面をクリックして操作するだけです。
ぜひ必要になった時は使ってみてください！
【企画からシステム運用まで】システム開発に必要な業務とは？

こんにちは、システム開発に必要な業務についてまとめてみました。企画からシステム開発までの一連のプロセスを通じて、システムを開発し、運用するためには、以下のような業務が必要です。

## 1.ビジネスニーズの定義
- ビジネスの課題や機会を特定し、システムによって解決または支援できる領域を特定する
- 企画書やプロジェクト提案書などを作成する

## 2.要件定義
- ユーザーが必要とする機能や要件を特定する
- 顧客との面談やユーザー調査、アンケート調査などを行う
- 要件定義書を作成する

## 3.システム設計
- アーキテクチャの設計、データベースの設計、画面やレポートの設計などを行う
- システムが必要とするテクノロジーやツールを選定する

## 4.システム開発
- プログラマーがコードを書き、テスターがテストを実施する
- 品質管理が行われる

## 5.ユーザーテスト
- ユーザーがシステムを使いやすいかどうかをテストする
- ユーザーがフィードバックを提供する機会を提供する

## 6.デプロイ
- 顧客やユーザーが使用できるようにシステムをデプロイする
- 導入計画やトレーニング計画を策定する

## 7.メンテナンス
- システムのメンテナンスを行う
- バージョンアップや不具合修正などを行う

## 8.システムの改善
- ユーザーフィードバックを収集し、システムの改善につなげる
- システムの改善を継続的に行う

## 9.システムの運用
- システムが実際に運用される段階に入る
- システムのモニタリングやトラブルシューティング、保守作業などを行う

## 10.システムの監査
- システムが運用されるにつれ、セキュリティやコンプライアンスなどの面で監査が必要になる場合がある
- 監査を通じてシステムが適切に機能しているかどうかを確認し、改善点を特定する


以上が、企画からシステム開発を行う場合の一般的なロードマップの例です。
実際のプロジェクトによっては、各ステップの詳細や順序が異なる場合があります。また、アジャイル開発やDevOpsなど、近年の開発手法や文化に合わせた開発手法を取り入れることもあります。
オブジェクト指向について学んだこと

# オブジェクト指向の本質：「複雑なコードを秩序立てて整理すること」

オブジェクト指向は「オブジェクト単位」で複雑のコードの整理をすることによって、プログラム全体の保守性や再利用性を高められるようになる。

## オブジェクト指向における三大要素: ①クラス（カプセル化）、②ポリモーフィズム、③継承

### ①クラス：*「まとめて、隠して、たくさん作る仕組み」*-- オブジェクトを生成するための設計図

クラスは、関連する変数やメソッドを1つの単位にまとめ、他のクラスからは隠蔽することができる仕組み。これにより、部品の数が減り、メソッドの名前づけが楽になる。また、privateやprotectedといったアクセス制限を用いることで、グローバル変数を使わずにプログラムを書くことができる。

クラス設計のポイントは「単一責任の原則」。オブジェクト指向は「コードをいかに秩序立てて整理するかであり、クラスはその中で整理のための仕切りを提供するもの。洋服を整理するときの箪笥のような役割。
箪笥は1段目が下着、2段目がズボン、3段目がシャツとそれぞれの段に応じて、収納されるものを分けている。それと同様に一つのクラスには一つの役割を持たせ全体の見通しを良くする。そうすることで変更もしやすくなり、再利用もしやすくなる。


### ②ポリモーフィズム：*「共通メインルーチンを作るための仕組み」*--

ポリモーフィズムは、複数のクラスに共通するメソッドを作成し、それを利用することができる仕組み。これにより、コードの再利用性が向上する。

ポリモーフィズムのポイントは

### ③継承：「クラスの共通部分を別クラスにまとめる仕組み」

継承は、既存のクラスから新しいクラスを作成することができる仕組み。継承を利用することで、既存のクラスの共通部分を別のクラスにまとめることができ、コードの再利用性が向上。


## オブジェクト指向までの歴史

①機械語：黎明期、限られた人のみが操れる
②アセンブリ言語：機械語を人間がわかりやすい記号に置き換えて表現
③高級言語：人間に理解しやすい仕方での表現

①〜③まではあくまで「いかに親しみやすい言語で表現できるか」として進化

④構造化プログラミング：GOTO分の廃止、順次進行、条件分岐、繰り返しの3つの構文だけで表現

④からは「保守性を向上させるための進化」となる

＊課題として①グローバル変数②貧弱な再利用が残る

### OOPの特徴
・グローバル変数を使わずにすませる仕組み
・共通のサブルーチン以外の再利用を可能にする仕組み

### OOPプログラミングの内部の仕組み
プログラムの基本的な実行方式
①コンパイラ方式：プログラムに書かれた命令をコンピュータが理解できる機械語に翻訳して実行⇨実行速度が速い
②インタプリタ方式：ソースコードに書かれたプログラムの命令をその場で逐次解釈しながら実行⇨同じプログラムを異なる実行環境で行える
③中間コード方式：同じプログラムを異なる実行環境で効率よく動かせる

スレッドとは？：プログラムの実行単位、複数のスレッドを同時並行で処理することで、CPUリソースを効率的に活用できる

### メモリの使い方：静的領域、ヒープ領域、スタック領域
①静的領域・・プログラムの開始時に確保され、移行プログラムが終了するまで配置が固定される領域。グローバル変数やコード情報が入る
②ヒープ領域・・プログラムの実行時に動的に確保するためのメモリ領域
③スタック領域・・スレッド制御のために使う領域

＊メソッドに書かれたコード情報は１クラスに１つだけロードする（静的領域）

・インスタンス生成時にはメモリはヒープ領域に割り当てられる
＊インスタンスを格納する変数にはインスタンスそのものではなく、インスタンスの「ポインタ」が格納される。
＊OOPを使って書いたプログラムは有限のメモリ領域であるヒープ領域を大量に使って動く

（参考）平澤章著　『オブジェクト指向でなぜ作るのか』日経BP 2022年
初心者でもわかる！プロジェクト計画書の作成方法

プロジェクト計画書は、プロジェクトのスコープや目的、計画、スケジュール、コスト、品質など、プロジェクトの全体像を定義する資料です。しかし、初心者にとっては難解なもののように感じられるかもしれません。そこで、初心者向けにプロジェクト計画書の作成方法を解説します。

## 1.プロジェクトの目的を明確にする
プロジェクト計画書の最初に定義するべきは、プロジェクトの目的です。
プロジェクトが何を達成するために行われるのかを明確にしましょう。目的が定まらないと、プロジェクトのスコープや目標を定義することができません。

## 2.プロジェクトのスコープを定義する
次に、プロジェクトのスコープを定義します。
どのような成果物が必要なのか、どのような範囲でプロジェクトを進めるのかを明確にしましょう。スコープを明確に定義することで、プロジェクトチームがプロジェクトの進行を進めやすくなります。

## 3.プロジェクトの目標を設定する
プロジェクトの目標を設定しましょう。
プロジェクトで達成するべき成果物や、プロジェクトを終了するまでに達成するべき目標を明確にしましょう。目標を定義することで、プロジェクトの進行状況や成果物の完成度を確認することができます。

## 4.スケジュールを作成する
プロジェクトのスケジュールを作成しましょう。
プロジェクトの期間や、各タスクの所要時間、マイルストーンの設定などを明確に定義します。スケジュールを明確に定義することで、プロジェクトの進行状況を把握することができます。

## 5.コストを見積もる
プロジェクトのコストを見積もりましょう。
プロジェクトに必要な人員や材料、ツールなどのコストを見積もり、プロジェクトの予算を決定します。コストを明確に定義することで、プロジェクトの予算管理やコスト削減策の立案などを行うことができます。

## 6.品質管理計画を策定する
プロジェクトの品質管理計画を策定しましょう。
品質管理の目的や基準、品質管理のために必要なツールや手順などを明確に定義します。品質管理計画を策定することで、プロジェクトチームが品質に対する意識を高め、品質向上に取り組むことができます。

## 7.リスク管理計画を策定する
プロジェクトのリスク管理計画を策定しましょう。
プロジェクトにおけるリスクを洗い出し、リスク発生時の対応策や予防策を定義します。リスク管理計画を策定することで、プロジェクトのリスクを最小限に抑えることができます。

## 8.まとめ
以上が、初心者でもわかるプロジェクト計画書の作成方法です。
プロジェクト計画書を作成することで、プロジェクトの目的やスコープ、スケジュール、コスト、品質、リスクなどを明確にし、プロジェクトの全体像を把握することができます。また、プロジェクト計画書は、プロジェクトの進行や成果物の完成度を確認するための指針としても活用できます。

初心者でも理解しやすいよう、分かりやすく、明確に、そして具体的に書くことが大切です。
また、プロジェクト計画書の作成には、関係者とのコミュニケーションも欠かせません。プロジェクトチームや関係者と密に連携し、プロジェクト計画書の作成に取り組みましょう。
初心者でもわかる！システム要件定義書の作成方法

システム要件定義書は、システム開発において重要な資料の1つですが、初心者にとっては難解なもののように感じられるかもしれません。
そこで、初心者向けにシステム要件定義書の作成方法を解説します。

## 1.システムの目的を明確にする
システム要件定義書の最初に定義するべきは、システムの目的です。
何を達成するためのシステムなのかを明確にしましょう。目的が定まらないと、システムの機能や要件を定義することができません。

## 2.機能要件を洗い出す
次に、システムが持つべき機能を定義します。
どのような機能が必要なのか、どのようなユーザー体験を提供する必要があるのかを洗い出しましょう。機能を明確に定義することで、開発チームがシステムの開発を進めやすくなります。

## 3.ユーザー要件を定義する
ユーザーがシステムに求める要件を定義します。
ユーザーがシステムを利用する際に必要な機能や操作性、デザインなど、ユーザーの視点に立った要件を明確にしましょう。

## 4.性能要件を定義する
システムの性能要件も定義する必要があります。
例えば、システムが扱うデータ量や処理速度、応答時間などを明確にすることで、システムの性能を高めるための要件を定義することができます。

## 5.制約事項を定義する
システムには、セキュリティや互換性などの制約事項があります。
これらの制約事項を明確に定義し、開発や運用に必要な情報をまとめましょう。

## 6.開発スケジュールを立てる
システム要件定義書の作成には時間がかかることがあります。
開発スケジュールを立て、タスクの分割や担当者の割り当て、納期などを決定しましょう。

## 7. 品質保証を行う
システム要件定義書の作成には、品質保証も必要です。
システム要件定義書の内容が正確であり、要件に漏れや矛盾がないことを確認するために、レビューやテストを行う必要があります。

## 8.まとめ
以上が、初心者でもわかるシステム要件定義書の作成方法です。
システム要件定義書を作成することで、システム開発における目的や機能、制約事項などを明確にし、開発チームや関係者と共有することができます。
また、システム要件定義書は、システムの設計や開発の際に必要な情報をまとめるため、正確な内容を定義することが重要です。

初心者でも理解しやすいよう、分かりやすく、明確に、そして具体的に書くことが大切です。また、システム要件定義書の作成には、関係者とのコミュニケーションも欠かせません。
開発チームや関係者と密に連携し、システム要件定義書の作成に取り組みましょう。
ChatGPTで始めるJavaScript入門⑯～DOMとjQueryの違い～

# 概要
　4.DOMとjQueryの基本知識　の　DOMとjQueryの違いについて　学習していきます。
　似ていますが、違いがありますので、理解していきます。

　**※無料版なので、誤っている情報もあると思いますが、アウトプットできれば良しとします。**


# DOMとjQueryの違いについて
　単純に、DOMとjQueryの違いを確認していきます。

　【質問】
　DOMとjQueryの違い　について　詳しく教えて下さい

　【回答】
　DOM（Document Object Model）とは、HTMLやXML文書をツリー構造で表現し、
　JavaScriptからアクセスや操作するためのAPI（Application Programming Interface）のことです。
　DOMは、ブラウザがHTMLやXML文書を読み込む際に、それをパースして解析し、
　ツリー構造の形式でブラウザ内部に構築されます。
　JavaScriptからは、このDOMツリーを操作することで、HTMLやXML文書を動的に変更することができます。

　一方、jQueryは、JavaScriptのライブラリの1つで、
　ブラウザで実行されるJavaScriptコードを簡略化することを目的としています。
　jQueryは、DOM操作やイベント処理、アニメーションなどの機能を簡単に使えるように提供します。
　jQueryは、DOMの抽象化層としての役割も果たしており、
　同じDOM APIを使って、より簡潔かつ直感的なコードを書くことができます。

　つまり、DOMはJavaScriptがHTMLやXML文書を操作するためのAPIであり、
　jQueryはDOMをより簡単に扱うためのライブラリです。
　jQueryはDOMを抽象化しているため、より直感的にコードを書くことができますが、
　その代わりに、完全に制御する必要がある場合には、DOMを直接操作することも必要になります。

*****

DOMが操作するためのAPIで、それを簡単に扱えるようにしたのが　jQuery　というライブラリのようです。
次に、具体的な処理の違いを確認します。

*****

　【質問】
　DOMを使った処理とjQueryを使った処理の違い　について　詳しく教えて下さい

　【回答】
　DOMを使った処理とjQueryを使った処理の違いは以下のようになります。

***DOMを使った処理：***

　・DOMはブラウザが提供する標準のAPIであり、
　　JavaScriptを使ってHTMLドキュメントを操作するための手段です。

　・DOMを使う場合、JavaScriptコードを使ってHTML要素を取得し、
　　プロパティを設定したり、新しい要素を作成したりすることができます。

　・DOMを使った処理は、ブラウザのJavaScriptエンジンが提供するAPIを直接使用するため、
　　高度なブラウザの互換性が必要です。

　・DOMを使った処理は、処理が複雑になるとコードが長くなり、可読性が低下する可能性があります。

***jQueryを使った処理：***

　・jQueryは、JavaScriptライブラリであり、
　　DOMをより簡単に扱うための抽象化レイヤーを提供します。
　
　・jQueryを使う場合、セレクターを使用してHTML要素を簡単に取得できます。
　　また、より簡潔で直感的なコードを書くことができます。

　・jQueryは、ブラウザのJavaScriptエンジンが提供するDOM APIをラップするため、
　　ブラウザの互換性が高く、jQueryのコードは多くのブラウザで動作します。

　・jQueryは、アニメーション、イベントハンドリング、AJAX通信などの多くの機能を提供します。

つまり、**DOMを使った処理**は、**細かく制御したい場合に適しています**が、**複雑な処理には不向き**です。
一方、**jQuery**は、DOMを簡単に扱うことができ、多くの便利な機能を提供するため、
より**高度なWebアプリケーションの開発に適しています。**


*****

単純な処理で細かい制御をしたい場合にはDOMで複雑なWebアプリケーションの場合はjQueryという感じでしょうか。
次に、DOMとjQueryで同じ処理を作成してもらい、違いを見ていきます。

*****

　【質問】
　同じ処理をDOMとjQueryで書いてください。

　【回答】
　例として、「id="myButton"」を持つボタンをクリックしたとき、
　id="myDiv"を持つdiv要素に「Hello, World!」を挿入するという処理をDOMとjQueryで書いてみます。

***DOMの場合：***

```javascript:dom.js
<button id="myButton">Click me!</button>
<div id="myDiv"></div>

<script>
  const button = document.getElementById("myButton");
  const div = document.getElementById("myDiv");
  button.addEventListener("click", function() {
    const text = document.createTextNode("Hello, World!");
    div.appendChild(text);
  });
</script>
```

***jQueryの場合：***

```javascript:jQuery.js
<button id="myButton">Click me!</button>
<div id="myDiv"></div>

<script>
  $("#myButton").click(function() {
    $("#myDiv").text("Hello, World!");
  });
</script>
```

処理内容や実行環境によって適した方法が異なりますが、
一般的にはjQueryの方がDOMよりも簡潔かつクロスブラウザー対応が容易であるため、より広く採用されています。
ただし、単純な処理であればDOMを直接操作した方が軽量で高速な場合もあります。
最適な選択をするには、処理の複雑さや実行環境に応じて比較検討を行うことが望ましいです。

*****

DOMとjQueryという2択の場合、基本的にはjQueryを使用することが多いかと思いますが、
パフォーマンスを高めたい場合などはDOMを採用することもありそうです。
初心者向け！アプリ開発に必要な基本的な企画書の作り方

アプリ開発に必要な企画書は、プロジェクトを管理するための基本的な資料です。
アプリ開発においては、企画書を作成することで、開発の目的や計画、予算、マーケティング戦略などをまとめ、開発チームやスポンサーと共有することができます。

以下は、初心者向けにアプリ開発の企画書の作り方のポイントを解説します。

## 1.ターゲット層を決定する
アプリのターゲット層を決定することが重要です。
ターゲット層を明確にすることで、アプリのコンセプトや機能、デザインなどを決定することができます。

## 2.アプリの機能を洗い出す
アプリに必要な機能を洗い出すことが重要です。
アプリの目的に応じて、必要な機能を決定しましょう。

## 3.マーケティング戦略を策定する
アプリのマーケティング戦略を策定しましょう。
どのようなプロモーションや広告を行うのか、どのような価格設定をするのかを考慮し、明確にまとめます。

## 4.アプリのデザインを決定する
アプリのデザインを決定することが重要です。
ターゲット層に合わせたデザインを行い、アプリの利便性を高めましょう。

## 5.開発スケジュールを立てる
アプリの開発スケジュールを立てましょう。
タスクの分割や担当者の割り当て、納期などを決定し、明確にまとめます。

## 6.予算を算出する
アプリの開発費用を算出することで、プロジェクトの財務状況を予測することができます。
開発費用や広告費用、人件費など、細かく算出しておくことが重要です。

## 7.リスクマネジメントを行う
アプリ開発には、様々なリスクが伴います。
リスクマネジメントを行うことで、リスクを予測し、対策を講じることができます。

## 8.結論
企画書の結論では、アプリ開発の目的やメリット、効果を簡潔にまとめ、最後にアピールすることが重要です。
また、今後の展開や改善の方向性についても示しましょう。

アプリ開発においては、企画書の作成に加えて、UI/UXの設計やプログラミングなど、多岐にわたる作業が必要です。初心者にとっては、まずはアプリ開発に必要なスキルや知識を身につけることが重要です。プログラミングスクールやオンライン講座を活用するなど、学習の機会を積極的に活用しましょう。

さらに、アプリ開発には多くの人材が必要です。開発チームを構成し、各々が得意な分野で貢献することが大切です。また、コミュニケーションや進捗管理など、チーム内での役割分担も重要です。

アプリ開発は、多くの工程や課題がありますが、正しい企画書の作成やチームの組織化、スキルの習得など、準備をしっかりと行い、段階的に進めていくことで、成功に近づくことができます。
【Rails】Rails cコマンドを打っても反応がない時


`rails c`コマンドを実行した時に応答がなかった場合の対処法です。

まず起動しているプロセスを確認します
```
$ ps
  PID TTY           TIME CMD
65969 ttys006    0:00.50 spring server | to_do_app | started 11 hours ago   
15687 ttys007    0:00.28 /bin/zsh -il
```
spring serverというプロセスを切断します。
```
$ kill 65969
```

これでコンソールが起動するようになりました。

また、以下の方法でも同じです。
```
$ bin/spring stop
```

### springとは
springはアプリ高速化のためのキャッシュで、`rails c`コマンドを実行するとキャッシュされたアプリケーションが起動します。
私の場合はDB作成前にspringが起動していて、その時キャッシュされたアプリケーションが`rails c`実行時に呼ばれていたためにDBが存在せず、応答がなかったのだと思います。
phpstorm scss が アップロードされない

# scssがcssに変換されない

node.js をインスコして、 phpstorm で alt + F12 を同時押ししてターミナルを開き

```
npm install -g sass
npm install --global less
```

をやる。

これをやっておかないと filewatcher の scss の文字が赤色になっている。


# 自動アップロード

phpstorm 2022.3.3 の場合は、

develoyment > options の skip external changes のチェックを"外す"
ことで自動でアップロードされる。


以下は、古いバージョン。

Deployment/Options の [Upload external changes] チェックボックスにチェックを入れてください。このオプションにより、PHPStorm はサードパーティ ツール (この場合は SASS コンパイラ) によって変更されたファイルをアップロードします。詳細については、
ネットショップ作業の時短＆自動化で作ってみたいものアイデア（Qiita初投稿）


初めまして、プログラミング学習中の石川と申します。
キータ初投稿なので今回は今後の方針を簡単にまとめます。

現在はエンジニアになるための基礎学習をやっております。
それと同時進行で副業でやっているネットショップ運営に役立つツールの作成を進める予定で、その制作過程を記事にして上げていきたいと思います。
実はネットショップ実践者のコミュニティの運営側にも副業で参加させてもらっていて、その運営業務の効率化にもプログラミングを役立てていきたいなと思っています。（運営メンバーが複数人いるので社内アプリ的な感じで作りたいです。）


◆現時点で作りたい物のリスト

・スプレッドシートから独自システムへ商品データを自動登録する機能（出品作業の時短）
・AliExpressの在庫管理システム
・AliExpress出品時短ツール
・インスタグラム投稿時短ツール（規約要確認）
・BASE商品カテゴリ一括登録ツール
・カート追加の多い順や閲覧数の多い順に、ショップの商品の表示順を並び替えるツール
・公式ライン運用サービスLステップの、過去ログを検索できるツール（SQLの学習後になりそう）
・アパレル系商品のサイズ表の一括並び替えツール
・商品説明文一括変更ツール
・購入時のメール自動送信機能
・画像加工の自動化（一括処理）ツール
・各種生成系AIツールの一括処理をするツール
・ノーコード機械学習を試してみた結果など

※リストは随時増やしていく予定です

これから類似の物を作りたい人へ向けて、参考になるような記事を作りたいと思います。
ソースコードはGitHub（今は学習途中ですが・・・）で上げていこうと思います。

現時点ではどうやって作ればいいか分からないものもあります。
Rubyを多少書けるようになった程度ですが、それでもseleniumを使った簡単なツールは作れそうなので、まずはそこから作っていこうと思います。

今後はLinux,Git&GitHub,SQL,HTML&CSS,JavaScript,Rails,AWSと学ぶ予定なので、
新しいことができるようになったらポートフォリオに追加していこうと思います。

個人的に勉強になったことの備忘録的な投稿もする予定です。
自己紹介(続き)

こんにちは！<br>
Hirotoshi Uchidaです。<br>
前回は自己紹介タイトルで記述すれどざっくりとし過ぎた挨拶として、記事を投稿しました。<br>
それと私の不手際で前回のデータを消してしまいました。。。<br>
また、前回の記事は[こちら](https://zenn.dev/hirotoshiuchida/articles/20230422_introduction)で見る事が出来ます。<br>
今回はその続きとして、自己紹介を行いたいと思います。<br>
宜しくお願いします！<br><br><br>
# 基本情報
まず、以下にリスト形式でざっくりと自己紹介を記載します。<br>
*　氏名: Hirotoshi Uchida
*　年齢: 24(25になる予定)
*　居住地: 埼玉（ざっくり）
*　現職: 就労移行支援事業所にて訓練中
*　趣味1: 作曲
*　趣味2: 映像制作
*　趣味3: 絵画制作（CG and キャンバス）
*　趣味4: ライブコーディング
*　趣味4: 写真撮影（主に空の景色を撮る）
*　趣味5: 犬と戯れる
*　趣味6: 人と会話する
*　趣味7: 寝る
*　第1言語: 日本語
*　第２言語: 英語（日常会話程度)
*　第3言語: ネパール語（挨拶程度）
*　第4言語: 中国語（挨拶程度）
*　プログラミング言語1: Html
*　プログラミング言語2: JavaScript
*　プログラミング言語3: CSS
*　プログラミング言語4: Ruby
*　プログラミング言語5: Python
*　プログラミング言語6: Haskell
*　プログラミング言語7: Lisp
*　プログラミング言語8: ShellScript
<br>
## ソーシャルメディアURL
* [hearthis.at](https://hearthis.at/hirotoshi-uchida)
* [hearthis.at](https://hearthis.at/hirotoshi-uchida-2nd)
## ポートフォリオ
* [Microtone VR](https://utvirtual.tech/portfolio-2/microtone-vr)
* [IanniXを用いた3次元図形譜と聴覚障がい者のための音の可視化](https://www.ttt123t.com/html/toyo_2010/kashika/www2020/hp_web/html/a16.html)
* [第2回　重度障がい者社会支援フォーラム - 「If you follow the way」](https://aitunag.com/2020%E5%B9%B411%E6%9C%8828%E6%97%A5%e3%80%80%E9%87%8D%E5%BA%A6%E9%9A%9C%E3%81%8C%E3%81%84%E8%80%85%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A9%E3%83%A0/)
* [「凸凹が活きる社会を創る。」アートコンテスト - 「特性は個性を彩る」](https://decoboco-art.decoboco-base.com/)
<br>ここまで読んで大した事はしていないと感じる方もいると思いますが、私は私なりに精一杯今も生きています。<br>
因みに大分話題変わって、この投稿はGitHubからMarkdown形式で投稿しているので、CommitするとQiitaとZennに自動で同時投稿されます。<br>
参考にさせて頂いたサイトはこちらです。<br>
* [【設定簡単】GitHub Actions を使ってリポジトリ上の技術記事を Qiita に自動で投稿しよう](https://zenn.dev/noraworld/articles/github-to-qiita-by-github-actions)
* [GitHubリポジトリでZennのコンテンツを管理する](https://zenn.dev/zenn/articles/connect-to-github)
<br>ありがとうございます!<br>
これからも体調とその他諸々と両立させながら無理せず投稿したいと思いますので、宜しくお願いします!
【Ruby】標準入力をcase文で処理しようとしたらハマった話

# はじめに
初めまして。Rubyを練習し始めて1ヶ月未満の初心者です。あるプログラミング課題をやっていて疑問に残ったことがあったので、記事に残そうと思います。

# 概要
Rubyで標準入力を使うとき、入力内容によって分岐させるためにcase文を用いたらおかしなことになったので、備忘録として解決策を残しておく

# 結論
* 標準入力は改行(`\n`)が付いてくるので、そのまま条件分岐に使うと危険
* 改行を除去するには`chomp`メソッドを使う

# 環境
* macOS
* ruby version 3.0.5

# 問題点
以下のようなコードを書いて、入力された値をcase文に適用させようとしました。
```ruby:qiita.rb
input = gets
case input
when "a"
  puts "aと入力"
when "b"
  puts "bと入力"
else
  puts "それ以外"
end
```
実行して、aと入力してみる。
```
$ ruby qiita.rb 
$ a
$ それ以外
```
...あれ？
"a"を標準入力で渡したはずなのに、`when "a"` の条件に分岐せず、`else`(デフォルトで実行されるケース)の"それ以外"が表示されている。

試しに、標準入力の`gets`を普通の文字列`"a"`に置き換えてみる。
```ruby:qiita.rb
input = "a"
case input
when "a"
  puts "aと入力"
when "b"
  puts "bと入力"
else
  puts "それ以外"
end
```
```
$ ruby qiita.rb 
$ aと入力
```
今度は正しく`when "a"`に分岐した。

# 解決
`input`を`p`メソッドで表示してみたら分かりました。
```ruby:qiita.rb
input = gets
p input
```
```
$ ruby qiita.rb 
$ a
$ "a\n"
```
どうやら、標準入力は単なる文字列ではなく、改行(`\n`)も含まれているみたいです。
改行を削除するには、`chomp`メソッドを使用します。

```ruby:qiita.rb
input = gets
case input.chomp
when "a"
  puts "aと入力"
when "b"
  puts "bと入力"
else
  puts "それ以外"
end
```
```
$ ruby qiita.rb 
$ a
$ aと入力
```
解決できました！
ちなみに、もっと簡潔な書き方もあります。
```ruby:qiita.rb
case gets.chomp
when "a"
  puts "aと入力"
when "b"
  puts "bと入力"
else
  puts "それ以外"
end
```

# 終わりに
解いてみたらあっけないミスでしたね...。case文とif文の違いかと思って調べてたので、単に標準入力で返される値の違いと知って少し悲しくなりました。
もし間違い等ありましたら、気軽にコメントで指摘していただけると幸いです。
Rubyのインストールの方法

# Rubyのインストールについて
Rubyのインストール方法について、備忘録も兼ねてまとめます。
また、これからRubyの学習を始めようと思っているかたの参考になればと思います。

## インストール環境
- M1mac
- macOS Monterey (ver 12.6.3)
## 流れ
- Homebrewのインストール
- rbenvのインストール
- Rubyのインストール


### Homebrewnのインストール
HomebrewとはmacOSのパッケージマネージャーです。

- 下記のサイトにアクセスし、インストール欄にあるコマンドをターミナルに入力します。

https://brew.sh/index_ja
```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 
```
-  インストールされているかの確認
```
brew -v
```
バージョンが表示されればインストールが完了しています。

### rbenvのインストール
rbenvとはいろんなバージョンのRubyをインストールできる環境をつくれるソフトウェアです。
- rbenvのインストール
下記のコマンドでインストールします
```
brew install rbenv
```

- パスを通す
下記のコマンドでパスを通します
```
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(rbenv init -)"' >> ~/.zshrc
source ~/.zshrc
```

### Rubyのインストール
-　インストール可能なRubyのバージョンを確認する
```
rbenv install -l
```
- Rubyをインストールする
```
rbenv install 3.0.6(バージョンは任意のものを記入。今回は　　3.0.6)
```

- rbenvの更新
```
rbenv rehash
```
- rbenvでインストールされたRubyのバージョンを確認する
```
rbenv versions
```

- バージョンを切り替える
```
rbenv global 3.0.６(任意のバージョン)
```

- 今回インストールしたRubyのバージョンになっているか確認する
```
ruby -v
```

以上
glassfishとは？

## glassfishについて初めて学ぶ人に向けて
Glassfishとは、Tomcatと同じサーバーの一つですが、Tomcatと異なる特徴があります。
Tomcatには以下の特徴があります。
<ul>
    <li>JSP/Servletの機能を使用可能</li>
</ul>

一方でGlassfishには以下の特徴を持っています。
<ul>
    <li>JSP/Servletの機能を使用可能</li>
     <li>JSFフレームワークやpomなどを使用可能</li>
    　 <li>EJBの使用可能</li>
        <li>CDIの使用可能</li>
</ul>

##  JSFとは
画面周りを担当するクラス。

## EJBとは
メソッドの処理を担当するクラス。DB処理に必要なトランザクション機能やタイマーサービス、非同期処理を行える。

## CDIの使用可能
JSFとEJBを繋ぐ役割を持つクラス。独立したクラスの作成やインスタンスのスコープの管理を可能にする

## 参考記事
https://qiita.com/ykusa/items/92e7893eaa3117b597f5
Improved Denoising Diffusion Probabilistic Modelsの個人的理解用メモ

# 論文情報
[Improved Denoising Diffusion Probabilistic Models, Alex Nicholら, 2021](https://arxiv.org/abs/2102.09672)

# 論文の立ち位置
[DDPM](https://qiita.com/ma_si_/items/5fcb0fc7ed6604e025c1)にいくつか修正を加えて、優れた対数尤度を得られるようにした。

# 簡単な説明
- 分散も学習するようにした。
- ノイズスケジュールを線形から、コサインにした。
- time stepのサンプリングを一様分布から、重要度サンプリングにした。

# 説明
### 分散の学習の話
真の分布$q$で、ノイズなしの画像$x_0$とtステップ目のノイズ入り画像$x_t$があった時の、1stepノイズを除去した$x_{t-1}$の分布。
```math
q(x_{t-1}|x_t, x_0) = \mathcal{N}(x_{t-1};\tilde{\mu}(x_t, x_0), \tilde{\beta}_tI)
```

学習した分布$p$で、tステップ目のノイズ入り画像$x_t$があった時の、1stepノイズを除去した$x_{t-1}$の分布。
```math
p_\theta(x_{t-1}|x_t, x_0) := \mathcal{N}(x_{t-1};\mu_\theta(x_t, t), \Sigma_\theta(x_t, t))
```

真の分布$q(x_{t-1}|x_t, x_0)$と学習した分布$p_\theta(x_{t-1}|x_t, x_0)$の分布間距離（KL）でlossにする。

しかし、分散直接学習はうまくいかないので、$\upsilon$を予測することで、間接的に分散を予測する。
```math
\Sigma_\theta(x_t, t) = exp(\upsilon log\beta_t + (1-\upsilon) log\tilde{\beta}_t)
```

### ノイズスケジュールの話
線形だと、必要以上に早くデータにノイズを乗せてしまうので、ゆっくりノイズが乗るようにした。

### tのサンプリングの話
tを一様分布からサンプリングすると、lossのノイズが大きくなってしまうことがわかった。そこで、lossの値の大きさを頼りに、重要度サンプリングを行うことで、ノイズが大きく乗らないようにした。

# その他
内容に問題がある場合も責任は持てません。
コメントをいただければ修正します。
Azure Cosmos DBにAzure App Serviceから読み書きするための設定

本記事では、Azure Cosmos DBにAzure App Serviceから読み書きする際のロール付与方法を記載します。

## 前提

- Azureアカウントを持っていること
- Azure App ServiceとAzure Cosmos DBがすでに構築されていること
- Azure CLIがインストールされており、Azureにログインしていること

## 手順

1. Azure App Serviceの設定->IDから、システム割り当てマネージドIDを有効にし、プリンシパルIDをメモする。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98466/d6d2f85b-eb08-05de-1742-4d3eb146953f.png)
2. Azure CLIから、以下のコマンドを実行し、[Cosmos DB組み込みデータ共同作成者ロール](https://learn.microsoft.com/ja-jp/azure/cosmos-db/how-to-setup-rbac#built-in-role-definitions)を割り当てる。


```zsh
az cosmosdb sql role assignment create --account-name <Cosmos DB アカウント名> --resource-group <Cosmos DB アカウントが属するリソースグループ名> --scope "/" --principal-id <マネージド ID のプリンシパル ID> --role-definition-id "00000000-0000-0000-0000-000000000002"
```
以上です。