OmniAICreator/Qiita-1.07M huggingface dataset:
Visual Studio Code (VSCode) でHTMLを編集するときにライブプレビューしながら編集したい時に使う拡張機能

# 概要
HTMLファイルを編集するときにいちいちブラウザを更新するのがめんどいので拡張機能を使用してリアルタイムプレビューしながら編集する
# 方法
**Live Server** という拡張機能を使う
![2019-09-09 18_13_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136348/ca77ca11-2299-7f59-0325-c12737929418.png)
左のExtensions のボタンをクリックする、またはCtrl + Shift + X を押下する
検索窓に**Live Server** と入れて検索する
Install する
# 使い方
コードの場所で右クリック > **Open with Live Server** をクリック (Open Folder している必要がある)
またはAlt + L > Alt + O でサーバ起動
サーバを停止するときはStop Live Server か、Alt + L > Alt > C で停止する
![2019-09-09 18_21_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136348/8521d7e2-97c2-a403-6a52-fe3ce6647ab5.png)
# 結論
こんな感じで編集できる
![GIF.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136348/15cb40e7-5015-cb7f-ee01-1a1dc1d64061.gif)
【Nuxt.js】WebアプリSHISHOWを開発したときの備忘録（番外編）エラー対処

開発中にコンソールに出力されたエラーをまとめておきます。
ゆっくりと更新していきます。

#エラー1

```none
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /Users/kunosouichirou/Documents/GitHub/SHISHOW_nuxt/package.json
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/Users/kunosouichirou/Documents/GitHub/SHISHOW_nuxt/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/kunosouichirou/.npm/_logs/2019-09-09T08_56_20_928Z-debug.log
```

npm run devするディレクトリが間違っている可能性があります。

#エラー2

```none
Error: Cloud resource location is not set for this project but the operation you are attempting to perform in Cloud Firestore requires it. Please see this documentation for more details: https://firebase.google.com/docs/projects/locations
```

僕の場合は```firebase init```をしたときにこのエラーが出てきました。
これは，firebaseのページの方のプロジェクトの設定の全般タブのところでロケーションを正しく設定したら直りました。

#エラー3

```none
 ERROR  Failed to compile with 1 errors                                                                 friendly-errors 18:21:01

This dependency was not found:                                                                          friendly-errors 18:21:01
                                                                                                        friendly-errors 18:21:01
* firebase in ./plugins/firestore.js                                                                    friendly-errors 18:21:01
                                                                                                        friendly-errors 18:21:01
To install it, you can run: npm install --save firebase                                                 friendly-errors 18:21:01
```

書いてある通り，```npm install --save firebase```で解決するはずです。
データの受け渡しにS3を使う。2019-09-09

# 概要
世はまさに大データ時代です。
社内で分析している場合もありますが、外注して分析をしてもらっている場合もあります。
外注している場合はデータの受け渡しが発生します。
メール添付で送ったり、何か媒体に記録して送ったり、便利なクラウドサービスを利用したり、いろいろ手段はあります。

今回は「データを受け取って分析をする側」にたって、**データの受け渡しにS3を使うといろいろ便利かもしれない点について**書きます。

# 前提・準備

## 状況整理

* 発注者、データを分析して欲しい人、データを準備する人、データを送る人
* 受注者、データを分析する人、データを授受する場を用意する人、データを受け取る人、**すでにAWS利用中**

**ポイント: 「受注者」が "データを授受する場を用意する" ケースです**
（「発注者」が「受注者」が用意したS3にデータを置きます）

## S3の準備

良い感じに特定のBucketだけ見られるようなポリシーを作ります。
「発注者」からは受け渡しに使うBucketのみ見える状態です。

設定内容の詳細は割愛（画面からぽちぽちでも簡単に設定できるし、awsコマンドを使っても簡単にできるし、ググればやり方はたくさん見つかると思う！）

## 授受するデータ

例えば、 あるユーザの利用金額のデータの授受をすこぶるシンプルに考えます。
ファイルの形式は **CSV** で **gzipで圧縮** されています。
`ユーザID,利用金額`
という内容です。具体的には以下の内容で、

```
% gzcat test_data.csv.gz | head
g,55777
n,14623
l,65655
t,92348
a,87128
m,74247
j,55425
j,44207
z,67019
j,5178
```

サイズもそこそこあります。

```
% file test_data.csv.gz
test_data.csv.gz: gzip compressed data, was "test_data.csv", last modified: Mon Sep  9 07:56:49 2019, from Unix, original size 788893425
% gzcat test_data.csv.gz | wc -l
 100000000
```

# 便利かもしれないポイント

## すでにAWSを使っている場合、IAMをよしなにつかするだけでよい

すでにAWSを使っている場合、IAMをよしなにつかするだけでよいので楽 :smiley: 

## データの事前処理にAthenaを支えて便利、になるかも

### 例）不要なデータを抜く

例えば「1円のデータはテストデータだから分析対象には含めないでください」という指示が「発注者」からきた場合を考えます。
（結果の見やすさを考えて1円のデータが何件あるか数えます）

#### そこで登場 Athena 先生

便利ポイント

* Athena先生がよしなにS3上にあるファイルを読んでくれる
* Athena先生がよしなにCSVをパースしてくれる
* Athena先生がよしなにgzip圧縮されているファイルを解凍してくれる
* Athena先生のSQLパワーでよしなに集計などが行える

上記の通りの便利ポイントがあります。
「発注者」にS3にファイルを置いてもらったら、「受注者」側では

1. Athenaでcreate tableする
2. Athenaでselectする

の2ステップで良い感じにデータの前処理ができます。

##### 1. Athenaでcreate tableする

```sql
CREATE EXTERNAL TABLE `test_tb`(
  `id` string, 
  `amount` int)
ROW FORMAT DELIMITED 
  FIELDS TERMINATED BY ',' 
STORED AS INPUTFORMAT 
  'org.apache.hadoop.mapred.TextInputFormat' 
LOCATION
  's3://バケット名/'
```

##### 2. Athenaでselectする

**1円データを抜く**

```sql
SELECT count(amount)
FROM test_tb
WHERE amount = 1 
```

`(Run time: 30.85 seconds, Data scanned: 353.52 MB)`

||_col0|
|---|---|
|1|954|

**集計例**
idごとに集計してみたりも容易

```sql
SELECT
  id,
  count(amount)
FROM test_tb
WHERE amount = 1
GROUP BY  id
```

` (Run time: 30.81 seconds, Data scanned: 353.52 MB)`

||id|_col0|
|---|---|---|
| 1 | w | 27 |
| 2 | u | 34 |
| 3 | b | 29 |
| 4 | l | 23 |
| 5 | m | 41 |
|.|.|略|

#### その他のやり方も考える

##### コマンドで抜く

```
% time (gzcat test_data.csv.gz | egrep ',1$' | wc -l)
     954
( gzcat test_data.csv.gz | egrep ',1$' | wc -l; )  32.62s user 0.43s system 111% cpu 29.753 total
```

1円のデータを抜くだけの一例。
不要なデータを抜くだけならコマンドでも十分かもしれないが、もう少しカラムの多いCSVや、もう少し難しい条件の場合は大変そう。

##### RDBを使う

割愛。たぶん S3 + Athena よりはいろいろ準備が必要なはず。
RDBを使う場合もAthenaである程度加工したデータをinsertした方が良いのではなかろうか。

# まとめ

データの受け渡しにS3を使うと、

* すでにAWSを使っている場合、IAMをよしなにつかするだけでよい
* データの事前処理にAthenaを支えて便利、になるかも

ということでS3を使ってみるというのはいかがでしょうか！
【Nuxt.js】 WebアプリSHISHOWの開発をしたときの備忘録①導入編

# 自己紹介
Papillon6814という名前でよく開発をしています。
[僕のGithub](https://github.com/Papillon6814)
一つWebアプリをある程度の形までもっていくことが出来たので，記念に記事にしてついでに誰かの助けになればいいなと思っています。

# 作ったもの
**SHISHOW**というWebサービスを作ってみました！
https://shishow.tokyo/
*今はベータ版で，不具合も確認されています...
<img width="375" alt="392B834E-8E10-48ED-A6D6-3C09D2DC1826.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352824/7bfd35e1-432f-0c4b-d646-ee2bc44b4dcc.png">


簡単に概要を説明すると，
- アカウントを登録して，自分の好きなゲームを登録する。（存在しなければ新しく追加する）
- 他の人のプロフィールを見ることができるのでそれを見てゲームを教えてほしい人，一緒にゲームをやりたい人に師匠になってくれるように申請を送る。
- 申請が承認されれば，その人とチャットでやりとりをすることができます。

# 使ったフレームワーク等をざっくりと
## Nuxt.js
SEO対策をしたかったのでSSRをせねばならず，そのためにNuxtを選択しました。
実は最初はVue-cliを使って開発をしていましたが，SSRのために途中で移行しました。

## Firestore
すごく使いやすかったと思っています。ほとんどのページで使っているといっても過言ではないと思います。

## Cloud Functions
非同期でデータを少しずつ読みこむために使いました。jsでバックエンドを書くのは初めてでした。

## Firebase Hosting
デプロイしても
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352824/2133dc54-9cca-e189-b67d-7ebe08f06bf6.png)
この画面が表示されて困ったことがあったので，それについても書いていきたいです。

## vue-cropper.js
もしかしたらこれの導入で困っている人がいるんじゃないかなと思って一応書いておきます。（チームメイトが困っていたので）

#記事一覧

開発していった順に記事を投稿していきます。
[第2回](https://qiita.com/Papiposa/items/68ac0aa8be7c577f416f)
【Nuxt.js】WebアプリSHISHOWを開発したときの備忘録②Nuxt.js導入編

#Nuxt.jsの導入
npmはすでに導入されているものとします。

npx create-nuxt-appで新しくプロジェクトを開始します。

```none
npx create-nuxt-app shishow
```

```none
create-nuxt-app v2.10.1
✨  Generating Nuxt.js project in shishow
? Project name shishow
? Project description My legendary Nuxt.js project
? Author name Papillon6814
? Choose the package manager Npm
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools jsconfig.json (Recommended for VS Code)
```

サーバーサイドレンダリングがしたかったのでSSRの方を選んでいます。
今回はCSSフレームワークも使っていません。

```none
cd shishow
```

そしてshishowディレクトリに移動して，

```none
npm run dev
```

npm run devコマンドでプロジェクトを起動します。
npm run buildコマンドは，プロジェクトをfirebaseに
アップロードするときに使ったのでこの時は使わなくても大丈夫でした。

第3回に続きます。
機械学習で出会う関数【１】numpy.pad　(機械学習の学習 #4)

# 0. はじめに
python素人（＝当然numpy素人）が機械学習を学習する際に出会った関数で、理解に苦労したものを載せています。今回は「numpy.pad」。
以降numpyはnpと記載しています。

# 1. 登場箇所
CNNの畳み込みのところ。
畳み込む際にサイズが小さくならないように、画像の周りを数値（通常は０）で埋める。（＝パディング）

# 2. 動作
行列の前後に値を足す。

# 3. 形式

```Python
np.pad(array,range,mode(,そのほか）)
```

| 引数名 | 説明 | 補足 |
|:-----:|:-----|:-----|
| array | N次元の行列 |   |
| range  | 各次元における、前後のパディング範囲 |   |
| mode | 埋め込み方式 | 'constraint'（定数）が良く使われる |
 
### 補足
デフォルトはパディング値＝0。

# 4. リファレンス
https://docs.scipy.org/doc/numpy/reference/generated/numpy.pad.html

# 5. 例
## 例１
```python
a = [[1, 2], [3, 4]]
np.pad(a, [(1, 2), (3, 4)], 'constant')
array([[0, 0, 0, 0, 0, 0, 0, 0, 0],
       [0, 0, 0, 1, 2, 0, 0, 0, 0],
       [0, 0, 0, 3, 4, 0, 0, 0, 0],
       [0, 0, 0, 0, 0, 0, 0, 0, 0],
       [0, 0, 0, 0, 0, 0, 0, 0, 0]])
```

### 考え方
![np.pad.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386487/a49ca1a0-cd28-df37-618b-92f05a0c0bc4.png)

## 例２：im2col

```python
# N: データ数, C: チャンネル数, H: 各画像の幅, W: 各画像の高さ
N, C, H, W = input_data.shape
# 画像データの上下左右に0を1つパディング
img = np.pad(input_data, [(0,0), (0,0), (1, 1), (1, 1)], 'constant')
```

# 6. 蛇足（次回予告？）
ここまで書いてなんですが、結局im2colの理解そのものが難しかったなと。
「ゼロつく」読んで、自分で絵をかいてみて、結構苦労したので、im2colについてまとめたいと思います（自分が忘れそうなので…）。
サーバサイドKotlin用Docker, docker-compose

サーバサイドと書いてありますが、Android関係ないってことを表したかっただけです。
内容は最低限のものになってます。

ローカルでApache Beam SDK動かす用に雑に作ったものです。

とりあえずミニマムのexampleが一つ動いたので載せておきます。


## Dockerfile

```Dockerfile
FROM gradle:5.4-jdk-alpine

ENV APP_ROOT /usr/src/app

WORKDIR $APP_ROOT

USER root

RUN apk add --no-cache curl \
    zip \
    libc6-compat \
    bash

RUN ln -s /lib/libc.musl-x86_64.so.1 /lib/ld-linux-x86-64.so.2

RUN curl -s https://get.sdkman.io | bash

RUN bash -c " \
    source "$HOME/.sdkman/bin/sdkman-init.sh" && \
    sdk install kotlin 1.3.50 \
"
```

## docker-compose.yml
```docker-compose.yml
version: '2'
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/usr/src/app:cached
```

## 動かす時
```
$ docker-compose run --rm app bash
```
[Github] pushしたら Authentication Error - "remote: Invalid username or password"というエラーが発生

最近の勉強で学んだ事を、ノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです！

#起きたエラー
作成したリモートファイルにgit pushを行う際に以下の問題が発生しました。
git pushした際にusernameとpasswordを求められ、正しいものを答えても認証に失敗する。

```
$ git push -u origin master
Username for 'https://github.com': 
Password for 'https://github.com': 
remote: Invalid username or password.
fatal: Authentication failed for 'https://github.com/hoge/hoge.git/'
```

#解決方法
該当するリポジトリまで移動し、`Vimでvi .git/config`を開きます。

```
core]
        repositoryformatversion = 0
        filemode = true
        bare = false
        logallrefupdates = true
        ignorecase = true
[remote "origin"]
        url = https://github.com/hoge/hoge.git
        fetch = +refs/heads/*:refs/remotes/origin/*
[branch "master"]
        remote = origin
        merge = refs/heads/master
```

この様になっています。
この[remote "origin"]内の
`url = https://github.com:hoge/repository.git`
のurlがHTTPSのものを以下の様にSSHのurlに変更してあげると
`url = git@github.com:hoge/hoge.git`
これでusernameとpasswordは聞かれずにpushすることができます。
alpineで発生する「Error loading shared library ld-linux-x86-64.so.2: No such file or directory」を修正する方法

```
apk add --no-cache libc6-compat && ln -s /lib/libc.musl-x86_64.so.1 /lib/ld-linux-x86-64.so.2
```

## 参考
[UnsatisfiedLinkError: /tmp/snappy-1.1.4-libsnappyjava.so Error loading shared library ld-linux-x86-64.so.2: No such file or directory](https://stackoverflow.com/questions/50288034/unsatisfiedlinkerror-tmp-snappy-1-1-4-libsnappyjava-so-error-loading-shared-li)
VSCodeに筆記体を導入

# 概要
## 前置き
エディタ上の芸のないブロック体の文字を眺めていると、なんだか気が滅入ってきます。

そこで、Mediumやdev.toなど海外メディアのプログラミング記事でよく見かける、いい感じにおしゃれな筆記体フォントをVisual Studio Codeに導入し、プログラミングを少しでも耐え得るものにします。

## 結果
以下の画像のように、VSCodeでコードの要所要所を筆記体に変えました。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283226/07b4b243-4020-7608-9abf-010cf0d37e94.png)

# 手順
## フォントのインストール
[Fira Code iScript](https://github.com/kencrocken/FiraCodeiScript)をインストールします。

Fira Code iScriptは、プログラミング用に最適化されたフォント「Fira Code」に、筆記体を加えたものです。以下がFira Codeの例です。
![all_ligatures.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283226/af688f59-9b30-8db0-d536-3e9b04df90be.png)

Windowsであれば、ダウンロードしたttfファイルをダブルクリックすることでインストールできます。
## VSCodeのエクステンションのインストール
筆記体をサポートするものなら何でもいいのですが、私は[Dark ++ Italic](https://marketplace.visualstudio.com/items?itemName=idbartosz.darkpp-italic)を使いました。
## フォント設定の変更
VS Codeの「ファイル」=>「基本設定」=>「設定」=>「テキスト エディター」=>「フォント」から、Font FamilyをFira Code iScriptに変更します。
## CSSの変更
上までの手順を踏むと、JavascriptやPythonなどでは、いい感じに筆記体が表示されるようになります。

それでも、Go言語などでは、筆記体の箇所が少ないように思えます。そこで、cssをいじって、特定のクラスを持つ箇所は筆記体にします。以下がその例です。

**注意！VS Codeのテーマを変更すると、クラス名の割り振りも変更になってしまいます。下の例はDark ++ Italic以外のテーマでは、いい感じに表示されないかもしれません。**

```css
.mtki{
        font-size: 1.125em;
        font-stretch: ultra-condensed;
}
.mtk4, .mtk6{
        font-size: 1.125em;
        font-stretch: ultra-condensed;
        font-style: italic;
}
```

別のテーマを使っている場合などは、VS Codeの「ヘルプ」=>「開発者ツールの切り替え」をして、筆記体にしたい部分のクラス名を調べてください。

# 余談
単純にフォントの設定を筆記体にするだけだと、以下の画像のようにとても読めたものではなくなります。上記の通り、エクステンションを導入したりやCSSをいじったりする必要があります。
![無題2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283226/3ddb937c-8843-18cf-25ca-2830d7aaad40.png)
MacでAdobe Acrobat DCを削除したらPowerPoint起動時にVBのランタイムエラーが出る

Mac で Adobe Acrobat DC を削除したら、PowerPointの起動時に MacPDFM というファイルがないという Visual Basic の Run-time error '53' エラーが出るようになってしまいました。

![Screen Shot 2019-09-09 at 17.35.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43781/f69f847e-e246-c7fe-8322-35bdc1988227.png)

Google 検索すると Word で同じエラーが出るときの対処法が見つかるのですが、PowerPointの場合は原因と解決法が異なります。

これは、Acrobat DC をインストールしたときに一緒にインストールされる、SaveAsAdobePDF.ppam というパワポのアドインが消えていないのが原因です。

# 解決法
PowerPointを起動してメニューから [Tools]-[PowerPoint AddIns...] を開き、Available Add-Ins: に SaveAsAdobePDF があるので削除します。

これだけだと ppam ファイルがゴミとして残ったままになるので、気になる場合は `~/Library/Group\ Containers/UBF8T346G9.Office/User\ Content.localized/Add-Ins/SaveAsAdobePDF.ppam` を削除します。
GCPのLive migrationを試してみる

##はじめに
GCPのCopute Engineは、ホストマシンの障害時やメンテナンス時に停止、起動といったオペレーションが不要で、LiveMigration機能によりオンラインで同一ゾーン内での別ホストにMigrationが可能です。

##やってみた
オペレーション自体は簡単で、gcloud compute instances simulate-maintenance-eventコマンドの引数として、インスタンス名とインスタンスが起動しているゾーンを指定する形になります。

```
$ date ; gcloud compute instances simulate-maintenance-event instance-3 --zone asia-northeast1-c  --verbosity
 debug ; date
Mon Sep  9 17:26:18 +09 2019
DEBUG: Running [gcloud.compute.instances.simulate-maintenance-event] with arguments: [--verbosity: "debug", --zone: "asia-northeast1-c", INSTANCE_NAMES:1: "[u'instance-3']"]
Simulating maintenance on instance(s) [https://www.googleapis.com/compute/v1/projects/tranquil-scion-251806/zones/asia-northeast1-c/instances/instance-3]
...done.                                                                                                                                                 
INFO: Display format: "none"
DEBUG: SDK update checks are disabled.
Mon Sep  9 17:27:39 +09 2019
```

81秒程度で完了しました。

##蛇足

失敗時は、以下のように制限されてるためエラーとなります。

```
$ gcloud compute instances simulate-maintenance-event instance-1 --zone us-central1-a
Simulating maintenance on instance(s) [https://www.googleapis.com/compute/v1/projects/tranquil-scion-251806/zones/us-central1-a/instances/instance-1]...failed.                      
ERROR: (gcloud.compute.instances.simulate-maintenance-event) Maintenance cannot be simulated on this instance due to temporary concurrency limitations.  Please try again in a few minutes.
```

マシンリソースをリザーブしてから実行すればよいかと思い
https://cloud.google.com/compute/docs/instances/reserving-zonal-resources
以下のコマンドでリザーブ作成しました。

```
$ gcloud beta compute reservations create my-reserve \
>     --machine-type=n1-standard-1 \
>     --min-cpu-platform "Intel Sandy Bridge" \
>     --vm-count=１ \
>     --local-ssd=size=375,interface=scsi \
>     --require-specific-reservation \
>     --zone=us-central1-a

Created [https://www.googleapis.com/compute/beta/projects/tranquil-scion-251806/zones/us-central1-a/reservations/my-reserve].
```

しかしながら、gcloud compute instances simulate-maintenance-eventコマンドはリザーブIDを指定するオプションがないため使えませんでした。。

ちなみにf1はリザーブできないため、リザーブすると以下のようにエラーになります。

```
$ gcloud beta compute reservations create my-reserve2 \
>      --machine-type=f1-micro \
>      --min-cpu-platform "Intel Sandy Bridge" \
>      --vm-count=１ \
>      --local-ssd=size=375,interface=scsi \
>      --require-specific-reservation \
>      --zone=us-central1-a
ERROR: (gcloud.beta.compute.reservations.create) Could not fetch resource:
 - Invalid value for field 'resource.specificReservation.instanceProperties.machineType': 'f1-micro'. This machine type is disallowed for reservations.
```

##投稿内容は私個人の意見であり、所属企業・部門見解を代表するものではありません。
VBScriptで思わぬ文字列が数値に自動変換される

##はじめに
仕事でVBSを触っていたときに、文字列を数値に暗黙的に変換している部分をテストしている際に思わぬ動きをして焦った話

##起きた現象
```vb:test.vbs
Dim a: a = "123.5-" + 12
Wscript.Echo a
' -123.5 + 12
' -111.5 が出力される
```

##参考
この動作がどうして起きるのかを調べていた時に[こちらの掲示板](http://www.gizcollabo.jp/vbtomo/log/archive/vbqanda_9_6.html)が分かりやすかったため参考にさせて頂きます。

##起きた理由
vbsのインタプリタが読み込みの際にそれっぽい文字列は全て数値に変換してくれるらしい。
正確に数値だけの文字列を調べたい場合は、正規表現を使う必要がある。
以下の場合は、数値に変換として認識してくれる。

| 文字(文法)       | 起きること        |
|:-----------------|:------------------|
| (数値)           |            - 数値 |
| 数値 -           |            - 数値 |
| &整数             |             8進数表記の数値|
| \数値             |           数値 |
| その他いろいろ    |                ... |

つまり、エクセルの書式設定の一部や、プログラム的な進数切り替えなどが出来る模様。

##小ネタ
ということは以下の内容でもプログラムは数値と認識する。

```vb:test.vbs
Dim a: a = 12 + "\0,0.3-"
Wscript.Echo a
' 12 + (-0.3)
' -11.7 が出力される
```

##まとめ
文字列に変な数値が入っていても、意外となんとかなる。
逆に言えば変な文字列が数値に誤認される場合がある。
出来るからと言ってやらないでくださいね。
先輩・上司に腹パンされても責任は負えません。
ドットインストール復習②~ヘルスケアwebサービスを自分で作る医者の日記~

ドットインストールの復習

ストップウォッチアプリ

やり直すと
どれだけ一回だけでは理解できていないか

愕然とするが
確実に学びになる。

見えている深さが違う。

以下
ポイントをコメントアウトにて記録

```javascript:main.js
'use strict';

{
  const timer = document.getElementById('timer');
  const start = document.getElementById('start');
  const stop = document.getElementById('stop');
  const reset = document.getElementById('reset');

  let startTime;
  let timeoutId;
  let elapsedTime = 0;

// Date.nowの扱い
  function countUp() {
    const d = new Date(Date.now() - startTime + elapsedTime);
    const m = String(d.getMinutes()).padStart(2, '0');
    const s = String(d.getSeconds()).padStart(2, '0');
    const ms = String(d.getMilliseconds()).padStart(3, '0');
    timer.textContent = `${m}:${s}.${ms}`;
    timeoutId = setTimeout(() => {
      countUp();
    }, 10);
  }

  // ボタン要素のdisableプロパティの操作、表示のオンオフを関数で定義しておく。
  function setButtonStateInitial() {
    start.classList.remove('inactive');
    stop.classList.add('inactive');
    reset.classList.add('inactive');
  }
  function setButtonStateRunnnig() {
    start.classList.add('inactive');
    stop.classList.remove('inactive');
    reset.classList.add('inactive');
  }
  function setButtonStateStopped() {
    start.classList.remove('inactive');
    stop.classList.add('inactive');
    reset.classList.remove('inactive');
  }

  setButtonStateInitial();

  start.addEventListener('click', () => {
    if(start.classList.contains('inactive') === true ) {
      return;
    }
    setButtonStateRunnnig();
    startTime = Date.now();
    countUp();
  });
  // elapsedTimeはstartを押した時からstopを押した時までの時間を保持する。
  // +=で多重代入
  stop.addEventListener('click', () => {
    // return;することでinactiveになってる場合にクリックしてもその後の処理はすすまない、無効化しているのと一緒
    if(stop.classList.contains('inactive') === true ) {
      return;
    }
    setButtonStateStopped();
    clearTimeout(timeoutId);
    elapsedTime = Date.now() - startTime;
  });
  reset.addEventListener('click', () => {
    if(reset.classList.contains('inactive') === true ) {
      return;
    }
    setButtonStateInitial();
    timer.textContent = '00:00.000';
    elapsedTime = 0;
  });

}
```
```css:styles.css
/* heightプロパティとline-heightプロパティをおなじpxにすると要素の中の文字が上下中央揃いになる */
#timer {
  height: 120px;
  font-size: 40px;
  line-height: 120px;
  margin-bottom: 15px;
  background: #ddd;
}
```

ソフトウェアの機能
と
ユーザーの実際の操作
と
プログラミングの記述法

3つの軸がそれぞれ異なる。

これがプログラミングが難しい原因

UMLというのを勉強するとこれがわかるらしい。
いつか勉強したいな。
フォルダ内のファイル数をカウントする（サブフォルダも含む）

## 概要
純粋にフォルダ内のファイル数を知りたかったので調べたことをメモしておく。

## コマンド

```bash:ターミナル
$ ls -R | grep -v / | grep -v '^$' | wc -l
```

## 参考サイト
* [ディレクトリ内のファイル数をカウントする](https://qiita.com/stc1988/items/e3a1d7dccafe4ab573fa)
[Rails]devise機能でログインIDをusernameにしたらエラーになった

#deviseでログインIDをusernameにしたらエラー
Railsで新規登録＆ログイン実装をするのに便利な機能である**devise**を使用するにあたって、ログインIDがデフォルトではEmailとなっているので、これをusernameにしたい。

ということで、こちらの記事を参考に変更していった。
[Railsのログイン認証gemのDeviseのカスタマイズ方法](https://ruby-rails.hatenadiary.com/entry/20140804/1407168000)

これで簡単にusernameをログインID に設定できたと思いきや、
新規登録の際にこんなエラーが。。
<img width="638" alt="スクリーンショット 2019-09-02 18.13.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475098/45366cfd-88e8-ec08-54fe-99b06330ddc4.png">

全項目しっかり埋めても`Email can’t be blank`となってしまう。

Validateは`validates :username, presence: true, uniqueness: true`だけなので、Emailに関して特に変更した記憶はない。

※usernameのカラムを追加する前はEmailで異常なく新規登録できていた。

なんとか解決できたので、解決策を自分のメモとして残しておきます。
#解決策

`devise` `can’t be blank`で検索をかけると**StrongParameter**の設定に関しての情報がやたら出てくる。

しかし、その書き方は多種多様。
そして、どれを試しても結果変わらずであったり、別のエラーを引き起こしたりで、上手くいかないなぁと感じていたところで
こちらのStrongParameterを実装してみた。
※[Publifyでユーザー登録するとCan’t be blankエラーの対応](https://blog.tanebox.com/archives/34/)参照

```ruby:controllers/application_controller.rb
class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception

  before_action :configure_permitted_parameters, if: :devise_controller?

  protected

  def configure_permitted_parameters
    added_attrs = [:user_name, :email, :password, :password_confirmation, :remember_me]
    devise_parameter_sanitizer.permit :sign_up, keys: added_attrs
    devise_parameter_sanitizer.permit :account_update, keys: added_attrs
  end
end
```

これだとエラーを起こすことなく、無事登録できました。
vagrant up 時にCommand: ["startvm", "XXXXXXX”, "--type", "headless"]エラーが出たときに対処方法

## 概要
先日自宅のPCのboxをpackage importしてvagrant upした際に下記のエラーが出たので、その対処方法を記録しておきます。
※注意：これは一時対処です。原因がわかっていないので、根本的な解決策でない可能性があります。
他の対処方法をご存じでしたら、コメントいただければ幸いです。

### 作業環境

- Windows10 1903
- Vagrant 2.2.5
- VirtualBox 6.0.8

### エラー内容

```
$ vagrant up
Bringing machine 'default' up with 'virtualbox' provider...
==> default: Clearing any previously set forwarded ports...
==> default: Clearing any previously set network interfaces...
==> default: Preparing network interfaces based on configuration...
    default: Adapter 1: nat
==> default: Forwarding ports...
    default: 22 (guest) => 2222 (host) (adapter 1)
==> default: Booting VM...
There was an error while executing `VBoxManage`, a CLI used by Vagrant
for controlling VirtualBox. The command and stderr is shown below.

Command: ["startvm", "a12690a5-aec0-4dca-b9ef-53d69c872d92", "--type", "headless"]

Stderr: VBoxManage.exe: error: RawFile#0 failed to create the raw output file C:\WORK\GitHub\Vagrant\ubuntu\ubuntu-bionic-18.04-cloudimg-console.log (VERR_PATH_NOT_FOUND)
VBoxManage.exe: error: Details: code E_FAIL (0x80004005), component ConsoleWrap, interface IConsole
```

### 対処方法
vagrantfileに下記の情報を追記する

```
config.vm.provider "virtualbox" do |vb|
  vb.customize [ "modifyvm", :id, "--uartmode1", "disconnected" ]
end
```

### 参考リンク
[GitHub:Vagrant up (1.9.5) not running on WSL](https://github.com/hashicorp/vagrant/issues/8604#issuecomment-303259512)
[jQuery] パスワード表示備考録

こちらはパスワード表示の備考録です。

1.head内にjQuery元読み込み

```js
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
```

2.ロジック実装
checkboxがトリガーになって
input boxのtypeをpasswordからtextに変更しているだけの簡単なロジックになります。

```js
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<title>Show password</title>
</head>
<body>
    <input type="password" id="password" />
    <input type="checkbox" id="passcheck" />

    <script>
    $(function() {
        $('#passcheck').change(function(){
            if ( $(this).prop('checked') ) {
                $('#password').attr('type','text');
            } else {
                $('#password').attr('type','password');
            }
        });
    });
    </script>
</body>
</html>
```
Local by Flywheel で macOS 上に立てた WordPress をローカルネットワークで雑に共有したい

# やりたいこと

[Local by Flywheel](https://localbyflywheel.com/) で立てたローカルの WordPress のサイトをローカルネットワークで雑に共有したい。(Local by Flywheel は 公式で ngrok.io をサポートしてるけどおそいので…)

# やりかた


nginx をローカルに立ててリバースプロキシみたいに使う。以下はmacOSの場合のやり方。


インストールして

```sh
brew install nginx
```

`/usr/local/etc/nginx/nginx.conf` をひらいてこんな感じに設定

```conf:/usr/local/etc/nginx/nginx.conf
    server {
        listen       80;
        server_name  localhost;

        location / {
          proxy_pass http://your-word-press-on-local-by-flywheel-domain.local/;
        }
    }
```

WordPressの管理画面からサイトのドメイン設定を割り振られたローカルIPにすれば他のマシンから雑に確認できる。
iOSのメジャーアップデートに丁寧に対応する

# 前提知識

- Appleはここ数年毎年9月に新しいiPhoneを発表しています
- これに合わせてiOSのメジャーアップデートが実施されます
    - 新しいiPhoneにはメジャーアップデートされたOSがインストールされています
    - 2018年だとiPhone XSにiOS12が入っていました
- メジャーアップデートのiOSはBeta版が開発者に先行公開されます
- XcodeのBeta版の公開もほぼ同じタイミングで行われます
- Beta版でバージョンアップを重ね、リリース直前バージョンのGM（Golden Master）版がリリースの約一週間前に公開されます
- 大きな問題がない限りGM版はリリース版とほぼ同一と捉えて大丈夫です

# メジャーアップデートの対応方針にいて

開発しているアプリの要求により大まかにと2つの対応方針が考えられます。

- 丁寧な対応
    - Beta版のiOSを端末にインストールします
    - アプリが正常に動くか動作確認します
    - 想定した動作をしなかった場合にメジャーアップデート前にその不具合に対応する方法です
- 工数がかからない対応
    - 新しいiOSのリリース後に動作確認し、問題があれば対応する方法です

本記事では `丁寧な方法` の手順を紹介します。

# 丁寧な対応手順

- Beta版のiOSを端末にインストールします
    - インストール前にバックアップ取得をオススメします
- その端末で動作確認を行います
    - 動作確認で問題なければここで終わりです
- 想定した動作が行われなかった場合Beta版のXcodeをインストールし問題の箇所をデバッグします
    - Beta版のXcodeを使用せずに今お使いのXcodeを使うことも可能です
    - ただし、今お使いのXcodeではBeta版のiOSのデバッグはできず、当たりをつけて修正する必要があります。
    - デバッグが必要な場合にBeta版のXcodeをお使いください
    - ただし、Xcode更新にともないライブラリの更新が必要になる場合もあることにご注意ください
- 修正内容を特定し、その修正が今お使いのXcodeで行える場合は、今お使いのXcodeで修正・ビルドし、もう一度、Beta版のiOSが入った端末で動作確認を実施します
    - もしBeta版のXcodeでしか修正できない場合はリリース後になるべく早く対応するしかありません
- 想定した動作が行われればiOSのメジャーアップデートを待たずに先にリリースします
- そうすることで、ユーザがiOSのメジャーアップデートをしても問題が発生しなくなります

## この対応をいつすべきか

実施タイミングはアプリの要求次第になると思いますが、最低でもGM版で実施します。
ただし、GM版リリースは正式リリースの約1週間前のため致命的な問題が見つかった場合に対応の時間が限られるため注意が必要です。
gRPC-WebをKotlinバックエンドで試した時のメモ - 1. 概要

# About

Kotlin + SpringBoot でgRPCのバックエンドサービスを構築しつつ、Webのフロントエンドからは[gRPC-Web](https://github.com/grpc/grpc-web)でアクセスする、という構成を試したときのメモです。

ざっくりと以下のような構成になります。

<img width="752" alt="スクリーンショット 2019-09-09 15.35.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1489/e1278717-92b7-df05-f74f-6e61efa236b5.png">

仕組み上、BrowserとReverseProxy間の通信はHTTP/1.Xになるので、gRPCのメリットのうちコネクション効率性に関するメリットは享受できないですが、Protocol BuffersによるAPIスキーマ管理の効率化メリットは享受できます。

後から関係者に説明するための参考資料として、試した内容のメモや備忘録を複数回に分けて記載します。

# サンプル

GitHubに置きました

https://github.com/hosopy/grpc-web-kotlin-sample

# サンプルについて

## 構成

* Service
  * Kotlin
  * Spring Boot 2.0.0 + [grpc-spring-boot-starter](https://github.com/LogNet/grpc-spring-boot-starter)
* ReverseProxy
  * Envoy
* Web
  * TypeScript
  * Nuxt.js 2.9.2

## 動作

`docker-compose up`で起動すると、`localhost:3000`でWebにアクセスできます。

<img width="663" alt="スクリーンショット 2019-09-09 15.58.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1489/0b8c0dad-1b35-dcf0-36c0-3728185a842e.png">

Nameフィールドに適当な文字列を入力してSendを押すと、バックエンドから下記のような構造のレスポンスを受信します。

```json
{
  "message": "Hello ${name}",
  "nameLength": ${name.length}
}
```

バックエンドでは、フロントのサービスである`GreeterService`と、内部サービスである`TextAnalyzerService`が協調することで、上記のようなレスポンスを返しています。

<img width="733" alt="スクリーンショット 2019-09-09 16.11.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1489/edb1c698-d58f-64df-009d-15106cdc6286.png">


# 今後

このサンプルを作るにあたって学んだことやハマったことを、要素毎に複数回に分けて見ていきます。

- [2. Service編](https://qiita.com/hosopy/items/f11f392dc37de824a836)
- [3. ReverseProxy編](https://qiita.com/hosopy/items/2bb5015bb753e78788b5)
- [4. Webフロントエンド編](https://qiita.com/hosopy/items/3800b139ce5c1b065a96)
標準的なDebianインストールで、ログイン画面にVNC接続する


Getting login screen VNC access on usual Debian installation.

```bash
sudo x11vnc -display :0 -auth /run/user/$(id -u Debian-gdm)/gdm/Xauthority
```

acknowledgement: https://wiki.archlinux.org/index.php/X11vnc#GDM
何が悲しくて昔ながらのキーボード風ボタンデザイン作ってるんだろう


初投稿なのにテンション低くてごめんなさいm(_ _)m

##2019/09/11追記

こんなCSS使わなくても、border-style: outsetでよくね？って気付いた。
でも押した時のShadowエフェクトも良かったのでこのままに。


###Windows1998ぐらいのボタンデザインを描く
基本的なコードは他所様のコピペです。（検索したフリー素材）
なんで絶滅するIE11対応をやらされてるのだろう。
Google chrome標準インストールまだかな。
AndroidでGoogleアカウントほぼ必須なんだからWindowsとGoogle協力しない？


```
.btn-square-so-pop {
        position: relative;
        display: inline-block;
        padding: 5px 5px;
        text-decoration: none;
        color: #000000;
        background: #e9e3e0;
        box-shadow: inset 0 2px 0 rgba(255,255,255,1), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
        font-weight: bold;
        border: solid 5px #c4c0ba #808080 #757575 #c9c9c9;
    }

    .btn-square-so-pop:active {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.30);
    }
```

もっとポップなデザインとかにしたいけれども、IE11の環境を自宅PCに入れたくないし、すでに新しいPCが隣で眠ってるのでガッツリは書かない。

けれども、動作環境を火狐でしかしてないから本番ぶっつけでやるという無駄作業をしつつこの記事を締めます。
複数Emulatorが起動している環境でApp Crawlerを使う

# したかったこと
複数emulatorが起動している環境でApp Crawlerを用いようとしたら

```
Exception in thread “main” androidx.test.tools.crawler.launcher.exceptions.AdbExecutionException: More than one device/emulator found. Use ‘--device-name’ or ‘--device-serial-code’ option to pick a specific device/emulator.
       at androidx.test.tools.crawler.launcher.util.AdbExecutor.getDeviceSerialCode(AdbExecutor.java:155)
       at androidx.test.tools.crawler.launcher.util.AdbExecutor.<init>(AdbExecutor.java:26)
       at androidx.test.tools.crawler.launcher.CrawlLauncher.<init>(CrawlLauncher.java:88)
       at androidx.test.tools.crawler.launcher.CrawlLauncher.main(CrawlLauncher.java:93)
```

とエラーが出てしまった。

何かオプションをつけろとログでは言っている割に、[公式ドキュメント](https://developer.android.com/training/testing/crawler)にはこのオプションの説明が見当たらなくて、ハマってしまったのでメモ。

# 解決法

```
--device-serial-code  動かしたい端末のserialナンバー
```
をオプションに与える。

- エラーログでは--device-nameオプションか--device-serial-codeオプションを要求されているが、自分の環境(app crawler : Beta1.1 / PC : MacOS Mojave バージョン10.14.4)では--device-nameオプションは正常に動かなかった。
(serial numberを与えても、端末名を与えてもエラーが出た。)

コード例

```bash

# 起動しているデバイスを取得
# 1行目はのぞいて[端末名 device]となっているコマンド結果から端末名だけ取り出して配列に入れる
DEVICES=$(adb devices | sed “1d;s/[[:space:]].*$//“)
echo $DEVICES

DATE=date +%y-%m-%d_%H-%M-%S

# 1台ずつapkをインストールしてテストを行う
for device in $DEVICES
do
   #app-crawlerのapp-crawlerオプションはちゃんと動かなかったのでインストールは個別に行う
   adb -s $device install ./app/build/outputs/apk/debug/hogehoge-debug.apk
   # 結果を収納するフォルダを作成して移動
   mkdir -p AppCrawler_${device}/${DATE}
   cd ./AppCrawler_${device}/${DATE}
   java -jar ../../app-crawler/crawl_launcher.jar --android-sdk $ANDROID_HOME --device-serial-code $device --app-package-name com.kkkkan.hogehoge 

done

```


# その他・感想
--apk-fileオプションも、実機ならちゃんと動いたけどemulatorだと全然動かなくて先に adb -s installでapkをインストールしてから--app-package-nameオプションで別途app crawlerを起動しなきゃいけなかったし、betaというだけあってまだまだバグだらけっぽい。


#  参考にしたもの
https://qiita.com/kafumi/items/fff5324a4bb70b7b7986
https://qiita.com/muran001/items/ffd56f8a7dd76e3968fb
[Kotlin用DIフレームワーク] Koinの使い方

##Koinとは
タイトルにモロに書いてありますが、

> A pragmatic lightweight dependency injection framework for Kotlin developers. 
Kotlin開発者向けの実用的な軽量のDI（依存性注入）フレームワーク

です。
Daggerと比べてわかりやすいと感じたので、備忘録のために使い方をまとめます。

##使い方（3ステップ）
###1. Moduleを宣言する

```kotlin
// いくつかのクラスがあるとします。
class Controller(val service : BusinessService) 
class BusinessService() 
class MyViewModel(context: Application) : AndroidViewModel(context)

// DSLでそれらを指定してモジュール宣言をするだけです。
val myModule = module { 
  factory { Controller(get()) } 
  single { BusinessService() } 

  viewModel { MyViewModel(androidContext() as Application) }
} 
```
`module` や `factory` などの書き方はDSLですので、詳しくは[こちら](https://insert-koin.io/docs/2.0/quick-references/modules-definitions/#module-keywords-recap)を参照してください。

コンストラクタがある場合は、`get()`を使用します。
注入したいクラスをSingletonにしたい場合は`single`を使用します。

また、ViewModelの宣言はDSLで`viewModel` と指定できます。このとき、Activity-Fragment間でViewModelを共有したいときに用いる`AndroidViewModel`を継承しているViewModelの場合はコンストラクタにApplicationを持っているので、`get()`でもいいですが、`androidContext() as Application`でも取得できるらしいので、こちらを使っておきます。

モジュールを宣言する場所は、例えば、`di`などのパッケージを切って、その中に`myModule`などのファイルを作成してその中でトップレベルプロパティとして宣言するのが良いかと。

###2. Koinを開始する

```kotlin
class MyApplication : Application() {
  override fun onCreate(){
    super.onCreate()
    // `startKoin` でKoinを開始します。
    startKoin {
      // Contextを宣言し、
      androidContext(this@MyApplication)
      // 先ほど宣言したmoduleを指定します。
      modules(myModule)
    }
  } 
} 
```
Applicationクラスを継承したクラス内で色々と宣言して `startKoin` するだけです。

###3. インスタンスを注入する

```kotlin
// あとは、Activity内でインスタンスを注入するだけです。
class MyActivity() : AppCompatActivity() {

    // serviceプロパティの中へBusinessServiceを遅延注入する。
    val service : BusinessService by inject()
    val viewModel: MyViewModel by viewModel()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        // もしくは、直接インスタンスを取得する。
        val service : BusinessService = get()
    }
}
```
最後は、 `by inject()` でインスタンスを注入するだけです。
そのプロパティが初めて呼ばれたときに注入しています。
もしくは、`get()` でも取得可能なのですね。（知らなかった）

viewModelを注入したいときは、`by viewModel()`を使用します。
DI前だったら
`lateinit var vm: MyVeiwModel`からの
`vm = ViewModelProviders.of(this).get(MyViewModel::class.java)`
とかわんさかコード書かないといけなかったから、これがなくなるのは助かる。

**Activity, Fragment, Service以外のクラスで注入したい場合は、`KoinComponent`インターフェースを実装すれば、注入できるようになります(`by inject()` が使用できるようになります)**

##終わりに
Koin万歳！！！
Daggerも慣れてしまえば問題ないですが、Koinより学習コストが高めなので（私の理解力の問題かも...）、Daggerを使用しなければならない場合以外は、Koin使いたいなぁ。

###※追記
と思っていましたが、シニアエンジニアの方にKoinは動作が遅いということをお聞きし、調べてみました。次のサイトで様々なDIフレームワークでのパフォーマンスを調べてくれてました。
https://github.com/Sloy/android-dependency-injection-performance
Dagger2めちゃくちゃ早くて驚いた。。。
これは学習コスト云々以前に、一人のエンジニアとして品質の面でDaggerを使うべきだなと感じさせられました。


##参考(というか公式)
https://insert-koin.io/
Composerでエラーが出たらdiagnoseで診断してみよう

Laravelプロジェクトの開発環境構築をやってて、「composer install」したところ、下記のようなエラーが出たので、解決手段をメモ。

```
vagrant@homestead:~/code/qlara$ composer install
Loading composer repositories with package information
Installing dependencies (including require-dev) from lock file
Nothing to install or update
Generating optimized autoload files

  [RuntimeException]
  Could not scan for classes inside "/home/vagrant/code/qlara/vendor/sebastian/object-enumerator/src/" which does not appear to be a file nor a folder

install [--prefer-source] [--prefer-dist] [--dry-run] [--dev] [--no-dev] [--no-custom-installers] [--no-autoloader] [--no-scripts] [--no-progress] [--no-suggest] [-v|vv|vvv|--verbose] [-o|--optimize-autoloader] [-a|--classmap-authoritative] [--apcu-autoloader] [--ignore-platform-reqs] [--] [<packages>]...
```

エラーの内容からは原因がよくわかりませんね・・・

## composer diagnose

composer diagnoseで診断してみます。
![composer diagnose.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244097/79145442-2571-45c7-8ba7-60f4c82386ae.png)
Checking pubkeysがFAILになってますね。
解決策を提示してくれているので言われた通りに…

```
composer self-update --update-keys
```
すると、Public KeyとTags Public Keyを聞かれるので、下記のページからコピペします。
https://composer.github.io/pubkeys.html
※-----も含めテキストエリアの中身を全部コピーします。

その後、再度composer installしたところ、また同じエラーが出たのですが、
vendorディレクトリを一旦削除、キャッシュクリア（composer clear-cache）したらうまくいきました。
OracleのSQLにおいてwhereで日付型のカラムと比較をする

- 環境 : Oracle Database 12c Standard Edition Release 12.2.0.1.0 - 64bit Production

# 任意の日付と比較する
```sql
-- 任意の日時以降を取得する
select * from テーブル名 where 日付型のカラム >= to_date('2019-09-03 22:10:00', 'yyyy-mm-dd hh24:mi:ss');
-- 1日分を取得する
select * from テーブル名 where 日付型のカラム BETWEEN to_date('2019-09-03', 'yyyy-mm-dd') AND to_date('2019-09-04', 'yyyy-mm-dd');
```

- 参考
    - [Oracleで日付型データを検索する場合の指定方法 - Qiita](https://qiita.com/techmilestone/items/76bc79ba6d83c9a510ec)
    - [DATE型をWHERE句で比較するときの注意点 - 底辺過ぎてちょっとビビる](http://starscream.hatenablog.com/entry/20170630/1498748976)
    - [TO_DATEの使い方](https://www.shift-the-oracle.com/sql/functions/to_date.html)

# システム日付と比較する
```sql
-- システム日付と比較する時はDBの時間がずれていないか確認してから使う
select sysdate from dual;
-- 直近24時間分を取得する
select * from テーブル名 where 日付型のカラム > (sysdate - 1);
-- 今日分を取得する(=昨日の23:59:59より後)
select * from テーブル名 where 日付型のカラム > trunc(sysdate - 1);
select * from テーブル名 where 日付型のカラム > trunc(sysdate - INTERVAL '1' DAY);
-- 直近1時間分を取得する
select * from テーブル名 where 日付型のカラム > (sysdate - 1/24);
select * from テーブル名 where 日付型のカラム > (sysdate - INTERVAL '1' HOUR);
```
- 参考
    - [日付型をWHERE句で比較する際の注意点 | 株式会社アースリンク](https://www.earthlink.co.jp/engineerblog/intra-mart-engineerblog/1151/)
    - [SQLのパフォーマンス問題を引き起こす日付型](https://use-the-index-luke.com/ja/sql/where-clause/obfuscation/dates)
    - [TO_CHARの使い方](https://www.shift-the-oracle.com/sql/functions/to_char-datetime.html)
    - [INTERVALの使い方](https://www.shift-the-oracle.com/element/literal-datetime-interval.html)
ISUCON9 予選参加しました

@kiririmodeさんと@hondaYoshitakaさんと3人でISUCON9の予選に参加しました。
それぞれ2人とも感想書かれると思うので、そちらも見てみてください。

## 予選の結果は・・・

**予選敗退しました。**

**ちゃんとドキュメントを読みましょう！！！**
いろいろとヒントが隠れていたらしいですが、僕たちのチームはドキュメントをあまり読まなかったです。
ドキュメントを読んでいたらアプローチの方法も変わっていたかもしれません。
**ちゃんとスペックチェックは最初にしましょう！！！**
スペックチェックしてくれるツールがあったのですが、最初に流すのを忘れ直前で思い出し、実行した結果NGが出たため、インスタンスを作り直しました。
作り直した後、ベンチを実行したのですが、Failedなってしまい**最終スコア0**でした。

## 感想

個人的な感想ですが、完全に力不足でした。
正直、予選中、パフォーマンスについて自分から提案できたことは何もなかったです。
ミドル周りとかは@kiririmodeさんが、アプリ周りは@hondaYoshitakaさんが率先してやってくれました。
自分は決まった方針に沿って、CPUやメモリーの使用率を見たり、MySQLのスロークエリーログをとったり、MySQLの設定変えたり、インフラ構成を変えたりしたぐらいでした。
ここに問題に関することを書けないぐらい、なにもできなかったです。

## 次回に向けて

文字通り何もできなく悔しかったので、来年こそはちゃんと参加できるようになりたいです。
業務でパフォーマンスに関するところに関われればいいのですが、そういくとも限らないので、定期的に過去問を解こうと思います。
あとは[HighLoad Cup](https://highloadcup.ru/en/)というものがあるらしいので、これの過去問も解いてみようと思います。
次こそは、それなりにいいスコアをだして、あわよくば本戦に出場できればなと思います。


## 余談

今回、会議室を借りて3人集まってやりました。
大きいモニタがあり、そこにベンチの結果を写したり、Goのプロファイルの結果を写して、議論できたので大きいモニタがあるといいかなと思いました。
あとNew RelicのAPMとかモニタリングツールを導入してもよかったのかなと思いました。
いいツールを入れても使いこなせなければ意味ないのですが...
[Rails] or を inject でチェーンする

# 例

```app/models/character.rb
class Character < ApplicationRecord
  enum sex: { male: 1, female: 2 }

  scope :by_name, (lambda do |*names|
    names.inject(none) do |relation, name|
      relation.or(where("#{table_name}.name LIKE ?", "%#{name}%"))
    end
  end)
end
```
```rb
Character.female.by_name('さ', '杏').pluck(:name)
# SELECT characters.name FROM characters
# WHERE characters.sex = 2
# AND (((characters.name LIKE '%さ%') OR ((characters.name LIKE '%杏%'))
#=> ["百江なぎさ", "美樹さやか", "佐倉杏子"]
```

# 解説

[Enumerable#inject](https://docs.ruby-lang.org/ja/latest/method/Enumerable/i/inject.html) の第 1 引数の `none` がポイント。`none` を `self` にすると

```rb
# ALL or 条件 1 or 条件 2 or ...
Character.all.or(Character.where('条件 1')).or(Character.where('条件 2'))).or(...)
```

と解釈されて、その結果 OR 条件が消えてしまう。
[jQuery] ローディング備考録

ローディングの実装を備考録として記録します。

# 要件
jQueryでローディング実装

# 手順
1.head内にjQuery元読み込み

```html
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
```

2.html
はじめローディング画像を描画させて
時間がきたらcontentsクラスが描画されます。

```html
<div id="loader-bg">
  <div id="loading">
    <img src="img/loading_A.gif"><!-- パス名は適宜変更 -->
  </div>
</div>

<div class="contents"><!-- クラス名は適宜変更 -->
  コンテンツ
</div>
```
[ローディング画像サンプルダウンロード](https://ferret-plus.com/3878)

3.jQueryでロジック実装

```js
$(function(){

  let h = $(window).height();
  $('#loader-bg ,#loader').height(h).css('display','block');

  $(window).load(function () {
    $('#loader-bg').delay(900).fadeOut(800);
    $('#loader').delay(600).fadeOut(300);
  });

});
```

4.css

```css
  #loading{
    position: absolute;
    left: 50%;
    top: 30%;
  }
  #loader-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #fff;
    z-index: 1000;
  }
```

# 完成形

```html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<title>ローディングサンプル</title>
<style>
  #loading{
    position: absolute;
    left: 50%;
    top: 30%;
  }
  #loader-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #fff;
    z-index: 1000;
  }
</style>
</head>
<body>
<div id="loader-bg">
  <div id="loading">
    <!-- ローディング画像サンプル: https://ferret-plus.com/3878 -->
    <img src="img/loading_A.gif"><!-- パス名は適宜変更 -->
  </div>
</div>

<div class="contents"><!-- クラス名は適宜変更 -->
  コンテンツ
</div>
  
<script type="text/javascript">
$(function(){

  let h = $(window).height();
  $('#loader-bg ,#loader').height(h).css('display','block');

  $(window).load(function () {
    $('#loader-bg').delay(900).fadeOut(800);
    $('#loader').delay(600).fadeOut(300);
  });

});
</script>

</body>
</html>
```

今はjsとcssも同じファイルに書いてますが、
実際使用する際は切り離してご使用ください。
プログラマー1年目の自分が辿り着いたGitまとめ その1

##想定する読者層
- プログラミング初学者の方
- 業務でGitを使い始めた方
- Gitについてまだ理解が曖昧、上手く使えていないという方

かく言う自分も自己学習なり業務なりである程度Gitを触ってきて、ようやく『こういうことか』みたいなのが掴めてきたので、備忘録も兼ねて初学者の方の助けになるような記事を投稿してみたいと思います。
ただ入門って言うよりは、ある程度触った方向けのものになるかも。

全4回予定です。

##Gitを理解するには？
個人的にGitを触り始めた頃に分かりにくい、とっつにくいと感じていた点や理由を列挙してみると、

- Gitって何の為にあるのか分かりにくい
- やれること(コマンドとか)が多すぎて覚えられない
- 競合ってなんだよ(怒)

などなど……
実際、色々調べたりしていく内になんとか上記の疑問を解決出来たのですが、Gitは本来バージョン管理という重要ではありながら単純な作業を行う為のものなのに、その多機能性から全容が把握しにくいといった印象は確かに今でも感じます。

そこで至った結論が、Gitを理解するには**『環境を段階的に変化させること』**が肝要なのではないかと。
→ これはつまり、「使うコマンドを限定して覚えていく」というイメージです。
　今回自分が考えた環境の遷移は以下の通り。

1. まずはローカルリポジトリかつmasterブランチのみの作業(add, commit, status)
2. [masterのみで作業しつつ、リモートリポジトリに公開する作業(push, revert, reset)](https://qiita.com/milkynapoly/items/738365a784bef1cc400d)
3. [masterのみで作業しつつ、リモートリポジトリで共有しながらの作業(pull, stash, diff, log)](https://qiita.com/milkynapoly/items/d3761943c809a53f2865)
4. [ブランチを切りながら、リモートリポジトリで共有しながらの作業(checkout, branch, fetch, merge)](https://qiita.com/milkynapoly/items/c2ef3f0736a43c846baf)

4番の環境が所謂チーム開発の環境だと思うので、『業務で使える』という観点でのゴールは此処になると思われます。
今回は1番の簡単な個人開発的環境を想定して3つのコマンドについてみていきます。

##Gitの基本
まずは一応概要から。

Gitとは**バージョン管理システム**である。
プログラム(というかソースコード)がRPGだとしたら、Gitは内容をセーブするためのシステム(と自分は捉えています)。

そんでもって**分散型管理システム**でもあるので、自分トコのセーブデータと、他の人のセーブデータを別々で管理した後、その結果を合体させることが出来ちゃったりする(此処らへんが最初はイメージしづらいかも)

##add, commit, status
個人的にGitの基本サイクルだと考えているのが、add→commit→pushの流れ。
pushは取り敢えず置いといて、addとcommitについて。
####commit - 変更をコミットする。
Gitの要となる機能であり、上述の『内容をセーブする』に近い動作。
これを繰り返すことでコミットグラフなるものが蓄積されていき、ディレクトリ内の変更が記録されていく。

各コミットにはコミットメッセージというものが存在しており、そのコミット内で"どういう作業を行った"とかを人に読める形で記録する。
個人開発は勿論、プロジェクトによってはフォーマットなども決められてたりする。

短いコミットメッセージの場合は、-mオプションを用いて
`commit -m "(コミットメッセージ)"`
という形でコミットメッセージを書くと楽。
####add - コミットするための変更をステージ(追加)する。
ぶっちゃけ最初はそこまで意識せず、セーブしたいなと思ったら
`git add -A`
`commit -m "更新"`
としてしまえば良いが、(個人開発はともかく)業務ではそうもいかないのでcommitとの違いを正しく把握しておく。

コミットというのはセーブデータを作る作業ですが、常にディレクトリ全体が記録される訳ではなく**ステージング**という作業を行ったファイルの変更のみが変更を記録される。それを行うのがaddコマンド。
addの働きを理解するには以下のような状況を想定するのが丁度良いのかなと思います。
#####例
まずファイルA,B,Cがディレクトリ内に三つ存在し、それぞれに何かしらの変更を行ったとする。
でもファイルAの内容としては何かしらの機能追加、Bは不具合修正、Cは単なるリファクタリング、とかだった場合に3つのファイル全てをまとめてコミットするのはあまりよろしくない。

→これは前述の通りコミットにはコミットメッセージが存在していて、コミット毎に「何を行ったか」を明確にする必要があるから。

なのでこういったケースの時は
`git add ファイルA`
`git commit -m "●●機能追加"`
`git add ファイルB`
`git commit -m "不具合修正"`
.
.

みたいに、内容ごとにステージングとコミットを切り分けて記録していくのがベター。
こうすることで後からコミットグラフを見返したりチェックアウトした時に、Aのみに変更を行った状態・A,Bに変更を行った状態・A,B,C全てに変更を行った状態というのを別々に再現出来る。

バージョン管理という観点でも『特定の箇所に』『特定の変更を』行ったという情報でコミットが切り分けられている方が見やすく不具合調査の際などにも役立つので、一度に多くの変更を行ってしまったという場合でも、addコマンドを上手く使ってコミットを細かく切り分けていくことは重要になってきます。
→ こういうのが『コミットの粒度』って言葉で表現されることが多いので、意識しておくとより良いかもしれません。
####status - 現在のワーキングツリーの状態を確認する。
最後に、個人的に基本サイクルに加えて良いと思ってるし実際一番よく叩く気がするコマンド。
変更を加えたけれどまだステージング(add)してないファイルや、ステージングしたけどコミットしてないファイルなどを一覧で確認出来るコマンドです。

その他にもstatus(状態)の名の通り色々な情報が書いてあるので
心配性な人は`git status`を叩きまくる癖をつければ良いと思います。
##まとめ
これだけ？って思うかもしれませんが、まずはこの3つを覚えて、ローカルでかつmasterのみでの作業が問題なく出来るようになるのが大切な1ステップ目だと思います！

特にコミットを細かく分割することやメッセージをしっかり書くこと、というのは業務でも大切なことなので個人開発でも意識して行うのが重要です。

次回は2番の環境に移行して、リモートリポジトリを活用する段階に入っていく予定。

次： [プログラマー1年目の自分が辿り着いたGitまとめ その2](https://qiita.com/milkynapoly/items/738365a784bef1cc400d)
REST APIスタブをローカルサーバーで確認する

ステージング環境が複数あって、ローカルやら一部の環境でCORSのせいで塞がれてるとか、まだAPI通ってないとか諸々の理由で~~ぶっころ~~解消しようとしたメモ

結論: Macに最初から入ってるPHP使えばよかったね。

- `php -S localhost(:port) -t dist/` みたいなのでビルトインサーバーを立てる
- PHPファイルを作成する（index.php的なヤツ）
    - ResponseHeaderに `Content-type: applucation/json` を入れて
    - 配列データをphpの書式で格納し（ `$data = array()` など）
    - `echo json_encode($data);` で出力してやると
- 返却がjsonになるので
- 配置先を本番に合わせたディレクトリ構造にすればエンドポイント的なのが作成できる。
- ルートパスにすればhostnameが変わっても大丈夫なんじゃないかな

``` php
<?php
  header('Access-Control-Allow-Origin: *');
  header('Access-Control-Allow-Headers: *');
  header('Content-type: application/json; charset=UTF-8');

  $data = array(
    'status' => 200,
    'lottery' => array(
      'member_id' => '1234567',
      'message' => [
        array(
          '402' => '未エントリーです'
        ),
        array(
          '403' => '○○○設定になっていません'
        ),
        array(
          '404' => 'すでに抽選済です'
        ),
        array(
          '405' => '実績を取得できませんでした'
        )
      ],
      'is_entry' => 0,
      'is_hogehoge' => 0,
      'rsv_results_count' => 1,
      'is_lottery' => 0,
    )
  );

  echo json_encode($data);
?>
```
あとはjsなり何なりから叩けばよいかと。

色々考えたけどjson-serverだの何だのやらなくてもええやんけ！となったのでした。

おわり
【Java】スタック領域、static領域について

Javaのスタック領域、static領域について質問です。

【質問】
メモリのスタック領域と、static領域とは、同じものを指しているのでしょうか？



【経緯】
先日Javaの参考書にて、「static領域」という言葉が出てきました。
<参考書>
  徹底攻略 Java SE 8 Silver 問題集
  https://www.amazon.co.jp/%E5%BE%B9%E5%BA%95%E6%94%BB%E7%95%A5-Java-Silver-%E5%95%8F%E9%A1%8C%E9%9B%86-1Z0-808/dp/4844339931/ref=asc_df_4844339931/?tag=jpgo-22&linkCode=df0&hvadid=295658314765&hvpos=1o1&hvnetw=g&hvrand=2232083536107640732&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=1009343&hvtargid=pla-526914835838&psc=1&th=1&psc=1

以前から知っているスタック領域とは別物なのかと思い、「static領域」で調べてみると、
「スタック領域」に関するサイトばかりがヒットします。

この2つは同じなのでしょうか？
それとも別物でしょうか？

もし別物でしたら解説もいただけると幸いです。
mysqlclientをpipでインストールする際に出るerror: command 'gcc' failed with exit status 1の対処法

#開発環境
OS: **macOS Mojave 10.14.5**
言語: **python 3.7.2**

#エラーの内容
ターミナルでmysqlclientをインストールするために以下のコードを実行しようとした。

```terminal
$ pip install mysqlclient
```

エラーが出た。

```
error: command 'gcc' failed with exit status 1
```

#対処法

```
$ sudo installer -pkg /Library/Developer/CommandLineTools/Packages/macOS_SDK_headers_for_macOS_10.14.pkg -target /
```

再度インストール。

```terminal
$ pip install mysqlclient
```

```
  Using cached https://files.pythonhosted.org/packages/4d/38/c5f8bac9c50f3042c8f05615f84206f77f03db79781db841898fde1bb284/mysqlclient-1.4.4.tar.gz
Installing collected packages: mysqlclient
  Running setup.py install for mysqlclient ... done
Successfully installed mysqlclient-1.4.4
```

解決！