OmniAICreator/Qiita-1.07M huggingface dataset:
Crowiのバージョンアップ、リハ１

# 狙い
Crowiを運用して２年が経ってしまった。仮初のバックアップはあったが実はしていない。
会社でも他の部署も使い始めそうである。
クラッシュしても知らん、の精神だったがそろそろ思い腰をあげようと思った。
ちなみにdockerのやつが動いてる

# 方法
今回はMongoDBのバックアップとリストアでどうにかする予定である。

# 手順

mongodbのコンテナ名を確認する

```terminal:
> docker ps
CONTAINER ID        IMAGE                             COMMAND                  CREATED             STATUS              PORTS                      NAMES
f79c89b228c8        crowi_crowi                       "docker-entrypoint.s…"   17 minutes ago      Up 17 minutes       0.0.0.0:3000->3000/tcp     crowi_crowi_1
d0b5a3892e46        mongo:3.6.3                       "docker-entrypoint.s…"   17 minutes ago      Up 17 minutes       0.0.0.0:27017->27017/tcp   crowi_mongodb_1
c53732c51848        redis:4.0.8                       "docker-entrypoint.s…"   4 hours ago         Up 17 minutes       0.0.0.0:6379->6379/tcp     crowi_redis_1
5307508ede61        plantuml/plantuml-server:latest   "/docker-entrypoint.…"   4 hours ago         Up 17 minutes       0.0.0.0:8080->8080/tcp     crowi_plantuml_1
```

mongodbのコンテナにログインする。

```terminal
> docker exec -it crowi_mongodb_1  /bin/bash
```

ログイン後に、backフォルダを作成してmongodumpバックアップを実施

```terminal
root@d0b5a3892e46:/home# mkdir back
root@d0b5a3892e46:/home# cd back/ 
root@d0b5a3892e46:/home/back# ls
root@d0b5a3892e46:/home/back# mongodump
```

本作業で該当フォルダに「dump」と言う名称のファイルが復元される。
ログインから復帰して、その出力したdumpファイルをローカルに持ってくる

```terminal
> docker cp crowi_mongodb_1:/home/back/dump ~/prog/crowi/
```

この後に、今回はリハのため一度downしてコンテナを削除し、再度docker-compose up によりまっさらなcrowiのシステムを作成します。

で、戻します。「back」フォルダ作らんでよかったですね

```terminal
> sudo docker cp dump crowi_mongodb_1:/home/dump
````

リストア実施

```terminal
root@3f3c2d2ddfd9:/home# mongorestore dump/
```


で復元完了、、、、ユーザーも記事も問題なし。

［追記］
remoteでもバックアップいけるわ

```
> mongodump --host 127.0.0.1:27017
```

# トラブル
本手順だとdockerコンテナログイン時はrootユーザでログインするのでリストアしても一部記事が反映されない。
簡略な方法としては以下である。

* コンテナログイン時までは一緒
* dump用のフォルダを作成する
* 以下のコマンドを打ってユーザーを切り替える

```bash
$ su mongodb
```
* mongodumpでダンプする

これで全部の記事が吐き出さられる。
まとめると巷にあふれるcrowi + docker のmongoコンテナで動いてるmongodbはmongodbユーザーに所有権があると言うことになります、


おそらく、mongodbの中でユーザーを作成してそのユーザーでログインすれば問題ないのだと思う。
が、まだやっていない。
Web系企業で働くことを目指す皆様へ

##少数受託開発ベンチャーでアルバイトをして感じたこと
###結論
万人にオススメは出来ないということ

###結論
メリットもあればデメリットもあり
万人にオススメは出来ないということです

###会社の特徴
所属している企業の特徴を説明します。
・社員数20名以下
・受託開発
・Webアプリケーション作成
・ベンチャー企業
・所在地は大阪

未経験からWeb系企業へ転職を考えている人ならば
魅力的な企業のように見えるはずです

確かに、下記のメリットはあります

###メリット
・モダンな技術に触れることができる
フロントエンドはReact、React native、Typescript
バックエンドはGolang
DBはMySQL、GraphQL
インフラはAWS

・服装自由、音楽も聴ける
服装は最低限の清潔感があれば良いみたいです。

イヤホンをつけて仕事をしている人もいれば、
お菓子を食べたり、コーヒーを飲みながら仕事をしている人がいます。

・人が少ないので挑戦しやすい
研修を２日終えて、現場に入りそうな予感です。

・未経験でも潜り込める
人が足りていません。
とにかく未経験を現場で鍛え上げて戦力にしようという風潮です。

但し、メリットだけではありません。
###デメリット
・社長と距離が近い故に、地雷を踏む可能性がある
社長の性格と合わなければしんどいです。
入社しないと分からないものですけどね。

・実力主義
人数が少ないので誤魔化しが効かず、結果を出さなければいけない

・研修が充実していない
研修でゆっくり教える時間も人もありません。
自分で力をつけていく必要があります。

以上のメリットとデメリットを踏まえて
オススメできる人、できない人の特徴を考えてみました。

###オススメできる人
・自走力がある人
研修が十分でないので、自ら知識を吸収する姿勢が求められます。

・短期間で成長したい人
開発の経験に関わる可能性が高いので、次のステップアップを考えている人にとっては最適でしょう。

###オススメできない人
・ゆっくり成長したい人
まったりしたい人には絶対にオススメできません。

・研修が必要な人
しっかりと知識をつけてから仕事につきたいと考えているならば
スクールに通ったり、何ヶ月も研修がある会社にいくべきです。

・会社でコミュニティを築きたい人
コミュニティを築きたいならば社員の多い会社にいく
もしくは
社外の勉強会などで繋がりを作るなど
自分で行動を起こしましょう。

・安定志向の人
人数が少ないということは資金的にも人的にも厳しいです。
つまり、零細企業です。
将来の保証は一切ないに等しいでしょう。
なので、スキルを身につけることが必要です。

アルバイトで働き始めて２日経って感じたことをまとめました。

全ての少数受託開発の企業がこうだとは思いません。
一概に上記の条件が全て正しい訳ではないが、
Web系企業を目指す人に知っておいて欲しいです。

SESやSIerなどでエンジニアを始めるのも悪くはないと考えます。

随時、更新していきます
TensorFlow の推論処理で複数のGPUを使用する (C++)

# TensorFlow の推論処理で複数のGPUを使用する (C++)

TensorFlow の推論処理を特に指定なく実行すると GPU 0 だけが使用されます。これを変更する方法をいくつか紹介しようと思います。

## 環境変数 

環境変数 `CUDA_VISIBLE_DEVICES` で使用するGPUを指定することができます。

例

```
set CUDA_VISIBLE_DEVICES=0
```

## set_visible_device_list

以下のように `set_visible_device_list` でGPUを指定することが可能です。引数で指定する値は上記の環境変数 `CUDA_VISIBLE_DEVICES` で指定するものと同じです。

例

```c++
tensorflow::Session::Options options;
options.config.mutable_gpu_options()->set_visible_device_list("0");
```

ただしこの場合、複数のスレッドで異なる値を指定した場合に以下のエラーが発生してしまいます。

```
Already exists: TensorFlow device (GPU:0) is being mapped to multiple CUDA devices (0 now, and 2 previously), which is not supported. This may be the result of providing different GPU configurations (ConfigProto.gpu_options, for example different visible_device_list) when creating multiple Sessions in the same process. This is not  currently supported, see https://github.com/tensorflow/tensorflow/issues/19083
```

## SetDefaultDevice

`SetDefaultDevice` で使用するデバイスを指定することができます。この場合、グラフに GPU でサポートされていないノードが存在することがあるので、これを回避するために `set_allow_soft_placement` で `true` を指定しておきます。

```c++
tensorflow::Session::Options options;
options.config.set_allow_soft_placement(true);

tensorflow::GraphDef graph_def;
// GraphDef の読み込みは省略します
::tensorflow::graph::SetDefaultDevice("/gpu:0", &graph_def);
```


## その他

以下の処理は効果がありませんでした。
以下の設定が可能との情報も見たのですが、少なくとも私の環境では無効でした。

```c++
tensorflow::Session::Options options;
options.config.mutable_device_count()->insert({"GPU", 2});
```

## 参考

- [TensorflowでGPUを制限・無効化する](https://qiita.com/kikusumk3/items/907565559739376076b9)
- [Select specific gpu for the session of tensorflow c++ api
](https://stackoverflow.com/questions/47129486/select-specific-gpu-for-the-session-of-tensorflow-c-api)
Vue.jsでイベントオブジェクトを取得する

# 概要
本記事では、Vueのディレクティブである **v-on** を使ってイベントオブジェクトを取得する方法を紹介します。

## イベントオブジェクトとは
イベントオブジェクトは、イベントハンドラーおよびイベントリスナーにおいて実行される関数の**引数**として受け取ることのできるオブジェクトです。 そのイベントオブジェクトから、**発生したイベントに関わる様々な情報（プロパティ）**を知ることができ、またそのイベントを制御するメソッドを活用することができます。
詳しくは下記記事を参考にしてください。
https://phpjavascriptroom.com/?t=js&p=event_object

## 実際のコード
sampleTextというidを持たせたp要素の上にマウスを乗せた時、そのマウスの位置を取得し
その下のresultというidを持たせたp要素に表示させるという流れ。

```html:index.html
<div id="app">
  <p id="sampleText" v-on:mousemove="mousePosition">ここにマウスを載せると下のX、Yの値が変わるよ</p>
  <p id="result">X:{{x}}, Y:{{y}}</p>
</div>
```

```js:index.js
new Vue({
  el: '#app',
  data: {
    x: 0,
    y: 0
  },
  methods: {
    mousePosition: function(event) {
      this.x = event.clientX;
      this.y = event.clientY;
      // eventの中を見てみると、全てのイベントオブジェクトが入っている
      console.log(event);
    }
  }
})
```

## 補足
今回はclientX(Y)を取得したが、**event**の中をconsole.logで見ると全ての情報が入っている。

## 補足2
引数に渡している**event**は好きなものに変えてもちゃんと動く。
Macでコーディングが捗りそうなショートカット集

#はじめに
最近WindowsからMacに乗り換えたので忘備録がわりに覚えたショートカット集を書き留めて
おこうと思う

#カーソル移動

```
Control + F  (forword)* 右にカーソルを１つ移動
Control + B  (back)* 左にカーソルを１つ移動
Control + P  (previous)* 上にカーソルを１つ移動
Control + N  (next)* 下にカーソルを１つ移動
```
#最初・最後に移動
```
Control + A  * 文頭に移動
Control + E  * 文末に移動
```

#文字入力に関するショートカット
```
Control + D (delete) カーソルの右側の文字を削除
Control＋H　カーソル左側の文字を削除
Control＋K　カーソル右側の文字から行末／段落末まで削除
option＋delete　カーソル左側の1単語とその後ろのスペース・句読点を削除
```

#空行の挿入
```
Control + O *空白の挿入
```

#貼り付けに関するショートカット

```
Control + Y *削除した文字を貼り付け
```


だいたいこんな感じです
また見つけたら追加していきたいと思います。
なんの略かわかった方がいればコメント是非是非コメント下さい
[Node.js]モジュール定義について整理（exports-require / export-import）

## はじめに
あるファイルに定義した関数等を別のファイルで使いたいときにどうするか。

Node.jsでは二つのやり方がある。

1. exportsで公開してrequireで読み込む（CommonJS）
2. exportで公開してimportで読み込む(ES2015)


**常に使えるのは1の方法。Babelを使うなら2の方法でも可能。**
どちらを選んでもメリット・デメリットがあるわけではない（と思う）ので、お好きなほうで。

個人的には、常に使える1の方法がいいような気がしている。

## 使用例
### exportsで公開してrequireで読み込む（CommonJS）
#### 一つの関数だけをエクスポート
```javascript:module.js
// 関数を定義
const f = () => {
    console.log('Hello!')
}

// 関数を公開
module.exports = f
```

```javascript:client.js
const f = require('./module')
f()  // Hello!
```

エクスポートするのは関数に限らず、文字列や数値でも良い。

#### 複数の関数をエクスポート

```javascript:module.js
// 関数を定義
const f1 = () => console.log('Hello!')
const f2 = () => console.log('World!')

// 別名をつけて、二つの関数を公開
module.exports = {
    sayHello: f1,
    sayWorld: f2
}
```

```javascript:client.js
const mod = require('./module')
mod.sayHello()  // Hello!
mod.sayWorld() // World!
```

#### クラスをエクスポート

```javascript:module.js
// クラスを定義
class Person {
    constructor(name) {
        this.name = name
    }

    greet(params) {
        console.log(`Hello, ${this.name}!`)
    }
}

// 公開
module.exports = Person
```

```javascript:client.js
const Person = require('./module')
p = new Person('aki')
p.greet() // Hello, aki!
```

#### おまけ：選択してインポート

```javascript:module.js
const f1 = () => console.log('Hello!')
const f2 = () => console.log('World!')

module.exports = {
    sayHello: f1,
    sayWorld: f2
}
```

```javascript:client.js
// インポートする対象を選択する
const {sayHello} = require('./module')
sayHello() // Hello!
```

### exportで公開してimportで読み込む(ES2015)
下記の参考資料を参照。いつか書く。


## 参考資料
### 1. exports - require（CommonJS）
* [Node.js v13.7.0 Documentation](https://nodejs.org/api/modules.html)
    * 説明が難しめ
* 『[Node.jsデザインパターン](https://www.oreilly.co.jp/books/9784873118734/)』（オライリー）
    * P.25~

### 2. export - import((ES2015))
* mozillaのドキュメント
    * [export](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export)
    * [import](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import)
スマホだけで開発からgitのプッシュまで行う～個人サーバーを持ってない人向け～

## working copyに出会うまで。
個人サーバーを持っていたら、スマホでssh接続してファイル編集できたりターミナル使えるアプリ使って、ファイル編集からgitのコマンドまでできるが、個人サーバーを持ってない人でローカルで開発している場合、外でPCを使わずファイルを編集してGitでプッシュする方法を書きます。

電車乗ってたら、ふとプライベート用のgitアカウントで作ってるリポジトリで、「あそこのコメントアウト消したい。。。忘れる前に消したい」
って思って、今の時代スマホアプリでgitクライアントあるっしょ！って思ってググったら、このアプリを見つけた。

いろいろ調べたらこのアプリが1番良さげだったのでインストール。

あと、working copyはエディタとしてはメモ帳レベルなので、Textasticというエディタアプリ使ったほうがええで的なことを書いてる記事が多いんだけど、2000円ぐらいする。

個人的にはオンラインエディタでええやんって思って購入しませんでした。

##準備

まず最初に課金する(王者の風格)
調べたら、有料で購入しないと無料期間として10日経ったらプッシュできなくなるそうです。
期間が過ぎたら再インストールしたらいいが、それが面倒なので課金しました。
別に秋葉で同人誌買うのを一回我慢するだけです。おつりが出ますよ。これはどっちでもOK

〜クローン〜
●最初の画面でプラスボタンを押して、
「Cline repository」を選択。
リポジトリのWeb URLをコピペ。
あとは、「User」だけ入力して、「clone」
↓
●キー生成してないンゴって言われるので、
「generator key」みたいなやつを選択すると、勝手に生成してくれる。
生成したあとはファイルとしてエクスポートできるので、保管しておく。
↓ 
●あとはそのまま進めばファイル選択してプッシュできる。



## 分かりにくかった点
- gifを端末から持ってくる(ファイルを持ってくる)

iPadのアプリ「写真」からgifを選んでworking copyで開こうとすると、エラー出て持ってこれない。

なので、写真アプリにあるgifを、「ファイル」というデフォルトでインストールされてるアプリに持ってくる。

次に、working copyを開いて、任意のディレクトリで、
上の方のプラスボタンを押して、「Import files」を選択。すると、先ほどのアプリ「ファイル」からデータを選択できるようになる。これで、インポートできた。

 - プッシュのやり方
 
 これが分かりにくかった。でも一度知れば便利すぎた。

![05612E4F-CF74-4CEC-B1DF-17B0976647DB.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179803/b20d0cdb-b685-3848-f008-ecdeae5b585d.jpeg)

この画像の左から2番目の指紋みたいなアイコン(このアプリのアイコン)をタップ

ここから、任意のファイルを選択して、コミット文書いて、任意のファイル選択してプッシュできる

## 感想
もちろんこのアプリだけで本格的な開発はできないが、ふと電車で編集したくなったときに、クローンからコードの編集、プッシュまで出来るので個人的には大満足
C/C++ for Visual Studio Codeで標準ヘッダにあるはずの型が見つからない



# 問題
C/C++ for Visual Studio Code で標準ヘッダー（`unistd.h`）にあるはずの `pid_t` について画像のように`identifier "pid_t" is undefined` が表示される.
![Screenshot from 2020-01-23 00-13-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480312/f3a9ac41-3f53-cfc9-54d1-af3f3d9670ab.png)

だが gcc では問題なくコンパイルされる.

# 原因
`unistd.h` 内の `pid_t` の定義は `_GNU_SOURCE` が定義されていることに依存する.

# 解決方法
VSCode のコマンドパレット > C/C++: Edit configurations (UI)
から `Compiler arguments` に `-D_GNU_SOURCE` を追加する.


# 環境
- Ubuntu 18.04
- gcc (Ubuntu 7.4.0-1ubuntu1~18.04.1) 7.4.0
- C/C++ for Visual Studio Code Version 0.26.3-insiders4: January 16, 2020

# 参考
- [Support gnu standard versions](https://github.com/microsoft/vscode-cpptools/issues/2782)
- [Linuxのしくみ リスト03-01 forkプログラム (fork.c)](https://github.com/satoru-takeuchi/linux-in-practice/blob/master/03-process-management/fork.c)
TypeScriptでInputEventを扱うときの正しいアプローチ

TypeScriptで`input`イベントの`event.target.value`を参照しようとすると、型エラーとなります。


```ts
const inputField = document.getElementById('inputField');

inputField.addEventListener('input', (event) => {
  const value = event.target.value; // Property 'value' does not exist on type 'EventTarget'.
});
```

これは、`event.target`の型が確定していないため発生します。

正しくは`event.target`の型チェックを行って想定される要素ではないことを確認します。

```ts
// Input要素の場合
const inputField = document.getElementById('inputField');

inputField.addEventListener('input', (event) => {
  const { target } = event;

  // Input要素以外の場合は終了
  if (!(target instanceof HTMLInputElement)) {
    return;
  }

  const value = target.value; // 👍
});
```

```ts
// TextArea要素の場合
const textareaField = document.getElementById('textareaField');

inputField.addEventListener('input', (event) => {
  const { target } = event;

  // TextArea要素以外の場合は終了
  if (!(target instanceof HTMLTextAreaElement)) {
    return;
  }

  const value = target.value; // 👍
});
```

一手間かかりますが、これでより型安全にInputEventを扱えるようになります。
Python初心者がProgeteでPythonを始める方法

Python初心者がProgeteでPythonを始めてみた。

まずはProgateへアクセス
https://prog-8.com/

無料の会員登録でアカウントを作成する
![2020-01-24_07h38_00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567263/129fa51d-aff0-f280-12e2-c4e2ac734809.png)

レッスン一覧からPythonを選択
![2020-01-24_07h39_54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567263/c8556ee9-f148-a343-52a2-cbe96b2dce32.png)

全部で5レッスン＋2記事を選択する
![2020-01-21_21h50_46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567263/850921a7-b8e8-ec0b-7e80-62b91166bd13.png)

次はレッスン1について投稿します！
Auth0のテナントの設定を検証する

# はじめに
Auth0のサポートページでテナント設定の検証をやってみたのでそのメモです。
これを行うことでテナントの設定がProduction環境として妥当な内容になっているかを確認することができます。

# テナント設定の検証手順
<img width="459" alt="スクリーンショット 2020-01-23 17.23.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490013/085b67bd-7fc5-4d05-ee7a-2274f360645b.png">
[Auth0 Support Center](https://support.auth0.com/)にアクセスして、上段のメニューから「Tenants」を選択します。

<img width="651" alt="スクリーンショット 2020-01-23 17.31.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490013/fd19a7d7-f896-4ad8-37cf-b6348d1855ae.png">
テナントの一覧が表示されるので、設定を検証したいテナントの右上の歯車アイコンをクリックします。

<img width="208" alt="スクリーンショット 2020-01-23 17.27.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490013/1cb14a4f-9828-282d-35fb-e1e00309c662.png">
すると、SETTINGSメニューが表示されるので、ここの`Run Production Check`をクリックすると検証が行われて結果が表示されます。

<img width="590" alt="スクリーンショット 2020-01-23 17.30.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490013/4863a201-2563-4f51-09d2-f3b3754f3724.png">
こんな風に（ダメダメな例）

検証結果画面に`Select Applications`と記載されているプルダウンもあるので特定のアプリに限定した設定検証も出来そうです。

# 検証結果について

検証結果には`Required`, `Recommended`, `Best Practices`の3種類があって
`Required`と`Recommended`は検証エラーとなった理由の詳細だけではなく、その設定に関するドキュメントと実際に設定を行う管理画面へのリンクまで表示してくれる親切仕様になっています。
`Required`は必ず、`Recommended`もできるだけ検証をパスできるようにしておきたいところです。

また、`Best Practices`にはAuth0が自動で検証できない内容が列挙されているので、この部分については手動で確認する必要があります。ここも忘れずに確認したほうが良いと思います。

# おわりに
テナント設定の検証をすることで、Production環境での設定漏れ等に気付くことができるので、実サービスでAuth0を利用している人は是非やってみてください。

# 余談：テナントのタグ設定

上述のテナント設定の検証手順にある、SETTINGSメニューの`Run Production Check`の下に`Assign Environment Tag`という項目があります。
<img width="208" alt="スクリーンショット 2020-01-23 17.28.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490013/dd96dfc9-93bc-5293-9c56-65f148f2bd24.png">

この項目を選択することで、サポートページのテナント一覧に表示されているタグを変更することができます。
タグは`Development`, `Staging`, `Production`の3種類が選択可能です。

Auth0の有料テナントを利用している人は特にですが、Production環境にはちゃんと`Production`のタグを設定したほうが良いです。
Auth0のManagement API(v2)にはレート制限がかかっていて、通常は1秒あたり2リクエストと定められているようです。ただし、有料テナントのProduction環境のみ、1秒あたり15リクエストまで許容とのこと。
このProduction環境かどうかはテナントのタグで判断されるみたいなので、ここもちゃんと設定しておくべきでしょうね。

レート制限については、以下のAuth0のドキュメントに詳しく書いてありました。
[Rate Limit Policy For Auth0 APIs](https://auth0.com/docs/policies/rate-limits)
ZpluginがZinitという名前に変わったのでやったこと

# Zplugin(Zinit)とは?
zshのプラグインとかをなんかいい感じにしてくれるやつ

# zplugin updateしたらなんか変になった

```bash
--zplg-shadow-zstyle:33: scalar parameter tmp created globally in function --zplg-shadow-zstyle
```

とりあえず、zshをMac標準に入っているのからbrewで入れてパスを通してターミナルを再起動しても上のエラーがでてきました。
じゃあプラグイン管理してるZplugin関連が原因かなと思いました
ZpluginのGithubを覗いてみると ***なんか　なまえ　ちがう***

#Zinitへ

>The project undergoes a name change from Zplugin to Zinit.
Please report any observed issues.
>
>https://github.com/zdharma/zinit 2020/1/23

 
*ZplugはZinitになりました*。

それにともなってファイル名も変わっているので、このまま使いづつけるのは支障があるでしょう。

#やってみたこと
```bash
rm -rf .zplugin

sh -c "$(curl -fsSL https://raw.githubusercontent.com/zdharma/zinit/master/doc/install.sh)"
```
で再インストール

次に.zshrc内の**zplugin**を**zinit**に置き換える

一応これでエラーは出なくなりました
問題が出た場合はWikiを見たりして対応する必要があるでしょうが、私は必要ありませんでした。

# そもそも何で名前変わったの?
この名前の変更は投票性で行われました。
それはGithubの[issu](https://github.com/zdharma/zinit/issues/181)や[Reddit](https://www.reddit.com/r/zsh/comments/dgw2ss/newname_poll_for_the_zplugin_project/f3fds6w/)上で行われたのですが、その中で一部記述があります。

>I find the old name to be a little bit rougher or "close to the ground". Example hypothetical conversation: "- What do you use to load the plugin? - Zplugin!"
>
>psprint2 (https://www.reddit.com/r/zsh/comments/dgw2ss/newname_poll_for_the_zplugin_project/f3fds6w/) 2020/1/23

Zpluginという名前が粗暴・抽象度が低いみたいな感じで変えたかったみたいですね。（注:英語苦手なので気になった方は自分でURL辿ってください。申し訳ない。）

少し手間ですが本質的には同じなので受け入れるしかないですね。
networkxメモ

# TL;DR

networkxを使って解析することが多かったので簡単にメモ
そのうち記事にするかも

## spring layoutの固定

spring layoutで書くと毎回違うネットワークが生成させるので、固定したい。
numpyのrandomseedを固定すれば生成されるネットワークを固定できる。

```python
import numpy as np
import networkx as nx
import matplotlib.pyplot as plt

np.random.seed(10)

G = nx.read_gml("/path/to/gmlfile")
pos = nx.spring_layout(G)
fig, ax = plt.subplots()

nx.draw_networkx_nodes(G, pos, ax=ax)
nx.draw_networkx_edges(G, pos, ax=ax)
plt.show()
```
よく使いそうなCSS



# よく見るfont-family

```css
@charset "utf-8";

body {
    font-family: Arial, sans-serif;
  }
```

複数書く理由はOSによって入っているフォントが異なるため。
左のものから優先的に使用される。

## 最後に総称フォントファミリー名を書く
個々のフォント名ではなく、フォントのカテゴリーを指定するもの。
もし指定したフォントが全く入っていなかった場合にせめてこういう系統のフォントを表示してほしいと伝えるためのもの。

|総称ファミリー名    |フォント|
|:-----------------|:------------------|
| sans-serif       |        ゴシック体系 |
| serif            |           明朝体系 |
| cursive          |           筆記体系 |
| monospace        |        等幅フォント |

# レイアウトが楽になる

```css
body {
      box-sizing: border-box;
  }
```
こうすることでwidthとheightが**paddingとborderを含める**ようになる。

# block要素 inline要素

| display|配置方法|サイズの操作|
|:---|:---|:---|
|block|下に追加されていく|有効|
|inline|左に詰めて追加される|無効|
|inline-block|左に詰めて追加される|有効|

# 行の高さを調整する

どのタグでもページにテキストが配置されると、
行ごとに行ボックスと言われる四角い領域がline-heightプロパティで設定される。
テキストの大きさはfont-sizeで設定し、文字は上下中央に配置される。

文字サイズの3倍にしたい場合はemを使う。単位なしで指定すると子要素に値が継承されない。

```css
p {
  font-size: 16px;
  line-height: 48px;
  line-height: 3em;
  line-height: 3; 
  background-color: pink;
}
```

# コンテンツが領域から溢れた時に使う

```css
#box1 {
    overflow: hidden; /*隠れる*/
    overflow: scroll; /*スクロールバーがつく*/
  }
```
# ボタンを無効っぽく見せる

```css
#btn.disabled {
    opacity: 0.5;
  }
```


# 特定のinputタグにスタイルを当てる

```css
  input[type=text] {
    width: 100%;
    height: 100%;
  }
```
# 複数のセレクタにスタイルを当てる

- セレクタをつなげて記述
    - 両方のセレクタを同時に満たす要素にのみ適用。
    - 例)`h1.hoge`の場合h1タグかつhogeクラスが付与されているセレクタ。
- セレクタの間に半角スペースを入れて記述
    - 入れ子構造の時に適用
- カンマ区切りで記述
    - 異なる要素にクラス名を複数指定している時に適用する

# positon

absolute:基準の位置が「親要素」
fixed:基準の位置が「ウィンド全体」

※absolute注意点
子要素をabsoluteにした場合、親要素に必ずrelative(もしくはfixed)を指定しておく

# flex-box
参考記事
https://ics.media/entry/13117/

- displayプロパティにflexを指定する。
- Flexboxはmarginの相殺が起きない。
- Flexboxにおけるレイアウトは、**主軸**と**交差軸**により決定され、初期状態ではヨコが主軸、タテが交差軸となる。
    - 主軸の並びはjustify-contentプロパティで指定する。
    - 交差幅の並びはalign-itemsプロパティで指定する。
- ボックスを複数行に並べる
    - 初期設定では、ボックスは親要素の幅にかかわらず一行に並ぶ。設定を変えるにはflex-wrapプロパティの値を変える。
        - nowrap:ボックスを単一行に配置
        - wrap:ボックスを複数行に配置
    - ボックスごとの高さは揃う。これはalign-itemsプロパティの初期値(strech)によるもの。

- ボックスの並び方向
    - 初期状態ではボックスは横方向に並ぶ。並び方向を変更するにはflex-directionプロパティを用いる。

# 上下左右中央揃え 

```css
.container {
  display: flex;
  justify-content: center; /*主軸方向で中央*/
  align-items: center; /*交差軸で中央*/
}
``` 

# margin 

左右にautoを指定すると、左右中央に要素を配置できる。

```css
.foo {
  margin: 0 auto;
}
``` 

# 画像の周りにつく余白の正体

imgタグはインライン要素であり、テキストが配置されるときの基準であるベースラインを基準に配置される。そのへんのスタイルをいじるにはvertical-alignの設定をすると解決する

例)画像の下の余白を埋めたいとき

```css
img {
  vertical-align: bottom;
}
```
DjangoアプリをDocker上に構築しAWS Fargateにデプロイする

#はじめに
AI、機械学習やビッグデータ解析などでPythonが注目されています。
Pythonを用いたウェブアプリケーションが今後増加することが予測される中、PythonのフレームワークであるDjangoを用いてアプリを作成し、AWS Fargateにコンテナでデプロイをするまでの一連の流れを投稿していきます。

所属しているFintechスタートアップでの開発経験からDjango+Docker+AWS Fargateの構成は
１）学習コストが低い
２）共同開発しやすい
３）スケールしやすい
という特徴があり、個人やスタートアップによるwebアプリケーション開発のベストプラクティスであると考えています。

項目毎に細切れに投稿していくので詳細については各投稿を参照してください。
日々記事を投稿しそのリンクを本ページに追加していくので、本ページは目次として使ってください。



#目次

１.なぜ今、Pythonなのか
２.Djangoについて
３.Dockerについて
　（１）[DockerでHello,World](https://qiita.com/keita_gawahara/items/a5ea0eb211a8f14b9fc8)
４.Docker上でDjangoアプリケーションを動かす
　（１）[Pipenvを用いた仮想環境上でDjangoを起動する](https://qiita.com/keita_gawahara/items/487a635d226fb0705b13)
　（２）[docker-compose upを用いてDockerコンテナ上でDjangoを起動する](https://qiita.com/keita_gawahara/items/c0f525190b39395d4170)
５.PostgresSQL
　（１）[Docker+DjangoでPostgreSQLを使う](https://qiita.com/keita_gawahara/items/59a7db6046016046f0dc)
６.アプリケーションの作成
　（１）[DjangoでCustom User Modelを実装する](https://qiita.com/keita_gawahara/items/e534178d9ae89872ebab)
　（２）URLs
　（３）Views
　（４）認証機能
　（５）環境変数
７.Emailの設定
８.ファイルのアップロード
９.権限
１０.検索
１１.Perfomance
１２.セキュリティ
１３.デプロイ
Active Storageにも、1対1対応のモデルを作ったほうがいいかも

Rails 5.2から、Active Storageという、ファイルアップロードの機能が標準装備されましたが、そのまま使おうとしたところ、微妙に気になる点がありました。

## Active Storageの便利な点

今までPaperclipなどのサードパーティーのGemを使っていたのですが、以下のような点を自前で実装する必要がありました。

* S3でprivate保管していると、画像表示用に生成したpresigned URLが期限切れするという問題があるので、いったんRailsを経由させてS3のURLにリダイレクトさせる必要がある
* オンデマンドに適切なサイズのサムネイルを生成するのが難しい

Active Storageであれば、こういった引っかかりやすい箇所も標準で備えていて、しかも「複数オリジンの並行運用」なんてことまでこなせてしまいます。

## 使い方について

Active Storageは専用のデータベーステーブルを持って、ポリモーフィック関連で別なモデルと結びつきますので、画像を入れたいモデル側でのマイグレーションは不要です。`has_one_attached :item`や`has_many_attached :items`のように宣言するだけで画像を使えるようになります。

## そのまま使おうとして気になったこと

もちろんそのままでも基本的なファイル保存などは問題ないのですが、使いづらい点がいくつかありました。

* モデルが`ActiveStorage::Attachment`で固定なので、
  * 自分でメソッドを生やそうにもオープンクラスになってしまい、抵抗がある
  * 画像ファイルに付随するタイトルなどのデータを保存できない
* `has_many_attached`の場合、`accepts_nested_attributes_for`でファイルの追加はできるけど削除が利かない

## 画像用モデルを立てる

ということで、画像と1対1で結びつくモデルを立てて、そこにタイトルを入れたり、画像処理用のメソッドを追加したりすることでより便利に使えて、そして`accepts_nested_attributes_for`からの`_destroy`もできるようになるので、この方法が良さそうだと感じました。
Teasmで作業しているファイルがロックされてしまう問題の対策

# 事の発端
Teams（OneDrive）にファイル置いてるのに、誰かが編集してるとドキュメントがロックされてしまうんですけど！？

# どういうことなのか
Excel2016から「共同編集」という機能が追加され、従来の「ブックの共有」とは異なる仕組みで同時編集ができるようになったようです。

- Microsoft Excel ブックの共同編集を使用して同時に共同作業を行う（https://support.office.com/ja-jp/article/excel-%E3%83%96%E3%83%83%E3%82%AF%E3%81%AE%E5%85%B1%E5%90%8C%E7%B7%A8%E9%9B%86%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E5%90%8C%E6%99%82%E3%81%AB%E5%85%B1%E5%90%8C%E4%BD%9C%E6%A5%AD%E3%82%92%E8%A1%8C%E3%81%86-7152aa8b-b791-414c-a3bb-3024e46fb104）
- ブログ 「共同編集」機能（http://officetanaka.net/excel/excel2016/05.htm）

# 事象
この機能を使ってTeams（OneDrive、SharePoint）に置いたファイルを編集したいのに、
「○○○.xlsxは編集のためロックされています。使用者は〜です。」
と表示されてロックがかかってしまうことがありました。

## 原因と対策
### 原因１．Excelのバージョンが古い
Excel2016以降を使ってください。

### 原因２．ブックの形式が古い
「.xlsx」を使ってください。

### 原因３．「共有ブック機能」がONになっている
従来の[共有ブック機能](https://support.office.com/ja-jp/article/%E5%85%B1%E6%9C%89%E3%83%96%E3%83%83%E3%82%AF%E6%A9%9F%E8%83%BD%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6-49b833c0-873b-48d8-8bf2-c1c59a628534)がONになっていると、共同編集がうまく動かないようです。解除してください。

以上
Rのsnaパッケージで緯度・経度を反映させたグラフの描画について

#はじめに
Rのsnaパッケージを使って緯度・経度を反映させたグラフを描こうとしているのですが、
ノードが密集してしまってうまく書くことができません。

もし良い解決方法をご存知の方がいらっしゃったらアドバイス頂けますと幸いです。

#書いたコード
```ruby:R
#snaパッケージを読み込み
library(sna)

#二部グラフのcsvファイルを読み込み
test <- read.csv("test.csv", row.names = "test") 
#matrixに変換
test <- as.matrix(test)
#転置行列を乗じる。
resulttest <- test%*%t(test)  

#ノードの緯度・経度のcsvファイルを読み込み
loctest <- read.csv("testgeo.csv",header = T,row.names = 1)
#「coo」と定義
coo <- loctest[,1:2]

#ノードに緯度・経度を反映させてプロットする。
gplot(resulttest,gmode = "graph",displaylabels = TRUE,
edge.col = rgb(0.6,0.7,0.8,0.5),jitter = FALSE,
label.pos = 5,coord = coo)
```

#csvファイルの内容

・「test」の内容は以下のとおりです。
![スクリーンショット 2020-01-23 21.20.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149401/34f4dc26-89b6-de7b-fb12-9050c63d6a36.png)


・「testgeo」の内容は以下のとおりです。
![スクリーンショット 2020-01-23 21.21.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149401/e5b5b0eb-bef7-06f8-766e-239d6c488fc2.png)

#出力されたグラフ
![スクリーンショット 2020-01-23 21.26.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149401/0ba83b8e-5ce7-41e7-57cb-6288219c9a94.png)

このような感じで、うまく表示することができませんでした。

#追記
こんな感じでノードの大きさとエッジの幅を狭くして、ノードにラベルを表示するのを諦めたら多少マシになりました。

```ruby:R
gplot(resulttest,gmode = "graph",displaylabels = FALSE,
edge.col = rgb(0.6,0.7,0.8,0.5),jitter = FALSE,
label.pos = 5,coord = coo,vertex.cex = 0.3,edge.lwd = 0.3)
```

![スクリーンショット 2020-01-23 21.47.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149401/73b20bd1-8767-b2b8-dcc9-87c7a928da73.png)

#追記2
「suppress.axes = FALSE」で軸を表示させて、「xlim = c(133,138),ylim = c(34,37)」でプロットする範囲を指定するとこんな感じになりました。

```ruby:R
gplot(resulttest,gmode = "graph",displaylabels = FALSE,
edge.col = rgb(0.6,0.7,0.8,0.5),jitter = FALSE,
label.pos = 5,coord = coo,vertex.cex = 0.3,edge.lwd = 0.3,
suppress.axes = FALSE,xlim = c(133,138),ylim = c(34,37))
```
![スクリーンショット 2020-01-23 21.53.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149401/d5619941-f8c8-f7f9-9b7e-0dc689c70f23.png)

#追記3
vertex.sidesを使って頂点の辺の数を指定することで、頂点の形状を変更できます。
（3→三角形、4→四角形、50→丸）
また、vertex.colを使って色を変更することができます。

以下のとおり、行列について上から順に形と色を指定していくことができます。
（行列の全部で19の頂点について、上から順にrep(3,4)→三角形を4つ、rep(4,5)→四角形を5つ、rep(50,10)→丸を10個など。色も同じ。）

```ruby:R
gplot(resulttest,gmode = "graph",displaylabels = FALSE,
edge.col = rgb(0.6,0.7,0.8,0.5),jitter = FALSE,label.pos = 5,
coord = coo,vertex.cex = 0.3,edge.lwd = 0.3,suppress.axes = FALSE,
xlim = c(133,138),ylim = c(34,37),
vertex.sides = c(rep(3,4),rep(4,5),rep(50,10)),
vertex.col = c(rep("blue",4),rep("red",5),rep("green",10)))
```

![スクリーンショット 2020-01-25 22.32.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149401/da624792-7f5d-bd50-6914-bdb14bc3d48c.png)
SlideShareに日本語スライドを投稿する

# 概要
スライド共有サービスとして名高いSlideShareですが、意気揚々とuploadすると日本語が消滅していた・・・という人も多いようで。

# 解決
GhostScriptを利用して

``` cmd
gswin64 -dPDFA -dBATCH -dNOPAUSE -sDEVICE=pdfwrite -sOutputFile=output.pdf input.pdf
```


# 参考
[Slideshareへアップロードするスライドの日本語が消える場合](http://www.jaysong.net/slideshare_japanese/)
こちらの記事を参考にさせていただきました。
【簡易手順】パスワードなしでsshログインするには

macOS Catalina から CentOS7.7 へ ssh 接続した際のメモ。
当たり前だが macOS に限らず普通に linux や *BSD 環境でも使える。

### クライアント（macOS）側作業

```:シェルコマンド
mkdir -m 0700 ~/.ssh
ssh-keygen
```

パスフレーズはエンターキーだけ。
すると秘密鍵(id_rsa)と公開鍵(id_rsa.pub)がホームディレクトリ配下の .ssh ディレクトリへ生成される。

~/.ssh
┣ id_rsa
┗ id_rsa.pub

公開鍵をサーバへコピーする。

```:シェルコマンド
cd ~/.ssh
scp id_rsa.pub (サーバでのユーザ名)@サーバIP:.
```

一旦サーバへsshログインする。

```:シェルコマンド
ssh (サーバでのユーザ名)@サーバIP
```

### サーバ側作業

公開鍵を登録する。

```:シェルコマンド
mkdir -m 0700 ~/.ssh
cd ~/.ssh
cat ~/id_rsa.pub >> authorized_keys
chmod 0600 authorized_keys
```

サーバに公開鍵認証を設定する。

```:シェルコマンド
vi /etc/ssh/sshd_config
```

次のように修正する。
 #PubkeyAuthentication yes
　▼
PubkeyAuthentication yes

sshdを再起動する。

```:シェルコマンド
service sshd restart
```

これでクライアント側からサーバへパスワード認証なしでsshログインできる。

以上。
Android StudioでJavaのversionで躓いたのでまとめる

# はじめに

ここ数ヶ月、実務インターンをするようになってから、インターン先が変わるたびに環境構築をしているのですが、適当にやっているせいでJDKのバージョンが原因なエラーに幾度となく躓いてきました。

毎回調べて、

ああ...JDKのversionが原因か。で、どうするんだっけ。と調べるのが不毛なため備忘録として記事にしました。

この記事は自分のユースケースにおける対処法なため、他の方には当てはまらないかもしれませんが、随時updateしていければと思います。

# 躓いた具体的なユースケース

まず、

```Powershell
java -vesion
```

とターミナルで打つと、ご自身のJDKのバージョンがいくつか確認できるのでご参考までに。

## How to resolve java.lang.NoClassDefFoundError: javax/xml/bind/JAXBException

この時の自分のJDKは

```Powershell
java 12.0.2 2019-07-16
```

でした。

> Java 9で「モジュール」の機能が追加された際に、標準ライブラリからいくつかのモジュールが非推奨となりました。

[Java 9以降でJAXBを使用するには、外部JARが必要 #49
](https://github.com/acroquest/javabook-support/issues/49)



この機能追加により、 `JAXB` なるモジュールも非推奨となり、上記のエラーが出るようになったみたいです。Java 8以下では再現せず、Java 9以上の環境で再現するとのこと。

### 解決策

Java 9, 10であれば、実行時のオプションで

```Powershell
--add-modules java.xml.bind
```

を指定してあげれば一旦は凌げます。

毎回オプションを追加するのが面倒臭いとか、そもそもJava 10より上のJDK環境の場合は以下の**強引な解決策**を試してみてください。

# 強引な解決策

## Android StudioのJDKを使用する

まず、知っておくべきことが

**Android Studioは、Javaの実行環境そのものを提供してくれています。**

そのため、[Android Studioがapkを作る時に使っているJavaのPathのメモ](https://qiita.com/kkkkan/items/f9595107a2a9153d1c60) の記事でも言及されているように、普段我々がGUIでAndroid StudioでRunした際には、 **Android StudioのJava環境**でapplication moduleをビルドし、apkを作成しています。

逆に、

Android Studioの下部のTerrminalや、MacやWindowsのアプリケーションとして開いているターミナルでは、OSの実行環境が使用されます。

したがって、GUIではちゃんとビルドできるのに、

```Powershell
./gradlew assemble
```

等のコマンドでビルドしようとすると失敗するのはそのせいです。

GUIでビルドができるなら、Android Studioの実行環境でTerminalも動かしてしまえば良いということで、

`.bashrc` や `.zshrc` に環境変数のPathを通してあげればよさそうです。

```Powershell
export PATH=$PATH:/Applications/"Android Studio.app"/Contents/jre/jdk/Contents/Home/bin
export JAVA_HOME=/Applications/"Android Studio.app"/Contents/jre/jdk/Contents/Home
```

すると、Android Studioのバージョンにもよりますが、適切なJavaのバージョンでの実行環境でTerminalからも起動できるようになります。

ちなみにAndroid Studio 3.6-RC1では `1.8.0_212-release` でした。

## 異なるversionのJDKをダウンロードする

異なるversionといえども上記のAndroid Studioの実行環境から、  `1.8.0` 系が良さそうです。Java 8ですね。

[Oracle社HP]([https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html](https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)) からinstallします。

installの手順は沢山記事があるのでそちらを参考願います。

最近からサインインが必要になったためOracleのアカウントを作らないと行けなかったはずです。

また、表示名が `Java SE Development Kit 8u241` みたいな形で、 `8u***` となっているかもしれませんが、それが`1.8.0` 系です。

installができたら、自分がインストールしたJDKのバージョン一覧をみてみましょう。

```Powershell
/usr/libexec/java_home -V
```
確認できたら、そのJDK versionを環境変数に設定します。

```Powershell
export JAVA_HOME=`/usr/libexec/java_home -v {java_version}
```

`{java_version}`   には先ほど確認したversionを入れましょう。

あとは無事設定できてるかを

```Powershell
java -version
```

で確認して、ちゃんと設定できていたらOKです。

# 参考文献

[https://qiita.com/mas0061/items/2fe9333f045800d00b5c](https://qiita.com/mas0061/items/2fe9333f045800d00b5c)

[https://qiita.com/kkkkan/items/f9595107a2a9153d1c60](https://qiita.com/kkkkan/items/f9595107a2a9153d1c60)

[https://github.com/acroquest/javabook-support/issues/49](https://github.com/acroquest/javabook-support/issues/49)
【画像処理100本ノックに挑戦】Q.39. JPEG圧縮 (Step.3)YCbCr表色系

# 使用したライブラリ
[【画像処理100本ノック】独自の画像入出力クラスを作る](https://qiita.com/jajagacchi/items/834e8425b84f94df8a49)

# Q.39. JPEG圧縮 (Step.3)YCbCr表色系
> YCbCr表色形において、Yを0.7倍してコントラストを暗くせよ。

[【画像処理100本ノックに挑戦】Q.5. HSV変換](https://qiita.com/jajagacchi/items/e64ff4b347eceafce5d3)のコードを流用しました。

```c++
struct YCbCr
{
	double Y, Cb, Cr;
};
struct RGB
{
	RGB(int r, int g, int b)
	{
		this->r = r;
		this->g = g;
		this->b = b;
	}
	int r, g, b;
};

YCbCr RGB2YCbCr(const RGB& rgb)
{
	YCbCr ycbcr;
	int R = rgb.r;
	int G = rgb.g;
	int B = rgb.b;

	ycbcr.Y = 0.299 * R + 0.5870 * G + 0.114 * B;
	ycbcr.Cb = -0.1687 * R - 0.3313 * G + 0.5 * B + 128;
	ycbcr.Cr = 0.5 * R - 0.4187 * G - 0.0813 * B + 128;

	return ycbcr;
}
RGB YCbCr2RGB(const YCbCr& ycbcr)
{
	double R, G, B;
	double Y = ycbcr.Y;
	double Cb = ycbcr.Cb;
	double Cr = ycbcr.Cr;
	R = Y + (Cr - 128) * 1.402;
	G = Y - (Cb - 128) * 0.3441 - (Cr - 128) * 0.7139;
	B = Y + (Cb - 128) * 1.7718;
	return RGB(R,G,B);
}

int main()
{
	PPM ppm("imori.pnm");
	int width = ppm.Get_width();
	int height = ppm.Get_height();
	PPM ppm2(width, height);

	for (int j = 0; j < height; j++)
		for (int i = 0; i < width; i++)
		{
			int r = ppm(i, j, 'r');
			int g = ppm(i, j, 'g');
			int b = ppm(i, j, 'b');

			YCbCr ycbcr = RGB2YCbCr(RGB(r, g, b));
			ycbcr.Y *= 0.7;

			RGB rgb = YCbCr2RGB(ycbcr);
			ppm2(i, j, 'r') = rgb.r;
			ppm2(i, j, 'g') = rgb.g;
			ppm2(i, j, 'b') = rgb.b;
		}

	ppm2.Flush("out.ppm");
	return 0;
}
```
![imori.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520857/a1d7573f-334e-a3e0-5a80-0d973166f244.png) ![out.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520857/938c5aa5-e028-47a0-23d6-8668ba70d5c4.png)
Hello ts-jest

# ディレクトリ作成

```
$ mkdir hello
$ cd hello
```

# 初期化

```
$ npm init
```
目をつむって全部エンターを押す

# いろいろ入れたり初期化したり

```
$ npm i -D jest typescript
$ npm i -D ts-jest @types/jest
$ npx ts-jest config:init
```

# テストファイル作る

```
$ mkdir __tests__
$ touch __tests__/hello.test.ts
```

# テスト書く

hello.test.tsに以下を追加

```
import hello from "../src/hello"

test('hello', () => {
    expect(hello()).toBe('Hello');
})
```

# テスト対象となるファイルを作る

```
$ mkdir src
$ touch src/hello.ts
```

# コードを書く

hello.tsに以下を追加

```
export default () => 'Hello'
```

# package.jsonをいじる

```
{
  "name": "hello",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/jest": "^24.9.0",
    "jest": "^25.1.0",
    "ts-jest": "^25.0.0",
    "typescript": "^3.7.5"
  }
}

```

# Ready perfectly

準備は完全に整った。あとは

```
$ npm t
```

を実行するだけ

# 余談

Ready perfectlyというのは英語的にかなりおかしいそうです。正しくは、Absolutely prepared。もしくはAbsolutely ready to goだそうです。わざと間違った表現を使用している可能性もありますが・・・。面白いから好きですけどね！！
DockerでHello,World

#はじめに
DockerをインストールしてHello,Worldを表示させます。
OSはMacを使用します。

#Docker for Macのインストール
Dockerをインストールするために[Docker Hub](https://hub.docker.com/signup)で無料のアカウントを作成します。アカウントを作成後した後、下記リンクからDocker for Macをダウンロード、その後インストールします。
#####[・Docker for Mac](https://hub.docker.com/editions/community/docker-ce-desktop-mac)

インストール後　--versionでバーションが表示されればインストール成功。

```
$ docker --version
```

#DockerでHello,World
“Hello, World” image を使用します。Dockerのテストrunに便利なイメージです。ターミナルでdocker run hello-wordを実行すると公式のDocker imageがコンテナにダウンロードされ、イメージが実行されます。

```
$ docker run hello-world

Unable to find image 'hello-world:latest' locally
latest: Pulling from library/hello-world
1b930d010525: Pull complete 
Digest: sha256:9572f7cdcc2963463447a53466950bc15a2d1917ca215a2f
Status: Downloaded newer image for hello-world:latest

Hello from Docker!
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
    (amd64)
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash

Share images, automate workflows, and more with a free Docker ID:
 https://hub.docker.com/

For more examples and ideas, visit:
 https://docs.docker.com/get-started/
```

#コンテナの情報を確認する
docker infoコマンドでDockerの情報が確認できます。

```
$ docker info
...
Server:
 Containers: 1
  Running: 0
  Paused: 0
  Stopped: 1
 Images: 1
...
```

これでDockerがインストールされ無事に起動したことが確認できました。
Mac Chromeでフォント設定を「カスタム」に戻す方法

## はじめに
MacOSをCatalinaにアップグレードした後、Google Chromeで開いた一部のサイトのフォントが明朝体表示になってしまう問題が発生したことは記憶に新しいですが、現在携わっているサービスでこの件に関するお問い合わせをいくつかいただき、対応することになりました。
しかし、私の端末は既に[こちら](https://mono96.jp/apple/mac/39375/)のサイトなどを参考にフォント設定を修正しており、しかもChromeの設定からはデフォルト設定である「カスタム」には戻せないんですよね。
これでは対応しても自端末で検証することができず不便です。
それでもなんとかしたのでその方法を共有しておこうと思います。

## 方法
※環境によって差分がある可能性があります

1. Google Chromeを閉じる

2. Finderで「~/Library/Application Support/Google/Chrome/Default/」を開く

3. 「Preferences」というファイルをテキストエディタで開く

4. `"webkit":{"webprefs":{"fonts":{"fixed":{"Zyyy":"Osaka"},"sansserif":{"Zyyy":"Hiragino Sans"},"standard":{"Zyyy":"Hiragino Mincho ProN"}}}}`というような箇所があるので文字列検索などで探す(これは個々人のChromeへの設定で変わってくると思います)
5. 修正したいフォント種類を`{"Zyyy":""}`に変更する
   (私の今回の対応では`"sansserif":{"Zyyy":"Hiragino Sans"}`を`"sansserif":{"Zyyy":""}`に変更しました)

以上！

## 終わりに
ちなみに本題の明朝体対応ですが、こちらの記事が大変参考になりました
[Mac Catalina WEBでのヒラギノフォント表示問題について考えたメモ](https://chaika.hatenablog.com/entry/2019/10/29/083000)
[JavaScript] Submit without submit button

submit ボタン無しで javascript から submit するYO!

```.html
<style>
  textarea {
    vertical-align: top;
  }
</style>

<form id='inputs'>
  <p>
    <label for='name'>Name</label>
    <input id='name'>
  </p>

  <p>
    <label for='content'>Content</label>
    <textarea id='content'></textarea>
  </p>
</form>

<script>
  // Meta + Enter で submit しますねん
  inputs.onkeydown = e => {
    // Meta + Enter で処理する
    if (e.key != 'Enter' || !e.metaKey) return;

    // フォーム (HTMLFormElement) を得る
    const form = e.currentTarget;

    // 空の Event を作る
    const form_event = document.createEvent('HTMLEvents')

    // Event 初期化 (submit 機能。イベントチェーンを浮上。キャンセル可)
    form_event.initEvent('submit', true, true);

    // イベントを dispatch できたら……
    if (form.dispatchEvent(form_event)) {
      // submit() メソッドを使える
      form.submit();
    }
  }
</script>
```
`createEvent()` の `HTMLEvents` ってのがよく分からない。
「[取り得るイベント型は "UIEvents", "MouseEvents", "MutationEvents", "HTMLEvents" のいずれかです](https://developer.mozilla.org/ja/docs/Web/API/Document/createEvent)」で submit に関するコトだから、 `HTMLEvents` なのかなあ、と

あと `dispatchEvent()` も、どうしてこれでうまくいくのか説明できないorz
初心者によるプログラミング学習ログ 218日目

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

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

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

218日目は

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>218日目<br>・Vue.jsでアプリ作成講座<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><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/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1220075339465932801?ref_src=twsrc%5Etfw">January 22, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Next.jsの環境変数でハマったのでメモ

Next.jsアプリケーションをDocker化して、複数環境にデプロイする際の環境変数の扱いでハマったのでメモ。

## tl; dr
- Next.jsでは、build時と実行の両方で使用できる環境変数と実行のみ使用できる環境変数が別途定義できる

## 前提
- Next.jsアプリケーションをDocker化してデプロイしている
- 本番とステージング環境で同じDockerイメージを使っている（環境変数でapiの接続先を変更する）

next.config.jsはこちら

```javascript

//next.config.js

module.exports = {
  env: {
    API_URL: process.env.API_URL || "https://stg.hogehoge.api.com",
  }
};
```

## 問題の概要
実行時に、環境変数を下記のように定義した。

```
API_URL=https://hogehoge.api.com
```

しかし、アプリケーションに読み込まれている環境変数は `API_URL` は `https://stg.hogehoge.api.com` になっていた。

## なぜか
`next.config.js` 内の `env` config はbuild timeの環境変数を定義する設定だったことが原因。
build時には環境変数を渡していなかったため、 `process.env.API_URL`が `undefined`になり
`API_URL` にはデフォルト値の `https://stg.hogehoge.api.com` が使われていた。

```javascript

//next.config.js

module.exports = {
  env: {
    API_URL: process.env.API_URL || "https://stg.hogehoge.api.com", //←のデフォルト値が使われてしまっていた
  }
};
```

## 解決方法
実行時に環境変数を読み込める `publicRuntimeConfig` を使用すれば解決する。

```javascript

//next.config.js

module.exports = {
  publicRuntimeConfig: {
    // Will be available on both server and client
    API_URL: process.env.API_URL || "https://stg.hogehoge.api.com",
  },
};
```

アプリケーション内で使い方

```javascript

import getConfig from 'next/config'

// Only holds serverRuntimeConfig and publicRuntimeConfig
const { publicRuntimeConfig } = getConfig()

console.log(serverRuntimeConfig.API_URL)
```

### 注意
`publicRuntimeConfig` に依存するページは、 `getInitialProps` を使用して `Automatic Static Optimization` の対象から外す必要がある。

#### Automatic Static Optimizationとは
https://nextjs.org/docs/advanced-features/automatic-static-optimization
Q16.特定のセルにジャンプするには？

今回は特定のセルにジャンプする方法を考えていきます。
例えば、情報をたくさん書いてあるシートだとスクロールして追っていくのが
手間になる時とかありますよね。
わりと簡単に実装できてあると便利だったりします。

というわけで、今回は以下ようなファイルにジャンプを実装していきます。

![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560479/141eadb9-d7e1-c2ee-adc6-811f62e94532.png)



具体的な内容は、B列にある名前を選択すると、その名前の人のシートへジャンプするという
マクロです。今回は合わせて、図形を配置して、そこにマクロを登録してみます。
こうすることで、ボタン一つで対象のシートへ飛ぶことができます。



###■ポイント
まずは、メインであるジャンプの例は以下のとおりです。
Application.Goto Reference:=Worksheets("Sheet2").Range("A1")

これ、シート2のA1セルへジャンプすることができます。

あとは、選択しているセルの情報を取得する必要がありますね。
その後、シート名と取得した値が一致していることを判断できれば、
指定のシートへジャンプすることができますよね。


###■回答
```VB
Sub Q16_Answer()
    Dim ws As Worksheet
    For Each ws In Worksheets
        If ws.Name = ActiveCell.Value Then
            Application.Goto Reference:=ws.Range("A1")
        End If
    Next ws
End Sub
```

###■解説

今回は、シートの名前とB列に記載している名前が一緒ということに着目して、
マクロをつくっています。

ワークシートを格納する変数を宣言して、ForEachでループさせています。
ws.Nameには、左のシートから順にシート名が格納されていきます。

現在、選択しているセルの値は、ActiveCell.Valueから取得することができます。

あとは、条件に一致したらそのシートのA1セルへ飛ぶ記述するだけです。
以下の記述です。
Application.Goto Reference:=ws.Range("A1")


各データシートに全体シートへ戻るようなジャンプボタンを設置すると
さらに利便性が上がりますね。


マクロができたら、以下のように図形を配置して右クリックから
マクロを登録できます。
![16-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560479/03b92c1d-5c81-838b-4cb3-b27307875c0f.png)


マクロが登録できたら、飛びたい人の名前のセルを選択して、図形をクリックしてみましょう。
無事に対象のシートへジャンプすることができるはずです。
Entity Framework Coreでクラスをメンバとして扱う方法

# はじめに

日頃からEF Coreを多用しているじゅううんです。

ちょっとハマったことがあったので備忘程度に書いておきます。

# コードファーストのマイグレーションが通らない

以下のようなクラスでコードファーストマイグレーションを行おうとしました。

```CSharp
public class Person
{
  public int Id { get; set; }
  public GeoCoordinate Position { get; set; }
}

public class GeoCoordinate
{
  public double Latitude { get; set; }
  public double Longitude { get; set; }
}
```

理想としてはこういうテーブルができてほしい

|カラム名|型|
|---|---|
|Id|int|
|Position_Latitude|double|
|Position_Longitude|double|

が

```PowerShell
> Add-Migration init
The entity type 'GeoCoordinate' requires a primary key to be defined.
```

できない

## なぜ

1. EFがGeoCoordinateを外部キーとして認識
2. テーブルを作ろうとする
3. `[Key]`属性がないので主キーが見つからないとエラーが出る


# 解決策

```CSharp
public class GeoCoordinate
{
  public double Latitude { get; set; }
  public double Longitude { get; set; }
}
```

これを

```CSharp
[Owned]
public class GeoCoordinate
{
  public double Latitude { get; set; }
  public double Longitude { get; set; }
}
```

とするだけです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172491/446e98f2-2a98-b5c2-baad-aca56e2eba66.png)

できました。

おわり。
【Ruby】mapメソッドのつかいかた(+別メソッドとの組み合わせの例など)

自己整理&備忘録です。

#mapメソッドとは
mapメソッドとは、**「配列の要素それぞれに対して一定の処理を行って、新しい配列をつくるメソッド」**とされる。

　
基本的な型

```
配列.map { |変数| 実行させたい処理 }
```

名称は異なるが`collectメソッド`もmapと同じ動きをする。


#つかいかた（例）

##1. 数式

```ruby:sample_1.rb

x = [0, 100, 500]
y = x.map { |x| x * 2 }
p y

#=> [0, 200, 1000]
```


##2.mapの要素にメソッドを与える（よく見る形）

基本の型

```
オブジェクト名.map(&:メソッド名)
```

例

```rb

sports = ["BASEBALL", "SOCCER"]
p sports.map(&:downcase) 

#=> ["baseball", "soccer"]
```


#mapとmap!の違い
`map` 　→　元の値に対して影響を与えない
`map!`　→  元の値を書き換える

```rb
fruits = ["apple", "banana", "orange"]
p fruits
p fruits.map(&:upcase)
p fruits
p fruits.map!(&:capitalize)
p fruits

# 出力結果(4つ目のmap!後に元のfruitsを出力すると上書きされている)
["apple", "banana", "orange"]
["APPLE", "BANANA", "ORANGE"]  
["apple", "banana", "orange"]
["Apple", "Banana", "Orange"]
["Apple", "Banana", "Orange"] 
```




#eachメソッドとの違い

新しい配列を作るので、空の配列`array = []`を作らずに書くことができる。

例.配列の頭文字の大文字にしたいときの`each`と`map`の違い

```rei.rb

fruits = ["apple", "banana", "orange"]

出力結果（理想形）

["Apple", "Banana", "Orange"]
```
　
`each`のとき

```each_ver.rb

fruits = ["apple", "banana", "orange"]
fruits_ini = []
fruits.each do |frt|
  fruits_ini << frt.capitalize
end
p fruits_ini

#=> ["Apple", "Banana", "Orange"]
```
　
`map`のとき

```map_ver.rb

fruits = ["apple", "banana", "orange"]
p fruits.map(&:capitalize)
#=> ["Apple", "Banana", "Orange"]
```

#参考
[Rubyのmap, map!メソッドの使い方](https://uxmilk.jp/21695)
[Ruby mapメソッドについて](https://qiita.com/ecoyamas/items/07c9174d307e1ea66361)
[【Rails入門】mapメソッドを完全攻略!配列操作の基礎を学ぼう](https://www.sejuku.net/blog/58958)
1on1での心理的安全性のアンチパターン

#1.概要
はじめに「[1on1での心理的安全性の高め方](https://qiita.com/momotar47279337/items/2db4f1d54e3d3cde68e5)」を記載いたしました。次はそのアンチパターンとなる内容について記載したいと思います。

「1on1がうまくできない」、と思っている方は概ね以下のことを行っているのではないでしょうか？

- **吊し上げ**
- **ダメ出し**
- **説教**
- 事務報告
- 進捗確認

1on1とは本来、相手の話を聞きながら相手の課題を探す**「傾聴」**と、どのようにすれば相手が育つのかフォローする**「コーチング」**を行うことが基本であると考えています。

もし、仮に上記の太字となっている3つのような状況であれば、それは相手を育てているというより、相手を貶めることを実施していることになります。

そんな1on1を実施している場合、当然相手の方から拒否されたり、話が続かなくなったりします。

#2.よくあるアンチパターン
1on1でよく失敗している人は**「これまでの自分の経験」**をもとにして会話を行っていることが多いように見えます。

つまり、**「自分はこうやって育ったのだからお前もこうやれば育つ」**、という経験側に基づいて実施しているということです。

残念ながら、その人が育つかどうかはきちんとその人を見て判断しないといけません。1人1人が違うように、**育ち方も1つにまとめることはできない**からです。

もし経験則から実施して失敗した場合、**「自分は正しい方法をしているのに失敗するのはお前が悪い」**、と考えがちになります。その結果、上記で示した**「吊し上げ」**、**「ダメ出し」**、**「説教」**といった方向に進んでいきます。



#3.1on1のアンチパターン
アンチパターンとなる行動を細かくまとめると以下のようになります。

- **どうしてできていないの**、といった説教を行う

相手の能力や状況が見ていない場合、よくある発言です。この場合、どんな回答をしても基本**「言い訳するな！」**と返されます。
⇒最終的に相手は何も言えなくなります。

- **私はあなたにこうなってほしいの**、といった願望ばかりしゃべる

自分の思いを中心に語る場合、よくあるパターンです。言っている側は**良かれと思って**発言していますが、相手の課題間とずれていることがほとんどです。
⇒私より自分の意見が大事なんだ、と思われます。

- 聞きたくない話をされたら、**それを聞くな！**という

どこまで聞いていいものかわからないため、相手が踏み込んだ意見を言うことがあります。何か地雷であることを示すメッセージを出せばいいのですが、**相手が示さない場合が多いです**。
⇒怒らせないように何も言わなくなります。

- **それはお前が間違っている！**と相手を否定する

自分が正しいと思っている場合、よく言ってしまうセリフです。このセリフを言う人は、**大抵フィードバックをしないので、相手は何を間違えたのかわかりません**
⇒どうすればいいのかわからなくなり、何も言えなくなります。


- **こういったことをお願いします！**と依頼があったら拒否する

自分だけではどうしようもない場合、頼りたくもなります。1on1中に頼ってきた場合、「どうしても助けてほしい」、と思っている場合が多いので、それを拒否すると次から依頼が来なくなります。
⇒何をお願いしても無駄なんだな、と思われます。

- **なんでこいつはこうなの？**と相手の人格を否定する

相手のことを理解できない場合、言ってしまうセリフです。大抵**相手のこと何も聞かない、もしくは知ろうともしない**ため発生します。
⇒自分自身を守るために、相手は何もしゃべらなくなります。

- **～という感じです⇒感じってどういう意味？**と言葉尻を否定する

相手のちょっとした言動や動作が気になり、細かいことを指摘するパターンです。相手の癖であることが多いので、指摘し始めると**粗探し**につながります。
⇒何度も否定されるので、最終的に何もしゃべれなくなります。

- **それは目標ではない**、と相手が立てた目標を否定する

1on1中に目標管理の話をすることもあると思いますが、それを**全否定する**パターンです。相手が目標の立て方をわからないのに実施させ、期待と違うと発生します。
⇒何も目標を立てなくなります。

- **それは我慢しろ！**と相手に我慢を強いる

自分は耐えてきたんだから、と思っていると言ってしまうセリフです。自分は耐えたからいいことがあった、という経験側から来ていますが、**問題の先送り**になっています。
⇒1on1が我慢の時間になります。


#4.まとめ
1on1で失敗している人のほとんどは**「自分を中心」**に行ってい人が多いです。つまり、「自分がこうだからいい」、「自分はこうやって成功した」、「自分の意見に逆らうな！」等…

そして成功している人のほとんどは**「相手をきちんと見て」**います。つまり、「この人はどういう価値観何だろう」、「どうすればこの人は育つのだろう」、「今どんな問題を抱えているのだろう」等…

ぜひ自分中心の話題から、相手中心の話題に移ってほしいを思います。
LaravelでUncaught domexception: failed to execute '***' on 'element': ',' is not a valid attribute name.を吐き出したときに確認したこと

#Laravelにてアプリを作成していたところコンソールに下記のようなエラーが発生

```
Uncaught domexception: failed to execute 'setattribute' on 'element': ',' is not a valid attribute name.
```

簡単に訳すと「属性名に','(カンマ）は使えないから'setattribute'は実行できないよ！」
と怒られてしまってます。

#考えたこと
コンソールのエラーだからJavaScriptのファイルに不備があるのか？
![スクリーンショット 2020-01-23 午後5.36.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483590/d5ad67f2-7801-feb0-f557-6346c6d72aac.png)

右側の**app.js:41954**から該当エラー個所をみてみるが何もおかしいところはなさそう。
そもそも","(カンマ)がその行にない...

## 「属性名」に異常？つまりviewファイル側におかしいところがあるのか？
```index.blade.php
      <li>
        <a href="{{ action('WordsController@show', $word )}}">{{ $word->en }}</a>
        <a href="">{{ $word->ja }}</a>
        <a href="#", data-id="{{ $word->id }}">[×]</a>
        <form method="post", action=" {{ url('/words', $word->id) }} " id="form_{{ $word->id }}" >
        {{ csrf_field() }}
        {{ method_field('delete') }}
        </form>
      </li>
```
よーくみると

4行目のhref="#"の後ろのカンマ...
5行目のmethod="post"の後ろのカンマ...

**いりません！！！**

![スクリーンショット 2020-01-23 午後5.36.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483590/28dfe159-fe56-d5f1-56fd-1cf299bec2ea.png)


これを消したらエラーも消えました。

#おわりに
認証機能を追加するべく、Laravel6のuiパッケージを入れ込んでからこのエラーがで始めたので、色々と考え込んでしまったけれど、結局は小さなミスでした。
直前までUIも問題なく動いていたのも時間を食ってしまいました。
しかしながら探しても日本語の記事が全然ない...
同じようなことが起こった方と自分への忘備録として残しておきます。

##参考リンク
https://github.com/OnsenUI/OnsenUI/issues/169
Mac VirtualBoxをインストールするときに「インストールできませんでした」と出た時の話

# 目的

- VirtualBoxをインストールしようとしたときにでたエラーを解決した話をまとめる

# 情報

- 機種
    - MacBook Pro (15-inch, Late 2011)
- OS
    - High Sierra 10.13.6
- VirtualBox
    - VirtualBox 6.0.14 (released October 15 2019)  

# 解決方法

1. 設定を開く。
1. セキュリティとプライバシーを開く。
1. 「開発元"Oracle America, Inc."のシステムソフトウェアの読み込みがブロックされました。」の横の「許可」をクリックする。
1. 画面左下の「変更するには鍵をクリックします。」の横の鍵マークをクリックする。
1. もう一度インストールしてみる。