OmniAICreator/Qiita-1.07M huggingface dataset:
Vue.jsに対応したIonicを触ってみる

# はじめに

`Ionic`というWebと`ios`、`Android`、`Electron`等のネイティブアプリを同じコードで作れるフレームワークの`Vue.js`対応がα版ながら登場したらしいので、試してみました。
`Ionic`を使ったことがないので詳しくは知らないですが、`React`でいうところの`React Navive`みたいな感じですかね？

これまでは`angular`にしか対応していなかったところ、`Vue.js`に対応したということで話題に上がっているようです。

#### 参考

Ionic、Vue.jsインテグレーションのαリリースを発表

https://www.infoq.com/jp/news/2018/12/ionic-vue-integration-alpha#.XBHW6TGs7yU.twitter

# やってみる

まずは`vue-cli`でプロジェクトを作っていきます。

```Bash
vue create my-ionic-project

> Please pick a preset
default
```

プロジェクトに移動して`ionic`のnpmモジュールをインストールします。

```Bash
cd my-ionic-project
npm install @ionic/vue
```

プロジェクト内の余計なファイルを消して

```Bash
rm src/assets/logo.png src/components/HelloWorld.vue
```

`main.js`に`ionic`のモジュールを読み込む設定を追記します。

```JavaScript
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

import { Ionic } from '@ionic/vue';
Vue.use(Ionic);

new Vue({
  render: h => h(App),
}).$mount('#app')
```

これで`ionic`の機能を`Vue`の中で使えるようになったはずです。

とりあえずボタンをクリックしたらモーダルが出るようにしてみましょう。
`App.vue`を以下のように書き換えます。

```Vue
<template>
  <ion-button shape="round" color="primary" fill="outline" @click="showModal">Show Modal</ion-button>
</template>

<script>
export default {
  name: 'app',
  methods: {
    async showModal() {
      // ボタンがクリックされたらionicのモーダルを表示
      const loading = await this.$ionic.loadingController.create({
        spinner: 'hide',
        duration: 5000,
        message: 'Please wait...',
        translucent: true,
        cssClass: 'custom-class custom-loading'
      });
      loading.present();
    }
  }
}
</script>

<style>
</style>
```

動作するか見てみます。`npm run serve`をして`http://localhost:8080`にアクセスしてみましょう。

![ionic.gif](https://qiita-image-store.s3.amazonaws.com/0/269717/694b3b25-0a48-fd66-0ca9-59c5d2c30e1f.gif)

とりあえずPCブラウザ上でのボタンの表示・動作が確認できました。
が、ローディングのモーダル内のアイコンが表示されていないです。CSSの設定が別途必要なんですかね？
とりあえずドキュメントもまだないですし、雰囲気だけ掴んだので先に進みます。

続いて、これを`electron`でネイティブアプリ化してみます。ビルドには`ionic`のcliを使う必要があるらしいので、

```Bash
npm install -g ionic
ionic init
```

としてみましたが、`Project type`の選択肢に`vue`がありません！
ちょっと調べてみると[公式Githubのissue](https://github.com/ionic-team/ionic/issues/16599)のTODOに`Create Project Type`等が挙がっていました。

[こちらの記事](https://blog.ionicframework.com/a-vue-from-ionic/)の`Whats Next`にも


> While it may still be a bit early for @ionic/vue and there’s a lot more to test before we recommend it for production, we’re happy to roll this out to the community and open it up for your help.

なんで書かれていますし、冷静に考えればまだアルファ版でバージョンも`0.0.1`なのでとりあえずコンポーネントを動かせるようになったという段階のようですね。

# 終わりに

`Vue.js`でネイティブアプリを構築するとなると`weex`だったり`vue-native`なんかが候補として挙がることが有りましたが、今後は`ionic`にも期待したいですね。
Vue.jsで動的にrefにアクセスする方法

#refに変数を使いたい

templateにはv-bindディレクティブを使って`v-bind:ref`や`:ref`と書けばいいことは分かるけど、それに対してscriptでどうアクセスするか分からなくて少しスタックしたのでメモ。

公式にさらっと書いてあるんだけど、分かりづらかった。

>v-for で要素/コンポーネントに対して使用されるとき、登録された参照は DOM ノードまたはコンポーネントインスタンスを含んでいる配列になります。
https://jp.vuejs.org/v2/api/#ref

静的なDOMを取得する場合は`this.$refs.hoge`だけど、動的に指定した場合は配列として取得できる。
つまり`this.$refs[hoge]`でOK。

```vuejs

<template>
    <div>
        <div v-for="item in items" :key="item.id">
            <input type="text" v-model="item.name" :ref="'name' + item.id">
            <button @click="displayRef('name' + input.id)">テキストボックスのrefを確認</button>
            <hr>
            <button @click="displayAllRefs">すべてのrefを確認</button>
        </div>
    </div>
</template>
```
```vuejs

<script>
    export default {
        data() {
            return {
                items: [
                    { id: Date.now(), name: 'hoge' }
                ]
            }
        },
        methods: {
            displayRef(ref) {
                console.log(this.$refs[ref]) // 動的なrefにアクセス
            },
            displayAllRefs() {
                console.log(this.$refs) // すべてのrefを確認
            }
        }
    }
</script>
```
案外参考サイトが見つからなかったけど、これでめでたし。Adios amigos!
Mac複数ユーザと"zsh compinit: insecure directories and files, run compaudit for list."

## どういうこと？

* zshの補完初期化コマンド`compinit`は、セキュリティのため補完ファイルの所有者が違うと、それをロードしてくれない。
* Homebrewは全ユーザで共有のファイル置き場に置かれる: /usr/local
* Macで複数ユーザを作ると、zshの補完初期化で怒られまくる

> zsh compinit: insecure directories and files, run compaudit for list.

## 解決策

.zshrcに、ユーザログイン時に補完ファイルの所有権を変更する処理を書く。

```zsh:.zshrc
: "Multi-user Hack" && {
    compaudit > /dev/null 2>&1 || { 
        echo "Need to change file ownership of zsh completion"
        sudo -v || exit
        compaudit 2>/dev/null | sudo xargs chown $(whoami)
    }
}
```

### zplug

ちなみに、zplugもプラグインや補完ファイルをロードするので、所有権を変更する必要があった。

```zsh:.zshrc
: "プラグイン" && {
  export ZPLUG_HOME=/usr/local/opt/zplug
  
  : "Multi-user Hack" && {
        [ "$(stat -f '%u' $ZPLUG_HOME/)" = "$(id -u)" ] ||  sudo chown -R $(whoami) $ZPLUG_HOME/
  }
  
  source $ZPLUG_HOME/init.zsh
}
IntelliJ IDEAのMaterial UI Theme3.0.0でアイコンが見つからない件

# 環境

- IntelliJ IDEA 2018.3
- Material UI Theme 3.0.0(3.1.0?)

# 内容

- プラグインからMaterial UI Themeをインストールして、設定画面を開くと表示されない画面があったりする
- /icons/actions/themes/arcdark(_D).svgが見つからない、といったエラーメッセージが表示される

# 対応

- Material UI ThemeのGitHubを見てもそんなアイコンは無く、そもそも情報としてarcdark(_D).svgというファイルを見つけられなかった
- 画面をみていると「Material Ocean」というテーマが選択されていたのでそれを変えることにした
- 「ツール」- 「Material Theme」- 「Material Theme Chooser」から「Oceanic Theme」以外を選択する
    - 今回はDarkerを選択した

# 結果

- 開けない設定画面は減った
- 相変わらず設定画面のMaterial Themeの画面は「この設定で編集するツリー内の構成要素を選択します」という文字だけ表示している
    - もはや何が設定できるのかは不明
python3で定期的に処理を実行

- Windowsのpythonで定期実行したかった。　
- 誤差が離れていくのがいやだった。

（将来の区切りがいい時間）-（今の時間）を待つ事にしてみた。

```python
import time
interval = 0.1
for i in range (0,20,1):
    time.sleep(round((time.time() + interval),1) - time.time() )
    print(time.time())    
```

結果

```text
1544677358.100609
1544677358.2011507
1544677358.3008385
1544677358.401767
1544677358.500938
1544677358.6018412
1544677358.7008717
1544677358.8017764
1544677358.9017441
1544677359.0014997
1544677359.1006112
1544677359.2011628
1544677359.3005452
1544677359.4007142
1544677359.5016642
1544677359.6016362
1544677359.7016027
1544677359.801553
1544677359.9015212
1544677360.0014884
```

#追記(2019-02-17)
何か処理時間を挟むとちょっとずれて行ってしまうことがある問題を修正出来るバージョン
予め次回起動時間を計算しておき何か処理が終わってからSleep時間を決定する様にした。


```python
import time
interval = 0.1 #「何か処理」が必ず終わる間隔を指定する必要がある。
for i in range (0,20,1):
    next_time =  round((time.time() + interval),1)
    #「何か処理」をかく。
    time.sleep( next_time - time.time() )
    print(time.time())    

```
FileMaker// GoogleMap以外の選択肢

先日、「[さぽらぼ](https://supportaslab.peatix.com/)」にてFileMakerでマップを使ってみようというワークショップがあったので、そこで学んだことのメモ

#FileMakerでMapを使う場合
FileMakerでMapを使おうと思うと、最初に考えるのはWebビューア
![image.png](https://qiita-image-store.s3.amazonaws.com/0/181254/403f86e6-7cf7-7a09-b27d-1b0d4978e080.png)
ですが、[GoogleMapsPlatform](https://cloud.google.com/maps-platform/pricing/?hl=ja)になったことによって、一定の無料枠を超えると有料になりました。Webビューアからリクエストしているだけなら無料なわけですが、ちょっと高度なものを作ろうと思うと登録の手間や課金の不安が生まれます。無料枠を超えることは殆どないとはいえ、他の選択肢を知っておくのは悪くないだろうと。

#GoogleMap以外の選択肢
###▼FileMakerはAppleの傘下にあるのだから、OSのMapを使えばいいじゃない
モバイルアプリであるFileMakerGoはiOSでしか利用できません。MacOS/iOSにはデフォルトで「[マップ](https://www.apple.com/jp/ios/maps/)」Appが入っているので、これを使えます
###▼[OpenStreetMap](https://openstreetmap.jp/)
オープンストリートマップというOSS（CC-BY-SA 3.0ライセンス）で展開されているマップもあります。Garminのサイクルコンピュータユーザには馴染み深いかもしれません。地図表示という意味では十分かもしれませんが、ビジネス利用という意味では信頼性に？がつくかもしれません
###▼[国土地理院](http://www.gsi.go.jp/)のデータ
ワークショップでは触れる程度でしたが、精確な地図という意味ではここにまさるものはないかもしれません。登山のときは必携ですが、利用目的によっては[申請が必要](http://www.gsi.go.jp/common/000138154.pdf)となりますので、手間は掛かりそうです。
###▼YOLP
Yahoo!Japanでも地図を使えます。[DevelopersNetwork](https://developer.yahoo.co.jp/webapi/map/)への登録が必要になりますが、Yahoo!Japanが提供する地図で表示する。というのも一つの方法かもしれません

で、実際に作ってみたサンプルについては次回公開します
S3 Object-lockを試してみる

##はじめに
S3 Object Lock機能が発表になりましたので試してみます。

機能としては、S3のオブジェクトに対して上書き、削除を禁止する機能になります。
>
Amazon S3オブジェクトロックを使用すると、「Write Once Read Many」（WORM）モデルを使用してオブジェクトを格納できます。S3 Object Lockを使用すると、一定時間または無期限にオブジェクトが削除または上書きされるのを防ぐことができます。
https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/object-lock.html

上書きや削除を禁止するもで、新規に新しいバージョンをアップロードすることは可能です

##概要
- バージョニングの有効が前提
- 有効ににはS3バケットでObject lockを有効にする必要あり
- 有効ににはS3バケットでObject lockを有効にできるのは作成時のみ
- S3バケット作成後にS3バケットデフォルトの保持モード設定(後述)と保持期間(Retention period)が設定可能
- 保持モード設定(後述)と保持期間(Retention period)はS3オブジェクトのバージョン単位で設定が可能
- 保持モードはガバナンスモードとコンプライアンスモードが選択できる
- ガバナンスモードは、s3:BypassGovernanceRetention権限があれば保護されていないものとして操作が可能になる
- コンプライアンスモードは、保護されたオブジェクトのバージョンは、AWSアカウントでrootユーザを含め、すべてのユーザーによって上書きされたり削除することはできない
- 保持モードの他に法定保留(Legal hold)が設定可能
法定保留(Legal hold)は、保持期間(Retention period)とは別物で有効/無効のみ設定可能。マニュアルにある無期限はLegal holdを有効した場合を指す

>
you can prevent an object from being deleted or overwritten for a fixed amount of time or indefinitely
https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/object-lock.html

- 法定保留(legal holds)は、保持期間と同様に、法定保留は、オブジェクトバージョンが上書きまたは削除されるのを防ぎます。法定保留は、s3:PutObjectLegalHold許可を得たユーザーが自由に配置して削除することができます。

###整理すると
- Leagl hold 期限なし 特別の権限あれば設定変更可能  
- Governance 期限あり 特別の権限あれば設定変更可能
- Compliance 期限あり 設定変更rootも不可

##イメージ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/78184/c4b327fc-38ce-df81-81e9-f9c49dc3ed6b.png)

S3バケット単位のデフォルト設定
![image.png](https://qiita-image-store.s3.amazonaws.com/0/78184/d814177e-7af7-7e6e-87ce-b2605473b37f.png)

S3オブジェクトのバージョン単位の設定
![image.png](https://qiita-image-store.s3.amazonaws.com/0/78184/f6d306ff-04c3-facc-01e9-1319a4b0a3b9.png)

S3バケット単位のデフォルト設定の注意点としては、デフォルト設定でコンプライアンスを選択するとS3オブジェクトのバージョン単位の設定でもコンプライアンスしか選択できなくなる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/78184/5467a194-25e6-cb95-d2dd-a94881a6f5aa.png)

デフォルト設定でガバナンスを選択している場合は、ガバナンス/コンプライアンス/Noneから選択可能。

##やってみる
###バケット作成
バージョニングを有効にする
![image.png](https://qiita-image-store.s3.amazonaws.com/0/78184/d21145f2-fb47-e2c9-0883-0cb2370399eb.png)

Object lockを有効にする
![image.png](https://qiita-image-store.s3.amazonaws.com/0/78184/f3b93847-8b19-ea3e-0560-f2c8b27bb69c.png)
実際のObject lockはS3オブジェクトのバージョンごとに有効無効設定可能です。

###S3バケットのデフォルト設定
Properties＞Object lock
以下の例だと、ガバナンスモードで1日間保持

![image.png](https://qiita-image-store.s3.amazonaws.com/0/78184/9c5144e4-c9e6-ab7f-11d2-67321aacdc4a.png)

###テスト用のファイルをアップロードする
Properties＞Object lockをクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/78184/fecc68f3-b94a-89d0-8247-730317413f44.png)

以下の例だと、ガバナンスモードで2018/12/14まで保持。Legal holdも有効。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/78184/458759d8-e157-7107-e902-3cc601629c8a.png)

削除しようとするとエラーになる
![image.png](https://qiita-image-store.s3.amazonaws.com/0/78184/d7a98bba-ce62-61ff-f26b-d88ab32cb000.png)

ただし新しいバージョンをアップロードする分には可能
![image.png](https://qiita-image-store.s3.amazonaws.com/0/78184/1ecb4f47-0fc7-db7d-7ccb-d7b7fda56508.png)

##お約束
投稿内容は私個人の意見であり、所属企業・部門見解を代表するものではありません。
Excelの連番を振る関数

# 連番を振る関数
`ROW`関数を使うものはよくあるし解説も豊富なので、それ以外の方法で連番を振る方法を記載してみたいと思います。
※随時更新

## シートの前提事項
1,2,3行目は見出し行とし、A列のA4セル以降に連番を振るものとします。

## 通常の連番
### OFFSET関数版
```vb
=MAX(OFFSET($A$3,0,0,ROW()-ROW($A$3),1))+1
```
### INDIRECT関数版
```vb
=MAX(INDIRECT("$A$3:$A"&ROW()-1))+1
```

### 解説
基本的な考え方は、一つ上のセルまでの最大値に1を足すというものです。
現在の行数に依存していないため、間に空白行があっても空き番のない連番を振ってくれます。
`$A$3:$A4`のような指定をせずに`OFFSET`関数・`INDIRECT`関数を使っているのは、現在や一つ前のセル番号を関数内に入れてしまうと行の入れ替えをした時におかしくなるためです。
また、`OFFSET`関数版では前行までの高さ指定を`ROW()-3`とせず、`ROW()-ROW($A$3)`としていますが、これにより後から見出し行を追加した場合でも正しく動くようにしています。
基本的に、利用する固定セル番地指定を開始位置の直前セル(絶対参照)のみにすれば、削除・追加だけでなく行入れ替えにも強い式になるはず。
<font color="lightgray"><span style="font-size:50%">~~「強い式」ってなんか陰陽師ミタイデスネ。~~</span></font>

## 間に連番の振り直しが入る場合
間に空行や中見出しなど連番以外が入った場合に、次の行を1から振り直します。

### OFFSET関数版
```vb
=IF(ISNUMBER(OFFSET($A$3,ROW()-ROW($A$3)-1,0,1,1)),OFFSET($A$3,ROW()-ROW($A$3)-1,0,1,1)+1,1)
```
### INDIRECT関数版
```vb
=IF(ISNUMBER(INDIRECT("$A"&ROW()-1)),INDIRECT("$A$"&ROW()-1)+1,1)
```

### 解説
最大値+1としてしまうと、空行があっても連番を振ってしまうため、`IF`関数で前行が数値だったら連番、それ以外なら1を振るように条件分岐します。
連番の場合は前行は必ず数値になるので、セルの値を取得して1を足してやるだけ。
PWA環境下で実行されているかを判定する方法

# はじめに
ReactやAngular、Vue.jsなどの主要なフレームワークを使えばワンステップ＋αで簡単に実装できるようになっていることからSSLさえ導入していればおまけ的に導入できるイメージのPWA。

実装を進めていくと「web表示だけ【ホーム画面に追加】の誘導モーダルを出したい」「PWAの環境下でのみストレージにデータを保持させておきたい」といったときにPWA環境か通常のブラウザかを判定する場面が多かれ少なかれ出てきます。
しかし、あまりここに触れている記事を見かけなかったので備忘録も兼ねて掲載します。

# 本題
メディアクエリのパース結果を利用してJavaScript上で判定します。
以下はmanifest.jsonでディスプレイモード「standalone」を指定した場合を想定しています。

```js
if(window.matchMedia('(display-mode: standalone)').matches){
  // ここにPWA環境下でのみ実行するコードを記述
}
```

メディアクエリということはCSSでもPWA環境下のみで反映する設定を以下のように簡単にかけます。

```css
@media (display-mode: standalone){
  /* ここにPWA環境下でのみ実行する設定を記述 */
}
```

PWAのディスプレイモード設定を「standalone」に設定する方が大半だと思われますが「browser」設定はブラウザでもマッチしてしまうので注意してください。
Proxyとユーザ認証を越えてwgetする

Basic認証が設定されたサーバから、wgetでファイル取得した時に設定したオプション

## Basic認証
以下オプションを指定

* --http-user
* --http-passwd

```
$ wget --http-user={username} --http-passwd={password} {URL}
```


## Proxy
使用している環境はProxyを経由する必要があったので、Proxy設定も追加

* -e HTTP_PROXY

```
$ wget -e HTTP_PROXY={proxy_url}:{proxy_port} {URL}
```

## まとめ
最終的に出来上がったコマンドはこんな感じ

```
$ wget -e HTTP_PROXY={proxy_url}:{proxy_port} --http-user={username} --http-passwd={password} {URL}
```
Amazon Pollyを使って温度をアナウンス

先日、[Slack Advent Calendar 2018](https://qiita.com/advent-calendar/2018/slack)で
[温度データSlack投稿システムを「５分」で作ってみた！] (https://qiita.com/mikawan/items/8184cdcc64642aa3729e)を投稿したのですが、常にスマホを見ているわけでも無いので、通知を見逃してしまうことも有りました。そこで、音声を使ってみようと考えました。

作成したのは、ある温度を超えると、Amazon Pollyを利用して「〇〇℃です。暑いのでエアコンをつけましょう。」と話す仕組みです。

##使うもの
■Windows 10 PC
■[Gravio](https://www.gravio.com/jp/gpromo/1901-casual-iot)（月額500円）
　-Gravio Studio Ver.2.0.2065
　-Gravio Server Ver.2.0.2153
　-無償貸出の温度センサー
■Amazon Polly（無料利用枠あり　詳細は[こちら](https://aws.amazon.com/jp/polly/pricing/)）
12ヶ月間の無料利用枠があり、1ヶ月あたり500万文字まで利用できます。

#設定
以下の流れで設定します。

- 【事前準備】Amazon Pollyを使うために必要なアクセスキーを取得
- 温度センサーの設定
- Amazon Pollyの動作に関する設定
- 動作タイミングの設定

##Amazon Pollyを使うために必要なアクセスキーを取得
GravioでPollyを使用するためには、アクセスキーとシークレットアクセスキーが必要です。

AWSのコンソール画面よりPollyを使うためのアクセスキーを取得します。

AWSの登録は、ガイダンスに従ってクレジットカード情報など入力することで完了します。

アクセスキーの取得方法については、こちらの記事を参考にしています。
[Amazon Pollyで投稿記事に音声を付けてみた](https://qiita.com/TakSus/items/caa05542e6f6e6ca1ecd)
##Gravioで温度センサーの設定 （再掲）
[前回の記事] (https://qiita.com/mikawan/items/8184cdcc64642aa3729e)でも同じ内容を書いているのですが、再掲しておきます。
###センサーとペアリング
温度センサーとペアリングします。
センサーがチカチカっと光り、以下の画面が表示されれば、ペアリング完了です。
![温度センサーペアリング](https://qiita-image-store.s3.amazonaws.com/0/247209/6506bf18-8f91-b280-5d84-731aaf969f94.png)
ペアリングについては、[こちら](https://www.gravio.com/jp/sensor-setup-guide)をご参照ください。

###センサーの登録
（1） エリア・レイヤーを登録する
画面右上の”＋”ボタンをクリックし、エリアを作成します。
エリアを作成すると自動的にレイヤーが作成画面が表示されるので、SENSING DEVICE TYPEにAqara-Temperatureを選択します。

（2） レイヤーにデバイス（センサー）を登録する
一番右のデバイスウィンドウの”⊕”ボタンを選択し、デバイスを追加します。
デバイスのスライドボタンをONにすることで、データの収集が開始されます。
##Amazon Pollyの動作に関する設定
今回は、Amazon Polly Speechコンポーネントを使用して、動作（アクション）を作成します。
アクション画面にて、Amazon Polly SpeechコンポーネントをSTEPに追加します。
コンポーネントのプロパティを選択し、下図のように設定します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/247209/93bc084b-a22a-fad2-2188-91fd2b85d6bc.png)

Text to speechは、動作タイミングのセンサーデータを可変数として使用することができます。データを使用する場合は、av.Dataを使用します。また、データと定型文を組み合わせる際は、データと定型文を”+”でつなぎます。

今回は
`av.Data + "度です。暑いのでエアコンをつけましょう"`
と設定します。



##動作タイミングの設定
前項で設定した動作を実行するタイミングを設定します。
今回は、夏場にエアコンの推奨設定温度とされている「28℃」を超えたときに通知します。

トリガー画面から、"＋”をクリックしトリガーを作成します。
トリガーの設定内容は以下のとおりです。

|項目|設定値|
|:---|:---|
|エリア|温度データのエリア|
|レイヤー|温度データのレイヤー|
|アクション名|温度データ　Polly（先程作成したアクションカード）|
|Interval|5（Default）|
|Classic/Threshold Triger|Classic Trigger（Default）|
|温度|>=28|
設定後の画面がこちら。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/247209/b731423d-e0d5-509b-2b42-5450303e415e.png)

こちらを設定した後、トリガーのスライドボタンを有効にすると、温度が28℃を超えると音声で通知されます。

#あとがき
今回はトリガーの数値を変えやすいよう、都度Amazon Pollyを利用する設定にしましたが、当然AWSの費用、および、ネットワーク費用が発生します。固定の音声メッセージの発出で充分な場合は、一度Pollyを利用して音声ファイルを作り、Gravio上で音声ファイル再生を行なえばコストダウンが可能ですし、ローカルで利用可能になります。
（Gravioは音声ファイルの再生もできます。）

変化するデータをもとに音声アナウンスする場面としては、カメラに写っている人数を通知するといったことも可能です！
様々な用途で使うことができるGravioをぜひご活用ください！

#参考サイト
[Gravioとは？](https://www.gravio.com/jp-blog-article/2018-11-02-about-gravio)

[温度センサーのデータをエクセルで簡単に表示](https://qiita.com/mikawan/items/3d93543566680afda868)

[温度データSlack投稿システムを「５分」で作ってみた！](https://qiita.com/mikawan/items/8184cdcc64642aa3729e)

[Amazon Pollyで投稿記事に音声を付けてみた](https://qiita.com/TakSus/items/caa05542e6f6e6ca1ecd)
Cyberduck(S3)でフォルダ一覧表示が遅い時の対処法

## はじめに

Cyberduckは、FTP、SFTP、クラウドストレージなどに対応したクライアントソフトです。
S3にも対応しており、オブジェクトのリスト表示、ダウンロード、アップロードなどができます。

## 事象

最近やけにフォルダリスト表示が遅いという、相談がきて調べてみました。
2秒だったのが、30秒かかるようになったフォルダもあったそうです。

## 原因

結論から言うと、マルチパートアップロードされたが未完了のまま放置されたマルチパートの
残骸が大量に残っていたことが原因でした。

マルチパートが残っているとそれも全て取得しているようで、表示に時間がかかります。
[該当コード](https://github.com/iterate-ch/cyberduck/blob/master/s3/src/main/java/ch/cyberduck/core/s3/S3ListService.java#L72)

## 対処１

aws cliやSDKを使い、list-multipart-uploads APIを実行して、未完了マルチパートの
KeyとUploadIdを取得し、abort-multipart-uploadに指定して実行します。
これでマルチパートの残骸を削除することができます。

```terminal:awscliコマンド例
aws s3api list-multipart-uploads --bucket example_bucket --prefix "target/hoge/"
aws s3api abort-multipart-upload --bucket example_bucket --key "${KEY}" --upload-id "${UPLOADID}"
```

## 対処２

個別に削除する必要がない場合は、S3のライフサイクル機能を使い、一括削除することができます。
ライフサイクルで、アップロードが開始されてからの日数を指定して、それを超えた分を削除します。

設定例）
<img width="693" alt="abort_multipartupload.png" src="https://qiita-image-store.s3.amazonaws.com/0/51108/0d5ce6e2-d83d-9441-0040-126791733b58.png">
ライフサイクルルール名と↑設定例のように指定して、あとは次へ＆保存ボタン押すだけ。
あとは１日待つだけ。

これでリスト表示が速くなりました！

# その後（追記）

上記対処後、症状が悪化したとの連絡が。
確認したところ、どの階層でファイル一覧表示しても、再帰的に配下の全ファイルのマルチ
パートを取得する、という動きをしており、さらに表示が遅くなってしまっていました。

マルチパートが（アップロード中を除き）常に存在しない状態を作れれば問題は解決しますが
ライフサイクルで設定する日数は最低1日なので、1日経過しないと削除されません。
頻繁にアップロードされる環境であれば、1日分でも結構な数のマルチパートが残ります。
＃本当はアップロード処理時に中途半端なマルチパート削除できればいいのですが
＃アップロード中断時はNW的な問題も多く、抜け漏れなくAbort処理することが難しい

と悩んでいましたが、ワークアラウンド見つけました！

## 対処３

[該当コード](https://github.com/iterate-ch/cyberduck/blob/master/s3/src/main/java/ch/cyberduck/core/s3/S3ListService.java#L72)のtry-catchでAccessDeniedExceptionを起こしてlist-multipart-uploadsを
中断させることでリスト表示が速くなるというもの。
ちょっと無理矢理感ありますが＾＾；

具体的にはCyberduckで使うアクセスキーに紐づくIAMユーザの権限に、下記内容の
インラインポリシーを加えました。
これでlist-multipart-uploadsが拒否されます。

```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Deny",
            "Action": "s3:ListBucketMultipartUploads",
            "Resource": [
                "arn:aws:s3:::hoge_bucket" 
            ]
        }
    ]
}
```

（今度こそ）これでリスト表示が速くなりました！　ふぅ。。
KPTを活用した振り返り in Makuake

この記事は[Makuake Product Team Advent Calendar 2018](https://qiita.com/advent-calendar/2018/makuake)の13日目の記事です。

開発に疲れたら腹筋ローラーをしてリフレッシュしています。 @shigeru10 です。
Makuakeには業務委託として関わっています。
その一日を担当させてもらうことになりました！

# 概要
Makuakeでは開発部でも複数のチームがあり、それぞれで振り返りを行っています。
自分の所属しているチームではKPTを使い毎週振り返りをしており、今回はその振り返りについて紹介します。
一般的なKPTと大差はないですが、使っているツールやどうやって進めているかを紹介していきます！
その中で、自分が過去に関わったプロジェクトでのKPTの経験も一緒に紹介しようと思います。

# 進め方
1. 個人でKPTをまとめる
    - 5分を目安にその週のKPTを書き出す
    - [RealtimeBoard](https://realtimeboard.com/)に出す
    - 個人的に意識していること
        - その週の取り組みで良かったこと、悪かったことを書き出す
        - Keep, Problemには前回のTryの結果、過程のことを書き出す
        - 個人、チーム両方の視点を入れる
2. 全体で深掘り
    - 全員がKPTをまとめ終わったら、ファシリテーターを中心に出てきた内容を掘っていく
    - すべてをそれぞれ見ていくと時間が足りないため、出てきたものをグループにまとめ、塊ごとに確認
    - RealtimeBoardを使い全員に画面の共有
        - Problemに紐づくTryを線で結び、簡単に認識できるように工夫

3. Tryの確認・担当決め
    - Problemから出たTryを確認し、実行までの責任者を決定

流れとしては、一般的なのではないでしょうか。
ツールとして`RealtimeBoard`を使っていますが、新しく[Jamboard](https://gsuite.google.co.jp/intl/ja/products/jamboard/)が導入されたためそっちを活用できないかという動きもあります。

# 振り返りのタイミング
makuakeでは、金曜の午後レトロスペクティブ(技術的な進捗報告などもこの中に含まれています)の中の1つのコンテンツとしてKPTを取り入れています。
一週間の締めなのでわかりやすいタイミングというのがメリットです。

また、以前別のプロジェクトでは木曜の午後にKPTを行っていました。
スケジュール的に都合が良かったというのもありますが、Tryをその週の間に実行もしくはスケジューリングを完了させることができるという点でメリットがありました。
金曜日の振り返りが延びてしまった時に残ってTryを実行するのは大変ですし、出てきたことをすぐ実行した方が気持ちよく月曜日を迎えることができます。

# 過去のKPT振り返り
過去のKPTを見返して、今後に活かせることが多くあります。
makuakeでは、過去のTryが実行されていない場合に、それをリマインドする担当を置くことでTryが実行されることなく埋もれることを防いでいます。
過去のプロジェクトでは、一定の期間(その時は、3週間、3ヶ月...)で過去のKPTを見直していました。
見返しても内容がわかるようにKPTを書き出しておくなど残し方に工夫が必要です。
その時はうまくいっていたのに、今はうまくいっていない時にその差を考え、今後に活かすことができていたと思います。

# まとめ
makuakeでのKPTの取り組み方について紹介してきました。
個人的な意見もありますが様々な方法がある中で、一例として参考になれば嬉しいです！

[Makuake Product Team Advent Calendar 2018](https://qiita.com/advent-calendar/2018/makuake)もちょうど折り返し地点にきました。
明日は @srttk が書いてくれます！
エンジニア向け英語で良く使う単語・フレーズ

|英語|日本語|
|----|----|
|exclamation mark| ビックリマーク (!) |
|parentheses| 丸括弧 ( ) |
|curly braces| 中括弧 { } |
|square brackets| 括弧 [ ] |
|necessary/unnecessary|必要・必要ない|
|preserve|保存|
|out of range|範囲外|
|arithmetic|算術 (算数込み)|
|convoluted|複雑な|
|unified|統一した|
|optimization|最適化|
|dependencies|依存性|
|semantics|意味論|
|vulnerability| 弱み |
|ACID (Atomicity,Consistency,Isolation,Durability)| データベースのシステム - 原子性, 一貫性, 独立性, 永続性|
|OOP (Object-oriented programming)|オブジェクト指向プログラミング|
|Procedural programming|手続き型プログラミング|
|LGTM (Looks Good To Me) | 見ました、大丈夫です！ |
|RTFM (Read The F***ing Manual)| まずマニュアル・ドキュメントを読め!|

# translationの意味を間違えないように
CSS・デザインの`translation` = エレメントの移動
と 
翻訳する `translation`
不安駆動テスト技法

[ITの教本には載ってないバグの発生ポイント](https://note.mu/mugi1208/n/nfa564ad7b109)に触発されました。二番煎じです。

システム開発していて何がストレスかというと後になってやばいバグが出た時ほどつらい時って他にはないような気がします。（ウソです。いろいろ思い出すとキリがありません。）

同僚のバグ報告を受けて、レビューの時に気をやっていた方法を手順化しました。いや、私の事だったかもしれません。

#　摘要範囲
いつでも良いのです。ただし他のテスト技法で作成したテストを通した後に適用します。
「思ってもなかった」バグにはこの方法は効果がありません。

#　ポイント
バグを出したあと、反省としてテスト項目を増やすのは問題です。特に上司報告においては懲罰的にテストを厳しくすることを約束したくなります。

しかし、チェックが厳しくなった場合、ちょっとした変更にも時間がかかるようになり、ゆっくりと生産性が落ちていきます。生産性が落ちると遅れが出てプレッシャーが増します。プレッシャーが増すと目に見えない作業を減らします。即ち、テストをレビューにギリギリ通るレベルまで削減します。結果、またバグを作ってしまいます。悪循環です。

増えてしまったテスト基準だったら減らすのはなかなか困難です。これ以上は増やさないようにするにはどうすればよいかと思い考えました。

無意識に見逃したテスト項目は、不安という形をとって残ります。これを利用しようというのがこの方法です。

#　効果
- リリース前の不安が減る(メイン)
- やばいバグを見つけることがある(副作用)

#　ご利用の前に
基本的には、他のテスト技法を使いましょう。適切に運用されていれば「そういえば・・・」という種類のバグは減ります。

どのようなバグでも発見・防止に大切なことは、”本当にその方法でこの問題を解決できる”かです。対策を懲罰的に行う問題は、作業効率が落ちた分しかバグが減らないことです。

#　手順
1. 通常のテストケースをクリアします
- 誰か読んできます(ゴムのアヒル等でも可)
- 「バグが不安じゃない？」と聞いてもらいます。答えが「いいえ」なら、終了です。
- 「どこが不安なの？」と訊いてもらいます。よ~く、考えて応えます。
- 「どうやって、取り除く？」と訊いてもらいます。よ～く、考えて応えます。
- 「それで、不安がなくなる？」と聞いてもらいます。よ～く、考えて不安がなくなりそうもなかったら前項に戻ります。
- テストケースを追加して、テストします。
- 「それで、この点について不安はなくなった？」と訊いてもらいます。「はい」と即答できなければ、5に戻ります。
- 3に戻ります。

（gotoを書き過ぎでそれこそ不安でたまりません。次から、こういうのは疑似コードで書きます。）

#　さいごに
基本的に言語化できないものを言語化する作業なので、めんどくさいしキツイ作業です。最終的に言語化されなくてもテストが追加でき不安が解消されれば完了です。不安がバグの形をとるまで解決しないこともあるでしょうから、うまく行かないときはリスク許容できるか試すのも手だと思います。

リファクタリングと同じように効果は測定が難しいですが、開発に安定性をもたらす方法なので試してみてはいかがでしょうか。
Redashがバージョンアップ(v4)して便利になったこと

# 概要

redashがv4にバージョンしました。
redash v4の新機能を紹介します。
上手に新機能を使って、redash作成を効率化していきましょう！

# クエリ（レポート（表、グラフ））

## 数値の表示形式（フォーマット）をredashで設定できるようになった（便利度：★★★★★（MAX））

これまでは、SQLで行っていた（面倒な）表示形式の変換を、redashの設定で可能となりました。

これまでは、文字列変換(CONVERT)や、文字置換(REPLACE)を駆使して金額の12,000.00の「.00」の除去や、
YoYなどにパーセンテージ(%)の付加を行って表示形式を整形していましたが、v4ではredashの設定で可能です。

手順

・「Table」画面の左下にある「Edit Visualization」をクリック
　 **※　自分が編集できる（自分が作ったor編集権限のある）クエリの場合に「Edit Visualization」が表示されます。** 
　⇒　「Visualization Editor」が表示されます

・表示形式を変更したい項目の「Number format」を変更（数値項目のデフォルト値は「0,0.00」）

「0.0」に変更することで、小数点以下が除去され「12,000」のように表示されます。
※　表示形式を変えると、右側の表示の形式も瞬時に変更されますので、確認ができます。

YoYのようなパーセントの項目の場合は、「0.0%」に変えることで、「123.4%」のように表示されます。
※　パーセンテージの場合の元の値は、100を掛ける必要はない（100掛けちゃダメ）

表示形式は、以下のURLを参照してください。
http://numeraljs.com/

## 項目を非表示にできるようになった（便利度：★★★★）

v4以前はSQLから項目を削除する必要があったが、SQLには残したまま、redash上で非表示にできるようなった。

表（Table）では表示させたくないが、グラフでは使いたい、といった場合も、クエリを分ける必要がなく、
１つのクエリで実現できるようになった。（開発生産性、運用保守性が格段にあがりますね！）

手順

・「Table」画面の左下にある「Edit Visualization」をクリック

・非表示にしたい項目の項目名にあるチェックボックスからチェックを外す

## 項目の表示順を変更できるようになった（便利度：★★）

項目の表示順をSQLの変更なしに、redashで変更できるようになりました。

手順

・「Table」画面の左下にある「Edit Visualization」をクリック

・順番を変更したい項目をクリックして、移動したい場所に持っていきます。

## 項目の表示を右寄せ、中央寄せ（？）、右寄せの設定が可能になった（便利度：★★）

v4以前は、数値でも、文字列でも、なんでも右寄せでしたが（なので特に数値は読みずらかった）、
項目ごとに変更できるようになりました。

手順

・「Table」画面の左下にある「Edit Visualization」をクリック

・項目名の下にあるボタンで切り替える（説明が雑ですが、見れば分かると思います。）

## 表に表示する件数を変更できるようになった（便利度：★★★）

これまでは１５件（？）だった表示件数を変更できるようになりました。

手順

・「Table」画面の左下にある「Edit Visualization」をクリック

・「Visuralization Name」の下の「Grid」をクリック

・「items per page」で表示したい件数を選択
　※　いまいま5, 10, 15, 20, 25から選択可能
　　（1か月の日数分表示するために50とか欲しいなぁ）

# ダッシュボード

## クエリの追加・削除・レイアウト変更の方法が変更
ダッシュボードにクエリ（表やグラフ）を追加・削除・レイアウト変更する方法が変更になりました。

手順

・ダッシュボードの右上の「・・・」をクリック

・「Edit」をクリック

### クエリの追加

・画面右下の「Add Widget」をクリック

・追加したクエリを選択
　※　v4以前で選択できた、表示サイズ（幅）は、ここでは選択できなくなりました。
　　　追加した後にサイズを調整できるように変更となりました。

### クエリの削除

・削除したいクエリの右上の「×」をクリック

### クエリのレイアウト変更

・移動したいクエリを選択して、マウスで移動したい場所まで移動

## クエリのサイズのバリエーションが増えた（便利度：★★★）

v4以前は、通常（画面の幅の半分）と２倍（画面の幅の全部）のみ選択できました。
v4になって、新たに画面の1/3のサイズにすることができるようになりました。

手順

・ダッシュボードの右上の「・・・」をクリック

・「Edit」をクリック

・サイズを変更したいクエリを選んで、クエリの枠にカーソルを置くと、カーソルが「⇔」に変わるので、クリックしてサイズを変更します。（説明が雑ですが、やれば分かります。）

## クエリの高さが変更できるようになった（便利度：★★★★）

上記と似てますが、幅だけではなく、v4から新たに高さを自由に変更することができるようになりました。

手順

・ダッシュボードの右上の「・・・」をクリック

・「Edit」をクリック

・高さを変更したいクエリを選んで、クエリの枠にカーソルを置くと、カーソルが「↕」に変わるので、クリックしてサイズを変更します。（説明が雑ですが、やれば分かります。）
GitHub のプルリクエストを Bitrise x Danger x ktlint で自動レビューする

以前、Android プロジェクトへ [ktlint](https://ktlint.github.io) を導入する手順をこちらに書きました。
⇒ [ktlint の導入と感想](https://qiita.com/hkusu/items/f1c55a0e0d03543b24d5)

今回は、GitHub のプルリクエスト時に CI（[Bitrise](https://www.bitrise.io)）上で ktlint によるコードスタイルのチェックをし、結果を [Danger](https://danger.systems/ruby/) を利用してプルリクエストにレビューとして書き込む、というのを実現する設定を紹介したいと思います。

#### 動作イメージ

<img width="600" alt="スクリーンショット_2018-12-12_17_37_06.png" src="https://qiita-image-store.s3.amazonaws.com/0/35733/ea197227-434e-2e22-7578-677678e786fc.png">

なお、Danger 自体のセットアップについては長くなるので今回は説明しません。（また別の投稿で書こうと思っているので、もし書いたらリンクを追記します。）

**[2019.01.16 追記]** こちらに書きました -> [Android の開発環境へ Danger を導入するメモ](https://qiita.com/hkusu/items/e1bd99efa92263f448ff)

## Android プロジェクト側

[ktlint の導入と感想](https://qiita.com/hkusu/items/f1c55a0e0d03543b24d5) にも書きましたが、Gradle のタスクを次のようにしておきます。

```gradle:app/build.gradle
task ktlint(type: JavaExec, group: "verification") {
    description = "Check Kotlin code style."
    classpath = configurations.ktlint
    main = "com.github.shyiko.ktlint.Main"
    args "--android", "--color", "--reporter=plain", "--reporter=checkstyle,output=${buildDir}/reports/ktlint-results.xml", "src/**/*.kt"
    ignoreExitValue true
}
```

ポイントは CI（Bitrise） 用に checkstyle 形式での出力を追加しているのと、チェックにひっかかっても異常終了させない（`ignoreExitValue true`）ようにしているところです。（チェックにひっかかったらプルリクエストをマージさせたくない場合は `ignoreExitValue false` にすれば他の CI はどうか分かりませんが Bitrise ではスクリプトが失敗してマージできなくなります。）
このフラグで制御しなくても CI 上で異常終了をうまくハンドリングしたり、結果の XML を見て制御等できるかもしれませんが、ややこしくなり属人化の元になってしまうので、自分は CI 上で色々することは避けています。

Android プロジェクトのルートに置く Dangerfile は次のとおりです。

```ruby:Dangerfile
# 変更した行以外は指摘しないように
github.dismiss_out_of_range_messages

checkstyle_format.base_path = Dir.pwd
checkstyle_format.report "app/build/reports/ktlint-results.xml"
```

## Bitrise 側

Danger を動かす最低限のワークフローは下図のとおりになるかと思います。

<img width="600" alt="スクリーンショット_2018-12-12_16_56_15.png" src="https://qiita-image-store.s3.amazonaws.com/0/35733/3ff553b4-82f0-a481-9378-d92e23718571.png">

上図の赤枠のように、スクリプトに下記の記載をします。

```shell
# ...

./gradlew ktlint

gem install danger
gem install danger-checkstyle_format
danger
```

あとはこのワークフローを、GitHub のプルリクエストをトリガーにして起動するようにすればOKです。プルリクエストを送る度に、ktlint でチェックした結果がレビューとして書き込まれます。便利！

## 補足

今回、Danger や Danger プラグインの gem は Bundler で管理するようにしていませんが、Bundler で管理するようにしてもいいと思います。

## おわりに

簡単にですが Bitrise、Danger を利用した、プルリクエストの自動レビューについて説明しました。Danger は今回はじめて触ってみたのですが、とても便利ですよね。個人的には機械でできるところは機械にやらせたいので、今後も便利な使い方を探っていきたいなと思っています。
「【TECH x GAME COLLEGE #10】Unityでパフォーマンスの良いUIを作る為のTips」に参加してきた

# 概要
```
【TECH x GAME COLLEGE #10】Unityでパフォーマンスの良いUIを作る為のTips

UIはゲームを作る上で必ず通る道で、ゲームの顔と言っても良いです。UnityのUIシステム（通称uGUI）は直感的にUIを作れて便利ですが、UIを好き勝手作ると簡単にパフォーマンスの低下を招きます。
今回は基本に立ち返り、UnityのUIとはどういったシステムなのか、そして最適化する上で確認すべきポイントとTipsを紹介します。
```
https://techxgamecollege.connpass.com/event/110515/ より引用


講演はUnityTechnologiesJapanの山村さん（[テラシュールブログ](http://tsubakit1.hateblo.jp/)の中の人）

勉強会では、「Unityでパフォーマンスの良いUIを作る為のTips」として下記のようなことを話していただいた

- パフォーマンスの良いUIの為に注意すべきこと
 - バッチ
 - フィルレート
 - リビルド
 - その他

講演していただいた資料は後日公開予定とのこと

# パフォーマンスの良いUIのためにすべきこと

##1. バッチング

- 描画処理　後ろ側から匿名テクスチャを貼り付けていく
  - テクスチャ→　マテリアル →　ポリゴン の流れをやる
  - 同じものを繋げるなら同じことする
  - Canvasにまとめて、バッファーを一度作る（バッチング）
  - 一括描画できるのは同じテクスチャのみ
- バッチングが効かないとこがある
  - ソートレイヤーとして、別々になっていて重なってしまった場合は効かない
  - 独自のShaderが違うMaterialが違う場合も効かない
  - 座標のZ値が同じいち
  - 同じマスクでクリップされていること
    - マスクの使用は控える
- UI　Profilerで確認する
  - どういう風にバッチングされているのかとかがわかる
  - バッチ一覧を確認する
  - バッチができていない理由がわかる
    - SpriteAtlasでまとめてやる
    - パックすると入ってほしいものがでる
      - 余裕をもって配置する（TightPackingを切る）
      - ImageをUseSpriteMeshを使う 2018.3から

## 2. フィルレート （オーバーレンダリングの話）
- ポリゴンに色を塗るのは1ピクセルづつ塗っていく
- たくさんのUIがあると透明をちゃんと塗っていく
  - 何度も透明を塗られる部分がある
- UIProfilerで確認する
  - Composite Overdraw　で確認する
  - 赤くなってるとこはやべえ
- 対策
  - 不要なUIを削除
  - 重なる部分をできるだけ削る
    - SpriteMeshを使用
    - FillCenterを外して中央をくり抜く
  - オーバードローしても問題ないShaderにする
    - AssetBundleの時はShaderの依存関係をちゃんと使う
- Shaderノフかの確認
  - 各デバイスのプロファイラーでみれる
  - Xcodeで確認できる

## 3. リビルド
### 3.1 ジオメトリ
- バッファリングに変化がなければ効率的に使いまわせる
- 変化があれば再構築が必要
  - UIをEnable/Disable
  - マテリアル変化
  - ReactTransformの変化
  - Transformの親が変化
- 一つのUIwo変えると同じCanvasの全てのUIを再構築
  - メインスレッドはそこまで処理の負荷はない
  - Jobの方が辛い
  - Rebuildが走っていると山ができる
- 発生させている根本をみる
  - CPU　Profilerで下記検索
  - OnDidApplyAnimationProperties、OnRectTransformDimensionsChange
  - 関連オブジェクトの表示
- ちゃんとCanvasを分割する
  - バッチングは効かなくなるよ
  - 動くUIはImageのSpriteMeshを避ける
- 親UIを動かす
  - 全てのバッチが作り直される
  - 動かしたタイミングで負荷がかかる
  - 要素数を減らす
  - 要素をプーリングして最小限のUIでどうにかする
  - ScreenSpaceCameraを動かすとやばい

### 3.2 レイアウトグループ
- Groupの更新は変更時に親を全部GetConponentsを繰り返す
- DirtyするUIが紛れ込むと毎フレームUIのリビルドが走る
  - このリビルドはメインスレッドで起こる
- RectTransformに関連するものを操作しない
- LayoutPropertyに関連するものは操作しない
- Mecanimのステートマシンに上記の要素にアクセスするAnimationClipを入れない
- LayoutGroupを可能な限り使わない

## 4. その他
- RayCastTargetは可能な限り外す
  - ついてるだけで負荷がかかる
- WorldSpaceCameraのEventCameraにはカメラを登録する
  - FindTag　MainCameraが呼ばれる
- PixcelPerfect設定は動かないカメラのみ
- テクスチャは画像解像度にあったものを使う
  - 可能な限り圧縮する

# まとめ
- 基本的にはUIを動かさない
- 動かすなら最低限の影響を抑える
- 気を抜くな、誰も信用するな、プロファイラを手放すな


# 質疑応答
- Canvas in Canvas の粒度
  - 同時に動くものをまとめていく
- いつからやるの
  - ルールをちゃんと決めて作っておく
  - フィルレートが一番やばい
  - その次にリビルド
- GameObjectのOffはやめた方がいい　（バッチが破棄される）
- CanvasGroupのAlphaを0にした方が安いこともある
  - CanvasをDisableにすると大きいと辛い



# 感想
- Unityは何も考えなくてもUI作れてしまうので、あげられたことはほとんど意識していなかった。
    - 考えたら当たり前ってこともあるので（オーバーレンダリングとか）、作る時は意識しよう。
    - 特に大規模になるとUIの重なりは大変なことになるので、ちゃんと作ることでパフォーマンスアップするね
- Unityのまとめ機能系は、柔軟性に振りまくってるので自前でパフォーマンス作った方がいいよっていう話になったのは面白かった。
RspecにSystem Specを導入

Dockerで実行するfeature test（画面テスト）に`System Spec`を使ってみた。
javascriptのテストをやりたくて。
既にRspecは導入済みの前提。
`System Spec`については下記が詳しい。
- [rspec\-rails 3\.7の新機能！System Specを使ってみた \- Qiita](https://qiita.com/jnchito/items/c7e6e7abf83598a6516d)

#### Dockerfile
chromedriver-helperをgemでインストールしてもエラーが出て使えないよう。
Dockerfileで、`web`コンテナに`chromedriver`とheadlessのChromeをインストールする。

```
FROM ruby:2.5.1
RUN apt-get update -qq && apt-get install -y build-essential libpq-dev unzip && \
  CHROME_DRIVER_VERSION=`curl -sS chromedriver.storage.googleapis.com/LATEST_RELEASE` && \
  wget -N http://chromedriver.storage.googleapis.com/$CHROME_DRIVER_VERSION/chromedriver_linux64.zip -P ~/ && \
  unzip ~/chromedriver_linux64.zip -d ~/ && \
  rm ~/chromedriver_linux64.zip && \
  chown root:root ~/chromedriver && \
  chmod 755 ~/chromedriver && \
  mv ~/chromedriver /usr/bin/chromedriver && \
  sh -c 'wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -' && \
  sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list' && \
  apt-get update && apt-get install -y google-chrome-stable
...
```

#### rails_helper
`Capybara.register_driver`、`Capybara.javascript_driver`の記述は不要。

```rb
# rails_helper.rb
...
require 'capybara'
...

RSpec.configure do |config|
  ...

  config.include Devise::Test::IntegrationHelpers, type: :system

  config.include Warden::Test::Helpers
  config.after :each do
    Warden.test_reset!
  end

  config.before(:each) do |example|
    if example.metadata[:type] == :system
      driven_by :selenium, using: :headless_chrome, screen_size: [1280, 800], options: { args: ["headless", "disable-gpu", "no-sandbox", { "lang" => 'ja-JP' }] }
    end
  end
end
```

#### login_asメソッドでエラー
`login_as(@user, scope: :user)` で `uncaught throw :warden` エラーが出る。
ScreenShotをよく見ると、recordがactiveじゃないよう？
作成したUserモデルが`confirmable`の場合、`confirmed_at`に日付を入れてactiveにする必要がある。

![failures_r_spec_UncaughtThrowWarden.png](https://qiita-image-store.s3.amazonaws.com/0/30951/aad93544-db39-2588-1bce-58cbaae68079.png)


参考
- [「Selenium::WebDriver::Error::WebDriverError: unable to connect to chromedriver 127\.0\.0\.1:9515」または「Selenium::WebDriver::Error::UnknownError: unknown error: cannot find Chrome binary」のエラーに対応する \- Qiita](https://qiita.com/kozy10/items/49fb49da1b12a410362a)
- [Headless ChromeをDocker上で動かして、E2Eのテスト \- Qiita](https://qiita.com/hoshitocat/items/c48bfdce867fc852e829)
- [Docker上でSystem Specが失敗する \- 料理とソフトウェアは似ている](https://commis.hatenablog.com/entry/2018/11/16/171608)
Java11でJAXBContextなどを含むシステムプロパティが使えなくなったメモ

時間もかかって結構大変だったので備忘録。

開発中に、今まで動いていたプロジェクトのJavaのバージョンを11にアップデートするという話があった。

結論から言うと、下記のようなメッセージを含むエラーが延々と出て動かなくなった。

JAXBContext cannot be resolved
The import javax.xml.bind cannot be resolved

これ以外のエラーもあったけど、要は javax.xml.bind などの今まで使えていたライブラリが突然使えなくなっていた。

# 環境

Java11(jdk-11.0.1)
Spring Tool Suite 3.9.6.RELEASE

# 解決方法

※Mavenのpom.xmlでライブラリを管理している場合のやり方。

pom.xmlに下記を追加


```
<dependency>
    <groupId>javax.xml.bind</groupId>
    <artifactId>jaxb-api</artifactId>
    <version>2.3.0</version>
</dependency>
<dependency>
    <groupId>org.glassfish.jaxb</groupId>
    <artifactId>jaxb-runtime</artifactId>
    <version>2.3.0</version>
    <scope>runtime</scope>
</dependency>
<dependency>
    <groupId>javax.activation</groupId>
    <artifactId>javax.activation-api</artifactId>
    <version>1.2.0</version>
</dependency>
```
見つからないといわれているライブラリを自力で用意する必要がある。

# Oracle JDK 11 のリリースノート

OracleのJDK 11 Release NotesにRemoved Features and Optionsという項目があった。
いくつかのシステムプロパティがJava11から使えなくなるということらしい。

↓ 自分に関係のあった辺りをコピペ。(赤字が自分が怒られていたライブラリ)

>In addition, the following system properties are no longer applicable due to the the removal of the Java EE and CORBA modules:

>com.sun.xml.internal.ws.client.ContentNegotiation
com.sun.xml.internal.ws.legacyWebMethod
<font color="Red">javax.xml.bind.context.factory
javax.xml.bind.JAXBContext</font>
javax.xml.soap.MetaFactory
javax.xml.ws.spi.Provider
jaxb.fragment
jaxb.noNamespaceSchemaLocation
jaxb.schemaLocation
jaxb.formatted.output
jaxb.encoding


リリースノートに全容が書かれています。

■ リリースノート
https://www.oracle.com/technetwork/java/javase/11-relnote-issues-5012449.html

■ Removed Features and Options の項目
https://www.oracle.com/technetwork/java/javase/11-relnote-issues-5012449.html#Removed

mail.mimeなど他にも色々無くなっている。

ここで削除されたライブラリを今まで使っていたプロジェクトは、用意無しにJava11にアップデートすると、当然エラーが発生するという事だった。


# 参考

前述したエラーを解決するために(その時は原因も分からなかった)模索していて見つけたページ

https://stackoverflow.com/questions/43574426/how-to-resolve-java-lang-noclassdeffounderror-javax-xml-bind-jaxbexception-in-j

https://github.com/authzforce/restful-pdp/issues/4
AWSでコンテナ使うならロードマップを確認しておこう！

AWSのコンテナ関連サービス(ECS, ECR, Fargate, EKS)について、ロードマップがGitHubで公開されています。

:octocat: GitHub
https://github.com/aws/containers-roadmap

AWSでよくある話ですが、自分が使いたいサービスの開発ステータスについて、簡単に知るすべがありません。
使いたいサービスについて進捗がわからないので、自前で実装したらマネージドサービスとしてリリースされて、「まじか...:sweat:」となるパターンが多々ありました。

そんな事情を汲んでか、コンテナ限定とはいえ**ロードマップが公開されるのはユーザーとしてはうれしい流れ**であると思います。

## ロードマップ

GitHub Projectsで管理されており、実にシンプルな構成になっています。
Issueを開いて、:thumbsup:と:sparkling_heart: のリアクションからユーザの期待値もわかります。

![スクリーンショット 2018-12-13 11.46.52.png](https://qiita-image-store.s3.amazonaws.com/0/18114/e5b9a3f1-f965-96b8-9f49-1d8997c8e41e.png)

## まとめ

AWSでコンテナ使うならロードマップを確認しておこう！という話でした。

**EKS の東京リージョン対応がもうすぐ来るらしいぞ！**　みたいなことがパブリックの場で共有されているのはうれしい:grin:ですね。

New EKS region: Tokyo
https://github.com/aws/containers-roadmap/issues/36

自分が欲しい機能のIssueが切られたら、:thumbsup: つけて開発の優先度をあげてもらいましょう！
React-Native-vector-iconsで使えるアイコン一覧

React NativeでFontAwesomeのアイコンを使おうとしたら
使えないアイコンもあったので一応使えるアイコン一覧ページを貼っときます。

#react-native-vector-iconsアイコン一覧
[react-native-vector-icons directory](https://oblador.github.io/react-native-vector-icons/)

<img width="1305" alt="Screen Shot 2018-12-06 at 12.50.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/252667/10c04953-0be7-fd92-f3b9-87cd5a2bef22.png">


念の為、使い方も記載。

##install
```terminal
npm install --save react-native-vector-icons
npm install
```

##import
今回は「Font Awesome」を使う
※使うアイコンフォントによって/FontAwesomeを変えます。

```javascript:App.js
 import Icon from 'react-native-vector-icons/FontAwesome';
```

##アイコンを使う
```javascript:App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';


export default class App extends React.Component {
  render() {
    return (
      <View style={{ flex:1, alignItems: 'center', justifyContent:'center' }}>
        <Icon name="home" size={50}/>
      </View>
    );
  }
}
```
![Screen Shot 2018-12-06 at 12.45.41.png](https://qiita-image-store.s3.amazonaws.com/0/252667/8a9a278f-e9dc-94de-4ee0-f91c19deea36.png)

こんな感じです。

###参考ページ
ありがとうございました。
[ReactNativeでFontAwesomeを使う](https://qiita.com/yasu_yyy/items/8ab627716314bdfdcb59)
日本語以外でwebを確認するときのブラウザ言語設定(for Mac)

webページを日本語以外の言語で作成したときに、ブラウザで確認するときの言語設定のメモ。


🍎→「システム環境設定」→「言語と領域」
<img width="300" alt="スクリーンショット 2018-09-28 午後0.39.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/252667/31ac3053-ec2a-903a-7970-fc891836f918.png">


<img width="654" alt="スクリーンショット 2018-09-28 午後0.40.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/252667/1db06e52-7f1c-8f74-8aae-cc2dfc4f3ea4.png">
言語を追加したいときは、左下の+を押して言語選択。
優先する言語をスライドして変更。

✗を押すとポップアップで、再起動するか出てくるので、再起動する。

<img width="483" alt="Screen Shot 2018-12-06 at 12.10.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/252667/63255ae1-ff5b-c22c-7e7d-f891de7c35da.png">

指定した言語に変わってたら成功。
raspberry pi 1でtensorflow lite その5

#概要

raspberry pi 1でtensorflow liteやってみた。
kerasモデルからtfliteファイルを作ってみた。
ラズパイで、実行。
データセットは、xor.

#Makefileを書く。


```
CXXFLAGS ?= -I../tensorflow -I../tensorflow/tensorflow/lite/tools/make/downloads/flatbuffers/include
LDFLAGS ?= -L../tensorflow/tensorflow/lite/tools/make/gen/rpi_armv6l/lib

.PHONY: all clean

all: lite2

lite2: main.cpp
	g++ --std=c++11 main.cpp -O2 $(CXXFLAGS) $(LDFLAGS) -ltensorflow-lite -lstdc++ -lpthread -ldl -lm -o lite2

clean:
	rm -f lite2

```

#Makeして、実行。

```
#include <vector>
#include <chrono>
#include <iostream>
#include "tensorflow/lite/model.h"
#include "tensorflow/lite/interpreter.h"
#include "tensorflow/lite/kernels/register.h"
#include <iostream>
#include <fstream>
#include <stdlib.h>
#include <math.h>
using namespace std;

bool is_error(TfLiteStatus const & status) 
{
  	return status != kTfLiteOk;
}
int main(int argc, char const * argv[]) 
{
    std::string a = "sin_model.tflite";
    TfLiteStatus status;
    std::unique_ptr<tflite::FlatBufferModel> model;
    std::unique_ptr<tflite::Interpreter> interpreter;
    std::cout << "0: Loading model: " << a << std::endl;
    model = tflite::FlatBufferModel::BuildFromFile(a.c_str());
    if (!model) 
	{
      std::cerr << "0: Failed to load the model." << std::endl;
      return -1;
	}
    std::cout << "1: The model was loaded successful." << std::endl;
	tflite::ops::builtin::BuiltinOpResolver resolver;
    tflite::InterpreterBuilder(* model, resolver)(& interpreter);
	std::cout << "2: interpreter was build successful." << std::endl;
    status = interpreter->AllocateTensors();
    if (is_error(status)) 
  	{
      std::cerr << "2: Failed to allocate the memory for tensors." << std::endl;
      return -1;
  	}
	std::cout << "3: The model was allocated successful." << std::endl;
	ofstream fout("pred.csv");
    float * in = interpreter->typed_input_tensor<float>(0);
    float * out = interpreter->typed_output_tensor<float>(0);
	fout << "x,y,p" << endl; 
	int i;
	double x, 
		y;
	double pi = acos(-1.0);
	for (i = -20; i < 20; i++)
	{
		x = (double) i / 6;
		y = sin(x);
		in[0] = x;
		status = interpreter->Invoke();
		if (is_error(status)) 
    		{
    		std::cerr << "3: Failed to invoke the interpreter." << std::endl;
    		return -1;
    		}
   		std::printf ("%2.2f\n", out[0]);
		fout << x << "," << y << "," << out[0] << endl;
	}
	cout << "ok" << endl;
	fout.close();
	return 0;
}

```

#結果

```
0,1 = 0.97118
1,0 = 0.971399
0,0 = 0.0115943
1,1 = 0.0372914
```

以上。
サロゲートキー



色々と論争はあるようだが、今回はそのサロゲートキーというものについて調べてみた。

# サロゲートキーの特徴

### 業務上は意味のないキーを持つので、容量を余分に使う。

ID項目を１つ追加しても、外部参照で複合主キーを追加したほうが容量使うことになるため、全体としては利点となっている。

### テーブル間の依存関係が薄くなる。

ナチュラルキーだと主キーを変更したら、関連するテーブル全ての変更が必要になる。
サロゲートキーを使用していたら、連携はIDなので変更がない。

### 複合主キーのテーブルに比べSQLが簡潔になる
### 外部参照しているときに、参照先のエンティティが何者かわかりにくい。

他のテーブルと繋がっていることは把握できるが、それ以上のことは外部テーブルを参照する必要がある。
ナチュラルキー：年度、出席番号、性別
サロゲートキー：生徒_ID
１つのテーブルでは把握しにくいだけで、全体でみればサロゲートキーの方が個人的にはリレーションがわかりやすいため見やすい

### アプリケーションの画面間引継ぎ情報や実装などを統一できる。
外部キーとして使用しているテーブルも同じ行を見ているテーブルとして把握できる。
ナチュラルキーであると、テーブルの検索に使用した複合主キーを他のテーブルも同じ検索条件で検索が必要
サロゲートキーであると、検索より取得したIDで他のテーブルを検索できる

### JOINのときにUSINGを使用できない

### 主キーにしか設定できない制約がDBMSにあった場合、サロゲートキーが主キーとなるため設定できない。
	


# ナチュラルキーとしての利点

主キーに設定した項目は個別にインデックスや制限(NOTNULLやUNIQUE）を設定しなくてよい
パッと見でデータ構造が把握しやすい

# 複合主キーが氾濫していると

SQLが複雑になり、バグの温床になる
変更による複雑なSQLの解析やテーブルの改修が発生

# サロゲートキーを使うべき時
- 主キーの値が使いまわされる場合
- 主キーの体系が変化する場合
- 複合主キーによるカラムが３つ以上ある、かつ、そのカラムでリレーションする場合。

## 前提の知識
###ナチュラルキー（自然キー）とは

- キーそのものに意味を持っている
- 業務的にそのテーブルをユニークにするキー

### サロゲートキー（代理キー）とは

- システム的に一意な値を取る（オートインクリメントやUUIDなどを使用）
- PKとしているテーブルのPKのこと

### 複合主キーとは

- 行を特定するための主キーが複数必要であるもの

### UUID

- 採番やオートインクリメントと同じ目的。
- その枠内で一意ではなくて、全体で一意にできる。

### クラスター化インデックス

- 各テーブルのメインとなるインデックス。
OLE Object Problem 

アクセスでツボにはまったので、この記事を書くことにしました。


#きっかけ

VBAでアクセスのデータベースに保存した、画像ファイルをEXCELに出力しようとして、
OLE　OBJECTの読み込み不良が発生した。

#諸悪の根源

通常のファイル
![無題2.png](https://qiita-image-store.s3.amazonaws.com/0/212914/518f7891-e793-5777-7cd7-59cbe224604e.png)

問題のあったファイル
![無題1.png](https://qiita-image-store.s3.amazonaws.com/0/212914/b2966d04-e801-c06f-af4e-2c2948aa6d27.png)


ビットマップを開く際に、７８バイト分の無駄なヘッダがあり、
これが原因で画像を開くことが出来なかった。

#参考記事

https://social.msdn.microsoft.com/Forums/en-US/0eb1a12c-503d-4d46-9395-99f63c3886ee/ole-object-problem-with-vbnet?forum=adodotnetdataproviders

http://tokusan-sk49.cocolog-nifty.com/blog/2008/05/olebmp_access20_ec6c.html

https://teratail.com/questions/163485
2018年 SREを立ち上げてみた話

この記事は、[mediba Advent Calendar 2018](https://adventar.org/calendars/3315) の12日目です。

## 注記

この記事は mediba 社に在籍していたときの記事です。
OKWAVE へ入社した際も立ち上げたので、いつか書きます。

## ご挨拶

こんにちは。medibaのインフラストラクチャー部に所属している山下(やまぴー)です。
(GMOのぴーやまさんとは別人です。)
10年くらいエンジニアやっていて、9.5年くらいはインフラエンジニアしてます。
ギリギリ20代(俗に言うアラサー)です。

今回、SREチームを立ち上げて1年くらい経つので書いてみました。

## 発端

medibaにはいくつものサービスがあり、システムがあります。
そのサービスたちを横断的に見てなにか役に立てないかな？という思いからSREチームを作ってみました。

## チームの目標とやったこと

実は「これをやるぞ！！」というスローガン的なものはカッチリ立てていません。
「こうしたい！」というより「こうありたい！」という思いが強かったので、ミッションとしては以下を掲げています。

- 稼働率を高く維持する
- OSまわりのセキュリティちゃんとしようぜ
- おせっかいしようぜ

上記に関連する施策をいくつか作っていますが、SREってどちらかというとゴールってないものなのかなって思います。

### 稼働率を高く維持する

これはGoogleのSREでも定義されていることでした。
SLA/SLOを定めてそこに向かっていろいろやる、というやつですね。
今回はそこは重視せず、稼働率を高くするために今イケてないところ探して潰してこうぜをやってみました。

例えば

- 各サービスのサーバーに入っていろいろ見て、イケてないとこ探してみようよ
  - Apacheの設定(MaxConnectionとかKeepaliveとか)が現状に合ってない
  - おいおいrootでログインできちまうぞ(もちろんSecurityGroupで絞ってはいますが…)
  - おいおいログがローテされてないぞ…
  - ムダなEBSあるぞ
- 正しく監視されてるんだっけ？
  - 見てみると足りてない項目が…
  - 動くはずのないデーモンが監視されていて、ずーっとアラートあがってた

というような、システムの課題を見つけて開発エンジニアと一緒に対応していきました。

### OSまわりのセキュリティちゃんとしようぜ

キャリアのサービスを担っているので、セキュリティにはかなり気を使っています。
EC2インスタンスの操作ログに関しても取得する必要があり、その仕組みの構築などを行いました。
OS標準のauditdを使用し、KinesisストリームでS3に叩き込むというものです。

当初td-agentでやろうと思いましたが、せっかくAWS使ってるのでKinesis使ってみようかなーと思った次第です。

(他社さんでどういうことやってるか知りたい…)

### おせっかいしようぜ

これを書きたかったんですよね。
実はこの方針は隠れミッションでした。
もともと、自分としては **「インフラエンジニアたるものおせっかい精神がないとあかん」** という思いの持ち主です。

- 障害の香り(実際には悲鳴ですが)を嗅ぎつけて開発エンジニアと一緒に対応したり
- 自分宛てではないGithubのプルリク通知を見て、勝手にコメントしてみたり
- 技術的な問い合わせに関して一緒に考えたり
- この仕組みはちょっとイケてないし、一緒に刷新していかない？
などなど。

こうしていくことで、サービスに対する愛着がわいたり、開発エンジニアとの距離が近くなるんじゃないかなという意図です。
(あと新卒エンジニアの教育の一環もあったり)

とにかく、今あるものをより良くついでに楽しく仕事しようぜっていうやつですね。
何よりも「エンドユーザのみならず、一緒に働く仲間の役に立つのが好き」という精神のもとにSREって成り立ってるんじゃないかな、と自分では思っています。

## 立ち上げて苦労したこと

### 何すりゃええねん

自分としても割とふわっと「SREやりたいんですよね」って言ってしまったので、当初はふわふわしていました。
そこで、部内のDevOpsチームやAWSインフラチームの人に手伝ってもらい、なんとか形になってきたような気がします。

自分自身、割と概念が主だっているので同僚にはアドバイスをよくもらいました。

### 忙しい

SREとは別に、ミッションクリティカルなサービスのインフラ担当だったり、オンプレ周りのベンダーコントロールなどしていたので、最初はかなりてんてこ舞いでした。
チームのメンバーが率先して動いてくれた & なんとなく仕事の振り方がわかってきたので、進めていくうちに余裕が出てきました。

## まとめ

やっぱり人の役に立って、なおかつそれがチームとして体感できるのはすごくいい経験でした。
SREって固定化された概念ではないと思うんですよね。

自分たちでいろいろと決めてTryしていくのも含めて、SREとしての働き方なのかなという気がしました。
Chart.jsのグラフをvue.jsを使って書いてみた2

[Chart.jsのグラフをvue.jsを使って書いてみた1](https://qiita.com/kzk_/items/6b08cba77b2a7a020cbb)
前回作ったもの
https://jsfiddle.net/dqnsan/5zrf6whv/

これ見直して思ったけど全くvue.jsを活かしてなくて草
今回からちゃんとするから、、、

というわけで、
ここにボタンを押下したら要素が追加されるようにしていきます。

##inputの追加

グラフは
・label
・backgroundColor
・data
の三つで出来ているので
それぞれを追加する処理を書いていきます。

vueのdataに下記を追加

```js

        data: {
            nameSet: 'ビタミンZ',
            numSet: 10,
            colorSet: '#FFFF00',
            chartLists: [
                { name: 'たんぱく質' ,color: '#2ecc71', data: 10 },
                { name: '炭水化物' ,color: '#3498db', data: 30 },
                { name: 'ビタミンA' ,color: '#95a5a6', data: 3 },
                { name: 'ビタミンB' ,color: '#9b59b6', data: 17 }
            ]
        },
```

そしてやっとvueらしいことをしていきます。
inputをhtmlに追加して「v-model」でデータバインディングをする。

```html
    <form>
        <label>
            栄養名<input type="text" name="" v-model="nameSet" placeholder="例)ビタミンA">
        </label>
        <label>
            数値<input type="number" name="" v-model="numSet">
        </label>
        <input type="color" name="" value="" v-model="colorSet">
        <input type="button" value="追加">
    </form>
```


これはブラウザによって使えないことあるのでchromeで見てね！

```html
<input type="color" name="" value="" v-model="colorSet">
```


これでvueに追加したdataの中身が各種inputに入るようになりました。
ブラウザ上でinputの値を変更したらdataの中の値も変わりますね。


それではグラフに追加する処理を書いていきます。

```js

            addChartList: function () {
                //forEachの中ではthisの対象が変わるためselfを使う
                self = this;

                //configの中にinputへ入力して値をpush
                config.data.labels.push(this.nameSet);
                config.data.datasets.forEach(function (dataset) {
                    dataset.backgroundColor.push(self.colorSet);
                    dataset.data.push(self.numSet);
                });

                //Chart.jsに存在するupdate関数を使用
                chart.update();

                //グラフに追加したらinputを初期状態に戻す
                this.nameSet = 'ビタミンZ';
                this.numSet = 10;
                this.colorSet = '#FFFF00';
            }
```

そしてhtmlにclickしたらイベントが発火するように追加

```html
        <input type="button" value="追加" @click="addChartList()">
```


こんな感じでしょうか？

vueじゃなかったら「addChartList」の引数に値を渡して追加する感じだと思います。

今回の結果
https://jsfiddle.net/dqnsan/5zrf6whv/6/


次回はバリデートか削除の追加かな、、、
GitLabからRocket.Chatへの通知連携

## 概要
GitLabからhookし、結果をRocket.Chatのチャンネルへ通知する。
公式：[Integration GitLab](https://rocket.chat/docs/administrator-guides/integrations/gitlab/)を参考に作業を進める。

## 環境
- GitLab Community Edition 11.0.5
- Rocket.Chat 0.60.3

## 前提
Rocket.Chatの管理者権限を持っていること。

## 手順
1. Rocket.Chat側のIncoming WebHookの設定
1. GitLabのIntegrationsの設定

## Rocket.Chat側のIncoming WebHookの設定
管理者権限を持つアカウントでログインする。
メニューから管理＞サービス連携と遷移し、「新しいサービス連携」ボタンを押下する。

Incoming WebHookを選択する。
![sss.png](https://qiita-image-store.s3.amazonaws.com/0/127161/e955e177-5eef-d66d-7149-b6a18a52c398.png)

各種設定を行い、「変更を保存」ボタンを押下する。
※Scriptは[公式提供のJSファイル](https://github.com/malko/rocketchat-gitlab-hook/blob/master/gitlab-rocketchat.hooks.js)から持ってくる
![無題の画像.png](https://qiita-image-store.s3.amazonaws.com/0/127161/f9692b90-470e-1f9c-1c40-0fc8ffd8d4e7.png)

Webhook URLとTokenを控えておく。
※ページを再読み込みしたらでてくる
![webghook.png](https://qiita-image-store.s3.amazonaws.com/0/127161/65dfbe17-9976-c50d-3a15-f12dd689a260.png)

## GitLabのIntegrationsの設定
対象のプロジェクトを開く。

Setting ＞Integrationsを押下する。
![Integrations.png](https://qiita-image-store.s3.amazonaws.com/0/127161/d056cb14-4c76-a595-0dd9-c0eb16c1989a.png)


さきほど控えたWebhook URLとTokenを入力する。
![url.png](https://qiita-image-store.s3.amazonaws.com/0/127161/229ab768-f61a-3597-c567-678585f53365.png)


トリガーとなる処理を選択する。

例）今回はパイプラインを選択
![trigger.png](https://qiita-image-store.s3.amazonaws.com/0/127161/2a0947dd-8f50-1aa7-bfed-fc20f3cb2fdb.png)


Add webhookを押下する。
場合によってはEnable SSL verificationのチェックを外す。
![addwebhook.png](https://qiita-image-store.s3.amazonaws.com/0/127161/d767c614-ee8f-4242-32dd-34b547bce745.png)


## 確認
設定内容が反映されていることを確認する。
Testから対象のトリガーを押下する。
![test.png](https://qiita-image-store.s3.amazonaws.com/0/127161/8f201c60-55f2-61ab-99d9-9d312ecf1498.png)

Rocket.Chatへの通知を確認できる。
![chat.png](https://qiita-image-store.s3.amazonaws.com/0/127161/5311b8bb-fc42-03dc-d51d-1019dcde9303.png)