OmniAICreator/Qiita-1.07M huggingface dataset:
CSSだけでブロック塀を作る

# どうも7noteです。ブロック塀をCSSだけで作る方法

**完成例**
![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/22794ae4-6736-b8f5-59d9-b9aeea100fa6.png)


**複数色パターン**
![sample2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/7be8692d-7d6b-4724-6a42-18ad4ba70fa5.png)



## 単色のブロック塀

```index.html
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
```

```style.css
ul {
  overflow: hidden;             /* はみ出た部分を非表示 */
  border-top: solid 1px #000;   /* ブロックの一番上に線を記述 */
}

li {
  width: calc(100% + 25px);     /* 横幅を半ブロック分足す */
  height: 20px;                 /* 1ブロックの高さ */
  background-image: repeating-linear-gradient(to right, #D2A774 0%, #D2A774 98%, #000 98%, #000);   /* ブロック、区切り線を記述 */
  background-size: 50px 100%;   /* ブロックの横幅を指定 */
  border-bottom: solid 1px #000;/* ブロックの下に線を記述 */
}

li:nth-child(even) {
  position: relative;  /* leftを指定するために必要 */
  left: -25px;         /* 偶数行目のみ左に半ブロックずらす */
}
```


### 複数色ならCSSはこんなかんじ

```style.css
ul {
  overflow: hidden;             /* はみ出た部分を非表示 */
  border-top: solid 1px #000;   /* ブロックの一番上に線を記述 */
}

li {
  width: calc(100% + 200px);    /* 1ループ分ずらす */
  height: 20px;                 /* 1ブロックの高さ */
  background-image: repeating-linear-gradient(to right,
  #CA9064 , #CA9064 49px,
  #000 49px, #000 50px,
  #E1C096 50px, #E1C096 99px,
  #000 99px, #000 100px,
  #D0C5A6 100px, #D0C5A6 149px,
  #000 149px, #000 150px,
  #D7DAD7 150px, #D7DAD7 199px,
  #000 199px, #000);            /* ブロック、区切り線を記述 */
  background-size: 200px 100%;  /* ブロックの横幅を指定 */
  border-bottom: solid 1px #000;/* ブロックの下に線を記述 */
  position: relative;           /* leftを指定するために必要 */
}

li:nth-child(2) {left: -125px;}
li:nth-child(3) {left: -50px;}
li:nth-child(4) {left: -175px;}
li:nth-child(5) {left: -100px;}
li:nth-child(6) {left: -25px;}
li:nth-child(7) {left: -150px;}
li:nth-child(8) {left: -75px;}
```

## 解説

横一列を`<li>`で作成し、そのなかで`background`をリピートさせて表現しています。
1ブロックの横幅と高さを決めて`height`と`background-size`に指定。

あとは好きな色を`background-image: repeating-linear-gradient()`に指定して再現しています。

あまり使い所はないかもしれませんが思いついたので記事にしました。
お役に立ったのであれば幸いです。

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】HTML・CSSのちょいテク詰め合わせ](https://qiita.com/7note)
composerで手動で運用していた謎挙動を深堀りしてみた

この記事は「Aucfan Advent Calendar 2020」の6日目です。

## はじめに
はじめまして！！開発部 Aucfan グループ でマネージャーをしている渡辺（仮名）です。

今回は今まで手動で運用していた謎挙動を深堀りしてみたので
そのお話をさせていただこうかなと思います。

## 前提
- 発生時期
    - 1年ほど前から
- 環境
    - FuelPHP 1.8系
    - PHP 7.1系の最新
    - composer.pharのバージョンは2.0.7
    - 独自のライブラリを別レポジトリで管理しcomposerで反映している
        - repository名: package-godclass
    - jenkinsを使用してリリースを行っている
- 登場人物（全員仮名）
    - 加藤
        - Aucfanグループのエンジニアリーダー
    - 渡辺
        - 私です ^^；
    - 林
        - 企画とディレクション担当
- ある日のやり取りは
    - **事実を元にしたフィクションです。**
- composer.jsonの中身は以下の様な形になっています

```
    "repositories": [
        {
            "type": "package",
            "package": {
                "name": "aucfan/package-godclass",
                "type": "fuel-package",
                "version": "202011190006",
                "source": {
                    "url": "ssh://git@github.com/xxxxxx/package-godclass.git",
                    "type": "git",
                    "reference": "master"
                }
            }
        }
    ],
```

## ある日のやり取り
**会話のやり取りはすべてSlack上で行われています**

**加藤）** aucfan.comのリリース始めます〜
**渡辺）** お願いします！

〜〜リリース完了後〜〜

**加藤）** リリース完了しました
**林）** 動作確認します

**林）** 加藤さん、今回の改修が反映されてないです・・・
**加藤）** ええっ！？Jenkinsは成功をかえしてるなぁ・・・ちょっと確認します〜

**渡辺）** （´-`）.｡oO（ん？mjd?? 俺も覗きに行こうっと

〜〜5分後〜〜

**加藤）** gitのログを見る限り本番環境は最新のものになってるなぁ・・・ 
**渡辺）** `package-godclass` のほうじゃない？
**加藤）** 確認してみます・・・あー！！更新されてない！composer.lockは最新のバージョンになってるんだけど・・・なぜ・・・
**加藤）** composer.lockを削除だ！・・・更新されない・・・それならcacheを削除だ！・・・だめだ更新されない・・・

**加藤）** このままだとリリースは難しいので、今回は手動で `git pull` します・・・orz
**渡辺）** （´-`）.｡oO（このままだと、手動運用が捗ることになるから時間があるときに原因調査するかな・・・

## 後日、深堀り始めて・・・
（´-`）.｡oO（composer.lockを消してもcleancacheしても駄目だよなぁ・・・

（´∵`）.｡oO（vendor/composer/installed.jsonを消したら更新されたけどコレジャナイ感が・・・

（´-`）.｡oO（仕方ない、composerのログを見てみるか・・・魔法のオプション -vvv や！

〜〜ログを見始めて〜〜

（ ´-`）.｡oO（え？ログのコマンド実行してみたけど差分のコミットハッシュでてなくね？

（; ´-`）.｡oO（ええ？masterだとローカルのコミットハッシュコミットハッシュ取ってない？？

(((( ;ﾟДﾟ)))).｡oO（同じブランチを参照してる・・・これってこの前まで運用できてたよね・・・（呆然

（ ´-`）.｡oO（コミットハッシュをセットすれば問題なく動いたけど、前と運用が変わってくるから極力合わせられるようにしたい・・・

（ ´-`）.｡oO（referenceにremoteブランチをセットしたらうまく行った！！！けどなんでや・・・ここまで来たら気になるのでcomposer本家のソース見に行くか・・・（白目

_(8o｣∠)_.｡oO（v2.0になったときに実装が結構変わってる・・・＼(^o^)／

## 原因
- composer経由のgit downloadの実装が変わっていた
    - composerが2.0に更新された際にreferenceの取得方法が変更されていた　
        - 更新前はリモートブランチをすべて更新していた (`git fetch composer && git fetch --tags composer`)
        - 更新後はreference のブランチが指定されるようになった
            - referenceをmasterにした場合 **ローカルのブランチを参照してしまう**

## 対応策
1. referece に対象のレポジトリのコミットハッシュを設定する。
2. referece に リモートブランチを設定する。

## 終わりに
- 原因を特定してみれば、そのとおりだよなぁという感じでした
    - 特定するまでの工程は意外に楽しかったりしました（ぇ
- 現在、Aucfanではデータ基盤のシステムを少しづつリビルドしており、それに合わせてフロントの刷新も計画しております
    - **既存システムのメンテナンス経験を積みつつ、多くのデータを扱って新しい何かを生み出したいあなた！！ぜひAucfanへ！！お待ちしています！**
  
- 明日は [@s_satoh](https://qiita.com/s_satoh)の記事になります。ちょっと毛色が違う記事になるらしいのでみんな見てね！

## 余談
（´-`）.｡oO（バージョンを年月日時分秒になってるのはそっとしておいてください。

（´-`）.｡oO（1年たつとバージョンが1億上がるって思うとすごい
オンラインホワイトボードツール「Miro」の 楽しい機能５選

# この記事について

この記事は、[aslead Agile](https://aslead.nri.co.jp/solution/aslead_agile.html)の開発チーム「[オキザリス](https://speakerdeck.com/viva_tweet_x/huesudeyong-qi-wode-taxin-gui-timugashi-yan-wozao-rifan-sitejin-nizhi-rumadefalsewu-yu)」にて行っているアウトプット企画である
「[チーム「オキザリス」Advent Calendar](https://qiita.com/advent-calendar/2020/oxalis)」の2日目の記事です。

# オンラインホワイトボード「Miro」
この記事では、チーム「オキザリス」の活動で使用しているオンラインホワイトボード「Miro」の面白い機能について紹介します。
対面での仕事が難しい今、チームメンバーとの議論や情報共有にMiro の各種機能を活用してみてください。

## 1. Template
Miroには現時点で99個のテンプレートが用意されており、それらを無料で利用することができます。
<div align="center">
<img width="700" alt="template" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/345439/c2e6f38c-c442-427e-8ba6-a71b09b9e409.png">
</div>
Miroを使ってタスク管理や議論を行いたいけれども、何から始めてよいかわからないという方はテンプレート機能を使用してみてはいかがでしょうか。
また、有料プランであれば、自分で作成したテンプレートを保存しておくこともできるようです。

## 2. Pen
ホワイトボードといえば、ペンで絵を描いたり、マークを付けたりできるところが便利なポイントです。
Miroでも「ペン」機能を使用することで、物理のホワイトボードと同様に簡単に図を描いて共有することができます。
さらに、マウスやタブレットで図が歪んでしまったとしても、Miroが自動で綺麗に成形してくれます。
<div align="center">
<img width="700" alt="pen" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/345439/1871eefc-4f02-4336-1c15-647504439c0e.gif">
</div>

## 3. Kanban
タスク管理を行うためのツールは複数ありますが、MiroでもKanban機能を利用して簡単にタスクを管理できます。
個人のタスク管理はもちろん、カードのタグ付けやユーザとの紐づけもできるので、チームでのタスク管理にも利用可能です。
<div align="center">
<img width="700" alt="kanban" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/345439/18810122-7f11-2243-ecbe-3a20d36069aa.png">
</div>

## 4. Planning Poker
プランニングポーカーは、主にソフトウェア開発における各タスクの規模を相対的に見積もるために使用されます。
本来は複数人が集まり、トランプのようなカードを用いて実施しますが、Miro の Market place で公開されている「Planning Poker」を利用すれば、オンラインでもオフラインのときと同様の感覚で見積もりを行うことができます。
<div align="center">
<img width="700" alt="pen" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/345439/9cffec5c-c45c-228c-6b14-22d862c1113e.gif">
</div>

## 5. Stickies capture
オンラインではホワイトボードの代わりにMiroを使っている方も、たまにチーム全員が揃って出社すると、物理のホワイトボードを使ってしまうことはないでしょうか。
そんなときに困ることが議論に使用した付箋をいかにデータ化し、保存しておくかということです。
Miro の Stickies capture はそんなときに利用できる機能になります。
写真で議論に使用したホワイトボード全体を撮影して Miro にアップロードすると、付箋の場所を自動で認識し、付箋1枚1枚をトリミングした状態で Miro に画像として貼り付けてくれます。
※付箋の文字が英語で書かれている場合は、文字も認識して Miro の付箋に変換してくれました。

# おわりに
Miro には紹介した機能以外にも面白そうな機能がたくさんあります。
便利で楽しいオンラインホワイトボードツールを探している方はぜひ「Miro」を利用してみてください。
量子コンパイラを作る。 その5

# 概要

量子コンパイラを作る。
ソースから、回路図を生成するツールを紹介。

# 写真

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/d5c2feac-1aed-7446-3c86-d19f2bf37a34.jpeg)


# 成果物

https://embed.plnkr.co/plunk/Rbr1Dt2RaJwUP51n


以上。
量子コンパイラを作る。 その4

# 概要

量子コンパイラを作る。
ソースから、真理値表を生成するツールを紹介。

# 写真

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/1ac8d8b7-e072-8017-72ae-0acc3fc9bca2.jpeg)


# 成果物

https://embed.plnkr.co/plunk/Mn4hhEiae2Ixu6ME


以上。
Git　addとcommitを一括で行う

# --allオプションを使った省略

--allオプションによって、`git add .`を省略します。
--allは、ワークツリーで変更済みのファイルをcommitするオプションです。

初回のみ管理対象を決めるために`git add`コマンド操作が必要になります。

```
git commit -am "hogehoge"
```
量子コンパイラを作る。 その3

# 概要

量子コンパイラを作る。

# コマンド　リファレンス

## make

回路を作る。量子ビットを指定する。
inputが２つで、outputが２つ、なら４。make 4

## in

inputを作る。
０，１，２がinputならば、in 0 2

## out

outputを作る。
３，４，５がoutputならば、out 3 5

## xor

xorを作る。
０，１が入力で、３が出力ならば、xor 0 1 2

## and

andを作る。
０，１が入力で、３が出力ならば、and 0 1 2

## or

orを作る。
０，１が入力で、３が出力ならば、or 0 1 2

以上。
イテレータとは、わんこ蕎麦をよそう人である

#はじめに
以下では、「イテレータが何者か理解したい」という方へ、そのイメージを伝えることを優先しており、実際の動きとは多少異なります。 正しい動きについては、各種リファレンスをお読みください。
また、.Net(VB/C#)では「イテレータ(Iterator)/反復子」ではなく「イニュマレータ(Enumerator)/列挙子」と呼んでいます。

#イテレータ…？
私は、.NET(VB/C#)とJavaしか知らないのですが、どの言語にもイテレータまたはそれに類するものが存在すると思います。 これについて、私が理解(らしきことを)した時のことをまとめてみます。
##ネットで情報を漁る
ネットでいろいろな方が、イテレータについて具体的な例を挙げ分かりやすいように説明しています。 しかし私は「それがどんな感じか？」を先に(それも比喩で)掴んでいないと、理解が進まない人でした。 そこで、こんな風に理解しました。 
##わんこ蕎麦とイテレータ
わんこ蕎麦は、お盆の上に少量の蕎麦がもられたお椀が載っており、給仕する方が一つずつ、食べる人の前にあるお椀によそうことを繰り返します。 ここでの登場人物が、それぞれ

* お盆 ： コレクション
* お椀 ： 要素(アイテム/エレメント)
* よそう人 ： イテレータ
* 食べる人 ： 要素を受け取る処理

に対応づけることができます。
少しだけ普通と違うのは、食べる人が**「次ある？じゃぁ寄越して！」**と要求して、よそってくれるというところでしょうか。 ちなみに、お椀が無くなると、よそう人は**「もうありません！」**と答えてくれます。
##よそう人がいなかったら
よそってくれる人がいなかったら、自分でよそうしかありません。 しかし、地方(コレクションの種類)によってはお盆に乗っているのではなく棚に入っていたり、お椀の並び順が謎だったりするので、食べる人がいちいちそれを覚えておかなければなりません。 
一般的にオブジェクト指向では**「細かい事は、それ(コレクション)自身が知っていればいい。使用者は命令するだけ」**とすることが推奨されます。
そのため、どんなもの(各種コレクション)でも「よそう人」を用意しておくことで、食べること(処理すること)に集中させましょう、ということを目指し出来たものがイテレータさんです。
##イテレータさんがいることの保証
Javaでは「Iterable」、.NETでは「IEnumerable」インタフェースを実装しているオブジェクトに**「イテレータ召喚！(Iterator or GetEnumerator)」**と唱えると、イテレータさんが「どーもどーも」と出てきます。
##かくして拡張for文が使える
拡張for文、Foreachは、コレクションからイテレータさんを召喚してグルグルと処理を回しています。言い方を変えると**「拡張for文にかけられるのはIterable or IEnumerableを実装したクラスだけ」**とも言えます。
##コレクションとイテレータさんは別のオブジェクト
なんとなく、コレクションとイテレータさんは「傍にいる」イメージをいだきませんか？ こう、常に寄り添って、コレクションからポンポン要素を放り投げてくるみたいな。
しかし、別のオブジェクトなので**「イテレータさんを引っ張り出して、他へ回す」**こともできます。 あまり褒められた使い方ではありませんが、遠くのオブジェクトにイテレータさんだけを渡し、そこで「次！次！」と要求することもできます。
##おわりに
イテレータって何ですか？と質問された時に、イメージを伝える時の参考になれば幸いです。
kotlinでListの中身のすべてを更新する方法

# kotlinでListの中身のすべてを更新する方法

## 解
replaceAllで一発だった。

```kotlin
val mutableList = mutableListOf(1, 2, 3)

println(mutableList) // > [1, 2, 3]

// 各要素に2ずつ足す
mutableList.replaceAll { it + 2 }

println(mutableList) // > [3, 4, 5]
```

@sdkei さんコメントありがとうございます。

## 経緯

やりたいのは、Listの中身すべての値を書き換えて出力したい。
というわけでforEachを使うが

```kotlin
var r = mutableListOf(1, 2, 3)

println(r.toString()) //[1, 2, 3]

//全部の要素に2づつ足す
r.forEach{
  it += 2
}

println(r.toString()) //ココまで到達しない、てか動かん
```
無理です。  

調べたところ別に定数itを出しているらしく、定数なんで書き換え不可。forEachを使うのは無理ゲーっぽい。  
しゃあねえからforで似たようなことやってやるか。ってことで  

```kotlin
var r = mutableListOf(1, 2, 3)

println(r.toString()) //[1, 2, 3]

//全部の要素に2づつ足す
for(i in r){
  i += 2
}

println(r.toString()) //ココまで到達しない、てか動かん
```
これでもダメらしい。

## 余談
listそのものの上書きがないのならvarではなくvalを使うべきで、こっちならIdeaでエラーがでない。  
だがしかしConcurrentModificationExceptionが出るので注意。
https://play.kotlinlang.org/#eyJ2ZXJzaW9uIjoiMS40LjEwIiwicGxhdGZvcm0iOiJqYXZhIiwiYXJncyI6IiIsImpzQ29kZSI6IiIsIm5vbmVNYXJrZXJzIjp0cnVlLCJ0aGVtZSI6ImlkZWEiLCJjb2RlIjoiZnVuIG1haW4oKSB7XG5cdFx0dmFsIHIgPSBtdXRhYmxlTGlzdE9mKDEsIDIsIDMpXG4gICAgICAgIHByaW50bG4oci50b1N0cmluZygpKVxuICAgICAgICBmb3IoaSBpbiByKXtcbiAgICAgICAgICAgIHIgKz0gMlxuICAgICAgICB9XG4gICAgICAgIHByaW50bG4oci50b1N0cmluZygpKVxuICAgICAgICBwcmludGxuKFwiZW5kXCIpXG59In0=  

## 旧解
~~forで直接参照しましょう。~~ 上記の方が短くて済む。

```kotlin
var r = mutableListOf(1, 2, 3)

println(r.toString()) //[1, 2, 3]

//全部の要素に2づつ足す
for(i in 0..r.size-1){
  r[i] += 2
}

println(r.toString()) //[3, 4, 5]
```
Github Actionsでgitのブランチ運用ルール違反に気付きやすくする

## はじめに

本番リリース用ブランチへのマージ前に、検証用ブランチにマージして動作確認するという運用ルールになっているケースは比較的多いかと思います。
しかし本番リリース用ブランチへのPR時に、本当に検証用ブランチにマージ済みかどうかレビューでチェックという運用だと見逃しが発生する可能性があるし面倒ですよね。
そんな不便を解消するために作ったアクションを紹介します。

## 何が出来るの？

pull_requestイベントのアクションとして実行することで、指定ブランチにマージされていなかったらコメントで指摘してくれるようになります。

![Demo](https://i.gyazo.com/1a7f81b217002632e64268a3407777a1.png)

## 使い方

masterブランチへのPR時に必ずstagingブランチにマージされていることを検証したい場合の設定例。

```yaml
name: Check merged
on:
  pull_request:
    branches:
      - master

jobs:
  check-staging:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
        with:
          fetch-depth: 0

      - uses: SonicGarden/check-merged-action@v1
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          originBranch: staging
```

## Marketplace
[Check merged · Actions · GitHub Marketplace](https://github.com/marketplace/actions/check-merged)

良かったら使ってみてください。
Angular Google Maps (AGM) 実装後にTS2503: Cannot find namespace 'google'などのエラーが出る

Angular Google Maps (AGM) 実装後にng s --oコマンドで起動時に表題のようなエラーが大量に出ました。

以下の手順で解消できます。
①下記コマンドを実行。

```
npm install @types/google-maps
```

②package.jsonに追加された"@types/googlemaps"プロパティの値を"3.39.12"に変更。
(3.39.12以外だとエラーが散見されるようです。またバージョン前に付与されている^も外す必要があります。)

【参考】
https://stackoverflow.com/questions/39909544/typescript-error-cannot-find-namespace-google
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/48574
iOSで不要になったコードを探す

## はじめに
使っていないコードを発見することはよく経験すると思います。
長い期間運用していると負債として、重くのしかかってきます。
しかし、人間の目視やコードレビューですべて発見するのは不可能です。
そのような問題を解消するための方法について、調べました。

## Xcode
- `Find -> Find Call Hierarchy` を使うと呼び出している場所を検索できます。
- 呼び出しがなければ、不要なコードとして判断できます。
![Kapture 2020-12-01 at 10.30.58.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63985/04fd1a23-720e-d07f-11c6-06b54044e2e6.gif)

## 外部ツール
- ツールを使うことで不要なコードを簡単に見つけることができます。
- CIなどで実行すれば、不要なコードを見つけやすくなります。

[periphery](https://github.com/peripheryapp/periphery)
- Swift製。Rulesのカスタムがしやすい。 長くメンテされている
[Pecker](https://github.com/woshiccm/Pecker)
- Swift製。Rulesのカスタムがしやすい
[PaulTaykalo/swift-scripts](https://github.com/PaulTaykalo/swift-scripts)
- Rubyのスクリプトを使って、使われていないコードを検知します

## peripheryapp
- 今回は一番使う`periphery`の使い方について説明します
- `periphery v2.2.2`の環境で実行してます

### 導入
- Homebrewでインストール可能です

```
brew tap peripheryapp/periphery && brew install periphery
```

- Xcodeにターゲットを追加
    - Other -> Aggregate を選択して、追加

![スクリーンショット 2020-12-01 13.10.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63985/01f1aed7-23a2-df72-a715-652f120fe1ee.png)

![スクリーンショット 2020-12-01 13.14.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63985/0badbf1c-ae27-29a3-fcf7-3e3f9321d1da.png)


- Build Phaseにスクリプトを追加

![スクリーンショット 2020-12-01 13.17.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63985/72497ee6-d9db-20e8-fd57-c76195fb9fb5.png)

```shell
periphery scan --project ModalTest.xcodeproj --schemes ModalTest --targets ModalTest --format xcode
```

- `periphery `のスキームでBuildする

![スクリーンショット 2020-12-01 13.20.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63985/8abbd2e4-5444-3b20-1cfc-e42fa4b77cd9.png)

- 使っていないコードが`warning`として表示される

### カスタマイズ

- `// periphery:ignore`のコメントを追加すると警告を無視できます
    - ノイズとなりそうな警告を消せます

![スクリーンショット 2020-12-01 13.22.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63985/608c5ade-9b1c-6b60-8671-6fbc259e7b31.png)


- formatを変えて出力
    - `xcode`, `csv`, `json`, `checkstyle`の４つに対応しているのでCIなどで出力する際に便利です


## まとめ
- 不要なコードは定期的に削除しておきたい
- `periphery `を使うと便利。CIで定期実行すると不要なコードを見つけやすくなる
スピード,コストに重視するDRとは

## 1.目的
今回DRについて調べる機会があり、自分の中でまとめる意味と災害復旧については直接の関わりがなくても知っておくことに損はないと思いましたので記事にしていこうと思います。

## 2.DRとは
DRとは、**ディザスタリカバリ**の略で予期せぬ災害(地震や火災、落雷)によって被害を受けたシステムを復旧することを指します。

## 3.DRとBCPの違い
BCPとDRの主な違いは、**「目的」の差**にあります。それぞれの特徴を見てみましょう。

- **BCP(Business Continuity Planning):事業継続計画**
総合的な復旧対策であり、**事業を継続すること**が重視されます。会社の存続を目的としているため、経営層も含めた計画を行わなければなりません。地震や火災、落雷による停電など想定されるリスクを洗い出し、実現可能な対策を考えることが重要です。

- **DR(Disaster Recovery):災害復旧**
基本的にBCPと同じように災害が発生したときの復旧対策になりますが、DRはBCPよりも範囲が狭く、主に**災害によって被害を受けたシステムの復旧**が重視されます。
近年ではIT技術の発展に伴いシステムに依存している企業が多いため、DR対策の必要性が高まっています。

<img width="350" alt="比較図.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669189/729077cd-6bd5-6951-8115-2d159d8b1ca7.png">

## 4.DRを考えるにあたっての指標
DRを考えるにあたっての指標として、2つポイントがあります

- **RPO(Recovery Point Objective):目標復旧地点**
災害などによってデータが破損した場合、**どの地点まで戻ってデータを復旧しなければならないか**を示す指標。たとえば、RPOが0秒であれば、データ破損の直前、RPOが3日間であれば、データ破損の3日前までのデータを復元しなければなりません。
<img width="350" alt="RPO.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669189/f645fc65-f547-f19b-2496-bdea1d77bbb2.png">

- **RTO(Recovery Time Objective):目標復旧時間**
破損したデータを**いつまでに復旧するのか**を示す指標。たとえばRTOが3時間であれば3時間以内に復旧しなければならないということになります。
<img width="350" alt="RTO.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669189/51587526-2a42-12a7-ca40-ee314a88dce8.png">



## 5.重要となる2つのポイント
DRにおいて重要視するポイントが2つあります。

- **スピード**
システム復旧に時間がかかりすぎてはDRの意味がありません。DRの一環としてデータのバックアップが取れていたとしても、その**復旧までの期間で事業の存続そのものが危うくなる**ようであれば、DRを実行している意味がありません。金融機関など、即座の復旧が必要な業種では、この“スピード”を何よりも意識する必要があります。

- **コスト**
DRは災害が起こらなければ使う機会のない、**保険**です。そのため、その**保険に対してどれだけコストをかけるのか**は、担当者にとっても悩みどころでしょう。そのため、近年では自社のリソースを使うのではなく、「クラウドサービス」を利用して低価格でDRを導入しようという動きもあります。

それぞれに対応したDRの導入方法は下記サイトに詳しく書かれています。
[みんなのBCP](https://bcp-manual.com/bcp/risk/dr_bcp/)
## 6.まとめ
今回調べた中で直接いじったりすることはなくともシステムデータを扱うような企業で働く以上知っていて損はない知識だと思いました。
また、BCPやRPO、RTOなどITパスポートや基本情報で出題されていたものもあったので今後DRも出題対象になるかもしれないなとも思いました。

##参考
・[みんなのBCP](https://bcp-manual.com/bcp/risk/dr_bcp/)
・[ITトレンド](https://it-trend.jp/bcp/article/134-0019)
useEffectをマウント時に1回だけ実行する方法

# はじめに

Reactで副作用を扱うフックに`useEffect`がありますが、従来の`componentDidMount`のようにマウント時に1度だけ実行したい場合があります。
公式ドキュメントを読んでも方法が分からなかったので、備忘録をかねて投稿します。

# useEffectとは

Reactのフックという機能がありますが、その中でも副作用を扱うためのフックです。

副作用とは、

- 引数以外の要因で返り値が変化する関数
- 自身の関数の外に影響を与える関数

のような関数のことで、具体的には以下のような処理を伴う関数を指します。

- API通信などの外部への通信
- DOMの変更
- 状態の変更

公式ドキュメントでは、以下のような例が記載されています。
`useEffect`に渡されたコールバック関数内で、DOM（document.title）を変更しています。

```jsx
import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
```

https://ja.reactjs.org/docs/hooks-effect.html

# useEffectをマウント時に1回だけ実行する方法

上記の`useEffetct`に渡されるコールバック関数を、コンポーネントのマウント時に1回だけ実行するには、第2引数に空の配列を渡します。

```js
useEffect(() => { ... }, []);
```

`useEffect`の第2引数に配列を渡すと、マウント時とその要素に変更があった場合にコールバック関数を実行するように動作します。
例えば何らかの`id`に変更があった場合に、API通信してデータを取得する、などの使い方ができます。

```js
const [id, setId] = useState(0);
useEffect(() => { ... }, [id]); // idに変更があった場合に、コールバック関数を実行する。
```

# まとめ

以上、`useEffect`をマウント時に1回だけ実行する方法でした。
実際の業務では`useEffect`でAPI通信をすることが多いと思いますが、初回マウント時にAPIから取得したデータを表示する、という要件は多いかと思いますので、ご参考になればと思います。
【サルが書く】EloquentでそれぞれのSELECTで取ってきたデータを、それぞれでソート(ORDER BY)してくっつけたい(UNION)

わきゃ!!

GIGアドベントカレンダー2日目になります！
GIGメンバーの投稿はこちら👇 から見てみてね！
https://qiita.com/organizations/gig-inc

## EloquentでそれぞれのSELECTで取ってきたデータを、それぞれでソートできないんですけど！

このようなことをしたかった

```php
$taro = EloquentOffice::where('name', 'taro')
        ->orderBy('created_at', 'asc');

$jiro = EloquentOffice::where('name', 'jiro')
        ->orderBy('created_at', 'asc')
        ->union($taro)
        ->paginate();

```

これだとorderByがうまく動いてくれない

```php
$taro = EloquentOffice::where('name', 'taro')
        ->limit(999999999999)
        ->orderBy('created_at', 'asc');

$jiro = EloquentOffice::where('name', 'jiro')
        ->limit(999999999999)
        ->orderBy('created_at', 'asc')
        ->union($taro)
        ->paginate();
```

これだとorderByがうまく動いてくれる

すべてのデータを取得してきて並び替える時は`->limit(999999999999)`をつけているがもっとスマートなやり方が無いでしょうか......
PowerAutomateが失敗した原因を調べる

PowerAutomateでフローを作ったときに、
なんか動かなかったっぽいな、というときにどうやって調べていくのか私なりの方法を記載します。

# 動かなかったよ、というメールがきた
作成したPowerAutomateが失敗した場合、「1 of your flows have failed」というタイトルのメールがきます。タイミングは謎。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/895455/8e0dc757-f62a-38c6-ce18-f67120f095cf.png)


# PowerAutomateの対象のフローを確認し、エラーの詳細を確認する
メールに失敗したフローの名前が記載されているので、そのフローを確認します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/895455/f1a80de3-30ef-aa8b-3437-ba6e4d5d4d42.png)

「28日間の実行履歴」に失敗した実行が表示されていることが確認できます
失敗した実行履歴の「開始」の時刻がリンクなので、クリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/895455/1b3a03f7-e877-6985-a970-1bd360b60921.png)

エラーになった処理がどこなのかわかります。
ここで「！」アイコンがでている処理をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/895455/9051cde5-265e-4efd-a4d4-860bd0f28901.png)

詳細なエラー原因がわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/895455/ce50bdef-229b-ec67-1c36-d34f38e3cc81.png)

このフローは、「イベントの作成」の中で、
日付を指定する際に以下のようにし、Excelから取得した日付に9時間足しているのですが、
どうやらそこがエラーになっているようです。
日付のフォーマットがだめだったっぽいですね。
`addHours(outputs('行の取得')?['body/日付'],9)`


# エラー箇所を調整する
Excelの日付はこんな感じでもっています。
また、セルの書式設定は「日付」としているのですが、
そのせいで数値として値をとってきてしまっていたようなエラーでした。（44179って書いてあったので）
なのでここのセルの書式設定を「文字列」とします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/895455/b1c84960-14bf-20dc-f3ec-2103c0261395.png)


# 再実行
今回はExcelの方を直したので、先ほどのエラーの詳細画面で、
「再送信」ボタンを押下します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/895455/08ebd0af-6b5b-9054-805d-8a69eebd9d76.png)

うまく動きました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/895455/5bf3ffa3-1a11-d83c-dce3-a37b356fc0f5.png)


# フローを修正した場合
フローの「編集」画面に「テスト」があるので、それを押下します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/895455/5a1a93ab-7946-73b9-9a4c-c393f11d7832.png)

「以前の実行からのデータを使用する」を選択することで、
過去の実行時のデータを使用してフローの動作確認を行うことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/895455/29179b52-034f-70cc-1b57-d949729c0cc5.png)
Amazon EBS に無料利用枠対象の gp3 登場。性能を試す。

# Amazon EBS に gp3 が登場

re:Inventが始まりましたね。
<A HREF=https://aws.amazon.com/jp/blogs/aws/new-amazon-ebs-gp3-volume-lets-you-provision-performance-separate-from-capacity-and-offers-20-lower-price/ target=_blank>
本日の発表で Amazon EBS に無料利用枠対象のSSDタイプ gp3 が登場しました。</A>
しかも今日から使えます！

## 1. 無料利用枠対象で高速なgp3

無料利用枠対象（基本性能のみ）なのにかなり良いです。
性能はおよそこんなとこ。

- 最低保証IOPS 3000 
    - 1GiBあたり 3 IOPS なのは変わりません（つまり1TiBまでは性能が変わらない）
    - gp2では最低保証 100 でした。従来1000GiB(1TiB) 必要だった性能を無料利用枠の30GiBでも使えます
- 追加料金でプロビジョンドIOPSを 16000 まで設定可能
    - gp2は容量による性能固定(33MiBまでは100 IOPS固定)でしたが性能設定可能に
- gp2よりも20%程度安い


## 2. しかしさっそく試すと

### 2.1. 2020/12/2現在

既存のEC2インスタンスで使用しているEBSも無停止でgp3へ変更可能と聞いてさっそく試します。

すると。。
![gp3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96018/6965a5f0-b54f-daf9-3030-63655b88560f.png)
なななんと、起動ディスクとしては使えないようです＞＜

### 2.2. 2020/12/6追記

何の前触れも無く、使えるようになっていました。
30GiBのボリュームでは数十秒変更がで完了しました。
![gp3-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96018/bcc01440-ff11-4baa-f254-e9fc246bed91.png)

もちろん新規インスタンス作成時も最初から設定可能です。
ここで注意が必要です。デフォルトの `IOPS` がなんと `15000` になっています。
容量1000GiBまでのボリュームで無料利用枠対象となるIOPSは `3000` です。忘れずに3000と手動入力しましょう。
同様に無料利用枠対象となるスループットは `125MB/秒` です。
![gp3-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96018/13079006-bcc6-f922-e4b1-bcab9317cfeb.png)



## 3. 性能を試す

gp2 と gp3 どのぐらい性能が違うのでしょうか。
無料利用枠の範囲である30GiBで試します。

試験方法:

```
dd if=/dev/xvda1 of=/dev/null bs=1M
```

試験結果(MB/秒):

| タイプ | t2.micro | c4.xlarge | c4.8xlarge | c5.24xlarge |
|:-:|:-:|:-:|:-:|:-:|
| gp2  |  64.1 | 94.0  | 119 | 119 |
| gp3  |  64.1 | 97.2  | 100 | 132 |

考察:
t2.microは何度試してもgp2でもgp3でも64.1MB/秒で固定でした。
ディスクI/OもCPU資源を使いますからこの試験を行っていると常にload 1.00であったことから
CPU資源が枯渇しこれ以上の性能は出ないようです。
c4.xlargeも誤差程度で性能差はほぼ無しと思って良さそうです。
謎なのはc4.8xlargeで何故かgp2の方が常に高速でした。
何度か試してもgp2は120~130MB/秒、gp3は100MB/秒前後で逆転しませんでした。
いずれにせよ、小容量では劇的な性能の違いは無いと思われます。


## 4. まとめ

<STRIKE>良いことだらけのgp3ですが、現時点では起動ディスクとしては使えないようです。
起動ディスクだからこそ高速に使いたかったのですが、アップデートに期待しましょう。</STRIKE>
リリース発表時、ブートデバイスに使えないとは何も言及されておらず使えなかったgp3。
そしていつの間にか使えるようになっているということは元々使える予定だったのでしょう。
AWSお得意の見切り発車リリースだったのかもしれません。

ブートデバイスにも使えるようになった gp3 は無料利用枠対象で gp2 を使い続ける理由は無くなりました。
既存のgp2ボリュームも簡単にgp3へ切り替え可能です。
やっぱりgp2の方が良かったと思ったら6時間以上経過すれば元に戻せますから大丈夫。
お試しあれ。
Roman numerals



# Document Links

-   [マルチスケールシミュレーション特論まとめ](https://qiita.com/evendemiaire/items/25f459daa57ab8875ba6)
-   [roman numerals](https://qiita.com/daddygongon/items/2d0a73a51ddab2d9da1b)


# Roman numerals


## ローマ数字の基礎知識

ローマ数字って格好いいよね．

ただ，私自身10ちょっとまでしか見たこと無いんですよね．

では，ローマ数字にはどんなのがあるのか．

| arabic | roman |
|-------:|:------|
| 1      | I     |
| 5      | V     |
| 10     | X     |
| 50     | L     |
| 100    | C     |
| 500    | D     |
| 1000   | M     |

ローマ数字で扱われる基本的な文字は上記のもので，`2 >> II，8 >> VIII` というように表される．

ただ，4と9のときだけ異なり，`4 >> IV, 9 >> IX` と表される．（知ってた）

2桁ではどうなるのか？

私は単純なので，`38 >> XXXVIII` を見て，なるほど， `49 >> XXXXIX` だ！と思ったわけです．

正解は `49 >> XLIX` に当然なるわけです．（1桁のときと考え方同じですもん）

てなわけで，幾つか例を上げると，

| arabic | roman        |
|-------:|:-------------|
| 4      | IV           |
| 15     | XV           |
| 32     | XXXII        |
| 44     | XLIV         |
| 99     | XCIX         |
| 439    | CDXXXIX      |
| 499    | CDXCIX       |
| 961    | CMLXI        |
| 2254   | MMCCLIV      |
| 3782   | MMMDCCLXXXII |

みたいな感じになるわけです．

ちなみに，現代の一般的な表記法では **1以上4000未満** まで表せるらしい．


# アラビア数字をローマ数字に変換


## 解説

ローマ数字で使われる文字は決まっているので，配列で扱う．

次は，各桁をどのように処理するかだが，

前述したように，ローマ数字では4,9かそれ以外かで表記パターンが異なるので，条件分岐する．

条件に合えば，文字列に文字を追加していく．

考えたのはこれぐらい．

```ruby:roman_numerals.rb
def arab_to_roma(n)
    roman = ['I','V','X','L','C','D','M']
    to_roman = ""

    if n >= 4000 then
	puts"4000未満の数字にしてね"
    else
	i = 0
	while n > 0 and i < 5 do
	    r = n%10

	    if r == 9 then
		to_roman.insert(0,(roman[i] << roman[i+2]))
	    elsif r == 4 then
		to_roman.insert(0,(roman[i] << roman[i+1]))
	    elsif r != 0 then
		for j in 0..(r%5-1) do
		    to_roman.insert(0,roman[i])
		end

		if r >= 5 then
		    to_roman.insert(0,roman[i+1])
		end
	    end

	    i += 2
	    n = n/10
	end

	for i in 0..n-1 do
	    to_roman .insert(0,"M")
	end

	return to_roman
    end
end

num = ARGV[0].to_i
puts arab_to_roma(num)

# for num in 1..3999 do
#     puts arab_to_roma(num)
# end
```

こんな感じになりました．

正誤判定するには，コメントアウト部分を走らせて，out.txtに出力，roman\_ans.txt(Excelとかで値を取れるよ)，diffを取る．

    $ ruby roman_numerals.rb > roman_out.txt
    $ diff roman_ans.txt roman_out.txt

何も返さなかったら合ってる．


### Update

コメントをいただいたので，修正を加える．

```ruby:roman_numerals_update.rb
def arab_to_roma(n)
    roman = %w[I V X L C D M]
    to_roman = ""

    if n >= 4000 then
	puts"4000未満の数字にしてね"
	return
    end

    0.step(to: 4, by: 2) do |i|
	r = n%10

	case r
	when 0
	when 9
	    to_roman.prepend roman[i] + roman[i+2]
	when 4
	    to_roman.prepend roman[i] + roman[i+1]
	else
	    (r%5).times do
		to_roman.prepend roman[i]
	    end

	    if r >= 5
		to_roman.prepend roman[i+1]
	    end
	end

	n = n/10
	if n == 0 
	    break
	end
    end

    to_roman.prepend "M" * n
    return to_roman
end

num = ARGV[0].to_i
puts arab_to_roma(num)

# for num in 1..3999 do
#     puts arab_to_roma(num)
# end
```


## 発展

Class化について学んでから解きます．


# 締め

今回はアラビア数字をローマ数字に変換するCodeをRubyで書いた．

他に良い方法があれば，教えてください．



------
 - **source** ~/school/multi/my_ruby/grad_members_20f/members/evendemiaire/post/roman_numerals.org
諦めたSOPの事：いろどりを増やせそうなSOPだったから。

<a href="https://nullnode.wixsite.com/houdinipsalm/post/houdini-advent-calendar-2020-day-2th">Houdini Advent Calendar 2020 Day2th</a>の記事に入れなかったSOP、
grouprange SOPの事を本日の項目に書きます。

このSOPは選択のバリエーションをwrangleなどで指定せず 変化が加えられたりが
可能な便利SOPなので覚えておくと後々助かるSOPです。
![諦めたSOP.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/847445/f5b33e27-1c96-29cd-12ef-8c103be9038b.png)
Hipファイルは<a href="https://app.box.com/s/zkqtog6ieiumw05xhf5zp9bexzxfj2r4">こちら</a>になります。




grouprange SOPの簡単な説明：
任意のプリミティブ/ポイント/バーテックスのいずれかを
破線機能のように飛ばし飛ばしで選択しグループ名がつけられる。
![あどかれあっぷ00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/847445/50165d6c-5f9d-1898-1ace-1a5f53819621.png)

つけたグループでtransformのScaleなどを調整すれば★型などができ
![あどかれあっぷ01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/847445/2aff7982-3232-242b-fff3-2f447c622078.png)



その後引き延ばしたりするとなんかとても便利そうな金型のような物ができますね
![あどかれあっぷ02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/847445/fbda3152-b1a9-688f-b90c-c2744214b117.png)

気が付けば趣が出始めるようなオーナメントが完成しているので
ここでくっつけてしまえばよりそれっぽくなる所だったのですが・・
![あどかれあっぷ03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/847445/bc2cc92c-8fe0-8213-9cdf-a1186826d032.png)

グループ指定そのものが重くなっていく機序と化すので比較的軽いモデルに使える
傾向があるようです・・その辺りを割り切って指定していく方法もあったのですが、
説明が難しくなってしまう上　20手以内に手順を修められるテクにならなかったので
こちらで説明させていただきました。

ここまで読んでくださり　ありがとうございました。
【Panoptic Segmentation】DeeperLab : DeepLabの進化系?!

<h1>概要</h1>
DeepLab系列をbaseにしてPanoptic Segmentationを行えるNetworkがあったので読んでみた。

・[ASPP](https://qiita.com/minh33/items/23030207de240edecc15)(Atrous Spatial Pyramid Pooling)
・[Panoptic Segmentation](https://qiita.com/minh33/items/101153371b9fd4ee6115)(Instance Segmentation + Semantic Segmentation)
・[Key pointを使ったinstance segmentation](https://qiita.com/masataka46/items/07c8138239dd5895ebcf)
この3点を既に理解していればこのネットワークの新規性は少しだけ。

<h1>新規性</h1>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/49572d87-d6dc-6567-17b7-1a2da209d80a.png)

<h2>S2D / D2S</h2>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/51b5c319-47ec-25a4-f29a-cb7ab769de1d.png)
図のように変形する事でメモリの消費量を変えずに画像サイズを変更出来るらしい。
なんかちょっと不思議な感じ。
多分そんなに重要じゃないから軽く流そうm(_ _)m

<h2>PC(Parsing Covering)</h2>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/ff8c8f6f-f494-5193-1b16-1fd130b655da.png)
Ponotic SegmentationではPQ(Panoptic Qality)が評価指標として使われる事が一般的。
近い物体(大きい物体)は自動運転などで検出精度が高くあるべきという事から大きな物体に焦点を当てる評価指標を提案。
C  : classの数
Ni : あるクラスのGround Truthのpixelの数
maxIOU(R,R') : ある物体のGround Truthに対する最大(predictionの中から一番重なっている範囲が大きいやつ)のカバー率(0~1)
Covi : あるクラスのGround Truthに対するカバー率
PC : 全クラスのGround Truthに対するカバー率

<h2>結論</h2>
PC(Parsing Covering)は使えそうだなって思った。

<h1>参考文献</h1>
DeeperLab: Single-Shot Image Parse
https://arxiv.org/pdf/1905.01220.pdf
https://qiita.com/masataka46/items/07c8138239dd5895ebcf
[ServiceNow] 日本語化したメッセージを表示させる

# きっかけ
OOTBのサービスカタログをカスタマイズして利用しようとしたら、メッセージが日本語表示されなかった。
![スクリーンショット 2020-12-01 22.24.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676866/5d73ef30-20d8-2d7e-6373-9f5eeda03eb3.png)

## 原因
モバイルおよびサービスポータルのクライアントスクリプトでgetMessageを同期的に扱うことができない。

```validationOnSubmit.js
  if (endDate < startDate) {
    g_form.addErrorMessage(getMessage('Please ensure that the End date/time is after Start date/time'));
    return false;
  }
```

# 対応方法
コールバックを使用する。

```validationOnSubmit.js
  if (endDate < startDate) {
    getMessage('Please ensure that the End date/time is after Start date/time', showError);
    return false;
  }
(中略)

function showError(msg){
  g_form.addErrorMessage(msg);
}
```
![スクリーンショット 2020-12-01 22.23.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676866/849439f2-c98c-a60e-c30f-ae1ef9d0ae2e.png)


## 参考リンク
[getMessage() is translation in does not work in Service Portal or Mobile.](https://hi.service-now.com/kb_view.do?sysparm_article=KB0696905)

## 捕捉
日本語のメッセージは `システムローカライズ > メッセージ` の中にあります。
![スクリーンショット 2020-12-01 22.27.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676866/4e2a3e06-3ce2-6ea0-b9af-4096c6568ca5.png)
PHP unset関数を実行したら構文エラーが出た

# 目的

- PHPでunset関数を用いて連想配列の要素の削除する処理を実装中に「syntax error, unexpected 'unset’」というエラーに悩まされたので原因と正しい記載方法をまとめる

# 前提情報

- 下記サービスで検証した。
    - [https://paiza.io/ja](https://paiza.io/ja)
- 連想配列arrayを定義する。
- キー「str3」の値を配列から削除したい。

# エラーが出たコード

- 下記のようなコードを記載して実行したところ「syntax error, unexpected 'unset’」のエラーが表示された。

    ```php
    <?php
    // 連想配列の定義
    $array = [
        'str1' => 'a',
        'str2' => 'b',
        'str3' => 'c'
    ];
    
    // キーを指定した値の削除
    $array = unset($array['str3']);
    
    // 確認
    var_dump($array);
    
    ?>
    ```
- 「キーを指定した値の削除」部分ではunset関数で削除が終わった配列を再度$arrayに格納している。

# エラー

- 下記のエラーが出力された。

    ```
    PHP Parse error:  syntax error, unexpected 'unset' 
    ```

# 原因

- 下記の問題のコードを記載する。

    ```php
    // キーを指定した値の削除
    $array = unset($array['str3']);
    ```
- unset関数はもともとの配列からキーを指定して要素を削除するので戻り値を変数や配列に入れようとしていることが間違えていた。

# 正しいコード

- 下記のように記載することで問題は解決した。

    ```php
    <?php
    // 連想配列の定義
    $array = [
        'str1' => 'a',
        'str2' => 'b',
        'str3' => 'c'
    ];
    
    // キーを指定した値の削除
    unset($array['str3']);
    
    // 確認
    var_dump($array);
    
    ?>
    ```
- 繰り返しになるようだがunset関数は指定された配列本体の要素を削除する。そのためunset関数にキーを指定した配列を与えた段階ですでにもともとの配列からはキーとキーに紐づく値は削除されたことになる。
[Blockchain]Hyperledger Fabricを試す(byfn検証編)

## 目的

構築したHyperledger Fabricには3つのサンプルネットワークが同梱されています。
・ byfn
・ fabcar
・ balance-transfer
今回使用する予定なのは「fabcar」なのですが、せっかくなので他のサンプルネットワークにも触れておきます。
今回は「byfn」のサンプルネットワークを実際に動かしてみます。

## 参考

[[Blockchain]Hyperledger Fabricを試す(構築編)](https://qiita.com/class2glass/items/5b5812408d7438441777)

## 起動

以下のコマンドを実行することで起動できます。

```
$ cd fabric-samples/first-network/
$ ./byfn.sh generate
$ ./byfn.sh up
$ docker ps --format "table{{.Names}}"
NAMES
dev-peer1.org2.example.com-mycc-1.0
dev-peer0.org1.example.com-mycc-1.0
dev-peer0.org2.example.com-mycc-1.0
cli
orderer.example.com
peer1.org2.example.com
peer1.org1.example.com
peer0.org2.example.com
peer0.org1.example.com
```

ただ、一度サーバを停止したあと、再度起動するとエラーが発生します。

```
：
Error: got unexpected status: FORBIDDEN -- Failed to reach implicit threshold of 1 sub-policies, required 1 remaining: permission denied
!!!!!!!!!!!!!!! Channel creation failed !!!!!!!!!!!!!!!!
========= ERROR !!! FAILED to execute End-2-End Scenario ===========

ERROR !!!! Test failed
```

この場合、一度byfnの停止処理を実行し、再度起動することで正常に起動することができました。

```
$ ./byfn.sh down
$ ./byfn.sh up
```

## 動作確認

cli用のコンテナに接続し、chaincodeを実行してみます。

cli用のコンテナに接続

```
$ docker exec -it cli bash
```

チャネル名の設定

```
# export CHANNEL_NAME=mychannel
```

現在の「価値」の参照

```
# peer chaincode query -C mychannel -n mycc -c '{"Args":["query","a"]}'
90

# peer chaincode query -C mychannel -n mycc -c '{"Args":["query","b"]}'
210
```

「価値」の移動
「a」から「b」に対して価値「10」を移動します

```
# peer chaincode invoke -o orderer.example.com:7050 --tls true --cafile /opt/gopath/src/github.com/hyperledger/fabric/peer/crypto/ordererOrganizations/example.com/orderers/orderer.example.com/msp/tlscacerts/tlsca.example.com-cert.pem -C $CHANNEL_NAME -n mycc --peerAddresses peer0.org1.example.com:7051 --tlsRootCertFiles /opt/gopath/src/github.com/hyperledger/fabric/peer/crypto/peerOrganizations/org1.example.com/peers/peer0.org1.example.com/tls/ca.crt --peerAddresses peer0.org2.example.com:7051 --tlsRootCertFiles /opt/gopath/src/github.com/hyperledger/fabric/peer/crypto/peerOrganizations/org2.example.com/peers/peer0.org2.example.com/tls/ca.crt -c '{"Args":["invoke","a","b","10"]}'
```

移動後の「価値」の参照
価値の値が変化していることが見てわかります

```
# peer chaincode query -C $CHANNEL_NAME -n mycc -c '{"Args":["query","a"]}'
80

# peer chaincode query -C $CHANNEL_NAME -n mycc -c '{"Args":["query","b"]}'
220
```

## Hyperledger Explorer

Hyperledger Explorerでも価値が移動していることが見てわかります。

(移動前)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589067/fdc5c5ab-2d07-ecf7-cc20-d691f832de50.png)


(移動後)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589067/4352dad4-9f86-042f-b7ee-51ad91499016.png)


## おわりに

簡単ではありますが、チュートリアルにある説明の通りの動作を確認することができました。
環境を構築するのが大変だっただけに、このbyfnが動いたときはとても感動しました。
コマンドでの実行結果の確認だけでなく、Hyperledger ExplorerというGUIツールでもTransactionが生成されている、価値が移動しているという経緯を確認できました。
また、勝手な解釈ですが、byfnはHyperledger FabricでBitcoinのような「価値」のやり取りが出来るサンプルネットワークだと理解しました。
当然、Chaincodeを解析すれば、登場人物を「a」「b」の他に作成することもできそうです。
次回はbalance-transferを検証してみる予定です。
Djangoの学習サイトを作りました

#Djangoのチュートリアルあ分かりづらい
と思ったことがある方も多いのではないでしょうか？

かくいう私も、挫折組の一人です。。。

#Djangoを基礎から学べるサイトを作りました

[https://www.django-academy.net/](https://www.django-academy.net/)

このサイトも、もちろんDjangoを使って作成しています。

一部の動画の視聴にはログインが必要ですが、費用は一切かかりません。

![djangoacademy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/511622/5984b0e1-4b9d-0055-80ac-fa68fe0377a6.png)

##動画の再生画面はこんな感じです。

他の動画配信サイトのUIなどを参考にして作成しました。

![djangoacademy2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/511622/d2ba8bcc-7c94-9475-6e8b-2ff30111a4f7.png)


#公開している動画（一部）

現在公開している講義の一部をご紹介させて頂きます。

・ダウンロード機能の実装

・sendgridを使ってメールを送る方法

・Herokuを使ってデプロイをする方法

・redirectの実装方法

・get_absolute_urlの使い方

などなど。。

#リクエストも募集中です

Djangoを学んでいて、このあたりが分からない。

〇〇について詳しく解説してほしい。

などのリクエストがありましたらコメントからご意見頂ければ幸いです。
GithubのProfileに詳細な自己紹介を追加する方法

# ・解説するもの
当記事ではこのようなものをProfileに追加する方法をご説明させていただきます。
ちなみにコレはおそらく ``Special repository`` というらしいです。
(きちんと名称を紹介することができなくてすみません。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677340/194706a1-4e38-1fe1-6c2b-fa393e372c38.png)
具体的に言うとこのような形で追加できます。
ここには更に詳細な自己紹介や、見せたいものを追加することがオススメです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677340/09a7399a-0309-017f-14a1-29f3767e6142.png)

## 🙏お願い事
本題の前に皆さんにお願いしたいことがあります。当記事は必要であったちゃんとしたスクリーンショットが
撮れていない部分がございますので、その部分のスクリーンショットをご提供いただけると大変助かります。
もしよろしければご提供ください。
この記事のコメント欄か https://twitter.com/nezuu2 からスクリーンショットをご提供くださるとありがたいです。

# ■ 解説 (本題)
まずは、repository(リポジトリ)を新たに作成しましょう！
そのとき、Repository name(リポジトリの名前)はアカウント名にしましょう。
(僕の場合はnezuu2ですね。Owner *という文字の下に書いてある通り。)
下のスクショではエラーが出て赤くなっていますが、皆さんはそうならないかと思いますのでご了承ください。
<font color="gray">(解説用に撮影しておいたスクショがクリップボードに保存しきれなくて結局スクショを撮り直した結果こうなりました。
ちなみにこのエラーはすでにnezuu2というrepository(リポジトリ)が存在しているよということです。英文にalreadyと書かれている通り。)</font>
ちなみにうまく行くと以下スクショのように、青い猫ちゃんと文章が出てきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677340/0630c206-ccd2-f532-df26-4f7b47a29200.png)
そうしたらさっきの続きですが、↑上にある `Add a README file` というところにチェックを付けましょう！。
皆さんの今の状況と見比べてみるとわかりやすいと思います。😉

そうしたら僕の場合はこんな感じですでに書き換えてしまっているのであれですが、皆さんの場合は
``## Hi there`` (やあ！) という文章と``- [絵文字][文章]``と言ったようなものがズラーと縦に並んでいると思います。
それを自分が表示させたい文章に換えられてみてください。
ちなみに ``-`` ってなんで付けるの？と思われるかもしれませんが、この``-(ハイフン)`` は箇条書きにするために付けるものです。
ですので特にこだわりがなければ残しておくことをオススメいたします。
と言っても文章を丸ごと換えてしまうのであれば話は変わってきますけどね💦
ちなみに僕はこのような感じに書き換えました！。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677340/8f4ff581-8df3-048a-c100-66ad6a4c18f6.png)
英文が読めない方はGoogleChromeに付いているGoogle翻訳を使ってみたり、DeepLという機械学習を重ねたAIが、
自然な翻訳をGoogle翻訳と同様に無料でしてくれるサービスがあるので、そちらを利用されると良いと思います。
<font color="gray">DeepLのリンクはこちら：[https://www.deepl.com/translator](https://www.deepl.com/translator)</font>
そうしたら repository(リポジトリ) を commit(コミット) するときと同じようにコミットしてください。
一応やり方を説明いたしますと、まず大きな文字で Commit と自分のアイコンの隣に表記されていますよね？
(スクショのは違いますが…)
その下に Update README.md などの変更したところが分かるような短い文章(タイトルや付箋みたいなもの)を入力してください。
そうしたらその下に任意で、その概要を書いてください。僕はいつもコレは書くのがめんどくさいのでスッ飛ばしてます。(笑)
なので、よくわからない！って方は飛ばしちゃっても大丈夫です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677340/73e3610b-6269-2f49-914b-7e29588ec5e5.png)
そうしたら特にいじらず、Commitという緑色のボタンを押してください！。これでCommit(コミット)完了です！
お疲れさまでした。ココまででコレ(special repository)を、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677340/194706a1-4e38-1fe1-6c2b-fa393e372c38.png)
追加することができました！。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677340/09a7399a-0309-017f-14a1-29f3767e6142.png)
<b> 最後までご閲覧くださりありがとうございます！
当記事が少しでも皆さんのお役に立てれば幸いです。</b>
ファイル名を人間にとって自然な形でソート

# 背景
プログラムで処理された結果をみている時に「1.txt」「11.txt」「2.txt」と並んでいると悲しい気分になりますよね。昨日ちょうど悲しくなったので、ファイル名を直感的に並べるロジックを考えてみました。

# 実行結果
実行結果を見てもらえば説明は不要かと思います。

```JSON
[
  "aaa.txt",
  "aaa.xlsx",
  "aaa(1).txt",
  "aaa(1).xlsx",
  "aaa(2).txt",
  "aaa(2).xlsx",
  "aaa(10).txt",
  "aaa(10).xlsx",
  "aaa1.txt",
  "aaa1.xlsx",
  "aaa2.txt",
  "aaa2.xlsx",
  "v1.0.0",
  "v1.0.0-SNAPSHOT",
  "v1.0.1",
  "v1.0.10",
  "v1.2.1",
  "v1.10.1"
]
```

# もっと良いコード
コメントで教えてもらいました。a.localeCompareのnumericオプションでいけちゃいます。

```typescript
console.log(JSON.stringify([
    "aaa(10).xlsx",
    "aaa1.xlsx",
    "aaa.xlsx",
    "aaa(10).txt",
    "v1.0.0-SNAPSHOT",
    "v1.2.1", "aaa.txt",
    "aaa1.txt",
    "aaa(2).xlsx",
    "aaa2.xlsx",
    "aaa(1).xlsx",
    "aaa(1).txt",
    "v1.10.1",
    "v1.0.10",
    "aaa2.txt",
    "aaa(2).txt",
    "v1.0.1",
    "v1.0.0"

].sort((a, b) => a.localeCompare(b, [], {numeric: true})), null, 2))
```

# 車輪の再開発なコード
とはいえ、他の言語で実装する人にはちょっと参考になる、、、かもしれない

```typescript
import path from "path";

export function numberPadding(n: number | string, l: number) {
    const nStr = `${n}`
    // 想定している桁数を超えた場合にはpaddingせずにそのまま返す
    return "0".repeat(Math.max(0, l - nStr.length)) + nStr
}

function naturalSortKey(str: string, paddingLength: number): string {
    // 数字のソート順を直感的にするために、0パディングをかける
    // A1.txt -> A0001.txt
    // A2.txt -> A0002.txt
    // A11.txt -> A0011.txt
    return str.replace(/[0-9]+/g, (substring: string) => {
        return numberPadding(substring, paddingLength)
    })
}

export function byNaturalFilename(aStr: string, bStr: string): number {
    /*
    連番の場合、最初の一つには番号がついていないケースがある。
    A.txt
    A(1).txt
    このような場合にも対処するため、拡張子以外が一致している場合には拡張子でソート、それ以外は拡張子抜きでソートする
     */
    const aExt = path.extname(aStr)
    const aBase = path.basename(aStr, aExt)
    const bExt = path.extname(bStr)
    const bBase = path.basename(bStr, bExt)
    // 文字列の長さ以上にパディングが必要になることはない
    const paddingLength = Math.max(aStr.length, bStr.length)

    if (aBase === bBase) {
        return naturalSortKey(aExt, paddingLength).localeCompare(naturalSortKey(bExt, paddingLength))
    }
    return naturalSortKey(aBase, paddingLength).localeCompare(naturalSortKey(bBase, paddingLength))
}

export function byNaturalFilenameReverse(aStr: string, bStr: string): number {
    return byNaturalFilename(bStr, aStr)
}

console.log(JSON.stringify([
    "aaa(10).xlsx",
    "aaa1.xlsx",
    "aaa.xlsx",
    "aaa(10).txt",
    "v1.0.0-SNAPSHOT",
    "v1.2.1", "aaa.txt",
    "aaa1.txt",
    "aaa(2).xlsx",
    "aaa2.xlsx",
    "aaa(1).xlsx",
    "aaa(1).txt",
    "v1.10.1",
    "v1.0.10",
    "aaa2.txt",
    "aaa(2).txt",
    "v1.0.1",
    "v1.0.0"
].sort(byNaturalFilename), null, 2))
```
基本情報対策

<html lang="ja">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styl.css">
</head>
<body>
        <div class="head">
            <h1>私の基本情報技術者試験(FE)対策</h1>
            <p>こんにちわ！突然ですが、皆さんは基本情報技術者(FE)の資格を何歳で取りましたか？またいつ頃取る予定ですか？
                私は今年度受験する予定です。それにあたって今回は私流のFE対策を紹介します。</p>
        </div>
        <div class="box">
            <div class="first">
                <h1>なぜFEを受けるのか</h1>
                <p>まず、なぜ私がFEを受けようと思ったのかをお話ししようと思います。<br>
                私は今19歳で、県立の短大に通っています。来年度には就活が迫っている状態です。私が志望する企業はIT企業です。そこでIT系の資格って
            何があるんだろうと思い調べていたところ、基本情報技術者という資格を知りました。</p>
            </div>
            <div class="second">
                <h1>対策の仕方</h1>
                <p>まず私が使っているFE対策サイトを紹介します。有名なので皆さん知ってると思います。
                    「基本情報技術者試験ドットコム　過去問道場」です。教科書はいろいろ買ったんですが、
                    正直僕はどれでもいい気がするので、おススメは「イメージ＆クレバー方式でよくわかる柏木先生の基本情報技術者教室」です。
                    手っ取り早く覚えられるからおススメです。
                </p>
                <li><a href="https://www.fe-siken.com/fekakomon.php" target="_blank">基本情報技術者試験ドットコム　過去問道場</a></li>
                <li><a href="https://www.amazon.co.jp/%E4%BB%A4%E5%92%8C02%E5%B9%B4-%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8-%E3%82%AF%E3%83%AC%E3%83%90%E3%83%BC%E6%96%B9%E5%BC%8F%E3%81%A7%E3%82%88%E3%81%8F%E3%82%8F%E3%81%8B%E3%82%8B-%E6%A0%A2%E6%9C%A8%E5%85%88%E7%94%9F%E3%81%AE%E5%9F%BA%E6%9C%AC%E6%83%85%E5%A0%B1%E6%8A%80%E8%A1%93%E8%80%85%E6%95%99%E5%AE%A4-%E6%A0%A2%E6%9C%A8/dp/4297110113" target="_blank">イメージ＆クレバー方式でよくわかる柏木先生の基本情報技術者教室</a></li>
                <p></p>
            </div>
    </div>
</body>
</html>
Dockerが起動しないときの対処

##環境
　・Windows10pro
　・Docker for windows 19.03.13

##概要
　Docker Desktopがstartingから進まない。

##試したこと
　Hyper-Vの無効化・有効化後、Dockerの再インストール

##解決策
　**①画面左下の[スタート]ボタンをクリックする**
　**②表示されたメニューの一覧から[Windows セキュリティ]をクリックし、Windows セキュリティを起動する**
<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/884367/d17190d9-f208-52dd-07d9-4d1241da3790.png">

　**③[アプリとブラウザーコントロール]をクリック**
<img width="200" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/884367/c860faf5-77c9-4baf-4ba6-44e210d29742.png">

　**④[Exploit protectionの設定]をクリック**
<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/884367/3195e18b-300a-4147-d4d0-f61f608d0a53.png">

　**⑤[プログラム設定]のタブを選択**
<img width="200" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/884367/233f7934-a8af-b0a7-97de-f8d3185646ad.png">

　**⑥C:\WINDOWS\System32\vmcompute.exeを選んで[編集]をクリック**
<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/884367/440da98b-b6d9-a012-fcd5-80e6cd804851.png">

　**⑦制御フローガード(CFG)のシステム設定の上書きのチェックを外して適用**
<img width="200" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/884367/28e03975-4963-a0d5-b49a-09876ef54763.png">

　**⑧DockerをRestartさせると起動ができるようになる**

##参考
https://social.technet.microsoft.com/Forums/windows/en-US/ee5b1d6b-09e2-49f3-a52c-820aafc316f9/hyperv-doesnt-work-after-upgrade-to-windows-10-1809?forum=win10itprovirt
【TypeScript】React Component内でmap関数をネストする方法

# 1. はじめに
みなさま、楽しいプログラミングライフはお過ごしでしょうか？
JavaScript, TypeScript, Reactを勉強し初めて、ちょうど3ヶ月が経過しようとしています。

自分の勉強ログを発信していこうと思い立って2記事目となります。
いつまで続くか分かりませんが、思いつくままマイペースにやっていこうと思います。

↓以下内容の実行環境です。

|  | Version |
|:-:|:-:|
|node.js|14.12.0|
|yarn|1.22.7|
|TypeScript|3.8.3|

# 2. やりたいこと
表題にもある通り、ReactのComponent内で、map関数をネストしたい（map関数を入れ子にして使いたい）と言う内容になっております。

# 3. 結論
↓調べながらやってみた感じ、こんな風にreturnの中で、returnを2回返してやればOKでした！
例として、別のReact Componentに引数として値を渡してあげるシチュエーションを考えます。

**少しハマったこと**
React Componentは1つのReturnで1つの要素しか返せないので、複数要素がある場合や、mapで展開する箇所が含まれている場合はフラグメント`<></>`などで囲ってあげなければいけません。

```TypeScript
import React from "react";
import Fruit from "../Fruit";

const Taste: React.FC = () => {
  const tasts = ["Sweet", "Sour"];
  interface FRUITS_OF_TASTES {
    Sweet: string[];
    Sour: string[];
  }
  const fruitsOfTasts: FRUITS_OF_TASTES = {
    Sweet: ["Apple", "Banana", "Melon"],
    Sour: ["Orange", "Lemon", "Kiwi"],
  };

  return (
    <>
      {tasts.map((tast) => {
        const fruitsKey: keyof FRUITS_OF_TASTES = tast as keyof FRUITS_OF_TASTES;
        return (
          <>
            {fruitsOfTasts[fruitsKey].map((fruits) => {
              return <Fruit fruits={fruits} />;
            })}
          </>
        );
      })}
    </>
  );
};
```

# 4. 最後に
まだまだ、JavaScriptの基礎文法しかり、Reactの書き方もなんとなくわかっている気になている段階だなと改めて実感しました。手を動かしながら引き続き勉強していきます！

**forEachで良いのでは？**
新しい配列を生成していないので、map関数ではなくてforEachで良いのではないかと思われた方いたっしゃると思います。私も最初はそれを試したのですが、forEachだとなぜがブラウザに表示されませんでした。これの原因わかる方いらっしゃいましたら、コメントいただけると嬉しいです！
[AWS] -- Architecture Supporter[1]

# At first.
This content is written by AWS Beginner.
So this content is a possibility that isn't Best Practice.
Please read this content as reference information.

# Want to achieve by this content.
* Create a service that is like the below functions.
    1. select AWS services.
    2. enter needing AWS service spec.
    3. output recommendation AWS architecture.

# Mind map

![mindmap.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/916869/4ac92e56-5c81-32a5-7a90-ede12972ff8d.png)


# Technology using
* CloudFront
* Route53
* S3  + Vue.js
* Lambda(python)
* AWS CloudFormation
* Machine Learning

#Development Environment
* Visual Studio Code
* Docker


Next time, I will make Development Environment.


---
# ◆Related arcticle
* [[AWS] -- Architecture Supporter[2] -- Setting Local Development Environment](https://qiita.com/kazuya-ho/items/59d7353034f4337728c4)
* [[【AWS/GCP】クラウド初学者が、Google Cloud Certified PCA・AWS CP・AWS SAAを１か月で取得した方法]](https://qiita.com/kazuya-ho/items/109f356ba7b0d5e6ddc0)