OmniAICreator/Qiita-1.07M huggingface dataset:
BlueOseanでGitHubとJenkinsの連携

## BlueOseanプラグインのインストール
**Jenkinsの管理**の**プラグインの管理**から`Blue Ocean`をインストール。


## パイプラインを作成

### access tokenを取得する  

  1. GitHubにログインし、右上の **Settings** をクリック、 **Developer settings** メニューから **Personal access tokens** を選択。直URLは以下。
https://github.com/settings/tokens  

  2. **Generate new token** をクリックし、作成画面で必要な項目を入力し **Generate token** をクリック。  

  3. トークンが表示されるのでクリップボードにコピーしておく。(トークンが確認できるのは作成直後のみ)


### パイプラインを作成  
**New Pipeline** から作成する。
GitHubを選択し、作成したaccess tokenを入力、レポジトリを選択する。
![pipeline_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241942/b8a8986c-b1b5-4575-9667-d2cf975b0079.png)

ステップの作成を行う。
![pipeline step.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241942/0b8d27af-609b-d8d1-1f74-4e07c36ce7da.png)

設定が完了して保存すると **Save&run** でパイプラインの実行も行われる。
実行されたらJenkinsfileがリポジトリに自動的にpushされる。


## GitHubのwebhook作成
GitHubで **Settings** の **Webhooks** で **Add Webhook** を行いWebhookを設定する。

**Payload URL** に以下のURLを入力。
`http://[jenkins_url]/github-webhook/`

**Which events would you like to trigger this webhook?** は`Let me select individual events.`を選択しトリガーにしたいイベントにチェックを入れる。

![webhook.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241942/218d3e61-d9a1-e2f8-e5ea-af4975f59bbd.png)


トリガーのイベントが発生するとビルドジョブが動く。

---

[AWS CodeDeployでEC2にBlue/Greenデプロイする](https://qiita.com/yuuulf/items/1a0a458f46700ec42612)
windows10にhomesteadでLaravelの環境を爆速で作る

今までvagrantで仮想環境を作っていて
1. vagrant init XX
2. vagrant up
3. vagrant ssh
この上記の工程と違ったのでメモ。
以下の手順通りに進めると構築できるはずです。

今更感がすっごいですが、よろしくお願いします。

# 環境
Windows 10 Pro
virtualbox 6.0.4
Vagrant 2.2.4
git 2.21.0
homestead 8.2.0

前提として、git・virtualbox・vagrantは入っている状態で開始したいと思います。
[gitのインストール方法](https://gitforwindows.org/)
[virtualboxのインストール方法](https://www.virtualbox.org/wiki/Downloads)
[vagrantのインストール方法](https://www.vagrantup.com/)

# vagrant box を追加する

以下コマンドプロンプトで作業します。

```
vagrant box add laravel/homestead
```

入れる環境は何かと聞かれたら3:(virtualbox)を入力し、enterで進めてください。

# homesteadをダウンロードする

今回vagrantルートをC:\work\homesteadにしたいので

```
cd C:\work
git clone https://github.com/laravel/homestead.git homestead
```

# homesteadを初期化

ダウンロードしたhomesteadを初期化してHomestead.yamlを作成します。

```
cd homestead
init.sh
```

# ssh keyを生成する

以下コマンドでsshで必要な鍵を生成します。
※カレントディレクトリはhomesteadのまま

```
ssh-keygen -t rsa
```

# Laravelのインストール先を作成する(不要?)

以下コマンドでディレクトリを作成します。
※カレントディレクトリはhomesteadのまま

```
mkdir code
```

# 生成したyamlを変更する

Homestead.yamlにローカル構成を反映します。

```yaml:Homestead.yaml
---
ip: "192.168.10.10"
memory: 2048
cpus: 1
provider: virtualbox

authorize: ~/.ssh/id_rsa.pub

keys:
    - ~/.ssh/id_rsa

folders:
    - map: C:\work\homestead\code
      to: /home/vagrant/code

sites:
    - map: homestead.test
      to: /home/vagrant/code/Laravel/public

databases:
    - homestead
```

# hostsファイルに定義する

C:\Windows\System32\drivers\etc\hostsにHomestead.yamlの内容を
定義します。

```:hosts
192.168.10.10  homestead.test
```

# vagrant up　vagrant ssh

**そうなんです！vagrant initしなくていいんです！いいんです！**

以下コマンドで仮想環境立ち上げ、仮想環境へ入ります。
※カレントディレクトリはhomesteadのまま

```
vagrant up --provision
vagrant ssh
```

**お疲れ様です。これで必要なものは揃いました！これから煮るなり焼くなり自由にどうぞ！**
**とはならず、お節介にLaravelインストールして、ブラウザ表示までお付き合いください。**

# Laravelをインストールする

※ここから仮想環境内でのコマンドになります。
おもむろに作業ディレクトリに移動～Laravelプロジェクトを作成まで一気にします。

```
cd /vagrant
composer install
cd /vagrant/code
composer create-project --prefer-dist laravel/laravel Laravel
```

Homestead.yamlに定義したurlをブラウザで叩いてみてください。
http://homestead.test

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360277/6f3c61ba-a7ba-4181-63bc-4e8a9537b6ed.png)

**以上です！！お疲れ様でした。**
**最後までご覧いただきありがとうございます！！**
Reactでpropsを渡すときに使う「...」ドット3つ


```react
render() {
 const obj = {
            a:1,
            b:2
        }

 return (
 <Component {...obj} />
 )
}

```

なんか気持ち悪いなと思ったら~~jsx(React.jsでhtmlをつくること）特有の書き方らしい。~~
以下のようにして書くのと同じこと。
（訂正 2019.11.10　これはスプレッド構文という[JavaScriptの機能](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)で、Reactは特有の書き方ではありませんでした。kouhe1さんご指摘ありがとうございます。）


```jsx
render() {
 const obj = {
            a:1,
            b:2
        }

 return (
 <Component a={1} b={2} />
 )
}

```

ひとつひとつpropsを定義してあげて渡すか、
オブジェクトを展開してあげてまとめて渡すかの違い。
Railsでログを出す方法

どういった挙動になってるか確認する方法。

基本はこちらの記事を参照（すごい助けてもらいました！）
[Railsでlogを出力しdebugする](https://qiita.com/Kashiwara/items/f8a4030da6b17e96fabf)

### Controller

```.rb
logger.debug("xxxxx")
```

### View
```.rb
<% logger.debug("xxxxx") %>
```

### ActiveRecordの中身を確認

```.rb
@hoge = Hoge.all
logger.debug(@test.inspect)
```

プラスでエラーの表示を出す方法。

```.rb
@hoge = Hoge.all
logger.debug(@hoge.errors.inspect)
```

saveの時、Rollbackされ保存されない。
そんなときは**model.save!**をするとRollbackされている原因がよく分かる。

```.rb
@hoge.save!
end

ActiveRecord::RecordInvalid (バリデーションに失敗しました: Categoryを入力してください):
```
ファイルの存在確認後、存在していれば削除する

忘れていつもman bashしているので書いて覚える

```bash
$ ls -l 
-rw-r--r--   1 kusakai  staff       0  4 17 01:11 test
$ test -e testa && rm -f test
$ echo $?
1
$ ls -l 
-rw-r--r--   1 kusakai  staff       0  4 17 01:11 test

$ test -e test && rm -f test
$ echo $?
0
$ ls -l 
$ 
```
現場で使える正規表現

##正規表現
・社内勉強会用のメモ
・サクラエディタを前提に説明する
・知ってると作業効率がよくなる

### なにができるの
・テキストの整形
（CSV→TSV、Excelから取ってきた改行付きテーブルの論理名をCSVにしたり…）
・Grep(影響範囲調査等)

###　覚えておきたい表現
| 表現| 意味 |
|:-:|:-:|
|.|任意の一文字|
|*|0個以上の繰り返し|
|+ |1個以上の繰り返し|
| \t  |  タブ |
|\r\n   |改行(CRLF)   |
|^   | 行頭  |
|$   | 行末  |
|[0-9]   | 数字  |
|[a-z]  | アルファベット小文字  |
|[A-Z]   | アルファベット大文字  |
|([A-Z])   | ()内でマッチした内容を$1で取り出す |

|⇒表現をorで繋げる

[ほかにも色々、詳しくは公式見てね](http://sakura-editor.sourceforge.net/htmlhelp/HLP000089.html)
[置換表現とか細かいのはライブラリのページを](http://k-takata.o.oo7.jp/mysoft/bregonig.html#SCT-5.3)

### 例
・CSV→TSV
,→\tに変換

```txt
aaa,bb,ccc,ddd,eeee
↓
aaa bbb ccc ddd eeee

```

・改行をカンマに変換
\r\n→,

```txt
aaa
bbb
ccc
↓↓↓
aaa,bbb,ccc
```

・先頭が数字で始まる行を探す
^[0-9]

```txt
0asd   #=> match
daee
4ghsf  #=> match
```

・最後が数字で終わる行を探す
[0-9]$

```txt
asdda3  #=> match
da4dff
gea123  #=> match
```

・数字が1個以上続いてるところを探す
[0-9]+

```txt
a23dfa #=> match
add221 #=> match
2daf2 #=> match
adffe
```

・AまたはBでGREPする(DecimalClass|NumericClass)

・キャメルケースに変換

_([a-z])→\U$1\E
※Perl記法が有効なエンジンの場合

```txt
request_no  #=> request_No
regi_order_no #=> regi_Order_No
```

##おまけ
###サクラエディタの使い方
####検索(Ctrl+F)
![正規表現チェック入れるよ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270579/f71fd17c-98c7-3868-bce4-046dd8d2672d.png)
※正規表現を使うにチェックを入れる必要あり

####置換(Ctrl+R)
![置換.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270579/963cf4dd-0848-2a1a-c950-1730e68e92b3.png)

####Grep(Ctrl+G)
![GREP.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270579/ea72d3ca-94bd-5185-1f0b-b20b4fbbda30.png)
Unity ML-Agents Toolkit v0.7でブロック崩し

社内の発表で、`Unity ML-Agents Toolkit`を使ってブロック崩しをするAgentを書いてみました。最近v0.8がリリースされましたが、使用したバージョンはv0.7になります。

![Cap.2019-04-15 23_36_12.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45974/13874d22-bf82-5bfd-b6bf-460e10689174.gif)
左が10,000ステップのトレーニングで、右が800,000ステップになります。

**Source Code**
https://github.com/fullcorder/BlockGame

実装自体はできたものの、なかなか期待したとうり動いてくれずに苦労しました。
試行錯誤をメモとして残します。

## Agent実装クラスのDecision Interval

`Decision Interval`を1でトレーニングを行っていたのですが、一向に動く気配がなく、試行錯誤したところこの値を10にした途端、期待するように動くようになりました。

`Decision Interval` は[ドキュメントに](https://github.com/Unity-Technologies/ml-agents/blob/master/docs/Learning-Environment-Design-Agents.md#decisions)よると

> Decision Interval - The number of steps between decision requests. Not used if On Demand Decision, is true.

なかなか理解が難しいですが、何回単位で方策を評価するといったところでしょうか。
トレーニング中のログからも、1ゲームプレイして判断ではなく、10ゲームプレイした結果で評価しているといったように見受けられました。

## 失敗時AddReward(-1)をする

ブロック崩しで言うところの、ボールを空振りしてしまったときマイナスの報酬を与えると、同じステップのトレーニングでよりよい結果になりました。これをしばらく忘れていました。

## 感想

Unityのドキュメントが充実しているので、非常に助かりました。(ただし英語)
ただ学習がうまくいかないと割と途方にくれます。Qiitaの記事が非常に参考になりました。
Unity ML-Agentsは想像よりも簡単に強化学習を体験できるので、是非おすすめです。
devise(メール承認付き)のパラメータをコンソールで直接編集する

#deviseで新規userを登録する
`user.skip_confirmation`でメール承認をスキップできる。


```
user = User.new(email: "hogehoge@mail.co.jp", password: "hogehoge")
user.skip_confirmation!
user.save
```
#既存のuserを編集する
`user.reconfirmation`でメール承認をスキップする。

```
user = User.find_by(email: "hogehoge@mail.co.jp")
user.email = "fugafuga@mail.com"
user.skip_reconfirmation!
user.save
```
GUI(主にWebサイト)のTDD、自動テスト戦略について

# GUIのTDDは難しい

理由はものすごく簡単で、自動テストだけで本当の意味での正しさを確認しにくいから。
単純にINPUTとOUTPUTが数字や文字列といったデータで確認できる場合は、プログラムとして評価を書きやすいのだが、GUIのレイアウトの部分などは、視覚的に見ないと普通は判断できない。
これがソースコード＝レイアウトが判断できるもの、であれば成立するが、現状はそういう都合のいいコードは存在しないと思います。

# 解決手段
## 目をテストの代わりにする
当たり前ながら、これが一番簡単。
要は、TDDというのは自動テストのコードによって常に確認しながら、プロダクトコードを書いているわけだから、コンピューターの代わりに常に目が監視してあげるしか基本的には存在しない。

ただし、それだけではCIなど、繰り返しテストをするという観点で足りない部分があると思う。
なので、RED > GREEN の部分では自動テストを諦めて、リファクタリングの一部として結果を残す意味で、自分が目で行ったテストを部分的に自動テストに置き換える。
これで、ほとんどは代替できると思う。

## レイアウトとロジックを分離する
プログラムの品質を上げるうえではこれが一番重要かと思う。
テストを何度もしなくてはいけないような部分、網羅的に様々なパターンを試したい部分というのは、レイアウトに関わることはあれど、それ以上にロジック自身のテストができてて初めてGUIは成立する。

RailsやDjangoなどのフレームワークは、html等の中にロジックを組み込むことができるが、このロジック部分をGUI絡みのソースと切り離し最小化することで、TDDがやりやすい自動テストの領域に引き込むことが可能だ。
それは結果として、ControllerとViewの分離するという設計の改善にも繋がる思想だと思う。

## 各条件のGUIのスクリーンショットを取るようにする
もともとSelenium等に機能があるので、それを使う。
結局目で確認するのだが、デグレード確認にはかなり有効な手段となる。
自分が業務で行ったときは、対象の言語のライブラリを使ってPPTに張り付けて、タイトルまで載せるようにした。それができれば、それ自身をステークホルダーに渡して「全体的にこう変わりました！」という提出の仕方も可能になる。
重たかったり、ファイルが出来上がって邪魔になるので、特定の条件でのみ実行されるように工夫したほうが使いやすいと思う。

## 全部をTDDでやろうとしない
身も蓋もないが、すべてにおいて、QCDの中のトレードオフ。時間がかかりすぎたら意味がないので、中長期的に見て効果があるものだけを試すべき。
だからと言って最初から投げ出すのも違うと思うし、振り返りのたびに様々な取り組みをやってみて、効果があるものを探っていくことこそが重要だと思います。

# まとめ
書いたのはいいけど、すごく当たり前のことしか書いてないので、参考にならないかもしれませんが、よく諦めるか、無理やり感を感じるときがあるので、投稿してみました。
ご意見ありましたら、コメントください。
Unity2019　Visual Studio2019のメモ

# Unity2019　Visual Studio2019のメモ
Androidへのビルドに成功
PackageManagerにGoogleVRが追加された
Visual StudioでUnityのプログラムとして認識されないことがある
新たなスクリプトを作れないことがある（再起動で直る）
ProbuilderのMaterialが変わった
## Windows MRについて
Scripting Backendの変更が必要なくなった
HMDを接続していない状態で実行してもWindows MRは起動しなくなった
Unityでのビルドに成功
~~Visual Studioでのビルドに失敗~~
Build configurationを変更したらいけた
Visual Studioでのビルドに成功
Glideで個人間で使う旅行計画PWAアプリをつくってみた

# はじめに

ネイティブアプリデベロッパーからしたら驚愕のWebサービスが出てきました。
当方もネイティブアプリ開発をしていますが、15分足らずでPWAアプリが作れるのは脅威的だと思います。

本記事では、ざっくり作り方、Glideでできることできないことを明確にしていきたいと思います。
（記事執筆時 2019/04/17 時点）

作成したアプリになります。ご査収ください。
### スポット一覧
![スクリーンショット 2019-04-16 23.53.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134845/66d45aa8-c39c-81dd-9557-d13902f3b04a.png)
### スケジュール一覧
![スクリーンショット 2019-04-17 0.21.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134845/1501857d-30c7-0f89-703f-16b40d6f18d0.png)

> GWにタイ旅行に行くので、知り合いとスポットを管理できたら便利だなぁと思い作成しました。


# アプリ前提

- データ作成は、本アプリからユーザが行う（PC使えない場合も踏まえて）
- 少人数での利用（2-3人）

# GlideでのPWAアプリ作り方

ぶっちゃけある程度はポチポチしてるだけで作れるので説明はあまりいらないかと思いますが、一応つけときます。

1. [Glide](https://app.heyglide.com/) に登録し「New App」
![スクリーンショット 2019-04-16 23.55.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134845/f732eb7e-04eb-436c-9829-da3f4f3192f1.png)
2. Google Spreadsheetでデータの作成
![スクリーンショット 2019-04-16 23.57.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134845/ec5664cc-67e6-24cb-fa90-ee561eeafd2a.png)
3. Glideでデータを選択
![スクリーンショット 2019-04-16 23.58.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134845/c9e689ff-42bc-59a8-953e-2de661ca174e.png)
4. Glide画面の`Navigation`, `Screen`, `Settings` で入力項目や表示項目を設定していく
![スクリーンショット 2019-04-17 0.01.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134845/c2af014a-0fcf-a409-1183-91d15087aae2.png)

> めちゃくちゃ簡単っ！！

# Glideでの操作

- `Navigation` :  Spreadsheetのシートに応じてメニューを増やすことができます
![スクリーンショット 2019-04-17 0.06.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134845/9394cd09-db71-4c43-8553-4a1b941d91ff.png)
- `Screen` : 画面の表示項目や入力項目を追加できます
![スクリーンショット 2019-04-17 0.06.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134845/6ddd5b89-439a-124b-a12d-b8961d57bbd5.png)

- `Settings`: アプリ名、ロゴを決めたり、PWAリンクを設定できます

> ドメインを登録するには課金しないとみたいです
> http://help.glideapps.com/faq/setting-a-custom-domain-for-your-app

![スクリーンショット 2019-04-17 0.05.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134845/223c9876-658e-cd94-b27b-d3d96d34c692.png)



# Glideでできなかったこと、注意すること

正直ここまで簡単にアプリが作れるので、文句はないのですが、これができればなぁという一覧です。まあアップデートでなんとでもなると思うので今後も期待ですね。

- 写真はURLの直アドレスのみ

    - SpreadSheet上の画像保存のデータを参照してもアプリ上には反映されない
    - とりあえず画像はGoogle Drive保存か、Evernoteとかに保存して参照してねということらしいです
        - http://help.glideapps.com/faq/how-do-i-get-images-into-my-app
- アプリ上から画像の保存は不可
    - 手入力で画像アドレスをはっつけるのはめんどい！と思い、ないかなと期待しましたが、残念ながらできない様子

- データ入力項目はテキストのみのため、日付項目などは選択できない

    - (今のところ)データの入力項目はNote、テキスト、Switchのみです。

- Spreadsheetの計算式は利用できない？

    - データ追加はシートに計算式がある箇所はスルーされて、新しい行に追加される
    - ARRAYFORMURAで解決するかも
      - https://medium.com/glideapps/sheets-tip-1-calculate-entire-columns-with-arrayformula-f8780f4a5508

- Navigation（アプリメニュー項目）を増やすと表示項目などの設定が初期化される（バグ？）

  - 途中まで作成してあとからメニューを増やそうとしたら表示項目などが初期化されてしまい、また最初からになりました。（簡単だからいいけど、さすがにめんどくさい。。。）

- Setting（入力項目や表示項目）のエクスポートができない

  - 入力項目や表示項目のエクスポートはできず、同様にアプリをコピーとかもできないようです。

# さいごに

無料かつ短時間でノンプラグラミングでここまでのアプリができてしまうGlide。個人、企業で利用しない手はないですね！
個人的にはもっと細かく設定できたり、設定をエクスポートできたらなぁという思いがありますが、今後有料化したりして機能が増えていけばなぁと思う次第です。
Rubyは最後に評価された式が戻り値になるというが、どのif文にも入らなかったらどうなるのか

# 経緯
- Rubyを学び始めた頃のコードを直しているのですが、Javaエンジニアだったためかメソッド内に無駄なreturn文が多いです。
- 直す最中に表題の件について気になったので、`Rails c`を使って試し、またRailsのビューから呼ばれた時はどうなるのかについても試してみました。

# 修正前
- ひどい書き方ですね。。。

```game.rb
  def get_msg
    msg = ""
    if self.gameset_flag
      if get_sum_top == get_sum_bottom #同クラス内の別のインスタンスメソッドを呼んでいます
        msg = "（引き分け）"
      elsif !self.top6
        msg = "（5回コールド）"
      elsif !self.top7
        msg = "（6回コールド）"
      elsif !self.top8
        msg = "（7回コールド）"
      elsif !self.top9
        msg = "（8回コールド）"
      end
    end
    return msg
  end
```

# 修正後
- このメソッドをビューから呼んだ時に、どのif文にも入らなかった場合は、ちゃんと空文字で画面表示できるのか気になっていました。

```game.rb
  def get_msg
    if self.gameset_flag
      if get_sum_top == get_sum_bottom #同クラス内の別のインスタンスメソッドを呼んでいます
        "（引き分け）"
      elsif !self.top6
        "（5回コールド）"
      elsif !self.top7
        "（6回コールド）"
      elsif !self.top8
        "（7回コールド）"
      elsif !self.top9
        "（8回コールド）"
      end
    end
  end
```

# `Rails c` で動かしてみる
- コード修正は今回の主旨ではないため、修正後のコードのみで試します。

```
irb(main):001:0> game = Game.new
（出力省略）
irb(main):002:0> game.get_sum_top
=> 0
irb(main):003:0> game.get_sum_bottom
=> 0

irb(main):004:0> game.gameset_flag = false
=> false
irb(main):005:0> game.get_msg
=> nil

irb(main):006:0> game.gameset_flag = true 
=> true
irb(main):007:0> game.get_msg
=> "（引き分け）"
```

- ~~どのif文にも入らない場合は、最初のif文の条件式が最後に評価されたことになります。~~
- ~~つまり `self.gameset_flag` は `nil` ということで `nil` が返って来ているのがわかります。~~<br>
**→(2019/04/17追記)上記2行誤りでした。申し訳ございません。**

##(2019/04/17追記)
正しくは、Rubyでは以下のルールがあり、

- if文自体も「一つの式」とみなされること。つまり値を返すということ
- 「if文の中に入らなかった かつ else節もない場合」はそのif文はnilを返すこと

その結果、`irb(main):005:0> game.get_msg` のとき、 `get_msg` メソッドでは以下のことが成り立っていました。

1. if文には入らない、かつelse節も無いため、if文は `nil` を返す
2.  `nil` を返したif文自体が `get_msg` メソッドで「最後に評価された式」とされる
3.  `get_msg` メソッドが `nil` を返す

コメントにてご指摘をくださった@scivolaさん、ご教授ありがとうございました。

# 画面表示はどうなる
- 実際の画面キャプチャは貼れないのですが、結論としては問題ありませんでした（空文字がreturnされていた頃と表示に変化なし）。
- つまり、修正前のコードのように、どのif文にも入らなかった時のための変数の初期化は不要ということになります（もちろん設計上空文字を返却する必要がある場合は、メソッドの最終行に空文字を書いて、空文字が最後に評価されるようにすると良いと思います）。

# 参考
- [これは便利！Ruby on RailsでConsoleを使う方法【初心者向け】](https://techacademy.jp/magazine/7151)
- [Ruby 2.6.0 リファレンスマニュアル > 制御構造 > if](https://docs.ruby-lang.org/ja/2.6.0/doc/spec=2fcontrol.html#if)
クリックだけで個人ブログを世に晒す EP.1

# 余談
初めまして、18年度 新卒？の [tyd](https://twitter.com/s_tyd_) です。

Qiita初投稿です、実は今まで8個くらい下書きに書き溜めてたのですが、
投稿ネタを「自分のブログに展開するか、Qiitaで展開するのか」で悩んでいました。

結局投稿はQiitaにしたのですが、悩んでいる間に**半年**も経過していました、時の流れは恐ろしいです。
これから書き溜めていたネタを放出していきますので宜しくお願い致します。

# 方法
**GCP**の**Marketplace**から展開する
初めてGCPに登録する方は、無料トライアルを駆使して1年は無料でブログを運営できる


# GCPログイン後、左のメニューからMarketplaceへ
GCPに登録、ログイン後左のメニューからMarketplaceを選択
![bandicam 2019-02-21 19-06-09-111.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/2bec6ec3-d853-e6ff-480f-d800279f192c.jpeg)

# Wordpressがあるのでクリック
![bandicam 2019-02-21 19-06-18-460.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/02c7a954-58d8-2abc-f465-93e2c9884261.jpeg)

# 「OMPUTE ENGINE 上で起動」をクリック
![bandicam 2019-02-21 19-06-27-572.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/857c3e83-b0d7-d705-4eb6-5b3e2ef16615.jpeg)

# [無料枠](https://cloud.google.com/free/?hl=ja)を参考に設定
![bandicam 2019-04-17 00-08-33-858.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/c6ed5782-1170-3e62-88c1-cf92268621c6.jpeg)


インスタンス

- f1-micro 

リージョン

- us-east1
- us-central1
- us-west1

のどれか
![bandicam 2019-04-17 00-07-58-508.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/140fb7bd-ff50-a6c8-1afe-04a9e841ad4c.jpeg)


# デプロイ
デプロイを待つ
![bandicam 2019-04-17 00-20-47-756.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/706b1978-3653-4162-08f1-5e0223778ab7.jpeg)


# デプロイ完了
![bandicam 2019-04-17 00-23-35-727.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/059e727f-21bb-5fd8-961f-1f882d6e69f3.jpeg)

# ワードプレスのサイトが表示される
サイトアドレスをクリックしてみると初期テンプレートが読み込まれたワードプレスのサイトが表示される。
![bandicam 2019-04-17 00-24-55-658.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/b2c21a3d-276c-dac1-8792-03ea20687f8c.jpeg)

# 終わり
これでサイトの展開は完了しました。

次回は

- パーマリンクの設定
- サイトのSSL化
- 独自ドメインの設定

などの記事を展開したいと思います。

2019/4/22
続き書きました → [個人ブログを世に晒す 設定編 EP.2]
(https://qiita.com/s-tyd/items/30197fb80fe3cc9e3ecc)
Laravel5.4 ファイル複数ダウンロード(画像でもテキストでも)

## ファイルダウンロード処理の実装
<b>主な方法</b>
・Response::download
(サーバー上のファイルダウンロード)(IEだと文字化け可能性)
・Response::make()
(文字化けはないが、ファイル内容をキャストしてコピーするので、大容量には向かない)
・Storage::disk()->download　(バージョン的に使えない)
・phpの処理で作る (カスタマイズできる)

[ダウンロード参考記事](http://www.84kure.com/blog/2017/07/13/laravel-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%95%E3%81%9B%E3%82%8B%E3%81%AB%E3%81%AF/)
[大容量・laravel・phpファイルダウンロード参考記事](https://ameblo.jp/itboy/entry-12040013001.html)

今回は、ファイル内容はそんなに重くなく、また既にファイルの中身をバイナリデータで持っていたので、Response::make()を使用することにした。
(Storage->disk('s3')->get(ファイルパス)でバイナリデータは取得していた。)

```php
$headers = [
                'Content-Type' => $mineType,
                'Content-Disposition' => 'attachment; filename="' . $fileName . '"'
           ];
return Response::make($fileBinaryData, 200, $headers);

```

これでファイルダウンロードは完了。

## 複数ダウンロードを実装する

```html
{{Form::button('ダウンロード', ['class' => 'on-download'])}}
<script>
$('.on-download').on('click', function(){
    handleDownload("samplel1.jpg");
    handleDownload("samplel2.jpg");
    handleDownload("samplel3.jpg");
});

function handleDownload(name) {

	const route = "{{route(download)}}";
    
    // IE
    if (window.navigator.msSaveBlob) {
        const xhr = new XMLHttpRequest();
        xhr.open("GET", route, true);
        xhr.responseType = "blob";
        xhr.onload = function (e) {
            var blob = xhr.response;
            window.navigator.msSaveBlob(blob, name);
        }
        xhr.send();
        return;
    }
    
    // chrome,firefox
    const a = document.createElement('a');
    a.download = name;
    a.href = route;
    
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    
    
}
</script>
```

aタグのdownload属性を使用して、ダウンロード処理を実装する。download属性を持つaタグを生成してclickで実行させ、消すを繰り返す.
IEはdownload属性をサポートしていないので、一つのファイルがダウンロードされるくらいなので、IE用に処理を分岐させる。ダウンロードする画像数分タブが表示されては消えるようにしているため、msSaveBlobで保存する。

## 今回こうやって使用した
僕が今回実際に使ったときは、テーブルの行ごとの先頭にチェックボックスが存在し、チェックが入ったレコードのファイルだけをダウンロードさせるというものだった。

なので、checkboxにdata属性でfileIdとfileNameを渡す必要があった。ダウンロードボタンを押した瞬間に、checkが入ってるもののチェックボックスからfileIdとfileNameを取り出して、それをeach文で、handleDownload(fileId, fileName)(fileIdはrouteを生成するときにどのファイルをダウンロードさせるかを判定するためにくっつけて渡す)を複数回実行させることで、課題をクリアした。

aタグのdownload属性を使って、直接ファイルをダウンロードさせる方法もあるが、僕の場合ダウンロード履歴をDBに保存する必要があったため、いったんスクリプトを経由した。

[参考記事](https://symfoware.blog.fc2.com/blog-entry-1978.html)

##まとめ
複数画像ファイルをダウンロードさせることにすごいはまった。
つぎからはいけそう。
今度はダウンロード後を検知する方法を知りたいなぁ。
AzureのApp Service on Linuxでタイムゾーンを設定する方法

## はじめに

「WindowsのApp Serviceでタイムゾーンを設定する方法はわかった」[（参考リンク）](https://docs.microsoft.com/ja-jp/azure/app-service/faq-configuration-and-management#how-do-i-set-the-server-time-zone-for-my-web-app)
「でもLinuxのApp Serviceでタイムゾーンを設定する方法がわからん」
って結構ハマったのでメモ。
.NET Core2.1と2.2で動作を確認。

## 方法

App Serviceの「構成」→「アプリケーション設定」で
「名前」に`TZ`
「値」に任意のタイムゾーン（日本なら`Asia/Tokyo`）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99062/76f49031-f94e-3523-3474-dc1986b8fd0e.png)
JavaScriptの関数の書き方をまとめる

# 目的
JavaScriptの関数はたくさんの書き方があるので辞書用に列挙する

## 通常

```javascript:sample.js
function hoge() {
  console.log("hoge")
}

hoge()
// hoge
```

## 無名

```javascript:sample.js
const hoge = function() {
  console.log("hoge")
}

hoge()
// hoge
```

## 即時

```javascript:sample.js
(function() {
  console.log("hoge")
})()
// hoge

(function(a, b) {
  console.log(a + b)
})(10, 20)
// 30
```

## アロー関数

```javascript:sample.js
const hoge = () => {
  console.log("hoge")
}

hoge()
// hoge
```

引数が1つの時は()を省略できる。
関数の中身が1行なら{}を省略できる。

```javascript:sample.js
const hoge = a => console.log(a);

hoge("hoge")
// hoge
```

即時アロー関数

```javascript:sample.js
((a, b) => {
    console.log(a * b);
})(10, 10)

// 100
```
webに埋め込むためのshader art用テンプレート

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141797/ac598f3e-329c-f11c-6c8e-ed22e47234c7.gif" width=720>

# 概要
shaderで絵を書いた後に、その絵をwebに埋め込むのがいつも大変でした。
openFrameworksで書いても大変。
unityで書いても大変。
何が大変かというと、いい感じにhtmlとjsのセットを吐くのが大変なのです。

なので、typescirpt + three.js で書けるようにしました。
こうすると、htmlとjsのセットを吐くのが簡単です。
hot reloadになっています。

# リポジトリ
### 3D version (vertex shader & fragment shader、カメラ操作可能)
https://github.com/ryokomy/ts-webpack-threejs-shader-3d-template
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">おしゃれな絵を書く環境整えました。typescript + three.js + webpack + glsl。 <a href="https://t.co/wTSxvM9cmu">pic.twitter.com/wTSxvM9cmu</a></p>&mdash; こみー / Ryo Komiyama (@ryoheikomy) <a href="https://twitter.com/ryoheikomy/status/1118428946872225792?ref_src=twsrc%5Etfw">2019年4月17日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### 2D version (shader art)
https://github.com/ryokomy/ts-webpack-threejs-shader-template
![shader.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141797/9f3ab9c4-10e2-3f53-8c7a-0ebfcbccf2f1.gif)



```
npm install
npm run start
```
として、`localhost:8080` にアクセスするだけなので、どうぞ使ってみてください。
エクセルマクロ(Excel VBA)でExcelブックを開きアクティブにする

# Excelブックを開きアクティブにする
## はじめに
マクロ処理にてファイルを開きアクティブにする処理が必要となったのですが、ファイルの有無や、既に開いてるか否かを判定するのが意外と面倒だったのでコピペすれば済むようにシェアします。

## ソース
```visualbasic
' エクセルブックを開きアクティブにする。既に開いている場合はアクティブにして終了
' 引数１：FilePath　開きたいエクセルファイルのパス
' 戻り値：ファイルが存在しない場合False、それ以外の場合はアクティブにしてTrueを返す
Function OpenOrActiveWorkBook(FilePath As String) As Boolean
    Dim str As String
    Dim wb As Workbook
    
    'ファイルの存在チェック
    str = Dir(FilePath)
    If str = "" Then
        ' ファイルが存在しない場合falseを返す
        OpenOrActiveWorkBook = False
        Exit Function
    End If
    
    '同名ブックがすでに開かれているかチェック
    For Each wb In Workbooks
        If wb.Name = str Then
            ' 既に開いている場合、アクティブにした上でtrueを返す
            OpenOrActiveWorkBook = True
            wb.Activate
            Exit Function
        End If
    Next wb
    
    'ファイルが存在し、まだ開かれていない場合は開き、trueを返す
    Workbooks.Open FilePath
    OpenOrActiveWorkBook = True
End Function

```

## おわりに
今回は開いたブックを必ずアクティブにする必要があったため、このようなソースにしました。
【Inkscape】Inkscapeで図形をコピぺすると背景色が白くなってイメージとして貼り付けられる時の対応法

環境メモ
⭐️Mac OS Mojave バージョン10.14.4
⭐️Inkscape 0.92
⭐️Mac book


<font color="OrangeRed">
Inkscapeで図形をコピぺすると背景色が白くなってイメージとして貼り付けられる時の対応法
</font>

<font color="DeepPink">〜現象説明〜</font>
1.Inkscapeで図形をコピぺする
<img width="825" alt="スクリーンショット 2019-04-16 23.28.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/edc7a7ae-0748-2fc3-babd-0db3f64c6018.png">

<img width="783" alt="スクリーンショット 2019-04-16 23.29.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/6025ceca-269c-f62f-6612-8f1bbbe093ab.png">

背景色が白くなってイメージとして貼り付けられる
<img width="791" alt="スクリーンショット 2019-04-16 23.31.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/2e49a684-17b4-ac17-6265-5c5f2f06228e.png">

<font color="DeepPink">〜解決方法〜</font>
「XQuartz」ー「環境設定」を選択する
<img width="400" alt="スクリーンショット 2019-04-16 23.32.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/e934d3b7-f42f-2648-bba0-8ced831d03bc.png">

CLIPBOARDが変更された時にベースボードをアップデート
を
チェックOFFにする
<img width="860" alt="スクリーンショット 2019-04-16 23.34.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/905ba1d1-54eb-1298-34d5-f8d80a7b44c7.png">


コピペすると、ちゃんとペーストできた！！
OK!
<img width="822" alt="スクリーンショット 2019-04-16 23.35.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/265b13ac-4d9e-06d1-56d5-0597e45eb1a7.png">


<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">🍫WebAR🍫<br>チョコレートを投げてテーブルに落ちるとチョコが潰れる🍫（溶ける？？）<br>試してみたよぉ。😊<a href="https://twitter.com/hashtag/8th?src=hash&amp;ref_src=twsrc%5Etfw">#8th</a> <a href="https://twitter.com/hashtag/wall?src=hash&amp;ref_src=twsrc%5Etfw">#wall</a> <a href="https://twitter.com/hashtag/8thwallweb?src=hash&amp;ref_src=twsrc%5Etfw">#8thwallweb</a> <a href="https://twitter.com/hashtag/webAR?src=hash&amp;ref_src=twsrc%5Etfw">#webAR</a> <a href="https://twitter.com/hashtag/AR?src=hash&amp;ref_src=twsrc%5Etfw">#AR</a> <a href="https://t.co/qGAsRlAiz0">pic.twitter.com/qGAsRlAiz0</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1116322651247497216?ref_src=twsrc%5Etfw">2019年4月11日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
static なメソッドはいつ使うのか

https://qiita.com/ndxbn/items/4997d1e9400c03f6ea59 を編集しようと思ったのだけれど、422 になって更新できなかったので、新しく投稿し直すことにした。

# 発端
（過去の自分が書いた）[神クラス化したUtilityクラス](http://yyyank.blogspot.jp/2015/07/blog-post.html)とか見てイラっ☆としたので、ベタープラクティス的なやつをまとめようかなって気持ちになった。
名前空間を切って普通に関数作れば良いので、ユーティリティクラスはアンチパターン。

# static なメソッドを使うパターン

## そのクラスの「特定のインスタンス」が欲しいとき（[Factory パターン](https://ja.wikipedia.org/wiki/Factory_Method_%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3)系）

### 実装例

こんな感じのDBから、IDが欲しい。
ただし、1期間に同時開催されるのは1つまで。
INSERTするときに重複チェックをしている。

```sql
CREATE TABLE event_master(
    id INT NOT NULL AUTO INCREMENT PRIMARY KEY,
    start DATE,
    end DATE
);
```

アプリケーション側では、こう使う。
この時の、`php public static function current()` が、staticなメソッドの使いどきの例。

```php
<?php
/**
 * イベントは、同時に1つまで開催可能。
 * DBにINSERTするときに、期間で重複がないかをチェックされる。
 * 
 */
class EventId
{
    /**
     * @var int id
     */
    private $id;
    public function __construct(int $id)
    {
        $this->id = $id;
    }
    
    /**
     * 現在実施中のイベントのIDを取得する
     * @return EventId
     */
    public static function current()
    {
        // 現在のゲームIDを特定する処理を書く
        // 大抵、DBとかから検索するよな。
        $dbh = (new DatabaseHandler)->get();
        $now = $date('Y-m-d h:i:s');
        $rows = $dbh->select(
            'SELECT * FROM evemnt_master
            WHERE start < ? AND ? < end
            ',
            [$now, $now]
        );
        return new self($rows[0]['id']);
    }
}
```
MATEデスクトップで音量調節が消えたとき

# MATEデスクトップで音量調節が消えたときの対処法
Linux mint mate edition を使っているのだが、通知スペースにある音量調節のアイコンが消えてしまうことに悩んでいた。再起動すれば復活するので、その都度再起動していたんだけど面倒になってきたので調べた。

音量調節アイコンを復活させるには、下のコマンドをターミナルに入力する。

```console
$ nohup mate-volume-control-applet &
```

nohupコマンドが無いとターミナルを閉じたら音量調節アイコンも消えてしまう。
nohupコマンドをつけておくことでターミナルを閉じても処理が継続するらしい。
byobu操作まとめ

[byobu](http://byobu.co/)は、ubuntuに標準インストールされている仮想端末ツールです。

byobuのセッションを起動しておくと、ssh接続がタイムアウトで切断してしまってもbyobu上でプロセスが走り続けてくれるので、時間のかかる処理を走らせっぱなしにしたいときに便利です。
（画面分割等の機能もありますが、私はiTerm2の画面分割でだいたい用が済んでいるので使っていません。）

ここでは、個人的メモを兼ねて普段私が使う必要十分な量のコマンドをまとめています。

公式doc:
http://manpages.ubuntu.com/manpages/cosmic/en/man1/byobu.1.html

## セッション操作

|コマンド|操作|
---|---
|`$ byobu`|セッションがない場合：新規セッションにアタッチ<br>セッションが1つある場合：そのセッションにアタッチ<br>セッションが複数ある場合：どのセッションか（新規作成か）聞かれるので、<br>番号を指定してアタッチ|
|`$ byobu a -t XXX`|セッション名を指定してアタッチ|
|`$ byobu new`|新規セッションを作成しアタッチ|
|`$ byobu new -s XXX`|新規セッション名を指定してアタッチ|
|`$ byobu ls`|セッション一覧|
|`$ byobu kill-session`|セッションを殺す|
|`$ byobu kill-session -t XXX`|セッション名を指定して殺す|

## セッション内操作

|コマンド|操作|
---|---
|`control+a d` or `F6`|デタッチ|
|`F2`|新規ウィンドウ|
|`F3`|前のウィンドウ|
|`F4`|後ろのウィンドウ|
|`ctrl+a k`|現在のウィンドウを殺す|
|`F7`|スクロールモード|
|`ctrl+c`|スクロールモードを抜ける|


参考：
https://qiita.com/kayama0fa/items/82d3ebab8bb297bdfd23
https://mutsune.hatenablog.com/entry/20140110/1389355488
Java入門実践編を踏まえた中級者向けまとめ

Javaの基礎文法はマスターした。
さて、これから何を勉強すればよいのだ？
という方向けにおススメしたいのが、タイトルにもある[「スッキリわかる Java入門実践編」](https://www.amazon.co.jp/%E3%82%B9%E3%83%83%E3%82%AD%E3%83%AA%E3%82%8F%E3%81%8B%E3%82%8B-Java%E5%85%A5%E9%96%80-%E5%AE%9F%E8%B7%B5%E7%B7%A8-%E7%AC%AC2%E7%89%88-%E3%82%B9%E3%83%83%E3%82%AD%E3%83%AA%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA/dp/4844336770/ref=sr_1_fkmrnull_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&keywords=Java+%E5%85%A5%E9%96%80+%E5%AE%9F%E8%B7%B5%E7%B7%A8&qid=1555425436&s=gateway&sr=8-1-fkmrnull)である。
自分は現在、JavaエンジニアとしてSEで常駐派遣型業務に従事しているんだけど、Javaを仕事にしている現場で大体は、「わかっているよな？」的な暗黙知が存在する。
これがうまくまとまっていると個人的に思うのが、この本だ。

ここでは、この本を見て、実際どーなのさ？とかを、自分も勉強するがてら、記載していきたいなと思う所存です。
そして、このページでは、全体を統括できるようリンクを適宜張っていく。

・文字列連結　本当に早くて軽いのはどれだ選手権（作成中）
＝＝TOBE　CONTINUE==
iOS12.2にアップデートするとSafariでインスペクトが出来なくなる模様

## iOS12.2にアップデートするとSafariでインスペクトが出来なくなる模様
先日、iPhone XS MaxをiOS12.2にアップデートしました。

すると、PCに接続してSafariのウェブインスペクターを起動しても、何もHTMLエレメントが表示されず機能しないという現象が発生しました。

Twitterでも同様の声が上がっていたので、今後のアップデートでの改善待ちをしましょう。

Web開発をしている自分としては、今回の件は厄介です。

まだアップデートしていない人は、不具合が解決されるまで待機した方が良さそうです。
また、もしも解決法があればコメントしていただけると助かります。
## 終わりに
私は現在、Web3のサービスの開発をしています。詳しくはこちらの記事をご覧下さい。
        [無料でイーサリアムが当たる、Web3時代の寄付サイトを作った話](https://note.com/kenroda/n/n814347fbdcd7)
【超入門】VagrantをMacにインストールしてみよう

この記事では、Vagrantの

- 簡単な概要
- インストール方法
- インストールの有無とバージョンの確認方法

についてまとめます。

#Vagrant とは？
Vagrantを一言で表すと**「仮想マシンを簡単＆シンプルに構築・操作するためのソフトウェア」**です。
もっと平たく、**「仮想環境の管理屋さん」**ということもできるかもしれません。

[Vagrantの公式サイト](https://www.vagrantup.com/intro/index.html)でも、
> Vagrant is a tool for building and managing virtual machine environments in a single workflow. 

つまり"manage（管理）"ツールであるという説明がされています。

##Vagrantでできること
仮想環境を作るときは、「どんなOSプラットフォームを使っているか」や「ソフトウェアのバージョンは何か」といった環境の条件によって、操作方法や処理が違ってきたりします。
しかし異なる条件ごとに、いちいち手作業で構築・確認をするのは、大変な作業です。

そこで**Vagrantは、そうした違いをまるっ統一して、仮想マシンの設定から起動や終了などの管理まで、どのOS、どのプラットフォーム、どのバージョンでも同じように操作できる**ようにしてくれます。

具体的には、以下のようなことをしてくれる便利ツールです。

- Linux, Windows, macOSのローカル環境（もしくはMicrosoft Azureなどのクラウド環境）に仮想マシンを構築する
- 作った仮想環境をテンプレート化（＝box化）する
- 公開されているboxをインストールすれば、ボタン一発ですぐに仮想環境を作ることも可
- 作った仮想環境を他の人にも共有する（＝チーム開発も可能）

それでは、早速インストールしていきましょう。

#Vagrantのインストール方法
※本記事の執筆時点（2019年4月）での最新バージョンはVagrant (2.2.4)です。

###１）公式サイトを開く
https://www.vagrantup.com/
![スクリーンショット 2019-04-16 22.44.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399975/51848d03-e901-eb13-3da8-be52545fb862.png)

###２）使用OSに応じたファイルをクリック → ダウンロード
![スクリーンショット 2019-04-16 22.47.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399975/310e515a-1428-c49a-159a-1488e60ff8b3.png)

###３）ダウンロード先のファイルへ飛び、クリック
![スクリーンショット 2019-04-16 22.51.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399975/d302aa6d-6745-793f-3705-cf59571b6806.png)

###４）vagrant.pkgを開く
![スクリーンショット 2019-04-16 22.52.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399975/5e2d102d-2de5-41c4-f414-f100a6f746ad.png)

###５）手順に沿ってインストール
![スクリーンショット 2019-04-16 22.52.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399975/b61c6f42-b6ee-42aa-f972-e67db0694f83.png)

この手順で、インストールができるかと思います。
vagrantのインストーラーは、もう使用しませんので、ゴミ箱に入れてしまって大丈夫です。

#インストール有無の確認
念のため、VagrantがきちんとPCにインストールされているか、確認してみましょう。
ターミナルを開いて、`which vagrant`と打ち込みます。

下のように、`/usr/local/bin/vagrant`と表示されていればOKです。

```bash:terminal
tachibanakotonenoMacBook-ea: ~tachibanakotone$ which vagrant
/usr/local/bin/vagrant
```

#Versionの確認
また、インストールしてあるVagrantのバージョンを調べることもできます。
同じくターミナルに、`vagrant --version`と打ち込んでみてください。

```bash:terminal
tachibanakotonenoMacBook-ea: ~tachibanakotone$ vagrant —version
Vagrant 2.2.4
```

これで、インストール済みのバージョン`Vagrant 2.2.4`が表示されました。

（参照：https://www.youtube.com/watch?v=VMYNyo58tMg&t=4s）
感想：未経験エンジニアのためのプログラミング教育


むかしむかし、一人の”ひと”がいました。
その”ひと”を称する代名詞、固有名詞、何かの属性かも何もない状態です。

あなたが、技術者として第一歩を踏み出したとき、
皆そのような状態だったのです。
覚えていますか？初めてコンパイルが通って実行ファイルからレスポンスがあったときのこと。

###購入したきっか
・今回教育本を書いたので
・たまたま目にとまったので
・みんなはじめは初心者

###本書の特徴
すでに技術屋としてその場に鎮座していると、気づかないことを再認識できます。
普段何気なく「わからんことはググる！」ことも”あっち”の人達からすると
ハードル高めってこと。
なぜレビューをするのか？プログラミングで何がどううごくのかイメージできないあのときのこと。
なんで、関数名を英語で表記するのか。そもそも英語だからとっついきにくい！
あーもうなんでコンパイル通らないんだよ！！！

そーんな、”あのとき”の、忘れがちな初心を思い返してくれる一冊です。

###本書のポイント
今一度、人に教えるとはなにか？プログラミングからコーディングに昇華するときはいつか？
自分が新人だったときのこと、教育する側だったときのことを俯瞰的に説明しています。
特にP18~19のあえて”教えない”技術は今後の成長の過程でとても大切なエッセンスと想起させられます。

３０ページと、少ないページ数ですが、
はっ！とさせられるキーワードが散りばめられています。


あなたは、今の立場で教育をできますか？

さぁ、この本を手にとって、次の世代を育てましょう！

###お求め先
https://market.techpit.jp/
csvを読み込んでmatplotlibで折れ線グラフを描く

# 環境
windows 10
python 3.7
matplotlib 3.0.3
numpy 1.16.2

# 読み込むCSV
日付と気温のデータ

``` csv
2019-04-05,10
2019-04-06,11
2019-04-07,15
2019-04-08,12
2019-04-09,17
```

# コード
numpyでファイルを読み込むときにdoctypeを指定して、csvの各列のデータ型を指定するのがポイント。

```py
import matplotlib.pyplot as plt
import numpy as np

with codecs.open('temperature.csv', 'r', 'utf8') as f:
    csv = np.loadtxt(
        f,
        delimiter=',', 
        dtype=[('date', 'U10'), ('temperature', 'i8')]
    )
x = csv[:]['date']
y = csv[:]['temperature']
plt.plot(x, y)
plt.show()
```
Dockerの設定ファイルはどこ！！

デフォルトでdockerの起動時オプションはどこにあるのでしょうか。 
Linuxディストロや環境によって、いくつかパターンがあるようです。

#CentOS
docker.serviceというファイルがどこかにあるはずです。サービスの構成ファイルをいじれば起動時オプションが変えられます

わたくしの場合

```
/usr/lib/systemd/system/docker.service
```
にありました。


ほかにも、次のようなケースがあるようです

```
/usr/lib/systemd/system/docker.service
```
```
/etc/systemd/service/docker.service
```
```
/lib/systemd/system/docker.service
```
```
/usr/lib/systemd/system/docker.service
```

あるいはオプション用ファイルがすでにある場合があります

```
/etc/default/docker
```



#Ubuntu
```
/etc/init
```
```
/etc/init/docker.conf
```
```
/etc/init.d/docker
```
```
/lib/systemd/system/docker.service
```

あるいは設定を/etc/docker/daemon.jsonを操作して行う場合もあります。

#docker.service (CentOS7)
ExecStartをいじれば起動オプションをつけられる。

```
[Unit]
Description=Docker Application Container Engine
Documentation=https://docs.docker.com
BindsTo=containerd.service
After=network-online.target firewalld.service containerd.service
Wants=network-online.target
Requires=docker.socket

[Service]
Type=notify
# the default is not to use systemd for cgroups because the delegate issues still
# exists and systemd currently does not support the cgroup feature set required
# for containers run by docker
ExecStart=/usr/bin/dockerd -H fd:// --containerd=/run/containerd/containerd.sock  -H 0.0.0.0:5555
ExecReload=/bin/kill -s HUP $MAINPID
TimeoutSec=0
RestartSec=2
Restart=always

# Note that StartLimit* options were moved from "Service" to "Unit" in systemd 229.
# Both the old, and new location are accepted by systemd 229 and up, so using the old location
# to make them work for either version of systemd.
StartLimitBurst=3

# Note that StartLimitInterval was renamed to StartLimitIntervalSec in systemd 230.
# Both the old, and new name are accepted by systemd 230 and up, so using the old name to make
# this option work for either version of systemd.
StartLimitInterval=60s

# Having non-zero Limit*s causes performance problems due to accounting overhead
# in the kernel. We recommend using cgroups to do container-local accounting.
LimitNOFILE=infinity
LimitNPROC=infinity
LimitCORE=infinity

# Comment TasksMax if your systemd version does not supports it.
# Only systemd 226 and above support this option.
TasksMax=infinity

# set delegate yes so that systemd does not reset the cgroups of docker containers
Delegate=yes

# kill only the docker process, not all processes in the cgroup
KillMode=process

[Install]
WantedBy=multi-user.target
~                                                                                                                                                             
~                                              
```

#再読み込みと再起動 CentOS7

```
[root@localhost ~]# systemctl daemon-reload
[root@localhost ~]# service docker restart

```

プロセス確認

```
ps aux | grep docker | grep -v grep
```

#Ref
http://docs.docker.jp/engine/articles/configuring.html
https://forums.docker.com/t/how-to-change-dockerd-h-configuration-on-ubuntu-16-04/32631/3
https://qiita.com/masato/items/e967e531e75101796c30
OpenStackとは　VMwareと比較してみた。

2020/01/17
文章の気になるところを修正、他の大きな変更はありません…
久々に確認しましたが思った以上に酷い…これいつ書いたんだっけ…


# OpenStackとは
VMwareばかり触っていましたが、クラウドに興味が出来たので調べてみました。

しかしいまいち良く分からない。
暫くして、そもそも単純にESXiと比べることが間違っていることに気が付いたので、簡単にまとめてみました。

##OpenStackとは
そもそもOpenStackというパッケージは**無い**です。
OpenStackパッケージ群という括りで、8個のサービスと関連パッケージがあります。
すべてをインストールすれば1台でもシステムとして使用できます。
本来であれば最低限の稼働台数が3台なので、障害が起きた時のパージ分が必要です(+n)です。
（例えば4台なら1台壊れても大丈夫）


##で結局、VMware ESXiとどう違うの
ひとつずつ確認します。自分が疑問に思ったところ中心です。

###インストールOS
VMware ESXi：イメージをVMwareからダウンロードしてCD焼いてインストールする。
OpenStack：Linuxで基本的に動作します。
→開発はFedoraで行っているという話で、Cent-OSやRedHatも対応している。
そのOS上でデフォルトはKVM上で動かすみたい。


###クラスターとして
VMware ESXi:vCenterでHAとか
OpenStack：管理画面はNovaというWebで操作できるサービスがあります。基本的に仮想マシンの管理は自動。
純粋に仮想マシンを動かすスペースとして使用するサーバーはリソース軽減のためNovaを入れないことがあるとかないとか
ドキュメントには10GとIPMI繋げば、PXEブートをし必要なパッケージインストール、DHCPで自動ノード割り当て、という運用方法もあるそうな。


###ストレージ（ホストデバイス）
VMware ESXi:ホストデバイスハードウェアRAID必須。
OpenStack(必要ソフトウェアはSwift)：HBAが推奨される。ハードウェアRAIDは邪魔らしい。通常はノード内で1+nでミラーされ保護している。


###仮想マシンの動き
VMware ESXi:ESXi上で動く。複数台でvCenterを動かしている時は手動でサーバーを選択でき、分散することができる
OpenStack（動作ソフトウェアはコンピュート）：自動配置で基本的に変更しない。できない？


###ネットワーク
VMware ESXi：ネットワークアダプタと仮想スイッチでタグとか
OpenStack：VXLAN対応、柔軟すぎてネットワークのCPUオーバーヘッドが重いとの事。10GB以上イーサネット推奨されている。余力必須


###VMware Horaizonと比べる
Horaizonはスナップショットを作成してそれをコピーするイメージ
OpenStackはvCenterのテンプレートと似ている。テンプレートを作成して、それをコピーするイメージ。


##そもそもVMwareESXiとOpenStackを比べるのは
間違っている。

噂によると、ESXiはペットであると。サーバーから大切に作りこむと。
OpenStackは経済動物であると。障害が起きたらテンプレートから作り直す。
最近の傾向としてマルチサーバーで作動させるのが前提のため、障害時の対策としてソフトウェアでの対策を盛り込むことを要求されているみたい。
→k8sになるんだろうね。巻末参照

##費用的な話。
ライセンスかからない分、OpenStackの方が安いのかもしれない。
ただ保守は無いから小規模であればまだESXiの方が使いやすいのかも。
RedHatが有償でやるとかやらないとか。

##じゃあ最終的にどう使い分ければ。
OpenStackが光るところってほぼDCオンリー
あとは開発の検証ですね。



##おまけ：dockerについて
マシンの仮想化が進んだ結果、ソフトウェアの仮想化も進んでいます。
LAMPなイメージ。
プラットフォームは特に気にせず、それぞれに対応できる、らしい。

##おまけ：Kubernetesについて
dockerをクラウドに対応させたイメージ
dockerが1台に対して、Kubernetesは複数台を効率よく管理できる、らしい。
クバネティス/クバネテス/クーべネティスと読むけど覚えられない。
名前が長すぎるのでk8sという愛称がついている。
GitからGitHubへssh接続する際に「Bad owner or permissions on /home/${username}/.ssh/config」と表示される

GitHubへRSA鍵を登録後、ターミナルで以下コマンド実行後にエラーとなった

```
ssh github
Bad owner or permissions on /home/${username}/.ssh/config
```

.ssh/configファイルの権限を以下のように変え解決

```
chmod 600 ~/.ssh/id_rsa_github.pub
```
AMP で任意の JS を実行できる amp-script を試してみた

明日の AMP Conf のための事前に動かしてみた。

## amp-script とは何か

今まで https://github.com/ampproject/amphtml に登録された一部のJSしか出来なかったAMPだが、amp-script を使うと任意の JS を実行できる。ただし、 `WebWorker` コンテキストの中でのみ。

本来ならDOMが存在しないWebWorkerだが、しかしDOMに触れないわけではない。 WebWorker の中に DOM と似たようなオブジェクトが実装されており、それを操作することでメインスレッドのJSに反映される。

[この DOM がすごい2018: worker-dom - mizchi's blog](https://mizchi.hatenablog.com/entry/2018/10/18/155448)

https://github.com/ampproject/worker-dom

## amp-script を導入する

```html:static/index.html
  <head>
    <!-- ... -->
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script
      async
      custom-element="amp-script"
      src="https://cdn.ampproject.org/v0/amp-script-0.1.js"
    ></script>
  </head>
  <body>
    <amp-script layout="container" src="/main.js">
      <button id="hello">Insert Hello World!</button>
    </amp-script>
  </body>
```

```js:static/main.js
const button = document.getElementById("hello");
button.addEventListener("click", () => {
  const el = document.createElement("h1");
  el.textContent = "Hello World!";
  document.body.appendChild(el);
});
```

このコードは実際には main-thread で実行されておらず web-worker での実行されている。
ここで具体的にどういうコードを書けるかは https://github.com/ampproject/worker-dom の demo を参照

この例は単純すぎるDOM操作だが、 preact も動くとのこと。 React が動くは不明だが、worker-dom のソースコードを読んだ限り考慮されてはいる。

## AMP用 CORS サーバーを立てる

このままではまだ動かない。このコードを AMP として動かすには、AMP用に動くことを証明する Header を付与する必要がある。

[CORS in AMP - amp.dev](https://amp.dev/ru/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests?referrer=ampproject.org) を参考に、雑に node サーバーを立てた。

```js:server.js
const express = require("express");
const app = express();

app.set("port", process.env.PORT || 3000);

app.use((req, res, next) => {
  const host = req.get("host");
  const protocol = host.startsWith("localhost") ? "http" : "https";
  const origin = protocol + "://" + req.get("host");
  res.set("Access-Control-Allow-Origin", origin);
  res.set("AMP-Access-Control-Allow-Source-Origin", origin);
  res.set(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  res.set("Access-Control-Allow-Methods", "GET, POST, OPTIONS, HEAD, PUT");
  res.set("Access-Control-Allow-Credentials", "true");
  next();
});

app.use(express.static(__dirname + "/static"));

app.listen(app.get("port"), function() {
  console.log("Listening on port " + app.get("port"));
});
```

```json:package.json
{
  "name": "tryamp",
  "version": "1.0.0",
  "main": "index.js",
  "author": "mizchi <miz404@gmail.com>",
  "license": "MIT",
  "scripts": {
    "now-start": "node server.js"
  },
  "dependencies": {
    "express": "^4.16.4"
  }
}
```

(npm install などは略)

こういう構成を意図してる。

```
server.js
package.json
static/
  hello.js
  index.html
```

ローカルで動くのもなんなので now.sh にデプロイ

```
npm i -g now
now deploy
```

https://tryamp-ywasobhymt.now.sh/ にデプロイした。

## 開発者フラグを立てる

(この節は将来的に不要)

まだ動かない。 https://tryamp-ywasobhymt.now.sh/ (または localhost のサーバー) で DevTools を開いて `AMP.toggleExperiment('amp-script')` を eval する。この状態でリロードするとやっと有効になる

![](https://i.gyazo.com/118feba8679a14e124f200caa30ec16a.gif)

## おわり

次は preact + typescript やる
Laravelで指定した配列の値が該当するレコードを取得する。

# 指定した配列の値が当てはまるレコードの取得

`whereIn`を使えば配列の中の値が当てはまるレコードを全て取得できる。

```php
$maker_list = [
    'HONDA',
    'YAMAHA',
    'SUZUKI',
    'KAWASAKI'
];

$motorCycles = DB::table('motorCycles')
    ->whereIn('maker', $maker_list)
    ->get();
```

# 指定した配列の値が当てはまらないレコードの取得

`whereNotIn`を使えば配列の中の値が当てはまらないレコードを取得できる。

```php
$maker_list = [
    'HARLEY-DAVIDSON',
    'DUCATI',
    'BMW'
];

$motorCycles = DB::table('motorCycles')
    ->whereNotIn('name', $maker_list)
    ->get();
```

## 小話
私の場合は配列の中身がユーザーの入力などにより大きく変動するためforeachで回して頑張ろうとしてました。
gradleでマルチプロジェクト

# 構成
こんな感じ

```
├── build.gradle
├── gradle
│   └── wrapper
│       ├── gradle-wrapper.jar
│       └── gradle-wrapper.properties
├── gradlew
├── gradlew.bat
├── projects
│   └── template
│       ├── build.gradle
│       └── src
│           ├── main
│           │   ├── java
│           │   │   └── rhirabay
│           │   └── resources
│           │       └── application.yml
│           └── test
│               ├── java
│               └── resources
└── settings.gradle
```

# やること
1. ./settings.gradleにサブプロジェクトを記述
2. サブプロジェクト直下にbuild.gradle配置

１だけだとサブプロジェクトがプロジェクトとして認識されなかった（Intellijで見た目が変わることで確認）

## ./settings.gradleにサブプロジェクトを記述
```
include ':projects:template'
```
- 上記のようにincludeでサブプロジェクトを指定する。
- 「projects/template」ではなく「projects:template」と「:」で区切ることに注意！

# TBD
※マルチプロジェクトに関することで何か新しい取り組みを初めたら随時更新します
View Controller でキーイベント処理をする

_hatenablogから2018-12-17の記事を移行しました。
https://bitsandbobs.hatenablog.jp/entry/2018/12/17/181419_

----

## 環境
- macOS High Sierra 10.13.6
- Xcode 10.1

## 前提
- テキストボックスなど、キー入力を処理する View がないこと

## サンプルコード

```swift
override func keyDown(with event: NSEvent) {
    let s = event.characters ?? "(nil)"
    print(#function + ": " + s)
}

override func viewDidAppear() {
    super.viewDidAppear()
    
    if let window = self.view.window {
        window.makeFirstResponder(self)
    }
}
```

## 説明
キー入力イベントをレスポンダチェーンで拾うには NSResponder#keyDown などのキーイベントメソッドをオーバーライドすればよい

NSViewController#keyDown をオーバーライドしてもキー入力に反応しないというブログや質問/回答を散見したが、原因はおそらく、First Responder になっていないからだと思われる (環境によるかもしれないので断定はできない)

なので、サンプルコードでは View が表示されたときに (viewDidAppear で)
明示的に NSWindow#makeFirstResponder を呼び出して、View Controller 自身を First Responder に指定している (ちなみに、makeFirstResponder を処理するのに acceptsFirstResponder -> true である必要はない)

First Responder がキーイベントを処理する Responder に移ったとき (例えば、テキストボックスが Window 内にあり、そこにフォーカスされたときなど) には View Controller のキーイベントメソッドは処理されなくなるので注意

ラベルやボタンなど、キー入力を処理しない View が First Responder であれば、レスポンダチェーンをたどり View Controller のイベントメソッドが処理されるが、テキストボックスなどは自身のイベントメソッドを処理してレスポンダチェーンを終了してしまうためだ (たぶん)

Window 内のどの View がキーイベントを処理中でも、キーイベントを検知したいというのであれば、それはレスポンダチェーンではなく (NSResponder のメソッドをオーバーライドするのではなく)、NSEvent#addLocalMonitorForEvents などを利用してイベントハンドラを追加すべきかと思う


## 参考
- [Event Architecture](https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/EventOverview/EventArchitecture/EventArchitecture.html)
- [NSResponder - AppKit | Apple Developer Documentation](https://developer.apple.com/documentation/appkit/nsresponder)
- [NSWindow - AppKit | Apple Developer Documentation](https://developer.apple.com/documentation/appkit/nswindow)
- [NSEvent - AppKit | Apple Developer Documentation](https://developer.apple.com/documentation/appkit/nsevent)


## 調査メモ
- NSWindow#makeFirstResponder を呼び出さないとき、画面表示時の First Responder -> Window だった
- acceptsFirstResponder は、タブキーなどでコントロールのフォーカスを移す際に、フォーカスが移せるかどうかの判定に使用されるものっぽい (調査不足)
- マウスクリックイベントのレスポンダチェーンは NSWindow#firstResponder から始まるのではなく、クリックイベントの発生した座標に存在する View から始まるのではないかと思うが、詳細不明 (調査不足)
C# > ReactiveProperty > テキスト入力途中でもイベント検知





[ReactiveProperty オーバービュー - かずきのBlog@hatena](https://blog.okazuki.jp/entry/2014/05/07/014133)


## View
```csharp
<TextBox Text="{Binding Input.Value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

```


## ViewModel
```csharp
public ReactiveProperty<string> Input { get; set; } = new ReactiveProperty<string>();
```


```csharp
Input.Subscribe(_ => Input_Changed());


private void Input_Changed()
{
    
}

```
Why spring consider as a lightweight framework

Java is one of the most popular programming languages in the world even today. The reason for its consistent popularity has a lot to do with its robust frameworks. For any commercial project development, a framework is a must for organized implementation. When it comes to Java, there are many popular frameworks available and different programmers have different preferences. 

Some of those popular frameworks are Spring, Struts, Hibernate, JSF, Vaadin, GWT, Grails, and others. Out of all these frameworks, Spring framework is the most popular and most widely used across the world. 

Spring on the other hand is lightweight because it allows minimally invasive development with POJOs. A lightweight framework makes itself as invisible as possible. One of the ways it does this is by encouraging POJO-oriented development. 

As others have already pointed out, Spring is considered lightweight compared to traditional Java EE applications. That is precisely the argument for Spring being heavyweight. Modern applications have to do a lot of stuff in order to be competitive. If your app isn’t doing that stuff in your code, then that means the framework is. The more that the framework is doing stuff for you, the more heavyweight it is. 

Those Java EE applications used to be deployed to heavyweight application servers (websphere, weblogic, etc.), whereas Spring could be deployed to a lightweight web container like Tomcat or Jetty.

In the past few years, the industry started shifting towards more and more lightweight models. Java EE introduced the Web Profile which is only a subset of the full Java EE feature set.

Pivotal also introduced the Spring Boot framework which greatly simplifies things working with Spring and it's also able to run as a jar application from the command line using an embedded Tomcat/Jetty/Undertow web container.

Similar to Spring Boot, there's Dropwizard, Ratpack, Spark, etc. which are even more lightweight frameworks compared to Spring as they are targeted at creating microservices and only include the bare minimum needed to create web applications.I should also mention the Play framework and Vert.x. These frameworks are also considered lightweight while they provide a rich feature set.


**Related blog:**

[spring boot crud operations example](http://candidjava.com/tutorial/spring-boot-hibernate-crud-example/)