OmniAICreator/Qiita-1.07M huggingface dataset:
[slick.js] 最後のスライドまでいったら逆戻りしてしまう

#「Slick」スライダーが、最後のスライドまで行くと、最初のスライドに高速で逆戻りしてしまう

サイトのトップページとか、商品ページとかで「Slickスライダー(slick.js)」を使っています。でも、横方向へのスライドを無限ループで表示させたとき、1(最初) → 2 → 3 → 4 → 5(最後) → 1 …　と、同じ方向へスライドしていってほしいのに、なぜか逆方向へ高速で戻って行ってしまうという現象に、長いこと悩まされておりました。

# CSSに一文を追加すればOK

結論から言うと、私の場合は、スタイルシートに
.slick-slider div { transition: none; }
という一文を追加するだけで、逆戻りしなくなりました。
java 配列 List foreach

# 配列
一度、配列→Streamという変換を行ってから、forEachを使う。

```java
String[] strArray = { "H", "E", "L", "L", "O" };
Arrays.stream(strArray).forEach(s -> System.out.println(s));
```

# List
Listの場合は、そのままforEachが使える。

```java
List<String> list = new ArrayList<>();
        list.add("H");
        list.add("E");
        list.add("L");
        list.add("L");
        list.add("O");

ArrayList.forEach(s -> System.out.println(s));
```
【Processing】イラレでで作成した桜をフェードさせながらくるくるさせてみた


#概要
illustratorで作成した花びらが…
![桜@0,25x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/353826/9237f368-feed-2c53-ee56-60c5332fb138.png "桜@0.25x.png")



![ダウンロード (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/353826/62c1a296-81d2-e18a-36f0-43649be42b60.gif "sakura3.gif")
こんなかんじで動きます
#コード
```java:sketch.pde
int Length = 20; //生成する桜の数

Sakura sakura[] = new Sakura[Length];
PShape petal;

int t = 0;
float alpha = 0; //透明度
boolean fadeIn = true; //trueの時はフェードイン、falseの時フェードアウト

void setup() {
  size(1200, 800);
  petal = loadShape("桜.svg"); //桜の花びらのsvg画像
  petal.disableStyle();
  background(0);
  colorMode(HSB, 100);
  frameRate(60);
  noStroke();

  for (int i = 0; i < Length; i++) {
    sakura[i] = new Sakura( 
      int(random(width)), int(random(height)), 
      int(random(90)), 
      random(0.2, 1.2));
  }
}

void draw() { 
  background(0);
  for (int i = 0; i < Length; i++) {
    sakura[i].bloom();

    if (alpha <= -8) {
      sakura[i].x = int(random(width));
      sakura[i].y = int(random(height));
    }
  }
  t++;
}
```
```java:Sakura.pde
public class Sakura {

  int x, y;
  int s; //彩度
  float scale; //桜の大きさ

  Sakura(int _x, int _y, int _s, float _scale) {
    x = _x;
    y = _y;
    s = _s;
    scale = _scale;
  }

  private void flower() {  //花びらをループさせて桜に
    for (int i = 0; i <= 4; i++) {
      pushMatrix();
      rotate(PI*2*i/5);     
      shape(petal, 0, -petal.height/2);      
      popMatrix();
    }
  }

  public void bloom() {  
    if (fadeIn) {
      if (alpha < 115) {
        fill(90, s, 60, alpha+=0.05);
      } else {
        fadeIn = false;
      }
    } else {
      if (alpha > -10) {
        fill(90, s, 60, alpha-=0.035);
      } else {
        fadeIn = true;
      }
    }
    shapeMode(CENTER);
    pushMatrix();
    translate(x++, y++);
    scale(scale);
    pushMatrix();
    rotate(PI*t/180);
    flower();
    popMatrix();    
    popMatrix();
  }
}
```

#実際に使用したSVGファイル
[桜.svg(Google Drive)](https://drive.google.com/open?id=1YACcyQVtpZRRbboys3xg5m9RSXaAu7vh)

illustratorで作成したベクタ画像をSVGで書き出しています。
「Quiz And Survey Master」の日本語化ファイル

#「Quiz And Survey Master」の日本語化ファイルを作ったけれど、どこで公開すればいいのかわからない

WordPressサイトに、クイズやアンケート機能を追加できるプラグイン「Quiz And Survey Master」を導入しようとしたら、日本語化されてなかったので、自分で日本語化ファイル（.poと.mo）を作りました。

せっかく頑張って翻訳したので（Google翻訳さんにも手伝ってもらった）、「もしかして誰かの役に立てれば！」と思って公開したいのだけど、どこでどのように公開したらいいのか分かりません。

WordPress公式の翻訳のページに行って、一つ一つ入力すればいいのかもしれないけれど、それって手間もかかるし、なによりすでにファイルになっているので、ムダ感がハンパない…

残念すぎるので、どなたか私が何をすべきか教えてくださるとうれしいです。
placeholder　について

#   text_field　の placeholder が表示されない:confounded:

パスは仮置きで、マークアップのみ実装していました！　しかし、placeholderが表示されず・・・

**ダメな例**

```
= text_field :address_building_name, value: "#", placeholder: "例） 柳ビル103"
```



```
= text_field_tag :address_building_name, value: "#", placeholder: "例） 柳ビル103"
```




**正解**

```
= text_field_tag :content, '',{ placeholder: "例） 柳ビル103"}
```

<img width="624" alt="スクリーンショット 2019-07-27 21.21.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386223/00d6c582-93e1-ea49-3ae9-470e00a5dd1f.png">


どうやら、記法の違いらしいです🤔
[JavaScript] plotly.jsで時刻を表示する線の出し方を考えてみた件

## 概要
　シミュレーションを行っているときに統計結果を表示していたのだが、一目でシミュレーション中のデータがどこなのか表示したかった。しかし調べてみてもなかなかいい感じのものがなかったので、考えてみた。


## 使用ツール等
+ plotly.js
    + ver 1.49.0


## コード
　説明するより先にコードと動いている例を見てもらおうと思う。

- html

    ``` html
    <!DOCTYPE html>
    <html>
    <head>
        <title>plotly.jsで時刻を表示する線の出し方を考えてみた件</title>
        <meta charset="UTF-8">
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
        <script src="./main.js"></script>
    </head>
    <body>
        <div id="graph" style="height: 400px; width: 100%"></div>
    </body>
    </html>
    ```

- javascript

    ``` javascript
    window.onload = (e) => {
        /* グラフを表示 */
        let id = 'graph';
        let data = [
            /* グラフデータ */
            {
                x: [0, 1, 2, 3, 4, 5],
                y: [10, 30, 60, 40, 50, 70],
                type: 'line'
            },
            /* 時間を表す線の初期データ */
            {
                x: [0, 0],
                y: [10, 70],
                type: 'line'
            }
        ];
        let layout = {};
        Plotly.newPlot(id, data, layout);
        /* 1秒ごとに時間を表す線を移動させる */
        let i = 0;
        setInterval((e) => {
            /* データを更新する */
            i += 0.5;
            if (i > 5) {
                i = 0;
            }
            // data[1] = {...} の場合、凡例で非表示にしても1秒後に表示されしまうので注意
            data[1].x = [i, i];
            /* updateを行い反映させる */
            Plotly.update(id, data, layout);
        }, 1000);
    };
    ```

- 動作例

<p class="codepen" data-height="470" data-theme-id="0" data-default-tab="html,result" data-user="P488" data-slug-hash="WVoZYm" style="height: 470px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="WVoZYm">
  <span>See the Pen <a href="https://codepen.io/P488/pen/WVoZYm/">
  WVoZYm</a> by P488 (<a href="https://codepen.io/P488">@P488</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


## コードの解説

1. グラフを表示する時に、グラフのデータに加えて線のデータを追加する。
この時のxの値は開始位置、yの値はグラフの最大と最小を指定する。

    ``` javascript
    let data = [
        /* グラフデータ */
        {
            x: [0, 1, 2, 3, 4, 5],
            y: [10, 30, 60, 40, 50, 70],
            type: 'line'
        },
        /* 時間を表す線の初期データ */
        {
            x: [0, 0],
            y: [10, 70],
            type: 'line'
        }
    ];
    ```

2. setIntervalを使用してx軸の値を変化させ、あたかも動いているように見せる。

    ``` javascript
    /* 1秒ごとに時間を表す線を移動させる */
    let i = 0;
    setInterval((e) => {
        /* データを更新する */
        i += 0.5;
        if (i > 5) {
            i = 0;
        }
        // data[1] = {...} とした場合、凡例で非表示にしてもupdateで再表示されしまうので注意
        data[1].x = [i, i];
        /* updateを行い反映させる */
        Plotly.update(id, data, layout);
    }, 1000);
    ```


## 終わりに

今回掲載したコードは掲載用に作成したコードなので、穴があると思うが容赦して貰いたい。今後もPlotlyを使用してもらえた思う次第...

何かあったらコメントください。
PyTorchで書いたモデルをTensorBoardでPNGに吐き出す

# なにをしたいか
- PyTorchで書いたモデルを、簡単に画像に出力したい。
- graphvizを直接使うのは面倒なので避ける
- [Example Code](https://pytorch.org/docs/stable/tensorboard.html)を実行してみる

# 環境
- torch==1.1.0.post2
- tensorboard==1.14.0
- future==0.17.1

# Example Code
resnet50をMNISTデータでトレーニングする場合(example codeをコピペ)

```python:モデルをTensorBoard用に出力
import torch
import torchvision
from torch.utils.tensorboard import SummaryWriter
from torchvision import datasets, transforms

# Writer will output to ./runs/ directory by default
writer = SummaryWriter()

transform = transforms.Compose([transforms.ToTensor(), transforms.Normalize((0.5,), (0.5,))])
trainset = datasets.MNIST('mnist_train', train=True, download=True, transform=transform)
trainloader = torch.utils.data.DataLoader(trainset, batch_size=64, shuffle=True)
model = torchvision.models.resnet50(False)
# Have ResNet model take in grayscale rather than RGB
model.conv1 = torch.nn.Conv2d(1, 64, kernel_size=7, stride=2, padding=3, bias=False)
images, labels = next(iter(trainloader))

grid = torchvision.utils.make_grid(images)
writer.add_image('images', grid, 0)
writer.add_graph(model, images)
writer.close()
```

```shell:tensorboardを起動
tensorboard --logdir=runs
```
# 自分でもやってみる
TorchVisionのAlexNetをPNGに吐き出してみる
(モデルを書き出すだけなのでデータセットは用意しない)

```python:TorchvisionのAlexNetをTensorBoardに渡す
import torch
from torchvision import models
from torch.utils.tensorboard import SummaryWriter

# Writer will output to ./runs/ directory by default
writer = SummaryWriter()

image = torch.randn(1,3,224,224)
model = models.AlexNet()
writer.add_graph(model, image)
writer.close()
```
```shell:TensorBoardを起動
tensorboard --logdir=runs
```
# PNGに保存
TensorBoardをブラウザから表示した上で、「Download PNG」ボタンをクリック
![tensorboard.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207596/7199ebb3-0737-5eb9-8d68-c2f21d9c0faf.png)

![Jul27_21-00-23_tand826.local.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207596/c90b64fd-8c3b-3b30-0628-833274bcf3f6.png)


# ちょっと気になる点
- インタラクティブな表示とはいえ、表示の仕方があまりかっこよくない気がします（小並感）
【個人開発/OSS】カンバンアプリを作ってみた

# TL;DR

- 非同期処理の返り値を`State`の初期値にしたい時は、`useEffect`を使う
- Skebanをよろしくおねがいします

# はじめに

Skeban v0.1.0を先日リリースしました。
個人利用のみに対象を絞ったElectron製カンバンアプリです。
<div class="github-card" data-github="roottool/Skeban" data-width="400" data-height="150" data-theme="default"></div>
<script src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script>

アプリ名は、**Ske**_tches your brain in kan_**ban**から命名しました。
決してあのスケバンではありません。
![Webp.net-resizeimage.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300336/9d2303d0-909d-22ef-7e52-02671aa6be33.png)



# 動作サンプル

![skeban.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300336/c8d9a3e6-18ea-bd4b-98c7-c398139265d5.gif)


# 使いみち

一般的なカンバンの使い方であるTodo管理や、ちょっとした情報の整理にどうぞ。

# 作った理由

なんとなくアカウント不要のカンバンが欲しかったからです。
どうせ作るならMITライセンスのOSSにしようと思い、OSSとなりました。

# インストール方法

## Windows

[インストーラー](https://github.com/roottool/Skeban/releases/download/v0.1.0/SkebanSetup.exe)をダウンロードしてインストールしたら完了です。

## Mac

Mac版に関しては、私がMacを持っていないためインストーラーを生成出来ませんでした。
ですので、以下のコマンドでGithubからソースをクローンしてパッケージ化を行ってインストーラーを作成してください。

```bash
git clone https://github.com/roottool/Skeban.git
yarn install
yarn run build
yarn run pack:mac
```

# 技術スタック

- Electron
- React
- unstated-next
- react-beautiful-dnd
- TypeScript
- indexedDB
- webpack
- babel

今回は[create-react-app](https://facebook.github.io/create-react-app/)を使わず、webpackとbabelの設定を自分で行いました。
理由は、今までwebpackとbabelの設定を行ったことがなかったので経験値を積むためです。
しかし、create-react-appのお手軽感を改めて実感することになりました…。
D&D実装は、[react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd)を使用しました。

## unstated-next
[unstated-next](https://github.com/jamiebuilds/unstated-next)は、Reduxのようなアプリ全体での状態管理を行うことが出来るパッケージです。
Reduxと違う点は、Reactに実装されているReact Hooksのみで書けることです。
今回のアプリ作成に限って言えば、Reduxではおなじみの`Reducer`、`Dispach`や`Action`を書いていません。
React Hooksの`useState`で作成した状態更新関数だけでアプリを作成出来ました。

## indexedDB

[indexedDB](https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API)は、ブラウザに搭載されているDBです。
ラッパーの[Dexie.js](https://dexie.org)を使用しました。

### 苦労ポイント

DBからのレコード取得が非同期であるため、`useState`の引数にasync関数を作って返り値にDBからの取得結果を初期値としていました。
ですが、Promiseと`useState`で設定していた取得結果の配列型との型不一致エラーとなってしまいました。
そこで、状態のマウント時とアップデート時に実行される`useEffect`で解決しました。
これは。[useEffectをUpdateタイミングのみで使いたい](https://stackoverflow.com/questions/55075604/react-hooks-useeffect-only-on-update)というstackoverflowの回答を利用しています。
マウント時のタイミングで、DBからのレコード配列を`useState`で作成した状態更新関数で状態更新を行いました。

# 最後に

localStorageを使ってみたり個々のコンポーネントのStateだけで作れないかと色々模索していましたが、今の形に落ち着きました。
Skebanをよろしくおねがいします。
ストリームって何ぞ


お仕事で新人研修ぶりでコードを書いています。
ストリームってすっごい基礎的なことだと思うんですが、
わかんなかったもんはしょうがないので調べていきます。

ストリームって日本語にしたら「流れ」です。
ストリームを説明する文章にもよく「データの流れ」なる言葉が出て来る気がします。
でも、「流れ」って言われるとピンとこない。

## 定義
> プログラミングの分野では、データの入出力全般を扱う抽象的なオブジェクトやデータ型を意味する場合が多い。データが出入りする何らかの対象（メモリ領域やファイル、ネットワークなど）をプログラム中で扱えるように抽象化したもので、接続や切断、書き込みや読み込みなどを簡易な操作で行うことができる。

出典
e-words(http://e-words.jp/w/%E3%82%B9%E3%83%88%E3%83%AA%E3%83%BC%E3%83%A0.html)

「データが出入りする領域をプログラムで操作できるように扱えるようにしたもの」ぐらいの意味でしょうか。
 
ではJavaでストリームを扱うにはどうしたらいいのでしょう？

> Javaの入出力機能はすべて、文字やバイトシーケンスの流れを表す「ストリーム」という概念をもとに設計されている。Javaにおいては、ストリームはデータの読み書きを行う標準化された機構であり、Javaに含まれている可変のデータソースを表すオブジェクトはすべて、ストリームとしてデータを読み書きするメソッドを提供している。 

出典
builder(https://builder.japan.zdnet.com/java/20363416/)

あ、Javaで入出力処理はすべてストリームで行われると…

> ストリーム指向の入出力を扱うクラスは、多くの場合java.ioパッケージに含まれている。このパッケージの中心となるのはInputStreamクラス、OutputStreamクラスの2つの抽象クラスだ。他のストリーム指向のクラスは、すべてこれらのクラスを拡張して定義されている。

出典
同上

なるほど。出典もとのサイトにも例示されてますが、
FileReaderクラスもInputStreamクラスを継承してるわけですね。
で、それを使ったらストリームを使ってることになると。

```java
java.io.FileReader fileReader = new java.io.FileReader("/home/me/myfile.txt");

int aChar = 0;
while ((aChar = fileReader.read()) >= 0){
    System.out.println((char)aChar);
}
```
じゃあ、ストリームを使うのと使わないのでどんな違いがあるの？
という疑問も浮かびますが、それについてはまた後日。。。
Javaの標準入力のScannerで詰まった話

#Javaの標準入力で詰まってしまった
題名の通りJavaの標準入力を取得する際に詰まったので
Scannerの違い

今回登場するScannerのメソッドは
- next();
- nextInt();
- nextLine();
の３つ。

##next();
これは標準入力を**空白**まで読み取ってくれる。
###例
標準入力： `a 123` →取得： `a`

##nextInt();
これも標準入力を**空白**まで読み取ってくれる。
返り値は**int**。
###例
標準入力： `1 abc` →取得： `1`

##nextLine();
これが上２つとは違って２つの注意点。
- **改行(\n)**まで読み込む
- 空白も読み取る
返り値は**String**。
###例１
標準入力

```
1
aa
```
取得

```
1
```

これは一行で書くなら `1\naa` なので `\n` の前の `1` まで読んで読み取り開始位置は `aa` の前
###例２
標準入力

```
1 abc
aa
```
取得

```
1 abc
```

これは一行で書くなら `1 abc\naa` なので `\n` の前の `1 abc` まで読んで読み取り開始位置は `aa` の前


#上記を踏まえると
標準入力

```
a
2 3
b
4
c
```

として全ての数字/文字を取りたければ

```
1. next(); or nextLine(); →a
2. nextInt(); →2
3. nextInt(); →3
4. next(); →b
5. nextInt(); →4
6. next(); or nextLine();→c
```
となる。
HTML13行あればWebVRアプリが作れる！　A-Frame連載(1)

# はじめに

Webブラウザで動かせるA-Frameの紹介です（今更ですが）。
何回続くか分かりませんが、週刊ぐらいでA-Frameの連載してみます。

# 完成図

![aframe.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199678/cf37ef20-3589-203a-bd33-8695ced4ffaf.gif)

# 全体ソースコード

```html
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Web VR Test</title>
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-sky color="#a0d8ef" wireframe="true"></a-sky>
      <a-box position="0 0 -10" width="2" height="1" depth="1.5" color="#333"></a-box>
    </a-scene>
  </body>
</html>
```

ちなみに公式ドキュメントのサンプルも１４行で、やっていることは似たようなものです。
https://aframe.io/docs/0.9.0/introduction/

# コード解説

```html
  <head>
...
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
  </head>
```

WebGLのJavaScriptライブラリ「Three.js」を元に作られた、WebVR用フレームワーク『A-Frame』を読み込んでいます。

```html
    <a-scene>
...
    </a-scene>
```

A-Frameはこんな感じに、HTML要素のように記述していきます。

a-sceneの宣言は必須で、これを入れるだけでVR空間が出来上がります。
更に、完成図右下にあるようなVRアイコンや、VRデバイスで見た時のトラッキング等の実現がこれ一つでできます。
Three.jsでVRアプリを作ろうとしたことがある方なら、この手軽さには感動モノ。

```html
      <a-sky color="#a0d8ef" wireframe="true"></a-sky>
```

a-skyで空を定義できます。
wireframe=trueを入れないとベタ塗りの空が表示されて上下左右が分かりづらいので、敢えてワイヤーフレームにしています。

```html
      <a-box position="0 0 -10" width="2" height="1" depth="1.5" color="#333"></a-box>
```

a-boxを入れることで直方体(、立方体)ができます。
A-Frameは幅、高さ、奥行き（x,y,z軸）のサイズや位置・回転、色や各種プロパティをjsコードではなくHTML属性として記述することで操作ができるので、可読性高く記述ができます。

# 最後に

A-Frameは公式ドキュメントやチュートリアルが丁寧ですが英語なので、英語が分からないと少々ハードルが高いかもしれません。

https://aframe.io/

記述自体は非常にシンプルなので、ぜひいろいろ使ってみてください。
次回はA-Frameで3Dオブジェクトの選択できるようにしてみます。
node-id3でid3タグを編集する

node.jsでmp3ファイルのid3タグ(曲名や収録アルバム名など)を編集する。

##使用するAPI
楽天ブックスCD検索API 
https://webservice.rakuten.co.jp/api/bookscdsearch/

##node-id3のインストール

```
npm install node-id3
```
https://github.com/Zazama/node-id3

##コード

```id3.js

var req = require("request");
var artistname = "アーティストの名前";
//空白は-(p.s red i => p.s.-red-i)
var cdtitle = "アルバム名";
var url = "https://app.rakuten.co.jp/services/api/BooksCD/Search/20170404?applicationId=1036033389143023148&title=" + encodeURI(cdtitle) + "&artistName=" +  encodeURI(artistname);
var fs = require("fs");
var id3 = require("node-id3");


function writetag(array) {

/*
arrayの中身
[ 
  [ 'P.S. RED I (初回限定盤 CD＋DVD)',
    'TK from 凛として時雨',
    [ 'P.S. RED I',
      'moving on',
      'P.S. RED I (Instrumental)',
      'Fantastic Magic',
      'Signal',
      'film A moment',
      'katharsis' ] ],
  [ 'P.S. RED I',
    'TK from 凛として時雨',
    [ 'P.S. RED I', 'moving on', 'P.S. RED I 
    (Instrumental)' ] 
  ] 
]
*/
  
  var path = "mp3があるフォルダのパス";
  var dir = fs.readdirSync(path);
  var tags;

  for (var i = 0; i <= array.length - 1; i++) {
    if (array[i][2].length == dir.length) {
      for (var j = 0; j <= dir.length - 1; j++) {
        tags = {
          title: array[i][2][j],
          artist: array[i][1],
          album: array[i][0],
          //APIC: "./hogehoge.jpg", CDジャケット？
        }
        id3.write(tags, path + "/" + dir[j]);
      }
    }
  }
}


req.get(url, function(res, body, error) {

    var array;
    var info = [];
    var item_list = ["title", "artistName", "playList"];
    var content = JSON.parse(body.body).Items;

    for (var i = 0; i <= content.length - 1; i++) {
      array = [];
      for (var j = 0; j <= item_list.length - 1; j++) {
          if (j == item_list.length - 1) {
              content[i] = content[i].Item[item_list[j]].split("#");
              //falseと判定された要素を削除(Boolean => 空白文字やnull等がfalseになる型)
              content[i] = content[i].filter(Boolean);
              array.push(content[i]);
          } else {
              array.push(content[i].Item[item_list[j]]);
          }
       }
      info.push(array);
    }

    writetag(info);

});


```
駆け出しフロントエンドエンジニアがVisual Studio Codeにインストールすべき拡張機能

フロントエンドエンジニアがVS Codeにインストールしておくと便利な拡張機能をまとめてみました。

- 汎用
- HTML/CSS
- JavaScript

# 汎用的で便利な拡張機能

- Japanese Language Pack for Visual Studio Code
 - 日本語表記にできる。
- EditorConfig for VS Code
 - 拡張子ごとにインデントのスペース数などを設定できる。
- indent-rainbow
 - インデントの階層ごとに色がつく。
- Code Spell Checker
 - スペルミスを指摘してくれる。


# HTML/CSSで便利な拡張機能

- IntelliSense for CSS class names in HTML
 - CSS/Scssからclass名の候補をあげてくれる。
- Auto Rename Tag
 - タグ修正するときに前後連動できる。

# JavaScriptで便利な拡張機能

- Rainbow Brackets
 - 対応する()ごとに色をつける。
- JavaScript (ES6) code snippets
 - JS(ES6)の標準関数などの候補をあげてくれる。


# まとめ
実際にコードを書く上で私が使用している拡張機能を紹介しました。

便利機能があれば追記していこうと思います。
【Heroku】カスタムドメインを設定する

# はじめに

Herokuアプリにカスタムドメインを設定したときの備忘録です。

## Dyno

有料プラン（Hobby）で実施しました。

> 補足：無料プラン(Free)では本投稿に記載されている操作が行なえない可能性があります

## 目的

1. ルートドメインでアクセス可能にする（例：https://xxx.com）
2. httpsでアクセス可能にする

# 準備. ドメインを購入

自分の場合は**GoogleDomain**で**xxx.com**を購入しておきました

# 1. [Settings] ドメイン＆SSL設定

**Settings**の**Domains and Certificates**でドメインを追加する

<img width="1188" alt="heroku_dns-01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141934/269d0390-0ab2-9f9a-2353-9a963b336073.png">
<img width="1232" alt="heroku_dns-02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141934/c8d4c0af-c57e-8c04-8477-c5d14f45e57d.png">
<img width="1232" alt="heroku_dns-03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141934/03773a3e-34fc-370f-0863-29bebbd92444.png">
<img width="1232" alt="heroku_dns-04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141934/68f43afd-7442-a0b8-1bf9-597008875af0.png">


# 2. [Resources] PointDNSアドオン追加

**Resources**で**PointDNS**アドオンを追加する

<img width="1232" alt="heroku_dns-11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141934/5e1800a7-9240-7871-2d6f-c3daea7eb67b.png">
<img width="1232" alt="heroku_dns-12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141934/e2b62b90-71e1-53d5-974d-38cbd3d8d67e.png">
<img width="1232" alt="heroku_dns-13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141934/965a63a4-8797-fa29-6b53-5d48a823fd63.png">

# 3. [PointDNS] NSレコードの値を確認

**PointDNS**でNSレコードの値を確認する

<img width="1232" alt="heroku_dns-21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141934/af6a2438-f99a-e0aa-a4a3-a55aad2af46f.png">
<img width="1232" alt="heroku_dns-22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141934/7d7b5483-2742-8cad-d6cd-034f7ad94b03.png">
<img width="1232" alt="heroku_dns-23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141934/f1c0dded-96a0-bbc7-f7eb-b56dca67215d.png">


# 4. [DNSサーバ] NameServerを設定

**ドメインを管理しているDNSサーバのNameServer**に**PointDNSで確認したNSレコードの値**を設定する

<img width="1232" alt="heroku_dns-31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141934/9f0b29d6-11f9-d05e-ce54-cee8c574dc3c.png">
const を右側に付ける派のことを East const 派という

以前似たような話題の投稿[^1]をしたのですが、英語圏では最近（と言っても2年前）、const を右側に付ける（つまり `T const x` のような）派のことを East const 派、左側に付ける（つまり `const T x`）派のことを West const 派と言うらしいです。

- [East const Central](http://slashslash.info/eastconst/)
- [ISO C++ 委員会のFAQページ 「`X const& x` と `X const* p` とはどういう意味？」](https://isocpp.org/wiki/faq/const-correctness#const-ref-alt) …… [Simon Brand](https://twitter.com/TartanLlama) という人が命名したらしい
- [East const という言葉について触れた多分一番古いツイート(2017/11/7)](https://twitter.com/AdiShavit/status/927599379279736832)
- [Simon Brand 氏ご本人のツイート](https://twitter.com/TartanLlama/status/927600591169380353)

[^1]: [ポインタ型に付ける const は型名の後ろに付くと考えると憶えやすい](https://qiita.com/yuki12/items/06c85af2735ddefd5666)
Railsでダミーのユーザーデータをたくさん用意する方法

##3行で
- いちいち新規作成などする手間を省く
- seedファイルにデータを書き込む
- ターミナルで `raiks db:seed` を実行

<b>( ´∀｀)＜詳しく書きますね</b>

##ユーザーデータが複数必要なとき

たとえばインクリメンタルサーチの実装などで、データベースのUsersにたくさんデータがほしい場合があると思います。
そこでユーザーの新規作成（Sign Up）などでデータを作っていては時間がかかってしまいますね。

##seeds.rbに作りたいデータを書き込みます

<b>db/seeds.rb</b>を編集します。

```seeds.rb
p "create Users"
User.create!(
  email: 'user1@exam.com',
  password: 'aaaaaaaa',
  name: 'ぽーる',
  self_introduction: 'えへへ'
)
User.create!(
  email: 'user2@exam.com',
  password: 'aaaaaaaa',
  name: 'じょん',
  self_introduction: 'どーも'
)
.
.
.
```
1行目にはのちほどターミナルでコマンドを実行したときに表示させるための文字列を書いておきます。

次に `テーブル名.create!` を書きます。
それからカッコ内にユーザーの情報を書いていきますが、それぞれカラムに対応している項目にしてあげてください。必ずしも上の例と同じにはなりません。<b>emailは重複しないように注意！</b>

## `rails db:seed` を実行
好きなだけユーザーとその情報を書いたら、ターミナルで `rails db:seed` を実行してください。
先ほど書いておいた `create Users` の表示とともに、ユーザーが作られています。データベースを確認してみましょう！

<b>( ´∀｀)＜読んでくれてありがとう</b>
2019 7月・令和元年・Nuxt .js・LIFF動向

#はじめに
この記事は、WebBenchというプログラミングを「アクティブラーニング」形式で、
学ぶ勉強会を実施している筆者が分かりやすくプログラミングの技術を伝達するために作成しました。
過去に何回か、セミナーを都内で実施しております。
団体の説明などはこちら→Web Bench 公式　https://twitter.com/bench_web
note→https://note.mu/kaji_____/n/n50c684f7eb6b

#Nuxt.jsとは、何ぞや

Nuxt.js（ナクストと読みます）とはユニバーサルなVue.jsアプリケーションを構築するためのフレームワーク
＊UI構築のためのJSライブラリと思っていただければ大丈夫です。
＊React.jsベースのSSR用フレームワークであるNext.jsに触発されて作成された、Vue.jsベースのフレームワークです。

UIの描画サポート、SSRをはじめとした様々なサポートを行ってくれるものとなります。

＊SSR(サーバサイドレンダリング)とは「(元々ブラウザ上でしか動かなかった)JavaScriptをサーバー内部で実行して、HTMLを生成すること」を指します。

https://nuxtjs.org/

引用・参考資料・Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発

https://html5experts.jp/potato4d/24346/

#環境セットアップ

Node.jsのインストール
自分のPCのターミナルで	$ node –vでバージョン確認できます

【Mac】	Homebrewを使う場合→brew –vでバージョン確認

```
$ brew update
$ brew install node.js
```
【Windows】http://nodejs.org/ja/から最新版をDL

#vue-cliを利用

```
$ npm install -g vue-cli # 既にvue-cli を導入されているかたについて は不要です
$ vue init nuxt-community/starter-template nuxt_sample
```
#サンプルプロジェクトのセットアップ

```
$ cd nuxt_sample
$ yarn
$ yarn dev
```

#環境セットアップが難しいかた
Code sandboxというサービスを利用

https://codesandbox.io/

ブラウザ上で動くエディタ
npm package対応している。

こちらでも十分に演習することは可能です

#以下・参考URL/記事

公式https://nuxtjs.org/

ルーティングの追加と非同期データの取得

Nuxt.js 上での開発における babel の対応文法のソース（設定プリ セット）https://github.com/vuejs/babel-preset-vue-app

参照URL https://html5experts.jp/potato4d/24346/

Laravel+NuxtでLIFFアプリを作ってみた
Laravel Vue.js LINE LIFF

https://techblog.scouter.co.jp/entry/2019/03/14/120000

# LIFFとは

LINEアプリ上で動くフロントエンドのフレームワーク。
こちらもNuxtと組み合わせて使用されることがユースケースとして増えている

https://developers.line.biz/ja/docs/liff/overview/
OpenOffice CalcでExcel VBAのマクロを組む(1)

#はじめに
統合オフィスソフトのフリーウェアであるOpenOffice。その表計算ソフトであるCalcでは、Excelで作成されたファイルとも互換性があり、オプション設定プラスアルファでExcel VBAのプログラムも実行可能という特徴がある。
（ただし、ボタンなどのGUI部品を組み合わせている場合は、デザインモードでの組み直しが必要との指摘もあり）

今回、OpenOffice Calc上でExcel VBAを利用した、個人的な勤務表編集用のマクロを作成してみることにした。

#環境設定
OpenOffice上部のメニューバーに「ツール」があるので、そこから「オプション」で設定用ダイアログを表示。
![2019072701-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409430/ac47514f-de11-60cf-ceee-679caf4da99b.png)

「読み込みと保存」に「VBA属性」があるので、そこでデフォルトではオフになっている「実行可能コード」をオンにして「OK」をクリックして保存。
![2019072701-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409430/38e436e1-e277-7995-488d-3b0a1ff025a4.png)


[参考にさせていただいたページ]
OpenOffice Calc　のOpenOfficeBasicをVBA互換モードにする方法
https://toolmania.info/post-2794/
CalcでExcelのVBAマクロを含む表計算シートを使う
http://www.programmingmat.jp/openoffice_macro/ooo_bmvba.html
OpenOffice日本語版
https://www.openoffice.org/ja/
Interact.jl で作ったアプリを Desktop アプリ or Web アプリにしてみよう

# 本日は

時計アプリを作りました．

- [see my gist](https://gist.github.com/terasakisatoshi/add48038dd258dbc373dc61eeea7cc65)
- [解説記事はこちら](https://qiita.com/SatoshiTerasaki/items/4060c61776d296455d4f)

![stop_watch_by_julia.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135978/a1a613e2-bbec-3b34-6d53-6f48034c8041.gif)

- 開発は Jupyte Notebook で行いました．自分だけではもったいないのでツールとして配布してみましょう．これを Desktop アプリ ないしは Web アプリとして実現させましょう．
- 上のgifはDesktop化したもの動かして録画したものになります．
- Tip: Blink.jl や Mux.jlを使うテクニックは Interact.jl のチュートリアルに記述されています．
- Tip: Atom の Juno でも開発・実行ができます．

# Desktop アプリ化する

[Blink.jl](https://github.com/JunoLab/Blink.jl) を使います. Electron ベースのGUIを作成し Julia から呼び出せるようにするようです．

> Blink.jl is the Julia wrapper around Electron. It can serve HTML content in a local window, and allows for communication between Julia and the web page. In this way, therefore, Blink can be used as a GUI toolkit for building HTML-based applications for the desktop.

Blink.jl のインストールは Blink.jl の README.md に従います．

```julia:Blink.jlのREADME.mdから抜粋
julia> Pkg.add("Blink")
# ... Blink builds and downloads Electron ...
julia> using Blink
julia> Blink.AtomShell.install()
```

## 使います．

Interact.jl で作った部品を `ui` という変数で表しているとします．
つまり `display(ui)` をしたら望むGUIが描画される状態にあるとしておきます．
これができたらあとは下記のコードを呼び出すだけです．

```julia
ui=...　# define your awesome application
# 作るのが面倒であれば下記のコードをuiとして定義する
# ui = slider(-1:0.01:1) # very simple application
using Blink
w = Window()
body!(w, ui)
```

Macですと下記のような警告が出ますがここでは `Allow` を選択します．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135978/1ff13037-4eda-7d5f-2a90-3fafa3b444cc.png)

少し時間が経つと下記のような結果がえられます．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135978/48cb0ef5-bca1-9969-ab7c-3c99b0098528.png)

# Webアプリとして実現する

[Mux.jl](https://github.com/JuliaWeb/Mux.jl) を用います．概要は README.md から引用

> Mux.jl gives your Julia web services some closure. Mux allows you to define servers in terms of highly modular and composable components called middleware, with the aim of making both simple and complex servers as simple as possible to throw together.

インストールは無心に `using Pkg; Pkg.install("Mux")` で O.K.

## 使いましょう

下記のコードを実行します．

```julia
ui = ... # define your application 
using Mux
port=9000
WebIO.webio_serve(page("/", req -> ui), port)
```

そうすると実行したPC上でサーバが立ち上がります．ここではポート番号を9000と指定しているので [http://localhost:9000](http://localhost:9000)　にブラウザからアクセスすると見えます．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135978/091e1418-b3d8-c32d-c0dd-5811447bd74b.png)

### 別デバイスからアクセス

- 実行したコードが `192.168.0.xxx` のIPを持っているとします．

別のPCがあればブラウザから `192.168.0.xxx:9000` にアクセスすると同じような画面がクライアント側（接続元）でも表示されます．
サーバ側でもブラウザを立ち上げておくとサーバー側とクライアント側で同じ挙動をします．

# まとめ

Interact.jl で作ったアプリをDesktopまたはWebアプリとして作ることができました．Webアプリ化しておけばサーバーでの計算の様子を対話的に操作することができますね．
Check! auth0-js の WebAuth.checkSession() でエラーが出てしまう場合の対処

こんにちは、 @dz_ こと大平かづみです。

Prologue
----
最近、 Auth0 をつかって認証機構を作ろうと試作しています。そこで躓いた点を共有します。

### 環境

フロントエンド（Vue.js）で Auth0 を使って認証をしようと試みています。基本的にはこのチュートリアル [Auth0 Vue SDK Quickstarts: Login](https://auth0.com/docs/quickstart/spa/vuejs/01-login) を参考にしています。

Vue.js に限らず、フロントエンドで Auth0 を使う場合は `auth0-js` を使うことが多いようです。

- [auth0/auth0.js: Auth0 headless browser sdk](https://github.com/auth0/auth0.js)

今回は、この `auth0-js` を利用している際にみつけた事象について記載します。

即タイムアウト？
----
タイムアウトするようなタイミングでもないのに下記のようなエラーが出た場合は、 Auth0 の管理画面から _Applications_ の `Allowed Web Origins` の設定を確認してみてください。こちらのドキュメント [Error response - Silent Authentication | Auth0](https://auth0.com/docs/api-auth/tutorials/silent-authentication#error-response) にも記載があるように、 `Allowed Web Origins` を正しく設定するとエラーが解消するかと思います。

```
Timeout during executing web_message communication
```

常に `Login required` エラー
----
上記エラーをクリアしたのに、今度は常に `Login required` …

調査してみたところ、 [auth0.js/README.md at master · auth0/auth0.js](https://github.com/auth0/auth0.js/blob/master/README.md#api) の `checkSession()` の説明を見ると、ソーシャルアカウントでログインしていて、開発環境（インターネット上でアクセス可能なドメインでない）場合は常に `Login required` になるようです。 :eyes: 

> Important: If you're not using the hosted login page to do social logins, you have to use your own social connection keys. If you use Auth0's dev keys, you'll always get login_required as an error when calling checkSession.

ですので、ソーシャルアカウントではなくメールアドレスとパスワードでログインするようにすれば、このエラーは解消できることを確認できました。 :raised_hands:

なお、インターネットからアクセスできるドメインで運用すればこのエラーは解消されると見受けられますが、まだ試しておりませんのでご了承くださいませ。

Epilogue
----

これで常にタイムアウトする事象は避けられました！(笑)
どんどん開発するぞ～！(๑•̀ㅂ•́)و✧
Dynabook(中古)を買ったので、Linux Mint 19.1を入れてみた

#機種情報(コマンドの一部分切り取りです)
~$ cat /proc/cpuinfo 
processor	: 0
vendor_id	: GenuineIntel
cpu family	: 6
model		: 58
model name	: Intel(R) Core(TM) i5-3320M CPU @ 2.60GHz
stepping	: 9
microcode	: 0x21
cpu MHz		: 1634.364
cache size	: 3072 KB
physical id	: 0
siblings	: 4
core id		: 0
cpu cores	: 2
apicid		: 0
initial apicid	: 0
fpu		: yes
fpu_exception	: yes
cpuid level	: 13
wp		: yes
flags		: fpu vme de pse tsc msr pae mce cx8 apic sep mtrr pge mca cmov pat pse36 clflush dts acpi mmx fxsr sse sse2 ss ht tm pbe syscall nx rdtscp lm constant_tsc arch_perfmon pebs bts rep_good nopl xtopology nonstop_tsc cpuid aperfmperf pni pclmulqdq dtes64 monitor ds_cpl vmx smx est tm2 ssse3 cx16 xtpr pdcm pcid sse4_1 sse4_2 x2apic popcnt tsc_deadline_timer aes xsave avx f16c rdrand lahf_lm cpuid_fault epb pti ssbd ibrs ibpb stibp tpr_shadow vnmi flexpriority ept vpid fsgsbase smep erms xsaveopt dtherm ida arat pln pts md_clear flush_l1d
bugs		: cpu_meltdown spectre_v1 spectre_v2 spec_store_bypass l1tf mds
bogomips	: 5188.69
clflush size	: 64
cache_alignment	: 64
address sizes	: 36 bits physical, 48 bits virtual
power management:

以下、３コア分

~$ cat /proc/meminfo 
MemTotal:        8059788 kB
MemFree:          514904 kB
MemAvailable:    5939260 kB
Buffers:          591504 kB
Cached:          4323472 kB
SwapCached:            0 kB

~$ sudo dmidecode -t baseboard
# dmidecode 3.1
Getting SMBIOS data from sysfs.
SMBIOS 2.5 present.

Handle 0x0002, DMI type 2, 14 bytes
Base Board Information
	Manufacturer: TOSHIBA
	Product Name: dynabook R732/F
	Version: Version A0
	Serial Number: C0CZ40NP
	Asset Tag: 0000000000
	Features:
		Board is a hosting board
	Location In Chassis: Center
	Chassis Handle: 0x0003
	Type: Motherboard

Handle 0x000E, DMI type 10, 14 bytes
On Board Device 1 Information
	Type: Other
	Status: Enabled
	Description: USB
On Board Device 2 Information
	Type: Video
	Status: Enabled
	Description: VIDEO
On Board Device 3 Information
	Type: Ethernet
	Status: Enabled
	Description: ETHERNET
On Board Device 4 Information
	Type: Sound
	Status: Enabled
	Description: SOUND
On Board Device 5 Information
	Type: Other
	Status: Enabled
	Description: WIRELESS LAN

~$ 

#購入時よりの変更
##MEM＆HDD換装
元々のHDDはmSATAのSSD(128GB)でWindows10でした。
私はWindows10の使用経験が乏しいので軽量Linux DEを入れる事にしたので、ｍSATAの256GBを購入、換装しました。
また、メモリが2GB(1GB+1GB)だったので、こちらも増設しました。
現在は4GB+4GBの8GBで運用しています。

#Linux Mint 19.1
Mintは３つの種類があるのですが、今回はXfceを選びました。選んだ理由はなんとなくです。ｗ
３者比較ページなどキータにありますので、気になる方はぐぐってね。
~~なんとなく…ではありますが、Cinnamonは既にデスクトップで体験済みで、そのデスクトップも今はMATEです。残るはXfceなので…と言う事情もあります。~~

#導入その他
ハードウェアの換装作業は裏をみれば一目瞭然な位。
ネジ２本でメモリ蓋が空き、その下に１つ隠れたネジと見えてるネジの２本でHDDの蓋が空きます。
当初HDDは2.5'SSDを購入したのですが、ここでミステイクはmSATAだった点、良く見てから買えばよかった。orz
~~SSDはまたPC組む時にでも使います~~
換装自体は特記なし、良くある換装記事の通りです。向き等慎重に行えば別段壊す様な事はないはずです。

OSの導入もMintなので特記なしですが、UEFIにチャレンジしてみたのですが、敢え無く挫折。(涙)
難しい…何が悪かったのか、何れまたチャレンジしてみたいです。
通常BIOSにして導入して事無くGRUBは動きました。

#トラブル
導入後の目立ったトラブルはありません。日本語環境も何もかも、普通に動いています。
今この記事もノートで書いています。(一部デスクトップで書いています)

#今後の予定
簡易な計測機器をつなぎ、記録用機材にしたいと考えています。
別記事で書いた、中華ロジアナや、同時に購入したラズパイZERO WHなど、これら機器を接続して使う予定です。
また、独自のハードウェア(指紋認証)等がMintから設定できないか？しゃぶり尽くせる部分はトライしてみたいです。
windows react再立ち上げ　備忘録（完全自分用）

#１　フォルダー内のアドレスバーにpowershellと打ち込む
#2  powershell上に入力
1 cd 親フォルダー内に作ったフォルダー
2 npm start
#3 ローカル環境が立ち上がる

#4サーバーを止めたい場合
Ctrl+Cを押す
Laravel7  Voyagerで管理画面作成






#VOYAGERの環境を構築
Composerをインストールする。

```
curl -sS https://getcomposer.org/installer | php
mv composer.phar /usr/local/bin/composer
```






#VOYAGERのインストール
Voyagerパッケージを作成したプロジェクトに導入する。

```
$ composer require tcg/voyager
```

–with-dummy オプションは、ダミーの管理者データの作成コマンド。
artisanコマンドで後から追加可能だが、インストール時にダミーデータを作成する。

```
$ php artisan voyager:install --with-dummy
```
Voyagerインストール先ディレクトリ
vender/tcg/voyager


#セッションクッキーを管理画面とユーザで分ける

```:app/.env
SESSION_COOKIE=auth
SESSION_COOKIE_ADMIN=auth-admin
```


```:config/app.php
'providers' => [

        /*
         * Laravel Framework Service Providers...
         */

         TCG\Voyager\VoyagerServiceProvider::class, 　　//追加する
],
```


#DB:MySQLの使用時
MySQLのバージョンによって、Laravelのutf8mb4_unicode_ciで不具合が発生する可能性がある。
AppServiceProvider.phpを修正しエラーを回避する。
デフォルトの`defaultStringLengthは255`となっている。

```:app/Providers/AppServiceProvider.php
use Illuminate\Support\Facades\Schema;    // 追加

 public function boot()
 {
     Schema::defaultStringLength( 191 );  // 追加
 }
```









#管理者画面へログイン
[ログイン画面](http://127.0.0.1:8000/admin/login)へアクセス。

email   : `admin@admin.com`
password: `password`
![laravel.png](https://camo.qiitausercontent.com/bbb8aef83f5feab43b85ec46f35a7e64a2b39e73/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f35373633342f39636231323538662d653034612d323465322d316532642d3637386134356230643066392e706e67)





アカウントの追加方法

```
$ php artisan voyager:admin admin@example.com --create  //任意のメールアドレス
 Enter the admin name:
 > admin　　　　　　　　　　　　　　　　　　　　　　　　　　　　 //任意の名前
 Enter admin password:
 >
 Confirm Password:
 >
Creating admin account
The user now has full access to your site.
```





#Voyagerの日本語化

```:config/app.php
'locale' => 'ja',
```

ログイン後、右上のメニューから
`Profile` →`Edit My Profile`→`Locale を ja` にセットする。


[Voyagerドキュメント](https://voyager.readme.io/docs)
競プロwriterのための準備チェックリスト

## はじめに

競技プログラミングのコンテストを開く時、参加者からは気づかないような準備が多数必要になります。この記事ではwriter初心者向けに必要最小限の準備リストを一覧にしました。

また、これらの準備をするときは[testlib](https://github.com/MikeMirzayanov/testlib)や[Rime](https://github.com/icpc-jag/rime)といった、既に整備されているライブラリを利用することを推奨します。

## チェックリスト
### ソースコード

- [ ]  ジャッジ解
少なくとも2つは用意する。

- [ ]  想定誤答
想定されるWA・TLEは全て用意してちゃんと落とせるかの確認が必要。

- [ ]  愚直解
小さなケースについてジャッジ解と同じ出力になることを確認する。

- [ ]  入力ジェネレータ
テストケースの入力を生成するコード。
環境依存で生成される入力が変化することを避けるために、testlibの利用を推奨。

- [ ]  入力検証器
testlibの利用を推奨。
誤って空白が1つ入っただけでもリジャッジが必要になりコンテスト全体の質に影響を与えるので、特に慎重に用意しなければならない。
なるべくたくさんの人が書く。特に入力ジェネレータを書いた人しか書いていない状況はNG。

- [ ]  出力検証器（diffジャッジにできない場合）
例えば誤差を許容するような問題や、構築で解が複数あるような問題の場合、検証器を用意する必要がある。
出力検証器はバグらせやすいのでtestlibの利用を推奨。
その上で、出力がない場合に正しく落とせるかなどを確認する。

### データセット

- [ ]  サンプルケース
サンプルが通らないのにACが出るという状況は好ましくない。

- [ ]  ランダムケース

- [ ]  小さなランダムケース
想定外の誤答を落としやすくなる。

- [ ]  最大ケース
これがないとTLE解が落としにくくなる。
最大ケース1つだけだと埋め込みなどで突破される危険があるので、最大よりほんの少しだけ小さいケースもいくつか用意するとより良い。
- [ ]  コーナーケース
想定誤答を落とせるケースを揃えておく。

### 問題文
- [ ]  問題文
なるべく誤解を生まない問題設定を考える。
数式を用いて形式的に書いておけば誤読される危険性が減る。
物語などをつける場合、あまりに文章が長くなると読みづらくなる。この場合は「背景」など別段落に分けることを検討するべき。

- [ ]  制約・入力・出力
入力形式・出力形式を正確に語弊なく書き下す必要がある。
入力検証器を自然言語に翻訳するつもりで書くと曖昧さが減りやすい。

- [ ]  サンプル
サンプルが入力フォーマットに従っていない・出力がおかしいなど、ミスが頻発するパート。
入力検証器・ジャッジ解を用いたチェックを通っていることの確認が必要。

### 手元でのチェック
- [ ]  ジャッジ解・想定誤答が想定通りAC・WA・TLEになる
TLE解は十分余裕を持って落とせているか確認する必要がある。

- [ ]  ストレステスト
ランダムケースを大量に生成してジャッジ解が全てACすることを確認する。
小さなケースについては愚直解との一致も確認する。

### ジャッジシステム上でのチェック
- [ ]  ジャッジ解がACになる

- [ ]  想定誤答が想定どおりWA・TLEになる

- [ ]  問題文が正しく表示されている

- [ ]  Time Limit/Memory Limitに2倍以上の余裕がある
逆に、TLを少し伸ばした程度ではTLE解が通らないことのチェックも必要。
想定解とTLE解の幾何平均がTLになるように入力サイズを調整すると事故りにくい。

### 過去問
- [ ]  既出チェック
シンプルな問題設定ほど被りやすい。
「(アルゴリズム名) 競技プログラミング」「(アルゴリズム名) AtCoder」「(アルゴリズム名) Codeforces」などでググって確認する。

- [ ]  [OEIS](http://oeis.org/)
オンライン整数列大辞典。
特に入力が整数1つの場合は必ずチェックが必要。
from csv to json with Python

#csv形式からjson形式へ
知り合いのおじさんが経営する学習塾で使用する英単語テスト作成システムの新調のため，csv形式で保存されていた単語のデータをjson形式に変換する必要がありました．

備忘録として初投稿しようと思います．

## Pythonで変換
探せばフリーソフトなど見つかりそうでしたが，最近利用しているPandasの復習も兼ねてPythonで変換しました．

### 利用したモジュール
- json
- pandas
- argparse

### csv形式のファイルの仕様
1行目に乱数，2行目に単語，3行目に意味が入力されています．

乱数はテスト作成でランダムに出題できるよう，マクロで並び替えを行う際に使用します．新しい環境では利用しないため削除します．

```word_db.csv
random num, name, mean
0.93837248,apple,りんご
...
...
```

### json形式のファイルの仕様
システム自体を製作したのは別の方なので，実際の仕様ではありませんが以下のようにします．

```word_db.json
[
    {
        "name": "単語",
        "mean": "単語の意味",
        "id": "一意に設定する文字列",
        "rank": "習熟度を表す数値（int）",
    },
]
```

## ソースコード
あれこれ書く前に結果だけ載せておきます．

細かい部分は変更しておりますが，おおまかな雰囲気はこんな感じです．

```csv_to_json.py
import json
import argparse
import pandas as pd


def csv_to_json(src_file, dst_file):
	if dst_file:
		dst_file = dst_file
	else:
		dst_file = 'tmp.json'
	df = pd.read_csv(src_file)
	df['id'] = [None for _ in range(len(df.index))]
	df['rank'] = [0 for _ in range(len(df.index))]
	df.to_json(dst_file, force_ascii=False, orient='records')

	with open(dst_file, 'r', encoding='utf-8') as f:
		json_out = json.load(f)
	with open(dst_file, 'w', encoding='utf-8') as f:
		json.dump(json_out, f, ensure_ascii = False, indent = 4, separators = (',', ': '))


if __name__ == '__main__':
    parser = argparse.ArgumentParser()
    # add argument: csv file name
    parser.add_argument('src', help='source csv file name')
    parser.add_argument('--dst', help='destination json file name')
    # analysis arguments
    args = parser.parse_args()
    csv_to_json(args.src, args.dst)
```

利用する際はこんな感じ．

```terminal
$ python3 csv_to_json.py word_db.csv
```
この場合`tmp.json`というjson形式のファイルが作成されます．
ファイル名を指定したい場合は以下の通り．

```terminal
$ python3 csv_to_json.py word_db.csv --dst (指定したいファイル名).json
```

### 2度も書き込んでいる理由
最初はリストを用いて適当に変換してしまおうと思っていましたが，列の追加・削除やデータの形式を保った状態での書き込みが面倒だったので，pandasを用いることにしました．

その際データの整形がうまくいかず1行で出力されてしまったので，なんとなく見栄えがいいと思い2回目に整形してDumpしています．

## 以上．
今後複数の単語データを変換する可能性があったため，コンソールによるファイル名の設定を行えるようにできたのは嬉しい！

Pythonペーペーですが楽しくて時間を忘れますね〜

初投稿で至らない部分も多くあると思いますので，改善点やご指摘お待ちしています．
React の useMemo と useCallback がよくわからなかったので調べたメモ


# useCallback とは
https://ja.reactjs.org/docs/hooks-reference.html#usecallback
> メモ化されたコールバックを返します。

# useMemo とは
https://ja.reactjs.org/docs/hooks-reference.html#usememo
> メモ化された値を返します。

わかるようなわかないような感じだったので挙動を確認するコードを書きました。
 


## コード
```tsx
import * as React from "react";
import { useCallback, useMemo, useState } from "react";

let tmpHandleClick: () => void;
let tmpHandleClick2: () => void;

export const Component: React.FC = () => {
  const [count, setCount] = useState(0);
  const double = useMemo(() => {
    console.log("double が計算された。");
    return count * 2;
  }, [count]);

  const handleClick = useCallback(() => {
    setCount(prev => prev + 1);
  }, []);
  if (tmpHandleClick !== handleClick) {
    console.log("handleClick が生成された。");
  }
  tmpHandleClick = handleClick;

  // ----------------------

  const [count2, setCount2] = useState(0);
  const dobule2Func = (i: number) => {
    console.log("double2 が計算された。");
    return i * 2;
  };
  const double2 = dobule2Func(count2);

  const handleClick2 = () => {
    setCount2(count2 + 1);
  };
  if (tmpHandleClick2 !== handleClick2) {
    console.log("handleClick2 が生成された。");
  }
  tmpHandleClick2 = handleClick2;

  return (
    <div>
      <p>state: {count}</p>
      <p>double: {double}</p>
      <button onClick={handleClick}>handleClick</button>
      <br />
      <p>state2: {count2}</p>
      <p>double2: {double2}</p>
      <button onClick={handleClick2}>handleClick2</button>
    </div>
  );
};
```

## 動かしてみた結果
### 初期表示時
<img width="574" alt="スクリーンショット 2019-07-27 18.31.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56898/73ec7351-5e49-ad46-8e0d-06b6c6eb68af.png">

初回なのですべてのログが表示される。


### handleClick 押下時
<img width="574" alt="スクリーンショット 2019-07-27 18.32.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56898/b86bd62f-569d-66ee-0d39-64e39650078e.png">

handleClick は新たに生成されない。
handleClick は useCallbackの第２引数に空配列を与えているので初期表示時にのみ生成される。
useCallback は第２引数の配列に含まれる値に変化があった時のみ関数を新しく生成するため。

### handleClick2 押下時
<img width="574" alt="スクリーンショット 2019-07-27 18.33.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56898/f4a56c22-af8b-cd08-a37c-7342a1cad329.png">

useMemo の 第２引数に渡している count に変更がないため　double は計算されない。

## まとめ
react の component が render されると、毎回、component の中身がすべて再実行されるが、
useMemo, useCallback を使うと必要ない再計算、再生成が行われない。

という当たり前のことが実際に動かしたことで腹落ちしました。
Ｍacでsudo npmなのにpermission deniedのエラーが出現した

:::note warn
内容の最新更新日は2019/12/05です。
:::

# はじめに
気づけば初めてプロジェクト配属されて早2ヶ月。
当初遭った問題を覚えているうちに書いておこうと思います。
最初にすることは配られたiMacの環境構築だが、
Windowsに一筋十数年、Macの使い方やキーボードの配置すらあやふやな中で進み、とりあえず壁をぶつかりまくりました…
まずsudoって管理者権限なのに権限がないってどういうことだよ！！（怒）

# 試したこと（失敗）
時間のない人はここを飛ばして解決策を見てください。

`sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}`

色々調べてたどり着いたのはこれ。
ざっくり言うとディレクトリの管理者を自分のアカウントに変更してくれます。
これでsudoがなくても普通にインストールできちゃいます。（むしろsudoを使ったらエラーが出ます）
しかし後ほどいろんな問題が浮かび上がりました…
一番大きかったのはiTunesの**リソースを割り当てることができませんでした**エラー。
個人の推測ですが、権限が変わった影響でディレクトリを見つからない、もしくは書き込みできなくなったのではないかと。
このエラーのなにがいけないっていうと、
iPhoneから信頼できないため、実機テストができないのです！！
こうなったらインストールできても意味がないじゃん（涙）

これからは自分のアホ体験談です。
つまらない話なので時間のない方飛ばしてくださいね（二回目）
「sudo chownはだめだったので、元に戻したい！」と思ってとった行動は…
`sudo chown -R root $(npm config get prefix)/{lib/node_modules,bin,share}`
（実際のコマンドを忘れたがこんな感じ）
「再び権限をrootユーザーに戻せば大丈夫なはず！」という安易な思考から、
自らすべての権限を奪い、キーボードやブラウザの使用権限さえなくなりました。
初期化せざるを得ない状況を作り出したのだ…もはやホラー…
**これは、絶対、やっちゃいけない。**

# 解決策
https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally

にありました。

1. (CLI)ホームディレクトリに新しいディレクトリを作成（元のディレクトリの代わりに利用）
`mkdir ~/.npm-global`

1. (CLI)新しいディレクトリを設定
`npm config set prefix '~/.npm-global'`

1. (GUI)文字エディターを開いて、ファイルを新規作成し、以下の行を追加
`export PATH=~/.npm-global/bin:$PATH`

1. (GUI)保存する。名前は **.profile** で保存先はホームディレクトリ
（隠しファイルなので保存してもFinderでは見えない）

1. (CLI)sourceコマンドで作成したファイルを反映させる
`source ~/.profile`

これで`npm install -g`をそのまま使えるようになりました！

# 解決策追記（2019/12/05）
上記の文字エディターの部分は`vi`コマンドで代替できます。
全ての手順がターミナルで完結できて、人によってはその方はやりやすいかもしれません。
上記の`(GUI)`の部分を置き換えた手順は下記です。

1. (CLI)ホームディレクトリに新しいディレクトリを作成（元のディレクトリの代わりに利用）
`mkdir ~/.npm-global`

1. (CLI)新しいディレクトリを設定
`npm config set prefix '~/.npm-global'`

1. (CLI)新規ファイル~/.profileを作成する
`vi ~/.profile`

1. (CLI)iキーを押して編集モードにする

1. (CLI)１行目に追加
`export PATH=~/.npm-global/bin:$PATH`

1. (CLI)Escキーで編集モードを終了させる

1. (CLI)`:wq`を入力して、エンターキーで保存して戻る

1. (CLI)sourceコマンドで作成したファイルを反映させる
`source ~/.profile`

そうするとわざわざ文字エディターを開かなくても大丈夫です！
と言いながら、半年前の自分は
***「コマンドですって！？！？(((((( ;ﾟДﾟ)))))ｶﾞｸｶﾞｸ」***
の状態でした。
文字エディターを使った方が気が楽だと、そのように記事にしました。
今となってはターミナルで完結した方が楽じゃない？と言えるけど、
これでも成長ですかね？（笑）

# おまけ
これで解決できましたが、cmdを開くたびに`source ~/.profile`を打たないと反映されません。
毎回だとめんどくさいので、それについても調べました。
どうやら **~/.bash_profile** というログイン時に実行される設定ファイルが存在しています。
なので、それを編集して無事~/.profileの内容が自動的に反映されるようになりました！

1. (CLI)~/.bash_profileを開く
`vi ~/.bash_profile`

1. (CLI)iキーを押して編集モードにする

1. (CLI)最後の行に追加
`source ~/.profile`

1. (CLI)Escキーで編集モードを終了させる

1. (CLI)`:wq`を入力して、エンターキーで保存して戻る


# さいごに
CLIを使い慣れた方には簡単かもしれませんが、自分は結構苦戦しました。
こんな風にまとめて、一人でも苦戦している方の悩みを解決できたら幸いです。
Node.jsをインストールする方法(Windows)

自身の備忘録としてNode.jsのインストール方法を記事にまとめてみました。
ちなみに、マシンはWindows10を使用しています。

# インストールまでの流れ
1. Nodistをインストール
2. 正常にインスールされたか確認
3. 公式HPからインストールしない理由(おまけ)

# Nodistをインストール
[Nodist](https://github.com/nullivex/nodist/releases)からインストールができます。
<img width="745" alt="コメント 2019-07-23 100508.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463391/1c402a8d-f9fb-6b21-1abe-5b1e67b238c2.png">
画面上部にあるバージョンで `NodistSetup-v0.9.1.exe` をクリックします。
<img width="373" alt="コメント 2019-07-23 100659.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463391/8b483f18-14c0-8127-95ed-a87d8c694464.png">
 `Next>` をクリックします。
<img width="371" alt="コメント 2019-07-23 100734.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463391/7b796b36-52b6-d666-8e22-069077442347.png">
表示内容を確認し、 `I Agree` をクリックします。
<img width="371" alt="コメント 2019-07-23 100813.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463391/b920ab55-8041-469b-f533-275c4e17d9b2.png">
フォルダーを確認し、変更の必要がなければそのまま `Install` をクリックします。
<img width="371" alt="コメント 2019-07-23 100856.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463391/65f4e2ee-f360-31e0-8080-ad351bad41bf.png">
インストールが終了すると `Finish` をクリックします。
これでNodistのインストール完了です。


# NodistからNode.jsをインストールしよう

1. Nodistがインストールされてるか確認
1. インストール可能なNode.js一覧を表示
1. バージョンを選択
1. Node.jsがインストールされているか確認

### 1.Nodistがインストールされてるか確認

```
nodist -v
```
WindowsであればWindows Power Shellまたはコマンドプロンプトで `nodist -v` コマンドを入力します。

### 2.インストール可能なNode.js一覧を表示

```
nodist dist
```

 `nodist dist` コマンドを入力するとインストール可能なNode.jsのバージョン一覧が表示されます。

```
  10.10.0
  10.11.0
  10.12.0
  10.13.0
  10.14.0
  10.14.1
  10.14.2
  10.15.0
  10.15.1
  10.15.2
  10.15.3
  10.16.0
```

偶数から始まるバージョンが一般的に安定版といわれています。
必要に応じてバージョンを選びましょう。

### 3.バージョンを選択

今回はNode.js公式が推奨している `10.16.0` をインストールします。
(2019/07/27時点)

```
nodist 10.16.0
```

上記コマンドを入力すると、該当のバージョンがインストールされ使用できる状態になります。
バージョンを変更したい場合は、先ほどと同様に `nodist (バージョン)` を入力すればOKです。

### 4.Node.jsがインストールされているか確認

```
node -v
```

指定したバージョンが表示されれば、インストールが正常に完了していると判断してください。

# 公式HPからインストールしない理由(おまけ)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463391/a756feb2-017f-392e-c6af-bb94bc0345de.png)
Node.jsの公式HPからもインストールが可能です。
しかし、公式HPからインストールしてしまうと、バージョンが固定されてしまいます。

Nodeを使用しているとバージョンを切り替えたいといったことが多々あるそうです。
そういったときに公式HPからインストールしてしまうとバージョン切り替えができません。

そのため、今回は公式HPではなくNodeのインストールやバージョン管理が行えるNodistをあえてインストールしました。

# まとめ
PCをセットアップする際にNode.jsをインストールするので、そういった場面で自身が見返すときに分かりやすいようにまとめました。

自身の備忘録としてまとめましたが、間違い等があればご指摘いただけると幸いです。
底辺プログラマがサーバ管理者を目指す　その２　

# 今回のテーマ：サーバをどうやって立てるか？

まずは最低限の環境で作成してその後問題点の改善やツールなどの追加を行っていこうと思います。
手っ取り早くサーバを立てるにはDockerが早いと思いDockerでまずサーバを立ててみようと思います。

## そもそもDockerとはなんぞや？
wikipediaから引用
> Docker（ドッカー[2]）は、コンテナと呼ばれるOSレベルの仮想化（英語版）環境を提供するオープンソースソフトウェアである[3]。VMware製品などの完全仮想化を行うハイパーバイザ型製品と比べて、ディスク使用量は少なく、仮想環境 (インスタンス) 作成や起動は速く、性能劣化がほとんどないという利点を持つ。

書籍やサイトなどで概要をふわっと理解している感じだとホストOSであるLinuxのディストリビューションの中にコンテナ（VM）を作ってその中でプロセスを実施する仮想化技術。
環境をDockerfileのスクリプトによって構築できるため、環境構築や破棄など色々試すのに便利だったり、他のマシンへの移植性が高い。

## Dockerのインストール
早速試していく、まずはパッケージマネージャからdockerをインストール

```bash
# Dockerのインストール
$ sudo apt install docker

# Dockerのバージョン確認
sudo docker version

# 実行結果
Client:
 Version:           18.09.6
 API version:       1.39
 Go version:        go1.10.8
 Git commit:        481bc77156
 Built:             Sat May  4 02:35:29 2019
 OS/Arch:           linux/amd64
 Experimental:      false

Server: Docker Engine - Community
 Engine:
  Version:          18.09.6
  API version:      1.39 (minimum version 1.12)
  Go version:       go1.10.8
  Git commit:       481bc77
  Built:            Sat May  4 01:59:36 2019
  OS/Arch:          linux/amd64
  Experimental:     false
```

適当なディレクトリを作成して、そこで作業を行う

```bash
$ mkdir docker
$ cd docker
```

## hello world!
dockerのコンテナを動かすにはまずイメージが必要になる。
イメージはコンテナを作成するにあたって必要なデータで、コンテナはイメージの情報をもとにコンテナを作成する。

ここではまず触りとしてすでに作成済みの”hello-world”イメージを使用してコンテナを作成する。
といっても自分で作成したわけではなく既に他の人がイメージを作成していて、[Docker Hub](https://hub.docker.com/search?q=hello-world&type=image)というイメージ公開サイトがありそこから取得する。（イメージ版のgithubみたいな感じ）

```bash
# hello-wolrdのタグlatestを取得する
$ sudo docker image pull hello-world:latest

# 実行結果
latest: Pulling from library/hello-world
sha256:6540fc08ee6e6b7b63468dc3317e3303aae178cb8a45ed3123180328bcc1d20f
Status: Image is up to date for hello-world:latest

# イメージが追加されているか確認
$ sudo docker image ls

# 実行結果
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
hello-world         latest              fce289e99eb9        6 months ago        1.84kB
```
イメージの取得に成功すればあとは実行するだけ

```bash
# hello-worldイメージからコンテナを作成し実行
sudo docker container run hello-world

# 実行結果
Hello from Docker!
This message shows that your installation appears to be working correctly.
...

# コンテナの状態を確認する
$ sudo docker container ps -a

# 実行結果
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS                      PORTS               NAMES
18ac55f80a9a        hello-world         "/hello"            26 seconds ago      Exited (0) 25 seconds ago                       determined_snyder
```

これでhello world!ができた次回は自分でイメージを作成しているパターンを
実施してみようと思う。