OmniAICreator/Qiita-1.07M huggingface dataset:
TeXの導入

#はじめに
自分用メモです。
デスクトップPCにtexを入れました。
windows10です。

いろいろなサイトをみてみたのですが、TeX Liveを入れました。
TeX インストーラ３
を使ったり、
Visual Studio Code
も一緒にインストールしたりしてる人もいたんですけど、
texとlatexの違いもいまいちわからんので　(;^_^A）
まあとりあえずtex liveだけ入れます。


#インストールの仕方
以下のURLからinstall-tl-windows.exeを選択します。
http://www.tug.org/texlive/acquire-netinstall.html

保護がどうたらって警告がでたけど気にせず進みます。

インストールします
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661791/0d2cf47a-64d8-cec5-10c9-691ab19a132b.png)


かわいい*ଘ(੭*ˊᵕˋ)੭*
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661791/6c843ec4-c54f-5f3a-7e45-b61d0923a130.png)


高度な設定も一応見てみたけどまあそのままインストールでおけ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661791/71040aa8-ccdf-d963-2e84-3c757fdeccaa.png)


とおもったらウイルス対策ソフトに止められました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661791/dd14979c-6e5c-979c-5f72-0923052c8bdd.png)


許可したつもりなんだけどインストール止まっちゃったので不安になり、
C直下のtexliveのファイルを消してもう一回入れなおしました。

インストールに一時間ぐらいかかるらしいのでお出かけしました。
帰ってきたらインストール終わってました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661791/5a63de5d-9dd6-4d10-93c8-306eed0bf32b.png)

さて使えるようになってるといいんですが。

よくわからんけどエディタが入ったのでこれでなにかを書いてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661791/9b7bf5d0-af8f-27aa-f25f-d9c59fec2adc.png)
こんな感じで書くと下の出力になる。
上の方のdocumentclassとかusepackageとかはよくわからんでござるｗｗｗ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661791/72d59be2-188c-d26d-1311-a872a2df2fa0.png)
コンパイルできたしpdfにもできそうですね。



texworks editorはシンプルだけど微妙かも。
｛を１コ開いたらもう一コ自動で出たりしたり、行番号あったらいいなって思いました。
あと記号とかマウスで選択できると楽かなあ。

この辺は要検討です。
TeXStudioがいいっぽいとかどうとか。


まあ赤ちゃんなのでよくわかりませんが、とりま今日はこの辺で。
rawイメージファイル形式のNTFSボリュームから任意のファイルをダンプする

# Overview

フォレンジックをする際には EventLog や $MFT など, rawイメージからファイルを抜き出す作業が必須です.

[VirtualBox - 仮想マシンをrawイメージ形式にダンプする](https://qiita.com/sumeshi/items/8e2791a326d8dd505f74)

[FTK Imager](https://accessdata.com/products-services/forensic-toolkit-ftk/ftkimager)や [Autopsy](https://www.autopsy.com/) などGUIソフトウェアは非常に高機能ですが作業の自動化が難しく, そのため, [The Sleuth Kit](https://www.sleuthkit.org/sleuthkit) などのCUIツールを用いる必要があります.

しかし, パスが判明している特定ディレクトリ内のファイルアドレスを調査して複数のファイルをダンプするためには, 複数のコマンドを使用する必要があり煩わしいと思い, The Sleuth Kitのwrapperである[ntfsdump](https://github.com/sumeshi/ntfsdump)を作成しました.

# Usage 

```
$ ntfsdump /path/to/dump/target --output-path ./out ./path/to/your/imagefile.raw
```

## Example
ターゲットディレクトリは　`$MFT` のようなファイル名でも,
`/Windows/System32/winevt/Logs` のようなディレクトリ名でも動作します.

ディレクトリ名が指定された場合にはそのディレクトリパス配下のファイルを再帰的にdumpします.

```
$ ntfsdump /Windows/System32/winevt/Logs -o ./dump ./path/to/your/imagefile.raw
```

ダンプした `.evtx`, `$MFT`, `.pf` ファイルを調査する際には

https://github.com/sumeshi/evtx2es
https://github.com/sumeshi/mft2es
https://github.com/sumeshi/prefetch2es

を使っていただけると嬉しいです.  
また, なかなか改修に手が回らないこともあり, IssueやPRなどいただけると助かります.

## Required Dependencies
このソフトウェアの動作にはSleuthKitのインストールが必要です.

https://www.sleuthkit.org/sleuthkit/

```
$ brew install sleuthkit
```

# Installation

```
$ pip install ntfsdump
```

# TBA

- ~~findのようにファイル名からパスを探索するためのコマンドも作成予定です.~~

**2020.07.11追記**
別コマンドとして追加しました

```bash
$ pip install ntfsfind
```

検索するときには正規表現で検索します
下記は `.evtx` 形式のファイルを検索するコマンドです.

```
$ ntfsfind '.*\.evtx' /path/to/your/imagefile.raw
```

手元で試した検索速度は60MBのMFTで1秒前後でした.

速くはないですが, パスをど忘れしたときに使う程度なら必要十分です.
pickleなどでキャッシュすれば多少早くなりますが, ゴミファイルを増やしたくないのでとりあえずはこのまま.

ガッツリ何度も中身を検索したいときには [mft2es](https://github.com/sumeshi/mft2es) でElasticsearchにぶん投げてKibanaから検索かけるほうが手っ取り早いです.

**2020.07.26追記**
パイプで渡せるようにしました

```
$ ntfsfind '.*\.evtx' /path/to/your/imagefile.raw | ntfsdump /path/to/your/imagefile.raw
```
お絵描きボード

# Tkinterを用いてお絵描きボードを作る！
授業の中で扱った教科書の中のLesson7-3をプログラミングした際に、この描画を連続で行えば線を描けるのではないかと思っていたのを、調べながら形にしました。
___
#### Lesson7-3との違い

- 教科書では、クリックという動作で円を描くことをプログラミングしていたが、今回はマウスボタンが押されている間ずっと描画されていること。
- 線を描くには描画される円が大きいと不自然になるので、なるべく小さい円を描画することでより自然な線を描けるようにしたこと。

___
# コード紹介
実際にプログラミングしたコードを紹介します。

```python

import tkinter

def mouse_click_func(event):
    global press

    press = True
```
まず、ここでマウスボタンをクリックすることを定義します。

```python

def mouse_release_func(event):
    global press

    press = False
```
次に、マウスボタンを離すことを定義します。

```python

def mouse_move_func(event):
    global canvas

    x = event.x
    y = event.y

    if press:
        canvas.create_oval(x - 2, y - 2, x + 2, y + 2, fill = "white", width=0)
```
そして最後に、マウスを動かしている場合で、かつボタンを押し続けているときに円を描画することを定義します。
___
#### コードを製作するにあたって
連続的に円を描画するにはボタンのON　OFF　だけではなくONかつマウスが移動しているという**３パターンの場合分けが必要**なのです。
私は初め、ボタンを押しながらマウスを動かす・ボタンを離すの２種類で考えていたのですが、どうしたらいいのかわかりませんでした。
そこで、サイトを参照するとボタンのON　OFFでまずpress の　true　false　を決めているのを見て、「なるほど」と感動しました。

___
#　実行結果
黒板風にしてみた！
<img width="954" alt="2020-07-10 (3).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638183/11048fec-7965-c835-a453-159ade48507f.png">


___

# 改善点１

素早くマウスを動かすときれいな線でなくなってしまう
<img width="953" alt="2020-07-10 (2).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638183/8aaee900-4c30-2c0a-3913-f44ea2c48ef5.png">
これはパソコンの処理の問題なのであろうと思われる。点を連続で絵がぐ方法ではない方法なら改善できるかもしれない。
___
# 改善点２

一度間違うと消すことが出来ない。マウスボタンを押すか押さないかで点を描くかどうかが決まっているので、点を消すという動作を行うための定義が足りなくなってしまう。
マウスボタンを押す前に何かで場合分け出来たら消しゴムも可能になるのかもしれない。

___
# 感想

プログラミングに触れるのは初めてだったので難しい部分もあったが、楽しく取り組めた。興味がわいたので、自主的に取り組んでみようと思う。

___
- 参考

pythonでTkinterを使ってGUIアプリを作る
[https://daeudaeu.com/programming/python/tkinter/python_tkinter/]

いちばんやさしいPython入門教室　　　　　著　大澤　文孝
VirtualBox - 仮想マシンをrawイメージ形式にダンプする.

# Overview

通常, Virtualboxの仮想ハードディスクイメージは `.vdi` 形式になる.

デジタルフォレンジックでは証跡を汚さないためにOSを起動させずに調査を行うのが一般的なため, まずはハードディスクを保全する必要がある.

しかしVirtualBox環境ではSnapShotを取るなどしてイメージが複数に分割されてしまっており, そのままでは [FTK Imager](https://accessdata.com/products-services/forensic-toolkit-ftk/ftkimager)や [Autopsy](https://www.autopsy.com/) で読み込むことができない. (たぶん)

# Command
virtualboxの場合はコマンドがあるので備忘録.

```bash
$ vboxmanage clonehd /path/to/your/snapshot.vdi ./out.raw --format raw
```

ちなみに, 最も新しいスナップショットを見つけるには

```
$ vboxmanage list hdds | grep VmName | tail
```

が良いそうです.

# References
[Quickest way to merge snapshots in VirtualBox?](https://superuser.com/questions/590968/quickest-way-to-merge-snapshots-in-virtualbox)
【Vue.js】スライダーのぽちぽちのカラーを変えたい［carouselのpagination］

carouselのpaginationの色を変えたくて 小一時間/ひとぽち くらいは使ったかなと思うのでまとめます。

# どこ
この例でいうところの
![スクリーンショット 2020-07-10 1.44.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410392/2e43b465-7b28-6ac3-61e4-0daf6d46b2f7.png)
真ん中の
![スクリーンショット 2020-07-10 1.45.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410392/5056ee1d-91cf-fec4-bea7-826e0682d7d4.png)
下のここ！ です。
![スクリーンショット 2020-07-10 1.44.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410392/c1aa37be-0daf-a53c-fec0-7dbdd78e9ae9.png)
簡単に変えられそう？ と思ったら、この情報へのたどり着き方がわからなくて「もうこのぽちぽちのこと考えるのやめようかな」って思うところだったり、そうでもなかったりしました。

【参考】[vue-carousel v1.0.5](https://fengyuanchen.github.io/vue-carousel/)


## うまくいった例

```html
  pagination-color="#ffffff"
  pagination-active-color="red"
```
`pagination-color` はノンアクティブのぽちぽち。
`pagination-active-color` はアクティブになっているスライドのぽち。
なお、色の書き方はお好みです。

下記のような形でスライド１枚１枚が作成されていて、`carousel` の後にカスタマイズしたい情報を詰め込めるようになっていますね。他と同様に、このなかで指定します。

```html
<carousel
  :per-page="1"
  :navigation-enabled="true"
  navigation-prev-label="〈"
  navigation-next-label="〉"
  pagination-color="#ffffff" 
  pagination-active-color="red">
  <slide>
    <div class="slide1">１枚目！</div>
  </slide>
  <slide>
    <div class="slide2">2枚目！</div>
  </slide>
  <slide>
    <div class="slide3">3枚目！</div>
  </slide>
</carousel>
```

以上でちゃんと色がつく、はずです。

## うまくいかなかった例

ちなみに、私は最初以下のように書いていて、

```
paginationColor="#ffffff"
paginationActiveColor="red"
```

consoleに教えられました。

```
Prop "paginationcolor" is passed to component <Anonymous>, but the declared prop name is "paginationColor". Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. You should probably use "pagination-color" instead of "paginationColor".
```

## 参考 
ぽちぽち以外にもできることがはたくさんありますが、なんとしてもぽちぽちを自分色に染めたかったので記事にしました。以下のような感じで、他のカスタマイズもGitHubにまとまっています。

| Property | Type | Default | Description |
|---|---|---|---|
| paginationActiveColor | String | #000000 | The fill color of the active pagination dot. Any valid CSS color is accepted. |
| paginationColor | String | #efefef | The fill color of pagination dots. Any valid CSS color is accepted. |

【参考】[SSENSE/vue-carousel - GitHub](https://github.com/SSENSE/vue-carousel)

# さいごに

この記事が参考になることがあればうれしいです。
[Unity Editor拡張]ゲーミングUnityを作った

# はじめに
ゲーミングUnityとは、皆さんご存じのゲーミングPCが七色に光るアレのUnityバージョンです
Editor拡張を使用して作成しました
~~開発効率が上がるとかそういう内容は一切ありません~~

# 結果
![demo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291107/418a6f2c-5539-7ffe-cb09-673378415ad0.gif)

# ダウンロードはこちら
unitypackageになっています

https://github.com/kyourikey/GamingUnityEditorExtension/releases

# 環境
* Windows 10
* Unity 2018.4.19f1

# 解説
やっている事はシンプルです

1. ウィンドウを作成して表示
1. 虹色グラデーション画像をスクロールさせながら表示
1. UpdateでRepaintを呼び再描画

# おわりに
短いコードで気軽に作れるので、皆さんもEditor拡張でUnityの見た目を自分好みにカスタマイズしちゃいましょう！

# おまけ
以前私が書いたEditor拡張の記事です
今回作ったものと近い内容なので、興味が有ればこちらもどうぞ！

* UnityEditor拡張でグラフを描く際に使用したメソッドの解説
    * https://qiita.com/kyourikey/items/7a5f693d1fe17bde5387

こんな感じのUIがUnity上に表示できるEditor拡張です
![CircularRotation.gif](https://qiita-image-store.s3.amazonaws.com/0/291107/6ed908a1-2e9d-93d2-d37e-e06ea787c753.gif)

# 参考サイト
* Unity - スクリプトリファレンス - EditorWindow.Show
    * https://docs.unity3d.com/ja/current/ScriptReference/EditorWindow.Show.html
* Unity - スクリプトリファレンス - GUI.DrawTexture
    * https://docs.unity3d.com/ja/current/ScriptReference/GUI.DrawTexture.html
* Unity - スクリプトリファレンス - EditorWindow.Repaint
    * https://docs.unity3d.com/ja/current/ScriptReference/EditorWindow.Repaint.html
エクセル　消費税　端数処理　関数

TL;DR INT関数で良い

請求書の処理などで消費税を計算する際
以下の方法があると思います。
・単純に*0.1→デフォルトは四捨五入
・ROUND→四捨五入　
・ROUNDDOWN→切り捨て
・FLOOR→切り捨て
・INT→切り捨て
・ROUNDUP→切り上げ
・CEILING→切り上げ

まず方針としては国税庁の方針に従い小数点以下切り捨てとします。
https://www.nta.go.jp/taxes/shiraberu/taxanswer/shohi/6371.htm

通常の掛け算でも切り捨て設定はできると思いますが不安なので下記関数に絞ります。
・ROUNDOWN→切り捨て
・FLOOR→切り捨て
・INT→切り捨て

どれも切り捨て関数なのでややこしいですが、
消費税は小数点以下を切り捨てるだけでいいので
少数点以下切り捨て業者のINTで良いと思います。
他は桁数の指定をしないといけないので若干手数が増えます。
Rubyのメソッドについて

# プログラミングの勉強日記
2020年7月10日　Progate Lv.165
RubyⅢ

#メソッドとは
　複数の処理を1つにまとめたもの。`def メソッド名`と`end`の間にまとめたい処理を書くことでメソッドを作成できる（＝定義する）。
　メソッドの呼び出しはメソッド名を書くことで行う。

```ruby:index.rb
def introduce
  puts "Hello World"
end
#メソッドの呼び出し
introduce
```

```:コンソール
Hello World
```

#引数
　引数はメソッドに与える情報追加みたいなもの。`def メソッド名(引数)`で引数の指定ができる。引数を渡してメソッドを呼び出すには`メソッド名(値)`とする。

```ruby:index.rb
def introduce(name)
  puts "こんにちは"
  puts "#{name}です"
end
introduce("田中")
introduce("山本")
```

```:コンソール
こんにちは
田中です
こんにちは
山本です
```

<font color=blue>※引数のあるメソッドでは引数を渡さないと呼び出せない</font>

##複数の引数
　括弧の中に受け取る引数をコンマ`,`で区切って並べることで複数の引数を使える。左から順番に第1引数、第2引数という。

```ruby:index.rb
def introduce(name, age)
  puts "#{name}です"
  puts "#{age}歳です"
end
introduce("田中",17)
``` 

#メソッドのスコープ
　スコープはその変数が使える範囲のこと。メソッドを定義するときに用意した引数はそのメソッドの中(def~end)でしか使えない。メソッドの中で定義した変数もそのメソッドの中(def~end)でしか使えない。


#戻り値
　呼び出し元で受け取る処理結果を戻り値といい、このことを「メソッドが戻り値を返す」という。メソッドの中で`return`を使うことで、呼び出しもとで値を受け取れる。
　<font color=blue>returnは戻り値を返すだけでなく、メソッドを終了させる性質も持つ。</font>

```ruby:index.rb
def add(a, b)
  #a+bの値が戻り値として呼び出し元に戻る
  return a+b
end
sum=add(1, 3)
puts sum
```

```:コンソール
4
```

戻り値は真偽値を返すこともできる。この場合、メソッド名の末尾に`?`をつける。

```ruby:index.rb
def negative?(number)
  return number<0
end
puts negative?(5)
```

```:コンソール
false
```

#キーワード引数
　引数の値が多くなると、呼び出し側で分かりにくくなってしまうので、キーワード引数で呼び出し側で引数を明記する。
　通常のメソッドに加えて、①定数側で引数の後にコロンを付ける、②呼び出し側で値の前に引数名を書く。この2点をすることで、キーワード引数を持つメソッドを書ける。

```ruby:index.rb
def introduce(name:, age:, height:)
  puts "私は#{name}です"
  puts "#{age}歳です"
  puts "身長は#{height}cmです"
end
introduce(name:"田中", age:17, height:176)
```

```:コンソール
私は田中です
17歳です
176㎝です
```
(1分で決める)empty?とblank?とpresent?の使い分けについて

（備忘録）説明最小限にしてすぐ使用できるようにまとめた。（結論）blank?かprresent?をどっちか覚えとけば何とかなる。

## empty?を使う時は
**下記の条件を満たしたうえで中身が空であるか知りたいときに使用。**
①必ず入れ物が存在していること
②中身が数字やtrue,falseでないこと

```ruby
  if box.empty?
```
①②を満たさない場合は NoMethodErrorが生じる。


## blank?を使うときは
**中身が空orそもそも存在しているかを知りたいときに使用**

```ruby
 irb(main):001:0> box = nil
=> nil
irb(main):002:0> box.blank?
=> true
```

## present?を使用するときは
**存在していてかつ中身が空ではないことを知りたいときに使用（!blank?と同義）**

```ruby
irb(main):006:0> box = nil
=> nil
irb(main):007:0> box.present?
=> false
```

## もう少し詳しく知りたい、この場合はどうすればいいの？ってときは
https://qiita.com/go_d_eye_0505/items/541110cb9821734b0623

表形式でパターンを網羅しているのでわかりやすかったです。
【Windows10】マウスポインターが消えてしまう現象

マウスポインターが消えてしまう現象。
最近ちょくちょく遭遇するようになりその都度再起動していたのですが、漸く発生条件がわかりました。

# 再現手順

1. Windows10環境でcygwinを使っている。
2. cygwinウインドウにマウスポインターを移動するとマウスカーソルに変わる。
3. しばらく待つとマウスカーソルが消える。
4. この状態で仮想画面を変更する。キー操作で切り替わるのが要点。
5. 現象発生！

# 対処方法

1. cygwinがある仮想画面に切り替える
2. cygwinウインドウ上にマウスポインターを移動する。
3. 復活！

# 備考

気になってDOS窓でも確認しました。cygwinのようにマウスポインターは消えないので、問題は発生しません。
何か動くもの(範囲広め)を作った

# 私の心境
なんか動くもの・・・？
___

課題でPythonを使い何か動くものを作れと言われ、自分で少し考えたけど何も浮かばない…
過去のものを見てみる
[シューティングゲーム](https://qiita.com/ell/items/f0f74865c07710f1eab8)
[ブロック崩し](https://qiita.com/Yt330110713/items/ed6beb74c02515b35248)
など
___

## 難しそう
結論：どれも難しそうである。
___

## 自分自身との決闘
ちょっとでも動けばそれは何か動くものになる。
**しかしそんなのでいいのか**
もっとQiitaの文章を参考にして立派なものを作らないでいいのか
自分の中で決闘が行われた
___

## もっと探してみる
いいのが見つかった！
(Python初心者でググった笑)
**[タイマーの作り方](https://www.sejuku.net/blog/73265)**
初心者の私にも作れそう！！
(見栄を張ってすごいやつを作るのはやめた)
タイマー作っていく
___

# タイマーアレンジしていく
本家はタイマーの最後星だけど文字だけにする
(みみっちい)
___

## CODEだよ
```python
from time import sleep
print("3秒後に文字が出ます。")
sleep(3)
print("時間ですよ")
```
___

## 説明
今回timeモジュールを使っています
**timeモジュール**とは時間を扱うことができるモジュールのことです
そのモジュールにはいろんな関数があって今回はsleep関数というのを使ってて
**sleep関数**はタイマーの制御ができて、今回3秒止まっててねという意味になってます
___

## 動かしてみた
![ezgif.com-video-to-gif (6).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638196/3466f547-9ee2-4ff6-5502-cc85c5a4b5c5.gif)
___

## よくない？
自分でもできたという達成感(早い)があったのでもっとしてみたいと思い記事をめっちゃ参考にする
___

# もっと進化させるよ！
記事のcodeを見て、文字と秒数を変える

```python
from time import sleep
 
target_time = 5
 
def count_up(secs):
    for i in range(0,secs):
        print(i)
        sleep(1)
    print("時間だよ★")
 
 
count_up(target_time)
```
___

## 説明
``def count_up``とは時間をカウントアップする関数のことです。
defから先の名前が関数の名前で、自分で関数を作れるのです。
これは1秒ごとにプリントしていき、数えているように書いてあるのである。
___

## 動かしてみた
![ezgif.com-video-to-gif (7).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638196/aa546192-b037-7dbb-ece1-8717ca74342a.gif)
___

## うれしい
動いてうれしい
___

# tkinterに表示させたい
オリジナリティ()を出したいと思いtkinterを使って表示させてみたいと思う
___

## codeだよ
```python
import tkinter as tk

from time import sleep

target_time = 5

def up_timer(secs):
    for i in range(0,secs):
        print(i)
        sleep(1)
    print("時間だよ★")

up_timer(target_time)

root = tk.Tk()
root.geometry("400x150")
root.title("タイマー")
root.mainloop()

canvas =tk.Canvas(root, width =400, height =150, dg="white")
canvas.place(x = 50, y = 50)
canvas.create_text(0, 0, print)

root.mainloop()
```
___

## 結果
無理でした　
ぴえん
<img width="960" alt="2020-07-10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638196/a21c1748-9220-6994-3c5f-f639ec84ae7e.png">
___

# 考察＆感想
文章をtk_interで表すの難しいのではないかと思う...(考え不足かも)
少し変える！とか、教科書や、ネットのものを参考にするのは簡単にできるが、1から自分で考えてつくることや、関数を自分で作るのは私には厳しい世界だった。
しかし今まで自分から作ろうと思ったことがなかったので良い機会であったし、いつかはアプリなども作りたいと思った。
___

## 参考にしたもの
[シューティングゲーム](https://qiita.com/ell/items/f0f74865c07710f1eab8)
[ブロック崩し](https://qiita.com/Yt330110713/items/ed6beb74c02515b35248)
[タイマーの作り方](https://www.sejuku.net/blog/73265)
いちばんやさしいPython入門教室
(ソーテック社、著:大沢文孝)
Docker for WindowsでLaradockのpostgresの起動に失敗する時の振り返りシート

# はじめに
```bash
$ docker-compose up -d postgress
Starting laravel-sns_postgres_1         ... done 
```
と一見__doneしてるから大丈夫に見えるが...。__

```bash
$ docker-compose ps
             Name                           Command                State     Ports
----------------------------------------------------------------------------------
laravel-sns_postgres_1           docker-entrypoint.sh postgres    Exit 1
```
即終了してる...。というときの備忘録。
１つずつためして、再起動をかけて確認すること。

# 対策
## 各db.shの改行コードを変更
`laradock/postgres/docker-entrypoint-initdb.d`内の各*.shファイルの改行コードを__CRLF__から__LF__へ変更し保存。

該当ファイルは以下

* init_sonarqube_db.sh
* init_confluence_db.sh
* init_gitlab_db.sh
* init_jupyterhub_db.sh

## docker-compose.ymlのvolumesを変更
```yml:docker-compose.yml
    postgres:
      build: ./postgres
      volumes:
        # - ${DATA_PATH_HOST}/postgres:/var/lib/postgresql/data
        - ${DATA_PATH_HOST}/postgres:/var/lib/postgresql/
```

## .envのDATA_PATH_HOSTを変更

```text:.env
# DATA_PATH_HOST=~/.laradock/data
DATA_PATH_HOST=../data
```
Rails6 + Bootstrap4.5でドロップダウンが機能しない

以下解決プロセス

application.html.erbの<head>タグ内に
以下を挿入

```
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
```
            
/app/assets/javascript/application.jsがないよと言われるようになるので

/app/assets/javascript/application.js
を作成し以下を記述
（Rails 6ではデフォルトでこの場所にapplication.jsがない）


```
//= require jquery3
//= require popper
//= require bootstrap
```

これだけだとapplication.jsがassets pipelineに含まれてないとエラーがでるので

/app/assets/config/manifest.js

```
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link application.js # ココを追記
```
これでドロップダウンメニューが機能するようになりました

Bootstrapではないですがこちらを参考にしました
[Rails6でSemanticUIのJavaScriptを読み込む方法（ドロップダウン・アコーディオン等を使いたい！） - Qiita](https://qiita.com/tatehito/items/89dff4a42f0819f1371a)
効果的な簡単のWebサーバセキュリティ対策「Tomcat編」

「効果的な簡単のWebサーバセキュリティ対策」の第2弾です。今回の主人公はApache Tomcatです。

Apache Tomcatは、Java ServletやJSPを実行するためのWebコンテナです。

しかし、今Javaで新しい開発されたウェブアプリケーションの多くはSpringに使用している、Spring自分はWebServerがあるので、だからすべてのJavaウェブアプリケーションがTomcatを使用しているわけではありません。正直、もしSpringを使っての開発しているのウェブアプリケーションは、そのセキュリティ対策と我々はインフラエンジニア何も関係ない。我々インフラエンジニアはただの正しい権限ユーザーに実行することだけだ。

でも、Tomcatを使ってのJava Webアプリケーションを実行するの場合は、サービス安全のために、ある程度のセキュリティ対策をしなければなりません。これは、確かに我々インフラエンジニアの役割です。

正直に言えば、Tomcatのセキュリティ問題はとでも厳しいです。ここまで数年間、Tomcatは非常に深刻なCVEセキュリティ脆弱性をたくさん確認されました。

ですから、セキュリティ対策を講じることが何よりも重要だ。

# セキュリティ対策前提条件

**`root`ユーザーとしてTomcatを実行することはいけません。**

これは基本的な常識です。

一般的に、新しいログインできないのノーマルユーザーを作成して、そしてそのユーザーでTomcatを実行します。

# 最新バージョンのTomcatを使用する

最新バージョンのTomcatを使用しなければならない。

先にも話しましたが、この数年間、Tomcatは非常に深刻なCVEセキュリティ脆弱性をたくさん確認されました。

最新バージョンのTomcatを使用すれば、これらの脆弱性が悪い人を悪用されるのを防ぐことができます。

# 別のTomcatセキュリティ設定

それでは、Tomcat別のセキュリティ設定を始めましょう。

## Nginxを使ってTomcatをリバースプロキシします

近年發見したのTomcat CVEの脆弱性のうち、TomcatのWebServerモジュールにいくつかの脆弱性が發見しました。

ほとんどの悪用攻撃は、標準外のHTTPパケットを構築してTomcatをに攻撃します。

そのためには、Tomcatの設定を変更して外部からのアクセスを禁止するが必要だ。すべての外部からのアクセスはNginxに処理します。

Tomcatのインストールフォルダで、confフォルダー中の`server.xml`ファイル内の設定に変更する:

    <Connector port="8080" protocol="HTTP/1.1" address="127.0.0.1"  // <-- ただここで「address="127.0.0.1"」に追加する
    maxHttpHeaderSize="8192" URIEncoding="UTF-8" // その他のパラメータただの参考です
    maxThreads="500" minSpareThreads="25" maxSpareThreads="75"
    enableLookups="false" redirectPort="8443" acceptCount="100"
    connectionTimeout="10000" disableUploadTimeout="true" />

そして、今我々は「AJP」連続方法はほとんど使わないので、「AJP」連続方法を無効化します：

    <!-- <Connector port="8009" protocol="AJP/1.3" redirectPort="8443" /> -->

より安全にしたい場合は、SHUTDOWNの設定を変更することもできます:

    <Server port="8005" shutdown="0c65e353a4df5c5e748626dd535a9c8b">

ここの「0c65e353a4df5c5e748626dd535a9c8b」はあなたが好きの内容を書かてもいい。

## エラーページをカスタマイズしてTomcat関連の情報を非表示にする

この設定を変更するの理由は、攻撃者から特定のバージョンTomcatの脆弱性に対する攻撃を防ぐ。

つまり、なるべく攻撃者を混乱させる。

それをために、Tomcatのインストールフォルダで、confフォルダー中の`web.xml`ファイル内の設定に変更する:

    <error-page>
          <error-code>400</error-code>
          <location>/400.html</location> //<-- お気に入りのページを自由に選択
    </error-page>
    <error-page>
          <error-code>500</error-code>
          <location>/500.html</location> //<-- お気に入りのページを自由に選択
    </error-page>
    <error-page>
          <exception-type>java.lang.Exception</exception-type>
          <location>/error.html</location> //<-- お気に入りのページを自由に選択
    </error-page>
    <error-page>
          <exception-type>javax.servlet.ServletException</exception-type>
          <location>/error.html</location> //<-- お気に入りのページを自由に選択
    </error-page>

ここでは、別のWebServer（Microsoft IISなど）のデフォルトのエラーページを模倣したエラーページを使用することもいい。

カスタムエラーページは、Tomcatインストールフォルダの`webapp`フォルダ、または`WebContent`ルートフォルダ、この２つフォルダどちらも大丈夫です、好きにフォルダを置きろう。

## Tomcatの管理ページを無効化

本番環境では、Tomcatの管理ページは何の役にも立ちません。 そこで、管理ページへの不正アクセスを防ぐために、全部削除します。

1. `webapps`フォルダ内の`Tomcat`フォルダの内容を全て削除します。
2. 「conf/Catalina/localhost/」フォルダ中、「`host-manager.xml`」と「`manager.xml`」この２つファイルを削除します。

# 結論

お気づきの方もいらっしゃると思いますが、Tomcatのセキュリティ対策として最も効果的なのは、タイムリーに最新版にアップグレードすることです。

その先にあるのは、攻撃者が間違った判断をするために、できるだけ多くの情報を難読化することです。

それ以外、私たちができることほとんどないです。
WP REST APIで記事データ（JSON）を返す、JSONエンコードがうまくいかない時

参考にさせていただいたサイト
https://gist.github.com/yuichi-e/b0254546a80016b29accaad1c2fa73ae
ありがとうございます。

#WP REST APIで jsonが返せない！？
WP REST APIは、記事データを含んだレスポンスをwp_json_encode()関数でjson化して返しているようです。
このjson化がなんだかうまくいかずに記事データを返すことができませんでした。

そこで、自作エンドポイントを作って、json_encode時にオプションでエスケープを追加したら、うまいことjsonデータを返すことができました。
[前回の記事](https://gist.github.com/yuichi-e/b0254546a80016b29accaad1c2fa73ae)

なので、WP REST APIのエンドポイントでもjsonを返せるように、wp_json_encode()関数を編集して、オプションを追加したら。。。

```php:~/wp-includes/functions.php
function wp_json_encode( $data, $options = JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP | JSON_UNESCAPED_UNICODE, $depth = 512 ) {
```

無事に、JSON形式で記事を返すことができました。

次は、セキュリティの見直しをしてみます。
MySQL8.0をyumでインストールする！CentOS7に！

作業環境
・CentOS7


##1. 既存でリポジトリ入れてたら消す

①リポジトリ確認

```
# yum list installed
```

②↑でパッケージ名を確認して、mysqlのリポジトリあったら消す。

```
# yum remove パッケージ名
```

▼yumのコマンド集（気になったら見てね）
参考：https://kazmax.zpp.jp/linux_beginner/yum_remove.html

##2. MySQLの公式からyumリポジトリを探し
下記ページから、リポジトリのURLをコピーする。
https://dev.mysql.com/downloads/repo/yum/

①ダウンロードボタンクリック
![Image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282676/5ff128d3-c5f7-125f-0d18-0e96b7bdd271.png)
②右クリックしてコピー
![Image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282676/254e0190-916f-0df4-404a-8c2fb59653cc.png)

##3. リポジトリを追加する
```
例）※下記コマンドのhttp://dev.mysql.com/get/mysql57-community-release-el6-8.noarch.rpmの部分は2.でコピーしたURL
# yum install http://dev.mysql.com/get/mysql57-community-release-el6-8.noarch.rpm
```
##4. インストールして確認
①インストール

```
# yum -y install mysql-community-server
```
②バージョン確認

```
# mysqld --version
/usr/sbin/mysqld  Ver 8.0.20 for Linux on x86_64 (MySQL Community Server - GPL)
```

おわり！
TECH CAMP学習　個人アプリ作成②

# deviseを使用して、ユーザーモデルを作成

個人アプリ作成でdeviseのインストールを行いました。
まずはGemfileに下記を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613470/95bbc057-aea7-1238-d075-df862621ea68.png)

ちなみにdeviseは日本語で**「工夫する、考案する、案出する、発明する」**という意味だそうです。

次にターミナルにて
『bundle install』
『rails g devise:install』
『rails g devise user』

を順番に実行します。

そしてマイグレーションファイルを以下２点のように編集します。
※注意　#は省いていただいて結構です。
**① null:falseは空の状態での保存を防ぐ為に使用します。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613470/4408a76d-4781-ea7a-b4ad-f158d9496775.png)
**②unique:trueはテーブル内で名前の重複を禁止させる為に使用します。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613470/e1d8acd7-310a-d84b-d409-457669bc6341.png)


次にapp/models/user.rbを下記のように編集します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613470/d78e8a4d-801f-796d-a89e-7f2c375df199.png)
**validatesは日本語で検証する、presenceは存在、uniquenessは唯一性という意味だそうです。**

英語で書かれてあるコードを普通に日本語に訳すことで、意味もよく捉えられるように感じました。
**あとmigrationは移動、移行という意味のようです。つまりマイグレーションファイルはデータベースのテーブルへの移動するための設計図のようなイメージでよいのではないでしょうか。**
Web XRを直書きする人のための頂点計算メモ

# はじめに
あまりいないと思うんだけど、直接`Web XR`と`Web GL`のコードを書こうって人のためのメモ。具体的には`XRView`に渡されてきた`projectionMatrix`と`XRRigidTransform`をどう使ってやれば頂点計算ができるのか。また任意のnear/farクリッピング領域をこの`projectionMatrix`にどう反映させるのか、になります。この分野は素人に毛が生えた程度なので間違えがあったら訂正お願いします。

# 頂点計算
もっともシンプルなVertex Shaderの例は以下のような感じ。

```c
precision mediump float;
attribute vec3 aCoord;
uniform mat4 uTMat;
uniform mat4 uPMat;
uniform vec3 uCamera;
  
void main() {
  gl_Position = uPMat * uTMat * vec4(aCoord - uCamera, 1.0);
}
```

頂点座標からおのおのの目の位置にあたるカメラ座標を引き、カメラからの相対座標に変換します。カメラ座標は`XRView.transform.position`の`x`,`y`,`z`です。立体感に乏しかったら適当に100倍くらいにして引いちゃっても大丈夫……だと思ってるんだけど、正しい情報募集。自分のケースでは100倍すると良い感じの立体感になりました。

続けて、`uTMat`と`uPMat`を掛けてますが、これは`XRView.transform.inverse.matrix`と`XRView.projectionMatrix`です。

`transform.matrix`ではなく`transform.inverse.matrix`を使うのがミソ。知らんがな……って感じですが。うっかり`transform.matrix`を使うと、右を向いたらオブジェが右に、左を向いたら左に、と本来とは逆方向に視界が動いてしまいます。これ、たちが悪いのは間違った`transform.matrix`で`uTMat * uPMat * p`の間違った順で行列計算してしまうと、わりと正しそうな変換になってしまう点。一見、視界の動きに追従するように見えるのですが、正しいのはピッチ回転、ヨー回転だけで、ロール回転には反対向きに反応します。なんか変だし、適当に順番変えてあってるやつ探すかー、みたいな志の低いことをしてると死ねます。

[2020.07.11 追記]
Note: 最初に投稿した際には最新稿での`gl_Position`を一度`q`と置き`q / q.w`を最終計算結果としていました。実験当初はこの計算をしないと鼻周りの近場がクリップして落とされるという怪現象に悩まされ、結果は同じはずなのに……と思いながら割ってます、みたいな事を書いていたのですが、今度はこれが原因で横を向いたときに左右から追い出されたはずの頂点が画面中央付近にワープする問題が発生しました。これもまぁ、結果は同じはずなのに……という話なのですが、wが0の時の未定義動作かも。という事で、素直に与えられた行列計算だけするのが良いようです。

クリップのnear/far区間については、XRRenderStateを更新して設定してあげるのが正しいようです。`baseLayer`を設定する際に一緒に`depthFar`と`depthNear`を必要に応じて設定してあげれば`projectionMatrix`に反映されてシェーダーでの頂点計算で自動的にクリッピング領域外に飛ばされるようになります。何も設定しないと`1000.0`と`0.1`が設定されます。自分の場合は元のゲームエンジン側で指定してるfarが8000くらいになる時があり、デフォルトのままだと必要な背景が描画されなくなったりするので大きめの値を固定設定してあげて、ゲームエンジン側で本来のクリッピング処理を行い、この時点で描画範囲外の物は`drawElements`のindicesから外す事で対処しました。元のゲームが視点移動を考慮しておらず正面のみに存在する切り取られた世界に少しだけ自由な視点を追加した、という割り切ったVR化だからとれた方法ですけど。

アスペクト比の補正については`projectionMatrix`に織り込み済みのようで、1:1の立法ドットを想定して移動・描画してやれば正しい比率で視界内に描画されます。

# まとめ
Web XRの話が出てWeb VRがチャラになってから、当面は安定しないのかなーと思ってたけど、気づけばOculus QuestもWeb XRのみのサポートとなり、そろそろ使い時かなって時期になってました。スマホでorientation情報を使って計算してた頃と比べると行列作るのに悩まなくて済む分、ずっと楽ですね。
Unityで画像からobj形式ファイル作成

# pngやjpegの画像をobjにしたいがさくっとする術が見つからん。。
Unityできたけど
ちょっと忘れそう、かつ、またはまりそうなので備忘録

# 手順
### 画像を反映したMaterialを用意
unityのProjectビューの任意の場所にお目当ての画像をドラッグ＆ドロップ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/7c41d362-9a1c-27ab-8000-633635a456d9.png)

### projectビューの任意のフォルダで右クリックから新規マテリアル作成
右クリック > Create > Material
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/f4057026-c5bc-48de-73d7-6aaa76fcffdf.png)

で、そのMaterialのInspectorビューからShaderを変更
Diffuseで検索したら出てくる「Mobile/Diffuse」にする

で下記画像の様になっているので↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/894aa7d7-6072-2f7f-1720-adc7cd967bed.png)
赤枠のところにお目当て画像をドラッグ＆ドロップする

こんな感じで画像はいったの確認できる↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/ab9d9f4a-4abd-2032-6ce0-b1e2d253bc68.png)

ただこの状態だとなんか灰色がかった状態になってしまう。
そこで更にShaderを変更するとそれが回避出来る
UI > Defaultを選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/6dfc1a01-d191-68e3-1d6b-4d06788e61b1.png)

これでMaterial完成

### Materialを反映する3Dオブジェクト作る
HierarchyビューでPlaneオブジェクト作ってよしなにする。
とりあえず縦向けたかったり、サイズ適当に調整してこんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/d5e75a91-fc44-a4c9-8790-7a63bfa71a5f.png)

### Materialを3Dオブジェクトに反映する
先ほど作ったMaterialを、これまた先ほど作ったPlaneオブジェクトにドラッグ＆ドロップする反映される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/eee44afc-9a10-fcbe-264e-859a616a1bbd.png)


したらいい感じの3Dオブジェクト出来上がり
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/cf77b7e2-ad8f-ef9a-c785-098fdf621d9d.png)


### UniVRMでglb形式でエクスポートする
UniVRMをインポートしてないひとは探してインポートしてください。

インポートしてれば画面上の方にVRMボタンがあるので
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/d40a779c-a81f-b315-b09c-c163da717ad7.png)

UniGLTF 1.28 > Export　で適当に名前を付けてglb形式のファイルを無事出力。


これで完成よ。
データプロバイダでテストに値を入れる

phpunitのデータプロバイダについての基本的な使い方のメモです。
[PHPUnit 用のテストの書き方](https://phpunit.readthedocs.io/ja/latest/writing-tests-for-phpunit.html#writing-tests-for-phpunit-data-providers)

###データプロバイダとは
同じアサーションで値だけ変えたい場合にデータプロバイダを使うと便利です。
テストに値を与える部分を別のメソッドに切り出すことができます。

データプロバイダの配列の中身が引数としてテストメソッドに渡され、メソッド内の配列の分だけアサーションが反復処理されます。

下の例ではassertSame()が４回呼ばれることになります。

```php

<?php
use PHPUnit\Framework\TestCase;

class DataTest extends TestCase
{
    /**
     * @dataProvider additionProvider
     */
    public function testAdd($a, $b, $expected)
    {
        $this->assertSame($expected, $a + $b);
    }

    public function additionProvider()
    {
        return [
            [0, 0, 0],
            [0, 1, 1],
            [1, 0, 1],
            [1, 1, 3]
        ];
    }
}
```
**@dataProviderアノテーション**でデータプロバイダメソッドを指定します。

```php
/**
 * @dataProvider additionProvider
 */
```
データプロバイダーの返り値は配列にする必要があります。

```php
return [
    [0, 0, 0],
    [0, 1, 1],
    [1, 0, 1],
    [1, 1, 3]
];
```

###各データセットに名前を付ける
データセットには名前を付けることができます。テストに失敗した場合、データセットの名前が表示されるため、どのデータで失敗したのかわかりやすくなります。

```php
<?php
use PHPUnit\Framework\TestCase;

class DataTest extends TestCase
{
    /**
     * @dataProvider additionProvider
     */
    public function testAdd($a, $b, $expected)
    {
        $this->assertSame($expected, $a + $b);
    }

    public function additionProvider()
    {
        return [
            'adding zeros'  => [0, 0, 0],
            'zero plus one' => [0, 1, 1],
            'one plus zero' => [1, 0, 1],
            'one plus one'  => [1, 1, 3]
        ];
    }
}
```

```
$ phpunit DataTest
PHPUnit 4.6.0 by Sebastian Bergmann and contributors.

...F

Time: 0 seconds, Memory: 5.75Mb

There was 1 failure:

1) DataTest::testAdd with data set "one plus one" (1, 1, 3)
Failed asserting that 2 is identical to 3.

/home/sb/DataTest.php:9

FAILURES!
Tests: 4, Assertions: 4, Failures: 1.
```
Node.jsで複数ファイルを送るには

こんにちは、wattak777です。

一つだけファイルを送信する、というサンプルは幾つかあるのですが、複数ファイルの場合のサンプルをちょっと作ってみました。

サーバー側はmulterを使った以下のサンプル。

```javascript:server.js
var express = require( 'express' ) ;
var app = express() ;
var multer = require( 'multer' ) ;

app.post('/file_upload', multer({dest: ファイルを置くパス}).single('my_file'), function (req, res) {
    console.log(req.file.path, req.file.originalname) ;
    res.sendStatus(200) ;
});

var server = app.listen(12345, function() {
    console.log("listening at port %s", server.address().port) ;
});
```

で、本題のクライアント側は以下の実装。
request-promiseを使って同期的に送るようにしました。

```javascript:client.js
const fs = require('fs') ;
const request = require('request-promise') ;

const FileNameList = [
    'test1.bin',
    'test2.bin',
    'test3.bin'
] ;
var FileNameIndex = 0 ;

var returnCode = httpPost() ;

function httpPost() {
    const FormData = {
        my_file: {
            value: fs.createReadStream(ファイルのパス + FileNameList[FileNameIndex]),
            options: {
                filename: FileNameList[FileNameIndex],
                contentType: 'application/octet-stream'
            }
        }
    }

    const options = {
        uri: "http://サーバーのIPアドレス:12345/file_upload",
        formData: FormData,
        method: 'post',
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    }

    var response = request(options)
        .then( function(body) {
            console.log( 'then :' + body ) ;
            onEnd() ;
        })
        .catch( function(err) {
            console.log( 'catch error :' + err ) ;
        }) ;
    return response.statusCode ;
}

function onEnd() {
    console.log( 'Index ' + FileNameIndex + ' is finish.' ) ;
    FileNameIndex = FileNameIndex + 1 ;
    if ( FileNameIndex >= FileNameList.length ) {
        console.log( 'End Operation.' ) ;
    } else {
        var res = httpPost() ;
    }
}

console.log( 'Start Operation.' ) ;
```
とやると、クライアント側の表示は以下のようになります。

```
$ node client.js
Start Operation.
then :OK
Index 0 is finish.
then :OK
Index 1 is finish.
then :OK
Index 2 is finish.
End Operation.
```
Raid

#Raidとは
Redundant Array of Independent Disk、またはRedundant Arrays of Independent Disksの略称
2台以上のHDDを仮想的に1つのドライブであるようにPCに認識させる技術です。
Raidレベルにより、処理速度の向上や、冗長性の確保を可能とします。
バックアップ目的で利用するものではありません。

#ソフトウェアRaidとハードウェアRaid
####ハードウェアRaid
RAIDコントローラというハードウェアを利用してRAIDを構築します。
安価なRIADコントローラも存在します。
OSはRAIDを意識しないので、ソフトウェアRAIDと比べてパフォーマンスが優れています。
サーバ用途として利用する場合は通常はハードウェアRAIDを利用します。

####ソフトウェアRaid
LinuxやWindows等ではOSの機能としてソフトウェアRAIDを利用できます。
ハードウェアRAIDとは異なり、OSはRAIDを意識してCPUを利用した状態でデータの書き込み、読み取りを行います。
そのため、パフォーマンスに大きな影響が出やすく、サーバ構築ではあまり利用されません。

#RAID0(ストライピング)
最低２本のディスクが必要
複数のディスクに分散してデータを書き込むため、１台のディスクにアクセスする短くなり
ディスクの読み書きの待ち時間が短くなり、ディスクの読み書きが早くなる。
但し、いずれかのディスクのうち１本でも障害が発生すると、全てのデータが読み込めなくなる。
データ使用効率がもっとも良く、冗長性を持たないため、ディスクに対する耐障害性がないです、

イメージ
ディスク１-[データA][データC]
ディスク２-[データA]

#RAID1(ミラーリング)
最低２本のHDDが必要(２*n本のディスクが必要)
同じデータを２本のディスクに書き込むことで、どちらかのHDDに障害が発生した場合でも、もう片方のディスクからデータの読み込みが行えます。
RAIDを構築せずに、１本のディスクで利用するよりは、データの読み込みが早くなリマス。
RAID０と比べるとディスクの読み書きは遅くなリます。
データを追記した場合、削除した場合の両方が２本のディスクに等しく反映されるため、
「１本目のディスクをメインのディスク、２本目のディスクをバックアップ」として利用するものではないです。

イメージ
ディスク１-[データA][データB][データC]
ディスク２-[データA][データB][データC]

#RAID10(RAID0+RAID1)
最低４本のディスクが必要
データをブロック単位に分割して並列に書き込むとともに、二つのディスクにまったく同じデータを書き込みます。
RAID 0の高速性とRAID 1の冗長性を組み合わせたRAID方式になります。
ディスクの利用効率はよくないです。

イメージ
ディスク１-[データA][データB]
ディスク２-[データC]
ディスク3-[データA][データB]
ディスク4-[データC]

#RAID2〜RAID4
あまり利用されることがないので割愛します。

#RAID5(パリティディスク分散)
最低3本のディスクが必要
データ復旧のために誤りを訂正する符号（パリティ）を生成しながら書き込みを行います。
データを分散して複数のディスクへ書き込むため、RAID1より処理は高速になり、パリティを生成するためRAID0より安全性が高いです。
パリティもデータと同じく分散してディスクへ書き込みます。
いずれかディスクのうち1本で障害が発生した場合でも利用できます。
2本以上のディスクの障害が発生した場合は、利用できなくなるため、
速やかに障害が発生したディスクを交換し、RAID環境を再構築する必要があります。

イメージ
ディスク１-[データA][データC][パリティ1][データG]
ディスク２-[データB][パリティ1][データF][データH]
ディスク3-[パリティ1][データD][データE][パリティ1]

#RAID6(パリティディスク分散(2台))
最低4本のディスクが必要
RAID５ではパリティが１つだったが、２種類作成し２つのディスクに書き込む。
いずれかのディスク２本まで障害が発生した場合でも利用できます。
RAID５と比べ対障害が上がりますが、ディスクの利用効率が下がります。
二重にパリティを生成するため、RAID5よりも書き込み速度が低下します。

イメージ
ディスク１-[データA][パリティ1][パリティ1][データG]
ディスク２-[データB][パリティ2][データF][パリティ1]
ディスク3-[パリティ1][データC][データE][パリティ2]
ディスク4-[パリティ2][データD][パリティ2][データH]

###余談
仕事のサーバー等で利用する場合はRAID５＋ホットスペアで利用する事が多いです。
この場合ですと、耐障害性のためにRAID６にすれば良いと思う人もいると思います。
仮にホットスペアが１本の場合ですと、書き込み速度がRAID５の方が早く、
２本までディスク障害は発生しても大丈夫なのでRAID６と同じと考える事が可能。
ホットスペアなので、障害発生時にすぐにディスクを交換しに行かなくても、
再構築が行われて正常な状態に戻るのが早いです。
遠隔地のデータセンター等で稼働している場所での障害発生時には非常に有用だと思います。
人により考え方が異なると思いますが、
自分としては書き込みも早く耐障害性も高くなり、復旧も早くて良いと思っています。
Firestoreでユーザー別のいいね一覧を作る時

この度、初めてアプリをリリースさせて頂きました👏
そして、制作中に一番苦労した**Cloud Firestore**の部分について書き残しておこうと思います✨


苦労した点としては、

<img width="224" alt="スクリーンショット 2020-07-09 23.12.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407730/13f2b614-2418-cd23-04d4-f8366e3b100b.png">

↑投稿されている画像に対してイイねをした場合、
写真のように、イイねした物の一覧を見る事ができる**Like画面**を作りました。

しかし、、、！ 

<img width="400" alt="スクリーンショット 2020-07-09 23.13.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407730/7d9a20f5-8d20-927d-27e0-eb780c2afe1c.png">

Aの人がイイねした物が、Bの人がイイねを押していなくてもBの人の**Like画面**にも表示されていました。

今回は、
**Aの人がイイねした物がAの人にしか見えないように、
Bの人がイイねした物がBの人にしか見えないように**　する解決策を見つけたので
書いていきます　↓　↓　↓

##CloudFirestoreの構造

<img width="600" alt="cloud1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407730/9a7064e2-e558-55aa-f94c-1f7a465018bd.jpeg">

このようにLikeIdにUser の ID (user.uid)を配列（Array型）で入れたらうまくいきました😏

##コード１(イイねする投稿が表示されている画面）

```swift
 func likeSwipe(){
       let saveDocument = Firestore.firestore()
        let user = Auth.auth().currentUser
        
        let docId = UserDefaults.standard.object(forKey: "docId") as! String
   
        let addDocument = saveDocument.collection("Posts")
        
        let query = addDocument.document(docId)
        
        query.updateData([
            "LikeId" : FieldValue.arrayUnion([user!.uid])
        ])

```

↑これをイイねボタンを押した時の動作に加えてください。　

これで、currentUserのUserIDがLikeIdに加えられます

##コード２(Like画面_イイねした投稿の一覧を見る事ができる画面）

```swift
 func fetchData(completion: @escaping () -> Void){
        
      let user = Auth.auth().currentUser
      let saveDocument = Firestore.firestore()
      let uploadDocument = saveDocument.collection("Posts")
      
      
      let query = uploadDocument.whereField("LikeId",  arrayContains: user!.uid)
        
        query.getDocuments { (querySnapshot, error) in
```

↑これでquery（ユーザーが値をLikeIdに入れているかを検索）して
ユーザーがイイねしたもの（LikeIdに入れた物）のみが表示されるようになります
最後のコード以降は引っ張ってくるデーターを通常通りかけばオケです。

https://firebase.google.com/docs/firestore/query-data/get-data?hl=ja
（↑最後のコード以降の参考になれば、、）

##おまけ（削除するときのコード）

Cellを消した時（投稿のイイねを外した時）

```swift
    let docId = self.documentIds[indexPath.row]

    let user = Auth.auth().currentUser
    let saveDocument = Firestore.firestore()
    let uploadDocument = saveDocument.collection("Posts")
                
    uploadDocument.document(docId).updateData([
                     "LikeId": FieldValue.arrayRemove([user!.uid])
                ])
```

このように、ArrayをRemoveすることで自分のイイね一覧から消えても、
他の人のイイね一覧には残ったまんまです。

##以上
これで、Cloud Firestoreを使ったユーザー別のいいね一覧を作れると思います☺️

もし良ければ、ダウンロードしてみてください👏✨
https://apps.apple.com/jp/app/baggle/id1518188746
git push時のエラー対処法（ローカルリポジトリとリモートリポジトリで差分発生によるエラー）

今回もgitについて投稿させていただきます。

エンジニアに転職してまだ２週間のため、まだまだGit、Githubに苦手意識があります…

ブランチの切り替えやマージが怖い…:joy:

そんな中、私が遭遇したエラーについて備忘録として記載しておきます。

#エラー内容
```
[15:25:28]:~/Test-iOS$ git push
Username for 'https://github.com': hogehoge
Password for 'https://hoge@github.com': *******
To https://github.com/hoge/Test-iOS.git
 ! [rejected]        develop -> develop (non-fast-forward)
error: failed to push some refs to 'https://github.com/hoge/Test-iOS.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 addとgit commit -mを終え、pushしようとしたら上記のエラーが発生し、pushできない…！


#原因
実は、pushする前にレビューで不要ファイルがあることがわかり、Githubから削除していました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/484337/5830ee3b-d180-a630-322e-2aa5a566c493.png)
右上のゴミ箱マークからファイル削除していました。

これによって、リモートリポジトリとローカルで差分が発生したため、pushできなくなっていたようです、

#解決策
直近のコミットを削除し、git pullすることで差分をなくした後で再度、コミット→pushすることで解決できます。

```
[15:26:40]:~/Test-iOS$ git log
##直近のコミットを確認
[15:27:37]:~/Test-iOS$ git reset --hard HEAD~
##直近のコミットを削除
[15:27:55]:~/Test-iOS$ git log
[15:29:53]:~/BookManager-iOS$ git pull
##リポジトリの差分をなくす。再度、コミット、pushをする
```

自分はこれで解決できました。普段うまくいっているGitがエラーになると焦りますよね…

#参考文献
https://teratail.com/questions/187949
Fnキーを有効にする手順

#Fnキーを有効にする

ワイヤレスキーボードの電池がなくなってしまうと、キーボードの設定が初期化されるみたい
毎回Fnキーの再設定を忘れるので備忘録残します。

※キーボードはMicrosoft社製

Fnキーを有効にする手順は以下。

<font color="Red">**【Fnキー】 を押しながら 【Capsキー】を押す**</font>


以上。
人工衛星の食時間（周回衛星の場合）

# はじめに
人工衛星は太陽光から発電し，各種ミッションを実現しています．人工衛星を運用する際，**機体が地球の影に隠れてしまう食（地球食）**が発生します．このため，次のようなことに注意する必要があります．
- **太陽光から発電できない**ため，バッテリーから給電する必要がある
- 影の領域では**温度が急激に低下**するため，各機器のヒータを起動しておく必要がある

ここでは周回衛星の食時間を求めてみたいと思います．

# 食が発生しない場合

衛星高度$H$，軌道傾斜角$\gamma$の円軌道の衛星が半径$R$の地球を周回する状況を考えます．なお，地球の影の領域は円筒状になるとします．

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290566/f2ddf7e7-5294-3c6f-3b2c-cec9a30a4e00.jpeg" width=90%>

この衛星が次の条件
$$
\begin{align}
(R+H)\sin{\gamma}&>R \\\
\rightarrow R+H &> \frac{R}{\sin{\gamma}}
\end{align}
$$
を満たすときには，衛星は地球の影に入らず**食は発生しません**．

# 食が発生する場合

一方で，
$$
\begin{align}
(R+H)\sin{\gamma}&<R \\\
\rightarrow R+H &< \frac{R}{\sin{\gamma}}
\end{align}
$$の場合は食が発生することになります．衛星の円軌道の式を次のような極座標で表現します．
$$
x=(R+H)\cos{\theta},~~y=(R+H)\sin{\theta} \tag{1}
$$

また，衛星は**影の領域を斜めに横切る**ことになりますから，下図に示すように影の断面は**楕円**となります．影の円筒を円軌道が切る楕円の式はパラメータ$t$を用いて次のように表現します．
$$
x=\frac{R}{\sin{\gamma}}{\cos{t}},~~y=R\sin{t} \tag{2}
$$

式(1)と(2)の座標が等しいとして，$\theta$を求めてみます．
$$
\begin{cases}
(R+H)\cos{\theta}&=\cfrac{R}{\sin{\gamma}}{\cos{t}}\\\
(R+H)\sin{\theta}&=R\sin{t}
\end{cases}
$$
途中式は省略しますが，$t$を消去するように変形すると
$$
\cos{\theta}=\frac{\sqrt{2RH+H^2}}{\cos{\gamma}(R+H)} \tag{3}
$$
が得られます．

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290566/1d78dc54-3df1-5c8d-0d6e-27281e22a370.jpeg" width=80%>

# 計算例

軌道高度$h=1,000~\rm{km}$の円軌道の衛星の食時間を求めてみます．上で示した図において，$\gamma=0$の場合，影の形は長方形となります．これを利用すれば日陰に入る角度$2\theta$が簡単に計算できます．式(3)において$\\gamma=0$とおけば，
$$
\begin{align}
\cos{\theta}&=\frac{\sqrt{2RH+H^2}}{\cos{\gamma}(R+H)}=\frac{\sqrt{2\times 6378\times 1000+1000^2}}{(6378+1000)}\simeq 0.5027 \\\
\therefore~\arccos{\theta}&=59.8^\circ
\end{align}
$$

と計算できます．ここで，衛星が1周回する時間(周期)$T$は
$$
\begin{cases}
v=\sqrt{\cfrac{MG}{R+H}} \\\
T=\cfrac{2\pi}{v}(R+H)
\end{cases}
$$
を利用して，
$$
T=2\pi\sqrt{\frac{R+H}{MG}}(R+H)\simeq 105~\rm{min}
$$
と表現できます$^{*1}$．

以上から，食時間$T_s$は次のように計算できます．
$$
T_s=\frac{2\theta}{360}\times T=\frac{2\times 59.8^\circ}{360}\simeq35~\rm{min}
$$

# 参考

*1：衛星の速度・周期の計算法は以下でも紹介しています．
https://qiita.com/epppJones/items/73fe11025b29d990ce1e

木田，小松，川口，人工衛星と宇宙探査機，コロナ社，2011．
新規登録機能

やっとこさ新規登録機能実装完了今回のログイン時発生したエラーは
Error: Field 'name' doesn't have a default value: INSERT INTO

これどういうことかというとdeviseは元々入っているe-mailとpasswordしか受け取らない模様
調べて結果aplication.controllerに

```ruby:qiita.rb

  before_action :configure_permitted_parameters, if: :devise_controller?

  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
  end
```
を追加し

```application.controller.rb
class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  before_action :configure_permitted_parameters, if: :devise_controller?

  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
  end
end
```

これで完璧！
のはずが、なぜか全く同じエラーが。。。。
原因はこちらでした

```registrations>new.html.erb
<h2>Sign up</h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= render "devise/shared/error_messages", resource: resource %>

  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
  </div>

    <div class="field">
    <%= f.label :name %><br />
    <%= f.name_field :name, autofocus: true, autocomplete: "name" %>
  </div>

  <div class="field">
    <%= f.label :password %>
    <% if @minimum_password_length %>
    <em>(<%= @minimum_password_length %> characters minimum)</em>
    <% end %><br />
    <%= f.password_field :password, autocomplete: "new-password" %>
  </div>

  <div class="field">
    <%= f.label :password_confirmation %><br />
    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
  </div>

  <div class="actions">
    <%= f.submit "Sign up" %>
  </div>
<% end %>

<%= render "devise/shared/links" %>
```

   <%= f.name_field :name, autofocus: true, autocomplete: "name" %>
name.field！！笑

なぜ自分でもそうやったのか覚えていませんが、textに変更し新規登録完了！
【初心者でもわかる】デザインからコーディングする時の考え方（実践例あり）

# どうも、7noteです。今回はデザインからコーディングに写すときのコーダーの頭の中を解説。

どうも7noteです。
この記事は以下へ引っ越しました。

https://naruweb.com/coding/thinking/
ステータスコードとポート番号がごっちゃになりそうだったので整理してみた

#ステータスコードとは？

- Webサーバーが、ブラウザからの要求に対して行うHTTPレスポンスの中に含まれる処理結果のこと。

- ３桁の数字で構成されていて、最初の１桁目がカテゴリを表す。

※以下の表は代表的なステータスコードである。

| ステータスコード       |意味                 |説明              |
|:-----------------|:------------------|:-------------------|
|200              |OK  | リクエストが正常に完了したことを表す                   |
| 302           |Found       |リクエストされたリソースが一時的に別のURIに属していることを表す   |
| 401         |Unauthorized    |ユーザ認証に失敗したことを表す       |
| 403               |Forbidden  |アクセス権限がないため、サーバーにリクエストの実行を拒否されたことを表す           |
| 404             |Not Found       |リクエストURIに一致するリソースを見つけられなかったことを表す(ブラウザに入力したURIが誤っていたときのエラー)  |
| 500          |Internal Server Error |CGIプログラムなど、サーバ内部のプログラム実行においてエラーが発生したことを表す |


#ポート番号とは？

- コンピュータが提供するサービスを指定するための番号。

- 代表的なプロトコルで使用されるポートは**「ウェル・ノウン・ポート(well-known ports)」**と呼ばれる。

※以下の表はウェル・ノウン・ポート番号である。

| ポート番号       | プロトコル    |                    
|:-----------------|:------------------|
| 20, 21 | FTP(ファイル転送)    |               
| 22     |SSH(暗号化されたリモートコンピュータとの汎用通信)|       
| 23     |Telnet(リモートコンピュータとの汎用通信) |           
| 25     |SMTP(メール送信)     |                    
| 53     |DNS(ホスト名解決)     |                    
| 80     |HTTP(Webブラウジング) |                    
| 110    |POP３(メール受信)     |                    
| 443    |HTTPS(暗号化されたHTTP)|
【PHP D問題編】Paizaスキルチェックで覚えておくと便利な関数を初学者がまとめてみた


PaizaのスキルチェックのD問題でよく使う、覚えておいた方がいいかもと個人的に関数をまとめてみました。
Webアプリをローカル環境でしか作れない初学者が書いた備忘録程度のものになりますので、そこまで高度なことは
書いておりません。むしろ基礎的な内容です。
最近始めたよ！みたいな方に少しでも役立てたら幸いです。

##explode
文字列を区切って配列化する関数。
まず、以下のような文字列があったとします。

```
$input_line = '10 20 30 40'; 
```
このままでは、１行の文字列として扱われてしまうので各々の数字を扱うことができません。
そこで活躍するのが`explode`関数です。新しく変数を定義し、第一引数に区切る境目を、第二引数には文字列が定義されている変数を持ってきます。つまり、**どこで区切って、どの文字列を分けるのか**を明記してあげます。

```
$input = explode(" ", $input_line);
```
この場合は、半角スペースで区切り、`$input_line`の文字列を区切る。のようになっています。
また、この`$input`は配列化されるので上記のコードは以下のコードと同じ意味を持つことになります。

```
$input = array(10, 20, 30, 40);
```
当然配列なのでそれぞれの数字にインデックス番号が割りふられ、ここでようやく各々の数字を扱うことができるようになるます。
例
３０を扱いたい時

```
$input[2]
```
を使えば良い。

paizaのスキルチェックD問題ではこのように、問題で使う値が文字列で与えられることが多く、`explode`を知らなければその先に進めないものもあります。

![IMG_0072.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503714/3c00e706-b6a9-bdda-c6b8-75628bc25505.jpeg)
※このようなイメージを持っておくと良いかもしれない。

##算術演算子
基礎中の基礎ですが、これも知らないと解けない問題があります。基本的な算術演算子は以下のとおりです。

```
足し算：$a + $b
引き算：$a - $b
掛け算：$a * $b
割り算：$a / $b
割り算のあまり： $a % $b
```
足し算、引き算は直感的にわかりますが、掛け算以降はコードを書くようになってから知りました。それくらい普段からあまりなじみのない記号を使い、基本的には他の言語でも変わらないみたいのでこれはマストで覚えるべきものだと思います。

##比較演算子、論理演算子
###比較演算子
比較演算子とは、その名の通りある二つの変数をを比較するための演算子です。
主な演算子は以下のようです。

```
$a == $b：$aと$bが等しい時にtrue
$a != $b：$aと$bが等しくない時にtrue
$a < $b ：$bの方が$aよりも大きい時にtrue
$a > $b ：$aの方が$bよりも大きい時にtrue
$a <= $b：$bの方が大きいまたは等しい時にtrue
$a >= $b：$aの方が大きいまたは等しい時にtrue
```
基本的に比較演算子も他の言語でもあまり変わらないことが多いようです。比較演算子は主にif文の中で使うことが多いです。
###論理演算子
論理演算子も比較演算子と似ていてある二つの変数の関係性について調べる演算子です。

```
$a && $b：$aかつ$bのどちらの条件を満たしている時にtrue
$a || $b：$aまたは$bのどちらかが条件を満たしている時にtrue
```
まずはこの二つを覚えておけば少なくともスキルチェックのD問題は解くことができると思います。この論理演算子も比較演算子のようにif文で使うことがほとんどです。

##floor関数
floor関数とは数値の小数部分を切り捨てる関数です。つまり以下のようになります。

```
echo floor(3.14);
//３と表示される

echo floor(233.1234)
//２３３と表示される
```
時々、小数点を切り捨てが必要になってくる問題もあるので覚えておくといいかもしれません。

##substr関数
最後にsubstr関数です。これは文字数を制限する関数です。表示したい文字列を選択しすることができます。主な使い方は以下のようのです。

```
echo substr(‘abcdef’ ,1,3);
// bcdと表示される
echo substr(‘abcdef’ , 0,4);
//abcdeと表示される
```
最初の１文字目を０として表示したい区間の最初の文字の番号と最後の文字の番号を指定します。配列のインデックス番号のように一番最初が０であることに注意が必要です。
また、以下のように番号を負の値で指定することもできるみたいです。

```
echo substr(‘abcdef’ ,-1);
//fと表示される
```
実際負の数字で指定するよりも、扱う文字が相当長くない限り普通に数えて正の数で指定した方が楽なので実際に使ったことはないです。
以上が僕がpaizaのスキルチェックのD問題を解いていて身につけると便利になると感じた関数たちでした。
拙い記事でしたが、少しでもお役に立てれば幸いです。
AWS WAF+CloudFront+S3でIPアドレス制限するときはIPv6 Enabledを確認しよう

# 発生した事象

VPNからのみアクセスしたいS3をhttps付きで用意したいと思い、AWS WAF+CloudFront+S3の構成を用意
WAFのWeb ACLのRulesでIPアドレス制限のルールを設定した
が、何故かそのルールに引っかからずIPアドレス制限ができなかった

# 起こっていた理由

- CloudFrontがIPv6 Enabled:true
- PCや家のネットワークがIPv6を利用するようになっている
- IPアドレス制限をIPv4でやる
- VPNはIPv4アドレスのみ払い出されていた

という設定・環境だった

→IPv6でリクエストが飛んでIPv4のIPアドレス制限にひっかからない、という状態になっていた

# 対策

- CloudFrontのIPv6 Enabledを無効化する


以上です
*VPNのIPv6アドレスがあるならそれを設定するべきな気もします
Vue cli でのrouter-linkの書き方

#Vue cli でのrouter-linkの書き方
##router.jsのサンプルコード
```router.js
import Vue from "vue";
import Router from "vue-router";
import Home from "./components/views/TabMenu/Home.vue";
import Skills from "./components/views/TabMenu/Skills.vue";
import About from "./components/views/TabMenu/About.vue";
import Contact from "./components/views/TabMenu/Contact.vue";

Vue.use(Router);

export default  new Router({
  mode:"history",
  routes: [
    {path:"/", component:Home},
    {path: "/Skills", component: Skills},
    {path: "/About", component: About},
    {path: "/Contact", component: Contact},
  ],
});
```
##解説：
```router.js
import Vue from "vue";
import Router from "vue-router";
```
###vueとvue-routerを使うためにimportしています。
##注意点
###package.jsonの中にvue-routerが入っているかどうか確認して下さい
```package.json
 "vue-router": "^3.3.4",
```
###defaultでは``mode: "hash"``となっています。urlに``#``がついてしまうので``mode:"history",``に変更します。
```router.js
mode:"history",
```
AIZU ONLINE JUDGE の問題をSwiftでやってみた(プログラミング入門 計算編)

##トピック #4　計算
[AIZU ONLINE JUDGE](https://onlinejudge.u-aizu.ac.jp/courses/lesson/2/ITP1/1/ITP1_1_D)の問題にSwiftで解答したものになります。競技プログラミングは普段やりませんので、こうしたほうが簡単！などがあればコメントで教えて下さい。

##4_A 割り算
**問題**
２つの整数 a と b を読み込んで、以下の値を計算するプログラムを作成して下さい：

a ÷ b ： d (整数)
a ÷ b の余り ： r (整数)
a ÷ b ： f (浮動小数点数)

**解答**

```Swift
let a = readLine()!.split(separator: " ").map({Int($0)!})
print(a[0]/a[1],a[0]%a[1],Double(a[0])/Double(a[1]))
```

###4_B 園の面積と演習
**問題**
半径 r の円の面積と円周の長さを求めるプログラムを作成して下さい。
**解答**

```Swift
import Foundation
let a = Double(readLine()!)!
print(a*a*M_PI,2.0*a*M_PI)
```

円周率はimport FoundationまたはUIKitしたのちM_PIで表せます。

###4_C 計算機
**問題**
２つの整数 a, b と１つの演算子 op を読み込んで、a op b を計算するプログラムを作成して下さい。ただし、演算子 op は、"+"(和)、"-"(差)、"*"(積)、"/"(商)、のみとし、割り算で割り切れない場合は、小数点以下を切り捨てたものを計算結果とします。

**解答**

```Swift
let a = readLine()!.split(separator: " ")
while a[1] != "?" {
    var s = Int(a[0])!
    var t = Int(a[2])!
    var u = a[1]
    switch u {
    case "+":
        print(s+t)
    case "-":
        print(s-t)
    case "*":
        print(s*t)
    default:
        print(s/t)
    }
}
```

**問題**
１行目に整数の数nが与えられます。2行目にnこの整数a_iが空白区切りで与えられます。
最小値、最大値、合計値を空白区切りで１行に出力してください。
**解答**

```Swift
let n = Int(readLine()!)!
let a = readLine()!.split(separator: " ").map({Int($0)!}).sorted()
var sum = 0
for i in a {
    sum += i
}
print(a[0],a[n-1],sum)
```

配列.sorted()は便利ですね。