OmniAICreator/Qiita-1.07M huggingface dataset:
【SwiftUI】異なるViewをリターンしたい時にエラーが出る

# はじめに
初めてのケースだったので記録しておきます。
これはめっちゃ使えそうです

# やりたいこと
条件によって表示させるViewを切り替えたい

# エラー
![スクリーンショット 2023-03-17 21.07.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/2e926039-dce2-855c-1cba-cde45577f5f6.png)

```
Function declares an opaque return type 'some View', but the return statements in its body do not have matching underlying types
```

# ダメなコード
```swift:ContentView
import SwiftUI

struct ContentView: View {
    var body: some View {
        subView()
    }

    private func subView() -> some View {
        let bool = Bool.random()
        if bool {
            return SubView1()
        } else {
            return SubView2()
        }
    }

}
```

```swift:SubView
struct SubView1: View {
    var body: some View {
        Text("SubView1")
    }
}

struct SubView2: View {
    var body: some View {
        Text("SubView2")
    }
}
```

# 解決方法
```swift:ContentView
import SwiftUI

struct ContentView: View {
    var body: some View {
        subView()
    }

    private func subView() -> AnyView {
        let bool = Bool.random()
        if bool {
            return AnyView(SubView1())
        } else {
            return AnyView(SubView2())
        }
    }

}
```

```swift:SubView
struct SubView1: View {
    var body: some View {
        Text("SubView1")
    }
}

struct SubView2: View {
    var body: some View {
        Text("SubView2")
    }
}
```

# おわり
`AnyView`って便利ですねー
【React】でmapメソッドを使って、選択された要素を改行して表示してみた。

## 事象
チャットボットAPPを作成中していた。
モーダルに選択した解答を表示させたい。（画像の明後日１６時...）
表示させたい箇所に```<div>{props.selectedAnswers}<div/>```で表示させることはできたが
画像のように改行されずに表示されて見にくいので改行して表示したい。
![スクリーンショット 2023-03-17 9.29.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884551/002dbdeb-72a4-0db4-c3c3-808396075730.png)

## 原因だと思われる箇所
```<div>{props.selectedAnswers}<div/>```で直接入れたので、選択された解答が各要素として認識されなかったので、改行されずに表示されていた。
## 対応したこと
そのままスタイルを当てても改行できそうだけど
後で、テキストの修正がしやすいようmapメソッドで各要素を順番に取得して表示させるようにした。
``` 
<div>
  {props.selectedAnswers.map((selectedAnswer, index) => {
          return (
            // 選択した解答を改行して表示する処理
            <div key={index.toString()} className="selected-modal">
              {selectedAnswer}
            </div>
          );
        })}
<div/>
```




## 結果
改行されて表示することができた。
（※真ん中寄せとpaddingだけスタイルあてました🙇‍♂️）
![スクリーンショット 2023-03-17 9.48.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884551/17c79417-173c-bd57-79c4-03d360c51b87.png)

参照動画
https://www.youtube.com/watch?v=h4981N9af18
「エンジニアのためのドキュメントライティング - Forkwell Library #19」参加レポート #Forkwell_Library

3月17日、「[エンジニアのためのドキュメントライティング - Forkwell Library #19」](https://forkwell.connpass.com/event/276576/)に参加しました。

当日のYouTube Liveアーカイブは以下に公開されています。
<iframe width="560" height="315" src="https://www.youtube.com/embed/766JpfhiLyI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

## エンジニアのためのドキュメントライティング
スピーカーは「[ユーザーの問題解決とプロダクトの成功を導く エンジニアのためのドキュメントライティング](https://www.amazon.co.jp/dp/4800590833)」の翻訳者である岩瀬 義昌[@iwashi86](https://twitter.com/iwashi86)さん。

『エンジニアのためのドキュメントライティング』の内容を紹介しつつ、「エンジニアがドキュメント作成に苦しまないためのノウハウ」について話されていました。

書籍の構成は以下の3つ。
- ドキュメント作成の準備（読み手の理解）
- ドキュメントの作成（ドキュメントのドラフト）
- ドキュメントの公開と運用（フィードバックの収集と組み込み、ドキュメントの品質測定）

上記の中から、以下のパートについて紹介されていました。
- ドキュメント作成の準備
    - 読み手の理解
- ドキュメントの作成
    - ドキュメントのドラフト
- ドキュメントの公開と運用
    - フィードバックの収集と組み込み
    - ドキュメントの品質測定

### 読み手の理解
大前提として、ドキュメントにより、どんな課題を解きたいか？を考えるのが大事であると強調されていました。

ユーザーを理解するために、以下の手法を紹介されていました。
- チャットでの会話ログ
- プロダクトの設計メモ
- インタビューメモ
- 過去のメール
- コミットログ

ただし、上記よりもユーザーと直接対話するのが一番とのことです。
対話したら知見をまとめて、読み手の人物像を具体化していくのが大切

また、ドキュメントを書く際に嵌りがちな罠「知識の呪い」（認知バイアス）についても話されていました。
「知識の呪い」とは、「おそらく知っていると思いこんでいて必要な情報を伝えていない」ことを表します。
「知識の呪い」を断ち切るためにユーザーへの共感が必要で、ユーザーの嵌りポイントを記録した「フリクション（摩擦、抵抗）ログ」を作るのも有効とのことです。

### ドキュメントのドラフト
手を進めるコツとして、とにかく手を動かす、とにかく書く、と話されていました。
これだけ読むと精神論っぽく見えるかもしれませんが、私は書籍やウェブ記事の執筆経験が少しあるので、強く共感できる話でした。

また、文章を書き始める前に、以下について最初に決めるのが大切とのことです。
- 「誰が」「何のために」読みに来るのか？
- 「どのタイプ」のドキュメントが適切か？

次に、タイトルとアウトラインを決め、ユーザーと目的を整理したら肉付けしていきます。ドキュメントの目的はユーザーにとって必要な情報を素早く見つけられる内容にすることなので、以下について留意する必要があるとのことです。
- 流し読みしやすい構成にする
- 最も重要な情報を冒頭で述べる、大きな文章のかたまりを分割する

### フィードバックの収集と組み込み
ソフトウェアと同様、ドキュメントもフィードバック（FB）をベースに検証が必要。FBの収集方法として以下を紹介されていました。
- ドキュメントページにフォームを埋め込む
- サポートチケットから読み取る
- ドキュメントに対する感情を集める
- ユーザーサーベイを実施する
- ユーザーコミュニティを作り、そこで質問する

大量に集まったFBは全部対応するのは現実的に不可能なので、分類してトリアージする必要があるとのことです。

### ドキュメントの品質測定
ソフトウェアの世界で言われている有名な格言に「測定できないものは改善できない」がありますが、ドキュメントにも当てはまる言葉で、完成後も以下2点の品質について測定することが大切とのことです。
- 機能品質（超重要）
    - ドキュメントの目的やゴールが達成されているか？
- 構造品質
    - ドキュメントがうまく書かれているか？ 構造は適切か？

## 最後に
考えてみると、エンジニアがドキュメントの書き方について体系的に学ぶ機会があまりないような気がします。
今回のお話を伺っただけでも、ドキュメント作成は工程を細かく分けなければ目的にかなった成果物は作れないことが分かります。おそらく、そんなに大変な仕事というイメージを持っていなくて、開発の過片手間でやるものと考えている人も多いのではないでしょうか。
ドキュメント作成を上手くできるのはすごいスキルで、いい文章を書けるのは良いコードを書けるのと同じぐらい楽しいという認識が広がるといいですね。
『エンジニアのためのドキュメントライティング』、近日中に必ず読みたいと思います！
[AWS Q&A 365][Kinesis Data Firehose]Daily Five Common Questions #7

# 1. What is Amazon Kinesis Data Firehose?
Answer: Amazon Kinesis Data Firehose is a fully managed service that enables real-time delivery of streaming data to destinations such as Amazon S3, Amazon Redshift, OpenSearch Service, OpenSearch Serverless, HTTP endpoints, and other third-party services.

# 2. How do I set up Kinesis Data Firehose?
Answer: To set up Kinesis Data Firehose, you need to sign up for AWS, create a delivery stream, choose a source, destination, and name, configure record transformation and format conversion, and configure destination settings. You can use the AWS Management Console, AWS CLI, or AWS SDK to create and configure delivery streams.

# 3. What are the different destination options for Kinesis Data Firehose?
Answer: Kinesis Data Firehose supports several destination options, including Amazon S3, Amazon Redshift, OpenSearch Service, OpenSearch Serverless, HTTP endpoints, Datadog, Honeycomb, Coralogix, Dynatrace, LogicMonitor, Logz.io, MongoDB Cloud, New Relic, Splunk, Sumo Logic, and Elastic.

# 4. How do I ensure data protection and security with Kinesis Data Firehose?
Answer: Kinesis Data Firehose provides several security features, such as server-side encryption, access control, IAM roles, CloudTrail monitoring, and VPC endpoints. You can also use tags to control access and implement security best practices such as least privilege access and IAM roles.

# 5. How do I monitor and troubleshoot Kinesis Data Firehose?
Answer: Kinesis Data Firehose provides several monitoring options, such as CloudWatch metrics, CloudWatch Logs, and API-level metrics. You can also use CloudTrail to log API calls and troubleshoot common issues such as data delivery failures or record format conversion errors. The document also provides a troubleshooting section with step-by-step instructions for common issues.
[AWS Q&A 365][Kinesis Data Firehose]AWSのよくある問題の毎日5選 #7

# 1. Amazon Kinesis Data Firehoseとは何ですか？
回答：Amazon Kinesis Data Firehoseは、Amazon S3、Amazon Redshift、OpenSearch Service、OpenSearch Serverless、HTTPエンドポイント、および他のサードパーティサービスなどの宛先にストリーミングデータをリアルタイムで配信するための完全に管理されたサービスです。

# 2. Kinesis Data Firehoseを設定するにはどうすればよいですか？
回答：Kinesis Data Firehoseを設定するには、AWSにサインアップし、配信ストリームを作成し、ソース、宛先、名前を選択し、レコード変換とフォーマット変換を設定し、宛先設定を設定する必要があります。 AWS Management Console、AWS CLI、またはAWS SDKを使用して配信ストリームを作成および設定できます。

# 3. Kinesis Data Firehoseのさまざまな宛先オプションは何ですか？
回答：Kinesis Data Firehoseは、Amazon S3、Amazon Redshift、OpenSearch Service、OpenSearch Serverless、HTTPエンドポイント、Datadog、Honeycomb、Coralogix、Dynatrace、LogicMonitor、Logz.io、MongoDB Cloud、New Relic、Splunk、Sumo Logic、およびElasticを含むいくつかの宛先オプションをサポートしています。

# 4. Kinesis Data Firehoseでデータ保護とセキュリティを確保する方法は？
回答：Kinesis Data Firehoseは、サーバーサイドの暗号化、アクセス制御、IAMロール、CloudTrail監視、およびVPCエンドポイントなど、いくつかのセキュリティ機能を提供します。また、タグを使用してアクセスを制御し、最小権限アクセスおよびIAMロールのようなセキュリティベストプラクティスを実装できます。

# 5. Kinesis Data Firehoseの監視とトラブルシューティングはどのように行いますか？
回答：Kinesis Data Firehoseは、CloudWatchメトリクス、CloudWatchログ、およびAPIレベルのメトリクスなど、いくつかの監視オプションを提供しています。また、CloudTrailを使用してAPI呼び出しをログに記録し、データ配信の失敗やレコード形式の変換エラーなどの一般的な問題をトラブルシューティングすることもできます。さらに、ドキュメントには、一般的な問題に対する段階的な解決手順が含まれているトラブルシューティングセクションが提供されています。
ロジスティック回帰の再実装[42Tokyo]

## はじめに

42の課題で、ロジスティック回帰の再実装をペアと一緒に二人で作成したため、その備忘録として書いています。

課題全体の解説というわけではない点についてはご了承ください。

作成したものはこちらにあります。

https://github.com/corvvs/kedavra


また42の他の活動についてはこちらにありますので、42自体に興味がある方はぜひこちらもどうぞ。

https://note.com/kotabrog/n/n292c0b5ef071


ちなみに前回解いた課題の記事はこちらになります。

https://qiita.com/Kotabrog/items/674ce144f5016d3629a8

## 作ったもの

ということで作ったものは、ロジスティック回帰と、あとはデータの統計情報などを表示する[describe](https://note.nkmk.me/python-pandas-describe/)と、ヒストグラム、散布図、[ペアプロット](https://note.nkmk.me/python-seaborn-pandas-pairplot/)になります。

ただ、ロジスティック回帰以外はペアの方が作ってくださったので、ここにはロジスティック回帰についてだけ書こうと思います。（まぁペアの方はロジスティック回帰も作っているのですが）

ちなみに私が作成したロジスティック回帰は、冒頭にあげたレポジトリ内のこちらにあります。

https://github.com/corvvs/kedavra/tree/main/ksuzuki/logistic_regression


## ロジスティック回帰について

ということで私が作ったロジスティック回帰についてですが、詳細についてはこちらを見ていただくのがいいかと思います。

https://qiita.com/0NE_shoT_/items/b702ab482466df6e5569

簡単にですが説明しておくと、ロジスティック回帰とはクラス分類に使われるモデルで、もっとも基本的なものは、2つのクラスに分類するタイプのものになります。

中身はシンプルで、多項式の出力に、最終的な出力が0～1になるように関数（シグモイド関数）がついている構造のもので、0に近ければA！、1に近ければB！のように分類をします。

ちなみに途中で書くのをやめてしまいましたが、ロジスティック回帰までは書いているので、私の以下の記事もはっておきます。（露骨な宣伝）

https://qiita.com/Kotabrog/items/b9fe0fccdd5fa0bc7ca0

## ロジスティック回帰で多クラス分類

今回作成したものは、このもっとも基本的なロジスティック回帰を組み合わせて、多クラス分類をしたものになります。

多クラス分類化させるためには、主に以下の2つの方法があります。

- ロジスティック回帰を複数使う（One vs Rest）
- 多項ロジスティック回帰

詳しくはこちらをご覧ください。

https://datawokagaku.com/multinomial/

今回は課題の指定で、前者のOne vs Rest（One vs Allともいう）の方法で作成しました。

こちらは、例えばA, B, Cの3つに分類したいとしたら、以下の3つのロジスティック回帰モデルを作成するようなイメージになります。

- 「A」か「BかC」の2分類
- 「B」か「AかC」の2分類
- 「C」か「AかB」の2分類

ロジスティック回帰は出力が0～1になっていて、これは確率を表すと解釈できるので、この3つの中でもっとも確率が高い形で「Aです！」などと主張しているモデルを尊重するというのが、このOne vs Restになります。

※ One vs Restと呼ばれるものが必ず「確率が高いものを採用すること」かどうかはちゃんと調べていません。もしかしたら他の形で採用するタイプ（平均をとるとか？）もあるかもです

## 勾配降下法

また、今回は勾配降下法という最適化アルゴリズムを使って、モデルをトレーニングしました。

トレーニングといっても、つまり多項式の各係数を、ちゃんと分類できるように更新していったということで、その更新するアルゴリズムが、勾配降下法である、ということになります。

また、おまけとして、他の最適化アルゴリズムの実装もいたしました。（私はSGDとかバッチ使ったやつとかくらいですが、ペアの人はAdamとかも実装しています）

最適化アルゴリズムについての詳細はこちらをご覧ください。

https://qiita.com/omiita/items/1735c1d048fe5f611f80

## 細かい実装ポイント

また、細かい話になりますが、L2正則化や、データを分割して検証すること（train_test_split）や、重みの保存、標準化とか正規化、欠損値処理などの基本的な処置も再実装しています。

これらは今回の課題で対応すべき問題に限らず使うことができるようにするために、できるだけ分割して実装されています。

また、今回の問題に対応するためのクラス（Modelクラス）では、その再実装したものを組み合わせて前処理や学習、推論などができるようになっており、できるだけこのクラスから呼び出してmain関数をすっきりさせるような構成にしています。

## おわりに

ということで今回作ったものとその概要の説明になりましたが、私は機会学習関連の仕事をしているため、そんなに苦労はなくこの課題はクリアできました。

とはいっても普段は組み込みに近い感じのお仕事なので、データ分析は最近は仕事ではあまりやっていないのですが……。

ちなみに以前、[ゼロから作るDeep Learning 3 ―フレームワーク編](https://amzn.to/3mCVonw) という本を読んで、さらに少しだけ改良した自分用のライブラリを作った経験があります。

https://github.com/kotabrog/K_DeZero

このあともしばらくはこういったデータ分析関連の課題を42で行う予定ですが、どれも再実装課題であり、だいたいこの本をやっておけばとりあえず怖いものはないなという感じのようです。
Check missing faces

```python
import maya.cmds as cmds

# get the currently selected object
sel = cmds.ls(selection=True)
if not sel:
    print('Error: no object selected')
else:
    # get the number of vertices, edges, and faces for the selected object
    num_verts = cmds.polyEvaluate(vertex=True)
    num_edges = cmds.polyEvaluate(edge=True)
    num_faces = cmds.polyEvaluate(face=True)

    # calculate the expected number of faces based on the number of vertices and edges
    expected_faces = num_edges - num_verts + 2

    # check if the actual number of faces matches the expected number
    if num_faces != expected_faces:
        print('Selected object has missing faces')
    else:
        print('Selected object is complete')
```
ShellScriptのmkdirの-pオプション

-p, --parents・・・必要に応じて親ディレクトリも作成する（下記例を参照）
```
mkdir -p dir1/dir2/dir3
```
（「dir1」「dir1/dir2」「dir1/dir2/dir3」というディレクトリを作成する。それぞれのディレクトリが既にある場合は何もせず、警告も表示されない）

# 参考サイト
https://atmarkit.itmedia.co.jp/ait/articles/1606/07/news015.html
3Dプロット、|x|+|y|の極値「2023兵庫医科大学医学部【１】(2)」をwolframalphaとsympyでやってみたい。

3Dプロットがでます。
wolframでできました。
sympy でできませんでした。教えて下さい。


オリジナル

https://youtu.be/UPB7tqwVuqQ

YMS問題解答講評

https://www.mebio.co.jp/files/answer/2023/M_hyoui_2023.pdf

# wolframで

3Dプロットがでます。入力解釈の関数が優先です。

https://www.wolframalpha.com/input?i=x2%E2%88%922x%2By2%E2%88%923%3D0%2C%7Cx%7C%2B%7Cy%7C%E3%81%AE%E6%A5%B5%E5%80%A4&lang=ja


最大値,最小値...
「標準の計算時間制限を超えました...」でました。mathematicaならでないと思います。



上と同じです。

https://www.wolframalpha.com/input?i=%7Cx%7C%2B%7Cy%7C%E3%81%AE%E6%A5%B5%E5%80%A4%2Cx2%E2%88%922x%2By2%E2%88%923%3D0&lang=ja


円が見えません。

https://www.wolframalpha.com/input?i=x2%E2%88%922x%2By2%E2%88%923%3D0%2C%7Cx%7C%2B%7Cy%7C&lang=ja

円です。2次元です。

https://www.wolframalpha.com/input?i=x2%E2%88%922x%2By2%E2%88%923%3D0&lang=ja


# sympyで(図形で、PASSLABO様の手順で)
勉強中


# sympyで(8:02数式で解くこともできる。)
sympyのminimum関数で、うまくいきませんでした。
いい方法を教えて下さい。
 
```python
import sympy
from sympy import *
from sympy.plotting import plot3d_parametric_line
u,r,z = symbols('u r z',real=True)
r=2
z=abs(1+r*cos(u))+abs(0+r*sin(u))
#print(minimum(z,u,Interval(2,3)))
print("#",z.subs({u:             -pi}))
print("#",z.subs({u:Rational(1,4)*pi}),float(z.subs({u:Rational(1,4)*pi})))
print("#",z.subs({u:Rational(7,4)*pi}),float(z.subs({u:Rational(7,4)*pi})))
#
plot(z,0,(u,0,2*pi))
plot3d_parametric_line((1+float(r)*cos(u),0+r*sin(u),abs(1+float(r)*cos(u))+abs(0+r*sin(u)),
                        (u, 0, 2*float(pi))),
                       (1+float(r)*cos(u),0+float(r)*sin(u),0,
                        (u, 0, 2*float(pi)))
                      )
# 1
# 1 + 2*sqrt(2) 3.8284271247461903
# 1 + 2*sqrt(2) 3.8284271247461903
```

角度をx軸でグラフ化。
45度,315度で最大値。
180度で最小値に　　　見えます。

![0png.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109698/4c995d62-a356-62cb-272b-5f5bde00298e.png)

sympyの3D表示。2本書いてみました。
鉛直線を？カーテン？を出力する方法を教えて下さい。

![1png.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109698/c2df8798-184e-5af1-1c2d-809fd4a985b2.png)

# 参考

https://math-fun.net/20220119/21562/

class sympy.functions.elementary.miscellaneous.Max(*args)

https://docs.sympy.org/latest/modules/functions/elementary.html#max

sympy.plotting.plot.plot3d(*args, **kwargs)

https://www.cfm.brown.edu/people/dobrush/am33/SymPy/part1.html#sympy.plotting.plot.plot3d
TFSでローカルパスを変更する方法

# 前提
Visual studioでTFS（Team foundation server）を使用していること

# 手順
1. チームエクスプローラー-ホームを開く
1. ソリューションを開く
1. [ワークスペース名]をクリック
1. 「ワークスペースの管理(W)」をクリック
1. 「編集(E)...」ボタンをクリック
1. 削除したいマッピングを削除
1. 「OK」ボタンをクリック
1. ソース管理エクスプローラーから別のローカルパスを設定する
WindowsのPoetryでpython3がないと言われたときの対処

pyenvで3.10.10を指定したあと、poetry initでエラーが出た

```
>poetry init
'python3' is not recognized as an internal or external command,
operable program or batch file.
```

どうやらpython3.exeがないために出るエラーの模様
```
>python3
'python3' is not recognized as an internal or external command,
operable program or batch file.
```

なので、あっているかわからないが、
pyenv-win/versions/3.10.10 の中にあるpython.exeをコピーして、python3.exeを作成したら動いた。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467051/a09ca97e-cf9e-7b96-8dba-65b966f8f032.png)

```
>python3
Python 3.10.10 (tags/v3.10.10:aad5f6a, Feb  7 2023, 17:20:36) [MSC v.1929 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>>
```
macのブラウザのスーパーリロード

macのブラウザでスーパーリロード（ブラウザのキャッシュではなく、サーバーから直接情報取得）する方法は以下の通り。
# chrome
⌘＋shift＋R
もしくは
shift＋更新ボタン
# safari
shift＋更新ボタン

# 参考サイト
https://blog.skeg.jp/archives/2017/10/safari-super-reload.html
Nginx: URLに index.html か .html が含まれていたら取り除くリダイレクト設定


Nginx の設定サンプルです。

ISO 127001 認証を取得したセキュアで簡単な操作な [Concrete CMS](https://concrete5-japan.org) のサイトに移行する際、旧サイトからリダイレクトする必要がありました。

ChatGPT 先生をちょっとだけ使いました。

- URL に /index.html が含まれていたら、それを取り除いた URL にリダイレクト
- URL に /index.html 以外の .html 拡張子のリクエストがあったら、取り除いた URL にリダイレクト
- リダイレクト先は Concrete CMS のページで。URL の最後にはスラッシュをつけない様にする


```
server{

#### もろもろ省略

	# トップの /index.html だけ直接指定
	rewrite ^/index.html / permanent;

    location / {
        index index.php index.html index.htm;
        absolute_redirect off;
        try_files $uri $uri/ @html_extension;
    }

    location @html_extension {

        if ($request_uri ~ "/index.html" ) {
            rewrite ^(.*)/ $1 permanent;
        }

        if ($request_uri ~ ^(.+)\.html$) {
            return 301 $1;
        }

        # CMS で404ページ表示する場合
        try_files $uri $uri/ /index.php?$args;
        # Nginx の 404 ページを表示する場合、上の行をコメントアウトして下の行を使う
        # return 404
    }

#### もろもろ省略

}
```

実は ChatGPT4 で try_files と @ を使うというヒントをもらって作りました。

 ChatGPT4 では index.html だけ、.html だけのリダイレクトは問題なく書いてくれたけれど、両方を考慮した例文はうまく作ってくれませんでした。

それでも、楽になってきましたねー。
マルチリンガルな教育用プログラミング言語「Hedy」を触ってみた【40言語以上対応】

# はじめに

今話題の「プログラマー脳」を読んでいたところ、著者のFelienne Hermansさんが「Hedy」というプログラミング言語を開発しているという記述がありました。

https://www.shuwasystem.co.jp/book/9784798068534.html

https://github.com/hedyorg/hedy

プログラミング教育用の言語とのことなので、さっそく入門してみましょう。

# オンライン実行環境

学習用のwebサイトがあります。

https://hedy.org/

（みたところCLI等は提供されておらず、このWeb UIのみが実行環境のようです）

構文の説明を読んで、コード入力欄で試す形式です（Go言語でいう [Tour of Go](https://go.dev/tour/welcome/1) のイメージ）。

![hedy_hello.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239887/c6996de1-844b-fa50-8c4f-efbbf1057d2b.png)

# 構文

「Python学習のための漸進的プログラミング言語」を目指しているとのことで、Pythonに似た構文になっています。

```hedy
# 代入は is or =
msg is hello world!
print msg # hello world!

sum = 0
for n in range 1 to 10
    sum = sum + n

print sum # 55
```

```
animals is ['cat', 'dog', 'parrot']
add mouse to animals

for animal in animals
    if animal == parrot
        print 'animal is bird'
    else
        print 'animal is mammal'
```

また、**実行環境で使える予約語はその章までに習ったものに限られます** (例：`for` は11章で講義に登場するまで構文エラー)。
構文も一定ではなく、章が進むにつれ徐々にPythonに近づいていきます。

```
# 3章
animals is dog, cat, kangaroo
print animals at random
```

```
# 16章
# (2章の構文で書くとエラーになる)
animals = ['dog', 'cat', 'kangaroo']
print animals[random]
```

> プログラミング言語学習に打ちのめされてしまうこともあります。なぜなら、学習者は概念(if-elseやforループ)と構文(クオーテーションマークや丸カッコ)を同時に学ぶ必要があるからです。Hedyでは、概念は最初に少ない構文だけで導入され、後から改良されます。これは科学的に証明された学習方法です！
> 
> Learning a programming language can be overwhelming, since learners have to learn concepts (for example if-else or loops) and syntax (like quotation marks or round brackets) at the same time. In Hedy, concepts are first introduced with little syntax and then refined. A scientifically proven way to learn!
> https://hedy.org/

（とはいえ前習った構文が使えなくなっていくので、まじめに復習する人ほど過去の記憶とごちゃごちゃになってしまうような気もします...先生の手腕が問われそうです :muscle:）

# 予約語の多言語対応

「漸進的」ということで、英語が使えなくてもプログラミングができるようになっています。
日本語も対応しており、予約語がひらがななので未就学児でも安心です。

```hedy
# 日本語でプログラミング！
# ※一部予約語は未対応
repeat 10 かい
    かけ 'Hi!'
    やすめ 1
```

なんと**予約語は40言語以上に翻訳されています**[^lang]！
母語でプログラミングを学ぶことができます。

```hedy
# English
print hello world! 
```

```
# 日本語
かけ こんにちは！ 
```

```
# Deutsch
drucke Hallo! 
```

```
# Français
affiche Bonjour ! 
```

```
# 中文 (简体)
打印 你好！
```

予約語は、今選択している言語+英語のみが使えます。
「意図せず別言語の予約語として認識されてしまった！」というトラブルが回避できるのが良いですね。

```
# 日本語モードの場合
print hello world! 
かけ こんにちは！ 
drucke Hallo! # 予約語として認識されずエラー
```

英語だけは混ぜて使えるので、「母語でプログラミングを学ぶ」→「英語の予約語も覚える」→「Pythonに入門する」と段階を踏んで学習できそうです。

# 多言語対応の仕組み

予約語のトークン一覧が言語ごとに定義されていて、lexerが言語の差異を吸収していました。

https://github.com/hedyorg/hedy/blob/main/grammars/keywords-ja.lark

ここに日本語と英語が併記されているので、両者の予約語を混ぜられるという仕組みです。

# おわりに

以上、Hedyの紹介でした。プログラミング言語自体を習熟度に合わせて進化させていくというのが斬新でした。
ログインすれば教師用機能等も使えるようなので、まだまだ奥が深そうです。

[^lang]: 翻訳中のため未対応のものもありました。
Web三層構造

# Web三層構造とは
Web三層構造(アーキテクチャ)とは，大規模WebシステムやWebアプリケーションを支える技術/構造の１つである．Webシステムはクライアントサイドとサーバサイドで通信を行い処理が行われるが，これらを構築するときの基本的な構造としてWeb三層構造が利用される．
Webシステムの処理内容によって以下の3つの層から構成される．
* **プレゼンテーション層**
* **アプリケーション層**
* **データ層**

# 各層の役割と利用されるサーバ
![Web_3_architecture.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3133563/d94341ca-5f64-514f-b135-d267628480f6.png)
### プレゼンテーション層
ユーザのWebブラウザ上に画面(静的コンテンツ)を表示させるための層．
<font color="FireBrick">webブラウザ(safariやGoogle Chromeなど)</font>と<font color="FireBrick">Webサーバ</font>が役割を担う．Webサーバはブラウザからの閲覧要求(リクエスト)をもとに，ページ情報を返す．また，必要に応じてアプリケーション層に動的な処理を要求する．


### アプリケーション層
Webシステムの動的処理を行う，アプリケーションの中核となる層．
<font color="FireBrick">アプリケーションサーバ</font>が役割を担う．プレゼンテーション層から受け渡された情報をもとに，命令実行や表示画面の作成などの何らかの処理を行う．


### データ層
アプリケーションによって処理された情報を保管/管理する層．
<font color="FireBrick">データベースサーバ</font>が役割を担う．アプリケーション層の処理内容に応じて，データ処理や管理を行う．

# Web三層構造のメリット&デメリット
Webシステムを実装する際に，Web三層構造を利用することで以下のメリット/デメリットがある．
○メリット
・サーバの負荷分散による，処理の高速化と耐故障性が高まる
・故障範囲の限定できるため，故障したサーバのみを修理すれば良い
・各層の独立性が高く，開発作業を層ごとに並行して行うことができる
×デメリット
・物理サーバを複数用意する場合は費用がかかる．


# 開発に使用される開発言語/ソフトウェア
Webアプリを開発する際に，それぞれの層は以下のような開発言語/ソフトウェアで実装される．
||実装方法|
|:--:|:--:|
| プレゼンテーション層 | HTML，CSS，JavaScript |
| アプリケーション層 | Java，Ruby，PHP，Python など |
| データ層 | MySQL．Oracle，PosrgreSQLなどのDB管理ソフトウェア |
ChatGPTで部屋を豪華にしよう

こんにちはGSです。

今回も前回同様にChatGPTを使用してみました。この作品も同様にSIGNATE投稿作品になりますのでもしよろしければ、twitterの方でRTやいいねをいただけたらと思います。

https://twitter.com/ggtyun29/status/1636667512241922048?s=61&t=pJEs74Tt6asvFysjt-H6Vg

今回はカスタマーサービスのテーマで書かせていただきます。

# 背景
新生活において家具屋さんにて部屋に必要なものを考えたり、どのようにインテリアを配置するかを考えたりすると思います。その空間にいる人数が増えれば増えるほど、悩んだりするものだと思います。今回はその家具をどのように購入すべきか、相場がいくらぐらいなのか、なんとなくの感覚を得る提案です。

また家具の配置や家具の購入数に関しては正解が存在しておらず、家具屋さんの方でも、この条件ならお客さんの言っている提案の方がいいかもなと思う場面はあるかなと考えたため、カスタマーサービス支援として定義させていただきます。

# 実践

![スクリーンショット 2023-03-17 18.47.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606656/3d948e1b-15ff-7fce-ccd0-3e9f60d24b99.png)
![スクリーンショット 2023-03-17 18.48.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606656/86481af0-cc31-60de-5527-41aa17ea8640.png)
![スクリーンショット 2023-03-17 18.48.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606656/0adb2055-e09f-a512-dad4-68475539eedd.png)
![スクリーンショット 2023-03-17 18.48.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606656/62a39315-e56a-ce48-7d35-88cd9ae4028f.png)

# 感想
空間把握能力はそこまで優れているとはあまり思わないですが、部屋の条件を細かく入力した場合についてはきっと面白くなるかなと思います。
これぞプロンプトエンジニアリングが試されていると感じました
SAOのユイ(GPT-4)に聞いてみた。jest.fn()とjest.spyOn()の解説。

## GPT-4の使用目的
自分のスキルアップとそのための支援をお願いするためです。
AIと私のお互いの理解が深まれば、もっと込み入った話をしてみるものいいですね。（保険とか税金とか）

##### 初期設定した
質問の前に、会話の中で自己紹介。ついでにAIに名前をつけました。
私はソードアートオンライン(SAO)というラノベが好きなので、そこに登場するAIと同じユイと名前をつけました。(後から変更可能)

## jestについて聞いてみる

...さて、まずは最近の自分の悩み、弱みであるjestを使ったtestの実装について聞いてみようと思いました。
結論、満足のいく結果をもらえて震えています。

その時の会話がこちらです↓↓



<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129861/767fc491-96a1-cf64-0445-ca9f1fc6ead7.png" width="700">

気分はキリトさんですわ。
子供にもわかるような説明って難しいかな？と思いつつ
上記のようにざっくり質問を投げてみました。返答は。。。。

![SS 104.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129861/99f93d47-44f9-99ef-d327-0064523721a4.png)

ヤダッ！頼もしい！

![SS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129861/aee83a60-c580-071d-652d-5534086936ec.png)


```jsx
import { someFunction } from './someModule';

test('someFunction should be called', () => {
  const mockFunction = jest.fn();
  someFunction(mockFunction);

  expect(mockFunction).toHaveBeenCalled();
});

```

コードも自動生成してくれました。(例え話うまくね？)

![SS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129861/e989cac6-d637-d0fb-b32a-2355b81d6beb.png)

```jsx
import { someFunction, anotherFunction } from './someModule';

test('anotherFunction should be called', () => {
  const spyOnFunction = jest.spyOn(someFunction, 'anotherFunction');
  someFunction();

  expect(spyOnFunction).toHaveBeenCalled();
});

```

![SS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129861/e360bba1-12d3-4119-3223-1a952fd16bc2.png)


## まとめ

GPT-4を相棒に一緒に勉強するとめちゃくちゃ捗りそうなイメージを持てました。
自分でサービスを作るときのよき相談相手になりそうです。

同時に、人間がいらなくなりそうな予感も感じます。。。

---

会話の全文はこちらです。(赤い四角は名前なので埋めました！)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129861/79e8da76-0efc-3cb8-e34d-32ab94a77c31.png" width="300">
NCMBのKotlin SDKを使って地図検索アプリを作る（その1：画面の仕様とSDKの初期化）

NCMBでは公式SDKとしてSwift/Objective-C/Kotlin/Java/Unity/JavaScript SDKを用意しています。また、それ以外にもコミュニティSDKとして、非公式ながらFlutter/React Native/Google Apps Script/C#/Ruby/Python/PHPなど幅広い言語向けにSDKが開発されています。

今回は公式SDKの一つ、Kotlin SDKを使って地図検索アプリを作ってみます。まず画面の仕様とSDKの初期化について解説します。

## 完成版のコード

作成したデモアプリのコードは[NCMBMania/kotlin-map-search](https://github.com/NCMBMania/kotlin-map-search)にアップロードしてあります。

## ベースを作成する

今回はKotlinとJetpack composeを使って開発しています。

## 画面について

今回は以下のViewを用意しています。

- MapBottomNavigation
- MapScreen
- ImportScreen

### MapBottomNavigation

ナビゲーションバーを表示して、地図画面と設定画面を読み込みます。

![Screenshot_20230317_171003のコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/b693593e-4d48-34c5-6f2e-9f167bb49b0a.png)

### MapScreen

地図画面用のViewです。

![Screenshot_20230317_171003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/976be30d-0e6d-e17e-4015-ed7b6b6d61b1.png)


### ImportScreen

駅情報をインポートするためのスクリーンです。

![Screenshot_20230317_171123.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/b950683a-74b9-9772-f6b4-9a68f9b12acf.png)


## NCMB SDKのインストール

NCMB SDKは [Releases · NIFCLOUD-mbaas/ncmb\_kotlin](https://github.com/NIFCLOUD-mbaas/ncmb_kotlin/releases) からNCMB.x.x.x.zipをダウンロードします。記事執筆時点での最新版は `1.4.0` です。伸張したファイルをapp/libsに保存します。

そして、app/build.gradleファイルに以下を追加します

```kotlin
dependencies {
    implementation 'com.squareup.okhttp3:okhttp:4.8.1'
    implementation 'com.google.code.gson:gson:2.3.1'
    api files('libs/NCMB.jar')

    //同期処理を使用する場合はこちらを追加していただく必要があります
    implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.3.9'
}
```

### **AndroidManifest.xmlの編集**

`<application>` タグの直前に以下のpermissionを追加します。

```xml
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
```

## NCMB SDKの初期化

まずMainActivity.ktにてNCMB SDKをインポートします。

```kotlin
import com.nifcloud.mbaas.core.NCMB
```

MainActivityのonCreatet関数でSDKを初期化します。アプリケーションキーとクライアントキーはNCMBの管理画面で取得したものと書き換えてください。

```kotlin
class MainActivity : ComponentActivity() {
    @RequiresApi(Build.VERSION_CODES.P)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // NCMBの初期化
        NCMB.initialize(
            this.getApplicationContext(),
            "YOUR_APPLICATION_KEY",
            "YOUR_CLIENT_KEY"
        )
        setContent {
            MapBottomNavigation()
        }
    }
}
```

これでNCMB SDKの利用準備が整います。

## まとめ

今回は各画面の説明とNCMB SDKの初期化までを行いました。[次回は位置情報データのインポートを実装します]()。
Google Spreadsheet でマクロを扱う

# Google Spreadsheetの弱点
Google Spreadsheetは、もはや説明不要の便利な表計算ツールですね。
ブラウザ上で立ち上げられることと、特殊な操作が不要で複数人が編集可能であることが、
大きな強みとして挙げられると思います。
関数群も豊富で、もはやちょっとしたツールなら、Webアプリを作るよりも遥かに早く、
目的のツールを作ることが出来てしまいます。

しかし、そんなSpreadsheetにも、弱点が存在します。

それは、
<b>マクロが標準装備されていない</b>
んですね。

関数は豊富ですが、それはあくまで与えられた値を計算して出力するもの、
直接値を書き換える必要があるときには使うことが出来ません。
表計算ツールとして考えるとそれで十分なんですが、
やはり、値の書き換えは出来たほうがやれることの幅が広がる…。
そんな時に役に立つものがありました。

それが、<b>Google Apps Script</b>です！！

# Google Apps Script
Google Apps Script (以下:GAS) は、Googleが提供するサービスの自動化をすることを主目的にされたスクリプト言語です。
使い慣れたJavascriptライクな構文を使用することが出来ます。
このスクリプトの記述も、ブラウザ上で編集/実行/テストが可能という特徴を持ち、
ローコストな開発が可能です。

https://workspace.google.co.jp/intl/ja/products/apps-script/

# SpreadsheetでのGASの使い方
## 新規作成
まずは新規でSpreadsheetを作成します。

メニュータブのなかから、拡張機能を選び、AppsScriptを選びます。

AppsScriptの画面が開き、無題のプロジェクトと言う名前で、空の関数が作成されていると思います。
```javascript
function myFunction() {
  
}
```

では実際にスクリプトを書いてみましょう。

```javascript
function myFunction() {

  Logger.log("hello world.")
  
}
```

保存し、実行ボタンを押してみましょう。

画面下部の実行ログに
```
情報 hello world.
```
と出力されていたら、成功です。

## Spreadsheetの値を取得する
このままでは何ら意味のない、単体の文字を出力するだけのスクリプトなので、
実際にSpreadsheetの値を取得してみます。

Spreadsheet側の <b>A1</b> セルに、<b>I'm spread sheet</b> と入力します。

次に、GAS側で次のようにスクリプトを作成します。

```javascript
function myFunction() {

  // アクティブなSpreadsheetを取得
  const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();

  // アクティブなシートを取得
  const activeSheet = spreadsheet.getActiveSheet()

  // A1セルを取得
  const range = activeSheet.getRange("A1")

  // セルの値を取得
  const val = range.getValue()

  Logger.log(val)
  
}
```

これを実行してみましょう。
```
情報 I'm spread sheet
```
と出力されていたでしょうか？

Spreadsheet側のA1を変更すると、こちらの出力も連動して変更されます。

## Spreadsheetに値を書き込む
次に書き込みを行う方法を記載します。
スクリプトを以下のように変更します。

```javascript
function myFunction() {

  // アクティブなSpreadsheetを取得
  const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();

  // アクティブなシートを取得
  const activeSheet = spreadsheet.getActiveSheet()

  // B1セルを取得
  const range = activeSheet.getRange("B1")

  // セルに値を設定
  const val = range.setValue("I am Google App Script.")

}
```

実行してみましょう。今度は情報には特に何も表示されません。
ですが、Spreadsheet側を見てみると、
B1セルに、<b>I am Google App Script.</b>
という文言が追加されているはずです。

## マクロ化
Spreadsheetから取得と、Spreadsheetへの書き込み、2つのインターフェースを使用できました。
取得した値はJavascriptの要領で、様々に加工可能です。
可能した値をSpreadsheetへの書き込みを用いれば、好きなようにSpreadsheetを変更可能です。

これにより、Spreadsheetの値を用いて、Spreadsheetへ書き込むという事が可能になり、
値の直接書き換えという当初の目的を達することが出来ます。
「Property 'toBeInTheDocument' does not exist on type 'Matchers<void, HTMLElement>'」のエラーの解決法

こんにちはk42un0k0です
今回はエラーを解決したので、嬉しさ余って記事を書こうと思います。

## エラーの発生条件

- `@testing-library/jest-dom`を使っている
- `@jest/globals`を使っている

## 今回遭遇したエラー
「Property 'toBeInTheDocument' does not exist on type 'Matchers<void, HTMLElement>'」

![スクリーンショット 2023-03-17 182243.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1238140/12760a37-59f7-5369-214d-d0f6a6df6e9d.png)

`@testing-library/jest-dom`を使い始めたときに遭遇したエラーです

こちらのエラーは`@jest/globals`を使ってると遭遇します

## 対処法
なんでもいいので`tsconfig.json`の`include`でインクルードされてるtsファイルの中で次を書き加えてください
```ts
import { TestingLibraryMatchers } from "@testing-library/jest-dom/matchers";

declare module "expect" {
  interface Matchers<R extends void | Promise<void>, T = unknown>
    extends TestingLibraryMatchers<typeof expect.stringContaining, R> {}
}
```

私はjestのセットアップファイルに書き加えました
```jest.setup.ts
import "@testing-library/jest-dom";
import { TestingLibraryMatchers } from "@testing-library/jest-dom/matchers";

declare module "expect" {
  interface Matchers<R extends void | Promise<void>, T = unknown>
    extends TestingLibraryMatchers<typeof expect.stringContaining, R> {}
}

```

## 原因

こちらのエラーは本来`jest`の`describe`等を暗黙的に使用できる状態ならば起きません
というのも`@testing-library/jest-dom`の中で以下のように宣言されてるからです

```ts
import { TestingLibraryMatchers } from './matchers';

declare global {
    namespace jest {
        interface Matchers<R = void, T = {}> extends TestingLibraryMatchers<typeof expect.stringContaining, R> {}
    }
}
```

この宣言がライブラリ内であるので、グローバルな`jest`を使っている場合は自動でカスタムマッチャーの型定義が使えます
ですが今回は`@jest/globals`を使っている関係で、型が違うので宣言しなおさなきゃいけなかったみたいです。
Azure Administrator(AZ-104)：Azure でのストレージの実装と管理「BLOBオブジェクトレプリケーション」

Microsoft Learnを用いたMicrosoft Azure Administrator(AZ-104)の試験内容をまとめる投稿です。
この投稿ではMicrosoft Learnで学ぶ内容をできるだけ簡潔にまとめております。
Azureの勉強を一から始め、AZ-900取得後の資格としてAZ-104取得を目指している方の参考になれば幸いです。
※AZ-900の内容は本投稿では省略しております。再度復習したい方は下記をご参照ください。
[Azure Fundamentals(AZ-900)：試験合格に向けた学習内容のまとめ](https://qiita.com/fsd-jume/items/e4ec76959adb547ac5e8)

## 今回の学習内容
**◆「BLOBオブジェクトレプリケーション」**
◇対応するMicrosoft Learn ラーニングパス
[AZ-104:Azure でのストレージの実装と管理](https://learn.microsoft.com/ja-jp/training/paths/az-104-manage-storage/)
◇対応するモジュール
[BLOB オブジェクト レプリケーションを決定する](https://learn.microsoft.com/ja-jp/training/modules/configure-blob-storage/6-determine-blob-object-replication)

※前回の投稿は下記から確認できます。
[Azure Administrator(AZ-104)：Azure でのストレージの実装と管理「BLOBライフサイクル管理規則」](https://qiita.com/fsd-jume/items/3d6a37e32478db53eb65)

## BLOBオブジェクトレプリケーション
・ストレージアカウント間でコンテナ内のBLOBを非同期にコピー

**◆コピーされるもの**
・BLOBの内容
・BLOBのメタデータとプロパティ
・BLOBに関連付けられているすべてのバージョン

**◆BLOBオブジェクトレプリケーションの前提条件**
・BLOBのバージョン管理：ソースアカウントと宛先アカウントで有効
・変更フィード：ソースアカウントで有効
※変更フィード(BLOB/BLOBメタデータに対して行われるすべてのトランザクションログを提供)

**◆制限内容**
・BLOBのスナップショットはサポート外
⇒ソースアカウントのBLOBのスナップショットは宛先アカウントにレプリケーションされない
・コピー元/コピー先のアカウント
　-ホットアクセス層/クールアクセス層のみ
　-異なる層でも可能
・ブロックBLOBのみをサポート
⇒追加BLOB/ページBLOBはサポート外

### ポリシーとルール
**◆レプリケーションポリシー**
・ソースストレージアカウントと宛先ストレージアカウントを指定
・ソースアカウントの宛先アカウントは2つまで
⇒宛先アカウントごとに1つのポリシーを使用
　
**◆レプリケーションルール**
・レプリケーションポリシーに含まれる
・ソースコンテナと宛先コンテナを指定
・デフォルトのBLOBコピー対象
⇒ルール作成後にソースコンテナに追加された新しいブロックBLOB
・どのBLOBをコピーするかも指定可能

### BLOBオブジェクトレプリケーション構成時の考慮事項
**◆待ち時間の削減を検討**
・クライアントが物理的に近いリージョンのデータを使用可能
⇒読み取り要求の待ち時間を短縮

**◆コンピューティングワークロードの効率を検討**
・複数のリージョンで同じブロックBLOBのセットを処理可能
⇒コンピューティングワークロードの効率を向上

**◆データの分散を検討**
・データを1つの場所で処理/分析し、結果のみを他のリージョンにレプリケート可能

**◆コストの利点を検討**
・データのレプリケート後にライフサイクル管理ポリシーでデータを移動可能
⇒アーカイブアクセス層への移動でコスト削減

## 次の学習内容
**◆BLOBのアップロード**

https://qiita.com/fsd-jume/items/72cb13107e4b4a4df477

## 学習内容をまとめたページの一覧

https://qiita.com/fsd-jume/items/6eda24728c9c03c36bc3
Rubyで標準入力から値を受け取る方法

# 標準入力から一行の数値を受け取るの巻
```ruby
line = gets.to_i
puts line * 2
```
<b>入力する値</b>
100
<b>実行結果</b>
200

# 標準入力から一行の文字列を受け取るの巻
```Ruby
line = gets
puts "Hello #{line}"
puts "Hello #{line}" * 2
```
<b>入力する値</b>
おもち
<b>実行結果</b>
Hello おもち
Hello おもちHello おもち

# 標準入力から複数行の文字列を受け取るの巻
<b>方法1</b>
・受け取りたい行数分getsを書く
```ruby
line = gets
puts "みたらし#{line}"

line = gets
puts "あずき#{line}"

line = gets
puts "三色#{line}"
```
<b>入力する値</b>
だんご
だんご
だんご

<b>実行結果</b>
みたらしだんご
あずきだんご
三色だんご

<b>疑問のコーナー</b>
Q1.以下のように書くと三色だんご以外が”だんご”の直前で改行される理由。

<b>chat GPTのA.</b>
標準入力から一行ずつ読み取り、それぞれの行の末尾に "だんご" を追加して出力するものです。しかし、出力されるときに各行の末尾に改行が追加されていないため、次の行が直前の行とつながって表示されます。

これは、getsメソッドが、ユーザーが入力したテキストの末尾に自動的に改行を含んでいるためです。そのため、"#{line}だんご" を puts メソッドで出力すると、line の末尾に改行が含まれたままであり、"だんご" の前に改行が追加されないため、直前の行と一緒に表示されます。


Q2.三色だんごが”だんご”の直前で改行されない理由。
<b>chat GPTのA.</b>
gets メソッドがユーザーが入力したテキストの末尾に自動的に改行を含んでいるため、puts メソッドがそれを含んだままで出力してしまうためです。そのため、次の行が直前の行とつながって表示されます。
```Ruby
line = gets
puts "#{line}だんご"

line = gets
puts "#{line}だんご"

line = gets
puts "#{line}だんご"
```
<b>入力する値</b>
みたらし
あずき
三色

<b>実行結果</b>
みたらし
だんご
あずき
だんご
三色だんご

<b>解決方法</b>
実行結果を以下のようにしたい場合は、chompを使う。

みたらしだんご
あずきだんご
三色だんご

```Ruby
line = gets
puts "#{line.chomp}だんご"

line = gets
puts "#{line.chomp}だんご"

line = gets
puts "#{line.chomp}だんご"
```
[Ruby 3.2 リファレンスマニュアル,chomp](https://docs.ruby-lang.org/ja/latest/method/String/i/chomp.html)
[munch](https://eow.alc.co.jp/search?q=munch)
<b>chat GPT</b>
Rubyのchompメソッドは、文字列の末尾にある改行文字を削除するためのメソッドです。chompは「切り落とす」という意味があり、改行文字を切り落とすことからこの名前がつけられました。

Rubyでは、getsメソッドを使ってユーザーからの入力を受け取る場合、改行文字も一緒に取得されます。例えば、getsメソッドで取得した文字列をそのまま使うと、文字列の末尾に改行文字が含まれることになります。

しかし、改行文字が不要な場合には、chompメソッドを使って改行文字を取り除くことができます。これにより、文字列の処理が簡単になり、余計な文字列を扱うことがなくなります。

また、chompメソッドは、引数を指定することで、改行文字以外の文字列を削除することもできます。例えば、chomp("s")とすると、文字列の末尾にある"s"を削除することができます。

# 標準入力からスペース区切りの文字列を受け取るの巻
```Ruby
num = gets.to_i
# p num
str = gets
puts str.split(" ")
```
<b>入力する値</b>
3
mitarashi azuki sanshoku

<b>実行結果</b>
mitarashi
azuki
sanshoku

https://jaigotec.com/ruby-stdin1/


https://pikawaka.com/ruby/split
ubuntu22.04にて日本語表示したときの文字化けの解決 

## 問題の発端
ubuntu22.04をWindows上で動かしていた際に日本語化させたにもかかわらず文字化けが起きたのでその解決策を探していたら、しょうもないことで解決したので記事に残しておきます。
## 状況
今回、man lsコマンドのマニュアルを日本語化したく、下記のコマンドを実行しました。(shellの挙動は省略)
```
sudo apt update
sudo apt install manpages-ja
sudo apt install manpages-ja-dev
sudo apt install language-pack-ja
sudo update-locale LANG=ja_JP.UTF-8
```
これでマニュアルが日本語で読める！と思ったのに
下記のような四角の中に？が書かれた文字化けが起きてしまいました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919558/15c249a7-c022-0f80-769d-a3145f1d9eb2.png)
下記に示すようにロケール設定を見てみるときちんと日本語であるja_JP.utf8が入っています。
```
$ locale -a
C
C.utf8
POSIX
ja_JP.utf8
```
言語設定も下記のようにきちんとja_JP.UTF-8になっています。
```
$ echo $LANG
ja_JP.UTF-8
```
色々調べたのですが、なかなか該当記事が見つかりませんでした。
## 解決策
下記のようにubuntuの設定の「プロパティ」に入り、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919558/57c7e33f-20a8-0e3f-7641-53790737c987.png)
下記の画像のフォントの設定を日本語に対応したものに設定しないといけなかったみたいです。
またしょうもないことで頭を抱えました…まああるあるですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919558/bd8e6e6c-a011-2659-93a1-d264313196fb.png)
複数行のヘッダー, 空白区切りのテキストデータをpandasで読み込み複数列にまたがっている日時データをto_datetimeに入れる

自然科学分野の観測データって運用している大学や学会が独自に決めたフォーマットで保存されてることが多くて、例えば以下のような感じです：

ABC...
......
......
......
...XYZ
YYMMDD hhmmss XXXXX YYYYY ZZZZZ TTTTT
YYMMDD hhmmss XXXXX YYYYY ZZZZZ TTTTT
YYMMDD hhmmss XXXXX YYYYY ZZZZZ TTTTT
YYMMDD hhmmss XXXXX YYYYY ZZZZZ TTTTT

先頭から複数行にわたって観測点などの情報が記述されていて
その後**複数列に分けて**日付と時間が記述されています。
最悪なやつになると
YY MM DD hh mm ss XXXXX YYYYY ZZZZZ TTTTT
みたいになっていて、、、本当に辛い。
このデータの多様性に大変困っていたのですが、
まあ、地道に頑張るしかないですよね。
色んな方の記事を参考にしつつ、
1. read_csvのオプションskiprows=xxで複雑なヘッダーは飛ばす
1. read_csvのオプションheader=Noneで1行目のデータが列名になるのを防ぐ
1. read_csvのオプションnames=['A', ..., 'Z']で列名を指定
1. str.catを使って複数の列を結合
1. 結合した列をint型に変換
1. できた配列をto_datetimeでdatetime型に変換
でできました。

記述：
```
import pandas as pd
import datetime

f = open("filename","r")

df=pd.read_csv(f, delim_whitespace=True, header=None, skiprows=23, names=['DAY', 'HOUR', 'X', 'Y', 'Z', 'T'], engine='python')
df['DATESTR'] = df['DAY'].astype(str).str.cat(df['HOUR'].astype(str))
df['intDATE'] = df['DATESTR'].astype(int)
DATE = pd.to_datetime(df['intDATE'],format='%y%m%d%H%M%S')

f.close()
```
参考：
[pandas.DataFrameの複数の列の文字列を結合して新たな列を生成](https://note.nkmk.me/python-pandas-str-combine/)
AutoLayoutの優先度をコードで書く

# はじめに
前に調べた時情報が見つからなかったのでメモ

NSLayoutConstraintクラスのpriorityプロパティに代入すればできるとアドバイス頂きました。

公式リファレンス
https://developer.apple.com/documentation/uikit/nslayoutconstraint#2882272


# Storyboardを使わないプロジェクトの設定をします
やり方知らないかたは[こちらの記事どうぞ](https://qiita.com/Imael/items/e908aef1e6fc077f29fc).  

# コードです
今回はできるものはオートレイアウトの優先度は関係のないものです
書き方だけ参考になればと思います。

```swift
import UIKit

class ViewController: UIViewController {
    var topView: UIView!
    

    override func viewDidLoad() {
        super.viewDidLoad()
        view = UIView()
        view.backgroundColor = .white
        
        topView = UIView()
        topView.backgroundColor = .red
        topView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(topView)
        
        // オートレイアウトの制約
        let constraint = topView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        // レイアウトの制約を有効化
        constraint.isActive = true
        // オートレイアウトの優勢度
        constraint.priority = .defaultHigh
        // 優先度がの数値を確認
        print(constraint.priority)
        
        
        let constraints: [NSLayoutConstraint] = [
            topView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            topView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            topView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            topView.heightAnchor.constraint(equalToConstant: 100),
            
        ]
        NSLayoutConstraint.activate(constraints)
       
    }


}
```

#### ここで優先度変えてます。
```swift
// オートレイアウトの制約
        let constraint = topView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        // レイアウトの制約を有効化
        constraint.isActive = true
        // オートレイアウトの優勢度
        constraint.priority = .defaultHigh
        // 優先度がの数値を確認
        print(constraint.priority)
```

#### defaultHighとdefaultLowがあります。
```swift
        // オートレイアウトの優勢度
        constraint.priority = .defaultHigh //750
```
```swift
        // オートレイアウトの優勢度
        constraint.priority = .defaultLow //250
```
#### こうすると好きな数値入れられます。
```swift
        // オートレイアウトの優勢度
        constraint.priority = .init(rawValue: 333)
```
# おわり
サンプルです
https://github.com/kabikira/AutoLayoutPriority
aapt2またはNDKバージョンの不一致でAndroidビルドが失敗する時の対処法【Mac】

# 目次
1. はじめに
1. 解消方法
1. 最後に


# はじめに
VoltMX Iris（またはVisualizer）でAndroidビルドを行うと、
「"aapt2"は開発元を検証できないため開けません。」とポップアップが表示されたり、
「No version of NDK matched the requested version 21.0.6113669. Versions available locally: 22.1.7171670, 22.1.7171670」等と表示されビルドが失敗してしまうケースがあります。

今回はこの解消方法について説明したいと思います。


# 解消方法
## aapt2エラー
![スクリーンショット 0005-03-16 11.08.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/168276e5-96ce-3de2-5c4e-469d0fe02fbe.png)

上記のようなポップアップが表示され、ビルドが失敗してしまう場合は、
システム環境設定でaapt2を許可することで解消することができます。

参考：

https://www.iodata.jp/support/qanda/answer/s30503.htm

まずaapt2のエラーポップアップが表示されたらボタンはクリックせず、
Macのシステム環境設定->セキュリティとプライバシークリックします。

以下のような画面が開くので、「このまま許可」をクリックします。
![スクリーンショット 0005-03-16 11.10.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/7dcbc6e9-6431-c1c1-c447-1efae77dd0a0.png)

先ほどのポップアップは一度閉じて、再度Irisでビルドを行います。
すると以下のようなポップアップが表示されるので、「開く」をクリックするとビルドが成功します。

![スクリーンショット 0005-03-16 11.20.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/202e982b-4926-4538-1bcc-14993c0d48d2.png)

## No version of NDK matched~エラー
「No version of NDK matched the requested version 21.0.6113669. Versions available locally: 22.1.7171670, 22.1.7171670」等のエラーメッセージが表示される場合、
「Versions available locally:〜」の後に記載のあるNDK versionをAndroid Studioでダウンロードするか、
`build.gradle`に対象のバージョンを記載することで解消することができます。

参考：

https://wasabeef.medium.com/android-%E3%81%A7%E3%83%93%E3%83%AB%E3%83%89%E6%99%82%E3%81%AB-no-version-of-ndk-matched-the-requested-%E3%81%A8%E3%81%84%E3%81%86%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E5%87%BA%E3%82%8B%E5%A0%B4%E5%90%88%E3%81%AE%E7%90%86%E7%94%B1%E3%81%A8%E5%AF%BE%E5%87%A6-6826498426c

Iris（またはVisualizer）で`build.gradle`を設定したい場合、
Project SettingsのNative->Android->Manifest Permissionsの
Gradle Entriesタブ内にある「build.gradle entries to Suffix」に記述することができます。

こちらに「Versions available locally:~」以降に記載されたNDKのバージョンを指定してDoneをクリックします。
 ![スクリーンショット_0005-03-17_17_53_18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/00591e32-047d-8970-19c2-acac6bc6330a.png)
設定が完了したら再度Androidでのビルドを実行してください。

# 最後に
Androidでのビルドは成功したでしょうか？
もし今回紹介した方法でも引き続きエラーが出てしまう場合は、
ビルド時のログを確認することが一番の近道です。

ログの見方はこちらの記事をご参考ください👀

https://qiita.com/Kony_Team/items/41c94e7d8225306eb1b4#6%E3%83%AD%E3%82%B0%E3%82%92%E8%A6%8B%E3%81%A6%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%AE%E5%8E%9F%E5%9B%A0%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B

同じ現象で困った方がいれば、今回紹介した方法を参考にしてみてくださいね🙌
AWS SSOでCLIを使うためにログインのスクリプトを書いてみたかった


# 概要
AWS SSOで
CLIを使うときに
ブラウザを指定して、ログインする
そんなスクリプトを作りたかった話です。


ログインスクリプト全自動ではないです。
練習がてら書きます。

## そもそものAWS SSOでログイン
複数のAWSアカウントを設定する場合が増えてきました。
AWS SSOのURLでログインした後、各自利用するアカウントに遷移して利用しています。
CLIで使う場合は、CLIで設定して、各自利用するアカウントのプロファイルを作成します。
たたし、CLIの場合、認証切れるたびにブラウザログインが必要です。
面倒なのですが、どうやらそれを簡単に克服する機能はないようでした。

その辺のこと、忘れないようにメモしておきます。


## SSOのAWSCLI設定

下記にて、設定を作成する。
~~~
aws configure sso
~~~

必要なのはSSOログインするURLとアカウント
プロファイル名がデフォルトだと不思議な文字列(アカウントIDとかいろいろ)になるので
わかりやすいものに変えた方がいいです。

## CLIのログイン
だいたい1日一回程度は必要です。

~~~bash
aws sso login --profile ${設定したプロファイル名}
~~~

コマンド実行するとブラウザが開くので、ログインします。
ここまで公式通り。


## AWSCLI ログインスクリプト
普通に書くだけなのですが、ブラウザを指定して開きたかったので
下記をcli-login.shとして作成して使ってます。
※GitBash入れただけの普通のWindows環境です

~~~bash
#! /bin/bash
export BROWSER='/c/Program Files/Google/Chrome/Application/chrome.exe'
aws sso login --profile ${設定したプロファイル名}
~~~


一応PowerShellの場合
~~~powershell 
$Env:BROWSER="C:/Program Files/Google/Chrome/Application/chrome.exe"
aws sso login --profile ${設定したプロファイル名}
~~~


参考
[AWSの公式](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/sso-configure-profile-token.html)
S3に存在しないファイルを見つけ出すコマンドを書こう

## 課題
手元にファイル名100個があります。
100個のファイルの中にS3に存在するファイルと存在しないファイルを見つけ出したい。

## コマンドの例

```
aws s3 ls s3://<bucket>/<path1> >> exist.txt || echo <path1> >> not_exist.txt
aws s3 ls s3://<bucket>/<path2> >> exist.txt || echo <path2> >> not_exist.txt
aws s3 ls s3://<bucket>/<path3> >> exist.txt || echo <path3> >> not_exist.txt
...
```

## 原理
ファイルが存在する場合`||`前半のコマンドのみ実行され、
ファイルが存在しない場合`||`後半のコマンドが実行され、
これて、存在するファイルと存在しないファイルが両方ファイルに出力される。
Nginxを使ってフロントエンドとバックエンドを連携させる

こんにちは。フロントエンドリスキリングおじさんです。  
[前回の問題点](https://qiita.com/fsdg-r-moriyama/items/904ecfb241a34998be89#%E3%81%93%E3%81%AE%E5%AE%9F%E8%A3%85%E3%81%AE%E5%95%8F%E9%A1%8C%E7%82%B9)を受けて、
フロントエンドとバックエンドの両方を同じポートでアクセスできるよう、環境構築します。

## 前提情報
### 実施時期
2023年3月  
### 実行環境
Windows 11

## やりたいこと
フロントエンド: 3000ポート  
バックエンド： 8080ポート  

でそれぞれ動いているが、
フロントエンド→バックエンドのAPIへのアクセスにおいて、  
相対的にアクセスさせたい  
×: "http://foo.bar.baz:8080/api/*"
〇: "/api/*"

## 実現方法
Nginxを先頭に立たせ、エンドポイントによってアクセスを3000ポートと8080ポートに転送する  

### Nginxの準備
#### Nginxのダウンロード
[公式ページ](https://nginx.org/en/download.html)からダウンロードし、好きなところに解凍します。  
執筆時点では、安定版の"nginx/Windows-1.22.1"を使いました。

#### nginx.confの編集
conf配下のnginx.confを編集します。  
なお、デフォルトでコメントアウトされているところは省略しています。
```conf:nginx.conf
http {
    include       mime.types;
    default_type  application/octet-stream;

    server {
        # Nginxがlocalhost:80でアクセスを受け付けます。
        listen       80;
        server_name  localhost;
        proxy_set_header    Host    $host;
        proxy_set_header    X-Real-IP    $remote_addr;
        proxy_set_header    X-Forwarded-Host       $host;
        proxy_set_header    X-Forwarded-Server    $host;
        proxy_set_header    X-Forwarded-For    $proxy_add_x_forwarded_for;

        # "http://localhost/"配下のアクセスは3000番ポートに転送します。
        location / {
            proxy_pass    http://localhost:3000/;
        }

        # "http://localhost/api/"配下のアクセスは8080番ポートに転送します。
        location /api/ {
            proxy_pass    http://localhost:8080/api/;
        }
    }
}
```
これでNginxの設定は完了です。

### フロントエンドの改修
前回のソースから、以下のように改修します。
```diff_typescript:App.tsx
~~~省略~~~

- const url = "http://localhost:8081/api/hello"; // バックエンドAPIのURL
+ const url = "/api/hello"; // 相対パスに変更

  useEffect(() => {
    axios.get(url).then((response) => {
      setGreet(response.data); // APIのレスポンスをgreetに詰める
    });
  }, []); // 第二引数の配列に入れた変数が更新されるたび、第一引数の内容が再実行される。今回は再実行の必要は無いので空

~~~省略~~~
```

## 検証

### 各種アプリの起動
#### Nginxの起動
以下のコマンドでNginxを起動します。
```sh
cd <Nginxディレクトリ>
start nginx
```

なお、下記コマンドでNginxを停止できます。
```sh
cd <Nginxディレクトリ>
nginx -s stop
```

#### フロントエンド、バックエンドの起動
フロントとバックエンドも起動させておきます。
```sh
cd <フロントエンドのプロジェクトルート>
npm start
```

### localhost:80へアクセスしてみる
Nginxが開放している80番ポートにアクセスしてみます。
![success.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3213461/1182b979-e57c-dade-f5f3-c5e300a4137e.png)

バックエンドのAPIの結果が表示されました。

### localhost:3000へアクセスしてみる
では、フロントのlocalhost:3000へアクセスするとどうなるでしょうか。

![loading.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3213461/d6ecde21-1ac0-3bfe-7f10-ee0f4ce6c7ba.png)
挨拶文は表示されず、ぐるぐるだけが表示されています。

![404.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3213461/4a4af059-ac9d-b29d-46ba-5e8303886f23.png)
ブラウザの開発者ツールで見てみると、  
localhost:3000/api/helloにアクセスしようとして404が返ってきました。  
"/api/hello"にアクセスできるのは、
- 80番ポート(Nginx)経由
- 8080番ポート(もともとのバックエンドサーバのポート)経由
そのどちらかのみだからですね。

## まとめ
Webシステム制作を学ぶにあたり、  
「フロントとバックそれぞれは作れたけど、どうやって連携するか？」は、  
最初の壁だと思います。  
「こんな感じで解決できるのか～」と感じていただければ幸いです。
【コントリビュータ募集】ONLYOFFICEのドキュメントを書く

もしONLYOFFICEを使う上でのヒントやコツをご存知で、ある機能の使い方の情報が足りないと思う場合、ONLYOFFICEのコントリビュータになっていただき、ドキュメントを書いてくださる方を募集しています。新しいブログ記事、チュートリアル、ビデオスクリプトを英語/日本語で書くことで、ONLYOFFICEはもっと多くの人に知られるでしょう。

ONLYOFFICEチームは、どんなハードワークでも公平に報われるべきだと考えています。そのため、協力者には報酬制度をご用意しております。

参加するには、[documentation@onlyoffice.com](mailto:documentation@onlyoffice.com)までリクエストをご送信ください。

## 参加条件

ONLYOFFICEドキュメントへの貢献は、どなたでも行うことができます。特にONLYOFFICEユーザーによる投稿を歓迎します。唯一の要件は、英語/日本語の知識があることです。この条件を満たしている方は、ぜひご協力ください。

## 公開プロセス

公開のプロセスは、応募、執筆、修正、公開となります。

１．**応募する**：トピックのアイデアを添えて、プログラムに応募してください。すべての応募は、documentation@onlyoffice.comまでお願いいたします。

:::note warn
インスピレーションが必要な場合は、[トピックの提案リスト](https://bit.ly/3bPigGb)をご覧ください。
または、documentation@onlyoffice.comまでご連絡ください。
:::

２．**執筆する**：トピックが承認されたら、いよいよ執筆です。
３．**推敲する**：初稿を提出し、私たちのチームのメンバーと共同で記事を修正します。
４．**公開する**：修正後、報酬をお送りし、コンテンツを公開します。

## 貢献度報酬

努力は報われるべきものなので、ONLYOFFICEプロジェクトに貢献することで、以下を得ることができます。

* ユーザー制限なし、2GBのストレージを持つONLYOFFICEクラウドを無料で利用できます。
* ONLYOFFICEセルフホストソリューションの割引。
* [ONLYOFFICE Home Server](https://www.onlyoffice.com/ja/home-use.aspx)を無償で提供します。