OmniAICreator/Qiita-1.07M huggingface dataset:
循環的複雑度について

## 背景

- 仕事でコーディングをしていた際に、上長から複雑度について指摘された
- 循環的複雑度という単語は知らなかったが、なんとなくバグが潜みそうなのはわかっていた
- せっかくなので、循環的複雑度について調べてみた
- 僕と同じくらいの経験が浅い人が対象


## 循環的複雑度とは？

#### とりあえず調べてみた、、、

> 循環的複雑度（英: Cyclomatic complexity）とは、ソフトウェア測定法の一種である。 Thomas McCabe が開発したもので、プログラムの複雑度を測るのに使われる。 プログラムのソースコードから、線形的に独立した経路の数を直接数える。[wikipedia](https://ja.wikipedia.org/wiki/%E5%BE%AA%E7%92%B0%E7%9A%84%E8%A4%87%E9%9B%91%E5%BA%A6)

#### 要するに

- コードの中にif/else・for文・switch文などの分岐がいくつ含まれているかを計算する
- その数値の大小により、バグの混入しやすさがわかるというもの

#### 具体的な数え方

- 何も分岐がないプログラムは「１」
- 分岐（if/else・for文・switch文・while文）がある度に「１」を加算する

#### 一般的な考え
諸説あるみたいですが、、、

| 循環的複雑度 | 状態 
|:-----------------|:------------------|
| 1-10  | 安全なコードでテストしやすい|
| 11-20 | 少し複雑なコード|
| 21-40 | 複雑なコードでテストが難しくなる |
| 41以上 | やばいやつ。テスト不可能 |

普通に書いていれば、10を超えることはなかなかないと思います。（私の場合、ビジネスロジックのところで20を計測したことが1度ありました）

#### 実際に例を用いて考える

以下に適当なサービスを用意してみました。あくまでも、例なので処理自体に意味はないので、無視してください。

````java:Service.java

private String familyService(List<String> nameList) {
    String id;
    for (String name : nameList) {
        if (name.startsWith("a")){
            id = "a";
        } else if (name.startsWith("b")){
            id = "b";
        } else if (name.startsWith("c")){
            id = "c";
        } else if (name.startsWith("d")){
            id = "d";
        } else if (name.startsWith("e")){
            id = "e";
        } else if (name.startsWith("f")){
            id = "f";
        } else if (name.startsWith("g")){
            id = "g";
        } else if (name.startsWith("h")){
            id = "h";
        } else {
            id = "xxxx";
        }
    }
    return id;
}
      
````
上の例ですと、for文が1つとif/elseの分岐が9つあるので、1+1+9で複雑度は11になります。

## 対策

循環的複雑度を下げる方法はいくつかあると思います。

- if文の条件を見直す
- 共通化できるものは切り出す
- クラスやメソッドとして新たに切り出す
- メソッドの責務を見直す

などなど、やり方はいくらでもあると思うので、どちらかというと普段からコーディングする際に循環的複雑度を意識することが大事なのだと思います。
私、個人としては循環的複雑度について調べたおかげで目視で計算できるようになったのですが、全員が全員そうではないと思うので、そういった方のために、IntelliJ IDEAの機能を紹介しておきます。

#### 用意したもの

- IntelliJ IDEA

#### やりかた

- IntelliJ >> preference を選択
<img width="190" alt="スクリーンショット 2018-10-14 12.55.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/245191/b8514a71-7f82-68c5-5441-e714579bc31c.png">

- 「overly complex」で検索する
<img width="1025" alt="スクリーンショット 2018-10-14 12.58.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/245191/023210cd-fec7-5a82-3979-ade884e60779.png">

- クラス・メソッド単位で設定する
設定値を超えるとこんな感じに怒られます。
<img width="1131" alt="スクリーンショット 2018-10-14 13.01.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/245191/5be6baac-00aa-ef76-22e4-5eface3eafdf.png">

## まとめ

- 循環的複雑度の考え方は簡単
- 一度理解しておけば、リファクタリングやレビューのタイミングで役に立つ

## 参考にしたサイト

[循環的複雑度 - Wikipedia](https://ja.wikipedia.org/wiki/%E5%BE%AA%E7%92%B0%E7%9A%84%E8%A4%87%E9%9B%91%E5%BA%A6)
[Learn Mccabe's Cyclomatic Complexity with Example](https://www.guru99.com/cyclomatic-complexity.html)
Hello World

# 前置き
Qiita初投稿のため、投稿テストとして作成。

# ソースコード
```c:hello_world.c
#include<stdio.h>

int main(void);

int main(void){
    printf("Hello World\n");
    return(0);
}
```

# コンパイル／実行
## gccの場合
	gcc hello_world.c -o hello_world
	./hello_world

## clangの場合
	clang hello_world.c -o hello_world
	./hello_world

## BCC(Borland C++ Compiler)の場合
	bcc32 hello_world.c -o hello_world.exe
	.\hello_world.exe

## Visual C++の場合
	cl hello_world.c
	.\hello_world.exe


# 実行結果
    Hello World
エラー: "web3.eth.contract is not a function"

# 原因
- Web3.jsのバージョンとコードの記法が異なる。

# 対策
1.0.x を利用している場合は↓のように記載することで解決。

```javascript
const myContract = new web3.eth.Contract(JSON.parse(myContractABI), myContractAddress);
```

# 元のコード

```javascript
const myContract = web3.eth.contract(JSON.parse(myContractABI)).at(myContractAddress);
```


# エラー内容

```bash
TypeError: web3.eth.contract is not a function
```

## 以下のようなエラーも同様

```bash
TypeError: Cannot read property 'sendTransaction' of undefined
```

```bash
TypeError: (intermediate value).at is not a function
```
wordpress　投稿表示の不具合について

wordpressのLihtningというテーマで、VK All in One Expantion Unitというプラグインを使用してwebサイトを制作しました。
投稿が下書き→プレビューでは問題なく表示されるのですが、公開すると、改行がされなかったり、画像が表示されません。
超初歩的な問題だと思われますが、原因分かる方、教えていただけないでしょうか。　よろしくお願いいたします。
php-master-changes 2018-10-13

今日はソースコード内の改行文字の置き換え、末尾スペースの除去、SQLite の要求バージョン引き上げがあった！

# 2018-10-13
## petk: Convert CRLF line endings to LF
- https://github.com/php/php-src/commit/be2ddc6b6575da0b8e7ed235464f7e23c71674c7
- [7.1~]
- CRLF を LF へ置き換え

## cmb69: Require SQLite ≥ 3.5.0 for ext/sqlite3 and ext/pdo_sqlite
- https://github.com/php/php-src/commit/87392eff1a3b06cad2449dca8dc90942f3721900
- ext/sqlite3 と ext/pdo_sqlite について、SQLite の要求バージョンを 3.5.0 へ引き上げ

## petk: Trim trailing whitespace in source code files
- https://github.com/php/php-src/commit/37c329d7153b65fd2430fa42e8af8e8a0cbc0a41
- [7.1~]
- 末尾のスペースを除去

## petk: Fix failing ext/zlib/tests due to whitespace
- https://github.com/php/php-src/commit/9120e79e9f85b74114ac5a1bae112ca35d55739d
- [7.1~]
- 末尾のスペース除去で ext/zlib のテストが通らなくなっていたのを修正

## petk: Fix failing tests/lang due to whitespace
- https://github.com/php/php-src/commit/ed64e1d59a546b63334d94f31304921f3d156609
- [7.1~]
- 末尾のスペース除去で tests/lang のテストが通らなくなっていたのを修正
jsdoでweb3.js その5

#概要

jsdoでweb3.jsやってみた。
コントラクト使ってみた。

#写真

![](http://jsdo-static-contents.s3.amazonaws.com/images/capture/g/A/e/gAe2.jpg?t=1539487394)

#サンプルコード

```
var src0 = document.getElementById('src0'); 
var src1 = document.getElementById('src1'); 
var src2 = document.getElementById('src2'); 
var Web3 = require('web3');
var web3 = new Web3();
web3.setProvider(new web3.providers.HttpProvider('http://127.0.0.1:8545'));

function get() {
    var add = src0.value;
    var abi = JSON.parse(src1.value);
    var TestContract = web3.eth.contract(abi).at(add);
    alert(TestContract);
    var i = TestContract.getCount.call();
    alert(i);
}

function inc() {
    var add = src0.value;
    var abi = JSON.parse(src1.value);
    var TestContract = web3.eth.contract(abi).at(add); 
    alert(TestContract);
    TestContract.incrementCounter.call();
    alert("ok");
}

function reset() {
    var add = src0.value;
    var abi = JSON.parse(src1.value);
    var TestContract = web3.eth.contract(abi).at(add);
    alert(TestContract);
    TestContract.resetCounter.call();
    alert("ok");
}


```

#成果物

http://jsdo.it/ohisama1/gAe2

以上。
AWSエンジニアのためのOpenStackコンポーネント/用語 対応表

個人的に、OPCEL受験が必要になったので、
少しでも覚えやすくするために作ってみました。

| 役割       | AWS |OpenStack    |
|:----------|:-----------|:-----------|
| コンピュート|EC2|nova|
|サイズ|インスタンスタイプ|フレーバー|
|ネットワーク|VPC|neutron|
|認証|IAM|keystone|
|権限|アカウント|テナントorプロジェクト|
|権限|IAM|ユーザー|
|権限|IAM管理ポリシー|ロール|
|権限|IAMユーザー定義ポリシー|policy.json（直接編集、UIなし）|
|上限|制限|クォータ|
|グローバルIP|EIP|フローティングIP|
|LB|ELB|HAProxy|
|OSイメージ|AMI|Glance|
|インスタンスバックアップ|AMI|スナップショット|
|ブロックストレージ|EBS|Cinder|
|オブジェクトストレージ|S3|Swift|
|ダッシュボード|マネージメントコンソール|Horizon|
|計測|CloudWatch|Ceilometer(課金データ)/Monasca(User向け)|
|オーケストレーション|CloudFormation|Heat|
|鍵管理|KMS|Barbican|
|DNS|Route53|Designate|
|コンテナ展開|Fargate|Magnum|
|ファイル共有|EFS|Manila|
|DB|RDS|Trove|
|Hadoop|EMR|Sahara|
|アプリカタログ|マーケットプレイス|Murano|
|メッセージング|SQS/SNS|Zaqar|
|ベアメタル|ベアメタルインスタンス|Ironic|
|FaaS|Lambda|Qinling|
|HA|オートヒーリング|Masakari|
|アクセラレーション| Elastic GPU/FPGA|Cyborg|
jsdoでweb3.js その4

#概要
jsdoでweb3.jsやってみた。
デプロイしてみた。

#写真

![](http://jsdo-static-contents.s3.amazonaws.com/images/capture/E/e/1/Ee1m.jpg?t=1539476196)

#サンプルコード

```
var src0 = document.getElementById('src0'); 
var src1 = document.getElementById('src1'); 
var src2 = document.getElementById('src2'); 
var Web3 = require('web3');
var web3 = new Web3();
web3.setProvider(new web3.providers.HttpProvider('http://127.0.0.1:8545'));

function deploy() {
    var bin = JSON.parse(src0.value);
    var abi = JSON.parse(src1.value);
    var bytecode = "0x" + bin.object;
    var gasEstimate = web3.eth.estimateGas({
        data: bytecode
    });
    alert(gasEstimate);
    var TestContract = web3.eth.contract(abi);
    alert(TestContract);
    web3.personal.unlockAccount(web3.eth.coinbase, "password0");
    alert("ok0");
    TestContract.new({
        from: web3.eth.coinbase, 
        data: bytecode, 
        gas: gasEstimate 
    });
    alert("ok1");    
}




```

#成果物

http://jsdo.it/ohisama1/Ee1m

以上。
findの検索結果が空の時、xargsでエラーを吐くのを抑止する方法

ハウスキーピングのshellを書いていて、消す対象が見つからない時に無駄なエラーが出るので、それを抑止するためのパラメータを調べたので備忘的に残しておきます。

```
nandymak@TEST01:~$ find ./ -name "XXXXX*" | xargs rm -v
rm: オペランドがありません
Try 'rm --help' for more information.
nandymak@TEST01:~$ 
```

```
cd /logs/UNIRITA/auto/JOBLOG
find . -type f -mtime +1 -name "EXEJOB.*"               | xargs --no-run-if-empty rm -v
```

上記の例は、Linux版のA-AUTO(UNIRITA社製)の起動ログを削除するステップです。
日曜日とか、処理がない日はログが出来ないのでrmが引数なしで起動されてエラーを出します。
ハウスキーピングのログにエラーが出るので、いちいち確認作業が発生するのを防止するために「--no-run-if-empty」を入れてfindの結果が無い時はrmが実行されないようにします。
多重代入の便利な用法と注意

Pythonの代入文では、複数の値を複数の名前にバインドできます。

```python:
a, b = 1, 'foo'
```

この用法は、通常の1つの名前への代入と連ねて使用することも可能です。

```python:
a, b = c = 1, 'foo'
```
上記の代入文では、`c`は`tuple`型の`(1, 'foo')`を指します。
個別の値と、値のシーケンスの両方に名前を付けたいときに簡潔に記述できて便利です。
`c`を`tuple`ではなく、`list`で取得したい場合、次のように書きます。

```python:
a, b = c = [1, 'foo']
```

代入を連ねた用法を使用する際に、値がmutableの場合は注意が必要です。例えば次のような場合で、`list`オブジェクトの`['foo']`がmutableです。

```python:
a, b = c = 1, ['foo'] 
```
この例の場合、`b`は、`['foo']` を、`c`は、`(1, ['foo'])`を指していますが、これらの`['foo']`は同じ`list`オブジェクトを指しています。ですので、

```python:
b.append('bar')
```

とすると、`b`も`c[1]`も、`['foo', 'bar']` に変わります。従って、`c`は、`(1, ['foo', 'bar'])`となります。
ROS講座69 Qtを使う1（ビルドの設定）

# 環境
この記事は以下の環境で動いています。

| 項目 | 値 |
|:-:|:-:|
| CPU | Core i5-8250U |
| Ubuntu | 20.04 |
| ROS | Noetic |
| Qt | 5.12.8 |

インストールについては[ROS講座02 インストール](https://qiita.com/srs/items/e0e0a9dc3f94c2d3348e)を参照してください。
またこの記事のプログラムはgithubにアップロードされています。[ROS講座11 gitリポジトリ](https://qiita.com/srs/items/25a56a6abda41dcf396e)を参照してください。

# 概要
GUIを1から作るのは大変などでいくつかのツールがあります。その中でもROSではQtがよく使われます。
ROSのGUIプログラムであるrqtは「Ros QT」という意味です。またRvizにもQtは使われています。
本来QtのプログラムはQtの統合開発環境(QtCreator)とビルドシステム(qmake)でビルドすることが多いのですが、ここでは統合開発環境を使わずにQtのプログラムを作成して、それをcatkinでビルドします。

# バージョン
ROS indigo以前はQt4が標準でしたが、KineticからはQt5に変わりました。

# ソースコード

## C++ファイル
メインのプログラムです。今回は基本としてウィンドウを表示するだけのプログラムを書きます。
C++の実行の中ではROSを使わずにQtの作法で書いています。

```c++:qt_lecture/src/qt_basic1.cpp
#include <QApplication>
#include <QLabel>

int main(int argc, char** argv){
  QApplication app(argc, argv);
  QLabel* label = new QLabel("######## basic1 ########");
  label->show();
  return app.exec();
}
```

6行目の`QLabel* label = new QLabel("######## basic1 ########");`では今回表示するlabelを製作しています。
7行目ではこのLabelを表示して、8行目でループに入っています。

6、7行目はポインターを使わずに

```c++:×ポインターを使わない例
  QLabel label("######## basic1 ########");
  label.show();
```

と書くこともできます（なお、今回の例は同じように実行できます）。c++として言うとこちらのほうが良いのですが、Qtではすべてのオブジェクトはヒープ領域に存在するというお約束があります。ポインターを使わない方法だとスタック領域にメモリが確保されてしまうのでポインターを使用する方法を使うみたいです。

## CmakeList.txt
Cmakeの設定です。Qt用の設定は少し複雑です。
まずQt全体としての設定が以下です。Qtのバージョンを設定するのですが、今回は便宜的にrvizとバージョンをそろえるようにコンフィグを書きます。

```cmake:qt_lecture/CMakeLists.txtに追加
#Qt5 configulation
set(CMAKE_AUTOMOC ON)
find_package(Qt5 ${rviz_QT_VERSION} EXACT REQUIRED
  Core
  Widgets
)
set(QT_LIBRARIES Qt5::Widgets)
add_definitions(-DQT_NO_KEYWORDS)
```

こちらはいつものC++のソースコードをビルドする設定です。`${QT_LIBRARIES}`を足します。

```cmake:qt_lecture/CMakeLists.txtに追加
add_executable(qt_basic1 src/qt_basic1.cpp)

target_link_libraries(qt_basic1
  ${catkin_LIBRARIES}
  ${QT_LIBRARIES}
)
```

## package.xml
Qt5の依存を書く必要があります。

```xml:qt_lecture/package.xmlに追加
  <build_depend>qtbase5-dev</build_depend>
  <build_depend>rviz</build_depend>

  <exec_depend>libqt5-core</exec_depend>
  <exec_depend>libqt5-gui</exec_depend>
  <exec_depend>libqt5-widgets</exec_depend>
  <exec_depend>rviz</exec_depend>
```

# ビルド
```shell
cd ~/catkin_ws
catkin build
```

# 実行
以下のコマンドを打つと下の図のようなウィンドウが表示されます。
各ターミナルごとに実行前にsource ~/catkin_ws/devel/setup.bashを実行する必要があります。

```
rosrun qt_lecture qt_basic1
```

![qt_basic1.png](https://qiita-image-store.s3.amazonaws.com/0/254442/ee5ceb72-115a-a049-464a-bba705486f90.png)


# 参考
[Qtプログラミング入門](https://densan-labs.net/tech/qt/)
[Dockable panel tutorial](http://wiki.ros.org/ja/rviz/Tutorials/hydro/Plugins%3A%20New%20Dockable%20Panel)
[Qtバージョン確認](https://forum.qt.io/topic/39615/solved-qt-%E3%81%AE%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E7%A2%BA%E8%AA%8D%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)
[QtWidgetはヒープ上に作る](http://akita-nct.jp/yamamoto/comp/Qt/ver3/basic/Qt.php)

# 目次ページへのリンク
[ROS講座の目次へのリンク](https://qiita.com/srs/items/5f44440afea0eb616b4a)
The answer to past coding examination of RCO with python

https://www.rco.recruit.co.jp/career/engineer/entry/

In fact, I finished this assignment about 2 hours although this examination must require within one and a half hours.

```python
import sys

vs = {}
for i in range(1,len(sys.argv)):
    a = sys.argv[i].split("=")
    vs[a[0]] = a[1]
hist = {}
num=5 # num of cards
ol=[]
for i in range(1,num+1):
    ol.append(i)
a = int(vs["A"])
b = int(vs["B"])
c = int(vs["C"])

def simpleGuess(l,o1,o2):
    if o1 in l:
        l.remove(o1)
    if o2 in l:
        l.remove(o2)
    if len(l)==0:
        return '?' 
    if (max(l) < o1 and max(l) < o2):
        return 'MIN'
    elif (min(l) > o1 and min(l) > o2):
        return 'MAX'
    else:
        b = True
        for e in l:
            if (e > o1 and e < o2) or (e > o2 and e < o1) \
                or (e > o1 and e < o2) or (e > o2 and e < o1):
                continue
            else:
                b = False
                break
        if (b == True):
            return 'MID'
        return '?' 

def guess(nl,nl2):
    for e in nl: 
        tl = list(nl)
        tl.remove(e)
        b = True
        for i in range(len(tl)-1):
            if (abs(tl[i]-tl[i+1])==1):
                continue
            else:
                b = False
                break
        if (b and (e in nl2)):
            nl2.remove(e)

# a
out = ""
ret = simpleGuess(list(ol),b,c)
out = 'A =>'+ret
if (ret!='?'):
    print(out)
    exit()
else:
    out = out + ", "

while(1):
    # b 
    nl2 = list(ol)
    nl = list(ol)
    nl.remove(c)
    guess(nl,nl2)
    ret = simpleGuess(nl2,a,c)
    out = out + 'B =>'+ret
    if (ret!='?'):
        print(out)
        exit()
    else:
        out = out + ", "
    # c 
    nl = list(ol)
    nl2 = list(ol)
    nl.remove(a)
    guess(nl,nl2)
    ret = simpleGuess(nl2,a,b)
    out = out + 'C =>'+ret
    if (ret!='?'):
        print(out)
        exit()
    else:
        out = out + ", "
    # a 
    nl = list(ol)
    nl2 = list(ol)
    nl.remove(b)
    guess(nl,nl2)
    ret = simpleGuess(nl2,b,c)
    out = out + 'A =>'+ret
    if (ret!='?'):
        print(out)
        exit()
    else:
        out = out + ", "
```

```
$ python a.py A=1 B=4 C=5 
A =>MIN
$ python a.py A=1 B=2 C=4
A =>?, B =>MID
$ python a.py A=4 B=3 C=2
A =>?, B =>?, C =>MIN
$ python a.py A=1 B=3 C=2
A =>?, B =>MAX
$ python a.py A=1 B=3 C=5
A =>?, B =>MID
```

BTW, RCO engineers seem to hate PHPers...

# Refs.
* [del in dictionary](https://note.nkmk.me/python-dict-clear-pop-popitem-del/)
* [pass by value](https://qiita.com/hrs1985/items/4e7bba39a35056de4e73)
githubへのpushでPermission denied (publickey)

githubへのpushでPermission denied (publickey)が出た時
検索するといろいろな情報が出てきますが
自分の場合は少し特殊なケースだったのでメモします。
※環境はcentos7.5です。

#鍵に名前を付けたことが原因でした
鍵を生成する際に自分で名前を付けることができます。
（今回自分も始めてやってみました）
こうするとデフォルトで鍵が読み込まれなくなります。
「~/.ssh/id_rsa」、「~/.ssh/id_dsa」、「~/.ssh/identity」
これらの名前以外ではデフォルトで読み込まれなくなります。

#エラー
結果として以下のエラーが出ます。

```

Permission denied (publickey)
```

#対応方法
以下のファイルを作成します

```~/.ssh/config

Host github github.com
  HostName github.com
  IdentityFile ~/.ssh/id_git_example_rsa #ここに自分の鍵のファイル名
  User git
```
自分の場合はこの方法で接続できるようになりました。

#当初検索して出てきた結果
###パーミッションの確認
.ssh # 格納ディレクトリは700
  ┗id_git_rsa # 秘密鍵は600
このように設定していないかを確認します。
こちらも原因になることがあります。

###ssh-agent
ssh-agentというのはlinuxのデーモン（裏側で動いているプログラム）らしい。
こちらの方法でも今回のエラーは解消できた。

```sshagent.shell
eval "$(ssh-agent)" #デーモン起動
ssh-add　~/.ssh/id_git_example_rsa　#鍵を登録する
ssh-add -l #登録された鍵を確認
```

当初このコマンドを起動時に実行する方法を思いつき
bashrc bash_profileなどに登録しようと考えていましたが
おそらくconfigファイルを生成したほうがOSの負荷が少ない感じがします。

#参考ページ
[gitHubでssh接続する手順~公開鍵・秘密鍵の生成から~](https://qiita.com/shizuma/items/2b2f873a0034839e47ce)
こちらのページが見つからなかったら
違う方法で対処していたかもしれません。
非常にわかりやすくまとめてくださっていました。感謝です。
Android知識まとめ（更新中）

#１、通信

    1.1 http
    HttpClient,HttpConnection
    T.B.D
    1.2 Socket
    1.3 Bluetooth
    1.4 NFC
    1.5 Headset
    1.6 USB

#２、データの永久化

    2.1 SqliteDB
    2.2 File
    2.3 sharedPreference

#３、デバッグ

    3.1 adbコマンド
    3.2 logcat
    3.3 hierarchyViewer
    3.4 traceview
    3.5 lint

#４、NDK

    4.1 JNI
    4.2 C/C++

#５、端末機能

    5.1 USB/SD
    5.2 camera
    5.3 audio/video
    5.4 電話
    
#６、センサー

    6.1 加速度
    6.2 方向
    6.3 接近
    6.4 磁力
    6.5 温度
    6.6 重力

#７、3rd party

    7.1 認識
    7.2 地図

#８、サービス
    
    8.1 startService
    8.2 bindserviceとAIDL

#９、アニメション

[Androidのアニメーション(ボール落下)](https://qiita.com/YanHengGo/items/6b883fd57583257ba859)
[Androidのアニメーション(組み合わせ)](https://qiita.com/YanHengGo/items/dadd25f4bde1f40ddb06)
[Androidのアニメーション(画像１つ)](https://qiita.com/YanHengGo/items/ac3e1dd01a71ac10b06a)
[Androidのアニメーション(画像複数)](https://qiita.com/YanHengGo/items/6717e10639dc947e53f3)

#１０、java知識

#１１、UI
Tap音ゲーを作った感想

#このゲームの詳細
以前に書いたqiitaがあるのでそちらをご覧ください！
[Tapを使った新感覚音ゲー]
(https://qiita.com/PAD_meat_ball/items/187da60e1dce96e33beb)

#完成動画
[Tap音ゲー完成動画]
(https://twitter.com/PAD_meat_ball/status/1051290971298660352)

#作ってみて思ったこと
思い立ってからすぐに完成させたくて、休日に頑張ってたのですが、なかなか作業が進まずに1週間くらいかかってしまった。多分これがもう1週間伸びていたらモチベーションはなくなってたと思う・・・！
新しい要素として今まで使ったことのなかったJsonを使い、ファイルを保存したり読み込んだりしてみました！Json自体の使い方は簡単だったのですが、うまく値を持ってこれなかったりして少し苦戦しました。

#改善点
かなりの数のGetCompornentとGameObject.Find()をしてるので、そこがスマートじゃない。絶対にこれはもっといい書き方があると思う・・・。何か知ってたら教えてください！
あとは、選曲画面の実装がかなり力技で、曲が増えるとパネル増やしたりだとかを主導でやらないといけないのがかなりダメな実装だと思う。

全体的にきちんと設計ができてない部分が目立っていた気がするのできちんと設計していきたい。なにかコツとかあるのでしょうか・・・。

#最後に
GitHub張っておきます。
ここ、こうしたほうがいいよ！みたいなのありましたらTwitterで声かけてください！
[GitHub]
(https://github.com/PADmeatball/MusicGameForTap/tree/SceneMove)
[Twitter]
(https://twitter.com/PAD_meat_ball)
javascriptのmatchメソッドで戻り値より任意の数字、英文字を切り出す

javascriptで文字列からmatchメソッドで数字と英文字を抜き出す記述になります。

```javascript
var filename = '20181012MEMBER.csv';
var result = filename.match(/(\d+)([A-Za-z]+)\.csv$/i);

console.log(result);
```

`\d+`は0〜9の数字の繰り返しで、`[A-Za-z]+`は英文字の繰り返しです。
`i`オプションは大文字小文字を区別しません。

## matchメソッドの戻り値

結果はマッチしている場合、以下の配列が返ります。
マッチしていない場合は`null`が返ります。

```
[ '20181012MEMBER.csv',
  '20181012',
  'MEMBER',
  index: 0,
  input: '20181012MEMBER.csv' ]
```
配列キーの0 : マッチした文字列
配列キーの1 : 数字の繰り返し部分
配列キーの2 : 英文字の繰り返し部分
配列キーのindex : マッチした場所(0から数える)
配列キーのinput : インプットした元の文字列


上記のような結果が返りますので、任意の文字列を抜き出したことになります。
数値部分を使うのであれば、
`var date = result[1]`

文字列部分を使うのであれば
`var kind = result[2]`

単にファイル名がマッチするか確認するのであれば
`if (result[0] !== null) `

のように利用可能です。
<br>
Vim を使ったファイル整理術

# はじめに

画像などのファイル名を一括で変更したい、という場面に何度も直面してきました。
便利なソフトウェアや、シェルスクリプト(Windowsだとバッチファイル)を作成しても良いのですが、Vim でもサクッと似たようなことができます。

「Vim はこんな使い方もできる」と知っておくと、意外と重宝するので記事にしました。

# Vim を使ったファイル整理術(基礎)
### ファイル一覧を取得
フォルダ内にある`jpg`ファイルを取得するには、下記のコマンドを使います。
`put`コマンドは空行が発生するので、`global`コマンドで空行を削除します。

```vim
:put! =expand('*.jpg') | g/^$/d 
```

### mv コマンドのひな形を作成
ファイルリストからコマンドのひな形を作成します。

```vim
:%s/\(.*\)$/mv "\1" "PREFIX_\1"/ge
```

### リネーム処理の実行
Windows の場合、エンコードによりファイル名が正しく処理できない場合があります。
fileencoding を `cp932`　に変更してバッチ処理に渡します。

```vim
# Unix
:w !sh

# Windows
:set fenc=cp932
:w !cmd
```

# Vim を使ったファイル整理術(応用)
前述したリネーム処理を応用して、連番をつけたファイル名に一括変換する処理を実行します。

ファイルリストに対して、コマンドのひな形を作成します。
`global`コマンドは重複させられないため、ファイルリスト取得とは別で実行します。

```vim
:g/^/ | s/.*/\="mv \"".submatch(0)."\" PREFIX_".line('.')/ | s/_\(\d\{1}\)$/_0\1/e | s/_\(\d\{2}\)$/_0\1/e | s/_\(\d\{3}\)$/_\1.jpg/e 
```

処理について補足します。

まず `g/^/` で全ての行を対象に処理をおこないます。

`sed` コマンドで、オリジナルファイル名(`submatch(0)`)、変更後のファイル名(`PREFIX_000.jpg`)を置換するコマンドを作成します。
オリジナルファイル名は空白スペースを含む可能性があるため、ダブルクォーテーションで囲みます。
`line('.')` は現在行を取得する vimscript の関数です。

取得した行数は zero supply されてないため、1 ~ 9 行目に対してゼロを補完します。（２個目の `sed`）
３個目の `sed` で 1 ~ 99 行目対して、ゼロを補完しています。
最後の `sed` で拡張子　jpg を補完します。この処理は 1 ~ 999 行目に実行します。

これで `mv` コマンドのひな形が完成したので、`:w !sh` で実行すれば完成です。

# おわりに
世の中には便利なソフトウェアがたくさんあるので、必ずしも Vim でやる必要はないと思います。

一方で、 Vim エディタとしての機能と、シェルを実行する機能を持ち合わせているため、がっつりシェルスクリプトを書くのはしんどいようなケースで役に立つことがあります。

Vim はシンプルでありながら、強力な機能を持っているのでお気に入りのエディタのひとつです。
もし他にもおすすめの Vim 活用方法があれば、シェアしていただけると幸いです。
CSSだけでお絵描き（CodePen）

Qiita初投稿になります。よろしくお願いします。
お手柔らかに...( ;∀;)

## CSSだけでお絵描き
CSSだけで絵を描いている方をちらほら見かけまして
え、おもしろ、私もやりたいと思い初挑戦してみました。
この記事は記録用として書いています。タメになることはないかも...

SCSSで書いてます。

## CodePen
HTMLとかCSSとかJSをウェブ上で書けるサービス。
書いたコードがすぐにプレビュー画面に反映されるのでとても便利です。
https://codepen.io/

CodePenを触ったことがなかったので、今回はこの子を使って挑戦しました。
今後もお世話になりそう。

## ということで、アンパンマン
いざ！お絵描き！といきたいところですが、お題決めにいつも悩みます。
目の前にあんぱんがあったのでアンパンマンにしました。（Chrome推奨です）

<p data-height="660" data-theme-id="0" data-slug-hash="MPvZyN" data-default-tab="result" data-user="deren2525" data-pen-title="CSS Anpanman" class="codepen">See the Pen <a href="https://codepen.io/deren2525/pen/MPvZyN/">CSS Anpanman</a> by Deren (<a href="https://codepen.io/deren2525">@deren2525</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## やってみて、所感
アンパンマンの眉毛とかほっぺの線とか、というかどのパーツもゴリ押し感がすごいです。
曲線の書き方がわからず、JS使えばいけるよって記事があったのですがJSは今回使いたくないという謎のこだわりがありました（）
その結果ゴリ押しな部分がちらほらありますが、そもそもCSSだけで絵を描く時点でゴリ押しになりますよね。

CSSだけで曲線を書ける方法がわからなかったのですが、もし知っている方いらっしゃいましたら教えていただきたいです。
ゴリ押しでもいけますが、まだ楽な方法があるなら楽な方を使いたいですよね。

コードの中身、もっと簡潔にできたところあるんだろうなあと思っています。
どこかでリファクタリングしていきたいです。

またCSSでお絵描き挑戦したいです。
アニメーションを加えたらもっとおもしろそうですね。
APIってなに？

# APIってなに？

サーバーで用意している関数(機能)をhttpで通信して利用する事。
※これしっくりくる

```
図解

・通常のアプリケーションの流れ

webアプリ　　　　　→（リクエスト）　　　　  DB　　（データ）
　　　　　　　　　　　　　　　　　　　←（レスポンス）
自社（アプリ）　　　　　　　　　　　　　　　　　　　　　　　自社（DB）

・APIの場合

webアプリ　　　　　→（リクエスト）　　　　  DB　　（データ）
　　　　　　　　　　　　　　　　　　　←（レスポンス）
外部　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　自社（DB）

例）（openweathermap: ow）

俺ら　　  　→（天気の情報ちょうだい）　  　　　　　　　ow （データを保持、レスポンスを返す）
    　 ←（USの天気と日時情報あげるよ）
                  
https://openweathermap.org/api
```


利用するには決め事を守ってリクエストを出す。
決まり事とはURLとか渡すデータの名前とかデータの形式とか。
レスポンスは大体何かしらのデータ。時々画像も。
データの形式は最近はJSON。一昔前はXMLが主流だった。
ajax形式で利用される事が多い

##　ゴール

api作る　→　通信（curl）
できているか確かめる　→　テスト

# テストを行う

https://qiita.com/akiko-pusu/items/0f15130509a88cf59a7d

# API ドキュメント を残す

決め事を何らかの形で見える化するも

# 必要知識
curl
curl [options] [URL]
はサーバから、もしくはサーバへデータ転送を行うコマンド

curl コマンド

-X POST post

-d （data）


https://qiita.com/yasuhiroki/items/a569d3371a66e365316f


# メモ

apiを作るのはdbでデータの受け渡しだけをさせることか？

下記とかは、redirect でビューなどの連携がない
```
 def index
    @users = User.all

    render json: @users
  end
```

## 参考記事
1
https://qiita.com/c5meru/items/1c921676de8a5a038f70

2
https://qiita.com/yyh-gl/items/30bd91c2b33fdfbe49b5

3
https://railsguides.jp/api_app.html
エンジニア　生産的な勉強方法

## 生産的な勉強法

###  人が理解（使いこなせる）できるようにステップ

情報に触れる（全体像を掴む）　→　抽象化（共通パターンを見つける）　→　検証（実践）

### 例

非同期通信でメッセージを送りたい

```
非同期でメッセージを送るとは？

全体像
jqualyを使う　id,class指定で、要素を操作する

抽象化（ロジック）
jqualyを使う　→　要素を指定する　　→　　　　操作する
　　　　　　　　　　　　　　　　　　　　　　　　　　（class,idを利用して）


必要な知識
jqualy rails html css 

```

## 遅延評価

上記の人の理解の仕方に繋がるが、
何かを達成するためには、複数の細かな要素の上になりたつ。

しかし、人は効率的にその要素を組み立てられない。
日々要素を集め、気づいたら組み立てられる。
これが、遅延評価


## 記憶
復習の期間を、1ヶ月　、　6ヶ月と期間を変更しても、成績は変わらない

# 本の読み方
→　通読　→　単語、わからないことを全て書き出す→　調べる　→　ある程度ロジックを組む→　読む

# 型をつける
→　パターンに名前をつけうる　→　とってをつける
インストールパス不一致により、JP1/AJS3のEAPジョブが異常終了(KAVU4550-W)する

#目次
- 概要「JP1/AJS3のEAPジョブが異常終了(KAVU4550-W)する」
- 原因「作業環境と実行環境のJP1インストールパスが異なる」
- 調査方法「ajsprintコマンドを利用してパラメータを確認する」
- 対応「1.パラメータ修正　2.インストールパス修正」

##■概要
JP1/AJS3のEAP(Enterprise Applications)を利用してSAPでジョブをバックグラウンド実行させようとすると、ジョブが異常終了する。

[エラーメッセージ]
KAVU4550-W エージェントに実行ファイル(C:\Program Files\Hitachi\JP1AMR3\Program\jr3bjsub.exe)がありません

##■原因
作業環境のJP1(JP1/AJS3 View)インストールパスが、実行環境のJP1(JP1/AJS3 Manager)インストールパスと異なっている。
　作業環境："C:\Program Files\Hitachi\"
　実行環境："C:\Program Files(x86)\Hitachi\"

これにより、作成したSAPジョブのパラメータが、以下のようになった。
sc="C:\Program Files\Hitachi\JP1AMR3\Program\jr3bjsub.exe"

実際にはjr3bjsub.exe(バックグラウンドジョブを実行させるexe）は"Program Files (x86)"内に保存されているため、「実行ファイルが存在しない」エラーが発生する。


##■調査方法
ajsprintコマンドでジョブ定義を出力し、"sc="から始まるパラメータを確認する。
[コマンド]
ajsprint -a -F [スケジューラーサービス名] [ユニット名]
例：ajsprint -a -F AJSROOT1 /jobrgroup/jobnet

##■対応
1. 誤りのあるジョブのパラメータを修正する
2. 作業環境のインストールパスを実行環境に合わせる(再インストール)
Rustを始めよう

# この記事について
プログラミング言語Rustを紹介します。
この記事ではRustの以下のトピックについてまとめます。
1. Rustの歴史
2. Linux環境でのRustのインストール方法
3. Hello Worldの実行方法

# Rustの歴史
Rustは2006年からMozillaのGraydon Hoareによって開発が始まりました。はじめは個人のプロジェクトだったですが、より安定したウェブブラウザを開発するための新しいシステムプログラミング言語が必要になったMozillaの目に留まり、2009年からMozillaの公式なプロジェクトになりました。システムプログラミング言語とは、ハードウェアを直接制御するソフトウェアや他のプログラムがその上で動作するプラットフォームのソフトウェアを書くためのプログラミング言語です。
その後、2015年にVersion 1.0がリリースされ、今日に至るまで破壊的な仕様変更を繰り返しながら改良が続けらています。現在（2018年10月）最新のリリースは1.29.2です。

Rustはリソースを最小化する一方で、高い実行速度と安全性を実現する言語として注目されています。ただし、バージョンごとに破壊的な仕様変更を繰り返しているという問題点があります。この点に関しては、まだ若い言語なので大目に見ましょう。

# Linux環境でのRustのインストール方法
Rustをインストールするのにコマンドラインツールのrustupをインストールする必要があります。rustupはcurlコマンドでダウンロードできます。

```
curl https://sh.rustup.rs -sSf | sh
```

# Hello Worldの実行
以下のコードをテキストエディタでファイルに書き込み、main.rsとして保存しましょう。

```rust:main.rs
fn main() {
   println!("Hello World!!");
}
```

main.rsをコンパイルするには以下のコマンドを実行します。

```
rustc main.rs
```

生成された実行ファイルmainは、以下のコマンドで実行します。

```
./main
```
# 参考文献
* [The rust programming language](https://doc.rust-lang.org/book/2018-edition/ch01-02-hello-world.html)
* [The Histroy of Rust](https://www.youtube.com/watch?v=79PSagCD_AY)
VSCodeプラグイン「LaTeX Workshop」の設定

LaTeX Workshopで日本語を書くための設定です．
（ドキュメント：https://marketplace.visualstudio.com/items?itemName=James-Yu.latex-workshop）

何も設定せずに使うと，

```
vscode LaTeX Error: This file needs format `pLaTeX2e' but this is `LaTeX2e'.
```
というエラーが出てしまうので，設定ファイルを編集しましょう．

ドキュメントを読むと，デフォルトではコンパイルにlatexmkが使われるとのことです．
日本語に対応するために，タイプセットに使うツールをptex2pdfに設定します．
（ターミナルで試すとlatexmkでも日本語で書かれたtexファイルをコンパイルしてくれるのですが，VSCode経由だとなぜかダメに．．．）

公式ドキュメントに従って，settings.jsonに`latex-workshop.latex.recipes` `latex-workshop.latex.tools`を記述していきます．

```json
    "latex-workshop.latex.recipes": [{
        "name": "ptex2pdf",
        "tools": [
          "ptex2pdf"
        ] 
    }],
    "latex-workshop.latex.tools": [{
        "name": "ptex2pdf",
        "command": "ptex2pdf",
        "args": [
            "-l",
            "-ot",
            "-kanji=utf8 -synctex=1",
            "%DOC%"
        ]
    }],
```

これでOK！



＊こちらの方の記事を参考にしました．
→http://elecho.hatenablog.com/entry/2017/04/27/175500
FetchSFTP vs GetSFTP

# Question ： FetchSFTP vs GetSFTP
NiFiの中、FTP/SFTPを処理するには、FetchSFTP と GetSFTP療法ある。

FetchSFTP vs GetSFTPで、どれが良いですか？

# Reference
https://community.hortonworks.com/questions/97338/listsftpfetchftp-vs-getsftp.html

# Answer
FetchFTPはクラスタリングしたNiFiに相応しい。

```
FetchSFTP is cluster friendly where as GetSFTP is not, meaning you can have multiple nodes in a cluster pulling data from the same source, but with GetSFTP, you cannot.

If you have a NiFi cluster and you are using the GetSFTP processor, you would have to configure that processor to run on the primary node only so the other nodes in the cluster wouldn't try to pull the same files. This will result in the files only being pulled by a single node in a cluster instead of being pulled by all nodes, which is what FetchSFTP would do.
```

```
So, using ListSFTP retains state and will only add new files to the list when it is run, so the FetchSFTP will only pull each file once, where with GetSFTP, you would pull the same files over and over again.
```

一つNiFiクラスタの中、同時に複数NiFi NodeでFTPからデータ取得したい場合はGetFTP/GetSFTPを使うべき。

ListSFTP/ListFTPは状態ほ保存し、新しいファイルのみ取得してくる。
代わりにGetFTPなら同じファイルを何回も取得してくる。（そのため、GetFTP実行後、ファイルをリモートFTPサーバーから自動的削除している）
create-nuxt-appで作ったプロジェクトが最初からフォーマットエラーを抱えているときの対応

Nuxt.jsのプロジェクトを作成するとき、`create-nuxt-app`という非常に便利なコマンドがあります。これを使用してプロジェクトを作成しビルドしたらエラーが発生。初めて触ったときにちょっと戸惑ってしまったので、対応方法を記載します。

# この記事では扱わないこと

- プロジェクト作成するためのコマンドのインストールなどの前準備。
  - 参考: [Nuxt.js はじめました。プロジェクト作成で 5 つの方法を試した。](https://qiita.com/high-u/items/1d2e91e97495ac90d10c)

# プロジェクトを作成

さて、プロジェクトを作成します。

<img width="972" alt="1. sasakiryousuke@sasaki-ryouhiroshi-no-imac: ~:Develop:sandbox (node) 2018-10-13 13-29-33.png" src="https://qiita-image-store.s3.amazonaws.com/0/37036/5722bd97-dc47-4c3d-951a-f98c04f32c57.png">

このときに `eslint` と `prettier` はyesを選択。UI frameworkには `vuetify` を選択。

# 起動する

`$ yarn run dev` でサーバーを立ち上げます。

<img width="1330" alt="1. sasakiryousuke@sasaki-ryouhiroshi-no-imac: ~:Develop:sandbox:test (node) 2018-10-14 09-20-26.png" src="https://qiita-image-store.s3.amazonaws.com/0/37036/361e2031-541f-92de-8a7d-79f25ee4b4f9.png">

おや…エラーが…。

ブラウザでページを開いたときも出ています。

<img width="1533" alt="test 2018-10-14 09-23-55.png" src="https://qiita-image-store.s3.amazonaws.com/0/37036/19ddb4d0-5db8-6b9d-7338-06f9841b5f87.png">

# 原因と対応方法

エラーの内容をよく見てみると

`Module Error (from ./node_modules/eslint-loader/index.js)` となっていて、赤字になっている部分を見ると `prettier/prettier` で検知した様子。どうやら `eslint` と `prettier` の合わせ技でエラーが発生しているようだということがわかります。

さらに下の方を見ると

17 errors and 0 warnings potentially fixable with the `--fix` option.

と出ています。ここから、デフォルトで作成されたソースのフォーマットが `prettier` のルールに反している、ということがわかります。

そこで、`--fix` オプションをつけた下記コマンドを打ってやることで、エラーが解消されることになります。

```
$ node_modules/.bin/eslint --fix --ext .js,.vue --ignore-path .gitignore .
```

このコマンドには `prettier` というのはまったく登場しませんが、プロジェクト作成時点で `eslint` のプラグインとして、`prettier` が設定されているので、上記コマンドで整形が可能になります。設定はプロジェクトルート直下にある `.eslintrc.js` に記載がされています。

```.eslintrc.js
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    'plugin:vue/recommended',
    'plugin:prettier/recommended'
  ],
  // required to lint *.vue files
  plugins: [
    'vue',
    'prettier' // <- ここ
  ],
  // add your custom rules here
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}
```

# 最後に

初めてNuxt.jsを触ってみていきなりエラーが出てしまいちょっと焦りましたが、エラー内容をよく読めばすぐ対処できる内容でした。もし同じ挙動に出会って手を止めてしまった方がいましたら、参考にしてもらえると嬉しいです。
AWS セキュリティグループとネットワークACLの違い

## はじめに
AWS VPC(仮想プライベートクラウド)では、次の3つの機能を使ってセキュリティを強化するが、セキュリティグループとネットワーク ACLの違いがわかりづらいため、違いについてまとめました。

- セキュリティグループ 
- ネットワークアクセスコントロールリスト (ACL)
- フローフラグ

## セキュリティグループ
ステートフルなファイアウォールのこと。デフォルトで許可されているのは同じセキュリティグループ内通信のみ（外からの通信は禁止）。そのため例えば、WEB公開する場合はインターネット(0.0.0.0/0)から80ポートを許可する。

## ネットワーク ACL
ステートレスなファイアウォールのこと。サブネット単位で適用され、デフォルトでは全ての送信元IPを許可する。
※ **前後の状態に依存しないのがステートレス(stateless)で、前後の状態を保持しているのがステートフル(stateful)という意味**

## 比較
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184983/531cef00-b743-52e8-2bc9-aac0d69c3cb1.png)

|セキュリティグループ|ネットワーク ACL|
|:------------------------------------------|:-------------|
|EC2インスタンスレベルで効果 <br>|サブネットレベルで効果|
|AllowのみをIN・OUTで指定可能(ホワイトリスト型)|Allow/DenyをIN・OUTで指定可能(ブラックリスト型)|
|ステートフルなので、戻りのトラフィックを考慮しなくてよい|ステートレスなので、戻りのトラフィックも明示的に許可設定する|
|全てのルールを適用|番号の順序通りに適用|
|インスタンス管理者がセキュリティグループを適用すればその管理下になる|サブネット内のすべてのインスタンスがACLの管理下に入る|

## 参考
[AWSユーザガイド セキュリティ](https://docs.aws.amazon.com/ja_jp/vpc/latest/userguide/VPC_Security.html)
【python】フォルダにあるcsvファイルを読み込んで処理をする

フォルダの中にあるファイル一式に対し、処理をします。

./csv　フォルダの中の　csvファイル一式に対し、ある処理をして保存するというケースを想定しています。

```ruby:qiita.rb
import os
import numpy as np

#----------- path にあるファイルの一覧を配列形式で返す

path = "./csv"

files = os.listdir(path) # ディレクトリにあるファイル一覧を取得
#print(type(files))  # <class 'list'> タイプを確認
#print(files)        # ファイル一覧を表示

#-------- for文を使って、ひとつずつファイルを処理する
# i = 0  （修正）初期化は不要でした

#for i in range(len(files)):
#    print(files[i]) #処理したファイルを確認する　(修正）直接要素を回す方法に変更

for filename in files:
    print(filename) #処理したファイルを確認する

    # ファイル名の設定
    #fullpath = path + "/" + files[i] 　(修正）直接要素を回す方法に変更
    #savefilename = "s_" + files[i] 　  (修正）直接要素を回す方法に変更
    fullpath = path + "/" + filename 
    savefilename = "s_" + filename
    savefilefullpath = path + "/" + savefilename

    #print(fullpath)
    #print(savefilename)
    #print(savefilefullpath)

    #----CSVを読み込んで配列形式に

    f = np.genfromtxt(fullpath, delimiter=",", dtype='float')
    #   ヘッダ行がある場合  skip_header=1 を追加。 1はヘッダの行数

    #---スライシング
    F = f[:5]
    np.savetxt(savefilefullpath, F, fmt='%.3f', delimiter=",")


```
[UnityEditor拡張]Scene上のText要素で使用されている文字を集めるやつを作った

#　背景
TextMeshProで日本語を使用するときの対応策として[UnityのText Mesh Proでほぼ全ての日本語を表示させる](https://qiita.com/kgsi/items/08a1c78b3bee71136156)のようにほぼ全ての文字を含めるというやり方があります。

しかし、TextMeshProの利点として個人的に思うことはフォントファイルを配布に含めないことで容量を圧縮できる点にあるのではないかと考えます。
実際、日本語をほぼ網羅した.assetファイルとフォントファイルのサイズを比較すると
![2018-10-14 07_00_09-新しいフォルダー.png](https://qiita-image-store.s3.amazonaws.com/0/150338/46f5a44b-a6b2-26bf-46d3-53090e12fd24.png)

* ghatee.ttf ->元のフォントファイル
* test1.asset -> asciiのみ
* test2.asset -> 日本語大体網羅
* 
このようにかなり容量を消費します(サイズはFontAssetCreatorの設定次第で上下しますが）

こうなるとTextMeshProを使用する利点がないかもしれないので、できるだけassetファイルに含める文字コードを減らすようにしたいです。

# 目的
できるだけassetファイルに含める文字を減らすため、**Scene上に存在する**Text要素を集めて使用されてる文字のみ
を生成するようにするEditor拡張を作る(ました）。

#開発環境
Unity 2018.1.8f.1, .NET 4.x Equivalent , TextMeshPro
#仕様
Scene上に存在する下記のコンポーネントのText情報を集めて使用されている文字コードを一覧を出力します

![2018-10-14 07_07_44-Unity 2018.1.8f1 Personal (64bit) - Node2GameObject.unity - EscapeRoomTemplate -.png](https://qiita-image-store.s3.amazonaws.com/0/150338/308a34a0-7129-68c3-17e7-dd554f66b058.png)

* UnityEngine.UI.Text
* UnityEngine.TextMesh
* TMPro.TextMeshPro
* TMPro.TextMeshProUGUI

! TextMeshProも含めているでデフォルトのUnityProjectだと動きません。

Scene上のComponentはGameObjectがアクティブ/非アクティブ問わず収集することができます。

* **Print Text** : Consoleに収集したテキストを表示します
* **Load AllScene**: BuildSettingに登録されているScene全てから収集します 
* **Append Chars**: 追加したいテキストを設定できます。

Load AllSceneにチェックが入っていない場合は現在開いているシーンからテキストを取得します

#使い方
![textCollector.gif](https://qiita-image-store.s3.amazonaws.com/0/150338/0e377d8a-ece9-51c8-3ed3-ee2853a31921.gif)


#インストール
ここに置いてありますのでよしなに
[https://github.com/OhkuboSGMS/TextCollector](https://github.com/OhkuboSGMS/TextCollector)

#感想
自分が作成しているゲームは,Scene上にあるGameObjectで静的に完結しているので問題がありませんが、動的にネットから取得した情報をテキストに表示したりする場合はこの方法は使えないかもしれませんね...

何か不具合などありましたらIssueかQiitaの方に書いてくれると嬉しいです.
【初心者】とりあえずflutterでHelloWorld出したい！+環境構築もあるよ！

# はじめに
これはFlutterでHello Worldを出したい人向けにかいてます。

Flutterというのは、Googleによるクロスモバイル用のフレームワークです。
クロスプラットフォームなので、Android,iOS,Webのどれでも動作します。

GoogleI/Oでも結構取り上げられ、熱い分野です。
# 環境構築
[Get Started](https://flutter.io/setup-windows/)
Flutterについては、公式ドキュメントが充実しているので、
それをよみつつ作業するのが一番早道だとは思いますが、
以下に簡単な流れだけ書いときます。

##1.各種インストール
###1.0 システム要件確認
Gitがはいっているか、コマンド叩けるかどうか。

###1.1 SDK入手
[Flutter SDK Archive](https://flutter.io/sdk-archive/#windows)
上記リンクからFlutterSDKを入手。
解凍してパスを通す。パスが通ったら(=flutterコマンドがうてるなら)

```
$ Run flutter doctor
```
コマンドで、flutter doctorを起動する。
これが優れもので、必要な起動条件をコマンドラインベースで教えてくれる。

###1.2 AndroidStudio入手
入っているならば次に進む。
VisualStudio/IIJでも動くけども、公式ではandroidStudioにてメイン説明されてる。
(必要ならば)エミュレータもいれる。

##2 AndroidStudioに設定加える（=プラグイン入れる）
入れるものは[Flutter][Dart]のふたつのプラグイン。
File>Settings>Plugins　でプラグイン画面にいき、
Browse repositories…　で[Flutter][Dart]を探す。

ここまでの設定がきちんとできれば、プロジェクトが作れる状態になる。

#3 Hello Worldをかこう。
###3.1 プロジェクト作成

File > New Flutter Project とかで、新規プロジェクトを立ち上げる。
テンプレート選択は、Flutter application　にしとく。
プロジェクト名と組織名が聞かれるので、適当に埋める。
Finish ボタンを押すと、自動的にファイルが生成される。
すこし待つと、プロジェクトおよびファイルできる。

###3.2 main.dartを書き換える。
プロジェクトのメインファイルは[main.dart]で、lib/maindart に存在する。
それを書き換えていろいろ作っていく。
以下が、HelloWorldのプログラムとなる。

```dart:main.dart
import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Hello Wolrd',
      home: new Scaffold(
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}
```
以上をRun > main.dartすると起動する。
### 3.3 Hello Flutter World!
![タイトルなし.png](https://qiita-image-store.s3.amazonaws.com/0/190712/b57b3192-e012-0517-e56e-eee8dff94de4.png)

###3.4簡単に説明
main.dart を起動すると、main()がよばれて、
MyAppインスタンスをrunApp()にわたす。

全体のViewをStatelessWidgetが司っていて，Viewをbuildしている。
MaterialAppがtitlebodyなどのプロパティを持っていて、
それぞれに任意のview widgetを渡すことで画面を描画している。

#感想
やってて楽しい。
英語読めればもっと楽しい。
Javaライク？
PowerShellでPythonのvirtualenvのactivateを実行できるようにする（更にVisualStudioCodeのターミナルをPowerShellに変更する）

Windows[^1]のPowerShellは、デフォルトの設定では全てのスクリプトが実行禁止になっているので、「.ps1」のスクリプトファイルを実行できません。そのためPythonの仮想環境に入るためのスクリプトactivate.ps1を実行できません。

ここでは、実行ポリシー（Execution Policy）の設定を確認し、「.ps1」のスクリプトを実行できるよう実行ポリシーを変更する手順を記載します。

## PowerShellの実行ポリシーを確認する

環境

* Windows 7 (SP1) Ultima x64

まずはPowerShellを起動し、現在の実行ポリシーを確認するため、以下のコマンドを実行します。

```powershell
Get-ExecutionPolicy
```

実行すると、デフォルトの実行ポリシーが表示されます。
このとき表示されるRestrictedは、全てのスクリプトの実行禁止を意味します。

## PowerShellの実行ポリシーの変更

実行ポリシーはRemoteSignedが一番使い勝手がよいらしいので、次の手順で変更します。

>RemoteSignedは、ローカルに保存されているスクリプトは実行可能で、インターネットからダウンロードしたスクリプト（非ローカルのスクリプト）は、署名されているもののみが実行可能。

変更するには、PowerShellを管理者権限で起動し、Set-ExecutionPolicyコマンドで次のように実行ポリシーを変更します。

```powershell
Set-ExecutionPolicy RemoteSigned
```

再度、Get-ExecutionPolicyを実行することで、実行ポリシーがRemoteSignedに変更されることを確認できます。

## VisualStudioCodeでターミナルをPowerShellに設定する場合

VisualStudioCodeのメニューのファイル>基本設定>設定を開き、ユーザー設定タブの、機能>設定で、terminal.integrated.shell.windowsの項目を探し、値を次のように設定。

```text
C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe
```

Ctrl+@でターミナルを起動し新しいターミナルを開くと、新規のターミナルがPowerShellになることを確認できます。

>因みに、コマンドプロンプトに戻す場合は、値を次のように設定します。
>>C:\Windows\system32\cmd.exe

余談ですが、Gitをインストールしている場合はGit-bashが使えるので、Git-bashのbash.exeまでのフルパスを指定することにより、ターミナルでbashを使用することができます。これで多くのシェルコマンドがターミナルで使えることになり、Unix/Linuxユーザーには重宝しますね！
>CドライブのProgram FilesにGitをインストールしている場合
>>C:\Program Files\Git\bin\bash.exe

 * **VSCodeにGit Bashを導入する手順は次のリンクをご覧ください**  
[https://qiita.com/psychoroid/items/63cc0ece70fce0f0cfc0](https://qiita.com/psychoroid/items/63cc0ece70fce0f0cfc0)

## 参考にしたサイト

* [WindowsでPowerShellスクリプトの実行セキュリティポリシーを変更する](http://www.atmarkit.co.jp/ait/articles/0805/16/news139.html)

* [Git Bashって使ってる？Windowsで動く意外にすごい便利ツール](https://www.sejuku.net/blog/72673)

* [Visual Studio CodeのターミナルをGit-bashに変更する方法](http://suzaku-tec.hatenadiary.jp/entry/2017/07/16/093636)

[^1]: Windows Server 2012 R2は除きます。
サクッとgit init

## 概要
オリジナルgit initでサクッと新規リポジトリ作成。

## 準備

- 任意な場所に`bin`フォルダ作成
- .bashrcに`export PATH=$HOME/FOLDERNAME/bin:$PATH`を追加
- `git-init`というファイル名に下記コードをペースト
- `$ source ~/.bashrc`でリロード
- `$ git-init`を実行

```shell
#!/bin/bash

# Git init local & remote repository
# --------------------------------------- / git-init

# Local repository create.
git init

# Enter Git user name and e-mail.
echo "===== Gitユーザー名を入力してください:"
read gitUser
echo "===== Gitメールアドレスを入力してください:"
read gitMail

# Set Git user name and e-mail add local config.
git config --local user.name "$gitUser"
git config --local user.email "$gitMail"
git config --local --list
echo "===== Local gitconfigのユーザー情報を更新しました。"

# Empty commit.
git commit --allow-empty -m "First commit."
git log

# Enter use service name.
echo " "
echo "===== 作成先の名称を入力してください: [github or bitbucket]"
read gitService

# Enter repository name.
echo "===== 作成するリモートリポジトリ名を入力してください:"
read repositoryName

# Copy repository name.
echo "$repositoryName" | pbcopy
echo ""
echo "===== リポジトリ名["$repositoryName"]をクリップボードへコピーしました。"

# Move git service websites.
echo "===== "$gitService"へ移動します。"
if [[ $gitService = github ]]; then
	open https://github.com
	read -p "===== "$gitService"でリモートリポジトリの作成が完了したら [RETURキー] =>"
	git remote add origin git@github.com:"$gitUser"/"$repositoryName".git
elif [[ $gitService = bitbucket ]]; then
	open https://bitbucket.org
	read -p "===== "$gitService"でリモートリポジトリの作成が完了したら [RETURキー] =>"
	git remote add origin git@bitbucket.org:"$gitUser"/"$repositoryName".git
else
	echo ""
	echo "===== 終了します...."
fi

# Push to remote repository.
git push -u origin master
```
Ionic4(stencil)で爆速でLighthouse100点のサイトを立ち上げる

どうも@scrpgilです。Ionicをよく使います。今回、爆速でLighthouseのパフォーマンス100点のサイトを立ち上げる方法がわかったので書いておきます。


# 手順
## 1.プロジェクトを作成する
以下のコマンドを叩きましょう。数秒でプロジェクトが生成されます。

```
npx create-stencil
```

Starterは「ionic-pwa」を選択しましょう。プロジェクト名は任意。Confirmは「y」を選択しましょう。

```
Pick a starter : ionic-pwa
Project name : stencil-ionic-pwa-demo
Confrim(y/n) : y
```

## 2.GitHubにpushする
作成したプロジェクトをGitHubにPushしましょう。

```
git init 
git add .
git commit -m "first commit"
git remote add origin https://github.com/<リポジトリのパス>
git push origin master
```

## 3.Netlifyにdeployする
プロジェクトをNetlifyにdeployしましょう。GitHubと連携しているので先程のpushしたリポジトリを選択すればOKです。
<img width="1024" alt="Screen Shot 2018-10-14 at 2.17.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/165335/780d5aeb-14e9-6536-682d-c854f0d4fb8b.png">

デプロイ設定ができますので、Build commandを「npm run build」にPublish directoryを「www」に設定しましょう。
<img width="742" alt="Screen Shot 2018-10-14 at 2.17.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/165335/51a90044-7c21-53f6-d022-818a0cd8b506.png">

## 4.サイトにアクセスしてパフォーマンス計測しましょう。
しばらくするとプロジェクトにアクセスできるのでLighthouseでパフォーマンスを計測しましょう。お約束として測定中は何もしちゃいけません。恐らく100点になるはずです。
<img width="896" alt="Screen Shot 2018-10-14 at 1.59.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/165335/b4b5d653-e39f-c5e6-dfe3-39e598ac4cf3.png">

![image (1).png](https://qiita-image-store.s3.amazonaws.com/0/165335/4c0fc2a5-ac04-eae6-0b9a-9ae199498613.png)

※PWAとAccessibiltyも100点にしてできたら記事更新します。


ちなみに今回作成したサイトは以下。
https://stencil-ionic-pwa-demo.netlify.com/



# 補足
## これは何か？
今回作成したサイトはStencilを用いて作成されています。StencilはIonic 4を作成するためにIonic-teamが作成したWebComponentを作るためのライブラリです。

https://stenciljs.com/docs/getting-started/
<img width="891" alt="Screen Shot 2018-10-14 at 2.09.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/165335/3830d511-9340-50a7-c4db-253de0271e1f.png">

ざっくり、jsx+TypeScriptでWebComponentが書けるライブラリって認識です。公式ドキュメントは20〜30分あれば読み終わるぐらい、仕様がコンパクトです。

## Ionic4（現行バージョンは3）
一部界隈ではIonicはパフォーマンスが悪いとか言われてるそうですが、Ionic4でそこらへんかなり改善されそうです

現在、Ionic4はBeta版なのでまだ実践投入は早いかもですが、リリースがとても楽しみなので今から触っておこうとおもいます。おわり。
JavaScriptの配列（Array）について

JavaScriptの配列について調べたのでインプットの質を上げるための備忘録として。

##配列とは
* 複数の値をもつ構造
* オブジェクト型

##今回記述する配列のメソッド

* map
* filter
* forEach

##配列のプロパティ
* length


##mapメソッド

与えられた関数を配列の**すべての要素に対して呼び出し、その結果をまとめた新しい配列として**返します 。


```javascript
const todos = [
    {
      title: "ご飯を食べる",
      where: "レストラン",
    },
    {
      title: "勉強をする",
      where:"家",
    },
    {
      title: "寝る",
      where: "ベッド",
    },
  ];

  const whereTodo = todos.map(x => x.where);
  console.log(whereTodo);
```
**出力**

```
["レストラン","家","ベッド"]
```

それぞれのwhere要素を取り出し新しく配列を作りました。

##filterメソッド
全ての配列の要素から**関数の条件に一致する配列の要素**を見つけ出し、新しい配列を作ります。

```javascript
const todos = [
    {
      title: "ご飯を食べる",
      where: "レストラン",
    },
    {
      title: "勉強をする",
      where:"家",
    },
    {
      title: "寝る",
      where: "ベッド",
    },
  ];

const whereTodo = todos.filter(x => x.where === 'ベッド');
console.log(whereTodo);
```
**出力**

```
↓↓↓↓↓↓↓ あなたの記事の内容
[{ title: "寝る", where: "ベッド" }]
───────
[{title: "寝る", where: "ベッド"}]
↑↑↑↑↑↑↑ 編集リクエストの内容
```

指定した条件に一致する要素を見つけ出し、新しく配列を作りました。


##lengthプロパティ
配列の要素数をカウントして出力します。

```javascript
const todos = [
    {
      title: "ご飯を食べる",
      where: "レストラン",
    },
    {
      title: "勉強をする",
      where:"家",
    },
    {
      title: "寝る",
      where: "ベッド",
    },
  ];


const whereTodo = todos.length;
console.log(whereTodo);
```
**出力**

```
3
```
要素数を出力してくれました。

##forEach
配列の値1つずつに対してコールバック関数の処理を実行します。
コールバック関数はいくつか引数を受けとることが可能でコールバック関数により、繰り返し処理を実現しています。
mapメソッドとは違い、**返り値はありません。**

```javascript
const todos = [
    {
      title: "ご飯を食べる",
      where: "レストラン",
    },
    {
      title: "勉強をする",
      where:"家",
    },
    {
      title: "寝る",
      where: "ベッド",
    },
  ];

 todos.forEach((whereTodo) => {
    console.log(whereTodo.where);
  });
```

**出力**

```
レストラン
家
ベッド
```



オブジェクトのwhereを直接指定したので、whereの値が1つずつ取得できました。
laradock環境でmysqlが文字化けしたら

### 参考にしたリンク
https://yudai-stadium.com/blog/laravel-mojibake/

### やったこと

#### config/database.phpの修正

```
'mysql' => [
             'driver' => 'mysql',
             'host' => env('DB_HOST', '127.0.0.1'),
             'port' => env('DB_PORT', '3306'),
             'database' => env('DB_DATABASE', 'forge'),
             'username' => env('DB_USERNAME', 'forge'),
             'password' => env('DB_PASSWORD', ''),
             'unix_socket' => env('DB_SOCKET', ''),
              //ここの下二つを下記のように変更
             'charset' => 'utf8',
             'collation' => 'utf8_general_ci',
             'prefix' => '',
             'strict' => true,
             'engine' => null,
         ],
```

#### laradock/mysql/my.cnfの修正

```
 # The MySQL  Client configuration file.
 #
 # For explanations see
 # http://dev.mysql.com/doc/mysql/en/server-system-variables.html
 
 [mysql]
 
 [mysqld]
 sql-mode="STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION"
 character-set-server=utf8
 
-------ここから下を追記-------
 [client]
 default-character-set=utf8 #clientセクションを追加
```
MacでフォーマットしたUSBがubuntuPCでマウントできない

# 現象
USBメモリを、MacでMS-DOS(FAT)形式でフォーマットし、データを保存。
そのUSBをubuntuPCに接続しmountしようとすると、失敗した。

# 対応
MBR方式を設定する必要があるが、ディスクユーティリティからはできなくなってしまったようだ。
下記を参考に、terminalからフォーマットした上で、データを保存し、ubuntuPCでmountしたところ、
うまくいった。

https://discussionsjapan.apple.com/thread/110198723
【初心者向け】シェルスクリプトの作り方

この記事は簡単なシェルスクリプトの作成方法から、実行するところまでやさしく解説する
シェルスクリプト入門です。

動作環境 Linux CentOS 7 / bash 4.2.46

#シェルスクリプトについて
- 実行したい一連のコマンドを、あらかじめ記述しておくファイルのこと
- 実行したい処理をシェルスクリプトで書くことによって、作業の自動化が可能になる

# 簡単なシェルスクリプトの作成
Hello world を表示する、簡単なシェルスクリプトを作ってみましょう。



**①作成する前に何のシェルでログイン利用しているか、コマンドラインでチェックしてみます。**

```shell-session:
$echo $SHELL
/bin/bash
```
- `$SHELL`はシェル変数と呼び、ログインシェルのパスが格納されています。



**②コマンドラインにて`hello.sh`を作成します。**

```shell-session:
$vi ./hello.sh
```

```bash:hello.sh
#!/bin/bash
echo "Hello world！"
```
- シェルスクリプトの拡張子は慣習で`.sh`とします。
- `#!bin/bash`はshebang(シェバン)といい、bashで動作しますよという宣言です。
標準シェルの`sh`の場合には`#!/bin/sh`とします。

# シェルスクリプトの実行

シェルスクリプトの実行方法を3通り紹介します。

#### ①bashの引数として実行
こちらは実行権限がなくても実行可能です。
※ファイル名のみの指定で実行できるのはカレントディレクトリにある場合のみ
ファイルが別のディレクトリにある場合は、絶対パスもしくは相対パスで指定

```shell-session:
$bash hello.sh
Hello world！
```

#### ②ファイル名を指定して実行
実行する前に、実行権限をつける必要があります。

```shell-session:
$chmod 755 ./hello.sh
```

または

```shell-session:
$chmod +x ./hello.sh
```

これで実行権限が付与されたので、実行可能です。

```shell-session:
$./hello.sh
Hello world！
```
- `./`でカレントディレクトリを指定する必要があります。

#### ③コマンドとして実行する方法
最後にシェルスクリプトを自作コマンドとして実行する方法を紹介します。
PATHを通すことによってコマンドとして実行できるのでおすすめです。

条件
1.実行権限があること
2.PATHが通っていること

まずは実行権限を付与

```shell-session:
$chmod 755 ./hello.sh
```

または

```shell-session:
$chmod +x ./hello.sh
```

次に自分のシェルスクリプト置き場を作成し、そこに先ほどの`hello.sh`を移動させます。
自分は`shellscript`というディレクトリ名で、置き場所を作成しました。

```shell-session:
$mkdir ~/shellscript
$mv ./hello.sh ~/shellscript
```


最後に`.bash_profile`を編集し、`/shellscript`へのPATHを通します。

```shell-session:
$vi  ~/.bash_profile
```

```bash:.bash_profile
PATH=$PATH:~/shellscript
export PATH
```

```shell-session:
$source ~/.bash_profile
```

これで`hello.sh`をコマンドとして実行することが可能になりました！
どこのディレクトリからでも実行可能です！

```shell-session:
$cd ~ 
$hello.sh
Hello world！
```
MYSQL バッククオートについて

SQL文でバッククオートを使っているのを今まで見たことがなく、なるほどー知らなかったなと思ったのでメモ（見たことあるかもしれないけど忘れた(^^)





#バッククオートとは
バッククオートとは、『`』という記号のことです。
MacのUSキーで言う所の左上の記号になります。
また、これと似ているのが『'』よく使われるシングルクオートです。
<br>






#SQLにてどのように使うのか？

・バッククオートはテーブル名やフィールド名
・シングルクオートは値や文字列
と使い分けるようです。

例

```
CREATE DATABASE `dbname` DEFAULT CHARACTER SET utf8
```


だが、もちろんバッククオートは必ず使うものでもない






#バッククオートは何の為に使われるのか？
それは下記のリンクからの引用で<br>[phpMyAdminのSQLに付加される「'」に似た記号「`」は何？](https://php1st.com/1184)

```
では、何のためにphpMyAdminではバッククォートが付加されるのでしょうか。
それは、「SELECT * FROM `table`」のようなSQLも実行可能にするためです。
少し難しく言えば、予約語をエスケープするためです。
予約語とは、MySQL側で特別なキーワードだと認識される語句で、TABLE、SQL、INDEX、LOCKなどがあります。こ>のようなキーワードは、そのままテーブル名や列名などに使うことはできません。
ただし、MySQLでは予約語をバッククォートで囲むことで、テーブル名や列名として使用可能になります。
こうした点を考慮して、phpMyAdminで実行されるSQLにはバッククォートが付加されています。
「使用可能」と言っても、一般的にSQLで使われる語句なので、テーブル名などにはふさわしくありません。できるだ>け使わないようにしましょう。
予約語について詳しくは、MySQLのマニュアルを参照してください。
●MySQLの予約語
また、「pop-products」のように、ハイフンでつながれた名前のテーブルも、そのままでは使えないので、>「SELECT * FROM `pop-products`」のようにバッククォートで囲むことになります。
```

ということらしい。