OmniAICreator/Qiita-1.07M huggingface dataset:
【Android】DroidConSF 2017のMake Your Build Great Againで発表されたビルド高速化Tips

DroidConSF 2017 (.droidconSF) の「Make Your Build Great Again」で発表されたビルド高速化Tipsの紹介になります。

## はじめに
- スライドは[Speaker Deck](https://speakerdeck.com/jaredsburrows/make-your-build-great-again-droidconsf-2017)に公開されてます。
- 動画は近日中に公開予定だそうです。
  - （12/6追記）公開されました https://www.youtube.com/watch?v=rvwAlbtbtmM
- 国内の[.droidconSF 2017報告会](https://mixi.connpass.com/event/70645/)でも「[Build高速化の話](https://speakerdeck.com/kobitokaba/buildgao-su-hua-falsehua)」として発表がありました。
非常に役たちそう、かつコードをコピーして使いたかったので記事としてまとめました。
- 各Tipsをやることでなぜ高速化するかや注意点などは上記スライドを参照してください。
- [【Android】Google I/O 2017のSpeeding up your Android Gradle buildsで発表された10のTips](https://qiita.com/rkowase/items/808064f16272e131be63)と被っている内容は省略しています。

## Tips

### gradle.properties最適化

#### Gradle specific
```gradle.properties
# Gradle daemon有効化
org.gradle.daemon=true

# daemonのヒープサイズを増やす
org.gradle.jvmargs=-Xmx2048m

# 並列ビルド有効化
org.gradle.parallel=true

# Configure on Demand有効化
org.gradle.configureondemand=true

# キャッシュ有効化
org.gradle.caching=true
```

#### Android specific
```gradle.properties
# ビルドキャッシュ有効化
android.enableBuildCache=true

# 新しいDexコンパイラ有効化
android.enableD8=true
```

### テスト分割実行
```java
tasks.withType(Test) {
    def maxCount = gradle.startParameter.maxWorkerCount
    maxParallelForks = (maxCount < 2) ? 1 : maxCount / 2
    forEvery = 100
}
```

### 参照するリポジトリを減らす
```java
repositories {
    jcenter()
    mavenCentral()
    maven{url "https://plugins.gradle.org/m2/"}
    google()
    maven{url "https://jitpack.io"}
}
```
↓

```java
repositories {
    maven{url "https://plugins.gradle.org/m2/"}    
    google()
}
```

### インクリメンタルビルドを有効化する
```java
tasks.withType(JavaCompile) {
    options.incremental=true
    options.fork=true
}
```

### レガシーなMultiDexは避ける
```java
minSdkVersion 19
```
↓

```java
minSdkVersion rootProject.hasProperty("lollipop") ? 21 : 19
```

### CIでpre-dexライブラリを無効化する
```java
android {
    dexOptions {
        preDexLibraries = !project.hasProperty("ci")
    }
}
```

## 補足
間違ってる点あればご指摘ください。

## 参考

Make Your Build Great Again (DroidConSF 2017) // Speaker Deck
https://speakerdeck.com/jaredsburrows/make-your-build-great-again-droidconsf-2017

Build高速化の話 // Speaker Deck
https://speakerdeck.com/kobitokaba/buildgao-su-hua-falsehua

【Android】Google I/O 2017のSpeeding up your Android Gradle buildsで発表された10のTips - Qiita
https://qiita.com/rkowase/items/808064f16272e131be63

.droidconSF 2017報告会 @ミクシィ - connpass
https://mixi.connpass.com/event/70645/
Raspberry Pi Zero Wにヘッドレスインストールする

Raspberry Pi Zero WにRaspbianをヘッドレスでインストールする手順です。
インストールにはNOOBSを使い、VNCで接続して行います。
なお、インストールが完了した時点でSSHが有効になるように設定を行います。

# microSDカードのフォーマット
SDカードアソシエーションのWebサイトから「[SDメモリカードフォーマッター](https://www.sdcard.org/jp/downloads/formatter_4/)」をダウンロードし、microSDカードをフォーマットしておきます。以前のバージョンでは論理サイズ調整という項目がありましたが現行バージョンにはありません。フォーマットオプションを選びボリュームラベルを削除してフォーマットします。

![スクリーンショット 2017-11-25 22.07.11.png](https://qiita-image-store.s3.amazonaws.com/0/129243/d1ed550a-eab2-fc2c-eea2-84434f1805fb.png)

# NOOBSのダウンロード
Raspberry pi財団のサイトよりNOOBSをダウンロードします。
https://www.raspberrypi.org/downloads/noobs/

![Screenshot-2017-11-26 Download NOOBS for Raspberry Pi.png](https://qiita-image-store.s3.amazonaws.com/0/129243/157d091a-2571-282a-2023-0a13a450c5f7.png)
2017年11月26日現在、最新のバージョンは2.4.4となっています。

なお、ダウンロードが遅い場合には日本国内のミラーからダウンロードを行うことをオススメします。
JAIST（北陸先端科学技術大学院大学）
http://ftp.jaist.ac.jp/pub/raspberrypi/NOOBS/images/NOOBS-2017-09-08/

Raspbian Repository Mirrors
https://www.raspbian.org/RaspbianMirrors

# 圧縮ファイルの展開とコピー
ダウンロードしたNOOBS_v2_4_4.zipを展開し、ファイルをすべてmicroSDへとコピーします。

# VNCの有効化
コピーしたファイル（microSDカードのルートディレクトリに）`recovery.cmdline`があるので、`quiet`を`vncinstall`へ書き換えておきます。この変更をしておくことで起動したNOOBSに対してVNCで接続することが可能になります。

変更前
`runinstaller quiet ramdisk_size=32768 root=/dev/ram0 init=/init vt.cur_default=1 elevator=deadline`

変更後
`runinstaller vncinstall ramdisk_size=32768 root=/dev/ram0 init=/init vt.cur_default=1 elevator=deadline`

# 無線LANの設定
Raspberry Pi Zero WにはLANポート（Ethernetポート)がないので予め無線LANの設定をしておきます。

Raspberry Piの無線LANをmicroSDで簡単に設定するためのツールを作った
https://qiita.com/mascii/items/a43d71572e1919e56398

こちらの記事（ならびにツールを）参考にさせていただき`wpa_supplicant.conf`を作成し、microSDカードのルートディレクトリに保存しておきます。`wpa_supplicant.conf`が正しく設定されていればNOOBSが起動した時点でWi-Fiに接続されます。

# SSHを有効にする
Raspbian 2016-11-25以降のバージョンではSSHがデフォルトで無効になっています。
http://www.raspi.jp/2016/12/raspbian-2016-11-25-release/

事前にSSHを有効化しておかないとRaspbian起動後に接続できなくなってしまうので予め準備をしておきます。

microSDカードにコピーしたファイルの`os¥Raspbian¥partition_setup.sh`を編集し`echo "ssh" >/tmp/1/ssh`を追加します。

```
echo "ssh" >/tmp/1/ssh #この行を追加しておく

umount /tmp/1
umount /tmp/2
```

# Raspberry Piを起動してVNCで接続する
microSDカードをRaspberry Pi Zero Wに挿してから起動します。
問題なく設定できていればRaspberry Piの5900ポートに対してVNC接続が可能になっています。

![スクリーンショット 2017-11-26 10.39.47.png](https://qiita-image-store.s3.amazonaws.com/0/129243/6a9e9179-add7-66a8-30a0-2df3d9ae2362.png)
Raspbianにチェックを入れ、言語は日本語を選択、インストール(i)をクリックします。

![スクリーンショット 2017-11-26 10.41.21.png](https://qiita-image-store.s3.amazonaws.com/0/129243/e3b6c1e7-f3eb-e0f5-8f6b-449bf69f3748.png)
インストールを続行する場合には「はい(Y)」をクリックします。

![スクリーンショット 2017-11-26 10.41.31.png](https://qiita-image-store.s3.amazonaws.com/0/129243/273c79b8-1099-e648-471d-5962acdddf30.png)
インストールには20分〜30分程度かかります。microSDカードの性能によってインストールにかかる時間が変わります。

![スクリーンショット 2017-11-26 11.02.37.png](https://qiita-image-store.s3.amazonaws.com/0/129243/9377d33b-1159-a100-2121-fa2827611296.png)
インストールが完了し、「OK」をクリックするとVNCは切断されます。
（NOOBSに対してはVNCの設定をしましたが、Raspbianに対してはVNCの設定をしていないためRaspbianが起動するとVNCでは接続できなくなります。)

# ssh接続
ユーザー名:`pi`、パスワード:`raspberry`でsshが可能になっているはずです。

# 参考
https://www.slideshare.net/Akkiesoft/raspberry-pinoobs
https://www.raspberrypi.org/forums/viewtopic.php?t=141559#p1077281
Japan IT Week 秋にみるクラウドサービスの向かう先

11月8日から10日まで幕張メッセにて開催されたIT専門の商談展「Japan IT Week 秋」。「クラウドコンピューティングEXPO」「Web&デジタルマーケティングEXPO」「店舗ITソリューション展」などさまざまなIT分野の展示会を開催しているITとしては国内最大級の総合展示会であるだけでなく、特別講演では「デジタルマーケティング最新動向」と題し、日本オラクル、日本アイ・ビー・エム 、アドビシステムズの幹部が登壇して、ITを活用したデジタルマーケティング分野において今後、重要となる領域についての講演なども行われました。これら講演から展示までの中でオンラインメディアで取り上げられた注目トピックをご紹介します。

※下記サイトからの転載。ビッグデータ・AIなどに関するトピックを毎週取り上げています。
[TechCrowd: https://www.techcrowd.jp/related/](https://www.techcrowd.jp/related/)


#[Oracle、IBM、Adobeが語るデジタルマーケティングの新潮流] (http://marketing.itmedia.co.jp/mm/articles/1711/22/news134.html)

ITmediaマーケティングの、Japan IT Week秋の特別講演のレポート記事です。日本オラクル、日本アイ・ビー・エム 、アドビシステムズの幹部が登壇して講演を行った特別講演「デジタルマーケティング最新動向」をレポートしています。

3社の講演で浮き彫りになったのは、現代のマーケティングでは、「アートとサイエンスの融合」「顧客を理解した質の高い体験の提供」「データと顧客インサイトを得るためのデータ基盤」の重要性が高まっていることとのこと。

日本アイ・ビー・エム インタラクティブエクスペリエンス事業部長の工藤 晶氏はIBMが考えるマーケティングにおけるAIの用途は、大きく「個客の理解」「個客との対話」「行動の最適化」の3つに分類できるとのこと。「Watson Personality Insight」では、人が書いた文章から性格、価値観、欲求（ニーズ）を分析し、チャットbot、アバター、ロボットを活用し、個別の対話から一人一人に合わせたオファーを提供する。
事例紹介でとりあげていた日本航空の「マカナちゃん」は、ハワイへの旅行を検討している人向けのチャットbotを使ったバーチャルアシスタントサービス。コールセンターから収集した質問への回答をWatsonが学習しており、旅行口コミサイトの「TripAdvisor」やソーシャルメディアとも連携している。また機械学習を活用したプログラマティック広告の入札最適化も実験を進めているようです。

アドビシステムズ 代表取締役社長 佐分利ユージン氏は、顧客体験の設計では「コンテキスト」「デザイン」「タイミング」「インテグレーション」に留意することがポイントと解説しています。
コンテキスト、すなわち顧客の立場を理解することは、デジタルでのエンゲージメントの切り札になります。顧客の立場に即した対話ができれば、顧客は自分のことを理解してくれていると実感できます。その顧客の心を動かすのはコンテンツ。さらに、企業から顧客へのアプローチでは、タイミングが体験の質を決定付け、これらを実現するためにシステムのインテグレーションはもちろん、組織やプロセスの統合も重要になると述べ、全ての部門間でKPIを共有することが重要と強調して講演をまとめています。


#[企業の販促活動を加速させる先端Webマーケティング – IT Weekレポート] (http://news.mynavi.jp/articles/2017/11/13/itweek_201711_marketing/)

マイナビニュースの、Japan IT Week 秋のレポート記事です。本記事では、「Web&デジタルマーケティングEXPO」にフォーカスして、注目を集めていたブースをいくつか紹介してくれています。

フロムスクラッチのブースでは、マーケティングプラットフォーム「b→dash」のデモを実施。同サービスは分散しているデータを統合し、専門的な知識がなくてもマーケティング業務を行うことのできるプラットフォーム。コンテンツの制作からシナリオの設計まで一気通貫で実行することができる。

ロックオンのブースでは、マーケティングプラットフォーム「アドエビス」の紹介を行っていたとのこと。「アドエビス」も導入実績が8,000社以上となったとのことで、複数のWeb広告を出している企業が、どの広告からどのようなユーザーが訪れ、どのルートからコンバージョンに至っているかといった分析を一気通貫で行うことができ、Web広告の効果を最大限に高めることができるとのこと。

アドテク企業のひとつとして知られているアドウェイズですが、楽天・アマゾン・ヤフーの人気商品の売り上げを調べることができる「Nint」の紹介などを行っていたようです。同サービスは、楽天・アマゾン・ヤフーの公開情報から、どんな商品がどの程度売れているか予測して、マーケットの分析を行うことができるサービス。ECモールの市場や競合のショップの分析をすることで、
売上アップや在庫最適化、商品トレンドのタイムリーな把握をサポートする。「スポーツ・アウトドア」「インテリア・家具・収納」「家電」といった業種ごと分析や、同業他社の売り上げ、販売構成、広告施策についても分析することができるとのこと。
楽天などでショップを展開している中小小売には便利な機能ですね。


#[次世代の"店舗改革"を支えるITソリューション - IT Weekレポート] (https://news.mynavi.jp/article/20171110-itweek_201711_tempo/)

マイナビニュースの、Japan IT Week 秋のレポート記事の中で、「店舗ITソリューション展」にフォーカスして、注目を集めていたブースを紹介しているものです。

セーフィーのブースでは、店舗の入り口を撮影しているカメラの映像から、人の出入りをカウントしてグラフで表示するソリューションのデモが行われていた。NECの顔認証技術「Neo Face」と連携したデモも実施されており、来店客数のカウントだけでなく、特定の顧客が来店した際に通知する機能を搭載しており、常連客に対するスムーズな案内が可能になるだけでなく、不審者の情報を登録しておけば、セキュリティ対策としても利用することができるとのこと。


#[Japan IT Week会場に突然現れた"教室" － Japan IT Week 秋 2017より] (http://news.mynavi.jp/articles/2017/11/24/neo/)

マイナビニュースの、Japan IT Week 秋の中でも、クラウド コンピューティング EXPOから、教室を模したブースとがひときわ目立っていたNTTネオメイトのプースをレポートしている記事です。

今回のNTTネオメイトのブースは、ブース全体が学校をイメージしたデザインとなっており、ブース内には、懐かしい机と椅子、ロッカー、黒板、三角定規などがレイアウトされ、加えて社員やコンパニオンが学生や先生の衣装を身に纏っていたとのこと。

ついのぞいてみたくなってしまいますね。
[Rails]テスト環境のdb:createができない

ユーザー認証が必要なwebサービスを構築してみようかと思って、
数年ぶりにRailsを触ってみたらさっそく詰まりましたので、詰まったポイントと解消方法です。

##今回実行した環境
OSバージョン: ubuntu(仮想環境)
Ruby: 2.1.2
Rails: 4.2.0

##bin/rake db:create RAILS_ENV=test　でエラー!!

```
$ bin/rake db:create RAILS_ENV=test
```

テスト用のデータベースを構築するために、上記のコマンドを打つのですが、エラーが出てなかなか進めませんでした…

###出力されたエラー

```
DEPRECATION WARNING: The configuration option `config.serve_static_assets` has been renamed to `config.serve_static_files` to clarify its role (it merely enables serving everything in the `public` folder and is unrelated to the asset pipeline). 
The `serve_static_assets` alias will be removed in Rails 5.0. Please migrate your configuration files accordingly. 
Web Console is activated in the test environment,
 which is usually a mistake. To ensure it's only activated in development mode,
 move it to the development group of your Gemfile:

    gem 'web-console', group: :development

If you still want to run it the test environment (and know
what you are doing), put this in your Rails application
configuration:

    config.web_console.development_only = false
```

gemを追加する指示が出ているので、従って以下をGemfileに追加します。

```rb:Gemfile
group :development do
  gem 'web-console', '~> 2.0'
end
```

これだけだと、まだエラーが全て解消しません……

```
NoMethodError: undefined method `last_comment' for #<Rake::Application:...>
```

とりあえず、ググっていたら参考にしている本の著者のブログを見つけました。

「最初の RSpec テストが失敗する場合」
https://www.oiax.jp/books/rails_kochiku_guide/first_rspec_example_failure.html

- Gemfile の末尾に `gem 'rake', '< 11.0'` という記述を加える
- ターミナルで `bundle update rake` コマンドを実行する

こちらを実行した上で、再度、テスト環境のデータベースを作成するコマンドを入力すると、成功しました！

以上、エラー対処の記事でした。
参考にしている本の関係上いまさら、rails4の話って感じもありますが、徐々にバージョンもあげつつ、開発を進めたいなぁという心境です。
TensorFlow＆KerasでのGPUメモリ使用率設定

下記のコードはKeras 2.0.9だとうまく動かない(2017/11/26時点)

```test_gpu.py
from keras.backend.tensorflow_backend import set_session
import tensorflow as tf

config = tf.ConfigProto(gpu_options=tf.GPUOptions(per_process_gpu_memory_fraction=0.6))
session = tf.Session(config=config)
tensorflow_backend.set_session(session)
```
[メモ] ラズパイの起動イメージファイル作成


# 概要
- ラズパイの起動イメージファイル作成する。
- 2つパーティション作って、1つ目をvfat(boot関係のファイルをコピー)、2つめをext4(rootfs)にして、`/boot/cmdline.txt`とか、`/etc/fstab`をうまく設定すれば、起動するはず。
- `dd`でイメージファイルを作成、losetupでオフセット指定して、ループバックデバイスとして、使用する。

# 環境
- Raspberry Pi 3 model B
- Raspbian: なんでもできるはず. 今回は、以下にてテスト。
    - `2017-09-07-raspbian-stretch.img`にて、イメージ作成作業
    - `2016-03-12-jessie-minibian`をSD焼いて、stretchにアップデートして、ソースとして使用。

# 手順
1. ソースディスクをマウントする(`/mnt/boot_src`と`/mnt/root_src`)

    ```bash:例
sudo mkdir /mnt/{boot,root}_src
sudo mount /dev/sda1 /mnt/boot_src
sudo mount /dev/sda2 /mnt/root_src
```
2. rootユーザにて作業<br>`sudo bash`


3. 以下、こんな感じ。

	```
	# イメージファイル
	IMG_FILE=/mnt/rpi_sd.img

	# イメージファイルを作成 768MBytes
	dd if=/dev/zero of=${IMG_FILE} bs=1M count=768

	# パーティション作成 1st:vfat / 2nd:ext4
	fdisk ${IMG_FILE}
	n
	p
	1
	8192
	93814
	n
	p
	2
	94208

	t
	1
	c
	t
	2
	83
	p
	w

	# イメージファイルの中身を見る
	fdisk -lu ${IMG_FILE}

	# (表示例)
	# pi@raspberrypi:~ $ fdisk -lu ${IMG_FILE}
	# Disk /mnt/rpi_sd.img: 768 MiB, 805306368 bytes, 1572864 sectors
	# Units: sectors of 1 * 512 = 512 bytes
	# Sector size (logical/physical): 512 bytes / 512 bytes
	# I/O size (minimum/optimal): 512 bytes / 512 bytes
	# Disklabel type: dos
	# Disk identifier: 0x8170d656
	# Device           Boot Start     End Sectors  Size Id Type
	# /mnt/rpi_sd.img1       8192   93814   85623 41.8M  c W95 FAT32 (LBA)
	# /mnt/rpi_sd.img2      94208 1572863 1478656  722M 83 Linux
	# pi@raspberrypi:~ $
	 


	# !!! 環境依存 !!!
	# それぞれのパーティションを /dev/loopX として、設定する。
	# Partition1は、Start 8192 で、Sectors=85623なので、こんな感じ
	losetup --offset $((512*8192))  --sizelimit $((512*85623))   --show --find ${IMG_FILE}
	# /dev/loop0 と表示されるはず

	# Partition2は、Start 94208 で、Sectors=1478656なので、こんな感じ
	losetup --offset $((512*94208)) --sizelimit $((512*1478656)) --show --find ${IMG_FILE}
	# /dev/loop1 と表示されるはず

	# それぞれフォーマット
	mkfs -t vfat -n boot /dev/loop0
	mkfs -t ext4 -L rootfs /dev/loop1

	# マウントフォルダを作って、マウント。
	mkdir /tmp/{boot,root}
	mount /dev/loop0 /tmp/boot
	mount /dev/loop1 /tmp/root

	# 
	# ファイルをコピーする
	cp -r /mnt/boot_src/* /tmp/boot/
	cp -a /mnt/root_src/* /tmp/root/

	# 必要あれば、以下を編集する。
	# /tmp/boot/cmdline.txt で root= の指定
	# /tmp/root/etc/fstab の ファイルシステムの指定

	# 
	sync

	# アンマウント
	umount /dev/loop{0,1}
	losetup -d /dev/loop0
	losetup -d /dev/loop1
	```

4. 作成した、`rpi_sd.img`をEtcherなどで、SDに焼いて起動を確認。
ReactNative入門② ~Hello Worldを出力する~

他のプログラミング言語と同じように最初は **Hello World** を出力してみましょう。

## Hello Worldを出力するコード
先にコードを見てみましょう。
`App.js`に記述すると、Hello Worldの出力が確認できます。

```jsx
import React, { Component } from 'react';
import { Text } from 'react-native';

export default class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}
```

## 何をしているのか
先程のコードが何をしているのかを説明していきます。
コードは`ES2015(ES6)`で記述します。

## 1,2行目
1,2行目では、`import`という記述があります。1行目では、「reactからReactとComponentをインポートする」という意味になります。2行目も同じようなものです。
インポートするには、クラスや関数をエクスポートしておく必要があります。つまり、ReactやComponent, Textはエクスポートされていることになります。
Componentは`{}`の中に入っていて、Reactはそのまま記述されてありますが、これはエクスポートに違いがあります。これについては、次の記述で`export default`に触れるので、そのときに説明します。
この時点では、エクスポートの方法が異なれば、import時の記述が異なると思っておけば大丈夫です。


## 4行目以降
4行目以降は、Componentを作成しています。Componentとは、Reactでも使われている考えで、部品を意味しています。
例えば、ボタンや、フォームなどをComponentとして作成してエクスポートしておき、必要な場所で、Componentをインポートして使いまわします。
ここでは、Textというコンポーネントを作成、描画する`HelloWorldApp`というクラスを定義しています。`render()`が画面への描画を担当します。

### exportについて
エクスポートには、`export default`と`export`があります。`export default`は文字通りインポートされるときのデフォルトになります。`export default`でエクスポートできるクラスや関数は１つになります。ファイル内に他のクラスや関数をエクスポートしたいときは、通常の`export`を使用します。
`import`と記述すると`export default`でエクスポートポートしたクラスや関数が対象になります。このクラスや関数を使用するには名前が必要です。なので、`import hoge`というようにインポートします。
最初のサンプルコードでは`import React`という記述がそうです。
サンプルコードで定義した、`HelloWorldApp`も`export default`なので、インポートの際は、`import HelloWorldApp`のように記述することになります。

`export`はデフォルトではないクラスや関数をエクスポートするときに使用します。以下のようなイメージです。

```js
export default class DefaultClass

export class SecondClass

export class ThirdClass
```

`export`でエクスポートされたクラスや関数は以下のようにインポートします。

```js
import { SecondClass, ThirdClass } from ~~~
```

サンプルコードでは、`Component`や`Text`が`export`でエクスポートされたものになります。
PRML 1.3節 モデル選択

良いモデルを見つけるためにはどうすればよいのか？

# この節で伝えたいこと
* 選んだモデルに対しての訓練集合に対する性能が良くても、未知データに対しては性能が良くないかも。
    * 下図の$M=9$みたいなもの。訓練集合に対してはピッタリだけど、未知データに対しては使い物にならなそう。
* データが十分にあるときは学習用集合・確認用集合(最も汎化性能の高いモデルを選択するためのデータセット)・テスト集合に分けて、選んだモデルの性能を評価するのがよくあるアプローチ。
* データが限られている場合
    * データを分割してローテションして評価する**交差確認法**
        * その中でもデータ数分分割するのが**LOO(leave-one-out)法**
    * 欠点は訓練を行う回数が分割した数に**比例して大きく**なってしまうこと
    * 複数の複雑さパラメータをもつ場合はその組み合わせも考える必要があるため**指数関数的に増えてしまう**
* 複数の複雑さパラメータをもっていたとしても訓練一発で良いモデルを選んでほしい
    * 「**情報量規準**」AICとかBICとか。。

## 1. 多項式曲線を例に
モデル選択→最も良いモデルはどれだろうか？:relieved:
![image.png](https://qiita-image-store.s3.amazonaws.com/0/156024/987a6435-1753-fa52-ce05-911a442f6506.png)
一番良さそうなモデルはM=3だと分かるが、これを導き出すアプローチとしては
①学習：各モデルに対して学習させ、その形を決める
②モデルの選択：確認用集合を用いてどのモデルの予測性能が良いかを比較する
③性能評価：②で選択した最良のモデルの性能を改めて評価する。
の順に行っていく。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/156024/035f617d-3670-ff97-89de-0d0315da548f.png)
十分な量のデータがあれば良い性能のモデルを導き出すことができる。
しかし、使えるデータは限られている:astonished:
→限られたデータで効率的に学習、評価を行いたい
→**交差確認法**
## 2. 交差確認法
![image.png](https://qiita-image-store.s3.amazonaws.com/0/156024/d9f33b84-7721-426f-bc88-2f2076909e5e.png)
評価する回数はSに比例して大きくなってしまうので注意が必要
交差確認法のなかでもSをデータの数にしたものを**LOO法**(leave-one-out-method)という。
しかし、一つのモデルに複数の正則化パラメータなどの複数の複雑さパラメータが含まれている場合、
評価する回数はS回だけではなくそのパラメータの組み合わせも考慮する必要があるため、指数関数的に増えてしまう。
そんなに訓練するのはやってられない！:persevere:
→**情報量規準**を考えてみる

---- 
###memo
複数の複雑さパラメータが含まれているってどういうこと？
![image.png](https://qiita-image-store.s3.amazonaws.com/0/156024/822f7b43-8a86-eda2-0b1c-5ed410f0804c.png)
みたいなイメージ。
## 3. 情報量規準
情報量規準は複数の複雑さパラメータがついているモデルのタイプを一回の評価だけで選んでくれる。
指数関数的に増えた評価をしなくて助かる・・
その例としてAIC(赤池情報量規準)と呼ばれるものがある。

```math
\ln{p(\it{D}\: |\: \bf{w} )} - \it{M}
```
第一項は最尤推定を行ったときの対数尤度、
第二項は可変パラメータの数
この量が最大になるようなモデルを選ぶべしということ。
尤度が大きくてシンプルなモデルが一番良いよねと言ってくれてる。
その他BIC(ベイズ情報量規準)などもあるがこれは3.4節で。。

----
参考
https://www.slideshare.net/toshihikoiio98/prml-13-16
画像の引用
[PRML](http://users.isr.ist.utl.pt/~wurmd/Livros/school/Bishop%20-%20Pattern%20Recognition%20And%20Machine%20Learning%20-%20Springer%20%202006.pdf)
↑日本語に訳されたものはめちゃ高いのですが原本はただなので興味ある方は読んでみてください。
Bitcoinのチャートをmatplotlibでリアルタイムに描画

zaifのapiを用いて、bitcoinのチャートをpython3のmatplotlibでリアルタイムに描画してみました。

#コード
```python
import matplotlib.pyplot as plt
from datetime import datetime
from zaifapi import *

zaif = ZaifPublicApi()

x=-1
x_array=[]
y_array=[]
while True:
    #リアルタイムで時刻と価格の表示
    print("時刻 :", datetime.now().strftime("%Y/%m/%d %H:%M:%S"))
    price=zaif.ticker('btc_jpy')["last"]
    print("価格 : %s円" % format(price))
    print("\n")

    #リアルタイムでチャートの表示
    x+=1
    y = price
    x_array.append(x)
    y_array.append(y)

    plt.plot(x_array,y_array,color="blue")
    plt.xlim([0,x])
    plt.pause(.01)
```
チャートの横軸に時刻(文字列)をリアルタイムで表示する方法がわからなかったので、とりあえずxを1ずつ増やしています。

#結果
![btc_chart.png](https://qiita-image-store.s3.amazonaws.com/0/99071/b93da3f7-819d-fb77-e751-baf79a70d0e3.png)

#参考文献
[ZaifのAPIを使ってPythonでチッカーを作る方法](http://104ch.webcrow.jp/2017/10/29/post-1747/)
[matplotlibでリアルタイム描画](https://qiita.com/hausen6/items/b1b54f7325745ae43e47)
[zaifのAPIを簡単にコール出来るようにしました。](https://github.com/techbureau/zaifapi)
さくらのクラウド > MacのターミナルからSSH接続 macOS→CentOS


# ssh

## 環境
さくらのクラウド
OS：CentOS 7.4

以下を参考にさせていただきました。
[【初心者向け】さくらのクラウドにターミナルからSSH接続するための手順＆解説【macOS→CentOS】 \- Qiita](https://qiita.com/nulltypo/items/e924e7a18101bd542d61)

下記はTerminalで作業する。

## Server側設定

ssh login
`$ ssh root@xxx.xxx.xxx.xxx`

ユーザーを追加

```
# adduser hoge
# passwd hoge
```

ユーザーのフォルダのパーミション変更

```
# cd hoge
# chmod 700 hoge
```

ここで一度ログアウトする。
`# exit`


## Mac側設定

カレントフォルダ移動&確認
`$ cd `
`$ pwd`

/Users/hoge

#### 公開鍵認証の設定(mac側)
「.ssh」フォルダを作成
`$ mkdir .ssh`

カレントフォルダを移動
（/Users/hoge/.ssh　フォルダに入る。）
`$ cd .ssh`

### 認証用の鍵を作成
`$ ssh-keygen -t rsa`

以下のように確認が表示される。
参考サイト同様にsakura_rsaで進める。

```
Enter file in which to save the key (/Users/username/.ssh/id_rsa): 

       ↓

Enter file in which to save the key (/Users/atsu/.ssh/id_rsa): sakura_rsa
```

パスワードは何も入力せずenterを2回。
+---[RSA 2048]----+から始まるキラキラしたAAが表示されたら成功。

これで「sakura_rsa」と「sakura_rsa.pub」という2つのファイルができた。

### リモートコピー
rsaファイルをsakuraに送る。
:~　：転送先のディレクトリの指定を忘れがちなので注意。

`$ scp sakura_rsa.pub hoge@xxx.xxx.xxx.xxx:~`

パスワードを聞かれるので入力。
「100% 398 0.4KB/s 00:00 」みたいなのが表示されれば成功。


## サーバー側

### 公開鍵認証の設定

ssh用ユーザーでsshログイン
`$ ssh hoge@xxx.xxx.xxx.xxx`

SCPした鍵が届いているか確認。
`$ ls`

sakura_rsa.pub が存在する事を確認。

ホームディレクトリ配下に「.ssh」ディレクトリを作成し鍵を保存する。
パーミッションを700に変更。

```
$ mkdir .ssh
$ chmod 700 .ssh
```

.sshディレクトリに「authorized_keys」という名前で移動する。
authorized_keysのパーミッション変更。

```
$ mv sakura_rsa.pub .ssh/authorized_keys
$ chmod 600 .ssh/authorized_keys
```

## sshd_configの編集

sshd_configを編集するにあたりスーパーユーザーになる。
`$ su`

「sshd_config」という設定ファイルを書き換える。
`# vi /etc/ssh/sshd_config`

以下の項目について設定する。

#### ポート番号
```
#Port 22
↓
Port xxxx
```
ポート番号は1024以上、49513～65535が望ましい。今回は「49513」を使う。


#### rootログイン不可
```
#PermitRootLogin yes
↓
PermitRootLogin no
```

#### 鍵認証設定。
```
#PubkeyAuthentication yes
↓
PubkeyAuthentication yes
```

CentOS7.4には以下は存在しなかったが、以下もあれば

```
#RSAAuthentication yes
↓
RSAAuthentication yes
```

#### パスワードによるログイン不可
```
PasswordAuthentication yes
↓
PasswordAuthentication no
```

ここまで変えたら保存する。


## sshdの再起動

再起動を行う。
`# systemctl restart sshd.service`

状態を確認する
`# systemctl status sshd.service`
以下を確認。

 * Active: active (running)」
 * Server listening on :: port 49513.


## ファイアウォールの設定

### ファイアウォールの設定を変更。
`# vi /usr/lib/firewalld/services/ssh.xml`

port protocol="tcp" port="22"/ の「22」を「49513」に書き換える。

### ファイアウォール再起動
`# systemctl reload firewalld.service`


## SSH接続できるか確認

ターミナルをもうひとつ開いて

`$ ssh hoge@xxx.xxx.xxx.xxx -i ~/.ssh/sakura_rsa -p 49513`

[hoge@sakura ~]$ と表示されれば成功。



## SSH接続用短縮コマンドの作成
上記まででSSH接続できるようになったが以下も作成すれば便利。（参考サイトのnulltypoさんに感謝！）

### mac側での作業
ターミナルを新しく開き、
ホームディレクトリ（~/）配下に.sshディレクトリ以下にconfigファイルを作成する。
`$ vi ~/.ssh/config`  
(/Users/hoge/.ssh/config)
configの中身にはいかを記述。

```
Host sakura
    Hostname xxx.xxx.xxx.xxx
    User hoge
    Port 49513
    IdentityFile ~/.ssh/sakura_rsa
	IdentitiesOnly yes
```

IdentitiesOnly：これをyesにしておくと他の設定を追加した時にエラーになりにくいとの事。

`$ ssh sakura`
[hoge@sakura ~]$ と表示されれば成功。


## 謝辞
以下を大いに参考にさせていただきました。ありがとうございました。
[【初心者向け】さくらのクラウドにターミナルからSSH接続するための手順＆解説【macOS→CentOS】 \- Qiita](https://qiita.com/nulltypo/items/e924e7a18101bd542d61)
RailsからJavaScriptへ配列を渡す方法

RailsからJavaScriptへ配列の渡し方がわからなかったので、調べた結果のメモです

## 解決方法
Rails側の配列を一旦Jsonにし、JavaScript側でそのJsonをパースし配列にしました
受け渡しには `inputタグ` を使いました

Rails側のコード

```Ruby:rails
def index
  @arr = ["りんご", "ゴリラ", "ラッパ", "パイナップル"]
  # 配列をJsonへ変換する 
  @arr_json = @arr.to_json.html_safe
end
```

html.erb側のコード

```html:html.erb
<input name="arr_json" type="hidden" value=<%= @arr_json %> class='arr_json'/>
```

JavaScript側のコード

```JavaScript:js
// arr_json取得
var arrJson = $('.arr_json').val();
// arr_jsonをパースし配列にする
var arr = JSON.parse(arrJson);
// 確認用のログ出力
console.log(arr);
```
Bootstrapのpopoverに指定divのhtmlを表示する

#Bootstrapのpopoverに表示するhtml記述を別個所に切り出したい

Bootstrapのpopoverで本文として表示する内容は「`data-html="true"`」とすることで「`data-content`」にhtmlで記述することができます。

```html:index.cshtml
<span class="fa fa-question-circle"
      aria-hidden="true"
      data-toggle="popover" 
      data-placement="top"
      data-container="body"
      data-html="true"
      data-content="ほげほげ<br />ふがふが<span class=""fa fa-warning"" aria-hidden = ""true""></span>
 "
```

data-contentに記述する内容が短い場合は直接記述でも良いのですが、少し込み入ったhtmlを表示したい場合は
エスケープ記述等が煩雑となるため別個所に記述して読み込むようにします。(別ファイル化までは行いません)

##環境
ASP.NET MVC6(C#) + Bootstrap(ver3.37)
##popover表示設定jsの変更

```js:site.js

    // ポップオーバーの有効化

    //$('[data-toggle="popover"]').popover();

    $("[data-toggle=popover]").popover({
        html: true,
        container: 'body',
        content: function () {
            var contentDivId = '#' + $(this).data('content_div_id');
            return $(contentDivId).html();
        },
        trigger: 'hover'
    });
```

- htmlの使用(`html: true`),
- 表示領域の大型化(`container: 'body'`)
- ホバーによる表示(`trigger: 'hover'`)

と共通設定を集約、合わせて
>content: function () {
>　var contentDivId = '#' + $(this).data('content_div_id');
> 　return $(contentDivId).html();
>},

のようにcontentに「`data-content_div_id`」で指定したId要素のhtmlを適用する設定を行いました。

##cshtmlの変更
```html:index.cshtml(popover個所)
<span class="fa fa-question-circle"
      aria-hidden="true"
      data-toggle="popover" 
      data-placement="top"
      data-content_div_id="hogehoge_content">
</span>
```

`data-content`の記述を書かない代わりに`data-content_div_id`に読み込み対象となるhtml記述箇所のid(`hogehoge_content`)を指定します。

```html:index.cshtml(popover表示htmlを記述する箇所)
<!--ポップオーバー内表示用html-->
<div id="hogehoge_content" class="hide">
  ほげほげ<br />
  ふがふが<span class="fa fa-warning" aria-hidden="true"></span>
</div>
```

ポップオーバー内表示用html記述箇所を囲むdiv等の要素に上記で指定したid(`hogehoge_content`)、ポップオーバー内表示以外では非表示とするため`class="hide"`を設定します。
【LINE@】和暦西暦変換BOTをつくってみた【Messaging API】

# LINE BOTの紹介
LINE Messaging APIを使って何か作れないかってことで、**和暦を西暦に、西暦を和暦に変換するBOT**を作成してみました。
今年は平成何年だっけ...で、年に3回くらいはググっている様な気がしますので、そんな時にこのBOTを思い出して使ってもらえれば。
LINEへのBOT追加方法も以下に記載しています。

## スクリーンショット
一枚の画像でやれることの全てが収まります^^;

<img src="https://qiita-image-store.s3.amazonaws.com/0/172671/a12c6c6f-863e-d60d-2e85-8a2053fc8ea5.jpeg" width=60%>

## LINE 友だち追加用 QRコード

~~LINE起動→友だち追加→QRコード
からQRコードを読み取ってBOTを友だちに追加することが出来ます。~~

→現在BOTの友だち登録を停止しています。

## 簡単な使い方

LINEの友だちに追加したら、トークルームで話しかけて下さい。
ヘルプと打ち込むと、BOTが簡単な使い方を返してくれます。

### 西暦から和暦に変換したい場合
- 2017
- 1979年  
などと話しかけると、和暦に変換して返してくれます。

### 和暦から西暦に変換したい場合
- 平成29
- 昭和54年  
などと話しかけると、西暦に変換して返してくれます。

### 現在の西暦/和暦を知りたい場合
- いま
- 今
- now  
と話しかけると、現在の西暦と和暦を返してくれます。


# 技術情報
宣伝だけだと怒られそうなので^^; 少しだけBOTの技術的な情報を。
(Messaging APIのTipsは別の記事にする予定です。)

## ソースコード
GitHubに公開してますので、機能追加なりバグ修正なり何なりとPR送っていただければ。
(SpringBootのアプリケーションです。)

[asksaito/wareki-seireki-linebot]
https://github.com/asksaito/wareki-seireki-linebot

Fork元のリポジトリ
[line/line-bot-sdk-java]
https://github.com/line/line-bot-sdk-java

元のリポジトリから、sample-spring-boot-echoっていうプロジェクトしか弄ってないです。
プロジェクト名もsampleのまま。。

IDEは何でも良いのかも知れませんが、STSを使いました。
https://spring.io/tools/sts

そのままだとGetter/Setterでコンパイルエラーが出るので、Lombokを入れてください。
http://mmts1007.hatenablog.jp/entry/2015/10/15/204400

## アプリケーションのデプロイ先
LINE BOT SDKサンプルの説明にある通り、Herokuにデプロイしています。(無料プラン)
無料プランだと、サーバにしばらくアクセスがないとスリープモードに入ってしまいます。
BOTに話しかけて反応が悪い時があるのはスリープしてるからです。

# 参考サイト
[Spring Tool Suite (STS)](https://spring.io/tools/sts)
[Lombok でコード量を削減！](http://mmts1007.hatenablog.jp/entry/2015/10/15/204400)
[Heroku.com](https://www.heroku.com/)
DockerでAngular5の開発環境をつくる

## 概要
- DockerでAngular5の開発環境を作る

## 前提条件
- Dockerはインストール済みとする

## Dockerfileを用意する
- Angular-CLI1.5.4のDockerfile

```
FROM node:6.11.2-alpine

RUN apk update \
  && apk add --update alpine-sdk \
  && npm install -g @angular/cli@1.5.4 \
  && ng set --global packageManager=yarn \
  && apk del alpine-sdk \
  && rm -rf /tmp/* /var/cache/apk/* *.tar.gz ~/.npm \
  && npm cache clear \
  && sed -i -e "s/bin\/ash/bin\/sh/" /etc/passwd
```

## Imageをビルドする
- Dockerfileを格納した場所で実行する

```
docker build -t angular5 .
```

## Angularのプロジェクトを作成する
- PJを作成したい場所で実行する

```
docker run -it --rm -w /app -v $(pwd):/app angular5:latest ng new my-project-name
```

## コンテナを起動して中でnpm installする
```
docker run -it --rm -v $(pwd):/app angular5:latest /bin/ash

## コンテナ内
cd app/my-project-name
npm install

## ng generate 使うのもコンテナ内で行う
ng g c hogehoge
```

## 作成したプロジェクトを実行してみる
- localhost:4200 で動作確認できる

```
docker run -it --rm -w /app -v $(pwd)/my-project-name:/app -p 4200:4200 angular5:latest ng serve --host 0.0.0.0
```

- これでAngularの開発ができる
AWSのEC2にnginxとPHPとMySQLとlaravelを導入してた件

# Laravelから抜け出せない。
急遽、AWSで検証環境が必要になったので
ゴリゴリしてた件。

## 今回の必要な環境
- PHP 7.1
- Nginx / PHP-FPM
- MySQL

## さてさてAWSにSSHしよう。
` ssh -i hoge.pem ec2-user@ec2(AWSのところのGDNS).ap-northeast-1.compute.amazonaws.com `
いつも通りです。
アップデートしろよ。ってAWSさんから言われるので

` sudo yum update `
とりあえずアップデードした。

## で、PHPインストール。今回はPHP７．１です。
` sudo yum install php71 `
PHPの必要ライブラリを追加
` sudo yum install php71-mysqlnd php71-mbstring php71-mcrypt php71-pdo php71-xml php71-fpm php-pdo php-mcrypt`

## Nginxインストール
` sudo yum install nginx `
でここ、あとで変更する必要があるのでメモ

```/etc/nginx/nginx.conf
server {
listen       80 default_server;
listen       [::]:80 default_server;
server_name  localhost;
root         /var/www/html/(自分で指定をしてください)/public;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;

index index.html index.htm index.php;

   charset utf-8;

   location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

location ~ \.php$ {
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass unix:/var/run/php-fpm/www.sock;
        fastcgi_index index.php;
        include fastcgi_params;
    }
```
あとphp-fpmの設定を変更

```/etc/php-fpm.d/www.conf
・・・

user = nginx
group = nginx

listen.owner = nginx
listen.group = nginx
listen = /var/run/php-fpm/www.sock

・・・
```
## まぁとりあえずphp-fpmとnginxをスタート
```
$ sudo service start
$ sudo service php-fpm start
```

## MySQLインストール
`yum install  mysql56 mysql56-server`
## あとGitのインストール
` sudo yum install git `
## NVMインストール
` git clone https://github.com/creationix/nvm.git ~/.nvm `

パスを通す
` source ~/.nvm/nvm.sh `

 `nvm install 8.9.1 `

`vi .bash_profile`

```
# nvm
if [[ -s ~/.nvm/nvm.sh ]] ; then
        source ~/.nvm/nvm.sh ;
fi
```
上を追加する。


## npm
`sudo yum install nodejs npm --enablerepo=epel`

## Comporserインストール
 `curl -sS https://getcomposer.org/installer | php `
 `sudo mv composer.phar /usr/local/bin/composer `
## laravelインストール
`sudo /usr/local/bin/composer global require "laravel/installer"`

#### Composerで依存ライブラリを取得
composer.lockで指定されているライブラリ/バージョンを取得。

```
$ cd /var/www/html/（自分のところ）
$ composer install
```
でアップデートが出来ないで困ってこの記事を[参照](https://qiita.com/musclemikiya/items/0be9ee5233d1e46f6abf)

### storageフォルダに書き込み権限を追加
```
$ chmod -R o+w /var/www/html/（自分の）/storage
```


# で、
動いたかっていうと動いてない。
[EC2サーバー上にLaravel5.3のプロジェクトを初回デプロイする（git経由）](https://qiita.com/nbapps_dev/items/9307e6fc0edb59c09181)
を参照してやってるんだけど、、、、
自分のGitのプロジェクトを動かしたいのに動かないよ。。。
Azure Batch Rendering クラウドレンダリング情報まとめ

マイクロソフトの田中です。クラウドレンダリングのAzure Batch Renderingを担当しています。セミナー含めてこちらで情報集約していきたいと思います。

**概要**
Azure Batch Rendering サービスは、クラウド規模のレンダリング機能を従量課金ベースで提供します。 Batch Rendering サービスは、ジョブのスケジューリングとキューの処理、エラーと再試行の管理、レンダリング ジョブの自動スケーリングを行います。 

**対応ソフトウェア・レンダラ**
プラグイン型
Autodesk Maya 2017 + Autodesk Arnold for Maya / Chaos Group V-Ray for Maya
Dispacher型
Autodesk 3ds Max + Autodesk Arnold for 3ds Max / Chaos Group V-Ray for 3ds Max

**クラウドレンダリングの主なメリット**
1. クラウドサービスによりサーバ料金が従量課金
2. 自身・自社でのサーバ購入・設定・管理が必要でない
3. 一時的な利用であるレンダリングに関して一時的な費用として計上可能
+ 4. Azure Batch Renderingの場合、**Autodesk Maya、3ds MaxバッチライセンスおよびArnold、V-Rayなどレンダラ料金も従量課金で利用可能**（マイクロソフトから一括で請求されます。）

**セミナー情報 Azure Antenna https://azure.connpass.com/**
設定を支援するセミナーを実施したいと思います。サービス概要の説明と設定支援をサポートするためのセミナーを実施します。実際には利用を推進するもので聞くだけのセッションではなく、MS社員に聞きながら設定してもらう場を想定しています。もちろん自分で設定するための情報収集の場としてご利用頂いてもかまいません。
*セミナーの場所ですが、マイクロソフト品川オフィスから渋谷ヒカリエ8階へ変更しました。*

**12/14（木）18:30- ＠渋谷ヒカリエ8階 8名**
- 申し込みサイト：https://azure.connpass.com/event/73999/
- 形式：概要説明と自身での設定（マイクロソフト社員がサポートします）
- 必要なもの：Azureのアカウントとクレジットカード、自身のPC、Autodesk Mayaの事前インストールとフルライセンス取得（30日の試用版でも可能）
- セミナー受講者の利用方法：#1)Azure Batch Renderingに関する情報と実際の利用方法を理解してもらう 2)AzureアカウントとPCを持ち込みその場で設定して試してみる
**1/11（木）18:30- ＠渋谷ヒカリエ8階 8名**
- 申し込みサイト：https://azure.connpass.com/event/74006/ 
- 形式：概要説明と自身での設定（マイクロソフト社員がサポートします）
- 必要なもの：Azureのアカウントとクレジットカード、自身のPC、Autodesk Mayaの事前インストールとフルライセンス取得（30日の試用版でも可能）
- セミナー受講者の利用方法：#1)Azure Batch Renderingに関する情報と実際の利用方法を理解してもらう 2)AzureアカウントとPCを持ち込みその場で設定して試してみる

**Autodek Maya 設定方法**
基本的に以下のURLの通りで、大まかに次の3つに分けられる
1. Microsoft Azureのアカウント開設とAzure Batchサービスの認証情報取得
2. GithubからOSSのMaya Pluginダウンロード・プラグイン設定
3. #1のAzure Batchサービスの認証情報の設定

Batch Rendering サービスの概要
https://docs.microsoft.com/ja-jp/azure/batch/batch-rendering-service

Azure/azure-batch-maya
https://github.com/Azure/azure-batch-maya

ダウンロードはこちらから　https://github.com/Azure/azure-batch-maya/releases　
2017/11/26現在最新: azure-batch-maya-v0.16.0 

![authentication.png](https://qiita-image-store.s3.amazonaws.com/0/21450/2fef6f56-6c49-2c75-8804-f380cf02db9a.png)

mshirost 2017/11/26 Releacase
クラス内でのアロー関数のthis

## 目的
JavaScriptにおけるクラスの中でasync/awaitを使う際にハマりそうな箇所があったので備忘

## クラス内でasync/awaitを使う

動くコード

```js
function myClass(){
    this.value = 1;
}

myClass.prototype.run = async function() {
    this.value = await new Promise((resolve,reject) => {
        setTimeout(function(){
            return resolve(2);
        },100);
    });
    this.show();
}

myClass.prototype.show = function(){
    console.log(this.value);
}

var c = new myClass();
c.run();
```
動かないコード

```js
function myClass(){
    this.value = 1;
}

myClass.prototype.run = async() => {
    this.value = await new Promise((resolve,reject) => {
        setTimeout(function(){
            return resolve(2);
        },100);
    });
    this.show();
}

myClass.prototype.show = function(){
    console.log(this.value);
}

var c = new myClass();
c.run();
```
↓ 違い

```js
myClass.prototype.run = async function() {
```
```js
myClass.prototype.run = async() => {
```
上のコードは意図した動きになるが、下のコードはちゃんと動かない。this が myClassインスタンス をポイントしていない。
まぁ当然といえば当然か。

指摘を踏まえて、最終的にやりたかったことを書いてみた。最終的には、yamlで定義されたglTFの情報を読み込んでごにょごにょと処理をしたい場合に、three.jsのglTFローダが非同期なので、一度読み込んだglTFをうまいこと再利用してオブジェクトを生成したいなということ。
以下で一応やりたいことは実現できた。kentaro1530さん、どうもありがとう。

```index.html
<!DOCTYPE html>
    <head>
        <script src="lib/js-yaml/js-yaml.min.js"></script>
        <script src="lib/three.js/three.min.js"></script>
        <script src="lib/three.js/loaders/GLTFLoader.js"></script>
        <script src="js/myClass.js"></script>
    </head>
    <body>
    </body>
</html>
```

```myClass.js
class MyClass{
    constructor(){
        this.gltfs = {};
        this.config;
        this.loader = new THREE.GLTFLoader();
        this.getConfig();
    }

    async getConfig(){
        var configString = await (
            await fetch("/public/config.yml?_="+(new Date()).getDate())
                .then(this.configHandler)
                .catch(this.configError)
        ).text();
        this.config = jsyaml.load(configString);
        this.loadModels();
    }

    async loadModels(){
        console.log(this.config);
        for(var modelName in this.config.model){
            var model = this.config.model[modelName];
            if(this.gltfs[model.gltf] == null){
                var gltfObj = await new Promise((resolve,reject) => {
                    this.loader.load(model.gltf+"?_="+(new Date()).getTime(), function(data) {
                        return resolve(data.scene);
                    }, undefined, function ( error ) {
                        return reject(null);
                    });
                });
                model.gltfObj = gltfObj;
                this.gltfs[model.gltf] = gltfObj;
            } else {
                model.gltfObj = this.gltfs[model.gltf].clone();
            }
        }
    }

    configHandler(response){
        if(!response.ok){
            throw Error(response.statusText);
        }
        return response;
    }

    configError(e){
        console.log(e);
    }

}

myClass = new MyClass();
```

```public/config.yml
model:
  model1:
    gltf: public/data1.gltf
  
  model2:
    gltf: public/data2.gltf
  
  model3:
    gltf: public/data1.gltf
```
【Go】 日付の整合性チェック

# Goの日付整合性チェック
日付整合性について書かれた記事が見つけられなかったので自分で実験した話です。

なにはともあれ早速実験です。
PHPであればcheckdate()関数で以下のようにかけるかと思います。

```
checkdate(月, 日, 年);
```

では、Go言語で書くと以下のようになります。

```
time.Parse("20060102","年月日")
```

これだけだとわかりにくいので、実際に書いて見ましょう

```go:main.go
package main

import (
	"fmt"
	"time"
)

func main() {
	format := "20060102"

	fmt.Println("存在しない日付")
	parsedTime, err := time.Parse(format, "20180229")
	fmt.Println(parsedTime)
	fmt.Println(err)


	fmt.Println("\n閏年の日付")
	parsedTime, err = time.Parse(format, "20160229")
	fmt.Println(parsedTime)
	fmt.Println(err)

}
```

```shell-session:実行結果
go run main.go
存在しない日付
0001-01-01 00:00:00 +0000 UTC
parsing time "2018-02-29": day out of range

閏年の日付
2016-02-29 00:00:00 +0000 UTC
<nil>
```
確かに存在しない閏年の日付などはちゃんとerrorを吐いてくれてますね。

ここで思うのは時間のフォーマット方法がなんで「20060102」なのかということですが、
Goの[サンプルコード](https://golang.org/src/time/example_test.go)を見ると書いてありました。

```go:src/time/example_test.go
  	// The layout string used by the Parse function and Format method
  	// shows by example how the reference time should be represented.
  	// We stress that one must show how the reference time is formatted,
  	// not a time of the user's choosing. Thus each layout string is a
  	// representation of the time stamp,
  	//	Jan 2 15:04:05 2006 MST
  	// An easy way to remember this value is that it holds, when presented
  	// in this order, the values (lined up with the elements above):
  	//	  1 2  3  4  5    6  -7
  	// There are some wrinkles illustrated below.  
  	// Most uses of Format and Parse use constant layout strings such as
  	// the ones defined in this package, but the interface is flexible,
  	// as these examples show.
```

要するにタイムフォーマットって左から順に1234って関連付けされてた方が、
思い出しやすいよねって書いてあります(超意訳)。

アメリカ時間なので日本人にとってはものすごーくわかりにくいですね。
それをyyyy-mm-dd形式に補うライブラリもあるにはあるのでそれを使うのも手です。


というわけで第2回週刊Go(週一でGoの記事を書いていくのが目標)でした。
PHPの「可変変数」について

PHPの「可変変数」についてメモをしておきます。

<h1>可変変数とは？</h1>
可変変数は、変数名を可変にできるということ。動的に変数を設定するには次のようにします。

```php
<?php
$a = 'hello';
?>
```
可変変数は、変数に書いてある「値」を変数名として使うことができる。例えば、

```php
<?php
$$a = 'world';

echo $hello;
?>
```

```$a``` の値はhello
```$a```は```$a = 'hello'　;```のhello を変数名として使っているので
```$$a``` の```$a``` はhello になるから```$$a```は```$hello```になり```"world"```を値とする```$hello```という変数ができる。

```php
echo $hello;
```
なのでこの結果は「world」となる。

```php
<?php
echo "$a ${$a}";
?>
```

```php

<?php
echo "$a $hello";
?>
```

ちなみに、上記の2つの出力結果は両方とも「hello world」 になる。
【Android】任意のViewに下に行くほど徐々に濃くなるようなぼかしを入れる

## やりたいこと
![](https://qiita-image-store.s3.amazonaws.com/0/123122/02958490-cd4f-9cf5-c794-1c2bad409155.png)
下に行くほどぼかしが濃くなるイメージ

## 結論
9-patch画像を使う

## サンプルコード
これを任意のViewの上に置く（この例だとEditTextの上に置いている）

```xml
<ImageView
    android:layout_width="match_parent"
    android:layout_height="16dp"
    android:layout_above="@id/editText"
    android:background="@drawable/shadow" />
```

## 9-patch画像
↓イメージ（拡大してキャプチャしたもの）
![](https://qiita-image-store.s3.amazonaws.com/0/123122/12504a01-d006-8d71-7e18-52489cfc4d21.png)
↓オリジナル
![](https://qiita-image-store.s3.amazonaws.com/0/123122/325c5b10-166b-7463-27af-ecda510388c0.png)

## 補足
もっといいやり方あったら教えてください！

## 参考

Create Resizable Bitmaps (9-Patch files) | Android Studio
https://developer.android.com/studio/write/draw9patch.html
bootstrap: 微調整Tips

# テーブルの行の高さを調整する
tableタグに__table-condensed__クラスを設定する
&lt;table class="table __table-condensed__"&gt;

table-condensed クラスにより padding:5px が指定される。
この高さ（空白）を調整したい場合は独自のCSSファイルをインクルードし以下のように指定する。

```
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
  padding: 5px;  /* 5px の値を変更 */
}
```
# label の幅を揃える
対象とするlabelクラス（複数）に対して __min-width__, __display__ プロパティを設定する

HTML例

```
<div id="same-widths">
<span class="label label-info">info</span>
<span class="label label-primary">primary</span>
<span class="label label-danger">danger</span>
</div>
```

適用するCSS

```
#same-widths .label {
  min-width:XXXpx !important;
  display: inline-block !important;
}
```

# navbar のタイトル文字部分に画像を表示する
.navbar-brand クラスをカスタマイズする

CSS例（外部ファイルとしてインクルード）

```
.navbar-brand {
  background: url("image.png") no-repeat left center;
  background-size: 30px 30px;
  height: 50px;
  width: 250px;
  padding-left: 60px;
}
```
image.png は上記CSSファイルと同じ場所に格納する。上記では 30px x 30px を想定（navbar の縦サイズの制約上、画像は 30px x 30px くらいまでのサイズがおさまりがよい）。
logistic regression(ロジスティック回帰) octaveによるコスト関数の計算方法


※アウトプット用のメモです。あしからず。
octaveみたいに行列でガツガツ計算していくとき、しっかり次元を意識しないと、闇雲にエラーと戦うハメになる。そこだけ気をつければ、あとは公式通り。


##1, logistic regression



```octave

% ｍ：データセットの個数
%　　J:コスト関数
% grad:　Gradient

for i = 1:m,

 z = theta' * X(i,:)';

 J +=  (- y(i) * log(sigmoid(z)) - (1 - y(i)) * log(1 - sigmoid(z)))/m;
 grad += (((sigmoid(z) - y(i)) * X(i,:))')/m;

end;

```

レギュライズド（日本語でなんていうんだろ）してないからλの処理をしなくていいし、やってることはLinear Regression(線形回帰）のときと一緒。

##2, Regularized logistic regression

パッと思いついたやつ（一部抜粋）

```octave
%gradientの計算から
%j=0の項は一旦無視して、gradientを計算。余計に足したlambdaの処理はあとで修正
%注意するべきは、λの項は後で足さないといけないところ
%for loopの中に入れると、λ項がm回足されてgradientがでかくなる


for j = 1:m,
   z = theta' * X(j,:)';
   grad += ((sigmoid(z) - y(j)) * X(j,:)') / m  ;
end;

%行列計算のため計算がちぐはぐ。いい方法はないだろうか。
grad　　　　　　 +=  lambda .* theta / m;
grad(1) -=  lambda .* theta(1) / m;



%コスト関数の計算
%こちらも気をつけるべきところはλ項を足すのはj>=1のときということ
%それからλの項(regularized)の項は別にして計算すること(rangeが1~size(theta))なので）

for i = 1:m,
   z = theta' * X(i,:)';
   J +=  (- y(i) * log(sigmoid(z)) - (1 - y(i)) * log(1 - sigmoid(z)))./m;
end;

regularized = 0;
for j = 2:size(theta),
   regularized += (theta(j))^2 .* lambda ./ (2.*m);
end;

J += regularized;

end;

```

こっちはもっと楽な書き方があればーーと思うところ。
【小ネタ】Docker for WindowsをWSLで使う一番楽な方法

Docker for Windowsを使ってLinuxコンテナを触っていると、WSLからでもDockerが使えるようにしたいと思うものです。

ホスト側tcp接続を有効にしてWSL側にDocker CLIをインストールして`DOCKER_HOST`環境変数を設定して…
とすれば普通に使えたりするわけですが、実はもっと楽な方法がありました。

```shell-session:bash
$ alias docker='/mnt/c/Program\ Files/Docker/Docker/resources/bin/docker.exe'
```

多分これが一番楽だと思いま（略

\#冗談のつもりでしたが、案外この方法で用が足りるんじゃ…:sweat:
【Python】ラムダ式メモ

#ラムダ式
~~ラムダ式とは、関数を式として扱って変数に代入して使用できるようにする方法のことです。~~
~~変数に代入するって？もともと変数に入っているのではないかと思うかもしれません。~~
~~変数に代入することのメリットとしては、関数を引数に設定することが可能になる点があげられます。~~
~~また、処理が簡潔に書けることも魅力の一つです。~~
いろいろ訂正します。私の理解が間違っていたように思います。
ラムダ式とは、関数に名前を付けずに**簡潔**に宣言する方法です。
もちろん、宣言したラムダ式を変数に設定することができますが、Pythonコーディングスタイルガイド PEP8にあるようにあまり推奨されていない方法です。（@shiracamusさんありがとうございます。）

#書き方
ます、サンプルとして通常の書き方から記述します。
引数に文字列を受け取り、「 World!」と結合して返却する関数をサンプルとして作成します。

```py:通常の関数を用いた書き方
def func(s):
    return s + " World!"

ret1 = func("Hello")
print(ret1)
```

```py:lambda式を用いた書き方
lamdaSample = (lambda s: s + " World!")
ret2 = lamdaSample("Hello2")
print(ret2)
```

```:実行結果
Hello World!
Hello2 World!
```

通常の方法では、func関数を定義してその関数を実行して戻り値を得ています。
ラムダ式では、defを使用した関数定義は使用せずに、lambdaと記述して、続いて引数、コロン（:）、処理を記述できます。

```
lambda 引数:処理内容
```

#どんなときに役に立つのか
このようにdefの代わりにラムダ式を使用しても大してメリットはありませんが、ラムダ式の力を発揮するのは関数の引数に関数を指定したいときです。ただし、単純な処理に限りますが。
pythonの標準では、リストの処理をするときに引数に関数を指定する関数がたくさん準備されています。
その中のひとつのmapについてみていきましょう。

```py
def func(s):
    return s+ " World!"

sampleList = ["TEST1", "TEST2", "TEST3"]
newList = []
for s in sampleList:
    newList.append(func(s))

print(newList)
```

```:実行結果
['TEST1 World!', 'TEST2 World!', 'TEST3 World!']
```

このようにリスト内の要素に対してすべてfunc関数を実行して新しいリストを作成したい場合、ラムダ式を使用するともっと簡単に記述することができます。

```py
newList2 = list(map(lambda s: s + " World!", sampleList))
print(newList2)
```

```:実行結果
['TEST1 World!', 'TEST2 World!', 'TEST3 World!']
```

この方法ではmap関数を利用しています。map関数は、引数1に処理内容（ラムダ式）、引数2にリストを受け取ります。
そして、リストの各要素に対して引数1に受け取った関数を実行して返却された値を返すイテレータを作成します。
map関数の中身を記述するとこんな感じではないでしょうか。

```:map中身
def mapSample(func, list):
    for obj in list:
        yield func(obj)
```

mapのほかにも要素を抽出するfilter関数等関数を引数にもつ関数が標準で準備されているので皆さん便利な関数を探してください。

#最後に
ラムダ式は便利だと思います。ただ、シンプルに書ける分、複雑な処理を記述するにはどうしても向いていない面があります。
それを無理やり記述しようとして可読性が損なわれることもよくあると思いますので、使用するときは注意してください。
プログラミングで大事なことは、読んだ人がすぐ理解できることです。独りよがりなコードにならないようラムダ式を適切に利用して可読性の高いコードを目指しましょう！
Socket.IOの通信速度を測ってみる。

# 結果
~~**このやり方だと**ローカルで130Mbps~140Mbps~~

**追記** 環境による差異が大きいようです。

- Windows 10(当記事の検証PC) **135Mbps前後**
- Hyper-V上のUbuntu Server **100Mbps前後**
- 開発用ノートPC(Arch Linux) **3200Mbps前後**
- 友人のMac **1200Mbps前後**

同じLinuxでもバラバラだったりするのが非常に謎ですが、何かがオーバーヘッドになってることは確かなようです。

## 検証
- Windows 10
- そこそこ速いSSD
- Node.js v8.9.1
- 約100MBのmp3ファイル

### サーバ側
```js:server.js
var server = require('http').createServer(response);
var io     = require('socket.io')(server);
var fs     = require('fs');

function response(req, res){
// HTTP
}

function socketio(socket){
    socket.on('starttest', function(data){
        fs.readFile('sample.mp3', function(err, data){
            var start = (new Date()).getTime();
            io.emit('mp3data', { 'mp3':data, 'start':start } )
        });
    });
}

io.on('connection', socketio);
server.listen(3000);
console.log('Server started on 3000');
```
クライアント側から着信を受けた後、送信時のタイムスタンプとデータをSocketIOで送ります。

### クライアント側
```js:client.js
var socket = require('socket.io-client').connect('http://localhost:3000');
var fs     = require('fs');
socket.on('connect', function(){
    console.log('Connected');
});

socket.on('mp3data', function(data){
    var end = (new Date()).getTime();
    var sec = (end - data.start) / 1000;
    var bps= Math.round(data.mp3.length / sec);
    console.log((bps * 8 / 1000 / 1000) + 'Mbps');
});

process.stdin.on('data', function(data){
        socket.emit('starttest', {msg: data});
});
```
コンソールに適当に入力するとサーバ側に発信します。受信が終わったら計算をして出力します。

## 感想
自分の実装が悪いのかSocket.IOが悪いのかWebsocketの限界なのかわかりませんが、どんな書き方をしてもこれ以上パフォーマンスは上がりませんでした。何かあればご指摘ください。ファイルの送受信は素直にHTTPを使ったほうがいいような気もします。

何かあればコメント欄かTwitter [@kznr_luk](https://twitter.com/kznr_luk)までお願い致します。
Kibelaの投稿をSlackに通知する

# 概要

[Kibela](https://kibe.la/ja)という5人まで無料で使えるQiitaチームのような物が結構便利です。
基本的にQiitaチームと機能は変わらない印象を受けました。

公式ドキュメントには Slack 連携に関する記事が無かったので、今回は Kibela の投稿を Slack に通知する方法を記載します。

# Slack側の設定

下記エントリを参考にしながら Incoming WebHooks の Webhook URL を取得します。

[SlackのWebhook URL取得手順](https://qiita.com/vmmhypervisor/items/18c99624a84df8b31008)

# Kibela側の設定

1. 右上のユーザアイコンをクリックして「設定」を選択
2. サイドメニューから「Webhooks」を選択
3. 右上の「webhookを追加する」をクリックして「Slack」を選択
4. URLの部分に先程取得した Webhook URL を入力して「保存」をクリック

![スクリーンショット 2017-11-26 15.21.08.png](https://qiita-image-store.s3.amazonaws.com/0/44388/bfb3f019-62b4-ad14-8607-05b4344d87fa.png)


# まとめ

誰かの役に立てればと思います。
パワーポイント、ワードから画像を取り出す。

先日、エクセルの図を画像で取り出す記事を投稿しました。
数日経ってふと疑問に思った。
もしかして、パワーポイントやワードでもできるのでは？

できました。
ということで備忘録としてまとめます。

【目的】
エクセルと同様にパワーポイントとワードから画像を取り出す。
https://qiita.com/msht0511/items/404309e4b0153b021a8b

【手順】
１．保存したい図をコピーして画像として適当な場所にペースト。
２．下記の形式で保存してファイルをとじる。
　　・パワーポイント：「.pptx」形式
　　・ワード　　　　：「.docx」形式
３．２で保存したファイル名の拡張子を「.zip」に変更する。
４．リネームしたZIPファイルを解凍する。
５．解凍したフォルダからみて下記のフォルダに移動する。
　　・パワーポイント：ppt\media\
　　・ワード　　　　：word\media\
６．５の移動先に１でペーストした画像が保存されてます。
以上
MHTMLを1ファイルのHTMLに変換する

## 概要

HTMLを1ファイルに保存するのに便利だったのでMHTML形式を多用していたが、MHTML形式も終焉が近そうなので何とかしようというもの。

Microsoft EdgeではMHTMLファイルを開くことはできず、FirefoxもVer.56まではUnMHTというアドオンでMHTMLファイルの読み込み・保存ができたが、Firefox QuantumでWebExtensionsになってUnMHTが使えなくなってしまった。WebExtensionsでは独自スキーマを扱えないことから今後似たようなアドオンが出てくる望みも薄い。Google ChromeはMHTMLファイルを開くことはできるものの完全にはサポートしていないようで、IE11やUnMHTでは正しく表示できるファイルでもGoogle Chromeではスタイルが適用されなかったり画像が表示されないといった問題があった。現在MHTMLファイルを正しく表示できるのはIE11のみでIEも終焉が近い。

そんなわけで数百ファイルあるMHTMLファイルをできるだけ簡単に変換できるもので、かつ、表示内容もできるだけ元のままにできるものとして、インラインタイプのHTMLファイルを採用してみた。

## MHTML形式

MHTML形式はMIMEのマルチパートを利用した形式で、HTML形式のメールとして多く利用されているがHTMLを1ファイルに保存する用途にも利用できる。
先頭にメールと同じヘッダ情報があり、外部参照のCSSやJavascript、画像はbase64エンコードされて同一ファイル内に書かれている。日本語をそのまま扱えないので、テキストエディタで開いて読むのは厳しい。

## インラインタイプのHTMLファイル

正式には何というのか不明だが、外部参照のCSSはstyleタグ、Javascriptはscriptタグ内に全て内容が書かれていて、画像はimgタグのsrc属性に`data:image/<形式>;base64,<画像をbase64エンコードした文字列>`と指定することで直接埋め込んだもの。画像の使い回しができないので同一画像を多用しているとファイルサイズが大きくなってしまうが、HTMLファイルなので大抵のブラウザで同じように表示できる。

## 形式変換

MHTML形式をインラインタイプのHTMLファイルに変換する方法について適当にGoogle検索すると、nodeのモジュールに色々ありそうだったので試してみた。

mhtml
https://www.npmjs.com/package/mhtml

html-inline
https://www.npmjs.com/package/html-inline

mhtmlはMHTMLファイルに埋め込まれたCSSやjavascript、画像をそれぞれのファイルとして保存し、普通のHTMLファイル+外部リソースという形式にしてくれるもの。

html-inlineは、HTMLから参照しているCSSやjavascript、画像をインラインタイプのHTMLファイルに変換してくれるもの。

ほかにも

mhtml2html
https://www.npmjs.com/package/mhtml2html

というのもあったが、UsageにChromeでしかテストしていないとあるように、IEやUnMHTで保存したMHTMLファイルはうまくパースできないようだった。

(2017/12/9追記)
html-inlineだとbackgroundで指定されている画像が無視されてしまっていたのでちょっと試してみたのが

inline-assets
https://www.npmjs.com/package/inline-assets

これだとbackground画像もうまく扱えるようだった。ただ、画像のBase64エンコードでutf8に変換してファイルを読み込んでいて、画像が壊れてしまっていたので修正してPRを出しておいた。
CSSなどで指定されているものの見つからない画像があるとエラーになってしまっていたので、そこは手を加えて無視するようにしてみた。

## インストールと使用方法

各モジュールは

```
npm install -g mhtml
npm install -g html-inline
```

とグローバルモジュールとしてインストールしておく。
あとは、

```
mhtml foo.mht output
html-inline -i output/index.html --ignore-links -o foo.html
rm -rf output
```

とするとfoo.mhtというMHTMLファイルをインラインタイプのHTMLファイルに変換したものがfoo.htmlとして作成される。
`--ignore-links`と指定したのは、linkタグで参照しているリンク先がないものがあり、変換でエラーが発生していたため。
ほかにもいくつかオプションがあるので各ドキュメントを参照するとよい。

## 補足

内容を確認しつつ1ファイルずつ変換してみたところ、iframeを使っていたりwikiなどを保存したMHTMLファイルだとうまくHTMLファイルに変換できないようで、そういった少し特殊なものは手作業で移行することになりそう。
Atomでマルチカーソルが使えなくなった時の対処法

ある日を境にAtomエディタの便利機能であるマルチカーソルが使えなくなっておりました。
# マルチカーソルとは
- Cmd + クリックで複数の箇所を選択状態にできる機能です。

![atom-multi.gif](https://qiita-image-store.s3.amazonaws.com/0/179987/ae0a1553-34d3-5f20-fae0-5a86070b1d87.gif)

# 発生した問題
- Cmdを押しながらクリックしてもマルチカーソルが機能しなくなっていました。
- 自分で設定したキーマップを全削除したり、バージョン更新を試しましたが解決せず。

# 原因
- Scalaのコーディング補助のために入れていたEnsimeパッケージの際に付随してインストールされていた**hyperclick**というパッケージと操作が被っていた模様。

<img width="862" alt="スクリーンショット 2017-11-26 14.58.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/179987/124fe46c-5e10-9037-344b-f6f00e5ff8c3.png">

# 対処法
- hyperclick自体は削除したくなかったので、Settingからhyperclickのトリガーキーを変更することで対処しました。

<img width="786" alt="スクリーンショット 2017-11-26 15.00.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/179987/1b763001-6ed0-a7b6-d73c-5a10ba014e74.png">

- 画面から変更できるコマンドの種類はこんな感じ

<img width="736" alt="スクリーンショット 2017-11-26 15.01.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/179987/c004408e-c97f-b927-cbdb-c8fe69126aaa.png">

- ctrl + clickが他の機能とぶつかったらまたその時対処法を考えます(˘ω˘)