OmniAICreator/Qiita-1.07M huggingface dataset:
寝ながらデュアルディスプレイの環境作った

#初めまして
どうも初投稿です。よろしくお願いします。
寝ながらpc作業環境の記事は見たとこあるのですがデュアルディスプレイの方は居なかったので投稿されて頂きます。
外での作業の時の利用できる方法なので良かったら試してください。

#自己紹介
お仕事:　sesでweb制作、photoshop,adobeXDでデザインカンプ作成、＋Uikitを使用した簡単な静的なコーディングをしてました。
今後はlaravel,awsあたりを勉強していきたいと思います。
好きなゲームは「league of legends」です。

#なぜ寝ながら
仕事から帰ってくるとデスクトップpcを起動までいくのですがそこから風呂に入り布団に入るがルーチン化してしまった為、それじゃ寝ながら仕事と同じような環境を作ろうと思いました。

#その➀
まず初めに普通にうつ伏せで普通にpc作業してました。
windows10で仮想デスクトップで作業してたのですが
しかし1時間後、「モニター2枚ほしいくね？」と思いました。

#その➁
まず初めにノートpc用の簡易デスクを購入しました。
![029a5238f2c427f91e47cee2f1ae2875.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/345613/68ea06c6-1402-2c95-18f0-6273f8723c8c.png)
www.amazon.co.jp/dp/B076BR7SPN
とりあえずメジャーな簡易デスクを使ってみましたがこれでは寝ながら作業ではないなと思い始めました。
こいつは滑り止めみたいなのが取り外し可能なので左利きの方でも使いやすいと思います。

#その➂
仰向けで作業するためにSufacePro用のモニターアームを購入しました。

![ca8b9fb9032d778074d1470346078900.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/345613/e1d9b28b-4246-12cd-a2a5-7ed6b96c2e57.png)
www.amazon.co.jp/dp/B07J6PHSG9
こいつは3.5-12.9インチ対応でスマホからタブレットが使えるから結構汎用性高いのでおすすめです。

#その➃
「Duet Display」＋ipadモニター
手持ちのipadをディスプレイとして使えるアプリ「Duet Display」
https://saruwakakun.com/it/app/duet_display
ipad用モニターを購入しました
https://www.amazon.co.jp/gp/product/B076HR9NWV/ref=ppx_yo_dt_b_asin_title_o00_s00?ie=UTF8&psc=1
![cd030cf0f708602f14aa575d5af6ba46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/345613/f43e424b-8cf0-7775-ea78-985eeb0f61e5.png)

普段ipadとノートpcを持ち歩いているのでこの組み合わせは外でも利用できるので結構いいです。
「Duet Display」の方は遅延も少しあるが気になるほどではなかったです。

***

#そして伝説へ
使用例
![IMG_2722.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/345613/5e45ac30-337e-3f2a-a075-5a6ea3dd8f5f.jpeg)

・キーボード
www.amazon.co.jp/dp/B001KWJTD6
・マウス
www.amazon.co.jp/dp/B00P7D2JF4

![IMG_2724.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/345613/011e7dd4-699f-c8e2-f770-24d1e2cf0050.jpeg)

![qrNlSrRsZEQOf9O1563173801_1563173976.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/345613/10441e71-3835-68c3-2a8a-8ab309fcf320.png)


傍から見たら完璧にヤバイやつになってますw
このスタイルでまだ1週間目ですがかなり快適です。
しいて言えばずっと同じ体制（仰向け）だときついので横向きで作業した時になんとかなるように
改良したいです。
興味ある方の参考になれば幸いです。
AWS S3のバケット名は全アカウントでユニークである必要があるという仕様への対処法

# はじめに

S3のバケット名は全アカウントでユニークである必要があるため、既に存在しているバケット名ではバケットを作成できない。

```shell
$ aws s3 mb s3://dev
make_bucket failed: s3://dev An error occurred (BucketAlreadyExists) when calling the CreateBucket operation: The requested bucket name is not available. The bucket namespace is shared by all users of the system. Please select a different name and try again.
```

# 対処方法

AWS Account IDのmd5ハッシュを利用する。
こうすればAWSアカウントが同一である限り、バケット名の恒久性とユニーク性が同時に確保できる。

```shell
#AWSCLIで取得したAccountIDのmd5ハッシュ文字列の先頭10文字を取得
$ backet_hash=$(echo -n $(aws sts get-caller-identity | jq -r .Account) | md5sum | cut -c 1-10)
```

取得したハッシュに必要に応じて日付や目的がわかる文字列を付加してバケット名にすればOK。

```shell
#ハッシュ値 + 現在日付(YYYYmmdd) + 「dev」のバケット名でS3バケット作成
$ aws s3 mb s3://${backet_hash}-$(date +%Y%m%d)-dev
make_bucket: 12345abcde-20190715-dev
```

バケット名にアンダースコア`_`や大文字は利用できないので注意。

以上
iMovieを使ってエンコード後に音ズレの訪れを修正した

# 使用しているもの
Windows PC
Mac PC

## 編集ソフト
- Aviutl
- iMovie

## 動画撮影
- OBS Studio

# 背景
私は、YouTubeにスプラトゥーン2のゆっくり動画を投稿しています。その際に、背景などをつける作業をするためにMacPCでOpenShotVideoEditorとiMovieを使用し、ゆっくり音声を付けるためにWindowsPCでAviutlを使用しています。

何てめんどくさいことを…と思うかもしれないのですが、ちゃんとした理由があります。

WindowsPCのスペックが足りずに、背景とゆっくり音声を一緒にエンコードするとゆっくり音声がバグるんです！！！

![なんだってー.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/460205/aa524d0f-0751-0576-b43f-1fec7d8d178e.jpeg)

しかも、エンコードするたびにゆっくり音声がバグる場所が変わるという、まさに<b>エンコードガチャ</b>をやっていました。

そこで、MacPCで大体の動画の背景など合成してから、WindowsPCで編集することで、これをうまく回避しています。

#訪れる音ズレ
そんな面倒な編集をしていたら、今度はOBSで撮影している際に、今度はMacの処理能力が追いつかずにOBSで撮影している動画が音ズレをしてしまいました。画質をギリギリまで上げているのが仇となってしまった…。

この時、スプラトゥーン2のタイマン動画を4本の動画を撮影し、その内の2本を使用しようとしたのですが、なんと片方が音ズレをしていなくてもう片方が音ズレをしているという、なんとも悪質な自体になってしまいました。

一度音を消して、違うBGMに差し替えるという案も出たのですが、タイマン動画で戦ってる時の効果音がないのは非常に寂しいものです。

# 思いついた解決案
そこで思いついたのが、<b>音声ファイルと動画ファイルに分けて違和感がないように無理やり編集する</b>というものでした。

最高にめんどくさいぜと思ったのですが、現状解決できるとしたらこれくらいなので仕方ないですね。

# やり方の手順
1. iMovieを使って音声を切り離し、音ズレした箇所を修正する
2. 何もなかったかのように動画を差し替える

# iMovieを使って音ズレした箇所を修正する

編集したい動画をインポートします。やり方はフォルダからドラッグ&ドロップでもいいし、「メディアを読み込む」から読み込んでもOK。

そしたらインポートしたファイルを、下のタイムラインにドラッグ&ドロップ。そのままだと編集しにくいので、拡大します(スマホの画面を拡大するみたいにする)。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/460205/a5496a57-4cce-d5c7-2903-3bcae6e39866.png)

右クリックをして、「オーディオを切り離す」をクリックするか、option + command + Bキーを押すと、音声ファイルだけを取り出すことができる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/460205/ac4cb57f-8147-8f09-14b5-46ccdadefeb5.png)

そうしたら、音ズレをしている音声ファイルを右クリックして、「クリップを分割」をクリックする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/460205/c3120a2b-2990-a89a-df2b-fd49a18fb98a.png)

後は、ズレを感じないなあ・・・くらいのところまで移動したら修正完了！といいたいけど、最後のところがずらした分凸凹しているので直しておきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/460205/8d6d89fc-b5eb-0395-5f1f-484ef85dec9e.png)

圧倒的ゴリ押しだけど、最終手段として音ズレを直すに当たっては割といい感じだと思います。

# 何もなかったかのように動画を差し替える

動画の長さ自体は何も変わっていません。もしも完成した後に「やっぱり音ずれが気になる・・・！」となってしまっても、この方法であれば動画を差し替えるだけで解決すると思います。

# 宣伝
現在、YouTubeにで動画を毎日投稿しています。スプラトゥーンに興味がある人がいたらぜひご覧ください。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ウデマエAになった霊夢がウデマエXの魔理沙に勝負を仕掛けたみたいです👊<a href="https://t.co/jyHZTFRmqq">https://t.co/jyHZTFRmqq</a></p>&mdash; passed games@毎日投稿中 (@pass1619) <a href="https://twitter.com/pass1619/status/1150711227556827137?ref_src=twsrc%5Etfw">2019年7月15日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<a href=https://www.youtube.com/channel/UChuzPpSc71j9HLYF0-57cmA>passed games</a>
「真実は一つ」、上・下、裏・表、嘘・本当。仮説（118）

名探偵コナンの動画で、「真実は一つ」という台詞がある。

一人の人の、ある時点の、ある視点での真実は一つかもしれない。

いくらかの人の、いくつかの時点の、いくつかの視点では、真実は沢山。

# 上下
上から見るのと、下から見るのとでは、事実は真逆なことはしばしば。

強い人が、悪気がないつもりでも、弱い人には大打撃なことは日常茶飯事。

行政を批判する人がいるが、一番強いのは立法。
司法でも行政を縛ることができる。
立法に立候補しなかったり、投票行為を放棄して、裁判所に訴えずに、行政を批判しても仕方がないかも。

# 裏表
真実の、裏から表現するか、表から表現するかで真逆なことはしばしば。

例えば、表からを合法な範囲内での表現とする。

裏からを違法なことだけを集めたとする。
全く同じ事象の表現だと思えないだろう。

# 嘘・本当
嘘と本当の間には何の境界もない。

嘘をつく人は、優しいという。
相手に合わせるために、表現を修正すると、他の人には嘘になる。
別の人にあわせるために、表現を修正すると、最初の表現とは矛盾する。
さらに別の人にあわせるために、表現を修正すると、すべてが嘘かのようになるかも。

優しさは罪。

# 真実は一つか
光が波であるか、粒子であるかの議論を経験すれば、二度と真実は一つとは言わないだろう。

粒子論だけに閉じていれば、真実は一つだと強弁できるかもしれない。
波動論も取り入れようとすれば、真実は確率分布でしかないかもしれない。
真実は波のように無数。

# 参考資料
機械学習・深層学習でできること、できないこと。仮説１０個。仮説（36）
https://qiita.com/kaizen_nagoya/items/41a567f149f78145fd4c

プログラマで「飛び抜けた人が少ない」という仮説（38）
https://qiita.com/kaizen_nagoya/items/f0d22e20f6d2c58f2c1b

プログラマにとって、何か知っている必要なことは何もない。仮説（39）
https://qiita.com/kaizen_nagoya/items/30daf9836702bdefaf7d

「プロセス改善」が改悪へと突き進む。仮説(67)
https://qiita.com/kaizen_nagoya/items/0f3a1174f81935bb6d85

プログラマとして、「プログラムを書く時、文章を書く時、言い訳をする時」に心がけていること。仮説(87)
https://qiita.com/kaizen_nagoya/items/7e5700db01727cb516fc

科学四分類と算譜(program)。仮説(93) 
https://qiita.com/kaizen_nagoya/items/a2f2b9cc3a51b6af7603

Ethernet 記事一覧　Ethernet(0)
https://qiita.com/kaizen_nagoya/items/88d35e99f74aefc98794

Wireshark 一覧 wireshark(0)、Ethernet(48) 
https://qiita.com/kaizen_nagoya/items/fbed841f61875c4731d0

線網（Wi-Fi）空中線(antenna)(0) 記事一覧(118/300目標)
https://qiita.com/kaizen_nagoya/items/5e5464ac2b24bd4cd001

C++ Support(0)　
https://qiita.com/kaizen_nagoya/items/8720d26f762369a80514

Coding Rules(0) C Secure , MISRA and so on
https://qiita.com/kaizen_nagoya/items/400725644a8a0e90fbb0

Autosar Guidelines C++14 example code compile list(1-169)
https://qiita.com/kaizen_nagoya/items/8ccbf6675c3494d57a76

Error一覧(C/C++, python, bash...) Error(0)
https://qiita.com/kaizen_nagoya/items/48b6cbc8d68eae2c42b8

なぜdockerで機械学習するか 書籍・ソース一覧作成中 (目標100)
https://qiita.com/kaizen_nagoya/items/ddd12477544bf5ba85e2

言語処理100本ノックをdockerで。python覚えるのに最適。:10+12
https://qiita.com/kaizen_nagoya/items/7e7eb7c543e0c18438c4

プログラムちょい替え（0）一覧:4件
https://qiita.com/kaizen_nagoya/items/296d87ef4bfd516bc394

一覧の一覧( The directory of directories of mine.) Qiita(100)
https://qiita.com/kaizen_nagoya/items/7eb0e006543886138f39

プログラマが知っていると良い「公序良俗」
https://qiita.com/kaizen_nagoya/items/9fe7c0dfac2fbd77a945

小川清最終講義、小川清最終講義（再）計画, Ethernet(100) 英語(100) 安全(100)
https://qiita.com/kaizen_nagoya/items/e2df642e3951e35e6a53

 ＜この記事は個人の過去の経験に基づく個人の感想です。現在所属する組織、業務とは関係がありません。＞
This article is an individual impression based on the individual's experience. It has nothing to do with the organization or business to which I currently belong. 
# 文書履歴(document history)
ver. 0.01 初稿 20190715
ver. 0.02 標題、みだし、内容加筆 20190716
ver. 0.03 ありがとう追記　　20230818

### 最後までおよみいただきありがとうございました。

いいね　💚、フォローをお願いします。

####  Thank you very much for reading to the last sentence.

Please press the like icon 💚　and follow me for your happy life.
JavaScript本格入門を読んで、初心者がつまづいたポイントまとめ

この記事は[改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで](https://www.amazon.co.jp/%E6%94%B9%E8%A8%82%E6%96%B0%E7%89%88JavaScript%E6%9C%AC%E6%A0%BC%E5%85%A5%E9%96%80-%E3%83%A2%E3%83%80%E3%83%B3%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%81%AB%E3%82%88%E3%82%8B%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E7%8F%BE%E5%A0%B4%E3%81%A7%E3%81%AE%E5%BF%9C%E7%94%A8%E3%81%BE%E3%81%A7-%E5%B1%B1%E7%94%B0-%E7%A5%A5%E5%AF%9B/dp/477418411X/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&keywords=Javascript%E6%9C%AC%E6%A0%BC%E5%85%A5%E9%96%80&qid=1563172447&s=gateway&sr=8-1)の読書メモです。

初心者的観点からJavaScriptでつまづいたポイントなど備忘録として書き留めておきます。本記事の主な内容は以下の通りです。

・関数宣言
・引数の使い方とスコープ
・ES2015で追加された仕様

##■関数宣言（命令）の方法
###1.function命令で宣言
```js
function doSomething() {
  //任意の処理
  return something;
}
```
一番オーソドックスな書き方ですね。returnはなくても良いらしい。
引数はなくても良いけど()は省略不可。()自体が「関数を使います」と宣言するものとして覚えておくと良いらしい。

###2.関数リテラル
無名関数を変数に宣言格納する方法。

```js
var doSomething = function(a,b) {
  return a * b;
}
```

###3.アロー関数
関数リテラルの書き方をよりシンプルにしたもの。

```js
let doSomething = (a,b) => {
  return a * b;
}
```
##■つまづきポイント
###1.function命令はコードを解析・コンパイルする時点で関数登録をしている
以下は、function命令が関数呼び出しより後に書かれているが正しく使用できる。

```js
console.log(addNum(2,8)); //10
function addNum(a,b) {
  return a + b;
}
```
以下の書き方（関数リテラル）は上記と同じように使うと実行時エラーになる。

```js
console.log(addNum(2,8)); //エラー
var addNum = function(a,b) {
  return a + b;
}
```
関数リテラル（とFunctionコンストラクタ）は実行時（代入時）に評価されると覚えておく。普通の変数と同じ。
function命令は静的な構造を宣言するキーワードであるため、**コードを解析（コンパイル）する際に関数が登録され**、ソースのどの場所から呼び出されても使用可能となっている。

###2.スコープ
**・ES2015以前はブロックレベルのスコープが存在しない。**

```js
if(true) {
  var name = '鈴木';
}
console.log(name);//鈴木
```
上記と同じことをJavaで行うとエラーになる。
JavaScriptはブロックレベルのスコープが存在せず、ブロックを抜けた後でも変数iは有効。
しかしこれは変数の競合を生んでしまう原因にもなるため、ES2015からはブロックスコープに対応している。


**・ブロックスコープに対応したlet命令**

```js
if(true) {
  let name = '鈴木';
}
console.log(name);//エラー
```
今は上記の書き方が主流のよう。

###3.引数の数をチェックしない
```js
function addNum(a,b) {
  console.log(a + b);
}
console.log(addNum(2,8));//10
console.log(addNum(2,8,3));//10
console.log(addNum());//NaN(Not a number)
```

左から順に引数を受け取り、使用されていない引数は無視される。
与えられた引数の数は関数側でチェックしない。
argumentsオブジェクトに引数が格納されるため、それを利用してチェックすることができる。

```js
var addNum = function(a,b) {
  if(arguments.length !== 2){
    throw new Error('引数の個数が違います');
  }
  console.log(a + b);
}

try{
  addNum(1);
}catch(e) {
  window.alert(e.message);//エラーダイアログ表示
}
```

##■ES2015で追加された仕様
###1.可変引数の定義
仮引数の前に「...」をつける。
ループで引数を動的に操作する際に使えそうです。

```js
function sum(...nums) {
  let result = 0;
  for(let num of nums) {//拡張for文
    result += num;
  }
  return result;
}
```
可変引数を受け取る関数であることを明示的に表しているためわかりやすい。また、全ての配列オブジェクトを受け取れる。

###2.名前付き引数コード
仮引数を {プロパティ = デフォルト値,...} の形式で宣言することで、関数内では順番に評価するのではなく個別の引数として扱える。

```js
function calcAvr({math = 80,english = 90, japanese = 70}){
  return (math + english + japanese)/3;
}
console.log(calcAvr({math：70,english：80,japanese：90}));
```
また、下記のようにオブジェクトから特定のプロパティを取得することも可能。

```js
let user = {
  uid: 'u001',
  name: '鈴木',
  team: 'A'
}

function userNm({name}) {
  console.log(name);
}

userNm(user);//鈴木
```

##■さいごに
JavaScriptはこれまで業務で使う中では付け焼き刃的に対処してきたので、ちゃんと基礎固めしたいと思い、冒頭で述べた本を使って勉強中です。
また残しておきたいトピックがあれば更新します！
DeepLearningやってみたいけど、環境構築が面倒な人のためのGoogle Colaboratory入門

DeepLearningを勉強する上で、最初にぶつかる大きな壁、それが**環境構築**である。

この問題を解決するための手段として、Google Colaboratoryの利用をオススメしたい。

# オススメしたい人

以下に該当する方に、Google Colaboratoryの利用をオススメします。

* Pythonを用いたデータ分析の経験がある（scikit-learn, pandas, matplotlibなどを用いて）
* Jupyter notebookを好んで利用する
* DeepLearningについて基本的なことは知っているが、実装経験はない（or 少ない）
* Google Colaboratoryを知らない、あるいは知っているが難しそうな印象を持っている
* DeepLearningを勉強しようとして、環境構築の手順の煩雑さで、嫌な気分になったことがある

上記のうち、3つ以上該当する人には、Google Colaboratoryの利用がオススメです！
特に環境構築で苦労したことがある人であれば、今までの苦労は何だったのだろうか、と思うはずです。

# Google Colaboratoryの簡単な使い方

### ①Google Colaboratoryのサイトにアクセス（※Googleアカウントは必要）

↓このような画面が表れます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254780/6a9f71da-3ea8-b6d4-2426-df15f5becf2c.png)

Googleアカウントを持っている場合、クレジットカードの登録など面倒な手続きは一切不要。
とても簡単に使い始めることができます。

ここでは、試しにPython3の新しいノートブックを選択してみます。
（Python2系を選択することも可能です）

### ②自分好みに設定を変更する

新しいノートブックを開くと、下のような画面が表れます。
jupyter notebookのような見た目で、操作性もほぼ同じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254780/b7da9ec5-a3c6-8c2a-2e5d-9d86f8e3a6e2.png)

Google Colaboratoryには、データ分析、DeepLearningに必要な基本的なライブラリが大体インストールされています。

例：

* データ分析系
 - scikit-learn, pandas, matplotlibなど
* DeepLearning系
 - tensorflow, theano, keras, chainer など

ローカルにデータ分析用の環境構築を行う場合、Anacondaを利用することが私は多いのですが、DeepLearning用の環境構築の場合、そこから先が長くて苦労する。。

DeepLearning系のライブラリが大体揃っている（かつ依存関係の問題が生じていない）のは非常に助かります。

どんなライブラリがインストールされているかは、pip listコマンドで確認できます。

```
!pip list
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254780/012b07ea-8b97-42aa-5db4-c51e7b7d86a3.png)

当たり前なのですが、先頭に!をつけるだけで、Linuxコマンドを使えるのも便利だなーと感じます。

続いて、GPUの利用方法について説明します。
「編集」→「ノートブックの設定」→「ハードウェアアクセラレータ」→「GPU」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254780/4739a67c-8747-9ec7-d26e-35b07c7785e2.png)

驚くなかれ、**これでGPUを利用することができるようになります。**

経験のある人であれば分かると思いますが、
GPUを利用できる環境を、ローカルに自前で構築するのは茨の道です。具体的には以下のような苦労を伴います。

* GPUの選定と購入
* GPUの自前PCへの取り付け
* CUDAのインストール
* 利用したいDeepLearning系のライブラリとの相性確認（←ここが大変）
 - 購入したGPU固有の問題により、動かないことがある
 - CUDAのバージョンにより、動かないことがある
 - ライブラリのバージョンにより、動かないことがある（しかもDeepLearnig系のライブラリは大幅な仕様変更が頻繁に発生する！）
 
DeepLearning用の環境構築で苦労した経験のある方は、是非一度、設定の簡単さを体験してみてください！

### ③Google Colaboratoryを利用してDeepLearning!

ここまで準備が整えば、tensorflowなり、Kerasなり、Chainerなり、思う存分DeepLearningの勉強に励むことができます。

以降のことを解説している記事はたくさんあるので、他の記事の紹介のみに留めます。

【秒速で無料GPUを使う】深層学習実践Tips on Colaboratory
[https://qiita.com/tomo_makes/items/b3c60b10f7b25a0a5935](https://qiita.com/tomo_makes/items/b3c60b10f7b25a0a5935)

TensorFlowチュートリアル - ML初心者のためのMNIST（翻訳）
[https://qiita.com/KojiOhki/items/ff6ae04d6cf02f1b6edf](https://qiita.com/KojiOhki/items/ff6ae04d6cf02f1b6edf)

脳死で覚えるkeras入門
[https://qiita.com/wataoka/items/5c6766d3e1c674d61425](https://qiita.com/wataoka/items/5c6766d3e1c674d61425)

ディープラーニング入門 Chainer チュートリアル
[https://tutorials.chainer.org/ja/]
(https://tutorials.chainer.org/ja/)

# まとめと今後

DeepLeraningの環境構築で嫌な気分を味わったことのある人は、Google Colaboratoryを是非試してみてください！
次回は、DeepLearningの勉強をしていて遭遇した、ちょっと面倒だった問題と、その解決策について投稿予定です。
【GAS】スプレッドシートから書式も含めて他のスプレッドシートへコピーする方法

# 書いた経緯
同じスプレッドシート内であれば、簡単にコピーできるけど違うスプレッドシートにコピーする場合はひと手間加える必要があったため


## 同じスプレッドシート内でのコピー方法

まずは同じスプレッドシート内でコピーするスクリプトです。

```javascript
function copyToOtherSht() {
  var ss = SpreadsheetApp.openById('スプレッドシートID');

  var getRange = ss.getSheetByName('シート1').getRange('A1:C3');
  var setCell = ss.getSheetByName('シート2').getRange('B4');
  
  copyRange.copyTo(setCell);
}
```

注意点としては、CopyToメソッドはその前にシートオブジェクトを置くか、Rangeオブジェクトを置くかで()で指定するオブジェクトが変わってきます。

```javascript
Sheetオブジェクト.copyTo(Spreadsheetオブジェクト);
Rangeオブジェクト.copyTo(Rangeオブジェクト);
```

## コピー先を違うスプレッドシートにしてみる

```javascript
function copyToOtherSht() {
  var getsht = SpreadsheetApp.openById('スプレッドシートID(コピー元)').getSheetByName('シート1');
  var getRange = getsht.getSheetByName('シート1').getRange('A1:C3');
  
  var setCell =  SpreadsheetApp.openById('スプレッドシートID(コピー先)').getSheetByName('シート1').getRange('B4');
  
  getRange.copyTo(setCell); //ここでエラーになる
}
```

すると下記のエラーが出ていまします。
![2019-07-15_15h44_33.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428239/9a224484-dd74-113c-f717-d66687820b8d.jpeg)
エラー内容どおり、copyToメソッドでは異なるスプレッドシートへコピーはできないようです。


## エラーを回避して違うスプレッドシートへコピーする方法

上記のエラーを回避するために下記の手順を踏みます。

1. コピーしたいシートをコピー先のスプレッドシートに移動
2. コピーした先のスプレッドシートでコピーしたいRangeを指定
3. コピー先を指定してコピー実行
4. 移動させたシートの削除

```javascript
function copyToOtherSht() {
  var getSht = SpreadsheetApp.openById('スプレッドシートID(コピー元)').getSheetByName('シート1');
  
  //1. コピーしたいシートをコピー先のスプレッドシートに移動
  var activeSs = SpreadsheetApp.getActiveSpreadsheet();
  var copySht = getSht.copyTo(activeSs);
  
  //2. コピーした先のスプレッドシートでコピーしたいRangeを指定
  var getRange = copySht.getRange('A1:C3');
  
  //3. コピー先を指定してコピー実行
  var setCell = activeSs.getSheetByName('シート1').getRange('D2');
  getRange.copyTo(setCell);
  
  //4. 移動させたシートの削除
  activeSs.deleteSheet(copySht);
}
```
【rails】入れ子になったformの作り方（rspecも）

railsで中間テーブルも含んだformをつくるのになかなか苦労したので記事にしました。
誰かの役に立てば幸いです。

# やりたいこと
- 母のデータはすでに登録してある
- 父を登録するときに子供の情報も同時に登録する
- そのときに母のデータも関連づけて保存

## model

```ruby:father.rb
has_many :children, dependent: :destroy
has_many :mothers, through: :children
accepts_nested_attributes_for :children, allow_destroy: true
```
```ruby:mother.rb
has_many :children, dependent: :destroy
has_many :fathers, through: :children
```
```ruby:child.rb
belongs_to :father
belongs_to :mother
```

## controller
```ruby:father_controller.rb
private
  def father_params
    params.require(:father).permit(:name, :children_attributes: [:id, :mother_id, :age, :_destroy])
  end
```

## view
```ruby:new.html.haml
= simple_form_for @father do |f|
  = f.input :name, place_holder: "名前", label: false
  - @mothers.each  do |mother|
    = f.simple_fields_for :children, mother.children.build do |tif| # 母と紐付け
      = tif.input :age, place_holder: "子供の年齢", label: false
      = tif.input :mother_id, as: :hidden, value: mother.id # ここで母親のidを子に持たせる
  = f.submit "登録"
```

これで父と母、両方の情報を持った子が登録できます。

# RSpec
テストでの情報の作り方に一番苦労した…
なぜかというと、上のnewの画面では登録ボタン→確認画面→同意ボタン→登録という流れを取っていました。
つまり、事前にデータを用意せず、テストの中で情報を登録させる必要がありました。
以下、テストコードになります。

```ruby:children_spec.rb
require 'rails_helper'

feature '親子情報の登録' do
  context '親子情報が有効な場合' do
    let!(:mother) { create(:mother, name: "花子") }
    let!(:father){ Father.new(name: "太郎") } # この時点ではまだcreateさせない

    before { visit (登録画面のurl) }

    scenario '登録できること' do
      father.children.build(mother: mother, father: father, age: 1) # ここで子供の情報をbuildさせ
      father.save # ここで同時に保存

      # 以降保存できていることの処理
    end
  end
end
```
肝はデータをつくるときにcreateでなくnew→saveの流れを取ること。
ここでは同時保存の流れを取っているため、createさせてしまうと子情報を持たないfatherが作られてしまい、いくら子をbuildさせても同時保存されず、fatherがnilになってしまう。

複雑に絡んだテーブルだったためなかなか時間を割いたが、冷静に考えれば単純なことだった…
AWS AppSync上でUser Poolsを使ってログインする

# はじめに
AWS AppSyncを使い、初めてのGraphQLに挑戦しています。個人的に引っかかった箇所があったため、ノートとして書き留めておきます。

# Authentication error
AppSyncには"Queries"という機能があり、ブラウザ上でGraphQLのクエリを記述し、AWS DynamoDBからデータを取得することができます。APIエンドポイントの設定に依存していると思うのですが、GraphQLのクエリを実行する際に以下のようにJWTを要求されることがあります。
<img width="504" alt="JWTerror.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59834/aba90ef0-be32-c481-e299-bdaf8aec0cea.png">

# エラーを解決する
この場合、実行ボタンの横にある`Login with User Pools`ボタンをクリックしてユーザーログインを行うことで解決することができます。
ボタンを押すと以下のモーダルが表示されます。
<img width="303" alt="Login_via_Cognito_User_Pools.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59834/8d7f9675-69d2-2c9d-566f-8006bcc0fa88.png">

ここで以下の項目を求められます。
- ClientId (User pool Client ID)
- Username
- Password

これらはいったいどこにあるのでしょう？

## ClientId (User pool Client ID)
AWS Cognitoにありそうなことが"Login with User Pools"の名前から察することができます。
AWS Cognito > App integration > App client settings から以下の画面にたどり着くことができます。
<img width="548" alt="clientId.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59834/b78d2c0f-982e-c570-bd02-7e41080527e3.png">

ここで記載されている`ID`が該当するIDになります。

## Username
該当するUser poolに登録されているUsernameです。自分でサインインしたユーザーを選択してください。
<img width="550" alt="userPool.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59834/619a0e58-b6a4-546f-4ac9-e06c6603398f.png">


## Password
Usernameで設定したユーザーでサインインした時のパスワードを設定します。

# Queryを実行してみる
再度AppSyncに行き、Queryを実行してみましょう。`"data" : {}`の形で結果が表示されるはずです。
<img width="503" alt="success.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59834/153bc412-b47e-915e-5d8d-7a204bce4e3e.png">

# おわりに
AppSyncを理解するのに手間取っていますが、理解できたらGraphQLの理解をするためには便利そうです。みなさんどうやってAppSyncを勉強しているのでしょうか？コメント等で教えて頂けたらありがたいです。
Mastodon(non-Docker)を構築&アップデートするためのスクリプトを作った

# TL;DR  
Mastodon自鯖勢増えろ～というやつ.  
Mastodon本体の設定を入力する場面以外はほとんど手放しで構築できるようにしました．

<https://github.com/nesosuke/mastodon-install-script>

- install.sh : 構築に使う  
- update.sh  : アップデートするのに使う  

(注)どちらも`mastodon`ユーザーで実行すること  

## 検証環境  
Debian 10 on VirtualBox  
Debian 9.7 on ConoHa VPS  

公式インストールガイドはこっち
<https://docs.joinmastodon.org/administration/installation/>  

---  
# 構築
  
## ユーザー`mastodon`の作成  
  ```  
  sudo adduser mastodon
  sudo adduser mastodon sudo
  ``` 

## `install.sh`を実行.  
  ```  
  sudo -u mastodon bash install.sh
  ```  

## サーバードメインの指定
Input your server domain と聞かれるので,立てたいサーバーのドメインを指定する.  
httpsはつけず, `mstdn.example.com` のみで書く.   

```  
  Input your server domain w/o "http" (e.g. mstdn.example.com) > mstdn.exmple.com
```  

## SSL証明書を発行する(選択)
Obtain SSL Cert ? [y/N] と聞かれるので,前項で指定したドメインでSSL証明書を同時に取得する場合のみ`y`または`Y`とする.  
  すでに発行しているものや別途発行する場合は`N`とする.  

## RubyのインストールやMastodonのコンパイル
待つ.     
特にやることはないが,ビルド時間によっては`sudo`のパスワードを再度入力する必要あり.  

## Mastodonの初期設定  
1. ドメインを聞かれるので最初に記入したドメインと同じものを書く.  
1. シングルユーザモードかどうか聞かれる. 自分だけで使うなら`y`.  
1. DBやREDISの項目はEnter連打でもいい. 外に出すなら適宜設定する.  
1. サーバーから送られるメールについての設定を聞かれる.  
    - アカウントのパスワードを忘れたときや,他のMastodonサーバーからの通報の通知を受けられる.  
    - Enter連打でもMastodonは使えるが設定するべき.  
    - Mailgunなどがあるが,めんどくさがりのぼくはgmailのアカウントを作ってそこからメールが飛ぶようにしている.
    - gmailを使う場合, smtp server: `smtp.gmail.com`, user: `<gmailのユーザー名>@gmail.com`, password: `<gmailのパスワード>` を記入しEnter連打. 
    - smtp from address はメールの差出人名を変えられる.お好みで.  
1. 以上の設定が終わると管理者アカウントの作成を聞かれる.  
    - デフォルトIDは`admin`　　
    - **シングルユーザモードで使う場合には,ここを自分が使うつもりのIDに変えておく.** 
    - 初回ログイン用のワンタイムパスワードが発行されるのでこれでログインすると自分だけのMastodonサーバーが使えるようになる.(ログインしたらパスワードを変えておくこと)   
1. 最後にMastodon用のDBの作成とMastodonのコンパイルをするか聞かれるので,どちらも`y`とする.  
1. 全行程おわり.おつかれさまでした.  

---  
# アップデート  
```  
bash update.sh
```
- master追従で更新される.
- 安定版でのアップデートの場合はコメントアウトを変更して

```update.sh  
#git pull
git fetch 
git checkout ~~~~
```  
とすること.  

- こちらもビルド時間によっては`sudo`のパスワードを再度入力する必要あり.

---
Node.jsでGoogle Drive上のファイルを削除する (Google Drive API v3)


Google Drive APIをNode.jsから触る以下の記事たちの続きです

* [Node.jsでGoogle Driveの指定フォルダからファイル一覧を取得メモ](https://qiita.com/n0bisuke/items/ff1479cd14e7a0c0be0c)
* [Node.jsでGoogle Drive上のファイルを複製（copy）する](https://qiita.com/n0bisuke/items/6d73bb6e1af123db9a9b)
* [Node.jsでGoogle Drive上のファイルを指定フォルダに移動する](https://qiita.com/n0bisuke/items/8f108408a9e1067b9225)
* [Node.jsでGoogle Drive上のファイルをリネームする](https://qiita.com/n0bisuke/items/dcc7be337a555b018b19)

メソッドは[delete](https://developers.google.com/drive/api/v3/reference/files/delete?authuser=1)を使います。

今までやった中で一番シンプルかも

## スコープ

スコープは以下の三つなのでリネームなどで利用したものを再利用できますね

```
https://www.googleapis.com/auth/drive
https://www.googleapis.com/auth/drive.file
https://www.googleapis.com/auth/drive.appdata
```

## 基本はリネーム時のdrive.files.update()のコードで

チュートリアルコードのlistFiles関数をmain関数として定義しなおして以下のように呼び出します。

```rename.js
//省略

function main(auth) {
    const targetFileId = `xxxxxxxxxxxxxxxxxxxx`; //削除したいファイルID

    const drive = google.drive({version: 'v3', auth});
    const params = {
        fileId: targetFileId,
    };

    drive.files.delete(params)
    .then(res => console.log(res))
    .catch(err => console.log(err));
}
```

## 所感

他ので慣れてきたのでこれはかなり簡単。
前回のコピーと移動のあたりで複数参照しているファイルを消すと複数の参照元から消えるので注意。
DoxyfileなしでDoxygenドキュメント作成とdoxyapp

# 概要
この記事は[DoxygenPreviwer](https://qiita.com/hakua-doublemoon/items/c328a7bf0bc7a1fbef14)のMaking第二弾で、今回はdoxyappとかDoxygenのソースコードをさまよった話を（そして大したところには行きつかなかった話を）書きたいと思います。

## やりたかったこと

解決したい問題は前も書きましたがこれですね。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227756/527442f2-5b0c-1f68-dbee-7c2d2694d685.png" " width=60%>

解決策としては:

1. Doxygenコメント（DoxygenのSpecial Comment Blocksの中身を簡単にこう呼ぶことにします）の中身を静的解析する
2. ソースコード全体ではなく部品だけでドキュメント生成することですばやく確認できるようにする

という選択肢があるでしょう。
Doxygenのプログラムではどのような解析をしているか、解析したデータを横取りして利用することはできないか、その調査のためにDoxygenの中身を調べました。

# Doxygenの中身調査
## doxygenプログラムの構造

```src/main.cpp
int main(int argc,char **argv)
{
  initDoxygen();
  readConfiguration(argc,argv);
  checkConfiguration();
  adjustConfiguration();
  parseInput();
  generateOutput();
  return 0;
}
```

こんな感じで、InputをparseしてOutputをgenerateします。それぞれの関数の実体はひとまずsrc/doxygen.cppにあります。
src/doxygen.cpp以下、doxygenのプログラム全体はクラスを使ったc++ですがcみたいなstatic関数やグローバル変数の使い方も多いので……処理とデータの流れを追うことは難しいです。
あと、doxygenのコードはdoxygenコメントが少ないです。

## どのようにparseしているか？
parseInput()を掘っていくとdoxygenの特殊コマンドを解析しているのはここだろうという部分は見つかります。

```src/cmdMapper.cpp
Mapper *Mappers::cmdMapper     = new Mapper(cmdMap,TRUE);
Mapper *Mappers::htmlTagMapper = new Mapper(htmlTagMap,FALSE);

int Mapper::map(const char *n)
{
  QCString name=n;
  if (!m_cs) name=name.lower();
  int *result;
  return !name.isEmpty() && (result=m_map.find(name)) ? *result: 0;
}
```

```src/cmdMapper.cpp
CommandMap cmdMap[] =
{
  { "a",             CMD_EMPHASIS },
  { "addindex",      CMD_ADDINDEX },
  { "anchor",        CMD_ANCHOR },
  { "arg",           CMD_LI },
:
```

特殊コマンドの一覧をマップ化し、解析結果を整数で表現しているようです。

## parseしたデータはどうなったか？
このデータ構造が垣間見れる個所はたぶんここです:

```src/docparser.cpp
  if (Debug::isFlagSet(Debug::PrintTree))
  {
    // pretty print the result
    PrintDocVisitor *v = new PrintDocVisitor;
    root->accept(v);
    delete v;
  }
```
デバッグフラグを何とか設定するかコードを書き換えると例えば下記のようなデバッグ表示を見ることができます。

```
<root>
.<para>
..<simplesect type=note>
...<para>
....hogehogehoge
...</para>
:
```

この```root->accept(v);```のrootが何かしらのデータを持っていることが推測されます。アクセスの様子からツリーのような構造、データのクラスになっていることがわかります。このデータのクラスはQtのクラスをベースにはしていますが、結局は独自実装なので第三者がパッと見て解析できるような代物でもないです。
というわけでこのデータを利用することは諦めました。

# ソースコード単体でのDoxygenドキュメント作成とdoxyapp
データの利用は諦めましたが、ソースコード全体をさまよっているうちに、Doxygenのソースコード一式にはaddonフォルダがあり、中にdoxyappというものがあることに気付きました。
doxyappのbriefはこう書いてあります。

> Example of how to use doxygen as part of another GPL applications

（GPLなのがちょっと気になりますが）doxygenをカスタマイズするのに使えそうです。
動かしてみると、Doxyfileなしで動作し、ソースコードを解析してシンボルを取り出しているようでした。
なのでちょっと改造すればDoxyfileなしでDoxygenドキュメントを作成できるようになりました。どう改造したかは[ソースコード](https://github.com/hakua-doublemoon/DoxygenPreviewer/blob/master/src/doxyapp.cpp)をごらんください。

# まとめ
総括して言えるのは、やっぱり他人のコードを見るのは大変だということでした。Doxygenは日々メンテナンスされていますが、あれをいじれるのはすごいと思います。
そしてこの一連の記事のアクセス数も大したことないので、まあ今どきCのためのドキュメントをせっせと作る人もどんどん減ってるんだろうなーと思いました。
DI(Dependency Injection)優良記事まとめ(Swift)

# 概念
**・[猿でも分かる! Dependency Injection: 依存性の注入 - Qiita](https://qiita.com/hshimo/items/1136087e1c6e5c5b0d9f)**

# 実践
**・[1分で分かる Dependency Injection in Swift - Qiita](https://qiita.com/kusumotoa/items/c924d5c67282fd11f664)**
→`シングルトン`, `DIの概念の要約`, `DIコンテナ`
**・[テスト初心者がswiftでカンタンにDIするならinjectメソッドを作ろう - Qiita](https://qiita.com/k-boy/items/748d77d172d5984f8ecf)**
→サンプルコードがわかりやすい、細かい**なぜ**に答えている
**・[[Swift] Swinjectを使ったDependency Injection ｜ DevelopersIO](https://dev.classmethod.jp/smartphone/swinject-dependency-injection/)**
→`Swinject`, `Service登録処理(SwinjectStoryboardの有無)`
【Postman】Getメソッドで配列を渡す時にどう書くか

# 経緯
Postmanを使うとき、
Postする際は配列をそのままJSONで渡すだけでいいが、
Getの場合は配列をどう渡せばいいのかよくわからない。

# 方法

`hoge: [10, 3]`  を渡す場合

- KEYに `hoge[]` と書く
- valueに配列内の要素を書く
- 上記を配列内の要素数分繰り返す

# 画像
![postman](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46299/d3f54197-6215-04c9-2789-251d3d6a1c73.png)

# 連想配列
`hoge: { piyo: [10, 3]}` を渡す場合下記のようになる

|KEY|VALUE|
|---|---|
|hoge[piyo][]|10|
|hoge[piyo][]|3||


# 参考
[RailsでGETメソッドのクエリストリングで配列を渡したい時にどうするか](https://qiita.com/kikunantoka/items/6533198abc4adead0a84)
令和最初の記事　Windowsのフォルダーの表示名とアイコンを変更したい

令和最初の記事は「恋愛シミュレーションゲーム開発に使ってる浮動小数点演算用クラスを公開します」とか平成最後の記事で言ってましたけど、そのクラス自体の作成をやめることにしました。理由は演算コストです。int使う分正確さはあるんですけど、その反面計算が遅いという欠点があるので…
まあ終わった話は置いといて、本題に入りましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94629/6dfbf531-5e71-09f7-f47e-30b907bde2d4.png)

写真はみんな知ってるWindows PCのCドライブの直下です。まあCPUだったりインストールしてるソフトだったり設定だったりで存在するファイルやディレクトリは異なったりしますけどね
でもどのPCでも共通するのが

- Program Files
- Program Files (x86)
- ProgramData
- Users
- Windows

の５つ(32bit OSの場合はProgram Files (x86)を除く４つ)だと思います。
その中でもUsersは表示名が「ユーザー」となっています。ですのでPC初心者だと自分のユーザーのフォルダー(ここではユーザー名はreiwaとします)のフルパスはC:\\ユーザー\\reiwaだと思ってる人が多いんじゃないでしょうか？
でも結果は…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94629/aa76035a-fa1d-4a6f-6057-125d5c5162cc.png)
はい。ないんです。じゃあ正しいパスは何かというと、C:\\Users\\reiwaなんです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94629/3a73ed11-a877-c14c-18d1-69f753a23ddf.png)
reiwaのフォルダー内が空なのは何も言わないでください。そもそも私のPCにないユーザーアカウントのフォルダーを即席で作ったので
じゃあなんでUsersフォルダーは「ユーザー」という表示なのか？
それは、desktop.iniというファイルが鍵を握っています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94629/3955cb7d-2720-b6cf-10e6-cbf818068a54.png)
このファイルを使えば、フォルダーのパス名を変えずにフォルダーの表示名を変更できるんです。おまけにアイコンも変えることができます。それを利用してフォルダーの表示名とアイコンを私のPCでやってみました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94629/687c1152-abef-c188-033b-8540658d5ed1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94629/c6c0b952-ac9f-469f-5606-2a2c63c356d1.png)
はい、ほとんどのフォルダーがパス名と表示名が違いますね。おまけにアイコンもよく見る黄色いフォルダーじゃないですよね
これも全部desktop.iniでやった結果です。
そんなdesktop.iniの書式はこんな感じです

```ini:desktop.ini
[.ShellClassInfo]
LocalizedResourceName=令和ちゃん
IconResource=C:\\User\\reiwa\\Pictures\\reiwachan.ico
```

このファイルを作成して、表示名を変更したいフォルダーの直下に配置し、次のコマンドを叩きます。
今回は表示名を変更したいフォルダーのパスをC:\\Users\\reiwaとします。

```console:cmd.exe
Microsoft Windows [Version 10.0.18362.239]
(c) 2019 Microsoft Corporation. All rights reserved.

C:\Windows\System32>attrib +a +h +s C:\\Users\\reiwa\\desktop.ini

C:\Windows\System32>attrib +r C:\\Users\\reiwa

```

こうするとC:\\Users\\reiwaのフォルダーは表示名が「令和ちゃん」になります。
ただ、このファイル作ってattribコマンド叩いてってやるのも大変だと思いますし、他にもフォルダーに属性つけたいって人もいると思い、これをGUI操作でできるツールを作りました
~~このツールは現在[OneDrive](https://onedrive.live.com/?id=ED31FC1760021D62%21105&cid=ED31FC1760021D62)で公開しています。~~
もちろんCUIでもできます。コマンドラインについては/helpで確認できます。
> ##追記１
> 実行ファイルFolderViewNameChanger.exeにデジタル署名しました
> デジタル署名した実行ファイルは[こちら](https://www.meigetsu.jp/downloads/FolderViewNameChanger.7z)
> すでにOneDriveにアップロードしてるのと同じものではありますが、上のリンクでダウンロードできるものはデジタル署名してないので非推奨です。自分で挙動等を確認して自分でデジタル署名したいというのでなければこっちをダウンロードして下さい
Splash(スプラッシュ画面)を工夫した感じ(グラデーション)にしたい(Storyboard)

# 問題点
`LaunchScreen.storyboard`ではカスタムクラスが使えないらしい
→`View`の見た目はデフォだと`storyboard`ではいじれないから`hogehogeClass`をコードで書いて定義したれ！　ができない

# 解決策
1.`Adobe Xd`や`illustrator`などで自分で背景画像などなどを作成する
2.`Storyboard`に`UIImageView`を画面いっぱいに配置する
→画像1つだけでいいなら`中央固定`と`superViewに対してequal Width, equal Height`で制約は**OK**
3.imageに**1**で作成した画像を登録する

おしまい

# 参考記事
**・[Xcode - Xcode StoryboardだけでViewの背景色にグラデーションを使いたい｜teratail](https://teratail.com/questions/163774)**
Cloud9でLaravelプロジェクトをnewするまで

Cloud9でLaravelプロジェクトを作成してみたので、その時の手順をメモしておきます。

# Composerをインストール
```bash
curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /usr/local/bin/composer
```

# PHPを現時点で最新の7.3にアップデートする
```bash
sudo yum -y install php73 php73-mbstring php73-pdo
sudo unlink /usr/bin/php
sudo ln -s /etc/alternatives/php7 /usr/bin/php
```

# Laravelのバージョンを5.7に指定して、プロジェクトを作成
```bash
composer create-project laravel/laravel sampleapp --prefer-dist "5.7.*"
```

# Server起動
```bash
php artisan serve --port=8080
```


さて、これから作っていくぞ！
gitで管理しているエクセルファイルの差分を確認する

gitで管理しているエクセルファイルに修正が入った時に、確認するのが面倒だなーと思った時の話です。

# やりたいこと

エクセルファイルのセルの内容だけを差分比較するためにcsvファイルに変換してmasterブランチの状態と比較するスクリプトを作りました。
エクセルファイル(.xls)からcsvファイルへの変換にはpythonのライブラリである`csvkit`に含まれる`in2csv`というコマンドを使いました。
基本的に修正をする場合はgitでブランチを切ってプルリクを出す流れになっているため、作業ブランチとmasterブランチで比較する方法にします。

# 作業環境
| 環境 | バージョン |
|:-:|:-:|
|macOS|High Sierra 10.13.6|
|python|3.6.4|
|csvkit|1.0.4|

python2系でcsvkitをインストールしようとしたらエラーになったことがあるので、python3系を使う方が望ましいと思います。

# 方法
python3とpipが使える状態を想定しています。

まずはインストール

```
pip install csvkit
```

これが成功するとグローバルにscvkitがインストールされて、in2csvというコマンドが使えるようになります。
階層を指定してインストールするならばコマンドのフルパス指定すれば使えるようになるはずです。

この状態で下記のようなシェルスクリプトを作って実行すると、対象のディレクトリに含まれてるエクセルファイルの中身の差分を簡易的に表示させることができます。

```bash

#!/bin/bash

# 使うパスを変数に入れておく
SCRIPT_ROOT=$(cd $(dirname $0);pwd)
PROJECT_ROOT=$(cd $(dirname $0);cd {検証スクリプトからプロジェクトルートまでの相対パス};pwd)

# git archiveを使うため、プロジェクトルートに移動しておく
cd ${PROJECT_ROOT}

EXCEL_DIR="path/some_excel_file_dir"

MASTER_RULE_ROOT="${SCRIPT_ROOT}/tmp"
CURRENT_RULE_ROOT="${PROJECT_ROOT}/${RULE_DIR}"

mkdir -p ${MASTER_RULE_ROOT}

# masterブランチの特定フォルダをtmpディレクトリ以下におく
git archive master:${EXCEL_DIR} | tar -x -C ${MASTER_RULE_ROOT}

for current_file in `find ${CURRENT_RULE_ROOT} -name "*.xls"`
do
    target_file_name=$(basename $current_file)
    master_file=$(find ${MASTER_RULE_ROOT} -name "${target_file_name}")
    echo $target_file_name
    diff <(in2csv $current_file 2>/dev/null) <(in2csv $master_file 2>/dev/null)
done

# 使い終わったので削除
rm -rf ${MASTER_RULE_ROOT}
```
MacのalacrittyでPowerline fontが?になる時の対処法

MacのAlacrittyでPowerline fontをconfigで設定しているのにPowerline fontが?になって悲しいときの対処法

# 前提

- [Powerline fonts](https://github.com/powerline/fonts)がMac入っていること
    - `Font Book.app` で確認可能
- Powerline fontを[alacrittyのconfig](https://github.com/jwilm/alacritty/wiki/Changing-the-default-font)で設定していること

# 対処法
`~/.config/alacritty/alacritty.yml` に以下を追加する

```yaml
env:
  LC_CTYPE: en_US.UTF-8
  LANG: en_US.UTF-8
```
きゅうりのことはじめ

# Cucumberとは
最近CSD研修を受け初めてCucumberの存在を知りました。
「きゅうり」という何だかよくわからないワードに強烈に惹きつけられました。
以下[公式ドキュメント](https://cucumber.io/docs/guides/overview/)からの引用です。
> Cucumber is a tool that supports Behaviour-Driven Development(BDD).
Cucumber reads executable specifications written in plain text and validates that the software does what those specifications say. 

要約すると、きゅうりはBDDを支援するためのツールで平文で書かれたシナリオとテストコードの紐づけをしてくれます。

```gherkin
Scenario: 検索する
  Given 文字列を入力する
  When 検索ボタンを押す
  Then 検索が実行される
```

このようにシナリオのステップを列挙していき、プロダクトが仕様に沿って作られていることを確認します。
また、このシナリオの集合体をフィーチャー（機能）と呼びます。そして、Cucumberがシナリオを理解するための構文規則をGherkinと呼びます。

##Gherkin?

Gherkinってなんだ？と思い、調べてみました。
> (酢漬け用)小キュウリ、ガーキン

###またきゅうりかよ！！！
どんだけきゅうり推しなんだよ・・・
ここでふと思ったのが、そもそもなんでCucumberって名前なのか。BDD支援ツールときゅうりの関連性が全く思い浮かばびません。
公式ページでも調べてみましたが、名前の由来には特に言及されていませんでした。
情報を漁っていたところ、作者であるAslak Hellesøy氏のインタビュー記事に名前の由来が書いていました。
https://www.infoq.com/news/2018/04/cucumber-bdd-ten-years/
> My wife suggested I call it Cucumber (for no particular reason), so that's how it got its name. I also decided to give the Given-When-Then syntax a name, to separate it from the tool. That's why it's called Gherkin (a small, pickled Cucumber).

### for no particular reason（特に理由はないのですが）

！？

## Cucumberを使うメリット
少し話が脱線してしまいましたが、ここでCucumberを使うメリットについて考えたいと思います。
### ATDDを可能にする
Cucumber自体はBDDの支援ツールと銘打っていますが、CSD研修ではもう少しスコープを拡大し、ATDDにてCucumberを利用してました。
ATDD(受入テスト駆動開発)だと何がいいのか。ATDDのスタートはまずその名の通り、受入基準の仕様書を書くところから始まります。その受入テスト仕様書を自然言語で書くことができ、それがそのままテストコードと紐づきます。
これがCucumberを使ったATDDの一番のキモで以下の恩恵を受けることができます。

1. 企画と開発の仕様に関する認識のズレをなくす
2. featureファイルを見れば誰でもプロダクトの機能仕様を把握できる
3. コードと直結する信頼性の高い仕様ドキュメントが必然的にできあがる
4. CIと連携することにより手動テストの削減できる

1に関してはもう企画がfeatureファイル書いちゃえばいいんじゃないかと個人的に思います。
2,3ができることでコードの属人化が防げるのではないかと思います。
4についてはATDDは受け入れテストなので、自動化によってそのままリリース前テストのコスト削減に繋がります。

### Cucumberを使ったATDDをiOS開発へ
私自身普段はiOSエンジニアなので、CSD研修で学んだこのATDDの仕組みをiOSにも取り入れられないか模索しました。(研修ではJavaを用いたWebアプリケーション開発でした)
以下実際に構築したiOSにおけるシステム構成です。
![_Cucumber Workflow (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457333/20a2c2f6-87bc-0e2e-ed4b-b2c4b32754b9.jpeg)
Stepsの定義までをGherkinが担い、以後のテストをJavaメインに作りました。
JUnitのテストランナーとしてCucumberを指定し、端末制御をAppiumのJava Client Libraryにて行なっています。
[JUnitを使用してキュウリシナリオを実行する](https://cucumber.io/docs/cucumber/api/#junit)

### 適用範囲
実際にCucumberを用いATDDできる環境を整え、実際に様式通り開発を行えれば理想的だとは思います。
ただ、正直TDD自体コストが高いので人材が潤沢なサービスであればいいですが、そうでなければなかなか厳しいかなとは思います。
なので、まずは回帰テストなど繰り返し行う部分をCucumberを用いたシステムで自動化してあげて必要最低限のプロダクトの仕様書の作成と手動テストの削減を行うのがいいのかなと思います。
JSでブラウザ毎にメソッドが対応しているかを判定して条件分岐をする

暗号化に使える[Crypto.subtle](https://developer.mozilla.org/ja/docs/Web/API/Crypto/subtle)を例にとってみる。最近のブラウザであれば `crypto.subtle` が使えるが、httpだと動かないし、IEは部分対応となっている。

`crypto.subtle`が使える場合と使えない場合で処理を分ける場合にどのようにやるのか調べてみた。


## typeofで判定をする
http,httpsのページで実行をしてみればわかるが、typeofで判定をすればそのブラウザで使用できるのかどうかがわかるため、条件分岐ができる。

```javascript
if (typeof crypto.subtle === 'object') {
// ブラウザでcrypto.subtleが使えるので、そのまま
  crypto.subtle.importKey();
} else {
  // 何かしら他の処理をする
}
```

chromeのhttpsのサイトで実行してみた結果

```
typeof crypto.subtle
"object"
```

chromeのhttpのサイトで実行してみた結果

```
typeof crypto.subtle
"undefined"
```
[Rails]テーブルにおける制約の種類まとめ

#制約とは
Railsに関してマイグレーションファイル（テーブル作成の設計図）に特定の記述を行うと、
テーブルのカラムやレコードにある特定の条件（これを制約という）を設ける事ができる。

簡単にいえば、テーブルの設計図に特定の記述を行うとテーブルに「この値は入れる事が出来ません」などの設定が可能。

##NOT NULL制約

NOT NULL制約は特定のテーブルの属性値にNULL（空の値）が入ることを許さない（NOT）制約です。
例えば、以下のようにusersテーブルのnameというカラムにNOT NULL制約を設定すると
nameが空(nil)レコードは保存できなくなります。

NOT NULL制約を付けたいカラムの末尾にnull: falseを付けます。


```ruby:マイグレーションファイル
class CreateUsers < ActiveRecord::Migration
  def change
    create_table :users do |t|
      t.string :name, null: false
    end
  end
end
```

##一意性制約

一意性制約はテーブル内で重複するデータを禁止する制約です。
例えばユーザーに同じアドレスで登録してほしくない時などに設定します。
emailカラムに対して一意性制約を設定すると同じemailのレコードは保存できなくなります。

Railsではadd_indexメソッドを使用してその後unique: trueを末尾につける事で使用可能です。


```ruby:マイグレーションファイル
class AddEmailToUsers < ActiveRecord::Migration
  def change
    add_column :users, :email, :string
    add_index :users, :email, unique: true
  end
end

```

##主キー制約


主キー制約は、主キーである属性値が必ず存在してかつ重複していないことを保証する制約です。
主キーに対してNOT NULL制約と一意性制約を両方設定するのと同義になります。

Railsでテーブルを作成する際、主キー制約は元々実装されています。
Railsでは主キーはidカラムとして自動で作成されます。つまりidカラムの値は重複しないようにできています。

##外部キー制約

外部キー制約は、外部キーの対応するレコードが親元のテーブルのレコードにも必ず存在しなくてはいけないという制約です。
外部キーのカラムに値があっても、その値を主キーとして持つ他のテーブルのレコードがなければいけません。

外部キー制約を付けたいカラムの末尾にforeign_key: trueをつけます。
この時カラムの型がreferencesになっている事にも注意してください。

```ruby:マイグレーションファイル
class CreateScores < ActiveRecord::Migration
  def change
    create_table :scores do |t|
      t.string :name
      t.integer :score
      t.references :user, foreign_key: true
      t.timestamps null: false
    end
  end
end
```

いろいろな制約を使いこなす事で、サービスにおいて、ユーザー側からの意図しないデータの入力を防ぐ事が可能になります。
Web下からメニューを出すコード

#概要
初心者による覚え書きです。
下からにゅるっとメニューが出てくるアニメーションの記述方法。
[前回作成したボタン](https://qiita.com/homusuke/items/0a4acf60577f93e40cf4)を使用して作成します。

#コード

htmlに以下のようなnavigationを記述。

```haml:.html
<nav class="navigation">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Works</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
```

cssに書きを追記。普段、メニューは画面下へ隠しておく。

```css:.css
.navigation {
	position:fixed;
	top: 100%;
	left: 0;
	z-index: 10;
	width:100%;
	height: 100%;
	padding: 120px 0 150px;
	background-color: rgba(0,0,0,0.70);
	transition: all 0.5s;
}
.navigation.fix {
	top:0;
}
```

JavaScriptに以下を追記。ボタンを押すとfixクラスを追加/削除する。

```js:.js
$(".btn-trigger").on("click", function(){
	$(this).toggleClass("active");
	$(".navigation").toggleClass("fix");//追記
});
```

結果、transitionによってアニメーションで表現できますっと。
[Vue.js]npm run devのエラー解決方法[vue-cli]

## はじめに
    
Vueのプロジェクトを立ち上げる際に、`npm run dev`コマンドが実行できず、
ググってもなかなか原因がわからず詰まってしまったので、
自分が解決できた対処法を書いておきます。

## 環境
vue: 2.5.11
  
## 問題
  
 `npm run dev`をすると、

```
$ npm run dev

> myproject@1.0.0 dev .../myproject
> cross-env NODE_ENV=development webpack-dev-server --open --hot

internal/modules/cjs/loader.js:638
    throw err;
    ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (.../myproject/node_modules/webpack-dev-server/bin/webpack-dev-server.js:64:1)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! myproject@1.0.0 dev: `cross-env NODE_ENV=development webpack-dev-server --open --hot`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the myproject@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     .../.npm/_logs/2019-07-15T03_23_00_762Z-debug.log
``` 
上記のようなエラーがでてきました。
`webpack-cli/bin/config-yargs`をインストールしようとするもうまく行かず、
にっちもさっちも行かなくなっておりました。

## 原因

どうやら `package.json` 内で確認できる、`webpack` , `webpack-cli`, `webpack-dev-server` の  
verの組み合わせが適切でないと、エラーがでる模様。  

以下のver(記事を書いた段階での最新ver)に更新することで、 `npm run dev` の実行ができました。

```package.json
"webpack": "^4.35.3",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
``` 
  
## 解決方法

ターミナルで以下コマンドを実行することで解決できました。

`$ npm isntall --save-dev webpack@latest`
↓
 `$ npm install webpack-cli -D`
↓
 `$ npm isntall --save-dev webpack-dev-server@latest` 
↓
 `$ npm install vue-loader@latest`   
  

## さいごに

どなたかの為になると幸いです。
PHPでPOSTリダイレクト


PHPでPOSTリダイレクトする場合はパラメータを指定して渡すことはできないようです。その代わりに、引き継ぐようにして渡すことが可能です。


```php:input.php
<form action="redirect.php" method="post">

    メール：<input type="text" name="email">
    <input type="submit">

</form>
```


```php:redirect.php

    header('Location: https://example.com/post.php', true, 307);

```

```php:post.php

    echo $_SERVER["REQUEST_METHOD"] . '<br>';
    var_dump($_POST);

```

```php
POST
array(1) { ["email"]=> string(3) "test@example.com" }
```

参考リンク：
[ステータス303と307 - Do You PHP はてな](http://d.hatena.ne.jp/shimooka/20070320/1174369149)
[リダイレクト時のステータスコードには何を使えばいいか？ | 株式会社シンメトリック公式ブログ |](http://www.symmetric.co.jp/blog/archives/123)
Railsのfeature specにChrome Driverを使ったときの覚書

```ruby:Gemfile
gem 'capybara'
gem 'selenium-webdriver'
gem 'webdrivers'
```

```ruby:rails_helper.rbかどっかに書く
Capybara.register_driver :headless_chrome do |app|
  options = Selenium::WebDriver::Chrome::Options.new
  options.add_argument('--headless')
  options.add_argument('--disable-gpu')
  options.add_argument('--window-size=800,600')

  Capybara::Selenium::Driver.new(app, browser: :chrome, options: options)
end

Capybara.configure do |config|
  config.default_max_wait_time = 15
  config.default_driver = :headless_chrome
end
```

## CircleCIのArtifactsを活用する
以下のArtifactsの収集を行うセクションを`.config/circleci.yml`の中に用意しておくと、任意のディレクトリ内のファイルをビルド結果の画面から直接ブラウザで見ることができる。

```yml
      # collect reports
      - store_test_results:
          path: /tmp/test-results
      - store_artifacts:
          path: /tmp/test-results
          destination: test-result
```

![Selection_135.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18973/52d2f4d6-7f96-eaed-b29d-5f057c5d33ed.png)

なのでCircleCI上でfeature specがコケた際のブラウザの画面をArtifactsとして収集するディレクトリへスクショとして放り込んでおくと、サクッとデバッグできてよい。わざわざSSHでコンテナに入る必要もない。

以下のような関数を用意しておくと便利

```ruby
def take_screenshot
  page.save_screenshot "/tmp/test-results/screenshot-#{DateTime.now}.png"
end
```

# テスト例
```ruby
RSpec.feature "User", type: :feature do
  background do
    create(:activated_user)
  end

  scenario 'can get logged in if activated' do
    visit root_path
    take_screenshot # 遷移直後にスクショをとる
    click_on 'Log in'
    expect(page).to have_content 'Login to Slip.it'

    fill_in 'session_email', with: 'activated_user@example.com'
    fill_in 'session_password', with: 'password'
    click_on 'Login'
    expect(page).to have_content 'Add a new bookmark'
  end
end
```
【Windows】私的 VSCode ショートカットまとめ

#なにこれ
初心者プログラマーの自分がちまちま使ってきたVSCodeのショートカットのまとめです。OSはWindouwsです。随時更新予定。

#全般
`ctrl`+`Shift`+`p` コマンドパレットを開く
`ctrl`+`,` 設定を開く

`ctrl`+`z` 戻る
`ctrl`+`y` 進む

#コーディング
`ctrl`+`a` 全選択
`ctrl`+`c` 一行コピー
`ctrl`+`x` 一行切り取り
`ctrl`+`v` 貼り付け
`ctrl`+`[` インデントを下げる
`ctrl`+`]` インデントを上げる
`Alt`+`↑` `↓` 一行まるごと上下に移動
`Alt`+`Shift`+`↑` `↓` 一行まるごと上下にコピー
`ctrl`+`Shift`+`k` 一行削除

`ctrl`+`f` 検索
`ctrl`+`h` 置換

`ctrl`+`Enter` 下に空行追加
`ctrl`+`Shift`+`Enter` 上に空行追加

`ctrl`+`←` `→` 単語ごとの移動
`ctrl`+`g` 指定行に移動

`ctrl`+`/` 選択範囲をコメント/アンコメント


#画面操作
`ctrl`+`B` サイドバーの表示、非表示
`ctrl`+`J` ターミナルの表示、非表示
`ctrl`+`+` 拡大
`ctrl`+`=` 縮小
`ctrl`+`↑` `↓` 画面の移動

#ファイル操作
`ctrl`(+`Shift`)+`Tab` タブ移動（連続して押すと選択が変わる）
`ctrl`+`N` 新しいファイル
`ctrl`+`Shift`+`N` 新しいウィンドウ
`ctrl`+`S` 保存
`ctrl`+`Shift`+`S` 名前を付けて保存

#まとめ
特に使いやすいものを選びました。他に便利なショートカットがあればぜひ教えてください。
mobxはデバッグがやりづらい

# 始めに
Reactのデータ管理でよくReduxが挙がると思うのですが、これは一々アクションを定義して、reducerで値を返すように設定して・・・と割と面倒でした。これに対してmobxは1ファイルで完結できて、楽にデータ管理できるかと思って試してみました。ただやってみた結果、デバッグ周りで結構難点なところがあったのでそれをまとめてみました。

# 困ったところ
## データの確認がしづらい
mobxはES2015のProxyという機能を使っているようで、これによってデータをそのまま表示してもすぐには中身が分からず、クリックする必要があります。これはVuexもgetter、setterを使っていて似た状況になっていたので仕方ないと思っていたのですが、クリックしなきゃいけない回数が非常に多いです。。。
特にオブジェクト配列で、オブジェクトの中身を見るのに6回クリックしています。

![anim2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187768/54fe9cd0-92af-f722-dd60-a1a8d2066c27.gif)

## IE対応で4系に落とすと悲惨
IEだと今の5系のmobxは動かないようで、4系に落とさないといけません。

https://learnwebtutorials.com/does-mobx-work-with-internet-explorer-11

4系から5系の変更が結構大きくて、特に配列のデータ構成が大きく異なります。下のキャプチャ画像を見ればわかると思いますが、undefinedの要素が大量に作られてしまいます・・・。

![mobx3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187768/6f66a7ce-a892-559d-8425-3838c342b5d0.jpeg)

ちなみにこれは1000個作るようです。こんなことされたら更にデータの確認が辛くなりますね・・・。

![anim3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187768/59c308d6-f5a7-ed07-4eed-9ffbd75837c4.gif)

どうやら一度空のオブジェクトを用意して、そこに必要な項目を入れていくようです。おまけにこのデータは配列ではなくオブジェクトで実装しているので、PropTypesとかで配列として定義しているとエラーが出されます。エラーを避けるために配列なのにオブジェクト型として定義するという意味不明なことをしないといけなくなってしまいます。

僕はなんとかIEでも5系で動くようにsymbolとproxyのpolyfillを入れてみましたが、動作が不安定なようで、スタックオーバーフローになってしまって結局動きませんでした。

# 終わりに
mobxの機能自体は結構良かったと僕は思っています。しかし、データの確認が面倒だったり、5系でIE非対応なところがかなり痛かったです。4系のmobxはとても受け入れられなかったので・・・。とても惜しいですが結局今はReduxを使っています。皆さんもmobxを使う際はこの辺のことを検討したうえで使っていただけると幸いです。
それにしても、最近IEを切ってくるライブラリ増えましたね・・・。Swiperとか、querystringとか。
データベース管理システム

## データ検索

#### 射影
   - 目的の列を取り出すための演算
   - [Distinct]で重複したデータを表示させずに取り出す
   - Tab_Name As Tab_New_NameでTabの名前を変更して表示

```java:
Select * | [Distinct] Tab_Name From File_Name
```

#### 選択
   - 目的の行を取り出すための演算
   - 演算子(<>, =, AND, OR)を用いて条件付け
   - 述語(Between, In(num, num), Like %_%)を用いた条件付け
   - 優先順位は、括弧()・Not・And・Orの順である

```java:
Select * From File_Name Where Tab_Name = 'Sth'
```

#### 集合関数
   - データの集計を行うための演算
   - Sum(合計), Avg(平均), Max(最大値), Min(最小値), Count(件数)を用いる

```java
Select Avg(Tab_Name), Max(Tab_Name), Count(*)
From File_Name
```

#### グループ化
   - 集合関数と共に用いてデータをグループ化して集計
   - 同じ条件を持つデータを集計してグループ化する

```java
Select 集合関数 Tab_Name From File_Name
Where Tab_Name = 'Sth' Group By Tab_Name
```

#### グループの選択
   - データをグループ化し、そこから特定のグループを表示

```java
Select 集合関数 Tab_Name From File_Name
Where Tab_Name = 'Sth' Group By Tab_Name Having 'Sth'
```

#### 結果の並べ替え
   - 検索結果を昇順[Asc]もしくは降順[Desc]に並べ替える
   - 記入しない場合は、自動的に昇順となっている

```java:
Select Tab_Name From File_Name
Order By Tab_Name, Tab_Name [Asc | Desc]
```



## データの変更

#### 挿入
   - 新しいデータを付け加える
   - 指定した値(Values)もしくは副問合わせ結果(Select文)を追加

```java:
Insert Into File_Name(Tab_Name)
Values(num, 'Sth', ...)
Select * From File_Name Where Tab_Name = 'Sth'
```

#### 更新
   - 新しいデータに変更する
   - Where句を指定しない場合は、すべての行に反映

```java:
Update File_Name Set Tab_Name = num Where Tab_Name = 'Sth' | num
```

#### 削除
   - 表からデータを削除する
   - Where句を指定しない場合は、すべての行に反映

```java
Delete From File_Name Where Tab_Name = 'Sth' | num
```

#### トランザクション管理
   - データの変更処理(Insert, Update, Delete)の確定もしくは取消作業
   - **Rollback文**実行による変更処理の取消
   - **Commit文**実行による変更処理の確定
      - 一度Commitを実行するとRollbackで処理の取消はできない

```java
begin;      //トランザクション処理開始
Update;     //変更

Rollback;   //変更取消
Commit;     //変更実行
```

コミットしてデータベースの変更を確定してトランザクションを終了するか、ロールバックしてデータベースに対する変更を取り消してトランザクションを終了する。



## SQLによる検索

#### 表の作成
   - 表を作成する
   - データ型
        - Numeric(Num), National Character(String), Character(String)

```java
Create Table File_Name(Tab_Name データ型(num), ...)
```

#### 表の変更
   - 表を変更する
   - 列の追加(Add)や削除(Drop)を行う

```java
Alter Table File_Name
Add Tab_Name データ型(num) | Drop Tab_Name
```

#### 表の削除
   - 表を削除する

```java
Drop Table File_Name
```

#### 結合
   - 複数のテーブルを結合するための演算
   - 関連付けを行っている結合キーを基準に表結合を行う
   - 結合の条件(Inner, Left Outer, Right Outer, Full)を規定

```java
Select Tab_Name, Tab_Name
From File_Name1 Inner | Left Outer| Right Outer Join File_Name2
On File_Name1.Tab_NameA = File_Name2.Tab_NameA
```

#### 副問合わせ
   - 問合わせの結果をさらに問合わせる
   - 副問合わせの結果が複数の行を返す場合は**限定子**(All, Any, Some)をつける

```java
Select * | Tab_Name From File_Name
Where Tab_Name = All | Any(Select Tab_Name From File_Name)
```



## Terminalによるチェック

-  存在するすべてのテーブルを調べる

```java
show tables
```

- ファイルにある列を調べる

```java
show columnsFrom File_Name
```



## ACID特性

ACID特性を維持することで、トランザクションが実行しても、データベースの一貫性を維持することができる。

#### Atomicity (原子性)
- トランザクション処理が「すべて完了」または「なにも行われていない」場合、終了する特性

#### Consistency (一貫性)
- データベースのデータが矛盾しない特性

#### Isolation (独立性)
- 複数のトランザクションを同時に実行しても、それらのトランザクションを順に直列で実行した場合と同じ結果に制御する特性

#### Durability (耐久性)
- 確定したトランザクションの結果が失われない特性