OmniAICreator/Qiita-1.07M huggingface dataset:
Vue textarea @keyup.ctrl.xyz

### @keyup.ctrl.{keyCode} @input =>oninput
```html
<script src="https://unpkg.com/vue"></script>
<div id="bbb" :class='c'>
 <textarea 
@keyup.ctrl.13='fred'
 @keyup.ctrl.37='forange'
 @keyup.ctrl.38='fblue'
 @keyup.ctrl.39='fpink'
 @keyup.ctrl.40='fgray'           
 @input='finput'           
           >{{help}}</textarea>
</div>
<!------------------------>
<style>
 textarea{width:33rem;height:6rem;}
#bbb{transition:background-color 0.3s ease-in-out;}
.red{background-color:red}
.orange{background-color:orange}
.blue{background-color:blue}
.pink{background-color:pink}
.gray{background-color:gray}
</style>
```
```js
new Vue({
 el:'#bbb'
 ,data:{c:'blue',help:'color change is ctrl+enter,ctrl+ 4arrow key'}
 ,watch:{//v-model:x is watch the x
  //v:function(n,o){this.check(n,o)}
 }
 ,methods:{
  fred:function(ev){ this.c='red' }
  ,forange:function(ev){this.c='orange' }
  ,fblue:function(ev){this.c='blue' }
  ,fpink:function(ev){this.c='pink' }
  ,fgray:function(ev){ this.c='gray'}
  ,finput:function(ev){
   console.log(ev)
  }
 }
})
```

### 追記 contenteditable も同様
```html
 <div contenteditable="plaintext-only"           
@keyup.ctrl.13='fred'
 @keyup.ctrl.37='forange'
 @keyup.ctrl.38='fblue'
 @keyup.ctrl.39='fpink'
 @keyup.ctrl.40='fgray'
 @input='finput'           
           >{{help}}</div>
```

### 省略記法の挙動
```html
//work!
<div...  v-on="{
input:finput
      }">
```
```html
//dont work! json . is error. keyup[.]<---
v-on="{ keyup.ctrl.13 :fred
      ,keyup.ctrl.38 :fblue
      ,keyup.ctrl.39 :fpink
      ,keyup.ctrl.40 :fgray
}" 
```
ガッキーが「お帰りなさい」と言ってくれる機能をDialogflowで作ってみた

先週、ついにGoogleHomeを買ったので大学の友達のアイデアを借りつつ早速機能を作ってみました。
成果物はこんな感じです。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ガッキーが｢行ってらっしゃい/おかえりなさい｣を言ってくれるBotを作ってたら土曜日が終わってた件 <a href="https://t.co/P1jNO8LJNU">pic.twitter.com/P1jNO8LJNU</a></p>&mdash; Yuma (@ymk1102_1t) <a href="https://twitter.com/ymk1102_1t/status/982599539877068802?ref_src=twsrc%5Etfw">2018年4月7日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


# ツールや環境など
* Dialogflow
* Actions on Google
* Firebase

# 作成手順
### Firebase
今回、Firebaseは音声ファイル置き場として使います。
[Firebaseの始め方](https://qiita.com/kohashi/items/43ea22f61ade45972881)なんかを参考に、Firebaseのプロジェクトを立ち上げて、ガッキーの音声ファイルを配置していきます。

音声ファイルはネット上に上がってる動画から該当箇所だけ音声切り出す形で取得しました^^;

### Dialogflow
次に、Dialogflowで機能の土台をっていきます。

まず、適当にAgentを立てます。ここは特に指定などないです。

続いてIntents(実際の処理の内容)を埋めていきます。
これは言わせたいセリフのパターン分必要になります。
今回で言うと「行ってらっしゃい用」「お帰りなさい用」の2つ作りました。

次に、それぞれのTraining phrasesの中に反応してほしい言葉を入れていきます。「行ってきます」「いってきます」など。
※今回自分はEntity使わなかったですが、本当は揺らぎ対応は全部Entityに詰めた方がスマートですね。

Training phrasesが終わったらResponsesの中に返してほしい内容をSSMLで入力していきます。

```:SSML
<speak>
  <audio src="[firebase上の音声ファイルのURL].mp3"></audio>
</speak>
```

ここまで来れば処理の内容はほぼほぼ完成です。
Saveすると右上のところからテストができるのでそこで動作確認をした上で次のステップに進みましょう。

### Actions on Google
ここではアプリを呼び出すための設定や実際の動作確認ができます。

1番大事なのはApp informationです。
ここでアプリの名前や呼び出し方を指定できます。
今回の場合は、「みくりさん」という名前にしました。

Ovewviewまで戻って「Surface capabilities」にまでチェックがついていれば実際に動かすことができます。
画面から「TEST DRAFT」でテストをできますし、スピーカーからもアプリを呼び出すことができます。
スピーカーからうまく呼び出せない場合は、自分の言葉が意図したように読み取られていない可能性が大いにあるのでどう読み取られているかを画面上で確認することをおすすめします。

音声ファイルの取得からスピーカーでの出力までの流れは以上です。


# 参考サイト
[SSMLの公式ドキュメント](https://developers.google.com/actions/reference/ssml)
[Firebaseの始め方](https://qiita.com/kohashi/items/43ea22f61ade45972881)
[Dialogflow入門](https://qiita.com/kenz_firespeed/items/0979ceb05e4e3299f313)
Qiitaの特定タグ、ユーザー、オーガニゼーションの更新をSlackに連携する方法

# やりたかったこと

Qiitaの新着記事をSlackに連携して通知したかった。

# やりかた

SlackにはRSSを投稿してくれる `/feed subscribe` コマンドが用意されている。
このコマンドにRSSのURLを指定すれば新着記事が通知される。

## コマンド例

### タグ

```
/feed subscribe https://qiita.com/tags/[タグ名]/feed.atom
```

### ユーザー

```
/feed subscribe https://qiita.com/[ユーザー名]/feed.atom
```

### オーガニゼーション

```
/feed subscribe https://qiita.com/organizations/[オーガニゼーション名]/activities.atom
```
Zabbix Sender の使い方

##■はじめに
Zabbixの動作確認をするときにZabbixSenderを使用すると、監視データをコマンドで送信することができて
便利なので使い方を紹介します。

##■環境
・Zabbix 4.0.0alpha5

##■インストール
>~~~
># yum install zabbix-sender
>~~~

##■設定投入
###・ホスト作成
1.「設定」「ホスト」「ホストの作成」と順に開く
2.次の情報を入力して「追加」をクリック

|項目|値 |
|-------------------------|--------------------------|
| ホスト名 | host1 |
| グループ | sender_test |

###・アイテム作成
1.「設定」「ホスト」から「host1」の「アイテム」を開く
2.「アイテムの作成」を開き、次の情報を入力して「追加」をクリック

|項目|値 |
|-------------------------|--------------------------|
| 名前 | CPU使用率 |
| タイプ | Zabbixトラッパー |
| キー| trap_cpu |


###・トリガー作成
1.「設定」「ホスト」から「host1」の「トリガー」を開く
2.「トリガーの作成」を開き、次の情報を入力して「追加」をクリック

|項目|値 |
|-------------------------|--------------------------|
| 名前 | CPU使用率監視 |
| 深刻度 | 致命的な障害 |
| 条件式 | {host1:trap_cpu.last()}>=90 |

##■Zabbix Senderの実行
###コマンドで直接値を指定する場合
>~~~
># zabbix_sender -z 127.0.0.1 -s host1 -k trap_cpu -o 95
>~~~

###ファイルを取り込む場合
>~~~
># vi data.csv
>host1 trap_cpu 1523169600 55
>host1 trap_cpu 1523169900 66
># zabbix_sender -z 127.0.0.1 -i data.csv 
>~~~

　区切り文字：半角スペース
　フォーマット：「ホスト名」 「アイテムキー」 「取得時間(UnixTime)」 「取得値」

###ループして大量にデータを作る場合
>~~~
># vi loop.sh
>#/bin/sh
>for i in {1..10} ; do
>    zabbix_sender -z 127.0.0.1 -s host1 -k trap_cpu -o ${i}
>done
># chmod 755 loop.sh
># ./loop.sh
>~~~

以上です。
Mosquitto サーバログは定期管理が必要

#Mosquitto サーバログの定期管理

サービス状態を確認し、

> service mosquitto status

Warning: Journal has been rotated since unit was started. Log output is incomplete or unavailable.

Mosquitto のサーバログはひたすら増えるので定期管理が必要
ということで、以下のディレクトリの不要なログを削除する

> /var/log/mosquitto

サービス再起動。
オフラインリアルタイムどう書くE23に参加しました

[オフラインリアルタイムどう書くE23](https://yhpg.doorkeeper.jp/events/71800)
[問題](http://nabetani.sakura.ne.jp/hena/orde23nokoch/)

アルゴリズム系の勉強会に参加したのは初めてで大変勉強になりました。
制限時間内に解けなかった & みなさんの解説も半分くらいしか理解できなくてくやしかったので動くまで実装してみました。

### 配列にすべての結果を展開して調べる

```javascript
function transform(src, commands, index = 0) {
  // state 0: -, 1: ／, 2: ＼
  const rules = {
    a: [0, 1, 2, 0],
    b: [0, 1, 0, 2, 0]
  }

  let result = [];
  src.forEach((state) => {
    rules[commands[index]].forEach((transition) => {
      result.push((state + transition) % 3);
    });
  });

  // recursive
  if (commands[index + 1]) {
    result = transform(result, commands, index + 1);
  }

  return result;
};

function solve(input) {
  const [target, commands] = input.split(',');
  const states = transform([0], commands);

  if (states.length < target) return 'x';
  return ['0', '+', '-'][states[target -1]];
}
```
この方法だと配列の要素数が増えすぎて、61問目以降 `ATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory` というエラーが出てしまいました。

実行時間は１〜６０までで `5006.676ms` かかってました。

### 解説を参考に実装
[解説](https://qiita.com/Nabetani/items/eae9ac532f5e193486f6)
問題を作成した方の解説を参考に傾きを知りたい線分のみ計算するよう下記のように実装しました。

```javascript
const rules = {
  a: [0, 1, 2, 0],
  b: [0, 1, 0, 2, 0]
};

function checkState(targetPos, commands) {
  let curPos = targetPos;
  let state = 0;
  let count = 1;

  commands.split('').reverse().forEach((command) => {
    let index = (curPos % rules[command].length) - 1;
    if (index < 0) index = rules[command].length - 1;

    state += rules[command][index];
    curPos = Math.ceil(curPos / rules[command].length);
    count *= rules[command].length;
  });

  return count < targetPos ? 3 : state % 3;
}

function solve(input) {
  return ['0', '+', '-', 'x'][checkState(...input.split(','))];
}
```

与えられたルール(ex. `ab`) の後ろの傾きから順に足していくようにしました。

`6,ab`というinputが与えられた場合
bのときの線分は[01020][01020]...といった感じに5x個になるので、対象の線分(6番目)は`6 % 5 => 1番目`という風に導きました。
aの対象の線分は`6 / 5（bのlength）`を繰り上げて`2`、`2 % 4(aのlength) =>2番目`と導きます。
b [01020]の1番目 => 0
a [0120]の２番目 => 1
を合わせた状態`1`が対象の線分の傾きになります。

### 実行速度
ひとつの線分の傾きしか計算しなくなったので66問すべての実行時間は`1.762ms`になりました。

### 余談
速度が速くなったので、６７問目に300桁のルールを与えてみました

```
test( "1000000000000000000000000000000000000000000,babbbbbbabbabbbbbbabbabbbbbbabbabbbbbbabbabbbbbbabbabbbbbbabbabbbbbbabbabbbbbbabbabbbbbbabbabbbbbbabbabbbbbbabbabbbbbbabbabbbbbbabbabbbbbbabbabbbbbbabbabbbbbbabbabbbbbbabbabbbbbbabbabbbbbbabbabbbbbbabbabbbbbbabbabbbbbbabbabbbbbbabbabbbbbbabbabbbbbbabbabbbbbbabbabbbbbbabbabbbbbbabbabbbbbbabbabbbbbbab", "+" );
```

実行速度にばらつきはありますが`1.947ms`前後で計算できてました。

上記の実装は[github](https://github.com/kinashi/doukaku-e23)にあげました。
Mastodon(railsアプリ)を別サーバに引っ越しする

Mastodonを容量不足の問題のため別サーバへ引っ越ししました。
移行手順を備忘録として残しておきます。
全体像が分かりやすいように多少シンプルに書いています。

# 前提
- サーバAからサーバBへ移すことを前提とする※どちらもnon-docker
- ドメインは同一のものを使用し、Aレコードを変更する

# 移行前の事前準備
- 移行することをインスタンス内で告知し、バックアップする手順を案内

![9be6b7f698bb8b03.png](https://qiita-image-store.s3.amazonaws.com/0/131565/f6a13cb6-eb8f-9866-a612-28317bb70282.png)

- [公式のインストール手順](https://github.com/tootsuite/documentation/blob/master/Running-Mastodon/Production-guide.md)を参考にサーバBへMastodonを新規で入れて動作させておく
- rsyncコマンド（下記がコマンド例）でサーバAのMastodonメディアファイルをサーバBへ同期させる

```shell
rsync -av --delete -e "ssh -p SSHのポート名" /home/サーバAユーザ/public_html/mastodon/public/system/ サーバBユーザ@サーバBのIPアドレス:/home/サーバBユーザ/public_html/mastodon/public/system/
```
- DNS切り替えのためドメインのTTLを短くしておく

# 移行作業
- サーバAとサーバBのMastodon系のサービスをstopさせる
- 下記のコマンドでサーバAのDBデータをエクスポート

```text
pg_dump -U mastodon -Ft mastodon_production > /home/サーバAユーザ/mastodon_production.tar
```

- SFTPなどでサーバAのDBデータをサーバBに移す
- サーバBでエクスポートしたサーバAのDBデータをインポート

```text
pg_restore -U postgres -d postgres -v -C -c -Ft /home/サーバBユーザ/mastodon_production.tar
```

- `移行前の事前準備`で実施したrsyncをもう一度実施して、差分が出た分の同期をとる
- サーバBの`.env.production`ファイルのドメイン情報を書き換える
- certbotコマンドなどでサーバBの証明書を新規発行
- `RAILS_ENV=production bundle exec rails mastodon:feeds:build`でホームの再構築※移行させると何故かホームが空っぽになるので
- `bundle exec rails r 'Rails.cache.clear'`でRails(+ Redis & memcached) キャッシュのクリア
- サーバBのMastodon系のサービスをstartさせる
- 動作の確認が取れたらドメインのTTLを元に戻しておく

# 下記のURLを参考にさせていただきました、ありがとうございました
- [Mastodonサーバ移行手順（非Docker）](https://qiita.com/kumasun/items/520838806e4524b229b9)
ng g component でエラー

#ng g component でエラー

AngularCliで新規にhogeコンポーネントを作成。

> ng g component hoge

と入力すると

Error: More than one module matches. Use skip-import option to skip importing the component into the closest module.
More than one module matches. Use skip-import option to skip importing the component into the closest module.

とエラー。この場合、

> ng g component hoge --module app.module

で無事にhoge が作成される。
【Google Domains】ドメイン契約、DNS設定、WEB公開、メール転送まで

# Google Domainsとは
Google が提供するドメイン取得サービスです。
[Google Domains](https://domains.google.com/)

ドメイン取得サービスは、多種多様ですが、個人的にGoogle Domainsの以下の特徴に惹かれて、契約してみました。

| 特徴 | 内容 |
|:-----------|:------------|
| メール転送       | 最大100のメールエイリアスを作成し、別メールアドレスに転送可能|
| Googleサービスに集約 | 支払い、サービス管理をGoogleに集約|
| Gsuite移行可     |月額5USドルでGSUITE（ユーザー名@ドメイン名） に移行可能|

## この投稿で扱う内容
* ドメイン契約
* DNS設定からWEB公開まで
* メール転送


# ドメイン契約
[Google Domains](https://domains.google.com/)のページにアクセスします。
![001.jpg](https://qiita-image-store.s3.amazonaws.com/0/117828/b6d45950-abd6-1050-f30e-4c68c0718c16.jpeg)
>GoogleのWEB画面のキャプチャは、英語ページですが、表示言語を日本語に切替も可能です。

<br>
検索欄に希望するドメイン名を入力し、検索します。
![002.jpg](https://qiita-image-store.s3.amazonaws.com/0/117828/9f5cae63-00ad-c6da-626c-e4a8d4c005b7.jpeg)


検索結果リストに値段がでているものが、購入可能候補です。
![003.png](https://qiita-image-store.s3.amazonaws.com/0/117828/29ebfd1f-3d39-02ba-7343-0e0e1f231476.png)
>実際にカートに入れようとするとエラーになるものが一部あり、カートに入れる時点で、購入できないものもありました。<br>premium表記があるものは、年契約の料金の他に、購入時にプレミアム料金が加算される様です。
![15.png](https://qiita-image-store.s3.amazonaws.com/0/117828/29e1272c-e446-53f8-7d97-8ce43549e507.png)



<br>
カートに移動
![004.png](https://qiita-image-store.s3.amazonaws.com/0/117828/dde48bf1-2ec4-d1c0-86ab-7c03d4a6a984.png)

<br>
WHOISで登録者の公開有無や毎年、サービスを自動更新するかを設定します。
![16.png](https://qiita-image-store.s3.amazonaws.com/0/117828/69d9edba-eb75-41ee-cd2c-dd095dfeaf51.png)

<br>
精算ボタンを押し、契約者情報や支払方法を入力します。
>キャプチャをとっていませんが、画面の支持に従い精算を行います。


<br>
手続き完了すると、契約確認メールが届くので、このメールの確認リンクをクリックすれば、手続き完了です。
![006.png](https://qiita-image-store.s3.amazonaws.com/0/117828/e582238c-8d22-6c4c-1562-0657e831dd09.png)

# DNS設定からWEB公開まで
>事前準備
グローバルIPアドレスで公開しているWEBサーバを準備します。
このグローバルIPアドレスに対して、ドメイン名をDNSで割り当てし、ブラウザからアクセスできる様にします。


ドメイン契約完了後、Google Domainsのページに行くと、画面右上にドメイン管理画面の表示ボタンがあります。
クリックし、ドメイン管理画面を表示します。
![18.jpg](https://qiita-image-store.s3.amazonaws.com/0/117828/74a41d1d-b7fe-e652-1de0-fb4dfa893c06.jpeg)
<br>
My domainsから契約したドメインのDNSアイコンをクリックします。
![17.png](https://qiita-image-store.s3.amazonaws.com/0/117828/bfd723f7-62d1-1efe-5d7a-b37213946b71.png)

<br>
利用するネームサーバを設定します。
![007.png](https://qiita-image-store.s3.amazonaws.com/0/117828/45e38476-63ac-a3d5-6107-9a9b66be1f34.png)

>Googleのネームサーバのままでよいと思いますが、各自の基準で登録ください。

<br>
カスタムリソースレコードを登録します。
![009.png](https://qiita-image-store.s3.amazonaws.com/0/117828/5026f870-7d67-dae4-3853-f4179b7a8265.png)
>私の場合、www.ドメイン名　または　ドメイン名のURLで公開する様に設定しています。

<br>
ブラウザのURLにドメイン名を入力し、WEBページが表示される事を確認します。
![10.png](https://qiita-image-store.s3.amazonaws.com/0/117828/a940a3d9-454f-0c05-ba0f-ebb4c2e50427.png)

# メール転送
ドメイン管理画面からメールアイコンをクリックします。
ドメインで利用したいメールアドレスをメールエイリアスとして入力します。
転送先のメールアドレスを入力し、追加ボタンで登録します。
![11.png](https://qiita-image-store.s3.amazonaws.com/0/117828/e64f91cd-dd68-44dc-a07d-228d12c6fb11.png)

ドメインのメールエイリアス宛に、メールを送信します。
転送先のメールアドレスで、メールが受信できればOKです。
複数台数のサーバーをVirtualBoxで立てる時にがっつりはまった話

やりたかったこと

VirualBox内に複数サーバーを立てることでfrontサーバーとapiサーバーを分けたかった。

front<->apiというようにapiサーバー内にデータを保管し、frontサーバーからはRestで取得することを想定していた。

ということで、Vm上に複数台のサーバーを立てようと試みた。

VagrantFileを編集することにする

vagrant upをすると落ちる。とにかく落ちる。全然起動しない。。。。

vb.name = "centos7"<-こいつが原因でした。これをコメントアウトするとあっという間に解決。

無事 vagrant upできたとさ。おしまい。
最適レギュレータ LQR (Linear–quadratic regulator) をC++で書いてみた

# 何やったか
制御工学でよく用いられる最適レギュレータLQRをC++で実装してみた
下記コードあり

# 背景
普段Matlabで実装されている関数lqrを用いていたのでROSで動かすとき動かすとき困った．
Pythonの場合python controlというパッケージに入っているが，C++では見当たらなかった．

# 前提条件
Eigenライブラリーが入っている

# 参考文献
http://www.humachine.fr.dendai.ac.jp/lec/SDRE_%E3%83%86%E3%82%AF%E3%83%8E%E3%82%BB%E3%83%B3%E3%82%BF%E8%AC%9B%E6%BC%9405.pdf

# 解説
## 最適レギュレータとは
### 問題設定
制御対象 $ y=Ax+Bu $ がある時，そのシステムを安定化させるようなフィードバックゲイン $ K $ を求める．
フィードバックをかけた時の閉ループ系 $ \dot{x} = (A-BK)x $ が安定化することを目指す

### 最適制御問題
制御対象 $ y=Ax+Bu $ がある時，

```math
評価関数 V = \int_{0}^{\infty} (x^{T}Qx + u^{T}Ru) dt
```
を最小化にするような制御入力$u$を求める

制御入力$u$ は 

```math
 u = -R^{-1}B^{T}Px
```

で求められるが，ここで$R$はリカッチ方程式ので得られる正定解である．

```math
リカッチ方程式　A^{T}P+PA-PBR^{-1}BP + Q = 0
```
を求めて得られる解$P$を代入することで制御入力$u$が求められる．

## リカッチ方程式の求め方
1. 数値積分法
 - ループ，遅い．微分リカッチ方程式の数値積分
2. 有本-ポッター法
 - 固有値分解．ハミルトン行列の応用
3. Schur分解法
 - 固有値分解の改良版
4. ニュートン法
 - ループ計算，遅い，でも実装楽．

**有本ポッター法を用いる**

# コード
```c++
Eigen::MatrixXd calcGainK()
{
    /**
    * Calculate LQR Gain K
    * Solves Riccati Equation using Arimoto Potter Method
    */
    Eigen::MatrixXd  P = care(A, B, Q, R);
    return R.inverse() * B.transpose() * P;
}

Eigen::MatrixXd care(const Eigen::MatrixXd A,const Eigen::MatrixXd B,const Eigen::MatrixXd Q,const Eigen::MatrixXd R)
{
    int n = (int)A.rows();
    // Hamilton Matrix
    Eigen::MatrixXd Ham(2*n, 2*n);
    Ham << A, -B*R.inverse()*B.transpose(), -Q, -A.transpose();

    // EigenVec, Value
    Eigen::EigenSolver<Eigen::MatrixXd> Eigs(Ham);
    if (Eigs.info() != Eigen::Success) abort();

    // eigenvector storage
    Eigen::MatrixXcd eigvec(2*n, n);
    int j = 0;

    // store those with negative real number
    for(int i = 0; i < 2*n; ++i){
        if(Eigs.eigenvalues()[i].real() < 0){
            eigvec.col(j) = Eigs.eigenvectors().block(0, i, 2*n, 1);
            ++j;
        }
    }

    Eigen::MatrixXcd U(n, n);
    Eigen::MatrixXcd V(n, n);

    U = eigvec.block(0,0,n,n);
    V = eigvec.block(n,0,n,n);

    return (V * U.inverse()).real();
}
```
Laravel 認証

メルアド / パスワード認証の設定を、Laravelの新規プロジェクト作成から行う手順です。

公式ドキュメント：
https://readouble.com/laravel/5.6/ja/authentication.html

# 環境

PHP7.1
MySQL5.7
Laravel5.6

# Laravel 新プロジェクト作成

```
# laravel new [プロジェクト名]
```

# DB アカウント設定

準備：
作成したプロジェクト用のDBを作成しておきます。

その後、下記設定を行います。

```
# vi .env
```

```:.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=[DB名]
DB_USERNAME=[ユーザ名]
DB_PASSWORD=[パスワード]
```

# キャッシュ・セッション等のパーミッション設定

```
# chmod 777 -R storage/logs/
# chmod 777 -R storage/framework/
```

※rootでLaravelプロジェクトを作成したからかもです。


# 認証

メルアド認証する為の画面や処理が、下記コマンドを実行するだけで用意されます。

```
# php artisan make:auth
# php artisan migrate
```

## 生成されるページ

ログインページ：
http://xxxx.xx/プロジェクト名/public/login

ユーザ登録ページ：
http://xxxx.xx/プロジェクト名/public/register

パスワード再発行ページ：
http://xxxx.xx/プロジェクト名/public/password/reset

ログイン後：
http://xxxx.xx/プロジェクト名/public/home



## 認証用ビュー

[ルートディレクトリ]/resources/views/auth/

## ルート

[ルートディレクトリ]/routes/web.php

自動追記：

```php:web.php
Auth::routes();
```

## 認証用コントローラ

ログインページ：
[ルートディレクトリ]/app/Http/Controllers/Auth/LoginController.php

ユーザ登録ページ：
[ルートディレクトリ]/app/Http/Controllers/Auth/RegisterController.php

パスワード再発行ページ：
[ルートディレクトリ]/app/Http/Controllers/Auth/ResetPasswordController.php

### リダイレクト先の設定

各ページのリダイレクト先の設定は、下記「$redirectTo」で行います。

```
protected $redirectTo = '/';
```
Vue progress input v-model and watch

### v-model="xx" => watch:{xx:function(n,o){...} } 
```html
<script src="https://unpkg.com/vue"></script>
<div id="bbb">
<input v-model='v'></input>
<progress :value='v2' :max='max' :title='title'></progress>
</div>
```
```js
new Vue({
 el:'#bbb'
 ,data:{v:10,max:1000,v2:10,title:this.v}
 ,watch:{//v-model:x is watch the x
  v:function(n,o){this.check(n,o)}
 }
 ,methods:{
  check:function(n,o){//new old
   console.log(n,o)
   this.title=n;
   if(isNaN(n))return this.title=`burning value:${n}`
   this.v2=n;
  } 
 }
})
```
余ったスマホで我が家のトイレ事情を改善

# 我が家のトイレ事情
我が家のトイレ事情は
- 4人家族でトイレは一つ、なのでそこそこ埋まる
- トイレが若干居間から遠い
- たまに父親が酔っ払ってトイレで寝てる

上記のような状態のため、我が家ではトイレを巡った攻防でよく揉めます。(特にトイレで寝てるケース)
我が家に平穏を取り戻すため
1.　居間からトイレの空き状態チェックする
2.　長居してるようなら寝てる可能性があるので音を鳴らして起こす

ということができるシステムを構築してみました。

# システム構成
<img width="948" alt="スクリーンショット 2018-04-08 15.24.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/211743/27625865-1be6-0567-4849-a26853ea755c.png">

こんな感じです。
トイレに置くスマホは機種変更で余ったスマホ(URBANO L02)を使用。
サーバーはなぜかその辺に転がってたRaspberry Pi 2 Model Bを使いました。

# ソースコード
https://github.com/nendo-code/washroom_chk

サーバーサイドは初めてnode.jsを使ってみました。
Expressを使うほどのものでもなかったので生のnode.jsでなんとかしました。

# 工夫した点
1. ブラウザでスマホの照度センサの値を取得するため、[DeviceLightEvent](https://developer.mozilla.org/ja/docs/Web/API/DeviceLightEvent)を使いました。2018年4月現在、AndroidのFirefoxでしか動かないらしいです。
2. スマホがスリープモードに入らないよう開発者向けオプションから設定しました。
やり方は[ここ](https://sp7pc.com/google/android/android-howto/19813)を参考にしました

# 今後のアップデート予定機能
- 長時間トイレに入っている場合、誰か倒れてるか電気の消し忘れの可能性があるので家族にLINEする。

# 感想
センサーいっぱい付いてるしwifiも使えるしブラウザも載ってるしスマホってすごいなーって思いました。(小並感)
そもそも我が家のトイレが混む根本的な原因は30過ぎた子供二人が未だに実家で暮らしている事にある気がしますが気づかなかった事にしたいと思います。
Microsoft.Azure.Mobile.Clientをnugetで追加してビルドするとき、Xamarin.Android.Support.CustomTabs関連で怒られるときは

# 概要

素直に`Xamarin.Android.Support.CustomTabs`を追加したら直りました。

# 環境
* Visual Studio 2017 - Versiton 15.6.4
* Xamarin.Android SDK - v8.2.0.16
* Microsoft.Azure.Mobile.Client - v4.0.2
* Xamarin.Forms - v3.0.0.354232-pre3
* NET Standard.Library - v2.0.1

# 現象
Microsoft.Azure.Mobile.Clientを追加して、ビルドしたときにつぎのようなエラーが出ました。

```
重大度レベル	コード	説明	プロジェクト	ファイル	行	抑制状態
エラー	プロジェクト 'StampCard.Android' で必要な Android コンポーネントをインストールしようとしてエラーが発生しました。
プロジェクト 'StampCard.Android' では、コンピューター上に次のコンポーネントをインストールする必要があります:
Xamarin.Android.Support.CustomTabs
JavaLibraryReference: https://dl-ssl.google.com/android/repository/android_m2repository_r29.zip-m2repository/com/android/support/customtabs/23.3.0/customtabs-23.3.0.aar-23.3.0.0
AndroidResources: https://dl-ssl.google.com/android/repository/android_m2repository_r29.zip-m2repository/com/android/support/customtabs/23.3.0/customtabs-23.3.0.aar-23.3.0.0


ここをダブルクリックしてインストールしてください。

インストール エラー: XA5209 解凍に失敗しました。'https://dl-ssl.google.com/android/repository/android_m2repository_r29.zip:m2repository/com/android/support/customtabs/23.3.0/customtabs-23.3.0.aar' をダウンロードして 'C:\Users\sugita-toshinori\AppData\Local\Xamarin\Xamarin.Android.Support.CustomTabs\23.3.0.0\embedded' ディレクトリに抽出してください
XA5209 理由: パス 'C:\Users\sugita-toshinori\AppData\Local\Xamarin\Xamarin.Android.Support.CustomTabs\23.3.0.0\embedded\aapt\' の一部が見つかりませんでした。
XA5207 SDK インストーラーで利用可能なパッケージ: 'Xamarin.Android.Support.CustomTabs' をインストールしてください。Java ライブラリ ファイル 'C:\Users\sugita-toshinori\AppData\Local\Android\android-sdk\extras\android\classes.jar' は存在しません。	0	
```

表示どおりにダブルクリックしてもインストールはしてくれず、nugetから該当ライブラリ（`Xamarin.Android.Support.CustomTabs`）を追加するとエラーは解消しました。
Nodenv環境のインストール可能バージョンを更新する

## はじめに

Nodenvのインストールや簡単な使い方については、[以前の投稿][1]をご参照ください。

久しぶりにプライベートでフロント周りのコードを触る用事があり、一年ほど前にMacにインストールしてあったNodenvで環境を作ろうとしたところインストール可能バージョンが「8.5」まででした。仕事ではプロジェクト開始時にNodenvも新調するので今まで知りませんでしたが、インストール可能バージョンのリストを更新するにはプラグインの追加が必要で、後々忘れそうなのでメモしておきます。

[1]:https://qiita.com/YuukiMiyoshi/items/080b6cde332d8d4e06f3 "Nodenv環境を用意する"

## 方法

[前出の記事][1]と同じ感覚で更新用プラグインをインストールします。
（nodenvのインストール先は[~/.nodenv]を想定しています）
詳細は[プラグインのサイト][2]をご参照ください。
（上記サイトではgithubへの接続がhttps://となっていますが、本記事では「はじめに」で紹介した前記事に合わせてgit://にしています）

[2]:https://github.com/nodenv/node-build-update-defs "node-build-update-defs"

次のコマンドでNodenvへプラグインをインストールします。

```{sh}
git clone git://github.com/nodenv/node-build-update-defs.git ~/.nodenv/plugins/node-build-update-defs
```

次のコマンドでインストール可能バージョンのリストを更新します

```{sh}
nodenv update-version-defs
```

## 確認

次のコマンドで、インストール可能バージョンを確認します

```{sh}
nodenv install --list
(省略)
  9.8.0
  9.9.0
  9.10.0
  9.10.1
  9.11.0
  9.11.1
(省略)
```

無事に更新されました！
800日間、毎日コードを書き続けた

一区切りつけたかったのでまとめておくことにした。
誰かの参考になれば幸いである。

表題の通り 800日間毎日コードを書き、コミットし続けた。
正確には805日、計算してみると2年2ヶ月15日らしい。
とはいえ、仕事としてコードを書いた日は含めていない。
あくまでプライベートの時間を使って趣味として書いた日数である。

# 始めたきっかけ

始めたのは2016年1月1日。
当時、今後もソフトウェアエンジニアとして生きていくためには、業務時間だけでなくもっとコードを読み書きし、インプットとアウトプットを増やしていく必要があると思っていた。
ふと、John Resig さんの Write Code Every Day の活動が話題になっていたことを思い出し、自分も GitHub 上で始めてみることにした。

リポジトリは下記にある。
https://github.com/emsk

# ルール

毎日コードを書いていくにあたり、ルールは特に決めなかった。
タイポの修正でも依存ライブラリのアップデートでも構わない。
とにかくコードと向き合い、コードが生活の中に当たり前にある状況を作りたかった。
私は優れたハッカーではないので、敷居をできるだけ低くし、まずは継続していくことが大事だったのだ。

# コードを書く毎日

最初の頃は、コードを書く行為が意識的で義務的だった。
生活の中で大きなタスクが発生すると、開発マシンである MacBook Pro を開くことすら忘れそうになるし、気分がどうしても乗らない日もあった。

しかしそれでも続けていると、段々とコードを書くことが習慣になっていった。
1日で書ける範囲のコード量となるようにあらかじめ問題を分割しておくことで、すぐに取り掛かれるようになった。
内容はともかく、何かしらのアウトプットを出すことは自然にできるようになった。
以前よりもコードを身近に感じられるようになったし、取り組んでいることを忘れてしまうことが無くなり、よりよい解決方法を考えられるようになった。

毎日コードを書いていると、コードのことをいつも意識するようになってくる。
コードを書いていないときにも、頭の片隅で新しいツールのアイディアを考えたり、今抱えている課題にどのように対応するかを考えたりしていた。
GitHub にあるコードを読んでいると、「このライブラリはあのツールに活用できそうだ」「これはバグのようだから Pull Request を送っておこう」など、日々たくさんの考えることがあり、学びがあった。

ただ、本当に自然に、生活の中にコードが溶け込むようになるまでには数ヶ月はかかったような気がする。
それから長い間、量をこなすことで成長を感じることができる期間が続いた。

しかしそのような時期を過ぎると、いつしか量だけではカバーできない世界があると感じるようになった。
毎日のアウトプットを重視し、作りやすそうな小さいツールを構想しがちになっていた。
難易度の高い問題を発見することから逃げているような感覚になり、アートのように自由に発想することができなくなっていた。
うまいやり方を考えなければ成長が止まってしまう、という危機感は強くなっていった。

良いアイディアを発想することができなくなると、依存ライブラリやフレームワークのアップデートのみに留まることが多くなった。
CHANGELOG を読むこともそれなりに時間がかかることだったし、変更を適用しても問題無いか判断することが難しいときも多々あったので自分にとっては決して楽な作業ではなかったが、外から見たときの成果としてはつまらないものになってしまった。

# コードを書く毎日の終わり

2018年3月16日、体調を崩してしまい、ついにコミットすることができなかった。
しかしこれもまた、今までの活動を振り返る良い機会だと思い、一旦休憩することにした。

# 思い出

続けているといろいろあった。
行きつけのバーで好きなウイスキーを飲みながらコードを書いたり、旅行先のホテルで書いたりもした。
標高 1,700m の山に登り、山頂で iPhone からコミットをしたこともあった。
最近では、島根の RubyWorld Conference や 福岡 Ruby 会議に参加しつつ、その会場でもコードを書いていた。

自作ツールの新しいバージョンをリリースできた日は気分が良かったし、誰かにポジティブな影響を与えられるかもしれない可能性にわくわくした。

節目の日には記念として[スクリーンショット](https://github.com/emsk/write-code-every-day)を撮って、缶ビールでささやかな自分へのお祝いをした。

残業続きで心が疲弊していたときには、帰宅後のプログラミングが救いになっていた。
疲れ切って夜遅く帰っても、寝る前にコードを書いている時間は楽しかった。
コードを書くことで、まだ見ぬ未来は自分の手できっと明るくできると信じることができた。
仕事では世のため人のためにコードを書くことが多いが、家では思う存分自分のためのソフトウェアを作ることができる。
そこには、仕事とは違う喜びがあった。

# 成果物

いくつかの愛すべきツールを作ることができた。
決して万人受けするようなものではないかもしれないが、確実に自分自身の問題を解決するものだった。
少しでも気になった方は GitHub の方にスターをいただけると励みになる。

# まとめ

毎日コードを書くことは、平凡だった私のソフトウェアエンジニアとしての人生に必要な経験だった。
続けることができた要因として、周りの方々が健康で何事もなく過ごしてくれていたことがとても大きいように思う。
本当に感謝している。

三十路になり、避けることのできない人生のイベントが増えてくる。
それでもソフトウェアエンジニアとして生きていくためには、インプットとアウトプットの質をもっと上げていく必要があるだろう。
今後もこれまで通りコードを書くことを楽しみながら、しかし毎日ということにはあまりこだわらず、効率良く質を上げていけるようにしていきたい。
プログラミングの勉強に役立ったサイト

# Aidemy
https://aidemy.net/
Pythonや機械学習について学べます。

# Railsチュートリアル
https://railstutorial.jp/
定番のRailsチュートリアルです。

# Rails中級チュートリアル
https://techracho.bpsinc.jp/hachi8833/2018_02_05/51343
Railsチュートリアルの中級版です。

# Reactチュートリアル

Reactチュートリアルです。
https://mae.chab.in/archives/2943

# Git入門
https://backlog.com/ja/git-tutorial/
Gitの入門に最適です。

# Linux入門
Linuxの基礎はだいたい学べます。
https://eng-entrance.com/category/linux

# Rspec
Rspecがとてもわかりやすいです。
https://qiita.com/jnchito/items/42193d066bd61c740612
BitriseのAuto Provisioningハマったメモ


## What is this
　この前Bitriseを個人アプリに組み込もうとしたらいろいろハマったので、そのことについてまとめ

## 環境
- Xcode 9.2
- iOS Auto Provision 1.0.1

## Bitrise Auto Provisionでハマった

　巷で話題のBitrise.会社のプロジェクトで導入済みなので、自分の個人プロジェクトでも試そうとしました。
　最近**Auto Provision**というWorkがメジャーバージョン1が出たらしく、Provisioning ファイルの設定を自動化してくれる、ということで、それならやるしかない、とやってみたのですが、結構ハマってしまいました。。。
今使用しているWorkFlowは次のようになります

![Kobito.zzFSjJ.png](https://qiita-image-store.s3.amazonaws.com/0/135757/f9ba7bcd-33a6-dc98-8921-ad6c7019f912.png "Kobito.zzFSjJ.png")

![Kobito.IRGmh9.png](https://qiita-image-store.s3.amazonaws.com/0/135757/01dbcb00-3045-7fe5-1036-2cb09bfc41a4.png "Kobito.IRGmh9.png")


ここの**iOS Auto Provision**で結構ハマりました。。。

### 1. [Bundle Name]のプロファイルが見つかりません。

Error message

```
 Code Signing Error: No profiles for '[Bundle Name]' were found:  Xcode couldn't find any iOS App Development provisioning profiles matching '[Bundle Name]'. Automatic signing is disabled and unable to generate a profile. To enable automatic signing, pass -allowProvisioningUpdates to xcodebuild. Code Signing Error: Code signing is required for product type 'Application' in SDK 'iOS 11.2' 
```
 
 
projectのディレクトリで次のコマンドを打ってください

```
 $ xcodebuild -workspace [プロジェクトファイル] -scheme [ビルドしたいスキーム名]
```

これで、該当のスキームしたビルドファイルが出来上がります。
確認には、使用しているプロジェクトファイル右クリックで「このファイルの内容を表示」でxcshareddata,xcuserdataというフォルダができてるはずです。
普通はそのスキームでビルドすると出来るはずなんですが、Cocoapodを使ってると、うまく生成されないみたいなのをどこかで読みました。

### 2. 該当のスキームが見つかりません
Error message

```
Error:
project (chineseApp.xcworkspace) does not contain scheme: chineseApp
Stacktrace (for debugging):
/private/var/folders/90/5stft2v13fb_m_gv3c8x9nwc0000gn/T/bitrise364870581/step_src/lib/autoprovision/project_helper.rb:238:in `read_scheme_and_container_project'
```

こちらのコマンドで表示に従っていくと、Provisioiningファイルと.p12ファイルが生成されます。

```
$ bash -l -c "$(curl -sfL https://raw.githubusercontent.com/bitrise-tools/codesigndoc/master/_scripts/install_wrap-xcode.sh)"
```

次に、BitriseのWorkFlow->~~Code Signingタブで生成したProvisioningファイル、~~p.12ファイル　を追加しましょう
（2018.7追記： @mono0926から指摘いただき、Provisioningファイルは必要ないとのことです！もしかしたら、これでハマってたかも・・・ ）

![Kobito.3W2ALg.png](https://qiita-image-store.s3.amazonaws.com/0/135757/6807d23b-1401-15f7-bda7-282791493e83.png "Kobito.3W2ALg.png")


![Kobito.aIqYci.png](https://qiita-image-store.s3.amazonaws.com/0/135757/638ec51d-30ad-af24-3b3d-d8e58af7a09b.png "Kobito.aIqYci.png")


これでBitriseのビルドが成功するはずです。

## まとめ
　Auto Provisioningを歌ってますが、まだまだ自動化ではない部分もあるので、そこらへんは今後の改善に期待しましょう。
 ただ、今回ハマったときに、チャットで何回かCSに聞いたのですが、ちゃんと返答してくれ、原因とかも解説してくれるので、かなり手厚い感じでした。ここらへんは、吸収していくべき点です。

## 参考ページ
- [iOS Code Signing](https://devcenter.bitrise.io/ios/code-signing/#collect-the-required-files-with-codesigndoc)
- [Auto signing 導入](https://blog.bitrise.io/ios-auto-provision-step)
FirestoreのSubCollectionに対してQueryが使えない問題にどう立ち向かうか

Firestore、便利ですよねぇ。
ただ、2018/03執筆時点ではまだβなので荒削りだったり要件満たしにくい部分でつらいなぁっていう部分はいくつかあります。

その1つが表題の件の「SubCollectionにQueryが使えない」問題。
どういうことかというと、例えば「CDごとに曲名とその曲番号(連番)を保持する」構造を例に考えてみます。

```
- albums [collection]
    - title
    - musics [collection]
        - title
        - songNumber
```

Firestoreでどう表現するかというと、disksっていうCollectionを作って、その中にSubCollectionとしてmusicsを持つ形が一番シンプルに見えます。

![20180309180400.png](https://qiita-image-store.s3.amazonaws.com/0/20074/b4d344be-f4ee-e416-d6ba-7e391f6f39c5.png)

こんなイメージ。ただ、この構造の場合は表題の制限があり、musics内のデータを直に参照したいケース、
具体的には「ユーザ属性は曲のタイトルを持っているが、その曲がどのアルバムに属しているか分からない(紐付けることができない)」時に、sounds内のデータを特定することができません。
この件について[StackOverFlow](https://stackoverflow.com/questions/46573014/firestore-query-subcollections)でGoogleエンジニアが「Collection group queryという機能で提供する予定だが、提供はすぐではない」という回答をしています。

ObjectやArrayとして下位データを持つ方法もなくはないですが、そもそものSubCollectionのメリットを活かせないのではここでは考慮から外しつつ、
Collectionであることメリットを活かし現時点で解決できるパターンをいくつか見ていきます。

## 親CollectionにSubCollectionのキー一覧を持つ方法


親のCollection側に、soundsのキー一覧を持つのが一案としてあります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/20074/b10f0ce4-720d-5f6d-4087-469522b55fb2.png)

```
soundKeys: [
    "1. 主よ,人の望みの喜びよ(In 4 Mix)"
    "2. 眠れる森~Sleeping Forest",
    "3. Mouring The Passing Time"
]
```

キー一覧を持つ際、上記のようにFirestore内のデータとして配列で持ちたくなります。
が、Queryでwhere in句のように配列を対象に検索することができないので、以下のようなObject形式で持つ必要があります。

```
soundKeys: {
    "1. 主よ,人の望みの喜びよ(In 4 Mix)": true,
    "2. 眠れる森~Sleeping Forest": true,
    "3. Mouring The Passing Time": true
}
```

sound側のkeyを持っている状態からこのalbums -> soundsのdocを取得する場合には

```
const userPlayingTitle = '2. 眠れる森~Sleeping Forest'
const querySnapshot = await db.collection('albums')
    .where(`albums.${userPlayingTitle}`, '==', true).get()
...
```
というような形でquerySnapshotを持ってくることができるようになりました。
Zabbix4.0 アルファ版をインストール

##■はじめに
Zabbixの4.0の安定板がもう少しでリリースされそうです。
けど、リリースが待てないのでアルファ版をインストールしてみます。

【参考】
https://www.zabbix.com/jp/download?zabbix=4.0&os_distribution=centos&os_version=7&db=MySQL

##■環境
・CentOS7.4
　→SELinuxとFirewalldは無効
・Zabbix 4.0.0alpha5.

##■インストール
###・mariaDBのインストール
>~~~
># yum install mariadb-server
>~~~

###・Zabbixのインストール
>~~~
># rpm -i http://repo.zabbix.com/zabbix/3.5/rhel/7/x86_64/zabbix-release-3.5-1.el7.noarch.rpm
># yum install zabbix-server-mysql zabbix-web-mysql zabbix-agent
>~~~

###・DB作成
>~~~
># systemctl start mariadb
># mysql -u root -p
>mysql> create database zabbix character set utf8 collate utf8_bin;
>mysql> grant all privileges on zabbix.* to zabbix@localhost identified by 'password';
>mysql> quit;
># zcat /usr/share/doc/zabbix-server-mysql*/create.sql.gz | mysql -uzabbix -p zabbix
>~~~

###・パスワード設定
>~~~
># vi /etc/zabbix/zabbix_server.conf 
>DBPassword=password
>~~~

###・TimeZone設定
>~~~
># vi /etc/httpd/conf.d/zabbix.conf 
>date.timezone "Asia/Tokyo"
>~~~

###・自動起動
>~~~
># systemctl restart zabbix-server zabbix-agent httpd mariadb
># systemctl enable zabbix-server zabbix-agent httpd mariadb
>~~~

###・ブラウザからインストレーション
>　http://＜サーバーIP＞/zabbix

新機能の確認してみるか・・・
以上です。
Vue <-> Native @click <->onclick

### compare
```html
<script src="https://unpkg.com/vue"></script>
<button onclick="a()">native a</button>
<button @click="a" id="aaa">vue a</button>
```
```js
let a=function a(ev){
 console.log(ev,this)
}
new Vue({
 el:'#aaa'
 ,methods:{
  a:a
 }
})
```
Vue.Draggableを使ってサクッとTrelloっぽいものを作る

初Qiita投稿です！
お勉強で触ったVue.Draggableがとってもお手軽便利だったので紹介します！

## Vue.Draggableとは

Vue.Draggableはドラッグ&ドロップでリストを並び替えすることをお手軽に実装できるライブラリです！  
Sortable.jsをVueコンポーネントで扱えるようにしたライブラリのようです。

https://github.com/SortableJS/Vue.Draggable

これを使うことでサクッと並び替えのできるリストが実装できます！

## 導入

まずはVueプロジェクトを作ります。  
[vue-cli](https://github.com/vuejs/vue-cli)を使ってサクッと作ります。  
プロジェクトの名前は任意で問題ありません。(今回はvuedraggable-sandboxとします）

```sh
$ vue create vuedraggable-sandbox
```

プロジェクトができたらVue.Draggableを導入します。  
(今回はyarnを使用します)

```sh
$ yarn add vuedraggable
```

とりあえずサクッと試したいので`src/App.vue`にVue.Draggableをimportしてリストを作ってしまいます。  
使用しないのでHelloworld系のものは消してます。

```vue:src/App.vue
<template>
  <div id="app">
    <draggable element="ul">
      <li v-for="task in tasks">{{ task }}</li>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  name: 'app',
  components: {
    draggable,
  },
  data() {
    return {
      tasks: [
        'task1',
        'task2',
        'task3',
        'task4',
      ]
    }
  }
}
</script>
```

importしたvuedraggableはcomponentsに配置します。  
また、リストのデータとしてdataにtasksという配列を設定しておきます。  

templateの部分で記載している

```html
<draggable element="ul">
  <li v-for="task in tasks">{{ task }}</li>
</draggable>
```

の部分がVue.Draggableを使用している箇所です。  
draggableタグで指定しているelementはdraggableの部分をなんのタグにするかを指定しています.(デフォルトはdiv)  
draggableで囲って並び替えのしたい要素をv-forで出力するだけで並び替えの仕組みは実装されます。

![sortable1.gif](https://qiita-image-store.s3.amazonaws.com/0/134832/58251a91-45c4-7ef2-a38c-eaf2f940cdfa.gif)


わかりやすくするために少しCSSを調整しています。  
たったこれだけでドラッグ&ドロップで並び替えできるリストが作れます。


## Trelloに近づける

これだけだとまだTrelloっぽさからは少し遠いですね。  
なので列を増やして、縦の移動だけではなく横の移動もできるようにします。

列を表現するためにtasksを二次元配列にします。

```js
data() {
  return {
    tasks: [
      ['task1-1', 'task1-2', 'task1-3', 'task1-4'],
      ['task2-1', 'task2-2', 'task2-3', 'task2-4'],
      ['task3-1', 'task3-2', 'task3-3', 'task3-4']
    ]
  }
}
```

またdraggableの部分を以下のように修正します。

```html
<draggable :options="{ group: 'tasks' }" element="ul" v-for="list in tasks">
    <li v-for="item in list">{{ item }}</li>
 </draggable>
```

optionsでgroupにtasksを設定することで、tasksの中にある配列間での要素移動ができるようになります。  
またdraggableのところでtasksをv-forで回すようにします。  

これだけで列間での移動もできるようになります。

![sortable2.gif](https://qiita-image-store.s3.amazonaws.com/0/134832/75c52c25-dbc1-9301-802c-6235a952a599.gif)

実際にTrelloっぽいものを作るとなるとAPI連携があったり、タスクの追加ができたりという機能も必要ですが並び替えについてはたったこれだけでできるようになってしまいます！  
世の中末恐ろしいです…

今回のブログを書くのに使用したサンプルは以下になります！


https://github.com/kimuray/trellopoi-sandbox

## さいごに
初Qiita投稿…(はてなで書いたやつの転用ですが…)
これを機にきちんとアウトプットしていくようにしていきたい所存
Mac版Visual Studio CodeでGitを使えるようにセットアップ

# はじめに

今回はMac版Visual Studio CodeでGitを使えるようにセットアップしてみます。
Visual Studio Codeのインストールから、Gitの基本的な動作確認まで行います。

この記事では、Gitの細かな動作やGit関連のエクステンションに関しては言及しません。
また、Gitの基本的な概念については他の資料を参考にしてください。
なお、筆者はMacを使い始めて日が浅いためMacのお作法的に変なことをしている可能性がありますので、そのときはご指摘をお願いします。

# 動作環境

- macOS: High Sierra 10.13.4
- Visual Studio Code: 1.22.1
- Git: 2.16.3

# 作業手順

## Visual Studio Codeのインストール

Visual Studio CodeのWebページからアプリケーションをダウンロードします。
ダウンロードしたzipファイルを解凍したら、Finderを開き、アプリケーション フォルダーにVisual Studio Code.Appをコピーします。

## Gitのインストール

GitのWebページからdmgファイルをダウンロードし、実行します。 (Source Forgeに移動します)
dmgファイルを実行し、インストーラでインストールします。
※「開発元が未確認のため開けません。」というメッセージが出る場合、Controlキーを押しながらdmgファイルをクリックすることで実行することが可能になります。

## ターミナルでGitの動作確認

ターミナルでgit versionと入力し、インストールしたGitのバージョンが表示されればGitのインストールが完了したことになります。

```
$ git version
git version 2.16.3
```

## ユーザー名とメールアドレスの設定

Gitを使うときに、はじめにユーザー名とメールアドレスを設定する必要があります。
ターミナルより、下記のコマンドを実施することで設定できます。
※<ユーザー名>と<メールアドレス>は任意のものに置き換えてください。

```
$ git config --global user.name "<ユーザー名>"
$ git config --global user.email <メールアドレス>
```

## Visual Studio CodeでのGitの動作確認

Visual Studio Codeを起動します。
iCloudドライブにtestというフォルダーを作ります。
「first message.」と内容を記載したtest.txtというファイルを作ります。

<img width="1136" alt="スクリーンショット 2018-04-08 12.50.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/151726/80ec5522-3d8f-1f5a-7dd1-8d4d8b84506b.png">

次に、Gitボタンを押して、testフォルダーをリポジトリとして初期化します。

<img width="1136" alt="スクリーンショット 2018-04-08 12.50.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/151726/53432ae3-64c1-d136-dd72-823fbf62861a.png">

リポジトリの初期化が終わると、testフォルダー内でGitの操作ができるようになります。
次に、test.txtファイルの変更をステージングに移行するために、test.txtをクリックし+を選択します。

<img width="1136" alt="スクリーンショット 2018-04-08 12.50.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/151726/9663389e-3596-e81c-9e3b-f38549a97647.png">

test.txtがステージングに移行しました。
ここから、コミットするためには✔︎ボタンをクリックします。

<img width="1136" alt="スクリーンショット 2018-04-08 12.51.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/151726/264c5874-df90-9adb-9af5-80f73d09a8e8.png">

ここでは、コミットメッセージに「inital commit」と記載します。
Enterを押すと、コミットされます。

<img width="1136" alt="スクリーンショット 2018-04-08 12.52.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/151726/644ea2d1-5ee5-fe5c-9d77-a862494af028.png">

ターミナルで下記のコマンドを実行し、コミットメッセージが表示されれば、コミットが記録されたことを確認できます。

```
$ git log | grep initial
    initial commit
```

# まとめ

macOSにVisual Studio CodeとGitをインストールし、リポジトリの初期化とコミットまでできることを確認しました。
git logもGUIでいい感じに確認したいところですがイマイチやりかたがわからず。
もし知っている方がいましたら教えてください。

# 参考情報

- Visual Studio Code
    - https://code.visualstudio.com/
- Using Version Control in VS Code
    - https://code.visualstudio.com/docs/editor/versioncontrol
- git
    - https://git-scm.com/
- macOS Sierra: 開発元が未確認のアプリケーションを開く
    - https://support.apple.com/kb/PH25088?locale=ja_JP
- 使い始める - 最初のGitの構成
    - https://git-scm.com/book/ja/v1/使い始める-最初のGitの構成
OrangeECについて

お世話になります、
現在、ECサイトのプロジェクトでOrangeECというショップモール型のECツールを使用して
あるショップモールを構築するプロジェクトを担当しているのですが、
OrangeECをレンタルサーバに構築した経験したあるエンジニアの方がいれば、是非ともアドバイスをいただきたいのです。

現状、どうやって契約したレンタルサーバにセットアップをすればよいかイメージがつかない状況ですのでアドバイスをいただければ大変助かります
（ECClubeの場合はファイルをサーバにアップして、WEBブラウザ経由で設定をすればインストールができるのは理解できているのですが、OrangeECも同様なことができるのでしょうか）
iOSアプリを改修する時に、見積もりを盛った方がいいプロジェクト チェックシート

ここ最近のiOS開発で機能改修時に、クソコード、構成の問題で、見積もりを盛らなきゃと思った方が多々ありました。
今後の他案件の見積もりで参考できるようにメモっていきます。


**基本的に筆者の好みでまとめているだけなので、どなたにも当てはまるものではないです。**

改修案件を受けた時に該当する実装が存在したら、工数見積もりの掛数あげちゃいましょう！


# iOSならでは

## UI

* NavigationBar、TabBarが意味もなくオリジナルで作成されている
* 拡大モードで動作している
* autolayoutが使われていない
* 必要以上にStoryBoardを分割している(全体の見通しをしにくく、調査工数が上がるため)
* 普通のネイティブアプリなのに、stroyboardを使っていない(不必要にコードのみでUIが作られていると、改修時の調査に5倍以上時間がかかるので、見積もりを跳ね上げる必要が出てしまいます。)


## Model

* DateFormatterの初期化が適切に行われていない
* FMDBとか使ってる
* DB,APIの処理がViewControllerの中にある


## Swiftならでは

* Swiftのバージョンが古い
* getHogeの様なメソッドがある

## Objective-Cならでは

* nilチェックがいらないところでチェックしている
* getHogeの様なメソッドがある

# どの案件にも適用できそうなところ

## コード管理

* コード管理ツールが使われていない
* IDEのwarningだらけ
* コード規約がなく、プログラムのフォーマットがバラバラ
* 動作しないUTが存在する
* UTと言いつつ、ほとんどテストパターンを網羅していないテストが多い(信頼できないので、ない方がいい)
* MVVMを導入したつもりのプロジェクト(結構な確率でMVVMではない何かになっているので、ただぐちゃぐちゃで読みにくい)
* プロジェクトのフォルダ構成に統一性がない
* 長くメンテナンスされていない（1年半以上目安。SDKの一部機能が非推奨になっていたり、最新OSverでは正常に動作しなくなっていたりと、工数upの元になりやすい）

## プログラム

* 使われていないクラスや、プロパティが多数ある
* 必要以上にBaseControllerなど各所に継承が使われている
* Controller周りのプログラムが600行超えているものが多数ある
* 適切なライブラリがあるのに、車輪の再発明をしてる
* メンテされていないライブラリを使っている
Gitについて調べた

ひょんなことから<b>Git</b>について学習しなくてはいけなくなったので、備忘録代わりに投稿
全くの無知の状態から調べました。

##そもそもGitって何

ソースコードの変更履歴を記録・追跡するための世代(バージョン)管理システムである。
正確には<b>分散バージョン管理システム</b>らしい。
googleドライブやDropBoxなどのファイル共有システムをよりエンジニアに向けて開発したものってイメージ

調べる「Git」と「GitHub」とといった二つの情報がでてくる。。
はて、これは違うものなのか？
「Git」の説明！って書いてあるサイトで情報収集してると
よく見たらこれ「GitHub」の話だわ、、、ってのがかなりあった。
まずはこの違いからつぶさないといけない。。

##GitHubと一緒なのか
~~結論から言うと<b>インターネット(web)上にあるGitがGitHub</b>(間違ってたらスンマセン)~~
~~ほぼ一緒~~

"Git"の種類の1つにGitHubがある。
ほかにもBitBucket,GitLabなどがあるそうです。
これらはすべて"Git"といったバージョン管理システムの仲間
1番有名なのがGitHub
(同じ”Git”を用いているので基本的には同じコマンドで実行することができる！)

バージョン管理とは
参考URL:http://tracpath.com/bootcamp/learning_rivision_control_system.html

GitHubのマスコットはかわいらしい

##インストールしてみた
環境：linux
OS  :centos7

とりあえずyumで行けるらしいので実行

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[root@localhost ~]# yum install -y git
依存性の解決をしています
--> トランザクションの確認を実行しています。
---> パッケージ git.x86_64 0:1.8.3.1-12.el7_4 を インストール
完了しました!
[root@localhost ~]#
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

取れた

バージョンを確認

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[root@localhost ~]# git --version
git version 1.8.3.1
[root@localhost ~]#
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
OK
インストールは完了

##リポジトリについて
世代管理をするためにはリポジトリについても学ぶ必要がある。
ファイルやディレクトリの状態を記録する場所がリポジトリ
更新・保存の状態は変更履歴としてリポジトリに保管されていく
つまりリポジトリを見れば変更履歴がわかるってこと。

##pull・push・commitとは
実際にGitにファイルをアップしたり、ダウンロードしたりするのはどうするのか。
基本コマンドを以下に記載

　-pull
　　プル-ファイル引っ張る(ダウンロード)
　-push
　　プッシュ-ファイルを押し出す(アップロード)
　-commit
　　コミット-結果にコミットする(更新)

##つまりGitって何
一人でやっているか実感がないが<b>複数人で同一ファイルを確認/編集</b>する現場やプロジェクトでは、とても刺さるのではないだろうかと純粋な感想を一言

実際にデグレやファイルサーバにあるファイルいじっちゃってどこ変えたかもよくわからない！なんて話よく聞くし
そういった人為的ミスを減らせるしってことかな。
使い方はおいおい
せっかくだからAnsibleでgitの設定とかさせたい。

次回はJenkinsについてまとめるよ
30日でできる！OS自作入門（記事一覧）[Ubuntu16.04/NASM]




# 30日でできる！OS自作入門
"30日でできる！OS自作入門"の内容をUbuntu(Linux)で実行するには本の内容だけでは厳しいので調べた結果をメモ。（リンクと動作確認済みコード・コメント）

![image.png](https://qiita-image-store.s3.amazonaws.com/0/195174/f19d798d-a943-c5a2-17a3-da10e56aee6c.png)

このテキストを読む上でUbuntuとnasmを使う方の参考になればと思っております。
（テキストが無いと厳しいです）
Ubuntu 16.04 LTS


# 記事一覧
- <a href="https://qiita.com/pollenjp/items/a13cd764cc739a0ca9df">30日でできる！OS自作入門（１日目）[Ubuntu16.04/NASM]</a>
- <a href="https://qiita.com/pollenjp/items/d15fce401bccd37e8059">30日でできる！OS自作入門（２日目）[Ubuntu16.04/NASM]</a>
- <a href="https://qiita.com/pollenjp/items/8fcb9573cdf2dc6e2668">30日でできる！OS自作入門（３日目）[Ubuntu16.04/NASM]</a>
- ~~「gdbデバッグ体験記」は作成中~~
- <a href="https://qiita.com/pollenjp/items/0847a633df112dbfa4ff">30日でできる！OS自作入門（４日目）[Ubuntu16.04/NASM]</a>
- <a href="https://qiita.com/pollenjp/items/d0f4e09a7fd50dfd58f5">30日でできる！OS自作入門（５日目）[Ubuntu16.04/NASM]</a>
- 6日目は特に詰まるところは感じられなかったので<a href="https://github.com/pollenjp/myHariboteOS/tree/087ba7b18b32fa3e8f8e6c285b393574839961cd/day06">コードへのリンク</a>だけ載せておきます.


（追記：2018/05/29)
ソースコードは以下のGitHubにあげています。
https://github.com/pollenjp/myHariboteOS
Docker + Django でプロジェクトつくる（随時更新）

# 以下のサイトを参考にした
[はじめての Django アプリ作成、その 1](https://docs.djangoproject.com/ja/2.0/intro/tutorial01/)
素直にこれを見ると良いと思います

[Start Django project with Docker](http://mmorejon.github.io/en/blog/start-django-project-with-docker/)
docker-composeでdjango使うコマンドが結構載ってる

[Django Girls Tutorial ]
(https://djangogirlsjapan.gitbooks.io/workshop_tutorialjp/content/django_start_project/)
参考になるチュートリアル。しかしバージョンが低い。ちょっとお気楽な感じで読めます

[Quickstart: Compose and Django](https://docs.docker.com/compose/django/#create-a-django-project)
Django環境をComposeで作るときに役立った


[modelsをつくるときにon_delete関連で怒られたら](
https://torina.top/detail/297/)
Django 2.0かそれより下で異なる模様


# 新しいプロジェクトを作成
[今回作ったリポジトリ](https://github.com/keix1/Docker-Django)


## DBのマイグレーション
```docker-compose run web ./manage.py makemigrations```
```docker-compose run web ./manage.py migrate```

## コンテナに入る
```docker exec -it コンテナ名 bash```

## ユーザ作成
```docker-compose run web python manage.py createsuperuser```

## 実行
```docker-compose up```

## アクセス
http://localhost:8000
http://localhost:8000/admin

## コマンドの実行
```docker-compose run --rm サービス名 コマンド```
例：```docker-compose run --rm web rails routes```

## アプリケーションの追加
```docker-compose run web python manage.py startapp app```

- settingsのあるメインっぽいディレクトリのurls.pyのurlpatternsにpathを追加
- settings.py上のINSTALLED_APPSに追加したアプリケーションの名前を追加
Raspberry Pi 3 + Unicorn HAT HDで霊夢を表示

# はじめに
筆者の環境ではユーザー名はpi、すべての作業はホームディレクトリ(/home/pi/)で実行しています
# Unicorn HAT HDの取り付け
初歩的な事柄ゆえか、言及している記事があまり見つからなかったので、あえて書きますが
![IMG00043_512.jpg](https://qiita-image-store.s3.amazonaws.com/0/64298/fda998da-9d72-d58b-04ea-493bdd485563.jpeg)
HATとGPIOピンはここまできっちり差し込みましょう
# ライブラリのインストール
公式Githubリポジトリ（ https://github.com/pimoroni/unicorn-hat-hd ）より、
用意されたインストールスクリプトを実行します
```
$ curl https://get.pimoroni.com/unicornhathd | bash
```
手動インストールしたい場合は、公式GithubリポジトリのREADMEを参照してください
# サンプルコードをコピー
https://github.com/pimoroni/unicorn-hat-hd/blob/master/examples/show-png.py より
サンプルコードは、ホームディレクトリ以下`Pimoroni/unicornhathd/examples/`にあります

```
$ cp Pimoroni/unicornhathd/examples/show-png.py show-png.py
```

`show-png.py`を適当な場所にコピーします
# lofi.pngを作成
表示したい16x16のpng画像を探し出しましょう

>えるるのだいあり
>http://erl.hatenablog.jp/entry/20090712/1247392387

今回はこちらの方のドット絵を利用させていただきます

## 画像のurlを指定してダウンロード
任意のPATH、任意のファイル名で保存したい場合は、「-O」オプションを用いる
> wget -O 出力先PATH http://ファイルのURL

```
$ wget -O lofi.png https://cdn-ak.f.st-hatena.com/images/fotolife/E/Erl/20090712/20090712185229.png
```

# 実行
```
$ python show-png.py
```
# 結果
![51d119c43c8e52c7_.jpg](https://qiita-image-store.s3.amazonaws.com/0/64298/9535dfb5-4e10-ddc3-baa4-70c837d30cee.jpeg)
Safari Extensions Gallery の投稿に挫折


- Safariの自動入力できっちり自動入力されないことがあるので、サブミットした情報をLocalStrageに保存して次回から自動入力する **超簡単** なSafari Extensions を作成しました。
- で、どうせなので Safari Extensions Gallery に登録しようとおもって挫折した顛末です。

# 1回目 ： Meta 情報がNG

> Extensions listed in the gallery are required to have an English description.

- 説明に日本語も入れといたら英語だけじゃないとだめとのことでした。
- 説明だけ直すのはだめで投稿し直しました。

# 2回目 ： Bad Package

> During our review, we found that there are unsupported extended attributes set in your extension.
> Please strip the extended attributes (`xattr -c path/to/extension.safariextension`) and rebuild your Safari Extension package using the latest version of Safari.

- 余計な情報がパッケージにはいってるとのこと。なにもしてないし、知らんがな...
- 言われた通りにxattrコマンドで属性を除去して投稿し直しました。

# 3回目 ： Bad Package

> During our review of your extension we found that we need usage instructions and demo login credentials.

- デモログインとか「は？！」って感じです。TV番組のプレゼントサイトとかでなんども同じフォーム入力しなくていいだけだっつーの！💢


---

- ...と、いうことでもう投げ出しちゃいました。別に広告費が入るわけでもないですしw

- [GitHubにあげてありますw](https://github.com/qoAopx/easyform)
Goの開発環境構築

## 環境
Mac High Serrie 10.13.3
fish


###手順１:Goのインストール
```$ brew install go```

Goのインストールパスのことを**GOROOT**という。
GOROOTは
```$ go env GOROOT```
で取得できる。

###手順2:$PATHを通す
コマンドを実行するときにフルパスを入れずに済むように$PATHを通す。
bash、zeshとかだと設定ファイル（zeshrcとか）に以下を追加すればいい。

```
export GOPATH=$HOME/dev（←ワークスペースにしたい場所）
export PATH=$PATH:$GOPATH/bin
```

fishを使っている場合は```~/.config/fish/config.fish```に以下を追加する。

```
set -x GOPATH $HOME/dev
set -x PATH $PATH $GOPATH/bin
```

ここまででgoの開発環境構築は完了。
ここから先はもっと便利にする観点。

### 手順3:goreをインストール
goreはGoの代表的なREPL。対話的にプログラムを実行し、評価を出力することができる。
```$ go get github.com/motemen/gore```
goreがインストールされているか確認するために実行してみる。

```
$gore autoimport
gore version 0.3.0  :help for help
gore> fmt.Println("Hello world")
Hello world
12
<nil>
gore>
```
goreを終了するためには``Ctrl + d ``

**他の便利なパッケージ**

- gocode (```github.com/nsf/gocode```)
- pp (```github.com/k0kubun/pp```)
- godoc (```golang.org/x/tools/cmd/godoc```)
React での Modal 実装方法

## 面倒な UI だが必ず出てくるモーダル。

-----

## モーダルにURLをもたせる、モーダル内でさらに遷移が発生する..etcとなると、さらに複雑な実装に。

-----

## React & Redux で真正面からモーダルを実装してみる。

-----

https://github.com/ANTON072/react-modal-sample/tree/master/modal

![modal1.png](https://qiita-image-store.s3.amazonaws.com/0/203550/0ab4e437-6097-5d35-2c29-a5b98e13a6e9.png)

-----

### 気に入らない箇所

- Homeで必要なモーダルなのに、内容はモーダルコンポーネント内に記述しないとならない。
- 「このモーダルはユニークURLを持ちたい」といった場合に、処理が複雑になってくる。汎用性に欠ける。
- そもそもモーダルの開閉にReduxステートは必要なのか。

-----

## React の Portals

-----

## Portals

https://reactjs.org/docs/portals.html

> Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

React の純粋な機能で、root の DOM 以外の箇所にコンポーネントを render できるよ。

-----

## こんなことができる

![A4 Copy.png](https://qiita-image-store.s3.amazonaws.com/0/203550/803a15ca-9939-b579-0383-07b37860fe5a.png)

-----

## まさにモーダルのための機能

-----

## Portals を使ってモーダルを実装してみる。

-----

https://github.com/ANTON072/react-modal-sample/tree/master/portals

![A4 Copy 2.png](https://qiita-image-store.s3.amazonaws.com/0/203550/f04a3a9e-90cd-b00f-92a6-352abc4fab06.png)

-----

## メリット

- モーダル内のコンテンツを、ベースのコンポーネントに内包することができる。Aboutページのモーダル内容はAboutコンポーネントに、など。
- コンテンツ内でルーティングもできるので、このコンポーネントにはURLを持たせたくない、持たせたくない、などのハンドリングが簡単。
- Reduxのステートを使わないで、コンポーネントのステートだけで実装可能

-----

## React はアップデートごとに便利な新機能が増えるので要注目。
RailsをGKEで動かす際に参考にしたアプリケーションのリンク集

- RailsをGKEで動かす際に参考にしたアプリケーションのリンク集です

## rails-docker
- GKE + mysql(CloudSQL) + puma + Sidekiq + Redis

[zaru/rails-docker](https://github.com/zaru/rails-docker)

[普通のRailsアプリをdockerで本番運用する知見](https://www.slideshare.net/zaruhiroyukisakuraba/railsdocker-78973487)

## rails-on-kubernetes
- minikube + postgresql + Sidekiq + Redis

[Rails on Kubernetes - Part 1](https://blog.cosmocloud.co/rails-on-kubernetes-part-1/?t=67gclrxsq03padkc)

[Rails on Kubernetes - Part 2](https://blog.cosmocloud.co/rails-on-kubernetes-part-2/?t=i21k1g3ydw83eoi9)

[Rails on Kubernetes - Part 3](https://blog.cosmocloud.co/rails-on-kubernetes-part-3/?t=fhfgxfvz3marolrp)

[tzumby/rails-on-kubernetes: Sample Rails application deployed with Kubernetes](https://github.com/tzumby/rails-on-kubernetes)

- posgresの設定ファイルは参考になる

[rails-on-kubernetes/postgres_deploy.yaml at master · tzumby/rails-on-kubernetes](https://github.com/tzumby/rails-on-kubernetes/blob/master/kube/deployments/postgres_deploy.yaml)

## rails-kube-demo
- GKE + mysql(CloudSQL) + nginx(+Phusion Passenger)

[GKEに Rails + nginx(+Phusion Passenger ) + CloudSQL を利用したアプリをデプロイする - Qiita](https://qiita.com/NaokiIshimura/items/e05a32f79ed202c21ba4)

[Deploying Rails on Kubernetes – Adwerx Engineering](https://engineering.adwerx.com/rails-on-kubernetes-8cd4940eacbe)

[jbielick/rails-kube-demo: A sample application for development in docker-compose and deployment via Kubernetes (GKE)](https://github.com/jbielick/rails-kube-demo)

## rails_gke_practice1
- GKE + mysql(CloudSQL) + nginx + unicorn

[ahyataro/rails_gke_practice1](https://github.com/ahyataro/rails_gke_practice1)

## rails_kubernetes
- GKE + postgres (CloudSQL使っていない)

[wagoid/rails_kubernetes: Sample Rails 5 API built on top of Kubernetes ❤](https://github.com/wagoid/rails_kubernetes)

## foxio/kubernetes-rails

[foxio/kubernetes-rails: a demo repo using Kubernetes to deploy a rails/nginx pod to GCE](https://github.com/foxio/kubernetes-rails)