OmniAICreator/Qiita-1.07M huggingface dataset:
【Rails 備忘録】「has_many先が存在しない場合に除外してインスタンス変数に格納」する書き方。

# はじめに
忘れてしまいがちなので備忘録。

# 条件
**`Project`**モデルに、has_manyで**`Participation`**モデルが関連付けされている。

createされた`project`にuserが参加アクションをすると、`participation`が該当のprojectにぶら下がる形でcreateされる。

なので、Projectのインスタンスであるprojectがparticipationを持っていない（ `@project.participations => []` ）ということがありえる。

```project.rb
class Project < ApplicationRecord
  has_many :participations
・
・
・
```

#viewでparticipationを持っているprojectだけを表示したい。
やり方として一番簡単そうなのは、例えばcontrollerで
`@projects = Project.where(user: current_user)`
みたいな感じにして、viewテンプレートで

```show.html.erb
<%= @projects.each do |project| %>
  <% if project.participations.present? %>
    <% project.name %>
  <% end %>
<% end %>
```
↑と書いてしまえばよいが、if文で毎回チェックさせるのもイマイチなので、
　controllerで`@project`を格納するタイミングで`participation`がないものを**除外**させたい。



# participationを持っているprojectだけを格納したい
答えを先に書くと、**`includes`**と**`where`**を駆使して、

`.includes(:participations).where(participations: Participation.all)`
みたいな書き方をすればよい。


↓例：

```participations_controller.rb
class ParticipationsController < ApplicationController

  def show
    @participation = Participation.find(params[:id])
    @participations = Participation.search_by_client(current_client)
    @projects = Project.where(client: current_client).where.not(status: "finished").
                  includes(:participations).where(participations: @participations)
  end

```

```show.html.erb
<%= @projects.each do |project| %>
  <% project.name %>
<% end %>
```
pythonで文字列リストをnp.arrayに変換する時の速度比較

# 概要
自然言語処理などでは、文や文書を分散表現に変換する際、文字列のリストに単語ベクトルを適用して変換する必要がある。

これをできるだけ速く行いたいので、速度比較して見た。
方法は[このページ](https://qiita.com/ysk24ok/items/6736c8d8cc6eb06c6aa1)を参考にした

- 2019/07更新: 配列の要素数が少なすぎて、呼び出しのオーバヘットが大きくなっているのではないかと言うご指摘を踏まえて更新しました。

# 問題設定・評価
jupyterの `%%timeit` で評価をおこなった
擬似問題として以下を用意し、足し合わせが最も速くなるものを比較した

## 配列が長い時
```python

a = ['a', 'b', 'c'] * 100
b = {'a': np.arange(100), 'b': np.ones(100), 'c': np.zeros(100)}
```

## 配列が短い時
```python

a = ['a', 'b', 'c']
b = {'a': np.arange(100), 'b': np.ones(100), 'c': np.zeros(100)}
```

# 各種実行方法
## for文
```python
%%timeit
c = np.zeros(100)
for x in a:
    c += b[x]
```

## 内包表記
```python
%%timeit
np.add.reduce(np.array([b[x] for x in a]))
```

## map
```python
%%timeit
np.add.reduce(np.array(list(map(lambda x: b[x], a))))
```

## np.frompyfunc
```python
def d(x):
    return b[x]

f = np.frompyfunc(d, 1, 1)
```

```python
%%timeit
np.sum(f(a))
```

# 結果
## 配列が長い時
内包表記が一番早くなった。
- for文： `453 µs ± 45.4 µs per loop (mean ± std. dev. of 7 runs, 1000 loops each)`
- 内包表記： `175 µs ± 185 ns per loop (mean ± std. dev. of 7 runs, 1000 loops each)`
- map： `189 µs ± 1.07 µs per loop (mean ± std. dev. of 7 runs, 1000 loops each)`
- np.frompyfunc： `310 µs ± 316 ns per loop (mean ± std. dev. of 7 runs, 1000 loops each)`


## 配列が短い時
何と、普通にfor文が速いという結果になった。
- for文： `6.57 µs ± 61.9 ns per loop (mean ± std. dev. of 7 runs, 100000 loops each)`
- 内包表記： `9.41 µs ± 112 ns per loop (mean ± std. dev. of 7 runs, 100000 loops each)`
- map： `10 µs ± 224 ns per loop (mean ± std. dev. of 7 runs, 100000 loops each)`
- np.frompyfunc： `18 µs ± 1.08 µs per loop (mean ± std. dev. of 7 runs, 10000 loops each)`
【Blender2.8】面に対し垂直にオブジェクトを配置する

つい手順を忘れてしまうのでメモ。Blender2.8です

これを
![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20773/fbe9960d-9d6f-3a52-b49c-4c7bbe3f665b.jpeg)

こうしたい
![7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20773/db3a51f5-cf4f-021e-8ca5-2bdeb7f47a02.jpeg)

# ピボット位置を調整してスナップする

まずはオブジェクトを追加
![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20773/fbe9960d-9d6f-3a52-b49c-4c7bbe3f665b.jpeg)

エディットモードで、貼り付けたいオブジェクトの**底面**を選択して、`Shift＋S`で3Dカーソルを移動させる
![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20773/6df07573-3ed7-09df-1c12-1efac15d3ff2.jpeg)

オブジェクトモードで、`オブジェクトメニュー＞原点を3Dカーソルへ移動`を選択
![3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20773/5fc2f49b-90b8-4235-f0b3-b8bf96d661a4.jpeg)

すると原点が底面の中心にくる
![4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20773/565f7f0c-f6dc-5711-524c-185444612402.jpeg)

スナップメニューを次のように設定
* Snapping：面
* ターゲット：近接
* Align Rotation to Targetにチェック
![5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20773/6b4fdd8e-1bf5-a1cd-f217-5a1ff5444534.jpeg)

Gキーで移動させる。上記設定が有効であれば面に沿ってスナップしてくれる
![6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20773/f9ede76a-d599-241e-ed98-6047264b1e04.jpeg)
Python の時間計測便利ツール

## Motivation

python であるメソッドとか処理の一部分とかを計測するのに、毎回

```python
start = time.time()
some_process()
end = time.time()
print('process time = {} [sec]'.format(end - start))
```

とかってしてたんだけど、いい加減面倒になってきたのでデコレータ作って

```python
@stop_watch
def some_process(...):
    ...
```

ってしたり、`__enter__` と `__exit__` を実装したクラス作って `with`ステートメントで

```python
with TimeMeasure():
    ...
```

ってしたいなぁーって思ってた。
まぁそれ自体はすぐできて、せっかくだから公開しようかなーって思ったところで、`lauda` というツールを見つけた。github にソースがあったので、覗いてみたら自分で実装したものとほとんど同じだったので、そちらのツールを使うことにした。


## Installation

https://github.com/astagi/lauda

```bash
$ pip install lauda
```

## How to Use

使い方は大きくわけて `decorator` でメソッドをラップするか、`with`ステートメントで囲うかの 2通り。

### Decorator

`stopwatch` をインポートして、デコレーションするだけ。

```python
from lauda import stopwatch

@stopwatch
def some_process():
    ...
```

ちなみに callback を引数に取るので、次のように表示を変更したりできる。

```python
import time
from lauda import stopwatch


def print_fn(watch, function):
    print ('{0}秒もかかっちゃった'.format(watch.elapsed_time))


@stopwatch(callback=print_fn)
def some_process():
    time.sleep(1)


some_process()
# => 1.0046770572662354秒もかかっちゃった
```

### With statement

こちらは `with` で対象部分を囲うだけ。

```python
from lauda import stopwatchcm

with stopwatchcm():
    some_process()
```

## Conclusion

世の中には便利ツールがたくさん埋もれている。
もう迷わない！JPEG,PNG,GIF,SVG,ESPの違い

はじめまして、某ITでデザイナーをしています。__こはし__といいます。
今回はよく使われる保存形式5つ(JPEG,PNG,GIF,SVG,ESP)について、備忘録として簡単にまとめましたのでお役立ていただければ幸いです。

##JPEG(.jpg,.jpeg)
####概要
Joint Photographic Experts Groupの略。（開発グループの名前がそのまま拡張子になっている）
ビットマップ形式の画像(色のついた画素を縦横に敷き詰めた画像)を8×8ドット単位の正方形で区切り、この正方形をひとつのブロックとして近い色に置き換えることで画像データの容量を格段に小さくする。
ただ、その際にデータを切り捨てているため繰り返すとノイズが生まれたり一度低解像度(品質100未満)に圧縮してしまうと元に戻すことはできない。（→非可逆圧縮）

####用途
画像データを小さい容量で表示したい時に使用する。

####使うメディア
Web

####できること
自然な色味を保持したまま画像データの容量を小さくすることができる。

####特徴
画像データの容量をかなり小さく圧縮できる。
24ビット（1670万色）まで色を扱うことが可能で、多くの色数を必要とする写真などの表現に向いている。
また、グラデーションのように色調が連続して変化する画像にも適している。


##PNG(.png)
####概要
Portable Network Graphicsの略。
「8ビットPNG」「16ビットPNG」「24ビットPNG」などがあるが主に使われるのは「8ビットPNG」。
8ビットPNGは、画像内に使える色の数が最大で256色という制限があるが、そのぶんファイルサイズを小さくできる。
24ビットPNGならファイルサイズは大きくなるがフルカラーで保存が可能になる。
ビットマップ形式の画像を無劣化で圧縮することができる。（→可逆圧縮、ロスレス圧縮）

####用途
画像データを小さい容量で表示したい時、透明色を使った画像データを表示したい時に使用する。

####使うメディア
Web

####できること
ビットマップ形式の画像データを劣化なく圧縮することができる。（JPEGのようなノイズが入らない）

####特徴
図やロゴなど直線や塗りつぶしで構成された画像に向いている。
透明色が使える。（半透明も表現可能）
可逆圧縮な分、容量は少し大きめ。
解像度72dpiでしか書き出せない。
比較的新しいファイル形式のため、古いブラウザだと表示されないことがある。



##GIF(.gif)
####概要
Graphics Interchange Formatの略。
独自の圧縮アルゴリズム『LZW』(=PNGと同じランレングス圧縮をさらに効率化した圧縮方法)を使っており、さらに色数が256色までのため、データ容量が非常に小さくなる。
また、WEBページとの親和性を高くする設計のため、インターネット経由の画像表示も負荷が少ない。

####用途
画像データを小さい容量で表示したい時、単純なアニメーション表現に使用する。

####使うメディア
Web

####できること
1つのGIFファイルに複数の画像を入れることで、パラパラ漫画の原理を使って動画のように見せることができる。

####特徴
図やロゴなど直線や塗りつぶしで構成された画像に向いている。
透明色が使える。ただし、PNGと異なり「完全な透過」「不透明」の2段階のみサポート（半透明は使えない）

##SVG(.svg)
####概要
Scalable Vector Graphicsの略。
JPEGやPNGがビットマップデータなのに対し、SVGはXMLをベースにした二次元ベクターデータ。
ベクターデータとは「画像を、点の座標とそれを結ぶ線（ベクター、ベクトル）などの数値データをもとにして演算によって
再現する方式」のため、このデータ形式で作られた画像は「拡大・縮小しても画質が損なわれない」といった特徴を持っている。

####用途
ロゴやアイコンなどの単純な画像を容量軽く美しく表示したい際に使用する。

####使うメディア
Web

####できること
レスポンシブデザインなどで画像の表示サイズが変わる際、PCとスマートフォンどちらの画面でも綺麗に画像を表示することができる。

####特徴
拡大縮小しても画像が荒れず、後から編集がしやすいため、Webサイトでロゴ画像を表示するのに適している。
コードで表現できるためテキストエディタで編集が可能。
写真などの複雑な画像データの保存には向かない。


##EPS(.eps)
####概要
Encapsulated PostScriptの略。
Adobe社が開発したPS（PostScript）を基盤とした、ベクトルデータとビットマップデータ両方を含む画像ファイルの保存形式で、印刷の目的で開発された画像形式なので、高品質の印刷が保証できるとされている。
あらゆるグラフィックソフトで編集できる、安定性、汎用性ともに抜群なファイル。

####用途
DTPなどの商業印刷データを作る際に使用する。

####使うメディア
紙

####できること
本来の高解像度データの他に、他のアプリケーションに貼り付けたときに表示するための低解像度のプレビュー画像を持っているため、EPSファイル自体を開かず他の対応アプリケーションで制作をしても制作した環境のまま色やレイアウトを保持して出力できる。

####特徴
ビットマップとベクターデータの両方を含むことができる。
あらゆるソフトで扱えることから、広く普及しており、DTP業界では基本の保存形式として選ばれている。
印刷用なので基本的に解像度350dpiでしか使わない。

##さいごに
もともと個人的な備忘録として作成したものなので表記揺れなどあるかもしれないです。
また、わかりづらいところやこれ間違ってるよ！というところがあればご指摘いただけると大変喜びます。

##参考サイト

用途で分けよう！pngとjpegの特徴と相互変換する方法4つ 
http://minto.tech/png-jpeg-henkan/

JPEG、GIF、PNG、TIFF、BMP…いろいろな画像ファイルと特徴
https://sole-color-blog.com/blog/103/

画像ファイル形式の基礎と特徴まとめ（JPEG・GIF・PNGなど） 
https://liginc.co.jp/web/design/material/50037

aiとepsとpdfの違い
https://dtp.design-production.tokyo/227/

EPSとは
https://dtp.design-production.tokyo/240/

EPS（イーピーエス）ファイルって何ですか？
https://fukutomo.net/blog/archives/basics_print/685
JavaScriptでオブジェクトのプロパティの変更をブレークする

# はじめに
先日業務中にとあるシステムのプログラムでとある配列の先頭に不正な値が挿入されていることが判明し、その修正対応をしていました。
Developer Toolで配列の要素の変更とかをトリガーにブレークできたりしないかなーって思ったら、そういった機能はなさそうでした。
しかし、配列に変更を加えている箇所を1つ1つ確認するのも面倒だったので、なんとかしてやれないか調査していました。

# 結論
https://stackoverflow.com/questions/11618278/breakpoint-on-property-change
Stack Overflowに答えがありました。

例: 

```js
// 対象オブジェクト
const obj = {
    someProp: 10
};

// 検査対象プロパティを別プロパティへ退避
obj._someProp = obj.someProp;

// アクセッサーを上書き
Object.defineProperty(obj, 'someProp', {
    get: function () {
        return obj._someProp;
    },
    set: function (value) {
        debugger; // ブレーク
        obj._someProp = value;
    }
});
```

要するに検査対象プロパティの処理を上書きして、値が変更されるところでdebuggerステートメントでブレークポイントを貼るということですね。

# 配列でもやってみる
JavaScriptでは配列はオブジェクトの一部なので、配列の変更に関しても同じ考えが適用できそうです。
私のケースでは先頭の要素の変更をトリガーにブレークできればよいので、以下のようにしました。

```js
const obj = 対象配列;

// 配列の先頭要素を退避
obj._headEle = obj[0];

// 配列オブジェクトの「0」プロパティのアクセッサを上書き
Object.defineProperty(obj, '0', {
	get: function() {
	  return obj._headEle;
	},
	set: function(value) {
	  debugger; // ブレーク
	  obj._headEle = value;
	}
});
```
lengthプロパティでもできそうですが、配列オブジェクトのlengthプロパティは上書きできないようになっており、上書きしようとするとエラーが発生してしまいます。

このコードを適当なアプリケーション初期処理内で実行することで、原因箇所を特定し、無事問題を修正することができました。
[vue] スマホ重視な数字を選択できるコンポーネント

順番管理アプリの[junban](https://junban.app/)で作成したコンポーネントを公開していこうと思います。

ちゃんとしたコンポーネント配信が目的ではなく、プロジェクト毎にコピペして、文字とかアイコンとかはその都度カスタマイズを目的としてますので、ここslotにした方が柔軟性が～とかは考えないです。



# 機能概要

数字を選択できるコンポーネントです。
スマホで数字入力(input[type=number]とか)はスマホのキーボードが表示されて嫌なので作りました。
![movie_20190627_122641.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54093/ab369375-89b6-95de-ebc3-f84ffa7ad44f.gif)



# テスト環境
- "nuxt": "^2.7.1"
- lodash使います。

# コンポーネント
``` vue
<template lang="pug">
  .select_numbers
    .select_number(
      v-for="num in selects"
      :class="{active: num == myValue, error: isCheckValidate && !validete}"
      @click="select(num)"
    )
      .number {{num}}
</template>
<script>
import { range } from 'lodash';

export default {
  props: {
    required: {
      type: Boolean,
      default: false,
    },
    value: {
      type: Number,
      require: false,
      default: null,
    },
    min: {
      type: Number,
      default: 0,
    },
    max: {
      type: Number,
      default: 10,
    },
    step: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      myValue: null,
      isCheckValidate: false,
    };
  },
  computed: {
    selects() {
      return range(this.min, this.max + 1, this.step);
    },
    validete() {
      if (this.required) {
        if (this.myValue || this.myValue === 0) {
          return true;
        }
        return false;
      }
      return true;
    },
  },
  mounted() {
    if (this.value) this.myValue = this.value;
  },
  methods: {
    select(num) {
      this.myValue = num;
      this.$emit('value', this.myValue);
    },
    checkValidate() {
      this.isCheckValidate = true;
      return this.validete;
    },
  },
};
</script>
<style lang="sass">
// 色々カスタマイズしてたので、内容は適当で、重要そうなとこだけピックアップ
.select_numbers
  position: relative
  display: flex
  flex-direction: row
  justify-content: flex-start
  flex-wrap: nowrap
  overflow-x: scroll
.select_number
  cursor: pointer
  flex: 0 0 auto
  width: 44px
</style>
```

# 使い方

``` vue
<template lang="pug">
...
selectNumber(
  :value="value"
  @value="answer = $event"
  :min="min"
  :max="max"
  :required="required"
)
...
</template>
```

## バリデーション

refをつけてあげて、`this.refs.hoge.checkValidate()`とかでバリデーションできます。
Rails6 のちょい足しな新機能を試す42（multi-db db:migrate:status編）

# はじめに

Rails 6 に追加されそうな新機能を試す第42段。 今回は、 `multi-db db:migrate:status` 編です。
Rails 6 では、 複数データベースに対応しているため、 `db:migrate:status` も複数データベースに対応しています。

Ruby 2.6.3, Rails 6.0.0.rc1 で確認しました。Rails 6.0.0.rc1 は `gem install rails --prerelease` でインストールできます。

```shell
$ rails --version
Rails 6.0.0.rc1
```

# 今回の準備

今回は、 [Rails6 のちょい足しな新機能を試す35（複数データベース migration --database オプション編）](https://qiita.com/suketa/items/98c0e5e7af310915205f) をベースとして進めます。第35段まで終わっている状態を前提として話しを進めます。

# 一旦DBを作り直す

必要ないかも知れませんが、念のため、綺麗な状態から作業したいため、DBを作り直すことにしました。

```shell
bin/rails db:drop db:create db:migrate
```

# カラムを追加するマイグレーションを作成する

これもまあ、必要ないと言えば必要ない気がするのですが、 `backbone` の `users` テーブル に `email` カラムを、
`library` の `books` テーブルに `isbn` カラムを追加するマイグレーションを作成します。

`library` 側に追加するためには、 `--database (--db)` オプションが必要です。

```shell
$ bin/rails g migration AddEmailToUser email
$ bin/rails g migration AddIsbnToBook isbn --database=library
```

# `db:migrate:status` で確認する

`db:migrate:status` で確認すると、両方のデータベースのマイグレーションの状況が確認できます。

```shell
$ bin/rails db:migrate:status

database: backbone_development

 Status   Migration ID    Migration Name
 --------------------------------------------------
    up     20190608225735  Create user
   down    20190622004922  Add email to user


database: library_development

 Status   Migration ID    Migration Name
 --------------------------------------------------
    up     20190608225808  Create book
   down    20190622005021  Add isbn to book
```

どちらか1つのデータベースのマイグレーションの状態を知りたい場合は、 `status` に続けて `:backbone` か `:library` を指定します。


```shell
$ bin/rails db:migrate:status:backbone

database: backbone_development

 Status   Migration ID    Migration Name
 --------------------------------------------------
    up     20190608225735  Create user
   down    20190622004922  Add email to user

```

```shell
$ bin/rails db:migrate:status:library

database: library_development

 Status   Migration ID    Migration Name
 --------------------------------------------------
    up     20190608225808  Create book
   down    20190622005021  Add isbn to book
```


# 試したソース

試したソースは以下にあります。
https://github.com/suketa/rails6_0_0rc1/tree/try042_multidb_migrate_status


# 注意

上のブランチで試す場合は、以下のように実行すれば、 `bin/rails db:migrate:status` の結果が同じになります。

```shell
$ bin/rails db:drop db:create
$ bin/rails db:migrate:backbone VERSION=20190608225735
$ bin/rails db:migrate:library VERSION=20190608225808
```

# 参考情報

* [What is new in Rails 6.0](https://bogdanvlviv.com/posts/ruby/rails/what-is-new-in-rails-6_0.html)
* [Add multi-db support to rails db:migrate:status](https://github.com/rails/rails/pull/34137)
MySQLClient (CLI) はデフォルトでコメントを無効にするので optimizer hints が効かない

MySQL には、通常の SQL の他に、明示的にオプティマイザに指示を出す optimizer hints という機能がある。
[MySQL :: MySQL 8\.0 Reference Manual :: 8\.9\.3 Optimizer Hints](https://dev.mysql.com/doc/refman/8.0/en/optimizer-hints.html)

プログラムから実行すると hint が効く。
しかし、同じ SQL を `mysqlclient (mysql cli)` で実行すると、 hint が効かない現象に出会った。

理由は、 `mysqlclient` がデフォルトで、コメントを無効化してしまうためだった。
hint はコメントとして追加するため、コメントが無効化されてしまえば、 hint も無効化されてしまう。
適切ではないとして、 deprecated になっている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30755/5ff86ead-5257-bcbb-8947-131d5c935629.png)
https://dev.mysql.com/doc/refman/8.0/en/mysql-command-options.html#option_mysql_comments

`mysql`コマンドに、 `-c`オプションを付けることで、有効にすることができる。
これだけのことなのだが、普段`-c` オプションを付けることを意識したことはなく、また検索しても出てこなかったので、共有のために記載する。
Google Coral Edge TPU代理店Gravitylink! 

Google Coral Edge TPU代理店Gravitylink! 

https://store.gravitylink.com/global

![BANNER3-英文.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448511/16d40f67-1470-334d-2dc5-8a5be9bc15be.jpeg)

Googleは、開発コミュニティ向けの3つの新しいハードウェアデバイスを使用して、AI製品およびサービスの範囲を拡大し続けています。

これらのデバイスはまだ正式に発表されていないようで、最初にHacksterによって発見されました。これらは新しいGoogle Coralブランド（それ自体はまだ「ベータ版」）の下で導入されており、149.99ドルで販売されている開発ボード、74.99ドルで販売されているUSBアクセラレータ、および24.99ドルで入手可能な5メガピクセルのカメラを含みます。 。

開発ボードとアクセラレータはどちらもGoogleのEdge TPUチップを搭載しています。これは、汗をかくことなくAIモデルを実行するように設計された、あなたの指の爪ほどの大きさのASICプロセッサです。その間、カメラは開発ボードのためのアドオンとしてあります。
![unnamed-_3_.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448511/f35165e8-4a38-a531-e293-c12a4c57b510.jpeg)

これらの製品はどれも、機械学習アルゴリズムのトレーニングに適していません。それでもGPUやクラウド処理能力を必要とする大変な作業です。代わりに、それらはAIの「推論」の部分を容易にします。それはあなたがあなたのモデルを訓練してそれを野外で使っている後に来ます。そのために、アクセラレータと開発ボードの両方がTensorFlow Liteをサポートしています。これは、モバイルおよびIoTデバイス用に設計された同社のAIフレームワークの軽量版です。

![unnamed.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448511/215aff2e-e0ba-2ecc-d6c2-6ef1965f0af1.jpeg)


もちろん、古いCPUでAIモデルを実行することはできますが、遅くて気難しいものになるでしょう。 GoogleのTPUプロセッサのように特別に設計されたチップは、専用のインターネット接続や分厚い電源を必要とせずに、はるかに効率的に仕事をします。
USBアクセラレータはどのLinuxマシンでも推論を向上させることができますが、開発ボードのピンとポートの配列はプロトタイピングハードウェアや他の実験的アプリケーションに最適です。 （Hackadayは、その設定はRaspberry Piの設定とほぼ同じであると述べています。）

Intelが数年前に自社のUSBアクセラレータであるMovidius搭載のNeural Compute Stickを発表したため、Googleはこの種の製品を開発者に最初に提供した会社ではない。 このような製品は、企業が開発者コミュニティに手を差し伸べ、他のAIサービスの採用を促進するのに役立ちます。

![微信截图_20190612161652_副本.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448511/bd20cd4e-6b59-d660-5667-c2f6e219e7db.png)



これらのデバイスの詳細については、チュートリアルやテストモデルを含む完全なスペックシートとリソースをGoogleの新しいCoralのホームページで参照できます。
AIアプリケーションの構築に興味がある人は誰でも、小売パートナーのGravitylinkのオンラインストア

https://store.gravitylink.com/global で注文を開始できます。

![微信图片_20190404110322_副本.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448511/724b60b8-34f4-5c3d-611c-9a4eec56e051.jpeg)
【Python3】pandas.DataFrameのカラム重複削除

pandasのDataFrameを操作しているときに，カラム重複を削除したいときがあったのでまとめておきます

まず，こんなテーブルがあったとする


```Python
import pandas as pd
df = pd.DataFrame([
    [1, 11, 1, 3],
    [2, 12, 2, 4],
    [3, 13, 3, 5]
], columns = ["a", "a", "c", "d"])
df
```
↓↓↓↓↓↓↓↓↓↓

|a  |a  |c  |d |
|---|---|---|---|
|1  |11  |1  |3|
|2  |12  |2  |4|
|3  |13  |3  |5|


# カラム名の重複を削除したいとき

カラムの中身の値が違くても，とりあえず同じカラム名だったらindex番号が若い方(左にあるカラム)を優先させたいとき

```Python
#重複してないカラム名のみ選択
df.loc[:,~df.columns.duplicated()]
```
↓↓↓↓↓↓↓↓↓↓

|a |c  |d |
|---|---|---|
|1  |1  |3|
|2  |2  |4|
|3  |3  |5|

```Python
df.loc[:,~df.columns.duplicated(keep = "last")]
```
とすれば最後のaカラムが採用されます

[pandas.DataFrame.duplicatedメソッドのDoc](https://pandas.pydata.org/pandas-docs/stable/reference/api/pandas.DataFrame.duplicated.html)

# カラムの要素の重複を削除したいとき

```Python
#転置してから重複行を削除し，再度転置して元に戻す
df.T.drop_duplicates().T 
```
↓↓↓↓↓↓↓↓↓↓

|a  |a |d |
|---|---|---|
|1  |11  |3|
|2  |12  |4|
|3  |13  |5|

[pandas.DataFrame.drop_duplicatesメソッドのDoc](https://pandas.pydata.org/pandas-docs/stable/reference/api/pandas.DataFrame.drop_duplicates.html)


# ~追記~

## カラム名重複のあるデータフレームを，カラムの欠損を保管し合う+重複削除したいとき

```Python

def agg_dup_col(df_: pd.core.frame.DataFrame) -> pd.core.frame.DataFrame:
    '''カラム名重複のあるデータフレームを，カラムの欠損を保管し合う+重複削除し，データフレームとして返す
    Args:
        df_ (pd.core.frame.DataFrame): any dataframe
    Returns:
        pd.core.frame.DataFrame
    '''
    df = df_.copy()
    dup_col = set(df.columns[df.columns.duplicated()])
    for col in dup_col:
        value = [[v for v in values if v == v and v is not None]
                 for values in df[col].values.tolist()]
        value = [v[0] if v != [] else None for v in value]
        df = df.drop(col, axis=1)
        df[col] = value
    return df
```
AndroidStudioで『エラー: パッケージorg.apache.httpは存在しません』を解消する

古いアプリのSDKが21だったためバージョンを上げたら次のようなエラーが

```
エラー: パッケージorg.apache.httpは存在しません
```

## Android 6.0（API レベル 23）以降 `org.apache`パッケージ削除

`org.apache`パッケージが削除されたようです。

詳細はこちら
https://developer.android.com/sdk/api_diff/23/changes.html?hl=ja

## 対応

とりあえず動けばということで古いパッケージを使います。

`build.gradle` に以下を追加

```bash:build.gradle
android {
    useLibrary 'org.apache.http.legacy'
}
```

※自ブログからの転載です
http://akinov.hatenablog.com/entry/2019/06/27/121906
SVG画像を3x3で並べる

原子構造をベクター画像で描くツールを作りました。
https://github.com/NuNoKehai/xyzb2image
が、このプログラムだと1ユニットセル分しか描かないので、そのままでは見た目がイマイチ。
<img width="396" alt="NFB.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351420/78b12435-805b-83e8-5308-ff4d17dc266b.png">
もともとイラストレータで3x3に並べていましたが、イラストレーターって画像の位置合わせがイマイチ苦手ですね。だからと言って描画ユニットセルを増やすオプションはつけたくない。
と言うことで、ベクトル画像を3x3するrubyスクリプトを書きました。

```svg3x3.rb:
require 'rubygems'
require 'cairo'
require 'rsvg2'

def read_suffix(filename)

  index_period=filename.rindex(".")
  suffix=filename[index_period+1..filename.size-1]

  return suffix

end

def cairo_imagesurface_general(filename_image, width, height)

  suffix_image=read_suffix(filename_image)

  if suffix_image.casecmp("pdf")==0
     surface = Cairo::PDFSurface.new(filename_image, width, height)
  elsif suffix_image.casecmp("svg")==0
    surface = Cairo::SVGSurface.new(filename_image, width, height)
  else
    format = Cairo::FORMAT_ARGB32
    surface = Cairo::ImageSurface.new(format, width, height)
  end

  return surface

end

def context_finish_general(filename_image,context)

  suffix_image=read_suffix(filename_image)

  if suffix_image.casecmp("pdf")==0 || suffix_image.casecmp("svg")==0
    context.target.finish
  elsif suffix_image.casecmp("png")==0
    context.target.write_to_png(filename_image)
  end

end

filename_in=ARGV[0]
filename_out=ARGV[1]

handle_in = RSVG::Handle.new_from_file(filename_in)
width_in=handle_in.dimensions.width
height_in=handle_in.dimensions.height

surface_out = cairo_imagesurface_general(filename_out, width_in*3, height_in*3)
context_out = Cairo::Context.new(surface_out)
context_out.render_rsvg_handle(handle_in)
context_out.translate(width_in,0)
context_out.render_rsvg_handle(handle_in)
context_out.translate(width_in,0)
context_out.render_rsvg_handle(handle_in)
context_out.translate(-2*width_in,height_in)
context_out.render_rsvg_handle(handle_in)
context_out.translate(width_in,0)
context_out.render_rsvg_handle(handle_in)
context_out.translate(width_in,0)
context_out.render_rsvg_handle(handle_in)
context_out.translate(-2*width_in,height_in)
context_out.render_rsvg_handle(handle_in)
context_out.translate(width_in,0)
context_out.render_rsvg_handle(handle_in)
context_out.translate(width_in,0)
context_out.render_rsvg_handle(handle_in)
context_finish_general(filename_out,context_out)
```

このスクリプトを動作させるためには rubygem の cairo と rsvg2 が必要です。
最初に定義した3つの関数は出力ファイルの拡張子の汎用性を増やすためです。
やってることはユーザー空間の原点をずらして入力画像を描画してるだけ。

使い方です。
```ruby svg3x3.rb input.svg output.pdf```
のように、入力ファイル名と出力ファイル名をargumentで指定。
入力ファイルはsvg形式である必要があります。

結果。
<img width="510" alt="NFB_3x3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351420/35ef2be5-096e-a2be-58ad-19e9107499c6.png">
できました。
後は、画像出力的にいらない部分をイラストレーターのクリッピングマスク等で切り取ってしまえばOK。
初学者の為のCI/CD

# CI/CD
**CI**
動作を継続的に確認する。
**CD**
ユーザに継続的に提供する。

## 何ができるか
    
* 単体テスト・環境構築・結合テスト・リリースを自動化
* ソフトウェアリリースのサイクルを早める。
    * 素早くフィードバックを得られる。
    * 間違いに素早く気づける。

## CI/CDの大原則

### 自動化するための基礎を作る
    
**適切なソースコード管理**

* GitHub/git Flowで開発を行う。
* 必ずレビューを行う。
* 個人環境に秘伝のコードを置かない。
* masterに直接pushしない。

**テストを書く**

* Unitテストを重視する。
    * 不具合を早く発見できる。
    * メンテナンスコストが低い。
    * テストをコメントアウトしない。(動いてない物には意味がない)
* 誰でも実行可能にする。
    * 簡単に実行できるようにする。
    * 何が起きるかを把握できるようにする。(状態の可視化)

**CI/CDツールを利用しパイプラインを作る**
   
* パイプライン
    * ソフトウェアを安全かつ素早く利用者に届けるための一連の処理。

例
1. 単体テスト
2. 検証環境構築
3. テスト
4. 本番リリース
5. 受け入れテスト
　　
  
  
**単体テスト**

* モジュール/部品に対するテストを行う。
* 適切に整備し管理すれば素早くフィードバックを得られる。
        
**検証環境構築**

* 構成情報通りに環境が構築できるか確認。
* 検証環境と本番環境で差をなくせば本番の問題を事前に検知できる。
    
**テスト**

* 機能テスト・UXテスト・負荷テストなど。
* 検証環境と本番環境で差をなくせば本番の問題を事前に検知できる。

**本番リリース**

* 本番環境を構築。(パッケージ適用など)

**受け入れテスト**

* 失敗したら元に戻す。(できるだけ行わない)
* PullRequestでのテスト
    * メリット
        * 単体レベルでは問題がないと自信を持ってmaster,developにマージできる。
        * 作業の手戻りを最小限にできる。
        * レビュアーの負荷が下がる。
        * リファクタリングが自信を持って行える。

**状態を適切に維持する**

* 失敗を検知できるようにする。
    * メールやMYMで通知されるよう設定
* 失敗したら放置せず最優先で修正
    * 失敗したテストを無効化しない。
        
## ツールの活用

### 綺麗な環境を作り、指定された処理を実行

* 綺麗な環境
    * 他の影響を受けない環境が必要
        * この環境では動く問題を回避
    * 最近はコンテナ技術を使うツールが多い。
        * Dockerなど
* 条件
    * Githubのリポジトリにcommit
    * UI上でStartボタンのクリック
    * ツールでの処理の成功
* 例
    1. masterにマージ
    2. java環境でテスト(maven test)を実行
    3. 成功したらコードをビルドしデプロイ

## まとめ

自分自身もCI/CDの経験は浅いので備忘録も含めて
同じような駆け出しの人に届けれたらいいなと思ってまとめてみました。
「またコーディングがやりたくなる裏ワザ集」を和訳した

# この記事の概要
・プログラミングをやっていて、何らかの原因でモチベーションが下がった人向け
・「またコーディングがやりたくなる裏ワザ集」の和訳
・元記事：[Tricks to get you coding 👨‍💻 again when you aren't motivated to.](https://dev.to/theghostyced/tricks-to-get-you-coding-again-when-you-aren-t-motivated-to-1bdl)

# 序説
人は誰でも、何かに情熱を注いでいます。ある人は音楽、またある人はビデオゲーム、そしてある人は、何かしらの問題をコードを書いて解決すること。
プログラミングは難解なものですが、そこにやりがいが生まれるのは、私たちが「プログラミングで問題を解決しよう」という情熱を持つからでしょう。

さて、では私たちがその情熱を失ってしまったらどうなるでしょうか。

数年前、私は自分がなぜコーディングを始めたかを見失い、時に無理をしてコードを書いていたことに気付きました。
そして、しばし自分自身を観察したのち、失った情熱に火を付け再びコーディングに取り掛かる気にさせる、幾つかの方法を見出したのです。

これから、それらの方法をあなたに示すこととします。

# 裏ワザ集
１）自分自身が決めたゴールを顧みる
２）交流会に参加する
３）映画を観る
４）同志のコミュニティに参加する
５）日本のアニメを観る

## 自分自身が決めた目標を顧みる
まず第一に、誰にでも「プログラミングを始めた理由」があるでしょう（例えお金を稼ぐため、という理由であれ）
あなたのモチベーションに火を付け、再びコーディングをするようになるのに最も良い方法は、シンプルに、**その目標を顧みること**です。
「仕事で年収2,000万」「身近なコミュニティで起きている問題の解決」「大手IT企業で働く（そう、例えばGoogleのような）」といったものでしょうか。
それが何であれ、顧みることで、あなたがコーディングを始めたスタート地点を思い出すのです。

## 交流会に参加する
別な方法としては、交流会への参加も良いでしょう。
交流会は、あなた自身のモチベーションを復活させるのにとても良い方法なのです。
なぜならば、交流会に参加することであなたは、素晴らしいアプリケーションをデザインし組み上げた開発者と話す機会を得られるからです。
キャリアについての助言や、開発者としての道のりを示してくれる人にさえ、出会えるかもしれません。


## 映画を観る
映画を観ることは、長い一日の終わりにのんびりと時間を過ごしてリラックスするのに大変優れた手段です。
しかし、「映画を観てコーディングのモチベーション回復」というのは、ちょっと奇妙なアイデアに思われるかもしれません。
実際のところそれは、どんな種類の映画を観るかによります。
開発者のモチベーションを上げてくれる映画はたくさんあります。例えばSILICON VALLEYやMR.ROBOT。ほかにもたくさん。
これについては、書き出すと長くなるので、別記事を作成しました。
[「あなたを再びプログラミングに駆り立てる映画10選」を和訳した](https://qiita.com/oh_8814/items/881ac3d076c1719ed91c)
ここで紹介したどの作品も、間違いなく、あなたのモチベーションを上げる手助けをしてくれます。

## 同志のコミュニティに参加する
コミュニティは、あなたが他の同志や開発者、しかもあなたよりも経験豊富な人たちとつながる、とてもシンプルな方法です。
交流会に参加することのように、経験豊富な開発者たちのコミュニティの中で自分自身を知る時、あなたは何らかの素晴らしい技術やプロジェクト（その大多数は日常的に用いられているもの）について学ぶ最初のステップに着手するのです。

あなたと同じ問題で苦しんでいるかもしれない、似たような経験を持つ人を知ることで、非常に励みになり、モチベーションが上がることでしょう。

## アニメ作品を観る
ええ、これは最もバカげた方法であり、それ故最後に述べるものです。
まずは少し私の話をお聞きくださいね。

他の人が、各々が定めた目標を達成しているのを見ることは、モチベーションを上げるために適切な方法です。
日本のアニメでも、こうしたシチュエーションが見られます。

主人公が、自分の持てる全てを尽くして、息も絶え絶えになりながらも自分の目標へ届くまで戦う様を目にすることがあるでしょう。
このような決意の描写は、いつも私のモチベーションを燃え上がらせ、そして、自分が決めた目標と、「私はこれを達成する！」と宣言したもの全てを思い出させるのです。
この思考が、私を再びコーディングへと向かわせると、こういう訳ですね。

ええ、実にバカげた話に聞こえるでしょう（笑）
ですが実際、私自身に非常に効果があるのだ、ということはお伝えしておきます。

# まとめ
さて、私自身がまたコーディングがやりたくなる裏ワザについてお話しました。
もしあなたが既にやっていることがあれば、コメント欄にてぜひそれをシェアしてください。それが新たな「裏ワザ」となるでしょう。

# この記事を書いた者のコメント
この記事を初めて見た時感じたのは、
>「あぁ、日本であれ海外であれエンジニア共通の悩みなんだな。
私ひとりだけがこんなに上手くいかず停滞している訳じゃなかったんだ」

という、安堵の気持ちでした。
誰しも、タスクに追われたり、書いたコードがエラーを吐きまくって解消に時間がかかったり、苦心して作ったプログラムが評価されなかったりして、
「何で俺エンジニアやってんだろ…」となる時があると思います。
そんな時、この記事に書いてあるような事が、モチベーション回復の助けになれば幸いです。

P.S.　私が、イマイチやる気が出ない時に思い出すアニメのセリフは、
ジョジョの奇妙な冒険第1部の**「ねーちゃん！あしたっていまさッ！」**です。
ちょっと待って！そのOSSのライセンス大丈夫？

# はじめに

会社に入りOSSについて学ぶ機会がありました。

私はOSSのライセンスって今まで意識してこなかったため、危機感を覚えました。

同じような人はいると思うので少しでもたくさんの人にOSSのリスクを知ってほしいです。

#OSSとは
- ソースコードが無料で配布されている。
- 誰でも複製、配布、改良することができる。
- ビルドツールやパッケージ管理ツールで知らず知らずに使っているかもしれない
- 複製配布改良の範囲はオープンソースライセンスによって決められている。

#オープンソースライセンスとは
- 普通OSSをアプリに利用したり、改良して配布したりする場合は本人に連絡し許可を取るという手間がかかる。
- その手間をなくすために、このライセンスに従って使用すれば改良、配布などが許可されるというもの。
- ただし、これを遵守しないと、最悪の場合訴訟問題になる。

#MITの場合

オープンソースライセンスの例としてMITを紹介します。
こちらのライセンスの規約は、

- 著作権をわかるように記述すること
- ライセンス本文を記述すること
- 免責事項をわかるようにすること

のおおまかに3つが支持されています。詳しくは[(Google:MIT License)](https://www.google.com/search?rlz=1C5CHFA_enJP843JP843&ei=Y_ACXaepKJCEoASNw5iYDQ&q=MIT+License&oq=MIT+License&gs_l=psy-ab.3..0l8.3467.4881..5054...0.0..0.81.523.7......0....1..gws-wiz.......0i67.hfHVWA5UmOc)

よくアプリやウェブサイトなどでライセンスという項目があるのはこれです。

#リスク
ライセンスの一つにGPLというものがあります。
これには、次の支持がされています。

>
１,著作権表示を保持しなければならない＋無保証である
２,GPLライセンスのオープンソース・フリーソフトウェアは、誰でも自由に複製・改変・頒布することが許可されている
3,GPLライセンスのソフトウェアやプログラムを使用した場合、その制作物もGPLライセンスで配布しなければならない

この3つ目が特に説明したいです。
これにより何が起こるかというと

- AというシステムでGPLのOSSを使うとAの派生のBやCなどにもGPLライセンスを適用しなければいけなくなる。
- これが俗にいうGPL汚染というものです。
- さらにGPLの規約によりソースコードの公開という問題が起こる場合がある。

要はこのGPLを間接的にでも使うと、
ソースコードを公開しなければいけない場合があるということです。

これは企業にとっては一大事です。

なのでOSSライセンススキャンなどをCIツールなどに取り入れて自動で調べることで、
これらの被害を未然に防ぐ必要があります。

## まとめ

厳しいことを書きましたがOSS自体は積極的に利用することで開発の幅が広がる素晴らしい物です。

また、これでOSSについて考える機会になってもらえたらよかったです。
React パフォーマンス改善 （Array系）

## 改善対象


配列を繰り返し処理によって表示しており、ソートや絞り込み等が行われる場合、レンダリングコストや繰り返し表示する数によっては、何も意識せずに実装した時に著しくパフォーマンスが悪くなることがあります。

そういった時に、パフォーマンス低下を防ぐ簡単な方法をひとつご紹介します。

## Step1: Componentを改善する

`React.PureComponent` や `shouldComponentUpdate ` などを用いて再レンダリングを制御する。
shallowEqualの判定を考慮して使い分けが必要です。

https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/shallowEqual.js

### 例
```react

items = [{value: 1}, {value: 2}, {value: 3}]

{items.map(item => (
  <Item obj={item} />
))}
```
#### `React.PureComponent`

```react

Class Item extends React.PureComponent {
  render() {
    return <div>{this.props.obj.value}</div>
  }
}
```

#### `shouldComponentUpdate`

```react

Class Item extends React.Component {
  shouldComponentUpdate(nextProps) {
    return this.props.obj.value !== nextProps.obj.value
  }

  render() {
    return <div>{this.props.obj.value}</div>
  }
}
```

### 改善例

表示していたListが下記のように並び順が変わった場合

```javascript
items = [
  {value: 1}, // key: 1 
  {value: 2}, // key: 2  
  {value: 3}  // key: 3 
]

items = [
  {value: 3}, // key: 1 
  {value: 2}, // key: 2  
  {value: 1}  // key: 3 
]
```
`{value: 2}` はkeyが変わらずかつ `shouldComponentUpdate` で比較されている`obj.value`の値も同じため、
`{value: 2}` のComponent（`<Item />`）は再レンダリングされなくなります。

※ この例では、keyを指定していないためデファルトでindexが使われています。

## Step2: ユニークかつ適切なkeyを指定する

### shouldComponentUpdate と key を 利用

※ PureComponentの例は省略します。

```react
Class Item extends React.Component {
  shouldComponentUpdate(nextProps) {
    return this.props.obj.value !== nextProps.obj.value
  }

  render() {
    return <div>{this.props.obj.value}</div>
  }
}

{items.map(item => (
  <Item key={item.obj.value} obj={item.obj} />
))}
```

#### 改善例

表示していたListが下記のように並び順が変わった場合

```javascript
items = [
  {value: 1}, // key: 1 
  {value: 2}, // key: 2  
  {value: 3}  // key: 3 
]

items = [
  {value: 3}, // key: 3 
  {value: 2}, // key: 2  
  {value: 1}  // key: 1 
]
```

この例では、keyが変わらずかつ`obj.value`の値も同じため、
すべてのComponent（`<Item />`）が再レンダリングされなくなります。

## DEMOページ

https://codesandbox.io/s/objective-dijkstra-lutz9
【カテゴリ数が多い方におすすめ】カテゴリ表示を左ナビに移動させる

# 概要
カテゴリ数が多い場合に、以下のように表示が2行になり見た目上よくない場合があります。
そういった場合は、デザインを大きく変えるか、カテゴリの1階層目を減らすなどの対応を行っている方が多いかと思います。

ただし、カテゴリ数は減らしたくない、デザインを大きく変更するほど時間とスキルはまだない方のために、
左側に表示させる方法をお伝えします。
※標準機能をできる限り変更せずに対応しているため、一分画面においてレイアウト崩れが発生する可能性があります。

# 実施前 / 実施後
## 実施前
<img width="100%" alt="Screen Shot 2019-06-27 at 11.18.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29627/b20ca864-350f-9571-14f8-e5063e3ae6fa.png">
## 実施後
<img width="100%" alt="Screen Shot 2019-06-27 at 11.24.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29627/82e0e836-b172-5d12-2cdd-e18495ecbc9b.png">

# 手順
## 流れ

1. ブロックのレイアウトを変更（TOP/下層ページ）
2. CSSを追記
3. キャッシュ削除

## 詳細

1.　ブロックのレイアウトを変更（TOP/下層ページ）

- TOPページのレイアウトを変更
管理画面 > レイアウト管理 >  トップページ用レイアウトに移動
「カテゴリナビ(PC)」ブロックを、#side_leftに移動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29627/6da1a7dd-6603-4d40-eecd-6b5140e92342.png)

- 下層ページのレイアウトを変更
管理画面 > レイアウト管理 >   下層ページ用レイアウトに移動
「カテゴリナビ(PC)」ブロックを、#side_leftに移動

2.　CSSを追記
・CSS管理に独自CSSを追記する
管理画面 > コンテンツ管理 > CSS管理に移動
以下コードを貼り付け、登録ボタンを押下する。

```
/* カスタマイズ用CSS */
.ec-itemNav__nav li {
    float: none;
}
.ec-itemNav__nav li a{
text-align:left;
padding: 5px 10px;
height: auto;
}

.ec-itemNav__nav li ul li a {
padding: 5px 10px;
}
.ec-itemNav__nav  li:hover > ul > li,
.ec-itemNav__nav  li:hover > ul > li:hover > ul > li {
    height: auto;
}
.ec-itemNav__nav li ul li ul::before {
    top: 7px;
}
```

3.　キャッシュ削除

- cssを変更したため、キャッシュを削除し表示が変更できるようになったことを確認します。

<img width="1075" alt="Screen Shot 2019-06-27 at 11.50.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29627/f5d010b1-3a99-2e09-730e-0de6951ebe6e.png">
assertEquals のようなものをJUnit4で書きたい

と思って
グーグルで調査しても
https://qiita.com/gengogo5/items/317b6f260b6fecc184fc
なんかtoStringで文字列して比較するのはカッコ悪いので値で比較したい。

と思っていたけど
isで出来るっぽい
http://hamcrest.org/JavaHamcrest/javadoc/1.3/org/hamcrest/Matchers.html
1主キー1レコードで良い時が、人生にはある

縦並びのSQL結果を、横並び1カラムに区切文字で入れて出力したい時が人生で一度くらいはないですか？
主キーに対しての結果レコードが1レコードで済めば良いのになって時が人生で一度や二度、ないですか？
私はある。


## 前提のテーブル構成

### 人

| user_id |  name |
|:--|:--|
| 1  | 佐藤 |
| 2  |  田中|
| 3  |  鈴木|


### 希望の食べ物

|user_id  | hope_food  |
|:--|:--|
|1  |  りんご |
|1  |  みかん |
|2  |  りんご |
|2  |  めろん |
|3  |  ぶどう |


## 普通に取得

~~これってただの希望の食べ物テーブルのSELECT結果なのでは~~

```sql
SELECT 
 user_id
 , hope_food  
FROM 人 WITH (NOLOCK)

LEFT JOIN 希望の食べ物 WITH (NOLOCK)
ON 人.user_id = 希望の食べ物.user_id 
```

### 結果

知ってた。

|user_id  | hope_food  |
|:--|:--|
|1  |  りんご |
|1  |  みかん |
|2  |  りんご |
|2  |  めろん |
|3  |  ぶどう |

## カンマ区切りで取得する

区切り文字は自由に変更可能。
ただし全ての末尾についてしまう（「,」「みかん,りんご,」）ので使う時は末尾一文字は消す等の加工がいるかも。

```sql
SELECT
人1.user_id,
  ( 
    SELECT
      TOP 1( 
        SELECT
          希望の食べ物.hope_food + ',' 
        FROM
          人 as 人2 WITH (NOLOCK) 
          LEFT JOIN 希望の食べ物 WITH (NOLOCK) 
            ON 人2.user_id = 希望の食べ物.user_id 
        WHERE
          人1.user_id = 人2.user_id 
        ORDER BY
          希望の食べ物.user_id FOR XML PATH ('')
      ) TMP_希望の食べ物
  ) 希望の食べ物たち
FROM
  人 as 人1 WITH (NOLOCK)
```

### 結果
|user_id  | 希望の食べ物たち  |
|:--|:--|
|1  |  りんご,みかん, |
|2  |  りんご,めろん, |
|3  |  ぶどう, |


## FOR XML句
XML階層を生成してくれているらしい。

https://docs.microsoft.com/ja-jp/sql/relational-databases/xml/for-xml-sql-server?view=sql-server-2017
特定の拡張子ファイルをZIPと同じくエクスプローラで開く方法

jarファイルや、Androidアプリのパッケージであるapkファイルは
もともとZIP形式で圧縮されたファイルなので、ダブルクリックで中身を参照できると便利です。
そこで拡張子に対してエクスプローラを割り当てます。

コマンドプロンプトを管理者権限で実行し、下記コマンドを実行。
`assoc .jar=CompressedFolder`
`assoc .apk=CompressedFolder`
Array.prototype.mapとArray.prototype.flatMap

# tl;dr
`Array.prototype.flat`と`Array.prototype.flatMap`が`ES2019`から導入される。
サンプルコードを記載する。

[Array.prototype.flatの例](##arrayprototypeflatの例)
[Array.prototype.flatMapの例](#arrayprototypeflatmapの例)

## `Array.prototype.flat`の例

```js
// このような多階層の配列があるとする
const array = [1,[2,[3]]];


// これをArray#flatすると
const arrayFlatten = array.flat(); // [1,[2,3]]

```

となる。

```js

// もういちどやれば
arrayFlatten.flat(); // [1,2,3]
```

となる。

この、flatする回数は引数で指定可能で、デフォルトはの引数は１となっている。

```js

const array2 = [4,[5,[6]]];
array2.flat(1); // [4,[5,6]]
array2.flat(2); // [4,5,6]
```

再帰的に実行し、全く平坦にする場合はこのようにする

```js

const array3 = [7,[8,[9[10]]]];
array3.flat(Infinity); // [7,8,9,10]
```


## `Array.prototype.flatMap`の例

ここで、duplicateという関数を定義する。duplicateは、引数を複製し、配列に入れて返す関数とする。

```js

const duplicate = x => [x, x];

// これを配列に適用すると次のようになる
[1,2,3].map(duplicate); // [[1,1],[2,2],[3,3]

// さらにflatする場合は、
[1,2,3].map(duplicate).flat(); // [1,1,2,2,3,3]

//とすればよいが、ここでflatMapの出番となる。
[1,2,3].flatMap(duplicate);  // [1,1,2,2,3,3]
```
プログラミング高速化メモ

最近の勉強をノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです！



#プログラミングを早くするためのステップ
今回はこの勉強会に参加して勉強になった個人的に参考になった内容をまとめました。
自分はエンジニアとしてまだまだ未熟物なのでひとつひとつ実行していこうと思いました。
[【生配信】ステップアップ！プログラミング高速化【サポーターズCoLab勉強会】](https://supporterz-seminar.connpass.com/event/133883/)

##step1 書いて覚える
人によってコードを書く際にコピペを多用する人もいるが基本コピペは使用しない様にする。

Q：なぜコピペするのか？
A：失敗が怖い！

**コンパイルエラーは怖い**→そうや！コピペしよう！

コピペは常に悪とは言わないけど単語レベルなら書いた方が早い

>基礎的な構文はかける様にする。
IDEを味方にしてしっかり使う

**すらすら書けるまでひたすら書いてトレーニングしよう!**

##Step2 丁寧に書く

急いで書くとバグるの？これは生産性が結局、悪い
急いで書いてもバグが起きてバグ修正が起きてしまったら結局時間がかかる

**丁寧に書くのが遅いのではなく、丁寧に書くのに慣れてないから遅い**

>適当な書き方では頭の生理ができなくなり時間がかかる
修正コストは急いで書いたものより丁寧に書いた方が
長期スパンで考えると良い!

修正は絶対起きる!
**なぜなら、ソフトウェアは変化するものだから、
いずれツケを誰かが払う時がくる**

>技術的負債を残さない為にも丁寧に書く

###綺麗なプログラムを書きなさい→綺麗とは何？
>
各種原則に則る？
誰にでも読みやすいコード、可読性の高いコード？

###可読性は幻想!!

可読性は幻想、追い求めてはいけない
if文ばっかで書かれたコードは可読性があるがダメ！

自身が思う綺麗さについて妥協していないコード？
その人が本気で書く事

>どんなときも自分ができる精一杯の丁寧なコードを
書いてトレーニングしよう!

##step3 書き方を覚える

プログラミングを遅くする原因

- プログラミング中
    - これをどこに書こうかな？
    - この書きかたでいいのかな？
    - 似た様な処理、書いてないかな？

###人の行動を遅くする原因は迷い
**迷いをなくす　＝　早くなる**

>数学は公式
プログラミングはパターン

###XXXの時はYYYする
**パターンに落とし込むのが大事**

>デザインパターン
ある問題を解決する実装のパターンGOF（Gang of four)が有名

覚えておくと適応できる、または応用できる。

Q：どのパターンにも当てはめれない時は？
A:自分のパターンを作成する。

>何がパターンなのかを把握する為に、原則を学び、みんなの書き方を参考にする。
>
単一責任の原則：クラスは一つの事に集中しなさい
開放・閉鎖原則：ロジックを変えずに動作を変える、拡張できる様にする
人間はシングルスレッドの方が得意

###書き方を覚える際
- 皆の書き方
- オープンソース
- プロダクトのコード

>玉石混合:
気をつけるべき：なぜこの様な記述をするのかを考えてるコードリーディングする

**step2と並行すると効果は抜群**

#step4 プログラムをするプログラムを書く
ここまでのトレーニングをすれば上がる
指の速度に限界がある,誰も追いつけない速度に行くには

###プログラムをするプログラムを書く

>例：似た様な作業が何度も必要なコーディングは存在する。
肩代わりするツールを作成する。
>
一般的な実例:snippet,スキャフォールディング


###ツールを作るメリット
ツールを作ると
**step2のトレーニングができる**
**step3で学んだ事が実験できる**

###ツールを作るデメリット

根気がいる作業なのでモチベーションが大事！

>ツールを作るのが大変？
入力を解釈してデータを出力する
いつもの仕事と変わりない

プログラムを書くライブラリー

ツールを作ると自分の実力が分かる
ツールが間違ったら→間違い方に法則がある。
ヒューマンエラーの様な予測できないものよりましじゃない？

実践の場をプロダクトだけにするといつまでもトレーニングできない
気軽にツールを作ってトレーニングしよう

そして

###ユーザーのためのコードを書く事に集中しよう！
Elixirの関数の省略は面白い

※冒頭いきなりですが、Elixirに限らずな話かと思います、すんません。

## 初見ゴロシな式に出会った
インターネッツでelixirについて色々調べていたら、下記のコードに出会いました。

この処理が↓

```
Enum.reduce([1, 2, 3], fn(a, b) -> a + b end)
```
最終的にこう書ける↓

```
Enum.reduce(1..3, &+/2)
```
え、、、？
初見殺しな感じがすごい、、、
というか、僕は初見で死んだ、、、
ので、一歩ずつ噛み砕いてみました。

## [1, 2, 3]は1..3という書き方ができる
[range](https://hexdocs.pm/elixir/Range.html)という書き方です。
これは、見ればなんとなくわかると思います。
直接書いてみるとわかるのですが、単純にリストが返ってくるわけではなさそうです。

```
iex(21)> [1,2,3]
[1, 2, 3]
iex(22)> 1..3   
1..3 #[1, 2, 3]のリストになるわけではない
```

## fn(a, b) -> a + b endは&+/2という書き方ができる
[匿名関数](https://elixirschool.com/ja/lessons/basics/functions/)という書き方です。
&を使うことで、関数の記述量を省略することができます。

```
iex(24)> x = fn(a,b) -> a + b end
#Function<13.91303403/2 in :erl_eval.expr/5>
iex(25)> x.(1,2)
3
iex(26)> y = &(&1 + &2)
&:erlang.+/2
iex(27)> y.(1,2) 
3
```

ここからさらに、&1と&2を省略できるようでした。
「+」は引数を２つもつ関数(+/2)と表現するようです。(関数という表現の仕方であってるか...？)

```
iex(26)> y = &(&1 + &2)
&:erlang.+/2
iex(27)> y.(1,2) 
3
iex(28)> z = &(+/2)
&:erlang.+/2
iex(29)> z.(1,2)
3
```

さらに()も省略すると、

```
iex(28)> z = &(+/2)
&:erlang.+/2
iex(29)> z.(1,2)
3
iex(30)> zz = &+/2
&:erlang.+/2
iex(31)> zz.(1,2)
3
```
最初に出てきた式になりましたね。

## まとめ
~~いかがでしたでしょうか？~~
初見のナニコレ感はすごいですが、ちゃんと調べるとほほーとなりました。
elixirはまだまだわからないことだらけですが、こうやって噛み砕いて少しづつ進んでいくのは、とても楽しい時間ですね。
Emacsで標準で入ってる仮名漢字変換(IME)のマニュアル

CentOS7のテキストコンソール(TeraTermなど)のEmacsや

WindowsのEmacs
> https://www.gnu.org/software/emacs/download.html#windows

で日本語設定をせずとも最初から「Ctrl-\\」（Ctrlとバックスラッシュ）で仮名漢字変換(IME)が使えますが、これの使い方がよくわからなかったんだが、マニュアルやっとで見つかった。

Emacsで 「M-x kkc-help」と入力したら出ますね。

いやー、昔から文節広げる方法やカタカナ変換がよくわからんかったのだ。「C-o」と「K」 ですね。

蛇足ですが、私の管理下のサーバの場合はCentOS7へはAnthyを入れてます。こっちのほうが使いやすい。ですが管理下のサーバばかりではないですからね。
Flutter web で key code が正しく取れない問題を調べてみた

2019/6/27 時点での内容です。
# 概要
小学生向けタイピングソフトを作ろうと思いFlutter webを触ってみました。とりあえず、キーの入力判定とれないとね、と思いMacのChrome上でテストしたところ、意図しないキーコードが戻りました。調べてみると、どうもAndroidのキーコードが取れているようです。このままでは作業も進まないので調査してみました。
※ Flutter web は、現在プレビュー版です。
![Screen Shot 2019-06-27 at 10.46.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315258/1cdf55c8-cc7a-b7fc-92d9-41f9e70dc1d4.png)
※ 本当は KeyId: 97 が欲しいのに 4295754122 (Launch Mailボタン？) が戻る図



## 状況
macOSのChromeにて RawKeyboardListener を使い、キーコードを取得するも、どうもAndroid用のキーコードが返されているっぽい状況でした。
試しに、JavaScriptを直接書いてキーコードを調べてみました。a を入力すると
RawKeyboardListenerでは 4295754122
JavaScriptでは 97
が戻ってきました。ブラウザ上では a が 97 として正しく認識されているので、おそらくFlutter内部の問題かとおもい、調査しました。

※ この時点で「Flutter webはプレビュー版だしなー」とは思っていましたが、自分で問題箇所を仮に修正することで作業を進められればいいな、と考えていました。

参考にしたサンプルコード
https://api.flutter.dev/flutter/services/LogicalKeyboardKey-class.html
調査したときに作成したコード
https://github.com/yana1316/Flutter-RawKeyboardListener

## 結論
先に結論を書くと、以下を書き換えることで macOS でも、おおよそのkey codeが正しくなります。
flutter_web_ui/packages/flutter_web_ui/src/engine/keyboard.dart 内にある Keyboard._hadleHtmlEvent() の 'keymap': 'android' を 'keymap': 'fuchsia' に変更

## 問題点
2つほど発見しました。
1つ目は、packages/flutter_web/lib/src/services/raw_keyboard.dart にありました。
ここでは、messageとして送られてきたデータをプラットフォーム別の対応表に合わせてデータを整形している感じでしょうか。見てみると fuchsia、android の記述はあるのですが、macos、Linuxは少し下に書かれています。 if(!ui.isWeb) と共に！
つまり、Flutter webの場合はまだ macos、Linuxは実装されていないってことですね。TODOも書かれていました。

2つ目は、flutter_web_ui/packages/flutter_web_ui/src/engine/keyboard.dart にありました。こちらでは HTMLのkeyboardイベントからプラットフォームの種別を判定しているようです。が、TODOが書かれており、androidに固定されていました。
試しに android の部分を fuchsia に変更してみたところ、期待したとおり a を押したときに 97 が戻ってきました。

## まとめ
Flutter web は基本的な表示部分は良い感じですが、深い部分になるとプレビュー版だということを実感させてくれますね！
accessのクエリ(sql)をファイルに書き出すvbaマクロ



下記をコピペして、実行する(F5)を押す。

　→accessファイルと同じフォルダに、「クエリ名.sql」というテキストファイルができます。

```vba

Sub exportQueryAsSqlFile()

    Dim db, query, nFP As Integer

    MkDir (CurrentProject.Path & "\sql")
    
    Set db = Application.CurrentDb
    For Each query In db.QueryDefs

        Debug.Print query.Name


        nFP = FreeFile
        Open CurrentProject.Path & "\sql\" & query.Name & ".sql" For Output As nFP
        Print #nFP, query.SQL
        Close nFP

    Next query

End Sub
HTMLの定義リスト＆箇条書き

#定義リスト
定義リストとは、見出しとその説明を一対にしたリストのこと

```
<dl>
  <dt>見出しの項目1つ目</dt>
  <dd>内容の項目1つ目</dd>
  <dt>見出しの項目2つ目</dt>
  <dd>内容の項目2つ目</dd>
  <dd>内容の項目3つ目</dd>
</dl>
```
#####【 見え方 】
見出しの項目1つ目
　　内容の項目1つ目
見出しの項目2つ目
　　内容の項目2つ目
　　内容の項目3つ目

#箇条書き
### 「●」付きリスト
```
<ul>
  <li>リストの項目1</li>
  <li>リストの項目2</li>
</ul>
```
#####【 見え方 】
- リストの項目1
- リストの項目2

###「数字」付きリスト
```
<ol>
  <li>リストの項目1</li>
  <li>リストの項目2</li>
</ol>
```
#####【 見え方 】
1.リストの項目1
2.リストの項目2

###list-style-typeプロパティ
リストの頭の装飾を変更することができるCSSのプロパティ

```
li {
    list-style-type: 種類;
}
```
#####【 一覧 】
|値|説明|見え方|
|:--:|:--|:--:|
|none|なし|  |
|disc|黒丸|●|
|circle|白丸|○|
|square|黒四角|■|
|decimal|数字|1.|
|cjk-ideographic|漢数字|一.|
|decimal-leading-zero|0から始まる数字|01.|
|lower-roman|小文字のローマ字|i.|
|upper-roman|大文字のローマ字|I.|
|lower-greek|小文字のギリシャ語|α.|
|lower-alpha<br>lower-latin|小文字のアルファベット|a.|
|upper-alpha<br>upper-latin|大文字のアルファベット|A.|
|hiragana|ひらがな|あ.|
|hiragana-iroha|ひらがな（いろは）|い.|
|katakana|カタカナ|ア.|
|katakana-iroha|カタカナ（いろは）|イ.|

###list-style-imageプロパティ
リストの頭の装飾を画像に変更することができるCSSのプロパティ

```
li {
    list-style-image: url(画像の場所/ファイル名);
}
```
業界初！Webデータを自動収集できるWebスクレイピングテンプレート

今では、副業としてAmazonと楽天市場に出店している人がたくさんいるでしょう。Amazonの販売者だった場合、競合店がどのような価格で同様の製品を販売しているのかを調査しなければなりませんね。Amazonデータベースに直接アクセスすることはできないので、出品者と価格のテーブルを作成するためにすべてのページを閲覧する必要があります。もちろん、Pythonを書いて、製品名、レビュー、価格などのような望ましい情報を抽出するためにスクレイピングロボットを作ることもできます。しかし、プログラミング技術を持っていない販売者にとって、Webから有用なデータを取得するためのコーディング方法を学ぶことは、自分の能力を遥かに超えています。

もしパワーポイントテンプレートのようにWebスクレイピングにもテンプレートがあれば、対象となるWebサイトのテンプレートを選択して、収集したいデータを選択してスクレイピングを開始できますよね。そこはOctoparseの出番です。Octoparseは業界初の革新的なWebスクレイピングテンプレートという機能をリリースしました。

 

#Octoparseについて

[Octoparse](https://www.octoparse.jp/)は、初心者から高級者向けのWebスクレイピングツールです。直感的に操作できる操作画面、コーディングせず簡単なポイントアンドクリック操作をして、Webサイトからすべてのテキストを収集ことが可能です。取得したデータはExcel、HTML、CSV、またはご指定のデータベースのような構造化フォーマットに保存されます。

 

#Webスクレイピングテンプレートとは？

[Webスクレイピングテンプレート](https://www.octoparse.jp/tutorial/template-mode/)は非常にシンプルで強力な機能です。テンプレートを使うと、プログラミング知識の少ない/ない人でも簡単にWebスクレイピングを達成できます。具体的には、Octoparseのソフトには数十種類のあらかじめ作成されたテンプレートがあり、パラメータ（ターゲットWebサイトのURL、検索キーワードなど）を入力するだけで、データが抽出されてきます。そのため、スクレイピングタスクやコードを書く必要はありません。例えば、eBayで「イヤフォン」に関する製品情報を収集したい場合は、パラメータに「イヤフォン」と入力してタスクを実行して、数秒でアイテム番号、価格、送料などを含む製品情報を得ることができます。

 

#なぜ[テンプレートモード](https://www.octoparse.jp/tutorial/template-mode/)が特別なの？

Webクローラーを作成するのにどれほどの技術スキルが必要でしょうか？新しくリリースされたWebスクレイピングテンプレートでは「必要なし」です。伝統的なWebスクレイピング手法では、1つのWebクローラーを完成させるためにPythonを学ぶ必要があります。しかし、Pythonの学習にはかなり時間がかかります。例えば、Pythonの書くことを、Adobe Photoshopを使って写真を編集するようなものだと考えてみてください。VSCOのような写真加工アプリと比べると、Adobe Photoshopはパラメータのセットが非常に複雑です。OctoparseのWebスクレイピングテンプレートは、Webスクレイピングに苦労している人々のためのソリューションです。必要あるのはWebサイトのURLを入力することだけです。それからの作業はOctoparseが全部やります。

 

#これは誰向けなの？

誰でも！はい、データを迅速かつ簡単に入手したい人のために。この時点でテンプレートはAmazon、Instagram、Twitter、YouTube、楽天市場、Googleマップなど多くの人気サイトがカバーされています。

 

#ほかのWebスクレイピングツールと比べてOctoparseの特徴は？

1. Octoparseは、内蔵ブラウザを介して、データを閲覧、検索、抽出するという人間の操作をシミュレートします。スクロールダウン、実行前の待機などの高度な設定により、抽出プロセス全体が人間化されて順調になります。
2. Webサイトにブロックを回避するために、Octoparseはプロキシサーバー、IPローテーション、ユーザーエージェント、CAPTCHA回避、Cookieクリアなどを提供して、Webスクレイピングの中断を防止します。
3. 抽出時間と頻度を設定することで、定期のスクレイピング作業をOctoparseに任せることができます。あるいは、クラウド上でタスクを実行して、ローカルリソース（パソコンのメモリーやIPなど）を占有しないようにすることもできます。
4. Octoparse内蔵の正規表現ツールで抽出したデータを再フォーマットすることができ、XPathツールは、プログラミングに詳しくない人のために要素を正確に見つけることができます。

 

 

本当の意味での自動Webスクレイピングを実現するために、Octoparseチームはデータをより入手しやすくし、誰でも利用できるように取り込んでいます。ビッグデータの時代では、誰でもビッグデータの力を利用するためにデータを収集するスキルを身に付けるべきです。正確なデータベースがあれば、データ分析、マーケティング戦略、センチメント分析、広告キャンペーン、見込み顧客の生成などを実行できます。
Android Studio Logcat regex expressions for efficient debugging

Logcat provides several default filter options (Verbose, Info, Debug etc) and a simple pattern match filter, but the regex filter is the most powerful option for customizing logcat output. Here, I provide 3 useful patterns that have been frequently used to search the logcat more efficiently.

### 1. Basic INCLUDE filter:

```bash
(logging|FA)
```

where logcat will only show lines containing the expressions separated by "|" (case-insensitive).

For example, "logging" may be a unique log identifier for your application, and FA is the output from the Firebase Analytics library

### 2. INCLUDE exact string filter (case-sensitive)

```bash
(?i)\bFA\b
```

here, we find logs that match FA exactly e.g. FA, FA-SVC from the Firebase Analytics library, and not any line that includes FA, Fa, fa etc


### 3. EXCLUDE filter by message type/source

Alternatively, if we want to display most of the logs (because we want to observe any unexpected library crashes or device warnings), it is better to EXCLUDE only those messages we can confidently ignore for the current session.

e.g.

```bash
^(?:(?!D/|I/|E/|W/|V/|Wifi|audio_hw_extn).)*$\r?\n?
```

where

- E/ corresponds to Error messages, I/ corresponds to Info messages, etc..
- Wifi, audio_hw_extn corresponds to any message containing these common keywords

Examples of message sources that frequent pollute the logcat and may not be useful for debugging include:
- GnssLocationProvider
- Bundle
- WifiService
- audio_hw_extn
- sensors-hal
- FA|FA-SVC (verbose logging from Firebase Analytics, if not disabled in the application code)

One could also copy their un-filtered logcat to an online text analyzer e.g. https://www.online-utility.org/text/analyzer.jsp to find the most common sources of logs.
神経衰弱ゲームをrubyでつくる【ruby初心者】

#はじめに

神経衰弱ゲームを作ってみる。


#実際のコード

```
#縦の数、横の数、プレイヤーの数を受け取る
h,w,n = gets.chomp.split(" ").to_a

#カードの並びを行列で入れる変数を宣言
cards = []

#高さの数だけ、受け取りを繰り返す。
h.to_i.times do
    array = gets.chomp.split(" ").map &:to_i
    cards.push(array)
end

#プレイヤーの数だけ、スコアの配列を用意する
score=[]
n.to_i.times do
    score.push(0)
end

#実行回数
l = gets.chomp.to_i

#ターンの宣言
turn = 0


#ゲームの開始
l.times do
    #実行回数分、めくったカードを配列で受け取る。
    array = gets.chomp.split(" ").map &:to_i

    #受け取った配列を、各回の行列に代入する。
    a_1,b_1,a_2,b_2 =array.to_a

    #めくったカードの指定をする
    first  = cards[a_1 -1][b_1 -1]
    second = cards[a_2 -1][b_2 -1]

    #カードが一致だったらスコアをあげる
    if first == second
        score[turn] += 2

    #一致しなければ、次のターンに移る。
    else
        turn += 1
        if score.count <= turn
            turn=0
        end
    end
end
    
puts score
```
[Java] 子クラスのインスタンスを親クラスに型変換する場合の注意点

```Parent p = new Child()``` と ```Child c = new Child()``` で何が異なるのか備忘録

# 注意点
* 変数はstaticかどうかにかかわらず、参照型のクラス("＝"の左側）が優先される。
* メソッドは、staticであれば、参照型のクラス("＝"の左側）が優先される。


### 想定ケース

* Childクラスの親クラスがParentクラス
* staticと非staticなメンバとメソッドが各クラスでそれぞれ定義されている。

```java
class Parent{
	int a = 1;
	static int b = 2;
	
	String medhod1() {
		return "parent method1";
	}
	
	static String medhod2() {
		return "parent method2";
	}
}


class Child extends Parent{
	int a = 10;
	int b = 20;
	
	@Override
	String medhod1() {
		return "child method1";
	}
	
	static String medhod2() {
		return "child method2";
	}
}

```

### 実行結果

```java
		Parent parent = new Child();

		System.out.println(parent.a); // => 1　・・・★
		System.out.println(parent.b); // => 2　・・・★
		System.out.println(parent.medhod1());  // => child method1　　・・・★
		System.out.println(parent.medhod2());  // => parent method2
		
		Child child = new Child();
		System.out.println(child.a);  // => 10
		System.out.println(child.b);  // => 20
		System.out.println(child.medhod1());  // => child method1
		System.out.println(child.medhod2());  // => child method1
```