OmniAICreator/Qiita-1.07M huggingface dataset:
jsで現在時刻と指定時刻を比較して、要素の表示非表示したい

#新着情報とか、日付が来たら表示させたい

### 例えばこんな html
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>新着一覧</title>
</head>
<body>
    <ul>
        <li id="__target" data-showDate="2019/12/2" style="display:none;">項目1</li>
        <li>項目2</li>
        <li>項目3</li>
    </ul>
</body>
</html>
```
li[id="__target"] に data-showDate="この日付け以降は表示させる" と style="display:none;" の属性値を付加。

###こんなjs

```javascript
//-----------------------------------
// 現在時刻をUNIXタイムで取得
//-----------------------------------
let _now  = new Date(),
    now_y = _now.getFullYear(),
    now_m = _now.getMonth() + 1,
    now_d = _now.getDate(),
    now_h = _now.getHours(),
    now_i = _now.getMinutes(),
    now_s = _now.getSeconds();
let now = now_y + '/' + now_m + '/' + now_d + ' ' + now_h + ':' + now_i + ':' + now_s;
// UNIXタイムスタンプで取得
let ux_now = Date.parse(now.replace( /-/g, '/')) / 1000;

//-----------------------------------
// 指定日付をUNIXタイムで取得
//-----------------------------------
let _showDate = document.getElementById('__target').getAttribute('data-showdate').split('/');
let showDate = _showDate[0] + '/' + _showDate[1] + '/' + _showDate[2] + ' 0:0:0';

// UNIXタイムスタンプで取得
let ux_showDate = Date.parse(showDate.replace( /-/g, '/')) / 1000;

// アクセス現在時刻が指定時刻を超えてたらSHOW
if ( ux_showDate < ux_now ) {
    document.getElementById('__target').style.display = '';
}  
```

応急処置的な時に使う。UNIXタイムスタンプ取得するとこ関数にしたほうが良いにきまってる。

当然 documentロード後じゃないとDOM取得できないので、__target読み込み後に実行。
data-showDate の日付を動かしてみて。

jsFiddle
https://jsfiddle.net/380mi/8rus3yv5/

Qiitaの使い方がこれでいいのかわからない
Ubuntu ディープラーニング　環境構築（マルチブート）

[Ubuntu 環境構築 マルチブートトラブル編]
(https://qiita.com/aiiika/items/63a2e524342cfa2129af)
[Ubuntuディープラーニング環境構築（インストール準備)](https://qiita.com/aiiika/items/4ae527e915015b334fd9)
[Ubuntuディープラーニング環境構築（インストール編)](https://qiita.com/aiiika/items/cd4d35e89652b49fbffc)
[Ubuntuディープラーニング環境構築（ゲーミングノート)](https://qiita.com/aiiika/items/8bd21e4a2b1c74789cfe)
[USB起動ディープラーニング環境構築]
(https://qiita.com/aiiika/items/5bf3c30114491cb7742f)
Macで使われるマルチブートローダーが高性能なので、
rEFIndを推奨しておきます。
UEFIのWindows10とDualBootがうまく行かない方、OSのインストールは完了したのにブートローダーがうまく入らない方にはたいへん良いツールです。
http://www.rodsbooks.com/refind/getting.html
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496711/16e23e09-3684-0359-2da5-ec585f709707.png)
グラフィカルログイン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496711/5b98475f-adc7-f2ec-db67-08aef4b5f7b6.png)
まず最初に、Terminalを起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496711/ecc3cb5f-e1af-5066-65b6-0f6296edcf6b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496711/8d10a00a-b601-1678-ef7e-b8d10fd75375.png)
Terminalが出たら、$ から始まります。
これはユーザーモードで通常は$ユーザーモードを使います。
システムに変更を加える場合はsu(SuperUser)（WindowsではAministrartor)にならなければ出来ませんので、
$ sudo su としてルート権限で作業します。
パスワード：　を求められますが、ルート権限が取れると
'#' から始まるようになります。ユーザーに戻るには# exitします。
一般的には$ sudo 命令として間違ってシステムを変更しないようにします。
ネットワークに接続します。
有線　そのまま
無線　有効にしてアクセスポイントを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496711/08313003-b717-79b5-0490-95908e2a5f08.png)
ネットワーク接続後最初に必要になるのはデータベースのupdateです。

```
$ sudo update
```
このままでは、パッケージはupdateされません。
しかしパッケージupdateはたいへん時間がかかりますので、時間がある時に実行します。
ここでは先に日本語エンジンfcitxを追加しておきます（好みの問題です）。

```
$ sudo apt install fcitx-mozc
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496711/3a08e153-6b86-ea09-c3ac-54ea8083c157.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496711/a029197c-b947-b66c-1e47-acd3333d63b2.png)
###ディープラーニング環境のインストール
Python3.6 はUbuntu18.04LTSには最初からインストールされています。
DeepLearningに必要なライブラリーをインストールするのにpipを使いますので、まずこれをUbuntuにインストールします。

```
$ sudo apt install pyhton3-pip
```
つぎにpipをupdate しておきます。

```
S sudo pip3 install –upgrade pip
```

ここからは使用するDeepLearning用ライブラリーをどんどんインストールしていきます。
tensorflowは、そのままですとバージョン2.0がインストールされますので、1.14を指定しておきます。
tensorflowは2019/12/02現在、python3.6まででないとインストールできません。

```terminal
$ sudo pip install jupyter
$ sudo install tensorflow==1.14
$ sudo install keras
$ sudo install matplotlib
$ sudo install pandas
$ sudo install sklearn
$ sudo install pillow
```

必要なライブラリーが分かっていれば、この時点でインストールしておきます。

###時間の調整
WindowsとDualBootにした場合は、よく９時間時間がずれる問題が発生します。
WindowsはRTCを使っていますので、ubuntuもそれに合わせておきます。

```terminal
sudo timedatectl set-local-rtc true
```
強化学習２６　chokozainerで簡単にcolaboratory+OpenAI+chainerRL

中高生から大学生までのAI初学者を対象にしています。
強化学習２５までやっていたcolaboratoryを用いたやり方は、それなりに便利なのですが、それなりに面倒です。
そもそも、新しいアルゴリズムや学習方法を開発したいわけではなくて、強化学習を学びたいだけなんですよね。しかも、まず慣れたい。
そこで、こんなやり方を考えました。

#ラッパーソフトとしてのchokozainerRL
　chainerRLのexampleにあるものに少しだけ手を加えて、google　colaboratoryで動かしやすくしました。
DQNが何であるとか、どこでchainerを使っているかなどは一切無視できます。
　設定値だけをいじって、どうなるのかだけを知りたい。。。こんな人のものです。
　誰かの記事に書いてありましたが、「exampleは猿プログラマーが理解できるようにするためのもの。」

#とりあえずは、testpypiだけです。
これで十分な気もしますが、そのうちpypiにも移行します。

#始めるの、超簡単。
colaboratoryの、
ファイル　ー　ノートブックを開く
の画面で、githubタブを選択します。
chokozainer
で検索して、
chokozainer/chokozainerrlリポジトリ　を選択します。
すると、
ipynbsの中にあるノートブックが出てくるので、いずれかを選択してください。
これで、実行可能です。

#おっさんの馬力は弱いのでゆっくり進みます。
おっさんの馬力は弱いので、ちょっとずつ足していきます。
また、あまり真面目にデバック取っていないので、少しづつ修正されていきます。
Ubuntu ディープラーニング　環境構築（インストール編）

[Ubuntuディープラーニング環境構築（インストール準備)](https://qiita.com/aiiika/items/4ae527e915015b334fd9)
[Ubuntuディープラーニング環境構築（マルチブート)](https://qiita.com/aiiika/items/7f623840b31767ff9f48)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496711/fd6fcc22-398b-91e7-39bb-5597cd3a0296.png)

言語設定は問題なければ、日本語とします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496711/8700c7c3-9edc-a688-e112-106093a2d0fd.png)
キーボードを選択します。日本語キーボードでない場合はインストール後、日本語入力切替の設定が必要になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496711/21f61356-1d56-094e-7888-2ba38965f327.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496711/bc24253e-f925-62b4-8016-494a25073821.png)
インストールの種類ですが、Windowsを残さない場合は「ディスクを削除…..」
Windowsを残す場合は「それ以外」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496711/b2a190fc-012e-e112-ae58-0f7c0a2bec94.png)
空き領域にルートパーティションとSWAP領域を作成します。
「空き領域」を選択し、「+」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496711/410945b4-b877-ec46-6595-3fcf5b110c7e.png)
「空き領域」を選択し、「+」ボタンをクリックします
ルートパーティションは最低30GB。
同じく＋ボタンでSWAP領域を作ります。
SWAPはメモリーを十分積んでいる場合は不要ですが、HDに余裕があれば念のためメモリーの２倍程度とします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496711/7aea5ad0-1630-6763-3ae0-51f08c745138.png)
接続された記憶装置のどれにインストールするかを選択します。
####注；Windowsと別の記憶装置にUbuntuをインストールする場合はWindows用ははずしてからインストールした方が間違いがありません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496711/cc62f6d2-e474-d139-fb10-823dca16a993.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496711/240abc49-c001-18f7-43de-fc2908a5abff.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496711/631cf6c2-b3d0-84f7-c9f9-a4772e13132a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496711/d419e803-6cfe-321a-b4f9-a39e63680a11.png)
インストールが進行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496711/7d6bf7a1-d8d4-c63a-ef6d-11b52b2ec708.png)
ブートローダーがインストールされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496711/40db129c-a725-c951-20b0-2e5bfef892c1.png)
####UEFI仕様でうまくブートローダーが入らない！Windowsしか起動しない場合の対処方法
[Ubuntu ディープラーニング　環境構築（マルチブート）](https://qiita.com/aiiika/items/7f623840b31767ff9f48)
Ubuntu ディープラーニング　環境構築（インストール前準備）

[Windowsから空き領域をもらおう]
(https://qiita.com/aiiika/items/aa1040826a8de59b9c41)
[Ubuntuディープラーニング環境構築（インストール編)](https://qiita.com/aiiika/items/cd4d35e89652b49fbffc)
[Ubuntuディープラーニング環境構築（マルチブート)](https://qiita.com/aiiika/items/7f623840b31767ff9f48)

要らなくなったWindowsマシンにUbuntuをインストール
Ubuntu18.04LTSのインストール用イメージファイルのダウンロード
https://www.ubuntulinux.jp/download/ja-remix

- 2019/11現在、ディープラーニング用にはまだバージョン16.04LTSが主流のようです。
- Defaultでpython3.6を使いたいので、18.04LTSをインストールします。(16.04はpython3.5)
- 現在ほとんどのWindowsマシンはUEFIを使っていると思いますが、この場合WindowsとUbuntuがDualBoot可能かどうかがよく分かりません。
- インストール修了したのに、Windowsが起動してしまう場合については次記事にて対応策を書きます。

Ubutnuインストーリメデイアとして、不要なUSB(2GB以上）をマシンに挿入してRufusを起動してください。
デバイスに変更許可を聞かれますので、「はい」と答えます。

Rufus以外にもISOファイルをUSBに書き込みツールはたくさんありますので、好みで使ってよいです。

rufusが起動したら事前にダウンロードしておいたUbuntu18.04LTSのISOファイルを選択してスタートボタンを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496711/e9034819-33e7-5471-9def-a3451d3331e0.png)

####Ubuntu起動メディアを挿入し、WindowsマシンをUSB起動できるように設定します。
- たいていのマシンは起動時にF2ボタンを連打するとBIOS設定画面になります。
- お使いのマシンの「メーカー名」「機種名」「USB起動」で検索してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496711/fbfb43f3-468f-4ab1-a9a2-02cce04cde34.png)

- Windows8以上のマシンではshiftボタンを押しながら再起動するとUEFI設定にすることが出来ます。
- [トラブルシューティング][詳細オプション][UEFIファームウエアの設定]の順にクリック

####注意!! Bitlockerを使っていてSecureBootをDisableにするとWindowsに戻れなくなる場合があります。

BIOSの場合の起動画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496711/08e322eb-2677-2193-2edc-64cd0fb0b21d.png)

UEFIの場合の起動画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496711/2744b5c0-fb1f-7d2f-8cd6-7e0f8630c816.png)
リリースしようと思ったらValidate Appでエラーが発生してハマった

#エラー内容
リリースしようと思いValidate Appを実施した所次の３つのエラーが発生した。

`・Unsupported Architectures. The executable for XXX.framework contains unsupported architectures '[x86_64, i386]'.`

`・Invalid Segment Alignment. The app binary at 'XXX.framework' does not have proper segment alignment. Try rebuilding the app with the latest Xcode version.`

`・The binary is invalid. The encryption info in the LC_ENCRYPTION_INFO load command is either missing or invalid, or the binary is already encrypted. This binary does not seem to have been built with Apple's linker.
`
※自分の場合は３つのエラーだったが、調べると状況によってはエラーの数が変わるみたい。

#原因
今回あるframeworkを追加したのですが、
そのframeworkにシミュレーター用のアーキテクチャが含まれているのがエラー原因ぽい。

#対処方法
１．Build Phasesで左上の＋を押下してNew Run Scriptを選択。
２．追加したRun Scriptを展開してShow environment variables in build logにチェック。
　　＊自分の場合は最初からチェックが入ってました。
３．Run Script内にあるShell /bin/shの下の欄に次の参照先にあるスクリプトを追加してframeworkを対象のframework名に変更。
　　[リリースビルドからSimulator用のarchitectureを抜く方法（Unity編）](https://qiita.com/maebaru/items/30a006e96d12d1d7d096)
４．再コンパイルなどを行ってからValidate Appを行ってエラーが発生しない事を確認しリリース作業を進める。

#追記
最近リリースを行おうとするとまた同じエラーが発生する様になった。
最終的にエラーが発生しなくなったのは、
Build Phasesでの並び順がRun ScriptがEmbed Frameworksの上に来て居たのが原因で、
Run Scriptを下にした所エラーが無くなった。
何故位置が変わったんだろうか…
スリープ後にVivaldiの画面がブラックアウトしたときの対処

　著者は~~ラップトップ~~ノートパソコンを使っており、しばしば蓋（ディスプレイ）を閉じるなどスリープモードにして作業を中断することがあります。
　今回は蓋を閉じたあと、システムを再開したときにブラウザ画面がブラックアウトしていて驚いてしまいましたが、すぐに解決しました。これから先、同様のケースに遭遇して驚く方がいるかもしれないので、その方のために書きました。

### 要約
+ <font color="green">読了時間 およそ２分未満</font>
+ ノートパソコンをスリープモード／再開をしたらブラックアウトした
+ ブラウザを全画面表示したら元に戻った

## 環境
### 著者の環境
+ **機種:** Lenovo製 YOGA 3 14
+ **ＯＳ:** Windows 10 Home (64bit) <font color="slategray">ver. 1903</font>
+ **ブラウザ:** Vivaldi 安定版 (64bit) <font color="slategray">ver. 2.9.1705.41</font>

### 対象とする読者
　Windows 10の上でVivaldiブラウザを利用する方。

## 発生と解決の流れ
### 発生した条件
　ブラウザを利用中、蓋を閉じてスリープモードに移行。具体的には、ブラウザ上でQiitaへのコメントを記入していたときである。

### 発生したトラブル
　蓋を開いてシステムを再開したとき、ファイラやブラウザの画面がブラックアウトしていた。
　ただし、最小化・最大化などの操作は行うことができた。

### 解決法
　ブラウザを最前面表示にして、`F11`キーを押下。全画面表示にする。
　これでブラックアウト状態が解除された。


## 最後に
### あとがき
　具体的な発生条件が不明のため、試行回数は一度きりです。ご容赦ください。
### 気になる方へ
　この手順を試しても問題が解決しない方や、このような問題が発生する理由が気になる方は、以下のフォーラムをご利用ください。

+ [Vivaldi Forum 日本語版](https://forum.vivaldi.net/category/26/日本語-japanese) <font color="slategray"><sup>外部リンク</sup><font>
+ [Vivaldi Forum 世界版](https://forum.vivaldi.net) <font color="slategray"><sup>外部リンク</sup><font>
git cloneしてローカルにファイルを落としたが、該当のブランチが見当たらない

# はじめに
下記のような複数既にブランチが存在するGitHubレポジトリにおいて、ローカルに`git clone`したとします。
![スクリーンショット 2019-12-02 13.04.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291139/b681f819-8c97-4e9d-5bc4-87fb9a09b471.png)

例えば上記ブランチの`feature/initialSetup`に切り替えたいとして`git branch`してみると、developブランチしか見当たりません。

```
$ git branch
* develop
```

このような場合の対処法を記します。

# コマンド
`git branch`に`-a`をつけて、remotes側（GitHub側）に隠れているブランチを確認します。

```
$ git branch -a
* develop
  remotes/origin/HEAD -> origin/develop
  remotes/origin/develop
  remotes/origin/feature/initalSetup
  remotes/origin/feature/locale
  remotes/origin/feature/navigation
  remotes/origin/feature/setup-collection
  remotes/origin/feature/setup_navigation
  remotes/origin/feature/view
  remotes/origin/feature/view_passwordRecovery
  remotes/origin/firebase_auth
  remotes/origin/master
```
その後、切り替えたいブランチを指定します。
例:`feature/initialSetup`に切り替え

```
$ git checkout feature/initalSetup
Branch 'feature/initalSetup' set up to track remote branch 'feature/initalSetup' from 'origin'.
Switched to a new branch 'feature/initalSetup'
$ git branch
  develop
* feature/initalSetup
```
PycharmでローカルのLambdaをDocker Toolboxで動かす時にデバッグ実行できない事象の回避

PycharmでLambdaのデバッグ実行を行う際に、ローカル環境のDockerが「Docker Desktop for Windows」でなく「Docker ToolBox」の場合、デバッグが行えない現象が発生することがあります。

原因はDocker ToolBoxのフォルダのマウント設定です。
Docker ToolBoxでは初期設定で「C:\Users」フォルダ以外がマウントされません。
しかしデバッグでは "C:\Program Files\JetBrains\PyCharm Community Edition 2019.2.3\helpers\pydev\pydevconsole.py(※フォルダはバージョンによってことなります)"というマウントされてないフォルダのモジュールを使用するので、モジュールの読み込みが行えずデバッグが行えないのです。

回避策としては、モジュールの格納されているフォルダをマウント設定する必要があります。
今回はCドライブの直下をまとめてマウント設定してしまいました。

```
# ▼VirtualBoxのDockerイメージを停止する、NAMEは「default」。
	
# ▼VboxManageで VMの default に C:\ を c として共有フォルダ追加を行う。
$ "C:\Program Files\Oracle\VirtualBox\VBoxManage.exe" sharedfolder add default --name c --hostpath "C:/" --automount

# ▼VirtualBoxのDockerイメージを起動する、NAMEは「default」。
#  ※「Docker Quickstart Terminal」からの起動でもよい

# ▼dockerホスト上に共有フォルダ c を /c にマウントする
$ docker-machine ssh default "sudo mkdir -p /c"
$ docker-machine ssh default "sudo mount -t vboxsf -o uid=0,gid=0 c /c"
```
作業中のブランチに、masterの最新状態を加える

# はじめに
ブランチを切ったときのmasterについて、他の作業者が他ブランチで作業更新→masterにマージした場合、自分の作業用ブランチに最新状態を反映させたいときがあります。
その際の一連のコマンドを記します。

# コマンド
最新のmasterブランチの更新状況を組み込みたいブランチに変更します。
例:hogehogeブランチで作業している場合

```
git checkout hogehoge
```
ブランチ変更後、下記コマンドを入力

```
git pull origin master
```

現在のhogehogeブランチにmasterの最新コードが反映されます。
この際、コンフリクトすることがよくあるので下記コマンド内容の`Unmerged paths:`に書かれたファイルを確認して、解消していきます。
解消後は`git commit -am "fix conflict"`といった感じで、commitをします。

```
git status

Unmerged paths:
  (use "git add <file>..." to mark resolution)

	both modified:   App.js
```
ハローハリネズミ - Browserslist でターゲットブラウザの設定

## はじめに

今年 6 月に [Autoprefixer](https://github.com/postcss/autoprefixer) が 9.6 にバージョンアップしました。（執筆時点の最新バージョンは 9.7.3 になります。）その中で `browsers` オプションが非推奨になりました。次の 10.0 のリリースを機に `browsers` オプションを廃止する予定です。今回は、`browsers` オプションに代わる [Browserslist](https://github.com/browserslist/browserslist) について紹介します。

## Autoprefixer とは

[Autoprefixer](https://github.com/postcss/autoprefixer) は、ターゲットブラウザにベンダープレフィックスを自動的に追加する CSS ポストプロセッサ[^1]です。ちなみに、Autoprefixer の 9.7 で Browserslist でのパフォーマンス改善が行われました。詳しくは[こちら](https://github.com/postcss/autoprefixer/releases/tag/9.7.0)を参照ください。

### `browsers` オプション廃止理由

当初、Autoprefixer にはターゲットブラウザを設定する `browsers` オプションがありました。しかし、多くのツール（e.g. [Babel](https://babeljs.io/)）にもターゲットブラウザを必要とします。これが Browserslist の誕生、`browsers` オプションの廃止理由になります。

## Browserslist とは

[Browserslist](https://github.com/browserslist/browserslist) は、異なるツール（e.g. Babel）間でターゲットブラウザのバージョンを共有するための設定ファイルです。

### 設定方法

Browserslist でターゲットブラウザを設定する方法は 2 通りありますが、どちらも非常に簡単です。

1. `package.json` で設定する方法
2. `.browserslistrc` で設定する方法

今回は **1. の `package.json` で設定する方法** を紹介します。下記のような記述を `package.json` に記述しましょう。

```json:package.json
{
  "browserslist": [
    "last 2 versions",
    "ie >= 11",
    "android >= 4.4.4",
    "not dead"
  ]
}
```

設定は以上になります。ちなみに、ターゲットブラウザのバージョンを確認するには下記のコマンドを実行しましょう。

```
$ npx browserslist
```

## まとめ

今回は Autoprefixer に焦点を当てて Browserslist について解説しました。Browserslist は Autoprefixer 以外のツールでも使用できます。先述したように Autoprefixer 10.0 で `browsers` オプションが廃止予定です。今年の非推奨は今年のうちに推奨にしましょう。

[^1]: CSS ポストプロセッサとは、純粋な CSS をより良い CSS に最適化する処理を施すものを指します。
【Git】 git configに関するメモ

今までのユーザー情報は会社用のGitLabアカウントだった。

先日GitHubで個人アカウントとリンクしようとし、別のフォルダで

`$ git config --global user.name`
`$ git config --global user.email`

と設定してしまったので、GitLabに個人アカウントが侵食されてしまっていた。


個人用GitHubアカウントで使うフォルダには

`$ git config --local user.name`
`$ git config --local user.email`

のローカルで設定した。

git configが設定できたか確認するには、
`$ git config user.name`
`$ git config user.email`

[関連記事 【GitHub】ローカル環境にあるフォルダをリモートリポジトリにアップロードする際に詰まった話](https://qiita.com/kitagawa_shouri/items/e463a5ed188c77bac967)
ffmpeg上下反転小技

goproなら（再エンコード不要なので）gopro quickで上下反転させてたのですが、
ffmpegででけました。

https://gist.github.com/ViktorNova/1dd68a2ec99781fd9adca49507c73ee2

マイナスラジアン角はダメみたいです。

例
ffmpeg -f concat -safe 0 -i input.mp4 -metadata:s:v rotate=\"180\" -c copy output.mp4

以上でございます。
amazon Linux 2でpipenv環境を整える

DjangoをEC2上で動かすのに迷ったのでメモ  

バージョン

```
$ cat /etc/system-release
Amazon Linux release 2 (Karoo)
```
## python3インストール

まずはpython3をインストールします

```bash
$ sudo  yum update
$ sudo yum install -y python3
```


### デフォルトをpython3に変更する
ログイン時python3がデフォルトになるようにエイリアスをbash_profile内に貼ります

```bash
$ vi .bash_profile 
```

bash_profile内に下記を追記します

```bash
alias python=python3

```

追記したらbash_profileを読み込み直します

```bash

source .bash_profile 

```

変わっていることを確認します。

```bash
$ python --version
Python 3.7.4
```

pipenv をインストールします。

```bash
$ sudo pip3 install pipenv
```

これでインストールが完了です。

あとは実際にpipenvをつかっているProjectでつかってみましょう。

```bash

$ pipenv install
```
項目書をテンプレート化して作成工数を削減する

# はじめに

QAスケジュールやQAの進め方については各タイトルごとに違っていると思います。

私が担当しているタイトルでは、だいたい半月分の施策を1度のQAですべて検証する形を取っています。
その中でも特にガチャの更新が非常に多く、過去には1度のQAでガチャを30個以上検証するということもありました。

そのような状態なので、作成が必要な項目書(私の現場ではテストケースを項目書と呼びます)の量も結構な量になっています。

幸いにも各施策で大きな仕様変更が入ることがほぼ無いので、基本的には同じ内容の項目で必要な箇所だけ修正する形で済みます。

が、とはいえ作成する項目数は多いので結構工数はかかります。

いかに(楽で)ミスが少なく、早く、効率的に項目書を作成するかを私なりに突き詰めていった結果、項目書をテンプレート化するという結論にたどり着きました。

ということで、こういう作成方法もあるんだという一例として紹介させていただければと思います。


# サンプル

まずはスケジュールなどの情報を1か所にまとめて記載するシートを用意します。
![マスタ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542776/43c91c81-57b2-36eb-9bc4-9ecde65dfcf0.png)


そして次に項目。
よくあるガチャの開催期間の境界チェックの項目です。
![項目.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542776/44f35d40-c51a-e06f-0c1a-3f38f44e6759.png)

少なくとも赤線部分の4つは、ガチャの開催期間が変わるたびに変更が必要ですが、上の画像の赤枠部分を参照するようにして作成すれば、2か所修正するだけで済みます。

VLOOKUP関数で黄色線部分に記載している対象のガチャ名をもとに日付のデータを切り替えているので、「イベントガチャ2」の項目を作成したい場合は、項目をコピぺして黄色線部分のガチャ名を変更するだけで完了です。

このような感じで、ガチャの価格やガチャ排出カード、確定内容などの更新が必要なデータをまとめたシートを用意し、項目側では該当のデータを参照するように作成すれば修正箇所を減らすことができます。

さらにIF文などで条件によって期待結果を出し分けを行うこともできるので、最終的に項目側に一切手を加えずに項目を作成することもできるようになります。


# メリットとデメリット

**メリット**
+ 項目作成の手間が減らせる。
+ 作成手順を守れば、作成者が変わっても一定のクオリティが担保できる。


**デメリット**
+ テンプレート化するまでに少々時間がかかる。
+ 毎回大きく仕様が変更されるような施策では使えない。
+ 複雑に作りすぎると、テンプレート自体の更新が属人化してしまう。


# さいごに
この作成方法が使える状況はそう多くないかもしれないですが、使える状況であれば結構有用な方法ではないかなと個人的には思っています。

項目書は作成者によって記載方法が変わることも多いですが、こういった形であれば、誰が作ってもブレることがないので検証する側も、毎回同じ文言、同じ粒度で検証を行うことが可能です。

最終的には項目書作成の自動化くらいまでもっていけるといいなと思います。が、まぁ難しいですね。


最後までご覧いただき、ありがとうございました。




# おまけ

***項目の作成方法は自由だ！！！***
1からHololensプロジェクトをビルドするには

#はじめに
Hololensアプリの作り方の記事は沢山ありますが、割と情報がバラバラになっているイメージがあるので、導入からビルドするまでの工程を全て1つの記事にまとめました。
MixedRealityToolkitのバージョン（特に無印とv2）によって使い方が変わるので、気をつけてください。

#準備〜コンテンツを作る
1. Unityの[ダウンロード](https://unity3d.com/jp/get-unity/download)。Unity Hubを使うと複数のバージョンのUnityを同時に扱うことができるので便利。
2. Unityをインストールするときに、Universal Windows Platform(UWP)の名前がついたBuild TargetとVisual Studioをダウンロード。
3. Visual Studioでは、「C++によるデスクトップ開発」「ユニバーサルWindowsプラットフォーム開発」「Unityによるゲーム開発」のワークロードをダウンロード。
4.	Hololens Toolkitの任意のバージョンを[ダウンロード](https://github.com/microsoft/MixedRealityToolkit-Unity/releases)。個人的に[HoloToolkit 2017.4.3.0 - Refresh](https://github.com/microsoft/MixedRealityToolkit-Unity/releases/tag/2017.4.3.0-Refresh)が安定しており使いやすいと感じるが、MixedRealityToolkit v2も正式版がリリースされたので、これから始める人はそちらの方がいいかもしれない（少なくとも2020年のベータ版Unityと2017年版のHoloToolkitは相性が悪いのでやめた方がいい）。ダウンロードできるアセットはAssetsの中にあり、無印やFoundationが最低限開発に必要なアセットなのでこれをダウンロードする。
5.	Unityを起動してプロジェクトを作成し、File>Build SettingsからBuild TargetをUWPに変える（後からでもできるが、開発後に変えると時間がかかる）。
6.	UnityのメニューバーからAssets>Import Package>Custom Packageで落としてきたMixedRealityToolkitのUnityパッケージを選択して、インポートする。
7.	Hololens Toolkitのドキュメントに従って、プロジェクトとシーンの設定を行う（バージョンによって行う設定方法が異なり、ほぼワンクリックのはずなので説明は省略）。これを行うことでHololensを使えようになる。
8. Assets>Import Package>Custom Packageでexampleシーンをダウンロードしたり、コンテンツを作る。作り方は通常の3Dゲームと同じように作ればいいが、カメラは原点から動かさないことに注意し、Hololensの画角が小さいことにも気をつける。

#ビルドする方法

9. File>Build Settings>Player Settings>Publishing SettingsのCapabilitiesで、なにか通信やマイクなど機能を使う場合はそれにチェックする必要がある。同じくPlayer Settings>XR SettingsでVirtual Reality Supportedにチェックが入っているかの確認も必要になる。また、Player Settings>Other SettingsのScriptipting Runtime Versionは”.Net 4.x Equivalent”、Api Compatibility Levelは”.Net 4.x”を確認し、必要に応じてScripting Backendを変えることができる。
10. File>Build SettingsからBuildする。そのとき、”Add Open Scenes”で現在開いているシーンをビルド対象に入れ、Target Deviceは”Hololens”、Architectureはx86”を選ぶ。
11. 生成されたフォルダの中にある.sln（ソリューションファイル）をダブルクリックして、Visual Studioを起動する。
12. Visual StudioでBuildの下のドロップダウンメニューから”Release”, “x86”, “Device”に設定し、Hololensを繋いだ状態でDeviceのボタンを押すとビルドを行うことができる。
13. 初めてのビルドではHololensとのペアリングを求められるが、HololensでSetting>Update&Security>For Developpersの中に”Pair”というボタンをクリックすると認証コードが出現し、それをPC側に入力するとペアリングを行うことができる。
14. ビルド中にエラーが生じた場合の多くの原因は以前のアプリを消してないことにより起こるが、再ビルドすれば解決する。アプリを再インストールする時は事前に昔のアプリをアンインストールしておくとスムーズにビルドが実行できる。これで解決しないエラーはどこかで問題が起こっている。

#Deviceが表示されないとき
Scripting BackendをIL2CPPにしたとき、ビルドする方法の4番の工程で"Device"が表示されないことがあるが、以下の記事の通りに実行すれば解決します。
[Unity Hololens(UWP)をIL2CPPでビルドするときにDeviceが出てこないときにすること](https://qiita.com/SuccessLeaf/items/d259913b8082562c6626)

#最後に
もし間違っている箇所や分かりづらい箇所があればコメントください。最後まで読んで頂きありがとうございました！
Rails: can not be used with :count => 1. key ‘one’ is missing.

#背景
オリジナルで制作中、Rails: can not be used with :count => 1. key ‘one’ is missing.のエラーがでた。


#環境
Rails 5.2.3
Ruby 2.6.3


#解決策

おそらくenumが何か関係している

下記でラジオボタンのところで問題が発生していると予想

```
  <li class="gender">
    <%= form.radio_button :gender, "男性" %>
    <%= form.label :gender_men, "男性", class: "mens" %>
    <%= form.radio_button :gender, "女性" %>
    <%= form.label :gender_female, "女性", class: "females" %>
  </li>
```

ここのモデルの記述を確認

```
enum gender: {男性: 0, 女性: 1}
validates :gender, inclusion: {in: ["男性", "女性"]}
```


```
ja:
  activerecord:
    attributes:
      staff:
        content: 自己紹介
        gender:
          one: gender　　　＊この記述が必要だとのこと
          true: 男性
          false: 女性
        gender: 性別
```



参考サイト
[Rails：：count => 1では使用できません。キー 'one'がありません。](https://whatraghulearned.today/2019/03/26/rails-can-not-be-used-with-count-1-key-one-is-missing/)
pycharmのショートカット

pycharmのショートカット

| 概要                                       | ショートカット&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    | 説明|
|---|---|---|
| 実行                                       | Shift + F10       | プログラムを実行します。
| 設定を選択して実行                         | Shift + Alt + F10 | 実行/デバッグ構成をすばやく選択し、実行または編集します。
| 再実行                                     | Ctrl + F5         | 同じ設定で実行を繰り返し、実行ツールウィンドウの同じタブにフォーカスを合わせます。
| エディターでフォーカスを失うことなく再実行 | Shift + F10       | エディターの同じタブにフォーカスを合わせて、同じ設定で繰り返し実行します。
| デバッグ                                   | Shift + F9        | プログラムをデバッグします。
| 設定とデバッグの選択                       | Shift + Alt + F9  | 実行/デバッグ構成をすばやく選択し、デバッグまたは編集します。
| ステップ・オーバー                         | F8                | 現在のファイルの次の行に移動します。
| ステップ・イン                             | F7                | 次の実行された行にステップします。
| スマート・ステップ情報                     | Shift + F7        | 現在の行に複数のメソッド呼び出し式が含まれている場合は、ステップインするメソッドを選択します。
| ステップ・アウト                           | Shift + F8        | 現在のメソッドから戻った後、最初に実行された行にステップします。
| 強制的にステップ・オーバー                 | Shift + Alt + F8  | このメソッドまたはファイルの次の行まで実行し、現在の実行ポイントで参照されているメソッドをスキップし、ブレークポイントを無視します。
| 強制的にステップ・イン                     | Shift + Alt + F7  | このメソッドをスキップする場合でも、現在の実行ポイントで呼び出されたメソッドへのステップです。
| カーソル位置まで実行                       | Alt + F9          | キャレットが配置されている行まで実行します。
| 強制的にカーソル位置まで実行               | Ctrl + Alt + F9   | ブレークポイントを無視して、キャレットが配置されている行まで実行します。
| プログラムの再開                           | F9                | プログラム実行を再開します。
| プログラムを停止する                       | Shift + F2        | デバッグセッションを終了します。
| 式の評価                                   | Alt + F8          | 任意の式を評価します。
| 式のクイック評価                           | Ctrl + Alt + F8   | 式の評価ダイアログを呼び出さずに任意の式を評価します。
| ブレークポイントの切り替え                 | Ctrl + F8         | 現在の行でブレークポイントを切り替えます。
| ブレークポイントの表示                     | Ctrl + Shift + F8 | すべてのブレークポイントを表示/管理します。
HTMLコーディングで良く使うwebサービス様

#HTMLのコード整形ツール
はちゃめちゃ大混乱なHTMLを治す時。&lt;button&gt;とか&lt;a&gt;はインデントされないので、その辺は手動で調整。
https://lab.syncer.jp/Tool/HTML-PrettyPrint/


#Base64エンコーダー
Emmetでもできるけど、プロジェクト内に画像を移動するのすら面倒な時にここでエンコードしてそのままcssにぶち込む。
https://lab.syncer.jp/Tool/Base64-encode/

#beforeやafter疑似要素のcontentプロパティで日本語の文字化けを回避する方法
cssの content:""; 内で文字化け防ぐ用。
https://webllica.com/css-content-property-mojibake/

#CSS三角形作成ツール
吹き出しパーツデザイン用。
http://apps.eky.hk/css-triangle-generator/ja

#SVGデータをCSSのbackground-image向けのBase64コードにかんたん変換ツール
background-imageにSVG使いたいよ
https://blog.s0014.com/posts/2017-01-19-il-to-svg/

#CSS3のtransition-timing-functionの値、cubic-bezier()に関して
jquery Easingとか使ってる時、CSS側でもアニメーション揃えたい時
http://www.knockknock.jp/archives/184

#Placehold.jp
ダミー画像とりあえず入れたいよ
http://placehold.jp/

#HTMLタグ除去
テキストだけ抜いてサイトの調査とかしたいよ
https://crocro.com/tools/item/del_html_tag.html

#Geocoding - 住所から緯度経度を検索
場所の緯度経度確認したいとき
https://www.geocoding.jp/

#正規表現
どれが何やったっけなるとき
http://shanabrian.com/web/regular_expression.php

#You might not need jQuery
いい加減脱jqueryしたいとき
http://youmightnotneedjquery.com/
gitで複数のユーザーを使い分ける人用サブコマンド(git author)を作った

# gitで複数のユーザーを使い分ける人用サブコマンド(git author)を作った

この記事は[Ponos Advent Calendar 2019](https://qiita.com/advent-calendar/2019/ponos) 3日目の記事です。
昨日は @e73ryo さんの[「MonKey - Productivity Commands」のコマンド操作でUnity開発を効率化する](https://qiita.com/e73ryo/items/42758bb6c1f33de3adfa)でした。

---
初めてgitのサブコマンドを作ったので紹介します。
ちなみにRust製です。
[リポジトリ](https://github.com/block-cube-lib/git-author-rs)
[日本語ドキュメント](https://block-cube-lib.github.io/documentation/git-author/)

## 作った理由
gitを使っているときに複数ユーザーを使っていると `git config user.name`とか`git config user.email`とか叩いて現在のユーザー情報を確認することがあると思います。
また、別のユーザーに切り替えるのを忘れてコミット何度か行い、後でログを見て気づくこともあるでしょう(ありました)。

そんな人のために
- コマンド1つで`user.name`と`user.email`を取得
- コマンド1つで`user.name`と`user.email`を設定
- **過去のコミットのauthorとcommitterを書き換える**
ができる`git author`を作りました。

## インストール方法
Rustをインストールしておりcargoが使える環境なら
`cargo install git-author`でインストールできます。

cargoが使えない環境なら今すぐRustを始めましょう
https://www.rust-lang.org/tools/install

## git authorでできること
### get
`git author get`で `user.name <user.email>`の形式で取得できます。
`get`は省略可能です。
`--local`,`--global`の指定ができます。
![git-author-get.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98727/0dc89f03-b7f9-6138-d4cc-a0e26776881f.gif)

### set
`git author set hoge hoge@gmail.com`の形式で、現在のリポジトリのユーザーをセットできます。
こちらも`--local`,`--global`の指定ができます。
![git-author-set.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98727/c10201ff-b368-dcf0-42f7-c692f6ddf888.gif)

### replace
過去のコミットのauthorを書き換えるコマンドです。
`git author replace hoge hoge@gmail.com fuga fuga@gmail.com`でauthorまたはcommitterが
`hoge <hoge@gmail.com>`のコミットのauthorとcommitterをすべて`fuga <fuga@gmail.com>`に書き換えます。
後半の`fuga <fuga@gmail.com>`は省略可能で、省略した場合は`git author get`で取得できるauthor(現在のauthor)に書き換えます。
![git-author-replace.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98727/caf88ed7-6443-419f-5a60-a728dc4e2505.gif)

## 注意事項
言うまでもないことですが、複数人で開発しているリポジトリでreplaceを使用するときは他の人の確認をとってください。

push済みコミットを書き換えた場合は書き換えた情報をpushする時に`git push --force`と`--force`オプションを書いてやる必要があります。

## おわりに
使っていただけると嬉しいです。
不具合・改善案報告なども待ってます。

---
明日は@nimitsuさんの[GameLift RealTimeServerで遊んでみよう for Unity（AWS設定編）](https://qiita.com/nimitsu/items/61cf2b177c10b59ebd3f)です
KerasのModel()クラス(functional API)でMNIST学習モデルを構築してみる

　ここまで`Sequential()`でDLモデルを構築してきましたが、この方法では学習スピードが辛くなってきましたし、軽量高速なモデルも作ってみたいと感じます。ですが、`Sequential()`ではモデルの複雑さと学習スピードの遅さがほぼイコール関係なので、扱うデータが大きく多量になるにつれて試行錯誤も時間がかかるようになります。そこで気になってくるのが主流となっている`Model()`クラスを使ったモデル構築です。
　これまで`Sequential()`でもそこそこいろいろなことを試してきましたし、そろそろ太刀打ちできるかな？ということで`Model()`クラスを使ったDLモデル構築に挑戦してみようと思います。

#そもそもModel()クラスって何？
　Kerasには機械学習モデル構築の方法として、2種類のクラスが用意されています。今まで使ってきた`Sequential()`クラスと、より高度なモデル構築が可能な`Model()`クラス(functional API)です。
　`Sequential()`クラスでは、ノード同士の入出力は上から順番に勝手にやってくれていました。ところが、`Model()`クラスでは、ノードがどのノードからデータを受け取るのか等を自分で決めることができます。
　例えば、全結合層一層のMNIST学習用モデルをそれぞれの記法で書くと以下のようになります。

##Sequential()クラスの場合
```python
from keras.layers.core import Dense, Activation
from keras.models import Sequential

model = Sequential()

model.add(Dense(512, input_dim=(784)))
model.add(Activation("relu"))

model.add(Dense(10))
model.add(Activation("softmax"))
```

##Model()クラスの場合
```python
from keras.layers import Input, Dense
from keras.models import Model

inputs = Input(shape=(784,))
dense1 = Dense(512, activation='relu')(inputs)
predictions = Dense(10, activation='softmax')(dense1)

model = Model(inputs=inputs, outputs=predictions)
```
　一番の違いは各レイヤーの最後に入力がどのレイヤーかを指定している部分。これによってひとつの出力を複数のノードに渡す枝分かれするモデルも構築可能だし、`Model()`は複数の入力、出力を指定することも可能なので、例えばR、G、Bのチャンネルを別々に学習させて最後に合流させる、みたいなモデルを作ることもできるようになります。

#実際にMNISTを学習させてみる
　ここまでだとちょっとピンとこないところもあるので、CNN版MNISTモデルを`Model()`で作ってみます。

##コーディング
　見やすいように小分けにしますが、一連で書いていただいてだいじょうぶです。

###前処理
```python
import numpy as np
from keras.datasets import mnist
from keras.utils import np_utils

#MNISTデータセット呼び出し
(X_train, y_train), (X_test, y_test) = mnist.load_data()

#データの正規化
X_train = np.array(X_train)/255.
X_test = np.array(X_test)/255.

#CNNに入れるために次元を追加
X_train = np.expand_dims(X_train, axis=-1)
X_test = np.expand_dims(X_test, axis=-1)

#ラベルのバイナリ化
y_train = np_utils.to_categorical(y_train)
y_test = np_utils.to_categorical(y_test)
```

　以前はモデルの中に`Reshape()`レイヤーでチャンネル追加をしていましたがこの方法はMNIST以外だと何故かうまくいかなかったので、今回は前処理段階で次元を追加する方法をとってみました。

###モデル構築
```python
from keras.layers import Input, Dense, Conv2D, MaxPooling2D
from keras.models import Model
from keras.layers.core import Flatten

inputs = Input(shape=(28,28,1)) #入力層

conv1 = Conv2D(16, (3, 3), padding='same', activation='relu')(inputs) #畳込み層1
pool1 = MaxPooling2D((2, 2))(conv1)
conv2 = Conv2D(32, (3, 3), padding='same', activation='relu')(pool1) #畳込み層2
pool2 = MaxPooling2D((2, 2))(conv2)

flat = Flatten()(pool2) #全結合層に渡すため配列を一次元化
dense1 = Dense(784, activation='relu')(flat) #全結合層

predictions = Dense(10, activation='softmax')(dense1) #出力層

model = Model(inputs=inputs, outputs=predictions) #モデルの宣言(入力と出力を指定)
```

###コンパイル・実行
　ここはいつもどおり。

```python
model.compile(optimizer="sgd", loss="categorical_crossentropy", metrics=["accuracy"])
hist = model.fit(X_train, y_train, batch_size=16, verbose=1, epochs=30, validation_split=0.3)
```

###評価
```python
score = model.evaluate(X_test, y_test, verbose=1)
print("正解率(acc)：", score[1])
```
　ぼくの環境では正解率(acc)：0.9894となりました。正常に学習できているようです。

#まとめ
　記述のルールがちょっと変わり、可読性が少し下がりますがそこまでとっつきにくい感じではなさそうです。これまで`Sequential()`でいろいろ試してきた効果もあったと思います。
　次回以降で、もう少し高度なモデル構築も試してみたいです。
Blazorアプリで、Boxデザインのコンポーネントを配置する

Blazorで、フレキシブルに使えるBoxデザインのコンポーネントを作ってみたいと思います。

こんな感じです。
![boxデザイン.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110304/cd0ac267-67ed-922a-271e-628831b8d0e3.jpeg)

# ベースのBoxデザイン

こちら様のデザインを参考に、ベースとなるBoxデザインのコンポーネントを作成します。

[ぽんひろ com  アイコン吹き出し付きボックスをHTMLとCSSで作る！レスポンシブ対応！](https://ponhiro.com/icon-balloon-box/)

## 共通のCSSをsite.cssにコピペ

参考サイト内に記載されている、共通のCSSを、Blazorアプリプロジェクトの`wwwroot/css/site.css`に追記します。
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110304/42319ea2-9326-bd13-5ac7-8f1ab40e2e42.png)


## blueの定義を追加

複数の色を指定できるように、site.cssに追加しておきます。今回は、BlueのCSS定義を追加しておきます。
![34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110304/80a55669-52b5-2d05-f24b-8e182920878e.png)

# BoxFormコンポーネントの作成

`BoxForm.razor`という名前で、`Pages`フォルダにコンポーネントを作成します。
BoxForm内のhtmlは、参考サイト内の記述をほぼそのまま使います。

```html:参考サイト.html
<div class="iconbox">
<div class="box-title">ここにタイトル</div>
<div class="iconbox-wrap">
<div class="box-content">
<ul class="list">
   <li>リスト1</li>
   <li>リスト2</li>
   <li>リスト3</li>
</ul>
</div>
<div class="iconballoon">
<div class="balloon">
吹き出し内容
</div>
<div class="icon">アイコン画像をここに挿入</div>
</div>
</div>
</div>
```

BoxFormは、`Parameter`を使って、タイトル、列挙される文字列、フォームの色を指定できるようにしてみます。また、`RenderFragment`を使って、子コンテンツを指定できるようにしておきます。

```javascript:BoxForm.razor
<div class="iconbox iconbox-@Color">
    <div class="box-title box-head-@Color">@Title</div>
    <div class="iconbox-wrap">
        <div class="box-content">
            @ChildContent
            <ul class="list">

                @foreach(var data in ListData)
                {
                    <li>@data</li>
                }
            </ul>
        </div>
    </div>
</div>

@code {
    /// <summary>
    /// 内包するコンテンツ
    /// </summary>
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    /// <summary>
    /// タイトル
    /// </summary>
    [Parameter]
    public string Title { get; set; } = "";

    /// <summary>
    /// 列挙する文字列
    /// </summary>
    [Parameter]
    public string[] ListData { get; set; } 

    /// <summary>
    /// 色
    /// </summary>
    [Parameter]
    public string Color { get; set; }  = "";
}


```

# BoxFormコンポーネントを使用する

BoxFormコンポーネントの使い方はとても簡単です。`<BoxForm>`タグを指定してページに配置し、各パラメータに値を指定してあげます。

```javascript:Index.razor
@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

@*催し物*@
<BoxForm Title="催し物" ListData="@Events">
    <p>催し物のご案内です</p>
</BoxForm>

<hr />

@*今日のネタ*@
<BoxForm Title="今日のネタ" ListData="@Neta" Color="blue">
    <p>産地直送!ネタ切れ御免!</p>
</BoxForm>

@code{

    /// <summary>
    /// 催し物の列挙
    /// </summary>
    string[] Events = new[] { "9時 0歳からのBlazor教室", "13時 失敗しないBlazor", "15時 私はこうしてBlazorを習得しました" };


    /// <summary>
    /// 今日のネタの列挙
    /// </summary>
    string[] Neta = new[] { "銀鮭", "ほっけ", "ほたて","まぐろ","いか" };
}

```
疑似テスト（リソース関連）- Windows

# CPU負荷
SysinternalのCpuStresというツール
GUIでポチポチすれば負荷を上げれる（全部にチェックを入れると100%で張り付いて何もできなくなるので要注意）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315938/d9bb25ff-01ed-2634-8bbb-05c1a956804e.png)



# メモリ負荷
SysinternalのTestlimitというツール
コマンド例は、2秒ごとに500MBを3回増やす

```
>Testlimit.exe -d 500 -c 3 -e 2

Testlimit v5.24 - test Windows limits
Copyright (C) 2012-2015 Mark Russinovich
Sysinternals - www.sysinternals.com

Process ID: 376

Leaking private bytes with touch 500 MB at a time...
Leaked 1500 MB of private memory (1500 MB total leaked). Lasterror: 0
この操作を正しく終了しました。
^C
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315938/43c35874-c9bb-beb4-9142-c336b92a2930.png)


シンプルに1GBの負荷を掛けたければ、↓

```
>Testlimit.exe -d 1000 -c 1

Testlimit v5.24 - test Windows limits
Copyright (C) 2012-2015 Mark Russinovich
Sysinternals - www.sysinternals.com

Process ID: 9760

Leaking private bytes with touch 1000 MB at a time...
Leaked 1000 MB of private memory (1000 MB total leaked). Lasterror: 0
この操作を正しく終了しました。
^C
```

# ディスク空き

```
>fsutil file createnew XXXXX YYYYY
X：ファイルを作る場所
Y：バイト単位
```
マネージャーの問題地図を読んで

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

サムザップでエンジニアのマネージャをしている野口といいます。
この記事では、マネジメントに関するある書籍を少し紹介し、その中の一部課題について自分の組織にあてはめて考えてみた内容について、ちょっと書いてみようと思います。

#読んでみた書籍
"マネージャーの問題地図 ~「で、どこから変える?」あれもこれもで、てんやわんやな現場のマネジメント　沢渡 あまね  (著), 白井匠 (イラスト)"
<img width="247" alt="スクリーンショット 2019-12-02 11.42.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542675/e9e8379d-1c85-ec63-72d9-d9608bfa264c.png">
こちらの問題地図シリーズは他にもいくつか出版されています。

以前に別PJでエンジニアマネージャをされている方からこちらの本をいただく機会があり読んでみたのですが、いろいろな観点からマネージャ(管理職)のあるべき姿について書かれています。

自分も現在、現場のマネジメントをしているにあたって、
やり方は正しいのか色々悩んだり、抱えている問題についてどう解決するのが良いのか、そもそもどこに課題があるのかと考えることがありますが、
こちらの本を読んで頭の中がスッキリ整理されたような感じがしました。
また、"ここは割り切っていいんだ"と少しホッとした感覚になりました。

職種に関わらず、いまマネージャ職をされている方には刺さる内容だと思います。

#ちょっと概要
>この本は、マネージャが1人で頭を抱えて疲弊する今日を、チームのみんなが笑顔で成長する明日に変えるための本です。

いまマネージャ職はいろいろなミッションを求められ、疲弊している。
一言にマネジメントといっても領域は幅広く、
・業務に必要なコミュニケーションをつくる
・必要なリソースを特定し、調達する
・日々の業務を効率化し、課題解決する仕組みをつくる
・メンバーに成長機会を提供する
・組織にブランド価値をつくる

これらをマネージャ個人の経験やスキル、メンタルによってなんとかしている状況。
その結果、若手が誰もマネージャになりたがらず、かつマネージャ自身も成長しない悪循環に陥いる。

これらを1人のマネージャが全てやる必要はない。
管理職がなんでもできる必要はない。
全体像を把握し、足りていないものについてチームや外の力を借りて解決すれば良い。

===
各マネジメント領域について、かなり細かく掘り下げられ、それぞれに実践的なアドバイスが記載されています。
自分の場合はゲーム業界ですが、課題感が当てはまるケースが非常に多く、読んでいる最中に何度も「そう、これこれ」と思わされました。

#自分の組織に当てはめる
自分のPJにはプロジェクトマネージャー（PM）がいますが、その業務内容の定義は確かに曖昧になっていると感じます。
PJ全体のロードマップ/タスク管理といった主要タスク以外に、メンバーの勤怠管理、一部リソースの外注管理、外の事業部とのやりとり、懇親会の設定や弁当の配布まで受け持っていたことがあります。

いまは一部の仕事を若手に任せたり、
タスク管理を別の人間が担当してある程度分散できていますが、
PM、開発ディレクター、xxマネージャといった名称から業務内容が曖昧になる管理職は、
会社として役割の定義を再確認/定義し、
本来するべきタスクの確認と、定期的な棚卸しを意識しなければならないと思いました。

また、書籍を読んでいると何度か「勇者待ち」というワードが出てきました。
課題の解決を、ボランティア意識や、改善スキルのあるメンバーに依存し、属人的になんとか回せている状態を指している言葉です。
あらためて自分の組織も、勇者達によって支えられている部分がいくつもあるなと実感します。
これをきっちりマネジメントし、組織/システムで解決できている状態にしなければなりません。

#さいごに
>自分自身が育つつもりと、メンバーを育てるつもりのないマネージャは失格

文中のこの言葉が頭に残っています。
これまでは"自分自身が育つつもり"という観点がなぜかすっぽり抜けていました。
マネジメント業務に追われて、技術的なキャッチアップや自分の成長に不安を覚えることもありました。

あらためて、それは組織にとって良くないことだと実感しました。
1人で抱え込んでも不全に陥るだけで、なによりそのような状況では、
若手がマネージャになる土壌を育てることができないなと考えさせられました。

明日は @RyotoKitajima さんの記事です。
【Swift】 ログの出力をもう少しいい子にしてみる

# 現状の問題点
Xcodeを使って開発していると、普通であれば開発中のアプリのログを見たくなることが多いと思います。そんなとき、Swift標準の `print()` を使ってログを表示しようと、こんな感じのコードを書く人が多いのではないでしょうか。

```swift
print("hoge hoge hoge...")
```
これでも間違っているわけではないですが、この書き方だと実際に表示されるログが、

```
hoge hoge hoge...
```
のようになってしまい、正直に言って、とても見やすいとは言えないです。仮にログがこれだけなら問題ないのですが、実際に開発しているとログが1つだけなどという状況になるはずもなく、結果として、

```
hoge hoge hoge...
hoge hoge hoge...
hoge hoge hoge...
hoge hoge hoge...
hoge hoge hoge...
```
となり、どのログがどこで吐き出されたものか解らなくなり、ログの場所を見つけるためのログを仕込むという、終わりのないループに陥ってしまうことになりかねません。

というわけで、今回は普段から私が使っているログ出力を軽く紹介していきます。

ちなみに、`NSLog()`を使えばいいんじゃね、と思ったあなた。あなたはとても正しいですが、この記事は、せっかくSwiftを使ってるんだからNS系の関数はできる限り使いたくないという人向けですので、予めご了承ください。

# 作ってみた

参考までに`NSLog()`で出力した場合は、こうなります。

```
2019-12-31 12:00:00.000000+0900 HogeProject[0000:000000] hoge hoge hoge...
```
はい、とても見やすいですね。なので、なるべくこの形に近づけるようにログ出力を調整していきます。

ではログにどんな情報を乗せるのかを考えていきたいと思います。
`NSLog()`を参考にしてみると、

・出力時間
・アプリ名
・メッセージ

といったところでしょうか。
この3つの要素に加えて、

・クラス名
・関数名
・行数

があれば、ログが見やすくなると思うので、今回はそれらを入れていきます。
そして出来上がったのが、こちら

```swift:LogUtil.swift

class LogUtil {
    
    /// 日付の出力フォーマット
    private static let dateFormat = "yyyy-MM-dd HH:mm:ss.SSSZ"
    
    /// ログ出力
    class func log(_ message: String = "", file: String = #file, function: String = #function, line: Int = #line) {
        let logMessage = createLogMessage(message, file: file, function: function, line: line)
        print(logMessage)
    }
    
    /// ログ＋エラー出力
    class func errorLog(_ message: String = "", error: Error, file: String = #file, function: String = #function, line: Int = #line) {
        let logMessage = createLogMessage(message, error: error, file: file, function: function, line: line)
        print(logMessage)
    }
    
    /// 現在時刻の取得
    private class func nowDateTime() -> String {
        let formatter = DateFormatter()
        formatter.locale = Locale(identifier: "en_US_POSIX")
        formatter.dateFormat = dateFormat
        return formatter.string(from: Date())
    }
    
    /// ログに表示する文字列を生成
    private class func createLogMessage(_ message: String, error: Error? = nil, file: String, function: String, line: Int) -> String {
        var logMessage = nowDateTime()
        
        if let bundleName = Bundle.main.object(forInfoDictionaryKey: "CFBundleDisplayName") as? String {
            logMessage += " [\(bundleName)]"
        }
        
        if let swiftFile = file.split(separator: "/").last?.split(separator: ".").first {
            logMessage += " [\(String(swiftFile))]"
        }
        
        logMessage += " <\(function)>"
        logMessage += " [l: \(line)] "
        logMessage += message
        
        if let error = error {
            logMessage += "\n\(error)"
        }
        
        return logMessage
    }
}
```
これでひとまず、目的のログを出力することができるようになります。

使うときは、ログを出力したい箇所で、

```swift
LogUtil.log("hoge hoge hoge...")
```
と呼び出せば、ログが出力されます。
ログの見え方はこんな感じです。

```
2019-12-31 12:00:00.000+0900 [HogeProject] [HogeViewController] <hogeFunction()> [l: 14] hoge hoge hoge...
```
どうでしょうか。`NSLog()` に近い表現になったと思います。少なくとも、`print()`で出力するよりはだいぶ解りやすくなったのではないでしょうか。

#おわりに
以上が私が開発中に使っているログ出力です。もちろん、人によっては不要な情報も出力されているかもしれませんが、ひとつの例として受け取って貰えればと思います。
open-wc 開発 with Docker

[open-wc](http://open-wc.org/)というプロジェクトがある。
open-wc自体は、(デフォルトは)lit-elementを使って、webcomponentを開発するベストプラクティスを開発者に提供しようという感じのプロジェクト。

でも、今回はそこは主眼ではない。
このプロジェクト、フロントエンド開発環境としてやばいぐらいリッチなので最近使い始めている。

- test
- karma
- snapshot testing
- coverage
- storybook
- demo server

これら設定済で完備である。
このプロジェクトのscafoldがコマンド一発でできるのだから素晴らしい。

んで、開発用ツールのWebサーバーをdocker-composeでポンと一発で起動したら素敵だと思ったので書いてみました。

## (open-wcのusage)

```console:open-wcの導入(公式見たほうが早い)
$ npm init @open-wc
> ✔ What would you like to do today? › Scaffold a new project
> ✔ What would you like to scaffold? › Web Component
> ✔ What would you like to add? › Linting, Testing, Demoing
> ✔ Would you like to scaffold examples files for? › Testing, Demoing
> ✔ What is the tag name of your application/web component? … hoge-piyo
> npm init @open-wc --destinationPath /hoge-piyo --type scaffold --scaffoldType wc --features linting testing demoing --scaffol
dFilesFor testing demoing --tagName hoge-piyo --writeToDisk true --installDependencies false 
```

## Dockerのための設定
ここから以下を調整する

```javascript:es-dev-server.config.js
module.exports = {
  hostname: "0.0.0.0",
  port: Number(process.env.PORT)
};
```

```dockerfile:Dockerfile
FROM node:lts

RUN \
# for karma test
wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
&& echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list \
&& apt-get update -y && apt-get install -y google-chrome-stable \
&& apt-get clean \
&& rm -rf /var/lib/apt/lists/*

WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install
COPY . ./
CMD [ "npm", "start" ]
```

```yaml:docker-compose.yml
version: '3.7'

volumes:
  node_modules: {}
services:
  app: &app
    build: .
    volumes:
      - .:/app
      - /app/node_modules
    command:
      - bash
    tty: true
  demo: &demo
    <<: *app
    environment:
      PORT: 8000 
    ports:
      - 8000:8000
    entrypoint:
      - npm
      - run
    command:
      - start
  test:
    <<: *app
    command:
      - npm
      - run
      - test:watch
      - --
      - --coverage
  coverage:
    <<: *demo
    depends_on:
      - test
    environment:
      PORT: 8001
    ports:
      - 8001:8001
    entrypoint:
      - npx
      - es-dev-server
      - --root-dir
      - coverage
      - --watch
  storybook:
    <<: *demo
    environment:
      PORT: 8002
    ports:
      - 8002:8002
    command: storybook
```


## このプロジェクトの使い方

```console:サービス起動用ターミナル窓
$ docker-compose up -d

$ open http://localhost:8000/demo/ # demo
$ open http://localhost:8001 # coverage
$ open http://localhost:8002 # storybook
$ docker-compose log -f test # test watching

# $ docker-compose down -v # 終わるとき
```

ブラウザが3窓でリアルタイムに色々出してくれる。
Unityプログラマは個人開発だとプログラマ領域以外のアセット買ったほうがいいと思った話+おすすめアセット



# はじめに

今, 個人開発をしています。
帰っては家で開発をして、休日は予定がなければまったり開発をしています。

結果いくつかの有料アセットを買うことになり…
あんまり使わなくてもいいかなーというアセットと
あ、**これめっちゃ使う！！**というアセットが出てきました。

本当は個人開発をしてリリースしたよ！！みたいな記事を出したかったのですが, 多分アドベントカレンダーぶっちしそうなのであきらめて今回は「**Unityプログラマ的に**」使えたアセット, 多分なくてよかったアセットを紹介してみます。

## 使えるアセットと使えないアセットの違い

タイトルにある通りで**プログラマはプログラムのことは自己解決できる！！**と気が付きました。
逆に**絵も描けないし素敵なデザインは無理！！**ということも実感しました。

つまりプログラマとして使えるアセットというのは

1. 素敵なデザインとかアニメーションとかのアセット
2. UIとかを簡単に作れるようになるアセット
3. かわいいキャラクターとか素敵な3Dモデルのアセット

このあたりです。
少なくとも僕にはこのあたりのスキルがないので数年かけて手に入れるか買うしかないのです。買ったら数千円です。買ったら早い！！
僕は[ #わかばちゃんと学ぶ シリーズの作者さん](https://twitter.com/llminatoll)ではないのです！！正直めちゃくちゃうらやましい！！

逆になくてもいいかなというのは

1. プログラムの補助ツール
2. ノードエディタとかノードスクリプトとか

こういうアセットは**なくても自分で何とかできる！！**はずです。

というわけでいくつか実際に使ってみてよかった**プログラマではどうにもならないタイプのアセット**紹介です。

# プログラマなら買って損をしないアセット

## [DoozyUI](https://assetstore.unity.com/packages/tools/gui/doozyui-complete-ui-management-system-138361)

UIの特に押したときのアニメーション等がプリセットで入っていてなんかすごいかっこいい！！ってなりました。

アイコン画像サンプルとかも少し入っているのでそれもとても助かりました。
なにせ**かっこいいUIはモチベーション上がるからね！！**

少し高いけどちょくちょくセールになるので狙うといいですよ！

こんなアニメーションたくさんプリセットで用意されててるのいいですよね。

![animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77177/1bb4e06b-db6e-edf4-a61c-59e6089d4221.gif)

## [Essential UI Pack](https://assetstore.unity.com/packages/tools/gui/essential-ui-pack-73670) 等アイコン素材系

UIのアイコンとかのプリセットです。
安いのでひとまずこれ選びましたがお財布や作りたいUIと相談していいやつを買うといいと思います

* Ultimate Clean GUI Pack (高級品だけどかっこいいUIいっぱい入ってそう)
* Clean Flat Icons (白1色のシンプルなアイコンImageのColorプロパティで色は変えられます)

## [Animated 2D Monster Pack](https://assetstore.unity.com/packages/2d/characters/animated-2d-monster-pack-1-67122)等 かっこいい/かわいいキャラクターとかの素材

**お絵描きできないのでお絵描きできる人から買いましょう**

こちらももちろん用途に合わせて選択してください。
少し探した中だと

* Customize Dolls_N.0
* 2000 Fantasy Icons

等が都合よさそうですし。
昔懐かし？キャラクターなんとか機とかでもありかも？

## [SRDebugger](https://assetstore.unity.com/packages/tools/gui/srdebugger-console-tools-on-device-27688)等ユーティリティ系

これも自分で書けばいいといえばいいんですけど…正直個人開発でメインのもの以外書きたくねーよ！！って感じなのでこういうアセットはあっていいと思います。

テストメニューのUIとか考えたくないですしね！！

# なくてもいいかなって思ったアセット

逆に自分で何とかできるタイプはいらないなって思いました。

## PlayMaker

あってもいいけど多分自分でコード書いたりすれば十分かなと思いました。

## 課金系アセット

Unity IAP出たからもういらないよ
ちなみにUnity IAPはメチャクチャ簡単だよ

# 結論

個人開発においては, 自分でできない部分を補完する目的でAssetを買い漁るのがいいかなと思いました。
Neo4j でcsvを読み込んでみた．

# Neo4jとの格闘の日々

研究で，グラフデータを扱うことになり，先輩たちがNeo4jを使っていたという思考停止理論からNeo4jを使うことに．

特定のデータを使って，グラフデータにする必要があったため，csvファイルを作って，ダウンロードさせた

結構調べたけど，なかなか出てこなかったので，備忘録程度に記す．

## 事前準備
### Neo4jをインストール
Macで，brewが入っているなら，

```
$ brew install neo4j
```

で一発

<img width="526" alt="__workspace_apiecosystem_data_—_-zsh_—_zsh_—_Pro_—_ttys013_—_123×42_—_⌥⌘1_と_ダウンロード.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123597/e2cd722f-01c3-58ce-928f-fd7dd55a32ba.jpeg">
こんな感じになればおけ

### csvファイルを用意

とりあえず，やってみたとかだったら，kaggleとかからもってこればよし
いちおう，チュートリアル的なやつも用意されているらしい...

## LocalファイルのDLを許可

初期設定では，Local環境にあるCSVファイルは読み込めない様になっているので，

```
$ sudo vim /usr/local/Cellar/neo4j/3.5.12/libexec/conf/neo4j.conf
```

で，設定ファイルを開き，

```
dbms.security.allow_csv_import_from_file_urls=true
```

に変更する．

### Neo4jをブラウザで使用

普通にTerminalで，

```
$ Neo4j start
```

したあとに

```
$ open http://localhost:7474
```

でブラウザを開く
<img width="1920" alt="neo4j_bolt___localhost_7687_-_Neo4j_Browser.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123597/7f1f3c1a-88a1-c560-bcf3-ec8454ccc627.jpeg">

こんな画面が開けたらOK

あとは，ブラウザにサイファークエリを書き込んでいきます．


### LOAD CSV

```
LOAD CSV WITH HEADERS FROM　"file:///api-node.csv" AS csvLine CREATE (n:API {id: toInt(csvLine.API_id), name: csvLine.name, category: csvLine.API_category, date: csvLine.date})
```

ここで，注意してほしいのが，Local環境のcsvを読み込ませるときにそのcsvファイルを
` /usr/local/Celler/neo4j/3.5.12/libexec/import/` 配下にすること

ここに配置しないとエラーが起こる．

こんな感じで使っていくと良いｗ
kubernetesのkubectl get podでrunningのものだけを取得する

Runningだけ取り出すとか
Running以外を取り出すとか色々出来ます。


# 全pod

```
$ kubectl get pods
NAME                             READY   STATUS    RESTARTS   AGE
hoge-web-56fb76798d-v27l8   0/2     Evicted   0          13h
hoge-web-56fb76798d-xgf2f   2/2     Running   0          61m
```

# Runningだけ

```
$ kubectl get pods --field-selector=status.phase=Running
NAME                             READY   STATUS    RESTARTS   AGE
hoge-web-56fb76798d-xgf2f   2/2     Running   0          61m
```

# Running以外

```
$ kubectl get pods --field-selector=status.phase!=Running
NAME                             READY   STATUS    RESTARTS   AGE
hoge-web-56fb76798d-v27l8   0/2     Evicted   0          13h
```

# pod名だけを取り出す

```
$ kubectl get pods -o=jsonpath={.items[*].metadata.name} --field-selector=status.phase!=Running

hoge-web-56fb76798d-v27l8
```