OmniAICreator/Qiita-1.07M huggingface dataset:
IntelliJ IDEAでjava 13のswitchをためす

※ 2019/11/15 時点です。

IntelliJ IDEAまったくと言っていいほど触ったことが無いので、自分用にメモ。

# 環境
IntelliJ IDEA 2019.2.4 (Community Edition)

# 手順
New ProjectでProject SDKに```13```を選択する。

![intelljeideaswith0001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31934/75475708-2b79-9485-86cb-13c5b5f1201b.jpeg)

https://twitter.com/java/status/1193898422849269760 の http://blog.codefx.org/java/switch-expressions/ を参考にサンプルコードを書く。
 
```java
import java.io.FileNotFoundException;

public class Main {

    static enum MY_BOOLEAN {
        TRUE, FALSE, FILE_NOT_FOUND,
    }

    public static void main(String[] args) throws Exception {
        MY_BOOLEAN ternaryBool = MY_BOOLEAN.TRUE;

        boolean result = switch (ternaryBool) {
            case TRUE -> true;
            case FALSE -> false;
            case FILE_NOT_FOUND -> throw new RuntimeException("This is ridiculous!", new FileNotFoundException());
            // as we'll see in "Exhaustiveness", `default` is not necessary
            default -> throw new IllegalArgumentException("Seriously?! 🤬");
        };
        System.out.println(result);

    }
}

```

実行すると下記のようなエラーになる。

```
Information:java: Errors occurred while compiling module 'untitled'
Information:javac 13.0.1 was used to compile java sources
Information:2019/11/15 16:13 - Build completed with 1 error and 0 warnings in 3 s 286 ms
Error:java: invalid source release 12 with --enable-preview
  (preview language features are only supported for release 13)
```

Open Module Settings -> Project Settings -> Modules -> Language level を```13 (Preview)```に変更する。

![intelljeideaswith0002.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31934/c9949f11-2138-89ea-c3e8-d44ad6e1dbed.jpeg)

これで動く。language levelを変えてあげれば```--enable-preview```は無くても動くらしい。
Windowsのログイン時、ユーザごとデスクトップにショットカット作成

#ただの備忘録
ログイン直後、何か実行したい場合、タスクスケジューラを利用していたが、できず、急がれ案件だったので下記で対応した。

# 1. EXEのショットカットを作成
app_hoge.exe
+ app_hoge.lnk

# 2.ログインしたユーザのデスクトップにショットカットをコピー
ユーザごとデスクトップにショットカットを置く仕様
```powershell:New-AppLink.ps1
function Copy-Link{
    $destLink = $env:UserProfile + "\Desktop\app_hoge.lnk"
    $bakLink = "C:\apppath\app_hoge.lnk"

    if(-not(Test-Path $destLink))
    {
        Copy-Item -Path $bakLink -Destination $destLink -Force
    }
}
Copy-Link
```
# 3. 起動フォルダにショットカット実行バッチを配置
 * C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Startup\New-AppLink.bat

```bash:New-AppLink.bat
Powershell.exe -NoProfile -command C:\apppath\New-AppLink.ps1
```

#メモ
結局不用になった。思い付き指示なのは感じていたが・・・
なにかしないと落ち着かなかったと思う。
[ java ]　インターフェース

今回はインターフェースについて記す。

##インターフェースとは
後からメソッドを実装して使用するためのもの。
例えば足し算や引き算というものは計算とくくることができる。この時、計算がインターフェース、足し算や引き算がインターフェースを実装するクラスということである。

##インターフェースを使ったプログラム
インターフェースは以下のように定義できる。

~~~java
//interface インターフェース名{}
interface Calc{}
~~~

インターフェースでは
・フィールド：定数のみ宣言できる（暗黙的にpublic static finalで修飾される）
・メソッド　：抽象メソッドのみ定義できる（暗黙的にpublic abstractで修飾される）
と決まっている。

~~~java
interface Calc{
    int NUM1 = 1; //修飾子はpublic static finalが省略されている
    int NUM2 = 10;

    void calc(); //抽象メソッド
}
~~~

インターフェースはimplementsを使って実装できる。
インターフェース実装により足し算をするクラスがあるとすると以下のとおりである。

~~~java
//class クラス名 implements　インターフェース名{}
class Plus implements Calc{
    public void calc(){
        System.out.println( NUM1 + NUM2 );
    }
}
~~~

##まとめ
インターフェースはオブジェクト指向設計にもかかわってくる。開発で重要な考え方であるので、ぜひマスターして頂きたい。
以上。
AWS CDKのDynamoデプロイ時に、Cannot update GSI's properties other than Provisioned Throughput. You can create a new GSI with a different name のエラーが出たときのメモ

## 事象
DynamoDBをCloudFormationでデプロイしているが、GSIの設定をアップデートするときに、以下のエラーが発生した。

```
Cannot update GSI's properties other than Provisioned Throughput. You can create a new GSI with a different name
```

## 解決策
「更新」はできないので、「削除」してから「作成」する。

```
    new dynamoDb.CfnTable(scope, '[tableName]', {
        tableName: tableName,
        attributeDefinitions: [...],
        keySchema: [],
        billingMode: ...,
        tags: ...,
    });
```

GSI設定を除いたものをデプロイする。

```
    new dynamoDb.CfnTable(scope, '[tableName]', {
        tableName: tableName,
        attributeDefinitions: [...],
        keySchema: [],
        globalSecondaryIndexes: [],
        billingMode: ...,
        tags: ...,
    });
```

GSI設定を含めたものをデプロイする。
【Go】sqlmockでupdated_atやcreated_atなどのtimestampにマッチさせる方法

# 前提

ORMにgormを使っていて、sqlmockでテストを書いている。

# 概要

gormはレコードの更新時にupdated_atカラムを自動で更新してくれる。
sqlmockでテストを書くときに期待するクエリを正規表現で書くが、updated_atはどのような値で更新されるかあらかじめ知ることができないため、期待するクエリと実行されたクエリが不一致となりテストに失敗してしまう。

``` bash:エラー出力
does not match actual [time.Time - 2019-11-15 06:29:27.8173492 +0000 UTC m=+0.006968701]"}
```

↑の例はupdated_atの期待する戻り値として、time.Now()と指定した結果。

# 方法

``` go:example.go

type AnyTime struct{}

func (a AnyTime) Match(v driver.Value) bool {
	_, ok := v.(time.Time)
	return ok
}

func TestExample(t *testing.T) {

	db, mock, err := New()
	if err != nil {
    	// error
	}

    mock.ExpectExec(regexp.QuoteMeta("UPDATE `users` SET `name` = ? `updated_at` = ? WHERE `users`.`id` = ?")).
        WithArgs("田中太郎", AnyTime{}, 1).
        WillReturnResult(NewResult(1, 1))
}

```

↑の例は諸々省略しているものの、伝えたいことは、以下の通り。

- AnyTime{}を定義する
- Matchを定義する
- WithArgsのupdated_atでAnyTime{}を指定する

作成の際も同様。

# 参考記事

- [go-sqlmock/argument_test.go at b9ca56ce96879f5362120ae10866bbf66f2c5db6 · DATA-DOG/go-sqlmock](https://github.com/DATA-DOG/go-sqlmock/blob/b9ca56ce96879f5362120ae10866bbf66f2c5db6/argument_test.go)
iOSのアクティビティアプリが動かない場合の対処法

Qiitaで書くか微妙な話ですが、地味に困っていた事が解決出来たので書いておきます。

#タイトルに対する結論
**iPhoneを暗号化せずバックアップ→そのバックアップで復元する**
ヘルスケアデータは初期化されてしまいますが、アプリは起動できるようになります。

#iOSの復元をしたらアクティビティアプリが沈黙
何がきっかけだったのか忘れてしまいましたが、iPhoneをバックアップ→復元したら
アクティビティアプリを起動するとローディングのぐるぐるマークが出たまま動かなくなってしまいました。
アクティビティアプリと連携しているヘルスケアアプリも歩数等のデータを取り込めていないようです。
Apple Watchで測定していた日々のカロリー消費等のデータも見られなくなってしまいました。

推測するに、復元の過程でヘルスケアに関わるデータが破損してしまったのかもしれません。

#対処法を考える
データが破損してしまったなら対処法として考えられるのは二つ。

1. 破損データを修復
2. データを初期化

破損データを修復出来れば過去のデータも残せる可能性がありますが、そもそもどこにデータがあるのかよく分かりません…。
今回はデータを初期化する方法を紹介します。

#ヘルスケアデータを初期化する
[Appleのサポートページ](https://support.apple.com/ja-jp/HT204351)によると、ヘルスケアのデータは[バックアップを暗号化する](https://support.apple.com/ja-jp/HT205220)事で、バックアップ出来るようです。
逆に言えば、暗号化しなければヘルスケアデータはバックアップされない＝初期化されます。

暗号化せずにバックアップをしたら、そのバックアップでiPhoneを復元しましょう。
すると、ヘルスケアデータはリセットされていますがアプリは起動するはずです。

ちなみに、Apple Watchのストレージにある程度の期間のヘルスケアデータは残っているので、復元後に同期させるとApple Watchのデータが反映されます。
【Python中級者への道】クラスに__getattr__関数を定義する


# まとめへのリンク

https://qiita.com/ganariya/items/fb3f38c2f4a35d1ee2e8

# はじめに

Pythonの勉強をするために、[acopy](https://github.com/rhgrant10/acopy)という群知能ライブラリを写経していました。

acopyでは、多くのPythonの面白い文法・イディオムが使われており、その中でも便利だなぁというのをまとめています。


今回は、クラスに`__getattr__`特殊メソッドを定義してみます。

# インスタンス属性

Pythonでインスタンス内部で使用される属性を取り出す方法として
`__dict__`を参照する方法があります。

インスタンス内部で使用される名前空間の名前が`__dict__`に辞書として定義されています。

例えば、以下のような例を見てみます。

```py
class A:

    def __init__(self, x, y):
        self.x = x
        self.y = y


# {'x': 10, 'y': 20}
a = A(10, 20)
print(a.__dict__)
```

aというインスタンスには、$x, y$の名前が存在し
それらを辞書として取り出すことができます。

# `__getattr__`

Pythonのクラスには、`__getattr__`という特殊メソッドを定義することができます。

Pythonのインスタンスの名前呼び出しにおいて
もし定義されていない名前で呼ばれれば**AttributeError**を返します。

しかし、もし`__getattr__`が定義されている場合は、
「名前が定義されていない呼び出し時に」AttributeErrorを返す代わりに、`__getattr__`が実行されます。

例を見てみます。

```py
class A:

    def __init__(self, x, y):
        self.x = x
        self.y = y

    def __getattr__(self, name):
        print(name, 'getattr')
        if name == 'hello':
            return self.world
        raise AttributeError

    def world(self, x):
        return x


'''
{'x': 10, 'y': 20}
hello getattr
<bound method A.world of <__main__.A object at 0x10e602150>>
hello getattr
20
'''
a = A(10, 20)
print(a.__dict__)
print(a.hello)
print(a.hello(20))
```

上のAクラスには`__getattr__`メソッドが定義されています。

`a.hello`を呼び出そうとすると、helloという属性がaに定義されていません。
そのため、`__getattr__`メソッドが呼び出され、代わりにworldメソッドを返しています。

`a.hello(20)`では、まずworldメソッドが返されて、worldメソッドに20という値を与えて実行しています。
よって、helloという名前が確定した時点で実行されています。

よって、以上の性質を使うと、以下のような無駄コードをかけます。

```py
class A:

    def __init__(self, x, y):
        self.x = x
        self.y = y

    def __getattr__(self, name):
        print(name, 'getattr')
        if name == 'hello':
            return self.world
        if name == 'world':
            return self.great
        if name == 'great':
            return self.bad
        if name == 'bad':
            return 0
        raise AttributeError


'''
{'x': 10, 'y': 20}
hello getattr
world getattr
great getattr
bad getattr
0
'''
a = A(10, 20)
print(a.__dict__)
print(a.hello)

```

# 応用例

あまり応用例は思いつきませんが、
もし属性がない場合に代わりの規程処理をやらせる、などがあるのかなと思います。
また、分岐などを呼び出し名によって変えるなどがありそうです。

```py
class A:

    def __getattr__(self, name):
        self.nothing(name)

    def exist(self):
        print('exist!')

    def nothing(self, name):
        print(f'nothing {name}')


'''
exist!
nothing unnti
'''
a = A()
a.exist()
a.unnti

```

また、後日別記事として各内容として
lambda式で名前がないとき例外コードを投げるなどでも使えそうです。


# 参考文献

- [Python のアトリビュート取り扱いの仕組み](https://www.lifewithpython.com/2018/09/python-attribute-access-internal-flow.html)
map( )メソッド

map( ) メソッド

```javascript
let array = [配列データ];
array.map[コールバック関数];
```

[map]は配列データに使うメソッド。各要素一つずつに対して『コールバック関数』を実行し、その結果を新しい配列として返すことができる。
つまり、この関数内に実行したい処理を書いておくことで配列に対して好きな操作をすることができる
固有値から固有ベクトルを求める

今話題の固有値から固有ベクトルを求める論文を実装してみた。
https://arxiv.org/abs/1908.03795

（Twitter 上でRで実装している人をすでに観測しているので、多分 $N$ 番煎じではあることを承知してこの記事を書いてる）

正確には $n$ 次 Hermitian Matrix $A$ に対し、固有ベクトルの各要素の大きさの2乗を求める。
そのため、複素数の位相成分はこの手法では求まらない。
また、Hermitian ではない正方行列にこの手法を適用しても、固有ベクトルの各要素の大きさは求まるとは限らない。
（Hermitian の固有ベクトルは直交するという性質を証明に使っているため）

$A$ の$i$ 番目の固有ベクトル$\mathbf{v}\_i$と固有値 $\lambda_i$ と定義する。
また、$A$ の$j$ 行と$j$ 列を削除した行を $M_j$ とする。

```math
M_j = 
\left[ \begin{array}{ccc|ccc}
A_{1,1} &\cdots& A_{1,j-1} & A_{1,j+1} &\cdots& A_{1,n} \\
\vdots & \ddots & \vdots & \vdots & \ddots & \vdots \\
A_{j-1,1} &\cdots& A_{j-1,j-1} & A_{j-1,j+1} &\cdots& A_{j-1,n} \\ \hline
A_{j+1,1} &\cdots& A_{j+1,j-1} & A_{j+1,j+1} &\cdots& A_{j+1,n} \\
\vdots & \ddots & \vdots & \vdots & \ddots & \vdots \\
A_{n,1} &\cdots& A_{n,j-1} & A_{n,j+1} &\cdots& A_{n,n}
\end{array} \right]
```

$A_{i,j}$ は$A$ の$i$ 行$j$ 番目の要素。
また、$M_j$ の$k$番目の固有値を$\mu^{(j)}_k$ と定義する。

すると$\mathbf{v}\_i$ の$j$ 番目の要素$v_{i,j}$ に対して、次のような式が成立する（論文の式(2)にあたる)。

```math
|v_{i,j}|^2 \prod_{k=1,k\neq i}^n (\lambda_i - \lambda_k)
= \prod_{k=1}^{n-1} (\lambda_i - \mu^{(j)}_k)
```


この式を使えば、固有値 $\lambda_i, \mu^{(j)}\_k$ から固有ベクトルの各要素の大きさの2乗$|v_{i,j}|^2$ が求まる。


これを Python3 で実装してみた。

```python
import numpy as np;
import matplotlib.pyplot as plt;


def calc_eigenvector (A, i):
    n,_ = A.shape;
    v = np.zeros ((n,1));   # 求める固有ベクトルの平方
    lams,_ = np.linalg.eig (A);
    
    for j in range (n):
        x = [xx for xx in range (n)];
        x.remove (j);
        Mj = A[:,x][x,:];
        muj, _ = np.linalg.eig (Mj);

        numerator = (lams[i] - muj).prod ();
        denominator = np.delete (lams[i]-lams, i).prod ();

        v[j,0] = numerator / denominator;
    
    return v;

N = 10;
A = np.random.randn (N,N);
A = A + A.T;
_, vs = np.linalg.eig (A);

plt.figure ();
plt.plot([0,1],[0,1]);
v_t = vs[:,0];
v_c = calc_eigenvector (A,0);

plt.scatter (v_t**2, v_c);
plt.show ();
```

calc_eigenvector が先の数式に基づいて固有ベクトルを求める関数である。
これを実行する。
![eigenvector.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276005/01404391-5d39-1db5-45d5-20f4faa86914.png)
横軸がnumpy.linalg.eig で求めた0番目の固有ベクトルの各要素の大きさの二乗、
縦軸が関数で求めた結果。
$y=x$ の直線上にちゃんと乗ってる。すごい。

全ての固有値でやったものが以下の図になる。
![eigenvector2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276005/d10652ff-af2f-45b4-f3d9-0aea0cd4620b.png)
これもちゃんと$y=x$に乗ってることが確認できた。
AmazonLinux環境でphpredisを利用できるようにするまで

# はじめに

Laravelでredisを利用するにあたり，composerでインストールするpredisではなくphp拡張であるphpredisを利用したかったため調べたこと．
以下の2つの記事にすべて記載されていますが，リンク切れ対応のためにこちらにも記載しておきます．

[AWS EC2にredisをインストールする](https://qiita.com/stoshiya/items/b8c1d2eb41770f92ffcf)
[【メモ】redisをphpで使うまで](https://qiita.com/shinofara/items/9476cee35cfac1b7ee50)

# AmazonLinuxにRedisをインストール

※バージョンは今後変わる可能性がある．

## AmazonLinux(第1世代)の場合

```
sudo rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-6.rpm
sudo yum --enablerepo=remi install redis
```

## AmazonLinux2(第2世代)の場合

```
sudo amazon-linux-extras install redis4.0
```

# Redisの起動

```
※色々設定はしたほうがいい場合もある

// 第1世代
sudo service redis start
sudo chkconfig redis on

// 第2世代
sudo systemctl start redis
sudo systemctl enable redis
```

# phpredisをインストールする

```
sudo su -
cd /usr/local/src
git clone git://github.com/nicolasff/phpredis.git
cd phpredis/
phpize
./configure
make
make install

// php.iniに追加（状況によりpathは異なるかも）
echo "extension=redis.so" > /etc/php.d/redis.ini

// 確認
php -m | grep redis
```
HTMLで<code><pre>とするのは正しくない

# HTMLで`<code><pre>...`とするのは正しくない

## tl;dr

HTMLの規格で `<code><pre></pre></code>` は許されず、 `<pre><code></code></pre>` は許されます。

## `<code><pre>...</pre></code>`が正しくない理由

`<code>` が受け入れる子要素は記述コンテンツ(phrasing content)のみ[^1]ですが、`<pre>` は記述コンテンツではありません[^2]。よって `<code><pre>`...`</pre></code>` は許されません。


別の言い方をすれば、`<pre>`の親要素として許可されているのは"フローコンテンツを受け入れるすべての要素"です[^3]が、`<code>` は記述コンテンツしか受け入れません[^4]。よって `<code><pre>`...`</pre></code>` は許されません。

[^1]: https://developer.mozilla.org/ja/docs/Web/HTML/Element/code
[^2]: https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content
[^3]: https://developer.mozilla.org/ja/docs/Web/HTML/Element/pre
[^4]: https://developer.mozilla.org/ja/docs/Web/HTML/Element/code

## `<pre><code>...</code></pre>`が正しい理由

> 複数行のコードを表すには、 `<code>` 要素を `<pre>` 要素の中に入れてください。 [^5]

とdeveloper.mozilla.orgに書かれていることからも正しいことがわかります。

[^5]: https://developer.mozilla.org/ja/docs/Web/HTML/Element/code
配列内の特定条件の値群のみ先頭or末尾に集める並び替え

# 要件

* 配列にn個の要素がある
* 条件に合う要素のみ、固めて配列の先頭に移動したい
* 条件に合わない要素の順列は保存する

***

条件(移動したい値)は複数あるとし、配列で持っていることとする。

# 結論コード

`filter`で**条件に合う配列**と**条件に合わない配列**を作ってつなげる。
こちらは非破壊的な方法。

```js
const priority = ['dog', 'cat', 'human']

const target = [
    {id:'caw'},
    {id:'pig'},
    {id:'dog'},
    {id:'car'},
    {id:'cat'},
    {id:'bird'},
    {id:'human'},
]

console.log(
  target.filter( a => priority.includes(a.id)
  ).concat(
    target.filter( b => !priority.includes(b.id))
  )
)
```

```js:出力
[
  {
    "id": "dog"
  },
  {
    "id": "cat"
  },
  {
    "id": "human"
  },
  {
    "id": "caw"
  },
  {
    "id": "pig"
  },
  {
    "id": "car"
  },
  {
    "id": "bird"
  }
]
```

# sort版

想定していたやりかたができそうになかったので、`sort`の自作比較関数で行うことに。
破壊的であることが好きな場合に。

[Array.prototype.sort() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)

```js
const priority = ['dog', 'cat', 'human']

const target = [
    {id:'caw'},
    {id:'pig'},
    {id:'dog'},
    {id:'car'},
    {id:'cat'},
    {id:'bird'},
    {id:'human'},
]

console.log(target.sort((a,b) => {
    const abool = priority.includes(a.id)
    const bbool = priority.includes(b.id)
    if((abool && bbool) || (!abool && !bbool)) {
        return 0
    }
    if (abool) {
        return -1
    }
    return 1
}))
```

`(!abool && !bbool)`のパターンを忘れていて非一致値の順番がめちゃくちゃになったりしたので注意。
filter版の対称性のほうがわかりやすい気もするので意図の汲み取りやすさも含めてお好みで。

(`filter`にある`thisArg`がないしsortなのにまったく外部の値を使うのもちょっと不気味なのかもしれない)

# 当初想定していたやりかた

「条件に合う値だけの配列を削除して返り値にする破壊的関数」を求めたが、調べても`slice`や`find`など複数まとめて取得できなかったり`filter`は非破壊的だったりと一発では行かず。

集めた配列 + あまった配列 で完成させたかったのだが。

`map`などで破壊しながら新しい配列を作って`concat`するぐらいなら`filter`を反転してそれぞれ作るほうが綺麗かなと結論コードに。

たいしたコストではないが「あまりものの再利用」ができなかったのが少し不満。

# 他の配列操作系

* [【メモ】配列のキーを変更したいけど… - Qiita](https://qiita.com/khsk/items/b07b7fc3d260a2621a47)
* [多次元連想配列に対してキーを基準にunsetする関数が欲しい - Qiita](https://qiita.com/khsk/items/132695a200b87b1e930d)
* [PythonのzipをPHPで - Qiita](https://qiita.com/khsk/items/bfacacd283c2c74c8499)
* [連想配列(辞書オブジェクト)n個の共通配列を上書きなしで結合マージする - Qiita](https://qiita.com/khsk/items/092fe59baee050e420b4)
たのしいRuby5版22章で躓いたこと【エンコード関係】

Rubyの知識を復習するため、『たのしいRuby第5版』という書籍を読んでいます。
今回は、その22章の「テキスト処理を行う」というところで詰まった箇所とその解決方法を書いていこうと思います。

# 環境
OS:windows10

# 詰まったところ
まず、青空文庫から江戸川乱歩『二銭銅貨』をダウンロードします。

```nisendouka.rb
#ダウンロードするライブラリ
require "open-uri"

# 青空文庫のURL
url = "https://www.aozora.gr.jp/cards/001779/files/56647_58167.html"
# 書きこむファイル名
filename = "nisendouka.html"

# バイナリモードでファイルを開きます
File.open(filename, "wb") do |f|
	text = open(url).read #ここがよくない
# nisendouka.htmlに書き込む
	f.write text
end

```
このコードを実行すると、nisendouka.htmlという名前のHTMLファイルが作成され（すでに存在する場合は上書きされます）指定したURLのhtmlファイルが書き込まれます。

問題は次のコード

```cut_nisen.rb
htmlfile = "nisendouka.html"
textfile = "nisendouka.txt"

html = File.read(htmlfile, encoding: "UTF-8")

open(textfile, "w:UTF-8") do |f|
	in_header = true
	html.each_line do |line|
		if in_header && /<div class="main_text">/ !~ line
			next
		else
			in_header = false
		end
		break if /<div class="bibliographical_information">/ =~ line
		f.write line
	end
end

```
処理の内容としては、 <div class="main_text"　と  <div class="bibliographical_information"　で囲まれた部分（本文）を取り出すという処理ですが、これを実行するとエラーが出ました。

```
# エラー内容
cut_nisen.rb:9:in `=~': invalid byte sequence in UTF-8 (ArgumentError)
```

初めてみるエラーだったので調べてみました。

# エラー原因
調べてみると、どうもUTF-8以外の文字コードで読み込んでいる（？）ことが原因で起こるエラーのようでした。（[参考](https://www.task-notes.com/entry/ruby/20170528/1495960611)）

確かに元の青空文庫の文字コードはSHIFT-JISとなっていたので、それをUTF-8で読み込もうとしたことがよくなかったようです。

そこで青空文庫から読み込む際の文字コードをSHIFT-JIS、HTMLファイルに書き込む際の文字コードをUTF-8と明示することでエラーが解消されました。

```nisendouka.rb
# 変更後のコード

#ダウンロードするライブラリ
require "open-uri"

url = "https://www.aozora.gr.jp/cards/001779/files/56647_58167.html"
filename = "nisendouka.html"

File.open(filename, "wb") do |f|
	text = open(url, "r:shift_jis").read #文字コードをshift-jisに指定
	f.write text.encode("utf-8") # 文字コードをutf-8に変更
end
```

# まとめ
スクレイピングなどをするときは文字コードに気を付けることが重要だと思いました。

# 補足
Stringクラスのencodingメソッドを使うとその文字列の文字コードを確認することができます

```sample.rb
str = "こんにちは" 
p str.encoding #=> #<Encoding:UTF-8>
```
~~また、Rubyのデフォルトの文字コードはUTF-8ですが、Encoding.default_internalを使うことでencodeメソッドによる文字コードを指定することができます。~~

手元の環境で実行したのですが、UTF-8のままになってしまいました…。
原因の分かる方、教えていただけると幸いです。

```sample2.rb
Encoding.default_internal = "Shift_JIS"
s = "太郎"
puts s.encode
```


くわしくはこちらの[Rubyリファレンス](https://ref.xaio.jp/ruby/classes/string/encode)をご覧ください。
あと[こちらのブログ](https://tmtms.hatenablog.com/entry/20120812/ruby_encoding)もかなり参考になりそうです（2012年のものなので情報の正確性に注意！）
RustでGUIのWindowを表示する

はじめに
=======
以前からRustを使ってみたくて何か練習用のテーマを考えていたのですが、
最近[小学生２年生がScratchを使ってシミュレーターを作っていた](https://www.watch.impress.co.jp/kodomo_it/news/1217495.html)のをみて素晴らしいなと思いつつ、私もRustでシミュレーターみたいなのを作ってみるのはいい練習になりそうです。せっかくなのでGUIを入出力とした何かを作ると、応用範囲が広そうなのでその辺を目指していきたいと思います。

RustのGUIライブラリに何を使うと良いのかよくわからなかったのですが、[Conrod](https://github.com/PistonDevelopers/conrod)というのが目についたのでこれを使ってみます。Graphicsの描画や、マウスやキーボードイベントも取り扱えるようなので([動画](https://www.youtube.com/watch?v=n2UrjogA0j0))、とりあえず機能としては十分そうです。


Version
--------

- OS: MacOS 10.15.1
- rustc, cargo: 1.39.0

Rustの環境準備は [Rustのドキュメント](https://doc.rust-jp.rs/book/second-edition/ch01-01-installation.html) がとてもわかりやすいです。

ちなみに開発環境は PyCharm にRust Pluginを入れています(なんでや...)。型推論、補完、Buildも普通にできるし、Cargo.tomlの `[dependencies]`に crate を追加すると自動でInstallしてくれるしで、今の所かなり便利に使えています。

↓こんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11124/ffd5d053-5f3b-86b7-f78f-909e9d2da65d.png)


RustでGUIのWindowを表示する
===========
基本的に [`conrod_glium/examples/hello_world.rs`](
https://github.com/PistonDevelopers/conrod/blob/master/backends/conrod_glium/examples/hello_world.rs) を参考に作っています。
ただ、このサンプルコードは色々な処理が入っていて、単にWindowを表示する以上のことをしているので、Windowを表示するだけの最低限のコードを模索してみました。

1. Projectの作成
---------------
まずは 実行プログラムを作るProjectの雛形を作ります。名前は `rust_gui`です。

```bash
cargo new rust_gui --bin
cd rust_gui
```

2. コードを書く
----------------
試行錯誤の結果、こんな感じになっています。

### `Cargo.toml` に追記
```Cargo.toml
[dependencies]
conrod_glium = "0.68.0"
glium = "0.25.0"
```

### `src/main.rs`
```rust:src/main.rs
extern crate conrod_glium;
extern crate glium;

fn main() {
    println!("Hello, world!");
    let mut event_loop = glium::glutin::EventsLoop::new();
    let window = glium::glutin::WindowBuilder::new()
        .with_title("Hello Conrod!")
        .with_dimensions((400, 200).into());
    let context = glium::glutin::ContextBuilder::new()
        .with_vsync(true)
        .with_multisampling(4);
    let display = glium::Display::new(window, context, &event_loop).unwrap();

    let mut events = Vec::new();
    'render: loop {
        events.clear();
        event_loop.poll_events(|event| { events.push(event);});

        if events.is_empty() {
            event_loop.run_forever(|event| {
                events.push(event);
                glium::glutin::ControlFlow::Break
            })
        }
    }
}
```

3. 実行する
---------

```bash
cargo run
```

すると、何にもないWindowが表示されれば成功です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11124/a0dfbb8f-6393-848f-502f-493f6bca671f.png)

ちなみに、Closeボタンをクリックしてもイベントをハンドリングしていないので終了しません。
`CTRL+C` などで終了してください。

さいごに
======
特にビルドエラーにもならず、思ったより素直に表示されました。

[次回: RustでWindowに円を描く](https://qiita.com/mokemokechicken/items/47de50b8f30f206b2748)
ElasticBeanstalkにアップロードするファイルを.gitignoreとは別に.ebignoreで指定する

ElasticBeanstalkでは

```
eb deploy [環境名]
```

とすると実行したディレクトリの.gitignoreを元にプロダクトコードがzipされS3にアップロードされてebの環境に上がります。

CircleCIなどのCIツールを使っていると.gitignoreで除外したい部分とアップロードしたい部分がずれてきて別々になってきます。

そういったときは`.ebignore`というファイルを使って指定することができます。

記法は.gitignoreと同じです。
npm pack でnpmパッケージを圧縮する

node_module内のファイル(主にandroidのbuild.gradleなど)を編集した際に`npm pack`のコマンドを使用して変更を加えたパッケージを.tgzファイルにして、package.jsonの読み込み先を.tgzファイルに必要がある。

### 手順

例：`react-native-maps`の`build.gradle`を編集した時

- 編集したパッケージのフォルダに移動(`node_modules/react-native-maps/`)し、.tgzファイルを生成

```
npm pack
```
- custom_modulesフォルダを作っておき、生成された.tgzファイルをcustom_modulesフォルダに移動する
- 読込先を.tgzファイルに変更する

```
npm i react-native-maps-0.24.2.tgz
```

- package.jsonの読み込み先が変更されているか確認する

```package.json
"react-native-maps": "file:custom_modules/react-native-maps-0.24.2+.tgz"
```

### 参考にした記事
https://qiita.com/sasaplus1/items/f206dccd50709a50bbd0
R.generated.swift No such module 'プロジェット名' エラーの対処について

##### R.generated.swift:10:8: No such module 'プロジェット名'エラーの対処について

R.Swiftを導入して、リソース管理していましたが、Configrationをいじった後、上記エラーが出てしまう。

確かに、Configurationsにて既存のDebugとRelease以外にStagingと言うConfigurationsを追加してので、色々設定したので、その周りに問題があったか、調べたが、気になる所は見つからず...

Releaseモードでは上記エラーが無く無事にコンパイルされるが、DebugモードとStagingモードに切り替えてコンパイルすると、必ず、R.generated.swift:10:8: No such module 'プロジェット名'　と言うコンパイルエラーが出てしまう。

一応、問題が発生するR.generated.swiftが生成する時、Releaseモードでは、import 'プロジェット名'が追加されないが、DebugモードとStagingモードでは自動に追加されるのだ。

ちらっとググって見ると、以下のように事例があるようですが、今度の問題と違うよう。。。
https://github.com/mac-cain13/R.swift/issues/326

暫くウロウロしてから、ついに、生成されるR.generated.swiftに目を通すようにした。

まず、'プロジェット名'をキーワードをして、R.generated.swift内部を検索して見たら、
複数のクラスの前に追加されたことがわかった。

```swift:R.generated.swift
import Foundation
import Rswift
import UIKit
import 'プロジェット名'

// ... ...

/// Segue identifier `toProduct`.
static let homeToProduct: Rswift.StoryboardSegueIdentifier<UIKit.UIStoryboardSegue, HomeViewController, 'プロジェット名'.ProductViewController> = Rswift.StoryboardSegueIdentifier(identifier: "toProduct")

// ... ...

```

なぜ、他のViewControllerクラスにはこのようクラス名前に、こんな'プロジェット名'がついてないか、直接、ProductViewControllerのストリボードを確認。すると

![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126705/e5b629ac-af84-d151-27c5-673647ed99f3.png)

問題が起こすクラスにチェックがついてないまま、つまり、ビルド時洗濯されたConfigrationより生成されるモジュール名が異なる様に設定すると、ここにも影響がでることだった。

さっさと、Inherit Module From Targetにチェックを入れ、ビルドを掛け直してみる。

Release,Staging,Debug 全部生成されるR.generated.swiftに
import 'プロジェット名'追加されなくなり、クラス前にも'プロジェット名'.が消えて、無事ビルドに通った。

やった！

>iOS、Androidアプリの制作なら、hq7781@gmail.comまで、
>法人並みに、信頼且つ満足できる製品を納品いたします
Xamarin.Macにおける、画面遷移に伴う値の受け渡し

## パターン1: ダイアログ(モーダル)に値を受け渡す
`MainViewController` : アプリのメイン画面を扱うViewControllerとする
`ModalViewController` : メイン画面から開くモーダルを扱うViewControllerとする

メイン画面の情報をダイアログに受け渡す、例えばメイン画面で保持されているユーザー情報をダイアログに引き渡すみたいな場合。

```c#:MainViewController.cs
private UserInfo userInfo; // ユーザー情報を表すフィールド

// 画面遷移の前に実行されるメソッド
public override void PrepareForSegue(NSStoryboardSegue segue, NSObject sender)
{
    // DestinationControllerプロパティで遷移先を参照できる
    var modalViewController = segue.DestinationController as ModalViewController;
    modalViewController.userInfo = userInfo; // 受け渡し方は自由(メソッドなどを使っても良い)
}
```
セグエを表すオブジェクトのプロパティに、遷移先のViewControllerを表すものがあるのでそれを利用する。この時キャストを忘れないように注意。
値の受け渡しは遷移先のViewControllerに対応するフィールドを用意しておいて引き渡すでも良いし、メソッドを用意しておくのでも良い。ただし`private`メソッドだと呼び出せないので`internal`にしておくこと。

## パターン2: ダイアログ(モーダル)から呼び出し元に値を渡す
パターン1の逆。例えば設定ダイアログなどを開き、その設定をメイン画面に反映させる場合など。

```c#:ModalViewController.cs
private UserSettings settings; // 設定情報を表すフィールド

// ダイアログを閉じるボタン(OKボタンなど)のクリックイベント
partial void OKButtonClicked(NSObject sender)
{
    // PresentingViewControllerプロパティで呼び出し元を参照できる
    var mainViewController = PresentingViewController as MainViewController;
    mainViewController.settings = settings; // ここも受け渡し方は自由

    // ダイアログを閉じる
    DismissController(this);
}
```
見た目はパターン1とほぼ同じだが、セグエを使っていない点が大きく違う。
セグエは現在の画面からダイアログやモーダルシートなどの所謂子ウィンドウを開くためのものなので、それによって開かれた画面から親ウィンドウへ情報を渡すような動作の場合、セグエではなく「OK」ボタンなどのクリックイベントに処理を記述するのが自然(だと思う)。

`DismissController`は単純にダイアログを閉じるためのメソッド
ダイアログを閉じるだけのボタンを作る場合はXcodeのFirst Responderで設定できるが、上記のように受け渡しのロジックなどを追加する場合はクリックイベントを定義する必要がある。

### 補足: 画面遷移に合わせてUIを操作する場合の注意点
パターン1,2に共通して言えることだが、例えば設定した内容によって画面の文言が変わる、といったように遷移先のUIを操作したい時がある。

が、UIコンポーネントのオブジェクトは基本的に`private`プロパティに設定されているので別のViewControllerからは参照できない。これは自身で`private`に設定したフィールドやメソッドも勿論同様である。

```c#:MainViewController.cs
public override void PrepareForSegue(NSStoryboardSegue segue, NSObject sender)
{
    var modalViewController = segue.DestinationController as ModalViewController;
    modalViewController.SomeLabelTextField.StringValue = "hogehoge"
    // => UIコンポーネントのオブジェクト(SomeLabelTextField)の参照でエラーが発生する
}
```

このアクセスレベルは変更できない(はず)ので、遷移先で`internal`以上のメソッドを作成しUI操作をラップする。

```c#:ModalViewController.cs
internal void ChangeText(string newText)
{
    SomeLabelTextField.StringValue = newText;
}
```
```c#:MainViewController.cs
public override void PrepareForSegue(NSStoryboardSegue segue, NSObject sender)
{
    var modalViewController = segue.DestinationController as ModalViewController;
    modalViewController.ChangeText("hogehoge"); // ChangeTextメソッド自体はprivateじゃないので呼び出せる
}
```

簡単にですが、値の受け渡しについてでした。ポイントはとにかく**遷移先となる画面のViewControllerオブジェクトを取得すること**です。それさえ出来ればどうにでもなる。

本当はパターン3として通知オブジェクトを使うものを考えていたけど、画面遷移関係ないなってのと通知についての説明含めて別でまとめた方が良いなと思ったので……またその内投稿します。

何かご指摘などありましたらコメントお願いします！
Xamarin.Mac(というかMacOSのネイティブアプリ開発事例)についての情報が国内だと中々少なく、自分も未だ手探り中なので情報提供して頂けると助かります……🙏
RandomForest　使ってみた

#今回の目的
　SIGNATEのPractice,ワインの品種の予測を行う.

##本題
###用いた学習アルゴリズム
- SVC
- LogisticRegression(ロジスティック回帰)
- `RandomForest` (ランダムフォレスト)

3つのアルゴリズムを試した結果, ランダムフォレストが一番精度が高くなったため, 最終的な分類器として採用した.

###コード

####データの読み込み

```Python:wine-learning.py
wine_data = pd.read_csv('train.tsv',sep='\t')
wine_test = pd.read_csv('test.tsv',sep='\t')
```

前回は`read_table` を用いたが, せっかくなので`read_csv` も使ってみた. tableのほうが楽な気がします.
ちなみに, どちらも呼び出すメソッドは同じっぽいのでどちらが正しいとかはない.

####特徴量データと教師データの分離

```Python:wine-learning.py
X = wine_data.loc[:,['Alcohol','Malic acid','Ash','Alcalinity of ash','Magnesium','Total phenols','Flavanoids','Nonflavanoid ohenols','Proanthocyanins','Color intensity','Hue','OD280/OD315 of diluted wines','Proline']].values
y = wine_data.loc[:,'Y'].values
```

変数が多いと長くなりがちだからこれをどうにかしたい. 次の課題をやるときに改善できる方法があるか検討してみる.
ちなみにここでテストデータもやっとく

```Python:wine-learning.py
Xt = wine_test.loc[:,['Alcohol','Malic acid','Ash','Alcalinity of ash','Magnesium','Total phenols','Flavanoids','Nonflavanoid ohenols','Proanthocyanins','Color intensity','Hue','OD280/OD315 of diluted wines','Proline']].values
```

####学習データとテストデータに分割

```Python:wine-learning.py
X_train, X_test, y_train, y_test = train_test_split(X,y,test_size=0.2)
```

今回もデータを8:2の割合で分割して行った.

####欠損値の削除

```Python:wine-learning.py
X_train = X_train[:, ~np.isnan(X_train).any(axis=0)]
X_test = X_test[:, ~np.isnan(X_test).any(axis=0)]
Xt = Xt[:, ~np.isnan(Xt).any(axis=0)]
```

分割前まではなかった欠損値が突然現れた. 原因がわからなかったので,そのうち検証してみようと思う.
今回は欠損値を削除する方針にした.

####モデルの学習
#####SVC

```Python:wine-learning.py
clf = svm.SVC()
clf.fit(X_train, y_train)
```

#####ロジスティック回帰

```Python:wine-learning.py
clf = LogisticRegression()
clf.fit(X_train, y_train)
```

#####ランダムフォレスト

```Python:wine-learning.py
clf = RandomForestClassifier(n_estimators=500, random_state=0)
clf.fit(X_train, y_train)
```
random_stateは0,n_estimators(決定木の個数)は多めに500を設定した.

####モデルの評価

```Python:wine-learning.py
y_pred = clf.predict(X_test)
accuracy = accuracy_score(y_test, y_pred)
print('正解率 = ' , accuracy)
```

例のごとく, `accuracy`関数を用いて正解率を出した。

#####SVCの正解率
```
正解率 =  0.6111111111111112
```

#####ロジスティック回帰の正解率
```
正解率 =  0.8888888888888888
```
#####ランダムフォレストの正解率
```
正解率 =  1.0
```

####分類

```Python:wine-learning.py
X_pred = np.array(Xt)
y_pred = clf.predict(X_pred)
print(y_pred)
```

###結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429761/9e87d3dc-7e51-8e59-7e88-a6e41f779137.png)

やりました（ﾊﾟﾁﾊﾟﾁ）

##検討事項
- 変数の量によって学習アルゴリズムを変える.
- 変数の数を落とす（次元削除）作業を行ってから学習アルゴリズムを適用する.
- そもそものアルゴリズムの特性を理解する.
- データ分割の時点で発生した欠損値の原因追及
- 混合行列の採用
Pythonで問題解いてみた　Vol.1

#はじめに
今回からAtCoderににある問題を解いて、定期的にその問題の内容や
解説を投稿していこうと思います:relaxed:

何回続くかも分からないし需要があるかも分からないですが、誰かが
問題に詰まった時にお役に立てたら幸いです:kissing_smiling_eyes:

では、今回からゆるーく続けていきたいと思うのでよろしくお願いします:grin:

#早速いきます！
今回は3問解いてみました！
それでは早速問題の説明・解説していきます:stuck_out_tongue_winking_eye:
##「9x9」
#####問題文
高橋君は九九を覚えたので、1以上9以下の2つの整数の積を計算することが
できます。それ以外の計算はできません。2 つの整数A,Bが与えられます。
高橋君がA×Bを計算できるならその結果を、できないなら代わりに-1を
出力してください。

#####制約
1 ≤ A ≤ 20
1 ≤ B ≤ 20
入力中のすべての値は整数である。

#####入力
入力は以下の形式で標準入力から与えられる。
A,B

#####出力
高橋君が A × Bを計算できるならその結果を、できないなら-1を出力せよ。

という問題でした。私の答えは ↓ の通りです。

```python:9x9.py
A , B = map(int, input().split())

if 1 <= A and A <= 9 and 1 <= B and B <= 9:
  print(A * B)
else:
  print(-1)
```

カンタンに説明しますね:wink:

まずは"変数　, 変数 = map(型,input().split())"の形で二つの変数に
標準入力から入力させます。".split()"を使うと、スペースで区切って
入力された文字列を分割して入力できます。ちなみに".sprit("と")"
という風に入力すると"と"という文字で区切ってくれます:grin:

次に"if"と"and"を使って複数の条件を作り、それに当てはまった場合に
"print"でAとBの掛け算の結果を出力させます。
条件に合わなかった場合は"-1"を出力します。

以上です！簡単ですね:stuck_out_tongue_winking_eye:
次行きましょう:laughing:

##「Curtain」
####問題文
高橋君の家の窓の横方向の長さは A であり、横方向の長さが B の
カーテンが 2 枚取り付けられています。(カーテンは縦方向には
窓を覆うのに十分な長さがあります。)

窓のうちカーテンで隠されていない部分の横方向の長さが最小に
なるようにカーテンを閉めます。 このとき、窓のカーテンで隠されて
いない部分の合計の横方向の長さを求めてください。

####制約
1 ≤ A ≤ 100
1 ≤ B ≤ 100
A , B は整数である。

####入力
入力は以下の形式で標準入力から与えられる。
A , B

####出力
窓のうちカーテンで隠されていない部分の合計の横方向の長さを出力せよ。
窓がカーテンで完全に隠される場合は 0 と出力してください。
各カーテンが窓の横幅より長い場合があります。

という問題でした。私の答えは ↓ です。


```python:Curtain.py
A , B = map( int, input().split())

if(A - (B * 2) <= 0):
  print(0)
else:
  print(A - (B * 2))
```
これはまず、"変数　, 変数 = map(型,input().split())"の形で二つの変数に
標準入力から入力させます。"split()"なので空白区切り文字として入力です:point_up:
次に"if(条件)"の文でカーテンで窓が隠れるか隠れないかの判断をし、
隠れた場合は"0"、隠れなかった場合は隠れていない横の長さ"A - (B * 2)"
を"print()"文で表示します。

以上です。これまた簡単ですね:grin:
次で今回のラストです！
##「Tenki」
####問題文
ある 3 日間の天気予報が、長さ 3 の文字列 S として与えられます。

S の i(1 ≤ i ≤ 3) 文字目が S のとき、i 日目の天気予報が晴れだったことを、
C のときは曇りだったことを、R のときは雨だったことを意味します。
また 3 日間の実際の天気が、長さ 3 の文字列 T として与えられます。
T の i(1 ≤ i ≤ 3) 文字目が S のとき、i 日目の実際の天気が晴れだったことを、
C のときは曇りだったことを、R のときは雨だったことを意味します。
3 日間で天気予報が的中した日が何日あるかを出力してください。

####制約
S および T は長さ 3 の文字列である。
S および T は S, C, R のみからなる。

####入力
入力は以下の形式で標準入力から与えられる。
S , T

####出力
3 日間で天気予報が的中した日が何日あるかを出力せよ。

という問題でした。私の答えは ↓ です。

```python:Tenki.py
S = list(input())
T = list(input())

i = 0
x = 0

while(i < 3):
    if(S[i] == T[i]):
        x = x + 1
    i = i + 1

print(x)

```
この問題では、まずは"list(input())"で S と T に文字列をリストへ標準入力から入力
させました。
次に文字を3回比較するために変数"i"を、比較して一致した数を数えるための変数"x"を
用意しました。
あとは"while(条件)"の文で条件を"i < 1"にして処理が終わるたびに"i = i + 1"を
することで処理を3回繰り返させ、 S[] と T[] の配列の中身を順に比較して一致した場合
"x = x + 1"の処理をします。
whileから抜けたら x を"print()"で表示させることで一致した回数を表示させることが
できました:relaxed:

#終わり
今回は3つの簡単な問題を解いてみました。
正直ちょっとプログラミングが分かる人なら簡単すぎる問題だったと思います:joy:
こんな感じでゆるーく書いていこうと思うので分かりにくいところや無駄な書き方が
あったらコメントで教えていただけると私の勉強にもなってうれしいです:blush:
今回はここまで！:blush::joy::kissing:
checkboxをカスタマイズしたい

# html

```html
<div class="checkBox">
    <input type="checkbox" id="hoge">
    <label for="hoge">
        ラベル
    </label>
</div>
```

# SCSS

```scss
.checkbox {

    & input[type='checkbox'] {
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        position: relative;
        cursor: pointer;
        
        appearance: none;
        outline: none;

        width: 20px;
        height: 20px;
        margin: 0;
        
    }
    
    // チェックボックスのデザイン
    & input[type='checkbox']::before {
        display: inline-block;
        content: '';
        width: 20px;
        height: 20px;
        background: #fff;
        border: solid 1px $gray-400;
        border-radius: 3px;
        margin: 0;
    }
    
    // チェックマークのデザイン
    & input[type='checkbox']::after {
        display: inline-block;
        content: '';
        position: absolute;
        left: 7px;
        top: 0px;
        
        width: 8px;
        height: 16px;
        border-right: 3px solid $main;
        border-bottom: 3px solid $main;
        transform: rotate(45deg);
        
        // チェックしてないときは隠す
        opacity: 0;
    }
    
    // チェックするとチェックマークの透明化を解除
    & input[type='checkbox']:checked::after {
        opacity: 1;
    }
    
    & label {
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;

        line-height: 20px;
        height: 20px;
        margin: 0;
        // margin-left: 4px;
    }
}
```
コマンドでブラウザ版Skypeを起動

# ブラウザ版Skypeについて
業務用PCはセキュリティポリシー上、アプリケーションを自由にインストールできない環境、あるいはMicosoft Storeの起動やStoreアプリの起動に制限がかかっている場合が多いです。
そんな環境下でもクライアント先の担当者さんからの指定でSkypeの利用許可をする場合、制限に引っかかってしまいますが、実はSkypeはWebブラウザ版が公開されています。
とはいえ、Microsoftの傘下に入っていることが関係しているせいか、対応ブラウザはMicrosoft EdgeとGoogle Chromeのみと指定があったりします。
そんなときはデスクトップにショートカットを設置し、ダブルクリック一発でEdgeを起動＆Skypeに接続したいですね。
[The New Skype for Web is here](https://blogs.skype.com/news/2019/03/07/the-new-skype-for-web-is-here/)
# Microsoft Edgeブラウザの起動
動作検証環境：Windows10 Pro 64bit Ver.1903

## UWPアプリをコマンドで起動
まずは手始めにUWP（ユニバーサルWindowsプラットフォーム）アプリを起動させてみましょう。
このコマンドで起動できます。
>Start shell:AppsFolder\[PackageFamilyName]![ApplicationID]


### PackageFamilyNameとApplicationIDについて
Get-AppxPackageコマンドとGet-AppxPackageManifestコマンドをPowerShellでアプリ名とともに実行することにより調べることができます。
試しにEdgeを含むアプリを調べる場合、下記のコマンドを実行します。

```powershell:Find_PackageFamilyName_Edge.ps
PS C:\WINDOWS\system32> (Get-AppxPackage -Name *Edge*).PackageFamilyName
Microsoft.MicrosoftEdge_8wekyb3d8bbwe
Microsoft.MicrosoftEdgeDevToolsClient_8wekyb3d8bbwe
```
候補として「MicrosoftEdge」と「MicrosoftEdgeDevToolsClient」の2つ出てきました。

```powershell:Find_ApplicationID_Edge.ps
PS C:\WINDOWS\system32> (Get-AppxPackage -Name *Edge* | Get-AppxPackageManifest).Package.Applications.Application.Id
MicrosoftEdge
PdfReader
App
```
同じく候補として「MicrosoftEdge」、「PdfReader」、「App」の3つ出てきました。
PackageFamilyNameとApplicationIDを利用してEdgeを起動する場合、以下のコマンドを実行します。

```powershell:Start_edge.ps
PS C:\WINDOWS\system32> Start shell:AppsFolder\Microsoft.MicrosoftEdge_8wekyb3d8bbwe!MicrosoftEdge
```
## Microsoft Edgeをコマンドプロンプトから起動
PowerShell経由で起動させる必要があります。

```powershell:Start_edge.bat
powershell.exe start shell:AppsFolder\Microsoft.MicrosoftEdge_8wekyb3d8bbwe!MicrosoftEdge
```
## Microsoft EdgeをURL指定でコマンドで起動
```powershell:Start_edge_withURL.bat
powershell.exe start shell:AppsFolder\Microsoft.MicrosoftEdge_8wekyb3d8bbwe!MicrosoftEdge 'https://web.skype.com/'
```
## Microsoft EdgeをInPrivateモードでコマンドで起動
```powershell:Start_edgeInPrivate.bat
powershell.exe start shell:AppsFolder\Microsoft.MicrosoftEdge_8wekyb3d8bbwe!MicrosoftEdge '-private'
```
## Microsoft EdgeをURL指定かつInPrivateモードでコマンドで起動
IDパスを入力するようなWebサービスの場合、セキュリティ上ブラウザに情報を残さないような運用もあると思います。
そんなInPrivateモードを併用する際は下記コマンドを実行します。

```powershell:Start_edgeInPrivate_withURL.bat
powershell.exe start shell:AppsFolder\Microsoft.MicrosoftEdge_8wekyb3d8bbwe!MicrosoftEdge '-private https://web.skype.com/'
```

# ショートカットの作成
デスクトップ上で右クリック「新規作成」→「ショートカット」と進みます。
![ショートカットの作成](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520646/660fbe9e-6654-c457-b1d4-81e8ae4381cc.png)
「項目の場所を入力してください」のところにさきほどのコマンドを入力しておきます。
![項目の場所を入力](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520646/a71eefdb-fe43-253d-7659-2afe94a91a8a.png)
ショートカット名を入力すると完成します。

# 記事後記
テレカンシステム（テレカンファレンスシステム・テレビ会議システム）って今はたくさん存在してますよね。
昔からある今回のSkype、Google Hangout Meet（Googleハングアウトの後継サービス）、Zoomなど。
アプリケーションのインストール不要で使えるブラウザ版があるのは便利ですね。
セキュリティ上これらのサービスを禁止する場合、残る手段はファイアウォールによるアクセス遮断制御だけとなりますが。
ELB切り替え時の動作確認 (hostsファイルを編集する)

# これはなんですか

- DNSのレコード登録が済んでないALBに対してリスナールールの動作確認をした時のメモです
- hostファイルを編集して名前解決する方法です。

# 先にまとめ

- hostsファイルはローカルで名前解決するためのもの
    - macOSのhostsファイルは `/private/etc/hosts` にある
    - Windowsの場合は `C:\Windows\System32\drivers\etc\hosts` にある
- DNSレコード登録前にLBの動作確認がしたければ、hostsファイルにLBのIPと対象のHostを書いて名前解決の動作をエミュレートすればよい
    - HTTP接続するだけなら `curl -H 'Host:example.com' 'http://xxx................'` とした方が楽だが、HTTPS接続がしたければhostsを使う必要がある

# hosts ファイルとは

ローカルで名前を解決してくれるやつです。以下ざっくり説明です。
https://wa3.i-3-i.info/word16969.html

## mac環境のhostsファイルの置き場所は

`/private/etc/hosts` にあります。

## Windows環境のhostsファイルの置き場所は

`C:\Windows\System32\drivers\etc\hosts` にあります。
http://onocom.net/blog/windows-hosts-file/#hostsWindows

# やってみた

## ALB の準備

- (主にACMで) 証明書発行
- ALB作成
    - ALBデフォルトのDNS名(Aレコード)を控えておく
- ターゲットグループ作成＆配下のターゲットへの紐づけ
- リスナールール 設定
    - 証明書をリスナーに紐づけておく

## デフォルトのDNS Nameにクエリする

ALBのIPを確認する

```shell
$ dig example-xxxxxxxxxxx.ap-northeast-1.elb.amazonaws.com +short
54.250.192.xx
52.196.88.yyy
```

## hosts ファイルを編集する

```shell
$ cat /private/etc/hosts
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1       localhost
255.255.255.255 broadcasthost
::1             localhost

### (略)

### ALBのIPを登録
52.196.88.yyy example.com
```

## curl する

IPがALBに向いていることを確認する

```shell
$ curl -I https://example.com/healthcheck.html -v
*   Trying 52.196.88.yyy...
* TCP_NODELAY set
* Connected to emd-dev.watashi-move.com (52.196.88.yyy) port 443 (#0)
...
< HTTP/1.1 200 OK
HTTP/1.1 200 OK
< Date: Mon, 07 Oct 2019 06:23:58 GMT
Date: Mon, 07 Oct 2019 06:23:58 GMT
...
```

## ALBログを確認する

ログが残っていればok。


# 余談: digはシステムのDNSリゾルバを使わない

hostsを編集した後digしてもhostsに書いた内容が反映されなかったので調べたらこんな記事が。
https://qiita.com/kakipo/items/71f091ecd1fa27fde2ed
> dig, nslookup, そして host コマンドは /etc/hosts を参照しない。
VSCodeとターミナルに背景画像を加えたらプログラミングがちょっと楽しくなるよ

初投稿です。

突然ですが、こちらのエディター（VSCode）、ターミナルをご覧ください。
まずVSCode。
![スクリーンショット 2019-11-15 13.09.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/32c4aa1a-f0e3-b0fa-afcb-e28ff029c1fe.png)
これはターミナルさん。
![スクリーンショット 2019-11-15 13.13.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/8e364383-7378-e722-7c56-2b43443c1efd.png)
最近このようにカスタマイズしてから、エディター開く時間が倍になりました。
つまり

<b>*なんかエディター好んで開きたくなる→コーディングに向き合う時間UP→スキルアップ*</b>

という壮大な仕掛けなのです。

`画像をとにかく表示するだけの説明、それだけなのでシンプルにいきます`
##VSCodeにbackground-cover導入

まずは拡張機能を入れましょう。
`background-coverで検索`
![スクリーンショット 2019-11-15 13.24.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/4d2b659a-b11c-69e2-e935-4010c0f4e8b3.png)

そしたら、vscodeの右下にこんなマーク出てますよね？これをクリックします。
![スクリーンショット 2019-11-15 13.30.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/0049f6b7-4e00-b50c-1865-bea2fc8c493d.png)
そのあと、
`Select picture`
を選択します。
![スクリーンショット 2019-11-15 13.43.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/daccfb3f-87af-785e-ec71-4a6f66142494.png)
そのあとは、
`Manual selection`

![スクリーンショット 2019-11-15 13.47.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/9f444114-f16c-b57e-5419-a2d18eef0079.png)
すると、画像選択になるので、よしななものをお選びください。
![スクリーンショット 2019-11-15 13.47.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/901f85f2-8d73-fdf9-abf6-5d61c1e2d83a.png)
<b>*ちなみに自動でいい感じに暗く半透明にしてくれるので、画像加工いりません*</b>
明るめの画像でおけ。

さあこれでいけたはず。
vscodeを再起動して確認してください。
###setting.jsonを見てみると...
コードが追記されていますね。
![スクリーンショット 2019-11-15 13.48.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/ce280a65-12bf-e150-aa1f-bdaa73b763c3.png)

さあ次はターミナルですよ。

##ターミナルに背景画像導入する
まず僕のターミナルはテーマにiceberg入れてますが、vscodeと違いターミナルはデフォルトでも背景画像を設定できます。

【iceberg参考記事は以下】
[気分転換にTerminal.appの配色を変えてみる？暗青系のテーマ「Iceberg」を移植しました](https://cocopon.me/blog/?p=4862)

`ターミナル→環境設定`
![スクリーンショット 2019-11-15 14.07.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/d4ab6eda-5e3a-51ff-9495-b3b0c6b50392.png)
そしたらこんな画面になるので、
![スクリーンショット 2019-11-15 14.09.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/20624ff5-fe51-4be5-7b0e-b4a491347b84.png)
イメージをパパパってやって、終わり！閉廷！
###明るすぎ問題
ちなみに、普通に画像を適用するとこうなります。
![スクリーンショット 2019-11-15 14.14.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/d18a6a2b-be83-cbcc-66cf-00e387918065.png)
「何も見えへんやんけ！」

落ち着いてほしい。
暗めの画像を各自用意してくれ。

そしたらさ、ほら。
![スクリーンショット 2019-11-15 14.16.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/b39a678e-005c-1b54-bf5c-bf7d40c80197.png)
<b>*どうだ、暗くなったろう？*</b>



##fun is God. fun is Everything.

プログラミング初心者こそ、まず形から入るのも悪くないと思ってます。

どれぐらいプログラミングと向き合えるか、その時間がプログラミング力に直結する中で、自然とエディターに向き合う活力をくれるこのカスタマイズは、ただの「背景画像変更機能」じゃない。

<b>これはあなたの「未来を変える」ものだ</b>

`＊ちなみに僕はごちうさ未視聴勢です`

## 2020/08/25追記
その後ターミナルをiTerm2にしましたが、初期の真っ黒い画面に耐えきれず、背景画像を設定しなおしました。
もはや逃れられぬ...
![スクリーンショット 2020-08-25 22.41.23.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/0bf56b54-777b-3ce9-9f20-3b8e3df8c547.jpeg)
aws cloud9 ruby on rails  migration 後にしたこと

まずは ```bundle install```

# mysql が動かない。
- ```sudo apt-get install libmysqlclient-dev ``` して mysql を入れる
- bundle installを再実行.. ok
- c9 の 設定のままだと、 root@local.host につながらない、とかなった。
- db に root接続して、user を作り (user をつくるところは、https://www.lucidar.me/en/aws-cloud9/install-mysql-and-phpmyadmin-on-aws-cloud9/ を参考にした)
- その情報をもとに database.yml を設定変更

```
username: <%=ENV['C9_USER']%>
#  password: <%=ENV['C9_USER']%> 
```
もともとこんな感じになってたので、設定変更。
これで、 rails db:create, db:migrate ... ok

# rails server を動かす IP とか若干違った
before
```rails server -b $IP -p $PORT```
after
```rails s -b 0.0.0.0```

# app が error 出す
ruby の version が 変わってた。gem とか 大幅アップデートとか嫌だったので、昔のsetupでいく方針 (live app だったので)
```lvm list```で状況確認して
```rvm install 2.3```した (live 環境 2.3.x だったので)
```rvm default 2.3.X```
この状態で も一度 ```rails s -b 0.0.0.0``` ...ok
【更新】centos6.9にgrowi最新をいれようとするも断念するの巻

centos6.9に普通にインストールするだけで行けるかな―と思ったが
何故かnpm startでコケた

#当初の環境

| ミドルウェア      |       バージョン   |
|:-----------------|------------------:|
| growi            |            v3.5.9 |
| node.js          |           v10.16.3|
| yarn             |            v1.9.1 |
| npm              |           v6.11.3 |

#インストールコマンド
```code
$ cd /opt
$ sudo git clone https://github.com/weseek/growi
$ cd growi
$ sudo git tag -l
$ sudo git checkout -b v3.5.9 refs/tags/v3.5.9
$ sudo yarn
```

#centos6.9はsystemctlがないので

- コマンドで直接起動

```code
NODE_ENV=production PASSWORD_SEED=PASSPHRASE FILE_UPLOAD=local MONGO_URI="mongodb://[mongodのユーザー]:[password]@localhost:[自分port]/growi" ELASTICSEARCH_URI="http://localhost:[自分port]/growi" npm start
```
# エラー

```code
Error: Cannot find module 'normalize-path'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._resolveFilename (/opt/growi/node_modules/module-alias/index.js:43:29)
```

しょうがないので

#暫定処置の環境

| ミドルウェア      |       バージョン   |
|:-----------------|------------------:|
| growi            |            v3.0.9 |
| node.js          |           v8.11.4 |
| yarn             |            v1.6.0 |
| npm              |            v5.6.0 |

#暫定の起動処理をforeverで
systemctlがないのでデーモン化はforeverに任せる

```code
NODE_ENV=production PASSWORD_SEED=PASSPHRASE FILE_UPLOAD=local MONGO_URI="[mongodのユーザー]://growiuser:[password]@localhost:[自分port]/growi" ELASTICSEARCH_URI="http://localhost:[自分port]growi" forever start -c "npm start" ./
```

-なぜか下記のコマンドでもジョブが終了しないので
``` code
forever stop [ID]
```

-3000で起動してるジョブを強制キル
``` code
$ lsof -i:3000
```

まーこれで動いたからええけど

[Wikiシステム「GROWI」に複数の脆弱性（JVN）](https://scan.netsecurity.ne.jp/article/2019/06/10/42445.html "Wikiシステム「GROWI」に複数の脆弱性（JVN）")
こんな記事がでているから下位バージョンはつかいたくないなー
AmazonのUSB3.0対応ケーブルに騙されるな！～RealSenseD435用L型USBケーブルを探せ～

RealsenseD435を使う際に、L型のUSBケーブルが必要になりました。
しかし、なかなか良いのが売ってません。

##条件
・USB３規格
・L型
アマゾンで2種類見つけたので購入し実験してみました。

左から純正、2本で599円、1本で990円です。
![IMG_0848.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/7533155f-a603-27c5-f6a1-9c164e34c67a.jpeg)
まずは、純正をRealsenseD435にさした状態から確認していきましょう。
![Realsense-usb-cable-USBケーブル.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/958012a0-6397-61e5-66b1-de2beffd261c.jpeg)

##・RoiCiel　（ディアルズシーリズ）USB Type C ケーブル L字型 急速充電 QuickCharge3.0対応 USB3.0規格 usb-c タイプc ケーブル Sony Xperia XZ/XZ2,Samsung Galaxy S9/S8/A3/A7/A9/C5/7pro/C9,iQOS(アイコス),Nexus 5X/6P,GoPro Hero 5/6 アンドロイド多機種対応 2.4A急速充電 5Gbps高速データ転送(1.2m 2本セット, ブルー/ピンク)
2本で599円

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/900383f2-fdee-72c1-f3a3-ba96519f6ee1.png)

これで動けばめっけもんです。
ケーブル色が気になる以外は、問題なしですよね。

ところが・・・
###USB2.1のケーブルとしか認識しない
解像度も低いですね・・・

![Realsense-usb-cable-USBケーブル.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/e424a7db-a3fd-ad08-946d-35d12da466d9.jpeg)

##・ TypeC USB 3.1 90度-USB3.0 L字型左向きケーブル、変換アダプタ OTG ケーブル 超高速データ転送 USB Type-C オス 延長 コネクタ USB 3.1 オス OTG ケーブル 
990円
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/e31b7851-5128-7a07-1878-7d035e710b14.png)

さっきのよりちょっと高い
というか、1本990円だから、約4倍です。
そして、即納ではありません。

1週間程度待つと、届きました。
段ボール梱包で

そして、実験してみました。
当初、先ほどのと同じようにUSB2のケーブルと認識されましたが、エラーで刺しなおしたらUSB3.2と認識されました。

![Realsense-usb-cable-USBケーブル高い奴2-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/483a0a53-86a5-d907-0046-992b334b37d3.jpeg)

2時間程度の実験しかしておらず中長期ではわかりませんが、とりあえずUSB3で使えるケーブルが入手できました。

良かったです。

なお、2019年11月15日現在の話であり、今後、商品が変更となる、勝手に差し替えられる事があるため、一例とお考え下さい。
このため、リンクは貼っておりません。
購入は、自己責任でお願いいたします。

2020年2月21日現在は￥1,100です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/71376be9-edb5-96d8-a5b6-9765991f2104.png)
CookieにSameSite属性がセットされていた時の標準エラーをとりあえず回避した話

GoogleDriveが数日前よりCookieにSameSite属性（None）をセットするようになった。
Rubyの標準ライブラリであるWebAgent::CookieManagerはSameSite属性に対応していない。
また、未知の属性がCookieにセットされていた場合は、標準エラーを吐く。
従って、Cronでスクリプトを起動していると、標準エラー発生を通知するメールが、毎時届くようになってしまった。

と、多分、このようなことが起きていたのだと思う。

メールがウザすぎるので、parseメソッドだけオーバーライドしてみた。
標準エラーでなく例外を吐いてくれたら、こんなことせずに済むのだけれど、多分、深い理由があるのでしょうね。

```ruby:core_ext.rb
class WebAgent
  class Cookie
    def parse(str, url)
      @url = url
      cookie_elem = str.split(/;/)
      cookie_elem = join_quotedstr(cookie_elem, ';')
      cookie_elem -= [""] 
      first_elem = cookie_elem.shift
      if first_elem !~ /([^=]*)(\=(.*))?/
        return
      end
      @name = $1.strip
      @value = normalize_cookie_value($3)
      cookie_elem.each{|pair|
        key, value = pair.split(/=/, 2) 
        key.strip!
        value = normalize_cookie_value(value)
        case key.downcase
        when 'domain'
          @domain = value
        when 'expires'
          @expires = nil
          begin
            @expires = Time.parse(value).gmtime if value
          rescue ArgumentError
          end
        when 'path'
          @path = value
        when 'secure'
          @secure = true
        when 'httponly'
          @http_only = true
        when 'samesite' # samesite属性
          @samesite = true 
        else
          warn("Unknown key: #{key} = #{value}")
        end
      }
    end
  end
end
```