OmniAICreator/Qiita-1.07M huggingface dataset:
配列の奇数の個数の取り出し

# 初めに
配列の中から奇数の個数を取り出す方法をわからなかった(odd?を初めて学んだ)ので記事にまとめました。
# odd? メソッド
[公式リファレンス]("https://docs.ruby-lang.org/ja/latest/method/Integer/i/odd=3f.html")によると
>自身が奇数であれば真を返します。そうでない場合は偽を返します。

# 本題
```
[1, 2, 3, 4, 5, 6, 7] <= 配列　　この中から奇数の個数4を取り出す
```

1. eachメソッドで数を取り出す
2. 取り出した数の個数を出す
3. 条件分岐で奇数のみの個数を出す

####この順番で考えます

###1. eachメソッドで数を取り出す
```ruby

def numbers(nums)
  nums.each do |num|
    puts num
  end
end

numbers([1, 2, 3, 4, 5, 6, 7])

# 出力結果 => 1 2 3 4 5 6 7
```

###2. 取り出した数の個数を出す
```ruby
def numbers(nums)
  count = 0
  nums.each do |num|
    count += 1 #繰り返される度にcountが1増える
  end
  puts count
end

numbers([1, 2, 3, 4, 5, 6, 7])

# 出力結果　=> 7
```
###3. 条件分岐で奇数のみの個数を出す
```ruby
def numbers(nums)
  count = 0
  nums.each do |num|
    if num.odd? #numが奇数の時trueを返す
      count += 1
    end
  end
  puts count
end

numbers([1, 2, 3, 4, 5, 6, 7])

# 出力結果　=> 4
```

無事に奇数のみを取り出すことができました。
逆に偶数のみ取り出したいときはeven?メソッドがあります

# 追記
もっと簡単に取得できる方法をコメントで教えてもらったのでそれを記載します。

[Enumerable#count](https://docs.ruby-lang.org/ja/2.7.0/method/Enumerable/i/count.html) を使用

```ruby

number = [1, 2, 3, 4, 5, 6, 7]

number.count{ |x| x.odd? }
# または
number.count(&:odd?)
# または
number.count{ |x| x % 2 != 0}
```

#最後に
公式リファレンスを見ると知らないことがたくさんあるので定期的に見ることが大事だと思いました。
最後まで読んでくださってありがとうございます。
ケモインフォマティクスで学ぶNumPy

# はじめに

[ケモインフォマティクスで学ぶPythonのクラス](https://qiita.com/yukiya285/items/7d4dc98b4a4b4cc410e5)に続き、リピドミクス（脂質の網羅解析）を題材として、Pythonの代表的なライブラリの一つである「NumPy」について解説していきます。
ケモインフォマティクスの実践例を中心に説明していきますので、基本を確認したいという人は以下の記事を読んでからこの記事を読んでみてください。

[製薬企業研究者がNumPyについてまとめてみた](https://qiita.com/yukiya285/items/c664756b48cb1902530f)


# NumPyを用いた基本的な演算

NumPyを使うことで、ベクトルや行列演算を高速で行うことができます。

まず、`import ライブラリ名`でライブラリを読み込むことができます。
さらに、`as 略号`をつけることで、以降はここで書いた略号でライブラリを呼び出す（指し示す）ことができます。
NumPyの場合は、慣習的に`np`とすることが多いです。

```python
import numpy as np


masses = np.array([12, 1.00783, 15.99491]) # 炭素、水素、酸素原子の精密質量を格納したndarray
numbers = np.array([16, 32, 2]) # パルミチン酸の炭素、水素、酸素原子の数

print(masses * numbers) # 元素ごとに精密質量を計算
print(sum((masses * numbers))) # パルミチン酸の精密質量
```

上のように、`np.array(リスト)`とすることで、複数の要素を持つベクトルを作成することができます。
四則演算をすると、要素ごとに演算が行われます。
また、`sum`を使うことで、全ての要素の合計値を求めることができます。


# リストとの違い

`np.array(リスト)`で作成されるベクトルは、リストによく似ていますが、データ型は`list`ではなく、`numpy.ndarray`になります。
`numpy.ndarray`どうしを掛け算すると、各要素を掛けた`numpy.ndarray`が返されますが、`list`どうしを掛け算すると、`TypeError`となり演算ができません。

```python
import numpy as np


masses_ndarray = np.array([12, 1.00783, 15.99491])
print(type(masses_ndarray)) # numpy.ndarray

masses_list = [12, 1.00783, 15.99491]
print(type(masses_list)) # list

print(list(masses_ndarray)) # [12, 1.00783, 15.99491]

numbers_list = [16, 32, 2]
# print(masses_list * numbers_list) # TypeError
```

# 応用：原子量の計算

次に、原子およびその同位体の精密質量と天然同位体存在比をもとに、原子量を求めることを考えます。

```python
import numpy as np


exact_mass_H = np.array([1.00783, 2.01410]) # 同位体の精密質量
isotope_ratio_H = np.array([0.99989, 0.00011]) # 同位体の天然存在比

molecular_weight_H = sum(exact_mass_H * isotope_ratio_H) # 原子量を計算
print(molecular_weight_H) # 水素の原子量
```

# 応用：複数の化合物の精密質量の計算

最後に、複数の脂肪酸分子種の精密質量を求めてみます。

```python
import numpy as np


numbers = np.array([[16, 32, 2], [18, 36, 2], [18, 34, 2]]) # パルミチン酸、ステアリン酸、オレイン酸の元素組成

print(masses * numbers) # 各分子種の各元素の精密質量を計算
print(np.sum(masses * numbers, axis=1)) # 各分子種の精密質量を計算
```

# まとめ

ここでは、NumPyについて、ケモインフォマティクスで使える実践的な知識を中心に解説しました。
もう一度要点をおさらいしておきましょう。

- NumPyを使うことで、ベクトルの要素どうしの演算が簡単に行えます。
- 原子量や分子量、精密質量の計算に使えます。

続いて、Pandasについて以下の記事で解説しています。

[ケモインフォマティクスで学ぶPandas](https://qiita.com/yukiya285/items/49511d736aa87f2d27cd)


# 参考資料・リンク

[プログラミング言語Pythonとは？AIや機械学習に使える？](https://pharma-engineer.com/basic-programming/python-summary/)
【ふくだ学習録】ゼロから作るDeepLearning part5【10日目】

# ふくだ学習録とは？
ふくだが学習したことの備忘録。
目に見える形で残すことによってやる気を出す個人的な作戦です。
他人に見せるように書いているわけではないので、すごく読みにくいです。

### 読了した本
[データベースエンジニア養成読本 [DBを自由自在に活用するための知識とノウハウ満載!]](https://www.amazon.co.jp/dp/4774158062/ref=cm_sw_r_tw_dp_U_x_FPphEbQFPPQRM )

# ゼロから作るDeepLearningを読んで

### 勾配法とは？
損失関数が最小値になるパラメータを導き出すための方法の1つ。
現在の場所で、関数値が最小値になる方向（ベクトル）を探し、その方向に一定値進める。
その後、再度その地点で関数値が最小値になる方向を探し、その方向へ一定値進める。
それを繰り返して、損失関数が最小になるパラメータを見つけていく方法。

### 学習率とは？
勾配法を用いた際に、一回の移動でどれだけ移動するかどうかを表した数値。
大きすぎても小さすぎてもよくないため、正しく学習できているかを都度確かめながら、学習値の値を変更していく必要がある。

### ハイパーパラメータとは？
重みパラメータなどの、訓練データから自動で獲得される数値ではなく、人間で設定しなければならない値。

### 確率的勾配法とは？
確率的に無作為に選び出したデータに対して、勾配降下法を行うこと。SGDという名前で実装されることが一般的。

### エポックとは？
訓練データを使い切るまでの回数に対応する単位。
例えば訓練データが１００００個あって、１００個のミニパッチで学習をする場合は、１００回繰り返せば全ての訓練データを見たことになる。（厳密には、ランダムでデータを選ぶことになるので、全てのデータを見ているわけではない）
この場合、１エポック＝１００回となる。

### 逆伝播とは？
学習フェーズにおいて、重みパラメータを正確にしていく（各重みパラメータに関する損失関数の勾配を求める）際、微分を連鎖律という考え方で積み重ねていき、逆算していく。その「微分を積み重ねていくこと」を逆伝播と呼ぶ。

### ニューラルネットワークの学習全体像

**前提**
ニューラルネットワークは、適応可能な重みとバイアスがあり、この重みとバイアスを訓練データに適応するように調整することを「学習」と呼ぶ。ニューラルネットワークの学習は次の4つの手順で行う。

**ステップ１（ミニバッチ）**
訓練データの中からランダムに一部のデータを呼び出す。

**ステップ２（勾配の算出）**
各重みパラメータに関する損失関数の勾配を求める。

**ステップ３（パラメータの更新）**
重みパラメータを勾配方向に微小量だけ更新する。

**ステップ４（繰り返し）**
ステップ１、２、３を繰り返す。

### Momentum、AdaGrad、Adamとは？
最適なパラメータを求めていくための手法方法のこと。

[【学習メモ】ゼロから作るDeep Learning【6章】](https://qiita.com/yakof11/items/7c27ae617651e76f03ca)

### 重みの初期値に関して
重みの初期値を正しく設定することで、学習のスピードが上がる。
重みの初期値は、活性化関数の種類によって設定仕分ける。

**sigmoid関数やtanh関数の場合（左右対称かつ、中心付近が線形関数に近いもの）**
1/√n

**ReLU関数の場合**
２/√n

※それぞれnはノードの個数

### Batch Normalizationとは？
各層のアクティベーションが適度な広がりを持つように、強制的にアクティベーション分布を調整する手法。
ミニバッチでの入力データを、平均０、分散１のデータ集合に変換することで、アクティベーション分布を広げる、
活性化関数の前（もしくは後）に挿入することで使用する。

### 検証データとは？
ハイパーパラメータのチューニングを行うためのデータセット。

### ハイパーパラメータの最適化手順

**ステップ０**
ハイパーパラメータの範囲を設定する

**ステップ１**
設定されrたハイパーパラメータの範囲から、ランダムにサンプリングする。

**ステップ２**
ステップ１でサンプリングされたハイパーパラメータの値を使用して学習を行い、検証データで認識精度を評価する。（ただしエポックは小さく設定）

**ステップ３**
ステップ１とステップ２をある回数（１００回など）繰り返し、それらの認識精度の結果から、ハイパーパラメータの範囲を狭める。

### ベイス最適化とは？
最適化を効率良く行なっていくための手法の1つ。

[ベイズ最適化入門](https://qiita.com/masasora/items/cc2f10cb79f8c0a6bbaa)

### CNNとは？
畳み込みニューラルネットワークのこと。
**「畳み込み層」**と**「プーリング層」**がある。

### 代表的なCNN
**LeNet**
手書き数字認識を行うネットワーク。
１９９８年に考案された「初めてのCNN」。

**AlexNet**
画像認識のCNN。
LetNetを進化させたもの。

### 演算精度のビット削減
ニューラルネットワークでの演算を行う際、数値精度（何ビットのデータで数値を表現するのかということ）に関しては１６ビットの半精度浮動小数点数で十分問題なく学習できる。
理由は、ニューラルネットワークにはロバスト性（データに多少のノイズが入っても出力結果が変わりにくい性質）があるから。

# 今日の一言
「ゼロから作るDeepLearning」読み終えた！
終盤は駆け足になってしまったけど、どういう理論でディープラーニングというものが成り立っているのか理解できた！

でも実際にそれをどんな形で利用していくべきか、または利用する方法に関しては、学ぶことができなかったので、自分でアプリ作ってみて、そこで機械学習させてみる！（使うとしたら一旦[TensorFlow](https://www.tensorflow.org/?hl=ja)でいいのかな？って感じしてるけど、どうなんやろ。。。？）

次はcakePHP！！！
logue-cli failed to connect to KORG NTS-1 (v1.03)

[日本語版](https://qiita.com/mizba/items/a11b8c280e2b84e442e6)

# Intro

I've upgraded my KORG NTS-1 from v1.02 to v1.03. After that, logue-cli started to fail to connect to the KORG NTS-1 device. This post explains a workaround on that issue.

 - [KORG NTS-1 v1.03 download site](https://www.korg.com/us/support/download/product/0/832/) ([ja](https://www.korg.com/jp/news/2020/0110/))

## tl;dr;

Please append `-i 0 -o 0` command line parameters:

```sh
$ ./logue-cli probe -i 0 -o 0
...
```

If it won't work, you may need to adjust the `0`s. Please keep reading :)

# Environment

## MacOS
```sh
$ sw_vers
ProductName:    Mac OS X
ProductVersion: 10.15.2
BuildVersion:   19C57
```

## KORG NTS-1 / logue-cli
```sh
$ ./logue-cli probe -i 0 -o 0
> Device: nutekt digital
> System version: 1.03
> Logue API version: 1.01-0
> Available modules:
```

# Issue

After upgrading to v1.03, the CLI tool logue-cli started to fail with the following message:

```sh
$ ./logue-cli probe 
Error: Search device request timed out.
Logue handshake failed.
```

# Resolution

It can be resolved if we specify the MIDI interface number manually.

```sh
$ ./logue-cli probe -h

Usage: logue-cli probe <options>

Detects and displays information about a connected logue device. This is the help for probe command:

Probe Command Options:
  -h [ --help ]         Display usage help.
  -m [ --module ] arg   Module specifier: modfx, delfx, revfx, osc.
  -l [ --list ]         List all available MIDI ports.
  -i [ --inport ] arg   Input MIDI port index.
  -o [ --outport ] arg  Output MIDI port index.
  -v [ --verbose ]      Print out verbose details about each step.
  -d [ --debug ]        Print out transaction details.
  -V [ --version ]      Display version information.
```

As you can see, we can get the list of MIDI ports with `-l` option. On my laptop, it shows the following result:

```sh
$ ./logue-cli probe -l
  Available MIDI inputs:
    in  0: nutekt digital MIDI IN
    in  1: nutekt digital KBD/KNOB

  Available MIDI ouputs:
    out 0: nutekt digital MIDI OUT
    out 1: nutekt digital SOUND
```

We need to use the MIDI port number for `nutekt digital MIDI IN` and `nutekt digital MIDI OUT`. In my example above, they are `0` and `0`, and can be specified by `-i` and `-o` options respectively. Please adjust it for your environment based on the list of MIDI ports..

```sh
$ ./logue-cli probe -i 0 -o 0
> Device: nutekt digital
> System version: 1.03
> Logue API version: 1.01-0
> Available modules:
```
Intellijでデータベースのテーブル定義をHTMLで出力する

# 概要

DBのテーブルを作成した時に、PRにテーブルの定義を載せたい場面があり、Intellijでいい感じに出力できたので、方法を残しておきます。
GitHubのプルリクだったらこんな感じで載せることができます。

<img width="751" alt="Screen Shot 2020-01-18 at 20.07.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259782/0428cc8f-7942-e38b-2b9e-acf7f61a0917.png">

## 前提
- IntellijからDBが接続できる状態

## 検証環境
- PhpStorm 2019.3.1
- GoLand 2019.3.1

# 方法

IntellijのDBコンソールで`SHOW COLUMNS`を実行

```sql
SHOW COLUMNS FROM users;
```

そうすると右下に実行結果がテーブルで表示されます。
<img width="1278" alt="Screen Shot 2020-01-18 at 20.19.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259782/252d27e5-aa0a-10fe-e398-cb0e44e5248e.png">


赤枠で強調している、テーブルの右上に表示されている下矢印がDDLのダウンロードボタンです。左のドロップダウンで__HTML Table__を選択します。

<img width="270" alt="Screen Shot 2020-01-18 at 20.23.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259782/874038ed-b85a-24bc-c9db-4db1c584e711.png">

下矢印ボタンを押下してDDLをダウンロードします。今回は__To Clipboard__を選択します。

<img width="199" alt="Screen Shot 2020-01-18 at 20.23.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259782/f2dc02a7-2ba7-8c35-e9c3-a48e4a54eea8.png">

そうするとクリップボードに以下のようなHTMLがコピーされます。

```html
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<table border="1" style="border-collapse:collapse">
<tr><th>Field</th><th>Type</th><th>Null</th><th>Key</th><th>Default</th><th>Extra</th></tr>
<tr><td>id</td><td>int(10) unsigned</td><td>NO</td><td>PRI</td><td>NULL</td><td>auto_increment</td></tr>
<tr><td>firebase_uid</td><td>varchar(255)</td><td>NO</td><td>UNI</td><td>NULL</td><td></td></tr>
<tr><td>account_name</td><td>varchar(255)</td><td>NO</td><td>UNI</td><td>NULL</td><td></td></tr>
<tr><td>display_name</td><td>varchar(255)</td><td>NO</td><td></td><td>NULL</td><td></td></tr>
<tr><td>email</td><td>varchar(255)</td><td>YES</td><td></td><td>NULL</td><td></td></tr>
<tr><td>icon</td><td>varchar(255)</td><td>YES</td><td></td><td>NULL</td><td></td></tr>
<tr><td>department_id</td><td>int(10) unsigned</td><td>YES</td><td>MUL</td><td>NULL</td><td></td></tr>
<tr><td>created_at</td><td>datetime</td><td>NO</td><td></td><td>CURRENT_TIMESTAMP</td><td>DEFAULT_GENERATED</td></tr>
<tr><td>updated_at</td><td>datetime</td><td>YES</td><td></td><td>CURRENT_TIMESTAMP</td><td>DEFAULT_GENERATED on update CURRENT_TIMESTAMP</td></tr>
<tr><td>deleted_at</td><td>datetime</td><td>YES</td><td></td><td>NULL</td><td></td></tr></table>
</body>
</html>
```

これをGitHubやGitLab、BitBucketのPRに貼り付けることで、最初の画像のようになります。
c# メモ

```
using System;
using System.Collections.Generic;
using System.Linq;

public class PlayerRepository
{
    private static readonly List<Player> Players = new List<Player>();

    public IReadOnlyList<Player> GetAll()
    {
        CheckPlayers();
        return new List<Player>(Players);
    }

    public void Regist(Player p)
    {
        CheckArguments(p);
        CheckRegistYet(p);
        Players.Add(p);
    }

    public void UnRegist(Player p)
    {
        CheckArguments(p);
        CheckRegistAlready(p);
        Players.Remove(p);
    }

    public bool Exists(Player p)
    {
        return Players.Contains(p);
    }

    private void CheckPlayers()
    {
        if (Players.Any(null))
            throw new Exception("Exist null in the list.");
    }

    private void CheckArguments(params object[] args)
    {
        foreach (var arg in args)
            CheckArgment(arg);
    }

    private void CheckArgment(object arg)
    {
        if (arg == null)
            throw new ArgumentNullException();
    }

    private void CheckRegistYet(Player p)
    {
        if (Exists(p))
            throw new Exception("Player is already registed");
    }

    private void CheckRegistAlready(Player p)
    {
        if (Exists(p))
            throw new Exception("Player is not registed");
    }
}

```

戻り値がリストならIReadOnlyList、リストをコピーして返す。
Can't connect to local MySQL server through socket '/tmp/mysql.sock'が表示された場合（本番環境）

AWSのEC2にデプロイしようとした際に、下記エラーが表示された場合の対処方法をまとめたいと思います。
『Can't connect to local MySQL server through socket '/tmp/mysql.sock'』

### 原因
問題点としては、下記のsocketに接続できないのが問題

```ruby:credentials.yml
db:
  database: アプリ名
  username: root
  password: 設定したPW
  socket: /var/lib/mysql/mysql.sock #ここに接続ができない
```

mysqlを再起動すると、/var/lib/mysql/mysql.sockが自動的に作成されるので、起動

## Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)

1)　MySQLの起動確認
Mysql2::Error: Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock'というエラーが起こった場合、mysqlが起動していない可能性があります。

```:ターミナル(EC2)
sudo service mysqld start

#再起動をさせたい場合は、
sudo service mysqld restart
```
改善があるか？確認



## Can't connect to local MySQL server through socket '/tmp/mysql.sock' (13)
database.ymlとcredentials.ymlの中身に漏れがないか確認をしてください
database.ymlにsocketの記述漏れがあれば、エラーがおきます

```ruby:credentials.yml
db:
  database: アプリ名
  username: root
  password: 設定したPW
  socket: /var/lib/mysql/mysql.sock
```


```ruby:config/database.yml
production:
  database: <%= Rails.application.credentials.db[:database] %>
  username: <%= Rails.application.credentials.db[:username] %>
  password: <%= Rails.application.credentials.db[:password] %>
  socket: <%= Rails.application.credentials.db[:socket] %>
　#ここのsocketが抜けていないか？？？
```
PhpStormの設定変更

(2020-03-26) この記事は http://blog.a-way-out.net/blog/2020/01/20/phpstorm-configuration/ のコピーです。今後、退会により記事が削除される可能性があります。

# 環境

- PhpStorm 2019.3.1

# 行の折り返し設定

<img width="1094" alt="phpstorm-pref-editor-general.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41766/073ba5aa-412c-74d5-e57e-d3ec6cf056c5.png">

<img width="1094" alt="phpstorm-pref-editor-code-style.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41766/9c56c92f-ea45-1baf-2247-7530b64cfafc.png">

<img width="1094" alt="phpstorm-pref-editor-console.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41766/b198cfef-91b8-4f7e-78f0-af94d8639566.png">

# フォント設定

<img width="1094" alt="phpstorm-pref-editor-font.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41766/9fdf9c39-b7a8-3733-3425-03416f53c197.png">

# PHP コーディングスタイル

<img width="1065" alt="phpstorm-editor-codestyle-php.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41766/09063259-58f7-4bb6-917d-f1d245136f97.png">

# 参考

- [エディター - ヘルプ | PhpStorm](https://pleiades.io/help/phpstorm/settings-editor.html?keymap=primary_default_for_macos)

---

[![クリエイティブ・コモンズ・ライセンス](https://i.creativecommons.org/l/by-sa/4.0/88x31.png)](http://creativecommons.org/licenses/by-sa/4.0/deed.ja)
この記事は[CC BY-SA 4.0（クリエイティブ・コモンズ 表示 4.0 継承 国際 ライセンス）](http://creativecommons.org/licenses/by-sa/4.0/deed.ja)の元で公開します。
【Django】OAuth認証でのログイン時、毎回許可画面が呼ばれる

# はじめに
`social-auth-app-django`を使ってTwitter連携アプリを作成しているのだが、OAuth認証済みなのに、`{% url 'social:begin' 'twitter' %}`でTwitterログイン時、毎回以下のような連携許可画面が呼ばれてしまう。
<img width="718" alt="スクリーンショット 2020-01-18 20.12.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431401/b49591dd-ebc7-d882-6b4e-66abb21eecdf.png">

# 解決方法
Twitter Developerページで対象アプリの「Allow this application to be used to sign in with Twitter」にチェックを付ける。
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431401/cff9bc69-2fc5-5f8b-2a9c-e2678f7cf766.png)

# おわりに
`social-auth-app-django`だとこれで解決したが、解決できなければ以下を試してみると良さそう。
・[Twitterのauth認証で毎回連携許可画面が出る場合の対処法](http://ichiy.hatenablog.com/entry/2013/12/17/191107)

公式ドキュメントは[こちら](https://developer.twitter.com/en/docs/basics/authentication/guides/log-in-with-twitter)。
三次方程式の判別式の導出



```math
\begin{align}
f(X)&=X^3+pX+q=(X-\alpha)(X-\beta)(X-\gamma)\\
f'(\alpha)&=(\alpha-\beta)(\alpha-\gamma)\\
f'(\beta)&=(\beta-\alpha)(\beta-\gamma)\\
f'(\gamma)&=(\gamma-\alpha)(\gamma-\beta)\\
D&=(\alpha-\beta)^2(\beta-\gamma)^2(\gamma-\alpha)^2\\
&=-f'(\alpha)f'(\beta)f'(\gamma)\\
&=-(3\alpha^2+p)(3\beta^2+p)(3\gamma^2+p)\\
&=-27\left(\alpha^2+\frac{p}{3}\right)
\left(\beta^2+\frac{p}{3}\right)
\left(\gamma^2+\frac{p}{3}\right)\\
&=-27\left(\alpha+i\sqrt{\frac{p}{3}}\right)\left(\alpha-i\sqrt{\frac{p}{3}}\right)
\left(\beta+i\sqrt{\frac{p}{3}}\right)\left(\beta-i\sqrt{\frac{p}{3}}\right)
\left(\gamma+i\sqrt{\frac{p}{3}}\right)\left(\gamma-i\sqrt{\frac{p}{3}}\right)\\
&=-27f\left(i\sqrt{\frac{p}{3}}\right)f\left(-i\sqrt{\frac{p}{3}}\right)\\
&=-27\left(-i\frac{p}{3}\sqrt{\frac{p}{3}}+ip\sqrt{\frac{p}{3}}+q\right)
\left(i\frac{p}{3}\sqrt{\frac{p}{3}}-ip\sqrt{\frac{p}{3}}+q\right)\\
&=-27\left(2i\frac{p}{3}\sqrt{\frac{p}{3}}+q\right)
\left(-2i\frac{p}{3}\sqrt{\frac{p}{3}}+q\right)\\
&=-27\left(\frac{4}{27}p^3+q^2\right)\\
&=-4p^3-27q^2
\end{align}
```
Excelのアドイン「ラベル印刷ウィザード」はExcel2007と2010にしか存在しなかった

#というかそんなこといつExcel2013の説明であったかがわからない

[初心者のためのOffice講座-SupportingBlog2 ラベル印刷ウィザード  2010-11-19](https://www.hamachan.net/2010/11/blog-post_19.html)
>Excel2007から人によっては超嬉しい機能が追加されました。

>これまでラベル印刷を行うには、住所録はExcelで管理していても　Wordなどで差し込み印刷を利用しなければなりませんでした。

>Excel2007ではアドインを追加することで、Excelから直接ラベルへ印刷することができるようになりました。

Microsoft Excel ラベル印刷ウィザードのアドインが出てこない 
https://answers.microsoft.com/ja-jp/msoffice/forum/all/microsoft-excel/b3627f22-50a5-4d00-90dd-0cbd64d6731f?auth=1

>Makapu 返信日 2017年11月23日
>返信鵜野澤修 さんの投稿 (2017年11月23日) への返信
>鵜野澤修さん、こんにちは。
>同じ様にExcel でラベル印刷ウィザードが表示されなくてお困りなのですね。
>上のコメントにもあります様に、Excelのラベル変換ウィザードはExcel 2013から廃止されました。

>◇ アドインにラベル印刷ウィザードがない - Excel2013の使い方
>代わりとして、Word でラベル印刷が出来る様になっております。
>Excelで作成したアドレス帳のデータをWordの「差し込み印刷」の機能からラベルが印刷出来ますので、
>そちらをご利用になってみて下さいね。

>◇ ラベルの差し込み印刷ウィザードを開始するには

というかラベル変換ウィザードとか書いている。。。それはいいとして。


https://excel-2013.blogspot.com/2013/10/excel2013_14.html
 2013年10月14日月曜日
アドインにラベル印刷ウィザードがない - Excel2013の使い方 
Answersで紹介されているリンクもこの調子で既定路線のように記載し、公式サイトの情報はない。
とりあえず、せっかくExcelから直接できるようになったのをわざわざ消したということのようだ。
現在の使い方はExcel2003以前と同様になっているということだ。
とりあえずささやかに喜ばれ、6年後にひっそりと消えてしまったことだけは事実だ。主な変更点、新機能に記載されていないらしい。
ずっと昔からあったような気がしていたが、意外と短命だった。しかしいまのところこのAnswersくらいしか見つからない。公式でこれが書いてあるところをご存知でしたら教えてください。ないとすれば本当にひっそりと削除されたということになるが。。。
初心者によるプログラミング学習ログ 213日目

#100日チャレンジの213日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

213日目は

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>213日目<br><br>vue cliの導入とか設定<br><br>ふとvue.jsでポートフォリオつくろうとおもいたった<a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> <a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a> <a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1218265797715324929?ref_src=twsrc%5Etfw">January 17, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
プログラミングの初感

<h1>プログラミングを勉強し始めてもうすぐ一ヶ月...感想は？</h1>

<p>プログラミングを勉強し始めてからもうすぐ一ヶ月ということで、個人的なプログラミングの正直な感想を書いていこうと思います。</p>
<p>はっきり言ってよくわかりません；；</p>

<p>上達はしていると思いますが、ドラクエでいうと迷いの森(あるいはダンジョン)を延々と彷徨っているような感覚です。全てわかってから進みたい病？ではダメということで走り抜けてきましたが、いざ実戦で
戦うと何を記憶から取りこぼしているのか、よくわかりますね。</p>

<p>宝箱も放置して一直線できましたが、開けたはずの記憶の宝箱(最低限必要な情報)も気付いたら閉じてしまっている(忘れている)ようなイメージでしょうか...今の学習方法は正しいと思いますが、心理的に本当にこれで大丈夫なのか？...と他の人が考えてしまうのもよくわかる気がします。</p>

<p>まぁとにかく進むしかないので、今週も頑張っていきたいと思います＼(^^)／</p>
便利ページ：データURLを生成する

「[便利ページ：Javascriptでちょっとした便利な機能を作ってみた](https://qiita.com/poruruba/items/6c67c7eef34ed302feb3 )」のシリーズものです。

HTMLでは、コンテンツ制作者は小さなファイルをインラインで文書に埋め込むことができる「データURL」というのがよく使われています。

こんな感じです。

```
data:[<mediatype>][;base64],<data>
```

(参考) データURL : MDN
https://developer.mozilla.org/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

（たいしたことはやってませんが）[便利ページ](https://qiita.com/poruruba/items/6c67c7eef34ed302feb3 ) に追加しておきました。


いつもの通りGitHubにも上げてあります。
　https://github.com/poruruba/utilities

参考までに、以下にデモとしてアクセスできるようにしてあります。「バイナリファイル」のタブを選択してみてください。
　https://poruruba.github.io/utilities/


```js:start.js
        binary_open: function(e){
            var file = e.target.files[0];
            var reader = new FileReader();
            reader.onload = (theFile) =>{
                this.binary_data = new Uint8Array(theFile.target.result);
                this.binary_type = file.type ? file.type: 'application/octet-stream';
                if( this.binary_type.startsWith('text/'))
                    this.binary_text = decoder.decode(this.binary_data);
                this.binary_dataurl = "data:" + this.binary_type + ";base64," + bufferToBase64(this.binary_data);

                this.binary_change();
            };
            reader.readAsArrayBuffer(file);
//            reader.readAsBinaryString(file);
//            reader.readAsDataURL(file);
        },
```

以下、抜粋です。

```js
this.binary_dataurl = "data:" + this.binary_type + ";base64," + bufferToBase64(this.binary_data);
```

以上
素人がiPhoneアプリを作った話＜SNS機能＞

# やりたかったこと

* アカウント作成（ユーザー登録）
* 承認制のクローズドSNS
* ユーザーによるアイコン選択
* タイムライン表示
* 書き込み
* 編集
* 削除
* 何種類かの「いいね」機能
* アカウント削除
* 通報
* ログイン
* 自動ログイン

#できたこと 

* アカウント作成（ユーザー登録）
    * ユーザー登録はAPIでWordPressにメールを登録する形になっています
    * 登録も含めてユーザー管理はプラグインのUltimate Memberで行っています
     1. メールアドレスを入力してSign Upボタンを押すとメールが送信されます
     2. 折り返しメールが届きます
     3. メールのURLからWordPressの新規登録画面へ行って登録します 
* 承認制のクローズドSNS
 * Ultimate Memberの承認制なので、管理者にメールが届き、承認作業をします（アプリ上では承認前でもログインできてしまいますが）
* タイムライン表示
    * WordPress側とアプリ側の紐づけ
        * WordPressで投稿のパーマネントリンクをシリアル番号にして管理し、削除に使用
        * また、ユーザーのログイン情報を使って本人のIDの投稿だけを本人投稿ページに一覧表示
        * 不適切なユーザーの投稿の通報は別ページからメーラー立ち上げてパーマネントリンクのシリアル番号を通報してもらう

* 書き込み
* 削除
* いいね機能（一部）
 * 1種類のみ
 * タップすると泣き顔のアイコンが笑顔アイコンになる
 * いいねをカウントする（ニフクラで管理）
* アカウント削除
 * APIで削除ができなかったので、削除依頼のメールを送信してもらうようになっている
 * 削除依頼のリンクをタップするとメーラーが立ち上がる
 * メールにアカウント名と内容が自動で入る
* 通報
 * 不適切な投稿があったときに通報できるようにアカウント削除と同じ方法でメーラーとメール本文が作られている
* ログイン
 * ログイン画面から行うようになっている

#できなかったこと

* 承認制のクローズドSNS
 * 承認前にログインできてしまっている
* ユーザーによるアイコン選択
 * 自分で何種類かのアイコンから選べるようにしたかったけれど、わたしの技術ではできなかった
* 編集
 * 編集できるようにできず、上書きにしようと考えたが時間切れで断念した
* 何種類かの「いいね」機能
 * Facebookのいいねと同じような何種類かの顔の表情のいいねができるようにしたかったができなかった
* アカウント削除
 * APIでできるようにしたかったが、Ultimate Memberのせいかできなかった
 * 原因を突き止めて改善する時間がなかった
* 自動ログイン
 * 一度ログインしてログイン状態を保持できるオプションを付けたかったができなかった

全体的に、技術不足と時間不足により、やりたいことができていません。でも、素人でこのSNS機能を3週間で作ったのは自分でも褒めたい！

1回目に申請した時のアプリにはSNS機能はなく、却下を受けてWordPressの画面をアプリ内で表示してSNSができるようにしました。
ここまでは却下されてから3日間で、WordPressをUltimate MemberとBuddyFormsを使ってメンバー限定のSNSにできるように、いいね機能もプラグインを使って何種類かできるようになどしていました。

2回目の却下を受け、REST APIでSNS機能をアプリとして付け、WordPressをバックエンドにするしかないと判断して、必死に調べて現在の状態にしました。知り合いのエンジニアに、もう一度却下されたらアドバイスをして欲しいと頼んでありました。

3回目の却下はSNS機能ではなく、メインの機能（メッセージ表示）がちゃちいということのようだったので、着想を得た元のアプリを指摘してこれと同じものなので却下の正当性がないと抗議し、契約に至りました。

現在は、SNSのREST APIの部分の何かの変更と、ニフクラのURL変更のために、以下の機能が使えません。

* 新規登録
* いいね
* 投稿削除

早くなんとかしたいのですが、今は気力がなく放置しています。MonacaやOAuth Server、WordPressをインストールしたサーバー、ドメイン、などなど自動的に支出はあるので、どなたか作業の見積もりしていくらでならできるか教えてください。
何よりも、このアプリを使ってくださる方々の役に立つ状態にしたいと思います。

データは前回の投稿にて全て公開してあります。

よろしくお願いいたしますm(_ _)m
jupyterlabの拡張機能の設定が反映されない時の対処法

#はじめに

[こちらを参考にさせていただきました。](https://amzn.to/3dZfOyc)

pyenvなどのローカル環境で開発していてインストールアンインストールをしていて急に設定が反映されなくなり、あれこれ試すうちにうまくいったのでメモをここに残します。

#やり方
ローカル環境にあるjupyterlabのconfigファイルを２つ削除してしまいます。

```:~/.local/share/virtualenvs/projectname/share/jupyter/lab/settings/
build_config.json
page_config.json
```

さいどインストールし直せばうまく行くと思います。
Pytestでローカルに一時的なhttpサーバを起動する

ユニットテスト実行時にローカルサーバを立てることで外部に依存しないテストを行うことができる。

APIやクローラ開発で便利。

流れはこんな感じ

- `conftest.py`にフィクスチャとしてhttpサーバの起動/終了処理を記述
- テスト関数の中でフィクスチャを呼び出す

# 実装

- conftest.py

```python:conftest.py
import pytest
from http.server import (
    HTTPServer as SuperHTTPServer,
    SimpleHTTPRequestHandler
)
import threading


class HTTPServer(SuperHTTPServer):
    """
    ThreadでSimpleHTTPServerを動かすためのラッパー用Class.
    Ctrl + Cで終了されるとThreadだけが死んで残る.
    KeyboardInterruptはpassする.
    """
    def run(self):
        try:
            self.serve_forever()
        except KeyboardInterrupt:
            pass
        finally:
            self.server_close()


@pytest.fixture()
def http_server():
    host, port = '127.0.0.1', 8888
    url = f'http://{host}:{port}/index.html'
    # serve_forever をスレッド下で実行
    server = HTTPServer((host, port), SimpleHTTPRequestHandler)
    thread = threading.Thread(None, server.run)
    thread.start()
    yield url  # ここでテストに遷移
    # スレッドを終了
    server.shutdown()
    thread.join()
```

`yield`文でテスト関数に制御を移す。
unittestにおける`setUp`と`tearDown`がそれぞれに`yield`文の前後あたる。

実行ディレクトリにコンテンツを配置しておく。

```html:index.html
<html>Hello pytest!</html>
```

テスト関数でフィクスチャ(`http_server`)を利用する

- test_httpserver.py

```python:test_httpserver.py
import requests


def test_index(http_server):
    url = http_server
    response = requests.get(url)
    assert response.text == '<html>Hello pytest!</html>'
```


# 実行結果

```
$ pytest --setup-show test_httpserver.py
========================================= test session starts =========================================platform linux -- Python 3.8.1, pytest-5.3.3, py-1.8.1, pluggy-0.13.1
rootdir: /home/skokado/workspace/sandbox
collected 1 item

test_httpserver.py
        SETUP    F http_server
        test_httpserver.py::test_index (fixtures used: http_server).
        TEARDOWN F http_server

========================================== 1 passed in 0.60s ==========================================
```

`--setup-show`オプションをつけることでフィクスチャの生成をトレースできる。
`test_index`関数でフィクスチャ`http_server`が使用されているのがわかる。

# その他

ばんくし([@vaaaaanquish](https://twitter.com/vaaaaanquish))さん、参考にさせて頂きました

参考 - [Pythonのhttp.serverを利用してWebスクレイピングのunittestを書く](https://vaaaaaanquish.hatenablog.com/entry/2017/06/24/140456)
AWS 公式ドキュメントを読む前に


## はじめに
エンジニアをしている方は、何か調べ物をする場合は基本的に公式ドキュメントを参照される方が多いと思います。しかし分かりやすいドキュメントの場合はよいのですが、AWS ユーザガイドは英語から機械翻訳をしているのか日本語が非常に読みづらいため、AWS初心者や初めて使うサービスの場合、AWS ドキュメントを参考に進めるとなかなか苦戦します。[例：EC2 ユーザガイド](https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/concepts.html)

実際に自分も初めて AWS を使った時は、このAWS ドキュメントの理解にとても苦しめられました。そこで本記事では、**AWS初心者の方や AWS のとあるサービスを初めて触る時にスムーズに理解できるようになるにはどうすればいいか** について書こうと思います。


## 流れ

### [1. 「AWS is 何」を3行でまとめてみるよ](https://qiita.com/kohashi/items/1bb952313fb695f12577) 
まずは超概要を理解する。とりあえず、一言でどんなサービスなのかを理解する。超概要なので別にとばしてもよいです。

### [2. AWS Black Belt Online Seminar ](https://www.youtube.com/playlist?list=PLzWGOASvSx6FIwIC2X1nObr1KcMCBBlqY) 

次は [AWS Black Belt Online Seminar (動画) ](https://www.youtube.com/playlist?list=PLzWGOASvSx6FIwIC2X1nObr1KcMCBBlqY) をみる。一般的な知識から解説してくれるため、概要理解にはぴったり。１サービスだいたい１時間ぐらいで、話すスピードが全体的にゆっくりめなので、再生速度をあげて聞くのがおすすめです。動画で説明している PDF の資料は[ AWS サービス別資料 ](https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-service-cut/) を参照しましょう。

### 3. Google 検索 `サービス名` + `やりたいこと` 
ここら辺でだいたいサービスの概要は理解でき、具体的にどう構築・実装するかについて考え始めるところだと思います。ここで Google検索で `サービス名` + `やりたいこと` で検索をします。例えば、`ec2 サーバ構築` というワードで検索します。ここで検索をしてもなかなか思うような記事に当たらない場合は、バッドプラクティスに向かっている可能性があるので注意します。
やってみた系の記事中心に、画像豊富に説明をしている記事があればそれを参考にします。余裕があれば実際にサービスを触ってみるのがよいと思います。記事の作成日が古い場合、現状のサービスの機能と異なっていることがあるので注意です。

### [4. AWS 公式ドキュメント ](https://docs.aws.amazon.com/index.html)
おそらく細かい部分で情報が足りないことがあったり、ブログ記事だと正確ではないことがあるため最後は必ず AWS ユーザガイドを参照しましょう。おそらく最初に AWS ユーザガイドを読むときと比較して、理解度が全然異なると思います。

## その他

### [AWS 用語集](https://docs.aws.amazon.com/ja_jp/general/latest/gr/glos-chap.html)
AWS における公式の用語集です。用語がわからない時に参照しましょう。

### AWS関連本
AWS関連本は正直おすすめではないです。理由は、AWSに限らずクラウドサービスは進化がとても早いため、数ヶ月もすれば情報が陳腐化します。AWSの情報は公式を中心に収集するようにしましょう。
【rails5.2】master.keyを本番環境（AWS EC2）に設定（追加作成）する方法


## master.keyを作成していないとどうなるのか？
master.keyを本番環境で設定しておかなければ、rails db:create RAILS_ENV=productionなどを実行した際にエラーが表示される。


rails db:create RAILS_ENV=productionを実行

```
$ rails db:create RAILS_ENV=production
```
するとエラーが表示される

```
rails aborted!
NoMethodError: Cannot load database configuration:
undefined method `[]' for nil:NilClass
```

この'[]'はdatabase.ymlの下記が読み込めないために発生する。

```ruby:database.yml
production:
  <<: *default
  database: <%= Rails.application.credentials.db[:database] %>
  username: <%= Rails.application.credentials.db[:username] %>
  password: <%= Rails.application.credentials.db[:password] %>
  socket: <%= Rails.application.credentials.db[:socket] %>
```

'[]'は、[:database]、[:username]、[:password]、[:socket]などの環境変数が読み込めないことを意味している。
AWSからすれば、「credentials.ymlの[：database]読み込めっていうけど、鍵がないからデータ見れねえええよおおお」
という状態です。

### なぜ読み込めないのか？
credential.ymlの中身は他の人が閲覧できないように暗号化されている。
この暗号化を解除するのがmaster.key。
master.keyは扉を開ける鍵の役割をしており、鍵を使って解除しなければ、その先のデータを読み込むことができない。

これは、本番環境でも同じです。
master.keyがなければ、暗号化を解除できないので、環境変数を読み込めずエラーとなる。



## 本番環境のshared/configにmaster.keyを作成

### ローカル環境にある,master.keyの中身を確認する

rails newで作成された、ローカルのmaster.keyを確認する。

```
$ vi config/master.key
```
すると下記のようにmaster.keyの中身が表示されます。

```
fadfdfdgaf44623535y....
```
この表示された、master.keyの値をコピーしましょう

![スクリーンショット 2020-01-18 18.20.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455403/363d699e-b403-55ff-01f0-f137ea1d3914.png)
表示されたmaster.keyをコピーします。
これを本番環境で貼り付けていきます。


### 本番環境でmaster.keyを作成
EC2のアプリのconfigを開きましょう

```
# 誤解が生まれやすいmaster.keyの作成場所

✖︎ アプリ名＞config＞master.key
○ アプリ名＞shared＞config＞master.key

```
🚨アプリ名＞shared＞config＞master.keyの場所に作成する必要があるので注意しましょう

```
#本番環境
[ec2-user@ip-172-31-23-189 ~]$ cd /var/ここはそれぞれ違います/[アプリ名]
[ec2-user@ip-172-31-23-189 <アプリ名>]$ cd shared/config
```
そうしたら、本番環境上でmaster.keyを作成します

```
[ec2-user@ip-172-31-23-189 config]$ vi master.key
# ローカル環境のmaster.keyの値を入力
fsdgagaf08deg424~~~~~
````
画像だと下記のような画面になります。


![スクリーンショット 2020-01-18 18.20.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455403/363d699e-b403-55ff-01f0-f137ea1d3914.png)
『　i　』を押すと----INSERT-----と表示がされて、文字入力ができます。 
ここにコピーしたローカルのmaster.keyの値を貼り付けします。


『　esc　』ボタンを押した後、:wq入力して保存します

これで本番環境でもmaster.keyが設定されています。
Vue.jsを使って簡単なtodoアプリを作ってみた

#Vue.jsを使って簡単なtodoアプリを作ってみた

身内用進捗内容報告記事
---
#####初めに
Vue.jsが初めてのjsライブラリとなったが苦難することなく作ることができた

[デモ](https://codepen.io/ankorz/details/LYEgdzE)
#####コード

##HTML
```html
<div id="app">
  <div>
    <li v-for="(todo, i) in todos">
     {{ todo.text }}
     <button @click="remove(i)">
    削除
  </button>
    </li>
  </div>
  <input v-model="todo" >
  <button @click="add">
    追加
  </button>
</div>
```
##javascript
```javascript
var app = new Vue({
  el: '#app',
  data: {
    todos: [],
    todo: 'sample',
  },
  
  methods: {
    add() {
      this.todos.push({ text: this.todo })
    },
    
    remove(i) {
      this.todos.splice(i, 1) 
    }
  }
}) 
```
The asset "" is not present in the asset pipeline

assetへのパイプラインがうまくいってない時に起こるエラーです。

config/envitonments/production.rbで

```
config.assets.compile = true
```
をして、再起動してとりあえずうまく行かない時は、

```
<%= image_tag user.image.to_s %>
```
みたいな記述をしていませんか。
特にbxsliderをお使いの初学者の方。
このままだとただの変数を入れているだけになるので
そういう場合は、

```
<%= image_tag '/assets/user.jpg' %>
```
みたいに「app/assets/images」ディレクトリに置いて呼び出すか。
refireのgemを使って呼び出せばうまく行きます。

```
<%= f.attachment_field :image %>
```
【CSS】画像と台形のテキストボックスを重ねたアイキャッチの作り方

#【CSS】画像と台形のテキストボックスを重ねたアイキャッチの作り方

##オンライン学習サイトの画像を想定しています。
※レスポンシブだと表示が崩れるため注意

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="relative mv">
    <!--左側画像部分-->
    <img src="./img/school.jpg" alt="">
    <!--/左側画像部分-->
    <!--右側テキストボックス-->
    <div class="my-parts absolute">
      <div class="textWrapper">
        <h2>
          洗練されたオンライン学習体験を。
        </h2>
        <div class="box">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda rem laboriosam quidem quasi deserunt delectus animi suscipit ratione modi illum ipsa ipsum dicta aliquid, consequatur exercitationem! Minima at facere deserunt!
        </div>
        <div class="box">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio, accusantium aspernatur atque quidem pariatur placeat iure alias consectetur, fuga, debitis ipsum? Eum sit cumque dolores tempora laborum consequuntur neque voluptas.
        </div>
        <div class="btnWrapper">
          <p class="btn orange">
            <a href="">お問い合わせ</a>
          </p>
          <p class="btn aqua">
            <a href="">詳しく見る</a>
          </p>
        </div>
      </div>
      
  
    </div>
    <!--/右側テキストボックス-->
</body>
</html>
```

```css:style.css
* {
  padding: 0;
  margin: 0;
}

a {
  cursor: pointer;
  color: black;
  text-decoration: none;
}

/*.mv*/
.relative {
  position: relative;
  width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.absolute {
  position: absolute;
}

/*.mv img*/
.relative img {
  width: 500px;
  height: 100%;
}

/*右側*/
.my-parts {
  border-bottom: 334px solid cornflowerblue;
  width: 600px;
  height: 0px;
  border-left: 50px solid transparent;
  right: 0;
}

.textWrapper {
  padding: 30px;
}

h2 {
  text-align: center;
}


/*ボタン部分*/
.btnWrapper {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}

p.btn {
  width: 40%;
  text-align: center;
  border: 2px solid grey;
  border-radius: 30px;
}

p.btn a {
  display: block;
  padding: 10px 0;
}

.aqua {
  background-color: aqua;
}

.orange {
  background-color: orange;
}

p.btn:hover {
  opacity: 0.8;
  transition: all 0.5s;
}
/*/ボタン部分*/
```
フレッツ光のホームゲートウェイで一部設定が見えない件

# 一部設定が見えない

- フレッツ光のホームゲートウェイの設定( http://192.168.1.1/ ) で一部設定が見えない。
- 使用機材はこちら。
    - PR-400MI
- 見えない設定は、確認できているだけで以下の通り。
    - 詳細設定 -> 静的IPマスカレード
    - 詳細設定 -> 静的NAT設定
    - 詳細設定 -> VPNサーバ設定
    - 詳細設定 -> 高度な設定 -> WAN→LAN中継設定
- これじゃあWOL設定もVPN設定もできない！助けてドラ○もーーーん！！！

# 原因と解決策

- 原因としては、”v6プラス”というフレッツ光のサービスが有効になっていたため。
    - 簡単に言うと、IPv4しか対応していない機器でもIPv6の通信方式で通信ができますよー、なやつ？（間違っていたらすいません！）
        - 詳細詳細は[こちら](https://www.google.com/search?q=ipv6%E3%83%97%E3%83%A9%E3%82%B9&oq=IPv6%E3%81%B7&aqs=chrome.1.69i57j0l7.5105j0j7&sourceid=chrome&ie=UTF-8)
    - こちらをオフにすることで上述の見えない設定が設定できるようになる。

# 設定方法
1. <http://192.168.1.1:8888/t/>　へアクセス
2. "IPv4設定"をクリック
3. 高度な設定 -> IPv4 ON/OFF設定　にて "機能停止"をチェック後、設定

- これで上述の設定が見えるようになる。
- ID/PWはホームゲートウェイに設定しているもの。

# 最後に
- 設定は自己責任でお願いします！
BigqueryでGAデータを分析する時のよく使用するクエリ

#GAのデータをBigQueryで分析するときのクエリまとめ

最近はどこの会社でもデファルトでGoogleAanlyticsまたはAnalytics360を導入しており、
ウェブマーケティングに使用しているとおもいます。
GAはいろいろウェブの施策を確認したり、ユーザー行動を把握する上で素晴らしいツールではありますが、デファルトUIではユーザーID(cookieベース)ごとの分析はできないのが一つのネックです。
ですが、GA360を導入しているところはGAデータをBigQueryに移行することが可能で、それによってIDベースで分析が可能になります。
GAデータをBQに移行させた上で分析するときによく使用するクエリをまとめました！
※standard sqlを使用しています。
こういうときはどうするのとか質問あればコメントください。ちょこちょこ追加しますー


##時間操作でよくつかうもの
####UTCをJST（日本時間に変更するクエリ）

```sql
--UTCを日本時間に直す
FORMAT_TIMESTAMP('%Y-%m-%d %H:%M:%S', created_at, 'Asia/Tokyo') AS JST

--UTCを日本語時間に直す（日付）
FORMAT_TIMESTAMP('%Y-%m-%d', created_at, 'Asia/Tokyo') AS JST
```
####DATE_DIFFのクエリ
時間の差分を出すためのクエリ。日数の差分を出す場合には前処理として使用するカラムをdate型に変換しておく必要があるので注意。
僕はこの変換していないエラーでいつも引っかかるw

```sql
--DATE_DEFFを使用する前処理として、前もって使用するカラムの型をDATE型に変しておく
--下記、DATE型にCASTするクエリ
CAST(FORMAT_TIMESTAMP('%Y-%m-%d',hitTime, 'Asia/Tokyo') AS date) AS visit_date

--前処理をした後にやっとこさdate_diffを使用して、日数の差分を出す
DATE_DIFF(purchase_date,visit_date, DAY)

-- （time_jst - purchase)　の解を出してくれる
```


##URLを操作するクエリ
GAではページビューごとにヒットが飛ばされるので、URLを操作する機会がおおい。
またURLをカテゴリごとにまとめて分析することがおおいのでその際にURLをカテゴリの識別子に変換して分析することをおすすめする。


#####正規表現でURLを変換/操作する
▽GAでURLごとに分析することがおおくなるので、正規表現を使ってURLを操作するクエリは変換や操作するのに使いやすいのでぜひ覚えておいてほしい。

```sql
--正規表現にマッチするか判定
REGEXP_MATCH('str','reg_exp') --これは標準SQLでは使用不可かもしれない。。
REGEXP_CONTAINS('str','reg_exp')

--正規表現にマッチする部分を抜き出す
REGEXP_EXTRACT('str', 'reg_exp')

---正規表現でマッチする部分を文字列置換
REGEXP_REPLACE('orig_str', 'reg_exp', 'replace_str')
```

#####URLの一定箇所のみを抜き出すためのクエリ
▽URLである一定の文字列を除外した状態でカラムに収めたいときに使えるクエリ
もしパラメータのみを吐き出したいときや、またhttps://配下のみを抽出したいときに使える

```sql
--https://以外の文字列を取得する
REGEXP_EXTRACT(url, 'https://(.*)')
```

▽パラメータ除外（?配下を除外するクエリ）
パラメータを空白にreplaceするクエリ。これを知って入ればごちゃごちゃしたURLをスッキリさせて分析に使用できるぞー

```sql
REGEXP_REPLACE( page.pagePath,"[?](.*)",'')
```


▽URLのPathをディレクトリごとに分割するためのクエリ


```sql
SPLIT(path_all, '/')[SAFE_OFFSET(1)] --pathの１番目のディレクトリを取得,
SPLIT(path_all, '/')[SAFE_OFFSET(2)] --pathの2番目のディレクトリを取得,
SPLIT(path_all, '/')[SAFE_OFFSET(3)] --pathの3番目のディレクトリを取得
```
Splashメモリ使いすぎ問題の回答(案)

弊研究室のアドベントカレンダーまさか無事に終わるとは思っていませんでした。
今回ははSplashのメモリ問題について書きます。

## 結論
**メモリ食いすぎたら勝手に落ちるから再起動**

## これは何か
以前に[Scrapyはいいぞぉ](https://qiita.com/marutaku0131/items/3da0b0870cb0a2bd4244)って記事を書きました。しかしScrapyには一点問題があります。それは、当然のようにJavaScriptが動作しないことです。JavaScriptを使うページをScrapyでスクレイピングするときによく使うのが[Splash](https://github.com/scrapinghub/splash)というツールです。

Splashは、JavaScriptをレンダリングしてくれるサーバで、WebAPIを使ってアクセスすることで指定したサイトのJavaScript実行後のソースを取得することができます。中身はPythonで書かれていて、TwistedとQT3を使っているみたいです。

## 問題
そんな便利なSplashですが、１つ大きな問題があります。それは、メモリをめちゃくちゃ消費することです。
下の図は、Splashのメモリ消費量のグラフです。
[![Image from Gyazo](https://i.gyazo.com/d92f65426ef2d61f8f2e9c5943ae0738.png)](https://gyazo.com/d92f65426ef2d61f8f2e9c5943ae0738)
リクエストをすればするほど消費するメモリが増えていきます。この調子ではいくらメモリを積んでもあっという間になくなってしまいます。
Githubにも同様のIssueは立っていますが、Pythonの仕様でメモリを解放することができないみたいです。
https://github.com/scrapinghub/splash/issues/674

## 解決策
Pythonの問題は流石に手が打てません。もし知っている人がいたら教えてください。
上記のIssueにも書いてあるように、メモリを解放するには一回Splashを落とす以外に方法がありません。ただ、Splashを手動で落とすわけにはいかないので自動で落とす必要があります。cronとかで1分ごとに再起動みたいなスクリプトを書くのもアリですがめんどくさい。そんなときにどうすればいいか。

**メモリ不足で落ちるまで待ちましょう。そして自動で再起動させましょう**

あまり頭がいい解決策ではないですがこれが一番楽です。

## どうするか
以下のような状況を対象にします。

* SplashはDockerで動かしてる
* docker-composeを使っている

まず、SplashのDockerコンテナが使えるメモリの上限を設定します。docker-composeはversion3から`mem_limit`がなくなってしまったので2を使います。
また、落ちた時に自動で再起動するように`restart:always`をつけてあげます。

```yml
version: "2"
services: 
    splash:
        image: "scrapinghub/splash:3.3"
        ports: 
            - "8050:8050"
        mem_limit: 2g
        restart: always
        command: --disable-browser-caches --maxrss 4000
```
これでメモリを必要以上に食うことがなくなりました。

## 終わりに
途中でも言ったようにあまり頭のいい解決策ではないです。もっと賢く楽にできる方法があったら教えてください。

## 参考にしたサイト
* https://splash.readthedocs.io/en/stable/faq.html#how-to-run-splash-in-production
* https://reboooot.net/post/how-to-specify-mem-limit-on-docker/
*
gcloudコマンドがぶっ壊れた話

## 症状

```
ERROR:root:code for hash md5 was not found.
Traceback (most recent call last):
  File "/usr/local/Cellar/python/2.7.8_1/Frameworks/Python.framework/Versions/2.7/lib/python2.7/hashlib.py", line 139, in <module>
    globals()[__func_name] = __get_hash(__func_name)
  File "/usr/local/Cellar/python/2.7.8_1/Frameworks/Python.framework/Versions/2.7/lib/python2.7/hashlib.py", line 91, in __get_builtin_constructor
    raise ValueError('unsupported hash type ' + name)
ValueError: unsupported hash type md5
ERROR:root:code for hash sha1 was not found.
Traceback (most recent call last):
  File "/usr/local/Cellar/python/2.7.8_1/Frameworks/Python.framework/Versions/2.7/lib/python2.7/hashlib.py", line 139, in <module>
    globals()[__func_name] = __get_hash(__func_name)
  File "/usr/local/Cellar/python/2.7.8_1/Frameworks/Python.framework/Versions/2.7/lib/python2.7/hashlib.py", line 91, in __get_builtin_constructor
    raise ValueError('unsupported hash type ' + name)
ValueError: unsupported hash type sha1
and more

```

https://cloud.google.com/sdk/install
見てねって言われてたので、見ましたが何も解決しません。

hash typeとか言われているので、opensslかなぁと思って、

```
brew install openssl
brew link openssl --force
brew uninstall python
brew install python --with-brewed-openssl 
```
はやりましたが、症状が変わりません。

これはPythonの問題かなぁと思って、

```
brew uninstall python
brew install python
```
としますが、ダメです。
というかあれ、Python３系じゃん。
とここで気づきます。

２系とパスがbrewの仕様で変わっていそうなので

```
brew install python@2

$ brew list | grep python
python@2
```

としますが、なんかだめです。

バージョンの問題かなぁとか思いまして、

```
$ brew update && brew upgrade
```

をしたらいい感じにアップデートしてくれます。
これで直りました！！

同じエラーに悩まされた人の役に立てば幸いです。
babel.config.js で 以下のエラーが出てビルドできない "Error: Caching was left unconfigured. Babel's plugins, presets, and .babelrc.js files can be configured"

以下のようなエラーが出て、babelでトランスパイルできない。webpackでbabelを使っている場合、webpackでビルドができない。

```
Error: Caching was left unconfigured. Babel's plugins, presets, and .babelrc.js files can be configured


for various types of caching, using the first param of their handler functions:

module.exports = function(api) {
  // The API exposes the following:

  // Cache the returned value forever and don't call this function again.
  api.cache(true);
...
```


# 対応方法

babel.config.jsに以下を加える

```
module.exports = function(api) {
  api.cache(true);

  ...
```

# 背景
babel関連のパッケージのバージョンをあげたら上記エラーが出るようになった。
エラーメッセージに書いてある通り、`api.cache`を呼び出せばビルドできるようになった。

# なぜか
babelもしくはbabel関連のバージョンが新しいとこの問題が起きると思われる。
`.babelrc`や`babel.config.json`ではなく、`babel.config.js`を使って動的に設定をしている場合にキャッシュの設定が必須になった為にこのエラーが起きると思われる。

# 参考

公式document
- https://babeljs.io/docs/en/config-files#apicache


# あとがき

詳細は調べていない。この問題が起きるバージョンがいくつからなのかも調べていない。
この記事は、このエラー文言でとりあえず検索した人が、とりあえず対応方法が分かるように作ったもの。
Install Jenkins (docker based)

![banner-jenkins.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144058/3bdf3122-f4a8-d0b1-d34b-915315cd9da5.png)

> 💡 How to install **Jenkins** based on docker.
  
## Test environment
- Ubuntu 18.04
- docker 18.09.1

## Install
#### Create host <-> container permanent volume  

```bash
$ mkdir -p /app/jenkins
$ chmod 777 /app/jenkins
```

#### Run Jenkins 

```bash
$ docker run -d --name jenkins -p 8080:8080 -p 50000:50000 -v /app/jenkins:/var/jenkins_home \
  -u root -e JAVA_OPTS='-Duser.timezone=Asia/Seoul -Dfile.encoding=UTF-8 -Dsun.jnu.encoding=UTF-8' leechungkyu/jenkins
```

## Continue installation from web browser
> 🌍 `http://<ip>:8080` connecting, and continue the installation.

#### Input password 
`/var/jenkins_home/secrets/initialAdminPassword`

```bash
$ docker exec -it jenkins /bin/bash
$ cat /var/jenkins_home/secrets/initialAdminPassword
3830de413f4d49f7963223507527f02a # password
```
![jenkins01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144058/43faf965-1a74-0695-55e6-9afab1af0e55.png)

#### Plugin installation
Install by default and wait for the ProgressBar to complete.
![jenkins02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144058/f448e38f-0016-b6af-4822-496924794b55.png)
![jenkins03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144058/08b4c948-3a90-53ff-168b-1bb7c4a3abcc.png)

#### Create admin account
Enter your account name (login ID), password, name, and email address.
![jenkins04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144058/1048b096-17e4-9986-b0bc-78f46946a1ad.png)

#### Jenkins URL Setting
![jenkins05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144058/2dfa7e4f-9332-39f4-a757-4acab55508b5.png)

#### Start Jenkins
![jenkins06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144058/24b62d8d-4dff-e0cd-6800-dc4f4afc5c72.png)

## Note
- ✅ Using the Jenkins official docker repository image, **Locale and Timezone** are not Korea setting.
https://hub.docker.com/r/jenkins/jenkins
- So I used https://hub.docker.com/r/leechungkyu/jenkins image.  
This is an image with Locale and Timezone related to Korea setting added to the existing official Dockerfile. [Related Facebook Links](https://www.facebook.com/groups/jenkinskorea/permalink/2095905250505768/)

```bash
$ cat Dockerfile
```
```bash
... Skip

# Set the locale ko_KR.UTF-8
RUN apt-get update && DEBIAN_FRONTEND=noninteractive apt-get install -y locales
RUN sed -i -e 's/# ko_KR.UTF-8 UTF-8/ko_KR.UTF-8 UTF-8/' /etc/locale.gen && \
    dpkg-reconfigure --frontend=noninteractive locales && \
    update-locale LANG=ko_KR.UTF-8

ENV LANG ko_KR.UTF-8
RUN locale-gen ko_KR.UTF-8
ENV LANG ko_KR.UTF-8
ENV LANGUAGE ko_KR.UTF-8
ENV LC_ALL ko_KR.UTF-8

# Set TimeZone Seoul
RUN ln -sf /usr/share/zoneinfo/Asia/Seoul /etc/localtime

... Skip
Virtualenv が Python2.7 で動かなくなった話

# 2020/1 から python2.7 で virtualenv が動かなくなった。

CI 環境でpython2.7 を使っていたのだが、2020/1 から動かなくなったので、理由をしらべた。
setuptools-45.0.0からpython2.x 系はサポートされなくなったようだった。
https://pypi.org/project/setuptools/


~~~
$ virtualenv /tmp/test
Running virtualenv with interpreter /usr/bin/python2
New python executable in /tmp/test/bin/python2
Not overwriting existing python script /tmp/test/bin/python (you must use /tmp/test/bin/python2)
Installing setuptools, pkg_resources, pip, wheel...
  Complete output from command /tmp/test/bin/python2 - setuptools pkg_resources pip wheel:
  Collecting setuptools
  Using cached https://www.piwheels.org/simple/setuptools/setuptools-45.0.0-py2.py3-none-any.whl
setuptools requires Python '>=3.5' but the running Python is 2.7.13
----------------------------------------
...Installing setuptools, pkg_resources, pip, wheel...done.
Traceback (most recent call last):
  File "/usr/lib/python3/dist-packages/virtualenv.py", line 2375, in <module>
    main()
  File "/usr/lib/python3/dist-packages/virtualenv.py", line 724, in main
    symlink=options.symlink)
  File "/usr/lib/python3/dist-packages/virtualenv.py", line 992, in create_environment
    download=download,
  File "/usr/lib/python3/dist-packages/virtualenv.py", line 922, in install_wheel
    call_subprocess(cmd, show_stdout=False, extra_env=env, stdin=SCRIPT)
  File "/usr/lib/python3/dist-packages/virtualenv.py", line 817, in call_subprocess
    % (cmd_desc, proc.returncode))
OSError: Command /tmp/test/bin/python2 - setuptools pkg_resources pip wheel failed with error code 1
~~~

virtualenv を実行時に、--no-downloadにするとlocal にあるsetuptools を使うようで、それでも回避はできたが、以下を修正することでも回避できた。


/etc/pip.confのextra-index-urlをコメントアウトした。

~~~
[global]
#extra-index-url=https://www.piwheels.org/simple
~~~
WSL2でdockerが起動しないよう

#なんかwindows updateしたらdockerが起動しなくなっちゃった

```bash
$ docker ps -a
Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?
```

どうして（電話猫）

https://github.com/docker/for-win/issues/5096
githubのissuesにこたえ発見。

![1-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13435/b687f91e-8e90-b447-7cf0-0eb5c8eaacd0.png)

Settings > WSL Integratiion > {{distro}}
なんかのはずみでこれが外れちゃってることがあるみたい。こいつをオンにしたら無事起動しました。
Docker on WSL2さいこう。
content_tagでmodalやリンクを表示する

# はじめに
RailsでWebサービスを構築していると、フロントのコードをサーバーサイドで実装する場面ってありますよね。(あんまりないか)
Railsにはcontent_tagというメソッドが用意されていて、フロントのコードをサーバーサイドで記述することができます。

# content_tag
content_tagの引数は以下のように構成されています。

- 第一引数： タグ
- 第二引数： 内容
- 第三引数： クラスなどのオプション

```
# divタグ生成
content_tag(:div, 'hoge', class: 'fuga')
# => <div class="fuga">hoge</div>
```

# modalを表示するには
modal表示のサンプルです。

```hoge_helper.rb
def show_modal_button
  content_tag(:a, class: 'btn btn-default form-control', data: { toggle: 'modal', target: '#hoge-modal' }) do
    concat render 'hoge-modal'
    concat 'モーダル表示'
end
```

```hoge/_hoge_modal.html.haml
.modal.fade#hoge-modal
  .modal-dialog
    .modal-content
      .modal-header
        %h4.modal-title
          Title!
      .modal-body
        hogehogefugafuga
      .modal-footer
        .btn.btn-default.data{ dismiss: 'modal' }
          閉じる
```

```hoge/show.html.haml
...
.show-modal
 = show_modal_button
...
```

# リンクを作成する場合
content_tagはlink_toをそのまま扱えないので、以下のように書く必要があります。

```fuga_helper.rb
content_tag(a:, class: 'fuga', href: 'https://www.hoge.fuga.com') do
  concat 'hoge&fugaへのリンクです！'
```
Ruby on Rails使用時のデバッグで便利なメソッド

今日、久しぶりに使いたくなってなかなか思い出せなかったので念のためにQiitaにも書いておく。

そこそこの規模で開発していると、自分が今みているメソッドがどこから呼ばれているか分からない時たまにありませんか？
メタプログラミング的に書かれていたりしてgrepがなかなか上手くできないケースがあります。

そういう時に便利なのがrubyの`caller`メソッド
https://magazine.rubyist.net/articles/0031/0031-BackTrace.html

一旦pryで止めて、callerメソッドを実行するとその前に実行されていたメソッドの歴史が表示されるので、今見ているメソッドがどこから呼ばれているかすぐにわかります。


いやー、思い出せてスッキリ。