OmniAICreator/Qiita-1.07M huggingface dataset:
An error occurred while installing mysql2 (0.5.3), and Bundler cannot continue. Make sure that `gem install mysql2 -v '0.5.3' --source 'https://rubygems.org/'` succeeds before bundling.

# 誰もが1回はぶち当たったことであろう問題

`rails new 〜 -d mysql` でアプリ作って、`bundle install` したら発生するこのエラー。
もういい加減呆れ果てたので解決方法をまとめます。

# 環境

`MacBook Air (M1, 2020)`
`Ruby 3.0.2`
`Rails 6.1.4`

# 解決方法

先に結論から。
こちらのコマンドを実行後、`bundle install` したら成功します。（2022/02/02修正）

```diff:terminal
- bundle config --local build.mysql2 "--with-ldflags=-L/opt/homebrew/lib --with-opt-dir=/opt/homebrew/opt/openssl"
+ bundle config --local build.mysql2 "--with-ldflags=-L/usr/local/opt/openssl/lib"
```
<!-- これはダメだったヤツ -->
<!-- % bundle config --local build.mysql2 --with-ldflags=-L/opt/homebrew/Cellar/zstd/1.5.0/lib -->
<!-- % bundle config --local build.mysql2 --with-ldflags=-L/usr/local/opt/openssl/lib -->

# ここからは原因調査（執筆中。。。）

まずはエラーメッセージを振り返ろう。

```terminal:terminal
〜〜〜　前略　〜〜〜

2 warnings generated.
compiling infile.c
compiling mysql2_ext.c
compiling result.c
compiling statement.c
linking shared-object mysql2/mysql2.bundle
ld: library not found for -lzstd
clang: error: linker command failed with exit code 1 (use -v to see invocation)
make: *** [mysql2.bundle] Error 1

make failed, exit code 2

〜〜〜　後略　〜〜〜
```

この中の `ld: library not found for -lzstd` に注目。
日本語に直訳すると `zstdのためのライブラリが見つからへん` となりますね🤔

***〜〜〜 以降追記予定（2021.07.23 現在） 〜〜〜***


# 参考記事

- [bundle installでmysql2がエラーになる件](https://qiita.com/SAYJOY/items/dd7c8fc7a3647e7ff969)
- [Stack overflow](https://stackoverflow.com/questions/67840691/ld-library-not-found-for-lzstd-while-bundle-install-for-mysql2-gem-ruby-on-mac)
- [rails の bundle install で mysql2 library not found for -lzstd, -lssl エラー](https://nomad.office-aship.info/library-not-found-for-lzstd-lssl/)
- [macでmysql2がbundle installできない時](https://qiita.com/tatama/items/5e6c7c0ba1a2ba7ff9d3)
- [【Rails】MySQL2がbundle installできない時の対応方法](https://qiita.com/fukuda_fu/items/463a39406ce713396403)
Qiitaで記事にcodepenを埋め込み

https://qiita.com/Qiita/items/edae7417214c8e957f54?utm_source=Qiita%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9&utm_campaign=5182d85711-Qiita_newsletter_295_01_24_2018&utm_medium=email&utm_term=0_e44feaa081-5182d85711-33849153

以下はEmbed→HTML (Recommended)をコピペ、そのまま貼り付け

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="NWjwbZZ" data-user="rintaro0726" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/rintaro0726/pen/NWjwbZZ">
  </a> by Rintaro0726 (<a href="https://codepen.io/rintaro0726">@rintaro0726</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
Rails on Docker　アセットプイコンパイルで困ったこと

## はじめに
Docker+Ruby on Rails でアプリケーションを作り、AWSのEC2上にデプロイする際、
プリコンパイルしたファイルが見つからなくて苦労した。そこで調査したことをメモします。

## アセットプリコンパイル
production環境では処理速度に対する影響を防ぐために自動でコンパイルされない。
そのため、事前にアセットプリコンパイルしなければならない。

```
$　docker-compose run app assets:precompile
```
上記のコマンドを実行するとpublicコマンドにassetsディレクトリが作成され、プリコンパイルされたファイルが格納される。
しかし、publicディレクトリを確認してもassetsファイルがないという現象がおきました。

## 原因
コンテナ内でプリコンパイルしていたため、ホスト側にファイルを確認できなかった。

## 解決方法

### 1 dockerコンテナからホスト側にコピーする
```
docker cp [コンテナID]:[コピーしたいファイルパス] [ローカルにコピーしたいパス]
```
### 2 ホスト側でassets:precompileを実行する。
```
bin/rails assets:precompile
```

## 参照
https://qiita.com/hgaiji/items/97f3f924cab99329c36f
【Strix】PhotonからStrix Cloudに移行してみた ～オブジェクト同期編～

今記事は以下の記事のオブジェクト同期編です。

https://qiita.com/HarumaroJP/items/cf9034bcf7f5e73d2b5e

まだメインの記事を読んでない方はそちらから読んでいただけると幸いです。

Strix Cloudにおけるオブジェクト同期までを解説していきたいと思います。

##変数の同期
変数を同期するには`MonoBehaviour`の代わりに`StrixBehaviour`を継承させたコンポーネントで同期します。
また、変数を同期する方法は2つあります。

###StrixSyncField 属性を付ける
```C#
[StrixSyncField]
public int hp = 100;

[StrixSyncField]
public bool isAlive = true;
```
シリアル化可能なフィールドであれば、変更がすべての所有者で自動的に同期されます。

###シリアル化メソッドを利用する

```C#
public int hp = 100;
public bool isAlive = true;

//フィールドをシリアライズする（ローカルでのみ実行）
public override void OnStrixSerialize(StrixSerializationProperties properties)
{
    base.OnStrixSerialize(properties);
    properties.Set(0, hp); //properties.Set(変数の識別ID, 同期したいフィールド)
    properties.Set(1, isAlive);
}

//フィールドをデシリアライズする（リモートでのみ実行）
public override void OnStrixDeserialize(StrixSerializationProperties properties)
{
    base.OnStrixDeserialize(properties);
    properties.Get(0, ref hp); //properties.Get(変数の識別ID, 同期したいフィールドを参照渡し)
    properties.Get(1, ref isAlive);
}
```
特徴としては、フィールドに識別IDを付ける部分です。
PUN2では必ず送信順に受信する必要がありましたが、Strixでは順番は関係ありません。
順番を間違えてバグの温床になったりしていたのでこれはありがたいですね。

##Transform & Animator の同期
上の変数を同期する方法で座標も同期できるので基本的に説明は省きますが、
Strix側でTransformとAnimatorを同期できるコンポーネントが用意されてます。

**StrixMovementSynchronizer**

https://www.strixengine.com/doc/unity/guide/ja/unitysdk/synchronization/movementsync.html

**StrixAnimationSynchronizer**

https://www.strixengine.com/doc/unity/guide/ja/unitysdk/synchronization/animationsync.html

`StrixMovementSynchronizer`は細かく設定できますが、結構面倒なので少し微妙です。
シンプルなPUN2の`PhotonTransformView`のStrix版を[GitHub](https://github.com/HarumaroJP/Strix-Cloud-ex)に上げたので、そちらも参考にしてみてください。

次回はStrixにおけるRPC & MessageRelayを解説します！
[【Strix】PhotonからStrix Cloudに移行してみた ～RPC & MessageRelay編～](https://qiita.com/HarumaroJP/items/9c519f3ae6cf852fbb71)

##参考リンク
変数の同期

https://www.strixengine.com/doc/unity/guide/ja/unitysdk/synchronization/variablereplication.html
parse_urlを使ってURLパラメーターが含まれたURLで適切なファイルを読み込む方法

#はじめに

現在phpを使ってバックエンドの基礎を学習しています。
その中で、つまづいたポイントと対処法を記事にします。

#環境

MAMP(Apache、MySQL、PHP)を使ってバックエンド開発

#URLパラメーター
PHPを使ってバックエンド開発を勉強していますが、
URLの末尾に?をつけてパラメーターを渡すことで、リダイレクトした先の表示を柔軟に変更させることができます。

例えば

```
/hoge/bar/foo?var=1000
```

のようなURLにGETリクエストを送信した場合、

```
$_GET['var']
```
というグローバル変数に、1000が格納されるので、これを使って画面表示を変化させることができます。

例えば、example.view.phpに次のようなコードを記述してみます。

```
<?php
namespace view\example

function index($var){
?>
 <span><?php echo $var?></span>
<?php
}
?>
```
これを使って、example.controller.phpを次のようにしてみます。

```
<?php
namespace controller\example

function get(){
 \view\example\index($_GET['var']);
}
?>
```

そして、先程の

```
/hoge/bar/foo
```

にリクエストを送ると、example.controller.phpを読み込むように設定しておいたとします。

すると、

```
/hoge/bar/foo?var=1000
```

にgetリクエストを送ったときの表示画面は

```
1000
```

となり、

```
/hoge/bar/foo?var=500
```

の時は

```
500
```

になります。

#つまづいたポイント
先ほど

```
/hoge/bar/foo
```

にexample.controller.phpを対応させました。

すると、パラメーターをつけた状態の

```
/hoge/bar/foo?var=1000
```

というパスは、当然のことながら/hoge/bar/fooとは別ものですので、そのまま上記のパスにgetリクエストを送ってもexample.controller.phpは読み込まれません。

そこでparse_urlを使います。

```
$url = parse_url('/hoge/bar/foo?var=1000');
```
とすると、引数に渡されたパスは、
'path' => ?より前の文字列
 'query' => ?より後の文字列
のように、分割されて連想配列に格納されます。

なので、今回の場合

```
$url['path'] = '/hoge/bar/foo'
$url['query'] = 'var=1000'
```
というふうに分割されて格納されることになります。

これを、リクエストが送られてきた際に毎回実行することで、
URLパラメーターがくっついているURLに関しては$url['path']にリクエストを送るように処理を変更してやることができます。?var=1000がくっついていないのでちゃんとexample.controller.phpを読み込んでくれます。また、
$_GET['var']にはパラメーターが格納されたままなので、表示画面の変更には支障はありません。

#まとめ

今回は、URLパラメーターが含まれたURLにリクエストを送ったときに、パラメーターに邪魔されずに適切なファイルを読み込めるようにする方法について紹介しました。

参考になりましたら幸いです。
Lambda非同期呼び出し：エラー時のリトライ

- Lambda
    - 同期呼び出し（`RequestResponse`）（本記事の対象外）
    - **非同期呼び出し**（`Event`）（本記事の対象）
        - **呼び出しエラー**（同時実行数制限、権限不足など）
        - **関数エラー**（関数コードにおける例外発生、メモリ不足、タイムアウトなど）

非同期呼び出しの場合、デフォルトでは、呼び出しエラーは最大6時間再試行、関数エラーは2回リトライされる。
これらの値はLambda関数ごとに設定ができる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79394/0385a659-8609-fd9a-a40a-54e148a54df7.png)

下図は関数コードにおいて例外発生させ、2回リトライさせたときのログ。
![スクリーンショット 2021-07-23 22.19.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79394/8eab670a-c52f-0166-15be-0b7e85d0763d.png)

- [最初の 2 回の試行の間に 1 分間、2 回目と 3 回目の間に 2 分間の待機時間があります。](https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/invocation-async.html)
- `RequestId` が全て同じ値である
 
ことが見て取れる。
AWS JavaScript SDKで発生する例外とエラーコード

[SDKのドキュメント](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/DynamoDB/DocumentClient.html#put-property)にはどんな場合にどんな例外が発生するのか明記されていないが、対応する[AWS API Reference](https://docs.aws.amazon.com/amazondynamodb/latest/APIReference/API_PutItem.html#API_PutItem_Errors)にはエラーコード一覧が明記されている。

例えば、`AWS.DynamoDB.DocumentClient.put()` ではどんな例外が発生しうるのか？
[対応するAWS API Reference](https://docs.aws.amazon.com/amazondynamodb/latest/APIReference/API_PutItem.html#API_PutItem_Errors)を見ると

>ConditionalCheckFailedException
>A condition specified in the operation could not be evaluated.
>
>HTTP Status Code: 400

のようにエラーコードが明記されている。
APIがエラーコードを返す場合、SDKでは例外発生となり、`error.code`　のどちらでもそのエラーコードを取得できるようだ。

```javascript
try {
    let data = await docClient.get(params).promise();
    console.log(data.Item);
} catch (err) {
    console.log(err.code);
    if (err.code == "ConditionalCheckFailedException") {
        console.log("...");
    }
}
```

## 参考
- [レスポンスオブジェクトの使用](https://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v2/developer-guide/the-response-object.html)
[Saas]mixinを使って簡潔にコードを記述する

#はじめに

変数を使って同じカラーを簡潔に記述の仕方は前回学びました。

↓↓↓

https://qiita.com/N396184501/items/654aba97278f2af73337

今度はmixinというものを使ってより簡潔なコードを記述したいと思います。

#mixinとは

>@mixinディレクティブは、ミックスインとも呼ばれており、スタイル定義を再利用するための仕組みです。@mixinディレクティブでスタイルを定義して、@includeディレクティブで使う場所に埋め込みます。

> [Pikawaka](https://pikawaka.com/html-css/sass#2.%20@mixin%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96) 引用

#試しに使ってみた

```scss
body {
  .content {
    width: 100%;
    height: 100px;
    margin-top: 10px;
  }

  .content-1 {
    width: 100%;
    height: 100px;
    margin-top: 10px;
  }

  .content-2 {
    width: 100%;
    height: 100px;
    margin-top: 10px;
  }
}
```

ざっくりですがこのような記述があったとします。
同じ記述がたくさんあり簡潔にしたいなーと思った時、`mixin`を使います。

```scss
@mixin hoge {
   width: 100%;
   height: 100px;
   margin-top: 10px;
}
```

`@mixin mixin名 { コード }`このように定義する事ができます。
あとは`@include mixin名`と記述すればOKです。

```scss
@mixin hoge {
   width: 100%;
   height: 100px;
   margin-top: 10px;
}

body {
  .content {
    @include hoge;
  }

  .content-1 {
    @include hoge;
  }

  .content-2 {
    @include hoge;
  }
}
```
応用情報技術者試験に向け勉強してみた~コンピューター編〜

#LSIについて
LSIとはlarge scale integrationの略
大きな集積回路を集めたもの
システムLSIとはシステムに必要な複数の必要な機能をまとめたもの
##SoCとは
SoCとはSystem on a chip
複数の機能を一つにまとめた半導体製品
システムLSIとほぼ同義で用いられる
##SiPとは
SiPとはsystem in package
複数のLSIを一つのパッケージにまとめられたもの
##カスタムICとは
自身の設計した回路をそのままICとして製造したもの
このように特別な用途のために設計、製造されたICのことをASIC（Aplication Specific Integrated Circuit)という。コストが掛かる。
##PLDとは
設計した回路を電気的に書き換えることができる。
Programable Logic Deviceの略
代表格はFPGA（Filed Programmable Gate Array)
HDL（Hardware Description Language）で設計される。
Tailwindcssを使ってカードデザインを作ってみた！

![rectangle_large_type_2_005455f1162dd165f077f0261dd84bdd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415529/4174924d-f7ac-098c-b52f-d9821dcce642.png)

Tailwindcssとは、ユーティリティファーストのCSSフレームワークです。

https://tailwindcss.com/

ユーティリティファーストなのでCSS設計など考慮しなくてもいいので、個人的に好きです！

## Tailwindcssのカードデザイン

codepenに残しておいたのでHTMLのコードはそこから拾って使ってみてください。

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="xxdPOma" data-user="usu-blog" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/usu-blog/pen/xxdPOma">
  tailwindcss-card</a> by usu-blog (<a href="https://codepen.io/usu-blog">@usu-blog</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### できなかったこと
- 当然ですがクリック時の「ripple efect」（波紋のアニメーション）の表現ができないのは残念ですね...。
- ボタンを押した後のアクションなどの指定をしたかったのですが、設定ファイルに記述が必要でCDNでは無理そうでした。
→ したがってフォーカス時の色を変えるような指定で対応してみました。

## ひとこと
こまったときは、公式ドキュメントがしっかりしているので最初は調べること多いかもですが慣れると直感で大体わかるのでとても良いかと思います！
また他のコンポーネントにも挑戦してみようと思います😆
[MAC] VsCode C++ ファイル入力でのデバッグ

# はじめに
競技プログラミングでデバッガを使うとき、何度もサンプルを入力させるのは面倒ですよね？

```command
~$ ./a.out < sample
```
のような感じのことをデバッグするときにも行う方法を書きます。

#環境
macOS Catalina 10.15.6

#手順
- デバッグ用のビルドを行う(gccならg++ -g -o0)
2. CodeLLDBをインストールする
3. launch.jsonを以下のように設定する
このとき、"stdin"の部分がファイルの入出力を示す。 

```json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "lldb debug",
            "type": "lldb", //typeをlldbにすることでCodeLLDBが使える
            "request": "launch",
            "program": "${workspaceFolder}/a.out",//ビルドした実行ファイルの場所
            "args": [],
            "cwd": "${workspaceFolder}",
            "stdio": ["${workspaceFolder}/sample.in"],//標準入出力したいファイル
        }
    ]
}
```

- sample.inというファイルをワークスペースに作成し、ここに読み込ませたい標準入力を保存する
5. これでデバッガを起動させると、標準入力部分には自動的にsample.inで記述した内容が読み込まれる

#最後に
sample.inへ入力内容を記述すれば、コードを書き直してデバッグするたびに入力をコピペする必要がなくなります。
ニューラルネットワークの構造を描くのツールまとめ

###ニューラルネットワークの構造を描くツールをまとめた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1668082/94cd3ac9-ad00-c18d-d5dd-ef803c9584b8.png)
[draw_convnet](https://github.com/gwding/draw_convnet)
![微信图片_20210723174534.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1668082/a772a68b-f4f6-ef87-1347-d3aa012cec37.png)
NN-SVGより
#オンライン
##1.[NN-SVG](http://alexlenail.me/NN-SVG/LeNet.html)
##2.Latexの[tikz](https://texample.net/tikz/examples/)
##3.[Draw freely|Inkscape](https://inkscape.org/)
##4.[draw.io](https://app.diagrams.net/)
##5.[Net2Vis](https://viscom.net2vis.uni-ulm.de/OG1Br2BAkYSwwrV6CADl4X5EfErFjUzvuUwXWDdLbdsIXNhb9L)
##6.[Graphviz](http://www.graphviz.org/)
##7.[Conx](https://conx.readthedocs.io/en/latest/index.html)
##8.[ENNUI](https://math.mit.edu/ennui/)
##9.[Visualizing neural network from the nnet package](https://beckmw.wordpress.com/2013/03/04/visualizing-neural-networks-from-the-nnet-package/)
##10.[TensorSpace](https://tensorspace.org/)
##11.[Netscope CNN Analyzer](http://dgschwend.github.io/netscope/quickstart.html)
##12.[GRAPHCORE](https://www.graphcore.ai/posts/what-does-machine-learning-look-like)
##13.[Keras](https://keras.io/api/utils/model_plotting_utils/)
##14.[Keras.js](https://transcranial.github.io/keras-js/#/inception-v3)
##15.[TensorBoard](https://www.tensorflow.org/tensorboard/graphs)
##16.[Neatapic](https://wagenaartje.github.io/neataptic/)
#Github
##17.[PlotNeuralNet](https://github.com/HarisIqbal88/PlotNeuralNet)
##18.[Netron](https://github.com/lutzroeder/Netron)
##19.[visualkeras for Keras/TensorFlow](https://github.com/paulgavrikov/visualkeras/)
##20.[Caffe](https://github.com/BVLC/caffe/blob/master/python/caffe/draw.py)
##21.[Sequential model in Keras](https://github.com/stared/keras-sequential-ascii/)
##22.[Create a drawing of a feed-forward neural network](https://github.com/martisak/dotnets)
##23.[Quiver](https://github.com/keplr-io/quiver)
##24.[moniel](https://github.com/mlajtos/moniel)
##25.[draw_convnet](https://github.com/gwding/draw_convnet)
#And
##26.Python
##27.R
##28.PPT
【Strix】PhotonからStrix Cloudに移行してみた ～プレイヤー＆オブジェクト編～

今記事は以下の記事のプレイヤー編です。

https://qiita.com/HarumaroJP/items/cf9034bcf7f5e73d2b5e

まだメインの記事を読んでない方はそちらから読んでいただけると幸いです。

Strix Cloudにおけるプレイヤーの扱いまでを解説していきたいと思います。

##ネットワークオブジェクトの生成

PUN2では`PhotonView`コンポーネントでオブジェクトを管理していました。
Strixでは`StrixReplicator`コンポーネントでオブジェクトを管理します。

GameObjectに`StrixReplicator`コンポーネントをアタッチします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409758/4c77cf46-7bb8-e5f4-4c76-9d48bac63dc1.png)

後は普通にGameObjectをロードして、`Object.Instantiate()`で生成することができます。
PUN2のように特殊な関数は使用する必要はありません。

###StrixReplicatorコンポーネント

`StrixReplicator`のプロパティを比較すると以下の表のように置き換えられます。

|PUN2|Strix|説明|
|:--:|:--:|:--:|
|Owner|roomMember|PUN2では`Player`クラス<br>Strixでは`CustomizableMatchRoomMember`クラスで管理します|
|IsMine|isLocal|同じbool型で取得できます|

それ以外でよく使うプロパティ

|名前|説明|
|:--:|:--:|
|sendRate|1あたりにプロパティを更新する頻度です。高くしすぎると通信を圧迫します。|
|ConnectionClosedBehaviour|接続が失われたときの動作です。<br>Destroyしてほしいときは`Delete`<br>Ownerを引き渡すときは`ChangeOwner`|
|syncDestroy|オーナーのオブジェクトが破棄されたときに、このオブジェクトが破棄されるかを決めます。|



##Strixにおけるプレイヤーの扱いとID

プレイヤー情報はPUN2では`Player`クラスですが、
Strixでは`CustomizableMatchRoomMember`で管理します。

|PUN2|Strix|説明|
|:--:|:--:|:--:|
|ActorNumber|GetPrimaryKey()|`ActorNumber`は`primaryKey`と同義です|
|NickName|GetName()||
|CustomProperties|GetProperties()|PUN2では`Hashtable`ですが<br>Strixでは`Dictionary<string,object>`です|

###自身のプレイヤーの取得

```C#
    CustomizableMatchRoomMember localMember = StrixNetwork.instance.selfRoomMember;
```
:::note warn
ルームに参加していない際はnullになるので注意してください
:::

###プレイヤーのリストの取得
```C#
    IList<CustomizableMatchRoomMember> roomMembers = StrixNetwork.instance.sortedRoomMembers;
```
`primaryKey`順にソートされたリストです。`IList`型なので普通に配列のようにアクセスできます。

```C#
    IDictionary<long, StrixReplicator> networkInstances = StrixNetwork.instance.NetworkInstances;
```
`StrixReplicator`を取得したい場合はNetworkInstancesで`primaryKey`で取得できます。

次回はStrixにおけるオブジェクト同期を解説します！
[【Strix】PhotonからStrix Cloudに移行してみた ～オブジェクト同期編～](https://qiita.com/HarumaroJP/items/37f4d32ff27ee6d23b0b)

##参考リンク

https://www.strixengine.com/doc/unity/guide/ja/unitysdk/synchronization/replicator.html
MACのM1でcondaの仮想環境とローカルサーバーを作成する方法

macのM1チップが入ったmacbook　Areを購入したが、pythonの切り替えができずに悩んでいたら、M1ではHomebrewやpyenvを使うことができない（厳密には使えるらしいが難しい）とのことなので、仮想環境を作成してpython 3系を使えるようにする方法と、ローカルサーバーを作成する方法を試したのでお伝えします

# 動作環境
OS : macOS Big Sur　11.4

# 前提条件
* ターミナルが「Rosseta上なのか」「ARMアーキテクチャ上なのか」確認。
* 以下のコマンドを実行し、「arm64」と表示されればARMアーキテクチャ上で動いている

~~~
$ uname -m
arm64
~~~

# miniforgeのインストール
* 以下のURLから「Miniforge3-MacOSX-arm64」をダウンロード

https://github.com/conda-forge/miniforge

* ターミナルからダウンロードしたスクリプトを実行

~~~
$ cd Downloads
$ bash Miniforge3-MacOSX-arm64.sh
~~~

* 実行中にいろいろ聞かれますが、基本的にはYESで進めます

*　インストール後、以下のコマンドを実行し、頭に（base）がついたら仮想環境の実行が完了です

~~~
$ source ~/.zshrc
~~~

# python 3系が使用できる環境を作成

* 以下のコマンドを実行し、新しい仮想環境を作成する。作成時にpythonのバージョンを指定

~~~
$ conda create -n my_env python=3.9
~~~

* 作成した仮想環境に入る

~~~
$ conda activate my_env
~~~

* 仮想環境上でpythonのバージョンを確認し、3系のバージョンになっていれば成功です。

~~~
$ python -V
Python 3.9.6
~~~

# ローカルサーバーの起動

* python 3系の仮想環境を作成

~~~
$ conda create -n webapp_env python=3.9
~~~

* 仮想環境に入って、をインストール

~~~
$ conda activate webapp_env
$ conda install django
~~~

* プロジェクトの作成

~~~
$ django-admin startproject helloworld
~~~

* ローカルサーバーの起動

~~~
$ cd helloworld
$ python manage.py migrate
$ python manage.py runserver
~~~

* 以下のURlにアクセスしdjangoの画面が表示されれば成功

http://127.0.0.1:8000/

# 参照

https://github.com/osmszk/m1-mac-python-install
YourLifeReportを使用するために

#はじめに

###＊下のアプリの説明書のような記事となっています
<img width="100" alt="applicationImage" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550611/8f07a1c1-44d9-b91e-eeb2-2a91f17f64ca.png">
ダウンロードしていない人は下記のリンクからダウンロードしましょう。
[「AppleStore」](https://apps.apple.com/jp/app/yourlikereport/id1578081926)
＊アプリ名間違えています💦
#目次
1. このアプリについて
2. スプレッドシートに関して
3. GASに関して
4. アプリ内設定に関して 

#このアプリに関して
日報をアプリで記録し、スプレッドシートで管理するようなアプリケーションとなっています。
秒単位での計測が可能となっています。

###毎日秒単位で何やってるのか記録して私生活をより良くするアプリ
開始ボタンで計測開始（開始時刻は記録）
終了ボタンで計測終了（終了時刻は記録）
なにをやったのか入力で記録
→スプレッドシートに自動転機
→毎日の記録が自動で「old」シートに転機されて、その日のシートはリセット

使用するまでにいくつかやるべきことがあるので下記を参考に設定してから使用ください。

#スプレッドシートに関して
このアプリではデータの管理にスプレッドシートを使用します。まずは下記のリンクに飛んでください。その後、新しいスプレッドシートにコピーをしましょう（これが自分のアプリ用のスプレッドシートとなります）
【コピーの仕方】
「ファイル」→「コピーを作成」で自分が好きな場所に保存しましょう。

[**コピーはこちらから**](https://docs.google.com/spreadsheets/d/1EyCO-gAsvH9rzYbbEO8uIVjKLfrRjYXGqrUhzldqJyA/edit#gid=0)

#GASに関して

次に「ツール」→「<>スクリプトエディタ」を選択してGASのスクリプトエディタ画面を開きましょう。

<img width="500" alt="applicationImage" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550611/64853d00-29d0-d3ae-dd0e-7deecfcbfc0c.png">

ここから2つやるべきことがあります。
##1.webアプリケーションとしてデプロイ
右上の「デプロイ」と書かれた青いボタンから「新しいデプロイ」を選択しましょう。
✔「新しい説明」
なんでもいいです。（わからない人は、Firstと入力しましょう）
✔「次のユーザーとして実行」
自分を選択しましょう。
✔「アプリケーションにアクセスできるユーザー」
全員にしてください。

ここまでできた人は「デプロイ」の青いボタンをクリックしましょう。

次にアクセスを許可します。
<img width="300" alt="applicationImage" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550611/c482fb25-995e-c034-6faf-5f23f6aa78a1.png">
✔「アクセスを承認」をクリック
✔自分のアカウントをクリック
✔「許可」をクリック

「このアプリは確認されていません」と出てきた場合
✔「詳細」をクリック
✔「安全ではないページに移動」クリック（クリックしづらいと思いますが大丈夫です）
✔「許可」をクリック

これで完了です。

**重要**
ここで表示されるURLを記録してください。
（iPhoneアプリ内で使用します）

ウェブアプリ
URL

```
https://script.google.com/macros/s/・・・・・・・・・・/exec
```

のこれです。

※忘れた場合などは同じ手順でデプロイを管理という画面で確認可能です。

##2.関数のトリガーを設定
次に左の方からトリガーを選択してください。
<img width="200" alt="applicationImage" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550611/1d29ab23-e7d6-0fc0-7ba3-fe07c04af58f.png">

✔右下の「＋トリガーを追加」をクリック
✔下のように設定をして「保存」をクリック
<img width="500" alt="applicationImage" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550611/91379c51-d962-ecde-7744-a98c828c90eb.png">

これでスプレッドシート、GASに関しての設定は終わりです。
お疲れさまでした。

#アプリ内設定に関して
先程メモしておいたデプロイURLを設定したら完了です。

アプリ内で「SpreadSheetのデプロイURL」の欄にコピペしましょう。
「注意」
このURLが間違っているとアプリがうまく作動しません。

#最後に
このアプリを通して私生活を振り返り、よりよい人生に！
Go言語の特徴

静的型付け言語（⇔動的型付け言語）である。

学習コストは低い

Google製である。

Linux,macOS,Windows,Android,iOSに対応

高速である。
コンパイル言語である。

並行処理が優れている。
Goroutine

Webサーバ開発
モバイルアプリケーション開発
ツール開発

ロブ・パイク氏（UNIX）＆ケン・トンプソン（UNIX＆C言語）が設計した。

時代に合わせて書きやすくしたC言語がGo言語
問題を解決した

#問題提出：
路面のセグメンテーション画像があります。真ん中には赤い車線分割線があり、両側に道路標示があります。反対側の車線の路面標示を隠したい（つまり、車線分割線の右側の路面標示を削除する）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1668082/cd5e320e-2b9c-c7b7-983c-5323e829a501.png)
#問題解決
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1668082/609ffe0b-beb6-66b7-6401-211d41851169.png)
##コード

```
import matplotlib.pyplot as plt
file_pth = "./data/3.png"
img = plt.imread(file_pth)
target = (0.5019608, 0, 0, 1)
width = img.shape[1]
height = img.shape[0]
x = []
y = []
for i in range(height):
   for j in range(width): 
       if abs(img[i, j, 0]-target[0])<0.01 and abs(img[i, j, 1]-target[1])<0.01 and abs(img[i, j, 2]-target[2])<0.01 and img[i,j,3] == target[3]:
           x.append(i)
           y.append(j)
l = len(x)
plt.subplot(121)
plt.imshow(img)
for i in range(l-1):
    if i != l-1 and x[i] == x[i+1]:
        continue
    for j in range(y[i], width):
        img[x[i], j, 0] = 0
        img[x[i], j, 1] = 0
        img[x[i], j, 2] = 0
plt.subplot(122)
plt.imshow(img)
plt.show()
```
基本的な手順は、各行の区画線（赤い線）の一番右のピクセルの座標を確定します。次に、各行で区画線の一番右のピクセルの右側にあるピクセルを全部黒にします。
flask 　SQL Alchemy簡単なまとめ

#概要
現在udemyにて
[The Python Mega Course: Build 10 Real World Applications](https://www.udemy.com/course/the-python-mega-course/)
を視聴中。その際に出てきた内容のまとめ.
Udemyの中だとめちゃくちゃ面白い。おすすめ


##1 flaskについて

templatesフォルダにindex.htmlの作成。合わせて、必要なhtmlファイルを作成
staticフォルダにCSSファイルの作成
templatesフォルダと同じ次元に、nnn.pyの作成


###① ルーティングについて

```
from flask import Flask

nnn=Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")
```

また、その他のページを作りたい場合は

```
@app.route("/任意の名前")
def index():
    return render_template("任意の名前.html")
```

とする。

###② 実行について

```
if __name__ == '__main__':
    nnn.debug=True
    nnn.run()
```

こうすれば、importとかで実行された場合でない時に、flaskが起動


##２ SQLALchemyについて
SQL Alchemyについては他の記事をググればわかりやすい記事が無限に出てくる。毎回コミットとかしなくていいからpycopg2よりいい、らしい。
e-mailアドレスと名前をSQLデータベースに登録するコード

###① コネクションの確立について

```
from flask_sqlalchemy import SQLAlchemy

nnn.config['SQLALCHEMY_DATABASE_URI']='postgresql://ID:パスワード@localhost/任意のテーブル' #
db=SQLAlchemy(nnn)　

```

###② テーブル名と各カラムの作成

```
class Data(db.Model):
    __tablename__=DATABASE"
    id=db.Column(db.Integer,primary_key=True)
    email_=db.Column(db.String)
    name=db.Column(db.String)


　　　　　　　　def __init__(self,email):
        self.email=email
　　　　　　　　　　　　　　　　self.name=name


```
この後、ターミナルで　dbをimportして、db.create_all()としてあげれば、無事連携が完了する。


###③ データベースにデータを送信する方法

１　index.htmlについて

```
<form action="{{url_for('任意の名前')}}" method="POST">
 <input name="email_name" required></br>
<input 　　name="user_name" required></br>
<button type="submmit">送付</buttuon>
</form>

```
{{url_for}}と書く必要があるのはjinjaがほにゃらら（まだよくわかってないので要勉強）。ボタンを押したら”任意の名前”ページに遷移
methodをPOSTにするのを忘れない（デフォはGET）
nameで設定したキーがpythonで使用される。

１　pythonについて




```
#変数email,nameに、index.htmlから送られてくるデータを代入

@app.route("/任意の名前", methods=['POST'])
def success():
    if request.method=='POST':
        email=request.form["email_name"]
　　　　　　　　　　　　　　　　name=request.form["user_name"]
```



```
#データの送信
　　　　data=Data(email,name)
　　　　db.session.add(data)　　
　　　　db.session.commit()
```
ActiveHashのdata属性をJavaScriptで出力

# ActiveHashのdata属性を扱うには・・・・。
オリジナルアプリの作成で、ActiveHashのdata属性をプルダウン選択した時にJavaScriptで出力したいと考えていて以下のように記述していました。

##### 訂正前
view/test.html.erb

```Ruby
#form_withをして以下の記述
 <%= f.collection_select(:hoge_id, Hoge.all, :id, :name, {}, {class:"select-box", id:"hoge"}) %>
```

models/hoge.rb

```Ruby 
#ActiveHash
 self.data = [
    { id: 1, name:'----' }, { id: 2, name:'1' , multiple: 1 }
  ]
```

JavaScript/hoge.js

```Javascript
const test = function (){

const selectHoge = document.getElementById("Hoge");
  selectHoge.addEventListener('change', function (){
    const hogeSelectBox = document.getElementById("hoge");
    const hogeMultiple = hogeSelectBox.options[ hogeSelectBox.selectedIndex].getAttribute("data-multiple");
    console.log(hogeMultiple);
  });

```

# 同じ機能を実装された方の記事を参考にイジってみました・・・。
:id, :nameの後の記述に :multiple　や :data を（）や{}の中に書き加えて何度か試み、同じ機能実装をしようとされている方の記事を参考に、リファレンスで確認して記述をしてみますが、理解できるレベルにはまだ少し遠いようです。

# 出力成功の記述（訂正後）



```Ruby
<% hoge_options = Hoge.order(:id).map { |c| [c.name, c.id, data: { multiple: c.multiple}] } %>
<%= f.select(:hoge_id, hoge_options, {}, {class:"#", data{select:0}, id:"hoge"}) %>
```

プルダウンにする記述にdata属性が与えられていないのが原因で、nullが表示されていたと考えられます。
１行目のmapメソッドを用いた記述には、data属性があり、そこから、ActiveHashに設定してmultipleを取得できているのだと考えられます。
2行目はcollection_selectからselectに変更されて、hoge_optionsが記述されています。
これは、１行目で作った、data属性の含む情報をプルダウンで表示されるようにしています。
・collection_selectはDBからの情報を元に取得して作成。
・selectはDBからの情報を取得せずに作成。
するみたいで、それぞれのリファレンスや関連記事を参考にしつつcollection_selectのまま作ってみましたが、うまく扱えずエラーが返ってきました。
参考にした記事の記述方法でするとdata属性を取得して、JavaScriptでも数値が返ってきたので現状はこれでやってみたいと思います。
まだまだ知らない事だらけなので、チャレンジしてみる⇨情報を集める⇨情報を元に組み立てみる⇨レシピ通りに作るを繰り返して自分の血肉にして行けたらと思います。

プルダウンで選択したdata属性を足して、フォームに送信できたらとりあえずの目標は達成なのでもう一息です。


参考記事は　[こちら](https://qiita.com/AKI3/items/97b61de4ac6bd2c0941e)です
模写コーディング

【模写コーディング】
HTML,CSSの基礎を学習した次のステップは、「模写コーディング」である。
マナブさんのロードマップでは、「Airbnb」のサイトが課題として提示されている。

ただ…
何からどう手をつけていいのか、さっぱりわからなかった。
そこで、非常にわかりやすかったのが、
YouTubeの「Webの神様」の模写コーディングシリーズだった。
手順、ツールや技術の説明がとても丁寧でわかりやすく初心者目線で解説されている。
いくつかのレベルに分かれた課題になっていて、最終的には「isara」という、
模写コーディングの王道と言われているサイトのレベルまでステップアップできるので、
とても実用的だった。

「Webの神様」の学習を一通り終え（isaraの模写だけで50時間かかったが笑）、
ようやくAirbnbに帰ってくると、決して簡単ではないが、だいぶ成長した実感がわいてきた。
分かりやすい誤差逆伝播法（Backpropagation）

#1.はじめに
今日は、ニューラルネットワークの基本アルゴリズムである誤差逆伝播法（Backpropagation)をわかりやすく紹介したいと思います。疲れた時、色々な数式を見ると頭は痛くなっちゃいます。なので、具体的な数字を使って誤差逆伝播法を紹介します。
#2.ニューラルネットワーク
![1627030564(1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1668082/edcc9c0c-98f5-0ff9-5107-06e526f1418d.png)
```i1```と```i2```は入力、```o1```と```o2```は出力、```w```はパラメータです(Biasはなし、活性化関数はidentity)。

```
Hidden層：h1=i1*w1+i2*w3,  h2=i1*w2+i2*w4
```

```
Output層：o1=h1*w5+h2*w7,  o2=h1*w6+h2*w8
```
誤差逆伝播法の目標：入力値を与え、```w```を学習させることより、出力値を```o1，o2```に近くする。
#3.誤差逆伝播法（Backpropagation)
具体的な数字を与える：

```
i1＝1, i2=1.5, o1target=2.5, o2target=3
```
パラメータ```w```の初期値を設定する（初期値の設定は基準がある、こちらで適当にしました）：

```
w1＝1.5, w2=2, w3=2, w4=2.5, w5=1.2, w6=2.5, w7=0.5, w8=1
```
##ステップ1　順伝播
```
h1=i1*w1+i2*w3=1*1.5+1.5*2=4.5
h2=i1*w2+i2*w4=1*2+1.5*2.5=5.75
o1=h1*w5+h2*w7=4.5*1.2+5.75*0.5=8.275
o2=h1*w6+h2*w8=4.5*2.5+5.75*1=17
```
上記通り、順伝播が終わりです。```w```の初期値を使って入力```i1, i2```における出力```o1(8.275), o2(17)```を算出しました。しかし、正解の```o1target(2.5), o2target(3)```と全然違います。これから、出力の誤差に逆伝播を行い、パラメータ```w```を更新し、改めて出力を算出します。
##ステップ2　逆伝播
###誤差設定
```
E=E1+E2=1/2*(o1target-o1)^2+1/2*(o2target-o2)^2
```
###誤差計算
```
E=E1+E2=1/2*(o1target-o1)^2+1/2(o2target-o2)^2=1/2*(2.5-8.275)^2+1/2*(3-17)^2=114.68
```
###パラメータ```w```の更新
パラメータ```w```の更新は、Output層からHidden層までは```w5, w6, w7, w8```、Hidden層からInput層までは```w1, w2, w3, w4```の更新です。こちらで```w5```の更新を例として解説します。
考え方は：パラメータ```w5```は誤差```E```にどのような影響を与えたかを知りたい、そして```w5```を更新します。
####1)```w5```は誤差```E```にどのような影響を与えたかーーー編微分

``` w5 ```で編微分： 

```
∂E/∂w5=∂E/∂E1*∂E1/∂w5
∂E/∂E1=2*1/2*(o1target-o1)*(-1)+0=5.775
∂E1/∂w5=h1+0=4.5
∂E/∂w5=∂E/∂E1*∂E1/∂w5=5.775*4.5=25.9875
```
####2)```w5```を更新する
学習率```η```を0.1と設定し、```w5```を更新する：

```
w5+=w5-η*∂E/∂w5=1.2-0.1*25.9875=-1.3986
```
同じように、他の```w```を更新します。
これで、一回の誤差逆伝播は終わりです。更新された```w```を改めてネットワークに入れて計算します。多く反復した後、誤差が小さくなり、出力はターゲット値に近くなります。
#4.まとめ
具体的な数字を使って誤差逆伝播法を紹介してみました。
#参考
Understanding and coding Neural networks From Scratch in Python and R
https://www.analyticsvidhya.com/blog/2020/07/neural-networks-from-scratch-in-python-and-r/
#Ps
Multilayer Perceptron Training VisualizationというMLPの可視化できるツールをお勧めします。
サイト：https://borgelt.net/doc/mlpd/mlpd.html#Introduction
Unity - Maskを使って画像や動画を任意の形に切り抜く

Maskを使用すれば、画像を好きな形に切り抜くことができます。
この機能を紹介しているサイト様は多々ありますが、動画を好きな形に切り抜く方法などがなかったので、試してみました。

・画像を任意の形に切り抜く
・動画を任意の形に切り抜く
・切り抜きたい形側を動かす
上記3つを試しました。

1. 画像を任意の形に切り抜く
----------
こちらは、こちらの[サイト様](https://kan-kikuchi.hatenablog.com/entry/SoftMaskForUGUI)を参考しました。
また、[SoftMaskForUGUI](https://github.com/mob-sakai/SoftMaskForUGUI)を使用しております。

![fukidashi.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207069/d2be581a-c7e8-6e25-715d-491fc66170e6.png)
<img width="700" alt="fukidashi_inspector.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207069/aaa61144-b445-2b90-3119-bcb38a029dcd.png">
<img width="700" alt="fukidashi_inspector_02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207069/a5d7fc8c-0103-870f-e917-d145cb90b8f2.png">


2. 動画を任意の形に切り抜く
----------
基本的には、上記と同じ手順を行えば、切り抜くことが出来ます。
変更点としては、切り抜かれる側を動画用にRawImageにし、コンポーネントにVideoPlayerを追加しています。

![cat03.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207069/356e747a-bc0e-67e4-4b97-fd1e54b3ad56.gif)
<img width="700" alt="cat_inspector_01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207069/6cfae042-c9f5-ae51-902a-255fd9b7a4d2.png">
<img width="700" alt="cat_inspector_02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207069/e6462eeb-9f39-53b9-9c17-1c6e0d08878d.png">


3. 切り抜きたい形側を動かす
----------
こちらも単純で、切り抜きたい側をスプライトアニメーション（または動画）として再生するだけです。
※スプライトアニメーションは、[こちら](https://tsubakit1.hateblo.jp/entry/2016/01/29/000017)を参考にしました。

![fire03.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207069/289105a6-40fb-f4d4-3e6c-2597f9338626.gif)
<img width="700" alt="fire_inspector_01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207069/446438d9-5b33-a683-f258-0f311ab066b6.png">
<img width="700" alt="fire_inspector_02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207069/e4c20e5e-3740-caaf-3bde-9548a11f82cd.png">


4. まとめ
----------
[SoftMaskForUGUI](https://github.com/mob-sakai/SoftMaskForUGUI)様にめちゃくちゃ助けられたという話でした。


5. 使用した素材
----------
下記サイト様より素材使わせていただきました。
ありがとうございます。
[edius…?](https://edit-anything.com/edius/download_01_png.html)
[Garrett Jax from Pixabay](https://pixabay.com/ja/users/gjax001-20378626/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=66004)
PythonをMiniconda環境で使おう

#PythonをMiniconda環境で使おう
これやったらとりあえずPythonでプログラミングを試せます。
シンプルに。実際のコーディングや動作はJupyter labの記事に記載します。
ここはインストール編です。
環境
●　Windows10 64bit
●　PC: Surface Go2

##Minicondaのインストール
以下のサイトにいってMinicondaをダウンロードしてInstallします。
https://docs.conda.io/en/latest/miniconda.html

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1769855/1b1d03cd-8712-1a8e-6a26-8d7b8911bc1c.png)

##パッケージをインストールしよう
Minicondaをインストールしたら各種パッケージを手動でインストールしましょう。
Windowsのスタートから「Anaconda3」から「Anaconda Prompt (install)」をクリック、プロンプト画面を出します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1769855/77efb2a4-25cb-1e74-7f57-14cdfa7e0070.png)

インストールコマンド例（ここではjupyterlabをインストール）
: conda install jupyterlab
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1769855/d7eb1db5-ca39-41f6-246b-ce17e1af5a2f.png)
ここでProceed([y]/n)?のところに「y」を押してエンターを打ちます。

##プロキシの設定
企業内のイントラなどからインターネットにアクセスする場合、多くのケースでプロキシの設定が必要となります。プロキシの設定をしていない場合、上記のconda install $package_nameもHTTPのアクセスエラーで遮断され、Errorが返ってきます。condaの設定ファイルにプロキシの設定をしましょう。これはインストールディレクトリに.condarcファイルを作成して、プロキシの設定を書き込めば完了です。

1) minicondaのインストールディレクトリにテキストを作る　a.txt
2) a.txtにメモ帳などのアプリでプロキシの設定を記述する
proxy_servers:
&nbsp;http: http://proxy.XXXX:PortName
&nbsp;https: https://proxy.XXXX:PortName

（半角スペースがhttp, httpsの前に入ります。）
3)コマンドプロンプトでファイル名をa.txt から.condarcに変更する
コマンドプロンプト
:ren a.txt .condarc

##パッケージのインストール
上記の例のように必要なパッケージを手動でインストールしていきます。
###基本パッケージ（おススメ）
numpy : conda install numpy
pandas : conda install pandas
matplotlib : conda install matplotlib
scipy : conda install scipy
jupyterlab : conda install jupyterlab
* jupyterlabはJupyter notebookの後継。ブラウザベースのエディタ。ケースバイケースですが、個人的には使いやすいエディタ環境の一つ。

###グラフ関係
seaborn : conda install seaborn
plotly : conda install plotly
* plotlyのインタラクティブグラフを使うためにinstallだけではなくextentionの設定も必要（別記事で説明予定）


###RPA系、画像系
conda install selenium
conda install -c conda-forge opencv
conda install -c conda-forge pyautogui
conda install -c conda-forge pyperclip
conda install -c conda-forge openpyxl

##Jupyter LabでPythonを使ってみる
「Anaconda Prompt (install)」を立ち上げて
: jupyter lab
と入力。Jupyter lab3が立ち上がります。

Pythonを実際に動かしてみるのは、Jupyter Labの記事へ。
https://qiita.com/kisei/items/100fa7496a575a8a8cee
コンテナで使い捨てDBサーバを立てたい

覚書です

podman はコンテナ間通信に pod を使う。

```console:podmanの場合
# とりあえず pod を作る
podman pod create --name db

# pauseコンテナ(何もしないコンテナ)が db ポッドの中で起動していることを確認する
podman ps --pod -a

# pod の中でpostgresコンテナを起動する
podman run -d --rm --name some-postgres --pod db -e POSTGRES_PASSWORD=mysecretpassword postgres

# db ポッドの中でpostgresコンテナが起動したことを確認する
podman ps --pod

# psql で接続する
podman run -it --rm --pod db postgres psql -U postgres -h localhost

# psql を終了する
\q

# 後片付け
podman container stop some-postgres
podman pod rm db
```

docker はコンテナ間通信に network を使う。

```console:dockerの場合
# とりあえず network を作る
docker network create db

# network を指定して postgres コンテナを起動する
docker run -d --rm --net db --name some-postgres -e POSTGRES_PASSWORD=mysecretpassword postgres

# コンテナが指定のネットワークに居ることを確認する
docker container inspect --format="{{json .NetworkSettings.Networks}}" postgres

# psql で接続する
docker run -it --rm --net db postgres psql -h some-postgres -U postgres

# psqlを終了する
\q

# 後片付け
docker container stop some-postgres
docker network rm db
```
【CSS】hover時のcssは有効のまま、クリックイベントのみを無効化する

## 何をしたいか

- hover時のcssは利用したいけど、クリックイベント自体は無効化したい。

今回、めったにないケースだとは思うのですが、あるボタンの``hover時のcss（今回は背景色を変える実装）だけは有効にしたまま、ユーザーがクリックできないようにしたい``という特殊な実装をすることになりました。

## 解決策

解決法は:activeの擬似クラスを使ってその中で``pointer-events: none;``するだけ。

```scss
.class-name {
  &:hover {
    background-color: blue;
  }
  &:active {
    pointer-events: none;
  }
}
```

これでhover時はちゃんと背景が青になるものの、クリックをしても何も起こらないという動作をさせることができました。
Powermock WhiteBoxでprivateメソッドをテスト

# はじめに
Junitテストケースを書く際に、privateメソッドのテストコードを比較的に書きにくいです。
invokeで書くのは一般的ですが、PowermockのWhiteBoxのメソッドを使うと便利です。

# Invokeのテスト例
#### メソッド
```java
public class UserUtil {
  private String getYourName(String lastName, String firstName) {
    return lastName + " " + firstName;
  }
}
```
#### テストコード
```java
import static org.junit.Assert.assertEquals;

import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;

import org.junit.Test;

public class UserUtilTest {

  @Test
  public void getYourName_useInvoke()
      throws NoSuchMethodException, SecurityException, IllegalAccessException,
          IllegalArgumentException, InvocationTargetException {

    UserUtil userUtil = new UserUtil();

    Method method = UserUtil.class.getDeclaredMethod("getYourName", String.class, String.class);
    method.setAccessible(true);

    String actual = (String) method.invoke(userUtil, "山田", "太郎");

    assertEquals("山田 太郎", actual);
  }
}
```

テストコードはちょっと長いです。

# Powermock WhiteBoxの使う例
### Powermockとは
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346425/e5163a48-01c3-5b5c-c3f5-7b1eef11f0b1.png)

https://github.com/powermock/powermock

staticメソッド、privateメソッドのmockをしやすくなります。

### powermock-reflectとは


### Gradleにpowermock-reflectを追加
```build.gradle
	// https://mvnrepository.com/artifact/org.powermock/powermock-reflect
	testImplementation group: 'org.powermock', name: 'powermock-reflect', version: '2.0.9'
```

### WhiteBoxのテスト例
```java
  @Test
  public void getYourName_useWhiteBox() throws Exception {

    UserUtil userUtil = new UserUtil();

    String actual = (String) Whitebox.invokeMethod(userUtil, "getYourName", "山田", "太郎");

    assertEquals("山田 太郎", actual);
  }
```

簡潔に記載できました。

### そのたメソッド
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346425/f7b8ce99-9a7a-6d99-7a05-953e7122f7fa.png)

https://www.javadoc.io/doc/org.powermock/powermock-reflect/latest/index.html

以上
Verilog HDL > my_design #(.USE_CASE(1)) u0 ( 省略 ) > パラメータUSE_CASEの上書き

### 動作環境

```
Ubuntu 20.04 LTS
IcarusVerilog v10.3
GTKWave v3.3.103
```

### `my_design #(.USE_CASE(1)) u0 ( .a(a), .b(b), .sel(sel), .out(out));`

https://www.chipverify.com/verilog/verilog-generate-block

```
my_design #(.USE_CASE(1)) u0 ( .a(a), .b(b), .sel(sel), .out(out));
```

`#(.USE_CASE(1))`の部分が分からないため調べた。

http://www.darwin.esys.tsukuba.ac.jp/home/ohyou/verilog/parameter
> パラメータの上書き

情報感謝です。

上記の実装ではUSE_CASEを0か1かでgenerate文の処理による異なるモジュールインスタンス化する。
実装例ではUSE_CASEを1としてインスタンス化している。

### 関連

- [Verilog HDL > generate文 > いろいろな条件でmoduleをインスタンス化する](https://qiita.com/7of9/items/499fe98b3e7ec29982dd)
ES6以後のEnhanced Object Literals(強化されたオブジェクトリテラル)をマスターする


# Enhanced Object Literals
皆さんもご存知の通りES6(ES2015)以降、JavaScriptに数多くの新しい機能、構文が追加されました。代表的なものとしては変数let、アロー関数、Promise、スプレッド演算子、分割代入、クラス、For of、デフォルト引数などがありますが、今回はその中でも[Enhanced Object Literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#object_literals)について備忘録も兼ねて簡単にまとめてみました。

# Enhanced Object Literalとは？
直訳すると「強化されたオブジェクトの記法」といったところでしょうか。ES5以前のオブジェクトリテラルと比較して、以下の３つのオブジェクトリテラルが追加されています。

* 他のオブジェクトをオブジェクトに挿入する際のキーの省略
* メソッドの省略記法
* キーに動的な値の設定

### 他のオブジェクトをオブジェクトに挿入する際のキーの省略
オブジェクトを持つ変数を他方のオブジェクトに同名のkeyとともに格納する際の省略記法です。

```js
// 旧
let fruits = [
  orange: 100,
  peach: 300,
  apple: 120
];

let price = {
  milk: 150,
  rice: 2000,
  fruits: fruits
};
```
↓
↓

```js
// 新
let fruits = {
  orange: 100,
  peach: 300,
  apple: 120
};

let price = {
  milk: 150,
  rice: 2000,
  fruits // fruits: fruitsと等しい。キーを省略できる。
};
```
従来の記法では`fruits: fruits`というように変数名と同名のプロパティをキーとして記載する必要がありました。
しかし、ES6以後では以下の通り同名のキーを省略して書くことができます。
なお、当然ながら別名のキーで変数を格納する場合はキーを省略することはできません。`fruitsPrice: fruits`のようにキーを明記します。

### メソッドの省略記法

```js
// 旧
let price = {
  milk: 150,
  rice: 2000,
  fruits,
  order: function (product) {
    return `${product} has been ordered!`
  }
};
```
↓
↓

```js
// 新
let price = {
  milk: 150,
  rice: 2000,
  fruits,
  order(product) { // : functionを省略
    return `${product} has been ordered!`
  }
};
```
上記のようにオブジェクト内に関数（メソッド）が存在した場合、従来の記法では`プロパティ名: function() {}`というように関数式をvalueとして渡してあげる必要がありました。しかし、ES6以後の新記法ではセミコロンとfunctionを省略することが可能です。

### キーに動的な値の設定
```js
// 旧
let fruits = {
  orange: 100,
  peach: 300,
  apple: 120
};
```
↓
↓

```js
// 新
let fruitsStock = [orange, peach, apple];

let fruits = {
  [fruitsStock[0]]: 100, // orange
  [fruitsStock[1]]: 300, // peach
  [`fruits ${1+2}`]: 120 // fruits 3
};
```
従来の記法ではプロパティは静的な値しか設定できませんでした。しかしES6以後の記法ではプロパティ名に変数名やテンプレートリテラルを使い動的な値を設定できます。プロパティ名を動的な値にする際にはプロパティを角括弧`[]`で囲ってあげる必要があります。

# まとめ
ES6で追加された他の機能たちと比べるとだいぶ影の薄いEnhanced Object Literalsですが、使いこなせば多少コードを綺麗に書くことができるのではないでしょうか。
Verilog HDL > generate文 > いろいろな条件でmoduleをインスタンス化する

### 動作環境

```
Ubuntu 20.04 LTS
IcarusVerilog v10.3
GTKWave v3.3.103
```

セットアップに関しては以下を参考にさせていただきました。
情報感謝です。

- [Icarus Verilogの導入とAND回路のシミュレーション](https://qiita.com/aurueps/items/72444c9b44a6940825f1)

### Generate文

- [ALTERA: Advanced Synthesis Cookbook](https://www.intel.com/content/dam/www/programmable/us/en/pdfs/literature/manual/stx_cookbook.pdf)

p.2-2 の例としてarithmetic/ternary_add.vを読んでいてgenerate文に遭遇した。

参考としていくつか見つけた。

- http://www.darwin.esys.tsukuba.ac.jp/home/ohyou/verilog/generate
    - > generate文を使うと、下位モジュールの生成をパラメタライズすることができます。
- http://www.kumikomi.net/archives/2009/07/verilog_hdl.php?page=4
    - > generateによる回路の切り換え
- https://shtaxxx.hatenablog.com/entry/20101101/1288622813
    - > Verilog HDLではgenerate文を使うことで変数やfunction文のスコープを定義することができる。
- https://lsifrontend.blog.fc2.com/blog-entry-608.html
    - > というような感じで、複数モジュールインスタンスできます。

### コード例

https://www.chipverify.com/verilog/verilog-generate-block

こちらのコードを実際に自分の環境で動作させて理解を深めた。
(コードのコピペはできないため、手入力した）。


### generateの用途

generateの用途としては以下であると考えた。

- A. 条件によってインスタンス化したい回路を切り替える
- B. 複数のインスタンス化をする
スケジュール作成

1.工数見積もり
2.スケジュール作成

---
1.工数見積もり

---
・非常に正確な見積もりをする必要はない
→仕事は時間いっぱいまで引き延ばされる
・妥当な見積もりをする

---
見積もりの手法

---
トップダウンアプローチ

---
・全体のリソース量を見積もってから各作業に配分する
・過去の事例や経験から類推する

---
ボトムアップアプローチ

---
・タスク単位で工数を見積もって、上積みして全体の工数を見積もる

---
トップダウンアプローチのメリット

---
・見積もりに時間がかからない

---
トップダウンアプローチのデメリット

---
・類似したプロジェクトがない場合、開発者の経験に依存する為、見積もり精度が低い

---
ボトムアップアプローチのメリット

---
・タスク単位で見積もる為、タスクの漏れが発生しにくく、見積もり精度も高い

---
ボトムアップアプローチのデメリット

---
・工程がある程度進まないと、見積もることが出来ない
・タスク単位で工数を見積もるため、見積もりに時間がかかる

---
2.スケジュール作成

---
スケジュール作成の手順

---
①全体スケジュールを作成する
②マイルストーンを作成する
③詳細スケジュールを作成する

---
平方根チェックについて

---
平方根とは？

---
2乗してaになる数
例えば、4の平方根は2,-2。
9の平方根は3,-3。

---
平方根チェックとは?

---
スケジュールは人間単位での総工数の平方根に近い値になっているはずという考え方

---
例えば、50人月のプロジェクトがあった場合、
50の平方根は約7なので、7～8人を割り当てたら7～8か月のスケジュールが適切。

---
まとめ

---
プロジェクトの工数はトップダウンアプローチなどで試算で見積もられる。
課題が発生したり、リスクが発生したりした時に、都度ボトムアップアプローチなどで詳細な工数を見積もり、スケジュールを見直す。
【Unity】iOS×Google-Ads ver6.0.0で_GADURequestInterstitialが定義されていないと出る時の解決法

# エラー内容
iOSでAdmobを使おうとして、Google-Ads ver6.0.0をインポートすると、Xcodeビルド時に以下のエラーが表示される。

> Build iOS failed: Undefined symbols for architecture arm64: "_GADURequestInterstitial"

簡単に言うと、arm64向けに_GADURequestInterstitial が定義されていないことが原因であり、インポートしたプラグインに起因する。

arm64とはスマートフォンに搭載されているプロセッサーアーキテクチャのこと。

# 解決方法
SDKのプラグインを直接いじることはできない(正確にはしたくない)ので、自分でObjective-Cの定義ファイルを作成し、UnityProject内のPluginに格納する必要がある。以下定義ファイルソース。


```m:Workaround.m
typedef const void *GADUTypeInterstitialRef;

typedef const void *GADUTypeRewardedAdRef;

typedef const void *GADUTypeRequestRef;

void GADURequestInterstitial(GADUTypeInterstitialRef interstitial, GADUTypeRequestRef request) { }

void GADURequestRewardedAd(GADUTypeRewardedAdRef rewardedAd, GADUTypeRequestRef request) { }
```
これをAsset>Plugin>iOSに格納すればOK。

# 参考資料
現在も議論されているフォーラム
[Build iOS failed: Undefined symbols for architecture arm64: "_GADURequestInterstitial" #1616](https://github.com/googleads/googleads-mobile-unity/issues/1616)
はじめてのHTML,CSS

【HTML,CSS】
学習の最初のステップは、HTML,CSSから。
教材は、テックアカデミーさんのYouTube動画「はじめてのHTML」と「はじめてのCSS」を使った。
はじめて動画を見た際は、内容が全然入ってこない。動画と同じようにただタイピングをする機械的な作業になってしまう。
ただ、２回、３回と繰り返すことで、「あ～これやったなー」という感覚が湧き、徐々に脳みそのスポンジに知識がしみこんでいくようなイメージだと思う。

【基礎学習の学び方】
基礎学習のステージだと、実際に作成するＷｅｂページのイメージ（ゴール）が見通しにくいため、今学習していることが最終的にどう役立つのか実感が得られにくく感じた。
ここで大事なのは、完璧な理解を目指して何周もこの学習を繰り返すのではなく、頭の片隅に知識をとどめておき、できるだけ早く、ポートフォリオ作成に取り掛かる事。ポートフォリオ作成の過程で、実装したい機能がわからない時に、「そういえば、基礎学習でそんなことやったな」を思い出し、改めて調べられれば十分だと思う。その過程を繰り返していけば、知識の定着につながるのではないか。
前回の記事の補足

[前回の記事](https://qiita.com/kei37/items/30844489e6807fc234ba)の補足になります。

# ログイン状態や認証の管理について

マイクロフロントエンドのログイン状態や認証の管理について下記2つのブログ記事で紹介されている方式を要約した。

+ Auth0のKlee Thomasのブログ
+ Fixerのブログ

## Auth0のKlee Thomasのブログ

Auth0のKlee ThomasのブログではOpenID Connectを利用したSSOでマイクロフロントエンドの認証状態を管理する方法が紹介されている。
下記に記事の内容を要約する。

### 管理する用のWeb Appを別で用意する方法

#### マイクロフロントエンドなアプリケーションで認証

マイクロフロントエンドを実装する場合、各フロントエンドは独自のアプリケーションであるため、ユーザーが最初のアプリケーションにログインすると、認証トークンを共有することができない。

しかし、マイクロフロントエンドで構築されたアプリケーションを、ユーザーにとって1つのアプリケーションとして動作させたい。
そのためにも、ユーザーが各フロントエンドを利用する際に毎回ログインさせたくはない。

#### 認証を共有

OpenID Connectを使い、認証を管理する用の別のドメインで働いているアプリケーションを導入することで認証を共有することができる。

![32e85652-0b80-79e2-a390-b83d1a284a30.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483460/8b65a6db-33d9-ce06-fe48-40a6e2f598f5.jpeg)

上の図で考える。

クライアントが使うアプリケーションを`my.app.com`で動かし、認証を管理する用のアプリケーションを`id.my.app.com`で動かす。

フロントエンドでユーザーが認証する際、ユーザーは`id.my.app.com`にリダイレクトする。
ユーザーが初めて`my.app.com`にアクセスすると、ログイン画面が表示され、認証プロセスが実行される。認証プロセスが完了すると、クエリ内のアクセストークン、IDトークン、リフレッシュトークンを使用して、`my.app.com`にリダイレクトされる。

このリダイレクトの前に、認証アプリケーションはドメインに保存されているCookieを利用する。そうすることで、その後フロントエンドがユーザーをリダイレクトすると、認証アプリケーションはCookieをチェックして、ユーザーが以前認証が通たことを確認し、2回目の認証を強制されることなくリダイレクトされる。

#### Silent authentication

上の方法で認証を管理しようとすると、ユーザーは何度もリダイレクトされることになる。

これの解決策は、ユーザーから隠された方法で認証を行うことである。

認証を行い、トークンを`window.postMessage`を使って返すiframeをDOMに加える。

#### 参考
 [How do you share authentication in micro-frontends](https://dev.to/kleeut/how-do-you-share-authentication-in-micro-frontends-5glc)

## Fixerのブログ

Fixerのブログではマイクロフロントエンドのログイン状態や認証の管理について4種類の方法が紹介されている。
各方法について下記に要約する。

### SSOを使う方法

マイクロフロントエンドごとにSSOサービスとやり取りをしてユーザーがログインしているのか、また、どのユーザーなのかといった情報を受け取って認証を行う。

 **長所** ：ユーザーがどれかのサービスを使用する際にSSOを通してログインしていれば、残りのサービスにおいても自動的に認証されるため、サービスごとに個別に認証する必要がない。

 **短所** ：サービスごとにSSOサービスと通信した場合、個々のサービスとSSOサービスがそれぞれで通信を行うことになるので、通信トラフィックがかなり大きくなってしまう。

### 共有データストアに保存する方法

ユーザ認証に関わるデータを全サービスで共有するデータストアに保存し、マイクロサービスを使用する際はそこから認証情報を引き出すという方法。

 **長所** ：一つのサービスでログインしていれば、その認証情報を全サービスで使いまわせるので、サービスごとにログインしなければならないこともなくなる。
ユーザーのログイン状態が不透明である。

 **短所** ：データストアを不正なアクセスから保護するためには、サービスとデータストアの間のアクセスはセキュアな通信を通して行わなければならなくなる。

### トークンを使用する方法

ユーザー認証にクライアント側で作成されるトークンを使用する方法。

 **短所** ：ログアウトが難しい。
トークンは署名の期限が切れるまでずっと有効になってしまうため、ずっとログインが行えるようになってしまう。

 **対策** ：署名を失効させる、トークンを短命にする

### トークンとAPIゲートウェイを使用する方法

フロントエンドからサービスに接続する間にAPIゲートウェイを通し、そこで認証や認可などの本来個々のサービスで行うはずだった処理を集約して行う。

 **長所** ：フロントエンドがサービス群と直接やり取りしないのでサービスが隠蔽されること。

 **短所** ：実装が複雑。

### 参考

参考：[どうする？マイクロサービスでの認可と認証 後編](https://tech-blog.cloud-config.jp/2019-10-25-microservice-authorization-part-two/#SSO%E3%82%92%E4%BD%BF%E3%81%86%E6%96%B9%E6%B3%95)
pandasでndjsonを読み込む（ワクチン接種状況オープンデータ）

# pandasでndjsonを読み込む
大したもんじゃないんですが
こちらでワクチン接種状況に関するデータが公開されていたので

https://cio.go.jp/c19vaccine_opendata

pythonでの読み方みたいなの共有しておこうかと思いまして(・ω・)ノシ
データ形式はndjsonでした。

## 読む
```python
import json
import pandas as pd

df_pref = pd.read_json('prefecture.ndjson', lines=True)
```

## 沖縄県＆特定の日付だけで絞り込む
```python
df_pref[(df_pref.prefecture == 47) & (df_pref.date == "2021-07-22")]
```

## csv出力する
```python
df_pref.to_csv("prefecture.csv")
```

あとは煮るなり焼くなり好きにしてくだせー(｀･ω･´)ゞ
マイクロフロントエンドのログイン状態や認証の管理について＆前回の記事においてAngular側とReact側を個別に開発するときはどうするのか

「前回の記事においてAngular側とReact側を個別に開発するときはどうするのか」については、自分の考えが含まれます。

# ログイン状態や認証の管理について

## 管理する用のWeb Appを別で用意する方法


OpenID Connectを利用して、別のドメインで実行されている認証の処理を担当するアプリケーションを導入する。
下の図で考えると、my.app.comがクライアントが利用するアプリ、id.my.app.comが認証の処理をするアプリとなる。
my.app.comでログインすると、id.my.app.comで認証プロセスが実行される。認証プロセスが完了されると、アクセストークン、IDトークン、リフレッシュトークンを使用して my.app.com にリダイレクトされる。
![1c83d0be-5ad5-3ab4-acfb-28685af9b4d2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483460/4749dda0-318d-560b-f5f3-4cd4fee0aaa9.png)

実装においては標準であり、実装がシンプルでライブラリのサポートが充実しているなどの理由から、JWT（JSON Web Token)を使用することが推奨されている。

このリダイレクトの前に、id.my.app.comではCookieを使用する。そうすることで、画面をリフレッシュしたり、my.app.com内のほかのマイクロフロントエンドの部分にアクセスする際に、id.my.app.comではCookieをチェックして、ユーザーが認証済みかどうかを確認し、再び認証することを防ぐことができる。

参考 :
 [How do you share authentication in micro-frontends](https://dev.to/kleeut/how-do-you-share-authentication-in-micro-frontends-5glc)
[JWT](https://jwt.io/introduction/)


## SSOを使う方法

マイクロフロントエンドごとにSSOサービスとやり取りをしてユーザーがログインしているのか、また、どのユーザーなのかといった情報を受け取って認証を行う。

サービスごとにSSOサービスと通信した場合、個々のサービスとSSOサービスがそれぞれで通信を行うことになるので、通信トラフィックがかなり大きくなってしまう。

参考：[どうする？マイクロサービスでの認可と認証 後編](https://tech-blog.cloud-config.jp/2019-10-25-microservice-authorization-part-two/#SSO%E3%82%92%E4%BD%BF%E3%81%86%E6%96%B9%E6%B3%95)

# 前回の記事においてAngular側とReact側を個別に開発するときはどうするのか

[前回の記事](https://qiita.com/kei37/items/a9e482e2f37d269cb228)では、AngularとReactでWeb Componentsを使ってMicrofrontEndsを実装した例を紹介した。
![30a6cbc1-ef3d-300a-d71c-fcd15cb0fc46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483460/8861e22b-28bb-8f0e-4c04-d49c19b6a981.png)

この例の場合、

AngularコンポーネントをWeb Componentsとして`http://localhost:5001/main.js`のサーバーにアップし、Reactコンポーネントを同じくWeb Componentsとして`http://localhost:5002/main.js`のサーバーにアップする。
Wrapperコンポーネントを`http://localhost:5000`のサーバーに立ち上げて、２つのコンポーネントをサーバー上から読み込むという方法。

```html:index.html(wrapper-component)
  <script src="http://localhost:5001/main.js"></script>
  <script src="http://localhost:5002/main.js"></script>
```

![6059c55c-28f0-86a9-d520-590a0b730253.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483460/256c5a7d-86a2-9b71-05c7-448dee5ccb60.png)

前回は１つのコンピューター上で開発していたので開発環境用に[serve - npm](https://www.npmjs.com/package/serve)を利用してlocalhost上に各コンポーネントをアップしていたが、個別で開発する際は外部からアクセスできるサーバー上にアップする必要がある。ここでも認証が必要になりそう。