OmniAICreator/Qiita-1.07M huggingface dataset:
AWSのRDS（mysql）のタイムゾーンをAsia/Tokyoに変更する

AWSのRDS（mysql）のタイムゾーンがデフォルトだと、UTCだったので、Asia/Tokyoに変更する。

```
mysql> select now();

+---------------------+
| now()               |
+---------------------+
| 2018-12-18 05:29:18 |
+---------------------+

mysql> show variables like '%time_zone';
+------------------+-------+
| Variable_name    | Value |
+------------------+-------+
| system_time_zone | UTC   |
| time_zone        | UTC   |
+------------------+-------+
2 rows in set (0.00 sec)
```

# パラメータグループの作成
Amazon RDSの管理画面からパラメータグループを選択。
パラメータグループの作成を選ぶ。

![RDS · AWS Console (1).png](https://qiita-image-store.s3.amazonaws.com/0/187963/feadf78d-a7c8-d222-5e02-8602b7a3a0bd.png)

パラメータグループの詳細で「グループ名」「説明」を記入して作成。
※今回はtimezone-asia-tokyoにします。

![RDS · AWS Console (2).png](https://qiita-image-store.s3.amazonaws.com/0/187963/004f98ee-0510-c37f-b84c-8cb703ab11c4.png)

先程、作成したパラメータグループを選択して編集。
タイムゾーンを変更します。
検索窓に「time_zone」を入力。

![RDS · AWS Console (3).png](https://qiita-image-store.s3.amazonaws.com/0/187963/ae9cf2c8-77c6-0fb3-5be6-e164cc51559c.png)


time_zoneの項目を「Asia/Tokyo」に変更して保存します。

![RDS · AWS Console (4).png](https://qiita-image-store.s3.amazonaws.com/0/187963/ffbad67d-f0a9-a585-7d92-035db866de16.png)


# データベースのパラメータグループを変更
タイムゾーンを変更するデータベースを選択して編集。
データベースの設定の項目からDBのパラメータグループを先程作成したパラメータグループに変更して保存。

![RDS · AWS Console (5).png](https://qiita-image-store.s3.amazonaws.com/0/187963/5c75af99-b7a1-b8d8-3363-12b879afd21c.png)

変更スケジュールをすぐに適用を選択して保存。

![RDS · AWS Console (6).png](https://qiita-image-store.s3.amazonaws.com/0/187963/1b9e4e46-81ba-1df8-677a-5f9255e6747d.png)

設定が終わったら、データベースを再起動します。

# タイムゾーンが変更されたか確認
最後にタイムゾーンが変更されたか確認。

```
mysql> show variables like '%time_zone';
+------------------+------------+
| Variable_name    | Value      |
+------------------+------------+
| system_time_zone | UTC        |
| time_zone        | Asia/Tokyo |
+------------------+------------+
2 rows in set (0.00 sec)
```

これでOK！
MacでC++のコンパイラ設定(CLion編)


C++で`#include <bits/stdc++.h>`を使えるとかなり便利なので自分の環境で使えるようにしたいなと思い環境構築を行いました
**実行環境**
---
mac OS:10.14.2
Xcode:10.1
の環境で行なっています

**Homebrewのインストール**
---
まず始めにHomebrewのインストールをします
Link:[Homebrew](https://brew.sh/index_ja)
ここで取得したスクリプトをターミナルに貼り付け実行する。

後はしばらく待ちましょう。

**gcc(g++)のインストール**
---
```
$ brew install gcc
```
これだけです。Homebrew経由でのインストールは`/usr/local/Celler/`に保存されます。
確認しましょう。他の場所にもエイリアスが作成されますので各自で確認しましょう。

**CLionでの設定**
---
CLionのpreferenceから<img width="1012" alt="スクリーンショット 2018-12-18 15.21.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/244585/35e29f0a-9475-60a0-91ec-1ad044c402c9.png">

C++ Compilerの部分に任意のフォルダにパスを設定します
自分の場合は`/usr/local/opt/gcc/bin/g++-8`に設定すれば`#include <bits/stdc++.h>`が使用できました

始めは`/usr/local/Celler/`の中のファイルを選択していましたがそれでは実行時にエラーが出てしまいましたが、このファイルに設定したところ無事にコンパイルできました

**まとめ**
---
落ち着いて環境構築をすればなんとかなると思いますので楽しくいきましょう
応用情報技術者試験 対策日記

# はじめに
はじめまして。
2019年4月21日の*応用情報技術者試験(AP)*の受験を予定している大学生です。
試験対策のために勉強したことや理解できなかったことをまとめていきたいと思います。
あくまで自分の知らなかった範囲を中心にメモする形で投稿していくので、僕の投稿で全範囲がカバーできるというわけではありませんが、同じ資格試験を受験される方に少しでも知識を共有できればと考えています。
Qiita初心者なのでお手柔らかによろしくお願いします！

# 参考図書
徹底攻略 応用情報技術者教科書 平成30年度
https://book.impress.co.jp/books/1117101078

# 記事
## 基礎理論
- [離散数学](https://qiita.com/k-y/items/a915f866aacc81bca73c)
- [応用数学・情報に関する理論](https://qiita.com/k-y/items/569bc47cc6c3e4f16e24)
- [通信・計測・制御に関する理論](https://qiita.com/k-y/items/746d0ba47ffca60c4dbd)
- [データ構造](https://qiita.com/k-y/items/632944ca81d5c1bd0058)
- [探索アルゴリズム](https://qiita.com/k-y/items/25584af043753eacac67)
- [ソートアルゴリズム](https://qiita.com/k-y/items/f050a55ce17561a9d288)

##コンピュータシステム
- [プロセッサ](https://qiita.com/k-y/items/8effbae36141bb839b85)
- [メモリ](https://qiita.com/k-y/items/501780fd861067637bfc)
- [その他の構成装置](https://qiita.com/k-y/items/8a872175a75841918df1)
- [システム構成](https://qiita.com/k-y/items/9144eaaf920393c16cc4) 
- [システムの評価指標](https://qiita.com/k-y/items/461e35ad78f7485c7637) 
- [OS](https://qiita.com/k-y/items/45c28660344333ce9bde) 
- [ハードウェア](https://qiita.com/k-y/items/4464605a998410256f8e)

##ネットワーク
- [データベース](https://qiita.com/k-y/items/cdb48f2a0afb5873d78e)
- [情報セキュリティ](https://qiita.com/k-y/items/c5a9024d198c6a9bdce6)
- [情報セキュリティ②](https://qiita.com/k-y/items/34b8b36da8eba1577738)

##その他
- [システム開発技術](https://qiita.com/k-y/items/d9cd89c13ac67f761492)
- [プロジェクトマネジメント](https://qiita.com/k-y/items/2605b3c9b91978513f18)
- [サービスマネジメント](https://qiita.com/k-y/items/ff50f6e0130a7608b936)
- [システム戦略](https://qiita.com/k-y/items/4f2c507ff38f532ccadd)

------
[ホームへ](https://qiita.com/k-y/items/dc2c9a3a8425712253e8)
Tinker Board S と Grove Base Hat for Raspberry Pi の組み合わせ

去る12月4日、[ASUS Tinker Board User Conference 2018](https://www.physical-computing.jp/page/52)という、Tinker Boardのイベントで展示・講演でした。

# ASUS Tinker Board User Conference 2018

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/3eed6899-7743-3656-2d7e-f7570d74b9cd.png)

「GrovePi+によるTinker Boardの拡張」と題して、GroveシステムとTinker BoardとGrovePi+の動かし方を紹介しました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/d02ea421-b6d7-8eec-c029-3ca9af01569a.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/fa6e211e-ffe4-7797-f2d9-f2b9d6b198ac.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/200b4492-605a-2acd-4439-3ec50f8d27eb.png)


講演が終わり、ホッとしていたところに突然の出来事がが！

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/327d1d3c-531c-2700-f834-59c855a0ac82.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/ddc7a700-54c0-6491-7a5e-d90864c8be20.png)

ぐふぉぉ．．．
お客さんが、展示ブースで展示していたGrove Base Hat for Raspberry PiをTinker Board Sに載せてみたところ、基板がナナメに．．．

# 戻ってから

イベント終了後、再度、確認してみると、、、

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/159f4525-bc2f-38cf-cfba-b5747a8df4c8.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/0689a34f-31ef-6a84-ef3d-ae58406b0b27.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/d67d9c5c-a3ee-10f8-546e-20e59253442a.png)

これで安心して使えます♪
えぇ、何度見ても、Tinker BoardのヒートシンクがGrove Base Hatに当たっています．．．orz

# 対処方法

〇ツのパーツを追加！！！

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/41d69fc4-ce21-95b6-a16f-5ae6444a2896.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/c219bca6-e492-c6b8-c2ae-3bdc3c1fa46b.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/a27828e8-b408-0ec1-06cb-cc451b98f188.png)

スペーサーを取り付けるときは、長さ24mmを使いましょう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/3007ed09-df56-c0ba-8f32-d8adda4eb230.png)
Xsort なる gemを作成してみました。

# xsort って言うgem作ってみました。

## Overview

Xcodeで左側のファイルツリーに表示されているファイルがソートできないので、できたら良いと感じ、
Rubyでファイルをソートできるやつを作成してみました。

インストール方法

動作環境は ruby 2.3.0 で動きます。　

```bash
 gem install xsort
```

git　hubにソースコードを晒しておりますので、そちらから取得し、gemにすることもできます。

SSH経由：直接コミットを定期的に行う予定の方は、SSHを使ってクローンを作成すると、SSH鍵をGitHubにアップロードする必要があります。

```bash

$ mkdir gitrepo
$ cd gitrepo
$ git clone git@github.com:keisukeYamagishi/xsort.git
```

https：でクローンする場合

```bash

$ mkdir gitrepo
$ cd gitrepo
$ git clone https://github.com/keisukeYamagishi/xsort.git
```

## 使いかた

xsort をインストールした後、下記を実行すると、

```bash
$ xsort
```

下記のような結果を得られます。

```

Usage: xsort [-v] [<path>] [-o]
These are common detect commands used in various situations:
xsort version: 1.2.3
option:
-v: display xsort version number
-o: output result
-r: Just extracting output.pbxproj will not write to pbxproj of Xcode project

Regars !

```

### mac OSの種類によっては下記の修正が必要です。 ***********************
#### （☝ ՞ਊ ՞）☝ Wow What's this!!!

mac OSX to HighSierra,

実行した時に下記のようになりましたら

```
->> xsort
-bash: /usr/local/bin/xsort: /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/ruby: bad interpreter: No such file or directory
```

#### （☝ ՞ਊ ՞）☝ Wow What's this!!!

下記を実行してください、

```
sudo gem update --system -n /usr/local/bin
sudo gem install -n /usr/local/bin xsort
```

## ソートします。

```
$ xsort ./XcodeApps.xcodeproj
Xsort Successful (☝ ՞ਊ ՞）☝!!!
```

## オプション

***Display result log***

変換結果が必要な場合は -o で変換結果を出力します。

```
xsort ./XcodeApps.xcodeproj -o
```

下記のような変換結果がでます。

```
// !$*UTF8*$!
{
	archiveVersion = 1;
	classes = {
	};
	objectVersion = 46;
	objects = {

/* Begin PBXBuildFile section */
		BA218946A1F8E64C27B613CD /* Pods_Breris.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = F0B2DD76AFE7C2922950BB5D /* Pods_Breris.framework */; };
		C704FFE71FB0A67D0043E7BD /* bggfg.jpg in Resources */ = {isa = PBXBuildFile; fileRef = C704FFE61FB0A67D0043E7BD /* bggfg.jpg */; };
		C704FFE91FB0A68C0043E7BD /* world.jpg in Resources */ = {isa = PBXBuildFile; fileRef = C704FFE81FB0A68C0043E7BD /* world.jpg */; };
		C7080F921FFC317F0077A4AD /* TwitterAuth.swift in Sources */ = {isa = PBXBuildFile; fileRef = C7080F911FFC317F0077A4AD /* TwitterAuth.swift */; };
		C7080FB21FFC97F60077A4AD /* Capture.swift in Sources */ = {isa = PBXBuildFile; fileRef = C7080FB11FFC97F60077A4AD /* Capture.swift */; };
		C7080FC81FFE49A30077A4AD /* checkmark-flat.png in Resources */ = {isa = PBXBuildFile; fileRef = C7080FC71FFE49A30077A4AD /* checkmark-flat.png */; };
		C7080FCA1FFE4A0B0077A4AD /* TwtterStatus.swift in Sources */ = {isa = PBXBuildFile; fileRef = C7080FC91FFE4A0B0077A4AD /* TwtterStatus.swift */; };
		C7080FCC1FFE4A200077A4AD /* TwitterStatus.xib in Resources */ = {isa = PBXBuildFile; fileRef = C7080FCB1FFE4A200077A4AD /* TwitterStatus.xib */; };
		C7080FCE1
....... any
..... any
... any
.. any
any
```

***-r を使うことにより***

使用中のアプリに直接影響を与えることなく、変換したファイルを別の名前で出力します。

```
xsort ../App/App.xcodeproj -r
```

***xsort のバージョンを出力します。***

オプション -v で

```
->> ./xsort -v

Version: 1.2.4
```
React Native の UI ライブラリ まとめ

2018/12/18時点でのまとめ


数値だけ見ると NativeBase だなあ

| 名前                                                                      | GitHub Star | Contributors | Latest Update     | TypeScript | Flow |
| :-:                                                                       | :-:         | :-:          | :-:               | :-:        | :-:  |
| [NativeBase](https://github.com/GeekyAnts/NativeBase)                     | 10843       | 107          | 10 minutes ago    | O          | O    |
| [Shoutem UI](https://github.com/shoutem/ui)                               | 3918        | 27           | 1.5 month ago | X          | X    |
| [react-native-ui-kitten](https://github.com/akveo/react-native-ui-kitten) | 3307        | 16           | 8 days ago        | X          | X    |
| [react-native-paper](https://github.com/callstack/react-native-paper)     | 2422        | 53           | 13 hours ago      | O          | O    |
| [react-native-ui-lib](https://github.com/wix/react-native-ui-lib)         | 1342        | 34           | 14 hours ago      | O          | O    |
IoT パートナーコミュニティフォーラム 2018 参加記録

12/17 に東京/品川で行われた [IoT パートナーコミュニティ](http://iot.uhuru.co.jp/partner/) フォーラム 2018 への参加してきたので、そちらのまとめです。

[フォーラムのページ]([IoT パートナーコミュニティ](http://iot.uhuru.co.jp/partner/))

![IMG_2033.JPG](https://qiita-image-store.s3.amazonaws.com/0/22754/56341fa8-aa68-830c-1996-e99ca3738f9f.jpeg)

### 参加目的

IoT パートナーコミュニティはソラコムも参加しておりまして、年次状況のsyncを目的として参加しました。
同コミュニティの事務局をされている [ウフル](https://uhuru.co.jp/) さんも地域の IoT 化や [データ流通推進協議会](https://data-trading.org/) といった活動や参画してるので、その情報収集も兼ねてます。

### 受講セッション

**開会あいさつ: [ウフル 八子さん](http://iot.uhuru.co.jp/about/profiles/)**

![yako.jpg](https://qiita-image-store.s3.amazonaws.com/0/22754/fd240313-8ddf-4a63-afbf-10623d964933.jpeg)

57社という多くは無い企業が9つのワーキンググループを構成し、5期にわたってコミュニティを続けられるのは、 IoT に対する可能性・将来性を感じている本気の企業が取り組んでいる証左という紹介。
そして情報発信を積極的に行うことも重視しており、成功体験だけでなく失敗も共有して後に続く IoT を活用したい企業の後押しをしていくという参加者の使命感もある。（ただ、飲んでるだけじゃないｗ）

**基調講演 "IoT で PoC 貧乏にならないための３つの取り組み": [斎藤さん](https://www.netcommerce.co.jp/new-home-2/saito_circle)**

![saito.jpg](https://qiita-image-store.s3.amazonaws.com/0/22754/c3457dc9-608c-5e0d-63b4-d43a58d27c9e.jpeg)

デジタル・トランスフォーメーション(DX)からの解説。それは「人々の暮らしをよくするための方法論」として紹介。
そして「なぜ取り組むんだっけ？」という自問が大切で、取り組むならばその結果は DX をもたらす、即ち「良くする」ためだということ。

新規に始めるときの思考で **自分たちには何ができるか** という、主語＝自分からというものは失敗確率が高いとのこと。
実際は **具体的な顧客名が挙げられるくらいのお客** の **あるべき姿** から「何ができるだろう＆何ができないのか」という思考が成功しやすい（できるとは言わないよ）

所感；
前半でかなり DX から始まり OpsDev など現在の開発手法を手厚く解説していたが、これは「基礎」ができてないと失敗しちゃうよというメッセージと受け取りました。

**データ流通が創る未来: [ウフル 杉山さん](http://iot.uhuru.co.jp/about/profiles/)**

![sugiyama.jpg](https://qiita-image-store.s3.amazonaws.com/0/22754/9fd83a25-351b-7aa9-165b-65bc35e7b557.jpeg)

「石油からデータへ」2007年と2017年 10年間の時価総額トップ企業が変わってきたという導入。 GAFA に始まる企業の本質がそこにあるという話。
新しいデータ流通のモデルは「個人情報をストアする場所」「流通させるマーケットプレイス」この両輪がコア。

データ取引市場の3つの機能は、そのほかにおける「市場」と同じ。供給、需要、仲介。
ただしそれを1企業がやっていくというのは様々な課題があるし心配事も多い。それをデータ流通推進協議会という団体で解決していくというのが意義で、2018年12月で 126 会員。
[官民データ活用共通プラットフォーム協議会](https://dpc-japan.org/) とも連携済み。

データの取り扱い戦略として興味深いのは NTT のラスベガス。これからの日本のデータ取り扱いの在り方の一つだと考えられるとのこと。

所感；
取引の機能自体はいわゆるシンプルな形ではあるが、おそらくはアドネットワークやDSP https://dmlab.jp/adtech/dsp.html のようになる気がする。
個人データを広告として読み替えれば Publisher はデータ供給する側だし、Marketer は市場そのもの。広告業界もシンプルにはこれで終わるはずなのに様々なプレイヤーが存在する([ネイティブ広告カオスマップ](http://rtbsquare.ciao.jp/?page_id=211))わけなので、もしデータ流通の業界が盛り上がるとしたらそのようなプレイヤーが参入できる余地があるべきなんだろうと思う。

### まとめ

IoT はデータを集めるための仕組みとしてゴールを設定するのではなく、やはりデータ活用からの逆算が重要という事がしきりに語られていたのが印象深い。
とはいえ、どんなものが使えるのか？ということを自前で調べて時間を浪費するくらいなら、コミュニティの知見を活かすのが近道であるとも感じた。ただし、日本的な「結果をくれくれ」というスタンスでは、**アウトプットを積極的に公開していく** このコミュニティではちょっと苦しそうだなーというのもある。

結論「与えよ、さらば与えられん」

### あとがき

全部見られなくてスマセンでした。

EoT
GitHubのsshキーをGitLabでも使えるようにする(備忘録)

つい最近までGiLabにあるリポジトリにPushができていて問題ないと思っていたけど、先日、GitLabにある別プロジェクトをクローンしようとしたら以下のエラーが出ました。

```
Cloning into 'wordcloud'...
git@gitlab.xxx.xx.xx: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
```

GitLabに登録したsshキーは最初にGitHub用に作成したsshキーです。この同じsshキーをconfigで管理して使っていて、sshキー自体は`~/.ssh`直下ではなく`~/.ssh/github/`フォルダ内に置いています。

configの設定はこんな感じです。

```sh:~/.ssh/config
# GitHub
Host GitHub
        HostName github.com
        IdentityFile ~/.ssh/github/id_rsa
        TCPKeepAlive yes
        IdentitiesOnly yes
        User git

# GitLab
Host GitLab
        HostName gitlab.xxx.xx.xx
        IdentityFile ~/.ssh/github/id_rsa
        TCPKeepAlive yes
        IdentitiesOnly yes
        port 18636
        user git
```

今回の場合は、GitLabにプッシュはできるけど、クローンができない状況です。最初にGitLabにsshキーを登録してプロジェクトをクローンしたときには、sshキーは`~/.ssh`フォルダ直下にあり、クローンした後でsshキーを`~/.ssh/github`に移動させて使っていたのが原因かな、と思い、GitLabのssh登録ページを調べてみると、以下の説明がありました。

> **Working with non-default SSH key pair paths**  
> If you used a non-default file path for your GitLab SSH key pair,
> you must configure your SSH client to find your GitLab private SSH key
> for connections to your GitLab server (perhaps gitlab.com).
> For your current terminal session you can do so using the following commands
> (replacing other_id_rsa with your private SSH key):

```
ssh-add ~/.ssh/other_id_rsa
```

つまり、GitLabで使うsshキーがデフォルトではない場合、この`ssh-add`コマンドで認証を追加する必要があるようです。この`other_id_rsa`を`~/.ssh/github/id_rsa`に変更してクローンしてみると、正常に動作しました。
UITableViewCellの高さを可変にする

#はじめに
AutoLayoutをコードベース書いた時のメモです。
することは以下の３つ。

1. cellのcontentViewに追加するViewのAutosizingのレイアウト自動変換をオフにする
2. cellのcontentViewに追加するobject制約は上下左右にする
3. cellの高さをdelegateでUITableview.automaticDimensionにする

#ViewControllerでの記述
まずはUITableViewDelegateメソッドでAutosizingの自動変換オフとcellの制約を決めていく。

```swift:ViewController.swift
  func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "shareCell", for: indexPath) as! ShareTableViewCell
        
        cell.cellHeaderView.backgroundColor = UIColor.red
        //ここでAutosizingの自動変換をオフにする
        cell.cellHeaderView.translatesAutoresizingMaskIntoConstraints = false
        cell.cellHeaderView.topAnchor.constraint(equalTo: cell.contentView.topAnchor).isActive = true
        cell.cellHeaderView.rightAnchor.constraint(equalTo: cell.contentView.rightAnchor).isActive = true
        cell.cellHeaderView.leftAnchor.constraint(equalTo: cell.contentView.leftAnchor).isActive = true
        cell.cellHeaderView.bottomAnchor.constraint(equalTo: cell.contentView.bottomAnchor).isActive = true
        cell.cellHeaderView.heightAnchor.constraint(equalToConstant: 100).isActive = true
        
        
        
        return cell
    }
```


###cellの高さを可変に設定

```swift:ViewController.swift
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        tableView.estimatedRowHeight = 100
        //UITableView.automaticDimensionでcellの高さを可変にする
        return UITableView.automaticDimension
    }
```

#最後に
cellに追加するView達のインスタンスは一応UITableViewCellクラスで行った。

```swift:UITableViewCell.swift
override func awakeFromNib() {
   super.awakeFromNib()
   cell.contentView.addSubView(cellHeaderView)
}
```
デザイナー的SublimeTextパッケージ

# はじめに
こんにちは。WEBデザイナー見習いモドキ未満みたいな感じの存在です。
アドベントカレンダーを書くことになりました。

弊社ではデザイナーは基本的に`SublimeText`をエディターとして使っています。そこで、WEBデザイナー的な視点でのパッケージ構成を紹介していこうと思います。
（主にコーディングしているのはHTML5、CSS3、SCSS、jQueryです）

# とりあえず一覧
```
		"installed_packages":
	[
		"10% Too Dull for My Tastes Color Scheme",
		"1337 Color Scheme",
		"AutoFileName",
		"BoundKeys",
		"BracketHighlighter",
		"Codecs33",
		"Color Highlighter",
		"ConvertToUTF8",
		"CSS3",
		"Emmet",
		"FileIcons",
		"FileOpTabContextMenu",
		"Goto-CSS-Declaration",
		"HTML5",
		"Japanize",
		"jQuery",
		"Package Control",
		"Print to HTML",
		"Sass",
		"SideBarEnhancements",
		"SublimeLinter",
		"SublimeLinter-contrib-scss-lint",
		"Sublimerge Pro",
		"SyncedSideBar",
		"TrailingSpaces",
		"View In Browser"
	]
}
```

絶対無駄なのありますねこれ！
ご覧の通り、私は使うかわからないパッケージも入れちゃうし、Chromeもアドオン盛り盛りな性格です。（そのせいで問題が起きるとしても）

# よくつかうパッケージ
## BracketHighlighter
`[]、{}、<>`のような囲いを強調して表示してくれます。
たまに閉じ漏れしてしまうので、予防として役立ちますね。

## Codecs33,ConvertToUTF8
SHIFT-JISとか開けるようになります。UTF-8の変換とかも可能。

## Emmet
正直扱いきれてませんが、便利なはず。使いこなせればきっとコーディングが爆速になるに違いない。

## Goto-CSS-Declaration
ショートカットでHTML上に記述されているCSSに飛べるようになるパッケージです。
複数のCSSを読み込んでいるHTMLの場合、「はて、このclassはどこにあるんだ…？」がなくなるので結構便利です。

## HTML5,jQuery,Sass,CSS3
入れておけば、途中まで入力した際に補完してくれます。
この辺はどの言語を使っているかにもよりますが、全部手打ちしてるとミスに繋がりかねないので、自動補完はミス防止になりますね。

## Japanize
日本語化です。

## SideBarEnhancements
サイドバーが便利になります。

## SublimeLinter
構文Errorを指摘してくれるツールです。よく間違える身としては大変ありがたいのですが、たまにバグって全文指摘してきます。

## SyncedSideBar
現在開いているファイルがハイライトで表示されます。デフォでついてないのがおかしい気もする。そういうものなのか。

## A File Icon
サイドバーのファイルの横に拡張子ごとのアイコンがつくようになります。
見た目でわかりやすくなるのはいいですね。

## TrailingSpaces
行末にある不要なスペースをめちゃくちゃ目立つ感じで表示してくれます。
コマンドパレットから`Trailing Spaces: Delete Trailing Spaces`を入力すれば一括削除もできます。




# たまに使うパッケージ
## 10% Too Dull for My Tastes Color Scheme,1337 Color Scheme
まとめてご紹介。
どちらもカラースキームを変更します。実用性は特にないんですけども、気分を変えたいときに。いずれにせよ白背景は目がつかれるので黒とかダークブルーとかになりますが。

## AutoFileName
ファイルパスを補完してくれるパッケージです。
特に便利なところは画像の補完をした際に幅と高さの表示＆補完もしてくれるところです。

## BoundKeys
増えに増えたショートカットをまとめてくれます。
たまにこれで確認しないとそもそも何が入っていたのかわからなくなります。

## Print to HTML
一度しか使ったことがないのですが、紙に印刷してコードチェックしたりするときに便利です。
コードに文字色装飾をした状態で印刷を行うことが出来ます。

## Sublimerge Pro
いわゆるDiffをとる為のパッケージです。
弊社では基本Git管理ですし、こまめにコミットするようにしているのでたまーにしか使いませんがあると便利です。

## View In Browser
便利なんですけど設定が大変で…。
ブラウザでプレビューが見れるようになります。

# さいごに
この記事を書いていたら5個ほどインストールしたものの、まったく使ってないパッケージがあったので削除しました。そういうこともあります。
SublimeTextは自由にパッケージを追加して、ユーザー毎の需要に近づけていけるのはとても良いですね！みなさんも自分に合ったパッケージを見つけましょう！私もパッケージの整理が出来たので新しいパッケージを探そうと思います！ではでは！
最近のPolymerプロジェクト関連サイトを日本語翻訳してみた

何を思ったか絶賛[年内v1.0リリース](https://www.polymer-project.org/blog/2018-12-13-lit-html-rc)に向けて[ばたばた](https://github.com/Polymer/lit-html/issues/540#issuecomment-448064794)している[Polymerプロジェクト](https://www.polymer-project.org/)関連サイトを[日本語翻訳](https://www.polymer-jp.org/)してみました。


![image.png](https://qiita-image-store.s3.amazonaws.com/0/90678/d3d7684b-33e1-8b31-c62d-96529b11dfb5.png)

- [:zap: lit-html 日本語版](https://lit-html.polymer-jp.org/) [:octocat:](https://github.com/Polymer-Japan/lit-html-docs-jp/tree/jp-translate/docs)
- [:wrench: LitElement 日本語版](https://lit-element.polymer-jp.org/) [:octocat:](https://github.com/Polymer-Japan/lit-element-docs-jp/tree/jp-translate/docs)
- [:rocket: PWA Starter Kit 日本語版](https://pwa-starter-kit.polymer-jp.org/) [:octocat:](https://github.com/Polymer-Japan/pwa-starter-kit-docs-jp/tree/jp-translate)

## 作業方法

- それぞれリポジトリを[Polymer-Japan](https://github.com/Polymer-Japan)につくらさせてもらい、本家masterから日本語ブランチ(jp-translate)をきって手動翻訳([GitLocalize](https://gitlocalize.com/)とかは使ってない)
- 基本[Jekyll](https://jekyllrb-ja.github.io/)でdocsディレクトリをビルドするだけ（例外アリ）
- Markdown 4,5千行を1週間程度で書き換えていけたのは、ひとえに[google-translate.elのおかげ](https://qiita.com/akicho8/items/d7b84ee2cd98b2073a61)
- [Cloud Builds](https://cloud.google.com/cloud-build/)のコミット・公開がかなり使いやすい(例: [cloudbuild.yaml](https://github.com/Polymer-Japan/lit-html-docs-jp/blob/jp-translate/docs/cloudbuild.yaml))
- GitHubの[project board](https://help.github.com/articles/adding-issues-and-pull-requests-to-a-project-board/)を[進捗管理表](https://github.com/Polymer-Japan/translation/projects/2)にするとわかりやすかった

まだまだ本家側でAPIやサイトデザインもいじられている最中ですが、追っていく予定なので、たまに覗いてもらえればです! :lifter: :lifter: :lifter:

[:christmas_tree: Web Components Advent Calendar 2018](/advent-calendar/2018/web-components)
:arrow_left: 17日目 [Polymer > Polymer3 > Polymer element その１](/sugasaki/items/03c742fb482cb9fd2738) @sugasaki
:arrow_right: 19日目 [lit-html を使い倒す](https://aggre.io/post/make-the-best-use-of-lit-html) @aggre
指紋認証デバイスで使えないときの対処法

# 環境
- Windows 10
- Synaptics WBDI SGX
- エラーコード:10

# 対処法
1. デバイスマネージャーを開く
2. 指紋認証デバイスを右クリックし、アンインストールを選択
3.  [このデバイスのドライバソフトウェアを削除する]にチエックを入れ、[OK]を選択
4.  PCを再起動する

再起動後に指紋認証デバイスが利用可能になります。
Typora の箇条書きの行間を調節する．

# やりたいこと
Typora の標準テーマでは箇条書きの行間が広すぎるように感じたので調節したい．
[こちらの公式サイト](https://support.typora.io/Add-Custom-CSS/)を参考にしました．

# 手順
1. 編集したいテーマを選ぶ．
2. テーマのユーザ設定用CSSファイルを作成する．
3. 作成したCSSファイルに行間に関する設定を記述する．

## 1. 編集したいテーマを選ぶ．
メニューバーから [テーマ] を選択します．ここでは "Github" テーマを編集するとします．

## 2. テーマのユーザ設定用CSSファイルを作成する．
メニューバーから [ファイル] / [設定] / [テーマフォルダを開く] を選択すると，ファイルエクスプローラが開きます．
github.css というファイルがあるので，github.user.css という名前のファイルのコピーを作ります．github.user.css の中の文章を全部消します．

## 3. 作成したCSSファイルに行間に関する設定を記述する．
ここでは特に箇条書きに関する行間を指定します．
箇条書きには次の二種類存在します．

* un-ordered lists (ul)

1. ordered lists (ol)

### ul も ol も共通設定にする．

``` github.user.css
/* lists */
ul,
ol {
    line-height: 1.4;
}
```

### ul と ol で別々の設定にする．

``` github.user.css
/* lists */
ul {
    line-height: 1.6;
}
ol {
    line-height: 1.4;
}
```

以上です．
TortoiseGitをAzureDevOpsで使うため設定


#ダウンロード
ダウンロードするファイルは、３つ。
1.Git-2.20.1-64-bit.exe
2.TortoiseGit-2.7.0.0-64bit.msi
3.TortoiseGit-LanguagePack-2.7.0.0-64bit-ja.msi


- Git for Windows
  https://gitforwindows.org/
![Screenshot_3.png](https://qiita-image-store.s3.amazonaws.com/0/47172/b661558f-d739-a6ef-a76e-abd07bd26676.png)

- tortoisegit
 https://tortoisegit.org/download/
tortoisegit本体

![Screenshot_1.png](https://qiita-image-store.s3.amazonaws.com/0/47172/69db97a5-fd94-f7d7-eada-d5449be80805.png)
 tortoisegit日本語化
![Screenshot_2.png](https://qiita-image-store.s3.amazonaws.com/0/47172/09638c4a-db5e-d427-b34f-e5c6c3f49b8a.png)


# インストール
Git for Windowsをインストールしたあとに、
TortoiseGitをインストールして、TortoiseGitの日本語パッケージをインストールする手順です。

## Git for Windowsのインストール
![image.png](https://qiita-image-store.s3.amazonaws.com/0/47172/bed9ad45-65c1-a78e-700c-9dcb3c8b7878.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/47172/1d3df2c2-868b-c6b2-89f2-bb4c6435451a.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/47172/74fcc0be-4474-29fb-7957-6368194a314a.png)
一番上を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47172/21c38687-dc61-e54f-4a11-a203a60f6546.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/47172/bbca9796-e54b-f342-c2ab-4911358b8a9d.png)

一番下を選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47172/79c358b7-2229-0cac-a4bb-668b631d344f.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/47172/90f4f307-d37d-2021-7cfd-d3145e3adea7.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/47172/7683724c-56a8-8450-5072-cc598f2fc775.png)
チェックを外して、Finishボタンを押す。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/47172/a1742144-ef92-638c-9764-2858a176e051.png)

## TortoiseGitのインストール

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47172/f5464269-7d85-b856-de93-39a93a8ab314.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47172/aea07bc5-ac16-f548-10d3-a6b6532b50b2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47172/8b5124f6-a8df-fcaf-844a-447222cae105.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47172/ada70746-09a6-4825-d9fa-05bde410d2f7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47172/7bb55bff-33db-7f2d-5782-9ef577de65ae.png)






# AzureDevOpsの接続設定
※あとで書きます。
【初心者向け】RailsでAPI開発 Part.4

# これは何？
[【初心者向け】RailsでAPI開発 Part.3
](https://qiita.com/jiggaman0412/items/cf4340d6bc20805e7af1)の続きです。

今回はセキュリティ編になります。

# 概要
## ▼ 仕組み
1. 異なるドメイン間のリクエストを許可する（HTTPアクセス制御）
    2. CORS（Cross-Origin Resource Sharing）
    3. 別の言い方をすると許可されていないウェブサイトからのアクセスをブロックします。
2. 過剰なリクエスト攻撃（DOS攻撃）を制御する

## ▼ 使用するもの
- rack-cors
- rack-attack


# 手順
## ① rack-corsの設定
```text:Gemfile
gem 'rack-cors'
```

```text:terminal
bundle install
```

```ruby:config/initializers/cors.rb
Rails.application.config.middleware.insert_before 0, Rack::Cors do
 allow do
  # TODO: 本番デプロイの前には本番用ドメインを指定する
  origins '*'
  resource '*',
   headers: :any,
   methods: [:get, :post, :put, :patch, :delete, :options, :head]
 end
end
```

クロスドメインのアクセス許可をするには上のように設定するだけで実現可能です。
ただ、この場合全て許可しているため、セキュリティを高めるにはドメインを指定してください。

## ② rack-attackの設定
```text:Gemfile
gem 'rack-attack'
```

```text:terminal
bundle install
```

```ruby:config/application.rb
..
config.middleware.use Rack::Attack
..
```

```ruby:config/initializers/rack_attack.rb
class Rack::Attack
 # DOS攻撃の制御
 throttle('req/ip', limit: 300, period: 5.minutes) do |req|
  req.ip
 end

 # エラーハンドリング
 self.throttled_response = lambda do |env|
  [ 503, {}, ["Server Error\n"] ]
 end
end
```

今回は、[rack-attack公式](https://github.com/kickstarter/rack-attack/wiki/Example-Configuration)のサンプルコードを参考にしてDOS攻撃の制御を書きましたが、
Rack-Attackでは、この他にもIP制御なども可能です。

# まとめ
サーバーを脅かす悪意のある攻撃は多数あります。
[こちら](https://github.com/takahashiakira/tech_for_web/wiki/Web%E3%82%B5%E3%83%BC%E3%83%90%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3#%E4%B8%BB%E3%81%AA%E6%94%BB%E6%92%83%E3%81%AE%E7%A8%AE%E9%A1%9E)にその一覧が詳しく載っています。

今回はその中でもほんの一部の対策を施しただけですが、
Rails標準でもかなりのセキュリティ対策をしてくれています。
一応は上記の対策と、SQLインジェクションくらいを気にすれば大丈夫なのではないかなと思ってます。

次回は最後ですが、RSpecを用いてこれまで設定したAPIのテストケースを書いていきたいと思います。
MariaDBを使い始めようと思うのでメモ

今は趣味で構築しているサイトでSQLiteを使っているのですが、いろいろな理由からMariaDBに移行しようと思います。
そのためのメモです。
あくまでも個人的なメモのため、くだらない記事を読んだと怒らないようにお願いします。

#インストール
https://server.etutsplus.com/centos-7-mariadb-install-and-mysql-secure-installation/

#コマンド集
https://qiita.com/pugiemonn/items/247dccb6dc56e373ba92

#Entity Framework Core
MySQLのやつを使えばOK
MySql.Data.EntityFrameworkCore
https://www.nuget.org/packages/MySql.Data.EntityFrameworkCore/

#接続文字列
"Server=localhost;Uid=root;Pwd=XXXX;Database=testdb;"

#型
http://phpjavascriptroom.com/?t=mysql&p=columntype

#AUTO_INCREMENT
https://dev.mysql.com/doc/refman/5.6/ja/example-auto-increment.html
AUTO_INCREMENTの値を変える
https://mayer.jp.net/?p=4997

#lower_case_table_names
Linuxにインストールした場合、デフォルトでテーブル名の大文字小文字を区別する。
区別したくなければ設定を変更する。（lower_case_table_names）
https://moznion.hatenadiary.com/entry/2015/04/13/005641
設定を変更する前に作ってしまったデータベースは作り直さないといけない。
https://dev.mysql.com/doc/refman/5.6/en/identifier-case-sensitivity.html
Spring Boot/HerokuアプリをVSCodeに取り込む

[Spring-Boot/Herokuの始め方](https://qiita.com/pilot/items/9761edf9e394faabddd3)の続き

IntelliJはUltimateならHeroku対応らしいが有料なので自分以外の人に勧められない
Eclipseは重たい

1. 以前からサーバサイドJSの開発に使っていたVSCode(日本語対応やGitやら既にいろいろ入っている)に以下をインストールして有効化のために再起動(再読込)
    1. [Java Extension Pack](https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-pack)
    1. [Maven for Java](https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-maven)
    1. [Spring Boot Extension Pack](https://marketplace.visualstudio.com/items?itemName=pivotal.vscode-boot-dev-pack)
1. [ファイル]-[フォルダを開く]で前回のアプリのフォルダ(\herokustudy\myfirstapp)を開く
1. CTRL+Pで「DemoApplication.java」を探して開く
1. main()の上に表示されている「Run」クリックでTomcat起動
1. ソース編集後は画面上部の矢印がくるっと回っているアイコンクリックでTomcat再起動
1. 止めるには画面上部の■アイコンクリックで
1. 編集結果をHerokuにデプロイするにはコミットした後にプッシュ先に「heroku」を指定してプッシュ

使っててJAVA_HOMEが無いためにエラーになるような操作があった
`where java`でインストール先を調べて
`setx /M JAVA_HOME "C:\Program Files\Java\jdk1.8.0_191"`で設定

以上
スコープ付きコンポーネントに親コンポーネントからスタイルを適用する方法

vueの`scoped`の扱いで躓くことがあったので備忘録として。

## スコープ付きコンポーネントとは?
下記のコードのように`style`要素に`scoped`属性を持ったCSSはそのコンポーネントにのみ適用されます。

```vue
<template>
  <p class="hoge">fuga</p>
</template>

<style scoped>
.hoge {
 color: red;
}
</style>
```
コンパイルするとわかるように、要素とセレクタに`data-v-589fsdf`のようなユニークな属性が付与されることによって他の要素にCSSが漏れ出さないようにしています。



## 親コンポーネントからスタイルを上書きする方法
`scoped`はとても便利な機能ではありますが、親コンポーネントからスタイルを上書きするには特殊なセレクタを使用する必要があります。

```vue
/* css記法の場合 */
<style scoped>
.parent >>> .child { … }
</style>

/* scss記法の場合 */
<style scoped>
.parent /deep/ .child { … }
</style>
```
css記法の場合は`>>>`、scss・sass記法の場合は`/deep/`というコンビネータを使うことによって`scoped`を持った子コンポーネントのスタイルを上書きすることができるようになります。
レスポンシブサイトで画像の切り替えに便利なpicture要素

レスポンシブサイト開発で必ず対応するであろうPC,Tablet,Smartphoneでの画像・図の切り替え。
皆さんはどのような方法で対応しているでしょうか。

```html
<img class="display-pc" src="hoge_pc.png" alt="ほげ">
<img class="display-sp" src="hoge_sp.png" alt="ほげ">
```
上記のようにclassを付与してCSSのメディアクエリによって出し分ける方法が一般的でしょうか？

上記の方法以外にも画像をメディアによって出し分けられる`picture`要素を紹介します。

## picture要素

`video`や`audio`と同じ埋め込みコンテンツの要素で、書き方も同じです。

```html
<picture>
  <source srcset="hoge_pc.png" media="(min-width: 980px)">
  <source srcset="hoge_tb.png" media="(min-width: 375px)">
  <img src="hoge_sp.png" alt="ほげ">
</picture>
```

`source`要素の`srcset`属性に画像を指定し、`media`属性にメディアクエリと同じようにメディア条件を指定します。

ユーザーエージェントがメディア条件を判定し、`false`と判定された場合に次の`source`を判定することになります。

`picture`を使えばマークアップ的にも見やすく、`display: none`と`block`を切り替えるclassを付与する必要もなくなります。
json の Marshal と Unmarshal の小さなサンプル

小さなサンプルです。

# Unmarshal

byte から instance を。

```go:Unmarshal(main.go)
package main

import (
	"encoding/json"
	"fmt"
)

func main() {
	var jsonBlob = []byte(`{"Name":"taro", "Age":42}`)
	type Person struct {
		Name string
		Age int
	}
	var p Person
	json.Unmarshal(jsonBlob, &p)
	fmt.Println(p)
}
```

```bash:run
$ go run main.go
{taro 42}
```

# Marshal

instance から byte を。

```go:Marshal(main.go)
package main

import (
	"encoding/json"
	"fmt"
)

func main() {
	type Person struct {
		Name string
		Age int
	}
	p := Person{Name: "maru", Age: 24}
	b, _ := json.Marshal(p)
	fmt.Println(b)
	fmt.Println(string(b))
}
```

```bash:run
$ go run main.go
[123 34 78 97 109 101 34 58 34 109 97 114 117 34 44 34 65 103 101 34 58 50 52 125]
{"Name":"maru","Age":24}
```

以上となります。

（つづいて、 proto.Marshal/Unmarshal のサンプルをやりたいとおもっています。
React + TypeScriptプロジェクトをcreate-react-appに任せる

# ⚠注意
まず、この記事が書かれた日付と、以下のバージョンを確認してください。
この記事は公式ドキュメントへの案内程度の役割を持てたらな、と思っています。

```.sh
$ npx create-react-app --version
npx: 63個のパッケージを4.086秒でインストールしました。
2.1.1

$ npm view typescript version
3.2.2
```

# create-react-app と TypeScript

facebook社公式のReactプロジェクト生成ツール [create-react-app](https://github.com/facebook/create-react-app) ですが、[2018/10/29リリースの v2.1.0 で TypeScriptを公式サポートするようになりました。](https://github.com/facebook/create-react-app/releases/tag/v2.1.0)

<img width="1137" alt="スクリーンショット 2018-12-18 12.43.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/103754/dc97153f-8474-aab7-c082-8fa5f1a5b10f.png">


以前までその役目を行っていたのが、create-react-appのforkリポジトリである [react-scripts-ts](https://github.com/wmonk/create-react-app-typescript/)でしたが、これを利用せずともcreate-react-appだけでTypeScriptを組み込めるようになったため役目を終えたようで、deprecatedとなってしまいました。

<img width="1250" alt="スクリーンショット 2018-12-18 12.44.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/103754/895a3a08-5477-d96b-05d9-8c009d428d7e.png">

# 新規にTypeScriptなReactプロジェクトを作る場合
以下のコマンドを叩くだけでいいみたいですね。

```.sh
$ npx create-react-app my-app --typescript
```

# create-react-appで作った既存のプロジェクトの場合
deprecatedとなった react-scripts-ts から create-react-appに以降しましょう。以下のブログ記事に移行方法が書かれています。

https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/

これをStep.1から順に行うと移行できます。

## ハマったところ

トラブルシューティングを読めばだいたい解決するはず…！
https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/#troubleshooting

### 1. tslint, tslint-react が消えた

`npm remove react-scripts-ts` すると諸々のパッケージが消えますが、TSLintも消えます。
create-react-appの依存には含まれていないので、手動で追加しましょう。

```.sh
$ npm install --save-dev tslint tslint-react
```

### 2. 大量の型エラーが出る
上であげたブログ記事にも書いてありますが、tsconfigのlibを指定しましょう。

https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/#value-not-found-property-does-not-exist-on-type-etc


### 3. tsconfigでなんか怒られる
これも記事に書いてありますが、予約されている、というかユーザーが指定できないtsconfigのパラメータがあります。それ以外の値を指定しましょう。

https://github.com/facebook/create-react-app/blob/87e3d4fd1080d290f675d0461e3d3656752628ab/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js#L105-L129

### 4. storybookが死ぬ
これも記事に書いてあります！

https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/#storybook

この手順に従えば動きましたが、Create React AppではBabelを使う一方でstorybookではTypeScriptを使うみたいですね。なんか複雑な感じに・・・。

> Additionally, while Create React App uses Babel to parse JSX, Storybook expects TypeScript to do so. 

# おわりに

私はVueやNuxt.jsから近年のフロントエンドに触り始めたので、Reactはなかなか設定が多くて大変だなーと思ってしまいがちです。
今回create-react-appがTypeScriptをサポートしてくれたので、今後はひとつ手間が減ることになるのではないでしょうか。期待です。
MySQL8.0のtemporary passwordについて

超小ネタ。いつか忘れると思ったのでメモ。

MySQL5.7以降はMySQLのインストール後/var/log/mysqld.logにrootのtemporary passwordが出力されます。
5.7だとこんな感じ。

```
2018-12-01T00:00:00.000000Z 1 [Note] A temporary password is generated for root@localhost: xxxxxxxxxxxx
```

MySQL8.0では以下のようになりました。

```
2018-12-01T00:00:00.000000Z 5 [Note] [MY-010454] [Server] A temporary password is generated for root@localhost: xxxxxxxxxxxx
```

2単語増えました。なのでawkでパスワードだけ抜き出す場合は5.7だと

```
cat /var/log/mysqld.log | grep 'temporary password' | awk '{print $11}'
```

でしたが、8.0では

```
cat /var/log/mysqld.log | grep 'temporary password' | awk '{print $13}'
```

になりました。
Ansibleのymlとかに埋めてる場合は注意が必要です。
jupyterでmatplotlibのrcParamsの設定を最初のセルに書くと無視される

jupyterとmatplotlibを使ってグラフを作ることは多くの人がやると思う。
そのグラフの表示をカスタマイズするために`plt.rcParams`を変更する方法があるが、この変更を最初のセルで行うと設定変更が適用されない。

どうやらjupyterのバグらしい。
https://github.com/jupyter/notebook/issues/3385

rcParamsとは何かということについては例えば以下の記事が参考になる。
- https://qiita.com/hysterect/items/67c94a62ae0a0c258449
- http://cyanatlas.hatenablog.com/entry/2018/06/20/144937

# 動作確認したバージョン

- Python 3.7.0
- jupyter 1.0.0
- jupyter-core 4.4.0
- jupyter-console 6.0.0
- jupyter-client 5.2.3
- matplotlib 3.0.1

# 問題となるケース

最初のセルでmatplotlibをimportして、rcParamsを設定する。

最初のセルに以下を入力。

```py3
import numpy as np
import matplotlib.pyplot as plt

plt.rcParams['font.size'] = 20   # フォントを大きくする
```

２つ目のセルに以下を入力。

```py3
x = np.arange(-3.0, 3.0, 0.01)
plt.plot( x, np.sin(x) )
```

実行すると以下の様になりフォントが小さいまま。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/28792/b7bb2d21-6431-b782-5fef-65ed807dcd5b.png)

# 回避方法

このバグはrcParamsの設定を２つ目以降のセルで行うことで回避できる。以下の様にimportとrcParamsの設定を別のセルで行うと、rcParamsが適用されフォントの大きさが変わった。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/28792/3db86ed1-91c3-3e18-83b7-05ab55c508db.png)
brewでインストールしたapacheの設定

## 概要

macOSのbrewでインストールしたapache httpdを開発で利用しやすように設定します。

`http://localhost/`でアクセスすると`~/Sites`ディレクトリの、ユーザー権限で編集できるファイルにアクセスされるようにします。


## httpd.conf編集

`/usr/local/etc/httpd/httpd.conf`を編集します。それぞれの字句を検索して該当箇所を変更してください。

### ポート変更

```
#
# Listen: Allows you to bind Apache to specific IP addresses and/or
# ports, instead of the default. See also the <VirtualHost>
# directive.
#
# Change this to Listen on specific IP addresses as shown below to 
# prevent Apache from glomming onto all bound IP addresses.
#
Listen 80
```
### DocumentRoot

`DocumentRoot`とその直後の`Directory`のディレクトリを変更します。
（下記の<user>を`ls -d ~/Sites`で表示されるディレクトに変更します）

```
# DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.
#
DocumentRoot "/Users/<user>/Sites"
<Directory "/Users/<user>/Sites">
```

`<Directory ...>`の中の`AllowOverride`を`all`に変更

```
    #
    # AllowOverride controls what directives may be placed in .htaccess files.
    # It can be "All", "None", or any combination of the keywords:
    #   AllowOverride FileInfo AuthConfig Limit
    #
    AllowOverride All
```
### mod_rewrite

`#`を除去してアンコメントします。

```
LoadModule rewrite_module lib/httpd/modules/mod_rewrite.so
```

### User ＆ Group

ユーザーとグループ名を変更。
これでユーザー権限でweb公開ファイルが編集できます。

```
User <user>
Group staff
```

### ServerName

サーバー名をlocalhostに

```
ServerName localhost
```

以上で設定完了です。

### 確認

apacheをリスタートさせ http://localhost/ で確認してみましょう。

```
sudo apachectl -k restart
```

以下のwebページが表示されます。 [^1]

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3940/a3d369b4-51ef-3104-87e4-a6742807998d.png)

## 関連

  * [macOS MojaveでLiip PHPのインストール](https://qiita.com/koriym/items/7c1b42338586c495089f)


[^1]: ちなみに[iWeb](https://ja.wikipedia.org/wiki/IWeb)は2011年に開発終了してます...
CakePHP2、Authコンポーネントでログインの条件を追加

cakephpの認証と言えばAuthだが、とても便利なものなのだが、usernameとpassword以外に追加の条件を追加したい、ということになると途端に面倒になる。

自分も過去以下のような記事を書いているが。。。

https://qiita.com/uedatakeshi/items/fdbfe0f39418e163be7e

https://qiita.com/uedatakeshi/items/258f034949618386d939

いざ実装してみるとうまくいかないことが多い。

例えば今回はユーザーがある場所に所属していて、場所Aにログインできるユーザー、場所Bにログインできるユーザー、どちらにもログインできるユーザーがあるようなケースでどうするか、というので悩んでいた。

なにかやり方があって追加の条件を追加できるのではないだろうかと。。。

だがしかし思ったのだが、別に認証は認証でusernameとpasswordだけで済まして、その後で追加の項目について自分で実装すればよいのでは？

追加の項目がだめだったらログアウトさせてしまえばよいのでは？

というのが私のたどり着いた結論である。

```php:UsersController.php
            if ($this->Auth->login()) {
                // ここでログインしたユーザーIDと場所のIDを使ってさらに認証する
                $options = array('conditions' => array(
                    'UsersPlace.user_id' => $this->Auth->user('id'),
                    'UsersPlace.place_id' => $this->request->data['User']['place_id'],
                ));
                $count = $this->UsersPlace->find('count', $options);
                if ($count > 0) {
                    // 認証OKなら場所IDをAuthのセッションに追加してリダイレクト
                    $user['User'] = $this->Auth->user();
                    $user['User']['place_id'] = $this->request->data['User']['place_id'];
                    $this->Session->write("Auth", $user);
                    $this->redirect($this->Auth->redirect());
                } else {
                    // NGならログアウトして帰る
                    $this->Auth->logout();
                    $this->Flash->error(__('Invalid username or password, try again'));
                }
            } else {
                $this->Flash->error(__('Invalid username or password, try again'));
            }
```

考えすぎだった〜。
クラス変数じゃなくてクラスインスタンス変数を使う

クラス変数は使わないほうがいいとRubocopを始めいろいろな人から助言を受けます。

クラス変数を持つクラスを継承して使う際に、次のようにちょっと困ったことが起こります。

```ruby
# 親クラス (クラス変数を持っている)
class Base
  @@quux = 'quux'

  def self.quux
    @@quux
  end

  def self.quux=(value)
    @@quux = value
  end
end

# 子クラスその1
class Foo < Base
end

# 子クラスその2
class Bar < Base
end

# クラス変数を表示 (初期値が見える)
p Foo.quux # => "quux"
p Bar.quux # => "quux"

# Fooのクラス変数を変更する
Foo.quux = 'hi'

# クラス変数を表示
p Foo.quux # => "hi" 変更したとおりに変わっている
p Bar.quux # => "hi" Barのクラス変数までも変わっている
```

継承した片方のクラスでクラス変数を変更すると、同じく継承したもう一方のクラスのクラス変数までもかわってしまいます。

意図的に使うならともかく、大抵の場合、おそらく期待しない動作です。

### クラスインスタンス変数

クラス変数の代わりに、クラスインスタンス変数を使うように勧められます。

```ruby
# 親クラス (クラスインスタンス変数を持っている)
class Base
  def self.quux
    @quux
  end

  def self.quux=(value)
    @quux = value
  end

  def self.inherited(klass)
    klass.quux = 'quux' # 共通の初期値を設定
  end
end

# 子クラスその1
class Foo < Base
end

# 子クラスその2
class Bar < Base
end

# クラスインスタンス変数を表示 (初期値が見える)
p Foo.quux # => "quux"
p Bar.quux # => "quux"

# Fooのクラスインスタンス変数を変更する
Foo.quux = 'hi'

# クラスインスタンス変数を表示
p Foo.quux # => "hi" 変更したとおりに変わっている
p Bar.quux # => "quux" Barのクラスインスタンス変数か影響を受けていない
```

なお、クラスインスタンス変数に対するアクセサは、次のようにすれば、インスタンス変数に対するものと同様に簡単に定義できます。

```ruby
class Base
  class << self
    attr_accessor :quux
  end
end
```
php-master-changes 2018-12-17

今日は throw new SodiumException しようとすると SEGV が起きる問題の修正、opcache 最適化コード内の重複コード除去、分岐予測ヒントの修正があった！

# 2018-12-17
## paragonie-scott: Fix [#77297](https://bugs.php.net/bug.php?id=77297): SodiumException segfaults on PHP 7.3
- https://github.com/php/php-src/commit/e0e08d376ed14c6a94e2712659828a60aa71b70a
- [7.3~]
- ext/sodium で、関数やメソッド内から throw new SodiumException しようとすると SEGV が起きる問題の修正
- 情報漏洩を防ぐため、バックトレースから引数情報を除去する処理みたい、なるほど

## nikic: CFG construction: Avoid code duplication
- https://github.com/php/php-src/commit/da1e6679b7bf1aa13768aad6a4b184b5ba2a0bba
- ext/opcache で、最適化のための制御フローグラフ構築用の処理に重複コードがあったのでまとめた

## dstogov: Fixed expectation
- https://github.com/php/php-src/commit/5341d17c344476670725630422b9d66e47ec4e0f
- ZVAL_DEREF を展開すると UNEXPECTED になるところを EXPECTED で直書き
Typescriptで時刻順にオブジェクトを並べ替える

##Typescriptで時刻順にオブジェクトを並べ替え方を共有いたします
###理解安いのため、サンプルを一緒に作ります。
最初、オブジェクトの型があります
例えば、お知らせの型があります

```ts
export interface Info {
  content: string;
  fromDate: string;
  id: string;
  title: string;
  type: string;
}
```

次は一覧オブジェクト型を作ります。

```ts
export type InfoList = Info[];
```
今回は配列を利用します。
ソートのため簡単な関数を作ります。この関数は超簡単です。

```ts
export const sortInfoByDate = (a: Info, b: Info) => {
  let aFromDate = new Date(a.fromDate);
  let bFromDate = new Date(b.fromDate);
  return aFromDate < bFromDate ? 1 : -1;
};
```

最後、そのソート関数を使用するのように一覧オプジェクトを宣言します。

```ts
export const listInfo: InfoList = [];
```

一覧の値を設定した後で、ソートを行います。
見やすいのため、以下の関数を閲覧ください

```tsx

export function sortListInfo(listInfo: InfoList ): InfoList {
  listInfo.sort(sortInfoByDate);
  return listInfo;
}
```

利用したい場合、以上の関数を呼び出します。それは簡単でしょうね
##まとめ
常にソートのため、色々なやり方がありますが、今回は簡単なやり方が説明しました。
何があれば以下の投稿をコメントしください、幸いです。

ここまで以上です。最後まで読みいただき、ありがとうございます。
EgretEngineはMacで開発できるのか？

# 結論

対応しています。

## 公式サイトのここへアクセス

https://www.egret.com/products/engine.html

## ダウンロードする
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/b83d85c7-5101-2347-d3f9-c5aa7044587b.png)

黄色いボタン***「最新版下载」***を押すと、Macからだと「`EgretLauncher-***.dmg`」というインストーラーがダウンロードできます。

以上

# 質疑
## 質問: Egretに興味のある人がいます。Egret製品がMac上で動作できるかどうかという質問が出ています
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/426e5170-af01-55b5-4bfe-ab62c58925cf.png)

## 回答
> **Maxthon** さん
> 3Dは現在動作していないようです。
> **白鹭球拍**さん
> 3DでリリースされたWeChatゲームはMacで実行できます
> **江左梅郎**
> MACで実行可能
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/52a40ea3-2622-f3d7-9738-9a4c16af3339.png)


## 質問:  Macで2Dプロジェクトと3Dプロジェクトを開発することはできますか？
ありがとうございました。 私の以前の質問は間違っていました。Macで2Dプロジェクトと3Dプロジェクトを開発することはできますか？
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/e32231f9-52c6-a9f7-8fa9-0bb835ba24b6.png)

## 回答：
> **江左梅郎**
> MACによって開発可能
> **Maxthon**
> 3d対応の`paper`をMacにどのようにインストールしましたか？
> **江左梅郎**
> 私は王泽と最新版の`paper`を使っています。開発環境はMacです。
> **Maxthon**
> OK
> **？ ？ ？** 
> 最新の`paper`はどこで入手できますか？
> **Maxthon**
> 準備
> 最初に、あなたの`paper-cli`のバージョンが`1.7.0-dev-1`以上であることを確認してください。
> `npm install @egret/paper-cli@next` で最新バージョンをインストールできます

![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/28af08b1-d9f4-a680-d3a6-d9a89736b25b.png)


> **？？？**:
> `Paper Editor`は？
> **Maxthon**:
> ドキュメントには、使いたい方には個別に対応すると書いてありました。公式の窓口へ連絡してください。
> **？？？**:
> どうも`Paper Editor`は今月にはリリースされるらしいですね?
> 事前利用に申し込むには会社の名前が必要そうです。
> **Maxthon**:
> 今月末ではないのでは？ 今月ではなさそうです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/0301d059-930e-8fe9-fdd8-c26909b36cb6.png)
【Ruby on Rails】sendメソッドのいろんな書き方

##sendメソッドとは
sendとは、**レシーバの持っているメソッドを呼び出してくれるメソッド**のこと。
今回はrailsも少し絡めて説明していきたいと思います。

##引数が一つの書き方【Ruby】

**レシーバの持っているメソッドを呼び出し、そのメソッドの戻り値を返します。**
以下はメソッドを定義したときの例です。

```ruby

class User
  def name
    puts "taro"
  end
end

user = User.new
#定義したメソッドを呼び出す
user.name  # => taro

# sendを使った書き方
user.send(:name) # => taro
user.send("name")  # => taro
```

## 引数が一つの書き方【Rails】

railsも同様に使えます。
Userインスタンスのnameカラムがあった場合も、同じように書きます。

```ruby
user = User.new(name: "taro")

user.send(:name) # => taro
user.send("name") # => taro
```


##引数が二つの書き方【Ruby】
第一引数にメソッドを入れ、第二引数に値を入れます。

```rb

class User
  def age(num)
    puts "私は#{num}歳です"
  end
end

user = User.new

# 定義したメソッドを呼び出す
user.age(20) # => 私は20歳です

# sendを使った書き方
user.send("age", 20) # => 私は20歳です
user.send(:age, 20) # => 私は20歳です
```

railsも同様。Userモデルに上と同じageメソッドがあるとします。

```ruby
user = User.new(age: 20)

user.send(:age, 20) # => 私は20歳です
user.send("name", 20) # => 私は20歳です
```


##カラムに値を入れる【Rails】
sendメソッドで値を入れることもできます。

```ruby
user = User.new
user.send("age=", 30)

#出力結果
user.age
=> 30
```

##条件別にメソッドを使い分ける【Ruby】
ここまで来て特にメリットを感じたことはないと思いますが、
条件によってメソッドやカラム名を変えて値を入れる場合に使えます。

```ruby

class User
  attr_accessor :sex
  def initialize(sex = nil)
    @sex = sex
  end

  def man_method
    puts "僕は男です"
  end

  def woman_method
    puts "私は女です"
  end
end

user = User.new
# sexによって使うメソッドを変える
user.sex = "man"
prefix = user.sex == "man" ? "man" : "woman"
user.send("#{prefix}_method") 
# => 僕は男です

user.sex = "woman"
prefix = user.sex == "man" ? "man" : "woman"
user.send("#{prefix}_method")
# => 私は女です

## sendを使った書き方
```

## 条件別にカラムに入れる値を変える
例えば、userにageカラムの他に、`man_ageカラム`, `woman_ageカラム` があるとします。
(こんなカラムないと思いますが笑)

```ruby
user = User.new(sex: "man")
sex = user.sex == "man" ? man : woman
user.send("#{sex}_age=", 20) # => man_ageに20が入る

user.sex = "woman"
sex = user.sex == "man" ? man : woman
user.send("#{sex}_age=", 20) # => woman_ageに20が入る

```

- sexの値がmanであれば、man_ageカラムに20が入る
- sexの値がwomanであれば、woman_ageカラムに20が入る

というように**条件別に入れるカラムやメソッドを変えたりできます。**


##メソッド名を文字列として連結

文字列として連結すれば、変数名をメソッド名に組み込んで使えるようにすることもできます。

```ruby

user = User.new
hoge = "_test"

#上下は同じ
user.send("method" + hoge)
user.method_test
```
これで`user`オブジェクトの`method_test` というメソッドを呼び出すことができます。

##まとめ
sendメソッドは、**動的にメソッドの挙動を変えたりするときに有効**だと思いました。
今回はrubyとrailsに少し分けて説明しましたが、　わかりにくかったらコメントなどいただけると嬉しいです。
無職の元工場労働者、 Cousera Machine Learning を9日で修了する

無職になったので [CourseraのMachine Learningコース](  https://www.coursera.org/learn/machine-learning)を9日で修了した。
(12/10 - 12/18)

https://www.coursera.org/account/accomplishments/verify/BEKHHRLEAEFP

##経緯
神奈川へ転居して今年8月に転職したのはよいが、9月末で短期離職し現在無職となった。
前職までの経験から、業務に必要な[労働安全衛生法](http://elaws.e-gov.go.jp/search/elawsSearch/elaws_search/lsg0500/detail?lawId=347AC0000000057)に定められた特別教育・技能講習を就業者に実施する義務を果たす雇用主に雇用されるのは不可能であると悟ったので、9月末から11月末は特別教育・技能講習を受けて回っていた(高圧電気取扱特別教育やら高所作業車技能講習やら酸素欠乏及び硫化水素危険作業技能講習やらガス溶接やら)。これは雇用労働で死なないためだ。
特別教育・技能講習の受講が一段落したところで、前々から気になっていながら受講に至っていなかった[CourseraのMachine Learningコース](  https://www.coursera.org/learn/machine-learning)を受講することにした。

##所要時間
各Weekについて講義・Quiz: 3-5h, プログラミング課題: 2h前後(week5以外)

##経過
12/10 開始
12/11 2100 week3 assignment
12/12 2100 week4 assignment
12/14 1830 week5 assignment
12/14 2230 week6 assignment
12/16 2000 week8 assignment
12/17 1930 week9 assignment
12/18 1230 week11 assignment, 完走

##詰まるポイント
内容については、コース内および先達の記事で述べられているのでそちらを参照。
課題についても、講義や課題の説明(pdf)、PC版のコースサイトのResourseから辿れるLecture NotesやProgrammingのチュートリアルを総ざらいすればほぼ問題はない。
詰まるポイントは一点だけある。Week5 Programing assginmentのPart3,シグモイド関数の微分について入力先のファイルが説明pdfの本文内にもチュートリアル内にも書いていない(pdfの最後には書いてある)ため、入力先を間違えて詰まってしまうという点だ(実際にそれで丸一日ロス)。入力先fileは最初に確認することを薦める。

##これからどうする
所得源の確保を行いたい。
職務経歴 [^1]上、学んだことを業務で使うことになる公算は低い(そもそもPCを使えるような職業につけるか怪しい)が、学習は続けていく予定。
MIT on edxの[MicroMasters Program in
Statistics and Data Science](https://www.edx.org/micromasters/mitx-statistics-and-data-science)を続行する。



[^1]: 変圧器製造(1年2ヶ月) - 測量補助(6ヶ月) - むしょく(1年)- 下請工場にて(洗剤製造(派遣) - 製造, 受注・入出荷・洗剤製造補助・設備事後保全(派遣時と併せて6年半))  - 工務(電気, 2ヶ月) - むしょく(2018.10〜)
UIViewに対してBlur処理を入れる

## 概要

- UIViewにたいしてBlur処理をかけるときに使用します。
- `insertSubview(blurView, at: 0)`にしており、Viewの背面にBlur処理を入れたViewが配置されるので、前面にする場合は`addSubview(blurView)`に書き換えてください。

```swift:UIView+Extension.swift
extension UIView {
    
    func addBlur(style: UIBlurEffect.Style = .extraLight) {
        let blurView = UIVisualEffectView()
        blurView.effect = UIBlurEffect(style: style)
        blurView.frame = bounds
        blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        backgroundColor = .clear
        insertSubview(blurView, at: 0)
    }
    
    func removeBlur() {
        subviews
            .filter { $0.className == UIVisualEffectView.className }
            .forEach { $0.removeFromSuperview() }
    }
}
```

## ViewControllerの背景にBlur処理を入れる

- `modalPresentationStyle`を設定するのを忘れないようにしましょう

```swift:BlurViewController.swift
class BlurViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // BlurViewControllerがInitialViewControllerの場合
        self.modalPresentationStyle = .overCurrentContext // or .custom
        // BlurViewControllerはNavigationViewControllerのRootViewControllerの場合
        self.navigationController?.modalPresentationStyle = .overCurrentContext // or .custom
        // Blur処理
        self.view.addBlur()
    }
}
```