OmniAICreator/Qiita-1.07M huggingface dataset:
Vue scoped style を親コンポーネントから子コンポーネントへ影響させる

この記事は [ShoTime Advent Calendar 2018](https://qiita.com/advent-calendar/2018/shotime) の 6 日目の記事です。

## スコープについて

Vue.js のシングルファイルコンポーネント（以降 SFC）に記述する `<style>` で `scoped` にすると、そのコンポーネントだけに影響を与えるスタイルを記述することが可能です。

```vue
<style scoped>
.example {
  color: red;
}
</style>
```

## Vue Loader 
SFC は webpack の loader である [Vue Loader](https://vue-loader.vuejs.org/) を使います。SFC で調べたいことがあった場合、[Vue Loader](https://vue-loader.vuejs.org/) を参照するとドキュメントが充実しているのでヒントが見つかるかもしれません。

## 親コンポーネントから子コンポーネントのスタイルをスコープで書きたい

この書き方についてもドキュメントに記載されています。

[# Deep Selectors | Scoped CSS | Vue Loader](https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors)

```vue
<style scoped>
.a >>> .b {
  color: red;
}
</style>
```

 `>>>` を使うことで、子コンポーネントに影響を与えるスタイルを記述することが可能です。一部のプリプロセッサーでは `>>>` ではなく `/deep/` と記述します。
Vue []

      addTagToFlow(e) {
        if (!this.IsArrayExists(this.localFlowTagEditData.tags, e)) {
          this.localFlowTagEditData.tags.push({ tagId: e });
        }
      },
      removeTagToFlow(e) {
        this.localFlowTagEditData.tags.forEach((item, index) => {
          if (item.tagId === e) {
            this.localFlowTagEditData.tags.splice(index, 1);
          }
        });
      },
      /**
       * @return {boolean}
       */
      IsArrayExists(array, value) {
        for (let item of array) {
          if (value === item.tagId) {
            return true;
          }
        }
        return false;
      },
Vue Filter

      selectedTagName(tags) {
        let selectedTagName = "";
        store.state.tagListData.filter(item => {
          if (tags.tagId === item.tagId) {
            selectedTagName = item.label;
          }
        });
        return selectedTagName;
      },
      selectedTagStyle(tags) {
        let selectedTagStyle = "";
        store.state.tagListData.filter(item => {
          if (tags.tagId === item.tagId) {
            selectedTagStyle = item.color;
          }
        });
        return selectedTagStyle;
      },
      min2hour(value) {
        let hour = Math.floor(value / 60);
        let min = value % 60;
        return hour + "時間" + min + "分";
      }
macにrbenvを使用してRubyの環境構築をする

# はじめに
macにrbenvを使用して、Rubyの環境構築をした際の備忘録となります。

下記、記事を参考にしております。
https://qiita.com/ringo/items/4351c6aee70ed6f346c8

## Homebrewでrbenvとruby-buildをインストール
`brew install rbenv ruby-build`

- rbenvとは
複数のRubyのバージョンを管理できる
プロジェクト毎でrubyのバージョンを分けたい時に使う
https://qiita.com/propeller/items/3953d07afcc43c569171

- ruby-buildとは
ruby をインストールするためによく使われているrbenv のプラグイン
https://takatoshiono.hatenablog.com/entry/2015/01/09/012040

## PATHを通す
bashの場合は、.bashrcに下記を追加

```
[ -d ~/.rbenv  ]] && \
  export PATH=${HOME}/.rbenv/bin:${PATH} && \
  eval "$(rbenv init -)"
```

## rubyのインストール
`rbenv install -l`でインストールできるバージョンを確認できる

```
# version指定してinstall
rbenv install 2.3.0

# システム全体で使用するバージョンを指定する
rbenv global 2.3.0

# バージョンの確認
ruby -v
```

- rbenv globalとは
globalはシステム全体で使用するバージョンを指定する

- rbenv localとは
特定のワークスペースでrubyのバージョンを使用する場合に指定する（ディレクトリにある.ruby-versionファイルを書き換えて管理しているとのこと）
基本的にメインで使用するのはglobalで指定して、個別でバージョンが違う場合はlocal指定をする
C++ Builder XE4 > TTimer > Link: TTimer not firing at correct interval > 55ミリ秒以下のインターバルは発火しない (1998年の情報 + 2018年の情報)

```txt:動作環境
C++ Builder XE4
```

### 1998年の情報

TTimerの精度について調べて20年前の記事を見つけた。

TTimer not firing at correct interval
WRITTEN BY EMBARCADERO USA ON THURSDAY, 16 JULY 1998 POSTED IN TOOLS

https://community.embarcadero.com/article/technical-articles/149-tools/13159-ttimer-not-firing-at-correct-interval

> Values below 55 milliseconds will never fire on time under Windows, since this is the Timer components minimum resolution.

~~20年後の2018年現在、55ミリ秒の定義は変わっているかは未調査。~~

このあたりは無理のない範囲で実装するのがいいだろう。

### 2018年の情報

https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.forms.timer?view=netframework-4.7.2

> Windows フォームの Timer コンポーネントは、シングル スレッドし、は 55 ミリ秒の精度に制限されます。
laravelララベルの認証機能を利用するページを分ける方法について

#Lravelの認証機能
```
php artisan make:auth
php artisan migrate
```
この辺りを利用すると簡単に実装可能。
☆参考☆
https://qiita.com/naga3/items/4f3defde59b31a1a797e

#認証するページを分ける方法
*もしかしたら他にも方法があるかもしれませんが、実装できたので備忘録
☆賢い方法があれば教えてください

##認証ページを区別するとは（やりたいこと）
https://hogehoge.com/member/list ⇒　認証した人のみ
https://hogehoge.com/scdule ⇒　誰でも見れる


#コンストラクタを利用
>コンストラクタとはクラスからインスタンスを生成するとき（オブジェクトがnewによって作成されるとき）に自動的に呼び出されるメソッドです。
このようなメソッドをマジックメソッドと呼びます。
オブジェクト作成時に初期化処理が必要な場合、コンストラクタ内に記述しておけば自動的に実行してくれます。
<
☆参照　https://laraweb.net/surrounding/1472/


#コンストラクタを利用して、認証実装
表示に利用しているコントローラに認証機能を記載する。
簡単に表示が分かれました！

vi app/Http/Controllers/xxxxController.php

```
    public function __construct()
    {
        $this->middleware('auth');
    }
```
スペクトルサブトラクション法

# スペクトルサブトラクション法(Spectral subtraction method)

検出信号の周波数スペクトルからノイズの周波数スペクトルを推定し，検出信号の周波数スペクトルから減算することでノイズ低減を行う手法であり，音声フィルタとして用いられている．  
利点１：計算量が少なく比較的高速な処理が可能
利点２：ノイズの振幅や周波数が時間変動する環境においても適用が可能  

ただし，ノイズだけ録音しておく必要がある．

## 手順

1. 非音声部（ノイズ）の周波数スペクトルの大きさ計算
2. 音声部（検出信号が含まれる音声）の周波数特性スペクトルの大きさを計算
3. 音声部の周波数スペクトルから非音声部の周波数スペクトルを減算
4. 逆フーリエ変換をして非音声部が低減された時間領域波形を導出

信号、音声、ノイズをそれぞれ`x(n)`,`s(n)`,`d(n)`とすると

```math
x(n) = s(n) + d(n)
```
springで困った時のメモ

## JPA

#### saveメソッドを呼び出せば呼び出すほど遅くなる

```java
public void entitySave(List<Entity> eList) {
 for (Entity e : List<Entity> eList) {
  entityRepository.save(e);
 }
}
```

上記のように大量のデータをinsertする時、処理速度がどんどん遅くなる
![image.png](https://qiita-image-store.s3.amazonaws.com/0/33237/5d055ace-4cd6-bd52-7db7-084ec0ef21ae.png)

トランザクションを開始していないから遅かった
@Transactionalをつけてあげれば解決

```java
@Transactional
public void entitySave(List<Entity> eList) {
 for (Entity e : List<Entity> eList) {
  entityRepository.save(e);
 }
}
```

#### Error creating bean with name 'entityManagerFactory'

```
ERROR 7184 --- [  restartedMain] o.s.boot.SpringApplication               : Application run failed

org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'entityManagerFactory' defined in class path resource [org/springframework/boot/autoconfigure/orm/jpa/HibernateJpaConfiguration.class]: Invocation of init method failed; nested exception is org.hibernate.AnnotationException: No identifier specified for entity: demo.user.User
	at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.initializeBean(AbstractAutowireCapableBeanFactory.java:1745) ~[spring-beans-5.1.3.RELEASE.jar:5.1.3.RELEASE]
	
```

***No identifier specified for entity: demo.user.User***

entityが識別できないよ！と言われている

エラー対象であるUser.javaは@Entityをつけているにもかかわらず@Idがなかったことが原因

```java:User.java
@Entity
@Data
public class User {
	@GeneratedValue(strategy=GenerationType.IDENTITY)
	@Column(name = "id")
	private Integer id;
}
```


@Id をつけてあげると解決


```java:User.java
// org.springframework.data.annotation.Id　← これではない！
import javax.persistence.Id;

@Entity
@Data
public class User {
	@Id
	@GeneratedValue(strategy=GenerationType.IDENTITY)
	@Column(name = "id")
	private Integer id;
}
```
[Tips] MacのTouchIDでsudoコマンド認証を行う

a. Terminalを開きます。

b. ルートユーザーに切り替えます

```
sudo su -
```

c. /etc/pam.d/sudoファイルに

```
auth       sufficient     pam_tid.so
```

を追加します。
こんな感じになるはずです。

```
auth       sufficient     pam_tid.so //追加
auth       required       pam_opendirectory.so
account    required       pam_permit.so
password   required       pam_deny.so
session    required       pam_permit.so
```

d. 保存したらterminalを再起動します。
e. sudoでコマンド実行するとtouchIDが使えるようになりました！

<img width="1134" alt="1__sudo___Users_matsumotokazuya__ghq_github_com_kazuooooo_calendy-webapp__sudo_.png" src="https://qiita-image-store.s3.amazonaws.com/0/71154/2906ab6d-a9b5-5d14-1f71-8c106ca2e16b.png">

[参考](https://apple.stackexchange.com/questions/259093/can-touch-id-for-the-mac-touch-bar-authenticate-sudo-users-and-admin-privileges)
Block in EC-CUBE 4

##In EC-CUBE 4
Block is a group of code that which grouped together. EC-CUBE has a Block Management function, and it is possible to change the design by change or move blocks.
In addition, it’s possible to create new blocks and arrange the order of blocks by using Layout Management.

##Create a new Block Management:
Login to Administration screen then choose 
Content Management (コンテンツ管理) ->Block Management (ブロック管理)
On Block Management screen press the button “Create New” (新規作成)
![P1](https://lh6.googleusercontent.com/EWJ2HJjT0G1Yf82lGGmaxJ79CA1rHvknW8SjM-IB2yD0acFZk36-7b_HAp6ipJOAh8apnu21VXMsmLrcoobD5fmF6clWS_ZcwTFj7xFS42geZgSyLq7RvcsEfQxbj38ezpvKsB779JbKU1nFPg)


Enter the name of the Block(ブロック名), file name (ファイル名), and your code (コード) on each field where ever required
Press “Register” (登録) button to create Block.
![P2](https://lh4.googleusercontent.com/kFSJ19qG7iK056Vlsyx9ZhFYpm965Nf3O0hun_FVi4kXFi0vncOTZH7ErHdBII18uqKl4T1CDixbHDel1o5fLl_7RtXhdWbjq5hMPa5VQW1yrg7jyJjnlbtsjKCQjnAFQ64vqSNqQCdzYEyVDw)



Then you can choose where to set the Block in Layout Management (レイアウト管理)
![P3](https://lh3.googleusercontent.com/pp-mmR7QIvf9AjEpkEuJEuRs-qFpA8l3dBgGNC3PE0jtzewm_g0ImuoI0eaWSjBDGh56GtlqhfZSXyhN53_m8VW3n8pFLXYCY-Z88Z3GhDZgAcV105BMBEFaMGI-099fW6ctYiFp)


In Layout Management,  you only can delete new Blocks, the default Blocks can’t be deleted.
![P4](https://lh4.googleusercontent.com/3MbtnDFYM6uxQgqnq6E8BinLax59Lfl1LV6qI0e3FliotHVIHT_tFPsG-8DmD4WR88WAyiXzW0YOUzx1T4yLFIH608FgGlLQu60W5bQNhKbqaVSBdl8W2p-HhRky24yFBTkGGSe3IYKKCIFobA)
ユーザースクリプトのすゝめ

#ユーザースクリプトとは
>ユーザースクリプトは、Web ページを見たり使ったりするときの主導権をあなたに与えます。スクリプトをインストールすれば、ページの機能を使いやすくしたり、新たな機能を追加したり、迷惑なものを取り除いたりして、訪れたサイトをより便利にカスタマイズすることができます。Greasy Fork では、ユーザーが開発・投稿したスクリプトを公開しています。これらのスクリプトは自由にインストールでき、使うのも簡単です。
https://greasyfork.org/ja より引用

つまり、自分の好き勝手にサイトを改造できちゃうんです！
スクリプトはjQueryで書けるので誰でも手軽にスクリプトを作れるんです♪
有名なものとしては Tampermonkey が有名で使いやすいです。

#使い所は？
よく使う場面としてはテストの簡略化。
CVテストなど、inputの入力が面倒な時にユーザースクリプトで値を事前にセットしておくことで入力する手間を省くことができます。

#コード
```jquery:UserScript
// ==UserScript==
// @name        ユーザースクリプト名
// @namespace   @
// @description ユーザースクリプトの說明
// @include     対象URL
// @version     1
// @grant       none
// @require     http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js（jQeuryが使えるように読み込む）
// ==/UserScript==

$(function($){
    $("#current_street").val("引越し元住所");
    $("#current_building").val("引越し元マンション名");
    $("#current_building_type").val(2);
    $("#new_zip_code").val("1000001");
    $("#new_city").val("引越し先市区町村");
    $("#new_street").val("引越し先住所");
    $("#new_building").val("引越し先マンション名");
    $("#new_building_type").val(2);
});
```

このようにテストを簡略化したいページ用にユーザースクリプトを組んで対象URLにアクセスするだけで
![スクリーンショット 2018-12-04 10.24.02.png](https://qiita-image-store.s3.amazonaws.com/0/146532/532164ac-83c4-a206-8921-fed7044f3cb3.png)
値が自動入力されます。

#まとめ
作り込めばCVテストを全自動にするなど、色々なことができるかもしれませんね。
もし周りから「テストがめんどくさい！！！」みたいな声が上がった時、テスト用のユーザースクリプトを作って楽にさせてあげてください。
では、ユーザースクリプトで快適なネットサーフィンライフを♪

# お知らせ
エイチームグループでは一緒に活躍してくれる優秀な人材を募集中です。
興味のある方はぜひとも[エイチームグループ採用ページ](http://www.a-tm.co.jp/recruit/)（[Webエンジニア詳細ページ](http://www.a-tm.co.jp/recruit/requirements/career/lifestylesupport-webengineer/)）よりお問い合わせ下さい。

# 明日
明日は@rf_pさんがチャットの情報を簡単にストックされていく仕組みについて書いてくれるそうです。
お楽しみに♪
Laravel QueueでJobに値を渡すときにハマった話

## 概要

- Laravel Queueを使って非同期処理をしたい
- Jobにはテキストデータを渡し、それに従って処理をしたい
- `job` っていうプロパティを使ってハマった話


## やったこと

- artisanでjobの雛形を作り

```
$ php artisan make:job Test
```

- 値を受け取れるように変更

```
$ cat app/Jobs/Test.php

// 抜粋

    protected $job;

    public function __construct($job)
    {
        $this->job = $job;
    }

    public function handle()
    {
        dump($this->job);
    }
```

- dispatchする

```
$ php artisan tinker
Psy Shell v0.9.7 (PHP 7.1.20 — cli) by Justin Hileman
>>> dispatch(new \App\Jobs\Test(1));
```

- queue:workすると...

```
.
.
.
        "blade.compiler" => array:1 [ …1]
      ]
    }
    #encrypter: null
    #connectionName: "redis"
  }
  #job: "{"displayName":"App\\Jobs\\Test","job":"Illuminate\\Queue\\CallQueuedHandler@call","maxTries":null,"timeout":null,"timeoutAt":null,"data":{"commandName":"App\\Jobs\\Test","command":"O:13:\"App\\Jobs\\Test\":7:{s:6:\"\u0000*\u0000job\";N;s:10:\"connection\";N;s:5:\"queue\";N;s:15:\"chainConnection\";N;s:10:\"chainQueue\";N;s:5:\"delay\";N;s:7:\"chained\";a:0:{}}"},"id":"AEi0PsHbYjQaO8lAWqtmjDDCeV73ccnG","attempts":0}"
  #decoded: array:8 [
    "displayName" => "App\Jobs\Test"
    "job" => "Illuminate\Queue\CallQueuedHandler@call"
    "maxTries" => null
    "timeout" => null
    "timeoutAt" => null
    "data" => array:2 [
      "commandName" => "App\Jobs\Test"
      "command" => "O:13:"App\Jobs\Test":7:{s:6:"\x00*\x00job";N;s:10:"connection";N;s:5:"queue";N;s:15:"chainConnection";N;s:10:"chainQueue";N;s:5:"delay";N;s:7:"chained";a:0:{}}"
    ]
    "id" => "AEi0PsHbYjQaO8lAWqtmjDDCeV73ccnG"
    "attempts" => 0
  ]
  #reserved: "{"maxTries":null,"attempts":1,"timeout":null,"job":"Illuminate\\Queue\\CallQueuedHandler@call","id":"AEi0PsHbYjQaO8lAWqtmjDDCeV73ccnG","timeoutAt":null,"data":{"command":"O:13:\"App\\Jobs\\Test\":7:{s:6:\"\u0000*\u0000job\";N;s:10:\"connection\";N;s:5:\"queue\";N;s:15:\"chainConnection\";N;s:10:\"chainQueue\";N;s:5:\"delay\";N;s:7:\"chained\";a:0:{}}","commandName":"App\\Jobs\\Test"},"displayName":"App\\Jobs\\Test"}"
  #instance: Illuminate\Queue\CallQueuedHandler {#793
    #dispatcher: Illuminate\Bus\Dispatcher {#792}
  }
  #container: Illuminate\Foundation\Application {#2}
  #deleted: false
  #released: false
  #failed: false
  #connectionName: "redis"
  #queue: "default"
}
```

QueueにはRedisを使っていたが、 `Illuminate/Queue/Jobs/RedisJob` オブジェクトが返ってきた。

## 修正

最初はLaravelのバージョンによって変数の受け取り方が違うのかと仕様をみていたが、どうやら `job` という名前がかぶっているだけっぽい？
他の名前で変数をうけるようにする

```
$ cat app/Jobs/Test.php

// 抜粋

    protected $work_id;

    public function __construct($work_id)
    {
        $this->work_id = $work_id;
    }

    public function handle()
    {
        dump($this->work_id);
    }
```

- 小一時間はまった。。
JSDOMをSeleniumから使ってみよう

この記事は [Selenium/Appium Advent Calendar 2018](https://qiita.com/advent-calendar/2018/selenium_and_appium) の6日目の記事です。

こんにちは！
速いのが良いですか！！
速い方が都合が良いんですか！！！
遅いのは...私たちなのかもしれません...

Seleniumが遅いならJSDOMを使えばいいじゃない。


JSDOM
================

https://github.com/jsdom/jsdom
ガシャーン ガシャーン
DOM描画をしないヘッドレスブラウザーだよ
JavaScriptをV8エンジンでこなしてくれるクソ速いやつだよ

## Seleniumじゃないじゃん！

はい。
Seleniumの話をします。


JSDOMにWebDriver APIを提供するラッパー「taxi-rank」
================================================================

https://github.com/ForbesLindesay/taxi-rank
JSDOMをSeleniumから使えるようになります。これでクソ速くなるよ。
[Awesome Selenium](https://github.com/christian-bromann/awesome-selenium) にも載ってない知る人ぞ知るやつだよ。

アッアッ 何か「意味無ぇー」とか言ってる声が一部JSerから聞こえてくるようなッ気がッ
そんなことはッたぶんないッ


taxi-rankのうれしいところ
================================

## JS以外の言語からJSDOMを使える

JSからJSDOMを直接扱うよりは当然オーバーヘッドが生じますが、他のPythonなどのクライアントライブラリーからJSDOMの高速処理の恩恵にあずかれるようになります。

## 画面描画のあるブラウザーとの使い分け運用が容易になる

まずJSDOMで試して、だめな場合だけChromeを使って...みたいな使い分けを、ブラウザー自動化コードとしては同じAPIで実現できるようになります。
うまくはまれば、WebDriverベースでも実行時間をかなり短くできるでしょう。

# taxi-rankやってみよう

npmでさくっとインストールしましょう。

```bash
$ sudo npm install taxi-rank -g
```

コマンド `taxi-rank` を実行すると、WebDriverのコマンドを待ち受けるサーバーが起動します。
既定の待ち受けポートは 9516/tcp です。

```bash
$ taxi-rank

listening on http://localhost:9516
```

この辺をよきにはからってくれるTaxiRankDriverみたいな感じのクライアントライブラリーは、現時点ではtaxi-rankの開発者が別に作っている [Cabbie](https://github.com/ForbesLindesay/cabbie) というラッパー以外にありません。今回はかんたんな検証のため、RemoteWebDriverで直接接続して操作します。

```python
driver = webdriver.Remote(command_executor='http://localhost:9516')
driver.get('http://example.selenium.jp/reserveApp/')
# ... ... ...
driver.quit()
```


ベンチマーク
================

[日本Seleniumユーザーコミュニティの提供するサンプルページ](http://example.selenium.jp/reserveApp/)上で基本的なAPIを100回実行して、1回あたりの平均値を取得するだけの簡易ベンチマークをやりました。
https://github.com/hiroshitoda/WebDriverBenchmark.py

実行環境は手元のMacBook Pro実機で、スペックは次の通りです。

| | |
|:--|:--|
| CPU | Intel Core i5 2.3GHz |
| メモリー | 16Gbytes |
| OS | macOS Mojave 10.14.1 |
| Python | 3.7.0 |


結果は次の通りでした。
超速い、そらそうよとしか言いようがないですが...

| | | | |
|:--|:--|:--|:--|
| | ChromeDriver | FirefoxDriver | taxi-rank |
| webdriver.get                | 65ms | 160ms | 15ms |
| find_element_by_id           | 7ms | 7ms | 2ms |
| find_element_by_css_selector | 5ms | 4ms | 2ms |
| clear                        | 47ms | 78ms | 2ms |
| send_keys                    | 47ms | 68ms | 2ms |
| click                        | 31ms | 212ms | 4ms |


# taxi-rankのはまりどころ

実戦投入と評価はこれからですが、大事なことをひとつだけ書いておきます。

## スクリーンショットを取得できません

そらそうよ。


# 今回はここまで

次回は...誰かー！ 誰か来てくれーーー！！！
Selenium/Appium Advent Calendar 2018はまだまだ君の挑戦を待っているぜ！
WordPress構築でお世話になっているプラグイン集

プラグインを制するものはWordPressを制す。
そうかもしれないし、そうでないかもしれません。
ただわかっていることは大分助かるってことです。
普段お世話になっているプラグインをまとめます。


## Admin Columns Pro
管理画面の固定ページや投稿などの一覧画面で表示するカラムを簡単に表示非表示できる。とってもお便利。
余計なものは消したくなるため重宝。

[Admin Columns Pro](https://www.admincolumns.com/)

## Advanced Custom Fields PRO
カスタムフィールドを簡単に作成できる。
コイツ、いや、この方なしでWordPressを実装するのは考えられない。。と本気で思う存在感。
公式ドキュメントも充実。

[https://www.advancedcustomfields.com/](Advanced Custom Fields PRO)

## Compress JPEG & PNG images
画像圧縮プラグイン。
メディアアップロードすれば勝手に圧縮してくれるから便利。
無料枠でも約100枚の画像を圧縮できます。

[Compress JPEG & PNG images](https://ja.wordpress.org/plugins/tiny-compress-images/)

## Intuitive Custom Post Order
管理画面上で、投稿やタグなどの順番を直感的にドラッグ＆ドロップで入れ替えできる。
タグを管理画面で並んでいる順番に表側で表示したい時などに重宝。

[Intuitive Custom Post Order](https://ja.wordpress.org/plugins/intuitive-custom-post-order/)

## Query Monitor
いわゆるデバッグツールですな。
PHPエラーや環境情報、リクエストなどを見ることが出来てハッピー。
開発するときには是非入れておきたい一品。

[Query Monitor](https://ja.wordpress.org/plugins/query-monitor/)

## Rewrite Rules Inspector
リライトルールを確認できるツールです。
URLをカスタマイズしたい時、リライトルールを確認するのに便利です。

[Rewrite Rules Inspector](https://ja.wordpress.org/plugins/rewrite-rules-inspector/)

## WP Multibyte Patch
日本語サイトなら有効にするべきでしょう。

[WP Multibyte Patch](https://ja.wordpress.org/plugins/wp-multibyte-patch/)

## Yoast SEO
ページタイトル、メタディスクリプション、FBシェア、Twitterシェアなどを設定できます。
ACFと同様に必要性を感じているプラグインです。

[Yoast SEO](https://ja.wordpress.org/plugins/wordpress-seo/)

## WP Offload Media Lite
AWS S3とWordPressとの連携するために使うプラグインです。

[WP Offload Media Lite](https://ja.wordpress.org/plugins/amazon-s3-and-cloudfront/)

## Simply Static
レアケースだとは思いますが、WordPressを静的に書き出す際に使うプラグインです。

[Simply Static](https://ja.wordpress.org/plugins/simply-static/)

## Duplicate Post
記事を複製するプラグインです。
ダミー記事を増やすためによく使ってます。

[Duplicate Post](https://ja.wordpress.org/plugins/duplicate-post/)
RelationのModelオブジェクトを Array に変換せず、 Relation そのままMemcachedにキャッシュさせたい場合

# はじめに
RelationのModelオブジェクトを `Array` に変換せず、 `Relation` そのままMemcachedにキャッシュさせる方法について記載していきます。

# 結論
結論から言いますと、 `load` を呼び出すことで強制的にSQLを発行させ、ロードすることができます。

# ことのはじまり
## Modelオブジェクトをキャッシュしたい
Memcachedへオブジェクトをキャッシュさせるために以下のコードを実行してみましょう。

```ruby
Rails.cache.fetch('key'){
  Character.where(attack_type: 1)
}
```

あら？キャッシュしたと思ったんですが。。。

```
Rails.cache.read('key')
D, [2018-12-06T09:41:50.742460 #14296] DEBUG -- : [Shard: slave1]  Character Load (7.2ms)  SELECT `characters`.* FROM `characters` WHERE (`characters`.`deleted_at` IS NULL) AND `characters`.`attack_type` = 1
[#<Character:0x007fb2802c8280 ...
```

Memcachedからオブジェクトを取り出して使おうとするたびにSQLが発行されます。これじゃあまりキャッシュする意味がありません。

これは遅延評価により、実際使うまでSQLも発行されず、オブジェクトも生成されないためです。
そしてMemcachedにはSQL発行＆レコードがロードがされてない `Relation` オブジェクトのみがキャッシュされていることになります。

## どうする？

他の記事で書いてある通りに、 `to_a` を呼び出すことで、 `Array` に変換して保持する方法もあります。それもよい方法だと思います。
変換する段階で(実際操作する段階で)SQLが発行され、オブジェクトが生成されるためです。

```ruby
Rails.cache.fetch('key'){
  Character.where(attack_type: 1).to_a
}
```

## でも、Relationの機能も使いたい。
せっかくRails使っているし、 `Relation` の機能もそのまま使いたいという要望もあるかと思います。

(Arrayを無理やりにモンキパッチして、 `Relation` 風にしてもよいかもしれませんが、そこまでやる？的な感じがしますね。）

Railsのソースをみると以下のロジックが書いてあります。

```ruby
module ActiveRecord
  class Relation
    ...

    # Causes the records to be loaded from the database if they have not
    # been loaded already. You can use this if for some reason you need
    # to explicitly load some records before actually using them. The
    # return value is the relation itself, not the records.
    #
    #   Post.where(published: true).load # => #<ActiveRecord::Relation>
    def load(&block)
      exec_queries(&block) unless loaded?

      self
    end
  end
end
```

コメントを見ますと、 " __明示的にレコードをロードする必要があれば、これ(load)をつかってね__ " と記載されています。
そして、実際のロジックを見ますと、実際にクエリを発行していることがわかります。


## 結論

結論は、`load` をつけることです。

```ruby
Rails.cache.fetch('key'){
  Character.where(attack_type: 1).load
}
```

```
obj = Rails.cache.read('key')
[#<Character:0x007fb2802c8280 ...

obj.class
Character::ActiveRecord_Relation
```
やった！SQLを発行しない。 `Array` ではなく、 `Relation` ままでキャッシュさせた！


# まとめ
* `load` をつけることで、ModelのRelationオブジェクトを強制的にロードできる。そしてそれをMemcachedにいれればピュアなオブジェクトキャッシュができる。
IoT/AIの現状と課題　項目出し実験

IoT/AIの現状と課題について、次の8つの関係者への資料を整理中。


 プログラマ

 論理回路設計者

 電気系技術者

 機械系技術者(無機材料技術者を含む)

 有機材料系技術者(医療関係者を含む)

 経営者

情報流通業(新聞、テレビ、Web情報サービスを含む)

 大学関係者(学生・教職員：分野を問わず)



# 1. プログラマ

1.1 言語
1.1.1 python
1.1.2 R
1.1.3 C/C++

1.2 OS
1.2.1 docker

1.3 tool
1.3.1 github
1.3.2 gitlab
1.3.3 bit bucket

1.4 

# 2. 情報流通業(新聞、テレビ、Web情報サービスを含む)
2.1 Webサービス
サービスを提供しデータを蓄積する。
2.1.1 情報検索

2.1.2 機械翻訳

2.1.3 地図検索



2.2 IoT(internet of things)
人が積極的に利用するのがWebサービスだとすれば、
物がかってにネットで情報伝達するのがIoTだと仮定。

2.3 


# 3. 論理回路設計者
3.1 論理回路
3.1.1 GPU
3.1.2 量子コンピュータ
3.1.3 FPGA


# 4. 電気系技術者
4.1 電源
4.1.1 発電機
4.1.2 配電網
4.1.3 
4.2 ネットワーク
4.2.1 Wireshark
4.2.2 EtherCAT



# 5. 機械系技術者
5.1 故障診断
5.2 自動運転
5.3 安全分析

# 6 材料系技術者(医療関係者を含む)
6.1 電池材料
6.2 量子コンピュータ用材料


# 7.経営者
7.1 finch
7.2 知財管理


# 8.大学関係者(学生・教職員：分野を問わず)
8.1 産官学連携
8.2 学生ベンチャー支援
8.3 


# 9. 官庁の分布
9.1 総務省
9.2 文部科学省
9.3 経済産業省
9.4 国土交通省
9.5 


#参考資料
## Qiita外

IoT と AI の現状と今後　神奈川工科大学 創造工学部 ホームエレクトロニクス開発学科 教授 スマートハウス研究センター センター長　一色正男

日本のIoT・AIの技術的対応　国の対応　国立研究開発法人 新エネルギー・産業技術総合開発機構 渡邉 政嘉
https://www.kanagawa-iri.jp/wp/wp-content/uploads/2PM-A.pdf

 "つながる工場”の現状と課題
http://techfactory.itmedia.co.jp/tf/subtop/features/fanet/

平成29年度 IoT・AI 時代のものづくりと 人の役割変化への対応調査研究

http://www.jmf.or.jp/content/files/houkokusho/29nendo/29mono_h.pdf



情報通信技術をめぐる現状と課題 (参考) 平成29年12月18日　総務省
http://www.soumu.go.jp/main_content/000522909.pdf

第 2 節 人工知能(AI)の現状と未来 情報通信白書　２８　総務省
http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h28/pdf/n4200000.pdf

IT利活用ステージアップの現状・課題・方向性
上席研究員 蔭西義輝 徳島経済研究所

http://www.teri.or.jp/chousa_kenkyu_pdf/2017-99itriyou.pdf

 
IoT/AI時代への技術潮流と日本の課題
https://www.jst.go.jp/crds/sympo/20170307/pdf/20170307_01.pdf


実態調査にみる IoT/AI時代の組込み産業の現状と課題
独立行政法人 情報処理推進機構 社会基盤センター 調査役 工学博士 田丸喜一郎
https://www.ipa.go.jp/files/000067953.pdf
## Qiita自己資料
ドメインモデルにView固有の事情が入ってくることの対策

# はじめに
DDDではよく「コアドメインに集中する」ということが言われますが、これは視点を変えればいかにそうではないものたちを適切に分離するか、という話でもあります。
例えば一例としてDDDと[レイヤード|ヘキサゴナル|クリーン]アーキテクチャを組み合わせた設計では、ドメインモデルとHTTPやRDBMSといった固有の技術的な処理をするクラスは層を隔てて分離する、といった設計を見ることが出来ます。

分離する話でいうと、プレゼンテーション層、つまりView部分との分離はというと、JSP等の技術で表現していた時代とは違ってSPAスタイルが定着して以降はサーバーサイドからは物理的に切り離されるようになりました。
しかしながら、案外Viewの事情がドメインモデルに入ってくるということは今でも起きているのではないかと感じています。

なぜ起きるのか、その対策について自分たちのプロジェクトでのケースで書いてみたいと思います。

# Viewの事情がドメイン層に入ってくるとき

どんな時に入ってきやすいのかを確認するために、例としてこんな仕様があったら、を考えてみたいと思います。

- 開発対象のアプリケーションはWEBとスマホアプリに対応しているとします
- 個人毎の設定ページより以下の２つのアプリケーションカスタム設定がおこなえるとします
  - アプリケーションのテーマカラーの変更ができる
  - アプリケーションの文字フォントの変更ができる
- なお、この設定はブラウザおよびスマホ共通で反映される必要があります

さて、このデータはどこに持つのが良いでしょうか。

複数のViewを横断した永続化が必要となるとLocalStorageなどは使えないので、クライアントサイドからするとサーバーにリクエストしてDBに格納してもらう必要がありそうです。
そこでサーバーサイド担当のエンジニアは事情を汲んで適切と思われる場所を考え、その結果ユーザーごとの設定情報だからということでドメイン層のUserクラスを拡張、例えばこんな感じの設計になりがちではないでしょうか。

```scala:user.scala
case class User(
  id: UserId,
  name: UserName,
  ...
  setting: UserSetting,
  ...
)

case class UserSetting(
  themeColor: ThemeColor,
  font: Font
)
```

テーマカラーやフォントというのは、いかにもViewっぽい雰囲気を出したかっただけのサンプルなのですが、ここでのポイントはView横断で保存する必要が出た時にフロントエンドからするとサーバーサイドに依頼するしか選択肢もなく、、というのが入り込んできやすい原因かと考えています。

今はWEB画面とスマホアプリの両方を提供するサービスも多いのでこういうシーン多くなってきてませんか・・？

# 私たちのプロジェクトにおける対策

フロントエンドチームで自由に使えるDBを持つこと、です。

なお、実際のところは対策をした、というよりは使えるDBがあって自然とそういう方向に進んでいった、というのが正確なところです。

背景はこうです。今のプロジェクトではまさに上で述べたようにWEB画面とスマホアプリを提供していて、通知処理等の関係からFirebaseを導入しました。
このFirebaseにはDatabaseがあり、javascriptやswiftからこのDBを操作することが出来ます。
ブラウザにさくっと保存したいデータはLocalStorageに、ブラウザ・アプリを横断したようなデータはFirebase DBにと使い分けられています。この選択肢ができたことでサーバーサイドエンジニアと設計について話す時もView固有のデータかドメイン由来のデータなのかを議論する文化が出来ました。
そうしてView固有なデータの永続化責務はフロントエンドチーム内に閉じるようになっていきました。

### Firebaseじゃなくても
なお、Firebaseを導入しなくても、例えばGCPだとCloud FunctionやGoogle App EngineでNode.jsを使って簡単にWEBサーバーとDBアクセス処理を書くことができるようになってきているので、View用DBを持つことの敷居はかなり低くなっていると言えます。

# おわりに
サーバーサイドエンジニアな自分的にはDBは我々の管理下にある、という思い込みがあったので対策としてのこの発想に至らなかった、という点が自分的には新しかったポイントでした。

仮にサーバーサイドで処理するとしても、異質だと分析しているのに無理してドメインモデルにマッピングしてRepository経由でDBに保存するくらいなら、Controllerで依頼を受けてDAO経由でDBに保存、ユースケース層・ドメイン層には持ち込まないほうがベターに思います。
EOS の inline action と deferred action

## 分類と説明
スマートコントラクトの中で、他のスマートコントラクトとやり取りしたい場合は、アクションを送信すれば良いです。
EOS 上の送信は、`inline（同期呼び出し）` と　`deferred（遅延呼び出し）` 2種類があります。

|分類        |inline action            |deferred               |
|-----------|-------------------------|-----------------------|
|意味        |その場で他のアクションを呼び出す|遅延して他のアクションを呼び出す|
|送信タイミング|同期実行                   |非同期                  |
|失敗の動き   |**同一トランザクション**にある<br>呼び出しターゲットが失敗したら呼び出し元のアクションも失敗|トランザクションが**異なる**<br>呼び出しターゲットが失敗しても呼び出し元アクションに影響なし|

## inline action の送信
処理の中で `action` を作成し、`send()` を呼び出して送信する

```c++
#include <eosiolib/eosio.hpp>
using namespace eosio;

class hello : public eosio::contract {
  public:
    using contract::contract;

    /// @abi action 
    void hi( account_name user ) {
      action(
        permission_level{get_self(), "active"_n}, // 使う権限
        get_self(),                               // ターゲットアカウント
        "say"_n,                                  // ターゲットアクション
        name{user}                                // ターゲットアクションのパラメータ
      ).send();
    }

    void say(string name) {
      print("Hello, ", name);
    }
};

EOSIO_ABI( hello, (hi) )
```

**他のアカウントのアクションを呼び出す時は、別の設定が必要になるので、また別記事で**

## deferred action の送信

```c++
#include <eosiolib/eosio.hpp>
#include <eosiolib/transaction.hpp>

using namespace eosio;

class hello : public eosio::contract {
  public:
    using contract::contract;

    /// @abi action 
    void hi( account_name user ) {
      transaction txn{};
      const uint128_t sender_id = 100;              // 遅延呼び出しに付ける任意の id

      txn.actions.emplace_back(
        action(
          permission_level{get_self(), "active"_n}, // 使う権限
          get_self(),                               // ターゲットアカウント
          "say"_n,                                  // ターゲットアクション
          name{user}                                // ターゲットアクションのパラメータ
        )
      );

      txn.delay_sec = 60;                           // 遅延する秒数
      txn.send(sender_id, user);
    }

    void say(string name) {
      print("Hello, ", name);
    }
};

EOSIO_ABI( hello, (hi) )
```

## まとめ
同期で別のアクションを呼び出すだけではなく、指定する秒数を遅延してから他のアクションを実行することもできるので、もっｔ柔軟な処理を実装できそうですね。
人見知りなシステムエンジニア・プログラマが他の人に、口頭で話しかける時に注意したいポイント。

- イヤホンをつけているかどうか。集中モードかもしれないし、ただ音楽を聴きたいだけかもしれない。だけど参考情報にはなる。
- 顔色。雰囲気。エネルギーの状態。今話せる状態かどうか。機嫌を見てみる。ハンターハンターの念の色は何色か？的な。
- ディスプレイに映し出されている中身。Youtube動画など、何か趣味関係のものが映し出されていたら、話しかけやすいタイミングかも。
- プロジェクトやセクションの状態。今メンテナンス中じゃない？昨日徹夜で対応してなかった？最低限のステートを確認しておく。
- このようなことを1秒ぐらいで全部さっと判断できるようにしておく。

[yumainauraエンジニア - Google Search](https://www.google.co.jp/search?q=yumainaura%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2&oq=yumainaura%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2&aqs=chrome..69i57j69i60l2j69i65j69i60j69i65.3101j0j7&sourceid=chrome&ie=UTF-8)








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
json-serverを使ったAPIモック作成メモ

フロントでAPIの実装したくてもできない時にローカル環境にAPIモックを作れるサービスを探してみたらありました。
↓公式リポジトリこちらです。
[json-server](https://github.com/typicode/json-server)


## インストール
インストール方法はこちらです。

```
$ npm install -g json-server
```

## 使い方
### 1. db.jsonというファイルを作成

```json:db.json
{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}
```

### 2. json-server起動
```
$ json-server --watch db.json
```

### 3. アクセスする
起動させるとこんな感じでターミナルに表示されます。
<img width="600" alt="スクリーンショット 2018-12-06 9.39.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/182399/0042e770-6634-6763-e44e-ba8e3184c18e.png">
該当するURLにアクセスできます。

#### 別タブでターミナル開いてcurl
curlで確認する場合はこう。

```
$ curl -i http://localhost:3000/comments  
```

POSTの時

```
$ curl -i -X POST http://localhost:3000/comments -d body=test
```


## あとは実際の使いたいAPIに合わせてjsonを変更
あとは実際の使いたいAPIに合わせてdb.jsonを変更していけば良い。



## 参考
- [公式リポジトリ](https://github.com/typicode/json-server)
Microsoft Flowのアプリからワンタップで定型文のメールを送信する

## はじめに
この記事はウェブクルー Advent Calendar 2018の6日目の記事です。
昨日は@kouaresさんの「[Kubernetesの Service についてまとめてみた](https://qiita.com/kouares/items/94a073baed9dffe86ea0)」でした。

## 概要
Microsoft Flowのアプリからワンタップで定型文のメールを送信する

## 前提条件
- Microsoft Office 365を導入している
- 勤怠などの連絡がメール文化

## きっかけ
弊社はリモートワークの連絡や遅刻の連絡をメールで行うルールになっていて
毎回、定型文のメールを送る必要があるものに関してはワンタップで済ませたいと思い
コード書かないで実現できる方法を探した結果、Microsoft Flowにたどり着きました

### Microsoft Flowとは
- Office365に含まれているIFTTTっぽいサービスです
- 詳しくは [Microsoft Flowのページ](https://japan.flow.microsoft.com/ja-jp/) を参照してください

## 設定方法
### 「上司に "今日は在宅勤務にする" というメールを送信する」というテンプレを利用する
![1.png](https://qiita-image-store.s3.amazonaws.com/0/41208/90f61def-f04d-c7b8-ab2c-ee7d0b70ea98.png)

### Send an emailの設定
- 宛先、定型文をセットする
![3.png](https://qiita-image-store.s3.amazonaws.com/0/41208/8d96395d-574c-440a-b58c-4857b65f406a.png)


### 不要なステップを削除する
- Send a push notificationが不要なら削除する
- Get my profile と Get managerを削除します

### 日付などの動的変数を追加する場合
- 日付のフォーマットは必要があるのでタイムゾーンの変換ステップを追加する
![4.png](https://qiita-image-store.s3.amazonaws.com/0/41208/1f9a96ca-0262-6486-94cb-8413a939aedb.png)


- 変換後の時間という変数ができるのでセットする

### Flowのタイトルを修正する
![5.png](https://qiita-image-store.s3.amazonaws.com/0/41208/9b5f1e3f-4a37-5c74-8e16-ff7fcdc24384.png)


## Android or Apple の Flowアプリをインストールする
- アプリのボタンからワンタップでメールが送信できるようになる
![6.png](https://qiita-image-store.s3.amazonaws.com/0/41208/132c1db3-2b73-22c5-22c2-78f5b23dfec8.png)


## さいごに
Microsoft Flowは便利なので色々、自動化できそうです



ウェブクルーでは一緒に働いていただけるエンジニアを[随時募集](https://hrmos.co/pages/1004681658307198976/jobs/0000027)しております。
お気軽にエントリーくださいませ。
QGISをRから利用する（ようになりたい）独習者のふり返り

はじめに
　QGISをRから利用する方法は、(2016)『岩波データサイエンス Vol.4 特集 地理空間情報処理』の「RとGISの連携（水谷貴行・朝日孝輔）」の章に書いてあるはずだが、何度か開いては挫折している。このページは、本当にひとりで、Webページの数々の解説と書籍を頼りに、QGISの利用を進めてきた独習者が、何とかQGISそのものに挫折せず、学習してこれた理由の一端を記したメモである。大学の講義やGISソフトウェアメーカーの講習会を受講してからGISの利用を始めたほうが、効率的かもしれない。（GISの専門家は、独習が可能なための環境構築の努力を積み重ねている）

　最寄りの公立図書館で「QGIS」の本を検索すると、今木洋大・岡安利治(2015)『QGIS入門【第2版】』[古今書院](http://www.kokon.co.jp/book/b209016.html)と、(2016)『岩波データサイエンス Vol.4 特集 地理空間情報処理』[岩波書店](https://www.iwanami.co.jp/book/b266361.html)の2冊が検索結果にあがってくる。

　『岩波データサイエンス Vol.4』の目次から2つだけ紹介する。
〈実践編〉
　　・地理空間情報入門―QGISを使って（朝日孝輔・水谷貴行）
　　・RとGISの連携（水谷貴行・朝日孝輔）

　GISをはじめて操作する初心者として「地理空間情報入門―QGISを使って」の事例紹介をQGISで再現することから始めた。手元に『QGIS入門【第2版】』を用意してあったが苦労した。まず、『QGIS入門【第2版】』を通読する根気がない。『岩波データサイエンス Vol.4』の「地理空間情報入門―QGISを使って」の章は、コラム的な部分も交えて、親切に説明してくれている（と、後から考えれば思う）。『QGIS入門【第2版】』は、現在のQGISの最新バージョンは3.4であるのに対して、バージョン2.Xでの説明だが、いまも充分に役立つ書籍だ。

　『QGIS入門【第2版】』の目次から、本の構成の大枠を見てみる。

第1部　QGISの基本操作
第2部　QGISのデータ解析ツールとプラグイン　
第3部　QGISによる空間情報解析事例　　　　　第4部　付録

　第3部の事例に注目しておきたい。『岩波データサイエンス Vol.4』の「地理空間情報入門―QGISを使って」の事例をQGISで再現することに挫折しても、『QGIS入門【第2版】』の事例を試す必要がある。そして、『QGIS入門【第2版】』が辞書のように役立つと気づくことができれば、道程は明るい。


　ArcGISについてのWebページだから、という区別はしないで参照することも重要だ。本当に初心者であると、地理や地図について何も知らずに、いきなり地理空間情報に取り組んでいることが盲点になる。

　ESRI社の　[主題図](https://www.esrij.com/gis-guide/maps/thematic-map/)　[一般図](https://www.esrij.com/news/details/75529/)　[背景図](https://www.esrij.com/gis-guide/maps/basemap/)　といったページが地図の基礎として役立つ。主題データ＋背景図が主題図だとわかれば、地図を見るのが楽しくなる。

　書籍であれば、浦川豪(2015)『GISを使った主題図作成講座―地域情報をまとめる・伝える―』[古今書院](http://www.kokon.co.jp/book/b210782.html)は、厚みがなくて実りの多い本なので、GISに行き詰っている心をいやしてくれるだろう。
wildqatで高校数学を解きたかったけど中学数学が限界だった

# やりたいこと
wildqat（http://mdrft.com/wildqat/ ）を使って高校数学を解きたかったけど、無理だったので中学数学にします。
## 問

```math
f(x) = x^2 - 3x
```
の最小値とその時のxの値を求めよ。

## 中学数学的な解
```math
\begin{align}
f(x) &= x^2 - 3x\\
&= \left(x-\frac{3}{2}\right)^2-\frac{9}{4}
\end{align}
```
となるので、（グラフを書いて）$x=\frac{3}{2}$のとき、最小値$-\frac{9}{4}$

## wildqatで求めた解（コード）
```python
import wildqat as wq
import numpy as np
a = wq.opt()
a.qubo = np.zeros((4,4))
A = [2,1,1/2,1/4]
B = -3 * np.diag(A)
A_sqr = wq.sqr(A)
a.qubo += A_sqr + B
```

```python
a.sa()
> [0,1,1,0]
a.E[-1]
> -2.25
```

# 解説
~~解説するまでもないかもしれませんが…~~
まずかなり恣意的ですが、

```math
x = 2x_1 + x_2 + \frac{1}{2}x_3 + \frac{1}{4}x_4
```
と置きます。このように置くことで、 $ 0 < x \leqq 3.75$だと言えます。
これを　$ 0 \leqq x \leqq 4 $に近づけたいときは

```math
x = 2x_1 + x_2 + \frac{1}{2^1}x_3 + \frac{1}{2^2}x_4 + \frac{1}{2^3}x_5+\cdots
```
と$\frac{1}{2^n}$の項をどんどん増やして行けば良いですね。
$x$の最大値を増やしたいときは、逆に$x$を$4x_1$からはじめたり、$8x_1$からはじめたりしたら良いですね。

脱線しましたがもとに戻りまして、上のようにおいた$x$を$f(x)$に代入すればQUBO行列が求まりますね。
$x^2$の計算が面倒ですが、これはwildqat.sqr()を使えば楽に計算できます。
これがA_sqr = wq.sqr(A)に該当します。
$-3x$の部分はQUBO行列の対角成分のみに関与するもので、B = -3 * np.diag(A)に該当します。

以上を使って解いてみると(a.sa())、

```math
x = \frac{1}{2}+\frac{1}{4} = \frac{3}{4}
```
であることがわかりました。このときに取る最小値はa.E[-1]を使えばわかります（a.E[-1]はコスト関数が最終的に収束した値）。
これが-2.25でしたので、以上より
$x=\frac{3}{4}$のとき、最小値$-\frac{9}{4}$をとることがわかりました。

# 流石にもうちょっと文量増やしたい
ので追記します。
JavaScriptでテキストの幅を取得する方法

描画する前にテキスト幅を事前取得したい場合に使える。

## clientWidth を使った方法

```javascript:clientWidthを使った方法
    const span = document.createElement('span');
    span.style.position = 'absolute';
    span.style.top = '-9999px';
    span.style.fontSize = '13px';
    span.style.fontFamily = 'Segoe UI';
    span.textContent = 'あいうえお';
    // 一旦 DOM Tree に append しないといけない
    document.body.appendChild(span);
    console.log(span.clientWidth);
    // 幅を取得したら remove
    document.body.removeChild(span);
```
事前にとはいいつつも、一旦 DOM に追加しているので、あまりよろしくない。

## measureText を使った方法
```javascript:measureTextを使った方法
    // canvas は DOM Tree に append しなくてもいい
    const ctx = document.createElement('canvas').getContext('2d');
    ctx.font = '13px "Segoe UI"';
    console.log(ctx.measureText('あいうえお').width);
```
簡潔。

## 結論
`measureText` を使った方法が簡潔で良い。DOM Tree を汚さなくて済むのも良い。
Kubernetes上にアプリを展開する

この記事は、「[オンプレミス、Kubernetesで、マイクロサービスを意識したWebアプリをデプロイするまでの軌跡](https://qiita.com/soumi/items/2ef65b0d6e3fb562451e)」の一部です。

# はじめに

Kubernetesの設定が終わったら、実際に作ったアプリをKubernetes上にデプロイしていきます。
前提として、アプリはDockerイメージ化されており、Kubernetesが動いているサーバーからアクセスできるDockerレジストリに登録されている必要があります。

ここでは、プライベートなDockerレジストリが```192.168.0.xxx:5000```で動いていると想定して進めていきます。

# yamlを書いて、デプロイ

今までのシリーズ記事でも使ってきましたが、Kubernetesではyaml形式でデプロイするアプリについての情報を書くことが出来ます。

yamlファイルでは複数の設定を一つにまとめる事が出来るので、以下のようなファイルで1つのアプリを表現することが出来ます。

```yaml:app.yaml
apiVersion: v1
kind: Service
metadata:
  name: sample-service
  namespace: sample-namespace
  labels:
    app: sample-service
spec:
  type: NodePort
  ports:
  - port: 80                <---- アプリが動作するポート
    targetPort: 80          <---- アプリが動作するポート
    protocol: TCP
  selector:
    app: sample-deployment
---
apiVersion: apps/v1beta1
kind: Deployment
metadata:
  name: sample-deployment
  namespace: sample-namespace
spec:
  replicas: 1
  revisionHistoryLimit: 3
  template:
    metadata:
      namespace: sample-namespace
      labels:
        app: sample-deployment
        version: latest
    spec:
      containers:
      - name: sample-deployment
        image: 192.168.0.xxx:5000/sample/sampmle-image:latest
        ports:
        - containerPort: 80 <---- アプリが動作するポート
```

今回は80番で動作するアプリが動いているので80番を指定していますが、4000番で動いているなら4000を、8080が動いているなら8080を指定してください。

Kubernetesでは色々な機能があるのですが、僕の理解では、以下の2つがあればとりあえずアプリを公開することが出来ます。

- Deployment

コンテナイメージを持ってきて、適切なノードの上に展開してくれます。アプリを更新する際も、サービスを止める事無く更新できるように配慮してくれます。
また、同じコンテナを複数立ち上げたり、逆に不要なものを削除したりして、スケーラビリティを確保します。しかし、コンテナが増えたり減ったりする状況で、我々ユーザーはどのコンテナにアクセスすれば良いのでしょうか？
これを解決するのがServiceです。

- Service

自分が管理するコンテナに対する通信を一手に引き受け、状況に応じて適切なコンテナにアクセスを割り振ってくれます。

ひとまず、このセットがあれば最低限アプリは動くと思います。

```shell
$ kubectl apply -f app.yaml
```

今回のyamlではnamespaceを指定しているので、もし存在しない場合は先に作成してください。

```shell
$ kubectl create namespace sample-namespace
```

# デプロイされたポートを確認

デプロイされると、今回の設定では、自動的に外部からアクセスするためのポートが割り振られます。Serviceの情報を見ると、振られたポートが確認できます。

```shell
$ kubectl get services -n sample-namespace
NAME             TYPE       CLUSTER-IP       EXTERNAL-IP   PORT(S)        AGE
sample-service   NodePort   10.107.212.223   <none>        80:30380/TCP   71m
```

今回の場合は、以下のアドレスでアクセスできます。

```url
<Kubernetesが動いているip>:30380
```

アクセスした結果、想定通りの挙動が得られれば成功です。
お疲れさまでした！
Heroku上でRailsデプロイ時にmaster.keyのApplicationError

Rails5.2から secret.yml が消えて、 credentials.yml.enc で秘匿情報を管理するようなったらしい。これをうまいこと使ってやらないと、Heroku上でデプロイに失敗する要因になったりする。

参考：
[Rails Encrypted Credentials on Rails 5.2](https://www.engineyard.com/blog/rails-encrypted-credentials-on-rails-5.2)
[Rails5.2から追加された credentials.yml.enc のキホン](https://qiita.com/NaokiIshimura/items/2a179f2ab910992c4d39)

### 登場人物

```
- config/master.key
- config/credentials.yml.enc
```

それぞれのファイルは、 rails new されたときに自動で追加される。ただし、 `master.key` は `.gitignore` に追加されているのでリポジトリにコミットされない。

### ハマったこと
Heroku上でapplication errorが起きた際に、master.keyの不一致によっておこっていることは、 `heroku logs -tails` で確認できていたけど、なにかの拍子に消してしまっていた `master.key` の再生成の方法がわからなかったため、Heroku上でrailsアプリが読み込めずにエラーになっていた。

つまり、Heroku上の環境変数に登録している `master.key（RAILS_MASTER_KEY）` と、登録されている `credentials.yml.enc` の内容の不一致が起きていたため、application エラーが起こっていた。

いろいろ探した結果、下記の記事にたどり着いた。

参考：[Rails 5.2 で ActiveSupport::MessageEncryptor::InvalidMessage](https://qiita.com/scivola/items/cc06ddbfd94d3118f693)

> [master.key を紛失したらどうなる？（2018-08-01 追記）](https://qiita.com/scivola/items/cc06ddbfd94d3118f693#masterkey-%E3%82%92%E7%B4%9B%E5%A4%B1%E3%81%97%E3%81%9F%E3%82%89%E3%81%A9%E3%81%86%E3%81%AA%E3%82%8B2018-08-01-%E8%BF%BD%E8%A8%98)

の箇所。

素直に、既に生成されてしまっている `config/credentials.yml.enc` を削除して下記を実行すれば `config/credentials.yml.enc` も再生成され、かつ `master.key` も作り直せたので、再生成された `master.key` の内容をherokuの環境変数にセットし直して一件落着。

```
$ EDITOR=vim rails credentials:edit
```

> このとき，config/master.key は，存在していなければ作られるし，存在していればそれが使われる。

とのこと。
デザイナーとStorybookをS3上で共有

デザイナーとStorybookをS3上で共有
=====

おはようございます、[モチベーションクラウド](https://www.motivation-cloud.com)の開発に参画している[@sinpaout](https://github.com/sinpaout)です。

## 開発の流れ
UI部品をStorybookで管理しデザイナーが部品の組合せで画面デザインを行う。
Storybook化されている部品で完結するデザインはワイヤーレベルのもので実装する。
デザインの差異などが発生したらStorybookが正解とする。

## 問題
- デザイナーが簡単にStorybookを閲覧できる環境がない
- 開発現場にいる場合はエンジニアのPCを覗いて閲覧するしかない
- 見ているブランチが古かったりする
- リモートの場合は見れないがどうしているのだろうか！！

## 解決策
- Storybookを静的にビルドしS3で展開てい共有
- 成果物はブランチ単位でビルドし、誰でも簡単に見れるようにする

## S3の展開への流れ

手動で実行するshellを用意し、エンジニアが実行してアップロードする。
将来はCIと連携してPushのたびにビルドされるようにすることも可能。
ブランチ一覧のページを用意し、見ているブランチを認識できるようにする。

### 展開コマンド

```shell
./bin/publish-storybook.sh
```

### 詳細

`aws s3 sync` などのコマンドが使えるようにする。
現場では awsアカウントは開発でログインしているので `aws-cli` は普通に使用可能

#### npm-scriptsの用意

```json
"storybook:build": "rm -rf tmp/storybook && build-storybook -c ./js/.storybook -o tmp/storybook",
```

#### バケットと同期

```shell
# bin/publish-storybook.sh

branch=$(git symbolic-ref --short HEAD)
# "/" は問題ありそうなので一旦 "_" に置き換えておく
folder=$(echo $branch | sed -e "s/[/]/_/g")

yarn storybook:build

# コンテンツはbranchesディレクトリ配下におく
aws s3 sync $STORYBOOK_PATH "s3://$S3_FOLDER/branches/$folder" \
  --delete \
  --acl public-read
```

※ acl が public-read だが後述するセキュリティーで制限している

#### ブランチのデータ
S3上のフォルダー一覧をbranches.txtとして書き出す。
不要な文字列を切り取る。

```shell
aws s3 ls "s3://$S3_FOLDER/branches/" | \
  sed -e "s/ PRE //g" | \
  sed -e 's/[ /]//g' > tmp/branches.txt
```

#### ブランチ一覧の表示用ページ

ブランチ一覧を表示するhtmlファイルもアップロード。
htmlファイルはS3にあれば動作するがgitで管理したいので毎回アップロードしておく。

htmlの中身は同じディレクトリのbranches.txt をajaxで読み込んで
一覧のリンクを表示するのみ。

```shell
aws s3 sync js/.storybook/s3 \
  "s3://$S3_FOLDER" \
  --exclude "*" \
  --include "index.html" \
  --acl public-read
```

## Storybookの一覧

各リンクからStorybookが見れる。

![Storybooks](https://user-images.githubusercontent.com/40750609/49355506-46d70e00-f70b-11e8-9828-2a3b81d616cb.png)

## セキュリティー

ACLをpublicにしているがバケットポリシーで社内からしか見れないようにIP制限する。

バケットポリシージェネレーター：
https://awspolicygen.s3.amazonaws.com/policygen.html

## 後始末

ビルドしたコンテンツの削除処理はS3に任せる。

`バケット` → `管理` → `ライフサイクルルールの追加`

**名前とスコープ**：
ライフサイクル名は分かりやすいのを入力。

prefixはバケットを除いたディレクトリのパス
`my-bucket/storybook/branches` の場合は`storybook/branches` にする。

**移行**：
何もしない

**有効期限**：
`現行バージョン` をチェック
`オブジェクトの現行バージョンを失効する` をチェック
日数を90にする。

これでコンテンツが作成されてから90日後に消去される。

## はまったポイント

S3の静的サイトホスティングのパスが分かりづらい。
htmlファイルなどのコンテンツの詳細にあるリンクは遷移できない。

`バケット名` → `プロパティ` → `Static website hosting` → `エンドポイント` を使う必要がる。

先ず始めてみるならこれだけで十分だがSSLやドメインの設定はCloud Frontで行う。
Firebase HostingでファイルをDeployしてもJavascriptが更新されない問題の解決方法

FirebaseのHostingを使ってた時、DeployしてもJavascriptが更新されないことがあったので調べた。

#解決方法
どうやら、キャッシュの問題らしい。ということで、cmd+shift+R を押せば万事解決！

#参考
https://stackoverflow.com/questions/34192901/firebase-deploy-not-updating-js-file
paizaでインラインアセンブラ その3

#概要

x64で、インラインアセンブラやってみた。
九九やってみた。

#結果


```
    1  2  3  4  5  6  7  8  9 
 1  1  2  3  4  5  6  7  8  9 
 2  2  4  6  8 10 12 14 16 18 
 3  3  6  9 12 15 18 21 24 27 
 4  4  8 12 16 20 24 28 32 36 
 5  5 10 15 20 25 30 35 40 45 
 6  6 12 18 24 30 36 42 48 54 
 7  7 14 21 28 35 42 49 56 63 
 8  8 16 24 32 40 48 56 64 72 
 9  9 18 27 36 45 54 63 72 81 
```

#サンプルコード

```
#include <stdio.h>
int kakeru( int a, int b)
{
    __asm__ volatile ("imul %2, %0;" 
        : "=r" (a) 
        : "0" (a), "r" (b) 
        : );  
    return a;
}
int main(void)
{
    int i, 
        j;
    printf ("   ");
    for (i = 1; i < 10; i++) 
    {
        printf ("%2d ", i);
    }
    printf ("\n");
    for (j = 1; j < 10; j++) 
    {
        printf ("%2d ", j);
        for (i = 1; i < 10; i++) 
        {
            printf ("%2d ", kakeru(i, j));
        }
        printf ("\n");
    }
}


```

#成果物

https://paiza.io/projects/NGeSNBGbf9_eBS628OmSVQ

以上。
Google Cloud Storageの署名付きURLに対してaxiosでPUTするときにFormDataを使おうとしてはならない

[Google Cloud Platform その２ Advent Calendar 2018](https://qiita.com/advent-calendar/2018/gcp2)の6日目の投稿です。


axiosでファイルアップロードしようとして調べると、FormDataを利用する手順が世の中には数多くあります。

axios/axios: Promise based HTTP client for the browser and node.js
https://github.com/axios/axios


ただ、Google Cloud Storage(GCS)の署名付きURLに対してPUTする場合、**FormDataは利用できない**ので、お気をつけください。


## 利用できない理由

FormDataは複数項目をまとめてアップロードできる仕組みで、```Contnent-Type```に ```multipart/form-data``` が自動で指定されます。ここまでなら、署名付きURL生成時に```Contnent-Type``` に ```multipart/form-data``` を指定すれば良いだけなのですが、```multipart/form-data``` の場合、複数項目をアップロードする前提なので、区切り文字```Boundary``` が含まれます。

こいつが**リクエスト時にランダムで生成される**ため、署名付きURLで```Contnent-Type``` に指定するにも指定できず詰みます。(詰みました~


## だめな感じの実装(イメージ)

```js:検証につかれて実行可能なコードを用意するのが疲れました
let uploadUrl = '';
await axios.get(`${apiRootUrl}signed_url?filename=${filename}&content_type=${contentType}`)
.then((res) => {
  uploadUrl = res.data.signed_url;
})
.catch((error) => {
  throw error;
});

const options = {
  headers: {
    'Content-Type': file.type, // ここで指定しても適用されないTT
  },
};

let data = new FormData();
data.append('file', file);
await axios.put(uploadUrl, data, options)
.then((res) => {
  console.log('成功！');
})
.catch((error) => {
  throw error;
});

```

## いい感じの実装(イメージ)

```js:散々ハマった挙げ句、動いた実装から一部持ってきました
let uploadUrl = '';
await axios.get(`${apiRootUrl}signed_url?filename=${filename}&content_type=${contentType}`)
.then((res) => {
  uploadUrl = res.data.signed_url;
})
.catch((error) => {
  throw error;
});

const options = {
  headers: {
    'Content-Type': file.type,
  },
};

await axios.put(uploadUrl, file, options)
.then((res) => {
  console.log('成功！');
})
.catch((error) => {
  throw error;
});

```


## 参考

axios/axios: Promise based HTTP client for the browser and node.js
https://github.com/axios/axios


multipart/form-dataのリクエストで地味にハマったメモ - Qiita
https://qiita.com/Zaki_Tk/items/073f597d52f6fd8e3dcd

FormData オブジェクトの利用 - ウェブデベロッパーガイド | MDN
https://developer.mozilla.org/ja/docs/Web/Guide/Using_FormData_Objects
VSCodeからGitのリモートにアクセスできないときの対処方法（Windows 10）

# はじめに

自分は普段のコーディングにはVSCodeを使用することが多いですが，VSCodeはGit関連の機能も標準で充実しています．ただWindowsで使っているときにGitのリモートリポジトリにアクセスする操作，例えば`git pull`や`git push`を行うと`Permission denied (publickey).`とエラーが出てしまっていたので，対処方法を調べたときのメモです．（sshキーのパスフレーズが入力できない．）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/45310/909c3e7d-4652-0828-31f8-5d1bb62d87a1.png)

# 環境

今回，自分が試した環境は次の通りです．

* Windows 10 Pro
* VSCode 1.29.1
* git version 2.19.2.windows.1

# 前提

ターミナルで`git pull`などすると正常に操作できている状態です．

```console
> git pull origin master
Enter passphrase for key '/c/Users/username/.ssh/id_rsa':
From github.com:username/repository
 * branch            master     -> FETCH_HEAD
Already up to date.
```

# 対処方法

VSCodeでGitのリモートへアクセスするための手順です．

## OpenSSHの指定

GitのOpenSSHを，Gitに同梱されているものでなくWindowsに付属されているOpenSSHを使用するように指定します．

```console
> git config --global core.sshCommand "C:/Windows/System32/OpenSSH/ssh.exe"
```

`.gitconfig`に次のように設定されます．

```toml:.gitconfig
[core]
    sshCommand = C:/Windows/System32/OpenSSH/ssh.exe
```

## ssh-agentサービスの起動

`OpenSSH Authentication Agent`を自動起動するように設定します．PCを再起動するか手動でこのサービスを開始します．
このssh-agentもGitに同梱されているものでなく，Windows標準のものになります．
![image.png](https://qiita-image-store.s3.amazonaws.com/0/45310/320ccfd8-b054-71d2-6693-dbaed1e9da4b.png)

## キーの登録

sshの秘密鍵をssh-agentに登録します．
このssh-addも同じくWindows標準のものを使用するようにしてください．

```console
> ssh-add
Enter passphrase for C:\Users\username/.ssh/id_rsa:
Identity added: C:\Users\username/.ssh/id_rsa (C:\Users\username/.ssh/id_rsa)
```

ここまでの対応で，パスフレーズを毎回入力する必要がなく，VSCodeからも`git pull`や`git push`が使えるようになります．
![image.png](https://qiita-image-store.s3.amazonaws.com/0/45310/4242ac04-d70f-883f-0841-61b4e5827338.png)

# おわりに

参考にしたのはこのissueです．
[https://github.com/Microsoft/vscode/issues/13680](https://github.com/Microsoft/vscode/issues/13680)

ちなみに`ssh-keygen`するときにパスフレーズを設定しなければ，何もしなくてもVSCodeであつかえます．
Vue.jsで麻雀点数計算

Advent Calendar 2018「個人開発 #2 」の6日目の記事です。

##麻雀点数計算はどんなツール？
14牌を選択すると、自動で符計算と役判定をして点数を計算してくれるツールです。
[麻雀点数計算はこちら](https://bashibashi.net/lab/mahjong)

牌を選択する前の画面
<img width="318" alt="スクリーンショット 2018-12-05 21.49.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/72433/e48f8cf7-ae9c-2d01-a92e-059d76ade031.png">

点数計算後の結果は14牌を選択したあとに下部に表示されます。
※役がない場合は何も表示されません。

例１：ツモの場合
<img width="751" alt="スクリーンショット 2018-12-05 20.45.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/72433/aa4b73e8-4d76-a3e9-ac11-1c3e5c5afbed.png">

例２：ロンの場合
<img width="497" alt="スクリーンショット 2018-12-05 20.52.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/72433/cf9ea4ac-4c0f-1500-868b-ee35f6689f1f.png">

例３：暗カンした場合
<img width="383" alt="スクリーンショット 2018-12-05 20.57.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/72433/701d444e-c35d-ff20-b0b0-693956d050f9.png">
・スマホだと横画面が使いやすいです。
・国士無双と鳴きは未対応です。

##作ろうと思ったきっかけ
友達同士で麻雀するときに、始めて間もない人や点数計算はこれからという人が麻雀に親しみやすくなるように作成しました。
4人丁度で麻雀してると直接教えるのも難しいので、そんな時の手助けとしてます。

カメラを使って自動化も考えましたが、知り合いとやる時の牌は大体汚れているか代替の牌（白に紙を貼ってたり）を使用しているため、判断が難しいケースがあるので手動にしました。

##気付き
Vue.jsの勉強を兼ねて作成したのですが、今まで使用していたjQueryよりもシンプルで見やすいコードで実装できました。
Vue.jsと麻雀のいい勉強材料になりました。

最終形にはいくつかの解釈ができるパターン（例えば二盃口と七対子）がありますが、その時は点数が高い方を出力する必要があるので、全上がりパターンを組み立て点数比較するのが一番苦労しました。

#さいごに
もし使う機会が増えてきたら、鳴きやレイアウトを使いやすいように作り込みます。

Advent Calendar 2018 「個人開発 #2」 
昨日は@UedaTakeyukiさんの[静止画ベースの見守りサービス「MONITOR」とセンサハンドラの「PondSlider」を作りました](https://qiita.com/UedaTakeyuki/items/737ee705a902b4479051)でした。

明日は@takuchalleさんが何かを作ってくれます！
Ruby アンインストール・再インストール

#はじめに

1度インストールしたRubyをアンインストールして、

readlineというライブラリを読み込みようにしてRubyを再インストールする手順について。

環境はMacOS

ProgateのRubyインストール方法を参考にHomebrew、rbenv、Rubyのインストール済ませている状態です。（参考：Rubyの開発環境を用意しよう！https://prog-8.com/docs/ruby-env )



##問題点
ローカル環境にて「プロを目指す人のためのRUBY入門（チェリー本）」の勉強を進めていく。
↓
途中で「irbで日本語入力が出来ない？」箇所で止まる。
（irbに関しては→https://www.ruby-lang.org/ja/documentation/quickstart/）

```
ターミナル上
例：irb(main):001:0> a='こんにちは'
=>"こんにちは"
```

上記のように入力しても、
\U+FFE3\U+FFE3\U+FFE3\...と表示されてしまいます。

本での説明によると、
>Macで日本語が表示されず上記のような文字で表示された場合は、Rubyのインストールに一部失敗しています。

とのことです。


##解決策
①インストールしたRubyを、いったんアンインストール

②readlineをインストール

③readlineを読み込みようにしてRubyを再インストール




#Rubyをアンインストール

```
ruby —v # バージョン確認
#ruby 2.5.0
```
```
which ruby # rubyがインストールされている場所を調べる
#/Users/ユーザー名/.rbenv/shims/ruby
```
.rbenvにある。

```
rbenv uninstall 2.5.0  #アンインストール
```

#readlineのインストール
```
brew install readline
```
```
brew link readline --force　＃パスを通す。
```


#Rubyのインストール


Rubyのインストールの前にこちらのコマンドを通す。

```
RUBY_CONFIGURE_OPTS="--with-readline-dir=$(brew --prefix readline)"
```
これでreadlineを通してrubyをインストールする事ができる。

そしてRuby2.5.0をインストール

```
rbenv install 2.5.0
```
※インストールにはかなり時間がかかる。

無事インストールできたかの確認。

```
rbenv versions
```
インストール済みのバージョンが表示される。
その中に2.5.0 が表示されていれば、ちゃんとインストールできている。

今回インストールしたバージョンのRubyを使用するように設定を変更する。

```
rbenv global 2.5.0
```
最後に以下のコマンドで確認。

```
ruby -v　
# ruby 2.5.0p0 　←のように表示されればOK
```
これで無事にRuby2.5.0の設定ができました。



##参考記事
・Rubyのアンインストールから再インストールまで
　https://qiita.com/MotohiroSiobara/items/1c347e5c6fbf268a7083

・【学生初心者必見】rubyのインストール方法　Mac編
　https://tech-camp.in/note/technology/1213/