OmniAICreator/Qiita-1.07M huggingface dataset:
webp 標高タイルを作った話

国土地理院の dem10b png 標高タイルを Mapbox Terrain-RGB 互換の webp 標高タイルにした話です。

![ 2021-04-04 7.35.05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102082/dd845487-36ee-ce80-b0dd-f2bce115f6f4.jpeg)

![ 2021-04-04 7.18.01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102082/7244fe78-5af5-49e1-3753-8aef4f65183e.jpeg)

# デモサイト
次の場所にあります。日本全国どこでも大丈夫です。
https://optgeo.github.io/10b256/#10.95/32.8211/131.1339/-64.7/58

自然地名を重ねあわせたものもあります。
https://optgeo.github.io/shizen/#12.58/35.66726/138.19146/42.9/62

# 作り方
次の場所にレポジトリがあります。
https://github.com/optgeo/10b256

Rakefile と transcode.rb をみていただけると、ほぼ全てカバーされると思います。概要は、次の通りです。

1. mokuroku.csv.gz を使って、タイルを一枚一枚ダウンロードする。
2. 自作のスクリプトで、ピクセル単位でトランスコードする。
3. png ファイルとして保存する。
4. cwebp コマンドを使って、webp ファイルに変換する。

タイルは GitHub Pages にあげているので、自由にお使いください。テンプレート URL は、global.conf 及び hocon/style.conf にあるとおりで、次のものになります。

https://optgeo.github.io/10b256/zxy/{z}/{x}/{y}.webp
minzoom: 3
maxzoom: 12

# タイルセットのサイズ
生産したタイルセットのサイズは、ズームレベルごとに見れば次の通りとなりました。GitHub Pages でホストしてもらえるのは 1GB までなので、z=3..12 のみを上げています。

z=0 12KB
z=1 12KB
z=2 12KB
z=3 24KB
z=4 36KB
z=5 92KB
z=6 268KB
z=7 772KB
z=8 2.6MB
z=9 8.9MB
z=10 32MB
z=11 113MB
z=12 397MB
z=13 1.3GB
z=14 3.5GB

なお、途中で cwebp の -z オプションの値を変えたりしていますが、いずれにしても、z=13, 14 のサイズがこれだけ大きいと、日本全国分を GitHub Pages 一レポジトリ分でまかなうことは難しそうです。特定の地域まで z=3..14 をホストすることは考えられるかもしれません。

日本全体でざっくり 5GB 程度なので、日本を１０程度に分割しておいて、それぞれの地域について z=14 まで GitHub Pages にホストしてもらう、というアプローチになるのではないかと思います。

例えば、z=6 モジュールごとにやってみるというのは試してみるべきチャレンジだと思いますし、z=7 でやるとすれば、それは安全なアプローチであって良いと思います。
Vue.jsでGoogleMapを表示させる方法

## この記事について
vue2-google-mapsというライブラリを使って、Vue.js(vue-cli)にGoogleMapを表示させる方法を書いていきます。

## 準備
まず、[Google Cloud Platform](https://console.cloud.google.com/)からAPI keyを取得します。
プロジェクトの作成→Maps JavaScript APIの有効→認証情報を作成で取得

npmでvue2-google-mapsをインストールする。

```
$ npm install vue2-google-maps
```

main.jsに以下を追加します。

```javascript:main.js
import * as VueGoogleMaps from 'vue2-google-maps'

Vue.use(VueGoogleMaps, {
  load: {
    key: YOUR API KEY,
    libraries: 'places',
    region: 'JP',
    language: 'ja'
  }
})
```

## GoogleMapを表示する
```Sample.vue
<template>
  <div>
    <GmapMap
      :center="{ lat:35.4122, lng:139.4130 }"
      :zoom="7"
      :options="{streetViewControl: false}"
      map-type-id="terrain"
      style="width: 500px; height: 300px"
    >
      <GmapMarker
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
        :clickable="true"
        @click="center=m.position"
      />
    </GmapMap>
  </div>
</template>

<script>
export default {
  data() {
    return {
      markers: [{ position: { lat:35.4122, lng:139.4130 } }]
    };
  },
};
</script>

```

これで東京を中心に地図を表示し、マーカーも中心に設置しています。
optionではストリートビューの表示を消しています。
map-type-idのterrainは地形情報を使った地図を表しています。

マーカーはdataのmarkersの情報を元に設置させています。

## おわりに
今回は簡単にMapを表示しただけなので、情報ウィンドウの表示など詳しくはまた別で書こうと思います。
chsh で sudo してはいけない

厳密には、してはいけないというより、意図した挙動にならない。

# `chsh` に `sudo` をつけるとどうなるか
たとえば、デフォルトシェルを (Bash から) Zsh に変更する際には、以下のコマンドを実行する。

```shell:Shell
chsh -s $(which zsh)
```

このとき、パスワードを求められるので、最初から `sudo` つけておけば良いんじゃないかと安易な考えに至った。

```shell:Shell
sudo chsh -s $(which zsh)
```

しかし、これだと意図した挙動にならない。

`sudo` をつけたことにより root で実行されるので、root のデフォルトシェルが変更されてしまったことになる。

一般ユーザだと、Zsh に変更されていない。

```shell:Shell
echo $SHELL
```
```
/usr/bin/bash
```

代わりに root で Zsh に変更されてしまっている。

```shell:Shell
su -
echo $SHELL
```
```
/usr/bin/zsh
```

まあ、考えてみれば当たり前なのだが、パスワードを求められる → `sudo` をつけておけば (`/etc/sudoers` の設定次第で) パスワードをスキップできる、という発想になっていた。

しかし、root のデフォルトシェルを変更してしまうのは意図していないので、`chsh` を実行するときは `sudo` をつけずにパスワードを入力しよう。

# `exec -l $SHELL` では反映されない
ちなみに、`chsh` を実行したあとは、シェルを再起動する必要があるが、以下のコマンドではうまくいかない。

```shell:Shell
exec -l $SHELL
```

これも考えてみれば当たり前だが、この時点ではまだデフォルトシェルが変更される前なので、`$SHELL` の中身は前のシェルのままだ。

なので、変更を反映させるには、以下のように明示的に変更後のシェルのパスを指定するか、`exit` してもう一度入り直す必要がある。

```shell:Shell
exec -l $(which zsh)
```
matplotlib フォントのエラー対処法

問題点（エラー）

Ubuntu20.04に入れたpythonでmatplotlibを利用しようとすると、Latexでエラーが生じる。

```python

import matplotlib
from matplotlib import pyplot
from matplotlib.ticker import MaxNLocator

pyplot.rcParams['ps.useafm'] = True
pyplot.rcParams['pdf.use14corefonts'] = True
pyplot.rcParams['text.usetex'] = True # ここをコメントアウトするとエラーは消える


x_tmp = numpy.random.randn(10)
y_tmp = numpy.random.randn(10)

pyplot.plot(x_tmp, y_tmp, 'r.', ls='None')


LaTeX Error: File `type1cm.sty' not found.
```

これは、UbuntuにLatexのフォントがうまく入っていないことによるものらしい。

対処法

```shell

$ sudo apt-get install dvipng texlive-base texlive-latex-extra 
texlive-fonts-recommended cm-super
```

とくに最後の「cm-super」が必須だった。

参考・出典
https://tex.stackexchange.com/questions/158700/latex-cant-find-sty-files-altough-packages-are-installed-texlive-ubuntu-12
Nuxt.jsでログインの仕組みにcookieを使った時の備忘録

# やりたかったこと
- ログインするユーザー情報をCookieに保存したかった
- storeだと一時的な保存しか出来ないので、ローカルストレージやCookieに保存する必要があった

# 実際のコード
## 保存のやり方
> Cookies.set({保存したい名前}, {実際に保存するユーザー情報});
> Cookies.set('accessUser', user.uid); //こんな感じで利用していました

## 取り出し方
- ログインしているかどうかを確かめて、ページ遷移をしていたのでnuxtServerInit上で処理を実装していました

> async nuxtServerInit({ req })

reqの中にCookieの情報が格納されています。
あとはcookieparserを使って取り出してあげましょう。

> var cookieparser = require('cookieparser');
export function getUserFromCookie(req) {
  if (process.server && process.static) return;
  if (!req.headers.cookie) return;
  if (req.headers.cookie) {
    const parsed = cookieparser.parse(req.headers.cookie);
    const accessTokenCookie = parsed.accessUser;
    return accessTokenCookie;
  }
}

参考にしたページは忘れてしまったので、思い出したら追記予定
return return ...

# `return return`

## warning: unreachable code だと? 

> warning: unreachable code

などという出力があって焦ったわけです

```shell
$ kotlinc main.kt
main.kt:16:5: warning: unreachable code
    return return inc(value)
    ^
```

Kotlinだからエラーにはならないのか、そうか。ただ、期待した通りの動作になるのかどうか不安なのでちょっと調べることに。

## `return return` するとどうなるのか

とりあえず、実際の動作としては以下の通りで、まぁ動作としては期待通りな訳ですが。

```shell
>>> fun inc(value: Int): Int {
...     return value.inc()
... }
>>> fun returnInc(value: Int): Int {
...     return inc(value)
... }
>>> fun returnReturnInc(value: Int): Int {
...     return return inc(value)
... }
>>> inc(1)
res9: kotlin.Int = 2
>>> returnInc(1)
res10: kotlin.Int = 2
>>> returnReturnInc(1)
res11: kotlin.Int = 2
```


## Kotlinにおける `return`

> `return` by default returns from the nearest enclosing function or [anonymous function](https://kotlinlang.org/docs/lambdas.html#anonymous-functions)
> ...
> All of these expressions can be used as part of larger expressions

[Returns and jumps \| Kotlin](https://kotlinlang.org/docs/returns.html)

探してみるとStack Overflow にも参考になる投稿があった。

[java \- Why can "return" return a "return" in Kotlin? \- Stack Overflow](https://stackoverflow.com/questions/48310136/why-can-return-return-a-return-in-kotlin)

とはいえ意図せずにreturn returnしてしまうのは防ぎたいので、Linter辺りで処理させるのが良いのかな。

```shell
>>> fun rTRTRTTRTRTRRRTTTTRTRTRTRTRTRRRRInc(): Int {
...     return throw return throw throw throw return throw return return return 8
... }
>>> rTRTRTTRTRTRRRTTTTRTRTRTRTRTRRRRInc()
res3: kotlin.Int = 8
```
Railsで誕生日の初期値の書式の書き方がわからなかったので生成してみた。

Railsでモデルのカラムがdate型の場合の初期値の書き方が分からなかったのでrails db:migrateで自動生成してみる。
まず、
rails generate model クラス名
等でモデルを作った後
マイグレーションファイルをいじった。
![スクリーンショット 2021-04-04 14.43.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54774/e575bc27-9a78-e9d2-70d6-1d3944a09368.png)
t.date :birthとなっているところに注目。

初期値が今から20年前の誕生日ということになる。
これをrails db:migrate:resetで初っ端からマイグレーションファイルを読み込み直すと
下記のような設定値になる。
下記はdbフォルダの下のschema.rbファイルの内容
![スクリーンショット 2021-04-04 14.43.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54774/cfa76a46-7f5e-5a3b-df1e-77f525d50ed2.png)

初期値が20年前になっている。これで正しいdate型の初期値の書き方が分かった。
TypeScriptでデザインパターン[5.Singleton]

# はじめに
Typescriptでデザインパターンをやっていくシリーズ（にする予定です）

結城 浩さんの「Java言語で学ぶデザインパターン入門」をTSに置き換えてTS力をあげていこうという趣旨です。

https://www.amazon.co.jp/%E5%A2%97%E8%A3%9C%E6%94%B9%E8%A8%82%E7%89%88Java%E8%A8%80%E8%AA%9E%E3%81%A7%E5%AD%A6%E3%81%B6%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3%E5%85%A5%E9%96%80-%E7%B5%90%E5%9F%8E-%E6%B5%A9/dp/4797327030

前回はこちら
- [TypeScriptでデザインパターン[1.Iterator]](https://qiita.com/zackey2/items/2fa106a8d68455b34c41)
- [TypeScriptでデザインパターン[2.Adapter]](https://qiita.com/zackey2/items/6c2292b88ff9f0cb2c91)
- [TypeScriptでデザインパターン[3.TemplateMethod]](https://qiita.com/zackey2/items/8c8cfdc1726f4b0c5c58)
- [TypeScriptでデザインパターン[4.FactoryMethod]](https://qiita.com/zackey2/items/eba421510cee6a7fbb60)

# メモ
- デザパタやってもあんまりTS力上がる感じがしないな・・・

# Code

```ts
namespace Singleton {
  class Singleton {
    private static singleton: Singleton = new Singleton();

    private constructor() {}
    public static getInstance(): Singleton {
      return Singleton.singleton;
    }

    public greet(): void {
      console.log('こんにちは');
    }
  }

  class Main {
    public main() {
      let instance = Singleton.getInstance();

      instance.greet();
    }
  }
  (new Main()).main();
}

```
【MongoDBを使う前にやりたい認証系の設定】

Node.jsでmongoDB使いたいな。と思って調べていると「セキュリティ設定しっかりやろう」という記事が多くあったので、実際に自分が行ったことをまとめてみました。

参考になれば嬉しいです。


* * *
####１，そもそも設定を記述するファイルが見当たらない。
MongoDB自体はinstallされていたが、usr/local/etc/mongod.conf が見当たらない。おそらく、いつかの自分はbrewを使わずにインストールしていたのだろう。

というわけで、brew経由でmongo-Community というmongoのオープンソースリソースを利用するため以下コマンドを実行。
`brew install mongodb-community`
これで、usr/local/etc/mongod.conf が作られた。

####２，さっそく設定ファイルにセキュリティ強化のための設定を追記しいく

先程作成したmongod.confに追記する。

・接続を許可するIPアドレスを指定する。
・port番号をデフォルトの27017から変更する。
・mongoDBの認証機能をONに設定する。

```jsx
bindIp: 127.0.0.1 
port: xxxxx
security: 
     authorization: enabled
```

ここまで行ったら再起動。
`brew services restart mongodb-community`

接続。(bindIp: 127.0.0.1, port: 40000 の場合)
`mongo --host localhost --port 40000` 

####３，DBごとにアクセス制限を設ける

さらにセキュリティを高めるために、各DBにアクセスできるuserを作成していく。

・user管理を行うadminにアクセスできるuserを作成する。
・新規で作成したDBにアクセスできるuserを作成する。

```jsx
>mongo --host localhost --port 40000 //接続
>use admin //DB切り替え
>db.createUser(
  {
    user:"「作成したいユーザー名」",
    pwd:"「パスワード」",
    roles:[
       { 
           "role" : "root",
            "db" : "admin" //roleを割り当てるDBを選ぶ
       }
    ]
  } 
)
>db.createUser(
  {
    user:"「作成したいユーザー名」",
    pwd:"「パスワード」",
    roles:[
       { 
           "role" : "dbAdmin", //DB管理権限
            "db" : "newDatabase"
       }
    ]
  } 
);
```

####４，mongoDBのsecurityが機能しているか確認する。

以下のように、エラーが出ていればDBごとのアクセス権限が機能している。

```jsx
name@MBP~% mongo --host localhost --port 40000 
>use admin
>db.system.users.find()
Error: error: {
	"ok" : 0,
	"errmsg" : "command find requires authentication",
	"code" : 13,
	"codeName" : "Unauthorized"
}
```

以下のように接続できない感じになれば、port番号設定かIPアドレス設定が機能していると考えられる。

```jsx
name@MBP~% mongo

MongoDB shell version v4.4.3
connecting to: mongodb://127.0.0.1:27017/? ~
Error: ~
connect@src ~
@(connect):2:6
exception: connect failed
exiting with code 1
```
* * * 
####【つまったこと】
・なんかポート指定してコマンドも間違えず打ってるはずなのに、接続できない！ってなったので解決した方法を載せておく。

#####結論 : ポート変更前のプロセスが動いていた。

１，mongoは期待したportで動いているのか？を確認。

```jsx
name@MBP~% sudo lsof -i -P | grep "LISTEN"
//動いていれば以下のようになる。
mongod ~ name ~  IPv4 ~ TCP localhost:40000 (LISTEN)
```

２，自分の場合、port変更前のプロセスが動いていたので、prosess killして、mongo-communityを再起動

```jsx
name@MBP~% brew services restart mongodb-community
```

これで接続できるようになりました。

【おまけ情報】
--dbpath オプションをつけることでDBの保存先を指定することができる。
-logappend オプションでログを追加する形で指定のファイルに残すことができる。
・以下のようにすると、指定ポートで指定ディレクトリにデータファイルを保存することができる。
`mongod --dbpath ./data/db --port 40001`
・これら設定を設定ファイルに書いておいて、設定ファイルの内容に沿って起動することもできる。
Jenkins Piplineについて

## 環境

Jenkinsのパイプラインの定義はGitのリポジトリにJekinsfileを置いてそこを参照するように設定


![スクリーンショット 2021-04-04 14.28.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/690302/ebc54772-40cf-27e7-a291-c02d1e293807.png)

Gitには下記のJenkinsfileを置いておく

```groovy:Jenkinsfile

pipeline {
   agent any
   stages {
      stage("Prepare") {
         steps {
            echo "Prepare"
         }
      }
      stage("build") {
         steps {
            echo "build"
         }
      }
      stage("Artifacts") {
         steps {
            echo "Artifacts"
         }
      }
   }
   post {
      // 完了ステータスに関係なく実行
      always {
        // ワークスペースを削除
        cleanWs()
      }
    }
}

```

この状態でJenkinsからビルドを実行するとこんな感じになる


![スクリーンショット 2021-04-04 14.25.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/690302/08570ab3-5294-b3ff-bdfe-6beb139087f6.png)

## 各項目事の説明

### Declarative: Checkout SCM

GitのリポジトリのJekinsfileを参照する設定にしておくと、ビルドを実行後そのリポジトリの最新を取得してくれます

![スクリーンショット 2021-04-04 14.25.16 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/690302/538f8789-29b3-9947-cd88-466483a0e5d4.png)

### Prepare, Build, Artifacts

Jekinsfileのstagesに含まれているstageの項目になります。

![スクリーンショット 2021-04-04 14.25.16 4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/690302/8a1bf98f-5a87-2453-1023-4e70c63bb06f.png)

### Declarative: Post Actions

Jekinsfileのpostの内容になります
postはパイプラインまたはステージの実行の完了時に実行される内容になります。

![スクリーンショット 2021-04-04 14.25.16 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/690302/493f8e4e-a182-1e4f-5ee0-6ccde0572866.png)
【Selenium】 Raspberry Pi で Firefox を使ってヘッドレス (ディスプレイなし) でフォーム入力を自動化

諸事情あり，このページは以下のページに移行しました．
ご愛読ありがとうございます．

https://blog.n-hassy.info/2021/05/selenium-raspi-headless/
文系大学生が3週間でAWS Cloud practitioner に合格した話

#初めに

現在、新卒２日目となり、社会人の仲間入りというか、いよいよかという心境

ただ、強いエンジニアさんがいる環境で共に仕事ができることにワクワクしております。まあ、生かすか殺すかは結局は自分次第ですが


とにかく、入社までの期間でAWSの試験に合格できたので、今回記事にしてみました。勉強方法は"自分はこうした"というだけなので、あくまでも道の一つとして捉えてください。

#まず経歴

・大学1年までゴリゴリの体育会野球部所属
・観光学部
・1年間留学経験有り（専攻はmarketing ）

というように、the 文系生活を送ってきました。

しかし、IT 企業に内定を頂き、内定者研修の中でAWS のセミナーを受講する機会があり、そこで初めて本格的にAWS を勉強し始めました。

ここから3週間で試験に挑み、結果、合格する事ができました。

#勉強リソース

試験に挑むにあたって、主に以下の4つを使用し勉強しました！

**①AWS クラウドの基本と仕組み**

https://www.amazon.co.jp/AWSクラウドの基本と仕組み-亀田-治伸-ebook/dp/B07Q8QL2HM/ref=nodl_

この本に関しては、AWSのメリットや各種サービスについて述べられており、最後に学習方法や受験方法が記載されているため、最初に **"AWSとは"** を理解するためにさらっと一周しておくのがおすすめです。

**② AWS Cloud Practitioner Essentials**

https://www.aws.training/

これはAWSが提供している公式のオンライントレーニングで、クラウドの概念から各種サービスまで分かり易く解説されています。サービスの仕組みやネットワークの流れについて日常生活に例えて解説されているため、個人的には一番理解が深まった気がします。合計６時間のトレーニングですが、各章に分かれているため、自分のペースで学習を進められる点もメリットの一つです。

**③AWS 認定資格　無料web練習問題**

https://aws-exam.net/clf/

このサイトは、AWSの練習問題を無料で受験できるサイトです。AWSの公式模試を受験すると2,000円程かかるため、金銭的に優しいサイトです。

**④この問題だけで合格可能！　AWS認定クラウドプラクティショナー模擬試験問題集**

https://www.udemy.com/course/aws-4260/

Udemyで購入できる、本番同様の６５問の試験が7回分収録された問題集です。
基本レベル・応用レベル・アソシエイトレベルの３つのレベルが収録されており、多少、レベルが上がると難しいですが、各サービスについて理解が深まるため、一度全てのテストを受験しておくことをおすすめします。
私はセール時に購入したため、1,350円程ですが、通常でも3,000円で購入できます。

#スケジュール

上記リソースを踏まえた上で、３週間で試験に挑む場合、次の様なスケジュールがいいかなと思います。
また、一日あたり、平日３時間、休日６時間程勉強時間を確保できると仮定します。

**１週目**

〜①の書籍をさらっと一読し、概要をつかむ
〜②のトレーニングを受験し、各種サービに関する理解を深める

**２週目**

〜④の問題集を7回分受験する

→恐らく、この段階では各種サービスの細かい部分を理解できていないため、反省時間を多めに確保し、それぞれサービスについて都度検索していきながら理解していくことをお勧めします！

**３週目**

〜④の問題集をもう一度受験します
〜③の練習問題を受けます

ある程度理解が深まりますが、類似サービスの違いや、細かい部分の理解をホワイトペーパーを通して理解していきます。

時間があれば、①の書籍をもう一度呼んでおくと、知らないサービスが記載されている可能性があるため、まとめとして読んでおくことをお勧めします。

#最後に

自分も試験勉強以外に、アプリ作ったり、他の勉強していたため、そんなに無理なくスケジュールできると思います。


とは言っても、社会人て時間ないすよね。ちなみに、この記事も電車の中でメモ書きしたものをコピペしました。

みなさん頑張りましょう。

_”自分の持った夢に自分の人生は概ね比例する結果を生む”_

と孫さんも仰っていたので
コンテナ内のサービスが落ちてもコンテナは立ち上がるようにする

ENTRYPOINTを apache などにはせず「tail」にします。

```dockerfile
RUN { \
        echo '#!/bin/bash'; \
        echo '# 各種サービスの立ち上げ処理'; \
        echo '# 最後はコンテナが落ちないように'; \
        echo 'tail -f /dev/null'; \
    } > /usr/local/bin/app.sh \
    && chmod 755 /usr/local/bin/app.sh

ENTRYPOINT ["/usr/local/bin/app.sh"]
```
AWS IAM

#AWS Identity and Access Management(IAM)とは
・AWSリソースをセキュアに操作するために、認証・許可の仕組みを提供するマネージドサービス
・AWS利索子に対して別々のアクセス権限をユーザ毎に付与できる
・多要素認証によるセキュリティ強化
・一時的な認証トークンを用いた権限の委任
・AWS IAM自体の利用は無料

#AWSアカウントのルートユーザ
・AWSの全てのサービスとリソース全てに完全なアクセス権限を持つユーザ
・極力ルートユーザを使わないようすることが大切！

#アクセスキー
・AWSアカウントのルートユーザまたはIAMユーザの長期的な認証情報
　・手動で取り消すまで有効
・アクセスキーを用いてAWS CLi/AWS SDK等からリクエストに署名
・アクセスキーID/シークレットアクセスキーで構成される

#IAMユーザ
・AWSで作成するエンティティ
・名前と認証情報で構成される
・認証情報
　(1)コンソールパスワード
　(2)アクセスキー

#ユーザの強力なパスワードポリシーを設定する
・パスワードに要求される強度なパスワード管理のポリシーを設定可能

#アクセスキーを共有しない
　複数の人がAWSリソースへのアクセス権限を共有したい場合でも、アクセスキーを共有しない。

#MFA(多要素認証)
パスワードやアクセスキーによる認証を追加して、セキュリティを強化する仕組み
・AWSアカウントのルートユーザや強い権限を持つIAMユーザにはMFAを有効化し、通常利用しない！！

#ポリシー
IAMアイデンティティやAWsリソースに関連づけることによってアクセス許可を定義することができるオブジェクト

###アイデンティティベースのポリシー
①管理ポリシー
　・複数のユーザ、IAMグループ、IAMロールに関連付け可能(最大10個)
　・再利用可能
　・種類
　　(1)AWS管理ポリシー
　　(2)カスタム管理ポリシー

②インラインポリシー
　・単一のIAMユーザ、IAMグループ、IAMロールに直接埋め込む

###AWS管理ポリシー
・AWSにより事前に定義された管理ポリシー、編集不可
・すぐにポリシー適用開始できる

###カスタマー管理ポリシー
・AWSアカウントで管理することができるカスタムポリシー
・AWS管理ポリシーで要件満たせない場合に使用
・再現性高く管理面で有利
・利点は全ての管理ポリシーを1箇所で確認できること

###インラインポリシー
・1つのIAMエンティティに直接埋め込まれるポリシー
・インラインポリシーの利用はできるだけ避ける・

#ポリシードキュメントの要素
Version：ポリシー言語のバージョン
Statement：アクセス許可する複数の要素を含むステートメントブロック
Effect：AllowまたはDeny

###Principal要素
・AWSリソースへのアクセスが許可/拒否されるIAMエンティティを指定する
・リソースベースポリシーで使用
・AWSアカウント、IAMユーザー、IAMロール、フェでレーティッドユーザー、引き受けたロールユーザーをARN形式で記述


###Action要素
・許可/拒否される特定のアクションを指定する
・AWSサービスで行うことができるタスクを記述する独自のアクションセットを記述
・形式："Actiob":"<各サービスの名前空間>:<アクション名>"
  例） "Action":"ec2:StartInstances"

###Resource要素
・ステートメントで取り扱う一連のオブジェクトを指定する
・AWSサービスが持つ一連のリソースセットをARN形式で記述

###Condition要素
・ポリシーが有効になるタイムングを指定
・Condition要素の記述はオプション
・形式："Condition":{<条件演算子>:{<条件キー>:<条件値>}}
・条件演算子
　 (1)条件比較タイプ(文字列条件、数値条件、IPアドレス条件等)を指定
・条件キー
例）"Condition":{"IpAddress":{"aws:SourceIP":["192.0.2.0/24","203.0.113.0/24"]}}

###アクセス可否の決定ロジック
・暗黙的なDeny<明示的なAllow<明示的なDeny
・全てのアクセスはデフォルトで拒否(暗黙的なDeny)

#IAMグループ
・IAMユーザの集合
・IAMユーザーは複数のIAMグループに所属することができる(最大10)
・組またはジョブ機能に関連したIAMグループを作成し、IAMグループに対してアクセスIAMポリシーを関連付ける。

#IAMロール
・AWSサービスやアプリケーション等のエンティティに対してAWSリソースの操作権限を付与するための仕組み
・認証方法：一時的なセキュリティ認証情報利用

#一時的なセキュリティ認証情報
・有効期限付きのアクセスキーID/シークレットアクセスキー/セキュリティトークンで構成
・ユーザのリクエストによってAWS Security Token Service(STS)が動的に作成

#AWS Security Token Service(STS)
・一時的なセキュリティ認証情報を生成するサービス
(1)期限付きのアクセスキー/シークレットアクセスキー/セッショントークン
(2)トークンのタイプにより有効期限は様々
・発行した認証情報の期限変更は不可
DockerfileでDebian＆Ubuntuのデフォルトを「dash」から「bash」に変更する

変更時の戻り値が成功してもエラーコードが返答されているらしく、そのまま記述するとbuildで停止します。

```dockerfile
# 最後の「|| true」を忘れない
RUN echo "dash dash/sh boolean false" | debconf-set-selections \
    && DEBIAN_FRONTEND=noninteractive dpkg-reconfigure dash || true
```
omnisharp.json を利用してVSCodeのC#フォーマットをプロジェクトで統一する

### 概要
Unityで個人製作中にVSCodeを利用してコードを書いているとき、共同作業者でC#コードフォーマットを共有するための方法をどうすれば良いか気になったので調べました。

今回はフォーマット設定ファイル(omnisharp.json)をGitでバージョン管理するところまで
(Mac環境です)

### スペース、タブの可視化
よくあるフォーマット宗教としてスペースorタブ問題があると思います

- タブをスペースとして変換するのか
- タブをそのままタブとして利用するのか

とりあえず、コード開いた時にスペースなのかタブなのか一発で分かるように可視化します

`Cmt + ,` から Settings をひらき、 whitespace で検索。
`Render Whitespace` を none から **boundary(境界)** に変更します

![20210404140238.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553138/b6a2e5ef-b1a7-bd95-f8a2-24a75ab9ae9d.png)

これで変数やメソッド間の空白以外の場所に `...(空白)` or `→ (タブ)` が表示されます

![20210404141236.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553138/ce30bb5f-2e19-1e92-df89-5224f529e317.png)

他にも設定ありますがこれが一番じゃまにならずに使いやすいと思います

### C#のフォーマット設定は omnisharp.json を見るようにする
プロジェクトで同じフォーマット設定を利用するために `omnisharp.json` にフォーマット設定を記述します。

まず、settings.json を編集します。
Settingsの右上の赤丸内のアイコンを押して json直接編集モード

![20210404141353.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553138/55464099-567f-b268-9125-a11c845972df.png)

jsonに追記

```json
{
...
    "[csharp]": {
        "editor.defaultFormatter": "ms-dotnettools.csharp"
    },
    "omnisharp.useEditorFormattingSettings": false,
}
```

1. C#コードではデフォルトのフォーマットは ms-dotnettools.csharp を利用する
1. useEditorFormattingSettigsはfalseにしてVSCodeのフォーマット設定は利用しない

そしてプロジェクト直下に omnisharp.json ファイルを作成し、フォーマット設定を記述。

```json
{
    "FormattingOptions": {
      "newLine": "\n",
      "useTabs": true
  }
}
```
これはタブをそのままタブとして利用する場合の設定です！

もしタブをスペースにする場合は以下でしょうか

```json
{
    "FormattingOptions": {
      "newLine": "\n",
      "useTabs": false,
      "TabSize": 4,
  }
}
```

これで保存してVSCodeを再起動します
再起動後、読み込み完了まで少し待機...

フォーマット変更したいファイルを開いた状態で `Alt+Shift+F` を押して全体にフォーマットかけ直したら無事に変更されるようになりました。

後はこの `omnisharp.json` をコミットしバージョン管理すれば他の共同開発者も同じ設定が適用されるようになります。　終わり


#### 最後に
基本はデフォルトが良いと思っており、その他のフォーマットは特に触っていません。

その他設定や、omnisharpの構成ファイル読み込み優先順位等の解説は以下のブログに詳しく書いてくれています

https://www.strathweb.com/2017/01/c-code-formatting-settings-in-vs-code-and-omnisharp/
viのTips

普段あまり使わないキー操作のまとめ。いざ使おうとすると毎回忘れてしまうので備忘録として記録。

## ノーマルモードでの操作

大部分がN回の繰り返しできる。たとえば`~`の場合、`10~`だと10文字の大文字小文字変換する。
また、Visualモードで範囲選択すると、その範囲に対してコマンドが実行される。
`[C-a]`はCtrl+aの略。

|コマンド|使い方|
|:---|:---|
|~|大文字小文字の変換|
|J|スペースありの行連結|
|gJ|スペースなしの行連結|
|[C-a]|数字増やす。Visualモードでの実行を繰り返すには`.`|
|[C-x]|数字減らす。Visualモードの場合は上と同じ|
|g[C-a]|Visualモードで複数行指定して実行した場合、連番をふるように使える。<br>例えば`0`を10行書いてこれをやると、1~10までの連番となる。`g`の前に数値を書くと数値分増加する|
|g[C-x]|上の逆|
|q[文字]|マクロの開始。`qa`だと`a`のレジスタにマクロを登録。`q`でマクロ終了|
|@[文字]|レジスタに登録したマクロの実行。`[数値]@a`だと、`a`のマウロを[数値]回実行|
|>と<| >はインデント、<はその逆|

## オペレータとモーション
ノーマルモードでのアクションは`オペレータ+モーション`の組み合わせからなる。
この組み合わせで様々な動きを実現している。

### 主要オペレータ
|オペレータ|使い方|
|:---|:---|
|c | 変更|
|d | 削除|
|y | レジスタにヤンク|
|g~ | 大文字小文字の入れ替え|
|gu | 小文字化|
|gU | 大文字化|
|> | インデントを深くする|
|< | インデントを浅くする|
|= | 自動インデント|
|! | 外部プログラグ実行|

### 主要なモーション

|モーション|使い方|
|:---|:---|
|aw | "a ward"　単語。カーソルの前後の文字含む|
|ap | "a paragraph" パラグラフ|
|w | 単語。カーソルの右側|
|
【Unity】画面いっぱいにオブジェクト表示

# 「画面いっぱいにオブジェクト表示」　とは？
文字通りなのだが、カメラの描写領域ぴったりまでオブジェクトを拡大・縮小するというもの。
はみ出したり、忖度したりするのはダメ！

<img width="700" src="https://1.bp.blogspot.com/-v19B44o1RX8/YGk3gEX1HiI/AAAAAAAAAOk/XCj1IU8vIh0BXTeT3on0sH2PD1WGKuOJwCNcBGAsYHQ/w675-h397/%25E3%2583%2596%25E3%2583%25AD%25E3%2582%25B0%25E7%2594%25A8.png">

# ★結論
3Dでは、オブジェクトの形状によるけど、画角とか考慮せねばならず難易度が高い。
2Dは比較的簡単。

# 0.実行環境について
Unityバージョン：2019.4.18f1

Visual Studio Community 2019バージョン：16.9.1

# 1.スクリプト
```c#:SizeControll.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class SizeControll : MonoBehaviour
{
    private Camera m_MainCamera; // メインカメラ
    Vector3 BottomLeft;//左下
    Vector3 TopRight; //右上
    float Width; //x座標系、幅
    float Height;　//y座標系、高さ
    float ObjectWidth; //オブジェクトの幅
    float ObjectHeight;　//オブジェクトの高さ
    // Start is called before the first frame update

    void Start()
    {
        m_MainCamera = Camera.main;
        //カメラ領域の左下の座標を取得
        BottomLeft = m_MainCamera.ScreenToWorldPoint(Vector3.zero);
        // カメラ領域の右上の座標を取得
        TopRight = m_MainCamera.ScreenToWorldPoint(new Vector3(Screen.width, Screen.height, 0.0f));
        //オブジェクトの幅・高さを取得
        ObjectWidth = this.GetComponent<MeshRenderer>().bounds.size.x;
        ObjectHeight = this.GetComponent<MeshRenderer>().bounds.size.y;
        //カメラの領域の幅・高さをワールド座標系数値で取得
        Width = (TopRight.x - BottomLeft.x) ;
        Height = (TopRight.y - BottomLeft.y) ;
        //上記二値からスケール（ローカル座標系）を調整
        transform.localScale = new Vector3(Width/ ObjectWidth, Height/ ObjectHeight, 0);
    }
}
```

これを単なるCubeにアタッチしてみます
<img width="700" src="https://1.bp.blogspot.com/-I3tOs9sMGRo/YGkmmvFtq2I/AAAAAAAAAOE/ZQC2Q-VBfWMX1gqqpRGT56qWn-BROPCxQCNcBGAsYHQ/w668-h361/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B%2528375%2529.png">

スクリプトをアタッチ後、プレイモードにするとこんな感じ。

<img width="表示幅" src="https://1.bp.blogspot.com/-ixSUXmXp-Zw/YGkru49R1tI/AAAAAAAAAOU/B7hE2pyCfv8Gf0qwdqZWSAP4Val7L0gGACNcBGAsYHQ/w653-h384/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B%2528381%2529.png">

以上です。
コーディング学習をする中 CSS レスポンシブデザイン簡単にまとめてみた

# CSS レスポンシブ


<img width="784" alt="スクリーンショット 2021-04-04 14 09 09" src="https://user-images.githubusercontent.com/56257230/113499252-5d960580-954f-11eb-82da-5ebdc74a84ed.png">

### ビューポート設定

まずは HTML の head タグ内に以下の meta タグを記述してください。

```html
<meta
  name="viewport"
  content="width=device-width,initial-scale=1.0,user-scalable=no"
/>
```

メディアクエリを書く

### PC ファースト

```css
@media screen and (max-width: 959px) {
  /* 959px以下に適用されるCSS（タブレット用） */
}
@media screen and (max-width: 480px) {
  /* 480px以下に適用されるCSS（スマホ用） */
}
```

### モバイルファースト

```css
/* スマホ用のCSSはメディアクエリの外に記述する */

@media screen and (min-width: 481px) {
  /* 481px以上に適用されるCSS（タブレット用） */
}
@media screen and (min-width: 960px) {
  /* 960px以上に適用されるCSS（PC用） */
}
```

```css
@media screen and (max-width: 1000px) {
  /* スクリーンサイズが1000px以下の場合に適用 */
}

@media screen and (max-width: 767px) {
  /* スクリーンサイズが767px以下の場合に適用 */
}

@media screen and (max-width: 480px) {
  /* スクリーンサイズが480px以下の場合に適用 */
}

@media screen and (max-width: 320px) {
  /* スクリーンサイズが320px以下の場合に適用 */
}

@media screen and (min-width: 768px) {
  /* スクリーンサイズが768px以上の場合に適用 */
}
min-width と max-width を併用すると可読性が低下します。どちらか一方を利用することをおすすめします。
```

# max-width min-width 違いなど

- min-width これ以上小さくならない
- max-width これ以上大きくならない

```css
p {
max-width :200px;
}
= 要素が200pxより大きくならない（200px以下）という意味
```

```css
p {
max-width :200px;
}
= 要素が200pxより大きくならない（200px以下）という意味
```

## あまり使わないが min-height と max-height もある
【読書ログ】「知識ゼロから学ぶソフトウェアテスト」

# 本について
タイトル「知識ゼロから学ぶ ソフトウェアテスト」
著者「高橋寿一」
[Amazonのリンク](https://www.amazon.co.jp/%E7%9F%A5%E8%AD%98%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%83%86%E3%82%B9%E3%83%88-%E3%80%90%E6%94%B9%E8%A8%82%E7%89%88%E3%80%91-%E9%AB%98%E6%A9%8B%E5%AF%BF%E4%B8%80-ebook/dp/B00HQ7S5CA/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=%E7%9F%A5%E8%AD%98%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%83%86%E3%82%B9%E3%83%88&qid=1617514469&sr=8-1)

# 内容
## ステートメントカバレッジ
IF文の中の命令を実行している箇所をテストすること
## ブランチカバレッジ
判定条件(TRUE/FALSEなど)のそれぞれに対してテストすること
##ソフトウェアテストはこの4つを押さえればOK
- 入力
- 計算
- 保存
- 出力

##探索的テストを心がけろ
テストの学習、設計、実行、報告を並行して行え
##テストプランは
IEEE829にならえ
ただし汎用的すぎてSpecificに使えないので工夫しろ
##テスト運用
###最後に頭数突っ込んでテストしても意味ない
「俺のテストコードは誰がテストするの？」
###定量的に終了基準を設けろ
##コードの複雑度
ルートの数 - ノードの数 +2
##メトリクス(評価指標)の例
###バグのメトリクス
- 時間あたりバグ数
- コンポーネントあたりバグ数
- テストのメトリクス

###コードカバレッジ
- テスト担当者以外のバグの発見数
- テストケースの数、テストの自動化率

###ソースコードのメトリクス
- 追加、削除、変更されたコードの行数
- KLOCs: どのくらいソースコードの行数が増加しているか
- コードの複雑度

###ソフトウェアの信頼性メトリクス
- 実際の顧客が最も使うと思われるオペレーションにおけるMTBF(Mean Time Between Faliure)
- 信頼性成長曲線
- ストレステストにおけるMTBF

###ビルドのメトリクス
- ビルドにかかる時間
- ビルドで見つかった問題
- ビルドが失敗した原因

###スケジュールのメトリクス
- 当初立てたスケジュールと実際のズレ
pecoを使ってgithubのcompare URLを簡単に生成する

# 説明

私はprレビューにて指摘された箇所を修正した後、その差分をレビュアーに見てもらうためURLを貼るようにしています。
こんな感じ↓
![スクリーンショット 2021-04-04 13.13.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222848/fbe79633-52cc-aeb9-53ae-90da92625e40.png)
しかし修正の規模が大きかったり、修正を失敗してしまって1回のコミットで出来なかった場合
複数コミットを共有すると逆に見づらくなってしまうので、この方法使えません。

その場合はgithubのcompareURLを使うのですが、コミットハッシュをペーストなどして作成するため少々面倒なんですよね。
（良い方法を自分が知らないだけの可能性も...）
なので、かんたんに生成してくれるコマンドを作成しました。

**複数commit間の差分を表示するURL構成**

```
https://github.com/＄｛ORGANIZATION}/＄｛REPOSITORY}/compare/＄｛COMMIT_HASH｝..＄｛COMMIT_HASH｝
```

# peco install

```sh
$ brew install peco
```

pecoについて知らない方は、わかりやすいので詳しくはこちらを参考にしてください。
[え、まだpecoを使ってないの？？？](https://qiita.com/vintersnow/items/08852df841e8d5faa7c2)

# コマンド作成

私はzshを利用していますが、bashでも動作したことを確認したので
そのまま使えるかと思います。

```sh
function g-cmp() {

    # repository情報を取得
    REPO=`git remote -v | grep fetch | awk -F '[:. ]' '{print $3}'`

    # pecoを使って始まりと終わりのcommitを指定する
    START=`git log --pretty=oneline | peco`
    END=`git log --pretty=oneline | peco`

    # どちらかが選択されないとerror
    if [[ -z $START || -z $END ]];then
        echo "canceled comparison."
        return
    fi

    # 選択したcommit情報を出力
    echo " from : $START"
    echo " to   : $END"

    # 選択したcommitからcompareURLを生成
    START_COMMIT=`echo $START | awk '{print $1}'`
    END_COMMIT=`echo $END | awk '{print $1}'`
    URL="https://github.com/$REPO/compare/$START_COMMIT..$END_COMMIT"

    # 生成したURLを出力
    echo $URL
}
```

# 使ってみる

上記コマンドをgithubで管理されているRepositoryにて入力してください

```sh
$ g-cmp
```

試しに自分のzshカスタムしているrepositoryでやってみる。
![スクリーンショット 2021-04-04 14.05.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222848/0f1c22a3-1494-60c9-f28e-c74c6980d3b6.png)
こんな感じで現在のbranchのコミットログがワンラインで出力されます。
差分を見たい部分の始まりのコミットと、終わりのコミットを選択するとgithubのcompareURLが出力されます。

その差分に間違いがないか確認してみましょう。

# まとめ

最近知ったpecoがかなり便利だなと思い、試しにコマンドを作成してみました。
pecoはbranchのチェックアウトや削除など細かい操作にも非常に便利ですね。

今回は生成されたURLをechoで出力していますが、私はそのままブラウザで開いたり、
それと同時にMarkdown形式でクリップボードに保存させ、githubにペーストしやすいようにしています。

```sh
    ~~
    省略
    ~~

    echo "[差分]($URL)" | pbcopy
    open $URL
```
docker-composeでDockerfileに変数/ターゲット（マルチステージビルド）を渡す

## ■docker-composeからDockerfileに値を渡す

```yml
version: '3.7'

services:
  app:
    build:
      context: .
      args:
        ARG_1: "test"
```

```dockerfile
FROM XXX

# ※ ARG 【変数名】 を記載しないと使用できません
ARG ARG_1

RUN echo ${ARG_1}
# test が出力されます。
```

## ■マルチステージビルド

```yml
version: '3.7'

services:
  app:
    build:
      context: .
      target: dev
```

```dockerfile
# 共通の設定を記述
ARG SRC=/var/www/html/

####################
# 共通
####################
FROM XXX as build

# 「FROM XXX as build」で「SRC」変数を使用したい場合は記載します
ARG SRC

# この配下に共通の dev/prod 共通の処理を記述します。
RUN echo '共通'

####################
# devの処理
####################
FROM build as dev

# 「FROM build as dev」で「SRC」変数を使用したい場合は記載します
ARG SRC

# 「target」で「dev」が指定された際のコンテナ環境の処理を記述します。
# ※「target」が「prod」時でもbuild時に処理は走ります（※作成されたコンテナ時には反映されません）
RUN echo 'dev'

####################
# prodの処理
####################
FROM build as prod

# 「FROM build as prod」で「SRC」変数を使用したい場合は記載します
ARG SRC

# 「target」で「prod」が指定された際のコンテナ環境の処理を記述します。
# ※「target」が「dev」時は処理が走りません
RUN echo 'prod'
```
【読書ログ】「Webを支える技術」

# 本について
タイトル「Webを支える技術」
著者「山本陽平」
2010年初版第1刷発行
[Amazonのリンク](https://www.amazon.co.jp/Web%E3%82%92%E6%94%AF%E3%81%88%E3%82%8B%E6%8A%80%E8%A1%93-HTTP%E3%80%81URI%E3%80%81HTML%E3%80%81%E3%81%9D%E3%81%97%E3%81%A6REST-WEB-PRESS-plus/dp/4774142042/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=Web%E3%82%92%E6%94%AF%E3%81%88%E3%82%8B%E6%8A%80%E8%A1%93&qid=1617513676&sr=8-1)

# 内容
## Webの発明
Tim Barners-Lee (CERN) (1990)

##RESTの提唱
Roy Fielding (当時大学院生、Webが成功した理由をアーキテクチャの観点から研究)(2000)

##RESTとは
6つのアーキテクチャスタイルの集合体

- クライアント/サーバ
- ステートレスサーバ
- キャッシュ
- 統一インターフェース
  - 特定のメソッドを用いて通信できる（GET POST PUT DELETEなど）
- 階層化システム
- コードオンデマンド
  - プログラム(Javascriptなど)をクライアントで実行

##URIで使用できる文字
ASCII文字
`- , ~ : @ ! $ & ' ( )`
(記号のみ抜粋)

##リクエストヘッダ
###Accept-Langageヘッダでクライアントが所望する言語を指定する
`Accept-Language: ja,en_us;q=0.7,en;q=0.3`

##冪等性と安全性
冪等性とは「ある操作を何回行っても結果が同じであること」
安全性とは「操作対象のリソースの状態を変化させないこと」

```
GET 冪等 安全
PUT DELETE 冪等 安全でない
POST 冪等でない 安全でない
```

###注意点
PUTでリソースの内容の想定的な差分を送信すると、PUTは冪等ではなくなる
`PUT +50` みたいな変更
PUTでは、そのリソースのなるべく完全な表現を送信するように

##よく使われるステータスコード
9つだけ覚えろ

200 OK
201 Created
301 Moved Permanently
`303 See other`
400 Bad Request
401 `Unauthorixed`
`404 Not Found`
500 Internal Server Error

(記憶が曖昧だったもの網掛け)

##HTTPヘッダ
###MIMEメディアタイプ
`Content-Type: application/json`みたいなやつ

###コンテントネゴシエーション
メディアタイプや文字エンコーディングを、サーバーが一方的に決定するだけだはなく、クライアントと交渉して決めることができる手法のこと
`Accept: text/html,application/xhtml+xml` みたいなやつ
[Swift] csvファイルの読み込み

```swift
    func loadCSV(fileName:String) -> [String] {
        let csvBundle = Bundle.main.path(forResource: fileName, ofType:"csv")!
        do{
            let csvData = try String(contentsOfFile: csvBundle,encoding:String.Encoding.utf8 )
            let lineChange = csvData.replacingOccurrences(of: "\r", with: "\n")
            csvArray = lineChange.components(separatedBy: "\n")
            csvArray.removeLast()
        }catch{
            print("エラー")
        }
        return csvArray
        
    }
```
loadCSV関数は引数で受け取ったfileNameを元にcsv内も文字列を改行を一つの単位として配列に納めて返す。

**let csvBundle = Bundle.main.path(forResource: fileName, ofType:"csv")!**
ファイルネームを元にcsvファイルを読み込む。
csvBundleには対象ファイルのフルパスが格納されている。

**let csvData = try　String(contentsOfFile:csvBundle,encoding:String.Encoding.utf8 )**
対象ファイルの中身を取得する。
csvDataにはファイルの記述内容が入る。

**let lineChange = csvData.replacingOccurrences(of: "\r", with: "\n")**
改行に\rが使われていれば\nに書き換える。

**csvArray = lineChange.components(separatedBy: "\n")**
\nの改行コードを区切りに配列にぶちこむ

**csvArray.removeLast()**
リストの一番最後の配列を削除CSVファイルの構造上配列が無駄に作られてしまう

ex)
1 あいうえお\n
2 かきくけこ\n
3 さしすせそ\n
4 たちつてと\n
5 なにぬねの\n
6\n
UbuntuやDebianにDocker環境を作成する

## ■必要なライブラリをインストールする

```bash
apt install -y \
  apt-transport-https \
  ca-certificates \
  curl \
  software-properties-common
# Debianのイメージにもよると思いますが、debianは下記も必要でした
apt install -y \
    gnupg
```

## ■Ubuntu
```bash
DOCKER_COMPOSE_VERSION=1.28.5

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | apt-key add - \
  && curl -L "https://github.com/docker/compose/releases/download/${DOCKER_COMPOSE_VERSION}/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose \
  && chmod +x /usr/local/bin/docker-compose \
  && add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" \
  && apt update -y \
  && apt install -y \
    docker-ce
```

## ■Debian
```bash
# docker-composeは入れていません
curl -fsSL https://download.docker.com/linux/debian/gpg | apt-key add  - \
    && add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/debian $(lsb_release -cs) stable" \
    && apt update \
    && apt install -y \
        docker-ce
```
schtasksでPowershellスクリプトを実行する(CLI)

# やりたいこと

Windows10にSSH接続して、リモートに置いてあるスクリプトを接続先で実行します。
リモートとはUNCパスで表す必要のある位置の事です。
例えば、`\\10.0.0.2\cc\test.bat`や`\\pcname\share\sample.ps1`などを指します。

# 結論

Adminsに所属するユーザー権限で拒否されたので、system権限が要るのかと思った。
しかし、Admins所属ユーザーでかつ、そのユーザーがもつ最高権限で実行するように設定すれば良さそう。

# 手順

1. sshで対象のWindowsのCLIに接続します。
1. schtaskを使ってスケジュールタスクを準備＆実行します。

# 使ったコード

main.ps1を実行したい。

```bat:UNC_Path_To_Here\cc\launch.cmd
@echo off
pushd %~dp0
del  %SystemDrive%\cc\cc.log
copy .\main.ps1 %temp%\
call pwsh -Noprofile -ExecutionPolicy Bypass -File %temp%/main.ps1
exit
```

```posh:UNC_Path_To_Here\cc\main.ps1
mkdir $env:SystemDrive\cc -force
whoami | out-file $env:SystemDrive\cc\cc.log -append
date | out-file $env:SystemDrive\cc\cc.log -append
$psversiontable | out-file $env:SystemDrive\cc\cc.log -append
```

# 上手くいった方法

```bat
schtasks /create /tn ThisIsTask /sc ONCE /tr "UNC_Path_To_Here\cc\launch.cmd" /ru IamContainAdministrators /rp "SecretPassword" /rl highest /f /st 16:23
```

# 失敗した例と理由

こちらの構文でスケジュールタスクを設定してみました。

```bat
schtasks /create /tn ThisIsTask /sc ONCE /tr "UNC_Path_To_Here\cc\launch.cmd" /ru SYSTEM /rl highest /f /st 16:23
```

接続先のローカルにおいてあるスクリプトならこれでいけます。
しかし、下記のコマンドで確認してみると、出来ないことが分かります。

```bat
 schtasks /query /tn gfreboot /v /fo list
```

この出力結果に実行結果が表示されている行があります。

```bat
Last Result:    -2147024891
```

`Last Result`、日本語だと、「前回の実行結果」になっていると思います。これが、16進数表記で`0x80070005`です。調べると、COMインターフェースの実行結果でHRESULT型で表されたE_ACCESSDENIED「アクセス拒否」というエラーだそうです。

なんの理由でアクセス拒否なのか分かりませんが、`NT AUTHORITY\System`「システム」の権限では弾かれるようです。

更に調査をして「システム権限が要らないんじゃない？」という結論にたどり着きました。「Administratorsに所属するアカウントでタスクを実行するようにし、そのタスクのRunLevelをHighestにすればよい」とのことです。これを実践したのが上記の「[上手くいった方法](#上手くいった方法)」

# 公式ドキュメント

https://docs.microsoft.com/en-us/windows-server/administration/windows-commands/schtasks-create

**Excelsior!**
fish の color をリセットする

fish_config color でセットしたものをリセットしたい。

以下に記載した方法は、リセットというか、（そもそもデフォルトの色設定を僕が覚えてないので分からないが）とにかく色設定を無くす方法です。そのつもりで読んでください。

コマンドが見つからなかったので、愚直にやった...

まず、色をセットするときにこんな情報が stdout に出てくる

```bash
$ fish_config color
Web config started at file:///var/folders/7g/jd09fyrj3tlc_4bby7464xm00000gn/T/web_confighvq20_xt.html
Hit ENTER to stop.
$ set -L
$ set -U fish_color_normal 575F66
$ set -U fish_color_command 55B4D4
$ set -U fish_color_quote 86B300
$ set -U fish_color_redirection A37ACC
$ set -U fish_color_end ED9366
$ set -U fish_color_error F51818
$ set -U fish_color_param 575F66
$ set -U fish_color_comment ABB0B6
$ set -U fish_color_match F07171
$ set -U fish_color_selection FF9940
$ set -U fish_color_search_match FF9940
$ set -U fish_color_history_current --bold
$ set -U fish_color_operator FF9940
$ set -U fish_color_escape 4CBF99
$ set -U fish_color_cwd 399EE6
$ set -U fish_color_cwd_root red
$ set -U fish_color_valid_path --underline
$ set -U fish_color_autosuggestion 8A9199
$ set -U fish_color_user brgreen
$ set -U fish_color_host normal
$ set -U fish_color_cancel -r
$ set -U fish_pager_color_completion normal
$ set -U fish_pager_color_description B3A06D yellow
$ set -U fish_pager_color_prefix white --bold --underline
$ set -U fish_pager_color_progress brwhite --background=cyan
```

これは `.config/fish/fish_variables` に設定が追記される。なので、これらの情報を削除してしまえばよいと思う。


適当にこの出力から変数部分だけを抜き取り tmp ファイルに保存。シェルが得意な人はこんなことしないで、もっとうまいことやれると思います。。。

```bash
$ cat tmp
fish_color_normal
fish_color_command
fish_color_quote
fish_color_redirection
fish_color_end
fish_color_error
fish_color_param
fish_color_comment
fish_color_match
fish_color_selection
fish_color_search_match
fish_color_history_current
fish_color_operator
fish_color_escape
fish_color_cwd
fish_color_cwd_root
fish_color_valid_path
fish_color_autosuggestion
fish_color_user
fish_color_host
fish_color_cancel
fish_pager_color_completion
fish_pager_color_description
fish_pager_color_prefix
fish_pager_color_progress
```

下のコマンドで消せました。

```bash
for i in (cat tmp); set -e $i; end
```
React初心者がStorybookとAtomicDesignを使ったコンポーネント設計に挑戦していくお話【第1話 環境構築】

# はじめに
React初心者がStorybook v6でStorybookに初挑戦、そして少しずつ前に進んでいくお話です。
コンポーネント設計としてAtomicDesign、スタイルはcss-modulesを利用していきます。
同じような境遇の方のお役に立てたら幸いです。
（初心者のため謎設計が多数出現すると思います。予めご了承ください。。。）

今回は、環境構築のお話。

- 第1話 環境構築
- [第2話 最初のコンポーネント](https://qiita.com/himorishige/items/d41ce44e7499981c99c6)

### 開発環境（21.04.04時点）
- M1 MacBookPro（macOS Big Sur 11.2.3）
- node v15.10.0
- create-react-app v4.0.3
- react v17.0.2
- storybook v6.2.2
- yarn v1.22.10

# React、Storybookのセットアップ
Create React AppのTypeScriptテンプレートを利用してreact環境を構築、Storybookをインストールします。
Storybookのセットアップについては[Storybook 公式チュートリアル](https://storybook.js.org/tutorials/intro-to-storybook/react/ja/get-started/) を参考に進めました。

```bash
$ npx create-react-app PROJECT名 --template typescript
$ cd PROJECTディレクトリ
$ npx -p @storybook/cli sb init
```

チュートリアルに合わせてプロジェクトのルートフォルダーに`.env`という名前で、以下の内容のファイルを作成します。

```sh:.env
SKIP_PREFLIGHT_CHECK=true
```

この設定がない場合`yarn start`時にエラーが出力される場合があるようです。

## Storybook動作確認

```bash
$ yarn storybook
```
デフォルトの設定だと、`http://localhost"6006/`でサービスが起動されます。
![yarn storybook](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1268181/81b95f38-994d-3b45-e30d-1264e6ab5321.png)
無事にサービスが起動されました！
次回から早速コンポーネントを作っていきます。
![storybook](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1268181/9f354ccc-8f73-f658-f923-4a15a8d55d8a.png)

# 環境構築補足

好みですが、`tsconfig.json`に`baseUrl`を設定しています。
`baseUrl`を設定することで、相対パスではなくルート相対パス風に記載ができるようになります。

```json:tsconfig.json
 "compilerOptions": {
    "baseUrl": "."
  }
```

`baseUrl`を設定することで下記のようにimport時に`tsconfig.json`の`'.'`、今回の場合はプロジェクトルートからから`src/ファイル名`というように記載することができます。

```typescript:some-component.tsx
import { Hoge } from 'src/components/atoms/Button;
```
Flutter APIキーを別ファイルに設定してGitに上げない方法

#APIキーをGitに上げたくない
こう言う場合、Flutterではどうしたらいいのでしょうか？

今回は僕が取った方法を紹介！

##configファイルを作成

main.dartと同じ階層に`config.dart`を作成して、以下のようにAPIの値を設定

```dart:lib/config.dart
const API_KEY = "aaaaaaaaaaaaaaaaaa";
```

##importして使う
今回は映画のAPI（[TMDB API](https://developers.themoviedb.org/3/getting-started/introduction)）からデータを取得する部分でやってみます。

https://qiita.com/kokogento/items/d84668c415e51d5b60d3

dartではimportしたファイルの変数を、特に何もすることなくそのまま使えます！
`${API_KEY}`の部分が`config.dart`で設定した変数ということになります:blush:

```dart
import '../config.dart';

class TopScreen extends StatelessWidget {

  getMovies() async {
    final url =
        'https://api.themoviedb.org/3/movie/now_playing?api_key=${API_KEY}&language=en-US&page=1';
    try {
      final response = await http.get(url);
      final extractedData = json.decode(response.body)['results'];
      if (extractedData == null) {
        print('nothing to get');
        return;
      }
      return extractedData;
    } catch (error) {
      print(error);
      throw (error);
    }
  }

// 省略

}
```

##.gitignoreに`config.dart`を追加

これでソース管理には含まれなくなりました。

```
# ↓これを追加
config.dart

# Miscellaneous
*.class
*.log
*.pyc
*.swp
.DS_Store
.atom/
.buildlog/
.history
.svn/

# IntelliJ related
*.iml
*.ipr
*.iws
.idea/

# The .vscode folder contains launch configuration and tasks you configure in
# VS Code which you may wish to be included in version control, so this line
# is commented out by default.
#.vscode/

# Flutter/Dart/Pub related
**/doc/api/
**/ios/Flutter/.last_build_id
.dart_tool/
.flutter-plugins
.flutter-plugins-dependencies
.packages
.pub-cache/
.pub/
/build/

# Web related
lib/generated_plugin_registrant.dart

# Symbolication related
app.*.symbols

# Obfuscation related
app.*.map.json

# Android Studio will place build artifacts here
/android/app/debug
/android/app/profile
/android/app/release
```
AWSのサブネットとルートテーブル、パブリックサブネットの定義、拠点間の安全な接続方法の整理

#サブネット

個々のサブネットには、一つの仮想ルータがある。
この仮想ルータがルートテーブルとネットワークACLの設定を持っている。

#ルートテーブル
ルートテーブルは**サブネット単位**で定義することができる。

#パブリックサブネット
パブリックサブネットはインターネットゲートウェイを向く経路がある**サブネット**と定義することができる。

#拠点間の経路の安全性を確保する通信方法
Site-to-Site VPNとDirectConnect接続の二つがある。
【1】Site-to-Site VPNは、インターネットを利用してオンプレミス機器とVPCの間に安全なVPN接続を用意します。
![Site-to-Site-VPN.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/990619/0b0a4247-afa2-49b0-7e8a-82768baa67da.png)



【2】専用線は、AWSやパートナーによって用意されたDirectConnectエンドポイントまでを接続する。
エンドポイントからVPCまではAWSによって用意された通信経路を通して接続する。
![DirectConnect.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/990619/ab5df540-7c85-a131-7b8e-1f38e1cf289a.png)





#参考書籍・動画・URL
[AWS認定資格試験テキスト AWS認定ソリューションアーキテクト - アソシエイト 改訂第2版](https://www.amazon.co.jp/gp/product/4815607389/ref=ppx_yo_dt_b_asin_title_o00_s00?ie=UTF8&psc=1)
Aidemy_実践データサイエンス講座（β版）受講の振り返り

# はじめに
・研修の一環としてAidemyの実践データサイエンス講座（β版）を2021年1月4日～2021年4月4日にかけて受講してきたので、その振り返りを行う。
・筆者は約1年前にSQLを描き始めるまでプログラミング経験の無かった社会人歴7年の典型的文系サラリーマンである。

# 本記事の概要
・Aidemyのカリキュラムを振り返り、簡単な感想や後で復習したいポイントを記録する。
・あくまで私見だったり個人の経験としてのストックを主眼にするため、必ずしもエンジニア諸氏の参考とはならない。
・非エンジニアで何らかのプログラミング研修受講を検討している人には温度感ぐらい伝わるかもしれない。

# カリキュラム振り返り
## 1か月目
### Python入門
・これまでも様々な研修、参考書等に挑戦しては挫け…という経験を積んできたので、比較的インプット済の内容が多く、問題なくクリア。
### Numpy
・同上
・業務で関連コードは見慣れている面もあり。
### Pandas
・同上
### Matplotlib
・体系的に学ぶのは初めてで、理解度は怪しい。
・とりあえず回して図表が描画されるとそれらしい気持ちになるのでモチベーションは上がる。
・しばらくは既存コードを使いまわして、困ったときに課題をググる、という対応になりそう。

## 2か月目
### 機械学習概論
・比較的インプット済の内容が多く、問題なくクリア。
### データクレンジング
・急に難易度が上がって正直びっくりした。先に言うと全カリキュラムの中で一番苦戦した。理解度は怪しい。
・モデリング作業の内前処理は重要性の8割を占める、的な言説があるので、それでこんな苦戦して自分は果たして大丈夫なのだろうかと不安になった。
・とりあえず課題提出まではこぎつけたので、一応良しとしてとにかく先に進むことを重視した。
### 教師あり学習（回帰）
・これも一つ一つの学習内容は理解できるが、最終課題で複合的な内容になるとかなり苦戦した。
・受講期間中技術メンター面談を依頼したのはこれの課題が最初で最後だった。
・前のデータクレンジングと続けてハードな内容だったので、モチベーションが下がった。
・とりあえず課題提出まではこぎつけたので、一応良しとしてとにかく先に進むことを重視した。
### 教師あり学習（分類）
・回帰よりは理解が良く、自力で課題提出できた。

## 3か月目
### 教師なし学習
・今課題を見直さないと思い出せないぐらい印象が薄いが、とりあえずクリアできてたらしい。
・あまり実務で触れない領域は頭に残らないと思いつつも、今後の取り組みの引き出しとしてしまっておかなければ、と反省。
### タイタニック号、住宅価格予測
・最終課題が無いのでいまいち身についた感はないものの、モデリングの工程を一通り体験できたので良かったかと。

# 総じて
・自分で手を動かさないと身につかないし、身につけたものもその後放置しているとすぐ記憶から落ちていく。
・公私問わず何らかのコンペに参加してみたい。

# 終わりに
・本記事自体がカリキュラムの最終課題なので、若干のやっつけ感が出てしまっている点は否めないものの、個人的には振り返りができたので良しとする。
・Aidemyか否かを問わず何らかの集中講座等を検討している人は、プライベートの時間を使って数か月単位で取り組む場合、結構な覚悟を持って挑戦することをお勧めする。
・一方、一つ一つのテーマの習熟度に拘泥すると先に進めないので、ある程度理解度のハードルは下げてコンテンツを一通りさらうことが肝要かと思われる。

以上
RSpecによるテストコードについて　〜概念編〜

#本記事について
本記事ではテストコードとは？〜テストコードを書く意義というところまでの概念について記事にしております。

##テストコードとは
アプリケーション内に記述する、そのアプリケーションの動作（挙動）確認するためのコード

正確に動作するのか、または実験的に動作を確認する際に用いられる
動作確認は自動で行える

パソコンの指示の具現化をする行動がテストコード

##RSpec
Ruby on Railsのテストコードを書くために使われるGem

##テストコードを書く意義
ブラウザはだめ？テストコードのメリットは？

###クオリティの担保　
ブラウザでは人為的なミスが生じやすい。特に確認事項が多い箇所や手戻りして確認しなければ内容等がある際は人為的なミスが生じやすい。
→コードでは動作確認を目でみることがなく、コードなので情報がわかりやすく確認しやすい。

・仕様が変わった時にもう一回全部プラウザで確認しなければならない
手動でのチェックは大変

##ブラウザでの確認ではどのように確認したのか履歴が残らない
コードごとに一つ一つ何をしたのかを証拠を確認しやすい・仕様を見極めれることができる
テストすべき項目を洗い出すことができるということは仕様の全体像や確認の上で重要なポイントがわかっている必要があるので情報の整理ができる。
→アプリケーションの仕様がわかる。開発できる。

##細かな記述方法は後から調べたらいい（いっぱいある）
何を確認したいのかを理解する（何をしているのか、本質を掴むことが重要）
気になる点があればbinding/pryで止めて確認（そこを境に前後の確認ができ、また流れを理解できる、binding.pryを使って重要な事柄の理解をする）

##テストコードのパターン（ポイント）
「うまくいく時」「うまくいかない時」
→テストコードでの確認すべきポイントはなぜうまくいったのか、なぜうまくいかなかったのかと原因を深掘りし、その原因を次に活かすことができる。また原理原則を理解することで、知識の定着を図ることもできる。当たり前を疑う。自分の認識が合っているかの視点も大切。

テストコードではコードのパターンが決まっており、塊でパターンを理解するといい。

###正常系　「うまくいく時」
ユーザーが開発者の意図したことが操作に反映されていること

###異常系　「うまくいかない時」
ユーザーが開発者の意図しない操作になってしまうこと

##単体テストコード　点のイメージ
機能ごとに問題ないかを確かめる

##結合テストコード　線のイメージ
ユーザーがブラウザで操作する一連の流れを再現し動作確認を行う
AWS SAMテンプレート内にStep FunctionsをCloudWatch Eventsで定期実行する定義を追加する

# はじめに
lambdaを定期的に実行する場合、samテンプレート内にCloudWatch Eventsの定義`Events`として書けば簡単に定期実行させることができます。

ただ、同様の方法でStep Functionsを定期実行させる方法を調べるのに少し時間がかかったので、まとめておきます。

# 実行環境
- macOS Catalina 10.15.7
- aws-cli 1.18.185
- sam-cli 1.12.0

# やってみる

## lambdaの定期実行
まずはじめに、lambdaの定期実行用のsamテンプレートは以下のようになります。

```yaml
Resources:
  Function:
    Type: AWS::Serverless::Function
    Properties:
      CodeUri: hello_world/
      Handler: app.lambda_handler
      Runtime: python3.6
      Events:
        HelloWorldFunctionRule:
          Type: Schedule
          Properties:
            # 平日朝10時
            Schedule: cron(0 1 ? * MON-FRI *)
```

`Events`のところに定義を追加しておけば、`sam deploy`時に上記lambdaを実行できるCloudWatch Eventsルールが作成され、lambdaが定期的に実行されます。

上記定義の場合は、平日の朝10時(JST)に実行されます。

簡単ですね!!

## Step Functionsの定期実行
では、Step Functionsではどうなるでしょうか？

まず、samテンプレートにて以下のようにStep Functionsの定義を含めることが可能です。

```yaml
Resources:
  HelloWorldMachine:
    Type: AWS::Serverless::StateMachine
    Properties:
      DefinitionUri: statemachine/hello-world.asl.json
      DefinitionSubstitutions:
        FunctionArn: arn:aws:lambda:ap-northeast-1:xxxxxxxxxxxx:function:hello-world-lambda-Function
      Role: arn:aws:iam::ap-northeast-1:xxxxxxxxxxxx:role/hello-world-role
```

しかし、lambdaと同様に`Events`を追加してみてもうまくいきません。

そこで色々と調べたところ、Step Functionsの場合は別リソースとしてCloudWatch Eventsを定義するしか無いようです。

[3 Ways to Schedule AWS Lambda and Step Functions State Machine Executions](https://blog.shikisoft.com/3-ways-to-schedule-aws-lambda-and-step-functions-state-machines/) (※`Defining Scheduled CloudWatch Event`の章)

というわけで、samテンプレートにCloudWatch Eventsの定義を追加しましょう。

```yaml
Resources:
  HelloWorldMachine:
  .
  .
  .
  HelloWorldRule:
    Type: "AWS::Events::Rule"
    Properties:
      # 平日朝10時
      ScheduleExpression: 'cron(0 1 ? * MON-FRI *)'
      State: "ENABLED"
      Targets:
        -
          Arn: !Ref HelloWorldMachine
          Id: !GetAtt HelloWorldMachine.Name
          RoleArn: arn:aws:iam::ap-northeast-1:xxxxxxxxxxxx:role/hello-world-rule-role
```
※別リソースになるので、上記Step Functionを実行できるようにするためのrole(`hello-world-rule-role`)を作成・アタッチしておく必要あります。(または上で紹介した記事のようにsamテンプレート内でroleの定義も追加しましょう。)

これで、samデプロイ時にStep Functionsを定期実行してくれるClouWatch Eventsも同時に作成してくれます！

# 最後に
ということで、AWS SAM内にStep Functionsを定期実行するCloudWatch Eventsルールを追加することができました！
こうすることで、samテンプレート内に関係するリソースをまとめておけるのが、嬉しいですね

それでは本記事は以上です。
どなたかの参考になれば幸いです！
適当に再利用したいもの全部書いていく記事

# Git
https://qiita.com/oblivion/items/bb519fa5cdfeeb24f069

https://qiita.com/oblivion/items/5329085d8a1dd3184c8a

https://qiita.com/oblivion/items/3ee047efcb345b964a6f

# Linux
https://qiita.com/oblivion/items/59910418bf94bf6d207b

https://qiita.com/oblivion/items/68578045a6cf4a65770a

https://qiita.com/oblivion/items/5d6f8045d3590f4f6052

https://qiita.com/oblivion/items/4b7dc62ada13712435c0

# Shell Script
https://qiita.com/oblivion/items/c6bfb2bd13f6dc4e78d6

https://qiita.com/oblivion/items/10b827d57425a0486f6c

https://qiita.com/oblivion/items/17088157c69f4711e9c9

# HTML
https://qiita.com/oblivion/items/9f6284f171309ba4c0e8

https://qiita.com/oblivion/items/8404369ba3205d6e6464

https://qiita.com/oblivion/items/cc7b4773b8305e93c049

# CSS
https://qiita.com/oblivion/items/d8fc4a6b54ad45d7e486

https://qiita.com/oblivion/items/58d7e9fa22db2442dffa

# Nuxt.js
https://qiita.com/oblivion/items/3488e41af630a3b07ff6

https://qiita.com/oblivion/items/be6bb8684274b85a701b

# jQuery
https://qiita.com/oblivion/items/ae958e2d447851058aa9

# JavaScript
https://qiita.com/oblivion/items/f91dc9a78b39460dbe3c

https://qiita.com/oblivion/items/8d1f84efc5afdd750ca8

https://qiita.com/oblivion/items/2435718dd636fe96e73e

https://qiita.com/oblivion/items/2a026651163fa916856f

https://qiita.com/oblivion/items/c504d6e7a78da6faf0d2

# Python
https://qiita.com/oblivion/items/e74e34898e2ef087a7eb

# Django
https://qiita.com/oblivion/items/15e9d36d9d246b9522ff

# Meta
https://qiita.com/oblivion/items/883d7b9a2e37d903a181

# AWS
https://qiita.com/oblivion/items/85aae352d3f5e8bc3b7e

https://qiita.com/oblivion/items/9d992e97eb1c50e31d44

https://qiita.com/oblivion/items/b794d96f393aca9808d9

# MySQL
https://qiita.com/oblivion/items/e59341a6864815f0653e

# プラグイン
https://qiita.com/oblivion/items/55728a11f2e38be9658b

https://qiita.com/oblivion/items/14e75283875f5964aba2

https://qiita.com/oblivion/items/3263984c6e4226084911