OmniAICreator/Qiita-1.07M huggingface dataset:
git Updates were rejected because the tip of your current branch is behin　対応メモ

```
git push origin name_tag_branch
error: failed to push some refs to 'https://github.com/*****/****.git'
hint: Updates were rejected because the tip of your current branch is behind
hint: its remote counterpart. Integrate the remote changes (e.g.
hint: 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
```
ブランチが遅れをとっているので拒否された。
git pullしても直らないし、明らかにローカルリポジトリが最新とわかっていたので、強制push。

```
$ git push -f origin name_tag_branch
```
AppGoat：OSコマンド・インジェクション


# OSコマンド・インジェクションとは
攻撃者のリクエストにより、不正なOSコマンドが実行されてしまう脆弱性である。

# 脆弱性の原理
ウェブページの入力欄やURLのクエリストリングなどに攻撃者がOSコマンドを含めることにより、意図しないOSコマンドを実行させることにつながる。
このとき、ウェブアプリケーション側がシェルに実行可能な形で入力を受け渡すことがOSコマンドの不正な実行に繋がっており、直接的な原因となっている。

# 脆弱性が悪用された際の影響
OSコマンド・インジェクションによるOSコマンドの実行はサーバ側に大きな影響があるばかりでなく、他システムへの攻撃にもつながってしまう。

1. サーバ内のファイルを不正に操作される。
2. 不正にシステムを操作される。
3. 不正なプログラムがダウンロード、実行される。
4. 他システムへの攻撃の踏み台にされる。


# 検査方法
ウェブアプリケーションの入力欄、URL中のクエリストリングにOSコマンドを入力し、実行されるかどうかを調べればいよい。
入力可能な欄に `&/windows/system32/ping -n 21 127.0.0.1` と入力しリクエストを送信した際、20秒程度の遅延が発生した場合、脆弱性がある。

# 対策方法
対策の方針としてはシェルに入力値をそのままの形で引き渡さないことである。
プログラミング言語中には、ファイルの操作など、OSコマンドの機能を実装したメソッドを持っている場合が多いので、そうしたメソッドで代用することでシェルに入力値を引き渡す危険性はなくなる。
どうしてもシェルに入力値を引き渡す場合は、適切にエスケープ処理を行い、同時に複数のOSコマンドを実行できないようにする必要がある。
springでクラスパス下のファイルを文字列として読み込む

とりあえず```src/main/resources/application.yml```を文字列として読み込むコード。

```java
import java.io.IOException;
import java.nio.charset.StandardCharsets;

import org.springframework.core.io.ClassPathResource;
import org.springframework.util.FileCopyUtils;

import jp.co.rakuten.firstparty.base.exception.FirstPartyBizException;

public class Hoge {

  public static void main(String[] args) {
    
    String path = "application.yml";
    try {
      String str = new String(FileCopyUtils.copyToByteArray(new ClassPathResource(path).getInputStream()),
          StandardCharsets.UTF_8);
      System.out.println(str);
    } catch (IOException e) {
      throw new FirstPartyBizException(e);
    }
  }

}

```
勉強に役立つページ一覧

##前置き
勉強によさそうなサイトを見つけても、どこにあったか忘れることが多い……。
そのたびに調べるのも面倒なので、サイトをまとめてポイっとしときます(/*^ω^)/。

##ここから本編
####Unityの勉強に向いているサイト
**CodeGenius**
写真付きのスライド方式のレッスンなので、迷うことなく学べるのではないでしょうか。
インストールの方法からARやアプリの作り方まで、とても丁寧に書いてあります。
C#が分からなくても問題なさそうです。
>https://codegenius.org/

####Rの勉強に向いているサイト
**R-Tips**
一つ一つの情報が簡潔にまとめられています。
見たい情報がぱっと見れる！
>http://cse.naro.affrc.go.jp/takezawa/r-tips/r.html

####SQLの勉強に向いているサイト
**SQL攻略**
ブラウザ上で学習ができるので、最初の面倒な学習環境の構築が必要ありません。
軽く学習したい人におすすめ！
>http://sql.main.jp/

####その他いろいろ(有料？)
**Techpit**
現役エンジニアが作った様々な教材あり。
全部有料ですが、一つ一つが安いうえに途中までは見ることが出来るので値段が負担になることはなさそう。
PythonやRubyなどたくさんの言語を取り揃えています。
>https://www.techpit.jp/


**paizaラーニング**
プログラミングのゲームも取り揃えていて、ゲーム感覚で勉強することが出来る。
言語を学ぶ講座は動画形式となっている。
ほとんどの言語が途中から有料になります。
>https://paiza.jp/works/courses

##あと書き
自分が見つけ次第追加していこうと思います。
多分忘れることはないでしょう。
RTX VoiceをGTXグラボでも使う方法

# はじめに
2020/09/16 追記
[NVIDIA RTX Voice: Setup Guide](https://www.nvidia.com/en-us/geforce/guides/nvidia-rtx-voice-setup-guide/)からダウンロードできるインストーラーの最新バージョン(v0.5.12.6)では、以下の手順を踏まずに、当方の環境GTX1060でインストールできることを確認しました。
コメントで教えてくださった@tenslarさん、ありがとうございました。

~~AIを使用したノイズリダクションソフトのNVIDIA RTX Voiceが話題になっています。~~
~~名前にはRTXとついていますが、GTXグラフィックボードでも使用することができます。~~
~~使用する場合はメーカー推奨環境ではないので自己責任でお願いします。~~

#参考
[nVIDIA RTX Voice works without RTX GPU here's how](https://forums.guru3d.com/threads/nvidia-rtx-voice-works-without-rtx-gpu-heres-how.431781/)


# インストール手順
## 1. インストーラダウンロード
以下のサイトのDownload the App.からインストーラをダウンロードします。
[NVIDIA RTX Voice: Setup Guide](https://www.nvidia.com/en-us/geforce/guides/nvidia-rtx-voice-setup-guide/)

## ~~2. インストーラ展開~~
~~先程ダウンロードしたインストーラを一度起動するとインストールできない旨の表示がされますが、Cドライブ直下のtempフォルダに解凍されたものができます。
またはwinRARなどでインストーラを解凍します。~~

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455608/303f1c59-700b-6b00-3849-3d73ca839417.png)

## ~~3. ファイル書き換え~~
    NVIDIA_RTX_Voice -> NvAFX -> RTXVoice.nvi
~~をメモ帳などで開きます。管理者権限が必要な場合があります。~~

   	<constraints>
		<property name="Feature.RTXVoice" level="silent" text="${{InstallBlockedMessage}}"/>
	</constraints>

~~上記の記述を削除して上書き保存します。~~

## 4. インストール
tempまたは解凍したフォルダ内のインストーラ「setup.exe」を実行してインストールします。

## 5. 設定
NVIDIA RTX Voiceを起動し、Input deviceの「Remove background noise from my microphone」をチェックします。自身が聴く側の音声のノイズリダクションをしたいときは下側もチェックします。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455608/59775f14-5781-6e09-bb3f-a16141183efc.png)

Windowsのサウンドデバイスの既定も確認します。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455608/3b7a1738-93e3-79e8-c645-89fcaecc633e.png)

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455608/96e7d78f-0886-f124-a304-a1c11caa6289.png)

# まとめ
~~いかがでしたか~~
[Android]Google Map 表示

# [Android]Google Map 表示

以下の手順となります。
・Google Maps Activity 作成
・Google Map API key 作る
・Google Map API key をプロジェクトに設定

## Google Maps Activity 作成
<img width="483" alt="1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618722/796bff51-afd1-88ab-6697-c66b7068aa85.png">
<img width="909" alt="2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618722/ab1b1119-d6cf-543c-8a68-03c3dcd1c73e.png">
<img width="904" alt="3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618722/4e6a32b0-c0e7-902d-f247-9aade63e6770.png">
<img width="1439" alt="5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618722/f3ebb296-dc19-b206-f38f-33bfe5febea1.png">

Google Play Services dependency追加【ライブラリー導入】
<img width="1439" alt="6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618722/cc5cb092-4711-8463-3fe5-64f2a61fff0d.png">


## Google Map API key 作る
<img width="1284" alt="7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618722/4c06803f-04ea-7a92-fa2c-7560ca141f54.png">
<img width="1001" alt="8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618722/02591bdf-fd60-5901-e00c-d22911823628.png">
<img width="688" alt="9.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618722/b33dec7c-14f0-26e8-1f5b-450882fc3080.png">
<img width="953" alt="10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618722/a392f43b-c14b-d21f-8673-a0bb8173f293.png">
<img width="1035" alt="11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618722/7d2ab439-712b-8663-f6fd-b30d56f93bee.png">
<img width="1117" alt="12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618722/02dab27d-e003-a648-c924-ead4ef95eb3c.png">

## Google Map API key をプロジェクトに設定

<img width="1437" alt="13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618722/377103c4-c932-f5a0-487c-d665c8682bc3.png">

<img width="1440" alt="14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618722/b70a27f5-9262-0c5c-ebd8-188592806222.png">
<img width="1377" alt="15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618722/b05acaa7-393e-518d-500d-79228f76ae57.png">
<img width="704" alt="17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618722/859e0d9b-1763-6b95-54d2-3edcae62615f.png">
<img width="390" alt="16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618722/afad5570-a498-a29e-135e-127cbed0d0e5.png">
AppGoat：バッファオーバーフロー


# バッファオーバーフローとは
外部からの入力の際、想定しない量の入力により、プログラムが用意したメモリ領域からデータが溢れて格納されてしまい、大事なデータの領域が上書きされてしまう脆弱性。

#脆弱性の原理
外部からの入力値を格納する際、本来プログラムが用意していたメモリ領域から溢れて格納することが主な原因である。
また、書き換えを受けた変数、その後の動作によっては更に被害が拡がる。
以下のを同時に満たすと条件を同時に満たすと攻撃が成功する。

1. プログラムの内部に侵入用の機械語コードを送り込むことができる。
2. 領域溢れによってジャンプ先のアドレスを書き換えることができる。
3. ジャンプアドレス先へプログラムの制御を移すことができる。
4. 侵入用コードを実行することができる。

# 脆弱性が悪用された際の影響
1. プログラムの異常終了
2. 外部から任意の機械コードの実行

サーバの場合、サービスの提供の中止につながる。
攻撃の内容や攻撃の対象によってはコンピュータの制御まで奪われかねない、大きな危険をはらむ脆弱性である。

# 検査方法
画面から入力できるパラメータ、クエリストリングから送信されるパラメータに大量の文字列を入力し、異常終了が発生しないか確認する。

# 対策方法
C言語やC++を用いている場合、データ長を認識する関数を利用し、入力値を格納することができる。
また、バッファを動的に確保することで領域溢れを防ぐことも対策になる。

万が一書き換えが発生した場合に、プロセッサが異常なプログラムを実行しないように、書き換えを検出して実行しないようにする、書き換えが発生してもアドレスのランダム処理をはさみ実行できないようにすることも対策となる。
深刻な攻撃により乗っ取られることを防ぐことにつながる。
[Rust] 論理演算子の評価はlazy

Reference を眺めていたら論理演算子についての興味深い記述に気づいたのでメモがてら紹介します.

# 本論

次のコードを実行するとどうなるでしょう？ [PlayGround](https://play.rust-lang.org/?version=stable&mode=debug&edition=2018&gist=89e8f1a7b4d63bda4c5d258f95ee3e06)

```rust
fn main() {
    let x = true || panic!();
    println!("{}", x);
}
```

Or 演算子の評価は lazy で, 左側に `true` が来ている時点で右側の値によらず `true || panic!()` の戻り値は `true` になります. 従ってこのコードは右側の値を評価しないため, パニックせず `true` を出力します. 

And 演算子も同じです.

```rust
fn main() {
    let x = false && panic!();
    println!("{}", x);
}
```

## 応用

この性質を利用すると, 次のコードでは重たい計算 `very_expensive_calculation` は必要がなければ処理が省略されます. 

```rust
if condition && very_expensive_calculation() {
  // 省略 //
}
```

もちろん `if` 文をネストすれば同じことができますが, いろいろと活用できそうです.


# 注意

ビット演算 BitOr および BitAnd は当然ながらこの性質を持ちません. ただビット演算子の左側に `bool`, 右側に `panic!()` があると, `panic!()` が bool を返さない (`()` を返す) ためにコンパイルエラーになります. よくできてますね…

若干話は変わりますが, Rust の `true`, `false` のバイナリ表現はそれぞれ `1u8`, `0u8` であることが定められているのかどうか, という疑問が湧いたので, ついでに調べました. Reference の [Boolean Type](https://doc.rust-lang.org/stable/reference/types/boolean.html) には 1 byte ですよ, とのみ書かれていますが, [Behavior considered undefined](https://doc.rust-lang.org/stable/reference/behavior-considered-undefined.html) の部分に

> A value other than `false` (`0`) or `true` (`1`) in a bool.

が挙がっていたので, それで間違いなさそうです[^1]. ちなみに `as` で整数にキャストした場合の振る舞いは [std](https://doc.rust-lang.org/std/primitive.bool.html) の方に記述があります.

[^1]: 最初に発見できた公式の記述が [twitter](https://twitter.com/rustlang/status/1159448981174439937) でびっくりしました.


# 参考文献

- [Operator expressions - The Rust Reference](https://doc.rust-lang.org/stable/reference/expressions/operator-expr.html#lazy-boolean-operators)

# 関連記事

- [Rustの関数/メソッド呼び出しに関する評価順序と糖衣構文について](https://qiita.com/0ncorhynchus/items/63d2eb4e6ae905b8e423)
VBA×Python最速仕事術を読んだ内容メモーchapter2

###変数・データ型
　　■変数＝定義のようなもの。
　　演算や関数や文字など頻繁に使用するものは箱(変数)に入れて名前をつけて頻繁に使えるようにする。
　　**変数名の制限**
　　・変数名に使える文字（大小英文字・数字・_　）記号やスペースは不可
　　・数字は変数名の１文字目に使用できない
　　　（ex　str1は変数名として使用はできるが、1strは使用不可）
　　・大文字と小文字は区別される
　　・予約語は使えない（ex　if =５）

　　■データ型=たくさんの数値や文字列などのデータ内容を識別するためのもの
　　　・整数型(int)−　小数以下をもたない数値を表現するデータ型。
　　　　　　　　　　マイナスをつけると負の数、つけないと正しい数になる(ex　-120、50)
　　　・浮動小数点数型(float)-　 小数点以下をもつ数値を表現する(ex　13.577、-139.85)
　　　・プール型(bool)-　trueとfalseの二つの値を表現する
　　　・文字列型(str)-　一つ以上の文字のならびを表現すう''や""を囲む(ex　'hello'　"あいうえお")
　　上記４つのようにあらかじめ設定しておかなければいけないプログラム言語を**静的型付け言語**という。
 
   ■算出演算子
　　　足し算　+
　　　引き算　-
　　　掛け算　*
　　　割り算　/
　　　剰余算  %
　　　商を整数で　//
　　　べき乗　**
　
　　■比較演算子
　　　x==y　xとyが等しいときはtrueを返す
　　　x!=y　xとyが等しくないときはtrueを返す
　　　x< y　xがyより小さいときにtrueを返す
　　　x<=y　xがy以下のときtrueを返す
　　　x>y　xがyより大きいときtrueを返す
　　　x>=y　xがy以上のときtrueを返す
　　
　　■複合代入演算子
　　　同じ処理を複数繰り返す場合。
　　　回数を数えるカウンターとして使う変数を１ずつ増やしながら提携のコードを実行する場合。
　　　i=i＋1
　　　通常は上記のようなプログラム言語を使うが、
　　　pythonでは　i　+=　1　として省略して使用がが可能
　　　
　　　x += y　x+yの結果をxに代入
　　　x -= y　x-yの結果をxに代入
　　　x *= y　x*yの結果をxに代入
　　　x /= y　x/yの結果をxに代入
　　　x %= y　x%yの余りをxに代入

　　■論理演算子
　　　x and y 　xとyの論理積。xとyのどちらもtrueならtureを返す
　　　x or y　　xとyの論理和。xとyのどちらかがtrueならtureを返す
　　　not y　　 xとyの否定。xがtrueならfalseを。falseならtureを返す

　　
　　pythonではオリジナルの関数をつくることも出来る=定義
　　関数定義はdefから始まる
　
　　　def　関数名(**引数リスト**)：　#必ずコロンはつける#
　　　　　 命令文
　　　　　 命令文
　　　　　 命令文
　　　　　　 ・
　　　　　　 ・
　　　　　 return 戻り値　#戻り値がない場合はreturnを省略する#
NavigationでSafe Argsを使って値を渡す方法(Kotlin)

## はじめに

Navigationを使っている場合、「Safe Args」という機能を使うことで、フラグメント間で値を型安全に渡せます。

Safe ArgsはNavigationとは別に設定する必要があり、セットアップや使い方を紹介します。

## BundleやViewModelとの使い分け

基本的には「軽量のデータを渡すとき」にSafe Argsを使うのが望ましいです。
公式ドキュメントの内容を転記します。

> 一般に、デスティネーション間で渡すデータの量は、最小限に抑えることを強くおすすめします。たとえば、オブジェクト自体を渡すのではなく、オブジェクトを取得するためのキーを渡すようにします。これは、Android では、保存するすべての状態の合計容量が限られているためです。大量のデータを渡す必要がある場合は、 `ViewModel` を使用することをおすすめします。

引用： [デスティネーション間でデータを渡す  |  Android デベロッパー  |  Android Developers](https://developer.android.com/guide/navigation/navigation-pass-data?hl=ja)

公式ドキュメントの内容をまとめると、以下のように使い分けるのがよさそうです。

- 大量のデータを渡す必要がある → ViewModelを使う
- Gradleを使っていないなど、Safe Argsが使えない → Bundleを使う
- それ以外 → Safe Argsを使う

## 環境

- OS：macOS Mojave 10.14.6
- Kotlin：1.3.61
- Gradle：5.6.4
- Gradle plugin：3.6.2

## セットアップ

前提条件として、Navigationがセットアップされているものとします。

### インストール

appフォルダ配下の「build.gradle」にSafe Argsのプラグインを追加します。
モジュールにJavaが含まれている場合、代わりに `"androidx.navigation.safeargs"` を追加してください。

```diff:/app/build.gradle
+ apply plugin: 'androidx.navigation.safeargs.kotlin'
```

ルート直下の「build.gradle」にSafe Argsのクラスパスを追加します。
バージョンはNavigationと揃えます。

```diff:/build.gradle
buildscript {
    ext {
        nav_version = "2.3.0-alpha05"
    }

    dependencies {
+         classpath "androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version"
    }
}
```

## 使い方

TBD

## おわりに

TBD

## 参考リンク

- [デスティネーション間でデータを渡す  |  Android デベロッパー  |  Android Developers](https://developer.android.com/guide/navigation/navigation-pass-data?hl=ja)
- [Navigation コンポーネント スタートガイド  |  Android デベロッパー  |  Android Developers](https://developer.android.com/guide/navigation/navigation-getting-started?hl=ja)
- [[Android] NavigationでSafeArgsを使って引数付き画面遷移をする - Qiita](https://qiita.com/tktktks10/items/c78fe6f2083611676fbb)
- [Navigation SafeArgsで使える型 - Kenji Abe - Medium](https://medium.com/@star_zero/navigation-safeargs%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B%E5%9E%8B-5e134ceacb7a)
- [AAC Navigation で Bundleの受け渡しを SafeArgs で行なってハマった話 - Studyplus Engineering Blog](https://tech.studyplus.co.jp/entry/2019/12/02/101143)
- [Setup Safe Args · uhooi/UhooiPicBook-Android@078df9f](https://github.com/uhooi/UhooiPicBook-Android/commit/078df9fb24b663b389c8137504b48014480baac9)
Pythonで毎日AtCoder #45

### はじめに
[前回](https://qiita.com/taxfree_python/items/f967b155de432795b233)
今日は一問だけ

### #45
[問題](https://atcoder.jp/contests/abc133/tasks/abc133_c)

**考えたこと**
mod2019の解の範囲は0~2018なので、2018通り以上計算する必要はありません。0が最小の値なので0になったら計算をやめます

```python
l, r = map(int,input().split())

ans = 2019
flag = False
for i in range(l,r+1):
    for j in range(i+1,r+1):
        ans = min(ans,(i*j)%2019)
        #print(i,j)
        if ans == 0:
            flag = True
            break
    if flag:
        break
print(ans)
```

### まとめ
マスターオブ整数が届いたので進めます。では、また
CSSって忘れやすいのは僕だけ・・？

今更ですが、viewの構成を整える際にいつもCSSがおざなりになるなぁ。と感じたので便利帳代わりに参考にしていた記事を辞書感覚で残しておこうと思います。
（※不定期更新）

決してフロント周りが苦手とか嫌いなわけではなく（むしろフロント好き）、ただ普通に僕の記憶力の乏しさが垣間見れたのでメモ代わりに使います。

[■ブロックレベル要素とインライン要素](http://www.htmq.com/htmlkihon/005.shtml)

[CSSセレクタとは（HTML・CSSの基礎知識）](https://www.asobou.co.jp/blog/web/css-selectors)

[CSSのセレクタとは？覚えておきたい25種類と書き方](https://saruwakakun.com/html-css/reference/selector)


気が向いたら更新していくスタイルでいきます。
parcel始めました

Parcelと言う気になる環境を見つけたのでちょっと触ってみた話。

[parcel](https://parceljs.org/)

# インストール
```sh
$ npm install -g parcel-bundler
```

# プロジェクトディレクトリにpackage.jsonを作成する
```sh
$ mkdir parcel-sample
$ cd parcel-sample
$ npm init -y
```

# index.htmlとindex.jsを作成する
``` index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script src="./index.js"></script>
</body>
</html>
```

```index.js
alert("hello, parcel!");
```

# parcelコマンドを実行してブラウザで確認する

```sh
$ parcel index.html

# parcelコマンドが見つからなかったらターミナルを再起動してみる
```

ブラウザで http://localhost:1234/ を開く（アラートが表示される）
<img width="454" alt="スクリーンショット 2020-04-21 17.26.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76063/7a98fda5-e677-57f0-e654-2478b9f56c46.png">

良さそう。。。
gruntとかgulpとかの設定がいらない感じ。。。？

# Adobe XDのチュートリアル

もうちょっとサンプル的なものをと思ってみたりみなかったり。
丁度良いのがないわけで。。。

で、見つけたのがAdobe XDのチュートリアル
![アートボード – 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76063/ecf6de10-3b94-5d66-554e-3f54e74a879c.png)

さっき作ったparcel-sampleをそのままコピーして作ってみる。

```sh
$ cp -r parcel-sample xd-tutorial
```

ソースコードはsrcフォルダへ（jsとscssもsrc以下で分ける）

```sh
$ cd xd-tutorial
$ mkdir src
$ mkdir src/js; mkdir src/scss
$ mv *.html src
$ mv *.js src/js
```

とりあえず画面毎にhtml/js/scssを分けて作ってみる。

***スプラッシュ(index)***
![iPhone X-XS-11 Pro – 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76063/ca2fa411-0d66-34f4-6a3a-b0adc41502af.png)

***ホーム(home)***
![ホーム.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76063/31b0ca78-9197-d2fd-a544-0912c6c50ed1.png)

***アドベンチャー(adventure)***
![アドベンチャー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76063/fd9327fb-440f-9ac0-5a41-7964893d5a2c.png)

***ブログ(blog)***
![ブログ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76063/ba94f7e8-3e4b-645f-03eb-2e5c7b124392.png)

***ギア(gear)***
![ギア.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76063/2d9eff7d-4cef-e117-3c38-d263ca4fa893.png)

カルーセルは面倒くさいのでなし。。。
共通化、変数化もしない。。。

で、
出来たのがこれ
[h23k/xd-tutorial](https://github.com/h23k/xd-tutorial)



またもうちょっと触ってみよ。
続く。。。
JavaScriptでのconsole使用方法

# console.log()とは何か
さしづめ、binding.pryのようなもの。
エラーが起こった時、どこでエラーが起こっているのか
正常な動作をしてくれているのかを確かめる時に
使うコードです。
**つまりconsole.log()をマスターしていないとエラーが起こった時に辛い思いをするということです。**

# console.log()で遊んでみる【初級】
準備するものは以下2つのファイル
:page_facing_up:index.html
:page_facing_up:script.js

そして、script.jsに以下の記述

```javascript
console.log("おはこんばんにちは")
```
準備ができたらindex.htmlにアクセス。
検証画面のコンソールを選択すると以下のようになる。

<img width="596" alt="EAF2A988-EC9C-4EE2-8C4D-67BF82815F13_1_105_c.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625088/8bcd3008-8ed0-10e5-56f6-a0b1c6029dca.jpeg">
これで初級編終わり。

# 変数とconsole.log()の併用【中級】
変数という概念はJSでも存在します。
ただちょっとややこしいのでここで変数の種類を整理しておきます。
・let（後で値を変更可能）
・const(後で値を変更不可)
イメージしやすいようにいうと定数みたいなものですかね（厳密にいうとちょっと違うけど）

さあ、実戦しよう。
script.jsでの作業です。

```javascript
let name = "Taro"
console.log(name + "さん、後で職員室にきなさい")
```

以下の画面になるはずです。
<img width="600" alt="1EBA91DE-D1A5-4239-9D52-D8CD28F9EA5F_1_105_c.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625088/b89ca1e0-50d5-b6b0-391d-bff20a944ff1.jpeg">
以上、中級編。
上級編は長くなるのでまた次回書きます。if文との併用を予定しています。
AppGoat：CSRF


# CSRFとは
CSRF（シーサーフ）とはクロスサイト・リクエスト・フォージュリという脆弱性の略称である。
攻撃者が悪意のある罠を用意し利用者が踏んでしまうことで、利用者の意図しないリクエストが実行させられてしまう脆弱性である。
ログイン後に利用可能なサービスを攻撃者が悪用することにつながる。

# 脆弱性の原理
主に、リクエストをしたのが本来の利用者本人であるかの確認が甘いことに起因した脆弱性である。
以下の3つの要素を同時に満たす場合、脆弱性が存在する。

1. 本人認証のためのトークンをhidden属性で持っていない、あるいは推測が可能。
2. 重要な処理の際にパスワードの再入力を求めていない。
3. どこからのリクエストであるかを確認するRefererを確認していない。

# 脆弱性が悪用された際の影響
利用者がウェブアプリケーションにログインしている最中に罠を踏んでしまうことで、攻撃者に以下のような攻撃を許してしまう。

1. ログインしユーザのみが利用可能なサービスを悪用されてしまう。
2. ログインしたユーザのみが編集可能な情報を改ざんされる。

# 対策方法
原理のところで示した3つの要素を同時に満たさないようにすることが解決策となる。
根本的な解決策は、どこからのリクエストかを確認し、サイト外からのリクエストを受信、実行しないようにすることである。
最近は画像化されたチェックコードを表示し、ユーザに入力させる「キャプチャ機能」を実装し、パスワードの再入力と同等の対策を行う場合がある。
[Rails]動画を埋め込む方法

# 背景
アプリ制作中に動画を埋め込みたいと考え調べたところ主に２つのやり方が出てきたので備忘録として記載する。

## videoタグを使用する場合
videoタグは、mp4やwebmなどの動画ファイルを読み込むことで動画を表示します。

###書き方

```html

<video src="video.mp4" 属性></video>
```

様々な属性を付与することで多様な実装が可能になります。

## 属性一覧

####controls：コントロールパネルを表示する
再生ボタンや再生位置（シーク）、ボリュームなどのコントロールパネルを表示することができる。

```html

<video src="video.mp4" controls></video>
```

####auto：自動再生する
auto属性を指定することで動画を自動再生できる。ただ、chromeやsafariではmuted属性で動画の音をでないように設定する必要があります。

```html
<video src="video.mp4" autoplay muted></video>
```

####playsinline：インライン再生する
全画面表示をせずにその場で再生させることができる。
インライン再生するためには「autoplay」、「muted」、「playsinline」の３つの属性が必須です。

```html
<video autoplay muted playsinline src="https://××××××.mp4"></video>
```

####loop：繰り返し再生
動画を自動で繰り返し再生させる。

```html

<video src="sample-video.mp4" loop autoplay muted></video>
```


##ブートストラップを使う場合
ルールは 「iframe」, 「embed」, 「video」, 「object」 要素に直接適用される。別の属性のスタイルに合わせる場合は、オプションで明示的な子孫クラス .embed-responsive-item を使用。

```html

<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..." allowfullscreen></iframe>
</div>
```
クロージャと変数

##当記事の目的
最近Goの勉強を始めて、いまいち掴めないクロージャについて、
備忘録もかねて自分なりに整理した考えを記載しておこうと思います。



##クロージャとは
Go 言語 公式の「A Tour of Go」には以下の説明があります。
>Goの関数は クロージャ( closure ) です。 
クロージャは、それ自身の外部から変数を参照する関数値です。 
この関数は、参照された変数へアクセスして変えることができ、その意味では、その関数は変数へ"バインド"( bind )されています。


Goでは、**関数は第一級オブジェクト**として捉えています。
そのため、数値や文字列のように **関数そのものを変数に束縛や代入することも、引数または戻り値とすることができたりします。**
クロージャとは、この関数を戻り値とするもしくは引数とする際に、これらの関数を参照する値、情報を指している。
（以下でいうと、adder()の返す値がクロージャにあたる）

```Function-closures.go
func adder() func(int) int {
	sum := 0
	return func(x int) int {
		sum += x
		return sum
	}
}
```


##クロージャが参照する変数
クロージャが参照している変数は、一見ローカル変数のように見えますが、実際のところ破棄されるタイミングは異なります。
（というのも、Goのコンパイラが、クロージャに参照されている変数については、クロージャに属する変数として処理されるため）

<TABLE>
    <TR>
        <TD>通常のローカル変数</TD><TD>関数の実行が完了した時点</TD>
    </TR>
    <TR>
        <TD>クロージャが参照する変数</TD><TD>何らかの形で参照され続ける限り、破棄されない</TD>
    </TR>
</TABLE>




####▼A Tour of Goより抜粋

```Function-closures.go
package main

import "fmt"

func adder() func(int) int {
	sum := 0
	return func(x int) int {
		sum += x
		return sum
	}
}

func main() {
	pos, neg := adder(), adder()
	for i := 0; i < 10; i++ {
		fmt.Println(
			pos(i),
			neg(-2*i),
		)
	}
}

```
`sum`は、一見ローカル変数のように見えますが、クロージャから参照されているため、クロージャに属する変数として処理されます。

そのため、実行してみると以下のように
`sum`は前回の結果に+1を行なっているのがわかります。
つまり、adder()のクロージャが呼び出される毎に`sum`が新規で作成されている訳ではないことが確認できます。

また、`pos`、`neg`はそれぞれadder（）を代入していますが、クロージャ間で値は共有されないことも確認できると思います。

<details>
<summary>**実行結果**</summary>
0 0
1 -2
3 -6
6 -12
10 -20
15 -30
21 -42
28 -56
36 -72
45 -90
</details>

###参照
- 翔泳社 スターティングGo言語　https://www.shoeisha.co.jp/book/detail/9784798142418
- A Tour of Go　https://go-tour-jp.appspot.com/moretypes/25


###最後に
今までJavaを触れたことがあるくらいで
ちゃんとプログラミングを勉強したいと最近Goについて勉強を始めました！
Qiitaも慣れていないので、読み手にとって良い記事が書けているのか分からないことも多いですが、
間違っているやわかりづらいなどあれば、遠慮なくご指摘ご意見いただければ幸いです。
rails newするときのオプション

**新しいRailsのアプリケーションを作成する時に使えるオプションをまとめてみました！！**

## 使い方
$ rails new アプリケーション名 [オプション]

## 直前豆知識

```
rails _5.2.2_ new appname
```
5.2.2の部分に好きなバージョンを入れることで、そのバージョンでnewできる。

## データベースの指定
デフォルトはsqlite
### mysql

```
rails new appname --database=mysql
rails new appname -d mysql
```
### Postgresql

```
rails new appname --database=postgresql
rails new appname -d postgresql
```

## ファイルが存在する場合に上書きする

```
rails new appname -f
rails new appname --force
```
## 現在のディレクトリに生成する

```
rails new appname .
```

## bundle installを行わない

```
rails new appname ｰB
rails new appname --skip-bundle
```
初めての投稿

はじめまして、情報系の大学に通う知識貧乏といいます。
よろしくお願いします。

##自己紹介
name : 知識貧乏
age : 21
profession : 学生
qualification : 基本情報処理技術者（FE）
like : 睡眠、映画鑑賞、プログラミング（最近）

##今後の投稿内容について
見出しの通り、今後の投稿内容については、プログラミングになると思います。が、いかんせん知識がないので参考にならないと思います。
投稿を行う主な理由が備忘録をつけることなので、自己満足ですかね、、、笑

話が逸れましたが、このサイトでは以下の内容について書きます。

- 競技プログラミング
- 大学の講義の内容の復習
- 自分の興味のある事

投稿が継続できるかわかりませんが、お手柔らかにお願いします。

P.S. -**始めたきっかけ**-
先日から世間を騒がしている、COVIT-19により大学が遠隔授業となり時間ができたため。
Windows アプリケーション パッケージ プロジェクトで MSIX をコマンドラインから作るときに指定する引数

近い将来か、遠い将来か…いつか dotnet コマンドに統合される日を夢見ていますが、とりあえず直近は MSBuild 使うことになります。

MSBuild で指定する `/p:パラメーター名=パラメータの値` は、基本的にプロジェクトファイルの `PropertyGroup` タグの下で指定されたタグ名がパラメーター名で、タグの中の値がパラメーターの値に対応します。なので、そこを確認するといい感じです。

後は、1つ前の記事でメモしておいた以下のドキュメントも参考になります。

[UWP アプリの自動ビルドを設定する](https://docs.microsoft.com/ja-jp/windows/uwp/packaging/auto-build-package-uwp-apps)

といっても毎回確認するのはだるいので、ここでよく指定するものをまとめておきます。

|パラメーター名|パラメーターの値|説明|
|----|----|----|
|Configuration|Release|本番ビルドは Release|
|AppxBundlePlatforms|x86&#124;x64|32bit と 64bit の場合はこのように指定する。|
|AppxPackageDir|`./dist` のような適当なパス|msix などの成果物の出力フォルダー|
|AppxBundle|Always|msixbundle を生成する|
|UapAppxPackageBuildMode|SideloadOnly か StoreUpload|StoreUpload はストアアップロード用とサイドロード用の両方を生成してくれる。SideloadOnly はサイドロード用のみに対応|
|AppxPackageSigningEnabled|true か false|証明書でサインするかどうか|
|PackageCertificateKeyFile|`./Hoge.pfx` のようなパス|パッケージを署名するための証明書へのパス|
|PackageCertificateThumbprint|空文字|署名証明書の拇印を指定してもいい。|
|PackageCertificatePassword|証明書のパスワード|値に書いてある通り|
|AppInstallerUri|URI|`.appinstaller` ファイルを置く場所のフォルダーへのパスや URI|

ここら辺を知ってれば大丈夫そう。
結果として以下のようなコマンドになる（上で紹介した全てのパラメーターをしている状態ではないです）

```
msbuild MyPackageProject.wapproj `
    /p:Configuration=Release `
    /p:AppxBundlePlatforms="x86|x64" `
    /p:AppxPackageDir=./dist `
    /p:AppxBundle=Always `
    /p:UapAppxPackageBuildMode=SideloadOnly `
    /p:AppxPackageSigningEnabled=true `
    /p:AppInstallerUri=https://example.com/appdeploy
```

コマンドでの叩きかたがわかれば、後は各種 CI/CD サービスのお作法にしたがって上記パラメーターを渡すように書くだけだから頑張ればいけそう。
通达OA前台任意伪造用户登录

## 环境
通达OA历史版本下载：https://cdndown.tongda2000.com/oa/2019/TDOA11.4.exe

解密工具：https://pan.baidu.com/s/1c14V6pi

## 复现
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593424/ddd98fa5-faf4-efe2-358d-4bfb7b59d0aa.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593424/aab605e2-fd67-afca-05e3-744d9c758379.png)

拿到UID为1及管理员的SESSION直接登陆
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593424/15c01dd4-77c5-11ae-8d01-b690c11da794.png)

## 分析
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593424/c1de3eb3-a674-aee4-3924-43abb795dbc8.png)
在logincheck_code.php中UID可控，当UID为1时，用户默认为admin管理员。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593424/58644cef-1068-5bfa-7874-e752b9f1d874.png)
在其后180行左右将信息保存到SESSION中。那么只要绕过了18行的exit()就可以了。

```php
$CODEUID = $_POST["CODEUID"];
$login_codeuid = TD::get_cache("CODE_LOGIN" . $CODEUID);
if (!isset($login_codeuid) || empty($login_codeuid)) {
	$databack = array("status" => 0, "msg" => _("参数错误！"), "url" => "general/index.php?isIE=0");
	echo json_encode(td_iconv($databack, MYOA_CHARSET, "utf-8"));
	exit();
}
```
login_codeuid 从redis缓存中`TD::get_cache()`获取`"CODE_LOGIN" . $CODEUID`，搜索下可不可控
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593424/d2d38ac6-580a-c3e3-c42d-e859f24f347c.png)

跟进`general\login_code.php`

```php
<?php

include_once "inc/utility_all.php";
include_once "inc/utility_cache.php";
include_once "inc/phpqrcode.php";
$codeuid = $_GET["codeuid"];
$login_codeuid = TD::get_cache("CODE_LOGIN" . $codeuid);
$tempArr = array();
$login_codeuid = (preg_match_all("/[^a-zA-Z0-9-{}\/]+/", $login_codeuid, $tempArr) ? "" : $login_codeuid);

if (empty($login_codeuid)) {
	$login_codeuid = getUniqid();
}

$databack = array("codeuid" => $login_codeuid, "source" => "web", "codetime" => time());
$dataStr = td_authcode(json_encode($databack), "ENCODE");
$dataStr = "LOGIN_CODE" . $dataStr;
$data = QRcode::text($dataStr, false, "L", 4);
$data = serialize($data);
if (($data != "") && ($data != NULL)) {
	if (unserialize($data)) {
		$matrixPointSize = 1.5;
		QRimage::png(unserialize($data), false, $matrixPointSize);
	}
	else {
		$im = imagecreatefromstring($data);

		if ($im !== false) {
			header("Content-Type: image/png");
			imagepng($im);
		}
	}
}

TD::set_cache("CODE_LOGIN" . $login_codeuid, $login_codeuid, 120);
$databacks = array("status" => 1, "code_uid" => $login_codeuid);
echo json_encode(td_iconv($databacks, MYOA_CHARSET, "utf-8"));
echo "\r\n\r\n\r\n";

?>
```
当`$login_codeuid`为空时会`getUniqid()`生成一个存入redis缓存并且在最后echo出来。所以我们可以通过直接get请求`general\login_code.php`拿到`CODEUID`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593424/b74a0aaf-5a0a-0cae-5763-171b1c437746.png)
使用之前的CODEUID即可绕过if条件的exit()。

## 总结
很蠢的错误。通达真的不考虑抛弃全局变量覆盖吗？

拓展下的话，尝试寻找下通过get_cache()获取的变量影响到sql语句什么的。
#01 [HTML&CSS 超超超初心者講座 - 2020 - ] HTML&CSSの勉強どっからはじめればいいのかわからんぞ


[VSCode]:https://azure.microsoft.com/ja-jp/products/visual-studio-code/
[VSCodeJp]:https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja
[entry01]:https://qiita.com/hiroyukiyamamoto-ptp/items/fd3b033ddc2da00bb6c5
[entry02]:https://qiita.com/hiroyukiyamamoto-ptp/items/2c41a4704cbf70c6e8ff

# HTML&CSSの勉強どっからはじめればいいのかわからんぞ

「webページ自分でコーディングしてみたい」とか「特にやりたくはないけど仕事でやらなきゃいけない」でも、「とっかかりがわからない」そんな人のための「超初心者講座」です。

なので、経験者には向いていないので、このシリーズは読まなくていいです。

## ひとまずコーディングの準備をしよう

HTMLのコーデイングは普通のテキストエディタでもできるよ。
でもさ、専用のエディタがあるからそれを使おうよ。それっぽいインターフェースだし、気分を高めよう。

他にもエディタはいっぱいあるけど、無料だし機能拡張もいっぱいあるから、この講座では[VSCode]を使って行こうと思う。今後[VSCode]が入ってることを前提な話も出てくると思う。

### VSCodeのインストール

[VSCodeをここからダウンロード][VSCode]してインストールしよう。


## VSCodeの日本語化

そのままだと多分英語だしとっつきづらいかなって思うので、「日本語化」しましょう。

[VSCodeの日本語化プラグインをここからインストール][VSCodeJp]してみよう。

↑これを入れてVScodeを再起動すれば日本語化されていると思うよ。


## その他おすすめのプラグイン

[VSCode]はいろいろプラグインがあって機能が拡張できるぞ。
いっぱいあるから選べないよね。だからこれを入れとけばいいよってやつをピックアップしました。

#### Live Server
簡易的なローカルサーバが1clickでたてれるぞい。
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

#### Live Sass Compiler
保存すればscssコンパイルしてくれるぞい。
https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass

#### HTML Snippets
htmlコードを予測変換してくれるぞい
https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets

#### Insert < br > Tag
Shift+Enter で ` <br>` 入れてくれるぞ
https://marketplace.visualstudio.com/items?itemName=1natsu.insert-br-tag

#### indent-rainbow
インデントに色をつけてくるから親子関係がみやすいぞい
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

#### Material Icon Theme
ファイルとかフォルダーをそれっぽいアイコンで表示してくれるぞい
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

#### Auto Close Tag
始まりのタグ入れれば閉じタグ精製してくれるぞい。（たまに煩わしい）
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

#### Beautify css/sass/scss/less
cssとかscssとかに色をつけてみやすくしてくれるぞい。
https://marketplace.visualstudio.com/items?itemName=michelemelluso.code-beautifier

#### Bracket Pair Colorizer 2
() {} の始まりと終わりに色をつけてくれるからわかりやすいぞい
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

#### Auto Rename Tag
始まりでも終わりでもタグを編集すればどちらも書き換わるぞい。（これもたまに煩わしい）
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

## それっぽい環境がととのったぞい

[次回][entry02]もお楽しみに
【scss】スタイルを使い回す(変数や継承)

scssで、同じスタイルを使い回す際の定義、呼び出し方について。

# 変数の定義
1つのスタイルを使い回したい時には、変数として定義し、都度その変数を呼び出す。

```scss:scss
//定義
  $変数名: 値;
//呼び出し
　セレクタ { スタイルタイプ: $変数名; }

//例
  $point_color: #ccc;
  p { background-color: $point_color; }
```

# スタイルの継承
`@extend`を付けるだけで、前に使ったスタイルを継承できる

```scss:scss
 .wrapper {
  height: 100%;
  width: 100%;
  background-color: #fff;
 }

 //呼び出し
 .content {
   @extend .wrapper {
   background-color: #ff0211;
   }
 }
```

# 引数を使ったスタイルの共有
使い回したいスタイルを`@mixin`で定義し、`@include`で呼び出す。
例えば、基本のスタイル同じだけど、色だけ変更したい時とかに便利。

```scss:scss
 //定義
  @mixin required($bgColor:#ff0211) {
    color: #fff;
    background-color: $bgColor;
    margin-left: 8px;
    font-size: 12px;
    padding: 0 4px;
    border-radius: 2px;
  }
 //呼び出し
  .option{
    @include required(#bfbfbf);
  }
```
## メディアクエリ
例えば、PC、タブレット、スマホでスタイルを変えたい時などは、ブレイクポイントを指定すると簡潔に書ける。

```scss:scss
// 変数を定義
$breakpoint-tablet: 1024px;
$breakpoint-mobile: 640px;

// 幅が$break-point以下の時に@contentを適用
@mixin max-screen($break-point) {
  @media screen and (max-width: $break-point) {
    @content;
  }
}
// 幅が$break-point-min以上、$break-point-max以下の時に@contentを適用
@mixin screen($break-point-min, $break-point-max) {
  @media screen and (min-width: $break-point-min) and (max-width: $break-point-max) {
    @content;
  }
}
```

## ベンダープレフィックスの付与
ブラウザでサポートされていない拡張機能の実装に使う（拡張機能であることを明示する役割)。
今では、主要なブラウザでは、概ねサポートされてるので、ほとんど使わない。

```scss:scss
// ベンダープレフィックスを付与したい場合
$set-prefix: '', '-moz-', '-webkit-'; 

// プロパティにプレフィックスを付与したい場合
@mixin ProprtySetPrefix($name, $value) {
  @each $prefix in $set-prefix {
    #{$prefix}#{$name}: $value;
  }
}

// 値にプレフィックスを付与したい場合
@mixin ValueSetPrefix($name, $value) {
  @each $prefix in $set-prefix {
    #{$name}: #{$prefix}$value;
  }
}

// 使い方 
div {
  @include ProprtySetPrefix(transition, 0.5s);
}
```
AWS専門用語まとめ

AWSは専門用語が多くて頭がごっちゃになるので整理しました:anguished:

##セキュリティ
### IAM
**I**dentity and **A**ccess **M**anagement
AWSへのアクセス管理サービス。
ユーザーとグループを作成・管理し、アクセスを制御できる。

- IAMロール<br>
現在APIキーの利用は推奨されておらず、その代わりにこれを使う。

### AWS Shield
DDos攻撃に対する保護サービス。

- DDos攻撃とは<br>
ネットワークのトラフィック（通信量）を増大させ、リソースに負荷をかけたり、ダウンさせたりする攻撃のこと。

### AWS WAF
**W**eb **A**pplication **F**irewall
アプリケーションの可用性低下、セキュリティの侵害、リソースの過剰消費などの一般的なWebの脆弱性からアプリケーションを保護するファイアウォール。

###Inspector
脆弱性診断を自動で行うことができるサービスで、EC2上にデプロイされたアプリケーションに対応。

##コンピューティングサービス
###EC2
Amazon **E**lastic **C**ompute **C**loud
サーバーに必要なもの一式をクラウドで借りられるサービス。従量課金制。

###AMI
**A**mazon **M**achine **I**mage
Dockerのイメージと同じようなもの。
AMIからいくつでも同じサーバーを起動できる。

###ELB
**E**lastic **L**oad **B**alancing
EC2インスタンスを複数のAZ(アベイラビリティゾーン)に配置して、ユーザーからのアクセスを受け付ける。(対障害性)

###Auto Scaling
EC2インスタンスを必要なときに自動で増減できる。
これにより高可用性、コスト効率化ができる。

###Lambda
ソースコードさえ用意すれば、そのプログラムを実行することができるサービス。
プログラムを実行するための環境構築や管理も必要ない。

##ストレージサービス
###EBS
Amazon **E**lastic **B**lock **S**tore
EC2の外付けHDDのようなもの。記憶領域。
EC2インスタンスにアタッチして使用する。

###S3
Amazon **S**imple **S**torage **S**ervice
クラウド型のストレージサービス。FTPサーバーのようなもの。
ストレージ容量は無制限。

##ネットワークサービス
###VPC
Amazon **V**irtual **P**rivate **C**loud。
AWSクラウド内にプライベートなネットワーク環境を構築することができる。
AWSサービスの中にはVPC内で利用するものとVPC外で利用するものがある。

##Cloud Front
世界中に150ヶ所以上あるエッジロケーションを使い、最も低いレイテンシー(遅延度)でコンテンツを配信できるCDN(コンテンツ配信ネットワークサービス)。

- エッジロケーション<br>
AWSによって維持される、サービスを提供するためのデータセンター

##Route 53
エッジロケーションで使用されるドメインネームシステム(DNS)

##データベースサービス
###RDS
Amazon **R**elational **D**atabase **S**ervice
オンプレミスで使われているデータベースエンジンをそのまま簡単に使うことができる。

###Amazon Aurora
AWSがクラウドに最適化して再設計したリレーショナルデータベースエンジン。
MySQL, PostgreSQLのデータモデルをサポートしている。(＝MySQLまたはPostgreSQLで動いているアプリケーションはAuroraでそのまま動かすことができる。)

###DMS
AWS **D**atabase **M**igration **S**ervice
オンプレミスからAWS、またはAWSからAWSへデータベースの移行をする場合、従来のやり方ではリスクも時間も多くかかるが、これを利用することでシステムのダウンタイムを最小限にできる。

##管理サービス
###Cloud Watch
これまで出てきたEC2インスタンス、RDSインスタンス、DBテーブルなどの各インスタンスの状態、情報をモニタリングするサービス。

###Trusted Advisor
ユーザーのAWSアカウント環境の状態を自動的にチェックして回り、ベストプラクティスに対してどうであったかを示すアドバイスをレポートする。

###Cloud Trail
AWSアカウント内のすべてのAPI呼び出しを記録する。
AppGoat：SQLインジェクション


# SQLインジェクションとは
ウェブアプリケーションの中にはデータベースを操作する言語であるSQLを用いている場合がある。
攻撃者が不正なSQLのリクエストを送信することで、SQLによりデータベースの不正操作などをされてしまう脆弱性である。

# 脆弱性の原理
攻撃者がSQLの不正なリクエストを送信、サーバ側が実行できてしまうことが原因で脆弱性が存在している。
ウェブページ上の入力欄に加え、GET方式で送信している場合はURL中のクエリストリングも不正なリクエストの送信に用いられる。

攻撃の対象により2つに分類できる。

##### 文字列リテラルに対するSQLインジェクション
入力されたデータ中に不正なSQL文を構成する文字列が含まれており、不正な動作を起こしてしまう。

##### 数値リテラルに対するSQLインジェクション
文字列は異なりクォートしないため、文字列リテラルのエスケープ（後述）に相当する処理はない。

# 脆弱性が悪用された際の影響
この脆弱性を利用した攻撃では、サーバ側に不正な操作がされる。

1. データベースに蓄積された非公開情報の閲覧
2. データベースに蓄積された情報の改ざん、消去
3. 認証回避による不正なログイン
4. ストアドプロシージャなどを利用したOSコマンドの実行

サーバ側は情報を閲覧されるだけではなく、情報の改ざん、消去に加えOSコマンドの実行といった攻撃により深刻な被害を被る可能性がある。
他の利用者はこの攻撃だけで直接被害を被ることはないが、窃取された情報によっては他の不正な攻撃に利用されてしまう可能性がある。


# 対策方法
SQLで用意されている静的プレースホルダに入力された値を格納する。
静的プレースホルダを利用する場合、パラメータを指定する前に実行される構文が確定しているため、不正なスクリプトを含む文字列が入力されていても、不正なSQL文は実行されない。


文字列リテラルの場合、入力された値やURL中のクエリストリングの値など、SQLで実行されるパラメータに適切なエスケープ処理を行うことでも回避が可能。
MacにPowerShellを入れてSSHで接続するまで


MacからPower Shellを使ってAzureに接続する必要がありましたのでその手順の備忘録です。

```環境
macOS High Sierra 10.13
Python 3.6.5
```


#powershellをインストールする
```ターミナル
#Homebrewでインストール
brew cask install powershell

#起動確認
pwsh

#バージョン確認(PSで接続後)
$PSVersionTable.PSVersion
```

#SSHを利用する
1.適当なディレクトリを作成してそこに秘密鍵を入れる
2.秘密鍵に権限を付与する
　注意：いつも権限は```chmod 777```と適当にしてましたが、秘密鍵ということで権限緩すぎると後で怒られてエラーになるようです。

```ターミナル
#権限付与
chmod 0600 id_rsa
chmod 0600 id_rsa.ppk

#権限確認
ldap$ ls -la
-rw------- id_rsa
-rw------- id_rsa.ppk
```


#SSHで接続(PSで接続後)
```ターミナル
#powershellを立ち上げる
pwsh
#SSHで接続する
ssh -i <秘密鍵のパス/id_rsa> <接続先ホスト@>
```

#参考サイト
https://docs.microsoft.com/ja-jp/powershell/scripting/learn/remoting/ssh-remoting-in-powershell-core?view=powershell-7
シンプルなインフラを目指せ

#はじめに
複雑な仕組みは例外に弱く、シンプルなインフラのほうがいいよね！って常々思うわけです。
ある日ふと思いました。
シンプルって何だろう。
自分の考えを自分に残すためのメモ。

#シンプルについてググってみた

weblio英和辞典様によると

>　簡単な、やさしい、簡単で、やさしくて、単純な、込み入ってない、基本的な、簡素な、凝ってない、地味な

なるほどなるほど。

#開発では
インフラ界隈でもシンプルにしようという動きはあると思いますが、開発界隈のシンプルさに学ぶところが多いと思っていますので、開発界隈で個人的にシンプルだなーと思う考え方を挙げます。

* マイクロサービスアーキテクチャ
* クリーンアーキテクチャ
* CI
* CD

…なんだか挙げたらキリがなさそうですが、根っこをたどると**オブジェクト指向**に行き着くような気がしました。

#インフラはオブジェクト指向だよね

インフラってオブジェクト指向だよね、って私は思うわけですが、インフラ界隈のメンバー的にはどうなんでしょう。
私が持っているオブジェクト指向のイメージとしては**責任を持つ担当者が責任を果たす**と考えています。

インフラに当てはめると…

* ネットワークはパケットを元から先に届ける責任を果たす
* Webサーバーはブラウザからのリクエストを受け付け、レスポンスを返す責任を果たす
* アプリケーションはWebサーバーから受け付けたリクエストを解釈・加工し、レスポンスを生成する責任を果たす
* DBサーバーはアプリケーションからのリクエストに応じてデータを抽出、保存、削除する責任を果たす

他にもCDNや認証、バックアップなどなど役割が明確なものが多く、責任範囲を明確化し、その責任を果たすことが出来るプロダクト群がそろっている気がします。

#インフラはシンプルだ？
そもそも〇〇サーバーって名前が付くぐらいなんだから、その名前付けによって責任範囲は明確だし、各種サーバーで構成されるインフラはシンプルなんだ！！

**残念ながら、ちがう！**

## 〇〇サーバーは一つじゃない
いろんな事情から、同じ役割を持つサーバーが複数存在します。
例えばDBサーバー。

* アプリケーションの親和性や目的により使用するDB基盤が異なる
* セキュリティの観点から、他アプリケーションとDBを共有できない
* 各種寿命の観点からDBを共有できない(このDBにつないでもEOLがあと1年だからーみたいなやつ)

パッと思いつくだけで3つもあるんで、まだまだありそうです。

## お前は何なんだよ！

過去のプロジェクトでこんなサーバーを見てきましたよ。
って今も見るやつがあるか…。

* 共通機能サーバー
* 連携サーバー
* ツールサーバー

共通機能ってなんだよ！って思っちゃいますけど、共通の機能をコンポーネント化してあるっていう意味では有り寄りの無し？
お前にはきっともっと適切な名前がある！んだろうけど、日本語で適切な名前を付けようとすると長くなるし、ホスト名でいい感じの名前つけたいしっていう大人の事情を理解してくれよ！

連携サーバーもそう。
連携ってなんだよ、何と何を連携すんだよ！って思いますけど、こちらも似たような事情でしょう。

世の中にはわざわざ個別に建てるまでもない**便利屋さんサーバー**が必要なんです。
ツールサーバーなんて私も作った気がします。ごめんなさい。~~これからも作ると思います。だって便利なんだもん~~

#私の考えるインフラに求めるシンプルさ
シンプルさって何だろう。
自分なりに挙げてみます。

* 小さい
* 少ない
* 狭い

## 小さいインフラ
先ほどのように各種プロジェクトごとにWebサーバーなどが乱立してしまうのは仕方がないと考えましょう。
古い体質の残っているインフラ界隈だと、Webサーバーを複数のプロジェクトで共有して構築のコストを下げよう！みたいな発想がいまだに残っているかもしれませんが、**事故の温床**でしかありません。
各プロジェクト単位でインフラをパッケージングするイメージでWebとDBのセット、というような小さいインフラを目指したほうが良いと思います。
すべてクラウドだったとしても、クラウド上でセットを作って小さいインフラを維持したいです。
クラウドでさくっとサーバー作れるんだし、パッケージの塊でシステムを構成しましょう！
開発環境作るときにも便利だと思います！

##少ないインフラ
サービスを提供するコンポーネント数が少ないほうが障害が少なくなるのは当たり前の話。
3層アーキテクチャはもう廃れて、キャッシュやAPIのルーティングなどが当たり前になってきているのかもしれませんが、パッケージ化してセットにするイメージでインフラを構築すればCDNとWebはもうセットだから1つっていう暴論も有りだと思います。
大切なのは場当たり的な対応、その場しのぎの対応で余計な構成要素を増やさないこと。
これが大事だと思います。
過去にやったことがあります。

##狭いインフラ
影響範囲が狭いインフラ。
〇〇っていう作業をやるときにだいたい現れる影響範囲ガチ勢。
「影響範囲が読めないので作業は許可できません！」
影響範囲が広いインフラをまず疑いましょう。
想定外の影響が万が一発生したとしても、範囲を狭められるようなインフラを目指しましょう。
これはそれぞれの考え方の問題でもあるので強制はできませんが、私は不確実性に挑戦できる未来に居たいです。

#最後に
これらが達成されたインフラは障害が起きにくく、障害箇所の特定がしやすく、リカバリも容易で、把握も容易なインフラになるでしょう！たぶん！

全部個人的な見解です。異論は認めます！
Vue.jsのプロパティやウォッチャについて公式ドキュメントを抽象的に理解する3分クッキング

# はじめに
(※　この記事はVue.jsを初めて日が浅い自分へのメモが主な目的です。2020/4/24現在：執筆継続中です）
Vue.jsを初めてから、まだ日が浅いのでわからないことも多いです。
最近、使い分けに困り悩んでいたのがcomputedやmethodsなどについてです。
どちらも最終的にはviewの表示する値を変更することができますが、その使い分けがよく分かっていません。
ちゃんと使い分けできるようにしようと思い、公式ドキュメントを読んでみました。
使わない知識は普段から忘れて行きがちなので、迷った時に見返したいと思うのですが、公式ドキュメントをまた全部読み直すみたいなことはしたくないので、要点まとめて行こうと思っています。

理解が進むたびに追加していく予定です。

ちなみに使い分けや特徴、説明については既に執筆されている方がいらっしゃるので、お探しの方は[そちら](https://qiita.com/yukibe/items/f49fcb935363200916fe)をご覧ください。


#特徴
## computedの特徴
- 算出プロパティ
- 普通のプロパティと同じようにデータバインドできる
- 算出結果をキャッシュする
- 依存しているデータが変わるまではキャッシュから値が返る
- 依存データとはリアクティブな関係
- 呼び出す際に（）が不要
- （）が不要なため引数を伴う処理はできない
- defaultはgetter処理のみ
- 必要に応じてsetterが使える

```vuejs:computedの使用例
<template>
  <div>
    <p> {{ message }}</p>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      text: string,
    }
  },
  computed: {
    message() {
      return `Hello ${this.text}`;
    }
  },
}
</script>
```

## methodsの特徴
- 画面の再描画のたびに計算し直す。
- 算出結果をキャッシュしない
- 呼び出す際に()が必要
- 引数を伴う処理ができる
- getterもsetterもどちらにも使える

```vuejs:methodsの使用例
<template>
  <div>
    <p> {{ getMessage() }}</p>
  </div>
</template>

<script>
export default {
  methods: {
    getMessage() {
      return `Hello World`;
    }
  },
}
</script>
```


## watchの特徴
- computedと同じように依存データの変更によって再計算する
- リアクティブな関係
- 値を返却することはできない
- 依存するデータの変更に合わせて非同期処理をするといったcomputedでできない処理が可能

```vuejs:watchの使用例
<template>
 ...
</template>

<script>
export default {
  props: {
    userId: number,
  },
  data: function() {
    return {
      userName: string,
    }
  },
  watch: {
    userId: function() {
      await api.getUserName().then((res) => {
        userName = res.name;
      });
    },
  },
}
</script>
```
AppGoat：クロスサイト・スプリクティング


# クロスサイト・スクリプティングとは
悪意のある人が不正なスクリプトをウェブページに埋め込み、利用者がブラウザ上で不正なスクリプトを実行してしまい被害にあってしまう脆弱性のことを言う。
その他の脆弱性と組み合わせて使われてしまうこともある。

#脆弱性の原理
悪意のある人が不正なスクリプトを何らかの形で埋め込み、第三者が不正なスクリプトを実行することにより発生する。
埋め込みの方法、形式によって3種類に分類される。

#####反射型クロスサイトスクリプティング

ウェブアプリケーションがユーザから受け取った入力をそのままの形でウェブページの出力に利用していることが原因で発生する。
ウェブページの入力欄や、GET方式を採用している場合のURL中のクエリストリングから攻撃されうる。

#####格納型クロスサイトスクリプティング

攻撃者が入力した不正なスクリプトを、ウェブアプリケーションが内部に格納してしまうことが原因で発生する。
この場合、不正なスクリプトを格納したウェブページにアクセスしたすべてのユーザが被害を被る可能性がある。

#####DOMベースのクロスサイトスクリプティング

Webページに含まれる正規にスクリプトで動的にウェブページを操作した結果、意図しないスクリプトをウェブページに出力してしまうクロスサイト・スクリプティング
Javascriptのようにクライアントが動的にウェブページを生成する手段を用いている場合に発生しうる。
この不正な入力はサーバ側では実行されないという特徴がある。

# 脆弱性が悪用された際の影響
被害を受けるのはサーバ側ではなくユーザ側が主となる。

1. 本物のウェブサイト上に偽物のウェブページが表示される。
2. ブラウザに保存されているCookieを取得される。
3. 任意のCookieをブラウザに保存させられる。


# 検査方法
情報の入力欄にスクリプトを含んだ文字列入力し、そのスクリプトが実行されないかを確認する。
文字入力欄に限らず、GET方式で送信されるhidden属性の情報も対象である。
例えば、HTMLの場合 `'>"><hr>` と入力した際に水平線が表示されるようだと脆弱性が存在している。

# 対策方法
いずれも根本的な対策は入力された文字列をエスケープ処理をすることとなる。
他の言語に引き渡す前に適切なエスケープ処理を行うことで、DOMベースのクロスサイト・スクリプティングを防ぐことが可能である。
[Rails]画像アップロードの方法

# 必要なgem
・carrierwave
・MiniMagick

## 導入手順
####carrierwaveの導入

1.Gemfileに以下を記述する。

```
gem 'carrierwave', '~> 1.0'
```

忘れず実行する。

```
$ bundle install
```

2.CarrierWaveのアップローダーを作成する。

```
$ rails g uploader image
```

3.Userモデルのimageカラムと、先ほど作成したアップローダーImageUploaderと紐付けをします。

```user.rb
class Photo < ApplicationRecord
  ...
  mount_uploader :image, ImageUploader
end
```

#### MiniMagickの導入
1.imagemagickを開発環境にインストールする

```
$ brew install imagemagick
```

※cloud９の人はこちらのコマンド

```
$ sudo yum update
$ sudo yum install -y ImageMagick
```

2.Gemfileに以下を記述する。

```
gem "mini_magick"
```

忘れず実行する。

```
$ bundle install
```

3.app/uploaders/image_uploader.rbを修正する。
※修正する点は以下の３点です。
・4行目のすでに生成されているコードのコメントを外す
・「version :medium」というサイズを指定するコードを追加
・extension_whitelistメソッドのコメントアウトを外す

```image_uploader.rb

class ImageUploader < CarrierWave::Uploader::Base
  # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
  include CarrierWave::MiniMagick 
　# ここのコメントアウトを外す

  # Choose what kind of storage to use for this uploader:
  storage :file
  # storage :fog

  # Override the directory where uploaded files will be stored.
  # This is a sensible default for uploaders that are meant to be mounted:
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

  # Provide a default URL as a default if there hasn't been a file uploaded:
  # def default_url(*args)
  #   # For Rails 3.1+ asset pipeline compatibility:
  #   # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
  #
  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
  # end

  # Process files as they are uploaded:
  # process scale: [200, 300]
  #
  # def scale(width, height)
  #   # do something
  # end

  # Create different versions of your uploaded files:
  # version :thumb do
  #   process resize_to_fit: [50, 50]
  # end

  version :medium do
    process resize_to_fill: [1080, 1080]
  end
  # 上記の記述を追記する。

  # Add a white list of extensions which are allowed to be uploaded.
  # For images you might use something like this:

  # ここのコメントアウトを外す
  def extension_whitelist
    %w(jpg jpeg gif png)
  end

  # Override the filename of the uploaded files:
  # Avoid using model.id or version_name here, see uploader/store.rb for details.
  # def filename
  #   "something.jpg" if original_filename
  # end
end
```
#Ruby で バージョン番号 ( major / minor / patch ) の配列を並び替えてみる ( sort version numbers array )

文字列で並び替えるとうまくいかないので、ゼロ埋めして並び替える

```rb
versions = ["1.0.10", "1.0.9", "2.0.0", "1.0.1"]

# NG
versions.sort

# unexpected order
# => ["1.0.1", "1.0.10", "1.0.9", "2.0.0"]

converted_versions =
  versions.map do |version|
    major, minor, patch = version.split(".")
    {
      version: version,
      version_integer: format("%02d%02d%02d", major, minor, patch).to_i
    }
  end

converted_versions.sort_by { |version| version[:version_integer] }

# => [{:version=>"1.0.1", :version_integer=>10001},
#   {:version=>"1.0.9", :version_integer=>10009},
#   {:version=>"1.0.10", :version_integer=>10010},
#   {:version=>"2.0.0", :version_integer=>20000}]

# OK
converted_versions.sort_by { |version| version[:version_integer] }.map { |version| version[:version] }
# => ["1.0.1", "1.0.9", "1.0.10", "2.0.0"]

# OK
converted_versions.sort_by { |version| version[:version_integer] }.map { |version| version[:version] }.reverse
# => ["2.0.0", "1.0.10", "1.0.9", "1.0.1"]


```

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3085











<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
[初心者向け]Redux-Middlewareを学習したまとめ

# Redux Middleware

Redux MiddlewareとはReduxの機能を拡張する仕組み
- Actionログをとる（下記にあり）
- localstorageに保存する（下記にあり）
- 非同期処理を可能にする
- クラッシュレポートを送信する
- ルーティングを利用する
etc

## Actionログをとる
redux-loggerのインストール

```bash
$ npm install --save redux-logger
```

### 使い方

```jsx:index.js
// applyMiddleware追加
import { createStore, applyMiddleware } from 'redux';

// redux-logger追加
import logger from 'redux-logger';

const store = createStore(
  tasksReducer,
  // createStoreの第2引数に追加
  applyMiddleware(logger)
);
```

「http://localhost:3000/todo」のフォームから入力したり、
追加するとコンソール上にログが表示されるようになります。

### 高度な使い方

```jsx:index.js
// createLoggerに変更
import { createLogger } from 'redux-logger';

// 追加　INPUT_TASK以外のログを出すように指定
// ここでADD_TASKのみログが取れる
const loggerSetting = {
  predicate: (getState, action) => action.type !== 'INPUT_TASK',
};
const logger = createLogger(loggerSetting);
```

## localstorageに保存するミドルウェアを実装

cf.ミドルウェアの基本形

```js
// ミドルウェアの基本形
const middleware = store => next => action => {
  const result = next(action);
  return result;
};
```

```jsx:index.js
// localstorageに保存するmiddlewareをつくる
const storageMiddleware = store => next => action => {
  const result = next(action);
  // localstorageにtodos-stateというkey名で保存
  window.localStorage.setItem('todos-state', JSON.stringify(store.getState()));
  return result;
};
// 保存されているitemを取得
const savedState = JSON.parse(localStorage.getItem('todos-state'));

// middlewareを登録する
const store = createStore(
  tasksReducer,
  // 追加
  savedState ? savedState : tasksReducer(undefined, { type: 'INIT' }),
  applyMiddleware(logger, storageMiddleware)
);

```

### middleware集約

```jsx:index.js
// middleware集約
const middlewares = [ logger, storageMiddleware ];

const store = createStore(
  //...省略
  // スプレッドオペレーターで登録
  applyMiddleware(...middlewares)
);
```

# プロジェクトダウンロード&起動

```bash
$ git clone https://github.com/dai-570415/react-redux-middleware-app.git

$ cd react-redux-middleware-app

$ npm install

$ npm start
```
C#でメール送信する

mailkitを使います。
Visual StudioのNuGetパッケージ管理画面で「MailKit」を検索してインストールする

```mailtest.cs
var host = "smtp server name";
var port = 25 or 465 or 587;

using (var smtp = new MailKit.Net.Smtp.SmtpClient())
{
    try{
        //開発用のSMTPサーバが暗号化に対応していないときは、次の行をコメントアウト
        //smtp.ServerCertificateValidationCallback = (s, c, h, e) => true;
        smtp.Connect(host, port, MailKit.Security.SecureSocketOptions.Auto);
        //認証設定
        smtp.Authenticate("id", "password");

        //送信するメールを作成する
        var mail = new MimeKit.MimeMessage();
        var builder = new MimeKit.BodyBuilder();
        mail.From.Add(new MimeKit.MailboxAddress("", "送る人のメールアドレス"));
        mail.To.Add(new MimeKit.MailboxAddress("", "配信先のメールアドレス"));
        mail.Subject = "メールタイトル";
        MimeKit.TextPart textPart = new MimeKit.TextPart("Plain");
        textPart.Text = "メール本文";
        string filename = "添付ファイルの名前";
        //添付ファイルがあった時の処理
        if (!string.IsNullOrEmpty(filename))
        {
            var filePath = Server.MapPath("~/App_Data/doc/" + filename);
            var mimeType = MimeKit.MimeTypes.GetMimeType(filePath);
            var attachment = new MimeKit.MimePart(mimeType);
            using (var file = File.OpenRead(filePath))
            {
                attachment.Content = new MimeKit.MimeContent(file);
                attachment.ContentDisposition = new MimeKit.ContentDisposition();
                attachment.ContentTransferEncoding = MimeKit.ContentEncoding.Base64;
                attachment.FileName = Path.GetFileName(filePath);
                var multipart = new MimeKit.Multipart("mixed");
                multipart.Add(textPart);
                multipart.Add(attachment);
                mail.Body = multipart;
                //メールを送信する
                smtp.Send(mail);
            }
         }
         else
         {
            var multipart = new MimeKit.Multipart("mixed");
            multipart.Add(textPart);
            mail.Body = multipart;
            //メールを送信する
            smtp.Send(mail);
         }
    }
    catch(Exception exception)
    {
         Console.WriteLine(exception.Message);
    }
    finally
    {
    //SMTPサーバから切断する
    smtp.Disconnect(true);
    }
}


```
多分コピペで行けるはず