OmniAICreator/Qiita-1.07M huggingface dataset:
three.jsでレインボーロードを走ってみた

## 作ったもの
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="cahid0814" data-slug-hash="NWPxQQP" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="rainbowroad run">
  <span>See the Pen <a href="https://codepen.io/cahid0814/pen/NWPxQQP">
  rainbowroad run</a> by cahid (<a href="https://codepen.io/cahid0814">@cahid0814</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
## 事の発端
three.jsを触っている時に「道路を走っている描写作れそう！レインボーロード作れるじゃん！」
と思いついたので勉強がてら作ってみることに。

## 簡単な解説
それらしく見えれば良いなーくらいで作ってますので作りは雑です。

### 道路
```js
createRainbowRoad(15.5);
createRainbowRoad(-15.5);
createRainbowRoad(46.5);
createRainbowRoad(-46.5);
function createRainbowRoad(xPosition) {
    let panelGeo = new THREE.PlaneGeometry(30,30,0);
    let panelDistance = 800;
    let group = new THREE.Group();
    let k = 0;
    let colorArray = [
        0xf80000,0xb878f8,0x3058f8,0x00e0a8,0x00f800,0xf8f800,0xf87800
    ];
    for (let i = 0; i < 150; i++, k++) {
      let panelMate = new THREE.MeshBasicMaterial( { color: colorArray[k],specular: 0xffffff, side: THREE.BackSide } );
      let panelMesh = new THREE.Mesh( panelGeo, panelMate );
      let radian = (i / 150) * Math.PI * 2;
      panelMesh.position.set(0, panelDistance * Math.cos(radian), panelDistance * Math.sin(radian));
      panelMesh.lookAt(new THREE.Vector3(0, 0, 0));
      if(k === 6) { k = 0; }
      group.add( panelMesh );
    }
    group.position.x = xPosition;
    scene.add(group);
}
```
パネルを虹色順に色を指定し、面を原点に向けて円状に量産。
マテリアルの設定をbacksideにして、片面だけ見せる事で地平線に向けて走っているように。

その後円状になったパネルを左右にずらして4つ作成。


### 星空
```js
createStarField();
function createStarField() {
    let starGeo = new THREE.Geometry();
    for (let i = 0; i < 50000; i++) {
        starGeo.vertices.push(
            new THREE.Vector3(
                3000 * (Math.random() - 0.5),
                3000 * (Math.random() - 0.5),
                3000 * (Math.random() - 0.5)
            )
        );
    }
    let starMate = new THREE.PointsMaterial({
        size: 2,
        color: 0xddddbb
    });
    let starMesh = new THREE.Points(starGeo, starMate);
    scene.add(starMesh);
}
```
星空っぽく見えるようにポイントを量産して、ランダムに配置。

### カメラの動き
```js
run();
function run() {
    runSpeed += 0.2;
    let radian = (runSpeed * Math.PI) / 180;
    camera.position.y = 830 * Math.sin(radian);
    camera.position.z = 830 * Math.cos(radian);
    camera.position.x = 30 * Math.sin(radian * 8);
    camera.rotation.x = 1.2 - (runSpeed * 0.017453286);
    requestAnimationFrame(run);
    renderer.render(scene, camera);
}
```
カメラを道路から少し離れた箇所から円状に動かし、円の形に沿わせるようにカメラの向きを調整。
走ってる感を出すためにカメラの位置を左右に揺らす。

## 作った感想
three.jsは単純なものなら簡単に作れて楽しい反面、
ちゃんとやろうとすると数学的な知識や計算、空間把握が求められて難しい・・・

普段はhtmlとcssばかり書いているので、少しずつ出来ること増やしていこうと思います。

[:christmas_tree: FORK Advent Calendar 2019](/advent-calendar/2019/fork)
:arrow_left: 12日目 [サーバレスの時代だけどハードウェアの話](/momoken/items/29376e0c7ef4a37d2b88) @momoken
:arrow_right: 14日目 @dashimakitamago さんお願いします。
JavaScriptのイベント指定 〜括弧()をつける？つけない？〜

## 概要
ここに関数があります。

```javascript:
function func() {
  console.log('hoge');
};
```

通常は

```js:
func();
```

`関数名()`のような形で関数を実行するのに、



`window.onload`などイベントハンドラを利用して関数を実行する場合は、

```js:
window.onload = func;
```
`関数名`のみで書くのはなぜなんでしょう。


## イベント処理の指定方法
JavaScriptのイベント指定には3種類の方法があります。

**(1) addEventListener()によるイベントリスナの指定**
**(2) オブジェクトに指定するイベントハンドラ**
**(3) HTMLタグ属性に指定するイベントハンドラ**

### （1） addEventListener()によるイベントリスナの指定

```js
window.addEventListener('load', func);
```
第1引数にイベントタイプ、第2引数に実行される関数（コールバック関数）を指定しています。
上記例では`load`イベントが検知されると同時にコールバック関数が実行されるので、`func`に`()`はつけません。

もし第2引数を`func()`のように括弧をつけて書いてしまうと、JavaScriptが読み込まれた時点で`func関数`が実行されてしまいます。
（loadよりも早いタイミングで関数が実行される。）

```javascript:
// これはNG
window.addEventListener('load', func());

// これはOK
window.addEventListener('load', function() {
  func();
});
```

### （2） オブジェクトに指定するイベントハンドラ
```js
window.onload = func;
```

これは`window`オブジェクトの`onload`プロパティに`func`という関数を代入しますよ、という意味です。
`window.onload`メソッドはすべてのDOMツリー構造及び関連リソースが読み込まれたあとに**自動で発生**するので、`func`関数に関数実行を意味する**`()`をつけないのが正しい**です。

もし`window.onload = func()`のように書いてしまうと、JavaScriptが読み込まれた時点で`func`関数が実行され、その戻り値が`window.onload`メソッドに代入されるだけとなってしまいます。

```javascript
// これはNG
window.onload = func();
```


### （3） HTMLタグ属性に指定するイベントハンドラ

```html:HTML
<input type="button" id="button" onclick="func()">
```

html要素の属性を用いて`onclick="func()"`とイベントハンドラを指定することができます。
ただ(1)、(2)の説明だと`func()`と関数に括弧がついているので、htmlが読み込まれた時点で関数が実行されてしまうのでは？と疑問に思っていました。

調べたところブラウザが属性を読みとると、その内容から本体を含むハンドラ関数が作成されるようです。
つまりこの記述は以下と同じ意味になります。

```javascript:JS

button.onclick = function() {
  func(); // ここにハンドラ属性に指定した値がはいる
};
```
ハンドラ関数の中身に属性値がそのまま入るので、括弧がなければ関数が実行されません。
よってhtml属性に指定する場合は`関数名()`とする必要があります。

```html:HTML
<!-- こう書いてしまうと、 -->
<input type="button" id="button" onclick="func">
```
```javascript:JS
button.onclick = function() {
  func; // func関数が実行されない
};
```

## どのイベント指定を使えば良い？
(3)のようにHTMLとJavaScriptを混在させる書き方は好ましくありません。

**(1)addEventListener()**と**(2)オブジェクトに指定**だと、どちらかといえば**(1)addEventListener()**推奨のようです。

**理由**
・必要に応じて`removeEventListener()`でイベントハンドラコードを削除できる
・要素に同種のリスナーを複数追加できる

```javascript:（1）addEventListener()によるイベントリスナの指定
// 同種のリスナーを複数追加できるので、
// console.log('hoge')、console.log('fuga')の両方実行される。

window.addEventListener('load', function() {
  console.log('hoge');
});

window.addEventListener('load', function() {
  console.log('fuga');
});
```

```js:（2）オブジェクトに指定するイベントハンドラ
// 上書きされて最後に書いたイベントのみ実行されるので、
// console.log('fuga')のみ実行される。

window.onload = function(){
  console.log("hoge");
};

window.onload = function(){
  console.log("fuga");
};
```


## 最後に
`window.onload = func;`に括弧がいらない理由を知らなくてもJavaScriptは書ける。
けど、知ってたらもっと楽しいJavaScript。


## 参考まとめ
- [EventTarget.addEventListener() - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener)
- [DOM on-イベントハンドラ - 開発者ガイド | MDN](https://developer.mozilla.org/ja/docs/Web/Guide/Events/Event_handlers)
- [イベントの紹介 - ウェブ開発を学ぶ | MDN](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Events)
- [ブラウザイベントの紹介](https://ja.javascript.info/introduction-browser-events)
PostgreSQLで\dを実行した際にcolumn c.relhasoids does not existというエラーが出てテーブルの詳細がみれない


## TL; DR
起動しているサーバーとクライアント側でPostgreSQLのバージョンが違うため。
psqlのバージョンをサーバーのバージョンと合わせる[^1]。

## 詳細
テーブルの詳細を見ようと、`\d`を実行したところ以下のエラーが出ました。
これはサーバー側のPostgreSQLのバージョンが12なのに対してクライアント側のバージョンが11だったためです[^2]。


```
project=# \d table_name
ERROR:  column c.relhasoids does not exist
LINE 1: ...riggers, c.relrowsecurity, c.relforcerowsecurity, c.relhasoi...
```

[Homebrewを用いてPostgreSQL 12をインストールする方法](https://qiita.com/hayashi-ay/items/065b319ab9c0cb3a74cd)

[^1]: https://stackoverflow.com/questions/58461178/how-to-fix-error-column-c-relhasoids-does-not-exist-in-postgres

[^2]: https://postgresql.verite.pro/blog/2019/04/24/oid-column.html
最新技術の情報キャッチアップを集約して効率的に

本記事は、[サムザップ Advent Calendar 2019 #1](https://qiita.com/advent-calendar/2019/sumzap1) の12/11の記事です。

# はじめに
技術関連の情報を皆さんはどのようにしてキャッチアップしていますか？
Twitter？ブログ？他のSNS,メディア？
いろんなメディアをネットサーフィンして情報キャッチアップするのって大変じゃないですか？？

ってことで僕がやっている技術関連の情報収集方法を参考までに紹介したいと思います。
で、使うのが『Slack』

『Slack』と聞いた時にイメージするのは、コミュニケーションツールとしてのイメージが強いかと思います。

今回僕が紹介するのは、個人利用でのSlackを活用した情報キャッチアップの紹介をしたいと思います。
ただ、僕がUnityエンジニアなので、Unity寄りの話になっている事は予めご了承ください。
Tipsとしての情報は他に応用が効くかと思います。

# RSSでSlackに通知する
RSSで複数のメディアの新着通知をSlackへ集約して受け取ることができます。
その方法は公式が説明してくれていますのでこちらを参考に。
https://slack.com/intl/ja-jp/help/articles/218688467-add-rss-feeds-to-slack
下記にUnityエンジニアなら最低限拾っておくべき情報元(ブログなどのメディア)のRSSを置いておきます。
## Unity公式関連
* 最新の Unity のフルリリース
URL:https://unity3d.com/jp/unity/
RSS:https://unity3d.com/jp/unity/releases.xml

* 最新のUnityベータ版リリース
URL:https://unity3d.com/jp/unity/beta/
RSS:https://unity3d.com/jp/unity/beta/latest.xml

* Unity Technologies Blog
URL:https://blogs.unity3d.com/jp/
RSS:https://blogs.unity3d.com/jp/feed/

## エンジニアブログ関連
* テラシュールブログ
URL:http://tsubakit1.hateblo.jp/
RSS:http://tsubakit1.hateblo.jp/feed

* コガネブログ
URL:http://baba-s.hatenablog.com/
RSS:http://baba-s.hatenablog.com/feed

* Unity AssetStoreまとめ
URL:http://www.asset-sale.net/
RSS:http://www.asset-sale.net/feed

* アマガミナブログ（これはおまけ）
URL:https://amagamina.jp/
RSS:https://amagamina.jp/feed/
（Shaderの記事がとても参考になったので、気になる枠で最近追加しました…w）
その記事はこちら
https://amagamina.jp/unity-shader/

## ゲーム関連
4Gamer
URL:https://www.4gamer.net/
RSS:https://www.4gamer.net/rss/index.xml
上のRSSだと全部取ってきてしまいます。
提供してくださっているRSSで自分が欲しい情報だけをピックアップできるので、参考までにどうぞ。
https://www.4gamer.net/rss/rss.shtml

## 他ブログごとのRSS(参考まで)
「このブログのRSSがわからない！」という方のために参考程度に主要ブログのRSSはピックアップしておきました。
参考程度に活用ください。
### はてなブログ
```
http://ブログのドメイン/feed
or
http://ブログのドメイン/rss
```

### アメブロ
```
http://rssblog.ameba.jp/【アメーバID】/rss.html
or
http://rssblog.ameba.jp/【アメーバID】/rss20.xml
```
### FC2
```
http://【ブログURL】/?xml
```
### ライブドア
```
http://blog.livedoor.jp/【ライブドアID】/index.rdf
```

# Twitter投稿内容をSlackに通知する
こちらも方法は公式で紹介されているので省略。
https://slack.com/intl/ja-jp/help/articles/205346227-Twitter-%E3%81%A8-Slack-%E3%82%92%E9%80%A3%E6%90%BA%E3%81%95%E3%81%9B%E3%82%8B
下記にUnityエンジニアなら最低限拾っておくべき情報元のアカウントを置いておきます。

* UnityAssetStoreJapan
URL:https://twitter.com/AssetStore_JP

* ユニティ・テクノロジーズ・ジャパン
URL:https://twitter.com/unity_japan

# ToDo管理もSlackで
ToDo管理は人それぞれかと思いますが、僕はTrelloを連携させています。
Slackからタスク作れるような環境にすることで、忘れないうちにToDoタスクとして切っておくことができます。
Trelloは(個人で利用する分には申し分ない機能が)無料で利用できるので、個人利用する場合はオススメです。
Trelloの連携方法も公式が紹介していますのでそちらを参考に。
https://slack.com/intl/ja-jp/help/articles/231967387-trello-for-slack

# まとめ
"ビジネス向けチャットツール"としての認知度が高い「Slack」ですが個人利用でも幅広く使えると思ったので、情報集約ツールとしての紹介をしました。
僕はまだ試してないですが、IFTTTだったりGoogleCalendarとの連携もあるようです。
Slackに集約することで、Slackを見れば全てが賄えるように環境を僕は整えています。
こうすることでTwitterはほとんど見ることなく、必要な情報はSlackの方に集約され、かつ通知が飛んでくるので情報が漏れにくいです。
個人利用としてもSlackは優秀なので、どんどん活用して開発周りのより良い環境作りにもを向けていきましょう！


明日は @yos316 さんの記事です。
家の環境（温度・湿度・大気圧）をAWSに蓄積して分析してみるの巻　その３

# 前回まで
[家の環境（温度・湿度・大気圧）をAWSに蓄積して分析してみるの巻　その１](https://qiita.com/KG_/items/c4a50a072f992dde78a3)
[家の環境（温度・湿度・大気圧）をAWSに蓄積して分析してみるの巻　その２](https://qiita.com/KG_/items/aa5101e2656678899c51)

# 今回の内容
デバイスからpublishしたデータをS3に送るところまでの設定をやります。

# IoT Coreでルールを作成します。
1. `ACT > ルール > ルールの作成`を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411926/997c6806-5e14-e025-2d59-24c290f1a84d.png)

1. 名前と説明を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411926/a89d21cd-d150-e806-e994-aaa29ece604a.png)

1. `ルールクエリステートメント`で、どのトピックにおいてルールをトリガーさせるか指定します。FROM句にトピック名を記載します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411926/72f78935-193d-4414-371a-0b7d91377229.png)

１． アクションの設定をしていきます。今回はS3へデータを送る設定をします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411926/06e125cc-a06f-f264-c845-d50cd36a59d5.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411926/c6dd89ec-e551-a1b4-72be-018612fac83c.png)

S3を選択、`アクションの設定`を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411926/139c5afc-f4d7-d98a-1665-fd997d08d06c.png)

今回は`新しいリソースを作成する`からS3のバケットを新しく作って設定しました。
キーは[こちら](https://recipe.kc-cloud.jp/archives/10737)を参考に設定しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411926/0b743f39-b78b-ce1d-9ee9-3b0be7287cf7.png)

1. `ルールの作成`を選択し、設定を終えます。

# 設定後の動作確認
デバイスの電源を入れて、publishを始めます。
↓のとおり、データがS3に溜まりはじめました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411926/e9534614-0819-3df9-803f-a3e2380afe11.png)

データをダウンロードして開き、中身がpublishしたデータであることを確認しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411926/a928ddb3-153f-4c96-078a-f1d90f994613.png)
Google Cloud Buildでx86/amd64以外のアーキテクチャ用のコンテナイメージを作る

# はじめに
Raspberry PiでもCPUやメモリの性能が向上して、コンテナを動かしたりしやすくなってきました。
単純にDockerを動かすだけではなく、Kubernetesでクラスタを組むことも、事例として見かける機会が増えました。
自分も、コンテナ化したアプリケーションをRaspberry Pi 3B上で動かしています。

動かす取り組みの中で、Raspberry Pi用のコンテナイメージの作り方について試行錯誤した結果、Cloud Buildを使って作れるようになったので、ポイントを紹介しようと思います。
この方法は、Raspberry Piに代表されるARM系以外にも(おそらく)応用可能です。

（ちなみに、qemu-user-staticパッケージをインストールしたり、DockerのBuildxなどが使えればそれでも実現できるので、今回はCloud Buildで、という制約があるものとします。）

# ポイント

以下は、ざっくりとした`cloudbuild.yaml`です。

```cloudbuild.yaml
steps:
  - id: 'build'
    name: gcr.io/cloud-builders/docker:18.09.6
    entrypoint: bash
    args:
      - '-c'
      - |-
        docker run --rm --privileged multiarch/qemu-user-static --reset -p yes
        docker build -t gcr.io/${PROJECT_ID}/hoge:latest .
    waitFor: ['-']
images:
  - 'gcr.io/${PROJECT_ID}/hoge:latest'
```

一番のポイントは、 `docker run --rm --privileged multiarch/qemu-user-static --reset -p yes` です。
これにより、他のCPUの命令をQEMUでエミュレーションして実行することができるようになります。

そして、以下はARM用のアプリケーションの`Dockerfile`の例です。

```Dockerfile
FROM arm32v7/python:3.7.5-alpine3.10

WORKDIR /opt/hoge

COPY . /opt/hoge

RUN apk add --no-cache --update tzdata tini

ENTRYPOINT ["/sbin/tini", "--", "python", "main.py"]
```

もう一つのポイントは、`arm32v7`の部分です。公式で提供されているDockerイメージは先頭にアーキテクチャを指定するとそれ用のイメージがpullできるようになっているようです(たぶん)。
これにより、arm32v7(= Raspberry Pi 2, 3向け)のコンテナイメージが作られます。

もし、一番のポイントを実行しなかった場合、以下のように、*exec format error*になります。

```console
Step 4/5 : RUN apk add --no-cache --update tzdata tini
 ---> Running in 765086660a24
standard_init_linux.go:211: exec user process caused "exec format error"
```

arm32v7の部分を、お好きなアーキテクチャに変更すれば、そのアーキテクチャ上で動くイメージが作れると思います。

# 小ばなし
Google Container Repositoryからコンテナイメージを取得する方法はいくつかあるみたいです。
自分はサービスアカウントを使うことにしたのですが、その場合は以下のコマンドで取得できるようになります。

`cat credentials.json | docker login -u _json_key --password-stdin https://gcr.io`

 ※ サービスアカウントのJSONキーをcredentials.jsonとして保存した想定
 ※ pullしてくるリポジトリはgcr.ioを想定, asia.gcr.ioなどの場合はURLを変更すればOK

# おわりに
いかがでしたでしょうか。これでGoogle Cloud Buildでx86/amd64以外のアーキテクチャ用のDockerイメージを作れるようになったかと思います。

Raspberry Piなどでも、コンテナを動かす人が増えたらいいなと思います。
Rustのマクロを可視化するツール railroad

この記事は [Rustその3 Advent Calendar](https://qiita.com/advent-calendar/2019/rust3)の10日目の記事です。空いていたのでちょっとしたツールをご紹介します。

# Rustのマクロについて

Rustのマクロは、Rustの他の要素と比べて変わった文法なので最初は戸惑うかもしれません。しかし、やっていることは「どういう構文にマッチするのかを定義する」「その構文がコンパイル時にどう変換されるか定義する」の2つです。このうち、前者の「どういう構文にマッチするのか」がイメージしやすくなれば、マクロを書きやすくなるでしょう。というわけで、この部分を可視化します。

# railroad

[railroad](https://github.com/lukaslueg/macro_railroad)は、その名の通り鉄道の線路のようにマクロの構文を可視化してくれます。ありがたいことに、Webブラウザで動くデモがありますので、以下から使わせてもらいます。

https://lukaslueg.github.io/macro_railroad_wasm_demo/

試しに、頻繁に使うマクロである`vec!`を可視化してみます。`vec!`の定義は以下の通りです。置換後の内容は今回は関係ないので、`{ ... }`と省略してあっても問題ありません。

``` Rust
macro_rules! vec {
    ($ elem : expr ; $ n : expr) => { ... };
    ($ ($ x : expr), *) => { ... };
    ($ ($ x : expr,) *) => { ... };
}
```

これを上記のサイトのエディタにコピペすると、以下のような画像が生成されます。

![zu1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182229/41ac7d5c-124c-9dbf-4e45-6e36e86e119d.png)

`vec!`の書き方は、値と要素数の組、もしくは要素の繰り返しで最後の","が必要かどうか、の3つに分かれていることが視覚的にわかります。また凡例から、elem,n,xはexpression(式)であることがわかります。

もう少し複雑なものでもいけます。例えば`lazy_static!`なら以下のような定義になります。

``` Rust
macro_rules! lazy_static {
    ($(#[$attr:meta])* static ref $N:ident : $T:ty = $e:expr; $($t:tt)*) => { ... };
    ($(#[$attr:meta])* pub static ref $N:ident : $T:ty = $e:expr; $($t:tt)*) => { ... };
    ($(#[$attr:meta])* pub ($($vis:tt)+) static ref $N:ident : $T:ty = $e:expr; $($t:tt)*) => { ... };
    () => { ... };
}
```

そして生成される画像は以下のようになります。

![zu1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182229/73c288ab-d08b-7e6a-6b30-50fb1f30e39a.png)

# おわりに

以上のようにマクロの構文を可視化することができました。自作のマクロを作成している時や、使い方のよくわからないマクロがあった時もこれでイメージしやすくなると思います。
予測 統計(実践編 単回帰)  Python

勉強のアウトプットとしてやってますので間違ってたりすることがあります。お気軽にコメントして下さい。

今回は前回の記事で「[予測 統計(理論編)](https://qiita.com/banana19980702/items/26b8d9d7be77eaa5511b)」を書きましたが、理論だけではわからないとこもあるとおもうので実際にpythonのライブラリを使って実践していきます。今回は予測の中でも<b>回帰</b>という手法を使って予測をしていきます。

#内容
・モデリングの流れ
・単回帰分析をしてみよう

##モデリングの流れ
①説明変数(x軸)、目的変数(y軸)をあらかじめ決めておく
②データを読み込む
③モデルを格納する変数を準備
④モデル作成
⑤モデルから予測

##単回帰分析をしてみよう
簡単な分析ですが、実際のコードの流れは以下のような感じです。

```python
import pandas as pd
import numpy as np
from matplotlib import pyplot
%matplotlib inline #現行のブラウザ表示
from sklearn.linear_model import LinearRegression as LR #線形回帰を行うクラス

train = pd.read_csv("train.csv") #②のフェーズ、学習データの読み込み
test  = pd.read_csv("test.csv") #②のフェーズ、評価データの読み込み
sample = pd.read_csv("sample.csv") #②のフェーズ　評価データを書き込むサンプルを読み込む

trainX = train["列名"] #説明変数の設定
testX = test["列名"] #説明変数
y = train["列名"] #目的変数の設定 

trainX = trainX.values.reshape(-1,1) #単回帰の場合はデータを整える必要がある
testX  = testX.values.reshape(-1,1) 

model = LR() #回帰モデルの変数を用意 ③のフェーズ

model.fit(trainX, y) #単回帰モデルを作成 ④のフェーズ

pred = model.predict(testX) #testXに予測結果を代入、列名ごとにyの値を与える

sample["代入したい列名"] = pred #予測をサンプルファイルに挿入

sample.to_csv("ファイル名.csv") #データファイルを書きだす

```

<b>※trainとtestの列名は同じでなければ意味がありません。</b>
VuePress で辛いこと

VuePress で一番辛いのは dev ではうまく言っているのに build するとうまく行かないことがあることです。これが一番辛いです。

VuePress に限った話では無く Vue でも同じなのかもしれないのですが、VuePress でしか使ったことがなく状況がわかりません。

本当に雑なのですが、以下、３点、記述いたします。

* build と dev で生成される CSS の優先順位が変わることがあります。現在この問題に対して !important で対処しています。

* components ディレクトリ配下で SFC を定義した時に scoped を付与しないと dev の時は scoped が付与されているような動作をするのですが build の時は scoped が外れた動作をします。


* table タグの中で span を使って色付けすると、build 時に何故か JavaScript が例外を投げ動作しなくなることがある。
プログラミング学習用の【本を選ぶ】時に気を付けるべき事


こんにちは、プログラミング学習中の@[アルト](https://twitter.com/Alto_pytech)と申します。

この記事では、自分がプログラミング学習を本を通じてするにあたり、わたし個人が気を付けている事を述べていきたいと思います。
折角勉強するのなら、効率よく有意義な勉強でありたい！と考えるあなたの役に立てれば幸いです。

#１、そもそも論：自分のレベル感に合った本か見直そう

あなたはプログラミングをする際に、どのような本をチョイスしているでしょうか？
最短距離を走り抜けたいから難しい本から入る！という人も居るかも知れませんが、**基本は自分のレベル感に合ったものをチョイスしておくのがベター**だと私は考えています。
なので、身の丈に合った本を選ぶべきなのです。

ところで”自分のレベル感に合った本”とは一体なんでしょうか？
一言で言うのなら、**文章をすんなり理解できる語彙力・理解度の本**事を指します。

例えば**自分のレベル感に合わない本をチョイスするとこういった事故が起こります。**

１、数文節ごとに何の解説もなく専門用語が飛び出るため、何を言っているのか解らなくなる（語彙力不足）
２、読者がある程度の専門知識を有している事を前提に話が進むので、システムの導入方法や記法などの解説省かれて話が進み解らない部分や解決できない部分が残る（理解度不足）

そしてこの事故に巻き込まれた場合、

１、解らない単語の調査を頻繁にさせられる。
２、問題点をどう解決して良いかわからずに学習の足が止まる
結果、**やる気がもげて勉強が続かなくなる**

そうならない為にも、自分のレベル感に合った本をチョイスするのが大切です。

逆に**自分のレベル感に合った本をチョイスする場合**

１、解らない単語にちゃんと解説が入り、取り残しを喰らわない（自分の語彙力に対応している）
２、具体的な解説が丁寧に入るので、解らないまま取り残しを喰らわない（自分の理解度に合わせて適度な具体性を持った解説を入れてくれる）

この２要綱を守っていれば、理解できない事故に巻き込まれる事はないでしょう。

具体的に本を選ぶときは、内容を１章分くらい読んでみて理解が出来る（わからない部分を丁寧に解説してくれている）のなら買うべきレベルと言えますね。
逆に、解説が回りくどいと感じるのなら、あなたはその本を十分理解しているレベルと言えるでしょう。

さて以下からは具体的な本の選び方の解説です！

#２、本はまえがきを確認して自分に合うかどうか理解してから買おう

まえがきを読めば、少なくともあなたに合う本かどうかすぐに理解できます。
大抵の場合前書きには、

・どんな読者向けの本なのか？（初心者向けか？初心者卒業したい人向けか？プログラミングに嫌気がさしている人向けか？）
・どんな意気込みで本を書いたのか？（理解してほしいのか？正確な事を知ってほしいのか？とりあえず動かす楽しみを理解してほしいのか？）

が解ります。

なお、前書きの時点で難解だと感じた場合、その難しいノリが本文に展開される可能性が高いから避けましょう。
「まえがき≒本の自己紹介」ですから、その時点で文体やら表現やら語彙の使われ方がおかしいなら、あなたにとっての地雷本と言えるでしょう。
~~こういう事前調査をせずに読んだ経済学の解説本の中身が、まえがきもろとも謎の哲学用語まみれで読む事さえままならなくなり千円近くのお金をドブに捨てた事を私は忘れない（涙）~~


#３、本はもくじを確認して大枠を理解してから読もう

本を読む時には、**まずもくじを確認し、全体を理解してから学習を進める**方が、学習の効率にいい影響を与えてくれますし、理解具合もかなり良くなります。
特に新しい技術に挑戦しよう！という時ならなおさらです。

何故なら、目次を見れば、

・どんな順序で解説されるのか？
・どんな技術を使うのか？
・何の話がどこと連結するのか？

が、おおよそ理解できるはずです。

技術というのは何かの技術の連結によってできています。
例えば、for文はfor文だけで独立しているのではなく、classの概念やif文やアルゴリズムといった概念と、密接に連結しているはずです。
その連携が理解できていないまま学習すると、何のためにその技術の勉強をしているのか？が、解らなくなってしまうかと思います。

これは何かの技術書を読む場合においても同じです。
なので、**まずは目次を確認して、どんな技術や話がどんな順番で出て来るのか確認してから**勉強を進めましょう。


さて、ここまでもくじと、まえがきを見るという方法を用いて本の大枠が理解できれば、理解のしやすさも段違いになるはずです。

**個人的なオススメは、本や段落の要素を３つの要素に纏めることです。３つ以上ある場合は、より抽象的に１つに括って何とか３つに抑えましょう。**

人間、一度に何個もの情報が来ると記憶するのに問題が起きますが、概略で３つくらいにまとまっていてくれるのなら理解もスムーズに進むというものです。

「それだと正確な理解に繋がらない」という意見もあるかもしれませんが、細かい部分は後から埋め立てていくように理解すればOKです。
複雑なものは、まず大枠でとらえましょう。

#３、メモは多用すべし

人は忘れる生き物です。想像以上に忘れる生き物です。
なので、メモはどんどん活用しましょう。

適切なメモがあると**忘れた時に思い出す時間対効率と、調べる手間の時間を大幅カット**できます。
つまり、理解を大幅にサポートしてくれる訳です。

なおメモを作る際は、**解らない！となった時に、即座に思い出せるメモ**が良いでしょう。

１、基本はは新しい語彙（単語）を記述する。語彙を理解していれば文章は読めるようになるから。
２、語彙の詳細な解説は「専門書の〇ページ」という情報にしておく。メモは肥大化させない。
３、概念や技術の流れ/繋がりは、図か矢印で表現しておく。何と何が繋がっているのか解りやすくすると理解が深まる。
４、メモは何処でも気軽に取り出せるもの（やり方）にしておく。取り出しにくいとメモ運用が面倒くさくなる。（個人的には[Googleスプレットシート](https://www.google.com/intl/ja_jp/sheets/about/)がオススメ!）

この２点を守っていれば、使い勝手のいい覚え書になります。
学習のサポートにメモは必須です。メモ帳はどんどん使いましょう！

PS:記事の内容が技術の話ではなく、技術を覚える為の話のためQiitaの規約的に大丈夫か確証が持てずにいます。この記事が規約上問題ならば教えていただければ幸いです。
CSSアニメーションと!importantとの優先順位のChromeバグについて（Chrome 83 で修正済）

#!importantが優先される
CSSアニメーションと`!important`とでルールが衝突した場合、`!important`が優先されます。

> The origin of a declaration is based on where it comes from and its importance is whether or not it is declared !important (see below). The precedence of the various origins is, in descending order:
> 　
>
0. Transition declarations [css-transitions-1]
0. Important user agent declarations
0. Important user declarations
0. Important author declarations
0. **Animation declarations [css-animations-1]**
0. Normal author declarations
0. Normal user declarations
0. Normal user agent declarations

> Declarations from origins earlier in this list win over declarations from later origins.
[Origin and Importance | CSS Cascading and Inheritance Level 3](https://www.w3.org/TR/css-cascade-3/#cascade-origin)

#Chromeにはバグがある

**「Chrome 83 で修正された」と、コメント欄で教えていただきました。**

優先順位について、Chromeにバグがあるようです。
https://jsfiddle.net/Lhankor_Mhy/xdgsp2ey/

```HTML
<p>
test
</p>
<p>
test(!important規則があってもアニメーションする)
</p>
```

```CSS
p{
  animation: test 1.2s ease forwards 2s;
}
@keyframes test {
  0% { color: #f00 }
  100% { color: #000 }
}
p{
  color: #00f ;
}
p+p{
  color: #00f !important;  
}
```
Safari特有のモーダルウィンドウのバグと戦った話

Ateam Lifestyle Advent Calendar 2019の14日目は
新卒2年目 株式会社エイチームライフスタイル　名古屋開発部の@kiitanが担当します。

普段はバックエンド（rails）の開発をメインでやっています。
Reactを書き始めてちょうど1年位になります。

## はじめに
画面遷移なしでユーザに選択肢を表示したい。
こんな時よく使われるモーダルウィンドウですよね。
ただSafariにいくつかの罠がありそれを踏み抜いたエンジニアの戦いの記録である。

## 背面のスクロールが止まらない
ios12のSafariでは、モーダルウィンドウ内のスクロールが終わったあと背面がスクロールされてしまう。

検索するとよく出てくるのが `<body>`要素に`overflow: hidden`をつける対策です。
しかしこれだけは裏側のスクロールを止めることはできませんでした。

ここに更に`position: fixed`をつける必要があります。
まとめるとbody要素には下記のcssをつける必要があります。

``` css
body {
  overflow: hidden;
  position: fixed;
}
```

しかし`position: fixed`をつけるとモーダルを開いた時に最上部まで戻ってしまう 。
なのでモーダルウィンドウを開いた時点の位置をとりそこまでスクロールする必要がでてきます。

``` react
import React, { useState } from 'react' 
import ReactDOM from 'react-dom' 
import ReactModal from 'react-modal' 
import * as ReactScroll from 'react-scroll' 

import './styles.css' 

const scrollTopPx = () => {
  return Math.max(
    window.pageYOffset,
    document.documentElement.scrollTop,
    document.body.scrollTop
  ) 
} 

const App = () => {
  const [isModalOpen, toggleModal] = useState(false) 
  const [scrollTop, setScrollTo] = useState(0) 

  return (
    <div className={`App ${isModalOpen ? 'modal-open' : ''}`}>
      {[...Array(30).keys()].map(n => (
        <p key={n}>{n}背面</p>
      ))}
      <button
        onClick={() => {
          toggleModal(!isModalOpen) 
          setScrollTo(scrollTopPx()) 
        }}
      >
        Toggle Modal
      </button>
      <ReactModal isOpen={isModalOpen}>
        {[...Array(40).keys()].map(n => (
          <p key={n}>{n}モーダル内</p>
        ))}
        <button
          onClick={() => {
            toggleModal(false) 
            ReactScroll.scrollTo(scrollTop) 
          }}
        >
          toggle
        </button>
      </ReactModal>
    </div>
  ) 
} 

const rootElement = document.getElementById('root') 
ReactDOM.render(<App />, rootElement) 
```

動作はこちらで見ることができます
https://codesandbox.io/s/hooks-modal-n3j3f

## まとめ
最後まで読んでいただきありがとうございました。
ブラウザ固有の問題にハマったことがなかったので良い経験になりました。

Ateam Lifestyle Advent Calendar 2019の15日目は、@turkeyzawaがお送りします！
フロントエンドに強いエンジニアなので僕も明日の記事公開が楽しみです。

---

"挑戦"を大事にするエイチームグループでは、一緒に働けるチャレンジ精神旺盛な仲間を募集しています。興味を持たれた方はぜひエイチームグループ採用サイトを御覧ください。
https://www.a-tm.co.jp/recruit/
p5jsでPokémon GOっぽいUIを作る(2)中心に人物を立たせる

昨日はYahoo!地図の画像をp5jsに貼り付けるだけだったが、味気ないので中央に人物を立たせてみることにする。 

p5jsの[loadModel](https://p5js.org/reference/#/p5/loadModel)ではOBJ形式やSTL形式のモデルを読み込むことができる。[Free3D](https://free3d.com/3d-model/lego-man-8986.html)など無料でダウンロードできるモデルを試してみたが、iOSのSafariなどで表示できないようだ。boxは幅・奥行・高さを指定する関数で、描くたびにtranslateで位置していするのが大変だが、これで地道に書いてみる。


```js
function draw() {
  background(0);

  rotateX(1);
  rotateZ(frameCount * 0.001);

  push();
  texture(img);
  plane(1000, 1000);
  pop();

  drawBoxman();
}

function drawBoxman(){

  fill("Yellow");
  
  //右足
  translate(5,0,10);
  push();
  box(10,10,20);
  pop();

  //左足
  translate(-10,0,0);
  push();
  box(10,10,20);
  pop();

  //胴体
  translate(5,0,20);
  push();
  box(20,10,20);
  pop();

  //右手
  translate(12,0,0);
  push();
  box(8,8,20);
  pop();

  //右手
  translate(-24,0,0);
  push();
  box(8,8,20);
  pop();

  //頭
  translate(12,0,20);
  push();
  box(10,10,10);
  pop();  
}
```

こんな感じ。想像以上に不格好だ。

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="usop4" data-slug-hash="eYmyYeK" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="map like pokemon go 2 boxman">
  <span>See the Pen <a href="https://codepen.io/usop4/pen/eYmyYeK">
  map like pokemon go 2 boxman</a> by t.uehara (<a href="https://codepen.io/usop4">@usop4</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
では、また次回。
Make hyip website

Get your own hyip website from professional web designer and developer at low cost.!<a href="https://www.fiverr.com/extensiveseo/make-investment-website-for-you"> 
Get here ![Investing.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/465641/bc423104-f9f7-882d-bb2f-4fe747888b28.jpeg)
 </a>
Jetpackを使ってSNS自動投稿したら、案外確認することが多かった。

Jetpackを利用したので、まとめようと思う。

# JetpackはSNSを自動投稿する一番楽なやり方

現状、WordpressのSNSへの自動投稿する方法で、一番楽で、現実的なやり方だと思う。
他にも無くはないけど、複数のSNSへ共有させたいととなると、これっていうアプリはJetpack以外無いと思う。

# 導入の流れ
管理画面でプラグイン登録
↓
管理画面からWordpress.comにアクセス
↓
Wordpress.comのアカウント作成
要メールアドレス。
但し仮登録はないので、メールアドレスとID/Passwordを入力したらすぐにアカウント設定可能
↓
サイトがWordpress.comに登録される
↓
管理画面に戻るとJetpackの設定が可能になる。
共有タブの「パブリサイズの接続」内チェックボックス「投稿をソーシャルネットワークに自動共有」をオンにする。
↓
下のリンク「ソーシャルメディアアカウントを接続する」のリンク先に飛び、
自動投稿させたいSNSをWordpress.comに連携させる。
↓
管理画面の投稿画面に行くと、公開ボタンの上に「パブリサイズ共有」と表示されている


### 参考
https://webloco.webolha.com/wordpress/jetpack-sns/

# Jetpackで生成されるOGPタグを消去したい

```.php:function.php
/**
 *  Jetpack　OGP設定
 */
add_filter('jetpack_enable_open_graph', '__return_false', 99);
```

All in one SEO プラグインを利用している場合は、メタタグが被らないように記述します。


### 参考

公式フォーラムのスレッド
https://wordpress.org/support/topic/plugin-jetpack-cant-disable-opengraph/


# カスタム投稿でもSNS自動投稿したい

```.php:function.php
/**
 *  Jetpack　SNS設定 ※ {{post_type}}の箇所には投稿したいカスタム投稿タイプを入力
 */
function {{post_type}}_publicize_share() {
    add_post_type_support( '{{post_type}}', 'publicize' );
}
add_action( 'init', '{{post_type}}_publicize_share' );
```

標準の設定では通常の投稿(post)のみの対応なので、カスタム投稿にしている場合は必ず設定。

# Basic認証下でテスト投稿したい


```.htaccess:.htaccess
<Files "xmlrpc.php">
Satisfy any
order allow,deny
allow from all
</Files>
```

本番公開前だけどテストで動かしたい場合もあるので、この記述があると投稿テストが出来る。


### 参考

https://umebius.com/wordpress/jetpack%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3-jetpack-requires-site-publicly-accessible/


# Xserverの独自設定

Xserverの場合、別途セキュリティ設定する必要がある。

### 参考

https://wp-technique.com/jetpack-error/

XSERVER公式
https://www.xserver.ne.jp/manual/man_server_wpsecurity.php


# Facebookに関して

Facebookは個人ページには投稿できず、**Facebookページ**からしか投稿できない。
ちょくちょく仕様が変わっているらしいので、最新情報をチェックする必要がある。

## 全文投稿しないために、一手間加える必要がある
Twitterと違い、Facebookは文字数制限がないため、そのまま投稿すると全文表示されてしまう。
調べてみても自動で解決する方法はないらしいので、投稿時に手動で修正する必要がある。

### 参考
https://www.ec-create.jp/wp-jetpack-share-facebook-all-text/


# Jetpackって豪華
SNS自動共有だけでなく、アナリティクスまで付いてくる豪華ぶり。
もっと軽い感じのSNS自動共有プラグインがあればいいんだけど、今の所無いみたい。
SNSって認証しなくちゃいけないし、結構めんどくさいよね。

# おまけ
WordCamp2019 Tokyo のJetpackブースで、ワプーのぬいぐるみをもらいました！
大切にします！
https://twitter.com/ayaoriko/status/1190518857833705472?s=20
【IFTTT】雨が振りそうになったら通知するbotを作る【slack】

# 🌧 はじめに
プログラミングやゲームに夢中になっていると、気が付かないうちに洗濯物が雨にやられていたりしますよね😭
そうならないために、また外出する時に便利そうなので雨が振りそうになったら通知するbotを作ってみます。

# 🌧 準備
まずIFTTTとslackのアカウントを取得しておきます。

# 🌧 早速作ってみよう
## 🌂 アプレット作成ページへの行き方
<img width="342" alt="スクリーンショット 2019-12-10 午後2.47.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212160/546f0c76-1fde-b0af-3295-bd1a5b74d406.png">
<img width="215" alt="スクリーンショット 2019-12-10 午後2.46.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212160/73fb8737-46c6-0e91-05ab-84d8eea3b015.png">
まずIFTTTのホームを開き、アカウントアイコンをクリックしてメニューを開きます。
その中にある「Create」をクリックします。

## 🌂 トリガーを設定しよう
作成ページに辿り着きました！実際にbotを作ってみましょう
<img width="818" alt="スクリーンショット 2019-12-11 午後1.02.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212160/3d984d3e-8382-9569-06d0-f21d4399493c.png">
<img width="1013" alt="スクリーンショット 2019-12-11 午後1.11.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212160/d797aec0-fb8f-2978-2e05-2d5d34c7ee4d.png">
サービスは「Weather Underground」を使います。

<img width="943" alt="スクリーンショット 2019-12-11 午後1.12.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212160/327fe71f-e86b-6f3f-186e-b3daeb6828a2.png">
予報が雨に変わった時に通知がほしいので「Current condition changes to」を選択。

![Screenshot_2019-12-11 IFTTT(1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212160/8ff54ec0-3b41-c89d-15b6-09ffc30c192d.png)
Current conditionは「Rain」に、
最後に天気予報を取得したい場所を指定します。

これでトリガーの設定は完了です。

## 🌂 アクションを設定しよう
<img width="776" alt="スクリーンショット 2019-12-11 午後1.32.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212160/9ba96cd2-df31-5f7d-5b28-c0d4ae4273a4.png">
<img width="776" alt="スクリーンショット 2019-12-11 午後1.33.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212160/4f97bf05-3740-9e3c-7b8f-0bdcc6b9bb2f.png">
通知を受け取りたいサービスを選択します。今回はよく使っているSlackにしました。

![Screenshot_2019-12-11 IFTTT.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212160/e9a2914c-3bfe-c0a1-2091-a4ef12c0e50c.png)
Messageに雨が振りそうなことを通知するメッセージを入力して完成です。

## 🌂 Saveしよう
<img width="452" alt="スクリーンショット 2019-12-11 午後1.37.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212160/af746d54-1585-1ec1-693f-5a573a1586ad.png">
アプレットのタイトルを入力したら保存します。
お疲れさまでした！！

# 🌧 使ってみよう

アプレットができました！
<img width="426" alt="スクリーンショット 2019-12-11 午後1.44.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212160/7a228a67-40eb-3d3b-fdcd-73b5071d7930.png">
後は「Connect」ボタンを押してslackへのログインと連携するだけです。

<img width="656" alt="スクリーンショット 2019-12-10 午後7.12.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212160/51e0c1c3-4b23-55f4-a7d7-862a9c5464ce.png">
動いた！

# 🌧 最後に
IFTTT便利ですね。難しいプログラミング言語を使うことなくbotの制作ができました。
アクションでslack以外のサービスを選択すればLINEやTwitterのボットも作れそうです。

それでは皆さんよい年末を！🎄🎍❄
非エンジニアがAtCoder ABCのB問題が解けるようになるまで


## サマリー
記念すべきQiita初投稿です。
今回は、非エンジニアである自分がAtCoderのABCコンテストのB問題まで解けるようになった話をします。

![スクリーンショット 2019-12-04 19.16.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148906/256de1b7-fc46-786c-987e-d4d84e981033.png)
https://atcoder.jp/users/futai23

## きっかけ
たまたま勢いで着手したのですが、そのときにピンと来たのが以下のような理由。

- 社内でCTOと数名のエンジニアがやるぞ！って言い出した流れに乗っかった
- やってみたら結構好きだった（C・D問題も数学力的にはそのうち届くような感じがした）
- アウトプットベースで「コード書いたことある」と言いたかった


## それまでのエンジニアリングへの取り組み
- Paiza（3年前に社長に教えてもらいながらCランクまで到達）
- みんなのPython(3日で挫折）
- 社内SQL講座（DBの鬼こと @denzow が企画・運営してくれた）
- エンジニア向けのスカウトメール執筆（累計何百通かは書いてる）


## やったこと
- ABCのA問題の20問
- ABCのB問題の5問
- ABCのC問題の4問
- ABCコンテストに3回出場

これらの内容を約一ヶ月間で学習しました。

## 練習方針
1.完全独力で解こうとする。
2.標準入力のやり方を忘れている場合、標準入力のみ他の人の回答を見る。
3.独力でACを獲得するまで粘る。
4.回答方針は合ってそうなのにどうしてもACが取れない場合は答えを見て写経する。
5.回答指針がまったく立たない場合は答えを写経。
6.写経した場合は、1から空で書き直し。

という方針で1問ずつ解いていきました。

B問題まではアルゴリズムの観点で困ることはなく、圧倒的な実装力不足と対峙していくこととなります。

## 勉強した部分
### 標準入力
**入力**
入力は以下の形式で標準入力から与えられる。

```
A B C
```

**回答の一部抜粋**

```
A,B,C = map(int, input().split())
```

この標準入力を覚えることが最初の関門でした。
`おまじない` で覚えてしまうとB問題で登場する下記のような形式に対応できないため、それぞれの関数の意味を丁寧に理解していきました。

**入力**
入力は以下の形式で標準入力から与えられる。

```
N
p1 p2 ... pN
```

**回答の一部抜粋**

```
N = int(input())
p = list(map(int,input().split()))
```



### if文（A問題）
if文はある程度理解していたのですが、 `:`の使い方 や インデントの使い方の理解が曖昧だったこともあり、エラーが続出しました。

```
A,B,C = map(int,input().split())
answer = C-A+B
 
if answer >= 0:
	print(answer)
else :
	print(0)
```

たとえばA問題ではこの程度の回答が書けるようになりました。

### for文(B問題)
for文はPaiza時代に解いたことはあるのですが、まったく覚えておらずググりながら理解していきました。
累算代入文の使い方 ` += 1` や for文とif文の組み合わせ時のインデント の理解に少し苦戦しました。


```
N = int(input())
p = list(map(int,input().split()))
 
ans = 0
 
for i in range(N):
    if p[i] != (i+1) :
        ans += 1
 
if ans == 0:
    print('YES')
elif ans == 2:
      print('YES')
else :
    print('NO')
```

たとえばB問題ではこの程度の回答まで書けるように。


## 途中で気付いた便利な機能（コードテスト）
コードテスト機能に気づくまで、過去問を解いているときはREを頻発しておりました。
こちらの機能では、標準入力の数字を入れて、コードを書いて実行すると、結果を戻してくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148906/3d378755-77df-ebaa-2f8a-afa82b9e942f.png)
![スクリーンショット 2019-12-10 18.53.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148906/8ea30508-a8ba-1086-708a-a9442c1c2c94.png)
![スクリーンショット 2019-12-10 18.53.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148906/072cd38e-ad82-0d8f-d909-fa254db1d737.png)


## なぜ途中で止めたか
ここまで高いモチベーションで続けており、1ヶ月でB問題を解けるようになり、
順風満帆なAtCoder生活を送っていたのですが、学習が突如止まることとなります。

### C問題は学習に1問1時間程度かかった
昼休みや寝る前の時間を活用して学習していたのですが、
C問題でアルゴリズム力の不足を補うフェーズに入ると、隙間時間で勉強するスタイルが合わなくなってしまいました。
それだけであれば土日などに時間を取って続ければ良かったのですが...

### コンテストの開催日程が直前まで決まらない
AtCoder ABCコンテストの開催はその週の水曜〜開催前日に告知されます。
週末夜を2日とも空けておくことが困難だった自分は、3週間ほどコンテストに参加できないことが確定した時点で、モチベが一気に下がってしまいました。

## 次にやりたいこと
仕事柄エンジニアリングやエンジニアに触れる機会が多く、周りの非エンジニアの皆が新しいツールやサービスを作っていることをうらやましく思っていました。
自分は作りたいものがなかったので、学習のモチベーションが続かず、3年位もやもやしていたのですが
AtCoderとの出会いはエンジニアリングとの距離を一気に詰めてくれる最高の体験でした。

今は他の仕事や趣味に興味が移っていますが
次の学習機会では

- AtCoderABCコンテストのC・D問題を本番で解いて、水色を目指す
- 簡単なポーカーの確率計算ソフト作成

あたりにチャレンジしたいなと思っています。
C++11 or later で文字列のパースをするライブラリのメモ

## 背景

* C++ でちょっとした文字列をパースしたい(簡易な自前スクリプト言語, 設定ファイル, etc)
* scanf よりはもう少し高性能なのほしい
* bison/yacc 系は古いし, インストールが必要でめんどい(C++ だけで完結したい)
* C++11 regex もあるけど, ちょっと使いづらい...

## ライブラリ

### cpp-peglib

https://github.com/yhirose/cpp-peglib

PEGとC++11で作る言語処理系
https://qiita.com/yhirose/items/6c2660883535c91467b5

`any` を使っているので(C++11, 14 の場合は自前 `any` を使う), スクリプト言語っぽくかけますが, しかし C++11 で静的な型に戻すときはちょっと面倒です.

https://github.com/mqnc/pegdebug

まずは pegdebug を使って, 構文のチェックをしてから(HTML でレポートしてくれるので便利ですが, あまり長い入力だと, 生成される html が増えてブラウザが固まりますので注意ください), その後 cpp-peglib のパーザーコンビネーター形式で C++ に直に書き直すのがいいかもしれません.

author の方から, PEG Playground をお教えいただきました. ありがとうございます :pray:

https://yhirose.github.io/cpp-peglib/


また, C++ 側のプログラムですが, PEG の grammar の書き方の問題なのか, AST 有効にするとうまくいかないときがあります.


### PEGTL

https://github.com/taocpp/PEGTL

こちらも PEG ライブラリ. template を使っていますが, それほど複雑ではないためか, コンパイル早めなのがよい.

C++11 PEG パーザーライブラリ PEGTL のメモ
https://qiita.com/syoyo/items/cef28f79b180e6781840

### scnlib

https://github.com/eliaskosunen/scnlib

scanf のナウでヤングなバージョンな感じで使えます.
入力は string_view/span である必要がありますが, C++11, 14 の場合は自前のクラスで対応します.

cmake で組み込みも簡単です.

author の方から, 配列のパースの仕方を教えていただきました. ありがとうございます :pray: 

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">If you&#39;re able to use the latest master, you can do this: <a href="https://t.co/iaJatOqUgX">pic.twitter.com/iaJatOqUgX</a></p>&mdash; Elias Kosunen (@eliaskosunen) <a href="https://twitter.com/eliaskosunen/status/1205069908616327168?ref_src=twsrc%5Etfw">December 12, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## 番外編

C ですが, mpc(micro parser combinator library)が便利そうです.

https://github.com/orangeduck/mpc

が, よくクラッシュするのが難点ですね...

RE-flex. bison/flex のナウでヤングな代替として使えそう(BSD-3 license)
https://github.com/Genivia/RE-flex
Homebrewを用いてPostgreSQL 12をインストールする方法

## 概要
2019年12月10日時点での情報になります。

2019年10月3日にPostgreSQL 12がリリースされました[^1]。
本記事では、PostgreSQL 12をHomebrewでインストールする方法を説明します。

[^1]: https://www.postgresql.org/about/news/1976/

## 方法1（新規にインストールする場合）

```shell

brew install postgresql
```

brew installしただけではパスが通っていないので`~/.bashrc`に以下の記述を追加します。

```
export PATH=/usr/local/Cellar/postgresql/12.1/bin/:$PATH
```

## 方法2（すでにpostgresqlをインストールしていてかつ既存のバージョンがいらない場合）
注意点としては、upgradeをすると、既存のバージョンのpostgresqlは削除されてしまいます。
インストールディレクトリが変わるのでパスも変えましょう。

```shell

brew upgrade postgresql
```

## 方法3（複数バージョンのPostgreSQLを共存させたい場合）
方法2を実施した上で必要なバージョンのpostgresqlをインストールします。
`brew search postgresql`を実行するとhomebrewでインストール可能な一覧を表示することができます。

```
brew search postgresql
brew install postgresql@11
```

## 方法4(サードパーティーからインストールする）
[petere/postgresql](https://github.com/petere/homebrew-postgresql )からもpostgresqlをインストールすることができます。

複数のメジャーバージョンの共存させたい場合はこちらからインストール方がいいと思います。
あとこっちの方が公式より最新のバージョンの反映が早いです。



例） 12.1のリリース対応
12.1は11月14日にリリースされています[^2]。petere/postgresqlはすぐ対応されているのに対してhomebrew公式だと少しラグがあります。


 - [homebrew公式](https://github.com/Homebrew/homebrew-core/pull/46893#event-2824825211) 11月23日
 - [petere/postgresql](https://github.com/petere/homebrew-postgresql/commit/b804e21d68f3b7b592acd168094891997065a80d) 11月15日


```
brew tap petere/postgresql
brew search postgresql
brew install petere/postgresql/postgresql@12
```

`brew tap`コマンドを実行することで指定したサードパーティからもhomeberwでインストールすることができるようになります。


[^2]: https://www.postgresql.org/about/news/1994/
pytorchのモデルをtfliteに変換する

# はじめに
エッジでのDeep Learningを考えた時、tfliteに変換することが必要です。
というわけで、
[PyTorchで学習したモデルをTFLiteモデルに変換して使う - qiita](https://qiita.com/lain21/items/9f9f9707ebad4bbc627d)
ほぼこれですが、僕のマシンでは動かない部分があったので置いておきます。

元記事では
`pytorch -> onnx -> keras -> tflite`
という手順で変換を行なっていますが、本記事では

`pytorch -> onnx -> tensorflow(.pbファイル) -> tflite`
という手順での変換を行いました。

# 使うモデル

エッジでStyle Transferしたいですよね。
というわけで、軽くて動きそうなので[pytorch/examples/tree/master/fast_neural_style - github](https://github.com/pytorch/examples/tree/master/fast_neural_style)を変換します。


## Style Transfer(画風変換)
Style Transferとは、その名の通りイラストなどを含む画像の、画風を変換するというタスクです。
このタスクでは、画像というのが『内容(content)』と『スタイル(style)』の組み合わせであると考え、内容をそのままにしたままスタイルのみを変換する、ということを考えます。
以下の画像の例では、一番上の元の画像の内容を保ったまま、各行の左のスタイル画像のスタイルを転写しています。

![スクリーンショット 2019-12-07 0.18.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190157/7c0764dd-785d-f326-b03e-5bca03d2a2e9.png)

[画像元](https://github.com/lengstrom/fast-style-transfer)

また、以下の画像では左の、荒いスケッチを入力するだけで右の写真のような画像を生成する、ということが研究レベルではできています。
(大事なことなので二度言いますが、右の画像は現実のものではなく、左のスケッチから生成したものです)
![スクリーンショット 2019-12-07 0.23.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190157/ee7db657-6a93-6d30-27fa-e3369c8bf444.png)
[元動画リンク](https://www.youtube.com/watch?v=NKFrg9HMYaY&feature=emb_logo)

余談ですが、一時期話題になった、SNOWの顔画像の年齢を変更する機能なども、画風変換です。


# モデルの変換

## 実行環境

- onnx-tf == 1.5.0
- onnx-coreml == 1.0
- tensorflow == 1.15.0
- torch == 1.3.0
- torchvision == 0.4.2

※pytorchですが、動かなかった場合はpyTorchは1.1系、torchvisionは0.3系でトライしていただければと思います

※tensorflowは1.15以外だと動作ができているのは確認してません。
1.14でもそれ以下でもダメでしたし、2.0のベータ版でもエラーでした。


## PyTorch -> onnx
[onnx tutorial](https://github.com/onnx/tutorials/blob/master/examples/CoreML/ONNXLive/README.md#convert-the-pyTorch-models-to-onnx-models)を参考にしました。

```console
$ pip install torchvision onnx-coreml
$ git clone https://github.com/pytorch/examples
$ cd examples/fast_neural_style
$ ./download_saved_models.sh
```

```console
$ convert -size 250x540 xc:white png24:dummy.jpg
$ python ./neural_style/neural_style.py eval --content-image dummy.jpg --output-image dummy-out.jpg --model ./saved_models/mosaic.pth --cuda 0 --export_onnx ./saved_models/mosaic.onnx
```

## onnx -> tensorflow
[onnx-tensorflow](https://github.com/onnx/onnx-tensorflow/blob/master/doc/CLI.md)を利用します。

```console
$ onnx-tf convert -i /path/to/mosaic.onnx -o /path/to/mosaic.pb
```

## tensorflow -> tflite

```python
import tensorflow as tf

input_arrays = ["image_array"]
output_arrays = ["converted_array"]
converter = tf.lite.TFLiteConverter.from_frozen_graph(
    save_path,
    input_arrays,
    output_arrays
)
tflite_model = converter.convert()
```

これにより`mosaic.tflite`を得ることができました。
【Javascript】Object内のパラメータを元にArrayをソートする方法

# Object内のパラメータを元にArrayをソートする方法

orderを元に、昇降順でObjectを並び替える方法を紹介します。

```js:exampleArray
const brothers = [
  {
    name: '次郎',
    order: 2
  },
  {
    name: '太郎',
    order: 1
  },
  {
    name: '三郎',
    order: 3
  }
]
```

MDNのsort()メソッドのドキュメントでは、引数内functionについて以下のように書いてあります。
>```js
function compare(a, b) {
  if (a is less than b by some ordering criterion) {
    return -1;
  }
  if (a is greater than b by the ordering criterion) {
    return 1;
  }
  // a must be equal to b
  return 0;
}
```
(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)

実際にやってみようと思います。

## 昇順

```js:昇順.js
console.log(brothers.sort((a, b) => {
  if (a.order > b.order) return 1
  if (a.order < b.order) return -1
  return 0
}))

> Array [Object { name: "太郎", order: 1 }, Object { name: "次郎", order: 2 }, Object { name: "三郎", order: 3 }]
```

## 降順

```js:降順.js
console.log(brothers.sort((a, b) => {
  if (a.order > b.order) return -1
  if (a.order < b.order) return 1
  return 0
}))

> Array [Object { name: "三郎", order: 3 }, Object { name: "次郎", order: 2 }, Object { name: "太郎", order: 1 }]
```


うまくできました。
［個人メモ］git push 時に remote: Repository not found. と出るときの対処


`.git/config`内の`url`をhttpsではなくsshのものにする

```diff
[remote "origin"]
-    url = https://github.com/USERNAME/REPOSITORY_NAME.git
+    url = git@github.com:USERNAME/REPOSITORY_NAME.git
```

参考： https://code-log.hatenablog.com/entry/2019/05/23/090122
エラー ERROR: Can't install RMagick 4.0.0. Can't find magick/MagickCore.h.の対処法

[参考](https://off.tokyo/blog/%e4%b8%80%e7%99%ba%e8%a7%a3%e6%b1%ba-error-cant-install-rmagick-4-0-0-cant-find-magick-magickcore-h-%e3%81%ae%e5%af%be%e5%87%a6%e6%b3%95/)
利用中のMVNOについて

# はじめに 
今回記事を書くのが初めてになります。
記事を書くのにあたり、技術分野に関わるものを記載すべきなのかどうかどういったものが良いかまったく思いついておりませんでした。
　ただ、知りたいというリクエストもありまして、私が使用しております、俗に言う格安スマホ、格安SIMを扱う楽天モバイルについての使用感を記載いたします。


# 格安スマホ、格安SIMとは
格安スマホ、格安SIMというものが登場して、早10年以上が経過しているようですが、一般的に普及したのは2012年頃といわれているようです。
結構な年数がたってはおりますが、一般的な普及率としては2割程度になるようです。

価格の面では圧倒的に安いのに普及しないのには、あまり変化を好まないという側面もありますが、そもそも格安スマホ、格安SIMって何？　というところも大きいようです。

では、格安スマホ、格安SIMってどういうものというと、
簡単に言うと、大手通信事業会社（docomo、au、SoftBankなど）のネットワークを借りて独自のサービスを展開している会社の商品です。
ここでいう貸す側はMNOと呼ばれ、借りる側はMVNOと言われます。

そのため、使用出来る範囲も借りている会社と同等です、電波が入らないとかそういったことはありません。

#### デメリットは、

・借りている会社さんより通信速度が遅い　
　※個人差ありますが、支障を感じたことはありません

・店舗が少ないのでサポート受けづらい、そもそも店舗がない　
　※個人的に、店舗の重要性を感じない

ぐらいかと。

そのため、私はdocomoを使用しておりましたが、MNVOである楽天モバイルへと切り替えました。

長々書いてますが、この手の内容は、「格安スマホ」とかで検索すると大量に出てきますので、詳しく知りたい方は、一度ご自身で探してみてください。


# 楽天モバイルの使用感
格安スマホ、格安SIMについて、個人的にはメリットしか感じなかったため楽天モバイルへ乗り換えましたが、当時は楽天のサービスで纏めるとポイントがたまりやすいぐらいでしたが、現在は、他にはないサービスがあり、そのサービスがあるためにしばらく変えられないと感じています。

MNVO、MNOともに、毎月契約している通信量（3G、5G、7Gとか）を超えてしまうと、途端に通信速度が遅くなります。　多くは、128Kbpsの速度制限がかかり、画像などがないようなニュース記事すらまともに表示できなくなります。
ただ、楽天モバイルは、通信料を超過した場合でも、1Mbpsまで速度がでます。

そのため、ニュース記事は普通に閲覧できますし、動画なども見ることが出来ます。
動画については、若干、読み込み待ちが発生することもありますが、ずーと止まっていると言うこともありません。
そのため、私は、最低の通信量（2G）のプランで、常に高速通信をOFFにして使用してます。
前月の通信量を繰り越すこともされるので、常に4Gの高速通信可能な通信量を保持しているような状態です。
よっぽど、大量データを扱うようなことでもない限りはまったく支障がないというのが現在の感想です。
※アプリのダウンロードなどには向きません。

実際の使用感としてHPにも掲載されていますが、嘘はないかなという印象ですので、興味のあるかたは参考にしていただければと思います。
https://mobile.rakuten.co.jp/fee/super_hodai/?l-id=footer_pc_super_hodai


# おまけ
楽天モバイルは、総務省から1.7GHz帯の割り当て認定を受け、docomo、au、SoftBank、に次ぐ第4のキャリアとなり新しい料金プランが注目されています。

まだ、MNOとして、本格運用は出来ていませんが、仮の料金プランが流出したようで、かなりビックリするような価格でした。
https://www.itmedia.co.jp/news/articles/1912/03/news153.html

仮のプランはありますが、ここまでくれば、ネット回線の見直しや、法人契約をすることでのコスト軽減も見込めるなと感じました。
php -vでdyld: Library not loaded: /usr/local/opt/openssl/lib/libcrypto.1.0.0.dylib

# 経緯
開発ブランチにマージされているコードに対し、
CodeBuildを通してテストを行ったら__syntax error__を吐いて死んだので、
ローカルのMacにPullしてきて単純にphpコマンドを叩いたら

```Bash
$ php -l ./app/hoge/HogeController.php
dyld: Library not loaded: /usr/local/opt/openssl/lib/libcrypto.1.0.0.dylib
  Referenced from: /Users/t_ueyama/.phpbrew/php/php-7.2.22/bin/php
  Reason: image not found
Abort trap: 6
```
違うエラーが返ってきてこれ何ぞ？ってなった話です。
# 原因と解決
見ての通りopensslが絡んでるなぁと分かるのですが、何をどうすりゃいいのか？状態。
先週何となくbrew update とか brew upgradeした事を思い出したのと、
そのときopensslのアップデートがあった様な記憶が蘇る。。

ググると下記をしろとな。

```Bash
$ brew update && brew upgrade
```
エラー変わらず。じゃあと

```Bash
$ brew install openssl
Warning: openssl@1.1 1.1.1d is already installed and up-to-date
To reinstall 1.1.1d, run `brew reinstall openssl@1.1`
```
お、メッセージが変わった。
お言葉に甘えて

```Bash
$ brew reinstall openssl@1.1
```
エラー変わらず。。

ここに答えがあったのですが、使用するopensslのバージョンを合わさないとダメやでって事でした。
https://stackoverflow.com/questions/59006602/dyld-library-not-loaded-usr-local-opt-openssl-lib-libssl-1-0-0-dylib

```Bash
$ brew switch openssl 1.0.2s
$ php -v
PHP 7.2.22 (cli) (built: Aug 30 2019 12:20:57) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies
```
俺のphpが帰ってきた。
Maya ascii(mel のサブセット?)の文法メモ

Maya ASCII の文法メモです.

.ma をちょっと編集したいとか, .ma から設定を読込みたいとかようです.

たぶん昔から存在するので, きちんとした言語定義は無いと思われますが, わかってしまえばそんなに難しい文法になっているわけではないのがわかります.
(ただ, .ma の Semantic を解釈するというのは面倒 or 難しい. maya でデータを評価しないとわからない値やブラックボックスなものもあるため　)

Maya 2018 を想定しています.

## 大まかな構成

http://cgkit.sourceforge.net/doc2/mayaascii.html

cgkit の mayaascii を参考にしてみてください.
(ただ, cgkit 自体は開発止まっているのか古いので, 最近 Maya では適用できないものがあるかもです)

大まかには以下の 14 のコマンドで構成されます.

* file 外部ファイル読み込み?
* requires 必要なプラグインとか
* fileInfo ファイルの情報
* currentUnit シーンで使う単位
* createNode ノードを作る
* rename ノードに UUID を割り当てる
* setAttr ノードのアトリビュートを設定する
* addAddr アトリビュートを追加する
* select ノードを選択する
* connectAttr アトリビュートを繋ぐ
* disconnectAttr 
* relationship ライトリンクなど?
* parent
* lockNode

コマンドは `;` で終了します.

コメントはダブルスラッシュです.

```
// this is comment
``` 

Maya 自体が出力する .ma は, まあまあ行ごとにまとまって出ているので, 行ごとにパースというのはやりやすそうです.

## 文字列

ダブルクォーテーションで囲わなくてもいけるらしい

"muadh"
mudah

両方とも OK

```
select -ne :bora 
```

select では `:` の prefix があったりする. なにか理由があるのかしら?

 
また,

```
( "mudah" + "bora" + "dora" )
```

と, かっこを使って文字列を連結することができます.

## boolean

`yes` `no` `on` `off`

## フラッグ

`setAttr` などでは, フラグの順序は比較的自由にできます(unix 系プログラムのオプションの扱いと似た感じですね).

```
setAttr -k off ".v" no;
setAttr ".v" -k off no;
```

と, どちらの記法でも OK です.

## 配列データ

```
setAttr ".wl[0:8].w"
  2 1 0 ...
  3 0 ...
  3 0 ...
  3 0 ...
  3 0 ...
  3 0 ...
  3 0 ...
  3 0 ...
  ;
```

と言う感じで, attribute の文字列に配列の範囲や個数, のこり `;` までが配列の値, というふうになります.

### 文字列配列?

```
{ "mudah", "borah", "dorah" }
```
とカンマ区切り + カッコがあります. `attributeAlias` 型など.

## バイナリデータ

Maya XGen などは, BASE64 あたりでエンコードされています.
(したがって .ma で数値をいじるというのが無理. XGen 自体については, SDK は Maya 非依存で動かすのができるので, XGen 関連のデータをいじりたい場合は XGen SDK で処理させる手もあります)

## TODO

* [ ] .ma を Blender で読み込む plugin を作る
pythonで色の名前を入力するとrgbの数値を返す関数


## 事の発端
```python3
img = cv2.line(img,(0,0),(511,511),(255,0,0),5)

img = cv2.rectangle(img,(384,0),(510,128),(0,255,0),3)
```
上記のコードのように、関数の引数などでrgbのカラーを指定する場合に、(0, 255, 0)のようなリテラルではなく"white"のように書きたいと思いました。
しかし、適当な書き方が見当たりませんでした。そのため、rgbの値を表すタブルを返す関数を自作したので、せっかくなので記事にしました。
(~~別のやり方を知っている人はコメントいただけるとありがたいです。~~アドバイスありがとうございました。)

## サンプルコード
```python
# rgbの数値を返す関数
def rgb(color):
    data = [["white", 255, 255, 255],
            ["black", 0, 0, 0],
            ["blue", 0, 0, 255],
            ["red", 255, 0, 0],
            ["grey", 190, 190, 190],
            ["LightGray", 211, 211, 211],
            ["green", 0, 255, 0],
            ["orange", 255, 165, 0],
            ["yellow", 255, 255, 0],
            ["pink", 255, 192, 203],
            ["snow", 255, 250, 250],
            ["cyan", 0, 255, 255],
            ["gold", 255, 215, 0],
            ["ivory", 255, 255, 240],
            ]
    for i in range(len(data)):
        if data[i][0].lower() == color.lower():
            return data[i][1], data[i][2], data[i][3]


def main():
    print(rgb("white"))
    print(rgb("black"))


if __name__ == "__main__":
    main()
```

## 実行結果
(255, 255, 255)
(0, 0, 0)

## 感想
私はこれで満足です。このrgb関数を使って、rgb("white")と書くことで、(255, 255, 255)と値が返ってきて最初に書いた関数の引数にうまく利用することができました。

追記）コメント欄もご覧ください。この場合、辞書の方が確かに良いですよね。

## どんな色の名前があるのか
以下のページを見れば、tkinterで用意されている色を表す名前がわかります。
http://www.tcl.tk/man/tcl8.4/TkCmd/colors.htm

## 関連ページ
Tkinterで色々な背景の色を表示して比較したい
https://qiita.com/hatorijobs/items/55f8292b4674fc8f19dd